@spear-ai/spectral 1.21.1 → 1.21.2

package/dist/InputSearch.js

@@ -30,7 +30,7 @@ const defaultCreateOptionLabel = (query) => /* @__PURE__ */ jsxs(Fragment$1, { c
 		]
 	})]
 })] });
-const InputSearch = ({ className, createOptionLabel = defaultCreateOptionLabel, creatingLabel = "Creating…", defaultValue = "", disabled, dropdownWidth = "trigger", emptyMessage = "No options found", errorMessage, id, isCreating = false, label, labelClassName, messageReserveLines = 1, messageReserveSpace = false, name, onChange, onCreate, onValueChange, openOnFocus = false, options, placeholder = "Search…", ref, renderOption, required, showSearchIcon = true, state = "default", value: valueProp, warningMessage, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel }) => {
+const InputSearch = ({ className, createOptionLabel = defaultCreateOptionLabel, creatingLabel = "Creating…", defaultValue = "", disabled, dropdownWidth = "trigger", emptyMessage = "No options found", errorMessage, hideSearchIcon = false, id, isCreating = false, label, labelClassName, messageReserveLines = 1, messageReserveSpace = false, name, onChange, onCreate, onValueChange, openOnFocus = false, options, placeholder = "Search…", ref, renderOption, required, state = "default", value: valueProp, warningMessage, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel }) => {
 	if (!label && !ariaLabel) console.warn("InputSearch: provide either `label` or `aria-label` for an accessible name.");
 	const fieldId = useFormFieldId(id, name);
 	const listboxId = `${fieldId}-listbox`;
@@ -197,7 +197,7 @@ const InputSearch = ({ className, createOptionLabel = defaultCreateOptionLabel,
 		dropdownWidth,
 		triggerWidth: "100%"
 	});
-	const inputClasses = cn(getInputClasses(state, className), "pe-4", showSearchIcon && "ps-11", showClearButton && "pe-10!", state === "loading" && "cursor-wait");
+	const inputClasses = cn(getInputClasses(state, className), "pe-4", !hideSearchIcon && "ps-11", showClearButton && "pe-10!", state === "loading" && "cursor-wait");
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex w-full flex-col",
 		ref,
@@ -213,7 +213,7 @@ const InputSearch = ({ className, createOptionLabel = defaultCreateOptionLabel,
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "relative",
 					children: [
-						showSearchIcon && /* @__PURE__ */ jsx("span", {
+						!hideSearchIcon && /* @__PURE__ */ jsx("span", {
 							"aria-hidden": "true",
 							className: cn("left-4 text-input-icon absolute top-1/2 -translate-y-1/2", isDisabled && "text-input-text--disabled"),
 							children: /* @__PURE__ */ jsx(SearchIcon, { size: 20 })

package/dist/InputSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputSearch.js","names":[],"sources":["../src/components/InputSearch/InputSearch.tsx"],"sourcesContent":["import { CloseCircleIcon, ErrorIcon, LoaderIcon, PlusIcon, SearchIcon, WarningIcon } from '@components/Icons'\nimport { Label } from '@components/Label/Label'\nimport { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { useAutoDropdownHorizontalShift } from '@utils/dropdownPositioning'\nimport {\n  EmptyState,\n  ErrorMessage,\n  WarningMessage,\n  getAriaProps,\n  getDropdownSurfaceClasses,\n  getDropdownWidthStyles,\n  getErrorMessageId,\n  getFormFieldCSSProperties,\n  getInputClasses,\n  getOptionClasses,\n  getPasswordManagerIgnoreProps,\n  getWarningMessageId,\n  useFormFieldId,\n  useFormFieldState,\n  type BaseFormFieldProps,\n  type BaseOption,\n  type DropdownWidth,\n  type FormFieldState,\n} from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type KeyboardEvent, type ReactNode, type Ref } from 'react'\nimport { createPortal } from 'react-dom'\n\nexport type InputSearchOption = BaseOption\n\nexport interface InputSearchProps extends Omit<BaseFormFieldProps, 'onChange' | 'state'> {\n  className?: string\n  createOptionLabel?: (query: string) => ReactNode\n  creatingLabel?: string\n  defaultValue?: string\n  dropdownWidth?: DropdownWidth\n  emptyMessage?: string\n  isCreating?: boolean\n  labelClassName?: string\n  onChange?: (value: string) => void\n  onCreate?: (query: string) => void\n  onValueChange?: (value: string) => void\n  openOnFocus?: boolean\n  options: InputSearchOption[]\n  placeholder?: string\n  renderOption?: (option: InputSearchOption) => ReactNode\n  showSearchIcon?: boolean\n  state?: Exclude<FormFieldState, 'disabled'>\n  value?: string\n  warningMessage?: BaseFormFieldProps['errorMessage']\n}\n\nconst defaultCreateOptionLabel = (query: string): ReactNode => (\n  <>\n    <PlusIcon size={16} className='shrink-0' />\n    <span className='truncate'>\n      Create <span className='font-semibold'>&ldquo;{query}&rdquo;</span>\n    </span>\n  </>\n)\n\nexport const InputSearch = ({\n  className,\n  createOptionLabel = defaultCreateOptionLabel,\n  creatingLabel = 'Creating…',\n  defaultValue = '',\n  disabled,\n  dropdownWidth = 'trigger',\n  emptyMessage = 'No options found',\n  errorMessage,\n  id,\n  isCreating = false,\n  label,\n  labelClassName,\n  messageReserveLines = 1,\n  messageReserveSpace = false,\n  name,\n  onChange,\n  onCreate,\n  onValueChange,\n  openOnFocus = false,\n  options,\n  placeholder = 'Search…',\n  ref,\n  renderOption,\n  required,\n  showSearchIcon = true,\n  state = 'default',\n  value: valueProp,\n  warningMessage,\n  'aria-describedby': ariaDescribedBy,\n  'aria-label': ariaLabel,\n}: InputSearchProps & { ref?: Ref<HTMLDivElement> }) => {\n  if (process.env.NODE_ENV !== 'production' && !label && !ariaLabel) {\n    // eslint-disable-next-line no-console\n    console.warn('InputSearch: provide either `label` or `aria-label` for an accessible name.')\n  }\n\n  const fieldId = useFormFieldId(id, name)\n  const listboxId = `${fieldId}-listbox`\n  const errorMessageId = getErrorMessageId(fieldId)\n  const warningMessageId = getWarningMessageId(fieldId)\n  const messageId = state === 'error' ? errorMessageId : state === 'warning' && warningMessage ? warningMessageId : undefined\n  const { isDisabled, isLoading, isInvalid } = useFormFieldState(disabled, state)\n  const ariaProps = getAriaProps(state, ariaDescribedBy, required, messageId)\n\n  const [value, setValue] = useUncontrolledState<string>({\n    value: valueProp,\n    defaultValue,\n    onChange: (nextValue) => {\n      if (onChange) {\n        onChange(nextValue)\n      } else {\n        onValueChange?.(nextValue)\n      }\n    },\n  })\n\n  const [query, setQuery] = useState('')\n  const [isFocused, setIsFocused] = useState(false)\n  const [highlightedIndex, setHighlightedIndex] = useState(-1)\n  const [dropdownPosition, setDropdownPosition] = useState<{ top: number; left: number; width: number } | null>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const listRef = useRef<HTMLDivElement>(null)\n  const blurTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const triggerRef = useRef<HTMLDivElement>(null)\n\n  const selectedOption = useMemo(() => options.find((option) => option.value === value) ?? null, [options, value])\n\n  useEffect(() => {\n    if (!isFocused) {\n      setQuery(selectedOption?.label ?? '')\n    }\n  }, [selectedOption, isFocused])\n\n  const trimmedQuery = query.trim()\n\n  const filteredOptions = useMemo(() => {\n    if (trimmedQuery.length === 0) return options\n    const lower = trimmedQuery.toLowerCase()\n    return options.filter((option) => option.label.toLowerCase().includes(lower))\n  }, [trimmedQuery, options])\n\n  const exactMatch = useMemo(() => options.some((option) => option.label.toLowerCase() === trimmedQuery.toLowerCase()), [options, trimmedQuery])\n\n  const showCreateOption = onCreate !== undefined && trimmedQuery.length > 0 && !exactMatch\n  const createOptionIndex = showCreateOption ? filteredOptions.length : -1\n  const totalItems = filteredOptions.length + (showCreateOption ? 1 : 0)\n  const showDropdown = isFocused && !isDisabled && !isLoading && (openOnFocus || trimmedQuery.length > 0)\n  const showEmptyState = showDropdown && totalItems === 0\n\n  const { dropdownShiftStyle, recalculateDropdownPosition, setDropdownElement } = useAutoDropdownHorizontalShift(showDropdown)\n\n  const updateDropdownPosition = useCallback(() => {\n    const trigger = triggerRef.current\n    if (!trigger) return\n    const rect = trigger.getBoundingClientRect()\n    setDropdownPosition({\n      top: rect.bottom + 4,\n      left: rect.left,\n      width: rect.width,\n    })\n    recalculateDropdownPosition()\n  }, [recalculateDropdownPosition])\n\n  useLayoutEffect(() => {\n    if (!showDropdown) {\n      setDropdownPosition(null)\n      return\n    }\n    updateDropdownPosition()\n    const handle = () => updateDropdownPosition()\n    window.addEventListener('scroll', handle, true)\n    window.addEventListener('resize', handle)\n    return () => {\n      window.removeEventListener('scroll', handle, true)\n      window.removeEventListener('resize', handle)\n    }\n  }, [showDropdown, updateDropdownPosition])\n\n  useLayoutEffect(() => {\n    if (!showDropdown) return\n    updateDropdownPosition()\n  }, [showDropdown, updateDropdownPosition, filteredOptions.length, showCreateOption])\n\n  useEffect(() => {\n    setHighlightedIndex(-1)\n  }, [filteredOptions.length, showCreateOption])\n\n  useEffect(() => {\n    if (highlightedIndex < 0 || !listRef.current) return\n    const element = listRef.current.querySelector<HTMLElement>(`[data-index='${highlightedIndex}']`)\n    element?.scrollIntoView({ block: 'nearest' })\n  }, [highlightedIndex])\n\n  useEffect(\n    () => () => {\n      if (blurTimeoutRef.current !== null) {\n        clearTimeout(blurTimeoutRef.current)\n      }\n    },\n    [],\n  )\n\n  const commitSelection = useCallback(\n    (option: InputSearchOption) => {\n      if (option.disabled) return\n      setValue(option.value)\n      setQuery(option.label)\n      setIsFocused(false)\n      setHighlightedIndex(-1)\n      inputRef.current?.blur()\n    },\n    [setValue],\n  )\n\n  const commitCreate = useCallback(() => {\n    if (!onCreate || isCreating || trimmedQuery.length === 0) return\n    onCreate(trimmedQuery)\n  }, [onCreate, isCreating, trimmedQuery])\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLInputElement>) => {\n      switch (event.key) {\n        case 'ArrowDown': {\n          if (totalItems === 0) return\n          event.preventDefault()\n          setHighlightedIndex((prev) => (prev < totalItems - 1 ? prev + 1 : prev))\n          break\n        }\n        case 'ArrowUp': {\n          if (totalItems === 0) return\n          event.preventDefault()\n          setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : 0))\n          break\n        }\n        case 'Enter': {\n          if (totalItems === 0) return\n          event.preventDefault()\n          if (highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) {\n            const option = filteredOptions[highlightedIndex]\n            if (option) commitSelection(option)\n          } else if (highlightedIndex === createOptionIndex && !isCreating) {\n            commitCreate()\n          }\n          break\n        }\n        case 'Escape': {\n          event.preventDefault()\n          setIsFocused(false)\n          setHighlightedIndex(-1)\n          if (selectedOption) setQuery(selectedOption.label)\n          inputRef.current?.blur()\n          break\n        }\n        default:\n          break\n      }\n    },\n    [totalItems, filteredOptions, highlightedIndex, createOptionIndex, commitSelection, commitCreate, isCreating, selectedOption],\n  )\n\n  const handleFocus = useCallback(() => {\n    if (blurTimeoutRef.current !== null) {\n      clearTimeout(blurTimeoutRef.current)\n      blurTimeoutRef.current = null\n    }\n    setIsFocused(true)\n    setQuery('')\n  }, [])\n\n  const handleBlur = useCallback(() => {\n    if (blurTimeoutRef.current !== null) {\n      clearTimeout(blurTimeoutRef.current)\n    }\n    blurTimeoutRef.current = setTimeout(() => {\n      blurTimeoutRef.current = null\n      // Don't write to `query` here — the useEffect tied to selectedOption + isFocused\n      // is the single source of truth for the visible query when the field isn't focused.\n      // Setting it from this stale closure causes off-by-one display after selection.\n      setIsFocused(false)\n      setHighlightedIndex(-1)\n    }, 150)\n  }, [])\n\n  const handleClear = useCallback(() => {\n    setValue('')\n    setQuery('')\n    inputRef.current?.focus()\n  }, [setValue])\n\n  const showClearButton = !isLoading && !isDisabled && (value.length > 0 || (isFocused && query.length > 0))\n\n  const { dropdownWidthMode, dropdownWidthStyle } = getDropdownWidthStyles({\n    dropdownWidth,\n    triggerWidth: '100%',\n  })\n\n  const inputClasses = cn(getInputClasses(state, className), 'pe-4', showSearchIcon && 'ps-11', showClearButton && 'pe-10!', state === 'loading' && 'cursor-wait')\n\n  return (\n    <div className='flex w-full flex-col' data-testid='spectral-input-search-container' ref={ref}>\n      {label && (\n        <Label className={cn('mb-2 block', labelClassName, isDisabled && 'cursor-not-allowed text-input-text--disabled')} data-testid='spectral-input-search-label' htmlFor={fieldId}>\n          {label}\n        </Label>\n      )}\n\n      <div className='relative' data-testid='spectral-input-search-wrapper' ref={triggerRef}>\n        <div className='relative'>\n          {showSearchIcon && (\n            <span aria-hidden='true' className={cn('left-4 text-input-icon absolute top-1/2 -translate-y-1/2', isDisabled && 'text-input-text--disabled')} data-testid='spectral-input-search-icon'>\n              <SearchIcon size={20} />\n            </span>\n          )}\n\n          <input\n            aria-activedescendant={highlightedIndex >= 0 ? `${fieldId}-option-${highlightedIndex}` : undefined}\n            aria-autocomplete='list'\n            aria-controls={listboxId}\n            aria-expanded={showDropdown}\n            // oxlint-disable-next-line jsx-a11y/role-supports-aria-props -- Valid per WAI-ARIA 1.2 Combobox pattern\n            aria-haspopup='listbox'\n            aria-label={ariaLabel ?? label}\n            autoComplete='off'\n            className={inputClasses}\n            data-state={state}\n            data-testid='spectral-input-search'\n            disabled={isDisabled || isLoading}\n            id={fieldId}\n            name={name}\n            onBlur={handleBlur}\n            onChange={(event) => {\n              setQuery(event.target.value)\n              if (!isFocused) setIsFocused(true)\n            }}\n            onFocus={handleFocus}\n            onKeyDown={handleKeyDown}\n            placeholder={placeholder}\n            ref={inputRef}\n            required={required}\n            role='combobox'\n            style={getFormFieldCSSProperties() as CSSProperties}\n            type='text'\n            value={query}\n            {...getPasswordManagerIgnoreProps('text')}\n            {...ariaProps}\n          />\n\n          {showClearButton ? (\n            <button\n              aria-label={`Clear ${label ?? 'search'}`}\n              className='right-4 text-input-icon hover:text-input-icon--hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-input-border--focus rounded-sm absolute top-1/2 -translate-y-1/2 cursor-pointer'\n              data-testid='spectral-input-search-clear-button'\n              onClick={handleClear}\n              // Prevent input blur from firing before click resolves\n              onMouseDown={(event) => event.preventDefault()}\n              type='button'\n            >\n              <CloseCircleIcon size={20} />\n            </button>\n          ) : state === 'loading' ? (\n            <div className='right-4 text-input-icon absolute top-1/2 -translate-y-1/2' data-testid='spectral-input-search-loading-icon'>\n              <LoaderIcon className='motion-safe:animate-spin' size={20} />\n            </div>\n          ) : state === 'error' ? (\n            <div className='right-4 text-danger-400 absolute top-1/2 -translate-y-1/2' data-testid='spectral-input-search-error-icon'>\n              <ErrorIcon size={20} />\n            </div>\n          ) : state === 'warning' ? (\n            <div className='right-4 text-warning-400 absolute top-1/2 -translate-y-1/2' data-testid='spectral-input-search-warning-icon'>\n              <WarningIcon size={20} />\n            </div>\n          ) : null}\n        </div>\n\n      </div>\n\n      {showDropdown && dropdownPosition && typeof document !== 'undefined'\n        ? createPortal(\n            <div\n              className={cn('origin-top p-1 z-50 fixed', getDropdownSurfaceClasses(), 'max-h-72 overflow-hidden', 'motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95 motion-safe:slide-in-from-top-2')}\n              data-dropdown-width-mode={dropdownWidthMode}\n              data-dropdown-width-value={dropdownWidthMode === 'custom' ? dropdownWidth : undefined}\n              data-testid='spectral-input-search-content'\n              ref={setDropdownElement}\n              style={{\n                top: `${dropdownPosition.top}px`,\n                left: `${dropdownPosition.left}px`,\n                ...(dropdownWidthMode === 'trigger' ? { width: `${dropdownPosition.width}px` } : (dropdownWidthStyle as CSSProperties)),\n                ...dropdownShiftStyle,\n              }}\n            >\n              <div\n                className='max-h-[17.5rem] overflow-y-auto'\n                id={listboxId}\n                ref={listRef}\n                // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- WAI-ARIA combobox pattern requires role='listbox' on the popup\n                role='listbox'\n              >\n                {showEmptyState ? (\n                  <EmptyState message={emptyMessage} />\n                ) : (\n                  <>\n                    {filteredOptions.map((option, index) => {\n                    const isHighlighted = index === highlightedIndex\n                    const isSelected = option.value === value\n                    return (\n                      <button\n                        aria-selected={isSelected}\n                        className={cn(getOptionClasses(!!option.disabled, isHighlighted, isSelected), 'text-left')}\n                        data-highlighted={isHighlighted ? '' : undefined}\n                        data-index={index}\n                        data-testid='spectral-input-search-item'\n                        disabled={option.disabled}\n                        id={`${fieldId}-option-${index}`}\n                        key={option.value}\n                        onMouseDown={(event) => {\n                          event.preventDefault()\n                          commitSelection(option)\n                        }}\n                        onMouseEnter={() => setHighlightedIndex(index)}\n                        role='option'\n                        tabIndex={-1}\n                        type='button'\n                      >\n                        <span className='min-w-0 flex-1 truncate'>{renderOption ? renderOption(option) : option.label}</span>\n                      </button>\n                    )\n                  })}\n\n                    {showCreateOption && (\n                      <button\n                        aria-selected={createOptionIndex === highlightedIndex}\n                        className={cn(getOptionClasses(isCreating, createOptionIndex === highlightedIndex, false), 'gap-2 text-left text-accent font-medium')}\n                        data-highlighted={createOptionIndex === highlightedIndex ? '' : undefined}\n                        data-index={createOptionIndex}\n                        data-testid='spectral-input-search-create-option'\n                        disabled={isCreating}\n                        id={`${fieldId}-option-${createOptionIndex}`}\n                        onMouseDown={(event) => {\n                          event.preventDefault()\n                          commitCreate()\n                        }}\n                        onMouseEnter={() => setHighlightedIndex(createOptionIndex)}\n                        role='option'\n                        tabIndex={-1}\n                        type='button'\n                      >\n                        {isCreating ? (\n                          <span className='gap-2 flex items-center'>\n                            <LoaderIcon className='shrink-0 motion-safe:animate-spin' size={16} />\n                            <span>{creatingLabel}</span>\n                          </span>\n                        ) : (\n                          <span className='gap-2 flex items-center min-w-0'>{createOptionLabel(trimmedQuery)}</span>\n                        )}\n                      </button>\n                    )}\n                  </>\n                )}\n              </div>\n            </div>,\n            document.body,\n          )\n        : null}\n\n      <ErrorMessage\n        dataTestId='spectral-input-search-error-message'\n        id={errorMessageId}\n        message={isInvalid ? (errorMessage ?? null) : null}\n        messageReserveLines={messageReserveLines}\n        messageReserveSpace={messageReserveSpace && state === 'error'}\n      />\n      <WarningMessage\n        dataTestId='spectral-input-search-warning-message'\n        id={warningMessageId}\n        message={state === 'warning' ? (warningMessage ?? null) : null}\n        messageReserveLines={messageReserveLines}\n        messageReserveSpace={messageReserveSpace && state === 'warning'}\n      />\n    </div>\n  )\n}\nInputSearch.displayName = 'InputSearch'\n"],"mappings":";;;;;;;;;;;;;;;;;;AAoDA,MAAM,4BAA4B,UAChC,8CACE,oBAAC,UAAD;CAAU,MAAM;CAAI,WAAU;CAAY,GAC1C,qBAAC,QAAD;CAAM,WAAU;WAAhB,CAA0B,WACjB,qBAAC,QAAD;EAAM,WAAU;YAAhB;GAAgC;GAAQ;GAAM;GAAa;IAC9D;GACN;AAGJ,MAAa,eAAe,EAC1B,WACA,oBAAoB,0BACpB,gBAAgB,aAChB,eAAe,IACf,UACA,gBAAgB,WAChB,eAAe,oBACf,cACA,IACA,aAAa,OACb,OACA,gBACA,sBAAsB,GACtB,sBAAsB,OACtB,MACA,UACA,UACA,eACA,cAAc,OACd,SACA,cAAc,WACd,KACA,cACA,UACA,iBAAiB,MACjB,QAAQ,WACR,OAAO,WACP,gBACA,oBAAoB,iBACpB,cAAc,gBACwC;AACtD,KAA6C,CAAC,SAAS,CAAC,UAEtD,SAAQ,KAAK,8EAA6E;CAG5F,MAAM,UAAU,eAAe,IAAI,KAAI;CACvC,MAAM,YAAY,GAAG,QAAQ;CAC7B,MAAM,iBAAiB,kBAAkB,QAAO;CAChD,MAAM,mBAAmB,oBAAoB,QAAO;CACpD,MAAM,YAAY,UAAU,UAAU,iBAAiB,UAAU,aAAa,iBAAiB,mBAAmB;CAClH,MAAM,EAAE,YAAY,WAAW,cAAc,kBAAkB,UAAU,MAAK;CAC9E,MAAM,YAAY,aAAa,OAAO,iBAAiB,UAAU,UAAS;CAE1E,MAAM,CAAC,OAAO,YAAY,qBAA6B;EACrD,OAAO;EACP;EACA,WAAW,cAAc;AACvB,OAAI,SACF,UAAS,UAAS;OAElB,iBAAgB,UAAS;;EAG9B,CAAA;CAED,MAAM,CAAC,OAAO,YAAY,SAAS,GAAE;CACrC,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAK;CAChD,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,GAAE;CAC3D,MAAM,CAAC,kBAAkB,uBAAuB,SAA8D,KAAI;CAClH,MAAM,WAAW,OAAyB,KAAI;CAC9C,MAAM,UAAU,OAAuB,KAAI;CAC3C,MAAM,iBAAiB,OAA6C,KAAI;CACxE,MAAM,aAAa,OAAuB,KAAI;CAE9C,MAAM,iBAAiB,cAAc,QAAQ,MAAM,WAAW,OAAO,UAAU,MAAM,IAAI,MAAM,CAAC,SAAS,MAAM,CAAA;AAE/G,iBAAgB;AACd,MAAI,CAAC,UACH,UAAS,gBAAgB,SAAS,GAAE;IAErC,CAAC,gBAAgB,UAAU,CAAA;CAE9B,MAAM,eAAe,MAAM,MAAK;CAEhC,MAAM,kBAAkB,cAAc;AACpC,MAAI,aAAa,WAAW,EAAG,QAAO;EACtC,MAAM,QAAQ,aAAa,aAAY;AACvC,SAAO,QAAQ,QAAQ,WAAW,OAAO,MAAM,aAAa,CAAC,SAAS,MAAM,CAAA;IAC3E,CAAC,cAAc,QAAQ,CAAA;CAE1B,MAAM,aAAa,cAAc,QAAQ,MAAM,WAAW,OAAO,MAAM,aAAa,KAAK,aAAa,aAAa,CAAC,EAAE,CAAC,SAAS,aAAa,CAAA;CAE7I,MAAM,mBAAmB,aAAa,UAAa,aAAa,SAAS,KAAK,CAAC;CAC/E,MAAM,oBAAoB,mBAAmB,gBAAgB,SAAS;CACtE,MAAM,aAAa,gBAAgB,UAAU,mBAAmB,IAAI;CACpE,MAAM,eAAe,aAAa,CAAC,cAAc,CAAC,cAAc,eAAe,aAAa,SAAS;CACrG,MAAM,iBAAiB,gBAAgB,eAAe;CAEtD,MAAM,EAAE,oBAAoB,6BAA6B,uBAAuB,+BAA+B,aAAY;CAE3H,MAAM,yBAAyB,kBAAkB;EAC/C,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,QAAS;EACd,MAAM,OAAO,QAAQ,uBAAsB;AAC3C,sBAAoB;GAClB,KAAK,KAAK,SAAS;GACnB,MAAM,KAAK;GACX,OAAO,KAAK;GACb,CAAA;AACD,+BAA4B;IAC3B,CAAC,4BAA4B,CAAA;AAEhC,uBAAsB;AACpB,MAAI,CAAC,cAAc;AACjB,uBAAoB,KAAI;AACxB;;AAEF,0BAAuB;EACvB,MAAM,eAAe,wBAAuB;AAC5C,SAAO,iBAAiB,UAAU,QAAQ,KAAI;AAC9C,SAAO,iBAAiB,UAAU,OAAM;AACxC,eAAa;AACX,UAAO,oBAAoB,UAAU,QAAQ,KAAI;AACjD,UAAO,oBAAoB,UAAU,OAAM;;IAE5C,CAAC,cAAc,uBAAuB,CAAA;AAEzC,uBAAsB;AACpB,MAAI,CAAC,aAAc;AACnB,0BAAuB;IACtB;EAAC;EAAc;EAAwB,gBAAgB;EAAQ;EAAiB,CAAA;AAEnF,iBAAgB;AACd,sBAAoB,GAAE;IACrB,CAAC,gBAAgB,QAAQ,iBAAiB,CAAA;AAE7C,iBAAgB;AACd,MAAI,mBAAmB,KAAK,CAAC,QAAQ,QAAS;AAE9C,EADgB,QAAQ,QAAQ,cAA2B,gBAAgB,iBAAiB,IACrF,EAAE,eAAe,EAAE,OAAO,WAAW,CAAA;IAC3C,CAAC,iBAAiB,CAAA;AAErB,uBACc;AACV,MAAI,eAAe,YAAY,KAC7B,cAAa,eAAe,QAAO;IAGvC,EAAE,CACJ;CAEA,MAAM,kBAAkB,aACrB,WAA8B;AAC7B,MAAI,OAAO,SAAU;AACrB,WAAS,OAAO,MAAK;AACrB,WAAS,OAAO,MAAK;AACrB,eAAa,MAAK;AAClB,sBAAoB,GAAE;AACtB,WAAS,SAAS,MAAK;IAEzB,CAAC,SAAS,CACZ;CAEA,MAAM,eAAe,kBAAkB;AACrC,MAAI,CAAC,YAAY,cAAc,aAAa,WAAW,EAAG;AAC1D,WAAS,aAAY;IACpB;EAAC;EAAU;EAAY;EAAa,CAAA;CAEvC,MAAM,gBAAgB,aACnB,UAA2C;AAC1C,UAAQ,MAAM,KAAd;GACE,KAAK;AACH,QAAI,eAAe,EAAG;AACtB,UAAM,gBAAe;AACrB,yBAAqB,SAAU,OAAO,aAAa,IAAI,OAAO,IAAI,KAAK;AACvE;GAEF,KAAK;AACH,QAAI,eAAe,EAAG;AACtB,UAAM,gBAAe;AACrB,yBAAqB,SAAU,OAAO,IAAI,OAAO,IAAI,EAAE;AACvD;GAEF,KAAK;AACH,QAAI,eAAe,EAAG;AACtB,UAAM,gBAAe;AACrB,QAAI,oBAAoB,KAAK,mBAAmB,gBAAgB,QAAQ;KACtE,MAAM,SAAS,gBAAgB;AAC/B,SAAI,OAAQ,iBAAgB,OAAM;eACzB,qBAAqB,qBAAqB,CAAC,WACpD,eAAa;AAEf;GAEF,KAAK;AACH,UAAM,gBAAe;AACrB,iBAAa,MAAK;AAClB,wBAAoB,GAAE;AACtB,QAAI,eAAgB,UAAS,eAAe,MAAK;AACjD,aAAS,SAAS,MAAK;AACvB;GAEF,QACE;;IAGN;EAAC;EAAY;EAAiB;EAAkB;EAAmB;EAAiB;EAAc;EAAY;EAAe,CAC/H;CAEA,MAAM,cAAc,kBAAkB;AACpC,MAAI,eAAe,YAAY,MAAM;AACnC,gBAAa,eAAe,QAAO;AACnC,kBAAe,UAAU;;AAE3B,eAAa,KAAI;AACjB,WAAS,GAAE;IACV,EAAE,CAAA;CAEL,MAAM,aAAa,kBAAkB;AACnC,MAAI,eAAe,YAAY,KAC7B,cAAa,eAAe,QAAO;AAErC,iBAAe,UAAU,iBAAiB;AACxC,kBAAe,UAAU;AAIzB,gBAAa,MAAK;AAClB,uBAAoB,GAAE;KACrB,IAAG;IACL,EAAE,CAAA;CAEL,MAAM,cAAc,kBAAkB;AACpC,WAAS,GAAE;AACX,WAAS,GAAE;AACX,WAAS,SAAS,OAAM;IACvB,CAAC,SAAS,CAAA;CAEb,MAAM,kBAAkB,CAAC,aAAa,CAAC,eAAe,MAAM,SAAS,KAAM,aAAa,MAAM,SAAS;CAEvG,MAAM,EAAE,mBAAmB,uBAAuB,uBAAuB;EACvE;EACA,cAAc;EACf,CAAA;CAED,MAAM,eAAe,GAAG,gBAAgB,OAAO,UAAU,EAAE,QAAQ,kBAAkB,SAAS,mBAAmB,UAAU,UAAU,aAAa,cAAa;AAE/J,QACE,qBAAC,OAAD;EAAK,WAAU;EAA0E;YAAzF;GACG,SACC,oBAAC,OAAD;IAAO,WAAW,GAAG,cAAc,gBAAgB,cAAc,+CAA+C;IAA4C,SAAS;cAClK;IACI;GAGT,oBAAC,OAAD;IAAK,WAAU;IAAuD,KAAK;cACzE,qBAAC,OAAD;KAAK,WAAU;eAAf;MACG,kBACC,oBAAC,QAAD;OAAM,eAAY;OAAO,WAAW,GAAG,4DAA4D,cAAc,4BAA4B;iBAC3I,oBAAC,YAAD,EAAY,MAAM,IAAK;OACnB;MAGR,oBAAC,SAAD;OACE,yBAAuB,oBAAoB,IAAI,GAAG,QAAQ,UAAU,qBAAqB;OACzF,qBAAkB;OAClB,iBAAe;OACf,iBAAe;OAEf,iBAAc;OACd,cAAY,aAAa;OACzB,cAAa;OACb,WAAW;OACX,cAAY;OAEZ,UAAU,cAAc;OACxB,IAAI;OACE;OACN,QAAQ;OACR,WAAW,UAAU;AACnB,iBAAS,MAAM,OAAO,MAAK;AAC3B,YAAI,CAAC,UAAW,cAAa,KAAI;;OAEnC,SAAS;OACT,WAAW;OACE;OACb,KAAK;OACK;OACV,MAAK;OACL,OAAO,2BAA2B;OAClC,MAAK;OACL,OAAO;OACP,GAAI,8BAA8B,OAAO;OACzC,GAAI;OACL;MAEA,kBACC,oBAAC,UAAD;OACE,cAAY,SAAS,SAAS;OAC9B,WAAU;OAEV,SAAS;OAET,cAAc,UAAU,MAAM,gBAAgB;OAC9C,MAAK;iBAEL,oBAAC,iBAAD,EAAiB,MAAM,IAAK;OACtB,IACN,UAAU,YACZ,oBAAC,OAAD;OAAK,WAAU;iBACb,oBAAC,YAAD;QAAY,WAAU;QAA2B,MAAM;QAAK;OACzD,IACH,UAAU,UACZ,oBAAC,OAAD;OAAK,WAAU;iBACb,oBAAC,WAAD,EAAW,MAAM,IAAK;OACnB,IACH,UAAU,YACZ,oBAAC,OAAD;OAAK,WAAU;iBACb,oBAAC,aAAD,EAAa,MAAM,IAAK;OACrB,IACH;MACD;;IAEF;GAEJ,gBAAgB,oBAAoB,OAAO,aAAa,cACrD,aACE,oBAAC,OAAD;IACE,WAAW,GAAG,6BAA6B,2BAA2B,EAAE,4BAA4B,sGAAsG;IAC1M,4BAA0B;IAC1B,6BAA2B,sBAAsB,WAAW,gBAAgB;IAE5E,KAAK;IACL,OAAO;KACL,KAAK,GAAG,iBAAiB,IAAI;KAC7B,MAAM,GAAG,iBAAiB,KAAK;KAC/B,GAAI,sBAAsB,YAAY,EAAE,OAAO,GAAG,iBAAiB,MAAM,KAAK,GAAI;KAClF,GAAG;KACJ;cAED,oBAAC,OAAD;KACE,WAAU;KACV,IAAI;KACJ,KAAK;KAEL,MAAK;eAEJ,iBACC,oBAAC,YAAD,EAAY,SAAS,cAAe,IAEpC,8CACG,gBAAgB,KAAK,QAAQ,UAAU;MACxC,MAAM,gBAAgB,UAAU;MAChC,MAAM,aAAa,OAAO,UAAU;AACpC,aACE,oBAAC,UAAD;OACE,iBAAe;OACf,WAAW,GAAG,iBAAiB,CAAC,CAAC,OAAO,UAAU,eAAe,WAAW,EAAE,YAAY;OAC1F,oBAAkB,gBAAgB,KAAK;OACvC,cAAY;OAEZ,UAAU,OAAO;OACjB,IAAI,GAAG,QAAQ,UAAU;OAEzB,cAAc,UAAU;AACtB,cAAM,gBAAe;AACrB,wBAAgB,OAAM;;OAExB,oBAAoB,oBAAoB,MAAM;OAC9C,MAAK;OACL,UAAU;OACV,MAAK;iBAEL,oBAAC,QAAD;QAAM,WAAU;kBAA2B,eAAe,aAAa,OAAO,GAAG,OAAO;QAAY;OAC9F,EAXD,OAAO,MAWN;OAEV,EAEC,oBACC,oBAAC,UAAD;MACE,iBAAe,sBAAsB;MACrC,WAAW,GAAG,iBAAiB,YAAY,sBAAsB,kBAAkB,MAAM,EAAE,0CAA0C;MACrI,oBAAkB,sBAAsB,mBAAmB,KAAK;MAChE,cAAY;MAEZ,UAAU;MACV,IAAI,GAAG,QAAQ,UAAU;MACzB,cAAc,UAAU;AACtB,aAAM,gBAAe;AACrB,qBAAa;;MAEf,oBAAoB,oBAAoB,kBAAkB;MAC1D,MAAK;MACL,UAAU;MACV,MAAK;gBAEJ,aACC,qBAAC,QAAD;OAAM,WAAU;iBAAhB,CACE,oBAAC,YAAD;QAAY,WAAU;QAAoC,MAAM;QAAK,GACrE,oBAAC,QAAD,YAAO,eAAoB,EACvB;WAEN,oBAAC,QAAD;OAAM,WAAU;iBAAmC,kBAAkB,aAAa;OAAO;MAErF,EAEV;KAED;IACD,GACN,SAAS,KACX,GACA;GAEJ,oBAAC,cAAD;IACE,YAAW;IACX,IAAI;IACJ,SAAS,YAAa,gBAAgB,OAAQ;IACzB;IACrB,qBAAqB,uBAAuB,UAAU;IACvD;GACD,oBAAC,gBAAD;IACE,YAAW;IACX,IAAI;IACJ,SAAS,UAAU,YAAa,kBAAkB,OAAQ;IACrC;IACrB,qBAAqB,uBAAuB,UAAU;IACvD;GACE;;;AAGT,YAAY,cAAc"}
+{"version":3,"file":"InputSearch.js","names":[],"sources":["../src/components/InputSearch/InputSearch.tsx"],"sourcesContent":["import { CloseCircleIcon, ErrorIcon, LoaderIcon, PlusIcon, SearchIcon, WarningIcon } from '@components/Icons'\nimport { Label } from '@components/Label/Label'\nimport { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { useAutoDropdownHorizontalShift } from '@utils/dropdownPositioning'\nimport {\n  EmptyState,\n  ErrorMessage,\n  WarningMessage,\n  getAriaProps,\n  getDropdownSurfaceClasses,\n  getDropdownWidthStyles,\n  getErrorMessageId,\n  getFormFieldCSSProperties,\n  getInputClasses,\n  getOptionClasses,\n  getPasswordManagerIgnoreProps,\n  getWarningMessageId,\n  useFormFieldId,\n  useFormFieldState,\n  type BaseFormFieldProps,\n  type BaseOption,\n  type DropdownWidth,\n  type FormFieldState,\n} from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type KeyboardEvent, type ReactNode, type Ref } from 'react'\nimport { createPortal } from 'react-dom'\n\nexport type InputSearchOption = BaseOption\n\nexport interface InputSearchProps extends Omit<BaseFormFieldProps, 'onChange' | 'state'> {\n  className?: string\n  createOptionLabel?: (query: string) => ReactNode\n  creatingLabel?: string\n  defaultValue?: string\n  dropdownWidth?: DropdownWidth\n  emptyMessage?: string\n  hideSearchIcon?: boolean\n  isCreating?: boolean\n  labelClassName?: string\n  onChange?: (value: string) => void\n  onCreate?: (query: string) => void\n  onValueChange?: (value: string) => void\n  openOnFocus?: boolean\n  options: InputSearchOption[]\n  placeholder?: string\n  renderOption?: (option: InputSearchOption) => ReactNode\n  state?: Exclude<FormFieldState, 'disabled'>\n  value?: string\n  warningMessage?: BaseFormFieldProps['errorMessage']\n}\n\nconst defaultCreateOptionLabel = (query: string): ReactNode => (\n  <>\n    <PlusIcon size={16} className='shrink-0' />\n    <span className='truncate'>\n      Create <span className='font-semibold'>&ldquo;{query}&rdquo;</span>\n    </span>\n  </>\n)\n\nexport const InputSearch = ({\n  className,\n  createOptionLabel = defaultCreateOptionLabel,\n  creatingLabel = 'Creating…',\n  defaultValue = '',\n  disabled,\n  dropdownWidth = 'trigger',\n  emptyMessage = 'No options found',\n  errorMessage,\n  hideSearchIcon = false,\n  id,\n  isCreating = false,\n  label,\n  labelClassName,\n  messageReserveLines = 1,\n  messageReserveSpace = false,\n  name,\n  onChange,\n  onCreate,\n  onValueChange,\n  openOnFocus = false,\n  options,\n  placeholder = 'Search…',\n  ref,\n  renderOption,\n  required,\n  state = 'default',\n  value: valueProp,\n  warningMessage,\n  'aria-describedby': ariaDescribedBy,\n  'aria-label': ariaLabel,\n}: InputSearchProps & { ref?: Ref<HTMLDivElement> }) => {\n  if (process.env.NODE_ENV !== 'production' && !label && !ariaLabel) {\n    // eslint-disable-next-line no-console\n    console.warn('InputSearch: provide either `label` or `aria-label` for an accessible name.')\n  }\n\n  const fieldId = useFormFieldId(id, name)\n  const listboxId = `${fieldId}-listbox`\n  const errorMessageId = getErrorMessageId(fieldId)\n  const warningMessageId = getWarningMessageId(fieldId)\n  const messageId = state === 'error' ? errorMessageId : state === 'warning' && warningMessage ? warningMessageId : undefined\n  const { isDisabled, isLoading, isInvalid } = useFormFieldState(disabled, state)\n  const ariaProps = getAriaProps(state, ariaDescribedBy, required, messageId)\n\n  const [value, setValue] = useUncontrolledState<string>({\n    value: valueProp,\n    defaultValue,\n    onChange: (nextValue) => {\n      if (onChange) {\n        onChange(nextValue)\n      } else {\n        onValueChange?.(nextValue)\n      }\n    },\n  })\n\n  const [query, setQuery] = useState('')\n  const [isFocused, setIsFocused] = useState(false)\n  const [highlightedIndex, setHighlightedIndex] = useState(-1)\n  const [dropdownPosition, setDropdownPosition] = useState<{ top: number; left: number; width: number } | null>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const listRef = useRef<HTMLDivElement>(null)\n  const blurTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const triggerRef = useRef<HTMLDivElement>(null)\n\n  const selectedOption = useMemo(() => options.find((option) => option.value === value) ?? null, [options, value])\n\n  useEffect(() => {\n    if (!isFocused) {\n      setQuery(selectedOption?.label ?? '')\n    }\n  }, [selectedOption, isFocused])\n\n  const trimmedQuery = query.trim()\n\n  const filteredOptions = useMemo(() => {\n    if (trimmedQuery.length === 0) return options\n    const lower = trimmedQuery.toLowerCase()\n    return options.filter((option) => option.label.toLowerCase().includes(lower))\n  }, [trimmedQuery, options])\n\n  const exactMatch = useMemo(() => options.some((option) => option.label.toLowerCase() === trimmedQuery.toLowerCase()), [options, trimmedQuery])\n\n  const showCreateOption = onCreate !== undefined && trimmedQuery.length > 0 && !exactMatch\n  const createOptionIndex = showCreateOption ? filteredOptions.length : -1\n  const totalItems = filteredOptions.length + (showCreateOption ? 1 : 0)\n  const showDropdown = isFocused && !isDisabled && !isLoading && (openOnFocus || trimmedQuery.length > 0)\n  const showEmptyState = showDropdown && totalItems === 0\n\n  const { dropdownShiftStyle, recalculateDropdownPosition, setDropdownElement } = useAutoDropdownHorizontalShift(showDropdown)\n\n  const updateDropdownPosition = useCallback(() => {\n    const trigger = triggerRef.current\n    if (!trigger) return\n    const rect = trigger.getBoundingClientRect()\n    setDropdownPosition({\n      top: rect.bottom + 4,\n      left: rect.left,\n      width: rect.width,\n    })\n    recalculateDropdownPosition()\n  }, [recalculateDropdownPosition])\n\n  useLayoutEffect(() => {\n    if (!showDropdown) {\n      setDropdownPosition(null)\n      return\n    }\n    updateDropdownPosition()\n    const handle = () => updateDropdownPosition()\n    window.addEventListener('scroll', handle, true)\n    window.addEventListener('resize', handle)\n    return () => {\n      window.removeEventListener('scroll', handle, true)\n      window.removeEventListener('resize', handle)\n    }\n  }, [showDropdown, updateDropdownPosition])\n\n  useLayoutEffect(() => {\n    if (!showDropdown) return\n    updateDropdownPosition()\n  }, [showDropdown, updateDropdownPosition, filteredOptions.length, showCreateOption])\n\n  useEffect(() => {\n    setHighlightedIndex(-1)\n  }, [filteredOptions.length, showCreateOption])\n\n  useEffect(() => {\n    if (highlightedIndex < 0 || !listRef.current) return\n    const element = listRef.current.querySelector<HTMLElement>(`[data-index='${highlightedIndex}']`)\n    element?.scrollIntoView({ block: 'nearest' })\n  }, [highlightedIndex])\n\n  useEffect(\n    () => () => {\n      if (blurTimeoutRef.current !== null) {\n        clearTimeout(blurTimeoutRef.current)\n      }\n    },\n    [],\n  )\n\n  const commitSelection = useCallback(\n    (option: InputSearchOption) => {\n      if (option.disabled) return\n      setValue(option.value)\n      setQuery(option.label)\n      setIsFocused(false)\n      setHighlightedIndex(-1)\n      inputRef.current?.blur()\n    },\n    [setValue],\n  )\n\n  const commitCreate = useCallback(() => {\n    if (!onCreate || isCreating || trimmedQuery.length === 0) return\n    onCreate(trimmedQuery)\n  }, [onCreate, isCreating, trimmedQuery])\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLInputElement>) => {\n      switch (event.key) {\n        case 'ArrowDown': {\n          if (totalItems === 0) return\n          event.preventDefault()\n          setHighlightedIndex((prev) => (prev < totalItems - 1 ? prev + 1 : prev))\n          break\n        }\n        case 'ArrowUp': {\n          if (totalItems === 0) return\n          event.preventDefault()\n          setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : 0))\n          break\n        }\n        case 'Enter': {\n          if (totalItems === 0) return\n          event.preventDefault()\n          if (highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) {\n            const option = filteredOptions[highlightedIndex]\n            if (option) commitSelection(option)\n          } else if (highlightedIndex === createOptionIndex && !isCreating) {\n            commitCreate()\n          }\n          break\n        }\n        case 'Escape': {\n          event.preventDefault()\n          setIsFocused(false)\n          setHighlightedIndex(-1)\n          if (selectedOption) setQuery(selectedOption.label)\n          inputRef.current?.blur()\n          break\n        }\n        default:\n          break\n      }\n    },\n    [totalItems, filteredOptions, highlightedIndex, createOptionIndex, commitSelection, commitCreate, isCreating, selectedOption],\n  )\n\n  const handleFocus = useCallback(() => {\n    if (blurTimeoutRef.current !== null) {\n      clearTimeout(blurTimeoutRef.current)\n      blurTimeoutRef.current = null\n    }\n    setIsFocused(true)\n    setQuery('')\n  }, [])\n\n  const handleBlur = useCallback(() => {\n    if (blurTimeoutRef.current !== null) {\n      clearTimeout(blurTimeoutRef.current)\n    }\n    blurTimeoutRef.current = setTimeout(() => {\n      blurTimeoutRef.current = null\n      // Don't write to `query` here — the useEffect tied to selectedOption + isFocused\n      // is the single source of truth for the visible query when the field isn't focused.\n      // Setting it from this stale closure causes off-by-one display after selection.\n      setIsFocused(false)\n      setHighlightedIndex(-1)\n    }, 150)\n  }, [])\n\n  const handleClear = useCallback(() => {\n    setValue('')\n    setQuery('')\n    inputRef.current?.focus()\n  }, [setValue])\n\n  const showClearButton = !isLoading && !isDisabled && (value.length > 0 || (isFocused && query.length > 0))\n\n  const { dropdownWidthMode, dropdownWidthStyle } = getDropdownWidthStyles({\n    dropdownWidth,\n    triggerWidth: '100%',\n  })\n\n  const inputClasses = cn(getInputClasses(state, className), 'pe-4', !hideSearchIcon && 'ps-11', showClearButton && 'pe-10!', state === 'loading' && 'cursor-wait')\n\n  return (\n    <div className='flex w-full flex-col' data-testid='spectral-input-search-container' ref={ref}>\n      {label && (\n        <Label className={cn('mb-2 block', labelClassName, isDisabled && 'cursor-not-allowed text-input-text--disabled')} data-testid='spectral-input-search-label' htmlFor={fieldId}>\n          {label}\n        </Label>\n      )}\n\n      <div className='relative' data-testid='spectral-input-search-wrapper' ref={triggerRef}>\n        <div className='relative'>\n          {!hideSearchIcon && (\n            <span aria-hidden='true' className={cn('left-4 text-input-icon absolute top-1/2 -translate-y-1/2', isDisabled && 'text-input-text--disabled')} data-testid='spectral-input-search-icon'>\n              <SearchIcon size={20} />\n            </span>\n          )}\n\n          <input\n            aria-activedescendant={highlightedIndex >= 0 ? `${fieldId}-option-${highlightedIndex}` : undefined}\n            aria-autocomplete='list'\n            aria-controls={listboxId}\n            aria-expanded={showDropdown}\n            // oxlint-disable-next-line jsx-a11y/role-supports-aria-props -- Valid per WAI-ARIA 1.2 Combobox pattern\n            aria-haspopup='listbox'\n            aria-label={ariaLabel ?? label}\n            autoComplete='off'\n            className={inputClasses}\n            data-state={state}\n            data-testid='spectral-input-search'\n            disabled={isDisabled || isLoading}\n            id={fieldId}\n            name={name}\n            onBlur={handleBlur}\n            onChange={(event) => {\n              setQuery(event.target.value)\n              if (!isFocused) setIsFocused(true)\n            }}\n            onFocus={handleFocus}\n            onKeyDown={handleKeyDown}\n            placeholder={placeholder}\n            ref={inputRef}\n            required={required}\n            role='combobox'\n            style={getFormFieldCSSProperties() as CSSProperties}\n            type='text'\n            value={query}\n            {...getPasswordManagerIgnoreProps('text')}\n            {...ariaProps}\n          />\n\n          {showClearButton ? (\n            <button\n              aria-label={`Clear ${label ?? 'search'}`}\n              className='right-4 text-input-icon hover:text-input-icon--hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-input-border--focus rounded-sm absolute top-1/2 -translate-y-1/2 cursor-pointer'\n              data-testid='spectral-input-search-clear-button'\n              onClick={handleClear}\n              // Prevent input blur from firing before click resolves\n              onMouseDown={(event) => event.preventDefault()}\n              type='button'\n            >\n              <CloseCircleIcon size={20} />\n            </button>\n          ) : state === 'loading' ? (\n            <div className='right-4 text-input-icon absolute top-1/2 -translate-y-1/2' data-testid='spectral-input-search-loading-icon'>\n              <LoaderIcon className='motion-safe:animate-spin' size={20} />\n            </div>\n          ) : state === 'error' ? (\n            <div className='right-4 text-danger-400 absolute top-1/2 -translate-y-1/2' data-testid='spectral-input-search-error-icon'>\n              <ErrorIcon size={20} />\n            </div>\n          ) : state === 'warning' ? (\n            <div className='right-4 text-warning-400 absolute top-1/2 -translate-y-1/2' data-testid='spectral-input-search-warning-icon'>\n              <WarningIcon size={20} />\n            </div>\n          ) : null}\n        </div>\n\n      </div>\n\n      {showDropdown && dropdownPosition && typeof document !== 'undefined'\n        ? createPortal(\n            <div\n              className={cn('origin-top p-1 z-50 fixed', getDropdownSurfaceClasses(), 'max-h-72 overflow-hidden', 'motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95 motion-safe:slide-in-from-top-2')}\n              data-dropdown-width-mode={dropdownWidthMode}\n              data-dropdown-width-value={dropdownWidthMode === 'custom' ? dropdownWidth : undefined}\n              data-testid='spectral-input-search-content'\n              ref={setDropdownElement}\n              style={{\n                top: `${dropdownPosition.top}px`,\n                left: `${dropdownPosition.left}px`,\n                ...(dropdownWidthMode === 'trigger' ? { width: `${dropdownPosition.width}px` } : (dropdownWidthStyle as CSSProperties)),\n                ...dropdownShiftStyle,\n              }}\n            >\n              <div\n                className='max-h-[17.5rem] overflow-y-auto'\n                id={listboxId}\n                ref={listRef}\n                // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- WAI-ARIA combobox pattern requires role='listbox' on the popup\n                role='listbox'\n              >\n                {showEmptyState ? (\n                  <EmptyState message={emptyMessage} />\n                ) : (\n                  <>\n                    {filteredOptions.map((option, index) => {\n                    const isHighlighted = index === highlightedIndex\n                    const isSelected = option.value === value\n                    return (\n                      <button\n                        aria-selected={isSelected}\n                        className={cn(getOptionClasses(!!option.disabled, isHighlighted, isSelected), 'text-left')}\n                        data-highlighted={isHighlighted ? '' : undefined}\n                        data-index={index}\n                        data-testid='spectral-input-search-item'\n                        disabled={option.disabled}\n                        id={`${fieldId}-option-${index}`}\n                        key={option.value}\n                        onMouseDown={(event) => {\n                          event.preventDefault()\n                          commitSelection(option)\n                        }}\n                        onMouseEnter={() => setHighlightedIndex(index)}\n                        role='option'\n                        tabIndex={-1}\n                        type='button'\n                      >\n                        <span className='min-w-0 flex-1 truncate'>{renderOption ? renderOption(option) : option.label}</span>\n                      </button>\n                    )\n                  })}\n\n                    {showCreateOption && (\n                      <button\n                        aria-selected={createOptionIndex === highlightedIndex}\n                        className={cn(getOptionClasses(isCreating, createOptionIndex === highlightedIndex, false), 'gap-2 text-left text-accent font-medium')}\n                        data-highlighted={createOptionIndex === highlightedIndex ? '' : undefined}\n                        data-index={createOptionIndex}\n                        data-testid='spectral-input-search-create-option'\n                        disabled={isCreating}\n                        id={`${fieldId}-option-${createOptionIndex}`}\n                        onMouseDown={(event) => {\n                          event.preventDefault()\n                          commitCreate()\n                        }}\n                        onMouseEnter={() => setHighlightedIndex(createOptionIndex)}\n                        role='option'\n                        tabIndex={-1}\n                        type='button'\n                      >\n                        {isCreating ? (\n                          <span className='gap-2 flex items-center'>\n                            <LoaderIcon className='shrink-0 motion-safe:animate-spin' size={16} />\n                            <span>{creatingLabel}</span>\n                          </span>\n                        ) : (\n                          <span className='gap-2 flex items-center min-w-0'>{createOptionLabel(trimmedQuery)}</span>\n                        )}\n                      </button>\n                    )}\n                  </>\n                )}\n              </div>\n            </div>,\n            document.body,\n          )\n        : null}\n\n      <ErrorMessage\n        dataTestId='spectral-input-search-error-message'\n        id={errorMessageId}\n        message={isInvalid ? (errorMessage ?? null) : null}\n        messageReserveLines={messageReserveLines}\n        messageReserveSpace={messageReserveSpace && state === 'error'}\n      />\n      <WarningMessage\n        dataTestId='spectral-input-search-warning-message'\n        id={warningMessageId}\n        message={state === 'warning' ? (warningMessage ?? null) : null}\n        messageReserveLines={messageReserveLines}\n        messageReserveSpace={messageReserveSpace && state === 'warning'}\n      />\n    </div>\n  )\n}\nInputSearch.displayName = 'InputSearch'\n"],"mappings":"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"}

package/dist/Kbd.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Kbd.d.ts","names":[],"sources":["../src/components/Kbd/Kbd.tsx"],"mappings":";;;;;KAGY,SAAA;AAAA,UAEK,QAAA;EACf,SAAA;EACA,MAAA,GAAS,SAAA;EACT,cAAA;AAAA;AAAA,UAGe,aAAA;EACf,SAAA;AAAA;AAAA;EA2FoB,SAAA;EAAW,MAAA;EAAQ,cAAA;EAA0B,QAAA;EAAA,GAAa;AAAA,GAAS,QAAA,GAAW,cAAA,UAAqB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EA4B9F,SAAA;EAAA,GAAc;AAAA,GAAS,aAAA,GAAgB,cAAA,UAAqB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}
+{"version":3,"file":"Kbd.d.ts","names":[],"sources":["../src/components/Kbd/Kbd.tsx"],"mappings":";;;;;KAGY,SAAA;AAAA,UAEK,QAAA;EACf,SAAA;EACA,MAAA,GAAS,SAAA;EACT,cAAA;AAAA;AAAA,UAGe,aAAA;EACf,SAAA;AAAA;AAAA;EA2FoB,SAAA;EAAW,MAAA;EAAQ,cAAA;EAA0B,QAAA;EAAA,GAAa;AAAA,GAAS,QAAA,GAAW,cAAA,UAAqB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EA6B9F,SAAA;EAAA,GAAc;AAAA,GAAS,aAAA,GAAgB,cAAA,UAAqB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}

package/dist/Kbd.js.map

@@ -1 +1 @@
-{"version":3,"file":"Kbd.js","names":[],"sources":["../src/components/Kbd/Kbd.tsx"],"sourcesContent":["import { cn } from '@utils/twUtils'\nimport { type ComponentProps } from 'react'\n\nexport type KbdSymbol = 'arrowLeft' | 'arrowRight' | 'arrowUp' | 'arrowDown' | 'command' | 'option' | 'shift' | 'control' | 'return' | 'delete'\n\nexport interface KbdProps {\n  className?: string\n  symbol?: KbdSymbol\n  symbolPosition?: 'start' | 'end'\n}\n\nexport interface KbdGroupProps {\n  className?: string\n}\n\nconst symbolMap = {\n  arrowLeft: (\n    <svg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>\n      <path d='M10 5.75L3.75 12L10 18.25M4.5 12H20.25' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />\n    </svg>\n  ),\n  arrowRight: (\n    <svg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>\n      <path d='M14 5.75L20.25 12L14 18.25M19.5 12H3.75' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />\n    </svg>\n  ),\n  arrowUp: (\n    <svg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>\n      <path d='M5.75 10L12 3.75L18.25 10M12 20.25V4.5' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />\n    </svg>\n  ),\n  arrowDown: (\n    <svg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>\n      <path d='M18 14L12 20L6 14M12 19V4' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />\n    </svg>\n  ),\n  command: (\n    <svg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>\n      <path\n        d='M9.25 9.25V6.5C9.25 4.98122 8.01878 3.75 6.5 3.75C4.98122 3.75 3.75 4.98122 3.75 6.5C3.75 8.01878 4.98122 9.25 6.5 9.25H9.25ZM9.25 9.25H14.75M9.25 9.25V14.75M14.75 9.25V6.5C14.75 4.98122 15.9812 3.75 17.5 3.75C19.0188 3.75 20.25 4.98122 20.25 6.5C20.25 8.01878 19.0188 9.25 17.5 9.25H14.75ZM14.75 9.25V14.75M14.75 14.75H9.25M14.75 14.75V17.5C14.75 19.0188 15.9812 20.25 17.5 20.25C19.0188 20.25 20.25 19.0188 20.25 17.5C20.25 15.9812 19.0188 14.75 17.5 14.75H14.75ZM9.25 14.75V17.5C9.25 19.0188 8.01878 20.25 6.5 20.25C4.98122 20.25 3.75 19.0188 3.75 17.5C3.75 15.9812 4.98122 14.75 6.5 14.75H9.25Z'\n        stroke='currentColor'\n        strokeWidth='1.5'\n        strokeLinecap='square'\n      />\n    </svg>\n  ),\n  option: (\n    <svg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>\n      <path d='M3.75 4.75H7.40962C7.77384 4.75 8.10925 4.94802 8.2852 5.26692L15.7148 18.7331C15.8907 19.052 16.2262 19.25 16.5904 19.25H20.25M15.75 4.75H20.25' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />\n    </svg>\n  ),\n  shift: (\n    <svg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>\n      <path\n        d='M2.91032 11.5511L11.2848 2.98182C11.6771 2.5804 12.3229 2.5804 12.7152 2.98182L21.0897 11.5511C21.7085 12.1843 21.2599 13.25 20.3745 13.25H17.1316V19.25C17.1316 19.8023 16.6839 20.25 16.1316 20.25H7.86842C7.31614 20.25 6.86842 19.8023 6.86842 19.25V13.25H3.62551C2.74013 13.25 2.2915 12.1843 2.91032 11.5511Z'\n        stroke='currentColor'\n        strokeWidth='1.5'\n        strokeLinecap='square'\n        strokeLinejoin='round'\n      />\n    </svg>\n  ),\n  control: (\n    <svg className='-translate-y-0.5' width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>\n      <path d='M8 13.9999L11.6464 10.3535C11.8417 10.1582 12.1583 10.1582 12.3536 10.3535L16 13.9999' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />\n    </svg>\n  ),\n  return: (\n    <svg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>\n      <path\n        fillRule='evenodd'\n        clipRule='evenodd'\n        d='M20.25 4C19.8358 4 19.5 4.33579 19.5 4.75V14.25C19.5 14.3881 19.3881 14.5 19.25 14.5H5.56066L8.28033 11.7803C8.57322 11.4874 8.57322 11.0126 8.28033 10.7197C7.98744 10.4268 7.51256 10.4268 7.21967 10.7197L3.21967 14.7197C2.92678 15.0126 2.92678 15.4874 3.21967 15.7803L7.21967 19.7803C7.51256 20.0732 7.98744 20.0732 8.28033 19.7803C8.57322 19.4874 8.57322 19.0126 8.28033 18.7197L5.56066 16H19.25C20.2165 16 21 15.2165 21 14.25V4.75C21 4.33579 20.6642 4 20.25 4Z'\n        fill='currentColor'\n      />\n    </svg>\n  ),\n  delete: (\n    <svg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>\n      <path\n        d='M14.9988 9.75L12.7488 12M12.7488 12L10.4988 14.25M12.7488 12L10.4988 9.75M12.7488 12L14.9988 14.25M6.55509 4.75H20.2488C20.8011 4.75 21.2488 5.19772 21.2488 5.75V18.25C21.2488 18.8023 20.8011 19.25 20.2488 19.25H6.55509C6.2092 19.25 5.88786 19.0712 5.70545 18.7774L1.82614 12.5274C1.62566 12.2044 1.62566 11.7956 1.82614 11.4726L5.70545 5.22264C5.88786 4.92875 6.2092 4.75 6.55509 4.75Z'\n        stroke='currentColor'\n        strokeWidth='1.5'\n        strokeLinecap='round'\n        strokeLinejoin='round'\n      />\n    </svg>\n  ),\n} as const\n\nconst symbolLabelMap: Record<KbdSymbol, string> = {\n  arrowLeft: 'Left Arrow',\n  arrowRight: 'Right Arrow',\n  arrowUp: 'Up Arrow',\n  arrowDown: 'Down Arrow',\n  command: 'Command',\n  option: 'Option',\n  shift: 'Shift',\n  control: 'Control',\n  return: 'Return',\n  delete: 'Delete',\n}\n\nexport const Kbd = ({ className, symbol, symbolPosition = 'start', children, ...props }: KbdProps & ComponentProps<'kbd'>) => {\n  const hasChildren = children !== undefined && children !== null && children !== ''\n  const symbolElement = symbol && <span aria-hidden='true'>{symbolMap[symbol]}</span>\n\n  // Derive aria-label from symbol when no children are provided, unless explicitly overridden\n  const derivedAriaLabel = !hasChildren && symbol ? symbolLabelMap[symbol] : undefined\n  const ariaLabel = props['aria-label'] ?? derivedAriaLabel\n\n  return (\n    <kbd\n      className={cn(\n        'h-5 min-w-5 gap-1 rounded-sm px-1 text-xs font-medium pointer-events-none inline-flex w-fit items-center justify-center bg-kbd-bg font-mono! text-kbd-text select-none',\n        `[&_svg:not([class*='size-'])]:size-3 in-data-[slot=tooltip-content]:bg-level-three`,\n        className,\n      )}\n      data-slot='kbd'\n      data-testid='spectral-kbd'\n      {...props}\n      aria-label={ariaLabel}\n    >\n      {symbolPosition === 'start' && symbolElement}\n      {children}\n      {symbolPosition === 'end' && symbolElement}\n    </kbd>\n  )\n}\nKbd.displayName = 'Kbd'\n\nexport const KbdGroup = ({ className, ...props }: KbdGroupProps & ComponentProps<'kbd'>) => {\n  return <kbd className={cn('gap-1 inline-flex items-center', className)} data-slot='kbd-group' data-testid='spectral-kbd-group' {...props} />\n}\nKbdGroup.displayName = 'KbdGroup'\n"],"mappings":";;;;;;AAeA,MAAM,YAAY;CAChB,WACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,OAAM;YAChE,oBAAC,QAAD;GAAM,GAAE;GAAyC,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAS;EACpI;CAEP,YACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,OAAM;YAChE,oBAAC,QAAD;GAAM,GAAE;GAA0C,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAS;EACrI;CAEP,SACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,OAAM;YAChE,oBAAC,QAAD;GAAM,GAAE;GAAyC,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAS;EACpI;CAEP,WACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,OAAM;YAChE,oBAAC,QAAD;GAAM,GAAE;GAA4B,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAS;EACvH;CAEP,SACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,OAAM;YAChE,oBAAC,QAAD;GACE,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;GACf;EACE;CAEP,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,OAAM;YAChE,oBAAC,QAAD;GAAM,GAAE;GAAmJ,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAS;EAC9O;CAEP,OACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,OAAM;YAChE,oBAAC,QAAD;GACE,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;GAChB;EACE;CAEP,SACE,oBAAC,OAAD;EAAK,WAAU;EAAmB,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,OAAM;YAC7F,oBAAC,QAAD;GAAM,GAAE;GAAwF,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAS;EACnL;CAEP,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,OAAM;YAChE,oBAAC,QAAD;GACE,UAAS;GACT,UAAS;GACT,GAAE;GACF,MAAK;GACN;EACE;CAEP,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,OAAM;YAChE,oBAAC,QAAD;GACE,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;GAChB;EACE;CAER;AAED,MAAM,iBAA4C;CAChD,WAAW;CACX,YAAY;CACZ,SAAS;CACT,WAAW;CACX,SAAS;CACT,QAAQ;CACR,OAAO;CACP,SAAS;CACT,QAAQ;CACR,QAAQ;CACV;AAEA,MAAa,OAAO,EAAE,WAAW,QAAQ,iBAAiB,SAAS,UAAU,GAAG,YAA8C;CAC5H,MAAM,cAAc,aAAa,UAAa,aAAa,QAAQ,aAAa;CAChF,MAAM,gBAAgB,UAAU,oBAAC,QAAD;EAAM,eAAY;YAAQ,UAAU;EAAc;CAGlF,MAAM,mBAAmB,CAAC,eAAe,SAAS,eAAe,UAAU;CAC3E,MAAM,YAAY,MAAM,iBAAiB;AAEzC,QACE,qBAAC,OAAD;EACE,WAAW,GACT,0KACA,sFACA,UACD;EACD,aAAU;EAEV,GAAI;EACJ,cAAY;YATd;GAWG,mBAAmB,WAAW;GAC9B;GACA,mBAAmB,SAAS;GAC1B;;;AAGT,IAAI,cAAc;AAElB,MAAa,YAAY,EAAE,WAAW,GAAG,YAAmD;AAC1F,QAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,kCAAkC,UAAU;EAAE,aAAU;EAA6C,GAAI;EAAQ;;AAE7I,SAAS,cAAc"}
+{"version":3,"file":"Kbd.js","names":[],"sources":["../src/components/Kbd/Kbd.tsx"],"sourcesContent":["import { cn } from '@utils/twUtils'\nimport { type ComponentProps } from 'react'\n\nexport type KbdSymbol = 'arrowLeft' | 'arrowRight' | 'arrowUp' | 'arrowDown' | 'command' | 'option' | 'shift' | 'control' | 'return' | 'delete'\n\nexport interface KbdProps {\n  className?: string\n  symbol?: KbdSymbol\n  symbolPosition?: 'start' | 'end'\n}\n\nexport interface KbdGroupProps {\n  className?: string\n}\n\nconst symbolMap = {\n  arrowLeft: (\n    <svg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>\n      <path d='M10 5.75L3.75 12L10 18.25M4.5 12H20.25' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />\n    </svg>\n  ),\n  arrowRight: (\n    <svg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>\n      <path d='M14 5.75L20.25 12L14 18.25M19.5 12H3.75' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />\n    </svg>\n  ),\n  arrowUp: (\n    <svg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>\n      <path d='M5.75 10L12 3.75L18.25 10M12 20.25V4.5' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />\n    </svg>\n  ),\n  arrowDown: (\n    <svg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>\n      <path d='M18 14L12 20L6 14M12 19V4' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />\n    </svg>\n  ),\n  command: (\n    <svg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>\n      <path\n        d='M9.25 9.25V6.5C9.25 4.98122 8.01878 3.75 6.5 3.75C4.98122 3.75 3.75 4.98122 3.75 6.5C3.75 8.01878 4.98122 9.25 6.5 9.25H9.25ZM9.25 9.25H14.75M9.25 9.25V14.75M14.75 9.25V6.5C14.75 4.98122 15.9812 3.75 17.5 3.75C19.0188 3.75 20.25 4.98122 20.25 6.5C20.25 8.01878 19.0188 9.25 17.5 9.25H14.75ZM14.75 9.25V14.75M14.75 14.75H9.25M14.75 14.75V17.5C14.75 19.0188 15.9812 20.25 17.5 20.25C19.0188 20.25 20.25 19.0188 20.25 17.5C20.25 15.9812 19.0188 14.75 17.5 14.75H14.75ZM9.25 14.75V17.5C9.25 19.0188 8.01878 20.25 6.5 20.25C4.98122 20.25 3.75 19.0188 3.75 17.5C3.75 15.9812 4.98122 14.75 6.5 14.75H9.25Z'\n        stroke='currentColor'\n        strokeWidth='1.5'\n        strokeLinecap='square'\n      />\n    </svg>\n  ),\n  option: (\n    <svg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>\n      <path d='M3.75 4.75H7.40962C7.77384 4.75 8.10925 4.94802 8.2852 5.26692L15.7148 18.7331C15.8907 19.052 16.2262 19.25 16.5904 19.25H20.25M15.75 4.75H20.25' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />\n    </svg>\n  ),\n  shift: (\n    <svg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>\n      <path\n        d='M2.91032 11.5511L11.2848 2.98182C11.6771 2.5804 12.3229 2.5804 12.7152 2.98182L21.0897 11.5511C21.7085 12.1843 21.2599 13.25 20.3745 13.25H17.1316V19.25C17.1316 19.8023 16.6839 20.25 16.1316 20.25H7.86842C7.31614 20.25 6.86842 19.8023 6.86842 19.25V13.25H3.62551C2.74013 13.25 2.2915 12.1843 2.91032 11.5511Z'\n        stroke='currentColor'\n        strokeWidth='1.5'\n        strokeLinecap='square'\n        strokeLinejoin='round'\n      />\n    </svg>\n  ),\n  control: (\n    <svg className='-translate-y-0.5' width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>\n      <path d='M8 13.9999L11.6464 10.3535C11.8417 10.1582 12.1583 10.1582 12.3536 10.3535L16 13.9999' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />\n    </svg>\n  ),\n  return: (\n    <svg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>\n      <path\n        fillRule='evenodd'\n        clipRule='evenodd'\n        d='M20.25 4C19.8358 4 19.5 4.33579 19.5 4.75V14.25C19.5 14.3881 19.3881 14.5 19.25 14.5H5.56066L8.28033 11.7803C8.57322 11.4874 8.57322 11.0126 8.28033 10.7197C7.98744 10.4268 7.51256 10.4268 7.21967 10.7197L3.21967 14.7197C2.92678 15.0126 2.92678 15.4874 3.21967 15.7803L7.21967 19.7803C7.51256 20.0732 7.98744 20.0732 8.28033 19.7803C8.57322 19.4874 8.57322 19.0126 8.28033 18.7197L5.56066 16H19.25C20.2165 16 21 15.2165 21 14.25V4.75C21 4.33579 20.6642 4 20.25 4Z'\n        fill='currentColor'\n      />\n    </svg>\n  ),\n  delete: (\n    <svg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>\n      <path\n        d='M14.9988 9.75L12.7488 12M12.7488 12L10.4988 14.25M12.7488 12L10.4988 9.75M12.7488 12L14.9988 14.25M6.55509 4.75H20.2488C20.8011 4.75 21.2488 5.19772 21.2488 5.75V18.25C21.2488 18.8023 20.8011 19.25 20.2488 19.25H6.55509C6.2092 19.25 5.88786 19.0712 5.70545 18.7774L1.82614 12.5274C1.62566 12.2044 1.62566 11.7956 1.82614 11.4726L5.70545 5.22264C5.88786 4.92875 6.2092 4.75 6.55509 4.75Z'\n        stroke='currentColor'\n        strokeWidth='1.5'\n        strokeLinecap='round'\n        strokeLinejoin='round'\n      />\n    </svg>\n  ),\n} as const\n\nconst symbolLabelMap: Record<KbdSymbol, string> = {\n  arrowLeft: 'Left Arrow',\n  arrowRight: 'Right Arrow',\n  arrowUp: 'Up Arrow',\n  arrowDown: 'Down Arrow',\n  command: 'Command',\n  option: 'Option',\n  shift: 'Shift',\n  control: 'Control',\n  return: 'Return',\n  delete: 'Delete',\n}\n\nexport const Kbd = ({ className, symbol, symbolPosition = 'start', children, ...props }: KbdProps & ComponentProps<'kbd'>) => {\n  const hasChildren = children !== undefined && children !== null && children !== ''\n  const symbolElement = symbol && <span aria-hidden='true'>{symbolMap[symbol]}</span>\n\n  // Derive aria-label from symbol when no children are provided, unless explicitly overridden\n  const derivedAriaLabel = !hasChildren && symbol ? symbolLabelMap[symbol] : undefined\n  const ariaLabel = props['aria-label'] ?? derivedAriaLabel\n\n  return (\n    <kbd\n      className={cn(\n        'h-5 min-w-5 gap-1 rounded-sm px-1 text-xs font-medium pointer-events-none inline-flex w-fit items-center justify-center bg-kbd-bg font-mono! text-kbd-text select-none',\n        `[&_svg:not([class*='size-'])]:size-3 in-data-[slot=tooltip-content]:bg-level-three`,\n        className,\n      )}\n      data-slot='kbd'\n      data-testid='spectral-kbd'\n      {...props}\n      aria-label={ariaLabel}\n    >\n      {symbolPosition === 'start' && symbolElement}\n      {children}\n      {symbolPosition === 'end' && symbolElement}\n    </kbd>\n  )\n}\n\nKbd.displayName = 'Kbd'\n\nexport const KbdGroup = ({ className, ...props }: KbdGroupProps & ComponentProps<'kbd'>) => {\n  return <kbd className={cn('gap-1 inline-flex items-center', className)} data-slot='kbd-group' data-testid='spectral-kbd-group' {...props} />\n}\n\nKbdGroup.displayName = 'KbdGroup'\n"],"mappings":"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"}

package/dist/MultiSelect/MultiSelectBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectBase.d.ts","names":[],"sources":["../../src/components/MultiSelect/MultiSelectBase.tsx"],"mappings":";;;;;;KASY,gBAAA,GAAmB,OAAA,CAAQ,cAAA;AAAA,UAEtB,iBAAA;EACf,QAAA;EACA,KAAA;EACA,KAAA;EACA,KAAA;AAAA;AAAA,UAGe,oBAAA,SAA6B,IAAA,CAAK,oBAAA,CAAqB,iBAAA;EACtE,aAAA;EACA,aAAA;EACA,aAAA,GAAgB,aAAA;EAChB,YAAA;EACA,YAAA,GAAe,kBAAA;EACf,EAAA;EACA,KAAA;EACA,cAAA;EACA,QAAA;EACA,mBAAA;EACA,mBAAA;EACA,IAAA;EACA,YAAA;EACA,QAAA,IAAY,KAAA;EACZ,OAAA,EAAS,iBAAA;EACT,WAAA;EACA,QAAA;EACA,iBAAA;EACA,YAAA;EACA,UAAA;EACA,aAAA;EACA,cAAA;EACA,kBAAA;EACA,KAAA,GAAQ,gBAAA;EACR,KAAA;EACA,cAAA,GAAiB,kBAAA;EACjB,YAAA;EACA,kBAAA;AAAA;AAAA;EA6MA,SAAA;EACA,aAAA;EACA,aAAA;EACA,aAAA;EACA,YAAA;EACA,YAAA;EACA,YAAA;EACA,QAAA;EACA,EAAA;EACA,KAAA;EACA,cAAA;EACA,mBAAA;EACA,mBAAA;EACA,QAAA;EACA,IAAA;EACA,QAAA;EACA,OAAA;EACA,WAAA;EACA,GAAA;EACA,iBAAA;EACA,cAAA;EACA,YAAA;EACA,UAAA;EACA,aAAA;EACA,kBAAA;EACA,KAAA;EACA,KAAA,EAAO,SAAA;EACP,cAAA;EAAA,cACc,SAAA;EAAA,oBACM,eAAA;EAAA,GACjB;AAAA,GACF,oBAAA;EACD,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}
+{"version":3,"file":"MultiSelectBase.d.ts","names":[],"sources":["../../src/components/MultiSelect/MultiSelectBase.tsx"],"mappings":";;;;;;KAyBY,gBAAA,GAAmB,OAAA,CAAQ,cAAA;AAAA,UAEtB,iBAAA;EACf,QAAA;EACA,KAAA;EACA,KAAA;EACA,KAAA;AAAA;AAAA,UAGe,oBAAA,SAA6B,IAAA,CAAK,oBAAA,CAAqB,iBAAA;EACtE,aAAA;EACA,aAAA;EACA,aAAA,GAAgB,aAAA;EAChB,YAAA;EACA,YAAA,GAAe,kBAAA;EACf,EAAA;EACA,KAAA;EACA,cAAA;EACA,QAAA;EACA,mBAAA;EACA,mBAAA;EACA,IAAA;EACA,YAAA;EACA,QAAA,IAAY,KAAA;EACZ,OAAA,EAAS,iBAAA;EACT,WAAA;EACA,QAAA;EACA,iBAAA;EACA,YAAA;EACA,UAAA;EACA,aAAA;EACA,cAAA;EACA,kBAAA;EACA,KAAA,GAAQ,gBAAA;EACR,KAAA;EACA,cAAA,GAAiB,kBAAA;EACjB,YAAA;EACA,kBAAA;AAAA;AAAA;EA4MA,SAAA;EACA,aAAA;EACA,aAAA;EACA,aAAA;EACA,YAAA;EACA,YAAA;EACA,YAAA;EACA,QAAA;EACA,EAAA;EACA,KAAA;EACA,cAAA;EACA,mBAAA;EACA,mBAAA;EACA,QAAA;EACA,IAAA;EACA,QAAA;EACA,OAAA;EACA,WAAA;EACA,GAAA;EACA,iBAAA;EACA,cAAA;EACA,YAAA;EACA,UAAA;EACA,aAAA;EACA,kBAAA;EACA,KAAA;EACA,KAAA,EAAO,SAAA;EACP,cAAA;EAAA,cACc,SAAA;EAAA,oBACM,eAAA;EAAA,GACjB;AAAA,GACF,oBAAA;EACD,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}

package/dist/MultiSelect/MultiSelectBase.js

@@ -16,7 +16,7 @@ import * as Popover from "@radix-ui/react-popover";
 //#region src/components/MultiSelect/MultiSelectBase.tsx
 const ICON_SIZE = "h-4 w-4";
 const getDropdownClasses = () => {
-	return cn("max-h-80 z-50 overflow-hidden", getDropdownSurfaceClasses(), "motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:animate-in", "motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:fade-in-0", "motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-95", "motion-safe:data-[side=bottom]:slide-in-from-top-2", "motion-safe:data-[side=top]:slide-in-from-bottom-2", "origin-(--radix-popover-content-transform-origin)");
+	return cn("max-h-80 z-50 overflow-hidden", getDropdownSurfaceClasses(), "motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:animate-in", "motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:fade-in-0", "motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-95", "motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=top]:slide-in-from-bottom-2", "origin-(--radix-popover-content-transform-origin)");
 };
 const useKeyboardNavigation = (options, onClearAll, onClose, onSelect, onSelectAll, searchInputRef, showSearch, showSelectAll, showClearAll) => {
 	const [focusedIndex, setFocusedIndex] = useState(-1);

package/dist/MultiSelect/MultiSelectBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectBase.js","names":[],"sources":["../../src/components/MultiSelect/MultiSelectBase.tsx"],"sourcesContent":["import { CheckmarkIcon, ChevronDownIcon, CloseIcon, SearchIcon } from '@components/Icons'\nimport { Label } from '@components/Label/Label'\nimport { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport * as Popover from '@radix-ui/react-popover'\nimport { useAutoDropdownHorizontalShift } from '@utils/dropdownPositioning'\nimport { EmptyState, ErrorMessage, getAriaProps, getDropdownSurfaceClasses, getDropdownWidthStyles, getErrorMessageId, getPasswordManagerIgnoreProps, getTriggerClasses, getWarningMessageId, LoadingState, WarningMessage, useFormFieldId, type BaseFormFieldProps, type DropdownWidth, type FormFieldState } from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { useCallback, useEffect, useId, useMemo, useRef, useState, type ButtonHTMLAttributes, type ChangeEvent, type CSSProperties, type KeyboardEvent, type Ref } from 'react'\n\nexport type MultiSelectState = Exclude<FormFieldState, 'disabled'>\n\nexport interface MultiSelectOption {\n  disabled?: boolean\n  group?: string\n  label: string\n  value: string\n}\n\nexport interface MultiSelectBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {\n  clearAllLabel?: string\n  closeOnSelect?: boolean\n  dropdownWidth?: DropdownWidth\n  emptyMessage?: string\n  errorMessage?: BaseFormFieldProps['errorMessage']\n  id?: string\n  label?: string\n  loadingMessage?: string\n  maxCount?: number\n  messageReserveLines?: number\n  messageReserveSpace?: boolean\n  name?: string\n  defaultValue?: string[]\n  onChange?: (value: string[]) => void\n  options: MultiSelectOption[]\n  placeholder?: string\n  required?: boolean\n  searchPlaceholder?: string\n  showClearAll?: boolean\n  showSearch?: boolean\n  showSelectAll?: boolean\n  selectAllLabel?: string\n  sortAlphabetically?: boolean\n  state?: MultiSelectState\n  value?: string[]\n  warningMessage?: BaseFormFieldProps['errorMessage']\n  'aria-label'?: string\n  'aria-describedby'?: string\n}\n\nconst ICON_SIZE = 'h-4 w-4'\n\nconst getDropdownClasses = (): string => {\n  return cn(\n    'max-h-80 z-50 overflow-hidden',\n    getDropdownSurfaceClasses(),\n    'motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:animate-in',\n    'motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:fade-in-0',\n    'motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-95',\n    'motion-safe:data-[side=bottom]:slide-in-from-top-2',\n    'motion-safe:data-[side=top]:slide-in-from-bottom-2',\n    'origin-(--radix-popover-content-transform-origin)',\n  )\n}\n\ntype FocusableItem = { type: 'search' } | { type: 'select-all' } | { type: 'option'; index: number; value: string } | { type: 'clear-all' }\n\nconst useKeyboardNavigation = (\n  options: MultiSelectOption[],\n  onClearAll: () => void,\n  onClose: () => void,\n  onSelect: (value: string) => void,\n  onSelectAll: () => void,\n  searchInputRef: React.RefObject<HTMLInputElement | null>,\n  showSearch: boolean,\n  showSelectAll: boolean,\n  showClearAll: boolean,\n) => {\n  const [focusedIndex, setFocusedIndex] = useState(-1)\n\n  // Build a flat list of all focusable items\n  const focusableItems = useMemo((): FocusableItem[] => {\n    const items: FocusableItem[] = []\n\n    if (showSearch) {\n      items.push({ type: 'search' })\n    }\n\n    if (showSelectAll) {\n      items.push({ type: 'select-all' })\n    }\n\n    options.forEach((option, index) => {\n      if (!option.disabled) {\n        items.push({ type: 'option', index, value: option.value })\n      }\n    })\n\n    if (showClearAll) {\n      items.push({ type: 'clear-all' })\n    }\n\n    return items\n  }, [options, showSearch, showSelectAll, showClearAll])\n\n  // Focus the appropriate element when focusedIndex changes\n  const focusCurrentItem = useCallback(\n    (index: number) => {\n      if (index < 0 || index >= focusableItems.length) return\n      const item = focusableItems[index]\n      if (item.type === 'search') {\n        searchInputRef.current?.focus()\n      }\n    },\n    [focusableItems, searchInputRef],\n  )\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      const currentItem = focusedIndex >= 0 && focusedIndex < focusableItems.length ? focusableItems[focusedIndex] : null\n\n      // Don't prevent default for space in search input (allow typing spaces)\n      if (event.key === ' ' && currentItem?.type === 'search') {\n        return\n      }\n\n      // Don't prevent default for Enter in search input (allow form submission behavior)\n      if (event.key === 'Enter' && currentItem?.type === 'search') {\n        return\n      }\n\n      const keyHandlers: Record<string, () => void> = {\n        ArrowDown: () => {\n          event.preventDefault()\n          const newIndex = Math.min(focusedIndex + 1, focusableItems.length - 1)\n          setFocusedIndex(newIndex)\n          focusCurrentItem(newIndex)\n        },\n        ArrowUp: () => {\n          event.preventDefault()\n          const newIndex = Math.max(focusedIndex - 1, 0)\n          setFocusedIndex(newIndex)\n          focusCurrentItem(newIndex)\n        },\n        Tab: () => {\n          // Allow Tab to cycle through focusable items\n          if (event.shiftKey) {\n            if (focusedIndex <= 0) {\n              // At start, close dropdown and return to trigger\n              onClose()\n            } else {\n              event.preventDefault()\n              const newIndex = focusedIndex - 1\n              setFocusedIndex(newIndex)\n              focusCurrentItem(newIndex)\n            }\n          } else {\n            if (focusedIndex >= focusableItems.length - 1) {\n              // At end, close dropdown and move to next element\n              onClose()\n            } else {\n              event.preventDefault()\n              const newIndex = focusedIndex + 1\n              setFocusedIndex(newIndex)\n              focusCurrentItem(newIndex)\n            }\n          }\n        },\n        Enter: () => {\n          event.preventDefault()\n          if (focusedIndex >= 0 && focusedIndex < focusableItems.length) {\n            const item = focusableItems[focusedIndex]\n            if (item.type === 'select-all') {\n              onSelectAll()\n            } else if (item.type === 'clear-all') {\n              onClearAll()\n            } else if (item.type === 'option') {\n              onSelect(item.value)\n            }\n          }\n        },\n        ' ': () => {\n          event.preventDefault()\n          if (focusedIndex >= 0 && focusedIndex < focusableItems.length) {\n            const item = focusableItems[focusedIndex]\n            if (item.type === 'select-all') {\n              onSelectAll()\n            } else if (item.type === 'clear-all') {\n              onClearAll()\n            } else if (item.type === 'option') {\n              onSelect(item.value)\n            }\n          }\n        },\n        Escape: () => {\n          event.preventDefault()\n          onClose()\n        },\n      }\n\n      const handler = keyHandlers[event.key]\n      if (handler) {\n        handler()\n      }\n    },\n    [focusableItems, focusedIndex, onSelect, onSelectAll, onClearAll, onClose, focusCurrentItem],\n  )\n\n  // Get the option index for visual focus styling (accounting for select-all offset)\n  const getOptionFocusIndex = useCallback(\n    (optionIndex: number): boolean => {\n      if (focusedIndex < 0 || focusedIndex >= focusableItems.length) return false\n      const item = focusableItems[focusedIndex]\n      return item.type === 'option' && item.index === optionIndex\n    },\n    [focusedIndex, focusableItems],\n  )\n\n  const isSearchFocused = useMemo(() => {\n    if (focusedIndex < 0 || focusedIndex >= focusableItems.length) return false\n    return focusableItems[focusedIndex].type === 'search'\n  }, [focusedIndex, focusableItems])\n\n  const isSelectAllFocused = useMemo(() => {\n    if (focusedIndex < 0 || focusedIndex >= focusableItems.length) return false\n    return focusableItems[focusedIndex].type === 'select-all'\n  }, [focusedIndex, focusableItems])\n\n  const isClearAllFocused = useMemo(() => {\n    if (focusedIndex < 0 || focusedIndex >= focusableItems.length) return false\n    return focusableItems[focusedIndex].type === 'clear-all'\n  }, [focusedIndex, focusableItems])\n\n  const focusedOptionValue = useMemo(() => {\n    if (focusedIndex < 0 || focusedIndex >= focusableItems.length) return null\n    const item = focusableItems[focusedIndex]\n    return item.type === 'option' ? item.value : null\n  }, [focusedIndex, focusableItems])\n\n  return {\n    focusedIndex,\n    setFocusedIndex,\n    handleKeyDown,\n    getOptionFocusIndex,\n    isSearchFocused,\n    isSelectAllFocused,\n    isClearAllFocused,\n    focusedOptionValue,\n  }\n}\n\nexport const MultiSelectBase = ({\n  className,\n  clearAllLabel = 'Clear all',\n  closeOnSelect = false,\n  dropdownWidth = 'trigger',\n  emptyMessage = 'No options found',\n  errorMessage,\n  defaultValue = [],\n  disabled,\n  id,\n  label,\n  loadingMessage = 'Loading options…',\n  messageReserveLines = 1,\n  messageReserveSpace = false,\n  maxCount = 3,\n  name,\n  onChange,\n  options,\n  placeholder = 'Select options',\n  ref,\n  searchPlaceholder = 'Search options…',\n  selectAllLabel = 'Select all',\n  showClearAll = true,\n  showSearch = true,\n  showSelectAll = true,\n  sortAlphabetically = false,\n  state = 'default',\n  value: valueProp,\n  warningMessage,\n  'aria-label': ariaLabel,\n  'aria-describedby': ariaDescribedBy,\n  ...props\n}: MultiSelectBaseProps & {\n  ref?: Ref<HTMLButtonElement>\n}) => {\n  const generatedId = useId()\n  const fallbackName = name ?? `multiselect-${generatedId}`\n  const multiSelectId = useFormFieldId(id, fallbackName)\n  const listboxId = `${multiSelectId}-listbox`\n  const errorMessageId = getErrorMessageId(multiSelectId)\n  const warningMessageId = getWarningMessageId(multiSelectId)\n  const messageId = state === 'error' ? errorMessageId : state === 'warning' && warningMessage ? warningMessageId : undefined\n\n  const [isOpen, setIsOpen] = useState(false)\n  const { dropdownShiftStyle, setDropdownElement } = useAutoDropdownHorizontalShift(isOpen)\n  const [searchValue, setSearchValue] = useState('')\n  const [value, setValue] = useUncontrolledState<string[]>({\n    value: valueProp,\n    defaultValue,\n    onChange,\n  })\n\n  const searchInputRef = useRef<HTMLInputElement>(null)\n\n  const isDisabled = Boolean(disabled)\n  const isLoading = state === 'loading'\n  const ariaProps = getAriaProps(state, ariaDescribedBy, props.required, messageId)\n  const { dropdownOverflowStyle, dropdownWidthMode, resolvedDropdownWidth } = getDropdownWidthStyles({\n    dropdownWidth,\n    triggerWidth: 'var(--radix-popover-trigger-width)',\n  })\n\n  const filteredOptions = useMemo(() => {\n    let filtered = options.filter((option) => option.label.toLowerCase().includes(searchValue.toLowerCase()))\n\n    if (sortAlphabetically) {\n      filtered = [...filtered].sort((a, b) => a.label.localeCompare(b.label))\n    }\n\n    return filtered\n  }, [options, searchValue, sortAlphabetically])\n\n  const groupedOptions = useMemo(() => {\n    const groups: Record<string, MultiSelectOption[]> = {}\n    const ungrouped: MultiSelectOption[] = []\n\n    filteredOptions.forEach((option) => {\n      if (option.group) {\n        if (!groups[option.group]) {\n          groups[option.group] = []\n        }\n        groups[option.group].push(option)\n      } else {\n        ungrouped.push(option)\n      }\n    })\n\n    return { groups, ungrouped, hasGroups: Object.keys(groups).length > 0 }\n  }, [filteredOptions])\n\n  const toggleOption = useCallback(\n    (optionValue: string) => {\n      const option = options.find((o) => o.value === optionValue)\n      if (option?.disabled) return\n\n      const newValue = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue]\n\n      setValue(newValue)\n\n      if (closeOnSelect) {\n        setIsOpen(false)\n      }\n    },\n    [closeOnSelect, options, setValue, value],\n  )\n\n  const handleSelectAll = useCallback(() => {\n    const allValues = options.filter((o) => !o.disabled).map((o) => o.value)\n    const isAllSelected = allValues.every((v) => value.includes(v))\n\n    if (isAllSelected) {\n      setValue([])\n    } else {\n      setValue(allValues)\n    }\n  }, [options, setValue, value])\n\n  const handleClearAll = useCallback(() => {\n    setValue([])\n  }, [setValue])\n\n  // Check if all non-disabled options are selected\n  const allSelectableValues = useMemo(() => options.filter((o) => !o.disabled).map((o) => o.value), [options])\n  const isAllSelected = allSelectableValues.length > 0 && allSelectableValues.every((v) => value.includes(v))\n\n  const { focusedOptionValue, getOptionFocusIndex, handleKeyDown, isSelectAllFocused, setFocusedIndex } = useKeyboardNavigation(\n    filteredOptions,\n    handleClearAll,\n    () => setIsOpen(false),\n    toggleOption,\n    handleSelectAll,\n    searchInputRef,\n    showSearch,\n    showSelectAll,\n    false, // No separate clear-all button in dropdown\n  )\n\n  // Set initial focus index when dropdown opens/closes\n  useEffect(() => {\n    if (isOpen) {\n      setFocusedIndex(0)\n    } else {\n      setFocusedIndex(-1)\n    }\n  }, [isOpen, setFocusedIndex])\n\n  const handleSearchChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n    setSearchValue(e.target.value)\n  }, [])\n\n  const renderSelectedItems = () => {\n    if (value.length === 0) {\n      return <span className='min-h-8 flex items-center text-input-text-placeholder'>{placeholder}</span>\n    }\n\n    const displayedValues = value.slice(0, maxCount)\n    const remainingCount = value.length - maxCount\n\n    return (\n      <div className='gap-1 flex flex-wrap items-center overflow-hidden'>\n        {displayedValues.map((val) => {\n          const option = options.find((o) => o.value === val)\n          if (!option) return null\n\n          return (\n            <span className='gap-1 px-2 py-1 rounded-md text-xs max-w-48 inline-flex items-center bg-input-bg--selected text-input-text' key={val}>\n              <span className='truncate'>{option.label}</span>\n              <button\n                aria-label={`Remove ${option.label}`}\n                className='hover:text-danger rounded-sm cursor-pointer'\n                data-testid='spectral-multiselect-remove-item-button'\n                onClick={(e) => {\n                  e.preventDefault()\n                  e.stopPropagation()\n                  toggleOption(val)\n                }}\n                onPointerDown={(e) => {\n                  e.stopPropagation()\n                }}\n                type='button'\n              >\n                <CloseIcon size={12} />\n              </button>\n            </span>\n          )\n        })}\n        {remainingCount > 0 && <span className='text-input-text-secondary text-xs py-1 flex items-center tabular-nums'>+{remainingCount} more</span>}\n      </div>\n    )\n  }\n\n  const renderOption = (option: MultiSelectOption, index: number) => {\n    const isSelected = value.includes(option.value)\n    const isFocused = getOptionFocusIndex(index)\n    const optionId = `${listboxId}-option-${option.value}`\n\n    return (\n      <button\n        aria-selected={isSelected}\n        className={cn(\n          'my-0.5 first:mt-0 last:mb-0 gap-3 rounded-sm px-3 py-2 text-sm flex w-full items-center text-left hover:bg-input-bg--hover focus-visible:bg-input-bg--hover focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',\n          isFocused && 'bg-input-bg--hover',\n          isSelected && 'font-medium text-input-text',\n        )}\n        disabled={option.disabled}\n        id={optionId}\n        key={option.value}\n        onClick={() => toggleOption(option.value)}\n        role='option'\n        type='button'\n      >\n        <div data-testid='spectral-multiselect-selected-indicator' className={cn('w-4 h-4 rounded flex items-center justify-center border border-input-border', isSelected && 'bg-primary border-primary')}>\n          {isSelected && <CheckmarkIcon size={12} />}\n        </div>\n        <span>{option.label}</span>\n      </button>\n    )\n  }\n\n  const getCSSCustomProperties = () => ({\n    '--multiselect-border-radius': '0.5rem',\n    '--multiselect-trigger-height': '3rem',\n    '--multiselect-dropdown-max-height': '20rem',\n  })\n\n  return (\n    <div className='w-full' data-testid='spectral-multiselect-root'>\n      {label && (\n        <Label className={cn('mb-2 block text-text-primary', isDisabled && 'text-text-secondary')} data-testid='spectral-multiselect-label' htmlFor={multiSelectId}>\n          {label}\n        </Label>\n      )}\n      <Popover.Root open={isOpen} onOpenChange={setIsOpen}>\n        <div className='relative' data-testid='spectral-multiselect-wrapper' onKeyDown={isOpen ? handleKeyDown : undefined} role='none'>\n          <Popover.Trigger asChild>\n            <button\n              aria-activedescendant={isOpen && focusedOptionValue ? `${listboxId}-option-${focusedOptionValue}` : undefined}\n              aria-controls={isOpen ? listboxId : undefined}\n              aria-expanded={isOpen}\n              aria-label={ariaLabel ?? label}\n              className={cn(getTriggerClasses(isOpen, state, className), 'max-h-22 py-2 text-sm')}\n              data-state={state}\n              data-testid='spectral-multiselect-trigger'\n              disabled={isDisabled}\n              id={multiSelectId}\n              name={name}\n              ref={ref}\n              role='combobox' // oxlint-disable-line jsx-a11y/prefer-tag-over-role -- trigger uses button-based combobox semantics for listbox popup\n              style={getCSSCustomProperties() as CSSProperties}\n              type='button'\n              {...ariaProps}\n              {...props}\n            >\n              <div className='min-w-0 flex-1 overflow-hidden' data-testid='spectral-multiselect-selected-items'>\n                {renderSelectedItems()}\n              </div>\n              <div className='gap-2 ml-2 flex shrink-0 items-center'>\n                <ChevronDownIcon className={cn('text-input-icon transition-transform duration-200', isOpen && 'rotate-180')} size={20} />\n              </div>\n            </button>\n          </Popover.Trigger>\n          {showClearAll && value.length > 0 && (\n            <button\n              aria-label='Clear all selections'\n              className='right-10 text-input-icon hover:text-input-icon--hover rounded-sm absolute top-1/2 z-10 -translate-y-1/2 cursor-pointer focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50'\n              data-testid='spectral-multiselect-clear-all-button'\n              disabled={isDisabled}\n              onClick={(e) => {\n                e.stopPropagation()\n                handleClearAll()\n                document.getElementById(multiSelectId)?.focus()\n              }}\n              type='button'\n            >\n              <CloseIcon size={12} />\n            </button>\n          )}\n\n          <Popover.Portal>\n            <Popover.Content\n              align='start'\n              avoidCollisions\n              className={getDropdownClasses()}\n              collisionPadding={10}\n              data-dropdown-width-mode={dropdownWidthMode}\n              data-dropdown-width-value={dropdownWidthMode === 'custom' ? dropdownWidth : undefined}\n              data-testid='spectral-multiselect-dropdown'\n              onOpenAutoFocus={(e) => {\n                e.preventDefault()\n                if (showSearch) {\n                  searchInputRef.current?.focus()\n                }\n              }}\n              side='bottom'\n              sideOffset={4}\n              ref={setDropdownElement}\n              style={{\n                width: resolvedDropdownWidth,\n                ...(dropdownWidth === 'trigger' ? {} : dropdownOverflowStyle),\n                ...dropdownShiftStyle,\n              }}\n            >\n              <div className='p-1'>\n                {showSearch && (\n                  <div className='mb-2 relative'>\n                    <SearchIcon className={cn(ICON_SIZE, 'left-3 text-input-icon absolute top-1/2 -translate-y-1/2')} />\n                    <input\n                      aria-label='Search options'\n                      className='pl-9 pr-3 py-2 text-sm rounded-md focus-visible:ring-black w-full border border-input-border bg-input-bg focus-visible:border-input-border--focus focus-visible:ring-1 focus-visible:outline-none'\n                      data-testid='spectral-multiselect-search-input'\n                      onChange={handleSearchChange}\n                      placeholder={searchPlaceholder}\n                      ref={searchInputRef}\n                      type='text'\n                      value={searchValue}\n                      {...getPasswordManagerIgnoreProps('text')}\n                    />\n                  </div>\n                )}\n                <div aria-multiselectable='true' className='max-h-64 overflow-y-auto' id={listboxId} role='listbox' // oxlint-disable-line jsx-a11y/prefer-tag-over-role -- custom multi-select uses ARIA listbox semantics with option children\n                >\n                  {isLoading ? (\n                    <LoadingState className='text-sm' message={loadingMessage} data-testid='spectral-multiselect-loading' />\n                  ) : filteredOptions.length === 0 ? (\n                    <EmptyState className='text-sm' data-testid='spectral-multiselect-empty-message' message={emptyMessage} />\n                  ) : (\n                    <>\n                      {showSelectAll && (\n                        <div className='mb-1'>\n                          <button\n                            className={cn(\n                              'my-0.5 first:mt-0 last:mb-0 gap-3 rounded-sm px-3 py-2 text-sm font-medium text-input-text-secondary flex w-full items-center hover:bg-input-bg--hover focus-visible:bg-input-bg--hover focus-visible:outline-none',\n                              isSelectAllFocused && 'bg-input-bg--hover',\n                            )}\n                            data-testid='spectral-multiselect-select-all-button'\n                            onClick={handleSelectAll}\n                            type='button'\n                          >\n                            {isAllSelected ? clearAllLabel : selectAllLabel}\n                          </button>\n                          <div className='mx-3 my-1 h-px bg-input-border' />\n                        </div>\n                      )}\n\n                      {groupedOptions.ungrouped.length > 0 && <div className='mb-1'>{groupedOptions.ungrouped.map((option, index) => renderOption(option, index))}</div>}\n\n                      {Object.entries(groupedOptions.groups).map(([groupName, groupOptions]) => (\n                        <div key={groupName} className='mb-1' data-testid='spectral-multiselect-group'>\n                          {(groupedOptions.ungrouped.length > 0 || Object.keys(groupedOptions.groups).indexOf(groupName) > 0) && <div className='mx-3 my-1 h-px bg-input-border' />}\n                          <div data-testid='spectral-multiselect-group-name' className='px-3 py-1 text-xs font-semibold text-input-text-secondary tracking-wide uppercase'>\n                            {groupName}\n                          </div>\n                          {groupOptions.map((option, _index) => renderOption(option, filteredOptions.indexOf(option)))}\n                        </div>\n                      ))}\n                    </>\n                  )}\n                </div>\n              </div>\n            </Popover.Content>\n          </Popover.Portal>\n        </div>\n      </Popover.Root>\n\n      <ErrorMessage\n        dataTestId='spectral-multiselect-error-message'\n        id={errorMessageId}\n        message={state === 'error' ? errorMessage : null}\n        messageReserveLines={messageReserveLines}\n        messageReserveSpace={messageReserveSpace && state === 'error'}\n      />\n      <WarningMessage\n        dataTestId='spectral-multiselect-warning-message'\n        id={warningMessageId}\n        message={state === 'warning' ? warningMessage : null}\n        messageReserveLines={messageReserveLines}\n        messageReserveSpace={messageReserveSpace && state === 'warning'}\n      />\n    </div>\n  )\n}\nMultiSelectBase.displayName = 'MultiSelectBase'\n"],"mappings":"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"}
+{"version":3,"file":"MultiSelectBase.js","names":[],"sources":["../../src/components/MultiSelect/MultiSelectBase.tsx"],"sourcesContent":["import { CheckmarkIcon, ChevronDownIcon, CloseIcon, SearchIcon } from '@components/Icons'\nimport { Label } from '@components/Label/Label'\nimport { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport * as Popover from '@radix-ui/react-popover'\nimport { useAutoDropdownHorizontalShift } from '@utils/dropdownPositioning'\nimport {\n  EmptyState,\n  ErrorMessage,\n  getAriaProps,\n  getDropdownSurfaceClasses,\n  getDropdownWidthStyles,\n  getErrorMessageId,\n  getPasswordManagerIgnoreProps,\n  getTriggerClasses,\n  getWarningMessageId,\n  LoadingState,\n  useFormFieldId,\n  WarningMessage,\n  type BaseFormFieldProps,\n  type DropdownWidth,\n  type FormFieldState\n} from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { useCallback, useEffect, useId, useMemo, useRef, useState, type ButtonHTMLAttributes, type ChangeEvent, type CSSProperties, type KeyboardEvent, type Ref } from 'react'\n\nexport type MultiSelectState = Exclude<FormFieldState, 'disabled'>\n\nexport interface MultiSelectOption {\n  disabled?: boolean\n  group?: string\n  label: string\n  value: string\n}\n\nexport interface MultiSelectBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {\n  clearAllLabel?: string\n  closeOnSelect?: boolean\n  dropdownWidth?: DropdownWidth\n  emptyMessage?: string\n  errorMessage?: BaseFormFieldProps['errorMessage']\n  id?: string\n  label?: string\n  loadingMessage?: string\n  maxCount?: number\n  messageReserveLines?: number\n  messageReserveSpace?: boolean\n  name?: string\n  defaultValue?: string[]\n  onChange?: (value: string[]) => void\n  options: MultiSelectOption[]\n  placeholder?: string\n  required?: boolean\n  searchPlaceholder?: string\n  showClearAll?: boolean\n  showSearch?: boolean\n  showSelectAll?: boolean\n  selectAllLabel?: string\n  sortAlphabetically?: boolean\n  state?: MultiSelectState\n  value?: string[]\n  warningMessage?: BaseFormFieldProps['errorMessage']\n  'aria-label'?: string\n  'aria-describedby'?: string\n}\n\nconst ICON_SIZE = 'h-4 w-4'\n\nconst getDropdownClasses = (): string => {\n  return cn(\n    'max-h-80 z-50 overflow-hidden',\n    getDropdownSurfaceClasses(),\n    'motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:animate-in',\n    'motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:fade-in-0',\n    'motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-95',\n    'motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=top]:slide-in-from-bottom-2',\n    'origin-(--radix-popover-content-transform-origin)',\n  )\n}\n\ntype FocusableItem = { type: 'search' } | { type: 'select-all' } | { type: 'option'; index: number; value: string } | { type: 'clear-all' }\n\nconst useKeyboardNavigation = (\n  options: MultiSelectOption[],\n  onClearAll: () => void,\n  onClose: () => void,\n  onSelect: (value: string) => void,\n  onSelectAll: () => void,\n  searchInputRef: React.RefObject<HTMLInputElement | null>,\n  showSearch: boolean,\n  showSelectAll: boolean,\n  showClearAll: boolean,\n) => {\n  const [focusedIndex, setFocusedIndex] = useState(-1)\n\n  // Build a flat list of all focusable items\n  const focusableItems = useMemo((): FocusableItem[] => {\n    const items: FocusableItem[] = []\n\n    if (showSearch) {\n      items.push({ type: 'search' })\n    }\n\n    if (showSelectAll) {\n      items.push({ type: 'select-all' })\n    }\n\n    options.forEach((option, index) => {\n      if (!option.disabled) {\n        items.push({ type: 'option', index, value: option.value })\n      }\n    })\n\n    if (showClearAll) {\n      items.push({ type: 'clear-all' })\n    }\n\n    return items\n  }, [options, showSearch, showSelectAll, showClearAll])\n\n  // Focus the appropriate element when focusedIndex changes\n  const focusCurrentItem = useCallback(\n    (index: number) => {\n      if (index < 0 || index >= focusableItems.length) return\n      const item = focusableItems[index]\n      if (item.type === 'search') {\n        searchInputRef.current?.focus()\n      }\n    },\n    [focusableItems, searchInputRef],\n  )\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      const currentItem = focusedIndex >= 0 && focusedIndex < focusableItems.length ? focusableItems[focusedIndex] : null\n\n      // Don't prevent default for space in search input (allow typing spaces)\n      if (event.key === ' ' && currentItem?.type === 'search') {\n        return\n      }\n\n      // Don't prevent default for Enter in search input (allow form submission behavior)\n      if (event.key === 'Enter' && currentItem?.type === 'search') {\n        return\n      }\n\n      const keyHandlers: Record<string, () => void> = {\n        ArrowDown: () => {\n          event.preventDefault()\n          const newIndex = Math.min(focusedIndex + 1, focusableItems.length - 1)\n          setFocusedIndex(newIndex)\n          focusCurrentItem(newIndex)\n        },\n        ArrowUp: () => {\n          event.preventDefault()\n          const newIndex = Math.max(focusedIndex - 1, 0)\n          setFocusedIndex(newIndex)\n          focusCurrentItem(newIndex)\n        },\n        Tab: () => {\n          // Allow Tab to cycle through focusable items\n          if (event.shiftKey) {\n            if (focusedIndex <= 0) {\n              // At start, close dropdown and return to trigger\n              onClose()\n            } else {\n              event.preventDefault()\n              const newIndex = focusedIndex - 1\n              setFocusedIndex(newIndex)\n              focusCurrentItem(newIndex)\n            }\n          } else {\n            if (focusedIndex >= focusableItems.length - 1) {\n              // At end, close dropdown and move to next element\n              onClose()\n            } else {\n              event.preventDefault()\n              const newIndex = focusedIndex + 1\n              setFocusedIndex(newIndex)\n              focusCurrentItem(newIndex)\n            }\n          }\n        },\n        Enter: () => {\n          event.preventDefault()\n          if (focusedIndex >= 0 && focusedIndex < focusableItems.length) {\n            const item = focusableItems[focusedIndex]\n            if (item.type === 'select-all') {\n              onSelectAll()\n            } else if (item.type === 'clear-all') {\n              onClearAll()\n            } else if (item.type === 'option') {\n              onSelect(item.value)\n            }\n          }\n        },\n        ' ': () => {\n          event.preventDefault()\n          if (focusedIndex >= 0 && focusedIndex < focusableItems.length) {\n            const item = focusableItems[focusedIndex]\n            if (item.type === 'select-all') {\n              onSelectAll()\n            } else if (item.type === 'clear-all') {\n              onClearAll()\n            } else if (item.type === 'option') {\n              onSelect(item.value)\n            }\n          }\n        },\n        Escape: () => {\n          event.preventDefault()\n          onClose()\n        },\n      }\n\n      const handler = keyHandlers[event.key]\n      if (handler) {\n        handler()\n      }\n    },\n    [focusableItems, focusedIndex, onSelect, onSelectAll, onClearAll, onClose, focusCurrentItem],\n  )\n\n  // Get the option index for visual focus styling (accounting for select-all offset)\n  const getOptionFocusIndex = useCallback(\n    (optionIndex: number): boolean => {\n      if (focusedIndex < 0 || focusedIndex >= focusableItems.length) return false\n      const item = focusableItems[focusedIndex]\n      return item.type === 'option' && item.index === optionIndex\n    },\n    [focusedIndex, focusableItems],\n  )\n\n  const isSearchFocused = useMemo(() => {\n    if (focusedIndex < 0 || focusedIndex >= focusableItems.length) return false\n    return focusableItems[focusedIndex].type === 'search'\n  }, [focusedIndex, focusableItems])\n\n  const isSelectAllFocused = useMemo(() => {\n    if (focusedIndex < 0 || focusedIndex >= focusableItems.length) return false\n    return focusableItems[focusedIndex].type === 'select-all'\n  }, [focusedIndex, focusableItems])\n\n  const isClearAllFocused = useMemo(() => {\n    if (focusedIndex < 0 || focusedIndex >= focusableItems.length) return false\n    return focusableItems[focusedIndex].type === 'clear-all'\n  }, [focusedIndex, focusableItems])\n\n  const focusedOptionValue = useMemo(() => {\n    if (focusedIndex < 0 || focusedIndex >= focusableItems.length) return null\n    const item = focusableItems[focusedIndex]\n    return item.type === 'option' ? item.value : null\n  }, [focusedIndex, focusableItems])\n\n  return {\n    focusedIndex,\n    setFocusedIndex,\n    handleKeyDown,\n    getOptionFocusIndex,\n    isSearchFocused,\n    isSelectAllFocused,\n    isClearAllFocused,\n    focusedOptionValue,\n  }\n}\n\nexport const MultiSelectBase = ({\n  className,\n  clearAllLabel = 'Clear all',\n  closeOnSelect = false,\n  dropdownWidth = 'trigger',\n  emptyMessage = 'No options found',\n  errorMessage,\n  defaultValue = [],\n  disabled,\n  id,\n  label,\n  loadingMessage = 'Loading options…',\n  messageReserveLines = 1,\n  messageReserveSpace = false,\n  maxCount = 3,\n  name,\n  onChange,\n  options,\n  placeholder = 'Select options',\n  ref,\n  searchPlaceholder = 'Search options…',\n  selectAllLabel = 'Select all',\n  showClearAll = true,\n  showSearch = true,\n  showSelectAll = true,\n  sortAlphabetically = false,\n  state = 'default',\n  value: valueProp,\n  warningMessage,\n  'aria-label': ariaLabel,\n  'aria-describedby': ariaDescribedBy,\n  ...props\n}: MultiSelectBaseProps & {\n  ref?: Ref<HTMLButtonElement>\n}) => {\n  const generatedId = useId()\n  const fallbackName = name ?? `multiselect-${generatedId}`\n  const multiSelectId = useFormFieldId(id, fallbackName)\n  const listboxId = `${multiSelectId}-listbox`\n  const errorMessageId = getErrorMessageId(multiSelectId)\n  const warningMessageId = getWarningMessageId(multiSelectId)\n  const messageId = state === 'error' ? errorMessageId : state === 'warning' && warningMessage ? warningMessageId : undefined\n\n  const [isOpen, setIsOpen] = useState(false)\n  const { dropdownShiftStyle, setDropdownElement } = useAutoDropdownHorizontalShift(isOpen)\n  const [searchValue, setSearchValue] = useState('')\n  const [value, setValue] = useUncontrolledState<string[]>({\n    value: valueProp,\n    defaultValue,\n    onChange,\n  })\n\n  const searchInputRef = useRef<HTMLInputElement>(null)\n\n  const isDisabled = Boolean(disabled)\n  const isLoading = state === 'loading'\n  const ariaProps = getAriaProps(state, ariaDescribedBy, props.required, messageId)\n  const { dropdownOverflowStyle, dropdownWidthMode, resolvedDropdownWidth } = getDropdownWidthStyles({\n    dropdownWidth,\n    triggerWidth: 'var(--radix-popover-trigger-width)',\n  })\n\n  const filteredOptions = useMemo(() => {\n    let filtered = options.filter((option) => option.label.toLowerCase().includes(searchValue.toLowerCase()))\n\n    if (sortAlphabetically) {\n      filtered = [...filtered].sort((a, b) => a.label.localeCompare(b.label))\n    }\n\n    return filtered\n  }, [options, searchValue, sortAlphabetically])\n\n  const groupedOptions = useMemo(() => {\n    const groups: Record<string, MultiSelectOption[]> = {}\n    const ungrouped: MultiSelectOption[] = []\n\n    filteredOptions.forEach((option) => {\n      if (option.group) {\n        if (!groups[option.group]) {\n          groups[option.group] = []\n        }\n        groups[option.group].push(option)\n      } else {\n        ungrouped.push(option)\n      }\n    })\n\n    return { groups, ungrouped, hasGroups: Object.keys(groups).length > 0 }\n  }, [filteredOptions])\n\n  const toggleOption = useCallback(\n    (optionValue: string) => {\n      const option = options.find((o) => o.value === optionValue)\n      if (option?.disabled) return\n\n      const newValue = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue]\n\n      setValue(newValue)\n\n      if (closeOnSelect) {\n        setIsOpen(false)\n      }\n    },\n    [closeOnSelect, options, setValue, value],\n  )\n\n  const handleSelectAll = useCallback(() => {\n    const allValues = options.filter((o) => !o.disabled).map((o) => o.value)\n    const isAllSelected = allValues.every((v) => value.includes(v))\n\n    if (isAllSelected) {\n      setValue([])\n    } else {\n      setValue(allValues)\n    }\n  }, [options, setValue, value])\n\n  const handleClearAll = useCallback(() => {\n    setValue([])\n  }, [setValue])\n\n  // Check if all non-disabled options are selected\n  const allSelectableValues = useMemo(() => options.filter((o) => !o.disabled).map((o) => o.value), [options])\n  const isAllSelected = allSelectableValues.length > 0 && allSelectableValues.every((v) => value.includes(v))\n\n  const { focusedOptionValue, getOptionFocusIndex, handleKeyDown, isSelectAllFocused, setFocusedIndex } = useKeyboardNavigation(\n    filteredOptions,\n    handleClearAll,\n    () => setIsOpen(false),\n    toggleOption,\n    handleSelectAll,\n    searchInputRef,\n    showSearch,\n    showSelectAll,\n    false, // No separate clear-all button in dropdown\n  )\n\n  // Set initial focus index when dropdown opens/closes\n  useEffect(() => {\n    if (isOpen) {\n      setFocusedIndex(0)\n    } else {\n      setFocusedIndex(-1)\n    }\n  }, [isOpen, setFocusedIndex])\n\n  const handleSearchChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n    setSearchValue(e.target.value)\n  }, [])\n\n  const renderSelectedItems = () => {\n    if (value.length === 0) {\n      return <span className='min-h-8 flex items-center text-input-text-placeholder'>{placeholder}</span>\n    }\n\n    const displayedValues = value.slice(0, maxCount)\n    const remainingCount = value.length - maxCount\n\n    return (\n      <div className='gap-1 flex flex-wrap items-center overflow-hidden'>\n        {displayedValues.map((val) => {\n          const option = options.find((o) => o.value === val)\n          if (!option) return null\n\n          return (\n            <span className='gap-1 px-2 py-1 rounded-md text-xs max-w-48 inline-flex items-center bg-input-bg--selected text-input-text' key={val}>\n              <span className='truncate'>{option.label}</span>\n              <button\n                aria-label={`Remove ${option.label}`}\n                className='hover:text-danger rounded-sm cursor-pointer'\n                data-testid='spectral-multiselect-remove-item-button'\n                onClick={(e) => {\n                  e.preventDefault()\n                  e.stopPropagation()\n                  toggleOption(val)\n                }}\n                onPointerDown={(e) => {\n                  e.stopPropagation()\n                }}\n                type='button'\n              >\n                <CloseIcon size={12} />\n              </button>\n            </span>\n          )\n        })}\n        {remainingCount > 0 && <span className='text-input-text-secondary text-xs py-1 flex items-center tabular-nums'>+{remainingCount} more</span>}\n      </div>\n    )\n  }\n\n  const renderOption = (option: MultiSelectOption, index: number) => {\n    const isSelected = value.includes(option.value)\n    const isFocused = getOptionFocusIndex(index)\n    const optionId = `${listboxId}-option-${option.value}`\n\n    return (\n      <button\n        aria-selected={isSelected}\n        className={cn(\n          'my-0.5 first:mt-0 last:mb-0 gap-3 rounded-sm px-3 py-2 text-sm flex w-full items-center text-left hover:bg-input-bg--hover focus-visible:bg-input-bg--hover focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',\n          isFocused && 'bg-input-bg--hover',\n          isSelected && 'font-medium text-input-text',\n        )}\n        disabled={option.disabled}\n        id={optionId}\n        key={option.value}\n        onClick={() => toggleOption(option.value)}\n        role='option'\n        type='button'\n      >\n        <div data-testid='spectral-multiselect-selected-indicator' className={cn('w-4 h-4 rounded flex items-center justify-center border border-input-border', isSelected && 'bg-primary border-primary')}>\n          {isSelected && <CheckmarkIcon size={12} />}\n        </div>\n        <span>{option.label}</span>\n      </button>\n    )\n  }\n\n  const getCSSCustomProperties = () => ({\n    '--multiselect-border-radius': '0.5rem',\n    '--multiselect-trigger-height': '3rem',\n    '--multiselect-dropdown-max-height': '20rem',\n  })\n\n  return (\n    <div className='w-full' data-testid='spectral-multiselect-root'>\n      {label && (\n        <Label className={cn('mb-2 block text-text-primary', isDisabled && 'text-text-secondary')} data-testid='spectral-multiselect-label' htmlFor={multiSelectId}>\n          {label}\n        </Label>\n      )}\n      <Popover.Root open={isOpen} onOpenChange={setIsOpen}>\n        <div className='relative' data-testid='spectral-multiselect-wrapper' onKeyDown={isOpen ? handleKeyDown : undefined} role='none'>\n          <Popover.Trigger asChild>\n            <button\n              aria-activedescendant={isOpen && focusedOptionValue ? `${listboxId}-option-${focusedOptionValue}` : undefined}\n              aria-controls={isOpen ? listboxId : undefined}\n              aria-expanded={isOpen}\n              aria-label={ariaLabel ?? label}\n              className={cn(getTriggerClasses(isOpen, state, className), 'max-h-22 py-2 text-sm')}\n              data-state={state}\n              data-testid='spectral-multiselect-trigger'\n              disabled={isDisabled}\n              id={multiSelectId}\n              name={name}\n              ref={ref}\n              role='combobox' // oxlint-disable-line jsx-a11y/prefer-tag-over-role -- trigger uses button-based combobox semantics for listbox popup\n              style={getCSSCustomProperties() as CSSProperties}\n              type='button'\n              {...ariaProps}\n              {...props}\n            >\n              <div className='min-w-0 flex-1 overflow-hidden' data-testid='spectral-multiselect-selected-items'>\n                {renderSelectedItems()}\n              </div>\n              <div className='gap-2 ml-2 flex shrink-0 items-center'>\n                <ChevronDownIcon className={cn('text-input-icon transition-transform duration-200', isOpen && 'rotate-180')} size={20} />\n              </div>\n            </button>\n          </Popover.Trigger>\n          {showClearAll && value.length > 0 && (\n            <button\n              aria-label='Clear all selections'\n              className='right-10 text-input-icon hover:text-input-icon--hover rounded-sm absolute top-1/2 z-10 -translate-y-1/2 cursor-pointer focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50'\n              data-testid='spectral-multiselect-clear-all-button'\n              disabled={isDisabled}\n              onClick={(e) => {\n                e.stopPropagation()\n                handleClearAll()\n                document.getElementById(multiSelectId)?.focus()\n              }}\n              type='button'\n            >\n              <CloseIcon size={12} />\n            </button>\n          )}\n\n          <Popover.Portal>\n            <Popover.Content\n              align='start'\n              avoidCollisions\n              className={getDropdownClasses()}\n              collisionPadding={10}\n              data-dropdown-width-mode={dropdownWidthMode}\n              data-dropdown-width-value={dropdownWidthMode === 'custom' ? dropdownWidth : undefined}\n              data-testid='spectral-multiselect-dropdown'\n              onOpenAutoFocus={(e) => {\n                e.preventDefault()\n                if (showSearch) {\n                  searchInputRef.current?.focus()\n                }\n              }}\n              side='bottom'\n              sideOffset={4}\n              ref={setDropdownElement}\n              style={{\n                width: resolvedDropdownWidth,\n                ...(dropdownWidth === 'trigger' ? {} : dropdownOverflowStyle),\n                ...dropdownShiftStyle,\n              }}\n            >\n              <div className='p-1'>\n                {showSearch && (\n                  <div className='mb-2 relative'>\n                    <SearchIcon className={cn(ICON_SIZE, 'left-3 text-input-icon absolute top-1/2 -translate-y-1/2')} />\n                    <input\n                      aria-label='Search options'\n                      className='pl-9 pr-3 py-2 text-sm rounded-md focus-visible:ring-black w-full border border-input-border bg-input-bg focus-visible:border-input-border--focus focus-visible:ring-1 focus-visible:outline-none'\n                      data-testid='spectral-multiselect-search-input'\n                      onChange={handleSearchChange}\n                      placeholder={searchPlaceholder}\n                      ref={searchInputRef}\n                      type='text'\n                      value={searchValue}\n                      {...getPasswordManagerIgnoreProps('text')}\n                    />\n                  </div>\n                )}\n                <div aria-multiselectable='true' className='max-h-64 overflow-y-auto' id={listboxId} role='listbox' // oxlint-disable-line jsx-a11y/prefer-tag-over-role -- custom multi-select uses ARIA listbox semantics with option children\n                >\n                  {isLoading ? (\n                    <LoadingState className='text-sm' message={loadingMessage} data-testid='spectral-multiselect-loading' />\n                  ) : filteredOptions.length === 0 ? (\n                    <EmptyState className='text-sm' data-testid='spectral-multiselect-empty-message' message={emptyMessage} />\n                  ) : (\n                    <>\n                      {showSelectAll && (\n                        <div className='mb-1'>\n                          <button\n                            className={cn(\n                              'my-0.5 first:mt-0 last:mb-0 gap-3 rounded-sm px-3 py-2 text-sm font-medium text-input-text-secondary flex w-full items-center hover:bg-input-bg--hover focus-visible:bg-input-bg--hover focus-visible:outline-none',\n                              isSelectAllFocused && 'bg-input-bg--hover',\n                            )}\n                            data-testid='spectral-multiselect-select-all-button'\n                            onClick={handleSelectAll}\n                            type='button'\n                          >\n                            {isAllSelected ? clearAllLabel : selectAllLabel}\n                          </button>\n                          <div className='mx-3 my-1 h-px bg-input-border' />\n                        </div>\n                      )}\n\n                      {groupedOptions.ungrouped.length > 0 && <div className='mb-1'>{groupedOptions.ungrouped.map((option, index) => renderOption(option, index))}</div>}\n\n                      {Object.entries(groupedOptions.groups).map(([groupName, groupOptions]) => (\n                        <div key={groupName} className='mb-1' data-testid='spectral-multiselect-group'>\n                          {(groupedOptions.ungrouped.length > 0 || Object.keys(groupedOptions.groups).indexOf(groupName) > 0) && <div className='mx-3 my-1 h-px bg-input-border' />}\n                          <div data-testid='spectral-multiselect-group-name' className='px-3 py-1 text-xs font-semibold text-input-text-secondary tracking-wide uppercase'>\n                            {groupName}\n                          </div>\n                          {groupOptions.map((option, _index) => renderOption(option, filteredOptions.indexOf(option)))}\n                        </div>\n                      ))}\n                    </>\n                  )}\n                </div>\n              </div>\n            </Popover.Content>\n          </Popover.Portal>\n        </div>\n      </Popover.Root>\n\n      <ErrorMessage\n        dataTestId='spectral-multiselect-error-message'\n        id={errorMessageId}\n        message={state === 'error' ? errorMessage : null}\n        messageReserveLines={messageReserveLines}\n        messageReserveSpace={messageReserveSpace && state === 'error'}\n      />\n      <WarningMessage\n        dataTestId='spectral-multiselect-warning-message'\n        id={warningMessageId}\n        message={state === 'warning' ? warningMessage : null}\n        messageReserveLines={messageReserveLines}\n        messageReserveSpace={messageReserveSpace && state === 'warning'}\n      />\n    </div>\n  )\n}\nMultiSelectBase.displayName = 'MultiSelectBase'\n"],"mappings":"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"}

package/dist/RadialMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadialMenu.d.ts","names":[],"sources":["../src/components/RadialMenu/RadialMenu.tsx"],"mappings":";;;;;UAMiB,cAAA;;EAEf,WAAA;EACA,WAAA;EACA,QAAA;EACA,IAAA,EAAM,SAAA;EACN,EAAA;EACA,KAAA,GAAQ,cAAA;EACR,KAAA;EACA,QAAA;AAAA;AAAA,UAGe,eAAA;EACf,SAAA;EACA,SAAA;EACA,SAAA;EACA,UAAA;EACA,KAAA,EAAO,cAAA;EACP,OAAA;EACA,QAAA;IAAY,CAAA;IAAW,CAAA;EAAA;AAAA;AAAA;EA0CI,SAAA;EAAW,SAAA;EAAoB,SAAA;EAAW,UAAA;EAAY,KAAA;EAAO,OAAA;EAAS,QAAA;EAAU;AAAA,GAAO,eAAA;EAAoB,GAAA,GAAM,GAAA,CAAI,cAAA;AAAA,IAAD,OAAA,CAAkB,WAAA;AAAA"}
+{"version":3,"file":"RadialMenu.d.ts","names":[],"sources":["../src/components/RadialMenu/RadialMenu.tsx"],"mappings":";;;;;UAMiB,cAAA;;EAEf,WAAA;EACA,WAAA;EACA,QAAA;EACA,IAAA,EAAM,SAAA;EACN,EAAA;EACA,KAAA,GAAQ,cAAA;EACR,KAAA;EACA,QAAA;AAAA;AAAA,UAGe,eAAA;EACf,SAAA;EACA,SAAA;EACA,SAAA;EACA,UAAA;EACA,KAAA,EAAO,cAAA;EACP,OAAA;EACA,QAAA;IAAY,CAAA;IAAW,CAAA;EAAA;AAAA;AAAA;EA0CI,SAAA;EAAW,SAAA;EAAoB,SAAA;EAAW,UAAA;EAAqC,KAAA;EAAO,OAAA;EAAS,QAAA;EAAU;AAAA,GAAO,eAAA;EAAoB,GAAA,GAAM,GAAA,CAAI,cAAA;AAAA,IAAD,OAAA,CAAkB,WAAA;AAAA"}

package/dist/RadialMenu.js

@@ -43,8 +43,7 @@ const positionOnArc = (index, count, radius) => {
 		y: Math.sin(angle) * radius
 	};
 };
-const RadialMenu = ({ ariaLabel, backLabel = "Back", className, dataTestId, items, onClose, position, ref }) => {
-	const resolvedTestId = dataTestId ?? "spectral-radial-menu";
+const RadialMenu = ({ ariaLabel, backLabel = "Back", className, dataTestId = "spectral-radial-menu", items, onClose, position, ref }) => {
 	const containerRef = useRef(null);
 	const levelTimersRef = useRef([]);
 	const [activeSubmenuId, setActiveSubmenuId] = useState(null);
@@ -294,7 +293,7 @@ const RadialMenu = ({ ariaLabel, backLabel = "Back", className, dataTestId, item
 					nonInteractive: !inSubmenu,
 					onClick: goBack,
 					opacity: inSubmenu ? 1 : 0,
-					testId: `${resolvedTestId}-back`,
+					testId: `${dataTestId}-back`,
 					x: backSkin.offset.x,
 					y: backSkin.offset.y
 				}),
@@ -309,7 +308,7 @@ const RadialMenu = ({ ariaLabel, backLabel = "Back", className, dataTestId, item
 							activate(item);
 						},
 						opacity: settled ? item.disabled === true ? .4 : 1 : 0,
-						testId: `${resolvedTestId}-item`,
+						testId: `${dataTestId}-item`,
 						x: settled ? base.x + offset.x : spreadOrigin.x,
 						y: settled ? base.y + offset.y : spreadOrigin.y
 					});

package/dist/RadialMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadialMenu.js","names":[],"sources":["../src/components/RadialMenu/RadialMenu.tsx"],"sourcesContent":["import { ChevronDownIcon } from '@components/Icons'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@components/Tooltip/Tooltip'\nimport { cn } from '@utils/twUtils'\nimport { Fragment, useCallback, useEffect, useMemo, useRef, useState, type ReactNode, type Ref } from 'react'\nimport { createPortal } from 'react-dom'\n\nexport interface RadialMenuItem {\n  /** Optional longer description shown in a tooltip on hover, since labels are kept short. */\n  description?: string\n  destructive?: boolean\n  disabled?: boolean\n  icon: ReactNode\n  id: string\n  items?: RadialMenuItem[]\n  label: string\n  onSelect?: () => void\n}\n\nexport interface RadialMenuProps {\n  ariaLabel: string\n  backLabel?: string\n  className?: string\n  dataTestId?: string\n  items: RadialMenuItem[]\n  onClose: () => void\n  position: { x: number; y: number } | null\n}\n\nconst BOUNCE_EASE = 'motion-safe:ease-[cubic-bezier(0.34,1.56,0.64,1)]'\n// Stacked soft shadows form a dense-but-soft halo so labels stay legible over any background.\nconst LABEL_SHADOW = '[text-shadow:0_0_5px_var(--color-text-inverted),0_0_5px_var(--color-text-inverted),0_0_10px_var(--color-text-inverted),0_0_10px_var(--color-text-inverted),0_0_16px_var(--color-text-inverted),0_0_16px_var(--color-text-inverted),0_0_22px_var(--color-text-inverted)]'\nconst CLOSE_MS = 260\nconst LEVEL_MS = 200\nconst LABEL_OFFSET = 30\nconst PRIMARY_RADIUS = 70\nconst SUB_RADIUS = 96\nconst ITEM_REACH = 44\nconst VIEWPORT_MARGIN = 16\n\n// When the menu is larger than the viewport (min > max), center it; otherwise clamp normally.\nconst clamp = (value: number, min: number, max: number) => (min > max ? (min + max) / 2 : Math.min(Math.max(value, min), max))\n\n// Double rAF so the collapsed \"from\" state paints before the transition target is applied.\nconst runAfterPaint = (callback: () => void) => {\n  let inner = 0\n  const outer = requestAnimationFrame(() => {\n    inner = requestAnimationFrame(callback)\n  })\n  return () => {\n    cancelAnimationFrame(outer)\n    cancelAnimationFrame(inner)\n  }\n}\n\nconst positionForIndex = (index: number, count: number, radius: number) => {\n  const angle = -Math.PI / 2 + (index * 2 * Math.PI) / count\n  return { x: Math.cos(angle) * radius, y: Math.sin(angle) * radius }\n}\n\n// Fanned across an arc centered straight up, so a sub-ring arches above its parent.\nconst SUB_ARC_CENTER = -Math.PI / 2\nconst SUB_ARC_SPAN = Math.PI * 0.7\nconst positionOnArc = (index: number, count: number, radius: number) => {\n  const angle = count <= 1 ? SUB_ARC_CENTER : SUB_ARC_CENTER - SUB_ARC_SPAN / 2 + (index / (count - 1)) * SUB_ARC_SPAN\n  return { x: Math.cos(angle) * radius, y: Math.sin(angle) * radius }\n}\n\nexport const RadialMenu = ({ ariaLabel, backLabel = 'Back', className, dataTestId, items, onClose, position, ref }: RadialMenuProps & { ref?: Ref<HTMLDivElement> }) => {\n  const resolvedTestId = dataTestId ?? 'spectral-radial-menu'\n  const containerRef = useRef<HTMLDivElement>(null)\n  const levelTimersRef = useRef<number[]>([])\n  const [activeSubmenuId, setActiveSubmenuId] = useState<string | null>(null)\n  const [highlightIndex, setHighlightIndex] = useState(-1)\n  // Items animate between `spreadOrigin` (collapsed) and `base + ring offset` (expanded).\n  const [renderCenter, setRenderCenter] = useState(position)\n  const [expanded, setExpanded] = useState(false)\n  const [spreadOrigin, setSpreadOrigin] = useState<{ x: number; y: number }>({ x: 0, y: 0 })\n  // Parent re-skinned as a back control, kept mounted so it swaps cleanly with the real item.\n  const [backSkin, setBackSkin] = useState<{ item: RadialMenuItem; offset: { x: number; y: number } } | null>(null)\n  // The returned item appears instantly at its spot (swapping in for the chevron) rather than fading.\n  const [returningId, setReturningId] = useState<string | null>(null)\n\n  const clearLevelTimers = useCallback(() => {\n    levelTimersRef.current.forEach((id) => clearTimeout(id))\n    levelTimersRef.current = []\n  }, [])\n\n  useEffect(() => {\n    // Cancel any in-flight level-change timers so a stale callback can't mutate a new cycle.\n    clearLevelTimers()\n    if (position !== null) {\n      setRenderCenter(position)\n      setActiveSubmenuId(null)\n      setHighlightIndex(-1)\n      setSpreadOrigin({ x: 0, y: 0 })\n      setBackSkin(null)\n      setReturningId(null)\n      setExpanded(false)\n      return runAfterPaint(() => {\n        setExpanded(true)\n        containerRef.current?.focus()\n      })\n    }\n    setExpanded(false)\n    // Collapse to the center, not the lingering sub-ring origin, so close mirrors open.\n    setSpreadOrigin({ x: 0, y: 0 })\n    const timer = setTimeout(() => {\n      setRenderCenter(null)\n      setBackSkin(null)\n    }, CLOSE_MS)\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [clearLevelTimers, position])\n\n  useEffect(() => {\n    if (position === null) {\n      return () => {}\n    }\n    window.addEventListener('scroll', onClose, true)\n    window.addEventListener('resize', onClose)\n    return () => {\n      window.removeEventListener('scroll', onClose, true)\n      window.removeEventListener('resize', onClose)\n    }\n  }, [position, onClose])\n\n  const renderCenterRef = useRef(renderCenter)\n  renderCenterRef.current = renderCenter\n  useEffect(() => {\n    if (renderCenterRef.current === null) {\n      return () => {}\n    }\n    return runAfterPaint(() => {\n      setExpanded(true)\n    })\n  }, [activeSubmenuId])\n\n  useEffect(() => clearLevelTimers, [clearLevelTimers])\n\n  const activeItems = useMemo(() => {\n    if (activeSubmenuId === null) return items\n    return items.find((item) => item.id === activeSubmenuId)?.items ?? items\n  }, [activeSubmenuId, items])\n\n  const activate = useCallback(\n    (item: RadialMenuItem) => {\n      if (item.disabled === true) return\n      if (item.items && item.items.length > 0) {\n        clearLevelTimers()\n        const index = items.findIndex((candidate) => candidate.id === item.id)\n        const offset = positionForIndex(index, items.length, PRIMARY_RADIUS)\n        setSpreadOrigin(offset)\n        setReturningId(null)\n        setBackSkin({\n          item: {\n            ...item,\n            description: undefined,\n            icon: (\n              <ChevronDownIcon\n                className='rotate-90'\n                size={20}\n              />\n            ),\n            id: `${item.id}__back`,\n            items: undefined,\n            label: backLabel,\n          },\n          offset,\n        })\n        setActiveSubmenuId(item.id)\n        setHighlightIndex(-1)\n        setExpanded(false)\n        return\n      }\n      item.onSelect?.()\n      onClose()\n    },\n    [backLabel, clearLevelTimers, items, onClose],\n  )\n\n  const goBack = useCallback(() => {\n    const returningSubmenuId = activeSubmenuId\n    const index = items.findIndex((candidate) => candidate.id === returningSubmenuId)\n    setSpreadOrigin(index >= 0 ? positionForIndex(index, items.length, PRIMARY_RADIUS) : { x: 0, y: 0 })\n    setExpanded(false)\n    setHighlightIndex(-1)\n    clearLevelTimers()\n    levelTimersRef.current = [\n      window.setTimeout(() => {\n        if (renderCenterRef.current === null) return\n        setActiveSubmenuId(null)\n        setBackSkin(null)\n        setReturningId(returningSubmenuId)\n      }, LEVEL_MS),\n      window.setTimeout(() => {\n        if (renderCenterRef.current !== null) {\n          setReturningId(null)\n        }\n      }, LEVEL_MS + 350),\n    ]\n  }, [activeSubmenuId, clearLevelTimers, items])\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const count = activeItems.length\n      if (count === 0) return\n\n      switch (event.key) {\n        case 'ArrowRight':\n        case 'ArrowDown': {\n          event.preventDefault()\n          setHighlightIndex((index) => (index < 0 ? 0 : (index + 1) % count))\n          break\n        }\n        case 'ArrowLeft':\n        case 'ArrowUp': {\n          event.preventDefault()\n          setHighlightIndex((index) => (index < 0 ? count - 1 : (index - 1 + count) % count))\n          break\n        }\n        case 'Enter':\n        case ' ': {\n          event.preventDefault()\n          const item = activeItems[highlightIndex]\n          if (item) activate(item)\n          break\n        }\n        case 'Escape': {\n          event.preventDefault()\n          if (activeSubmenuId === null) {\n            onClose()\n          } else {\n            goBack()\n          }\n          break\n        }\n        case 'Tab': {\n          event.preventDefault()\n          break\n        }\n        default: {\n          break\n        }\n      }\n    },\n    [activate, activeItems, activeSubmenuId, goBack, highlightIndex, onClose],\n  )\n\n  if (renderCenter === null || typeof document === 'undefined') {\n    return null\n  }\n\n  const inSubmenu = activeSubmenuId !== null\n  const parentIndex = inSubmenu ? items.findIndex((item) => item.id === activeSubmenuId) : -1\n  const parentItem = parentIndex >= 0 ? (items[parentIndex] ?? null) : null\n  const base = parentItem === null ? { x: 0, y: 0 } : positionForIndex(parentIndex, items.length, PRIMARY_RADIUS)\n  const ringRadius = inSubmenu ? SUB_RADIUS : PRIMARY_RADIUS\n\n  const reach = (inSubmenu ? PRIMARY_RADIUS + SUB_RADIUS : PRIMARY_RADIUS) + ITEM_REACH\n  const cx = clamp(renderCenter.x, reach + VIEWPORT_MARGIN, window.innerWidth - reach - VIEWPORT_MARGIN)\n  const cy = clamp(renderCenter.y, reach + VIEWPORT_MARGIN, window.innerHeight - reach - VIEWPORT_MARGIN)\n\n  const renderSpoke = (options: { delay?: number; isActive?: boolean; isHighlighted?: boolean; item: RadialMenuItem; nonInteractive?: boolean; onClick: () => void; opacity: number; testId: string; x: number; y: number }) => {\n    const { delay = 0, isActive = false, isHighlighted = false, item, nonInteractive = false, onClick, opacity, testId, x, y } = options\n    const hasSubmenu = Boolean(item.items && item.items.length > 0)\n    const circle = (\n      <button\n        aria-disabled={item.disabled}\n        aria-haspopup={hasSubmenu ? 'menu' : undefined}\n        aria-label={item.label}\n        className={cn(\n          'size-12 absolute flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full',\n          'border border-border-primary bg-popover-bg text-popover-text shadow-elevation-3',\n          'hover:scale-110 hover:cursor-pointer hover:border-toggle-border hover:bg-level-three',\n          'motion-safe:transition-[left,top,opacity,transform] motion-safe:duration-300',\n          BOUNCE_EASE,\n          (isHighlighted || isActive) && 'border-toggle-border bg-level-three',\n          isHighlighted && 'scale-110',\n          item.destructive === true && 'text-danger-300',\n          item.disabled === true && 'pointer-events-none hover:scale-100',\n          nonInteractive && 'pointer-events-none',\n        )}\n        data-testid={testId}\n        disabled={item.disabled}\n        onClick={onClick}\n        role='menuitem'\n        style={{ left: x, opacity, top: y, transitionDelay: `${delay}ms` }}\n        type='button'\n      >\n        {item.icon}\n        {hasSubmenu && (\n          <span\n            aria-hidden\n            className='size-4 -right-0.5 -top-0.5 font-semibold absolute flex items-center justify-center rounded-full border border-border-primary bg-level-four text-[9px] leading-none text-text-primary tabular-nums'\n            data-testid={`${testId}-submenu-count`}\n          >\n            {item.items?.length}\n          </span>\n        )}\n      </button>\n    )\n    return (\n      <Fragment key={item.id}>\n        {item.description ? (\n          <Tooltip delayDuration={400}>\n            <TooltipTrigger asChild>{circle}</TooltipTrigger>\n            <TooltipContent>{item.description}</TooltipContent>\n          </Tooltip>\n        ) : (\n          circle\n        )}\n        <span\n          aria-hidden\n          className={cn(\n            'w-20 font-medium leading-tight pointer-events-none absolute -translate-x-1/2 text-center text-[10px]',\n            LABEL_SHADOW,\n            'motion-safe:transition-[left,top,opacity] motion-safe:duration-300',\n            BOUNCE_EASE,\n            item.destructive === true ? 'text-danger-300' : 'text-text-primary',\n          )}\n          data-testid={`${testId}-label`}\n          style={{ left: x, opacity, top: y + LABEL_OFFSET, transitionDelay: `${delay}ms` }}\n        >\n          {item.label}\n        </span>\n      </Fragment>\n    )\n  }\n\n  return createPortal(\n    <div\n      className='inset-0 fixed z-50 motion-safe:duration-150 motion-safe:animate-in motion-safe:fade-in-0'\n      data-testid={resolvedTestId}\n      onContextMenu={(event) => {\n        event.preventDefault()\n      }}\n      onPointerDown={(event) => {\n        if (event.target === event.currentTarget) {\n          onClose()\n        }\n      }}\n      ref={ref}\n    >\n      <div\n        aria-label={ariaLabel}\n        className={cn('focus-visible:ring-ring absolute origin-center focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none', className)}\n        data-testid={`${resolvedTestId}-menu`}\n        onKeyDown={handleKeyDown}\n        ref={containerRef}\n        role='menu'\n        style={{ left: cx, top: cy }}\n        tabIndex={-1}\n      >\n        {!inSubmenu && (\n          <span\n            aria-hidden\n            className='size-1.5 absolute -translate-x-1/2 -translate-y-1/2 rounded-full bg-text-secondary opacity-60'\n            data-testid={`${resolvedTestId}-center`}\n          />\n        )}\n        {backSkin !== null &&\n          renderSpoke({\n            isActive: true,\n            item: backSkin.item,\n            nonInteractive: !inSubmenu,\n            onClick: goBack,\n            opacity: inSubmenu ? 1 : 0,\n            testId: `${resolvedTestId}-back`,\n            x: backSkin.offset.x,\n            y: backSkin.offset.y,\n          })}\n        {activeItems.map((item, index) => {\n          const offset = inSubmenu ? positionOnArc(index, activeItems.length, ringRadius) : positionForIndex(index, activeItems.length, ringRadius)\n          const settled = expanded || item.id === returningId\n          return renderSpoke({\n            delay: item.id === returningId ? 0 : expanded ? index * 25 : 0,\n            isHighlighted: index === highlightIndex,\n            item,\n            onClick: () => {\n              activate(item)\n            },\n            opacity: settled ? (item.disabled === true ? 0.4 : 1) : 0,\n            testId: `${resolvedTestId}-item`,\n            x: settled ? base.x + offset.x : spreadOrigin.x,\n            y: settled ? base.y + offset.y : spreadOrigin.y,\n          })\n        })}\n      </div>\n    </div>,\n    document.body,\n  )\n}\n\nRadialMenu.displayName = 'RadialMenu'\n"],"mappings":"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"}
+{"version":3,"file":"RadialMenu.js","names":[],"sources":["../src/components/RadialMenu/RadialMenu.tsx"],"sourcesContent":["import { ChevronDownIcon } from '@components/Icons'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@components/Tooltip/Tooltip'\nimport { cn } from '@utils/twUtils'\nimport { Fragment, useCallback, useEffect, useMemo, useRef, useState, type ReactNode, type Ref } from 'react'\nimport { createPortal } from 'react-dom'\n\nexport interface RadialMenuItem {\n  /** Optional longer description shown in a tooltip on hover, since labels are kept short. */\n  description?: string\n  destructive?: boolean\n  disabled?: boolean\n  icon: ReactNode\n  id: string\n  items?: RadialMenuItem[]\n  label: string\n  onSelect?: () => void\n}\n\nexport interface RadialMenuProps {\n  ariaLabel: string\n  backLabel?: string\n  className?: string\n  dataTestId?: string\n  items: RadialMenuItem[]\n  onClose: () => void\n  position: { x: number; y: number } | null\n}\n\nconst BOUNCE_EASE = 'motion-safe:ease-[cubic-bezier(0.34,1.56,0.64,1)]'\n// Stacked soft shadows form a dense-but-soft halo so labels stay legible over any background.\nconst LABEL_SHADOW = '[text-shadow:0_0_5px_var(--color-text-inverted),0_0_5px_var(--color-text-inverted),0_0_10px_var(--color-text-inverted),0_0_10px_var(--color-text-inverted),0_0_16px_var(--color-text-inverted),0_0_16px_var(--color-text-inverted),0_0_22px_var(--color-text-inverted)]'\nconst CLOSE_MS = 260\nconst LEVEL_MS = 200\nconst LABEL_OFFSET = 30\nconst PRIMARY_RADIUS = 70\nconst SUB_RADIUS = 96\nconst ITEM_REACH = 44\nconst VIEWPORT_MARGIN = 16\n\n// When the menu is larger than the viewport (min > max), center it; otherwise clamp normally.\nconst clamp = (value: number, min: number, max: number) => (min > max ? (min + max) / 2 : Math.min(Math.max(value, min), max))\n\n// Double rAF so the collapsed \"from\" state paints before the transition target is applied.\nconst runAfterPaint = (callback: () => void) => {\n  let inner = 0\n  const outer = requestAnimationFrame(() => {\n    inner = requestAnimationFrame(callback)\n  })\n  return () => {\n    cancelAnimationFrame(outer)\n    cancelAnimationFrame(inner)\n  }\n}\n\nconst positionForIndex = (index: number, count: number, radius: number) => {\n  const angle = -Math.PI / 2 + (index * 2 * Math.PI) / count\n  return { x: Math.cos(angle) * radius, y: Math.sin(angle) * radius }\n}\n\n// Fanned across an arc centered straight up, so a sub-ring arches above its parent.\nconst SUB_ARC_CENTER = -Math.PI / 2\nconst SUB_ARC_SPAN = Math.PI * 0.7\nconst positionOnArc = (index: number, count: number, radius: number) => {\n  const angle = count <= 1 ? SUB_ARC_CENTER : SUB_ARC_CENTER - SUB_ARC_SPAN / 2 + (index / (count - 1)) * SUB_ARC_SPAN\n  return { x: Math.cos(angle) * radius, y: Math.sin(angle) * radius }\n}\n\nexport const RadialMenu = ({ ariaLabel, backLabel = 'Back', className, dataTestId = 'spectral-radial-menu', items, onClose, position, ref }: RadialMenuProps & { ref?: Ref<HTMLDivElement> }) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const levelTimersRef = useRef<number[]>([])\n  const [activeSubmenuId, setActiveSubmenuId] = useState<string | null>(null)\n  const [highlightIndex, setHighlightIndex] = useState(-1)\n  // Items animate between `spreadOrigin` (collapsed) and `base + ring offset` (expanded).\n  const [renderCenter, setRenderCenter] = useState(position)\n  const [expanded, setExpanded] = useState(false)\n  const [spreadOrigin, setSpreadOrigin] = useState<{ x: number; y: number }>({ x: 0, y: 0 })\n  // Parent re-skinned as a back control, kept mounted so it swaps cleanly with the real item.\n  const [backSkin, setBackSkin] = useState<{ item: RadialMenuItem; offset: { x: number; y: number } } | null>(null)\n  // The returned item appears instantly at its spot (swapping in for the chevron) rather than fading.\n  const [returningId, setReturningId] = useState<string | null>(null)\n\n  const clearLevelTimers = useCallback(() => {\n    levelTimersRef.current.forEach((id) => clearTimeout(id))\n    levelTimersRef.current = []\n  }, [])\n\n  useEffect(() => {\n    // Cancel any in-flight level-change timers so a stale callback can't mutate a new cycle.\n    clearLevelTimers()\n    if (position !== null) {\n      setRenderCenter(position)\n      setActiveSubmenuId(null)\n      setHighlightIndex(-1)\n      setSpreadOrigin({ x: 0, y: 0 })\n      setBackSkin(null)\n      setReturningId(null)\n      setExpanded(false)\n      return runAfterPaint(() => {\n        setExpanded(true)\n        containerRef.current?.focus()\n      })\n    }\n    setExpanded(false)\n    // Collapse to the center, not the lingering sub-ring origin, so close mirrors open.\n    setSpreadOrigin({ x: 0, y: 0 })\n    const timer = setTimeout(() => {\n      setRenderCenter(null)\n      setBackSkin(null)\n    }, CLOSE_MS)\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [clearLevelTimers, position])\n\n  useEffect(() => {\n    if (position === null) {\n      return () => {}\n    }\n    window.addEventListener('scroll', onClose, true)\n    window.addEventListener('resize', onClose)\n    return () => {\n      window.removeEventListener('scroll', onClose, true)\n      window.removeEventListener('resize', onClose)\n    }\n  }, [position, onClose])\n\n  const renderCenterRef = useRef(renderCenter)\n  renderCenterRef.current = renderCenter\n  useEffect(() => {\n    if (renderCenterRef.current === null) {\n      return () => {}\n    }\n    return runAfterPaint(() => {\n      setExpanded(true)\n    })\n  }, [activeSubmenuId])\n\n  useEffect(() => clearLevelTimers, [clearLevelTimers])\n\n  const activeItems = useMemo(() => {\n    if (activeSubmenuId === null) return items\n    return items.find((item) => item.id === activeSubmenuId)?.items ?? items\n  }, [activeSubmenuId, items])\n\n  const activate = useCallback(\n    (item: RadialMenuItem) => {\n      if (item.disabled === true) return\n      if (item.items && item.items.length > 0) {\n        clearLevelTimers()\n        const index = items.findIndex((candidate) => candidate.id === item.id)\n        const offset = positionForIndex(index, items.length, PRIMARY_RADIUS)\n        setSpreadOrigin(offset)\n        setReturningId(null)\n        setBackSkin({\n          item: {\n            ...item,\n            description: undefined,\n            icon: (\n              <ChevronDownIcon\n                className='rotate-90'\n                size={20}\n              />\n            ),\n            id: `${item.id}__back`,\n            items: undefined,\n            label: backLabel,\n          },\n          offset,\n        })\n        setActiveSubmenuId(item.id)\n        setHighlightIndex(-1)\n        setExpanded(false)\n        return\n      }\n      item.onSelect?.()\n      onClose()\n    },\n    [backLabel, clearLevelTimers, items, onClose],\n  )\n\n  const goBack = useCallback(() => {\n    const returningSubmenuId = activeSubmenuId\n    const index = items.findIndex((candidate) => candidate.id === returningSubmenuId)\n    setSpreadOrigin(index >= 0 ? positionForIndex(index, items.length, PRIMARY_RADIUS) : { x: 0, y: 0 })\n    setExpanded(false)\n    setHighlightIndex(-1)\n    clearLevelTimers()\n    levelTimersRef.current = [\n      window.setTimeout(() => {\n        if (renderCenterRef.current === null) return\n        setActiveSubmenuId(null)\n        setBackSkin(null)\n        setReturningId(returningSubmenuId)\n      }, LEVEL_MS),\n      window.setTimeout(() => {\n        if (renderCenterRef.current !== null) {\n          setReturningId(null)\n        }\n      }, LEVEL_MS + 350),\n    ]\n  }, [activeSubmenuId, clearLevelTimers, items])\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const count = activeItems.length\n      if (count === 0) return\n\n      switch (event.key) {\n        case 'ArrowRight':\n        case 'ArrowDown': {\n          event.preventDefault()\n          setHighlightIndex((index) => (index < 0 ? 0 : (index + 1) % count))\n          break\n        }\n        case 'ArrowLeft':\n        case 'ArrowUp': {\n          event.preventDefault()\n          setHighlightIndex((index) => (index < 0 ? count - 1 : (index - 1 + count) % count))\n          break\n        }\n        case 'Enter':\n        case ' ': {\n          event.preventDefault()\n          const item = activeItems[highlightIndex]\n          if (item) activate(item)\n          break\n        }\n        case 'Escape': {\n          event.preventDefault()\n          if (activeSubmenuId === null) {\n            onClose()\n          } else {\n            goBack()\n          }\n          break\n        }\n        case 'Tab': {\n          event.preventDefault()\n          break\n        }\n        default: {\n          break\n        }\n      }\n    },\n    [activate, activeItems, activeSubmenuId, goBack, highlightIndex, onClose],\n  )\n\n  if (renderCenter === null || typeof document === 'undefined') {\n    return null\n  }\n\n  const inSubmenu = activeSubmenuId !== null\n  const parentIndex = inSubmenu ? items.findIndex((item) => item.id === activeSubmenuId) : -1\n  const parentItem = parentIndex >= 0 ? (items[parentIndex] ?? null) : null\n  const base = parentItem === null ? { x: 0, y: 0 } : positionForIndex(parentIndex, items.length, PRIMARY_RADIUS)\n  const ringRadius = inSubmenu ? SUB_RADIUS : PRIMARY_RADIUS\n\n  const reach = (inSubmenu ? PRIMARY_RADIUS + SUB_RADIUS : PRIMARY_RADIUS) + ITEM_REACH\n  const cx = clamp(renderCenter.x, reach + VIEWPORT_MARGIN, window.innerWidth - reach - VIEWPORT_MARGIN)\n  const cy = clamp(renderCenter.y, reach + VIEWPORT_MARGIN, window.innerHeight - reach - VIEWPORT_MARGIN)\n\n  const renderSpoke = (options: { delay?: number; isActive?: boolean; isHighlighted?: boolean; item: RadialMenuItem; nonInteractive?: boolean; onClick: () => void; opacity: number; testId: string; x: number; y: number }) => {\n    const { delay = 0, isActive = false, isHighlighted = false, item, nonInteractive = false, onClick, opacity, testId, x, y } = options\n    const hasSubmenu = Boolean(item.items && item.items.length > 0)\n    const circle = (\n      <button\n        aria-disabled={item.disabled}\n        aria-haspopup={hasSubmenu ? 'menu' : undefined}\n        aria-label={item.label}\n        className={cn(\n          'size-12 absolute flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full',\n          'border border-border-primary bg-popover-bg text-popover-text shadow-elevation-3',\n          'hover:scale-110 hover:cursor-pointer hover:border-toggle-border hover:bg-level-three',\n          'motion-safe:transition-[left,top,opacity,transform] motion-safe:duration-300',\n          BOUNCE_EASE,\n          (isHighlighted || isActive) && 'border-toggle-border bg-level-three',\n          isHighlighted && 'scale-110',\n          item.destructive === true && 'text-danger-300',\n          item.disabled === true && 'pointer-events-none hover:scale-100',\n          nonInteractive && 'pointer-events-none',\n        )}\n        data-testid={testId}\n        disabled={item.disabled}\n        onClick={onClick}\n        role='menuitem'\n        style={{ left: x, opacity, top: y, transitionDelay: `${delay}ms` }}\n        type='button'\n      >\n        {item.icon}\n        {hasSubmenu && (\n          <span\n            aria-hidden\n            className='size-4 -right-0.5 -top-0.5 font-semibold absolute flex items-center justify-center rounded-full border border-border-primary bg-level-four text-[9px] leading-none text-text-primary tabular-nums'\n            data-testid={`${testId}-submenu-count`}\n          >\n            {item.items?.length}\n          </span>\n        )}\n      </button>\n    )\n    return (\n      <Fragment key={item.id}>\n        {item.description ? (\n          <Tooltip delayDuration={400}>\n            <TooltipTrigger asChild>{circle}</TooltipTrigger>\n            <TooltipContent>{item.description}</TooltipContent>\n          </Tooltip>\n        ) : (\n          circle\n        )}\n        <span\n          aria-hidden\n          className={cn(\n            'w-20 font-medium leading-tight pointer-events-none absolute -translate-x-1/2 text-center text-[10px]',\n            LABEL_SHADOW,\n            'motion-safe:transition-[left,top,opacity] motion-safe:duration-300',\n            BOUNCE_EASE,\n            item.destructive === true ? 'text-danger-300' : 'text-text-primary',\n          )}\n          data-testid={`${testId}-label`}\n          style={{ left: x, opacity, top: y + LABEL_OFFSET, transitionDelay: `${delay}ms` }}\n        >\n          {item.label}\n        </span>\n      </Fragment>\n    )\n  }\n\n  return createPortal(\n    <div\n      className='inset-0 fixed z-50 motion-safe:duration-150 motion-safe:animate-in motion-safe:fade-in-0'\n      data-testid={dataTestId}\n      onContextMenu={(event) => {\n        event.preventDefault()\n      }}\n      onPointerDown={(event) => {\n        if (event.target === event.currentTarget) {\n          onClose()\n        }\n      }}\n      ref={ref}\n    >\n      <div\n        aria-label={ariaLabel}\n        className={cn('focus-visible:ring-ring absolute origin-center focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none', className)}\n        data-testid={`${dataTestId}-menu`}\n        onKeyDown={handleKeyDown}\n        ref={containerRef}\n        role='menu'\n        style={{ left: cx, top: cy }}\n        tabIndex={-1}\n      >\n        {!inSubmenu && (\n          <span\n            aria-hidden\n            className='size-1.5 absolute -translate-x-1/2 -translate-y-1/2 rounded-full bg-text-secondary opacity-60'\n            data-testid={`${dataTestId}-center`}\n          />\n        )}\n        {backSkin !== null &&\n          renderSpoke({\n            isActive: true,\n            item: backSkin.item,\n            nonInteractive: !inSubmenu,\n            onClick: goBack,\n            opacity: inSubmenu ? 1 : 0,\n            testId: `${dataTestId}-back`,\n            x: backSkin.offset.x,\n            y: backSkin.offset.y,\n          })}\n        {activeItems.map((item, index) => {\n          const offset = inSubmenu ? positionOnArc(index, activeItems.length, ringRadius) : positionForIndex(index, activeItems.length, ringRadius)\n          const settled = expanded || item.id === returningId\n          return renderSpoke({\n            delay: item.id === returningId ? 0 : expanded ? index * 25 : 0,\n            isHighlighted: index === highlightIndex,\n            item,\n            onClick: () => {\n              activate(item)\n            },\n            opacity: settled ? (item.disabled === true ? 0.4 : 1) : 0,\n            testId: `${dataTestId}-item`,\n            x: settled ? base.x + offset.x : spreadOrigin.x,\n            y: settled ? base.y + offset.y : spreadOrigin.y,\n          })\n        })}\n      </div>\n    </div>,\n    document.body,\n  )\n}\n\nRadialMenu.displayName = 'RadialMenu'\n"],"mappings":"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"}

package/dist/RadioButton.js

@@ -18,7 +18,7 @@ const RadioButton = ({ asChild = false, activeColor = "default", activeTextColor
 		className: cn(`gap-2 rounded-md text-sm font-medium h-9 px-3 min-w-9 [&_svg:not([class*='size-']):not([width]):not([height])]:size-4 inline-flex items-center justify-center border border-toggle-border
       bg-toggle-bg text-toggle-text shadow-none transition-colors hover:cursor-pointer hover:border-toggle-border--hover hover:bg-toggle-bg--hover hover:text-toggle-text--hover focus-visible:z-10
       focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent active:border-toggle-border--active active:bg-toggle-bg--active active:text-toggle-text--active
-      disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=outline]:[--color-toggle-border:var(--color-toggle-outline-border)`, expanded && "w-full", isKeptActive && "data-[state=on]:border-toggle-border--active data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active", className),
+      disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=outline]:[--color-toggle-border:var(--color-toggle-outline-border)`, expanded && "w-full", variant === "outline" && "border-radio-button-outline-border", isKeptActive && "data-[state=on]:border-toggle-border--active data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active", className),
 		style: {
 			...getActiveColorStyle(activeColor, activeTextColor),
 			...style

package/dist/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","names":[],"sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import { Slot, type AsChildProp } from '@primitives/slot'\nimport { getActiveColorStyle, type ActiveColor, type ActiveTextColor } from '@utils/activeColorStyle'\nimport { cn } from '@utils/twUtils'\nimport { type ButtonHTMLAttributes, type MouseEvent, type ReactNode, type Ref } from 'react'\n\nexport interface RadioButtonProps extends AsChildProp, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect' | 'type'> {\n  activeColor?: ActiveColor\n  activeTextColor?: ActiveTextColor\n  checked?: boolean\n  children: ReactNode\n  expanded?: boolean\n  isKeptActive?: boolean\n  onCheckedChange?: (checked: boolean) => void\n  onSelect?: (checked: boolean) => void\n  variant?: 'default' | 'outline'\n}\n\nexport const RadioButton = ({\n  asChild = false,\n  activeColor = 'default',\n  activeTextColor,\n  checked = false,\n  children,\n  className,\n  disabled = false,\n  expanded = false,\n  isKeptActive = false,\n  onCheckedChange,\n  onClick,\n  onSelect,\n  ref,\n  variant = 'default',\n  style,\n  ...rest\n}: RadioButtonProps & {\n  ref?: Ref<HTMLButtonElement>\n}) => {\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event)\n    if (event.defaultPrevented || disabled) return\n\n    onCheckedChange?.(true)\n    onSelect?.(true)\n  }\n\n  const baseProps = {\n    ...rest,\n    className: cn(\n      `gap-2 rounded-md text-sm font-medium h-9 px-3 min-w-9 [&_svg:not([class*='size-']):not([width]):not([height])]:size-4 inline-flex items-center justify-center border border-toggle-border\n      bg-toggle-bg text-toggle-text shadow-none transition-colors hover:cursor-pointer hover:border-toggle-border--hover hover:bg-toggle-bg--hover hover:text-toggle-text--hover focus-visible:z-10\n      focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent active:border-toggle-border--active active:bg-toggle-bg--active active:text-toggle-text--active\n      disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=outline]:[--color-toggle-border:var(--color-toggle-outline-border)`,\n      expanded && 'w-full',\n      isKeptActive && 'data-[state=on]:border-toggle-border--active data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active',\n      className,\n    ),\n    style: { ...getActiveColorStyle(activeColor, activeTextColor), ...style },\n    disabled,\n    onClick: handleClick,\n    role: 'radio',\n    'aria-checked': checked,\n    'data-state': checked ? 'on' : 'off',\n    'data-testid': 'spectral-radio-button',\n    'data-variant': variant,\n  }\n\n  if (asChild) {\n    return (\n      <Slot ref={ref as Ref<HTMLElement>} {...baseProps}>\n        {children}\n      </Slot>\n    )\n  }\n\n  return (\n    <button ref={ref} {...baseProps} type='button'>\n      {children}\n    </button>\n  )\n}\n\nRadioButton.displayName = 'RadioButton'\n"],"mappings":";;;;;;;;AAiBA,MAAa,eAAe,EAC1B,UAAU,OACV,cAAc,WACd,iBACA,UAAU,OACV,UACA,WACA,WAAW,OACX,WAAW,OACX,eAAe,OACf,iBACA,SACA,UACA,KACA,UAAU,WACV,OACA,GAAG,WAGC;CACJ,MAAM,eAAe,UAAyC;AAC5D,YAAU,MAAM;AAChB,MAAI,MAAM,oBAAoB,SAAU;AAExC,oBAAkB,KAAK;AACvB,aAAW,KAAK;;CAGlB,MAAM,YAAY;EAChB,GAAG;EACH,WAAW,GACT;;;mNAIA,YAAY,UACZ,gBAAgB,8HAChB,UACD;EACD,OAAO;GAAE,GAAG,oBAAoB,aAAa,gBAAgB;GAAE,GAAG;GAAO;EACzE;EACA,SAAS;EACT,MAAM;EACN,gBAAgB;EAChB,cAAc,UAAU,OAAO;EAC/B,eAAe;EACf,gBAAgB;EACjB;AAED,KAAI,QACF,QACE,oBAAC,MAAD;EAAW;EAAyB,GAAI;EACrC;EACI;AAIX,QACE,oBAAC,UAAD;EAAa;EAAK,GAAI;EAAW,MAAK;EACnC;EACM;;AAIb,YAAY,cAAc"}
+{"version":3,"file":"RadioButton.js","names":[],"sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import { Slot, type AsChildProp } from '@primitives/slot'\nimport { getActiveColorStyle, type ActiveColor, type ActiveTextColor } from '@utils/activeColorStyle'\nimport { cn } from '@utils/twUtils'\nimport { type ButtonHTMLAttributes, type MouseEvent, type ReactNode, type Ref } from 'react'\n\nexport interface RadioButtonProps extends AsChildProp, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect' | 'type'> {\n  activeColor?: ActiveColor\n  activeTextColor?: ActiveTextColor\n  checked?: boolean\n  children: ReactNode\n  expanded?: boolean\n  isKeptActive?: boolean\n  onCheckedChange?: (checked: boolean) => void\n  onSelect?: (checked: boolean) => void\n  variant?: 'default' | 'outline'\n}\n\nexport const RadioButton = ({\n  asChild = false,\n  activeColor = 'default',\n  activeTextColor,\n  checked = false,\n  children,\n  className,\n  disabled = false,\n  expanded = false,\n  isKeptActive = false,\n  onCheckedChange,\n  onClick,\n  onSelect,\n  ref,\n  variant = 'default',\n  style,\n  ...rest\n}: RadioButtonProps & {\n  ref?: Ref<HTMLButtonElement>\n}) => {\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event)\n    if (event.defaultPrevented || disabled) return\n\n    onCheckedChange?.(true)\n    onSelect?.(true)\n  }\n\n  const baseProps = {\n    ...rest,\n    className: cn(\n      `gap-2 rounded-md text-sm font-medium h-9 px-3 min-w-9 [&_svg:not([class*='size-']):not([width]):not([height])]:size-4 inline-flex items-center justify-center border border-toggle-border\n      bg-toggle-bg text-toggle-text shadow-none transition-colors hover:cursor-pointer hover:border-toggle-border--hover hover:bg-toggle-bg--hover hover:text-toggle-text--hover focus-visible:z-10\n      focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent active:border-toggle-border--active active:bg-toggle-bg--active active:text-toggle-text--active\n      disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=outline]:[--color-toggle-border:var(--color-toggle-outline-border)`,\n      expanded && 'w-full',\n      variant === 'outline' && 'border-radio-button-outline-border',\n      isKeptActive && 'data-[state=on]:border-toggle-border--active data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active',\n      className,\n    ),\n    style: { ...getActiveColorStyle(activeColor, activeTextColor), ...style },\n    disabled,\n    onClick: handleClick,\n    role: 'radio',\n    'aria-checked': checked,\n    'data-state': checked ? 'on' : 'off',\n    'data-testid': 'spectral-radio-button',\n    'data-variant': variant,\n  }\n\n  if (asChild) {\n    return (\n      <Slot ref={ref as Ref<HTMLElement>} {...baseProps}>\n        {children}\n      </Slot>\n    )\n  }\n\n  return (\n    <button ref={ref} {...baseProps} type='button'>\n      {children}\n    </button>\n  )\n}\n\nRadioButton.displayName = 'RadioButton'\n"],"mappings":";;;;;;;;AAiBA,MAAa,eAAe,EAC1B,UAAU,OACV,cAAc,WACd,iBACA,UAAU,OACV,UACA,WACA,WAAW,OACX,WAAW,OACX,eAAe,OACf,iBACA,SACA,UACA,KACA,UAAU,WACV,OACA,GAAG,WAGC;CACJ,MAAM,eAAe,UAAyC;AAC5D,YAAU,MAAM;AAChB,MAAI,MAAM,oBAAoB,SAAU;AAExC,oBAAkB,KAAK;AACvB,aAAW,KAAK;;CAGlB,MAAM,YAAY;EAChB,GAAG;EACH,WAAW,GACT;;;mNAIA,YAAY,UACZ,YAAY,aAAa,sCACzB,gBAAgB,8HAChB,UACD;EACD,OAAO;GAAE,GAAG,oBAAoB,aAAa,gBAAgB;GAAE,GAAG;GAAO;EACzE;EACA,SAAS;EACT,MAAM;EACN,gBAAgB;EAChB,cAAc,UAAU,OAAO;EAC/B,eAAe;EACf,gBAAgB;EACjB;AAED,KAAI,QACF,QACE,oBAAC,MAAD;EAAW;EAAyB,GAAI;EACrC;EACI;AAIX,QACE,oBAAC,UAAD;EAAa;EAAK,GAAI;EAAW,MAAK;EACnC;EACM;;AAIb,YAAY,cAAc"}