From 137d8968141bd42b1c947e7fb65b8893b6f39575 Mon Sep 17 00:00:00 2001
From: Denis Fadeev <denis@fadeev.org>
Date: Thu, 25 Jul 2024 12:28:48 +0300
Subject: [PATCH] Readme (#6)

---
 package.json                            |   3 +-
 src/app/page.tsx                        |  40 +-----
 src/components/Balances/index.tsx       |  44 +++----
 src/components/StakingRewards/index.tsx |   4 +-
 src/components/Swap/Layout.tsx          |  20 +--
 src/components/ui/select.tsx            | 160 ++++++++++++++++++++++++
 src/index.ts                            |   1 +
 tailwind.config.js                      |  56 +++++++++
 yarn.lock                               |  44 +++++++
 9 files changed, 303 insertions(+), 69 deletions(-)
 create mode 100644 src/components/ui/select.tsx

diff --git a/package.json b/package.json
index 3ce5e04..1730606 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@rainbow-me/rainbowkit": "^2.1.3",
     "@tanstack/react-query": "^5.28.4",
@@ -68,4 +69,4 @@
     "node": ">=18.0.0"
   },
   "packageManager": "yarn@1.22.21+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
-}
\ No newline at end of file
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1cd93c2..0471d61 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,46 +1,14 @@
 "use client";
 
-import { useState } from "react";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
-import {
-  ConnectBitcoin,
-  useZetaChainClient,
-  useEthersSigner,
-  Swap,
-} from "@/index";
+import { ConnectBitcoin } from "@/index";
 import { useAccount, useChainId, useWalletClient } from "wagmi";
-import { ThemeToggle } from "@/components/ThemeToggle";
-import { useBitcoinWallet } from "@/providers/BitcoinWalletProvider";
-
-const contract = "0xb459F14260D1dc6484CE56EB0826be317171e91F";
 
 const Page = () => {
-  const account = useAccount();
-  const chainId = useChainId();
-  const { data: walletClient } = useWalletClient({ chainId });
-  const signer = useEthersSigner({ walletClient });
-  const client = useZetaChainClient({ network: "testnet", signer });
-  const { sendTransaction, address: bitcoinAddress } = useBitcoinWallet();
-
   return (
-    <div className="m-4">
-      <div className="flex justify-end gap-2 mb-10">
-        <ThemeToggle />
-        <ConnectBitcoin />
-        <ConnectButton label="Connect EVM" showBalance={false} />
-      </div>
-      <div className="flex justify-center">
-        <div className="w-[400px]">
-          {client && (
-            <Swap
-              client={client}
-              account={account}
-              bitcoin={bitcoinAddress}
-              contract={contract}
-            />
-          )}
-        </div>
-      </div>
+    <div>
+      <ConnectBitcoin />
+      <ConnectButton />
     </div>
   );
 };
