Fixes & Updates (#704)

* Adding Dropdown Component * Styling Issues * Wishlist Fix * Fixes for Wishlist View * Hearts now work again * Rollback ts * Removing extra config to disable BigCommerce * Fixes for Wishlist View * Remove transition/animation for mobile * New Updates. * New Updates. * Dropdown fix * Polish * export * export * revert tsconfig Co-authored-by: Luis Alvarez D. <luis@vercel.com> Co-authored-by: Dom Sip <dom@vercel.com> Co-authored-by: Luis Alvarez D. <luis@vercel.com>
2022-03-16 12:05:58 +01:00 · 2022-03-16 12:05:58 +01:00 · 172deeee86
commit 172deeee86
parent 6e6db0773b
35 changed files with 780 additions and 404 deletions
--- a/packages/bigcommerce/src/api/endpoints/wishlist/add-item.ts
+++ b/packages/bigcommerce/src/api/endpoints/wishlist/add-item.ts
@ -3,7 +3,6 @@ import { parseWishlistItem } from '../../utils/parse-item'
 import getCustomerId from '../../utils/get-customer-id'
 import type { WishlistEndpoint } from '.'

-// Return wishlist info
 const addItem: WishlistEndpoint['handlers']['addItem'] = async ({
  res,
  body: { customerToken, item },
@ -17,41 +16,52 @@ const addItem: WishlistEndpoint['handlers']['addItem'] = async ({
    })
  }

-  const customerId =
-    customerToken && (await getCustomerId({ customerToken, config }))
+  try {
+    const customerId =
+      customerToken && (await getCustomerId({ customerToken, config }))

-  if (!customerId) {
-    return res.status(400).json({
+    if (!customerId) {
+      throw new Error('Invalid request. No CustomerId')
+    }
+
+    let { wishlist } = await commerce.getCustomerWishlist({
+      variables: { customerId },
+      config,
+    })
+
+    if (!wishlist) {
+      // If user has no wishlist, then let's create one with new item
+      const { data } = await config.storeApiFetch('/v3/wishlists', {
+        method: 'POST',
+        body: JSON.stringify({
+          name: 'Next.js Commerce Wishlist',
+          is_public: false,
+          customer_id: Number(customerId),
+          items: [parseWishlistItem(item)],
+        }),
+      })
+      return res.status(200).json(data)
+    }
+
+    // Existing Wishlist, let's add Item to Wishlist
+    const { data } = await config.storeApiFetch(
+      `/v3/wishlists/${wishlist.id}/items`,
+      {
+        method: 'POST',
+        body: JSON.stringify({
+          items: [parseWishlistItem(item)],
+        }),
+      }
+    )
+
+    // Returns Wishlist
+    return res.status(200).json(data)
+  } catch (err: any) {
+    res.status(500).json({
      data: null,
-      errors: [{ message: 'Invalid request' }],
+      errors: [{ message: err.message }],
    })
  }
-
-  const { wishlist } = await commerce.getCustomerWishlist({
-    variables: { customerId },
-    config,
-  })
-  const options = {
-    method: 'POST',
-    body: JSON.stringify(
-      wishlist
-        ? {
-            items: [parseWishlistItem(item)],
-          }
-        : {
-            name: 'Wishlist',
-            customer_id: customerId,
-            items: [parseWishlistItem(item)],
-            is_public: false,
-          }
-    ),
-  }
-
-  const { data } = wishlist
-    ? await config.storeApiFetch(`/v3/wishlists/${wishlist.id}/items`, options)
-    : await config.storeApiFetch('/v3/wishlists', options)
-
-  res.status(200).json({ data })
 }

 export default addItem
--- a/packages/bigcommerce/src/api/index.ts
+++ b/packages/bigcommerce/src/api/index.ts
@ -38,9 +38,9 @@ export interface BigcommerceConfig extends CommerceAPIConfig {
  storeApiFetch<T>(endpoint: string, options?: RequestInit): Promise<T>
 }

-const API_URL = process.env.BIGCOMMERCE_STOREFRONT_API_URL
+const API_URL = process.env.BIGCOMMERCE_STOREFRONT_API_URL // GraphAPI
 const API_TOKEN = process.env.BIGCOMMERCE_STOREFRONT_API_TOKEN
-const STORE_API_URL = process.env.BIGCOMMERCE_STORE_API_URL
+const STORE_API_URL = process.env.BIGCOMMERCE_STORE_API_URL // REST API
 const STORE_API_TOKEN = process.env.BIGCOMMERCE_STORE_API_TOKEN
 const STORE_API_CLIENT_ID = process.env.BIGCOMMERCE_STORE_API_CLIENT_ID
 const STORE_CHANNEL_ID = process.env.BIGCOMMERCE_CHANNEL_ID
--- a/packages/bigcommerce/src/api/operations/get-customer-wishlist.ts
+++ b/packages/bigcommerce/src/api/operations/get-customer-wishlist.ts
@ -44,6 +44,7 @@ export default function getCustomerWishlistOperation({
    const { data = [] } = await config.storeApiFetch<
      RecursivePartial<{ data: Wishlist[] }>
    >(`/v3/wishlists?customer_id=${variables.customerId}`)
+
    const wishlist = data[0]

    if (includeProducts && wishlist?.items?.length) {
--- a/packages/bigcommerce/src/wishlist/use-wishlist.tsx
+++ b/packages/bigcommerce/src/wishlist/use-wishlist.tsx
@ -1,11 +1,13 @@
 import { useMemo } from 'react'
 import { SWRHook } from '@vercel/commerce/utils/types'
-import useWishlist, { UseWishlist } from '@vercel/commerce/wishlist/use-wishlist'
-import type { GetWishlistHook } from '../types/wishlist'
+import useWishlist, {
+  UseWishlist,
+} from '@vercel/commerce/wishlist/use-wishlist'
 import useCustomer from '../customer/use-customer'

-export default useWishlist as UseWishlist<typeof handler>
+import type { GetWishlistHook } from '../types/wishlist'

+export default useWishlist as UseWishlist<typeof handler>
 export const handler: SWRHook<GetWishlistHook> = {
  fetchOptions: {
    url: '/api/wishlist',
--- a/site/assets/base.css
+++ b/site/assets/base.css
@ -4,11 +4,9 @@
  --secondary: #000000;
  --secondary-2: #111;
  --selection: var(--cyan);
-
  --text-base: #000000;
  --text-primary: #000000;
  --text-secondary: white;
-
  --hover: rgba(0, 0, 0, 0.075);
  --hover-1: rgba(0, 0, 0, 0.15);
  --hover-2: rgba(0, 0, 0, 0.25);
@ -17,15 +15,11 @@
  --red: #da3c3c;
  --purple: #f81ce5;
  --blue: #0070f3;
-
  --pink: #ff0080;
  --pink-light: #ff379c;
-
  --magenta: #eb367f;
-
  --violet: #7928ca;
  --violet-dark: #4c2889;
-
  --accent-0: #fff;
  --accent-1: #fafafa;
  --accent-2: #eaeaea;
@ -36,7 +30,6 @@
  --accent-7: #333333;
  --accent-8: #111111;
  --accent-9: #000;
-
  --font-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Helvetica Neue',
    'Helvetica', sans-serif;
 }
@ -50,11 +43,9 @@
  --hover-1: rgba(255, 255, 255, 0.15);
  --hover-2: rgba(255, 255, 255, 0.25);
  --selection: var(--purple);
-
  --text-base: white;
  --text-primary: white;
  --text-secondary: black;
-
  --accent-9: #fff;
  --accent-8: #fafafa;
  --accent-7: #eaeaea;
@ -73,17 +64,11 @@
  box-sizing: inherit;
 }

-html {
+html,
+body {
  height: 100%;
  box-sizing: border-box;
  touch-action: manipulation;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-html,
-body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
@ -104,15 +89,15 @@ a {
 }

 .animated {
-  -webkit-animation-duration: 1s;
  animation-duration: 1s;
-  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
 }

 .fadeIn {
-  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
+  -webkit-animation-name: fadeIn;
 }

@-webkit-keyframes fadeIn {
--- a/site/commerce.config.json
+++ b/site/commerce.config.json
@ -5,11 +5,5 @@
    "wishlist": false,
    "customerAuth": false,
    "customCheckout": false
-  },
-  "@vercel/commerce-bigcommerce": {
-    "features": {
-      "wishlist": false,
-      "customerAuth": false
-    }
  }
 }
--- a/site/components/common/Layout/Layout.tsx
+++ b/site/components/common/Layout/Layout.tsx
@ -1,12 +1,11 @@
 import cn from 'clsx'
-import React, { FC } from 'react'
+import s from './Layout.module.css'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import { CommerceProvider } from '@framework'
+import LoginView from '@components/auth/LoginView'
 import { useUI } from '@components/ui/context'
-import type { Page } from '@commerce/types/page'
 import { Navbar, Footer } from '@components/common'
-import type { Category } from '@commerce/types/site'
 import ShippingView from '@components/checkout/ShippingView'
 import CartSidebarView from '@components/cart/CartSidebarView'
 import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
@ -14,10 +13,10 @@ import { Sidebar, Button, LoadingDots } from '@components/ui'
 import PaymentMethodView from '@components/checkout/PaymentMethodView'
 import CheckoutSidebarView from '@components/checkout/CheckoutSidebarView'
 import { CheckoutProvider } from '@components/checkout/context'
-import MenuSidebarView, { Link } from '../UserNav/MenuSidebarView'
-
-import LoginView from '@components/auth/LoginView'
-import s from './Layout.module.css'
+import { MenuSidebarView } from '@components/common/UserNav'
+import type { Page } from '@commerce/types/page'
+import type { Category } from '@commerce/types/site'
+import type { Link as LinkProps } from '../UserNav/MenuSidebarView'

 const Loading = () => (
  <div className="w-80 h-80 flex items-center text-center justify-center p-3">
@ -29,35 +28,26 @@ const dynamicProps = {
  loading: Loading,
 }

-const SignUpView = dynamic(
-  () => import('@components/auth/SignUpView'),
-  {
-    ...dynamicProps
-  }
-)
+const SignUpView = dynamic(() => import('@components/auth/SignUpView'), {
+  ...dynamicProps,
+})

 const ForgotPassword = dynamic(
  () => import('@components/auth/ForgotPassword'),
-  {
-    ...dynamicProps
-  }
-)
-
-const FeatureBar = dynamic(
-  () => import('@components/common/FeatureBar'),
-  {
-    ...dynamicProps
-  }
-)
-
-const Modal = dynamic(
-  () => import('@components/ui/Modal'),
  {
    ...dynamicProps,
-    ssr: false
  }
 )

+const FeatureBar = dynamic(() => import('@components/common/FeatureBar'), {
+  ...dynamicProps,
+})
+
+const Modal = dynamic(() => import('@components/ui/Modal'), {
+  ...dynamicProps,
+  ssr: false,
+})
+
 interface Props {
  pageProps: {
    pages?: Page[]
@ -65,7 +55,7 @@ interface Props {
  }
 }

-const ModalView: FC<{ modalView: string; closeModal(): any }> = ({
+const ModalView: React.FC<{ modalView: string; closeModal(): any }> = ({
  modalView,
  closeModal,
 }) => {
@ -78,41 +68,41 @@ const ModalView: FC<{ modalView: string; closeModal(): any }> = ({
  )
 }

-const ModalUI: FC = () => {
+const ModalUI: React.FC = () => {
  const { displayModal, closeModal, modalView } = useUI()
  return displayModal ? (
    <ModalView modalView={modalView} closeModal={closeModal} />
  ) : null
 }

-const SidebarView: FC<{
+const SidebarView: React.FC<{
  sidebarView: string
  closeSidebar(): any
-  links: Link[]
+  links: LinkProps[]
 }> = ({ sidebarView, closeSidebar, links }) => {
  return (
    <Sidebar onClose={closeSidebar}>
-      {sidebarView === 'MOBILEMENU_VIEW' && <MenuSidebarView links={links} />}
      {sidebarView === 'CART_VIEW' && <CartSidebarView />}
-      {sidebarView === 'CHECKOUT_VIEW' && <CheckoutSidebarView />}
-      {sidebarView === 'PAYMENT_VIEW' && <PaymentMethodView />}
      {sidebarView === 'SHIPPING_VIEW' && <ShippingView />}
+      {sidebarView === 'PAYMENT_VIEW' && <PaymentMethodView />}
+      {sidebarView === 'CHECKOUT_VIEW' && <CheckoutSidebarView />}
+      {sidebarView === 'MOBILE_MENU_VIEW' && <MenuSidebarView links={links} />}
    </Sidebar>
  )
 }

-const SidebarUI: FC<{ links: any }> = ({ links }) => {
+const SidebarUI: React.FC<{ links: LinkProps[] }> = ({ links }) => {
  const { displaySidebar, closeSidebar, sidebarView } = useUI()
  return displaySidebar ? (
    <SidebarView
+      links={links}
      sidebarView={sidebarView}
      closeSidebar={closeSidebar}
-      links={links}
    />
  ) : null
 }

-const Layout: FC<Props> = ({
+const Layout: React.FC<Props> = ({
  children,
  pageProps: { categories = [], ...pageProps },
 }) => {
--- a/site/components/common/Navbar/Navbar.tsx
+++ b/site/components/common/Navbar/Navbar.tsx
@ -16,7 +16,7 @@ interface NavbarProps {

 const Navbar: FC<NavbarProps> = ({ links }) => (
  <NavbarRoot>
-    <Container>
+    <Container clean className="mx-auto max-w-8xl px-6">
      <div className={s.nav}>
        <div className="flex items-center flex-1">
          <Link href="/">
--- a/site/components/common/SidebarLayout/SidebarLayout.tsx
+++ b/site/components/common/SidebarLayout/SidebarLayout.tsx
@ -12,8 +12,8 @@ type ComponentProps = { className?: string } & (
 const SidebarLayout: FC<ComponentProps> = ({
  children,
  className,
-  handleClose,
  handleBack,
+  handleClose,
 }) => {
  return (
    <div className={cn(s.root, className)}>
@ -38,9 +38,8 @@ const SidebarLayout: FC<ComponentProps> = ({
            <span className="ml-2 text-accent-7 text-xs">Back</span>
          </button>
        )}
-        <span className={s.nav}>
-          <UserNav />
-        </span>
+
+        <UserNav />
      </header>
      <div className={s.container}>{children}</div>
    </div>
--- a/site/components/common/UserNav/CustomerMenuContent/CustomerMenuContent.module.css
+++ b/site/components/common/UserNav/CustomerMenuContent/CustomerMenuContent.module.css
@ -0,0 +1,31 @@
+.root {
+  @apply inset-0 fixed;
+  left: 72px;
+  z-index: 10;
+  height: 100vh;
+  min-width: 100vw;
+  transition: none;
+}
+
+@media screen(lg) {
+  .root {
+    @apply static;
+    min-width: inherit;
+    height: inherit;
+  }
+}
+
+.link {
+  @apply text-primary flex cursor-pointer px-6 py-3
+    transition ease-in-out duration-150 leading-6
+    font-medium items-center capitalize w-full box-border
+    outline-0;
+}
+
+.link:hover {
+  @apply bg-accent-1 outline-none;
+}
+
+.link.active {
+  @apply font-bold bg-accent-2;
+}
--- a/site/components/common/UserNav/CustomerMenuContent/CustomerMenuContent.tsx
+++ b/site/components/common/UserNav/CustomerMenuContent/CustomerMenuContent.tsx
@ -0,0 +1,86 @@
+import cn from 'clsx'
+import { useTheme } from 'next-themes'
+import { useRouter } from 'next/router'
+import { Moon, Sun } from '@components/icons'
+import s from './CustomerMenuContent.module.css'
+import useLogout from '@framework/auth/use-logout'
+import {
+  DropdownContent,
+  DropdownMenuItem,
+} from '@components/ui/Dropdown/Dropdown'
+
+const LINKS = [
+  {
+    name: 'My Orders',
+    href: '/orders',
+  },
+  {
+    name: 'My Profile',
+    href: '/profile',
+  },
+  {
+    name: 'My Cart',
+    href: '/cart',
+  },
+]
+
+export default function CustomerMenuContent() {
+  const router = useRouter()
+  const logout = useLogout()
+  const { pathname } = useRouter()
+  const { theme, setTheme } = useTheme()
+
+  function handleClick(_: React.MouseEvent<HTMLAnchorElement>, href: string) {
+    router.push(href)
+  }
+
+  return (
+    <DropdownContent
+      asChild
+      side="bottom"
+      sideOffset={10}
+      className={s.root}
+      id="CustomerMenuContent"
+    >
+      {LINKS.map(({ name, href }) => (
+        <DropdownMenuItem key={href}>
+          <a
+            className={cn(s.link, {
+              [s.active]: pathname === href,
+            })}
+            onClick={(e) => handleClick(e, href)}
+          >
+            {name}
+          </a>
+        </DropdownMenuItem>
+      ))}
+      <DropdownMenuItem>
+        <a
+          className={cn(s.link, 'justify-between')}
+          onClick={() => {
+            setTheme(theme === 'dark' ? 'light' : 'dark')
+          }}
+        >
+          <div>
+            Theme: <strong>{theme}</strong>{' '}
+          </div>
+          <div className="ml-3">
+            {theme == 'dark' ? (
+              <Moon width={20} height={20} />
+            ) : (
+              <Sun width={20} height={20} />
+            )}
+          </div>
+        </a>
+      </DropdownMenuItem>
+      <DropdownMenuItem>
+        <a
+          className={cn(s.link, 'border-t border-accent-2 mt-4')}
+          onClick={() => logout()}
+        >
+          Logout
+        </a>
+      </DropdownMenuItem>
+    </DropdownContent>
+  )
+}
--- a/site/components/common/UserNav/CustomerMenuContent/index.ts
+++ b/site/components/common/UserNav/CustomerMenuContent/index.ts
@ -0,0 +1 @@
+export { default } from './CustomerMenuContent'
--- a/site/components/common/UserNav/DropdownMenu.module.css
+++ b/site/components/common/UserNav/DropdownMenu.module.css
@ -1,26 +0,0 @@
-@screen lg {
-  .dropdownMenu {
-    @apply absolute top-10 border border-accent-1 shadow-lg w-56 h-auto;
-  }
-}
-
-.dropdownMenu {
-  @apply fixed right-0 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full;
-}
-
-.link {
-  @apply text-primary flex cursor-pointer px-6 py-3 flex transition ease-in-out duration-150 leading-6 font-medium items-center;
-  text-transform: capitalize;
-}
-
-.link:hover {
-  @apply bg-accent-1;
-}
-
-.link.active {
-  @apply font-bold bg-accent-2;
-}
-
-.off {
-  @apply hidden;
-}
--- a/site/components/common/UserNav/DropdownMenu.tsx
+++ b/site/components/common/UserNav/DropdownMenu.tsx
@ -1,125 +0,0 @@
-import cn from 'clsx'
-import Link from 'next/link'
-import { FC, useRef, useState, useEffect } from 'react'
-import { useTheme } from 'next-themes'
-import { useRouter } from 'next/router'
-import s from './DropdownMenu.module.css'
-import { Avatar } from '@components/common'
-import { Moon, Sun } from '@components/icons'
-import { useUI } from '@components/ui/context'
-import ClickOutside from '@lib/click-outside'
-import useLogout from '@framework/auth/use-logout'
-
-import {
-  disableBodyScroll,
-  enableBodyScroll,
-  clearAllBodyScrollLocks,
-} from 'body-scroll-lock'
-
-interface DropdownMenuProps {
-  open?: boolean
-}
-
-const LINKS = [
-  {
-    name: 'My Orders',
-    href: '/orders',
-  },
-  {
-    name: 'My Profile',
-    href: '/profile',
-  },
-  {
-    name: 'My Cart',
-    href: '/cart',
-  },
-]
-
-const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
-  const logout = useLogout()
-  const { pathname } = useRouter()
-  const { theme, setTheme } = useTheme()
-  const [display, setDisplay] = useState(false)
-  const { closeSidebarIfPresent } = useUI()
-  const ref = useRef() as React.MutableRefObject<HTMLUListElement>
-
-  useEffect(() => {
-    if (ref.current) {
-      if (display) {
-        disableBodyScroll(ref.current)
-      } else {
-        enableBodyScroll(ref.current)
-      }
-    }
-    return () => {
-      clearAllBodyScrollLocks()
-    }
-  }, [display])
-
-  return (
-    <ClickOutside active={display} onClick={() => setDisplay(false)}>
-      <div>
-        <button
-          className={s.avatarButton}
-          onClick={() => setDisplay(!display)}
-          aria-label="Menu"
-        >
-          <Avatar />
-        </button>
-        {display && (
-          <ul className={s.dropdownMenu} ref={ref}>
-            {LINKS.map(({ name, href }) => (
-              <li key={href}>
-                <div>
-                  <Link href={href}>
-                    <a
-                      className={cn(s.link, {
-                        [s.active]: pathname === href,
-                      })}
-                      onClick={() => {
-                        setDisplay(false)
-                        closeSidebarIfPresent()
-                      }}
-                    >
-                      {name}
-                    </a>
-                  </Link>
-                </div>
-              </li>
-            ))}
-            <li>
-              <a
-                className={cn(s.link, 'justify-between')}
-                onClick={() => {
-                  theme === 'dark' ? setTheme('light') : setTheme('dark')
-                  setDisplay(false)
-                }}
-              >
-                <div>
-                  Theme: <strong>{theme}</strong>{' '}
-                </div>
-                <div className="ml-3">
-                  {theme == 'dark' ? (
-                    <Moon width={20} height={20} />
-                  ) : (
-                    <Sun width="20" height={20} />
-                  )}
-                </div>
-              </a>
-            </li>
-            <li>
-              <a
-                className={cn(s.link, 'border-t border-accent-2 mt-4')}
-                onClick={() => logout()}
-              >
-                Logout
-              </a>
-            </li>
-          </ul>
-        )}
-      </div>
-    </ClickOutside>
-  )
-}
-
-export default DropdownMenu
--- a/site/components/common/UserNav/MenuSidebarView/MenuSidebarView.module.css
+++ b/site/components/common/UserNav/MenuSidebarView/MenuSidebarView.module.css
@ -3,5 +3,5 @@
 }

 .item {
-  @apply text-2xl font-bold;
-}
+  @apply text-xl font-bold py-2;
+}
--- a/site/components/common/UserNav/MenuSidebarView/MenuSidebarView.tsx
+++ b/site/components/common/UserNav/MenuSidebarView/MenuSidebarView.tsx
@ -1,31 +1,32 @@
 import Link from 'next/link'
 import s from './MenuSidebarView.module.css'
-import { FC } from 'react'
 import { useUI } from '@components/ui/context'
 import SidebarLayout from '@components/common/SidebarLayout'
-import { Link as LinkProps} from '.'
+import type { Link as LinkProps } from './index'

-
-interface MenuProps {
+export default function MenuSidebarView({
+  links = [],
+}: {
  links?: LinkProps[]
-}
-
-const MenuSidebarView: FC<MenuProps> = (props) => {
+}) {
  const { closeSidebar } = useUI()
-  const handleClose = () => closeSidebar()

  return (
-    <SidebarLayout handleClose={handleClose}>
+    <SidebarLayout handleClose={() => closeSidebar()}>
      <div className={s.root}>
        <nav>
          <ul>
-            <li className={s.item}>
+            <li className={s.item} onClick={() => closeSidebar()}>
              <Link href="/search">
                <a>All</a>
              </Link>
            </li>
-            {props.links?.map((l: any) => (
-              <li key={l.href} className={s.item}>
+            {links.map((l: any) => (
+              <li
+                key={l.href}
+                className={s.item}
+                onClick={() => closeSidebar()}
+              >
                <Link href={l.href}>
                  <a>{l.label}</a>
                </Link>
@ -38,4 +39,4 @@ const MenuSidebarView: FC<MenuProps> = (props) => {
  )
 }

-export default MenuSidebarView
+MenuSidebarView
--- a/site/components/common/UserNav/MenuSidebarView/index.ts
+++ b/site/components/common/UserNav/MenuSidebarView/index.ts
@ -1,6 +1,5 @@
 export { default } from './MenuSidebarView'
-
 export interface Link {
  href: string
  label: string
-}
+}
--- a/site/components/common/UserNav/UserNav.module.css
+++ b/site/components/common/UserNav/UserNav.module.css
@ -7,20 +7,21 @@
 }

 .item {
-  @apply ml-6 cursor-pointer relative transition ease-in-out duration-100 flex items-center outline-none text-primary;
+  @apply ml-6 cursor-pointer relative transition ease-in-out
+  duration-100 flex items-center outline-none text-primary;
+}

-  &:hover {
-    @apply text-accent-6 transition scale-110 duration-100;
-  }
+.item:hover {
+  @apply text-accent-6 transition scale-110 duration-100;
+}

-  &:first-child {
-    @apply ml-0;
-  }
+.item:first-child {
+  @apply ml-0;
+}

-  &:focus,
-  &:active {
-    @apply outline-none;
-  }
+.item:focus,
+.item:active {
+  @apply outline-none;
 }

 .bagCount {
@ -36,10 +37,23 @@
 }

 .mobileMenu {
-  @apply flex lg:hidden ml-6
+  @apply flex lg:hidden ml-6 text-white;
 }

 .avatarButton:focus,
 .mobileMenu:focus {
  @apply outline-none;
-}
+}
+
+.dropdownDesktop {
+  @apply hidden -z-10;
+}
+
+@media screen(lg) {
+  .dropdownDesktop {
+    @apply block;
+  }
+  .dropdownMobile {
+    @apply hidden;
+  }
+}
--- a/site/components/common/UserNav/UserNav.tsx
+++ b/site/components/common/UserNav/UserNav.tsx
@ -1,29 +1,40 @@
-import { FC } from 'react'
-import Link from 'next/link'
 import cn from 'clsx'
-import type { LineItem } from '@commerce/types/cart'
-import useCart from '@framework/cart/use-cart'
-import useCustomer from '@framework/customer/use-customer'
-import { Avatar } from '@components/common'
-import { Heart, Bag } from '@components/icons'
-import { useUI } from '@components/ui/context'
-import Button from '@components/ui/Button'
-import DropdownMenu from './DropdownMenu'
+import Link from 'next/link'
 import s from './UserNav.module.css'
-import Menu from '@components/icons/Menu'
+import { Avatar } from '@components/common'
+import useCart from '@framework/cart/use-cart'
+import { useUI } from '@components/ui/context'
+import { Heart, Bag, Menu } from '@components/icons'
+import CustomerMenuContent from './CustomerMenuContent'
+import useCustomer from '@framework/customer/use-customer'
+import React from 'react'
+import {
+  Dropdown,
+  DropdownTrigger as DropdownTriggerInst,
+  Button,
+} from '@components/ui'

-interface Props {
-  className?: string
-}
+import type { LineItem } from '@commerce/types/cart'

 const countItem = (count: number, item: LineItem) => count + item.quantity

-const UserNav: FC<Props> = ({ className }) => {
+const UserNav: React.FC<{
+  className?: string
+}> = ({ className }) => {
  const { data } = useCart()
-  const { data: customer } = useCustomer()
-  const { toggleSidebar, closeSidebarIfPresent, openModal, setSidebarView } =
-    useUI()
+  const { data: isCustomerLoggedIn } = useCustomer()
+  const {
+    toggleSidebar,
+    closeSidebarIfPresent,
+    openModal,
+    setSidebarView,
+    openSidebar,
+  } = useUI()
+
  const itemsCount = data?.lineItems.reduce(countItem, 0) ?? 0
+  const DropdownTrigger = isCustomerLoggedIn
+    ? DropdownTriggerInst
+    : React.Fragment

  return (
    <nav className={cn(s.root, className)}>
@ -57,28 +68,29 @@ const UserNav: FC<Props> = ({ className }) => {
        )}
        {process.env.COMMERCE_CUSTOMERAUTH_ENABLED && (
          <li className={s.item}>
-            {customer ? (
-              <DropdownMenu />
-            ) : (
-              <button
-                className={s.avatarButton}
-                aria-label="Menu"
-                onClick={() => openModal()}
-              >
-                <Avatar />
-              </button>
-            )}
+            <Dropdown>
+              <DropdownTrigger asChild>
+                <button
+                  aria-label="Menu"
+                  className={s.avatarButton}
+                  onClick={() => (isCustomerLoggedIn ? null : openModal())}
+                >
+                  <Avatar />
+                </button>
+              </DropdownTrigger>
+              <CustomerMenuContent />
+            </Dropdown>
          </li>
        )}
        <li className={s.mobileMenu}>
          <Button
            className={s.item}
+            aria-label="Menu"
            variant="naked"
            onClick={() => {
-              setSidebarView('MOBILEMENU_VIEW')
-              toggleSidebar()
+              openSidebar()
+              setSidebarView('MOBILE_MENU_VIEW')
            }}
-            aria-label="Menu"
          >
            <Menu />
          </Button>
--- a/site/components/common/UserNav/index.ts
+++ b/site/components/common/UserNav/index.ts
@ -1 +1,3 @@
 export { default } from './UserNav'
+export { default as MenuSidebarView } from './MenuSidebarView'
+export { default as CustomerMenuContent } from './CustomerMenuContent'
--- a/site/components/icons/index.ts
+++ b/site/components/icons/index.ts
@ -1,17 +1,18 @@
 export { default as Bag } from './Bag'
+export { default as Sun } from './Sun'
+export { default as Moon } from './Moon'
+export { default as Menu } from './Menu'
+export { default as Info } from './Info'
+export { default as Star } from './Star'
+export { default as Plus } from './Plus'
 export { default as Heart } from './Heart'
 export { default as Trash } from './Trash'
 export { default as Cross } from './Cross'
-export { default as Plus } from './Plus'
 export { default as Minus } from './Minus'
 export { default as Check } from './Check'
-export { default as Sun } from './Sun'
-export { default as Moon } from './Moon'
 export { default as Github } from './Github'
-export { default as Info } from './Info'
 export { default as Vercel } from './Vercel'
 export { default as MapPin } from './MapPin'
-export { default as Star } from './Star'
 export { default as ArrowLeft } from './ArrowLeft'
 export { default as ArrowRight } from './ArrowRight'
 export { default as CreditCard } from './CreditCard'
--- a/site/components/ui/Container/Container.tsx
+++ b/site/components/ui/Container/Container.tsx
@ -12,10 +12,10 @@ const Container: FC<ContainerProps> = ({
  children,
  className,
  el = 'div',
-  clean,
+  clean = false, // Full Width Screen
 }) => {
  const rootClassName = cn(className, {
-    'mx-auto max-w-8xl px-6': !clean,
+    'mx-auto max-w-7xl px-6 w-full': !clean,
  })

  let Component: React.ComponentType<React.HTMLAttributes<HTMLDivElement>> =
--- a/site/components/ui/Dropdown/Dropdown.module.css
+++ b/site/components/ui/Dropdown/Dropdown.module.css
@ -0,0 +1,32 @@
+.root {
+  @apply bg-accent-0;
+  animation: none;
+  transition: none;
+  min-width: 100%;
+}
+
+@media screen(lg) {
+  .root {
+    @apply bg-accent-0;
+    box-shadow: hsl(206 22% 7% / 45%) 0px 10px 38px -10px,
+      hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+    min-width: 14rem;
+    will-change: transform, opacity;
+    animation-duration: 600ms;
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+    animation-fill-mode: forwards;
+    transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+    animation-name: slideIn;
+  }
+}
+
+@keyframes slideIn {
+  0% {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+}
--- a/site/components/ui/Dropdown/Dropdown.tsx
+++ b/site/components/ui/Dropdown/Dropdown.tsx
@ -0,0 +1,22 @@
+import cn from 'clsx'
+import React from 'react'
+import s from './Dropdown.module.css'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+
+export const Dropdown = DropdownMenu.Root
+export const DropdownMenuItem = DropdownMenu.Item
+export const DropdownTrigger = DropdownMenu.Trigger
+export const DropdownMenuLabel = DropdownMenu.Label
+export const DropdownMenuGroup = DropdownMenu.Group
+
+export const DropdownContent = React.forwardRef<
+  HTMLDivElement,
+  { children: React.ReactNode } & DropdownMenu.DropdownMenuContentProps &
+    React.RefAttributes<HTMLDivElement>
+>(function DropdownContent({ children, className, ...props }, forwardedRef) {
+  return (
+    <DropdownMenu.Content ref={forwardedRef} sideOffset={8} {...props}>
+      <div className={cn(s.root, className)}>{children}</div>
+    </DropdownMenu.Content>
+  )
+})
--- a/site/components/ui/Sidebar/Sidebar.tsx
+++ b/site/components/ui/Sidebar/Sidebar.tsx
@ -1,14 +1,13 @@
-import { FC, useEffect, useRef } from 'react'
-import s from './Sidebar.module.css'
 import cn from 'clsx'
+import s from './Sidebar.module.css'
+import { useEffect, useRef } from 'react'
 import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
-
 interface SidebarProps {
  children: any
  onClose: () => void
 }

-const Sidebar: FC<SidebarProps> = ({ children, onClose }) => {
+const Sidebar: React.FC<SidebarProps> = ({ children, onClose }) => {
  const sidebarRef = useRef() as React.MutableRefObject<HTMLDivElement>
  const contentRef = useRef() as React.MutableRefObject<HTMLDivElement>

--- a/site/components/ui/index.ts
+++ b/site/components/ui/index.ts
@ -13,4 +13,5 @@ export { default as Input } from './Input'
 export { default as Collapse } from './Collapse'
 export { default as Quantity } from './Quantity'
 export { default as Rating } from './Rating'
+export * from './Dropdown/Dropdown'
 export { useUI } from './context'
--- a/site/components/wishlist/WishlistButton/WishlistButton.tsx
+++ b/site/components/wishlist/WishlistButton/WishlistButton.tsx
@ -31,8 +31,8 @@ const WishlistButton: FC<Props> = ({
  const itemInWishlist = data?.items?.find(
    // @ts-ignore Wishlist is not always enabled
    (item) =>
-      item.product_id === productId &&
-      item.variant_id === variant.id
+      item.product_id === Number(productId) &&
+      item.variant_id === Number(variant.id)
  )

  const handleWishlistChange = async (e: any) => {
--- a/site/components/wishlist/WishlistCard/WishlistCard.module.css
+++ b/site/components/wishlist/WishlistCard/WishlistCard.module.css
@ -1,21 +1,38 @@
 .root {
-  @apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-accent-2 transition duration-100 ease-in-out;
+  @apply relative grid sm:grid-cols-1 lg:grid-cols-12
+  w-full gap-6 px-3 py-6 border-b border-accent-2
+  transition duration-100 ease-in-out;
+}

-  &:nth-child(3n + 1) {
-    & .productBg {
-      @apply bg-violet;
-    }
-  }
+.root:nth-child(3n + 1) .imageWrapper {
+  @apply bg-violet;
+}

-  &:nth-child(3n + 2) {
-    & .productBg {
-      @apply bg-pink;
-    }
-  }
+.root:nth-child(3n + 2) .imageWrapper {
+  @apply bg-pink;
+}

-  &:nth-child(3n + 3) {
-    & .productBg {
-      @apply bg-blue;
-    }
+.root:nth-child(3n + 3) .imageWrapper {
+  @apply bg-blue;
+}
+
+.imageWrapper {
+  @apply col-span-3;
+  min-width: 230px;
+  width: 230px;
+  height: 230px;
+}
+
+.description {
+  @apply col-span-7 flex flex-col;
+}
+
+.actions {
+  @apply absolute bg-accent-0 p-3 top-0 right-4;
+}
+
+@media screen(lg) {
+  .actions {
+    @apply static col-span-2 flex flex-col justify-between space-y-4;
  }
 }
--- a/site/components/wishlist/WishlistCard/WishlistCard.tsx
+++ b/site/components/wishlist/WishlistCard/WishlistCard.tsx
@ -13,13 +13,11 @@ import useAddItem from '@framework/cart/use-add-item'
 import useRemoveItem from '@framework/wishlist/use-remove-item'
 import type { Wishlist } from '@commerce/types/wishlist'

-interface Props {
-  item: Wishlist
-}
-
 const placeholderImg = '/product-img-placeholder.svg'

-const WishlistCard: FC<Props> = ({ item }) => {
+const WishlistCard: React.FC<{
+  item: Wishlist
+}> = ({ item }) => {
  const product: Product = item.product
  const { price } = usePrice({
    amount: product.price?.value,
@ -63,41 +61,41 @@ const WishlistCard: FC<Props> = ({ item }) => {

  return (
    <div className={cn(s.root, { 'opacity-75 pointer-events-none': removing })}>
-      <div className={`col-span-3 ${s.productBg}`}>
-        <div>
-          <Image
-            src={product.images[0]?.url || placeholderImg}
-            width={400}
-            height={400}
-            alt={product.images[0]?.alt || 'Product Image'}
-          />
-        </div>
+      <div className={s.imageWrapper}>
+        <Image
+          width={230}
+          height={230}
+          src={product.images[0]?.url || placeholderImg}
+          alt={product.images[0]?.alt || 'Product Image'}
+        />
      </div>

-      <div className="col-span-7">
-        <h3 className="text-2xl mb-2">
-          <Link href={`/product${product.path}`}>
-            <a>{product.name}</a>
-          </Link>
-        </h3>
-        <div className="mb-4">
-          <Text html={product.description} />
+      <div className={s.description}>
+        <div className="flex-1 mb-6">
+          <h3 className="text-2xl mb-2 -mt-1">
+            <Link href={`/product${product.path}`}>
+              <a>{product.name}</a>
+            </Link>
+          </h3>
+          <div className="mb-4">
+            <Text html={product.description} />
+          </div>
+        </div>
+        <div>
+          <Button
+            width={260}
+            aria-label="Add to Cart"
+            type="button"
+            onClick={addToCart}
+            loading={loading}
+          >
+            Add to Cart
+          </Button>
        </div>
-        <Button
-          aria-label="Add to Cart"
-          type="button"
-          className={
-            'py-1 px-3 border border-secondary rounded-md shadow-sm hover:bg-primary-hover'
-          }
-          onClick={addToCart}
-          loading={loading}
-        >
-          Add to Cart
-        </Button>
      </div>
-      <div className="col-span-2 flex flex-col justify-between">
+      <div className={s.actions}>
        <div className="flex justify-end font-bold">{price}</div>
-        <div className="flex justify-end">
+        <div className="flex justify-end mt-4 lg:mt-0">
          <button onClick={handleRemove}>
            <Trash />
          </button>
--- a/site/package.json
+++ b/site/package.json
@ -13,6 +13,7 @@
  },
  "sideEffects": false,
  "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^0.1.6",
    "@react-spring/web": "^9.4.1",
    "@vercel/commerce": "^0.0.1",
    "@vercel/commerce-bigcommerce": "^0.0.1",
--- a/site/pages/cart.tsx
+++ b/site/pages/cart.tsx
@ -3,7 +3,7 @@ import useCart from '@framework/cart/use-cart'
 import usePrice from '@framework/product/use-price'
 import commerce from '@lib/api/commerce'
 import { Layout } from '@components/common'
-import { Button, Text } from '@components/ui'
+import { Button, Text, Container } from '@components/ui'
 import { Bag, Cross, Check, MapPin, CreditCard } from '@components/icons'
 import { CartItem } from '@components/cart'
 import { useUI } from '@components/ui/context'
@ -48,8 +48,8 @@ export default function Cart() {
  }

  return (
-    <div className="grid lg:grid-cols-12 w-full max-w-7xl mx-auto">
-      <div className="lg:col-span-8">
+    <Container className="grid lg:grid-cols-12 pt-4 gap-20">
+      <div className="lg:col-span-7">
        {isLoading || isEmpty ? (
          <div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
            <span className="border border-dashed border-secondary flex items-center justify-center w-16 h-16 bg-primary p-12 rounded-lg text-primary">
@ -82,7 +82,7 @@ export default function Cart() {
            </h2>
          </div>
        ) : (
-          <div className="px-4 sm:px-6 flex-1">
+          <div className="lg:px-0 sm:px-6 flex-1">
            <Text variant="pageHeading">My Cart</Text>
            <Text variant="sectionHeading">Review your Order</Text>
            <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-2 border-b border-accent-2">
@ -111,7 +111,7 @@ export default function Cart() {
          </div>
        )}
      </div>
-      <div className="lg:col-span-4">
+      <div className="lg:col-span-5">
        <div className="flex-shrink-0 px-4 py-24 sm:px-6">
          {process.env.COMMERCE_CUSTOMCHECKOUT_ENABLED && (
            <>
@ -185,7 +185,7 @@ export default function Cart() {
          </div>
        </div>
      </div>
-    </div>
+    </Container>
  )
 }

--- a/site/pages/orders.tsx
+++ b/site/pages/orders.tsx
@ -22,7 +22,7 @@ export async function getStaticProps({

 export default function Orders() {
  return (
-    <Container>
+    <Container className="pt-4">
      <Text variant="pageHeading">My Orders</Text>
      <div className="flex-1 p-24 flex flex-col justify-center items-center ">
        <span className="border border-dashed border-secondary rounded-full flex items-center justify-center w-16 h-16 p-12 bg-primary text-primary">
--- a/site/pages/profile.tsx
+++ b/site/pages/profile.tsx
@ -23,24 +23,28 @@ export async function getStaticProps({
 export default function Profile() {
  const { data } = useCustomer()
  return (
-    <Container>
+    <Container className="pt-4">
      <Text variant="pageHeading">My Profile</Text>
-      {data && (
-        <div className="grid lg:grid-cols-12">
-          <div className="lg:col-span-8 pr-4">
-            <div>
-              <Text variant="sectionHeading">Full Name</Text>
+      <div className="grid grid-cols-4">
+        {data && (
+          <div className="flex flex-col divide-accent-2 divide-y">
+            <div className="flex flex-row items-center space-x-4 py-4">
+              <span className="text-lg font-medium text-accent-600 flex-1">
+                Full Name
+              </span>
              <span>
                {data.firstName} {data.lastName}
              </span>
            </div>
-            <div className="mt-5">
-              <Text variant="sectionHeading">Email</Text>
+            <div className="flex flex-row items-center space-x-4 py-4">
+              <span className="text-lg font-medium text-accent-600 flex-1">
+                Email
+              </span>
              <span>{data.email}</span>
            </div>
          </div>
-        </div>
-      )}
+        )}
+      </div>
    </Container>
  )
 }
--- a/site/pages/wishlist.tsx
+++ b/site/pages/wishlist.tsx
@ -40,8 +40,8 @@ export default function Wishlist() {
  const { data, isLoading, isEmpty } = useWishlist({ includeProducts: true })

  return (
-    <Container>
-      <div className="mt-3 mb-20">
+    <Container className="pt-4">
+      <div className="mb-20">
        <Text variant="pageHeading">My Wishlist</Text>
        <div className="group flex flex-col">
          {isLoading ? (
@ -65,9 +65,9 @@ export default function Wishlist() {
              </p>
            </div>
          ) : (
-            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            <div className="grid grid-cols-1 gap-6 ">
              {data &&
-                // @ts-ignore Shopify - Fix this types
+                // @ts-ignore - Wishlist Item Type
                data.items?.map((item) => (
                  <WishlistCard key={item.id} item={item!} />
                ))}
--- a/yarn.lock
+++ b/yarn.lock
@ -444,6 +444,13 @@
  dependencies:
    regenerator-runtime "^0.13.4"

+"@babel/runtime@^7.13.10":
+  version "7.17.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941"
+  integrity sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.16.7":
  version "7.16.7"
  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
@ -982,6 +989,261 @@
  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
  integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==

+"@radix-ui/popper@0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/popper/-/popper-0.1.0.tgz#c387a38f31b7799e1ea0d2bb1ca0c91c2931b063"
+  integrity sha512-uzYeElL3w7SeNMuQpXiFlBhTT+JyaNMCwDfjKkrzugEcYrf5n52PHqncNdQPUtR42hJh8V9FsqyEDbDxkeNjJQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    csstype "^3.0.4"
+
+"@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-arrow@0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-0.1.4.tgz#a871448a418cd3507d83840fdd47558cb961672b"
+  integrity sha512-BB6XzAb7Ml7+wwpFdYVtZpK1BlMgqyafSQNGzhIpSZ4uXvXOHPlR5GP8M449JkeQzgQjv9Mp1AsJxFC0KuOtuA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "0.1.4"
+
+"@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-dropdown-menu@^0.1.6":
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-0.1.6.tgz#3203229788cd57e552c9f19dcc7008e2b545919c"
+  integrity sha512-RZhtzjWwJ4ZBN7D8ek4Zn+ilHzYuYta9yIxFnbC0pfqMnSi67IQNONo1tuuNqtFh9SRHacPKc65zo+kBBlxtdg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "0.1.0"
+    "@radix-ui/react-compose-refs" "0.1.0"
+    "@radix-ui/react-context" "0.1.1"
+    "@radix-ui/react-id" "0.1.5"
+    "@radix-ui/react-menu" "0.1.6"
+    "@radix-ui/react-primitive" "0.1.4"
+    "@radix-ui/react-use-controllable-state" "0.1.0"
+
+"@radix-ui/react-focus-guards@0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-0.1.0.tgz#ba3b6f902cba7826569f8edc21ff8223dece7def"
+  integrity sha512-kRx/swAjEfBpQ3ns7J3H4uxpXuWCqN7MpALiSDOXiyo2vkWv0L9sxvbpZeTulINuE3CGMzicVMuNc/VWXjFKOg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-focus-scope@0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-0.1.4.tgz#c830724e212d42ffaaa81aee49533213d09b47df"
+  integrity sha512-fbA4ES3H4Wkxp+OeLhvN6SwL7mXNn/aBtUf7DRYxY9+Akrf7dRxl2ck4lgcpPsSg3zSDsEwLcY+h5cmj5yvlug==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "0.1.0"
+    "@radix-ui/react-primitive" "0.1.4"
+    "@radix-ui/react-use-callback-ref" "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-menu@0.1.6":
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-0.1.6.tgz#7f9521a10f6a9cd819b33b33d5ed9538d79b2e75"
+  integrity sha512-ho3+bhpr3oAFkOBJ8VkUb1BcGoiZBB3OmcWPqa6i5RTUKrzNX/d6rauochu2xDlWjiRtpVuiAcsTVOeIC4FbYQ==
+  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-focus-guards" "0.1.0"
+    "@radix-ui/react-focus-scope" "0.1.4"
+    "@radix-ui/react-id" "0.1.5"
+    "@radix-ui/react-popper" "0.1.4"
+    "@radix-ui/react-portal" "0.1.4"
+    "@radix-ui/react-presence" "0.1.2"
+    "@radix-ui/react-primitive" "0.1.4"
+    "@radix-ui/react-roving-focus" "0.1.5"
+    "@radix-ui/react-use-callback-ref" "0.1.0"
+    "@radix-ui/react-use-direction" "0.1.0"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "^2.4.0"
+
+"@radix-ui/react-popper@0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-0.1.4.tgz#dfc055dcd7dfae6a2eff7a70d333141d15a5d029"
+  integrity sha512-18gDYof97t8UQa7zwklG1Dr8jIdj3u+rVOQLzPi9f5i1YQak/pVGkaqw8aY+iDUknKKuZniTk/7jbAJUYlKyOw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/popper" "0.1.0"
+    "@radix-ui/react-arrow" "0.1.4"
+    "@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-use-rect" "0.1.1"
+    "@radix-ui/react-use-size" "0.1.1"
+    "@radix-ui/rect" "0.1.1"
+
+"@radix-ui/react-portal@0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-0.1.4.tgz#17bdce3d7f1a9a0b35cb5e935ab8bc562441a7d2"
+  integrity sha512-MO0wRy2eYRTZ/CyOri9NANCAtAtq89DEtg90gicaTlkCfdqCLEBsLb+/q66BZQTr3xX/Vq01nnVfc/TkCqoqvw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "0.1.4"
+    "@radix-ui/react-use-layout-effect" "0.1.0"
+
+"@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-roving-focus@0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-0.1.5.tgz#cc48d17a36b56f253d54905b0fd60ee134cb97ee"
+  integrity sha512-ClwKPS5JZE+PaHCoW7eu1onvE61pDv4kO8W4t5Ra3qMFQiTJLZMdpBQUhksN//DaVygoLirz4Samdr5Y1x1FSA==
+  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-id" "0.1.5"
+    "@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-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-rect@0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-0.1.1.tgz#6c15384beee59c086e75b89a7e66f3d2e583a856"
+  integrity sha512-kHNNXAsP3/PeszEmM/nxBBS9Jbo93sO+xuMTcRfwzXsmxT5gDXQzAiKbZQ0EecCPtJIzqvr7dlaQi/aP1PKYqQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/rect" "0.1.1"
+
+"@radix-ui/react-use-size@0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-0.1.1.tgz#f6b75272a5d41c3089ca78c8a2e48e5f204ef90f"
+  integrity sha512-pTgWM5qKBu6C7kfKxrKPoBI2zZYZmp2cSXzpUiGM3qEBQlMLtYhaY2JXdXUCxz+XmD1YEjc8oRwvyfsD4AG4WA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/rect@0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-0.1.1.tgz#95b5ba51f469bea6b1b841e2d427e17e37d38419"
+  integrity sha512-g3hnE/UcOg7REdewduRPAK88EPuLZtaq7sA9ouu8S+YEtnyFRI16jgv6GZYe3VMoQLL1T171ebmEPtDjyxWLzw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@react-spring/animated@~9.4.0":
  version "9.4.2"
  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.4.2.tgz#1dc107233ce4a44b023abac829f3b2ea8327a128"
@ -1556,6 +1818,13 @@ argparse@^2.0.1:
  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==

+aria-hidden@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.1.3.tgz#bb48de18dc84787a3c6eee113709c473c64ec254"
+  integrity sha512-RhVWFtKH5BiGMycI72q2RAFMLQi8JP9bLuQXgR5a8Znp7P5KOIADSJeyfI8PCVxLEp067B2HbP5JIiI/PXIZeA==
+  dependencies:
+    tslib "^1.0.0"
+
 aria-query@^4.2.2:
  version "4.2.2"
  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
@ -2392,6 +2661,11 @@ csstype@^3.0.2:
  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
  integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==

+csstype@^3.0.4:
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33"
+  integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==
+
 damerau-levenshtein@^1.0.7:
  version "1.0.8"
  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@ -2533,6 +2807,11 @@ detect-indent@^6.0.0:
  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6"
  integrity sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==

+detect-node-es@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
+  integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
+
 detective@^5.2.0:
  version "5.2.0"
  resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.0.tgz#feb2a77e85b904ecdea459ad897cc90a99bd2a7b"
@ -3283,6 +3562,11 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
    has "^1.0.3"
    has-symbols "^1.0.1"

+get-nonce@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
+  integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
+
 get-stream@^4.1.0:
  version "4.1.0"
  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
@ -5636,6 +5920,34 @@ react-refresh@0.8.3:
  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
  integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==

+react-remove-scroll-bar@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.2.0.tgz#d4d545a7df024f75d67e151499a6ab5ac97c8cdd"
+  integrity sha512-UU9ZBP1wdMR8qoUs7owiVcpaPwsQxUDC2lypP6mmixaGlARZa7ZIBx1jcuObLdhMOvCsnZcvetOho0wzPa9PYg==
+  dependencies:
+    react-style-singleton "^2.1.0"
+    tslib "^1.0.0"
+
+react-remove-scroll@^2.4.0:
+  version "2.4.4"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.4.4.tgz#2dfff377cf17efc00de39dad51c143fc7a1b9e3e"
+  integrity sha512-EyC5ohYhaeKbThMSQxuN2i+QC5HqV3AJvNZKEdiATITexu0gHm00+5ko0ltNS1ajYJVeDgVG2baRSCei0AUWlQ==
+  dependencies:
+    react-remove-scroll-bar "^2.1.0"
+    react-style-singleton "^2.1.0"
+    tslib "^1.0.0"
+    use-callback-ref "^1.2.3"
+    use-sidecar "^1.0.1"
+
+react-style-singleton@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.1.tgz#ce7f90b67618be2b6b94902a30aaea152ce52e66"
+  integrity sha512-jNRp07Jza6CBqdRKNgGhT3u9umWvils1xsuMOjZlghBDH2MU0PL2WZor4PGYjXpnRCa9DQSlHMs/xnABWOwYbA==
+  dependencies:
+    get-nonce "^1.0.0"
+    invariant "^2.2.4"
+    tslib "^1.0.0"
+
 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"
@ -6617,7 +6929,7 @@ tsconfig-paths@^3.12.0, tsconfig-paths@^3.9.0:
    minimist "^1.2.0"
    strip-bom "^3.0.0"

-tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.0.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
  version "1.14.1"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@ -6822,6 +7134,19 @@ url-parse-lax@^3.0.0:
  dependencies:
    prepend-http "^2.0.0"

+use-callback-ref@^1.2.3:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.5.tgz#6115ed242cfbaed5915499c0a9842ca2912f38a5"
+  integrity sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==
+
+use-sidecar@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.5.tgz#ffff2a17c1df42e348624b699ba6e5c220527f2b"
+  integrity sha512-k9jnrjYNwN6xYLj1iaGhonDghfvmeTmYjAiGvOr7clwKfPjMXJf4/HOr7oT5tJwYafgp2tG2l3eZEOfoELiMcA==
+  dependencies:
+    detect-node-es "^1.1.0"
+    tslib "^1.9.3"
+
 use-subscription@1.5.1:
  version "1.5.1"
  resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1"
				`@ -0,0 +1 @@`
				`export { default } from './CustomerMenuContent'`