---
name: Frontic default
description: The default brand of Frontic UI, as `add` leaves it in a new project.
components:
  focus-ring:
    borderColor: '{colors.ring}'
    outline: '{ring.focus}'
    outlineColor: '{colors.ring}'
  disabled:
    opacity: '{opacity.50}'
  invalid:
    borderColor: '{colors.destructive}'
    outline: '{ring.focus}'
    outlineColor: '{colors.destructive/20}'
  control:
    backgroundColor: transparent
    border: '{border.default}'
    borderColor: transparent
    borderBottomColor: '{colors.input}'
    rounded: '{rounded.none}'
    typography: '{typography.control}'
    placeholderColor: '{colors.muted-foreground}'
    focus:
      borderBottom: '{border.focus}'
    invalid:
      borderBottomColor: '{colors.destructive}'
  control-box:
    border: '{border.default}'
    borderColor: '{colors.input}'
    shadow: '{shadow.xs}'
    rounded: '{rounded.md}'
    typography: '{typography.small}'
  control-line:
    file:
      backgroundColor: transparent
      border: none
      textColor: '{colors.foreground}'
      typography: '{typography.ui}'
  choice:
    backgroundColor: transparent
    border: '{border.default}'
    borderColor: '{colors.input}'
  choice-box:
    rounded: '{rounded.none}'
    checked:
      backgroundColor: '{colors.primary}'
      textColor: '{colors.primary-foreground}'
      borderColor: '{colors.primary}'
  choice-dot:
    rounded: '{rounded.full}'
    checked:
      borderColor: '{colors.foreground}'
      iconColor: '{colors.foreground}'
  tag:
    backgroundColor: transparent
    border: '{border.default}'
    borderColor: '{colors.input}'
    rounded: '{rounded.none}'
    typography: '{typography.small}'
    hover:
      backgroundColor: '{colors.muted}'
  menu-item:
    rounded: '{rounded.none}'
    typography: '{typography.small}'
    focus:
      backgroundColor: '{colors.accent}'
      textColor: '{colors.accent-foreground}'
  menu-item-destructive:
    textColor: '{colors.destructive}'
    iconColor: '{colors.destructive}'
    focus:
      backgroundColor: '{colors.destructive/10}'
      textColor: '{colors.destructive}'
  menu-label:
    textColor: '{colors.muted-foreground}'
    typography: '{typography.caption}'
    fontWeight: semibold
    letterSpacing: wider
    textTransform: uppercase
  menu-shortcut:
    textColor: '{colors.muted-foreground}'
    typography: '{typography.caption}'
    fontWeight: normal
    letterSpacing: widest
  option-item:
    rounded: '{rounded.none}'
    typography: '{typography.small}'
    highlighted:
      backgroundColor: '{colors.accent}'
      textColor: '{colors.accent-foreground}'
  overlay:
    backgroundColor: '{colors.background}'
    textColor: '{colors.foreground}'
    outline: '{ring.hairline}'
    outlineColor: '{colors.foreground/20}'
    rounded: '{rounded.none}'
    shadow: '{shadow.md}'
  overlay-modal:
    backgroundColor: '{colors.background}'
    outline: '{ring.hairline}'
    outlineColor: '{colors.foreground/10}'
    rounded: '{rounded.none}'
    shadow: '{shadow.md}'
    typography: '{typography.small}'
  overlay-sheet:
    backgroundColor: '{colors.background}'
    shadow: '{shadow.md}'
    typography: '{typography.small}'
  overlay-backdrop:
    backgroundColor: '{colors.foreground/20}'
  panel:
    backgroundColor: '{colors.card}'
    textColor: '{colors.card-foreground}'
    outline: '{ring.hairline}'
    outlineColor: '{colors.foreground/5}'
    rounded: '{rounded.none}'
    shadow: '{shadow.sm}'
    typography: '{typography.small}'
  surface-inset:
    paddingY: '{spacing.6}'
    '@md':
      paddingY: '{spacing.8}'
  indent:
    paddingStart: '{spacing.0}'
    '@md':
      paddingStart: '{spacing.10}'
  part-title:
    typography: '{typography.lead}'
    fontWeight: semibold
    letterSpacing: wider
    textTransform: uppercase
  part-title-lg:
    typography: '{typography.lead}'
    fontWeight: semibold
    letterSpacing: wider
    textTransform: uppercase
  part-description:
    textColor: '{colors.muted-foreground}'
    typography: '{typography.description}'
  link-foreground:
    link:
      textDecorationLine: underline
      hover:
        textColor: '{colors.foreground}'
  link-primary:
    link:
      textDecorationLine: underline
      hover:
        textColor: '{colors.primary}'
  notice-info:
    borderColor: '{colors.info}'
    iconColor: '{colors.info}'
  notice-positive:
    borderColor: '{colors.positive}'
    iconColor: '{colors.positive}'
  notice-warning:
    borderColor: '{colors.warning}'
    iconColor: '{colors.warning}'
  notice-destructive:
    backgroundColor: '{colors.card}'
    textColor: '{colors.destructive}'
  label:
    typography: '{typography.caption}'
    fontWeight: semibold
    letterSpacing: wide
    textTransform: uppercase
  hint:
    textColor: '{colors.muted-foreground}'
    typography: '{typography.small}'
  error:
    textColor: '{colors.destructive}'
    typography: '{typography.small}'
  divider:
    backgroundColor: '{colors.border}'
  track:
    backgroundColor: '{colors.muted}'
    rounded: '{rounded.none}'
  track-fill:
    backgroundColor: '{colors.primary}'
  track-thumb:
    backgroundColor: '{colors.primary}'
    rounded: '{rounded.none}'
    hover:
      outline: '{ring.focus}'
      outlineColor: '{colors.ring}'
    focus:
      outline: '{ring.focus}'
      outlineColor: '{colors.ring}'
  calendar-day:
    hover:
      backgroundColor: '{colors.muted}'
      textColor: '{colors.foreground}'
    open:
      backgroundColor: '{colors.muted}'
      textColor: '{colors.foreground}'
  calendar-day-today:
    backgroundColor: '{colors.accent}'
    textColor: '{colors.accent-foreground}'
  calendar-day-outside:
    textColor: '{colors.muted-foreground}'
  calendar-day-fill:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.primary-foreground}'
    hover:
      backgroundColor: '{colors.primary}'
      textColor: '{colors.primary-foreground}'
    focus:
      backgroundColor: '{colors.primary}'
      textColor: '{colors.primary-foreground}'
  calendar-nav-button:
    backgroundColor: transparent
    borderColor: '{colors.border}'
    opacity: '{opacity.50}'
    hover:
      backgroundColor: '{colors.muted}'
      textColor: '{colors.foreground}'
      opacity: '{opacity.100}'
    open:
      backgroundColor: '{colors.muted}'
      textColor: '{colors.foreground}'
  calendar-weekday:
    textColor: '{colors.muted-foreground}'
    typography: '{typography.caption}'
    fontWeight: normal
  calendar-month:
    typography: '{typography.ui}'
  heading:
    typography: '{typography.heading}'
  title:
    typography: '{typography.title}'
  logo:
    typography: '{typography.title}'
    fontWeight: bold
    letterSpacing: tight
  meta:
    textColor: '{colors.muted-foreground}'
    typography: '{typography.caption}'
    fontWeight: normal
  link:
    textColor: '{colors.muted-foreground}'
    typography: '{typography.small}'
    hover:
      textColor: '{colors.foreground}'
  total:
    typography: '{typography.body}'
    fontWeight: semibold
  note-positive:
    textColor: '{colors.positive}'
  nav-trigger:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    hover:
      backgroundColor: '{colors.accent}'
      textColor: '{colors.accent-foreground}'
    open:
      backgroundColor: '{colors.accent/50}'
  dismiss:
    rounded: '{rounded.full}'
    hover:
      backgroundColor: '{colors.muted-foreground/20}'
  copy-muted:
    textColor: '{colors.muted-foreground}'
    typography: '{typography.copy}'
  line-title:
    typography: '{typography.ui}'
    lineHeight: tight
  thumbnail:
    border: '{border.default}'
    borderColor: '{colors.border}'
    rounded: '{rounded.md}'
  page-title:
    typography: '{typography.page-title}'
  quiet-action:
    textColor: '{colors.muted-foreground}'
  clear-link:
    textColor: '{colors.muted-foreground}'
    typography: '{typography.caption}'
    fontWeight: normal
    hover:
      textColor: '{colors.foreground}'
      textDecorationLine: underline
  section-title:
    typography: '{typography.ui}'
    fontWeight: semibold
  action:
    border: '{border.default}'
    borderColor: transparent
    rounded: '{rounded.none}'
    typography: '{typography.caption}'
    fontWeight: semibold
    textTransform: uppercase
    letterSpacing: widest
    pressed:
      translate: 0 {spacing.px}
  button:
    base:
      extends: action
      display: inline-flex
      flexShrink: '0'
      alignItems: center
      justifyContent: center
    variants:
      variant:
        solid:
          with:
            color:
              primary:
                backgroundColor: '{colors.primary}'
                textColor: '{colors.primary-foreground}'
                hover:
                  backgroundColor: '{colors.primary-hover}'
              neutral:
                backgroundColor: '{colors.foreground}'
                textColor: '{colors.background}'
                hover:
                  backgroundColor: '{colors.foreground-hover}'
              destructive:
                backgroundColor: '{colors.destructive}'
                textColor: '{colors.destructive-foreground}'
                hover:
                  backgroundColor: '{colors.destructive-hover}'
              buy:
                backgroundColor: '{colors.buy}'
                textColor: '{colors.buy-foreground}'
                hover:
                  backgroundColor: '{colors.buy-hover}'
              checkout:
                backgroundColor: '{colors.checkout}'
                textColor: '{colors.checkout-foreground}'
                hover:
                  backgroundColor: '{colors.checkout-hover}'
              inverse:
                backgroundColor: '{colors.background}'
                textColor: '{colors.foreground}'
                hover:
                  backgroundColor: '{colors.muted}'
        outline:
          backgroundColor: transparent
          with:
            color:
              primary:
                borderColor: '{colors.primary}'
                textColor: '{colors.primary}'
                hover:
                  backgroundColor: '{colors.primary/10}'
                open:
                  backgroundColor: '{colors.primary/10}'
              neutral:
                borderColor: '{colors.border}'
                hover:
                  backgroundColor: '{colors.muted}'
                  textColor: '{colors.foreground}'
                open:
                  backgroundColor: '{colors.muted}'
                  textColor: '{colors.foreground}'
              destructive:
                borderColor: '{colors.destructive}'
                textColor: '{colors.destructive}'
                hover:
                  backgroundColor: '{colors.destructive/10}'
                open:
                  backgroundColor: '{colors.destructive/10}'
              buy:
                borderColor: '{colors.buy}'
                textColor: '{colors.buy}'
                hover:
                  backgroundColor: '{colors.buy/10}'
                open:
                  backgroundColor: '{colors.buy/10}'
              checkout:
                borderColor: '{colors.checkout}'
                textColor: '{colors.checkout}'
                hover:
                  backgroundColor: '{colors.checkout/10}'
                open:
                  backgroundColor: '{colors.checkout/10}'
              inverse:
                borderColor: '{colors.background}'
                textColor: '{colors.background}'
                hover:
                  backgroundColor: '{colors.background/10}'
                open:
                  backgroundColor: '{colors.background/10}'
        soft:
          with:
            color:
              primary:
                backgroundColor: '{colors.primary/10}'
                textColor: '{colors.primary}'
                hover:
                  backgroundColor: '{colors.primary}'
                  textColor: '{colors.primary-foreground}'
              neutral:
                backgroundColor: '{colors.secondary}'
                textColor: '{colors.secondary-foreground}'
                hover:
                  backgroundColor: '{colors.border}'
                open:
                  backgroundColor: '{colors.secondary}'
                  textColor: '{colors.secondary-foreground}'
              destructive:
                backgroundColor: '{colors.destructive/10}'
                textColor: '{colors.destructive}'
                hover:
                  backgroundColor: '{colors.destructive}'
                  textColor: '{colors.destructive-foreground}'
              buy:
                backgroundColor: '{colors.buy/10}'
                textColor: '{colors.buy}'
                hover:
                  backgroundColor: '{colors.buy}'
                  textColor: '{colors.buy-foreground}'
              checkout:
                backgroundColor: '{colors.checkout/10}'
                textColor: '{colors.checkout}'
                hover:
                  backgroundColor: '{colors.checkout}'
                  textColor: '{colors.checkout-foreground}'
              inverse:
                backgroundColor: '{colors.background/10}'
                textColor: '{colors.background}'
                hover:
                  backgroundColor: '{colors.background}'
                  textColor: '{colors.foreground}'
        ghost:
          with:
            color:
              primary:
                textColor: '{colors.primary}'
                hover:
                  backgroundColor: '{colors.primary/10}'
                open:
                  backgroundColor: '{colors.primary/10}'
              neutral:
                hover:
                  backgroundColor: '{colors.muted}'
                  textColor: '{colors.foreground}'
                open:
                  backgroundColor: '{colors.muted}'
                  textColor: '{colors.foreground}'
              destructive:
                textColor: '{colors.destructive}'
                hover:
                  backgroundColor: '{colors.destructive/10}'
                open:
                  backgroundColor: '{colors.destructive/10}'
              buy:
                textColor: '{colors.buy}'
                hover:
                  backgroundColor: '{colors.buy/10}'
                open:
                  backgroundColor: '{colors.buy/10}'
              checkout:
                textColor: '{colors.checkout}'
                hover:
                  backgroundColor: '{colors.checkout/10}'
                open:
                  backgroundColor: '{colors.checkout/10}'
              inverse:
                textColor: '{colors.background}'
                hover:
                  backgroundColor: '{colors.background/10}'
                open:
                  backgroundColor: '{colors.background/10}'
        link:
          textDecorationLine: underline
          with:
            color:
              primary:
                textColor: '{colors.primary}'
              destructive:
                textColor: '{colors.destructive}'
              buy:
                textColor: '{colors.buy}'
              checkout:
                textColor: '{colors.checkout}'
              inverse:
                textColor: '{colors.background}'
      color:
        primary: {}
        neutral: {}
        destructive:
          ringColor: '{colors.destructive}'
          ringBorderColor: '{colors.destructive/40}'
        buy: {}
        checkout: {}
        inverse:
          ground: '{colors.foreground}'
      size:
        xs:
          height: '{spacing.7}'
          paddingX: '{spacing.3}'
          gap: '{spacing.1}'
          icon:
            size: '{spacing.3}'
          iconStart:
            paddingStart: '{spacing.2}'
          iconEnd:
            paddingEnd: '{spacing.2}'
        sm:
          height: '{spacing.9}'
          paddingX: '{spacing.4}'
          gap: '{spacing.1}'
          icon:
            size: '{spacing.3.5}'
          iconStart:
            paddingStart: '{spacing.3}'
          iconEnd:
            paddingEnd: '{spacing.3}'
        md:
          height: '{spacing.10}'
          paddingX: '{spacing.6}'
          gap: '{spacing.1.5}'
          icon:
            size: '{spacing.3.5}'
          iconStart:
            paddingStart: '{spacing.4}'
          iconEnd:
            paddingEnd: '{spacing.4}'
        lg:
          height: '{spacing.11}'
          paddingX: '{spacing.8}'
          gap: '{spacing.1.5}'
          icon:
            size: '{spacing.3.5}'
          iconStart:
            paddingStart: '{spacing.5}'
          iconEnd:
            paddingEnd: '{spacing.5}'
        icon-xs:
          size: '{spacing.7}'
          icon:
            size: '{spacing.3}'
        icon-sm:
          size: '{spacing.9}'
          icon:
            size: '{spacing.3.5}'
        icon-md:
          size: '{spacing.10}'
          icon:
            size: '{spacing.3.5}'
        icon-lg:
          size: '{spacing.11}'
          icon:
            size: '{spacing.3.5}'
    defaults:
      variant: solid
      color: primary
      size: md
  badge:
    base:
      rounded: '{rounded.none}'
      textColor: '{colors.foreground}'
      typography: '{typography.micro}'
      fontWeight: semibold
      letterSpacing: widest
      textTransform: uppercase
      gap: '{spacing.1.5}'
      display: inline-flex
      width: fit
      flexShrink: '0'
      alignItems: center
      justifyContent: center
      icon:
        size: '{spacing.3}'
      focus:
        borderColor: '{colors.ring}'
        outline: '{ring.wide}'
        outlineColor: '{colors.ring}'
    variants:
      variant:
        neutral:
          textColor: '{colors.foreground}'
          hover:
            textColor: '{colors.foreground/70}'
          with:
            size:
              sm:
                padding: '{spacing.0}'
              md:
                padding: '{spacing.0}'
              lg:
                padding: '{spacing.0}'
        primary:
          backgroundColor: '{colors.primary}'
          textColor: '{colors.primary-foreground}'
        info:
          backgroundColor: '{colors.info}'
          textColor: '{colors.info-foreground}'
        success:
          backgroundColor: '{colors.positive}'
          textColor: '{colors.positive-foreground}'
        warning:
          backgroundColor: '{colors.warning}'
          textColor: '{colors.warning-foreground}'
        error:
          backgroundColor: '{colors.destructive}'
          textColor: '{colors.destructive-foreground}'
          focus:
            outlineColor: '{colors.destructive}'
        promo:
          backgroundColor: '{colors.promo}'
          textColor: '{colors.promo-foreground}'
        discount:
          backgroundColor: '{colors.discount}'
          textColor: '{colors.discount-foreground}'
        new:
          backgroundColor: '{colors.new}'
          textColor: '{colors.new-foreground}'
        price:
          backgroundColor: '{colors.price}'
          textColor: '{colors.price-foreground}'
      size:
        sm:
          paddingX: '{spacing.2}'
          paddingY: '{spacing.0.5}'
        md:
          paddingX: '{spacing.2.5}'
          paddingY: '{spacing.1}'
          typography: '{typography.caption}'
          fontWeight: semibold
          letterSpacing: widest
        lg:
          paddingX: '{spacing.3}'
          paddingY: '{spacing.1.5}'
          typography: '{typography.caption}'
          fontWeight: semibold
          letterSpacing: widest
    defaults:
      variant: neutral
      size: md
  input:
    base:
      extends:
        - control
        - control-line
      height: '{spacing.10}'
      paddingX: '{spacing.0}'
      paddingY: '{spacing.1}'
      width: full
      minWidth: '{spacing.0}'
      file:
        display: inline-flex
    variants:
      size:
        md: {}
        sm:
          height: '{spacing.9}'
    defaults:
      size: md
  textarea:
    base:
      extends: control
      minHeight: '{spacing.16}'
      paddingX: '{spacing.0}'
      paddingY: '{spacing.3}'
      display: flex
      width: full
    variants: {}
    defaults: {}
  label-root:
    base:
      extends: label
      gap: '{spacing.2}'
      display: flex
      alignItems: center
    variants: {}
    defaults: {}
  kbd:
    base:
      backgroundColor: '{colors.muted}'
      textColor: '{colors.muted-foreground}'
      rounded: '{rounded.none}'
      typography: '{typography.caption}'
      height: '{spacing.5.5}'
      minWidth: '{spacing.5.5}'
      paddingX: '{spacing.1.5}'
      gap: '{spacing.1}'
      display: inline-flex
      width: fit
      alignItems: center
      justifyContent: center
      icon:
        size: '{spacing.3}'
    variants: {}
    defaults: {}
  kbd-group:
    base:
      display: inline-flex
      alignItems: center
      gap: '{spacing.1}'
    variants: {}
    defaults: {}
  checkbox:
    base:
      extends:
        - choice
        - choice-box
      size: '{spacing.4.5}'
      display: flex
      flexShrink: '0'
      alignItems: center
      justifyContent: center
      icon:
        size: '{spacing.3.5}'
    variants: {}
    defaults: {}
  radio-group:
    base:
      gap: '{spacing.3}'
      display: grid
      width: full
    variants: {}
    defaults: {}
  radio-group-item:
    base:
      extends:
        - choice
        - choice-dot
      size: '{spacing.4.5}'
      display: flex
      flexShrink: '0'
      icon:
        size: '{spacing.2}'
    variants: {}
    defaults: {}
  radio-accordion:
    base:
      display: flex
      width: full
      flexDirection: column
    variants:
      variant:
        plain: {}
        outline:
          gap: '{spacing.3}'
    defaults:
      variant: plain
  radio-accordion-item:
    base:
      gap: '{spacing.0}'
      display: flex
      width: full
      flexDirection: column
    variants:
      variant:
        plain:
          borderBottom: '{border.default}'
        outline:
          border: '{border.default}'
          borderColor: '{colors.border}'
          rounded: '{rounded.md}'
          paddingX: '{spacing.4}'
          checked:
            borderColor: '{colors.active}'
    defaults:
      variant: plain
  radio-accordion-trigger:
    base:
      typography: '{typography.ui}'
      fontWeight: semibold
      gap: '{spacing.4}'
      paddingY: '{spacing.4}'
      display: flex
      width: full
      alignItems: center
      textAlign: start
    variants: {}
    defaults: {}
  radio-accordion-content:
    base:
      extends: indent
      typography: '{typography.small}'
      paddingBottom: '{spacing.4}'
    variants: {}
    defaults: {}
  radio-accordion-indicator:
    base:
      extends:
        - choice
        - choice-dot
      size: '{spacing.6}'
      display: flex
      flexShrink: '0'
      alignItems: center
      justifyContent: center
      icon:
        size: '{spacing.3.5}'
    variants: {}
    defaults: {}
  switch:
    base:
      backgroundColor: '{colors.input}'
      border: '{border.default}'
      borderColor: '{colors.input/50}'
      rounded: '{rounded.none}'
      display: inline-flex
      flexShrink: '0'
      alignItems: center
      checked:
        backgroundColor: '{colors.primary}'
        borderColor: '{colors.primary}'
    variants:
      size:
        md:
          height: '{spacing.4.5}'
          width: '{spacing.8.25}'
        sm:
          height: '{spacing.3.5}'
          width: '{spacing.6.25}'
    defaults:
      size: md
  switch-thumb:
    base:
      backgroundColor: '{colors.background}'
      rounded: '{rounded.none}'
      marginStart: '{spacing.0.5}'
      translate: -{spacing.px}
      checked:
        translate: full
    variants:
      size:
        md:
          size: '{spacing.3.5}'
        sm:
          size: '{spacing.2.5}'
    defaults:
      size: md
  slider-control:
    base:
      display: flex
      width: full
      alignItems: center
    variants: {}
    defaults: {}
  slider-track:
    base:
      extends: track
      backgroundColor: '{colors.input/50}'
      size: '{spacing.0.5}'
    variants: {}
    defaults: {}
  slider-thumb:
    base:
      extends: track-thumb
      size: '{spacing.3}'
    variants: {}
    defaults: {}
  slider-legend:
    base:
      marginTop: '{spacing.2}'
      textColor: '{colors.muted-foreground}'
      typography: '{typography.caption}'
      letterSpacing: wide
    variants: {}
    defaults: {}
  slider-range:
    base:
      extends: track-fill
    variants: {}
    defaults: {}
  toggle:
    base:
      rounded: '{rounded.none}'
      typography: '{typography.caption}'
      fontWeight: semibold
      textTransform: uppercase
      letterSpacing: widest
      gap: '{spacing.1.5}'
      icon:
        size: '{spacing.3.5}'
      border: '{border.default}'
      borderColor: transparent
      display: inline-flex
      alignItems: center
      justifyContent: center
      hover:
        borderColor: '{colors.input}'
      checked:
        backgroundColor: '{colors.muted}'
        borderColor: '{colors.foreground}'
      invalid:
        borderColor: '{colors.destructive}'
        outlineColor: '{colors.destructive/20}'
    variants:
      variant:
        default:
          backgroundColor: transparent
        outline:
          backgroundColor: transparent
          border: '{border.default}'
          borderColor: '{colors.input}'
          hover:
            borderColor: '{colors.muted-foreground}'
          checked:
            borderColor: '{colors.foreground}'
      size:
        md:
          height: '{spacing.10}'
          minWidth: '{spacing.10}'
          paddingX: '{spacing.6}'
          iconStart:
            paddingStart: '{spacing.4}'
          iconEnd:
            paddingEnd: '{spacing.4}'
        sm:
          height: '{spacing.9}'
          minWidth: '{spacing.9}'
          paddingX: '{spacing.4}'
          iconStart:
            paddingStart: '{spacing.3}'
          iconEnd:
            paddingEnd: '{spacing.3}'
        lg:
          height: '{spacing.11}'
          minWidth: '{spacing.11}'
          paddingX: '{spacing.8}'
          iconStart:
            paddingStart: '{spacing.5}'
          iconEnd:
            paddingEnd: '{spacing.5}'
        icon-sm:
          size: '{spacing.9}'
        icon-md:
          size: '{spacing.10}'
        icon-lg:
          size: '{spacing.11}'
    defaults:
      variant: default
      size: md
  toggle-group:
    base:
      display: flex
      width: fit
      flexDirection: row
      alignItems: center
    variants:
      spacing:
        none:
          gap: '{spacing.0}'
        xs:
          gap: '{spacing.1}'
        sm:
          gap: '{spacing.2}'
        md:
          gap: '{spacing.3}'
        lg:
          gap: '{spacing.4}'
    defaults:
      spacing: none
  toggle-group-item:
    base:
      flexShrink: '0'
    variants: {}
    defaults: {}
  button-group-text:
    base:
      backgroundColor: transparent
      border: '{border.default}'
      borderColor: transparent
      borderBottomColor: '{colors.input}'
      typography: '{typography.caption}'
      fontWeight: semibold
      textTransform: uppercase
      gap: '{spacing.2}'
      paddingX: '{spacing.2.5}'
      display: flex
      alignItems: center
      icon:
        size: '{spacing.3.5}'
    variants: {}
    defaults: {}
  button-group-separator:
    base:
      backgroundColor: '{colors.input}'
      size: '{spacing.px}'
      flexShrink: '0'
      alignSelf: stretch
    variants:
      orientation:
        vertical:
          marginY: '{spacing.px}'
          height: auto
        horizontal:
          marginX: '{spacing.px}'
          width: auto
    defaults:
      orientation: vertical
  button-group:
    base:
      display: flex
      width: fit
      alignItems: stretch
    variants: {}
    defaults: {}
  field-label:
    base:
      extends: label
      gap: '{spacing.2}'
      lineHeight: snug
      display: flex
      width: fit
      invalid:
        textColor: '{colors.destructive}'
    variants:
      layout:
        default: {}
        card:
          width: full
          flexDirection: column
          border: '{border.default}'
          rounded: '{rounded.none}'
          checkedWithin:
            backgroundColor: '{colors.primary/5}'
            borderColor: '{colors.primary/30}'
        beside:
          typography: '{typography.small}'
          fontWeight: normal
          textTransform: none
          letterSpacing: normal
    defaults:
      layout: default
  field-description:
    base:
      extends:
        - hint
        - link-primary
      lineHeight: normal
      textAlign: start
      textTransform: none
      letterSpacing: normal
    variants: {}
    defaults: {}
  field-error:
    base:
      extends: error
    variants: {}
    defaults: {}
  field-legend:
    base:
      marginBottom: '{spacing.3}'
    variants:
      variant:
        legend:
          typography: '{typography.body}'
          fontWeight: medium
        label:
          typography: '{typography.caption}'
          fontWeight: semibold
          textTransform: uppercase
    defaults:
      variant: legend
  field-separator:
    base:
      bleedY: '{spacing.2}'
      typography: '{typography.small}'
      height: '{spacing.5}'
    variants: {}
    defaults: {}
  field-separator-content:
    base:
      backgroundColor: '{colors.background}'
      textColor: '{colors.muted-foreground}'
      paddingX: '{spacing.2}'
    variants: {}
    defaults: {}
  field:
    base:
      display: flex
      width: full
      gap: '{spacing.3}'
    variants: {}
    defaults: {}
  field-content:
    base:
      display: flex
      flex: '1'
      flexDirection: column
      gap: '{spacing.1}'
    variants: {}
    defaults: {}
  field-group:
    base:
      display: flex
      width: full
      flexDirection: column
      gap: '{spacing.10}'
    variants:
      kind:
        fields: {}
        checkboxes:
          gap: '{spacing.3}'
    defaults:
      kind: fields
  field-set:
    base:
      display: flex
      flexDirection: column
      gap: '{spacing.6}'
    variants: {}
    defaults: {}
  form:
    base:
      gap: '{spacing.6}'
      display: flex
      width: full
      flexDirection: column
    variants: {}
    defaults: {}
  native-select:
    base:
      extends:
        - control
        - control-line
      typography: '{typography.small}'
      paddingY: '{spacing.2}'
      paddingStart: '{spacing.0}'
      paddingEnd: '{spacing.8}'
      placeholderShown:
        textColor: '{colors.muted-foreground}'
    variants:
      size:
        md:
          height: '{spacing.10}'
        sm:
          height: '{spacing.9}'
    defaults:
      size: md
  native-select-option:
    base:
      textColor: '{colors.foreground}'
    variants: {}
    defaults: {}
  native-select-chevron:
    base:
      textColor: '{colors.muted-foreground}'
      size: '{spacing.3.5}'
    variants: {}
    defaults: {}
  native-select-root:
    base:
      width: fit
    variants: {}
    defaults: {}
  select-trigger:
    base:
      extends:
        - control
        - control-line
      typography: '{typography.small}'
      gap: '{spacing.1.5}'
      paddingX: '{spacing.0}'
      paddingY: '{spacing.2}'
      display: flex
      width: fit
      alignItems: center
      justifyContent: between
      icon:
        size: '{spacing.3.5}'
    variants:
      size:
        md:
          height: '{spacing.10}'
        sm:
          height: '{spacing.9}'
    defaults:
      size: md
  select-value:
    base:
      alignItems: center
      gap: '{spacing.1.5}'
    variants: {}
    defaults: {}
  select-value-placeholder:
    base:
      textColor: '{colors.muted-foreground}'
    variants: {}
    defaults: {}
  select-chevron:
    base:
      textColor: '{colors.muted-foreground}'
      size: '{spacing.3.5}'
    variants: {}
    defaults: {}
  select-content:
    base:
      extends: overlay
      minWidth: '{spacing.36}'
    variants:
      position:
        popper:
          width: trigger
        item-aligned: {}
    defaults:
      position: popper
  select-item:
    base:
      extends: option-item
      gap: '{spacing.2.5}'
      paddingY: '{spacing.2}'
      paddingStart: '{spacing.3}'
      paddingEnd: '{spacing.8}'
      display: flex
      width: full
      alignItems: center
      icon:
        size: '{spacing.3.5}'
    variants: {}
    defaults: {}
  select-item-indicator:
    base:
      size: '{spacing.4}'
    variants: {}
    defaults: {}
  select-label:
    base:
      extends: menu-label
      paddingX: '{spacing.3}'
      paddingY: '{spacing.2}'
    variants: {}
    defaults: {}
  select-separator:
    base:
      bleedX: '{spacing.1.5}'
      marginY: '{spacing.1.5}'
      extends: divider
      backgroundColor: '{colors.border/50}'
      height: '{spacing.px}'
    variants: {}
    defaults: {}
  select-scroll-button:
    base:
      backgroundColor: '{colors.background}'
      paddingY: '{spacing.1}'
      display: flex
      alignItems: center
      justifyContent: center
      icon:
        size: '{spacing.3.5}'
    variants: {}
    defaults: {}
  select-group:
    base:
      padding: '{spacing.1.5}'
    variants: {}
    defaults: {}
  combobox-search:
    base:
      marginX: '{spacing.1.5}'
      marginTop: '{spacing.1.5}'
      typography: '{typography.small}'
      height: '{spacing.8}'
      paddingX: '{spacing.2.5}'
      gap: '{spacing.2}'
      icon:
        size: '{spacing.3.5}'
    variants: {}
    defaults: {}
  combobox-trigger:
    base:
      extends:
        - control
        - control-line
      typography: '{typography.small}'
      gap: '{spacing.1.5}'
      paddingX: '{spacing.0}'
      paddingY: '{spacing.2}'
      height: '{spacing.10}'
      display: flex
      width: fit
      alignItems: center
      justifyContent: between
      icon:
        size: '{spacing.3.5}'
    variants: {}
    defaults: {}
  combobox-chevron:
    base:
      textColor: '{colors.muted-foreground}'
      size: '{spacing.3.5}'
    variants: {}
    defaults: {}
  combobox-viewport:
    base:
      scrollbar: none
      minHeight: '{spacing.0}'
      padding: '{spacing.1.5}'
    variants: {}
    defaults: {}
  combobox-content:
    base:
      extends: overlay
      minWidth: '{spacing.36}'
      display: flex
      flexDirection: column
      width: trigger
    variants: {}
    defaults: {}
  combobox-item:
    base:
      extends: option-item
      gap: '{spacing.2.5}'
      paddingY: '{spacing.2}'
      paddingStart: '{spacing.3}'
      paddingEnd: '{spacing.8}'
      display: flex
      width: full
      alignItems: center
      icon:
        size: '{spacing.3.5}'
    variants: {}
    defaults: {}
  combobox-item-indicator:
    base:
      size: '{spacing.4}'
      display: flex
      alignItems: center
      justifyContent: center
    variants: {}
    defaults: {}
  combobox-label:
    base:
      extends: menu-label
      paddingX: '{spacing.3}'
      paddingY: '{spacing.2}'
    variants: {}
    defaults: {}
  combobox-empty:
    base:
      typography: '{typography.small}'
      textColor: '{colors.muted-foreground}'
      paddingY: '{spacing.2}'
      textAlign: center
    variants: {}
    defaults: {}
  combobox-separator:
    base:
      bleedX: '{spacing.1.5}'
      marginY: '{spacing.1.5}'
      extends: divider
      backgroundColor: '{colors.border/50}'
      height: '{spacing.px}'
    variants: {}
    defaults: {}
  combobox-anchor:
    base:
      display: inline-flex
      width: fit
    variants: {}
    defaults: {}
  combobox-input:
    base:
      flex: '1'
    variants: {}
    defaults: {}
  autocomplete-input:
    base:
      extends:
        - control
        - control-line
      height: '{spacing.10}'
      paddingX: '{spacing.0}'
      paddingY: '{spacing.1}'
      width: full
      minWidth: '{spacing.0}'
      flex: '1'
    variants: {}
    defaults: {}
  autocomplete-viewport:
    base:
      scrollbar: none
      minHeight: '{spacing.0}'
      padding: '{spacing.1.5}'
    variants: {}
    defaults: {}
  autocomplete-content:
    base:
      extends: overlay
      minWidth: '{spacing.36}'
      display: flex
      flexDirection: column
      width: trigger
    variants: {}
    defaults: {}
  autocomplete-item:
    base:
      extends: option-item
      gap: '{spacing.2.5}'
      paddingY: '{spacing.2}'
      paddingStart: '{spacing.3}'
      paddingEnd: '{spacing.3}'
      display: flex
      width: full
      alignItems: center
      icon:
        size: '{spacing.3.5}'
    variants: {}
    defaults: {}
  autocomplete-label:
    base:
      extends: menu-label
      paddingX: '{spacing.3}'
      paddingY: '{spacing.2}'
    variants: {}
    defaults: {}
  autocomplete-empty:
    base:
      typography: '{typography.small}'
      textColor: '{colors.muted-foreground}'
      paddingY: '{spacing.2}'
      textAlign: center
    variants: {}
    defaults: {}
  autocomplete-separator:
    base:
      bleedX: '{spacing.1.5}'
      marginY: '{spacing.1.5}'
      extends: divider
      backgroundColor: '{colors.border/50}'
      height: '{spacing.px}'
    variants: {}
    defaults: {}
  number-field-input:
    base:
      extends:
        - control
        - control-line
      height: '{spacing.10}'
      paddingX: '{spacing.10}'
      paddingY: '{spacing.1}'
      width: full
      minWidth: '{spacing.0}'
      textAlign: center
    variants: {}
    defaults: {}
  number-field-step:
    base:
      padding: '{spacing.3}'
      display: inline-flex
      alignItems: center
      justifyContent: center
      icon:
        size: '{spacing.4}'
    variants: {}
    defaults: {}
  number-field:
    base:
      display: grid
      gap: '{spacing.1.5}'
    variants: {}
    defaults: {}
  number-field-content:
    base:
      minWidth: '{spacing.28}'
    variants: {}
    defaults: {}
  input-otp:
    base:
      display: flex
      alignItems: center
      gap: '{spacing.2}'
    variants: {}
    defaults: {}
  input-otp-slot:
    base:
      extends:
        - control
        - control-line
      size: '{spacing.10}'
      typography: '{typography.small}'
      display: flex
      alignItems: center
      justifyContent: center
      focus:
        borderBottom: '{border.default}'
        borderBottomColor: '{colors.input}'
      current:
        borderBottom: '{border.focus}'
    variants: {}
    defaults: {}
  input-otp-caret:
    base:
      backgroundColor: '{colors.foreground}'
      height: '{spacing.4}'
      width: '{spacing.px}'
    variants: {}
    defaults: {}
  input-otp-group:
    base:
      display: flex
      alignItems: center
      gap: '{spacing.1}'
    variants: {}
    defaults: {}
  input-otp-separator:
    base:
      display: flex
      alignItems: center
      icon:
        size: '{spacing.3.5}'
    variants: {}
    defaults: {}
  tags-input:
    base:
      extends:
        - control
        - control-line
      gap: '{spacing.2}'
      minHeight: '{spacing.10}'
      paddingX: '{spacing.0}'
      paddingY: '{spacing.1}'
      display: flex
      flexWrap: wrap
      alignItems: center
      focusWithin:
        borderBottom: '{border.focus}'
    variants: {}
    defaults: {}
  tags-input-input:
    base:
      typography: '{typography.control}'
      placeholderColor: '{colors.muted-foreground}'
      minHeight: '{spacing.5}'
      paddingX: '{spacing.0}'
      flex: '1'
    variants: {}
    defaults: {}
  tags-input-item:
    base:
      backgroundColor: '{colors.secondary}'
      rounded: '{rounded.none}'
      height: '{spacing.5}'
      display: flex
      alignItems: center
      selected:
        outline: '{ring.outset}'
        outlineColor: '{colors.ring}'
    variants: {}
    defaults: {}
  tags-input-item-text:
    base:
      typography: '{typography.small}'
      rounded: '{rounded.none}'
      paddingX: '{spacing.2}'
      paddingY: '{spacing.0.5}'
    variants: {}
    defaults: {}
  tags-input-item-delete:
    base:
      marginEnd: '{spacing.1}'
      rounded: '{rounded.none}'
      display: flex
      icon:
        size: '{spacing.2.5}'
    variants: {}
    defaults: {}
  tag-group:
    base:
      gap: '{spacing.2}'
      display: flex
      flexWrap: wrap
      alignItems: center
    variants: {}
    defaults: {}
  tag-group-item:
    base:
      extends: tag
      height: '{spacing.8}'
      paddingX: '{spacing.3}'
      gap: '{spacing.1.5}'
      display: inline-flex
      flexShrink: '0'
      alignItems: center
      checked:
        backgroundColor: '{colors.primary}'
        textColor: '{colors.primary-foreground}'
        borderColor: '{colors.primary}'
    variants: {}
    defaults: {}
  tag-group-item-delete:
    base:
      bleedEnd: '{spacing.1}'
      opacity: '{opacity.60}'
      size: '{spacing.5}'
      display: flex
      flexShrink: '0'
      alignItems: center
      justifyContent: center
      hover:
        opacity: '{opacity.100}'
    variants: {}
    defaults: {}
  search-input:
    base:
      extends: control-box
      backgroundColor: '{colors.background}'
      height: '{spacing.10}'
      paddingX: '{spacing.3}'
      gap: '{spacing.2}'
      display: flex
      minWidth: '{spacing.0}'
      flex: '1'
      alignItems: center
      icon:
        size: '{spacing.4}'
      focusWithin:
        borderColor: '{colors.ring}'
        outline: '{ring.wide}'
        outlineColor: '{colors.ring}'
    variants: {}
    defaults: {}
  search-input-clear:
    base:
      opacity: '{opacity.60}'
      size: '{spacing.5}'
      hover:
        opacity: '{opacity.100}'
    variants: {}
    defaults: {}
  search-cancel:
    base:
      typography: '{typography.small}'
    variants: {}
    defaults: {}
  search-results:
    base:
      display: flex
      flexDirection: column
    variants:
      position:
        popper:
          extends: overlay
        inline: {}
    defaults:
      position: popper
  search-results-viewport:
    base:
      scrollbar: none
      paddingY: '{spacing.1.5}'
    variants: {}
    defaults: {}
  search-group:
    base:
      paddingY: '{spacing.1}'
      display: flex
      flexDirection: column
    variants: {}
    defaults: {}
  search-group-heading:
    base:
      extends: menu-label
      paddingX: '{spacing.3}'
      paddingY: '{spacing.2}'
    variants: {}
    defaults: {}
  search-item:
    base:
      extends: option-item
      gap: '{spacing.3}'
      paddingX: '{spacing.3}'
      paddingY: '{spacing.2}'
      display: flex
      alignItems: center
      icon:
        size: '{spacing.4}'
    variants: {}
    defaults: {}
  search-tag:
    base:
      extends: tag
      height: '{spacing.8}'
      paddingX: '{spacing.3}'
      display: inline-flex
      flexShrink: '0'
      alignItems: center
      highlighted:
        backgroundColor: '{colors.muted}'
        borderColor: '{colors.foreground}'
    variants: {}
    defaults: {}
  search-query:
    base:
      extends: option-item
      gap: '{spacing.2}'
      paddingX: '{spacing.3}'
      paddingY: '{spacing.2.5}'
      display: flex
      alignItems: center
      icon:
        size: '{spacing.4}'
    variants: {}
    defaults: {}
  search-query-term:
    base:
      fontWeight: semibold
    variants: {}
    defaults: {}
  search-empty:
    base:
      typography: '{typography.small}'
      textColor: '{colors.muted-foreground}'
      paddingX: '{spacing.3}'
      paddingY: '{spacing.3}'
    variants: {}
    defaults: {}
  search-loading:
    base:
      gap: '{spacing.3}'
      paddingX: '{spacing.3}'
      paddingY: '{spacing.2}'
      display: flex
      flexDirection: column
    variants: {}
    defaults: {}
  search-loading-row:
    base:
      gap: '{spacing.3}'
    variants: {}
    defaults: {}
  search-loading-label:
    base:
      typography: '{typography.small}'
      textColor: '{colors.muted-foreground}'
    variants: {}
    defaults: {}
  search-highlight:
    base:
      backgroundColor: transparent
      fontWeight: semibold
    variants: {}
    defaults: {}
  search-overlay:
    base:
      extends: overlay-modal
      gap: '{spacing.2}'
      padding: '{spacing.4}'
      display: flex
      flexDirection: column
    variants: {}
    defaults: {}
  search-overlay-backdrop:
    base:
      extends: overlay-backdrop
    variants: {}
    defaults: {}
  date-field:
    base:
      extends: control
      height: '{spacing.10}'
      display: flex
      width: full
      minWidth: '{spacing.0}'
      alignItems: center
      focusWithin:
        borderBottomColor: '{colors.ring}'
    variants: {}
    defaults: {}
  date-field-segment:
    base:
      rounded: '{rounded.sm}'
      paddingX: '{spacing.0.5}'
      placeholderShown:
        textColor: '{colors.muted-foreground}'
      focus:
        backgroundColor: '{colors.accent}'
        textColor: '{colors.accent-foreground}'
    variants: {}
    defaults: {}
  date-field-literal:
    base:
      textColor: '{colors.muted-foreground}'
    variants: {}
    defaults: {}
  date-picker-content:
    base:
      padding: '{spacing.0}'
      width: auto
    variants: {}
    defaults: {}
  date-picker-trigger:
    base:
      bleedEnd: '{spacing.2}'
      textColor: '{colors.muted-foreground}'
      rounded: '{rounded.sm}'
      padding: '{spacing.2}'
      marginStart: auto
      display: inline-flex
      flexShrink: '0'
      alignItems: center
      justifyContent: center
      icon:
        size: '{spacing.4}'
      hover:
        textColor: '{colors.foreground}'
    variants: {}
    defaults: {}
  date-range-picker-separator:
    base:
      textColor: '{colors.muted-foreground}'
      paddingX: '{spacing.1}'
    variants: {}
    defaults: {}
  payment-card-brands:
    base:
      gap: '{spacing.1}'
      display: flex
      alignItems: center
    variants: {}
    defaults: {}
  payment-card-brand:
    base:
      height: '{spacing.5}'
      border: '{border.default}'
      borderColor: '{colors.border}'
      rounded: '{rounded.sm}'
    variants: {}
    defaults: {}
  input-group:
    base:
      extends: control
      height: '{spacing.10}'
      display: flex
      width: full
      minWidth: '{spacing.0}'
      alignItems: center
      focusWithin:
        borderBottom: '{border.focus}'
      invalidWithin:
        borderBottomColor: '{colors.destructive}'
    variants:
      size:
        md: {}
        sm:
          height: '{spacing.9}'
    defaults:
      size: md
  input-group-addon:
    base:
      textColor: '{colors.muted-foreground}'
      typography: '{typography.ui}'
      gap: '{spacing.2}'
      paddingY: '{spacing.2}'
      display: flex
      height: auto
      alignItems: center
      justifyContent: center
      icon:
        size: '{spacing.3.5}'
    variants:
      align:
        inline-start: {}
        inline-end: {}
        block-start:
          paddingTop: '{spacing.3}'
        block-end:
          paddingBottom: '{spacing.3}'
    defaults:
      align: inline-start
  input-group-text:
    base:
      textColor: '{colors.muted-foreground}'
      typography: '{typography.small}'
      gap: '{spacing.2}'
      display: flex
      alignItems: center
      icon:
        size: '{spacing.3.5}'
    variants: {}
    defaults: {}
  input-group-button:
    base:
      gap: '{spacing.2}'
      typography: '{typography.small}'
      display: flex
      alignItems: center
      icon:
        size: '{spacing.3.5}'
      iconStart:
        paddingStart: '{spacing.4}'
      iconEnd:
        paddingEnd: '{spacing.4}'
    variants:
      size:
        xs:
          height: '{spacing.6}'
          gap: '{spacing.1}'
          paddingX: '{spacing.1.5}'
          typography: '{typography.caption}'
          fontWeight: normal
        sm:
          height: '{spacing.10}'
          paddingX: '{spacing.6}'
        icon-xs:
          size: '{spacing.6}'
          padding: '{spacing.0}'
          iconStart:
            paddingStart: '{spacing.0}'
          iconEnd:
            paddingEnd: '{spacing.0}'
          typography: '{typography.caption}'
          fontWeight: normal
        icon-sm:
          size: '{spacing.8}'
          padding: '{spacing.0}'
          iconStart:
            paddingStart: '{spacing.0}'
          iconEnd:
            paddingEnd: '{spacing.0}'
    defaults:
      size: xs
  input-group-input:
    base:
      flex: '1'
    variants: {}
    defaults: {}
  input-group-textarea:
    base:
      flex: '1'
      paddingY: '{spacing.2.5}'
    variants: {}
    defaults: {}
  dialog-content:
    base:
      extends:
        - overlay-modal
        - surface-inset
      gap: '{spacing.6}'
      paddingX: '{spacing.6}'
      width: full
      '@md':
        paddingX: '{spacing.8}'
    variants:
      layout:
        fill:
          display: flex
          flexDirection: column
        scroll:
          display: grid
          maxWidth: '{container.lg}'
    defaults:
      layout: fill
  dialog-body:
    base:
      minHeight: '{spacing.0}'
      bleedX: '{spacing.6}'
      paddingX: '{spacing.6}'
      bleedY: '{spacing.2}'
      paddingY: '{spacing.2}'
      '@md':
        bleedX: '{spacing.8}'
        paddingX: '{spacing.8}'
    variants: {}
    defaults: {}
  dialog-title:
    base:
      extends: part-title
      lineHeight: none
    variants: {}
    defaults: {}
  dialog-overlay:
    base:
      extends: overlay-backdrop
    variants: {}
    defaults: {}
  dialog-description:
    base:
      marginTop: '{spacing.0.5}'
      extends:
        - part-description
        - link-foreground
    variants: {}
    defaults: {}
  dialog-footer:
    base:
      display: flex
      flexDirection: column-reverse
      gap: '{spacing.2}'
      '@sm':
        flexDirection: row
        justifyContent: end
    variants: {}
    defaults: {}
  dialog-header:
    base:
      display: flex
      flexDirection: column
      gap: '{spacing.2}'
    variants: {}
    defaults: {}
  alert-dialog-content:
    base:
      extends:
        - overlay-modal
        - surface-inset
      gap: '{spacing.6}'
      paddingX: '{spacing.6}'
      marginX: auto
      display: grid
      '@md':
        paddingX: '{spacing.8}'
    variants:
      size:
        md:
          maxWidth: '{container.xs}'
          '@md':
            maxWidth: '{container.md}'
        sm:
          maxWidth: '{container.xs}'
    defaults:
      size: md
  alert-dialog-header:
    base:
      gap: '{spacing.2}'
      display: grid
      placeItems: center
      textAlign: center
      '@sm':
        placeItems: start
        textAlign: start
    variants: {}
    defaults: {}
  alert-dialog-footer:
    base:
      gap: '{spacing.2}'
      display: flex
      flexDirection: column-reverse
      '@sm':
        flexDirection: row
        justifyContent: end
    variants: {}
    defaults: {}
  alert-dialog-media:
    base:
      marginBottom: '{spacing.2}'
      backgroundColor: '{colors.muted}'
      rounded: '{rounded.none}'
      size: '{spacing.16}'
      display: inline-flex
      alignItems: center
      justifyContent: center
      icon:
        size: '{spacing.8}'
      '@sm':
        gridRow: span 2
    variants: {}
    defaults: {}
  alert-dialog-overlay:
    base:
      extends: overlay-backdrop
    variants: {}
    defaults: {}
  alert-dialog-title:
    base:
      extends: part-title-lg
    variants: {}
    defaults: {}
  alert-dialog-description:
    base:
      marginTop: '{spacing.0.5}'
      extends:
        - part-description
        - link-foreground
    variants: {}
    defaults: {}
  sheet-content:
    base:
      extends: overlay-sheet
      display: flex
      flexDirection: column
    variants:
      side:
        top:
          borderBottom: '{border.default}'
        right:
          borderLeft: '{border.default}'
          width: '{spacing.96}'
        bottom:
          borderTop: '{border.default}'
        left:
          borderRight: '{border.default}'
          width: '{spacing.96}'
    defaults:
      side: right
  sheet-body:
    base:
      minHeight: '{spacing.0}'
      paddingX: '{spacing.8}'
    variants: {}
    defaults: {}
  sheet-overlay:
    base:
      extends: overlay-backdrop
    variants: {}
    defaults: {}
  sheet-title:
    base:
      extends: part-title
    variants: {}
    defaults: {}
  sheet-description:
    base:
      marginTop: '{spacing.0.5}'
      extends: part-description
    variants: {}
    defaults: {}
  sheet-footer:
    base:
      marginTop: auto
      display: flex
      flexDirection: column
      gap: '{spacing.2}'
      padding: '{spacing.8}'
    variants: {}
    defaults: {}
  sheet-header:
    base:
      display: flex
      flexDirection: column
      gap: '{spacing.1.5}'
      padding: '{spacing.8}'
    variants: {}
    defaults: {}
  drawer-content:
    base:
      extends: overlay-sheet
      shadow: none
      display: flex
      height: auto
      flexDirection: column
    variants:
      direction:
        down:
          borderTop: '{border.default}'
        up:
          borderBottom: '{border.default}'
        left:
          borderRight: '{border.default}'
          width: '{spacing.96}'
        right:
          borderLeft: '{border.default}'
          width: '{spacing.96}'
    defaults:
      direction: down
  drawer-body:
    base:
      minHeight: '{spacing.0}'
      paddingX: '{spacing.4}'
    variants: {}
    defaults: {}
  drawer-handle:
    base:
      marginTop: '{spacing.4}'
      backgroundColor: '{colors.muted}'
      rounded: '{rounded.none}'
      height: '{spacing.1.5}'
      width: '{spacing.25}'
    variants: {}
    defaults: {}
  drawer-overlay:
    base:
      extends: overlay-backdrop
    variants: {}
    defaults: {}
  drawer-title:
    base:
      extends: part-title
    variants: {}
    defaults: {}
  drawer-description:
    base:
      marginTop: '{spacing.0.5}'
      extends: part-description
    variants: {}
    defaults: {}
  drawer-footer:
    base:
      marginTop: auto
      display: flex
      flexDirection: column
      gap: '{spacing.2}'
      padding: '{spacing.4}'
    variants: {}
    defaults: {}
  drawer-header:
    base:
      display: flex
      flexDirection: column
      gap: '{spacing.1}'
      padding: '{spacing.4}'
      '@md':
        gap: '{spacing.2}'
        textAlign: start
    variants:
      swipe:
        vertical:
          textAlign: center
          '@md':
            textAlign: start
        horizontal: {}
    defaults:
      swipe: vertical
  popover-content:
    base:
      extends: overlay
      typography: '{typography.small}'
      width: '{spacing.72}'
      paddingX: '{spacing.4}'
      paddingY: '{spacing.4}'
      gap: '{spacing.4}'
      maxWidth: available
      display: flex
      flexDirection: column
    variants: {}
    defaults: {}
  popover-header:
    base:
      typography: '{typography.small}'
      gap: '{spacing.1.5}'
      display: flex
      flexDirection: column
    variants: {}
    defaults: {}
  popover-title:
    base:
      typography: '{typography.caption}'
      fontWeight: semibold
      textTransform: uppercase
    variants: {}
    defaults: {}
  popover-description:
    base:
      extends: part-description
    variants: {}
    defaults: {}
  hover-card-content:
    base:
      extends: overlay
      typography: '{typography.small}'
      width: '{spacing.72}'
      paddingX: '{spacing.4}'
      paddingY: '{spacing.4}'
    variants: {}
    defaults: {}
  tooltip-content:
    base:
      backgroundColor: '{colors.foreground}'
      textColor: '{colors.background}'
      rounded: '{rounded.none}'
      typography: '{typography.caption}'
      fontWeight: normal
      gap: '{spacing.1.5}'
      paddingX: '{spacing.3}'
      paddingY: '{spacing.1.5}'
      display: inline-flex
      alignItems: center
      width: fit
      maxWidth: '{container.xs}'
    variants: {}
    defaults: {}
  tooltip-arrow:
    base:
      decorative: true
      backgroundColor: '{colors.foreground}'
      fill: '{colors.foreground}'
      rounded: '{rounded.none}'
      size: '{spacing.2.5}'
    variants: {}
    defaults: {}
  dropdown-menu-content:
    base:
      extends: overlay
      minWidth: '{spacing.48}'
      padding: '{spacing.1.5}'
      width: trigger
    variants: {}
    defaults: {}
  dropdown-menu-sub-content:
    base:
      extends: overlay
      minWidth: '{spacing.36}'
      padding: '{spacing.1.5}'
      maxWidth: available
    variants: {}
    defaults: {}
  dropdown-menu-item:
    base:
      extends: menu-item
      gap: '{spacing.2.5}'
      paddingY: '{spacing.2}'
      display: flex
      alignItems: center
      icon:
        size: '{spacing.3.5}'
    variants:
      color:
        destructive:
          extends: menu-item-destructive
      pad:
        default:
          paddingX: '{spacing.3}'
        inset:
          paddingStart: '{spacing.9.5}'
          paddingEnd: '{spacing.3}'
        indicator:
          paddingStart: '{spacing.3}'
          paddingEnd: '{spacing.8}'
    defaults:
      pad: default
  dropdown-menu-sub-trigger:
    base:
      extends: menu-item
      gap: '{spacing.2.5}'
      paddingY: '{spacing.2}'
      display: flex
      alignItems: center
      icon:
        size: '{spacing.3.5}'
      open:
        backgroundColor: '{colors.accent}'
        textColor: '{colors.accent-foreground}'
    variants:
      pad:
        default:
          paddingX: '{spacing.3}'
        inset:
          paddingStart: '{spacing.9.5}'
          paddingEnd: '{spacing.3}'
    defaults:
      pad: default
  dropdown-menu-label:
    base:
      extends: menu-label
      paddingY: '{spacing.2}'
    variants:
      pad:
        default:
          paddingX: '{spacing.3}'
        inset:
          paddingStart: '{spacing.9.5}'
          paddingEnd: '{spacing.3}'
    defaults:
      pad: default
  dropdown-menu-separator:
    base:
      bleedX: '{spacing.1.5}'
      marginY: '{spacing.1.5}'
      extends: divider
      backgroundColor: '{colors.border/50}'
      height: '{spacing.px}'
    variants: {}
    defaults: {}
  dropdown-menu-shortcut:
    base:
      extends: menu-shortcut
      marginStart: auto
    variants: {}
    defaults: {}
  context-menu-content:
    base:
      extends: overlay
      minWidth: '{spacing.48}'
      padding: '{spacing.1.5}'
    variants: {}
    defaults: {}
  context-menu-sub-content:
    base:
      extends: overlay
      shadow: '{shadow.md}'
      minWidth: '{spacing.32}'
      padding: '{spacing.1.5}'
    variants: {}
    defaults: {}
  context-menu-item:
    base:
      extends: menu-item
      gap: '{spacing.2.5}'
      paddingY: '{spacing.2}'
      display: flex
      alignItems: center
      icon:
        size: '{spacing.3.5}'
    variants:
      color:
        destructive:
          extends: menu-item-destructive
      pad:
        default:
          paddingX: '{spacing.3}'
        inset:
          paddingStart: '{spacing.9.5}'
          paddingEnd: '{spacing.3}'
        indicator:
          paddingStart: '{spacing.3}'
          paddingEnd: '{spacing.8}'
    defaults:
      pad: default
  context-menu-sub-trigger:
    base:
      extends: menu-item
      gap: '{spacing.2.5}'
      paddingY: '{spacing.2}'
      display: flex
      alignItems: center
      icon:
        size: '{spacing.3.5}'
      open:
        backgroundColor: '{colors.accent}'
        textColor: '{colors.accent-foreground}'
    variants:
      pad:
        default:
          paddingX: '{spacing.3}'
        inset:
          paddingStart: '{spacing.9.5}'
          paddingEnd: '{spacing.3}'
    defaults:
      pad: default
  context-menu-label:
    base:
      extends: menu-label
      paddingY: '{spacing.2}'
    variants:
      pad:
        default:
          paddingX: '{spacing.3}'
        inset:
          paddingStart: '{spacing.9.5}'
          paddingEnd: '{spacing.3}'
    defaults:
      pad: default
  context-menu-separator:
    base:
      bleedX: '{spacing.1.5}'
      marginY: '{spacing.1.5}'
      extends: divider
      backgroundColor: '{colors.border/50}'
      height: '{spacing.px}'
    variants: {}
    defaults: {}
  context-menu-shortcut:
    base:
      extends: menu-shortcut
      marginStart: auto
    variants: {}
    defaults: {}
  navigation-menu-trigger:
    base:
      rounded: '{rounded.none}'
      typography: '{typography.ui}'
      height: '{spacing.9}'
      paddingX: '{spacing.4.5}'
      paddingY: '{spacing.2.5}'
      display: inline-flex
      width: max
      alignItems: center
      justifyContent: center
      icon:
        size: '{spacing.3}'
      hover:
        backgroundColor: '{colors.muted}'
      focus:
        backgroundColor: '{colors.muted}'
      open:
        backgroundColor: '{colors.muted/50}'
    variants: {}
    defaults: {}
  navigation-menu-content:
    base:
      paddingY: '{spacing.2.5}'
      paddingStart: '{spacing.2.5}'
      paddingEnd: '{spacing.3}'
      width: max
    variants:
      surface:
        shared: {}
        own:
          extends: overlay
          marginTop: '{spacing.1.5}'
    defaults:
      surface: shared
  navigation-menu-link:
    base:
      rounded: '{rounded.none}'
      typography: '{typography.small}'
      gap: '{spacing.1.5}'
      padding: '{spacing.3}'
      display: flex
      alignItems: center
      icon:
        size: '{spacing.3.5}'
      hover:
        backgroundColor: '{colors.muted}'
      focus:
        backgroundColor: '{colors.muted}'
      current:
        backgroundColor: '{colors.muted/50}'
    variants:
      place:
        panel: {}
        bar:
          typography: '{typography.ui}'
          height: '{spacing.9}'
          paddingX: '{spacing.4.5}'
          paddingY: '{spacing.2.5}'
    defaults:
      place: panel
  navigation-menu-viewport:
    base:
      marginTop: '{spacing.1.5}'
      extends: overlay
      height: viewport
      width: viewport
    variants: {}
    defaults: {}
  navigation-menu-indicator-arrow:
    base:
      backgroundColor: '{colors.border}'
      shadow: '{shadow.md}'
      size: '{spacing.2}'
    variants: {}
    defaults: {}
  navigation-menu:
    base:
      display: flex
      maxWidth: max
      flex: '1'
      alignItems: center
      justifyContent: center
    variants: {}
    defaults: {}
  navigation-menu-indicator:
    base:
      display: flex
      height: '{spacing.1.5}'
      alignItems: end
      justifyContent: center
    variants: {}
    defaults: {}
  navigation-menu-list:
    base:
      display: flex
      flex: '1'
      gap: '{spacing.0}'
      alignItems: center
      justifyContent: center
    variants: {}
    defaults: {}
  mega-menu-trigger:
    base:
      typography: '{typography.ui}'
      display: inline-flex
      alignItems: center
      justifyContent: center
      icon:
        size: '{spacing.3}'
    variants: {}
    defaults: {}
  mega-menu-content:
    base:
      backgroundColor: '{colors.background}'
      borderTop: '{border.default}'
      borderColor: '{colors.border}'
      width: full
    variants: {}
    defaults: {}
  mega-menu-viewport:
    base:
      shadow: '{shadow.lg}'
      height: viewport
    variants: {}
    defaults: {}
  mega-menu:
    base:
      width: full
    variants: {}
    defaults: {}
  mega-menu-item:
    base:
      display: flex
    variants: {}
    defaults: {}
  mega-menu-list:
    base:
      display: flex
      height: full
      alignItems: center
      gap: '{spacing.1}'
    variants: {}
    defaults: {}
  toast:
    base:
      backgroundColor: '{colors.background}'
      textColor: '{colors.foreground}'
      border: '{border.default}'
      rounded: '{rounded.none}'
      shadow: '{shadow.md}'
      typography: '{typography.note}'
      width: '{spacing.89}'
      paddingX: '{spacing.4}'
      paddingY: '{spacing.4}'
      gap: '{spacing.1.5}'
      icon:
        size: '{spacing.4}'
    variants:
      tone:
        info:
          extends: notice-info
        positive:
          extends: notice-positive
        warning:
          extends: notice-warning
        destructive:
          extends: notice-destructive
    defaults: {}
  toast-content:
    base:
      gap: '{spacing.0.5}'
    variants: {}
    defaults: {}
  toast-action:
    base:
      extends: action
      backgroundColor: '{colors.foreground}'
      textColor: '{colors.background}'
      height: '{spacing.6}'
      paddingX: '{spacing.2}'
    variants: {}
    defaults: {}
  toast-cancel:
    base:
      extends: action
      backgroundColor: '{colors.foreground/8}'
      textColor: '{colors.foreground}'
      height: '{spacing.6}'
      paddingX: '{spacing.2}'
    variants: {}
    defaults: {}
  toast-title:
    base:
      extends: part-title
    variants: {}
    defaults: {}
  toast-description:
    base:
      extends: part-description
    variants: {}
    defaults: {}
  separator:
    base:
      extends: divider
      flexShrink: '0'
    variants:
      orientation:
        horizontal:
          height: '{spacing.px}'
          width: full
        vertical:
          width: '{spacing.px}'
          alignSelf: stretch
    defaults:
      orientation: horizontal
  card:
    base:
      extends:
        - panel
        - surface-inset
      contain: inline-size
      gap: '{spacing.6}'
      display: flex
      flexDirection: column
      '@md':
        gap: '{spacing.8}'
    variants:
      surface:
        raised: {}
        bare:
          outline: '{ring.none}'
          shadow: none
          paddingY: '{spacing.0}'
          parts:
            card-header:
              paddingX: '{spacing.0}'
            card-content:
              paddingX: '{spacing.0}'
            card-footer:
              paddingX: '{spacing.0}'
    defaults:
      surface: raised
  card-header:
    base:
      gap: '{spacing.1.5}'
      paddingX: '{spacing.8}'
      display: grid
      gridColumns: '1'
      alignItems: start
    variants: {}
    defaults: {}
  card-content:
    base:
      paddingX: '{spacing.8}'
    variants: {}
    defaults: {}
  card-footer:
    base:
      paddingX: '{spacing.8}'
      display: flex
      alignItems: center
    variants: {}
    defaults: {}
  card-title:
    base:
      extends: part-title
    variants: {}
    defaults: {}
  card-description:
    base:
      extends: part-description
    variants: {}
    defaults: {}
  card-action:
    base:
      alignSelf: start
      justifySelf: start
    variants: {}
    defaults: {}
  alert:
    base:
      backgroundColor: '{colors.card}'
      textColor: '{colors.card-foreground}'
      border: '{border.default}'
      borderColor: '{colors.border}'
      rounded: '{rounded.none}'
      typography: '{typography.small}'
      gap: '{spacing.1}'
      paddingX: '{spacing.4}'
      paddingY: '{spacing.3}'
      display: grid
      width: full
      justifyContent: start
      textAlign: start
      icon:
        size: '{spacing.4}'
      after:
        borderStart: '{border.focus}'
        borderColor: '{colors.foreground}'
    variants:
      variant:
        neutral: {}
        info:
          extends: notice-info
          after:
            borderColor: '{colors.info}'
        success:
          extends: notice-positive
          after:
            borderColor: '{colors.positive}'
        warning:
          extends: notice-warning
          after:
            borderColor: '{colors.warning}'
        error:
          extends: notice-destructive
          after:
            borderColor: '{colors.destructive}'
    defaults:
      variant: neutral
  alert-title:
    base:
      extends: link-foreground
      typography: '{typography.ui}'
      fontWeight: semibold
    variants: {}
    defaults: {}
  alert-description:
    base:
      extends:
        - part-description
        - link-foreground
      typography: '{typography.small}'
    variants:
      variant:
        neutral:
          textColor: '{colors.muted-foreground}'
        error:
          textColor: '{colors.destructive/90}'
    defaults:
      variant: neutral
  empty:
    base:
      rounded: '{rounded.none}'
      gap: '{spacing.4}'
      padding: '{spacing.6}'
      display: flex
      width: full
      minWidth: '{spacing.0}'
      flex: '1'
      flexDirection: column
      alignItems: center
      justifyContent: center
      textAlign: center
      '@md':
        padding: '{spacing.12}'
    variants: {}
    defaults: {}
  empty-content:
    base:
      typography: '{typography.small}'
      gap: '{spacing.4}'
      display: flex
      width: full
      maxWidth: '{container.sm}'
      minWidth: '{spacing.0}'
      flexDirection: column
      alignItems: center
    variants: {}
    defaults: {}
  empty-title:
    base:
      extends: part-title-lg
    variants: {}
    defaults: {}
  empty-description:
    base:
      marginTop: '{spacing.0.5}'
      extends:
        - part-description
        - link-primary
      lineHeight: relaxed
    variants: {}
    defaults: {}
  empty-media:
    base:
      rounded: '{rounded.none}'
      marginBottom: '{spacing.2}'
      display: flex
      flexShrink: '0'
      alignItems: center
      justifyContent: center
    variants:
      variant:
        default:
          backgroundColor: transparent
        icon:
          backgroundColor: '{colors.muted}'
          textColor: '{colors.foreground}'
          size: '{spacing.10}'
          icon:
            size: '{spacing.5}'
    defaults:
      variant: default
  empty-header:
    base:
      display: flex
      maxWidth: '{container.sm}'
      flexDirection: column
      alignItems: center
      gap: '{spacing.2}'
    variants: {}
    defaults: {}
  item:
    base:
      border: '{border.default}'
      rounded: '{rounded.none}'
      typography: '{typography.small}'
      display: flex
      width: full
      flexWrap: wrap
      alignItems: center
      focus:
        borderColor: '{colors.ring}'
        outline: '{ring.wide}'
        outlineColor: '{colors.ring}'
    variants:
      variant:
        default:
          borderColor: transparent
        outline:
          borderColor: '{colors.border}'
        muted:
          backgroundColor: '{colors.muted/50}'
          borderColor: transparent
      size:
        md:
          gap: '{spacing.3.5}'
          paddingX: '{spacing.4}'
          paddingY: '{spacing.3.5}'
        sm:
          gap: '{spacing.3.5}'
          paddingX: '{spacing.3.5}'
          paddingY: '{spacing.3}'
        xs:
          gap: '{spacing.2.5}'
          paddingX: '{spacing.3}'
          paddingY: '{spacing.2.5}'
    defaults:
      variant: default
      size: md
  item-link:
    base:
      hover:
        backgroundColor: '{colors.muted}'
    variants: {}
    defaults: {}
  item-media:
    base:
      gap: '{spacing.2}'
      display: flex
      flexShrink: '0'
      alignItems: center
      justifyContent: center
    variants:
      variant:
        default:
          backgroundColor: transparent
        icon:
          icon:
            size: '{spacing.4}'
        image:
          rounded: '{rounded.none}'
          size: '{spacing.10}'
    defaults:
      variant: default
  item-title:
    base:
      extends: part-title
      typography: '{typography.caption}'
      lineHeight: snug
      letterSpacing: normal
      gap: '{spacing.2}'
      width: fit
      alignItems: center
    variants: {}
    defaults: {}
  item-description:
    base:
      extends:
        - part-description
        - link-primary
      textAlign: start
    variants: {}
    defaults: {}
  item-actions:
    base:
      display: flex
      alignItems: center
      gap: '{spacing.2}'
    variants: {}
    defaults: {}
  item-content:
    base:
      display: flex
      flex: '1'
      flexDirection: column
      gap: '{spacing.1}'
    variants: {}
    defaults: {}
  item-footer:
    base:
      display: flex
      alignItems: center
      justifyContent: between
      gap: '{spacing.2}'
    variants: {}
    defaults: {}
  item-group:
    base:
      display: flex
      width: full
      flexDirection: column
      gap: '{spacing.4}'
    variants: {}
    defaults: {}
  item-header:
    base:
      display: flex
      alignItems: center
      justifyContent: between
      gap: '{spacing.2}'
    variants: {}
    defaults: {}
  item-separator:
    base:
      marginY: '{spacing.2}'
    variants: {}
    defaults: {}
  avatar:
    base:
      rounded: '{rounded.full}'
      display: flex
      flexShrink: '0'
      after:
        border: '{border.default}'
        rounded: '{rounded.full}'
    variants:
      size:
        sm:
          size: '{spacing.6}'
        md:
          size: '{spacing.8}'
        lg:
          size: '{spacing.10}'
    defaults:
      size: md
  avatar-ring:
    base:
      outline: '{ring.frame}'
      outlineColor: '{colors.background}'
    variants: {}
    defaults: {}
  avatar-image:
    base:
      rounded: '{rounded.full}'
      size: full
    variants: {}
    defaults: {}
  avatar-fallback:
    base:
      backgroundColor: '{colors.muted}'
      textColor: '{colors.muted-foreground}'
      rounded: '{rounded.full}'
      display: flex
      size: full
      alignItems: center
      justifyContent: center
    variants:
      size:
        sm:
          typography: '{typography.caption}'
          fontWeight: normal
        md:
          typography: '{typography.small}'
        lg:
          typography: '{typography.small}'
    defaults:
      size: md
  avatar-badge:
    base:
      backgroundColor: '{colors.primary}'
      textColor: '{colors.primary-foreground}'
      rounded: '{rounded.full}'
      outline: '{ring.frame}'
      outlineColor: '{colors.background}'
      display: inline-flex
      alignItems: center
      justifyContent: center
    variants:
      size:
        sm:
          size: '{spacing.2}'
        md:
          size: '{spacing.2.5}'
          icon:
            size: '{spacing.2}'
        lg:
          size: '{spacing.3}'
          icon:
            size: '{spacing.2}'
    defaults:
      size: md
  avatar-group-count:
    base:
      backgroundColor: '{colors.muted}'
      textColor: '{colors.muted-foreground}'
      rounded: '{rounded.full}'
      outline: '{ring.frame}'
      outlineColor: '{colors.background}'
      display: flex
      flexShrink: '0'
      alignItems: center
      justifyContent: center
    variants:
      size:
        sm:
          size: '{spacing.6}'
          typography: '{typography.caption}'
          fontWeight: normal
          icon:
            size: '{spacing.3}'
        md:
          size: '{spacing.8}'
          typography: '{typography.small}'
          icon:
            size: '{spacing.4}'
        lg:
          size: '{spacing.10}'
          typography: '{typography.small}'
          icon:
            size: '{spacing.5}'
    defaults:
      size: md
  avatar-group:
    base:
      display: flex
    variants: {}
    defaults: {}
  aspect-ratio:
    base:
      rounded: '{rounded.none}'
    variants: {}
    defaults: {}
  collapsible-content:
    base:
      rounded: '{rounded.none}'
    variants: {}
    defaults: {}
  skeleton:
    base:
      backgroundColor: '{colors.muted}'
      rounded: '{rounded.none}'
    variants: {}
    defaults: {}
  spinner:
    base:
      size: '{spacing.4}'
    variants: {}
    defaults: {}
  progress:
    base:
      extends: track
      height: '{spacing.0.5}'
      display: flex
      width: full
      alignItems: center
    variants: {}
    defaults: {}
  progress-indicator:
    base:
      extends: track-fill
    variants: {}
    defaults: {}
  image:
    base:
      rounded: '{rounded.none}'
      display: inline-flex
    variants: {}
    defaults: {}
  image-loading:
    base: {}
    variants:
      effect:
        skeleton:
          backgroundColor: '{colors.muted}'
        blur:
          backgroundColor: '{colors.muted/50}'
    defaults:
      effect: skeleton
  image-fallback:
    base:
      backgroundColor: '{colors.muted}'
      display: flex
      size: full
      alignItems: center
      justifyContent: center
    variants: {}
    defaults: {}
  scroll-area-viewport:
    base:
      focus:
        outline: '{ring.wide}'
        outlineColor: '{colors.ring}'
    variants: {}
    defaults: {}
  scroll-area-scrollbar:
    base:
      display: flex
    variants:
      orientation:
        vertical:
          width: '{spacing.2.5}'
          paddingY: '{spacing.px}'
          paddingEnd: '{spacing.px}'
          paddingStart: '{spacing.0.5}'
          height: full
        horizontal:
          height: '{spacing.2.5}'
          paddingX: '{spacing.px}'
          paddingBottom: '{spacing.px}'
          paddingTop: '{spacing.0.5}'
          flexDirection: column
    defaults:
      orientation: vertical
  scroll-area-thumb:
    base:
      backgroundColor: '{colors.border}'
      rounded: '{rounded.none}'
    variants: {}
    defaults: {}
  table:
    base:
      typography: '{typography.small}'
      width: full
    variants: {}
    defaults: {}
  table-row:
    base:
      borderBottom: '{border.default}'
      hover:
        backgroundColor: '{colors.muted/50}'
      selected:
        backgroundColor: '{colors.muted}'
    variants: {}
    defaults: {}
  table-head:
    base:
      extends: label
      textColor: '{colors.muted-foreground}'
      fontWeight: medium
      letterSpacing: wider
      height: '{spacing.12}'
      paddingX: '{spacing.3}'
      textAlign: start
    variants: {}
    defaults: {}
  table-cell:
    base:
      padding: '{spacing.3}'
    variants: {}
    defaults: {}
  table-empty:
    base:
      paddingX: '{spacing.4}'
      paddingY: '{spacing.14}'
      extends: hint
    variants: {}
    defaults: {}
  table-footer:
    base:
      backgroundColor: '{colors.muted/50}'
      borderTop: '{border.default}'
      fontWeight: medium
    variants: {}
    defaults: {}
  table-caption:
    base:
      marginTop: '{spacing.4}'
      extends: hint
    variants: {}
    defaults: {}
  accordion-item:
    base:
      borderBottom: '{border.default}'
    variants: {}
    defaults: {}
  accordion-trigger:
    base:
      border: '{border.default}'
      borderColor: transparent
      rounded: '{rounded.none}'
      typography: '{typography.ui}'
      fontWeight: semibold
      iconColor: '{colors.muted-foreground}'
      gap: '{spacing.6}'
      paddingY: '{spacing.4}'
      display: flex
      flex: '1'
      alignItems: start
      justifyContent: between
      textAlign: start
      icon:
        size: '{spacing.3.5}'
      hover:
        textDecorationLine: underline
    variants: {}
    defaults: {}
  accordion-body:
    base:
      extends: link-foreground
      typography: '{typography.small}'
      paddingBottom: '{spacing.4}'
    variants: {}
    defaults: {}
  accordion:
    base:
      display: flex
      width: full
      flexDirection: column
    variants: {}
    defaults: {}
  breadcrumb-list:
    base:
      textColor: '{colors.muted-foreground}'
      typography: '{typography.caption}'
      fontWeight: normal
      textTransform: uppercase
      letterSpacing: wide
      gap: '{spacing.1.5}'
      display: flex
      flexWrap: wrap
      alignItems: center
      '@md':
        gap: '{spacing.2.5}'
    variants: {}
    defaults: {}
  breadcrumb-item:
    base:
      gap: '{spacing.1.5}'
      display: inline-flex
      alignItems: center
    variants: {}
    defaults: {}
  breadcrumb-link:
    base:
      hover:
        textColor: '{colors.foreground}'
    variants: {}
    defaults: {}
  breadcrumb-page:
    base:
      textColor: '{colors.foreground}'
      fontWeight: normal
    variants: {}
    defaults: {}
  breadcrumb-separator:
    base:
      icon:
        size: '{spacing.3.5}'
    variants: {}
    defaults: {}
  breadcrumb-ellipsis:
    base:
      size: '{spacing.5}'
      display: flex
      alignItems: center
      justifyContent: center
      icon:
        size: '{spacing.4}'
    variants: {}
    defaults: {}
  pagination-ellipsis:
    base:
      size: '{spacing.9}'
      display: flex
      alignItems: center
      justifyContent: center
      icon:
        size: '{spacing.4}'
    variants: {}
    defaults: {}
  pagination:
    base:
      marginX: auto
      display: flex
      width: full
      justifyContent: center
    variants: {}
    defaults: {}
  pagination-content:
    base:
      display: flex
      alignItems: center
      gap: '{spacing.1}'
    variants: {}
    defaults: {}
  pagination-next:
    base:
      paddingEnd: '{spacing.2}'
    variants: {}
    defaults: {}
  pagination-previous:
    base:
      paddingStart: '{spacing.2}'
    variants: {}
    defaults: {}
  carousel-dot:
    base:
      extends: track
      backgroundColor: '{colors.muted-foreground}'
      rounded: '{rounded.none}'
      height: '{spacing.0.5}'
      width: '{spacing.6}'
      selected:
        backgroundColor: '{colors.foreground}'
    variants: {}
    defaults: {}
  carousel-progress:
    base:
      marginTop: '{spacing.3}'
      extends: track
      backgroundColor: '{colors.muted/30}'
      rounded: '{rounded.sm}'
      height: '{spacing.1}'
      width: full
    variants: {}
    defaults: {}
  carousel-progress-indicator:
    base:
      extends: track-fill
      backgroundColor: '{colors.foreground}'
    variants: {}
    defaults: {}
  carousel-content:
    base:
      display: flex
    variants:
      orientation:
        horizontal: {}
        vertical:
          flexDirection: column
          bleedTop: '{spacing.4}'
    defaults:
      orientation: horizontal
  carousel-dots:
    base:
      display: flex
    variants: {}
    defaults: {}
  carousel-item:
    base:
      minWidth: '{spacing.0}'
      flexShrink: '0'
      flexGrow: '0'
    variants:
      orientation:
        horizontal: {}
        vertical:
          paddingTop: '{spacing.4}'
    defaults:
      orientation: horizontal
  tabs-list:
    base:
      textColor: '{colors.muted-foreground}'
      rounded: '{rounded.none}'
      height: '{spacing.10}'
      padding: '{spacing.1}'
      display: inline-flex
      width: fit
      alignItems: center
      justifyContent: center
    variants:
      variant:
        default:
          backgroundColor: '{colors.muted}'
        line:
          backgroundColor: transparent
          gap: '{spacing.1}'
    defaults:
      variant: default
  tabs-trigger:
    base:
      textColor: '{colors.foreground/60}'
      border: '{border.default}'
      borderColor: transparent
      rounded: '{rounded.none}'
      typography: '{typography.caption}'
      fontWeight: semibold
      letterSpacing: wider
      textTransform: uppercase
      gap: '{spacing.2}'
      paddingX: '{spacing.4}'
      paddingY: '{spacing.1.5}'
      display: inline-flex
      height: full
      flex: '1'
      alignItems: center
      justifyContent: center
      icon:
        size: '{spacing.3.5}'
      iconStart:
        paddingStart: '{spacing.2.5}'
      iconEnd:
        paddingEnd: '{spacing.2.5}'
      hover:
        textColor: '{colors.foreground}'
      focus:
        borderColor: '{colors.ring}'
        outline: '{ring.hairline}'
        outlineColor: '{colors.ring}'
      selected:
        backgroundColor: '{colors.background}'
        textColor: '{colors.foreground}'
    variants:
      variant:
        default: {}
        line:
          selected:
            backgroundColor: transparent
    defaults:
      variant: default
  tabs-trigger-indicator:
    base:
      backgroundColor: '{colors.foreground}'
    variants: {}
    defaults: {}
  tabs-content:
    base:
      typography: '{typography.small}'
      flex: '1'
    variants: {}
    defaults: {}
  tabs:
    base:
      display: flex
      gap: '{spacing.2}'
    variants: {}
    defaults: {}
  stepper-trigger:
    base:
      rounded: '{rounded.none}'
      gap: '{spacing.2}'
      padding: '{spacing.1}'
      display: flex
      flexDirection: column
      alignItems: center
      textAlign: center
    variants: {}
    defaults: {}
  stepper-indicator:
    base:
      rounded: '{rounded.full}'
      size: '{spacing.8}'
      display: inline-flex
      alignItems: center
      justifyContent: center
      icon:
        size: '{spacing.4}'
    variants:
      state:
        inactive:
          backgroundColor: '{colors.background}'
          textColor: '{colors.muted-foreground}'
          border: '{border.default}'
          borderColor: '{colors.input}'
        active:
          backgroundColor: '{colors.primary}'
          textColor: '{colors.primary-foreground}'
        completed:
          backgroundColor: '{colors.foreground}'
          textColor: '{colors.background}'
    defaults:
      state: inactive
  stepper-separator:
    base:
      extends: divider
    variants: {}
    defaults: {}
  stepper-separator-fill:
    base:
      backgroundColor: '{colors.foreground}'
    variants: {}
    defaults: {}
  stepper-title:
    base:
      typography: '{typography.ui}'
      fontWeight: medium
    variants:
      state:
        inactive:
          textColor: '{colors.muted-foreground}'
        active:
          fontWeight: semibold
        completed: {}
    defaults:
      state: inactive
  stepper-description:
    base:
      textColor: '{colors.muted-foreground}'
      typography: '{typography.caption}'
      fontWeight: normal
    variants: {}
    defaults: {}
  stepper-status:
    base:
      textColor: '{colors.muted-foreground}'
      typography: '{typography.caption}'
    variants: {}
    defaults: {}
  stepper:
    base:
      display: flex
      flexWrap: wrap
    variants: {}
    defaults: {}
  stepper-item:
    base:
      display: flex
      alignItems: center
    variants: {}
    defaults: {}
  stepper-separator-root:
    base:
      marginX: '{spacing.1}'
      height: '{spacing.px}'
      flex: '1'
    variants: {}
    defaults: {}
  sidebar:
    base:
      backgroundColor: '{colors.card}'
      textColor: '{colors.card-foreground}'
      display: flex
      flexDirection: column
    variants:
      variant:
        sidebar:
          rounded: '{rounded.none}'
        inset:
          rounded: '{rounded.none}'
        floating:
          border: '{border.default}'
          borderColor: '{colors.border}'
          rounded: '{rounded.none}'
          shadow: '{shadow.sm}'
    defaults:
      variant: sidebar
    keepAxis:
      - inset
  sidebar-size:
    base:
      width: '{spacing.64}'
    variants:
      width:
        icon:
          width: '{spacing.12}'
        icon-padded:
          width: '{spacing.16}'
        offcanvas:
          width: '{spacing.0}'
        mobile:
          width: '{spacing.72}'
          padding: '{spacing.0}'
    defaults: {}
  sidebar-container:
    base:
      display: flex
      height: svh
    variants:
      edge:
        start:
          borderEnd: '{border.default}'
        end:
          borderStart: '{border.default}'
        padded:
          padding: '{spacing.2}'
      width:
        icon:
          width: '{spacing.12}'
        icon-padded:
          width: '{spacing.16.5}'
    defaults:
      edge: start
  sidebar-wrapper:
    base:
      display: flex
      minHeight: svh
      width: full
    variants:
      variant:
        default:
          backgroundColor: transparent
        inset:
          backgroundColor: '{colors.card}'
    defaults:
      variant: default
  sidebar-inset:
    base:
      backgroundColor: '{colors.background}'
      display: flex
      width: full
      flex: '1'
      flexDirection: column
    variants:
      variant:
        flat:
          rounded: '{rounded.none}'
        raised:
          rounded: '{rounded.none}'
          shadow: '{shadow.sm}'
          margin: '{spacing.2}'
          marginStart: '{spacing.0}'
    defaults:
      variant: flat
  sidebar-header:
    base:
      gap: '{spacing.2}'
      padding: '{spacing.2}'
      display: flex
      flexDirection: column
    variants: {}
    defaults: {}
  sidebar-footer:
    base:
      gap: '{spacing.2}'
      padding: '{spacing.2}'
      display: flex
      flexDirection: column
    variants: {}
    defaults: {}
  sidebar-group:
    base:
      padding: '{spacing.2}'
      display: flex
      width: full
      minWidth: '{spacing.0}'
      flexDirection: column
    variants: {}
    defaults: {}
  sidebar-menu:
    base:
      gap: '{spacing.0.5}'
      display: flex
      width: full
      minWidth: '{spacing.0}'
      flexDirection: column
    variants: {}
    defaults: {}
  sidebar-separator:
    base:
      marginX: '{spacing.2}'
      width: auto
    variants: {}
    defaults: {}
  sidebar-content:
    base:
      scrollbar: none
      minHeight: '{spacing.0}'
      gap: '{spacing.2}'
      display: flex
      flex: '1'
      flexDirection: column
    variants: {}
    defaults: {}
  sidebar-group-label:
    base:
      textColor: '{colors.card-foreground/70}'
      rounded: '{rounded.none}'
      typography: '{typography.caption}'
      fontWeight: semibold
      textTransform: uppercase
      letterSpacing: wider
      height: '{spacing.8}'
      paddingX: '{spacing.3}'
      display: flex
      flexShrink: '0'
      alignItems: center
      icon:
        size: '{spacing.3.5}'
    variants: {}
    defaults: {}
  sidebar-group-content:
    base:
      typography: '{typography.small}'
      width: full
    variants: {}
    defaults: {}
  sidebar-input:
    base:
      backgroundColor: transparent
      shadow: none
      height: '{spacing.8}'
      width: full
    variants: {}
    defaults: {}
  sidebar-action:
    base:
      textColor: '{colors.card-foreground}'
      rounded: '{rounded.none}'
      width: '{spacing.5}'
      padding: '{spacing.0}'
      display: flex
      alignItems: center
      justifyContent: center
      icon:
        size: '{spacing.3.5}'
      hover:
        backgroundColor: '{colors.accent}'
        textColor: '{colors.accent-foreground}'
    variants: {}
    defaults: {}
  sidebar-menu-badge:
    base:
      textColor: '{colors.card-foreground}'
      rounded: '{rounded.none}'
      typography: '{typography.caption}'
      fontWeight: medium
      height: '{spacing.5}'
      minWidth: '{spacing.5}'
      paddingX: '{spacing.1}'
      display: flex
      alignItems: center
      justifyContent: center
    variants: {}
    defaults: {}
  sidebar-menu-button:
    base:
      rounded: '{rounded.none}'
      paddingX: '{spacing.3}'
      paddingY: '{spacing.2}'
      display: flex
      width: full
      alignItems: center
      textAlign: start
      icon:
        size: '{spacing.4}'
      hover:
        backgroundColor: '{colors.accent}'
        textColor: '{colors.accent-foreground}'
      active:
        backgroundColor: '{colors.accent}'
        textColor: '{colors.accent-foreground}'
      current:
        backgroundColor: '{colors.accent}'
        textColor: '{colors.accent-foreground}'
        fontWeight: medium
    variants:
      variant:
        default:
          backgroundColor: transparent
        outline:
          backgroundColor: '{colors.background}'
          outline: '{ring.hairline}'
          outlineColor: '{colors.border}'
          hover:
            outlineColor: '{colors.accent}'
      size:
        md:
          typography: '{typography.small}'
          height: '{spacing.9}'
          with:
            mode:
              collapsed:
                height: '{spacing.8}'
        sm:
          typography: '{typography.caption}'
          fontWeight: normal
          height: '{spacing.8}'
          with:
            mode:
              collapsed:
                height: '{spacing.8}'
        lg:
          typography: '{typography.small}'
          height: '{spacing.14}'
          with:
            mode:
              collapsed:
                height: '{spacing.8}'
                padding: '{spacing.0}'
      mode:
        expanded:
          gap: '{spacing.2}'
        collapsed:
          gap: '{spacing.2}'
          height: '{spacing.8}'
          width: full
          padding: '{spacing.2}'
    defaults:
      variant: default
      size: md
      mode: expanded
  sidebar-menu-sub:
    base:
      marginX: '{spacing.3.5}'
      borderStart: '{border.default}'
      gap: '{spacing.1}'
      paddingX: '{spacing.2.5}'
      paddingY: '{spacing.0.5}'
      display: flex
      minWidth: '{spacing.0}'
      flexDirection: column
    variants: {}
    defaults: {}
  sidebar-menu-sub-button:
    base:
      textColor: '{colors.card-foreground}'
      iconColor: '{colors.accent-foreground}'
      rounded: '{rounded.none}'
      height: '{spacing.7}'
      gap: '{spacing.2}'
      paddingX: '{spacing.3}'
      display: flex
      minWidth: '{spacing.0}'
      alignItems: center
      icon:
        size: '{spacing.3.5}'
      hover:
        backgroundColor: '{colors.accent}'
        textColor: '{colors.accent-foreground}'
      active:
        backgroundColor: '{colors.accent}'
        textColor: '{colors.accent-foreground}'
      current:
        backgroundColor: '{colors.accent}'
        textColor: '{colors.accent-foreground}'
    variants:
      size:
        sm:
          typography: '{typography.caption}'
          fontWeight: normal
        md:
          typography: '{typography.small}'
    defaults:
      size: md
  sidebar-menu-skeleton:
    base:
      rounded: '{rounded.none}'
      height: '{spacing.8}'
      gap: '{spacing.2}'
      paddingX: '{spacing.2}'
      display: flex
      alignItems: center
    variants: {}
    defaults: {}
  sidebar-rail:
    base:
      width: '{spacing.4}'
      display: flex
    variants:
      mode:
        default: {}
        offcanvas:
          hover:
            backgroundColor: '{colors.card}'
    defaults:
      mode: default
  sidebar-rail-line:
    base:
      extends: divider
      width: '{spacing.0.5}'
    variants: {}
    defaults: {}
  calendar-cell-trigger:
    base:
      extends:
        - action
        - calendar-day
      selected:
        backgroundColor: '{colors.primary}'
        textColor: '{colors.primary-foreground}'
      fontWeight: normal
      size: '{spacing.8}'
      padding: '{spacing.0}'
      gap: '{spacing.1.5}'
      display: inline-flex
      flexShrink: '0'
      alignItems: center
      justifyContent: center
      icon:
        size: '{spacing.3.5}'
      iconStart:
        paddingStart: '{spacing.4}'
      iconEnd:
        paddingEnd: '{spacing.4}'
    variants:
      day:
        current:
          textColor: '{colors.foreground}'
        today:
          extends: calendar-day-today
        outside:
          extends: calendar-day-outside
    defaults:
      day: current
  calendar-nav:
    base:
      extends:
        - action
        - calendar-nav-button
      size: '{spacing.7}'
      padding: '{spacing.0}'
      display: inline-flex
      flexShrink: '0'
      alignItems: center
      justifyContent: center
      icon:
        size: '{spacing.4}'
    variants: {}
    defaults: {}
  calendar-cell:
    base:
      typography: '{typography.small}'
      padding: '{spacing.0}'
      flex: '1'
      textAlign: center
      selected:
        backgroundColor: '{colors.accent}'
        rounded: '{rounded.md}'
    variants: {}
    defaults: {}
  calendar:
    base:
      padding: '{spacing.3}'
    variants: {}
    defaults: {}
  calendar-header:
    base:
      paddingX: '{spacing.8}'
      display: flex
      justifyContent: center
      alignItems: center
      width: full
    variants: {}
    defaults: {}
  calendar-head-cell:
    base:
      extends: calendar-weekday
      flex: '1'
    variants: {}
    defaults: {}
  calendar-heading:
    base:
      extends: calendar-month
    variants: {}
    defaults: {}
  range-calendar-cell-trigger:
    base:
      extends:
        - action
        - calendar-day
      fontWeight: normal
      size: '{spacing.8}'
      padding: '{spacing.0}'
      gap: '{spacing.1.5}'
      display: inline-flex
      flexShrink: '0'
      alignItems: center
      justifyContent: center
      icon:
        size: '{spacing.3.5}'
      iconStart:
        paddingStart: '{spacing.4}'
      iconEnd:
        paddingEnd: '{spacing.4}'
    variants:
      position:
        middle: {}
        edge: {}
      day:
        current:
          textColor: '{colors.foreground}'
          with:
            position:
              edge:
                extends: calendar-day-fill
        today:
          extends: calendar-day-today
          with:
            position:
              edge:
                extends: calendar-day-fill
        outside:
          extends: calendar-day-outside
          with:
            position:
              edge:
                extends: calendar-day-fill
    defaults:
      day: current
      position: middle
  range-calendar-cell:
    base:
      typography: '{typography.small}'
      padding: '{spacing.0}'
      textAlign: center
      selected:
        backgroundColor: '{colors.accent}'
    variants:
      edge:
        none: {}
        start:
          selected:
            borderTopLeftRadius: '{rounded.md}'
            borderBottomLeftRadius: '{rounded.md}'
        end:
          selected:
            borderTopRightRadius: '{rounded.md}'
            borderBottomRightRadius: '{rounded.md}'
        both:
          selected:
            rounded: '{rounded.md}'
    defaults:
      edge: none
  range-calendar-nav:
    base:
      extends:
        - action
        - calendar-nav-button
      size: '{spacing.7}'
      padding: '{spacing.0}'
      display: inline-flex
      flexShrink: '0'
      alignItems: center
      justifyContent: center
      icon:
        size: '{spacing.4}'
    variants: {}
    defaults: {}
  range-calendar-head-cell:
    base:
      extends: calendar-weekday
      width: '{spacing.8}'
      rounded: '{rounded.md}'
    variants: {}
    defaults: {}
  range-calendar:
    base:
      padding: '{spacing.3}'
    variants: {}
    defaults: {}
  range-calendar-header:
    base:
      paddingTop: '{spacing.1}'
      display: flex
      justifyContent: center
      alignItems: center
      width: full
    variants: {}
    defaults: {}
  range-calendar-heading:
    base:
      extends: calendar-month
    variants: {}
    defaults: {}
  range-calendar-grid-row:
    base:
      display: flex
    variants: {}
    defaults: {}
  calendar-select-label:
    base:
      typography: '{typography.small}'
      paddingStart: '{spacing.2}'
    variants: {}
    defaults: {}
  calendar-grid-row:
    base:
      display: flex
    variants: {}
    defaults: {}
  price:
    base:
      textColor: '{colors.price}'
      gap: '{spacing.1}'
      display: inline-flex
      flexDirection: column
    variants:
      size:
        sm:
          typography: '{typography.small}'
          fontWeight: semibold
        md:
          typography: '{typography.body}'
          fontWeight: semibold
        lg:
          typography: '{typography.headline}'
          fontWeight: semibold
      align:
        start:
          textAlign: start
          alignItems: start
        end:
          textAlign: end
          alignItems: end
    defaults:
      size: md
      align: start
  price-row:
    base:
      gap: '{spacing.1.5}'
    variants: {}
    defaults: {}
  price-hint:
    base:
      extends: link-foreground
      textColor: '{colors.muted-foreground}'
      typography: '{typography.caption}'
      fontWeight: normal
    variants: {}
    defaults: {}
  price-strike:
    base:
      textColor: '{colors.muted-foreground}'
      fontWeight: normal
      textDecorationLine: line-through
    variants:
      size:
        sm:
          typography: '{typography.caption}'
          fontWeight: normal
        md:
          typography: '{typography.small}'
          fontWeight: normal
        lg:
          typography: '{typography.body}'
          fontWeight: normal
    defaults:
      size: md
  price-discount:
    base:
      textColor: '{colors.discount}'
      fontWeight: medium
    variants: {}
    defaults: {}
  rating-icon:
    base:
      stroke: currentColor
      flexShrink: '0'
    variants:
      fill:
        full:
          textColor: '{colors.rating}'
          fill: currentColor
        empty:
          textColor: '{colors.muted-foreground}'
          fill: transparent
      size:
        sm:
          size: '{spacing.4}'
        md:
          size: '{spacing.5}'
        lg:
          size: '{spacing.6}'
    defaults:
      fill: full
      size: md
  rating-dot:
    base:
      rounded: '{rounded.full}'
      border: '{border.default}'
      borderColor: currentColor
      backgroundColor: currentColor
      display: inline-block
      flexShrink: '0'
    variants:
      fill:
        full:
          textColor: '{colors.rating}'
        empty:
          textColor: '{colors.muted-foreground}'
          backgroundColor: transparent
      size:
        sm:
          size: '{spacing.3}'
        md:
          size: '{spacing.4}'
        lg:
          size: '{spacing.5}'
    defaults:
      fill: full
      size: md
  rating:
    base:
      gap: '{spacing.0.5}'
      display: flex
      alignItems: center
    variants: {}
    defaults: {}
  rating-stars:
    base: {}
    variants:
      shape:
        dot:
          gap: '{spacing.1}'
        star:
          gap: '{spacing.0.5}'
    defaults: {}
  rating-meta:
    base:
      marginStart: '{spacing.2}'
      gap: '{spacing.1}'
      display: flex
      alignItems: baseline
    variants: {}
    defaults: {}
  rating-value:
    base:
      textColor: '{colors.foreground}'
      typography: '{typography.small}'
    variants: {}
    defaults: {}
  rating-count:
    base:
      textColor: '{colors.muted-foreground}'
      typography: '{typography.caption}'
      fontWeight: normal
    variants: {}
    defaults: {}
  rating-input-item:
    base:
      rounded: '{rounded.sm}'
    variants:
      shape:
        dot:
          padding: '{spacing.1}'
        star:
          padding: '{spacing.0.5}'
    defaults:
      shape: star
  rating-input:
    base:
      display: flex
      width: fit
      alignItems: center
    variants: {}
    defaults: {}
  swatch:
    base:
      border: '{border.default}'
      borderColor: '{colors.border}'
      display: inline-flex
      alignItems: center
      justifyContent: center
      hover:
        borderColor: '{colors.muted-foreground}'
        textColor: '{colors.foreground}'
      checked:
        borderColor: '{colors.foreground}'
    variants:
      size:
        xs:
          size: '{spacing.6}'
          typography: '{typography.ui}'
        sm:
          size: '{spacing.12}'
          '@md':
            size: '{spacing.9}'
          typography: '{typography.ui}'
        md:
          size: '{spacing.14}'
          '@md':
            size: '{spacing.12}'
          typography: '{typography.ui}'
        lg:
          size: '{spacing.16}'
          typography: '{typography.lead}'
          fontWeight: medium
      shape:
        default:
          rounded: '{rounded.md}'
        pill:
          rounded: '{rounded.full}'
    defaults:
      size: md
      shape: default
  swatch-strike:
    base:
      textColor: '{colors.foreground}'
    variants: {}
    defaults: {}
  swatch-strike-halo:
    base:
      textColor: '{colors.background}'
      decorative: true
    variants: {}
    defaults: {}
  swatch-fallback:
    base:
      border: '{border.frame}'
      borderColor: '{colors.background}'
    variants:
      shape:
        default:
          rounded: '{rounded.md}'
        pill:
          rounded: '{rounded.full}'
      size:
        xs:
          border: '{border.frame-thin}'
        sm: {}
        md: {}
        lg: {}
    defaults:
      shape: default
  swatch-image:
    base:
      border: '{border.frame}'
      borderColor: '{colors.background}'
      width: full
      height: full
    variants:
      shape:
        default:
          rounded: '{rounded.md}'
        pill:
          rounded: '{rounded.full}'
      size:
        xs:
          border: '{border.frame-thin}'
        sm: {}
        md: {}
        lg: {}
    defaults:
      shape: default
  swatch-label:
    base:
      textColor: '{colors.muted-foreground}'
      typography: '{typography.micro}'
      lineHeight: tight
      fontWeight: normal
    variants: {}
    defaults: {}
  swatch-group:
    base:
      gap: '{spacing.3}'
      display: flex
      '@md':
        gap: '{spacing.2}'
    variants:
      orientation:
        horizontal:
          flexWrap: wrap
        vertical:
          flexDirection: column
          flexWrap: nowrap
    defaults:
      orientation: horizontal
  filter-trigger:
    base:
      iconColor: '{colors.muted-foreground}'
      width: full
    variants: {}
    defaults: {}
  filter-trigger-count:
    base:
      marginEnd: '{spacing.2}'
      backgroundColor: '{colors.primary}'
      textColor: '{colors.primary-foreground}'
      rounded: '{rounded.full}'
      typography: '{typography.micro}'
      size: '{spacing.5}'
    variants: {}
    defaults: {}
  filter-reset:
    base:
      marginTop: '{spacing.1}'
      rounded: '{rounded.full}'
    variants: {}
    defaults: {}
  filter-group-content:
    base:
      width: '{spacing.64}'
      padding: '{spacing.3}'
    variants: {}
    defaults: {}
  filter-list:
    base:
      scrollbar: none
      height: '{spacing.70}'
      paddingY: '{spacing.1}'
    variants: {}
    defaults: {}
  filter-list-search:
    base:
      marginBottom: '{spacing.1}'
      extends:
        - control
        - control-line
      backgroundColor: '{colors.muted}'
      borderColor: '{colors.input}'
      shadow: none
      typography: '{typography.small}'
      height: '{spacing.9}'
      paddingX: '{spacing.3}'
    variants: {}
    defaults: {}
  filter-list-item:
    base:
      extends: menu-item
      gap: '{spacing.2}'
      paddingX: '{spacing.2}'
      paddingY: '{spacing.2}'
    variants: {}
    defaults: {}
  filter-list-check:
    base:
      extends:
        - choice
        - choice-box
      size: '{spacing.4.5}'
    variants: {}
    defaults: {}
  filter-meta:
    base:
      textColor: '{colors.muted-foreground}'
      typography: '{typography.caption}'
      fontWeight: normal
    variants: {}
    defaults: {}
  filter-swatch:
    base: {}
    variants:
      orientation:
        horizontal: {}
        vertical:
          bleedX: '{spacing.0.5}'
          bleedY: '{spacing.0.5}'
          padding: '{spacing.0.5}'
    defaults:
      orientation: vertical
  filter-swatch-text:
    base:
      typography: '{typography.small}'
    variants: {}
    defaults: {}
  filter-rating-star:
    base:
      rounded: '{rounded.sm}'
      padding: '{spacing.1.5}'
    variants: {}
    defaults: {}
  filter-field-label:
    base:
      extends: label
      typography: '{typography.small}'
      fontWeight: normal
      textTransform: none
      letterSpacing: normal
    variants: {}
    defaults: {}
  filter-field-title:
    base:
      extends: label
    variants: {}
    defaults: {}
  filter-field-description:
    base:
      extends: hint
    variants: {}
    defaults: {}
  filter-range-separator:
    base:
      extends: hint
    variants: {}
    defaults: {}
  filter-field:
    base:
      display: flex
      width: full
      gap: '{spacing.3}'
    variants: {}
    defaults: {}
  filter-field-content:
    base:
      display: flex
      flex: '1'
      flexDirection: column
      gap: '{spacing.1}'
    variants: {}
    defaults: {}
  filter-list-root:
    base:
      display: flex
      flexDirection: column
    variants: {}
    defaults: {}
  filter-range:
    base:
      flexDirection: column
      paddingX: '{spacing.3}'
      paddingY: '{spacing.2.5}'
    variants: {}
    defaults: {}
  filter-rating:
    base:
      paddingX: '{spacing.3}'
      paddingY: '{spacing.2.5}'
    variants: {}
    defaults: {}
  filter-reset-root:
    base:
      marginTop: '{spacing.2}'
      display: flex
      alignItems: center
      justifyContent: center
    variants: {}
    defaults: {}
  filter-slider:
    base:
      flexDirection: column
      paddingX: '{spacing.3}'
      paddingY: '{spacing.2.5}'
    variants: {}
    defaults: {}
  filter-switch:
    base:
      paddingX: '{spacing.3}'
      paddingY: '{spacing.2.5}'
    variants: {}
    defaults: {}
  product-card-basic-image:
    base:
      rounded: '{rounded.none}'
    variants: {}
    defaults: {}
  product-card-basic:
    base:
      width: full
    variants: {}
    defaults: {}
  product-card-hover-image:
    base:
      rounded: '{rounded.none}'
    variants: {}
    defaults: {}
  product-card-horizontal-image:
    base:
      rounded: '{rounded.none}'
    variants: {}
    defaults: {}
  product-card-horizontal:
    base:
      paddingY: '{spacing.0}'
    variants: {}
    defaults: {}
  product-card-gallery-image:
    base:
      rounded: '{rounded.none}'
    variants: {}
    defaults: {}
  product-card-gallery-badge:
    base:
      textTransform: uppercase
    variants: {}
    defaults: {}
  product-card-gallery-title:
    base:
      extends: section-title
    variants: {}
    defaults: {}
  product-card-minimal-image:
    base:
      rounded: '{rounded.none}'
    variants: {}
    defaults: {}
  product-card-featured-image:
    base:
      rounded: '{rounded.none}'
    variants: {}
    defaults: {}
  product-card-featured-description:
    base:
      extends: hint
      fontWeight: medium
    variants: {}
    defaults: {}
  navigation-shop-trigger:
    base: {}
    variants:
      layout:
        beside:
          extends: nav-trigger
          height: '{spacing.9}'
          paddingX: '{spacing.4}'
          paddingY: '{spacing.2}'
        above:
          extends: nav-trigger
          height: '{spacing.9}'
          paddingX: '{spacing.4}'
          paddingY: '{spacing.2}'
        captioned:
          textColor: '{colors.foreground/70}'
          borderBottom: '{border.strong}'
          borderColor: transparent
          hover:
            textColor: '{colors.foreground/80}'
          open:
            textColor: '{colors.foreground}'
            borderColor: '{colors.primary}'
    defaults:
      layout: beside
  navigation-shop-page:
    base:
      typography: '{typography.ui}'
    variants:
      layout:
        beside:
          extends: nav-trigger
          height: '{spacing.9}'
          paddingX: '{spacing.4}'
          paddingY: '{spacing.2}'
        above:
          extends: nav-trigger
          height: '{spacing.9}'
          paddingX: '{spacing.4}'
          paddingY: '{spacing.2}'
        captioned:
          textColor: '{colors.foreground/70}'
          hover:
            textColor: '{colors.foreground/80}'
      tone:
        highlight:
          textColor: '{colors.destructive}'
    defaults:
      layout: beside
  navigation-shop-content:
    base: {}
    variants:
      layout:
        beside: {}
        above: {}
        captioned:
          borderTop: none
          typography: '{typography.small}'
    defaults:
      layout: beside
  navigation-shop-viewport:
    base: {}
    variants:
      layout:
        beside: {}
        above:
          shadow: none
        captioned:
          shadow: '{shadow.sm}'
    defaults:
      layout: beside
  navigation-shop-featured-image:
    base:
      backgroundColor: '{colors.muted}'
    variants:
      layout:
        beside:
          rounded: '{rounded.lg}'
        above:
          rounded: '{rounded.lg}'
        captioned:
          rounded: '{rounded.md}'
    defaults:
      layout: beside
  navigation-shop-caption:
    base:
      backgroundColor: '{colors.background/90}'
      typography: '{typography.small}'
      paddingX: '{spacing.4}'
      paddingY: '{spacing.3}'
    variants: {}
    defaults: {}
  navigation-shop-columns:
    base:
      typography: '{typography.small}'
    variants: {}
    defaults: {}
  navigation-shop-root:
    base:
      display: flex
      alignItems: center
    variants: {}
    defaults: {}
  header-shop-announcement:
    base:
      backgroundColor: '{colors.foreground}'
      textColor: '{colors.background}'
      typography: '{typography.caption}'
      fontWeight: normal
      letterSpacing: wide
    variants: {}
    defaults: {}
  header-shop-bar:
    base:
      backgroundColor: '{colors.background}'
      borderBottom: '{border.default}'
      borderColor: '{colors.border}'
    variants: {}
    defaults: {}
  header-shop:
    base:
      width: full
    variants: {}
    defaults: {}
  header-centered:
    base:
      backgroundColor: '{colors.background}'
      borderBottom: '{border.default}'
      borderColor: '{colors.border}'
      width: full
    variants: {}
    defaults: {}
  header-centered-logo:
    base:
      extends: logo
      typography: '{typography.headline}'
    variants: {}
    defaults: {}
  header-centered-nav:
    base:
      borderTop: '{border.default}'
      borderColor: '{colors.border}'
    variants: {}
    defaults: {}
  header-checkout:
    base:
      backgroundColor: '{colors.background}'
      borderBottom: '{border.default}'
      borderColor: '{colors.border}'
      width: full
    variants: {}
    defaults: {}
  footer-rich-newsletter:
    base:
      backgroundColor: '{colors.muted}'
    variants: {}
    defaults: {}
  footer-rich-heading:
    base:
      typography: '{typography.subheading}'
    variants: {}
    defaults: {}
  footer-rich-legal:
    base:
      backgroundColor: '{colors.foreground}'
      textColor: '{colors.background}'
      typography: '{typography.small}'
    variants: {}
    defaults: {}
  footer-rich-legal-link:
    base:
      textColor: '{colors.background/70}'
      hover:
        textColor: '{colors.background}'
    variants: {}
    defaults: {}
  footer-rich-legal-logo:
    base:
      extends: logo
      typography: '{typography.small}'
      letterSpacing: normal
    variants: {}
    defaults: {}
  footer-rich-legal-note:
    base:
      textColor: '{colors.background/70}'
    variants: {}
    defaults: {}
  footer-rich-title:
    base:
      extends: section-title
    variants: {}
    defaults: {}
  footer-rich:
    base:
      width: full
    variants: {}
    defaults: {}
  footer-brand-title:
    base:
      extends: section-title
    variants: {}
    defaults: {}
  footer-minimal-logo:
    base:
      extends: logo
      typography: '{typography.lead}'
    variants: {}
    defaults: {}
  footer-minimal:
    base:
      width: full
    variants: {}
    defaults: {}
  footer-trust-icon:
    base:
      backgroundColor: '{colors.muted}'
      rounded: '{rounded.full}'
      size: '{spacing.10}'
      icon:
        size: '{spacing.5}'
    variants: {}
    defaults: {}
  footer-trust:
    base:
      width: full
    variants: {}
    defaults: {}
  footer-brand:
    base:
      backgroundColor: '{colors.muted/50}'
      width: full
    variants: {}
    defaults: {}
  review-cards-heading:
    base:
      extends: heading
      typography: '{typography.headline}'
      fontWeight: bold
      letterSpacing: tight
    variants: {}
    defaults: {}
  review-cards-average:
    base:
      extends: page-title
      typography: '{typography.display}'
    variants: {}
    defaults: {}
  review-cards-summary:
    base:
      typography: '{typography.small}'
    variants: {}
    defaults: {}
  review-cards-star:
    base:
      typography: '{typography.small}'
      fontWeight: medium
      width: '{spacing.3}'
    variants: {}
    defaults: {}
  review-cards-percent:
    base:
      typography: '{typography.small}'
      width: '{spacing.10}'
    variants: {}
    defaults: {}
  review-cards-content:
    base:
      marginTop: '{spacing.4}'
      extends: copy-muted
    variants: {}
    defaults: {}
  review-cards-author:
    base:
      typography: '{typography.ui}'
      fontWeight: bold
    variants: {}
    defaults: {}
  review-cards:
    base:
      width: full
    variants: {}
    defaults: {}
  filter-toolbar-bar:
    base:
      backgroundColor: '{colors.card}'
      border: '{border.default}'
      borderColor: '{colors.border}'
      rounded: '{rounded.lg}'
      padding: '{spacing.3}'
      gap: '{spacing.3}'
    variants: {}
    defaults: {}
  filter-toolbar:
    base:
      width: full
    variants: {}
    defaults: {}
  category-filter-heading:
    base:
      extends: heading
      typography: '{typography.display}'
      fontWeight: bold
      letterSpacing: tight
    variants: {}
    defaults: {}
  category-filter-description:
    base:
      marginTop: '{spacing.4}'
      textColor: '{colors.muted-foreground}'
      typography: '{typography.body}'
    variants: {}
    defaults: {}
  category-filter:
    base:
      width: full
    variants: {}
    defaults: {}
  category-grid-heading:
    base:
      extends: heading
      typography: '{typography.display}'
      fontWeight: semibold
    variants: {}
    defaults: {}
  category-grid-description:
    base:
      textColor: '{colors.muted-foreground}'
      typography: '{typography.body}'
    variants: {}
    defaults: {}
  category-grid-dismiss:
    base:
      bleedEnd: '{spacing.1}'
      marginStart: '{spacing.0.5}'
      extends: dismiss
      size: '{spacing.4}'
    variants: {}
    defaults: {}
  category-grid:
    base:
      width: full
    variants: {}
    defaults: {}
  cart-item-detailed-line:
    base:
      gap: '{spacing.4}'
    variants: {}
    defaults: {}
  cart-item-detailed-image:
    base:
      extends: thumbnail
      size: '{spacing.24}'
    variants: {}
    defaults: {}
  cart-item-detailed-quantity:
    base:
      typography: '{typography.small}'
      fontWeight: medium
      width: '{spacing.8}'
    variants: {}
    defaults: {}
  cart-item-detailed:
    base:
      display: flex
      flexDirection: column
      gap: '{spacing.5}'
    variants: {}
    defaults: {}
  cart-item-compact-image:
    base:
      extends: thumbnail
      size: '{spacing.18}'
    variants: {}
    defaults: {}
  cart-item-compact:
    base:
      display: flex
      flexDirection: column
      gap: '{spacing.5}'
    variants: {}
    defaults: {}
  cart-item-minimal-image:
    base:
      extends: thumbnail
      size: '{spacing.12}'
    variants: {}
    defaults: {}
  cart-item-minimal:
    base:
      display: flex
      flexDirection: column
      gap: '{spacing.3}'
    variants: {}
    defaults: {}
  cart-minimal-title:
    base:
      extends: section-title
    variants: {}
    defaults: {}
  search-suggestions-image:
    base:
      extends: thumbnail
      size: '{spacing.12}'
    variants: {}
    defaults: {}
  search-suggestions-pick:
    base:
      gap: '{spacing.2}'
      padding: '{spacing.2}'
    variants: {}
    defaults: {}
  order-summary-image:
    base:
      extends: thumbnail
      size: '{spacing.14}'
    variants: {}
    defaults: {}
  order-tracking-eta:
    base:
      typography: '{typography.title}'
    variants: {}
    defaults: {}
  order-tracking-parcel:
    base:
      backgroundColor: '{colors.muted}'
      rounded: '{rounded.md}'
      paddingX: '{spacing.4}'
      paddingY: '{spacing.3}'
      gap: '{spacing.3}'
    variants: {}
    defaults: {}
  account-access-delete-title:
    base:
      textColor: '{colors.destructive}'
  product-options-image:
    base:
      backgroundColor: '{colors.muted}'
      rounded: '{rounded.md}'
    variants: {}
    defaults: {}
  filters-range-to:
    base:
      extends: hint
      typography: '{typography.ui}'
    variants: {}
    defaults: {}
  reviews-stars:
    base:
      extends: meta
      width: '{spacing.3}'
    variants: {}
    defaults: {}
  reviews-count:
    base:
      extends: meta
      width: '{spacing.7}'
      textAlign: end
    variants: {}
    defaults: {}
  reviews-verified:
    base:
      extends: note-positive
      typography: '{typography.caption}'
      gap: '{spacing.1}'
      icon:
        size: '{spacing.3.5}'
    variants: {}
    defaults: {}
  return-request-option:
    base:
      fontWeight: normal
    variants: {}
    defaults: {}
  delivery-slot-price:
    base:
      extends: note-positive
      typography: '{typography.ui}'
    variants: {}
    defaults: {}
  checkout-page-root:
    base:
      backgroundColor: '{colors.background}'
      textColor: '{colors.foreground}'
    variants: {}
    defaults: {}
  checkout-page-summary:
    base:
      backgroundColor: '{colors.primary}'
      textColor: '{colors.primary-foreground}'
    variants: {}
    defaults: {}
  checkout-page-summary-toggle:
    base:
      typography: '{typography.ui}'
      fontWeight: semibold
      gap: '{spacing.1}'
    variants: {}
    defaults: {}
  checkout-page-total-image:
    base:
      extends: thumbnail
      size: '{spacing.12}'
    variants: {}
    defaults: {}
  review-list:
    base:
      width: full
    variants: {}
    defaults: {}
  cart-full:
    base:
      display: flex
      flexDirection: column
      gap: '{spacing.6}'
    variants: {}
    defaults: {}
  filter-sheet:
    base:
      width: full
    variants: {}
    defaults: {}
  filter-sidebar:
    base:
      width: full
    variants: {}
    defaults: {}
