@spark-ui/components 18.1.1 → 18.1.2

package/dist/{button-DwLTXeJX.mjs.map → button-DBNjh3Bi.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"button-DwLTXeJX.mjs","names":[],"sources":["../src/button/Button.appearance-styles.tsx","../src/button/variants/filled.ts","../src/button/variants/ghost.ts","../src/button/variants/outlined.ts","../src/button/variants/tinted.ts","../src/button/variants/contrast.ts","../src/button/Button.styles.tsx","../src/button/Button.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const buttonAppearanceStyles = cva(\n  [\n    'u-shadow-border-transition',\n    'box-border inline-flex items-center justify-center gap-md whitespace-nowrap',\n    'default:px-lg',\n    'rounded-button',\n    'text-body-1-highlight',\n    'focus-visible:u-outline',\n  ],\n  {\n    variants: {\n      /**\n       * Add underline to the button text.\n       */\n      underline: {\n        true: ['underline'],\n      },\n      /**\n       * Semantic appearance of the button that combines design and intent.\n       * When specified, this prop overrides both `design` and `intent`.\n       *\n       * - `primary`: Main action, filled background\n       * - `secondary`: Secondary action, filled support background\n       * - `tertiary`: Tertiary action, outlined with surface background\n       * - `contrast`: Contrast action, surface background\n       * - `ghost`: Link-style without background\n       * - `success`: Success action, outlined with transparent background\n       * - `danger`: Danger action, outlined with transparent background\n       * - `boost`: Accent action, filled accent background\n       * - `AI`: AI action, filled AI background\n       */\n      appearance: {\n        primary: [\n          'bg-main',\n          'text-on-main',\n          'rounded-button',\n          'enabled:hover:bg-main-hovered',\n          'enabled:active:bg-main-hovered',\n          'enabled:focus-visible:bg-main-hovered',\n        ],\n        secondary: [\n          'bg-support',\n          'text-on-support',\n          'rounded-button',\n          'enabled:hover:bg-support-hovered',\n          'enabled:active:bg-support-hovered',\n          'enabled:focus-visible:bg-support-hovered',\n        ],\n        tertiary: [\n          'border-outline',\n          'border-sm',\n          'bg-surface',\n          'text-on-surface',\n          'rounded-button',\n          'enabled:hover:bg-surface-hovered',\n          'enabled:active:bg-surface-hovered',\n          'enabled:focus-visible:bg-surface-hovered',\n        ],\n        contrast: [\n          'bg-surface',\n          'text-on-surface',\n          'rounded-button',\n          'enabled:hover:bg-surface-hovered',\n          'enabled:active:bg-surface-hovered',\n          'enabled:focus-visible:bg-surface-hovered',\n        ],\n        ghost: ['text-on-surface default:-mx-md px-md enabled:hover:bg-surface-hovered'],\n        success: [\n          'border-outline',\n          'border-sm',\n          'bg-transparent',\n          'text-success',\n          'rounded-button',\n          'enabled:hover:bg-success-container',\n          'enabled:active:bg-success-container',\n          'enabled:focus-visible:bg-success-container',\n        ],\n        danger: [\n          'border-outline',\n          'border-sm',\n          'bg-transparent',\n          'text-error',\n          'rounded-button',\n          'enabled:hover:bg-error-container',\n          'enabled:active:bg-error-container',\n          'enabled:focus-visible:bg-error-container',\n        ],\n        boost: [\n          'bg-accent',\n          'text-on-accent',\n          'rounded-button',\n          'enabled:hover:bg-accent-hovered',\n          'enabled:active:bg-accent-hovered',\n          'enabled:focus-visible:bg-accent-hovered',\n        ],\n        AI: [\n          'bg-ai',\n          'text-on-ai',\n          'rounded-button',\n          'enabled:hover:bg-ai-hovered',\n          'enabled:active:bg-ai-hovered',\n          'enabled:focus-visible:bg-ai-hovered',\n        ],\n      },\n      /**\n       * Size of the button.\n       */\n      size: makeVariants<'size', ['sm', 'md', 'lg']>({\n        sm: ['min-w-sz-32 h-sz-32'],\n        md: ['min-w-sz-44 h-sz-44'],\n        lg: ['min-w-sz-56 h-sz-56'],\n      }),\n      /**\n       * Disable the button, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed opacity-dim-3'],\n        false: ['cursor-pointer'],\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n)\n\nexport type ButtonAppearanceStylesProps = VariantProps<typeof buttonAppearanceStyles>\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const filledVariants = [\n  // Main\n  {\n    intent: 'main',\n    design: 'filled',\n    class: tw([\n      'bg-main',\n      'text-on-main',\n      'hover:bg-main-hovered',\n      'enabled:active:bg-main-hovered',\n      'focus-visible:bg-main-hovered',\n    ]),\n  },\n  // Support\n  {\n    intent: 'support',\n    design: 'filled',\n    class: tw([\n      'bg-support',\n      'text-on-support',\n      'hover:bg-support-hovered',\n      'enabled:active:bg-support-hovered',\n      'focus-visible:bg-support-hovered',\n    ]),\n  },\n  // Accent\n  {\n    intent: 'accent',\n    design: 'filled',\n    class: tw([\n      'bg-accent',\n      'text-on-accent',\n      'hover:bg-accent-hovered',\n      'enabled:active:bg-accent-hovered',\n      'focus-visible:bg-accent-hovered',\n    ]),\n  },\n  // AI\n  {\n    intent: 'ai',\n    design: 'filled',\n    class: tw([\n      'bg-ai',\n      'text-on-ai',\n      'hover:bg-ai-hovered',\n      'enabled:active:bg-ai-hovered',\n      'focus-visible:bg-ai-hovered',\n    ]),\n  },\n  // Success\n  {\n    intent: 'success',\n    design: 'filled',\n    class: tw([\n      'bg-success',\n      'text-on-success',\n      'hover:bg-success-hovered',\n      'enabled:active:bg-success-hovered',\n      'focus-visible:bg-success-hovered',\n    ]),\n  },\n  // Alert\n  {\n    intent: 'alert',\n    design: 'filled',\n    class: tw([\n      'bg-alert',\n      'text-on-alert',\n      'hover:bg-alert-hovered',\n      'enabled:active:bg-alert-hovered',\n      'focus-visible:bg-alert-hovered',\n    ]),\n  },\n  // Danger\n  {\n    intent: 'danger',\n    design: 'filled',\n    class: tw([\n      'text-on-error bg-error',\n      'hover:bg-error-hovered enabled:active:bg-error-hovered',\n      'focus-visible:bg-error-hovered',\n    ]),\n  },\n  // Info\n  {\n    intent: 'info',\n    design: 'filled',\n    class: tw([\n      'text-on-error bg-info',\n      'hover:bg-info-hovered enabled:active:bg-info-hovered',\n      'focus-visible:bg-info-hovered',\n    ]),\n  },\n  // Neutral\n  {\n    intent: 'neutral',\n    design: 'filled',\n    class: tw([\n      'bg-neutral',\n      'text-on-neutral',\n      'hover:bg-neutral-hovered',\n      'enabled:active:bg-neutral-hovered',\n      'focus-visible:bg-neutral-hovered',\n    ]),\n  },\n  // Surface\n  {\n    intent: 'surface',\n    design: 'filled',\n    class: tw([\n      'bg-surface',\n      'text-on-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'filled',\n    class: tw([\n      'bg-surface-inverse',\n      'text-on-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const ghostVariants = [\n  {\n    intent: 'main',\n    design: 'ghost',\n    class: tw([\n      'text-on-main-container',\n      'hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'ghost',\n    class: tw([\n      'text-on-support-container',\n      'hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'ghost',\n    class: tw([\n      'text-on-accent-container',\n      'hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'ghost',\n    class: tw([\n      'text-on-ai-container',\n      'hover:bg-ai/dim-5',\n      'enabled:active:bg-ai/dim-5',\n      'focus-visible:bg-ai/dim-5',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'ghost',\n    class: tw([\n      'text-on-success-container',\n      'hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'ghost',\n    class: tw([\n      'text-on-alert-container',\n      'hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'ghost',\n    class: tw([\n      'text-on-error-container',\n      'hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'ghost',\n    class: tw([\n      'text-on-info-container',\n      'hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'ghost',\n    class: tw([\n      'text-on-neutral-container',\n      'hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'ghost',\n    class: tw([\n      'text-surface',\n      'hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'ghost',\n    class: tw([\n      'text-surface-inverse',\n      'hover:bg-surface-inverse/dim-5',\n      'enabled:active:bg-surface-inverse/dim-5',\n      'focus-visible:bg-surface-inverse/dim-5',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n  {\n    intent: 'main',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'text-main',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'text-accent',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-ai/dim-5',\n      'enabled:active:bg-ai/dim-5',\n      'focus-visible:bg-ai/dim-5',\n      'text-ai',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'text-alert',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'text-error',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'text-info',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'text-neutral',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'text-surface',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-surface-inverse/dim-5',\n      'enabled:active:bg-surface-inverse/dim-5',\n      'focus-visible:bg-surface-inverse/dim-5',\n      'text-surface-inverse',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw([\n      'bg-main-container',\n      'text-on-main-container',\n      'hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw([\n      'bg-support-container',\n      'text-on-support-container',\n      'hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw([\n      'bg-accent-container',\n      'text-on-accent-container',\n      'hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'tinted',\n    class: tw([\n      'bg-ai-container',\n      'text-on-ai-container',\n      'hover:bg-ai-container-hovered',\n      'enabled:active:bg-ai-container-hovered',\n      'focus-visible:bg-ai-container-hovered',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw([\n      'bg-success-container',\n      'text-on-success-container',\n      'hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw([\n      'bg-alert-container',\n      'text-on-alert-container',\n      'hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw([\n      'bg-error-container',\n      'text-on-error-container',\n      'hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw([\n      'bg-info-container',\n      'text-on-info-container',\n      'hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw([\n      'bg-neutral-container',\n      'text-on-neutral-container',\n      'hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'tinted',\n    class: tw([\n      'bg-surface',\n      'text-on-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'tinted',\n    class: tw([\n      'bg-surface-inverse',\n      'text-on-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const contrastVariants = [\n  {\n    intent: 'main',\n    design: 'contrast',\n    class: tw([\n      'text-on-main-contaier bg-surface',\n      'hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'contrast',\n    class: tw([\n      'text-on-support-container bg-surface',\n      'hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'contrast',\n    class: tw([\n      'text-on-accent-container bg-surface',\n      'hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'contrast',\n    class: tw([\n      'text-on-ai-container bg-surface',\n      'hover:bg-ai-container-hovered',\n      'enabled:active:bg-ai-container-hovered',\n      'focus-visible:bg-ai-container-hovered',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'contrast',\n    class: tw([\n      'text-on-success-container bg-surface',\n      'hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'contrast',\n    class: tw([\n      'text-on-alert-container bg-surface',\n      'hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'contrast',\n    class: tw([\n      'text-on-error-container bg-surface',\n      'hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'contrast',\n    class: tw([\n      'text-on-info-container bg-surface',\n      'hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'contrast',\n    class: tw([\n      'text-on-neutral-container bg-surface',\n      'hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'contrast',\n    class: tw([\n      'text-on-surface bg-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'contrast',\n    class: tw([\n      'text-on-surface-inverse bg-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport {\n  contrastVariants,\n  filledVariants,\n  ghostVariants,\n  outlinedVariants,\n  tintedVariants,\n} from './variants'\n\nexport const buttonStyles = cva(\n  [\n    'u-shadow-border-transition',\n    'box-border inline-flex items-center justify-center gap-md whitespace-nowrap',\n    'default:px-lg',\n    'text-body-1-highlight',\n    'focus-visible:u-outline',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the button.\n       *\n       * - `filled`: Button will be plain.\n       *\n       * - `outlined`: Button will be transparent with an outline.\n       *\n       * - `tinted`: Button will be filled but using a lighter color scheme.\n       *\n       * - `ghost`: Button will look like a link. No borders, plain text.\n       *\n       * - `contrast`: Button will be surface filled. No borders, plain text.\n       *\n       */\n      design: makeVariants<'design', ['filled', 'outlined', 'tinted', 'ghost', 'contrast']>({\n        filled: [],\n        outlined: ['bg-transparent', 'border-sm', 'border-current'],\n        tinted: [],\n        ghost: ['default:-mx-md px-md hover:bg-main/dim-5'],\n        contrast: [],\n      }),\n      underline: {\n        true: ['underline'],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'ai',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        ai: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n        surfaceInverse: [],\n      }),\n      /**\n       * Size of the button.\n       */\n      size: makeVariants<'size', ['sm', 'md', 'lg']>({\n        sm: ['min-w-sz-32', 'h-sz-32'],\n        md: ['min-w-sz-44', 'h-sz-44'],\n        lg: ['min-w-sz-56', 'h-sz-56'],\n      }),\n      /**\n       * Shape of the button.\n       */\n      shape: makeVariants<'shape', ['rounded', 'square', 'pill']>({\n        rounded: ['rounded-button'],\n        square: ['rounded-0'],\n        pill: ['rounded-full'],\n      }),\n      /**\n       * Disable the button, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed', 'opacity-dim-3'],\n        false: ['cursor-pointer'],\n      },\n    },\n    compoundVariants: [\n      ...filledVariants,\n      ...outlinedVariants,\n      ...tintedVariants,\n      ...ghostVariants,\n      ...contrastVariants,\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'main',\n      size: 'md',\n      shape: 'rounded',\n    },\n  }\n)\n\nexport type ButtonStylesProps = VariantProps<typeof buttonStyles>\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, type DOMAttributes, Ref, useMemo } from 'react'\n\nimport { Slot, wrapPolymorphicSlot } from '../slot'\nimport { Spinner, type SpinnerProps } from '../spinner'\nimport {\n  buttonAppearanceStyles,\n  type ButtonAppearanceStylesProps,\n} from './Button.appearance-styles'\nimport { buttonStyles, type ButtonStylesProps } from './Button.styles'\n\nexport interface ButtonProps\n  extends\n    Omit<ComponentPropsWithoutRef<'button'>, 'disabled'>,\n    Omit<ButtonStylesProps, 'design' | 'intent'>,\n    Pick<ButtonAppearanceStylesProps, 'appearance'> {\n  /**\n   * Main style of the button.\n   */\n  design?: ButtonStylesProps['design']\n  /**\n   * Color scheme of the button.\n   */\n  intent?: ButtonStylesProps['intent']\n  /**\n   * Combined appearance preset (replaces `design` and `intent`).\n   * @beta This API is in beta and may change in future versions.\n   */\n  appearance?: ButtonAppearanceStylesProps['appearance']\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Display a spinner to indicate to the user that the button is loading something after they interacted with it.\n   */\n  isLoading?: boolean\n  /**\n   * If your loading state should only display a spinner, it is better to specify a label for it (a11y).\n   */\n  loadingLabel?: string\n  /**\n   * If your loading state should also display a label, you can use this prop instead of `loadingLabel`.\n   * **Please note that using this can result in layout shifting when the Button goes from loading state to normal state.**\n   */\n  loadingText?: string\n  /**\n   * When true, the button is non-interactive and has disabled styling but stays focusable (uses\n   * `aria-disabled` instead of native `disabled`). Use for cases where the user should be able to\n   * focus the control to discover why it is disabled (e.g. form submit, bulk bar actions).\n   */\n  ariaDisabled?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\ntype DOMAttributesEventHandler = keyof Omit<\n  DOMAttributes<HTMLButtonElement>,\n  'children' | 'dangerouslySetInnerHTML'\n>\n\nconst blockedEventHandlers: DOMAttributesEventHandler[] = [\n  'onClick',\n  'onMouseDown',\n  'onMouseUp',\n  'onMouseEnter',\n  'onMouseLeave',\n  'onMouseOver',\n  'onMouseOut',\n  'onKeyDown',\n  'onKeyPress',\n  'onKeyUp',\n  'onSubmit',\n]\n\n/**\n * A clickable element that triggers an action or event when activated by the user.\n */\nexport const Button = ({\n  children,\n  design = 'filled',\n  disabled = false,\n  ariaDisabled = false,\n  intent = 'main',\n  isLoading = false,\n  loadingLabel,\n  loadingText,\n  shape = 'pill',\n  size = 'md',\n  asChild,\n  className,\n  underline = false,\n  appearance,\n  ref,\n  ...others\n}: ButtonProps) => {\n  const Component = asChild ? Slot : 'button'\n\n  const shouldNotInteract = !!disabled || !!ariaDisabled || isLoading\n  const useNativeDisabled = !!disabled && !ariaDisabled\n\n  const disabledEventHandlers = useMemo(() => {\n    const result: Partial<Record<DOMAttributesEventHandler, (e: React.SyntheticEvent) => void>> = {}\n\n    if (shouldNotInteract) {\n      blockedEventHandlers.forEach(key => {\n        result[key] = (e: React.SyntheticEvent) => {\n          // Allow Tab to move focus away from the button\n          if (e.type === 'keydown' && (e as React.KeyboardEvent).key === 'Tab') return\n          /*\n            Setting handlers to `undefined` (e.g. `result[eventHandler] = undefined`) only blocks JS-level handlers, it does not prevent native browser behavior.\n            Calling preventDefault() here also blocks native form submission when type=\"submit\", since the browser triggers it from the click chain.\n          */\n          e.preventDefault()\n        }\n      })\n    }\n\n    return result\n  }, [shouldNotInteract])\n\n  const spinnerProps = {\n    size: 'current' as SpinnerProps['size'],\n    className: loadingText ? 'inline-block' : 'absolute',\n    ...(loadingLabel && { 'aria-label': loadingLabel }),\n  }\n\n  // Use appearance styles when appearance is specified, otherwise use legacy styles\n  const buttonClassName = appearance\n    ? buttonAppearanceStyles({\n        className,\n        appearance,\n        disabled: shouldNotInteract,\n        size,\n        underline,\n      })\n    : buttonStyles({\n        className,\n        design,\n        disabled: shouldNotInteract,\n        intent,\n        shape,\n        size,\n        underline,\n      })\n\n  return (\n    <Component\n      data-spark-component=\"button\"\n      {...(Component === 'button' && { type: 'button' })}\n      ref={ref}\n      className={buttonClassName}\n      disabled={useNativeDisabled}\n      aria-disabled={shouldNotInteract ? true : undefined}\n      aria-busy={isLoading}\n      aria-live={isLoading ? 'assertive' : 'off'}\n      {...others}\n      {...disabledEventHandlers}\n    >\n      {wrapPolymorphicSlot(asChild, children, slotted =>\n        isLoading ? (\n          <>\n            <Spinner {...spinnerProps} />\n            {loadingText}\n\n            <div\n              aria-hidden\n              className={cx('gap-md', loadingText ? 'hidden' : 'inline-flex opacity-0')}\n            >\n              {slotted}\n            </div>\n          </>\n        ) : (\n          slotted\n        )\n      )}\n    </Component>\n  )\n}\n\nButton.displayName = 'Button'\n"],"mappings":";;;;;;;AAGA,IAAa,IAAyB,EACpC;CACE;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EAIR,WAAW,EACT,MAAM,CAAC,WAAW,EACpB;EAeA,YAAY;GACV,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;GACF;GACA,WAAW;IACT;IACA;IACA;IACA;IACA;IACA;GACF;GACA,UAAU;IACR;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,UAAU;IACR;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO,CAAC,uEAAuE;GAC/E,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EAIA,MAAM,EAAyC;GAC7C,IAAI,CAAC,qBAAqB;GAC1B,IAAI,CAAC,qBAAqB;GAC1B,IAAI,CAAC,qBAAqB;EAC5B,CAAC;EAID,UAAU;GACR,MAAM,CAAC,kCAAkC;GACzC,OAAO,CAAC,gBAAgB;EAC1B;CACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF,GC7Ha,IAAiB;CAE5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;AACF,GChIa,IAAgB;CAC3B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;AACF,GC/Ga,IAAmB;CAC9B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;AACF,GC/Ga,IAAiB;CAC5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;AACF,GC1Ha,IAAmB;CAC9B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;AACF,GCtGa,IAAe,EAC1B;CACE;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EAeR,QAAQ,EAA8E;GACpF,QAAQ,CAAC;GACT,UAAU;IAAC;IAAkB;IAAa;GAAgB;GAC1D,QAAQ,CAAC;GACT,OAAO,CAAC,0CAA0C;GAClD,UAAU,CAAC;EACb,CAAC;EACD,WAAW,EACT,MAAM,CAAC,WAAW,EACpB;EAIA,QAAQ,EAeN;GACA,MAAM,CAAC;GACP,SAAS,CAAC;GACV,QAAQ,CAAC;GACT,IAAI,CAAC;GACL,SAAS,CAAC;GACV,OAAO,CAAC;GACR,QAAQ,CAAC;GACT,MAAM,CAAC;GACP,SAAS,CAAC;GACV,SAAS,CAAC;GACV,gBAAgB,CAAC;EACnB,CAAC;EAID,MAAM,EAAyC;GAC7C,IAAI,CAAC,eAAe,SAAS;GAC7B,IAAI,CAAC,eAAe,SAAS;GAC7B,IAAI,CAAC,eAAe,SAAS;EAC/B,CAAC;EAID,OAAO,EAAqD;GAC1D,SAAS,CAAC,gBAAgB;GAC1B,QAAQ,CAAC,WAAW;GACpB,MAAM,CAAC,cAAc;EACvB,CAAC;EAID,UAAU;GACR,MAAM,CAAC,sBAAsB,eAAe;GAC5C,OAAO,CAAC,gBAAgB;EAC1B;CACF;CACA,kBAAkB;EAChB,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;CACL;CACA,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACR,MAAM;EACN,OAAO;CACT;AACF,CACF,GCtDM,IAAoD;CACxD;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GAKa,KAAU,EACrB,aACA,YAAS,UACT,cAAW,IACX,kBAAe,IACf,YAAS,QACT,eAAY,IACZ,iBACA,gBACA,WAAQ,QACR,UAAO,MACP,YACA,cACA,eAAY,IACZ,eACA,QACA,GAAG,QACc;CACjB,IAAM,IAAY,IAAU,IAAO,UAE7B,IAAoB,CAAC,CAAC,KAAY,CAAC,CAAC,KAAgB,GACpD,IAAoB,CAAC,CAAC,KAAY,CAAC,GAEnC,IAAwB,QAAc;EAC1C,IAAM,IAAwF,CAAC;EAgB/F,OAdI,KACF,EAAqB,SAAQ,MAAO;GAClC,EAAO,MAAQ,MAA4B;IAErC,EAAE,SAAS,aAAc,EAA0B,QAAQ,SAK/D,EAAE,eAAe;GACnB;EACF,CAAC,GAGI;CACT,GAAG,CAAC,CAAiB,CAAC,GAEhB,IAAe;EACnB,MAAM;EACN,WAAW,IAAc,iBAAiB;EAC1C,GAAI,KAAgB,EAAE,cAAc,EAAa;CACnD,GAGM,IAAkB,IACpB,EAAuB;EACrB;EACA;EACA,UAAU;EACV;EACA;CACF,CAAC,IACD,EAAa;EACX;EACA;EACA,UAAU;EACV;EACA;EACA;EACA;CACF,CAAC;CAEL,OACE,kBAAC,GAAD;EACE,wBAAqB;EACrB,GAAK,MAAc,YAAY,EAAE,MAAM,SAAS;EAC3C;EACL,WAAW;EACX,UAAU;EACV,iBAAe,IAAoB,KAAO,KAAA;EAC1C,aAAW;EACX,aAAW,IAAY,cAAc;EACrC,GAAI;EACJ,GAAI;YAEH,EAAoB,GAAS,IAAU,MACtC,IACE,kBAAA,GAAA,EAAA,UAAA;GACE,kBAAC,GAAD,EAAS,GAAI,EAAe,CAAA;GAC3B;GAED,kBAAC,OAAD;IACE,eAAA;IACA,WAAW,EAAG,UAAU,IAAc,WAAW,uBAAuB;cAEvE;GACE,CAAA;EACL,EAAA,CAAA,IAEF,CAEJ;CACS,CAAA;AAEf;AAEA,EAAO,cAAc"}
+{"version":3,"file":"button-DBNjh3Bi.mjs","names":[],"sources":["../src/button/Button.appearance-styles.tsx","../src/button/variants/filled.ts","../src/button/variants/ghost.ts","../src/button/variants/outlined.ts","../src/button/variants/tinted.ts","../src/button/variants/contrast.ts","../src/button/Button.styles.tsx","../src/button/Button.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const buttonAppearanceStyles = cva(\n  [\n    'u-shadow-border-transition',\n    'box-border inline-flex items-center justify-center gap-md whitespace-nowrap',\n    'default:px-lg',\n    'rounded-button',\n    'text-body-1-highlight',\n    'focus-visible:u-outline',\n  ],\n  {\n    variants: {\n      /**\n       * Add underline to the button text.\n       */\n      underline: {\n        true: ['underline'],\n      },\n      /**\n       * Semantic appearance of the button that combines design and intent.\n       * When specified, this prop overrides both `design` and `intent`.\n       *\n       * - `primary`: Main action, filled background\n       * - `secondary`: Secondary action, filled support background\n       * - `tertiary`: Tertiary action, outlined with surface background\n       * - `contrast`: Contrast action, surface background\n       * - `ghost`: Link-style without background\n       * - `success`: Success action, outlined with transparent background\n       * - `danger`: Danger action, outlined with transparent background\n       * - `boost`: Accent action, filled accent background\n       * - `AI`: AI action, filled AI background\n       */\n      appearance: {\n        primary: [\n          'bg-main',\n          'text-on-main',\n          'rounded-button',\n          'enabled:hover:bg-main-hovered',\n          'enabled:active:bg-main-hovered',\n          'enabled:focus-visible:bg-main-hovered',\n        ],\n        secondary: [\n          'bg-support',\n          'text-on-support',\n          'rounded-button',\n          'enabled:hover:bg-support-hovered',\n          'enabled:active:bg-support-hovered',\n          'enabled:focus-visible:bg-support-hovered',\n        ],\n        tertiary: [\n          'border-outline',\n          'border-sm',\n          'bg-surface',\n          'text-on-surface',\n          'rounded-button',\n          'enabled:hover:bg-surface-hovered',\n          'enabled:active:bg-surface-hovered',\n          'enabled:focus-visible:bg-surface-hovered',\n        ],\n        contrast: [\n          'bg-surface',\n          'text-on-surface',\n          'rounded-button',\n          'enabled:hover:bg-surface-hovered',\n          'enabled:active:bg-surface-hovered',\n          'enabled:focus-visible:bg-surface-hovered',\n        ],\n        ghost: ['text-on-surface default:-mx-md px-md enabled:hover:bg-surface-hovered'],\n        success: [\n          'border-outline',\n          'border-sm',\n          'bg-transparent',\n          'text-success',\n          'rounded-button',\n          'enabled:hover:bg-success-container',\n          'enabled:active:bg-success-container',\n          'enabled:focus-visible:bg-success-container',\n        ],\n        danger: [\n          'border-outline',\n          'border-sm',\n          'bg-transparent',\n          'text-error',\n          'rounded-button',\n          'enabled:hover:bg-error-container',\n          'enabled:active:bg-error-container',\n          'enabled:focus-visible:bg-error-container',\n        ],\n        boost: [\n          'bg-accent',\n          'text-on-accent',\n          'rounded-button',\n          'enabled:hover:bg-accent-hovered',\n          'enabled:active:bg-accent-hovered',\n          'enabled:focus-visible:bg-accent-hovered',\n        ],\n        AI: [\n          'bg-ai',\n          'text-on-ai',\n          'rounded-button',\n          'enabled:hover:bg-ai-hovered',\n          'enabled:active:bg-ai-hovered',\n          'enabled:focus-visible:bg-ai-hovered',\n        ],\n      },\n      /**\n       * Size of the button.\n       */\n      size: makeVariants<'size', ['sm', 'md', 'lg']>({\n        sm: ['min-w-sz-32 h-sz-32'],\n        md: ['min-w-sz-44 h-sz-44'],\n        lg: ['min-w-sz-56 h-sz-56'],\n      }),\n      /**\n       * Disable the button, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed opacity-dim-3'],\n        false: ['cursor-pointer'],\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n)\n\nexport type ButtonAppearanceStylesProps = VariantProps<typeof buttonAppearanceStyles>\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const filledVariants = [\n  // Main\n  {\n    intent: 'main',\n    design: 'filled',\n    class: tw([\n      'bg-main',\n      'text-on-main',\n      'hover:bg-main-hovered',\n      'enabled:active:bg-main-hovered',\n      'focus-visible:bg-main-hovered',\n    ]),\n  },\n  // Support\n  {\n    intent: 'support',\n    design: 'filled',\n    class: tw([\n      'bg-support',\n      'text-on-support',\n      'hover:bg-support-hovered',\n      'enabled:active:bg-support-hovered',\n      'focus-visible:bg-support-hovered',\n    ]),\n  },\n  // Accent\n  {\n    intent: 'accent',\n    design: 'filled',\n    class: tw([\n      'bg-accent',\n      'text-on-accent',\n      'hover:bg-accent-hovered',\n      'enabled:active:bg-accent-hovered',\n      'focus-visible:bg-accent-hovered',\n    ]),\n  },\n  // AI\n  {\n    intent: 'ai',\n    design: 'filled',\n    class: tw([\n      'bg-ai',\n      'text-on-ai',\n      'hover:bg-ai-hovered',\n      'enabled:active:bg-ai-hovered',\n      'focus-visible:bg-ai-hovered',\n    ]),\n  },\n  // Success\n  {\n    intent: 'success',\n    design: 'filled',\n    class: tw([\n      'bg-success',\n      'text-on-success',\n      'hover:bg-success-hovered',\n      'enabled:active:bg-success-hovered',\n      'focus-visible:bg-success-hovered',\n    ]),\n  },\n  // Alert\n  {\n    intent: 'alert',\n    design: 'filled',\n    class: tw([\n      'bg-alert',\n      'text-on-alert',\n      'hover:bg-alert-hovered',\n      'enabled:active:bg-alert-hovered',\n      'focus-visible:bg-alert-hovered',\n    ]),\n  },\n  // Danger\n  {\n    intent: 'danger',\n    design: 'filled',\n    class: tw([\n      'text-on-error bg-error',\n      'hover:bg-error-hovered enabled:active:bg-error-hovered',\n      'focus-visible:bg-error-hovered',\n    ]),\n  },\n  // Info\n  {\n    intent: 'info',\n    design: 'filled',\n    class: tw([\n      'text-on-error bg-info',\n      'hover:bg-info-hovered enabled:active:bg-info-hovered',\n      'focus-visible:bg-info-hovered',\n    ]),\n  },\n  // Neutral\n  {\n    intent: 'neutral',\n    design: 'filled',\n    class: tw([\n      'bg-neutral',\n      'text-on-neutral',\n      'hover:bg-neutral-hovered',\n      'enabled:active:bg-neutral-hovered',\n      'focus-visible:bg-neutral-hovered',\n    ]),\n  },\n  // Surface\n  {\n    intent: 'surface',\n    design: 'filled',\n    class: tw([\n      'bg-surface',\n      'text-on-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'filled',\n    class: tw([\n      'bg-surface-inverse',\n      'text-on-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const ghostVariants = [\n  {\n    intent: 'main',\n    design: 'ghost',\n    class: tw([\n      'text-on-main-container',\n      'hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'ghost',\n    class: tw([\n      'text-on-support-container',\n      'hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'ghost',\n    class: tw([\n      'text-on-accent-container',\n      'hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'ghost',\n    class: tw([\n      'text-on-ai-container',\n      'hover:bg-ai/dim-5',\n      'enabled:active:bg-ai/dim-5',\n      'focus-visible:bg-ai/dim-5',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'ghost',\n    class: tw([\n      'text-on-success-container',\n      'hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'ghost',\n    class: tw([\n      'text-on-alert-container',\n      'hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'ghost',\n    class: tw([\n      'text-on-error-container',\n      'hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'ghost',\n    class: tw([\n      'text-on-info-container',\n      'hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'ghost',\n    class: tw([\n      'text-on-neutral-container',\n      'hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'ghost',\n    class: tw([\n      'text-surface',\n      'hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'ghost',\n    class: tw([\n      'text-surface-inverse',\n      'hover:bg-surface-inverse/dim-5',\n      'enabled:active:bg-surface-inverse/dim-5',\n      'focus-visible:bg-surface-inverse/dim-5',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n  {\n    intent: 'main',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'text-main',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'text-accent',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-ai/dim-5',\n      'enabled:active:bg-ai/dim-5',\n      'focus-visible:bg-ai/dim-5',\n      'text-ai',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'text-alert',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'text-error',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'text-info',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'text-neutral',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'text-surface',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-surface-inverse/dim-5',\n      'enabled:active:bg-surface-inverse/dim-5',\n      'focus-visible:bg-surface-inverse/dim-5',\n      'text-surface-inverse',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw([\n      'bg-main-container',\n      'text-on-main-container',\n      'hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw([\n      'bg-support-container',\n      'text-on-support-container',\n      'hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw([\n      'bg-accent-container',\n      'text-on-accent-container',\n      'hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'tinted',\n    class: tw([\n      'bg-ai-container',\n      'text-on-ai-container',\n      'hover:bg-ai-container-hovered',\n      'enabled:active:bg-ai-container-hovered',\n      'focus-visible:bg-ai-container-hovered',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw([\n      'bg-success-container',\n      'text-on-success-container',\n      'hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw([\n      'bg-alert-container',\n      'text-on-alert-container',\n      'hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw([\n      'bg-error-container',\n      'text-on-error-container',\n      'hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw([\n      'bg-info-container',\n      'text-on-info-container',\n      'hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw([\n      'bg-neutral-container',\n      'text-on-neutral-container',\n      'hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'tinted',\n    class: tw([\n      'bg-surface',\n      'text-on-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'tinted',\n    class: tw([\n      'bg-surface-inverse',\n      'text-on-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const contrastVariants = [\n  {\n    intent: 'main',\n    design: 'contrast',\n    class: tw([\n      'text-on-main-contaier bg-surface',\n      'hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'contrast',\n    class: tw([\n      'text-on-support-container bg-surface',\n      'hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'contrast',\n    class: tw([\n      'text-on-accent-container bg-surface',\n      'hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'contrast',\n    class: tw([\n      'text-on-ai-container bg-surface',\n      'hover:bg-ai-container-hovered',\n      'enabled:active:bg-ai-container-hovered',\n      'focus-visible:bg-ai-container-hovered',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'contrast',\n    class: tw([\n      'text-on-success-container bg-surface',\n      'hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'contrast',\n    class: tw([\n      'text-on-alert-container bg-surface',\n      'hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'contrast',\n    class: tw([\n      'text-on-error-container bg-surface',\n      'hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'contrast',\n    class: tw([\n      'text-on-info-container bg-surface',\n      'hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'contrast',\n    class: tw([\n      'text-on-neutral-container bg-surface',\n      'hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'contrast',\n    class: tw([\n      'text-on-surface bg-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'contrast',\n    class: tw([\n      'text-on-surface-inverse bg-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport {\n  contrastVariants,\n  filledVariants,\n  ghostVariants,\n  outlinedVariants,\n  tintedVariants,\n} from './variants'\n\nexport const buttonStyles = cva(\n  [\n    'u-shadow-border-transition',\n    'box-border inline-flex items-center justify-center gap-md whitespace-nowrap',\n    'default:px-lg',\n    'text-body-1-highlight',\n    'focus-visible:u-outline',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the button.\n       *\n       * - `filled`: Button will be plain.\n       *\n       * - `outlined`: Button will be transparent with an outline.\n       *\n       * - `tinted`: Button will be filled but using a lighter color scheme.\n       *\n       * - `ghost`: Button will look like a link. No borders, plain text.\n       *\n       * - `contrast`: Button will be surface filled. No borders, plain text.\n       *\n       */\n      design: makeVariants<'design', ['filled', 'outlined', 'tinted', 'ghost', 'contrast']>({\n        filled: [],\n        outlined: ['bg-transparent', 'border-sm', 'border-current'],\n        tinted: [],\n        ghost: ['default:-mx-md px-md hover:bg-main/dim-5'],\n        contrast: [],\n      }),\n      underline: {\n        true: ['underline'],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'ai',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        ai: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n        surfaceInverse: [],\n      }),\n      /**\n       * Size of the button.\n       */\n      size: makeVariants<'size', ['sm', 'md', 'lg']>({\n        sm: ['min-w-sz-32', 'h-sz-32'],\n        md: ['min-w-sz-44', 'h-sz-44'],\n        lg: ['min-w-sz-56', 'h-sz-56'],\n      }),\n      /**\n       * Shape of the button.\n       */\n      shape: makeVariants<'shape', ['rounded', 'square', 'pill']>({\n        rounded: ['rounded-button'],\n        square: ['rounded-0'],\n        pill: ['rounded-full'],\n      }),\n      /**\n       * Disable the button, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed', 'opacity-dim-3'],\n        false: ['cursor-pointer'],\n      },\n    },\n    compoundVariants: [\n      ...filledVariants,\n      ...outlinedVariants,\n      ...tintedVariants,\n      ...ghostVariants,\n      ...contrastVariants,\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'main',\n      size: 'md',\n      shape: 'rounded',\n    },\n  }\n)\n\nexport type ButtonStylesProps = VariantProps<typeof buttonStyles>\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, type DOMAttributes, Ref, useMemo } from 'react'\n\nimport { Slot, wrapPolymorphicSlot } from '../slot'\nimport { Spinner, type SpinnerProps } from '../spinner'\nimport {\n  buttonAppearanceStyles,\n  type ButtonAppearanceStylesProps,\n} from './Button.appearance-styles'\nimport { buttonStyles, type ButtonStylesProps } from './Button.styles'\n\nexport interface ButtonProps\n  extends\n    Omit<ComponentPropsWithoutRef<'button'>, 'disabled'>,\n    Omit<ButtonStylesProps, 'design' | 'intent'>,\n    Pick<ButtonAppearanceStylesProps, 'appearance'> {\n  /**\n   * Main style of the button.\n   */\n  design?: ButtonStylesProps['design']\n  /**\n   * Color scheme of the button.\n   */\n  intent?: ButtonStylesProps['intent']\n  /**\n   * Combined appearance preset (replaces `design` and `intent`).\n   * @beta This API is in beta and may change in future versions.\n   */\n  appearance?: ButtonAppearanceStylesProps['appearance']\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Display a spinner to indicate to the user that the button is loading something after they interacted with it.\n   */\n  isLoading?: boolean\n  /**\n   * If your loading state should only display a spinner, it is better to specify a label for it (a11y).\n   */\n  loadingLabel?: string\n  /**\n   * If your loading state should also display a label, you can use this prop instead of `loadingLabel`.\n   * **Please note that using this can result in layout shifting when the Button goes from loading state to normal state.**\n   */\n  loadingText?: string\n  /**\n   * When true, the button is non-interactive and has disabled styling but stays focusable (uses\n   * `aria-disabled` instead of native `disabled`). Use for cases where the user should be able to\n   * focus the control to discover why it is disabled (e.g. form submit, bulk bar actions).\n   */\n  ariaDisabled?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\ntype DOMAttributesEventHandler = keyof Omit<\n  DOMAttributes<HTMLButtonElement>,\n  'children' | 'dangerouslySetInnerHTML'\n>\n\nconst blockedEventHandlers: DOMAttributesEventHandler[] = [\n  'onClick',\n  'onMouseDown',\n  'onMouseUp',\n  'onMouseEnter',\n  'onMouseLeave',\n  'onMouseOver',\n  'onMouseOut',\n  'onKeyDown',\n  'onKeyPress',\n  'onKeyUp',\n  'onSubmit',\n]\n\n/**\n * A clickable element that triggers an action or event when activated by the user.\n */\nexport const Button = ({\n  children,\n  design = 'filled',\n  disabled = false,\n  ariaDisabled = false,\n  intent = 'main',\n  isLoading = false,\n  loadingLabel,\n  loadingText,\n  shape = 'pill',\n  size = 'md',\n  asChild,\n  className,\n  underline = false,\n  appearance,\n  ref,\n  ...others\n}: ButtonProps) => {\n  const Component = asChild ? Slot : 'button'\n\n  const shouldNotInteract = !!disabled || !!ariaDisabled || isLoading\n  const useNativeDisabled = !!disabled && !ariaDisabled\n\n  const disabledEventHandlers = useMemo(() => {\n    const result: Partial<Record<DOMAttributesEventHandler, (e: React.SyntheticEvent) => void>> = {}\n\n    if (shouldNotInteract) {\n      blockedEventHandlers.forEach(key => {\n        result[key] = (e: React.SyntheticEvent) => {\n          // Allow Tab to move focus away from the button\n          if (e.type === 'keydown' && (e as React.KeyboardEvent).key === 'Tab') return\n          /*\n            Setting handlers to `undefined` (e.g. `result[eventHandler] = undefined`) only blocks JS-level handlers, it does not prevent native browser behavior.\n            Calling preventDefault() here also blocks native form submission when type=\"submit\", since the browser triggers it from the click chain.\n          */\n          e.preventDefault()\n        }\n      })\n    }\n\n    return result\n  }, [shouldNotInteract])\n\n  const spinnerProps = {\n    size: 'current' as SpinnerProps['size'],\n    className: loadingText ? 'inline-block' : 'absolute',\n    ...(loadingLabel && { 'aria-label': loadingLabel }),\n  }\n\n  // Use appearance styles when appearance is specified, otherwise use legacy styles\n  const buttonClassName = appearance\n    ? buttonAppearanceStyles({\n        className,\n        appearance,\n        disabled: shouldNotInteract,\n        size,\n        underline,\n      })\n    : buttonStyles({\n        className,\n        design,\n        disabled: shouldNotInteract,\n        intent,\n        shape,\n        size,\n        underline,\n      })\n\n  return (\n    <Component\n      data-spark-component=\"button\"\n      {...(Component === 'button' && { type: 'button' })}\n      ref={ref}\n      className={buttonClassName}\n      disabled={useNativeDisabled}\n      aria-disabled={shouldNotInteract ? true : undefined}\n      aria-busy={isLoading}\n      aria-live={isLoading ? 'assertive' : 'off'}\n      {...others}\n      {...disabledEventHandlers}\n    >\n      {wrapPolymorphicSlot(asChild, children, slotted =>\n        isLoading ? (\n          <>\n            <Spinner {...spinnerProps} />\n            {loadingText}\n\n            <div\n              aria-hidden\n              className={cx('gap-md', loadingText ? 'hidden' : 'inline-flex opacity-0')}\n            >\n              {slotted}\n            </div>\n          </>\n        ) : (\n          slotted\n        )\n      )}\n    </Component>\n  )\n}\n\nButton.displayName = 'Button'\n"],"mappings":";;;;;;;AAGA,IAAa,IAAyB,EACpC;CACE;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EAIR,WAAW,EACT,MAAM,CAAC,WAAW,EACpB;EAeA,YAAY;GACV,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;GACF;GACA,WAAW;IACT;IACA;IACA;IACA;IACA;IACA;GACF;GACA,UAAU;IACR;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,UAAU;IACR;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO,CAAC,uEAAuE;GAC/E,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EAIA,MAAM,EAAyC;GAC7C,IAAI,CAAC,qBAAqB;GAC1B,IAAI,CAAC,qBAAqB;GAC1B,IAAI,CAAC,qBAAqB;EAC5B,CAAC;EAID,UAAU;GACR,MAAM,CAAC,kCAAkC;GACzC,OAAO,CAAC,gBAAgB;EAC1B;CACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF,GC7Ha,IAAiB;CAE5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;AACF,GChIa,IAAgB;CAC3B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;AACF,GC/Ga,IAAmB;CAC9B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;AACF,GC/Ga,IAAiB;CAC5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;AACF,GC1Ha,IAAmB;CAC9B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;AACF,GCtGa,IAAe,EAC1B;CACE;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EAeR,QAAQ,EAA8E;GACpF,QAAQ,CAAC;GACT,UAAU;IAAC;IAAkB;IAAa;GAAgB;GAC1D,QAAQ,CAAC;GACT,OAAO,CAAC,0CAA0C;GAClD,UAAU,CAAC;EACb,CAAC;EACD,WAAW,EACT,MAAM,CAAC,WAAW,EACpB;EAIA,QAAQ,EAeN;GACA,MAAM,CAAC;GACP,SAAS,CAAC;GACV,QAAQ,CAAC;GACT,IAAI,CAAC;GACL,SAAS,CAAC;GACV,OAAO,CAAC;GACR,QAAQ,CAAC;GACT,MAAM,CAAC;GACP,SAAS,CAAC;GACV,SAAS,CAAC;GACV,gBAAgB,CAAC;EACnB,CAAC;EAID,MAAM,EAAyC;GAC7C,IAAI,CAAC,eAAe,SAAS;GAC7B,IAAI,CAAC,eAAe,SAAS;GAC7B,IAAI,CAAC,eAAe,SAAS;EAC/B,CAAC;EAID,OAAO,EAAqD;GAC1D,SAAS,CAAC,gBAAgB;GAC1B,QAAQ,CAAC,WAAW;GACpB,MAAM,CAAC,cAAc;EACvB,CAAC;EAID,UAAU;GACR,MAAM,CAAC,sBAAsB,eAAe;GAC5C,OAAO,CAAC,gBAAgB;EAC1B;CACF;CACA,kBAAkB;EAChB,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;CACL;CACA,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACR,MAAM;EACN,OAAO;CACT;AACF,CACF,GCtDM,IAAoD;CACxD;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GAKa,KAAU,EACrB,aACA,YAAS,UACT,cAAW,IACX,kBAAe,IACf,YAAS,QACT,eAAY,IACZ,iBACA,gBACA,WAAQ,QACR,UAAO,MACP,YACA,cACA,eAAY,IACZ,eACA,QACA,GAAG,QACc;CACjB,IAAM,IAAY,IAAU,IAAO,UAE7B,IAAoB,CAAC,CAAC,KAAY,CAAC,CAAC,KAAgB,GACpD,IAAoB,CAAC,CAAC,KAAY,CAAC,GAEnC,IAAwB,QAAc;EAC1C,IAAM,IAAwF,CAAC;EAgB/F,OAdI,KACF,EAAqB,SAAQ,MAAO;GAClC,EAAO,MAAQ,MAA4B;IAErC,EAAE,SAAS,aAAc,EAA0B,QAAQ,SAK/D,EAAE,eAAe;GACnB;EACF,CAAC,GAGI;CACT,GAAG,CAAC,CAAiB,CAAC,GAEhB,IAAe;EACnB,MAAM;EACN,WAAW,IAAc,iBAAiB;EAC1C,GAAI,KAAgB,EAAE,cAAc,EAAa;CACnD,GAGM,IAAkB,IACpB,EAAuB;EACrB;EACA;EACA,UAAU;EACV;EACA;CACF,CAAC,IACD,EAAa;EACX;EACA;EACA,UAAU;EACV;EACA;EACA;EACA;CACF,CAAC;CAEL,OACE,kBAAC,GAAD;EACE,wBAAqB;EACrB,GAAK,MAAc,YAAY,EAAE,MAAM,SAAS;EAC3C;EACL,WAAW;EACX,UAAU;EACV,iBAAe,IAAoB,KAAO,KAAA;EAC1C,aAAW;EACX,aAAW,IAAY,cAAc;EACrC,GAAI;EACJ,GAAI;YAEH,EAAoB,GAAS,IAAU,MACtC,IACE,kBAAA,GAAA,EAAA,UAAA;GACE,kBAAC,GAAD,EAAS,GAAI,EAAe,CAAA;GAC3B;GAED,kBAAC,OAAD;IACE,eAAA;IACA,WAAW,EAAG,UAAU,IAAc,WAAW,uBAAuB;cAEvE;GACE,CAAA;EACL,EAAA,CAAA,IAEF,CAEJ;CACS,CAAA;AAEf;AAEA,EAAO,cAAc"}

