fix MobileHeader component

eslint.config.mjs

@@ -25,11 +25,13 @@ const RESTRICTED_MODULES = {
     { name: '@metamask/providers', message: 'Please lazy-load @metamask/providers or use useProvider hook instead' },
     { name: '@metamask/post-message-stream', message: 'Please lazy-load @metamask/post-message-stream or use useProvider hook instead' },
     { name: 'playwright/TestApp', message: 'Please use render() fixture from test() function of playwright/lib module' },
+    { name: 'ui/shared/chakra/Skeleton', message: 'Please use Skeleton component from toolkit/chakra instead' },
     {
       name: '@chakra-ui/react',
       importNames: [
         'Menu', 'useToast', 'useDisclosure', 'useClipboard', 'Tooltip', 'Skeleton', 'IconButton', 'Button',
         'Image', 'Popover', 'PopoverTrigger', 'PopoverContent', 'PopoverBody', 'PopoverFooter',
+        'DrawerRoot', 'DrawerBody', 'DrawerContent', 'DrawerOverlay', 'DrawerBackdrop', 'DrawerTrigger', 'Drawer',
       ],
       message: 'Please use corresponding component or hook from ui/shared/chakra component instead',
     },

package.json

@@ -44,7 +44,7 @@
     "@blockscout/bens-types": "1.4.1",
     "@blockscout/stats-types": "2.0.0",
     "@blockscout/visualizer-types": "0.2.0",
-    "@chakra-ui/react": "3.3.0",
+    "@chakra-ui/react": "3.3.2",
     "@chakra-ui/theme-tools": "^2.0.18",
     "@cloudnouns/kit": "1.1.6",
     "@emotion/react": "11.14.0",

toolkit/chakra/drawer.tsx

@@ -37,7 +37,7 @@ export const DrawerCloseTrigger = React.forwardRef<
       { ...props }
       asChild
     >
-      <CloseButton size="sm" ref={ ref }/>
+      <CloseButton ref={ ref }/>
     </ChakraDrawer.CloseTrigger>
   );
 });

toolkit/chakra/native-select.tsx

