@stackone/malachite 2.23.3 → 2.24.0

package/dist/components/MultiSelect.js

@@ -1,247 +1,259 @@
-import { jsx as a, jsxs as v, Fragment as it } from "react/jsx-runtime";
-import st, { useId as ct, useState as $, useRef as R, useMemo as _, useCallback as p, useEffect as Ce, useLayoutEffect as dt, useInsertionEffect as ut } from "react";
-import { createPortal as ft } from "react-dom";
-import mt, { useFormFieldIds as ht } from "./BaseFormComponent.js";
-import pt from "./CustomIcons/CaretDownIcon.js";
-import gt from "./CustomIcons/InfoFilledIcon.js";
+import { jsx as r, jsxs as b, Fragment as st } from "react/jsx-runtime";
+import ct, { useId as dt, useState as H, useRef as R, useMemo as _, useCallback as m, useEffect as He, useLayoutEffect as ut, useInsertionEffect as ft } from "react";
+import { createPortal as mt } from "react-dom";
+import ht, { useFormFieldIds as pt } from "./BaseFormComponent.js";
+import gt from "./CustomIcons/CaretDownIcon.js";
+import vt from "./CustomIcons/InfoFilledIcon.js";
 import xt from "./CustomIcons/SearchIcon.js";
-import bt from "./LoadingInput.js";
-import vt from "./Spinner.js";
+import Me from "./LoadingInput.js";
+import bt from "./Spinner.js";
 import { Tag as yt } from "./Tag.js";
