reza added some thing

package.json

@@ -14,6 +14,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
+    "react-select": "^5.1.0",
     "sass": "^1.43.3",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"

src/App.tsx

@@ -2,7 +2,8 @@ import "./global.scss";
 import Search from "./components/Search";
 import PopularSearch from "./components/PopularSearch";
 import Input from "./components/Input";
-import Country from "./components/Country";
+import Country from "./components/SelectSearch";
+import SelectCheckbox from "./components/SelectCheckbox";
 
 function App() {
   return (
@@ -19,7 +20,9 @@ function App() {
         message={"اشتباه است."}
       />
       <hr />
-      <Country lang="en" />
+      <Country lang="fa" />
+      <hr />
+      <SelectCheckbox />
     </div>
   );
 }

src/components/Checkbox/index.scss

@@ -0,0 +1,98 @@
+.checkbox-symbol {
+  position: absolute;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  user-select: none;
+}
+
+.checkbox-container {
+  box-sizing: border-box;
+  background: #ffffff;
+  color: #222;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-flow: row wrap;
+}
+
+.checkbox-container * {
+  box-sizing: border-box;
+}
+
+.checkbox-input {
+  position: absolute;
+  visibility: hidden;
+}
+
+.checkbox {
+  user-select: none;
+  cursor: pointer;
+  padding: 6px 8px;
+  border-radius: 6px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  display: flex;
+}
+
+.checkbox:not(:last-child) {
+  margin-right: 6px;
+}
+
+.checkbox:hover {
+  background: inherit;
+}
+
+.checkbox span {
+  vertical-align: middle;
+  transform: translate3d(0, 0, 0);
+}
+
+.checkbox span:first-child {
+  position: relative;
+  flex: 0 0 18px;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  transform: scale(1);
+  border: 1px solid #cccfdb;
+  transition: all 0.3s ease;
+}
+
+.checkbox span:first-child svg {
+  position: absolute;
+  top: 3px;
+  left: 2px;
+  fill: none;
+  stroke: #fff;
+  stroke-dasharray: 16px;
+  stroke-dashoffset: 16px;
+  transition: all 0.3s ease;
+  transform: translate3d(0, 0, 0);
+}
+
+.checkbox span:last-child {
+  padding-left: 8px;
+  line-height: 18px;
+}
+
+.checkbox:hover span:first-child {
+  border-color: #0077ff;
+}
+
+.checkbox-input:checked + .checkbox span:first-child {
+  background: #0077ff;
+  border-color: #0077ff;
+  animation: zoom-in-out 0.3s ease;
+}
+
+.checkbox-input:checked + .checkbox span:first-child svg {
+  stroke-dashoffset: 0;
+}
+
+@keyframes zoom-in-out {
+  50% {
+    transform: scale(0.9);
+  }
+}

src/components/Checkbox/index.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+export default function Checkbox(props : any) {
+  return (
+    <div>
+      <svg className="checkbox-symbol">
+        <symbol id="check" viewBox="0 0 12 10">
+          <polyline
+            points="1.5 6 4.5 9 10.5 1"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          ></polyline>
+        </symbol>
+      </svg>
+
+      <div className="checkbox-container">
+        <input className="checkbox-input" id="apples" type="checkbox" checked={props.checked} />
+        <label className="checkbox" htmlFor="apples">
+          <span>
+            <svg width="12px" height="10px">
+              <use xlinkHref="#check"></use>
+            </svg>
+          </span>
+        </label>
+      </div>
+    </div>
+  );
+}

src/components/Country/index.tsx

@@ -1,153 +0,0 @@
-import React, { useState } from "react";
-import _ from "lodash";
-
-import iran from "./iran.png";
-import iraq from "./iraq.png";
-import spain from "./spain.png";
-import uk from "./united-kingdom.png";
-import arrow from "./arrow.png";
-
-import Search from "../Search";
-
-interface Types {
-  lang?: string;
-  theme?: string;
-  countries?: Array<object>;
-  label?: string;
-}
-
-interface Value {
-  icon: any;
-  name: string;
-}
-
-const inputStatusHandler = (
-  value: string,
-  focus: boolean,
-  status: boolean,
-  primary: string,
-  success: string,
-  danger: string
-) => {
-  if (!focus) {
-    return "";
-  } else {
-    if (!value) {
-      return primary;
-    } else {
-      if (status) {
-        return success;
-      } else {
-        return danger;
-      }
-    }
-  }
-};
-
-const langDetector = (lang: string, option1: any, option2: any) => {
-  return lang === "fa" ? option1 : option2;
-};
-
-export default function Country(props: Types) {
-  const [value, setValue] = useState<Value | undefined>(undefined);
-  const [countriesToggle, setCountriesToggle] = useState(false);
-  const { lang, theme, countries, label } = props;
-
-  const onChange = (val: Value) => {
-    setValue(val);
-  };
-
-  return (
-    <div
-      className={_.join(
-        ["country", langDetector(lang as string, "fa", "en")],
-        " "
-      )}
-    >
-      <div
-        className="country__box"
-        onClick={() => setCountriesToggle(() => true)}
-        onClickCapture={() => setCountriesToggle(() => false)}
-      >
-        <label
-          className={_.join(
-            [
-              langDetector(
-                lang as string,
-                "country__box--labelFa",
-                "country__box--labelEn"
-              ),
-              "transition",
-              countriesToggle || value ? "country__box--labelFocus" : "",
-            ],
-            " "
-          )}
-        >
-          {label}
-        </label>
-        {value && (
-          <div className="country__box--value">
-            <img src={value.icon} alt={value.name} />
-            <strong>{value.name}</strong>
-          </div>
-        )}
-
-        <img
-          src={arrow}
-          alt={langDetector(lang as string, "فلش", "arrow")}
-          className={_.join(
-            [
-              "country__box--arrow",
-              langDetector(
-                lang as string,
-                "country__box--arrowFa",
-                "country__box--arrowEn"
-              ),
-            ],
-            " "
-          )}
-        />
-      </div>
-      {countriesToggle && (
-        <div
-          className={_.join(
-            [
-              "country__list",
-              countriesToggle ? "country__listActive" : "",
-              "transition",
-            ],
-            " "
-          )}
-        >
-          <Search lang={lang} />
-          <ul onClick={() => setCountriesToggle(false)}>
-            {countries?.map((item: any, i: any) => (
-              <>
-                <li
-                  key={i}
-                  className="transition"
-                  onClick={() => setValue(() => item as Value)}
-                >
-                  {item?.name}
-                </li>
-                {i !== countries?.length - 1 && <hr />}
-              </>
-            ))}
-          </ul>
-        </div>
-      )}
-    </div>
-  );
-}
-
-Country.defaultProps = {
-  lang: "fa",
-  theme: "light",
-  label: "کشور خود را انتخاب کنید",
-  countries: [
-    { name: "IRAN", icon: iran },
-    { name: "IRAQ", icon: iraq },
-    { name: "SPAIN", icon: spain },
-    { name: "UK", icon: uk },
-  ],
-};

src/components/SelectCheckbox/index.scss

@@ -0,0 +1,103 @@
+$primary: #06bace;
+$gray: #dbdbdb;
+$danger: #e00a0a;
+$success: #23c933;
+
+.select-search {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  .search {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    img{
+      cursor: pointer;
+    }
+    &__icon {
+      width: 27px;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      &Fa {
+        left: 10px;
+      }
+      &En {
+        right: 10px;
+      }
+    }
+  
+    &__x {
+      width: 12px;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      opacity: 0;
+      &Fa {
+        right: 10px;
+      }
+      &En {
+        left: 10px;
+      }
+      &Active{
+        opacity: 1;
+      }
+    }
+  
+    input {
+      padding: 15px 30px 15px 30px;
+      font-size: 14px;
+      border: 1.7px solid $gray;
+      border-radius: 5px;
+      background-color: inherit;
+      &::placeholder {
+        color: $gray;
+      }
+      &:focus {
+        border-color: $primary;
+        outline: 0px;
+        color: #246e8a;
+        &::placeholder {
+          color: #246e8a;
+        }
+      }
+    }
+  }
+  &__list{
+    position: relative;
+    bottom: -8px;
+    left: 0px;
+    display: flex;
+    flex-direction: column;
+    padding: 0px 20px;
+    border: 1.7px solid $gray;
+    border-radius: 5px;
+    ul{
+      list-style: none;
+      padding: 0px;
+      hr{
+        border: 1px solid $gray;
+        opacity: 0.3 !important;
+      }
+      li{
+        padding: 5px 0px;
+        color: $gray;
+        display: flex;
+        align-items: center;
+        
+      }
+    }
+  }
+  
+  
+}
+
+.en {
+  direction: ltr;
+  text-align: left;
+}
+
+.fa {
+  direction: rtl;
+  text-align: right;
+}

src/components/SelectCheckbox/index.tsx

@@ -0,0 +1,152 @@
+import React, { useState } from "react";
+import _ from "lodash";
+import Checkbox from "../Checkbox";
+
+import xIcon from "./x.png";
+
+interface Types {
+  lang?: string;
+  theme?: string;
+  list?: Array<object>;
+  label?: string;
+}
+
+interface Value {
+  icon: any;
+  name: string;
+}
+
+// const inputStatusHandler = (
+//   value: string,
+//   focus: boolean,
+//   status: boolean,
+//   primary: string,
+//   success: string,
+//   danger: string
+// ) => {
+//   if (!focus) {
+//     return "";
+//   } else {
+//     if (!value) {
+//       return primary;
+//     } else {
+//       if (status) {
+//         return success;
+//       } else {
+//         return danger;
+//       }
+//     }
+//   }
+// };
+
+const langDetector = (lang: string, option1: any, option2: any) => {
+  return lang === "fa" ? option1 : option2;
+};
+
+export default function SelectSearch(props: Types) {
+  const [selectedItem, setSelectedItem] = useState("");
+  const [value, setValue] = useState<string>("");
+
+  const [toggle, setToggle] = useState(false);
+  const { lang, theme, list, label } = props;
+
+  const onChangeItem = (val: string) => {
+    setSelectedItem(val);
+  };
+
+  const onChangeText = (val: string) => {
+    setValue(val);
+  };
+
+  return (
+    <div
+      className={_.join(
+        ["select-search", langDetector(lang as string, "fa", "en")],
+        " "
+      )}
+    >
+      <div
+        className={_.join(
+          ["search", langDetector(lang as string, "fa", "en")],
+          " "
+        )}
+      >
+        <input
+          type="search"
+          className="transition"
+          onChange={(e: any) => onChangeText(e.target.value)}
+          onFocus={(e: any) => setToggle(true)}
+          placeholder={langDetector(
+            lang as string,
+            "تنظیمات",
+            "setting"
+          )}
+        />
+        {/* <img
+          src={searchIcon}
+          alt={langDetector(lang as string, "جستجو", "search")}
+          className={_.join(
+            [
+              "search__icon",
+              langDetector(lang as string, "search__iconFa", "search__iconEn"),
+            ],
+            " "
+          )}
+        /> */}
+        <img
+          src={xIcon}
+          alt={langDetector(lang as string, "پاک کردن", "clear")}
+          className={_.join(
+            [
+              "search__x",
+              "transition",
+              langDetector(lang as string, "search__xFa", "search__xEn"),
+              value ? "search__xActive" : "",
+            ],
+            " "
+          )}
+          onClick={() => setValue("")}
+        />
+      </div>
+      {toggle && (
+        <div
+          className={_.join(
+            [
+              "select-search__list",
+              toggle ? "select-search__listActive" : "",
+              "transition",
+            ],
+            " "
+          )}
+        >
+          <ul>
+            {list?.map((item: any, i: any) => (
+              <>
+                <li
+                  key={i}
+                  className="transition"
+                >
+                  <Checkbox checked={false} />
+                  <strong>{item?.name}</strong>
+                </li>
+                {i !== list?.length - 1 && <hr />}
+              </>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+
+SelectSearch.defaultProps = {
+  lang: "fa",
+  theme: "light",
+  label: "کشور خود را انتخاب کنید",
+  list: [
+    { name: "وسایل آشپزخانه" },
+    { name: "غریق نجات از تمام جهات" },
+    { name: "قاشق و چنگال" },
+    { name: "وسایل آشپزخانه"},
+  ],
+};

src/components/SelectSearch/index.scss

@@ -3,63 +3,73 @@ $gray: #dbdbdb;
 $danger: #e00a0a;
 $success: #23c933;
 
-.country {
+.select-search {
   display: flex;
   flex-direction: column;
   position: relative;
-  &__box {
+  .search {
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
     position: relative;
-    padding: 10px 10px;
+    img{
-    border: 1.7px solid $gray;
+      cursor: pointer;
-    border-radius: 5px;
-    min-height: 28px;
-    &--value{
-      display: flex;
-      align-items: center;
-
     }
-    label {
+    &__icon {
-      width : fit-content;
+      width: 27px;
       position: absolute;
       top: 50%;
-      font-size: 13px;
       transform: translateY(-50%);
-      color: $gray;
+      &Fa {
-      padding: 0px 5px;
+        left: 10px;
-    }
-    &--labelFa{
-      right: 15px;
       }
-    &--labelEn{
+      &En {
-      left: 15px;
+        right: 10px;
       }
-    &--labelFocus{
-      top: -2px !important;
-      font-size: 10px !important;
-      background-color: white;
     }
-    &--arrow{
+  
+    &__x {
+      width: 12px;
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
-      &Fa{
+      opacity: 0;
-        left: 10px;
+      &Fa {
-      }
-      &En{
         right: 10px;
       }
+      &En {
+        left: 10px;
+      }
+      &Active{
+        opacity: 1;
       }
     }
   
+    input {
+      padding: 15px 30px 15px 30px;
+      font-size: 14px;
+      border: 1.7px solid $gray;
+      border-radius: 5px;
+      background-color: inherit;
+      &::placeholder {
+        color: $gray;
+      }
+      &:focus {
+        border-color: $primary;
+        outline: 0px;
+        color: #246e8a;
+        &::placeholder {
+          color: #246e8a;
+        }
+      }
+    }
+  }
   &__list{
     position: relative;
     bottom: -8px;
     left: 0px;
     display: flex;
     flex-direction: column;
-    padding: 10px 20px;
+    padding: 0px 20px;
     border: 1.7px solid $gray;
     border-radius: 5px;
     ul{
@@ -71,6 +81,9 @@ $success: #23c933;
       li{
         padding: 5px 0px;
         color: $gray;
+        display: flex;
+        align-items: center;
+        
       }
     }
   }

src/components/SelectSearch/index.tsx

@@ -0,0 +1,162 @@
+import React, { useState } from "react";
+import _ from "lodash";
+
+import iran from "./iran.png";
+import iraq from "./iraq.png";
+import spain from "./spain.png";
+import uk from "./united-kingdom.png";
+import arrow from "./arrow.png";
+
+import searchIcon from "./icon.png";
+import xIcon from "./x.png";
+
+interface Types {
+  lang?: string;
+  theme?: string;
+  countries?: Array<object>;
+  label?: string;
+}
+
+interface Value {
+  icon: any;
+  name: string;
+}
+
+// const inputStatusHandler = (
+//   value: string,
+//   focus: boolean,
+//   status: boolean,
+//   primary: string,
+//   success: string,
+//   danger: string
+// ) => {
+//   if (!focus) {
+//     return "";
+//   } else {
+//     if (!value) {
+//       return primary;
+//     } else {
+//       if (status) {
+//         return success;
+//       } else {
+//         return danger;
+//       }
+//     }
+//   }
+// };
+
+const langDetector = (lang: string, option1: any, option2: any) => {
+  return lang === "fa" ? option1 : option2;
+};
+
+export default function SelectSearch(props: Types) {
+  const [selectedItem, setSelectedItem] = useState("");
+  const [value, setValue] = useState<string>("");
+
+  const [toggle, setToggle] = useState(false);
+  const { lang, theme, countries, label } = props;
+
+  const onChangeItem = (val: string) => {
+    setSelectedItem(val);
+  };
+
+  const onChangeText = (val: string) => {
+    setValue(val);
+  };
+
+  return (
+    <div
+      className={_.join(
+        ["select-search", langDetector(lang as string, "fa", "en")],
+        " "
+      )}
+    >
+      <div
+        className={_.join(
+          ["search", langDetector(lang as string, "fa", "en")],
+          " "
+        )}
+      >
+        <input
+          type="search"
+          className="transition"
+          onChange={(e: any) => onChangeText(e.target.value)}
+          onFocus={(e: any) => setToggle(true)}
+          onBlur={(e: any) => setTimeout(() => {setToggle(false)}, 300)}
+          value={selectedItem}
+          placeholder={langDetector(
+            lang as string,
+            "نام کالا را جستجو کنید",
+            "search product name"
+          )}
+        />
+        <img
+          src={searchIcon}
+          alt={langDetector(lang as string, "جستجو", "search")}
+          className={_.join(
+            [
+              "search__icon",
+              langDetector(lang as string, "search__iconFa", "search__iconEn"),
+            ],
+            " "
+          )}
+        />
+        <img
+          src={xIcon}
+          alt={langDetector(lang as string, "پاک کردن", "clear")}
+          className={_.join(
+            [
+              "search__x",
+              "transition",
+              langDetector(lang as string, "search__xFa", "search__xEn"),
+              value ? "search__xActive" : "",
+            ],
+            " "
+          )}
+          onClick={() => setValue("")}
+        />
+      </div>
+      {toggle && (
+        <div
+          className={_.join(
+            [
+              "select-search__list",
+              toggle ? "select-search__listActive" : "",
+              "transition",
+            ],
+            " "
+          )}
+        >
+          <ul onClick={() => setToggle(false)}>
+            {countries?.map((item: any, i: any) => (
+              <>
+                <li
+                  key={i}
+                  className="transition"
+                  onClick={(e) => setSelectedItem(item.name)}
+                >
+                  <img src={item?.icon} alt="" />
+
+                  {item?.name}
+                </li>
+                {i !== countries?.length - 1 && <hr />}
+              </>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+
+SelectSearch.defaultProps = {
+  lang: "fa",
+  theme: "light",
+  label: "کشور خود را انتخاب کنید",
+  countries: [
+    { name: "IRAN", icon: iran },
+    { name: "IRAQ", icon: iraq },
+    { name: "SPAIN", icon: spain },
+    { name: "UK", icon: uk },
+  ],
+};

src/global.scss

@@ -1,7 +1,9 @@
 @import './components/Search/index.scss';
 @import './components/PopularSearch/index.scss';
 @import './components/Input/index.scss';
-@import './components/Country/index.scss';
+@import './components/SelectSearch/index.scss';
+@import './components/Checkbox/index.scss';
+@import './components/SelectCheckbox/index.scss';
 
 .app{
   padding: 50px 20px;

yarn.lock

@@ -1098,6 +1098,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.0", "@babel/runtime@^7.13.10", "@babel/runtime@^7.8.7":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.0.tgz#e27b977f2e2088ba24748bf99b5e1dece64e4f0b"
+  integrity sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.12.5", "@babel/runtime@^7.9.2":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
@@ -1161,6 +1168,71 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
+"@emotion/cache@^11.4.0", "@emotion/cache@^11.5.0":
+  version "11.5.0"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.5.0.tgz#a5eb78cbef8163939ee345e3ddf0af217b845e62"
+  integrity sha512-mAZ5QRpLriBtaj/k2qyrXwck6yeoz1V5lMt/jfj6igWU35yYlNKs2LziXVgvH81gnJZ+9QQNGelSsnuoAy6uIw==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/sheet" "^1.0.3"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    stylis "^4.0.10"
+
+"@emotion/hash@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+
+"@emotion/memoize@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
+  integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
+
+"@emotion/react@^11.1.1":
+  version "11.5.0"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.5.0.tgz#19b5771bbfbda5e8517e948a2d9064810f0022bd"
+  integrity sha512-MYq/bzp3rYbee4EMBORCn4duPQfgpiEB5XzrZEBnUZAL80Qdfr7CEv/T80jwaTl/dnZmt9SnTa8NkTrwFNpLlw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@emotion/cache" "^11.5.0"
+    "@emotion/serialize" "^1.0.2"
+    "@emotion/sheet" "^1.0.3"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965"
+  integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==
+  dependencies:
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/unitless" "^0.7.5"
+    "@emotion/utils" "^1.0.0"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.3.tgz#00c326cd7985c5ccb8fe2c1b592886579dcfab8f"
+  integrity sha512-YoX5GyQ4db7LpbmXHMuc8kebtBGP6nZfRC5Z13OKJMixBEwdZrJ914D6yJv/P+ZH/YY3F5s89NYX2hlZAf3SRQ==
+
+"@emotion/unitless@^0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
+"@emotion/utils@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
+  integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
+
+"@emotion/weak-memoize@^0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
+  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
+
 "@eslint/eslintrc@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.3.0.tgz#d736d6963d7003b6514e6324bec9c602ac340318"
@@ -1823,6 +1895,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-transition-group@^4.4.0":
+  version "4.4.4"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
+  integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^17.0.0":
   version "17.0.33"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.33.tgz#e01ae3de7613dac1094569880bb3792732203ad5"
@@ -4188,6 +4267,14 @@ dom-converter@^0.2:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -5516,6 +5603,13 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hoist-non-react-statics@^3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hoopy@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@@ -7145,6 +7239,11 @@ media-typer@0.3.0:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
+memoize-one@^5.0.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 memory-fs@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -8877,7 +8976,7 @@ prompts@2.4.0, prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.7.2:
+prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9097,7 +9196,7 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
-react-is@^16.8.1:
+react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9178,6 +9277,29 @@ react-scripts@4.0.3:
   optionalDependencies:
     fsevents "^2.1.3"
 
+react-select@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.1.0.tgz#ac384c8e25ba6f03126026192b2bdad0f53fbf50"
+  integrity sha512-SkEBD1AYsSXrIdNj5HBt7+Ehe+jxdiB448J0atJqR6lE3l/GcFlRf4JYB3NlHe/02jrW4AnIQLo1t0IqWrxXOw==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/react" "^11.1.1"
+    "@types/react-transition-group" "^4.4.0"
+    memoize-one "^5.0.0"
+    prop-types "^15.6.0"
+    react-transition-group "^4.3.0"
+
+react-transition-group@^4.3.0:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
+  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@@ -10386,6 +10508,11 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
+stylis@^4.0.10:
+  version "4.0.10"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
+  integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"