+'use client';
+
+import { NativeSelect as Select } from '@chakra-ui/react';
+import * as React from 'react';
+
+interface NativeSelectRootProps extends Select.RootProps {
+  icon?: React.ReactNode;
+}
+
+export const NativeSelectRoot = React.forwardRef<
+  HTMLDivElement,
+  NativeSelectRootProps
+>(function NativeSelect(props, ref) {
+  const { icon, children, ...rest } = props;
+  return (
+    <Select.Root ref={ ref } { ...rest }>
+      { children }
+      <Select.Indicator>{ icon }</Select.Indicator>
+    </Select.Root>
+  );
+});
+
+interface NativeSelectItem {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+interface NativeSelectField extends Select.FieldProps {
+  items?: Array<string | NativeSelectItem>;
+}
+
+export const NativeSelectField = React.forwardRef<
+  HTMLSelectElement,
+  NativeSelectField
+>(function NativeSelectField(props, ref) {
+  const { items: itemsProp, children, ...rest } = props;
+
+  const items = React.useMemo(
+    () =>
+      itemsProp?.map((item) =>
+        typeof item === 'string' ? { label: item, value: item } : item,
+      ),
+    [ itemsProp ],
+  );
+
+  return (
+    <Select.Field ref={ ref } { ...rest }>
+      { children }
+      { items?.map((item) => (
+        <option key={ item.value } value={ item.value } disabled={ item.disabled }>
+          { item.label }
+        </option>
+      )) }
+    </Select.Field>
+  );
+});

toolkit/chakra/popover.tsx

@@ -75,7 +75,7 @@ export const PopoverTrigger = React.forwardRef<
   HTMLButtonElement,
   ChakraPopover.TriggerProps
 >(function PopoverTrigger(props, ref) {
-  return <ChakraPopover.Trigger as="div" asChild ref={ ref } { ...props }/>;
+  return <ChakraPopover.Trigger as="div" display="flex" asChild ref={ ref } { ...props }/>;
 });
 
 export const PopoverTitle = ChakraPopover.Title;

toolkit/chakra/select.tsx

+'use client';
+
+import type { CollectionItem } from '@chakra-ui/react';
+import { Select as ChakraSelect, Portal } from '@chakra-ui/react';
+import * as React from 'react';
+
+import { CloseButton } from './close-button';
+
+interface SelectTriggerProps extends ChakraSelect.ControlProps {
+  clearable?: boolean;
+}
+
+export const SelectTrigger = React.forwardRef<
+  HTMLButtonElement,
+  SelectTriggerProps
+>(function SelectTrigger(props, ref) {
+  const { children, clearable, ...rest } = props;
+  return (
+    <ChakraSelect.Control { ...rest }>
+      <ChakraSelect.Trigger ref={ ref }>{ children }</ChakraSelect.Trigger>
+      <ChakraSelect.IndicatorGroup>
+        { clearable && <SelectClearTrigger/> }
+        <ChakraSelect.Indicator/>
+      </ChakraSelect.IndicatorGroup>
+    </ChakraSelect.Control>
+  );
+});
+
+const SelectClearTrigger = React.forwardRef<
+  HTMLButtonElement,
+  ChakraSelect.ClearTriggerProps
+>(function SelectClearTrigger(props, ref) {
+  return (
+    <ChakraSelect.ClearTrigger asChild { ...props } ref={ ref }>
+      <CloseButton
+        variant="plain"
+        focusVisibleRing="inside"
+        focusRingWidth="2px"
+        pointerEvents="auto"
+      />
+    </ChakraSelect.ClearTrigger>
+  );
+});
+
+interface SelectContentProps extends ChakraSelect.ContentProps {
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement>;
+}
+
+export const SelectContent = React.forwardRef<
+  HTMLDivElement,
+  SelectContentProps
+>(function SelectContent(props, ref) {
+  const { portalled = true, portalRef, ...rest } = props;
+  return (
+    <Portal disabled={ !portalled } container={ portalRef }>
+      <ChakraSelect.Positioner>
+        <ChakraSelect.Content { ...rest } ref={ ref }/>
+      </ChakraSelect.Positioner>
+    </Portal>
+  );
+});
+
+export const SelectItem = React.forwardRef<
+  HTMLDivElement,
+  ChakraSelect.ItemProps
+>(function SelectItem(props, ref) {
+  const { item, children, ...rest } = props;
+  return (
+    <ChakraSelect.Item key={ item.value } item={ item } { ...rest } ref={ ref }>
+      { children }
+      <ChakraSelect.ItemIndicator/>
+    </ChakraSelect.Item>
+  );
+});
+
+interface SelectValueTextProps
+  extends Omit<ChakraSelect.ValueTextProps, 'children'> {
+  children?(items: Array<CollectionItem>): React.ReactNode;
+}
+
+export const SelectValueText = React.forwardRef<
+  HTMLSpanElement,
+  SelectValueTextProps
+>(function SelectValueText(props, ref) {
+  const { children, ...rest } = props;
+  return (
+    <ChakraSelect.ValueText { ...rest } ref={ ref }>
+      <ChakraSelect.Context>
+        { (select) => {
+          const items = select.selectedItems;
+          if (items.length === 0) return props.placeholder;
+          if (children) return children(items);
+          if (items.length === 1)
+            return select.collection.stringifyItem(items[0]);
+          return `${ items.length } selected`;
+        } }
+      </ChakraSelect.Context>
+    </ChakraSelect.ValueText>
+  );
+});
+
+export const SelectRoot = React.forwardRef<
+  HTMLDivElement,
+  ChakraSelect.RootProps
+>(function SelectRoot(props, ref) {
+  return (
+    <ChakraSelect.Root
+      { ...props }
+      ref={ ref }
+      positioning={{ sameWidth: true, ...props.positioning }}
+    >
+      { props.asChild ? (
+        props.children
+      ) : (
+        <>
+          <ChakraSelect.HiddenSelect/>
+          { props.children }
+        </>
+      ) }
+    </ChakraSelect.Root>
+  );
+}) as ChakraSelect.RootComponent;
+
+interface SelectItemGroupProps extends ChakraSelect.ItemGroupProps {
+  label: React.ReactNode;
+}
+
+export const SelectItemGroup = React.forwardRef<
+  HTMLDivElement,
+  SelectItemGroupProps
+>(function SelectItemGroup(props, ref) {
+  const { children, label, ...rest } = props;
+  return (
+    <ChakraSelect.ItemGroup { ...rest } ref={ ref }>
+      <ChakraSelect.ItemGroupLabel>{ label }</ChakraSelect.ItemGroupLabel>
+      { children }
+    </ChakraSelect.ItemGroup>
+  );
+});
+
+export const SelectLabel = ChakraSelect.Label;
+export const SelectItemText = ChakraSelect.ItemText;

toolkit/theme/foundations/colors.ts

-import type { TokenDefinition } from '@chakra-ui/react/dist/types/styled-system/types';
+import type { ThemingConfig } from '@chakra-ui/react';
 
-const colors: TokenDefinition['colors'] = {
+import type { ExcludeUndefined } from 'types/utils';
+
+const colors: ExcludeUndefined<ThemingConfig['tokens']>['colors'] = {
   green: {
     '100': { value: '#C6F6D5' },
     '400': { value: '#48BB78' },

toolkit/theme/foundations/durations.ts

-import type { TokenDefinition } from '@chakra-ui/react/dist/types/styled-system/types';
+import type { ThemingConfig } from '@chakra-ui/react';
 
-const durations: TokenDefinition['durations'] = {
+import type { ExcludeUndefined } from 'types/utils';
+
+const durations: ExcludeUndefined<ThemingConfig['tokens']>['durations'] = {
   'ultra-fast': { value: '50ms' },
   faster: { value: '100ms' },
   fast: { value: '150ms' },

toolkit/theme/foundations/semanticTokens.ts

@@ -171,6 +171,23 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
         DEFAULT: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
       },
     },
+    drawer: {
+      bg: {
+        DEFAULT: { value: { _light: '{colors.white}', _dark: '{colors.gray.900}' } },
+      },
+    },
+    select: {
+      fg: {
+        DEFAULT: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
+        hover: { value: '{colors.blue.400}' },
+        error: { value: '{colors.red.500}' },
+      },
+      border: {
+        DEFAULT: { value: { _light: '{colors.gray.300}', _dark: '{colors.gray.600}' } },
+        hover: { value: '{colors.blue.400}' },
+        error: { value: '{colors.red.500}' },
+      },
+    },
     spinner: {
       track: {
         DEFAULT: { value: { _light: '{colors.blackAlpha.200}', _dark: '{colors.whiteAlpha.200}' } },
@@ -236,10 +253,10 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
   },
   shadows: {
     popover: {
-      DEFAULT: { value: {
-        _light: '{shadows.size.2xl}',
-        _dark: '0px 15px 40px 0px rgba(0, 0, 0, 0.4), 0px 5px 10px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 1px rgba(0, 0, 0, 0.1)',
-      } },
+      DEFAULT: { value: { _light: '{shadows.size.2xl}', _dark: '{shadows.dark-lg}' } },
+    },
+    drawer: {
+      DEFAULT: { value: { _light: '{shadows.size.lg}', _dark: '{shadows.dark-lg}' } },
     },
   },
 };

toolkit/theme/foundations/shadows.ts

@@ -13,6 +13,7 @@ const shadows: ExcludeUndefined<ThemingConfig['tokens']>['shadows'] = {
     xl: { value: '0px 10px 10px -5px rgba(0, 0, 0, 0.04), 0px 20px 25px -5px rgba(0, 0, 0, 0.1)' },
     '2xl': { value: '0px 15px 50px -12px rgba(0, 0, 0, 0.25)' },
   },
+  'dark-lg': { value: '0px 15px 40px 0px rgba(0, 0, 0, 0.4), 0px 5px 10px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 1px rgba(0, 0, 0, 0.1)' },
 };
 
 export default shadows;

toolkit/theme/recipes/dialog.recipe.ts

@@ -120,7 +120,9 @@ export const recipe = defineSlotRecipe({
           overflow: 'hidden',
         },
         content: {
-          minH: 'auto',
+          // source code has minH: 'auto', but I am not sure why
+          // anyway it will override the minH from the "full" size variant
+          // minH: 'auto',
           maxH: 'calc(100% - 7.5rem)',
           borderRadius: 'xl',
         },

toolkit/theme/recipes/drawer.recipe.ts

+import { defineSlotRecipe } from '@chakra-ui/react';
+
+export const recipe = defineSlotRecipe({
+  slots: [ 'root', 'backdrop', 'trigger', 'content', 'header', 'body', 'footer', 'title', 'description', 'positioner' ],
+  className: 'chakra-drawer',
+  base: {
+    backdrop: {
+      bg: 'blackAlpha.800',
+      pos: 'fixed',
+      insetInlineStart: 0,
+      top: 0,
+      w: '100vw',
+      h: '100dvh',
+      zIndex: 'modal',
+      _open: {
+        animationName: 'fade-in',
+        animationDuration: 'slow',
+      },
+      _closed: {
+        animationName: 'fade-out',
+        animationDuration: 'moderate',
+      },
+    },
+    positioner: {
+      display: 'flex',
+      width: '100vw',
+      height: '100dvh',
+      position: 'fixed',
+      insetInlineStart: 0,
+      top: 0,
+      zIndex: 'modal',
+      overscrollBehaviorY: 'none',
+    },
+    content: {
+      display: 'flex',
+      flexDirection: 'column',
+      position: 'relative',
+      width: '100%',
+      outline: 0,
+      zIndex: 'modal',
+      textStyle: 'sm',
+      maxH: '100dvh',
+      color: 'inherit',
+      bg: 'drawer.bg',
+      boxShadow: 'drawer',
+      _open: {
+        animationDuration: 'slowest',
+        animationTimingFunction: 'ease-in-smooth',
+      },
+      _closed: {
+        animationDuration: 'slower',
+        animationTimingFunction: 'ease-in-smooth',
+      },
+    },
+    header: {
+      flex: 0,
+      px: '6',
+      pt: '6',
+      pb: '4',
+    },
+    body: {
+      p: '6',
+      flex: '1',
+      overflow: 'auto',
+    },
+    footer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      gap: '3',
+      px: '6',
+      pt: '2',
+      pb: '4',
+    },
+    title: {
+      textStyle: 'lg',
+      fontWeight: 'semibold',
+    },
+    description: {
+      color: 'fg.muted',
+    },
+  },
+
+  variants: {
+    size: {
+      md: {
+        content: {
+          maxW: '300px',
+        },
+      },
+    },
+
+    placement: {
+      start: {
+        positioner: {
+          justifyContent: 'flex-start',
+        },
+        content: {
+          _open: {
+            animationName: {
+              base: 'slide-from-left-full, fade-in',
+              _rtl: 'slide-from-right-full, fade-in',
+            },
+          },
+          _closed: {
+            animationName: {
+              base: 'slide-to-left-full, fade-out',
+              _rtl: 'slide-to-right-full, fade-out',
+            },
+          },
+        },
+      },
+
+      end: {
+        positioner: {
+          justifyContent: 'flex-end',
+        },
+        content: {
+          _open: {
+            animationName: {
+              base: 'slide-from-right-full, fade-in',
+              _rtl: 'slide-from-left-full, fade-in',
+            },
+          },
+          _closed: {
+            animationName: {
+              base: 'slide-to-right-full, fade-out',
+              _rtl: 'slide-to-right-full, fade-out',
+            },
+          },
+        },
+      },
+
+      top: {
+        positioner: {
+          alignItems: 'flex-start',
+        },
+        content: {
+          maxW: '100%',
+          _open: { animationName: 'slide-from-top-full, fade-in' },
+          _closed: { animationName: 'slide-to-top-full, fade-out' },
+        },
+      },
+
+      bottom: {
+        positioner: {
+          alignItems: 'flex-end',
+        },
+        content: {
+          maxW: '100%',
+          _open: { animationName: 'slide-from-bottom-full, fade-in' },
+          _closed: { animationName: 'slide-to-bottom-full, fade-out' },
+        },
+      },
+    },
+
+    contained: {
+      'true': {
+        positioner: {
+          padding: '4',
+        },
+        content: {
+          borderRadius: 'l3',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    placement: 'end',
+  },
+});

toolkit/theme/recipes/index.ts

@@ -2,12 +2,15 @@ import { recipe as alert } from './alert.recipe';
 import { recipe as button } from './button.recipe';
 import { recipe as closeButton } from './close-button.recipe';
 import { recipe as dialog } from './dialog.recipe';
+import { recipe as drawer } from './drawer.recipe';
 import { recipe as field } from './field.recipe';
 import { recipe as input } from './input.recipe';
 import { recipe as link } from './link.recipe';
+import { recipe as nativeSelect } from './native-select.recipe';
 import { recipe as pinInput } from './pin-input.recipe';
 import { recipe as popover } from './popover.recipe';
 import { recipe as progressCircle } from './progress-circle.recipe';
+import { recipe as select } from './select.recipe';
 import { recipe as skeleton } from './skeleton.recipe';
 import { recipe as spinner } from './spinner.recipe';
 import { recipe as switchRecipe } from './switch.recipe';
@@ -29,10 +32,13 @@ export const recipes = {
 export const slotRecipes = {
   alert,
   dialog,
+  drawer,
   field,
+  nativeSelect,
   pinInput,
   popover,
   progressCircle,
+  select,
   'switch': switchRecipe,
   tabs,
   toast,

toolkit/theme/recipes/native-select.recipe.ts

+import { defineSlotRecipe } from '@chakra-ui/react';
+
+import { recipe as selectSlotRecipe } from './select.recipe';
+
+// TODO @tom2drum check sizes for native select
+export const recipe = defineSlotRecipe({
+  slots: [ 'root', 'field', 'indicator' ],
+
+  base: {
+    root: {
+      height: 'fit-content',
+      display: 'flex',
+      width: '100%',
+      position: 'relative',
+    },
+    field: {
+      width: '100%',
+      minWidth: '0',
+      outline: '0',
+      appearance: 'none',
+      borderRadius: 'base',
+      _disabled: {
+        layerStyle: 'disabled',
+      },
+      _invalid: {
+        borderColor: 'border.error',
+      },
+      focusVisibleRing: 'none',
+      lineHeight: 'normal',
+      '& > option, & > optgroup': {
+        bg: 'inherit',
+      },
+      fontWeight: '500',
+    },
+    indicator: {
+      position: 'absolute',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      pointerEvents: 'none',
+      top: '50%',
+      transform: 'translateY(-50%)',
+      height: '100%',
+      color: 'inherit',
+      _disabled: {
+        opacity: '0.5',
+      },
+      _invalid: {
+        color: 'select.fg.error',
+      },
+      _icon: {
+        width: '1em',
+        height: '1em',
+      },
+    },
+  },
+
+  variants: {
+    variant: {
+      outline: {
+        field: selectSlotRecipe.variants?.variant.outline.trigger,
+      },
+    },
+
+    size: {
+      xs: {
+        field: {
+          textStyle: 'xs',
+          ps: '2',
+          pe: '6',
+          height: '6',
+        },
+        indicator: {
+          textStyle: 'sm',
+          insetEnd: '1.5',
+        },
+      },
+      sm: {
+        field: {
+          textStyle: 'sm',
+          ps: '2.5',
+          pe: '8',
+          height: '8',
+        },
+        indicator: {
+          textStyle: 'md',
+          insetEnd: '2',
+        },
+      },
+      md: {
+        field: {
+          textStyle: 'sm',
+          ps: '3',
+          pe: '8',
+          height: '10',
+        },
+        indicator: {
+          textStyle: 'lg',
+          insetEnd: '2',
+        },
+      },
+      lg: {
+        field: {
+          textStyle: 'md',
+          ps: '4',
+          pe: '8',
+          height: '11',
+        },
+        indicator: {
+          textStyle: 'xl',
+          insetEnd: '3',
+        },
+      },
+      xl: {
+        field: {
+          textStyle: 'md',
+          ps: '4.5',
+          pe: '10',
+          height: '12',
+        },
+        indicator: {
+          textStyle: 'xl',
+          insetEnd: '3',
+        },
+      },
+    },
+  },
+
+  defaultVariants: selectSlotRecipe.defaultVariants,
+});

toolkit/theme/recipes/select.recipe.ts

+import { defineSlotRecipe } from '@chakra-ui/react';
+
+// TODO @tom2drum check sizes for select
+export const recipe = defineSlotRecipe({
+  slots: [ 'root', 'trigger', 'indicatorGroup', 'indicator', 'content', 'item', 'control', 'itemText', 'itemGroup', 'itemGroupLabel', 'label', 'valueText' ],
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1.5',
+      width: 'full',
+    },
+    trigger: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      width: 'full',
+      minH: 'var(--select-trigger-height)',
+      px: 'var(--select-trigger-padding-x)',
+      borderRadius: 'base',
+      userSelect: 'none',
+      textAlign: 'start',
+      fontWeight: '500',
+      focusVisibleRing: 'none',
+      _placeholderShown: {
+        color: 'gray.500',
+      },
+      _disabled: {
+        layerStyle: 'disabled',
+      },
+      _invalid: {
+        borderColor: 'select.border.error',
+      },
+    },
+    indicatorGroup: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '1',
+      pos: 'absolute',
+      right: '0',
+      top: '0',
+      bottom: '0',
+      px: 'var(--select-trigger-padding-x)',
+      pointerEvents: 'none',
+    },
+    indicator: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      color: 'inherit',
+    },
+    content: {
+      background: 'popover.bg',
+      display: 'flex',
+      flexDirection: 'column',
+      zIndex: 'dropdown',
+      borderRadius: 'base',
+      outline: 0,
+      maxH: '96',
+      overflowY: 'auto',
+      boxShadow: 'md',
+      _open: {
+        animationStyle: 'slide-fade-in',
+        animationDuration: 'fast',
+      },
+      _closed: {
+        animationStyle: 'slide-fade-out',
+        animationDuration: 'fastest',
+      },
+    },
+    item: {
+      position: 'relative',
+      userSelect: 'none',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '2',
+      cursor: 'option',
+      justifyContent: 'space-between',
+      flex: '1',
+      textAlign: 'start',
+      borderRadius: 'base',
+      _highlighted: {
+        bg: 'bg.emphasized/60',
+      },
+      _disabled: {
+        pointerEvents: 'none',
+        opacity: '0.5',
+      },
+      _icon: {
+        width: '4',
+        height: '4',
+      },
+    },
+    control: {
+      pos: 'relative',
+    },
+    itemText: {
+      flex: '1',
+    },
+    itemGroup: {
+      _first: { mt: '0' },
+    },
+    itemGroupLabel: {
+      py: '1',
+      fontWeight: 'medium',
+    },
+    label: {
+      fontWeight: 'medium',
+      userSelect: 'none',
+      textStyle: 'sm',
+      _disabled: {
+        layerStyle: 'disabled',
+      },
+    },
+    valueText: {
+      lineClamp: '1',
+      maxW: '80%',
+    },
+  },
+
+  variants: {
+    variant: {
+      outline: {
+        trigger: {
+          bg: 'transparent',
+          borderWidth: '2px',
+          borderColor: 'select.border',
+          _expanded: {
+            borderColor: 'select.border.hover',
+          },
+          _hover: {
+            borderColor: 'select.border.hover',
+          },
+          _focusVisible: {
+            borderColor: 'select.border.hover',
+            focusVisibleRing: 'none',
+          },
+        },
+      },
+    },
+
+    size: {
+      xs: {
+        root: {
+          '--select-trigger-height': 'sizes.8',
+          '--select-trigger-padding-x': 'spacing.2',
+        },
+        content: {
+          p: '1',
+          gap: '1',
+          textStyle: 'xs',
+        },
+        trigger: {
+          textStyle: 'xs',
+          gap: '1',
+        },
+        item: {
+          py: '1',
+          px: '2',
+        },
+        itemGroupLabel: {
+          py: '1',
+          px: '2',
+        },
+        indicator: {
+          _icon: {
+            width: '3.5',
+            height: '3.5',
+          },
+        },
+      },
+
+      sm: {
+        root: {
+          '--select-trigger-height': 'sizes.9',
+          '--select-trigger-padding-x': 'spacing.2.5',
+        },
+        content: {
+          p: '1',
+          textStyle: 'sm',
+        },
+        trigger: {
+          textStyle: 'sm',
+          gap: '1',
+        },
+        indicator: {
+          _icon: {
+            width: '4',
+            height: '4',
+          },
+        },
+        item: {
+          py: '1',
+          px: '1.5',
+        },
+        itemGroup: {
+          mt: '1',
+        },
+        itemGroupLabel: {
+          py: '1',
+          px: '1.5',
+        },
+      },
+
+      md: {
+        root: {
+          '--select-trigger-height': 'sizes.10',
+          '--select-trigger-padding-x': 'spacing.3',
+        },
+        content: {
+          p: '1',
+          textStyle: 'sm',
+        },
+        itemGroup: {
+          mt: '1.5',
+        },
+        item: {
+          py: '1.5',
+          px: '2',
+        },
+        itemIndicator: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        itemGroupLabel: {
+          py: '1.5',
+          px: '2',
+        },
+        trigger: {
+          textStyle: 'sm',
+          gap: '2',
+        },
+        indicator: {
+          _icon: {
+            width: '4',
+            height: '4',
+          },
+        },
+      },
+
+      lg: {
+        root: {
+          '--select-trigger-height': 'sizes.12',
+          '--select-trigger-padding-x': 'spacing.4',
+        },
+        content: {
+          p: '1.5',
+          textStyle: 'md',
+        },
+        itemGroup: {
+          mt: '2',
+        },
+        item: {
+          py: '2',
+          px: '3',
+        },
+        itemGroupLabel: {
+          py: '2',
+          px: '3',
+        },
+        trigger: {
+          textStyle: 'md',
+          py: '3',
+          gap: '2',
+        },
+        indicator: {
+          _icon: {
+            width: '5',
+            height: '5',
+          },
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    variant: 'outline',
+  },
+});

ui/pages/Chakra.tsx

 /* eslint-disable max-len */
 /* eslint-disable react/jsx-no-bind */
-import { Heading, HStack, Link, Spinner, Tabs, VStack } from '@chakra-ui/react';
+import { createListCollection, Heading, HStack, Link, Spinner, Tabs, VStack } from '@chakra-ui/react';
 import React from 'react';
 
 import { Alert } from 'toolkit/chakra/alert';
@@ -9,8 +9,10 @@ import { useColorMode } from 'toolkit/chakra/color-mode';
 import { Field } from 'toolkit/chakra/field';
 import { Input } from 'toolkit/chakra/input';
 import { InputGroup } from 'toolkit/chakra/input-group';
+import { NativeSelectField, NativeSelectRoot } from 'toolkit/chakra/native-select';
 import { PinInput } from 'toolkit/chakra/pin-input';
 import { ProgressCircleRing, ProgressCircleRoot } from 'toolkit/chakra/progress-circle';
+import { SelectContent, SelectItem, SelectRoot, SelectTrigger, SelectValueText } from 'toolkit/chakra/select';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { Switch } from 'toolkit/chakra/switch';
 import { Textarea } from 'toolkit/chakra/textarea';
@@ -25,6 +27,15 @@ const TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do ei
 const ChakraShowcases = () => {
   const colorMode = useColorMode();
 
+  const frameworks = createListCollection({
+    items: [
+      { label: 'React.js', value: 'react' },
+      { label: 'Vue.js', value: 'vue' },
+      { label: 'Angular', value: 'angular' },
+      { label: 'Svelte', value: 'svelte' },
+    ],
+  });
+
   return (
     <>
       <PageTitle title="Chakra UI Showcase"/>
@@ -53,39 +64,39 @@ const ChakraShowcases = () => {
         <section>
           <Heading textStyle="heading.md" mb={ 2 }>Inputs</Heading>
           <Heading textStyle="heading.sm" mb={ 2 }>Regular</Heading>
-          <HStack gap={ 4 } whiteSpace="nowrap">
-            <Field label="Email" required>
+          <HStack gap={ 4 } whiteSpace="nowrap" flexWrap="wrap">
+            <Field label="Email" required maxWidth="300px">
               <Input type="email"/>
             </Field>
-            <Field label="Email">
+            <Field label="Email" maxWidth="300px">
               <Input value="me@example.com"/>
             </Field>
-            <Field label="Email" invalid>
+            <Field label="Email" invalid maxWidth="300px">
               <Input value="duck"/>
             </Field>
-            <Field label="Email" readOnly>
+            <Field label="Email" readOnly maxWidth="300px">
               <Input value="duck"/>
             </Field>
-            <Field label="Email" disabled>
+            <Field label="Email" disabled maxWidth="300px">
               <Input value="duck"/>
             </Field>
           </HStack>
-          <HStack gap={ 4 } whiteSpace="nowrap" mt={ 4 } alignItems="flex-start">
-            <Field label="Email" required size="sm">
+          <HStack gap={ 4 } whiteSpace="nowrap" mt={ 4 } alignItems="flex-start" flexWrap="wrap">
+            <Field label="Email" required size="sm" maxWidth="300px">
               <Input/>
             </Field>
-            <Field label="Email" required size="md">
+            <Field label="Email" required size="md" maxWidth="300px">
               <Input/>
             </Field>
-            <Field label="Email" required size="lg">
+            <Field label="Email" required size="lg" maxWidth="300px">
               <Input/>
             </Field>
-            <Field label="Email" required size="xl">
+            <Field label="Email" required size="xl" maxWidth="300px">
               <Input/>
             </Field>
           </HStack>
           <Heading textStyle="heading.sm" mb={ 2 } mt={ 6 }>Floating (only XL size)</Heading>
-          <HStack gap={ 4 } mt={ 4 } alignItems="flex-start">
+          <HStack gap={ 4 } mt={ 4 } alignItems="flex-start" flexWrap="wrap">
             <Field label="Email" required floating size="xl" helperText="Helper text" w="300px">
               <Input type="email"/>
             </Field>
@@ -93,7 +104,7 @@ const ChakraShowcases = () => {
               <Input type="email"/>
             </Field>
           </HStack>
-          <HStack p={ 6 } mt={ 4 } gap={ 4 } bgColor={{ _light: 'blackAlpha.200', _dark: 'whiteAlpha.200' }} >
+          <HStack p={ 6 } mt={ 4 } gap={ 4 } bgColor={{ _light: 'blackAlpha.200', _dark: 'whiteAlpha.200' }} flexWrap="wrap">
             <Field label="Email" required floating size="xl" w="300px">
               <Input type="email"/>
             </Field>
@@ -105,7 +116,7 @@ const ChakraShowcases = () => {
             </Field>
           </HStack>
           <Heading textStyle="heading.sm" mb={ 2 } mt={ 6 }>Input group</Heading>
-          <HStack gap={ 4 } mt={ 4 } alignItems="flex-start" w="fit-content">
+          <HStack gap={ 4 } mt={ 4 } alignItems="flex-start" w="fit-content" flexWrap="wrap">
             <Field label="Referral code" required floating size="xl" w="300px" flexShrink={ 0 } helperText="Helper text">
               <InputGroup endElement={ <IconSvg name="copy" boxSize={ 5 }/> }>
                 <Input/>
@@ -124,11 +135,11 @@ const ChakraShowcases = () => {
 
         <section>
           <Heading textStyle="heading.md" mb={ 2 }>Textarea</Heading>
-          <HStack gap={ 4 }>
-            <Field label="Description" required floating size="2xl" w="400px">
+          <HStack gap={ 4 } flexWrap="wrap">
+            <Field label="Description" required floating size="2xl" w="360px">
               <Textarea/>
             </Field>
-            <Field label="Description" required floating size="2xl" w="400px">
+            <Field label="Description" required floating size="2xl" w="360px">
               <Textarea value={ TEXT }/>
             </Field>
           </HStack>
@@ -136,7 +147,7 @@ const ChakraShowcases = () => {
 
         <section>
           <Heading textStyle="heading.md" mb={ 2 }>Links</Heading>
-          <HStack gap={ 4 }>
+          <HStack gap={ 4 } flexWrap="wrap">
             <Link>Primary</Link>
             <Link visual="secondary">Secondary</Link>
             <Link visual="subtle">Subtle</Link>
@@ -204,12 +215,12 @@ const ChakraShowcases = () => {
 
         <section>
           <Heading textStyle="heading.md" mb={ 2 }>Alerts</Heading>
-          <HStack gap={ 4 } whiteSpace="nowrap">
-            <Alert visual="info" title="Info"> Alert content </Alert>
-            <Alert visual="neutral" title="Neutral"> Alert content </Alert>
-            <Alert visual="warning" title="Warning"> Alert content </Alert>
-            <Alert visual="success" title="Success"> Alert content </Alert>
-            <Alert visual="error" title="Error" startElement={ null }> Alert content </Alert>
+          <HStack gap={ 4 } whiteSpace="nowrap" flexWrap="wrap">
+            <Alert visual="info" title="Info" maxWidth="300px"> Alert content </Alert>
+            <Alert visual="neutral" title="Neutral" maxWidth="300px"> Alert content </Alert>
+            <Alert visual="warning" title="Warning" maxWidth="300px"> Alert content </Alert>
+            <Alert visual="success" title="Success" maxWidth="300px"> Alert content </Alert>
+            <Alert visual="error" title="Error" startElement={ null } maxWidth="300px"> Alert content </Alert>
           </HStack>
         </section>
 
@@ -219,6 +230,30 @@ const ChakraShowcases = () => {
             <Button onClick={ () => toaster.success({ title: 'Success', description: 'Toast content' }) }>Success</Button>
           </HStack>
         </section>
+
+        <section>
+          <Heading textStyle="heading.md" mb={ 2 }>Select</Heading>
+          <HStack gap={ 4 } whiteSpace="nowrap" flexWrap="wrap">
+            <SelectRoot collection={ frameworks }>
+              <SelectTrigger w="350px">
+                <SelectValueText placeholder="Select framework"/>
+              </SelectTrigger>
+              <SelectContent>
+                { frameworks.items.map((framework) => (
+                  <SelectItem item={ framework } key={ framework.value }>
+                    { framework.label }
+                  </SelectItem>
+                )) }
+              </SelectContent>
+            </SelectRoot>
+            <NativeSelectRoot w="350px">
+              <NativeSelectField>
+                <option value="1">Option 1</option>
+                <option value="2">Option 2</option>
+              </NativeSelectField>
+            </NativeSelectRoot>
+          </HStack>
+        </section>
       </VStack>
     </>
   );

ui/rewards/RewardsButton.tsx

@@ -41,7 +41,7 @@ const RewardsButton = ({ visual = 'header', size }: Props) => {
         onFocus={ handleFocus }
         fontSize="sm"
         size={ size }
-        px={ !isLoading && Boolean(apiToken) ? 2.5 : 4 }
+        px={{ base: '10px', lg: !isLoading && Boolean(apiToken) ? 2.5 : 4 }}
         loading={ isLoading }
         _hover={{
           textDecoration: 'none',

ui/shared/ContentLoader.tsx

@@ -25,7 +25,7 @@ const ContentLoader = ({ className, text }: Props) => {
           borderRadius: 'full',
         }}
       />
-      <Text mt={ 6 } variant="secondary">
+      <Text mt={ 6 } color="text.secondary">
         { text || 'Loading data, please wait...' }
       </Text>
     </Box>

ui/shared/gas/GasInfoTooltip.tsx

@@ -57,7 +57,7 @@ const GasInfoTooltip = ({ children, data, dataUpdatedAt, isOpen, placement }: Pr
         <GasInfoTooltipRow name="Normal" info={ data.gas_prices.average }/>
         <GasInfoTooltipRow name="Slow" info={ data.gas_prices.slow }/>
       </Grid>
-      <LinkInternal href={ route({ pathname: '/gas-tracker' }) }>
+      <LinkInternal href={ route({ pathname: '/gas-tracker' }) } className="dark">
         Gas tracker overview
       </LinkInternal>
     </Flex>
@@ -67,11 +67,10 @@ const GasInfoTooltip = ({ children, data, dataUpdatedAt, isOpen, placement }: Pr
     <Tooltip
       content={ content }
       positioning={{ placement }}
-      open={ isOpen }
+      { ...(isOpen ? { open: true } : { }) }
       lazyMount
       interactive
       showArrow={ false }
-      // TODO @tom2drum forced light mode doesn't work for now
       contentProps={{ p: 4, borderRadius: 'md', className: 'light' }}
     >
       { children }

ui/shared/gas/GasInfoTooltipRow.tsx

@@ -14,16 +14,16 @@ interface Props {
 const GasInfoTooltipRow = ({ name, info }: Props) => {
   return (
     <>
-      <Box>
+      <Box textAlign="left">
         <chakra.span>{ name }</chakra.span>
         { info && typeof info.time === 'number' && info.time > 0 && (
-          <chakra.span color="text_secondary">
+          <chakra.span color="text.secondary">
             { space }{ (info.time / 1000).toLocaleString(undefined, { maximumFractionDigits: 1 }) }s
           </chakra.span>
         ) }
       </Box>
       <GasPrice data={ info } textAlign="right"/>
-      <GasPrice data={ info } unitMode="secondary" color="text_secondary" textAlign="right"/>
+      <GasPrice data={ info } unitMode="secondary" color="text.secondary" textAlign="right"/>
     </>
   );
 };

ui/shared/layout/Layout.tsx

@@ -4,7 +4,6 @@ import type { Props } from './types';
 
 import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
 import HeaderAlert from 'ui/snippets/header/HeaderAlert';
-// TODO @tom2drum fix main layout
 import HeaderDesktop from 'ui/snippets/header/HeaderDesktop';
 import HeaderMobile from 'ui/snippets/header/HeaderMobile';
 
@@ -15,7 +14,7 @@ const LayoutDefault = ({ children }: Props) => {
     <Layout.Container>
       <Layout.TopRow/>
       <Layout.NavBar/>
-      { /* <HeaderMobile/> */ }
+      <HeaderMobile/>
       <Layout.MainArea>
         <Layout.SideBar/>
         <Layout.MainColumn>

ui/snippets/header/Burger.tsx

-import { Box, Flex, Drawer, useDisclosure } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import React from 'react';
 
-import { useColorModeValue } from 'toolkit/chakra/color-mode';
 import config from 'configs/app';
+import { DrawerBackdrop, DrawerBody, DrawerContent, DrawerRoot, DrawerTrigger } from 'toolkit/chakra/drawer';
+import { IconButton } from 'toolkit/chakra/icon-button';
+import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 import IconSvg from 'ui/shared/IconSvg';
 import NavigationMobile from 'ui/snippets/navigation/mobile/NavigationMobile';
 import TestnetBadge from 'ui/snippets/navigation/TestnetBadge';
@@ -16,8 +18,7 @@ interface Props {
 }
 
 const Burger = ({ isMarketplaceAppPage }: Props) => {
-  const iconColor = useColorModeValue('gray.600', 'white');
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { open, onOpen, onClose, onOpenChange } = useDisclosure();
   const networkMenu = useNetworkMenu();
 
   const handleNetworkMenuButtonClick = React.useCallback(() => {
@@ -25,49 +26,48 @@ const Burger = ({ isMarketplaceAppPage }: Props) => {
   }, [ networkMenu ]);
 
   const handleNetworkLogoClick = React.useCallback((event: React.SyntheticEvent) => {
-    networkMenu.isOpen && event.preventDefault();
+    networkMenu.open && event.preventDefault();
     networkMenu.onClose();
   }, [ networkMenu ]);
 
   return (
-    <>
-      <Box padding={ 2 } onClick={ onOpen } cursor="pointer">
-        <IconSvg
-          name="burger"
-          boxSize={ 6 }
-          display="block"
-          color={ iconColor }
-          aria-label="Menu button"
-        />
-      </Box>
-      <Drawer.Root
-        isOpen={ isOpen }
-        placement="left"
-        onClose={ onClose }
-        autoFocus={ false }
-      >
-        <Drawer.Backdrop/>
-        <Drawer.Content maxWidth="330px">
-          <Drawer.Body p={ 6 } display="flex" flexDirection="column">
-            <TestnetBadge alignSelf="flex-start"/>
-            <Flex alignItems="center" justifyContent="space-between">
-              <NetworkLogo onClick={ handleNetworkLogoClick }/>
-              { config.UI.navigation.featuredNetworks ? (
-                <NetworkMenuButton
-                  isMobile
-                  isActive={ networkMenu.isOpen }
-                  onClick={ handleNetworkMenuButtonClick }
-                />
-              ) : <Box boxSize={ 9 }/> }
-            </Flex>
-            { networkMenu.isOpen ?
-              <NetworkMenuContentMobile tabs={ networkMenu.availableTabs } items={ networkMenu.data }/> :
-              <NavigationMobile onNavLinkClick={ onClose } isMarketplaceAppPage={ isMarketplaceAppPage }/>
-            }
-          </Drawer.Body>
-        </Drawer.Content>
-      </Drawer.Root>
-    </>
+    <DrawerRoot
+      open={ open }
+      onOpenChange={ onOpenChange }
+      placement="start"
+    >
+      <DrawerBackdrop/>
+      <DrawerTrigger>
+        <IconButton onClick={ onOpen } p={ 2 }>
+          <IconSvg
+            name="burger"
+            boxSize={ 6 }
+            display="block"
+            color={{ _light: 'gray.600', _dark: 'white' }}
+            aria-label="Menu button"
+          />
+        </IconButton>
+      </DrawerTrigger>
+      <DrawerContent >
+        <DrawerBody display="flex" flexDirection="column" overflow="hidden">
+          <TestnetBadge alignSelf="flex-start"/>
+          <Flex alignItems="center" justifyContent="space-between">
+            <NetworkLogo onClick={ handleNetworkLogoClick }/>
+            { config.UI.navigation.featuredNetworks ? (
+              <NetworkMenuButton
+                w={ 9 }
+                isActive={ networkMenu.open }
+                onClick={ handleNetworkMenuButtonClick }
+              />
+            ) : <Box boxSize={ 9 }/> }
+          </Flex>
+          { networkMenu.open ?
+            <NetworkMenuContentMobile tabs={ networkMenu.availableTabs } items={ networkMenu.data }/> :
+            <NavigationMobile onNavLinkClick={ onClose } isMarketplaceAppPage={ isMarketplaceAppPage }/>
+          }
+        </DrawerBody>
+      </DrawerContent>
+    </DrawerRoot>
   );
 };
 

ui/snippets/header/HeaderMobile.tsx

-import { Box, Flex, useColorModeValue } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import React from 'react';
 import { useInView } from 'react-intersection-observer';
 
@@ -18,7 +18,6 @@ type Props = {
 };
 
 const HeaderMobile = ({ hideSearchBar, renderSearchBar }: Props) => {
-  const bgColor = useColorModeValue('white', 'black');
   const scrollDirection = useScrollDirection();
   const { ref, inView } = useInView({ threshold: 1 });
 
@@ -27,7 +26,7 @@ const HeaderMobile = ({ hideSearchBar, renderSearchBar }: Props) => {
   return (
     <Box
       ref={ ref }
-      bgColor={ bgColor }
+      bgColor={{ _light: 'white', _dark: 'black' }}
       display={{ base: 'block', lg: 'none' }}
       position="sticky"
       top="-1px"
@@ -39,7 +38,7 @@ const HeaderMobile = ({ hideSearchBar, renderSearchBar }: Props) => {
         as="header"
         paddingX={ 3 }
         paddingY={ 2 }
-        bgColor={ bgColor }
+        bgColor={{ _light: 'white', _dark: 'black' }}
         width="100%"
         alignItems="center"
         transitionProperty="box-shadow"

ui/snippets/navigation/mobile/NavLinkGroup.tsx

@@ -33,9 +33,10 @@ const NavLinkGroup = ({ item, onClick, isExpanded }: Props) => {
         w="100%"
         px={ 2 }
         aria-label={ `${ item.text } link group` }
+        bgColor={ item.isActive ? 'link.navigation.bg.selected' : 'link.navigation.bg' }
       >
         <Flex justifyContent="space-between" width="100%" alignItems="center" pr={ 1 }>
-          <HStack spacing={ 0 } overflow="hidden">
+          <HStack gap={ 0 } overflow="hidden">
             <NavLinkIcon item={ item }/>
             <Text
               { ...styleProps.textProps }
@@ -43,7 +44,7 @@ const NavLinkGroup = ({ item, onClick, isExpanded }: Props) => {
             >
               { item.text }
             </Text>
-            { isHighlighted && (<LightningLabel iconColor={ styleProps.itemProps.bgColor }/>) }
+            { isHighlighted && (<LightningLabel iconColor={ item.isActive ? 'link.navigation.bg.selected' : 'link.navigation.bg' }/>) }
           </HStack>
           <IconSvg name="arrows/east-mini" transform="rotate(180deg)" boxSize={ 6 }/>
         </Flex>

ui/snippets/navigation/mobile/NavigationMobile.tsx

 import { Box, Flex, Text, VStack } from '@chakra-ui/react';
-// import { animate, motion, useMotionValue } from 'framer-motion';
 import React, { useCallback } from 'react';
 
-import { useColorModeValue } from 'toolkit/chakra/color-mode';
 import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
+import { useColorModeValue } from 'toolkit/chakra/color-mode';
 import IconSvg from 'ui/shared/IconSvg';
 import useIsAuth from 'ui/snippets/auth/useIsAuth';
 
@@ -11,7 +10,7 @@ import NavLink from '../vertical/NavLink';
 import NavLinkRewards from '../vertical/NavLinkRewards';
 import NavLinkGroup from './NavLinkGroup';
 
-// const DRAWER_WIDTH = 330;
+const ANIMATION_DURATION = 300;
 
 interface Props {
   onNavLinkClick?: () => void;
@@ -19,25 +18,34 @@ interface Props {
 }
 
 const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
+  const timeoutRef = React.useRef<number | null>(null);
   const { mainNavItems, accountNavItems } = useNavItems();
 
   const [ openedGroupIndex, setOpenedGroupIndex ] = React.useState(-1);
-
-  // const mainX = useMotionValue(0);
-  // const subX = useMotionValue(DRAWER_WIDTH);
+  const [ isOpen, setIsOpen ] = React.useState(false);
 
   const onGroupItemOpen = (index: number) => () => {
     setOpenedGroupIndex(index);
-    // TODO @tom2drum animate navigation group menu
-    // animate(mainX, -DRAWER_WIDTH, { ease: 'easeInOut' });
-    // animate(subX, 0, { ease: 'easeInOut' });
+    timeoutRef.current = window.setTimeout(() => {
+      setIsOpen(true);
+    }, 100);
   };
 
   const onGroupItemClose = useCallback(() => {
-    // animate(mainX, 0, { ease: 'easeInOut' });
-    // animate(subX, DRAWER_WIDTH, { ease: 'easeInOut', onComplete: () => setOpenedGroupIndex(-1) });
+    setIsOpen(false);
+    timeoutRef.current = window.setTimeout(() => {
+      setOpenedGroupIndex(-1);
+    }, ANIMATION_DURATION);
   }, []);
 
+  React.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [ ]);
+
   const isAuth = useIsAuth();
 
   const iconColor = useColorModeValue('blue.600', 'blue.300');
@@ -52,8 +60,8 @@ const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
         display="flex"
         flexDirection="column"
         flexGrow={ 1 }
-        // as={ motion.div }
-        // style={{ x: mainX }}
+        transform={ isOpen ? 'translateX(calc(-100% - 24px))' : 'translateX(0)' }
+        transition={ `transform ${ ANIMATION_DURATION }ms ease-in-out` }
         maxHeight={ openedGroupIndex > -1 ? '100vh' : 'unset' }
         overflowY={ openedGroupIndex > -1 ? 'hidden' : 'unset' }
       >
@@ -64,7 +72,7 @@ const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
           <VStack
             w="100%"
             as="ul"
-            spacing="1"
+            gap="1"
             alignItems="flex-start"
           >
             { mainNavItems.map((item, index) => {
@@ -84,55 +92,53 @@ const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
             borderTopWidth="1px"
             borderColor="border.divider"
           >
-            <VStack as="ul" spacing="1" alignItems="flex-start">
+            <VStack as="ul" gap="1" alignItems="flex-start">
               <NavLinkRewards onClick={ onNavLinkClick } isCollapsed={ isCollapsed }/>
               { accountNavItems.map((item) => <NavLink key={ item.text } item={ item } onClick={ onNavLinkClick } isCollapsed={ isCollapsed }/>) }
             </VStack>
           </Box>
         ) }
       </Box>
-      { openedGroupIndex >= 0 && (
+      <Box
+        key="sub"
+        w="100%"
+        mt={ 6 }
+        position="absolute"
+        top={ 0 }
+        left={ isOpen ? 0 : 'calc(100% + 24px)' }
+        transition={ `left ${ ANIMATION_DURATION }ms ease-in-out` }
+      >
+        <Flex alignItems="center" px={ 2 } py={ 2.5 } w="100%" h="50px" onClick={ onGroupItemClose } mb={ 1 }>
+          <IconSvg name="arrows/east-mini" boxSize={ 6 } mr={ 2 } color={ iconColor }/>
+          <Text color="text.secondary" fontSize="sm">{ mainNavItems[openedGroupIndex]?.text }</Text>
+        </Flex>
         <Box
-          // as={ motion.nav }
           w="100%"
-          mt={ 6 }
-          position="absolute"
-          top={ 0 }
-          // style={{ x: subX }}
-          key="sub"
+          as="ul"
         >
-          <Flex alignItems="center" px={ 2 } py={ 2.5 } w="100%" h="50px" onClick={ onGroupItemClose } mb={ 1 }>
-            <IconSvg name="arrows/east-mini" boxSize={ 6 } mr={ 2 } color={ iconColor }/>
-            <Text variant="secondary" fontSize="sm">{ mainNavItems[openedGroupIndex].text }</Text>
-          </Flex>
-          <Box
-            w="100%"
-            as="ul"
-          >
-            { isGroupItem(openedItem) && openedItem.subItems?.map(
-              (item, index) => Array.isArray(item) ? (
-                <Box
-                  key={ index }
-                  w="100%"
-                  as="ul"
-                  _notLast={{
-                    mb: 2,
-                    pb: 2,
-                    borderBottomWidth: '1px',
-                    borderColor: 'border.divider',
-                  }}
-                >
-                  { item.map(subItem => <NavLink key={ subItem.text } item={ subItem } onClick={ onNavLinkClick } isCollapsed={ isCollapsed }/>) }
-                </Box>
-              ) : (
-                <Box key={ item.text } mb={ 1 }>
-                  <NavLink item={ item } onClick={ onNavLinkClick } isCollapsed={ isCollapsed }/>
-                </Box>
-              ),
-            ) }
-          </Box>
+          { openedItem && isGroupItem(openedItem) && openedItem.subItems?.map(
+            (item, index) => Array.isArray(item) ? (
+              <Box
+                key={ index }
+                w="100%"
+                as="ul"
+                _notLast={{
+                  mb: 2,
+                  pb: 2,
+                  borderBottomWidth: '1px',
+                  borderColor: 'border.divider',
+                }}
+              >
+                { item.map(subItem => <NavLink key={ subItem.text } item={ subItem } onClick={ onNavLinkClick } isCollapsed={ isCollapsed }/>) }
+              </Box>
+            ) : (
+              <Box key={ item.text } mb={ 1 }>
+                <NavLink item={ item } onClick={ onNavLinkClick } isCollapsed={ isCollapsed }/>
+              </Box>
+            ),
+          ) }
         </Box>
-      ) }
+      </Box>
     </Flex>
   );
 };

ui/snippets/navigation/useNavLinkStyleProps.tsx

@@ -6,7 +6,7 @@ type Props = {
   isActive?: boolean;
 };
 
-export default function useNavLinkProps({ isExpanded, isCollapsed, isActive }: Props) {
+export default function useNavLinkStyleProps({ isExpanded, isCollapsed, isActive }: Props) {
   return {
     itemProps: {
       visual: 'navigation' as const,

ui/snippets/networkMenu/NetworkMenuButton.tsx

@@ -5,13 +5,12 @@ import { IconButton } from 'toolkit/chakra/icon-button';
 import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
-  isMobile?: boolean;
   isActive?: boolean;
   onClick?: () => void;
   className?: string;
 }
 
-const NetworkMenuButton = ({ isMobile, isActive, onClick, className }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
+const NetworkMenuButton = ({ isActive, onClick, className }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
   return (
     <IconButton
       className={ className }
@@ -21,7 +20,7 @@ const NetworkMenuButton = ({ isMobile, isActive, onClick, className }: Props, re
       ref={ ref }
       h={ 9 }
       borderRadius="base"
-      backgroundColor={ isActive ? { _light: 'blue.50', _dark: 'gray.400' } : 'none' }
+      backgroundColor={ isActive ? { _light: 'blue.50', _dark: 'gray.800' } : 'transparent' }
       onClick={ onClick }
       aria-label="Network menu"
       aria-roledescription="menu"
@@ -30,7 +29,7 @@ const NetworkMenuButton = ({ isMobile, isActive, onClick, className }: Props, re
         name="networks"
         boxSize={ 4 }
         color={ isActive ? { _light: 'blue.700', _dark: 'blue.50' } : { _light: 'gray.600', _dark: 'gray.400' } }
-        _hover={{ color: isMobile ? undefined : 'link_hovered' }}
+        _hover={{ color: 'link.hovered' }}
         cursor="pointer"
       />
     </IconButton>

ui/snippets/networkMenu/NetworkMenuContentMobile.tsx

-import { Box, Select, VStack, Flex } from '@chakra-ui/react';
+import { Box, VStack, Flex } from '@chakra-ui/react';
 import { capitalize } from 'es-toolkit';
 import React from 'react';
 
 import type { NetworkGroup, FeaturedNetwork } from 'types/networks';
 
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { NativeSelectField, NativeSelectRoot } from 'toolkit/chakra/native-select';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 
 import NetworkMenuLink from './NetworkMenuLink';
 
@@ -24,7 +25,7 @@ const NetworkMenuContentMobile = ({ items, tabs }: Props) => {
   }, [ items, selectedNetwork?.group, tabs ]);
 
   const handleSelectChange = React.useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
-    setSelectedTab(event.target.value as NetworkGroup);
+    setSelectedTab(event.currentTarget.value as NetworkGroup);
   }, []);
 
   const content = !items || items.length === 0 ? (
@@ -45,11 +46,13 @@ const NetworkMenuContentMobile = ({ items, tabs }: Props) => {
   ) : (
     <>
       { tabs.length > 1 && (
-        <Select size="xs" borderRadius="base" value={ selectedTab } onChange={ handleSelectChange } mb={ 3 }>
-          { tabs.map((tab) => <option key={ tab } value={ tab }>{ capitalize(tab) }</option>) }
-        </Select>
+        <NativeSelectRoot size="sm" borderRadius="base" mb={ 3 }>
+          <NativeSelectField value={ selectedTab } onChange={ handleSelectChange }>
+            { tabs.map((tab) => <option key={ tab } value={ tab }>{ capitalize(tab) }</option>) }
+          </NativeSelectField>
+        </NativeSelectRoot>
       ) }
-      <VStack as="ul" spacing={ 2 } alignItems="stretch">
+      <VStack as="ul" gap={ 2 } alignItems="stretch">
         { items
           .filter(({ group }) => group === selectedTab)
           .map((network) => (

ui/snippets/networkMenu/NetworkMenuLink.tsx

-import { Box, Text, Image, chakra } from '@chakra-ui/react';
+import { Box, Text, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { FeaturedNetwork } from 'types/networks';
 
 import { useColorModeValue } from 'toolkit/chakra/color-mode';
+import { Image } from 'toolkit/chakra/image';
 import IconSvg from 'ui/shared/IconSvg';
 
 interface Props extends FeaturedNetwork {

ui/snippets/searchBar/SearchBar.tsx

@@ -126,6 +126,7 @@ const SearchBar = ({ isHomepage }: Props) => {
         open={ open && (searchTerm.trim().length > 0 || recentSearchKeywords.length > 0) }
         autoFocus={ false }
         onOpenChange={ handleOpenChange }
+        // TODO @tom2drum fix positioning on mobile
         positioning={{ offset: isMobile && !isHomepage ? { mainAxis: -4, crossAxis: 12 } : { mainAxis: 8, crossAxis: 0 } }}
         lazyMount
         closeOnInteractOutside={ false }

ui/snippets/topBar/TopBar.tsx

@@ -33,7 +33,7 @@ const TopBar = () => {
           ) }
           <Settings/>
           { config.UI.navigation.layout === 'horizontal' && Boolean(config.UI.navigation.featuredNetworks) && (
-            <Box display={{ base: 'none', lg: 'flex' }}>
+            <Box display={{ base: 'none', lg: 'flex' }} alignItems="center">
               <Separator mx={ 3 } height={ 4 } orientation="vertical"/>
               <NetworkMenu/>
             </Box>

ui/snippets/user/profile/UserProfileMobile.tsx

-import { Drawer, DrawerBody, DrawerContent, DrawerOverlay, useDisclosure } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -7,6 +6,8 @@ import type { Screen } from 'ui/snippets/auth/types';
 import config from 'configs/app';
 import * as mixpanel from 'lib/mixpanel';
 import useAccount from 'lib/web3/useAccount';
+import { DrawerBackdrop, DrawerBody, DrawerContent, DrawerRoot, DrawerTrigger } from 'toolkit/chakra/drawer';
+import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 import AuthModal from 'ui/snippets/auth/AuthModal';
 import useProfileQuery from 'ui/snippets/auth/useProfileQuery';
 
@@ -56,35 +57,41 @@ const UserProfileMobile = () => {
     authModal.onClose();
   }, [ authModal ]);
 
+  const handleDrawerOpenChange = React.useCallback(({ open }: { open: boolean }) => {
+    if (profileQuery.data || web3Address) {
+      open ? profileMenu.onOpen() : profileMenu.onClose();
+    } else {
+      authModal.onOpen();
+    }
+  }, [ profileQuery.data, web3Address, authModal, profileMenu ]);
+
   return (
     <>
-      <UserProfileButton
-        profileQuery={ profileQuery }
-        variant="header"
-        onClick={ handleProfileButtonClick }
-      />
-      { (profileQuery.data || web3Address) && (
-        <Drawer
-          isOpen={ profileMenu.isOpen }
-          placement="right"
-          onClose={ profileMenu.onClose }
-          autoFocus={ false }
-        >
-          <DrawerOverlay/>
-          <DrawerContent maxWidth="300px">
-            <DrawerBody p={ 6 }>
-              <UserProfileContent
-                data={ profileQuery.data }
-                onClose={ profileMenu.onClose }
-                onLogin={ authModal.onOpen }
-                onAddEmail={ handleAddEmailClick }
-                onAddAddress={ handleAddAddressClick }
-              />
-            </DrawerBody>
-          </DrawerContent>
-        </Drawer>
-      ) }
-      { authModal.isOpen && (
+      <DrawerRoot
+        open={ profileMenu.open }
+        onOpenChange={ handleDrawerOpenChange }
+      >
+        <DrawerBackdrop/>
+        <DrawerTrigger>
+          <UserProfileButton
+            profileQuery={ profileQuery }
+            visual="header"
+            onClick={ handleProfileButtonClick }
+          />
+        </DrawerTrigger>
+        <DrawerContent>
+          <DrawerBody>
+            <UserProfileContent
+              data={ profileQuery.data }
+              onClose={ profileMenu.onClose }
+              onLogin={ authModal.onOpen }
+              onAddEmail={ handleAddEmailClick }
+              onAddAddress={ handleAddAddressClick }
+            />
+          </DrawerBody>
+        </DrawerContent>
+      </DrawerRoot>
+      { authModal.open && (
         <AuthModal
           onClose={ handleAuthModalClose }
           initialScreen={ authInitialScreen }

yarn.lock

@@ -20,61 +20,63 @@
     "@jridgewell/gen-mapping" "^0.1.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@ark-ui/react@4.7.0":
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/@ark-ui/react/-/react-4.7.0.tgz#05a8c361ac8051706dcf52c1271645b97c1e2ed5"
-  integrity sha512-w/1IdrqDHKvasv5mtAj6ic2d74uezCvHsCbQmi5oAbpPAE08B3Q7R/KqpS1Ci/qN8TKVa82SXU9W9xxlC27H9w==
+"@ark-ui/react@4.8.0":
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/@ark-ui/react/-/react-4.8.0.tgz#40f61a49847ef85b0de4fc5e12deae0a96eba44d"
+  integrity sha512-42GgXBbeNzxOin1Ac/X1dP45a6SM5np3tEq8qJmDA4h82AVdPXmtZ//3GMDdLl9CXngvSlKYqsrU+/be1xj3pg==
   dependencies:
     "@internationalized/date" "3.6.0"
-    "@zag-js/accordion" "0.81.0"
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/auto-resize" "0.81.0"
-    "@zag-js/avatar" "0.81.0"
-    "@zag-js/carousel" "0.81.0"
-    "@zag-js/checkbox" "0.81.0"
-    "@zag-js/clipboard" "0.81.0"
-    "@zag-js/collapsible" "0.81.0"
-    "@zag-js/collection" "0.81.0"
-    "@zag-js/color-picker" "0.81.0"
-    "@zag-js/color-utils" "0.81.0"
-    "@zag-js/combobox" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/date-picker" "0.81.0"
-    "@zag-js/date-utils" "0.81.0"
-    "@zag-js/dialog" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/editable" "0.81.0"
-    "@zag-js/file-upload" "0.81.0"
-    "@zag-js/file-utils" "0.81.0"
-    "@zag-js/highlight-word" "0.81.0"
-    "@zag-js/hover-card" "0.81.0"
-    "@zag-js/i18n-utils" "0.81.0"
-    "@zag-js/menu" "0.81.0"
-    "@zag-js/number-input" "0.81.0"
-    "@zag-js/pagination" "0.81.0"
-    "@zag-js/pin-input" "0.81.0"
-    "@zag-js/popover" "0.81.0"
-    "@zag-js/presence" "0.81.0"
-    "@zag-js/progress" "0.81.0"
-    "@zag-js/qr-code" "0.81.0"
-    "@zag-js/radio-group" "0.81.0"
-    "@zag-js/rating-group" "0.81.0"
-    "@zag-js/react" "0.81.0"
-    "@zag-js/select" "0.81.0"
-    "@zag-js/signature-pad" "0.81.0"
-    "@zag-js/slider" "0.81.0"
-    "@zag-js/splitter" "0.81.0"
-    "@zag-js/steps" "0.81.0"
-    "@zag-js/switch" "0.81.0"
-    "@zag-js/tabs" "0.81.0"
-    "@zag-js/tags-input" "0.81.0"
-    "@zag-js/time-picker" "0.81.0"
-    "@zag-js/timer" "0.81.0"
-    "@zag-js/toast" "0.81.0"
-    "@zag-js/toggle-group" "0.81.0"
-    "@zag-js/tooltip" "0.81.0"
-    "@zag-js/tree-view" "0.81.0"
-    "@zag-js/types" "0.81.0"
+    "@zag-js/accordion" "0.81.1"
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/auto-resize" "0.81.1"
+    "@zag-js/avatar" "0.81.1"
+    "@zag-js/carousel" "0.81.1"
+    "@zag-js/checkbox" "0.81.1"
+    "@zag-js/clipboard" "0.81.1"
+    "@zag-js/collapsible" "0.81.1"
+    "@zag-js/collection" "0.81.1"
+    "@zag-js/color-picker" "0.81.1"
+    "@zag-js/color-utils" "0.81.1"
+    "@zag-js/combobox" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/date-picker" "0.81.1"
+    "@zag-js/date-utils" "0.81.1"
+    "@zag-js/dialog" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/editable" "0.81.1"
+    "@zag-js/file-upload" "0.81.1"
+    "@zag-js/file-utils" "0.81.1"
+    "@zag-js/focus-trap" "0.81.1"
+    "@zag-js/highlight-word" "0.81.1"
+    "@zag-js/hover-card" "0.81.1"
+    "@zag-js/i18n-utils" "0.81.1"
+    "@zag-js/menu" "0.81.1"
+    "@zag-js/number-input" "0.81.1"
+    "@zag-js/pagination" "0.81.1"
+    "@zag-js/pin-input" "0.81.1"
+    "@zag-js/popover" "0.81.1"
+    "@zag-js/presence" "0.81.1"
+    "@zag-js/progress" "0.81.1"
+    "@zag-js/qr-code" "0.81.1"
+    "@zag-js/radio-group" "0.81.1"
+    "@zag-js/rating-group" "0.81.1"
+    "@zag-js/react" "0.81.1"
+    "@zag-js/select" "0.81.1"
+    "@zag-js/signature-pad" "0.81.1"
+    "@zag-js/slider" "0.81.1"
+    "@zag-js/splitter" "0.81.1"
+    "@zag-js/steps" "0.81.1"
+    "@zag-js/switch" "0.81.1"
+    "@zag-js/tabs" "0.81.1"
+    "@zag-js/tags-input" "0.81.1"
+    "@zag-js/time-picker" "0.81.1"
+    "@zag-js/timer" "0.81.1"
+    "@zag-js/toast" "0.81.1"
+    "@zag-js/toggle-group" "0.81.1"
+    "@zag-js/tooltip" "0.81.1"
+    "@zag-js/tour" "0.81.1"
+    "@zag-js/tree-view" "0.81.1"
+    "@zag-js/types" "0.81.1"
 
 "@assemblyscript/loader@^0.9.4":
   version "0.9.4"
@@ -1620,12 +1622,12 @@
     sucrase "^3.35.0"
     zod "^3.23.8"
 
-"@chakra-ui/react@3.3.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react/-/react-3.3.0.tgz#fac96ebc788faabcdba01ea9c0bb81d5b6dbaf99"
-  integrity sha512-AWAOUQaq7bjoPufPrGDXD+Yq6e8WAhRzmV3KEjzRJVepXBH/hi227b8FNrNN38sSWQMb4+Oac/AdmJvnMiXV8A==
+"@chakra-ui/react@3.3.2":
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react/-/react-3.3.2.tgz#377961e7fe1ae4ca54cf9c71769ca71121aeae76"
+  integrity sha512-u34lk0qzfJASGgHlDCxz3dYR+ACbTqYaLpKVKxj/TLVet6vldWhk5SDQqFXO352+rs39dYD5UEvJAh1jEn6ZPg==
   dependencies:
-    "@ark-ui/react" "4.7.0"
+    "@ark-ui/react" "4.8.0"
     "@emotion/is-prop-valid" "1.3.1"
     "@emotion/serialize" "1.3.3"
     "@emotion/use-insertion-effect-with-fallbacks" "1.2.0"
@@ -7426,650 +7428,665 @@
   resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31"
   integrity sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==
 
-"@zag-js/accordion@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/accordion/-/accordion-0.81.0.tgz#26efff86d0a2b577ad407ee7ed17fd5da74d29f0"
-  integrity sha512-0q1EQkaVUblqWWdO8rkMXIOFg8GtvTTtccW1AJfwznVAsSbKSAmKycpLafR1wYBX4kOo/wR3WGKoNVNU+ALWKA==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/anatomy@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/anatomy/-/anatomy-0.81.0.tgz#03e92e1c3188b20410537dc40a889d5f7dd1105c"
-  integrity sha512-5BtIkyeObwuCH0nppdcksX+nUo2HCcSGV8PnskyOYL35ToQ076kiT/Ko1qHkh05io+40dGjfLvJ5LG6SStjEzw==
-
-"@zag-js/aria-hidden@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/aria-hidden/-/aria-hidden-0.81.0.tgz#55ca0d69814f5d5dd7ec04785055f87b7b3dcf60"
-  integrity sha512-MW51I0T2LBe08t6i7oaXeetCVP54owm/4tPU7jFSdNdMYdZ6M/mPMfRU1Q0CIAgxODcdkYd7P+j2v9/lmtC/ig==
-
-"@zag-js/auto-resize@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/auto-resize/-/auto-resize-0.81.0.tgz#1a005e1a6ed0f7613463257a423b979636260eb0"
-  integrity sha512-v0Hi3OqPLIzu9MNaUr1w+NDCwt6oF8c3iiP02KerzhGSC8kyHjSvp2o3jGa5n55Cmmfckpkcw9DPqhThzgpK7g==
-  dependencies:
-    "@zag-js/dom-query" "0.81.0"
-
-"@zag-js/avatar@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/avatar/-/avatar-0.81.0.tgz#e576fb8d036392456787450ee5c002fb07762023"
-  integrity sha512-oSYKT387jff1m/WEaR0wReqz/v/Dq0ybbxJxUq5flJAJbpEZL8Im4RDsJa6tSDTC3R+YTfwNnCBGKiJdDIxeTQ==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/carousel@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/carousel/-/carousel-0.81.0.tgz#0686cd18278d8bb4d8364b717a01202dfac52a7b"
-  integrity sha512-ttGdgdXqNf8RcQ+uGuZV4XqPAbt7rPbBpynH5w4CFfQyU3qiLpCj2jWBBEDAuow5lXySsqnALOBAaVrz1K1UZA==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/scroll-snap" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/checkbox@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/checkbox/-/checkbox-0.81.0.tgz#2cc01539c6ec7fa3a1b4211e8f9895feb9df42aa"
-  integrity sha512-KNyxmkns/Mgxnt4U+QaOQAyYAiBD6WkZJa/Q5P2vA3pdbM2HJqYO4xQZ9zrhwj5GPleWGBW8UX8y+vB3eeSKlw==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/focus-visible" "0.81.0"
-    "@zag-js/form-utils" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/clipboard@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/clipboard/-/clipboard-0.81.0.tgz#0ff9082978e2cb9f300e64e6388ffcfea8ea2c83"
-  integrity sha512-CcyA4RleTA7tOFsoK+cbpI4p9qf4hNNpBVe89C4C9aAQ726l1O91+Fj3s9ZNbICRvdP7LcoLPzdFm4ehrphYpg==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/collapsible@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/collapsible/-/collapsible-0.81.0.tgz#4c69fe207273172741cf1f389b01d1c7b8d39fca"
-  integrity sha512-GYBQgAj7iG+38GcX7lkO/bHvcD2UMGzPTbkpcTrKqQGt2V5TvJgJbz8JcPFxnv0UaV7HZUD6vU4VPNDG749m/Q==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/collection@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/collection/-/collection-0.81.0.tgz#603524d13b6d2a5c8c3668dfade08b64654fc6eb"
-  integrity sha512-Ef9GnS5tLZdicuAAh6HlGdSpoDhCArMU1JxftV0bngO8jWA0+UF1ASvgG1+YEdapILX3sCPiVl5nzQskifvUOQ==
-  dependencies:
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/color-picker@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/color-picker/-/color-picker-0.81.0.tgz#c14c1b72e8cfdc874d67b148a1038ec3e437e307"
-  integrity sha512-9JVddLZ9XR/kLSS4wBZ8rps3nc2t8urxgPYSost6R1lnLjviXrnTLPRc3nw8+LSLDmwZnrU4qusFJGxOQBFkag==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/color-utils" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dismissable" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/form-utils" "0.81.0"
-    "@zag-js/popper" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/color-utils@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/color-utils/-/color-utils-0.81.0.tgz#c5eb69ba84fc7d137aaf56e2512ac3653700bf25"
-  integrity sha512-7evBnkwdJ0msKWPzPTtoSp7sQcxN5u7QORXRepFwbQBMTbRtmNqD+zV6VHYQ/2hBXoWRFjjrb6NLWVqc3DbRVQ==
-  dependencies:
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/combobox@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/combobox/-/combobox-0.81.0.tgz#390b489e49ec4542106a8c0a852aba26ab2e29d0"
-  integrity sha512-1XnOB8bUdK1Ap6GUgIpmwO0i9dk6Tvdc1tbN8zkGb7712gZQ7aBdRPTtTh3c6haScZuepMFP9wC7BX9AtRanfA==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/aria-hidden" "0.81.0"
-    "@zag-js/collection" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dismissable" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/popper" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/core@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/core/-/core-0.81.0.tgz#3ae983b5398f36d7b31067910f90bd1b163f5766"
-  integrity sha512-babGUqnyPN4iWGHXQMlrNsB9rzb/6V+R4x3IYFDZINXlo40RW9rSsaDkr4AV/4d1jUR46jQNxz/9mF1+sHMjsw==
-  dependencies:
-    "@zag-js/store" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/date-picker@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/date-picker/-/date-picker-0.81.0.tgz#6291d4876621fda029c6f7f49486f869be98d4b7"
-  integrity sha512-b41WUlfE4YP3fjyH63rNyxAV+ByPkfZCPbCtY9iDd2OIeOa+rN9KR0SjWH1gJ4R93JINpVziet6szfcLBlUCvA==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/date-utils" "0.81.0"
-    "@zag-js/dismissable" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/form-utils" "0.81.0"
-    "@zag-js/live-region" "0.81.0"
-    "@zag-js/popper" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/date-utils@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/date-utils/-/date-utils-0.81.0.tgz#f1b1e94a72aa584d7025e461d8112248c317594c"
-  integrity sha512-2p4K6A91kE54EvaEbj/xHySfeMsc0UvMlh+81nueWc2hvNVZE/MDyqugw5CoFMhy7PdSOcSA1WCxrjjaEyl/7A==
-
-"@zag-js/dialog@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/dialog/-/dialog-0.81.0.tgz#316d72ea12cb6bb9a1cf62084452f3149da4be82"
-  integrity sha512-kfvWREB7TRj97/eVJKZQsV86K5DsPEfP907j11kiH1Dy6CtRIoRCVRJ3DAbTRsHc++cwOdebrDOTMwxc0tf5/w==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/aria-hidden" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dismissable" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/focus-trap" "0.81.0"
-    "@zag-js/remove-scroll" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/dismissable@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/dismissable/-/dismissable-0.81.0.tgz#8dfd3b06b62bf7a0eb0646f00d8520bfebb5a0b6"
-  integrity sha512-pahrUON6OwMtu5yER+MULf11NFGtwc7xBK47a1HHQSDkBbj+hr2IazXiMGE5B/jLLF7kUXGOSZlkflu1mt4AJQ==
-  dependencies:
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/interact-outside" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/dom-query@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/dom-query/-/dom-query-0.81.0.tgz#c7bd174d7ab986dae2557ef440d0ab134186a0ea"
-  integrity sha512-G3ES4D8/uiX/nwROxmsC4xA2Z5ZKzQJdWNRT7AFhQG74oV5PHJPPeDPOZoohzWXNrZtPS/HmvPl87MYLz5xtwA==
-  dependencies:
-    "@zag-js/types" "0.81.0"
-
-"@zag-js/editable@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/editable/-/editable-0.81.0.tgz#88c2bd28e50fc59e30204ceecb8e90e3a0d0e2a8"
-  integrity sha512-j9rtmfWFk+tKlMZ1Tdea5Zu8d+3dpZRqI8bveH1E0ALggjBin/fK6xuRPlLAxHALk24/OpGlY80ZK2KXQobvbA==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/form-utils" "0.81.0"
-    "@zag-js/interact-outside" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/element-rect@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/element-rect/-/element-rect-0.81.0.tgz#ac3be365180003744b7631156a0d2bc148f90ab3"
-  integrity sha512-bTF/ZvG39//A1yX/aMm7SvsqwzGtXQ55sXX2jpjSBGf+uBmd3ZfXZd+LHgpxWKA5RXirHX9VpjTtibzll3u3bg==
-
-"@zag-js/element-size@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/element-size/-/element-size-0.81.0.tgz#87c2a05b8e22b70c5b08124a447f3c8b9c8285eb"
-  integrity sha512-j7AN1DBPh6ePq8qQiwQpkcfFRms9pJ7mawmTZ/HTuEQSIqGdlOjjHDHX50mW04gnqVD9xLOSOXk2CQHr0UaSWg==
-
-"@zag-js/file-upload@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/file-upload/-/file-upload-0.81.0.tgz#b60b4cc8ad1b5839744a4de4f273222436404d17"
-  integrity sha512-mKDCFvOHpvRM+p4WcAXe8qs2WSMs+eIPEupNjTHWlZPk0iuDDOCNMtkzuuOVqcR3J+Qkr8yj1NuxB/7/MbK9ww==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/file-utils" "0.81.0"
-    "@zag-js/i18n-utils" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/file-utils@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/file-utils/-/file-utils-0.81.0.tgz#5c48cf020dcd299bfe233285ecaa97580cbd416c"
-  integrity sha512-k3FPeSl30hSceTpDs2aVVCp9qOWUQ7IVMp+1dxbwqSzd8Qlu9KF+4G/op01QYFmxTskB9Tw25CSgalzQun1SsA==
-  dependencies:
-    "@zag-js/i18n-utils" "0.81.0"
-
-"@zag-js/focus-trap@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/focus-trap/-/focus-trap-0.81.0.tgz#4da37833d5d631ec3674cf40b63e263156fa373a"
-  integrity sha512-4+2dGoKXgA7mETgYn5eqeRAEIgw34gVyKYbOC6r10u1BvrwoNb9EB0O192q98dWx57hfKd2ppui72hxxPQy5+Q==
-  dependencies:
-    "@zag-js/dom-query" "0.81.0"
-
-"@zag-js/focus-visible@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/focus-visible/-/focus-visible-0.81.0.tgz#66d7f570371fb031f08384d0b17e80d10a359a69"
-  integrity sha512-OWqI6Mgonpe35ci2S9YsKnImBV7/fVAdY09BAJTJJfiwMzlbfIhZ6l70GjJTE80vlYHgsGrw4pybaBQTDgX3TQ==
-  dependencies:
-    "@zag-js/dom-query" "0.81.0"
-
-"@zag-js/form-utils@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/form-utils/-/form-utils-0.81.0.tgz#75f84668e6663ee7df8016fbe0a0553f97c53b43"
-  integrity sha512-8yU1P/IDzTgQWo8QXK1iP6PeL5nFg9ZALa99293gNpaJRkhDHWDh3qlH6M32Wzihg0xdUwcjDQL1vv7CqcHVLA==
-
-"@zag-js/highlight-word@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/highlight-word/-/highlight-word-0.81.0.tgz#8074afd9f4fd4073c0cc752b4bcae3cbff57ecf7"
-  integrity sha512-8IOtIUzGl7PQnIXIRScaqY1+3Ww0JQ3AKHvhqZZnOtRTVqTVGWcb8tiRqP0v+V3m5HyROhzpfDVl+IojFd89Jw==
-
-"@zag-js/hover-card@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/hover-card/-/hover-card-0.81.0.tgz#563af756c1d6291edcc846c38635c9a23619bf03"
-  integrity sha512-ZMmZTCHkdmYWA0geAhMDiO1lIBmAapofvq+TSu1mHpCLKBpBCjNcl9/SwPgpv6kAhtHCovvnJZaUiAZ1CvQxXQ==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dismissable" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/popper" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/i18n-utils@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/i18n-utils/-/i18n-utils-0.81.0.tgz#a2c11a6f4fbbc739cc52d8cd962809eab1602461"
-  integrity sha512-22x723PowAOa6r1kHJCpolaGgNcgTYrPyjWtrZrh9vYaosYdyAdRRr7Low6LUikWvZkyBbbBo8aBLfn87V9qbw==
-  dependencies:
-    "@zag-js/dom-query" "0.81.0"
-
-"@zag-js/interact-outside@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/interact-outside/-/interact-outside-0.81.0.tgz#1d27b231129e0f33a058f497cb6a1b27e41a94d4"
-  integrity sha512-gZzZGIYZpTI9pCzndFHhs1KlUQ69gO8ME+P+RRvSuJA3GJGTI+tVPfb+m2lXWt1xyyf8DhwSWEew7hM3M1jODA==
-  dependencies:
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/live-region@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/live-region/-/live-region-0.81.0.tgz#bfb8497d7423f884141290bc19c8aa3fe6dfd6e5"
-  integrity sha512-b2TCZH+P3TSWDaaulXkFtFHfVzGApAnvMcGGbabPOkoeN1N/2/ShlvWDrjwK2bHmyg6jPVbTcR6N3w8P7c1vbw==
-
-"@zag-js/menu@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/menu/-/menu-0.81.0.tgz#90eab3cf3db605789c2cff13a4e079cc46c41e4a"
-  integrity sha512-hTLGCG8rXZfhxVL0HT6cMdtlqpCFVhahZYcGGbPm+FhuYof2AFvxa+vH4Ging8eEu2odumSDBtb0plnd4C9vAQ==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dismissable" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/popper" "0.81.0"
-    "@zag-js/rect-utils" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/number-input@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/number-input/-/number-input-0.81.0.tgz#9bb67ee89129180172fcdbe34340286d269dd27f"
-  integrity sha512-O+Wmu6yEczDS5z9cRmz2Z3rcxtoBhzZdb5Ibgcba0w4+eF1thvZMPRx1V8fJA4+g3WqhfzPIFuRPelofLKJTjg==
+"@zag-js/accordion@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/accordion/-/accordion-0.81.1.tgz#eb4f69597f2acd8ceb62b9e865702ecd598a0813"
+  integrity sha512-NMSx9DNz+FigY9E+FtT/3GCjpP4H0VTbBTmqUDxw3FYKgP3txPoIQGrV4Dig4hCtCiPdmlwSZatA29HrTi8+zw==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/anatomy@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/anatomy/-/anatomy-0.81.1.tgz#2b1a0ee87f6ba9b264675ad9c6531b9181142a21"
+  integrity sha512-x63RqFLdqz2a7KCxvpWXMAwr9A5lWtag4dslku6IBu5IT0oMYuQJ0d+3NeY74xKwdctTmnLs/xRsyUfey5DarQ==
+
+"@zag-js/aria-hidden@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/aria-hidden/-/aria-hidden-0.81.1.tgz#a893928ec868f28acff4863def0042ac48dad15e"
+  integrity sha512-Jsd4rmdZ73+S/PVnoCxI4BjN52okPECztPIxGvNiEOJfL+/YJWmHweprJgmHZJPt9rufZ05SvfeiKr2VXso0vg==
+
+"@zag-js/auto-resize@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/auto-resize/-/auto-resize-0.81.1.tgz#e2121336b463d62eef6ea766f0245c59f8c31423"
+  integrity sha512-InlncZmgT+ofhrUEeQN8BOa8hUCpPNl6dwL83AxXk5J8k+SmfVr0hH6CNSeAEG9XUmepUGPzXQwYbA5t0KRtNA==
+  dependencies:
+    "@zag-js/dom-query" "0.81.1"
+
+"@zag-js/avatar@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/avatar/-/avatar-0.81.1.tgz#5507a08898f7056af3c02f048ad497b5431a9412"
+  integrity sha512-ooMCxBamNWYYi7ZHY+FFpGJouuHWaaO9DTYRwWXsr9pW+FYGcJcPXKKsaFGPeAldBs8dqlBmFdMOWylLySau4Q==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/carousel@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/carousel/-/carousel-0.81.1.tgz#015b9d585d97fb11111f6717c70b8fcae3f23191"
+  integrity sha512-iQRnR5yYChFOsdAGAoH8bZei9tlSCngJJ1Bka8j+XvLHLyjOe+fqhaqwlkAFunMH1kEo1lHVbFDQ5FPGZq9PgA==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/scroll-snap" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/checkbox@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/checkbox/-/checkbox-0.81.1.tgz#b2a188bd47be826a0d77bbe4bc480f450da2115e"
+  integrity sha512-HmoRt7luHZXvNlsqQW5rrQlcFEVKthFkZPgAwUKM5xD7MaifDQUfaWMcOkYUBpJtziDufV2CcdIu9d1z4/hSMA==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/focus-visible" "0.81.1"
+    "@zag-js/form-utils" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/clipboard@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/clipboard/-/clipboard-0.81.1.tgz#6190d011de88736ba739cb218427836228c16b11"
+  integrity sha512-ccDxY+8CsM6XvOnfSQmQqsa99XXjjByVYD4ovylk6+jXwVhToyjOxGiQq/n8zALXHLj2hM/1WIvDwZGTPr1GfQ==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/collapsible@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/collapsible/-/collapsible-0.81.1.tgz#84174447c54c95c56770f76c627a7b331513e254"
+  integrity sha512-oPnmsVtS3/1olPY4E0IwoixK95MDjIGmfHPVmNX3lioN9hbszxBoUQtsZ0ryXNH9HXvDbnJ/KWtpMELjj2TjPA==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/collection@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/collection/-/collection-0.81.1.tgz#d490bb07d444c38ab711aa9f770de03bf775ca2e"
+  integrity sha512-cGvBWL0Z31Vt/RTyuwarkokfer2zlw92+mlX9Hed8198aWyI6bklmaZs77xO89fy8Osjjik/STB6TyItgn1jPA==
+  dependencies:
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/color-picker@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/color-picker/-/color-picker-0.81.1.tgz#a1c797031ffe6f6977f37d25b5e476f01eba72cc"
+  integrity sha512-O7AI1BK/GWlyF3pf9O/9iVk2hcBaaJdBAoNyzqrI6+dPgrjs9eXA4VYyavcHZBm3ABCzqZ7ePO9mnBi//wag8Q==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/color-utils" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dismissable" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/form-utils" "0.81.1"
+    "@zag-js/popper" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/color-utils@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/color-utils/-/color-utils-0.81.1.tgz#807d0cc3190176e886effc4884322b05df03ee85"
+  integrity sha512-Fq4vktoW3UmrhFMb731ldODDSQrLsSO+81eADBzbz3CgGOCOy6rYv73aIgvAgngTOp9Q98NQnTxyt1S8eEGOaw==
+  dependencies:
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/combobox@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/combobox/-/combobox-0.81.1.tgz#e0ad04eaa0ce93a75746538830625dad44950167"
+  integrity sha512-FHJPDZ/A54+ksDJ5dl/Aj49BHso7T8k7s7uSADLvEVJ3kR9qJ+zTdAXR01IQPn+rZWxNUShD76YRK2VKzVt+JQ==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/aria-hidden" "0.81.1"
+    "@zag-js/collection" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dismissable" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/popper" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/core@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/core/-/core-0.81.1.tgz#8cdff5c3b358d755f17bae61039f5dd547261c54"
+  integrity sha512-LJwPH5RgY0EUDDSCfpXFoXQ9+CwakiZOjo9SZdq7lk+wYmP8hCv+r2FCAPclSHljyrGqpIlHU/brkcFslkcN4Q==
+  dependencies:
+    "@zag-js/store" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/date-picker@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/date-picker/-/date-picker-0.81.1.tgz#1bb5262fbbd28facbd6e43cf74bb678dd353abd2"
+  integrity sha512-Mrhi+wFJ8I59wmRIMU/0tuL1D9/ycosmtifD7U63leZJZM32lk+Do7YUhP0FyZ/qBVcjCykU3rJZkHL9EBOuFw==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/date-utils" "0.81.1"
+    "@zag-js/dismissable" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/form-utils" "0.81.1"
+    "@zag-js/live-region" "0.81.1"
+    "@zag-js/popper" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/date-utils@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/date-utils/-/date-utils-0.81.1.tgz#b13ccf1115df59f2a9026f5b099fdf903c2a6b27"
+  integrity sha512-NWen8ebvNkPbENaVS3qcpRjeEhcjF0uiDzBlg1cBdqu2A2EUfO1/lrjYTKpboTC2fQeVoIPdrvCkMXvywHFr8Q==
+
+"@zag-js/dialog@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/dialog/-/dialog-0.81.1.tgz#2b6e939db92adbb52c425bb76e983d81146e4b92"
+  integrity sha512-Jt6ReyeMAveLKgerhhnpiM0ZKrHCyGmRgRtFbW7o4WSQ63UUyTPgUYIvyRJeVJjAGF6IcfvVVVVY3YthRyzf8A==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/aria-hidden" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dismissable" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/focus-trap" "0.81.1"
+    "@zag-js/remove-scroll" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/dismissable@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/dismissable/-/dismissable-0.81.1.tgz#c872adf5b5d3aaeed7c19c803c3cca0886fbec96"
+  integrity sha512-PT19n3CK5XW7S3dQhFLxALsJ0JFsOdukxVNE5iLHPAKEuJeM6dnzG1pn6x3U1wrGybHZgaZkyiF4PWsvXsdaiQ==
+  dependencies:
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/interact-outside" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/dom-query@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/dom-query/-/dom-query-0.81.1.tgz#e0ed66b14a1164b103cd5d2dbeb6e9512284488a"
+  integrity sha512-5CsCVT6xUIwj5hTmsSplqdZXC5HFXj/wU3p+Mp0XjM63fgJODXZh79DPjx/Vqo/YrqSQPoK5dHRhUY8fiDyoSQ==
+  dependencies:
+    "@zag-js/types" "0.81.1"
+
+"@zag-js/editable@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/editable/-/editable-0.81.1.tgz#d85bd8619579650e7cb97f87de91351c8cf6f6fd"
+  integrity sha512-phH7pdgwn/KTnYxe7W83j764Z28fqk0rTxzAYj2Rb5ctQA8ls/UdsbBpdALEx08+rxw3pELT7wxk2Rm+n6Ljqw==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/form-utils" "0.81.1"
+    "@zag-js/interact-outside" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/element-rect@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/element-rect/-/element-rect-0.81.1.tgz#cc5f5110d2e4b1bfc4102835be7f258914519a03"
+  integrity sha512-f11a8MqEEi8yZ4+WmoWpjDBpcWh6kZwkNYyNaVBqseWT9xGTjW3hXxz4L8G0kZaxcsMI2EEv9FNX7tB8FqJD/A==
+
+"@zag-js/element-size@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/element-size/-/element-size-0.81.1.tgz#d0927a0b9d5d1806d0a1d7755a9ee9cceff7852b"
+  integrity sha512-taasImQwXYDvlhQ9L0tPHjbG2Yxqk1FU7sIu5qf9ml1btUEAVah3+DTiCMKBsm+NzgyPY2bsRMqMW3I+4kvkaA==
+
+"@zag-js/file-upload@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/file-upload/-/file-upload-0.81.1.tgz#716c45d91a22f32f91380aa3639f429ee3d633c7"
+  integrity sha512-a19kPUQ+5lyZRI9qK5ANBNTPY5syKJyva4ahmUm1EtV1Wt89x8xVRc5YG8XXaKlKrZlJdDvNPh2rMhV9QviBJw==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/file-utils" "0.81.1"
+    "@zag-js/i18n-utils" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/file-utils@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/file-utils/-/file-utils-0.81.1.tgz#db9dd47594104b2254a6f864bf89fa05aff599a7"
+  integrity sha512-oO+7U8TjUSKxnCG9PtG+6SAgzNkf2cq+lTBjOruaRz3sbrxfNMiz2xf/fIbuhEvHryPKWo86Kd/u/kvU5/gY1A==
+  dependencies:
+    "@zag-js/i18n-utils" "0.81.1"
+
+"@zag-js/focus-trap@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/focus-trap/-/focus-trap-0.81.1.tgz#3b8a1deb4f9c8ce88ef562f6eee28c57233ff10b"
+  integrity sha512-hhW+XkuaaPyTdEBIIEjex+Sflr8sd5pCU/ISyGs4x5wHaPSfYjTUlpasC6ISZ9ADs4kKVidfDnY7u60a2WOAeA==
+  dependencies:
+    "@zag-js/dom-query" "0.81.1"
+
+"@zag-js/focus-visible@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/focus-visible/-/focus-visible-0.81.1.tgz#77f2d51caf5f2d27fd0b030b2c3042bf3dc07b2f"
+  integrity sha512-sQopikZzXGNBcxfPzhsJn2/txD5KDoFIuZpN1TwZHCx6JTBtzWHCl/t9VpULeTSbERdCI9iTx5Zt4QxceuwEBA==
+  dependencies:
+    "@zag-js/dom-query" "0.81.1"
+
+"@zag-js/form-utils@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/form-utils/-/form-utils-0.81.1.tgz#80f7c4c4f10ef6a9f6fec5acf8380fed37c6ad31"
+  integrity sha512-Zb7PvXZWIsudQsT+MZtG+HTsP/s1izifzj3ce4jEh4bgo3heLlwPTGkm+4mGqVAivcaPW4HmvwmLOgWoiXA/3A==
+
+"@zag-js/highlight-word@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/highlight-word/-/highlight-word-0.81.1.tgz#73179abb51ca3ddd2e9e2e17482af837111d6fbd"
+  integrity sha512-PU4zcfVSj446CtSw+viYkFMGkCjZvrZvQxPnGENFNNUHpsnwudz1a/NJiOPxSJTLY+C0FP0vanOl9YbgEL5xGQ==
+
+"@zag-js/hover-card@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/hover-card/-/hover-card-0.81.1.tgz#738bbd69eeb58f945400b11470d8c2ca4d90ad7e"
+  integrity sha512-xoAVYUf4sk70f8z1wbeITU+QiGy7jqdPgNkbT6jbklKVS/N8Y7WdWPU67ebCJWDLrUFQ2szG3nJVY/ZiACu1RA==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dismissable" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/popper" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/i18n-utils@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/i18n-utils/-/i18n-utils-0.81.1.tgz#0e2ae60f0f17543b4e2e6b9f10d865715b719976"
+  integrity sha512-/7sQuPOewdf/KpQQkizQplWIS/3PH+iqexef/IV/1sS+KgmTrTz8UsVKm4Vw7FcMmFaWlAOdHqS3UgWiJ2j24w==
+  dependencies:
+    "@zag-js/dom-query" "0.81.1"
+
+"@zag-js/interact-outside@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/interact-outside/-/interact-outside-0.81.1.tgz#eb96a4bf6e7679c8fd79529623cf2ed831e4ce8a"
+  integrity sha512-jfeDlxNCYbRgKwcIdSjr0C6KChbbJSQyeYi+TDmqAQEVTiVYQo3j3NMdoV0V+IVoK+xnj4wC5DhRdEIHLzRiCA==
+  dependencies:
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/live-region@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/live-region/-/live-region-0.81.1.tgz#10c22a43a324532c15b015108afa6b5c0665e840"
+  integrity sha512-zyR3xbKOBQ5qftXy8TCUkj8ZAn5p2UKMgsNLYaxW2UVKMy3syMfJ57BFqg8Hvw1vZ9X9orwQG8vSb85ZBIWP9g==
+
+"@zag-js/menu@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/menu/-/menu-0.81.1.tgz#8c678f35fb6639573cc106c59546e1187f191af6"
+  integrity sha512-CUDkAvEu/Z2xpY9KJC0Y5//nJ3FWSoOB1bml5fJVfmHSzcwU5JJ2deop1JgFGrOyIK2NYWKsiLRgONpLnkuEAA==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dismissable" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/popper" "0.81.1"
+    "@zag-js/rect-utils" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/number-input@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/number-input/-/number-input-0.81.1.tgz#a5d1fd136ae3cc1a50ae9112e20e0fa69cb24a0c"
+  integrity sha512-NBtSgYcA8lbHC1Wn+XKXcy22qA6JBKOXxVUPuMl8RIDNPbIG5MmU1wa4XwvvvpPKdoaXvAROUiP9MgPAJgACoQ==
   dependencies:
     "@internationalized/number" "3.6.0"
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/form-utils" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/pagination@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/pagination/-/pagination-0.81.0.tgz#35d90c24516c942dd9c5d7464fc8c6e283ae3ab1"
-  integrity sha512-Obv+xsJT+FFXJB+j351oEonusvWaDD94FqaWMXLIlVu6+U/LpLLOo6fYN3RXBx4n9d8iDWaXkSxEls1JqGcG4w==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/pin-input@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/pin-input/-/pin-input-0.81.0.tgz#d26ba9cef9738b341af353a92b4e7c3bb02ee195"
-  integrity sha512-YDpiIoLouV2Lsp9oKL1Elvh0ZzhBggtrcU6r5wgdF/Rhf4yaiRn3EICyW9bnA6xjXRYVJmKwpErfyVcg0/4CcA==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/form-utils" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/popover@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/popover/-/popover-0.81.0.tgz#1cfb19d901acae5326c33ad49e243d3eb974fbe0"
-  integrity sha512-YErRLwY0N9BWXHyiaZskViw2xFv0IWY+14vhTP+0BhH+0gjcaCzRlmN39NrUulWzNeNbQntJz26JfwNN7grBrw==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/aria-hidden" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dismissable" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/focus-trap" "0.81.0"
-    "@zag-js/popper" "0.81.0"
-    "@zag-js/remove-scroll" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/popper@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/popper/-/popper-0.81.0.tgz#f9ecec2aa7eceade162f729c70dd8e74a2db6b4f"
-  integrity sha512-AWprmQK70MbTs85DFSLqHIPbrKQdDc34DEtnnY4XOIEfdYAoygAmwp5o06x4ILzRLusbPXp2CQYwM8UZJq4iPw==
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/form-utils" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/pagination@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/pagination/-/pagination-0.81.1.tgz#071c6957794979ddec44ea9873311937634949fe"
+  integrity sha512-ynHXkAA/LLjRvlShr+e288sB0b1mP9s6rZItPnrbs7iSopGH5C+T6yqTuBPhSKTQRL36ixw6rjbI0TusnXhlvw==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/pin-input@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/pin-input/-/pin-input-0.81.1.tgz#92cf9bd12338502a26ed4efd4870497cbcd763d5"
+  integrity sha512-+oUdY+LISM1NLHrMax/wiuEhYjRAAGKZT8xY/6g4C464Xqahjc2GNQjpoJ2V2S7N7vn7Prw4m+6rbe4TWAr1Pw==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/form-utils" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/popover@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/popover/-/popover-0.81.1.tgz#6a739f2de0dc3e2d4006927a45d1b106a96e7876"
+  integrity sha512-rL+6buqokxxAwCzPFmKt6p7G07zdH34ix1n1MhUVStllU7e/1Kho/bL7qeELFTIJDcgmmKBRj7sa8VJOTj0uJQ==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/aria-hidden" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dismissable" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/focus-trap" "0.81.1"
+    "@zag-js/popper" "0.81.1"
+    "@zag-js/remove-scroll" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/popper@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/popper/-/popper-0.81.1.tgz#1468733031e78e1346c022becf85679f732bd91b"
+  integrity sha512-zTGVu8bVtuGatwrtPdL8jahvWg+wx6N4sWuuCbh7FJbfVfQ849NRgP7im0ar4MLoMFcELkJGmxYQoJ1kbtPVIg==
   dependencies:
     "@floating-ui/dom" "1.6.12"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/presence@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/presence/-/presence-0.81.0.tgz#35cca7b4f8f70a46ddd95e4f07f48b6b3da2cd2a"
-  integrity sha512-qUP6myfQv4+UdC839WtqJhYPwfpEoW8KIsyBUYE7/I/T2AOrIBs5D9mTPHsLOqQDPHzuMQtU8FW9SVbOEDLWeg==
-  dependencies:
-    "@zag-js/core" "0.81.0"
-    "@zag-js/types" "0.81.0"
-
-"@zag-js/progress@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/progress/-/progress-0.81.0.tgz#557751da9e73e57dc87fe9aa8609b077181735b0"
-  integrity sha512-MOH5X3rv3Q3YmvTmK1aiPvS331dSO+9w/3nx4GSwsNmuU1nCyj4iRdbCq3z0ro0I9bOXnfxSjzoakbnruT9MuA==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/qr-code@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/qr-code/-/qr-code-0.81.0.tgz#91ddad41007605fac15ea2fd05315f16dd1240e7"
-  integrity sha512-FUmEnEVV6+Boekzkz7UhkrWqtHuPWsBOICpdBW1lgSF71kAq2gHO6ru7FCm18lcdhc63MYOj8I8JU0ShlfgMIQ==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/presence@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/presence/-/presence-0.81.1.tgz#a0cd1beee251db60ef525d45589d2d2f56fef7e6"
+  integrity sha512-9cWVU8ciU0oG3wJbo6AftDCdpBIGNIk3UqXxAQf4LI//FgnOiYtOmpvl9LXrS1MqEOAwnR6rkCeiNjTmW8O4Mw==
+  dependencies:
+    "@zag-js/core" "0.81.1"
+    "@zag-js/types" "0.81.1"
+
+"@zag-js/progress@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/progress/-/progress-0.81.1.tgz#fde2595eecc6419aafb0eefb23f0bf0949c4b5fa"
+  integrity sha512-mgUt8sub5DOCv2ic5UJqqWsR5tM/HWqMY2ug5LVN3WD9d0ChBzi2TB5nUprunDa1xbGQfk3AyPNYNYnkqHaVLQ==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/qr-code@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/qr-code/-/qr-code-0.81.1.tgz#9c2efd68f82057307350eb674447ced0855f28d7"
+  integrity sha512-aM2e8LwMffUq5PHaBTFseTb5PUmTgD9+avc4R/IqD6bXod/RRc0C5n2BhAsOMJnXFFucq2Wuwofk2dS4FlQ4vQ==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
     proxy-memoize "3.0.1"
     uqr "0.1.2"
 
-"@zag-js/radio-group@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/radio-group/-/radio-group-0.81.0.tgz#9be5b5401536c431197a9104387c52cab477e869"
-  integrity sha512-fpNd8ln/6kU1CMMjC/AXoOz1bLAVRnQtUFtfTJYwkwcKUApRs0m18HMxBKg4P8jP4sBpwOaTqyORTjJnR6cMPg==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/element-rect" "0.81.0"
-    "@zag-js/focus-visible" "0.81.0"
-    "@zag-js/form-utils" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/rating-group@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/rating-group/-/rating-group-0.81.0.tgz#a8674965b6c35360caf56634c2ac923f69e7f66a"
-  integrity sha512-4VRA2ce95NCJ7HO5KeT3TJF6NvlEOPjx7sj7XMmT1zMUr4OfgMQUgXQqKMmRFbl9wyul4qy8pncbYgggIR8G/Q==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/form-utils" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/react@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/react/-/react-0.81.0.tgz#67525e1c5b59b7f2ad6ed08190819aa54c5787d2"
-  integrity sha512-GQi80lBK7UtiERsdAryOiF0HIHkpXVMIxYpgI2dlTzwr10mVUPiPRaTWhysz8X73eFq76O1TKg7930zjyv3nng==
-  dependencies:
-    "@zag-js/core" "0.81.0"
-    "@zag-js/store" "0.81.0"
-    "@zag-js/types" "0.81.0"
+"@zag-js/radio-group@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/radio-group/-/radio-group-0.81.1.tgz#80330a81b28e312578e5b369afcebd7d86861155"
+  integrity sha512-EOE9Usqf2ih6j7VqwtRak1Gq2WkMOaTh3xAgFSIpId5gI5lmbx5IPjyyufp9XZJzn6LOkHRViMHllGA9d1A2Ig==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/element-rect" "0.81.1"
+    "@zag-js/focus-visible" "0.81.1"
+    "@zag-js/form-utils" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/rating-group@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/rating-group/-/rating-group-0.81.1.tgz#207968e80c0decae267e5b6d5c03b344dd855320"
+  integrity sha512-9MbeNVQeLDw/PppnCrJo7I9UOGzMCstzfPyyM3Yrpt8KN+hP8h2nHW1JHUvXQ9OslJWjKLnCLxJReEJxGxNdJQ==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/form-utils" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/react@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/react/-/react-0.81.1.tgz#434fe00aa6dd67a89edc99a6f16a74fb6242ae7d"
+  integrity sha512-fEBk2ejKCYDiHLEbNB6B+WgtzfigvKLP8Q3RSVc/IP9y6DkdztdWGZ80GBB/7cRdcbBOBZGK0ZEEi76iSC5YVg==
+  dependencies:
+    "@zag-js/core" "0.81.1"
+    "@zag-js/store" "0.81.1"
+    "@zag-js/types" "0.81.1"
     proxy-compare "3.0.1"
 
-"@zag-js/rect-utils@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/rect-utils/-/rect-utils-0.81.0.tgz#7e20af37e81e6cfd85b88d8f4af79b03add63f93"
-  integrity sha512-np49jSYgUvkzD/quG2oNeNe/+XZ4ArXeNvGrKKG6sH6ZPqTg5tyE6dII9HtWhrNH7d2xqSWROJoFrdYRt8EFMA==
-
-"@zag-js/remove-scroll@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/remove-scroll/-/remove-scroll-0.81.0.tgz#b6db89cef746885c4ea70e9f9da830187a85ce87"
-  integrity sha512-XI/TRVPTFqAFhkBIP8Zq1uBNwq0kHArxJoZRwvoYHVs4q7EJk+48pZlMTblsKeTT06NvdIHwXprnx4Y57JL0mg==
-  dependencies:
-    "@zag-js/dom-query" "0.81.0"
-
-"@zag-js/scroll-snap@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/scroll-snap/-/scroll-snap-0.81.0.tgz#c47be69887cff05710c0a31af7b0e8a1a562eb40"
-  integrity sha512-xvq3+4Rs4WNMXbi0B9f2K4cLtVmOoiV/V3jId8tzuJ51ot9VItB9uh/+lf2a9Z0o/f6dHhBi3TBC1IxOeYr7QQ==
-  dependencies:
-    "@zag-js/dom-query" "0.81.0"
-
-"@zag-js/select@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/select/-/select-0.81.0.tgz#2fdfb8a7a6f47d6a724ed365c446068d78898273"
-  integrity sha512-nB9nypR7axfmnUeJlE80u47ECYUlODlRg6N519vDqem+qhC8PL353DsFDzwTRveqlPB/NasenIlbk2f1KbjXcA==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/collection" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dismissable" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/form-utils" "0.81.0"
-    "@zag-js/popper" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/signature-pad@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/signature-pad/-/signature-pad-0.81.0.tgz#a6d172ad49727956c3bb07e2f5b8e247302bf14c"
-  integrity sha512-NEhu4axMUohi+IIVuoiANPvRSjf/9eRPwBwXe4NvisopXPQhf+jaEjt2fXoISPby7Rkb22mW2SM4oVxfUt6dpg==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
+"@zag-js/rect-utils@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/rect-utils/-/rect-utils-0.81.1.tgz#e9e3979c9ddbf21e6f57e2f1c1d01a65e9e9a034"
+  integrity sha512-3BkNYhEYZYBk770EUiM/aZ9k1HJg9FaWKOHXGpfZpndlqjUtLLMehej7752KFcpZaDRtUZ3Po1WXq0sIgwEtxw==
+
+"@zag-js/remove-scroll@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/remove-scroll/-/remove-scroll-0.81.1.tgz#50faf1b996b99b0634fd21108dbc762deedce81e"
+  integrity sha512-ONcWwEAAa3W9kYTHKoILGlFPJQ8XHvXkaVeYA+t8IlCA5pK2cS7yGA8ItyQUFFbJu1k1es53DQESXqZHtOoWTQ==
+  dependencies:
+    "@zag-js/dom-query" "0.81.1"
+
+"@zag-js/scroll-snap@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/scroll-snap/-/scroll-snap-0.81.1.tgz#ed6702da9118122e2aa95da234aa7538bd8f7d0e"
+  integrity sha512-eRbyvLxPI+rRkgd2GYCz9xeesucFgpqa9NPI3ERTibSsMSTOgZsYogi8vn6rXfW/YGS4xgiXZbVSMRgEeLPijQ==
+  dependencies:
+    "@zag-js/dom-query" "0.81.1"
+
+"@zag-js/select@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/select/-/select-0.81.1.tgz#857b57b2d8cfb079746d1cb5198da348d66d536f"
+  integrity sha512-eYCJoxUfwXBMSI/+GLZCzmT3P2UMInKztRt064bW+pLMIHhsHCoUKoNNzDFFx9q27HKgXk6pZIp4/5ZnxPF4WQ==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/collection" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dismissable" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/form-utils" "0.81.1"
+    "@zag-js/popper" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/signature-pad@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/signature-pad/-/signature-pad-0.81.1.tgz#13d70b39a1f45e054199c0fb7a3b148dab418c17"
+  integrity sha512-wHFeZuwoJWG5/Tk5u8T7M+ENg9nkBf8md14huW8MKVcfkLNi+a/z2B1KzodWnn4mekxUMEKAXhOdmELqqAHSOg==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
     perfect-freehand "^1.2.2"
 
-"@zag-js/slider@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/slider/-/slider-0.81.0.tgz#4f7d8a1279bda9e8a664254ab50ba8d07810397d"
-  integrity sha512-QNw3vpr+Rb7FTAQYspVdKnlzrlwk/rJlrfJ98AHTo7EkNB/VkUlCepTFqr/m175SENFj7xMyPV3wlAFrwNVC4w==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/element-size" "0.81.0"
-    "@zag-js/form-utils" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/splitter@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/splitter/-/splitter-0.81.0.tgz#3b8d5f7f02a99c95c96a10eff602de27aa00532d"
-  integrity sha512-2Vn2ZCtqD2RLWliVB4rEshdKbKEVO/jyNcgGQIJHWGVw62uTqetSqf16paN7exC64AgHWxe616wHzHyX+x5GNQ==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/steps@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/steps/-/steps-0.81.0.tgz#ae012ada8ca2b4fa19bff127fb0d14be9c74afaf"
-  integrity sha512-tftIw/8mLDLCGdFTU50M0hqymDZ3K6dmM0cUZv5FyJEcH/ox2tHiLvQNWlutfZwSFkwIhtus+kieMskGWMcUOQ==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/store@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/store/-/store-0.81.0.tgz#5913ee3b5df1ccfaaa10e21038d8647fce6ffd09"
-  integrity sha512-TKigOBEl1RPXqzA5mKVnUZVXBaqxp8mJl+bPGf23+at5GgZAjKsMzNQReQYHkl0FhcakHew7dlZBvcApsMeYag==
+"@zag-js/slider@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/slider/-/slider-0.81.1.tgz#58795152582ca9cacd7a948da38e8c460404f5c0"
+  integrity sha512-1yPml/nIWpiijEmUxYzlPOIi6v2r+URhBM9giEG9mwaUU9uWtYrEQKSQVQChkPlW8xoNxtqtG6wNjEjekWDqfw==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/element-size" "0.81.1"
+    "@zag-js/form-utils" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/splitter@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/splitter/-/splitter-0.81.1.tgz#bde068ae571df0048b6fe735606aa0a3b4a117d4"
+  integrity sha512-KlSIsCZWL1zLfqE05xyGYVKxu8OiQ91yVBqsJhuHUPTH0Ww/UQI4sU70yWqePrGi+L+VieMZUia4OFKcmhvljA==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/steps@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/steps/-/steps-0.81.1.tgz#c6c50043030ccb0bd4e3f94fd5020a1666674ff8"
+  integrity sha512-RA/TFqsc0QBgL61R8rWUhawANvZIaXN3nNP6RQ/qcYQpVjCLIC97oDrWvZd//THrMay65wPT4iuOGkBoXLqr5g==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/store@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/store/-/store-0.81.1.tgz#13f23b8f45d8c00573f046578c369d240655b2c2"
+  integrity sha512-IsRnK6G/I5Sx8kxLC/PNUmxduOeLsrtgWuw1FGu1x88BgE+/akmL9fZoGdQds+TFNPESTtqWQxiTFm1w3nn/aQ==
   dependencies:
     proxy-compare "3.0.1"
 
-"@zag-js/switch@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/switch/-/switch-0.81.0.tgz#a9ae68ba2cd479362147662325cf2f3ea4a05574"
-  integrity sha512-jkXF2eOFNZ8SD0diuJ6eUM7LY0aDsrrpVtPfhVqjN8vhpuHpi0yckd8GBSM6O7nyp7eZFrLrv2zi5f32freEaw==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/focus-visible" "0.81.0"
-    "@zag-js/form-utils" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/tabs@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/tabs/-/tabs-0.81.0.tgz#f21e3f68669da4aeed9543ed0b27b72126672fdf"
-  integrity sha512-Jc8m0rHhtEBCdznSniNMU3TWe5IhecXiaHTDta06HCWhvyN7Fgk4XOylUQldL8ilk1x0+8/JAf2NQkj8c9rNIA==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/element-rect" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/tags-input@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/tags-input/-/tags-input-0.81.0.tgz#4c2bcbeb0b2718570255cfe7288189941de6d092"
-  integrity sha512-p7suV/kHYQ3gx5FpfPTa541rfg0tDa+AfjJI7vXrviJ5jyYcv5OZBzsM3xHpRZLUi7p4VZ3LwR4pYtaC4wDieg==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/auto-resize" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/form-utils" "0.81.0"
-    "@zag-js/interact-outside" "0.81.0"
-    "@zag-js/live-region" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/time-picker@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/time-picker/-/time-picker-0.81.0.tgz#13c7322500f3312d611c9bdb22f8efc9b2974f46"
-  integrity sha512-l6cE8oCLQ0fY0q6Iep17pua8Ii7QJK6pNDKgO+HfsiK7jtAYkls0Bi1eB0vv+cCHt7kIFwSXgjDBm5vLkKP6Pg==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dismissable" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/popper" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/timer@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/timer/-/timer-0.81.0.tgz#bc134afc5626d78acbce76808ed53db909e31df2"
-  integrity sha512-i+I4CN/ZxSfDwfbjmcKrjX8VuUKMXE1sQU+aTZo+UaitbpkouCdrt09ru4abtqJEurMz39QmGG51uocJGrx0pw==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/toast@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/toast/-/toast-0.81.0.tgz#560123722c166dc0df9a68f5c8b27641f710a673"
-  integrity sha512-dPxJcRCudOzvAMZ+R/IZADdhmYN7zKb++hEEEPBhYQbgD9ffg0d40XUzCzZ2guLQSQlLwbJTidwyTo33RJwVHw==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dismissable" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/toggle-group@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/toggle-group/-/toggle-group-0.81.0.tgz#3e33f5e91f23d588879339f0c3d6508c6d74f46c"
-  integrity sha512-nWVMonkeLkJOsnWNMIAEx95Pxo9RqblfnyG6VGu2ZhjOtHwoJfSZfNVolSnLoy+m+ztkGWays9fGcQ3uhvyxkA==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/tooltip@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/tooltip/-/tooltip-0.81.0.tgz#4f81355f3a0dc47fce37c200486acf13f534e6aa"
-  integrity sha512-msmEAkkVlCUzMhIei8o3jZ6X87RESHdCV200VmTiSEvsRZdr+DPfQHXmE9vKLHCwtvhxRqDCQa1lGNq03TrD1g==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/focus-visible" "0.81.0"
-    "@zag-js/popper" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/tree-view@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/tree-view/-/tree-view-0.81.0.tgz#8db262ae2394ff247e799583534745ec01543c1a"
-  integrity sha512-3+xkz8qvTXA3uD2bT4upE/brU/Gmhh9dRLD+kD69AKPgnWa9/mXD+tmvpQlYydiWXzhJJ5UD4ATWvrtNPnjmoQ==
-  dependencies:
-    "@zag-js/anatomy" "0.81.0"
-    "@zag-js/collection" "0.81.0"
-    "@zag-js/core" "0.81.0"
-    "@zag-js/dom-query" "0.81.0"
-    "@zag-js/types" "0.81.0"
-    "@zag-js/utils" "0.81.0"
-
-"@zag-js/types@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/types/-/types-0.81.0.tgz#d6874e917b8fffd90a06a6307ce487a59f8d4b09"
-  integrity sha512-Lhunl8BkuntdxPBJS0pZOULYfcHOlLZKEJgHz37nA8hSD9+o8jk3cta91yEijPdd963hME7IAuGUNqbJW+VC/A==
+"@zag-js/switch@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/switch/-/switch-0.81.1.tgz#990a45e6a56b80bc4016619043f90b016ddee711"
+  integrity sha512-2lEOGzVW2bqA2GY7HVg2aKXsQoD0v65K9qVuJiP/9Lpst6JPOw5E6nEZj1xOheluHJVI29R/HBUIw9GU27MroA==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/focus-visible" "0.81.1"
+    "@zag-js/form-utils" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/tabs@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/tabs/-/tabs-0.81.1.tgz#ad6b465cabb87495ddbf9806a88fc11bc34c78fd"
+  integrity sha512-B24xFIfVJRL0nbzp97mqKN1zJKVrL8eXR2TOq+1ZxqrnnUZ5RQNzqo46wFIItRQsHjvbxyuI54KgvL1bp29wiw==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/element-rect" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/tags-input@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/tags-input/-/tags-input-0.81.1.tgz#bbaee5b8edf37e79d987890692c7d66826b78594"
+  integrity sha512-nR5aE0NIaLrz2GQEGN1EkJFJrs53wdrx8cBpRn6qCIuC907fCRRDb8jdamZ51wP6GvRmgqdufuhGtbS7s78v/Q==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/auto-resize" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/form-utils" "0.81.1"
+    "@zag-js/interact-outside" "0.81.1"
+    "@zag-js/live-region" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/time-picker@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/time-picker/-/time-picker-0.81.1.tgz#a45dbb853015bad48e804e51691dc8c4fb56da16"
+  integrity sha512-7iBOfRb7J0IYxOSy1Vbznfnq1ISzrbujbjHNY+PjbEDCA7vCEmI0vGEXHBs4YTkTaW5Sisku1a44Ua1kvHT0Dg==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dismissable" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/popper" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/timer@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/timer/-/timer-0.81.1.tgz#2c73a2b709a63d9051b82b62fc78158e6bf9de77"
+  integrity sha512-BcdSBf+EeQwdKiic0yDFjErCYbwa5vxVWbE7tDHoEXBWeV1xMIjqcxG20qJ2kSxDWjlkx+vpcTnDqvIYnFl5ag==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/toast@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/toast/-/toast-0.81.1.tgz#1e0f6b52c27dbdb0a5f800007ac928c114fc5f44"
+  integrity sha512-v3jEsOcgtl2yIE1kllSccMUlHC87nB7UohFkhVl5gAV2sXMQ2evLna/+DAYlBRYjJogapOW+g69rW4sPX+HZxA==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dismissable" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/toggle-group@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/toggle-group/-/toggle-group-0.81.1.tgz#c82481aaef16162154d48c82e749f24f46065d7b"
+  integrity sha512-x/cpAd/pER/F/pitJ+Rd3RZ02vj8pe17noE7t/1wFyiNRLTi6R4E5fik9yqyFAukLwizxCXpS3rDYIEi7ta70w==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/tooltip@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/tooltip/-/tooltip-0.81.1.tgz#728168010f537bd38f440f27215e3acd350d5fd2"
+  integrity sha512-yNmgLlOh1AN006TD7xTkW/lu45O201g+uEXZhwgCiJsngYmOKNFMJFCUllE3KDR/kxecOFr9UZTVual1IhFxjA==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/focus-visible" "0.81.1"
+    "@zag-js/popper" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/tour@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/tour/-/tour-0.81.1.tgz#ee963a49677d8e66770185f54eb480ff6565f637"
+  integrity sha512-ssKFyZyjFmRpvmlKSOEeo/yb01oCkF8XKOoYFiCgz7Pm9Guaf4rwEWbQBpzlKYaj2zZ8L6+7bOWVgt0f+ZngNw==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dismissable" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/focus-trap" "0.81.1"
+    "@zag-js/interact-outside" "0.81.1"
+    "@zag-js/popper" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/tree-view@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/tree-view/-/tree-view-0.81.1.tgz#7668ff9945b1114b304c7a787600404774d8da6c"
+  integrity sha512-ks2OtbJXvvmC3UXUyaFQKO+LQDopNhenJ2mV+Gqs3RNqO/5EViIWbiZN6s2bsSaduQhfaCTqk4pFkeBhYIluhQ==
+  dependencies:
+    "@zag-js/anatomy" "0.81.1"
+    "@zag-js/collection" "0.81.1"
+    "@zag-js/core" "0.81.1"
+    "@zag-js/dom-query" "0.81.1"
+    "@zag-js/types" "0.81.1"
+    "@zag-js/utils" "0.81.1"
+
+"@zag-js/types@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/types/-/types-0.81.1.tgz#2ae35fe21d7760c5d62466566dfb3db88053c1a5"
+  integrity sha512-+T9H99wHn7snO0LwZ9PHX9o4ZAz3Y80Z3nlEFCWyGwFjRwrmZxoGN016pQI+C9HUVe+qXDN5oXysV1N/1/6O0A==
   dependencies:
     csstype "3.1.3"
 
-"@zag-js/utils@0.81.0":
-  version "0.81.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/utils/-/utils-0.81.0.tgz#f8b5b645b2629e0d45f45a199e9333f9a083cecd"
-  integrity sha512-Lc24Y1lDCUJH4vb8ft1wUwy9x1fK5HcSI0ltnrnQFL7rSL8gIc+U13tK2eg5GMOL6oetQFkWI9xP2kyJTHonAA==
+"@zag-js/utils@0.81.1":
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/@zag-js/utils/-/utils-0.81.1.tgz#c8101d312c977b14788e0596776658463ee14cb7"
+  integrity sha512-lWpU6n6wKhK6GkgyE3IdEChY5AjwmrAqdr9rc4F2qlb/lEp/TFbKOn2TOiFHPLd2YzE4jElFQL7+/7CDK3qFPg==
 
 abab@^2.0.6:
   version "2.0.6"