From c489fabb778efe9fe9ad61103b6776dc571e3e73 Mon Sep 17 00:00:00 2001
From: Edouard DUPIN <yui.heero@gmail.com>
Date: Fri, 24 Jan 2025 21:57:04 +0100
Subject: [PATCH] [theme and reciepice

---
 front/package.json                            |     2 -
 front/pnpm-lock.yaml                          |    36 -
 front/src/App.tsx                             |     4 +-
 front/src/components/TopBar/TopBar.tsx        |    11 +-
 front/src/components/album/DisplayAlbum.tsx   |    14 +-
 .../components/contextMenu/ContextMenu.tsx    |    26 +-
 front/src/components/form/FormCovers.tsx      |     6 +-
 front/src/components/popup/AlbumEditPopUp.tsx |     7 +-
 .../src/components/popup/ArtistEditPopUp.tsx  |     4 +-
 .../src/components/select/SelectMultiple.tsx  |     2 +-
 .../components/track/DisplayTrackSkeleton.tsx |     2 +-
 front/src/components/ui/avatar.tsx            |    74 +
 front/src/components/ui/button.tsx            |    40 +
 front/src/components/ui/checkbox.tsx          |    25 +
 front/src/components/ui/color-mode.tsx        |    62 +-
 front/src/components/ui/field.tsx             |    33 +
 front/src/components/ui/input-group.tsx       |    53 +
 front/src/components/ui/popover.tsx           |    59 +
 front/src/components/ui/provider.tsx          |    15 +
 front/src/components/ui/radio.tsx             |    24 +
 front/src/components/ui/slider.tsx            |    82 +
 front/src/components/ui/tooltip.tsx           |    46 +
 front/src/errors/ErrorBoundary.tsx            |     7 +-
 front/src/scene/album/AlbumsPage.tsx          |     2 +-
 .../scene/artist/ArtistAlbumDetailPage.tsx    |     1 -
 front/src/scene/artist/ArtistDetailPage.tsx   |     2 +-
 front/src/scene/artist/ArtistsPage.tsx        |     2 +-
 front/src/scene/gender/GendersPage.tsx        |     2 +-
 front/src/scene/home/HomePage.tsx             |     2 +-
 front/src/theme/config sample.ts              | 10888 ++++++++++++++++
 front/src/theme/foundations/colors.ts         |    38 +-
 front/src/theme/foundations/shadows.ts        |    30 +-
 front/src/theme/recipes/button.ts             |    10 +-
 front/src/theme/recipes/index.ts              |     2 +-
 front/src/theme/styleguide/colors.stories.tsx |     2 +-
 front/src/theme/styles.ts                     |     4 -
 front/src/theme/theme.ts                      |   129 +-
 37 files changed, 11601 insertions(+), 147 deletions(-)
 create mode 100644 front/src/components/ui/avatar.tsx
 create mode 100644 front/src/components/ui/button.tsx
 create mode 100644 front/src/components/ui/checkbox.tsx
 create mode 100644 front/src/components/ui/field.tsx
 create mode 100644 front/src/components/ui/input-group.tsx
 create mode 100644 front/src/components/ui/popover.tsx
 create mode 100644 front/src/components/ui/provider.tsx
 create mode 100644 front/src/components/ui/radio.tsx
 create mode 100644 front/src/components/ui/slider.tsx
 create mode 100644 front/src/components/ui/tooltip.tsx
 create mode 100644 front/src/theme/config sample.ts
 delete mode 100644 front/src/theme/styles.ts

diff --git a/front/package.json b/front/package.json
index 706a554..6a3e368 100644
--- a/front/package.json
+++ b/front/package.json
@@ -29,11 +29,9 @@
     "*.{ts,tsx,js,jsx,json}": "prettier --write"
   },
   "dependencies": {
-    "@chakra-ui/anatomy": "2.3.4",
     "@chakra-ui/cli": "3.3.1",
     "@chakra-ui/react": "3.3.1",
     "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.0",
     "allotment": "1.20.2",
     "css-mediaquery": "0.1.2",
     "dayjs": "1.11.13",
diff --git a/front/pnpm-lock.yaml b/front/pnpm-lock.yaml
index 63d780a..5a43b9b 100644
--- a/front/pnpm-lock.yaml
+++ b/front/pnpm-lock.yaml
@@ -8,9 +8,6 @@ importers:
 
   .:
     dependencies:
-      '@chakra-ui/anatomy':
-        specifier: 2.3.4
-        version: 2.3.4
       '@chakra-ui/cli':
         specifier: 3.3.1
         version: 3.3.1(@chakra-ui/react@3.3.1(@emotion/react@11.14.0(@types/react@18.3.8)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
@@ -20,9 +17,6 @@ importers:
       '@emotion/react':
         specifier: 11.14.0
         version: 11.14.0(@types/react@18.3.8)(react@18.3.1)
-      '@emotion/styled':
-        specifier: 11.14.0
-        version: 11.14.0(@emotion/react@11.14.0(@types/react@18.3.8)(react@18.3.1))(@types/react@18.3.8)(react@18.3.1)
       allotment:
         specifier: 1.20.2
         version: 1.20.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -378,9 +372,6 @@ packages:
   '@bcoe/v8-coverage@0.2.3':
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
 
-  '@chakra-ui/anatomy@2.3.4':
-    resolution: {integrity: sha512-fFIYN7L276gw0Q7/ikMMlZxP7mvnjRaWJ7f3Jsf9VtDOi6eAYIBRrhQe6+SZ0PGmoOkRaBc7gSE5oeIbgFFyrw==}
-
   '@chakra-ui/cli@3.3.1':
     resolution: {integrity: sha512-TTpGVT4RuajxzYjMP95Ba3HU052cmdrYgru77ZGD+IDb/HLATjpXNViFAn1R+ITMCxa4v0zqYEWLY9Ex2L090A==}
     hasBin: true
@@ -444,16 +435,6 @@ packages:
   '@emotion/sheet@1.4.0':
     resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==}
 
-  '@emotion/styled@11.14.0':
-    resolution: {integrity: sha512-XxfOnXFffatap2IyCeJyNov3kiDQWoR08gPUQxvbL7fxKryGBKUZUkG6Hz48DZwVrJSVh9sJboyV1Ds4OW6SgA==}
-    peerDependencies:
-      '@emotion/react': ^11.0.0-rc.0
-      '@types/react': '*'
-      react: '>=16.8.0'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   '@emotion/unitless@0.10.0':
     resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==}
 
@@ -5469,8 +5450,6 @@ snapshots:
 
   '@bcoe/v8-coverage@0.2.3': {}
 
-  '@chakra-ui/anatomy@2.3.4': {}
-
   '@chakra-ui/cli@3.3.1(@chakra-ui/react@3.3.1(@emotion/react@11.14.0(@types/react@18.3.8)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))':
     dependencies:
       '@chakra-ui/react': 3.3.1(@emotion/react@11.14.0(@types/react@18.3.8)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -5595,21 +5574,6 @@ snapshots:
 
   '@emotion/sheet@1.4.0': {}
 
-  '@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.8)(react@18.3.1))(@types/react@18.3.8)(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@emotion/babel-plugin': 11.13.5
-      '@emotion/is-prop-valid': 1.3.1
-      '@emotion/react': 11.14.0(@types/react@18.3.8)(react@18.3.1)
-      '@emotion/serialize': 1.3.3
-      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@18.3.1)
-      '@emotion/utils': 1.4.2
-      react: 18.3.1
-    optionalDependencies:
-      '@types/react': 18.3.8
-    transitivePeerDependencies:
-      - supports-color
-
   '@emotion/unitless@0.10.0': {}
 
   '@emotion/use-insertion-effect-with-fallbacks@1.2.0(react@18.3.1)':
diff --git a/front/src/App.tsx b/front/src/App.tsx
index 4c119c0..efb8056 100644
--- a/front/src/App.tsx
+++ b/front/src/App.tsx
@@ -56,6 +56,7 @@ const AppEnvHint = () => {
   return (
     <>
       <Box
+        as="button"
         zIndex="100000"
         position="fixed"
         top="0"
@@ -63,7 +64,6 @@ const AppEnvHint = () => {
         insetEnd="0"
         h="2px"
         bg="warning.400"
-        as="button"
         cursor="pointer"
         data-test-id="devtools"
         onClick={dialog.onOpen}
@@ -84,7 +84,7 @@ const AppEnvHint = () => {
         >
           {envName.join(' : ')}
         </Text>
-      </Box>
+      </Box >
       <DialogRoot open={dialog.open} onOpenChange={dialog.onClose}>
         <DialogContent>
           <DialogHeader>Outils développeurs</DialogHeader>
diff --git a/front/src/components/TopBar/TopBar.tsx b/front/src/components/TopBar/TopBar.tsx
index 4527a82..91a392b 100644
--- a/front/src/components/TopBar/TopBar.tsx
+++ b/front/src/components/TopBar/TopBar.tsx
@@ -38,7 +38,14 @@ import { Button } from '../ui/themed';
 export const TOP_BAR_HEIGHT = '50px';
 
 export const BUTTON_TOP_BAR_PROPERTY = {
-  theme: '@menu',
+  bg: 'back.100',
+  color: 'brand.900',
+  borderRadius: 0,
+  border: 0,
+  _hover: { background: 'back.300' },
+  _focus: { border: 'none' },
+  fontSize: '20px',
+  textTransform: 'uppercase',
   height: TOP_BAR_HEIGHT,
 };
 
@@ -143,7 +150,7 @@ export const TopBar = ({ title, children }: TopBarProps) => {
           <MenuRoot>
             <MenuTrigger asChild>
               <IconButton
-                as={IconButton}
+                asChild
                 aria-label="Options"
                 {...BUTTON_TOP_BAR_PROPERTY}
                 width={TOP_BAR_HEIGHT}
diff --git a/front/src/components/album/DisplayAlbum.tsx b/front/src/components/album/DisplayAlbum.tsx
index e9d670b..fb52694 100644
--- a/front/src/components/album/DisplayAlbum.tsx
+++ b/front/src/components/album/DisplayAlbum.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from '@chakra-ui/react';
+import { Flex, Span, Text } from '@chakra-ui/react';
 import { LuDisc3 } from 'react-icons/lu';
 
 import { Album } from '@/back-api';
@@ -25,7 +25,7 @@ export const DisplayAlbum = ({ dataAlbum }: DisplayAlbumProps) => {
         data={dataAlbum?.covers}
         size={BASE_WRAP_ICON_SIZE}
         flex={1}
-      // TODO: iconEmpty={LuDisc3}
+        iconEmpty={<LuDisc3 />}
       />
       <Flex
         direction="column"
@@ -36,8 +36,7 @@ export const DisplayAlbum = ({ dataAlbum }: DisplayAlbumProps) => {
         overflowX="hidden"
         flex={1}
       >
-        <Text
-          as="span"
+        <Span
           // align="left"
           fontSize="20px"
           fontWeight="bold"
@@ -47,9 +46,8 @@ export const DisplayAlbum = ({ dataAlbum }: DisplayAlbumProps) => {
         // noOfLines={[1, 2]}
         >
           {dataAlbum?.name}
-        </Text>
-        <Text
-          as="span"
+        </Span>
+        <Span
           // align="left"
           fontSize="15px"
           userSelect="none"
@@ -58,7 +56,7 @@ export const DisplayAlbum = ({ dataAlbum }: DisplayAlbumProps) => {
         // noOfLines={1}
         >
           {countTracksOfAnAlbum} track{countTracksOfAnAlbum >= 1 && 's'}
-        </Text>
+        </Span>
       </Flex>
     </Flex>
   );
diff --git a/front/src/components/contextMenu/ContextMenu.tsx b/front/src/components/contextMenu/ContextMenu.tsx
index 482c365..76a24ae 100644
--- a/front/src/components/contextMenu/ContextMenu.tsx
+++ b/front/src/components/contextMenu/ContextMenu.tsx
@@ -1,12 +1,9 @@
 import { useState } from 'react';
 
-import {
-  IconButton,
-} from '@chakra-ui/react';
 import { LuMenu } from 'react-icons/lu';
 import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '../ui/menu';
-import { Button } from '../ui/themed';
-import { customVariant } from '@/theme/recipes/button';
+import { Button } from '../ui/button';
+
 
 export type MenuElement = {
   name: string;
@@ -17,21 +14,6 @@ export type ContextMenuProps = {
   elements?: MenuElement[];
 };
 
-const theme = {
-  plop: {
-    bg: { _light: 'red', _dark: 'brand.300', _pink: "orange" },
-    _hover: { bg: { _light: 'green', _dark: 'brand.400', _pink: "black" } },
-    // bg: { _light: 'brand.600', _dark: 'brand.300' },
-    // _hover: { bg: { _light: 'brand.700', _dark: 'brand.400' } },
-    /*
-    bgActive: { _light: 'brand.600', _dark: 'brand.300' },
-    color: { _light: 'white', _dark: 'brand.900' },
-    colorHover: { _light: 'brand.800', _dark: 'brand.100' },
-    boxShadowHover: 'outline-over'
-    */
-  }
-};
-
 export const ContextMenu = ({ elements }: ContextMenuProps) => {
   if (!elements) {
     return <></>;
@@ -40,9 +22,11 @@ export const ContextMenu = ({ elements }: ContextMenuProps) => {
     <MenuRoot
       data-testid="context-menu">
       <MenuTrigger asChild
+        marginY="auto"
+        marginRight="4px"
         data-testid="context-menu_trigger">
         {/* This is very stupid, we need to set as span to prevent a button in button... WTF */}
-        <Button {...theme.plop} /*theme="@primary"*/>
+        <Button variant="ghost" color="brand.500">
           <LuMenu />
         </Button>
       </MenuTrigger>
diff --git a/front/src/components/form/FormCovers.tsx b/front/src/components/form/FormCovers.tsx
index 547e12a..254efcc 100644
--- a/front/src/components/form/FormCovers.tsx
+++ b/front/src/components/form/FormCovers.tsx
@@ -104,14 +104,13 @@ export const CenterIcon = ({
   return (
     <Box position="relative" w={sizeIcon} h={sizeIcon} flex="none" {...rest}>
       <Box
-        as={IconEl}
         w={sizeIcon}
         h={sizeIcon}
         position="absolute"
         top="50%"
         left="50%"
         transform="translate(-50%, -50%)"
-      />
+      >{IconEl}</Box>
     </Box>
   );
 };
@@ -150,14 +149,13 @@ export const FormCovers = ({
             <Box width="125px" height="125px" position="relative">
               <Box width="125px" height="125px" position="absolute">
                 <CenterIcon
-                  icon={MdHighlightOff}
                   width="125px"
                   sizeIcon="100%"
                   zIndex="+1"
                   color="#00000020"
                   _hover={{ color: 'red' }}
                   onClick={() => onRemove && onRemove(index)}
-                />
+                ><MdHighlightOff /></CenterIcon>
               </Box>
               <Image loading="lazy" src={data} boxSize="full" />
             </Box>
diff --git a/front/src/components/popup/AlbumEditPopUp.tsx b/front/src/components/popup/AlbumEditPopUp.tsx
index 1ba321d..c0ddd3f 100644
--- a/front/src/components/popup/AlbumEditPopUp.tsx
+++ b/front/src/components/popup/AlbumEditPopUp.tsx
@@ -25,7 +25,8 @@ import { useServiceContext } from '@/service/ServiceContext';
 import { useCountTracksWithAlbumId } from '@/service/Track';
 import { isNullOrUndefined } from '@/utils/validator';
 import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
-import { Button } from '../ui/themed';
+import { Button } from '../ui/button';
+
 
 export type AlbumEditPopUpProps = {};
 
@@ -168,7 +169,9 @@ export const AlbumEditPopUp = ({ }: AlbumEditPopUpProps) => {
                 <Button
                   onClick={disclosure.onOpen}
                   marginRight="auto"
-                  theme="@danger"
+                  //theme="@danger"
+                  variant="outline"
+                  colorScheme=""
                   disabled={countTracksOfAnAlbum !== 0}
                 >
                   <MdDeleteForever /> Remove Media
diff --git a/front/src/components/popup/ArtistEditPopUp.tsx b/front/src/components/popup/ArtistEditPopUp.tsx
index 75b61e4..6d6f5f0 100644
--- a/front/src/components/popup/ArtistEditPopUp.tsx
+++ b/front/src/components/popup/ArtistEditPopUp.tsx
@@ -4,6 +4,7 @@ import {
   Flex,
   Text,
   useDisclosure,
+  Button,
 } from '@chakra-ui/react';
 import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
 import {
@@ -25,7 +26,7 @@ import { useArtistService, useSpecificArtist } from '@/service/Artist';
 import { useServiceContext } from '@/service/ServiceContext';
 import { useCountTracksOfAnArtist } from '@/service/Track';
 import { isNullOrUndefined } from '@/utils/validator';
-import { Button } from '../ui/themed';
+//import { Button } from '../ui/themed';
 
 export type ArtistEditPopUpProps = {};
 
@@ -217,6 +218,7 @@ export const ArtistEditPopUp = ({ }: ArtistEditPopUpProps) => {
           <Button
             onClick={() => setAdmin((value) => !value)}
             marginRight="auto"
+            variant="@danger"
           >
             {admin ? (
               <>
diff --git a/front/src/components/select/SelectMultiple.tsx b/front/src/components/select/SelectMultiple.tsx
index 0f6a14b..f5ab038 100644
--- a/front/src/components/select/SelectMultiple.tsx
+++ b/front/src/components/select/SelectMultiple.tsx
@@ -109,7 +109,7 @@ export const SelectMultiple = ({
   return (
     <Flex direction="column" width="full" gap="0px">
       {selectedOptions && (
-        <HStack wrap="wrap" /*spacing="5px"*/ justify="left" width="full" marginBottom="2px">
+        <HStack wrap="wrap" gap="5px" justify="left" width="full" marginBottom="2px">
           {selectedOptions.map((data) => (
             <Flex align="flex-start" key={data[keyKey]}>
               <Tag.Root
diff --git a/front/src/components/track/DisplayTrackSkeleton.tsx b/front/src/components/track/DisplayTrackSkeleton.tsx
index c47b334..b2228c3 100644
--- a/front/src/components/track/DisplayTrackSkeleton.tsx
+++ b/front/src/components/track/DisplayTrackSkeleton.tsx
@@ -20,7 +20,7 @@ export const DisplayTrackSkeleton = () => {
         {/* <SkeletonText
           skeletonHeight="20px"
           noOfLines={1}
-          spacing={0}
+          gap={0}
           width="50%"
           marginY="auto"
         /> */}
diff --git a/front/src/components/ui/avatar.tsx b/front/src/components/ui/avatar.tsx
new file mode 100644
index 0000000..cd84664
--- /dev/null
+++ b/front/src/components/ui/avatar.tsx
@@ -0,0 +1,74 @@
+"use client"
+
+import type { GroupProps, SlotRecipeProps } from "@chakra-ui/react"
+import { Avatar as ChakraAvatar, Group } from "@chakra-ui/react"
+import * as React from "react"
+
+type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>
+
+export interface AvatarProps extends ChakraAvatar.RootProps {
+  name?: string
+  src?: string
+  srcSet?: string
+  loading?: ImageProps["loading"]
+  icon?: React.ReactElement
+  fallback?: React.ReactNode
+}
+
+export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
+  function Avatar(props, ref) {
+    const { name, src, srcSet, loading, icon, fallback, children, ...rest } =
+      props
+    return (
+      <ChakraAvatar.Root ref={ref} {...rest}>
+        <AvatarFallback name={name} icon={icon}>
+          {fallback}
+        </AvatarFallback>
+        <ChakraAvatar.Image src={src} srcSet={srcSet} loading={loading} />
+        {children}
+      </ChakraAvatar.Root>
+    )
+  },
+)
+
+interface AvatarFallbackProps extends ChakraAvatar.FallbackProps {
+  name?: string
+  icon?: React.ReactElement
+}
+
+const AvatarFallback = React.forwardRef<HTMLDivElement, AvatarFallbackProps>(
+  function AvatarFallback(props, ref) {
+    const { name, icon, children, ...rest } = props
+    return (
+      <ChakraAvatar.Fallback ref={ref} {...rest}>
+        {children}
+        {name != null && children == null && <>{getInitials(name)}</>}
+        {name == null && children == null && (
+          <ChakraAvatar.Icon asChild={!!icon}>{icon}</ChakraAvatar.Icon>
+        )}
+      </ChakraAvatar.Fallback>
+    )
+  },
+)
+
+function getInitials(name: string) {
+  const names = name.trim().split(" ")
+  const firstName = names[0] != null ? names[0] : ""
+  const lastName = names.length > 1 ? names[names.length - 1] : ""
+  return firstName && lastName
+    ? `${firstName.charAt(0)}${lastName.charAt(0)}`
+    : firstName.charAt(0)
+}
+
+interface AvatarGroupProps extends GroupProps, SlotRecipeProps<"avatar"> {}
+
+export const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
+  function AvatarGroup(props, ref) {
+    const { size, variant, borderless, ...rest } = props
+    return (
+      <ChakraAvatar.PropsProvider value={{ size, variant, borderless }}>
+        <Group gap="0" spaceX="-3" ref={ref} {...rest} />
+      </ChakraAvatar.PropsProvider>
+    )
+  },
+)
diff --git a/front/src/components/ui/button.tsx b/front/src/components/ui/button.tsx
new file mode 100644
index 0000000..21d5f4b
--- /dev/null
+++ b/front/src/components/ui/button.tsx
@@ -0,0 +1,40 @@
+import type { ButtonProps as ChakraButtonProps } from "@chakra-ui/react"
+import {
+  AbsoluteCenter,
+  Button as ChakraButton,
+  Span,
+  Spinner,
+} from "@chakra-ui/react"
+import * as React from "react"
+
+interface ButtonLoadingProps {
+  loading?: boolean
+  loadingText?: React.ReactNode
+}
+
+export interface ButtonProps extends ChakraButtonProps, ButtonLoadingProps {}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(props, ref) {
+    const { loading, disabled, loadingText, children, ...rest } = props
+    return (
+      <ChakraButton disabled={loading || disabled} ref={ref} {...rest}>
+        {loading && !loadingText ? (
+          <>
+            <AbsoluteCenter display="inline-flex">
+              <Spinner size="inherit" color="inherit" />
+            </AbsoluteCenter>
+            <Span opacity={0}>{children}</Span>
+          </>
+        ) : loading && loadingText ? (
+          <>
+            <Spinner size="inherit" color="inherit" />
+            {loadingText}
+          </>
+        ) : (
+          children
+        )}
+      </ChakraButton>
+    )
+  },
+)
diff --git a/front/src/components/ui/checkbox.tsx b/front/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..2a27c2f
--- /dev/null
+++ b/front/src/components/ui/checkbox.tsx
@@ -0,0 +1,25 @@
+import { Checkbox as ChakraCheckbox } from "@chakra-ui/react"
+import * as React from "react"
+
+export interface CheckboxProps extends ChakraCheckbox.RootProps {
+  icon?: React.ReactNode
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+  rootRef?: React.Ref<HTMLLabelElement>
+}
+
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  function Checkbox(props, ref) {
+    const { icon, children, inputProps, rootRef, ...rest } = props
+    return (
+      <ChakraCheckbox.Root ref={rootRef} {...rest}>
+        <ChakraCheckbox.HiddenInput ref={ref} {...inputProps} />
+        <ChakraCheckbox.Control>
+          {icon || <ChakraCheckbox.Indicator />}
+        </ChakraCheckbox.Control>
+        {children != null && (
+          <ChakraCheckbox.Label>{children}</ChakraCheckbox.Label>
+        )}
+      </ChakraCheckbox.Root>
+    )
+  },
+)
diff --git a/front/src/components/ui/color-mode.tsx b/front/src/components/ui/color-mode.tsx
index 52ce1a0..a87f63b 100644
--- a/front/src/components/ui/color-mode.tsx
+++ b/front/src/components/ui/color-mode.tsx
@@ -1,23 +1,35 @@
 "use client"
 
-import { ThemeProvider, useTheme, ThemeProviderProps } from "next-themes"
+import type { IconButtonProps } from "@chakra-ui/react"
+import { ClientOnly, IconButton, Skeleton } from "@chakra-ui/react"
+import { ThemeProvider, useTheme } from "next-themes"
+import type { ThemeProviderProps } from "next-themes"
+import * as React from "react"
+import { LuMoon, LuSun } from "react-icons/lu"
 
-export interface ColorModeProviderProps extends ThemeProviderProps { }
+export interface ColorModeProviderProps extends ThemeProviderProps {}
 
 export function ColorModeProvider(props: ColorModeProviderProps) {
   return (
-    <ThemeProvider attribute="class" themes={['pink', 'dark', 'light']} disableTransitionOnChange {...props} />
+    <ThemeProvider attribute="class" disableTransitionOnChange {...props} />
   )
 }
 
-export function useColorMode() {
+export type ColorMode = "light" | "dark"
+
+export interface UseColorModeReturn {
+  colorMode: ColorMode
+  setColorMode: (colorMode: ColorMode) => void
+  toggleColorMode: () => void
+}
+
+export function useColorMode(): UseColorModeReturn {
   const { resolvedTheme, setTheme } = useTheme()
   const toggleColorMode = () => {
-    console.log(`plop: ${resolvedTheme}`);
-    setTheme(resolvedTheme === "light" ? "pink" : resolvedTheme === "pink" ? "dark" : "light")
+    setTheme(resolvedTheme === "light" ? "dark" : "light")
   }
   return {
-    colorMode: resolvedTheme,
+    colorMode: resolvedTheme as ColorMode,
     setColorMode: setTheme,
     toggleColorMode,
   }
@@ -25,5 +37,39 @@ export function useColorMode() {
 
 export function useColorModeValue<T>(light: T, dark: T) {
   const { colorMode } = useColorMode()
-  return colorMode === "light" ? light : dark
+  return colorMode === "dark" ? dark : light
 }
+
+export function ColorModeIcon() {
+  const { colorMode } = useColorMode()
+  return colorMode === "dark" ? <LuMoon /> : <LuSun />
+}
+
+interface ColorModeButtonProps extends Omit<IconButtonProps, "aria-label"> {}
+
+export const ColorModeButton = React.forwardRef<
+  HTMLButtonElement,
+  ColorModeButtonProps
+>(function ColorModeButton(props, ref) {
+  const { toggleColorMode } = useColorMode()
+  return (
+    <ClientOnly fallback={<Skeleton boxSize="8" />}>
+      <IconButton
+        onClick={toggleColorMode}
+        variant="ghost"
+        aria-label="Toggle color mode"
+        size="sm"
+        ref={ref}
+        {...props}
+        css={{
+          _icon: {
+            width: "5",
+            height: "5",
+          },
+        }}
+      >
+        <ColorModeIcon />
+      </IconButton>
+    </ClientOnly>
+  )
+})
diff --git a/front/src/components/ui/field.tsx b/front/src/components/ui/field.tsx
new file mode 100644
index 0000000..dd3b66f
--- /dev/null
+++ b/front/src/components/ui/field.tsx
@@ -0,0 +1,33 @@
+import { Field as ChakraField } from "@chakra-ui/react"
+import * as React from "react"
+
+export interface FieldProps extends Omit<ChakraField.RootProps, "label"> {
+  label?: React.ReactNode
+  helperText?: React.ReactNode
+  errorText?: React.ReactNode
+  optionalText?: React.ReactNode
+}
+
+export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
+  function Field(props, ref) {
+    const { label, children, helperText, errorText, optionalText, ...rest } =
+      props
+    return (
+      <ChakraField.Root ref={ref} {...rest}>
+        {label && (
+          <ChakraField.Label>
+            {label}
+            <ChakraField.RequiredIndicator fallback={optionalText} />
+          </ChakraField.Label>
+        )}
+        {children}
+        {helperText && (
+          <ChakraField.HelperText>{helperText}</ChakraField.HelperText>
+        )}
+        {errorText && (
+          <ChakraField.ErrorText>{errorText}</ChakraField.ErrorText>
+        )}
+      </ChakraField.Root>
+    )
+  },
+)
diff --git a/front/src/components/ui/input-group.tsx b/front/src/components/ui/input-group.tsx
new file mode 100644
index 0000000..5d8fb32
--- /dev/null
+++ b/front/src/components/ui/input-group.tsx
@@ -0,0 +1,53 @@
+import type { BoxProps, InputElementProps } from "@chakra-ui/react"
+import { Group, InputElement } from "@chakra-ui/react"
+import * as React from "react"
+
+export interface InputGroupProps extends BoxProps {
+  startElementProps?: InputElementProps
+  endElementProps?: InputElementProps
+  startElement?: React.ReactNode
+  endElement?: React.ReactNode
+  children: React.ReactElement<InputElementProps>
+  startOffset?: InputElementProps["paddingStart"]
+  endOffset?: InputElementProps["paddingEnd"]
+}
+
+export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
+  function InputGroup(props, ref) {
+    const {
+      startElement,
+      startElementProps,
+      endElement,
+      endElementProps,
+      children,
+      startOffset = "6px",
+      endOffset = "6px",
+      ...rest
+    } = props
+
+    const child =
+      React.Children.only<React.ReactElement<InputElementProps>>(children)
+
+    return (
+      <Group ref={ref} {...rest}>
+        {startElement && (
+          <InputElement pointerEvents="none" {...startElementProps}>
+            {startElement}
+          </InputElement>
+        )}
+        {React.cloneElement(child, {
+          ...(startElement && {
+            ps: `calc(var(--input-height) - ${startOffset})`,
+          }),
+          ...(endElement && { pe: `calc(var(--input-height) - ${endOffset})` }),
+          ...children.props,
+        })}
+        {endElement && (
+          <InputElement placement="end" {...endElementProps}>
+            {endElement}
+          </InputElement>
+        )}
+      </Group>
+    )
+  },
+)
diff --git a/front/src/components/ui/popover.tsx b/front/src/components/ui/popover.tsx
new file mode 100644
index 0000000..3320659
--- /dev/null
+++ b/front/src/components/ui/popover.tsx
@@ -0,0 +1,59 @@
+import { Popover as ChakraPopover, Portal } from "@chakra-ui/react"
+import { CloseButton } from "./close-button"
+import * as React from "react"
+
+interface PopoverContentProps extends ChakraPopover.ContentProps {
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement>
+}
+
+export const PopoverContent = React.forwardRef<
+  HTMLDivElement,
+  PopoverContentProps
+>(function PopoverContent(props, ref) {
+  const { portalled = true, portalRef, ...rest } = props
+  return (
+    <Portal disabled={!portalled} container={portalRef}>
+      <ChakraPopover.Positioner>
+        <ChakraPopover.Content ref={ref} {...rest} />
+      </ChakraPopover.Positioner>
+    </Portal>
+  )
+})
+
+export const PopoverArrow = React.forwardRef<
+  HTMLDivElement,
+  ChakraPopover.ArrowProps
+>(function PopoverArrow(props, ref) {
+  return (
+    <ChakraPopover.Arrow {...props} ref={ref}>
+      <ChakraPopover.ArrowTip />
+    </ChakraPopover.Arrow>
+  )
+})
+
+export const PopoverCloseTrigger = React.forwardRef<
+  HTMLButtonElement,
+  ChakraPopover.CloseTriggerProps
+>(function PopoverCloseTrigger(props, ref) {
+  return (
+    <ChakraPopover.CloseTrigger
+      position="absolute"
+      top="1"
+      insetEnd="1"
+      {...props}
+      asChild
+      ref={ref}
+    >
+      <CloseButton size="sm" />
+    </ChakraPopover.CloseTrigger>
+  )
+})
+
+export const PopoverTitle = ChakraPopover.Title
+export const PopoverDescription = ChakraPopover.Description
+export const PopoverFooter = ChakraPopover.Footer
+export const PopoverHeader = ChakraPopover.Header
+export const PopoverRoot = ChakraPopover.Root
+export const PopoverBody = ChakraPopover.Body
+export const PopoverTrigger = ChakraPopover.Trigger
diff --git a/front/src/components/ui/provider.tsx b/front/src/components/ui/provider.tsx
new file mode 100644
index 0000000..fd0331b
--- /dev/null
+++ b/front/src/components/ui/provider.tsx
@@ -0,0 +1,15 @@
+"use client"
+
+import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
+import {
+  ColorModeProvider,
+  type ColorModeProviderProps,
+} from "./color-mode"
+
+export function Provider(props: ColorModeProviderProps) {
+  return (
+    <ChakraProvider value={defaultSystem}>
+      <ColorModeProvider {...props} />
+    </ChakraProvider>
+  )
+}
diff --git a/front/src/components/ui/radio.tsx b/front/src/components/ui/radio.tsx
new file mode 100644
index 0000000..b3919d0
--- /dev/null
+++ b/front/src/components/ui/radio.tsx
@@ -0,0 +1,24 @@
+import { RadioGroup as ChakraRadioGroup } from "@chakra-ui/react"
+import * as React from "react"
+
+export interface RadioProps extends ChakraRadioGroup.ItemProps {
+  rootRef?: React.Ref<HTMLDivElement>
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+}
+
+export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
+  function Radio(props, ref) {
+    const { children, inputProps, rootRef, ...rest } = props
+    return (
+      <ChakraRadioGroup.Item ref={rootRef} {...rest}>
+        <ChakraRadioGroup.ItemHiddenInput ref={ref} {...inputProps} />
+        <ChakraRadioGroup.ItemIndicator />
+        {children && (
+          <ChakraRadioGroup.ItemText>{children}</ChakraRadioGroup.ItemText>
+        )}
+      </ChakraRadioGroup.Item>
+    )
+  },
+)
+
+export const RadioGroup = ChakraRadioGroup.Root
diff --git a/front/src/components/ui/slider.tsx b/front/src/components/ui/slider.tsx
new file mode 100644
index 0000000..55a7283
--- /dev/null
+++ b/front/src/components/ui/slider.tsx
@@ -0,0 +1,82 @@
+import { Slider as ChakraSlider, For, HStack } from "@chakra-ui/react"
+import * as React from "react"
+
+export interface SliderProps extends ChakraSlider.RootProps {
+  marks?: Array<number | { value: number; label: React.ReactNode }>
+  label?: React.ReactNode
+  showValue?: boolean
+}
+
+export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
+  function Slider(props, ref) {
+    const { marks: marksProp, label, showValue, ...rest } = props
+    const value = props.defaultValue ?? props.value
+
+    const marks = marksProp?.map((mark) => {
+      if (typeof mark === "number") return { value: mark, label: undefined }
+      return mark
+    })
+
+    const hasMarkLabel = !!marks?.some((mark) => mark.label)
+
+    return (
+      <ChakraSlider.Root ref={ref} thumbAlignment="center" {...rest}>
+        {label && !showValue && (
+          <ChakraSlider.Label>{label}</ChakraSlider.Label>
+        )}
+        {label && showValue && (
+          <HStack justify="space-between">
+            <ChakraSlider.Label>{label}</ChakraSlider.Label>
+            <ChakraSlider.ValueText />
+          </HStack>
+        )}
+        <ChakraSlider.Control data-has-mark-label={hasMarkLabel || undefined}>
+          <ChakraSlider.Track>
+            <ChakraSlider.Range />
+          </ChakraSlider.Track>
+          <SliderThumbs value={value} />
+          <SliderMarks marks={marks} />
+        </ChakraSlider.Control>
+      </ChakraSlider.Root>
+    )
+  },
+)
+
+function SliderThumbs(props: { value?: number[] }) {
+  const { value } = props
+  return (
+    <For each={value}>
+      {(_, index) => (
+        <ChakraSlider.Thumb key={index} index={index}>
+          <ChakraSlider.HiddenInput />
+        </ChakraSlider.Thumb>
+      )}
+    </For>
+  )
+}
+
+interface SliderMarksProps {
+  marks?: Array<number | { value: number; label: React.ReactNode }>
+}
+
+const SliderMarks = React.forwardRef<HTMLDivElement, SliderMarksProps>(
+  function SliderMarks(props, ref) {
+    const { marks } = props
+    if (!marks?.length) return null
+
+    return (
+      <ChakraSlider.MarkerGroup ref={ref}>
+        {marks.map((mark, index) => {
+          const value = typeof mark === "number" ? mark : mark.value
+          const label = typeof mark === "number" ? undefined : mark.label
+          return (
+            <ChakraSlider.Marker key={index} value={value}>
+              <ChakraSlider.MarkerIndicator />
+              {label}
+            </ChakraSlider.Marker>
+          )
+        })}
+      </ChakraSlider.MarkerGroup>
+    )
+  },
+)
diff --git a/front/src/components/ui/tooltip.tsx b/front/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..43a8a6c
--- /dev/null
+++ b/front/src/components/ui/tooltip.tsx
@@ -0,0 +1,46 @@
+import { Tooltip as ChakraTooltip, Portal } from "@chakra-ui/react"
+import * as React from "react"
+
+export interface TooltipProps extends ChakraTooltip.RootProps {
+  showArrow?: boolean
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement>
+  content: React.ReactNode
+  contentProps?: ChakraTooltip.ContentProps
+  disabled?: boolean
+}
+
+export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
+  function Tooltip(props, ref) {
+    const {
+      showArrow,
+      children,
+      disabled,
+      portalled = true,
+      content,
+      contentProps,
+      portalRef,
+      ...rest
+    } = props
+
+    if (disabled) return children
+
+    return (
+      <ChakraTooltip.Root {...rest}>
+        <ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
+        <Portal disabled={!portalled} container={portalRef}>
+          <ChakraTooltip.Positioner>
+            <ChakraTooltip.Content ref={ref} {...contentProps}>
+              {showArrow && (
+                <ChakraTooltip.Arrow>
+                  <ChakraTooltip.ArrowTip />
+                </ChakraTooltip.Arrow>
+              )}
+              {content}
+            </ChakraTooltip.Content>
+          </ChakraTooltip.Positioner>
+        </Portal>
+      </ChakraTooltip.Root>
+    )
+  },
+)
diff --git a/front/src/errors/ErrorBoundary.tsx b/front/src/errors/ErrorBoundary.tsx
index fb2ac8d..23c63ba 100644
--- a/front/src/errors/ErrorBoundary.tsx
+++ b/front/src/errors/ErrorBoundary.tsx
@@ -7,6 +7,8 @@ import {
   Box,
   Collapsible,
   useDisclosure,
+  Text,
+  HStack,
 } from '@chakra-ui/react';
 import {
   FallbackProps,
@@ -30,7 +32,10 @@ const ErrorFallback = ({ error }: FallbackProps) => {
               //size="sm"
               onClick={onToggle}
             >
-              Show details {open ? <LuChevronUp /> : <LuChevronDown />}
+              <HStack>
+                <Text>Show details</Text>{' '}
+                {open ? <LuChevronUp /> : <LuChevronDown />}
+              </HStack>
             </Button>
             <Collapsible.Root open={open}>
               <Collapsible.Content>
diff --git a/front/src/scene/album/AlbumsPage.tsx b/front/src/scene/album/AlbumsPage.tsx
index f938205..cd70ece 100644
--- a/front/src/scene/album/AlbumsPage.tsx
+++ b/front/src/scene/album/AlbumsPage.tsx
@@ -36,7 +36,7 @@ export const AlbumsPage = () => {
         <SearchInput onChange={setFilterTitle} />
       </TopBar>
       <PageLayout>
-        <HStack wrap="wrap" /*spacing={BASE_WRAP_SPACING}*/ marginX="auto" padding="20px" justify="center">
+        <HStack wrap="wrap" gap={BASE_WRAP_SPACING} marginX="auto" padding="20px" justify="center">
           {dataAlbums.map((data) => (
             <Flex align="flex-start"
               width={BASE_WRAP_WIDTH}
diff --git a/front/src/scene/artist/ArtistAlbumDetailPage.tsx b/front/src/scene/artist/ArtistAlbumDetailPage.tsx
index 6f71a8b..9e7a8b9 100644
--- a/front/src/scene/artist/ArtistAlbumDetailPage.tsx
+++ b/front/src/scene/artist/ArtistAlbumDetailPage.tsx
@@ -126,7 +126,6 @@ export const ArtistAlbumDetailPage = () => {
               backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
               key={data.id}
               padding="5px"
-              as="button"
               _hover={{
                 boxShadow: 'outline-over',
                 bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
diff --git a/front/src/scene/artist/ArtistDetailPage.tsx b/front/src/scene/artist/ArtistDetailPage.tsx
index b9bcb70..c6af6f9 100644
--- a/front/src/scene/artist/ArtistDetailPage.tsx
+++ b/front/src/scene/artist/ArtistDetailPage.tsx
@@ -88,7 +88,7 @@ export const ArtistDetailPage = () => {
           </Flex>
         </Flex>
 
-        <HStack wrap="wrap" /*spacing={BASE_WRAP_SPACING}*/ marginX="auto" padding="20px" justify="center">
+        <HStack wrap="wrap" gap={BASE_WRAP_SPACING} marginX="auto" padding="20px" justify="center">
           {albumIdsOfAnArtist?.map((data) => (
             <Flex align="flex-start"
               width={BASE_WRAP_WIDTH}
diff --git a/front/src/scene/artist/ArtistsPage.tsx b/front/src/scene/artist/ArtistsPage.tsx
index 3c2d8c8..4826683 100644
--- a/front/src/scene/artist/ArtistsPage.tsx
+++ b/front/src/scene/artist/ArtistsPage.tsx
@@ -64,7 +64,7 @@ export const ArtistsPage = () => {
         </Tooltip.Root>
       </TopBar>
       <PageLayout>
-        <HStack wrap="wrap" /*spacing={BASE_WRAP_SPACING}*/ marginX="auto" padding="20px" justify="center">
+        <HStack wrap="wrap" gap={BASE_WRAP_SPACING} marginX="auto" padding="20px" justify="center">
           {dataArtist?.map((data) => (
             <Flex align="flex-start"
               width={BASE_WRAP_WIDTH}
diff --git a/front/src/scene/gender/GendersPage.tsx b/front/src/scene/gender/GendersPage.tsx
index adb6225..7c9c433 100644
--- a/front/src/scene/gender/GendersPage.tsx
+++ b/front/src/scene/gender/GendersPage.tsx
@@ -35,7 +35,7 @@ export const GendersPage = () => {
         <SearchInput onChange={setFilterTitle} />
       </TopBar>
       <PageLayout>
-        <HStack wrap="wrap" /*spacing="20px"*/ marginX="auto" padding="20px" justify="center">
+        <HStack wrap="wrap" gap="20px" marginX="auto" padding="20px" justify="center">
           {dataGenders.map((data) => (
             <Flex align="flex-start"
               width="270px"
diff --git a/front/src/scene/home/HomePage.tsx b/front/src/scene/home/HomePage.tsx
index 86cc45d..c0590f2 100644
--- a/front/src/scene/home/HomePage.tsx
+++ b/front/src/scene/home/HomePage.tsx
@@ -58,7 +58,7 @@ export const HomePage = () => {
     <>
       <TopBar title="Home" />
       <PageLayout>
-        <HStack wrap="wrap" /*spacing="20px"*/ marginX="auto" padding="20px" justify="center">
+        <HStack wrap="wrap" gap="20px" marginX="auto" padding="20px" justify="center">
           {homeList.map((data) => (
             <Flex align="flex-start"
               width="200px"
diff --git a/front/src/theme/config sample.ts b/front/src/theme/config sample.ts
new file mode 100644
index 0000000..4bc6982
--- /dev/null
+++ b/front/src/theme/config sample.ts	
@@ -0,0 +1,10888 @@
+cont plop = {
+    "conditions": {
+        "hover": [
+            "@media (hover: hover)",
+            "&:is(:hover, [data-hover]):not(:disabled, [data-disabled])"
+        ],
+        "active": "&:is(:active, [data-active]):not(:disabled, [data-disabled], [data-state=open])",
+        "focus": "&:is(:focus, [data-focus])",
+        "focusWithin": "&:is(:focus-within, [data-focus-within])",
+        "focusVisible": "&:is(:focus-visible, [data-focus-visible])",
+        "disabled": "&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])",
+        "visited": "&:visited",
+        "target": "&:target",
+        "readOnly": "&:is([data-readonly], [aria-readonly=true], [readonly])",
+        "readWrite": "&:read-write",
+        "empty": "&:is(:empty, [data-empty])",
+        "checked": "&:is(:checked, [data-checked], [aria-checked=true], [data-state=checked])",
+        "enabled": "&:enabled",
+        "expanded": "&:is([aria-expanded=true], [data-expanded], [data-state=expanded])",
+        "highlighted": "&[data-highlighted]",
+        "complete": "&[data-complete]",
+        "incomplete": "&[data-incomplete]",
+        "dragging": "&[data-dragging]",
+        "before": "&::before",
+        "after": "&::after",
+        "firstLetter": "&::first-letter",
+        "firstLine": "&::first-line",
+        "marker": "&::marker",
+        "selection": "&::selection",
+        "file": "&::file-selector-button",
+        "backdrop": "&::backdrop",
+        "first": "&:first-of-type",
+        "last": "&:last-of-type",
+        "notFirst": "&:not(:first-of-type)",
+        "notLast": "&:not(:last-of-type)",
+        "only": "&:only-child",
+        "even": "&:nth-of-type(even)",
+        "odd": "&:nth-of-type(odd)",
+        "peerFocus": ".peer:is(:focus, [data-focus]) ~ &",
+        "peerHover": ".peer:is(:hover, [data-hover]):not(:disabled, [data-disabled]) ~ &",
+        "peerActive": ".peer:is(:active, [data-active]):not(:disabled, [data-disabled]) ~ &",
+        "peerFocusWithin": ".peer:focus-within ~ &",
+        "peerFocusVisible": ".peer:is(:focus-visible, [data-focus-visible]) ~ &",
+        "peerDisabled": ".peer:is(:disabled, [disabled], [data-disabled]) ~ &",
+        "peerChecked": ".peer:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) ~ &",
+        "peerInvalid": ".peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &",
+        "peerExpanded": ".peer:is([aria-expanded=true], [data-expanded], [data-state=expanded]) ~ &",
+        "peerPlaceholderShown": ".peer:placeholder-shown ~ &",
+        "groupFocus": ".group:is(:focus, [data-focus]) &",
+        "groupHover": ".group:is(:hover, [data-hover]):not(:disabled, [data-disabled]) &",
+        "groupActive": ".group:is(:active, [data-active]):not(:disabled, [data-disabled]) &",
+        "groupFocusWithin": ".group:focus-within &",
+        "groupFocusVisible": ".group:is(:focus-visible, [data-focus-visible]) &",
+        "groupDisabled": ".group:is(:disabled, [disabled], [data-disabled]) &",
+        "groupChecked": ".group:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) &",
+        "groupExpanded": ".group:is([aria-expanded=true], [data-expanded], [data-state=expanded]) &",
+        "groupInvalid": ".group:invalid &",
+        "indeterminate": "&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])",
+        "required": "&:is([data-required], [aria-required=true])",
+        "valid": "&:is([data-valid], [data-state=valid])",
+        "invalid": "&:is([data-invalid], [aria-invalid=true], [data-state=invalid])",
+        "autofill": "&:autofill",
+        "inRange": "&:is(:in-range, [data-in-range])",
+        "outOfRange": "&:is(:out-of-range, [data-outside-range])",
+        "placeholder": "&::placeholder, &[data-placeholder]",
+        "placeholderShown": "&:is(:placeholder-shown, [data-placeholder-shown])",
+        "pressed": "&:is([aria-pressed=true], [data-pressed])",
+        "selected": "&:is([aria-selected=true], [data-selected])",
+        "grabbed": "&:is([aria-grabbed=true], [data-grabbed])",
+        "underValue": "&[data-state=under-value]",
+        "overValue": "&[data-state=over-value]",
+        "atValue": "&[data-state=at-value]",
+        "default": "&:default",
+        "optional": "&:optional",
+        "open": "&:is([open], [data-open], [data-state=open])",
+        "closed": "&:is([closed], [data-closed], [data-state=closed])",
+        "fullscreen": "&is(:fullscreen, [data-fullscreen])",
+        "loading": "&:is([data-loading], [aria-busy=true])",
+        "hidden": "&:is([hidden], [data-hidden])",
+        "current": "&[data-current]",
+        "currentPage": "&[aria-current=page]",
+        "currentStep": "&[aria-current=step]",
+        "today": "&[data-today]",
+        "unavailable": "&[data-unavailable]",
+        "rangeStart": "&[data-range-start]",
+        "rangeEnd": "&[data-range-end]",
+        "now": "&[data-now]",
+        "topmost": "&[data-topmost]",
+        "motionReduce": "@media (prefers-reduced-motion: reduce)",
+        "motionSafe": "@media (prefers-reduced-motion: no-preference)",
+        "print": "@media print",
+        "landscape": "@media (orientation: landscape)",
+        "portrait": "@media (orientation: portrait)",
+        "dark": ".dark &, .dark .chakra-theme:not(.light) &",
+        "light": ":root &, .light &",
+        "osDark": "@media (prefers-color-scheme: dark)",
+        "osLight": "@media (prefers-color-scheme: light)",
+        "highContrast": "@media (forced-colors: active)",
+        "lessContrast": "@media (prefers-contrast: less)",
+        "moreContrast": "@media (prefers-contrast: more)",
+        "ltr": "[dir=ltr] &",
+        "rtl": "[dir=rtl] &",
+        "scrollbar": "&::-webkit-scrollbar",
+        "scrollbarThumb": "&::-webkit-scrollbar-thumb",
+        "scrollbarTrack": "&::-webkit-scrollbar-track",
+        "horizontal": "&[data-orientation=horizontal]",
+        "vertical": "&[data-orientation=vertical]",
+        "icon": "& :where(svg)",
+        "starting": "@starting-style"
+    },
+    "utilities": {
+        "background": {
+            "shorthand": [
+                "bg"
+            ]
+        },
+        "backgroundColor": {
+            "shorthand": [
+                "bgColor"
+            ]
+        },
+        "backgroundSize": {
+            "shorthand": [
+                "bgSize"
+            ]
+        },
+        "backgroundPosition": {
+            "shorthand": [
+                "bgPos"
+            ]
+        },
+        "backgroundRepeat": {
+            "shorthand": [
+                "bgRepeat"
+            ]
+        },
+        "backgroundAttachment": {
+            "shorthand": [
+                "bgAttachment"
+            ]
+        },
+        "backgroundClip": {
+            "shorthand": [
+                "bgClip"
+            ],
+            "values": [
+                "text"
+            ]
+        },
+        "backgroundGradient": {
+            "shorthand": [
+                "bgGradient"
+            ]
+        },
+        "gradientFrom": {},
+        "gradientTo": {},
+        "gradientVia": {},
+        "backgroundImage": {
+            "values": "gradients",
+            "shorthand": [
+                "bgImg",
+                "bgImage"
+            ]
+        },
+        "border": {
+            "values": "borders"
+        },
+        "borderTop": {
+            "values": "borders"
+        },
+        "borderLeft": {
+            "values": "borders"
+        },
+        "borderBlockStart": {
+            "values": "borders"
+        },
+        "borderRight": {
+            "values": "borders"
+        },
+        "borderInlineEnd": {
+            "values": "borders"
+        },
+        "borderBottom": {
+            "values": "borders"
+        },
+        "borderBlockEnd": {
+            "values": "borders"
+        },
+        "borderInlineStart": {
+            "values": "borders",
+            "shorthand": [
+                "borderStart"
+            ]
+        },
+        "borderInline": {
+            "values": "borders",
+            "shorthand": [
+                "borderX"
+            ]
+        },
+        "borderBlock": {
+            "values": "borders",
+            "shorthand": [
+                "borderY"
+            ]
+        },
+        "borderColor": {},
+        "borderTopColor": {},
+        "borderBlockStartColor": {},
+        "borderBottomColor": {},
+        "borderBlockEndColor": {},
+        "borderLeftColor": {},
+        "borderInlineStartColor": {
+            "shorthand": [
+                "borderStartColor"
+            ]
+        },
+        "borderRightColor": {},
+        "borderInlineEndColor": {
+            "shorthand": [
+                "borderEndColor"
+            ]
+        },
+        "borderStyle": {
+            "values": "borderStyles"
+        },
+        "borderTopStyle": {
+            "values": "borderStyles"
+        },
+        "borderBlockStartStyle": {
+            "values": "borderStyles"
+        },
+        "borderBottomStyle": {
+            "values": "borderStyles"
+        },
+        "borderBlockEndStyle": {
+            "values": "borderStyles"
+        },
+        "borderInlineStartStyle": {
+            "values": "borderStyles",
+            "shorthand": [
+                "borderStartStyle"
+            ]
+        },
+        "borderInlineEndStyle": {
+            "values": "borderStyles",
+            "shorthand": [
+                "borderEndStyle"
+            ]
+        },
+        "borderLeftStyle": {
+            "values": "borderStyles"
+        },
+        "borderRightStyle": {
+            "values": "borderStyles"
+        },
+        "borderRadius": {
+            "values": "radii",
+            "shorthand": [
+                "rounded"
+            ]
+        },
+        "borderTopLeftRadius": {
+            "values": "radii",
+            "shorthand": [
+                "roundedTopLeft"
+            ]
+        },
+        "borderStartStartRadius": {
+            "values": "radii",
+            "shorthand": [
+                "roundedStartStart",
+                "borderTopStartRadius"
+            ]
+        },
+        "borderEndStartRadius": {
+            "values": "radii",
+            "shorthand": [
+                "roundedEndStart",
+                "borderBottomStartRadius"
+            ]
+        },
+        "borderTopRightRadius": {
+            "values": "radii",
+            "shorthand": [
+                "roundedTopRight"
+            ]
+        },
+        "borderStartEndRadius": {
+            "values": "radii",
+            "shorthand": [
+                "roundedStartEnd",
+                "borderTopEndRadius"
+            ]
+        },
+        "borderEndEndRadius": {
+            "values": "radii",
+            "shorthand": [
+                "roundedEndEnd",
+                "borderBottomEndRadius"
+            ]
+        },
+        "borderBottomLeftRadius": {
+            "values": "radii",
+            "shorthand": [
+                "roundedBottomLeft"
+            ]
+        },
+        "borderBottomRightRadius": {
+            "values": "radii",
+            "shorthand": [
+                "roundedBottomRight"
+            ]
+        },
+        "borderInlineStartRadius": {
+            "values": "radii",
+            "property": "borderRadius",
+            "shorthand": [
+                "roundedStart",
+                "borderStartRadius"
+            ]
+        },
+        "borderInlineEndRadius": {
+            "values": "radii",
+            "property": "borderRadius",
+            "shorthand": [
+                "roundedEnd",
+                "borderEndRadius"
+            ]
+        },
+        "borderTopRadius": {
+            "values": "radii",
+            "property": "borderRadius",
+            "shorthand": [
+                "roundedTop"
+            ]
+        },
+        "borderBottomRadius": {
+            "values": "radii",
+            "property": "borderRadius",
+            "shorthand": [
+                "roundedBottom"
+            ]
+        },
+        "borderLeftRadius": {
+            "values": "radii",
+            "property": "borderRadius",
+            "shorthand": [
+                "roundedLeft"
+            ]
+        },
+        "borderRightRadius": {
+            "values": "radii",
+            "property": "borderRadius",
+            "shorthand": [
+                "roundedRight"
+            ]
+        },
+        "borderWidth": {
+            "values": "borderWidths"
+        },
+        "borderBlockStartWidth": {
+            "values": "borderWidths"
+        },
+        "borderTopWidth": {
+            "values": "borderWidths"
+        },
+        "borderBottomWidth": {
+            "values": "borderWidths"
+        },
+        "borderBlockEndWidth": {
+            "values": "borderWidths"
+        },
+        "borderRightWidth": {
+            "values": "borderWidths"
+        },
+        "borderInlineWidth": {
+            "values": "borderWidths",
+            "shorthand": [
+                "borderXWidth"
+            ]
+        },
+        "borderInlineStartWidth": {
+            "values": "borderWidths",
+            "shorthand": [
+                "borderStartWidth"
+            ]
+        },
+        "borderInlineEndWidth": {
+            "values": "borderWidths",
+            "shorthand": [
+                "borderEndWidth"
+            ]
+        },
+        "borderLeftWidth": {
+            "values": "borderWidths"
+        },
+        "borderBlockWidth": {
+            "values": "borderWidths",
+            "shorthand": [
+                "borderYWidth"
+            ]
+        },
+        "color": {},
+        "fill": {},
+        "stroke": {},
+        "accentColor": {},
+        "divideX": {
+            "values": {
+                "type": "string"
+            }
+        },
+        "divideY": {
+            "values": {
+                "type": "string"
+            }
+        },
+        "divideColor": {},
+        "divideStyle": {
+            "property": "borderStyle"
+        },
+        "boxShadow": {
+            "values": "shadows",
+            "shorthand": [
+                "shadow"
+            ]
+        },
+        "boxShadowColor": {
+            "shorthand": [
+                "shadowColor"
+            ]
+        },
+        "mixBlendMode": {
+            "shorthand": [
+                "blendMode"
+            ]
+        },
+        "backgroundBlendMode": {
+            "shorthand": [
+                "bgBlendMode"
+            ]
+        },
+        "opacity": {
+            "values": "opacity"
+        },
+        "filter": {},
+        "blur": {
+            "values": "blurs"
+        },
+        "brightness": {},
+        "contrast": {},
+        "grayscale": {},
+        "hueRotate": {},
+        "invert": {},
+        "saturate": {},
+        "sepia": {},
+        "dropShadow": {},
+        "backdropFilter": {},
+        "backdropBlur": {
+            "values": "blurs"
+        },
+        "backdropBrightness": {},
+        "backdropContrast": {},
+        "backdropGrayscale": {},
+        "backdropHueRotate": {},
+        "backdropInvert": {},
+        "backdropOpacity": {},
+        "backdropSaturate": {},
+        "backdropSepia": {},
+        "flexBasis": {
+            "values": "sizes"
+        },
+        "gap": {
+            "values": "spacing"
+        },
+        "rowGap": {
+            "values": "spacing",
+            "shorthand": [
+                "gapY"
+            ]
+        },
+        "columnGap": {
+            "values": "spacing",
+            "shorthand": [
+                "gapX"
+            ]
+        },
+        "flexDirection": {
+            "shorthand": [
+                "flexDir"
+            ]
+        },
+        "gridGap": {
+            "values": "spacing"
+        },
+        "gridColumnGap": {
+            "values": "spacing"
+        },
+        "gridRowGap": {
+            "values": "spacing"
+        },
+        "outlineColor": {},
+        "focusRing": {
+            "values": [
+                "outside",
+                "inside",
+                "mixed",
+                "none"
+            ]
+        },
+        "focusVisibleRing": {
+            "values": [
+                "outside",
+                "inside",
+                "mixed",
+                "none"
+            ]
+        },
+        "focusRingColor": {},
+        "focusRingOffset": {
+            "values": "spacing"
+        },
+        "focusRingWidth": {
+            "values": "borderWidths",
+            "property": "outlineWidth"
+        },
+        "focusRingStyle": {
+            "values": "borderStyles",
+            "property": "outlineStyle"
+        },
+        "aspectRatio": {
+            "values": "aspectRatios"
+        },
+        "width": {
+            "values": "sizes",
+            "shorthand": [
+                "w"
+            ]
+        },
+        "inlineSize": {
+            "values": "sizes"
+        },
+        "height": {
+            "values": "sizes",
+            "shorthand": [
+                "h"
+            ]
+        },
+        "blockSize": {
+            "values": "sizes"
+        },
+        "boxSize": {
+            "values": "sizes",
+            "property": "width"
+        },
+        "minWidth": {
+            "values": "sizes",
+            "shorthand": [
+                "minW"
+            ]
+        },
+        "minInlineSize": {
+            "values": "sizes"
+        },
+        "minHeight": {
+            "values": "sizes",
+            "shorthand": [
+                "minH"
+            ]
+        },
+        "minBlockSize": {
+            "values": "sizes"
+        },
+        "maxWidth": {
+            "values": "sizes",
+            "shorthand": [
+                "maxW"
+            ]
+        },
+        "maxInlineSize": {
+            "values": "sizes"
+        },
+        "maxHeight": {
+            "values": "sizes",
+            "shorthand": [
+                "maxH"
+            ]
+        },
+        "maxBlockSize": {
+            "values": "sizes"
+        },
+        "hideFrom": {
+            "values": "breakpoints"
+        },
+        "hideBelow": {
+            "values": "breakpoints"
+        },
+        "overscrollBehavior": {
+            "shorthand": [
+                "overscroll"
+            ]
+        },
+        "overscrollBehaviorX": {
+            "shorthand": [
+                "overscrollX"
+            ]
+        },
+        "overscrollBehaviorY": {
+            "shorthand": [
+                "overscrollY"
+            ]
+        },
+        "scrollbar": {
+            "values": [
+                "visible",
+                "hidden"
+            ]
+        },
+        "scrollbarColor": {},
+        "scrollbarGutter": {
+            "values": "spacing"
+        },
+        "scrollbarWidth": {
+            "values": "sizes"
+        },
+        "scrollMargin": {
+            "values": "spacing"
+        },
+        "scrollMarginTop": {
+            "values": "spacing"
+        },
+        "scrollMarginBottom": {
+            "values": "spacing"
+        },
+        "scrollMarginLeft": {
+            "values": "spacing"
+        },
+        "scrollMarginRight": {
+            "values": "spacing"
+        },
+        "scrollMarginX": {
+            "values": "spacing"
+        },
+        "scrollMarginY": {
+            "values": "spacing"
+        },
+        "scrollPadding": {
+            "values": "spacing"
+        },
+        "scrollPaddingTop": {
+            "values": "spacing"
+        },
+        "scrollPaddingBottom": {
+            "values": "spacing"
+        },
+        "scrollPaddingLeft": {
+            "values": "spacing"
+        },
+        "scrollPaddingRight": {
+            "values": "spacing"
+        },
+        "scrollPaddingInline": {
+            "values": "spacing",
+            "shorthand": [
+                "scrollPaddingX"
+            ]
+        },
+        "scrollPaddingBlock": {
+            "values": "spacing",
+            "shorthand": [
+                "scrollPaddingY"
+            ]
+        },
+        "scrollSnapType": {
+            "values": {
+                "none": "none",
+                "x": "x var(--scroll-snap-strictness)",
+                "y": "y var(--scroll-snap-strictness)",
+                "both": "both var(--scroll-snap-strictness)"
+            }
+        },
+        "scrollSnapStrictness": {
+            "values": [
+                "mandatory",
+                "proximity"
+            ]
+        },
+        "scrollSnapMargin": {
+            "values": "spacing"
+        },
+        "scrollSnapMarginTop": {
+            "values": "spacing"
+        },
+        "scrollSnapMarginBottom": {
+            "values": "spacing"
+        },
+        "scrollSnapMarginLeft": {
+            "values": "spacing"
+        },
+        "scrollSnapMarginRight": {
+            "values": "spacing"
+        },
+        "listStylePosition": {
+            "shorthand": [
+                "listStylePos"
+            ]
+        },
+        "listStyleImage": {
+            "shorthand": [
+                "listStyleImg"
+            ]
+        },
+        "position": {
+            "shorthand": [
+                "pos"
+            ]
+        },
+        "zIndex": {
+            "values": "zIndex"
+        },
+        "inset": {
+            "values": "spacing"
+        },
+        "insetInline": {
+            "values": "spacing",
+            "shorthand": [
+                "insetX"
+            ]
+        },
+        "insetBlock": {
+            "values": "spacing",
+            "shorthand": [
+                "insetY"
+            ]
+        },
+        "top": {
+            "values": "spacing"
+        },
+        "insetBlockStart": {
+            "values": "spacing"
+        },
+        "bottom": {
+            "values": "spacing"
+        },
+        "insetBlockEnd": {
+            "values": "spacing"
+        },
+        "left": {
+            "values": "spacing"
+        },
+        "right": {
+            "values": "spacing"
+        },
+        "insetInlineStart": {
+            "values": "spacing",
+            "shorthand": [
+                "insetStart"
+            ]
+        },
+        "insetInlineEnd": {
+            "values": "spacing",
+            "shorthand": [
+                "insetEnd"
+            ]
+        },
+        "ring": {},
+        "ringColor": {},
+        "ringOffset": {},
+        "ringOffsetColor": {},
+        "ringInset": {},
+        "margin": {
+            "values": "spacing",
+            "shorthand": [
+                "m"
+            ]
+        },
+        "marginTop": {
+            "values": "spacing",
+            "shorthand": [
+                "mt"
+            ]
+        },
+        "marginBlockStart": {
+            "values": "spacing",
+            "shorthand": [
+                "mt"
+            ]
+        },
+        "marginRight": {
+            "values": "spacing",
+            "shorthand": [
+                "mr"
+            ]
+        },
+        "marginBottom": {
+            "values": "spacing",
+            "shorthand": [
+                "mb"
+            ]
+        },
+        "marginBlockEnd": {
+            "values": "spacing"
+        },
+        "marginLeft": {
+            "values": "spacing",
+            "shorthand": [
+                "ml"
+            ]
+        },
+        "marginInlineStart": {
+            "values": "spacing",
+            "shorthand": [
+                "ms",
+                "marginStart"
+            ]
+        },
+        "marginInlineEnd": {
+            "values": "spacing",
+            "shorthand": [
+                "me",
+                "marginEnd"
+            ]
+        },
+        "marginInline": {
+            "values": "spacing",
+            "shorthand": [
+                "mx",
+                "marginX"
+            ]
+        },
+        "marginBlock": {
+            "values": "spacing",
+            "shorthand": [
+                "my",
+                "marginY"
+            ]
+        },
+        "padding": {
+            "values": "spacing",
+            "shorthand": [
+                "p"
+            ]
+        },
+        "paddingTop": {
+            "values": "spacing",
+            "shorthand": [
+                "pt"
+            ]
+        },
+        "paddingRight": {
+            "values": "spacing",
+            "shorthand": [
+                "pr"
+            ]
+        },
+        "paddingBottom": {
+            "values": "spacing",
+            "shorthand": [
+                "pb"
+            ]
+        },
+        "paddingBlockStart": {
+            "values": "spacing"
+        },
+        "paddingBlockEnd": {
+            "values": "spacing"
+        },
+        "paddingLeft": {
+            "values": "spacing",
+            "shorthand": [
+                "pl"
+            ]
+        },
+        "paddingInlineStart": {
+            "values": "spacing",
+            "shorthand": [
+                "ps",
+                "paddingStart"
+            ]
+        },
+        "paddingInlineEnd": {
+            "values": "spacing",
+            "shorthand": [
+                "pe",
+                "paddingEnd"
+            ]
+        },
+        "paddingInline": {
+            "values": "spacing",
+            "shorthand": [
+                "px",
+                "paddingX"
+            ]
+        },
+        "paddingBlock": {
+            "values": "spacing",
+            "shorthand": [
+                "py",
+                "paddingY"
+            ]
+        },
+        "textDecoration": {
+            "shorthand": [
+                "textDecor"
+            ]
+        },
+        "textDecorationColor": {},
+        "textShadow": {
+            "values": "shadows"
+        },
+        "transform": {},
+        "skewX": {},
+        "skewY": {},
+        "scaleX": {},
+        "scaleY": {},
+        "scale": {},
+        "spaceXReverse": {
+            "values": {
+                "type": "boolean"
+            }
+        },
+        "spaceX": {
+            "property": "marginInlineStart",
+            "values": "spacing"
+        },
+        "spaceYReverse": {
+            "values": {
+                "type": "boolean"
+            }
+        },
+        "spaceY": {
+            "property": "marginTop",
+            "values": "spacing"
+        },
+        "rotate": {},
+        "rotateX": {},
+        "rotateY": {},
+        "translate": {},
+        "translateX": {
+            "values": "spacing"
+        },
+        "translateY": {
+            "values": "spacing"
+        },
+        "transition": {
+            "values": [
+                "all",
+                "common",
+                "colors",
+                "opacity",
+                "position",
+                "backgrounds",
+                "size",
+                "shadow",
+                "transform"
+            ]
+        },
+        "transitionDuration": {
+            "values": "durations"
+        },
+        "transitionProperty": {
+            "values": {
+                "common": "background-color, border-color, color, fill, stroke, opacity, box-shadow, translate, transform",
+                "colors": "background-color, border-color, color, fill, stroke",
+                "size": "width, height",
+                "position": "left, right, top, bottom, inset-inline, inset-block",
+                "background": "background, background-color, background-image, background-position"
+            }
+        },
+        "transitionTimingFunction": {
+            "values": "easings"
+        },
+        "animation": {
+            "values": "animations"
+        },
+        "animationDuration": {
+            "values": "durations"
+        },
+        "animationDelay": {
+            "values": "durations"
+        },
+        "animationTimingFunction": {
+            "values": "easings"
+        },
+        "fontFamily": {
+            "values": "fonts"
+        },
+        "fontSize": {
+            "values": "fontSizes"
+        },
+        "fontWeight": {
+            "values": "fontWeights"
+        },
+        "lineHeight": {
+            "values": "lineHeights"
+        },
+        "letterSpacing": {
+            "values": "letterSpacings"
+        },
+        "textIndent": {
+            "values": "spacing"
+        },
+        "truncate": {
+            "values": {
+                "type": "boolean"
+            }
+        },
+        "lineClamp": {},
+        "srOnly": {
+            "values": {
+                "type": "boolean"
+            }
+        },
+        "debug": {
+            "values": {
+                "type": "boolean"
+            }
+        },
+        "caretColor": {},
+        "cursor": {
+            "values": "cursor"
+        }
+    },
+    "preflight": true,
+    "cssVarsPrefix": "chakra",
+    "cssVarsRoot": ":where(html, .chakra-theme)",
+    "globalCss": {
+        "*": {
+            "fontFeatureSettings": "\"cv11\"",
+            "--ring-inset": "var(--chakra-empty,/*!*/ /*!*/)",
+            "--ring-offset-width": "0px",
+            "--ring-offset-color": "#fff",
+            "--ring-color": "rgba(66, 153, 225, 0.6)",
+            "--ring-offset-shadow": "0 0 #0000",
+            "--ring-shadow": "0 0 #0000",
+            "--brightness": "var(--chakra-empty,/*!*/ /*!*/)",
+            "--contrast": "var(--chakra-empty,/*!*/ /*!*/)",
+            "--grayscale": "var(--chakra-empty,/*!*/ /*!*/)",
+            "--hue-rotate": "var(--chakra-empty,/*!*/ /*!*/)",
+            "--invert": "var(--chakra-empty,/*!*/ /*!*/)",
+            "--saturate": "var(--chakra-empty,/*!*/ /*!*/)",
+            "--sepia": "var(--chakra-empty,/*!*/ /*!*/)",
+            "--drop-shadow": "var(--chakra-empty,/*!*/ /*!*/)",
+            "--backdrop-blur": "var(--chakra-empty,/*!*/ /*!*/)",
+            "--backdrop-brightness": "var(--chakra-empty,/*!*/ /*!*/)",
+            "--backdrop-contrast": "var(--chakra-empty,/*!*/ /*!*/)",
+            "--backdrop-grayscale": "var(--chakra-empty,/*!*/ /*!*/)",
+            "--backdrop-hue-rotate": "var(--chakra-empty,/*!*/ /*!*/)",
+            "--backdrop-invert": "var(--chakra-empty,/*!*/ /*!*/)",
+            "--backdrop-opacity": "var(--chakra-empty,/*!*/ /*!*/)",
+            "--backdrop-saturate": "var(--chakra-empty,/*!*/ /*!*/)",
+            "--backdrop-sepia": "var(--chakra-empty,/*!*/ /*!*/)",
+            "--global-font-mono": "fonts.mono",
+            "--global-font-body": "fonts.body",
+            "--global-color-border": "colors.border"
+        },
+        "html": {
+            "color": "fg",
+            "bg": "bg",
+            "lineHeight": "1.5",
+            "colorPalette": "gray"
+        },
+        "*::placeholder": {
+            "color": "fg.muted/80"
+        },
+        "*::selection": {
+            "bg": "colorPalette.muted/80"
+        }
+    },
+    "theme": {
+        "breakpoints": {
+            "sm": "480px",
+            "md": "768px",
+            "lg": "1024px",
+            "xl": "1280px",
+            "2xl": "1536px"
+        },
+        "keyframes": {
+            "spin": {
+                "0%": {
+                    "transform": "rotate(0deg)"
+                },
+                "100%": {
+                    "transform": "rotate(360deg)"
+                }
+            },
+            "pulse": {
+                "50%": {
+                    "opacity": "0.5"
+                }
+            },
+            "ping": {
+                "75%, 100%": {
+                    "transform": "scale(2)",
+                    "opacity": "0"
+                }
+            },
+            "bounce": {
+                "0%, 100%": {
+                    "transform": "translateY(-25%)",
+                    "animationTimingFunction": "cubic-bezier(0.8,0,1,1)"
+                },
+                "50%": {
+                    "transform": "none",
+                    "animationTimingFunction": "cubic-bezier(0,0,0.2,1)"
+                }
+            },
+            "bg-position": {
+                "from": {
+                    "backgroundPosition": "var(--animate-from, 1rem) 0"
+                },
+                "to": {
+                    "backgroundPosition": "var(--animate-to, 0) 0"
+                }
+            },
+            "position": {
+                "from": {
+                    "insetInlineStart": "var(--animate-from-x)",
+                    "insetBlockStart": "var(--animate-from-y)"
+                },
+                "to": {
+                    "insetInlineStart": "var(--animate-to-x)",
+                    "insetBlockStart": "var(--animate-to-y)"
+                }
+            },
+            "circular-progress": {
+                "0%": {
+                    "strokeDasharray": "1, 400",
+                    "strokeDashoffset": "0"
+                },
+                "50%": {
+                    "strokeDasharray": "400, 400",
+                    "strokeDashoffset": "-100%"
+                },
+                "100%": {
+                    "strokeDasharray": "400, 400",
+                    "strokeDashoffset": "-260%"
+                }
+            },
+            "expand-height": {
+                "from": {
+                    "height": "0"
+                },
+                "to": {
+                    "height": "var(--height)"
+                }
+            },
+            "collapse-height": {
+                "from": {
+                    "height": "var(--height)"
+                },
+                "to": {
+                    "height": "0"
+                }
+            },
+            "expand-width": {
+                "from": {
+                    "width": "0"
+                },
+                "to": {
+                    "width": "var(--width)"
+                }
+            },
+            "collapse-width": {
+                "from": {
+                    "height": "var(--width)"
+                },
+                "to": {
+                    "height": "0"
+                }
+            },
+            "fade-in": {
+                "from": {
+                    "opacity": 0
+                },
+                "to": {
+                    "opacity": 1
+                }
+            },
+            "fade-out": {
+                "from": {
+                    "opacity": 1
+                },
+                "to": {
+                    "opacity": 0
+                }
+            },
+            "slide-from-left-full": {
+                "from": {
+                    "translate": "-100% 0"
+                },
+                "to": {
+                    "translate": "0 0"
+                }
+            },
+            "slide-from-right-full": {
+                "from": {
+                    "translate": "100% 0"
+                },
+                "to": {
+                    "translate": "0 0"
+                }
+            },
+            "slide-from-top-full": {
+                "from": {
+                    "translate": "0 -100%"
+                },
+                "to": {
+                    "translate": "0 0"
+                }
+            },
+            "slide-from-bottom-full": {
+                "from": {
+                    "translate": "0 100%"
+                },
+                "to": {
+                    "translate": "0 0"
+                }
+            },
+            "slide-to-left-full": {
+                "from": {
+                    "translate": "0 0"
+                },
+                "to": {
+                    "translate": "-100% 0"
+                }
+            },
+            "slide-to-right-full": {
+                "from": {
+                    "translate": "0 0"
+                },
+                "to": {
+                    "translate": "100% 0"
+                }
+            },
+            "slide-to-top-full": {
+                "from": {
+                    "translate": "0 0"
+                },
+                "to": {
+                    "translate": "0 -100%"
+                }
+            },
+            "slide-to-bottom-full": {
+                "from": {
+                    "translate": "0 0"
+                },
+                "to": {
+                    "translate": "0 100%"
+                }
+            },
+            "slide-from-top": {
+                "0%": {
+                    "translate": "0 -0.5rem"
+                },
+                "to": {
+                    "translate": "0"
+                }
+            },
+            "slide-from-bottom": {
+                "0%": {
+                    "translate": "0 0.5rem"
+                },
+                "to": {
+                    "translate": "0"
+                }
+            },
+            "slide-from-left": {
+                "0%": {
+                    "translate": "-0.5rem 0"
+                },
+                "to": {
+                    "translate": "0"
+                }
+            },
+            "slide-from-right": {
+                "0%": {
+                    "translate": "0.5rem 0"
+                },
+                "to": {
+                    "translate": "0"
+                }
+            },
+            "slide-to-top": {
+                "0%": {
+                    "translate": "0"
+                },
+                "to": {
+                    "translate": "0 -0.5rem"
+                }
+            },
+            "slide-to-bottom": {
+                "0%": {
+                    "translate": "0"
+                },
+                "to": {
+                    "translate": "0 0.5rem"
+                }
+            },
+            "slide-to-left": {
+                "0%": {
+                    "translate": "0"
+                },
+                "to": {
+                    "translate": "-0.5rem 0"
+                }
+            },
+            "slide-to-right": {
+                "0%": {
+                    "translate": "0"
+                },
+                "to": {
+                    "translate": "0.5rem 0"
+                }
+            },
+            "scale-in": {
+                "from": {
+                    "scale": "0.95"
+                },
+                "to": {
+                    "scale": "1"
+                }
+            },
+            "scale-out": {
+                "from": {
+                    "scale": "1"
+                },
+                "to": {
+                    "scale": "0.95"
+                }
+            }
+        },
+        "tokens": {
+            "aspectRatios": {
+                "square": {
+                    "value": "1 / 1"
+                },
+                "landscape": {
+                    "value": "4 / 3"
+                },
+                "portrait": {
+                    "value": "3 / 4"
+                },
+                "wide": {
+                    "value": "16 / 9"
+                },
+                "ultrawide": {
+                    "value": "18 / 5"
+                },
+                "golden": {
+                    "value": "1.618 / 1"
+                }
+            },
+            "animations": {
+                "spin": {
+                    "value": "spin 1s linear infinite"
+                },
+                "ping": {
+                    "value": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"
+                },
+                "pulse": {
+                    "value": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+                },
+                "bounce": {
+                    "value": "bounce 1s infinite"
+                }
+            },
+            "blurs": {
+                "none": {
+                    "value": " "
+                },
+                "sm": {
+                    "value": "4px"
+                },
+                "md": {
+                    "value": "8px"
+                },
+                "lg": {
+                    "value": "12px"
+                },
+                "xl": {
+                    "value": "16px"
+                },
+                "2xl": {
+                    "value": "24px"
+                },
+                "3xl": {
+                    "value": "40px"
+                },
+                "4xl": {
+                    "value": "64px"
+                }
+            },
+            "borders": {
+                "xs": {
+                    "value": "0.5px solid"
+                },
+                "sm": {
+                    "value": "1px solid"
+                },
+                "md": {
+                    "value": "2px solid"
+                },
+                "lg": {
+                    "value": "4px solid"
+                },
+                "xl": {
+                    "value": "8px solid"
+                }
+            },
+            "colors": {
+                "transparent": {
+                    "value": "transparent"
+                },
+                "current": {
+                    "value": "currentColor"
+                },
+                "black": {
+                    "value": "#09090B"
+                },
+                "white": {
+                    "value": "#FFFFFF"
+                },
+                "whiteAlpha": {
+                    "50": {
+                        "value": "rgba(255, 255, 255, 0.04)"
+                    },
+                    "100": {
+                        "value": "rgba(255, 255, 255, 0.06)"
+                    },
+                    "200": {
+                        "value": "rgba(255, 255, 255, 0.08)"
+                    },
+                    "300": {
+                        "value": "rgba(255, 255, 255, 0.16)"
+                    },
+                    "400": {
+                        "value": "rgba(255, 255, 255, 0.24)"
+                    },
+                    "500": {
+                        "value": "rgba(255, 255, 255, 0.36)"
+                    },
+                    "600": {
+                        "value": "rgba(255, 255, 255, 0.48)"
+                    },
+                    "700": {
+                        "value": "rgba(255, 255, 255, 0.64)"
+                    },
+                    "800": {
+                        "value": "rgba(255, 255, 255, 0.80)"
+                    },
+                    "900": {
+                        "value": "rgba(255, 255, 255, 0.92)"
+                    },
+                    "950": {
+                        "value": "rgba(255, 255, 255, 0.95)"
+                    }
+                },
+                "blackAlpha": {
+                    "50": {
+                        "value": "rgba(0, 0, 0, 0.04)"
+                    },
+                    "100": {
+                        "value": "rgba(0, 0, 0, 0.06)"
+                    },
+                    "200": {
+                        "value": "rgba(0, 0, 0, 0.08)"
+                    },
+                    "300": {
+                        "value": "rgba(0, 0, 0, 0.16)"
+                    },
+                    "400": {
+                        "value": "rgba(0, 0, 0, 0.24)"
+                    },
+                    "500": {
+                        "value": "rgba(0, 0, 0, 0.36)"
+                    },
+                    "600": {
+                        "value": "rgba(0, 0, 0, 0.48)"
+                    },
+                    "700": {
+                        "value": "rgba(0, 0, 0, 0.64)"
+                    },
+                    "800": {
+                        "value": "rgba(0, 0, 0, 0.80)"
+                    },
+                    "900": {
+                        "value": "rgba(0, 0, 0, 0.92)"
+                    },
+                    "950": {
+                        "value": "rgba(0, 0, 0, 0.95)"
+                    }
+                },
+                "gray": {
+                    "50": {
+                        "value": "#fafafa"
+                    },
+                    "100": {
+                        "value": "#f4f4f5"
+                    },
+                    "200": {
+                        "value": "#e4e4e7"
+                    },
+                    "300": {
+                        "value": "#d4d4d8"
+                    },
+                    "400": {
+                        "value": "#a1a1aa"
+                    },
+                    "500": {
+                        "value": "#71717a"
+                    },
+                    "600": {
+                        "value": "#52525b"
+                    },
+                    "700": {
+                        "value": "#3f3f46"
+                    },
+                    "800": {
+                        "value": "#27272a"
+                    },
+                    "900": {
+                        "value": "#18181b"
+                    },
+                    "950": {
+                        "value": "#111111"
+                    }
+                },
+                "red": {
+                    "50": {
+                        "value": "#fef2f2"
+                    },
+                    "100": {
+                        "value": "#fee2e2"
+                    },
+                    "200": {
+                        "value": "#fecaca"
+                    },
+                    "300": {
+                        "value": "#fca5a5"
+                    },
+                    "400": {
+                        "value": "#f87171"
+                    },
+                    "500": {
+                        "value": "#ef4444"
+                    },
+                    "600": {
+                        "value": "#dc2626"
+                    },
+                    "700": {
+                        "value": "#991919"
+                    },
+                    "800": {
+                        "value": "#511111"
+                    },
+                    "900": {
+                        "value": "#300c0c"
+                    },
+                    "950": {
+                        "value": "#1f0808"
+                    }
+                },
+                "orange": {
+                    "50": {
+                        "value": "#fff7ed"
+                    },
+                    "100": {
+                        "value": "#ffedd5"
+                    },
+                    "200": {
+                        "value": "#fed7aa"
+                    },
+                    "300": {
+                        "value": "#fdba74"
+                    },
+                    "400": {
+                        "value": "#fb923c"
+                    },
+                    "500": {
+                        "value": "#f97316"
+                    },
+                    "600": {
+                        "value": "#ea580c"
+                    },
+                    "700": {
+                        "value": "#92310a"
+                    },
+                    "800": {
+                        "value": "#6c2710"
+                    },
+                    "900": {
+                        "value": "#3b1106"
+                    },
+                    "950": {
+                        "value": "#220a04"
+                    }
+                },
+                "yellow": {
+                    "50": {
+                        "value": "#fefce8"
+                    },
+                    "100": {
+                        "value": "#fef9c3"
+                    },
+                    "200": {
+                        "value": "#fef08a"
+                    },
+                    "300": {
+                        "value": "#fde047"
+                    },
+                    "400": {
+                        "value": "#facc15"
+                    },
+                    "500": {
+                        "value": "#eab308"
+                    },
+                    "600": {
+                        "value": "#ca8a04"
+                    },
+                    "700": {
+                        "value": "#845209"
+                    },
+                    "800": {
+                        "value": "#713f12"
+                    },
+                    "900": {
+                        "value": "#422006"
+                    },
+                    "950": {
+                        "value": "#281304"
+                    }
+                },
+                "green": {
+                    "50": {
+                        "value": "#f0fdf4"
+                    },
+                    "100": {
+                        "value": "#dcfce7"
+                    },
+                    "200": {
+                        "value": "#bbf7d0"
+                    },
+                    "300": {
+                        "value": "#86efac"
+                    },
+                    "400": {
+                        "value": "#4ade80"
+                    },
+                    "500": {
+                        "value": "#22c55e"
+                    },
+                    "600": {
+                        "value": "#16a34a"
+                    },
+                    "700": {
+                        "value": "#116932"
+                    },
+                    "800": {
+                        "value": "#124a28"
+                    },
+                    "900": {
+                        "value": "#042713"
+                    },
+                    "950": {
+                        "value": "#03190c"
+                    }
+                },
+                "teal": {
+                    "50": {
+                        "value": "#f0fdfa"
+                    },
+                    "100": {
+                        "value": "#ccfbf1"
+                    },
+                    "200": {
+                        "value": "#99f6e4"
+                    },
+                    "300": {
+                        "value": "#5eead4"
+                    },
+                    "400": {
+                        "value": "#2dd4bf"
+                    },
+                    "500": {
+                        "value": "#14b8a6"
+                    },
+                    "600": {
+                        "value": "#0d9488"
+                    },
+                    "700": {
+                        "value": "#0c5d56"
+                    },
+                    "800": {
+                        "value": "#114240"
+                    },
+                    "900": {
+                        "value": "#032726"
+                    },
+                    "950": {
+                        "value": "#021716"
+                    }
+                },
+                "blue": {
+                    "50": {
+                        "value": "#eff6ff"
+                    },
+                    "100": {
+                        "value": "#dbeafe"
+                    },
+                    "200": {
+                        "value": "#bfdbfe"
+                    },
+                    "300": {
+                        "value": "#a3cfff"
+                    },
+                    "400": {
+                        "value": "#60a5fa"
+                    },
+                    "500": {
+                        "value": "#3b82f6"
+                    },
+                    "600": {
+                        "value": "#2563eb"
+                    },
+                    "700": {
+                        "value": "#173da6"
+                    },
+                    "800": {
+                        "value": "#1a3478"
+                    },
+                    "900": {
+                        "value": "#14204a"
+                    },
+                    "950": {
+                        "value": "#0c142e"
+                    }
+                },
+                "cyan": {
+                    "50": {
+                        "value": "#ecfeff"
+                    },
+                    "100": {
+                        "value": "#cffafe"
+                    },
+                    "200": {
+                        "value": "#a5f3fc"
+                    },
+                    "300": {
+                        "value": "#67e8f9"
+                    },
+                    "400": {
+                        "value": "#22d3ee"
+                    },
+                    "500": {
+                        "value": "#06b6d4"
+                    },
+                    "600": {
+                        "value": "#0891b2"
+                    },
+                    "700": {
+                        "value": "#0c5c72"
+                    },
+                    "800": {
+                        "value": "#134152"
+                    },
+                    "900": {
+                        "value": "#072a38"
+                    },
+                    "950": {
+                        "value": "#051b24"
+                    }
+                },
+                "purple": {
+                    "50": {
+                        "value": "#faf5ff"
+                    },
+                    "100": {
+                        "value": "#f3e8ff"
+                    },
+                    "200": {
+                        "value": "#e9d5ff"
+                    },
+                    "300": {
+                        "value": "#d8b4fe"
+                    },
+                    "400": {
+                        "value": "#c084fc"
+                    },
+                    "500": {
+                        "value": "#a855f7"
+                    },
+                    "600": {
+                        "value": "#9333ea"
+                    },
+                    "700": {
+                        "value": "#641ba3"
+                    },
+                    "800": {
+                        "value": "#4a1772"
+                    },
+                    "900": {
+                        "value": "#2f0553"
+                    },
+                    "950": {
+                        "value": "#1a032e"
+                    }
+                },
+                "pink": {
+                    "50": {
+                        "value": "#fdf2f8"
+                    },
+                    "100": {
+                        "value": "#fce7f3"
+                    },
+                    "200": {
+                        "value": "#fbcfe8"
+                    },
+                    "300": {
+                        "value": "#f9a8d4"
+                    },
+                    "400": {
+                        "value": "#f472b6"
+                    },
+                    "500": {
+                        "value": "#ec4899"
+                    },
+                    "600": {
+                        "value": "#db2777"
+                    },
+                    "700": {
+                        "value": "#a41752"
+                    },
+                    "800": {
+                        "value": "#6d0e34"
+                    },
+                    "900": {
+                        "value": "#45061f"
+                    },
+                    "950": {
+                        "value": "#2c0514"
+                    }
+                }
+            },
+            "durations": {
+                "fastest": {
+                    "value": "50ms"
+                },
+                "faster": {
+                    "value": "100ms"
+                },
+                "fast": {
+                    "value": "150ms"
+                },
+                "moderate": {
+                    "value": "200ms"
+                },
+                "slow": {
+                    "value": "300ms"
+                },
+                "slower": {
+                    "value": "400ms"
+                },
+                "slowest": {
+                    "value": "500ms"
+                }
+            },
+            "easings": {
+                "ease-in": {
+                    "value": "cubic-bezier(0.42, 0, 1, 1)"
+                },
+                "ease-out": {
+                    "value": "cubic-bezier(0, 0, 0.58, 1)"
+                },
+                "ease-in-out": {
+                    "value": "cubic-bezier(0.42, 0, 0.58, 1)"
+                },
+                "ease-in-smooth": {
+                    "value": "cubic-bezier(0.32, 0.72, 0, 1)"
+                }
+            },
+            "fonts": {
+                "heading": {
+                    "value": "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\""
+                },
+                "body": {
+                    "value": "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\""
+                },
+                "mono": {
+                    "value": "SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace"
+                }
+            },
+            "fontSizes": {
+                "2xs": {
+                    "value": "0.625rem"
+                },
+                "xs": {
+                    "value": "0.75rem"
+                },
+                "sm": {
+                    "value": "0.875rem"
+                },
+                "md": {
+                    "value": "1rem"
+                },
+                "lg": {
+                    "value": "1.125rem"
+                },
+                "xl": {
+                    "value": "1.25rem"
+                },
+                "2xl": {
+                    "value": "1.5rem"
+                },
+                "3xl": {
+                    "value": "1.875rem"
+                },
+                "4xl": {
+                    "value": "2.25rem"
+                },
+                "5xl": {
+                    "value": "3rem"
+                },
+                "6xl": {
+                    "value": "3.75rem"
+                },
+                "7xl": {
+                    "value": "4.5rem"
+                },
+                "8xl": {
+                    "value": "6rem"
+                },
+                "9xl": {
+                    "value": "8rem"
+                }
+            },
+            "fontWeights": {
+                "thin": {
+                    "value": "100"
+                },
+                "extralight": {
+                    "value": "200"
+                },
+                "light": {
+                    "value": "300"
+                },
+                "normal": {
+                    "value": "400"
+                },
+                "medium": {
+                    "value": "500"
+                },
+                "semibold": {
+                    "value": "600"
+                },
+                "bold": {
+                    "value": "700"
+                },
+                "extrabold": {
+                    "value": "800"
+                },
+                "black": {
+                    "value": "900"
+                }
+            },
+            "letterSpacings": {
+                "tighter": {
+                    "value": "-0.05em"
+                },
+                "tight": {
+                    "value": "-0.025em"
+                },
+                "wide": {
+                    "value": "0.025em"
+                },
+                "wider": {
+                    "value": "0.05em"
+                },
+                "widest": {
+                    "value": "0.1em"
+                }
+            },
+            "lineHeights": {
+                "shorter": {
+                    "value": 1.25
+                },
+                "short": {
+                    "value": 1.375
+                },
+                "moderate": {
+                    "value": 1.5
+                },
+                "tall": {
+                    "value": 1.625
+                },
+                "taller": {
+                    "value": 2
+                }
+            },
+            "radii": {
+                "none": {
+                    "value": "0"
+                },
+                "2xs": {
+                    "value": "0.0625rem"
+                },
+                "xs": {
+                    "value": "0.125rem"
+                },
+                "sm": {
+                    "value": "0.25rem"
+                },
+                "md": {
+                    "value": "0.375rem"
+                },
+                "lg": {
+                    "value": "0.5rem"
+                },
+                "xl": {
+                    "value": "0.75rem"
+                },
+                "2xl": {
+                    "value": "1rem"
+                },
+                "3xl": {
+                    "value": "1.5rem"
+                },
+                "4xl": {
+                    "value": "2rem"
+                },
+                "full": {
+                    "value": "9999px"
+                }
+            },
+            "spacing": {
+                "1": {
+                    "value": "0.25rem"
+                },
+                "2": {
+                    "value": "0.5rem"
+                },
+                "3": {
+                    "value": "0.75rem"
+                },
+                "4": {
+                    "value": "1rem"
+                },
+                "5": {
+                    "value": "1.25rem"
+                },
+                "6": {
+                    "value": "1.5rem"
+                },
+                "7": {
+                    "value": "1.75rem"
+                },
+                "8": {
+                    "value": "2rem"
+                },
+                "9": {
+                    "value": "2.25rem"
+                },
+                "10": {
+                    "value": "2.5rem"
+                },
+                "11": {
+                    "value": "2.75rem"
+                },
+                "12": {
+                    "value": "3rem"
+                },
+                "14": {
+                    "value": "3.5rem"
+                },
+                "16": {
+                    "value": "4rem"
+                },
+                "20": {
+                    "value": "5rem"
+                },
+                "24": {
+                    "value": "6rem"
+                },
+                "28": {
+                    "value": "7rem"
+                },
+                "32": {
+                    "value": "8rem"
+                },
+                "36": {
+                    "value": "9rem"
+                },
+                "40": {
+                    "value": "10rem"
+                },
+                "44": {
+                    "value": "11rem"
+                },
+                "48": {
+                    "value": "12rem"
+                },
+                "52": {
+                    "value": "13rem"
+                },
+                "56": {
+                    "value": "14rem"
+                },
+                "60": {
+                    "value": "15rem"
+                },
+                "64": {
+                    "value": "16rem"
+                },
+                "72": {
+                    "value": "18rem"
+                },
+                "80": {
+                    "value": "20rem"
+                },
+                "96": {
+                    "value": "24rem"
+                },
+                "0.5": {
+                    "value": "0.125rem"
+                },
+                "1.5": {
+                    "value": "0.375rem"
+                },
+                "2.5": {
+                    "value": "0.625rem"
+                },
+                "3.5": {
+                    "value": "0.875rem"
+                },
+                "4.5": {
+                    "value": "1.125rem"
+                }
+            },
+            "sizes": {
+                "1": {
+                    "value": "0.25rem"
+                },
+                "2": {
+                    "value": "0.5rem"
+                },
+                "3": {
+                    "value": "0.75rem"
+                },
+                "4": {
+                    "value": "1rem"
+                },
+                "5": {
+                    "value": "1.25rem"
+                },
+                "6": {
+                    "value": "1.5rem"
+                },
+                "7": {
+                    "value": "1.75rem"
+                },
+                "8": {
+                    "value": "2rem"
+                },
+                "9": {
+                    "value": "2.25rem"
+                },
+                "10": {
+                    "value": "2.5rem"
+                },
+                "11": {
+                    "value": "2.75rem"
+                },
+                "12": {
+                    "value": "3rem"
+                },
+                "14": {
+                    "value": "3.5rem"
+                },
+                "16": {
+                    "value": "4rem"
+                },
+                "20": {
+                    "value": "5rem"
+                },
+                "24": {
+                    "value": "6rem"
+                },
+                "28": {
+                    "value": "7rem"
+                },
+                "32": {
+                    "value": "8rem"
+                },
+                "36": {
+                    "value": "9rem"
+                },
+                "40": {
+                    "value": "10rem"
+                },
+                "44": {
+                    "value": "11rem"
+                },
+                "48": {
+                    "value": "12rem"
+                },
+                "52": {
+                    "value": "13rem"
+                },
+                "56": {
+                    "value": "14rem"
+                },
+                "60": {
+                    "value": "15rem"
+                },
+                "64": {
+                    "value": "16rem"
+                },
+                "72": {
+                    "value": "18rem"
+                },
+                "80": {
+                    "value": "20rem"
+                },
+                "96": {
+                    "value": "24rem"
+                },
+                "3xs": {
+                    "value": "14rem"
+                },
+                "2xs": {
+                    "value": "16rem"
+                },
+                "xs": {
+                    "value": "20rem"
+                },
+                "sm": {
+                    "value": "24rem"
+                },
+                "md": {
+                    "value": "28rem"
+                },
+                "lg": {
+                    "value": "32rem"
+                },
+                "xl": {
+                    "value": "36rem"
+                },
+                "2xl": {
+                    "value": "42rem"
+                },
+                "3xl": {
+                    "value": "48rem"
+                },
+                "4xl": {
+                    "value": "56rem"
+                },
+                "5xl": {
+                    "value": "64rem"
+                },
+                "6xl": {
+                    "value": "72rem"
+                },
+                "7xl": {
+                    "value": "80rem"
+                },
+                "8xl": {
+                    "value": "90rem"
+                },
+                "0.5": {
+                    "value": "0.125rem"
+                },
+                "1.5": {
+                    "value": "0.375rem"
+                },
+                "2.5": {
+                    "value": "0.625rem"
+                },
+                "3.5": {
+                    "value": "0.875rem"
+                },
+                "4.5": {
+                    "value": "1.125rem"
+                },
+                "1/2": {
+                    "value": "50%"
+                },
+                "1/3": {
+                    "value": "33.333333%"
+                },
+                "2/3": {
+                    "value": "66.666667%"
+                },
+                "1/4": {
+                    "value": "25%"
+                },
+                "3/4": {
+                    "value": "75%"
+                },
+                "1/5": {
+                    "value": "20%"
+                },
+                "2/5": {
+                    "value": "40%"
+                },
+                "3/5": {
+                    "value": "60%"
+                },
+                "4/5": {
+                    "value": "80%"
+                },
+                "1/6": {
+                    "value": "16.666667%"
+                },
+                "2/6": {
+                    "value": "33.333333%"
+                },
+                "3/6": {
+                    "value": "50%"
+                },
+                "4/6": {
+                    "value": "66.666667%"
+                },
+                "5/6": {
+                    "value": "83.333333%"
+                },
+                "1/12": {
+                    "value": "8.333333%"
+                },
+                "2/12": {
+                    "value": "16.666667%"
+                },
+                "3/12": {
+                    "value": "25%"
+                },
+                "4/12": {
+                    "value": "33.333333%"
+                },
+                "5/12": {
+                    "value": "41.666667%"
+                },
+                "6/12": {
+                    "value": "50%"
+                },
+                "7/12": {
+                    "value": "58.333333%"
+                },
+                "8/12": {
+                    "value": "66.666667%"
+                },
+                "9/12": {
+                    "value": "75%"
+                },
+                "10/12": {
+                    "value": "83.333333%"
+                },
+                "11/12": {
+                    "value": "91.666667%"
+                },
+                "max": {
+                    "value": "max-content"
+                },
+                "min": {
+                    "value": "min-content"
+                },
+                "fit": {
+                    "value": "fit-content"
+                },
+                "prose": {
+                    "value": "60ch"
+                },
+                "full": {
+                    "value": "100%"
+                },
+                "dvh": {
+                    "value": "100dvh"
+                },
+                "svh": {
+                    "value": "100svh"
+                },
+                "lvh": {
+                    "value": "100lvh"
+                },
+                "dvw": {
+                    "value": "100dvw"
+                },
+                "svw": {
+                    "value": "100svw"
+                },
+                "lvw": {
+                    "value": "100lvw"
+                },
+                "vw": {
+                    "value": "100vw"
+                },
+                "vh": {
+                    "value": "100vh"
+                }
+            },
+            "zIndex": {
+                "hide": {
+                    "value": -1
+                },
+                "base": {
+                    "value": 0
+                },
+                "docked": {
+                    "value": 10
+                },
+                "dropdown": {
+                    "value": 1000
+                },
+                "sticky": {
+                    "value": 1100
+                },
+                "banner": {
+                    "value": 1200
+                },
+                "overlay": {
+                    "value": 1300
+                },
+                "modal": {
+                    "value": 1400
+                },
+                "popover": {
+                    "value": 1500
+                },
+                "skipNav": {
+                    "value": 1600
+                },
+                "toast": {
+                    "value": 1700
+                },
+                "tooltip": {
+                    "value": 1800
+                },
+                "max": {
+                    "value": 2147483647
+                }
+            },
+            "cursor": {
+                "button": {
+                    "value": "pointer"
+                },
+                "checkbox": {
+                    "value": "default"
+                },
+                "disabled": {
+                    "value": "not-allowed"
+                },
+                "menuitem": {
+                    "value": "default"
+                },
+                "option": {
+                    "value": "default"
+                },
+                "radio": {
+                    "value": "default"
+                },
+                "slider": {
+                    "value": "default"
+                },
+                "switch": {
+                    "value": "pointer"
+                }
+            }
+        },
+        "semanticTokens": {
+            "colors": {
+                "bg": {
+                    "DEFAULT": {
+                        "value": {
+                            "_light": "{colors.white}",
+                            "_dark": "{colors.black}"
+                        }
+                    },
+                    "subtle": {
+                        "value": {
+                            "_light": "{colors.gray.50}",
+                            "_dark": "{colors.gray.950}"
+                        }
+                    },
+                    "muted": {
+                        "value": {
+                            "_light": "{colors.gray.100}",
+                            "_dark": "{colors.gray.900}"
+                        }
+                    },
+                    "emphasized": {
+                        "value": {
+                            "_light": "{colors.gray.200}",
+                            "_dark": "{colors.gray.800}"
+                        }
+                    },
+                    "inverted": {
+                        "value": {
+                            "_light": "{colors.black}",
+                            "_dark": "{colors.white}"
+                        }
+                    },
+                    "panel": {
+                        "value": {
+                            "_light": "{colors.white}",
+                            "_dark": "{colors.gray.950}"
+                        }
+                    },
+                    "error": {
+                        "value": {
+                            "_light": "{colors.red.50}",
+                            "_dark": "{colors.red.950}"
+                        }
+                    },
+                    "warning": {
+                        "value": {
+                            "_light": "{colors.orange.50}",
+                            "_dark": "{colors.orange.950}"
+                        }
+                    },
+                    "success": {
+                        "value": {
+                            "_light": "{colors.green.50}",
+                            "_dark": "{colors.green.950}"
+                        }
+                    },
+                    "info": {
+                        "value": {
+                            "_light": "{colors.blue.50}",
+                            "_dark": "{colors.blue.950}"
+                        }
+                    }
+                },
+                "fg": {
+                    "DEFAULT": {
+                        "value": {
+                            "_light": "{colors.black}",
+                            "_dark": "{colors.gray.50}"
+                        }
+                    },
+                    "muted": {
+                        "value": {
+                            "_light": "{colors.gray.600}",
+                            "_dark": "{colors.gray.400}"
+                        }
+                    },
+                    "subtle": {
+                        "value": {
+                            "_light": "{colors.gray.400}",
+                            "_dark": "{colors.gray.500}"
+                        }
+                    },
+                    "inverted": {
+                        "value": {
+                            "_light": "{colors.gray.50}",
+                            "_dark": "{colors.black}"
+                        }
+                    },
+                    "error": {
+                        "value": {
+                            "_light": "{colors.red.500}",
+                            "_dark": "{colors.red.400}"
+                        }
+                    },
+                    "warning": {
+                        "value": {
+                            "_light": "{colors.orange.600}",
+                            "_dark": "{colors.orange.300}"
+                        }
+                    },
+                    "success": {
+                        "value": {
+                            "_light": "{colors.green.600}",
+                            "_dark": "{colors.green.300}"
+                        }
+                    },
+                    "info": {
+                        "value": {
+                            "_light": "{colors.blue.600}",
+                            "_dark": "{colors.blue.300}"
+                        }
+                    }
+                },
+                "border": {
+                    "DEFAULT": {
+                        "value": {
+                            "_light": "{colors.gray.200}",
+                            "_dark": "{colors.gray.800}"
+                        }
+                    },
+                    "muted": {
+                        "value": {
+                            "_light": "{colors.gray.100}",
+                            "_dark": "{colors.gray.900}"
+                        }
+                    },
+                    "subtle": {
+                        "value": {
+                            "_light": "{colors.gray.50}",
+                            "_dark": "{colors.gray.950}"
+                        }
+                    },
+                    "emphasized": {
+                        "value": {
+                            "_light": "{colors.gray.300}",
+                            "_dark": "{colors.gray.700}"
+                        }
+                    },
+                    "inverted": {
+                        "value": {
+                            "_light": "{colors.gray.800}",
+                            "_dark": "{colors.gray.200}"
+                        }
+                    },
+                    "error": {
+                        "value": {
+                            "_light": "{colors.red.500}",
+                            "_dark": "{colors.red.400}"
+                        }
+                    },
+                    "warning": {
+                        "value": {
+                            "_light": "{colors.orange.500}",
+                            "_dark": "{colors.orange.400}"
+                        }
+                    },
+                    "success": {
+                        "value": {
+                            "_light": "{colors.green.500}",
+                            "_dark": "{colors.green.400}"
+                        }
+                    },
+                    "info": {
+                        "value": {
+                            "_light": "{colors.blue.500}",
+                            "_dark": "{colors.blue.400}"
+                        }
+                    }
+                },
+                "gray": {
+                    "contrast": {
+                        "value": {
+                            "_light": "{colors.white}",
+                            "_dark": "{colors.black}"
+                        }
+                    },
+                    "fg": {
+                        "value": {
+                            "_light": "{colors.gray.800}",
+                            "_dark": "{colors.gray.200}"
+                        }
+                    },
+                    "subtle": {
+                        "value": {
+                            "_light": "{colors.gray.100}",
+                            "_dark": "{colors.gray.900}"
+                        }
+                    },
+                    "muted": {
+                        "value": {
+                            "_light": "{colors.gray.200}",
+                            "_dark": "{colors.gray.800}"
+                        }
+                    },
+                    "emphasized": {
+                        "value": {
+                            "_light": "{colors.gray.300}",
+                            "_dark": "{colors.gray.700}"
+                        }
+                    },
+                    "solid": {
+                        "value": {
+                            "_light": "{colors.gray.900}",
+                            "_dark": "{colors.white}"
+                        }
+                    },
+                    "focusRing": {
+                        "value": {
+                            "_light": "{colors.gray.800}",
+                            "_dark": "{colors.gray.200}"
+                        }
+                    }
+                },
+                "red": {
+                    "contrast": {
+                        "value": {
+                            "_light": "white",
+                            "_dark": "white"
+                        }
+                    },
+                    "fg": {
+                        "value": {
+                            "_light": "{colors.red.700}",
+                            "_dark": "{colors.red.300}"
+                        }
+                    },
+                    "subtle": {
+                        "value": {
+                            "_light": "{colors.red.100}",
+                            "_dark": "{colors.red.900}"
+                        }
+                    },
+                    "muted": {
+                        "value": {
+                            "_light": "{colors.red.200}",
+                            "_dark": "{colors.red.800}"
+                        }
+                    },
+                    "emphasized": {
+                        "value": {
+                            "_light": "{colors.red.300}",
+                            "_dark": "{colors.red.700}"
+                        }
+                    },
+                    "solid": {
+                        "value": {
+                            "_light": "{colors.red.600}",
+                            "_dark": "{colors.red.600}"
+                        }
+                    },
+                    "focusRing": {
+                        "value": {
+                            "_light": "{colors.red.600}",
+                            "_dark": "{colors.red.600}"
+                        }
+                    }
+                },
+                "orange": {
+                    "contrast": {
+                        "value": {
+                            "_light": "white",
+                            "_dark": "black"
+                        }
+                    },
+                    "fg": {
+                        "value": {
+                            "_light": "{colors.orange.700}",
+                            "_dark": "{colors.orange.300}"
+                        }
+                    },
+                    "subtle": {
+                        "value": {
+                            "_light": "{colors.orange.100}",
+                            "_dark": "{colors.orange.900}"
+                        }
+                    },
+                    "muted": {
+                        "value": {
+                            "_light": "{colors.orange.200}",
+                            "_dark": "{colors.orange.800}"
+                        }
+                    },
+                    "emphasized": {
+                        "value": {
+                            "_light": "{colors.orange.300}",
+                            "_dark": "{colors.orange.700}"
+                        }
+                    },
+                    "solid": {
+                        "value": {
+                            "_light": "{colors.orange.600}",
+                            "_dark": "{colors.orange.500}"
+                        }
+                    },
+                    "focusRing": {
+                        "value": {
+                            "_light": "{colors.orange.600}",
+                            "_dark": "{colors.orange.500}"
+                        }
+                    }
+                },
+                "green": {
+                    "contrast": {
+                        "value": {
+                            "_light": "white",
+                            "_dark": "white"
+                        }
+                    },
+                    "fg": {
+                        "value": {
+                            "_light": "{colors.green.700}",
+                            "_dark": "{colors.green.300}"
+                        }
+                    },
+                    "subtle": {
+                        "value": {
+                            "_light": "{colors.green.100}",
+                            "_dark": "{colors.green.900}"
+                        }
+                    },
+                    "muted": {
+                        "value": {
+                            "_light": "{colors.green.200}",
+                            "_dark": "{colors.green.800}"
+                        }
+                    },
+                    "emphasized": {
+                        "value": {
+                            "_light": "{colors.green.300}",
+                            "_dark": "{colors.green.700}"
+                        }
+                    },
+                    "solid": {
+                        "value": {
+                            "_light": "{colors.green.600}",
+                            "_dark": "{colors.green.600}"
+                        }
+                    },
+                    "focusRing": {
+                        "value": {
+                            "_light": "{colors.green.600}",
+                            "_dark": "{colors.green.600}"
+                        }
+                    }
+                },
+                "blue": {
+                    "contrast": {
+                        "value": {
+                            "_light": "white",
+                            "_dark": "white"
+                        }
+                    },
+                    "fg": {
+                        "value": {
+                            "_light": "{colors.blue.700}",
+                            "_dark": "{colors.blue.300}"
+                        }
+                    },
+                    "subtle": {
+                        "value": {
+                            "_light": "{colors.blue.100}",
+                            "_dark": "{colors.blue.900}"
+                        }
+                    },
+                    "muted": {
+                        "value": {
+                            "_light": "{colors.blue.200}",
+                            "_dark": "{colors.blue.800}"
+                        }
+                    },
+                    "emphasized": {
+                        "value": {
+                            "_light": "{colors.blue.300}",
+                            "_dark": "{colors.blue.700}"
+                        }
+                    },
+                    "solid": {
+                        "value": {
+                            "_light": "{colors.blue.600}",
+                            "_dark": "{colors.blue.600}"
+                        }
+                    },
+                    "focusRing": {
+                        "value": {
+                            "_light": "{colors.blue.600}",
+                            "_dark": "{colors.blue.600}"
+                        }
+                    }
+                },
+                "yellow": {
+                    "contrast": {
+                        "value": {
+                            "_light": "black",
+                            "_dark": "black"
+                        }
+                    },
+                    "fg": {
+                        "value": {
+                            "_light": "{colors.yellow.800}",
+                            "_dark": "{colors.yellow.300}"
+                        }
+                    },
+                    "subtle": {
+                        "value": {
+                            "_light": "{colors.yellow.100}",
+                            "_dark": "{colors.yellow.900}"
+                        }
+                    },
+                    "muted": {
+                        "value": {
+                            "_light": "{colors.yellow.200}",
+                            "_dark": "{colors.yellow.800}"
+                        }
+                    },
+                    "emphasized": {
+                        "value": {
+                            "_light": "{colors.yellow.300}",
+                            "_dark": "{colors.yellow.700}"
+                        }
+                    },
+                    "solid": {
+                        "value": {
+                            "_light": "{colors.yellow.300}",
+                            "_dark": "{colors.yellow.300}"
+                        }
+                    },
+                    "focusRing": {
+                        "value": {
+                            "_light": "{colors.yellow.300}",
+                            "_dark": "{colors.yellow.300}"
+                        }
+                    }
+                },
+                "teal": {
+                    "contrast": {
+                        "value": {
+                            "_light": "white",
+                            "_dark": "white"
+                        }
+                    },
+                    "fg": {
+                        "value": {
+                            "_light": "{colors.teal.700}",
+                            "_dark": "{colors.teal.300}"
+                        }
+                    },
+                    "subtle": {
+                        "value": {
+                            "_light": "{colors.teal.100}",
+                            "_dark": "{colors.teal.900}"
+                        }
+                    },
+                    "muted": {
+                        "value": {
+                            "_light": "{colors.teal.200}",
+                            "_dark": "{colors.teal.800}"
+                        }
+                    },
+                    "emphasized": {
+                        "value": {
+                            "_light": "{colors.teal.300}",
+                            "_dark": "{colors.teal.700}"
+                        }
+                    },
+                    "solid": {
+                        "value": {
+                            "_light": "{colors.teal.600}",
+                            "_dark": "{colors.teal.600}"
+                        }
+                    },
+                    "focusRing": {
+                        "value": {
+                            "_light": "{colors.teal.600}",
+                            "_dark": "{colors.teal.600}"
+                        }
+                    }
+                },
+                "purple": {
+                    "contrast": {
+                        "value": {
+                            "_light": "white",
+                            "_dark": "white"
+                        }
+                    },
+                    "fg": {
+                        "value": {
+                            "_light": "{colors.purple.700}",
+                            "_dark": "{colors.purple.300}"
+                        }
+                    },
+                    "subtle": {
+                        "value": {
+                            "_light": "{colors.purple.100}",
+                            "_dark": "{colors.purple.900}"
+                        }
+                    },
+                    "muted": {
+                        "value": {
+                            "_light": "{colors.purple.200}",
+                            "_dark": "{colors.purple.800}"
+                        }
+                    },
+                    "emphasized": {
+                        "value": {
+                            "_light": "{colors.purple.300}",
+                            "_dark": "{colors.purple.700}"
+                        }
+                    },
+                    "solid": {
+                        "value": {
+                            "_light": "{colors.purple.600}",
+                            "_dark": "{colors.purple.600}"
+                        }
+                    },
+                    "focusRing": {
+                        "value": {
+                            "_light": "{colors.purple.600}",
+                            "_dark": "{colors.purple.600}"
+                        }
+                    }
+                },
+                "pink": {
+                    "contrast": {
+                        "value": {
+                            "_light": "white",
+                            "_dark": "white"
+                        }
+                    },
+                    "fg": {
+                        "value": {
+                            "_light": "{colors.pink.700}",
+                            "_dark": "{colors.pink.300}"
+                        }
+                    },
+                    "subtle": {
+                        "value": {
+                            "_light": "{colors.pink.100}",
+                            "_dark": "{colors.pink.900}"
+                        }
+                    },
+                    "muted": {
+                        "value": {
+                            "_light": "{colors.pink.200}",
+                            "_dark": "{colors.pink.800}"
+                        }
+                    },
+                    "emphasized": {
+                        "value": {
+                            "_light": "{colors.pink.300}",
+                            "_dark": "{colors.pink.700}"
+                        }
+                    },
+                    "solid": {
+                        "value": {
+                            "_light": "{colors.pink.600}",
+                            "_dark": "{colors.pink.600}"
+                        }
+                    },
+                    "focusRing": {
+                        "value": {
+                            "_light": "{colors.pink.600}",
+                            "_dark": "{colors.pink.600}"
+                        }
+                    }
+                },
+                "cyan": {
+                    "contrast": {
+                        "value": {
+                            "_light": "white",
+                            "_dark": "white"
+                        }
+                    },
+                    "fg": {
+                        "value": {
+                            "_light": "{colors.cyan.700}",
+                            "_dark": "{colors.cyan.300}"
+                        }
+                    },
+                    "subtle": {
+                        "value": {
+                            "_light": "{colors.cyan.100}",
+                            "_dark": "{colors.cyan.900}"
+                        }
+                    },
+                    "muted": {
+                        "value": {
+                            "_light": "{colors.cyan.200}",
+                            "_dark": "{colors.cyan.800}"
+                        }
+                    },
+                    "emphasized": {
+                        "value": {
+                            "_light": "{colors.cyan.300}",
+                            "_dark": "{colors.cyan.700}"
+                        }
+                    },
+                    "solid": {
+                        "value": {
+                            "_light": "{colors.cyan.600}",
+                            "_dark": "{colors.cyan.600}"
+                        }
+                    },
+                    "focusRing": {
+                        "value": {
+                            "_light": "{colors.cyan.600}",
+                            "_dark": "{colors.cyan.600}"
+                        }
+                    }
+                }
+            },
+            "shadows": {
+                "xs": {
+                    "value": {
+                        "_light": "0px 1px 2px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/20}",
+                        "_dark": "0px 1px 1px {black/64}, 0px 0px 1px inset {colors.gray.300/20}"
+                    }
+                },
+                "sm": {
+                    "value": {
+                        "_light": "0px 2px 4px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
+                        "_dark": "0px 2px 4px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+                    }
+                },
+                "md": {
+                    "value": {
+                        "_light": "0px 4px 8px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
+                        "_dark": "0px 4px 8px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+                    }
+                },
+                "lg": {
+                    "value": {
+                        "_light": "0px 8px 16px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
+                        "_dark": "0px 8px 16px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+                    }
+                },
+                "xl": {
+                    "value": {
+                        "_light": "0px 16px 24px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
+                        "_dark": "0px 16px 24px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+                    }
+                },
+                "2xl": {
+                    "value": {
+                        "_light": "0px 24px 40px {colors.gray.900/16}, 0px 0px 1px {colors.gray.900/30}",
+                        "_dark": "0px 24px 40px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+                    }
+                },
+                "inner": {
+                    "value": {
+                        "_light": "inset 0 2px 4px 0 {black/5}",
+                        "_dark": "inset 0 2px 4px 0 black"
+                    }
+                },
+                "inset": {
+                    "value": {
+                        "_light": "inset 0 0 0 1px {black/5}",
+                        "_dark": "inset 0 0 0 1px {colors.gray.300/5}"
+                    }
+                }
+            },
+            "radii": {
+                "l1": {
+                    "value": "{radii.xs}"
+                },
+                "l2": {
+                    "value": "{radii.sm}"
+                },
+                "l3": {
+                    "value": "{radii.md}"
+                }
+            }
+        },
+        "recipes": {
+            "badge": {
+                "className": "chakra-badge",
+                "base": {
+                    "display": "inline-flex",
+                    "alignItems": "center",
+                    "borderRadius": "l2",
+                    "gap": "1",
+                    "fontWeight": "medium",
+                    "fontVariantNumeric": "tabular-nums",
+                    "whiteSpace": "nowrap",
+                    "userSelect": "none"
+                },
+                "variants": {
+                    "variant": {
+                        "solid": {
+                            "bg": "colorPalette.solid",
+                            "color": "colorPalette.contrast"
+                        },
+                        "subtle": {
+                            "bg": "colorPalette.subtle",
+                            "color": "colorPalette.fg"
+                        },
+                        "outline": {
+                            "color": "colorPalette.fg",
+                            "shadow": "inset 0 0 0px 1px var(--shadow-color)",
+                            "shadowColor": "colorPalette.muted"
+                        },
+                        "surface": {
+                            "bg": "colorPalette.subtle",
+                            "color": "colorPalette.fg",
+                            "shadow": "inset 0 0 0px 1px var(--shadow-color)",
+                            "shadowColor": "colorPalette.muted"
+                        },
+                        "plain": {
+                            "color": "colorPalette.fg"
+                        }
+                    },
+                    "size": {
+                        "xs": {
+                            "textStyle": "2xs",
+                            "px": "1",
+                            "minH": "4"
+                        },
+                        "sm": {
+                            "textStyle": "xs",
+                            "px": "1.5",
+                            "minH": "5"
+                        },
+                        "md": {
+                            "textStyle": "sm",
+                            "px": "2",
+                            "minH": "6"
+                        },
+                        "lg": {
+                            "textStyle": "sm",
+                            "px": "2.5",
+                            "minH": "7"
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "variant": "subtle",
+                    "size": "sm"
+                }
+            },
+            "button": {
+                "className": "chakra-button",
+                "base": {
+                    "display": "inline-flex",
+                    "appearance": "none",
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "userSelect": "none",
+                    "position": "relative",
+                    "borderRadius": "l2",
+                    "whiteSpace": "nowrap",
+                    "verticalAlign": "middle",
+                    "borderWidth": "1px",
+                    "borderColor": "transparent",
+                    "cursor": "button",
+                    "flexShrink": "0",
+                    "outline": "0",
+                    "lineHeight": "1.2",
+                    "isolation": "isolate",
+                    "fontWeight": "medium",
+                    "transitionProperty": "common",
+                    "transitionDuration": "moderate",
+                    "focusVisibleRing": "outside",
+                    "_disabled": {
+                        "layerStyle": "disabled"
+                    },
+                    "_icon": {
+                        "flexShrink": "0"
+                    }
+                },
+                "variants": {
+                    "size": {
+                        "2xs": {
+                            "h": "6",
+                            "minW": "6",
+                            "textStyle": "xs",
+                            "px": "2",
+                            "gap": "1",
+                            "_icon": {
+                                "width": "3.5",
+                                "height": "3.5"
+                            }
+                        },
+                        "xs": {
+                            "h": "8",
+                            "minW": "8",
+                            "textStyle": "xs",
+                            "px": "2.5",
+                            "gap": "1",
+                            "_icon": {
+                                "width": "4",
+                                "height": "4"
+                            }
+                        },
+                        "sm": {
+                            "h": "9",
+                            "minW": "9",
+                            "px": "3.5",
+                            "textStyle": "sm",
+                            "gap": "2",
+                            "_icon": {
+                                "width": "4",
+                                "height": "4"
+                            }
+                        },
+                        "md": {
+                            "h": "10",
+                            "minW": "10",
+                            "textStyle": "sm",
+                            "px": "4",
+                            "gap": "2",
+                            "_icon": {
+                                "width": "5",
+                                "height": "5"
+                            }
+                        },
+                        "lg": {
+                            "h": "11",
+                            "minW": "11",
+                            "textStyle": "md",
+                            "px": "5",
+                            "gap": "3",
+                            "_icon": {
+                                "width": "5",
+                                "height": "5"
+                            }
+                        },
+                        "xl": {
+                            "h": "12",
+                            "minW": "12",
+                            "textStyle": "md",
+                            "px": "5",
+                            "gap": "2.5",
+                            "_icon": {
+                                "width": "5",
+                                "height": "5"
+                            }
+                        },
+                        "2xl": {
+                            "h": "16",
+                            "minW": "16",
+                            "textStyle": "lg",
+                            "px": "7",
+                            "gap": "3",
+                            "_icon": {
+                                "width": "6",
+                                "height": "6"
+                            }
+                        }
+                    },
+                    "variant": {
+                        "solid": {
+                            "bg": "colorPalette.solid",
+                            "color": "colorPalette.contrast",
+                            "_hover": {
+                                "bg": "colorPalette.solid/90"
+                            },
+                            "_expanded": {
+                                "bg": "colorPalette.solid/90"
+                            }
+                        },
+                        "subtle": {
+                            "bg": "colorPalette.subtle",
+                            "color": "colorPalette.fg",
+                            "_hover": {
+                                "bg": "colorPalette.muted"
+                            },
+                            "_expanded": {
+                                "bg": "colorPalette.muted"
+                            }
+                        },
+                        "surface": {
+                            "bg": "colorPalette.subtle",
+                            "color": "colorPalette.fg",
+                            "shadow": "0 0 0px 1px var(--shadow-color)",
+                            "shadowColor": "colorPalette.muted",
+                            "_hover": {
+                                "bg": "colorPalette.muted"
+                            },
+                            "_expanded": {
+                                "bg": "colorPalette.muted"
+                            }
+                        },
+                        "outline": {
+                            "borderWidth": "1px",
+                            "borderColor": "colorPalette.muted",
+                            "color": "colorPalette.fg",
+                            "_hover": {
+                                "bg": "colorPalette.subtle"
+                            },
+                            "_expanded": {
+                                "bg": "colorPalette.subtle"
+                            }
+                        },
+                        "ghost": {
+                            "color": "colorPalette.fg",
+                            "_hover": {
+                                "bg": "colorPalette.subtle"
+                            },
+                            "_expanded": {
+                                "bg": "colorPalette.subtle"
+                            }
+                        },
+                        "plain": {
+                            "color": "colorPalette.fg"
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md",
+                    "variant": "solid"
+                }
+            },
+            "code": {
+                "className": "chakra-code",
+                "base": {
+                    "fontFamily": "mono",
+                    "alignItems": "center",
+                    "display": "inline-flex",
+                    "borderRadius": "l2"
+                },
+                "variants": {
+                    "variant": {
+                        "solid": {
+                            "bg": "colorPalette.solid",
+                            "color": "colorPalette.contrast"
+                        },
+                        "subtle": {
+                            "bg": "colorPalette.subtle",
+                            "color": "colorPalette.fg"
+                        },
+                        "outline": {
+                            "color": "colorPalette.fg",
+                            "shadow": "inset 0 0 0px 1px var(--shadow-color)",
+                            "shadowColor": "colorPalette.muted"
+                        },
+                        "surface": {
+                            "bg": "colorPalette.subtle",
+                            "color": "colorPalette.fg",
+                            "shadow": "inset 0 0 0px 1px var(--shadow-color)",
+                            "shadowColor": "colorPalette.muted"
+                        },
+                        "plain": {
+                            "color": "colorPalette.fg"
+                        }
+                    },
+                    "size": {
+                        "xs": {
+                            "textStyle": "2xs",
+                            "px": "1",
+                            "minH": "4"
+                        },
+                        "sm": {
+                            "textStyle": "xs",
+                            "px": "1.5",
+                            "minH": "5"
+                        },
+                        "md": {
+                            "textStyle": "sm",
+                            "px": "2",
+                            "minH": "6"
+                        },
+                        "lg": {
+                            "textStyle": "sm",
+                            "px": "2.5",
+                            "minH": "7"
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "variant": "subtle",
+                    "size": "sm"
+                }
+            },
+            "container": {
+                "className": "chakra-container",
+                "base": {
+                    "position": "relative",
+                    "maxWidth": "8xl",
+                    "w": "100%",
+                    "mx": "auto",
+                    "px": {
+                        "base": "4",
+                        "md": "6",
+                        "lg": "8"
+                    }
+                },
+                "variants": {
+                    "centerContent": {
+                        "true": {
+                            "display": "flex",
+                            "flexDirection": "column",
+                            "alignItems": "center"
+                        }
+                    },
+                    "fluid": {
+                        "true": {
+                            "maxWidth": "full"
+                        }
+                    }
+                }
+            },
+            "heading": {
+                "className": "chakra-heading",
+                "base": {
+                    "fontFamily": "heading",
+                    "fontWeight": "semibold"
+                },
+                "variants": {
+                    "size": {
+                        "xs": {
+                            "textStyle": "xs"
+                        },
+                        "sm": {
+                            "textStyle": "sm"
+                        },
+                        "md": {
+                            "textStyle": "md"
+                        },
+                        "lg": {
+                            "textStyle": "lg"
+                        },
+                        "xl": {
+                            "textStyle": "xl"
+                        },
+                        "2xl": {
+                            "textStyle": "2xl"
+                        },
+                        "3xl": {
+                            "textStyle": "3xl"
+                        },
+                        "4xl": {
+                            "textStyle": "4xl"
+                        },
+                        "5xl": {
+                            "textStyle": "5xl"
+                        },
+                        "6xl": {
+                            "textStyle": "6xl"
+                        },
+                        "7xl": {
+                            "textStyle": "7xl"
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "xl"
+                }
+            },
+            "input": {
+                "className": "chakra-input",
+                "base": {
+                    "width": "100%",
+                    "minWidth": "0",
+                    "outline": "0",
+                    "position": "relative",
+                    "appearance": "none",
+                    "textAlign": "start",
+                    "borderRadius": "l2",
+                    "_disabled": {
+                        "layerStyle": "disabled"
+                    },
+                    "height": "var(--input-height)",
+                    "minW": "var(--input-height)",
+                    "--focus-color": "colors.colorPalette.focusRing",
+                    "--error-color": "colors.border.error",
+                    "_invalid": {
+                        "focusRingColor": "var(--error-color)",
+                        "borderColor": "var(--error-color)"
+                    }
+                },
+                "variants": {
+                    "size": {
+                        "2xs": {
+                            "textStyle": "xs",
+                            "px": "2",
+                            "--input-height": "sizes.7"
+                        },
+                        "xs": {
+                            "textStyle": "xs",
+                            "px": "2",
+                            "--input-height": "sizes.8"
+                        },
+                        "sm": {
+                            "textStyle": "sm",
+                            "px": "2.5",
+                            "--input-height": "sizes.9"
+                        },
+                        "md": {
+                            "textStyle": "sm",
+                            "px": "3",
+                            "--input-height": "sizes.10"
+                        },
+                        "lg": {
+                            "textStyle": "md",
+                            "px": "4",
+                            "--input-height": "sizes.11"
+                        },
+                        "xl": {
+                            "textStyle": "md",
+                            "px": "4.5",
+                            "--input-height": "sizes.12"
+                        },
+                        "2xl": {
+                            "textStyle": "lg",
+                            "px": "5",
+                            "--input-height": "sizes.16"
+                        }
+                    },
+                    "variant": {
+                        "outline": {
+                            "bg": "transparent",
+                            "borderWidth": "1px",
+                            "borderColor": "border",
+                            "focusVisibleRing": "inside"
+                        },
+                        "subtle": {
+                            "borderWidth": "1px",
+                            "borderColor": "transparent",
+                            "bg": "bg.muted",
+                            "focusVisibleRing": "inside"
+                        },
+                        "flushed": {
+                            "bg": "transparent",
+                            "borderBottomWidth": "1px",
+                            "borderBottomColor": "border",
+                            "borderRadius": "0",
+                            "px": "0",
+                            "_focusVisible": {
+                                "borderColor": "var(--focus-color)",
+                                "boxShadow": "0px 1px 0px 0px var(--focus-color)"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md",
+                    "variant": "outline"
+                }
+            },
+            "inputAddon": {
+                "className": "chakra-input-addon",
+                "base": {
+                    "flex": "0 0 auto",
+                    "width": "auto",
+                    "display": "flex",
+                    "alignItems": "center",
+                    "whiteSpace": "nowrap",
+                    "alignSelf": "stretch",
+                    "borderRadius": "l2"
+                },
+                "variants": {
+                    "size": {
+                        "2xs": {
+                            "textStyle": "xs",
+                            "px": "2",
+                            "--input-height": "sizes.7"
+                        },
+                        "xs": {
+                            "textStyle": "xs",
+                            "px": "2",
+                            "--input-height": "sizes.8"
+                        },
+                        "sm": {
+                            "textStyle": "sm",
+                            "px": "2.5",
+                            "--input-height": "sizes.9"
+                        },
+                        "md": {
+                            "textStyle": "sm",
+                            "px": "3",
+                            "--input-height": "sizes.10"
+                        },
+                        "lg": {
+                            "textStyle": "md",
+                            "px": "4",
+                            "--input-height": "sizes.11"
+                        },
+                        "xl": {
+                            "textStyle": "md",
+                            "px": "4.5",
+                            "--input-height": "sizes.12"
+                        },
+                        "2xl": {
+                            "textStyle": "lg",
+                            "px": "5",
+                            "--input-height": "sizes.16"
+                        }
+                    },
+                    "variant": {
+                        "outline": {
+                            "borderWidth": "1px",
+                            "borderColor": "border",
+                            "bg": "bg.muted"
+                        },
+                        "subtle": {
+                            "borderWidth": "1px",
+                            "borderColor": "transparent",
+                            "bg": "bg.emphasized"
+                        },
+                        "flushed": {
+                            "borderBottom": "1px solid",
+                            "borderColor": "inherit",
+                            "borderRadius": "0",
+                            "px": "0",
+                            "bg": "transparent"
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md",
+                    "variant": "outline"
+                }
+            },
+            "kbd": {
+                "className": "chakra-kbd",
+                "base": {
+                    "display": "inline-flex",
+                    "alignItems": "center",
+                    "fontWeight": "medium",
+                    "fontFamily": "mono",
+                    "flexShrink": "0",
+                    "whiteSpace": "nowrap",
+                    "wordSpacing": "-0.5em",
+                    "userSelect": "none",
+                    "px": "1",
+                    "borderRadius": "l2"
+                },
+                "variants": {
+                    "variant": {
+                        "raised": {
+                            "bg": "colorPalette.subtle",
+                            "color": "colorPalette.fg",
+                            "borderWidth": "1px",
+                            "borderBottomWidth": "2px",
+                            "borderColor": "colorPalette.muted"
+                        },
+                        "outline": {
+                            "borderWidth": "1px",
+                            "color": "colorPalette.fg"
+                        },
+                        "subtle": {
+                            "bg": "colorPalette.muted",
+                            "color": "colorPalette.fg"
+                        },
+                        "plain": {
+                            "color": "colorPalette.fg"
+                        }
+                    },
+                    "size": {
+                        "sm": {
+                            "textStyle": "xs",
+                            "height": "4.5"
+                        },
+                        "md": {
+                            "textStyle": "sm",
+                            "height": "5"
+                        },
+                        "lg": {
+                            "textStyle": "md",
+                            "height": "6"
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md",
+                    "variant": "raised"
+                }
+            },
+            "link": {
+                "className": "chakra-link",
+                "base": {
+                    "display": "inline-flex",
+                    "alignItems": "center",
+                    "outline": "none",
+                    "gap": "1.5",
+                    "cursor": "pointer",
+                    "borderRadius": "l1",
+                    "focusRing": "outside"
+                },
+                "variants": {
+                    "variant": {
+                        "underline": {
+                            "color": "colorPalette.fg",
+                            "textDecoration": "underline",
+                            "textUnderlineOffset": "3px",
+                            "textDecorationColor": "currentColor/20"
+                        },
+                        "plain": {
+                            "color": "colorPalette.fg",
+                            "_hover": {
+                                "textDecoration": "underline",
+                                "textUnderlineOffset": "3px",
+                                "textDecorationColor": "currentColor/20"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "variant": "plain"
+                }
+            },
+            "mark": {
+                "className": "chakra-mark",
+                "base": {
+                    "bg": "transparent",
+                    "color": "inherit",
+                    "whiteSpace": "nowrap"
+                },
+                "variants": {
+                    "variant": {
+                        "subtle": {
+                            "bg": "colorPalette.subtle",
+                            "color": "inherit"
+                        },
+                        "solid": {
+                            "bg": "colorPalette.solid",
+                            "color": "colorPalette.contrast"
+                        },
+                        "text": {
+                            "fontWeight": "medium"
+                        },
+                        "plain": {}
+                    }
+                }
+            },
+            "separator": {
+                "className": "chakra-separator",
+                "base": {
+                    "display": "block",
+                    "borderColor": "border"
+                },
+                "variants": {
+                    "variant": {
+                        "solid": {
+                            "borderStyle": "solid"
+                        },
+                        "dashed": {
+                            "borderStyle": "dashed"
+                        },
+                        "dotted": {
+                            "borderStyle": "dotted"
+                        }
+                    },
+                    "orientation": {
+                        "vertical": {
+                            "height": "100%",
+                            "borderInlineStartWidth": "var(--separator-thickness)"
+                        },
+                        "horizontal": {
+                            "width": "100%",
+                            "borderTopWidth": "var(--separator-thickness)"
+                        }
+                    },
+                    "size": {
+                        "xs": {
+                            "--separator-thickness": "0.5px"
+                        },
+                        "sm": {
+                            "--separator-thickness": "1px"
+                        },
+                        "md": {
+                            "--separator-thickness": "2px"
+                        },
+                        "lg": {
+                            "--separator-thickness": "3px"
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "sm",
+                    "variant": "solid",
+                    "orientation": "horizontal"
+                }
+            },
+            "skeleton": {
+                "className": "chakra-skeleton",
+                "base": {},
+                "variants": {
+                    "loading": {
+                        "true": {
+                            "borderRadius": "l2",
+                            "boxShadow": "none",
+                            "backgroundClip": "padding-box",
+                            "cursor": "default",
+                            "color": "transparent",
+                            "pointerEvents": "none",
+                            "userSelect": "none",
+                            "flexShrink": "0",
+                            "&::before, &::after, *": {
+                                "visibility": "hidden"
+                            }
+                        },
+                        "false": {
+                            "background": "unset",
+                            "animation": "fade-in var(--fade-duration, 0.1s) ease-out !important"
+                        }
+                    },
+                    "variant": {
+                        "pulse": {
+                            "background": "bg.emphasized",
+                            "animation": "pulse",
+                            "animationDuration": "var(--duration, 1.2s)"
+                        },
+                        "shine": {
+                            "--animate-from": "200%",
+                            "--animate-to": "-200%",
+                            "--start-color": "colors.bg.muted",
+                            "--end-color": "colors.bg.emphasized",
+                            "backgroundImage": "linear-gradient(270deg,var(--start-color),var(--end-color),var(--end-color),var(--start-color))",
+                            "backgroundSize": "400% 100%",
+                            "animation": "bg-position var(--duration, 5s) ease-in-out infinite"
+                        },
+                        "none": {
+                            "animation": "none"
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "variant": "pulse",
+                    "loading": true
+                }
+            },
+            "skipNavLink": {
+                "className": "chakra-skip-nav",
+                "base": {
+                    "display": "inline-flex",
+                    "bg": "bg.panel",
+                    "padding": "2.5",
+                    "borderRadius": "l2",
+                    "fontWeight": "semibold",
+                    "focusVisibleRing": "outside",
+                    "textStyle": "sm",
+                    "userSelect": "none",
+                    "border": "0",
+                    "height": "1px",
+                    "width": "1px",
+                    "margin": "-1px",
+                    "outline": "0",
+                    "overflow": "hidden",
+                    "position": "absolute",
+                    "clip": "rect(0 0 0 0)",
+                    "_focusVisible": {
+                        "clip": "auto",
+                        "width": "auto",
+                        "height": "auto",
+                        "position": "fixed",
+                        "top": "6",
+                        "insetStart": "6"
+                    }
+                }
+            },
+            "spinner": {
+                "className": "chakra-spinner",
+                "base": {
+                    "display": "inline-block",
+                    "borderColor": "currentColor",
+                    "borderStyle": "solid",
+                    "borderWidth": "2px",
+                    "borderRadius": "full",
+                    "width": "var(--spinner-size)",
+                    "height": "var(--spinner-size)",
+                    "animation": "spin",
+                    "animationDuration": "slowest",
+                    "--spinner-track-color": "transparent",
+                    "borderBottomColor": "var(--spinner-track-color)",
+                    "borderInlineStartColor": "var(--spinner-track-color)"
+                },
+                "variants": {
+                    "size": {
+                        "inherit": {
+                            "--spinner-size": "1em"
+                        },
+                        "xs": {
+                            "--spinner-size": "sizes.3"
+                        },
+                        "sm": {
+                            "--spinner-size": "sizes.4"
+                        },
+                        "md": {
+                            "--spinner-size": "sizes.5"
+                        },
+                        "lg": {
+                            "--spinner-size": "sizes.8"
+                        },
+                        "xl": {
+                            "--spinner-size": "sizes.10"
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md"
+                }
+            },
+            "textarea": {
+                "className": "chakra-textarea",
+                "base": {
+                    "width": "100%",
+                    "minWidth": "0",
+                    "outline": "0",
+                    "position": "relative",
+                    "appearance": "none",
+                    "textAlign": "start",
+                    "borderRadius": "l2",
+                    "_disabled": {
+                        "layerStyle": "disabled"
+                    },
+                    "--focus-color": "colors.colorPalette.focusRing",
+                    "--error-color": "colors.border.error",
+                    "_invalid": {
+                        "focusRingColor": "var(--error-color)",
+                        "borderColor": "var(--error-color)"
+                    }
+                },
+                "variants": {
+                    "size": {
+                        "xs": {
+                            "textStyle": "xs",
+                            "px": "2",
+                            "py": "1.5",
+                            "scrollPaddingBottom": "1.5"
+                        },
+                        "sm": {
+                            "textStyle": "sm",
+                            "px": "2.5",
+                            "py": "2",
+                            "scrollPaddingBottom": "2"
+                        },
+                        "md": {
+                            "textStyle": "sm",
+                            "px": "3",
+                            "py": "2",
+                            "scrollPaddingBottom": "2"
+                        },
+                        "lg": {
+                            "textStyle": "md",
+                            "px": "4",
+                            "py": "3",
+                            "scrollPaddingBottom": "3"
+                        },
+                        "xl": {
+                            "textStyle": "md",
+                            "px": "4.5",
+                            "py": "3.5",
+                            "scrollPaddingBottom": "3.5"
+                        }
+                    },
+                    "variant": {
+                        "outline": {
+                            "bg": "transparent",
+                            "borderWidth": "1px",
+                            "borderColor": "border",
+                            "focusVisibleRing": "inside"
+                        },
+                        "subtle": {
+                            "borderWidth": "1px",
+                            "borderColor": "transparent",
+                            "bg": "bg.muted",
+                            "focusVisibleRing": "inside"
+                        },
+                        "flushed": {
+                            "bg": "transparent",
+                            "borderBottomWidth": "1px",
+                            "borderBottomColor": "border",
+                            "borderRadius": "0",
+                            "px": "0",
+                            "_focusVisible": {
+                                "borderColor": "var(--focus-color)",
+                                "boxShadow": "0px 1px 0px 0px var(--focus-color)"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md",
+                    "variant": "outline"
+                }
+            },
+            "icon": {
+                "className": "chakra-icon",
+                "base": {
+                    "display": "inline-block",
+                    "lineHeight": "1em",
+                    "flexShrink": "0",
+                    "color": "currentcolor",
+                    "verticalAlign": "middle",
+                    "width": "var(--icon-size)",
+                    "height": "var(--icon-size)"
+                },
+                "variants": {
+                    "size": {
+                        "inherit": {
+                            "--icon-size": "1em"
+                        },
+                        "xs": {
+                            "--icon-size": "sizes.3"
+                        },
+                        "sm": {
+                            "--icon-size": "sizes.4"
+                        },
+                        "md": {
+                            "--icon-size": "sizes.5"
+                        },
+                        "lg": {
+                            "--icon-size": "sizes.6"
+                        },
+                        "xl": {
+                            "--icon-size": "sizes.7"
+                        },
+                        "2xl": {
+                            "--icon-size": "sizes.8"
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "inherit"
+                }
+            },
+            "checkmark": {
+                "className": "chakra-checkmark",
+                "base": {
+                    "display": "inline-flex",
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "flexShrink": "0",
+                    "color": "white",
+                    "borderWidth": "1px",
+                    "borderColor": "transparent",
+                    "borderRadius": "l1",
+                    "focusVisibleRing": "outside",
+                    "_icon": {
+                        "boxSize": "full"
+                    },
+                    "_invalid": {
+                        "colorPalette": "red",
+                        "borderColor": "border.error"
+                    },
+                    "_disabled": {
+                        "opacity": "0.5"
+                    }
+                },
+                "variants": {
+                    "size": {
+                        "xs": {
+                            "boxSize": "3"
+                        },
+                        "sm": {
+                            "boxSize": "4"
+                        },
+                        "md": {
+                            "boxSize": "5",
+                            "p": "0.5"
+                        },
+                        "lg": {
+                            "boxSize": "6",
+                            "p": "0.5"
+                        }
+                    },
+                    "variant": {
+                        "solid": {
+                            "borderColor": "border",
+                            "&:is([data-state=checked], [data-state=indeterminate])": {
+                                "bg": "colorPalette.solid",
+                                "color": "colorPalette.contrast",
+                                "borderColor": "colorPalette.solid"
+                            }
+                        },
+                        "outline": {
+                            "borderColor": "border",
+                            "&:is([data-state=checked], [data-state=indeterminate])": {
+                                "color": "colorPalette.fg",
+                                "borderColor": "colorPalette.solid"
+                            }
+                        },
+                        "subtle": {
+                            "bg": "colorPalette.muted",
+                            "borderColor": "colorPalette.muted",
+                            "&:is([data-state=checked], [data-state=indeterminate])": {
+                                "color": "colorPalette.fg"
+                            }
+                        },
+                        "plain": {
+                            "&:is([data-state=checked], [data-state=indeterminate])": {
+                                "color": "colorPalette.fg"
+                            }
+                        },
+                        "inverted": {
+                            "borderColor": "border",
+                            "color": "colorPalette.fg",
+                            "&:is([data-state=checked], [data-state=indeterminate])": {
+                                "borderColor": "colorPalette.solid"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "variant": "solid",
+                    "size": "md"
+                }
+            },
+            "radiomark": {
+                "className": "chakra-radiomark",
+                "base": {
+                    "display": "inline-flex",
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "flexShrink": 0,
+                    "verticalAlign": "top",
+                    "color": "white",
+                    "borderWidth": "1px",
+                    "borderColor": "transparent",
+                    "borderRadius": "full",
+                    "cursor": "radio",
+                    "_focusVisible": {
+                        "outline": "2px solid",
+                        "outlineColor": "colorPalette.focusRing",
+                        "outlineOffset": "2px"
+                    },
+                    "_invalid": {
+                        "colorPalette": "red",
+                        "borderColor": "red.500"
+                    },
+                    "_disabled": {
+                        "opacity": "0.5",
+                        "cursor": "disabled"
+                    },
+                    "& .dot": {
+                        "height": "100%",
+                        "width": "100%",
+                        "borderRadius": "full",
+                        "bg": "currentColor",
+                        "scale": "0.4"
+                    }
+                },
+                "variants": {
+                    "variant": {
+                        "solid": {
+                            "borderWidth": "1px",
+                            "borderColor": "border",
+                            "_checked": {
+                                "bg": "colorPalette.solid",
+                                "color": "colorPalette.contrast",
+                                "borderColor": "colorPalette.solid"
+                            }
+                        },
+                        "subtle": {
+                            "borderWidth": "1px",
+                            "bg": "colorPalette.muted",
+                            "borderColor": "colorPalette.muted",
+                            "color": "transparent",
+                            "_checked": {
+                                "color": "colorPalette.fg"
+                            }
+                        },
+                        "outline": {
+                            "borderWidth": "1px",
+                            "borderColor": "inherit",
+                            "_checked": {
+                                "color": "colorPalette.fg",
+                                "borderColor": "colorPalette.solid"
+                            },
+                            "& .dot": {
+                                "scale": "0.6"
+                            }
+                        },
+                        "inverted": {
+                            "bg": "bg",
+                            "borderWidth": "1px",
+                            "borderColor": "inherit",
+                            "_checked": {
+                                "color": "colorPalette.solid",
+                                "borderColor": "currentcolor"
+                            }
+                        }
+                    },
+                    "size": {
+                        "xs": {
+                            "boxSize": "3"
+                        },
+                        "sm": {
+                            "boxSize": "4"
+                        },
+                        "md": {
+                            "boxSize": "5"
+                        },
+                        "lg": {
+                            "boxSize": "6"
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "variant": "solid",
+                    "size": "md"
+                }
+            },
+            "colorSwatch": {
+                "className": "color-swatch",
+                "base": {
+                    "boxSize": "var(--swatch-size)",
+                    "shadow": "inset 0 0 0 1px rgba(0, 0, 0, 0.1)",
+                    "--checker-size": "8px",
+                    "--checker-bg": "colors.bg",
+                    "--checker-fg": "colors.bg.emphasized",
+                    "background": "linear-gradient(var(--color), var(--color)), repeating-conic-gradient(var(--checker-fg) 0%, var(--checker-fg) 25%, var(--checker-bg) 0%, var(--checker-bg) 50%) 0% 50% / var(--checker-size) var(--checker-size) !important",
+                    "display": "inline-flex",
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "flexShrink": "0"
+                },
+                "variants": {
+                    "size": {
+                        "2xs": {
+                            "--swatch-size": "sizes.3.5"
+                        },
+                        "xs": {
+                            "--swatch-size": "sizes.4"
+                        },
+                        "sm": {
+                            "--swatch-size": "sizes.4.5"
+                        },
+                        "md": {
+                            "--swatch-size": "sizes.5"
+                        },
+                        "lg": {
+                            "--swatch-size": "sizes.6"
+                        },
+                        "xl": {
+                            "--swatch-size": "sizes.7"
+                        },
+                        "2xl": {
+                            "--swatch-size": "sizes.8"
+                        },
+                        "inherit": {
+                            "--swatch-size": "inherit"
+                        },
+                        "full": {
+                            "--swatch-size": "100%"
+                        }
+                    },
+                    "shape": {
+                        "square": {
+                            "borderRadius": "none"
+                        },
+                        "circle": {
+                            "borderRadius": "full"
+                        },
+                        "rounded": {
+                            "borderRadius": "l1"
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md",
+                    "shape": "rounded"
+                }
+            }
+        },
+        "slotRecipes": {
+            "accordion": {
+                "className": "chakra-accordion",
+                "slots": [
+                    "root",
+                    "item",
+                    "itemTrigger",
+                    "itemContent",
+                    "itemIndicator",
+                    "itemBody"
+                ],
+                "base": {
+                    "root": {
+                        "width": "full",
+                        "--accordion-radius": "radii.l2"
+                    },
+                    "item": {
+                        "overflowAnchor": "none"
+                    },
+                    "itemTrigger": {
+                        "display": "flex",
+                        "alignItems": "center",
+                        "width": "full",
+                        "outline": "0",
+                        "gap": "3",
+                        "fontWeight": "medium",
+                        "borderRadius": "var(--accordion-radius)",
+                        "_focusVisible": {
+                            "outline": "2px solid",
+                            "outlineColor": "colorPalette.focusRing"
+                        },
+                        "_disabled": {
+                            "layerStyle": "disabled"
+                        }
+                    },
+                    "itemBody": {
+                        "pt": "var(--accordion-padding-y)",
+                        "pb": "calc(var(--accordion-padding-y) * 2)"
+                    },
+                    "itemContent": {
+                        "overflow": "hidden",
+                        "borderRadius": "var(--accordion-radius)",
+                        "_open": {
+                            "animationName": "expand-height, fade-in",
+                            "animationDuration": "moderate"
+                        },
+                        "_closed": {
+                            "animationName": "collapse-height, fade-out",
+                            "animationDuration": "moderate"
+                        }
+                    },
+                    "itemIndicator": {
+                        "transition": "rotate 0.2s",
+                        "transformOrigin": "center",
+                        "color": "fg.subtle",
+                        "_open": {
+                            "rotate": "180deg"
+                        },
+                        "_icon": {
+                            "width": "1.2em",
+                            "height": "1.2em"
+                        }
+                    }
+                },
+                "variants": {
+                    "variant": {
+                        "outline": {
+                            "item": {
+                                "borderBottomWidth": "1px"
+                            }
+                        },
+                        "subtle": {
+                            "itemTrigger": {
+                                "px": "var(--accordion-padding-x)"
+                            },
+                            "itemContent": {
+                                "px": "var(--accordion-padding-x)"
+                            },
+                            "item": {
+                                "borderRadius": "var(--accordion-radius)",
+                                "_open": {
+                                    "bg": "colorPalette.subtle"
+                                }
+                            }
+                        },
+                        "enclosed": {
+                            "root": {
+                                "borderWidth": "1px",
+                                "borderRadius": "var(--accordion-radius)",
+                                "divideY": "1px",
+                                "overflow": "hidden"
+                            },
+                            "itemTrigger": {
+                                "px": "var(--accordion-padding-x)"
+                            },
+                            "itemContent": {
+                                "px": "var(--accordion-padding-x)"
+                            },
+                            "item": {
+                                "_open": {
+                                    "bg": "bg.subtle"
+                                }
+                            }
+                        },
+                        "plain": {}
+                    },
+                    "size": {
+                        "sm": {
+                            "root": {
+                                "--accordion-padding-x": "spacing.3",
+                                "--accordion-padding-y": "spacing.2"
+                            },
+                            "itemTrigger": {
+                                "textStyle": "sm",
+                                "py": "var(--accordion-padding-y)"
+                            }
+                        },
+                        "md": {
+                            "root": {
+                                "--accordion-padding-x": "spacing.4",
+                                "--accordion-padding-y": "spacing.2"
+                            },
+                            "itemTrigger": {
+                                "textStyle": "md",
+                                "py": "var(--accordion-padding-y)"
+                            }
+                        },
+                        "lg": {
+                            "root": {
+                                "--accordion-padding-x": "spacing.4.5",
+                                "--accordion-padding-y": "spacing.2.5"
+                            },
+                            "itemTrigger": {
+                                "textStyle": "lg",
+                                "py": "var(--accordion-padding-y)"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md",
+                    "variant": "outline"
+                }
+            },
+            "actionBar": {
+                "className": "chakra-action-bar",
+                "slots": [
+                    "positioner",
+                    "content",
+                    "separator",
+                    "selectionTrigger",
+                    "closeTrigger"
+                ],
+                "base": {
+                    "positioner": {
+                        "position": "fixed",
+                        "display": "flex",
+                        "justifyContent": "center",
+                        "pointerEvents": "none",
+                        "insetInline": "0",
+                        "top": "unset",
+                        "bottom": "calc(env(safe-area-inset-bottom) + 20px)"
+                    },
+                    "content": {
+                        "bg": "bg.panel",
+                        "shadow": "md",
+                        "display": "flex",
+                        "alignItems": "center",
+                        "gap": "3",
+                        "borderRadius": "l3",
+                        "py": "2.5",
+                        "px": "3",
+                        "pointerEvents": "auto",
+                        "translate": "calc(-1 * var(--scrollbar-width) / 2) 0px",
+                        "_open": {
+                            "animationName": "slide-from-bottom, fade-in",
+                            "animationDuration": "moderate"
+                        },
+                        "_closed": {
+                            "animationName": "slide-to-bottom, fade-out",
+                            "animationDuration": "faster"
+                        }
+                    },
+                    "separator": {
+                        "width": "1px",
+                        "height": "5",
+                        "bg": "border"
+                    },
+                    "selectionTrigger": {
+                        "display": "inline-flex",
+                        "alignItems": "center",
+                        "gap": "2",
+                        "alignSelf": "stretch",
+                        "textStyle": "sm",
+                        "px": "4",
+                        "py": "1",
+                        "borderRadius": "l2",
+                        "borderWidth": "1px",
+                        "borderStyle": "dashed"
+                    }
+                }
+            },
+            "alert": {
+                "slots": [
+                    "title",
+                    "description",
+                    "root",
+                    "indicator",
+                    "content"
+                ],
+                "className": "chakra-alert",
+                "base": {
+                    "root": {
+                        "width": "full",
+                        "display": "flex",
+                        "alignItems": "flex-start",
+                        "position": "relative",
+                        "borderRadius": "l3"
+                    },
+                    "title": {
+                        "fontWeight": "medium"
+                    },
+                    "description": {
+                        "display": "inline"
+                    },
+                    "indicator": {
+                        "display": "inline-flex",
+                        "alignItems": "center",
+                        "justifyContent": "center",
+                        "flexShrink": "0",
+                        "width": "1em",
+                        "height": "1em",
+                        "_icon": {
+                            "boxSize": "full"
+                        }
+                    },
+                    "content": {
+                        "display": "flex",
+                        "flex": "1",
+                        "gap": "1"
+                    }
+                },
+                "variants": {
+                    "status": {
+                        "info": {
+                            "root": {
+                                "colorPalette": "blue"
+                            }
+                        },
+                        "warning": {
+                            "root": {
+                                "colorPalette": "orange"
+                            }
+                        },
+                        "success": {
+                            "root": {
+                                "colorPalette": "green"
+                            }
+                        },
+                        "error": {
+                            "root": {
+                                "colorPalette": "red"
+                            }
+                        },
+                        "neutral": {
+                            "root": {
+                                "colorPalette": "gray"
+                            }
+                        }
+                    },
+                    "inline": {
+                        "true": {
+                            "content": {
+                                "display": "inline-flex",
+                                "flexDirection": "row",
+                                "alignItems": "center"
+                            }
+                        },
+                        "false": {
+                            "content": {
+                                "display": "flex",
+                                "flexDirection": "column"
+                            }
+                        }
+                    },
+                    "variant": {
+                        "subtle": {
+                            "root": {
+                                "bg": "colorPalette.subtle",
+                                "color": "colorPalette.fg"
+                            }
+                        },
+                        "surface": {
+                            "root": {
+                                "bg": "colorPalette.subtle",
+                                "color": "colorPalette.fg",
+                                "shadow": "inset 0 0 0px 1px var(--shadow-color)",
+                                "shadowColor": "colorPalette.muted"
+                            },
+                            "indicator": {
+                                "color": "colorPalette.fg"
+                            }
+                        },
+                        "outline": {
+                            "root": {
+                                "color": "colorPalette.fg",
+                                "shadow": "inset 0 0 0px 1px var(--shadow-color)",
+                                "shadowColor": "colorPalette.muted"
+                            },
+                            "indicator": {
+                                "color": "colorPalette.fg"
+                            }
+                        },
+                        "solid": {
+                            "root": {
+                                "bg": "colorPalette.solid",
+                                "color": "colorPalette.contrast"
+                            },
+                            "indicator": {
+                                "color": "colorPalette.contrast"
+                            }
+                        }
+                    },
+                    "size": {
+                        "sm": {
+                            "root": {
+                                "gap": "2",
+                                "px": "3",
+                                "py": "3",
+                                "textStyle": "xs"
+                            },
+                            "indicator": {
+                                "textStyle": "lg"
+                            }
+                        },
+                        "md": {
+                            "root": {
+                                "gap": "3",
+                                "px": "4",
+                                "py": "4",
+                                "textStyle": "sm"
+                            },
+                            "indicator": {
+                                "textStyle": "xl"
+                            }
+                        },
+                        "lg": {
+                            "root": {
+                                "gap": "3",
+                                "px": "4",
+                                "py": "4",
+                                "textStyle": "md"
+                            },
+                            "indicator": {
+                                "textStyle": "2xl"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "status": "info",
+                    "variant": "subtle",
+                    "size": "md",
+                    "inline": false
+                }
+            },
+            "avatar": {
+                "slots": [
+                    "root",
+                    "image",
+                    "fallback"
+                ],
+                "className": "chakra-avatar",
+                "base": {
+                    "root": {
+                        "display": "inline-flex",
+                        "alignItems": "center",
+                        "justifyContent": "center",
+                        "fontWeight": "medium",
+                        "position": "relative",
+                        "verticalAlign": "top",
+                        "flexShrink": "0",
+                        "userSelect": "none",
+                        "width": "var(--avatar-size)",
+                        "height": "var(--avatar-size)",
+                        "fontSize": "var(--avatar-font-size)",
+                        "borderRadius": "var(--avatar-radius)",
+                        "&[data-group-item]": {
+                            "borderWidth": "2px",
+                            "borderColor": "bg"
+                        }
+                    },
+                    "image": {
+                        "width": "100%",
+                        "height": "100%",
+                        "objectFit": "cover",
+                        "borderRadius": "var(--avatar-radius)"
+                    },
+                    "fallback": {
+                        "lineHeight": "1",
+                        "textTransform": "uppercase",
+                        "fontWeight": "medium",
+                        "fontSize": "var(--avatar-font-size)",
+                        "borderRadius": "var(--avatar-radius)"
+                    }
+                },
+                "variants": {
+                    "size": {
+                        "full": {
+                            "root": {
+                                "--avatar-size": "100%",
+                                "--avatar-font-size": "100%"
+                            }
+                        },
+                        "2xs": {
+                            "root": {
+                                "--avatar-font-size": "fontSizes.2xs",
+                                "--avatar-size": "sizes.6"
+                            }
+                        },
+                        "xs": {
+                            "root": {
+                                "--avatar-font-size": "fontSizes.xs",
+                                "--avatar-size": "sizes.8"
+                            }
+                        },
+                        "sm": {
+                            "root": {
+                                "--avatar-font-size": "fontSizes.sm",
+                                "--avatar-size": "sizes.9"
+                            }
+                        },
+                        "md": {
+                            "root": {
+                                "--avatar-font-size": "fontSizes.md",
+                                "--avatar-size": "sizes.10"
+                            }
+                        },
+                        "lg": {
+                            "root": {
+                                "--avatar-font-size": "fontSizes.md",
+                                "--avatar-size": "sizes.11"
+                            }
+                        },
+                        "xl": {
+                            "root": {
+                                "--avatar-font-size": "fontSizes.lg",
+                                "--avatar-size": "sizes.12"
+                            }
+                        },
+                        "2xl": {
+                            "root": {
+                                "--avatar-font-size": "fontSizes.xl",
+                                "--avatar-size": "sizes.16"
+                            }
+                        }
+                    },
+                    "variant": {
+                        "solid": {
+                            "root": {
+                                "bg": "colorPalette.solid",
+                                "color": "colorPalette.contrast"
+                            }
+                        },
+                        "subtle": {
+                            "root": {
+                                "bg": "colorPalette.muted",
+                                "color": "colorPalette.fg"
+                            }
+                        },
+                        "outline": {
+                            "root": {
+                                "color": "colorPalette.fg",
+                                "borderWidth": "1px",
+                                "borderColor": "colorPalette.muted"
+                            }
+                        }
+                    },
+                    "shape": {
+                        "square": {},
+                        "rounded": {
+                            "root": {
+                                "--avatar-radius": "radii.l3"
+                            }
+                        },
+                        "full": {
+                            "root": {
+                                "--avatar-radius": "radii.full"
+                            }
+                        }
+                    },
+                    "borderless": {
+                        "true": {
+                            "root": {
+                                "&[data-group-item]": {
+                                    "borderWidth": "0px"
+                                }
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md",
+                    "shape": "full",
+                    "variant": "subtle"
+                }
+            },
+            "blockquote": {
+                "className": "chakra-blockquote",
+                "slots": [
+                    "root",
+                    "icon",
+                    "content",
+                    "caption"
+                ],
+                "base": {
+                    "root": {
+                        "position": "relative",
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "gap": "2"
+                    },
+                    "caption": {
+                        "textStyle": "sm",
+                        "color": "fg.muted"
+                    },
+                    "icon": {
+                        "boxSize": "5"
+                    }
+                },
+                "variants": {
+                    "justify": {
+                        "start": {
+                            "root": {
+                                "alignItems": "flex-start",
+                                "textAlign": "start"
+                            }
+                        },
+                        "center": {
+                            "root": {
+                                "alignItems": "center",
+                                "textAlign": "center"
+                            }
+                        },
+                        "end": {
+                            "root": {
+                                "alignItems": "flex-end",
+                                "textAlign": "end"
+                            }
+                        }
+                    },
+                    "variant": {
+                        "subtle": {
+                            "root": {
+                                "paddingX": "5",
+                                "borderStartWidth": "4px",
+                                "borderStartColor": "colorPalette.muted"
+                            },
+                            "icon": {
+                                "color": "colorPalette.fg"
+                            }
+                        },
+                        "solid": {
+                            "root": {
+                                "paddingX": "5",
+                                "borderStartWidth": "4px",
+                                "borderStartColor": "colorPalette.solid"
+                            },
+                            "icon": {
+                                "color": "colorPalette.solid"
+                            }
+                        },
+                        "plain": {
+                            "root": {
+                                "paddingX": "5"
+                            },
+                            "icon": {
+                                "color": "colorPalette.solid"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "variant": "subtle",
+                    "justify": "start"
+                }
+            },
+            "breadcrumb": {
+                "className": "chakra-breadcrumb",
+                "slots": [
+                    "link",
+                    "currentLink",
+                    "item",
+                    "list",
+                    "root",
+                    "ellipsis",
+                    "separator"
+                ],
+                "base": {
+                    "list": {
+                        "display": "flex",
+                        "alignItems": "center",
+                        "wordBreak": "break-word",
+                        "color": "fg.muted"
+                    },
+                    "link": {
+                        "outline": "0",
+                        "textDecoration": "none",
+                        "borderRadius": "l1",
+                        "focusRing": "outside",
+                        "display": "inline-flex",
+                        "alignItems": "center",
+                        "gap": "2"
+                    },
+                    "item": {
+                        "display": "inline-flex",
+                        "alignItems": "center"
+                    },
+                    "separator": {
+                        "color": "fg.muted",
+                        "opacity": "0.8",
+                        "_icon": {
+                            "boxSize": "1em"
+                        }
+                    },
+                    "ellipsis": {
+                        "display": "inline-flex",
+                        "alignItems": "center",
+                        "justifyContent": "center",
+                        "_icon": {
+                            "boxSize": "1em"
+                        }
+                    }
+                },
+                "variants": {
+                    "variant": {
+                        "underline": {
+                            "link": {
+                                "color": "colorPalette.fg",
+                                "textDecoration": "underline",
+                                "textUnderlineOffset": "0.2em",
+                                "textDecorationColor": "colorPalette.muted"
+                            },
+                            "currentLink": {
+                                "color": "colorPalette.fg"
+                            }
+                        },
+                        "plain": {
+                            "link": {
+                                "color": "fg.muted",
+                                "_hover": {
+                                    "color": "fg"
+                                }
+                            },
+                            "currentLink": {
+                                "color": "fg"
+                            }
+                        }
+                    },
+                    "size": {
+                        "sm": {
+                            "list": {
+                                "gap": "1",
+                                "textStyle": "xs"
+                            }
+                        },
+                        "md": {
+                            "list": {
+                                "gap": "1.5",
+                                "textStyle": "sm"
+                            }
+                        },
+                        "lg": {
+                            "list": {
+                                "gap": "2",
+                                "textStyle": "md"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "variant": "plain",
+                    "size": "md"
+                }
+            },
+            "card": {
+                "className": "chakra-card",
+                "slots": [
+                    "root",
+                    "header",
+                    "body",
+                    "footer",
+                    "title",
+                    "description"
+                ],
+                "base": {
+                    "root": {
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "position": "relative",
+                        "minWidth": "0",
+                        "wordWrap": "break-word",
+                        "borderRadius": "l3",
+                        "color": "fg",
+                        "textAlign": "start"
+                    },
+                    "title": {
+                        "fontWeight": "semibold"
+                    },
+                    "description": {
+                        "color": "fg.muted",
+                        "fontSize": "sm"
+                    },
+                    "header": {
+                        "paddingInline": "var(--card-padding)",
+                        "paddingTop": "var(--card-padding)",
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "gap": "1.5"
+                    },
+                    "body": {
+                        "padding": "var(--card-padding)",
+                        "flex": "1",
+                        "display": "flex",
+                        "flexDirection": "column"
+                    },
+                    "footer": {
+                        "display": "flex",
+                        "alignItems": "center",
+                        "gap": "2",
+                        "paddingInline": "var(--card-padding)",
+                        "paddingBottom": "var(--card-padding)"
+                    }
+                },
+                "variants": {
+                    "size": {
+                        "sm": {
+                            "root": {
+                                "--card-padding": "spacing.4"
+                            },
+                            "title": {
+                                "textStyle": "md"
+                            }
+                        },
+                        "md": {
+                            "root": {
+                                "--card-padding": "spacing.6"
+                            },
+                            "title": {
+                                "textStyle": "lg"
+                            }
+                        },
+                        "lg": {
+                            "root": {
+                                "--card-padding": "spacing.7"
+                            },
+                            "title": {
+                                "textStyle": "xl"
+                            }
+                        }
+                    },
+                    "variant": {
+                        "elevated": {
+                            "root": {
+                                "bg": "bg.panel",
+                                "boxShadow": "md"
+                            }
+                        },
+                        "outline": {
+                            "root": {
+                                "bg": "bg.panel",
+                                "borderWidth": "1px",
+                                "borderColor": "border"
+                            }
+                        },
+                        "subtle": {
+                            "root": {
+                                "bg": "bg.muted"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "variant": "outline",
+                    "size": "md"
+                }
+            },
+            "checkbox": {
+                "slots": [
+                    "root",
+                    "label",
+                    "control",
+                    "indicator",
+                    "group"
+                ],
+                "className": "chakra-checkbox",
+                "base": {
+                    "root": {
+                        "display": "inline-flex",
+                        "gap": "2",
+                        "alignItems": "center",
+                        "verticalAlign": "top",
+                        "position": "relative"
+                    },
+                    "control": {
+                        "display": "inline-flex",
+                        "alignItems": "center",
+                        "justifyContent": "center",
+                        "flexShrink": "0",
+                        "color": "white",
+                        "borderWidth": "1px",
+                        "borderColor": "transparent",
+                        "borderRadius": "l1",
+                        "focusVisibleRing": "outside",
+                        "_icon": {
+                            "boxSize": "full"
+                        },
+                        "_invalid": {
+                            "colorPalette": "red",
+                            "borderColor": "border.error"
+                        },
+                        "_disabled": {
+                            "opacity": "0.5"
+                        }
+                    },
+                    "label": {
+                        "fontWeight": "medium",
+                        "userSelect": "none",
+                        "_disabled": {
+                            "opacity": "0.5"
+                        }
+                    }
+                },
+                "variants": {
+                    "size": {
+                        "xs": {
+                            "root": {
+                                "gap": "1.5"
+                            },
+                            "label": {
+                                "textStyle": "xs"
+                            },
+                            "control": {
+                                "boxSize": "3"
+                            }
+                        },
+                        "sm": {
+                            "root": {
+                                "gap": "2"
+                            },
+                            "label": {
+                                "textStyle": "sm"
+                            },
+                            "control": {
+                                "boxSize": "4"
+                            }
+                        },
+                        "md": {
+                            "root": {
+                                "gap": "2.5"
+                            },
+                            "label": {
+                                "textStyle": "sm"
+                            },
+                            "control": {
+                                "boxSize": "5",
+                                "p": "0.5"
+                            }
+                        },
+                        "lg": {
+                            "root": {
+                                "gap": "3"
+                            },
+                            "label": {
+                                "textStyle": "md"
+                            },
+                            "control": {
+                                "boxSize": "6",
+                                "p": "0.5"
+                            }
+                        }
+                    },
+                    "variant": {
+                        "outline": {
+                            "control": {
+                                "borderColor": "border",
+                                "&:is([data-state=checked], [data-state=indeterminate])": {
+                                    "color": "colorPalette.fg",
+                                    "borderColor": "colorPalette.solid"
+                                }
+                            }
+                        },
+                        "solid": {
+                            "control": {
+                                "borderColor": "border",
+                                "&:is([data-state=checked], [data-state=indeterminate])": {
+                                    "bg": "colorPalette.solid",
+                                    "color": "colorPalette.contrast",
+                                    "borderColor": "colorPalette.solid"
+                                }
+                            }
+                        },
+                        "subtle": {
+                            "control": {
+                                "bg": "colorPalette.muted",
+                                "borderColor": "colorPalette.muted",
+                                "&:is([data-state=checked], [data-state=indeterminate])": {
+                                    "color": "colorPalette.fg"
+                                }
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "variant": "solid",
+                    "size": "md"
+                }
+            },
+            "checkboxCard": {
+                "slots": [
+                    "root",
+                    "control",
+                    "label",
+                    "description",
+                    "addon",
+                    "indicator",
+                    "content"
+                ],
+                "className": "chakra-checkbox-card",
+                "base": {
+                    "root": {
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "userSelect": "none",
+                        "position": "relative",
+                        "borderRadius": "l2",
+                        "flex": "1",
+                        "focusVisibleRing": "outside",
+                        "_disabled": {
+                            "opacity": "0.8",
+                            "borderColor": "border.subtle"
+                        },
+                        "_invalid": {
+                            "outline": "2px solid",
+                            "outlineColor": "border.error"
+                        }
+                    },
+                    "control": {
+                        "display": "inline-flex",
+                        "flex": "1",
+                        "position": "relative",
+                        "borderRadius": "inherit",
+                        "justifyContent": "var(--checkbox-card-justify)",
+                        "alignItems": "var(--checkbox-card-align)"
+                    },
+                    "label": {
+                        "fontWeight": "medium",
+                        "display": "flex",
+                        "alignItems": "center",
+                        "gap": "2",
+                        "_disabled": {
+                            "opacity": "0.5"
+                        }
+                    },
+                    "description": {
+                        "opacity": "0.64",
+                        "textStyle": "sm"
+                    },
+                    "addon": {
+                        "_disabled": {
+                            "opacity": "0.5"
+                        }
+                    },
+                    "indicator": {
+                        "display": "inline-flex",
+                        "alignItems": "center",
+                        "justifyContent": "center",
+                        "flexShrink": "0",
+                        "color": "white",
+                        "borderWidth": "1px",
+                        "borderColor": "transparent",
+                        "borderRadius": "l1",
+                        "focusVisibleRing": "outside",
+                        "_icon": {
+                            "boxSize": "full"
+                        },
+                        "_invalid": {
+                            "colorPalette": "red",
+                            "borderColor": "border.error"
+                        },
+                        "_disabled": {
+                            "opacity": "0.5"
+                        }
+                    },
+                    "content": {
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "flex": "1",
+                        "gap": "1",
+                        "justifyContent": "var(--checkbox-card-justify)",
+                        "alignItems": "var(--checkbox-card-align)"
+                    }
+                },
+                "variants": {
+                    "size": {
+                        "sm": {
+                            "root": {
+                                "textStyle": "sm"
+                            },
+                            "control": {
+                                "padding": "3",
+                                "gap": "1.5"
+                            },
+                            "addon": {
+                                "px": "3",
+                                "py": "1.5",
+                                "borderTopWidth": "1px"
+                            },
+                            "indicator": {
+                                "boxSize": "4"
+                            }
+                        },
+                        "md": {
+                            "root": {
+                                "textStyle": "sm"
+                            },
+                            "control": {
+                                "padding": "4",
+                                "gap": "2.5"
+                            },
+                            "addon": {
+                                "px": "4",
+                                "py": "2",
+                                "borderTopWidth": "1px"
+                            },
+                            "indicator": {
+                                "boxSize": "5",
+                                "p": "0.5"
+                            }
+                        },
+                        "lg": {
+                            "root": {
+                                "textStyle": "md"
+                            },
+                            "control": {
+                                "padding": "4",
+                                "gap": "3.5"
+                            },
+                            "addon": {
+                                "px": "4",
+                                "py": "2",
+                                "borderTopWidth": "1px"
+                            },
+                            "indicator": {
+                                "boxSize": "6",
+                                "p": "0.5"
+                            }
+                        }
+                    },
+                    "variant": {
+                        "surface": {
+                            "root": {
+                                "borderWidth": "1px",
+                                "borderColor": "border",
+                                "_checked": {
+                                    "bg": "colorPalette.subtle",
+                                    "color": "colorPalette.fg",
+                                    "borderColor": "colorPalette.muted"
+                                },
+                                "_disabled": {
+                                    "bg": "bg.muted"
+                                }
+                            },
+                            "indicator": {
+                                "borderColor": "border",
+                                "&:is([data-state=checked], [data-state=indeterminate])": {
+                                    "bg": "colorPalette.solid",
+                                    "color": "colorPalette.contrast",
+                                    "borderColor": "colorPalette.solid"
+                                }
+                            }
+                        },
+                        "subtle": {
+                            "root": {
+                                "bg": "bg.muted"
+                            },
+                            "control": {
+                                "_checked": {
+                                    "bg": "colorPalette.muted",
+                                    "color": "colorPalette.fg"
+                                }
+                            },
+                            "indicator": {
+                                "&:is([data-state=checked], [data-state=indeterminate])": {
+                                    "color": "colorPalette.fg"
+                                }
+                            }
+                        },
+                        "outline": {
+                            "root": {
+                                "borderWidth": "1px",
+                                "borderColor": "border",
+                                "_checked": {
+                                    "boxShadow": "0 0 0 1px var(--shadow-color)",
+                                    "boxShadowColor": "colorPalette.solid",
+                                    "borderColor": "colorPalette.solid"
+                                }
+                            },
+                            "indicator": {
+                                "borderColor": "border",
+                                "&:is([data-state=checked], [data-state=indeterminate])": {
+                                    "bg": "colorPalette.solid",
+                                    "color": "colorPalette.contrast",
+                                    "borderColor": "colorPalette.solid"
+                                }
+                            }
+                        },
+                        "solid": {
+                            "root": {
+                                "borderWidth": "1px",
+                                "_checked": {
+                                    "bg": "colorPalette.solid",
+                                    "color": "colorPalette.contrast",
+                                    "borderColor": "colorPalette.solid"
+                                }
+                            },
+                            "indicator": {
+                                "borderColor": "border",
+                                "color": "colorPalette.fg",
+                                "&:is([data-state=checked], [data-state=indeterminate])": {
+                                    "borderColor": "colorPalette.solid"
+                                }
+                            }
+                        }
+                    },
+                    "justify": {
+                        "start": {
+                            "root": {
+                                "--checkbox-card-justify": "flex-start"
+                            }
+                        },
+                        "end": {
+                            "root": {
+                                "--checkbox-card-justify": "flex-end"
+                            }
+                        },
+                        "center": {
+                            "root": {
+                                "--checkbox-card-justify": "center"
+                            }
+                        }
+                    },
+                    "align": {
+                        "start": {
+                            "root": {
+                                "--checkbox-card-align": "flex-start"
+                            },
+                            "content": {
+                                "textAlign": "start"
+                            }
+                        },
+                        "end": {
+                            "root": {
+                                "--checkbox-card-align": "flex-end"
+                            },
+                            "content": {
+                                "textAlign": "end"
+                            }
+                        },
+                        "center": {
+                            "root": {
+                                "--checkbox-card-align": "center"
+                            },
+                            "content": {
+                                "textAlign": "center"
+                            }
+                        }
+                    },
+                    "orientation": {
+                        "vertical": {
+                            "control": {
+                                "flexDirection": "column"
+                            }
+                        },
+                        "horizontal": {
+                            "control": {
+                                "flexDirection": "row"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md",
+                    "variant": "outline",
+                    "align": "start",
+                    "orientation": "horizontal"
+                }
+            },
+            "collapsible": {
+                "slots": [
+                    "root",
+                    "trigger",
+                    "content"
+                ],
+                "className": "chakra-collapsible",
+                "base": {
+                    "content": {
+                        "overflow": "hidden",
+                        "_open": {
+                            "animationName": "expand-height, fade-in",
+                            "animationDuration": "moderate"
+                        },
+                        "_closed": {
+                            "animationName": "collapse-height, fade-out",
+                            "animationDuration": "moderate"
+                        }
+                    }
+                }
+            },
+            "dataList": {
+                "slots": [
+                    "root",
+                    "item",
+                    "itemLabel",
+                    "itemValue"
+                ],
+                "className": "chakra-data-list",
+                "base": {
+                    "itemLabel": {
+                        "display": "flex",
+                        "alignItems": "center",
+                        "gap": "1"
+                    },
+                    "itemValue": {
+                        "display": "flex",
+                        "minWidth": "0",
+                        "flex": "1"
+                    }
+                },
+                "variants": {
+                    "orientation": {
+                        "horizontal": {
+                            "root": {
+                                "display": "flex",
+                                "flexDirection": "column"
+                            },
+                            "item": {
+                                "display": "inline-flex",
+                                "alignItems": "center",
+                                "gap": "4"
+                            },
+                            "itemLabel": {
+                                "minWidth": "120px"
+                            }
+                        },
+                        "vertical": {
+                            "root": {
+                                "display": "flex",
+                                "flexDirection": "column"
+                            },
+                            "item": {
+                                "display": "flex",
+                                "flexDirection": "column",
+                                "gap": "1"
+                            }
+                        }
+                    },
+                    "size": {
+                        "sm": {
+                            "root": {
+                                "gap": "3"
+                            },
+                            "item": {
+                                "textStyle": "xs"
+                            }
+                        },
+                        "md": {
+                            "root": {
+                                "gap": "4"
+                            },
+                            "item": {
+                                "textStyle": "sm"
+                            }
+                        },
+                        "lg": {
+                            "root": {
+                                "gap": "5"
+                            },
+                            "item": {
+                                "textStyle": "md"
+                            }
+                        }
+                    },
+                    "variant": {
+                        "subtle": {
+                            "itemLabel": {
+                                "color": "fg.muted"
+                            }
+                        },
+                        "bold": {
+                            "itemLabel": {
+                                "fontWeight": "medium"
+                            },
+                            "itemValue": {
+                                "color": "fg.muted"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md",
+                    "orientation": "vertical",
+                    "variant": "subtle"
+                }
+            },
+            "dialog": {
+                "slots": [
+                    "trigger",
+                    "backdrop",
+                    "positioner",
+                    "content",
+                    "title",
+                    "description",
+                    "closeTrigger",
+                    "header",
+                    "body",
+                    "footer",
+                    "backdrop"
+                ],
+                "className": "chakra-dialog",
+                "base": {
+                    "backdrop": {
+                        "bg": "blackAlpha.500",
+                        "pos": "fixed",
+                        "left": 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",
+                        "left": 0,
+                        "top": 0,
+                        "--dialog-z-index": "zIndex.modal",
+                        "zIndex": "calc(var(--dialog-z-index) + var(--layer-index, 0))",
+                        "justifyContent": "center",
+                        "overscrollBehaviorY": "none"
+                    },
+                    "content": {
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "position": "relative",
+                        "width": "100%",
+                        "outline": 0,
+                        "borderRadius": "l3",
+                        "textStyle": "sm",
+                        "my": "var(--dialog-margin, var(--dialog-base-margin))",
+                        "--dialog-z-index": "zIndex.modal",
+                        "zIndex": "calc(var(--dialog-z-index) + var(--layer-index, 0))",
+                        "bg": "bg.panel",
+                        "boxShadow": "lg",
+                        "_open": {
+                            "animationDuration": "moderate"
+                        },
+                        "_closed": {
+                            "animationDuration": "faster"
+                        }
+                    },
+                    "header": {
+                        "flex": 0,
+                        "px": "6",
+                        "pt": "6",
+                        "pb": "4"
+                    },
+                    "body": {
+                        "flex": "1",
+                        "px": "6",
+                        "pt": "2",
+                        "pb": "6"
+                    },
+                    "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": {
+                    "placement": {
+                        "center": {
+                            "positioner": {
+                                "alignItems": "center"
+                            },
+                            "content": {
+                                "--dialog-base-margin": "auto",
+                                "mx": "auto"
+                            }
+                        },
+                        "top": {
+                            "positioner": {
+                                "alignItems": "flex-start"
+                            },
+                            "content": {
+                                "--dialog-base-margin": "spacing.16",
+                                "mx": "auto"
+                            }
+                        },
+                        "bottom": {
+                            "positioner": {
+                                "alignItems": "flex-end"
+                            },
+                            "content": {
+                                "--dialog-base-margin": "spacing.16",
+                                "mx": "auto"
+                            }
+                        }
+                    },
+                    "scrollBehavior": {
+                        "inside": {
+                            "positioner": {
+                                "overflow": "hidden"
+                            },
+                            "content": {
+                                "maxH": "calc(100% - 7.5rem)"
+                            },
+                            "body": {
+                                "overflow": "auto"
+                            }
+                        },
+                        "outside": {
+                            "positioner": {
+                                "overflow": "auto",
+                                "pointerEvents": "auto"
+                            }
+                        }
+                    },
+                    "size": {
+                        "xs": {
+                            "content": {
+                                "maxW": "sm"
+                            }
+                        },
+                        "sm": {
+                            "content": {
+                                "maxW": "md"
+                            }
+                        },
+                        "md": {
+                            "content": {
+                                "maxW": "lg"
+                            }
+                        },
+                        "lg": {
+                            "content": {
+                                "maxW": "2xl"
+                            }
+                        },
+                        "xl": {
+                            "content": {
+                                "maxW": "4xl"
+                            }
+                        },
+                        "cover": {
+                            "positioner": {
+                                "padding": "10"
+                            },
+                            "content": {
+                                "width": "100%",
+                                "height": "100%",
+                                "--dialog-margin": "0"
+                            }
+                        },
+                        "full": {
+                            "content": {
+                                "maxW": "100vw",
+                                "minH": "100vh",
+                                "--dialog-margin": "0",
+                                "borderRadius": "0"
+                            }
+                        }
+                    },
+                    "motionPreset": {
+                        "scale": {
+                            "content": {
+                                "_open": {
+                                    "animationName": "scale-in, fade-in"
+                                },
+                                "_closed": {
+                                    "animationName": "scale-out, fade-out"
+                                }
+                            }
+                        },
+                        "slide-in-bottom": {
+                            "content": {
+                                "_open": {
+                                    "animationName": "slide-from-bottom, fade-in"
+                                },
+                                "_closed": {
+                                    "animationName": "slide-to-bottom, fade-out"
+                                }
+                            }
+                        },
+                        "slide-in-top": {
+                            "content": {
+                                "_open": {
+                                    "animationName": "slide-from-top, fade-in"
+                                },
+                                "_closed": {
+                                    "animationName": "slide-to-top, fade-out"
+                                }
+                            }
+                        },
+                        "slide-in-left": {
+                            "content": {
+                                "_open": {
+                                    "animationName": "slide-from-left, fade-in"
+                                },
+                                "_closed": {
+                                    "animationName": "slide-to-left, fade-out"
+                                }
+                            }
+                        },
+                        "slide-in-right": {
+                            "content": {
+                                "_open": {
+                                    "animationName": "slide-from-right, fade-in"
+                                },
+                                "_closed": {
+                                    "animationName": "slide-to-right, fade-out"
+                                }
+                            }
+                        },
+                        "none": {}
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md",
+                    "scrollBehavior": "outside",
+                    "placement": "top",
+                    "motionPreset": "scale"
+                }
+            },
+            "drawer": {
+                "slots": [
+                    "trigger",
+                    "backdrop",
+                    "positioner",
+                    "content",
+                    "title",
+                    "description",
+                    "closeTrigger",
+                    "header",
+                    "body",
+                    "footer",
+                    "backdrop"
+                ],
+                "className": "chakra-drawer",
+                "base": {
+                    "backdrop": {
+                        "bg": "blackAlpha.500",
+                        "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": "bg.panel",
+                        "boxShadow": "lg",
+                        "_open": {
+                            "animationDuration": "slowest",
+                            "animationTimingFunction": "ease-in-smooth"
+                        },
+                        "_closed": {
+                            "animationDuration": "slower",
+                            "animationTimingFunction": "ease-in-smooth"
+                        }
+                    },
+                    "header": {
+                        "flex": 0,
+                        "px": "6",
+                        "pt": "6",
+                        "pb": "4"
+                    },
+                    "body": {
+                        "px": "6",
+                        "py": "2",
+                        "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": {
+                        "xs": {
+                            "content": {
+                                "maxW": "xs"
+                            }
+                        },
+                        "sm": {
+                            "content": {
+                                "maxW": "md"
+                            }
+                        },
+                        "md": {
+                            "content": {
+                                "maxW": "lg"
+                            }
+                        },
+                        "lg": {
+                            "content": {
+                                "maxW": "2xl"
+                            }
+                        },
+                        "xl": {
+                            "content": {
+                                "maxW": "4xl"
+                            }
+                        },
+                        "full": {
+                            "content": {
+                                "maxW": "100vw",
+                                "h": "100dvh"
+                            }
+                        }
+                    },
+                    "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": "xs",
+                    "placement": "end"
+                }
+            },
+            "editable": {
+                "slots": [
+                    "root",
+                    "area",
+                    "label",
+                    "preview",
+                    "input",
+                    "editTrigger",
+                    "submitTrigger",
+                    "cancelTrigger",
+                    "control",
+                    "textarea"
+                ],
+                "className": "chakra-editable",
+                "base": {
+                    "root": {
+                        "display": "inline-flex",
+                        "alignItems": "center",
+                        "position": "relative",
+                        "gap": "1.5",
+                        "width": "full"
+                    },
+                    "preview": {
+                        "fontSize": "inherit",
+                        "fontWeight": "inherit",
+                        "textAlign": "inherit",
+                        "bg": "transparent",
+                        "borderRadius": "l2",
+                        "py": "1",
+                        "px": "1",
+                        "display": "inline-flex",
+                        "alignItems": "center",
+                        "transitionProperty": "common",
+                        "transitionDuration": "normal",
+                        "cursor": "text",
+                        "_hover": {
+                            "bg": "bg.muted"
+                        },
+                        "_disabled": {
+                            "userSelect": "none"
+                        }
+                    },
+                    "input": {
+                        "fontSize": "inherit",
+                        "fontWeight": "inherit",
+                        "textAlign": "inherit",
+                        "bg": "transparent",
+                        "borderRadius": "l2",
+                        "outline": "0",
+                        "py": "1",
+                        "px": "1",
+                        "transitionProperty": "common",
+                        "transitionDuration": "normal",
+                        "width": "full",
+                        "focusVisibleRing": "inside",
+                        "focusRingWidth": "2px",
+                        "_placeholder": {
+                            "opacity": 0.6
+                        }
+                    },
+                    "control": {
+                        "display": "inline-flex",
+                        "alignItems": "center",
+                        "gap": "1.5"
+                    }
+                },
+                "variants": {
+                    "size": {
+                        "sm": {
+                            "root": {
+                                "textStyle": "sm"
+                            },
+                            "preview": {
+                                "minH": "8"
+                            },
+                            "input": {
+                                "minH": "8"
+                            }
+                        },
+                        "md": {
+                            "root": {
+                                "textStyle": "sm"
+                            },
+                            "preview": {
+                                "minH": "9"
+                            },
+                            "input": {
+                                "minH": "9"
+                            }
+                        },
+                        "lg": {
+                            "root": {
+                                "textStyle": "md"
+                            },
+                            "preview": {
+                                "minH": "10"
+                            },
+                            "input": {
+                                "minH": "10"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md"
+                }
+            },
+            "emptyState": {
+                "slots": [
+                    "root",
+                    "content",
+                    "indicator",
+                    "title",
+                    "description"
+                ],
+                "className": "chakra-empty-state",
+                "base": {
+                    "root": {
+                        "width": "full"
+                    },
+                    "content": {
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "alignItems": "center",
+                        "justifyContent": "center"
+                    },
+                    "indicator": {
+                        "display": "flex",
+                        "alignItems": "center",
+                        "justifyContent": "center",
+                        "color": "fg.subtle",
+                        "_icon": {
+                            "boxSize": "1em"
+                        }
+                    },
+                    "title": {
+                        "fontWeight": "semibold"
+                    },
+                    "description": {
+                        "textStyle": "sm",
+                        "color": "fg.muted"
+                    }
+                },
+                "variants": {
+                    "size": {
+                        "sm": {
+                            "root": {
+                                "px": "4",
+                                "py": "6"
+                            },
+                            "title": {
+                                "textStyle": "md"
+                            },
+                            "content": {
+                                "gap": "4"
+                            },
+                            "indicator": {
+                                "textStyle": "2xl"
+                            }
+                        },
+                        "md": {
+                            "root": {
+                                "px": "8",
+                                "py": "12"
+                            },
+                            "title": {
+                                "textStyle": "lg"
+                            },
+                            "content": {
+                                "gap": "6"
+                            },
+                            "indicator": {
+                                "textStyle": "4xl"
+                            }
+                        },
+                        "lg": {
+                            "root": {
+                                "px": "12",
+                                "py": "16"
+                            },
+                            "title": {
+                                "textStyle": "xl"
+                            },
+                            "content": {
+                                "gap": "8"
+                            },
+                            "indicator": {
+                                "textStyle": "6xl"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md"
+                }
+            },
+            "field": {
+                "className": "chakra-field",
+                "slots": [
+                    "root",
+                    "errorText",
+                    "helperText",
+                    "input",
+                    "label",
+                    "select",
+                    "textarea",
+                    "requiredIndicator",
+                    "requiredIndicator"
+                ],
+                "base": {
+                    "requiredIndicator": {
+                        "color": "fg.error",
+                        "lineHeight": "1"
+                    },
+                    "root": {
+                        "display": "flex",
+                        "width": "100%",
+                        "position": "relative",
+                        "gap": "1.5"
+                    },
+                    "label": {
+                        "display": "flex",
+                        "alignItems": "center",
+                        "textAlign": "start",
+                        "textStyle": "sm",
+                        "fontWeight": "medium",
+                        "gap": "1",
+                        "userSelect": "none",
+                        "_disabled": {
+                            "opacity": "0.5"
+                        }
+                    },
+                    "errorText": {
+                        "display": "inline-flex",
+                        "alignItems": "center",
+                        "fontWeight": "medium",
+                        "gap": "1",
+                        "color": "fg.error",
+                        "textStyle": "xs"
+                    },
+                    "helperText": {
+                        "color": "fg.muted",
+                        "textStyle": "xs"
+                    }
+                },
+                "variants": {
+                    "orientation": {
+                        "vertical": {
+                            "root": {
+                                "flexDirection": "column",
+                                "alignItems": "flex-start"
+                            }
+                        },
+                        "horizontal": {
+                            "root": {
+                                "flexDirection": "row",
+                                "alignItems": "center",
+                                "justifyContent": "space-between"
+                            },
+                            "label": {
+                                "flex": "0 0 var(--field-label-width, 80px)"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "orientation": "vertical"
+                }
+            },
+            "fieldset": {
+                "className": "fieldset",
+                "slots": [
+                    "root",
+                    "errorText",
+                    "helperText",
+                    "legend",
+                    "content"
+                ],
+                "base": {
+                    "root": {
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "width": "full"
+                    },
+                    "content": {
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "width": "full"
+                    },
+                    "legend": {
+                        "color": "fg",
+                        "fontWeight": "medium",
+                        "_disabled": {
+                            "opacity": "0.5"
+                        }
+                    },
+                    "helperText": {
+                        "color": "fg.muted",
+                        "textStyle": "sm"
+                    },
+                    "errorText": {
+                        "display": "inline-flex",
+                        "alignItems": "center",
+                        "color": "fg.error",
+                        "gap": "2",
+                        "fontWeight": "medium",
+                        "textStyle": "sm"
+                    }
+                },
+                "variants": {
+                    "size": {
+                        "sm": {
+                            "root": {
+                                "spaceY": "2"
+                            },
+                            "content": {
+                                "gap": "1.5"
+                            },
+                            "legend": {
+                                "textStyle": "sm"
+                            }
+                        },
+                        "md": {
+                            "root": {
+                                "spaceY": "4"
+                            },
+                            "content": {
+                                "gap": "4"
+                            },
+                            "legend": {
+                                "textStyle": "sm"
+                            }
+                        },
+                        "lg": {
+                            "root": {
+                                "spaceY": "6"
+                            },
+                            "content": {
+                                "gap": "4"
+                            },
+                            "legend": {
+                                "textStyle": "md"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md"
+                }
+            },
+            "fileUpload": {
+                "className": "chakra-file-upload",
+                "slots": [
+                    "root",
+                    "dropzone",
+                    "item",
+                    "itemDeleteTrigger",
+                    "itemGroup",
+                    "itemName",
+                    "itemPreview",
+                    "itemPreviewImage",
+                    "itemSizeText",
+                    "label",
+                    "trigger",
+                    "clearTrigger",
+                    "itemContent",
+                    "dropzoneContent"
+                ],
+                "base": {
+                    "root": {
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "gap": "4",
+                        "width": "100%",
+                        "alignItems": "flex-start"
+                    },
+                    "label": {
+                        "fontWeight": "medium",
+                        "textStyle": "sm"
+                    },
+                    "dropzone": {
+                        "background": "bg",
+                        "borderRadius": "l3",
+                        "borderWidth": "2px",
+                        "borderStyle": "dashed",
+                        "display": "flex",
+                        "alignItems": "center",
+                        "flexDirection": "column",
+                        "gap": "4",
+                        "justifyContent": "center",
+                        "minHeight": "2xs",
+                        "px": "3",
+                        "py": "2",
+                        "transition": "backgrounds",
+                        "focusVisibleRing": "outside",
+                        "_hover": {
+                            "bg": "bg.subtle"
+                        },
+                        "_dragging": {
+                            "bg": "colorPalette.subtle",
+                            "borderStyle": "solid",
+                            "borderColor": "colorPalette.solid"
+                        }
+                    },
+                    "dropzoneContent": {
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "alignItems": "center",
+                        "textAlign": "center",
+                        "gap": "1",
+                        "textStyle": "sm"
+                    },
+                    "item": {
+                        "textStyle": "sm",
+                        "animationName": "fade-in",
+                        "animationDuration": "moderate",
+                        "background": "bg",
+                        "borderRadius": "l2",
+                        "borderWidth": "1px",
+                        "width": "100%",
+                        "display": "flex",
+                        "alignItems": "center",
+                        "gap": "3",
+                        "p": "4"
+                    },
+                    "itemGroup": {
+                        "width": "100%",
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "gap": "3"
+                    },
+                    "itemName": {
+                        "color": "fg",
+                        "fontWeight": "medium",
+                        "lineClamp": "1"
+                    },
+                    "itemContent": {
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "gap": "0.5",
+                        "flex": "1"
+                    },
+                    "itemSizeText": {
+                        "color": "fg.muted",
+                        "textStyle": "xs"
+                    },
+                    "itemDeleteTrigger": {
+                        "alignSelf": "flex-start"
+                    },
+                    "itemPreviewImage": {
+                        "width": "10",
+                        "height": "10",
+                        "objectFit": "scale-down"
+                    }
+                },
+                "defaultVariants": {}
+            },
+            "hoverCard": {
+                "className": "chakra-hover-card",
+                "slots": [
+                    "arrow",
+                    "arrowTip",
+                    "trigger",
+                    "positioner",
+                    "content"
+                ],
+                "base": {
+                    "content": {
+                        "position": "relative",
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "textStyle": "sm",
+                        "--hovercard-bg": "colors.bg.panel",
+                        "bg": "var(--hovercard-bg)",
+                        "boxShadow": "lg",
+                        "maxWidth": "80",
+                        "borderRadius": "l3",
+                        "zIndex": "popover",
+                        "transformOrigin": "var(--transform-origin)",
+                        "outline": "0",
+                        "_open": {
+                            "animationStyle": "slide-fade-in",
+                            "animationDuration": "fast"
+                        },
+                        "_closed": {
+                            "animationStyle": "slide-fade-out",
+                            "animationDuration": "faster"
+                        }
+                    },
+                    "arrow": {
+                        "--arrow-size": "sizes.3",
+                        "--arrow-background": "var(--hovercard-bg)"
+                    },
+                    "arrowTip": {
+                        "borderTopWidth": "0.5px",
+                        "borderInlineStartWidth": "0.5px"
+                    }
+                },
+                "variants": {
+                    "size": {
+                        "xs": {
+                            "content": {
+                                "padding": "3"
+                            }
+                        },
+                        "sm": {
+                            "content": {
+                                "padding": "4"
+                            }
+                        },
+                        "md": {
+                            "content": {
+                                "padding": "5"
+                            }
+                        },
+                        "lg": {
+                            "content": {
+                                "padding": "6"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md"
+                }
+            },
+            "list": {
+                "className": "chakra-list",
+                "slots": [
+                    "root",
+                    "item",
+                    "indicator"
+                ],
+                "base": {
+                    "root": {
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "gap": "var(--list-gap)",
+                        "& :where(ul, ol)": {
+                            "marginTop": "var(--list-gap)"
+                        }
+                    },
+                    "item": {
+                        "whiteSpace": "normal",
+                        "display": "list-item"
+                    },
+                    "indicator": {
+                        "marginEnd": "2",
+                        "minHeight": "1lh",
+                        "flexShrink": 0,
+                        "display": "inline-block",
+                        "verticalAlign": "middle"
+                    }
+                },
+                "variants": {
+                    "variant": {
+                        "marker": {
+                            "root": {
+                                "listStyle": "revert",
+                                "listStylePosition": "inside"
+                            },
+                            "item": {
+                                "_marker": {
+                                    "color": "fg.subtle"
+                                }
+                            }
+                        },
+                        "plain": {
+                            "item": {
+                                "alignItems": "flex-start",
+                                "display": "inline-flex"
+                            }
+                        }
+                    },
+                    "align": {
+                        "center": {
+                            "item": {
+                                "alignItems": "center"
+                            }
+                        },
+                        "start": {
+                            "item": {
+                                "alignItems": "flex-start"
+                            }
+                        },
+                        "end": {
+                            "item": {
+                                "alignItems": "flex-end"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "variant": "marker"
+                }
+            },
+            "menu": {
+                "className": "chakra-menu",
+                "slots": [
+                    "arrow",
+                    "arrowTip",
+                    "content",
+                    "contextTrigger",
+                    "indicator",
+                    "item",
+                    "itemGroup",
+                    "itemGroupLabel",
+                    "itemIndicator",
+                    "itemText",
+                    "positioner",
+                    "separator",
+                    "trigger",
+                    "triggerItem",
+                    "itemCommand"
+                ],
+                "base": {
+                    "content": {
+                        "outline": 0,
+                        "bg": "bg.panel",
+                        "boxShadow": "lg",
+                        "color": "fg",
+                        "maxHeight": "var(--available-height)",
+                        "--menu-z-index": "zIndex.dropdown",
+                        "zIndex": "calc(var(--menu-z-index) + var(--layer-index, 0))",
+                        "borderRadius": "l2",
+                        "overflow": "hidden",
+                        "overflowY": "auto",
+                        "_open": {
+                            "animationStyle": "slide-fade-in",
+                            "animationDuration": "fast"
+                        },
+                        "_closed": {
+                            "animationStyle": "slide-fade-out",
+                            "animationDuration": "faster"
+                        }
+                    },
+                    "item": {
+                        "textDecoration": "none",
+                        "color": "fg",
+                        "userSelect": "none",
+                        "borderRadius": "l1",
+                        "width": "100%",
+                        "display": "flex",
+                        "cursor": "menuitem",
+                        "alignItems": "center",
+                        "textAlign": "start",
+                        "position": "relative",
+                        "flex": "0 0 auto",
+                        "outline": 0,
+                        "_disabled": {
+                            "layerStyle": "disabled"
+                        }
+                    },
+                    "itemText": {
+                        "flex": "1"
+                    },
+                    "itemGroupLabel": {
+                        "px": "2",
+                        "py": "1.5",
+                        "fontWeight": "semibold",
+                        "textStyle": "sm"
+                    },
+                    "indicator": {
+                        "display": "inline-flex",
+                        "alignItems": "center",
+                        "justifyContent": "center",
+                        "flexShrink": "0"
+                    },
+                    "itemCommand": {
+                        "opacity": "0.6",
+                        "textStyle": "xs",
+                        "ms": "auto",
+                        "ps": "4",
+                        "letterSpacing": "widest"
+                    },
+                    "separator": {
+                        "height": "1px",
+                        "bg": "bg.muted",
+                        "my": "1",
+                        "mx": "-1"
+                    }
+                },
+                "variants": {
+                    "variant": {
+                        "subtle": {
+                            "item": {
+                                "_highlighted": {
+                                    "bg": {
+                                        "_light": "bg.muted",
+                                        "_dark": "bg.emphasized"
+                                    }
+                                }
+                            }
+                        },
+                        "solid": {
+                            "item": {
+                                "_highlighted": {
+                                    "bg": "colorPalette.solid",
+                                    "color": "colorPalette.contrast"
+                                }
+                            }
+                        }
+                    },
+                    "size": {
+                        "sm": {
+                            "content": {
+                                "minW": "8rem",
+                                "padding": "1"
+                            },
+                            "item": {
+                                "gap": "1",
+                                "textStyle": "xs",
+                                "py": "1",
+                                "px": "1.5"
+                            }
+                        },
+                        "md": {
+                            "content": {
+                                "minW": "8rem",
+                                "padding": "1.5"
+                            },
+                            "item": {
+                                "gap": "2",
+                                "textStyle": "sm",
+                                "py": "1.5",
+                                "px": "2"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md",
+                    "variant": "subtle"
+                }
+            },
+            "nativeSelect": {
+                "className": "chakra-native-select",
+                "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": "l2",
+                        "_disabled": {
+                            "layerStyle": "disabled"
+                        },
+                        "_invalid": {
+                            "borderColor": "border.error"
+                        },
+                        "focusVisibleRing": "inside",
+                        "lineHeight": "normal",
+                        "& > option, & > optgroup": {
+                            "bg": "inherit"
+                        }
+                    },
+                    "indicator": {
+                        "position": "absolute",
+                        "display": "inline-flex",
+                        "alignItems": "center",
+                        "justifyContent": "center",
+                        "pointerEvents": "none",
+                        "top": "50%",
+                        "transform": "translateY(-50%)",
+                        "height": "100%",
+                        "color": "fg.muted",
+                        "_disabled": {
+                            "opacity": "0.5"
+                        },
+                        "_invalid": {
+                            "color": "fg.error"
+                        },
+                        "_icon": {
+                            "width": "1em",
+                            "height": "1em"
+                        }
+                    }
+                },
+                "variants": {
+                    "variant": {
+                        "outline": {
+                            "field": {
+                                "bg": "transparent",
+                                "borderWidth": "1px",
+                                "borderColor": "border",
+                                "_expanded": {
+                                    "borderColor": "border.emphasized"
+                                }
+                            }
+                        },
+                        "subtle": {
+                            "field": {
+                                "borderWidth": "1px",
+                                "borderColor": "transparent",
+                                "bg": "bg.muted"
+                            }
+                        },
+                        "plain": {
+                            "field": {
+                                "bg": "transparent",
+                                "color": "fg",
+                                "focusRingWidth": "2px"
+                            }
+                        }
+                    },
+                    "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": {
+                    "size": "md",
+                    "variant": "outline"
+                }
+            },
+            "numberInput": {
+                "className": "chakra-number-input",
+                "slots": [
+                    "root",
+                    "label",
+                    "input",
+                    "control",
+                    "valueText",
+                    "incrementTrigger",
+                    "decrementTrigger",
+                    "scrubber"
+                ],
+                "base": {
+                    "root": {
+                        "position": "relative",
+                        "zIndex": "0",
+                        "isolation": "isolate"
+                    },
+                    "input": {
+                        "width": "100%",
+                        "minWidth": "0",
+                        "outline": "0",
+                        "position": "relative",
+                        "appearance": "none",
+                        "textAlign": "start",
+                        "borderRadius": "l2",
+                        "_disabled": {
+                            "layerStyle": "disabled"
+                        },
+                        "height": "var(--input-height)",
+                        "minW": "var(--input-height)",
+                        "--focus-color": "colors.colorPalette.focusRing",
+                        "--error-color": "colors.border.error",
+                        "_invalid": {
+                            "focusRingColor": "var(--error-color)",
+                            "borderColor": "var(--error-color)"
+                        },
+                        "verticalAlign": "top",
+                        "pe": "calc(var(--stepper-width) + 0.5rem)"
+                    },
+                    "control": {
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "position": "absolute",
+                        "top": "0",
+                        "insetEnd": "0px",
+                        "margin": "1px",
+                        "width": "var(--stepper-width)",
+                        "height": "calc(100% - 2px)",
+                        "zIndex": "1",
+                        "borderStartWidth": "1px",
+                        "divideY": "1px"
+                    },
+                    "incrementTrigger": {
+                        "display": "flex",
+                        "justifyContent": "center",
+                        "alignItems": "center",
+                        "flex": "1",
+                        "userSelect": "none",
+                        "cursor": "button",
+                        "lineHeight": "1",
+                        "color": "fg.muted",
+                        "--stepper-base-radius": "radii.l1",
+                        "--stepper-radius": "calc(var(--stepper-base-radius) + 1px)",
+                        "_icon": {
+                            "boxSize": "1em"
+                        },
+                        "_disabled": {
+                            "opacity": "0.5"
+                        },
+                        "_hover": {
+                            "bg": "bg.muted"
+                        },
+                        "_active": {
+                            "bg": "bg.emphasized"
+                        },
+                        "borderTopEndRadius": "var(--stepper-radius)"
+                    },
+                    "decrementTrigger": {
+                        "display": "flex",
+                        "justifyContent": "center",
+                        "alignItems": "center",
+                        "flex": "1",
+                        "userSelect": "none",
+                        "cursor": "button",
+                        "lineHeight": "1",
+                        "color": "fg.muted",
+                        "--stepper-base-radius": "radii.l1",
+                        "--stepper-radius": "calc(var(--stepper-base-radius) + 1px)",
+                        "_icon": {
+                            "boxSize": "1em"
+                        },
+                        "_disabled": {
+                            "opacity": "0.5"
+                        },
+                        "_hover": {
+                            "bg": "bg.muted"
+                        },
+                        "_active": {
+                            "bg": "bg.emphasized"
+                        },
+                        "borderBottomEndRadius": "var(--stepper-radius)"
+                    },
+                    "valueText": {
+                        "fontWeight": "medium",
+                        "fontFeatureSettings": "pnum",
+                        "fontVariantNumeric": "proportional-nums"
+                    }
+                },
+                "variants": {
+                    "size": {
+                        "xs": {
+                            "input": {
+                                "textStyle": "xs",
+                                "px": "2",
+                                "--input-height": "sizes.8"
+                            },
+                            "control": {
+                                "fontSize": "2xs",
+                                "--stepper-width": "sizes.4"
+                            }
+                        },
+                        "sm": {
+                            "input": {
+                                "textStyle": "sm",
+                                "px": "2.5",
+                                "--input-height": "sizes.9"
+                            },
+                            "control": {
+                                "fontSize": "xs",
+                                "--stepper-width": "sizes.5"
+                            }
+                        },
+                        "md": {
+                            "input": {
+                                "textStyle": "sm",
+                                "px": "3",
+                                "--input-height": "sizes.10"
+                            },
+                            "control": {
+                                "fontSize": "sm",
+                                "--stepper-width": "sizes.6"
+                            }
+                        },
+                        "lg": {
+                            "input": {
+                                "textStyle": "md",
+                                "px": "4",
+                                "--input-height": "sizes.11"
+                            },
+                            "control": {
+                                "fontSize": "sm",
+                                "--stepper-width": "sizes.6"
+                            }
+                        }
+                    },
+                    "variant": {
+                        "outline": {
+                            "input": {
+                                "bg": "transparent",
+                                "borderWidth": "1px",
+                                "borderColor": "border",
+                                "focusVisibleRing": "inside"
+                            }
+                        },
+                        "subtle": {
+                            "input": {
+                                "borderWidth": "1px",
+                                "borderColor": "transparent",
+                                "bg": "bg.muted",
+                                "focusVisibleRing": "inside"
+                            }
+                        },
+                        "flushed": {
+                            "input": {
+                                "bg": "transparent",
+                                "borderBottomWidth": "1px",
+                                "borderBottomColor": "border",
+                                "borderRadius": "0",
+                                "px": "0",
+                                "_focusVisible": {
+                                    "borderColor": "var(--focus-color)",
+                                    "boxShadow": "0px 1px 0px 0px var(--focus-color)"
+                                }
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md",
+                    "variant": "outline"
+                }
+            },
+            "pinInput": {
+                "className": "chakra-pin-input",
+                "slots": [
+                    "root",
+                    "label",
+                    "input",
+                    "control"
+                ],
+                "base": {
+                    "input": {
+                        "width": "var(--input-height)",
+                        "minWidth": "0",
+                        "outline": "0",
+                        "position": "relative",
+                        "appearance": "none",
+                        "textAlign": "center",
+                        "borderRadius": "l2",
+                        "_disabled": {
+                            "layerStyle": "disabled"
+                        },
+                        "height": "var(--input-height)",
+                        "minW": "var(--input-height)",
+                        "--focus-color": "colors.colorPalette.focusRing",
+                        "--error-color": "colors.border.error",
+                        "_invalid": {
+                            "focusRingColor": "var(--error-color)",
+                            "borderColor": "var(--error-color)"
+                        }
+                    }
+                },
+                "variants": {
+                    "size": {
+                        "2xs": {
+                            "input": {
+                                "textStyle": "xs",
+                                "px": "2",
+                                "--input-height": "sizes.7"
+                            }
+                        },
+                        "xs": {
+                            "input": {
+                                "textStyle": "xs",
+                                "px": "2",
+                                "--input-height": "sizes.8"
+                            }
+                        },
+                        "sm": {
+                            "input": {
+                                "textStyle": "sm",
+                                "px": "2.5",
+                                "--input-height": "sizes.9"
+                            }
+                        },
+                        "md": {
+                            "input": {
+                                "textStyle": "sm",
+                                "px": "3",
+                                "--input-height": "sizes.10"
+                            }
+                        },
+                        "lg": {
+                            "input": {
+                                "textStyle": "md",
+                                "px": "4",
+                                "--input-height": "sizes.11"
+                            }
+                        },
+                        "xl": {
+                            "input": {
+                                "textStyle": "md",
+                                "px": "4.5",
+                                "--input-height": "sizes.12"
+                            }
+                        },
+                        "2xl": {
+                            "input": {
+                                "textStyle": "lg",
+                                "px": "5",
+                                "--input-height": "sizes.16"
+                            }
+                        }
+                    },
+                    "variant": {
+                        "outline": {
+                            "input": {
+                                "bg": "transparent",
+                                "borderWidth": "1px",
+                                "borderColor": "border",
+                                "focusVisibleRing": "inside"
+                            }
+                        },
+                        "subtle": {
+                            "input": {
+                                "borderWidth": "1px",
+                                "borderColor": "transparent",
+                                "bg": "bg.muted",
+                                "focusVisibleRing": "inside"
+                            }
+                        },
+                        "flushed": {
+                            "input": {
+                                "bg": "transparent",
+                                "borderBottomWidth": "1px",
+                                "borderBottomColor": "border",
+                                "borderRadius": "0",
+                                "px": "0",
+                                "_focusVisible": {
+                                    "borderColor": "var(--focus-color)",
+                                    "boxShadow": "0px 1px 0px 0px var(--focus-color)"
+                                }
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md",
+                    "variant": "outline"
+                }
+            },
+            "popover": {
+                "className": "chakra-popover",
+                "slots": [
+                    "arrow",
+                    "arrowTip",
+                    "anchor",
+                    "trigger",
+                    "indicator",
+                    "positioner",
+                    "content",
+                    "title",
+                    "description",
+                    "closeTrigger",
+                    "header",
+                    "body",
+                    "footer"
+                ],
+                "base": {
+                    "content": {
+                        "position": "relative",
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "textStyle": "sm",
+                        "--popover-bg": "colors.bg.panel",
+                        "bg": "var(--popover-bg)",
+                        "boxShadow": "lg",
+                        "--popover-size": "sizes.xs",
+                        "--popover-mobile-size": "calc(100dvw - 1rem)",
+                        "width": {
+                            "base": "min(var(--popover-mobile-size), var(--popover-size))",
+                            "sm": "var(--popover-size)"
+                        },
+                        "borderRadius": "l3",
+                        "--popover-z-index": "zIndex.popover",
+                        "zIndex": "calc(var(--popover-z-index) + var(--layer-index, 0))",
+                        "outline": "0",
+                        "transformOrigin": "var(--transform-origin)",
+                        "_open": {
+                            "animationStyle": "scale-fade-in",
+                            "animationDuration": "fast"
+                        },
+                        "_closed": {
+                            "animationStyle": "scale-fade-out",
+                            "animationDuration": "faster"
+                        }
+                    },
+                    "header": {
+                        "paddingInline": "var(--popover-padding)",
+                        "paddingTop": "var(--popover-padding)"
+                    },
+                    "body": {
+                        "padding": "var(--popover-padding)",
+                        "flex": "1"
+                    },
+                    "footer": {
+                        "display": "flex",
+                        "alignItems": "center",
+                        "paddingInline": "var(--popover-padding)",
+                        "paddingBottom": "var(--popover-padding)"
+                    },
+                    "arrow": {
+                        "--arrow-size": "sizes.3",
+                        "--arrow-background": "var(--popover-bg)"
+                    },
+                    "arrowTip": {
+                        "borderTopWidth": "1px",
+                        "borderInlineStartWidth": "1px"
+                    }
+                },
+                "variants": {
+                    "size": {
+                        "xs": {
+                            "content": {
+                                "--popover-padding": "spacing.3"
+                            }
+                        },
+                        "sm": {
+                            "content": {
+                                "--popover-padding": "spacing.4"
+                            }
+                        },
+                        "md": {
+                            "content": {
+                                "--popover-padding": "spacing.5"
+                            }
+                        },
+                        "lg": {
+                            "content": {
+                                "--popover-padding": "spacing.6"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md"
+                }
+            },
+            "progress": {
+                "slots": [
+                    "root",
+                    "label",
+                    "track",
+                    "range",
+                    "valueText",
+                    "view",
+                    "circle",
+                    "circleTrack",
+                    "circleRange"
+                ],
+                "className": "chakra-progress",
+                "base": {
+                    "root": {
+                        "textStyle": "sm",
+                        "position": "relative"
+                    },
+                    "track": {
+                        "overflow": "hidden",
+                        "position": "relative"
+                    },
+                    "range": {
+                        "display": "flex",
+                        "alignItems": "center",
+                        "justifyContent": "center",
+                        "transitionProperty": "width, height",
+                        "transitionDuration": "slow",
+                        "height": "100%",
+                        "bgColor": "var(--track-color)",
+                        "_indeterminate": {
+                            "--animate-from-x": "-40%",
+                            "--animate-to-x": "100%",
+                            "position": "absolute",
+                            "willChange": "left",
+                            "minWidth": "50%",
+                            "animation": "position 1s ease infinite normal none running",
+                            "backgroundImage": "linear-gradient(to right, transparent 0%, var(--track-color) 50%, transparent 100%)"
+                        }
+                    },
+                    "label": {
+                        "display": "inline-flex",
+                        "fontWeight": "medium",
+                        "alignItems": "center",
+                        "gap": "1"
+                    },
+                    "valueText": {
+                        "textStyle": "xs",
+                        "lineHeight": "1",
+                        "fontWeight": "medium"
+                    }
+                },
+                "variants": {
+                    "variant": {
+                        "outline": {
+                            "track": {
+                                "shadow": "inset",
+                                "bgColor": "bg.muted"
+                            },
+                            "range": {
+                                "bgColor": "colorPalette.solid"
+                            }
+                        },
+                        "subtle": {
+                            "track": {
+                                "bgColor": "colorPalette.muted"
+                            },
+                            "range": {
+                                "bgColor": "colorPalette.solid/72"
+                            }
+                        }
+                    },
+                    "shape": {
+                        "square": {},
+                        "rounded": {
+                            "track": {
+                                "borderRadius": "l1"
+                            }
+                        },
+                        "full": {
+                            "track": {
+                                "borderRadius": "full"
+                            }
+                        }
+                    },
+                    "striped": {
+                        "true": {
+                            "range": {
+                                "backgroundImage": "linear-gradient(45deg, var(--stripe-color) 25%, transparent 25%, transparent 50%, var(--stripe-color) 50%, var(--stripe-color) 75%, transparent 75%, transparent)",
+                                "backgroundSize": "var(--stripe-size) var(--stripe-size)",
+                                "--stripe-size": "1rem",
+                                "--stripe-color": {
+                                    "_light": "rgba(255, 255, 255, 0.3)",
+                                    "_dark": "rgba(0, 0, 0, 0.3)"
+                                }
+                            }
+                        }
+                    },
+                    "animated": {
+                        "true": {
+                            "range": {
+                                "--animate-from": "var(--stripe-size)",
+                                "animation": "bg-position 1s linear infinite"
+                            }
+                        }
+                    },
+                    "size": {
+                        "xs": {
+                            "track": {
+                                "h": "1.5"
+                            }
+                        },
+                        "sm": {
+                            "track": {
+                                "h": "2"
+                            }
+                        },
+                        "md": {
+                            "track": {
+                                "h": "2.5"
+                            }
+                        },
+                        "lg": {
+                            "track": {
+                                "h": "3"
+                            }
+                        },
+                        "xl": {
+                            "track": {
+                                "h": "4"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "variant": "outline",
+                    "size": "md",
+                    "shape": "rounded"
+                }
+            },
+            "progressCircle": {
+                "className": "chakra-progress-circle",
+                "slots": [
+                    "root",
+                    "label",
+                    "track",
+                    "range",
+                    "valueText",
+                    "view",
+                    "circle",
+                    "circleTrack",
+                    "circleRange"
+                ],
+                "base": {
+                    "root": {
+                        "display": "inline-flex",
+                        "textStyle": "sm",
+                        "position": "relative"
+                    },
+                    "circle": {
+                        "_indeterminate": {
+                            "animation": "spin 2s linear infinite"
+                        }
+                    },
+                    "circleTrack": {
+                        "--track-color": "colors.colorPalette.muted",
+                        "stroke": "var(--track-color)"
+                    },
+                    "circleRange": {
+                        "stroke": "colorPalette.solid",
+                        "transitionProperty": "stroke-dasharray",
+                        "transitionDuration": "0.6s",
+                        "_indeterminate": {
+                            "animation": "circular-progress 1.5s linear infinite"
+                        }
+                    },
+                    "label": {
+                        "display": "inline-flex"
+                    },
+                    "valueText": {
+                        "lineHeight": "1",
+                        "fontWeight": "medium",
+                        "letterSpacing": "tight",
+                        "fontVariantNumeric": "tabular-nums"
+                    }
+                },
+                "variants": {
+                    "size": {
+                        "xs": {
+                            "circle": {
+                                "--size": "24px",
+                                "--thickness": "4px"
+                            },
+                            "valueText": {
+                                "textStyle": "2xs"
+                            }
+                        },
+                        "sm": {
+                            "circle": {
+                                "--size": "32px",
+                                "--thickness": "5px"
+                            },
+                            "valueText": {
+                                "textStyle": "2xs"
+                            }
+                        },
+                        "md": {
+                            "circle": {
+                                "--size": "40px",
+                                "--thickness": "6px"
+                            },
+                            "valueText": {
+                                "textStyle": "xs"
+                            }
+                        },
+                        "lg": {
+                            "circle": {
+                                "--size": "48px",
+                                "--thickness": "7px"
+                            },
+                            "valueText": {
+                                "textStyle": "sm"
+                            }
+                        },
+                        "xl": {
+                            "circle": {
+                                "--size": "64px",
+                                "--thickness": "8px"
+                            },
+                            "valueText": {
+                                "textStyle": "sm"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md"
+                }
+            },
+            "radioCard": {
+                "className": "chakra-radio-card",
+                "slots": [
+                    "root",
+                    "label",
+                    "item",
+                    "itemText",
+                    "itemControl",
+                    "indicator",
+                    "itemAddon",
+                    "itemIndicator",
+                    "itemContent",
+                    "itemDescription"
+                ],
+                "base": {
+                    "root": {
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "gap": "1.5",
+                        "isolation": "isolate"
+                    },
+                    "item": {
+                        "flex": "1",
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "userSelect": "none",
+                        "position": "relative",
+                        "borderRadius": "l2",
+                        "_focus": {
+                            "bg": "colorPalette.muted/20"
+                        },
+                        "_disabled": {
+                            "opacity": "0.8",
+                            "borderColor": "border.disabled"
+                        },
+                        "_checked": {
+                            "zIndex": "1"
+                        }
+                    },
+                    "label": {
+                        "display": "inline-flex",
+                        "fontWeight": "medium",
+                        "textStyle": "sm",
+                        "_disabled": {
+                            "opacity": "0.5"
+                        }
+                    },
+                    "itemText": {
+                        "fontWeight": "medium"
+                    },
+                    "itemDescription": {
+                        "opacity": "0.64",
+                        "textStyle": "sm"
+                    },
+                    "itemControl": {
+                        "display": "inline-flex",
+                        "flex": "1",
+                        "pos": "relative",
+                        "rounded": "inherit",
+                        "justifyContent": "var(--radio-card-justify)",
+                        "alignItems": "var(--radio-card-align)",
+                        "_disabled": {
+                            "bg": "bg.muted"
+                        }
+                    },
+                    "itemIndicator": {
+                        "display": "inline-flex",
+                        "alignItems": "center",
+                        "justifyContent": "center",
+                        "flexShrink": 0,
+                        "verticalAlign": "top",
+                        "color": "white",
+                        "borderWidth": "1px",
+                        "borderColor": "transparent",
+                        "borderRadius": "full",
+                        "cursor": "radio",
+                        "_focusVisible": {
+                            "outline": "2px solid",
+                            "outlineColor": "colorPalette.focusRing",
+                            "outlineOffset": "2px"
+                        },
+                        "_invalid": {
+                            "colorPalette": "red",
+                            "borderColor": "red.500"
+                        },
+                        "_disabled": {
+                            "opacity": "0.5",
+                            "cursor": "disabled"
+                        },
+                        "& .dot": {
+                            "height": "100%",
+                            "width": "100%",
+                            "borderRadius": "full",
+                            "bg": "currentColor",
+                            "scale": "0.4"
+                        }
+                    },
+                    "itemAddon": {
+                        "roundedBottom": "inherit",
+                        "_disabled": {
+                            "color": "fg.muted"
+                        }
+                    },
+                    "itemContent": {
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "flex": "1",
+                        "gap": "1",
+                        "justifyContent": "var(--radio-card-justify)",
+                        "alignItems": "var(--radio-card-align)"
+                    }
+                },
+                "variants": {
+                    "size": {
+                        "sm": {
+                            "item": {
+                                "textStyle": "sm"
+                            },
+                            "itemControl": {
+                                "padding": "3",
+                                "gap": "1.5"
+                            },
+                            "itemAddon": {
+                                "px": "3",
+                                "py": "1.5",
+                                "borderTopWidth": "1px"
+                            },
+                            "itemIndicator": {
+                                "boxSize": "4"
+                            }
+                        },
+                        "md": {
+                            "item": {
+                                "textStyle": "sm"
+                            },
+                            "itemControl": {
+                                "padding": "4",
+                                "gap": "2.5"
+                            },
+                            "itemAddon": {
+                                "px": "4",
+                                "py": "2",
+                                "borderTopWidth": "1px"
+                            },
+                            "itemIndicator": {
+                                "boxSize": "5"
+                            }
+                        },
+                        "lg": {
+                            "item": {
+                                "textStyle": "md"
+                            },
+                            "itemControl": {
+                                "padding": "4",
+                                "gap": "3.5"
+                            },
+                            "itemAddon": {
+                                "px": "4",
+                                "py": "2",
+                                "borderTopWidth": "1px"
+                            },
+                            "itemIndicator": {
+                                "boxSize": "6"
+                            }
+                        }
+                    },
+                    "variant": {
+                        "surface": {
+                            "item": {
+                                "borderWidth": "1px",
+                                "_checked": {
+                                    "bg": "colorPalette.subtle",
+                                    "color": "colorPalette.fg",
+                                    "borderColor": "colorPalette.muted"
+                                }
+                            },
+                            "itemIndicator": {
+                                "borderWidth": "1px",
+                                "borderColor": "border",
+                                "_checked": {
+                                    "bg": "colorPalette.solid",
+                                    "color": "colorPalette.contrast",
+                                    "borderColor": "colorPalette.solid"
+                                }
+                            }
+                        },
+                        "subtle": {
+                            "item": {
+                                "bg": "bg.muted"
+                            },
+                            "itemControl": {
+                                "_checked": {
+                                    "bg": "colorPalette.muted",
+                                    "color": "colorPalette.fg"
+                                }
+                            },
+                            "itemIndicator": {
+                                "borderWidth": "1px",
+                                "borderColor": "inherit",
+                                "_checked": {
+                                    "color": "colorPalette.fg",
+                                    "borderColor": "colorPalette.solid"
+                                },
+                                "& .dot": {
+                                    "scale": "0.6"
+                                }
+                            }
+                        },
+                        "outline": {
+                            "item": {
+                                "borderWidth": "1px",
+                                "_checked": {
+                                    "boxShadow": "0 0 0 1px var(--shadow-color)",
+                                    "boxShadowColor": "colorPalette.solid",
+                                    "borderColor": "colorPalette.solid"
+                                }
+                            },
+                            "itemIndicator": {
+                                "borderWidth": "1px",
+                                "borderColor": "border",
+                                "_checked": {
+                                    "bg": "colorPalette.solid",
+                                    "color": "colorPalette.contrast",
+                                    "borderColor": "colorPalette.solid"
+                                }
+                            }
+                        },
+                        "solid": {
+                            "item": {
+                                "borderWidth": "1px",
+                                "_checked": {
+                                    "bg": "colorPalette.solid",
+                                    "color": "colorPalette.contrast",
+                                    "borderColor": "colorPalette.solid"
+                                }
+                            },
+                            "itemIndicator": {
+                                "bg": "bg",
+                                "borderWidth": "1px",
+                                "borderColor": "inherit",
+                                "_checked": {
+                                    "color": "colorPalette.solid",
+                                    "borderColor": "currentcolor"
+                                }
+                            }
+                        }
+                    },
+                    "justify": {
+                        "start": {
+                            "item": {
+                                "--radio-card-justify": "flex-start"
+                            }
+                        },
+                        "end": {
+                            "item": {
+                                "--radio-card-justify": "flex-end"
+                            }
+                        },
+                        "center": {
+                            "item": {
+                                "--radio-card-justify": "center"
+                            }
+                        }
+                    },
+                    "align": {
+                        "start": {
+                            "item": {
+                                "--radio-card-align": "flex-start"
+                            },
+                            "itemControl": {
+                                "textAlign": "start"
+                            }
+                        },
+                        "end": {
+                            "item": {
+                                "--radio-card-align": "flex-end"
+                            },
+                            "itemControl": {
+                                "textAlign": "end"
+                            }
+                        },
+                        "center": {
+                            "item": {
+                                "--radio-card-align": "center"
+                            },
+                            "itemControl": {
+                                "textAlign": "center"
+                            }
+                        }
+                    },
+                    "orientation": {
+                        "vertical": {
+                            "itemControl": {
+                                "flexDirection": "column"
+                            }
+                        },
+                        "horizontal": {
+                            "itemControl": {
+                                "flexDirection": "row"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md",
+                    "variant": "outline",
+                    "align": "start",
+                    "orientation": "horizontal"
+                }
+            },
+            "radioGroup": {
+                "className": "chakra-radio-group",
+                "slots": [
+                    "root",
+                    "label",
+                    "item",
+                    "itemText",
+                    "itemControl",
+                    "indicator",
+                    "itemAddon",
+                    "itemIndicator"
+                ],
+                "base": {
+                    "item": {
+                        "display": "inline-flex",
+                        "alignItems": "center",
+                        "position": "relative",
+                        "fontWeight": "medium",
+                        "_disabled": {
+                            "cursor": "disabled"
+                        }
+                    },
+                    "itemControl": {
+                        "display": "inline-flex",
+                        "alignItems": "center",
+                        "justifyContent": "center",
+                        "flexShrink": 0,
+                        "verticalAlign": "top",
+                        "color": "white",
+                        "borderWidth": "1px",
+                        "borderColor": "transparent",
+                        "borderRadius": "full",
+                        "cursor": "radio",
+                        "_focusVisible": {
+                            "outline": "2px solid",
+                            "outlineColor": "colorPalette.focusRing",
+                            "outlineOffset": "2px"
+                        },
+                        "_invalid": {
+                            "colorPalette": "red",
+                            "borderColor": "red.500"
+                        },
+                        "_disabled": {
+                            "opacity": "0.5",
+                            "cursor": "disabled"
+                        },
+                        "& .dot": {
+                            "height": "100%",
+                            "width": "100%",
+                            "borderRadius": "full",
+                            "bg": "currentColor",
+                            "scale": "0.4"
+                        }
+                    },
+                    "label": {
+                        "userSelect": "none",
+                        "textStyle": "sm",
+                        "_disabled": {
+                            "opacity": "0.5"
+                        }
+                    }
+                },
+                "variants": {
+                    "variant": {
+                        "outline": {
+                            "itemControl": {
+                                "borderWidth": "1px",
+                                "borderColor": "inherit",
+                                "_checked": {
+                                    "color": "colorPalette.fg",
+                                    "borderColor": "colorPalette.solid"
+                                },
+                                "& .dot": {
+                                    "scale": "0.6"
+                                }
+                            }
+                        },
+                        "subtle": {
+                            "itemControl": {
+                                "borderWidth": "1px",
+                                "bg": "colorPalette.muted",
+                                "borderColor": "colorPalette.muted",
+                                "color": "transparent",
+                                "_checked": {
+                                    "color": "colorPalette.fg"
+                                }
+                            }
+                        },
+                        "solid": {
+                            "itemControl": {
+                                "borderWidth": "1px",
+                                "borderColor": "border",
+                                "_checked": {
+                                    "bg": "colorPalette.solid",
+                                    "color": "colorPalette.contrast",
+                                    "borderColor": "colorPalette.solid"
+                                }
+                            }
+                        }
+                    },
+                    "size": {
+                        "xs": {
+                            "item": {
+                                "textStyle": "xs",
+                                "gap": "1.5"
+                            },
+                            "itemControl": {
+                                "boxSize": "3"
+                            }
+                        },
+                        "sm": {
+                            "item": {
+                                "textStyle": "sm",
+                                "gap": "2"
+                            },
+                            "itemControl": {
+                                "boxSize": "4"
+                            }
+                        },
+                        "md": {
+                            "item": {
+                                "textStyle": "sm",
+                                "gap": "2.5"
+                            },
+                            "itemControl": {
+                                "boxSize": "5"
+                            }
+                        },
+                        "lg": {
+                            "item": {
+                                "textStyle": "md",
+                                "gap": "3"
+                            },
+                            "itemControl": {
+                                "boxSize": "6"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md",
+                    "variant": "solid"
+                }
+            },
+            "ratingGroup": {
+                "className": "chakra-rating-group",
+                "slots": [
+                    "root",
+                    "label",
+                    "item",
+                    "control",
+                    "itemIndicator"
+                ],
+                "base": {
+                    "root": {
+                        "display": "inline-flex"
+                    },
+                    "control": {
+                        "display": "inline-flex",
+                        "alignItems": "center"
+                    },
+                    "item": {
+                        "display": "inline-flex",
+                        "alignItems": "center",
+                        "justifyContent": "center",
+                        "userSelect": "none"
+                    },
+                    "itemIndicator": {
+                        "display": "inline-flex",
+                        "alignItems": "center",
+                        "justifyContent": "center",
+                        "width": "1em",
+                        "height": "1em",
+                        "position": "relative",
+                        "_icon": {
+                            "stroke": "currentColor",
+                            "width": "100%",
+                            "height": "100%",
+                            "display": "inline-block",
+                            "flexShrink": 0,
+                            "position": "absolute",
+                            "left": 0,
+                            "top": 0
+                        },
+                        "& [data-bg]": {
+                            "color": "bg.emphasized"
+                        },
+                        "& [data-fg]": {
+                            "color": "transparent"
+                        },
+                        "&[data-highlighted]:not([data-half])": {
+                            "& [data-fg]": {
+                                "color": "colorPalette.solid"
+                            }
+                        },
+                        "&[data-half]": {
+                            "& [data-fg]": {
+                                "color": "colorPalette.solid",
+                                "clipPath": "inset(0 50% 0 0)"
+                            }
+                        }
+                    }
+                },
+                "variants": {
+                    "size": {
+                        "xs": {
+                            "item": {
+                                "textStyle": "sm"
+                            }
+                        },
+                        "sm": {
+                            "item": {
+                                "textStyle": "md"
+                            }
+                        },
+                        "md": {
+                            "item": {
+                                "textStyle": "xl"
+                            }
+                        },
+                        "lg": {
+                            "item": {
+                                "textStyle": "2xl"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md"
+                }
+            },
+            "segmentGroup": {
+                "className": "chakra-segment-group",
+                "slots": [
+                    "root",
+                    "label",
+                    "item",
+                    "itemText",
+                    "itemControl",
+                    "indicator"
+                ],
+                "base": {
+                    "root": {
+                        "--segment-radius": "radii.l2",
+                        "borderRadius": "l2",
+                        "display": "inline-flex",
+                        "boxShadow": "inset",
+                        "minW": "max-content",
+                        "textAlign": "center",
+                        "position": "relative",
+                        "isolation": "isolate",
+                        "bg": "bg.muted"
+                    },
+                    "item": {
+                        "display": "flex",
+                        "alignItems": "center",
+                        "userSelect": "none",
+                        "fontSize": "sm",
+                        "position": "relative",
+                        "color": "fg",
+                        "borderRadius": "var(--segment-radius)",
+                        "_disabled": {
+                            "opacity": "0.5"
+                        },
+                        "&:has(input:focus-visible)": {
+                            "focusRing": "outside"
+                        },
+                        "_before": {
+                            "content": "\"\"",
+                            "position": "absolute",
+                            "insetInlineStart": 0,
+                            "insetBlock": "1.5",
+                            "bg": "border",
+                            "width": "1px",
+                            "transition": "opacity 0.2s"
+                        },
+                        "& + &[data-state=checked], &[data-state=checked] + &, &:first-of-type": {
+                            "_before": {
+                                "opacity": "0"
+                            }
+                        },
+                        "&[data-state=checked][data-ssr]": {
+                            "shadow": "sm",
+                            "bg": "bg",
+                            "borderRadius": "var(--segment-radius)"
+                        }
+                    },
+                    "indicator": {
+                        "shadow": "sm",
+                        "pos": "absolute",
+                        "bg": {
+                            "_light": "bg",
+                            "_dark": "bg.emphasized"
+                        },
+                        "width": "var(--width)",
+                        "height": "var(--height)",
+                        "top": "var(--top)",
+                        "left": "var(--left)",
+                        "zIndex": -1,
+                        "borderRadius": "var(--segment-radius)"
+                    }
+                },
+                "variants": {
+                    "size": {
+                        "xs": {
+                            "root": {
+                                "height": "6"
+                            },
+                            "item": {
+                                "textStyle": "xs",
+                                "px": "3",
+                                "gap": "1"
+                            }
+                        },
+                        "sm": {
+                            "root": {
+                                "height": "8"
+                            },
+                            "item": {
+                                "textStyle": "sm",
+                                "px": "4",
+                                "gap": "2"
+                            }
+                        },
+                        "md": {
+                            "root": {
+                                "height": "10"
+                            },
+                            "item": {
+                                "textStyle": "sm",
+                                "px": "4",
+                                "gap": "2"
+                            }
+                        },
+                        "lg": {
+                            "root": {
+                                "height": "10"
+                            },
+                            "item": {
+                                "textStyle": "md",
+                                "px": "5",
+                                "gap": "3"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md"
+                }
+            },
+            "select": {
+                "className": "chakra-select",
+                "slots": [
+                    "label",
+                    "positioner",
+                    "trigger",
+                    "indicator",
+                    "clearTrigger",
+                    "item",
+                    "itemText",
+                    "itemIndicator",
+                    "itemGroup",
+                    "itemGroupLabel",
+                    "list",
+                    "content",
+                    "root",
+                    "control",
+                    "valueText",
+                    "indicatorGroup"
+                ],
+                "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": "l2",
+                        "userSelect": "none",
+                        "textAlign": "start",
+                        "focusVisibleRing": "inside",
+                        "_placeholderShown": {
+                            "color": "fg.muted"
+                        },
+                        "_disabled": {
+                            "layerStyle": "disabled"
+                        },
+                        "_invalid": {
+                            "borderColor": "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": {
+                            "base": "fg.muted",
+                            "_disabled": "fg.subtle",
+                            "_invalid": "fg.error"
+                        }
+                    },
+                    "content": {
+                        "background": "bg.panel",
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "zIndex": "dropdown",
+                        "borderRadius": "l2",
+                        "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": "l1",
+                        "_highlighted": {
+                            "bg": {
+                                "_light": "bg.muted",
+                                "_dark": "bg.emphasized"
+                            }
+                        },
+                        "_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": "1px",
+                                "borderColor": "border",
+                                "_expanded": {
+                                    "borderColor": "border.emphasized"
+                                }
+                            }
+                        },
+                        "subtle": {
+                            "trigger": {
+                                "borderWidth": "1px",
+                                "borderColor": "transparent",
+                                "bg": "bg.muted"
+                            }
+                        }
+                    },
+                    "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"
+                }
+            },
+            "slider": {
+                "className": "chakra-slider",
+                "slots": [
+                    "root",
+                    "label",
+                    "thumb",
+                    "valueText",
+                    "track",
+                    "range",
+                    "control",
+                    "markerGroup",
+                    "marker",
+                    "draggingIndicator",
+                    "markerIndicator"
+                ],
+                "base": {
+                    "root": {
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "gap": "1",
+                        "textStyle": "sm",
+                        "position": "relative",
+                        "isolation": "isolate",
+                        "touchAction": "none"
+                    },
+                    "label": {
+                        "fontWeight": "medium",
+                        "textStyle": "sm"
+                    },
+                    "control": {
+                        "display": "inline-flex",
+                        "alignItems": "center",
+                        "position": "relative"
+                    },
+                    "track": {
+                        "overflow": "hidden",
+                        "borderRadius": "full",
+                        "flex": "1"
+                    },
+                    "range": {
+                        "width": "inherit",
+                        "height": "inherit",
+                        "_disabled": {
+                            "bg": "border.emphasized!"
+                        }
+                    },
+                    "markerGroup": {
+                        "position": "absolute!",
+                        "zIndex": "1"
+                    },
+                    "marker": {
+                        "--marker-bg": {
+                            "base": "white",
+                            "_underValue": "colors.bg"
+                        },
+                        "display": "flex",
+                        "alignItems": "center",
+                        "gap": "calc(var(--slider-thumb-size) / 2)",
+                        "color": "fg.muted",
+                        "textStyle": "xs"
+                    },
+                    "markerIndicator": {
+                        "width": "var(--slider-marker-size)",
+                        "height": "var(--slider-marker-size)",
+                        "borderRadius": "full",
+                        "bg": "var(--marker-bg)"
+                    },
+                    "thumb": {
+                        "width": "var(--slider-thumb-size)",
+                        "height": "var(--slider-thumb-size)",
+                        "display": "flex",
+                        "alignItems": "center",
+                        "justifyContent": "center",
+                        "outline": 0,
+                        "zIndex": "2",
+                        "borderRadius": "full",
+                        "_focusVisible": {
+                            "ring": "2px",
+                            "ringColor": "colorPalette.focusRing",
+                            "ringOffset": "2px",
+                            "ringOffsetColor": "bg"
+                        }
+                    }
+                },
+                "variants": {
+                    "size": {
+                        "sm": {
+                            "root": {
+                                "--slider-thumb-size": "sizes.4",
+                                "--slider-track-size": "sizes.1.5",
+                                "--slider-marker-center": "6px",
+                                "--slider-marker-size": "sizes.1",
+                                "--slider-marker-inset": "3px"
+                            }
+                        },
+                        "md": {
+                            "root": {
+                                "--slider-thumb-size": "sizes.5",
+                                "--slider-track-size": "sizes.2",
+                                "--slider-marker-center": "8px",
+                                "--slider-marker-size": "sizes.1",
+                                "--slider-marker-inset": "4px"
+                            }
+                        },
+                        "lg": {
+                            "root": {
+                                "--slider-thumb-size": "sizes.6",
+                                "--slider-track-size": "sizes.2.5",
+                                "--slider-marker-center": "9px",
+                                "--slider-marker-size": "sizes.1.5",
+                                "--slider-marker-inset": "5px"
+                            }
+                        }
+                    },
+                    "variant": {
+                        "outline": {
+                            "track": {
+                                "shadow": "inset",
+                                "bg": "bg.emphasized/72"
+                            },
+                            "range": {
+                                "bg": "colorPalette.solid"
+                            },
+                            "thumb": {
+                                "borderWidth": "2px",
+                                "borderColor": "colorPalette.solid",
+                                "bg": "bg",
+                                "_disabled": {
+                                    "bg": "border.emphasized",
+                                    "borderColor": "border.emphasized"
+                                }
+                            }
+                        },
+                        "solid": {
+                            "track": {
+                                "bg": "colorPalette.subtle",
+                                "_disabled": {
+                                    "bg": "bg.muted"
+                                }
+                            },
+                            "range": {
+                                "bg": "colorPalette.solid"
+                            },
+                            "thumb": {
+                                "bg": "colorPalette.solid",
+                                "_disabled": {
+                                    "bg": "border.emphasized"
+                                }
+                            }
+                        }
+                    },
+                    "orientation": {
+                        "vertical": {
+                            "root": {
+                                "display": "inline-flex"
+                            },
+                            "control": {
+                                "flexDirection": "column",
+                                "height": "100%",
+                                "minWidth": "var(--slider-thumb-size)",
+                                "&[data-has-mark-label]": {
+                                    "marginEnd": "4"
+                                }
+                            },
+                            "track": {
+                                "width": "var(--slider-track-size)"
+                            },
+                            "thumb": {
+                                "left": "50%",
+                                "translate": "-50% 0"
+                            },
+                            "markerGroup": {
+                                "insetStart": "var(--slider-marker-center)",
+                                "insetBlock": "var(--slider-marker-inset)"
+                            },
+                            "marker": {
+                                "flexDirection": "row"
+                            }
+                        },
+                        "horizontal": {
+                            "control": {
+                                "flexDirection": "row",
+                                "width": "100%",
+                                "minHeight": "var(--slider-thumb-size)",
+                                "&[data-has-mark-label]": {
+                                    "marginBottom": "4"
+                                }
+                            },
+                            "track": {
+                                "height": "var(--slider-track-size)"
+                            },
+                            "thumb": {
+                                "top": "50%",
+                                "translate": "0 -50%"
+                            },
+                            "markerGroup": {
+                                "top": "var(--slider-marker-center)",
+                                "insetInline": "var(--slider-marker-inset)"
+                            },
+                            "marker": {
+                                "flexDirection": "column"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md",
+                    "variant": "outline",
+                    "orientation": "horizontal"
+                }
+            },
+            "stat": {
+                "className": "chakra-stat",
+                "slots": [
+                    "root",
+                    "label",
+                    "helpText",
+                    "valueText",
+                    "valueUnit",
+                    "indicator"
+                ],
+                "base": {
+                    "root": {
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "gap": "1",
+                        "position": "relative",
+                        "flex": "1"
+                    },
+                    "label": {
+                        "display": "inline-flex",
+                        "gap": "1.5",
+                        "alignItems": "center",
+                        "color": "fg.muted",
+                        "textStyle": "sm"
+                    },
+                    "helpText": {
+                        "color": "fg.muted",
+                        "textStyle": "xs"
+                    },
+                    "valueUnit": {
+                        "color": "fg.muted",
+                        "textStyle": "xs",
+                        "fontWeight": "initial",
+                        "letterSpacing": "initial"
+                    },
+                    "valueText": {
+                        "verticalAlign": "baseline",
+                        "fontWeight": "semibold",
+                        "letterSpacing": "tight",
+                        "fontFeatureSettings": "pnum",
+                        "fontVariantNumeric": "proportional-nums",
+                        "display": "inline-flex",
+                        "gap": "1"
+                    },
+                    "indicator": {
+                        "display": "inline-flex",
+                        "alignItems": "center",
+                        "justifyContent": "center",
+                        "marginEnd": 1,
+                        "& :where(svg)": {
+                            "w": "1em",
+                            "h": "1em"
+                        },
+                        "&[data-type=up]": {
+                            "color": "fg.success"
+                        },
+                        "&[data-type=down]": {
+                            "color": "fg.error"
+                        }
+                    }
+                },
+                "variants": {
+                    "size": {
+                        "sm": {
+                            "valueText": {
+                                "textStyle": "xl"
+                            }
+                        },
+                        "md": {
+                            "valueText": {
+                                "textStyle": "2xl"
+                            }
+                        },
+                        "lg": {
+                            "valueText": {
+                                "textStyle": "3xl"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md"
+                }
+            },
+            "steps": {
+                "className": "chakra-steps",
+                "slots": [
+                    "root",
+                    "list",
+                    "item",
+                    "trigger",
+                    "indicator",
+                    "separator",
+                    "content",
+                    "title",
+                    "description",
+                    "nextTrigger",
+                    "prevTrigger",
+                    "progress"
+                ],
+                "base": {
+                    "root": {
+                        "display": "flex",
+                        "width": "full"
+                    },
+                    "list": {
+                        "display": "flex",
+                        "justifyContent": "space-between",
+                        "--steps-gutter": "spacing.3",
+                        "--steps-thickness": "2px"
+                    },
+                    "title": {
+                        "fontWeight": "medium",
+                        "color": "fg"
+                    },
+                    "description": {
+                        "color": "fg.muted"
+                    },
+                    "separator": {
+                        "bg": "border",
+                        "flex": "1"
+                    },
+                    "indicator": {
+                        "display": "flex",
+                        "justifyContent": "center",
+                        "alignItems": "center",
+                        "flexShrink": "0",
+                        "borderRadius": "full",
+                        "fontWeight": "medium",
+                        "width": "var(--steps-size)",
+                        "height": "var(--steps-size)",
+                        "_icon": {
+                            "flexShrink": "0",
+                            "width": "var(--steps-icon-size)",
+                            "height": "var(--steps-icon-size)"
+                        }
+                    },
+                    "item": {
+                        "position": "relative",
+                        "display": "flex",
+                        "flex": "1 0 0",
+                        "&:last-of-type": {
+                            "flex": "initial",
+                            "& [data-part=separator]": {
+                                "display": "none"
+                            }
+                        }
+                    },
+                    "trigger": {
+                        "display": "flex",
+                        "alignItems": "center",
+                        "gap": "3",
+                        "textAlign": "start",
+                        "focusVisibleRing": "outside",
+                        "borderRadius": "l2"
+                    },
+                    "content": {
+                        "focusVisibleRing": "outside"
+                    }
+                },
+                "variants": {
+                    "orientation": {
+                        "vertical": {
+                            "root": {
+                                "flexDirection": "row",
+                                "height": "100%"
+                            },
+                            "list": {
+                                "flexDirection": "column",
+                                "alignItems": "flex-start"
+                            },
+                            "separator": {
+                                "position": "absolute",
+                                "width": "var(--steps-thickness)",
+                                "height": "100%",
+                                "maxHeight": "calc(100% - var(--steps-size) - var(--steps-gutter) * 2)",
+                                "top": "calc(var(--steps-size) + var(--steps-gutter))",
+                                "insetStart": "calc(var(--steps-size) / 2 - 1px)"
+                            },
+                            "item": {
+                                "alignItems": "flex-start"
+                            }
+                        },
+                        "horizontal": {
+                            "root": {
+                                "flexDirection": "column",
+                                "width": "100%"
+                            },
+                            "list": {
+                                "flexDirection": "row",
+                                "alignItems": "center"
+                            },
+                            "separator": {
+                                "width": "100%",
+                                "height": "var(--steps-thickness)",
+                                "marginX": "var(--steps-gutter)"
+                            },
+                            "item": {
+                                "alignItems": "center"
+                            }
+                        }
+                    },
+                    "variant": {
+                        "solid": {
+                            "indicator": {
+                                "_incomplete": {
+                                    "borderWidth": "var(--steps-thickness)"
+                                },
+                                "_current": {
+                                    "bg": "colorPalette.muted",
+                                    "borderWidth": "var(--steps-thickness)",
+                                    "borderColor": "colorPalette.solid",
+                                    "color": "colorPalette.fg"
+                                },
+                                "_complete": {
+                                    "bg": "colorPalette.solid",
+                                    "borderColor": "colorPalette.solid",
+                                    "color": "colorPalette.contrast"
+                                }
+                            },
+                            "separator": {
+                                "_complete": {
+                                    "bg": "colorPalette.solid"
+                                }
+                            }
+                        },
+                        "subtle": {
+                            "indicator": {
+                                "_incomplete": {
+                                    "bg": "bg.muted"
+                                },
+                                "_current": {
+                                    "bg": "colorPalette.muted",
+                                    "color": "colorPalette.fg"
+                                },
+                                "_complete": {
+                                    "bg": "colorPalette.emphasized",
+                                    "color": "colorPalette.fg"
+                                }
+                            },
+                            "separator": {
+                                "_complete": {
+                                    "bg": "colorPalette.emphasized"
+                                }
+                            }
+                        }
+                    },
+                    "size": {
+                        "xs": {
+                            "root": {
+                                "gap": "2.5"
+                            },
+                            "list": {
+                                "--steps-size": "sizes.6",
+                                "--steps-icon-size": "sizes.3.5",
+                                "textStyle": "xs"
+                            },
+                            "title": {
+                                "textStyle": "sm"
+                            }
+                        },
+                        "sm": {
+                            "root": {
+                                "gap": "3"
+                            },
+                            "list": {
+                                "--steps-size": "sizes.8",
+                                "--steps-icon-size": "sizes.4",
+                                "textStyle": "xs"
+                            },
+                            "title": {
+                                "textStyle": "sm"
+                            }
+                        },
+                        "md": {
+                            "root": {
+                                "gap": "4"
+                            },
+                            "list": {
+                                "--steps-size": "sizes.10",
+                                "--steps-icon-size": "sizes.4",
+                                "textStyle": "sm"
+                            },
+                            "title": {
+                                "textStyle": "sm"
+                            }
+                        },
+                        "lg": {
+                            "root": {
+                                "gap": "6"
+                            },
+                            "list": {
+                                "--steps-size": "sizes.11",
+                                "--steps-icon-size": "sizes.5",
+                                "textStyle": "md"
+                            },
+                            "title": {
+                                "textStyle": "md"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md",
+                    "variant": "solid",
+                    "orientation": "horizontal"
+                }
+            },
+            "switch": {
+                "slots": [
+                    "root",
+                    "label",
+                    "control",
+                    "thumb",
+                    "indicator"
+                ],
+                "className": "chakra-switch",
+                "base": {
+                    "root": {
+                        "display": "inline-flex",
+                        "gap": "2.5",
+                        "alignItems": "center",
+                        "position": "relative",
+                        "verticalAlign": "middle",
+                        "--switch-diff": "calc(var(--switch-width) - var(--switch-height))",
+                        "--switch-x": {
+                            "base": "var(--switch-diff)",
+                            "_rtl": "calc(var(--switch-diff) * -1)"
+                        }
+                    },
+                    "label": {
+                        "lineHeight": "1",
+                        "userSelect": "none",
+                        "fontSize": "sm",
+                        "fontWeight": "medium",
+                        "_disabled": {
+                            "opacity": "0.5"
+                        }
+                    },
+                    "indicator": {
+                        "position": "absolute",
+                        "height": "var(--switch-height)",
+                        "width": "var(--switch-height)",
+                        "fontSize": "var(--switch-indicator-font-size)",
+                        "fontWeight": "medium",
+                        "flexShrink": 0,
+                        "userSelect": "none",
+                        "display": "grid",
+                        "placeContent": "center",
+                        "transition": "inset-inline-start 0.12s ease",
+                        "insetInlineStart": "calc(var(--switch-x) - 2px)",
+                        "_checked": {
+                            "insetInlineStart": "2px"
+                        }
+                    },
+                    "control": {
+                        "display": "inline-flex",
+                        "gap": "0.5rem",
+                        "flexShrink": 0,
+                        "justifyContent": "flex-start",
+                        "cursor": "switch",
+                        "borderRadius": "full",
+                        "position": "relative",
+                        "width": "var(--switch-width)",
+                        "height": "var(--switch-height)",
+                        "_disabled": {
+                            "opacity": "0.5",
+                            "cursor": "not-allowed"
+                        },
+                        "_invalid": {
+                            "outline": "2px solid",
+                            "outlineColor": "border.error",
+                            "outlineOffset": "2px"
+                        }
+                    },
+                    "thumb": {
+                        "display": "flex",
+                        "alignItems": "center",
+                        "justifyContent": "center",
+                        "flexShrink": 0,
+                        "transitionProperty": "translate",
+                        "transitionDuration": "fast",
+                        "borderRadius": "inherit",
+                        "_checked": {
+                            "translate": "var(--switch-x) 0"
+                        }
+                    }
+                },
+                "variants": {
+                    "variant": {
+                        "solid": {
+                            "control": {
+                                "borderRadius": "full",
+                                "bg": "bg.emphasized",
+                                "focusVisibleRing": "outside",
+                                "_checked": {
+                                    "bg": "colorPalette.solid"
+                                }
+                            },
+                            "thumb": {
+                                "bg": "white",
+                                "width": "var(--switch-height)",
+                                "height": "var(--switch-height)",
+                                "scale": "0.8",
+                                "boxShadow": "sm",
+                                "_checked": {
+                                    "bg": "colorPalette.contrast"
+                                }
+                            }
+                        },
+                        "raised": {
+                            "control": {
+                                "borderRadius": "full",
+                                "height": "calc(var(--switch-height) / 2)",
+                                "bg": "bg.muted",
+                                "boxShadow": "inset",
+                                "_checked": {
+                                    "bg": "colorPalette.solid/60"
+                                }
+                            },
+                            "thumb": {
+                                "width": "var(--switch-height)",
+                                "height": "var(--switch-height)",
+                                "position": "relative",
+                                "top": "calc(var(--switch-height) * -0.25)",
+                                "bg": "white",
+                                "boxShadow": "xs",
+                                "focusVisibleRing": "outside",
+                                "_checked": {
+                                    "bg": "colorPalette.solid"
+                                }
+                            }
+                        }
+                    },
+                    "size": {
+                        "xs": {
+                            "root": {
+                                "--switch-width": "sizes.6",
+                                "--switch-height": "sizes.3",
+                                "--switch-indicator-font-size": "fontSizes.xs"
+                            }
+                        },
+                        "sm": {
+                            "root": {
+                                "--switch-width": "sizes.8",
+                                "--switch-height": "sizes.4",
+                                "--switch-indicator-font-size": "fontSizes.xs"
+                            }
+                        },
+                        "md": {
+                            "root": {
+                                "--switch-width": "sizes.10",
+                                "--switch-height": "sizes.5",
+                                "--switch-indicator-font-size": "fontSizes.sm"
+                            }
+                        },
+                        "lg": {
+                            "root": {
+                                "--switch-width": "sizes.12",
+                                "--switch-height": "sizes.6",
+                                "--switch-indicator-font-size": "fontSizes.md"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "variant": "solid",
+                    "size": "md"
+                }
+            },
+            "table": {
+                "className": "chakra-table",
+                "slots": [
+                    "root",
+                    "header",
+                    "body",
+                    "row",
+                    "columnHeader",
+                    "cell",
+                    "footer",
+                    "caption"
+                ],
+                "base": {
+                    "root": {
+                        "fontVariantNumeric": "lining-nums tabular-nums",
+                        "borderCollapse": "collapse",
+                        "width": "full",
+                        "textAlign": "start",
+                        "verticalAlign": "top"
+                    },
+                    "row": {
+                        "_selected": {
+                            "bg": "colorPalette.subtle"
+                        }
+                    },
+                    "cell": {
+                        "textAlign": "start",
+                        "alignItems": "center"
+                    },
+                    "columnHeader": {
+                        "fontWeight": "medium",
+                        "textAlign": "start",
+                        "color": "fg"
+                    },
+                    "caption": {
+                        "fontWeight": "medium",
+                        "textStyle": "xs"
+                    },
+                    "footer": {
+                        "fontWeight": "medium"
+                    }
+                },
+                "variants": {
+                    "interactive": {
+                        "true": {
+                            "body": {
+                                "& tr": {
+                                    "_hover": {
+                                        "bg": "colorPalette.subtle"
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    "stickyHeader": {
+                        "true": {
+                            "header": {
+                                "& :where(tr)": {
+                                    "top": "var(--table-sticky-offset, 0)",
+                                    "position": "sticky",
+                                    "zIndex": 1
+                                }
+                            }
+                        }
+                    },
+                    "striped": {
+                        "true": {
+                            "row": {
+                                "&:nth-of-type(odd) td": {
+                                    "bg": "bg.muted"
+                                }
+                            }
+                        }
+                    },
+                    "showColumnBorder": {
+                        "true": {
+                            "columnHeader": {
+                                "&:not(:last-of-type)": {
+                                    "borderInlineEndWidth": "1px"
+                                }
+                            },
+                            "cell": {
+                                "&:not(:last-of-type)": {
+                                    "borderInlineEndWidth": "1px"
+                                }
+                            }
+                        }
+                    },
+                    "variant": {
+                        "line": {
+                            "columnHeader": {
+                                "borderBottomWidth": "1px"
+                            },
+                            "cell": {
+                                "borderBottomWidth": "1px"
+                            },
+                            "row": {
+                                "bg": "bg"
+                            }
+                        },
+                        "outline": {
+                            "root": {
+                                "boxShadow": "0 0 0 1px {colors.border}",
+                                "overflow": "hidden"
+                            },
+                            "columnHeader": {
+                                "borderBottomWidth": "1px"
+                            },
+                            "header": {
+                                "bg": "bg.muted"
+                            },
+                            "row": {
+                                "&:not(:last-of-type)": {
+                                    "borderBottomWidth": "1px"
+                                }
+                            },
+                            "footer": {
+                                "borderTopWidth": "1px"
+                            }
+                        }
+                    },
+                    "size": {
+                        "sm": {
+                            "root": {
+                                "textStyle": "sm"
+                            },
+                            "columnHeader": {
+                                "px": "2",
+                                "py": "2"
+                            },
+                            "cell": {
+                                "px": "2",
+                                "py": "2"
+                            }
+                        },
+                        "md": {
+                            "root": {
+                                "textStyle": "sm"
+                            },
+                            "columnHeader": {
+                                "px": "3",
+                                "py": "3"
+                            },
+                            "cell": {
+                                "px": "3",
+                                "py": "3"
+                            }
+                        },
+                        "lg": {
+                            "root": {
+                                "textStyle": "md"
+                            },
+                            "columnHeader": {
+                                "px": "4",
+                                "py": "3"
+                            },
+                            "cell": {
+                                "px": "4",
+                                "py": "3"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "variant": "line",
+                    "size": "md"
+                }
+            },
+            "tabs": {
+                "slots": [
+                    "root",
+                    "trigger",
+                    "list",
+                    "content",
+                    "contentGroup",
+                    "indicator"
+                ],
+                "className": "chakra-tabs",
+                "base": {
+                    "root": {
+                        "--tabs-trigger-radius": "radii.l2",
+                        "position": "relative",
+                        "_horizontal": {
+                            "display": "block"
+                        },
+                        "_vertical": {
+                            "display": "flex"
+                        }
+                    },
+                    "list": {
+                        "display": "inline-flex",
+                        "position": "relative",
+                        "isolation": "isolate",
+                        "--tabs-indicator-shadow": "shadows.xs",
+                        "--tabs-indicator-bg": "colors.bg",
+                        "minH": "var(--tabs-height)",
+                        "_horizontal": {
+                            "flexDirection": "row"
+                        },
+                        "_vertical": {
+                            "flexDirection": "column"
+                        }
+                    },
+                    "trigger": {
+                        "outline": "0",
+                        "minW": "var(--tabs-height)",
+                        "height": "var(--tabs-height)",
+                        "display": "flex",
+                        "alignItems": "center",
+                        "fontWeight": "medium",
+                        "position": "relative",
+                        "cursor": "button",
+                        "gap": "2",
+                        "_focusVisible": {
+                            "zIndex": 1,
+                            "outline": "2px solid",
+                            "outlineColor": "colorPalette.focusRing"
+                        },
+                        "_disabled": {
+                            "cursor": "not-allowed",
+                            "opacity": 0.5
+                        }
+                    },
+                    "content": {
+                        "focusVisibleRing": "inside",
+                        "_horizontal": {
+                            "width": "100%",
+                            "pt": "var(--tabs-content-padding)"
+                        },
+                        "_vertical": {
+                            "height": "100%",
+                            "ps": "var(--tabs-content-padding)"
+                        }
+                    },
+                    "indicator": {
+                        "width": "var(--width)",
+                        "height": "var(--height)",
+                        "borderRadius": "var(--tabs-indicator-radius)",
+                        "bg": "var(--tabs-indicator-bg)",
+                        "shadow": "var(--tabs-indicator-shadow)",
+                        "zIndex": -1
+                    }
+                },
+                "variants": {
+                    "fitted": {
+                        "true": {
+                            "list": {
+                                "display": "flex"
+                            },
+                            "trigger": {
+                                "flex": 1,
+                                "textAlign": "center",
+                                "justifyContent": "center"
+                            }
+                        }
+                    },
+                    "justify": {
+                        "start": {
+                            "list": {
+                                "justifyContent": "flex-start"
+                            }
+                        },
+                        "center": {
+                            "list": {
+                                "justifyContent": "center"
+                            }
+                        },
+                        "end": {
+                            "list": {
+                                "justifyContent": "flex-end"
+                            }
+                        }
+                    },
+                    "size": {
+                        "sm": {
+                            "root": {
+                                "--tabs-height": "sizes.9",
+                                "--tabs-content-padding": "spacing.3"
+                            },
+                            "trigger": {
+                                "py": "1",
+                                "px": "3",
+                                "textStyle": "sm"
+                            }
+                        },
+                        "md": {
+                            "root": {
+                                "--tabs-height": "sizes.10",
+                                "--tabs-content-padding": "spacing.4"
+                            },
+                            "trigger": {
+                                "py": "2",
+                                "px": "4",
+                                "textStyle": "sm"
+                            }
+                        },
+                        "lg": {
+                            "root": {
+                                "--tabs-height": "sizes.11",
+                                "--tabs-content-padding": "spacing.4.5"
+                            },
+                            "trigger": {
+                                "py": "2",
+                                "px": "4.5",
+                                "textStyle": "md"
+                            }
+                        }
+                    },
+                    "variant": {
+                        "line": {
+                            "list": {
+                                "display": "flex",
+                                "borderColor": "border",
+                                "_horizontal": {
+                                    "borderBottomWidth": "1px"
+                                },
+                                "_vertical": {
+                                    "borderEndWidth": "1px"
+                                }
+                            },
+                            "trigger": {
+                                "color": "fg.muted",
+                                "_disabled": {
+                                    "_active": {
+                                        "bg": "initial"
+                                    }
+                                },
+                                "_selected": {
+                                    "color": "fg",
+                                    "_horizontal": {
+                                        "layerStyle": "indicator.bottom",
+                                        "--indicator-offset-y": "-1px",
+                                        "--indicator-color": "colors.colorPalette.solid"
+                                    },
+                                    "_vertical": {
+                                        "layerStyle": "indicator.end",
+                                        "--indicator-offset-x": "-1px"
+                                    }
+                                }
+                            }
+                        },
+                        "subtle": {
+                            "trigger": {
+                                "borderRadius": "var(--tabs-trigger-radius)",
+                                "color": "fg.muted",
+                                "_selected": {
+                                    "bg": "colorPalette.subtle",
+                                    "color": "colorPalette.fg"
+                                }
+                            }
+                        },
+                        "enclosed": {
+                            "list": {
+                                "bg": "bg.muted",
+                                "padding": "1",
+                                "borderRadius": "l3",
+                                "minH": "calc(var(--tabs-height) - 4px)"
+                            },
+                            "trigger": {
+                                "justifyContent": "center",
+                                "color": "fg.muted",
+                                "borderRadius": "var(--tabs-trigger-radius)",
+                                "_selected": {
+                                    "bg": "bg",
+                                    "color": "colorPalette.fg",
+                                    "shadow": "xs"
+                                }
+                            }
+                        },
+                        "outline": {
+                            "list": {
+                                "--line-thickness": "1px",
+                                "--line-offset": "calc(var(--line-thickness) * -1)",
+                                "borderColor": "border",
+                                "display": "flex",
+                                "_horizontal": {
+                                    "_before": {
+                                        "content": "\"\"",
+                                        "position": "absolute",
+                                        "bottom": "0px",
+                                        "width": "100%",
+                                        "borderBottomWidth": "var(--line-thickness)",
+                                        "borderBottomColor": "border"
+                                    }
+                                },
+                                "_vertical": {
+                                    "_before": {
+                                        "content": "\"\"",
+                                        "position": "absolute",
+                                        "insetInline": "var(--line-offset)",
+                                        "height": "calc(100% - calc(var(--line-thickness) * 2))",
+                                        "borderEndWidth": "var(--line-thickness)",
+                                        "borderEndColor": "border"
+                                    }
+                                }
+                            },
+                            "trigger": {
+                                "color": "fg.muted",
+                                "borderWidth": "1px",
+                                "borderColor": "transparent",
+                                "_selected": {
+                                    "bg": "currentBg",
+                                    "color": "colorPalette.fg"
+                                },
+                                "_horizontal": {
+                                    "borderTopRadius": "var(--tabs-trigger-radius)",
+                                    "marginBottom": "var(--line-offset)",
+                                    "marginEnd": {
+                                        "_notLast": "var(--line-offset)"
+                                    },
+                                    "_selected": {
+                                        "borderColor": "border",
+                                        "borderBottomColor": "transparent"
+                                    }
+                                },
+                                "_vertical": {
+                                    "borderStartRadius": "var(--tabs-trigger-radius)",
+                                    "marginEnd": "var(--line-offset)",
+                                    "marginBottom": {
+                                        "_notLast": "var(--line-offset)"
+                                    },
+                                    "_selected": {
+                                        "borderColor": "border",
+                                        "borderEndColor": "transparent"
+                                    }
+                                }
+                            }
+                        },
+                        "plain": {
+                            "trigger": {
+                                "color": "fg.muted",
+                                "_selected": {
+                                    "color": "colorPalette.fg"
+                                },
+                                "borderRadius": "var(--tabs-trigger-radius)",
+                                "&[data-selected][data-ssr]": {
+                                    "bg": "var(--tabs-indicator-bg)",
+                                    "shadow": "var(--tabs-indicator-shadow)",
+                                    "borderRadius": "var(--tabs-indicator-radius)"
+                                }
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md",
+                    "variant": "line"
+                }
+            },
+            "tag": {
+                "slots": [
+                    "root",
+                    "label",
+                    "closeTrigger",
+                    "startElement",
+                    "endElement"
+                ],
+                "className": "chakra-tag",
+                "base": {
+                    "root": {
+                        "display": "inline-flex",
+                        "alignItems": "center",
+                        "verticalAlign": "top",
+                        "maxWidth": "100%",
+                        "userSelect": "none",
+                        "borderRadius": "l2",
+                        "focusVisibleRing": "outside"
+                    },
+                    "label": {
+                        "lineClamp": "1"
+                    },
+                    "closeTrigger": {
+                        "display": "flex",
+                        "alignItems": "center",
+                        "justifyContent": "center",
+                        "outline": "0",
+                        "borderRadius": "l1",
+                        "color": "currentColor",
+                        "focusVisibleRing": "inside",
+                        "focusRingWidth": "2px"
+                    },
+                    "startElement": {
+                        "flexShrink": 0,
+                        "boxSize": "var(--tag-element-size)",
+                        "ms": "var(--tag-element-offset)",
+                        "&:has([data-scope=avatar])": {
+                            "boxSize": "var(--tag-avatar-size)",
+                            "ms": "calc(var(--tag-element-offset) * 1.5)"
+                        },
+                        "_icon": {
+                            "boxSize": "100%"
+                        }
+                    },
+                    "endElement": {
+                        "flexShrink": 0,
+                        "boxSize": "var(--tag-element-size)",
+                        "me": "var(--tag-element-offset)",
+                        "_icon": {
+                            "boxSize": "100%"
+                        },
+                        "&:has(button)": {
+                            "ms": "calc(var(--tag-element-offset) * -1)"
+                        }
+                    }
+                },
+                "variants": {
+                    "size": {
+                        "sm": {
+                            "root": {
+                                "px": "1.5",
+                                "minH": "4.5",
+                                "gap": "1",
+                                "--tag-avatar-size": "spacing.3",
+                                "--tag-element-size": "spacing.3",
+                                "--tag-element-offset": "-2px"
+                            },
+                            "label": {
+                                "textStyle": "xs"
+                            }
+                        },
+                        "md": {
+                            "root": {
+                                "px": "1.5",
+                                "minH": "5",
+                                "gap": "1",
+                                "--tag-avatar-size": "spacing.3.5",
+                                "--tag-element-size": "spacing.3.5",
+                                "--tag-element-offset": "-2px"
+                            },
+                            "label": {
+                                "textStyle": "xs"
+                            }
+                        },
+                        "lg": {
+                            "root": {
+                                "px": "2",
+                                "minH": "6",
+                                "gap": "1.5",
+                                "--tag-avatar-size": "spacing.4.5",
+                                "--tag-element-size": "spacing.4",
+                                "--tag-element-offset": "-3px"
+                            },
+                            "label": {
+                                "textStyle": "sm"
+                            }
+                        },
+                        "xl": {
+                            "root": {
+                                "px": "2.5",
+                                "minH": "8",
+                                "gap": "1.5",
+                                "--tag-avatar-size": "spacing.6",
+                                "--tag-element-size": "spacing.4.5",
+                                "--tag-element-offset": "-4px"
+                            },
+                            "label": {
+                                "textStyle": "sm"
+                            }
+                        }
+                    },
+                    "variant": {
+                        "subtle": {
+                            "root": {
+                                "bg": "colorPalette.subtle",
+                                "color": "colorPalette.fg"
+                            }
+                        },
+                        "solid": {
+                            "root": {
+                                "bg": "colorPalette.solid",
+                                "color": "colorPalette.contrast"
+                            }
+                        },
+                        "outline": {
+                            "root": {
+                                "color": "colorPalette.fg",
+                                "shadow": "inset 0 0 0px 1px var(--shadow-color)",
+                                "shadowColor": "colorPalette.muted"
+                            }
+                        },
+                        "surface": {
+                            "root": {
+                                "bg": "colorPalette.subtle",
+                                "color": "colorPalette.fg",
+                                "shadow": "inset 0 0 0px 1px var(--shadow-color)",
+                                "shadowColor": "colorPalette.muted"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md",
+                    "variant": "surface"
+                }
+            },
+            "toast": {
+                "slots": [
+                    "root",
+                    "title",
+                    "description",
+                    "indicator",
+                    "closeTrigger",
+                    "actionTrigger"
+                ],
+                "className": "chakra-toast",
+                "base": {
+                    "root": {
+                        "width": "full",
+                        "display": "flex",
+                        "alignItems": "flex-start",
+                        "position": "relative",
+                        "gap": "3",
+                        "py": "4",
+                        "ps": "4",
+                        "pe": "6",
+                        "borderRadius": "l2",
+                        "translate": "var(--x) var(--y)",
+                        "scale": "var(--scale)",
+                        "zIndex": "var(--z-index)",
+                        "height": "var(--height)",
+                        "opacity": "var(--opacity)",
+                        "willChange": "translate, opacity, scale",
+                        "transition": "translate 400ms, scale 400ms, opacity 400ms, height 400ms, box-shadow 200ms",
+                        "transitionTimingFunction": "cubic-bezier(0.21, 1.02, 0.73, 1)",
+                        "_closed": {
+                            "transition": "translate 400ms, scale 400ms, opacity 200ms",
+                            "transitionTimingFunction": "cubic-bezier(0.06, 0.71, 0.55, 1)"
+                        },
+                        "bg": "bg.panel",
+                        "color": "fg",
+                        "boxShadow": "xl",
+                        "--toast-trigger-bg": "colors.bg.muted",
+                        "&[data-type=warning]": {
+                            "bg": "orange.solid",
+                            "color": "orange.contrast",
+                            "--toast-trigger-bg": "{white/10}",
+                            "--toast-border-color": "{white/40}"
+                        },
+                        "&[data-type=success]": {
+                            "bg": "green.solid",
+                            "color": "green.contrast",
+                            "--toast-trigger-bg": "{white/10}",
+                            "--toast-border-color": "{white/40}"
+                        },
+                        "&[data-type=error]": {
+                            "bg": "red.solid",
+                            "color": "red.contrast",
+                            "--toast-trigger-bg": "{white/10}",
+                            "--toast-border-color": "{white/40}"
+                        }
+                    },
+                    "title": {
+                        "fontWeight": "medium",
+                        "textStyle": "sm",
+                        "marginEnd": "2"
+                    },
+                    "description": {
+                        "display": "inline",
+                        "textStyle": "sm",
+                        "opacity": "0.8"
+                    },
+                    "indicator": {
+                        "flexShrink": "0",
+                        "boxSize": "5"
+                    },
+                    "actionTrigger": {
+                        "textStyle": "sm",
+                        "fontWeight": "medium",
+                        "height": "8",
+                        "px": "3",
+                        "borderRadius": "l2",
+                        "alignSelf": "center",
+                        "borderWidth": "1px",
+                        "borderColor": "var(--toast-border-color, inherit)",
+                        "transition": "background 200ms",
+                        "_hover": {
+                            "bg": "var(--toast-trigger-bg)"
+                        }
+                    },
+                    "closeTrigger": {
+                        "position": "absolute",
+                        "top": "1",
+                        "insetEnd": "1",
+                        "padding": "1",
+                        "display": "inline-flex",
+                        "alignItems": "center",
+                        "justifyContent": "center",
+                        "color": "{currentColor/60}",
+                        "borderRadius": "l2",
+                        "textStyle": "md",
+                        "transition": "background 200ms"
+                    }
+                }
+            },
+            "tooltip": {
+                "slots": [
+                    "trigger",
+                    "arrow",
+                    "arrowTip",
+                    "positioner",
+                    "content"
+                ],
+                "className": "chakra-tooltip",
+                "base": {
+                    "content": {
+                        "--tooltip-bg": "colors.bg.inverted",
+                        "bg": "var(--tooltip-bg)",
+                        "color": "fg.inverted",
+                        "px": "2.5",
+                        "py": "1",
+                        "borderRadius": "l2",
+                        "fontWeight": "medium",
+                        "textStyle": "xs",
+                        "boxShadow": "md",
+                        "maxW": "xs",
+                        "zIndex": "tooltip",
+                        "transformOrigin": "var(--transform-origin)",
+                        "_open": {
+                            "animationStyle": "scale-fade-in",
+                            "animationDuration": "fast"
+                        },
+                        "_closed": {
+                            "animationStyle": "scale-fade-out",
+                            "animationDuration": "fast"
+                        }
+                    },
+                    "arrow": {
+                        "--arrow-size": "sizes.2",
+                        "--arrow-background": "var(--tooltip-bg)"
+                    },
+                    "arrowTip": {
+                        "borderTopWidth": "1px",
+                        "borderInlineStartWidth": "1px",
+                        "borderColor": "var(--tooltip-bg)"
+                    }
+                }
+            },
+            "status": {
+                "className": "chakra-status",
+                "slots": [
+                    "root",
+                    "indicator"
+                ],
+                "base": {
+                    "root": {
+                        "display": "inline-flex",
+                        "alignItems": "center",
+                        "gap": "2"
+                    },
+                    "indicator": {
+                        "width": "0.64em",
+                        "height": "0.64em",
+                        "flexShrink": 0,
+                        "borderRadius": "full",
+                        "forcedColorAdjust": "none",
+                        "bg": "colorPalette.solid"
+                    }
+                },
+                "variants": {
+                    "size": {
+                        "sm": {
+                            "root": {
+                                "textStyle": "xs"
+                            }
+                        },
+                        "md": {
+                            "root": {
+                                "textStyle": "sm"
+                            }
+                        },
+                        "lg": {
+                            "root": {
+                                "textStyle": "md"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md"
+                }
+            },
+            "timeline": {
+                "slots": [
+                    "root",
+                    "item",
+                    "content",
+                    "separator",
+                    "indicator",
+                    "connector",
+                    "title",
+                    "description"
+                ],
+                "className": "chakra-timeline",
+                "base": {
+                    "root": {
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "width": "full",
+                        "--timeline-thickness": "1px",
+                        "--timeline-gutter": "4px"
+                    },
+                    "item": {
+                        "display": "flex",
+                        "position": "relative",
+                        "alignItems": "flex-start",
+                        "flexShrink": 0,
+                        "gap": "4",
+                        "_last": {
+                            "& :where(.chakra-timeline__separator)": {
+                                "display": "none"
+                            }
+                        }
+                    },
+                    "separator": {
+                        "position": "absolute",
+                        "borderStartWidth": "var(--timeline-thickness)",
+                        "ms": "calc(-1 * var(--timeline-thickness) / 2)",
+                        "insetInlineStart": "calc(var(--timeline-indicator-size) / 2)",
+                        "insetBlock": "0",
+                        "borderColor": "border"
+                    },
+                    "indicator": {
+                        "outline": "2px solid {colors.bg}",
+                        "position": "relative",
+                        "flexShrink": "0",
+                        "boxSize": "var(--timeline-indicator-size)",
+                        "fontSize": "var(--timeline-font-size)",
+                        "display": "flex",
+                        "alignItems": "center",
+                        "justifyContent": "center",
+                        "borderRadius": "full",
+                        "fontWeight": "medium"
+                    },
+                    "connector": {
+                        "alignSelf": "stretch",
+                        "position": "relative"
+                    },
+                    "content": {
+                        "pb": "6",
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "width": "full",
+                        "gap": "2"
+                    },
+                    "title": {
+                        "display": "flex",
+                        "fontWeight": "medium",
+                        "flexWrap": "wrap",
+                        "gap": "1.5",
+                        "alignItems": "center",
+                        "mt": "var(--timeline-margin)"
+                    },
+                    "description": {
+                        "color": "fg.muted",
+                        "textStyle": "xs"
+                    }
+                },
+                "variants": {
+                    "variant": {
+                        "subtle": {
+                            "indicator": {
+                                "bg": "colorPalette.muted"
+                            }
+                        },
+                        "solid": {
+                            "indicator": {
+                                "bg": "colorPalette.solid",
+                                "color": "colorPalette.contrast"
+                            }
+                        },
+                        "outline": {
+                            "indicator": {
+                                "bg": "currentBg",
+                                "borderWidth": "1px",
+                                "borderColor": "colorPalette.muted"
+                            }
+                        },
+                        "plain": {}
+                    },
+                    "size": {
+                        "sm": {
+                            "root": {
+                                "--timeline-indicator-size": "sizes.4",
+                                "--timeline-font-size": "fontSizes.2xs"
+                            },
+                            "title": {
+                                "textStyle": "xs"
+                            }
+                        },
+                        "md": {
+                            "root": {
+                                "--timeline-indicator-size": "sizes.5",
+                                "--timeline-font-size": "fontSizes.xs"
+                            },
+                            "title": {
+                                "textStyle": "sm"
+                            }
+                        },
+                        "lg": {
+                            "root": {
+                                "--timeline-indicator-size": "sizes.6",
+                                "--timeline-font-size": "fontSizes.xs"
+                            },
+                            "title": {
+                                "mt": "0.5",
+                                "textStyle": "sm"
+                            }
+                        },
+                        "xl": {
+                            "root": {
+                                "--timeline-indicator-size": "sizes.8",
+                                "--timeline-font-size": "fontSizes.sm"
+                            },
+                            "title": {
+                                "mt": "1.5",
+                                "textStyle": "sm"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md",
+                    "variant": "solid"
+                }
+            },
+            "colorPicker": {
+                "className": "colorPicker",
+                "slots": [
+                    "root",
+                    "label",
+                    "control",
+                    "trigger",
+                    "positioner",
+                    "content",
+                    "area",
+                    "areaThumb",
+                    "valueText",
+                    "areaBackground",
+                    "channelSlider",
+                    "channelSliderLabel",
+                    "channelSliderTrack",
+                    "channelSliderThumb",
+                    "channelSliderValueText",
+                    "channelInput",
+                    "transparencyGrid",
+                    "swatchGroup",
+                    "swatchTrigger",
+                    "swatchIndicator",
+                    "swatch",
+                    "eyeDropperTrigger",
+                    "formatTrigger",
+                    "formatSelect",
+                    "view"
+                ],
+                "base": {
+                    "root": {
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "gap": "1.5"
+                    },
+                    "label": {
+                        "color": "fg",
+                        "fontWeight": "medium",
+                        "textStyle": "sm"
+                    },
+                    "valueText": {
+                        "textAlign": "start"
+                    },
+                    "control": {
+                        "display": "flex",
+                        "alignItems": "center",
+                        "flexDirection": "row",
+                        "gap": "2",
+                        "position": "relative"
+                    },
+                    "swatchTrigger": {
+                        "display": "flex",
+                        "alignItems": "center",
+                        "justifyContent": "center"
+                    },
+                    "trigger": {
+                        "display": "flex",
+                        "alignItems": "center",
+                        "justifyContent": "center",
+                        "flexDirection": "row",
+                        "flexShrink": "0",
+                        "gap": "2",
+                        "textStyle": "sm",
+                        "minH": "var(--input-height)",
+                        "minW": "var(--input-height)",
+                        "px": "1",
+                        "rounded": "l2",
+                        "_disabled": {
+                            "opacity": "0.5"
+                        },
+                        "--focus-color": "colors.colorPalette.focusRing",
+                        "&:focus-visible": {
+                            "borderColor": "var(--focus-color)",
+                            "outline": "1px solid var(--focus-color)"
+                        },
+                        "&[data-fit-content]": {
+                            "--input-height": "unset",
+                            "px": "0",
+                            "border": "0"
+                        }
+                    },
+                    "content": {
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "bg": "bg.panel",
+                        "borderRadius": "l3",
+                        "boxShadow": "lg",
+                        "width": "64",
+                        "p": "4",
+                        "gap": "3",
+                        "zIndex": "dropdown",
+                        "_open": {
+                            "animationStyle": "slide-fade-in",
+                            "animationDuration": "fast"
+                        },
+                        "_closed": {
+                            "animationStyle": "slide-fade-out",
+                            "animationDuration": "faster"
+                        }
+                    },
+                    "area": {
+                        "height": "180px",
+                        "borderRadius": "l2",
+                        "overflow": "hidden"
+                    },
+                    "areaThumb": {
+                        "borderRadius": "full",
+                        "height": "var(--thumb-size)",
+                        "width": "var(--thumb-size)",
+                        "borderWidth": "2px",
+                        "borderColor": "white",
+                        "shadow": "sm",
+                        "focusVisibleRing": "mixed",
+                        "focusRingColor": "white"
+                    },
+                    "areaBackground": {
+                        "height": "full"
+                    },
+                    "channelSlider": {
+                        "borderRadius": "l2",
+                        "flex": "1"
+                    },
+                    "channelSliderTrack": {
+                        "height": "var(--slider-height)",
+                        "borderRadius": "inherit",
+                        "boxShadow": "inset 0 0 0 1px rgba(0,0,0,0.1)"
+                    },
+                    "swatchGroup": {
+                        "display": "flex",
+                        "flexDirection": "row",
+                        "flexWrap": "wrap",
+                        "gap": "2"
+                    },
+                    "swatch": {
+                        "boxSize": "var(--swatch-size)",
+                        "shadow": "inset 0 0 0 1px rgba(0, 0, 0, 0.1)",
+                        "--checker-size": "8px",
+                        "--checker-bg": "colors.bg",
+                        "--checker-fg": "colors.bg.emphasized",
+                        "background": "linear-gradient(var(--color), var(--color)), repeating-conic-gradient(var(--checker-fg) 0%, var(--checker-fg) 25%, var(--checker-bg) 0%, var(--checker-bg) 50%) 0% 50% / var(--checker-size) var(--checker-size) !important",
+                        "display": "inline-flex",
+                        "alignItems": "center",
+                        "justifyContent": "center",
+                        "flexShrink": "0",
+                        "borderRadius": "l1"
+                    },
+                    "swatchIndicator": {
+                        "color": "white",
+                        "rounded": "full"
+                    },
+                    "channelSliderThumb": {
+                        "borderRadius": "full",
+                        "height": "var(--thumb-size)",
+                        "width": "var(--thumb-size)",
+                        "borderWidth": "2px",
+                        "borderColor": "white",
+                        "shadow": "sm",
+                        "transform": "translate(-50%, -50%)",
+                        "focusVisibleRing": "outside",
+                        "focusRingOffset": "1px"
+                    },
+                    "channelInput": {
+                        "width": "100%",
+                        "minWidth": "0",
+                        "outline": "0",
+                        "position": "relative",
+                        "appearance": "none",
+                        "textAlign": "start",
+                        "borderRadius": "l2",
+                        "_disabled": {
+                            "layerStyle": "disabled"
+                        },
+                        "height": "var(--input-height)",
+                        "minW": "var(--input-height)",
+                        "--focus-color": "colors.colorPalette.focusRing",
+                        "--error-color": "colors.border.error",
+                        "_invalid": {
+                            "focusRingColor": "var(--error-color)",
+                            "borderColor": "var(--error-color)"
+                        },
+                        "&::-webkit-inner-spin-button, &::-webkit-outer-spin-button": {
+                            "WebkitAppearance": "none",
+                            "margin": 0
+                        }
+                    },
+                    "formatSelect": {
+                        "textStyle": "xs",
+                        "textTransform": "uppercase",
+                        "borderWidth": "1px",
+                        "minH": "6",
+                        "focusRing": "inside",
+                        "rounded": "l2"
+                    },
+                    "transparencyGrid": {
+                        "borderRadius": "l2"
+                    },
+                    "view": {
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "gap": "2"
+                    }
+                },
+                "variants": {
+                    "size": {
+                        "2xs": {
+                            "channelInput": {
+                                "textStyle": "xs",
+                                "px": "2",
+                                "--input-height": "sizes.7"
+                            },
+                            "swatch": {
+                                "--swatch-size": "sizes.4.5"
+                            },
+                            "trigger": {
+                                "--input-height": "sizes.7"
+                            },
+                            "area": {
+                                "--thumb-size": "sizes.3"
+                            },
+                            "channelSlider": {
+                                "--slider-height": "sizes.3",
+                                "--thumb-size": "sizes.3"
+                            }
+                        },
+                        "xs": {
+                            "channelInput": {
+                                "textStyle": "xs",
+                                "px": "2",
+                                "--input-height": "sizes.8"
+                            },
+                            "swatch": {
+                                "--swatch-size": "sizes.5"
+                            },
+                            "trigger": {
+                                "--input-height": "sizes.8"
+                            },
+                            "area": {
+                                "--thumb-size": "sizes.3.5"
+                            },
+                            "channelSlider": {
+                                "--slider-height": "sizes.3.5",
+                                "--thumb-size": "sizes.3.5"
+                            }
+                        },
+                        "sm": {
+                            "channelInput": {
+                                "textStyle": "sm",
+                                "px": "2.5",
+                                "--input-height": "sizes.9"
+                            },
+                            "swatch": {
+                                "--swatch-size": "sizes.6"
+                            },
+                            "trigger": {
+                                "--input-height": "sizes.9"
+                            },
+                            "area": {
+                                "--thumb-size": "sizes.3.5"
+                            },
+                            "channelSlider": {
+                                "--slider-height": "sizes.3.5",
+                                "--thumb-size": "sizes.3.5"
+                            }
+                        },
+                        "md": {
+                            "channelInput": {
+                                "textStyle": "sm",
+                                "px": "3",
+                                "--input-height": "sizes.10"
+                            },
+                            "swatch": {
+                                "--swatch-size": "sizes.7"
+                            },
+                            "trigger": {
+                                "--input-height": "sizes.10"
+                            },
+                            "area": {
+                                "--thumb-size": "sizes.3.5"
+                            },
+                            "channelSlider": {
+                                "--slider-height": "sizes.3.5",
+                                "--thumb-size": "sizes.3.5"
+                            }
+                        },
+                        "lg": {
+                            "channelInput": {
+                                "textStyle": "md",
+                                "px": "4",
+                                "--input-height": "sizes.11"
+                            },
+                            "swatch": {
+                                "--swatch-size": "sizes.7"
+                            },
+                            "trigger": {
+                                "--input-height": "sizes.11"
+                            },
+                            "area": {
+                                "--thumb-size": "sizes.3.5"
+                            },
+                            "channelSlider": {
+                                "--slider-height": "sizes.3.5",
+                                "--thumb-size": "sizes.3.5"
+                            }
+                        },
+                        "xl": {
+                            "channelInput": {
+                                "textStyle": "md",
+                                "px": "4.5",
+                                "--input-height": "sizes.12"
+                            },
+                            "swatch": {
+                                "--swatch-size": "sizes.8"
+                            },
+                            "trigger": {
+                                "--input-height": "sizes.12"
+                            },
+                            "area": {
+                                "--thumb-size": "sizes.3.5"
+                            },
+                            "channelSlider": {
+                                "--slider-height": "sizes.3.5",
+                                "--thumb-size": "sizes.3.5"
+                            }
+                        },
+                        "2xl": {
+                            "channelInput": {
+                                "textStyle": "lg",
+                                "px": "5",
+                                "--input-height": "sizes.16"
+                            },
+                            "swatch": {
+                                "--swatch-size": "sizes.10"
+                            },
+                            "trigger": {
+                                "--input-height": "sizes.16"
+                            },
+                            "area": {
+                                "--thumb-size": "sizes.3.5"
+                            },
+                            "channelSlider": {
+                                "--slider-height": "sizes.3.5",
+                                "--thumb-size": "sizes.3.5"
+                            }
+                        }
+                    },
+                    "variant": {
+                        "outline": {
+                            "channelInput": {
+                                "bg": "transparent",
+                                "borderWidth": "1px",
+                                "borderColor": "border",
+                                "focusVisibleRing": "inside"
+                            },
+                            "trigger": {
+                                "borderWidth": "1px"
+                            }
+                        },
+                        "subtle": {
+                            "channelInput": {
+                                "borderWidth": "1px",
+                                "borderColor": "transparent",
+                                "bg": "bg.muted",
+                                "focusVisibleRing": "inside"
+                            },
+                            "trigger": {
+                                "borderWidth": "1px",
+                                "borderColor": "transparent",
+                                "bg": "bg.muted"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md",
+                    "variant": "outline"
+                }
+            },
+            "qrCode": {
+                "slots": [
+                    "root",
+                    "frame",
+                    "pattern",
+                    "overlay",
+                    "downloadTrigger"
+                ],
+                "className": "chakra-qr-code",
+                "base": {
+                    "root": {
+                        "position": "relative",
+                        "width": "fit-content",
+                        "--qr-code-overlay-size": "calc(var(--qr-code-size) / 3)"
+                    },
+                    "frame": {
+                        "width": "var(--qr-code-size)",
+                        "height": "var(--qr-code-size)",
+                        "fill": "currentColor"
+                    },
+                    "overlay": {
+                        "display": "flex",
+                        "alignItems": "center",
+                        "justifyContent": "center",
+                        "width": "var(--qr-code-overlay-size)",
+                        "height": "var(--qr-code-overlay-size)",
+                        "padding": "1",
+                        "bg": "bg",
+                        "rounded": "l1"
+                    }
+                },
+                "variants": {
+                    "size": {
+                        "2xs": {
+                            "root": {
+                                "--qr-code-size": "40px"
+                            }
+                        },
+                        "xs": {
+                            "root": {
+                                "--qr-code-size": "64px"
+                            }
+                        },
+                        "sm": {
+                            "root": {
+                                "--qr-code-size": "80px"
+                            }
+                        },
+                        "md": {
+                            "root": {
+                                "--qr-code-size": "120px"
+                            }
+                        },
+                        "lg": {
+                            "root": {
+                                "--qr-code-size": "160px"
+                            }
+                        },
+                        "xl": {
+                            "root": {
+                                "--qr-code-size": "200px"
+                            }
+                        },
+                        "2xl": {
+                            "root": {
+                                "--qr-code-size": "240px"
+                            }
+                        },
+                        "full": {
+                            "root": {
+                                "--qr-code-size": "100%"
+                            }
+                        }
+                    }
+                },
+                "defaultVariants": {
+                    "size": "md"
+                }
+            }
+        },
+        "textStyles": {
+            "2xs": {
+                "value": {
+                    "fontSize": "2xs",
+                    "lineHeight": "0.75rem"
+                }
+            },
+            "xs": {
+                "value": {
+                    "fontSize": "xs",
+                    "lineHeight": "1rem"
+                }
+            },
+            "sm": {
+                "value": {
+                    "fontSize": "sm",
+                    "lineHeight": "1.25rem"
+                }
+            },
+            "md": {
+                "value": {
+                    "fontSize": "md",
+                    "lineHeight": "1.5rem"
+                }
+            },
+            "lg": {
+                "value": {
+                    "fontSize": "lg",
+                    "lineHeight": "1.75rem"
+                }
+            },
+            "xl": {
+                "value": {
+                    "fontSize": "xl",
+                    "lineHeight": "1.875rem"
+                }
+            },
+            "2xl": {
+                "value": {
+                    "fontSize": "2xl",
+                    "lineHeight": "2rem"
+                }
+            },
+            "3xl": {
+                "value": {
+                    "fontSize": "3xl",
+                    "lineHeight": "2.375rem"
+                }
+            },
+            "4xl": {
+                "value": {
+                    "fontSize": "4xl",
+                    "lineHeight": "2.75rem",
+                    "letterSpacing": "-0.025em"
+                }
+            },
+            "5xl": {
+                "value": {
+                    "fontSize": "5xl",
+                    "lineHeight": "3.75rem",
+                    "letterSpacing": "-0.025em"
+                }
+            },
+            "6xl": {
+                "value": {
+                    "fontSize": "6xl",
+                    "lineHeight": "4.5rem",
+                    "letterSpacing": "-0.025em"
+                }
+            },
+            "7xl": {
+                "value": {
+                    "fontSize": "7xl",
+                    "lineHeight": "5.75rem",
+                    "letterSpacing": "-0.025em"
+                }
+            },
+            "none": {
+                "value": {}
+            }
+        },
+        "layerStyles": {
+            "fill.muted": {
+                "value": {
+                    "background": "colorPalette.muted",
+                    "color": "colorPalette.fg"
+                }
+            },
+            "fill.subtle": {
+                "value": {
+                    "background": "colorPalette.subtle",
+                    "color": "colorPalette.fg"
+                }
+            },
+            "fill.surface": {
+                "value": {
+                    "background": "colorPalette.subtle",
+                    "color": "colorPalette.fg",
+                    "boxShadow": "0 0 0px 1px var(--shadow-color)",
+                    "boxShadowColor": "colorPalette.muted"
+                }
+            },
+            "fill.solid": {
+                "value": {
+                    "background": "colorPalette.solid",
+                    "color": "colorPalette.contrast"
+                }
+            },
+            "outline.subtle": {
+                "value": {
+                    "color": "colorPalette.fg",
+                    "boxShadow": "inset 0 0 0px 1px var(--shadow-color)",
+                    "boxShadowColor": "colorPalette.subtle"
+                }
+            },
+            "outline.solid": {
+                "value": {
+                    "borderWidth": "1px",
+                    "borderColor": "colorPalette.solid",
+                    "color": "colorPalette.fg"
+                }
+            },
+            "indicator.bottom": {
+                "value": {
+                    "position": "relative",
+                    "--indicator-color-fallback": "colors.colorPalette.solid",
+                    "_before": {
+                        "content": "\"\"",
+                        "position": "absolute",
+                        "bottom": "var(--indicator-offset-y, 0)",
+                        "insetInline": "var(--indicator-offset-x, 0)",
+                        "height": "var(--indicator-thickness, 2px)",
+                        "background": "var(--indicator-color, var(--indicator-color-fallback))"
+                    }
+                }
+            },
+            "indicator.top": {
+                "value": {
+                    "position": "relative",
+                    "--indicator-color-fallback": "colors.colorPalette.solid",
+                    "_before": {
+                        "content": "\"\"",
+                        "position": "absolute",
+                        "top": "var(--indicator-offset-y, 0)",
+                        "insetInline": "var(--indicator-offset-x, 0)",
+                        "height": "var(--indicator-thickness, 2px)",
+                        "background": "var(--indicator-color, var(--indicator-color-fallback))"
+                    }
+                }
+            },
+            "indicator.start": {
+                "value": {
+                    "position": "relative",
+                    "--indicator-color-fallback": "colors.colorPalette.solid",
+                    "_before": {
+                        "content": "\"\"",
+                        "position": "absolute",
+                        "insetInlineStart": "var(--indicator-offset-x, 0)",
+                        "insetBlock": "var(--indicator-offset-y, 0)",
+                        "width": "var(--indicator-thickness, 2px)",
+                        "background": "var(--indicator-color, var(--indicator-color-fallback))"
+                    }
+                }
+            },
+            "indicator.end": {
+                "value": {
+                    "position": "relative",
+                    "--indicator-color-fallback": "colors.colorPalette.solid",
+                    "_before": {
+                        "content": "\"\"",
+                        "position": "absolute",
+                        "insetInlineEnd": "var(--indicator-offset-x, 0)",
+                        "insetBlock": "var(--indicator-offset-y, 0)",
+                        "width": "var(--indicator-thickness, 2px)",
+                        "background": "var(--indicator-color, var(--indicator-color-fallback))"
+                    }
+                }
+            },
+            "disabled": {
+                "value": {
+                    "opacity": "0.5",
+                    "cursor": "not-allowed"
+                }
+            },
+            "none": {
+                "value": {}
+            }
+        },
+        "animationStyles": {
+            "slide-fade-in": {
+                "value": {
+                    "transformOrigin": "var(--transform-origin)",
+                    "&[data-placement^=top]": {
+                        "animationName": "slide-from-bottom, fade-in"
+                    },
+                    "&[data-placement^=bottom]": {
+                        "animationName": "slide-from-top, fade-in"
+                    },
+                    "&[data-placement^=left]": {
+                        "animationName": "slide-from-right, fade-in"
+                    },
+                    "&[data-placement^=right]": {
+                        "animationName": "slide-from-left, fade-in"
+                    }
+                }
+            },
+            "slide-fade-out": {
+                "value": {
+                    "transformOrigin": "var(--transform-origin)",
+                    "&[data-placement^=top]": {
+                        "animationName": "slide-to-bottom, fade-out"
+                    },
+                    "&[data-placement^=bottom]": {
+                        "animationName": "slide-to-top, fade-out"
+                    },
+                    "&[data-placement^=left]": {
+                        "animationName": "slide-to-right, fade-out"
+                    },
+                    "&[data-placement^=right]": {
+                        "animationName": "slide-to-left, fade-out"
+                    }
+                }
+            },
+            "scale-fade-in": {
+                "value": {
+                    "transformOrigin": "var(--transform-origin)",
+                    "animationName": "scale-in, fade-in"
+                }
+            },
+            "scale-fade-out": {
+                "value": {
+                    "transformOrigin": "var(--transform-origin)",
+                    "animationName": "scale-out, fade-out"
+                }
+            }
+        }
+    }
+};
\ No newline at end of file
diff --git a/front/src/theme/foundations/colors.ts b/front/src/theme/foundations/colors.ts
index ecb6f27..284f80a 100644
--- a/front/src/theme/foundations/colors.ts
+++ b/front/src/theme/foundations/colors.ts
@@ -1,17 +1,21 @@
+
+type PandaColorModel = {
+  value: string;
+}
 type ThemeModel = {
-  50: string;
-  100: string;
-  200: string;
-  300: string;
-  400: string;
-  500: string;
-  600: string;
-  700: string;
-  800: string;
-  900: string;
+  50: PandaColorModel;
+  100: PandaColorModel;
+  200: PandaColorModel;
+  300: PandaColorModel;
+  400: PandaColorModel;
+  500: PandaColorModel;
+  600: PandaColorModel;
+  700: PandaColorModel;
+  800: PandaColorModel;
+  900: PandaColorModel;
 };
 
-const back = {
+const back: ThemeModel = {
   50: { value: '#ebf4fa' },
   100: { value: '#d1dbe0' },
   200: { value: '#b6c2c9' },
@@ -24,7 +28,7 @@ const back = {
   900: { value: '#020f12' },
 };
 
-const brand = {
+const brand: ThemeModel = {
   50: { value: '#e3edff' },
   100: { value: '#b6c9fd' },
   200: { value: '#88a5f7' },
@@ -36,7 +40,7 @@ const brand = {
   800: { value: '#02164a' },
   900: { value: '#00071e' },
 };
-const normalText = {
+const normalText: ThemeModel = {
   50: { value: '#f2f2f2' },
   100: { value: '#d9d9d9' },
   200: { value: '#bfbfbf' },
@@ -49,7 +53,7 @@ const normalText = {
   900: { value: '#0d0d0d' },
 };
 
-const green = {
+const green: ThemeModel = {
   50: { value: '#f0fdf4' },
   100: { value: '#dcfce7' },
   200: { value: '#bbf7d0' },
@@ -61,7 +65,7 @@ const green = {
   800: { value: '#166534' },
   900: { value: '#14532d' },
 };
-const blue = {
+const blue: ThemeModel = {
   50: { value: '#eff6ff' },
   100: { value: '#dbeafe' },
   200: { value: '#bfdbfe' },
@@ -74,7 +78,7 @@ const blue = {
   900: { value: '#1e3a8a' },
 };
 
-const orange = {
+const orange: ThemeModel = {
   50: { value: '#fff7ed' },
   100: { value: '#ffedd5' },
   200: { value: '#fed7aa' },
@@ -86,7 +90,7 @@ const orange = {
   800: { value: '#9a3412' },
   900: { value: '#7c2d12' },
 };
-const red = {
+const red: ThemeModel = {
   50: { value: '#fef2f2' },
   100: { value: '#fee2e2' },
   200: { value: '#fecaca' },
diff --git a/front/src/theme/foundations/shadows.ts b/front/src/theme/foundations/shadows.ts
index 7d0da71..507be20 100644
--- a/front/src/theme/foundations/shadows.ts
+++ b/front/src/theme/foundations/shadows.ts
@@ -1,21 +1,23 @@
+import { SystemConfig } from '@chakra-ui/react';
 import { colors } from './colors';
 
-const createOutline = (colorScheme = 'gray') =>
-  `0 0 0 3px ${colorScheme}.500/3`;
+const createOutline = (colorScheme = 'gray') => {
+  return { value: `0 0 0 3px ${colorScheme}.500/3` };
+}
 
 export const shadows = {
   outline: createOutline('brand'),
-  'outline-brand': '0 0 0 1px brand.900',
-  'outline-gray': createOutline('gray'),
-  'outline-over': `4px 4px 5px #00000088`,
-  'outline-darkgray': `0 0 0 3px gray.500/8`,
-  'outline-success': createOutline('success'),
-  'outline-warning': createOutline('warning'),
-  'outline-error': createOutline('error'),
-  'outline-doing': createOutline('doing'),
-  'outline-paused': createOutline('paused'),
-  layout: '0 0 24px 1px rgba(0, 0, 0, 0.05)',
-  smooth: 'inset 0px 0px 16px rgba(0, 0, 0, 0.05)',
+  // 'outline-brand': '0 0 0 1px brand.900',
+  // 'outline-gray': createOutline('gray'),
+  // 'outline-over': `4px 4px 5px #00000088`,
+  // 'outline-darkgray': `0 0 0 3px gray.500/8`,
+  // 'outline-success': createOutline('success'),
+  // 'outline-warning': createOutline('warning'),
+  // 'outline-error': createOutline('error'),
+  // 'outline-doing': createOutline('doing'),
+  // 'outline-paused': createOutline('paused'),
+  //layout: '0 0 24px 1px rgba(0, 0, 0, 0.05)',
+  //smooth: 'inset 0px 0px 16px rgba(0, 0, 0, 0.05)',
   // smooth-light is used for dark backgrounds
-  'smooth-light': 'inset 0px 0px 16px rgba(255, 255, 255, 0.1)',
+  //'smooth-light': 'inset 0px 0px 16px rgba(255, 255, 255, 0.1)',
 };
diff --git a/front/src/theme/recipes/button.ts b/front/src/theme/recipes/button.ts
index d257249..3a9d045 100644
--- a/front/src/theme/recipes/button.ts
+++ b/front/src/theme/recipes/button.ts
@@ -33,8 +33,12 @@ export const customVariant = ({ bg, bgHover, bgActive, color, colorHover, boxSha
 };
 
 const buttonRecipe = defineRecipe({
+  base: {
+    borderRadius: 0,
+    background: "green",
+  },
   variants: {
-    theme: {
+    variant: {
       "@primary":
         customVariant({
           bg: { _light: 'brand.600', _dark: 'brand.300' },
@@ -106,4 +110,8 @@ const buttonRecipe = defineRecipe({
   },
 });
 
+
+console.log(`buttonRecipe: ${JSON.stringify(buttonRecipe, null, 2)}`);
+
+
 export default buttonRecipe;
diff --git a/front/src/theme/recipes/index.ts b/front/src/theme/recipes/index.ts
index 2e9794d..f921490 100644
--- a/front/src/theme/recipes/index.ts
+++ b/front/src/theme/recipes/index.ts
@@ -1,5 +1,5 @@
 export { default as Badge } from './badge';
-export { default as Button } from './button';
+export { default as button } from './button';
 export { default as Checkbox } from './checkbox';
 export { default as Input } from './input';
 //export { default as NumberInput } from './numberInput.ts_';
diff --git a/front/src/theme/styleguide/colors.stories.tsx b/front/src/theme/styleguide/colors.stories.tsx
index 59e2f5b..1c8b94f 100644
--- a/front/src/theme/styleguide/colors.stories.tsx
+++ b/front/src/theme/styleguide/colors.stories.tsx
@@ -19,7 +19,7 @@ const Color = ({ children, ...rest }: FlexProps) => (
 
 const Colors = ({ colorScheme = 'gray', ...rest }) => (
   <HStack
-    // spacing="0"
+    gap="0"
     overflow="hidden"
     boxShadow="lg"
     color={`${colorScheme}.700`}
diff --git a/front/src/theme/styles.ts b/front/src/theme/styles.ts
deleted file mode 100644
index 916c1e1..0000000
--- a/front/src/theme/styles.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { Styles } from '@chakra-ui/theme-tools';
-
-export const styles: Styles = {
-};
diff --git a/front/src/theme/theme.ts b/front/src/theme/theme.ts
index 00cfa92..8b1b9cf 100644
--- a/front/src/theme/theme.ts
+++ b/front/src/theme/theme.ts
@@ -1,6 +1,8 @@
 import * as recipes from './recipes';
 import { createSystem, defaultConfig, mergeConfigs, SystemConfig } from "@chakra-ui/react"
 import { colors } from "./foundations/colors"
+import { shadows } from './foundations/shadows';
+import buttonRecipe from './recipes/button';
 
 const baseTheme: SystemConfig = {
   globalCss: {
@@ -17,28 +19,127 @@ const baseTheme: SystemConfig = {
     }
   },
   theme: {
-    ...recipes,
+    //recipes: {...recipes},
+    recipes: {
+      button: buttonRecipe,
+      buttonqsdqsd: {
+        base: {
+          "display": "inline-flex",
+          "appearance": "none",
+          "alignItems": "center",
+          "justifyContent": "center",
+          "userSelect": "none",
+          "position": "relative",
+          "borderRadius": "l2",
+          "whiteSpace": "nowrap",
+          "verticalAlign": "middle",
+          "borderWidth": "1px",
+          "borderColor": "transparent",
+          "cursor": "button",
+          "flexShrink": "0",
+          "outline": "0",
+          "lineHeight": "1.2",
+          "isolation": "isolate",
+          "fontWeight": "medium",
+          "transitionProperty": "common",
+          "transitionDuration": "moderate",
+          "focusVisibleRing": "outside",
+          "_disabled": {
+            "layerStyle": "disabled"
+          },
+          "_icon": {
+            "flexShrink": "0"
+          }
+        },
+        "variants": {
+          "variant": {
+            "solid": {
+              //"bg": "colorPalette.solid",
+              "bg": "brand.500",
+              "color": "colorPalette.contrast",
+              "_hover": {
+                "bg": "colorPalette.solid/90"
+              },
+              "_expanded": {
+                "bg": "colorPalette.solid/90"
+              }
+            },
+            "QSDQDS": {
+
+            },
+            "@primary": {
+              bg: {
+                _light: "brand.600",
+                _dark: "brand.300"
+              },
+              color: {
+                _light: "white",
+                _dark: "brand.900"
+              },
+              border: "1px solid transparent",
+              _focus: {
+                border: "1px solid",
+                borderColor: "black"
+              },
+              "_hover": {
+                "bg": {
+                  "_light": "brand.700",
+                  "_dark": "brand.400"
+                },
+                "color": {
+                  "_light": "brand.800",
+                  "_dark": "brand.100"
+                },
+                "boxShadow": "outline-over",
+                "_disabled": {
+                  "bg": {
+                    "_light": "brand.600",
+                    "_dark": "brand.300"
+                  },
+                  "boxShadow": "none"
+                }
+              },
+              "_active": {
+                "bg": {
+                  "_light": "brand.600",
+                  "_dark": "brand.300"
+                }
+              }
+            },
+          }
+        },
+        "defaultVariants": {
+          //"size": "md",
+          //"variant": "solid"
+        }
+      },
+    },
     tokens: {
       fonts: {
         heading: { value: `Roboto, Helvetica, Arial, "sans-serif"` },
         body: { value: `Roboto, Helvetica, Arial, "sans-serif"` },
       },
       colors,
+      // spacing: {
+      //   vGutter: { value: '6.25rem' },
+      // },
+      shadows
     },
-    semanticTokens: {
-      colors: {
-        brand: {
-          solid: { value: "{colors.brand.500}" },
-          contrast: { value: "{colors.brand.100}" },
-          fg: { value: "{colors.brand.700}" },
-          muted: { value: "{colors.brand.100}" },
-          subtle: { value: "{colors.brand.200}" },
-          emphasized: { value: "{colors.brand.300}" },
-          focusRing: { value: "{colors.brand.500}" },
-        },
-      },
-    },
+    // semanticTokens: {
+    //   colors: {
+    //     brand: {
+    //       solid: { value: "{colors.brand.500}" },
+    //       contrast: { value: "{colors.brand.100}" },
+    //       fg: { value: "{colors.brand.700}" },
+    //       muted: { value: "{colors.brand.100}" },
+    //       subtle: { value: "{colors.brand.200}" },
+    //       emphasized: { value: "{colors.brand.300}" },
+    //       focusRing: { value: "{colors.brand.500}" },
+    //     },
+    //   },
+    // },
   },
 };
 const config = mergeConfigs(defaultConfig, baseTheme);
+//console.log("defaultConfig: " + JSON.stringify(defaultConfig, null, 2));
 export const systemTheme = createSystem(config);
\ No newline at end of file