-import He from "./Tooltip.js";
-import { getTriggerVisual as wt, DROPDOWN_TRIGGER_ATTR as Et } from "./dropdownTriggerStyle.js";
-import { pushEscapeLayer as It } from "./escapeLayers.js";
-import { ensureMultiSelectPanelStyles as kt } from "./optionRowStyles.js";
-import { overlayIdentity as St } from "./portalOverlay.js";
-import { useTopLayer as Rt } from "./topLayer.js";
-import { CONTROL_TEXT_SIZE_CLASS as ce, CONTROL_TEXT_SIZE as Tt } from "./controlTextSize.js";
-const Lt = {
+import Pe from "./Tooltip.js";
+import { CONTROL_TEXT_SIZE_CLASS as ie, CONTROL_TEXT_SIZE as wt } from "./controlTextSize.js";
+import { controlWidthStyle as We } from "./controlWidth.js";
+import { getTriggerVisual as Et, DROPDOWN_TRIGGER_ATTR as It } from "./dropdownTriggerStyle.js";
+import { pushEscapeLayer as St } from "./escapeLayers.js";
+import { measureMenuGeometry as kt, MENU_MAX_HEIGHT_PX as Rt, MENU_SPECS as M } from "./floatingMenuGeometry.js";
+import { ensureMultiSelectPanelStyles as Tt } from "./optionRowStyles.js";
+import { overlayIdentity as Lt } from "./portalOverlay.js";
+import { useTopLayer as _t } from "./topLayer.js";
+const Nt = {
   padding: "8px 10px",
   color: "var(--malachite-text-secondary, rgb(123, 123, 123))"
-}, Y = {
+}, P = {
   small: "h-[var(--malachite-control-height-small,28px)]",
   medium: "h-[var(--malachite-control-height-medium,32px)]",
   large: "h-[var(--malachite-control-height-large,42px)]"
-}, _t = {
-  small: `${Y.small} gap-[6px] px-2.5 ${ce.small} rounded-[var(--malachite-radius-10,10px)]`,
-  medium: `${Y.medium} gap-[8px] px-3 ${ce.medium} rounded-xl`,
-  large: `${Y.large} gap-[10px] px-4 ${ce.large} rounded-[var(--malachite-radius-xxl,14px)]`
-}, de = 8, Nt = 10, We = "ArrowDown", $e = "ArrowUp", Me = "Enter", Ot = "Backspace", Dt = /* @__PURE__ */ new Set([We, $e, Me]), Pe = st.forwardRef(
-  ({ triggerRole: i, disabled: N, children: M, ...E }, I) => i !== "button" ? /* @__PURE__ */ a(
+}, Ot = {
+  small: `${P.small} gap-[6px] px-2.5 ${ie.small} rounded-[var(--malachite-radius-10,10px)]`,
+  medium: `${P.medium} gap-[8px] px-3 ${ie.medium} rounded-xl`,
+  large: `${P.large} gap-[10px] px-4 ${ie.large} rounded-[var(--malachite-radius-xxl,14px)]`
+}, At = 10, $e = "ArrowDown", Be = "ArrowUp", Ge = "Enter", Ct = "Backspace", Dt = /* @__PURE__ */ new Set([$e, Be, Ge]), Ke = ct.forwardRef(
+  ({ triggerRole: i, disabled: N, children: W, ...E }, I) => i !== "button" ? /* @__PURE__ */ r(
     "div",
     {
       ref: I,
       role: i,
       tabIndex: N ? -1 : 0,
       ...E,
-      children: M
+      children: W
     }
-  ) : /* @__PURE__ */ a(
+  ) : /* @__PURE__ */ r(
     "button",
     {
       ref: I,
       type: "button",
       disabled: N,
       ...E,
-      children: M
+      children: W
     }
   )
 );
-Pe.displayName = "TriggerElement";
-const qt = ({
+Ke.displayName = "TriggerElement";
+const er = ({
   options: i,
   value: N,
-  defaultValue: M,
+  defaultValue: W,
   onChange: E,
   placeholder: I = "Select",
-  renderTrigger: V,
-  searchable: Be,
-  size: j = "large",
-  width: U = "auto",
-  minWidth: Z,
-  disabled: k = !1,
-  error: ue = !1,
+  renderTrigger: U,
+  searchable: ze,
+  size: $ = "large",
+  width: V = "auto",
+  minWidth: se,
+  disabled: S = !1,
+  error: ce = !1,
   loading: y = !1,
-  label: P,
-  name: fe,
-  description: q,
-  tooltip: me,
+  label: B,
+  name: de,
+  description: j,
+  tooltip: ue,
   hint: X,
-  rightSideContent: he,
-  required: J = !1,
-  requiredIndicator: Ke,
-  formControl: pe,
-  chips: Q = !1,
-  chipsRemovable: ee = !0,
-  chipsMax: ge = "auto",
-  inlineSearch: g = !1,
+  rightSideContent: fe,
+  required: Z = !1,
+  requiredIndicator: Fe,
+  formControl: me,
+  chips: q = !1,
+  chipsRemovable: J = !0,
+  chipsMax: he = "auto",
+  inlineSearch: h = !1,
   onSearchChange: O,
-  localFilter: xe = !0,
-  className: Fe = "",
-  style: Ge,
-  id: ze,
-  "aria-label": be,
-  "aria-labelledby": Ye
+  localFilter: pe = !0,
+  className: Ye = "",
+  style: Ue,
+  id: Ve,
+  "aria-label": ge,
+  "aria-labelledby": je
 }) => {
-  const ve = ct(), ye = `${ve}-listbox`, we = (e) => `${ve}-option-${e}`, { controlId: Ee, labelId: Ie, descriptionId: Ve, hintId: je, describedBy: Ue } = ht({
-    id: ze,
-    label: P,
-    description: q,
+  const ve = dt(), xe = `${ve}-listbox`, be = (e) => `${ve}-option-${e}`, { controlId: ye, labelId: we, descriptionId: Xe, hintId: Ze, describedBy: qe } = pt({
+    id: Ve,
+    label: B,
+    description: j,
     hint: X
-  }), [Ze, qe] = $(() => M ?? []), te = N !== void 0, u = te ? N : Ze, [s, B] = $(!1), [m, Xe] = $(
-    null
-  ), [w, Je] = $(""), [x, T] = $(-1), re = R(null), D = R(null), L = R(null), ke = R(null);
-  Rt(L, s);
-  const Se = R([]), ae = _(() => new Set(u), [u]), c = _(
-    () => i.filter((e) => ae.has(e.value)),
-    [i, ae]
-  ), ne = typeof ge == "number" ? ge : void 0, S = _(() => {
-    if (!xe) return i;
+  }), [Je, Qe] = H(() => W ?? []), Q = N !== void 0, u = Q ? N : Je, [s, G] = H(!1), [d, Ee] = H(null), [w, et] = H(""), [p, T] = H(-1), ee = R(null), A = R(null), C = R(null), Ie = R(null);
+  _t(C, s);
+  const Se = R([]), te = _(() => new Set(u), [u]), c = _(
+    () => i.filter((e) => te.has(e.value)),
+    [i, te]
+  ), re = typeof he == "number" ? he : void 0, k = _(() => {
+    if (!pe) return i;
     const e = w.trim().toLowerCase();
     return e ? i.filter((t) => (t.searchText ?? (typeof t.label == "string" ? t.label : "")).toLowerCase().includes(e)) : i;
-  }, [i, w, xe]), oe = R(!1), Re = R(""), K = p(
+  }, [i, w, pe]), ne = R(!1), ke = R(""), K = m(
     (e, t) => {
-      Re.current !== e && (Re.current = e, t && (oe.current = !0), Je(e), O == null || O(e));
+      ke.current !== e && (ke.current = e, t && (ne.current = !0), et(e), O == null || O(e));
     },
     [O]
-  ), le = p(
+  ), ae = m(
     (e) => K(e, !0),
     [K]
-  ), A = p(() => K("", !1), [K]);
-  Ce(() => {
-    oe.current && (T(-1), oe.current = !1);
+  ), D = m(() => K("", !1), [K]);
+  He(() => {
+    ne.current && (T(-1), ne.current = !1);
   }, [w]);
-  const Qe = Be ?? (O !== void 0 || i.length > Nt), Te = g ? !1 : Qe, C = p(() => {
-    var H, W;
-    const e = re.current;
+  const tt = ze ?? (O !== void 0 || i.length > At), Re = h ? !1 : tt, L = m(() => {
+    const e = ee.current;
     if (!e) return;
-    const t = e.getBoundingClientRect(), n = ((H = L.current) == null ? void 0 : H.offsetHeight) ?? 0, h = ((W = L.current) == null ? void 0 : W.offsetWidth) ?? t.width, f = t.left, o = window.innerWidth - h - de, r = Math.max(de, Math.min(f, o)), l = window.innerHeight - t.bottom, d = n > 0 && l < n + de ? t.top - n - 4 : t.bottom + 4;
-    Xe({ top: d, left: r, width: Math.max(t.width, Z ?? 0) });
-  }, [Z]);
-  Ce(() => {
-    var h;
+    const t = kt(C.current, {
+      triggerRect: e.getBoundingClientRect(),
+      preset: "standard",
+      minWidth: se,
+      viewportWidth: window.innerWidth,
+      viewportHeight: window.innerHeight
+    });
+    Ee(t);
+  }, [se]);
+  He(() => {
+    var x;
     if (!s) {
-      A(), T(-1);
+      D(), T(-1), Ee(null);
       return;
     }
-    C(), g && ((h = D.current) == null || h.focus());
-    const e = () => C(), t = (f) => {
-      const o = f.composedPath(), r = re.current, l = L.current;
-      (!r || !o.includes(r)) && (!l || !o.includes(l)) && B(!1);
-    }, n = It(() => B(!1));
+    L(), h && ((x = A.current) == null || x.focus());
+    const e = () => L(), t = (g) => {
+      const a = g.composedPath(), n = ee.current, o = C.current;
+      (!n || !a.includes(n)) && (!o || !a.includes(o)) && G(!1);
+    }, l = St(() => G(!1));
     return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), document.addEventListener("mousedown", t), () => {
-      window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e), document.removeEventListener("mousedown", t), n();
+      window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e), document.removeEventListener("mousedown", t), l();
     };
-  }, [s, C, g, A]), dt(() => {
-    s && L.current && C();
-  }, [s, C]);
-  const b = p(
+  }, [s, L, h, D]), ut(() => {
+    if (!s)
+      return;
+    L();
+    const e = C.current;
+    if (!e || typeof ResizeObserver > "u")
+      return;
+    const t = new ResizeObserver(() => L());
+    return t.observe(e), () => t.disconnect();
+  }, [s, L]);
+  const v = m(
     (e) => {
-      te || qe(e), E == null || E(e);
+      Q || Qe(e), E == null || E(e);
     },
-    [te, E]
-  ), F = p(
+    [Q, E]
+  ), z = m(
     (e) => i.some((t) => t.value === e && t.disabled),
     [i]
-  ), ie = p(
+  ), le = m(
     (e) => {
-      F(e) || (u.includes(e) ? b(u.filter((t) => t !== e)) : b([...u, e]));
+      z(e) || (u.includes(e) ? v(u.filter((t) => t !== e)) : v([...u, e]));
     },
-    [u, b, F]
-  ), G = _(() => {
+    [u, v, z]
+  ), F = _(() => {
     const e = /* @__PURE__ */ new Set();
     for (const t of i)
       t.disabled && e.add(t.value);
     return e;
-  }, [i]), et = p(
+  }, [i]), rt = m(
     (e) => {
       e.stopPropagation();
-      const t = u.filter((n) => G.has(n));
-      b(t);
+      const t = u.filter((l) => F.has(l));
+      v(t);
     },
-    [b, u, G]
-  ), Le = p(
+    [v, u, F]
+  ), Te = m(
     (e, t) => {
-      t.stopPropagation(), !F(e) && b(u.filter((n) => n !== e));
+      t.stopPropagation(), !z(e) && v(u.filter((l) => l !== e));
     },
-    [u, b, F]
-  ), z = p(
+    [u, v, z]
+  ), Y = m(
     (e) => {
       if (!Dt.has(e.key)) return;
       if (e.preventDefault(), e.stopPropagation(), !s) {
-        B(!0);
+        G(!0);
         return;
       }
-      const t = S.length;
+      const t = k.length;
       if (t === 0) return;
-      const n = (o) => {
+      const l = (a) => {
         requestAnimationFrame(() => {
-          const r = Se.current[o], l = ke.current;
-          if (!r || !l) return;
-          const d = r.offsetTop, H = d + r.offsetHeight, W = l.scrollTop, lt = W + l.clientHeight;
-          H > lt ? l.scrollTo({
-            top: H - l.clientHeight,
+          const n = Se.current[a], o = Ie.current;
+          if (!n || !o) return;
+          const f = n.offsetTop, Ce = f + n.offsetHeight, De = o.scrollTop, it = De + o.clientHeight;
+          Ce > it ? o.scrollTo({
+            top: Ce - o.clientHeight,
             behavior: "smooth"
-          }) : d < W && l.scrollTo({ top: d, behavior: "smooth" });
+          }) : f < De && o.scrollTo({ top: f, behavior: "smooth" });
         });
-      }, h = (o) => {
-        var l;
-        let r = x;
-        for (let d = 0; d < t; d++)
-          if (r = o === 1 ? r < t - 1 ? r + 1 : 0 : r > 0 ? r - 1 : t - 1, !((l = S[r]) != null && l.disabled)) {
-            n(r), T(r);
+      }, x = (a) => {
+        var o;
+        let n = p;
+        for (let f = 0; f < t; f++)
+          if (n = a === 1 ? n < t - 1 ? n + 1 : 0 : n > 0 ? n - 1 : t - 1, !((o = k[n]) != null && o.disabled)) {
+            l(n), T(n);
             return;
           }
-      }, f = () => {
-        var l;
-        if (x < 0 || x >= t || (l = S[x]) != null && l.disabled) return;
-        const o = S[x].value;
-        ie(o), A();
-        const r = i.findIndex((d) => d.value === o);
-        T(r >= 0 ? r : -1), n(r >= 0 ? r : 0), requestAnimationFrame(() => {
-          var d;
-          return (d = D.current) == null ? void 0 : d.focus();
+      }, g = () => {
+        var o;
+        if (p < 0 || p >= t || (o = k[p]) != null && o.disabled) return;
+        const a = k[p].value;
+        le(a), D();
+        const n = i.findIndex((f) => f.value === a);
+        T(n >= 0 ? n : -1), l(n >= 0 ? n : 0), requestAnimationFrame(() => {
+          var f;
+          return (f = A.current) == null ? void 0 : f.focus();
         });
       };
       switch (e.key) {
-        case We:
-          h(1);
-          break;
         case $e:
-          h(-1);
+          x(1);
+          break;
+        case Be:
+          x(-1);
           break;
-        case Me:
-          f();
+        case Ge:
+          g();
           break;
       }
     },
-    [s, S, x, ie, i, A]
-  ), _e = p(
+    [s, k, p, le, i, D]
+  ), Le = m(
     (e) => {
-      if (e.key === Ot && w === "" && u.length > 0) {
-        e.preventDefault(), b(u.slice(0, -1)), requestAnimationFrame(() => {
+      if (e.key === Ct && w === "" && u.length > 0) {
+        e.preventDefault(), v(u.slice(0, -1)), requestAnimationFrame(() => {
           var t;
-          return (t = D.current) == null ? void 0 : t.focus();
+          return (t = A.current) == null ? void 0 : t.focus();
         });
         return;
       }
-      z(e);
+      Y(e);
     },
-    [z, w, u, b]
-  ), tt = typeof U == "number" ? `${U}px` : U, Ne = c.length > 0 && !k && !y, rt = wt({
-    disabled: k,
-    error: ue,
+    [Y, w, u, v]
+  ), _e = c.length > 0 && !S && !y, nt = Et({
+    disabled: S,
+    error: ce,
     open: s,
     loading: y,
     hasSelection: c.length > 0
-  }), se = _(() => g ? /* @__PURE__ */ a(
+  }), oe = _(() => h ? /* @__PURE__ */ r(
     "input",
     {
-      ref: D,
+      ref: A,
       type: "text",
       value: w,
-      onChange: (e) => le(e.target.value),
-      onKeyDown: _e,
+      onChange: (e) => ae(e.target.value),
+      onKeyDown: Le,
       placeholder: c.length === 0 ? I : "",
       className: "flex-1 w-full min-w-[40px] border-none outline-none bg-transparent text-[length:inherit] p-0 text-[var(--malachite-text-primary,rgb(10,10,10))]",
       onMouseDown: (e) => {
@@ -249,121 +261,120 @@ const qt = ({
       }
     }
   ) : null, [
-    g,
+    h,
     w,
-    le,
-    _e,
+    ae,
+    Le,
     c.length,
     I
   ]), at = _(() => {
-    if (V && c.length > 0)
-      return V(c);
-    if (Q && c.length > 0) {
-      const e = ne != null ? c.slice(0, ne) : c, t = c.length - e.length;
-      return /* @__PURE__ */ v(
+    if (U && c.length > 0)
+      return U(c);
+    if (q && c.length > 0) {
+      const e = re != null ? c.slice(0, re) : c, t = c.length - e.length;
+      return /* @__PURE__ */ b(
         "div",
         {
           className: "flex items-center gap-1 overflow-hidden min-w-0 flex-1",
           style: { flexWrap: "nowrap" },
           children: [
-            e.map((n) => {
-              const h = G.has(n.value);
-              return /* @__PURE__ */ a(
+            e.map((l) => {
+              const x = F.has(l.value);
+              return /* @__PURE__ */ r(
                 yt,
                 {
-                  value: n.label,
+                  value: l.label,
                   type: "default",
                   textTransform: "none",
-                  onRemove: ee && !k && !h ? (f) => Le(n.value, f) : void 0,
+                  onRemove: J && !S && !x ? (g) => Te(l.value, g) : void 0,
                   className: "shrink-0"
                 },
-                n.value
+                l.value
               );
             }),
-            t > 0 && /* @__PURE__ */ v("span", { className: "shrink-0 text-xs text-[var(--malachite-text-secondary,rgb(123,123,123))]", children: [
+            t > 0 && /* @__PURE__ */ b("span", { className: "shrink-0 text-xs text-[var(--malachite-text-secondary,rgb(123,123,123))]", children: [
               "+",
               t
             ] }),
-            se
+            oe
           ]
         }
       );
     }
-    return g && c.length === 0 ? se : c.length === 0 ? /* @__PURE__ */ a("span", { className: "text-[var(--malachite-text-placeholder)]", children: I }) : c.length === 1 ? /* @__PURE__ */ a("span", { children: c[0].label }) : /* @__PURE__ */ a("span", { children: `${c.length} selected` });
+    return h && c.length === 0 ? oe : c.length === 0 ? /* @__PURE__ */ r("span", { className: "text-[var(--malachite-text-placeholder)]", children: I }) : c.length === 1 ? /* @__PURE__ */ r("span", { children: c[0].label }) : /* @__PURE__ */ r("span", { children: `${c.length} selected` });
   }, [
     c,
-    V,
-    Q,
-    ne,
-    ee,
-    k,
-    Le,
-    g,
-    se,
+    U,
+    q,
+    re,
+    J,
+    S,
+    Te,
+    h,
+    oe,
     I,
-    G
-  ]), nt = i.length === 0 ? "No options available" : "No results found";
-  ut(() => {
-    s && kt();
+    F
+  ]), lt = i.length === 0 ? "No options available" : "No results found";
+  ft(() => {
+    s && Tt();
   }, [s]);
   const ot = {
     position: "fixed",
-    top: (m == null ? void 0 : m.top) ?? 0,
-    left: (m == null ? void 0 : m.left) ?? 0,
-    minWidth: (m == null ? void 0 : m.width) ?? Z ?? 180,
-    maxWidth: 320,
-    background: "var(--malachite-card-background, rgb(255, 255, 255))",
-    border: "1px solid var(--malachite-card-border, rgb(232, 232, 232))",
-    borderRadius: 12,
-    boxShadow: "0px 2px 5px 0px rgba(0, 0, 0, 0.1)",
-    padding: 4,
+    top: (d == null ? void 0 : d.top) ?? 0,
+    left: (d == null ? void 0 : d.left) ?? 0,
+    width: d == null ? void 0 : d.width,
+    background: M.standard.background,
+    border: M.standard.border,
+    borderRadius: M.standard.radius,
+    boxShadow: M.standard.shadow,
+    padding: M.standard.padding,
     display: "flex",
     flexDirection: "column",
     gap: 4,
-    maxHeight: 360,
-    fontSize: Tt[j],
-    visibility: m ? "visible" : "hidden",
-    opacity: m ? 1 : 0
-  }, Oe = !!(q || me || X || he || fe || pe || J), De = Oe && !!P, Ae = /* @__PURE__ */ v(it, { children: [
-    /* @__PURE__ */ v("div", { className: "relative", style: { width: tt }, children: [
-      /* @__PURE__ */ v(
-        Pe,
+    maxHeight: (d == null ? void 0 : d.maxHeight) ?? Rt,
+    fontSize: wt[$],
+    visibility: d ? "visible" : "hidden",
+    opacity: d ? 1 : 0
+  }, Ne = !!(j || ue || X || fe || de || me || Z), Oe = Ne && !!B, Ae = /* @__PURE__ */ b(st, { children: [
+    /* @__PURE__ */ b("div", { className: "relative", style: We(V), children: [
+      /* @__PURE__ */ b(
+        Ke,
         {
-          ref: re,
-          id: Ee,
-          triggerRole: g ? "combobox" : Q && ee ? "group" : "button",
-          disabled: k || y,
-          [Et]: "",
+          ref: ee,
+          id: ye,
+          triggerRole: h ? "combobox" : q && J ? "group" : "button",
+          disabled: S || y,
+          [It]: "",
           "aria-haspopup": "listbox",
           "aria-expanded": s,
-          "aria-controls": s ? ye : void 0,
-          "aria-activedescendant": g && s && x >= 0 ? we(x) : void 0,
-          "aria-labelledby": Ye ?? (De && !be ? Ie : void 0),
-          "aria-label": be ?? (De ? void 0 : P),
-          "aria-invalid": ue || void 0,
-          "aria-required": J || void 0,
-          "aria-describedby": Ue,
+          "aria-controls": s ? xe : void 0,
+          "aria-activedescendant": h && s && p >= 0 ? be(p) : void 0,
+          "aria-labelledby": je ?? (Oe && !ge ? we : void 0),
+          "aria-label": ge ?? (Oe ? void 0 : B),
+          "aria-invalid": ce || void 0,
+          "aria-required": Z || void 0,
+          "aria-describedby": qe,
           "aria-busy": y || void 0,
           onClick: () => {
-            k || y || B((e) => !e);
+            S || y || G((e) => !e);
           },
-          onKeyDown: z,
+          onKeyDown: Y,
           style: {
             transition: "border-color 0.15s ease, box-shadow 0.15s ease",
-            ...rt,
-            ...Ge
+            ...nt,
+            ...Ue
           },
-          className: `w-full ${_t[j]} border border-solid flex items-center font-normal text-[var(--malachite-text-primary)] ${k || y ? "cursor-not-allowed" : "cursor-pointer"} ${Fe}`,
+          className: `w-full ${Ot[$]} border border-solid flex items-center font-normal text-[var(--malachite-text-primary)] ${S || y ? "cursor-not-allowed" : "cursor-pointer"} ${Ye}`,
           children: [
-            /* @__PURE__ */ a(
+            /* @__PURE__ */ r(
               "span",
               {
-                className: `flex-1 min-w-0 text-left ${g ? "flex" : "truncate"} ${Ne ? "pr-[18px]" : ""}`,
+                className: `flex-1 min-w-0 text-left ${h ? "flex" : "truncate"} ${_e ? "pr-[18px]" : ""}`,
                 children: at
               }
             ),
-            y ? /* @__PURE__ */ a("span", { className: "flex items-center justify-center shrink-0 size-[14px]", children: /* @__PURE__ */ a(vt, { size: "xxxsmall" }) }) : /* @__PURE__ */ a(
-              pt,
+            y ? /* @__PURE__ */ r("span", { className: "flex items-center justify-center shrink-0 size-[14px]", children: /* @__PURE__ */ r(bt, { size: "xxxsmall" }) }) : /* @__PURE__ */ r(
+              gt,
               {
                 size: 13,
                 className: "shrink-0",
@@ -377,29 +388,29 @@ const qt = ({
           ]
         }
       ),
-      Ne && /* @__PURE__ */ a(
+      _e && /* @__PURE__ */ r(
         "button",
         {
           type: "button",
           "aria-label": "Clear selection",
-          onClick: et,
+          onClick: rt,
           className: "absolute top-0 bottom-0 right-[28px] flex items-center justify-center px-[2px] leading-none bg-transparent border-none text-[var(--malachite-text-placeholder)] hover:text-[var(--malachite-text-primary)] cursor-pointer",
           children: "×"
         }
       )
     ] }),
-    s && ft(
-      /* @__PURE__ */ v(
+    s && mt(
+      /* @__PURE__ */ b(
         "div",
         {
-          ref: L,
-          id: ye,
+          ref: C,
+          id: xe,
           role: "listbox",
           "aria-multiselectable": "true",
-          ...St("multiselect"),
+          ...Lt("multiselect"),
           style: ot,
           children: [
-            Te && /* @__PURE__ */ v(
+            Re && /* @__PURE__ */ b(
               "div",
               {
                 style: {
@@ -413,7 +424,7 @@ const qt = ({
                   padding: "0 12px"
                 },
                 children: [
-                  /* @__PURE__ */ a(
+                  /* @__PURE__ */ r(
                     xt,
                     {
                       size: 13,
@@ -423,13 +434,13 @@ const qt = ({
                       }
                     }
                   ),
-                  /* @__PURE__ */ a(
+                  /* @__PURE__ */ r(
                     "input",
                     {
                       type: "text",
                       value: w,
-                      onChange: (e) => le(e.target.value),
-                      onKeyDown: z,
+                      onChange: (e) => ae(e.target.value),
+                      onKeyDown: Y,
                       placeholder: "Search",
                       "aria-label": "Search options",
                       autoFocus: !0,
@@ -447,7 +458,7 @@ const qt = ({
                 ]
               }
             ),
-            Te && /* @__PURE__ */ a(
+            Re && /* @__PURE__ */ r(
               "div",
               {
                 "aria-hidden": "true",
@@ -459,10 +470,10 @@ const qt = ({
                 }
               }
             ),
-            /* @__PURE__ */ a(
+            /* @__PURE__ */ r(
               "div",
               {
-                ref: ke,
+                ref: Ie,
                 style: {
                   display: "flex",
                   flexDirection: "column",
@@ -474,34 +485,34 @@ const qt = ({
                   scrollbarWidth: "thin",
                   scrollbarColor: "var(--malachite-text-placeholder, rgb(187, 187, 187)) transparent"
                 },
-                children: S.length === 0 ? (
+                children: k.length === 0 ? (
                   // `role="listbox"` admits only option/group children.
-                  /* @__PURE__ */ a("div", { role: "presentation", style: Lt, children: nt })
-                ) : S.map((e, t) => {
-                  const n = ae.has(e.value), h = t === x, f = !!e.disabled;
-                  return /* @__PURE__ */ v(
+                  /* @__PURE__ */ r("div", { role: "presentation", style: Nt, children: lt })
+                ) : k.map((e, t) => {
+                  const l = te.has(e.value), x = t === p, g = !!e.disabled;
+                  return /* @__PURE__ */ b(
                     "button",
                     {
-                      id: we(t),
-                      ref: (o) => {
-                        Se.current[t] = o;
+                      id: be(t),
+                      ref: (a) => {
+                        Se.current[t] = a;
                       },
                       type: "button",
                       role: "option",
-                      "aria-selected": n,
-                      "aria-disabled": f || void 0,
+                      "aria-selected": l,
+                      "aria-disabled": g || void 0,
                       onClick: () => {
-                        var o;
-                        ie(e.value), A(), (o = D.current) == null || o.focus();
+                        var a;
+                        le(e.value), D(), (a = A.current) == null || a.focus();
                       },
                       onMouseEnter: () => T(t),
                       onMouseLeave: () => {
-                        x === t && T(-1);
+                        p === t && T(-1);
                       },
                       className: "malachite-multiselect-option",
-                      "data-checked": n,
-                      "data-highlighted": h,
-                      "data-disabled": f,
+                      "data-checked": l,
+                      "data-highlighted": x,
+                      "data-disabled": g,
                       style: {
                         display: "flex",
                         alignItems: "center",
@@ -513,13 +524,13 @@ const qt = ({
                         borderRadius: 8,
                         padding: "8px 10px",
                         font: "inherit",
-                        cursor: f ? "not-allowed" : "pointer",
-                        opacity: f ? 0.6 : 1,
-                        color: n ? "var(--malachite-accent-foreground, rgb(2, 122, 66))" : "var(--malachite-text-primary, rgb(10, 10, 10))"
+                        cursor: g ? "not-allowed" : "pointer",
+                        opacity: g ? 0.6 : 1,
+                        color: l ? "var(--malachite-accent-foreground, rgb(2, 122, 66))" : "var(--malachite-text-primary, rgb(10, 10, 10))"
                       },
                       children: [
                         (() => {
-                          const o = e.description ? e.descriptionMode ?? "icon" : null, r = o === "subtitle", l = /* @__PURE__ */ a(
+                          const a = e.description ? e.descriptionMode ?? "icon" : null, n = a === "subtitle", o = /* @__PURE__ */ r(
                             "span",
                             {
                               style: {
@@ -530,34 +541,34 @@ const qt = ({
                               children: e.label
                             }
                           );
-                          return /* @__PURE__ */ v(
+                          return /* @__PURE__ */ b(
                             "span",
                             {
                               style: {
                                 flex: 1,
                                 minWidth: 0,
                                 display: "flex",
-                                flexDirection: r ? "column" : "row",
-                                alignItems: r ? "flex-start" : "center",
-                                gap: r ? 2 : 6
+                                flexDirection: n ? "column" : "row",
+                                alignItems: n ? "flex-start" : "center",
+                                gap: n ? 2 : 6
                               },
                               children: [
-                                o === "hover" ? /* @__PURE__ */ a(
-                                  He,
+                                a === "hover" ? /* @__PURE__ */ r(
+                                  Pe,
                                   {
                                     text: e.description,
                                     delay: 0.6,
                                     maxWidth: 420,
-                                    children: l
+                                    children: o
                                   }
-                                ) : l,
-                                o === "icon" && /* @__PURE__ */ a(
-                                  He,
+                                ) : o,
+                                a === "icon" && /* @__PURE__ */ r(
+                                  Pe,
                                   {
                                     text: e.description,
                                     delay: 0.6,
                                     maxWidth: 420,
-                                    children: /* @__PURE__ */ a(
+                                    children: /* @__PURE__ */ r(
                                       "span",
                                       {
                                         style: {
@@ -565,13 +576,13 @@ const qt = ({
                                           color: "var(--malachite-text-placeholder, rgb(187, 187, 187))"
                                         },
                                         "aria-label": "More information",
-                                        onClick: (d) => d.stopPropagation(),
-                                        children: e.descriptionIcon ?? /* @__PURE__ */ a(gt, { size: 14 })
+                                        onClick: (f) => f.stopPropagation(),
+                                        children: e.descriptionIcon ?? /* @__PURE__ */ r(vt, { size: 14 })
                                       }
                                     )
                                   }
                                 ),
-                                o === "subtitle" && /* @__PURE__ */ a(
+                                a === "subtitle" && /* @__PURE__ */ r(
                                   "span",
                                   {
                                     style: {
@@ -593,7 +604,7 @@ const qt = ({
                             }
                           );
                         })(),
-                        e.badge && /* @__PURE__ */ a(
+                        e.badge && /* @__PURE__ */ r(
                           "span",
                           {
                             style: {
@@ -617,29 +628,29 @@ const qt = ({
       document.body
     )
   ] });
-  return Oe ? /* @__PURE__ */ a(
-    mt,
+  return Ne ? /* @__PURE__ */ r(
+    ht,
     {
-      label: P,
+      label: B,
       hint: X,
-      rightSideContent: he,
-      tooltip: me,
-      name: fe ?? "",
-      required: J,
-      requiredIndicator: Ke,
+      rightSideContent: fe,
+      tooltip: ue,
+      name: de ?? "",
+      required: Z,
+      requiredIndicator: Fe,
       loading: y,
-      formControl: pe,
-      description: q,
-      controlId: Ee,
-      labelId: Ie,
-      descriptionId: Ve,
-      hintId: je,
-      loadingComponent: /* @__PURE__ */ a(bt, { heightClass: Y[j] }),
+      formControl: me,
+      description: j,
+      controlId: ye,
+      labelId: we,
+      descriptionId: Xe,
+      hintId: Ze,
+      loadingComponent: V === void 0 ? /* @__PURE__ */ r(Me, { heightClass: P[$] }) : /* @__PURE__ */ r("div", { style: We(V), children: /* @__PURE__ */ r(Me, { heightClass: P[$] }) }),
       children: Ae
     }
   ) : Ae;
 };
 export {
-  qt as default
+  er as default
 };
 //# sourceMappingURL=MultiSelect.js.map