@stackone/malachite 2.27.0 → 2.27.1

package/dist/components/MultiSelect.js

@@ -1,387 +1,491 @@
-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 { 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 bt from "./Spinner.js";
-import { Tag as yt } from "./Tag.js";
-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 = {
+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 = {
   padding: "8px 10px",
   color: "var(--malachite-text-secondary, rgb(123, 123, 123))"
-}, P = {
+}, 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)]"
-}, 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(
+}, 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(
     "div",
     {
-      ref: I,
-      role: i,
-      tabIndex: N ? -1 : 0,
-      ...E,
-      children: W
+      ref: g,
+      role: n,
+      tabIndex: k ? -1 : 0,
+      ...u,
+      children: R
     }
   ) : /* @__PURE__ */ r(
     "button",
     {
-      ref: I,
+      ref: g,
       type: "button",
-      disabled: N,
-      ...E,
-      children: W
+      disabled: k,
+      ...u,
+      children: R
     }
   )
 );
-Ke.displayName = "TriggerElement";
-const er = ({
-  options: i,
-  value: N,
-  defaultValue: W,
-  onChange: E,
-  placeholder: I = "Select",
-  renderTrigger: U,
-  searchable: ze,
-  size: $ = "large",
-  width: V = "auto",
-  minWidth: se,
-  disabled: S = !1,
-  error: ce = !1,
-  loading: y = !1,
-  label: B,
-  name: de,
-  description: j,
-  tooltip: ue,
-  hint: X,
-  rightSideContent: fe,
-  required: Z = !1,
-  requiredIndicator: Fe,
-  formControl: me,
-  chips: q = !1,
-  chipsRemovable: J = !0,
-  chipsMax: he = "auto",
-  inlineSearch: h = !1,
-  onSearchChange: O,
-  localFilter: pe = !0,
-  className: Ye = "",
-  style: Ue,
-  id: Ve,
-  "aria-label": ge,
-  "aria-labelledby": je
+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,
+    {
+      text: Ct([
+        ["label", _.label && n.label],
+        ["description", P && n.description]
+      ]),
+      shouldShow: N,
+      delay: Be,
+      maxWidth: Ge,
+      triggerAs: "span",
+      isShrinkable: !0,
+      describesTrigger: u === "hover",
+      children: E
+    }
+  ), b = /* @__PURE__ */ r(
+    "span",
+    {
+      ref: k,
+      style: {
+        display: "block",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      },
+      children: n.label
+    }
+  );
+  return g ? M(
+    /* @__PURE__ */ w(
+      "span",
+      {
+        style: {
+          flex: 1,
+          minWidth: 0,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "stretch",
+          gap: 2
+        },
+        children: [
+          b,
+          /* @__PURE__ */ r(
+            "span",
+            {
+              ref: R,
+              style: {
+                fontSize: 12,
+                color: "var(--malachite-text-secondary, rgb(123, 123, 123))",
+                whiteSpace: "normal",
+                lineHeight: 1.3,
+                ...n.descriptionMaxLines ? {
+                  display: "-webkit-box",
+                  WebkitLineClamp: n.descriptionMaxLines,
+                  WebkitBoxOrient: "vertical",
+                  overflow: "hidden"
+                } : {}
+              },
+              children: n.description
+            }
+          )
+        ]
+      }
+    )
+  ) : /* @__PURE__ */ w(
+    "span",
+    {
+      style: {
+        flex: 1,
+        minWidth: 0,
+        display: "flex",
+        alignItems: "center",
+        gap: 6
+      },
+      children: [
+        M(b),
+        u === "icon" && /* @__PURE__ */ r(
+          We,
+          {
+            text: n.description,
+            delay: Be,
+            maxWidth: Ge,
+            children: /* @__PURE__ */ r(
+              "span",
+              {
+                style: {
+                  cursor: "help",
+                  color: "var(--malachite-text-placeholder, rgb(187, 187, 187))"
+                },
+                "aria-label": "More information",
+                onClick: (E) => E.stopPropagation(),
+                children: n.descriptionIcon ?? /* @__PURE__ */ r(xt, { size: 14 })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}, sr = ({
+  options: n,
+  value: k,
+  defaultValue: R,
+  onChange: u,
+  placeholder: g = "Select",
+  renderTrigger: _,
+  searchable: Z,
+  size: N = "large",
+  width: P = "auto",
+  minWidth: M,
+  disabled: b = !1,
+  error: E = !1,
+  loading: m = !1,
+  label: F,
+  name: ue,
+  description: q,
+  tooltip: fe,
+  hint: J,
+  rightSideContent: me,
+  required: Q = !1,
+  requiredIndicator: Ue,
+  formControl: he,
+  chips: ee = !1,
+  chipsRemovable: te = !0,
+  chipsMax: pe = "auto",
+  inlineSearch: v = !1,
+  onSearchChange: W,
+  localFilter: ge = !0,
+  className: Ve = "",
+  style: Xe,
+  id: je,
+  "aria-label": be,
+  "aria-labelledby": Ze
 }) => {
-  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
-  }), [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, pe]), ne = R(!1), ke = R(""), K = m(
+  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,
+    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(
+    () => 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();
+    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(
     (e, t) => {
-      ke.current !== e && (ke.current = e, t && (ne.current = !0), et(e), O == null || O(e));
+      ke.current !== e && (ke.current = e, t && (oe.current = !0), rt(e), W == null || W(e));
     },
-    [O]
-  ), ae = m(
-    (e) => K(e, !0),
-    [K]
-  ), D = m(() => K("", !1), [K]);
-  He(() => {
-    ne.current && (T(-1), ne.current = !1);
-  }, [w]);
-  const tt = ze ?? (O !== void 0 || i.length > At), Re = h ? !1 : tt, L = m(() => {
-    const e = ee.current;
+    [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;
     if (!e) return;
-    const t = kt(C.current, {
+    const t = Lt(B.current, {
       triggerRect: e.getBoundingClientRect(),
       preset: "standard",
-      minWidth: se,
+      minWidth: M,
       viewportWidth: window.innerWidth,
       viewportHeight: window.innerHeight
     });
-    Ee(t);
-  }, [se]);
-  He(() => {
-    var x;
-    if (!s) {
-      D(), T(-1), Ee(null);
+    Ie(t);
+  }, [M]);
+  Pe(() => {
+    var S;
+    if (!o) {
+      G(), C(-1), Ie(null);
       return;
     }
-    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));
+    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));
     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();
     };
-  }, [s, L, h, D]), ut(() => {
-    if (!s)
+  }, [o, A, v, G]), mt(() => {
+    if (!o)
       return;
-    L();
-    const e = C.current;
+    A();
+    const e = B.current;
     if (!e || typeof ResizeObserver > "u")
       return;
-    const t = new ResizeObserver(() => L());
+    const t = new ResizeObserver(() => A());
     return t.observe(e), () => t.disconnect();
-  }, [s, L]);
-  const v = m(
+  }, [o, A]);
+  const I = p(
     (e) => {
-      Q || Qe(e), E == null || E(e);
+      re || tt(e), u == null || u(e);
     },
-    [Q, E]
-  ), z = m(
-    (e) => i.some((t) => t.value === e && t.disabled),
-    [i]
-  ), le = m(
+    [re, u]
+  ), V = p(
+    (e) => n.some((t) => t.value === e && t.disabled),
+    [n]
+  ), ie = p(
     (e) => {
-      z(e) || (u.includes(e) ? v(u.filter((t) => t !== e)) : v([...u, e]));
+      V(e) || (f.includes(e) ? I(f.filter((t) => t !== e)) : I([...f, e]));
     },
-    [u, v, z]
-  ), F = _(() => {
+    [f, I, V]
+  ), X = D(() => {
     const e = /* @__PURE__ */ new Set();
-    for (const t of i)
+    for (const t of n)
       t.disabled && e.add(t.value);
     return e;
-  }, [i]), rt = m(
+  }, [n]), at = p(
     (e) => {
       e.stopPropagation();
-      const t = u.filter((l) => F.has(l));
-      v(t);
+      const t = f.filter((l) => X.has(l));
+      I(t);
     },
-    [v, u, F]
-  ), Te = m(
+    [I, f, X]
+  ), Re = p(
     (e, t) => {
-      t.stopPropagation(), !z(e) && v(u.filter((l) => l !== e));
+      t.stopPropagation(), !V(e) && I(f.filter((l) => l !== e));
     },
-    [u, v, z]
-  ), Y = m(
+    [f, I, V]
+  ), j = p(
     (e) => {
-      if (!Dt.has(e.key)) return;
-      if (e.preventDefault(), e.stopPropagation(), !s) {
-        G(!0);
+      if (!$t.has(e.key)) return;
+      if (e.preventDefault(), e.stopPropagation(), !o) {
+        Y(!0);
         return;
       }
-      const t = k.length;
+      const t = O.length;
       if (t === 0) return;
-      const l = (a) => {
+      const l = (d) => {
         requestAnimationFrame(() => {
-          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,
+          const a = Te.current[d], i = Se.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,
             behavior: "smooth"
-          }) : f < De && o.scrollTo({ top: f, behavior: "smooth" });
+          }) : h < He && i.scrollTo({ top: h, behavior: "smooth" });
         });
-      }, 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);
+      }, 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);
             return;
           }
-      }, 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();
+      }, y = () => {
+        var i;
+        if (x < 0 || x >= t || (i = O[x]) != null && i.disabled) return;
+        const d = O[x].value;
+        ie(d), G();
+        const a = n.findIndex((h) => h.value === d);
+        C(a >= 0 ? a : -1), l(a >= 0 ? a : 0), requestAnimationFrame(() => {
+          var h;
+          return (h = $.current) == null ? void 0 : h.focus();
         });
       };
       switch (e.key) {
-        case $e:
-          x(1);
+        case Ke:
+          S(1);
           break;
-        case Be:
-          x(-1);
+        case ze:
+          S(-1);
           break;
-        case Ge:
-          g();
+        case Fe:
+          y();
           break;
       }
     },
