@spear-ai/spectral 1.15.3 → 1.15.5

package/dist/IconsAnimated/PanelLeftCloseIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelLeftCloseIcon.js","names":[],"sources":["../../src/components/IconsAnimated/PanelLeftCloseIcon.tsx"],"sourcesContent":["import { cn } from '@utils/twUtils'\nimport { motion, useAnimation, type Transition, type Variants } from 'motion/react'\nimport { type MouseEvent, useCallback, useImperativeHandle, useRef } from 'react'\nimport { type AnimatedIconProps } from './iconTypes'\n\nconst DEFAULT_TRANSITION: Transition = {\n  times: [0, 0.4, 1],\n  duration: 0.5,\n}\n\nconst PATH_VARIANTS: Variants = {\n  normal: { x: 0 },\n  animate: { x: [0, -1.5, 0] },\n}\n\nexport const PanelLeftCloseIcon = ({ onMouseEnter, onMouseLeave, className, size = 28, ref, ...props }: AnimatedIconProps) => {\n  const controls = useAnimation()\n  const isControlledRef = useRef(false)\n\n  useImperativeHandle(ref, () => {\n    isControlledRef.current = true\n    return {\n      startAnimation: () => controls.start('animate'),\n      stopAnimation: () => controls.start('normal'),\n    }\n  })\n\n  const handleMouseEnter = useCallback(\n    (e: MouseEvent<HTMLDivElement>) => {\n      if (isControlledRef.current) {\n        onMouseEnter?.(e)\n      } else {\n        controls.start('animate')\n      }\n    },\n    [controls, onMouseEnter],\n  )\n\n  const handleMouseLeave = useCallback(\n    (e: MouseEvent<HTMLDivElement>) => {\n      if (isControlledRef.current) {\n        onMouseLeave?.(e)\n      } else {\n        controls.start('normal')\n      }\n    },\n    [controls, onMouseLeave],\n  )\n\n  return (\n    <div\n      className={cn(className)}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      {...props}\n    >\n      <svg\n        fill='none'\n        height={size}\n        stroke='currentColor'\n        strokeLinecap='round'\n        strokeLinejoin='round'\n        strokeWidth='2'\n        viewBox='0 0 24 24'\n        width={size}\n        xmlns='http://www.w3.org/2000/svg'\n      >\n        <rect\n          height='18'\n          rx='2'\n          width='18'\n          x='3'\n          y='3'\n        />\n        <path d='M9 3v18' />\n        <motion.path\n          animate={controls}\n          d='m16 15-3-3 3-3'\n          transition={DEFAULT_TRANSITION}\n          variants={PATH_VARIANTS}\n        />\n      </svg>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAKA,MAAM,qBAAiC;CACrC,OAAO;EAAC;EAAG;EAAK;EAAE;CAClB,UAAU;CACX;AAED,MAAM,gBAA0B;CAC9B,QAAQ,EAAE,GAAG,GAAG;CAChB,SAAS,EAAE,GAAG;EAAC;EAAG;EAAM;EAAE,EAAE;CAC7B;AAED,MAAa,sBAAsB,EAAE,cAAc,cAAc,WAAW,OAAO,IAAI,KAAK,GAAG,YAA+B;CAC5H,MAAM,WAAW,cAAc;CAC/B,MAAM,kBAAkB,OAAO,MAAM;AAErC,qBAAoB,WAAW;AAC7B,kBAAgB,UAAU;AAC1B,SAAO;GACL,sBAAsB,SAAS,MAAM,UAAU;GAC/C,qBAAqB,SAAS,MAAM,SAAS;GAC9C;GACD;CAEF,MAAM,mBAAmB,aACtB,MAAkC;AACjC,MAAI,gBAAgB,QAClB,gBAAe,EAAE;MAEjB,UAAS,MAAM,UAAU;IAG7B,CAAC,UAAU,aAAa,CACzB;CAED,MAAM,mBAAmB,aACtB,MAAkC;AACjC,MAAI,gBAAgB,QAClB,gBAAe,EAAE;MAEjB,UAAS,MAAM,SAAS;IAG5B,CAAC,UAAU,aAAa,CACzB;AAED,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,UAAU;EACxB,cAAc;EACd,cAAc;EACd,GAAI;YAEJ,qBAAC,OAAD;GACE,MAAK;GACL,QAAQ;GACR,QAAO;GACP,eAAc;GACd,gBAAe;GACf,aAAY;GACZ,SAAQ;GACR,OAAO;GACP,OAAM;aATR;IAWE,oBAAC,QAAD;KACE,QAAO;KACP,IAAG;KACH,OAAM;KACN,GAAE;KACF,GAAE;KACF;IACF,oBAAC,QAAD,EAAM,GAAE,WAAY;IACpB,oBAAC,OAAO,MAAR;KACE,SAAS;KACT,GAAE;KACF,YAAY;KACZ,UAAU;KACV;IACE;;EACF"}
+{"version":3,"file":"PanelLeftCloseIcon.js","names":[],"sources":["../../src/components/IconsAnimated/PanelLeftCloseIcon.tsx"],"sourcesContent":["import { cn } from '@utils/twUtils'\nimport { motion, useAnimation, type Transition, type Variants } from 'motion/react'\nimport { type MouseEvent, useCallback, useImperativeHandle, useRef } from 'react'\nimport { type AnimatedIconProps } from './iconTypes'\n\nconst DEFAULT_TRANSITION: Transition = {\n  times: [0, 0.4, 1],\n  duration: 0.5,\n}\n\nconst PATH_VARIANTS: Variants = {\n  normal: { x: 0 },\n  animate: { x: [0, -1.5, 0] },\n}\n\nexport const PanelLeftCloseIcon = ({ onMouseEnter, onMouseLeave, className, size = 28, ref, ...props }: AnimatedIconProps) => {\n  const controls = useAnimation()\n  const isControlledRef = useRef(false)\n\n  useImperativeHandle(ref, () => {\n    isControlledRef.current = true\n    return {\n      startAnimation: () => controls.start('animate'),\n      stopAnimation: () => controls.start('normal'),\n    }\n  })\n\n  const handleMouseEnter = useCallback(\n    (e: MouseEvent<HTMLDivElement>) => {\n      if (isControlledRef.current) {\n        onMouseEnter?.(e)\n      } else {\n        controls.start('animate')\n      }\n    },\n    [controls, onMouseEnter],\n  )\n\n  const handleMouseLeave = useCallback(\n    (e: MouseEvent<HTMLDivElement>) => {\n      if (isControlledRef.current) {\n        onMouseLeave?.(e)\n      } else {\n        controls.start('normal')\n      }\n    },\n    [controls, onMouseLeave],\n  )\n\n  return (\n    <div className={cn(className)} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} {...props}>\n      <svg fill='none' height={size} stroke='currentColor' strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' viewBox='0 0 24 24' width={size} xmlns='http://www.w3.org/2000/svg'>\n        <rect height='18' rx='2' width='18' x='3' y='3' />\n        <path d='M9 3v18' />\n        <motion.path animate={controls} d='m16 15-3-3 3-3' transition={DEFAULT_TRANSITION} variants={PATH_VARIANTS} />\n      </svg>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAKA,MAAM,qBAAiC;CACrC,OAAO;EAAC;EAAG;EAAK;EAAE;CAClB,UAAU;CACX;AAED,MAAM,gBAA0B;CAC9B,QAAQ,EAAE,GAAG,GAAG;CAChB,SAAS,EAAE,GAAG;EAAC;EAAG;EAAM;EAAE,EAAE;CAC7B;AAED,MAAa,sBAAsB,EAAE,cAAc,cAAc,WAAW,OAAO,IAAI,KAAK,GAAG,YAA+B;CAC5H,MAAM,WAAW,cAAc;CAC/B,MAAM,kBAAkB,OAAO,MAAM;AAErC,qBAAoB,WAAW;AAC7B,kBAAgB,UAAU;AAC1B,SAAO;GACL,sBAAsB,SAAS,MAAM,UAAU;GAC/C,qBAAqB,SAAS,MAAM,SAAS;GAC9C;GACD;CAEF,MAAM,mBAAmB,aACtB,MAAkC;AACjC,MAAI,gBAAgB,QAClB,gBAAe,EAAE;MAEjB,UAAS,MAAM,UAAU;IAG7B,CAAC,UAAU,aAAa,CACzB;CAED,MAAM,mBAAmB,aACtB,MAAkC;AACjC,MAAI,gBAAgB,QAClB,gBAAe,EAAE;MAEjB,UAAS,MAAM,SAAS;IAG5B,CAAC,UAAU,aAAa,CACzB;AAED,QACE,oBAAC,OAAD;EAAK,WAAW,GAAG,UAAU;EAAE,cAAc;EAAkB,cAAc;EAAkB,GAAI;YACjG,qBAAC,OAAD;GAAK,MAAK;GAAO,QAAQ;GAAM,QAAO;GAAe,eAAc;GAAQ,gBAAe;GAAQ,aAAY;GAAI,SAAQ;GAAY,OAAO;GAAM,OAAM;aAAzJ;IACE,oBAAC,QAAD;KAAM,QAAO;KAAK,IAAG;KAAI,OAAM;KAAK,GAAE;KAAI,GAAE;KAAM;IAClD,oBAAC,QAAD,EAAM,GAAE,WAAY;IACpB,oBAAC,OAAO,MAAR;KAAa,SAAS;KAAU,GAAE;KAAiB,YAAY;KAAoB,UAAU;KAAiB;IAC1G;;EACF"}

package/dist/IconsAnimated/PanelLeftOpenIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelLeftOpenIcon.js","names":[],"sources":["../../src/components/IconsAnimated/PanelLeftOpenIcon.tsx"],"sourcesContent":["import { cn } from '@utils/twUtils'\nimport { motion, useAnimation, type Transition, type Variants } from 'motion/react'\nimport { type MouseEvent, useCallback, useImperativeHandle, useRef } from 'react'\nimport { type AnimatedIconProps } from './iconTypes'\n\nconst DEFAULT_TRANSITION: Transition = {\n  times: [0, 0.4, 1],\n  duration: 0.5,\n}\n\nconst PATH_VARIANTS: Variants = {\n  normal: { x: 0 },\n  animate: { x: [0, 1.5, 0] },\n}\n\nexport const PanelLeftOpenIcon = ({ onMouseEnter, onMouseLeave, className, size = 28, ref, ...props }: AnimatedIconProps) => {\n  const controls = useAnimation()\n  const isControlledRef = useRef(false)\n\n  useImperativeHandle(ref, () => {\n    isControlledRef.current = true\n    return {\n      startAnimation: () => controls.start('animate'),\n      stopAnimation: () => controls.start('normal'),\n    }\n  })\n\n  const handleMouseEnter = useCallback(\n    (e: MouseEvent<HTMLDivElement>) => {\n      if (isControlledRef.current) {\n        onMouseEnter?.(e)\n      } else {\n        controls.start('animate')\n      }\n    },\n    [controls, onMouseEnter],\n  )\n\n  const handleMouseLeave = useCallback(\n    (e: MouseEvent<HTMLDivElement>) => {\n      if (isControlledRef.current) {\n        onMouseLeave?.(e)\n      } else {\n        controls.start('normal')\n      }\n    },\n    [controls, onMouseLeave],\n  )\n\n  return (\n    <div\n      className={cn(className)}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      {...props}\n    >\n      <svg\n        fill='none'\n        height={size}\n        stroke='currentColor'\n        strokeLinecap='round'\n        strokeLinejoin='round'\n        strokeWidth='2'\n        viewBox='0 0 24 24'\n        width={size}\n        xmlns='http://www.w3.org/2000/svg'\n      >\n        <rect\n          height='18'\n          rx='2'\n          width='18'\n          x='3'\n          y='3'\n        />\n        <path d='M9 3v18' />\n        <motion.path\n          animate={controls}\n          d='m14 9 3 3-3 3'\n          transition={DEFAULT_TRANSITION}\n          variants={PATH_VARIANTS}\n        />\n      </svg>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAKA,MAAM,qBAAiC;CACrC,OAAO;EAAC;EAAG;EAAK;EAAE;CAClB,UAAU;CACX;AAED,MAAM,gBAA0B;CAC9B,QAAQ,EAAE,GAAG,GAAG;CAChB,SAAS,EAAE,GAAG;EAAC;EAAG;EAAK;EAAE,EAAE;CAC5B;AAED,MAAa,qBAAqB,EAAE,cAAc,cAAc,WAAW,OAAO,IAAI,KAAK,GAAG,YAA+B;CAC3H,MAAM,WAAW,cAAc;CAC/B,MAAM,kBAAkB,OAAO,MAAM;AAErC,qBAAoB,WAAW;AAC7B,kBAAgB,UAAU;AAC1B,SAAO;GACL,sBAAsB,SAAS,MAAM,UAAU;GAC/C,qBAAqB,SAAS,MAAM,SAAS;GAC9C;GACD;CAEF,MAAM,mBAAmB,aACtB,MAAkC;AACjC,MAAI,gBAAgB,QAClB,gBAAe,EAAE;MAEjB,UAAS,MAAM,UAAU;IAG7B,CAAC,UAAU,aAAa,CACzB;CAED,MAAM,mBAAmB,aACtB,MAAkC;AACjC,MAAI,gBAAgB,QAClB,gBAAe,EAAE;MAEjB,UAAS,MAAM,SAAS;IAG5B,CAAC,UAAU,aAAa,CACzB;AAED,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,UAAU;EACxB,cAAc;EACd,cAAc;EACd,GAAI;YAEJ,qBAAC,OAAD;GACE,MAAK;GACL,QAAQ;GACR,QAAO;GACP,eAAc;GACd,gBAAe;GACf,aAAY;GACZ,SAAQ;GACR,OAAO;GACP,OAAM;aATR;IAWE,oBAAC,QAAD;KACE,QAAO;KACP,IAAG;KACH,OAAM;KACN,GAAE;KACF,GAAE;KACF;IACF,oBAAC,QAAD,EAAM,GAAE,WAAY;IACpB,oBAAC,OAAO,MAAR;KACE,SAAS;KACT,GAAE;KACF,YAAY;KACZ,UAAU;KACV;IACE;;EACF"}
+{"version":3,"file":"PanelLeftOpenIcon.js","names":[],"sources":["../../src/components/IconsAnimated/PanelLeftOpenIcon.tsx"],"sourcesContent":["import { cn } from '@utils/twUtils'\nimport { motion, useAnimation, type Transition, type Variants } from 'motion/react'\nimport { type MouseEvent, useCallback, useImperativeHandle, useRef } from 'react'\nimport { type AnimatedIconProps } from './iconTypes'\n\nconst DEFAULT_TRANSITION: Transition = {\n  times: [0, 0.4, 1],\n  duration: 0.5,\n}\n\nconst PATH_VARIANTS: Variants = {\n  normal: { x: 0 },\n  animate: { x: [0, 1.5, 0] },\n}\n\nexport const PanelLeftOpenIcon = ({ onMouseEnter, onMouseLeave, className, size = 28, ref, ...props }: AnimatedIconProps) => {\n  const controls = useAnimation()\n  const isControlledRef = useRef(false)\n\n  useImperativeHandle(ref, () => {\n    isControlledRef.current = true\n    return {\n      startAnimation: () => controls.start('animate'),\n      stopAnimation: () => controls.start('normal'),\n    }\n  })\n\n  const handleMouseEnter = useCallback(\n    (e: MouseEvent<HTMLDivElement>) => {\n      if (isControlledRef.current) {\n        onMouseEnter?.(e)\n      } else {\n        controls.start('animate')\n      }\n    },\n    [controls, onMouseEnter],\n  )\n\n  const handleMouseLeave = useCallback(\n    (e: MouseEvent<HTMLDivElement>) => {\n      if (isControlledRef.current) {\n        onMouseLeave?.(e)\n      } else {\n        controls.start('normal')\n      }\n    },\n    [controls, onMouseLeave],\n  )\n\n  return (\n    <div className={cn(className)} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} {...props}>\n      <svg fill='none' height={size} stroke='currentColor' strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' viewBox='0 0 24 24' width={size} xmlns='http://www.w3.org/2000/svg'>\n        <rect height='18' rx='2' width='18' x='3' y='3' />\n        <path d='M9 3v18' />\n        <motion.path animate={controls} d='m14 9 3 3-3 3' transition={DEFAULT_TRANSITION} variants={PATH_VARIANTS} />\n      </svg>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAKA,MAAM,qBAAiC;CACrC,OAAO;EAAC;EAAG;EAAK;EAAE;CAClB,UAAU;CACX;AAED,MAAM,gBAA0B;CAC9B,QAAQ,EAAE,GAAG,GAAG;CAChB,SAAS,EAAE,GAAG;EAAC;EAAG;EAAK;EAAE,EAAE;CAC5B;AAED,MAAa,qBAAqB,EAAE,cAAc,cAAc,WAAW,OAAO,IAAI,KAAK,GAAG,YAA+B;CAC3H,MAAM,WAAW,cAAc;CAC/B,MAAM,kBAAkB,OAAO,MAAM;AAErC,qBAAoB,WAAW;AAC7B,kBAAgB,UAAU;AAC1B,SAAO;GACL,sBAAsB,SAAS,MAAM,UAAU;GAC/C,qBAAqB,SAAS,MAAM,SAAS;GAC9C;GACD;CAEF,MAAM,mBAAmB,aACtB,MAAkC;AACjC,MAAI,gBAAgB,QAClB,gBAAe,EAAE;MAEjB,UAAS,MAAM,UAAU;IAG7B,CAAC,UAAU,aAAa,CACzB;CAED,MAAM,mBAAmB,aACtB,MAAkC;AACjC,MAAI,gBAAgB,QAClB,gBAAe,EAAE;MAEjB,UAAS,MAAM,SAAS;IAG5B,CAAC,UAAU,aAAa,CACzB;AAED,QACE,oBAAC,OAAD;EAAK,WAAW,GAAG,UAAU;EAAE,cAAc;EAAkB,cAAc;EAAkB,GAAI;YACjG,qBAAC,OAAD;GAAK,MAAK;GAAO,QAAQ;GAAM,QAAO;GAAe,eAAc;GAAQ,gBAAe;GAAQ,aAAY;GAAI,SAAQ;GAAY,OAAO;GAAM,OAAM;aAAzJ;IACE,oBAAC,QAAD;KAAM,QAAO;KAAK,IAAG;KAAI,OAAM;KAAK,GAAE;KAAI,GAAE;KAAM;IAClD,oBAAC,QAAD,EAAM,GAAE,WAAY;IACpB,oBAAC,OAAO,MAAR;KAAa,SAAS;KAAU,GAAE;KAAgB,YAAY;KAAoB,UAAU;KAAiB;IACzG;;EACF"}

package/dist/Input.js

@@ -135,7 +135,7 @@ const Input = (allProps) => {
 	const inputClasses = cn(getInputClasses(state, className), "[text-indent:var(--prefix-width)]", showClearButtonNow && "pr-10", usesTabularNumbers && "tabular-nums");
 	const prefixClasses = cn("inset-y-0 left-4 text-base pointer-events-none absolute flex items-center text-input-text-prefix opacity-100 peer-disabled:opacity-50");
 	return /* @__PURE__ */ jsxs("div", {
-		className: "gap-1.5 flex w-full flex-col",
+		className: "flex w-full flex-col gap-1.5",
 		"data-testid": "spectral-input-container",
 		children: [label && /* @__PURE__ */ jsx(Label, {
 			className: cn("mb-2 block", labelClassName, isDisabled && "cursor-not-allowed text-input-text--disabled placeholder:text-input-text-placeholder"),

package/dist/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":[],"sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import { CheckCircleIcon, CloseCircleIcon, ErrorIcon, EyeClosedIcon, EyeOpenIcon, LoaderIcon, WarningIcon } from '@components/Icons'\nimport { Label } from '@components/Label/Label'\nimport { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { ErrorMessage, WarningMessage, getAriaProps, getFormFieldCSSProperties, getInputClasses, useFormFieldId, useFormFieldState, type BaseFormFieldProps } from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { useCallback, useRef, type ChangeEvent, type CSSProperties, type FocusEvent, type InputHTMLAttributes, type ReactElement, type Ref } from 'react'\nimport { useClearOnFocus, usePasswordVisibility, usePrefixWidth } from './InputUtils'\n\nexport type InputType = 'text' | 'email' | 'url' | 'tel' | 'password' | 'number' | 'date' | 'datetime-local'\n\nexport type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'onChange'> &\n  BaseFormFieldProps & {\n    className?: string\n    clearOnFocus?: boolean\n    endIcon?: ReactElement\n    labelClassName?: string\n    onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n    onChange?: (value: string) => void\n    onFocus?: (e: FocusEvent<HTMLInputElement>) => void\n    placeholder?: string\n    prefix?: string\n    showClearButton?: boolean\n    showStateIcon?: boolean\n    startIcon?: ReactElement\n    suppressHydrationWarning?: boolean\n    type?: InputType\n    value?: string\n    warningMessage?: BaseFormFieldProps['errorMessage']\n  }\n\nconst mergeRefs = <T,>(...refs: (Ref<T> | undefined)[]): Ref<T> => {\n  return (value: T | null) => {\n    refs.forEach((ref) => {\n      if (!ref) return\n      if (typeof ref === 'function') {\n        ref(value)\n      } else {\n        ;(ref as { current: T | null }).current = value\n      }\n    })\n  }\n}\n\nconst getAutoCompleteValue = (type: InputType): string => {\n  const autoCompleteMap: Record<InputType, string> = {\n    date: 'off',\n    email: 'email',\n    number: 'off',\n    password: 'current-password',\n    tel: 'tel',\n    text: 'off',\n    url: 'url',\n    'datetime-local': 'off',\n  }\n  return autoCompleteMap[type] || 'off'\n}\n\nexport const Input = (\n  allProps: InputProps & {\n    ref?: Ref<HTMLInputElement>\n  },\n): ReactElement => {\n  const {\n    className,\n    clearOnFocus = false,\n    defaultValue,\n    disabled,\n    endIcon,\n    errorMessage,\n    id,\n    label,\n    labelClassName,\n    messageReserveLines = 1,\n    messageReserveSpace = false,\n    name,\n    onBlur,\n    onChange,\n    onFocus,\n    placeholder,\n    prefix,\n    ref,\n    required,\n    showClearButton = false,\n    showStateIcon = true,\n    startIcon,\n    state = 'default',\n    suppressHydrationWarning = true,\n    type = 'text',\n    value: valueProp,\n    warningMessage,\n    'aria-label': ariaLabel,\n    'aria-describedby': ariaDescribedBy,\n    ...props\n  } = allProps\n  const inputId = useFormFieldId(id, name)\n  const errorMessageId = `${inputId}-error`\n  const warningMessageId = `${inputId}-warning`\n  const { isDisabled, isLoading, isInvalid } = useFormFieldState(disabled, state)\n  const messageId = state === 'error' ? errorMessageId : state === 'warning' && warningMessage ? warningMessageId : undefined\n  const ariaProps = getAriaProps(state, ariaDescribedBy, required, messageId)\n  const normalizedDefaultValue = typeof defaultValue === 'string' ? defaultValue : defaultValue !== undefined && defaultValue !== null ? String(defaultValue) : ''\n  const [value, setValue] = useUncontrolledState<string>({\n    value: valueProp,\n    defaultValue: normalizedDefaultValue,\n    onChange,\n  })\n\n  const internalRef = useRef<HTMLInputElement>(null)\n  const inputRef = mergeRefs(ref, internalRef)\n\n  const { isVisible, toggleVisibility, inputType } = usePasswordVisibility()\n  const { prefixWidth, prefixRef } = usePrefixWidth(prefix)\n  const { handleFocus: clearOnFocusHandler } = useClearOnFocus(clearOnFocus, (e: ChangeEvent<HTMLInputElement>) => setValue(e.target.value))\n\n  const handleBlur = useCallback(\n    (e: FocusEvent<HTMLInputElement>): void => {\n      onBlur?.(e)\n    },\n    [onBlur],\n  )\n\n  const handleFocus = useCallback(\n    (e: FocusEvent<HTMLInputElement>): void => {\n      clearOnFocusHandler(e, onFocus)\n    },\n    [clearOnFocusHandler, onFocus],\n  )\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>): void => {\n      const newValue = e.target.value\n      setValue(newValue)\n    },\n    [setValue],\n  )\n\n  const handleClear = useCallback((): void => {\n    const element = internalRef.current\n    if (element) {\n      setValue('')\n      element.focus()\n    }\n  }, [setValue])\n\n  const showClearButtonNow = showClearButton && value.length > 0\n\n  const getEndIcon = (): ReactElement | null => {\n    const iconClasses = 'absolute right-4 top-1/2 -translate-y-1/2 text-input-icon hover:text-input-icon--hover focus:outline-none cursor-pointer'\n\n    const iconComponents = {\n      password: () => (\n        <button\n          aria-controls={inputId}\n          aria-label={isVisible ? `Hide ${label ?? 'password'}` : `Show ${label ?? 'password'}`}\n          aria-pressed={isVisible}\n          className={iconClasses}\n          data-testid='spectral-input-password-toggle'\n          onClick={toggleVisibility}\n          type='button'\n        >\n          {isVisible ? <EyeClosedIcon size={22} /> : <EyeOpenIcon size={22} />}\n        </button>\n      ),\n      clear: () => (\n        <button\n          aria-label={String(`Clear ${label ?? 'input'}`)}\n          className={iconClasses}\n          data-testid='spectral-input-clear-button'\n          onClick={handleClear}\n          type='button'\n        >\n          <CloseCircleIcon size={24} />\n        </button>\n      ),\n      loading: () => (\n        <div\n          className='right-4 text-input-icon absolute top-1/2 -translate-y-1/2'\n          data-testid='spectral-input-loading-icon'\n        >\n          <LoaderIcon size={24} />\n        </div>\n      ),\n      error: () => (\n        <div\n          className='right-4 absolute top-1/2 -translate-y-1/2 text-danger-400'\n          data-testid='spectral-input-error-icon'\n        >\n          <ErrorIcon size={24} />\n        </div>\n      ),\n      success: () => (\n        <div\n          className='right-4 absolute top-1/2 -translate-y-1/2 text-success-400'\n          data-testid='spectral-input-success-icon'\n        >\n          <CheckCircleIcon size={24} />\n        </div>\n      ),\n      warning: () => (\n        <div\n          className='right-4 absolute top-1/2 -translate-y-1/2 text-warning-400'\n          data-testid='spectral-input-warning-icon'\n        >\n          <WarningIcon size={24} />\n        </div>\n      ),\n    }\n\n    if (endIcon) return <div className='right-4 text-input-icon absolute top-1/2 -translate-y-1/2'>{endIcon}</div>\n    if (type === 'password') return iconComponents.password()\n    if (showClearButtonNow) return iconComponents.clear()\n    if (isLoading) return iconComponents.loading()\n    if (!showStateIcon && (state === 'success' || state === 'warning' || state === 'error')) return null\n    if (state === 'success') return iconComponents.success()\n    if (state === 'warning') return iconComponents.warning()\n    if (state === 'error') return iconComponents.error()\n\n    return null\n  }\n\n  const getStartIcon = (): ReactElement | null => {\n    if (startIcon) return startIcon\n    return null\n  }\n\n  const usesTabularNumbers = type === 'number' || type === 'date' || type === 'datetime-local'\n  const inputClasses = cn(getInputClasses(state, className), '[text-indent:var(--prefix-width)]', showClearButtonNow && 'pr-10', usesTabularNumbers && 'tabular-nums')\n\n  const prefixClasses = cn('inset-y-0 left-4 text-base pointer-events-none absolute flex items-center text-input-text-prefix opacity-100 peer-disabled:opacity-50')\n\n  return (\n    <div\n      className='gap-1.5 flex w-full flex-col'\n      data-testid='spectral-input-container'\n    >\n      {label && (\n        <Label\n          className={cn('mb-2 block', labelClassName, isDisabled && 'cursor-not-allowed text-input-text--disabled placeholder:text-input-text-placeholder')}\n          data-testid='spectral-input-label'\n          htmlFor={inputId}\n        >\n          {label}\n        </Label>\n      )}\n      <div\n        className='relative'\n        data-testid='spectral-input-wrapper'\n      >\n        <div className='relative'>\n          {getStartIcon()}\n          {prefix && (\n            <span\n              ref={prefixRef}\n              className={prefixClasses}\n            >\n              {prefix}\n            </span>\n          )}\n          <input\n            aria-label={ariaLabel ?? label}\n            autoComplete={getAutoCompleteValue(type)}\n            className={inputClasses}\n            data-state={state}\n            data-testid='spectral-input'\n            disabled={isDisabled}\n            id={inputId}\n            name={name}\n            onBlur={handleBlur}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            placeholder={placeholder ?? label}\n            ref={inputRef}\n            required={required}\n            style={\n              getFormFieldCSSProperties({\n                '--prefix-width': prefix ? `${prefixWidth}px` : '0',\n              }) as CSSProperties\n            }\n            suppressHydrationWarning={suppressHydrationWarning}\n            type={type === 'password' ? inputType : type}\n            value={value}\n            {...ariaProps}\n            {...props}\n          />\n          {getEndIcon()}\n        </div>\n\n        <ErrorMessage\n          dataTestId='spectral-input-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-warning-message'\n          id={warningMessageId}\n          message={state === 'warning' ? (warningMessage ?? null) : null}\n          messageReserveLines={messageReserveLines}\n          messageReserveSpace={messageReserveSpace && state === 'warning'}\n        />\n      </div>\n    </div>\n  )\n}\nInput.displayName = 'Input'\n"],"mappings":"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"}
+{"version":3,"file":"Input.js","names":[],"sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import { CheckCircleIcon, CloseCircleIcon, ErrorIcon, EyeClosedIcon, EyeOpenIcon, LoaderIcon, WarningIcon } from '@components/Icons'\nimport { Label } from '@components/Label/Label'\nimport { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { ErrorMessage, WarningMessage, getAriaProps, getFormFieldCSSProperties, getInputClasses, useFormFieldId, useFormFieldState, type BaseFormFieldProps } from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { useCallback, useRef, type ChangeEvent, type CSSProperties, type FocusEvent, type InputHTMLAttributes, type ReactElement, type Ref } from 'react'\nimport { useClearOnFocus, usePasswordVisibility, usePrefixWidth } from './InputUtils'\n\nexport type InputType = 'text' | 'email' | 'url' | 'tel' | 'password' | 'number' | 'date' | 'datetime-local'\n\nexport type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'onChange'> &\n  BaseFormFieldProps & {\n    className?: string\n    clearOnFocus?: boolean\n    endIcon?: ReactElement\n    labelClassName?: string\n    onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n    onChange?: (value: string) => void\n    onFocus?: (e: FocusEvent<HTMLInputElement>) => void\n    placeholder?: string\n    prefix?: string\n    showClearButton?: boolean\n    showStateIcon?: boolean\n    startIcon?: ReactElement\n    suppressHydrationWarning?: boolean\n    type?: InputType\n    value?: string\n    warningMessage?: BaseFormFieldProps['errorMessage']\n  }\n\nconst mergeRefs = <T,>(...refs: (Ref<T> | undefined)[]): Ref<T> => {\n  return (value: T | null) => {\n    refs.forEach((ref) => {\n      if (!ref) return\n      if (typeof ref === 'function') {\n        ref(value)\n      } else {\n        ;(ref as { current: T | null }).current = value\n      }\n    })\n  }\n}\n\nconst getAutoCompleteValue = (type: InputType): string => {\n  const autoCompleteMap: Record<InputType, string> = {\n    date: 'off',\n    email: 'email',\n    number: 'off',\n    password: 'current-password',\n    tel: 'tel',\n    text: 'off',\n    url: 'url',\n    'datetime-local': 'off',\n  }\n  return autoCompleteMap[type] || 'off'\n}\n\nexport const Input = (\n  allProps: InputProps & {\n    ref?: Ref<HTMLInputElement>\n  },\n): ReactElement => {\n  const {\n    className,\n    clearOnFocus = false,\n    defaultValue,\n    disabled,\n    endIcon,\n    errorMessage,\n    id,\n    label,\n    labelClassName,\n    messageReserveLines = 1,\n    messageReserveSpace = false,\n    name,\n    onBlur,\n    onChange,\n    onFocus,\n    placeholder,\n    prefix,\n    ref,\n    required,\n    showClearButton = false,\n    showStateIcon = true,\n    startIcon,\n    state = 'default',\n    suppressHydrationWarning = true,\n    type = 'text',\n    value: valueProp,\n    warningMessage,\n    'aria-label': ariaLabel,\n    'aria-describedby': ariaDescribedBy,\n    ...props\n  } = allProps\n  const inputId = useFormFieldId(id, name)\n  const errorMessageId = `${inputId}-error`\n  const warningMessageId = `${inputId}-warning`\n  const { isDisabled, isLoading, isInvalid } = useFormFieldState(disabled, state)\n  const messageId = state === 'error' ? errorMessageId : state === 'warning' && warningMessage ? warningMessageId : undefined\n  const ariaProps = getAriaProps(state, ariaDescribedBy, required, messageId)\n  const normalizedDefaultValue = typeof defaultValue === 'string' ? defaultValue : defaultValue !== undefined && defaultValue !== null ? String(defaultValue) : ''\n  const [value, setValue] = useUncontrolledState<string>({\n    value: valueProp,\n    defaultValue: normalizedDefaultValue,\n    onChange,\n  })\n\n  const internalRef = useRef<HTMLInputElement>(null)\n  const inputRef = mergeRefs(ref, internalRef)\n\n  const { isVisible, toggleVisibility, inputType } = usePasswordVisibility()\n  const { prefixWidth, prefixRef } = usePrefixWidth(prefix)\n  const { handleFocus: clearOnFocusHandler } = useClearOnFocus(clearOnFocus, (e: ChangeEvent<HTMLInputElement>) => setValue(e.target.value))\n\n  const handleBlur = useCallback(\n    (e: FocusEvent<HTMLInputElement>): void => {\n      onBlur?.(e)\n    },\n    [onBlur],\n  )\n\n  const handleFocus = useCallback(\n    (e: FocusEvent<HTMLInputElement>): void => {\n      clearOnFocusHandler(e, onFocus)\n    },\n    [clearOnFocusHandler, onFocus],\n  )\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>): void => {\n      const newValue = e.target.value\n      setValue(newValue)\n    },\n    [setValue],\n  )\n\n  const handleClear = useCallback((): void => {\n    const element = internalRef.current\n    if (element) {\n      setValue('')\n      element.focus()\n    }\n  }, [setValue])\n\n  const showClearButtonNow = showClearButton && value.length > 0\n\n  const getEndIcon = (): ReactElement | null => {\n    const iconClasses = 'absolute right-4 top-1/2 -translate-y-1/2 text-input-icon hover:text-input-icon--hover focus:outline-none cursor-pointer'\n\n    const iconComponents = {\n      password: () => (\n        <button aria-controls={inputId} aria-label={isVisible ? `Hide ${label ?? 'password'}` : `Show ${label ?? 'password'}`} aria-pressed={isVisible} className={iconClasses} data-testid='spectral-input-password-toggle' onClick={toggleVisibility} type='button'>\n          {isVisible ? <EyeClosedIcon size={22} /> : <EyeOpenIcon size={22} />}\n        </button>\n      ),\n      clear: () => (\n        <button aria-label={String(`Clear ${label ?? 'input'}`)} className={iconClasses} data-testid='spectral-input-clear-button' onClick={handleClear} type='button'>\n          <CloseCircleIcon size={24} />\n        </button>\n      ),\n      loading: () => (\n        <div className='right-4 text-input-icon absolute top-1/2 -translate-y-1/2' data-testid='spectral-input-loading-icon'>\n          <LoaderIcon size={24} />\n        </div>\n      ),\n      error: () => (\n        <div className='right-4 absolute top-1/2 -translate-y-1/2 text-danger-400' data-testid='spectral-input-error-icon'>\n          <ErrorIcon size={24} />\n        </div>\n      ),\n      success: () => (\n        <div className='right-4 absolute top-1/2 -translate-y-1/2 text-success-400' data-testid='spectral-input-success-icon'>\n          <CheckCircleIcon size={24} />\n        </div>\n      ),\n      warning: () => (\n        <div className='right-4 absolute top-1/2 -translate-y-1/2 text-warning-400' data-testid='spectral-input-warning-icon'>\n          <WarningIcon size={24} />\n        </div>\n      ),\n    }\n\n    if (endIcon) return <div className='right-4 text-input-icon absolute top-1/2 -translate-y-1/2'>{endIcon}</div>\n    if (type === 'password') return iconComponents.password()\n    if (showClearButtonNow) return iconComponents.clear()\n    if (isLoading) return iconComponents.loading()\n    if (!showStateIcon && (state === 'success' || state === 'warning' || state === 'error')) return null\n    if (state === 'success') return iconComponents.success()\n    if (state === 'warning') return iconComponents.warning()\n    if (state === 'error') return iconComponents.error()\n\n    return null\n  }\n\n  const getStartIcon = (): ReactElement | null => {\n    if (startIcon) return startIcon\n    return null\n  }\n\n  const usesTabularNumbers = type === 'number' || type === 'date' || type === 'datetime-local'\n  const inputClasses = cn(getInputClasses(state, className), '[text-indent:var(--prefix-width)]', showClearButtonNow && 'pr-10', usesTabularNumbers && 'tabular-nums')\n\n  const prefixClasses = cn('inset-y-0 left-4 text-base pointer-events-none absolute flex items-center text-input-text-prefix opacity-100 peer-disabled:opacity-50')\n\n  return (\n    <div className='flex w-full flex-col gap-1.5' data-testid='spectral-input-container'>\n      {label && (\n        <Label className={cn('mb-2 block', labelClassName, isDisabled && 'cursor-not-allowed text-input-text--disabled placeholder:text-input-text-placeholder')} data-testid='spectral-input-label' htmlFor={inputId}>\n          {label}\n        </Label>\n      )}\n      <div className='relative' data-testid='spectral-input-wrapper'>\n        <div className='relative'>\n          {getStartIcon()}\n          {prefix && (\n            <span ref={prefixRef} className={prefixClasses}>\n              {prefix}\n            </span>\n          )}\n          <input\n            aria-label={ariaLabel ?? label}\n            autoComplete={getAutoCompleteValue(type)}\n            className={inputClasses}\n            data-state={state}\n            data-testid='spectral-input'\n            disabled={isDisabled}\n            id={inputId}\n            name={name}\n            onBlur={handleBlur}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            placeholder={placeholder ?? label}\n            ref={inputRef}\n            required={required}\n            style={\n              getFormFieldCSSProperties({\n                '--prefix-width': prefix ? `${prefixWidth}px` : '0',\n              }) as CSSProperties\n            }\n            suppressHydrationWarning={suppressHydrationWarning}\n            type={type === 'password' ? inputType : type}\n            value={value}\n            {...ariaProps}\n            {...props}\n          />\n          {getEndIcon()}\n        </div>\n\n        <ErrorMessage\n          dataTestId='spectral-input-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-warning-message'\n          id={warningMessageId}\n          message={state === 'warning' ? (warningMessage ?? null) : null}\n          messageReserveLines={messageReserveLines}\n          messageReserveSpace={messageReserveSpace && state === 'warning'}\n        />\n      </div>\n    </div>\n  )\n}\nInput.displayName = 'Input'\n"],"mappings":"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"}

package/dist/InputNumeric.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputNumeric.d.ts","names":[],"sources":["../src/components/InputNumeric/InputNumeric.tsx"],"mappings":";;;;;KA2FY,iBAAA,GAAoB,IAAA,CAAK,UAAA;EACnC,YAAA;EACA,aAAA;EACA,MAAA;EAEA,mBAAA,WAL8B;EAO9B,mBAAA;EACA,QAAA,IAAY,KAAA;EACZ,KAAA;AAAA;AAAA;EAG6B,YAAA;EAAqB,aAAA;EAAuB,SAAA;EAAW,YAAA;EAAmB,MAAA;EAAQ,GAAA;EAAK,mBAAA;EAAyB,mBAAA;EAA6B,GAAA;EAAK,QAAA;EAAU,SAAA;EAAW,OAAA;EAAS,IAAA;EAAM,KAAA,EAAO,SAAA;EAAA,GAAc;AAAA,GAAS,iBAAA,GAAoB,YAAA;AAAA"}
+{"version":3,"file":"InputNumeric.d.ts","names":[],"sources":["../src/components/InputNumeric/InputNumeric.tsx"],"mappings":";;;;;KA2FY,iBAAA,GAAoB,IAAA,CAAK,UAAA;EACnC,YAAA;EACA,aAAA;EACA,MAAA;EAEA,mBAAA,WAL8B;EAO9B,mBAAA;EACA,QAAA,IAAY,KAAA;EACZ,KAAA;AAAA;AAAA;EAIA,YAAA;EACA,aAAA;EACA,SAAA;EACA,YAAA;EACA,MAAA;EACA,GAAA;EACA,mBAAA;EACA,mBAAA;EACA,GAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,IAAA;EACA,KAAA,EAAO,SAAA;EAAA,GACJ;AAAA,GACF,iBAAA,GAAoB,YAAA;AAAA"}

package/dist/InputNumeric.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputNumeric.js","names":[],"sources":["../src/components/InputNumeric/InputNumeric.tsx"],"sourcesContent":["import { Input, type InputProps } from '@components/Input/Input'\nimport { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { cn } from '@utils/twUtils'\nimport { useCallback, type ClipboardEvent, type KeyboardEvent, type ReactElement } from 'react'\n\ntype NumericKeyDownEvent = KeyboardEvent<HTMLInputElement>\ntype NumericPasteEvent = ClipboardEvent<HTMLInputElement>\n\nconst DIGIT_REGEX = /^\\d$/\nconst DISALLOWED_SPECIAL_KEYS = new Set(['e', 'E', '+'])\nconst ALLOWED_CONTROL_KEYS = new Set(['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'Tab', 'Enter', 'Escape'])\n\nconst getDecimalSeparator = (locale?: string): string => {\n  try {\n    const formattedNumber = new Intl.NumberFormat(locale).formatToParts(1.1)\n    return formattedNumber.find((part) => part.type === 'decimal')?.value ?? '.'\n  } catch {\n    return '.'\n  }\n}\n\nconst normalizeDecimalSeparator = (value: string, decimalSeparator: string): string => {\n  if (decimalSeparator === '.') return value\n  return value.replaceAll(decimalSeparator, '.')\n}\n\nconst sanitizeNumericValue = (value: string, allowDecimal: boolean, allowNegative: boolean, decimalSeparator: string): string => {\n  if (!value) return ''\n\n  let sanitized = normalizeDecimalSeparator(value, decimalSeparator).replace(/[^\\d.-]/g, '')\n\n  if (!allowNegative) {\n    sanitized = sanitized.replace(/-/g, '')\n  } else {\n    sanitized = sanitized.replace(/(?!^)-/g, '')\n    if (sanitized.startsWith('--')) {\n      sanitized = `-${sanitized.replace(/-/g, '')}`\n    }\n  }\n\n  if (!allowDecimal) {\n    sanitized = sanitized.replace(/\\./g, '')\n  } else {\n    const firstDecimalIndex = sanitized.indexOf('.')\n    if (firstDecimalIndex >= 0) {\n      const integerPart = sanitized.slice(0, firstDecimalIndex + 1)\n      const fractionalPart = sanitized.slice(firstDecimalIndex + 1).replace(/\\./g, '')\n      sanitized = `${integerPart}${fractionalPart}`\n    }\n  }\n\n  return sanitized\n}\n\nconst shouldAllowDecimalInput = (target: HTMLInputElement): boolean => {\n  if (target.selectionStart === null || target.selectionEnd === null) {\n    return !target.value.includes('.')\n  }\n\n  const selectedText = target.value.slice(target.selectionStart, target.selectionEnd)\n  return !target.value.includes('.') || selectedText.includes('.')\n}\n\nconst shouldAllowNegativeInput = (target: HTMLInputElement): boolean => {\n  if (target.selectionStart === null || target.selectionEnd === null) {\n    return target.value.length === 0\n  }\n\n  const isAtStart = target.selectionStart === 0\n  const selectedText = target.value.slice(target.selectionStart, target.selectionEnd)\n  return isAtStart && (!target.value.includes('-') || selectedText.includes('-'))\n}\n\nconst parseNumericProp = (value: number | string | undefined): number | undefined => {\n  if (value === undefined || value === null || value === '') return undefined\n  const parsed = typeof value === 'number' ? value : Number.parseFloat(value)\n  return Number.isFinite(parsed) ? parsed : undefined\n}\n\nconst getDecimalPlaces = (value: number): number => {\n  const valueString = value.toString()\n  if (!valueString.includes('.')) return 0\n  return valueString.split('.')[1]?.length ?? 0\n}\n\nconst roundToPrecision = (value: number, precision: number): number => {\n  if (precision <= 0) return value\n  const factor = 10 ** precision\n  return Math.round(value * factor) / factor\n}\n\nexport type InputNumericProps = Omit<InputProps, 'inputMode' | 'onChange' | 'pattern' | 'type'> & {\n  allowDecimal?: boolean\n  allowNegative?: boolean\n  locale?: string\n  /** Number of message lines to reserve (default: 1). */\n  messageReserveLines?: number\n  /** Whether to keep message space reserved when hidden (default: false). */\n  messageReserveSpace?: boolean\n  onChange?: (value: string) => void\n  value?: string\n}\n\nexport const InputNumeric = ({ allowDecimal = true, allowNegative = false, className, defaultValue = '', locale, max, messageReserveLines = 1, messageReserveSpace = false, min, onChange, onKeyDown, onPaste, step, value: valueProp, ...props }: InputNumericProps): ReactElement => {\n  const normalizedDefaultValue = typeof defaultValue === 'string' ? defaultValue : defaultValue !== undefined && defaultValue !== null ? String(defaultValue) : ''\n  const [value, setValue] = useUncontrolledState<string>({\n    value: valueProp,\n    defaultValue: normalizedDefaultValue,\n    onChange,\n  })\n  const decimalSeparator = getDecimalSeparator(locale)\n  const parsedMin = parseNumericProp(min)\n  const parsedMax = parseNumericProp(max)\n  const parsedStep = parseNumericProp(step)\n  const stepValue = parsedStep && parsedStep > 0 ? parsedStep : 1\n  const effectiveMin = parsedMin ?? (!allowNegative ? 0 : undefined)\n\n  const handleKeyDown = useCallback(\n    (event: NumericKeyDownEvent): void => {\n      onKeyDown?.(event)\n      if (event.defaultPrevented || event.nativeEvent.isComposing) return\n\n      if (event.metaKey || event.ctrlKey || event.altKey) return\n      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n        event.preventDefault()\n\n        const direction = event.key === 'ArrowUp' ? 1 : -1\n        const normalizedValue = normalizeDecimalSeparator(value, decimalSeparator)\n        const currentValue = Number.parseFloat(normalizedValue)\n        const hasCurrentValue = Number.isFinite(currentValue)\n        const baseValue = hasCurrentValue ? currentValue : (effectiveMin ?? 0)\n\n        let nextValue = baseValue + direction * stepValue\n        if (effectiveMin !== undefined) {\n          nextValue = Math.max(effectiveMin, nextValue)\n        }\n        if (parsedMax !== undefined) {\n          nextValue = Math.min(parsedMax, nextValue)\n        }\n\n        if (!allowDecimal) {\n          nextValue = Math.trunc(nextValue)\n        }\n\n        const precision = allowDecimal ? getDecimalPlaces(stepValue) : 0\n        const roundedValue = roundToPrecision(nextValue, precision)\n        const safeValue = Object.is(roundedValue, -0) ? 0 : roundedValue\n        const nextString = precision > 0 ? safeValue.toFixed(precision).replace(/\\.?0+$/, '') : safeValue.toString()\n        setValue(sanitizeNumericValue(nextString, allowDecimal, allowNegative, decimalSeparator))\n        return\n      }\n\n      if (ALLOWED_CONTROL_KEYS.has(event.key)) return\n      if (DIGIT_REGEX.test(event.key)) return\n\n      if (DISALLOWED_SPECIAL_KEYS.has(event.key)) {\n        event.preventDefault()\n        return\n      }\n\n      const isDecimalKey = event.key === '.' || event.key === decimalSeparator\n\n      if (isDecimalKey) {\n        if (!allowDecimal || !shouldAllowDecimalInput(event.currentTarget)) {\n          event.preventDefault()\n        }\n        return\n      }\n\n      if (event.key === '-') {\n        if (!allowNegative || !shouldAllowNegativeInput(event.currentTarget)) {\n          event.preventDefault()\n        }\n        return\n      }\n\n      event.preventDefault()\n    },\n    [allowDecimal, allowNegative, decimalSeparator, effectiveMin, onKeyDown, parsedMax, setValue, stepValue, value],\n  )\n\n  const handlePaste = useCallback(\n    (event: NumericPasteEvent): void => {\n      onPaste?.(event)\n    },\n    [onPaste],\n  )\n\n  const handleChange = useCallback(\n    (newValue: string): void => {\n      setValue(sanitizeNumericValue(newValue, allowDecimal, allowNegative, decimalSeparator))\n    },\n    [allowDecimal, allowNegative, decimalSeparator, setValue],\n  )\n\n  const inputMode = allowDecimal ? 'decimal' : 'numeric'\n  const pattern = allowDecimal ? '[0-9]*[.]?[0-9]*' : '[0-9]*'\n\n  return (\n    <Input\n      {...props}\n      className={cn('tabular-nums', className)}\n      inputMode={inputMode}\n      max={max}\n      messageReserveLines={messageReserveLines}\n      messageReserveSpace={messageReserveSpace}\n      min={min}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      onPaste={handlePaste}\n      pattern={pattern}\n      step={step}\n      type='text'\n      value={value}\n    />\n  )\n}\n\nInputNumeric.displayName = 'InputNumeric'\n"],"mappings":"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"}
+{"version":3,"file":"InputNumeric.js","names":[],"sources":["../src/components/InputNumeric/InputNumeric.tsx"],"sourcesContent":["import { Input, type InputProps } from '@components/Input/Input'\nimport { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { cn } from '@utils/twUtils'\nimport { useCallback, type ClipboardEvent, type KeyboardEvent, type ReactElement } from 'react'\n\ntype NumericKeyDownEvent = KeyboardEvent<HTMLInputElement>\ntype NumericPasteEvent = ClipboardEvent<HTMLInputElement>\n\nconst DIGIT_REGEX = /^\\d$/\nconst DISALLOWED_SPECIAL_KEYS = new Set(['e', 'E', '+'])\nconst ALLOWED_CONTROL_KEYS = new Set(['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'Tab', 'Enter', 'Escape'])\n\nconst getDecimalSeparator = (locale?: string): string => {\n  try {\n    const formattedNumber = new Intl.NumberFormat(locale).formatToParts(1.1)\n    return formattedNumber.find((part) => part.type === 'decimal')?.value ?? '.'\n  } catch {\n    return '.'\n  }\n}\n\nconst normalizeDecimalSeparator = (value: string, decimalSeparator: string): string => {\n  if (decimalSeparator === '.') return value\n  return value.replaceAll(decimalSeparator, '.')\n}\n\nconst sanitizeNumericValue = (value: string, allowDecimal: boolean, allowNegative: boolean, decimalSeparator: string): string => {\n  if (!value) return ''\n\n  let sanitized = normalizeDecimalSeparator(value, decimalSeparator).replace(/[^\\d.-]/g, '')\n\n  if (!allowNegative) {\n    sanitized = sanitized.replace(/-/g, '')\n  } else {\n    sanitized = sanitized.replace(/(?!^)-/g, '')\n    if (sanitized.startsWith('--')) {\n      sanitized = `-${sanitized.replace(/-/g, '')}`\n    }\n  }\n\n  if (!allowDecimal) {\n    sanitized = sanitized.replace(/\\./g, '')\n  } else {\n    const firstDecimalIndex = sanitized.indexOf('.')\n    if (firstDecimalIndex >= 0) {\n      const integerPart = sanitized.slice(0, firstDecimalIndex + 1)\n      const fractionalPart = sanitized.slice(firstDecimalIndex + 1).replace(/\\./g, '')\n      sanitized = `${integerPart}${fractionalPart}`\n    }\n  }\n\n  return sanitized\n}\n\nconst shouldAllowDecimalInput = (target: HTMLInputElement): boolean => {\n  if (target.selectionStart === null || target.selectionEnd === null) {\n    return !target.value.includes('.')\n  }\n\n  const selectedText = target.value.slice(target.selectionStart, target.selectionEnd)\n  return !target.value.includes('.') || selectedText.includes('.')\n}\n\nconst shouldAllowNegativeInput = (target: HTMLInputElement): boolean => {\n  if (target.selectionStart === null || target.selectionEnd === null) {\n    return target.value.length === 0\n  }\n\n  const isAtStart = target.selectionStart === 0\n  const selectedText = target.value.slice(target.selectionStart, target.selectionEnd)\n  return isAtStart && (!target.value.includes('-') || selectedText.includes('-'))\n}\n\nconst parseNumericProp = (value: number | string | undefined): number | undefined => {\n  if (value === undefined || value === null || value === '') return undefined\n  const parsed = typeof value === 'number' ? value : Number.parseFloat(value)\n  return Number.isFinite(parsed) ? parsed : undefined\n}\n\nconst getDecimalPlaces = (value: number): number => {\n  const valueString = value.toString()\n  if (!valueString.includes('.')) return 0\n  return valueString.split('.')[1]?.length ?? 0\n}\n\nconst roundToPrecision = (value: number, precision: number): number => {\n  if (precision <= 0) return value\n  const factor = 10 ** precision\n  return Math.round(value * factor) / factor\n}\n\nexport type InputNumericProps = Omit<InputProps, 'inputMode' | 'onChange' | 'pattern' | 'type'> & {\n  allowDecimal?: boolean\n  allowNegative?: boolean\n  locale?: string\n  /** Number of message lines to reserve (default: 1). */\n  messageReserveLines?: number\n  /** Whether to keep message space reserved when hidden (default: false). */\n  messageReserveSpace?: boolean\n  onChange?: (value: string) => void\n  value?: string\n}\n\nexport const InputNumeric = ({\n  allowDecimal = true,\n  allowNegative = false,\n  className,\n  defaultValue = '',\n  locale,\n  max,\n  messageReserveLines = 1,\n  messageReserveSpace = false,\n  min,\n  onChange,\n  onKeyDown,\n  onPaste,\n  step,\n  value: valueProp,\n  ...props\n}: InputNumericProps): ReactElement => {\n  const normalizedDefaultValue = typeof defaultValue === 'string' ? defaultValue : defaultValue !== undefined && defaultValue !== null ? String(defaultValue) : ''\n  const [value, setValue] = useUncontrolledState<string>({\n    value: valueProp,\n    defaultValue: normalizedDefaultValue,\n    onChange,\n  })\n  const decimalSeparator = getDecimalSeparator(locale)\n  const parsedMin = parseNumericProp(min)\n  const parsedMax = parseNumericProp(max)\n  const parsedStep = parseNumericProp(step)\n  const stepValue = parsedStep && parsedStep > 0 ? parsedStep : 1\n  const effectiveMin = parsedMin ?? (!allowNegative ? 0 : undefined)\n\n  const handleKeyDown = useCallback(\n    (event: NumericKeyDownEvent): void => {\n      onKeyDown?.(event)\n      if (event.defaultPrevented || event.nativeEvent.isComposing) return\n\n      if (event.metaKey || event.ctrlKey || event.altKey) return\n      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n        event.preventDefault()\n\n        const direction = event.key === 'ArrowUp' ? 1 : -1\n        const normalizedValue = normalizeDecimalSeparator(value, decimalSeparator)\n        const currentValue = Number.parseFloat(normalizedValue)\n        const hasCurrentValue = Number.isFinite(currentValue)\n        const baseValue = hasCurrentValue ? currentValue : (effectiveMin ?? 0)\n\n        let nextValue = baseValue + direction * stepValue\n        if (effectiveMin !== undefined) {\n          nextValue = Math.max(effectiveMin, nextValue)\n        }\n        if (parsedMax !== undefined) {\n          nextValue = Math.min(parsedMax, nextValue)\n        }\n\n        if (!allowDecimal) {\n          nextValue = Math.trunc(nextValue)\n        }\n\n        const precision = allowDecimal ? getDecimalPlaces(stepValue) : 0\n        const roundedValue = roundToPrecision(nextValue, precision)\n        const safeValue = Object.is(roundedValue, -0) ? 0 : roundedValue\n        const nextString = precision > 0 ? safeValue.toFixed(precision).replace(/\\.?0+$/, '') : safeValue.toString()\n        setValue(sanitizeNumericValue(nextString, allowDecimal, allowNegative, decimalSeparator))\n        return\n      }\n\n      if (ALLOWED_CONTROL_KEYS.has(event.key)) return\n      if (DIGIT_REGEX.test(event.key)) return\n\n      if (DISALLOWED_SPECIAL_KEYS.has(event.key)) {\n        event.preventDefault()\n        return\n      }\n\n      const isDecimalKey = event.key === '.' || event.key === decimalSeparator\n\n      if (isDecimalKey) {\n        if (!allowDecimal || !shouldAllowDecimalInput(event.currentTarget)) {\n          event.preventDefault()\n        }\n        return\n      }\n\n      if (event.key === '-') {\n        if (!allowNegative || !shouldAllowNegativeInput(event.currentTarget)) {\n          event.preventDefault()\n        }\n        return\n      }\n\n      event.preventDefault()\n    },\n    [allowDecimal, allowNegative, decimalSeparator, effectiveMin, onKeyDown, parsedMax, setValue, stepValue, value],\n  )\n\n  const handlePaste = useCallback(\n    (event: NumericPasteEvent): void => {\n      onPaste?.(event)\n    },\n    [onPaste],\n  )\n\n  const handleChange = useCallback(\n    (newValue: string): void => {\n      setValue(sanitizeNumericValue(newValue, allowDecimal, allowNegative, decimalSeparator))\n    },\n    [allowDecimal, allowNegative, decimalSeparator, setValue],\n  )\n\n  const inputMode = allowDecimal ? 'decimal' : 'numeric'\n  const pattern = allowDecimal ? '[0-9]*[.]?[0-9]*' : '[0-9]*'\n\n  return (\n    <Input\n      {...props}\n      className={cn('tabular-nums', className)}\n      inputMode={inputMode}\n      max={max}\n      messageReserveLines={messageReserveLines}\n      messageReserveSpace={messageReserveSpace}\n      min={min}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      onPaste={handlePaste}\n      pattern={pattern}\n      step={step}\n      type='text'\n      value={value}\n    />\n  )\n}\n\nInputNumeric.displayName = 'InputNumeric'\n"],"mappings":"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"}

package/dist/InputOTP.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputOTP.d.ts","names":[],"sources":["../src/components/InputOTP/InputOTP.tsx"],"mappings":";;;;;;;UAMiB,iBAAA,SAA0B,IAAA,CAAK,aAAA;EAC9C,UAAA,OAAiB,IAAA;EACjB,SAAA;EACA,YAAA;EACA,SAAA;EACA,mBAAA;EACA,mBAAA;EAQQ;;;;;EAFR,OAAA;EACA,SAAA;EACA,KAAA,GAAQ,cAAA;EACR,OAAA;AAAA;AAAA,KAGU,aAAA,GAAgB,iBAAA;EAAuB,KAAA;EAAwB,QAAA,GAAW,QAAA;AAAA;EAAyC,KAAA;EAAe,QAAA;AAAA;AAAA,UAsKpI,UAAA;EACR,SAAA;EACA,KAAA;EACA,KAAA;AAAA;AAAA,cAuEW,QAAA;EAAA;;;;;;;;;;;;;;;;;;;KA3MV,aAAA;IACD,GAAA,GAAM,GAAA,CAAI,YAAA,QAAoB,QAAA;EAAA,IAC/B,oBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;OA0EE,wBAAA;MACD,GAAA,GAAM,GAAA,CAAI,YAAA;IAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;;;OAeE,wBAAA;MACD,KAAA;MACA,GAAA,GAAM,GAAA,CAAI,YAAA;IAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;;OA+D+C,UAAA,GAAU,oBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;OAsBvD,wBAAA;MACD,GAAA,GAAM,GAAA,CAAI,YAAA;IAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"InputOTP.d.ts","names":[],"sources":["../src/components/InputOTP/InputOTP.tsx"],"mappings":";;;;;;;UAMiB,iBAAA,SAA0B,IAAA,CAAK,aAAA;EAC9C,UAAA,OAAiB,IAAA;EACjB,SAAA;EACA,YAAA;EACA,SAAA;EACA,mBAAA;EACA,mBAAA;EAQQ;;;;;EAFR,OAAA;EACA,SAAA;EACA,KAAA,GAAQ,cAAA;EACR,OAAA;AAAA;AAAA,KAGU,aAAA,GAAgB,iBAAA;EAAuB,KAAA;EAAwB,QAAA,GAAW,QAAA;AAAA;EAAyC,KAAA;EAAe,QAAA;AAAA;AAAA,UA+JpI,UAAA;EACR,SAAA;EACA,KAAA;EACA,KAAA;AAAA;AAAA,cA0DW,QAAA;EAAA;;;;;;;;;;;;;;;;;;;KAvLV,aAAA;IACD,GAAA,GAAM,GAAA,CAAI,YAAA,QAAoB,QAAA;EAAA,IAC/B,oBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;OA0EE,wBAAA;MACD,GAAA,GAAM,GAAA,CAAI,YAAA;IAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;;;OAQE,wBAAA;MACD,KAAA;MACA,GAAA,GAAM,GAAA,CAAI,YAAA;IAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;;OA+D+C,UAAA,GAAU,oBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;OAkBvD,wBAAA;MACD,GAAA,GAAM,GAAA,CAAI,YAAA;IAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/InputOTP.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputOTP.js","names":[],"sources":["../src/components/InputOTP/InputOTP.tsx"],"sourcesContent":["import { MinusIcon } from '@components/Icons'\nimport { ErrorMessage, getErrorMessageId, useFormFieldId, useFormFieldState, type FormFieldState } from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { OTPInput, REGEXP_ONLY_DIGITS, type OTPInputProps } from 'input-otp'\nimport { createContext, useContext, type ClipboardEvent, type ComponentPropsWithoutRef, type ComponentRef, type Ref } from 'react'\n\nexport interface InputOTPBaseProps extends Omit<OTPInputProps, 'textAlign' | 'pushPasswordManagerStrategy' | 'pasteTransformer' | 'noScriptCSSFallback' | 'placeholder' | 'containerClassName' | 'render' | 'pattern'> {\n  onComplete?: (...args: unknown[]) => void\n  className?: string\n  errorMessage?: string | undefined\n  inputMode?: 'numeric' | 'text' | 'decimal' | 'tel' | 'search' | 'email' | 'url'\n  messageReserveLines?: number\n  messageReserveSpace?: boolean\n  /**\n   * Regex pattern string to restrict allowed characters.\n   * When `inputMode=\"numeric\"`, defaults to digits-only pattern.\n   * Set to `undefined` to allow any characters.\n   */\n  pattern?: string | undefined\n  separator?: boolean\n  state?: FormFieldState\n  variant?: 'outlined' | 'filled'\n}\n\nexport type InputOTPProps = InputOTPBaseProps & ({ value: number | string; onChange: (newValue: number | string) => void } | { value?: never; onChange?: never })\n\nconst InputOTPStateContext = createContext<{ isInvalid?: boolean }>({})\n\nconst OTPInputContext = createContext<{\n  maxLength?: number\n  slots?: { char: string | null; hasFakeCaret: boolean; isActive: boolean }[]\n  variant?: 'outlined' | 'filled'\n} | null>(null)\n\nconst useRoot = () => {\n  const context = useContext(OTPInputContext)\n  if (!context) {\n    throw new Error('useRoot must be used within an InputOTP')\n  }\n  return context\n}\n\nconst Root = ({\n  autoFocus = false,\n  children,\n  className,\n  errorMessage,\n  id,\n  inputMode = 'numeric',\n  messageReserveLines = 1,\n  messageReserveSpace = false,\n  maxLength,\n  name,\n  onChange,\n  onComplete,\n  pattern,\n  ref,\n  state = 'default',\n  value,\n  variant = 'outlined',\n  ...props\n}: InputOTPProps & {\n  ref?: Ref<ComponentRef<typeof OTPInput>>\n}) => {\n  const inputId = useFormFieldId(id, name)\n  const errorMessageId = getErrorMessageId(inputId)\n  const { isInvalid } = useFormFieldState(false, state)\n\n  // Apply digits-only pattern when inputMode is numeric (unless explicitly overridden)\n  const effectivePattern = pattern ?? (inputMode === 'numeric' ? REGEXP_ONLY_DIGITS : undefined)\n\n  const handlePaste = (e: ClipboardEvent<HTMLDivElement>): void => {\n    let pasteData = e.clipboardData.getData('text/plain').trim().replaceAll('-', '')\n\n    // Filter to digits only when in numeric mode\n    if (inputMode === 'numeric') {\n      pasteData = pasteData.replace(/\\D/g, '')\n    }\n\n    if (pasteData.length === maxLength && typeof onChange === 'function') {\n      onChange(pasteData)\n    }\n  }\n\n  return (\n    <InputOTPStateContext.Provider value={{ isInvalid }}>\n      <div className='gap-y-1 flex w-max flex-col'>\n        <OTPInput\n          /* eslint-disable-next-line jsx-a11y/no-autofocus -- intentional: consumers can opt in for OTP-first flows; defaults to false */\n          autoFocus={autoFocus}\n          containerClassName={cn('gap-2 flex items-center disabled:cursor-not-allowed has-[disabled]:opacity-50', className)}\n          data-1p-ignore='true'\n          data-dashlane-disabled-on-field='true'\n          data-lpignore='true'\n          data-protonpass-ignore='true'\n          data-testid='spectral-input-otp'\n          id={inputId}\n          inputMode={inputMode}\n          maxLength={maxLength}\n          onChange={onChange}\n          onComplete={onComplete}\n          onPaste={handlePaste}\n          pasteTransformer={(pasted) => pasted.replaceAll('-', '')}\n          pattern={effectivePattern}\n          pushPasswordManagerStrategy='none'\n          ref={ref}\n          aria-describedby={isInvalid && errorMessage ? errorMessageId : undefined}\n          aria-invalid={isInvalid}\n          textAlign='center'\n          value={value}\n          {...props}\n          render={({ slots }) => (\n            <OTPInputContext.Provider value={{ slots, variant, maxLength }}>\n              {children ?? (\n                <Group>\n                  <Slots />\n                </Group>\n              )}\n            </OTPInputContext.Provider>\n          )}\n        />\n        <ErrorMessage\n          dataTestId='spectral-input-otp-error-message'\n          id={errorMessageId}\n          message={isInvalid ? errorMessage : null}\n          messageReserveLines={messageReserveLines}\n          messageReserveSpace={messageReserveSpace}\n        />\n      </div>\n    </InputOTPStateContext.Provider>\n  )\n}\nRoot.displayName = 'InputOTP'\n\nconst Group = ({\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<'div'> & {\n  ref?: Ref<ComponentRef<'div'>>\n}) => (\n  <div\n    className='gap-x-2 flex items-center justify-center'\n    data-testid='spectral-input-otp-group'\n    ref={ref}\n    {...props}\n  />\n)\nGroup.displayName = 'InputOTP.Group'\n\nconst Slot = ({\n  className,\n  index,\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<'div'> & {\n  index: number\n  ref?: Ref<ComponentRef<'div'>>\n}) => {\n  const { variant = 'outlined', slots = [] } = useRoot()\n  const { isInvalid } = useContext(InputOTPStateContext)\n  const slot = slots[index] || { char: '', hasFakeCaret: true, isActive: false }\n\n  return (\n    <div\n      className={cn(\n        'h-12 w-10 relative z-10 flex items-center justify-center rounded-[8px] border tabular-nums transition duration-200 focus:outline-none',\n        variant === 'filled' ? 'border-level-one bg-level-one' : 'border-input-otp-border bg-transparent',\n        !isInvalid && 'border',\n        isInvalid && 'border-2 border-danger-400',\n        slot.isActive && !isInvalid && 'z-10 border-input-otp-border--focus',\n        slot.isActive && isInvalid && 'z-10 border-danger-400 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-danger-400',\n        className,\n      )}\n      data-index={index}\n      data-testid='spectral-input-otp-slot'\n      data-variant={variant}\n      ref={ref}\n      {...props}\n    >\n      {slot.char}\n      {slot.hasFakeCaret && (\n        <div className='inset-0 pointer-events-none absolute flex items-center justify-center motion-safe:animate-caret-blink'>\n          <div className='h-8 w-px bg-input-otp-caret' />\n        </div>\n      )}\n    </div>\n  )\n}\nSlot.displayName = 'InputOTP.Slot'\n\ninterface SlotsProps {\n  className?: string\n  count?: number\n  start?: number\n}\n\n/**\n * Helper component that automatically renders multiple InputOTP.Slot components.\n * Uses the maxLength from the parent InputOTP to determine how many slots to render.\n *\n * @example\n * // Render all 6 slots\n * <InputOTP maxLength={6}>\n *   <InputOTP.Group>\n *     <InputOTP.Slots />\n *   </InputOTP.Group>\n * </InputOTP>\n *\n * @example\n * // Render slots in groups with a separator (3-3 split)\n * <InputOTP maxLength={6}>\n *   <InputOTP.Group>\n *     <InputOTP.Slots count={3} />\n *   </InputOTP.Group>\n *   <InputOTP.Separator />\n *   <InputOTP.Group>\n *     <InputOTP.Slots start={3} />\n *   </InputOTP.Group>\n * </InputOTP>\n */\nconst Slots = ({ start = 0, count, className }: SlotsProps) => {\n  const { maxLength = 0 } = useRoot()\n  const end = count !== undefined ? start + count : maxLength\n  const indices = Array.from({ length: end - start }, (_, i) => start + i)\n\n  return (\n    <>\n      {indices.map((index) => (\n        <Slot\n          key={index}\n          index={index}\n          className={className}\n        />\n      ))}\n    </>\n  )\n}\nSlots.displayName = 'InputOTP.Slots'\n\nconst Separator = ({\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<'div'> & {\n  ref?: Ref<ComponentRef<'div'>>\n}) => {\n  const { variant = 'outlined' } = useRoot()\n\n  return (\n    <div\n      ref={ref}\n      role='separator'\n      {...props}\n      data-testid='spectral-input-otp-separator'\n      data-variant={variant}\n    >\n      <MinusIcon\n        size={24}\n        color={variant === 'filled' ? 'var(--color-input-otp-filled-separator)' : 'var(--color-input-otp-border)'}\n      />\n    </div>\n  )\n}\nSeparator.displayName = 'InputOTP.Separator'\n\nexport const InputOTP = Object.assign(Root, {\n  Group,\n  Slot,\n  Slots,\n  Separator,\n})\n"],"mappings":"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"}
+{"version":3,"file":"InputOTP.js","names":[],"sources":["../src/components/InputOTP/InputOTP.tsx"],"sourcesContent":["import { MinusIcon } from '@components/Icons'\nimport { ErrorMessage, getErrorMessageId, useFormFieldId, useFormFieldState, type FormFieldState } from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { OTPInput, REGEXP_ONLY_DIGITS, type OTPInputProps } from 'input-otp'\nimport { createContext, useContext, type ClipboardEvent, type ComponentPropsWithoutRef, type ComponentRef, type Ref } from 'react'\n\nexport interface InputOTPBaseProps extends Omit<OTPInputProps, 'textAlign' | 'pushPasswordManagerStrategy' | 'pasteTransformer' | 'noScriptCSSFallback' | 'placeholder' | 'containerClassName' | 'render' | 'pattern'> {\n  onComplete?: (...args: unknown[]) => void\n  className?: string\n  errorMessage?: string | undefined\n  inputMode?: 'numeric' | 'text' | 'decimal' | 'tel' | 'search' | 'email' | 'url'\n  messageReserveLines?: number\n  messageReserveSpace?: boolean\n  /**\n   * Regex pattern string to restrict allowed characters.\n   * When `inputMode=\"numeric\"`, defaults to digits-only pattern.\n   * Set to `undefined` to allow any characters.\n   */\n  pattern?: string | undefined\n  separator?: boolean\n  state?: FormFieldState\n  variant?: 'outlined' | 'filled'\n}\n\nexport type InputOTPProps = InputOTPBaseProps & ({ value: number | string; onChange: (newValue: number | string) => void } | { value?: never; onChange?: never })\n\nconst InputOTPStateContext = createContext<{ isInvalid?: boolean }>({})\n\nconst OTPInputContext = createContext<{\n  maxLength?: number\n  slots?: { char: string | null; hasFakeCaret: boolean; isActive: boolean }[]\n  variant?: 'outlined' | 'filled'\n} | null>(null)\n\nconst useRoot = () => {\n  const context = useContext(OTPInputContext)\n  if (!context) {\n    throw new Error('useRoot must be used within an InputOTP')\n  }\n  return context\n}\n\nconst Root = ({\n  autoFocus = false,\n  children,\n  className,\n  errorMessage,\n  id,\n  inputMode = 'numeric',\n  messageReserveLines = 1,\n  messageReserveSpace = false,\n  maxLength,\n  name,\n  onChange,\n  onComplete,\n  pattern,\n  ref,\n  state = 'default',\n  value,\n  variant = 'outlined',\n  ...props\n}: InputOTPProps & {\n  ref?: Ref<ComponentRef<typeof OTPInput>>\n}) => {\n  const inputId = useFormFieldId(id, name)\n  const errorMessageId = getErrorMessageId(inputId)\n  const { isInvalid } = useFormFieldState(false, state)\n\n  // Apply digits-only pattern when inputMode is numeric (unless explicitly overridden)\n  const effectivePattern = pattern ?? (inputMode === 'numeric' ? REGEXP_ONLY_DIGITS : undefined)\n\n  const handlePaste = (e: ClipboardEvent<HTMLDivElement>): void => {\n    let pasteData = e.clipboardData.getData('text/plain').trim().replaceAll('-', '')\n\n    // Filter to digits only when in numeric mode\n    if (inputMode === 'numeric') {\n      pasteData = pasteData.replace(/\\D/g, '')\n    }\n\n    if (pasteData.length === maxLength && typeof onChange === 'function') {\n      onChange(pasteData)\n    }\n  }\n\n  return (\n    <InputOTPStateContext.Provider value={{ isInvalid }}>\n      <div className='gap-y-1 flex w-max flex-col'>\n        <OTPInput\n          /* eslint-disable-next-line jsx-a11y/no-autofocus -- intentional: consumers can opt in for OTP-first flows; defaults to false */\n          autoFocus={autoFocus}\n          containerClassName={cn('gap-2 flex items-center disabled:cursor-not-allowed has-[disabled]:opacity-50', className)}\n          data-1p-ignore='true'\n          data-dashlane-disabled-on-field='true'\n          data-lpignore='true'\n          data-protonpass-ignore='true'\n          data-testid='spectral-input-otp'\n          id={inputId}\n          inputMode={inputMode}\n          maxLength={maxLength}\n          onChange={onChange}\n          onComplete={onComplete}\n          onPaste={handlePaste}\n          pasteTransformer={(pasted) => pasted.replaceAll('-', '')}\n          pattern={effectivePattern}\n          pushPasswordManagerStrategy='none'\n          ref={ref}\n          aria-describedby={isInvalid && errorMessage ? errorMessageId : undefined}\n          aria-invalid={isInvalid}\n          textAlign='center'\n          value={value}\n          {...props}\n          render={({ slots }) => (\n            <OTPInputContext.Provider value={{ slots, variant, maxLength }}>\n              {children ?? (\n                <Group>\n                  <Slots />\n                </Group>\n              )}\n            </OTPInputContext.Provider>\n          )}\n        />\n        <ErrorMessage\n          dataTestId='spectral-input-otp-error-message'\n          id={errorMessageId}\n          message={isInvalid ? errorMessage : null}\n          messageReserveLines={messageReserveLines}\n          messageReserveSpace={messageReserveSpace}\n        />\n      </div>\n    </InputOTPStateContext.Provider>\n  )\n}\nRoot.displayName = 'InputOTP'\n\nconst Group = ({\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<'div'> & {\n  ref?: Ref<ComponentRef<'div'>>\n}) => <div className='gap-x-2 flex items-center justify-center' data-testid='spectral-input-otp-group' ref={ref} {...props} />\nGroup.displayName = 'InputOTP.Group'\n\nconst Slot = ({\n  className,\n  index,\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<'div'> & {\n  index: number\n  ref?: Ref<ComponentRef<'div'>>\n}) => {\n  const { variant = 'outlined', slots = [] } = useRoot()\n  const { isInvalid } = useContext(InputOTPStateContext)\n  const slot = slots[index] || { char: '', hasFakeCaret: true, isActive: false }\n\n  return (\n    <div\n      className={cn(\n        'h-12 w-10 relative z-10 flex items-center justify-center rounded-[8px] border tabular-nums transition duration-200 focus:outline-none',\n        variant === 'filled' ? 'border-level-one bg-level-one' : 'border-input-otp-border bg-transparent',\n        !isInvalid && 'border',\n        isInvalid && 'border-2 border-danger-400',\n        slot.isActive && !isInvalid && 'z-10 border-input-otp-border--focus',\n        slot.isActive && isInvalid && 'z-10 border-danger-400 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-danger-400',\n        className,\n      )}\n      data-index={index}\n      data-testid='spectral-input-otp-slot'\n      data-variant={variant}\n      ref={ref}\n      {...props}\n    >\n      {slot.char}\n      {slot.hasFakeCaret && (\n        <div className='inset-0 pointer-events-none absolute flex items-center justify-center motion-safe:animate-caret-blink'>\n          <div className='h-8 w-px bg-input-otp-caret' />\n        </div>\n      )}\n    </div>\n  )\n}\nSlot.displayName = 'InputOTP.Slot'\n\ninterface SlotsProps {\n  className?: string\n  count?: number\n  start?: number\n}\n\n/**\n * Helper component that automatically renders multiple InputOTP.Slot components.\n * Uses the maxLength from the parent InputOTP to determine how many slots to render.\n *\n * @example\n * // Render all 6 slots\n * <InputOTP maxLength={6}>\n *   <InputOTP.Group>\n *     <InputOTP.Slots />\n *   </InputOTP.Group>\n * </InputOTP>\n *\n * @example\n * // Render slots in groups with a separator (3-3 split)\n * <InputOTP maxLength={6}>\n *   <InputOTP.Group>\n *     <InputOTP.Slots count={3} />\n *   </InputOTP.Group>\n *   <InputOTP.Separator />\n *   <InputOTP.Group>\n *     <InputOTP.Slots start={3} />\n *   </InputOTP.Group>\n * </InputOTP>\n */\nconst Slots = ({ start = 0, count, className }: SlotsProps) => {\n  const { maxLength = 0 } = useRoot()\n  const end = count !== undefined ? start + count : maxLength\n  const indices = Array.from({ length: end - start }, (_, i) => start + i)\n\n  return (\n    <>\n      {indices.map((index) => (\n        <Slot key={index} index={index} className={className} />\n      ))}\n    </>\n  )\n}\nSlots.displayName = 'InputOTP.Slots'\n\nconst Separator = ({\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<'div'> & {\n  ref?: Ref<ComponentRef<'div'>>\n}) => {\n  const { variant = 'outlined' } = useRoot()\n\n  return (\n    <div ref={ref} role='separator' {...props} data-testid='spectral-input-otp-separator' data-variant={variant}>\n      <MinusIcon size={24} color={variant === 'filled' ? 'var(--color-input-otp-filled-separator)' : 'var(--color-input-otp-border)'} />\n    </div>\n  )\n}\nSeparator.displayName = 'InputOTP.Separator'\n\nexport const InputOTP = Object.assign(Root, {\n  Group,\n  Slot,\n  Slots,\n  Separator,\n})\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;EA4LoB,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;;;;EA4B9F,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\n      width='14'\n      height='14'\n      viewBox='0 0 24 24'\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'\n    >\n      <path\n        d='M10 5.75L3.75 12L10 18.25M4.5 12H20.25'\n        stroke='currentColor'\n        strokeWidth='1.5'\n        strokeLinecap='round'\n        strokeLinejoin='round'\n      />\n    </svg>\n  ),\n  arrowRight: (\n    <svg\n      width='14'\n      height='14'\n      viewBox='0 0 24 24'\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'\n    >\n      <path\n        d='M14 5.75L20.25 12L14 18.25M19.5 12H3.75'\n        stroke='currentColor'\n        strokeWidth='1.5'\n        strokeLinecap='round'\n        strokeLinejoin='round'\n      />\n    </svg>\n  ),\n  arrowUp: (\n    <svg\n      width='14'\n      height='14'\n      viewBox='0 0 24 24'\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'\n    >\n      <path\n        d='M5.75 10L12 3.75L18.25 10M12 20.25V4.5'\n        stroke='currentColor'\n        strokeWidth='1.5'\n        strokeLinecap='round'\n        strokeLinejoin='round'\n      />\n    </svg>\n  ),\n  arrowDown: (\n    <svg\n      width='14'\n      height='14'\n      viewBox='0 0 24 24'\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'\n    >\n      <path\n        d='M18 14L12 20L6 14M12 19V4'\n        stroke='currentColor'\n        strokeWidth='1.5'\n        strokeLinecap='round'\n        strokeLinejoin='round'\n      />\n    </svg>\n  ),\n  command: (\n    <svg\n      width='14'\n      height='14'\n      viewBox='0 0 24 24'\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'\n    >\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\n      width='14'\n      height='14'\n      viewBox='0 0 24 24'\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'\n    >\n      <path\n        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'\n        stroke='currentColor'\n        strokeWidth='1.5'\n        strokeLinecap='round'\n        strokeLinejoin='round'\n      />\n    </svg>\n  ),\n  shift: (\n    <svg\n      width='14'\n      height='14'\n      viewBox='0 0 24 24'\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'\n    >\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\n      className='-translate-y-0.5'\n      width='14'\n      height='14'\n      viewBox='0 0 24 24'\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'\n    >\n      <path\n        d='M8 13.9999L11.6464 10.3535C11.8417 10.1582 12.1583 10.1582 12.3536 10.3535L16 13.9999'\n        stroke='currentColor'\n        strokeWidth='1.5'\n        strokeLinecap='round'\n        strokeLinejoin='round'\n      />\n    </svg>\n  ),\n  return: (\n    <svg\n      width='14'\n      height='14'\n      viewBox='0 0 24 24'\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'\n    >\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\n      width='14'\n      height='14'\n      viewBox='0 0 24 24'\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'\n    >\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 (\n    <kbd\n      className={cn('gap-1 inline-flex items-center', className)}\n      data-slot='kbd-group'\n      data-testid='spectral-kbd-group'\n      {...props}\n    />\n  )\n}\nKbdGroup.displayName = 'KbdGroup'\n"],"mappings":"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"}
+{"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":"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"}

package/dist/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","names":[],"sources":["../src/components/Label/Label.tsx"],"sourcesContent":["import { cn } from '@utils/twUtils'\nimport { type ComponentPropsWithoutRef, type Ref } from 'react'\n\nexport interface LabelProps extends ComponentPropsWithoutRef<'label'> {\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const Label = ({\n  className,\n  ref,\n  ...props\n}: LabelProps & {\n  ref?: Ref<HTMLLabelElement>\n}) => {\n  return (\n    // eslint-disable-next-line jsx-a11y/label-has-associated-control\n    <label\n      className={cn('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', className)}\n      data-slot='label'\n      ref={ref}\n      {...props}\n    />\n  )\n}\nLabel.displayName = 'Label'\n"],"mappings":";;;;;;AAOA,MAAa,SAAS,EACpB,WACA,KACA,GAAG,YAGC;AACJ,QAEE,oBAAC,SAAD;EACE,WAAW,GAAG,8FAA8F,UAAU;EACtH,aAAU;EACL;EACL,GAAI;EACJ;;AAGN,MAAM,cAAc"}
+{"version":3,"file":"Label.js","names":[],"sources":["../src/components/Label/Label.tsx"],"sourcesContent":["import { cn } from '@utils/twUtils'\nimport { type ComponentPropsWithoutRef, type Ref } from 'react'\n\nexport interface LabelProps extends ComponentPropsWithoutRef<'label'> {\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const Label = ({\n  className,\n  ref,\n  ...props\n}: LabelProps & {\n  ref?: Ref<HTMLLabelElement>\n}) => {\n  return (\n    // eslint-disable-next-line jsx-a11y/label-has-associated-control\n    <label className={cn('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', className)} data-slot='label' ref={ref} {...props} />\n  )\n}\nLabel.displayName = 'Label'\n"],"mappings":";;;;;;AAOA,MAAa,SAAS,EACpB,WACA,KACA,GAAG,YAGC;AACJ,QAEE,oBAAC,SAAD;EAAO,WAAW,GAAG,8FAA8F,UAAU;EAAE,aAAU;EAAa;EAAK,GAAI;EAAS;;AAG5K,MAAM,cAAc"}

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, getTriggerClasses, 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 = `${multiSelectId}-warning`\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\n              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'\n              key={val}\n            >\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\n          data-testid='spectral-multiselect-selected-indicator'\n          className={cn('w-4 h-4 rounded flex items-center justify-center border border-input-border', isSelected && 'bg-primary border-primary')}\n        >\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\n      className='w-full'\n      data-testid='spectral-multiselect-root'\n    >\n      {label && (\n        <Label\n          className={cn('mb-2 block text-text-primary', isDisabled && 'text-text-secondary')}\n          data-testid='spectral-multiselect-label'\n          htmlFor={multiSelectId}\n        >\n          {label}\n        </Label>\n      )}\n      <Popover.Root\n        open={isOpen}\n        onOpenChange={setIsOpen}\n      >\n        <div\n          className='relative'\n          data-testid='spectral-multiselect-wrapper'\n          onKeyDown={isOpen ? handleKeyDown : undefined}\n          role='none'\n        >\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\n                className='min-w-0 flex-1 overflow-hidden'\n                data-testid='spectral-multiselect-selected-items'\n              >\n                {renderSelectedItems()}\n              </div>\n              <div className='gap-2 ml-2 flex shrink-0 items-center'>\n                <ChevronDownIcon\n                  className={cn('text-input-icon transition-transform duration-200', isOpen && 'rotate-180')}\n                  size={20}\n                />\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                    />\n                  </div>\n                )}\n                <div\n                  aria-multiselectable='true'\n                  className='max-h-64 overflow-y-auto'\n                  id={listboxId}\n                  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\n                      className='text-sm'\n                      message={loadingMessage}\n                      data-testid='spectral-multiselect-loading'\n                    />\n                  ) : filteredOptions.length === 0 ? (\n                    <EmptyState\n                      className='text-sm'\n                      data-testid='spectral-multiselect-empty-message'\n                      message={emptyMessage}\n                    />\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\n                          key={groupName}\n                          className='mb-1'\n                          data-testid='spectral-multiselect-group'\n                        >\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\n                            data-testid='spectral-multiselect-group-name'\n                            className='px-3 py-1 text-xs font-semibold text-input-text-secondary tracking-wide uppercase'\n                          >\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":";;;;;;;;;;;;;;;;AAiDA,MAAM,YAAY;AAElB,MAAM,2BAAmC;AACvC,QAAO,GACL,iCACA,2BAA2B,EAC3B,wFACA,sFACA,wFACA,sDACA,sDACA,oDACD;;AAKH,MAAM,yBACJ,SACA,YACA,SACA,UACA,aACA,gBACA,YACA,eACA,iBACG;CACH,MAAM,CAAC,cAAc,mBAAmB,SAAS,GAAG;CAGpD,MAAM,iBAAiB,cAA+B;EACpD,MAAM,QAAyB,EAAE;AAEjC,MAAI,WACF,OAAM,KAAK,EAAE,MAAM,UAAU,CAAC;AAGhC,MAAI,cACF,OAAM,KAAK,EAAE,MAAM,cAAc,CAAC;AAGpC,UAAQ,SAAS,QAAQ,UAAU;AACjC,OAAI,CAAC,OAAO,SACV,OAAM,KAAK;IAAE,MAAM;IAAU;IAAO,OAAO,OAAO;IAAO,CAAC;IAE5D;AAEF,MAAI,aACF,OAAM,KAAK,EAAE,MAAM,aAAa,CAAC;AAGnC,SAAO;IACN;EAAC;EAAS;EAAY;EAAe;EAAa,CAAC;CAGtD,MAAM,mBAAmB,aACtB,UAAkB;AACjB,MAAI,QAAQ,KAAK,SAAS,eAAe,OAAQ;AAEjD,MADa,eAAe,OACnB,SAAS,SAChB,gBAAe,SAAS,OAAO;IAGnC,CAAC,gBAAgB,eAAe,CACjC;AA4HD,QAAO;EACL;EACA;EACA,eA7HoB,aACnB,UAAyC;GACxC,MAAM,cAAc,gBAAgB,KAAK,eAAe,eAAe,SAAS,eAAe,gBAAgB;AAG/G,OAAI,MAAM,QAAQ,OAAO,aAAa,SAAS,SAC7C;AAIF,OAAI,MAAM,QAAQ,WAAW,aAAa,SAAS,SACjD;GAwEF,MAAM,UAAU;IApEd,iBAAiB;AACf,WAAM,gBAAgB;KACtB,MAAM,WAAW,KAAK,IAAI,eAAe,GAAG,eAAe,SAAS,EAAE;AACtE,qBAAgB,SAAS;AACzB,sBAAiB,SAAS;;IAE5B,eAAe;AACb,WAAM,gBAAgB;KACtB,MAAM,WAAW,KAAK,IAAI,eAAe,GAAG,EAAE;AAC9C,qBAAgB,SAAS;AACzB,sBAAiB,SAAS;;IAE5B,WAAW;AAET,SAAI,MAAM,SACR,KAAI,gBAAgB,EAElB,UAAS;UACJ;AACL,YAAM,gBAAgB;MACtB,MAAM,WAAW,eAAe;AAChC,sBAAgB,SAAS;AACzB,uBAAiB,SAAS;;cAGxB,gBAAgB,eAAe,SAAS,EAE1C,UAAS;UACJ;AACL,YAAM,gBAAgB;MACtB,MAAM,WAAW,eAAe;AAChC,sBAAgB,SAAS;AACzB,uBAAiB,SAAS;;;IAIhC,aAAa;AACX,WAAM,gBAAgB;AACtB,SAAI,gBAAgB,KAAK,eAAe,eAAe,QAAQ;MAC7D,MAAM,OAAO,eAAe;AAC5B,UAAI,KAAK,SAAS,aAChB,cAAa;eACJ,KAAK,SAAS,YACvB,aAAY;eACH,KAAK,SAAS,SACvB,UAAS,KAAK,MAAM;;;IAI1B,WAAW;AACT,WAAM,gBAAgB;AACtB,SAAI,gBAAgB,KAAK,eAAe,eAAe,QAAQ;MAC7D,MAAM,OAAO,eAAe;AAC5B,UAAI,KAAK,SAAS,aAChB,cAAa;eACJ,KAAK,SAAS,YACvB,aAAY;eACH,KAAK,SAAS,SACvB,UAAS,KAAK,MAAM;;;IAI1B,cAAc;AACZ,WAAM,gBAAgB;AACtB,cAAS;;IAIc,CAAC,MAAM;AAClC,OAAI,QACF,UAAS;KAGb;GAAC;GAAgB;GAAc;GAAU;GAAa;GAAY;GAAS;GAAiB,CAqC/E;EACb,qBAlC0B,aACzB,gBAAiC;AAChC,OAAI,eAAe,KAAK,gBAAgB,eAAe,OAAQ,QAAO;GACtE,MAAM,OAAO,eAAe;AAC5B,UAAO,KAAK,SAAS,YAAY,KAAK,UAAU;KAElD,CAAC,cAAc,eAAe,CA4BX;EACnB,iBA1BsB,cAAc;AACpC,OAAI,eAAe,KAAK,gBAAgB,eAAe,OAAQ,QAAO;AACtE,UAAO,eAAe,cAAc,SAAS;KAC5C,CAAC,cAAc,eAAe,CAuBhB;EACf,oBAtByB,cAAc;AACvC,OAAI,eAAe,KAAK,gBAAgB,eAAe,OAAQ,QAAO;AACtE,UAAO,eAAe,cAAc,SAAS;KAC5C,CAAC,cAAc,eAAe,CAmBb;EAClB,mBAlBwB,cAAc;AACtC,OAAI,eAAe,KAAK,gBAAgB,eAAe,OAAQ,QAAO;AACtE,UAAO,eAAe,cAAc,SAAS;KAC5C,CAAC,cAAc,eAAe,CAed;EACjB,oBAdyB,cAAc;AACvC,OAAI,eAAe,KAAK,gBAAgB,eAAe,OAAQ,QAAO;GACtE,MAAM,OAAO,eAAe;AAC5B,UAAO,KAAK,SAAS,WAAW,KAAK,QAAQ;KAC5C,CAAC,cAAc,eAAe,CAUb;EACnB;;AAGH,MAAa,mBAAmB,EAC9B,WACA,gBAAgB,aAChB,gBAAgB,OAChB,gBAAgB,WAChB,eAAe,oBACf,cACA,eAAe,EAAE,EACjB,UACA,IACA,OACA,iBAAiB,oBACjB,sBAAsB,GACtB,sBAAsB,OACtB,WAAW,GACX,MACA,UACA,UAAU,EAAE,EACZ,cAAc,kBACd,KACA,oBAAoB,mBACpB,iBAAiB,cACjB,eAAe,MACf,aAAa,MACb,gBAAgB,MAChB,qBAAqB,OACrB,QAAQ,WACR,OAAO,WACP,gBACA,cAAc,WACd,oBAAoB,iBACpB,GAAG,YAGC;CACJ,MAAM,cAAc,OAAO;CAE3B,MAAM,gBAAgB,eAAe,IADhB,QAAQ,eAAe,cACU;CACtD,MAAM,YAAY,GAAG,cAAc;CACnC,MAAM,iBAAiB,kBAAkB,cAAc;CACvD,MAAM,mBAAmB,GAAG,cAAc;CAC1C,MAAM,YAAY,UAAU,UAAU,iBAAiB,UAAU,aAAa,iBAAiB,mBAAmB;CAElH,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,EAAE,oBAAoB,uBAAuB,+BAA+B,OAAO;CACzF,MAAM,CAAC,aAAa,kBAAkB,SAAS,GAAG;CAClD,MAAM,CAAC,OAAO,YAAY,qBAA+B;EACvD,OAAO;EACP;EACA;EACD,CAAC;CAEF,MAAM,iBAAiB,OAAyB,KAAK;CAErD,MAAM,aAAa,QAAQ,SAAS;CACpC,MAAM,YAAY,UAAU;CAC5B,MAAM,YAAY,aAAa,OAAO,iBAAiB,MAAM,UAAU,UAAU;CACjF,MAAM,EAAE,uBAAuB,mBAAmB,0BAA0B,uBAAuB;EACjG;EACA,cAAc;EACf,CAAC;CAEF,MAAM,kBAAkB,cAAc;EACpC,IAAI,WAAW,QAAQ,QAAQ,WAAW,OAAO,MAAM,aAAa,CAAC,SAAS,YAAY,aAAa,CAAC,CAAC;AAEzG,MAAI,mBACF,YAAW,CAAC,GAAG,SAAS,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,cAAc,EAAE,MAAM,CAAC;AAGzE,SAAO;IACN;EAAC;EAAS;EAAa;EAAmB,CAAC;CAE9C,MAAM,iBAAiB,cAAc;EACnC,MAAM,SAA8C,EAAE;EACtD,MAAM,YAAiC,EAAE;AAEzC,kBAAgB,SAAS,WAAW;AAClC,OAAI,OAAO,OAAO;AAChB,QAAI,CAAC,OAAO,OAAO,OACjB,QAAO,OAAO,SAAS,EAAE;AAE3B,WAAO,OAAO,OAAO,KAAK,OAAO;SAEjC,WAAU,KAAK,OAAO;IAExB;AAEF,SAAO;GAAE;GAAQ;GAAW,WAAW,OAAO,KAAK,OAAO,CAAC,SAAS;GAAG;IACtE,CAAC,gBAAgB,CAAC;CAErB,MAAM,eAAe,aAClB,gBAAwB;AAEvB,MADe,QAAQ,MAAM,MAAM,EAAE,UAAU,YACrC,EAAE,SAAU;AAItB,WAFiB,MAAM,SAAS,YAAY,GAAG,MAAM,QAAQ,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,OAAO,YAAY,CAE7F;AAElB,MAAI,cACF,WAAU,MAAM;IAGpB;EAAC;EAAe;EAAS;EAAU;EAAM,CAC1C;CAED,MAAM,kBAAkB,kBAAkB;EACxC,MAAM,YAAY,QAAQ,QAAQ,MAAM,CAAC,EAAE,SAAS,CAAC,KAAK,MAAM,EAAE,MAAM;AAGxE,MAFsB,UAAU,OAAO,MAAM,MAAM,SAAS,EAAE,CAE7C,CACf,UAAS,EAAE,CAAC;MAEZ,UAAS,UAAU;IAEpB;EAAC;EAAS;EAAU;EAAM,CAAC;CAE9B,MAAM,iBAAiB,kBAAkB;AACvC,WAAS,EAAE,CAAC;IACX,CAAC,SAAS,CAAC;CAGd,MAAM,sBAAsB,cAAc,QAAQ,QAAQ,MAAM,CAAC,EAAE,SAAS,CAAC,KAAK,MAAM,EAAE,MAAM,EAAE,CAAC,QAAQ,CAAC;CAC5G,MAAM,gBAAgB,oBAAoB,SAAS,KAAK,oBAAoB,OAAO,MAAM,MAAM,SAAS,EAAE,CAAC;CAE3G,MAAM,EAAE,oBAAoB,qBAAqB,eAAe,oBAAoB,oBAAoB,sBACtG,iBACA,sBACM,UAAU,MAAM,EACtB,cACA,iBACA,gBACA,YACA,eACA,MACD;AAGD,iBAAgB;AACd,MAAI,OACF,iBAAgB,EAAE;MAElB,iBAAgB,GAAG;IAEpB,CAAC,QAAQ,gBAAgB,CAAC;CAE7B,MAAM,qBAAqB,aAAa,MAAqC;AAC3E,iBAAe,EAAE,OAAO,MAAM;IAC7B,EAAE,CAAC;CAEN,MAAM,4BAA4B;AAChC,MAAI,MAAM,WAAW,EACnB,QAAO,oBAAC,QAAD;GAAM,WAAU;aAAyD;GAAmB;EAGrG,MAAM,kBAAkB,MAAM,MAAM,GAAG,SAAS;EAChD,MAAM,iBAAiB,MAAM,SAAS;AAEtC,SACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,gBAAgB,KAAK,QAAQ;IAC5B,MAAM,SAAS,QAAQ,MAAM,MAAM,EAAE,UAAU,IAAI;AACnD,QAAI,CAAC,OAAQ,QAAO;AAEpB,WACE,qBAAC,QAAD;KACE,WAAU;eADZ,CAIE,oBAAC,QAAD;MAAM,WAAU;gBAAY,OAAO;MAAa,GAChD,oBAAC,UAAD;MACE,cAAY,UAAU,OAAO;MAC7B,WAAU;MACV,eAAY;MACZ,UAAU,MAAM;AACd,SAAE,gBAAgB;AAClB,SAAE,iBAAiB;AACnB,oBAAa,IAAI;;MAEnB,gBAAgB,MAAM;AACpB,SAAE,iBAAiB;;MAErB,MAAK;gBAEL,oBAAC,WAAD,EAAW,MAAM,IAAM;MAChB,EACJ;OAnBA,IAmBA;KAET,EACD,iBAAiB,KAAK,qBAAC,QAAD;IAAM,WAAU;cAAhB;KAAwF;KAAE;KAAe;KAAY;MACxI;;;CAIV,MAAM,gBAAgB,QAA2B,UAAkB;EACjE,MAAM,aAAa,MAAM,SAAS,OAAO,MAAM;EAC/C,MAAM,YAAY,oBAAoB,MAAM;EAC5C,MAAM,WAAW,GAAG,UAAU,UAAU,OAAO;AAE/C,SACE,qBAAC,UAAD;GACE,iBAAe;GACf,WAAW,GACT,0OACA,aAAa,sBACb,cAAc,8BACf;GACD,UAAU,OAAO;GACjB,IAAI;GAEJ,eAAe,aAAa,OAAO,MAAM;GACzC,MAAK;GACL,MAAK;aAZP,CAcE,oBAAC,OAAD;IACE,eAAY;IACZ,WAAW,GAAG,+EAA+E,cAAc,4BAA4B;cAEtI,cAAc,oBAAC,eAAD,EAAe,MAAM,IAAM;IACtC,GACN,oBAAC,QAAD,YAAO,OAAO,OAAa,EACpB;KAZF,OAAO,MAYL;;CAIb,MAAM,gCAAgC;EACpC,+BAA+B;EAC/B,gCAAgC;EAChC,qCAAqC;EACtC;AAED,QACE,qBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAFd;GAIG,SACC,oBAAC,OAAD;IACE,WAAW,GAAG,gCAAgC,cAAc,sBAAsB;IAClF,eAAY;IACZ,SAAS;cAER;IACK;GAEV,oBAAC,QAAQ,MAAT;IACE,MAAM;IACN,cAAc;cAEd,qBAAC,OAAD;KACE,WAAU;KACV,eAAY;KACZ,WAAW,SAAS,gBAAgB;KACpC,MAAK;eAJP;MAME,oBAAC,QAAQ,SAAT;OAAiB;iBACf,qBAAC,UAAD;QACE,yBAAuB,UAAU,qBAAqB,GAAG,UAAU,UAAU,uBAAuB;QACpG,iBAAe,SAAS,YAAY;QACpC,iBAAe;QACf,cAAY,aAAa;QACzB,WAAW,GAAG,kBAAkB,QAAQ,OAAO,UAAU,EAAE,wBAAwB;QACnF,cAAY;QACZ,eAAY;QACZ,UAAU;QACV,IAAI;QACE;QACD;QACL,MAAK;QACL,OAAO,wBAAwB;QAC/B,MAAK;QACL,GAAI;QACJ,GAAI;kBAhBN,CAkBE,oBAAC,OAAD;SACE,WAAU;SACV,eAAY;mBAEX,qBAAqB;SAClB,GACN,oBAAC,OAAD;SAAK,WAAU;mBACb,oBAAC,iBAAD;UACE,WAAW,GAAG,qDAAqD,UAAU,aAAa;UAC1F,MAAM;UACN;SACE,EACC;;OACO;MACjB,gBAAgB,MAAM,SAAS,KAC9B,oBAAC,UAAD;OACE,cAAW;OACX,WAAU;OACV,eAAY;OACZ,UAAU;OACV,UAAU,MAAM;AACd,UAAE,iBAAiB;AACnB,wBAAgB;AAChB,iBAAS,eAAe,cAAc,EAAE,OAAO;;OAEjD,MAAK;iBAEL,oBAAC,WAAD,EAAW,MAAM,IAAM;OAChB;MAGX,oBAAC,QAAQ,QAAT,YACE,oBAAC,QAAQ,SAAT;OACE,OAAM;OACN;OACA,WAAW,oBAAoB;OAC/B,kBAAkB;OAClB,4BAA0B;OAC1B,6BAA2B,sBAAsB,WAAW,gBAAgB;OAC5E,eAAY;OACZ,kBAAkB,MAAM;AACtB,UAAE,gBAAgB;AAClB,YAAI,WACF,gBAAe,SAAS,OAAO;;OAGnC,MAAK;OACL,YAAY;OACZ,KAAK;OACL,OAAO;QACL,OAAO;QACP,GAAI,kBAAkB,YAAY,EAAE,GAAG;QACvC,GAAG;QACJ;iBAED,qBAAC,OAAD;QAAK,WAAU;kBAAf,CACG,cACC,qBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,oBAAC,YAAD,EAAY,WAAW,GAAG,WAAW,2DAA2D,EAAI,GACpG,oBAAC,SAAD;UACE,cAAW;UACX,WAAU;UACV,eAAY;UACZ,UAAU;UACV,aAAa;UACb,KAAK;UACL,MAAK;UACL,OAAO;UACP,EACE;YAER,oBAAC,OAAD;SACE,wBAAqB;SACrB,WAAU;SACV,IAAI;SACJ,MAAK;mBAEJ,YACC,oBAAC,cAAD;UACE,WAAU;UACV,SAAS;UACT,eAAY;UACZ,IACA,gBAAgB,WAAW,IAC7B,oBAAC,YAAD;UACE,WAAU;UACV,eAAY;UACZ,SAAS;UACT,IAEF;UACG,iBACC,qBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,oBAAC,UAAD;YACE,WAAW,GACT,sNACA,sBAAsB,qBACvB;YACD,eAAY;YACZ,SAAS;YACT,MAAK;sBAEJ,gBAAgB,gBAAgB;YAC1B,GACT,oBAAC,OAAD,EAAK,WAAU,kCAAmC,EAC9C;;UAGP,eAAe,UAAU,SAAS,KAAK,oBAAC,OAAD;WAAK,WAAU;qBAAQ,eAAe,UAAU,KAAK,QAAQ,UAAU,aAAa,QAAQ,MAAM,CAAC;WAAO;UAEjJ,OAAO,QAAQ,eAAe,OAAO,CAAC,KAAK,CAAC,WAAW,kBACtD,qBAAC,OAAD;WAEE,WAAU;WACV,eAAY;qBAHd;aAKI,eAAe,UAAU,SAAS,KAAK,OAAO,KAAK,eAAe,OAAO,CAAC,QAAQ,UAAU,GAAG,MAAM,oBAAC,OAAD,EAAK,WAAU,kCAAmC;YACzJ,oBAAC,OAAD;aACE,eAAY;aACZ,WAAU;uBAET;aACG;YACL,aAAa,KAAK,QAAQ,WAAW,aAAa,QAAQ,gBAAgB,QAAQ,OAAO,CAAC,CAAC;YACxF;aAZC,UAYD,CACN;UACD;SAED,EACF;;OACU,GACH;MACb;;IACO;GAEf,oBAAC,cAAD;IACE,YAAW;IACX,IAAI;IACJ,SAAS,UAAU,UAAU,eAAe;IACvB;IACrB,qBAAqB,uBAAuB,UAAU;IACtD;GACF,oBAAC,gBAAD;IACE,YAAW;IACX,IAAI;IACJ,SAAS,UAAU,YAAY,iBAAiB;IAC3B;IACrB,qBAAqB,uBAAuB,UAAU;IACtD;GACE;;;AAGV,gBAAgB,cAAc"}
+{"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, getTriggerClasses, 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 = `${multiSelectId}-warning`\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                    />\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/MultiSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.js","names":[],"sources":["../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { type Ref } from 'react'\nimport { MultiSelectBase, type MultiSelectBaseProps, type MultiSelectOption } from './MultiSelectBase'\n\nexport interface MultiSelectProps extends Omit<MultiSelectBaseProps, 'defaultValue' | 'onChange' | 'options' | 'value'> {\n  defaultValue?: string[]\n  emptyText?: string\n  loading?: boolean\n  onChange?: (value: string[]) => void\n  onSearchChange?: (search: string) => void\n  onValueChange?: (value: string[]) => void\n  options: {\n    disabled?: boolean\n    group?: string\n    label: string\n    value: string\n  }[]\n  sortAlphabetically?: boolean\n  value?: string[]\n}\n\nexport const MultiSelect = ({\n  emptyText = 'No matches found.',\n  loading = false,\n  onChange,\n  onValueChange,\n  options,\n  defaultValue,\n  ref,\n  state,\n  value,\n  ...props\n}: MultiSelectProps & {\n  ref?: Ref<HTMLButtonElement>\n}) => {\n  const baseOptions: MultiSelectOption[] = options.map((option) => ({\n    disabled: option.disabled ?? false,\n    group: option.group,\n    label: option.label,\n    value: option.value,\n  }))\n\n  const derivedState = loading ? 'loading' : state\n\n  const handleChange = (nextValue: string[]) => {\n    onValueChange?.(nextValue)\n    onChange?.(nextValue)\n  }\n\n  return (\n    <MultiSelectBase\n      data-disabled={props.disabled}\n      defaultValue={defaultValue}\n      disabled={props.disabled}\n      emptyMessage={emptyText}\n      onChange={handleChange}\n      options={baseOptions}\n      ref={ref}\n      state={derivedState}\n      value={value}\n      {...props}\n    />\n  )\n}\nMultiSelect.displayName = 'MultiSelect'\n"],"mappings":";;;;;;AAoBA,MAAa,eAAe,EAC1B,YAAY,qBACZ,UAAU,OACV,UACA,eACA,SACA,cACA,KACA,OACA,OACA,GAAG,YAGC;CACJ,MAAM,cAAmC,QAAQ,KAAK,YAAY;EAChE,UAAU,OAAO,YAAY;EAC7B,OAAO,OAAO;EACd,OAAO,OAAO;EACd,OAAO,OAAO;EACf,EAAE;CAEH,MAAM,eAAe,UAAU,YAAY;CAE3C,MAAM,gBAAgB,cAAwB;AAC5C,kBAAgB,UAAU;AAC1B,aAAW,UAAU;;AAGvB,QACE,oBAAC,iBAAD;EACE,iBAAe,MAAM;EACP;EACd,UAAU,MAAM;EAChB,cAAc;EACd,UAAU;EACV,SAAS;EACJ;EACL,OAAO;EACA;EACP,GAAI;EACJ;;AAGN,YAAY,cAAc"}
+{"version":3,"file":"MultiSelect.js","names":[],"sources":["../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { type Ref } from 'react'\nimport { MultiSelectBase, type MultiSelectBaseProps, type MultiSelectOption } from './MultiSelectBase'\n\nexport interface MultiSelectProps extends Omit<MultiSelectBaseProps, 'defaultValue' | 'onChange' | 'options' | 'value'> {\n  defaultValue?: string[]\n  emptyText?: string\n  loading?: boolean\n  onChange?: (value: string[]) => void\n  onSearchChange?: (search: string) => void\n  onValueChange?: (value: string[]) => void\n  options: {\n    disabled?: boolean\n    group?: string\n    label: string\n    value: string\n  }[]\n  sortAlphabetically?: boolean\n  value?: string[]\n}\n\nexport const MultiSelect = ({\n  emptyText = 'No matches found.',\n  loading = false,\n  onChange,\n  onValueChange,\n  options,\n  defaultValue,\n  ref,\n  state,\n  value,\n  ...props\n}: MultiSelectProps & {\n  ref?: Ref<HTMLButtonElement>\n}) => {\n  const baseOptions: MultiSelectOption[] = options.map((option) => ({\n    disabled: option.disabled ?? false,\n    group: option.group,\n    label: option.label,\n    value: option.value,\n  }))\n\n  const derivedState = loading ? 'loading' : state\n\n  const handleChange = (nextValue: string[]) => {\n    onValueChange?.(nextValue)\n    onChange?.(nextValue)\n  }\n\n  return <MultiSelectBase data-disabled={props.disabled} defaultValue={defaultValue} disabled={props.disabled} emptyMessage={emptyText} onChange={handleChange} options={baseOptions} ref={ref} state={derivedState} value={value} {...props} />\n}\nMultiSelect.displayName = 'MultiSelect'\n"],"mappings":";;;;;;AAoBA,MAAa,eAAe,EAC1B,YAAY,qBACZ,UAAU,OACV,UACA,eACA,SACA,cACA,KACA,OACA,OACA,GAAG,YAGC;CACJ,MAAM,cAAmC,QAAQ,KAAK,YAAY;EAChE,UAAU,OAAO,YAAY;EAC7B,OAAO,OAAO;EACd,OAAO,OAAO;EACd,OAAO,OAAO;EACf,EAAE;CAEH,MAAM,eAAe,UAAU,YAAY;CAE3C,MAAM,gBAAgB,cAAwB;AAC5C,kBAAgB,UAAU;AAC1B,aAAW,UAAU;;AAGvB,QAAO,oBAAC,iBAAD;EAAiB,iBAAe,MAAM;EAAwB;EAAc,UAAU,MAAM;EAAU,cAAc;EAAW,UAAU;EAAc,SAAS;EAAkB;EAAK,OAAO;EAAqB;EAAO,GAAI;EAAS;;AAEhP,YAAY,cAAc"}

package/dist/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","names":[],"sources":["../src/components/Popover/Popover.tsx"],"mappings":";;;;;;KAIY,mBAAA,GAAsB,wBAAA,QAAgC,gBAAA,CAAiB,OAAA;EACjF,KAAA;AAAA;AAAA,cAGW,OAAA;EAAA,GAAO;AAAA,GAAkB,wBAAA,QAAgC,gBAAA,CAAiB,IAAA,MAAK,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAU/E,cAAA;EAAA,GAAc;AAAA,GAAkB,wBAAA,QAAgC,gBAAA,CAAiB,OAAA,MAAQ,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAUzF,cAAA;EAAc,KAAA;EAAA,SAAA;EAAA,gBAAA;EAAA,IAAA;EAAA,UAAA;EAAA,KAAA;EAAA,GAAA;AAAA,GAAuH,mBAAA,KAAmB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cA6BxJ,aAAA;EAAA,GAAa;AAAA,GAAkB,wBAAA,QAAgC,gBAAA,CAAiB,MAAA,MAAO,oBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Popover.d.ts","names":[],"sources":["../src/components/Popover/Popover.tsx"],"mappings":";;;;;;KAIY,mBAAA,GAAsB,wBAAA,QAAgC,gBAAA,CAAiB,OAAA;EACjF,KAAA;AAAA;AAAA,cAGW,OAAA;EAAA,GAAO;AAAA,GAAkB,wBAAA,QAAgC,gBAAA,CAAiB,IAAA,MAAK,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAI/E,cAAA;EAAA,GAAc;AAAA,GAAkB,wBAAA,QAAgC,gBAAA,CAAiB,OAAA,MAAQ,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAIzF,cAAA;EAAc,KAAA;EAAA,SAAA;EAAA,gBAAA;EAAA,IAAA;EAAA,UAAA;EAAA,KAAA;EAAA,GAAA;AAAA,GAAuH,mBAAA,KAAmB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cA6BxJ,aAAA;EAAA,GAAa;AAAA,GAAkB,wBAAA,QAAgC,gBAAA,CAAiB,MAAA,MAAO,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":[],"sources":["../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover'\nimport { cn } from '@utils/twUtils'\nimport { type ComponentPropsWithoutRef, type CSSProperties } from 'react'\n\nexport type PopoverContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n  width?: number | string\n}\n\nexport const Popover = ({ ...props }: ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>) => {\n  return (\n    <PopoverPrimitive.Root\n      data-slot='popover'\n      data-testid='spectral-popover'\n      {...props}\n    />\n  )\n}\n\nexport const PopoverTrigger = ({ ...props }: ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>) => {\n  return (\n    <PopoverPrimitive.Trigger\n      data-slot='popover-trigger'\n      data-testid='spectral-popover-trigger'\n      {...props}\n    />\n  )\n}\n\nexport const PopoverContent = ({ align = 'center', className, collisionPadding = 8, side = 'bottom', sideOffset = 4, width = 'w-fit', ...props }: PopoverContentProps) => {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        align={align}\n        collisionPadding={collisionPadding}\n        data-slot='popover-content'\n        data-testid='spectral-popover-content'\n        side={side}\n        sideOffset={sideOffset}\n        className={cn(\n          'bg-popover-bg text-popover-text motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:animate-in',\n          'motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95',\n          'z-50 h-fit motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2',\n          'rounded-lg p-4 max-h-(--radix-popover-content-available-height) origin-[--radix-popover-content-transform-origin] border-none',\n          'shadow-md w-(--popover-width) overflow-x-hidden overflow-y-auto outline-none',\n          className,\n        )}\n        style={\n          {\n            '--popover-width': typeof width === 'number' ? `${width}px` : width === 'w-fit' ? '320px' : width,\n          } as CSSProperties\n        }\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nexport const PopoverAnchor = ({ ...props }: ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor>) => {\n  return (\n    <PopoverPrimitive.Anchor\n      data-slot='popover-anchor'\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;;;AAQA,MAAa,WAAW,EAAE,GAAG,YAAoE;AAC/F,QACE,oBAAC,iBAAiB,MAAlB;EACE,aAAU;EACV,eAAY;EACZ,GAAI;EACJ;;AAIN,MAAa,kBAAkB,EAAE,GAAG,YAAuE;AACzG,QACE,oBAAC,iBAAiB,SAAlB;EACE,aAAU;EACV,eAAY;EACZ,GAAI;EACJ;;AAIN,MAAa,kBAAkB,EAAE,QAAQ,UAAU,WAAW,mBAAmB,GAAG,OAAO,UAAU,aAAa,GAAG,QAAQ,SAAS,GAAG,YAAiC;AACxK,QACE,oBAAC,iBAAiB,QAAlB,YACE,oBAAC,iBAAiB,SAAlB;EACS;EACW;EAClB,aAAU;EACV,eAAY;EACN;EACM;EACZ,WAAW,GACT,mKACA,mLACA,uKACA,iIACA,gFACA,UACD;EACD,OACE,EACE,mBAAmB,OAAO,UAAU,WAAW,GAAG,MAAM,MAAM,UAAU,UAAU,UAAU,OAC7F;EAEH,GAAI;EACJ,GACsB;;AAI9B,MAAa,iBAAiB,EAAE,GAAG,YAAsE;AACvG,QACE,oBAAC,iBAAiB,QAAlB;EACE,aAAU;EACV,GAAI;EACJ"}
+{"version":3,"file":"Popover.js","names":[],"sources":["../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover'\nimport { cn } from '@utils/twUtils'\nimport { type ComponentPropsWithoutRef, type CSSProperties } from 'react'\n\nexport type PopoverContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n  width?: number | string\n}\n\nexport const Popover = ({ ...props }: ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>) => {\n  return <PopoverPrimitive.Root data-slot='popover' data-testid='spectral-popover' {...props} />\n}\n\nexport const PopoverTrigger = ({ ...props }: ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>) => {\n  return <PopoverPrimitive.Trigger data-slot='popover-trigger' data-testid='spectral-popover-trigger' {...props} />\n}\n\nexport const PopoverContent = ({ align = 'center', className, collisionPadding = 8, side = 'bottom', sideOffset = 4, width = 'w-fit', ...props }: PopoverContentProps) => {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        align={align}\n        collisionPadding={collisionPadding}\n        data-slot='popover-content'\n        data-testid='spectral-popover-content'\n        side={side}\n        sideOffset={sideOffset}\n        className={cn(\n          'bg-popover-bg text-popover-text motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:animate-in',\n          'motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95',\n          'z-50 h-fit motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2',\n          'rounded-lg p-4 max-h-(--radix-popover-content-available-height) origin-[--radix-popover-content-transform-origin] border-none',\n          'shadow-md w-(--popover-width) overflow-x-hidden overflow-y-auto outline-none',\n          className,\n        )}\n        style={\n          {\n            '--popover-width': typeof width === 'number' ? `${width}px` : width === 'w-fit' ? '320px' : width,\n          } as CSSProperties\n        }\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nexport const PopoverAnchor = ({ ...props }: ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor>) => {\n  return <PopoverPrimitive.Anchor data-slot='popover-anchor' {...props} />\n}\n"],"mappings":";;;;;;;AAQA,MAAa,WAAW,EAAE,GAAG,YAAoE;AAC/F,QAAO,oBAAC,iBAAiB,MAAlB;EAAuB,aAAU;EAAU,eAAY;EAAmB,GAAI;EAAS;;AAGhG,MAAa,kBAAkB,EAAE,GAAG,YAAuE;AACzG,QAAO,oBAAC,iBAAiB,SAAlB;EAA0B,aAAU;EAAkB,eAAY;EAA2B,GAAI;EAAS;;AAGnH,MAAa,kBAAkB,EAAE,QAAQ,UAAU,WAAW,mBAAmB,GAAG,OAAO,UAAU,aAAa,GAAG,QAAQ,SAAS,GAAG,YAAiC;AACxK,QACE,oBAAC,iBAAiB,QAAlB,YACE,oBAAC,iBAAiB,SAAlB;EACS;EACW;EAClB,aAAU;EACV,eAAY;EACN;EACM;EACZ,WAAW,GACT,mKACA,mLACA,uKACA,iIACA,gFACA,UACD;EACD,OACE,EACE,mBAAmB,OAAO,UAAU,WAAW,GAAG,MAAM,MAAM,UAAU,UAAU,UAAU,OAC7F;EAEH,GAAI;EACJ,GACsB;;AAI9B,MAAa,iBAAiB,EAAE,GAAG,YAAsE;AACvG,QAAO,oBAAC,iBAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;EAAS"}

package/dist/RadioButton.js

@@ -15,7 +15,10 @@ const RadioButton = ({ asChild = false, activeColor = "default", activeTextColor
 	};
 	const baseProps = {
 		...rest,
-		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 data-[variant=outline]:[--color-toggle-border:var(--color-toggle-outline-border) 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`, 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),
+		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),
 		style: {
 			...getActiveColorStyle(activeColor, activeTextColor),
 			...style