@park-ui/panda-preset/dist/index.cjs.map

Panda CSS Preset for Park UI

{"version":3,"sources":["../src/index.ts","../src/create-preset.ts","../src/colors/red.ts","../src/theme/breakpoints.ts","../src/theme/conditions.ts","../src/theme/global-css.ts","../src/theme/keyframes.ts","../src/theme/recipes/accordion.ts","../src/theme/recipes/alert.ts","../src/theme/recipes/avatar.ts","../src/theme/recipes/badge.ts","../src/theme/recipes/button.ts","../src/theme/recipes/card.ts","../src/theme/recipes/carousel.ts","../src/theme/recipes/checkbox.ts","../src/theme/recipes/clipboard.ts","../src/theme/recipes/code.ts","../src/theme/recipes/collapsible.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/field.ts","../src/theme/recipes/fieldset.ts","../src/theme/recipes/file-upload.ts","../src/theme/recipes/form-label.ts","../src/theme/recipes/hover-card.ts","../src/theme/recipes/icon.ts","../src/theme/recipes/input.ts","../src/theme/recipes/kbd.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/progress.ts","../src/theme/recipes/qr-code.ts","../src/theme/recipes/radio-button-group.ts","../src/theme/recipes/radio-group.ts","../src/theme/recipes/rating-group.ts","../src/theme/recipes/segment-group.ts","../src/theme/recipes/select.ts","../src/theme/recipes/signature-pad.ts","../src/theme/recipes/skeleton.ts","../src/theme/recipes/slider.ts","../src/theme/recipes/spinner.ts","../src/theme/recipes/splitter.ts","../src/theme/recipes/switch.ts","../src/theme/recipes/table.ts","../src/theme/recipes/tabs.ts","../src/theme/recipes/tags-input.ts","../src/theme/recipes/text.ts","../src/theme/recipes/textarea.ts","../src/theme/recipes/toast.ts","../src/theme/recipes/toggle-group.ts","../src/theme/recipes/tooltip.ts","../src/theme/recipes/tree-view.ts","../src/theme/recipes/index.ts","../src/theme/semantic-tokens/index.ts","../src/theme/semantic-tokens/colors.ts","../src/theme/semantic-tokens/shadows.ts","../src/theme/text-styles.ts","../src/theme/tokens/index.ts","../src/theme/tokens/animations.ts","../src/theme/tokens/blurs.ts","../src/theme/tokens/borders.ts","../src/theme/tokens/colors.ts","../src/theme/tokens/durations.ts","../src/theme/tokens/easings.ts","../src/theme/tokens/radii.ts","../src/theme/tokens/spacing.ts","../src/theme/tokens/sizes.ts","../src/theme/tokens/typography.ts","../src/theme/tokens/z-index.ts","../src/utils/create-radii.ts","../src/options.ts"],"sourcesContent":["export { createPreset } from './create-preset'\nexport {\n  accentColors,\n  grayColors,\n  radii,\n  type AccentColor,\n  type ColorPalette,\n  type GrayColor,\n  type Radius,\n} from './options'\n","import { type SemanticTokens, definePreset } from '@pandacss/dev'\nimport red from './colors/red'\nimport type { PresetOptions } from './options'\nimport { breakpoints } from './theme/breakpoints'\nimport { conditions } from './theme/conditions'\nimport { globalCss } from './theme/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'\nimport { createRadii } from './utils/create-radii'\n\nexport const createPreset = (options: PresetOptions) => {\n  const { accentColor, grayColor, radius } = options\n\n  const standardizeGrayTokens = (tokens: SemanticTokens['colors']) =>\n    JSON.parse(JSON.stringify(tokens).replace(new RegExp(grayColor.name, 'g'), 'gray'))\n\n  return definePreset({\n    name: '@park-ui/panda-preset',\n    presets: ['@pandacss/preset-base'],\n    conditions,\n    globalCss: {\n      ...globalCss,\n      html: {\n        colorPalette: accentColor.name,\n      },\n    },\n    theme: {\n      extend: {\n        breakpoints,\n        keyframes,\n        recipes,\n        slotRecipes,\n        textStyles,\n        tokens: {\n          ...tokens,\n          colors: {\n            ...tokens.colors,\n            red: red.tokens,\n            gray: grayColor.tokens ?? {},\n            [accentColor.name]: accentColor.tokens,\n          },\n        },\n        semanticTokens: {\n          ...semanticTokens,\n          colors: {\n            ...semanticTokens.colors,\n            red: red.semanticTokens,\n            gray: standardizeGrayTokens(grayColor.semanticTokens),\n            [accentColor.name]: accentColor.semanticTokens,\n          },\n          radii: createRadii(radius),\n        },\n      },\n    },\n  })\n}\n","import { defineSemanticTokens, defineTokens } from '@pandacss/dev'\n\nconst tokens = defineTokens.colors({\n  light: {\n    '1': { value: '#fffcfc' },\n    '2': { value: '#fff7f7' },\n    '3': { value: '#feebec' },\n    '4': { value: '#ffdbdc' },\n    '5': { value: '#ffcdce' },\n    '6': { value: '#fdbdbe' },\n    '7': { value: '#f4a9aa' },\n    '8': { value: '#eb8e90' },\n    '9': { value: '#e5484d' },\n    '10': { value: '#dc3e42' },\n    '11': { value: '#ce2c31' },\n    '12': { value: '#641723' },\n    a1: { value: '#ff000003' },\n    a2: { value: '#ff000008' },\n    a3: { value: '#f3000d14' },\n    a4: { value: '#ff000824' },\n    a5: { value: '#ff000632' },\n    a6: { value: '#f8000442' },\n    a7: { value: '#df000356' },\n    a8: { value: '#d2000571' },\n    a9: { value: '#db0007b7' },\n    a10: { value: '#d10005c1' },\n    a11: { value: '#c40006d3' },\n    a12: { value: '#55000de8' },\n  },\n  dark: {\n    '1': { value: '#191111' },\n    '2': { value: '#201314' },\n    '3': { value: '#3b1219' },\n    '4': { value: '#500f1c' },\n    '5': { value: '#611623' },\n    '6': { value: '#72232d' },\n    '7': { value: '#8c333a' },\n    '8': { value: '#b54548' },\n    '9': { value: '#e5484d' },\n    '10': { value: '#ec5d5e' },\n    '11': { value: '#ff9592' },\n    '12': { value: '#ffd1d9' },\n    a1: { value: '#f4121209' },\n    a2: { value: '#f22f3e11' },\n    a3: { value: '#ff173f2d' },\n    a4: { value: '#fe0a3b44' },\n    a5: { value: '#ff204756' },\n    a6: { value: '#ff3e5668' },\n    a7: { value: '#ff536184' },\n    a8: { value: '#ff5d61b0' },\n    a9: { value: '#fe4e54e4' },\n    a10: { value: '#ff6465eb' },\n    a11: { value: '#ff9592' },\n    a12: { value: '#ffd1d9' },\n  },\n})\nconst semanticTokens = defineSemanticTokens.colors({\n  '1': { value: { _light: '{colors.red.light.1}', _dark: '{colors.red.dark.1}' } },\n  '2': { value: { _light: '{colors.red.light.2}', _dark: '{colors.red.dark.2}' } },\n  '3': { value: { _light: '{colors.red.light.3}', _dark: '{colors.red.dark.3}' } },\n  '4': { value: { _light: '{colors.red.light.4}', _dark: '{colors.red.dark.4}' } },\n  '5': { value: { _light: '{colors.red.light.5}', _dark: '{colors.red.dark.5}' } },\n  '6': { value: { _light: '{colors.red.light.6}', _dark: '{colors.red.dark.6}' } },\n  '7': { value: { _light: '{colors.red.light.7}', _dark: '{colors.red.dark.7}' } },\n  '8': { value: { _light: '{colors.red.light.8}', _dark: '{colors.red.dark.8}' } },\n  '9': { value: { _light: '{colors.red.light.9}', _dark: '{colors.red.dark.9}' } },\n  '10': { value: { _light: '{colors.red.light.10}', _dark: '{colors.red.dark.10}' } },\n  '11': { value: { _light: '{colors.red.light.11}', _dark: '{colors.red.dark.11}' } },\n  '12': { value: { _light: '{colors.red.light.12}', _dark: '{colors.red.dark.12}' } },\n  a1: { value: { _light: '{colors.red.light.a1}', _dark: '{colors.red.dark.a1}' } },\n  a2: { value: { _light: '{colors.red.light.a2}', _dark: '{colors.red.dark.a2}' } },\n  a3: { value: { _light: '{colors.red.light.a3}', _dark: '{colors.red.dark.a3}' } },\n  a4: { value: { _light: '{colors.red.light.a4}', _dark: '{colors.red.dark.a4}' } },\n  a5: { value: { _light: '{colors.red.light.a5}', _dark: '{colors.red.dark.a5}' } },\n  a6: { value: { _light: '{colors.red.light.a6}', _dark: '{colors.red.dark.a6}' } },\n  a7: { value: { _light: '{colors.red.light.a7}', _dark: '{colors.red.dark.a7}' } },\n  a8: { value: { _light: '{colors.red.light.a8}', _dark: '{colors.red.dark.a8}' } },\n  a9: { value: { _light: '{colors.red.light.a9}', _dark: '{colors.red.dark.a9}' } },\n  a10: { value: { _light: '{colors.red.light.a10}', _dark: '{colors.red.dark.a10}' } },\n  a11: { value: { _light: '{colors.red.light.a11}', _dark: '{colors.red.dark.a11}' } },\n  a12: { value: { _light: '{colors.red.light.a12}', _dark: '{colors.red.dark.a12}' } },\n  default: { value: { _light: '{colors.red.light.9}', _dark: '{colors.red.dark.9}' } },\n  emphasized: { value: { _light: '{colors.red.light.10}', _dark: '{colors.red.dark.10}' } },\n  fg: { value: { _light: 'white', _dark: 'white' } },\n  text: { value: { _light: '{colors.red.light.a11}', _dark: '{colors.red.dark.a11}' } },\n})\n\nexport default {\n  name: 'red',\n  tokens,\n  semanticTokens,\n}\n","export const breakpoints = {\n  sm: '640px',\n  md: '768px',\n  lg: '1024px',\n  xl: '1280px',\n  '2xl': '1536px',\n}\n","export const conditions = {\n  extend: {\n    collapsed: '&:is([aria-collapsed=true], [data-collapsed], [data-state=\"collapsed\"])',\n    current: '&:is([data-current])',\n    hidden: '&:is([hidden])',\n    hover: ['@media (hover: hover) and (pointer: fine)', '&:is(:hover, [data-hover])'],\n    indeterminate:\n      '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])',\n    off: '&:is([data-state=\"off\"])',\n    on: '&:is([data-state=\"on\"])',\n    today: '&:is([data-today])',\n    underValue: '&:is([data-state=\"under-value\"])',\n    dark: '.dark &',\n    light: ':root &, .light &',\n    invalid: '&:is([aria-invalid])',\n  },\n}\n","import { defineGlobalStyles } from '@pandacss/dev'\n\nexport const globalCss = defineGlobalStyles({\n  body: {\n    background: 'bg.canvas',\n    color: 'fg.default',\n    _dark: {\n      colorScheme: 'dark',\n    },\n  },\n  '*, *::before, *::after': {\n    borderColor: 'border.subtle',\n    borderStyle: 'solid',\n    boxSizing: 'border-box',\n  },\n  '*::placeholder': {\n    opacity: 1,\n    color: 'fg.subtle',\n  },\n  '*::selection': {\n    bg: 'accent.a4',\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  'collapse-in': {\n    '0%': { height: '0' },\n    '100%': { height: 'var(--height)' },\n  },\n  'collapse-out': {\n    '0%': { height: 'var(--height)' },\n    '100%': { height: '0' },\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  'skeleton-pulse': {\n    '50%': { opacity: '0.5' },\n  },\n  spin: {\n    '0%': { transform: 'rotate(0deg)' },\n    '100%': { transform: 'rotate(360deg)' },\n  },\n})\n","import { accordionAnatomy } from '@ark-ui/anatomy'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const accordion = defineSlotRecipe({\n  className: 'accordion',\n  slots: accordionAnatomy.keys(),\n  base: {\n    root: {\n      divideY: '1px',\n      width: 'full',\n      borderTopWidth: '1px',\n      borderBottomWidth: '1px',\n    },\n    itemTrigger: {\n      alignItems: 'center',\n      color: 'fg.default',\n      cursor: 'pointer',\n      display: 'flex',\n      fontWeight: 'semibold',\n      gap: '3',\n      justifyContent: 'space-between',\n      textStyle: 'lg',\n      textAlign: 'left',\n      width: 'full',\n      _disabled: {\n        color: 'fg.disabled',\n        cursor: 'not-allowed',\n      },\n    },\n    itemIndicator: {\n      color: 'fg.muted',\n      transformOrigin: 'center',\n      transitionDuration: 'normal',\n      transitionProperty: 'transform',\n      transitionTimingFunction: 'default',\n      _open: {\n        transform: 'rotate(-180deg)',\n      },\n    },\n    itemContent: {\n      color: 'fg.muted',\n      overflow: 'hidden',\n      transitionProperty: 'padding-bottom',\n      transitionDuration: 'normal',\n      transitionTimingFunction: 'default',\n      _open: {\n        animation: 'collapse-in',\n      },\n      _closed: {\n        animation: 'collapse-out',\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n  variants: {\n    size: {\n      md: {\n        itemTrigger: {\n          py: '4',\n        },\n        itemContent: {\n          pb: '6',\n          pr: '8',\n          _closed: {\n            pb: '0',\n          },\n        },\n      },\n    },\n  },\n})\n","import { defineSlotRecipe } from '@pandacss/dev'\n\nexport const alert = defineSlotRecipe({\n  className: 'alert',\n  slots: ['root', 'content', 'description', 'icon', 'title'],\n  base: {\n    root: {\n      background: 'bg.default',\n      borderWidth: '1px',\n      borderRadius: 'l3',\n      display: 'flex',\n      gap: '3',\n      p: '4',\n      width: 'full',\n    },\n    content: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '1',\n    },\n    description: {\n      color: 'fg.muted',\n      textStyle: 'sm',\n    },\n    icon: {\n      color: 'fg.default',\n      flexShrink: '0',\n      width: '5',\n      height: '5',\n    },\n    title: {\n      color: 'fg.default',\n      fontWeight: 'semibold',\n      textStyle: 'sm',\n    },\n  },\n})\n","import { avatarAnatomy } from '@ark-ui/anatomy'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const avatar = defineSlotRecipe({\n  className: 'avatar',\n  slots: avatarAnatomy.keys(),\n  base: {\n    root: {\n      borderRadius: 'full',\n      flexShrink: 0,\n      overflow: 'hidden',\n    },\n    fallback: {\n      alignItems: 'center',\n      background: 'bg.subtle',\n      borderRadius: 'full',\n      borderWidth: '1px',\n      color: 'fg.default',\n      display: 'flex',\n      fontWeight: 'semibold',\n      height: 'inherit',\n      justifyContent: 'center',\n      _hidden: {\n        display: 'none',\n      },\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        image: {\n          height: '8',\n          width: '8',\n        },\n        fallback: {\n          textStyle: 'xs',\n          '& svg': {\n            width: '4',\n            height: '4',\n          },\n        },\n      },\n      sm: {\n        root: {\n          height: '9',\n          width: '9',\n        },\n        image: {\n          height: '9',\n          width: '9',\n        },\n        fallback: {\n          textStyle: 'sm',\n          '& svg': {\n            width: '4',\n            height: '4',\n          },\n        },\n      },\n      md: {\n        root: {\n          height: '10',\n          width: '10',\n        },\n        image: {\n          height: '10',\n          width: '10',\n        },\n        fallback: {\n          textStyle: 'md',\n          '& svg': {\n            width: '5',\n            height: '5',\n          },\n        },\n      },\n      lg: {\n        root: {\n          height: '11',\n          width: '11',\n        },\n        image: {\n          height: '11',\n          width: '11',\n        },\n        fallback: {\n          textStyle: 'lg',\n          '& svg': {\n            width: '6',\n            height: '6',\n          },\n        },\n      },\n      xl: {\n        root: {\n          height: '12',\n          width: '12',\n        },\n        image: {\n          height: '12',\n          width: '12',\n        },\n        fallback: {\n          textStyle: 'xl',\n          '& svg': {\n            width: '7',\n            height: '7',\n          },\n        },\n      },\n      '2xl': {\n        root: {\n          height: '16',\n          width: '16',\n        },\n        image: {\n          height: '16',\n          width: '16',\n        },\n        fallback: {\n          textStyle: '2xl',\n          '& svg': {\n            width: '8',\n            height: '8',\n          },\n        },\n      },\n    },\n  },\n})\n","import { defineRecipe } from '@pandacss/dev'\n\nexport const badge = defineRecipe({\n  className: 'badge',\n  base: {\n    alignItems: 'center',\n    borderRadius: 'full',\n    display: 'inline-flex',\n    fontWeight: 'medium',\n    userSelect: 'none',\n    whiteSpace: 'nowrap',\n  },\n  defaultVariants: {\n    variant: 'subtle',\n    size: 'md',\n  },\n  variants: {\n    variant: {\n      solid: {\n        background: 'colorPalette.default',\n        color: 'colorPalette.fg',\n      },\n      subtle: {\n        background: 'bg.subtle',\n        borderColor: 'border.subtle',\n        borderWidth: '1px',\n        color: 'fg.default',\n        '& svg': {\n          color: 'fg.muted',\n        },\n      },\n      outline: {\n        color: 'fg.default',\n        borderWidth: '2px',\n        borderColor: 'border.default',\n      },\n    },\n    size: {\n      sm: {\n        textStyle: 'xs',\n        px: '2',\n        h: '5',\n        gap: '1',\n        '& svg': {\n          width: '3',\n          height: '3',\n        },\n      },\n      md: {\n        textStyle: 'xs',\n        px: '2.5',\n        h: '6',\n        gap: '1.5',\n        '& svg': {\n          width: '4',\n          height: '4',\n        },\n      },\n      lg: {\n        textStyle: 'sm',\n        px: '3',\n        h: '7',\n        gap: '1.5',\n        '& svg': {\n          width: '4',\n          height: '4',\n        },\n      },\n    },\n  },\n})\n","import { defineRecipe } from '@pandacss/dev'\n\nexport const button = defineRecipe({\n  className: 'button',\n  jsx: ['Button', 'IconButton', 'SubmitButton'],\n  base: {\n    alignItems: 'center',\n    appearance: 'none',\n    borderRadius: 'l2',\n    cursor: 'pointer',\n    display: 'inline-flex',\n    flexShrink: '0',\n    fontWeight: 'semibold',\n    isolation: 'isolate',\n    minWidth: '0',\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    _hidden: {\n      display: 'none',\n    },\n    '& :where(svg)': {\n      fontSize: '1.1em',\n      width: '1.1em',\n      height: '1.1em',\n    },\n  },\n  defaultVariants: {\n    variant: 'solid',\n    size: 'md',\n  },\n  variants: {\n    variant: {\n      solid: {\n        background: 'colorPalette.default',\n        color: 'colorPalette.fg',\n        _hover: {\n          background: 'colorPalette.emphasized',\n        },\n        _focusVisible: {\n          outline: '2px solid',\n          outlineColor: 'colorPalette.default',\n          outlineOffset: '2px',\n        },\n        _disabled: {\n          color: 'fg.disabled',\n          background: 'bg.disabled',\n          cursor: 'not-allowed',\n          _hover: {\n            color: 'fg.disabled',\n            background: 'bg.disabled',\n          },\n        },\n      },\n      outline: {\n        borderWidth: '1px',\n        borderColor: 'colorPalette.a7',\n        color: 'colorPalette.text',\n        colorPalette: 'gray',\n        _hover: {\n          background: 'colorPalette.a2',\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          outline: '2px solid',\n          outlineColor: 'colorPalette.default',\n          outlineOffset: '2px',\n        },\n        _selected: {\n          background: 'accent.default',\n          borderColor: 'accent.default',\n          color: 'accent.fg',\n          _hover: {\n            background: 'accent.emphasized',\n            borderColor: 'accent.emphasized',\n          },\n        },\n      },\n      ghost: {\n        color: 'colorPalette.text',\n        colorPalette: 'gray',\n        _hover: {\n          background: 'colorPalette.a3',\n        },\n        _selected: {\n          background: 'colorPalette.a3',\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: 'colorPalette.default',\n          outlineOffset: '2px',\n        },\n      },\n      link: {\n        verticalAlign: 'baseline',\n        _disabled: {\n          color: 'border.disabled',\n          cursor: 'not-allowed',\n          _hover: {\n            color: 'border.disabled',\n          },\n        },\n        height: 'auto!',\n        px: '0!',\n        minW: '0!',\n      },\n      subtle: {\n        background: 'colorPalette.a3',\n        color: 'colorPalette.text',\n        colorPalette: 'gray',\n        _hover: {\n          background: 'colorPalette.a4',\n        },\n        _focusVisible: {\n          outline: '2px solid',\n          outlineColor: 'colorPalette.default',\n          outlineOffset: '2px',\n        },\n        _disabled: {\n          background: 'bg.disabled',\n          color: 'fg.disabled',\n          cursor: 'not-allowed',\n          _hover: {\n            background: 'bg.disabled',\n            color: 'fg.disabled',\n          },\n        },\n      },\n    },\n    size: {\n      xs: {\n        h: '8',\n        minW: '8',\n        textStyle: 'xs',\n        px: '3',\n        gap: '2',\n      },\n      sm: {\n        h: '9',\n        minW: '9',\n        textStyle: 'sm',\n        px: '3.5',\n        gap: '2',\n      },\n      md: {\n        h: '10',\n        minW: '10',\n        textStyle: 'sm',\n        px: '4',\n        gap: '2',\n      },\n      lg: {\n        h: '11',\n        minW: '11',\n        textStyle: 'md',\n        px: '4.5',\n        gap: '2',\n      },\n      xl: {\n        h: '12',\n        minW: '12',\n        textStyle: 'md',\n        px: '5',\n        gap: '2.5',\n      },\n      '2xl': {\n        h: '16',\n        minW: '16',\n        textStyle: 'lg',\n        px: '7',\n        gap: '3',\n      },\n    },\n  },\n})\n","import { defineSlotRecipe } from '@pandacss/dev'\n\nexport const card = defineSlotRecipe({\n  className: 'card',\n  slots: ['root', 'header', 'body', 'footer', 'title', 'description'],\n  base: {\n    root: {\n      bg: 'bg.default',\n      borderRadius: 'l3',\n      boxShadow: 'lg',\n      display: 'flex',\n      flexDirection: 'column',\n      overflow: 'hidden',\n      position: 'relative',\n    },\n    header: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '1',\n      p: '6',\n    },\n    body: {\n      display: 'flex',\n      flex: '1',\n      flexDirection: 'column',\n      pb: '6',\n      px: '6',\n    },\n    footer: {\n      display: 'flex',\n      justifyContent: 'flex-end',\n      pb: '6',\n      pt: '2',\n      px: '6',\n    },\n    title: {\n      color: 'fg.default',\n      textStyle: 'lg',\n      fontWeight: 'semibold',\n    },\n    description: {\n      color: 'fg.muted',\n      textStyle: 'sm',\n    },\n  },\n})\n","import { carouselAnatomy } from '@ark-ui/anatomy'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const carousel = defineSlotRecipe({\n  className: 'carousel',\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: { _light: 'gray.dark.a12', _dark: 'gray.light.a12' },\n      borderRadius: 'l2',\n      bottom: '4',\n      display: 'flex',\n      left: '50%',\n      position: 'absolute',\n      transform: 'translateX(-50%)',\n    },\n    indicatorGroup: {\n      display: 'flex',\n    },\n    indicator: {\n      borderRadius: 'full',\n      background: 'gray.6',\n      cursor: 'pointer',\n      _current: {\n        background: 'colorPalette.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/anatomy'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const checkbox = defineSlotRecipe({\n  className: 'checkbox',\n  slots: checkboxAnatomy.keys(),\n  base: {\n    root: {\n      alignItems: 'center',\n      display: 'flex',\n    },\n    label: {\n      color: 'fg.default',\n      fontWeight: 'medium',\n    },\n    control: {\n      alignItems: 'center',\n      borderColor: 'border.default',\n      borderWidth: '1px',\n      color: 'colorPalette.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: 'colorPalette.default',\n        borderColor: 'colorPalette.default',\n        _hover: {\n          background: 'colorPalette.default',\n        },\n      },\n      _indeterminate: {\n        background: 'colorPalette.default',\n        borderColor: 'colorPalette.default',\n        _hover: {\n          background: 'colorPalette.default',\n        },\n      },\n      '&:has(+ :focus-visible)': {\n        outlineOffset: '2px',\n        outline: '2px solid',\n        outlineColor: 'border.outline',\n        _checked: {\n          outlineColor: 'colorPalette.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 { clipboardAnatomy } from '@ark-ui/anatomy'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const clipboard = defineSlotRecipe({\n  className: 'clipboard',\n  slots: clipboardAnatomy.keys(),\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '1.5',\n    },\n    control: {\n      display: 'flex',\n      gap: '3',\n    },\n  },\n})\n","import { defineRecipe } from '@pandacss/dev'\n\nexport const code = defineRecipe({\n  className: 'code',\n  base: {\n    alignItems: 'center',\n    bg: 'bg.subtle',\n    borderRadius: 'l2',\n    color: 'fg.default',\n    display: 'inline-flex',\n    fontWeight: 'medium!',\n    fontFamily: 'var(--fonts-code)',\n    whiteSpace: 'pre',\n  },\n  defaultVariants: {\n    size: 'md',\n    variant: 'outline',\n  },\n  variants: {\n    variant: {\n      outline: {\n        borderWidth: '1px',\n      },\n      ghost: {},\n    },\n    size: {\n      sm: {\n        minHeight: '5',\n        px: '0.5',\n        textStyle: 'xs',\n      },\n      md: {\n        minHeight: '6',\n        textStyle: 'sm',\n        px: '1',\n        py: '1px',\n      },\n      lg: {\n        minHeight: '7',\n        px: '1.5',\n        py: '1px',\n        textStyle: 'md',\n      },\n    },\n  },\n})\n","import { collapsibleAnatomy } from '@ark-ui/anatomy'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const collapsible = defineSlotRecipe({\n  className: 'collapsible',\n  slots: collapsibleAnatomy.keys(),\n  base: {\n    root: {\n      alignItems: 'flex-start',\n      display: 'flex',\n      flexDirection: 'column',\n      width: 'full',\n    },\n    content: {\n      overflow: 'hidden',\n      width: 'full',\n      _open: {\n        animation: 'collapse-in',\n      },\n      _closed: {\n        animation: 'collapse-out',\n      },\n    },\n  },\n})\n","import { colorPickerAnatomy } from '@ark-ui/anatomy'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const colorPicker = defineSlotRecipe({\n  className: 'colorPicker',\n  slots: colorPickerAnatomy.keys(),\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '1.5',\n    },\n    label: {\n      color: 'fg.default',\n      fontWeight: 'medium',\n      textStyle: 'sm',\n    },\n    control: {\n      display: 'flex',\n      flexDirection: 'row',\n      gap: '2',\n    },\n    content: {\n      background: 'bg.default',\n      borderRadius: 'l3',\n      boxShadow: 'lg',\n      display: 'flex',\n      flexDirection: 'column',\n      maxWidth: 'sm',\n      p: '4',\n      zIndex: 'dropdown',\n      _open: {\n        animation: 'fadeIn 0.25s ease-out',\n      },\n      _closed: {\n        animation: 'fadeOut 0.2s ease-out',\n      },\n      _hidden: {\n        display: 'none',\n      },\n    },\n    area: {\n      height: '36',\n      borderRadius: 'l2',\n      overflow: 'hidden',\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    areaBackground: {\n      height: 'full',\n    },\n    channelSlider: {\n      borderRadius: 'l2',\n    },\n    channelSliderTrack: {\n      height: '3',\n      borderRadius: 'l2',\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: 'l2',\n      boxShadow:\n        '0 0 0 1px var(--colors-border-emphasized), 0 0 0 2px var(--colors-bg-default) inset',\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      outline: 'none',\n    },\n    transparencyGrid: {\n      borderRadius: 'l2',\n    },\n  },\n})\n","import { comboboxAnatomy } from '@ark-ui/anatomy'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const combobox = defineSlotRecipe({\n  className: 'combobox',\n  slots: comboboxAnatomy.keys(),\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '1.5',\n      width: 'full',\n    },\n    control: {\n      position: 'relative',\n    },\n    label: {\n      color: 'fg.default',\n      fontWeight: 'medium',\n    },\n    trigger: {\n      bottom: '0',\n      color: 'fg.muted',\n      position: 'absolute',\n      right: '0',\n      top: '0',\n    },\n    content: {\n      background: 'bg.default',\n      borderRadius: 'l2',\n      boxShadow: 'lg',\n      display: 'flex',\n      flexDirection: 'column',\n      zIndex: 'dropdown',\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    item: {\n      alignItems: 'center',\n      borderRadius: 'l1',\n      cursor: 'pointer',\n      display: 'flex',\n      justifyContent: 'space-between',\n      transitionDuration: 'fast',\n      transitionProperty: 'background, color',\n      transitionTimingFunction: 'default',\n      _hover: {\n        background: 'bg.muted',\n      },\n      _highlighted: {\n        background: 'bg.muted',\n      },\n      _disabled: {\n        color: 'fg.disabled',\n        cursor: 'not-allowed',\n        _hover: {\n          background: 'transparent',\n        },\n      },\n    },\n    itemGroupLabel: {\n      fontWeight: 'semibold',\n      textStyle: 'sm',\n    },\n    itemIndicator: {\n      color: 'colorPalette.default',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n  variants: {\n    size: {\n      sm: {\n        content: { p: '0.5', gap: '1' },\n        item: { textStyle: 'sm', px: '2', height: '9' },\n        itemIndicator: {\n          '& :where(svg)': {\n            width: '4',\n            height: '4',\n          },\n        },\n        itemGroupLabel: {\n          px: '2',\n          py: '1.5',\n        },\n        label: { textStyle: 'sm' },\n        trigger: { right: '2.5' },\n      },\n      md: {\n        content: { p: '1', gap: '1' },\n        item: { textStyle: 'md', px: '2', height: '10' },\n        itemIndicator: {\n          '& :where(svg)': {\n            width: '4',\n            height: '4',\n          },\n        },\n        itemGroupLabel: {\n          px: '2',\n          py: '1.5',\n        },\n        label: { textStyle: 'sm' },\n        trigger: { right: '3' },\n      },\n      lg: {\n        content: { p: '1.5', gap: '1' },\n        item: { textStyle: 'md', px: '2', height: '11' },\n        itemIndicator: {\n          '& :where(svg)': {\n            width: '5',\n            height: '5',\n          },\n        },\n        itemGroupLabel: {\n          px: '2',\n          py: '1.5',\n        },\n        label: { textStyle: 'sm' },\n        trigger: { right: '3.5' },\n      },\n    },\n  },\n})\n","import { datePickerAnatomy } from '@ark-ui/anatomy'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const datePicker = defineSlotRecipe({\n  className: 'datePicker',\n  slots: [...datePickerAnatomy.keys()],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '1.5',\n    },\n    content: {\n      background: 'bg.default',\n      borderRadius: 'l3',\n      boxShadow: 'lg',\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '3',\n      p: '4',\n      width: '344px',\n      zIndex: 'dropdown',\n      _open: {\n        animation: 'fadeIn 0.25s ease-out',\n      },\n      _closed: {\n        animation: 'fadeOut 0.2s ease-out',\n      },\n      _hidden: {\n        display: 'none',\n      },\n    },\n    control: {\n      display: 'flex',\n      flexDirection: 'row',\n      gap: '2',\n    },\n    label: {\n      color: 'fg.default',\n      fontWeight: 'medium',\n      textStyle: 'sm',\n    },\n    tableHeader: {\n      color: 'fg.muted',\n      fontWeight: 'semibold',\n      height: '10',\n      textStyle: 'sm',\n    },\n    viewControl: {\n      display: 'flex',\n      gap: '2',\n      justifyContent: 'space-between',\n    },\n    table: {\n      width: 'full',\n      borderCollapse: 'separate',\n      borderSpacing: '1',\n      m: '-1',\n    },\n    tableCell: {\n      textAlign: 'center',\n    },\n    tableCellTrigger: {\n      width: '100%',\n      _today: {\n        _before: {\n          content: \"'−'\",\n          color: 'colorPalette.default',\n          position: 'absolute',\n          marginTop: '6',\n        },\n      },\n      '&[data-in-range]': {\n        background: 'bg.muted',\n      },\n      _selected: {\n        _before: {\n          color: 'colorPalette.fg',\n        },\n      },\n    },\n    view: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '3',\n      _hidden: {\n        display: 'none',\n      },\n    },\n  },\n})\n","import { dialogAnatomy } from '@ark-ui/anatomy'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const dialog = defineSlotRecipe({\n  className: 'dialog',\n  slots: dialogAnatomy.keys(),\n  base: {\n    backdrop: {\n      backdropFilter: 'blur(4px)',\n      background: {\n        _light: 'white.a10',\n        _dark: 'black.a10',\n      },\n      height: '100vh',\n      left: '0',\n      position: 'fixed',\n      top: '0',\n      width: '100vw',\n      zIndex: 'overlay',\n      _open: {\n        animation: 'backdrop-in',\n      },\n      _closed: {\n        animation: 'backdrop-out',\n      },\n    },\n    positioner: {\n      alignItems: 'center',\n      display: 'flex',\n      justifyContent: 'center',\n      left: '0',\n      overflow: 'auto',\n      position: 'fixed',\n      top: '0',\n      width: '100vw',\n      height: '100dvh',\n      zIndex: 'modal',\n    },\n    content: {\n      background: 'bg.default',\n      borderRadius: 'l3',\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/anatomy'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nconst anatomy = dialogAnatomy.extendWith('header', 'body', 'footer')\n\nexport const drawer = defineSlotRecipe({\n  className: 'drawer',\n  slots: [...anatomy.keys()],\n  base: {\n    backdrop: {\n      backdropFilter: 'blur(4px)',\n      background: {\n        _light: 'white.a10',\n        _dark: 'black.a10',\n      },\n      height: '100vh',\n      left: '0',\n      position: 'fixed',\n      top: '0',\n      width: '100vw',\n      zIndex: 'overlay',\n      _open: {\n        animation: 'backdrop-in',\n      },\n      _closed: {\n        animation: 'backdrop-out',\n      },\n    },\n    positioner: {\n      alignItems: 'center',\n      display: 'flex',\n      height: '100dvh',\n      justifyContent: 'center',\n      position: 'fixed',\n      top: 0,\n      width: { base: '100vw', sm: 'sm' },\n      zIndex: 'modal',\n    },\n    content: {\n      background: 'bg.default',\n      boxShadow: 'lg',\n      display: 'grid',\n      divideY: '1px',\n      gridTemplateColumns: '1fr',\n      gridTemplateRows: 'auto 1fr auto',\n      gridTemplateAreas: `\n        'header'\n        'body'\n        'footer'\n      `,\n      height: 'full',\n      width: 'full',\n      _hidden: {\n        display: 'none',\n      },\n    },\n    header: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '1',\n      gridArea: 'header',\n      pt: { base: '4', md: '6' },\n      pb: '4',\n      px: { base: '4', md: '6' },\n    },\n    body: {\n      display: 'flex',\n      flexDirection: 'column',\n      gridArea: 'body',\n      overflow: 'auto',\n      p: { base: '4', md: '6' },\n    },\n    footer: {\n      display: 'flex',\n      gridArea: 'footer',\n      justifyContent: 'flex-end',\n      py: '4',\n      px: { base: '4', md: '6' },\n    },\n    title: {\n      color: 'fg.default',\n      fontWeight: 'semibold',\n      textStyle: 'xl',\n    },\n    description: {\n      color: 'fg.muted',\n      textStyle: 'sm',\n    },\n  },\n  defaultVariants: {\n    variant: 'right',\n  },\n  variants: {\n    variant: {\n      left: {\n        positioner: {\n          left: 0,\n        },\n        content: {\n          _open: {\n            animation: 'drawer-in-left',\n          },\n          _closed: {\n            animation: 'drawer-out-left',\n          },\n        },\n      },\n      right: {\n        positioner: {\n          right: 0,\n        },\n        content: {\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/anatomy'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const editable = defineSlotRecipe({\n  className: 'editable',\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 { fieldAnatomy } from '@ark-ui/anatomy'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const field = defineSlotRecipe({\n  className: 'field',\n  slots: fieldAnatomy.keys(),\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '1.5',\n    },\n    label: {\n      color: 'fg.default',\n      fontWeight: 'medium',\n      textStyle: 'sm',\n      _disabled: {\n        color: 'fg.disabled',\n      },\n    },\n    helperText: {\n      color: 'fg.muted',\n      textStyle: 'sm',\n      _disabled: {\n        color: 'fg.disabled',\n      },\n    },\n    errorText: {\n      alignItems: 'center',\n      color: 'fg.error',\n      display: 'inline-flex',\n      gap: '2',\n      textStyle: 'sm',\n      _disabled: {\n        color: 'fg.disabled',\n      },\n    },\n  },\n})\n","import { fieldsetAnatomy } from '@ark-ui/anatomy'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const fieldset = defineSlotRecipe({\n  className: 'fieldset',\n  slots: [...fieldsetAnatomy.keys(), 'control'],\n  base: {\n    root: {\n      display: 'grid',\n      borderTopWidth: '1px',\n      py: '6',\n      columnGap: '8',\n      rowGap: '1.5',\n      gridTemplateAreas: {\n        base: `\n        \"legend legend\" \n        \"helperText helperText\"\n        \"control control\"\n        \"errorText errorText\"\n        `,\n        md: `\n        \"legend control\"\n        \"helperText control\"\n        \"errorText errorText\"`,\n      },\n      gridTemplateRows: 'auto 1fr',\n      gridTemplateColumns: '1fr auto',\n      width: 'full',\n    },\n    control: {\n      gridArea: 'control',\n      display: 'grid',\n      gap: '4',\n    },\n    legend: {\n      color: 'fg.default',\n      fontWeight: 'medium',\n      gridArea: 'legend',\n      textStyle: 'sm',\n      float: 'left',\n      '+ *': {\n        clear: 'both',\n      },\n      _disabled: {\n        color: 'fg.disabled',\n      },\n    },\n    helperText: {\n      color: 'fg.muted',\n      gridArea: 'helperText',\n      textStyle: 'sm',\n      _disabled: {\n        color: 'fg.disabled',\n      },\n    },\n    errorText: {\n      alignItems: 'center',\n      color: 'fg.error',\n      display: 'inline-flex',\n      gap: '2',\n      gridArea: 'errorText',\n      mt: '4',\n      textStyle: 'sm',\n      _disabled: {\n        color: 'fg.disabled',\n      },\n    },\n  },\n})\n","import { fileUploadAnatomy } from '@ark-ui/anatomy'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const fileUpload = defineSlotRecipe({\n  className: 'fileUpload',\n  slots: fileUploadAnatomy.keys(),\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '4',\n      width: '100%',\n    },\n    label: {\n      fontWeight: 'medium',\n      textStyle: 'sm',\n    },\n    dropzone: {\n      alignItems: 'center',\n      background: 'bg.default',\n      borderRadius: 'l3',\n      borderWidth: '1px',\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '3',\n      justifyContent: 'center',\n      minHeight: 'xs',\n      px: '6',\n      py: '4',\n    },\n    item: {\n      animation: 'fadeIn 0.25s ease-out',\n      background: 'bg.default',\n      borderRadius: 'l3',\n      borderWidth: '1px',\n      columnGap: '3',\n      display: 'grid',\n      gridTemplateColumns: 'auto 1fr auto',\n      gridTemplateAreas: `\n        \"preview name delete\"\n        \"preview size delete\"\n        `,\n      p: '4',\n    },\n    itemGroup: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '3',\n    },\n    itemName: {\n      color: 'fg.default',\n      fontWeight: 'medium',\n      gridArea: 'name',\n      textStyle: 'sm',\n    },\n    itemSizeText: {\n      color: 'fg.muted',\n      gridArea: 'size',\n      textStyle: 'sm',\n    },\n    itemDeleteTrigger: {\n      alignSelf: 'flex-start',\n      gridArea: 'delete',\n    },\n    itemPreview: {\n      gridArea: 'preview',\n    },\n    itemPreviewImage: {\n      aspectRatio: '1',\n      height: '10',\n      objectFit: 'scale-down',\n      width: '10',\n    },\n  },\n})\n","import { defineRecipe } from '@pandacss/dev'\n\nexport const formLabel = defineRecipe({\n  className: 'formLabel',\n  base: {\n    color: 'fg.default',\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 { hoverCardAnatomy } from '@ark-ui/anatomy'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const hoverCard = defineSlotRecipe({\n  className: 'hoverCard',\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      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 icon = defineRecipe({\n  className: 'icon',\n  base: {\n    color: 'currentcolor',\n    display: 'inline-block',\n    flexShrink: '0',\n    verticalAlign: 'middle',\n    lineHeight: '1em',\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n  variants: {\n    size: {\n      xs: {\n        w: '3',\n        h: '3',\n      },\n      sm: {\n        w: '4',\n        h: '4',\n      },\n      md: {\n        w: '5',\n        h: '5',\n      },\n      lg: {\n        w: '6',\n        h: '6',\n      },\n      xl: {\n        w: '7',\n        h: '7',\n      },\n      '2xl': {\n        w: '8',\n        h: '8',\n      },\n    },\n  },\n})\n","import { defineRecipe } from '@pandacss/dev'\n\nexport const input = defineRecipe({\n  className: 'input',\n  jsx: ['Input', 'Field.Input'],\n  base: {\n    appearance: 'none',\n    background: 'none',\n    borderColor: 'border.default',\n    borderRadius: 'l2',\n    borderWidth: '1px',\n    color: 'fg.default',\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: 'colorPalette.default',\n      boxShadow: '0 0 0 1px var(--colors-color-palette-default)',\n    },\n    _invalid: {\n      borderColor: 'fg.error',\n      _focus: {\n        borderColor: 'fg.error',\n        boxShadow: '0 0 0 1px var(--colors-border-error)',\n      },\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: '4.5', h: '16', minW: '16', textStyle: '3xl' },\n    },\n  },\n})\n","import { defineRecipe } from '@pandacss/dev'\n\nexport const kbd = defineRecipe({\n  className: 'kbd',\n  base: {\n    alignItems: 'center',\n    bg: 'bg.subtle',\n    borderRadius: 'l2',\n    boxShadow:\n      '0 -2px 0 0 inset var(--colors-border-muted), 0 0 0 1px inset var(--colors-border-muted)',\n    color: 'fg.default',\n    display: 'inline-flex',\n    fontFamily: 'var(--fonts-code)',\n    fontWeight: 'm