New nav (#77)

* Work on new nav Co-authored-by: Nazareno Oviedo <nazareno@basement.studio>
2022-06-29 19:36:36 +02:00 · 2022-06-29 19:36:36 +02:00 · 538e03cf94
commit 538e03cf94
parent 2abb05965e
9 changed files with 437 additions and 48 deletions
--- a/package.json
+++ b/package.json
@ -23,6 +23,7 @@
    "@graphql-codegen/typescript-operations": "^2.3.5",
    "@juggle/resize-observer": "^3.3.1",
    "@notionhq/client": "^1.0.4",
+    "@radix-ui/react-navigation-menu": "^0.1.2",
    "@radix-ui/react-polymorphic": "^0.0.14",
    "@reach/dialog": "^0.17.0",
    "@types/lodash": "^4.14.182",
--- a/src/components/common/header/header.module.scss
+++ b/src/components/common/header/header.module.scss
@ -8,14 +8,14 @@
  z-index: 20;
  background: rgb(4 4 4 / 0.01);
  padding: tovw(14px, 'default', 12px) var(--main-padding-side);
-  width: 100%;
  backdrop-filter: blur(20px);
+  width: 100%;

  @-moz-document url-prefix("") {
    background-color: var(--color-black);
  }

-  nav {
+  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
@ -26,24 +26,76 @@
    }
  }

-  ul {
+  .list {
+    @include respond-to('mobile') {
+      display: none;
+    }
+
    display: flex;
    padding: 0;
    list-style-type: none;
    gap: tovw(32px, 'default', 16px);
-  }

-  li:not(.item--mobile) {
-    a {
-      letter-spacing: -0.04em;
+    .item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      a.active {
+        font-weight: 600 !important;
+      }
+
+      .trigger {
+        display: flex;
+        align-items: center;
+        border: none;
+        background-color: unset;
+        text-transform: none;
+        line-height: 1;
+
+        &[data-state='open'] {
+          .caret {
+            transform: rotate(-180deg) translateY(2px);
+            transition: transform 250ms;
+          }
+        }
+
+        .caret {
+          background: url('/images/dropdown.svg') no-repeat;
+          background-size: contain;
+          width: tovw(8px, 'default', 8px);
+          height: tovw(6px, 'default', 6px);
+          margin-left: tovw(8px, 'default', 8px);
+          margin-top: tovw(5px, 'default', 5px);
+        }
+      }
    }

-    position: relative;
+    li:not(.item--mobile) {
+      a {
+        letter-spacing: -0.04em;
+      }
+
+      position: relative;
+    }
  }

-  li.active {
+  .content {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    gap: tovw(18px, 'default', 14px);
+    border: 1px solid var(--color-grey);
+    border-radius: tovw(8px, 'default', 8px);
+    top: tovw(40px, 'default', 30px);
+    padding: tovw(24px, 'default', 20px);
+    background-color: rgb(4 4 4 / 0.8);
+    backdrop-filter: blur(20px);
+    animation: viewporto 250ms ease-in-out;
+    z-index: 20;
+
    a {
-      font-weight: bold;
+      width: fit-content;
    }
  }

@ -68,6 +120,65 @@
    width: 100%;
    height: calc(100 * var(--vh) - var(--header-height-mobile));

+    .list {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+
+      .item {
+        all: unset;
+        flex-direction: column;
+
+        a {
+          font-weight: 400 !important;
+
+          &.active {
+            font-weight: 600 !important;
+          }
+        }
+
+        div:first-child {
+          display: flex;
+          align-content: center;
+        }
+
+        .trigger {
+          display: flex;
+
+          &[data-state='open'] {
+            .caret {
+              transform: rotate(-180deg) translateY(3px);
+              transition: transform 250ms;
+            }
+          }
+
+          .caret {
+            margin-top: tovw(10px, 'mobile');
+            margin-left: tovw(10px, 'mobile');
+            width: tovw(25px, 'mobile');
+            height: tovw(14px, 'mobile');
+          }
+        }
+      }
+
+      .content {
+        all: unset;
+        position: relative;
+        display: flex;
+        flex-flow: row wrap;
+        gap: tovw(10px, 'mobile');
+        background-color: unset;
+        border: unset;
+        padding: unset;
+        padding: tovw(15px, 'mobile') 0 tovw(10px, 'mobile') tovw(5px, 'mobile');
+        animation: mobile-menu ease-in-out 250ms;
+
+        a {
+          font-size: tovw(18px, 'mobile') !important;
+        }
+      }
+    }
+
    ul {
      flex-direction: column;
      margin: 0;
@ -189,3 +300,25 @@
    }
  }
 }
