{
  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',
        },
      },
    },
  },
};