---
## Overview

A quiet commerce storefront on white: near-black zinc text, one violet for every action, red only for a deal, blue for what is new, gold for ratings. Surfaces stay flat and square so the products carry the page. In a project this file is `library/DESIGN.md`; `add` fills `components:`, the prose is yours.

## Colors

- `primary`, `buy`, `checkout` and `active` share the violet `#7008e7` on near-white text. One action colour, everywhere a customer decides. `primary`, `buy` and `checkout` each have a `-hover` tone one shade deeper, `primary-hover` `#5e07c2`, for the solid hover.
- `promo` and `discount` are the red `#e7000b`; `destructive` is a deeper red `#c70009` and means removing. Red means money saved or something lost, never decoration.
- `new` and `info` share the blue `#2563eb`; `positive` is green, `warning` a deep amber on dark text.
- `rating` is a warm amber-gold `#c27c00` with dark text; empty stars are outlines in `muted-foreground`; `warning` is an orange amber `#d97706` and means caution, never a rating.
- Surfaces are white. `muted`, `secondary` and `accent` are one light zinc `#f4f4f5`; `muted-foreground` `#66666f` is secondary text. `border` is `#e4e4e7`, `input` darker `#a1a1aa`, the focus `ring` mid grey `#71717a`, drawn at full strength, never faded.

