@stackone/malachite 2.47.1 → 2.47.2

package/dist/components/MultiSelect.js

@@ -1,5 +1,5 @@
 import { jsx as r, jsxs as w, Fragment as mt } from "react/jsx-runtime";
-import fe, { useId as pt, useState as P, useRef as T, useMemo as H, useCallback as m, useEffect as We, useLayoutEffect as ht, useInsertionEffect as gt } from "react";
+import fe, { useId as pt, useState as P, useRef as T, useMemo as H, useCallback as h, useEffect as We, 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";
@@ -12,68 +12,68 @@ import Be 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 F } from "./floatingMenuGeometry.js";
-import { FOCUS_RING as Ct, FOCUS_RING_WITHIN_INPUT as At } from "./focusRing.js";
-import { hasBadge as Dt } from "./hasBadge.js";
-import { ensureMultiSelectPanelStyles as Ht } from "./optionRowStyles.js";
-import { usePopupLayer as Pt } from "./overlayLayers.js";
-import { useTopLayer as Mt } from "./topLayer.js";
-import { tooltipLines as Wt, isCut as $t, isClamped as Bt } from "./truncatedLines.js";
-const Gt = fe.lazy(() => import("./ActionMenuTagHost.js")), Ft = {
+import { getTriggerVisual as Lt, DROPDOWN_TRIGGER_ATTR as Rt } from "./dropdownTriggerStyle.js";
+import { pushEscapeLayer as Ot } from "./escapeLayers.js";
+import { measureMenuGeometry as _t, MENU_MAX_HEIGHT_PX as Nt, MENU_SPECS as z } from "./floatingMenuGeometry.js";
+import { FOCUS_RING as Ct } from "./focusRing.js";
+import { hasBadge as At } from "./hasBadge.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 Bt = fe.lazy(() => import("./ActionMenuTagHost.js")), Gt = {
   padding: "8px 10px",
   color: "var(--malachite-text-secondary, rgb(123, 123, 123))"
-}, z = {
+}, F = {
   small: "h-[var(--malachite-control-height-small,28px)]",
   medium: "h-[var(--malachite-control-height-medium,32px)]",
   large: "h-[var(--malachite-control-height-large,42px)]"
 }, zt = {
-  small: `${z.small} gap-[6px] px-2.5 ${ue.small} rounded-[var(--malachite-radius-10,10px)]`,
-  medium: `${z.medium} gap-[8px] px-3 ${ue.medium} rounded-xl`,
-  large: `${z.large} gap-[10px] px-4 ${ue.large} rounded-[var(--malachite-radius-xxl,14px)]`
-}, Kt = 10, Ke = "ArrowDown", Ue = "ArrowUp", Ye = "Enter", Ut = "Backspace", Yt = /* @__PURE__ */ new Set([Ke, Ue, Ye]), Ve = fe.forwardRef(
-  ({ triggerRole: n, disabled: k, children: _, ...u }, g) => n !== "button" ? /* @__PURE__ */ r(
+  small: `${F.small} gap-[6px] px-2.5 ${ue.small} rounded-[var(--malachite-radius-10,10px)]`,
+  medium: `${F.medium} gap-[8px] px-3 ${ue.medium} rounded-xl`,
+  large: `${F.large} gap-[10px] px-4 ${ue.large} rounded-[var(--malachite-radius-xxl,14px)]`
+}, Ft = 10, Ke = "ArrowDown", Ye = "ArrowUp", Ue = "Enter", Kt = "Backspace", Yt = /* @__PURE__ */ new Set([Ke, Ye, Ue]), Ve = fe.forwardRef(
+  ({ triggerRole: n, disabled: k, children: R, ...u }, b) => n !== "button" ? /* @__PURE__ */ r(
     "div",
     {
-      ref: g,
+      ref: b,
       role: n,
       tabIndex: k ? -1 : 0,
       ...u,
-      children: _
+      children: R
     }
   ) : /* @__PURE__ */ r(
     "button",
     {
-      ref: g,
+      ref: b,
       type: "button",
       disabled: k,
       ...u,
-      children: _
+      children: R
     }
   )
 );
 Ve.displayName = "TriggerElement";
-const Fe = 0.6, ze = 420, Vt = ({ 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 = $t(k.current), p = Bt(_.current);
-    return !E && !p && u !== "hover" ? !1 : (Z({ label: E, subtitle: p }), !0);
-  }, M = u === "hover" || g && N.subtitle, W = (E) => /* @__PURE__ */ r(
+const ze = 0.6, Fe = 420, Ut = ({ option: n }) => {
+  const k = T(null), R = T(null), u = n.description ? n.descriptionMode ?? "icon" : null, b = u === "subtitle", [N, Z] = P({ label: !0, subtitle: !0 }), C = () => {
+    const E = Wt(k.current), f = $t(R.current);
+    return !E && !f && u !== "hover" ? !1 : (Z({ label: E, subtitle: f }), !0);
+  }, M = u === "hover" || b && N.subtitle, W = (E) => /* @__PURE__ */ r(
     Be,
     {
-      text: Wt([
+      text: Mt([
         ["label", N.label && n.label],
         ["description", M && n.description]
       ]),
       shouldShow: C,
-      delay: Fe,
-      maxWidth: ze,
+      delay: ze,
+      maxWidth: Fe,
       triggerAs: "span",
       isShrinkable: !0,
       describesTrigger: u === "hover",
       children: E
     }
-  ), b = /* @__PURE__ */ r(
+  ), p = /* @__PURE__ */ r(
     "span",
     {
       ref: k,
@@ -86,7 +86,7 @@ const Fe = 0.6, ze = 420, Vt = ({ option: n }) => {
       children: n.label
     }
   );
-  return g ? W(
+  return b ? W(
     /* @__PURE__ */ w(
       "span",
       {
@@ -99,11 +99,11 @@ const Fe = 0.6, ze = 420, Vt = ({ option: n }) => {
           gap: 2
         },
         children: [
-          b,
+          p,
           /* @__PURE__ */ r(
             "span",
             {
-              ref: _,
+              ref: R,
               style: {
                 fontSize: 12,
                 color: "var(--malachite-text-secondary, rgb(123, 123, 123))",
@@ -133,13 +133,13 @@ const Fe = 0.6, ze = 420, Vt = ({ option: n }) => {
         gap: 6
       },
       children: [
-        W(b),
+        W(p),
         u === "icon" && /* @__PURE__ */ r(
           Be,
           {
             text: n.description,
-            delay: Fe,
-            maxWidth: ze,
+            delay: ze,
+            maxWidth: Fe,
             children: /* @__PURE__ */ r(
               "span",
               {
@@ -157,20 +157,20 @@ const Fe = 0.6, ze = 420, Vt = ({ option: n }) => {
       ]
     }
   );
-}, br = ({
+}, gr = ({
   options: n,
   value: k,
-  defaultValue: _,
+  defaultValue: R,
   onChange: u,
-  placeholder: g = "Select",
+  placeholder: b = "Select",
   renderTrigger: N,
   searchable: Z,
   size: C = "large",
   width: M = "auto",
   minWidth: W,
-  disabled: b = !1,
+  disabled: p = !1,
   error: E = !1,
-  loading: p = !1,
+  loading: f = !1,
   label: K,
   name: me,
   description: q,
@@ -197,34 +197,34 @@ const Fe = 0.6, ze = 420, Vt = ({ option: n }) => {
     label: K,
     description: q,
     hint: J
-  }), [rt, nt] = P(() => _ ?? []), re = k !== void 0, f = re ? k : rt, [o, ne] = P(!1), [c, Te] = P(null), [R, at] = P(""), [x, A] = P(-1), U = T(null), B = T(null), L = T(null), ke = T(null);
-  Mt(L, o);
-  const lt = Pt("multiselect", o, L), Re = T([]), ae = H(() => new Set(f), [f]), s = H(
+  }), [rt, nt] = P(() => R ?? []), re = k !== void 0, m = re ? k : rt, [o, ne] = P(!1), [c, Te] = P(null), [L, at] = P(""), [x, A] = P(-1), Y = T(null), B = T(null), O = T(null), ke = T(null);
+  Pt(O, o);
+  const ot = Ht("multiselect", o, O), Le = T([]), ae = H(() => new Set(m), [m]), s = H(
     () => n.filter((e) => ae.has(e.value)),
     [n, ae]
-  ), le = typeof be == "number" ? be : void 0, O = H(() => {
+  ), oe = typeof be == "number" ? be : void 0, _ = H(() => {
     if (!ve) return n;
-    const e = R.trim().toLowerCase();
+    const e = L.trim().toLowerCase();
     return e ? n.filter((t) => (t.searchText ?? (typeof t.label == "string" ? t.label : "")).toLowerCase().includes(e)) : n;
-  }, [n, R, ve]), oe = T(!1), _e = T(""), Y = m(
+  }, [n, L, ve]), le = T(!1), Re = T(""), U = h(
     (e, t) => {
-      _e.current !== e && (_e.current = e, t && (oe.current = !0), at(e), $ == null || $(e));
+      Re.current !== e && (Re.current = e, t && (le.current = !0), at(e), $ == null || $(e));
     },
     [$]
-  ), se = m(
-    (e) => Y(e, !0),
-    [Y]
-  ), G = m(() => Y("", !1), [Y]);
+  ), se = h(
+    (e) => U(e, !0),
+    [U]
+  ), G = h(() => U("", !1), [U]);
   We(() => {
-    oe.current && (A(-1), oe.current = !1);
-  }, [R]);
-  const ot = Z ?? ($ !== void 0 || n.length > Kt), Le = v ? !1 : ot, ie = m(() => {
+    le.current && (A(-1), le.current = !1);
+  }, [L]);
+  const lt = Z ?? ($ !== void 0 || n.length > Ft), Oe = v ? !1 : lt, ie = h(() => {
     var e, t;
-    ne(!1), (e = L.current) != null && e.contains(Tt()) && ((t = U.current) == null || t.focus());
-  }, []), D = m(() => {
-    const e = U.current;
+    ne(!1), (e = O.current) != null && e.contains(Tt()) && ((t = Y.current) == null || t.focus());
+  }, []), D = h(() => {
+    const e = Y.current;
     if (!e) return;
-    const t = Ot(L.current, {
+    const t = _t(O.current, {
       triggerRect: e.getBoundingClientRect(),
       preset: "standard",
       minWidth: W,
@@ -241,9 +241,9 @@ const Fe = 0.6, ze = 420, Vt = ({ option: n }) => {
     }
     D(), v && ((S = B.current) == null || S.focus());
     const e = () => D(), t = (y) => {
-      const d = y.composedPath(), a = U.current, i = L.current;
+      const d = y.composedPath(), a = Y.current, i = O.current;
       (!a || !d.includes(a)) && (!i || !d.includes(i)) && ie();
-    }, l = Lt(ie);
+    }, l = Ot(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();
     };
@@ -251,97 +251,97 @@ const Fe = 0.6, ze = 420, Vt = ({ option: n }) => {
     if (!o)
       return;
     D();
-    const e = L.current;
+    const e = O.current;
     if (!e || typeof ResizeObserver > "u")
       return;
     const t = new ResizeObserver(() => D());
     return t.observe(e), () => t.disconnect();
   }, [o, D]);
-  const I = m(
+  const I = h(
     (e) => {
       re || nt(e), u == null || u(e);
     },
     [re, u]
-  ), V = m(
+  ), V = h(
     (e) => n.some((t) => t.value === e && t.disabled),
     [n]
-  ), ce = m(
+  ), ce = h(
     (e) => {
-      V(e) || (f.includes(e) ? I(f.filter((t) => t !== e)) : I([...f, e]));
+      V(e) || (m.includes(e) ? I(m.filter((t) => t !== e)) : I([...m, e]));
     },
-    [f, I, V]
+    [m, I, V]
   ), X = H(() => {
     const e = /* @__PURE__ */ new Set();
     for (const t of n)
       t.disabled && e.add(t.value);
     return e;
-  }, [n]), st = m(
+  }, [n]), st = h(
     (e) => {
       e.stopPropagation();
-      const t = f.filter((l) => X.has(l));
+      const t = m.filter((l) => X.has(l));
       I(t);
     },
-    [I, f, X]
-  ), Oe = m(
+    [I, m, X]
+  ), _e = h(
     (e, t) => {
-      t.stopPropagation(), !V(e) && I(f.filter((l) => l !== e));
+      t.stopPropagation(), !V(e) && I(m.filter((l) => l !== e));
     },
-    [f, I, V]
-  ), j = m(
+    [m, I, V]
+  ), j = h(
     (e) => {
       if (!Yt.has(e.key)) return;
       if (e.preventDefault(), e.stopPropagation(), !o) {
         ne(!0);
         return;
       }
-      const t = O.length;
+      const t = _.length;
       if (t === 0) return;
       const l = (d) => {
         requestAnimationFrame(() => {
-          const a = Re.current[d], i = ke.current;
+          const a = Le.current[d], i = ke.current;
           if (!a || !i) return;
-          const h = a.offsetTop, Pe = h + a.offsetHeight, Me = i.scrollTop, ft = Me + i.clientHeight;
+          const g = a.offsetTop, Pe = g + a.offsetHeight, Me = i.scrollTop, ft = Me + i.clientHeight;
           Pe > ft ? i.scrollTo({
             top: Pe - i.clientHeight,
             behavior: "smooth"
-          }) : h < Me && i.scrollTo({ top: h, behavior: "smooth" });
+          }) : g < Me && i.scrollTo({ top: g, 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)) {
+        for (let g = 0; g < t; g++)
+          if (a = d === 1 ? a < t - 1 ? a + 1 : 0 : a > 0 ? a - 1 : t - 1, !((i = _[a]) != null && i.disabled)) {
             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;
+        if (x < 0 || x >= t || (i = _[x]) != null && i.disabled) return;
+        const d = _[x].value;
         ce(d), G();
-        const a = n.findIndex((h) => h.value === d);
+        const a = n.findIndex((g) => g.value === d);
         A(a >= 0 ? a : -1), l(a >= 0 ? a : 0), requestAnimationFrame(() => {
-          var h;
-          return (h = B.current) == null ? void 0 : h.focus();
+          var g;
+          return (g = B.current) == null ? void 0 : g.focus();
         });
       };
       switch (e.key) {
         case Ke:
           S(1);
           break;
-        case Ue:
+        case Ye:
           S(-1);
           break;
-        case Ye:
+        case Ue:
           y();
           break;
       }
     },
-    [o, O, x, ce, n, G]
-  ), Ne = m(
+    [o, _, x, ce, n, G]
+  ), Ne = h(
     (e) => {
-      if (e.key === Ut && R === "" && f.length > 0) {
-        e.preventDefault(), I(f.slice(0, -1)), requestAnimationFrame(() => {
+      if (e.key === Kt && L === "" && m.length > 0) {
+        e.preventDefault(), I(m.slice(0, -1)), requestAnimationFrame(() => {
           var t;
           return (t = B.current) == null ? void 0 : t.focus();
         });
@@ -349,22 +349,23 @@ const Fe = 0.6, ze = 420, Vt = ({ option: n }) => {
       }
       j(e);
     },
-    [j, R, f, I]
-  ), Ce = s.length > 0 && !b && !p, it = Rt({
-    disabled: b,
+    [j, L, m, I]
+  ), Ce = s.length > 0 && !p && !f, it = Lt({
+    disabled: p,
     error: E,
     open: o,
-    loading: p,
+    loading: f,
     hasSelection: s.length > 0
   }), de = H(() => v ? /* @__PURE__ */ r(
     "input",
     {
       ref: B,
       type: "text",
-      value: R,
+      value: L,
       onChange: (e) => se(e.target.value),
       onKeyDown: Ne,
-      placeholder: s.length === 0 ? g : "",
+      disabled: p || f,
+      placeholder: s.length === 0 ? b : "",
       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) => {
         e.preventDefault();
@@ -372,16 +373,18 @@ const Fe = 0.6, ze = 420, Vt = ({ option: n }) => {
     }
   ) : null, [
     v,
-    R,
+    L,
     se,
     Ne,
+    p,
+    f,
     s.length,
-    g
+    b
   ]), ct = 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;
+      const e = oe != null ? s.slice(0, oe) : s, t = s.length - e.length;
       return /* @__PURE__ */ w(
         "div",
         {
@@ -396,7 +399,7 @@ const Fe = 0.6, ze = 420, Vt = ({ option: n }) => {
                   value: l.label,
                   type: "default",
                   textTransform: "none",
-                  onRemove: te && !b && !S ? (y) => Oe(l.value, y) : void 0,
+                  onRemove: te && !p && !S ? (y) => _e(l.value, y) : void 0,
                   className: "shrink-0"
                 },
                 l.value
@@ -411,33 +414,33 @@ const Fe = 0.6, ze = 420, Vt = ({ option: n }) => {
         }
       );
     }
-    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` });
+    return v && s.length === 0 ? de : s.length === 0 ? /* @__PURE__ */ r("span", { className: "text-[var(--malachite-text-placeholder)]", children: b }) : s.length === 1 ? /* @__PURE__ */ r("span", { children: s[0].label }) : /* @__PURE__ */ r("span", { children: `${s.length} selected` });
   }, [
     s,
     N,
     ee,
-    le,
+    oe,
     te,
-    b,
-    Oe,
+    p,
+    _e,
     v,
     de,
-    g,
+    b,
     X
   ]), dt = n.length === 0 ? "No options available" : "No results found";
   gt(() => {
-    o && Ht();
+    o && Dt();
   }, [o]);
   const ut = {
     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: F.standard.background,
-    border: F.standard.border,
-    borderRadius: F.standard.radius,
-    boxShadow: F.standard.shadow,
-    padding: F.standard.padding,
+    background: z.standard.background,
+    border: z.standard.border,
+    borderRadius: z.standard.radius,
+    boxShadow: z.standard.shadow,
+    padding: z.standard.padding,
     display: "flex",
     flexDirection: "column",
     gap: 4,
@@ -450,11 +453,12 @@ const Fe = 0.6, ze = 420, Vt = ({ option: n }) => {
       /* @__PURE__ */ w(
         Ve,
         {
-          ref: U,
+          ref: Y,
           id: Ie,
           triggerRole: v ? "combobox" : ee && te ? "group" : "button",
-          disabled: b || p,
-          [_t]: "",
+          disabled: p || f,
+          [Rt]: "",
+          "data-open": o || void 0,
           "aria-haspopup": "listbox",
           "aria-expanded": o,
           "aria-controls": o ? we : void 0,
@@ -464,9 +468,9 @@ const Fe = 0.6, ze = 420, Vt = ({ option: n }) => {
           "aria-invalid": E || void 0,
           "aria-required": Q || void 0,
           "aria-describedby": tt,
-          "aria-busy": p || void 0,
+          "aria-busy": f || void 0,
           onClick: () => {
-            b || p || ne((e) => !e);
+            p || f || ne((e) => !e);
           },
           onKeyDown: j,
           style: {
@@ -474,7 +478,7 @@ const Fe = 0.6, ze = 420, Vt = ({ option: n }) => {
             ...it,
             ...Ze
           },
-          className: `w-full ${zt[C]} border border-solid flex items-center font-normal text-[var(--malachite-text-primary)] ${b || p ? "cursor-not-allowed" : "cursor-pointer"} ${Ct} ${At} ${je}`,
+          className: `w-full ${zt[C]} border border-solid flex items-center font-normal text-[var(--malachite-text-primary)] ${p || f ? "cursor-not-allowed" : "cursor-pointer"} ${Ct} ${je}`,
           children: [
             /* @__PURE__ */ r(
               "span",
@@ -483,7 +487,7 @@ const Fe = 0.6, ze = 420, Vt = ({ option: n }) => {
                 children: ct
               }
             ),
-            p ? /* @__PURE__ */ r("span", { className: "flex items-center justify-center shrink-0 size-[14px]", children: /* @__PURE__ */ r(It, { size: "xxxsmall" }) }) : /* @__PURE__ */ r(
+            f ? /* @__PURE__ */ r("span", { className: "flex items-center justify-center shrink-0 size-[14px]", children: /* @__PURE__ */ r(It, { size: "xxxsmall" }) }) : /* @__PURE__ */ r(
               yt,
               {
                 size: 13,
@@ -513,14 +517,14 @@ const Fe = 0.6, ze = 420, Vt = ({ option: n }) => {
       /* @__PURE__ */ w(
         "div",
         {
-          ref: L,
+          ref: O,
           id: we,
           role: "listbox",
           "aria-multiselectable": "true",
-          ...lt,
+          ...ot,
           style: ut,
           children: [
-            Le && /* @__PURE__ */ w(
+            Oe && /* @__PURE__ */ w(
               "div",
               {
                 style: {
@@ -548,7 +552,7 @@ const Fe = 0.6, ze = 420, Vt = ({ option: n }) => {
                     "input",
                     {
                       type: "text",
-                      value: R,
+                      value: L,
                       onChange: (e) => se(e.target.value),
                       onKeyDown: j,
                       placeholder: "Search",
@@ -568,7 +572,7 @@ const Fe = 0.6, ze = 420, Vt = ({ option: n }) => {
                 ]
               }
             ),
-            Le && /* @__PURE__ */ r(
+            Oe && /* @__PURE__ */ r(
               "div",
               {
                 "aria-hidden": "true",
@@ -595,17 +599,17 @@ const Fe = 0.6, ze = 420, Vt = ({ option: n }) => {
                   scrollbarWidth: "thin",
                   scrollbarColor: "var(--malachite-text-placeholder, rgb(187, 187, 187)) transparent"
                 },
-                children: O.length === 0 ? (
+                children: _.length === 0 ? (
                   // `role="listbox"` admits only option/group children.
-                  /* @__PURE__ */ r("div", { role: "presentation", style: Ft, children: dt })
-                ) : O.map((e, t) => {
+                  /* @__PURE__ */ r("div", { role: "presentation", style: Gt, children: dt })
+                ) : _.map((e, t) => {
                   const l = ae.has(e.value), S = t === x, y = !!e.disabled;
                   return /* @__PURE__ */ w(
                     "button",
                     {
                       id: Ee(t),
                       ref: (d) => {
-                        Re.current[t] = d;
+                        Le.current[t] = d;
                       },
                       type: "button",
                       role: "option",
@@ -639,8 +643,8 @@ const Fe = 0.6, ze = 420, Vt = ({ option: n }) => {
                         color: l ? "var(--malachite-accent-foreground, rgb(2, 122, 66))" : "var(--malachite-text-primary, rgb(10, 10, 10))"
                       },
                       children: [
-                        /* @__PURE__ */ r(Vt, { option: e }),
-                        Dt(e.badge) && /* @__PURE__ */ r(
+                        /* @__PURE__ */ r(Ut, { option: e }),
+                        At(e.badge) && /* @__PURE__ */ r(
                           "span",
                           {
                             style: {
@@ -648,7 +652,7 @@ const Fe = 0.6, ze = 420, Vt = ({ option: n }) => {
                               flexShrink: 0,
                               paddingLeft: 8
                             },
-                            children: /* @__PURE__ */ r(fe.Suspense, { fallback: null, children: /* @__PURE__ */ r(Gt, { children: e.badge }) })
+                            children: /* @__PURE__ */ r(fe.Suspense, { fallback: null, children: /* @__PURE__ */ r(Bt, { children: e.badge }) })
                           }
                         )
                       ]
@@ -674,19 +678,19 @@ const Fe = 0.6, ze = 420, Vt = ({ option: n }) => {
       name: me ?? "",
       required: Q,
       requiredIndicator: Xe,
-      loading: p,
+      loading: f,
       formControl: ge,
       description: q,
       controlId: Ie,
       labelId: Se,
       descriptionId: Qe,
       hintId: et,
-      loadingComponent: M === void 0 ? /* @__PURE__ */ r($e, { heightClass: z[C] }) : /* @__PURE__ */ r("div", { style: Ge(M), children: /* @__PURE__ */ r($e, { heightClass: z[C] }) }),
+      loadingComponent: M === void 0 ? /* @__PURE__ */ r($e, { heightClass: F[C] }) : /* @__PURE__ */ r("div", { style: Ge(M), children: /* @__PURE__ */ r($e, { heightClass: F[C] }) }),
       children: He
     }
   ) : He;
 };
 export {
-  br as default
+  gr as default
 };
 //# sourceMappingURL=MultiSelect.js.map