@stackone/malachite 2.45.0 → 2.46.0

package/dist/components/MultiSelect.js

@@ -1,37 +1,38 @@
-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 { 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 { 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 $e from "./LoadingInput.js";
 import It from "./Spinner.js";
 import { Tag as St } from "./Tag.js";
-import $e from "./Tooltip.js";
+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 B } from "./floatingMenuGeometry.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 { 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 = {
+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 = {
   padding: "8px 10px",
   color: "var(--malachite-text-secondary, rgb(123, 123, 123))"
-}, K = {
+}, z = {
   small: "h-[var(--malachite-control-height-small,28px)]",
   medium: "h-[var(--malachite-control-height-medium,32px)]",
   large: "h-[var(--malachite-control-height-large,42px)]"
-}, 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(
+}, 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(
     "div",
     {
@@ -52,21 +53,21 @@ const Gt = {
     }
   )
 );
-Ye.displayName = "TriggerElement";
-const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
+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 = Wt(k.current), p = $t(_.current);
+    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(
-    $e,
+    Be,
     {
-      text: Mt([
+      text: Wt([
         ["label", N.label && n.label],
         ["description", M && n.description]
       ]),
       shouldShow: C,
       delay: Fe,
-      maxWidth: Be,
+      maxWidth: ze,
       triggerAs: "span",
       isShrinkable: !0,
       describesTrigger: u === "hover",
@@ -134,11 +135,11 @@ const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
       children: [
         W(b),
         u === "icon" && /* @__PURE__ */ r(
-          $e,
+          Be,
           {
             text: n.description,
             delay: Fe,
-            maxWidth: Be,
+            maxWidth: ze,
             children: /* @__PURE__ */ r(
               "span",
               {
@@ -156,7 +157,7 @@ const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
       ]
     }
   );
-}, pr = ({
+}, br = ({
   options: n,
   value: k,
   defaultValue: _,
@@ -170,54 +171,54 @@ const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
   disabled: b = !1,
   error: E = !1,
   loading: p = !1,
-  label: z,
-  name: fe,
+  label: K,
+  name: me,
   description: q,
-  tooltip: me,
+  tooltip: pe,
   hint: J,
-  rightSideContent: pe,
+  rightSideContent: he,
   required: Q = !1,
-  requiredIndicator: Ve,
-  formControl: he,
+  requiredIndicator: Xe,
+  formControl: ge,
   chips: ee = !1,
   chipsRemovable: te = !0,
-  chipsMax: ge = "auto",
+  chipsMax: be = "auto",
   inlineSearch: v = !1,
   onSearchChange: $,
-  localFilter: be = !0,
-  className: Xe = "",
-  style: je,
-  id: Ze,
-  "aria-label": ve,
-  "aria-labelledby": qe
+  localFilter: ve = !0,
+  className: je = "",
+  style: Ze,
+  id: qe,
+  "aria-label": xe,
+  "aria-labelledby": Je
 }) => {
-  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,
+  const ye = pt(), we = `${ye}-listbox`, Ee = (e) => `${ye}-option-${e}`, { controlId: Ie, labelId: Se, descriptionId: Qe, hintId: et, describedBy: tt } = xt({
+    id: qe,
+    label: K,
     description: q,
     hint: J
-  }), [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(
+  }), [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(
     () => n.filter((e) => ae.has(e.value)),
     [n, ae]
-  ), le = typeof ge == "number" ? ge : void 0, O = H(() => {
-    if (!be) return n;
+  ), le = typeof be == "number" ? be : void 0, O = H(() => {
+    if (!ve) 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, R, be]), oe = T(!1), Re = T(""), Y = m(
+  }, [n, R, ve]), oe = T(!1), _e = T(""), Y = m(
     (e, t) => {
-      Re.current !== e && (Re.current = e, t && (oe.current = !0), nt(e), $ == null || $(e));
+      _e.current !== e && (_e.current = e, t && (oe.current = !0), at(e), $ == null || $(e));
     },
     [$]
   ), se = m(
     (e) => Y(e, !0),
     [Y]
-  ), F = m(() => Y("", !1), [Y]);
-  Me(() => {
+  ), G = m(() => Y("", !1), [Y]);
+  We(() => {
     oe.current && (A(-1), oe.current = !1);
   }, [R]);
-  const lt = Z ?? ($ !== void 0 || n.length > Bt), _e = v ? !1 : lt, ie = m(() => {
+  const ot = Z ?? ($ !== void 0 || n.length > Kt), Le = v ? !1 : ot, ie = m(() => {
     var e, t;
     ne(!1), (e = L.current) != null && e.contains(Tt()) && ((t = U.current) == null || t.focus());
   }, []), D = m(() => {
@@ -230,15 +231,15 @@ const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
       viewportWidth: window.innerWidth,
       viewportHeight: window.innerHeight
     });
-    Se(t);
+    Te(t);
   }, [W]);
-  Me(() => {
+  We(() => {
     var S;
     if (!o) {
-      F(), A(-1), Se(null);
+      G(), A(-1), Te(null);
       return;
     }
-    D(), v && ((S = G.current) == null || S.focus());
+    D(), v && ((S = B.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();
@@ -246,7 +247,7 @@ const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
     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, D, v, F, ie]), ht(() => {
+  }, [o, D, v, G, ie]), ht(() => {
     if (!o)
       return;
     D();
@@ -258,7 +259,7 @@ const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
   }, [o, D]);
   const I = m(
     (e) => {
-      re || rt(e), u == null || u(e);
+      re || nt(e), u == null || u(e);
     },
     [re, u]
   ), V = m(
@@ -274,21 +275,21 @@ const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
     for (const t of n)
       t.disabled && e.add(t.value);
     return e;
-  }, [n]), ot = m(
+  }, [n]), st = m(
     (e) => {
       e.stopPropagation();
       const t = f.filter((l) => X.has(l));
       I(t);
     },
     [I, f, X]
-  ), Le = m(
+  ), Oe = m(
     (e, t) => {
       t.stopPropagation(), !V(e) && I(f.filter((l) => l !== e));
     },
     [f, I, V]
   ), j = m(
     (e) => {
-      if (!zt.has(e.key)) return;
+      if (!Yt.has(e.key)) return;
       if (e.preventDefault(), e.stopPropagation(), !o) {
         ne(!0);
         return;
@@ -297,13 +298,13 @@ const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
       if (t === 0) return;
       const l = (d) => {
         requestAnimationFrame(() => {
-          const a = ke.current[d], i = Te.current;
+          const a = Re.current[d], i = ke.current;
           if (!a || !i) return;
-          const h = a.offsetTop, He = h + a.offsetHeight, Pe = i.scrollTop, ut = Pe + i.clientHeight;
-          He > ut ? i.scrollTo({
-            top: He - i.clientHeight,
+          const h = a.offsetTop, Pe = h + a.offsetHeight, Me = i.scrollTop, ft = Me + i.clientHeight;
+          Pe > ft ? i.scrollTo({
+            top: Pe - i.clientHeight,
             behavior: "smooth"
-          }) : h < Pe && i.scrollTo({ top: h, behavior: "smooth" });
+          }) : h < Me && i.scrollTo({ top: h, behavior: "smooth" });
         });
       }, S = (d) => {
         var i;
@@ -317,39 +318,39 @@ const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
         var i;
         if (x < 0 || x >= t || (i = O[x]) != null && i.disabled) return;
         const d = O[x].value;
-        ce(d), F();
+        ce(d), G();
         const a = n.findIndex((h) => h.value === d);
         A(a >= 0 ? a : -1), l(a >= 0 ? a : 0), requestAnimationFrame(() => {
           var h;
-          return (h = G.current) == null ? void 0 : h.focus();
+          return (h = B.current) == null ? void 0 : h.focus();
         });
       };
       switch (e.key) {
         case Ke:
           S(1);
           break;
-        case ze:
+        case Ue:
           S(-1);
           break;
-        case Ue:
+        case Ye:
           y();
           break;
       }
     },
-    [o, O, x, ce, n, F]
-  ), Oe = m(
+    [o, O, x, ce, n, G]
+  ), Ne = m(
     (e) => {
-      if (e.key === Kt && R === "" && f.length > 0) {
+      if (e.key === Ut && R === "" && f.length > 0) {
         e.preventDefault(), I(f.slice(0, -1)), requestAnimationFrame(() => {
           var t;
-          return (t = G.current) == null ? void 0 : t.focus();
+          return (t = B.current) == null ? void 0 : t.focus();
         });
         return;
       }
       j(e);
     },
     [j, R, f, I]
-  ), Ne = s.length > 0 && !b && !p, st = Rt({
+  ), Ce = s.length > 0 && !b && !p, it = Rt({
     disabled: b,
     error: E,
     open: o,
@@ -358,11 +359,11 @@ const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
   }), de = H(() => v ? /* @__PURE__ */ r(
     "input",
     {
-      ref: G,
+      ref: B,
       type: "text",
       value: R,
       onChange: (e) => se(e.target.value),
-      onKeyDown: Oe,
+      onKeyDown: Ne,
       placeholder: s.length === 0 ? g : "",
       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) => {
@@ -373,10 +374,10 @@ const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
     v,
     R,
     se,
-    Oe,
+    Ne,
     s.length,
     g
-  ]), it = H(() => {
+  ]), ct = H(() => {
     if (N && s.length > 0)
       return N(s);
     if (ee && s.length > 0) {
@@ -395,7 +396,7 @@ const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
                   value: l.label,
                   type: "default",
                   textTransform: "none",
-                  onRemove: te && !b && !S ? (y) => Le(l.value, y) : void 0,
+                  onRemove: te && !b && !S ? (y) => Oe(l.value, y) : void 0,
                   className: "shrink-0"
                 },
                 l.value
@@ -418,25 +419,25 @@ const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
     le,
     te,
     b,
-    Le,
+    Oe,
     v,
     de,
     g,
     X
-  ]), ct = n.length === 0 ? "No options available" : "No results found";
+  ]), dt = n.length === 0 ? "No options available" : "No results found";
   gt(() => {
-    o && Dt();
+    o && Ht();
   }, [o]);
-  const dt = {
+  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: B.standard.background,
-    border: B.standard.border,
-    borderRadius: B.standard.radius,
-    boxShadow: B.standard.shadow,
-    padding: B.standard.padding,
+    background: F.standard.background,
+    border: F.standard.border,
+    borderRadius: F.standard.radius,
+    boxShadow: F.standard.shadow,
+    padding: F.standard.padding,
     display: "flex",
     flexDirection: "column",
     gap: 4,
@@ -444,25 +445,25 @@ const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
     fontSize: kt[C],
     visibility: c ? "visible" : "hidden",
     opacity: c ? 1 : 0
-  }, Ce = !!(q || me || J || pe || fe || he || Q), Ae = Ce && !!z, De = /* @__PURE__ */ w(ft, { children: [
+  }, Ae = !!(q || pe || J || he || me || ge || Q), De = Ae && !!K, He = /* @__PURE__ */ w(mt, { children: [
     /* @__PURE__ */ w("div", { className: "relative", style: Ge(M), children: [
       /* @__PURE__ */ w(
-        Ye,
+        Ve,
         {
           ref: U,
-          id: Ee,
+          id: Ie,
           triggerRole: v ? "combobox" : ee && te ? "group" : "button",
           disabled: b || p,
           [_t]: "",
           "aria-haspopup": "listbox",
           "aria-expanded": o,
-          "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-controls": o ? we : void 0,
+          "aria-activedescendant": v && o && x >= 0 ? Ee(x) : void 0,
+          "aria-labelledby": Je ?? (De && !xe ? Se : void 0),
+          "aria-label": xe ?? (De ? void 0 : K),
           "aria-invalid": E || void 0,
           "aria-required": Q || void 0,
-          "aria-describedby": et,
+          "aria-describedby": tt,
           "aria-busy": p || void 0,
           onClick: () => {
             b || p || ne((e) => !e);
@@ -470,16 +471,16 @@ const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
           onKeyDown: j,
           style: {
             transition: "border-color 0.15s ease, box-shadow 0.15s ease",
-            ...st,
-            ...je
+            ...it,
+            ...Ze
           },
-          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}`,
+          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}`,
           children: [
             /* @__PURE__ */ r(
               "span",
               {
-                className: `flex-1 min-w-0 text-left ${v ? "flex" : "truncate"} ${Ne ? "pr-[18px]" : ""}`,
-                children: it
+                className: `flex-1 min-w-0 text-left ${v ? "flex" : "truncate"} ${Ce ? "pr-[18px]" : ""}`,
+                children: ct
               }
             ),
             p ? /* @__PURE__ */ r("span", { className: "flex items-center justify-center shrink-0 size-[14px]", children: /* @__PURE__ */ r(It, { size: "xxxsmall" }) }) : /* @__PURE__ */ r(
@@ -497,12 +498,12 @@ const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
           ]
         }
       ),
-      Ne && /* @__PURE__ */ r(
+      Ce && /* @__PURE__ */ r(
         "button",
         {
           type: "button",
           "aria-label": "Clear selection",
-          onClick: ot,
+          onClick: st,
           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: "×"
         }
@@ -513,13 +514,13 @@ const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
         "div",
         {
           ref: L,
-          id: ye,
+          id: we,
           role: "listbox",
           "aria-multiselectable": "true",
-          ...at,
-          style: dt,
+          ...lt,
+          style: ut,
           children: [
-            _e && /* @__PURE__ */ w(
+            Le && /* @__PURE__ */ w(
               "div",
               {
                 style: {
@@ -567,7 +568,7 @@ const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
                 ]
               }
             ),
-            _e && /* @__PURE__ */ r(
+            Le && /* @__PURE__ */ r(
               "div",
               {
                 "aria-hidden": "true",
@@ -582,7 +583,7 @@ const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
             /* @__PURE__ */ r(
               "div",
               {
-                ref: Te,
+                ref: ke,
                 style: {
                   display: "flex",
                   flexDirection: "column",
@@ -596,15 +597,15 @@ const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
                 },
                 children: O.length === 0 ? (
                   // `role="listbox"` admits only option/group children.
-                  /* @__PURE__ */ r("div", { role: "presentation", style: Gt, children: ct })
+                  /* @__PURE__ */ r("div", { role: "presentation", style: Ft, children: dt })
                 ) : O.map((e, t) => {
                   const l = ae.has(e.value), S = t === x, y = !!e.disabled;
                   return /* @__PURE__ */ w(
                     "button",
                     {
-                      id: we(t),
+                      id: Ee(t),
                       ref: (d) => {
-                        ke.current[t] = d;
+                        Re.current[t] = d;
                       },
                       type: "button",
                       role: "option",
@@ -612,7 +613,7 @@ const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
                       "aria-disabled": y || void 0,
                       onClick: () => {
                         var d;
-                        ce(e.value), F(), (d = G.current) == null || d.focus();
+                        ce(e.value), G(), (d = B.current) == null || d.focus();
                       },
                       onMouseEnter: () => A(t),
                       onMouseLeave: () => {
@@ -638,8 +639,8 @@ const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
                         color: l ? "var(--malachite-accent-foreground, rgb(2, 122, 66))" : "var(--malachite-text-primary, rgb(10, 10, 10))"
                       },
                       children: [
-                        /* @__PURE__ */ r(Ut, { option: e }),
-                        e.badge && /* @__PURE__ */ r(
+                        /* @__PURE__ */ r(Vt, { option: e }),
+                        Dt(e.badge) && /* @__PURE__ */ r(
                           "span",
                           {
                             style: {
@@ -647,7 +648,7 @@ const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
                               flexShrink: 0,
                               paddingLeft: 8
                             },
-                            children: e.badge
+                            children: /* @__PURE__ */ r(fe.Suspense, { fallback: null, children: /* @__PURE__ */ r(Gt, { children: e.badge }) })
                           }
                         )
                       ]
@@ -663,29 +664,29 @@ const Fe = 0.6, Be = 420, Ut = ({ option: n }) => {
       document.body
     )
   ] });
-  return Ce ? /* @__PURE__ */ r(
+  return Ae ? /* @__PURE__ */ r(
     vt,
     {
-      label: z,
+      label: K,
       hint: J,
-      rightSideContent: pe,
-      tooltip: me,
-      name: fe ?? "",
+      rightSideContent: he,
+      tooltip: pe,
+      name: me ?? "",
       required: Q,
-      requiredIndicator: Ve,
+      requiredIndicator: Xe,
       loading: p,
-      formControl: he,
+      formControl: ge,
       description: q,
-      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
+      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] }) }),
+      children: He
     }
-  ) : De;
+  ) : He;
 };
 export {
-  pr as default
+  br as default
 };
 //# sourceMappingURL=MultiSelect.js.map