## Typography

Inter everywhere, headings included. `heading` 1.5rem, `body` 1rem, `small` 0.875rem; weights normal 400, medium 500, semibold 600. A price is `price` in the body weight; a struck old price is `muted-foreground` at normal weight; a discount is `discount` red at medium; a hint under the price is `caption` in `muted-foreground`.

## Layout

Spacing is the Tailwind scale in four-pixel steps. Cards are inline-size containers: their inner variants step at the card's width, not the viewport's.

## Elevation & Depth

Flat by default. Controls carry `shadow-xs`, a panel `shadow-sm`, menus, popovers, sheets and toasts `shadow-md`, only the mega menu `shadow-lg`. Overlays sit on white with a hairline outline in the foreground colour at low alpha; no heavy drop shadow.

## Shapes

Controls are `rounded-md` 0.4rem. Overlays, panels, toasts and badges are square. Round shapes are `rounded-full`: avatars, swatches, radio and rating dots, counts, step indicators and dismiss buttons.

## Components

Every component wears the recipes above. A new variant is a new value under its axis; a look for two values together sits under one of them as `with`.

## Do's and Don'ts

- Do pick a colour by role: `buy` for add to cart, `checkout` for the checkout step, `promo` for a campaign.
- Do change a token, run `build`, and let every component follow.
- Do give a solid action fill its hover with its `-hover` token, never a faded alpha of the base colour; draw the focus ring in `ring` at full strength.
- Don't put a colour, size or radius class on a component; placement only.
- Don't add a second accent. A new colour is a new role, named here first.