@spear-ai/spectral 1.11.2 → 1.11.3

package/dist/Combobox.js

@@ -3,136 +3,141 @@ import "./styles/main.css";
 import { ChevronDownIcon as e } from "./Icons/ChevronDownIcon.js";
 import { LoaderIcon as t } from "./Icons/LoaderIcon.js";
 import { t as n } from "./twUtils-VNWgstKL.js";
-import { EmptyState as ee, ErrorMessage as r, LoadingState as te, WarningMessage as ne, getAriaProps as re, getDropdownSurfaceClasses as ie, getErrorMessageId as ae, getFormFieldCSSProperties as oe, getOptionClasses as i, getTriggerClasses as a, useFormFieldId as o, useFormFieldState as s } from "./utils/formFieldUtils.js";
-import { useUncontrolledState as c } from "./hooks/useUncontrolledState.js";
-import { Label as l } from "./Label.js";
-import { InputGroup as u, InputGroupAddon as d } from "./primitives/input-group.js";
-import { a as f, i as p, n as m, o as h } from "./ComboboxBase-qX-mQhT6.js";
-import { useCallback as g, useRef as _, useState as v } from "react";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { EmptyState as ee, ErrorMessage as te, LoadingState as ne, WarningMessage as re, getAriaProps as ie, getDropdownSurfaceClasses as ae, getErrorMessageId as oe, getFormFieldCSSProperties as se, getOptionClasses as ce, getTriggerClasses as r, useFormFieldId as i, useFormFieldState as a } from "./utils/formFieldUtils.js";
+import { useUncontrolledState as o } from "./hooks/useUncontrolledState.js";
+import { Label as s } from "./Label.js";
+import { InputGroup as c, InputGroupAddon as l } from "./primitives/input-group.js";
+import { useAutoDropdownHorizontalShift as u } from "./utils/dropdownPositioning.js";
+import { a as d, i as f, n as p, o as m } from "./ComboboxBase-qX-mQhT6.js";
+import { useCallback as le, useRef as h, useState as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/components/Combobox/Combobox.tsx
-var x = ({ className: x, disabled: se, defaultValue: ce = "", dropdownWidth: S = "trigger", emptyMessage: C = "No options found.", errorMessage: w, id: T, label: E, labelClassName: D, loadingMessage: O = "Loading…", name: k, onValueChange: A, options: j = [], placeholder: M = "Search…", ref: N, required: P, state: F = "default", value: I, warningMessage: L, "aria-describedby": R, "aria-label": z }) => {
-	process.env.NODE_ENV !== "production" && !E && !z && console.warn("Combobox: provide either `label` or `aria-label` for an accessible name.");
-	let B = _(null), V = _(null), H = o(T, k), U = `${H}-listbox`, W = ae(H), G = `${H}-warning`, le = F === "error" ? W : F === "warning" && L ? G : void 0, { isDisabled: K, isLoading: q, isInvalid: ue } = s(se, F), de = re(F, R, P, le), [J, Y] = v(!1), [fe, X] = v(""), [Z, pe] = c({
-		value: I,
-		defaultValue: ce,
-		onChange: A
-	}), me = j.find((e) => e.value === Z), Q = S === "trigger" || S === "content" ? S : "custom", $ = {
+var y = ({ className: y, disabled: ue, defaultValue: de = "", dropdownWidth: b = "trigger", emptyMessage: x = "No options found.", errorMessage: S, id: C, label: w, labelClassName: T, loadingMessage: E = "Loading…", name: D, onValueChange: O, options: k = [], placeholder: A = "Search…", ref: j, required: M, state: N = "default", value: P, warningMessage: F, "aria-describedby": I, "aria-label": L }) => {
+	process.env.NODE_ENV !== "production" && !w && !L && console.warn("Combobox: provide either `label` or `aria-label` for an accessible name.");
+	let R = h(null), z = h(null), B = i(C, D), V = `${B}-listbox`, H = oe(B), U = `${B}-warning`, fe = N === "error" ? H : N === "warning" && F ? U : void 0, { isDisabled: W, isLoading: G, isInvalid: pe } = a(ue, N), me = ie(N, I, M, fe), [K, q] = g(!1), { dropdownShiftStyle: he, setDropdownElement: ge } = u(K), [J, Y] = g(""), [X, _e] = o({
+		value: P,
+		defaultValue: de,
+		onChange: O
+	}), Z = k.find((e) => e.value === X), ve = !!(Z && J.length === 0), Q = b === "trigger" || b === "content" ? b : "custom", $ = {
 		maxWidth: "calc(100vw - 2rem)",
 		overflowX: "auto",
 		overflowY: "auto"
-	}, he = S === "trigger" ? { width: "100%" } : S === "content" ? {
+	}, ye = b === "trigger" ? { width: "100%" } : b === "content" ? {
 		minWidth: "max-content",
 		width: "max-content",
 		...$
 	} : {
-		width: S,
+		width: b,
 		...$
-	}, ge = (e) => {
-		pe(e === Z ? "" : e), X(""), Y(!1);
-	}, _e = (e) => {
-		e.key === "Escape" && Y(!1);
-	}, ve = g(() => {
+	}, be = (e) => {
+		_e(e === X ? "" : e), Y(""), q(!1);
+	}, xe = (e) => {
+		e.key === "Escape" && q(!1);
+	}, Se = le(() => {
 		requestAnimationFrame(() => {
-			V.current?.contains(document.activeElement) || (Y(!1), X(""));
+			z.current?.contains(document.activeElement) || (q(!1), Y(""));
 		});
-	}, []), ye = () => {
-		K || q || (B.current?.focus(), Y(!0));
-	}, be = () => q ? /* @__PURE__ */ y("div", {
-		id: U,
+	}, []), Ce = () => {
+		W || G || (R.current?.focus(), q(!0));
+	}, we = () => G ? /* @__PURE__ */ _("div", {
+		id: V,
 		role: "listbox",
-		children: /* @__PURE__ */ y(te, { message: O })
-	}) : j.length === 0 ? /* @__PURE__ */ y("div", {
-		id: U,
+		children: /* @__PURE__ */ _(ne, { message: E })
+	}) : k.length === 0 ? /* @__PURE__ */ _("div", {
+		id: V,
 		role: "listbox",
-		children: /* @__PURE__ */ y(ee, { message: C })
-	}) : /* @__PURE__ */ b(f, {
-		id: U,
-		children: [/* @__PURE__ */ y(m, { children: C }), j.map((e) => /* @__PURE__ */ y(p, {
-			className: n(i(!!e.disabled, !1, Z === e.value), "group/command-item relative flex w-full items-center data-[selected=true]:bg-input-bg--hover"),
-			"data-checked": Z === e.value || void 0,
+		children: /* @__PURE__ */ _(ee, { message: x })
+	}) : /* @__PURE__ */ v(d, {
+		id: V,
+		children: [/* @__PURE__ */ _(p, { children: x }), k.map((e) => /* @__PURE__ */ _(f, {
+			className: n(ce(!!e.disabled, !1, X === e.value), "group/command-item relative flex w-full items-center data-[selected=true]:bg-input-bg--hover"),
+			"data-checked": X === e.value || void 0,
 			disabled: e.disabled,
 			onMouseDown: (e) => e.preventDefault(),
-			onSelect: () => ge(e.value),
+			onSelect: () => be(e.value),
 			value: e.label,
-			children: /* @__PURE__ */ y("span", {
+			children: /* @__PURE__ */ _("span", {
 				className: "min-w-0 flex-1 truncate whitespace-nowrap",
 				children: e.label
 			})
 		}, e.value))]
 	});
-	return /* @__PURE__ */ b("div", {
+	return /* @__PURE__ */ v("div", {
 		className: "w-full",
-		ref: N,
+		ref: j,
 		children: [
-			k && /* @__PURE__ */ y("input", {
+			D && /* @__PURE__ */ _("input", {
 				type: "hidden",
-				name: k,
-				value: Z,
-				disabled: K
+				name: D,
+				value: X,
+				disabled: W
 			}),
-			E && /* @__PURE__ */ y(l, {
-				className: n("mb-2 block text-text-primary", D, K && "text-text-secondary"),
+			w && /* @__PURE__ */ _(s, {
+				className: n("mb-2 block text-text-primary", T, W && "text-text-secondary"),
 				"data-testid": "spectral-combobox-label",
-				htmlFor: H,
-				children: E
+				htmlFor: B,
+				children: w
 			}),
-			/* @__PURE__ */ b(h, {
-				ref: V,
-				label: z ?? E,
-				onKeyDown: _e,
+			/* @__PURE__ */ v(m, {
+				ref: z,
+				label: L ?? w,
+				onKeyDown: xe,
 				className: "relative w-full",
-				children: [/* @__PURE__ */ b(u, {
+				children: [/* @__PURE__ */ v(c, {
 					"data-slot": "combobox-content",
-					"data-state": F,
+					"data-state": N,
 					"data-testid": "spectral-combobox-trigger",
-					className: n(a(J, F), "ring-0!", K && "pointer-events-none cursor-not-allowed", x),
-					onClick: ye,
-					style: oe(),
-					children: [/* @__PURE__ */ y(h.Input, {
-						ref: B,
+					className: n(r(K, N), "ring-0!", W && "pointer-events-none cursor-not-allowed", y),
+					onClick: Ce,
+					style: se(),
+					children: [/* @__PURE__ */ _(m.Input, {
+						ref: R,
 						autoComplete: "off",
 						"data-slot": "input-group-control",
-						"aria-controls": U,
-						"aria-expanded": J,
-						"aria-label": z ?? E,
-						className: "min-w-0 px-3 py-1 text-base flex-1 truncate overflow-hidden border-0 bg-transparent whitespace-nowrap text-input-text outline-hidden placeholder:text-input-text! placeholder:opacity-100 focus-visible:ring-0 focus-visible:outline-none",
-						disabled: K,
-						id: H,
-						onBlur: ve,
-						onFocus: () => !K && !q && Y(!0),
-						onValueChange: X,
-						placeholder: me?.label ?? M,
+						"aria-controls": V,
+						"aria-expanded": K,
+						"aria-label": L ?? w,
+						className: n("min-w-0 px-3 py-1 text-base flex-1 truncate overflow-hidden border-0 bg-transparent whitespace-nowrap text-input-text outline-hidden placeholder:opacity-100 focus-visible:ring-0 focus-visible:outline-none", ve ? "placeholder:text-input-text!" : "placeholder:text-input-text-placeholder!"),
+						disabled: W,
+						id: B,
+						onBlur: Se,
+						onFocus: () => !W && !G && q(!0),
+						onValueChange: Y,
+						placeholder: Z?.label ?? A,
 						role: "combobox",
-						value: fe,
-						...de
-					}), /* @__PURE__ */ y(d, {
+						value: J,
+						...me
+					}), /* @__PURE__ */ _(l, {
 						align: "inline-end",
 						className: "cursor-pointer",
-						children: q ? /* @__PURE__ */ y(t, { className: "size-5 motion-safe:animate-spin" }) : /* @__PURE__ */ y(e, { className: n("size-5 shrink-0 transition-transform duration-200", J && "rotate-180") })
+						children: G ? /* @__PURE__ */ _(t, { className: "size-5 motion-safe:animate-spin" }) : /* @__PURE__ */ _(e, { className: n("size-5 shrink-0 transition-transform duration-200", K && "rotate-180") })
 					})]
-				}), /* @__PURE__ */ y("div", {
-					className: n("left-0 mt-1 p-1 absolute top-full z-50 w-full", ie(), "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-top-2 motion-safe:zoom-in-95", !J && "hidden"),
+				}), /* @__PURE__ */ _("div", {
+					className: n("left-0 mt-1 p-1 absolute top-full z-50 w-full", ae(), "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-top-2 motion-safe:zoom-in-95", !K && "hidden"),
 					"data-dropdown-width-mode": Q,
-					"data-dropdown-width-value": Q === "custom" ? S : void 0,
+					"data-dropdown-width-value": Q === "custom" ? b : void 0,
 					"data-testid": "spectral-combobox-content",
-					style: he,
-					children: be()
+					ref: ge,
+					style: {
+						...ye,
+						...he
+					},
+					children: we()
 				})]
 			}),
-			ue && w && /* @__PURE__ */ y(r, {
+			pe && S && /* @__PURE__ */ _(te, {
 				dataTestId: "spectral-combobox-error-message",
-				id: W,
-				message: w
+				id: H,
+				message: S
 			}),
-			F === "warning" && L && /* @__PURE__ */ y(ne, {
+			N === "warning" && F && /* @__PURE__ */ _(re, {
 				dataTestId: "spectral-combobox-warning-message",
-				id: G,
-				message: L
+				id: U,
+				message: F
 			})
 		]
 	});
 };
-x.displayName = "Combobox";
+y.displayName = "Combobox";
 //#endregion
-export { x as Combobox };
+export { y as Combobox };

package/dist/ControlGroup/ControlGroupSelect.js

@@ -81,7 +81,7 @@ var g = "placeholder:text-small! [appearance:textfield] [&::-webkit-inner-spin-b
 		id: B ? L : void 0,
 		style: R ? { minWidth: R } : void 0,
 		children: /* @__PURE__ */ m(c, {
-			className: "min-w-0 block max-w-full truncate text-left whitespace-nowrap text-input-text! data-placeholder:text-input-text!",
+			className: "min-w-0 block max-w-full truncate text-left whitespace-nowrap text-input-text! data-placeholder:text-input-text-placeholder!",
 			placeholder: j
 		})
 	});

package/dist/MultiSelect/MultiSelectBase.js

@@ -8,17 +8,18 @@ import { SearchIcon as i } from "../Icons/SearchIcon.js";
 import { t as a } from "../twUtils-VNWgstKL.js";
 import { ErrorMessage as o, getDropdownSurfaceClasses as s } from "../utils/formFieldUtils.js";
 import { useUncontrolledState as c } from "../hooks/useUncontrolledState.js";
-import { a as l, i as u, n as d, r as f } from "../dist-BtdmHAzK.js";
-import { useCallback as p, useEffect as ee, useId as m, useMemo as h, useRef as te, useState as g } from "react";
-import { Fragment as ne, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { useAutoDropdownHorizontalShift as l } from "../utils/dropdownPositioning.js";
+import { a as u, i as d, n as f, r as ee } from "../dist-BtdmHAzK.js";
+import { useCallback as p, useEffect as te, useId as ne, useMemo as m, useRef as re, useState as h } from "react";
+import { Fragment as ie, jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/components/MultiSelect/MultiSelectBase.tsx
-var re = "h-4 w-4", y = (e) => ({
+var v = "h-4 w-4", y = (e) => ({
 	error: "border-danger hover:border-danger focus-visible:border-danger focus-visible:ring-danger",
 	loading: "cursor-wait border-input-border--disabled",
 	disabled: "cursor-not-allowed opacity-50 border-input-border--disabled bg-input-bg--disabled",
 	default: ""
-})[e], ie = (e, t, n) => a("min-h-12 rounded-lg px-4 py-2 text-sm flex max-h-[5.5rem] w-full items-center justify-between border border-input-border bg-input-bg", "hover:border-input-border--hover focus-visible:border-input-border--focus", "focus:outline-none focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-accent", "disabled:cursor-not-allowed disabled:border-input-border--disabled disabled:bg-input-bg--disabled disabled:opacity-50", "overflow-hidden text-input-text transition duration-200", t && "border-input-border--focus", y(e), n), ae = () => a("max-h-80 z-50 overflow-hidden", s(), "motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:animate-in", "motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:fade-in-0", "motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-95", "motion-safe:data-[side=bottom]:slide-in-from-top-2", "motion-safe:data-[side=top]:slide-in-from-bottom-2", "origin-(--radix-popover-content-transform-origin)"), oe = (e, t, n, r, i, a, o, s, c) => {
-	let [l, u] = g(-1), d = h(() => {
+})[e], b = (e, t, n) => a("min-h-12 rounded-lg px-4 py-2 text-sm flex max-h-[5.5rem] w-full items-center justify-between border border-input-border bg-input-bg", "hover:border-input-border--hover focus-visible:border-input-border--focus", "focus:outline-none focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-accent", "disabled:cursor-not-allowed disabled:border-input-border--disabled disabled:bg-input-bg--disabled disabled:opacity-50", "overflow-hidden text-input-text transition duration-200", t && "border-input-border--focus", y(e), n), ae = () => a("max-h-80 z-50 overflow-hidden", s(), "motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:animate-in", "motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:fade-in-0", "motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-95", "motion-safe:data-[side=bottom]:slide-in-from-top-2", "motion-safe:data-[side=top]:slide-in-from-bottom-2", "origin-(--radix-popover-content-transform-origin)"), oe = (e, t, n, r, i, a, o, s, c) => {
+	let [l, u] = h(-1), d = m(() => {
 		let t = [];
 		return o && t.push({ type: "search" }), s && t.push({ type: "select-all" }), e.forEach((e, n) => {
 			e.disabled || t.push({
@@ -97,23 +98,23 @@ var re = "h-4 w-4", y = (e) => ({
 			let t = d[l];
 			return t.type === "option" && t.index === e;
 		}, [l, d]),
-		isSearchFocused: h(() => l < 0 || l >= d.length ? !1 : d[l].type === "search", [l, d]),
-		isSelectAllFocused: h(() => l < 0 || l >= d.length ? !1 : d[l].type === "select-all", [l, d]),
-		isClearAllFocused: h(() => l < 0 || l >= d.length ? !1 : d[l].type === "clear-all", [l, d])
+		isSearchFocused: m(() => l < 0 || l >= d.length ? !1 : d[l].type === "search", [l, d]),
+		isSelectAllFocused: m(() => l < 0 || l >= d.length ? !1 : d[l].type === "select-all", [l, d]),
+		isClearAllFocused: m(() => l < 0 || l >= d.length ? !1 : d[l].type === "clear-all", [l, d])
 	};
-}, b = ({ className: s, clearAllLabel: y = "Clear all", closeOnSelect: b = !1, dropdownWidth: x = "trigger", emptyMessage: se = "No options found", errorMessage: S, defaultValue: ce = [], id: C, label: le, loadingMessage: ue = "Loading options…", maxCount: w = 3, name: T, onChange: de, options: E = [], placeholder: D = "Select options", ref: O, searchPlaceholder: fe = "Search options…", selectAllLabel: pe = "Select all", showClearAll: me = !0, showSearch: k = !0, showSelectAll: A = !0, sortAlphabetically: j = !1, state: M = "default", value: he, "aria-label": ge, "aria-describedby": _e, ...N }) => {
-	let P = m(), F = C ?? `${T}-${P}`, I = `${F}-listbox`, L = `${F}-error`, [R, z] = g(!1), [B, ve] = g(""), [V, H] = c({
-		value: he,
+}, x = ({ className: s, clearAllLabel: y = "Clear all", closeOnSelect: x = !1, dropdownWidth: S = "trigger", emptyMessage: se = "No options found", errorMessage: C, defaultValue: ce = [], id: le, label: ue, loadingMessage: de = "Loading options…", maxCount: w = 3, name: T, onChange: fe, options: E = [], placeholder: D = "Select options", ref: pe, searchPlaceholder: me = "Search options…", selectAllLabel: he = "Select all", showClearAll: ge = !0, showSearch: O = !0, showSelectAll: k = !0, sortAlphabetically: A = !1, state: j = "default", value: _e, "aria-label": ve, "aria-describedby": M, ...N }) => {
+	let P = ne(), F = le ?? `${T}-${P}`, I = `${F}-listbox`, L = `${F}-error`, [R, z] = h(!1), { dropdownShiftStyle: ye, setDropdownElement: be } = l(R), [B, xe] = h(""), [V, H] = c({
+		value: _e,
 		defaultValue: ce,
-		onChange: de
-	}), U = te(null), W = N.disabled ?? M === "disabled", ye = M === "loading", be = M === "error", xe = x === "trigger" ? "var(--radix-popover-trigger-width)" : x === "content" ? "max-content" : x, G = x === "trigger" || x === "content" ? x : "custom", K = h(() => {
+		onChange: fe
+	}), U = re(null), W = N.disabled ?? j === "disabled", Se = j === "loading", Ce = j === "error", we = S === "trigger" ? "var(--radix-popover-trigger-width)" : S === "content" ? "max-content" : S, G = S === "trigger" || S === "content" ? S : "custom", K = m(() => {
 		let e = E.filter((e) => e.label.toLowerCase().includes(B.toLowerCase()));
-		return j && (e = [...e].sort((e, t) => e.label.localeCompare(t.label))), e;
+		return A && (e = [...e].sort((e, t) => e.label.localeCompare(t.label))), e;
 	}, [
 		E,
 		B,
-		j
-	]), q = h(() => {
+		A
+	]), q = m(() => {
 		let e = {}, t = [];
 		return K.forEach((n) => {
 			n.group ? (e[n.group] || (e[n.group] = []), e[n.group].push(n)) : t.push(n);
@@ -123,9 +124,9 @@ var re = "h-4 w-4", y = (e) => ({
 			hasGroups: Object.keys(e).length > 0
 		};
 	}, [K]), J = p((e) => {
-		E.find((t) => t.value === e)?.disabled || (H(V.includes(e) ? V.filter((t) => t !== e) : [...V, e]), b && z(!1));
+		E.find((t) => t.value === e)?.disabled || (H(V.includes(e) ? V.filter((t) => t !== e) : [...V, e]), x && z(!1));
 	}, [
-		b,
+		x,
 		E,
 		H,
 		V
@@ -138,28 +139,28 @@ var re = "h-4 w-4", y = (e) => ({
 		V
 	]), X = p(() => {
 		H([]);
-	}, [H]), Z = h(() => E.filter((e) => !e.disabled).map((e) => e.value), [E]), Se = Z.length > 0 && Z.every((e) => V.includes(e)), { getOptionFocusIndex: Ce, handleKeyDown: we, isSelectAllFocused: Te, setFocusedIndex: Q } = oe(K, X, () => z(!1), J, Y, U, k, A, !1);
-	ee(() => {
+	}, [H]), Z = m(() => E.filter((e) => !e.disabled).map((e) => e.value), [E]), Te = Z.length > 0 && Z.every((e) => V.includes(e)), { getOptionFocusIndex: Ee, handleKeyDown: De, isSelectAllFocused: Oe, setFocusedIndex: Q } = oe(K, X, () => z(!1), J, Y, U, O, k, !1);
+	te(() => {
 		Q(R ? 0 : -1);
 	}, [R, Q]);
-	let Ee = p((e) => {
-		ve(e.target.value);
-	}, []), De = () => {
-		if (V.length === 0) return /* @__PURE__ */ _("span", {
+	let ke = p((e) => {
+		xe(e.target.value);
+	}, []), Ae = () => {
+		if (V.length === 0) return /* @__PURE__ */ g("span", {
 			className: "min-h-8 flex items-center text-input-text-placeholder",
 			children: D
 		});
 		let e = V.slice(0, w), t = V.length - w;
-		return /* @__PURE__ */ v("div", {
+		return /* @__PURE__ */ _("div", {
 			className: "gap-1 flex flex-wrap items-center overflow-hidden",
 			children: [e.map((e) => {
 				let t = E.find((t) => t.value === e);
-				return t ? /* @__PURE__ */ v("span", {
+				return t ? /* @__PURE__ */ _("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",
-					children: [/* @__PURE__ */ _("span", {
+					children: [/* @__PURE__ */ g("span", {
 						className: "truncate",
 						children: t.label
-					}), /* @__PURE__ */ _("button", {
+					}), /* @__PURE__ */ g("button", {
 						"aria-label": `Remove ${t.label}`,
 						className: "hover:text-danger rounded-sm cursor-pointer",
 						"data-testid": "spectral-multiselect-remove-item-button",
@@ -170,10 +171,10 @@ var re = "h-4 w-4", y = (e) => ({
 							e.stopPropagation();
 						},
 						type: "button",
-						children: /* @__PURE__ */ _(n, { size: 12 })
+						children: /* @__PURE__ */ g(n, { size: 12 })
 					})]
 				}, e) : null;
-			}), t > 0 && /* @__PURE__ */ v("span", {
+			}), t > 0 && /* @__PURE__ */ _("span", {
 				className: "text-input-text-secondary text-xs py-1 flex items-center",
 				children: [
 					"+",
@@ -184,66 +185,66 @@ var re = "h-4 w-4", y = (e) => ({
 		});
 	}, $ = (t, n) => {
 		let r = V.includes(t.value);
-		return /* @__PURE__ */ v("button", {
-			className: a("gap-3 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", Ce(n) && "bg-input-bg--hover", r && "font-medium text-input-text"),
+		return /* @__PURE__ */ _("button", {
+			className: a("gap-3 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", Ee(n) && "bg-input-bg--hover", r && "font-medium text-input-text"),
 			disabled: t.disabled,
 			onClick: () => J(t.value),
 			type: "button",
-			children: [/* @__PURE__ */ _("div", {
+			children: [/* @__PURE__ */ g("div", {
 				"data-testid": "spectral-multiselect-selected-indicator",
 				className: a("w-4 h-4 rounded flex items-center justify-center border border-input-border", r && "bg-primary border-primary"),
-				children: r && /* @__PURE__ */ _(e, { size: 12 })
-			}), /* @__PURE__ */ _("span", { children: t.label })]
+				children: r && /* @__PURE__ */ g(e, { size: 12 })
+			}), /* @__PURE__ */ g("span", { children: t.label })]
 		}, t.value);
-	}, Oe = () => ({
+	}, je = () => ({
 		"--multiselect-border-radius": "0.5rem",
 		"--multiselect-trigger-height": "3rem",
 		"--multiselect-dropdown-max-height": "20rem"
 	});
-	return /* @__PURE__ */ v("div", {
+	return /* @__PURE__ */ _("div", {
 		className: "w-full",
 		"data-testid": "spectral-multiselect-root",
-		children: [/* @__PURE__ */ _(u, {
+		children: [/* @__PURE__ */ g(d, {
 			open: R,
 			onOpenChange: z,
-			children: /* @__PURE__ */ v("div", {
+			children: /* @__PURE__ */ _("div", {
 				className: "relative",
 				"data-testid": "spectral-multiselect-wrapper",
-				onKeyDown: R ? we : void 0,
+				onKeyDown: R ? De : void 0,
 				role: "none",
 				children: [
-					/* @__PURE__ */ _(l, {
+					/* @__PURE__ */ g(u, {
 						asChild: !0,
-						children: /* @__PURE__ */ v("button", {
+						children: /* @__PURE__ */ _("button", {
 							"aria-controls": R ? I : void 0,
-							"aria-describedby": [be ? L : null, _e].filter(Boolean).join(" ") || void 0,
+							"aria-describedby": [Ce ? L : null, M].filter(Boolean).join(" ") || void 0,
 							"aria-expanded": R,
-							"aria-label": ge ?? le,
-							className: ie(M, R, s),
-							"data-state": M,
+							"aria-label": ve ?? ue,
+							className: b(j, R, s),
+							"data-state": j,
 							"data-testid": "spectral-multiselect-trigger",
 							disabled: W,
 							id: F,
 							name: T,
-							ref: O,
+							ref: pe,
 							role: "combobox",
-							style: Oe(),
+							style: je(),
 							type: "button",
 							...N,
-							children: [/* @__PURE__ */ _("div", {
+							children: [/* @__PURE__ */ g("div", {
 								className: "min-w-0 flex-1 overflow-hidden",
 								"data-testid": "spectral-multiselect-selected-items",
-								children: De()
-							}), /* @__PURE__ */ _("div", {
+								children: Ae()
+							}), /* @__PURE__ */ g("div", {
 								className: "gap-2 ml-2 flex shrink-0 items-center",
-								children: /* @__PURE__ */ _(t, {
+								children: /* @__PURE__ */ g(t, {
 									className: a("text-input-icon transition-transform duration-200", R && "rotate-180"),
 									size: 20
 								})
 							})]
 						})
 					}),
-					me && V.length > 0 && /* @__PURE__ */ _("button", {
+					ge && V.length > 0 && /* @__PURE__ */ g("button", {
 						"aria-label": "Clear all selections",
 						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",
 						"data-testid": "spectral-multiselect-clear-all-button",
@@ -252,70 +253,74 @@ var re = "h-4 w-4", y = (e) => ({
 							e.stopPropagation(), X(), document.getElementById(F)?.focus();
 						},
 						type: "button",
-						children: /* @__PURE__ */ _(n, { size: 12 })
+						children: /* @__PURE__ */ g(n, { size: 12 })
 					}),
-					/* @__PURE__ */ _(f, { children: /* @__PURE__ */ _(d, {
+					/* @__PURE__ */ g(ee, { children: /* @__PURE__ */ g(f, {
 						align: "start",
 						avoidCollisions: !0,
 						className: ae(),
 						collisionPadding: 10,
 						"data-dropdown-width-mode": G,
-						"data-dropdown-width-value": G === "custom" ? x : void 0,
+						"data-dropdown-width-value": G === "custom" ? S : void 0,
 						"data-testid": "spectral-multiselect-dropdown",
 						onOpenAutoFocus: (e) => {
-							e.preventDefault(), k && U.current?.focus();
+							e.preventDefault(), O && U.current?.focus();
 						},
 						side: "bottom",
 						sideOffset: 4,
-						style: { width: xe },
-						children: /* @__PURE__ */ v("div", {
+						ref: be,
+						style: {
+							width: we,
+							...ye
+						},
+						children: /* @__PURE__ */ _("div", {
 							className: "p-1",
-							children: [k && /* @__PURE__ */ v("div", {
+							children: [O && /* @__PURE__ */ _("div", {
 								className: "mb-2 relative",
-								children: [/* @__PURE__ */ _(i, { className: a(re, "left-3 text-input-icon absolute top-1/2 -translate-y-1/2") }), /* @__PURE__ */ _("input", {
+								children: [/* @__PURE__ */ g(i, { className: a(v, "left-3 text-input-icon absolute top-1/2 -translate-y-1/2") }), /* @__PURE__ */ g("input", {
 									"aria-label": "Search options",
 									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",
 									"data-testid": "spectral-multiselect-search-input",
-									onChange: Ee,
-									placeholder: fe,
+									onChange: ke,
+									placeholder: me,
 									ref: U,
 									type: "text",
 									value: B
 								})]
-							}), /* @__PURE__ */ _("div", {
+							}), /* @__PURE__ */ g("div", {
 								className: "max-h-64 overflow-y-auto",
 								id: I,
 								role: "listbox",
 								"aria-multiselectable": "true",
-								children: ye ? /* @__PURE__ */ v("div", {
+								children: Se ? /* @__PURE__ */ _("div", {
 									"data-testid": "spectral-multiselect-loading",
 									className: "gap-2 py-6 text-sm text-input-text-secondary flex items-center justify-center",
-									children: [/* @__PURE__ */ _(r, {}), ue]
-								}) : K.length === 0 ? /* @__PURE__ */ _("div", {
+									children: [/* @__PURE__ */ g(r, {}), de]
+								}) : K.length === 0 ? /* @__PURE__ */ g("div", {
 									"data-testid": "spectral-multiselect-empty-message",
 									className: "py-6 text-sm text-input-text-secondary text-center",
 									children: se
-								}) : /* @__PURE__ */ v(ne, { children: [
-									A && /* @__PURE__ */ v("div", {
+								}) : /* @__PURE__ */ _(ie, { children: [
+									k && /* @__PURE__ */ _("div", {
 										className: "mb-1",
-										children: [/* @__PURE__ */ _("button", {
-											className: a("gap-3 px-3 py-2 text-sm font-medium text-input-text-secondary flex w-full items-center hover:bg-input-bg--hover focus:outline-none", Te && "bg-input-bg--hover"),
+										children: [/* @__PURE__ */ g("button", {
+											className: a("gap-3 px-3 py-2 text-sm font-medium text-input-text-secondary flex w-full items-center hover:bg-input-bg--hover focus:outline-none", Oe && "bg-input-bg--hover"),
 											"data-testid": "spectral-multiselect-select-all-button",
 											onClick: Y,
 											type: "button",
-											children: Se ? y : pe
-										}), /* @__PURE__ */ _("div", { className: "mx-3 my-1 h-px bg-input-border" })]
+											children: Te ? y : he
+										}), /* @__PURE__ */ g("div", { className: "mx-3 my-1 h-px bg-input-border" })]
 									}),
-									q.ungrouped.length > 0 && /* @__PURE__ */ _("div", {
+									q.ungrouped.length > 0 && /* @__PURE__ */ g("div", {
 										className: "mb-1",
 										children: q.ungrouped.map((e, t) => $(e, t))
 									}),
-									Object.entries(q.groups).map(([e, t]) => /* @__PURE__ */ v("div", {
+									Object.entries(q.groups).map(([e, t]) => /* @__PURE__ */ _("div", {
 										className: "mb-1",
 										"data-testid": "spectral-multiselect-group",
 										children: [
-											(q.ungrouped.length > 0 || Object.keys(q.groups).indexOf(e) > 0) && /* @__PURE__ */ _("div", { className: "mx-3 my-1 h-px bg-input-border" }),
-											/* @__PURE__ */ _("div", {
+											(q.ungrouped.length > 0 || Object.keys(q.groups).indexOf(e) > 0) && /* @__PURE__ */ g("div", { className: "mx-3 my-1 h-px bg-input-border" }),
+											/* @__PURE__ */ g("div", {
 												"data-testid": "spectral-multiselect-group-name",
 												className: "px-3 py-1 text-xs font-semibold text-input-text-secondary tracking-wide uppercase",
 												children: e
@@ -329,13 +334,13 @@ var re = "h-4 w-4", y = (e) => ({
 					}) })
 				]
 			})
-		}), M === "error" && S && /* @__PURE__ */ _(o, {
+		}), j === "error" && C && /* @__PURE__ */ g(o, {
 			dataTestId: "spectral-multiselect-error-message",
 			id: L,
-			message: S
+			message: C
 		})]
 	});
 };
-b.displayName = "MultiSelectBase";
+x.displayName = "MultiSelectBase";
 //#endregion
-export { b as MultiSelectBase };
+export { x as MultiSelectBase };