@stackone/malachite 2.26.0 → 2.27.1

package/dist/components/Dropdown.js

@@ -1,21 +1,22 @@
 import { jsx as t, jsxs as b, Fragment as ye } from "react/jsx-runtime";
-import He, { useState as j, useRef as m, useEffect as Re, useCallback as Ce, useLayoutEffect as Ye, useInsertionEffect as Qe, useId as Je } from "react";
+import He, { useState as j, useRef as g, useEffect as Le, useCallback as Ce, useLayoutEffect as Qe, useInsertionEffect as Ye, useId as Je } from "react";
 import { createPortal as et } from "react-dom";
 import tt, { useFormFieldIds as rt } from "./BaseFormComponent.js";
 import ze from "./CustomIcons/CaretDownIcon.js";
 import je from "./CustomIcons/CloseIcon.js";
 import { FieldMessage as nt } from "./FieldMessage.js";
-import We from "./LoadingInput.js";
+import Pe from "./LoadingInput.js";
 import it from "./Spinner.js";
 import be from "./Tooltip.js";
-import { CONTROL_TEXT_SIZE_CLASS as Q, CONTROL_TEXT_SIZE as at } from "./controlTextSize.js";
-import { controlWidthStyle as Pe } from "./controlWidth.js";
+import { CONTROL_TEXT_SIZE_CLASS as Y, CONTROL_TEXT_SIZE as at } from "./controlTextSize.js";
+import { controlWidthStyle as We } from "./controlWidth.js";
 import { getTriggerVisual as ot, DROPDOWN_TRIGGER_ATTR as Me } from "./dropdownTriggerStyle.js";
 import { pushEscapeLayer as lt } from "./escapeLayers.js";
 import { measureMenuGeometry as st, isTriggerOffscreen as ct, rectSignature as dt, MENU_MAX_HEIGHT_PX as ut, MENU_SPECS as oe } from "./floatingMenuGeometry.js";
 import { ensureDropdownPanelStyles as pt } from "./optionRowStyles.js";
 import { overlayIdentity as ft } from "./portalOverlay.js";
 import { useTopLayer as ht } from "./topLayer.js";
