@spear-ai/spectral 1.9.0 → 1.10.0

package/dist/MultiSelect/MultiSelectBase.js

@@ -1,406 +1,334 @@
 "use client";
 import "../styles/main.css";
-import { jsxs as c, jsx as s, Fragment as ce } from "react/jsx-runtime";
-import "../Icons/AnalyzeIcon.js";
-import "../Icons/AnnotationsIcon.js";
-import "../Icons/ApprovedIcon.js";
-import "../Icons/ArrowDownIcon.js";
-import "../Icons/ArrowUpIcon.js";
-import "../Icons/BoxToolIcon.js";
-import "../Icons/CalendarIcon.js";
-import "../Icons/CheckCircleIcon.js";
-import "../Icons/CheckSquareIcon.js";
-import { CheckmarkIcon as pe } from "../Icons/CheckmarkIcon.js";
-import { ChevronDownIcon as ue } from "../Icons/ChevronDownIcon.js";
-import "../Icons/ChevronUpIcon.js";
-import "../Icons/ClockIcon.js";
-import "../Icons/CloseCircleIcon.js";
-import { CloseIcon as W } from "../Icons/CloseIcon.js";
-import "../Icons/DashboardIcon.js";
-import "../Icons/DatabaseIcon.js";
-import "../Icons/DeleteIcon.js";
-import "../Icons/DurationIcon.js";
-import "../Icons/EditIcon.js";
-import "../Icons/EmailIcon.js";
-import "../Icons/EraserIcon.js";
-import "../Icons/ErrorIcon.js";
-import "../Icons/EyeClosedIcon.js";
-import "../Icons/EyeClosedIcon2.js";
-import "../Icons/EyeOpenIcon.js";
-import "../Icons/FileDownloadIcon.js";
-import "../Icons/GoToFirstIcon.js";
-import "../Icons/GoToLastIcon.js";
-import "../Icons/HarmonicCursorsIcon.js";
-import "../Icons/InfoIcon.js";
-import "../Icons/KeyboardIcon.js";
-import "../Icons/LabelIcon.js";
-import "../Icons/LassoIcon.js";
-import "../Icons/LineToolIcon.js";
-import "../Icons/LiveViewIcon.js";
-import { LoaderIcon as me } from "../Icons/LoaderIcon.js";
-import "../Icons/LocationIcon.js";
-import "../Icons/LogoutIcon.js";
-import "../Icons/MeasureIcon.js";
-import "../Icons/MessagesIcon.js";
-import "../Icons/MetadataIcon.js";
-import "../Icons/MinusIcon.js";
-import "../Icons/OntologyIcon.js";
-import "../Icons/PanelIconClose.js";
-import "../Icons/PanelIconOpen.js";
-import "../Icons/PlayIcon.js";
-import "../Icons/PlusIcon.js";
-import "../Icons/PolygonIcon.js";
-import "../Icons/ResetIcon.js";
-import "../Icons/ReviewedIcon.js";
-import "../Icons/ScissorsIcon.js";
-import { SearchIcon as fe } from "../Icons/SearchIcon.js";
-import "../Icons/SettingsIcon.js";
-import "../Icons/SortAscendingIcon.js";
-import "../Icons/SortAtoZIcon.js";
-import "../Icons/SortDescendingIcon.js";
-import "../Icons/SortZtoAIcon.js";
-import "../Icons/StackIcon.js";
-import "../Icons/StarIcon.js";
-import "../Icons/TrashIcon.js";
-import "../Icons/UndoIcon.js";
-import "../Icons/User2Icon.js";
-import "../Icons/UserIcon.js";
-import "../Icons/WarningIcon.js";
-import "../Icons/ZoomAllIcon.js";
-import "../Icons/ZoomXIcon.js";
-import "../Icons/ZoomYIcon.js";
-import { R as be, T as ge, P as he, C as xe } from "../index-Bv2OIg5P.js";
-import { ErrorMessage as ye } from "../utils/formFieldUtils.js";
-import { cn as y } from "../utils/twUtils.js";
-import { useId as ve, useState as V, useRef as we, useMemo as v, useCallback as w, useEffect as Ne } from "react";
-const Ie = "h-4 w-4", Ce = (b) => ({
-  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: ""
-})[b], ke = (b, g, m) => y(
-  "flex min-h-12 max-h-[5.5rem] w-full items-center justify-between rounded-lg border border-input-border bg-input-bg px-4 py-2 text-sm",
-  "hover:border-input-border--hover focus-visible:border-input-border--focus",
-  "focus-visible:outline focus-visible:outline-accent focus-visible:outline-offset-2 focus:outline-none",
-  "disabled:cursor-not-allowed disabled:opacity-50 disabled:border-input-border--disabled disabled:bg-input-bg--disabled",
-  "transition duration-200 text-input-text overflow-hidden",
-  g && "border-input-border--focus",
-  Ce(b),
-  m
-), De = () => y(
-  "z-50 max-h-80 overflow-hidden rounded-lg border border-input-border bg-input-bg shadow-lg",
-  "motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out",
-  "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 = (b, g, m, C, N, S, F, j, E) => {
-  const [t, d] = V(-1), r = v(() => {
-    const o = [];
-    return F && o.push({ type: "search" }), j && o.push({ type: "select-all" }), b.forEach((p, f) => {
-      p.disabled || o.push({ type: "option", index: f, value: p.value });
-    }), o;
-  }, [b, F, j, E]), x = w(
-    (o) => {
-      if (o < 0 || o >= r.length) return;
-      r[o].type === "search" && S.current?.focus();
-    },
-    [r, S]
-  ), M = w(
-    (o) => {
-      const p = t >= 0 && t < r.length ? r[t] : null;
-      if (o.key === " " && p?.type === "search" || o.key === "Enter" && p?.type === "search")
-        return;
-      const n = {
-        ArrowDown: () => {
-          o.preventDefault();
-          const l = Math.min(t + 1, r.length - 1);
-          d(l), x(l);
-        },
-        ArrowUp: () => {
-          o.preventDefault();
-          const l = Math.max(t - 1, 0);
-          d(l), x(l);
-        },
-        Tab: () => {
-          if (o.shiftKey)
-            if (t <= 0)
-              m();
-            else {
-              o.preventDefault();
-              const l = t - 1;
-              d(l), x(l);
-            }
-          else if (t >= r.length - 1)
-            m();
-          else {
-            o.preventDefault();
-            const l = t + 1;
-            d(l), x(l);
-          }
-        },
-        Enter: () => {
-          if (o.preventDefault(), t >= 0 && t < r.length) {
-            const l = r[t];
-            l.type === "select-all" ? N() : l.type === "clear-all" ? g() : l.type === "option" && C(l.value);
-          }
-        },
-        " ": () => {
-          if (o.preventDefault(), t >= 0 && t < r.length) {
-            const l = r[t];
-            l.type === "select-all" ? N() : l.type === "clear-all" ? g() : l.type === "option" && C(l.value);
-          }
-        },
-        Escape: () => {
-          o.preventDefault(), m();
-        }
-      }[o.key];
-      n && n();
-    },
-    [r, t, C, N, g, m, x]
-  ), P = w(
-    (o) => {
-      if (t < 0 || t >= r.length) return !1;
-      const p = r[t];
-      return p.type === "option" && p.index === o;
-    },
-    [t, r]
-  ), K = v(() => t < 0 || t >= r.length ? !1 : r[t].type === "search", [t, r]), L = v(() => t < 0 || t >= r.length ? !1 : r[t].type === "select-all", [t, r]), k = v(() => t < 0 || t >= r.length ? !1 : r[t].type === "clear-all", [t, r]);
-  return {
-    focusedIndex: t,
-    setFocusedIndex: d,
-    handleKeyDown: M,
-    getOptionFocusIndex: P,
-    isSearchFocused: K,
-    isSelectAllFocused: L,
-    isClearAllFocused: k
-  };
-}, Se = ({
-  className: b,
-  clearAllLabel: g = "Clear all",
-  closeOnSelect: m = !1,
-  emptyMessage: C = "No options found",
-  errorMessage: N,
-  id: S,
-  label: F,
-  loadingMessage: j = "Loading options…",
-  maxCount: E = 3,
-  name: t,
-  onChange: d,
-  options: r = [],
-  placeholder: x = "Select options",
-  ref: M,
-  searchPlaceholder: P = "Search options…",
-  selectAllLabel: K = "Select all",
-  showClearAll: L = !0,
-  showSearch: k = !0,
-  showSelectAll: o = !0,
-  sortAlphabetically: p = !1,
-  state: f = "default",
-  value: n = [],
-  "aria-label": l,
-  "aria-describedby": X,
-  ...H
-}) => {
-  const Y = ve(), z = S ?? `${t}-${Y}`, _ = `${z}-listbox`, G = `${z}-error`, [h, T] = V(!1), [$, ee] = V(""), B = we(null), U = H.disabled ?? f === "disabled", te = f === "loading", re = f === "error", D = v(() => {
-    let e = r.filter((a) => a.label.toLowerCase().includes($.toLowerCase()));
-    return p && (e = [...e].sort((a, i) => a.label.localeCompare(i.label))), e;
-  }, [r, $, p]), O = v(() => {
-    const e = {}, a = [];
-    return D.forEach((i) => {
-      i.group ? (e[i.group] || (e[i.group] = []), e[i.group].push(i)) : a.push(i);
-    }), { groups: e, ungrouped: a, hasGroups: Object.keys(e).length > 0 };
-  }, [D]), R = w(
-    (e) => {
-      if (r.find((u) => u.value === e)?.disabled) return;
-      const i = n.includes(e) ? n.filter((u) => u !== e) : [...n, e];
-      d(i), m && T(!1);
-    },
-    [r, n, d, m]
-  ), Z = w(() => {
-    const e = r.filter((i) => !i.disabled).map((i) => i.value), a = e.every((i) => n.includes(i));
-    d(a ? [] : e);
-  }, [r, n, d]), q = w(() => {
-    d([]);
-  }, [d]), J = v(() => r.filter((e) => !e.disabled).map((e) => e.value), [r]), ie = J.length > 0 && J.every((e) => n.includes(e)), { getOptionFocusIndex: se, handleKeyDown: oe, isSelectAllFocused: le, setFocusedIndex: A } = Oe(
-    D,
-    q,
-    () => T(!1),
-    R,
-    Z,
-    B,
-    k,
-    o,
-    !1
-    // No separate clear-all button in dropdown
-  );
-  Ne(() => {
-    A(h ? 0 : -1);
-  }, [h, A]);
-  const ae = w((e) => {
-    ee(e.target.value);
-  }, []), ne = () => {
-    if (n.length === 0)
-      return /* @__PURE__ */ s("span", { className: "text-input-text-placeholder flex min-h-8 items-center", children: x });
-    const e = n.slice(0, E), a = n.length - E;
-    return /* @__PURE__ */ c("div", { className: "flex flex-wrap items-center gap-1 overflow-hidden", children: [
-      e.map((i) => {
-        const u = r.find((I) => I.value === i);
-        return u ? /* @__PURE__ */ c("span", { className: "bg-input-bg--selected text-input-text inline-flex max-w-48 items-center gap-1 rounded-md px-2 py-1 text-xs", children: [
-          /* @__PURE__ */ s("span", { className: "truncate", children: u.label }),
-          /* @__PURE__ */ s(
-            "button",
-            {
-              "aria-label": `Remove ${u.label}`,
-              className: "hover:text-danger cursor-pointer rounded-sm",
-              "data-testid": "spectral-multiselect-remove-item-button",
-              onClick: (I) => {
-                I.preventDefault(), I.stopPropagation(), R(i);
-              },
-              onPointerDown: (I) => {
-                I.stopPropagation();
-              },
-              type: "button",
-              children: /* @__PURE__ */ s(W, { size: 12 })
-            }
-          )
-        ] }, i) : null;
-      }),
-      a > 0 && /* @__PURE__ */ c("span", { className: "text-input-text-secondary flex items-center py-1 text-xs", children: [
-        "+",
-        a,
-        " more"
-      ] })
-    ] });
-  }, Q = (e, a) => {
-    const i = n.includes(e.value), u = se(a);
-    return /* @__PURE__ */ c(
-      "button",
-      {
-        className: y(
-          "hover:bg-input-bg--hover focus-visible:bg-input-bg--hover flex w-full items-center gap-3 px-3 py-2 text-left text-sm focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-          u && "bg-input-bg--hover",
-          i && "text-input-text font-medium"
-        ),
-        disabled: e.disabled,
-        onClick: () => R(e.value),
-        type: "button",
-        children: [
-          /* @__PURE__ */ s("div", { "data-testid": "spectral-multiselect-selected-indicator", className: y("border-input-border flex h-4 w-4 items-center justify-center rounded border", i && "bg-primary border-primary"), children: i && /* @__PURE__ */ s(pe, { size: 12 }) }),
-          /* @__PURE__ */ s("span", { children: e.label })
-        ]
-      },
-      e.value
-    );
-  }, de = () => ({
-    "--multiselect-border-radius": "0.5rem",
-    "--multiselect-trigger-height": "3rem",
-    "--multiselect-dropdown-max-height": "20rem"
-  });
-  return /* @__PURE__ */ c("div", { className: "w-full", "data-testid": "spectral-multiselect-root", children: [
-    /* @__PURE__ */ s(be, { open: h, onOpenChange: T, children: /* @__PURE__ */ c("div", { className: "relative", "data-testid": "spectral-multiselect-wrapper", onKeyDown: h ? oe : void 0, role: "none", children: [
-      /* @__PURE__ */ s(ge, { asChild: !0, children: /* @__PURE__ */ c(
-        "button",
-        {
-          "aria-controls": h ? _ : void 0,
-          "aria-describedby": [re ? G : null, X].filter(Boolean).join(" ") || void 0,
-          "aria-expanded": h,
-          "aria-label": l ?? F,
-          className: ke(f, h, b),
-          "data-state": f,
-          "data-testid": "spectral-multiselect-trigger",
-          disabled: U,
-          id: z,
-          name: t,
-          ref: M,
-          role: "combobox",
-          style: de(),
-          type: "button",
-          ...H,
-          children: [
-            /* @__PURE__ */ s("div", { className: "min-w-0 flex-1 overflow-hidden", "data-testid": "spectral-multiselect-selected-items", children: ne() }),
-            /* @__PURE__ */ s("div", { className: "ml-2 flex shrink-0 items-center gap-2", children: /* @__PURE__ */ s(ue, { className: y("text-input-icon transition-transform duration-200", h && "rotate-180"), size: 20 }) })
-          ]
-        }
-      ) }),
-      L && n.length > 0 && /* @__PURE__ */ s(
-        "button",
-        {
-          "aria-label": "Clear all selections",
-          className: "text-input-icon hover:text-input-icon--hover focus-visible:ring-accent absolute top-1/2 right-10 z-10 -translate-y-1/2 cursor-pointer rounded-sm focus-visible:ring-2 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50",
-          "data-testid": "spectral-multiselect-clear-all-button",
-          disabled: U,
-          onClick: (e) => {
-            e.stopPropagation(), q(), document.getElementById(z)?.focus();
-          },
-          type: "button",
-          children: /* @__PURE__ */ s(W, { size: 12 })
-        }
-      ),
-      /* @__PURE__ */ s(he, { children: /* @__PURE__ */ s(
-        xe,
-        {
-          align: "start",
-          avoidCollisions: !0,
-          className: De(),
-          collisionPadding: 10,
-          "data-testid": "spectral-multiselect-dropdown",
-          onOpenAutoFocus: (e) => {
-            e.preventDefault(), k && B.current?.focus();
-          },
-          side: "bottom",
-          sideOffset: 4,
-          style: { width: "var(--radix-popover-trigger-width)" },
-          children: /* @__PURE__ */ c("div", { className: "p-1", children: [
-            k && /* @__PURE__ */ c("div", { className: "relative mb-2", children: [
-              /* @__PURE__ */ s(fe, { className: y(Ie, "text-input-icon absolute top-1/2 left-3 -translate-y-1/2") }),
-              /* @__PURE__ */ s(
-                "input",
-                {
-                  "aria-label": "Search options",
-                  className: "border-input-border bg-input-bg focus-visible:border-input-border--focus w-full rounded-md border py-2 pr-3 pl-9 text-sm focus-visible:ring-1 focus-visible:ring-black focus-visible:outline-none",
-                  "data-testid": "spectral-multiselect-search-input",
-                  onChange: ae,
-                  placeholder: P,
-                  ref: B,
-                  type: "text",
-                  value: $
-                }
-              )
-            ] }),
-            /* @__PURE__ */ s("div", { className: "max-h-64 overflow-y-auto", id: _, role: "listbox", "aria-multiselectable": "true", children: te ? /* @__PURE__ */ c("div", { "data-testid": "spectral-multiselect-loading", className: "text-input-text-secondary flex items-center justify-center gap-2 py-6 text-sm", children: [
-              /* @__PURE__ */ s(me, {}),
-              j
-            ] }) : D.length === 0 ? /* @__PURE__ */ s("div", { "data-testid": "spectral-multiselect-empty-message", className: "text-input-text-secondary py-6 text-center text-sm", children: C }) : /* @__PURE__ */ c(ce, { children: [
-              o && /* @__PURE__ */ c("div", { className: "mb-1", children: [
-                /* @__PURE__ */ s(
-                  "button",
-                  {
-                    className: y("text-input-text-secondary hover:bg-input-bg--hover flex w-full items-center gap-3 px-3 py-2 text-sm font-medium focus:outline-none", le && "bg-input-bg--hover"),
-                    "data-testid": "spectral-multiselect-select-all-button",
-                    onClick: Z,
-                    type: "button",
-                    children: ie ? g : K
-                  }
-                ),
-                /* @__PURE__ */ s("div", { className: "bg-input-border mx-3 my-1 h-px" })
-              ] }),
-              O.ungrouped.length > 0 && /* @__PURE__ */ s("div", { className: "mb-1", children: O.ungrouped.map((e, a) => Q(e, a)) }),
-              Object.entries(O.groups).map(([e, a]) => /* @__PURE__ */ c("div", { className: "mb-1", "data-testid": "spectral-multiselect-group", children: [
-                (O.ungrouped.length > 0 || Object.keys(O.groups).indexOf(e) > 0) && /* @__PURE__ */ s("div", { className: "bg-input-border mx-3 my-1 h-px" }),
-                /* @__PURE__ */ s("div", { "data-testid": "spectral-multiselect-group-name", className: "text-input-text-secondary px-3 py-1 text-xs font-semibold tracking-wide uppercase", children: e }),
-                a.map((i, u) => Q(i, D.indexOf(i)))
-              ] }, e))
-            ] }) })
-          ] })
-        }
-      ) })
-    ] }) }),
-    f === "error" && N && /* @__PURE__ */ s(ye, { dataTestId: "spectral-multiselect-error-message", id: G, message: N })
-  ] });
-};
-Se.displayName = "MultiSelectBase";
-export {
-  Se as MultiSelectBase
+import { CheckmarkIcon as e } from "../Icons/CheckmarkIcon.js";
+import { ChevronDownIcon as t } from "../Icons/ChevronDownIcon.js";
+import { CloseIcon as n } from "../Icons/CloseIcon.js";
+import { LoaderIcon as r } from "../Icons/LoaderIcon.js";
+import { SearchIcon as i } from "../Icons/SearchIcon.js";
+import { t as a } from "../twUtils-VNWgstKL.js";
+import { ErrorMessage as o } from "../utils/formFieldUtils.js";
+import { a as s, i as c, n as l, r as u } from "../dist-BtdmHAzK.js";
+import { useCallback as d, useEffect as f, useId as p, useMemo as m, useRef as ee, useState as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/components/MultiSelect/MultiSelectBase.tsx
+var te = "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], 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), x = () => a("max-h-80 rounded-lg shadow-lg z-50 overflow-hidden border border-input-border bg-input-bg", "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)"), S = (e, t, n, r, i, a, o, s, c) => {
+	let [l, u] = h(-1), f = m(() => {
+		let t = [];
+		return o && t.push({ type: "search" }), s && t.push({ type: "select-all" }), e.forEach((e, n) => {
+			e.disabled || t.push({
+				type: "option",
+				index: n,
+				value: e.value
+			});
+		}), c && t.push({ type: "clear-all" }), t;
+	}, [
+		e,
+		o,
+		s,
+		c
+	]), p = d((e) => {
+		e < 0 || e >= f.length || f[e].type === "search" && a.current?.focus();
+	}, [f, a]);
+	return {
+		focusedIndex: l,
+		setFocusedIndex: u,
+		handleKeyDown: d((e) => {
+			let a = l >= 0 && l < f.length ? f[l] : null;
+			if (e.key === " " && a?.type === "search" || e.key === "Enter" && a?.type === "search") return;
+			let o = {
+				ArrowDown: () => {
+					e.preventDefault();
+					let t = Math.min(l + 1, f.length - 1);
+					u(t), p(t);
+				},
+				ArrowUp: () => {
+					e.preventDefault();
+					let t = Math.max(l - 1, 0);
+					u(t), p(t);
+				},
+				Tab: () => {
+					if (e.shiftKey) if (l <= 0) n();
+					else {
+						e.preventDefault();
+						let t = l - 1;
+						u(t), p(t);
+					}
+					else if (l >= f.length - 1) n();
+					else {
+						e.preventDefault();
+						let t = l + 1;
+						u(t), p(t);
+					}
+				},
+				Enter: () => {
+					if (e.preventDefault(), l >= 0 && l < f.length) {
+						let e = f[l];
+						e.type === "select-all" ? i() : e.type === "clear-all" ? t() : e.type === "option" && r(e.value);
+					}
+				},
+				" ": () => {
+					if (e.preventDefault(), l >= 0 && l < f.length) {
+						let e = f[l];
+						e.type === "select-all" ? i() : e.type === "clear-all" ? t() : e.type === "option" && r(e.value);
+					}
+				},
+				Escape: () => {
+					e.preventDefault(), n();
+				}
+			}[e.key];
+			o && o();
+		}, [
+			f,
+			l,
+			r,
+			i,
+			t,
+			n,
+			p
+		]),
+		getOptionFocusIndex: d((e) => {
+			if (l < 0 || l >= f.length) return !1;
+			let t = f[l];
+			return t.type === "option" && t.index === e;
+		}, [l, f]),
+		isSearchFocused: m(() => l < 0 || l >= f.length ? !1 : f[l].type === "search", [l, f]),
+		isSelectAllFocused: m(() => l < 0 || l >= f.length ? !1 : f[l].type === "select-all", [l, f]),
+		isClearAllFocused: m(() => l < 0 || l >= f.length ? !1 : f[l].type === "clear-all", [l, f])
+	};
+}, C = ({ className: y, clearAllLabel: C = "Clear all", closeOnSelect: w = !1, emptyMessage: ne = "No options found", errorMessage: T, id: re, label: ie, loadingMessage: ae = "Loading options…", maxCount: E = 3, name: D, onChange: O, options: k = [], placeholder: oe = "Select options", ref: se, searchPlaceholder: ce = "Search options…", selectAllLabel: le = "Select all", showClearAll: ue = !0, showSearch: A = !0, showSelectAll: j = !0, sortAlphabetically: M = !1, state: N = "default", value: P = [], "aria-label": de, "aria-describedby": fe, ...F }) => {
+	let I = p(), L = re ?? `${D}-${I}`, R = `${L}-listbox`, z = `${L}-error`, [B, V] = h(!1), [H, pe] = h(""), U = ee(null), W = F.disabled ?? N === "disabled", me = N === "loading", he = N === "error", G = m(() => {
+		let e = k.filter((e) => e.label.toLowerCase().includes(H.toLowerCase()));
+		return M && (e = [...e].sort((e, t) => e.label.localeCompare(t.label))), e;
+	}, [
+		k,
+		H,
+		M
+	]), K = m(() => {
+		let e = {}, t = [];
+		return G.forEach((n) => {
+			n.group ? (e[n.group] || (e[n.group] = []), e[n.group].push(n)) : t.push(n);
+		}), {
+			groups: e,
+			ungrouped: t,
+			hasGroups: Object.keys(e).length > 0
+		};
+	}, [G]), q = d((e) => {
+		k.find((t) => t.value === e)?.disabled || (O(P.includes(e) ? P.filter((t) => t !== e) : [...P, e]), w && V(!1));
+	}, [
+		k,
+		P,
+		O,
+		w
+	]), J = d(() => {
+		let e = k.filter((e) => !e.disabled).map((e) => e.value);
+		e.every((e) => P.includes(e)) ? O([]) : O(e);
+	}, [
+		k,
+		P,
+		O
+	]), Y = d(() => {
+		O([]);
+	}, [O]), X = m(() => k.filter((e) => !e.disabled).map((e) => e.value), [k]), ge = X.length > 0 && X.every((e) => P.includes(e)), { getOptionFocusIndex: _e, handleKeyDown: ve, isSelectAllFocused: Z, setFocusedIndex: Q } = S(G, Y, () => V(!1), q, J, U, A, j, !1);
+	f(() => {
+		Q(B ? 0 : -1);
+	}, [B, Q]);
+	let ye = d((e) => {
+		pe(e.target.value);
+	}, []), be = () => {
+		if (P.length === 0) return /* @__PURE__ */ _("span", {
+			className: "min-h-8 flex items-center text-input-text-placeholder",
+			children: oe
+		});
+		let e = P.slice(0, E), t = P.length - E;
+		return /* @__PURE__ */ v("div", {
+			className: "gap-1 flex flex-wrap items-center overflow-hidden",
+			children: [e.map((e) => {
+				let t = k.find((t) => t.value === e);
+				return t ? /* @__PURE__ */ v("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", {
+						className: "truncate",
+						children: t.label
+					}), /* @__PURE__ */ _("button", {
+						"aria-label": `Remove ${t.label}`,
+						className: "hover:text-danger rounded-sm cursor-pointer",
+						"data-testid": "spectral-multiselect-remove-item-button",
+						onClick: (t) => {
+							t.preventDefault(), t.stopPropagation(), q(e);
+						},
+						onPointerDown: (e) => {
+							e.stopPropagation();
+						},
+						type: "button",
+						children: /* @__PURE__ */ _(n, { size: 12 })
+					})]
+				}, e) : null;
+			}), t > 0 && /* @__PURE__ */ v("span", {
+				className: "text-input-text-secondary text-xs py-1 flex items-center",
+				children: [
+					"+",
+					t,
+					" more"
+				]
+			})]
+		});
+	}, $ = (t, n) => {
+		let r = P.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", _e(n) && "bg-input-bg--hover", r && "font-medium text-input-text"),
+			disabled: t.disabled,
+			onClick: () => q(t.value),
+			type: "button",
+			children: [/* @__PURE__ */ _("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 })]
+		}, t.value);
+	}, xe = () => ({
+		"--multiselect-border-radius": "0.5rem",
+		"--multiselect-trigger-height": "3rem",
+		"--multiselect-dropdown-max-height": "20rem"
+	});
+	return /* @__PURE__ */ v("div", {
+		className: "w-full",
+		"data-testid": "spectral-multiselect-root",
+		children: [/* @__PURE__ */ _(c, {
+			open: B,
+			onOpenChange: V,
+			children: /* @__PURE__ */ v("div", {
+				className: "relative",
+				"data-testid": "spectral-multiselect-wrapper",
+				onKeyDown: B ? ve : void 0,
+				role: "none",
+				children: [
+					/* @__PURE__ */ _(s, {
+						asChild: !0,
+						children: /* @__PURE__ */ v("button", {
+							"aria-controls": B ? R : void 0,
+							"aria-describedby": [he ? z : null, fe].filter(Boolean).join(" ") || void 0,
+							"aria-expanded": B,
+							"aria-label": de ?? ie,
+							className: b(N, B, y),
+							"data-state": N,
+							"data-testid": "spectral-multiselect-trigger",
+							disabled: W,
+							id: L,
+							name: D,
+							ref: se,
+							role: "combobox",
+							style: xe(),
+							type: "button",
+							...F,
+							children: [/* @__PURE__ */ _("div", {
+								className: "min-w-0 flex-1 overflow-hidden",
+								"data-testid": "spectral-multiselect-selected-items",
+								children: be()
+							}), /* @__PURE__ */ _("div", {
+								className: "gap-2 ml-2 flex shrink-0 items-center",
+								children: /* @__PURE__ */ _(t, {
+									className: a("text-input-icon transition-transform duration-200", B && "rotate-180"),
+									size: 20
+								})
+							})]
+						})
+					}),
+					ue && P.length > 0 && /* @__PURE__ */ _("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",
+						disabled: W,
+						onClick: (e) => {
+							e.stopPropagation(), Y(), document.getElementById(L)?.focus();
+						},
+						type: "button",
+						children: /* @__PURE__ */ _(n, { size: 12 })
+					}),
+					/* @__PURE__ */ _(u, { children: /* @__PURE__ */ _(l, {
+						align: "start",
+						avoidCollisions: !0,
+						className: x(),
+						collisionPadding: 10,
+						"data-testid": "spectral-multiselect-dropdown",
+						onOpenAutoFocus: (e) => {
+							e.preventDefault(), A && U.current?.focus();
+						},
+						side: "bottom",
+						sideOffset: 4,
+						style: { width: "var(--radix-popover-trigger-width)" },
+						children: /* @__PURE__ */ v("div", {
+							className: "p-1",
+							children: [A && /* @__PURE__ */ v("div", {
+								className: "mb-2 relative",
+								children: [/* @__PURE__ */ _(i, { className: a(te, "left-3 text-input-icon absolute top-1/2 -translate-y-1/2") }), /* @__PURE__ */ _("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: ye,
+									placeholder: ce,
+									ref: U,
+									type: "text",
+									value: H
+								})]
+							}), /* @__PURE__ */ _("div", {
+								className: "max-h-64 overflow-y-auto",
+								id: R,
+								role: "listbox",
+								"aria-multiselectable": "true",
+								children: me ? /* @__PURE__ */ v("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, {}), ae]
+								}) : G.length === 0 ? /* @__PURE__ */ _("div", {
+									"data-testid": "spectral-multiselect-empty-message",
+									className: "py-6 text-sm text-input-text-secondary text-center",
+									children: ne
+								}) : /* @__PURE__ */ v(g, { children: [
+									j && /* @__PURE__ */ v("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", Z && "bg-input-bg--hover"),
+											"data-testid": "spectral-multiselect-select-all-button",
+											onClick: J,
+											type: "button",
+											children: ge ? C : le
+										}), /* @__PURE__ */ _("div", { className: "mx-3 my-1 h-px bg-input-border" })]
+									}),
+									K.ungrouped.length > 0 && /* @__PURE__ */ _("div", {
+										className: "mb-1",
+										children: K.ungrouped.map((e, t) => $(e, t))
+									}),
+									Object.entries(K.groups).map(([e, t]) => /* @__PURE__ */ v("div", {
+										className: "mb-1",
+										"data-testid": "spectral-multiselect-group",
+										children: [
+											(K.ungrouped.length > 0 || Object.keys(K.groups).indexOf(e) > 0) && /* @__PURE__ */ _("div", { className: "mx-3 my-1 h-px bg-input-border" }),
+											/* @__PURE__ */ _("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
+											}),
+											t.map((e, t) => $(e, G.indexOf(e)))
+										]
+									}, e))
+								] })
+							})]
+						})
+					}) })
+				]
+			})
+		}), N === "error" && T && /* @__PURE__ */ _(o, {
+			dataTestId: "spectral-multiselect-error-message",
+			id: z,
+			message: T
+		})]
+	});
 };
+C.displayName = "MultiSelectBase";
+//#endregion
+export { C as MultiSelectBase };