@stackone/malachite 2.42.2 → 2.44.0

package/dist/components/MultiSelect.js

@@ -1,43 +1,45 @@
-import { jsx as r, jsxs as w, Fragment as dt } from "react/jsx-runtime";
-import ut, { useId as ft, useState as H, useRef as T, useMemo as D, useCallback as p, useEffect as Pe, useLayoutEffect as mt, useInsertionEffect as ht } from "react";
-import { createPortal as pt } from "react-dom";
-import gt, { useFormFieldIds as bt } from "./BaseFormComponent.js";
-import vt from "./CustomIcons/CaretDownIcon.js";
-import xt from "./CustomIcons/InfoFilledIcon.js";
-import yt from "./CustomIcons/SearchIcon.js";
-import Me from "./LoadingInput.js";
-import wt from "./Spinner.js";
-import { Tag as Et } from "./Tag.js";
-import We from "./Tooltip.js";
-import { CONTROL_TEXT_SIZE_CLASS as de, CONTROL_TEXT_SIZE as It } from "./controlTextSize.js";
-import { controlWidthStyle as $e } from "./controlWidth.js";
-import { getTriggerVisual as St, DROPDOWN_TRIGGER_ATTR as Tt } from "./dropdownTriggerStyle.js";
-import { pushEscapeLayer as kt } from "./escapeLayers.js";
-import { measureMenuGeometry as Lt, MENU_MAX_HEIGHT_PX as Rt, MENU_SPECS as K } from "./floatingMenuGeometry.js";
-import { ensureMultiSelectPanelStyles as Ot } from "./optionRowStyles.js";
-import { overlayIdentity as _t } from "./portalOverlay.js";
-import { useTopLayer as Nt } from "./topLayer.js";
-import { tooltipLines as Ct, isCut as At, isClamped as Dt } from "./truncatedLines.js";
-const Ht = {
+import { jsx as r, jsxs as w, Fragment as ft } from "react/jsx-runtime";
+import mt, { useId as pt, useState as P, useRef as T, useMemo as H, useCallback as m, useEffect as Me, useLayoutEffect as ht, useInsertionEffect as gt } from "react";
+import { createPortal as bt } from "react-dom";
+import vt, { useFormFieldIds as xt } from "./BaseFormComponent.js";
+import yt from "./CustomIcons/CaretDownIcon.js";
+import wt from "./CustomIcons/InfoFilledIcon.js";
+import Et from "./CustomIcons/SearchIcon.js";
+import We from "./LoadingInput.js";
+import It from "./Spinner.js";
+import { Tag as St } from "./Tag.js";
+import $e from "./Tooltip.js";
+import { getDeepActiveElement as Tt } from "./activeElement.js";
+import { CONTROL_TEXT_SIZE_CLASS as ue, CONTROL_TEXT_SIZE as kt } from "./controlTextSize.js";
+import { controlWidthStyle as Ge } from "./controlWidth.js";
+import { getTriggerVisual as Rt, DROPDOWN_TRIGGER_ATTR as _t } from "./dropdownTriggerStyle.js";
+import { pushEscapeLayer as Lt } from "./escapeLayers.js";
+import { measureMenuGeometry as Ot, MENU_MAX_HEIGHT_PX as Nt, MENU_SPECS as B } from "./floatingMenuGeometry.js";
+import { FOCUS_RING as Ct, FOCUS_RING_WITHIN_INPUT as At } from "./focusRing.js";
+import { ensureMultiSelectPanelStyles as Dt } from "./optionRowStyles.js";
+import { usePopupLayer as Ht } from "./overlayLayers.js";
+import { useTopLayer as Pt } from "./topLayer.js";
+import { tooltipLines as Mt, isCut as Wt, isClamped as $t } from "./truncatedLines.js";
+const Gt = {
   padding: "8px 10px",
   color: "var(--malachite-text-secondary, rgb(123, 123, 123))"
-}, z = {
+}, K = {
   small: "h-[var(--malachite-control-height-small,28px)]",
   medium: "h-[var(--malachite-control-height-medium,32px)]",
   large: "h-[var(--malachite-control-height-large,42px)]"
-}, Pt = {
-  small: `${z.small} gap-[6px] px-2.5 ${de.small} rounded-[var(--malachite-radius-10,10px)]`,
-  medium: `${z.medium} gap-[8px] px-3 ${de.medium} rounded-xl`,
-  large: `${z.large} gap-[10px] px-4 ${de.large} rounded-[var(--malachite-radius-xxl,14px)]`
-}, Mt = 10, Ke = "ArrowDown", ze = "ArrowUp", Fe = "Enter", Wt = "Backspace", $t = /* @__PURE__ */ new Set([Ke, ze, Fe]), Ye = ut.forwardRef(
-  ({ triggerRole: n, disabled: k, children: R, ...u }, g) => n !== "button" ? /* @__PURE__ */ r(
+}, Ft = {
+  small: `${K.small} gap-[6px] px-2.5 ${ue.small} rounded-[var(--malachite-radius-10,10px)]`,
+  medium: `${K.medium} gap-[8px] px-3 ${ue.medium} rounded-xl`,
+  large: `${K.large} gap-[10px] px-4 ${ue.large} rounded-[var(--malachite-radius-xxl,14px)]`
+}, Bt = 10, Ke = "ArrowDown", ze = "ArrowUp", Ue = "Enter", Kt = "Backspace", zt = /* @__PURE__ */ new Set([Ke, ze, Ue]), Ye = mt.forwardRef(
+  ({ triggerRole: n, disabled: k, children: _, ...u }, g) => n !== "button" ? /* @__PURE__ */ r(
     "div",
     {
       ref: g,
       role: n,
       tabIndex: k ? -1 : 0,
       ...u,
-      children: R
+      children: _
     }
   ) : /* @__PURE__ */ r(
     "button",
@@ -46,25 +48,25 @@ const Ht = {
       type: "button",
       disabled: k,
       ...u,
-      children: R
+      children: _
     }
   )
 );
 Ye.displayName = "TriggerElement";
-const Be = 0.6, Ge = 420, Bt = ({ option: n }) => {
-  const k = T(null), R = T(null), u = n.description ? n.descriptionMode ?? "icon" : null, g = u === "subtitle", [_, Z] = H({ label: !0, subtitle: !0 }), N = () => {
-    const E = At(k.current), m = Dt(R.current);
-    return !E && !m && u !== "hover" ? !1 : (Z({ label: E, subtitle: m }), !0);
-  }, P = u === "hover" || g && _.subtitle, M = (E) => /* @__PURE__ */ r(
-    We,
+const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
+  const k = T(null), _ = T(null), u = n.description ? n.descriptionMode ?? "icon" : null, g = u === "subtitle", [N, Z] = P({ label: !0, subtitle: !0 }), C = () => {
+    const E = Wt(k.current), p = $t(_.current);
+    return !E && !p && u !== "hover" ? !1 : (Z({ label: E, subtitle: p }), !0);
+  }, M = u === "hover" || g && N.subtitle, W = (E) => /* @__PURE__ */ r(
+    $e,
     {
-      text: Ct([
-        ["label", _.label && n.label],
-        ["description", P && n.description]
+      text: Mt([
+        ["label", N.label && n.label],
+        ["description", M && n.description]
       ]),
-      shouldShow: N,
-      delay: Be,
-      maxWidth: Ge,
+      shouldShow: C,
+      delay: Fe,
+      maxWidth: Be,
       triggerAs: "span",
       isShrinkable: !0,
       describesTrigger: u === "hover",
@@ -83,7 +85,7 @@ const Be = 0.6, Ge = 420, Bt = ({ option: n }) => {
       children: n.label
     }
   );
-  return g ? M(
+  return g ? W(
     /* @__PURE__ */ w(
       "span",
       {
@@ -100,7 +102,7 @@ const Be = 0.6, Ge = 420, Bt = ({ option: n }) => {
           /* @__PURE__ */ r(
             "span",
             {
-              ref: R,
+              ref: _,
               style: {
                 fontSize: 12,
                 color: "var(--malachite-text-secondary, rgb(123, 123, 123))",
@@ -130,13 +132,13 @@ const Be = 0.6, Ge = 420, Bt = ({ option: n }) => {
         gap: 6
       },
       children: [
-        M(b),
+        W(b),
         u === "icon" && /* @__PURE__ */ r(
-          We,
+          $e,
           {
             text: n.description,
-            delay: Be,
-            maxWidth: Ge,
+            delay: Fe,
+            maxWidth: Be,
             children: /* @__PURE__ */ r(
               "span",
               {
@@ -146,7 +148,7 @@ const Be = 0.6, Ge = 420, Bt = ({ option: n }) => {
                 },
                 "aria-label": "More information",
                 onClick: (E) => E.stopPropagation(),
-                children: n.descriptionIcon ?? /* @__PURE__ */ r(xt, { size: 14 })
+                children: n.descriptionIcon ?? /* @__PURE__ */ r(wt, { size: 14 })
               }
             )
           }
@@ -154,169 +156,172 @@ const Be = 0.6, Ge = 420, Bt = ({ option: n }) => {
       ]
     }
   );
-}, sr = ({
+}, pr = ({
   options: n,
   value: k,
-  defaultValue: R,
+  defaultValue: _,
   onChange: u,
   placeholder: g = "Select",
-  renderTrigger: _,
+  renderTrigger: N,
   searchable: Z,
-  size: N = "large",
-  width: P = "auto",
-  minWidth: M,
+  size: C = "large",
+  width: M = "auto",
+  minWidth: W,
   disabled: b = !1,
   error: E = !1,
-  loading: m = !1,
-  label: F,
-  name: ue,
+  loading: p = !1,
+  label: z,
+  name: fe,
   description: q,
-  tooltip: fe,
+  tooltip: me,
   hint: J,
-  rightSideContent: me,
+  rightSideContent: pe,
   required: Q = !1,
-  requiredIndicator: Ue,
+  requiredIndicator: Ve,
   formControl: he,
   chips: ee = !1,
   chipsRemovable: te = !0,
-  chipsMax: pe = "auto",
+  chipsMax: ge = "auto",
   inlineSearch: v = !1,
-  onSearchChange: W,
-  localFilter: ge = !0,
-  className: Ve = "",
-  style: Xe,
-  id: je,
-  "aria-label": be,
-  "aria-labelledby": Ze
+  onSearchChange: $,
+  localFilter: be = !0,
+  className: Xe = "",
+  style: je,
+  id: Ze,
+  "aria-label": ve,
+  "aria-labelledby": qe
 }) => {
-  const ve = ft(), xe = `${ve}-listbox`, ye = (e) => `${ve}-option-${e}`, { controlId: we, labelId: Ee, descriptionId: qe, hintId: Je, describedBy: Qe } = bt({
-    id: je,
-    label: F,
+  const xe = pt(), ye = `${xe}-listbox`, we = (e) => `${xe}-option-${e}`, { controlId: Ee, labelId: Ie, descriptionId: Je, hintId: Qe, describedBy: et } = xt({
+    id: Ze,
+    label: z,
     description: q,
     hint: J
-  }), [et, tt] = H(() => R ?? []), re = k !== void 0, f = re ? k : et, [o, Y] = H(!1), [c, Ie] = H(null), [L, rt] = H(""), [x, C] = H(-1), ne = T(null), $ = T(null), B = T(null), Se = T(null);
-  Nt(B, o);
-  const Te = T([]), ae = D(() => new Set(f), [f]), s = D(
+  }), [tt, rt] = P(() => _ ?? []), re = k !== void 0, f = re ? k : tt, [o, ne] = P(!1), [c, Se] = P(null), [R, nt] = P(""), [x, A] = P(-1), U = T(null), G = T(null), L = T(null), Te = T(null);
+  Pt(L, o);
+  const at = Ht("multiselect", o, L), ke = T([]), ae = H(() => new Set(f), [f]), s = H(
     () => n.filter((e) => ae.has(e.value)),
     [n, ae]
-  ), le = typeof pe == "number" ? pe : void 0, O = D(() => {
-    if (!ge) return n;
-    const e = L.trim().toLowerCase();
+  ), le = typeof ge == "number" ? ge : void 0, O = H(() => {
+    if (!be) return n;
+    const e = R.trim().toLowerCase();
     return e ? n.filter((t) => (t.searchText ?? (typeof t.label == "string" ? t.label : "")).toLowerCase().includes(e)) : n;
-  }, [n, L, ge]), oe = T(!1), ke = T(""), U = p(
+  }, [n, R, be]), oe = T(!1), Re = T(""), Y = m(
     (e, t) => {
-      ke.current !== e && (ke.current = e, t && (oe.current = !0), rt(e), W == null || W(e));
+      Re.current !== e && (Re.current = e, t && (oe.current = !0), nt(e), $ == null || $(e));
     },
-    [W]
-  ), se = p(
-    (e) => U(e, !0),
-    [U]
-  ), G = p(() => U("", !1), [U]);
-  Pe(() => {
-    oe.current && (C(-1), oe.current = !1);
-  }, [L]);
-  const nt = Z ?? (W !== void 0 || n.length > Mt), Le = v ? !1 : nt, A = p(() => {
-    const e = ne.current;
+    [$]
+  ), se = m(
+    (e) => Y(e, !0),
+    [Y]
+  ), F = m(() => Y("", !1), [Y]);
+  Me(() => {
+    oe.current && (A(-1), oe.current = !1);
+  }, [R]);
+  const lt = Z ?? ($ !== void 0 || n.length > Bt), _e = v ? !1 : lt, ie = m(() => {
+    var e, t;
+    ne(!1), (e = L.current) != null && e.contains(Tt()) && ((t = U.current) == null || t.focus());
+  }, []), D = m(() => {
+    const e = U.current;
     if (!e) return;
-    const t = Lt(B.current, {
+    const t = Ot(L.current, {
       triggerRect: e.getBoundingClientRect(),
       preset: "standard",
-      minWidth: M,
+      minWidth: W,
       viewportWidth: window.innerWidth,
       viewportHeight: window.innerHeight
     });
-    Ie(t);
-  }, [M]);
-  Pe(() => {
+    Se(t);
+  }, [W]);
+  Me(() => {
     var S;
     if (!o) {
-      G(), C(-1), Ie(null);
+      F(), A(-1), Se(null);
       return;
     }
-    A(), v && ((S = $.current) == null || S.focus());
-    const e = () => A(), t = (y) => {
-      const d = y.composedPath(), a = ne.current, i = B.current;
-      (!a || !d.includes(a)) && (!i || !d.includes(i)) && Y(!1);
-    }, l = kt(() => Y(!1));
+    D(), v && ((S = G.current) == null || S.focus());
+    const e = () => D(), t = (y) => {
+      const d = y.composedPath(), a = U.current, i = L.current;
+      (!a || !d.includes(a)) && (!i || !d.includes(i)) && ie();
+    }, l = Lt(ie);
     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), l();
     };
-  }, [o, A, v, G]), mt(() => {
+  }, [o, D, v, F, ie]), ht(() => {
     if (!o)
       return;
-    A();
-    const e = B.current;
+    D();
+    const e = L.current;
     if (!e || typeof ResizeObserver > "u")
       return;
-    const t = new ResizeObserver(() => A());
+    const t = new ResizeObserver(() => D());
     return t.observe(e), () => t.disconnect();
-  }, [o, A]);
-  const I = p(
+  }, [o, D]);
+  const I = m(
     (e) => {
-      re || tt(e), u == null || u(e);
+      re || rt(e), u == null || u(e);
     },
     [re, u]
-  ), V = p(
+  ), V = m(
     (e) => n.some((t) => t.value === e && t.disabled),
     [n]
-  ), ie = p(
+  ), ce = m(
     (e) => {
       V(e) || (f.includes(e) ? I(f.filter((t) => t !== e)) : I([...f, e]));
     },
     [f, I, V]
-  ), X = D(() => {
+  ), X = H(() => {
     const e = /* @__PURE__ */ new Set();
     for (const t of n)
       t.disabled && e.add(t.value);
     return e;
-  }, [n]), at = p(
+  }, [n]), ot = m(
     (e) => {
       e.stopPropagation();
       const t = f.filter((l) => X.has(l));
       I(t);
     },
     [I, f, X]
-  ), Re = p(
+  ), Le = m(
     (e, t) => {
       t.stopPropagation(), !V(e) && I(f.filter((l) => l !== e));
     },
     [f, I, V]
-  ), j = p(
+  ), j = m(
     (e) => {
-      if (!$t.has(e.key)) return;
+      if (!zt.has(e.key)) return;
       if (e.preventDefault(), e.stopPropagation(), !o) {
-        Y(!0);
+        ne(!0);
         return;
       }
       const t = O.length;
       if (t === 0) return;
       const l = (d) => {
         requestAnimationFrame(() => {
-          const a = Te.current[d], i = Se.current;
+          const a = ke.current[d], i = Te.current;
           if (!a || !i) return;
-          const h = a.offsetTop, De = h + a.offsetHeight, He = i.scrollTop, ct = He + i.clientHeight;
-          De > ct ? i.scrollTo({
-            top: De - i.clientHeight,
+          const h = a.offsetTop, He = h + a.offsetHeight, Pe = i.scrollTop, ut = Pe + i.clientHeight;
+          He > ut ? i.scrollTo({
+            top: He - i.clientHeight,
             behavior: "smooth"
-          }) : h < He && i.scrollTo({ top: h, behavior: "smooth" });
+          }) : h < Pe && i.scrollTo({ top: h, behavior: "smooth" });
         });
       }, S = (d) => {
         var i;
         let a = x;
         for (let h = 0; h < t; h++)
           if (a = d === 1 ? a < t - 1 ? a + 1 : 0 : a > 0 ? a - 1 : t - 1, !((i = O[a]) != null && i.disabled)) {
-            l(a), C(a);
+            l(a), A(a);
             return;
           }
       }, y = () => {
         var i;
         if (x < 0 || x >= t || (i = O[x]) != null && i.disabled) return;
         const d = O[x].value;
-        ie(d), G();
+        ce(d), F();
         const a = n.findIndex((h) => h.value === d);
-        C(a >= 0 ? a : -1), l(a >= 0 ? a : 0), requestAnimationFrame(() => {
+        A(a >= 0 ? a : -1), l(a >= 0 ? a : 0), requestAnimationFrame(() => {
           var h;
-          return (h = $.current) == null ? void 0 : h.focus();
+          return (h = G.current) == null ? void 0 : h.focus();
         });
       };
       switch (e.key) {
@@ -326,36 +331,36 @@ const Be = 0.6, Ge = 420, Bt = ({ option: n }) => {
         case ze:
           S(-1);
           break;
-        case Fe:
+        case Ue:
           y();
           break;
       }
     },
-    [o, O, x, ie, n, G]
-  ), Oe = p(
+    [o, O, x, ce, n, F]
+  ), Oe = m(
     (e) => {
-      if (e.key === Wt && L === "" && f.length > 0) {
+      if (e.key === Kt && R === "" && f.length > 0) {
         e.preventDefault(), I(f.slice(0, -1)), requestAnimationFrame(() => {
           var t;
-          return (t = $.current) == null ? void 0 : t.focus();
+          return (t = G.current) == null ? void 0 : t.focus();
         });
         return;
       }
       j(e);
     },
-    [j, L, f, I]
-  ), _e = s.length > 0 && !b && !m, lt = St({
+    [j, R, f, I]
+  ), Ne = s.length > 0 && !b && !p, st = Rt({
     disabled: b,
     error: E,
     open: o,
-    loading: m,
+    loading: p,
     hasSelection: s.length > 0
-  }), ce = D(() => v ? /* @__PURE__ */ r(
+  }), de = H(() => v ? /* @__PURE__ */ r(
     "input",
     {
-      ref: $,
+      ref: G,
       type: "text",
-      value: L,
+      value: R,
       onChange: (e) => se(e.target.value),
       onKeyDown: Oe,
       placeholder: s.length === 0 ? g : "",
@@ -366,14 +371,14 @@ const Be = 0.6, Ge = 420, Bt = ({ option: n }) => {
     }
   ) : null, [
     v,
-    L,
+    R,
     se,
     Oe,
     s.length,
     g
-  ]), ot = D(() => {
-    if (_ && s.length > 0)
-      return _(s);
+  ]), it = H(() => {
+    if (N && s.length > 0)
+      return N(s);
     if (ee && s.length > 0) {
       const e = le != null ? s.slice(0, le) : s, t = s.length - e.length;
       return /* @__PURE__ */ w(
@@ -385,12 +390,12 @@ const Be = 0.6, Ge = 420, Bt = ({ option: n }) => {
             e.map((l) => {
               const S = X.has(l.value);
               return /* @__PURE__ */ r(
-                Et,
+                St,
                 {
                   value: l.label,
                   type: "default",
                   textTransform: "none",
-                  onRemove: te && !b && !S ? (y) => Re(l.value, y) : void 0,
+                  onRemove: te && !b && !S ? (y) => Le(l.value, y) : void 0,
                   className: "shrink-0"
                 },
                 l.value
@@ -400,85 +405,85 @@ const Be = 0.6, Ge = 420, Bt = ({ option: n }) => {
               "+",
               t
             ] }),
-            ce
+            de
           ]
         }
       );
     }
-    return v && s.length === 0 ? ce : s.length === 0 ? /* @__PURE__ */ r("span", { className: "text-[var(--malachite-text-placeholder)]", children: g }) : s.length === 1 ? /* @__PURE__ */ r("span", { children: s[0].label }) : /* @__PURE__ */ r("span", { children: `${s.length} selected` });
+    return v && s.length === 0 ? de : s.length === 0 ? /* @__PURE__ */ r("span", { className: "text-[var(--malachite-text-placeholder)]", children: g }) : s.length === 1 ? /* @__PURE__ */ r("span", { children: s[0].label }) : /* @__PURE__ */ r("span", { children: `${s.length} selected` });
   }, [
     s,
-    _,
+    N,
     ee,
     le,
     te,
     b,
-    Re,
+    Le,
     v,
-    ce,
+    de,
     g,
     X
-  ]), st = n.length === 0 ? "No options available" : "No results found";
-  ht(() => {
-    o && Ot();
+  ]), ct = n.length === 0 ? "No options available" : "No results found";
+  gt(() => {
+    o && Dt();
   }, [o]);
-  const it = {
+  const dt = {
     position: "fixed",
     top: (c == null ? void 0 : c.top) ?? 0,
     left: (c == null ? void 0 : c.left) ?? 0,
     width: c == null ? void 0 : c.width,
-    background: K.standard.background,
-    border: K.standard.border,
-    borderRadius: K.standard.radius,
-    boxShadow: K.standard.shadow,
-    padding: K.standard.padding,
+    background: B.standard.background,
+    border: B.standard.border,
+    borderRadius: B.standard.radius,
+    boxShadow: B.standard.shadow,
+    padding: B.standard.padding,
     display: "flex",
     flexDirection: "column",
     gap: 4,
-    maxHeight: (c == null ? void 0 : c.maxHeight) ?? Rt,
-    fontSize: It[N],
+    maxHeight: (c == null ? void 0 : c.maxHeight) ?? Nt,
+    fontSize: kt[C],
     visibility: c ? "visible" : "hidden",
     opacity: c ? 1 : 0
-  }, Ne = !!(q || fe || J || me || ue || he || Q), Ce = Ne && !!F, Ae = /* @__PURE__ */ w(dt, { children: [
-    /* @__PURE__ */ w("div", { className: "relative", style: $e(P), children: [
+  }, Ce = !!(q || me || J || pe || fe || he || Q), Ae = Ce && !!z, De = /* @__PURE__ */ w(ft, { children: [
+    /* @__PURE__ */ w("div", { className: "relative", style: Ge(M), children: [
       /* @__PURE__ */ w(
         Ye,
         {
-          ref: ne,
-          id: we,
+          ref: U,
+          id: Ee,
           triggerRole: v ? "combobox" : ee && te ? "group" : "button",
-          disabled: b || m,
-          [Tt]: "",
+          disabled: b || p,
+          [_t]: "",
           "aria-haspopup": "listbox",
           "aria-expanded": o,
-          "aria-controls": o ? xe : void 0,
-          "aria-activedescendant": v && o && x >= 0 ? ye(x) : void 0,
-          "aria-labelledby": Ze ?? (Ce && !be ? Ee : void 0),
-          "aria-label": be ?? (Ce ? void 0 : F),
+          "aria-controls": o ? ye : void 0,
+          "aria-activedescendant": v && o && x >= 0 ? we(x) : void 0,
+          "aria-labelledby": qe ?? (Ae && !ve ? Ie : void 0),
+          "aria-label": ve ?? (Ae ? void 0 : z),
           "aria-invalid": E || void 0,
           "aria-required": Q || void 0,
-          "aria-describedby": Qe,
-          "aria-busy": m || void 0,
+          "aria-describedby": et,
+          "aria-busy": p || void 0,
           onClick: () => {
-            b || m || Y((e) => !e);
+            b || p || ne((e) => !e);
           },
           onKeyDown: j,
           style: {
             transition: "border-color 0.15s ease, box-shadow 0.15s ease",
-            ...lt,
-            ...Xe
+            ...st,
+            ...je
           },
-          className: `w-full ${Pt[N]} border border-solid flex items-center font-normal text-[var(--malachite-text-primary)] ${b || m ? "cursor-not-allowed" : "cursor-pointer"} ${Ve}`,
+          className: `w-full ${Ft[C]} border border-solid flex items-center font-normal text-[var(--malachite-text-primary)] ${b || p ? "cursor-not-allowed" : "cursor-pointer"} ${Ct} ${At} ${Xe}`,
           children: [
             /* @__PURE__ */ r(
               "span",
               {
-                className: `flex-1 min-w-0 text-left ${v ? "flex" : "truncate"} ${_e ? "pr-[18px]" : ""}`,
-                children: ot
+                className: `flex-1 min-w-0 text-left ${v ? "flex" : "truncate"} ${Ne ? "pr-[18px]" : ""}`,
+                children: it
               }
             ),
-            m ? /* @__PURE__ */ r("span", { className: "flex items-center justify-center shrink-0 size-[14px]", children: /* @__PURE__ */ r(wt, { size: "xxxsmall" }) }) : /* @__PURE__ */ r(
-              vt,
+            p ? /* @__PURE__ */ r("span", { className: "flex items-center justify-center shrink-0 size-[14px]", children: /* @__PURE__ */ r(It, { size: "xxxsmall" }) }) : /* @__PURE__ */ r(
+              yt,
               {
                 size: 13,
                 className: "shrink-0",
@@ -492,29 +497,29 @@ const Be = 0.6, Ge = 420, Bt = ({ option: n }) => {
           ]
         }
       ),
-      _e && /* @__PURE__ */ r(
+      Ne && /* @__PURE__ */ r(
         "button",
         {
           type: "button",
           "aria-label": "Clear selection",
-          onClick: at,
+          onClick: ot,
           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: "×"
         }
       )
     ] }),
-    o && pt(
+    o && bt(
       /* @__PURE__ */ w(
         "div",
         {
-          ref: B,
-          id: xe,
+          ref: L,
+          id: ye,
           role: "listbox",
           "aria-multiselectable": "true",
-          ..._t("multiselect"),
-          style: it,
+          ...at,
+          style: dt,
           children: [
-            Le && /* @__PURE__ */ w(
+            _e && /* @__PURE__ */ w(
               "div",
               {
                 style: {
@@ -529,7 +534,7 @@ const Be = 0.6, Ge = 420, Bt = ({ option: n }) => {
                 },
                 children: [
                   /* @__PURE__ */ r(
-                    yt,
+                    Et,
                     {
                       size: 13,
                       style: {
@@ -542,7 +547,7 @@ const Be = 0.6, Ge = 420, Bt = ({ option: n }) => {
                     "input",
                     {
                       type: "text",
-                      value: L,
+                      value: R,
                       onChange: (e) => se(e.target.value),
                       onKeyDown: j,
                       placeholder: "Search",
@@ -562,7 +567,7 @@ const Be = 0.6, Ge = 420, Bt = ({ option: n }) => {
                 ]
               }
             ),
-            Le && /* @__PURE__ */ r(
+            _e && /* @__PURE__ */ r(
               "div",
               {
                 "aria-hidden": "true",
@@ -577,7 +582,7 @@ const Be = 0.6, Ge = 420, Bt = ({ option: n }) => {
             /* @__PURE__ */ r(
               "div",
               {
-                ref: Se,
+                ref: Te,
                 style: {
                   display: "flex",
                   flexDirection: "column",
@@ -591,15 +596,15 @@ const Be = 0.6, Ge = 420, Bt = ({ option: n }) => {
                 },
                 children: O.length === 0 ? (
                   // `role="listbox"` admits only option/group children.
-                  /* @__PURE__ */ r("div", { role: "presentation", style: Ht, children: st })
+                  /* @__PURE__ */ r("div", { role: "presentation", style: Gt, children: ct })
                 ) : O.map((e, t) => {
                   const l = ae.has(e.value), S = t === x, y = !!e.disabled;
                   return /* @__PURE__ */ w(
                     "button",
                     {
-                      id: ye(t),
+                      id: we(t),
                       ref: (d) => {
-                        Te.current[t] = d;
+                        ke.current[t] = d;
                       },
                       type: "button",
                       role: "option",
@@ -607,11 +612,11 @@ const Be = 0.6, Ge = 420, Bt = ({ option: n }) => {
                       "aria-disabled": y || void 0,
                       onClick: () => {
                         var d;
-                        ie(e.value), G(), (d = $.current) == null || d.focus();
+                        ce(e.value), F(), (d = G.current) == null || d.focus();
                       },
-                      onMouseEnter: () => C(t),
+                      onMouseEnter: () => A(t),
                       onMouseLeave: () => {
-                        x === t && C(-1);
+                        x === t && A(-1);
                       },
                       className: "malachite-multiselect-option",
                       "data-checked": l,
@@ -633,7 +638,7 @@ const Be = 0.6, Ge = 420, Bt = ({ option: n }) => {
                         color: l ? "var(--malachite-accent-foreground, rgb(2, 122, 66))" : "var(--malachite-text-primary, rgb(10, 10, 10))"
                       },
                       children: [
-                        /* @__PURE__ */ r(Bt, { option: e }),
+                        /* @__PURE__ */ r(Ut, { option: e }),
                         e.badge && /* @__PURE__ */ r(
                           "span",
                           {
@@ -658,29 +663,29 @@ const Be = 0.6, Ge = 420, Bt = ({ option: n }) => {
       document.body
     )
   ] });
-  return Ne ? /* @__PURE__ */ r(
-    gt,
+  return Ce ? /* @__PURE__ */ r(
+    vt,
     {
-      label: F,
+      label: z,
       hint: J,
-      rightSideContent: me,
-      tooltip: fe,
-      name: ue ?? "",
+      rightSideContent: pe,
+      tooltip: me,
+      name: fe ?? "",
       required: Q,
-      requiredIndicator: Ue,
-      loading: m,
+      requiredIndicator: Ve,
+      loading: p,
       formControl: he,
       description: q,
-      controlId: we,
-      labelId: Ee,
-      descriptionId: qe,
-      hintId: Je,
-      loadingComponent: P === void 0 ? /* @__PURE__ */ r(Me, { heightClass: z[N] }) : /* @__PURE__ */ r("div", { style: $e(P), children: /* @__PURE__ */ r(Me, { heightClass: z[N] }) }),
-      children: Ae
+      controlId: Ee,
+      labelId: Ie,
+      descriptionId: Je,
+      hintId: Qe,
+      loadingComponent: M === void 0 ? /* @__PURE__ */ r(We, { heightClass: K[C] }) : /* @__PURE__ */ r("div", { style: Ge(M), children: /* @__PURE__ */ r(We, { heightClass: K[C] }) }),
+      children: De
     }
-  ) : Ae;
+  ) : De;
 };
 export {
-  sr as default
+  pr as default
 };
 //# sourceMappingURL=MultiSelect.js.map