@ygor-ui/presets/dist/index.mjs.map

Panda CSS presets for Ark UI components

{"version":3,"sources":["../src/index.ts","../src/conditions.ts","../src/global-css.ts","../src/theme/keyframes.ts","../src/theme/recipes/accordion.ts","../src/theme/recipes/alert.ts","../src/theme/recipes/article.ts","../src/theme/recipes/avatar.ts","../src/theme/recipes/badge.ts","../src/theme/recipes/button.ts","../src/theme/recipes/carousel.ts","../src/theme/recipes/checkbox.ts","../src/theme/recipes/code.ts","../src/theme/recipes/color-picker.ts","../src/theme/recipes/combobox.ts","../src/theme/recipes/date-picker.ts","../src/theme/recipes/dialog.ts","../src/theme/recipes/drawer.ts","../src/theme/recipes/editable.ts","../src/theme/recipes/hover-card.ts","../src/theme/recipes/input.ts","../src/theme/recipes/label.ts","../src/theme/recipes/link.ts","../src/theme/recipes/menu.ts","../src/theme/recipes/number-input.ts","../src/theme/recipes/pagination.ts","../src/theme/recipes/pin-input.ts","../src/theme/recipes/popover.ts","../src/theme/recipes/radio-button-group.ts","../src/theme/recipes/radio-group.ts","../src/theme/recipes/range-slider.ts","../src/theme/recipes/rating-group.ts","../src/theme/recipes/segment-group.ts","../src/theme/recipes/select.ts","../src/theme/recipes/slider.ts","../src/theme/recipes/splitter.ts","../src/theme/recipes/switch.ts","../src/theme/recipes/tabs.ts","../src/theme/recipes/tags-input.ts","../src/theme/recipes/textarea.ts","../src/theme/recipes/toast.ts","../src/theme/recipes/tooltip.ts","../src/theme/recipes/index.ts","../src/theme/semantic-tokens.ts","../src/theme/text-styles.ts","../src/theme/tokens/index.ts","../src/theme/tokens/animations.ts","../src/theme/tokens/colors.ts","../src/theme/tokens/line-heights.ts","../src/theme/tokens/radii.ts","../src/theme/tokens/sizes.ts","../src/theme/tokens/spacing.ts","../src/theme/tokens/z-index.ts"],"sourcesContent":["import { definePreset } from '@pandacss/dev'\nimport type { Preset } from '@pandacss/types'\nimport { conditions } from './conditions'\nimport { globalCss } from './global-css'\nimport { keyframes } from './theme/keyframes'\nimport { recipes, slotRecipes } from './theme/recipes'\nimport { semanticTokens } from './theme/semantic-tokens'\nimport { textStyles } from './theme/text-styles'\nimport { tokens } from './theme/tokens'\n\nconst preset: Preset = definePreset({\n  theme: {\n    extend: {\n      keyframes,\n      recipes,\n      semanticTokens,\n      slotRecipes,\n      textStyles,\n      tokens,\n    },\n  },\n  conditions,\n  globalCss,\n})\n\nexport default preset\n","export const conditions = {\n  extend: {\n    checked: '&:is(:checked, [data-checked], [aria-checked=true], [data-state=checked])',\n    indeterminate:\n      '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])',\n    closed: '&:is([data-state=closed])',\n    open: '&:is([open], [data-state=open])',\n    hidden: '&:is([hidden])',\n    current: '&:is([data-current])',\n    today: '&:is([data-today])',\n  },\n}\n","import { defineGlobalStyles } from '@pandacss/dev'\n\nexport const globalCss = defineGlobalStyles({\n  html: {\n    lineHeight: 1.5,\n    MozOsxFontSmoothing: 'grayscale',\n    textRendering: 'optimizeLegibility',\n    WebkitFontSmoothing: 'antialiased',\n    WebkitTextSizeAdjust: '100%',\n  },\n  body: {\n    background: 'bg.canvas',\n    color: 'fg.default',\n    fontFamily: 'var(--font-body), sans-serif',\n    _dark: {\n      colorScheme: 'dark',\n    },\n  },\n  '*, *::before, *::after': {\n    borderColor: 'border.default',\n    borderStyle: 'solid',\n    boxSizing: 'border-box',\n  },\n  '*::placeholder': {\n    opacity: 1,\n    color: 'fg.subtle',\n  },\n})\n","import { defineKeyframes } from '@pandacss/dev'\n\nexport const keyframes = defineKeyframes({\n  'fade-in': {\n    from: { opacity: '0' },\n    to: { opacity: '1' },\n  },\n  'fade-out': {\n    from: { opacity: '1' },\n    to: { opacity: '0' },\n  },\n  'slide-in': {\n    '0%': { opacity: '0', transform: 'translateY(64px)' },\n    '100%': { opacity: '1', transform: 'translateY(0)' },\n  },\n  'slide-out': {\n    '0%': { opacity: '1', transform: 'translateY(0)' },\n    '100%': { opacity: '0', transform: 'translateY(64px)' },\n  },\n  'slide-in-left': {\n    '0%': { transform: 'translateX(-100%)' },\n    '100%': { transform: 'translateX(0%)' },\n  },\n  'slide-out-left': {\n    '0%': { transform: 'translateX(0%)' },\n    '100%': { transform: 'translateX(-100%)' },\n  },\n  'slide-in-right': {\n    '0%': { transform: 'translateX(100%)' },\n    '100%': { transform: 'translateX(0%)' },\n  },\n  'slide-out-right': {\n    '0%': { transform: 'translateX(0%)' },\n    '100%': { transform: 'translateX(100%)' },\n  },\n\n  fadeIn: {\n    '0%': { opacity: '0', transform: 'translateY(-4px)' },\n    '100%': { opacity: '1', transform: 'translateY(0)' },\n  },\n  fadeOut: {\n    '0%': { opacity: '1', transform: 'translateY(0)' },\n    '100%': { opacity: '0', transform: 'translateY(-4px)' },\n  },\n  slideInFromBottom: {\n    '0%': { opacity: '0', transform: 'translateY(4px)' },\n    '100%': { opacity: '1', transform: 'translateY(0)' },\n  },\n  slideOutToBottom: {\n    '0%': { opacity: '1', transform: 'translateY(0)' },\n    '100%': { opacity: '0', transform: 'translateY(4px)' },\n  },\n})\n","import { accordionAnatomy } from '@ark-ui/react'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const accordion = defineSlotRecipe({\n  className: 'accordion',\n  description: 'An accordion style',\n  slots: accordionAnatomy.keys(),\n  base: {\n    root: {\n      divideY: '1px',\n      width: 'full',\n    },\n    trigger: {\n      alignItems: 'center',\n      cursor: 'pointer',\n      display: 'flex',\n      fontWeight: 'medium',\n      justifyContent: 'space-between',\n      width: 'full',\n    },\n    content: {\n      color: 'fg.muted',\n      display: 'grid',\n      gridTemplateRows: '0fr',\n      transitionProperty: 'grid-template-rows, padding-bottom',\n      transitionDuration: 'normal',\n      transitionTimingFunction: 'default',\n      _open: {\n        gridTemplateRows: '1fr',\n      },\n      '& > div': {\n        overflow: 'hidden',\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n  variants: {\n    size: {\n      md: {\n        trigger: {\n          py: '4',\n        },\n        content: {\n          pb: '6',\n          pr: '8',\n          _closed: {\n            pb: '0',\n          },\n        },\n      },\n    },\n  },\n})\n","import { defineRecipe } from '@pandacss/dev'\n\nexport const alert = defineRecipe({\n  className: 'alert',\n  description: 'An alert style',\n  base: {\n    background: 'bg.default',\n    borderRadius: 'l3',\n    borderWidth: '1px',\n    p: '4',\n    textStyle: 'sm',\n    width: 'full',\n  },\n})\n","import { defineRecipe } from '@pandacss/dev'\n\nexport const article = defineRecipe({\n  className: 'article',\n  description: 'An article style',\n  base: {\n    maxWidth: '65ch',\n    '& :where(h1, h2)': {\n      fontWeight: 'bold',\n    },\n    '& :where(h3)': {\n      fontWeight: 'semibold',\n    },\n    '& :where(ul)': {\n      listStyleType: 'disc',\n    },\n    '& :where(a)': {\n      color: 'fg.emphasized',\n      fontWeight: 'medium',\n      textDecoration: 'underline',\n      textDecorationColor: 'accent.default',\n      textUnderlineOffset: '0.2em',\n    },\n    '& :where(p, li)': {\n      color: 'fg.muted',\n    },\n    '& :where(li::marker)': {\n      color: 'bg.emphasized',\n    },\n    '& :where(strong)': {\n      fontWeight: 'semibold',\n      color: 'fg.default',\n    },\n    '& :where(code):not(:where(pre code))': {\n      alignItems: 'center',\n      bg: 'bg.subtle',\n      borderRadius: 'l2',\n      borderWidth: '1px',\n      display: 'inline-flex',\n      fontFamily: 'var(--font-code)',\n      fontWeight: 'medium',\n    },\n    '& :where(pre)': {\n      backgroundColor: 'bg.subtle',\n      borderRadius: 'l3',\n      borderWidth: '1px',\n      overflowX: 'auto',\n    },\n    '& :where(blockquote)': {\n      borderLeftWidth: '4px',\n    },\n    '& :where(blockquote > p)': {\n      color: 'fg.default',\n      fontWeight: 'medium',\n      _first: {\n        fontStyle: 'italic',\n        _before: {\n          content: 'open-quote',\n        },\n        _after: {\n          content: 'close-quote',\n        },\n      },\n    },\n    '& :where(h1 + *)': {\n      marginTop: '0!',\n    },\n    '& :where(h2 + *)': {\n      marginTop: '0!',\n    },\n    '& :where(h3 + *)': {\n      marginTop: '0!',\n    },\n    '& :where(hr + *)': {\n      marginTop: '0!',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n  variants: {\n    size: {\n      sm: {\n        '& :where(h1)': {\n          fontSize: '3xl',\n          lineHeight: '2.25rem',\n          mb: '6',\n        },\n        '& :where(h2)': {\n          fontSize: 'xl',\n          lineHeight: '1.75rem',\n          mb: '4',\n          mt: '8',\n        },\n        '& :where(h3)': {\n          fontSize: 'lg',\n          lineHeight: '1.75rem',\n          mb: '2',\n          mt: '7',\n        },\n        '& :where(p)': {\n          fontSize: 'sm',\n          lineHeight: '1.5rem',\n          my: '4',\n        },\n        '& :where(hr)': {\n          my: '10',\n        },\n        '& :where(ul)': {\n          ps: '5',\n        },\n        '& :where(li)': {\n          fontSize: 'sm',\n          lineHeight: '1.5rem',\n          my: '1',\n        },\n        '& :where(code)': {\n          height: '5',\n          px: '0.5',\n          textStyle: 'xs',\n        },\n        '& :where(pre)': {\n          my: '5',\n          px: '3',\n          py: '2',\n        },\n        '& :where(blockquote)': {\n          my: '4',\n          ps: '4',\n        },\n        '& :where(h1 + p)': {\n          color: 'fg.emphasized',\n          fontSize: 'lg',\n          lineHeight: '1.75rem',\n          mb: '4',\n        },\n      },\n      md: {\n        '& :where(h1)': {\n          fontSize: '4xl',\n          letterSpacing: '-0.02em',\n          lineHeight: '2.5rem',\n          mb: '8',\n        },\n        '& :where(h2)': {\n          fontSize: '2xl',\n          lineHeight: '2rem',\n          mb: '6',\n          mt: '12',\n        },\n        '& :where(h3)': {\n          fontSize: 'xl',\n          lineHeight: '2rem',\n          mt: '8',\n          mb: '3',\n        },\n        '& :where(p)': {\n          fontSize: 'md',\n          lineHeight: 'relaxed',\n          my: '5',\n        },\n        '& :where(hr)': {\n          my: '12',\n        },\n        '& :where(ul)': {\n          ps: '6',\n        },\n        '& :where(li)': {\n          fontSize: 'md',\n          lineHeight: 'relaxed',\n          my: '2',\n        },\n        '& :where(code)': {\n          fontSize: 'sm',\n          height: '6',\n          px: '1',\n        },\n        '& :where(pre)': {\n          my: '6',\n          px: '4',\n          py: '3',\n        },\n        '& :where(blockquote)': {\n          my: '5',\n          ps: '4',\n        },\n        '& :where(h1 + p)': {\n          color: 'fg.emphasized',\n          fontSize: 'xl',\n          lineHeight: '2rem',\n          mb: '6',\n        },\n      },\n      lg: {\n        '& :where(h1)': {\n          fontSize: '5xl',\n          letterSpacing: '-0.02em',\n          lineHeight: '3rem',\n          mb: '10',\n        },\n        '& :where(h2)': {\n          fontSize: '3xl',\n          lineHeight: '2.5rem',\n          mb: '8',\n          mt: '14',\n        },\n        '& :where(h3)': {\n          fontSize: '2xl',\n          lineHeight: '2.25rem',\n          mb: '4',\n          mt: '10',\n        },\n        '& :where(p)': {\n          fontSize: 'lg',\n          lineHeight: '2rem',\n          my: '6',\n        },\n        '& :where(hr)': {\n          my: '14',\n        },\n        '& :where(ul)': {\n          ps: '7',\n        },\n        '& :where(li)': {\n          fontSize: 'lg',\n          lineHeight: '2rem',\n          my: '3',\n        },\n        '& :where(code)': {\n          height: '7',\n          px: '1.5',\n          textStyle: 'md',\n        },\n        '& :where(pre)': {\n          my: '8',\n          px: '6',\n          py: '4',\n        },\n        '& :where(blockquote)': {\n          my: '6',\n          ps: '4.5',\n        },\n        '& :where(h1 + p)': {\n          color: 'fg.emphasized',\n          fontSize: '2xl',\n          lineHeight: '2rem',\n          mb: '6',\n        },\n      },\n    },\n  },\n})\n","import { avatarAnatomy } from '@ark-ui/react'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const avatar = defineSlotRecipe({\n  className: 'avatar',\n  description: 'An avatar style',\n  slots: avatarAnatomy.keys(),\n  base: {\n    root: {\n      borderRadius: 'full',\n      borderWidth: '1px',\n      flexShrink: 0,\n    },\n    fallback: {\n      alignItems: 'center',\n      background: 'bg.subtle',\n      borderWidth: '1px',\n      display: 'flex',\n      fontWeight: 'semibold',\n      height: 'inherit',\n      justifyContent: 'center',\n    },\n    image: {\n      objectFit: 'cover',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n  variants: {\n    size: {\n      xs: {\n        root: {\n          height: '8',\n          width: '8',\n        },\n        fallback: {\n          textStyle: 'xs',\n        },\n      },\n      sm: {\n        root: {\n          height: '9',\n          width: '9',\n        },\n        fallback: {\n          textStyle: 'sm',\n        },\n      },\n      md: {\n        root: {\n          height: '10',\n          width: '10',\n        },\n        fallback: {\n          textStyle: 'md',\n        },\n      },\n      lg: {\n        root: {\n          height: '11',\n          width: '11',\n        },\n        fallback: {\n          textStyle: 'lg',\n        },\n      },\n      xl: {\n        root: {\n          height: '12',\n          width: '12',\n        },\n        fallback: {\n          textStyle: 'xl',\n        },\n      },\n      '2xl': {\n        root: {\n          height: '16',\n          width: '16',\n        },\n        fallback: {\n          textStyle: '2xl',\n        },\n      },\n    },\n  },\n})\n","import { defineRecipe } from '@pandacss/dev'\n\nexport const badge = defineRecipe({\n  className: 'badge',\n  description: 'A badge style',\n  base: {\n    borderRadius: 'full',\n    fontWeight: 'medium',\n    display: 'inline-flex',\n    alignItems: 'center',\n    userSelect: 'none',\n    whiteSpace: 'nowrap',\n  },\n  defaultVariants: {\n    variant: 'subtle',\n    size: 'md',\n  },\n  variants: {\n    variant: {\n      solid: {\n        background: 'accent.default',\n        color: 'accent.fg',\n      },\n      subtle: {\n        background: 'bg.subtle',\n        borderColor: 'border.default',\n        borderWidth: '1px',\n        color: 'fg.emphasized',\n      },\n      outline: {\n        borderWidth: '2px',\n        borderColor: 'border.emphasized',\n      },\n    },\n    size: {\n      sm: { textStyle: 'xs', px: '2', h: '5', gap: '1' },\n      md: { textStyle: 'sm', px: '2.5', h: '6', gap: '1.5' },\n      lg: { textStyle: 'sm', px: '3', h: '7', gap: '1.5' },\n    },\n  },\n})\n","import { defineRecipe } from '@pandacss/dev'\n\nexport const button = defineRecipe({\n  className: 'button',\n  description: 'A button style',\n  base: {\n    alignItems: 'center',\n    appearance: 'none',\n    borderRadius: 'l2',\n    cursor: 'pointer',\n    display: 'inline-flex',\n    fontWeight: 'semibold',\n    justifyContent: 'center',\n    outline: 'none',\n    position: 'relative',\n    transitionDuration: 'normal',\n    transitionProperty: 'background, border-color, color, box-shadow',\n    transitionTimingFunction: 'default',\n    userSelect: 'none',\n    verticalAlign: 'middle',\n    whiteSpace: 'nowrap',\n  },\n  defaultVariants: {\n    variant: 'primary',\n    size: 'md',\n  },\n  variants: {\n    variant: {\n      primary: {\n        background: 'accent.default',\n        color: 'accent.fg',\n        _hover: {\n          background: 'accent.emphasized',\n        },\n        _focusVisible: {\n          outlineOffset: '2px',\n          outline: '2px solid',\n          outlineColor: 'border.accent',\n        },\n        _disabled: {\n          background: 'bg.disabled',\n          cursor: 'not-allowed',\n          _hover: {\n            background: 'bg.disabled',\n          },\n        },\n      },\n      secondary: {\n        borderWidth: '1px',\n        borderColor: 'border.emphasized',\n        background: 'bg.default',\n        color: 'fg.emphasized',\n        _hover: {\n          color: 'fg.default',\n          background: 'bg.subtle',\n        },\n        _selected: {\n          background: 'accent.default',\n          borderColor: 'border.accent',\n          color: 'accent.fg',\n          _hover: {\n            color: 'accent.fg',\n            background: 'accent.default',\n            borderColor: 'border.accent',\n          },\n        },\n        _disabled: {\n          borderColor: 'border.disabled',\n          color: 'fg.disabled',\n          cursor: 'not-allowed',\n          _hover: {\n            background: 'transparent',\n            borderColor: 'border.disabled',\n            color: 'fg.disabled',\n          },\n        },\n        _focusVisible: {\n          outlineOffset: '2px',\n          outline: '2px solid',\n          outlineColor: 'border.outline',\n        },\n      },\n      tertiary: {\n        color: 'fg.emphasized',\n        _hover: {\n          color: 'fg.default',\n          background: 'bg.subtle',\n        },\n        _disabled: {\n          color: 'fg.disabled',\n          cursor: 'not-allowed',\n          _hover: {\n            background: 'transparent',\n            color: 'fg.disabled',\n          },\n        },\n        _focusVisible: {\n          outline: '2px solid',\n          outlineColor: 'border.outline',\n        },\n        _selected: {\n          background: 'accent.default',\n          color: 'accent.fg',\n          _hover: {\n            color: 'accent.fg',\n            background: 'accent.default',\n          },\n        },\n      },\n      link: {\n        color: 'fg.muted',\n        _hover: {\n          color: 'fg.default',\n        },\n        _disabled: {\n          color: 'fg.disabled',\n          cursor: 'not-allowed',\n          _hover: {\n            color: 'fg.disabled',\n          },\n        },\n        height: 'auto!',\n        px: '0!',\n        minW: '0!',\n      },\n    },\n    size: {\n      xs: {\n        h: '8',\n        minW: '8',\n        textStyle: 'xs',\n        px: '3',\n        gap: '2',\n        '& svg': {\n          fontSize: 'md',\n          width: '4',\n          height: '4',\n        },\n      },\n      sm: {\n        h: '9',\n        minW: '9',\n        textStyle: 'sm',\n        px: '3.5',\n        gap: '2',\n        '& svg': {\n          width: '4.5',\n          height: '4.5',\n        },\n      },\n      md: {\n        h: '10',\n        minW: '10',\n        textStyle: 'sm',\n        px: '4',\n        gap: '2',\n        '& svg': {\n          fontSize: 'xl',\n          width: '5',\n          height: '5',\n        },\n      },\n      lg: {\n        h: '11',\n        minW: '11',\n        textStyle: 'md',\n        px: '4.5',\n        gap: '2',\n        '& svg': {\n          width: '5',\n          height: '5',\n        },\n      },\n      xl: {\n        h: '12',\n        minW: '12',\n        textStyle: 'md',\n        px: '5',\n        gap: '2.5',\n        '& svg': {\n          width: '5',\n          height: '5',\n        },\n      },\n      '2xl': {\n        h: '16',\n        minW: '16',\n        textStyle: 'lg',\n        px: '7',\n        gap: '3',\n        '& svg': {\n          width: '6',\n          height: '6',\n        },\n      },\n    },\n  },\n})\n","import { carouselAnatomy } from '@ark-ui/react'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const carousel = defineSlotRecipe({\n  className: 'carousel',\n  description: 'A carousel style',\n  slots: carouselAnatomy.keys(),\n  base: {\n    viewport: {\n      overflowX: 'hidden',\n      position: 'relative',\n      borderRadius: 'l2',\n    },\n    control: {\n      alignItems: 'center',\n      background: 'bg.default',\n      borderRadius: 'l2',\n      bottom: '4',\n      display: 'flex',\n      left: '50%',\n      opacity: '0.9',\n      position: 'absolute',\n      transform: 'translateX(-50%)',\n      zIndex: 'docked',\n    },\n    indicatorGroup: {\n      display: 'flex',\n    },\n    indicator: {\n      borderRadius: 'full',\n      background: 'bg.emphasized',\n      cursor: 'pointer',\n      _current: {\n        background: 'accent.default',\n      },\n      _focusVisible: {\n        outlineOffset: '2px',\n        outline: '2px solid',\n        outlineColor: 'border.outline',\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n  variants: {\n    size: {\n      sm: {\n        control: {\n          gap: '1',\n          p: '1',\n        },\n        indicatorGroup: {\n          gap: '2',\n        },\n        indicator: {\n          width: '2',\n          height: '2',\n        },\n      },\n      md: {\n        control: {\n          gap: '2',\n          p: '2.5',\n        },\n        indicatorGroup: {\n          gap: '3',\n        },\n        indicator: {\n          width: '2.5',\n          height: '2.5',\n        },\n      },\n    },\n  },\n})\n","import { checkboxAnatomy } from '@ark-ui/react'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const checkbox = defineSlotRecipe({\n  className: 'checkbox',\n  description: 'A checkbox style',\n  slots: checkboxAnatomy.keys(),\n  base: {\n    root: {\n      alignItems: 'center',\n      display: 'flex',\n    },\n    label: {\n      color: 'fg.emphasized',\n      fontWeight: 'medium',\n    },\n    control: {\n      alignItems: 'center',\n      borderColor: 'border.emphasized',\n      borderWidth: '1px',\n      color: 'accent.fg',\n      cursor: 'pointer',\n      display: 'flex',\n      justifyContent: 'center',\n      transitionDuration: 'normal',\n      transitionProperty: 'border-color, background',\n      transitionTimingFunction: 'default',\n      _hover: {\n        background: 'bg.subtle',\n      },\n      _checked: {\n        background: 'accent.default',\n        borderColor: 'border.accent',\n        _hover: {\n          background: 'accent.default',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n  variants: {\n    size: {\n      sm: {\n        root: {\n          gap: '2',\n        },\n        control: {\n          width: '4',\n          height: '4',\n          borderRadius: 'l1',\n          '& svg': {\n            width: '3',\n            height: '3',\n          },\n        },\n        label: {\n          textStyle: 'sm',\n        },\n      },\n      md: {\n        root: {\n          gap: '3',\n        },\n        control: {\n          width: '5',\n          height: '5',\n          borderRadius: 'l1',\n          '& svg': {\n            width: '3.5',\n            height: '3.5',\n          },\n        },\n        label: {\n          textStyle: 'md',\n        },\n      },\n      lg: {\n        root: {\n          gap: '4',\n        },\n        control: {\n          width: '6',\n          height: '6',\n          borderRadius: 'l1',\n          '& svg': {\n            width: '4',\n            height: '4',\n          },\n        },\n        label: {\n          textStyle: 'lg',\n        },\n      },\n    },\n  },\n})\n","import { defineRecipe } from '@pandacss/dev'\n\nexport const code = defineRecipe({\n  className: 'code',\n  description: 'An code style',\n  base: {\n    alignItems: 'center',\n    bg: 'bg.subtle',\n    borderRadius: 'l2',\n    borderWidth: '1px',\n    color: 'fg.default',\n    display: 'inline-flex',\n    fontFamily: 'var(--font-code)',\n    fontWeight: 'medium',\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n  variants: {\n    size: {\n      sm: {\n        height: '5',\n        px: '0.5',\n        textStyle: 'xs',\n      },\n      md: {\n        height: '6',\n        px: '1',\n        textStyle: 'sm',\n      },\n      lg: {\n        height: '7',\n        px: '1.5',\n        textStyle: 'md',\n      },\n    },\n  },\n})\n","import { colorPickerAnatomy } from '@ark-ui/react'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const colorPicker = defineSlotRecipe({\n  className: 'colorPicker',\n  description: 'A color picker style',\n  slots: colorPickerAnatomy.keys(),\n  base: {\n    content: {\n      borderRadius: 'l3',\n      borderWidth: '1px',\n      boxShadow: 'lg',\n      padding: '4',\n      maxW: '264px',\n    },\n    area: {\n      height: '36',\n      borderRadius: 'l2',\n      overflow: 'hidden',\n    },\n    areaGradient: {\n      height: '100%',\n    },\n    channelSliderTrack: {\n      height: '2',\n      borderRadius: 'full',\n    },\n    channelSliderTrackBackground: {\n      overflow: 'hidden',\n      borderRadius: 'full',\n    },\n    swatchGroup: {\n      display: 'grid',\n      gridTemplateColumns: 'repeat(7, 1fr)',\n      gap: '2',\n      background: 'bg.default',\n    },\n    swatch: {\n      height: '6',\n      width: '6',\n      borderRadius: 'full',\n      boxShadow:\n        '0 0 0 1px var(--colors-border-emphasized), 0 0 0 2px var(--colors-bg-default) inset',\n    },\n    areaThumb: {\n      borderRadius: 'full',\n      height: '2.5',\n      width: '2.5',\n      boxShadow: 'white 0px 0px 0px 2px, black 0px 0px 2px 1px',\n      outline: 'none',\n    },\n    channelSliderThumb: {\n      borderRadius: 'full',\n      height: '2.5',\n      width: '2.5',\n      boxShadow: 'white 0px 0px 0px 2px, black 0px 0px 2px 1px',\n      transform: 'translate(-50%, -50%)',\n      zIndex: '1',\n      outline: 'none',\n    },\n  },\n})\n","import { comboboxAnatomy } from '@ark-ui/react'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const combobox = defineSlotRecipe({\n  className: 'combobox',\n  description: 'A combobox style',\n  slots: comboboxAnatomy.keys(),\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '1.5',\n    },\n    control: {\n      position: 'relative',\n    },\n    trigger: {\n      position: 'absolute!',\n      right: '0',\n      bottom: '0',\n      top: '0',\n    },\n    content: {\n      background: 'bg.default',\n      borderRadius: 'l2',\n      borderWidth: '1px',\n      boxShadow: 'lg',\n      display: 'flex',\n      flexDirection: 'column',\n      _hidden: {\n        display: 'none',\n      },\n      _open: {\n        animation: 'fadeIn 0.25s ease-out',\n      },\n      _closed: {\n        animation: 'fadeOut 0.2s ease-out',\n      },\n      _focusVisible: {\n        outlineOffset: '2px',\n        outline: '2px solid',\n        outlineColor: 'border.outline',\n      },\n    },\n    option: {\n      alignItems: 'center',\n      borderRadius: 'l1',\n      cursor: 'pointer',\n      display: 'flex',\n      fontWeight: 'medium',\n      transitionDuration: 'fast',\n      transitionProperty: 'background, color',\n      transitionTimingFunction: 'default',\n      _hover: {\n        background: 'bg.subtle',\n      },\n      _highlighted: {\n        background: 'bg.subtle',\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n  variants: {\n    size: {\n      sm: {\n        content: { p: '0.5', gap: '1' },\n        option: { textStyle: 'sm', px: '2', height: '9' },\n      },\n      md: {\n        content: { p: '1', gap: '1' },\n        option: { textStyle: 'sm', px: '2', height: '10' },\n        trigger: { right: '4' },\n      },\n      lg: {\n        content: { p: '1.5', gap: '1' },\n        option: { textStyle: 'md', px: '2', height: '11' },\n      },\n    },\n  },\n})\n","import { datePickerAnatomy } from '@ark-ui/react'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const datePicker = defineSlotRecipe({\n  className: 'datePicker',\n  description: 'A date picker style',\n  slots: [...datePickerAnatomy.keys()],\n  base: {\n    cellTrigger: {\n      _today: {\n        _before: {\n          content: \"'−'\",\n          color: 'accent.default',\n          position: 'absolute',\n          marginTop: '6',\n        },\n      },\n      '&[data-in-range]': {\n        background: 'bg.subtle',\n      },\n      _selected: {\n        _before: {\n          color: 'accent.fg',\n        },\n      },\n    },\n    content: {\n      background: 'bg.default',\n      borderRadius: 'l3',\n      borderWidth: '1px',\n      p: '4',\n      width: 'fit-content',\n    },\n    grid: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '1',\n      '&[data-type=\"day\"] [data-part=\"row\"]': {\n        gridTemplateColumns: 'repeat(7, 1fr)',\n      },\n      '&[data-type=\"month\"] [data-part=\"row\"]': {\n        gridTemplateColumns: 'repeat(4, 1fr)',\n      },\n      '&[data-type=\"year\"] [data-part=\"row\"]': {\n        gridTemplateColumns: 'repeat(4, 1fr)',\n      },\n    },\n    rowGroup: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '1',\n    },\n    row: {\n      display: 'grid',\n    },\n    rowHeader: {\n      display: 'grid',\n      gridTemplateColumns: 'repeat(7, 1fr)',\n    },\n    columnHeader: {\n      alignItems: 'center',\n      color: 'fg.subtle',\n      display: 'inline-flex',\n      fontWeight: 'semibold',\n      height: '10',\n      justifyContent: 'center',\n      textStyle: 'sm',\n      width: '10',\n    },\n  },\n})\n","import { dialogAnatomy } from '@ark-ui/react'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const dialog = defineSlotRecipe({\n  className: 'dialog',\n  description: 'A dialog style',\n  slots: dialogAnatomy.keys(),\n  base: {\n    backdrop: {\n      backdropFilter: 'blur(4px)',\n      background: {\n        // TODO: replace when supported in Panda: bg.canvas/80\n        base: 'rgba(250, 250, 250, 0.8)',\n        _dark: 'rgba(10, 10, 10, 0.8)',\n      },\n      inset: '0',\n      position: 'fixed',\n      zIndex: 'overlay',\n      _open: {\n        animation: 'backdrop-in',\n      },\n      _closed: {\n        animation: 'backdrop-out',\n      },\n    },\n    container: {\n      alignItems: 'center',\n      display: 'flex',\n      inset: '0',\n      justifyContent: 'center',\n      position: 'fixed',\n      zIndex: 'modal',\n    },\n    content: {\n      background: 'bg.default',\n      borderRadius: 'l3',\n      borderWidth: '1px',\n      boxShadow: 'lg',\n      minW: 'sm',\n      position: 'relative',\n      _open: {\n        animation: 'dialog-in',\n      },\n      _closed: {\n        animation: 'dialog-out',\n      },\n    },\n    title: {\n      fontWeight: 'semibold',\n      textStyle: 'lg',\n    },\n    description: {\n      color: 'fg.muted',\n      textStyle: 'sm',\n    },\n  },\n})\n","import { dialogAnatomy } from '@ark-ui/react'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const drawer = defineSlotRecipe({\n  className: 'drawer',\n  description: 'A drawer style',\n  slots: dialogAnatomy.keys(),\n  base: {\n    backdrop: {\n      backdropFilter: 'blur(4px)',\n      background: {\n        // TODO: replace when supported in Panda: bg.canvas/80\n        base: 'rgba(250, 250, 250, 0.8)',\n        _dark: 'rgba(10, 10, 10, 0.8)',\n      },\n      inset: '0',\n      position: 'fixed',\n      zIndex: 'overlay',\n      _open: {\n        animation: 'backdrop-in',\n      },\n      _closed: {\n        animation: 'backdrop-out',\n      },\n    },\n    container: {\n      alignItems: 'center',\n      display: 'flex',\n      top: 0,\n      bottom: 0,\n      justifyContent: 'center',\n      position: 'fixed',\n      zIndex: 'modal',\n    },\n    content: {\n      background: 'bg.default',\n      boxShadow: 'lg',\n      height: 'full',\n      width: { base: 'xs', sm: 'sm' },\n      overflowY: 'auto',\n      position: 'relative',\n      px: {\n        base: '4',\n        md: '6',\n      },\n      py: '6',\n    },\n    title: {\n      fontWeight: 'semibold',\n      textStyle: 'xl',\n    },\n    description: {\n      color: 'fg.muted',\n      textStyle: 'sm',\n    },\n  },\n  defaultVariants: {\n    placement: 'right',\n  },\n  variants: {\n    placement: {\n      left: {\n        container: {\n          left: 0,\n        },\n        content: {\n          borderRightWidth: '1px',\n          _open: {\n            animation: 'drawer-in-left',\n          },\n          _closed: {\n            animation: 'drawer-out-left',\n          },\n        },\n      },\n      right: {\n        container: {\n          right: 0,\n        },\n        content: {\n          borderLeftWidth: '1px',\n          _open: {\n            animation: 'drawer-in-right',\n          },\n          _closed: {\n            animation: 'drawer-out-right',\n          },\n        },\n      },\n    },\n  },\n})\n","import { editableAnatomy } from '@ark-ui/react'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const editable = defineSlotRecipe({\n  className: 'editable',\n  description: 'An editable style',\n  slots: editableAnatomy.keys(),\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '1.5',\n      width: '100%',\n    },\n    control: {\n      display: 'flex',\n      gap: '2',\n    },\n  },\n})\n","import { hoverCardAnatomy } from '@ark-ui/react'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const hoverCard = defineSlotRecipe({\n  className: 'hoverCard',\n  description: 'A hover card style',\n  slots: hoverCardAnatomy.keys(),\n  base: {\n    content: {\n      '--hover-card-background': 'colors.bg.default',\n      background: 'var(--hover-card-background)',\n      borderRadius: 'l3',\n      borderWidth: '1px',\n      boxShadow: 'lg',\n      maxW: '80',\n      p: '4',\n      position: 'relative',\n      _open: {\n        animation: 'fadeIn 0.25s ease-out',\n      },\n      _closed: {\n        animation: 'fadeOut 0.2s ease-out',\n      },\n    },\n    arrow: {\n      '--arrow-size': '12px',\n      '--arrow-background': 'var(--hover-card-background)',\n    },\n    arrowTip: {\n      borderTopWidth: '1px',\n      borderLeftWidth: '1px',\n    },\n  },\n})\n","import { defineRecipe } from '@pandacss/dev'\n\nexport const input = defineRecipe({\n  className: 'input',\n  description: 'An input style',\n  base: {\n    appearance: 'none',\n    backgroundColor: 'bg.default',\n    borderColor: 'border.emphasized',\n    borderRadius: 'l2',\n    borderWidth: '1px',\n    outline: 0,\n    position: 'relative',\n    transitionDuration: 'normal',\n    transitionProperty: 'box-shadow, border-color',\n    transitionTimingFunction: 'default',\n    width: 'full',\n    _disabled: {\n      opacity: 0.4,\n      cursor: 'not-allowed',\n    },\n    _focus: {\n      borderColor: 'border.accent',\n      boxShadow: 'accent',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n  variants: {\n    size: {\n      '2xs': { px: '1.5', h: '7', minW: '7', fontSize: 'xs' },\n      xs: { px: '2', h: '8', minW: '8', fontSize: 'xs' },\n      sm: { px: '2.5', h: '9', minW: '9', fontSize: 'sm' },\n      md: { px: '3', h: '10', minW: '10', fontSize: 'md' },\n      lg: { px: '3.5', h: '11', minW: '11', fontSize: 'md' },\n      xl: { px: '4', h: '12', minW: '12', fontSize: 'lg' },\n      '2xl': { px: '2', h: '16', minW: '16', textStyle: '3xl' },\n    },\n  },\n})\n","import { defineRecipe } from '@pandacss/dev'\n\nexport const label = defineRecipe({\n  className: 'label',\n  description: 'A label style',\n  base: {\n    color: 'fg.emphasized',\n    fontWeight: 'medium',\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n  variants: {\n    size: {\n      sm: {\n        textStyle: 'sm',\n      },\n      md: {\n        textStyle: 'sm',\n      },\n      lg: {\n        textStyle: 'sm',\n      },\n      xl: {\n        textStyle: 'md',\n      },\n    },\n  },\n})\n","import { defineRecipe } from '@pandacss/dev'\n\nexport const link = defineRecipe({\n  className: 'link',\n  description: 'A link style',\n  base: {\n    color: 'fg.subtle',\n    cursor: 'pointer',\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '2',\n    transitionDuration: 'normal',\n    transitionProperty: 'color, font-weight',\n    transitionTimingFunction: 'default',\n  },\n  defaultVariants: {\n    variant: 'text',\n  },\n  variants: {\n    variant: {\n      text: {\n        fontWeight: 'medium',\n        color: 'fg.default',\n        textDecoration: 'underline',\n      },\n      toc: {\n        fontWeight: 'medium',\n        textStyle: 'sm',\n        _hover: {\n          color: 'fg.muted',\n        },\n        _currentPage: {\n          fontWeight: 'semibold',\n          color: 'fg.emphasized',\n          _hover: {\n            color: 'fg.emphasized',\n          },\n        },\n      },\n      navbar: {\n        fontWeight: 'semibold',\n        textStyle: 'md',\n        _hover: {\n          color: 'fg.muted',\n        },\n        _currentPage: {\n          color: 'fg.emphasized',\n          _hover: {\n            color: 'fg.emphasized',\n          },\n        },\n      },\n    },\n  },\n})\n","import { menuAnatomy } from '@ark-ui/react'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nconst itemStyle = {\n  alignItems: 'center',\n  borderRadius: 'l1',\n  color: 'fg.emphasized',\n  cursor: 'pointer',\n  display: 'flex',\n  fontWeight: 'medium',\n  textStyle: 'sm',\n  transitionDuration: 'fast',\n  transitionProperty: 'background, color',\n  transitionTimingFunction: 'default',\n  _hover: {\n    color: 'fg.default',\n    background: 'bg.subtle',\n  },\n  _highlighted: {\n    color: 'fg.default',\n    background: 'bg.subtle',\n  },\n} as const\n\nexport const menu = defineSlotRecipe({\n  className: 'menu',\n  description: 'A menu style',\n  slots: menuAnatomy.keys(),\n  base: {\n    itemGroupLabel: {\n      fontWeight: 'semibold',\n      textStyle: 'sm',\n    },\n    content: {\n      background: 'bg.default',\n      borderRadius: 'l2',\n      borderWidth: '1px',\n      boxShadow: 'lg',\n      _hidden: {\n        display: 'none',\n      },\n      display: 'flex',\n      flexDirection: 'column',\n      outline: 'none',\n    },\n    itemGroup: {\n      display: 'flex',\n      flexDirection: 'column',\n    },\n    item: itemStyle,\n    optionItem: itemStyle,\n    triggerItem: itemStyle,\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n  variants: {\n    size: {\n      xs: {\n        itemGroup: {\n          gap: '1',\n        },\n        itemGroupLabel: {\n          py: '1.5',\n          px: '1.5',\n          mx: '1',\n        },\n        content: {\n          py: '1',\n          gap: '1',\n          minW: '24',\n        },\n        item: {\n          h: '8',\n          px: '1.5',\n          mx: '1',\n        },\n        optionItem: {\n          h: '8',\n          px: '1.5',\n          mx: '1',\n        },\n        triggerItem: {\n          h: '8',\n          px: '1.5',\n          mx: '1.5',\n        },\n      },\n      sm: {\n        itemGroup: {\n          gap: '1',\n        },\n        itemGroupLabel: {\n          py: '2',\n          px: '2',\n          mx: '1',\n        },\n        content: {\n          py: '1',\n          gap: '1',\n          minW: '32',\n        },\n        item: {\n          h: '9',\n          px: '2',\n          mx: '1',\n        },\n        optionItem: {\n          h: '9',\n          px: '2',\n          mx: '1',\n        },\n        triggerItem: {\n          h: '9',\n          px: '2',\n          mx: '1.5',\n        },\n      },\n      md: {\n        itemGroup: {\n          gap: '1',\n        },\n        itemGroupLabel: {\n          py: '2.5',\n          px: '2.5',\n          mx: '1',\n        },\n        content: {\n          py: '1',\n          gap: '1',\n          minW: '44',\n        },\n        item: {\n          h: '10',\n          px: '2.5',\n          mx: '1',\n        },\n        optionItem: {\n          h: '10',\n          px: '2.5',\n          mx: '1',\n        },\n        triggerItem: {\n          h: '10',\n          px: '2.5',\n          mx: '1.5',\n        },\n      },\n    },\n  },\n})\n","import { numberInputAnatomy } from '@ark-ui/react'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const numberInput = defineSlotRecipe({\n  className: 'numberInput',\n  description: 'A number input style',\n  slots: numberInputAnatomy.keys(),\n  base: {\n    root: {\n      borderColor: 'border.emphasized',\n      borderRadius: 'l2',\n      borderWidth: '1px',\n      display: 'flex',\n      overflow: 'hidden',\n      width: 'full',\n      transitionDuration: 'normal',\n      transitionProperty: 'border-color, box-shadow',\n      transitionTimingFunction: 'default',\n      _focusWithin: {\n        borderColor: 'border.accent',\n        boxShadow: 'accent',\n      },\n    },\n    control: {\n      borderLeftWidth: '1px',\n      borderColor: 'border.emphasized',\n      display: 'flex',\n      flexDirection: 'column',\n    },\n    input: {\n      outline: 'none',\n      background: 'transparent',\n      width: 'full',\n    },\n    decrementTrigger: {\n      borderRadius: '0',\n    },\n    incrementTrigger: {\n      borderRadius: '0',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n  variants: {\n    size: {\n      md: {\n        root: {\n          ps: '3',\n          h: '10',\n          minW: '10',\n          fontSize: 'md',\n        },\n      },\n      lg: {\n        root: {\n          ps: '3.5',\n          h: '11',\n          minW: '11',\n          fontSize: 'md',\n        },\n      },\n      xl: {\n        root: {\n          ps: '4',\n          h: '12',\n          minW: '12',\n          fontSize: 'lg',\n        },\n      },\n    },\n  },\n})\n","import { paginationAnatomy } from '@ark-ui/react'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const pagination = defineSlotRecipe({\n  className: 'pagination',\n  description: 'A pagination style',\n  slots: paginationAnatomy.keys(),\n  base: {\n    root: {\n      display: 'flex',\n      justifyContent: 'space-between',\n      gap: '4',\n    },\n    list: {\n      display: 'flex',\n      gap: '2',\n    },\n    pageTrigger: {\n      fontVariantNumeric: 'tabular-nums',\n    },\n    ellipsis: {\n      alignItems: 'center',\n      color: 'fg.emphasized',\n      display: 'inline-flex',\n      fontWeight: 'semibold',\n      px: '2',\n    },\n  },\n})\n","import { pinInputAnatomy } from '@ark-ui/react'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const pinInput = defineSlotRecipe({\n  className: 'pinInput',\n  description: 'An pin input style',\n  slots: pinInputAnatomy.keys(),\n  base: {\n    control: {\n      display: 'flex',\n      gap: '2',\n    },\n  },\n})\n","import { popoverAnatomy } from '@ark-ui/react'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const popover = defineSlotRecipe({\n  className: 'popover',\n  description: 'A popover style',\n  slots: popoverAnatomy.keys(),\n  base: {\n    positioner: {\n      position: 'relative',\n      zIndex: 'popover',\n    },\n    content: {\n      background: 'bg.default',\n      borderRadius: 'l3',\n      borderWidth: '1px',\n      boxShadow: 'lg',\n      maxWidth: 'sm',\n      zIndex: '1',\n      p: '4',\n      _open: {\n        animation: 'fadeIn 0.25s ease-out',\n      },\n      _closed: {\n        animation: 'fadeOut 0.2s ease-out',\n      },\n    },\n    title: {\n      fontWeight: 'medium',\n      textStyle: 'sm',\n    },\n    description: {\n      color: 'fg.muted',\n      textStyle: 'sm',\n    },\n    closeTrigger: {\n      color: 'fg.muted',\n    },\n    arrow: {\n      '--arrow-size': 'var(--sizes-3)',\n      '--arrow-background': 'var(--colors-bg-default)',\n    },\n    arrowTip: {\n      borderTopWidth: '1px',\n      borderLeftWidth: '1px',\n    },\n  },\n})\n","import { radioGroupAnatomy } from '@ark-ui/react'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const radioButtonGroup = defineSlotRecipe({\n  className: 'radioButtonGroup',\n  description: 'A radio button group style',\n  slots: radioGroupAnatomy.keys(),\n  base: {\n    root: {\n      display: 'flex',\n      flexWrap: 'wrap',\n    },\n    radio: {\n      alignItems: 'center',\n      appearance: 'none',\n      borderColor: 'border.emphasized',\n      borderRadius: 'l2',\n      borderWidth: '1px',\n      color: 'fg.emphasized',\n      cursor: 'pointer',\n      display: 'inline-flex',\n      fontWeight: 'semibold',\n      justifyContent: 'center',\n      outline: 'none',\n      position: 'relative',\n      transitionDuration: 'normal',\n      transitionProperty: 'background, border-color, color',\n      transitionTimingFunction: 'default',\n      userSelect: 'none',\n      verticalAlign: 'middle',\n      whiteSpace: 'nowrap',\n      _hover: {\n        color: 'fg.default',\n        background: 'bg.subtle',\n      },\n      _checked: {\n        cursor: 'default',\n        color: 'accent.fg',\n        borderColor: 'border.accent',\n        background: 'accent.default',\n        _hover: {\n          color: 'accent.fg',\n          background: 'accent.default',\n        },\n      },\n      _disabled: {\n        borderColor: 'border.disabled',\n        color: 'fg.disabled',\n        cursor: 'not-allowed',\n        backgroundImage:\n          'linear-gradient(315deg, transparent 49%, var(--colors-border-disabled) 49%, var(--colors-border-disabled) 51%, transparent 51%)',\n        _hover: {\n          background: 'transparent',\n          backgroundImage:\n            'linear-gradient(315deg, transparent 49%, var(--colors-border-disabled) 49%, var(--colors-border-disabled) 51%, transparent 51%)',\n          borderColor: 'border.disabled',\n          color: 'fg.disabled',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n  variants: {\n    size: {\n      sm: {\n        root: {\n          gap: '2',\n        },\n        radio: {\n          h: '9',\n          w: '9',\n          textStyle: 'sm',\n          '& svg': {\n            fontSize: 'xl',\n          },\n        },\n      },\n      md: {\n        root: {\n          gap: '3',\n        },\n        radio: {\n          h: '10',\n          w: '10',\n          textStyle: 'sm',\n          '& svg': {\n            fontSize: 'xl',\n          },\n        },\n      },\n      lg: {\n        root: {\n          gap: '3',\n        },\n        radio: {\n          h: '11',\n          w: '11',\n          textStyle: 'md',\n          '& svg': {\n            fontSize: 'xl',\n          },\n        },\n      },\n      xl: {\n        root: {\n          gap: '3',\n        },\n        radio: {\n          h: '12',\n          w: '12',\n          textStyle: 'md',\n          '& svg': {\n            fontSize: 'xl',\n          },\n        },\n      },\n    },\n  },\n})\n","import { radioGroupAnatomy } from '@ark-ui/react'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const radioGroup = defineSlotRecipe({\n  className: 'radioGroup',\n  description: 'A radio group style',\n  slots: radioGroupAnatomy.keys(),\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: {\n        _vertical: 'column',\n        _horizontal: 'row',\n      },\n    },\n    radioControl: {\n      background: 'transparent',\n      borderColor: 'border.emphasized',\n      borderRadius: 'full',\n      borderWidth: '1px',\n      transitionDuration: 'normal',\n      transitionProperty: 'background',\n      transitionTimingFunction: 'default',\n      _hover: {\n        background: 'bg.subtle',\n      },\n      _checked: {\n        background: 'accent.default',\n        borderColor: 'border.accent',\n        outlineColor: 'bg.default',\n        outlineStyle: 'solid',\n        _hover: {\n          background: 'accent.default',\n        },\n      },\n    },\n    radio: {\n      alignItems: 'center',\n      cursor: 'pointer',\n      display: 'flex',\n    },\n    radioLabel: {\n      color: 'fg.emphasized',\n      fontWeight: 'medium',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n  variants: {\n    size: {\n      sm: {\n        root: {\n          gap: {\n            _vertical: '3',\n            _horizontal: '4',\n          },\n        },\n        radio: {\n          gap: '2',\n        },\n        radioControl: {\n          width: '4',\n          height: '4',\n          _checked: {\n            outlineWidth: '3px',\n            outlineOffset: '-4px',\n          },\n        },\n        radioLabel: {\n          textStyle: 'sm',\n        },\n      },\n      md: {\n        root: {\n          gap: {\n            _vertical: '4',\n            _horizontal: '6',\n          },\n        },\n        radio: {\n          gap: '3',\n        },\n        radioControl: {\n          width: '5',\n          height: '5',\n          _checked: {\n            outlineWidth: '4px',\n            outlineOffset: '-5px',\n          },\n        },\n        radioLabel: {\n          textStyle: 'md',\n        },\n      },\n      lg: {\n        root: {\n          gap: {\n            _vertical: '5',\n            _horizontal: '8',\n          },\n        },\n        radio: {\n          gap: '4',\n        },\n        radioControl: {\n          width: '6',\n          height: '6',\n          _checked: {\n            outlineWidth: '5px',\n            outlineOffset: '-6px',\n          },\n        },\n        radioLabel: {\n          textStyle: 'lg',\n        },\n      },\n    },\n  },\n})\n","import { rangeSliderAnatomy } from '@ark-ui/react'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const rangeSlider = defineSlotRecipe({\n  className: 'range-slider',\n  description: 'A range slider style',\n  slots: rangeSliderAnatomy.keys(),\n  base: {\n    root: {\n      width: 'full',\n    },\n    control: {\n      position: 'relative',\n      display: 'flex',\n      alignItems: 'center',\n    },\n    track: {\n      backgroundColor: 'bg.muted',\n      borderRadius: 'l2',\n      flex: '1',\n    },\n    range: {\n      background: 'accent.default',\n      borderRadius: 'l2',\n    },\n    thumb: {\n