diff --git a/src/components/Balances/index.tsx b/src/components/Balances/index.tsx
index 547a08a..6e37b91 100644
--- a/src/components/Balances/index.tsx
+++ b/src/components/Balances/index.tsx
@@ -78,24 +78,26 @@ export const Balances = ({
     );
 
   const SearchInput = (
-    <div className="m-2 relative flex items-center">
-      <Input
-        placeholder="Search tokens..."
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-        className="pl-9"
-      />
-      <Search className="absolute left-3 top-3 w-4 h-4 text-gray-500" />
-      <Button
-        variant="link"
-        size="icon"
-        className="ml-2 absolute right-0 top-0"
-        onClick={() => fetchBalances(true)}
-      >
-        <RefreshCw
-          className={`w-4 h-4 text-gray-500 ${isReloading && "animate-spin"}`}
+    <div className="p-2">
+      <div className="relative flex items-center">
+        <Input
+          placeholder="Search tokens..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="pl-9 dark:bg-zinc-900"
         />
-      </Button>
+        <Search className="absolute left-3 top-3 w-4 h-4 text-gray-500" />
+        <Button
+          variant="link"
+          size="icon"
+          className="ml-2 absolute right-0 top-0"
+          onClick={() => fetchBalances(true)}
+        >
+          <RefreshCw
+            className={`w-4 h-4 text-gray-500 ${isReloading && "animate-spin"}`}
+          />
+        </Button>
+      </div>
     </div>
   );
 
@@ -107,7 +109,7 @@ export const Balances = ({
             variant="outline"
             size="sm"
             key={chain}
-            className={`mr-2 ${
+            className={`mr-2 dark:font-light ${
               selectedChain === chain ? "bg-zinc-100 dark:bg-zinc-800" : ""
             }`}
             onClick={() =>
@@ -130,7 +132,7 @@ export const Balances = ({
           onClick={() => onBalanceClick(token)}
         >
           <div className="flex flex-col">
-            <span>{token.symbol}</span>
+            <span className="font-light">{token.symbol}</span>
             <span className="text-gray-500 text-xs">{token.chain_name}</span>
           </div>
           <span>{roundNumber(parseFloat(token.balance))}</span>
@@ -140,7 +142,7 @@ export const Balances = ({
   );
 
   const LoadingSkeleton = (
-    <div className="space-y-2 px-2 pb-2">
+    <div className="space-y-2 px-2 pb-2 mt-2">
       {Array(5)
         .fill(null)
         .map((_, index) => (
@@ -157,7 +159,7 @@ export const Balances = ({
 
   return (
     <div>
-      <Card className="dark:bg-zinc-900">
+      <Card className="dark:bg-zinc-900 border-none shadow-xl shadow-zeta-grey-100 dark:shadow-none">
         {SearchInput}
         {error ? (
           ErrorMessage
diff --git a/src/components/StakingRewards/index.tsx b/src/components/StakingRewards/index.tsx
index 57dd578..a858225 100644
--- a/src/components/StakingRewards/index.tsx
+++ b/src/components/StakingRewards/index.tsx
@@ -131,7 +131,7 @@ export const StakingRewards = ({ client, account }: any) => {
 
   return (
     <div className="grid grid-cols-2 gap-2">
-      <Card className="p-2 flex flex-col gap-4">
+      <Card className="p-2 flex flex-col gap-4 dark:bg-zinc-900 dark:border-none">
         <div className="px-2">
           <div className="text-xs text-muted-foreground">Staked</div>
           {isConnected ? (
@@ -153,7 +153,7 @@ export const StakingRewards = ({ client, account }: any) => {
           )}
         </div>
       </Card>
-      <Card className="p-2 flex flex-col gap-2 justify-between">
+      <Card className="p-2 flex flex-col gap-2 justify-between dark:bg-zinc-900 dark:border-none">
         <div className="px-2">
           <div className="text-xs text-muted-foreground">Rewards</div>
           {isConnected ? (
diff --git a/src/components/Swap/Layout.tsx b/src/components/Swap/Layout.tsx
index ffb59a1..9f2eb9a 100644
--- a/src/components/Swap/Layout.tsx
+++ b/src/components/Swap/Layout.tsx
@@ -105,7 +105,7 @@ const SwapLayout: React.FC<SwapLayoutProps> = ({
   };
 
   return (
-    <Card className="p-0 px-5 pb-7 pt-2 dark:bg-zinc-900">
+    <Card className="p-0 px-5 pb-7 pt-2 dark:bg-zinc-900 border-none shadow-xl shadow-zeta-grey-100 dark:shadow-none">
       <h1 className="text-2xl font-bold leading-tight tracking-tight mt-6 mb-4 ml-2">
         {sendTypeDetails[sendType as any]?.title || "Swap"}
       </h1>
@@ -154,16 +154,16 @@ const SwapLayout: React.FC<SwapLayoutProps> = ({
                 <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-75" />
               </Button>
             </PopoverTrigger>
-            <PopoverContent className="w-[300px] p-0 border-none shadow-2xl dark:border dark:border-zinc-800 dark:border-solid">
+            <PopoverContent className="w-[300px] p-0 border-none shadow-2xl">
               <Command>
-                <CommandList className="dark:bg-zinc-900">
+                <CommandList className="dark:bg-zinc-800">
                   <CommandInput placeholder="Search tokens..." />
                   <CommandEmpty>No available tokens found.</CommandEmpty>
                   <CommandGroup className="max-h-[400px] overflow-y-scroll">
                     {sourceBalances.map((balances: any) => (
                       <CommandItem
                         key={balances.id}
-                        className="hover:cursor-pointer"
+                        className="hover:cursor-pointer dark:hover:bg-zinc-700"
                         value={balances.id}
                         onSelect={(c: any) => {
                           setSourceToken(c === sourceTokenSelected ? null : c);
@@ -238,16 +238,16 @@ const SwapLayout: React.FC<SwapLayoutProps> = ({
                 <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-75" />
               </Button>
             </PopoverTrigger>
-            <PopoverContent className="w-[300px] p-0 border-none shadow-2xl dark:border dark:border-zinc-800 dark:border-solid">
+            <PopoverContent className="w-[300px] p-0 border-none shadow-2xl">
               <Command>
-                <CommandList className="dark:bg-zinc-900">
+                <CommandList className="dark:bg-zinc-800">
                   <CommandInput placeholder="Search tokens..." />
                   <CommandEmpty>No available tokens found.</CommandEmpty>
                   <CommandGroup className="max-h-[400px] overflow-y-scroll">
                     {destinationBalances?.map((balances: any) => (
                       <CommandItem
                         key={balances.id}
-                        className={`hover:cursor-pointer ${
+                        className={`hover:cursor-pointer  dark:hover:bg-zinc-700 ${
                           !computeSendType(sourceTokenSelected, balances) &&
                           "opacity-25"
                         }`}
@@ -308,7 +308,7 @@ const SwapLayout: React.FC<SwapLayoutProps> = ({
                   <div>{formatAddress(addressSelected)}</div>
                 </Button>
               </PopoverTrigger>
-              <PopoverContent className="rounded-xl flex p-2 border-none shadow-xl space-x-2 w-[390px] dark:bg-zinc-900 dark:border dark:border-zinc-800 dark:border-solid">
+              <PopoverContent className="rounded-xl flex p-2 border-none shadow-xl space-x-2 w-[390px] dark:bg-zinc-800">
                 <Input
                   className="grow border-none text-xs px-2 bg-transparent"
                   placeholder="Recipient address"
@@ -319,6 +319,7 @@ const SwapLayout: React.FC<SwapLayoutProps> = ({
                   <Button
                     disabled={!isCustomAddressValid}
                     size="icon"
+                    className="dark:border-zinc-900"
                     variant="outline"
                     onClick={confirmCustomAddress}
                   >
@@ -339,7 +340,7 @@ const SwapLayout: React.FC<SwapLayoutProps> = ({
                   {crossChainFee.formatted}
                 </Button>
               </PopoverTrigger>
-              <PopoverContent className="rounded-xl w-auto text-xs border-none shadow-2xl dark:bg-zinc-900 dark:border dark:border-zinc-800 dark:border-solid">
+              <PopoverContent className="rounded-xl w-auto text-xs border-none shadow-2xl dark:bg-zinc-800">
                 <div className="font-medium text-center">Cross-Chain Fee</div>
                 <div className="text-zinc-400">{crossChainFee?.amount}</div>
               </PopoverContent>
@@ -352,6 +353,7 @@ const SwapLayout: React.FC<SwapLayoutProps> = ({
             <div>
               <Button
                 variant="outline"
+                className="dark:border-none dark:bg-zinc-800 dark:hover:bg-zinc-800/50"
                 onClick={handleSend}
                 disabled={sendDisabled}
               >
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 0000000..cbe5a36
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
diff --git a/src/index.ts b/src/index.ts
index eec783b..a5975cf 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,6 +5,7 @@ export { StakingRewards } from "./components/StakingRewards";
 export { ConnectBitcoin } from "./components/ConnectBitcoin";
 export { BitcoinWalletProvider } from "./providers/BitcoinWalletProvider";
 export { UniversalKitProvider } from "./providers/UniversalKitProvider";
+export { useBitcoinWallet } from "./providers/BitcoinWalletProvider";
 export * from "./hooks/useEthersSigner";
 export * from "./hooks/useZetaChainClient";
 import "./styles/global.css";
diff --git a/tailwind.config.js b/tailwind.config.js
index f50c219..5277847 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -30,6 +30,62 @@ module.exports = {
       },
       colors: {
         bitcoin: "#f89414",
+        zeta: {
+          green: {
+            50: "#00DDA5",
+            100: "#00BC8D",
+            200: "#00A87D",
+            300: "#005741",
+            400: "#008462",
+            500: "#007457",
+            600: "#00664C",
+            700: "#005741",
+            800: "#004937",
+            900: "#003D2D",
+          },
+          mauve: {
+            100: "#FF5AF1",
+            300: "#E34ED6",
+            500: "#C241B6",
+            700: "#A03595",
+            900: "#521A4D",
+          },
+          blue: {
+            100: "#00D5FF",
+            300: "#00C6EE",
+            500: "#00B8DD",
+            700: "#00A5C6",
+            900: "#006579",
+          },
+          orange: {
+            100: "#FFAB00",
+            300: "#F4A400",
+            500: "#EB9E00",
+            700: "#D99200",
+            900: "#B87C00",
+          },
+          lime: {
+            100: "#EFFFDE",
+            500: "#C4FF8A",
+            700: "#B0FF61",
+            900: "#9AEA4A",
+          },
+          sand: {
+            100: "#F7F3EC",
+          },
+          grey: {
+            50: "#FFFFFF",
+            100: "#EFF1F4",
+            200: "#E5E8EC",
+            300: "#A9ACB0",
+            400: "#696E75",
+            500: "#3C4146",
+            600: "#2D3237",
+            700: "#1F2328",
+            800: "#15191E",
+            900: "#000000",
+          },
+        },
         rainbowkit: {
           dark: "#1a1b1f",
           secondary: "#24262a",
diff --git a/yarn.lock b/yarn.lock
index 28f6ace..923a59b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2141,6 +2141,11 @@
   resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
   integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
 
+"@radix-ui/number@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.1.0.tgz#1e95610461a09cdf8bb05c152e76ca1278d5da46"
+  integrity sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==
+
 "@radix-ui/primitive@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.1.tgz#e46f9958b35d10e9f6dc71c497305c22e3e55dbd"
@@ -2465,6 +2470,33 @@
     "@radix-ui/react-use-callback-ref" "1.1.0"
     "@radix-ui/react-use-controllable-state" "1.1.0"
 
+"@radix-ui/react-select@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-select/-/react-select-2.1.1.tgz#df05cb0b29d3deaef83b505917c4042e0e418a9f"
+  integrity sha512-8iRDfyLtzxlprOo9IicnzvpsO1wNCkuwzzCM+Z5Rb5tNOpCdMvcc2AkzX0Fz+Tz9v6NJ5B/7EEgyZveo4FBRfQ==
+  dependencies:
+    "@radix-ui/number" "1.1.0"
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-collection" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-direction" "1.1.0"
+    "@radix-ui/react-dismissable-layer" "1.1.0"
+    "@radix-ui/react-focus-guards" "1.1.0"
+    "@radix-ui/react-focus-scope" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-popper" "1.2.0"
+    "@radix-ui/react-portal" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-slot" "1.1.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+    "@radix-ui/react-use-previous" "1.1.0"
+    "@radix-ui/react-visually-hidden" "1.1.0"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.7"
+
 "@radix-ui/react-slot@1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab"
@@ -2534,6 +2566,11 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27"
   integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==
 
+"@radix-ui/react-use-previous@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz#d4dd37b05520f1d996a384eb469320c2ada8377c"
+  integrity sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==
+
 "@radix-ui/react-use-rect@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz#13b25b913bd3e3987cc9b073a1a164bb1cf47b88"
@@ -2548,6 +2585,13 @@
   dependencies:
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
+"@radix-ui/react-visually-hidden@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz#ad47a8572580f7034b3807c8e6740cd41038a5a2"
+  integrity sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==
+  dependencies:
+    "@radix-ui/react-primitive" "2.0.0"
+
 "@radix-ui/rect@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.1.0.tgz#f817d1d3265ac5415dadc67edab30ae196696438"