@12min/ds 0.1.0 → 3.0.0

package/dist/index.web.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"sources":["../src/components/Button/Button.web.tsx","../src/utils/cn.ts","../src/components/ButtonIcon/ButtonIcon.web.tsx","../src/components/DismissButton/DismissButton.web.tsx","../src/components/Chip/Chip.web.tsx","../src/components/Alert/Alert.web.tsx","../src/components/ProgressBar/ProgressBar.web.tsx","../src/components/Input/Input.web.tsx","../src/components/InputField/InputField.web.tsx","../src/components/Checkbox/Checkbox.web.tsx","../src/components/ToggleSwitch/ToggleSwitch.web.tsx","../src/components/RadioGroup/RadioGroup.web.tsx","../src/components/ChoiceCard/ChoiceCard.web.tsx","../src/components/ListItem/ListItem.web.tsx","../src/components/Stepper/Stepper.web.tsx","../src/components/RatingScale/RatingScale.web.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nconst button = cva(\n  'inline-flex items-center justify-center gap-2 rounded-full transition-colors disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white',\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-marian-blue-600 text-white dark:text-midnight-900 enabled:hover:bg-marian-blue-700 dark:enabled:hover:bg-marian-blue-500 enabled:active:bg-marian-blue-800 dark:enabled:active:bg-marian-blue-600 disabled:bg-gray-25 disabled:text-gray-400 dark:disabled:bg-midnight-700 dark:disabled:text-gray-600',\n        secondary:\n          'bg-marian-blue-200 text-marian-blue-900 dark:bg-marian-blue-900 dark:text-white enabled:hover:bg-marian-blue-300 dark:enabled:hover:bg-marian-blue-800 enabled:active:bg-marian-blue-400 dark:enabled:active:bg-marian-blue-700 disabled:bg-gray-25 disabled:text-gray-400 dark:disabled:bg-midnight-700 dark:disabled:text-gray-600',\n        ghost:\n          'bg-transparent text-marian-blue-600 dark:text-marian-blue-300 enabled:hover:bg-marian-blue-200 dark:enabled:hover:bg-marian-blue-900 enabled:active:bg-marian-blue-300 dark:enabled:active:bg-marian-blue-800 disabled:text-gray-400 dark:disabled:text-gray-600',\n      },\n      size: {\n        sm: 'h-8 px-3 text-button-small',\n        md: 'h-10 px-4 text-button-default',\n        lg: 'h-12 px-6 text-button-large',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'lg',\n    },\n  }\n)\n\ntype ButtonProps = VariantProps<typeof button> & {\n  children: React.ReactNode\n  disabled?: boolean\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n  type?: 'button' | 'submit' | 'reset'\n  className?: string\n}\n\nexport function Button({ variant, size, disabled, children, onClick, type = 'button', className }: ButtonProps) {\n  return (\n    <button\n      type={type}\n      disabled={disabled}\n      onClick={onClick}\n      className={cn(button({ variant, size }), className)}\n    >\n      {children}\n    </button>\n  )\n}\n","import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nconst buttonIcon = cva(\n  'inline-flex items-center justify-center shrink-0 rounded-full transition-colors disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white',\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-marian-blue-600 text-white dark:text-midnight-900 enabled:hover:bg-marian-blue-700 dark:enabled:hover:bg-marian-blue-500 enabled:active:bg-marian-blue-800 dark:enabled:active:bg-marian-blue-600 disabled:bg-gray-25 disabled:text-gray-400 dark:disabled:bg-midnight-700 dark:disabled:text-gray-600',\n        secondary:\n          'bg-marian-blue-200 text-marian-blue-900 dark:bg-marian-blue-900 dark:text-white enabled:hover:bg-marian-blue-300 dark:enabled:hover:bg-marian-blue-800 enabled:active:bg-marian-blue-400 dark:enabled:active:bg-marian-blue-700 disabled:bg-gray-25 disabled:text-gray-400 dark:disabled:bg-midnight-700 dark:disabled:text-gray-600',\n        ghost:\n          'bg-transparent text-marian-blue-600 dark:text-marian-blue-300 enabled:hover:bg-marian-blue-200 dark:enabled:hover:bg-marian-blue-900 enabled:active:bg-marian-blue-300 dark:enabled:active:bg-marian-blue-800 disabled:text-gray-400 dark:disabled:text-gray-600',\n        overlay:\n          'bg-overlay-black-8 text-marian-blue-900 dark:bg-overlay-white-8 dark:text-white enabled:hover:bg-overlay-black-12 dark:enabled:hover:bg-overlay-white-12 enabled:active:bg-overlay-black-16 dark:enabled:active:bg-overlay-white-16 disabled:bg-gray-25 disabled:text-gray-400 dark:disabled:bg-midnight-700 dark:disabled:text-gray-600',\n      },\n      size: {\n        sm: 'size-10',\n        md: 'size-12',\n        lg: 'size-16',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  }\n)\n\ntype ButtonIconProps = VariantProps<typeof buttonIcon> & {\n  // Icons should render with `currentColor` so the variant text color applies.\n  icon: React.ReactNode\n  label: string\n  disabled?: boolean\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n  type?: 'button' | 'submit' | 'reset'\n  className?: string\n}\n\nexport function ButtonIcon({ variant, size, icon, label, disabled, onClick, type = 'button', className }: ButtonIconProps) {\n  return (\n    <button\n      type={type}\n      disabled={disabled}\n      onClick={onClick}\n      aria-label={label}\n      className={cn(buttonIcon({ variant, size }), className)}\n    >\n      {icon}\n    </button>\n  )\n}\n","import { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nconst dismissButton = cva(\n  'inline-flex items-center justify-center shrink-0 rounded-full transition-colors disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white',\n  {\n    variants: {\n      variant: {\n        subtle:\n          'bg-overlay-black-8 text-marian-blue-900 dark:bg-overlay-white-8 dark:text-white enabled:hover:bg-overlay-black-12 dark:enabled:hover:bg-overlay-white-12 enabled:active:bg-overlay-black-16 dark:enabled:active:bg-overlay-white-16 disabled:bg-gray-25 disabled:text-gray-400 dark:disabled:bg-midnight-700 dark:disabled:text-gray-600',\n        ghost:\n          'bg-transparent text-marian-blue-900 dark:text-white enabled:hover:bg-marian-blue-200 dark:enabled:hover:bg-marian-blue-900 enabled:active:bg-marian-blue-300 dark:enabled:active:bg-marian-blue-800 disabled:text-gray-400 dark:disabled:text-gray-600',\n      },\n      size: {\n        xs: 'size-5',\n        sm: 'size-8',\n        md: 'size-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'subtle',\n      size: 'sm',\n    },\n  }\n)\n\nconst glyphSize: Record<NonNullable<VariantProps<typeof dismissButton>['size']>, number> = {\n  xs: 12,\n  sm: 16,\n  md: 20,\n}\n\ntype DismissButtonProps = VariantProps<typeof dismissButton> & {\n  label?: string\n  disabled?: boolean\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n  className?: string\n}\n\nexport function DismissButton({ variant, size = 'sm', label = 'Fechar', disabled, onClick, className }: DismissButtonProps) {\n  const s = glyphSize[size ?? 'sm']\n  return (\n    <button\n      type=\"button\"\n      disabled={disabled}\n      onClick={onClick}\n      aria-label={label}\n      className={cn(dismissButton({ variant, size }), className)}\n    >\n      <svg width={s} height={s} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" aria-hidden=\"true\">\n        <path d=\"M18 6 6 18M6 6l12 12\" />\n      </svg>\n    </button>\n  )\n}\n","import { cn } from '../../utils/cn'\nimport type { ChipSize } from './Chip.styles'\n\ntype ChipProps = {\n  children: React.ReactNode\n  checked?: boolean\n  disabled?: boolean\n  size?: ChipSize\n  leading?: React.ReactNode\n  trailing?: React.ReactNode\n  onClick?: () => void\n  className?: string\n}\n\nconst sizeCls: Record<ChipSize, string> = {\n  sm: 'h-8 px-3 text-xs leading-4 tracking-[0.5px]',\n  md: 'h-11 px-4 text-sm leading-5',\n}\n\nexport function Chip({ children, checked = false, disabled = false, size = 'md', leading, trailing, onClick, className }: ChipProps) {\n  return (\n    <button\n      type=\"button\"\n      role=\"button\"\n      aria-pressed={checked}\n      disabled={disabled}\n      onClick={onClick}\n      className={cn(\n        'inline-flex items-center justify-center gap-2 rounded-full border border-solid transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-marian-blue-900 dark:focus-visible:ring-white',\n        sizeCls[size],\n        checked ? 'font-semibold' : 'font-medium',\n        disabled\n          ? 'cursor-not-allowed border-gray-50 bg-gray-25 text-gray-400 dark:border-midnight-700 dark:bg-midnight-700 dark:text-gray-600'\n          : checked\n            ? 'cursor-pointer border-marian-blue-700 bg-marian-blue-700 text-white enabled:hover:bg-marian-blue-800 enabled:active:bg-marian-blue-900 dark:border-marian-blue-800 dark:bg-marian-blue-800 dark:enabled:hover:bg-marian-blue-900'\n            : 'cursor-pointer border-marian-blue-200 bg-transparent text-marian-blue-900 enabled:hover:bg-marian-blue-700/[0.08] enabled:active:bg-marian-blue-700/[0.12] dark:border-midnight-50 dark:text-white dark:enabled:hover:bg-marian-blue-800/[0.08] dark:enabled:active:bg-marian-blue-800/[0.12]',\n        className\n      )}\n    >\n      {leading && <span className=\"shrink-0\">{leading}</span>}\n      {children}\n      {trailing && <span className=\"shrink-0\">{trailing}</span>}\n    </button>\n  )\n}\n","import { cn } from '../../utils/cn'\n\ntype AlertVariant = 'success' | 'info' | 'warning' | 'error'\ntype AlertSize = 'default' | 'compact'\ntype AlertLayout = 'stacked' | 'inline'\n\ntype AlertProps = {\n  variant?: AlertVariant\n  size?: AlertSize\n  layout?: AlertLayout\n  title?: string\n  description?: string\n  onDismiss?: () => void\n  className?: string\n}\n\nconst variantStyles: Record<AlertVariant, { bg: string; icon: string }> = {\n  success: { bg: 'bg-green-100 dark:bg-green-800', icon: 'text-green-text' },\n  info: { bg: 'bg-blue-100 dark:bg-blue-700', icon: 'text-blue-600 dark:text-blue-100' },\n  warning: { bg: 'bg-amber-100 dark:bg-amber-800', icon: 'text-amber-600 dark:text-amber-100' },\n  error: { bg: 'bg-ketchup-100 dark:bg-ketchup-800', icon: 'text-ketchup-600 dark:text-ketchup-text' },\n}\n\nfunction AlertIcon({ variant }: { variant: AlertVariant }) {\n  const common = { width: 24, height: 24, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const, 'aria-hidden': true }\n  switch (variant) {\n    case 'success':\n      return <svg {...common}><circle cx=\"12\" cy=\"12\" r=\"9\" /><path d=\"M8.5 12.5 11 15l4.5-5\" /></svg>\n    case 'error':\n      return <svg {...common}><circle cx=\"12\" cy=\"12\" r=\"9\" /><path d=\"M15 9l-6 6M9 9l6 6\" /></svg>\n    case 'warning':\n      return <svg {...common}><circle cx=\"12\" cy=\"12\" r=\"9\" /><path d=\"M12 7.5v5M12 16h.01\" /></svg>\n    case 'info':\n      return <svg {...common}><circle cx=\"12\" cy=\"12\" r=\"9\" /><path d=\"M12 11v5M12 8h.01\" /></svg>\n  }\n}\n\nexport function Alert({ variant = 'info', size = 'default', layout = 'stacked', title, description, onDismiss, className }: AlertProps) {\n  const styles = variantStyles[variant]\n  const pad = size === 'compact' ? 'p-3' : 'p-5'\n  const gap = size === 'compact' ? 'gap-2' : 'gap-3'\n\n  const icon = <span className={cn('shrink-0', styles.icon)}><AlertIcon variant={variant} /></span>\n  const body = description && (\n    <p className=\"text-body-default text-gray-700 dark:text-gray-300 w-full\">{description}</p>\n  )\n  const close = onDismiss && (\n    <button type=\"button\" onClick={onDismiss} aria-label=\"Fechar\" className=\"shrink-0 text-marian-blue-900 dark:text-white\">\n      <svg width={20} height={20} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18M6 6l12 12\" /></svg>\n    </button>\n  )\n\n  return (\n    <div\n      role={variant === 'error' ? 'alert' : 'status'}\n      className={cn(\n        'flex w-full items-start rounded-tl-2xl rounded-tr-2xl rounded-br-2xl border border-solid border-overlay-black-5 dark:border-overlay-white-5',\n        pad,\n        gap,\n        styles.bg,\n        className\n      )}\n    >\n      {layout === 'inline' ? (\n        <>\n          {icon}\n          {body}\n        </>\n      ) : (\n        <div className=\"flex flex-1 flex-col gap-2 min-w-0\">\n          <div className=\"flex items-center gap-3\">\n            {icon}\n            {title && <p className=\"flex-1 text-h3 text-marian-blue-900 dark:text-white\">{title}</p>}\n          </div>\n          {body}\n        </div>\n      )}\n      {close}\n    </div>\n  )\n}\n","import { cn } from '../../utils/cn'\n\ntype ProgressBarProps = {\n  value: number\n  className?: string\n}\n\nexport function ProgressBar({ value, className }: ProgressBarProps) {\n  const pct = Math.min(100, Math.max(0, value))\n\n  return (\n    <div\n      role=\"progressbar\"\n      aria-valuenow={pct}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      className={cn(\n        'relative h-2 w-full rounded-full bg-gray-15 overflow-hidden dark:bg-midnight-800',\n        className\n      )}\n    >\n      <div\n        className=\"absolute inset-y-0 left-0 bg-marian-blue-600 rounded-full transition-[width]\"\n        style={{ width: `${pct}%` }}\n      />\n    </div>\n  )\n}\n","import { cn } from '../../utils/cn'\n\ntype InputState = 'default' | 'filled' | 'error' | 'disabled'\n\ntype InputProps = {\n  value?: string\n  placeholder?: string\n  state?: InputState\n  leadingIcon?: React.ReactNode\n  trailingIcon?: React.ReactNode\n  onChange?: React.ChangeEventHandler<HTMLInputElement>\n  className?: string\n}\n\nexport function Input({ value, placeholder = 'exemplo@email.com', state = 'default', leadingIcon, trailingIcon, onChange, className }: InputProps) {\n  const isDisabled = state === 'disabled'\n  const isError = state === 'error'\n\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-2 h-12 px-3 rounded-input border border-solid text-body-default transition-colors',\n        'focus-within:ring-2 focus-within:ring-black dark:focus-within:ring-white',\n        isDisabled\n          ? 'bg-gray-25 border-gray-50 text-gray-400 cursor-not-allowed dark:bg-midnight-700 dark:border-midnight-700 dark:text-gray-600'\n          : isError\n            ? 'bg-white border-ketchup-600 text-ketchup-text dark:bg-midnight-900 dark:border-ketchup-500 dark:text-ketchup-600'\n            : 'bg-white border-marian-blue-200 text-marian-blue-900 dark:bg-midnight-900 dark:border-midnight-50 dark:text-white',\n        className\n      )}\n    >\n      {leadingIcon && (\n        <span className=\"shrink-0 text-current\">{leadingIcon}</span>\n      )}\n      <input\n        type=\"text\"\n        value={value}\n        placeholder={placeholder}\n        disabled={isDisabled}\n        onChange={onChange}\n        className=\"flex-1 bg-transparent outline-none text-current placeholder:text-gray-500 min-w-0\"\n      />\n      {trailingIcon && (\n        <span className=\"shrink-0 text-current\">{trailingIcon}</span>\n      )}\n    </div>\n  )\n}\n","import { cn } from '../../utils/cn'\nimport { Input } from '../Input/Input.web'\n\ntype InputFieldProps = {\n  label?: string\n  required?: boolean\n  helperText?: string\n  error?: boolean\n  value?: string\n  placeholder?: string\n  disabled?: boolean\n  leadingIcon?: React.ReactNode\n  trailingIcon?: React.ReactNode\n  onChange?: React.ChangeEventHandler<HTMLInputElement>\n  className?: string\n}\n\nexport function InputField({\n  label,\n  required,\n  helperText,\n  error,\n  value,\n  placeholder,\n  disabled,\n  leadingIcon,\n  trailingIcon,\n  onChange,\n  className,\n}: InputFieldProps) {\n  const state = disabled ? 'disabled' : error ? 'error' : 'default'\n  return (\n    <div className={cn('flex flex-col gap-2 w-full', className)}>\n      <label className=\"flex flex-col gap-2\">\n        {label && (\n          <span className=\"inline-flex items-center gap-0.5 text-label-default text-marian-blue-900 dark:text-white\">\n            {label}\n            {required && (\n              <span aria-hidden=\"true\" className=\"text-ketchup-text dark:text-ketchup-600\">*</span>\n            )}\n          </span>\n        )}\n        <Input\n          state={state}\n          value={value}\n          placeholder={placeholder}\n          leadingIcon={leadingIcon}\n          trailingIcon={trailingIcon}\n          onChange={onChange}\n        />\n      </label>\n      {helperText && (\n        <span className={cn('text-caption', error ? 'text-ketchup-text dark:text-ketchup-600' : 'text-gray-700 dark:text-gray-300')}>\n          {helperText}\n        </span>\n      )}\n    </div>\n  )\n}\n","import { cn } from '../../utils/cn'\nimport type { CheckboxSize } from './Checkbox.styles'\n\ntype CheckboxProps = {\n  checked?: boolean\n  onChange?: (checked: boolean) => void\n  disabled?: boolean\n  size?: CheckboxSize\n  className?: string\n}\n\nconst boxSize: Record<CheckboxSize, string> = {\n  xs: 'size-4',\n  sm: 'size-5',\n  md: 'size-6',\n}\n\nfunction CheckIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" className=\"w-3/4 h-3/4\" aria-hidden=\"true\">\n      <path d=\"M5 12.5 10 17.5 19 7\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nexport function Checkbox({ checked = false, onChange, disabled = false, size = 'sm', className }: CheckboxProps) {\n  return (\n    <label\n      className={cn(\n        'inline-flex items-center justify-center rounded-full p-1 transition-colors',\n        disabled\n          ? 'cursor-not-allowed'\n          : 'cursor-pointer hover:bg-marian-blue-700/[0.08] active:bg-marian-blue-700/[0.12] dark:hover:bg-marian-blue-800/[0.08] dark:active:bg-marian-blue-800/[0.12]',\n        className\n      )}\n    >\n      <input\n        type=\"checkbox\"\n        checked={checked}\n        disabled={disabled}\n        onChange={() => onChange?.(!checked)}\n        className=\"peer sr-only\"\n      />\n      <span\n        className={cn(\n          'flex items-center justify-center rounded-[6px] border-2 transition-colors',\n          'peer-focus-visible:ring-2 peer-focus-visible:ring-marian-blue-900 dark:peer-focus-visible:ring-white',\n          boxSize[size],\n          checked\n            ? disabled\n              ? 'bg-gray-25 border-gray-25 text-gray-400 dark:bg-midnight-700 dark:border-midnight-700 dark:text-gray-600'\n              : 'bg-marian-blue-700 border-marian-blue-700 text-white dark:bg-marian-blue-800 dark:border-marian-blue-800'\n            : disabled\n              ? 'border-gray-400 dark:border-gray-600'\n              : 'border-gray-600 dark:border-gray-400'\n        )}\n      >\n        {checked && <CheckIcon />}\n      </span>\n    </label>\n  )\n}\n","import { cn } from '../../utils/cn'\n\ntype ToggleSwitchSize = 'xs' | 'sm' | 'md'\n\ntype ToggleSwitchProps = {\n  value?: boolean\n  onChange?: (value: boolean) => void\n  disabled?: boolean\n  size?: ToggleSwitchSize\n  label: string\n  className?: string\n}\n\nconst trackSize: Record<ToggleSwitchSize, string> = {\n  xs: 'w-8 h-5',\n  sm: 'w-10 h-6',\n  md: 'w-[52px] h-8',\n}\n\nconst knobSize: Record<ToggleSwitchSize, string> = {\n  xs: 'size-4',\n  sm: 'size-5',\n  md: 'size-7',\n}\n\nconst knobOn: Record<ToggleSwitchSize, string> = {\n  xs: 'translate-x-3',\n  sm: 'translate-x-4',\n  md: 'translate-x-5',\n}\n\nexport function ToggleSwitch({ value = false, onChange, disabled = false, size = 'sm', label, className }: ToggleSwitchProps) {\n  return (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      aria-checked={value}\n      aria-label={label}\n      disabled={disabled}\n      onClick={() => onChange?.(!value)}\n      className={cn(\n        'inline-flex shrink-0 items-center rounded-full p-0.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-marian-blue-900 dark:focus-visible:ring-white',\n        trackSize[size],\n        disabled\n          ? 'cursor-not-allowed bg-gray-25 dark:bg-midnight-700'\n          : value\n            ? 'cursor-pointer bg-marian-blue-700 dark:bg-marian-blue-800'\n            : 'cursor-pointer bg-gray-25 dark:bg-midnight-700',\n        className\n      )}\n    >\n      <span\n        className={cn(\n          'rounded-full transition-transform',\n          knobSize[size],\n          disabled ? 'bg-gray-400 dark:bg-gray-600' : 'bg-white dark:bg-midnight-900',\n          value ? knobOn[size] : 'translate-x-0'\n        )}\n      />\n    </button>\n  )\n}\n","import { cn } from '../../utils/cn'\n\ntype RadioGroupProps = {\n  children: React.ReactNode\n  label?: string\n  className?: string\n}\n\nexport function RadioGroup({ children, label, className }: RadioGroupProps) {\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={label}\n      className={cn('flex flex-col gap-2', className)}\n    >\n      {children}\n    </div>\n  )\n}\n","import { cn } from '../../utils/cn'\n\ntype ChoiceCardType = 'radio' | 'checkbox' | 'action'\n\ntype ChoiceCardProps = {\n  type?: ChoiceCardType\n  label: string\n  description?: string\n  selected?: boolean\n  disabled?: boolean\n  leading?: React.ReactNode\n  showTrailing?: boolean\n  onClick?: () => void\n  className?: string\n}\n\nfunction containerClass(selected: boolean, disabled: boolean): string {\n  if (disabled) {\n    return 'cursor-not-allowed border border-gray-50 bg-white dark:border-midnight-700 dark:bg-midnight-900'\n  }\n  if (selected) {\n    return 'cursor-pointer border-2 border-marian-blue-600 bg-marian-blue-200 enabled:hover:bg-marian-blue-300 enabled:active:bg-marian-blue-400 dark:border-marian-blue-300 dark:bg-marian-blue-900 dark:enabled:hover:bg-marian-blue-800 dark:enabled:active:bg-marian-blue-700'\n  }\n  return 'cursor-pointer border border-marian-blue-200 bg-white enabled:hover:bg-gray-15 enabled:active:bg-gray-35 dark:border-midnight-50 dark:bg-midnight-900 dark:enabled:hover:bg-midnight-800 dark:enabled:active:bg-midnight-600'\n}\n\nfunction CheckGlyph() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" className=\"w-3/4 h-3/4\" aria-hidden=\"true\">\n      <path d=\"M5 12.5 10 17.5 19 7\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nfunction Trailing({ type, selected, disabled }: { type: ChoiceCardType; selected: boolean; disabled: boolean }) {\n  const off = disabled ? 'border-gray-400 dark:border-gray-600' : 'border-gray-600 dark:border-gray-400'\n  const on = 'border-marian-blue-700 dark:border-marian-blue-800'\n  if (type === 'action') {\n    return (\n      <span className={cn('shrink-0', disabled ? 'text-gray-400 dark:text-gray-600' : 'text-gray-600 dark:text-gray-400')}>\n        <svg width={24} height={24} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\"><path d=\"M9 6l6 6-6 6\" /></svg>\n      </span>\n    )\n  }\n  if (type === 'checkbox') {\n    return (\n      <span className={cn('flex size-6 shrink-0 items-center justify-center rounded-[6px] border-2', selected ? cn(on, 'bg-marian-blue-700 text-white dark:bg-marian-blue-800') : off)}>\n        {selected && <CheckGlyph />}\n      </span>\n    )\n  }\n  return (\n    <span className={cn('flex size-6 shrink-0 items-center justify-center rounded-full border-2', selected ? on : off)}>\n      {selected && <span className=\"size-3 rounded-full bg-marian-blue-700 dark:bg-marian-blue-800\" />}\n    </span>\n  )\n}\n\nexport function ChoiceCard({ type = 'radio', label, description, selected = false, disabled = false, leading, showTrailing = true, onClick, className }: ChoiceCardProps) {\n  const isSelected = type === 'action' ? false : selected\n  const textColor = disabled ? 'text-gray-400 dark:text-gray-600' : 'text-marian-blue-900 dark:text-white'\n  const descColor = disabled ? 'text-gray-400 dark:text-gray-600' : 'text-gray-700 dark:text-gray-300'\n\n  return (\n    <button\n      type=\"button\"\n      role={type === 'radio' ? 'radio' : type === 'checkbox' ? 'checkbox' : 'button'}\n      aria-checked={type === 'action' ? undefined : isSelected}\n      disabled={disabled}\n      onClick={onClick}\n      className={cn(\n        'flex w-full items-center gap-3 rounded-[20px] p-4 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-marian-blue-900 dark:focus-visible:ring-white',\n        containerClass(isSelected, disabled),\n        className\n      )}\n    >\n      {leading && <span className=\"flex size-6 shrink-0 items-center justify-center\">{leading}</span>}\n      <span className=\"flex flex-1 flex-col gap-1 min-w-0\">\n        <span className={cn('text-sm leading-5', description ? 'font-semibold' : 'font-medium', textColor)}>{label}</span>\n        {description && <span className={cn('text-sm font-medium leading-5', descColor)}>{description}</span>}\n      </span>\n      {showTrailing && <Trailing type={type} selected={isSelected} disabled={disabled} />}\n    </button>\n  )\n}\n","import { cn } from '../../utils/cn'\nimport { ToggleSwitch } from '../ToggleSwitch/ToggleSwitch.web'\n\ntype ListItemTrailing = 'none' | 'radio' | 'checkbox' | 'action' | 'switch'\n\ntype ListItemProps = {\n  trailing?: ListItemTrailing\n  label: string\n  description?: string\n  selected?: boolean\n  disabled?: boolean\n  leading?: React.ReactNode\n  switchValue?: boolean\n  onSwitchChange?: (value: boolean) => void\n  onClick?: () => void\n  className?: string\n}\n\nfunction CheckGlyph() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" className=\"w-3/4 h-3/4\" aria-hidden=\"true\">\n      <path d=\"M5 12.5 10 17.5 19 7\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nfunction TrailingVisual({ trailing, selected, disabled }: { trailing: 'radio' | 'checkbox' | 'action'; selected: boolean; disabled: boolean }) {\n  const off = disabled ? 'border-gray-400 dark:border-gray-600' : 'border-gray-600 dark:border-gray-400'\n  const on = 'border-marian-blue-700 dark:border-marian-blue-800'\n  if (trailing === 'action') {\n    return (\n      <span className={cn('shrink-0', disabled ? 'text-gray-400 dark:text-gray-600' : 'text-gray-600 dark:text-gray-400')}>\n        <svg width={24} height={24} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\"><path d=\"M9 6l6 6-6 6\" /></svg>\n      </span>\n    )\n  }\n  if (trailing === 'checkbox') {\n    return (\n      <span className={cn('flex size-6 shrink-0 items-center justify-center rounded-[6px] border-2', selected ? cn(on, 'bg-marian-blue-700 text-white dark:bg-marian-blue-800') : off)}>\n        {selected && <CheckGlyph />}\n      </span>\n    )\n  }\n  return (\n    <span className={cn('flex size-6 shrink-0 items-center justify-center rounded-full border-2', selected ? on : off)}>\n      {selected && <span className=\"size-3 rounded-full bg-marian-blue-700 dark:bg-marian-blue-800\" />}\n    </span>\n  )\n}\n\nexport function ListItem({ trailing = 'none', label, description, selected = false, disabled = false, leading, switchValue = false, onSwitchChange, onClick, className }: ListItemProps) {\n  const isSelected = trailing === 'radio' || trailing === 'checkbox' ? selected : false\n  const pad = description ? 'p-4' : 'p-2.5'\n  const textColor = disabled ? 'text-gray-400 dark:text-gray-600' : 'text-marian-blue-900 dark:text-white'\n  const descColor = disabled ? 'text-gray-400 dark:text-gray-600' : 'text-gray-700 dark:text-gray-300'\n  const hover = disabled\n    ? ''\n    : isSelected\n      ? 'hover:bg-marian-blue-300 active:bg-marian-blue-400 dark:hover:bg-marian-blue-800 dark:active:bg-marian-blue-700'\n      : 'hover:bg-gray-15 active:bg-gray-35 dark:hover:bg-midnight-800 dark:active:bg-midnight-600'\n\n  const base = cn('flex w-full items-center gap-3 text-left transition-colors', pad, isSelected && 'bg-marian-blue-200 dark:bg-marian-blue-900', hover, className)\n\n  const content = (\n    <>\n      {leading && <span className=\"flex size-6 shrink-0 items-center justify-center\">{leading}</span>}\n      <span className=\"flex flex-1 flex-col gap-1 min-w-0\">\n        <span className={cn('text-sm leading-5', description ? 'font-semibold' : 'font-medium', textColor)}>{label}</span>\n        {description && <span className={cn('text-sm font-medium leading-5', descColor)}>{description}</span>}\n      </span>\n      {trailing === 'switch' ? (\n        <ToggleSwitch size=\"sm\" value={switchValue} onChange={onSwitchChange} disabled={disabled} label={label} />\n      ) : trailing !== 'none' ? (\n        <TrailingVisual trailing={trailing} selected={isSelected} disabled={disabled} />\n      ) : null}\n    </>\n  )\n\n  if (trailing === 'switch' || trailing === 'none') {\n    return <div className={base}>{content}</div>\n  }\n\n  return (\n    <button\n      type=\"button\"\n      role={trailing === 'radio' ? 'radio' : trailing === 'checkbox' ? 'checkbox' : 'button'}\n      aria-checked={trailing === 'radio' || trailing === 'checkbox' ? isSelected : undefined}\n      disabled={disabled}\n      onClick={onClick}\n      className={cn(base, 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-marian-blue-900 dark:focus-visible:ring-white')}\n    >\n      {content}\n    </button>\n  )\n}\n","import { cn } from '../../utils/cn'\n\ntype StepperProps = {\n  totalSteps: number\n  currentStep: number\n  className?: string\n}\n\nfunction segmentClass(index: number, currentStep: number): string {\n  if (index < currentStep - 1) return 'bg-marian-blue-600'\n  if (index === currentStep - 1) return 'bg-marian-blue-200 dark:bg-marian-blue-900'\n  return 'bg-gray-25 dark:bg-midnight-700'\n}\n\nexport function Stepper({ totalSteps, currentStep, className }: StepperProps) {\n  return (\n    <div\n      role=\"progressbar\"\n      aria-valuenow={currentStep}\n      aria-valuemin={1}\n      aria-valuemax={totalSteps}\n      aria-label={`Etapa ${currentStep} de ${totalSteps}`}\n      className={cn('flex w-full items-start gap-1', className)}\n    >\n      {Array.from({ length: totalSteps }, (_, i) => (\n        <div key={i} aria-hidden=\"true\" className={cn('h-1 flex-1 rounded-full', segmentClass(i, currentStep))} />\n      ))}\n    </div>\n  )\n}\n","import { cn } from '../../utils/cn'\nimport { DEFAULT_OPTIONS } from './RatingScale.styles'\n\ntype RatingScaleOption = {\n  emoji: string\n  label: string\n}\n\ntype RatingScaleProps = {\n  value?: number | null\n  onChange?: (value: number) => void\n  options?: ReadonlyArray<RatingScaleOption>\n  disabled?: boolean\n  className?: string\n}\n\nexport function RatingScale({ value = null, onChange, options = DEFAULT_OPTIONS, disabled = false, className }: RatingScaleProps) {\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label=\"Avaliação de 1 a 5\"\n      className={cn('flex items-center justify-center gap-2 p-4', className)}\n    >\n      {options.map((option, index) => {\n        const itemValue = index + 1\n        const selected = value === itemValue\n        return (\n          <button\n            key={itemValue}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={selected}\n            aria-label={option.label.replace('\\n', ' ')}\n            disabled={disabled}\n            onClick={() => onChange?.(itemValue)}\n            className=\"flex flex-1 flex-col items-center justify-center gap-1.5 py-1 disabled:cursor-not-allowed\"\n          >\n            <div\n              className={cn(\n                'flex size-[60px] items-center justify-center overflow-hidden rounded-full transition-colors',\n                disabled\n                  ? 'border border-gray-50 bg-gray-25 dark:border-midnight-700 dark:bg-midnight-700'\n                  : selected\n                    ? 'border-2 border-marian-blue-600 bg-marian-blue-200 dark:border-marian-blue-300 dark:bg-marian-blue-900'\n                    : 'border border-marian-blue-200 bg-white dark:border-midnight-50 dark:bg-midnight-900'\n              )}\n            >\n              <span className={cn('select-none text-[28px] leading-none', disabled && 'opacity-40')}>{option.emoji}</span>\n            </div>\n            <span\n              className={cn(\n                'w-full whitespace-pre-line text-center text-caption',\n                disabled ? 'text-gray-400 dark:text-gray-600' : 'text-marian-blue-900 dark:text-white'\n              )}\n            >\n              {option.label}\n            </span>\n            <span className=\"text-[10px] font-semibold leading-none tracking-[0.8px] text-gray-400 dark:text-gray-600\">\n              {itemValue}\n            </span>\n          </button>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":"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","names":["cva","jsx","cva","cva","jsx","cva","jsx","jsx","jsxs","jsx","jsx","jsxs","jsx","jsxs","jsx","jsxs","jsx","jsx","jsx","jsxs","Fragment","jsx","jsxs","CheckGlyph","jsx","jsx","jsxs"]}

