🚨(front) fix ui enhancement formats

Some formatting were forgotten, here is the fix.

src/frontend/src/App.tsx

@@ -30,7 +30,7 @@ function App() {
               <Route component={NotFoundScreen} />
             </Switch>
           </Layout>
-          <ReactQueryDevtools initialIsOpen={false} position="top-left" />
+          <ReactQueryDevtools initialIsOpen={false} />
         </I18nProvider>
       </Suspense>
     </QueryClientProvider>

src/frontend/src/features/home/routes/Home.tsx

@@ -17,7 +17,7 @@ import { MoreLink } from '@/features/home/components/MoreLink'
 import { ReactNode, useState } from 'react'
 
 import { css } from '@/styled-system/css'
-import { menuRecipe } from '@/primitives/menuRecipe.ts';
+import { menuRecipe } from '@/primitives/menuRecipe.ts'
 
 const Columns = ({ children }: { children?: ReactNode }) => {
   return (
@@ -173,7 +173,9 @@ export const Home = () => {
                   </Button>
                   <RACMenu>
                     <MenuItem
-                      className={menuRecipe({icon: true, variant: 'light'}).item}
+                      className={
+                        menuRecipe({ icon: true, variant: 'light' }).item
+                      }
                       onAction={async () => {
                         const slug = generateRoomId()
                         createRoom({ slug, username }).then((data) =>
@@ -188,7 +190,9 @@ export const Home = () => {
                       {t('createMenu.instantOption')}
                     </MenuItem>
                     <MenuItem
-                      className={menuRecipe({icon: true, variant: 'light'}).item}
+                      className={
+                        menuRecipe({ icon: true, variant: 'light' }).item
+                      }
                       onAction={() => {
                         const slug = generateRoomId()
                         createRoom({ slug, username }).then((data) =>

src/frontend/src/features/rooms/components/Conference.tsx

@@ -109,7 +109,7 @@ export const Conference = ({
           video={userConfig.videoEnabled}
           connectOptions={connectOptions}
           className={css({
-            backgroundColor: 'primaryDark.50 !important'
+            backgroundColor: 'primaryDark.50 !important',
           })}
         >
           <VideoConference />

src/frontend/src/features/rooms/components/InviteDialog.tsx

@@ -9,7 +9,7 @@ import {
   RiCloseLine,
   RiFileCopyLine,
   RiSpam2Fill,
-} from '@remixicon/react';
+} from '@remixicon/react'
 import { useEffect, useState } from 'react'
 
 // fixme - extract in a proper primitive this dialog without overlay
@@ -92,7 +92,7 @@ export const InviteDialog = ({
               </>
             ) : (
               <>
-                <RiFileCopyLine size={24} style={{ marginRight: '8px' }}/>
+                <RiFileCopyLine size={24} style={{ marginRight: '8px' }} />
                 {t('shareDialog.copyButton')}
               </>
             )}

src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx

@@ -9,7 +9,7 @@ import { Dispatch, SetStateAction } from 'react'
 import { DialogState } from './OptionsButton'
 import { Separator } from '@/primitives/Separator'
 import { useSidePanel } from '../../../hooks/useSidePanel'
-import { menuRecipe } from '@/primitives/menuRecipe.ts';
+import { menuRecipe } from '@/primitives/menuRecipe.ts'
 
 // @todo try refactoring it to use MenuList component
 export const OptionsMenuItems = ({

src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx

@@ -18,7 +18,7 @@ import { Track } from 'livekit-client'
 import { Shortcut } from '@/features/shortcuts/types'
 
 import { ToggleDevice } from '@/features/rooms/livekit/components/controls/ToggleDevice.tsx'
-import { css } from '@/styled-system/css';
+import { css } from '@/styled-system/css'
 
 export type ToggleSource = Exclude<
   Track.Source,
@@ -86,10 +86,12 @@ export const SelectToggleDevice = <T extends ToggleSource>({
   const selectLabel = t('choose', { keyPrefix: `join.${config.kind}` })
 
   return (
-    <div className={css({
+    <div
-      display: 'flex',
+      className={css({
-      gap: '1px'
+        display: 'flex',
-    })}>
+        gap: '1px',
+      })}
+    >
       <ToggleDevice {...trackProps} config={config} />
       <Menu>
         <Button
@@ -97,7 +99,7 @@ export const SelectToggleDevice = <T extends ToggleSource>({
           aria-label={selectLabel}
           groupPosition="right"
           square
-          variant={trackProps.enabled ? "primaryDark" : "error2"}
+          variant={trackProps.enabled ? 'primaryDark' : 'error2'}
         >
           <RiArrowDownSLine />
         </Button>

src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx

@@ -112,21 +112,21 @@ export function ControlBar({
         bottom: 0,
         left: 0,
         right: 0,
-        base: {
+        display: 'flex',
-          display: 'flex'
-        }
       })}
     >
-      <div className={css({
+      <div
-        display: 'flex',
+        className={css({
-        gap: '.5rem',
+          display: 'flex',
-        alignItems: 'center',
+          gap: '.5rem',
-        lg: {
+          alignItems: 'center',
-          position: 'absolute',
+          lg: {
-          left: '50%',
+            position: 'absolute',
-          transform: 'translateX(-50%)',
+            left: '50%',
-        },
+            transform: 'translateX(-50%)',
-      })}>
+          },
+        })}
+      >
         <SelectToggleDevice
           source={Track.Source.Microphone}
           onChange={microphoneOnChange}
@@ -159,16 +159,18 @@ export function ControlBar({
         <LeaveButton />
         <StartMediaButton />
       </div>
-      <div className={css({
+      <div
-        display: 'flex',
+        className={css({
-        gap: '.5rem',
+          display: 'flex',
-        alignItems: 'center',
+          gap: '.5rem',
-        marginRight: '6.25rem',
+          alignItems: 'center',
-        lg: {
+          marginRight: '6.25rem',
-          position: 'absolute',
+          lg: {
-          right: 0
+            position: 'absolute',
-        }
+            right: 0,
-      })}>
+          },
+        })}
+      >
         <ChatToggle />
         <ParticipantsToggle />
       </div>

src/frontend/src/features/rooms/routes/Feedback.tsx

@@ -28,10 +28,7 @@ export const FeedbackRoute = () => {
         <VStack>
           <Heading>{t('feedback.heading')}</Heading>
           <HStack>
-            <Button
+            <Button variant="secondary" onPress={() => window.history.back()}>
-              variant="secondary"
-              onPress={() => window.history.back()}
-            >
               {t('feedback.back')}
             </Button>
             <Button variant="primary" onPress={() => setLocation('/')}>

src/frontend/src/layout/Header.tsx

@@ -83,7 +83,7 @@ export const Header = () => {
                     </span>
                   </Button>
                   <MenuList
-                    variant={"light"}
+                    variant={'light'}
                     items={[{ value: 'logout', label: t('logout') }]}
                     onAction={(value) => {
                       if (value === 'logout') {

src/frontend/src/primitives/MenuList.tsx

@@ -1,11 +1,7 @@
 import { ReactNode } from 'react'
 import { Menu, MenuProps, MenuItem } from 'react-aria-components'
-import { menuRecipe } from '@/primitives/menuRecipe.ts';
+import { menuRecipe } from '@/primitives/menuRecipe.ts'
-import type { RecipeVariantProps } from '@/styled-system/types';
+import type { RecipeVariantProps } from '@/styled-system/types'
-
-
-
-
 
 /**
  * render a Button primitive that shows a popover showing a list of pressable items
@@ -19,9 +15,10 @@ export const MenuList = <T extends string | number = string>({
   onAction: (key: T) => void
   selectedItem?: T
   items: Array<string | { value: T; label: ReactNode }>
-} & MenuProps<unknown> & RecipeVariantProps<typeof menuRecipe>) => {
+} & MenuProps<unknown> &
+  RecipeVariantProps<typeof menuRecipe>) => {
   const [variantProps] = menuRecipe.splitVariantProps(menuProps)
-  const classes = menuRecipe({extraPadding: true, ...variantProps})
+  const classes = menuRecipe({ extraPadding: true, ...variantProps })
   return (
     <Menu
       selectionMode={selectedItem !== undefined ? 'single' : undefined}

src/frontend/src/primitives/Select.tsx

@@ -11,7 +11,7 @@ import {
 } from 'react-aria-components'
 import { Box } from './Box'
 import { StyledPopover } from './Popover'
-import { menuRecipe } from '@/primitives/menuRecipe.ts';
+import { menuRecipe } from '@/primitives/menuRecipe.ts'
 
 const StyledButton = styled(Button, {
   base: {
@@ -75,7 +75,9 @@ export const Select = <T extends string | number>({
           <ListBox>
             {items.map((item) => (
               <ListBoxItem
-                className={menuRecipe({extraPadding: true, variant: 'light'}).item}
+                className={
+                  menuRecipe({ extraPadding: true, variant: 'light' }).item
+                }
                 id={item.value}
                 key={item.value}
               >

src/frontend/src/primitives/buttonRecipe.ts

@@ -1,246 +1,247 @@
-import { type RecipeVariantProps, cva } from '@/styled-system/css';
+import { type RecipeVariantProps, cva } from '@/styled-system/css'
 
 export type ButtonRecipe = typeof buttonRecipe
 
 export type ButtonRecipeProps = RecipeVariantProps<ButtonRecipe>
 
 export const buttonRecipe = cva({
-    base: {
+  base: {
-        display: 'flex',
+    display: 'flex',
-        justifyContent: 'center',
+    justifyContent: 'center',
-        alignItems: 'center',
+    alignItems: 'center',
-        transition: 'background 200ms, outline 200ms, border-color 200ms',
+    transition: 'background 200ms, outline 200ms, border-color 200ms',
-        cursor: 'pointer',
+    cursor: 'pointer',
-        border: '1px solid transparent',
+    border: '1px solid transparent',
+  },
+  variants: {
+    size: {
+      default: {
+        borderRadius: 4,
+        paddingX: '1',
+        paddingY: '0.625',
+        '--square-padding': '{spacing.0.625}',
+      },
+      sm: {
+        borderRadius: 4,
+        paddingX: '0.5',
+        paddingY: '0.25',
+        '--square-padding': '{spacing.0.25}',
+      },
+      xs: {
+        borderRadius: 4,
+        '--square-padding': '0',
+      },
     },
-    variants: {
+    square: {
-        size: {
+      true: {
-            default: {
+        paddingX: 'var(--square-padding)',
-                borderRadius: 4,
+        paddingY: 'var(--square-padding)',
-                paddingX: '1',
+      },
-                paddingY: '0.625',
-                '--square-padding': '{spacing.0.625}',
-            },
-            sm: {
-                borderRadius: 4,
-                paddingX: '0.5',
-                paddingY: '0.25',
-                '--square-padding': '{spacing.0.25}',
-            },
-            xs: {
-                borderRadius: 4,
-                '--square-padding': '0',
-            },
-        },
-        square: {
-            true: {
-                paddingX: 'var(--square-padding)',
-                paddingY: 'var(--square-padding)',
-            },
-        },
-        variant: {
-            primary: {
-                backgroundColor: 'primary.800',
-                color: 'white',
-                '&[data-hovered]': {
-                    backgroundColor: 'primary.action',
-                },
-                '&[data-pressed]': {
-                    backgroundColor: 'primary.action',
-                },
-                '&[data-disabled]': {
-                    backgroundColor: 'greyscale.100',
-                    color: 'greyscale.400',
-                },
-            },
-            secondary: {
-                backgroundColor: 'white',
-                color: 'primary.800',
-                borderColor: 'primary.800',
-                '&[data-hovered]': {
-                    backgroundColor: 'greyscale.100',
-                },
-                '&[data-pressed]': {
-                    backgroundColor: 'greyscale.100',
-                },
-            },
-            secondaryText: {
-                backgroundColor: 'transparent',
-                color: 'primary.800',
-                '&[data-hovered]': {
-                    backgroundColor: 'greyscale.100',
-                },
-                '&[data-pressed]': {
-                    backgroundColor: 'greyscale.100',
-                },
-                '&[data-disabled]': {
-                    color: 'greyscale.400',
-                },
-            },
-            tertiary: {
-                backgroundColor: 'primary.100',
-                color: 'primary.800',
-                '&[data-hovered]': {
-                    backgroundColor: 'primary.300',
-                },
-                '&[data-pressed]': {
-                    backgroundColor: 'primary.300',
-                },
-            },
-            primaryDark: {
-                backgroundColor: 'primaryDark.100',
-                color: 'white',
-                '&[data-pressed]': {
-                    backgroundColor: 'primaryDark.900',
-                    color: 'primaryDark.100'
-                },
-                '&[data-hovered]': {
-                    backgroundColor: 'primaryDark.300',
-                    color: 'white',
-                },
-                '&[data-selected]': {
-                    backgroundColor: 'primaryDark.900 !important',
-                    color: 'primaryDark.100 !important'
-                },
-            },
-            primaryTextDark: {
-                backgroundColor: 'transparent',
-                color: 'primaryDark.800',
-                '&[data-hovered]': {
-                    backgroundColor: 'primaryDark.100',
-                },
-                '&[data-pressed]': {
-                    backgroundColor: 'primaryDark.700',
-                    color: 'primaryDark.100'
-                },
-                '&[data-selected]': {
-                    backgroundColor: 'primaryDark.700',
-                    color: 'primaryDark.100'
-                },
-            },
-            greyscale: {
-                backgroundColor: 'transparent',
-                color: 'greyscale.400',
-                '&[data-hovered]': {
-                    color: 'greyscale.800',
-                },
-                '&[data-pressed]': {
-                    color: 'greyscale.800',
-                },
-                '&[data-selected]': {
-                    color: 'greyscale.800',
-                },
-                '&[data-disabled]': {
-                    color: 'greyscale.200',
-                },
-            },
-            danger: {
-                backgroundColor: 'error.400',
-                color: 'white',
-                '&[data-hovered]': {
-                    backgroundColor: 'error.600',
-                },
-                '&[data-pressed]': {
-                    backgroundColor: 'error.700',
-                    color: 'error.200',
-                },
-            },
-            error2: {
-                backgroundColor: 'error.200',
-                color: 'error.900',
-                '&[data-hovered]': {
-                    backgroundColor: 'error.300',
-                },
-                '&[data-focused]': {
-                    backgroundColor: 'error.200',
-                },
-                '&[data-pressed]': {
-                    backgroundColor: 'error.900',
-                    color: 'error.100',
-                },
-                '&[data-selected]': {
-                    backgroundColor: 'error.900 !important',
-                    color: 'error.100 !important',
-                },
-                '&[data-disabled]': {
-                    backgroundColor: 'error.200',
-                    color: 'error.300',
-                },
-            },
-            // @TODO: better handling of colors… this is a mess
-            success: {
-                colorPalette: 'success',
-                color: 'success.subtle-text',
-                backgroundColor: 'success.subtle',
-                '&[data-hovered]': {
-                    backgroundColor: 'success.200',
-                },
-                '&[data-pressed]': {
-                    backgroundColor: 'success.subtle!',
-                },
-            },
-            text: {
-                color: 'primary',
-                '&[data-hovered]': {
-                    background: 'gray.100 !important',
-                    color: 'primary !important',
-                },
-            },
-        },
-        invisible: {
-            true: {
-                borderColor: 'none!',
-                backgroundColor: 'none!',
-                '&[data-hovered]': {
-                    backgroundColor: 'none!',
-                    borderColor: 'colorPalette.active!',
-                },
-                '&[data-pressed]': {
-                    borderColor: 'currentcolor',
-                },
-                '&[data-disabled]': {
-                    color: 'gray.300',
-                },
-            },
-        },
-        fullWidth: {
-            true: {
-                width: 'full',
-            },
-        },
-        // some toggle buttons make more sense without a "pushed button" style when selected because their content changes to mark the state
-        shySelected: {},
-        // if the button is next to other ones to make a "button group", tell where the button is to handle radius
-        groupPosition: {
-            left: {
-                borderTopRightRadius: 0,
-                borderBottomRightRadius: 0,
-            },
-            right: {
-                borderTopLeftRadius: 0,
-                borderBottomLeftRadius: 0,
-                borderLeft: 0,
-            },
-            center: {
-                borderRadius: 0,
-            },
-        },
     },
-    compoundVariants: [
+    variant: {
-        {
+      primary: {
-            variant: 'primaryDark',
+        backgroundColor: 'primary.800',
-            shySelected: true,
+        color: 'white',
-            css: {
+        '&[data-hovered]': {
-                '&[data-selected]': {
+          backgroundColor: 'primary.action',
-                    backgroundColor: 'primaryDark.100',
+        },
-                    color: 'white'
+        '&[data-pressed]': {
-                },
+          backgroundColor: 'primary.action',
-            }
+        },
-        }
+        '&[data-disabled]': {
-    ],
+          backgroundColor: 'greyscale.100',
-    defaultVariants: {
+          color: 'greyscale.400',
-        size: 'default',
+        },
-        variant: 'primary',
+      },
+      secondary: {
+        backgroundColor: 'white',
+        color: 'primary.800',
+        borderColor: 'primary.800',
+        '&[data-hovered]': {
+          backgroundColor: 'greyscale.100',
+        },
+        '&[data-pressed]': {
+          backgroundColor: 'greyscale.100',
+        },
+      },
+      secondaryText: {
+        backgroundColor: 'transparent',
+        color: 'primary.800',
+        '&[data-hovered]': {
+          backgroundColor: 'greyscale.100',
+        },
+        '&[data-pressed]': {
+          backgroundColor: 'greyscale.100',
+        },
+        '&[data-disabled]': {
+          color: 'greyscale.400',
+        },
+      },
+      tertiary: {
+        backgroundColor: 'primary.100',
+        color: 'primary.800',
+        '&[data-hovered]': {
+          backgroundColor: 'primary.300',
+        },
+        '&[data-pressed]': {
+          backgroundColor: 'primary.300',
+        },
+      },
+      primaryDark: {
+        backgroundColor: 'primaryDark.100',
+        color: 'white',
+        '&[data-pressed]': {
+          backgroundColor: 'primaryDark.900',
+          color: 'primaryDark.100',
+        },
+        '&[data-hovered]': {
+          backgroundColor: 'primaryDark.300',
+          color: 'white',
+        },
+        '&[data-selected]': {
+          backgroundColor: 'primaryDark.900 !important',
+          color: 'primaryDark.100 !important',
+        },
+      },
+      primaryTextDark: {
+        backgroundColor: 'transparent',
+        color: 'primaryDark.800',
+        '&[data-hovered]': {
+          backgroundColor: 'primaryDark.100',
+        },
+        '&[data-pressed]': {
+          backgroundColor: 'primaryDark.700',
+          color: 'primaryDark.100',
+        },
+        '&[data-selected]': {
+          backgroundColor: 'primaryDark.700',
+          color: 'primaryDark.100',
+        },
+      },
+      greyscale: {
+        backgroundColor: 'transparent',
+        color: 'greyscale.400',
+        '&[data-hovered]': {
+          color: 'greyscale.800',
+        },
+        '&[data-pressed]': {
+          color: 'greyscale.800',
+        },
+        '&[data-selected]': {
+          color: 'greyscale.800',
+        },
+        '&[data-disabled]': {
+          color: 'greyscale.200',
+        },
+      },
+      danger: {
+        backgroundColor: 'error.400',
+        color: 'white',
+        '&[data-hovered]': {
+          backgroundColor: 'error.600',
+        },
+        '&[data-pressed]': {
+          backgroundColor: 'error.700',
+          color: 'error.200',
+        },
+      },
+      error2: {
+        backgroundColor: 'error.200',
+        color: 'error.900',
+        '&[data-hovered]': {
+          backgroundColor: 'error.300',
+        },
+        '&[data-focused]': {
+          backgroundColor: 'error.200',
+        },
+        '&[data-pressed]': {
+          backgroundColor: 'error.900',
+          color: 'error.100',
+        },
+        '&[data-selected]': {
+          backgroundColor: 'error.900 !important',
+          color: 'error.100 !important',
+        },
+        '&[data-disabled]': {
+          backgroundColor: 'error.200',
+          color: 'error.300',
+        },
+      },
+      // @TODO: better handling of colors… this is a mess
+      success: {
+        colorPalette: 'success',
+        color: 'success.subtle-text',
+        backgroundColor: 'success.subtle',
+        '&[data-hovered]': {
+          backgroundColor: 'success.200',
+        },
+        '&[data-pressed]': {
+          backgroundColor: 'success.subtle!',
+        },
+      },
+      text: {
+        color: 'primary',
+        '&[data-hovered]': {
+          background: 'gray.100 !important',
+          color: 'primary !important',
+        },
+      },
     },
-});
+    invisible: {
-
+      true: {
+        borderColor: 'none!',
+        backgroundColor: 'none!',
+        '&[data-hovered]': {
+          backgroundColor: 'none!',
+          borderColor: 'colorPalette.active!',
+        },
+        '&[data-pressed]': {
+          borderColor: 'currentcolor',
+        },
+        '&[data-disabled]': {
+          color: 'gray.300',
+        },
+      },
+    },
+    fullWidth: {
+      true: {
+        width: 'full',
+      },
+    },
+    // some toggle buttons make more sense without a "pushed button" style when selected because their content changes to mark the state
+    shySelected: {
+      true: {},
+    },
+    // if the button is next to other ones to make a "button group", tell where the button is to handle radius
+    groupPosition: {
+      left: {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+      },
+      right: {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
+        borderLeft: 0,
+      },
+      center: {
+        borderRadius: 0,
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      variant: 'primaryDark',
+      shySelected: true,
+      css: {
+        '&[data-selected]': {
+          backgroundColor: 'primaryDark.100',
+          color: 'white',
+        },
+      },
+    },
+  ],
+  defaultVariants: {
+    size: 'default',
+    variant: 'primary',
+  },
+})

src/frontend/src/primitives/menuRecipe.ts

@@ -1,74 +1,72 @@
-import { sva } from '@/styled-system/css';
+import { sva } from '@/styled-system/css'
 
 export const menuRecipe = sva({
-    slots: ['root', 'item'],
+  slots: ['root', 'item'],
-    base: {
+  base: {
-        root: {  },
+    root: {},
+    item: {
+      paddingY: 0.125,
+      paddingX: 0.5,
+      textAlign: 'left',
+      width: 'full',
+      borderRadius: 4,
+      cursor: 'pointer',
+      color: 'box.text',
+      border: '1px solid transparent',
+      position: 'relative',
+      '&[data-selected]': {
+        '&::before': {
+          content: '"✓"',
+          position: 'absolute',
+          top: '2px',
+          left: '6px',
+        },
+      },
+      '&[data-focused]': {
+        color: 'primary.text',
+        backgroundColor: 'primaryDark.100',
+        outline: 'none!',
+      },
+      '&[data-hovered]': {
+        color: 'primary.text',
+        backgroundColor: 'primaryDark.100',
+        outline: 'none!',
+      },
+    },
+  },
+  variants: {
+    variant: {
+      light: {
         item: {
-            paddingY: 0.125,
+          '&[data-focused]': {
-            paddingX: 0.5,
+            backgroundColor: 'primary.800',
-            textAlign: 'left',
+          },
-            width: 'full',
+          '&[data-hovered]': {
-            borderRadius: 4,
+            backgroundColor: 'primary.800',
-            cursor: 'pointer',
+          },
-            color: 'box.text',
+        },
-            border: '1px solid transparent',
+      },
-            position: 'relative',
+      dark: {},
-            '&[data-selected]': {
-                '&::before': {
-                    content: '"✓"',
-                    position: 'absolute',
-                    top: '2px',
-                    left: '6px',
-                },
-            },
-            '&[data-focused]': {
-                color: 'primary.text',
-                backgroundColor: 'primaryDark.100',
-                outline: 'none!',
-            },
-            '&[data-hovered]': {
-                color: 'primary.text',
-                backgroundColor: 'primaryDark.100',
-                outline: 'none!',
-            },
-        }
     },
-    variants: {
+    extraPadding: {
-        variant: {
+      true: {
-            light: {
+        item: {
-                item: {
+          paddingLeft: 1.5,
-                    '&[data-focused]': {
-                        backgroundColor: 'primary.800',
-                    },
-                    '&[data-hovered]': {
-                        backgroundColor: 'primary.800',
-                    },
-                }
-            },
-            dark: {
-
-            }
-        },
-        extraPadding: {
-            true: {
-                item: {
-                    paddingLeft: 1.5,
-                }
-            },
-        },
-        icon: {
-            true: {
-                item: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '1rem',
-                    paddingY: '0.4rem',
-                }
-            },
         },
+      },
     },
-    defaultVariants: {
+    icon: {
-        variant: 'dark'
+      true: {
-    }
+        item: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '1rem',
+          paddingY: '0.4rem',
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'dark',
+  },
 })