-    [s, k, p, le, i, D]
-  ), Le = m(
+    [o, O, x, ie, n, G]
+  ), Oe = p(
     (e) => {
-      if (e.key === Ct && w === "" && u.length > 0) {
-        e.preventDefault(), v(u.slice(0, -1)), requestAnimationFrame(() => {
+      if (e.key === Wt && L === "" && f.length > 0) {
+        e.preventDefault(), I(f.slice(0, -1)), requestAnimationFrame(() => {
           var t;
-          return (t = A.current) == null ? void 0 : t.focus();
+          return (t = $.current) == null ? void 0 : t.focus();
         });
         return;
       }
-      Y(e);
+      j(e);
     },
-    [Y, w, u, v]
-  ), _e = c.length > 0 && !S && !y, nt = Et({
-    disabled: S,
-    error: ce,
-    open: s,
-    loading: y,
-    hasSelection: c.length > 0
-  }), oe = _(() => h ? /* @__PURE__ */ r(
+    [j, L, f, I]
+  ), _e = s.length > 0 && !b && !m, lt = St({
+    disabled: b,
+    error: E,
+    open: o,
+    loading: m,
+    hasSelection: s.length > 0
+  }), ce = D(() => v ? /* @__PURE__ */ r(
     "input",
     {
-      ref: A,
+      ref: $,
       type: "text",
-      value: w,
-      onChange: (e) => ae(e.target.value),
-      onKeyDown: Le,
-      placeholder: c.length === 0 ? I : "",
+      value: L,
+      onChange: (e) => se(e.target.value),
+      onKeyDown: Oe,
+      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) => {
         e.preventDefault();
       }
     }
   ) : null, [
-    h,
-    w,
-    ae,
-    Le,
-    c.length,
-    I
-  ]), at = _(() => {
-    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(
+    v,
+    L,
+    se,
+    Oe,
+    s.length,
+    g
+  ]), ot = D(() => {
+    if (_ && s.length > 0)
+      return _(s);
+    if (ee && s.length > 0) {
+      const e = le != null ? s.slice(0, le) : s, t = s.length - e.length;
+      return /* @__PURE__ */ w(
         "div",
         {
           className: "flex items-center gap-1 overflow-hidden min-w-0 flex-1",
           style: { flexWrap: "nowrap" },
           children: [
             e.map((l) => {
-              const x = F.has(l.value);
+              const S = X.has(l.value);
               return /* @__PURE__ */ r(
-                yt,
+                Et,
                 {
                   value: l.label,
                   type: "default",
                   textTransform: "none",
-                  onRemove: J && !S && !x ? (g) => Te(l.value, g) : void 0,
+                  onRemove: te && !b && !S ? (y) => Re(l.value, y) : void 0,
                   className: "shrink-0"
                 },
                 l.value
               );
             }),
-            t > 0 && /* @__PURE__ */ b("span", { className: "shrink-0 text-xs text-[var(--malachite-text-secondary,rgb(123,123,123))]", children: [
+            t > 0 && /* @__PURE__ */ w("span", { className: "shrink-0 text-xs text-[var(--malachite-text-secondary,rgb(123,123,123))]", children: [
               "+",
               t
             ] }),
-            oe
+            ce
           ]
         }
       );
     }
-    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` });
+    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` });
   }, [
-    c,
-    U,
-    q,
-    re,
-    J,
-    S,
-    Te,
-    h,
-    oe,
-    I,
-    F
-  ]), lt = i.length === 0 ? "No options available" : "No results found";
-  ft(() => {
-    s && Tt();
-  }, [s]);
-  const ot = {
+    s,
+    _,
+    ee,
+    le,
+    te,
+    b,
+    Re,
+    v,
+    ce,
+    g,
+    X
+  ]), st = n.length === 0 ? "No options available" : "No results found";
+  ht(() => {
+    o && Ot();
+  }, [o]);
+  const it = {
     position: "fixed",
-    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,
+    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,
     display: "flex",
     flexDirection: "column",
     gap: 4,
-    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,
+    maxHeight: (c == null ? void 0 : c.maxHeight) ?? Rt,
+    fontSize: It[N],
+    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: [
+      /* @__PURE__ */ w(
+        Ye,
         {
-          ref: ee,
-          id: ye,
-          triggerRole: h ? "combobox" : q && J ? "group" : "button",
-          disabled: S || y,
-          [It]: "",
+          ref: ne,
+          id: we,
+          triggerRole: v ? "combobox" : ee && te ? "group" : "button",
+          disabled: b || m,
+          [Tt]: "",
           "aria-haspopup": "listbox",
-          "aria-expanded": s,
-          "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,
+          "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-invalid": E || void 0,
+          "aria-required": Q || void 0,
+          "aria-describedby": Qe,
+          "aria-busy": m || void 0,
           onClick: () => {
-            S || y || G((e) => !e);
+            b || m || Y((e) => !e);
           },
-          onKeyDown: Y,
+          onKeyDown: j,
           style: {
             transition: "border-color 0.15s ease, box-shadow 0.15s ease",
-            ...nt,
-            ...Ue
+            ...lt,
+            ...Xe
           },
-          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}`,
+          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}`,
           children: [
             /* @__PURE__ */ r(
               "span",
               {
-                className: `flex-1 min-w-0 text-left ${h ? "flex" : "truncate"} ${_e ? "pr-[18px]" : ""}`,
-                children: at
+                className: `flex-1 min-w-0 text-left ${v ? "flex" : "truncate"} ${_e ? "pr-[18px]" : ""}`,
+                children: ot
               }
             ),
-            y ? /* @__PURE__ */ r("span", { className: "flex items-center justify-center shrink-0 size-[14px]", children: /* @__PURE__ */ r(bt, { size: "xxxsmall" }) }) : /* @__PURE__ */ r(
-              gt,
+            m ? /* @__PURE__ */ r("span", { className: "flex items-center justify-center shrink-0 size-[14px]", children: /* @__PURE__ */ r(wt, { size: "xxxsmall" }) }) : /* @__PURE__ */ r(
+              vt,
               {
                 size: 13,
                 className: "shrink-0",
                 style: {
-                  color: s ? "var(--malachite-text-primary, rgb(10, 10, 10))" : "var(--malachite-text-placeholder, rgb(187, 187, 187))",
+                  color: o ? "var(--malachite-text-primary, rgb(10, 10, 10))" : "var(--malachite-text-placeholder, rgb(187, 187, 187))",
                   transition: "transform 0.2s ease, color 0.2s ease",
-                  transform: s ? "rotate(180deg)" : "rotate(0deg)"
+                  transform: o ? "rotate(180deg)" : "rotate(0deg)"
                 }
               }
             )
@@ -393,24 +497,24 @@ const er = ({
         {
           type: "button",
           "aria-label": "Clear selection",
-          onClick: rt,
+          onClick: at,
           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 && mt(
-      /* @__PURE__ */ b(
+    o && pt(
+      /* @__PURE__ */ w(
         "div",
         {
-          ref: C,
+          ref: B,
           id: xe,
           role: "listbox",
           "aria-multiselectable": "true",
-          ...Lt("multiselect"),
-          style: ot,
+          ..._t("multiselect"),
+          style: it,
           children: [
-            Re && /* @__PURE__ */ b(
+            Le && /* @__PURE__ */ w(
               "div",
               {
                 style: {
@@ -425,7 +529,7 @@ const er = ({
                 },
                 children: [
                   /* @__PURE__ */ r(
-                    xt,
+                    yt,
                     {
                       size: 13,
                       style: {
@@ -438,9 +542,9 @@ const er = ({
                     "input",
                     {
                       type: "text",
-                      value: w,
-                      onChange: (e) => ae(e.target.value),
-                      onKeyDown: Y,
+                      value: L,
+                      onChange: (e) => se(e.target.value),
+                      onKeyDown: j,
                       placeholder: "Search",
                       "aria-label": "Search options",
                       autoFocus: !0,
@@ -458,7 +562,7 @@ const er = ({
                 ]
               }
             ),
-            Re && /* @__PURE__ */ r(
+            Le && /* @__PURE__ */ r(
               "div",
               {
                 "aria-hidden": "true",
@@ -473,7 +577,7 @@ const er = ({
             /* @__PURE__ */ r(
               "div",
               {
-                ref: Ie,
+                ref: Se,
                 style: {
                   display: "flex",
                   flexDirection: "column",
@@ -485,34 +589,34 @@ const er = ({
                   scrollbarWidth: "thin",
                   scrollbarColor: "var(--malachite-text-placeholder, rgb(187, 187, 187)) transparent"
                 },
-                children: k.length === 0 ? (
+                children: O.length === 0 ? (
                   // `role="listbox"` admits only option/group children.
-                  /* @__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(
+                  /* @__PURE__ */ r("div", { role: "presentation", style: Ht, children: st })
+                ) : O.map((e, t) => {
+                  const l = ae.has(e.value), S = t === x, y = !!e.disabled;
+                  return /* @__PURE__ */ w(
                     "button",
                     {
-                      id: be(t),
-                      ref: (a) => {
-                        Se.current[t] = a;
+                      id: ye(t),
+                      ref: (d) => {
+                        Te.current[t] = d;
                       },
                       type: "button",
                       role: "option",
                       "aria-selected": l,
-                      "aria-disabled": g || void 0,
+                      "aria-disabled": y || void 0,
                       onClick: () => {
-                        var a;
-                        le(e.value), D(), (a = A.current) == null || a.focus();
+                        var d;
+                        ie(e.value), G(), (d = $.current) == null || d.focus();
                       },
-                      onMouseEnter: () => T(t),
+                      onMouseEnter: () => C(t),
                       onMouseLeave: () => {
-                        p === t && T(-1);
+                        x === t && C(-1);
                       },
                       className: "malachite-multiselect-option",
                       "data-checked": l,
-                      "data-highlighted": x,
-                      "data-disabled": g,
+                      "data-highlighted": S,
+                      "data-disabled": y,
                       style: {
                         display: "flex",
                         alignItems: "center",
@@ -524,86 +628,12 @@ const er = ({
                         borderRadius: 8,
                         padding: "8px 10px",
                         font: "inherit",
-                        cursor: g ? "not-allowed" : "pointer",
-                        opacity: g ? 0.6 : 1,
+                        cursor: y ? "not-allowed" : "pointer",
+                        opacity: y ? 0.6 : 1,
                         color: l ? "var(--malachite-accent-foreground, rgb(2, 122, 66))" : "var(--malachite-text-primary, rgb(10, 10, 10))"
                       },
                       children: [
-                        (() => {
-                          const a = e.description ? e.descriptionMode ?? "icon" : null, n = a === "subtitle", o = /* @__PURE__ */ r(
-                            "span",
-                            {
-                              style: {
-                                overflow: "hidden",
-                                textOverflow: "ellipsis",
-                                whiteSpace: "nowrap"
-                              },
-                              children: e.label
-                            }
-                          );
-                          return /* @__PURE__ */ b(
-                            "span",
-                            {
-                              style: {
-                                flex: 1,
-                                minWidth: 0,
-                                display: "flex",
-                                flexDirection: n ? "column" : "row",
-                                alignItems: n ? "flex-start" : "center",
-                                gap: n ? 2 : 6
-                              },
-                              children: [
-                                a === "hover" ? /* @__PURE__ */ r(
-                                  Pe,
-                                  {
-                                    text: e.description,
-                                    delay: 0.6,
-                                    maxWidth: 420,
-                                    children: o
-                                  }
-                                ) : o,
-                                a === "icon" && /* @__PURE__ */ r(
-                                  Pe,
-                                  {
-                                    text: e.description,
-                                    delay: 0.6,
-                                    maxWidth: 420,
-                                    children: /* @__PURE__ */ r(
-                                      "span",
-                                      {
-                                        style: {
-                                          cursor: "help",
-                                          color: "var(--malachite-text-placeholder, rgb(187, 187, 187))"
-                                        },
-                                        "aria-label": "More information",
-                                        onClick: (f) => f.stopPropagation(),
-                                        children: e.descriptionIcon ?? /* @__PURE__ */ r(vt, { size: 14 })
-                                      }
-                                    )
-                                  }
-                                ),
-                                a === "subtitle" && /* @__PURE__ */ r(
-                                  "span",
-                                  {
-                                    style: {
-                                      fontSize: 12,
-                                      color: "var(--malachite-text-secondary, rgb(123, 123, 123))",
-                                      whiteSpace: "normal",
-                                      lineHeight: 1.3,
-                                      ...e.descriptionMaxLines ? {
-                                        display: "-webkit-box",
-                                        WebkitLineClamp: e.descriptionMaxLines,
-                                        WebkitBoxOrient: "vertical",
-                                        overflow: "hidden"
-                                      } : {}
-                                    },
-                                    children: e.description
-                                  }
-                                )
-                              ]
-                            }
-                          );
-                        })(),
+                        /* @__PURE__ */ r(Bt, { option: e }),
                         e.badge && /* @__PURE__ */ r(
                           "span",
                           {
@@ -629,28 +659,28 @@ const er = ({
     )
   ] });
   return Ne ? /* @__PURE__ */ r(
-    ht,
+    gt,
     {
-      label: B,
-      hint: X,
-      rightSideContent: fe,
-      tooltip: ue,
-      name: de ?? "",
-      required: Z,
-      requiredIndicator: Fe,
-      loading: y,
-      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[$] }) }),
+      label: F,
+      hint: J,
+      rightSideContent: me,
+      tooltip: fe,
+      name: ue ?? "",
+      required: Q,
+      requiredIndicator: Ue,
+      loading: m,
+      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
     }
   ) : Ae;
 };
 export {
-  er as default
+  sr as default
 };
 //# sourceMappingURL=MultiSelect.js.map