Work on form select (#73)

* Work on form select
2022-05-27 16:41:11 +02:00 · 2022-05-27 16:41:11 +02:00 · 41762363e2
commit 41762363e2
parent 00da9ba100
9 changed files with 399 additions and 32 deletions
--- a/package.json
+++ b/package.json
@ -47,6 +47,7 @@
    "react-mailchimp-subscribe": "^2.1.3",
    "react-merge-refs": "^1.1.0",
    "react-query": "^3.35.0",
+    "react-select": "^5.3.2",
    "react-use-measure": "^2.1.1",
    "react-youtube": "^9.0.2",
    "sharp": "^0.30.4",
@ -86,6 +87,9 @@
    "stylelint-prettier": "^2.0.0",
    "typescript": "^4.6.3"
  },
+  "resolutions": {
+    "@types/react": "~17.0.43"
+  },
  "engines": {
    "node": ">=14.x",
    "yarn": "1.x"
--- a/public/sitemap-0.xml
+++ b/public/sitemap-0.xml
@ -1,6 +1,2 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://laconic.com</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-04-05T18:49:08.426Z</lastmod></url>
-<url><loc>https://laconic.com/blog</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-04-05T18:49:08.426Z</lastmod></url>
-<url><loc>https://laconic.com/community</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-04-05T18:49:08.426Z</lastmod></url>
-</urlset>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
--- a/src/components/primitives/select/select.css
+++ b/src/components/primitives/select/select.css
@ -0,0 +1,66 @@
+.select {
+  height: 100%;
+  display: flex;
+
+  &__control {
+    appearance: none;
+    width: 100%;
+    min-height: unset;
+    place-self: end;
+    font-size: tovw(24px, 'default', 18px);
+    padding: tovw(16px, 'default', 11px) tovw(10px, 'default', 7px);
+    background: rgb(142 142 142 / 0.1) !important;
+    border: tovw(1px, 'default', 1px) solid transparent !important;
+    border-radius: tovw(8px, 'default', 8px) !important;
+    transition: unset !important;
+
+    &:hover {
+      border: tovw(1px, 'default', 1px) solid transparent;
+    }
+
+    &--is-focused {
+      border: tovw(1px, 'default', 1px) solid var(--color-accent) !important;
+      background: rgb(0 0 244 / 0.1) !important;
+      transition: all 250ms;
+    }
+  }
+
+  &__option {
+    color: var(--color-grey-light) !important;
+
+    &--is-focused {
+      color: white !important;
+      background-color: unset !important;
+    }
+
+    &--is-selected {
+      background-color: unset !important;
+      color: white !important;
+    }
+  }
+
+  [class$='-menu'] {
+    background: rgb(0 0 0 / 0.3);
+    backdrop-filter: blur(2px);
+    margin: 0;
+  }
+
+  [class$='-indicatorContainer'] {
+    padding: 0 tovw(8px, 'default', 2px);
+  }
+
+  [class$='-ValueContainer'],
+  [class$='-Input'] {
+    height: 100%;
+    padding: 0 !important;
+    margin: 0;
+  }
+
+  &__single-value {
+    color: var(--color-white) !important;
+  }
+
+  &__placeholder {
+    color: var(--color-grey-light) !important;
+  }
+}
--- a/src/components/sections/contact/form/form.module.scss
+++ b/src/components/sections/contact/form/form.module.scss
@ -53,7 +53,7 @@
      display: flex;
      flex-direction: column;

-      div:first-child {
+      > div:first-child {
        @include respond-to('mobile') {
          display: flex;
          flex-direction: column;
@ -98,10 +98,6 @@
            opacity: 50%;
            border: none;
            color: var(--color-white);
-
-            &:first-child {
-              color: red;
-            }
          }
        }

--- a/src/components/sections/contact/form/index.tsx
+++ b/src/components/sections/contact/form/index.tsx
@ -1,3 +1,6 @@
+import { useState } from 'react'
+import Select from 'react-select'
+
 import { Container } from '~/components/layout/container'
 import Section from '~/components/layout/section'
 import { Button } from '~/components/primitives/button'
@ -20,6 +23,16 @@ interface Props {
 }

 const Form = ({ data }: Props) => {
+  const selectOptions = [
+    { value: 'Partnership', label: 'Partnership' },
+    { value: 'Validator/Member', label: 'Validator/Member' },
+    { value: 'Investor', label: 'Investor' },
+    { value: 'Press', label: 'Press' },
+    { value: 'Marketing', label: 'Marketing' }
+  ]
+
+  const [selectedOption, setSelectedOption] = useState<any>(null)
+
  return (
    <Section className={s['section']}>
      <Container className={s['container']}>
@ -33,7 +46,7 @@ const Form = ({ data }: Props) => {
          <div>
            <label htmlFor="partnership">
              {data?.formLabelPartner}
-              <select name="partnership" id="partnership" required>
+              {/* <select name="partnership" id="partnership" required>
                <option value="" hidden>
                  {data?.formPlaceholderPartner}
                </option>
@ -42,7 +55,16 @@ const Form = ({ data }: Props) => {
                <option value="Investor">Investor</option>
                <option value="Press">Press</option>
                <option value="Marketing">Marketing</option>
-              </select>
+              </select> */}
+              <Select
+                instanceId={'Contact'}
+                className="select"
+                classNamePrefix="select"
+                placeholder={data?.formPlaceholderPartner}
+                value={selectedOption}
+                onChange={setSelectedOption}
+                options={selectOptions}
+              />
            </label>
            <label htmlFor="email">
              {data?.formLabelEmail}
--- a/src/components/sections/partners/contact/contact.module.scss
+++ b/src/components/sections/partners/contact/contact.module.scss
@ -115,7 +115,7 @@
      display: flex;
      flex-direction: column;

-      div:first-child {
+      > div:first-child {
        @include respond-to('mobile') {
          display: flex;
          flex-direction: column;
--- a/src/components/sections/partners/contact/index.tsx
+++ b/src/components/sections/partners/contact/index.tsx
@ -1,3 +1,6 @@
+import { useState } from 'react'
+import Select from 'react-select'
+
 import Line from '~/components/icons/line'
 import { Container } from '~/components/layout/container'
 import Section from '~/components/layout/section'
@ -31,6 +34,15 @@ interface Props {
 }

 const Contact = ({ data }: Props) => {
+  const selectOptions = [
+    { value: 'Validator/Member', label: 'Validator/Member' },
+    { value: 'Investor', label: 'Investor' },
+    { value: 'Developer', label: 'Developer' },
+    { value: 'Customer', label: 'Prospective Customer' }
+  ]
+
+  const [selectedOption, setSelectedOption] = useState<any>(null)
+
  return (
    <Section className={s['section']}>
      <Container className={s['container']}>
@ -102,15 +114,15 @@ const Contact = ({ data }: Props) => {
              </label>
              <label htmlFor="partnership">
                {data?.contactInquiryLabel}
-                <select name="partnership" id="partnership" required>
-                  <option value="" hidden>
-                    {data?.contactInquiryPlaceholder}
-                  </option>
-                  <option value="Validator/Member">Validator/Member</option>
-                  <option value="Investor">Investor</option>
-                  <option value="Developer">Contributing Developer</option>
-                  <option value="Customer">Prospective Customer</option>
-                </select>
+                <Select
+                  instanceId={'Partners'}
+                  className="select"
+                  classNamePrefix="select"
+                  placeholder={data?.contactInquiryPlaceholder}
+                  value={selectedOption}
+                  onChange={setSelectedOption}
+                  options={selectOptions}
+                />
              </label>
            </div>
            <label htmlFor="message">
--- a/src/css/global.scss
+++ b/src/css/global.scss
@ -133,3 +133,90 @@ p {
    display: none !important;
  }
 }
+
+.select {
+  height: 100% !important;
+  display: flex !important;
+
+  .select__control {
+    @include respond-to('mobile') {
+      margin-top: tovw(20px, 'default', 16px) !important;
+    }
+
+    appearance: none !important;
+    width: 100% !important;
+    min-height: unset !important;
+    place-self: end !important;
+    font-size: tovw(24px, 'default', 18px) !important;
+    padding: tovw(16px, 'default', 11px) tovw(10px, 'default', 7px) !important;
+    background: rgb(142 142 142 / 0.1) !important;
+    border: tovw(1px, 'default', 1px) solid transparent !important;
+    border-radius: tovw(8px, 'default', 8px) !important;
+    transition: unset !important;
+
+    &:hover {
+      border: tovw(1px, 'default', 1px) solid transparent !important;
+    }
+
+    &--is-focused {
+      border: tovw(1px, 'default', 1px) solid var(--color-accent) !important;
+      box-shadow: unset !important;
+      background: rgb(0 0 244 / 0.1) !important;
+      transition: all 250ms !important;
+    }
+  }
+
+  &__indicator-separator {
+    display: none !important;
+  }
+
+  &__option {
+    color: var(--color-grey-light) !important;
+
+    &--is-focused {
+      color: white !important;
+      background-color: unset !important;
+    }
+
+    &--is-selected {
+      background-color: unset !important;
+      color: white !important;
+    }
+  }
+
+  [class$='-menu'] {
+    background: rgb(0 0 0 / 0.2) !important;
+    backdrop-filter: blur(16px) !important;
+    font-size: tovw(24px, 'default', 18px) !important;
+    margin: 0 !important;
+
+    @-moz-document url-prefix("") {
+      background-color: var(--color-black) !important;
+    }
+  }
+
+  [class$='-indicatorContainer'] {
+    padding: 0 tovw(8px, 'default', 2px) !important;
+  }
+
+  [class$='-ValueContainer'],
+  [class$='-Input'] {
+    height: 100% !important;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+
+  &__value-container,
+  &__input-container {
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+
+  &__single-value {
+    color: var(--color-white) !important;
+  }
+
+  &__placeholder {
+    color: var(--color-grey-light) !important;
+  }
+}
--- a/yarn.lock
+++ b/yarn.lock
@ -110,7 +110,7 @@
  dependencies:
    "@babel/types" "^7.17.0"

-"@babel/helper-module-imports@^7.16.7":
+"@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.7":
  version "7.16.7"
  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
  integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
@ -143,6 +143,11 @@
  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
  integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==

+"@babel/helper-plugin-utils@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz#86c2347da5acbf5583ba0a10aed4c9bf9da9cf96"
+  integrity sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA==
+
 "@babel/helper-replace-supers@^7.16.7":
  version "7.16.7"
  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.16.7.tgz#e9f5f5f32ac90429c1a4bdec0f231ef0c2838ab1"
@ -248,6 +253,13 @@
  dependencies:
    "@babel/helper-plugin-utils" "^7.16.7"

+"@babel/plugin-syntax-jsx@^7.12.13":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.17.12.tgz#834035b45061983a491f60096f61a2e7c5674a47"
+  integrity sha512-spyY3E3AURfxh/RHtjx5j6hs8am5NbUBGfcZ2vB3uShSpZdQyXSf5rR5Mk76vbtlAZOelyVQ71Fg0x9SG4fsog==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/plugin-syntax-object-rest-spread@^7.0.0", "@babel/plugin-syntax-object-rest-spread@^7.8.3":
  version "7.8.3"
  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
@ -436,7 +448,7 @@
  dependencies:
    regenerator-runtime "^0.13.4"

-"@babel/runtime@^7.12.13":
+"@babel/runtime@^7.12.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.13.10", "@babel/runtime@^7.8.7":
  version "7.18.3"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
  integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
@ -481,6 +493,89 @@
  resolved "https://registry.yarnpkg.com/@corex/deepmerge/-/deepmerge-2.6.148.tgz#8fa825d53ffd1cbcafce1b6a830eefd3dcc09dd5"
  integrity sha512-6QMz0/2h5C3ua51iAnXMPWFbb1QOU1UvSM4bKBw5mzdT+WtLgjbETBBIQZ+Sh9WvEcGwlAt/DEdRpIC3XlDBMA==

+"@emotion/babel-plugin@^11.7.1":
+  version "11.9.2"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz#723b6d394c89fb2ef782229d92ba95a740576e95"
+  integrity sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.12.13"
+    "@babel/plugin-syntax-jsx" "^7.12.13"
+    "@babel/runtime" "^7.13.10"
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.5"
+    "@emotion/serialize" "^1.0.2"
+    babel-plugin-macros "^2.6.1"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.0.13"
+
+"@emotion/cache@^11.4.0", "@emotion/cache@^11.7.1":
+  version "11.7.1"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.7.1.tgz#08d080e396a42e0037848214e8aa7bf879065539"
+  integrity sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/sheet" "^1.1.0"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    stylis "4.0.13"
+
+"@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", "@emotion/memoize@^0.7.5":
+  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.8.1":
+  version "11.9.0"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.9.0.tgz#b6d42b1db3bd7511e7a7c4151dc8bc82e14593b8"
+  integrity sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@emotion/babel-plugin" "^11.7.1"
+    "@emotion/cache" "^11.7.1"
+    "@emotion/serialize" "^1.0.3"
+    "@emotion/utils" "^1.1.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.0.2", "@emotion/serialize@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.3.tgz#99e2060c26c6292469fb30db41f4690e1c8fea63"
+  integrity sha512-2mSSvgLfyV3q+iVh3YWgNlUc2a9ZlDU7DjuP5MjK3AXRR0dYigCrP99aeFtaB2L/hjfEZdSThn5dsZ0ufqbvsA==
+  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.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.0.tgz#56d99c41f0a1cda2726a05aa6a20afd4c63e58d2"
+  integrity sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==
+
+"@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", "@emotion/utils@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.1.0.tgz#86b0b297f3f1a0f2bdb08eeac9a2f49afd40d0cf"
+  integrity sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==
+
+"@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==
+
 "@endemolshinegroup/cosmiconfig-typescript-loader@3.0.2":
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/@endemolshinegroup/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-3.0.2.tgz#eea4635828dde372838b0909693ebd9aafeec22d"
@ -1153,7 +1248,23 @@
  dependencies:
    "@types/react" "^17"

-"@types/react@^17", "@types/react@^17.0.43":
+"@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", "@types/react@~17.0.43":
+  version "17.0.45"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.45.tgz#9b3d5b661fd26365fefef0e766a1c6c30ccf7b3f"
+  integrity sha512-YfhQ22Lah2e3CHPsb93tRwIGNiSwkuz1/blk4e6QrWS0jQzCSNbGLtOEYhPg02W0yGTTmpajp7dCTbBAMN3qsg==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/react@^17.0.43":
  version "17.0.44"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.44.tgz#c3714bd34dd551ab20b8015d9d0dbec812a51ec7"
  integrity sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g==
@ -1553,6 +1664,15 @@ babel-plugin-dynamic-import-node@^2.3.3:
  dependencies:
    object.assign "^4.1.0"

+babel-plugin-macros@^2.6.1:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
+  integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    cosmiconfig "^6.0.0"
+    resolve "^1.12.0"
+
 babel-plugin-syntax-trailing-function-commas@^7.0.0-beta.0:
  version "7.0.0-beta.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz#aa213c1435e2bffeb6fca842287ef534ad05d5cf"
@ -2040,7 +2160,7 @@ constant-case@^3.0.4:
    tslib "^2.0.3"
    upper-case "^2.0.2"

-convert-source-map@^1.7.0:
+convert-source-map@^1.5.0, convert-source-map@^1.7.0:
  version "1.8.0"
  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
  integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
@ -2075,6 +2195,17 @@ cosmiconfig@7.0.1, cosmiconfig@^7.0.0, cosmiconfig@^7.0.1:
    path-type "^4.0.0"
    yaml "^1.10.0"

+cosmiconfig@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
+  integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.1.0"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.7.2"
+
 create-require@^1.1.0:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
@ -2329,6 +2460,14 @@ doctrine@^3.0.0:
  dependencies:
    esutils "^2.0.2"

+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"
+
 dot-case@^3.0.4:
  version "3.0.4"
  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
@ -2909,6 +3048,11 @@ fill-range@^7.0.1:
  dependencies:
    to-regex-range "^5.0.1"

+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
@ -3289,6 +3433,13 @@ header-case@^2.0.4:
    capital-case "^1.0.4"
    tslib "^2.0.3"

+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"
+
 hosted-git-info@^2.1.4:
  version "2.8.9"
  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
@ -3365,7 +3516,7 @@ immutable@~3.7.6:
  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b"
  integrity sha1-E7TTyxK++hVIKib+Gy665kAHHks=

-import-fresh@^3.0.0, import-fresh@^3.2.1:
+import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1:
  version "3.3.0"
  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
@ -4155,6 +4306,11 @@ mathml-tag-names@^2.1.3:
  resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
  integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==

+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==
+
 meow@^9.0.0:
  version "9.0.0"
  resolved "https://registry.yarnpkg.com/meow/-/meow-9.0.0.tgz#cd9510bc5cac9dee7d03c73ee1f9ad959f4ea364"
@ -4886,7 +5042,7 @@ promise@^7.1.1:
  dependencies:
    asap "~2.0.3"

-prop-types@15.8.1, prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@15.8.1, prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
  version "15.8.1"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@ -4989,7 +5145,7 @@ react-intersection-observer@^8.33.1:
  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.33.1.tgz#8e6442cac7052ed63056e191b7539e423e7d5c64"
  integrity sha512-3v+qaJvp3D1MlGHyM+KISVg/CMhPiOlO6FgPHcluqHkx4YFCLuyXNlQ/LE6UkbODXlQcLOppfX6UMxCEkUhDLw==

-react-is@^16.13.1:
+react-is@^16.13.1, react-is@^16.7.0:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@ -5036,6 +5192,19 @@ react-remove-scroll@^2.4.3:
    use-callback-ref "^1.3.0"
    use-sidecar "^1.1.2"

+react-select@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.3.2.tgz#ecee0d5c59ed4acb7f567f7de3c75a488d93dacb"
+  integrity sha512-W6Irh7U6Ha7p5uQQ2ZnemoCQ8mcfgOtHfw3wuMzG6FAu0P+CYicgofSLOq97BhjMx8jS+h+wwWdCBeVVZ9VqlQ==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/react" "^11.8.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-style-singleton@^2.2.0:
  version "2.2.0"
  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.0.tgz#70f45f5fef97fdb9a52eed98d1839fa6b9032b22"
@ -5045,6 +5214,16 @@ react-style-singleton@^2.2.0:
    invariant "^2.2.4"
    tslib "^2.0.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-use-measure@^2.1.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/react-use-measure/-/react-use-measure-2.1.1.tgz#5824537f4ee01c9469c45d5f7a8446177c6cc4ba"
@ -5238,7 +5417,7 @@ resolve-from@^4.0.0:
  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==

-resolve@^1.10.0, resolve@^1.13.1, resolve@^1.17.0, resolve@^1.20.0, resolve@^1.22.0:
+resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.17.0, resolve@^1.20.0, resolve@^1.22.0:
  version "1.22.0"
  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
  integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
@ -5537,7 +5716,7 @@ source-map-support@^0.5.17:
    buffer-from "^1.0.0"
    source-map "^0.6.0"

-source-map@^0.5.0:
+source-map@^0.5.0, source-map@^0.5.7:
  version "0.5.7"
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@ -5850,6 +6029,11 @@ stylelint@^14.7.1:
    v8-compile-cache "^2.3.0"
    write-file-atomic "^4.0.1"

+stylis@4.0.13:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
+  integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
+
 subscriptions-transport-ws@^0.11.0:
  version "0.11.0"
  resolved "https://registry.yarnpkg.com/subscriptions-transport-ws/-/subscriptions-transport-ws-0.11.0.tgz#baf88f050cba51d52afe781de5e81b3c31f89883"
@ -6414,7 +6598,7 @@ yaml-ast-parser@^0.0.43:
  resolved "https://registry.yarnpkg.com/yaml-ast-parser/-/yaml-ast-parser-0.0.43.tgz#e8a23e6fb4c38076ab92995c5dca33f3d3d7c9bb"
  integrity sha512-2PTINUwsRqSd+s8XxKaJWQlUuEMHJQyEuh2edBbW8KNJz0SJPwUSD2zRWqezFEdN7IzAgeuYHFUCF7o8zRdZ0A==

-yaml@^1.10.0, yaml@^1.10.2:
+yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2:
  version "1.10.2"
  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==