@spark-ui/components 17.2.3 → 17.2.4

package/dist/dropdown/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/dropdown/useDropdown.ts","../../src/dropdown/utils.ts","../../src/dropdown/DropdownContext.tsx","../../src/dropdown/Dropdown.tsx","../../src/dropdown/DropdownDivider.tsx","../../src/dropdown/DropdownItemsGroupContext.tsx","../../src/dropdown/DropdownGroup.tsx","../../src/dropdown/DropdownItemContext.tsx","../../src/dropdown/DropdownItem.tsx","../../src/dropdown/DropdownItemIndicator.tsx","../../src/dropdown/DropdownItems.tsx","../../src/dropdown/DropdownItemText.tsx","../../src/dropdown/DropdownLabel.tsx","../../src/dropdown/DropdownLeadingIcon.tsx","../../src/dropdown/DropdownPopover.tsx","../../src/dropdown/DropdownPortal.tsx","../../src/dropdown/DropdownTrigger.styles.tsx","../../src/dropdown/DropdownTrigger.tsx","../../src/dropdown/DropdownValue.tsx","../../src/dropdown/index.ts"],"sourcesContent":["import { useMultipleSelection, useSelect, UseSelectProps } from 'downshift'\n\nimport { type DropdownItem, type ItemsMap } from './types'\n\ntype OnChangeValueType = string & string[]\n\nexport interface DownshiftProps {\n  itemsMap: ItemsMap\n  value: string | string[] | undefined\n  defaultValue: string | string[] | undefined\n  onValueChange: ((value: string) => void) | ((value: string[]) => void) | undefined\n  open: boolean | undefined\n  onOpenChange: ((isOpen: boolean) => void) | undefined\n  defaultOpen: boolean | undefined\n  multiple: boolean | undefined\n  id: string\n  labelId: string\n}\n\n/**\n * This hook abstract the complexity of using downshift with both single and multiple selection.\n */\nexport const useDropdown = ({\n  itemsMap,\n  defaultValue,\n  value,\n  onValueChange,\n  open,\n  onOpenChange,\n  defaultOpen,\n  multiple,\n  id,\n  labelId,\n}: DownshiftProps) => {\n  const items = [...itemsMap.values()]\n\n  const downshiftMultipleSelection = useMultipleSelection<DropdownItem>({\n    selectedItems:\n      value != null && multiple\n        ? items.filter(item =>\n            multiple ? (value as string[]).includes(item.value) : value === item.value\n          )\n        : undefined,\n    initialSelectedItems:\n      defaultValue != null && multiple\n        ? items.filter(item =>\n            multiple ? (defaultValue as string[]).includes(item.value) : defaultValue === item.value\n          )\n        : undefined,\n\n    onSelectedItemsChange: ({ selectedItems }) => {\n      if (selectedItems != null && multiple) {\n        onValueChange?.(selectedItems.map(item => item.value) as OnChangeValueType)\n      }\n    },\n  })\n\n  /**\n   * Custom state reducer for multiple selection behaviour:\n   * - keeps the component opened when the user selects an item\n   * - preserves the higlighted index when the user select an item\n   * - selected items can be unselected, even the last selected item (as opposed to single selection behaviour)\n   */\n  const stateReducer: UseSelectProps<DropdownItem>['stateReducer'] = (state, { changes, type }) => {\n    if (!multiple) return changes\n\n    const { selectedItems, removeSelectedItem, addSelectedItem } = downshiftMultipleSelection\n\n    // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check\n    switch (type) {\n      case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:\n      case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:\n      case useSelect.stateChangeTypes.ItemClick:\n        if (changes.selectedItem != null) {\n          const isAlreadySelected = selectedItems.some(\n            selectedItem => selectedItem.value === changes.selectedItem?.value\n          )\n\n          if (isAlreadySelected) removeSelectedItem(changes.selectedItem)\n          else addSelectedItem(changes.selectedItem)\n        }\n\n        return {\n          ...changes,\n          isOpen: true, // keep the menu open after selection.\n          highlightedIndex: state.highlightedIndex, // preserve highlighted index position\n        }\n      default:\n        return changes\n    }\n  }\n\n  const downshift = useSelect<DropdownItem>({\n    items,\n    isItemDisabled: item => item.disabled,\n    itemToString: item => (item ? item.text : ''),\n    // a11y attributes\n    id,\n    labelId,\n    // Controlled open state\n    isOpen: open, // undefined must be passed for stateful behaviour (uncontrolled)\n    onIsOpenChange: ({ isOpen }) => {\n      if (isOpen != null) onOpenChange?.(isOpen)\n    },\n    initialIsOpen: defaultOpen ?? false,\n    stateReducer,\n    // Controlled mode (single selection)\n    selectedItem: value != null && !multiple ? itemsMap.get(value as string) || null : undefined,\n    initialSelectedItem:\n      (defaultValue != null || value != null) && !multiple\n        ? itemsMap.get(defaultValue as string) || null\n        : undefined,\n    onSelectedItemChange: ({ selectedItem }) => {\n      if (selectedItem?.value != null && !multiple) {\n        onValueChange?.(selectedItem?.value as OnChangeValueType)\n      }\n    },\n    /**\n     * 1. Downshift default behaviour is to scroll into view the highlighted item when the dropdown opens. This behaviour is not stable and scrolls the dropdown to the bottom of the screen.\n     */\n    scrollIntoView: node => {\n      if (node) {\n        node.scrollIntoView({ block: 'nearest' })\n      }\n\n      return undefined\n    },\n  })\n\n  return {\n    ...downshift,\n    ...downshiftMultipleSelection,\n    /** There is a Downshift bug in React 19, it duplicates some selectedItems */\n    selectedItems: [...new Set(downshiftMultipleSelection.selectedItems)],\n  }\n}\n","import { type FC, isValidElement, type ReactElement, type ReactNode, Children } from 'react'\n\nimport { type ItemProps } from './DropdownItem'\nimport { ItemTextProps } from './DropdownItemText'\nimport { type DropdownItem, type ItemsMap } from './types'\n\nexport function getIndexByKey(map: ItemsMap, targetKey: string) {\n  let index = 0\n  for (const [key] of map.entries()) {\n    if (key === targetKey) {\n      return index\n    }\n    index++\n  }\n\n  return -1\n}\n\nconst getKeyAtIndex = (map: ItemsMap, index: number) => {\n  let i = 0\n  for (const key of map.keys()) {\n    if (i === index) return key\n    i++\n  }\n\n  return undefined\n}\n\nexport const getElementByIndex = (map: ItemsMap, index: number) => {\n  const key = getKeyAtIndex(map, index)\n\n  return key !== undefined ? map.get(key) : undefined\n}\n\nconst getElementDisplayName = (element?: ReactElement) => {\n  return element ? (element.type as FC & { displayName?: string }).displayName : ''\n}\n\nexport const getOrderedItems = (\n  children: ReactNode,\n  result: DropdownItem[] = []\n): DropdownItem[] => {\n  Children.forEach(children, child => {\n    if (!isValidElement(child)) return\n\n    if (getElementDisplayName(child) === 'Dropdown.Item') {\n      const childProps = child.props as ItemProps\n      result.push({\n        value: childProps.value,\n        disabled: !!childProps.disabled,\n        text: getItemText(childProps.children),\n      })\n    }\n\n    if ((child.props as { children: ReactNode }).children) {\n      getOrderedItems((child.props as { children: ReactNode }).children, result)\n    }\n  })\n\n  return result\n}\n\n/**\n * If Dropdown.Item children:\n * - is a string, then the string is used.\n * - is JSX markup, then we look for Dropdown.ItemText to get its string value.\n */\nexport const getItemText = (children: ReactNode, itemText = ''): string => {\n  if (typeof children === 'string') {\n    return children\n  }\n\n  Children.forEach(children, child => {\n    if (!isValidElement(child)) return\n\n    if (getElementDisplayName(child) === 'Dropdown.ItemText') {\n      itemText = (child.props as ItemTextProps).children\n    }\n\n    if ((child.props as { children: ReactNode }).children) {\n      getItemText((child.props as { children: ReactNode }).children, itemText)\n    }\n  })\n\n  return itemText\n}\n\nexport const getItemsFromChildren = (children: ReactNode): ItemsMap => {\n  const newMap: ItemsMap = new Map()\n\n  getOrderedItems(children).forEach(itemData => {\n    newMap.set(itemData.value, itemData)\n  })\n\n  return newMap\n}\n\nexport const hasChildComponent = (children: ReactNode, displayName: string): boolean => {\n  return Children.toArray(children).some(child => {\n    if (!isValidElement(child)) return false\n\n    if (getElementDisplayName(child) === displayName) {\n      return true\n    } else if ((child.props as { children: ReactNode }).children) {\n      return hasChildComponent((child.props as { children: ReactNode }).children, displayName)\n    }\n\n    return false\n  })\n}\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport {\n  createContext,\n  Dispatch,\n  Fragment,\n  PropsWithChildren,\n  SetStateAction,\n  useContext,\n  useEffect,\n  useId,\n  useState,\n} from 'react'\n\nimport { Popover } from '../popover'\nimport { type DownshiftState, type DropdownItem, type ItemsMap } from './types'\nimport { useDropdown } from './useDropdown'\nimport { getElementByIndex, getItemsFromChildren, hasChildComponent } from './utils'\n\nexport interface DropdownContextState extends DownshiftState {\n  itemsMap: ItemsMap\n  highlightedItem: DropdownItem | undefined\n  hasPopover: boolean\n  setHasPopover: Dispatch<SetStateAction<boolean>>\n  multiple: boolean\n  disabled: boolean\n  readOnly: boolean\n  state?: 'error' | 'alert' | 'success'\n  lastInteractionType: 'mouse' | 'keyboard'\n  setLastInteractionType: (type: 'mouse' | 'keyboard') => void\n}\n\nexport type DropdownContextCommonProps = PropsWithChildren<{\n  /**\n   * The controlled open state of the select. Must be used in conjunction with `onOpenChange`.\n   */\n  open?: boolean\n  /**\n   * Event handler called when the open state of the select changes.\n   */\n  onOpenChange?: (isOpen: boolean) => void\n  /**\n   * The open state of the select when it is initially rendered. Use when you do not need to control its open state.\n   */\n  defaultOpen?: boolean\n  /**\n   * Use `state` prop to assign a specific state to the dropdown, choosing from: `error`, `alert` and `success`. By doing so, the outline styles will be updated.\n   */\n  state?: 'error' | 'alert' | 'success'\n  /**\n   * When true, prevents the user from interacting with the dropdown.\n   */\n  disabled?: boolean\n  /**\n   * Sets the dropdown as interactive or not.\n   */\n  readOnly?: boolean\n}>\n\ninterface DropdownPropsSingle {\n  /**\n   * Prop 'multiple' indicating whether multiple values are allowed.\n   */\n  multiple?: false\n  /**\n   * The value of the select when initially rendered. Use when you do not need to control the state of the select.\n   */\n  defaultValue?: string\n  /**\n   * The controlled value of the select. Should be used in conjunction with `onValueChange`.\n   */\n  value?: string\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string) => void\n}\n\ninterface DropdownPropsMultiple {\n  /**\n   * Prop 'multiple' indicating whether multiple values are allowed.\n   */\n  multiple: true\n  /**\n   * The value of the select when initially rendered. Use when you do not need to control the state of the select.\n   */\n  defaultValue?: string[]\n  /**\n   * The controlled value of the select. Should be used in conjunction with `onValueChange`.\n   */\n  value?: string[]\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string[]) => void\n}\n\nexport type DropdownContextProps = DropdownContextCommonProps &\n  (DropdownPropsSingle | DropdownPropsMultiple)\n\nconst DropdownContext = createContext<DropdownContextState | null>(null)\n\nexport const ID_PREFIX = ':dropdown'\n\nexport const DropdownProvider = ({\n  children,\n  defaultValue,\n  value,\n  onValueChange,\n  open,\n  onOpenChange,\n  defaultOpen,\n  multiple = false,\n  disabled: disabledProp = false,\n  readOnly: readOnlyProp = false,\n  state: stateProp,\n}: DropdownContextProps) => {\n  const [itemsMap, setItemsMap] = useState<ItemsMap>(getItemsFromChildren(children))\n  const [hasPopover, setHasPopover] = useState<boolean>(\n    hasChildComponent(children, 'Dropdown.Popover')\n  )\n  const [lastInteractionType, setLastInteractionType] = useState<'mouse' | 'keyboard'>('mouse')\n\n  const field = useFormFieldControl()\n\n  const state = field.state || stateProp\n\n  const internalFieldLabelID = `${ID_PREFIX}-label-${useId()}`\n  const internalFieldID = `${ID_PREFIX}-input-${useId()}`\n  const id = field.id || internalFieldID\n  const labelId = field.labelId || internalFieldLabelID\n\n  const disabled = field.disabled ?? disabledProp\n  const readOnly = field.readOnly ?? readOnlyProp\n\n  const dropdownState = useDropdown({\n    itemsMap,\n    defaultValue,\n    value,\n    onValueChange,\n    open,\n    onOpenChange,\n    defaultOpen,\n    multiple,\n    id,\n    labelId,\n  })\n\n  /**\n   * Indices in a Map are set when an element is added to the Map.\n   * If for some reason, in the Dropdown:\n   * - items order changes\n   * - items are added\n   * - items are removed\n   *\n   * The Map must be rebuilt from the new children in order to preserve logical indices.\n   *\n   * Downshift is heavily indices based for keyboard navigation, so it it important.\n   */\n  useEffect(() => {\n    const newMap = getItemsFromChildren(children)\n\n    const previousItems = [...itemsMap.values()]\n    const newItems = [...newMap.values()]\n\n    const hasItemsChanges =\n      previousItems.length !== newItems.length ||\n      previousItems.some((item, index) => {\n        const hasUpdatedValue = item.value !== newItems[index]?.value\n        const hasUpdatedText = item.text !== newItems[index]?.text\n\n        return hasUpdatedValue || hasUpdatedText\n      })\n\n    if (hasItemsChanges) {\n      setItemsMap(newMap)\n    }\n  }, [children])\n\n  /**\n   * Warning:\n   * Downshift is expecting the items list to always be rendered, as per a11y guidelines.\n   * This is why the `Popover` is always opened in this component, but visually hidden instead from Dropdown.Popover.\n   */\n  const [WrapperComponent, wrapperProps] = hasPopover ? [Popover, { open: true }] : [Fragment, {}]\n\n  return (\n    <DropdownContext.Provider\n      value={{\n        multiple,\n        disabled,\n        readOnly,\n        ...dropdownState,\n        itemsMap,\n        highlightedItem: getElementByIndex(itemsMap, dropdownState.highlightedIndex),\n        hasPopover,\n        setHasPopover,\n        state,\n        lastInteractionType,\n        setLastInteractionType,\n      }}\n    >\n      <WrapperComponent {...wrapperProps}>{children}</WrapperComponent>\n    </DropdownContext.Provider>\n  )\n}\n\nexport const useDropdownContext = () => {\n  const context = useContext(DropdownContext)\n\n  if (!context) {\n    throw Error('useDropdownContext must be used within a Dropdown provider')\n  }\n\n  return context\n}\n","import { type DropdownContextProps, DropdownProvider } from './DropdownContext'\n\nexport type DropdownProps = DropdownContextProps\n\nexport const Dropdown = ({ children, ...props }: DropdownProps) => {\n  return <DropdownProvider {...props}>{children}</DropdownProvider>\n}\n\nDropdown.displayName = 'Dropdown'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\ninterface DividerProps {\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Divider = ({ className, ref: forwardedRef }: DividerProps) => {\n  return <div ref={forwardedRef} className={cx('my-md border-b-sm border-outline', className)} />\n}\n\nDivider.displayName = 'Dropdown.Divider'\n","import { createContext, type PropsWithChildren, useContext, useId } from 'react'\n\nimport { ID_PREFIX } from './DropdownContext'\n\nexport interface DropdownContextState {\n  labelId: string\n}\n\ntype DropdownContextProps = PropsWithChildren\n\nconst DropdownGroupContext = createContext<DropdownContextState | null>(null)\n\nexport const DropdownGroupProvider = ({ children }: DropdownContextProps) => {\n  const labelId = `${ID_PREFIX}-group-label-${useId()}`\n\n  return (\n    <DropdownGroupContext.Provider value={{ labelId }}>{children}</DropdownGroupContext.Provider>\n  )\n}\n\nexport const useDropdownGroupContext = () => {\n  const context = useContext(DropdownGroupContext)\n\n  if (!context) {\n    throw Error('useDropdownGroupContext must be used within a DropdownGroup provider')\n  }\n\n  return context\n}\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { DropdownGroupProvider, useDropdownGroupContext } from './DropdownItemsGroupContext'\n\ninterface GroupProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Group = ({ children, ref: forwardedRef, ...props }: GroupProps) => {\n  return (\n    <DropdownGroupProvider>\n      <GroupContent ref={forwardedRef} {...props}>\n        {children}\n      </GroupContent>\n    </DropdownGroupProvider>\n  )\n}\n\nconst GroupContent = ({ children, className, ref: forwardedRef }: GroupProps) => {\n  const { labelId } = useDropdownGroupContext()\n\n  return (\n    <div ref={forwardedRef} role=\"group\" aria-labelledby={labelId} className={cx(className)}>\n      {children}\n    </div>\n  )\n}\n\nGroup.displayName = 'Dropdown.Group'\n","import {\n  createContext,\n  Dispatch,\n  type PropsWithChildren,\n  SetStateAction,\n  useContext,\n  useState,\n} from 'react'\n\nimport { useDropdownContext } from './DropdownContext'\nimport { DropdownItem } from './types'\nimport { getIndexByKey, getItemText } from './utils'\n\ntype ItemTextId = string | undefined\n\ninterface DropdownItemContextState {\n  textId: ItemTextId\n  setTextId: Dispatch<SetStateAction<ItemTextId>>\n  isSelected: boolean\n  itemData: DropdownItem\n  index: number\n  disabled: boolean\n}\n\nconst DropdownItemContext = createContext<DropdownItemContextState | null>(null)\n\nexport const DropdownItemProvider = ({\n  value,\n  disabled = false,\n  children,\n}: PropsWithChildren<{ value: string; disabled?: boolean }>) => {\n  const { multiple, itemsMap, selectedItem, selectedItems } = useDropdownContext()\n\n  const [textId, setTextId] = useState<ItemTextId>(undefined)\n\n  const index = getIndexByKey(itemsMap, value)\n  const itemData: DropdownItem = { disabled, value, text: getItemText(children) }\n\n  const isSelected = multiple\n    ? selectedItems.some(selectedItem => selectedItem.value === value)\n    : selectedItem?.value === value\n\n  return (\n    <DropdownItemContext.Provider\n      value={{ textId, setTextId, isSelected, itemData, index, disabled }}\n    >\n      {children}\n    </DropdownItemContext.Provider>\n  )\n}\n\nexport const useDropdownItemContext = () => {\n  const context = useContext(DropdownItemContext)\n\n  if (!context) {\n    throw Error('useDropdownItemContext must be used within a DropdownItem provider')\n  }\n\n  return context\n}\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cva, cx } from 'class-variance-authority'\nimport { type HTMLAttributes, type ReactNode, Ref } from 'react'\n\nimport { useDropdownContext } from './DropdownContext'\nimport { DropdownItemProvider, useDropdownItemContext } from './DropdownItemContext'\n\nexport interface ItemProps extends HTMLAttributes<HTMLLIElement> {\n  disabled?: boolean\n  value: string\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLLIElement>\n}\n\nexport const Item = ({ children, ref: forwardedRef, ...props }: ItemProps) => {\n  const { value, disabled } = props\n\n  return (\n    <DropdownItemProvider value={value} disabled={disabled}>\n      <ItemContent ref={forwardedRef} {...props}>\n        {children}\n      </ItemContent>\n    </DropdownItemProvider>\n  )\n}\n\nconst styles = cva('px-lg py-md text-body-1', {\n  variants: {\n    selected: {\n      true: 'font-bold',\n    },\n    disabled: {\n      true: 'opacity-dim-3 cursor-not-allowed',\n      false: 'cursor-pointer',\n    },\n    highlighted: {\n      true: '',\n    },\n    interactionType: {\n      mouse: '',\n      keyboard: '',\n    },\n  },\n  compoundVariants: [\n    {\n      highlighted: true,\n      interactionType: 'mouse',\n      class: 'bg-surface-hovered',\n    },\n    {\n      highlighted: true,\n      interactionType: 'keyboard',\n      class: 'u-outline',\n    },\n  ],\n})\n\nconst ItemContent = ({\n  className,\n  disabled = false,\n  value,\n  children,\n  ref: forwardedRef,\n}: ItemProps) => {\n  const { getItemProps, highlightedItem, lastInteractionType } = useDropdownContext()\n  const { textId, index, itemData, isSelected } = useDropdownItemContext()\n\n  const isHighlighted = highlightedItem?.value === value\n\n  const { ref: downshiftRef, ...downshiftItemProps } = getItemProps({ item: itemData, index })\n  const ref = useMergeRefs(forwardedRef, downshiftRef)\n\n  return (\n    <li\n      ref={ref}\n      className={cx(\n        styles({\n          selected: isSelected,\n          disabled,\n          highlighted: isHighlighted,\n          interactionType: lastInteractionType,\n          className,\n        })\n      )}\n      key={value}\n      {...downshiftItemProps}\n      aria-selected={isSelected}\n      aria-labelledby={textId}\n    >\n      {children}\n    </li>\n  )\n}\n\nItem.displayName = 'Dropdown.Item'\n","import { Check } from '@spark-ui/icons/Check'\nimport { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useDropdownItemContext } from './DropdownItemContext'\n\nexport interface ItemIndicatorProps {\n  children?: ReactNode\n  className?: string\n  label?: string\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ItemIndicator = ({\n  className,\n  children,\n  label,\n  ref: forwardedRef,\n}: ItemIndicatorProps) => {\n  const { disabled, isSelected } = useDropdownItemContext()\n\n  const childElement = children || (\n    <Icon size=\"sm\">\n      <Check aria-label={label} />\n    </Icon>\n  )\n\n  return (\n    <span\n      ref={forwardedRef}\n      className={cx('min-h-sz-16 min-w-sz-16 flex', disabled && 'opacity-dim-3', className)}\n    >\n      {isSelected && childElement}\n    </span>\n  )\n}\n\nItemIndicator.displayName = 'Dropdown.ItemIndicator'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ReactNode, Ref, useLayoutEffect, useRef } from 'react'\n\nimport { useDropdownContext } from './DropdownContext'\n\ninterface ItemsProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLUListElement>\n}\n\n/**\n * BUGFIX\n *\n * 1. The !pointer-events-auto class is needed to prevent a bug\n *    which cannot be reproduced when running Storybook locally,\n *    in scenarios such as when a Dropdown is nested within a Dialog,\n *    the \"props\" object, containing styles computed by Radix\n *    may erroneously contain \"pointerEvents = 'none'\", while the Dropdown is open,\n *    making it impossible to select a value using a pointer device\n */\n\nexport const Items = ({ children, className, ref: forwardedRef, ...props }: ItemsProps) => {\n  const { isOpen, getMenuProps, hasPopover, setLastInteractionType } = useDropdownContext()\n\n  const { ref: downshiftRef, ...downshiftMenuProps } = getMenuProps({\n    onMouseMove: () => {\n      setLastInteractionType('mouse')\n    },\n  })\n\n  const innerRef = useRef<HTMLElement>(null)\n\n  const ref = useMergeRefs(forwardedRef, downshiftRef, innerRef)\n\n  useLayoutEffect(() => {\n    if (!hasPopover) return\n    if (!innerRef.current) return\n\n    if (innerRef.current.parentElement) {\n      innerRef.current.parentElement.style.pointerEvents = isOpen ? '' : 'none'\n      innerRef.current.style.pointerEvents = isOpen ? '' : 'none'\n    }\n  }, [isOpen, hasPopover])\n\n  return (\n    <ul\n      ref={ref}\n      className={cx(\n        className,\n        'flex flex-col',\n        isOpen\n          ? 'pointer-events-auto! block' /* 1 */\n          : 'pointer-events-none invisible absolute opacity-0',\n        hasPopover && 'p-lg'\n      )}\n      {...props}\n      {...downshiftMenuProps}\n      /**\n       * When used inside a Radix dialog/drawer, the focus trap behaviour of Radix prevent scrolling and hovering inside absolutely positioned elements in the dialog.\n       * It does programatically in JS using the `style` attribute.\n       *\n       * Issue is known but there is no clear fix in sight: https://github.com/radix-ui/primitives/issues/1159\n       *\n       * A solution would be to make an abstraction of `Dialog.Overlay` instead of using the radix one, but that would mean managing body scroll freeze and scrollbar shifting ourselves.\n       *\n       */\n      data-spark-component=\"dropdown-items\"\n    >\n      {children}\n    </ul>\n  )\n}\n\nItems.displayName = 'Dropdown.Items'\n","import { cx } from 'class-variance-authority'\nimport { Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX } from './DropdownContext'\nimport { useDropdownItemContext } from './DropdownItemContext'\n\nexport interface ItemTextProps {\n  children: string\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ItemText = ({ children, ref: forwardedRef }: ItemTextProps) => {\n  const id = `${ID_PREFIX}-item-text-${useId()}`\n\n  const { setTextId } = useDropdownItemContext()\n\n  useEffect(() => {\n    setTextId(id)\n\n    return () => setTextId(undefined)\n  })\n\n  return (\n    <span id={id} className={cx('inline')} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nItemText.displayName = 'Dropdown.ItemText'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { useDropdownGroupContext } from './DropdownItemsGroupContext'\n\ninterface LabelProps {\n  children: string\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Label = ({ children, className, ref: forwardedRef }: LabelProps) => {\n  const { labelId } = useDropdownGroupContext()\n\n  return (\n    <div\n      ref={forwardedRef}\n      id={labelId}\n      className={cx('px-md py-sm text-body-2 text-neutral italic', className)}\n    >\n      {children}\n    </div>\n  )\n}\n\nLabel.displayName = 'Dropdown.Label'\n","import { ReactElement } from 'react'\n\nimport { Icon } from '../icon'\n\nexport const LeadingIcon = ({ children }: { children: ReactElement }) => {\n  return (\n    <Icon size={'sm'} className=\"shrink-0\">\n      {children}\n    </Icon>\n  )\n}\n\nLeadingIcon.displayName = 'Dropdown.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, useEffect } from 'react'\n\nimport { Popover as SparkPopover } from '../popover'\nimport { useDropdownContext } from './DropdownContext'\n\nexport const Popover = ({\n  children,\n  matchTriggerWidth = true,\n  sideOffset = 4,\n  className,\n  elevation = 'dropdown',\n  ref: forwardedRef,\n  ...props\n}: ComponentProps<typeof SparkPopover.Content>) => {\n  const ctx = useDropdownContext()\n\n  useEffect(() => {\n    ctx.setHasPopover(true)\n\n    return () => ctx.setHasPopover(false)\n  }, [])\n\n  return (\n    <SparkPopover.Content\n      ref={forwardedRef}\n      inset\n      asChild\n      matchTriggerWidth={matchTriggerWidth}\n      elevation={elevation}\n      className={cx('relative', className)}\n      sideOffset={sideOffset}\n      onOpenAutoFocus={e => {\n        /**\n         * With a combobox pattern, the focus should remain on the trigger at all times.\n         * Passing the focus to the dropdown popover would break keyboard navigation.\n         */\n        e.preventDefault()\n      }}\n      {...props}\n      data-spark-component=\"dropdown-popover\"\n    >\n      {children}\n    </SparkPopover.Content>\n  )\n}\n\nPopover.displayName = 'Dropdown.Popover'\n","import { ReactElement } from 'react'\n\nimport { Popover as SparkPopover } from '../popover'\n\nexport const Portal: typeof SparkPopover.Portal = ({ children, ...rest }): ReactElement => (\n  <SparkPopover.Portal {...rest}>{children}</SparkPopover.Portal>\n)\n\nPortal.displayName = 'Dropdown.Portal'\n","import { cva } from 'class-variance-authority'\n\nexport const styles = cva(\n  [\n    'flex w-full items-center justify-between',\n    'min-h-sz-44 rounded-lg bg-surface text-on-surface px-lg',\n    'text-body-1',\n    // outline styles\n    'ring-1 outline-hidden ring-inset focus:ring-2 focus:ring-focus',\n  ],\n  {\n    variants: {\n      state: {\n        undefined: 'ring-outline',\n        error: 'ring-error',\n        alert: 'ring-alert',\n        success: 'ring-success',\n      },\n      disabled: {\n        true: 'disabled:bg-on-surface/dim-5 cursor-not-allowed text-on-surface/dim-3',\n      },\n      readOnly: {\n        true: 'disabled:bg-on-surface/dim-5 cursor-not-allowed text-on-surface/dim-3',\n      },\n    },\n    compoundVariants: [\n      {\n        disabled: false,\n        state: undefined,\n        class: 'default:hover:ring-outline-high',\n      },\n    ],\n  }\n)\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ArrowHorizontalDown } from '@spark-ui/icons/ArrowHorizontalDown'\nimport { cx } from 'class-variance-authority'\nimport { Fragment, ReactNode, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { Popover } from '../popover'\nimport { VisuallyHidden } from '../visually-hidden'\nimport { useDropdownContext } from './DropdownContext'\nimport { styles } from './DropdownTrigger.styles'\n\ninterface TriggerProps {\n  'aria-label'?: string\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const Trigger = ({\n  'aria-label': ariaLabel,\n  children,\n  className,\n  ref: forwardedRef,\n}: TriggerProps) => {\n  const {\n    getToggleButtonProps,\n    getDropdownProps,\n    getLabelProps,\n    hasPopover,\n    disabled,\n    readOnly,\n    state,\n    setLastInteractionType,\n  } = useDropdownContext()\n\n  const [WrapperComponent, wrapperProps] = hasPopover\n    ? [Popover.Trigger, { asChild: true }]\n    : [Fragment, {}]\n\n  const { ref: downshiftRef, ...downshiftTriggerProps } = getToggleButtonProps({\n    ...getDropdownProps(),\n    onKeyDown: () => {\n      setLastInteractionType('keyboard')\n    },\n  })\n\n  const isExpanded = downshiftTriggerProps['aria-expanded']\n\n  const ref = useMergeRefs(forwardedRef, downshiftRef)\n\n  return (\n    <>\n      {ariaLabel && (\n        <VisuallyHidden>\n          <label {...getLabelProps()}>{ariaLabel}</label>\n        </VisuallyHidden>\n      )}\n      <WrapperComponent {...wrapperProps}>\n        <button\n          type=\"button\"\n          ref={ref}\n          disabled={disabled || readOnly}\n          className={styles({ className, state, disabled, readOnly })}\n          {...downshiftTriggerProps}\n          data-spark-component=\"dropdown-trigger\"\n        >\n          <span className=\"gap-md flex items-center justify-start\">{children}</span>\n\n          <Icon\n            className={cx('ml-md shrink-0 rotate-0 transition duration-100 ease-in', {\n              'rotate-180': isExpanded,\n            })}\n            size=\"sm\"\n          >\n            <ArrowHorizontalDown />\n          </Icon>\n        </button>\n      </WrapperComponent>\n    </>\n  )\n}\n\nTrigger.displayName = 'Dropdown.Trigger'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { useDropdownContext } from './DropdownContext'\n\nexport interface ValueProps {\n  children?: ReactNode\n  className?: string\n  placeholder: string\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const Value = ({ children, className, placeholder, ref: forwardedRef }: ValueProps) => {\n  const { selectedItem, multiple, selectedItems } = useDropdownContext()\n\n  const hasSelectedItems = !!(multiple ? selectedItems.length : selectedItem)\n  const text = multiple ? selectedItems[0]?.text : selectedItem?.text\n  const suffix = selectedItems.length > 1 ? `, +${selectedItems.length - 1}` : ''\n\n  return (\n    <span ref={forwardedRef} className={cx('flex shrink items-center text-left', className)}>\n      <span\n        className={cx(\n          'line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis',\n          !hasSelectedItems && 'text-on-surface/dim-1'\n        )}\n      >\n        {!hasSelectedItems ? placeholder : children || text}\n      </span>\n      {suffix && <span>{suffix}</span>}\n    </span>\n  )\n}\n\nValue.displayName = 'Dropdown.Value'\n","import { Dropdown as Root } from './Dropdown'\nimport { DropdownProvider, useDropdownContext } from './DropdownContext'\nimport { Divider } from './DropdownDivider'\nimport { Group } from './DropdownGroup'\nimport { Item } from './DropdownItem'\nimport { ItemIndicator } from './DropdownItemIndicator'\nimport { Items } from './DropdownItems'\nimport { ItemText } from './DropdownItemText'\nimport { Label } from './DropdownLabel'\nimport { LeadingIcon } from './DropdownLeadingIcon'\nimport { Popover } from './DropdownPopover'\nimport { Portal } from './DropdownPortal'\nimport { Trigger } from './DropdownTrigger'\nimport { Value } from './DropdownValue'\n\nexport { useDropdownContext, DropdownProvider }\n\nexport const Dropdown: typeof Root & {\n  Group: typeof Group\n  Item: typeof Item\n  Items: typeof Items\n  ItemText: typeof ItemText\n  ItemIndicator: typeof ItemIndicator\n  Label: typeof Label\n  Popover: typeof Popover\n  Divider: typeof Divider\n  Trigger: typeof Trigger\n  Value: typeof Value\n  LeadingIcon: typeof LeadingIcon\n  Portal: typeof Portal\n} = Object.assign(Root, {\n  Group,\n  Item,\n  Items,\n  ItemText,\n  ItemIndicator,\n  Label,\n  Popover,\n  Divider,\n  Trigger,\n  Value,\n  LeadingIcon,\n  Portal,\n})\n\nDropdown.displayName = 'Dropdown'\nGroup.displayName = 'Dropdown.Group'\nItems.displayName = 'Dropdown.Items'\nItem.displayName = 'Dropdown.Item'\nItemText.displayName = 'Dropdown.ItemText'\nItemIndicator.displayName = 'Dropdown.ItemIndicator'\nLabel.displayName = 'Dropdown.Label'\nPopover.displayName = 'Dropdown.Popover'\nDivider.displayName = 'Dropdown.Divider'\nTrigger.displayName = 'Dropdown.Trigger'\nValue.displayName = 'Dropdown.Value'\nLeadingIcon.displayName = 'Dropdown.LeadingIcon'\nPortal.displayName = 'Dropdown.Portal'\n"],"names":["useDropdown","itemsMap","defaultValue","value","onValueChange","open","onOpenChange","defaultOpen","multiple","id","labelId","items","downshiftMultipleSelection","useMultipleSelection","item","selectedItems","useSelect","isOpen","state","changes","type","removeSelectedItem","addSelectedItem","selectedItem","node","getIndexByKey","map","targetKey","index","key","getKeyAtIndex","i","getElementByIndex","getElementDisplayName","element","getOrderedItems","children","result","Children","child","isValidElement","childProps","getItemText","itemText","getItemsFromChildren","newMap","itemData","hasChildComponent","displayName","DropdownContext","createContext","ID_PREFIX","DropdownProvider","disabledProp","readOnlyProp","stateProp","setItemsMap","useState","hasPopover","setHasPopover","lastInteractionType","setLastInteractionType","field","useFormFieldControl","internalFieldLabelID","useId","internalFieldID","disabled","readOnly","dropdownState","useEffect","previousItems","newItems","hasUpdatedValue","hasUpdatedText","WrapperComponent","wrapperProps","Popover","Fragment","jsx","useDropdownContext","context","useContext","Dropdown","props","Divider","className","forwardedRef","cx","DropdownGroupContext","DropdownGroupProvider","useDropdownGroupContext","Group","GroupContent","DropdownItemContext","DropdownItemProvider","textId","setTextId","isSelected","useDropdownItemContext","Item","ItemContent","styles","cva","getItemProps","highlightedItem","isHighlighted","downshiftRef","downshiftItemProps","ref","useMergeRefs","ItemIndicator","label","childElement","Icon","Check","Items","getMenuProps","downshiftMenuProps","innerRef","useRef","useLayoutEffect","ItemText","Label","LeadingIcon","matchTriggerWidth","sideOffset","elevation","ctx","SparkPopover","e","Portal","rest","Trigger","ariaLabel","getToggleButtonProps","getDropdownProps","getLabelProps","downshiftTriggerProps","isExpanded","jsxs","VisuallyHidden","ArrowHorizontalDown","Value","placeholder","hasSelectedItems","text","suffix","Root"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/dropdown/useDropdown.ts","../../src/dropdown/utils.ts","../../src/dropdown/DropdownContext.tsx","../../src/dropdown/Dropdown.tsx","../../src/dropdown/DropdownDivider.tsx","../../src/dropdown/DropdownItemsGroupContext.tsx","../../src/dropdown/DropdownGroup.tsx","../../src/dropdown/DropdownItemContext.tsx","../../src/dropdown/DropdownItem.tsx","../../src/dropdown/DropdownItemIndicator.tsx","../../src/dropdown/DropdownItems.tsx","../../src/dropdown/DropdownItemText.tsx","../../src/dropdown/DropdownLabel.tsx","../../src/dropdown/DropdownLeadingIcon.tsx","../../src/dropdown/DropdownPopover.tsx","../../src/dropdown/DropdownPortal.tsx","../../src/dropdown/DropdownTrigger.styles.tsx","../../src/dropdown/DropdownTrigger.tsx","../../src/dropdown/DropdownValue.tsx","../../src/dropdown/index.ts"],"sourcesContent":["import { useMultipleSelection, useSelect, UseSelectProps } from 'downshift'\n\nimport { type DropdownItem, type ItemsMap } from './types'\n\ntype OnChangeValueType = string & string[]\n\nexport interface DownshiftProps {\n  itemsMap: ItemsMap\n  value: string | string[] | undefined\n  defaultValue: string | string[] | undefined\n  onValueChange: ((value: string) => void) | ((value: string[]) => void) | undefined\n  open: boolean | undefined\n  onOpenChange: ((isOpen: boolean) => void) | undefined\n  defaultOpen: boolean | undefined\n  multiple: boolean | undefined\n  id: string\n  labelId: string\n}\n\n/**\n * This hook abstract the complexity of using downshift with both single and multiple selection.\n */\nexport const useDropdown = ({\n  itemsMap,\n  defaultValue,\n  value,\n  onValueChange,\n  open,\n  onOpenChange,\n  defaultOpen,\n  multiple,\n  id,\n  labelId,\n}: DownshiftProps) => {\n  const items = [...itemsMap.values()]\n\n  const downshiftMultipleSelection = useMultipleSelection<DropdownItem>({\n    selectedItems:\n      value != null && multiple\n        ? items.filter(item =>\n            multiple ? (value as string[]).includes(item.value) : value === item.value\n          )\n        : undefined,\n    initialSelectedItems:\n      defaultValue != null && multiple\n        ? items.filter(item =>\n            multiple ? (defaultValue as string[]).includes(item.value) : defaultValue === item.value\n          )\n        : undefined,\n\n    onSelectedItemsChange: ({ selectedItems }) => {\n      if (selectedItems != null && multiple) {\n        onValueChange?.(selectedItems.map(item => item.value) as OnChangeValueType)\n      }\n    },\n  })\n\n  /**\n   * Custom state reducer for multiple selection behaviour:\n   * - keeps the component opened when the user selects an item\n   * - preserves the higlighted index when the user select an item\n   * - selected items can be unselected, even the last selected item (as opposed to single selection behaviour)\n   */\n  const stateReducer: UseSelectProps<DropdownItem>['stateReducer'] = (state, { changes, type }) => {\n    if (!multiple) return changes\n\n    const { selectedItems, removeSelectedItem, addSelectedItem } = downshiftMultipleSelection\n\n    // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check\n    switch (type) {\n      case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:\n      case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:\n      case useSelect.stateChangeTypes.ItemClick:\n        if (changes.selectedItem != null) {\n          const isAlreadySelected = selectedItems.some(\n            selectedItem => selectedItem.value === changes.selectedItem?.value\n          )\n\n          if (isAlreadySelected) removeSelectedItem(changes.selectedItem)\n          else addSelectedItem(changes.selectedItem)\n        }\n\n        return {\n          ...changes,\n          isOpen: true, // keep the menu open after selection.\n          highlightedIndex: state.highlightedIndex, // preserve highlighted index position\n        }\n      default:\n        return changes\n    }\n  }\n\n  const downshift = useSelect<DropdownItem>({\n    items,\n    isItemDisabled: item => item.disabled,\n    itemToString: item => (item ? item.text : ''),\n    // a11y attributes\n    id,\n    labelId,\n    // Controlled open state\n    isOpen: open, // undefined must be passed for stateful behaviour (uncontrolled)\n    onIsOpenChange: ({ isOpen }) => {\n      if (isOpen != null) onOpenChange?.(isOpen)\n    },\n    initialIsOpen: defaultOpen ?? false,\n    stateReducer,\n    // Controlled mode (single selection)\n    selectedItem: value != null && !multiple ? itemsMap.get(value as string) || null : undefined,\n    initialSelectedItem:\n      (defaultValue != null || value != null) && !multiple\n        ? itemsMap.get(defaultValue as string) || null\n        : undefined,\n    onSelectedItemChange: ({ selectedItem }) => {\n      if (selectedItem?.value != null && !multiple) {\n        onValueChange?.(selectedItem?.value as OnChangeValueType)\n      }\n    },\n    /**\n     * 1. Downshift default behaviour is to scroll into view the highlighted item when the dropdown opens. This behaviour is not stable and scrolls the dropdown to the bottom of the screen.\n     */\n    scrollIntoView: node => {\n      if (node) {\n        node.scrollIntoView({ block: 'nearest' })\n      }\n\n      return undefined\n    },\n  })\n\n  return {\n    ...downshift,\n    ...downshiftMultipleSelection,\n    /** There is a Downshift bug in React 19, it duplicates some selectedItems */\n    selectedItems: [...new Set(downshiftMultipleSelection.selectedItems)],\n  }\n}\n","import { type FC, isValidElement, type ReactElement, type ReactNode, Children } from 'react'\n\nimport { type ItemProps } from './DropdownItem'\nimport { ItemTextProps } from './DropdownItemText'\nimport { type DropdownItem, type ItemsMap } from './types'\n\nexport function getIndexByKey(map: ItemsMap, targetKey: string) {\n  let index = 0\n  for (const [key] of map.entries()) {\n    if (key === targetKey) {\n      return index\n    }\n    index++\n  }\n\n  return -1\n}\n\nconst getKeyAtIndex = (map: ItemsMap, index: number) => {\n  let i = 0\n  for (const key of map.keys()) {\n    if (i === index) return key\n    i++\n  }\n\n  return undefined\n}\n\nexport const getElementByIndex = (map: ItemsMap, index: number) => {\n  const key = getKeyAtIndex(map, index)\n\n  return key !== undefined ? map.get(key) : undefined\n}\n\nconst getElementDisplayName = (element?: ReactElement) => {\n  return element ? (element.type as FC & { displayName?: string }).displayName : ''\n}\n\nexport const getOrderedItems = (\n  children: ReactNode,\n  result: DropdownItem[] = []\n): DropdownItem[] => {\n  Children.forEach(children, child => {\n    if (!isValidElement(child)) return\n\n    if (getElementDisplayName(child) === 'Dropdown.Item') {\n      const childProps = child.props as ItemProps\n      result.push({\n        value: childProps.value,\n        disabled: !!childProps.disabled,\n        text: getItemText(childProps.children),\n      })\n    }\n\n    if ((child.props as { children: ReactNode }).children) {\n      getOrderedItems((child.props as { children: ReactNode }).children, result)\n    }\n  })\n\n  return result\n}\n\n/**\n * If Dropdown.Item children:\n * - is a string, then the string is used.\n * - is JSX markup, then we look for Dropdown.ItemText to get its string value.\n */\nexport const getItemText = (children: ReactNode, itemText = ''): string => {\n  if (typeof children === 'string') {\n    return children\n  }\n\n  Children.forEach(children, child => {\n    if (!isValidElement(child)) return\n\n    if (getElementDisplayName(child) === 'Dropdown.ItemText') {\n      itemText = (child.props as ItemTextProps).children\n    }\n\n    if ((child.props as { children: ReactNode }).children) {\n      getItemText((child.props as { children: ReactNode }).children, itemText)\n    }\n  })\n\n  return itemText\n}\n\nexport const getItemsFromChildren = (children: ReactNode): ItemsMap => {\n  const newMap: ItemsMap = new Map()\n\n  getOrderedItems(children).forEach(itemData => {\n    newMap.set(itemData.value, itemData)\n  })\n\n  return newMap\n}\n\nexport const hasChildComponent = (children: ReactNode, displayName: string): boolean => {\n  return Children.toArray(children).some(child => {\n    if (!isValidElement(child)) return false\n\n    if (getElementDisplayName(child) === displayName) {\n      return true\n    } else if ((child.props as { children: ReactNode }).children) {\n      return hasChildComponent((child.props as { children: ReactNode }).children, displayName)\n    }\n\n    return false\n  })\n}\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport {\n  createContext,\n  Dispatch,\n  Fragment,\n  PropsWithChildren,\n  SetStateAction,\n  useContext,\n  useEffect,\n  useId,\n  useState,\n} from 'react'\n\nimport { Popover } from '../popover'\nimport { type DownshiftState, type DropdownItem, type ItemsMap } from './types'\nimport { useDropdown } from './useDropdown'\nimport { getElementByIndex, getItemsFromChildren, hasChildComponent } from './utils'\n\nexport interface DropdownContextState extends DownshiftState {\n  itemsMap: ItemsMap\n  highlightedItem: DropdownItem | undefined\n  hasPopover: boolean\n  setHasPopover: Dispatch<SetStateAction<boolean>>\n  multiple: boolean\n  disabled: boolean\n  readOnly: boolean\n  state?: 'error' | 'alert' | 'success'\n  lastInteractionType: 'mouse' | 'keyboard'\n  setLastInteractionType: (type: 'mouse' | 'keyboard') => void\n}\n\nexport type DropdownContextCommonProps = PropsWithChildren<{\n  /**\n   * The controlled open state of the select. Must be used in conjunction with `onOpenChange`.\n   */\n  open?: boolean\n  /**\n   * Event handler called when the open state of the select changes.\n   */\n  onOpenChange?: (isOpen: boolean) => void\n  /**\n   * The open state of the select when it is initially rendered. Use when you do not need to control its open state.\n   */\n  defaultOpen?: boolean\n  /**\n   * Use `state` prop to assign a specific state to the dropdown, choosing from: `error`, `alert` and `success`. By doing so, the outline styles will be updated.\n   */\n  state?: 'error' | 'alert' | 'success'\n  /**\n   * When true, prevents the user from interacting with the dropdown.\n   */\n  disabled?: boolean\n  /**\n   * Sets the dropdown as interactive or not.\n   */\n  readOnly?: boolean\n}>\n\ninterface DropdownPropsSingle {\n  /**\n   * Prop 'multiple' indicating whether multiple values are allowed.\n   */\n  multiple?: false\n  /**\n   * The value of the select when initially rendered. Use when you do not need to control the state of the select.\n   */\n  defaultValue?: string\n  /**\n   * The controlled value of the select. Should be used in conjunction with `onValueChange`.\n   */\n  value?: string\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string) => void\n}\n\ninterface DropdownPropsMultiple {\n  /**\n   * Prop 'multiple' indicating whether multiple values are allowed.\n   */\n  multiple: true\n  /**\n   * The value of the select when initially rendered. Use when you do not need to control the state of the select.\n   */\n  defaultValue?: string[]\n  /**\n   * The controlled value of the select. Should be used in conjunction with `onValueChange`.\n   */\n  value?: string[]\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string[]) => void\n}\n\nexport type DropdownContextProps = DropdownContextCommonProps &\n  (DropdownPropsSingle | DropdownPropsMultiple)\n\nconst DropdownContext = createContext<DropdownContextState | null>(null)\n\nexport const ID_PREFIX = ':dropdown'\n\nexport const DropdownProvider = ({\n  children,\n  defaultValue,\n  value,\n  onValueChange,\n  open,\n  onOpenChange,\n  defaultOpen,\n  multiple = false,\n  disabled: disabledProp = false,\n  readOnly: readOnlyProp = false,\n  state: stateProp,\n}: DropdownContextProps) => {\n  const [itemsMap, setItemsMap] = useState<ItemsMap>(getItemsFromChildren(children))\n  const [hasPopover, setHasPopover] = useState<boolean>(\n    hasChildComponent(children, 'Dropdown.Popover')\n  )\n  const [lastInteractionType, setLastInteractionType] = useState<'mouse' | 'keyboard'>('mouse')\n\n  const field = useFormFieldControl()\n\n  const state = field.state || stateProp\n\n  const internalFieldLabelID = `${ID_PREFIX}-label-${useId()}`\n  const internalFieldID = `${ID_PREFIX}-input-${useId()}`\n  const id = field.id || internalFieldID\n  const labelId = field.labelId || internalFieldLabelID\n\n  const disabled = field.disabled ?? disabledProp\n  const readOnly = field.readOnly ?? readOnlyProp\n\n  const dropdownState = useDropdown({\n    itemsMap,\n    defaultValue,\n    value,\n    onValueChange,\n    open,\n    onOpenChange,\n    defaultOpen,\n    multiple,\n    id,\n    labelId,\n  })\n\n  /**\n   * Indices in a Map are set when an element is added to the Map.\n   * If for some reason, in the Dropdown:\n   * - items order changes\n   * - items are added\n   * - items are removed\n   *\n   * The Map must be rebuilt from the new children in order to preserve logical indices.\n   *\n   * Downshift is heavily indices based for keyboard navigation, so it it important.\n   */\n  useEffect(() => {\n    const newMap = getItemsFromChildren(children)\n\n    const previousItems = [...itemsMap.values()]\n    const newItems = [...newMap.values()]\n\n    const hasItemsChanges =\n      previousItems.length !== newItems.length ||\n      previousItems.some((item, index) => {\n        const hasUpdatedValue = item.value !== newItems[index]?.value\n        const hasUpdatedText = item.text !== newItems[index]?.text\n\n        return hasUpdatedValue || hasUpdatedText\n      })\n\n    if (hasItemsChanges) {\n      setItemsMap(newMap)\n    }\n  }, [children])\n\n  /**\n   * Warning:\n   * Downshift is expecting the items list to always be rendered, as per a11y guidelines.\n   * This is why the `Popover` is always opened in this component, but visually hidden instead from Dropdown.Popover.\n   */\n  const [WrapperComponent, wrapperProps] = hasPopover ? [Popover, { open: true }] : [Fragment, {}]\n\n  return (\n    <DropdownContext.Provider\n      value={{\n        multiple,\n        disabled,\n        readOnly,\n        ...dropdownState,\n        itemsMap,\n        highlightedItem: getElementByIndex(itemsMap, dropdownState.highlightedIndex),\n        hasPopover,\n        setHasPopover,\n        state,\n        lastInteractionType,\n        setLastInteractionType,\n      }}\n    >\n      <WrapperComponent {...wrapperProps}>{children}</WrapperComponent>\n    </DropdownContext.Provider>\n  )\n}\n\nexport const useDropdownContext = () => {\n  const context = useContext(DropdownContext)\n\n  if (!context) {\n    throw Error('useDropdownContext must be used within a Dropdown provider')\n  }\n\n  return context\n}\n","import { type DropdownContextProps, DropdownProvider } from './DropdownContext'\n\nexport type DropdownProps = DropdownContextProps\n\nexport const Dropdown = ({ children, ...props }: DropdownProps) => {\n  return <DropdownProvider {...props}>{children}</DropdownProvider>\n}\n\nDropdown.displayName = 'Dropdown'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\ninterface DividerProps {\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Divider = ({ className, ref: forwardedRef }: DividerProps) => {\n  return <div ref={forwardedRef} className={cx('my-md border-b-sm border-outline', className)} />\n}\n\nDivider.displayName = 'Dropdown.Divider'\n","import { createContext, type PropsWithChildren, useContext, useId } from 'react'\n\nimport { ID_PREFIX } from './DropdownContext'\n\nexport interface DropdownContextState {\n  labelId: string\n}\n\ntype DropdownContextProps = PropsWithChildren\n\nconst DropdownGroupContext = createContext<DropdownContextState | null>(null)\n\nexport const DropdownGroupProvider = ({ children }: DropdownContextProps) => {\n  const labelId = `${ID_PREFIX}-group-label-${useId()}`\n\n  return (\n    <DropdownGroupContext.Provider value={{ labelId }}>{children}</DropdownGroupContext.Provider>\n  )\n}\n\nexport const useDropdownGroupContext = () => {\n  const context = useContext(DropdownGroupContext)\n\n  if (!context) {\n    throw Error('useDropdownGroupContext must be used within a DropdownGroup provider')\n  }\n\n  return context\n}\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { DropdownGroupProvider, useDropdownGroupContext } from './DropdownItemsGroupContext'\n\ninterface GroupProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Group = ({ children, ref: forwardedRef, ...props }: GroupProps) => {\n  return (\n    <DropdownGroupProvider>\n      <GroupContent ref={forwardedRef} {...props}>\n        {children}\n      </GroupContent>\n    </DropdownGroupProvider>\n  )\n}\n\nconst GroupContent = ({ children, className, ref: forwardedRef }: GroupProps) => {\n  const { labelId } = useDropdownGroupContext()\n\n  return (\n    <div ref={forwardedRef} role=\"group\" aria-labelledby={labelId} className={cx(className)}>\n      {children}\n    </div>\n  )\n}\n\nGroup.displayName = 'Dropdown.Group'\n","import {\n  createContext,\n  Dispatch,\n  type PropsWithChildren,\n  SetStateAction,\n  useContext,\n  useState,\n} from 'react'\n\nimport { useDropdownContext } from './DropdownContext'\nimport { DropdownItem } from './types'\nimport { getIndexByKey, getItemText } from './utils'\n\ntype ItemTextId = string | undefined\n\ninterface DropdownItemContextState {\n  textId: ItemTextId\n  setTextId: Dispatch<SetStateAction<ItemTextId>>\n  isSelected: boolean\n  itemData: DropdownItem\n  index: number\n  disabled: boolean\n}\n\nconst DropdownItemContext = createContext<DropdownItemContextState | null>(null)\n\nexport const DropdownItemProvider = ({\n  value,\n  disabled = false,\n  children,\n}: PropsWithChildren<{ value: string; disabled?: boolean }>) => {\n  const { multiple, itemsMap, selectedItem, selectedItems } = useDropdownContext()\n\n  const [textId, setTextId] = useState<ItemTextId>(undefined)\n\n  const index = getIndexByKey(itemsMap, value)\n  const itemData: DropdownItem = { disabled, value, text: getItemText(children) }\n\n  const isSelected = multiple\n    ? selectedItems.some(selectedItem => selectedItem.value === value)\n    : selectedItem?.value === value\n\n  return (\n    <DropdownItemContext.Provider\n      value={{ textId, setTextId, isSelected, itemData, index, disabled }}\n    >\n      {children}\n    </DropdownItemContext.Provider>\n  )\n}\n\nexport const useDropdownItemContext = () => {\n  const context = useContext(DropdownItemContext)\n\n  if (!context) {\n    throw Error('useDropdownItemContext must be used within a DropdownItem provider')\n  }\n\n  return context\n}\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cva, cx } from 'class-variance-authority'\nimport { type HTMLAttributes, type ReactNode, Ref } from 'react'\n\nimport { useDropdownContext } from './DropdownContext'\nimport { DropdownItemProvider, useDropdownItemContext } from './DropdownItemContext'\n\nexport interface ItemProps extends HTMLAttributes<HTMLLIElement> {\n  disabled?: boolean\n  value: string\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLLIElement>\n}\n\nexport const Item = ({ children, ref: forwardedRef, ...props }: ItemProps) => {\n  const { value, disabled } = props\n\n  return (\n    <DropdownItemProvider value={value} disabled={disabled}>\n      <ItemContent ref={forwardedRef} {...props}>\n        {children}\n      </ItemContent>\n    </DropdownItemProvider>\n  )\n}\n\nconst styles = cva('px-lg py-md text-body-1', {\n  variants: {\n    selected: {\n      true: 'font-bold',\n    },\n    disabled: {\n      true: 'opacity-dim-3 cursor-not-allowed',\n      false: 'cursor-pointer',\n    },\n    highlighted: {\n      true: '',\n    },\n    interactionType: {\n      mouse: '',\n      keyboard: '',\n    },\n  },\n  compoundVariants: [\n    {\n      highlighted: true,\n      interactionType: 'mouse',\n      class: 'bg-surface-hovered',\n    },\n    {\n      highlighted: true,\n      interactionType: 'keyboard',\n      class: 'u-outline',\n    },\n  ],\n})\n\nconst ItemContent = ({\n  className,\n  disabled = false,\n  value,\n  children,\n  ref: forwardedRef,\n}: ItemProps) => {\n  const { getItemProps, highlightedItem, lastInteractionType } = useDropdownContext()\n  const { textId, index, itemData, isSelected } = useDropdownItemContext()\n\n  const isHighlighted = highlightedItem?.value === value\n\n  const { ref: downshiftRef, ...downshiftItemProps } = getItemProps({ item: itemData, index })\n  const ref = useMergeRefs(forwardedRef, downshiftRef)\n\n  return (\n    <li\n      ref={ref}\n      className={cx(\n        styles({\n          selected: isSelected,\n          disabled,\n          highlighted: isHighlighted,\n          interactionType: lastInteractionType,\n          className,\n        })\n      )}\n      key={value}\n      {...downshiftItemProps}\n      aria-selected={isSelected}\n      aria-labelledby={textId}\n    >\n      {children}\n    </li>\n  )\n}\n\nItem.displayName = 'Dropdown.Item'\n","import { Check } from '@spark-ui/icons/Check'\nimport { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useDropdownItemContext } from './DropdownItemContext'\n\nexport interface ItemIndicatorProps {\n  children?: ReactNode\n  className?: string\n  label?: string\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ItemIndicator = ({\n  className,\n  children,\n  label,\n  ref: forwardedRef,\n}: ItemIndicatorProps) => {\n  const { disabled, isSelected } = useDropdownItemContext()\n\n  const childElement = children || (\n    <Icon size=\"sm\">\n      <Check aria-label={label} />\n    </Icon>\n  )\n\n  return (\n    <span\n      ref={forwardedRef}\n      className={cx('min-h-sz-16 min-w-sz-16 flex', disabled && 'opacity-dim-3', className)}\n    >\n      {isSelected && childElement}\n    </span>\n  )\n}\n\nItemIndicator.displayName = 'Dropdown.ItemIndicator'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ReactNode, Ref, useLayoutEffect, useRef } from 'react'\n\nimport { useDropdownContext } from './DropdownContext'\n\ninterface ItemsProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLUListElement>\n}\n\n/**\n * BUGFIX\n *\n * 1. The !pointer-events-auto class is needed to prevent a bug\n *    which cannot be reproduced when running Storybook locally,\n *    in scenarios such as when a Dropdown is nested within a Dialog,\n *    the \"props\" object, containing styles computed by Radix\n *    may erroneously contain \"pointerEvents = 'none'\", while the Dropdown is open,\n *    making it impossible to select a value using a pointer device\n */\n\nexport const Items = ({ children, className, ref: forwardedRef, ...props }: ItemsProps) => {\n  const { isOpen, getMenuProps, hasPopover, setLastInteractionType } = useDropdownContext()\n\n  const { ref: downshiftRef, ...downshiftMenuProps } = getMenuProps({\n    onMouseMove: () => {\n      setLastInteractionType('mouse')\n    },\n  })\n\n  const innerRef = useRef<HTMLElement>(null)\n\n  const ref = useMergeRefs(forwardedRef, downshiftRef, innerRef)\n\n  useLayoutEffect(() => {\n    if (!hasPopover) return\n    if (!innerRef.current) return\n\n    if (innerRef.current.parentElement) {\n      innerRef.current.parentElement.style.pointerEvents = isOpen ? '' : 'none'\n      innerRef.current.style.pointerEvents = isOpen ? '' : 'none'\n    }\n  }, [isOpen, hasPopover])\n\n  return (\n    <ul\n      ref={ref}\n      className={cx(\n        className,\n        'flex flex-col',\n        isOpen\n          ? 'pointer-events-auto! block' /* 1 */\n          : 'pointer-events-none invisible absolute opacity-0',\n        hasPopover && 'p-lg'\n      )}\n      {...props}\n      {...downshiftMenuProps}\n      /**\n       * When used inside a Radix dialog/drawer, the focus trap behaviour of Radix prevent scrolling and hovering inside absolutely positioned elements in the dialog.\n       * It does programatically in JS using the `style` attribute.\n       *\n       * Issue is known but there is no clear fix in sight: https://github.com/radix-ui/primitives/issues/1159\n       *\n       * A solution would be to make an abstraction of `Dialog.Overlay` instead of using the radix one, but that would mean managing body scroll freeze and scrollbar shifting ourselves.\n       *\n       */\n      data-spark-component=\"dropdown-items\"\n    >\n      {children}\n    </ul>\n  )\n}\n\nItems.displayName = 'Dropdown.Items'\n","import { cx } from 'class-variance-authority'\nimport { Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX } from './DropdownContext'\nimport { useDropdownItemContext } from './DropdownItemContext'\n\nexport interface ItemTextProps {\n  children: string\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ItemText = ({ children, ref: forwardedRef }: ItemTextProps) => {\n  const id = `${ID_PREFIX}-item-text-${useId()}`\n\n  const { setTextId } = useDropdownItemContext()\n\n  useEffect(() => {\n    setTextId(id)\n\n    return () => setTextId(undefined)\n  })\n\n  return (\n    <span id={id} className={cx('inline')} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nItemText.displayName = 'Dropdown.ItemText'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { useDropdownGroupContext } from './DropdownItemsGroupContext'\n\ninterface LabelProps {\n  children: string\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Label = ({ children, className, ref: forwardedRef }: LabelProps) => {\n  const { labelId } = useDropdownGroupContext()\n\n  return (\n    <div\n      ref={forwardedRef}\n      id={labelId}\n      className={cx('px-md py-sm text-body-2 text-neutral italic', className)}\n    >\n      {children}\n    </div>\n  )\n}\n\nLabel.displayName = 'Dropdown.Label'\n","import { ReactElement } from 'react'\n\nimport { Icon } from '../icon'\n\nexport const LeadingIcon = ({ children }: { children: ReactElement }) => {\n  return (\n    <Icon size={'sm'} className=\"shrink-0\">\n      {children}\n    </Icon>\n  )\n}\n\nLeadingIcon.displayName = 'Dropdown.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, useEffect } from 'react'\n\nimport { Popover as SparkPopover } from '../popover'\nimport { useDropdownContext } from './DropdownContext'\n\nexport const Popover = ({\n  children,\n  matchTriggerWidth = true,\n  sideOffset = 4,\n  className,\n  elevation = 'dropdown',\n  ref: forwardedRef,\n  ...props\n}: ComponentProps<typeof SparkPopover.Content>) => {\n  const ctx = useDropdownContext()\n\n  useEffect(() => {\n    ctx.setHasPopover(true)\n\n    return () => ctx.setHasPopover(false)\n  }, [])\n\n  return (\n    <SparkPopover.Content\n      ref={forwardedRef}\n      inset\n      asChild\n      matchTriggerWidth={matchTriggerWidth}\n      elevation={elevation}\n      className={cx('relative', className)}\n      sideOffset={sideOffset}\n      onOpenAutoFocus={e => {\n        /**\n         * With a combobox pattern, the focus should remain on the trigger at all times.\n         * Passing the focus to the dropdown popover would break keyboard navigation.\n         */\n        e.preventDefault()\n      }}\n      {...props}\n      data-spark-component=\"dropdown-popover\"\n    >\n      {children}\n    </SparkPopover.Content>\n  )\n}\n\nPopover.displayName = 'Dropdown.Popover'\n","import { ReactElement } from 'react'\n\nimport { Popover as SparkPopover } from '../popover'\n\nexport const Portal: typeof SparkPopover.Portal = ({ children, ...rest }): ReactElement => (\n  <SparkPopover.Portal {...rest}>{children}</SparkPopover.Portal>\n)\n\nPortal.displayName = 'Dropdown.Portal'\n","import { cva } from 'class-variance-authority'\n\nexport const styles = cva(\n  [\n    'flex w-full items-center justify-between',\n    'min-h-sz-44 rounded-lg bg-surface text-on-surface px-lg',\n    'text-body-1',\n    // outline styles\n    'ring-1 outline-hidden ring-inset focus:ring-2 focus:ring-focus',\n  ],\n  {\n    variants: {\n      state: {\n        undefined: 'ring-outline',\n        error: 'ring-error',\n        alert: 'ring-alert',\n        success: 'ring-success',\n      },\n      disabled: {\n        true: 'disabled:bg-on-surface/dim-5 cursor-not-allowed text-on-surface/dim-3',\n      },\n      readOnly: {\n        true: 'disabled:bg-on-surface/dim-5 cursor-not-allowed text-on-surface/dim-3',\n      },\n    },\n    compoundVariants: [\n      {\n        disabled: false,\n        state: undefined,\n        class: 'default:hover:ring-outline-high',\n      },\n    ],\n  }\n)\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ArrowHorizontalDown } from '@spark-ui/icons/ArrowHorizontalDown'\nimport { cx } from 'class-variance-authority'\nimport { Fragment, ReactNode, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { Popover } from '../popover'\nimport { VisuallyHidden } from '../visually-hidden'\nimport { useDropdownContext } from './DropdownContext'\nimport { styles } from './DropdownTrigger.styles'\n\ninterface TriggerProps {\n  'aria-label'?: string\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const Trigger = ({\n  'aria-label': ariaLabel,\n  children,\n  className,\n  ref: forwardedRef,\n}: TriggerProps) => {\n  const {\n    getToggleButtonProps,\n    getDropdownProps,\n    getLabelProps,\n    hasPopover,\n    disabled,\n    readOnly,\n    state,\n    setLastInteractionType,\n  } = useDropdownContext()\n\n  const [WrapperComponent, wrapperProps] = hasPopover\n    ? [Popover.Trigger, { asChild: true }]\n    : [Fragment, {}]\n\n  const { ref: downshiftRef, ...downshiftTriggerProps } = getToggleButtonProps({\n    ...getDropdownProps(),\n    onKeyDown: () => {\n      setLastInteractionType('keyboard')\n    },\n  })\n\n  const isExpanded = downshiftTriggerProps['aria-expanded']\n\n  const ref = useMergeRefs(forwardedRef, downshiftRef)\n\n  return (\n    <>\n      {ariaLabel && (\n        <VisuallyHidden>\n          <label {...getLabelProps()}>{ariaLabel}</label>\n        </VisuallyHidden>\n      )}\n      <WrapperComponent {...wrapperProps}>\n        <button\n          type=\"button\"\n          ref={ref}\n          disabled={disabled || readOnly}\n          className={styles({ className, state, disabled, readOnly })}\n          {...downshiftTriggerProps}\n          data-spark-component=\"dropdown-trigger\"\n        >\n          <span className=\"gap-md flex items-center justify-start\">{children}</span>\n\n          <Icon\n            className={cx('ml-md shrink-0 rotate-0 transition duration-100 ease-in', {\n              'rotate-180': isExpanded,\n            })}\n            size=\"sm\"\n          >\n            <ArrowHorizontalDown />\n          </Icon>\n        </button>\n      </WrapperComponent>\n    </>\n  )\n}\n\nTrigger.displayName = 'Dropdown.Trigger'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { useDropdownContext } from './DropdownContext'\n\nexport interface ValueProps {\n  children?: ReactNode\n  className?: string\n  placeholder: string\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const Value = ({ children, className, placeholder, ref: forwardedRef }: ValueProps) => {\n  const { selectedItem, multiple, selectedItems } = useDropdownContext()\n\n  const hasSelectedItems = !!(multiple ? selectedItems.length : selectedItem)\n  const text = multiple ? selectedItems[0]?.text : selectedItem?.text\n  const suffix = selectedItems.length > 1 ? `, +${selectedItems.length - 1}` : ''\n\n  return (\n    <span ref={forwardedRef} className={cx('flex shrink items-center text-left', className)}>\n      <span\n        className={cx(\n          'line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis',\n          !hasSelectedItems && 'text-on-surface/dim-1'\n        )}\n      >\n        {!hasSelectedItems ? placeholder : children || text}\n      </span>\n      {suffix && <span>{suffix}</span>}\n    </span>\n  )\n}\n\nValue.displayName = 'Dropdown.Value'\n","import { Dropdown as Root } from './Dropdown'\nimport { DropdownProvider, useDropdownContext } from './DropdownContext'\nimport { Divider } from './DropdownDivider'\nimport { Group } from './DropdownGroup'\nimport { Item } from './DropdownItem'\nimport { ItemIndicator } from './DropdownItemIndicator'\nimport { Items } from './DropdownItems'\nimport { ItemText } from './DropdownItemText'\nimport { Label } from './DropdownLabel'\nimport { LeadingIcon } from './DropdownLeadingIcon'\nimport { Popover } from './DropdownPopover'\nimport { Portal } from './DropdownPortal'\nimport { Trigger } from './DropdownTrigger'\nimport { Value } from './DropdownValue'\n\nexport { useDropdownContext, DropdownProvider }\n\nexport const Dropdown: typeof Root & {\n  Group: typeof Group\n  Item: typeof Item\n  Items: typeof Items\n  ItemText: typeof ItemText\n  ItemIndicator: typeof ItemIndicator\n  Label: typeof Label\n  Popover: typeof Popover\n  Divider: typeof Divider\n  Trigger: typeof Trigger\n  Value: typeof Value\n  LeadingIcon: typeof LeadingIcon\n  Portal: typeof Portal\n} = Object.assign(Root, {\n  Group,\n  Item,\n  Items,\n  ItemText,\n  ItemIndicator,\n  Label,\n  Popover,\n  Divider,\n  Trigger,\n  Value,\n  LeadingIcon,\n  Portal,\n})\n\nDropdown.displayName = 'Dropdown'\nGroup.displayName = 'Dropdown.Group'\nItems.displayName = 'Dropdown.Items'\nItem.displayName = 'Dropdown.Item'\nItemText.displayName = 'Dropdown.ItemText'\nItemIndicator.displayName = 'Dropdown.ItemIndicator'\nLabel.displayName = 'Dropdown.Label'\nPopover.displayName = 'Dropdown.Popover'\nDivider.displayName = 'Dropdown.Divider'\nTrigger.displayName = 'Dropdown.Trigger'\nValue.displayName = 'Dropdown.Value'\nLeadingIcon.displayName = 'Dropdown.LeadingIcon'\nPortal.displayName = 'Dropdown.Portal'\n"],"mappings":";;;;;;;;;;;;AAsBA,IAAa,KAAe,EAC1B,aACA,iBACA,UACA,kBACA,SACA,iBACA,gBACA,aACA,OACA,iBACoB;CACpB,IAAM,IAAQ,CAAC,GAAG,EAAS,QAAQ,CAAC,EAE9B,IAA6B,EAAmC;EACpE,eACE,KAAS,QAAQ,IACb,EAAM,QAAO,MACX,IAAY,EAAmB,SAAS,EAAK,MAAM,GAAG,MAAU,EAAK,MACtE,GACD,KAAA;EACN,sBACE,KAAgB,QAAQ,IACpB,EAAM,QAAO,MACX,IAAY,EAA0B,SAAS,EAAK,MAAM,GAAG,MAAiB,EAAK,MACpF,GACD,KAAA;EAEN,wBAAwB,EAAE,uBAAoB;AAC5C,GAAI,KAAiB,QAAQ,KAC3B,IAAgB,EAAc,KAAI,MAAQ,EAAK,MAAM,CAAsB;;EAGhF,CAAC;AA0EF,QAAO;EACL,GAtCgB,EAAwB;GACxC;GACA,iBAAgB,MAAQ,EAAK;GAC7B,eAAc,MAAS,IAAO,EAAK,OAAO;GAE1C;GACA;GAEA,QAAQ;GACR,iBAAiB,EAAE,gBAAa;AAC9B,IAAI,KAAU,QAAM,IAAe,EAAO;;GAE5C,eAAe,KAAe;GAC9B,eA1CkE,GAAO,EAAE,YAAS,cAAW;AAC/F,QAAI,CAAC,EAAU,QAAO;IAEtB,IAAM,EAAE,kBAAe,uBAAoB,uBAAoB;AAG/D,YAAQ,GAAR;KACE,KAAK,EAAU,iBAAiB;KAChC,KAAK,EAAU,iBAAiB;KAChC,KAAK,EAAU,iBAAiB,UAU9B,QATI,EAAQ,gBAAgB,SACA,EAAc,MACtC,MAAgB,EAAa,UAAU,EAAQ,cAAc,MAC9D,GAEsB,EAAmB,EAAQ,aAAa,GAC1D,EAAgB,EAAQ,aAAa,GAGrC;MACL,GAAG;MACH,QAAQ;MACR,kBAAkB,EAAM;MACzB;KACH,QACE,QAAO;;;GAmBX,cAAc,KAAS,QAAQ,CAAC,IAAW,EAAS,IAAI,EAAgB,IAAI,OAAO,KAAA;GACnF,sBACG,KAAgB,QAAQ,KAAS,SAAS,CAAC,IACxC,EAAS,IAAI,EAAuB,IAAI,OACxC,KAAA;GACN,uBAAuB,EAAE,sBAAmB;AAC1C,IAAI,GAAc,SAAS,QAAQ,CAAC,KAClC,IAAgB,GAAc,MAA2B;;GAM7D,iBAAgB,MAAQ;AACtB,IAAI,KACF,EAAK,eAAe,EAAE,OAAO,WAAW,CAAC;;GAK9C,CAAC;EAIA,GAAG;EAEH,eAAe,CAAC,GAAG,IAAI,IAAI,EAA2B,cAAc,CAAC;EACtE;;;;AChIH,SAAgB,EAAc,GAAe,GAAmB;CAC9D,IAAI,IAAQ;AACZ,MAAK,IAAM,CAAC,MAAQ,EAAI,SAAS,EAAE;AACjC,MAAI,MAAQ,EACV,QAAO;AAET;;AAGF,QAAO;;AAGT,IAAM,KAAiB,GAAe,MAAkB;CACtD,IAAI,IAAI;AACR,MAAK,IAAM,KAAO,EAAI,MAAM,EAAE;AAC5B,MAAI,MAAM,EAAO,QAAO;AACxB;;GAMS,KAAqB,GAAe,MAAkB;CACjE,IAAM,IAAM,EAAc,GAAK,EAAM;AAErC,QAAO,MAAQ,KAAA,IAA2B,KAAA,IAAf,EAAI,IAAI,EAAI;GAGnC,KAAyB,MACtB,IAAW,EAAQ,KAAuC,cAAc,IAGpE,KACX,GACA,IAAyB,EAAE,MAE3B,EAAS,QAAQ,IAAU,MAAS;AAC7B,OAAe,EAAM,EAE1B;MAAI,EAAsB,EAAM,KAAK,iBAAiB;GACpD,IAAM,IAAa,EAAM;AACzB,KAAO,KAAK;IACV,OAAO,EAAW;IAClB,UAAU,CAAC,CAAC,EAAW;IACvB,MAAM,EAAY,EAAW,SAAS;IACvC,CAAC;;AAGJ,EAAK,EAAM,MAAkC,YAC3C,EAAiB,EAAM,MAAkC,UAAU,EAAO;;EAE5E,EAEK,IAQI,KAAe,GAAqB,IAAW,OACtD,OAAO,KAAa,WACf,KAGT,EAAS,QAAQ,IAAU,MAAS;AAC7B,GAAe,EAAM,KAEtB,EAAsB,EAAM,KAAK,wBACnC,IAAY,EAAM,MAAwB,WAGvC,EAAM,MAAkC,YAC3C,EAAa,EAAM,MAAkC,UAAU,EAAS;EAE1E,EAEK,IAGI,KAAwB,MAAkC;CACrE,IAAM,oBAAmB,IAAI,KAAK;AAMlC,QAJA,EAAgB,EAAS,CAAC,SAAQ,MAAY;AAC5C,IAAO,IAAI,EAAS,OAAO,EAAS;GACpC,EAEK;GAGI,KAAqB,GAAqB,MAC9C,EAAS,QAAQ,EAAS,CAAC,MAAK,MAChC,EAAe,EAAM,GAEtB,EAAsB,EAAM,KAAK,IAC5B,KACG,EAAM,MAAkC,WAC3C,EAAmB,EAAM,MAAkC,UAAU,EAAY,GAGnF,KAR4B,GASnC,ECTE,IAAkB,EAA2C,KAAK,EAE3D,IAAY,aAEZ,KAAoB,EAC/B,aACA,iBACA,UACA,kBACA,SACA,iBACA,gBACA,cAAW,IACX,UAAU,IAAe,IACzB,UAAU,IAAe,IACzB,OAAO,QACmB;CAC1B,IAAM,CAAC,GAAU,KAAe,EAAmB,EAAqB,EAAS,CAAC,EAC5E,CAAC,GAAY,KAAiB,EAClC,EAAkB,GAAU,mBAAmB,CAChD,EACK,CAAC,GAAqB,KAA0B,EAA+B,QAAQ,EAEvF,IAAQ,GAAqB,EAE7B,IAAQ,EAAM,SAAS,GAEvB,IAAuB,GAAG,EAAU,SAAS,GAAO,IACpD,IAAkB,GAAG,EAAU,SAAS,GAAO,IAC/C,IAAK,EAAM,MAAM,GACjB,IAAU,EAAM,WAAW,GAE3B,IAAW,EAAM,YAAY,GAC7B,IAAW,EAAM,YAAY,GAE7B,IAAgB,EAAY;EAChC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAaF,SAAgB;EACd,IAAM,IAAS,EAAqB,EAAS,EAEvC,IAAgB,CAAC,GAAG,EAAS,QAAQ,CAAC,EACtC,IAAW,CAAC,GAAG,EAAO,QAAQ,CAAC;AAWrC,GARE,EAAc,WAAW,EAAS,UAClC,EAAc,MAAM,GAAM,MAAU;GAClC,IAAM,IAAkB,EAAK,UAAU,EAAS,IAAQ,OAClD,IAAiB,EAAK,SAAS,EAAS,IAAQ;AAEtD,UAAO,KAAmB;IAC1B,KAGF,EAAY,EAAO;IAEpB,CAAC,EAAS,CAAC;CAOd,IAAM,CAAC,GAAkB,KAAgB,IAAa,CAAC,GAAS,EAAE,MAAM,IAAM,CAAC,GAAG,CAAC,GAAU,EAAE,CAAC;AAEhG,QACE,kBAAC,EAAgB,UAAjB;EACE,OAAO;GACL;GACA;GACA;GACA,GAAG;GACH;GACA,iBAAiB,EAAkB,GAAU,EAAc,iBAAiB;GAC5E;GACA;GACA;GACA;GACA;GACD;YAED,kBAAC,GAAD;GAAkB,GAAI;GAAe;GAA4B,CAAA;EACxC,CAAA;GAIlB,UAA2B;CACtC,IAAM,IAAU,EAAW,EAAgB;AAE3C,KAAI,CAAC,EACH,OAAM,MAAM,6DAA6D;AAG3E,QAAO;GCjNI,KAAY,EAAE,aAAU,GAAG,QAC/B,kBAAC,GAAD;CAAkB,GAAI;CAAQ;CAA4B,CAAA;AAGnE,EAAS,cAAc;;;ACAvB,IAAa,KAAW,EAAE,cAAW,KAAK,QACjC,kBAAC,OAAD;CAAK,KAAK;CAAc,WAAW,EAAG,oCAAoC,EAAU;CAAI,CAAA;AAGjG,EAAQ,cAAc;;;ACFtB,IAAM,IAAuB,EAA2C,KAAK,EAEhE,KAAyB,EAAE,kBAAqC;CAC3E,IAAM,IAAU,GAAG,EAAU,eAAe,GAAO;AAEnD,QACE,kBAAC,EAAqB,UAAtB;EAA+B,OAAO,EAAE,YAAS;EAAG;EAAyC,CAAA;GAIpF,UAAgC;CAC3C,IAAM,IAAU,EAAW,EAAqB;AAEhD,KAAI,CAAC,EACH,OAAM,MAAM,uEAAuE;AAGrF,QAAO;GChBI,KAAS,EAAE,aAAU,KAAK,GAAc,GAAG,QAEpD,kBAAC,GAAD,EAAA,UACE,kBAAC,IAAD;CAAc,KAAK;CAAc,GAAI;CAClC;CACY,CAAA,EACO,CAAA,EAItB,MAAgB,EAAE,aAAU,cAAW,KAAK,QAA+B;CAC/E,IAAM,EAAE,eAAY,GAAyB;AAE7C,QACE,kBAAC,OAAD;EAAK,KAAK;EAAc,MAAK;EAAQ,mBAAiB;EAAS,WAAW,EAAG,EAAU;EACpF;EACG,CAAA;;AAIV,EAAM,cAAc;;;ACPpB,IAAM,KAAsB,EAA+C,KAAK,EAEnE,MAAwB,EACnC,UACA,cAAW,IACX,kBAC8D;CAC9D,IAAM,EAAE,aAAU,aAAU,iBAAc,qBAAkB,GAAoB,EAE1E,CAAC,GAAQ,KAAa,EAAqB,KAAA,EAAU,EAErD,IAAQ,EAAc,GAAU,EAAM,EACtC,IAAyB;EAAE;EAAU;EAAO,MAAM,EAAY,EAAS;EAAE,EAEzE,IAAa,IACf,EAAc,MAAK,MAAgB,EAAa,UAAU,EAAM,GAChE,GAAc,UAAU;AAE5B,QACE,kBAAC,GAAoB,UAArB;EACE,OAAO;GAAE;GAAQ;GAAW;GAAY;GAAU;GAAO;GAAU;EAElE;EAC4B,CAAA;GAItB,UAA+B;CAC1C,IAAM,IAAU,EAAW,GAAoB;AAE/C,KAAI,CAAC,EACH,OAAM,MAAM,qEAAqE;AAGnF,QAAO;GC3CI,KAAQ,EAAE,aAAU,KAAK,GAAc,GAAG,QAAuB;CAC5E,IAAM,EAAE,UAAO,gBAAa;AAE5B,QACE,kBAAC,IAAD;EAA6B;EAAiB;YAC5C,kBAAC,IAAD;GAAa,KAAK;GAAc,GAAI;GACjC;GACW,CAAA;EACO,CAAA;GAIrB,KAAS,EAAI,2BAA2B;CAC5C,UAAU;EACR,UAAU,EACR,MAAM,aACP;EACD,UAAU;GACR,MAAM;GACN,OAAO;GACR;EACD,aAAa,EACX,MAAM,IACP;EACD,iBAAiB;GACf,OAAO;GACP,UAAU;GACX;EACF;CACD,kBAAkB,CAChB;EACE,aAAa;EACb,iBAAiB;EACjB,OAAO;EACR,EACD;EACE,aAAa;EACb,iBAAiB;EACjB,OAAO;EACR,CACF;CACF,CAAC,EAEI,MAAe,EACnB,cACA,cAAW,IACX,UACA,aACA,KAAK,QACU;CACf,IAAM,EAAE,iBAAc,oBAAiB,2BAAwB,GAAoB,EAC7E,EAAE,WAAQ,UAAO,aAAU,kBAAe,GAAwB,EAElE,IAAgB,GAAiB,UAAU,GAE3C,EAAE,KAAK,GAAc,GAAG,MAAuB,EAAa;EAAE,MAAM;EAAU;EAAO,CAAC;AAG5F,QACE,kBAAC,MAAD;EACO,KAJG,EAAa,GAAc,EAAa;EAKhD,WAAW,EACT,GAAO;GACL,UAAU;GACV;GACA,aAAa;GACb,iBAAiB;GACjB;GACD,CAAC,CACH;EAED,GAAI;EACJ,iBAAe;EACf,mBAAiB;EAEhB;EACE,EANE,EAMF;;AAIT,EAAK,cAAc;;;ACjFnB,IAAa,KAAiB,EAC5B,cACA,aACA,UACA,KAAK,QACmB;CACxB,IAAM,EAAE,aAAU,kBAAe,GAAwB,EAEnD,IAAe,KACnB,kBAAC,GAAD;EAAM,MAAK;YACT,kBAAC,GAAD,EAAO,cAAY,GAAS,CAAA;EACvB,CAAA;AAGT,QACE,kBAAC,QAAD;EACE,KAAK;EACL,WAAW,EAAG,gCAAgC,KAAY,iBAAiB,EAAU;YAEpF,KAAc;EACV,CAAA;;AAIX,EAAc,cAAc;;;ACf5B,IAAa,KAAS,EAAE,aAAU,cAAW,KAAK,GAAc,GAAG,QAAwB;CACzF,IAAM,EAAE,WAAQ,iBAAc,eAAY,8BAA2B,GAAoB,EAEnF,EAAE,KAAK,GAAc,GAAG,MAAuB,EAAa,EAChE,mBAAmB;AACjB,IAAuB,QAAQ;IAElC,CAAC,EAEI,IAAW,EAAoB,KAAK,EAEpC,IAAM,EAAa,GAAc,GAAc,EAAS;AAY9D,QAVA,QAAsB;AACf,OACA,EAAS,WAEV,EAAS,QAAQ,kBACnB,EAAS,QAAQ,cAAc,MAAM,gBAAgB,IAAS,KAAK,QACnE,EAAS,QAAQ,MAAM,gBAAgB,IAAS,KAAK;IAEtD,CAAC,GAAQ,EAAW,CAAC,EAGtB,kBAAC,MAAD;EACO;EACL,WAAW,EACT,GACA,iBACA,IACI,+BACA,oDACJ,KAAc,OACf;EACD,GAAI;EACJ,GAAI;EAUJ,wBAAqB;EAEpB;EACE,CAAA;;AAIT,EAAM,cAAc;;;AChEpB,IAAa,KAAY,EAAE,aAAU,KAAK,QAAkC;CAC1E,IAAM,IAAK,GAAG,EAAU,aAAa,GAAO,IAEtC,EAAE,iBAAc,GAAwB;AAQ9C,QANA,SACE,EAAU,EAAG,QAEA,EAAU,KAAA,EAAU,EACjC,EAGA,kBAAC,QAAD;EAAU;EAAI,WAAW,EAAG,SAAS;EAAE,KAAK;EACzC;EACI,CAAA;;AAIX,EAAS,cAAc;;;AClBvB,IAAa,KAAS,EAAE,aAAU,cAAW,KAAK,QAA+B;CAC/E,IAAM,EAAE,eAAY,GAAyB;AAE7C,QACE,kBAAC,OAAD;EACE,KAAK;EACL,IAAI;EACJ,WAAW,EAAG,+CAA+C,EAAU;EAEtE;EACG,CAAA;;AAIV,EAAM,cAAc;;;ACrBpB,IAAa,KAAe,EAAE,kBAE1B,kBAAC,GAAD;CAAM,MAAM;CAAM,WAAU;CACzB;CACI,CAAA;AAIX,EAAY,cAAc;;;ACN1B,IAAa,KAAW,EACtB,aACA,uBAAoB,IACpB,gBAAa,GACb,cACA,eAAY,YACZ,KAAK,GACL,GAAG,QAC8C;CACjD,IAAM,IAAM,GAAoB;AAQhC,QANA,SACE,EAAI,cAAc,GAAK,QAEV,EAAI,cAAc,GAAM,GACpC,EAAE,CAAC,EAGJ,kBAAC,EAAa,SAAd;EACE,KAAK;EACL,OAAA;EACA,SAAA;EACmB;EACR;EACX,WAAW,EAAG,YAAY,EAAU;EACxB;EACZ,kBAAiB,MAAK;AAKpB,KAAE,gBAAgB;;EAEpB,GAAI;EACJ,wBAAqB;EAEpB;EACoB,CAAA;;AAI3B,EAAQ,cAAc;;;AC3CtB,IAAa,KAAsC,EAAE,aAAU,GAAG,QAChE,kBAAC,EAAa,QAAd;CAAqB,GAAI;CAAO;CAA+B,CAAA;AAGjE,EAAO,cAAc;;;ACNrB,IAAa,KAAS,EACpB;CACE;CACA;CACA;CAEA;CACD,EACD;CACE,UAAU;EACR,OAAO;GACL,WAAW;GACX,OAAO;GACP,OAAO;GACP,SAAS;GACV;EACD,UAAU,EACR,MAAM,yEACP;EACD,UAAU,EACR,MAAM,yEACP;EACF;CACD,kBAAkB,CAChB;EACE,UAAU;EACV,OAAO,KAAA;EACP,OAAO;EACR,CACF;CACF,CACF,ECfY,KAAW,EACtB,cAAc,GACd,aACA,cACA,KAAK,QACa;CAClB,IAAM,EACJ,yBACA,qBACA,kBACA,eACA,aACA,aACA,UACA,8BACE,GAAoB,EAElB,CAAC,GAAkB,KAAgB,IACrC,CAAC,EAAQ,SAAS,EAAE,SAAS,IAAM,CAAC,GACpC,CAAC,GAAU,EAAE,CAAC,EAEZ,EAAE,KAAK,GAAc,GAAG,MAA0B,EAAqB;EAC3E,GAAG,GAAkB;EACrB,iBAAiB;AACf,KAAuB,WAAW;;EAErC,CAAC,EAEI,IAAa,EAAsB,kBAEnC,IAAM,EAAa,GAAc,EAAa;AAEpD,QACE,kBAAA,GAAA,EAAA,UAAA,CACG,KACC,kBAAC,GAAD,EAAA,UACE,kBAAC,SAAD;EAAO,GAAI,GAAe;YAAG;EAAkB,CAAA,EAChC,CAAA,EAEnB,kBAAC,GAAD;EAAkB,GAAI;YACpB,kBAAC,UAAD;GACE,MAAK;GACA;GACL,UAAU,KAAY;GACtB,WAAW,GAAO;IAAE;IAAW;IAAO;IAAU;IAAU,CAAC;GAC3D,GAAI;GACJ,wBAAqB;aANvB,CAQE,kBAAC,QAAD;IAAM,WAAU;IAA0C;IAAgB,CAAA,EAE1E,kBAAC,GAAD;IACE,WAAW,EAAG,2DAA2D,EACvE,cAAc,GACf,CAAC;IACF,MAAK;cAEL,kBAAC,GAAD,EAAuB,CAAA;IAClB,CAAA,CACA;;EACQ,CAAA,CAClB,EAAA,CAAA;;AAIP,EAAQ,cAAc;;;ACtEtB,IAAa,KAAS,EAAE,aAAU,cAAW,gBAAa,KAAK,QAA+B;CAC5F,IAAM,EAAE,iBAAc,aAAU,qBAAkB,GAAoB,EAEhE,IAAmB,CAAC,EAAE,IAAW,EAAc,SAAS,IACxD,IAAO,IAAW,EAAc,IAAI,OAAO,GAAc,MACzD,IAAS,EAAc,SAAS,IAAI,MAAM,EAAc,SAAS,MAAM;AAE7E,QACE,kBAAC,QAAD;EAAM,KAAK;EAAc,WAAW,EAAG,sCAAsC,EAAU;YAAvF,CACE,kBAAC,QAAD;GACE,WAAW,EACT,+DACA,CAAC,KAAoB,wBACtB;aAEC,IAAiC,KAAY,IAA1B;GAChB,CAAA,EACN,KAAU,kBAAC,QAAD,EAAA,UAAO,GAAc,CAAA,CAC3B;;;AAIX,EAAM,cAAc;;;ACjBpB,IAAa,KAaT,OAAO,OAAO,GAAM;CACtB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,CAAC;AAEF,GAAS,cAAc,YACvB,EAAM,cAAc,kBACpB,EAAM,cAAc,kBACpB,EAAK,cAAc,iBACnB,EAAS,cAAc,qBACvB,EAAc,cAAc,0BAC5B,EAAM,cAAc,kBACpB,EAAQ,cAAc,oBACtB,EAAQ,cAAc,oBACtB,EAAQ,cAAc,oBACtB,EAAM,cAAc,kBACpB,EAAY,cAAc,wBAC1B,EAAO,cAAc"}

package/dist/file-upload/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),me=require("@spark-ui/components/form-field"),f=require("react"),pe=require("@spark-ui/hooks/use-combined-state"),ge=require("@spark-ui/icons/CvOutline"),ve=require("@spark-ui/icons/FilePdfOutline"),xe=require("@spark-ui/icons/ImageOutline"),Fe=require("@spark-ui/icons/PlayOutline"),w=require("class-variance-authority"),H=require("../Icon-C-cNTnzd.js"),be=require("../progress/index.js"),se=require("@spark-ui/icons/Close"),ae=require("../IconButton-BR1bJSQA.js"),he=require("@spark-ui/icons/WarningOutline"),ne=require("../Button-FZceRWG2.js"),ye=require("../Slot-DQ8z2zsy.js"),T={TOO_MANY_FILES:"TOO_MANY_FILES",FILE_INVALID_TYPE:"FILE_INVALID_TYPE",FILE_TOO_LARGE:"FILE_TOO_LARGE",FILE_TOO_SMALL:"FILE_TOO_SMALL",FILE_INVALID:"FILE_INVALID",FILE_EXISTS:"FILE_EXISTS"};function ie(t,r){return r?r.split(",").map(e=>e.trim()).some(e=>{if(e.includes("/")){if(e.endsWith("/*")){const c=e.slice(0,-2);return t.type.startsWith(c+"/")}return t.type===e}if(e.startsWith(".")){const c=e.toLowerCase();return t.name.toLowerCase().endsWith(c)}const l="."+e.toLowerCase();return t.name.toLowerCase().endsWith(l)}):!0}function Ie(t,r,n,e){const l=e||le();return r!==void 0&&t.size<r?{valid:!1,error:`File "${t.name}" is too small. Minimum size is ${B(r,l)}.`}:n!==void 0&&t.size>n?{valid:!1,error:`File "${t.name}" is too large. Maximum size is ${B(n,l)}.`}:{valid:!0}}function le(){return typeof navigator<"u"&&navigator.language?navigator.language:"en"}function B(t,r){const n=r||le();let e=n;if(n.length===2&&(e=n==="fr"?"fr-FR":"en-US"),t===0)return new Intl.NumberFormat(e,{style:"unit",unit:"byte",unitDisplay:"long",minimumFractionDigits:0,maximumFractionDigits:0}).format(0);const l=1024,d=Math.floor(Math.log(t)/Math.log(l)),a=["byte","kilobyte","megabyte","gigabyte"][d]||"byte",o=t/Math.pow(l,d),i=d===0?"long":"short";return new Intl.NumberFormat(e,{style:"unit",unit:a,unitDisplay:i,minimumFractionDigits:0,maximumFractionDigits:2}).format(o)}function je(t){const r=t.type.toLowerCase(),n=t.name.toLowerCase();return r.startsWith("image/")||/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(n)?f.createElement(xe.ImageOutline):r==="application/pdf"||n.endsWith(".pdf")?f.createElement(ve.FilePdfOutline):r.startsWith("video/")||/\.(mp4|avi|mov|wmv|flv|webm|mkv)$/i.test(n)?f.createElement(Fe.PlayOutline):f.createElement(ge.CvOutline)}function Re(t){if(!t)return!1;if(t.tabIndex>=0)return!0;const n=String(t.contentEditable)==="true";return t instanceof HTMLInputElement||t instanceof HTMLButtonElement||t instanceof HTMLSelectElement||t instanceof HTMLTextAreaElement||t instanceof HTMLAnchorElement&&!!t.href||n}function oe(t,r){for(const n of t)if(Re(n))return n;return r.current?r.current:null}function Le({defaultValue:t=[],value:r,onFileAccept:n,onFileReject:e,onFileChange:l,multiple:d=!0,accept:c,maxFiles:a,maxFileSize:o,minFileSize:i,disabled:p=!1,readOnly:v=!1,locale:E}){const m=E||(typeof navigator<"u"&&navigator.language?navigator.language:"en"),[N,g]=pe.useCombinedState(r,t),u=N??[],I=g,[b,x]=f.useState([]),U=O=>{if(p||v)return;x([]);const D=[],k=(R,L)=>L.some(y=>y.name===R.name&&y.size===R.size),h=(R,L)=>{const y=D.find(A=>A.file.name===R.name&&A.file.size===R.size);y?y.errors.includes(L)||y.errors.push(L):D.push({file:R,errors:[L]})};I(R=>{const L=R??[],y=a!==void 0?a-L.length:void 0;y!==void 0&&y<=0&&O.forEach(F=>{h(F,T.TOO_MANY_FILES)});let A=O;c&&(O.filter(_=>!ie(_,c)).forEach(_=>{h(_,T.FILE_INVALID_TYPE)}),A=O.filter(_=>ie(_,c)));let $=A;(i!==void 0||o!==void 0)&&($=A.filter(F=>Ie(F,i,o,m).valid?!0:(o!==void 0&&F.size>o?h(F,T.FILE_TOO_LARGE):i!==void 0&&F.size<i?h(F,T.FILE_TOO_SMALL):h(F,T.FILE_INVALID),!1)));const Y=new Map,P=$.filter(F=>{const _=`${F.name}-${F.size}`;return k(F,L)||Y.has(_)?(h(F,T.FILE_EXISTS),!1):(Y.set(_,F),!0)});let C=d?P:P.slice(0,1);y!==void 0&&(y<=0?C=[]:C.length>y&&(C.forEach(F=>{h(F,T.TOO_MANY_FILES)}),C=[]));const re=d?[...L,...C]:C,V=[...D];return x(V),C.length>0&&n&&n({files:C}),V.length>0&&e&&e({files:V}),l&&l({acceptedFiles:re,rejectedFiles:V}),re})},z=O=>{p||v||I(D=>{const h=(D??[]).filter((L,y)=>y!==O);let R=b;return a!==void 0&&h.length<a&&(R=b.filter(L=>!L.errors.includes(T.TOO_MANY_FILES)),x(R)),l&&l({acceptedFiles:h,rejectedFiles:R}),h})},j=()=>{p||v||(I([]),x([]),l&&l({acceptedFiles:[],rejectedFiles:[]}))},W=O=>{p||v||x(D=>D.filter((k,h)=>h!==O))},S=()=>{x([])},M=a!==void 0&&u.length>=a;return{files:u,rejectedFiles:b,addFiles:U,removeFile:z,removeRejectedFile:W,clearFiles:j,clearRejectedFiles:S,maxFilesReached:M}}const ce=f.createContext(null),Ee=":file-upload",de=({asChild:t=!1,children:r,defaultValue:n=[],value:e,onFileAccept:l,onFileReject:d,onFileChange:c,multiple:a=!0,accept:o,maxFiles:i,maxFileSize:p,minFileSize:v,disabled:E=!1,readOnly:m=!1,locale:N})=>{const g=me.useFormFieldControl(),u=f.useId(),I=g.id||`${Ee}-${u}`,b=g.name,x=f.useRef(null),U=f.useRef(null),z=f.useRef(null),j=f.useRef([]),W=f.useRef([]),S=g.disabled??E,M=g.readOnly??m,{files:O,rejectedFiles:D,addFiles:k,removeFile:h,removeRejectedFile:R,clearFiles:L,clearRejectedFiles:y,maxFilesReached:A}=Le({defaultValue:n,value:e,onFileAccept:l,onFileReject:d,onFileChange:c,multiple:a,accept:o,maxFiles:i,maxFileSize:p,minFileSize:v,disabled:S,readOnly:M,locale:N}),$=()=>{L(),j.current=[]},Y=()=>{y(),W.current=[]};return s.jsx(ce.Provider,{value:{inputRef:x,files:O,rejectedFiles:D,addFiles:k,removeFile:h,removeRejectedFile:R,clearFiles:$,clearRejectedFiles:Y,triggerRef:U,dropzoneRef:z,deleteButtonRefs:j,rejectedFileDeleteButtonRefs:W,multiple:a,maxFiles:i,maxFilesReached:A,disabled:S,readOnly:M,locale:N||(typeof navigator<"u"&&navigator.language?navigator.language:"en"),description:g.description,isInvalid:g.isInvalid,isRequired:g.isRequired},children:s.jsxs("div",{className:"relative",children:[r,s.jsx("input",{ref:x,type:"file",tabIndex:-1,id:I,multiple:a,name:b,accept:o,disabled:S,readOnly:M&&!S,required:g.isRequired,"aria-invalid":g.isInvalid,"aria-describedby":g.description,"aria-label":g.labelId?void 0:"Upload files",className:"sr-only",onChange:P=>{if(P.target.files&&!S&&!M){k(Array.from(P.target.files));try{P.target.value=""}catch{}}}})]})})};de.displayName="FileUpload";const q=()=>{const t=f.useContext(ce);if(!t)throw Error("useFileUploadContext must be used within a FileUpload provider");return t},X=({className:t,file:r,onClick:n,...e})=>{const{removeFile:l,triggerRef:d,dropzoneRef:c,deleteButtonRefs:a,inputRef:o,disabled:i,readOnly:p,files:v}=q(),E=f.useRef(null),m=v.findIndex(u=>u.name===r.name&&u.size===r.size),N=u=>{i||p||(l(m),requestAnimationFrame(()=>{const I=a.current.filter(Boolean);if(I.length>0){const b=Math.min(m,I.length-1),x=I[b];x&&x.focus()}else{const b=oe([d.current,c.current],o);b&&b.focus()}}),n?.(u))},g=u=>{if(E.current=u,u){for(;a.current.length<=m;)a.current.push(null);a.current[m]=u}else a.current[m]&&(a.current[m]=null)};return s.jsx(ae.IconButton,{ref:g,"data-spark-component":"file-upload-item-delete-trigger",className:w.cx(t),onClick:N,disabled:i||p,size:"sm",design:"contrast",intent:"surface",...e,children:s.jsx(H.Icon,{size:"sm",children:s.jsx(se.Close,{})})})};X.displayName="FileUpload.ItemDeleteTrigger";const K=({className:t,file:r,uploadProgress:n,deleteButtonAriaLabel:e,progressAriaLabel:l,...d})=>{const{locale:c}=q(),[a,o]=f.useState(n!==void 0);f.useEffect(()=>{o(n!==void 0)},[n]);const i=f.useCallback(()=>{o(!1)},[]);return s.jsxs("li",{"data-spark-component":"file-upload-accepted-file",className:w.cx("relative","default:bg-surface default:border-sm default:border-outline default:p-md default:rounded-md","gap-md flex items-center justify-between default:w-full",t),...d,children:[s.jsx("div",{className:"size-sz-36 bg-support-container flex items-center justify-center rounded-md",children:s.jsx(H.Icon,{size:"md",children:je(r)})}),s.jsxs("div",{className:"gap-md relative flex min-w-0 flex-1 flex-row items-center justify-between self-stretch",children:[s.jsx("p",{className:"text-body-2 truncate font-medium",children:r.name}),s.jsx("p",{className:"text-caption opacity-dim-1",children:B(r.size,c)}),a&&n!==void 0&&s.jsx("div",{className:"absolute bottom-0 left-0 w-full",children:s.jsx(be.Progress,{value:n,max:100,"aria-label":l,onComplete:i})})]}),s.jsx(X,{"aria-label":e,file:r})]})};K.displayName="FileUpload.AcceptedFile";const J=({children:t})=>{const{files:r=[],rejectedFiles:n=[],locale:e}=q();return s.jsx(s.Fragment,{children:t({acceptedFiles:r,rejectedFiles:n,formatFileSize:B,locale:e})})};J.displayName="FileUpload.Context";const ue=f.createContext(!1),Ne=()=>f.useContext(ue);function Q({children:t,className:r,unstyled:n=!1}){const e=q(),l=f.useRef(null);if(!e)throw new Error("FileUploadDropzone must be used inside <FileUpload>");const d=i=>{if(i.preventDefault(),i.stopPropagation(),i.currentTarget.setAttribute("data-drag-over","false"),e.disabled||e.readOnly)return;const p=i.dataTransfer.files;let v=[];p&&(v=Array.isArray(p)?[...p]:Array.from(p)),v.length>0&&e.addFiles(v)},c=()=>{!e.disabled&&!e.readOnly&&e.inputRef.current?.click()},a=i=>{(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),!e.disabled&&!e.readOnly&&e.inputRef.current?.click())},o=e.disabled||e.readOnly;return s.jsx(ue.Provider,{value:!0,children:s.jsx("div",{ref:i=>{l.current=i,e.dropzoneRef&&(e.dropzoneRef.current=i)},role:"button",tabIndex:o?-1:0,"aria-disabled":e.disabled?!0:void 0,"aria-describedby":e.description,"aria-invalid":e.isInvalid,"aria-required":e.isRequired,onClick:c,onKeyDown:a,onDrop:d,onDragOver:i=>{i.preventDefault()},className:n?r:w.cx("default:bg-surface default:border-sm default:border-outline default:relative default:rounded-lg default:border-dashed","gap-lg flex flex-col items-center justify-center text-center","default:p-xl","transition-colors duration-200",!o&&"default:hover:bg-surface-hovered","data-[drag-over=true]:border-outline-high data-[drag-over=true]:bg-surface-hovered data-[drag-over=true]:border-solid",e.disabled&&"cursor-not-allowed opacity-50",e.readOnly&&!e.disabled&&"cursor-default",r),onDragEnter:i=>{o||i.currentTarget.setAttribute("data-drag-over","true")},onDragLeave:i=>{i.currentTarget.setAttribute("data-drag-over","false")},children:t})})}Q.displayName="FileUploadDropzone";const Z=({className:t,file:r,fallback:n="📄",...e})=>{const[l,d]=f.useState(!1),[c,a]=f.useState(!1),o=r.type.startsWith("image/"),i=o?URL.createObjectURL(r):null;return f.useEffect(()=>()=>{i&&URL.revokeObjectURL(i)},[i]),!o||l?s.jsx("div",{"data-spark-component":"file-upload-preview-image",className:w.cx("bg-neutral-container flex items-center justify-center rounded-md",t),...e,children:n}):s.jsxs("div",{"data-spark-component":"file-upload-preview-image",className:w.cx("bg-neutral-container overflow-hidden",t),...e,children:[s.jsx("img",{src:i,alt:r.name,className:w.cx("size-full object-cover",!c&&"opacity-0"),onLoad:()=>a(!0),onError:()=>d(!0)}),!c&&s.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:n})]})};Z.displayName="FileUpload.PreviewImage";const G=({className:t,rejectedFile:r,onClick:n,...e})=>{const{removeRejectedFile:l,triggerRef:d,dropzoneRef:c,rejectedFileDeleteButtonRefs:a,inputRef:o,disabled:i,readOnly:p,rejectedFiles:v}=q(),E=f.useRef(null),m=v.findIndex(u=>u.file.name===r.file.name&&u.file.size===r.file.size),N=u=>{i||p||(l(m),requestAnimationFrame(()=>{const I=a.current.filter(Boolean);if(I.length>0){const b=Math.min(m,I.length-1),x=I[b];x&&x.focus()}else{const b=oe([d.current,c.current],o);b&&b.focus()}}),n?.(u))},g=u=>{if(E.current=u,u){for(;a.current.length<=m;)a.current.push(null);a.current[m]=u}else a.current[m]&&(a.current[m]=null)};return s.jsx(ae.IconButton,{ref:g,"data-spark-component":"file-upload-rejected-file-delete-trigger",className:w.cx(t),onClick:N,disabled:i||p,size:"sm",design:"contrast",intent:"surface",...e,children:s.jsx(H.Icon,{size:"sm",children:s.jsx(se.Close,{})})})};G.displayName="FileUpload.RejectedFileDeleteTrigger";const ee=({className:t,rejectedFile:r,renderError:n,deleteButtonAriaLabel:e,...l})=>{const{locale:d}=q();return s.jsxs("li",{"data-spark-component":"file-upload-rejected-file",className:w.cx("relative","default:bg-surface default:border-sm default:border-outline default:p-md default:rounded-md","gap-md flex items-center justify-between default:w-full","border-error border-md",t),...l,children:[s.jsx("div",{className:"size-sz-36 bg-error-container flex items-center justify-center rounded-md",children:s.jsx(H.Icon,{size:"md",className:"text-error",children:s.jsx(he.WarningOutline,{})})}),s.jsx("div",{className:"min-w-0 flex-1",children:s.jsxs("div",{className:"gap-md flex flex-col",children:[s.jsxs("div",{className:"gap-md flex flex-row items-center justify-between",children:[s.jsx("p",{className:"text-body-2 truncate font-medium",children:r.file.name}),s.jsx("p",{className:"text-caption opacity-dim-1",children:B(r.file.size,d)})]}),s.jsx("div",{className:"gap-xs flex flex-col",children:r.errors.map((c,a)=>s.jsx("div",{className:"text-caption text-error","data-error-code":c,children:n(c)},a))})]})}),s.jsx(G,{"aria-label":e,rejectedFile:r})]})};ee.displayName="FileUpload.RejectedFile";const te=({className:t,children:r,asChild:n=!1,unstyled:e=!1,design:l="filled",intent:d="support",size:c="md",shape:a="rounded",ref:o,...i})=>{const{inputRef:p,triggerRef:v,disabled:E,readOnly:m,description:N,isInvalid:g,isRequired:u}=q(),I=Ne(),b=j=>{j.stopPropagation(),j.preventDefault(),!E&&!m&&p.current?.click()},x=j=>{v&&(v.current=j),o&&(typeof o=="function"?o(j):o.current=j)};let U,z;if(I){U="span";const j=e?t:ne.buttonStyles({design:l,intent:d,size:c,shape:a,disabled:E||m,className:t});z={ref:x,"data-spark-component":"file-upload-trigger",className:j}}else{const j=e?"button":ne.Button;U=n?ye.Slot:j,z={ref:x,type:"button",design:l,intent:d,size:c,shape:a,"data-spark-component":"file-upload-trigger",className:w.cx(t),disabled:E||m,onClick:b,"aria-describedby":N,"aria-invalid":g,"aria-required":u,...i}}return s.jsx(U,{...z,children:r})};te.displayName="FileUpload.Trigger";const fe=Object.assign(de,{Trigger:te,Dropzone:Q,Context:J,AcceptedFile:K,RejectedFile:ee,PreviewImage:Z,ItemDeleteTrigger:X,RejectedFileDeleteTrigger:G});fe.displayName="FileUpload";te.displayName="FileUpload.Trigger";Q.displayName="FileUpload.Dropzone";J.displayName="FileUpload.Context";X.displayName="FileUpload.ItemDeleteTrigger";Z.displayName="FileUpload.PreviewImage";K.displayName="FileUpload.AcceptedFile";ee.displayName="FileUpload.RejectedFile";G.displayName="FileUpload.RejectedFileDeleteTrigger";exports.FILE_UPLOAD_ERRORS=T;exports.FileUpload=fe;
-//# sourceMappingURL=index.js.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../chunk-C91j1N6u.js`),t=require(`../slot/index.js`),n=require(`../icon-CRPcdgYp.js`),r=require(`../button-BTDRzvpB.js`),i=require(`../icon-button-CykysbgJ.js`),a=require(`../progress-rJZcPJsZ.js`);let o=require(`class-variance-authority`),s=require(`react`);s=e.t(s);let c=require(`react/jsx-runtime`),l=require(`@spark-ui/components/form-field`),u=require(`@spark-ui/hooks/use-combined-state`),d=require(`@spark-ui/icons/Close`),f=require(`@spark-ui/icons/CvOutline`),p=require(`@spark-ui/icons/FilePdfOutline`),m=require(`@spark-ui/icons/ImageOutline`),h=require(`@spark-ui/icons/PlayOutline`),g=require(`@spark-ui/icons/WarningOutline`);var _={TOO_MANY_FILES:`TOO_MANY_FILES`,FILE_INVALID_TYPE:`FILE_INVALID_TYPE`,FILE_TOO_LARGE:`FILE_TOO_LARGE`,FILE_TOO_SMALL:`FILE_TOO_SMALL`,FILE_INVALID:`FILE_INVALID`,FILE_EXISTS:`FILE_EXISTS`};function v(e,t){return t?t.split(`,`).map(e=>e.trim()).some(t=>{if(t.includes(`/`)){if(t.endsWith(`/*`)){let n=t.slice(0,-2);return e.type.startsWith(n+`/`)}return e.type===t}if(t.startsWith(`.`)){let n=t.toLowerCase();return e.name.toLowerCase().endsWith(n)}let n=`.`+t.toLowerCase();return e.name.toLowerCase().endsWith(n)}):!0}function y(e,t,n,r){let i=r||b();return t!==void 0&&e.size<t?{valid:!1,error:`File "${e.name}" is too small. Minimum size is ${x(t,i)}.`}:n!==void 0&&e.size>n?{valid:!1,error:`File "${e.name}" is too large. Maximum size is ${x(n,i)}.`}:{valid:!0}}function b(){return typeof navigator<`u`&&navigator.language?navigator.language:`en`}function x(e,t){let n=t||b(),r=n;if(n.length===2&&(r=n===`fr`?`fr-FR`:`en-US`),e===0)return new Intl.NumberFormat(r,{style:`unit`,unit:`byte`,unitDisplay:`long`,minimumFractionDigits:0,maximumFractionDigits:0}).format(0);let i=1024,a=Math.floor(Math.log(e)/Math.log(i)),o=[`byte`,`kilobyte`,`megabyte`,`gigabyte`][a]||`byte`,s=e/i**+a,c=a===0?`long`:`short`;return new Intl.NumberFormat(r,{style:`unit`,unit:o,unitDisplay:c,minimumFractionDigits:0,maximumFractionDigits:2}).format(s)}function S(e){let t=e.type.toLowerCase(),n=e.name.toLowerCase();return t.startsWith(`image/`)||/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(n)?(0,s.createElement)(m.ImageOutline):t===`application/pdf`||n.endsWith(`.pdf`)?(0,s.createElement)(p.FilePdfOutline):t.startsWith(`video/`)||/\.(mp4|avi|mov|wmv|flv|webm|mkv)$/i.test(n)?(0,s.createElement)(h.PlayOutline):(0,s.createElement)(f.CvOutline)}function C(e){if(!e)return!1;if(e.tabIndex>=0)return!0;let t=String(e.contentEditable)===`true`;return e instanceof HTMLInputElement||e instanceof HTMLButtonElement||e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement||e instanceof HTMLAnchorElement&&!!e.href||t}function w(e,t){for(let t of e)if(C(t))return t;return t.current?t.current:null}function T({defaultValue:e=[],value:t,onFileAccept:n,onFileReject:r,onFileChange:i,multiple:a=!0,accept:o,maxFiles:c,maxFileSize:l,minFileSize:d,disabled:f=!1,readOnly:p=!1,locale:m}){let h=m||(typeof navigator<`u`&&navigator.language?navigator.language:`en`),[g,b]=(0,u.useCombinedState)(t,e),x=g??[],S=b,[C,w]=(0,s.useState)([]);return{files:x,rejectedFiles:C,addFiles:e=>{if(f||p)return;w([]);let t=[],s=(e,t)=>t.some(t=>t.name===e.name&&t.size===e.size),u=(e,n)=>{let r=t.find(t=>t.file.name===e.name&&t.file.size===e.size);r?r.errors.includes(n)||r.errors.push(n):t.push({file:e,errors:[n]})};S(f=>{let p=f??[],m=c===void 0?void 0:c-p.length;m!==void 0&&m<=0&&e.forEach(e=>{u(e,_.TOO_MANY_FILES)});let g=e;o&&(e.filter(e=>!v(e,o)).forEach(e=>{u(e,_.FILE_INVALID_TYPE)}),g=e.filter(e=>v(e,o)));let b=g;(d!==void 0||l!==void 0)&&(b=g.filter(e=>y(e,d,l,h).valid?!0:(l!==void 0&&e.size>l?u(e,_.FILE_TOO_LARGE):d!==void 0&&e.size<d?u(e,_.FILE_TOO_SMALL):u(e,_.FILE_INVALID),!1)));let x=new Map,S=b.filter(e=>{let t=`${e.name}-${e.size}`;return s(e,p)||x.has(t)?(u(e,_.FILE_EXISTS),!1):(x.set(t,e),!0)}),C=a?S:S.slice(0,1);m!==void 0&&(m<=0?C=[]:C.length>m&&(C.forEach(e=>{u(e,_.TOO_MANY_FILES)}),C=[]));let T=a?[...p,...C]:C,E=[...t];return w(E),C.length>0&&n&&n({files:C}),E.length>0&&r&&r({files:E}),i&&i({acceptedFiles:T,rejectedFiles:E}),T})},removeFile:e=>{f||p||S(t=>{let n=(t??[]).filter((t,n)=>n!==e),r=C;return c!==void 0&&n.length<c&&(r=C.filter(e=>!e.errors.includes(_.TOO_MANY_FILES)),w(r)),i&&i({acceptedFiles:n,rejectedFiles:r}),n})},removeRejectedFile:e=>{f||p||w(t=>t.filter((t,n)=>n!==e))},clearFiles:()=>{f||p||(S([]),w([]),i&&i({acceptedFiles:[],rejectedFiles:[]}))},clearRejectedFiles:()=>{w([])},maxFilesReached:c!==void 0&&x.length>=c}}var E=(0,s.createContext)(null),D=`:file-upload`,O=({asChild:e=!1,children:t,defaultValue:n=[],value:r,onFileAccept:i,onFileReject:a,onFileChange:o,multiple:u=!0,accept:d,maxFiles:f,maxFileSize:p,minFileSize:m,disabled:h=!1,readOnly:g=!1,locale:_})=>{let v=(0,l.useFormFieldControl)(),y=(0,s.useId)(),b=v.id||`${D}-${y}`,x=v.name,S=(0,s.useRef)(null),C=(0,s.useRef)(null),w=(0,s.useRef)(null),O=(0,s.useRef)([]),k=(0,s.useRef)([]),A=v.disabled??h,j=v.readOnly??g,{files:M,rejectedFiles:N,addFiles:P,removeFile:F,removeRejectedFile:I,clearFiles:L,clearRejectedFiles:R,maxFilesReached:z}=T({defaultValue:n,value:r,onFileAccept:i,onFileReject:a,onFileChange:o,multiple:u,accept:d,maxFiles:f,maxFileSize:p,minFileSize:m,disabled:A,readOnly:j,locale:_});return(0,c.jsx)(E.Provider,{value:{inputRef:S,files:M,rejectedFiles:N,addFiles:P,removeFile:F,removeRejectedFile:I,clearFiles:()=>{L(),O.current=[]},clearRejectedFiles:()=>{R(),k.current=[]},triggerRef:C,dropzoneRef:w,deleteButtonRefs:O,rejectedFileDeleteButtonRefs:k,multiple:u,maxFiles:f,maxFilesReached:z,disabled:A,readOnly:j,locale:_||(typeof navigator<`u`&&navigator.language?navigator.language:`en`),description:v.description,isInvalid:v.isInvalid,isRequired:v.isRequired},children:(0,c.jsxs)(`div`,{className:`relative`,children:[t,(0,c.jsx)(`input`,{ref:S,type:`file`,tabIndex:-1,id:b,multiple:u,name:x,accept:d,disabled:A,readOnly:j&&!A,required:v.isRequired,"aria-invalid":v.isInvalid,"aria-describedby":v.description,"aria-label":v.labelId?void 0:`Upload files`,className:`sr-only`,onChange:e=>{if(e.target.files&&!A&&!j){P(Array.from(e.target.files));try{e.target.value=``}catch{}}}})]})})};O.displayName=`FileUpload`;var k=()=>{let e=(0,s.useContext)(E);if(!e)throw Error(`useFileUploadContext must be used within a FileUpload provider`);return e},A=({className:e,file:t,onClick:r,...a})=>{let{removeFile:l,triggerRef:u,dropzoneRef:f,deleteButtonRefs:p,inputRef:m,disabled:h,readOnly:g,files:_}=k(),v=(0,s.useRef)(null),y=_.findIndex(e=>e.name===t.name&&e.size===t.size),b=e=>{h||g||(l(y),requestAnimationFrame(()=>{let e=p.current.filter(Boolean);if(e.length>0){let t=e[Math.min(y,e.length-1)];t&&t.focus()}else{let e=w([u.current,f.current],m);e&&e.focus()}}),r?.(e))};return(0,c.jsx)(i.t,{ref:e=>{if(v.current=e,e){for(;p.current.length<=y;)p.current.push(null);p.current[y]=e}else p.current[y]&&(p.current[y]=null)},"data-spark-component":`file-upload-item-delete-trigger`,className:(0,o.cx)(e),onClick:b,disabled:h||g,size:`sm`,design:`contrast`,intent:`surface`,...a,children:(0,c.jsx)(n.t,{size:`sm`,children:(0,c.jsx)(d.Close,{})})})};A.displayName=`FileUpload.ItemDeleteTrigger`;var j=({className:e,file:t,uploadProgress:r,deleteButtonAriaLabel:i,progressAriaLabel:l,...u})=>{let{locale:d}=k(),[f,p]=(0,s.useState)(r!==void 0);(0,s.useEffect)(()=>{p(r!==void 0)},[r]);let m=(0,s.useCallback)(()=>{p(!1)},[]);return(0,c.jsxs)(`li`,{"data-spark-component":`file-upload-accepted-file`,className:(0,o.cx)(`relative`,`default:bg-surface default:border-sm default:border-outline default:p-md default:rounded-md`,`gap-md flex items-center justify-between default:w-full`,e),...u,children:[(0,c.jsx)(`div`,{className:`size-sz-36 bg-support-container flex items-center justify-center rounded-md`,children:(0,c.jsx)(n.t,{size:`md`,children:S(t)})}),(0,c.jsxs)(`div`,{className:`gap-md relative flex min-w-0 flex-1 flex-row items-center justify-between self-stretch`,children:[(0,c.jsx)(`p`,{className:`text-body-2 truncate font-medium`,children:t.name}),(0,c.jsx)(`p`,{className:`text-caption opacity-dim-1`,children:x(t.size,d)}),f&&r!==void 0&&(0,c.jsx)(`div`,{className:`absolute bottom-0 left-0 w-full`,children:(0,c.jsx)(a.t,{value:r,max:100,"aria-label":l,onComplete:m})})]}),(0,c.jsx)(A,{"aria-label":i,file:t})]})};j.displayName=`FileUpload.AcceptedFile`;var M=({children:e})=>{let{files:t=[],rejectedFiles:n=[],locale:r}=k();return(0,c.jsx)(c.Fragment,{children:e({acceptedFiles:t,rejectedFiles:n,formatFileSize:x,locale:r})})};M.displayName=`FileUpload.Context`;var N=(0,s.createContext)(!1),P=()=>(0,s.useContext)(N);function F({children:e,className:t,unstyled:n=!1}){let r=k(),i=(0,s.useRef)(null);if(!r)throw Error(`FileUploadDropzone must be used inside <FileUpload>`);let a=e=>{if(e.preventDefault(),e.stopPropagation(),e.currentTarget.setAttribute(`data-drag-over`,`false`),r.disabled||r.readOnly)return;let t=e.dataTransfer.files,n=[];t&&(n=Array.isArray(t)?[...t]:Array.from(t)),n.length>0&&r.addFiles(n)},l=()=>{!r.disabled&&!r.readOnly&&r.inputRef.current?.click()},u=e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),!r.disabled&&!r.readOnly&&r.inputRef.current?.click())},d=r.disabled||r.readOnly;return(0,c.jsx)(N.Provider,{value:!0,children:(0,c.jsx)(`div`,{ref:e=>{i.current=e,r.dropzoneRef&&(r.dropzoneRef.current=e)},role:`button`,tabIndex:d?-1:0,"aria-disabled":r.disabled?!0:void 0,"aria-describedby":r.description,"aria-invalid":r.isInvalid,"aria-required":r.isRequired,onClick:l,onKeyDown:u,onDrop:a,onDragOver:e=>{e.preventDefault()},className:n?t:(0,o.cx)(`default:bg-surface default:border-sm default:border-outline default:relative default:rounded-lg default:border-dashed`,`gap-lg flex flex-col items-center justify-center text-center`,`default:p-xl`,`transition-colors duration-200`,!d&&`default:hover:bg-surface-hovered`,`data-[drag-over=true]:border-outline-high data-[drag-over=true]:bg-surface-hovered data-[drag-over=true]:border-solid`,r.disabled&&`cursor-not-allowed opacity-50`,r.readOnly&&!r.disabled&&`cursor-default`,t),onDragEnter:e=>{d||e.currentTarget.setAttribute(`data-drag-over`,`true`)},onDragLeave:e=>{e.currentTarget.setAttribute(`data-drag-over`,`false`)},children:e})})}F.displayName=`FileUploadDropzone`;var I=({className:e,file:t,fallback:n=`📄`,...r})=>{let[i,a]=(0,s.useState)(!1),[l,u]=(0,s.useState)(!1),d=t.type.startsWith(`image/`),f=d?URL.createObjectURL(t):null;return(0,s.useEffect)(()=>()=>{f&&URL.revokeObjectURL(f)},[f]),!d||i?(0,c.jsx)(`div`,{"data-spark-component":`file-upload-preview-image`,className:(0,o.cx)(`bg-neutral-container flex items-center justify-center rounded-md`,e),...r,children:n}):(0,c.jsxs)(`div`,{"data-spark-component":`file-upload-preview-image`,className:(0,o.cx)(`bg-neutral-container overflow-hidden`,e),...r,children:[(0,c.jsx)(`img`,{src:f,alt:t.name,className:(0,o.cx)(`size-full object-cover`,!l&&`opacity-0`),onLoad:()=>u(!0),onError:()=>a(!0)}),!l&&(0,c.jsx)(`div`,{className:`absolute inset-0 flex items-center justify-center`,children:n})]})};I.displayName=`FileUpload.PreviewImage`;var L=({className:e,rejectedFile:t,onClick:r,...a})=>{let{removeRejectedFile:l,triggerRef:u,dropzoneRef:f,rejectedFileDeleteButtonRefs:p,inputRef:m,disabled:h,readOnly:g,rejectedFiles:_}=k(),v=(0,s.useRef)(null),y=_.findIndex(e=>e.file.name===t.file.name&&e.file.size===t.file.size),b=e=>{h||g||(l(y),requestAnimationFrame(()=>{let e=p.current.filter(Boolean);if(e.length>0){let t=e[Math.min(y,e.length-1)];t&&t.focus()}else{let e=w([u.current,f.current],m);e&&e.focus()}}),r?.(e))};return(0,c.jsx)(i.t,{ref:e=>{if(v.current=e,e){for(;p.current.length<=y;)p.current.push(null);p.current[y]=e}else p.current[y]&&(p.current[y]=null)},"data-spark-component":`file-upload-rejected-file-delete-trigger`,className:(0,o.cx)(e),onClick:b,disabled:h||g,size:`sm`,design:`contrast`,intent:`surface`,...a,children:(0,c.jsx)(n.t,{size:`sm`,children:(0,c.jsx)(d.Close,{})})})};L.displayName=`FileUpload.RejectedFileDeleteTrigger`;var R=({className:e,rejectedFile:t,renderError:r,deleteButtonAriaLabel:i,...a})=>{let{locale:s}=k();return(0,c.jsxs)(`li`,{"data-spark-component":`file-upload-rejected-file`,className:(0,o.cx)(`relative`,`default:bg-surface default:border-sm default:border-outline default:p-md default:rounded-md`,`gap-md flex items-center justify-between default:w-full`,`border-error border-md`,e),...a,children:[(0,c.jsx)(`div`,{className:`size-sz-36 bg-error-container flex items-center justify-center rounded-md`,children:(0,c.jsx)(n.t,{size:`md`,className:`text-error`,children:(0,c.jsx)(g.WarningOutline,{})})}),(0,c.jsx)(`div`,{className:`min-w-0 flex-1`,children:(0,c.jsxs)(`div`,{className:`gap-md flex flex-col`,children:[(0,c.jsxs)(`div`,{className:`gap-md flex flex-row items-center justify-between`,children:[(0,c.jsx)(`p`,{className:`text-body-2 truncate font-medium`,children:t.file.name}),(0,c.jsx)(`p`,{className:`text-caption opacity-dim-1`,children:x(t.file.size,s)})]}),(0,c.jsx)(`div`,{className:`gap-xs flex flex-col`,children:t.errors.map((e,t)=>(0,c.jsx)(`div`,{className:`text-caption text-error`,"data-error-code":e,children:r(e)},t))})]})}),(0,c.jsx)(L,{"aria-label":i,rejectedFile:t})]})};R.displayName=`FileUpload.RejectedFile`;var z=({className:e,children:n,asChild:i=!1,unstyled:a=!1,design:s=`filled`,intent:l=`support`,size:u=`md`,shape:d=`rounded`,ref:f,...p})=>{let{inputRef:m,triggerRef:h,disabled:g,readOnly:_,description:v,isInvalid:y,isRequired:b}=k(),x=P(),S=e=>{e.stopPropagation(),e.preventDefault(),!g&&!_&&m.current?.click()},C=e=>{h&&(h.current=e),f&&(typeof f==`function`?f(e):f.current=e)},w,T;if(x){w=`span`;let t=a?e:r.n({design:s,intent:l,size:u,shape:d,disabled:g||_,className:e});T={ref:C,"data-spark-component":`file-upload-trigger`,className:t}}else w=i?t.Slot:a?`button`:r.t,T={ref:C,type:`button`,design:s,intent:l,size:u,shape:d,"data-spark-component":`file-upload-trigger`,className:(0,o.cx)(e),disabled:g||_,onClick:S,"aria-describedby":v,"aria-invalid":y,"aria-required":b,...p};return(0,c.jsx)(w,{...T,children:n})};z.displayName=`FileUpload.Trigger`;var B=Object.assign(O,{Trigger:z,Dropzone:F,Context:M,AcceptedFile:j,RejectedFile:R,PreviewImage:I,ItemDeleteTrigger:A,RejectedFileDeleteTrigger:L});B.displayName=`FileUpload`,z.displayName=`FileUpload.Trigger`,F.displayName=`FileUpload.Dropzone`,M.displayName=`FileUpload.Context`,A.displayName=`FileUpload.ItemDeleteTrigger`,I.displayName=`FileUpload.PreviewImage`,j.displayName=`FileUpload.AcceptedFile`,R.displayName=`FileUpload.RejectedFile`,L.displayName=`FileUpload.RejectedFileDeleteTrigger`,exports.FILE_UPLOAD_ERRORS=_,exports.FileUpload=B;
+//# sourceMappingURL=index.js.map