Added creatable option to Select

src/components/Select.js

@@ -1,17 +1,19 @@
 import React from "react";
 import ReactSelect from "react-select";
+import Creatable from "react-select/creatable";
 import { useThemeUI } from "theme-ui";
 
-function Select(props) {
+function Select({ creatable, ...props }) {
   const { theme } = useThemeUI();
 
   function getColor(state) {
     return state.isDisabled ? theme.colors.gray : theme.colors.text;
   }
 
+  const Component = creatable ? Creatable : ReactSelect;
+
   return (
-    <ReactSelect
-      isSearchable={false}
+    <Component
       styles={{
         menu: (provided, state) => ({
           ...provided,
@@ -39,6 +41,10 @@ function Select(props) {
             color: state.isDisabled ? theme.colors.gray : theme.colors.primary,
           },
         }),
+        input: (provided, state) => ({
+          ...provided,
+          color: getColor(state),
+        }),
       }}
       theme={(t) => ({
         ...t,

src/components/map/MapSettings.js

@@ -108,6 +108,7 @@ function MapSettings({
                   { value: "hex", label: "Hex (Coming Soon)" },
                 ]}
                 isOptionDisabled={(option) => option.value === "hex"}
+                isSearchable={false}
               />
             </Box>
             <Flex sx={{ width: "50%", flexDirection: "column" }} ml={2}>
@@ -152,6 +153,7 @@ function MapSettings({
                     (option.value !== "original" &&
                       !map.resolutions[option.value])
                   }
+                  isSearchable={false}
                 />
               </Box>
               <Label sx={{ width: "50%" }} ml={2}>

src/components/token/TokenSettings.js

@@ -62,6 +62,7 @@ function TokenSettings({
                 onChange={(option) =>
                   onSettingsChange("category", option.value)
                 }
+                isSearchable={false}
               />
             </Box>
             <Flex sx={{ flexGrow: 1, alignItems: "center" }} ml={2}>