@spear-ai/spectral 1.4.26 → 1.4.27

package/dist/MultiSelect/MultiSelectBase.js

@@ -14,7 +14,7 @@ import { ChevronDownIcon as ue } from "../Icons/ChevronDownIcon.js";
 import "../Icons/ChevronUpIcon.js";
 import "../Icons/ClockIcon.js";
 import "../Icons/CloseCircleIcon.js";
-import { CloseIcon as P } from "../Icons/CloseIcon.js";
+import { CloseIcon as T } from "../Icons/CloseIcon.js";
 import "../Icons/DashboardIcon.js";
 import "../Icons/DatabaseIcon.js";
 import "../Icons/DeleteIcon.js";
@@ -64,260 +64,259 @@ import "../Icons/ZoomAllIcon.js";
 import "../Icons/ZoomXIcon.js";
 import "../Icons/ZoomYIcon.js";
 import { ErrorMessage as me } from "../utils/formFieldUtils.js";
-import { cn as f } from "../utils/twUtils.js";
-import { forwardRef as be, useId as fe, useState as L, useRef as _, useMemo as T, useCallback as b, useEffect as ge } from "react";
-import { c as he } from "../createLucideIcon-D4r5Phnh.js";
-const xe = [
+import { cn as x } from "../utils/twUtils.js";
+import { useId as be, useState as L, useRef as $, useMemo as _, useCallback as b, useEffect as fe } from "react";
+import { c as ge } from "../createLucideIcon-D4r5Phnh.js";
+const he = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], ye = he("search", xe), ve = "h-4 w-4", we = (s) => ({
+], xe = ge("search", he), ye = "h-4 w-4", ve = (s) => ({
   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: ""
-})[s], Ne = (s, l, d) => f(
+})[s], we = (s, n, d) => x(
   "flex h-12 w-full items-center justify-between rounded-lg border border-input-border bg-input-bg px-4 py-3 text-sm",
   "hover:border-input-border--hover focus:border-input-border--focus focus:outline-none",
   "focus:ring-2 focus:ring-black focus:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2",
   "disabled:cursor-not-allowed disabled:opacity-50 disabled:border-input-border--disabled disabled:bg-input-bg--disabled",
   "transition duration-200 text-input-text",
-  l && "border-input-border--focus ring-2 ring-black ring-offset-2",
-  we(s),
+  n && "border-input-border--focus ring-2 ring-black ring-offset-2",
+  ve(s),
   d
-), ke = (s) => f(
+), Ne = (s) => x(
   "absolute top-full left-0 right-0 z-50 mt-1 max-h-80 overflow-hidden rounded-lg border border-input-border bg-input-bg shadow-lg",
   "transition-all duration-200 origin-top",
   s ? "scale-100 opacity-100 translate-y-0" : "scale-95 opacity-0 -translate-y-1 pointer-events-none"
-), Ce = (s) => {
-  const l = _(null);
-  return ge(() => {
-    const d = (n) => {
-      l.current && !l.current.contains(n.target) && s();
+), ke = (s) => {
+  const n = $(null);
+  return fe(() => {
+    const d = (l) => {
+      n.current && !n.current.contains(l.target) && s();
     };
     return document.addEventListener("mousedown", d), () => document.removeEventListener("mousedown", d);
-  }, [s]), l;
-}, Ie = (s, l, d) => {
-  const [n, g] = L(-1), I = b(
+  }, [s]), n;
+}, Ce = (s, n, d) => {
+  const [l, y] = L(-1), N = b(
     (u) => {
-      const v = {
+      const k = {
         ArrowDown: () => {
-          u.preventDefault(), g((h) => Math.min(h + 1, s.length - 1));
+          u.preventDefault(), y((f) => Math.min(f + 1, s.length - 1));
         },
         ArrowUp: () => {
-          u.preventDefault(), g((h) => Math.max(h - 1, -1));
+          u.preventDefault(), y((f) => Math.max(f - 1, -1));
         },
         Enter: () => {
-          u.preventDefault(), n >= 0 && s[n] && l(s[n].value);
+          u.preventDefault(), l >= 0 && s[l] && n(s[l].value);
         },
         " ": () => {
-          u.preventDefault(), n >= 0 && s[n] && l(s[n].value);
+          u.preventDefault(), l >= 0 && s[l] && n(s[l].value);
         },
         Escape: () => {
           u.preventDefault(), d();
         }
       }[u.key];
-      v && v();
+      k && k();
     },
-    [s, n, l, d]
+    [s, l, n, d]
   );
-  return { focusedIndex: n, setFocusedIndex: g, handleKeyDown: I };
-}, Se = be(
-  ({
-    className: s,
-    clearAllLabel: l = "Clear all",
-    closeOnSelect: d = !1,
-    emptyMessage: n = "No options found",
-    errorMessage: g,
-    id: I,
-    label: u,
-    loadingMessage: M = "Loading options...",
-    maxCount: v = 3,
-    name: h,
-    onChange: p,
-    options: m = [],
-    placeholder: $ = "Select options",
-    searchPlaceholder: B = "Search options...",
-    selectAllLabel: H = "Select all",
-    showClearAll: V = !0,
-    showSearch: G = !0,
-    showSelectAll: U = !0,
-    sortAlphabetically: R = !1,
-    state: x = "default",
-    value: a = [],
-    "aria-label": Z,
-    "aria-describedby": q,
-    ...z
-  }, J) => {
-    const Q = fe(), S = I || `${h}-${Q}`, K = `${S}-error`, [y, k] = L(!1), [D, W] = L(""), X = Ce(() => k(!1)), A = _(null), O = z.disabled || x === "disabled", Y = x === "loading", ee = x === "error", w = T(() => {
-      let e = m.filter((i) => i.label.toLowerCase().includes(D.toLowerCase()));
-      return R && (e = [...e].sort((i, t) => i.label.localeCompare(t.label))), e;
-    }, [m, D, R]), N = T(() => {
-      const e = {}, i = [];
-      return w.forEach((t) => {
-        t.group ? (e[t.group] || (e[t.group] = []), e[t.group].push(t)) : i.push(t);
-      }), { groups: e, ungrouped: i, hasGroups: Object.keys(e).length > 0 };
-    }, [w]), C = b(
-      (e) => {
-        if (m.find((c) => c.value === e)?.disabled) return;
-        const t = a.includes(e) ? a.filter((c) => c !== e) : [...a, e];
-        p(t), d && k(!1);
-      },
-      [m, a, p, d]
-    ), { focusedIndex: te, handleKeyDown: re } = Ie(w, C, () => k(!1)), ie = b(() => {
-      O || k((e) => (e || setTimeout(() => A.current?.focus(), 0), !e));
-    }, [O]), se = b(() => {
-      const e = m.filter((t) => !t.disabled).map((t) => t.value), i = e.every((t) => a.includes(t));
-      p(i ? [] : e);
-    }, [m, a, p]), j = b(() => {
-      p([]);
-    }, [p]), oe = b((e) => {
-      W(e.target.value);
-    }, []), le = b(
-      (e, i) => {
-        i.stopPropagation(), C(e);
+  return { focusedIndex: l, setFocusedIndex: y, handleKeyDown: N };
+}, Ie = ({
+  ref: s,
+  className: n,
+  clearAllLabel: d = "Clear all",
+  closeOnSelect: l = !1,
+  emptyMessage: y = "No options found",
+  errorMessage: N,
+  id: u,
+  label: M,
+  loadingMessage: k = "Loading options...",
+  maxCount: f = 3,
+  name: z,
+  onChange: p,
+  options: m = [],
+  placeholder: B = "Select options",
+  searchPlaceholder: H = "Search options...",
+  selectAllLabel: V = "Select all",
+  showClearAll: G = !0,
+  showSearch: U = !0,
+  showSelectAll: Z = !0,
+  sortAlphabetically: K = !1,
+  state: g = "default",
+  value: a = [],
+  "aria-label": q,
+  "aria-describedby": J,
+  ...R
+}) => {
+  const Q = be(), S = u || `${z}-${Q}`, A = `${S}-error`, [h, C] = L(!1), [D, W] = L(""), X = ke(() => C(!1)), F = $(null), O = R.disabled || g === "disabled", Y = g === "loading", ee = g === "error", v = _(() => {
+    let e = m.filter((i) => i.label.toLowerCase().includes(D.toLowerCase()));
+    return K && (e = [...e].sort((i, t) => i.label.localeCompare(t.label))), e;
+  }, [m, D, K]), w = _(() => {
+    const e = {}, i = [];
+    return v.forEach((t) => {
+      t.group ? (e[t.group] || (e[t.group] = []), e[t.group].push(t)) : i.push(t);
+    }), { groups: e, ungrouped: i, hasGroups: Object.keys(e).length > 0 };
+  }, [v]), I = b(
+    (e) => {
+      if (m.find((c) => c.value === e)?.disabled) return;
+      const t = a.includes(e) ? a.filter((c) => c !== e) : [...a, e];
+      p(t), l && C(!1);
+    },
+    [m, a, p, l]
+  ), { focusedIndex: te, handleKeyDown: re } = Ce(v, I, () => C(!1)), ie = b(() => {
+    O || C((e) => (e || setTimeout(() => F.current?.focus(), 0), !e));
+  }, [O]), se = b(() => {
+    const e = m.filter((t) => !t.disabled).map((t) => t.value), i = e.every((t) => a.includes(t));
+    p(i ? [] : e);
+  }, [m, a, p]), j = b(() => {
+    p([]);
+  }, [p]), oe = b((e) => {
+    W(e.target.value);
+  }, []), le = b(
+    (e, i) => {
+      i.stopPropagation(), I(e);
+    },
+    [I]
+  ), ne = () => {
+    if (a.length === 0)
+      return /* @__PURE__ */ r("span", { className: "text-input-text-placeholder", children: B });
+    const e = a.slice(0, f), i = a.length - f;
+    return /* @__PURE__ */ o("div", { className: "flex flex-wrap items-center gap-1", children: [
+      e.map((t) => {
+        const c = m.find((E) => E.value === t);
+        return c ? /* @__PURE__ */ o("span", { className: "bg-input-bg--selected text-input-text inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs", children: [
+          c.label,
+          /* @__PURE__ */ r("button", { "aria-label": `Remove ${c.label}`, className: "hover:text-danger focus:outline-none", "data-testid": "spectral-multiselect-remove-item-button", onClick: (E) => le(t, E), type: "button", children: /* @__PURE__ */ r(T, { size: 12 }) })
+        ] }, t) : null;
+      }),
+      i > 0 && /* @__PURE__ */ o("span", { className: "text-input-text-secondary text-xs", children: [
+        "+",
+        i,
+        " more"
+      ] })
+    ] });
+  }, P = (e, i) => {
+    const t = a.includes(e.value);
+    return /* @__PURE__ */ o(
+      "button",
+      {
+        className: x(
+          "hover:bg-input-bg--hover focus:bg-input-bg--hover flex w-full items-center gap-3 px-3 py-2 text-left text-sm focus:outline-none",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          i === te && "bg-input-bg--hover",
+          t && "text-input-text font-medium"
+        ),
+        disabled: e.disabled,
+        onClick: () => I(e.value),
+        type: "button",
+        children: [
+          /* @__PURE__ */ r("div", { "data-testid": "spectral-multiselect-selected-indicator", className: x("border-input-border flex h-4 w-4 items-center justify-center rounded border", t && "bg-primary border-primary"), children: t && /* @__PURE__ */ r(ce, { size: 12 }) }),
+          /* @__PURE__ */ r("span", { children: e.label })
+        ]
       },
-      [C]
-    ), ne = () => {
-      if (a.length === 0)
-        return /* @__PURE__ */ r("span", { className: "text-input-text-placeholder", children: $ });
-      const e = a.slice(0, v), i = a.length - v;
-      return /* @__PURE__ */ o("div", { className: "flex items-center gap-1 flex-wrap", children: [
-        e.map((t) => {
-          const c = m.find((E) => E.value === t);
-          return c ? /* @__PURE__ */ o("span", { className: "inline-flex items-center gap-1 px-2 py-1 bg-input-bg--selected text-input-text rounded-md text-xs", children: [
-            c.label,
-            /* @__PURE__ */ r("button", { "aria-label": `Remove ${c.label}`, className: "hover:text-danger focus:outline-none", "data-testid": "spectral-multiselect-remove-item-button", onClick: (E) => le(t, E), type: "button", children: /* @__PURE__ */ r(P, { size: 12 }) })
-          ] }, t) : null;
-        }),
-        i > 0 && /* @__PURE__ */ o("span", { className: "text-input-text-secondary text-xs", children: [
-          "+",
-          i,
-          " more"
-        ] })
-      ] });
-    }, F = (e, i) => {
-      const t = a.includes(e.value);
-      return /* @__PURE__ */ o(
+      e.value
+    );
+  }, ae = () => ({
+    "--multiselect-border-radius": "0.5rem",
+    "--multiselect-trigger-height": "3rem",
+    "--multiselect-dropdown-max-height": "20rem"
+  });
+  return /* @__PURE__ */ o("div", { className: "w-full", "data-testid": "spectral-multiselect-root", children: [
+    /* @__PURE__ */ o("div", { className: "relative", "data-testid": "spectral-multiselect-wrapper", onKeyDown: h ? re : void 0, ref: X, children: [
+      /* @__PURE__ */ o(
         "button",
         {
-          className: f(
-            "w-full flex items-center gap-3 px-3 py-2 text-sm text-left hover:bg-input-bg--hover focus:bg-input-bg--hover focus:outline-none",
-            "disabled:opacity-50 disabled:cursor-not-allowed",
-            i === te && "bg-input-bg--hover",
-            t && "text-input-text font-medium"
-          ),
-          disabled: e.disabled,
-          onClick: () => C(e.value),
+          "aria-controls": h ? S : void 0,
+          "aria-describedby": [ee ? A : null, J].filter(Boolean).join(" ") || void 0,
+          "aria-expanded": h,
+          "aria-label": q || M,
+          className: we(g, h, n),
+          "data-state": g,
+          "data-testid": "spectral-multiselect-trigger",
+          disabled: O,
+          id: S,
+          name: z,
+          onClick: ie,
+          ref: s,
+          role: "combobox",
+          style: ae(),
           type: "button",
+          ...R,
           children: [
-            /* @__PURE__ */ r("div", { "data-testid": "spectral-multiselect-selected-indicator", className: f("flex items-center justify-center w-4 h-4 border border-input-border rounded", t && "bg-primary border-primary"), children: t && /* @__PURE__ */ r(ce, { size: 12 }) }),
-            /* @__PURE__ */ r("span", { children: e.label })
+            /* @__PURE__ */ r("div", { className: "min-w-0 flex-1", "data-testid": "spectral-multiselect-selected-items", children: ne() }),
+            /* @__PURE__ */ o("div", { className: "ml-2 flex items-center gap-2", children: [
+              a.length > 0 && /* @__PURE__ */ r(
+                "span",
+                {
+                  "aria-label": "Clear all selections",
+                  className: "text-input-icon hover:text-input-icon--hover cursor-pointer focus:outline-none",
+                  "data-testid": "spectral-multiselect-clear-all-button",
+                  onClick: (e) => {
+                    e.stopPropagation(), j();
+                  },
+                  onKeyDown: (e) => {
+                    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), j());
+                  },
+                  tabIndex: 0,
+                  children: /* @__PURE__ */ r(T, { size: 12 })
+                }
+              ),
+              /* @__PURE__ */ r(ue, { className: x("text-input-icon transition-transform duration-200", h && "rotate-180"), size: 20 })
+            ] })
           ]
-        },
-        e.value
-      );
-    }, ae = () => ({
-      "--multiselect-border-radius": "0.5rem",
-      "--multiselect-trigger-height": "3rem",
-      "--multiselect-dropdown-max-height": "20rem"
-    });
-    return /* @__PURE__ */ o("div", { className: "w-full", "data-testid": "spectral-multiselect-root", children: [
-      /* @__PURE__ */ o("div", { className: "relative", "data-testid": "spectral-multiselect-wrapper", onKeyDown: y ? re : void 0, ref: X, children: [
-        /* @__PURE__ */ o(
-          "button",
-          {
-            "aria-controls": y ? S : void 0,
-            "aria-describedby": f(ee && K, q),
-            "aria-expanded": y,
-            "aria-label": Z || u,
-            className: Ne(x, y, s),
-            "data-state": x,
-            "data-testid": "spectral-multiselect-trigger",
-            disabled: O,
-            id: S,
-            name: h,
-            onClick: ie,
-            ref: J,
-            role: "combobox",
-            style: ae(),
-            type: "button",
-            ...z,
-            children: [
-              /* @__PURE__ */ r("div", { className: "flex-1 min-w-0", "data-testid": "spectral-multiselect-selected-items", children: ne() }),
-              /* @__PURE__ */ o("div", { className: "flex items-center gap-2 ml-2", children: [
-                a.length > 0 && /* @__PURE__ */ r(
-                  "span",
-                  {
-                    "aria-label": "Clear all selections",
-                    className: "text-input-icon hover:text-input-icon--hover focus:outline-none cursor-pointer",
-                    "data-testid": "spectral-multiselect-clear-all-button",
-                    onClick: (e) => {
-                      e.stopPropagation(), j();
-                    },
-                    onKeyDown: (e) => {
-                      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), j());
-                    },
-                    tabIndex: 0,
-                    children: /* @__PURE__ */ r(P, { size: 12 })
-                  }
-                ),
-                /* @__PURE__ */ r(ue, { className: f("text-input-icon transition-transform duration-200", y && "rotate-180"), size: 20 })
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ r("div", { className: ke(y), "data-testid": "spectral-multiselect-dropdown", children: /* @__PURE__ */ o("div", { className: "p-1", children: [
-          G && /* @__PURE__ */ o("div", { className: "relative mb-2", children: [
-            /* @__PURE__ */ r(ye, { className: f(ve, "absolute left-3 top-1/2 -translate-y-1/2 text-input-icon") }),
+        }
+      ),
+      /* @__PURE__ */ r("div", { className: Ne(h), "data-testid": "spectral-multiselect-dropdown", children: /* @__PURE__ */ o("div", { className: "p-1", children: [
+        U && /* @__PURE__ */ o("div", { className: "relative mb-2", children: [
+          /* @__PURE__ */ r(xe, { className: x(ye, "text-input-icon absolute top-1/2 left-3 -translate-y-1/2") }),
+          /* @__PURE__ */ r(
+            "input",
+            {
+              "aria-label": "Search options",
+              className: "border-input-border bg-input-bg focus:border-input-border--focus w-full rounded-md border py-2 pr-3 pl-9 text-sm focus:ring-1 focus:ring-black focus:outline-none",
+              "data-testid": "spectral-multiselect-search-input",
+              onChange: oe,
+              placeholder: H,
+              ref: F,
+              type: "text",
+              value: D
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "max-h-64 overflow-y-auto", role: "listbox", "aria-multiselectable": "true", children: Y ? /* @__PURE__ */ o("div", { "data-testid": "spectral-multiselect-loading", className: "text-input-text-secondary flex items-center justify-center gap-2 py-6 text-sm", children: [
+          /* @__PURE__ */ r(pe, {}),
+          k
+        ] }) : v.length === 0 ? /* @__PURE__ */ r("div", { "data-testid": "spectral-multiselect-empty-message", className: "text-input-text-secondary py-6 text-center text-sm", children: y }) : /* @__PURE__ */ o(de, { children: [
+          Z && /* @__PURE__ */ o("div", { className: "mb-1", children: [
             /* @__PURE__ */ r(
-              "input",
+              "button",
               {
-                "aria-label": "Search options",
-                className: "w-full pl-9 pr-3 py-2 text-sm border border-input-border rounded-md bg-input-bg focus:border-input-border--focus focus:outline-none focus:ring-1 focus:ring-black",
-                "data-testid": "spectral-multiselect-search-input",
-                onChange: oe,
-                placeholder: B,
-                ref: A,
-                type: "text",
-                value: D
+                className: "text-input-text-secondary hover:bg-input-bg--hover focus:bg-input-bg--hover flex w-full items-center gap-3 px-3 py-2 text-sm font-medium focus:outline-none",
+                "data-testid": "spectral-multiselect-select-all-button",
+                onClick: se,
+                type: "button",
+                children: V
               }
-            )
+            ),
+            /* @__PURE__ */ r("div", { className: "bg-input-border mx-3 my-1 h-px" })
           ] }),
-          /* @__PURE__ */ r("div", { className: "max-h-64 overflow-y-auto", role: "listbox", "aria-multiselectable": "true", children: Y ? /* @__PURE__ */ o("div", { "data-testid": "spectral-multiselect-loading", className: "flex items-center justify-center gap-2 py-6 text-sm text-input-text-secondary", children: [
-            /* @__PURE__ */ r(pe, {}),
-            M
-          ] }) : w.length === 0 ? /* @__PURE__ */ r("div", { "data-testid": "spectral-multiselect-empty-message", className: "py-6 text-center text-sm text-input-text-secondary", children: n }) : /* @__PURE__ */ o(de, { children: [
-            U && /* @__PURE__ */ o("div", { className: "mb-1", children: [
-              /* @__PURE__ */ r(
-                "button",
-                {
-                  className: "w-full flex items-center gap-3 px-3 py-2 text-sm font-medium text-input-text-secondary hover:bg-input-bg--hover focus:bg-input-bg--hover focus:outline-none",
-                  "data-testid": "spectral-multiselect-select-all-button",
-                  onClick: se,
-                  type: "button",
-                  children: H
-                }
-              ),
-              /* @__PURE__ */ r("div", { className: "mx-3 my-1 h-px bg-input-border" })
-            ] }),
-            N.ungrouped.length > 0 && /* @__PURE__ */ r("div", { className: "mb-1", children: N.ungrouped.map((e, i) => F(e, i)) }),
-            Object.entries(N.groups).map(([e, i]) => /* @__PURE__ */ o("div", { className: "mb-1", "data-testid": "spectral-multiselect-group", children: [
-              (N.ungrouped.length > 0 || Object.keys(N.groups).indexOf(e) > 0) && /* @__PURE__ */ r("div", { className: "mx-3 my-1 h-px bg-input-border" }),
-              /* @__PURE__ */ r("div", { "data-testid": "spectral-multiselect-group-name", className: "px-3 py-1 text-xs font-semibold text-input-text-secondary uppercase tracking-wide", children: e }),
-              i.map((t, c) => F(t, w.indexOf(t)))
-            ] }, e)),
-            V && a.length > 0 && /* @__PURE__ */ o("div", { className: "mt-1", children: [
-              /* @__PURE__ */ r("div", { className: "mx-3 my-1 h-px bg-input-border" }),
-              /* @__PURE__ */ r("button", { className: "w-full flex items-center gap-3 px-3 py-2 text-sm font-medium text-danger hover:bg-danger-50 focus:bg-danger-50 focus:outline-none", "data-testid": "spectral-multiselect-clear-all-button", onClick: j, type: "button", children: l })
-            ] })
-          ] }) })
+          w.ungrouped.length > 0 && /* @__PURE__ */ r("div", { className: "mb-1", children: w.ungrouped.map((e, i) => P(e, i)) }),
+          Object.entries(w.groups).map(([e, i]) => /* @__PURE__ */ o("div", { className: "mb-1", "data-testid": "spectral-multiselect-group", children: [
+            (w.ungrouped.length > 0 || Object.keys(w.groups).indexOf(e) > 0) && /* @__PURE__ */ r("div", { className: "bg-input-border mx-3 my-1 h-px" }),
+            /* @__PURE__ */ r("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 }),
+            i.map((t, c) => P(t, v.indexOf(t)))
+          ] }, e)),
+          G && a.length > 0 && /* @__PURE__ */ o("div", { className: "mt-1", children: [
+            /* @__PURE__ */ r("div", { className: "bg-input-border mx-3 my-1 h-px" }),
+            /* @__PURE__ */ r("button", { className: "text-danger hover:bg-danger-50 focus:bg-danger-50 flex w-full items-center gap-3 px-3 py-2 text-sm font-medium focus:outline-none", "data-testid": "spectral-multiselect-clear-all-button", onClick: j, type: "button", children: d })
+          ] })
         ] }) })
-      ] }),
-      x === "error" && g && /* @__PURE__ */ r(me, { id: K, dataTestId: "spectral-multiselect-error-message", message: g })
-    ] });
-  }
-);
-Se.displayName = "MultiSelectBase";
+      ] }) })
+    ] }),
+    g === "error" && N && /* @__PURE__ */ r(me, { id: A, dataTestId: "spectral-multiselect-error-message", message: N })
+  ] });
+};
+Ie.displayName = "MultiSelectBase";
 export {
-  Se as MultiSelectBase
+  Ie as MultiSelectBase
 };

package/dist/{MultiSelect/MutiSelect.d.ts → MultiSelect.d.ts}

@@ -1,4 +1,5 @@
 import { MultiSelectBaseProps } from './MultiSelectBase';
+import { Ref } from 'react';
 export interface MultiSelectProps extends Omit<MultiSelectBaseProps, 'onChange' | 'options' | 'value'> {
     onSearchChange?: (search: string) => void;
     onValueChange?: (value: string[]) => void;
@@ -13,5 +14,10 @@ export interface MultiSelectProps extends Omit<MultiSelectBaseProps, 'onChange'
     loading?: boolean;
     sortAlphabetically?: boolean;
 }
-export declare const MultiSelect: import('react').ForwardRefExoticComponent<MultiSelectProps & import('react').RefAttributes<HTMLButtonElement>>;
-//# sourceMappingURL=MutiSelect.d.ts.map
+export declare const MultiSelect: {
+    ({ ref, emptyText, loading, onValueChange, options, state, value, ...props }: MultiSelectProps & {
+        ref?: Ref<HTMLButtonElement>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=MultiSelect.d.ts.map

package/dist/MultiSelect.js

@@ -0,0 +1,27 @@
+import "./styles/main.css";
+import { jsx as u } from "react/jsx-runtime";
+import { MultiSelectBase as c } from "./MultiSelect/MultiSelectBase.js";
+import "react";
+const n = ({
+  ref: l,
+  emptyText: t = "No matches found.",
+  loading: s = !1,
+  onValueChange: d,
+  options: i,
+  state: o,
+  value: b = [],
+  ...a
+}) => {
+  const m = i.map((e) => ({
+    disabled: e.disabled ?? !1,
+    group: e.group,
+    label: e.label,
+    value: e.value
+  })), r = s ? "loading" : o;
+  return /* @__PURE__ */ u(c, { disabled: a.disabled, "data-disabled": a.disabled, emptyMessage: t, onChange: d ?? (() => {
+  }), options: m, ref: l, state: r, value: b, ...a });
+};
+n.displayName = "MultiSelect";
+export {
+  n as MultiSelect
+};

package/dist/Popover.js

@@ -231,7 +231,7 @@ const Re = ({ ...e }) => /* @__PURE__ */ s(ce, { "data-slot": "popover", "data-t
       "data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2",
       "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 h-fit",
       "max-h-[var(--radix-popover-content-max-height)] origin-[--radix-popover-content-transform-origin] rounded-lg border-none p-4",
-      "shadow-md outline-none w-[var(--popover-width)]",
+      "w-[var(--popover-width)] shadow-md outline-none",
       n
     ),
     style: {

package/dist/RadioButtonGroup.js

@@ -3,7 +3,7 @@ import { jsx as e } from "react/jsx-runtime";
 import { RadioButtonGroupItem as n, RadioButtonGroupBase as u } from "./RadioButtonGroup/RadioButtonGroupBase.js";
 import { cn as m } from "./utils/twUtils.js";
 import "react";
-const s = ({ className: t, children: o, ...r }) => /* @__PURE__ */ e(u, { className: m("flex h-fit w-fit items-center whitespace-nowrap rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md", t), ...r, children: o }), f = n;
+const s = ({ className: t, children: o, ...r }) => /* @__PURE__ */ e(u, { className: m("flex h-fit w-fit items-center rounded-md whitespace-nowrap [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md", t), ...r, children: o }), f = n;
 export {
   s as RadioButtonGroup,
   f as RadioButtonGroupItem

package/dist/RadioGroup.d.ts

@@ -1,4 +1,5 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { Label } from '../Label/Label';
+import { ComponentPropsWithoutRef, ComponentRef, ReactElement, ReactNode, Ref } from 'react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 type RadioGroupVariant = 'default' | 'tiles' | 'unstyled';
 export type RadioGroupProps = Omit<ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>, 'onChange' | 'disabled'> & {
@@ -19,18 +20,23 @@ export interface RadioGroupItemProps extends ComponentPropsWithoutRef<typeof Rad
     value: string;
     description?: string | ReactNode;
 }
-declare const RadioGroup: import('react').ForwardRefExoticComponent<Omit<Omit<RadioGroupPrimitive.RadioGroupProps & import('react').RefAttributes<HTMLDivElement>, "ref">, "onChange" | "disabled"> & {
-    onValueChange: (selected: string) => void;
-    selected?: string;
-    name: string;
-    required?: boolean;
-    orientation?: "horizontal" | "vertical";
-    variant?: RadioGroupVariant;
-    className?: string;
-    disabled?: boolean | string[];
-    itemClassName?: string;
-} & import('react').RefAttributes<HTMLDivElement>>;
-declare const RadioGroupItem: import('react').ForwardRefExoticComponent<RadioGroupItemProps & import('react').RefAttributes<HTMLButtonElement>>;
-declare const RadioGroupLabel: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & import('react').RefAttributes<HTMLLabelElement>, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
+declare const RadioGroup: {
+    ({ ref, className, itemClassName, onValueChange, orientation, disabled, selected, variant, ...props }: RadioGroupProps & {
+        ref?: Ref<ComponentRef<typeof RadioGroupPrimitive.Root>>;
+    }): ReactElement;
+    displayName: string;
+};
+declare const RadioGroupItem: {
+    ({ ref, className, children, value, description, disabled, ...props }: RadioGroupItemProps & {
+        ref?: Ref<ComponentRef<typeof RadioGroupPrimitive.Item>>;
+    }): ReactElement;
+    displayName: string;
+};
+declare const RadioGroupLabel: {
+    ({ ref, className, ...props }: ComponentPropsWithoutRef<typeof Label> & {
+        ref?: Ref<ComponentRef<typeof Label>>;
+    }): ReactElement;
+    displayName: string;
+};
 export { RadioGroup, RadioGroupItem, RadioGroupLabel };
 //# sourceMappingURL=RadioGroup.d.ts.map