feat: upgrade to radix 3.0

package.json

@@ -36,7 +36,7 @@
     "@prisma/client": "^5.4.1",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/themes": "^2.0.1",
+    "@radix-ui/themes": "^3.0.1",
     "@react-three/drei": "^9.93.0",
     "@react-three/fiber": "^8.15.14",
     "@resvg/resvg-js": "^2.4.1",

src/app/page.tsx

@@ -15,11 +15,10 @@ export default function Page() {
 
   return (
     <PageWrapper>
-      <TextField.Root>
+      <TextField.Root placeholder="Search tools...">
         <TextField.Slot>
           <MagnifyingGlassIcon height="16" width="16" />
         </TextField.Slot>
-        <TextField.Input ref={input} placeholder="Search tools..." />
       </TextField.Root>
 
       <Flex gap="3" wrap="wrap" align="center" justify="center">

src/app/tools/rating/components/PageTurner/index.tsx

@@ -53,20 +53,16 @@ export function PageTurner({
             <CaretLeftIcon />
           )}
         </Button>
-        <TextField.Root>
-          <TextField.Slot>Page</TextField.Slot>
-          <TextField.Input
+
+        <TextField.Root
           type="number"
           ref={pageInput}
-            style={{ width: 64, textAlign: 'center' }}
+          style={{ textAlign: 'center' }}
           min={1}
           max={pages}
           onBlur={(event) => {
             onPageChange(
-                Math.max(
-                  0,
-                  Math.min(pages - 1, event.target.valueAsNumber - 1),
-                ),
+              Math.max(0, Math.min(pages - 1, event.target.valueAsNumber - 1)),
               false,
             );
           }}
@@ -75,7 +71,8 @@ export function PageTurner({
               (event.target as HTMLInputElement).blur();
             }
           }}
-          />
+        >
+          <TextField.Slot>Page</TextField.Slot>
           <TextField.Slot>out of {pages}</TextField.Slot>
         </TextField.Root>
         <Button

src/app/tools/rating/page.tsx

@@ -605,7 +605,7 @@ export default function Page() {
 
             <Dialog.Content>
               <Flex gap="4" justify="center">
-                <TextField.Input
+                <TextField.Root
                   ref={scoreInput}
                   type="number"
                   placeholder="Type a score..."
@@ -638,7 +638,7 @@ export default function Page() {
 
             <Dialog.Content>
               <Flex gap="4" justify="center">
-                <TextField.Input
+                <TextField.Root
                   ref={positionInput}
                   type="number"
                   placeholder="Type a position..."
@@ -759,12 +759,7 @@ export default function Page() {
 
             <Dialog.Content>
               <Flex gap="4" direction="column">
-                <TextField.Root>
-                  <TextField.Slot>
-                    <MagnifyingGlassIcon height="16" width="16" />
-                  </TextField.Slot>
-
-                  <TextField.Input
+                <TextField.Root
                   onChange={debounce(
                     async (event: ChangeEvent<HTMLInputElement>) => {
                       const trimmedSearch = event.target.value.trim();
@@ -774,8 +769,7 @@ export default function Page() {
                         if (season === 0) {
                           setSearchLoading(true);
 
-                            const accountList =
-                              await searchCurrentRatingPlayers(
+                          const accountList = await searchCurrentRatingPlayers(
                             region,
                             trimmedSearch,
                           );
@@ -843,9 +837,7 @@ export default function Page() {
                                   )!,
                                 ),
                               }))
-                                .filter(
-                                  (player) => !Number.isNaN(player.number),
-                                ),
+                              .filter((player) => !Number.isNaN(player.number)),
                           );
 
                           setSearchLoading(false);
@@ -857,7 +849,10 @@ export default function Page() {
                     500,
                   )}
                   placeholder="Search for player..."
-                  />
+                >
+                  <TextField.Slot>
+                    <MagnifyingGlassIcon height="16" width="16" />
+                  </TextField.Slot>
                 </TextField.Root>
 
                 <Flex direction="column" gap="2">

src/app/tools/session/components/Menu.tsx

@@ -37,8 +37,8 @@ export function Menu({ Builder, reset }: ContextMenuProps) {
             <Heading size="4">Edit title</Heading>
 
             <Flex gap="2" style={{ width: '100%' }}>
-              <TextField.Root style={{ flex: 1 }}>
-                <TextField.Input
+              <TextField.Root
+                style={{ flex: 1 }}
                 ref={titleInput}
                 defaultValue={session.title}
                 placeholder="Enter title..."
@@ -49,7 +49,6 @@ export function Menu({ Builder, reset }: ContextMenuProps) {
                   }
                 }}
               />
-              </TextField.Root>
 
               <Dialog.Close>
                 <Button

src/app/tools/session/page.tsx

@@ -56,12 +56,7 @@ export default function Page() {
     <PageWrapper color="blue">
       <div className={styles.toolBar}>
         <div style={{ flex: 1, boxSizing: 'border-box', position: 'relative' }}>
-          <TextField.Root>
-            <TextField.Slot>
-              <PersonIcon height="16" width="16" />
-            </TextField.Slot>
-
-            <TextField.Input
+          <TextField.Root
             defaultValue={session.isTracking ? session.nickname : undefined}
             ref={input}
             onChange={(event) => {
@@ -77,7 +72,7 @@ export default function Page() {
               handleChange(event);
             }}
             onBlur={(event) => {
-                // TODO: remove this hack when https://github.com/radix-ui/primitives/issues/2193 is fixed
+              // TODO: remove this hack when https://github.com/radix-ui/primitives/issues/2193 (https://github.com/radix-ui/primitives/issues/1969) is fixed
               if (showSearchResults) event.target.focus();
             }}
             onKeyDown={(event) => {
@@ -87,7 +82,10 @@ export default function Page() {
               }
             }}
             placeholder="Search for a player..."
-            />
+          >
+            <TextField.Slot>
+              <PersonIcon height="16" width="16" />
+            </TextField.Slot>
           </TextField.Root>
 
           <DropdownMenu.Root open={showSearchResults} modal={false}>

src/app/tools/tankopedia/[id]/components/Characteristics/components/Miscellaneous.tsx

@@ -89,9 +89,7 @@ export function Miscellaneous() {
             justify="end"
             style={{ width: 180 }}
           >
-            <TextField.Root>
-              <TextField.Slot>Crew</TextField.Slot>
-              <TextField.Input
+            <TextField.Root
               ref={crewInput}
               defaultValue={Math.round(crewMastery * 100)}
               style={{ textAlign: 'right' }}
@@ -116,7 +114,8 @@ export function Miscellaneous() {
                   crewInput.current?.blur();
                 }
               }}
-              />
+            >
+              <TextField.Slot>Crew</TextField.Slot>
               <TextField.Slot>%</TextField.Slot>
             </TextField.Root>
 

src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx

@@ -418,8 +418,8 @@ export function Characteristics() {
                   setPenetrationDistance(value);
                 }, 500)}
               />
-              <TextField.Root style={{ width: 64 }}>
-                <TextField.Input
+              <TextField.Root
+                style={{ width: 64 }}
                 ref={penetrationDistanceInput}
                 defaultValue={penetrationDistance}
                 onBlur={() => {
@@ -435,8 +435,8 @@ export function Characteristics() {
                     event.currentTarget.blur();
                   }
                 }}
-                />
-                <TextField.Slot>m</TextField.Slot>
+              >
+                <TextField.Slot side="right">m</TextField.Slot>
               </TextField.Root>
             </Flex>
           </>

src/app/tools/tankopedia/[id]/components/QuickInputs/index.tsx

@@ -54,16 +54,8 @@ export function RotationInputs({ isFullScreen }: RotationInputsProps) {
         <TextField.Root
           style={{
             flex: 1,
+            textAlign: 'right',
           }}
-        >
-          <TextField.Slot
-            style={{
-              userSelect: 'none',
-            }}
-          >
-            Yaw
-          </TextField.Slot>
-          <TextField.Input
           onBlur={() => {
             const [pitch, yaw] = applyPitchYawLimits(
               protagonist.pitch,
@@ -88,29 +80,25 @@ export function RotationInputs({ isFullScreen }: RotationInputsProps) {
           }}
           onFocus={() => turretYawInput.current?.focus()}
           ref={turretYawInput}
-            style={{ textAlign: 'right' }}
-          />
-          <TextField.Slot style={{ userSelect: 'none' }}>°</TextField.Slot>
-        </TextField.Root>
-
-        <TextField.Root
-          style={{
-            flex: 1,
-          }}
         >
           <TextField.Slot
             style={{
               userSelect: 'none',
             }}
           >
-            Pitch
+            Yaw
           </TextField.Slot>
-          <TextField.Input
+          <TextField.Slot style={{ userSelect: 'none' }}>°</TextField.Slot>
+        </TextField.Root>
+
+        <TextField.Root
+          style={{
+            flex: 1,
+            textAlign: 'right',
+          }}
           onBlur={() => {
             const [pitch, yaw] = applyPitchYawLimits(
-                degToRad(
-                  -Number(gunPitchInput.current!.value) + initialGunPitch,
-                ),
+              degToRad(-Number(gunPitchInput.current!.value) + initialGunPitch),
               protagonist.yaw,
               gunModelDefinition.pitch,
               turretModelDefinition.yaw,
@@ -132,8 +120,14 @@ export function RotationInputs({ isFullScreen }: RotationInputsProps) {
           }}
           onFocus={() => gunPitchInput.current?.focus()}
           ref={gunPitchInput}
-            style={{ textAlign: 'right' }}
-          />
+        >
+          <TextField.Slot
+            style={{
+              userSelect: 'none',
+            }}
+          >
+            Pitch
+          </TextField.Slot>
           <TextField.Slot
             style={{
               userSelect: 'none',

src/app/tools/tankopedia/components/PageTurner.tsx

@@ -32,15 +32,13 @@ export function PageTurner({ searchedList, tanksPerPage }: PageTurnerProps) {
       >
         <CaretLeftIcon />
       </Button>
-      <TextField.Root>
-        <TextField.Slot>Page</TextField.Slot>
-        <TextField.Input
+      <TextField.Root
         defaultValue={1}
         type="number"
         ref={pageInput}
         min={1}
         max={Math.floor(searchedList.length / tanksPerPage) + 1}
-          style={{ width: 64, textAlign: 'center' }}
+        style={{ textAlign: 'center' }}
         onBlur={(event) => {
           mutateTankopediaPersistent((draft) => {
             draft.filters.page = Math.max(
@@ -57,7 +55,8 @@ export function PageTurner({ searchedList, tanksPerPage }: PageTurnerProps) {
             (event.target as HTMLInputElement).blur();
           }
         }}
-        />
+      >
+        <TextField.Slot>Page</TextField.Slot>
         <TextField.Slot>
           out of {Math.floor(searchedList.length / tanksPerPage) + 1}
         </TextField.Slot>

src/app/tools/tankopedia/components/TankSearch/index.tsx

@@ -392,12 +392,8 @@ export function TankSearch({ compact, onSelect = () => {} }: TankSearchProps) {
     <>
       <Flex direction="column" gap="4">
         <Flex gap="2">
-          <TextField.Root style={{ flex: 1 }}>
-            <TextField.Slot>
-              <MagnifyingGlassIcon height="16" width="16" />
-            </TextField.Slot>
-
-            <TextField.Input
+          <TextField.Root
+            style={{ flex: 1 }}
             ref={input}
             placeholder="Search tanks..."
             onChange={(event) => {
@@ -412,7 +408,10 @@ export function TankSearch({ compact, onSelect = () => {} }: TankSearchProps) {
 
               setSearchedList(results);
             }}
-            />
+          >
+            <TextField.Slot>
+              <MagnifyingGlassIcon height="16" width="16" />
+            </TextField.Slot>
           </TextField.Root>
 
           <DropdownMenu.Root>
@@ -779,12 +778,12 @@ export function TankSearch({ compact, onSelect = () => {} }: TankSearchProps) {
                 flex: 1,
                 cursor: 'pointer',
                 height: 64,
+                minWidth: 256,
               }}
             >
               <Inset
                 key={tank.id}
                 style={{
-                  minWidth: 256,
                   minHeight: 64,
                   position: 'relative',
                   display: 'flex',

src/components/PageWrapper.tsx

@@ -1,10 +1,10 @@
-import { Flex, Theme } from '@radix-ui/themes';
+import { Flex, FlexProps, Theme } from '@radix-ui/themes';
 import { ComponentProps } from 'react';
 
-interface PageWrapperProps extends ComponentProps<typeof Flex> {
+type PageWrapperProps = FlexProps & {
   color?: ComponentProps<typeof Theme>['accentColor'];
   size?: number;
-}
+};
 
 export default function PageWrapper({
   style,

yarn.lock

@@ -1259,7 +1259,7 @@
     "@radix-ui/react-primitive" "1.0.3"
     "@radix-ui/react-slot" "1.0.2"
 
-"@radix-ui/[email protected]":
+"@radix-ui/[email protected]", "@radix-ui/react-compose-refs@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989"
   integrity sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==
@@ -1279,7 +1279,7 @@
     "@radix-ui/react-use-callback-ref" "1.0.1"
     "@radix-ui/react-use-controllable-state" "1.0.1"
 
-"@radix-ui/[email protected]":
+"@radix-ui/[email protected]", "@radix-ui/react-context@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.1.tgz#fe46e67c96b240de59187dcb7a1a50ce3e2ec00c"
   integrity sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==
@@ -1432,6 +1432,27 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "2.5.5"
 
+"@radix-ui/react-navigation-menu@^1.1.4":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.1.4.tgz#654151310c3f9a29afd19fb60ddc7977e54b8a3d"
+  integrity sha512-Cc+seCS3PmWmjI51ufGG7zp1cAAIRqHVw7C9LOA2TZ+R4hG6rDvHcTqIsEEFLmZO3zNVH72jOOE7kKNy8W+RtA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-collection" "1.0.3"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-direction" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+    "@radix-ui/react-use-previous" "1.0.1"
+    "@radix-ui/react-visually-hidden" "1.0.3"
+
 "@radix-ui/react-popover@^1.0.7":
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.0.7.tgz#23eb7e3327330cb75ec7b4092d685398c1654e3c"
@@ -1488,7 +1509,7 @@
     "@radix-ui/react-compose-refs" "1.0.1"
     "@radix-ui/react-use-layout-effect" "1.0.1"
 
-"@radix-ui/[email protected]":
+"@radix-ui/[email protected]", "@radix-ui/react-primitive@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz#d49ea0f3f0b2fe3ab1cb5667eb03e8b843b914d0"
   integrity sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==
@@ -1496,6 +1517,15 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-slot" "1.0.2"
 
+"@radix-ui/react-progress@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-progress/-/react-progress-1.0.3.tgz#8380272fdc64f15cbf263a294dea70a7d5d9b4fa"
+  integrity sha512-5G6Om/tYSxjSeEdrb1VfKkfZfn/1IlPWd731h2RfPuSbIfNUgfqAwbKfJCg/PP6nuUCTrYzalwHSpSinoWoCag==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+
 "@radix-ui/react-radio-group@^1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-radio-group/-/react-radio-group-1.1.3.tgz#3197f5dcce143bcbf961471bf89320735c0212d3"
@@ -1513,7 +1543,7 @@
     "@radix-ui/react-use-previous" "1.0.1"
     "@radix-ui/react-use-size" "1.0.1"
 
-"@radix-ui/[email protected]":
+"@radix-ui/[email protected]", "@radix-ui/react-roving-focus@^1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz#e90c4a6a5f6ac09d3b8c1f5b5e81aab2f0db1974"
   integrity sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==
@@ -1573,14 +1603,6 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "2.5.5"
 
-"@radix-ui/react-separator@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-separator/-/react-separator-1.0.3.tgz#be5a931a543d5726336b112f465f58585c04c8aa"
-  integrity sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-primitive" "1.0.3"
-
 "@radix-ui/react-slider@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slider/-/react-slider-1.1.2.tgz#330ff2a0e1f6c19aace76590004f229a7e8fbe6c"
@@ -1636,6 +1658,30 @@
     "@radix-ui/react-roving-focus" "1.0.4"
     "@radix-ui/react-use-controllable-state" "1.0.1"
 
+"@radix-ui/react-toggle-group@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle-group/-/react-toggle-group-1.0.4.tgz#f5b5c8c477831b013bec3580c55e20a68179d6ec"
+  integrity sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-direction" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-roving-focus" "1.0.4"
+    "@radix-ui/react-toggle" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+
+"@radix-ui/[email protected]":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle/-/react-toggle-1.0.3.tgz#aecb2945630d1dc5c512997556c57aba894e539e"
+  integrity sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+
 "@radix-ui/react-tooltip@^1.0.7":
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz#8f55070f852e7e7450cc1d9210b793d2e5a7686e"
@@ -1662,7 +1708,7 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
-"@radix-ui/[email protected]":
+"@radix-ui/[email protected]", "@radix-ui/react-use-controllable-state@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz#ecd2ced34e6330caf89a82854aa2f77e07440286"
   integrity sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==
@@ -1723,10 +1769,10 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
-"@radix-ui/themes@^2.0.1":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@radix-ui/themes/-/themes-2.0.3.tgz#c9e8f4029d73769f356dbe29c97ce3cbade601a8"
-  integrity sha512-yaXQ8aWT2P1CQ0Xe6YCRD9HXsfMTvKkrIYkrc4aitCzhGTLS0sjtTqKmrxIWMVA+3DIbEuG9K/8aAMRJBhep8g==
+"@radix-ui/themes@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/themes/-/themes-3.0.1.tgz#24b685166109f93bd2212ea6bc5114b9c0d943df"
+  integrity sha512-w0+2XqaifspZlds2ealxgVU2xtZlJ0gSTgHuLd56ectYxnC4hkg/PEOP5kPHOpCQ+vtV9+LI+Cy4RWipGgg3aQ==
   dependencies:
     "@radix-ui/colors" "^3.0.0"
     "@radix-ui/primitive" "^1.0.1"
@@ -1735,26 +1781,34 @@
     "@radix-ui/react-aspect-ratio" "^1.0.3"
     "@radix-ui/react-avatar" "^1.0.4"
     "@radix-ui/react-checkbox" "^1.0.4"
+    "@radix-ui/react-compose-refs" "^1.0.1"
+    "@radix-ui/react-context" "^1.0.1"
     "@radix-ui/react-context-menu" "^2.1.5"
     "@radix-ui/react-dialog" "^1.0.5"
     "@radix-ui/react-direction" "^1.0.1"
     "@radix-ui/react-dropdown-menu" "^2.0.6"
     "@radix-ui/react-form" "^0.0.3"
     "@radix-ui/react-hover-card" "^1.0.7"
+    "@radix-ui/react-navigation-menu" "^1.1.4"
     "@radix-ui/react-popover" "^1.0.7"
     "@radix-ui/react-portal" "^1.0.4"
+    "@radix-ui/react-primitive" "^1.0.3"
+    "@radix-ui/react-progress" "^1.0.3"
     "@radix-ui/react-radio-group" "^1.1.3"
+    "@radix-ui/react-roving-focus" "^1.0.4"
     "@radix-ui/react-scroll-area" "^1.0.5"
     "@radix-ui/react-select" "^2.0.0"
-    "@radix-ui/react-separator" "^1.0.3"
     "@radix-ui/react-slider" "^1.1.2"
     "@radix-ui/react-slot" "^1.0.2"
     "@radix-ui/react-switch" "^1.0.3"
     "@radix-ui/react-tabs" "^1.0.4"
+    "@radix-ui/react-toggle-group" "^1.0.4"
     "@radix-ui/react-tooltip" "^1.0.7"
     "@radix-ui/react-use-callback-ref" "^1.0.1"
+    "@radix-ui/react-use-controllable-state" "^1.0.1"
     "@radix-ui/react-visually-hidden" "^1.0.3"
     classnames "^2.3.2"
+    react-remove-scroll-bar "2.3.4"
 
 "@react-spring/animated@~9.6.1":
   version "9.6.1"
@@ -4813,6 +4867,14 @@ react-reconciler@^0.27.0:
     loose-envify "^1.1.0"
     scheduler "^0.21.0"
 
+[email protected]:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9"
+  integrity sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==
+  dependencies:
+    react-style-singleton "^2.2.1"
+    tslib "^2.0.0"
+
 react-remove-scroll-bar@^2.3.3:
   version "2.3.5"
   resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.5.tgz#cd2543b3ed7716c7c5b446342d21b0e0b303f47c"