package/dist/card/Backdrop.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 export declare const backdropStyles: (props?: ({
     animation?: "none" | "pulse" | null | undefined;
-    intent?: "main" | "alert" | "surface" | "support" | "accent" | "success" | "info" | "neutral" | "danger" | "surfaceInverse" | null | undefined;
+    intent?: "main" | "surface" | "support" | "alert" | "accent" | "success" | "info" | "neutral" | "danger" | "surfaceInverse" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type BackdropStylesProps = VariantProps<typeof backdropStyles>;
 interface BackdropProps extends BackdropStylesProps {

package/dist/card/Card.styles.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 export declare const cardStyles: (props?: ({
     design?: "outlined" | "tinted" | null | undefined;
-    intent?: "main" | "alert" | "surface" | "support" | "accent" | "success" | "info" | "neutral" | "danger" | null | undefined;
+    intent?: "main" | "surface" | "support" | "alert" | "accent" | "success" | "info" | "neutral" | "danger" | null | undefined;
     hasType?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type CardStylesProps = VariantProps<typeof cardStyles>;

package/dist/card/Content.styles.d.ts

@@ -3,6 +3,6 @@ export declare const contentStyles: (props?: ({
     inset?: boolean | null | undefined;
     design?: "outlined" | "tinted" | null | undefined;
     hasType?: boolean | null | undefined;
-    intent?: "main" | "alert" | "surface" | "support" | "accent" | "success" | "info" | "neutral" | "danger" | null | undefined;
+    intent?: "main" | "surface" | "support" | "alert" | "accent" | "success" | "info" | "neutral" | "danger" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type ContentStylesProps = VariantProps<typeof contentStyles>;

package/dist/card/Type.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import { ComponentProps, ReactNode } from 'react';
 export declare const typeStyles: (props?: ({
-    intent?: "main" | "alert" | "surface" | "support" | "accent" | "success" | "info" | "neutral" | "danger" | null | undefined;
+    intent?: "main" | "surface" | "support" | "alert" | "accent" | "success" | "info" | "neutral" | "danger" | null | undefined;
     design?: "outlined" | "tinted" | null | undefined;
     hasMediumBorder?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/card/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../slot/index.js");let t=require("class-variance-authority"),n=require("react"),r=require("react/jsx-runtime"),i=require("@spark-ui/internal-utils");var a=(0,t.cva)([`group relative bg-clip-padding default:rounded-lg focus-visible:u-outline`,`disabled:opacity-dim-3 disabled:cursor-not-allowed`],{variants:{design:{outlined:[],tinted:[]},intent:(0,i.makeVariants)({main:[],support:[],accent:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[]}),hasType:{true:[],false:[]}},compoundVariants:[{intent:`main`,design:`outlined`,class:(0,i.tw)([`border-main`])},{intent:`support`,design:`outlined`,class:(0,i.tw)([`border-support`])},{intent:`accent`,design:`outlined`,class:(0,i.tw)([`border-accent`])},{intent:`success`,design:`outlined`,class:(0,i.tw)([`border-success`])},{intent:`alert`,design:`outlined`,class:(0,i.tw)([`border-alert`])},{intent:`danger`,design:`outlined`,class:(0,i.tw)([`border-error`])},{intent:`info`,design:`outlined`,class:(0,i.tw)([`border-info`])},{intent:`neutral`,design:`outlined`,class:(0,i.tw)([`border-neutral`])},{intent:`surface`,design:`outlined`,class:(0,i.tw)([`border-outline`])},{design:`outlined`,hasType:!0,class:(0,i.tw)([`border-md`])},{design:`outlined`,hasType:!1,class:(0,i.tw)([`border-sm`])}],defaultVariants:{design:`outlined`,intent:`surface`}}),o=(0,n.createContext)(void 0),s=()=>{let e=(0,n.useContext)(o);if(!e)throw Error(`useCardContext must be used within a Card component`);return e},c=[`onClick`,`onMouseDown`,`onMouseUp`,`onMouseEnter`,`onMouseLeave`,`onMouseMove`,`onMouseOver`,`onMouseOut`,`onDoubleClick`,`onContextMenu`],l=e=>{let t=!1,r=e=>{t||n.Children.forEach(e,e=>{if(!t&&(0,n.isValidElement)(e)){if(typeof e.type==`function`&&e.type.displayName===`Card.Type`){t=!0;return}if(e.props&&typeof e.props==`object`&&`children`in e.props){let t=e.props.children;t!=null&&r(t)}}})};return r(e),t},u=(e,t,r)=>{if(c.some(e=>e in r))return!0;if(!t)return!1;let i=n.Children.only(e);if(!(0,n.isValidElement)(i))return!1;if(typeof i.type==`string`&&[`a`,`button`].includes(i.type))return!0;let a=i.props;return c.some(e=>e in a)},d=({children:t,design:n=`outlined`,intent:i=`surface`,inset:s=!1,asChild:c,className:d,ref:f,...p})=>{let m=c?e.Slot:`div`,h=l(t),g=u(t,c,p);return(0,r.jsx)(o,{value:{design:n,intent:i,hasType:h,inset:s,isInteractive:g},children:(0,r.jsx)(m,{"data-spark-component":`card`,"data-interactive":g,ref:f,className:a({className:d,design:n,intent:i,hasType:h}),...p,children:t})})};d.displayName=`Card`;var f=(0,t.cva)([`relative default:rounded-lg w-full focus-visible:u-outline`,`default:transition-colors default:duration-200 ease-linear`],{variants:{inset:{false:[`default:p-lg`]},design:{outlined:[`default:bg-surface group-focus:bg-surface-hovered group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered`],tinted:[]},hasType:{true:[`rounded-t-0`]},intent:(0,i.makeVariants)({main:[],support:[],accent:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[]})},compoundVariants:[{intent:`main`,design:`tinted`,class:(0,i.tw)([`bg-main-container text-on-main-container group-focus:bg-main-container-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-container-hovered`])},{intent:`support`,design:`tinted`,class:(0,i.tw)([`bg-support-container text-on-support-container group-focus:bg-support-container-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-container-hovered`])},{intent:`accent`,design:`tinted`,class:(0,i.tw)([`bg-accent-container text-on-accent-container group-focus:bg-accent-container-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-container-hovered`])},{intent:`success`,design:`tinted`,class:(0,i.tw)([`bg-success-container text-on-success-container group-focus:bg-success-container-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-container-hovered`])},{intent:`alert`,design:`tinted`,class:(0,i.tw)([`bg-alert-container text-on-alert-container group-focus:bg-alert-container-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-container-hovered`])},{intent:`danger`,design:`tinted`,class:(0,i.tw)([`bg-error-container text-on-error-container group-focus:bg-error-container-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-container-hovered`])},{intent:`info`,design:`tinted`,class:(0,i.tw)([`bg-info-container text-on-info-container group-focus:bg-info-container-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-container-hovered`])},{intent:`neutral`,design:`tinted`,class:(0,i.tw)([`bg-neutral-container text-on-neutral-container group-focus:bg-neutral-container-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-container-hovered`])},{intent:`surface`,design:`tinted`,class:(0,i.tw)([`bg-surface text-on-surface group-focus:bg-surface-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered`])}],defaultVariants:{design:`outlined`,intent:`surface`,inset:!1,hasType:!0}}),p=({children:t,inset:n,asChild:i,className:a,ref:o,...c})=>{let l=i?e.Slot:`div`,{design:u,intent:d,hasType:p}=s();return(0,r.jsx)(l,{"data-spark-component":`card-content`,ref:o,className:f({className:a,design:u,intent:d,inset:n,hasType:p}),...c,children:t})};p.displayName=`Content`;var m=(0,t.cva)([`rounded-t-lg default:text-body-2-highlight`,`default:text-center`,`min-h-sz-32`,`px-md`,`py-xs`,`flex items-center justify-center`,`whitespace-normal break-words`],{variants:{intent:{main:[`bg-main text-on-main`],support:[`bg-support text-on-support`],accent:[`bg-accent text-on-accent`],success:[`bg-success text-on-success`],alert:[`bg-alert text-on-alert`],danger:[`bg-error text-on-error`],info:[`bg-info text-on-info`],neutral:[`bg-neutral text-on-neutral`],surface:[`bg-surface-inverse text-on-surface-inverse`]},design:{outlined:[],tinted:[]},hasMediumBorder:{true:[],false:[]}},compoundVariants:[{design:`outlined`,hasMediumBorder:!1,class:`-mx-px -mt-px`},{design:`outlined`,hasMediumBorder:!0,class:`-mx-(--border-width-md) -mt-(--border-width-md)`}],defaultVariants:{intent:`main`,design:`outlined`,hasMediumBorder:!1}}),h=({intent:e,children:t,...n})=>{let i=s(),a=e??i.intent??`main`,o=i.design===`outlined`&&i.hasType;return t?(0,r.jsx)(`header`,{className:m({intent:a,design:i.design,hasMediumBorder:o}),...n,children:t}):null};h.displayName=`Card.Type`;var g=Object.assign(d,{Content:p,Type:h});g.displayName=`Card`,p.displayName=`Card.Content`,h.displayName=`Card.Type`,exports.Card=g;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../slot/index.js");let t=require("@spark-ui/internal-utils"),n=require("class-variance-authority"),r=require("react"),i=require("react/jsx-runtime");var a=(0,n.cva)([`group relative bg-clip-padding default:rounded-lg focus-visible:u-outline`,`disabled:opacity-dim-3 disabled:cursor-not-allowed`],{variants:{design:{outlined:[],tinted:[]},intent:(0,t.makeVariants)({main:[],support:[],accent:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[]}),hasType:{true:[],false:[]}},compoundVariants:[{intent:`main`,design:`outlined`,class:(0,t.tw)([`border-main`])},{intent:`support`,design:`outlined`,class:(0,t.tw)([`border-support`])},{intent:`accent`,design:`outlined`,class:(0,t.tw)([`border-accent`])},{intent:`success`,design:`outlined`,class:(0,t.tw)([`border-success`])},{intent:`alert`,design:`outlined`,class:(0,t.tw)([`border-alert`])},{intent:`danger`,design:`outlined`,class:(0,t.tw)([`border-error`])},{intent:`info`,design:`outlined`,class:(0,t.tw)([`border-info`])},{intent:`neutral`,design:`outlined`,class:(0,t.tw)([`border-neutral`])},{intent:`surface`,design:`outlined`,class:(0,t.tw)([`border-outline`])},{design:`outlined`,hasType:!0,class:(0,t.tw)([`border-md`])},{design:`outlined`,hasType:!1,class:(0,t.tw)([`border-sm`])}],defaultVariants:{design:`outlined`,intent:`surface`}}),o=(0,r.createContext)(void 0),s=()=>{let e=(0,r.useContext)(o);if(!e)throw Error(`useCardContext must be used within a Card component`);return e},c=[`onClick`,`onMouseDown`,`onMouseUp`,`onMouseEnter`,`onMouseLeave`,`onMouseMove`,`onMouseOver`,`onMouseOut`,`onDoubleClick`,`onContextMenu`],l=e=>{let t=!1,n=e=>{t||r.Children.forEach(e,e=>{if(!t&&(0,r.isValidElement)(e)){if(typeof e.type==`function`&&e.type.displayName===`Card.Type`){t=!0;return}if(e.props&&typeof e.props==`object`&&`children`in e.props){let t=e.props.children;t!=null&&n(t)}}})};return n(e),t},u=(e,t,n)=>{if(c.some(e=>e in n))return!0;if(!t)return!1;let i=r.Children.only(e);if(!(0,r.isValidElement)(i))return!1;if(typeof i.type==`string`&&[`a`,`button`].includes(i.type))return!0;let a=i.props;return c.some(e=>e in a)},d=({children:t,design:n=`outlined`,intent:r=`surface`,inset:s=!1,asChild:c,className:d,ref:f,...p})=>{let m=c?e.Slot:`div`,h=l(t),g=u(t,c,p);return(0,i.jsx)(o,{value:{design:n,intent:r,hasType:h,inset:s,isInteractive:g},children:(0,i.jsx)(m,{"data-spark-component":`card`,"data-interactive":g,ref:f,className:a({className:d,design:n,intent:r,hasType:h}),...p,children:t})})};d.displayName=`Card`;var f=(0,n.cva)([`relative default:rounded-lg w-full focus-visible:u-outline`,`default:transition-colors default:duration-200 ease-linear`],{variants:{inset:{false:[`default:p-lg`]},design:{outlined:[`default:bg-surface group-focus:bg-surface-hovered group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered`],tinted:[]},hasType:{true:[`rounded-t-0`]},intent:(0,t.makeVariants)({main:[],support:[],accent:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[]})},compoundVariants:[{intent:`main`,design:`tinted`,class:(0,t.tw)([`bg-main-container text-on-main-container group-focus:bg-main-container-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-container-hovered`])},{intent:`support`,design:`tinted`,class:(0,t.tw)([`bg-support-container text-on-support-container group-focus:bg-support-container-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-container-hovered`])},{intent:`accent`,design:`tinted`,class:(0,t.tw)([`bg-accent-container text-on-accent-container group-focus:bg-accent-container-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-container-hovered`])},{intent:`success`,design:`tinted`,class:(0,t.tw)([`bg-success-container text-on-success-container group-focus:bg-success-container-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-container-hovered`])},{intent:`alert`,design:`tinted`,class:(0,t.tw)([`bg-alert-container text-on-alert-container group-focus:bg-alert-container-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-container-hovered`])},{intent:`danger`,design:`tinted`,class:(0,t.tw)([`bg-error-container text-on-error-container group-focus:bg-error-container-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-container-hovered`])},{intent:`info`,design:`tinted`,class:(0,t.tw)([`bg-info-container text-on-info-container group-focus:bg-info-container-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-container-hovered`])},{intent:`neutral`,design:`tinted`,class:(0,t.tw)([`bg-neutral-container text-on-neutral-container group-focus:bg-neutral-container-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-container-hovered`])},{intent:`surface`,design:`tinted`,class:(0,t.tw)([`bg-surface text-on-surface group-focus:bg-surface-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered`])}],defaultVariants:{design:`outlined`,intent:`surface`,inset:!1,hasType:!0}}),p=({children:t,inset:n,asChild:r,className:a,ref:o,...c})=>{let l=r?e.Slot:`div`,{design:u,intent:d,hasType:p}=s();return(0,i.jsx)(l,{"data-spark-component":`card-content`,ref:o,className:f({className:a,design:u,intent:d,inset:n,hasType:p}),...c,children:t})};p.displayName=`Content`;var m=(0,n.cva)([`rounded-t-lg default:text-body-2-highlight`,`default:text-center`,`min-h-sz-32`,`px-md`,`py-xs`,`flex items-center justify-center`,`whitespace-normal break-words`],{variants:{intent:{main:[`bg-main text-on-main`],support:[`bg-support text-on-support`],accent:[`bg-accent text-on-accent`],success:[`bg-success text-on-success`],alert:[`bg-alert text-on-alert`],danger:[`bg-error text-on-error`],info:[`bg-info text-on-info`],neutral:[`bg-neutral text-on-neutral`],surface:[`bg-surface-inverse text-on-surface-inverse`]},design:{outlined:[],tinted:[]},hasMediumBorder:{true:[],false:[]}},compoundVariants:[{design:`outlined`,hasMediumBorder:!1,class:`-mx-px -mt-px`},{design:`outlined`,hasMediumBorder:!0,class:`-mx-(--border-width-md) -mt-(--border-width-md)`}],defaultVariants:{intent:`main`,design:`outlined`,hasMediumBorder:!1}}),h=({intent:e,children:t,...n})=>{let r=s(),a=e??r.intent??`main`,o=r.design===`outlined`&&r.hasType;return t?(0,i.jsx)(`header`,{className:m({intent:a,design:r.design,hasMediumBorder:o}),...n,children:t}):null};h.displayName=`Card.Type`;var g=Object.assign(d,{Content:p,Type:h});g.displayName=`Card`,p.displayName=`Card.Content`,h.displayName=`Card.Type`,exports.Card=g;
 //# sourceMappingURL=index.js.map

package/dist/card/index.mjs

@@ -1,16 +1,16 @@
 import { Slot as e } from "../slot/index.mjs";
-import { cva as t } from "class-variance-authority";
-import { Children as n, createContext as r, isValidElement as i, useContext as a } from "react";
-import { jsx as o } from "react/jsx-runtime";
-import { makeVariants as s, tw as c } from "@spark-ui/internal-utils";
+import { makeVariants as t, tw as n } from "@spark-ui/internal-utils";
+import { cva as r } from "class-variance-authority";
+import { Children as i, createContext as a, isValidElement as o, useContext as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
 //#region src/card/Card.styles.tsx
-var l = t(["group relative bg-clip-padding default:rounded-lg focus-visible:u-outline", "disabled:opacity-dim-3 disabled:cursor-not-allowed"], {
+var l = r(["group relative bg-clip-padding default:rounded-lg focus-visible:u-outline", "disabled:opacity-dim-3 disabled:cursor-not-allowed"], {
 	variants: {
 		design: {
 			outlined: [],
 			tinted: []
 		},
-		intent: s({
+		intent: t({
 			main: [],
 			support: [],
 			accent: [],
@@ -30,65 +30,65 @@ var l = t(["group relative bg-clip-padding default:rounded-lg focus-visible:u-ou
 		{
 			intent: "main",
 			design: "outlined",
-			class: c(["border-main"])
+			class: n(["border-main"])
 		},
 		{
 			intent: "support",
 			design: "outlined",
-			class: c(["border-support"])
+			class: n(["border-support"])
 		},
 		{
 			intent: "accent",
 			design: "outlined",
-			class: c(["border-accent"])
+			class: n(["border-accent"])
 		},
 		{
 			intent: "success",
 			design: "outlined",
-			class: c(["border-success"])
+			class: n(["border-success"])
 		},
 		{
 			intent: "alert",
 			design: "outlined",
-			class: c(["border-alert"])
+			class: n(["border-alert"])
 		},
 		{
 			intent: "danger",
 			design: "outlined",
-			class: c(["border-error"])
+			class: n(["border-error"])
 		},
 		{
 			intent: "info",
 			design: "outlined",
-			class: c(["border-info"])
+			class: n(["border-info"])
 		},
 		{
 			intent: "neutral",
 			design: "outlined",
-			class: c(["border-neutral"])
+			class: n(["border-neutral"])
 		},
 		{
 			intent: "surface",
 			design: "outlined",
-			class: c(["border-outline"])
+			class: n(["border-outline"])
 		},
 		{
 			design: "outlined",
 			hasType: !0,
-			class: c(["border-md"])
+			class: n(["border-md"])
 		},
 		{
 			design: "outlined",
 			hasType: !1,
-			class: c(["border-sm"])
+			class: n(["border-sm"])
 		}
 	],
 	defaultVariants: {
 		design: "outlined",
 		intent: "surface"
 	}
-}), u = r(void 0), d = () => {
-	let e = a(u);
+}), u = a(void 0), d = () => {
+	let e = s(u);
 	if (!e) throw Error("useCardContext must be used within a Card component");
 	return e;
 }, f = [
@@ -103,32 +103,32 @@ var l = t(["group relative bg-clip-padding default:rounded-lg focus-visible:u-ou
 	"onDoubleClick",
 	"onContextMenu"
 ], p = (e) => {
-	let t = !1, r = (e) => {
-		t || n.forEach(e, (e) => {
-			if (!t && i(e)) {
+	let t = !1, n = (e) => {
+		t || i.forEach(e, (e) => {
+			if (!t && o(e)) {
 				if (typeof e.type == "function" && e.type.displayName === "Card.Type") {
 					t = !0;
 					return;
 				}
 				if (e.props && typeof e.props == "object" && "children" in e.props) {
 					let t = e.props.children;
-					t != null && r(t);
+					t != null && n(t);
 				}
 			}
 		});
 	};
-	return r(e), t;
-}, m = (e, t, r) => {
-	if (f.some((e) => e in r)) return !0;
+	return n(e), t;
+}, m = (e, t, n) => {
+	if (f.some((e) => e in n)) return !0;
 	if (!t) return !1;
-	let a = n.only(e);
-	if (!i(a)) return !1;
-	if (typeof a.type == "string" && ["a", "button"].includes(a.type)) return !0;
-	let o = a.props;
-	return f.some((e) => e in o);
-}, h = ({ children: t, design: n = "outlined", intent: r = "surface", inset: i = !1, asChild: a, className: s, ref: c, ...d }) => {
+	let r = i.only(e);
+	if (!o(r)) return !1;
+	if (typeof r.type == "string" && ["a", "button"].includes(r.type)) return !0;
+	let a = r.props;
+	return f.some((e) => e in a);
+}, h = ({ children: t, design: n = "outlined", intent: r = "surface", inset: i = !1, asChild: a, className: o, ref: s, ...d }) => {
 	let f = a ? e : "div", h = p(t), g = m(t, a, d);
-	return /* @__PURE__ */ o(u, {
+	return /* @__PURE__ */ c(u, {
 		value: {
 			design: n,
 			intent: r,
@@ -136,12 +136,12 @@ var l = t(["group relative bg-clip-padding default:rounded-lg focus-visible:u-ou
 			inset: i,
 			isInteractive: g
 		},
-		children: /* @__PURE__ */ o(f, {
+		children: /* @__PURE__ */ c(f, {
 			"data-spark-component": "card",
 			"data-interactive": g,
-			ref: c,
+			ref: s,
 			className: l({
-				className: s,
+				className: o,
 				design: n,
 				intent: r,
 				hasType: h
@@ -154,7 +154,7 @@ var l = t(["group relative bg-clip-padding default:rounded-lg focus-visible:u-ou
 h.displayName = "Card";
 //#endregion
 //#region src/card/Content.styles.tsx
-var g = t(["relative default:rounded-lg w-full focus-visible:u-outline", "default:transition-colors default:duration-200 ease-linear"], {
+var g = r(["relative default:rounded-lg w-full focus-visible:u-outline", "default:transition-colors default:duration-200 ease-linear"], {
 	variants: {
 		inset: { false: ["default:p-lg"] },
 		design: {
@@ -162,7 +162,7 @@ var g = t(["relative default:rounded-lg w-full focus-visible:u-outline", "defaul
 			tinted: []
 		},
 		hasType: { true: ["rounded-t-0"] },
-		intent: s({
+		intent: t({
 			main: [],
 			support: [],
 			accent: [],
@@ -178,47 +178,47 @@ var g = t(["relative default:rounded-lg w-full focus-visible:u-outline", "defaul
 		{
 			intent: "main",
 			design: "tinted",
-			class: c(["bg-main-container text-on-main-container group-focus:bg-main-container-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-container-hovered"])
+			class: n(["bg-main-container text-on-main-container group-focus:bg-main-container-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-container-hovered"])
 		},
 		{
 			intent: "support",
 			design: "tinted",
-			class: c(["bg-support-container text-on-support-container group-focus:bg-support-container-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-container-hovered"])
+			class: n(["bg-support-container text-on-support-container group-focus:bg-support-container-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-container-hovered"])
 		},
 		{
 			intent: "accent",
 			design: "tinted",
-			class: c(["bg-accent-container text-on-accent-container group-focus:bg-accent-container-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-container-hovered"])
+			class: n(["bg-accent-container text-on-accent-container group-focus:bg-accent-container-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-container-hovered"])
 		},
 		{
 			intent: "success",
 			design: "tinted",
-			class: c(["bg-success-container text-on-success-container group-focus:bg-success-container-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-container-hovered"])
+			class: n(["bg-success-container text-on-success-container group-focus:bg-success-container-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-container-hovered"])
 		},
 		{
 			intent: "alert",
 			design: "tinted",
-			class: c(["bg-alert-container text-on-alert-container group-focus:bg-alert-container-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-container-hovered"])
+			class: n(["bg-alert-container text-on-alert-container group-focus:bg-alert-container-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-container-hovered"])
 		},
 		{
 			intent: "danger",
 			design: "tinted",
-			class: c(["bg-error-container text-on-error-container group-focus:bg-error-container-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-container-hovered"])
+			class: n(["bg-error-container text-on-error-container group-focus:bg-error-container-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-container-hovered"])
 		},
 		{
 			intent: "info",
 			design: "tinted",
-			class: c(["bg-info-container text-on-info-container group-focus:bg-info-container-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-container-hovered"])
+			class: n(["bg-info-container text-on-info-container group-focus:bg-info-container-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-container-hovered"])
 		},
 		{
 			intent: "neutral",
 			design: "tinted",
-			class: c(["bg-neutral-container text-on-neutral-container group-focus:bg-neutral-container-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-container-hovered"])
+			class: n(["bg-neutral-container text-on-neutral-container group-focus:bg-neutral-container-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-container-hovered"])
 		},
 		{
 			intent: "surface",
 			design: "tinted",
-			class: c(["bg-surface text-on-surface group-focus:bg-surface-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered"])
+			class: n(["bg-surface text-on-surface group-focus:bg-surface-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered"])
 		}
 	],
 	defaultVariants: {
@@ -227,9 +227,9 @@ var g = t(["relative default:rounded-lg w-full focus-visible:u-outline", "defaul
 		inset: !1,
 		hasType: !0
 	}
-}), _ = ({ children: t, inset: n, asChild: r, className: i, ref: a, ...s }) => {
-	let c = r ? e : "div", { design: l, intent: u, hasType: f } = d();
-	return /* @__PURE__ */ o(c, {
+}), _ = ({ children: t, inset: n, asChild: r, className: i, ref: a, ...o }) => {
+	let s = r ? e : "div", { design: l, intent: u, hasType: f } = d();
+	return /* @__PURE__ */ c(s, {
 		"data-spark-component": "card-content",
 		ref: a,
 		className: g({
@@ -239,14 +239,14 @@ var g = t(["relative default:rounded-lg w-full focus-visible:u-outline", "defaul
 			inset: n,
 			hasType: f
 		}),
-		...s,
+		...o,
 		children: t
 	});
 };
 _.displayName = "Content";
 //#endregion
 //#region src/card/Type.tsx
-var v = t([
+var v = r([
 	"rounded-t-lg default:text-body-2-highlight",
 	"default:text-center",
 	"min-h-sz-32",
@@ -292,7 +292,7 @@ var v = t([
 	}
 }), y = ({ intent: e, children: t, ...n }) => {
 	let r = d(), i = e ?? r.intent ?? "main", a = r.design === "outlined" && r.hasType;
-	return t ? /* @__PURE__ */ o("header", {
+	return t ? /* @__PURE__ */ c("header", {
 		className: v({
 			intent: i,
 			design: r.design,

package/dist/carousel/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../icon-DY4l9nsc.js"),t=require("../icon-button-DRFf308H.js");let n=require("class-variance-authority"),r=require("react"),i=require("react/jsx-runtime"),a=require("@spark-ui/icons/ArrowVerticalRight"),o=require("@spark-ui/icons/ArrowVerticalLeft");function s(e){let t=(0,r.useRef)(new Map),n=(0,r.useRef)(null),i=(0,r.useRef)(new Map),a=(0,r.useCallback)(()=>e=>{e.forEach(e=>{let n=e.isIntersecting,r=e.target;t.current.set(r,n);let a=i.current.get(r);a&&a(n)})},[]),o=(0,r.useCallback)(()=>{if(n.current)return n.current;let t=e.current;if(!t)return null;let r=new IntersectionObserver(a(),{root:t,threshold:.2});return n.current=r,r},[e,a]);(0,r.useEffect)(()=>{let e=o(),r=t.current,a=i.current;return()=>{e&&(e.disconnect(),r.clear(),a.clear(),n.current=null)}},[o]);let s=(0,r.useCallback)((e,n)=>{if(!e)return;let r=o();if(!r){setTimeout(()=>s(e,n),0);return}let a=t.current.get(e)??!0;t.current.set(e,a),i.current.set(e,n),r.observe(e),n(a)},[o]);return{registerSlide:s,unregisterSlide:(0,r.useCallback)(e=>{if(!e)return;let r=n.current;r&&r.unobserve(e),t.current.delete(e),i.current.delete(e)},[]),isSlideVisible:(0,r.useCallback)(e=>e?t.current.get(e)??!0:!0,[])}}function c(e){let t=(0,r.useRef)(()=>{throw Error(`Cannot call an event handler while rendering.`)});return(0,r.useLayoutEffect)(()=>{t.current=e}),(0,r.useCallback)((...e)=>t.current?.(...e),[])}var l=()=>{let e=(0,r.useRef)(!1);return(0,r.useEffect)(()=>(e.current=!0,()=>{e.current=!1}),[]),e};function u(e,t){let n=(0,r.useRef)(0),i=(0,r.useRef)(null);(0,r.useEffect)(()=>{let r=e.current;if(!r)return;let a=`onscrollend`in window,o=()=>{t()},s=()=>{i.current&&clearTimeout(i.current),e.current&&(n.current=e.current.scrollLeft,i.current=setTimeout(()=>{e.current&&o()},150))};return a?r.addEventListener(`scrollend`,o):r.addEventListener(`scroll`,s),()=>{i.current&&clearTimeout(i.current),a?r.removeEventListener(`scrollend`,o):r.removeEventListener(`scroll`,s)}},[t,e])}function d(e,t){(0,r.useLayoutEffect)(()=>{let n=e.current;if(!n)return;let r=new ResizeObserver(e=>{for(let n of e)t(n.contentRect.width)});return r.observe(n),()=>r.disconnect()},[e,t])}function f({totalSlides:e,slidesPerMove:t,slidesPerPage:n}){let r=t===`auto`?n:t,i=[],a=Math.floor((e-n)/r)*r;for(let e=0;e<=a;e+=r)i.push(e);return i[i.length-1]!==e-n&&i.push(e-n),i}function p(e){return e?Array.from(e.querySelectorAll(`[data-part="item"]`)):[]}function m(e,{container:t,slidesPerMove:n,slidesPerPage:r}){return f({totalSlides:p(t).length,slidesPerPage:r,slidesPerMove:n}).includes(e)}function h({container:e,slidesPerMove:t,slidesPerPage:n}){return e?p(e).filter((r,i)=>m(i,{slidesPerMove:t,slidesPerPage:n,container:e})).map(e=>e.offsetLeft):[]}function g({dotIndex:e,pageState:t,totalPages:n,maxDots:r=5}){if(n<=r)return e===t?`active`:`idle`;if(t<=Math.floor(r/2))return e>r-1?`hidden`:e===t?`active`:e===r-1?`edge`:`idle`;if(t>=n-Math.ceil(r/2)){let i=n-r;return e<i?`hidden`:e===t?`active`:e===i?`edge`:`idle`}let i=t-Math.floor(r/2),a=t+Math.floor(r/2);return e<i||e>a?`hidden`:e===t?`active`:e===i||e===a?`edge`:`idle`}function _(e=[],{carouselRef:t,slidesPerMove:n,slidesPerPage:i}){let[a,o]=(0,r.useState)(e),s=(0,r.useMemo)(()=>a,[a]);return d(t,()=>{let e=h({slidesPerMove:n,slidesPerPage:i,container:t.current});JSON.stringify(a)!==JSON.stringify(e)&&o(e)}),[s,o]}var v=`carousel`,y=`ltr`,b=({defaultPage:e,gap:t=16,snapType:n=`mandatory`,snapStop:i=`always`,scrollPadding:a=0,slidesPerPage:o=1,slidesPerMove:d=`auto`,scrollBehavior:f=`smooth`,loop:p=!1,pagePickerInset:b=!1,maxDots:x=5,page:S,onPageChange:C})=>{let w=(0,r.useId)(),[T,E]=(0,r.useState)(e||S||0),D=(0,r.useRef)(null),O=(0,r.useRef)([]),k=l().current,A=c(C),{registerSlide:j,unregisterSlide:M,isSlideVisible:N}=s(D),[P]=_([],{carouselRef:D,slidesPerMove:d,slidesPerPage:o}),F=(0,r.useRef)(p||T>0),I=(0,r.useRef)(p||T<P.length-1);F.current=p||T>0,I.current=p||T<P.length-1;let L=(0,r.useCallback)(e=>{e!==T&&(E(e),A?.(e))},[A,T]),R=(0,r.useCallback)((e,t)=>{D.current&&(D.current.scrollTo({left:P[e],behavior:t===`instant`?`auto`:`smooth`}),L(e))},[L,P]),z=(0,r.useCallback)(e=>{if(F){let t=p&&T===0?P.length-1:Math.max(T-1,0);R(t,f),e?.(t)}},[p,P,T,f,R]),B=(0,r.useCallback)(e=>{if(I){let t=p&&T===P.length-1?0:Math.min(T+1,P.length-1);R(t,f),e?.(t)}},[p,P,T,f,R]);return(0,r.useEffect)(()=>{S!=null&&R(S,f)},[S,f,R]),(0,r.useLayoutEffect)(()=>{if(e!=null&&!k&&D.current){let t=h({container:D.current,slidesPerMove:d,slidesPerPage:o});D.current.scrollTo({left:t[e],behavior:`instant`})}},[e,k,d,o]),u(D,(0,r.useCallback)(()=>{if(!D.current||P.length===0)return;let{scrollLeft:e}=D.current,t=P.map(t=>Math.abs(e-t)),n=t.indexOf(Math.min(...t));n!==-1&&L(n)},[P,L])),{ref:D,pageIndicatorsRefs:O,gap:t,snapType:n,snapStop:i,scrollPadding:a,slidesPerPage:o,slidesPerMove:d,scrollBehavior:f,loop:p,pagePickerInset:b,maxDots:x,page:T,pageSnapPoints:P,canScrollNext:I.current,canScrollPrev:F.current,scrollTo:R,scrollPrev:z,scrollNext:B,registerSlide:j,unregisterSlide:M,isSlideVisible:N,getRootProps:()=>({id:`carousel::${w}:`,role:`region`,"aria-roledescription":`carousel`,"data-scope":v,"data-part":`root`,"data-orientation":`horizontal`,dir:y,style:{"--slides-per-page":o,"--slide-spacing":`${t}px`,"--slide-item-size":`calc(100% / var(--slides-per-page) - var(--slide-spacing) * (var(--slides-per-page) - 1) / var(--slides-per-page))`}}),getControlProps:()=>({"data-scope":v,"data-part":`control`,"data-orientation":`horizontal`}),getPrevTriggerProps:()=>({id:`carousel::${w}::prev-trigger`,"aria-controls":`carousel::${w}::item-group`,"data-scope":v,"data-part":`prev-trigger`,"data-orientation":`horizontal`,type:`button`,dir:y,disabled:!F.current,onClick:()=>z()}),getNextTriggerProps:()=>({id:`carousel::${w}::next-trigger`,"aria-controls":`carousel::${w}::item-group`,"data-scope":v,"data-part":`next-trigger`,"data-orientation":`horizontal`,type:`button`,dir:y,disabled:!I.current,onClick:()=>B()}),getSlidesContainerProps:()=>({id:`carousel::${w}::item-group`,"aria-live":o>1?`off`:`polite`,"data-scope":v,"data-part":`item-group`,"data-orientation":`horizontal`,dir:y,tabIndex:0,style:{display:`grid`,gap:`var(--slide-spacing)`,scrollSnapType:`x ${n}`,gridAutoFlow:`column`,scrollbarWidth:`none`,gridAutoColumns:`var(--slide-item-size)`,overflowX:`auto`},ref:D}),getSlideProps:({index:e})=>{let t=m(e,{container:D.current,slidesPerMove:d,slidesPerPage:o});return{id:`carousel::${w}::item:${e}`,role:`group`,"aria-roledescription":`slide`,"data-scope":v,"data-part":`item`,"data-index":e,"data-orientation":`horizontal`,dir:y,style:{...t&&{scrollSnapAlign:`start`,scrollSnapStop:i}}}},getIndicatorGroupProps:()=>({role:`radiogroup`,id:`carousel::${w}::indicator-group`,"data-scope":v,"data-part":`indicator-group`,"data-orientation":`horizontal`,dir:y}),getIndicatorProps:({index:e})=>{let t=g({dotIndex:e,pageState:T,totalPages:P.length,maxDots:x});return{role:`radio`,id:`carousel::${w}::indicator:${e}`,"aria-checked":e===T,"data-scope":v,"data-part":`indicator`,"data-orientation":`horizontal`,"data-index":e,"data-state":t,tabIndex:e===T?0:-1,onClick:()=>{R(e,f)},onKeyDown:e=>{let t=e=>{O.current[e]?.focus()};e.key===`ArrowRight`&&I?B(t):e.key===`ArrowLeft`&&F&&z(t)}}}}},x=(0,r.createContext)(null),S=({className:e,snapType:t=`mandatory`,snapStop:r=`always`,scrollBehavior:a=`smooth`,slidesPerMove:o=`auto`,pagePickerInset:s=!1,slidesPerPage:c=1,loop:l=!1,children:u,gap:d=16,defaultPage:f,page:p,onPageChange:m,maxDots:h=5,...g})=>{let _=b({defaultPage:f,slidesPerPage:c,slidesPerMove:o,loop:l,gap:d,scrollBehavior:a,snapStop:r,snapType:t,page:p,pagePickerInset:s,onPageChange:m,maxDots:h});return(0,i.jsx)(x,{value:{..._,scrollBehavior:a},children:(0,i.jsx)(`div`,{"data-spark-component":`carousel`,className:(0,n.cx)(`gap-lg relative box-border flex flex-col`,e),..._.getRootProps(),...g,children:u})})};S.displayName=`Carousel`;var C=()=>{let e=(0,r.useContext)(x);if(!e)throw Error(`useCarouselContext must be used within a Carousel provider`);return e},w=({children:e,className:t,...r})=>{let a=C();return(0,i.jsx)(`div`,{"data-spark-component":`carousel-controls`,className:(0,n.cx)(`default:px-lg pointer-events-none absolute inset-0 flex flex-row items-center justify-between`,t),...a.getControlProps(),...r,children:e})};w.displayName=`Carousel.Controls`;var T=({"aria-label":n,...r})=>(0,i.jsx)(t.t,{"data-spark-component":`carousel-next-button`,...C().getNextTriggerProps(),intent:`surface`,design:`filled`,className:`pointer-events-auto cursor-pointer shadow-sm disabled:invisible`,"aria-label":n,...r,children:(0,i.jsx)(e.t,{children:(0,i.jsx)(a.ArrowVerticalRight,{})})});T.displayName=`Carousel.NextButton`;var E=({children:e,unstyled:t=!1,index:a,"aria-label":o,className:s,intent:c=`support`})=>{let l=C(),u=(0,r.useRef)(null);return(0,r.useEffect)(()=>{l.pageIndicatorsRefs.current&&(l.pageIndicatorsRefs.current[a]=u.current)}),(0,i.jsx)(`button`,{"data-spark-component":`carousel-page-indicator`,ref:u,...l.getIndicatorProps({index:a}),"aria-label":o,className:(0,n.cx)({[(0,n.cx)(`border-outline group relative flex justify-center border-0 hover:cursor-pointer`,`m-sm rounded-sm transition-all duration-[200ms] ease-linear`,`w-sz-8 h-sz-8`,`data-[state=active]:w-sz-32 data-[state=active]:h-sz-8`,`data-[state=edge]:w-sz-4 data-[state=edge]:h-sz-4`,`data-[state=hidden]:m-0 data-[state=hidden]:size-0`,c===`surface`?`data-[state=active]:bg-surface bg-surface/dim-2`:`data-[state=active]:bg-support bg-on-surface/dim-2`)]:!t},s),children:e},a)};E.displayName=`Carousel.PageIndicator`;var D=({children:e,className:t})=>{let r=C();return(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(`div`,{"data-spark-component":`carousel-page-picker`,...r.getIndicatorGroupProps(),className:(0,n.cx)(`flex-wrap items-center justify-center`,`default:min-h-sz-16 flex`,r.pagePickerInset&&`bottom-sz-12 absolute inset-x-0`,t),children:r.pageSnapPoints.length<=1?null:e({...r,pages:Array.from({length:r.pageSnapPoints.length},(e,t)=>t)})})})};D.displayName=`Carousel.PagePicker`;var O=({"aria-label":n,...r})=>(0,i.jsx)(t.t,{"data-spark-component":`carousel-prev-button`,...C().getPrevTriggerProps(),intent:`surface`,design:`filled`,className:`pointer-events-auto cursor-pointer shadow-sm disabled:invisible`,"aria-label":n,...r,children:(0,i.jsx)(e.t,{children:(0,i.jsx)(o.ArrowVerticalLeft,{})})});O.displayName=`Carousel.PrevButton`;function k(e,t){let[n,i]=(0,r.useState)(!0),a=C();return(0,r.useEffect)(()=>{let t=e.current;if(!t)return;let{registerSlide:n,unregisterSlide:r}=a;return n(t,i),()=>{r(t)}},[e]),n}var A=({children:e,index:t=0,totalSlides:a,className:o=``,...s})=>{let c=(0,r.useRef)(null),l=C(),u=k(c,l.ref);return(0,i.jsx)(`div`,{"data-spark-component":`carousel-slide`,ref:c,...l.getSlideProps({index:t,totalSlides:a}),className:(0,n.cx)(`default:bg-surface relative overflow-hidden`,o),"aria-hidden":!u,inert:!u,...s,children:e})};A.displayName=`Carousel.Slide`;var j=({children:e,className:t=``})=>{let a=C(),o=r.Children.toArray(e);return(0,i.jsx)(`div`,{"data-spark-component":`carousel-slides`,...a.getSlidesContainerProps(),className:(0,n.cx)(`focus-visible:u-outline relative w-full`,`[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`,t),children:o.map((e,t)=>(0,r.isValidElement)(e)?(0,r.cloneElement)(e,{index:t,totalSlides:o.length}):e)})};j.displayName=`Carousel.Slides`;var M=({children:e})=>(0,i.jsx)(`div`,{className:`relative flex items-center justify-around p-0`,children:e});M.displayName=`Carousel.Viewport`;var N=Object.assign(S,{Controls:w,NextButton:T,PrevButton:O,Slide:A,Slides:j,Viewport:M,PagePicker:D,PageIndicator:E});N.displayName=`Carousel`,exports.Carousel=N;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../icon-CfEsla9z.js"),t=require("../icon-button-B2TM0Xby.js");let n=require("class-variance-authority"),r=require("react"),i=require("react/jsx-runtime"),a=require("@spark-ui/icons/ArrowVerticalRight"),o=require("@spark-ui/icons/ArrowVerticalLeft");function s(e){let t=(0,r.useRef)(new Map),n=(0,r.useRef)(null),i=(0,r.useRef)(new Map),a=(0,r.useCallback)(()=>e=>{e.forEach(e=>{let n=e.isIntersecting,r=e.target;t.current.set(r,n);let a=i.current.get(r);a&&a(n)})},[]),o=(0,r.useCallback)(()=>{if(n.current)return n.current;let t=e.current;if(!t)return null;let r=new IntersectionObserver(a(),{root:t,threshold:.2});return n.current=r,r},[e,a]);(0,r.useEffect)(()=>{let e=o(),r=t.current,a=i.current;return()=>{e&&(e.disconnect(),r.clear(),a.clear(),n.current=null)}},[o]);let s=(0,r.useCallback)((e,n)=>{if(!e)return;let r=o();if(!r){setTimeout(()=>s(e,n),0);return}let a=t.current.get(e)??!0;t.current.set(e,a),i.current.set(e,n),r.observe(e),n(a)},[o]);return{registerSlide:s,unregisterSlide:(0,r.useCallback)(e=>{if(!e)return;let r=n.current;r&&r.unobserve(e),t.current.delete(e),i.current.delete(e)},[]),isSlideVisible:(0,r.useCallback)(e=>e?t.current.get(e)??!0:!0,[])}}function c(e){let t=(0,r.useRef)(()=>{throw Error(`Cannot call an event handler while rendering.`)});return(0,r.useLayoutEffect)(()=>{t.current=e}),(0,r.useCallback)((...e)=>t.current?.(...e),[])}var l=()=>{let e=(0,r.useRef)(!1);return(0,r.useEffect)(()=>(e.current=!0,()=>{e.current=!1}),[]),e};function u(e,t){let n=(0,r.useRef)(0),i=(0,r.useRef)(null);(0,r.useEffect)(()=>{let r=e.current;if(!r)return;let a=`onscrollend`in window,o=()=>{t()},s=()=>{i.current&&clearTimeout(i.current),e.current&&(n.current=e.current.scrollLeft,i.current=setTimeout(()=>{e.current&&o()},150))};return a?r.addEventListener(`scrollend`,o):r.addEventListener(`scroll`,s),()=>{i.current&&clearTimeout(i.current),a?r.removeEventListener(`scrollend`,o):r.removeEventListener(`scroll`,s)}},[t,e])}function d(e,t){(0,r.useLayoutEffect)(()=>{let n=e.current;if(!n)return;let r=new ResizeObserver(e=>{for(let n of e)t(n.contentRect.width)});return r.observe(n),()=>r.disconnect()},[e,t])}function f({totalSlides:e,slidesPerMove:t,slidesPerPage:n}){let r=t===`auto`?n:t,i=[],a=Math.floor((e-n)/r)*r;for(let e=0;e<=a;e+=r)i.push(e);return i[i.length-1]!==e-n&&i.push(e-n),i}function p(e){return e?Array.from(e.querySelectorAll(`[data-part="item"]`)):[]}function m(e,{container:t,slidesPerMove:n,slidesPerPage:r}){return f({totalSlides:p(t).length,slidesPerPage:r,slidesPerMove:n}).includes(e)}function h({container:e,slidesPerMove:t,slidesPerPage:n}){return e?p(e).filter((r,i)=>m(i,{slidesPerMove:t,slidesPerPage:n,container:e})).map(e=>e.offsetLeft):[]}function g({dotIndex:e,pageState:t,totalPages:n,maxDots:r=5}){if(n<=r)return e===t?`active`:`idle`;if(t<=Math.floor(r/2))return e>r-1?`hidden`:e===t?`active`:e===r-1?`edge`:`idle`;if(t>=n-Math.ceil(r/2)){let i=n-r;return e<i?`hidden`:e===t?`active`:e===i?`edge`:`idle`}let i=t-Math.floor(r/2),a=t+Math.floor(r/2);return e<i||e>a?`hidden`:e===t?`active`:e===i||e===a?`edge`:`idle`}function _(e=[],{carouselRef:t,slidesPerMove:n,slidesPerPage:i}){let[a,o]=(0,r.useState)(e),s=(0,r.useMemo)(()=>a,[a]);return d(t,()=>{let e=h({slidesPerMove:n,slidesPerPage:i,container:t.current});JSON.stringify(a)!==JSON.stringify(e)&&o(e)}),[s,o]}var v=`carousel`,y=`ltr`,b=({defaultPage:e,gap:t=16,snapType:n=`mandatory`,snapStop:i=`always`,scrollPadding:a=0,slidesPerPage:o=1,slidesPerMove:d=`auto`,scrollBehavior:f=`smooth`,loop:p=!1,pagePickerInset:b=!1,maxDots:x=5,page:S,onPageChange:C})=>{let w=(0,r.useId)(),[T,E]=(0,r.useState)(e||S||0),D=(0,r.useRef)(null),O=(0,r.useRef)([]),k=l().current,A=c(C),{registerSlide:j,unregisterSlide:M,isSlideVisible:N}=s(D),[P]=_([],{carouselRef:D,slidesPerMove:d,slidesPerPage:o}),F=(0,r.useRef)(p||T>0),I=(0,r.useRef)(p||T<P.length-1);F.current=p||T>0,I.current=p||T<P.length-1;let L=(0,r.useCallback)(e=>{e!==T&&(E(e),A?.(e))},[A,T]),R=(0,r.useCallback)((e,t)=>{D.current&&(D.current.scrollTo({left:P[e],behavior:t===`instant`?`auto`:`smooth`}),L(e))},[L,P]),z=(0,r.useCallback)(e=>{if(F){let t=p&&T===0?P.length-1:Math.max(T-1,0);R(t,f),e?.(t)}},[p,P,T,f,R]),B=(0,r.useCallback)(e=>{if(I){let t=p&&T===P.length-1?0:Math.min(T+1,P.length-1);R(t,f),e?.(t)}},[p,P,T,f,R]);return(0,r.useEffect)(()=>{S!=null&&R(S,f)},[S,f,R]),(0,r.useLayoutEffect)(()=>{if(e!=null&&!k&&D.current){let t=h({container:D.current,slidesPerMove:d,slidesPerPage:o});D.current.scrollTo({left:t[e],behavior:`instant`})}},[e,k,d,o]),u(D,(0,r.useCallback)(()=>{if(!D.current||P.length===0)return;let{scrollLeft:e}=D.current,t=P.map(t=>Math.abs(e-t)),n=t.indexOf(Math.min(...t));n!==-1&&L(n)},[P,L])),{ref:D,pageIndicatorsRefs:O,gap:t,snapType:n,snapStop:i,scrollPadding:a,slidesPerPage:o,slidesPerMove:d,scrollBehavior:f,loop:p,pagePickerInset:b,maxDots:x,page:T,pageSnapPoints:P,canScrollNext:I.current,canScrollPrev:F.current,scrollTo:R,scrollPrev:z,scrollNext:B,registerSlide:j,unregisterSlide:M,isSlideVisible:N,getRootProps:()=>({id:`carousel::${w}:`,role:`region`,"aria-roledescription":`carousel`,"data-scope":v,"data-part":`root`,"data-orientation":`horizontal`,dir:y,style:{"--slides-per-page":o,"--slide-spacing":`${t}px`,"--slide-item-size":`calc(100% / var(--slides-per-page) - var(--slide-spacing) * (var(--slides-per-page) - 1) / var(--slides-per-page))`}}),getControlProps:()=>({"data-scope":v,"data-part":`control`,"data-orientation":`horizontal`}),getPrevTriggerProps:()=>({id:`carousel::${w}::prev-trigger`,"aria-controls":`carousel::${w}::item-group`,"data-scope":v,"data-part":`prev-trigger`,"data-orientation":`horizontal`,type:`button`,dir:y,disabled:!F.current,onClick:()=>z()}),getNextTriggerProps:()=>({id:`carousel::${w}::next-trigger`,"aria-controls":`carousel::${w}::item-group`,"data-scope":v,"data-part":`next-trigger`,"data-orientation":`horizontal`,type:`button`,dir:y,disabled:!I.current,onClick:()=>B()}),getSlidesContainerProps:()=>({id:`carousel::${w}::item-group`,"aria-live":o>1?`off`:`polite`,"data-scope":v,"data-part":`item-group`,"data-orientation":`horizontal`,dir:y,tabIndex:0,style:{display:`grid`,gap:`var(--slide-spacing)`,scrollSnapType:`x ${n}`,gridAutoFlow:`column`,scrollbarWidth:`none`,gridAutoColumns:`var(--slide-item-size)`,overflowX:`auto`},ref:D}),getSlideProps:({index:e})=>{let t=m(e,{container:D.current,slidesPerMove:d,slidesPerPage:o});return{id:`carousel::${w}::item:${e}`,role:`group`,"aria-roledescription":`slide`,"data-scope":v,"data-part":`item`,"data-index":e,"data-orientation":`horizontal`,dir:y,style:{...t&&{scrollSnapAlign:`start`,scrollSnapStop:i}}}},getIndicatorGroupProps:()=>({role:`radiogroup`,id:`carousel::${w}::indicator-group`,"data-scope":v,"data-part":`indicator-group`,"data-orientation":`horizontal`,dir:y}),getIndicatorProps:({index:e})=>{let t=g({dotIndex:e,pageState:T,totalPages:P.length,maxDots:x});return{role:`radio`,id:`carousel::${w}::indicator:${e}`,"aria-checked":e===T,"data-scope":v,"data-part":`indicator`,"data-orientation":`horizontal`,"data-index":e,"data-state":t,tabIndex:e===T?0:-1,onClick:()=>{R(e,f)},onKeyDown:e=>{let t=e=>{O.current[e]?.focus()};e.key===`ArrowRight`&&I?B(t):e.key===`ArrowLeft`&&F&&z(t)}}}}},x=(0,r.createContext)(null),S=({className:e,snapType:t=`mandatory`,snapStop:r=`always`,scrollBehavior:a=`smooth`,slidesPerMove:o=`auto`,pagePickerInset:s=!1,slidesPerPage:c=1,loop:l=!1,children:u,gap:d=16,defaultPage:f,page:p,onPageChange:m,maxDots:h=5,...g})=>{let _=b({defaultPage:f,slidesPerPage:c,slidesPerMove:o,loop:l,gap:d,scrollBehavior:a,snapStop:r,snapType:t,page:p,pagePickerInset:s,onPageChange:m,maxDots:h});return(0,i.jsx)(x,{value:{..._,scrollBehavior:a},children:(0,i.jsx)(`div`,{"data-spark-component":`carousel`,className:(0,n.cx)(`gap-lg relative box-border flex flex-col`,e),..._.getRootProps(),...g,children:u})})};S.displayName=`Carousel`;var C=()=>{let e=(0,r.useContext)(x);if(!e)throw Error(`useCarouselContext must be used within a Carousel provider`);return e},w=({children:e,className:t,...r})=>{let a=C();return(0,i.jsx)(`div`,{"data-spark-component":`carousel-controls`,className:(0,n.cx)(`default:px-lg pointer-events-none absolute inset-0 flex flex-row items-center justify-between`,t),...a.getControlProps(),...r,children:e})};w.displayName=`Carousel.Controls`;var T=({"aria-label":n,...r})=>(0,i.jsx)(t.t,{"data-spark-component":`carousel-next-button`,...C().getNextTriggerProps(),intent:`surface`,design:`filled`,className:`pointer-events-auto cursor-pointer shadow-sm disabled:invisible`,"aria-label":n,...r,children:(0,i.jsx)(e.t,{children:(0,i.jsx)(a.ArrowVerticalRight,{})})});T.displayName=`Carousel.NextButton`;var E=({children:e,unstyled:t=!1,index:a,"aria-label":o,className:s,intent:c=`support`})=>{let l=C(),u=(0,r.useRef)(null);return(0,r.useEffect)(()=>{l.pageIndicatorsRefs.current&&(l.pageIndicatorsRefs.current[a]=u.current)}),(0,i.jsx)(`button`,{"data-spark-component":`carousel-page-indicator`,ref:u,...l.getIndicatorProps({index:a}),"aria-label":o,className:(0,n.cx)({[(0,n.cx)(`border-outline group relative flex justify-center border-0 hover:cursor-pointer`,`m-sm rounded-sm transition-all duration-[200ms] ease-linear`,`w-sz-8 h-sz-8`,`data-[state=active]:w-sz-32 data-[state=active]:h-sz-8`,`data-[state=edge]:w-sz-4 data-[state=edge]:h-sz-4`,`data-[state=hidden]:m-0 data-[state=hidden]:size-0`,c===`surface`?`data-[state=active]:bg-surface bg-surface/dim-2`:`data-[state=active]:bg-support bg-on-surface/dim-2`)]:!t},s),children:e},a)};E.displayName=`Carousel.PageIndicator`;var D=({children:e,className:t})=>{let r=C();return(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(`div`,{"data-spark-component":`carousel-page-picker`,...r.getIndicatorGroupProps(),className:(0,n.cx)(`flex-wrap items-center justify-center`,`default:min-h-sz-16 flex`,r.pagePickerInset&&`bottom-sz-12 absolute inset-x-0`,t),children:r.pageSnapPoints.length<=1?null:e({...r,pages:Array.from({length:r.pageSnapPoints.length},(e,t)=>t)})})})};D.displayName=`Carousel.PagePicker`;var O=({"aria-label":n,...r})=>(0,i.jsx)(t.t,{"data-spark-component":`carousel-prev-button`,...C().getPrevTriggerProps(),intent:`surface`,design:`filled`,className:`pointer-events-auto cursor-pointer shadow-sm disabled:invisible`,"aria-label":n,...r,children:(0,i.jsx)(e.t,{children:(0,i.jsx)(o.ArrowVerticalLeft,{})})});O.displayName=`Carousel.PrevButton`;function k(e,t){let[n,i]=(0,r.useState)(!0),a=C();return(0,r.useEffect)(()=>{let t=e.current;if(!t)return;let{registerSlide:n,unregisterSlide:r}=a;return n(t,i),()=>{r(t)}},[e]),n}var A=({children:e,index:t=0,totalSlides:a,className:o=``,...s})=>{let c=(0,r.useRef)(null),l=C(),u=k(c,l.ref);return(0,i.jsx)(`div`,{"data-spark-component":`carousel-slide`,ref:c,...l.getSlideProps({index:t,totalSlides:a}),className:(0,n.cx)(`default:bg-surface relative overflow-hidden`,o),"aria-hidden":!u,inert:!u,...s,children:e})};A.displayName=`Carousel.Slide`;var j=({children:e,className:t=``})=>{let a=C(),o=r.Children.toArray(e);return(0,i.jsx)(`div`,{"data-spark-component":`carousel-slides`,...a.getSlidesContainerProps(),className:(0,n.cx)(`focus-visible:u-outline relative w-full`,`[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`,t),children:o.map((e,t)=>(0,r.isValidElement)(e)?(0,r.cloneElement)(e,{index:t,totalSlides:o.length}):e)})};j.displayName=`Carousel.Slides`;var M=({children:e})=>(0,i.jsx)(`div`,{className:`relative flex items-center justify-around p-0`,children:e});M.displayName=`Carousel.Viewport`;var N=Object.assign(S,{Controls:w,NextButton:T,PrevButton:O,Slide:A,Slides:j,Viewport:M,PagePicker:D,PageIndicator:E});N.displayName=`Carousel`,exports.Carousel=N;
 //# sourceMappingURL=index.js.map

package/dist/carousel/index.mjs

@@ -1,5 +1,5 @@
-import { t as e } from "../icon-Bs-39J-H.mjs";
-import { t } from "../icon-button-C1ThqdK1.mjs";
+import { t as e } from "../icon-VM_Ys9Xn.mjs";
+import { t } from "../icon-button-CexCkoV0.mjs";
 import { cx as n } from "class-variance-authority";
 import { Children as r, cloneElement as i, createContext as a, isValidElement as o, useCallback as s, useContext as c, useEffect as l, useId as u, useLayoutEffect as d, useMemo as f, useRef as p, useState as m } from "react";
 import { Fragment as h, jsx as g } from "react/jsx-runtime";