+
+@keyframes viewporto {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes mobile-menu {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
--- a/src/components/common/header/header.ts
+++ b/src/components/common/header/header.ts
@ -1,8 +1,40 @@
 export const defaultHeaderLinks = [
-  { href: '/', title: 'Home' },
-  { href: 'https://docs.laconic.com/', title: 'Developers' },
-  { href: '/products', title: 'Products' },
-  { href: '/community', title: 'Community' },
-  { href: '/about', title: 'About' },
+  {
+    href: 'https://docs.laconic.com/',
+    title: 'Developers',
+    content: [
+      { href: 'https://github.com/LaconicNetwork', title: 'GitHub' },
+      { href: '/about#roadmap', title: 'Roadmap' },
+      { href: 'https://discord.com/invite/ukhbBemyxY', title: 'Chat' },
+      { href: 'https://laconic.community/', title: 'Forum' }
+    ]
+  },
+  {
+    href: '/products',
+    title: 'Products',
+    content: [
+      { href: '/products#laconicwatchers', title: 'Watchers (SDK)' },
+      { href: '/products#laconicstack', title: 'Stack' },
+      { href: '/products#laconicnetwork', title: 'Network' },
+      { href: '/products#laconicapp', title: 'App' },
+      { href: '/products#laconictoken', title: 'Network Token (LNT)' }
+    ]
+  },
+  {
+    href: '/about',
+    title: 'About',
+    content: [
+      { href: '/about#team', title: 'Team' },
+      { href: '/partners', title: 'Partners' },
+      { href: '/press', title: 'Newsroom' },
+      { href: '/careers', title: 'Careers' },
+      { href: 'https://docs.laconic.com/faq', title: 'FAQ' },
+      { href: '/contact', title: 'Contact' }
+    ]
+  },
+  {
+    href: '/community',
+    title: 'Community'
+  },
  { href: '/blog', title: 'Blog' }
 ]
--- a/src/components/common/header/index.tsx
+++ b/src/components/common/header/index.tsx
@ -1,3 +1,4 @@
+import * as NavigationMenu from '@radix-ui/react-navigation-menu'
 import clsx from 'clsx'
 import NextLink from 'next/link'
 import { useRouter } from 'next/router'
@ -40,22 +41,52 @@ const HeaderMobile = React.forwardRef<
  }
  return (
    <div {...props} className={clsx(s['header__mobile'], className)} ref={ref}>
-      <ul className="items">
-        {defaultHeaderLinks.length > 0 &&
-          defaultHeaderLinks.map((link, index) => (
-            <li
-              key={index}
-              className={clsx(
-                { [s['active']]: isActive(link.href) },
-                s['item--mobile']
+      <NavigationMenu.Root className={s.nav}>
+        <NavigationMenu.List className={s.list}>
+          {defaultHeaderLinks.map((item, i) => (
+            <NavigationMenu.Item className={s.item} key={i}>
+              {item.content ? (
+                <>
+                  <div>
+                    <Link
+                      className={clsx({
+                        [s['active']]: isActive(item.href)
+                      })}
+                      href={item.href}
+                      variant="nav"
+                      key={i}
+                    >
+                      {item.title}
+                    </Link>
+                    <NavigationMenu.Trigger className={s.trigger}>
+                      <span className={s.caret} />
+                    </NavigationMenu.Trigger>
+                  </div>
+                  <NavigationMenu.Content className={s.content}>
+                    {item.content.map((contentItem, i) => (
+                      <Link
+                        className={clsx({
+                          [s['active']]: isActive(contentItem.href)
+                        })}
+                        href={contentItem.href}
+                        variant="nav"
+                        key={i}
+                      >
+                        {contentItem.title}
+                      </Link>
+                    ))}
+                  </NavigationMenu.Content>
+                </>
+              ) : (
+                <Link href={item.href} variant="nav">
+                  {item.title}
+                </Link>
              )}
-            >
-              <Link href={link.href} variant="nav">
-                {link.title}
-              </Link>
-            </li>
+            </NavigationMenu.Item>
          ))}
-      </ul>
+        </NavigationMenu.List>
+        <NavigationMenu.Viewport asChild className={s.viewport} />
+      </NavigationMenu.Root>
      <ButtonLink
        className={s['button']}
        href="https://discord.com/invite/ukhbBemyxY"
@ -119,8 +150,9 @@ export const Header = () => {
  useIsomorphicLayoutEffect(() => {
    if (!headerMobileRef.current) return

-    const navigationItems =
-      headerMobileRef.current.querySelectorAll('.items li')
+    const navigationItems = headerMobileRef.current.querySelectorAll(
+      `.${s.item}`
+    )
    const socialItems = headerMobileRef.current.querySelectorAll('.social li')
    const button = headerMobileRef.current.querySelector('button')
    const text = headerMobileRef.current.querySelector('p')
@ -152,26 +184,54 @@ export const Header = () => {

  return (
    <header className={s.header} ref={ref}>
-      <nav>
+      <NavigationMenu.Root className={s.nav}>
        <NextLink href="/">
          <a>
            <Logo />
            <span className="sr-only">Laconic</span>
          </a>
        </NextLink>
-        <ul className="hide-on-mobile">
-          {defaultHeaderLinks.length > 0 &&
-            defaultHeaderLinks.map((link, index) => (
-              <li
-                key={index}
-                className={clsx({ [s['active']]: isActive(link.href) })}
-              >
-                <Link href={link.href} variant="nav">
-                  {link.title}
+        <NavigationMenu.List className={s.list}>
+          {defaultHeaderLinks.map((item, i) => (
+            <NavigationMenu.Item className={s.item} key={i}>
+              {item.content ? (
+                <>
+                  <NavigationMenu.Trigger className={s.trigger}>
+                    <Link
+                      className={clsx({
+                        [s['active']]: isActive(item.href)
+                      })}
+                      href={item.href}
+                      variant="nav"
+                      key={i}
+                    >
+                      {item.title}
+                    </Link>
+                    <span className={s.caret} />
+                  </NavigationMenu.Trigger>
+                  <NavigationMenu.Content className={s.content}>
+                    {item.content.map((contentItem, i) => (
+                      <Link
+                        className={clsx({
+                          [s['active']]: isActive(contentItem.href)
+                        })}
+                        href={contentItem.href}
+                        variant="nav"
+                        key={i}
+                      >
+                        {contentItem.title}
+                      </Link>
+                    ))}
+                  </NavigationMenu.Content>
+                </>
+              ) : (
+                <Link href={item.href} variant="nav">
+                  {item.title}
                </Link>
-              </li>
-            ))}
-        </ul>
+              )}
+            </NavigationMenu.Item>
+          ))}
+        </NavigationMenu.List>
        <ButtonLink
          className="hide-on-mobile"
          href="https://discord.com/invite/ukhbBemyxY"
@ -180,8 +240,8 @@ export const Header = () => {
        >
          Join Us
        </ButtonLink>
-      </nav>
-
+        <NavigationMenu.Viewport asChild className={s.viewport} />
+      </NavigationMenu.Root>
      <div className="hide-on-desktop">
        <Button
          aria-label="Menu"
--- a/src/components/primitives/link/link.module.scss
+++ b/src/components/primitives/link/link.module.scss
@ -92,6 +92,7 @@
      width: 100%;
      height: tovw(1px);
      content: '';
+      opacity: 0;
    }

    &:hover {
--- a/src/components/sections/about/whitepaper/whitepaper.module.scss
+++ b/src/components/sections/about/whitepaper/whitepaper.module.scss
@ -12,11 +12,13 @@
  .container {
    @include respond-to('mobile') {
      padding: 0 tovw(56px, 'default', 16px);
+      min-height: unset;
    }

    display: flex;
    place-content: center;
    align-items: center;
+    min-height: tovw(1080px, 'default', 525px);

    div:first-child {
      @include respond-to('mobile') {
@ -50,7 +52,7 @@
    .whitepaper__img {
      @include respond-to('mobile') {
        width: 240%;
-        padding-top: tovw(60px, 'mobile', 60px);
+        padding-top: tovw(20px, 'mobile', 20px);
      }

      padding-top: tovw(55px, 'default', 40px);
--- a/src/components/sections/community/hero/hero.module.scss
+++ b/src/components/sections/community/hero/hero.module.scss
@ -18,6 +18,7 @@
  gap: tovw(155px, 'default', 80px) tovw(130px, 'default', 30px);
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
+  padding-top: max(90px, 3%);
  padding-bottom: tovw(115px, 'default', 55px);

  .hero__container {
--- a/src/css/global.scss
+++ b/src/css/global.scss
@ -50,7 +50,7 @@
  --main-padding-side: #{tovw(57px, 'default', 16px)};

  /* Header */
-  --header-height: #{tovw(71px)};
+  --header-height: #{tovw(71px, 'default', 70px)};
 }

 *,
--- a/yarn.lock
+++ b/yarn.lock
@ -1114,11 +1114,170 @@
  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
  integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==

+"@radix-ui/primitive@0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-0.1.0.tgz#6206b97d379994f0d1929809db035733b337e543"
+  integrity sha512-tqxZKybwN5Fa3VzZry4G6mXAAb9aAqKmPtnVbZpL0vsBwvOHTBwsjHVPXylocYLwEtBY9SCe665bYnNB515uoA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-collection@0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-0.1.4.tgz#734061ffd5bb93e88889d49b87391a73a63824c9"
+  integrity sha512-3muGI15IdgaDFjOcO7xX8a35HQRBRF6LH9pS6UCeZeRmbslkVeHyJRQr2rzICBUoX7zgIA0kXyMDbpQnJGyJTA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "0.1.0"
+    "@radix-ui/react-context" "0.1.1"
+    "@radix-ui/react-primitive" "0.1.4"
+    "@radix-ui/react-slot" "0.1.2"
+
+"@radix-ui/react-compose-refs@0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-0.1.0.tgz#cff6e780a0f73778b976acff2c2a5b6551caab95"
+  integrity sha512-eyclbh+b77k+69Dk72q3694OHrn9B3QsoIRx7ywX341U9RK1ThgQjMFZoPtmZNQTksXHLNEiefR8hGVeFyInGg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-context@0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-0.1.1.tgz#06996829ea124d9a1bc1dbe3e51f33588fab0875"
+  integrity sha512-PkyVX1JsLBioeu0jB9WvRpDBBLtLZohVDT3BB5CTSJqActma8S8030P57mWZb4baZifMvN7KKWPAA40UmWKkQg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-dismissable-layer@0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-0.1.5.tgz#9379032351e79028d472733a5cc8ba4a0ea43314"
+  integrity sha512-J+fYWijkX4M4QKwf9dtu1oC0U6e6CEl8WhBp3Ad23yz2Hia0XCo6Pk/mp5CAFy4QBtQedTSkhW05AdtSOEoajQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "0.1.0"
+    "@radix-ui/react-compose-refs" "0.1.0"
+    "@radix-ui/react-primitive" "0.1.4"
+    "@radix-ui/react-use-body-pointer-events" "0.1.1"
+    "@radix-ui/react-use-callback-ref" "0.1.0"
+    "@radix-ui/react-use-escape-keydown" "0.1.0"
+
+"@radix-ui/react-id@0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-0.1.5.tgz#010d311bedd5a2884c1e9bb6aaaa4e6cc1d1d3b8"
+  integrity sha512-IPc4H/63bes0IZ1GJJozSEkSWcDyhNGtKFWUpJ+XtaLyQ1X3x7Mf6fWwWhDcpqlYEP+5WtAvfqcyEsyjP+ZhBQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "0.1.0"
+
+"@radix-ui/react-navigation-menu@^0.1.2":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-navigation-menu/-/react-navigation-menu-0.1.2.tgz#b473607e1ae62368600e1439778c2411048d4a8c"
+  integrity sha512-b9+2ambunxMNw4pgOt9xqzVN/A5NPajpiKvR45zI/BS/uOWfV1A3N5Kn+OIbRMln9GyBnuoxXV0tUBLC2rAzpw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "0.1.0"
+    "@radix-ui/react-collection" "0.1.4"
+    "@radix-ui/react-compose-refs" "0.1.0"
+    "@radix-ui/react-context" "0.1.1"
+    "@radix-ui/react-dismissable-layer" "0.1.5"
+    "@radix-ui/react-id" "0.1.5"
+    "@radix-ui/react-presence" "0.1.2"
+    "@radix-ui/react-primitive" "0.1.4"
+    "@radix-ui/react-use-callback-ref" "0.1.0"
+    "@radix-ui/react-use-controllable-state" "0.1.0"
+    "@radix-ui/react-use-direction" "0.1.0"
+    "@radix-ui/react-use-layout-effect" "0.1.0"
+    "@radix-ui/react-use-previous" "0.1.1"
+    "@radix-ui/react-visually-hidden" "0.1.4"
+
 "@radix-ui/react-polymorphic@^0.0.14":
  version "0.0.14"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.14.tgz#fc6cefee6686db8c5a7ff14c8c1b9b5abdee325b"
  integrity sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA==

+"@radix-ui/react-presence@0.1.2":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-0.1.2.tgz#9f11cce3df73cf65bc348e8b76d891f0d54c1fe3"
+  integrity sha512-3BRlFZraooIUfRlyN+b/Xs5hq1lanOOo/+3h6Pwu2GMFjkGKKa4Rd51fcqGqnVlbr3jYg+WLuGyAV4KlgqwrQw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "0.1.0"
+    "@radix-ui/react-use-layout-effect" "0.1.0"
+
+"@radix-ui/react-primitive@0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-0.1.4.tgz#6c233cf08b0cb87fecd107e9efecb3f21861edc1"
+  integrity sha512-6gSl2IidySupIMJFjYnDIkIWRyQdbu/AHK7rbICPani+LW4b0XdxBXc46og/iZvuwW8pjCS8I2SadIerv84xYA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-slot" "0.1.2"
+
+"@radix-ui/react-slot@0.1.2":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-0.1.2.tgz#e6f7ad9caa8ce81cc8d532c854c56f9b8b6307c8"
+  integrity sha512-ADkqfL+agEzEguU3yS26jfB50hRrwf7U4VTwAOZEmi/g+ITcBWe12yM46ueS/UCIMI9Py+gFUaAdxgxafFvY2Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "0.1.0"
+
+"@radix-ui/react-use-body-pointer-events@0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-body-pointer-events/-/react-use-body-pointer-events-0.1.1.tgz#63e7fd81ca7ffd30841deb584cd2b7f460df2597"
+  integrity sha512-R8leV2AWmJokTmERM8cMXFHWSiv/fzOLhG/JLmRBhLTAzOj37EQizssq4oW0Z29VcZy2tODMi9Pk/htxwb+xpA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "0.1.0"
+
+"@radix-ui/react-use-callback-ref@0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-0.1.0.tgz#934b6e123330f5b3a6b116460e6662cbc663493f"
+  integrity sha512-Va041McOFFl+aV+sejvl0BS2aeHx86ND9X/rVFmEFQKTXCp6xgUK0NGUAGcgBlIjnJSbMYPGEk1xKSSlVcN2Aw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-use-controllable-state@0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-0.1.0.tgz#4fced164acfc69a4e34fb9d193afdab973a55de1"
+  integrity sha512-zv7CX/PgsRl46a52Tl45TwqwVJdmqnlQEQhaYMz/yBOD2sx2gCkCFSoF/z9mpnYWmS6DTLNTg5lIps3fV6EnXg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "0.1.0"
+
+"@radix-ui/react-use-direction@0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-direction/-/react-use-direction-0.1.0.tgz#97ac1d52e497c974389e7988f809238ed72e7df7"
+  integrity sha512-NajpY/An9TCPSfOVkgWIdXJV+VuWl67PxB6kOKYmtNAFHvObzIoh8o0n9sAuwSAyFCZVq211FEf9gvVDRhOyiA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-use-escape-keydown@0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-0.1.0.tgz#dc80cb3753e9d1bd992adbad9a149fb6ea941874"
+  integrity sha512-tDLZbTGFmvXaazUXXv8kYbiCcbAE8yKgng9s95d8fCO+Eundv0Jngbn/hKPhDDs4jj9ChwRX5cDDnlaN+ugYYQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "0.1.0"
+
+"@radix-ui/react-use-layout-effect@0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-0.1.0.tgz#ebf71bd6d2825de8f1fbb984abf2293823f0f223"
+  integrity sha512-+wdeS51Y+E1q1Wmd+1xSSbesZkpVj4jsg0BojCbopWvgq5iBvixw5vgemscdh58ep98BwUbsFYnrywFhV9yrVg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-use-previous@0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-0.1.1.tgz#0226017f72267200f6e832a7103760e96a6db5d0"
+  integrity sha512-O/ZgrDBr11dR8rhO59ED8s5zIXBRFi8MiS+CmFGfi7MJYdLbfqVOmQU90Ghf87aifEgWe6380LA69KBneaShAg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-visually-hidden@0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-0.1.4.tgz#6c75eae34fb5d084b503506fbfc05587ced05f03"
+  integrity sha512-K/q6AEEzqeeEq/T0NPChvBqnwlp8Tl4NnQdrI/y8IOY7BRR+Ug0PEsVk6g48HJ7cA1//COugdxXXVVK/m0X1mA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "0.1.4"
+
 "@reach/dialog@^0.17.0":
  version "0.17.0"
  resolved "https://registry.yarnpkg.com/@reach/dialog/-/dialog-0.17.0.tgz#81c48dd4405945dfc6b6c3e5e125db2c4324e9e8"