+import { tooltipLines as Ze, isCut as le } from "./truncatedLines.js";
 const Fe = {
   display: "flex",
   alignItems: "center",
@@ -23,21 +24,21 @@ const Fe = {
   gap: 8,
   padding: "24px 16px",
   color: "var(--malachite-text-dimmed, rgb(161, 161, 161))"
-}, Le = "var(--malachite-font-size-xsmall, 11px)", gt = "[data-dropdown-option]", Ne = (e) => Array.from((e == null ? void 0 : e.querySelectorAll(gt)) ?? []), mt = (e, i) => {
-  const r = i.toLowerCase(), d = e.label.toLowerCase().includes(r), l = e.subtitle ? e.subtitle.toLowerCase().includes(r) : !1, y = e.rightSideText ? e.rightSideText.toLowerCase().includes(r) : !1;
-  return d || l || y;
-}, le = {
+}, Re = "var(--malachite-font-size-xsmall, 11px)", gt = "[data-dropdown-option]", Ne = (e) => Array.from((e == null ? void 0 : e.querySelectorAll(gt)) ?? []), mt = (e, i) => {
+  const r = i.toLowerCase(), m = e.label.toLowerCase().includes(r), c = e.subtitle ? e.subtitle.toLowerCase().includes(r) : !1, y = e.rightSideText ? e.rightSideText.toLowerCase().includes(r) : !1;
+  return m || c || y;
+}, se = {
   small: "h-[var(--malachite-control-height-small,28px)]",
   medium: "h-[var(--malachite-control-height-medium,32px)]",
   large: "h-[var(--malachite-control-height-large,42px)]"
 }, xt = {
-  small: `${le.small} px-2.5 py-1.5 ${Q.small}`,
-  medium: `${le.medium} px-3 py-1.5 ${Q.medium}`,
-  large: `${le.large} px-4 py-2.5 ${Q.large}`
+  small: `${se.small} px-2.5 py-1.5 ${Y.small}`,
+  medium: `${se.medium} px-3 py-1.5 ${Y.medium}`,
+  large: `${se.large} px-4 py-2.5 ${Y.large}`
 }, vt = {
-  small: `min-h-[var(--malachite-control-height-small,28px)] px-2.5 py-1.5 ${Q.small}`,
-  medium: `min-h-[var(--malachite-control-height-medium,32px)] px-3 py-1.5 ${Q.medium}`,
-  large: `min-h-[var(--malachite-control-height-large,42px)] px-4 py-2.5 ${Q.large}`
+  small: `min-h-[var(--malachite-control-height-small,28px)] px-2.5 py-1.5 ${Y.small}`,
+  medium: `min-h-[var(--malachite-control-height-medium,32px)] px-3 py-1.5 ${Y.medium}`,
+  large: `min-h-[var(--malachite-control-height-large,42px)] px-4 py-2.5 ${Y.large}`
 }, bt = {
   small: "right-[26px] size-4",
   medium: "right-[30px] size-4",
@@ -50,69 +51,61 @@ const Fe = {
   small: "rounded-[var(--malachite-radius-10,10px)]",
   medium: "rounded-xl",
   large: "rounded-[var(--malachite-radius-xxl,14px)]"
-}, Ge = () => !1, se = (e) => !!e && e.scrollWidth > e.clientWidth, St = {
-  display: "flex",
-  flexDirection: "column",
-  gap: 4
-}, Ze = (e) => {
-  var r;
-  const i = e.filter(([, d]) => !!d);
-  return i.length < 2 ? (r = i[0]) == null ? void 0 : r[1] : /* @__PURE__ */ t("span", { style: St, children: i.map(([d, l]) => /* @__PURE__ */ t("span", { children: l }, d)) });
-}, Tt = ({
+}, Ge = () => !1, St = ({
   wrap: e,
   id: i,
   children: r
-}) => e ? /* @__PURE__ */ t("span", { id: i, className: "min-w-0 flex items-center gap-2", children: r }) : /* @__PURE__ */ t(ye, { children: r }), Et = ({ row: e, children: i }) => e ? /* @__PURE__ */ t("span", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: i }) : /* @__PURE__ */ t(ye, { children: i }), Be = He.forwardRef(
+}) => e ? /* @__PURE__ */ t("span", { id: i, className: "min-w-0 flex items-center gap-2", children: r }) : /* @__PURE__ */ t(ye, { children: r }), Tt = ({ row: e, children: i }) => e ? /* @__PURE__ */ t("span", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: i }) : /* @__PURE__ */ t(ye, { children: i }), Ke = He.forwardRef(
   ({
     isOpen: e,
     onClick: i,
     selectedItem: r,
-    disabled: d = !1,
-    error: l = !1,
+    disabled: m = !1,
+    error: c = !1,
     tone: y,
     placeholder: N,
     search: x = !1,
     showSubtitleInTrigger: w = !1,
     searchQuery: k = "",
     onSearchChange: E,
-    onFocusOpen: L,
+    onFocusOpen: R,
     onArrowDown: S,
     size: v = "large",
     hasClear: $ = !1,
     onClear: a,
-    clearLabel: h,
-    controlId: c,
+    clearLabel: f,
+    controlId: s,
     labelId: o,
     describedBy: C,
-    required: s = !1,
+    required: l = !1,
     ariaLabel: D,
     ariaLabelledBy: ce,
     hasCallerId: we = !1
   }, _) => {
-    const Z = w && !x && !!(r != null && r.subtitle), B = Z ? vt[v] : xt[v], J = wt[v], O = `${c}-value`, de = `${c}-subtitle`, Se = !o && !D && !we && Z, ue = ce ?? (o && !D ? `${o} ${O}` : void 0) ?? (Se ? O : void 0), ee = (u) => {
-      u.key === "ArrowDown" && (u.preventDefault(), S == null || S());
-    }, I = m(null), te = m(null), K = ot({ disabled: d, error: l, tone: y, open: e }), R = !e && !!r, g = (r == null ? void 0 : r.triggerLabel) ?? (r == null ? void 0 : r.label), T = Z ? r == null ? void 0 : r.subtitle : void 0, z = () => se(I.current), [q, W] = j({ value: !1, subtitle: !0 }), pe = () => {
-      const u = z(), re = se(te.current);
-      return !u && !re ? !1 : (W({ value: u, subtitle: re }), !0);
+    const Z = w && !x && !!(r != null && r.subtitle), K = Z ? vt[v] : xt[v], J = wt[v], O = `${s}-value`, de = `${s}-subtitle`, Se = !o && !D && !we && Z, ue = ce ?? (o && !D ? `${o} ${O}` : void 0) ?? (Se ? O : void 0), ee = (d) => {
+      d.key === "ArrowDown" && (d.preventDefault(), S == null || S());
+    }, q = g(null), te = g(null), B = ot({ disabled: m, error: c, tone: y, open: e }), L = !e && !!r, h = (r == null ? void 0 : r.triggerLabel) ?? (r == null ? void 0 : r.label), T = Z ? r == null ? void 0 : r.subtitle : void 0, z = () => le(q.current), [V, P] = j({ value: !1, subtitle: !0 }), pe = () => {
+      const d = z(), re = le(te.current);
+      return !d && !re ? !1 : (P({ value: d, subtitle: re }), !0);
     };
-    if (x && !d)
+    if (x && !m)
       return /* @__PURE__ */ b(
         "div",
         {
           ref: _,
           className: `
-                relative w-full ${B} ${J}
+                relative w-full ${K} ${J}
                 border border-solid
                 transition-all duration-200
                 flex items-center
             `,
-          style: K,
+          style: B,
           [Me]: "",
-          onClick: (u) => u.stopPropagation(),
+          onClick: (d) => d.stopPropagation(),
           children: [
             (r == null ? void 0 : r.icon) && /* @__PURE__ */ t("span", { className: "flex shrink-0 items-center justify-center pr-2", children: r.icon }),
-            /* @__PURE__ */ t(be, { text: g, shouldShow: z, isShrinkable: !0, fill: !0, children: /* @__PURE__ */ b("div", { className: "relative flex-1 flex items-center min-w-0", children: [
-              R && /* @__PURE__ */ t(
+            /* @__PURE__ */ t(be, { text: h, shouldShow: z, isShrinkable: !0, fill: !0, children: /* @__PURE__ */ b("div", { className: "relative flex-1 flex items-center min-w-0", children: [
+              L && /* @__PURE__ */ t(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -120,10 +113,10 @@ const Fe = {
                   children: /* @__PURE__ */ t(
                     "span",
                     {
-                      ref: I,
+                      ref: q,
                       className: `min-w-0 block truncate text-[length:inherit]
                                         text-[var(--malachite-text-primary)]`,
-                      children: g
+                      children: h
                     }
                   )
                 }
@@ -131,25 +124,25 @@ const Fe = {
               /* @__PURE__ */ t(
                 "input",
                 {
-                  id: c,
+                  id: s,
                   type: "text",
                   "aria-label": D,
                   "aria-labelledby": ce,
-                  "aria-invalid": l || void 0,
-                  "aria-required": s || void 0,
+                  "aria-invalid": c || void 0,
+                  "aria-required": l || void 0,
                   "aria-describedby": C,
                   value: e ? k : (r == null ? void 0 : r.label) ?? "",
-                  onChange: (u) => {
-                    u.stopPropagation(), E == null || E(u.target.value), e || i();
+                  onChange: (d) => {
+                    d.stopPropagation(), E == null || E(d.target.value), e || i();
                   },
                   onFocus: () => {
-                    L == null || L();
+                    R == null || R();
                   },
                   onKeyDown: ee,
                   placeholder: N ?? "Select Field",
                   className: `flex-1 min-w-0 bg-transparent outline-none
                             text-[length:inherit] font-normal
-                            placeholder:text-[var(--malachite-text-dimmed)] ${R ? "text-transparent" : "text-[var(--malachite-text-primary)]"}`
+                            placeholder:text-[var(--malachite-text-dimmed)] ${L ? "text-transparent" : "text-[var(--malachite-text-primary)]"}`
                 }
               )
             ] }) }),
@@ -157,7 +150,7 @@ const Fe = {
               "button",
               {
                 type: "button",
-                "aria-label": h,
+                "aria-label": f,
                 onClick: a,
                 className: `flex shrink-0 items-center justify-center pl-2 cursor-pointer
                                 bg-transparent border-none p-0 text-[var(--malachite-text-placeholder)]
@@ -172,8 +165,8 @@ const Fe = {
                 type: "button",
                 tabIndex: -1,
                 "aria-label": e ? "Close options" : "Open options",
-                onClick: (u) => {
-                  u.stopPropagation(), i();
+                onClick: (d) => {
+                  d.stopPropagation(), i();
                 },
                 className: "flex items-center justify-center cursor-pointer bg-transparent border-none p-0",
                 children: /* @__PURE__ */ t(
@@ -196,22 +189,22 @@ const Fe = {
       "button",
       {
         ref: _,
-        id: c,
+        id: s,
         type: "button",
         "aria-label": D,
         "aria-labelledby": ue,
-        "aria-invalid": l || void 0,
-        "aria-required": s || void 0,
+        "aria-invalid": c || void 0,
+        "aria-required": l || void 0,
         "aria-describedby": [C, T ? de : void 0].filter(Boolean).join(" ") || void 0,
-        onClick: (u) => {
-          u.stopPropagation(), i();
+        onClick: (d) => {
+          d.stopPropagation(), i();
         },
         onKeyDown: ee,
-        disabled: d,
-        style: K,
+        disabled: m,
+        style: B,
         [Me]: "",
         className: `
-                relative w-full ${B} ${J}
+                relative w-full ${K} ${J}
                 border border-solid
                 transition-all duration-200
                 flex ${Z ? "items-start" : "items-center"} gap-3
@@ -225,21 +218,21 @@ const Fe = {
               id: T ? void 0 : O,
               className: `text-left flex-1 min-w-0 flex ${T ? "flex-col gap-1" : "items-center gap-2"}`,
               children: r ? /* @__PURE__ */ b(ye, { children: [
-                /* @__PURE__ */ b(Tt, { wrap: !!T, id: O, children: [
+                /* @__PURE__ */ b(St, { wrap: !!T, id: O, children: [
                   r.icon && /* @__PURE__ */ t("span", { className: "flex items-center justify-center shrink-0", children: r.icon }),
                   /* @__PURE__ */ t(
                     be,
                     {
-                      text: g,
+                      text: h,
                       shouldShow: T ? Ge : z,
                       triggerAs: T ? "span" : "div",
                       isShrinkable: !0,
                       children: /* @__PURE__ */ t(
                         "span",
                         {
-                          ref: I,
-                          className: `min-w-0 block truncate text-[length:inherit] ${d ? "text-[var(--malachite-text-placeholder)]" : "text-[var(--malachite-text-primary)]"}`,
-                          children: g
+                          ref: q,
+                          className: `min-w-0 block truncate text-[length:inherit] ${m ? "text-[var(--malachite-text-placeholder)]" : "text-[var(--malachite-text-primary)]"}`,
+                          children: h
                         }
                       )
                     }
@@ -257,7 +250,7 @@ const Fe = {
               ] }) : /* @__PURE__ */ t(
                 "span",
                 {
-                  className: `flex-1 min-w-0 truncate text-[length:inherit] ${d ? "text-[var(--malachite-text-placeholder)]" : "text-[var(--malachite-text-dimmed)]"}`,
+                  className: `flex-1 min-w-0 truncate text-[length:inherit] ${m ? "text-[var(--malachite-text-placeholder)]" : "text-[var(--malachite-text-dimmed)]"}`,
                   children: N ?? "Select Field"
                 }
               )
@@ -282,8 +275,8 @@ const Fe = {
       be,
       {
         text: Ze([
-          ["value", q.value && g],
-          ["subtitle", q.subtitle && T]
+          ["value", V.value && h],
+          ["subtitle", V.subtitle && T]
         ]),
         shouldShow: T ? pe : Ge,
         fill: !0,
@@ -293,17 +286,17 @@ const Fe = {
     ) : fe;
   }
 );
-Be.displayName = "DropdownTrigger";
-const Ct = ({
+Ke.displayName = "DropdownTrigger";
+const Et = ({
   item: e,
   selected: i,
   subtitleLayout: r,
-  onItemSelected: d
+  onItemSelected: m
 }) => {
-  const l = i ? "var(--malachite-accent-foreground, rgb(2, 122, 66))" : "var(--malachite-text-primary, rgb(10, 10, 10))", y = r === "stacked" && !!e.subtitle, N = `mal-${Je().replace(/[^a-zA-Z0-9_-]/g, "")}`, x = `${N}-label`, w = `${N}-subtitle`, k = m(null), E = m(null), L = m(null), [S, v] = j({ label: !0, subtitle: !0, rightSide: !0 }), $ = () => {
-    const o = se(k.current), C = se(E.current), s = se(L.current);
-    return !o && !C && !s ? !1 : (v({ label: o, subtitle: C, rightSide: s }), !0);
-  }, a = e.rightSideTextVariant === "primary" ? "var(--malachite-text-right-side-text-primary, rgb(10, 10, 10))" : "var(--malachite-text-right-side-text-muted, rgb(123, 123, 123))", h = e.rightSideTextAlignment === "left" ? "flex-start" : "flex-end", c = (
+  const c = i ? "var(--malachite-accent-foreground, rgb(2, 122, 66))" : "var(--malachite-text-primary, rgb(10, 10, 10))", y = r === "stacked" && !!e.subtitle, N = `mal-${Je().replace(/[^a-zA-Z0-9_-]/g, "")}`, x = `${N}-label`, w = `${N}-subtitle`, k = g(null), E = g(null), R = g(null), [S, v] = j({ label: !0, subtitle: !0, rightSide: !0 }), $ = () => {
+    const o = le(k.current), C = le(E.current), l = le(R.current);
+    return !o && !C && !l ? !1 : (v({ label: o, subtitle: C, rightSide: l }), !0);
+  }, a = e.rightSideTextVariant === "primary" ? "var(--malachite-text-right-side-text-primary, rgb(10, 10, 10))" : "var(--malachite-text-right-side-text-muted, rgb(123, 123, 123))", f = e.rightSideTextAlignment === "left" ? "flex-start" : "flex-end", s = (
     // `role="option"` would be invalid — nothing here declares a `listbox`, and an
     // orphaned option is dropped from the a11y tree. `aria-current`, not
     // `aria-pressed`: these are one-of-many choices, not toggles. tabIndex={-1}
@@ -320,7 +313,7 @@ const Ct = ({
         "aria-describedby": e.subtitle ? w : void 0,
         tabIndex: -1,
         onClick: (o) => {
-          o.stopPropagation(), d(e);
+          o.stopPropagation(), m(e);
         },
         className: "malachite-dropdown-option",
         style: {
@@ -355,7 +348,7 @@ const Ct = ({
                 {
                   style: y ? { display: "flex", flexDirection: "column", gap: 2 } : { display: "flex", alignItems: "center", gap: 8 },
                   children: [
-                    /* @__PURE__ */ b(Et, { row: y && !!e.icon, children: [
+                    /* @__PURE__ */ b(Tt, { row: y && !!e.icon, children: [
                       e.icon && /* @__PURE__ */ t(
                         "span",
                         {
@@ -375,7 +368,7 @@ const Ct = ({
                           ref: k,
                           style: {
                             fontWeight: 400,
-                            color: l,
+                            color: c,
                             whiteSpace: "nowrap",
                             overflow: "hidden",
                             textOverflow: "ellipsis",
@@ -391,10 +384,10 @@ const Ct = ({
                         id: w,
                         ref: E,
                         style: {
-                          fontSize: Le,
+                          fontSize: Re,
                           fontWeight: 400,
                           lineHeight: 1.4,
-                          color: i ? l : "var(--malachite-text-dimmed, rgb(161, 161, 161))",
+                          color: i ? c : "var(--malachite-text-dimmed, rgb(161, 161, 161))",
                           whiteSpace: "nowrap",
                           overflow: "hidden",
                           textOverflow: "ellipsis"
@@ -419,7 +412,7 @@ const Ct = ({
                             "span",
                             {
                               style: {
-                                fontSize: Le,
+                                fontSize: Re,
                                 fontWeight: 400,
                                 color: "var(--malachite-text-secondary, rgb(123, 123, 123))",
                                 flexShrink: 0
@@ -433,7 +426,7 @@ const Ct = ({
                               id: w,
                               ref: E,
                               style: {
-                                fontSize: Le,
+                                fontSize: Re,
                                 fontWeight: 400,
                                 color: "var(--malachite-text-secondary, rgb(123, 123, 123))",
                                 whiteSpace: "nowrap",
@@ -459,12 +452,12 @@ const Ct = ({
                     minWidth: e.rightSideText ? "var(--malachite-text-right-side-text-min-width, 80px)" : 0,
                     flexShrink: 1,
                     display: "flex",
-                    justifyContent: h
+                    justifyContent: f
                   },
                   children: e.rightSideText && /* @__PURE__ */ t(
                     "span",
                     {
-                      ref: L,
+                      ref: R,
                       style: {
                         fontSize: "var(--malachite-text-right-side-text-font-size, 12px)",
                         fontWeight: 400,
@@ -496,31 +489,31 @@ const Ct = ({
       shouldShow: $,
       isShrinkable: !0,
       describesTrigger: !1,
-      children: c
+      children: s
     }
   );
-}, Ie = He.forwardRef((e, i) => {
+}, qe = He.forwardRef((e, i) => {
   const {
     items: r,
-    onItemSelected: d,
-    selectedItem: l,
+    onItemSelected: m,
+    selectedItem: c,
     menuLoading: y,
     emptyMessage: N,
     autoFocus: x,
     positioned: w,
     onDismiss: k,
     subtitleLayout: E,
-    size: L,
+    size: R,
     style: S
-  } = e, v = m(null);
-  Qe(() => {
+  } = e, v = g(null);
+  Ye(() => {
     pt();
-  }, []), ht(v, !0), Re(() => {
-    var c;
+  }, []), ht(v, !0), Le(() => {
+    var s;
     if (!x || !w)
       return;
     const a = Ne(v.current);
-    (c = a.find((o) => o.dataset.selected === "true") ?? a[0] ?? v.current) == null || c.focus();
+    (s = a.find((o) => o.dataset.selected === "true") ?? a[0] ?? v.current) == null || s.focus();
   }, [x, w]);
   const $ = (a) => {
     var C;
@@ -528,16 +521,16 @@ const Ct = ({
       k();
       return;
     }
-    const h = Ne(v.current);
-    if (h.length === 0)
+    const f = Ne(v.current);
+    if (f.length === 0)
       return;
-    const c = h.indexOf(document.activeElement), o = {
-      ArrowDown: c + 1,
-      ArrowUp: c - 1,
+    const s = f.indexOf(document.activeElement), o = {
+      ArrowDown: s + 1,
+      ArrowUp: s - 1,
       Home: 0,
-      End: h.length - 1
+      End: f.length - 1
     }[a.key];
-    o !== void 0 && (a.preventDefault(), (C = h[Math.min(Math.max(o, 0), h.length - 1)]) == null || C.focus());
+    o !== void 0 && (a.preventDefault(), (C = f[Math.min(Math.max(o, 0), f.length - 1)]) == null || C.focus());
   };
   return /* @__PURE__ */ t(
     "div",
@@ -557,7 +550,7 @@ const Ct = ({
         overflow: "hidden",
         display: "flex",
         flexDirection: "column",
-        fontSize: at[L],
+        fontSize: at[R],
         ...S
       },
       children: y ? /* @__PURE__ */ b("div", { style: Fe, children: [
@@ -575,8 +568,8 @@ const Ct = ({
             scrollbarWidth: "thin",
             scrollbarColor: "var(--malachite-text-placeholder, rgb(187, 187, 187)) transparent"
           },
-          children: r.map((a, h) => {
-            const c = r[h - 1], o = !!a.group && (!c || c.group !== a.group);
+          children: r.map((a, f) => {
+            const s = r[f - 1], o = !!a.group && (!s || s.group !== a.group);
             return /* @__PURE__ */ b("div", { style: { flexShrink: 0 }, children: [
               o && /* @__PURE__ */ t(
                 "div",
@@ -593,12 +586,12 @@ const Ct = ({
                 }
               ),
               /* @__PURE__ */ t(
-                Ct,
+                Et,
                 {
                   item: a,
-                  onItemSelected: d,
+                  onItemSelected: m,
                   subtitleLayout: E,
-                  selected: a.id === (l == null ? void 0 : l.id) || !1
+                  selected: a.id === (c == null ? void 0 : c.id) || !1
                 }
               )
             ] }, a.id);
@@ -608,61 +601,61 @@ const Ct = ({
     }
   );
 });
-Ie.displayName = "DropdownPanel";
-const Bt = ({
+qe.displayName = "DropdownPanel";
+const Kt = ({
   items: e,
   onItemSelected: i,
   defaultValue: r,
-  value: d,
-  disabled: l = !1,
+  value: m,
+  disabled: c = !1,
   error: y,
   tone: N,
   label: x,
   hint: w,
   rightSideContent: k,
   tooltip: E,
-  name: L,
+  name: R,
   required: S = !1,
   requiredIndicator: v,
   loading: $,
   menuLoading: a,
-  formControl: h,
-  description: c,
+  formControl: f,
+  description: s,
   helperText: o,
   placeholder: C,
-  search: s = !1,
+  search: l = !1,
   showSubtitleInTrigger: D = !1,
   subtitleLayout: ce = "inline",
   clearable: we = !1,
   size: _ = "large",
   fullWidth: Z = !1,
-  width: B,
+  width: K,
   minWidth: J,
   id: O,
   "aria-label": de,
   "aria-labelledby": Se
 }) => {
-  const { controlId: ue, labelId: ee, descriptionId: I, hintId: te, helperTextId: K } = rt({
+  const { controlId: ue, labelId: ee, descriptionId: q, hintId: te, helperTextId: B } = rt({
     id: O,
     label: x,
-    description: c,
+    description: s,
     hint: w,
     helperText: !0
-  }), [R, g] = j(!1), [T, z] = j(r), q = d ?? T, W = e.find((n) => n.id === q), pe = we && q !== void 0 && q !== "" && !l, fe = D && !s && !!(W != null && W.subtitle), u = `Clear ${x ?? C ?? "selection"}`, re = m(r);
-  Re(() => {
+  }), [L, h] = j(!1), [T, z] = j(r), V = m ?? T, P = e.find((n) => n.id === V), pe = we && V !== void 0 && V !== "" && !c, fe = D && !l && !!(P != null && P.subtitle), d = `Clear ${x ?? C ?? "selection"}`, re = g(r);
+  Le(() => {
     re.current !== r && (re.current = r, z(r));
   }, [r]);
-  const [Te, V] = j(""), [Ke, _e] = j(!1), ke = m(null), he = m(null), U = m(null), [p, $e] = j(null), ge = m(!0), X = Ce(() => {
-    var f;
+  const [Te, I] = j(""), [Be, _e] = j(!1), ke = g(null), he = g(null), U = g(null), [u, $e] = j(null), ge = g(!0), X = Ce(() => {
+    var p;
     const n = he.current;
-    n && ((f = n instanceof HTMLButtonElement ? n : n.querySelector("input")) == null || f.focus());
+    n && ((p = n instanceof HTMLButtonElement ? n : n.querySelector("input")) == null || p.focus());
   }, []), Ae = Ce(
     (n) => {
-      var f;
-      n.stopPropagation(), z(void 0), (f = M.current) == null || f.call(M, Ee.current), i == null || i(void 0), s && (ge.current = !1), X();
+      var p;
+      n.stopPropagation(), z(void 0), (p = M.current) == null || p.call(M, Ee.current), i == null || i(void 0), l && (ge.current = !1), X();
     },
-    [i, s, X]
-  ), P = Ce(() => {
+    [i, l, X]
+  ), W = Ce(() => {
     const n = he.current;
     n && $e(
       st(U.current, {
@@ -674,59 +667,59 @@ const Bt = ({
       })
     );
   }, [J]);
-  Re(() => {
-    if (!R) {
+  Le(() => {
+    if (!L) {
       $e(null), _e(!1);
       return;
     }
-    P();
+    W();
     const n = (G) => {
       var ae;
       const A = G.composedPath(), H = ke.current, ie = U.current, ve = !!H && A.includes(H), De = !!ie && A.includes(ie);
-      !ve && !De && (g(!1), s && V(""), (ae = F.current) == null || ae.call(F));
-    }, f = lt(() => {
-      g(!1), s && V(""), X();
-    }), Y = () => P();
+      !ve && !De && (h(!1), l && I(""), (ae = F.current) == null || ae.call(F));
+    }, p = lt(() => {
+      h(!1), l && I(""), X();
+    }), Q = () => W();
     let ne = 0, me = "";
     const xe = () => {
       const G = he.current;
       if (G) {
         const A = G.getBoundingClientRect();
         if (ct(A, window.innerWidth, window.innerHeight)) {
-          g(!1), s && V("");
+          h(!1), l && I("");
           return;
         }
         const H = dt(A);
-        H !== me && (me = H, P());
+        H !== me && (me = H, W());
       }
       ne = requestAnimationFrame(xe);
     };
-    return ne = requestAnimationFrame(xe), document.addEventListener("mousedown", n), window.addEventListener("scroll", Y, !0), window.addEventListener("resize", Y), () => {
-      cancelAnimationFrame(ne), document.removeEventListener("mousedown", n), f(), window.removeEventListener("scroll", Y, !0), window.removeEventListener("resize", Y);
+    return ne = requestAnimationFrame(xe), document.addEventListener("mousedown", n), window.addEventListener("scroll", Q, !0), window.addEventListener("resize", Q), () => {
+      cancelAnimationFrame(ne), document.removeEventListener("mousedown", n), p(), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q);
     };
-  }, [R, s, P, X]), Ye(() => {
-    if (!R)
+  }, [L, l, W, X]), Qe(() => {
+    if (!L)
       return;
-    P();
+    W();
     const n = U.current;
     if (!n || typeof ResizeObserver > "u")
       return;
-    const f = new ResizeObserver(() => P());
-    return f.observe(n), () => f.disconnect();
-  }, [R, P]);
-  const M = m(void 0), F = m(void 0), Ee = m(""), qe = (n) => {
-    var f;
-    z(n == null ? void 0 : n.id), (f = M.current) == null || f.call(M, (n == null ? void 0 : n.id) ?? Ee.current), g(!1), s && (V(""), ge.current = !1), i == null || i(n == null ? void 0 : n.id), X();
-  }, Ve = () => {
-    g(!1), s && V(""), X();
+    const p = new ResizeObserver(() => W());
+    return p.observe(n), () => p.disconnect();
+  }, [L, W]);
+  const M = g(void 0), F = g(void 0), Ee = g(""), Ve = (n) => {
+    var p;
+    z(n == null ? void 0 : n.id), (p = M.current) == null || p.call(M, (n == null ? void 0 : n.id) ?? Ee.current), h(!1), l && (I(""), ge.current = !1), i == null || i(n == null ? void 0 : n.id), X();
+  }, Ie = () => {
+    h(!1), l && I(""), X();
   }, Ue = () => {
     const n = Ne(U.current)[0];
     if (n) {
       n.focus();
       return;
     }
-    _e(!0), g(!0);
-  }, Xe = s && Te ? e.filter((n) => mt(n, Te)) : e;
+    _e(!0), h(!0);
+  }, Xe = l && Te ? e.filter((n) => mt(n, Te)) : e;
   return /* @__PURE__ */ t(
     tt,
     {
@@ -735,37 +728,37 @@ const Bt = ({
       hint: w,
       rightSideContent: k,
       tooltip: E,
-      name: L,
+      name: R,
       required: S,
       requiredIndicator: v,
       loading: $,
-      formControl: h,
-      description: c,
+      formControl: f,
+      description: s,
       controlId: ue,
       labelId: ee,
-      descriptionId: I,
+      descriptionId: q,
       hintId: te,
-      loadingComponent: B === void 0 ? /* @__PURE__ */ t(
-        We,
+      loadingComponent: K === void 0 ? /* @__PURE__ */ t(
+        Pe,
         {
-          heightClass: le[_],
+          heightClass: se[_],
           helperText: !!o,
           helperTextMarginTop: !0
         }
-      ) : /* @__PURE__ */ t("div", { style: Pe(B), children: /* @__PURE__ */ t(
-        We,
+      ) : /* @__PURE__ */ t("div", { style: We(K), children: /* @__PURE__ */ t(
+        Pe,
         {
-          heightClass: le[_],
+          heightClass: se[_],
           helperText: !!o,
           helperTextMarginTop: !0
         }
       ) }),
-      children: ({ error: n, message: f, onFieldChange: Y, onFieldBlur: ne, emptyValue: me }) => {
-        M.current = Y, F.current = ne, Ee.current = me;
-        const xe = y ?? n, G = y === !1 ? void 0 : f, A = `${K}-error`, H = [
-          I,
+      children: ({ error: n, message: p, onFieldChange: Q, onFieldBlur: ne, emptyValue: me }) => {
+        M.current = Q, F.current = ne, Ee.current = me;
+        const xe = y ?? n, G = y === !1 ? void 0 : p, A = `${B}-error`, H = [
+          q,
           te,
-          o ? K : void 0,
+          o ? B : void 0,
           G ? A : void 0
         ].filter(Boolean).join(" ") || void 0;
         return /* @__PURE__ */ b(ye, { children: [
@@ -774,19 +767,19 @@ const Bt = ({
             {
               ref: ke,
               className: "relative w-full",
-              style: Pe(B),
+              style: We(K),
               onBlur: (ie) => {
                 var ae, Oe;
                 const ve = ie.relatedTarget;
                 ie.currentTarget.contains(ve) || ((ae = U.current) == null ? void 0 : ae.contains(ve)) === !0 || (Oe = F.current) == null || Oe.call(F);
               },
               children: [
-                pe && !s && /* @__PURE__ */ t(
+                pe && !l && /* @__PURE__ */ t(
                   "button",
                   {
                     type: "button",
                     onClick: Ae,
-                    "aria-label": u,
+                    "aria-label": d,
                     className: `absolute ${fe ? yt[_] : "top-1/2 -translate-y-1/2"} z-10 flex items-center
                             justify-center rounded-full text-[var(--malachite-text-placeholder)]
                             hover:text-[var(--malachite-text-primary)] transition-colors
@@ -795,32 +788,32 @@ const Bt = ({
                   }
                 ),
                 /* @__PURE__ */ t(
-                  Be,
+                  Ke,
                   {
                     hasClear: pe,
                     onClear: Ae,
-                    clearLabel: u,
+                    clearLabel: d,
                     ref: he,
-                    isOpen: R,
-                    onClick: () => !l && g(!R),
-                    selectedItem: W,
-                    disabled: l,
+                    isOpen: L,
+                    onClick: () => !c && h(!L),
+                    selectedItem: P,
+                    disabled: c,
                     error: xe,
                     tone: N,
                     placeholder: C,
-                    search: s,
+                    search: l,
                     showSubtitleInTrigger: D,
                     searchQuery: Te,
-                    onSearchChange: V,
+                    onSearchChange: I,
                     onFocusOpen: () => {
                       if (!ge.current) {
                         ge.current = !0;
                         return;
                       }
-                      g(!0);
+                      h(!0);
                     },
                     onArrowDown: () => {
-                      l || Ue();
+                      c || Ue();
                     },
                     size: _,
                     controlId: ue,
@@ -832,30 +825,30 @@ const Bt = ({
                     ariaLabelledBy: Se
                   }
                 ),
-                R && et(
+                L && et(
                   /* @__PURE__ */ t(
-                    Ie,
+                    qe,
                     {
                       ref: U,
                       style: {
                         position: "fixed",
-                        top: (p == null ? void 0 : p.top) ?? 0,
-                        left: (p == null ? void 0 : p.left) ?? 0,
-                        width: p == null ? void 0 : p.width,
-                        maxHeight: p == null ? void 0 : p.maxHeight,
-                        visibility: p ? "visible" : "hidden",
-                        opacity: p ? 1 : 0
+                        top: (u == null ? void 0 : u.top) ?? 0,
+                        left: (u == null ? void 0 : u.left) ?? 0,
+                        width: u == null ? void 0 : u.width,
+                        maxHeight: u == null ? void 0 : u.maxHeight,
+                        visibility: u ? "visible" : "hidden",
+                        opacity: u ? 1 : 0
                       },
                       items: Xe,
-                      onItemSelected: qe,
-                      selectedItem: W,
+                      onItemSelected: Ve,
+                      selectedItem: P,
                       menuLoading: a,
                       emptyMessage: e.length === 0 ? "No options available" : "No results found",
                       subtitleLayout: ce,
                       size: _,
-                      autoFocus: !s || Ke,
-                      positioned: p !== null,
-                      onDismiss: Ve
+                      autoFocus: !l || Be,
+                      positioned: u !== null,
+                      onDismiss: Ie
                     }
                   ),
                   document.body
@@ -866,7 +859,7 @@ const Bt = ({
           o && /* @__PURE__ */ t(
             "div",
             {
-              id: K,
+              id: B,
               className: "mt-1 text-[length:var(--malachite-font-size-small,13px)] text-left pl-2 text-[var(--malachite-text-dimmed,rgb(161,161,161))]",
               children: o
             }
@@ -878,6 +871,6 @@ const Bt = ({
   );
 };
 export {
-  Bt as Dropdown
+  Kt as Dropdown
 };
 //# sourceMappingURL=Dropdown.js.map