package/dist/tailwind/theme.css

@@ -1,41 +1,303 @@
 /* Generated by generateTheme.ts — do not edit manually */
 @theme {
-  --color-brand-primary: #FF6B35;
-  --color-brand-secondary: #1A1A2E;
-  --color-neutral-0: #FFFFFF;
-  --color-neutral-50: #FAFAFA;
-  --color-neutral-100: #F5F5F5;
-  --color-neutral-200: #E5E5E5;
-  --color-neutral-300: #D4D4D4;
-  --color-neutral-400: #A3A3A3;
-  --color-neutral-500: #737373;
-  --color-neutral-600: #525252;
-  --color-neutral-700: #404040;
-  --color-neutral-800: #262626;
-  --color-neutral-900: #121212;
-  --color-success-light: #4ADE80;
-  --color-success: #22C55E;
-  --color-success-dark: #16A34A;
-  --color-error-light: #F87171;
-  --color-error: #EF4444;
-  --color-error-dark: #DC2626;
-  --color-warning-light: #FCD34D;
-  --color-warning: #F59E0B;
-  --color-warning-dark: #D97706;
-  --color-info-light: #60A5FA;
-  --color-info: #3B82F6;
-  --color-info-dark: #2563EB;
-}
-
-@media (prefers-color-scheme: dark) {
-  @theme {
-  --color-neutral-0: #121212;
-  --color-neutral-50: #262626;
-  --color-neutral-100: #262626;
-  --color-neutral-200: #404040;
-  --color-neutral-300: #525252;
-  --color-neutral-700: #D4D4D4;
-  --color-neutral-800: #E5E5E5;
-  --color-neutral-900: #FFFFFF;
-  }
+  --color-marian-blue-50: #FAFBFF;
+  --color-marian-blue-100: #F6F8FF;
+  --color-marian-blue-200: #E1E7FF;
+  --color-marian-blue-300: #C3CCF7;
+  --color-marian-blue-400: #94A5F2;
+  --color-marian-blue-500: #697DD6;
+  --color-marian-blue-600: #4357AD;
+  --color-marian-blue-700: #31428B;
+  --color-marian-blue-800: #25326A;
+  --color-marian-blue-900: #131937;
+  --color-midnight-50: #707070;
+  --color-midnight-100: #5C5C5C;
+  --color-midnight-200: #525252;
+  --color-midnight-300: #474747;
+  --color-midnight-400: #3D3D3D;
+  --color-midnight-500: #333333;
+  --color-midnight-600: #292929;
+  --color-midnight-700: #161616;
+  --color-midnight-800: #141414;
+  --color-midnight-900: #0A0A0A;
+  --color-gray-15: #F4F5F8;
+  --color-gray-25: #EDEEF1;
+  --color-gray-35: #DDE0E6;
+  --color-gray-50: #B1B5BE;
+  --color-gray-100: #A6ABB5;
+  --color-gray-200: #9BA0AB;
+  --color-gray-300: #9095A2;
+  --color-gray-400: #858B99;
+  --color-gray-500: #7A8190;
+  --color-gray-600: #6F7685;
+  --color-gray-700: #5E6471;
+  --color-gray-800: #5D636F;
+  --color-gray-900: #545964;
+  --color-amber-50: #FFFBEB;
+  --color-amber-100: #FEF3C7;
+  --color-amber-200: #FDE68A;
+  --color-amber-300: #FCD34D;
+  --color-amber-400: #FBBF24;
+  --color-amber-500: #F59E0B;
+  --color-amber-600: #D97706;
+  --color-amber-700: #B45309;
+  --color-amber-800: #92400E;
+  --color-amber-900: #78350F;
+  --color-amber-text: #BA5C0A;
+  --color-yellow-50: #FFF2D6;
+  --color-yellow-100: #FFECC2;
+  --color-yellow-200: #FFE5AD;
+  --color-yellow-300: #FFDF99;
+  --color-yellow-400: #FFD885;
+  --color-yellow-500: #FFD270;
+  --color-yellow-600: #FFCB5C;
+  --color-yellow-700: #FFC140;
+  --color-yellow-800: #FFBE33;
+  --color-yellow-900: #FFB81F;
+  --color-ketchup-50: #FEF2F2;
+  --color-ketchup-100: #FEE2E2;
+  --color-ketchup-200: #FECACA;
+  --color-ketchup-300: #FCA5A5;
+  --color-ketchup-400: #F87171;
+  --color-ketchup-500: #EF4444;
+  --color-ketchup-600: #DC2626;
+  --color-ketchup-700: #B91C1C;
+  --color-ketchup-800: #991B1B;
+  --color-ketchup-900: #7F1D1D;
+  --color-ketchup-text: #D91F3C;
+  --color-green-50: #F2FDF4;
+  --color-green-100: #E5FBE9;
+  --color-green-200: #C7F4D0;
+  --color-green-300: #99E5AC;
+  --color-green-400: #5FCD80;
+  --color-green-500: #36B260;
+  --color-green-600: #258F4B;
+  --color-green-700: #1B6F3B;
+  --color-green-800: #145430;
+  --color-green-900: #0E3622;
+  --color-green-text: #0E8745;
+  --color-blue-50: #EFF6FF;
+  --color-blue-100: #DBEAFE;
+  --color-blue-200: #BFDBFE;
+  --color-blue-300: #93C5FD;
+  --color-blue-400: #60A5FA;
+  --color-blue-500: #3B82F6;
+  --color-blue-600: #2563EB;
+  --color-blue-700: #1D4ED8;
+  --color-blue-800: #1E40AF;
+  --color-blue-900: #1E3A8A;
+  --color-blue-text: #1E40AF;
+  --color-brand-green: #6DFFB4;
+  --color-overlay-black-5: #0000000D;
+  --color-overlay-black-8: #00000014;
+  --color-overlay-black-12: #0000001F;
+  --color-overlay-black-16: #00000029;
+  --color-overlay-white-5: #FFFFFF0D;
+  --color-overlay-white-8: #FFFFFF14;
+  --color-overlay-white-12: #FFFFFF1F;
+  --color-overlay-white-16: #FFFFFF29;
+  --color-white: #FFFFFF;
+  --color-black: #000000;
+
+  --spacing: 0.25rem;
+  --spacing-screen-x: 1rem;
+  --spacing-screen-y: 1.5rem;
+
+  --radius-none: 0rem;
+  --radius-sm: 0.5rem;
+  --radius-md: 0.75rem;
+  --radius-lg: 1rem;
+  --radius-xl: 1.25rem;
+  --radius-2xl: 1.5rem;
+  --radius-full: 624.9375rem;
+  --radius-button: 1rem;
+  --radius-card: 1.25rem;
+  --radius-input: 0.75rem;
+  --radius-chip: 624.9375rem;
+  --radius-badge: 0.5rem;
+
+  --shadow-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
+  --shadow-sm-dark: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
+  --shadow-md-dark: 0px 4px 12px 0px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0px 8px 24px -4px rgba(0, 0, 0, 0.12);
+  --shadow-lg-dark: 0px 8px 24px -4px rgba(0, 0, 0, 0.6);
+
+  --opacity-disabled: 0.4;
+  --opacity-hover: 0.08;
+  --opacity-pressed: 0.12;
+}
+
+@utility border-default {
+  border-width: 1px;
+}
+
+@utility border-strong {
+  border-width: 1.5px;
+}
+
+@utility border-heavy {
+  border-width: 2px;
+}
+
+@utility text-display1 {
+  font-family: Poppins;
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 2.5rem;
+  letter-spacing: -1px;
+  text-transform: none;
+}
+
+@utility text-display2 {
+  font-family: Poppins;
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 2.5rem;
+  letter-spacing: -1px;
+  text-transform: none;
+}
+
+@utility text-h1 {
+  font-family: Poppins;
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 2rem;
+  letter-spacing: -1px;
+  text-transform: none;
+}
+
+@utility text-h2 {
+  font-family: Poppins;
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 1.75rem;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+@utility text-h3 {
+  font-family: Poppins;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.5rem;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+@utility text-body-large {
+  font-family: Inter;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+@utility text-body-default {
+  font-family: Inter;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+@utility text-body-small {
+  font-family: Inter;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1rem;
+  letter-spacing: 0.2px;
+  text-transform: none;
+}
+
+@utility text-label-large {
+  font-family: Inter;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+@utility text-label-default {
+  font-family: Inter;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+@utility text-label-small {
+  font-family: Inter;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1rem;
+  letter-spacing: 0.2px;
+  text-transform: none;
+}
+
+@utility text-label-tiny {
+  font-family: Inter;
+  font-size: 0.625rem;
+  font-weight: 600;
+  line-height: 0.875rem;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+@utility text-caption {
+  font-family: Inter;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1rem;
+  letter-spacing: 0.5px;
+  text-transform: none;
+}
+
+@utility text-caption-uppercase {
+  font-family: Inter;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1rem;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+@utility text-overline {
+  font-family: Inter;
+  font-size: 0.625rem;
+  font-weight: 600;
+  line-height: 1rem;
+  letter-spacing: 8px;
+  text-transform: uppercase;
+}
+
+@utility text-button-large {
+  font-family: Inter;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+@utility text-button-default {
+  font-family: Inter;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+@utility text-button-small {
+  font-family: Inter;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1rem;
+  letter-spacing: 0;
+  text-transform: none;
 }