@spark-ui/components 17.2.5-beta.0 → 17.2.5

package/dist/chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/chip/variants/outlined.ts","../../src/chip/variants/tinted.ts","../../src/chip/variants/dashed.ts","../../src/chip/Chip.styles.tsx","../../src/chip/useChipContext.tsx","../../src/chip/useChipElement.tsx","../../src/chip/Chip.tsx","../../src/chip/ChipClearButton.styles.tsx","../../src/chip/ChipClearButton.tsx","../../src/chip/ChipContent.tsx","../../src/chip/ChipIcon.tsx","../../src/chip/ChipLeadingIcon.tsx","../../src/chip/ChipTrailingIcon.tsx","../../src/chip/index.ts"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n  /** Intents **/\n  {\n    design: 'outlined',\n    intent: 'main',\n    class: tw([\n      'enabled:hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n      'text-main',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'support',\n    class: tw([\n      'enabled:hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw([\n      'enabled:hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'aria-pressed:bg-accent-container',\n      'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n      'text-accent',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'success',\n    class: tw([\n      'enabled:hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw([\n      'enabled:hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n      'text-alert',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'danger',\n    class: tw([\n      'enabled:hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n      'text-error',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'info',\n    class: tw([\n      'enabled:hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n      'text-info',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'neutral',\n    class: tw([\n      'enabled:hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n      'text-neutral',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'surface',\n    class: tw([\n      'enabled:hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-surface',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'outlined',\n    hasClearButton: false,\n    class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n  {\n    design: 'outlined',\n    hasClearButton: true,\n    class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n  /** Intents **/\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw([\n      'bg-main-container',\n      'enabled:hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n      'aria-pressed:bg-main aria-pressed:text-on-main aria-pressed:enabled:hover:bg-main/dim-1',\n      'text-on-main-container',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw([\n      'bg-support-container',\n      'enabled:hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n      'aria-pressed:bg-support aria-pressed:text-on-support aria-pressed:enabled:hover:bg-support/dim-1',\n      'text-on-support-container',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw([\n      'bg-accent-container',\n      'enabled:hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n      'aria-pressed:bg-accent aria-pressed:text-on-accent aria-pressed:enabled:hover:bg-accent/dim-1',\n      'text-on-accent-container',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw([\n      'bg-success-container',\n      'enabled:hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n      'aria-pressed:bg-success aria-pressed:text-on-success aria-pressed:enabled:hover:bg-success/dim-1',\n      'text-on-success-container',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw([\n      'bg-alert-container',\n      'enabled:hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n      'aria-pressed:bg-alert aria-pressed:text-on-alert aria-pressed:enabled:hover:bg-alert/dim-1',\n      'text-on-alert-container',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw([\n      'bg-error-container',\n      'enabled:hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n      'aria-pressed:bg-error aria-pressed:text-on-error aria-pressed:enabled:hover:bg-error/dim-1',\n      'text-on-error-container',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw([\n      'bg-info-container',\n      'enabled:hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n      'aria-pressed:bg-info aria-pressed:text-on-info aria-pressed:enabled:hover:bg-info/dim-1',\n      'text-on-info-container',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw([\n      'bg-neutral-container',\n      'enabled:hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n      'aria-pressed:bg-neutral aria-pressed:text-on-neutral aria-pressed:enabled:hover:bg-neutral/dim-1',\n      'text-on-neutral-container',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'tinted',\n    class: tw([\n      'bg-surface/dim-1',\n      'enabled:hover:bg-surface-hovered/dim-1',\n      'enabled:active:bg-surface-hovered/dim-1',\n      'focus-visible:bg-surface-hovered/dim-1',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-on-surface/dim-1',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'tinted',\n    hasClearButton: false,\n    class: tw(['px-md']),\n  },\n  {\n    design: 'tinted',\n    hasClearButton: true,\n    class: tw(['pl-md']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const dashedVariants = [\n  /** Intents **/\n  {\n    intent: 'main',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n      'text-main',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n      'text-accent',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n      'text-alert',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n      'text-error',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n      'text-info',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n      'text-neutral',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-surface',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'dashed',\n    hasClearButton: false,\n    class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n  {\n    design: 'dashed',\n    hasClearButton: true,\n    class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { dashedVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const chipStyles = cva(\n  [\n    'box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-full text-body-1 font-regular',\n    'focus-visible:u-outline',\n    'ease-out duration-150',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the chip.\n       *\n       * - `filled`: Chip will be plain.\n       *\n       * - `outlined`: Chip will be transparent with an outline.\n       *\n       * - `tinted`: Chip will be filled but using a lighter color scheme.\n       *\n       * - `dashed`: Chip will be transparent with an outline dashed.\n       */\n      design: makeVariants<'design', ['outlined', 'tinted', 'dashed']>({\n        outlined: ['bg-transparent border-sm border-solid border-current'],\n        tinted: [''],\n        dashed: [\n          'bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high',\n        ],\n      }),\n      /**\n       * Color scheme of the chip.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n      /**\n       * Disable the chip, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed', 'opacity-dim-3'],\n      },\n      hasClearButton: {\n        true: [],\n        false: [],\n      },\n      // 'pl-[calc(var(--spacing-md)-(var(--border-width-sm)))]'\n    },\n    compoundVariants: [...outlinedVariants, ...tintedVariants, ...dashedVariants],\n    defaultVariants: {\n      design: 'outlined',\n      intent: 'support',\n    },\n  }\n)\n\nexport type ChipStylesProps = VariantProps<typeof chipStyles>\n","import { createContext, useContext } from 'react'\n\nimport { type ChipProps } from './Chip'\n\nexport type ChipsContextType = Pick<ChipProps, 'disabled' | 'design' | 'intent' | 'onClear'>\n\nexport const ChipContext = createContext<ChipsContextType>({} as ChipsContextType)\nexport const useChipContext = () => useContext(ChipContext) || {}\n","import { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { emulateTab } from 'emulate-tab'\nimport {\n  Children,\n  ElementType,\n  FC,\n  ForwardRefExoticComponent,\n  HTMLAttributes,\n  isValidElement,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  RefAttributes,\n} from 'react'\n\nimport { Slot } from '../slot'\n\ninterface ReturnedValue {\n  Element:\n    | ForwardRefExoticComponent<\n        HTMLAttributes<HTMLElement> & {\n          children?: ReactNode\n        } & RefAttributes<HTMLElement>\n      >\n    | ElementType\n  chipProps:\n    | {\n        type: 'button'\n        'aria-pressed'?: boolean\n        'data-state'?: 'on' | 'off'\n        onClick: (event: MouseEvent<HTMLButtonElement>) => void\n        onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n        disabled?: boolean\n        children: ReactNode\n      }\n    | {\n        'aria-disabled'?: boolean\n        children: ReactNode\n        onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n      }\n  compoundElements: {\n    leadingIcon: ReactNode\n    trailingIcon: ReactNode\n    content: ReactNode\n    clearButton: ReactNode\n  }\n}\n\nconst getDisplayName = (element?: ReactElement) => {\n  return element ? (element.type as FC).displayName : ''\n}\n\nconst findElement =\n  (children: ReactNode) =>\n  (...values: string[]) => {\n    const validChildren = Children.toArray(children).filter(isValidElement)\n\n    return validChildren.find(child => {\n      const displayName = getDisplayName(child)\n\n      return values.includes(displayName || '')\n    })\n  }\n\nexport const useChipElement = ({\n  onClick,\n  asChild,\n  pressed,\n  defaultPressed,\n  disabled,\n  value,\n  defaultValue,\n  children,\n  onClear,\n}: {\n  onClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    args: { pressed: boolean; value?: string | number | readonly string[] }\n  ) => void\n  onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n  asChild?: boolean\n  pressed?: boolean\n  defaultPressed?: boolean\n  value?: string | number | readonly string[]\n  defaultValue?: string | number | readonly string[]\n  disabled?: boolean\n  children?: ReactNode\n  onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n}): ReturnedValue => {\n  const [isPressed, setIsPressed] = useCombinedState<boolean | undefined>(pressed, defaultPressed)\n  const [innerValue] = useCombinedState<string | number | readonly string[] | undefined>(\n    value,\n    defaultValue\n  )\n\n  const findChipElement = findElement(children)\n\n  const leadingIcon = findChipElement('Chip.LeadingIcon')\n  const trailingIcon = findChipElement('Chip.TrailingIcon')\n  const content = findChipElement('Chip.Content')\n  const clearButton = findChipElement('Chip.ClearButton')\n\n  const isButton = (onClick || isPressed) !== undefined\n\n  const formattedChildren = [leadingIcon, content, clearButton].every(\n    element => element === undefined\n  ) ? (\n    <span className=\"inline-block grow truncate\">{children}</span>\n  ) : (\n    <>\n      {leadingIcon}\n      {content}\n      {leadingIcon === undefined ? trailingIcon : null}\n      {clearButton}\n    </>\n  )\n\n  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>): void => {\n    if (!!clearButton && !disabled && ['Delete', 'Backspace'].includes(event.key)) {\n      if (onClear) {\n        onClear()\n        event.key === 'Delete' && emulateTab()\n        event.key === 'Backspace' && emulateTab.backwards()\n      }\n    }\n  }\n\n  if (isButton) {\n    return {\n      Element: asChild ? Slot : 'button',\n      chipProps: {\n        type: 'button',\n        ...(isPressed !== undefined && {\n          'aria-pressed': isPressed,\n          'data-state': isPressed ? 'on' : 'off',\n        }),\n        onClick: (event: MouseEvent<HTMLButtonElement>): void => {\n          isPressed !== undefined && setIsPressed(!isPressed)\n          onClick && onClick(event, { pressed: isPressed as boolean, value: innerValue })\n        },\n        onKeyDown,\n        disabled,\n        children: formattedChildren,\n      },\n      compoundElements: {\n        leadingIcon,\n        trailingIcon,\n        content,\n        clearButton,\n      },\n    }\n  }\n\n  return {\n    Element: asChild ? Slot : 'div',\n    chipProps: {\n      'aria-disabled': disabled,\n      children: formattedChildren,\n      onKeyDown,\n    },\n    compoundElements: {\n      leadingIcon,\n      trailingIcon,\n      content,\n      clearButton,\n    },\n  }\n}\n","import { ComponentPropsWithoutRef, MouseEvent, Ref } from 'react'\n\nimport { chipStyles, type ChipStylesProps } from './Chip.styles'\nimport { ChipContext } from './useChipContext'\nimport { useChipElement } from './useChipElement'\n\ntype ChipPrimitiveProps = Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'disabled' | 'type'>\n\nexport interface ChipProps extends ChipPrimitiveProps, Omit<ChipStylesProps, 'hasClearButton'> {\n  /**\n   * Configures a toggleButton aria-pressed initial value\n   */\n  defaultPressed?: boolean\n  /**\n   * Configures a toggleButton aria-pressed value\n   */\n  pressed?: boolean\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Event handler fired each clicking event\n   */\n  onClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    args: { pressed: boolean; value?: number | string | readonly string[] }\n  ) => void\n  /**\n   * Clear chip handler\n   */\n  onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n  ref?: Ref<HTMLButtonElement | HTMLDivElement>\n}\n\nexport const Chip = ({\n  design = 'outlined',\n  disabled,\n  children,\n  intent = 'support',\n  defaultPressed,\n  pressed,\n  asChild,\n  className,\n  onClick,\n  onClear,\n  ref: forwardedRef,\n  ...otherProps\n}: ChipProps) => {\n  const {\n    Element: ChipElement,\n    chipProps: { children: formattedChildren, ...chipProps },\n    compoundElements,\n  } = useChipElement({\n    asChild,\n    pressed,\n    defaultPressed,\n    onClick,\n    disabled: !!disabled,\n    value: otherProps.value,\n    defaultValue: otherProps.defaultValue,\n    children,\n    onClear,\n  })\n\n  const { clearButton } = compoundElements\n\n  return (\n    <ChipContext.Provider value={{ disabled, design, intent, onClear }}>\n      <ChipElement\n        ref={forwardedRef}\n        className={chipStyles({\n          className,\n          design,\n          disabled,\n          intent,\n          hasClearButton: !!clearButton,\n        })}\n        {...{\n          ...chipProps,\n          ...otherProps,\n        }}\n        data-spark-component=\"chip\"\n      >\n        {formattedChildren}\n      </ChipElement>\n    </ChipContext.Provider>\n  )\n}\n\nChip.displayName = 'Chip'\n","import { tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const chipClearButtonWrapperStyles = cva(\n  ['ml-md flex h-full items-center justify-center focus-visible:outline-hidden'],\n  {\n    variants: {\n      disabled: {\n        false: ['cursor-pointer'],\n        true: ['cursor-not-allowed'],\n      },\n      isBordered: {\n        false: ['pr-md'],\n        true: ['pr-[7px]'],\n      },\n      design: {\n        outlined: [],\n        tinted: [],\n        dashed: [],\n      },\n    },\n    compoundVariants: [\n      {\n        design: 'outlined',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'outlined',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n      {\n        design: 'tinted',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'tinted',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n      {\n        design: 'dashed',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'dashed',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n    ],\n  }\n)\n\nexport const chipClearButtonStyles = cva(\n  ['rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm', 'focus-visible:u-outline'],\n  {\n    variants: {\n      disabled: {\n        true: ['cursor-not-allowed'],\n        false: ['cursor-pointer'],\n      },\n    },\n    defaultVariants: {\n      disabled: false,\n    },\n  }\n)\n\nexport type ChipClearButtonStylesProps = VariantProps<typeof chipClearButtonWrapperStyles>\n","import { Close } from '@spark-ui/icons/Close'\nimport {\n  cloneElement,\n  ComponentPropsWithoutRef,\n  MouseEvent,\n  ReactElement,\n  Ref,\n  useCallback,\n} from 'react'\n\nimport { Icon } from '../icon'\nimport {\n  chipClearButtonStyles,\n  type ChipClearButtonStylesProps,\n  chipClearButtonWrapperStyles,\n} from './ChipClearButton.styles'\nimport { useChipContext } from './useChipContext'\n\nexport interface ChipClearButtonProps\n  extends ComponentPropsWithoutRef<'span'>, ChipClearButtonStylesProps {\n  label: string\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipClearButton = ({\n  children = (\n    <Icon>\n      <Close />\n    </Icon>\n  ),\n  tabIndex = 0,\n  label,\n  ref: forwardedRef,\n}: ChipClearButtonProps) => {\n  const { design, disabled, onClear } = useChipContext()\n\n  const onClearHandler = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation()\n      !disabled && onClear && onClear(event)\n    },\n    [disabled, onClear]\n  )\n\n  return (\n    <span\n      className={chipClearButtonWrapperStyles({\n        isBordered: ['outline', 'dashed'].includes(`${design}`),\n        disabled: !!disabled,\n        design,\n      })}\n      onClick={onClearHandler}\n      ref={forwardedRef}\n    >\n      <button\n        tabIndex={tabIndex}\n        type=\"button\"\n        disabled={!!disabled}\n        className={chipClearButtonStyles({ disabled })}\n        aria-label={label}\n      >\n        {children && cloneElement(children as ReactElement<HTMLElement>, { ariaLabel: label })}\n      </button>\n    </span>\n  )\n}\n\nChipClearButton.displayName = 'Chip.ClearButton'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipContentProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipContent = ({ children, className, ref: forwardedRef }: ChipContentProps) => {\n  return (\n    <span className={cx('inline-block grow truncate', className)} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nChipContent.displayName = 'Chip.Content'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipIconProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipIcon = ({ children, className, ref: forwardedRef }: ChipIconProps) => {\n  return (\n    <span className={cx('flex h-full items-center justify-center', className)} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nChipIcon.displayName = 'Chip.Icon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipLeadingIconProps = ChipIconProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipLeadingIcon = ({\n  className,\n  ref: forwardedRef,\n  ...props\n}: ChipLeadingIconProps) => (\n  <ChipIcon className={cx('mr-sm', className)} ref={forwardedRef} {...props} />\n)\n\nChipLeadingIcon.displayName = 'Chip.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipTrailingIconProps = ChipIconProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipTrailingIcon = ({\n  className,\n  ref: forwardedRef,\n  ...props\n}: ChipTrailingIconProps) => (\n  <ChipIcon className={cx('ml-md', className)} ref={forwardedRef} {...props} />\n)\n\nChipTrailingIcon.displayName = 'Chip.TrailingIcon'\n","import { Chip as Root } from './Chip'\nimport { ChipClearButton } from './ChipClearButton'\nimport { ChipContent } from './ChipContent'\nimport { ChipLeadingIcon } from './ChipLeadingIcon'\nimport { ChipTrailingIcon } from './ChipTrailingIcon'\n\nexport const Chip: typeof Root & {\n  Content: typeof ChipContent\n  LeadingIcon: typeof ChipLeadingIcon\n  TrailingIcon: typeof ChipTrailingIcon\n  ClearButton: typeof ChipClearButton\n} = Object.assign(Root, {\n  Content: ChipContent,\n  LeadingIcon: ChipLeadingIcon,\n  TrailingIcon: ChipTrailingIcon,\n  ClearButton: ChipClearButton,\n})\n\nChip.displayName = 'Chip'\nChip.ClearButton.displayName = 'Chip.ClearButton'\nChip.Content.displayName = 'Chip.Content'\nChip.LeadingIcon.displayName = 'Chip.LeadingIcon'\nChip.TrailingIcon.displayName = 'Chip.TrailingIcon'\n\nexport { type ChipClearButtonProps } from './ChipClearButton'\nexport { type ChipContentProps } from './ChipContent'\nexport { type ChipLeadingIconProps } from './ChipLeadingIcon'\nexport { type ChipTrailingIconProps } from './ChipTrailingIcon'\n"],"mappings":"sZAEA,IAAa,EAAmB,CAE9B,CACE,OAAQ,WACR,OAAQ,OACR,OAAA,EAAA,EAAA,IAAU,CACR,8BACA,+BACA,8BACA,wHACA,YACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,UACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,iIACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,gCACA,iCACA,gCACA,mCACA,8HACA,cACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,UACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,iIACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,QACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,+BACA,gCACA,+BACA,2HACA,aACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,+BACA,gCACA,+BACA,2HACA,aACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,OACR,OAAA,EAAA,EAAA,IAAU,CACR,8BACA,+BACA,8BACA,wHACA,YACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,UACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,iIACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,UACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,qGACA,eACD,CAAC,CACH,CAED,CACE,OAAQ,WACR,eAAgB,GAChB,OAAA,EAAA,EAAA,IAAU,CAAC,sDAAsD,CAAC,CACnE,CACD,CACE,OAAQ,WACR,eAAgB,GAChB,OAAA,EAAA,EAAA,IAAU,CAAC,sDAAsD,CAAC,CACnE,CACF,CCjHY,EAAiB,CAE5B,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,oBACA,0CACA,2CACA,0CACA,0FACA,yBACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,uBACA,6CACA,8CACA,6CACA,mGACA,4BACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,sBACA,4CACA,6CACA,4CACA,gGACA,2BACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,uBACA,6CACA,8CACA,6CACA,mGACA,4BACD,CAAC,CACH,CACD,CACE,OAAQ,QACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,qBACA,2CACA,4CACA,2CACA,6FACA,0BACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,qBACA,2CACA,4CACA,2CACA,6FACA,0BACD,CAAC,CACH,CACD,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,oBACA,0CACA,2CACA,0CACA,0FACA,yBACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,uBACA,6CACA,8CACA,6CACA,mGACA,4BACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,mBACA,yCACA,0CACA,yCACA,qGACA,wBACD,CAAC,CACH,CAED,CACE,OAAQ,SACR,eAAgB,GAChB,OAAA,EAAA,EAAA,IAAU,CAAC,QAAQ,CAAC,CACrB,CACD,CACE,OAAQ,SACR,eAAgB,GAChB,OAAA,EAAA,EAAA,IAAU,CAAC,QAAQ,CAAC,CACrB,CACF,CCzHY,EAAiB,CAE5B,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,8BACA,+BACA,8BACA,wHACA,YACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,iIACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,gCACA,iCACA,gCACA,8HACA,cACD,CAAC,CACH,CACD,CA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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/chip/variants/outlined.ts","../../src/chip/variants/tinted.ts","../../src/chip/variants/dashed.ts","../../src/chip/Chip.styles.tsx","../../src/chip/useChipContext.tsx","../../src/chip/useChipElement.tsx","../../src/chip/Chip.tsx","../../src/chip/ChipClearButton.styles.tsx","../../src/chip/ChipClearButton.tsx","../../src/chip/ChipContent.tsx","../../src/chip/ChipIcon.tsx","../../src/chip/ChipLeadingIcon.tsx","../../src/chip/ChipTrailingIcon.tsx","../../src/chip/index.ts"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n  /** Intents **/\n  {\n    design: 'outlined',\n    intent: 'main',\n    class: tw([\n      'enabled:hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n      'text-main',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'support',\n    class: tw([\n      'enabled:hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw([\n      'enabled:hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'aria-pressed:bg-accent-container',\n      'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n      'text-accent',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'success',\n    class: tw([\n      'enabled:hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw([\n      'enabled:hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n      'text-alert',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'danger',\n    class: tw([\n      'enabled:hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n      'text-error',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'info',\n    class: tw([\n      'enabled:hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n      'text-info',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'neutral',\n    class: tw([\n      'enabled:hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n      'text-neutral',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'surface',\n    class: tw([\n      'enabled:hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-surface',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'outlined',\n    hasClearButton: false,\n    class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n  {\n    design: 'outlined',\n    hasClearButton: true,\n    class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n  /** Intents **/\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw([\n      'bg-main-container',\n      'enabled:hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n      'aria-pressed:bg-main aria-pressed:text-on-main aria-pressed:enabled:hover:bg-main/dim-1',\n      'text-on-main-container',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw([\n      'bg-support-container',\n      'enabled:hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n      'aria-pressed:bg-support aria-pressed:text-on-support aria-pressed:enabled:hover:bg-support/dim-1',\n      'text-on-support-container',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw([\n      'bg-accent-container',\n      'enabled:hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n      'aria-pressed:bg-accent aria-pressed:text-on-accent aria-pressed:enabled:hover:bg-accent/dim-1',\n      'text-on-accent-container',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw([\n      'bg-success-container',\n      'enabled:hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n      'aria-pressed:bg-success aria-pressed:text-on-success aria-pressed:enabled:hover:bg-success/dim-1',\n      'text-on-success-container',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw([\n      'bg-alert-container',\n      'enabled:hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n      'aria-pressed:bg-alert aria-pressed:text-on-alert aria-pressed:enabled:hover:bg-alert/dim-1',\n      'text-on-alert-container',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw([\n      'bg-error-container',\n      'enabled:hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n      'aria-pressed:bg-error aria-pressed:text-on-error aria-pressed:enabled:hover:bg-error/dim-1',\n      'text-on-error-container',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw([\n      'bg-info-container',\n      'enabled:hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n      'aria-pressed:bg-info aria-pressed:text-on-info aria-pressed:enabled:hover:bg-info/dim-1',\n      'text-on-info-container',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw([\n      'bg-neutral-container',\n      'enabled:hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n      'aria-pressed:bg-neutral aria-pressed:text-on-neutral aria-pressed:enabled:hover:bg-neutral/dim-1',\n      'text-on-neutral-container',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'tinted',\n    class: tw([\n      'bg-surface/dim-1',\n      'enabled:hover:bg-surface-hovered/dim-1',\n      'enabled:active:bg-surface-hovered/dim-1',\n      'focus-visible:bg-surface-hovered/dim-1',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-on-surface/dim-1',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'tinted',\n    hasClearButton: false,\n    class: tw(['px-md']),\n  },\n  {\n    design: 'tinted',\n    hasClearButton: true,\n    class: tw(['pl-md']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const dashedVariants = [\n  /** Intents **/\n  {\n    intent: 'main',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n      'text-main',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n      'text-accent',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n      'text-alert',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n      'text-error',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n      'text-info',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n      'text-neutral',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-surface',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'dashed',\n    hasClearButton: false,\n    class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n  {\n    design: 'dashed',\n    hasClearButton: true,\n    class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { dashedVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const chipStyles = cva(\n  [\n    'box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-md text-body-1 font-regular',\n    'focus-visible:u-outline',\n    'ease-out duration-150',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the chip.\n       *\n       * - `filled`: Chip will be plain.\n       *\n       * - `outlined`: Chip will be transparent with an outline.\n       *\n       * - `tinted`: Chip will be filled but using a lighter color scheme.\n       *\n       * - `dashed`: Chip will be transparent with an outline dashed.\n       */\n      design: makeVariants<'design', ['outlined', 'tinted', 'dashed']>({\n        outlined: ['bg-transparent border-sm border-solid border-current'],\n        tinted: [''],\n        dashed: [\n          'bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high',\n        ],\n      }),\n      /**\n       * Color scheme of the chip.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n      /**\n       * Disable the chip, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed', 'opacity-dim-3'],\n      },\n      hasClearButton: {\n        true: [],\n        false: [],\n      },\n      // 'pl-[calc(var(--spacing-md)-(var(--border-width-sm)))]'\n    },\n    compoundVariants: [...outlinedVariants, ...tintedVariants, ...dashedVariants],\n    defaultVariants: {\n      design: 'outlined',\n      intent: 'support',\n    },\n  }\n)\n\nexport type ChipStylesProps = VariantProps<typeof chipStyles>\n","import { createContext, useContext } from 'react'\n\nimport { type ChipProps } from './Chip'\n\nexport type ChipsContextType = Pick<ChipProps, 'disabled' | 'design' | 'intent' | 'onClear'>\n\nexport const ChipContext = createContext<ChipsContextType>({} as ChipsContextType)\nexport const useChipContext = () => useContext(ChipContext) || {}\n","import { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { emulateTab } from 'emulate-tab'\nimport {\n  Children,\n  ElementType,\n  FC,\n  ForwardRefExoticComponent,\n  HTMLAttributes,\n  isValidElement,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  RefAttributes,\n} from 'react'\n\nimport { Slot } from '../slot'\n\ninterface ReturnedValue {\n  Element:\n    | ForwardRefExoticComponent<\n        HTMLAttributes<HTMLElement> & {\n          children?: ReactNode\n        } & RefAttributes<HTMLElement>\n      >\n    | ElementType\n  chipProps:\n    | {\n        type: 'button'\n        'aria-pressed'?: boolean\n        'data-state'?: 'on' | 'off'\n        onClick: (event: MouseEvent<HTMLButtonElement>) => void\n        onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n        disabled?: boolean\n        children: ReactNode\n      }\n    | {\n        'aria-disabled'?: boolean\n        children: ReactNode\n        onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n      }\n  compoundElements: {\n    leadingIcon: ReactNode\n    trailingIcon: ReactNode\n    content: ReactNode\n    clearButton: ReactNode\n  }\n}\n\nconst getDisplayName = (element?: ReactElement) => {\n  return element ? (element.type as FC).displayName : ''\n}\n\nconst findElement =\n  (children: ReactNode) =>\n  (...values: string[]) => {\n    const validChildren = Children.toArray(children).filter(isValidElement)\n\n    return validChildren.find(child => {\n      const displayName = getDisplayName(child)\n\n      return values.includes(displayName || '')\n    })\n  }\n\nexport const useChipElement = ({\n  onClick,\n  asChild,\n  pressed,\n  defaultPressed,\n  disabled,\n  value,\n  defaultValue,\n  children,\n  onClear,\n}: {\n  onClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    args: { pressed: boolean; value?: string | number | readonly string[] }\n  ) => void\n  onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n  asChild?: boolean\n  pressed?: boolean\n  defaultPressed?: boolean\n  value?: string | number | readonly string[]\n  defaultValue?: string | number | readonly string[]\n  disabled?: boolean\n  children?: ReactNode\n  onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n}): ReturnedValue => {\n  const [isPressed, setIsPressed] = useCombinedState<boolean | undefined>(pressed, defaultPressed)\n  const [innerValue] = useCombinedState<string | number | readonly string[] | undefined>(\n    value,\n    defaultValue\n  )\n\n  const findChipElement = findElement(children)\n\n  const leadingIcon = findChipElement('Chip.LeadingIcon')\n  const trailingIcon = findChipElement('Chip.TrailingIcon')\n  const content = findChipElement('Chip.Content')\n  const clearButton = findChipElement('Chip.ClearButton')\n\n  const isButton = (onClick || isPressed) !== undefined\n\n  const formattedChildren = [leadingIcon, content, clearButton].every(\n    element => element === undefined\n  ) ? (\n    <span className=\"inline-block grow truncate\">{children}</span>\n  ) : (\n    <>\n      {leadingIcon}\n      {content}\n      {leadingIcon === undefined ? trailingIcon : null}\n      {clearButton}\n    </>\n  )\n\n  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>): void => {\n    if (!!clearButton && !disabled && ['Delete', 'Backspace'].includes(event.key)) {\n      if (onClear) {\n        onClear()\n        event.key === 'Delete' && emulateTab()\n        event.key === 'Backspace' && emulateTab.backwards()\n      }\n    }\n  }\n\n  if (isButton) {\n    return {\n      Element: asChild ? Slot : 'button',\n      chipProps: {\n        type: 'button',\n        ...(isPressed !== undefined && {\n          'aria-pressed': isPressed,\n          'data-state': isPressed ? 'on' : 'off',\n        }),\n        onClick: (event: MouseEvent<HTMLButtonElement>): void => {\n          isPressed !== undefined && setIsPressed(!isPressed)\n          onClick && onClick(event, { pressed: isPressed as boolean, value: innerValue })\n        },\n        onKeyDown,\n        disabled,\n        children: formattedChildren,\n      },\n      compoundElements: {\n        leadingIcon,\n        trailingIcon,\n        content,\n        clearButton,\n      },\n    }\n  }\n\n  return {\n    Element: asChild ? Slot : 'div',\n    chipProps: {\n      'aria-disabled': disabled,\n      children: formattedChildren,\n      onKeyDown,\n    },\n    compoundElements: {\n      leadingIcon,\n      trailingIcon,\n      content,\n      clearButton,\n    },\n  }\n}\n","import { ComponentPropsWithoutRef, MouseEvent, Ref } from 'react'\n\nimport { chipStyles, type ChipStylesProps } from './Chip.styles'\nimport { ChipContext } from './useChipContext'\nimport { useChipElement } from './useChipElement'\n\ntype ChipPrimitiveProps = Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'disabled' | 'type'>\n\nexport interface ChipProps extends ChipPrimitiveProps, Omit<ChipStylesProps, 'hasClearButton'> {\n  /**\n   * Configures a toggleButton aria-pressed initial value\n   */\n  defaultPressed?: boolean\n  /**\n   * Configures a toggleButton aria-pressed value\n   */\n  pressed?: boolean\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Event handler fired each clicking event\n   */\n  onClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    args: { pressed: boolean; value?: number | string | readonly string[] }\n  ) => void\n  /**\n   * Clear chip handler\n   */\n  onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n  ref?: Ref<HTMLButtonElement | HTMLDivElement>\n}\n\nexport const Chip = ({\n  design = 'outlined',\n  disabled,\n  children,\n  intent = 'support',\n  defaultPressed,\n  pressed,\n  asChild,\n  className,\n  onClick,\n  onClear,\n  ref: forwardedRef,\n  ...otherProps\n}: ChipProps) => {\n  const {\n    Element: ChipElement,\n    chipProps: { children: formattedChildren, ...chipProps },\n    compoundElements,\n  } = useChipElement({\n    asChild,\n    pressed,\n    defaultPressed,\n    onClick,\n    disabled: !!disabled,\n    value: otherProps.value,\n    defaultValue: otherProps.defaultValue,\n    children,\n    onClear,\n  })\n\n  const { clearButton } = compoundElements\n\n  return (\n    <ChipContext.Provider value={{ disabled, design, intent, onClear }}>\n      <ChipElement\n        ref={forwardedRef}\n        className={chipStyles({\n          className,\n          design,\n          disabled,\n          intent,\n          hasClearButton: !!clearButton,\n        })}\n        {...{\n          ...chipProps,\n          ...otherProps,\n        }}\n        data-spark-component=\"chip\"\n      >\n        {formattedChildren}\n      </ChipElement>\n    </ChipContext.Provider>\n  )\n}\n\nChip.displayName = 'Chip'\n","import { tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const chipClearButtonWrapperStyles = cva(\n  ['ml-md flex h-full items-center justify-center focus-visible:outline-hidden'],\n  {\n    variants: {\n      disabled: {\n        false: ['cursor-pointer'],\n        true: ['cursor-not-allowed'],\n      },\n      isBordered: {\n        false: ['pr-md'],\n        true: ['pr-[7px]'],\n      },\n      design: {\n        outlined: [],\n        tinted: [],\n        dashed: [],\n      },\n    },\n    compoundVariants: [\n      {\n        design: 'outlined',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'outlined',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n      {\n        design: 'tinted',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'tinted',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n      {\n        design: 'dashed',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'dashed',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n    ],\n  }\n)\n\nexport const chipClearButtonStyles = cva(\n  ['rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm', 'focus-visible:u-outline'],\n  {\n    variants: {\n      disabled: {\n        true: ['cursor-not-allowed'],\n        false: ['cursor-pointer'],\n      },\n    },\n    defaultVariants: {\n      disabled: false,\n    },\n  }\n)\n\nexport type ChipClearButtonStylesProps = VariantProps<typeof chipClearButtonWrapperStyles>\n","import { Close } from '@spark-ui/icons/Close'\nimport {\n  cloneElement,\n  ComponentPropsWithoutRef,\n  MouseEvent,\n  ReactElement,\n  Ref,\n  useCallback,\n} from 'react'\n\nimport { Icon } from '../icon'\nimport {\n  chipClearButtonStyles,\n  type ChipClearButtonStylesProps,\n  chipClearButtonWrapperStyles,\n} from './ChipClearButton.styles'\nimport { useChipContext } from './useChipContext'\n\nexport interface ChipClearButtonProps\n  extends ComponentPropsWithoutRef<'span'>, ChipClearButtonStylesProps {\n  label: string\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipClearButton = ({\n  children = (\n    <Icon>\n      <Close />\n    </Icon>\n  ),\n  tabIndex = 0,\n  label,\n  ref: forwardedRef,\n}: ChipClearButtonProps) => {\n  const { design, disabled, onClear } = useChipContext()\n\n  const onClearHandler = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation()\n      !disabled && onClear && onClear(event)\n    },\n    [disabled, onClear]\n  )\n\n  return (\n    <span\n      className={chipClearButtonWrapperStyles({\n        isBordered: ['outline', 'dashed'].includes(`${design}`),\n        disabled: !!disabled,\n        design,\n      })}\n      onClick={onClearHandler}\n      ref={forwardedRef}\n    >\n      <button\n        tabIndex={tabIndex}\n        type=\"button\"\n        disabled={!!disabled}\n        className={chipClearButtonStyles({ disabled })}\n        aria-label={label}\n      >\n        {children && cloneElement(children as ReactElement<HTMLElement>, { ariaLabel: label })}\n      </button>\n    </span>\n  )\n}\n\nChipClearButton.displayName = 'Chip.ClearButton'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipContentProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipContent = ({ children, className, ref: forwardedRef }: ChipContentProps) => {\n  return (\n    <span className={cx('inline-block grow truncate', className)} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nChipContent.displayName = 'Chip.Content'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipIconProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipIcon = ({ children, className, ref: forwardedRef }: ChipIconProps) => {\n  return (\n    <span className={cx('flex h-full items-center justify-center', className)} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nChipIcon.displayName = 'Chip.Icon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipLeadingIconProps = ChipIconProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipLeadingIcon = ({\n  className,\n  ref: forwardedRef,\n  ...props\n}: ChipLeadingIconProps) => (\n  <ChipIcon className={cx('mr-sm', className)} ref={forwardedRef} {...props} />\n)\n\nChipLeadingIcon.displayName = 'Chip.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipTrailingIconProps = ChipIconProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipTrailingIcon = ({\n  className,\n  ref: forwardedRef,\n  ...props\n}: ChipTrailingIconProps) => (\n  <ChipIcon className={cx('ml-md', className)} ref={forwardedRef} {...props} />\n)\n\nChipTrailingIcon.displayName = 'Chip.TrailingIcon'\n","import { Chip as Root } from './Chip'\nimport { ChipClearButton } from './ChipClearButton'\nimport { ChipContent } from './ChipContent'\nimport { ChipLeadingIcon } from './ChipLeadingIcon'\nimport { ChipTrailingIcon } from './ChipTrailingIcon'\n\nexport const Chip: typeof Root & {\n  Content: typeof ChipContent\n  LeadingIcon: typeof ChipLeadingIcon\n  TrailingIcon: typeof ChipTrailingIcon\n  ClearButton: typeof ChipClearButton\n} = Object.assign(Root, {\n  Content: ChipContent,\n  LeadingIcon: ChipLeadingIcon,\n  TrailingIcon: ChipTrailingIcon,\n  ClearButton: ChipClearButton,\n})\n\nChip.displayName = 'Chip'\nChip.ClearButton.displayName = 'Chip.ClearButton'\nChip.Content.displayName = 'Chip.Content'\nChip.LeadingIcon.displayName = 'Chip.LeadingIcon'\nChip.TrailingIcon.displayName = 'Chip.TrailingIcon'\n\nexport { type ChipClearButtonProps } from './ChipClearButton'\nexport { type ChipContentProps } from './ChipContent'\nexport { type ChipLeadingIconProps } from './ChipLeadingIcon'\nexport { type ChipTrailingIconProps } from './ChipTrailingIcon'\n"],"mappings":"sZAEA,IAAa,EAAmB,CAE9B,CACE,OAAQ,WACR,OAAQ,OACR,OAAA,EAAA,EAAA,IAAU,CACR,8BACA,+BACA,8BACA,wHACA,YACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,UACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,iIACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,gCACA,iCACA,gCACA,mCACA,8HACA,cACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,UACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,iIACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,QACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,+BACA,gCACA,+BACA,2HACA,aACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,+BACA,gCACA,+BACA,2HACA,aACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,OACR,OAAA,EAAA,EAAA,IAAU,CACR,8BACA,+BACA,8BACA,wHACA,YACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,UACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,iIACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,UACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,qGACA,eACD,CAAC,CACH,CAED,CACE,OAAQ,WACR,eAAgB,GAChB,OAAA,EAAA,EAAA,IAAU,CAAC,sDAAsD,CAAC,CACnE,CACD,CACE,OAAQ,WACR,eAAgB,GAChB,OAAA,EAAA,EAAA,IAAU,CAAC,sDAAsD,CAAC,CACnE,CACF,CCjHY,EAAiB,CAE5B,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,oBACA,0CACA,2CACA,0CACA,0FACA,yBACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,uBACA,6CACA,8CACA,6CACA,mGACA,4BACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,sBACA,4CACA,6CACA,4CACA,gGACA,2BACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,uBACA,6CACA,8CACA,6CACA,mGACA,4BACD,CAAC,CACH,CACD,CACE,OAAQ,QACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,qBACA,2CACA,4CACA,2CACA,6FACA,0BACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,qBACA,2CACA,4CACA,2CACA,6FACA,0BACD,CAAC,CACH,CACD,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,oBACA,0CACA,2CACA,0CACA,0FACA,yBACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,uBACA,6CACA,8CACA,6CACA,mGACA,4BACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,mBACA,yCACA,0CACA,yCACA,qGACA,wBACD,CAAC,CACH,CAED,CACE,OAAQ,SACR,eAAgB,GAChB,OAAA,EAAA,EAAA,IAAU,CAAC,QAAQ,CAAC,CACrB,CACD,CACE,OAAQ,SACR,eAAgB,GAChB,OAAA,EAAA,EAAA,IAAU,CAAC,QAAQ,CAAC,CACrB,CACF,CCzHY,EAAiB,CAE5B,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,8BACA,+BACA,8BACA,wHACA,YACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,iIACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,gCACA,iCACA,gCACA,8HACA,cACD,CAAC,CACH,CACD,CA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"}

package/dist/chip/index.mjs

@@ -349,7 +349,7 @@ var v = [
 		class: m(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])
 	}
 ], x = n([
-	"box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-full text-body-1 font-regular",
+	"box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-md text-body-1 font-regular",
 	"focus-visible:u-outline",
 	"ease-out duration-150"
 ], {

package/dist/chip/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/chip/variants/outlined.ts","../../src/chip/variants/tinted.ts","../../src/chip/variants/dashed.ts","../../src/chip/Chip.styles.tsx","../../src/chip/useChipContext.tsx","../../src/chip/useChipElement.tsx","../../src/chip/Chip.tsx","../../src/chip/ChipClearButton.styles.tsx","../../src/chip/ChipClearButton.tsx","../../src/chip/ChipContent.tsx","../../src/chip/ChipIcon.tsx","../../src/chip/ChipLeadingIcon.tsx","../../src/chip/ChipTrailingIcon.tsx","../../src/chip/index.ts"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n  /** Intents **/\n  {\n    design: 'outlined',\n    intent: 'main',\n    class: tw([\n      'enabled:hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n      'text-main',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'support',\n    class: tw([\n      'enabled:hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw([\n      'enabled:hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'aria-pressed:bg-accent-container',\n      'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n      'text-accent',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'success',\n    class: tw([\n      'enabled:hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw([\n      'enabled:hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n      'text-alert',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'danger',\n    class: tw([\n      'enabled:hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n      'text-error',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'info',\n    class: tw([\n      'enabled:hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n      'text-info',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'neutral',\n    class: tw([\n      'enabled:hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n      'text-neutral',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'surface',\n    class: tw([\n      'enabled:hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-surface',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'outlined',\n    hasClearButton: false,\n    class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n  {\n    design: 'outlined',\n    hasClearButton: true,\n    class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n  /** Intents **/\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw([\n      'bg-main-container',\n      'enabled:hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n      'aria-pressed:bg-main aria-pressed:text-on-main aria-pressed:enabled:hover:bg-main/dim-1',\n      'text-on-main-container',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw([\n      'bg-support-container',\n      'enabled:hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n      'aria-pressed:bg-support aria-pressed:text-on-support aria-pressed:enabled:hover:bg-support/dim-1',\n      'text-on-support-container',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw([\n      'bg-accent-container',\n      'enabled:hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n      'aria-pressed:bg-accent aria-pressed:text-on-accent aria-pressed:enabled:hover:bg-accent/dim-1',\n      'text-on-accent-container',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw([\n      'bg-success-container',\n      'enabled:hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n      'aria-pressed:bg-success aria-pressed:text-on-success aria-pressed:enabled:hover:bg-success/dim-1',\n      'text-on-success-container',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw([\n      'bg-alert-container',\n      'enabled:hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n      'aria-pressed:bg-alert aria-pressed:text-on-alert aria-pressed:enabled:hover:bg-alert/dim-1',\n      'text-on-alert-container',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw([\n      'bg-error-container',\n      'enabled:hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n      'aria-pressed:bg-error aria-pressed:text-on-error aria-pressed:enabled:hover:bg-error/dim-1',\n      'text-on-error-container',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw([\n      'bg-info-container',\n      'enabled:hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n      'aria-pressed:bg-info aria-pressed:text-on-info aria-pressed:enabled:hover:bg-info/dim-1',\n      'text-on-info-container',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw([\n      'bg-neutral-container',\n      'enabled:hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n      'aria-pressed:bg-neutral aria-pressed:text-on-neutral aria-pressed:enabled:hover:bg-neutral/dim-1',\n      'text-on-neutral-container',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'tinted',\n    class: tw([\n      'bg-surface/dim-1',\n      'enabled:hover:bg-surface-hovered/dim-1',\n      'enabled:active:bg-surface-hovered/dim-1',\n      'focus-visible:bg-surface-hovered/dim-1',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-on-surface/dim-1',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'tinted',\n    hasClearButton: false,\n    class: tw(['px-md']),\n  },\n  {\n    design: 'tinted',\n    hasClearButton: true,\n    class: tw(['pl-md']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const dashedVariants = [\n  /** Intents **/\n  {\n    intent: 'main',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n      'text-main',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n      'text-accent',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n      'text-alert',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n      'text-error',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n      'text-info',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n      'text-neutral',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-surface',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'dashed',\n    hasClearButton: false,\n    class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n  {\n    design: 'dashed',\n    hasClearButton: true,\n    class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { dashedVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const chipStyles = cva(\n  [\n    'box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-full text-body-1 font-regular',\n    'focus-visible:u-outline',\n    'ease-out duration-150',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the chip.\n       *\n       * - `filled`: Chip will be plain.\n       *\n       * - `outlined`: Chip will be transparent with an outline.\n       *\n       * - `tinted`: Chip will be filled but using a lighter color scheme.\n       *\n       * - `dashed`: Chip will be transparent with an outline dashed.\n       */\n      design: makeVariants<'design', ['outlined', 'tinted', 'dashed']>({\n        outlined: ['bg-transparent border-sm border-solid border-current'],\n        tinted: [''],\n        dashed: [\n          'bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high',\n        ],\n      }),\n      /**\n       * Color scheme of the chip.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n      /**\n       * Disable the chip, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed', 'opacity-dim-3'],\n      },\n      hasClearButton: {\n        true: [],\n        false: [],\n      },\n      // 'pl-[calc(var(--spacing-md)-(var(--border-width-sm)))]'\n    },\n    compoundVariants: [...outlinedVariants, ...tintedVariants, ...dashedVariants],\n    defaultVariants: {\n      design: 'outlined',\n      intent: 'support',\n    },\n  }\n)\n\nexport type ChipStylesProps = VariantProps<typeof chipStyles>\n","import { createContext, useContext } from 'react'\n\nimport { type ChipProps } from './Chip'\n\nexport type ChipsContextType = Pick<ChipProps, 'disabled' | 'design' | 'intent' | 'onClear'>\n\nexport const ChipContext = createContext<ChipsContextType>({} as ChipsContextType)\nexport const useChipContext = () => useContext(ChipContext) || {}\n","import { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { emulateTab } from 'emulate-tab'\nimport {\n  Children,\n  ElementType,\n  FC,\n  ForwardRefExoticComponent,\n  HTMLAttributes,\n  isValidElement,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  RefAttributes,\n} from 'react'\n\nimport { Slot } from '../slot'\n\ninterface ReturnedValue {\n  Element:\n    | ForwardRefExoticComponent<\n        HTMLAttributes<HTMLElement> & {\n          children?: ReactNode\n        } & RefAttributes<HTMLElement>\n      >\n    | ElementType\n  chipProps:\n    | {\n        type: 'button'\n        'aria-pressed'?: boolean\n        'data-state'?: 'on' | 'off'\n        onClick: (event: MouseEvent<HTMLButtonElement>) => void\n        onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n        disabled?: boolean\n        children: ReactNode\n      }\n    | {\n        'aria-disabled'?: boolean\n        children: ReactNode\n        onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n      }\n  compoundElements: {\n    leadingIcon: ReactNode\n    trailingIcon: ReactNode\n    content: ReactNode\n    clearButton: ReactNode\n  }\n}\n\nconst getDisplayName = (element?: ReactElement) => {\n  return element ? (element.type as FC).displayName : ''\n}\n\nconst findElement =\n  (children: ReactNode) =>\n  (...values: string[]) => {\n    const validChildren = Children.toArray(children).filter(isValidElement)\n\n    return validChildren.find(child => {\n      const displayName = getDisplayName(child)\n\n      return values.includes(displayName || '')\n    })\n  }\n\nexport const useChipElement = ({\n  onClick,\n  asChild,\n  pressed,\n  defaultPressed,\n  disabled,\n  value,\n  defaultValue,\n  children,\n  onClear,\n}: {\n  onClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    args: { pressed: boolean; value?: string | number | readonly string[] }\n  ) => void\n  onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n  asChild?: boolean\n  pressed?: boolean\n  defaultPressed?: boolean\n  value?: string | number | readonly string[]\n  defaultValue?: string | number | readonly string[]\n  disabled?: boolean\n  children?: ReactNode\n  onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n}): ReturnedValue => {\n  const [isPressed, setIsPressed] = useCombinedState<boolean | undefined>(pressed, defaultPressed)\n  const [innerValue] = useCombinedState<string | number | readonly string[] | undefined>(\n    value,\n    defaultValue\n  )\n\n  const findChipElement = findElement(children)\n\n  const leadingIcon = findChipElement('Chip.LeadingIcon')\n  const trailingIcon = findChipElement('Chip.TrailingIcon')\n  const content = findChipElement('Chip.Content')\n  const clearButton = findChipElement('Chip.ClearButton')\n\n  const isButton = (onClick || isPressed) !== undefined\n\n  const formattedChildren = [leadingIcon, content, clearButton].every(\n    element => element === undefined\n  ) ? (\n    <span className=\"inline-block grow truncate\">{children}</span>\n  ) : (\n    <>\n      {leadingIcon}\n      {content}\n      {leadingIcon === undefined ? trailingIcon : null}\n      {clearButton}\n    </>\n  )\n\n  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>): void => {\n    if (!!clearButton && !disabled && ['Delete', 'Backspace'].includes(event.key)) {\n      if (onClear) {\n        onClear()\n        event.key === 'Delete' && emulateTab()\n        event.key === 'Backspace' && emulateTab.backwards()\n      }\n    }\n  }\n\n  if (isButton) {\n    return {\n      Element: asChild ? Slot : 'button',\n      chipProps: {\n        type: 'button',\n        ...(isPressed !== undefined && {\n          'aria-pressed': isPressed,\n          'data-state': isPressed ? 'on' : 'off',\n        }),\n        onClick: (event: MouseEvent<HTMLButtonElement>): void => {\n          isPressed !== undefined && setIsPressed(!isPressed)\n          onClick && onClick(event, { pressed: isPressed as boolean, value: innerValue })\n        },\n        onKeyDown,\n        disabled,\n        children: formattedChildren,\n      },\n      compoundElements: {\n        leadingIcon,\n        trailingIcon,\n        content,\n        clearButton,\n      },\n    }\n  }\n\n  return {\n    Element: asChild ? Slot : 'div',\n    chipProps: {\n      'aria-disabled': disabled,\n      children: formattedChildren,\n      onKeyDown,\n    },\n    compoundElements: {\n      leadingIcon,\n      trailingIcon,\n      content,\n      clearButton,\n    },\n  }\n}\n","import { ComponentPropsWithoutRef, MouseEvent, Ref } from 'react'\n\nimport { chipStyles, type ChipStylesProps } from './Chip.styles'\nimport { ChipContext } from './useChipContext'\nimport { useChipElement } from './useChipElement'\n\ntype ChipPrimitiveProps = Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'disabled' | 'type'>\n\nexport interface ChipProps extends ChipPrimitiveProps, Omit<ChipStylesProps, 'hasClearButton'> {\n  /**\n   * Configures a toggleButton aria-pressed initial value\n   */\n  defaultPressed?: boolean\n  /**\n   * Configures a toggleButton aria-pressed value\n   */\n  pressed?: boolean\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Event handler fired each clicking event\n   */\n  onClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    args: { pressed: boolean; value?: number | string | readonly string[] }\n  ) => void\n  /**\n   * Clear chip handler\n   */\n  onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n  ref?: Ref<HTMLButtonElement | HTMLDivElement>\n}\n\nexport const Chip = ({\n  design = 'outlined',\n  disabled,\n  children,\n  intent = 'support',\n  defaultPressed,\n  pressed,\n  asChild,\n  className,\n  onClick,\n  onClear,\n  ref: forwardedRef,\n  ...otherProps\n}: ChipProps) => {\n  const {\n    Element: ChipElement,\n    chipProps: { children: formattedChildren, ...chipProps },\n    compoundElements,\n  } = useChipElement({\n    asChild,\n    pressed,\n    defaultPressed,\n    onClick,\n    disabled: !!disabled,\n    value: otherProps.value,\n    defaultValue: otherProps.defaultValue,\n    children,\n    onClear,\n  })\n\n  const { clearButton } = compoundElements\n\n  return (\n    <ChipContext.Provider value={{ disabled, design, intent, onClear }}>\n      <ChipElement\n        ref={forwardedRef}\n        className={chipStyles({\n          className,\n          design,\n          disabled,\n          intent,\n          hasClearButton: !!clearButton,\n        })}\n        {...{\n          ...chipProps,\n          ...otherProps,\n        }}\n        data-spark-component=\"chip\"\n      >\n        {formattedChildren}\n      </ChipElement>\n    </ChipContext.Provider>\n  )\n}\n\nChip.displayName = 'Chip'\n","import { tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const chipClearButtonWrapperStyles = cva(\n  ['ml-md flex h-full items-center justify-center focus-visible:outline-hidden'],\n  {\n    variants: {\n      disabled: {\n        false: ['cursor-pointer'],\n        true: ['cursor-not-allowed'],\n      },\n      isBordered: {\n        false: ['pr-md'],\n        true: ['pr-[7px]'],\n      },\n      design: {\n        outlined: [],\n        tinted: [],\n        dashed: [],\n      },\n    },\n    compoundVariants: [\n      {\n        design: 'outlined',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'outlined',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n      {\n        design: 'tinted',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'tinted',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n      {\n        design: 'dashed',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'dashed',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n    ],\n  }\n)\n\nexport const chipClearButtonStyles = cva(\n  ['rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm', 'focus-visible:u-outline'],\n  {\n    variants: {\n      disabled: {\n        true: ['cursor-not-allowed'],\n        false: ['cursor-pointer'],\n      },\n    },\n    defaultVariants: {\n      disabled: false,\n    },\n  }\n)\n\nexport type ChipClearButtonStylesProps = VariantProps<typeof chipClearButtonWrapperStyles>\n","import { Close } from '@spark-ui/icons/Close'\nimport {\n  cloneElement,\n  ComponentPropsWithoutRef,\n  MouseEvent,\n  ReactElement,\n  Ref,\n  useCallback,\n} from 'react'\n\nimport { Icon } from '../icon'\nimport {\n  chipClearButtonStyles,\n  type ChipClearButtonStylesProps,\n  chipClearButtonWrapperStyles,\n} from './ChipClearButton.styles'\nimport { useChipContext } from './useChipContext'\n\nexport interface ChipClearButtonProps\n  extends ComponentPropsWithoutRef<'span'>, ChipClearButtonStylesProps {\n  label: string\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipClearButton = ({\n  children = (\n    <Icon>\n      <Close />\n    </Icon>\n  ),\n  tabIndex = 0,\n  label,\n  ref: forwardedRef,\n}: ChipClearButtonProps) => {\n  const { design, disabled, onClear } = useChipContext()\n\n  const onClearHandler = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation()\n      !disabled && onClear && onClear(event)\n    },\n    [disabled, onClear]\n  )\n\n  return (\n    <span\n      className={chipClearButtonWrapperStyles({\n        isBordered: ['outline', 'dashed'].includes(`${design}`),\n        disabled: !!disabled,\n        design,\n      })}\n      onClick={onClearHandler}\n      ref={forwardedRef}\n    >\n      <button\n        tabIndex={tabIndex}\n        type=\"button\"\n        disabled={!!disabled}\n        className={chipClearButtonStyles({ disabled })}\n        aria-label={label}\n      >\n        {children && cloneElement(children as ReactElement<HTMLElement>, { ariaLabel: label })}\n      </button>\n    </span>\n  )\n}\n\nChipClearButton.displayName = 'Chip.ClearButton'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipContentProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipContent = ({ children, className, ref: forwardedRef }: ChipContentProps) => {\n  return (\n    <span className={cx('inline-block grow truncate', className)} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nChipContent.displayName = 'Chip.Content'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipIconProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipIcon = ({ children, className, ref: forwardedRef }: ChipIconProps) => {\n  return (\n    <span className={cx('flex h-full items-center justify-center', className)} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nChipIcon.displayName = 'Chip.Icon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipLeadingIconProps = ChipIconProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipLeadingIcon = ({\n  className,\n  ref: forwardedRef,\n  ...props\n}: ChipLeadingIconProps) => (\n  <ChipIcon className={cx('mr-sm', className)} ref={forwardedRef} {...props} />\n)\n\nChipLeadingIcon.displayName = 'Chip.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipTrailingIconProps = ChipIconProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipTrailingIcon = ({\n  className,\n  ref: forwardedRef,\n  ...props\n}: ChipTrailingIconProps) => (\n  <ChipIcon className={cx('ml-md', className)} ref={forwardedRef} {...props} />\n)\n\nChipTrailingIcon.displayName = 'Chip.TrailingIcon'\n","import { Chip as Root } from './Chip'\nimport { ChipClearButton } from './ChipClearButton'\nimport { ChipContent } from './ChipContent'\nimport { ChipLeadingIcon } from './ChipLeadingIcon'\nimport { ChipTrailingIcon } from './ChipTrailingIcon'\n\nexport const Chip: typeof Root & {\n  Content: typeof ChipContent\n  LeadingIcon: typeof ChipLeadingIcon\n  TrailingIcon: typeof ChipTrailingIcon\n  ClearButton: typeof ChipClearButton\n} = Object.assign(Root, {\n  Content: ChipContent,\n  LeadingIcon: ChipLeadingIcon,\n  TrailingIcon: ChipTrailingIcon,\n  ClearButton: ChipClearButton,\n})\n\nChip.displayName = 'Chip'\nChip.ClearButton.displayName = 'Chip.ClearButton'\nChip.Content.displayName = 'Chip.Content'\nChip.LeadingIcon.displayName = 'Chip.LeadingIcon'\nChip.TrailingIcon.displayName = 'Chip.TrailingIcon'\n\nexport { type ChipClearButtonProps } from './ChipClearButton'\nexport { type ChipContentProps } from './ChipContent'\nexport { type ChipLeadingIconProps } from './ChipLeadingIcon'\nexport { type ChipTrailingIconProps } from './ChipTrailingIcon'\n"],"mappings":";;;;;;;;;;AAEA,IAAa,IAAmB;CAE9B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,gBAAgB;EAChB,OAAO,EAAG,CAAC,sDAAsD,CAAC;EACnE;CACD;EACE,QAAQ;EACR,gBAAgB;EAChB,OAAO,EAAG,CAAC,sDAAsD,CAAC;EACnE;CACF,ECjHY,IAAiB;CAE5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,gBAAgB;EAChB,OAAO,EAAG,CAAC,QAAQ,CAAC;EACrB;CACD;EACE,QAAQ;EACR,gBAAgB;EAChB,OAAO,EAAG,CAAC,QAAQ,CAAC;EACrB;CACF,ECzHY,IAAiB;CAE5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EA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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/chip/variants/outlined.ts","../../src/chip/variants/tinted.ts","../../src/chip/variants/dashed.ts","../../src/chip/Chip.styles.tsx","../../src/chip/useChipContext.tsx","../../src/chip/useChipElement.tsx","../../src/chip/Chip.tsx","../../src/chip/ChipClearButton.styles.tsx","../../src/chip/ChipClearButton.tsx","../../src/chip/ChipContent.tsx","../../src/chip/ChipIcon.tsx","../../src/chip/ChipLeadingIcon.tsx","../../src/chip/ChipTrailingIcon.tsx","../../src/chip/index.ts"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n  /** Intents **/\n  {\n    design: 'outlined',\n    intent: 'main',\n    class: tw([\n      'enabled:hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n      'text-main',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'support',\n    class: tw([\n      'enabled:hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw([\n      'enabled:hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'aria-pressed:bg-accent-container',\n      'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n      'text-accent',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'success',\n    class: tw([\n      'enabled:hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw([\n      'enabled:hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n      'text-alert',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'danger',\n    class: tw([\n      'enabled:hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n      'text-error',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'info',\n    class: tw([\n      'enabled:hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n      'text-info',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'neutral',\n    class: tw([\n      'enabled:hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n      'text-neutral',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'surface',\n    class: tw([\n      'enabled:hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-surface',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'outlined',\n    hasClearButton: false,\n    class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n  {\n    design: 'outlined',\n    hasClearButton: true,\n    class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n  /** Intents **/\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw([\n      'bg-main-container',\n      'enabled:hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n      'aria-pressed:bg-main aria-pressed:text-on-main aria-pressed:enabled:hover:bg-main/dim-1',\n      'text-on-main-container',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw([\n      'bg-support-container',\n      'enabled:hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n      'aria-pressed:bg-support aria-pressed:text-on-support aria-pressed:enabled:hover:bg-support/dim-1',\n      'text-on-support-container',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw([\n      'bg-accent-container',\n      'enabled:hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n      'aria-pressed:bg-accent aria-pressed:text-on-accent aria-pressed:enabled:hover:bg-accent/dim-1',\n      'text-on-accent-container',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw([\n      'bg-success-container',\n      'enabled:hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n      'aria-pressed:bg-success aria-pressed:text-on-success aria-pressed:enabled:hover:bg-success/dim-1',\n      'text-on-success-container',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw([\n      'bg-alert-container',\n      'enabled:hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n      'aria-pressed:bg-alert aria-pressed:text-on-alert aria-pressed:enabled:hover:bg-alert/dim-1',\n      'text-on-alert-container',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw([\n      'bg-error-container',\n      'enabled:hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n      'aria-pressed:bg-error aria-pressed:text-on-error aria-pressed:enabled:hover:bg-error/dim-1',\n      'text-on-error-container',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw([\n      'bg-info-container',\n      'enabled:hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n      'aria-pressed:bg-info aria-pressed:text-on-info aria-pressed:enabled:hover:bg-info/dim-1',\n      'text-on-info-container',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw([\n      'bg-neutral-container',\n      'enabled:hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n      'aria-pressed:bg-neutral aria-pressed:text-on-neutral aria-pressed:enabled:hover:bg-neutral/dim-1',\n      'text-on-neutral-container',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'tinted',\n    class: tw([\n      'bg-surface/dim-1',\n      'enabled:hover:bg-surface-hovered/dim-1',\n      'enabled:active:bg-surface-hovered/dim-1',\n      'focus-visible:bg-surface-hovered/dim-1',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-on-surface/dim-1',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'tinted',\n    hasClearButton: false,\n    class: tw(['px-md']),\n  },\n  {\n    design: 'tinted',\n    hasClearButton: true,\n    class: tw(['pl-md']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const dashedVariants = [\n  /** Intents **/\n  {\n    intent: 'main',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n      'text-main',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n      'text-accent',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n      'text-alert',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n      'text-error',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n      'text-info',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n      'text-neutral',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-surface',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'dashed',\n    hasClearButton: false,\n    class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n  {\n    design: 'dashed',\n    hasClearButton: true,\n    class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { dashedVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const chipStyles = cva(\n  [\n    'box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-md text-body-1 font-regular',\n    'focus-visible:u-outline',\n    'ease-out duration-150',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the chip.\n       *\n       * - `filled`: Chip will be plain.\n       *\n       * - `outlined`: Chip will be transparent with an outline.\n       *\n       * - `tinted`: Chip will be filled but using a lighter color scheme.\n       *\n       * - `dashed`: Chip will be transparent with an outline dashed.\n       */\n      design: makeVariants<'design', ['outlined', 'tinted', 'dashed']>({\n        outlined: ['bg-transparent border-sm border-solid border-current'],\n        tinted: [''],\n        dashed: [\n          'bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high',\n        ],\n      }),\n      /**\n       * Color scheme of the chip.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n      /**\n       * Disable the chip, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed', 'opacity-dim-3'],\n      },\n      hasClearButton: {\n        true: [],\n        false: [],\n      },\n      // 'pl-[calc(var(--spacing-md)-(var(--border-width-sm)))]'\n    },\n    compoundVariants: [...outlinedVariants, ...tintedVariants, ...dashedVariants],\n    defaultVariants: {\n      design: 'outlined',\n      intent: 'support',\n    },\n  }\n)\n\nexport type ChipStylesProps = VariantProps<typeof chipStyles>\n","import { createContext, useContext } from 'react'\n\nimport { type ChipProps } from './Chip'\n\nexport type ChipsContextType = Pick<ChipProps, 'disabled' | 'design' | 'intent' | 'onClear'>\n\nexport const ChipContext = createContext<ChipsContextType>({} as ChipsContextType)\nexport const useChipContext = () => useContext(ChipContext) || {}\n","import { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { emulateTab } from 'emulate-tab'\nimport {\n  Children,\n  ElementType,\n  FC,\n  ForwardRefExoticComponent,\n  HTMLAttributes,\n  isValidElement,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  RefAttributes,\n} from 'react'\n\nimport { Slot } from '../slot'\n\ninterface ReturnedValue {\n  Element:\n    | ForwardRefExoticComponent<\n        HTMLAttributes<HTMLElement> & {\n          children?: ReactNode\n        } & RefAttributes<HTMLElement>\n      >\n    | ElementType\n  chipProps:\n    | {\n        type: 'button'\n        'aria-pressed'?: boolean\n        'data-state'?: 'on' | 'off'\n        onClick: (event: MouseEvent<HTMLButtonElement>) => void\n        onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n        disabled?: boolean\n        children: ReactNode\n      }\n    | {\n        'aria-disabled'?: boolean\n        children: ReactNode\n        onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n      }\n  compoundElements: {\n    leadingIcon: ReactNode\n    trailingIcon: ReactNode\n    content: ReactNode\n    clearButton: ReactNode\n  }\n}\n\nconst getDisplayName = (element?: ReactElement) => {\n  return element ? (element.type as FC).displayName : ''\n}\n\nconst findElement =\n  (children: ReactNode) =>\n  (...values: string[]) => {\n    const validChildren = Children.toArray(children).filter(isValidElement)\n\n    return validChildren.find(child => {\n      const displayName = getDisplayName(child)\n\n      return values.includes(displayName || '')\n    })\n  }\n\nexport const useChipElement = ({\n  onClick,\n  asChild,\n  pressed,\n  defaultPressed,\n  disabled,\n  value,\n  defaultValue,\n  children,\n  onClear,\n}: {\n  onClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    args: { pressed: boolean; value?: string | number | readonly string[] }\n  ) => void\n  onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n  asChild?: boolean\n  pressed?: boolean\n  defaultPressed?: boolean\n  value?: string | number | readonly string[]\n  defaultValue?: string | number | readonly string[]\n  disabled?: boolean\n  children?: ReactNode\n  onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n}): ReturnedValue => {\n  const [isPressed, setIsPressed] = useCombinedState<boolean | undefined>(pressed, defaultPressed)\n  const [innerValue] = useCombinedState<string | number | readonly string[] | undefined>(\n    value,\n    defaultValue\n  )\n\n  const findChipElement = findElement(children)\n\n  const leadingIcon = findChipElement('Chip.LeadingIcon')\n  const trailingIcon = findChipElement('Chip.TrailingIcon')\n  const content = findChipElement('Chip.Content')\n  const clearButton = findChipElement('Chip.ClearButton')\n\n  const isButton = (onClick || isPressed) !== undefined\n\n  const formattedChildren = [leadingIcon, content, clearButton].every(\n    element => element === undefined\n  ) ? (\n    <span className=\"inline-block grow truncate\">{children}</span>\n  ) : (\n    <>\n      {leadingIcon}\n      {content}\n      {leadingIcon === undefined ? trailingIcon : null}\n      {clearButton}\n    </>\n  )\n\n  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>): void => {\n    if (!!clearButton && !disabled && ['Delete', 'Backspace'].includes(event.key)) {\n      if (onClear) {\n        onClear()\n        event.key === 'Delete' && emulateTab()\n        event.key === 'Backspace' && emulateTab.backwards()\n      }\n    }\n  }\n\n  if (isButton) {\n    return {\n      Element: asChild ? Slot : 'button',\n      chipProps: {\n        type: 'button',\n        ...(isPressed !== undefined && {\n          'aria-pressed': isPressed,\n          'data-state': isPressed ? 'on' : 'off',\n        }),\n        onClick: (event: MouseEvent<HTMLButtonElement>): void => {\n          isPressed !== undefined && setIsPressed(!isPressed)\n          onClick && onClick(event, { pressed: isPressed as boolean, value: innerValue })\n        },\n        onKeyDown,\n        disabled,\n        children: formattedChildren,\n      },\n      compoundElements: {\n        leadingIcon,\n        trailingIcon,\n        content,\n        clearButton,\n      },\n    }\n  }\n\n  return {\n    Element: asChild ? Slot : 'div',\n    chipProps: {\n      'aria-disabled': disabled,\n      children: formattedChildren,\n      onKeyDown,\n    },\n    compoundElements: {\n      leadingIcon,\n      trailingIcon,\n      content,\n      clearButton,\n    },\n  }\n}\n","import { ComponentPropsWithoutRef, MouseEvent, Ref } from 'react'\n\nimport { chipStyles, type ChipStylesProps } from './Chip.styles'\nimport { ChipContext } from './useChipContext'\nimport { useChipElement } from './useChipElement'\n\ntype ChipPrimitiveProps = Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'disabled' | 'type'>\n\nexport interface ChipProps extends ChipPrimitiveProps, Omit<ChipStylesProps, 'hasClearButton'> {\n  /**\n   * Configures a toggleButton aria-pressed initial value\n   */\n  defaultPressed?: boolean\n  /**\n   * Configures a toggleButton aria-pressed value\n   */\n  pressed?: boolean\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Event handler fired each clicking event\n   */\n  onClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    args: { pressed: boolean; value?: number | string | readonly string[] }\n  ) => void\n  /**\n   * Clear chip handler\n   */\n  onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n  ref?: Ref<HTMLButtonElement | HTMLDivElement>\n}\n\nexport const Chip = ({\n  design = 'outlined',\n  disabled,\n  children,\n  intent = 'support',\n  defaultPressed,\n  pressed,\n  asChild,\n  className,\n  onClick,\n  onClear,\n  ref: forwardedRef,\n  ...otherProps\n}: ChipProps) => {\n  const {\n    Element: ChipElement,\n    chipProps: { children: formattedChildren, ...chipProps },\n    compoundElements,\n  } = useChipElement({\n    asChild,\n    pressed,\n    defaultPressed,\n    onClick,\n    disabled: !!disabled,\n    value: otherProps.value,\n    defaultValue: otherProps.defaultValue,\n    children,\n    onClear,\n  })\n\n  const { clearButton } = compoundElements\n\n  return (\n    <ChipContext.Provider value={{ disabled, design, intent, onClear }}>\n      <ChipElement\n        ref={forwardedRef}\n        className={chipStyles({\n          className,\n          design,\n          disabled,\n          intent,\n          hasClearButton: !!clearButton,\n        })}\n        {...{\n          ...chipProps,\n          ...otherProps,\n        }}\n        data-spark-component=\"chip\"\n      >\n        {formattedChildren}\n      </ChipElement>\n    </ChipContext.Provider>\n  )\n}\n\nChip.displayName = 'Chip'\n","import { tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const chipClearButtonWrapperStyles = cva(\n  ['ml-md flex h-full items-center justify-center focus-visible:outline-hidden'],\n  {\n    variants: {\n      disabled: {\n        false: ['cursor-pointer'],\n        true: ['cursor-not-allowed'],\n      },\n      isBordered: {\n        false: ['pr-md'],\n        true: ['pr-[7px]'],\n      },\n      design: {\n        outlined: [],\n        tinted: [],\n        dashed: [],\n      },\n    },\n    compoundVariants: [\n      {\n        design: 'outlined',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'outlined',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n      {\n        design: 'tinted',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'tinted',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n      {\n        design: 'dashed',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'dashed',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n    ],\n  }\n)\n\nexport const chipClearButtonStyles = cva(\n  ['rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm', 'focus-visible:u-outline'],\n  {\n    variants: {\n      disabled: {\n        true: ['cursor-not-allowed'],\n        false: ['cursor-pointer'],\n      },\n    },\n    defaultVariants: {\n      disabled: false,\n    },\n  }\n)\n\nexport type ChipClearButtonStylesProps = VariantProps<typeof chipClearButtonWrapperStyles>\n","import { Close } from '@spark-ui/icons/Close'\nimport {\n  cloneElement,\n  ComponentPropsWithoutRef,\n  MouseEvent,\n  ReactElement,\n  Ref,\n  useCallback,\n} from 'react'\n\nimport { Icon } from '../icon'\nimport {\n  chipClearButtonStyles,\n  type ChipClearButtonStylesProps,\n  chipClearButtonWrapperStyles,\n} from './ChipClearButton.styles'\nimport { useChipContext } from './useChipContext'\n\nexport interface ChipClearButtonProps\n  extends ComponentPropsWithoutRef<'span'>, ChipClearButtonStylesProps {\n  label: string\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipClearButton = ({\n  children = (\n    <Icon>\n      <Close />\n    </Icon>\n  ),\n  tabIndex = 0,\n  label,\n  ref: forwardedRef,\n}: ChipClearButtonProps) => {\n  const { design, disabled, onClear } = useChipContext()\n\n  const onClearHandler = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation()\n      !disabled && onClear && onClear(event)\n    },\n    [disabled, onClear]\n  )\n\n  return (\n    <span\n      className={chipClearButtonWrapperStyles({\n        isBordered: ['outline', 'dashed'].includes(`${design}`),\n        disabled: !!disabled,\n        design,\n      })}\n      onClick={onClearHandler}\n      ref={forwardedRef}\n    >\n      <button\n        tabIndex={tabIndex}\n        type=\"button\"\n        disabled={!!disabled}\n        className={chipClearButtonStyles({ disabled })}\n        aria-label={label}\n      >\n        {children && cloneElement(children as ReactElement<HTMLElement>, { ariaLabel: label })}\n      </button>\n    </span>\n  )\n}\n\nChipClearButton.displayName = 'Chip.ClearButton'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipContentProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipContent = ({ children, className, ref: forwardedRef }: ChipContentProps) => {\n  return (\n    <span className={cx('inline-block grow truncate', className)} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nChipContent.displayName = 'Chip.Content'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipIconProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipIcon = ({ children, className, ref: forwardedRef }: ChipIconProps) => {\n  return (\n    <span className={cx('flex h-full items-center justify-center', className)} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nChipIcon.displayName = 'Chip.Icon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipLeadingIconProps = ChipIconProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipLeadingIcon = ({\n  className,\n  ref: forwardedRef,\n  ...props\n}: ChipLeadingIconProps) => (\n  <ChipIcon className={cx('mr-sm', className)} ref={forwardedRef} {...props} />\n)\n\nChipLeadingIcon.displayName = 'Chip.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipTrailingIconProps = ChipIconProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipTrailingIcon = ({\n  className,\n  ref: forwardedRef,\n  ...props\n}: ChipTrailingIconProps) => (\n  <ChipIcon className={cx('ml-md', className)} ref={forwardedRef} {...props} />\n)\n\nChipTrailingIcon.displayName = 'Chip.TrailingIcon'\n","import { Chip as Root } from './Chip'\nimport { ChipClearButton } from './ChipClearButton'\nimport { ChipContent } from './ChipContent'\nimport { ChipLeadingIcon } from './ChipLeadingIcon'\nimport { ChipTrailingIcon } from './ChipTrailingIcon'\n\nexport const Chip: typeof Root & {\n  Content: typeof ChipContent\n  LeadingIcon: typeof ChipLeadingIcon\n  TrailingIcon: typeof ChipTrailingIcon\n  ClearButton: typeof ChipClearButton\n} = Object.assign(Root, {\n  Content: ChipContent,\n  LeadingIcon: ChipLeadingIcon,\n  TrailingIcon: ChipTrailingIcon,\n  ClearButton: ChipClearButton,\n})\n\nChip.displayName = 'Chip'\nChip.ClearButton.displayName = 'Chip.ClearButton'\nChip.Content.displayName = 'Chip.Content'\nChip.LeadingIcon.displayName = 'Chip.LeadingIcon'\nChip.TrailingIcon.displayName = 'Chip.TrailingIcon'\n\nexport { type ChipClearButtonProps } from './ChipClearButton'\nexport { type ChipContentProps } from './ChipContent'\nexport { type ChipLeadingIconProps } from './ChipLeadingIcon'\nexport { type ChipTrailingIconProps } from './ChipTrailingIcon'\n"],"mappings":";;;;;;;;;;AAEA,IAAa,IAAmB;CAE9B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,gBAAgB;EAChB,OAAO,EAAG,CAAC,sDAAsD,CAAC;EACnE;CACD;EACE,QAAQ;EACR,gBAAgB;EAChB,OAAO,EAAG,CAAC,sDAAsD,CAAC;EACnE;CACF,ECjHY,IAAiB;CAE5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,gBAAgB;EAChB,OAAO,EAAG,CAAC,QAAQ,CAAC;EACrB;CACD;EACE,QAAQ;EACR,gBAAgB;EAChB,OAAO,EAAG,CAAC,QAAQ,CAAC;EACrB;CACF,ECzHY,IAAiB;CAE5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EA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"}

package/dist/combobox/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../visually-hidden/index.js`),t=require(`../icon-CRPcdgYp.js`),n=require(`../spinner-DFUoYvmm.js`),r=require(`../icon-button-D1Lg6gvI.js`),i=require(`../popover-DeJQ91qR.js`);let a=require(`class-variance-authority`),o=require(`react`),s=require(`react/jsx-runtime`),c=require(`@spark-ui/icons/ArrowHorizontalDown`),l=require(`@spark-ui/hooks/use-merge-refs`),u=require(`@spark-ui/components/form-field`),d=require(`@spark-ui/icons/Check`),f=require(`@spark-ui/hooks/use-combined-state`),p=require(`downshift`),m=require(`@spark-ui/icons/DeleteOutline`);function h(e,t){let n=0;for(let[r]of e.entries()){if(r===t)return n;n++}return-1}var g=(e,t)=>{let n=0;for(let r of e.keys()){if(n===t)return r;n++}},_=(e,t)=>{let n=g(e,t);return n===void 0?void 0:e.get(n)},v=e=>e?e.type.displayName:``,y=(e,t=[])=>(o.Children.forEach(e,e=>{if((0,o.isValidElement)(e)){if(v(e)===`Combobox.Item`){let n=e.props;t.push({value:n.value,disabled:!!n.disabled,text:x(n.children)})}e.props.children&&y(e.props.children,t)}}),t),b=e=>{if(!e)return``;for(let t of o.Children.toArray(e))if((0,o.isValidElement)(t)){let e=t;if(v(e)===`Combobox.ItemText`)return e.props.children;let n=b(e.props.children);if(n)return n}return``},x=e=>typeof e==`string`?e:b(e),S=e=>{let t=new Map;return y(e).forEach(e=>{t.set(e.value,e)}),t},C=(e,t)=>o.Children.toArray(e).some(e=>(0,o.isValidElement)(e)?v(e)===t?!0:e.props.children?C(e.props.children,t):!1:!1),w=(e,t)=>o.Children.toArray(e).filter(o.isValidElement).find(e=>t===v(e)||``),T=({multiselect:e,selectedItems:t,allowCustomValue:n=!1,setSelectedItems:r,triggerAreaRef:i,items:a})=>(o,{changes:s,type:c})=>{let l=i.current?.contains?.(document.activeElement);switch(c){case p.useCombobox.stateChangeTypes.InputClick:return{...s,isOpen:!0};case p.useCombobox.stateChangeTypes.InputKeyDownEnter:case p.useCombobox.stateChangeTypes.ItemClick:{let n={...s};return s.selectedItem!=null&&(n.inputValue=``,n.isOpen=!0,n.highlightedIndex=h(a,s.selectedItem.value),r(e.selectedItems.some(e=>e.value===s.selectedItem?.value)?t.filter(e=>e.value!==s.selectedItem?.value):[...t,s.selectedItem])),n}case p.useCombobox.stateChangeTypes.ToggleButtonClick:return{...s,inputValue:n?s.inputValue:``};case p.useCombobox.stateChangeTypes.InputChange:return{...s,selectedItem:s.highlightedIndex===-1?null:s.selectedItem};case p.useCombobox.stateChangeTypes.InputBlur:return{...s,inputValue:n?s.inputValue:``,isOpen:l};default:return s}},ee=({filteredItems:e,allowCustomValue:t=!1,setSelectedItem:n})=>(r,{changes:i,type:a})=>{let o=e.find(e=>e.text.toLowerCase()===r.inputValue.toLowerCase());switch(a){case p.useCombobox.stateChangeTypes.InputKeyDownEscape:return i.selectedItem||n(null),i;case p.useCombobox.stateChangeTypes.ItemClick:case p.useCombobox.stateChangeTypes.InputKeyDownEnter:return i.selectedItem&&n(i.selectedItem),i;case p.useCombobox.stateChangeTypes.InputClick:return{...i,isOpen:!0};case p.useCombobox.stateChangeTypes.ToggleButtonClick:case p.useCombobox.stateChangeTypes.InputBlur:return t?i:r.inputValue===``?(n(null),{...i,selectedItem:null}):o?(n(o),{...i,selectedItem:o,inputValue:o.text}):r.selectedItem?{...i,inputValue:r.selectedItem.text}:{...i,inputValue:``};default:return i}},E=(0,o.createContext)(null),D=(e,t)=>t?new Map(Array.from(e).filter(([e,{text:n}])=>n.toLowerCase().includes(t.toLowerCase()))):e,O=`:combobox`,k=({children:e,state:t,allowCustomValue:n=!1,filtering:r=`auto`,disabled:a=!1,multiple:c=!1,readOnly:l=!1,wrap:d=!0,value:m,defaultValue:h,onValueChange:g,open:v,defaultOpen:y,onOpenChange:b,isLoading:x})=>{let w=(0,o.useRef)(!1),[k,A]=(0,o.useState)(``),[j,M]=(0,o.useState)(r===`strict`),N=(0,o.useRef)(null),P=(0,o.useRef)(null),[F,te]=(0,o.useState)(null),[I]=(0,f.useCombinedState)(m,h),L=r===`strict`||r===`auto`&&j,[R,z]=(0,o.useState)(S(e)),[B,V]=(0,o.useState)(L?D(R,k):R),[H,U]=(0,o.useState)(R.get(I)||null),[W,ne]=(0,o.useState)(I?[...R.values()].filter(e=>I.includes(e.value)):[]),G=e=>{M(!1),e?.value!==H?.value&&(U(e),setTimeout(()=>{g?.(e?.value)},0))},K=e=>{ne(e),setTimeout(()=>{g?.(e.map(e=>e.value))},0)};(0,o.useEffect)(()=>{if(!w.current){w.current=!0;return}if(c){let e=I.reduce((e,t)=>{let n=R.get(t);return n?[...e,n]:e},[]);ne(I?e:[])}else U(R.get(I)||null)},[c?JSON.stringify(I):I]);let q=(0,u.useFormFieldControl)(),J=`${O}-label-${(0,o.useId)()}`,Y=`${O}-field-${(0,o.useId)()}`,X=q.id||Y,Z=q.labelId||J,re=q.state||t,Q=q.disabled??a,ie=q.readOnly??l,[ae,$]=(0,o.useState)(C(e,`Combobox.Popover`)),[oe,se]=(0,o.useState)(!1),[ce,le]=(0,o.useState)(`mouse`);(0,o.useEffect)(()=>{V(L?D(R,k):R)},[k,R]);let ue=(0,p.useMultipleSelection)({selectedItems:W,stateReducer:(e,{type:t,changes:n})=>{let r=p.useMultipleSelection.stateChangeTypes;switch(t){case r.SelectedItemKeyDownBackspace:case r.SelectedItemKeyDownDelete:{K(n.selectedItems||[]);let i;return i=t===r.SelectedItemKeyDownDelete?e?.activeIndex===n.selectedItems?.length?-1:e.activeIndex:(n?.activeIndex||0)-1>=0?e.activeIndex-1:n?.activeIndex,{...n,activeIndex:i}}case r.SelectedItemClick:return P.current&&P.current.focus(),{...n,activeIndex:-1};case r.FunctionRemoveSelectedItem:return{...n,activeIndex:-1};case r.DropdownKeyDownNavigationPrevious:return fe.closeMenu(),n;default:return n}}}),de=Array.from(B.values());(0,o.useEffect)(()=>{F?.(k||``)},[k]);let fe=(0,p.useCombobox)({inputId:X,items:de,selectedItem:c?void 0:H,id:X,labelId:Z,inputValue:k,onInputValueChange:({inputValue:e})=>{A(e),L&&V(D(R,e||``))},initialIsOpen:y,...v!=null&&{isOpen:v},onIsOpenChange:e=>{e.isOpen!=null&&b?.(e.isOpen)},itemToString:e=>e?.text,isItemDisabled:e=>{let t=!!k&&!de.some(t=>e.value===t.value);return e.disabled||t},stateReducer:c?T({multiselect:ue,selectedItems:W,allowCustomValue:n,setSelectedItems:K,triggerAreaRef:N,items:R}):ee({allowCustomValue:n,setSelectedItem:G,filteredItems:[...B.values()]}),scrollIntoView:e=>{e&&e.scrollIntoView({block:`nearest`})}});(0,o.useEffect)(()=>{let t=S(e),n=[...R.values()],r=[...t.values()];(n.length!==r.length||n.some((e,t)=>{let n=e.value!==r[t]?.value,i=e.text!==r[t]?.text;return n||i}))&&z(t)},[e]);let[pe,me]=ae?[i.t,{open:!0}]:[o.Fragment,{}];return(0,s.jsx)(E.Provider,{value:{itemsMap:R,filteredItemsMap:B,highlightedItem:_(B,fe.highlightedIndex),multiple:c,disabled:Q,readOnly:ie,areSelectedItemsInTrigger:oe,setAreSelectedItemsInTrigger:se,hasPopover:ae,setHasPopover:$,state:re,lastInteractionType:ce,setLastInteractionType:le,wrap:d,innerInputRef:P,triggerAreaRef:N,...fe,...ue,setInputValue:A,selectItem:G,setSelectedItems:K,isLoading:x,setOnInputValueChange:te,isTyping:j,setIsTyping:M},children:(0,s.jsx)(pe,{...me,children:e})})},A=()=>{let e=(0,o.useContext)(E);if(!e)throw Error(`useComboboxContext must be used within a Combobox provider`);return e},j=({children:e,...t})=>(0,s.jsx)(k,{...t,children:e});j.displayName=`Combobox`;var M=({className:e,tabIndex:n=-1,onClick:r,ref:i,...o})=>{let c=A();return(0,s.jsx)(`button`,{ref:i,className:(0,a.cx)(e,`h-sz-44 text-neutral hover:text-neutral-hovered`),tabIndex:n,onClick:e=>{e.stopPropagation(),c.multiple?c.setSelectedItems([]):c.selectItem(null),c.setInputValue(``),c.innerInputRef.current&&c.innerInputRef.current.focus(),r&&r(e)},type:`button`,...o,children:(0,s.jsx)(t.t,{size:`sm`,children:(0,s.jsx)(m.DeleteOutline,{})})})};M.displayName=`Combobox.ClearButton`;var N=({className:e,closedLabel:n,openedLabel:i,intent:o=`neutral`,design:u=`ghost`,size:d=`sm`,ref:f,...p})=>{let m=A(),{ref:h,...g}=m.getToggleButtonProps({disabled:m.disabled||m.readOnly,onClick:e=>{e.stopPropagation()}}),_=g[`aria-expanded`];return(0,s.jsx)(r.t,{ref:(0,l.useMergeRefs)(f,h),className:(0,a.cx)(e,`ml-sm mt-[calc((44px-32px)/2)]`),intent:o,design:u,size:d,...g,...p,"aria-label":_?i:n,disabled:m.disabled,children:(0,s.jsx)(t.t,{className:(0,a.cx)(`shrink-0`,`rotate-0 transition duration-100 ease-in`,{"rotate-180":_}),size:`sm`,children:(0,s.jsx)(c.ArrowHorizontalDown,{})})})};N.displayName=`Combobox.Disclosure`;var P=({className:e,children:t,ref:n})=>A().filteredItemsMap.size===0?(0,s.jsx)(`div`,{ref:n,className:(0,a.cx)(`px-lg py-md text-body-1 text-on-surface/dim-1`,e),children:t}):null;P.displayName=`Combobox.Empty`;var F=(0,o.createContext)(null),te=({children:e})=>{let t=`${O}-group-label-${(0,o.useId)()}`;return(0,s.jsx)(F.Provider,{value:{groupLabelId:t},children:e})},I=()=>{let e=(0,o.useContext)(F);if(!e)throw Error(`useComboboxGroupContext must be used within a ComboboxGroup provider`);return e},L=({children:e,ref:t,...n})=>(0,s.jsx)(te,{children:(0,s.jsx)(R,{ref:t,...n,children:e})}),R=({children:e,className:t,ref:n})=>{let r=A(),i=I();return o.Children.toArray(e).some(e=>(0,o.isValidElement)(e)&&r.filteredItemsMap.get(e.props.value))?(0,s.jsx)(`div`,{ref:n,role:`group`,"aria-labelledby":i.groupLabelId,className:(0,a.cx)(t),children:e}):null};L.displayName=`Combobox.Group`;var z=({"aria-label":t,className:n,placeholder:r,value:c,defaultValue:d,onValueChange:p,ref:m,...h})=>{let g=A(),_=(0,u.useFormFieldControl)(),[v]=(0,f.useCombinedState)(c,d),{isInvalid:y,description:b}=_;(0,o.useEffect)(()=>{v!=null&&g.setInputValue(v)},[v]),(0,o.useEffect)(()=>{p&&g.setOnInputValueChange(()=>p),!g.multiple&&g.selectedItem&&g.setInputValue(g.selectedItem.text)},[]);let x=g.hasPopover?i.t.Trigger:o.Fragment,S=g.hasPopover?{asChild:!0,type:void 0}:{},C=g.getDropdownProps(),w=(0,l.useMergeRefs)(m,g.innerInputRef,C.ref),T=g.getInputProps({disabled:g.disabled||g.readOnly,...C,onKeyDown:e=>{C.onKeyDown?.(e),g.setLastInteractionType(`keyboard`),g.setIsTyping(!0)},onChange:e=>{g.setInputValue(e.target.value)},ref:w}),ee=g.multiple?!g.areSelectedItemsInTrigger||g.selectedItems.length===0:g.selectedItem===null;function E(e,t){return n=>{e?.(n),t?.(n)}}let D={onBlur:E(h.onBlur,T.onBlur),onChange:E(h.onChange,T.onChange),onClick:E(h.onClick,T.onClick),onKeyDown:E(h.onKeyDown,T.onKeyDown)};return(0,s.jsxs)(s.Fragment,{children:[t&&(0,s.jsx)(e.VisuallyHidden,{children:(0,s.jsx)(`label`,{...g.getLabelProps(),children:t})}),(0,s.jsx)(x,{...S,children:(0,s.jsx)(`input`,{"data-spark-component":`combobox-input`,type:`text`,...ee&&{placeholder:r},className:(0,a.cx)(`max-w-full shrink-0 grow basis-[80px]`,`h-sz-28 bg-surface px-sm text-body-1 text-ellipsis outline-hidden`,`disabled:text-on-surface/dim-3 disabled:cursor-not-allowed disabled:bg-transparent`,`read-only:text-on-surface read-only:cursor-default read-only:bg-transparent`,n),...h,...T,...D,value:g.inputValue,"aria-label":t,disabled:g.disabled,readOnly:g.readOnly,"aria-invalid":y,"aria-describedby":b})})]})};z.displayName=`Combobox.Input`;var B=(0,o.createContext)(null),V=({value:e,disabled:t=!1,children:n})=>{let r=A(),[i,a]=(0,o.useState)(void 0),c=h(r.filteredItemsMap,e),l={disabled:t,value:e,text:x(n)},u=r.multiple?r.selectedItems.some(t=>t.value===e):r.selectedItem?.value===e;return(0,s.jsx)(B.Provider,{value:{textId:i,setTextId:a,isSelected:u,itemData:l,index:c,disabled:t},children:n})},H=()=>{let e=(0,o.useContext)(B);if(!e)throw Error(`useComboboxItemContext must be used within a ComboboxItem provider`);return e},U=({children:e,ref:t,...n})=>{let{value:r,disabled:i}=n;return(0,s.jsx)(V,{value:r,disabled:i,children:(0,s.jsx)(ne,{ref:t,...n,children:e})})},W=(0,a.cva)(`px-lg py-md text-body-1`,{variants:{selected:{true:`font-bold`},disabled:{true:`opacity-dim-3 cursor-not-allowed`,false:`cursor-pointer`},highlighted:{true:``},interactionType:{mouse:``,keyboard:``}},compoundVariants:[{highlighted:!0,interactionType:`mouse`,class:`bg-surface-hovered`},{highlighted:!0,interactionType:`keyboard`,class:`u-outline`}]}),ne=({className:e,disabled:t=!1,value:n,children:r,ref:i,...o})=>{let c=A(),u=H(),d=!!c.filteredItemsMap.get(n),{ref:f,...p}=c.getItemProps({item:u.itemData,index:u.index}),m=(0,l.useMergeRefs)(i,f);return d?(0,s.jsx)(`li`,{ref:m,className:(0,a.cx)(W({selected:u.isSelected,disabled:t,highlighted:c.highlightedItem?.value===n,interactionType:c.lastInteractionType,className:e})),...p,...o,"aria-selected":u.isSelected,"aria-labelledby":u.textId,children:r},n):null};U.displayName=`Combobox.Item`;var G=({className:e,children:n,label:r,ref:i})=>{let{disabled:o,isSelected:c}=H(),l=n||(0,s.jsx)(t.t,{size:`sm`,children:(0,s.jsx)(d.Check,{"aria-label":r})});return(0,s.jsx)(`span`,{ref:i,className:(0,a.cx)(`min-h-sz-16 min-w-sz-16 flex`,o&&`opacity-dim-3`,e),children:c&&l})};G.displayName=`Combobox.ItemIndicator`;var K=({children:e,className:t,ref:r,...i})=>{let c=A(),{ref:u,...d}=c.getMenuProps({onMouseMove:()=>{c.setLastInteractionType(`mouse`)}}),f=(0,o.useRef)(null),p=(0,l.useMergeRefs)(r,u,f),m=c.hasPopover?c.isOpen:!0,h=c.hasPopover&&!m;return(0,o.useLayoutEffect)(()=>{f.current?.parentElement&&(f.current.parentElement.style.pointerEvents=h?`none`:``,f.current.style.pointerEvents=h?`none`:``)},[h]),(0,s.jsx)(`ul`,{ref:p,className:(0,a.cx)(t,`flex flex-col`,m?`block`:`pointer-events-none invisible opacity-0`,c.hasPopover&&`p-lg`,c.isLoading&&`items-center overflow-y-auto`),...i,...d,"aria-busy":c.isLoading,"data-spark-component":`combobox-items`,children:c.isLoading?(0,s.jsx)(n.t,{size:`sm`}):e})};K.displayName=`Combobox.Items`;var q=({children:e,className:t,ref:n})=>{let r=`${O}-item-text-${(0,o.useId)()}`,{setTextId:i}=H();return(0,o.useEffect)(()=>(i(r),()=>i(void 0))),(0,s.jsx)(`span`,{id:r,className:(0,a.cx)(`inline`,t),ref:n,children:e})};q.displayName=`Combobox.ItemText`;var J=({children:e,className:t,ref:n})=>(0,s.jsx)(`div`,{ref:n,id:I().groupLabelId,className:(0,a.cx)(`px-md py-sm text-body-2 text-neutral italic`,t),children:e});J.displayName=`Combobox.Label`;var Y=({children:e})=>(0,s.jsx)(t.t,{size:`sm`,className:`h-sz-44 shrink-0`,children:e});Y.displayName=`Combobox.LeadingIcon`;var X=({children:e,matchTriggerWidth:t=!0,sideOffset:n=4,className:r,ref:c,...l})=>{let u=A();return(0,o.useEffect)(()=>(u.setHasPopover(!0),()=>u.setHasPopover(!1)),[]),(0,s.jsx)(i.t.Content,{ref:c,inset:!0,asChild:!0,matchTriggerWidth:t,className:(0,a.cx)(`z-dropdown! relative`,r),sideOffset:n,onOpenAutoFocus:e=>{e.preventDefault()},...l,"data-spark-component":`combobox-popover`,children:e})};X.displayName=`Combobox.Popover`;var Z=({children:e,...t})=>(0,s.jsx)(i.t.Portal,{...t,children:e});Z.displayName=`Combobox.Portal`;var re=({item:e,index:n})=>{let r=A(),i=!r.disabled&&!r.readOnly,o=e=>{let t=e.target;r.lastInteractionType===`keyboard`&&t.scrollIntoView({behavior:`smooth`,block:`nearest`,inline:`nearest`})},{disabled:c,...l}=r.getSelectedItemProps({disabled:r.disabled||r.readOnly,selectedItem:e,index:n});return(0,s.jsxs)(c?`button`:`span`,{role:`presentation`,"data-spark-component":`combobox-selected-item`,className:(0,a.cx)(`h-sz-28 bg-neutral-container flex items-center rounded-md align-middle`,`text-body-2 text-on-neutral-container`,`disabled:opacity-dim-3 disabled:cursor-not-allowed`,`focus-visible:u-outline-inset outline-hidden`,{"px-md":!i,"pl-md":i}),...l,tabIndex:-1,...c&&{disabled:!0},onFocus:o,children:[(0,s.jsx)(`span`,{className:(0,a.cx)(`line-clamp-1 overflow-x-hidden leading-normal break-all text-ellipsis`,{"w-max":!r.wrap}),children:e.text}),r.disabled,i&&(0,s.jsx)(`button`,{type:`button`,tabIndex:-1,"aria-hidden":!0,className:`px-md h-full cursor-pointer`,onClick:t=>{t.stopPropagation();let n=r.selectedItems.filter(t=>t.value!==e.value);r.setSelectedItems(n),r.innerInputRef.current&&r.innerInputRef.current.focus({preventScroll:!0})},children:(0,s.jsx)(t.t,{size:`sm`,children:(0,s.jsx)(m.DeleteOutline,{})})})]},`selected-item-${n}`)},Q=()=>{let e=A();return e.multiple&&e.selectedItems.length?(0,s.jsx)(s.Fragment,{children:e.selectedItems.map((e,t)=>(0,s.jsx)(re,{item:e,index:t},e.value))}):null};Q.displayName=`Combobox.SelectedItems`;var ie=(0,a.cva)([`flex items-start gap-md min-h-sz-44 text-body-1`,`h-fit rounded-xl px-lg`,`ring-1 outline-hidden ring-inset focus-within:ring-2 focus-within:ring-focus`],{variants:{allowWrap:{true:``,false:`h-sz-44`},state:{undefined:`ring-outline`,error:`ring-error`,alert:`ring-alert`,success:`ring-success`},disabled:{true:`cursor-not-allowed border-outline bg-on-surface/dim-5 text-on-surface/dim-3`},readOnly:{true:`cursor-default bg-on-surface/dim-5 text-on-surface`}},compoundVariants:[{disabled:!1,state:void 0,class:`default:hover:ring-outline-high`},{disabled:!1,readOnly:!1,class:`bg-surface text-on-surface cursor-text`}],defaultVariants:{state:void 0,disabled:!1,readOnly:!1}}),ae=(e,t)=>{let n=(0,o.useRef)(null);(0,o.useEffect)(()=>{let r=()=>{let i=e.current?.scrollWidth||null;n.current&&i&&i>n.current&&t(),n.current=i,requestAnimationFrame(r)},i=requestAnimationFrame(r);return()=>cancelAnimationFrame(i)},[e])},$=({className:e,children:t,ref:n})=>{let r=A(),c=(0,u.useFormFieldControl)(),d=w(t,`Combobox.LeadingIcon`),f=w(t,`Combobox.SelectedItems`),p=w(t,`Combobox.Input`),m=w(t,`Combobox.ClearButton`),h=w(t,`Combobox.Disclosure`),[g,_]=r.hasPopover?[i.t.Anchor,{asChild:!0,type:void 0}]:[o.Fragment,{}],v=(0,l.useMergeRefs)(n,r.triggerAreaRef),y=(0,o.useRef)(null),b=c.disabled||r.disabled,x=c.readOnly||r.readOnly,S=!!m&&!b&&!x,C=()=>{if(y.current&&!r.wrap){let{scrollWidth:e,clientWidth:t}=y.current;y.current.scrollLeft=e-t}};ae(y,C);let T=!!f;return(0,o.useEffect)(()=>{r.setAreSelectedItemsInTrigger(T)},[T]),(0,o.useEffect)(()=>{let e=new ResizeObserver(C);return y.current&&e.observe(y.current),()=>{e.disconnect()}},[]),(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(g,{..._,children:(0,s.jsxs)(`div`,{ref:v,className:ie({className:e,state:r.state,disabled:b,readOnly:x,allowWrap:r.wrap}),onClick:()=>{!r.isOpen&&!b&&!x&&(r.openMenu(),r.innerInputRef.current&&r.innerInputRef.current.focus())},children:[d,(0,s.jsxs)(`div`,{ref:y,className:(0,a.cx)(`min-w-none gap-sm py-md inline-flex grow items-start`,r.wrap?`flex-wrap`:`u-no-scrollbar overflow-x-auto p-[2px]`),children:[f,p]}),S&&m,h]})})})};$.displayName=`Combobox.Trigger`;var oe=Object.assign(j,{Group:L,Item:U,Items:K,ItemText:q,ItemIndicator:G,Label:J,Popover:X,Trigger:$,LeadingIcon:Y,Empty:P,Input:z,Disclosure:N,SelectedItems:Q,ClearButton:M,Portal:Z});oe.displayName=`Combobox`,L.displayName=`Combobox.Group`,K.displayName=`Combobox.Items`,U.displayName=`Combobox.Item`,q.displayName=`Combobox.ItemText`,G.displayName=`Combobox.ItemIndicator`,J.displayName=`Combobox.Label`,X.displayName=`Combobox.Popover`,$.displayName=`Combobox.Trigger`,Y.displayName=`Combobox.LeadingIcon`,P.displayName=`Combobox.Empty`,z.displayName=`Combobox.Input`,N.displayName=`Combobox.Disclosure`,Q.displayName=`Combobox.SelectedItems`,M.displayName=`Combobox.ClearButton`,Z.displayName=`Combobox.Portal`,exports.Combobox=oe,exports.ComboboxProvider=k,exports.useComboboxContext=A;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../visually-hidden/index.js`),t=require(`../icon-CRPcdgYp.js`),n=require(`../spinner-DFUoYvmm.js`),r=require(`../icon-button-CykysbgJ.js`),i=require(`../popover-GOovJ27J.js`);let a=require(`class-variance-authority`),o=require(`react`),s=require(`react/jsx-runtime`),c=require(`@spark-ui/icons/ArrowHorizontalDown`),l=require(`@spark-ui/hooks/use-merge-refs`),u=require(`@spark-ui/components/form-field`),d=require(`@spark-ui/icons/Check`),f=require(`@spark-ui/hooks/use-combined-state`),p=require(`downshift`),m=require(`@spark-ui/icons/DeleteOutline`);function h(e,t){let n=0;for(let[r]of e.entries()){if(r===t)return n;n++}return-1}var g=(e,t)=>{let n=0;for(let r of e.keys()){if(n===t)return r;n++}},_=(e,t)=>{let n=g(e,t);return n===void 0?void 0:e.get(n)},v=e=>e?e.type.displayName:``,y=(e,t=[])=>(o.Children.forEach(e,e=>{if((0,o.isValidElement)(e)){if(v(e)===`Combobox.Item`){let n=e.props;t.push({value:n.value,disabled:!!n.disabled,text:x(n.children)})}e.props.children&&y(e.props.children,t)}}),t),b=e=>{if(!e)return``;for(let t of o.Children.toArray(e))if((0,o.isValidElement)(t)){let e=t;if(v(e)===`Combobox.ItemText`)return e.props.children;let n=b(e.props.children);if(n)return n}return``},x=e=>typeof e==`string`?e:b(e),S=e=>{let t=new Map;return y(e).forEach(e=>{t.set(e.value,e)}),t},C=(e,t)=>o.Children.toArray(e).some(e=>(0,o.isValidElement)(e)?v(e)===t?!0:e.props.children?C(e.props.children,t):!1:!1),w=(e,t)=>o.Children.toArray(e).filter(o.isValidElement).find(e=>t===v(e)||``),T=({multiselect:e,selectedItems:t,allowCustomValue:n=!1,setSelectedItems:r,triggerAreaRef:i,items:a})=>(o,{changes:s,type:c})=>{let l=i.current?.contains?.(document.activeElement);switch(c){case p.useCombobox.stateChangeTypes.InputClick:return{...s,isOpen:!0};case p.useCombobox.stateChangeTypes.InputKeyDownEnter:case p.useCombobox.stateChangeTypes.ItemClick:{let n={...s};return s.selectedItem!=null&&(n.inputValue=``,n.isOpen=!0,n.highlightedIndex=h(a,s.selectedItem.value),r(e.selectedItems.some(e=>e.value===s.selectedItem?.value)?t.filter(e=>e.value!==s.selectedItem?.value):[...t,s.selectedItem])),n}case p.useCombobox.stateChangeTypes.ToggleButtonClick:return{...s,inputValue:n?s.inputValue:``};case p.useCombobox.stateChangeTypes.InputChange:return{...s,selectedItem:s.highlightedIndex===-1?null:s.selectedItem};case p.useCombobox.stateChangeTypes.InputBlur:return{...s,inputValue:n?s.inputValue:``,isOpen:l};default:return s}},ee=({filteredItems:e,allowCustomValue:t=!1,setSelectedItem:n})=>(r,{changes:i,type:a})=>{let o=e.find(e=>e.text.toLowerCase()===r.inputValue.toLowerCase());switch(a){case p.useCombobox.stateChangeTypes.InputKeyDownEscape:return i.selectedItem||n(null),i;case p.useCombobox.stateChangeTypes.ItemClick:case p.useCombobox.stateChangeTypes.InputKeyDownEnter:return i.selectedItem&&n(i.selectedItem),i;case p.useCombobox.stateChangeTypes.InputClick:return{...i,isOpen:!0};case p.useCombobox.stateChangeTypes.ToggleButtonClick:case p.useCombobox.stateChangeTypes.InputBlur:return t?i:r.inputValue===``?(n(null),{...i,selectedItem:null}):o?(n(o),{...i,selectedItem:o,inputValue:o.text}):r.selectedItem?{...i,inputValue:r.selectedItem.text}:{...i,inputValue:``};default:return i}},E=(0,o.createContext)(null),D=(e,t)=>t?new Map(Array.from(e).filter(([e,{text:n}])=>n.toLowerCase().includes(t.toLowerCase()))):e,O=`:combobox`,k=({children:e,state:t,allowCustomValue:n=!1,filtering:r=`auto`,disabled:a=!1,multiple:c=!1,readOnly:l=!1,wrap:d=!0,value:m,defaultValue:h,onValueChange:g,open:v,defaultOpen:y,onOpenChange:b,isLoading:x})=>{let w=(0,o.useRef)(!1),[k,A]=(0,o.useState)(``),[j,M]=(0,o.useState)(r===`strict`),N=(0,o.useRef)(null),P=(0,o.useRef)(null),[F,te]=(0,o.useState)(null),[I]=(0,f.useCombinedState)(m,h),L=r===`strict`||r===`auto`&&j,[R,z]=(0,o.useState)(S(e)),[B,V]=(0,o.useState)(L?D(R,k):R),[H,U]=(0,o.useState)(R.get(I)||null),[W,ne]=(0,o.useState)(I?[...R.values()].filter(e=>I.includes(e.value)):[]),G=e=>{M(!1),e?.value!==H?.value&&(U(e),setTimeout(()=>{g?.(e?.value)},0))},K=e=>{ne(e),setTimeout(()=>{g?.(e.map(e=>e.value))},0)};(0,o.useEffect)(()=>{if(!w.current){w.current=!0;return}if(c){let e=I.reduce((e,t)=>{let n=R.get(t);return n?[...e,n]:e},[]);ne(I?e:[])}else U(R.get(I)||null)},[c?JSON.stringify(I):I]);let q=(0,u.useFormFieldControl)(),J=`${O}-label-${(0,o.useId)()}`,Y=`${O}-field-${(0,o.useId)()}`,X=q.id||Y,Z=q.labelId||J,re=q.state||t,Q=q.disabled??a,ie=q.readOnly??l,[ae,$]=(0,o.useState)(C(e,`Combobox.Popover`)),[oe,se]=(0,o.useState)(!1),[ce,le]=(0,o.useState)(`mouse`);(0,o.useEffect)(()=>{V(L?D(R,k):R)},[k,R]);let ue=(0,p.useMultipleSelection)({selectedItems:W,stateReducer:(e,{type:t,changes:n})=>{let r=p.useMultipleSelection.stateChangeTypes;switch(t){case r.SelectedItemKeyDownBackspace:case r.SelectedItemKeyDownDelete:{K(n.selectedItems||[]);let i;return i=t===r.SelectedItemKeyDownDelete?e?.activeIndex===n.selectedItems?.length?-1:e.activeIndex:(n?.activeIndex||0)-1>=0?e.activeIndex-1:n?.activeIndex,{...n,activeIndex:i}}case r.SelectedItemClick:return P.current&&P.current.focus(),{...n,activeIndex:-1};case r.FunctionRemoveSelectedItem:return{...n,activeIndex:-1};case r.DropdownKeyDownNavigationPrevious:return fe.closeMenu(),n;default:return n}}}),de=Array.from(B.values());(0,o.useEffect)(()=>{F?.(k||``)},[k]);let fe=(0,p.useCombobox)({inputId:X,items:de,selectedItem:c?void 0:H,id:X,labelId:Z,inputValue:k,onInputValueChange:({inputValue:e})=>{A(e),L&&V(D(R,e||``))},initialIsOpen:y,...v!=null&&{isOpen:v},onIsOpenChange:e=>{e.isOpen!=null&&b?.(e.isOpen)},itemToString:e=>e?.text,isItemDisabled:e=>{let t=!!k&&!de.some(t=>e.value===t.value);return e.disabled||t},stateReducer:c?T({multiselect:ue,selectedItems:W,allowCustomValue:n,setSelectedItems:K,triggerAreaRef:N,items:R}):ee({allowCustomValue:n,setSelectedItem:G,filteredItems:[...B.values()]}),scrollIntoView:e=>{e&&e.scrollIntoView({block:`nearest`})}});(0,o.useEffect)(()=>{let t=S(e),n=[...R.values()],r=[...t.values()];(n.length!==r.length||n.some((e,t)=>{let n=e.value!==r[t]?.value,i=e.text!==r[t]?.text;return n||i}))&&z(t)},[e]);let[pe,me]=ae?[i.t,{open:!0}]:[o.Fragment,{}];return(0,s.jsx)(E.Provider,{value:{itemsMap:R,filteredItemsMap:B,highlightedItem:_(B,fe.highlightedIndex),multiple:c,disabled:Q,readOnly:ie,areSelectedItemsInTrigger:oe,setAreSelectedItemsInTrigger:se,hasPopover:ae,setHasPopover:$,state:re,lastInteractionType:ce,setLastInteractionType:le,wrap:d,innerInputRef:P,triggerAreaRef:N,...fe,...ue,setInputValue:A,selectItem:G,setSelectedItems:K,isLoading:x,setOnInputValueChange:te,isTyping:j,setIsTyping:M},children:(0,s.jsx)(pe,{...me,children:e})})},A=()=>{let e=(0,o.useContext)(E);if(!e)throw Error(`useComboboxContext must be used within a Combobox provider`);return e},j=({children:e,...t})=>(0,s.jsx)(k,{...t,children:e});j.displayName=`Combobox`;var M=({className:e,tabIndex:n=-1,onClick:r,ref:i,...o})=>{let c=A();return(0,s.jsx)(`button`,{ref:i,className:(0,a.cx)(e,`h-sz-44 text-neutral hover:text-neutral-hovered`),tabIndex:n,onClick:e=>{e.stopPropagation(),c.multiple?c.setSelectedItems([]):c.selectItem(null),c.setInputValue(``),c.innerInputRef.current&&c.innerInputRef.current.focus(),r&&r(e)},type:`button`,...o,children:(0,s.jsx)(t.t,{size:`sm`,children:(0,s.jsx)(m.DeleteOutline,{})})})};M.displayName=`Combobox.ClearButton`;var N=({className:e,closedLabel:n,openedLabel:i,intent:o=`neutral`,design:u=`ghost`,size:d=`sm`,ref:f,...p})=>{let m=A(),{ref:h,...g}=m.getToggleButtonProps({disabled:m.disabled||m.readOnly,onClick:e=>{e.stopPropagation()}}),_=g[`aria-expanded`];return(0,s.jsx)(r.t,{ref:(0,l.useMergeRefs)(f,h),className:(0,a.cx)(e,`ml-sm mt-[calc((44px-32px)/2)]`),intent:o,design:u,size:d,...g,...p,"aria-label":_?i:n,disabled:m.disabled,children:(0,s.jsx)(t.t,{className:(0,a.cx)(`shrink-0`,`rotate-0 transition duration-100 ease-in`,{"rotate-180":_}),size:`sm`,children:(0,s.jsx)(c.ArrowHorizontalDown,{})})})};N.displayName=`Combobox.Disclosure`;var P=({className:e,children:t,ref:n})=>A().filteredItemsMap.size===0?(0,s.jsx)(`div`,{ref:n,className:(0,a.cx)(`px-lg py-md text-body-1 text-on-surface/dim-1`,e),children:t}):null;P.displayName=`Combobox.Empty`;var F=(0,o.createContext)(null),te=({children:e})=>{let t=`${O}-group-label-${(0,o.useId)()}`;return(0,s.jsx)(F.Provider,{value:{groupLabelId:t},children:e})},I=()=>{let e=(0,o.useContext)(F);if(!e)throw Error(`useComboboxGroupContext must be used within a ComboboxGroup provider`);return e},L=({children:e,ref:t,...n})=>(0,s.jsx)(te,{children:(0,s.jsx)(R,{ref:t,...n,children:e})}),R=({children:e,className:t,ref:n})=>{let r=A(),i=I();return o.Children.toArray(e).some(e=>(0,o.isValidElement)(e)&&r.filteredItemsMap.get(e.props.value))?(0,s.jsx)(`div`,{ref:n,role:`group`,"aria-labelledby":i.groupLabelId,className:(0,a.cx)(t),children:e}):null};L.displayName=`Combobox.Group`;var z=({"aria-label":t,className:n,placeholder:r,value:c,defaultValue:d,onValueChange:p,ref:m,...h})=>{let g=A(),_=(0,u.useFormFieldControl)(),[v]=(0,f.useCombinedState)(c,d),{isInvalid:y,description:b}=_;(0,o.useEffect)(()=>{v!=null&&g.setInputValue(v)},[v]),(0,o.useEffect)(()=>{p&&g.setOnInputValueChange(()=>p),!g.multiple&&g.selectedItem&&g.setInputValue(g.selectedItem.text)},[]);let x=g.hasPopover?i.t.Trigger:o.Fragment,S=g.hasPopover?{asChild:!0,type:void 0}:{},C=g.getDropdownProps(),w=(0,l.useMergeRefs)(m,g.innerInputRef,C.ref),T=g.getInputProps({disabled:g.disabled||g.readOnly,...C,onKeyDown:e=>{C.onKeyDown?.(e),g.setLastInteractionType(`keyboard`),g.setIsTyping(!0)},onChange:e=>{g.setInputValue(e.target.value)},ref:w}),ee=g.multiple?!g.areSelectedItemsInTrigger||g.selectedItems.length===0:g.selectedItem===null;function E(e,t){return n=>{e?.(n),t?.(n)}}let D={onBlur:E(h.onBlur,T.onBlur),onChange:E(h.onChange,T.onChange),onClick:E(h.onClick,T.onClick),onKeyDown:E(h.onKeyDown,T.onKeyDown)};return(0,s.jsxs)(s.Fragment,{children:[t&&(0,s.jsx)(e.VisuallyHidden,{children:(0,s.jsx)(`label`,{...g.getLabelProps(),children:t})}),(0,s.jsx)(x,{...S,children:(0,s.jsx)(`input`,{"data-spark-component":`combobox-input`,type:`text`,...ee&&{placeholder:r},className:(0,a.cx)(`max-w-full shrink-0 grow basis-[80px]`,`h-sz-28 bg-surface px-sm text-body-1 text-ellipsis outline-hidden`,`disabled:text-on-surface/dim-3 disabled:cursor-not-allowed disabled:bg-transparent`,`read-only:text-on-surface read-only:cursor-default read-only:bg-transparent`,n),...h,...T,...D,value:g.inputValue,"aria-label":t,disabled:g.disabled,readOnly:g.readOnly,"aria-invalid":y,"aria-describedby":b})})]})};z.displayName=`Combobox.Input`;var B=(0,o.createContext)(null),V=({value:e,disabled:t=!1,children:n})=>{let r=A(),[i,a]=(0,o.useState)(void 0),c=h(r.filteredItemsMap,e),l={disabled:t,value:e,text:x(n)},u=r.multiple?r.selectedItems.some(t=>t.value===e):r.selectedItem?.value===e;return(0,s.jsx)(B.Provider,{value:{textId:i,setTextId:a,isSelected:u,itemData:l,index:c,disabled:t},children:n})},H=()=>{let e=(0,o.useContext)(B);if(!e)throw Error(`useComboboxItemContext must be used within a ComboboxItem provider`);return e},U=({children:e,ref:t,...n})=>{let{value:r,disabled:i}=n;return(0,s.jsx)(V,{value:r,disabled:i,children:(0,s.jsx)(ne,{ref:t,...n,children:e})})},W=(0,a.cva)(`px-lg py-md text-body-1`,{variants:{selected:{true:`font-bold`},disabled:{true:`opacity-dim-3 cursor-not-allowed`,false:`cursor-pointer`},highlighted:{true:``},interactionType:{mouse:``,keyboard:``}},compoundVariants:[{highlighted:!0,interactionType:`mouse`,class:`bg-surface-hovered`},{highlighted:!0,interactionType:`keyboard`,class:`u-outline`}]}),ne=({className:e,disabled:t=!1,value:n,children:r,ref:i,...o})=>{let c=A(),u=H(),d=!!c.filteredItemsMap.get(n),{ref:f,...p}=c.getItemProps({item:u.itemData,index:u.index}),m=(0,l.useMergeRefs)(i,f);return d?(0,s.jsx)(`li`,{ref:m,className:(0,a.cx)(W({selected:u.isSelected,disabled:t,highlighted:c.highlightedItem?.value===n,interactionType:c.lastInteractionType,className:e})),...p,...o,"aria-selected":u.isSelected,"aria-labelledby":u.textId,children:r},n):null};U.displayName=`Combobox.Item`;var G=({className:e,children:n,label:r,ref:i})=>{let{disabled:o,isSelected:c}=H(),l=n||(0,s.jsx)(t.t,{size:`sm`,children:(0,s.jsx)(d.Check,{"aria-label":r})});return(0,s.jsx)(`span`,{ref:i,className:(0,a.cx)(`min-h-sz-16 min-w-sz-16 flex`,o&&`opacity-dim-3`,e),children:c&&l})};G.displayName=`Combobox.ItemIndicator`;var K=({children:e,className:t,ref:r,...i})=>{let c=A(),{ref:u,...d}=c.getMenuProps({onMouseMove:()=>{c.setLastInteractionType(`mouse`)}}),f=(0,o.useRef)(null),p=(0,l.useMergeRefs)(r,u,f),m=c.hasPopover?c.isOpen:!0,h=c.hasPopover&&!m;return(0,o.useLayoutEffect)(()=>{f.current?.parentElement&&(f.current.parentElement.style.pointerEvents=h?`none`:``,f.current.style.pointerEvents=h?`none`:``)},[h]),(0,s.jsx)(`ul`,{ref:p,className:(0,a.cx)(t,`flex flex-col`,m?`block`:`pointer-events-none invisible opacity-0`,c.hasPopover&&`p-lg`,c.isLoading&&`items-center overflow-y-auto`),...i,...d,"aria-busy":c.isLoading,"data-spark-component":`combobox-items`,children:c.isLoading?(0,s.jsx)(n.t,{size:`sm`}):e})};K.displayName=`Combobox.Items`;var q=({children:e,className:t,ref:n})=>{let r=`${O}-item-text-${(0,o.useId)()}`,{setTextId:i}=H();return(0,o.useEffect)(()=>(i(r),()=>i(void 0))),(0,s.jsx)(`span`,{id:r,className:(0,a.cx)(`inline`,t),ref:n,children:e})};q.displayName=`Combobox.ItemText`;var J=({children:e,className:t,ref:n})=>(0,s.jsx)(`div`,{ref:n,id:I().groupLabelId,className:(0,a.cx)(`px-md py-sm text-body-2 text-neutral italic`,t),children:e});J.displayName=`Combobox.Label`;var Y=({children:e})=>(0,s.jsx)(t.t,{size:`sm`,className:`h-sz-44 shrink-0`,children:e});Y.displayName=`Combobox.LeadingIcon`;var X=({children:e,matchTriggerWidth:t=!0,sideOffset:n=4,className:r,ref:c,...l})=>{let u=A();return(0,o.useEffect)(()=>(u.setHasPopover(!0),()=>u.setHasPopover(!1)),[]),(0,s.jsx)(i.t.Content,{ref:c,inset:!0,asChild:!0,matchTriggerWidth:t,className:(0,a.cx)(`z-dropdown! relative`,r),sideOffset:n,onOpenAutoFocus:e=>{e.preventDefault()},...l,"data-spark-component":`combobox-popover`,children:e})};X.displayName=`Combobox.Popover`;var Z=({children:e,...t})=>(0,s.jsx)(i.t.Portal,{...t,children:e});Z.displayName=`Combobox.Portal`;var re=({item:e,index:n})=>{let r=A(),i=!r.disabled&&!r.readOnly,o=e=>{let t=e.target;r.lastInteractionType===`keyboard`&&t.scrollIntoView({behavior:`smooth`,block:`nearest`,inline:`nearest`})},{disabled:c,...l}=r.getSelectedItemProps({disabled:r.disabled||r.readOnly,selectedItem:e,index:n});return(0,s.jsxs)(c?`button`:`span`,{role:`presentation`,"data-spark-component":`combobox-selected-item`,className:(0,a.cx)(`h-sz-28 bg-neutral-container flex items-center rounded-md align-middle`,`text-body-2 text-on-neutral-container`,`disabled:opacity-dim-3 disabled:cursor-not-allowed`,`focus-visible:u-outline-inset outline-hidden`,{"px-md":!i,"pl-md":i}),...l,tabIndex:-1,...c&&{disabled:!0},onFocus:o,children:[(0,s.jsx)(`span`,{className:(0,a.cx)(`line-clamp-1 overflow-x-hidden leading-normal break-all text-ellipsis`,{"w-max":!r.wrap}),children:e.text}),r.disabled,i&&(0,s.jsx)(`button`,{type:`button`,tabIndex:-1,"aria-hidden":!0,className:`px-md h-full cursor-pointer`,onClick:t=>{t.stopPropagation();let n=r.selectedItems.filter(t=>t.value!==e.value);r.setSelectedItems(n),r.innerInputRef.current&&r.innerInputRef.current.focus({preventScroll:!0})},children:(0,s.jsx)(t.t,{size:`sm`,children:(0,s.jsx)(m.DeleteOutline,{})})})]},`selected-item-${n}`)},Q=()=>{let e=A();return e.multiple&&e.selectedItems.length?(0,s.jsx)(s.Fragment,{children:e.selectedItems.map((e,t)=>(0,s.jsx)(re,{item:e,index:t},e.value))}):null};Q.displayName=`Combobox.SelectedItems`;var ie=(0,a.cva)([`flex items-start gap-md min-h-sz-44 text-body-1`,`h-fit rounded-lg px-lg`,`ring-1 outline-hidden ring-inset focus-within:ring-2 focus-within:ring-focus`],{variants:{allowWrap:{true:``,false:`h-sz-44`},state:{undefined:`ring-outline`,error:`ring-error`,alert:`ring-alert`,success:`ring-success`},disabled:{true:`cursor-not-allowed border-outline bg-on-surface/dim-5 text-on-surface/dim-3`},readOnly:{true:`cursor-default bg-on-surface/dim-5 text-on-surface`}},compoundVariants:[{disabled:!1,state:void 0,class:`default:hover:ring-outline-high`},{disabled:!1,readOnly:!1,class:`bg-surface text-on-surface cursor-text`}],defaultVariants:{state:void 0,disabled:!1,readOnly:!1}}),ae=(e,t)=>{let n=(0,o.useRef)(null);(0,o.useEffect)(()=>{let r=()=>{let i=e.current?.scrollWidth||null;n.current&&i&&i>n.current&&t(),n.current=i,requestAnimationFrame(r)},i=requestAnimationFrame(r);return()=>cancelAnimationFrame(i)},[e])},$=({className:e,children:t,ref:n})=>{let r=A(),c=(0,u.useFormFieldControl)(),d=w(t,`Combobox.LeadingIcon`),f=w(t,`Combobox.SelectedItems`),p=w(t,`Combobox.Input`),m=w(t,`Combobox.ClearButton`),h=w(t,`Combobox.Disclosure`),[g,_]=r.hasPopover?[i.t.Anchor,{asChild:!0,type:void 0}]:[o.Fragment,{}],v=(0,l.useMergeRefs)(n,r.triggerAreaRef),y=(0,o.useRef)(null),b=c.disabled||r.disabled,x=c.readOnly||r.readOnly,S=!!m&&!b&&!x,C=()=>{if(y.current&&!r.wrap){let{scrollWidth:e,clientWidth:t}=y.current;y.current.scrollLeft=e-t}};ae(y,C);let T=!!f;return(0,o.useEffect)(()=>{r.setAreSelectedItemsInTrigger(T)},[T]),(0,o.useEffect)(()=>{let e=new ResizeObserver(C);return y.current&&e.observe(y.current),()=>{e.disconnect()}},[]),(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(g,{..._,children:(0,s.jsxs)(`div`,{ref:v,className:ie({className:e,state:r.state,disabled:b,readOnly:x,allowWrap:r.wrap}),onClick:()=>{!r.isOpen&&!b&&!x&&(r.openMenu(),r.innerInputRef.current&&r.innerInputRef.current.focus())},children:[d,(0,s.jsxs)(`div`,{ref:y,className:(0,a.cx)(`min-w-none gap-sm py-md inline-flex grow items-start`,r.wrap?`flex-wrap`:`u-no-scrollbar overflow-x-auto p-[2px]`),children:[f,p]}),S&&m,h]})})})};$.displayName=`Combobox.Trigger`;var oe=Object.assign(j,{Group:L,Item:U,Items:K,ItemText:q,ItemIndicator:G,Label:J,Popover:X,Trigger:$,LeadingIcon:Y,Empty:P,Input:z,Disclosure:N,SelectedItems:Q,ClearButton:M,Portal:Z});oe.displayName=`Combobox`,L.displayName=`Combobox.Group`,K.displayName=`Combobox.Items`,U.displayName=`Combobox.Item`,q.displayName=`Combobox.ItemText`,G.displayName=`Combobox.ItemIndicator`,J.displayName=`Combobox.Label`,X.displayName=`Combobox.Popover`,$.displayName=`Combobox.Trigger`,Y.displayName=`Combobox.LeadingIcon`,P.displayName=`Combobox.Empty`,z.displayName=`Combobox.Input`,N.displayName=`Combobox.Disclosure`,Q.displayName=`Combobox.SelectedItems`,M.displayName=`Combobox.ClearButton`,Z.displayName=`Combobox.Portal`,exports.Combobox=oe,exports.ComboboxProvider=k,exports.useComboboxContext=A;
 //# sourceMappingURL=index.js.map