@stackone/malachite 2.47.0 → 2.47.2

package/dist/components/Dropdown.js

@@ -1,29 +1,29 @@
-import { jsx as e, jsxs as m, Fragment as bt } from "react/jsx-runtime";
-import Ot, { useState as F, useRef as x, useEffect as Pt, useCallback as Mt, useLayoutEffect as oe, useInsertionEffect as le, useId as se } from "react";
+import { jsx as e, jsxs as x, Fragment as bt } from "react/jsx-runtime";
+import Dt, { useState as F, useRef as g, useEffect as Pt, useCallback as Mt, useLayoutEffect as oe, useInsertionEffect as le, useId as se } from "react";
 import { createPortal as ce } from "react-dom";
 import de, { useFormFieldIds as ue } from "./BaseFormComponent.js";
 import Zt from "./CustomIcons/CaretDownIcon.js";
 import Jt from "./CustomIcons/CloseIcon.js";
 import { FieldMessage as pe } from "./FieldMessage.js";
-import Ut from "./LoadingInput.js";
+import qt from "./LoadingInput.js";
 import fe from "./Spinner.js";
 import { Tag as he } from "./Tag.js";
 import $t from "./Tooltip.js";
 import ge from "./Typography/MarkdownBlock.js";
 import { inlineMarkdownText as xe } from "./Typography/inlineMarkdown.js";
-import { getDeepActiveElement as Rt } from "./activeElement.js";
+import { getDeepActiveElement as _t } from "./activeElement.js";
 import { CONTROL_TEXT_SIZE_CLASS as nt, CONTROL_TEXT_SIZE as me } from "./controlTextSize.js";
-import { controlWidthStyle as qt } from "./controlWidth.js";
+import { controlWidthStyle as Ut } from "./controlWidth.js";
 import { getTriggerVisual as ve, DROPDOWN_TRIGGER_ATTR as Vt } from "./dropdownTriggerStyle.js";
 import { pushEscapeLayer as be } from "./escapeLayers.js";
 import { measureMenuGeometry as ye, isTriggerOffscreen as we, rectSignature as Se, MENU_MAX_HEIGHT_PX as Te, MENU_SPECS as gt } from "./floatingMenuGeometry.js";
-import { FOCUS_RING_WITHIN_INPUT as Ee, FOCUS_RING as Ne } from "./focusRing.js";
+import { FOCUS_RING as Ee } from "./focusRing.js";
 import { hasBadge as Lt } from "./hasBadge.js";
-import { ensureDropdownPanelStyles as Ce } from "./optionRowStyles.js";
-import { usePopupLayer as _e } from "./overlayLayers.js";
+import { ensureDropdownPanelStyles as Ne } from "./optionRowStyles.js";
+import { usePopupLayer as Ce } from "./overlayLayers.js";
 import { useTopLayer as ke } from "./topLayer.js";
 import { tooltipLines as It, isCut as xt } from "./truncatedLines.js";
-const Re = Ot.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text: a, disabled: r }) => /* @__PURE__ */ e(
+const Re = Dt.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text: a, disabled: r }) => /* @__PURE__ */ e(
   "span",
   {
     id: t,
@@ -47,8 +47,8 @@ const Re = Ot.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
   gap: 8,
   padding: "24px 16px",
   color: "var(--malachite-text-dimmed, rgb(161, 161, 161))"
-}, Ft = "var(--malachite-font-size-xsmall, 11px)", Le = "[data-dropdown-option]", Wt = (t) => Array.from((t == null ? void 0 : t.querySelectorAll(Le)) ?? []), $e = (t) => te.test(t) ? xe(t) : t.replace(/\s+/g, " "), Oe = (t, a) => {
-  const r = a.toLowerCase(), u = t.label.toLowerCase().includes(r), d = t.subtitle ? $e(t.subtitle).toLowerCase().includes(r) : !1, S = t.rightSideText ? t.rightSideText.toLowerCase().includes(r) : !1;
+}, Ft = "var(--malachite-font-size-xsmall, 11px)", _e = "[data-dropdown-option]", Wt = (t) => Array.from((t == null ? void 0 : t.querySelectorAll(_e)) ?? []), Le = (t) => te.test(t) ? xe(t) : t.replace(/\s+/g, " "), $e = (t, a) => {
+  const r = a.toLowerCase(), u = t.label.toLowerCase().includes(r), d = t.subtitle ? Le(t.subtitle).toLowerCase().includes(r) : !1, S = t.rightSideText ? t.rightSideText.toLowerCase().includes(r) : !1;
   return u || d || S;
 }, vt = {
   small: "h-[var(--malachite-control-height-small,28px)]",
@@ -58,27 +58,27 @@ const Re = Ot.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
   small: `${vt.small} px-2.5 py-1.5 ${nt.small}`,
   medium: `${vt.medium} px-3 py-1.5 ${nt.medium}`,
   large: `${vt.large} px-4 py-2.5 ${nt.large}`
-}, ze = {
+}, Oe = {
   small: `min-h-[var(--malachite-control-height-small,28px)] px-2.5 py-1.5 ${nt.small}`,
   medium: `min-h-[var(--malachite-control-height-medium,32px)] px-3 py-1.5 ${nt.medium}`,
   large: `min-h-[var(--malachite-control-height-large,42px)] px-4 py-2.5 ${nt.large}`
-}, Ae = {
+}, ze = {
   small: "right-[26px] size-4",
   medium: "right-[30px] size-4",
   large: "right-[38px] size-4"
-}, Me = {
+}, Ae = {
   small: "top-[calc(var(--malachite-control-height-small,28px)/2)] -translate-y-1/2",
   medium: "top-[calc(var(--malachite-control-height-medium,32px)/2)] -translate-y-1/2",
   large: "top-[calc(var(--malachite-control-height-large,42px)/2)] -translate-y-1/2"
-}, Fe = {
+}, Me = {
   small: "rounded-[var(--malachite-radius-10,10px)]",
   medium: "rounded-xl",
   large: "rounded-[var(--malachite-radius-xxl,14px)]"
-}, Qt = () => !1, Pe = ({
+}, Qt = () => !1, Fe = ({
   wrap: t,
   id: a,
   children: r
-}) => t ? /* @__PURE__ */ e("span", { id: a, className: "min-w-0 flex items-center gap-2", children: r }) : /* @__PURE__ */ e(bt, { children: r }), We = ({ row: t, children: a }) => t ? /* @__PURE__ */ e("span", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: a }) : /* @__PURE__ */ e(bt, { children: a }), ee = Ot.forwardRef(
+}) => t ? /* @__PURE__ */ e("span", { id: a, className: "min-w-0 flex items-center gap-2", children: r }) : /* @__PURE__ */ e(bt, { children: r }), Pe = ({ row: t, children: a }) => t ? /* @__PURE__ */ e("span", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: a }) : /* @__PURE__ */ e(bt, { children: a }), ee = Dt.forwardRef(
   ({
     isOpen: t,
     onClick: a,
@@ -91,11 +91,11 @@ const Re = Ot.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
     showSubtitleInTrigger: T = !1,
     searchQuery: L = "",
     onSearchChange: C,
-    onFocusOpen: _,
+    onFocusOpen: k,
     onArrowDown: y,
-    onTabAway: k,
+    onTabAway: R,
     size: E = "large",
-    hasClear: v = !1,
+    hasClear: m = !1,
     onClear: P,
     clearLabel: W,
     controlId: i,
@@ -106,18 +106,18 @@ const Re = Ot.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
     ariaLabelledBy: yt,
     hasCallerId: $ = !1
   }, wt) => {
-    const O = T && !p && !!(r != null && r.subtitle), it = O ? ze[E] : De[E], at = Fe[E], G = `${i}-value`, St = `${i}-subtitle`, D = `${i}-tag`, ot = !p || u, H = ot && !!(r != null && r.triggerTag), lt = !ot && !t && !!(r != null && r.triggerTag), st = H ? `${G} ${D}` : G, ct = !c && !w && !$ && (O || H), b = yt ?? (c && !w ? `${c} ${st}` : void 0) ?? (ct ? st : void 0), R = H && !(b != null && b.split(" ").includes(D)), Tt = (l) => {
+    const D = T && !p && !!(r != null && r.subtitle), it = D ? Oe[E] : De[E], at = Me[E], G = `${i}-value`, St = `${i}-subtitle`, O = `${i}-tag`, ot = !p || u, j = ot && !!(r != null && r.triggerTag), lt = !ot && !t && !!(r != null && r.triggerTag), st = j ? `${G} ${O}` : G, ct = !c && !w && !$ && (D || j), v = yt ?? (c && !w ? `${c} ${st}` : void 0) ?? (ct ? st : void 0), _ = j && !(v != null && v.split(" ").includes(O)), Tt = (l) => {
       if (l.key === "Tab") {
-        k == null || k();
+        R == null || R();
         return;
       }
       l.key === "ArrowDown" && (l.preventDefault(), y == null || y());
-    }, j = x(null), J = x(null), z = ve({ disabled: u, error: d, tone: S, open: t }), dt = !t && !!r, K = (r == null ? void 0 : r.triggerLabel) ?? (r == null ? void 0 : r.label), g = O ? r == null ? void 0 : r.subtitle : void 0, I = () => xt(j.current), [tt, A] = F({ value: !1, subtitle: !0 }), Dt = () => {
+    }, H = g(null), J = g(null), z = ve({ disabled: u, error: d, tone: S, open: t }), dt = !t && !!r, K = (r == null ? void 0 : r.triggerLabel) ?? (r == null ? void 0 : r.label), b = D ? r == null ? void 0 : r.subtitle : void 0, I = () => xt(H.current), [tt, A] = F({ value: !1, subtitle: !0 }), Ot = () => {
       const l = I(), et = xt(J.current);
       return !l && !et ? !1 : (A({ value: l, subtitle: et }), !0);
     };
     if (p && !u)
-      return /* @__PURE__ */ m(
+      return /* @__PURE__ */ x(
         "div",
         {
           ref: wt,
@@ -125,14 +125,15 @@ const Re = Ot.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
                 relative w-full ${it} ${at}
                 border border-solid
                 transition-all duration-200
-                flex items-center ${Ee}
+                flex items-center
             `,
           style: z,
           [Vt]: "",
+          "data-open": t || void 0,
           onClick: (l) => l.stopPropagation(),
           children: [
             (r == null ? void 0 : r.icon) && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center justify-center pr-2", children: r.icon }),
-            /* @__PURE__ */ e($t, { text: K, shouldShow: I, isShrinkable: !0, fill: !0, children: /* @__PURE__ */ m("div", { className: "relative flex-1 flex items-center min-w-0", children: [
+            /* @__PURE__ */ e($t, { text: K, shouldShow: I, isShrinkable: !0, fill: !0, children: /* @__PURE__ */ x("div", { className: "relative flex-1 flex items-center min-w-0", children: [
               dt && /* @__PURE__ */ e(
                 "span",
                 {
@@ -141,7 +142,7 @@ const Re = Ot.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
                   children: /* @__PURE__ */ e(
                     "span",
                     {
-                      ref: j,
+                      ref: H,
                       className: `min-w-0 block truncate text-[length:inherit]
                                         text-[var(--malachite-text-primary)]`,
                       children: K
@@ -158,13 +159,13 @@ const Re = Ot.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
                   "aria-labelledby": yt,
                   "aria-invalid": d || void 0,
                   "aria-required": f || void 0,
-                  "aria-describedby": [o, lt ? D : void 0].filter(Boolean).join(" ") || void 0,
+                  "aria-describedby": [o, lt ? O : void 0].filter(Boolean).join(" ") || void 0,
                   value: t ? L : (r == null ? void 0 : r.label) ?? "",
                   onChange: (l) => {
                     l.stopPropagation(), C == null || C(l.target.value), t || a();
                   },
                   onFocus: () => {
-                    _ == null || _();
+                    k == null || k();
                   },
                   onKeyDown: Tt,
                   placeholder: N ?? "Select Field",
@@ -174,11 +175,11 @@ const Re = Ot.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
                 }
               )
             ] }) }),
-            lt && (r == null ? void 0 : r.triggerTag) && /* @__PURE__ */ m(bt, { children: [
+            lt && (r == null ? void 0 : r.triggerTag) && /* @__PURE__ */ x(bt, { children: [
               /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "w-2 shrink-0" }),
-              /* @__PURE__ */ e(Xt, { id: D, text: r.triggerTag })
+              /* @__PURE__ */ e(Xt, { id: O, text: r.triggerTag })
             ] }),
-            v && /* @__PURE__ */ e(
+            m && /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
@@ -217,20 +218,20 @@ const Re = Ot.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
           ]
         }
       );
-    const ut = /* @__PURE__ */ m(
+    const ut = /* @__PURE__ */ x(
       "button",
       {
         ref: wt,
         id: i,
         type: "button",
         "aria-label": w,
-        "aria-labelledby": b,
+        "aria-labelledby": v,
         "aria-invalid": d || void 0,
         "aria-required": f || void 0,
         "aria-describedby": [
           o,
-          g ? St : void 0,
-          R ? D : void 0
+          b ? St : void 0,
+          _ ? O : void 0
         ].filter(Boolean).join(" ") || void 0,
         onClick: (l) => {
           l.stopPropagation(), a(l.detail === 0);
@@ -243,30 +244,30 @@ const Re = Ot.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
                 relative w-full ${it} ${at}
                 border border-solid
                 transition-all duration-200
-                flex ${O ? "items-start" : "items-center"} gap-3
+                flex ${D ? "items-start" : "items-center"} gap-3
                 cursor-pointer
-                disabled:cursor-not-allowed ${Ne}
+                disabled:cursor-not-allowed ${Ee}
             `,
         children: [
           /* @__PURE__ */ e(
             "span",
             {
-              id: g ? void 0 : G,
-              className: `text-left ${H ? "flex-[1_1_auto]" : "flex-1"} min-w-0 flex ${g ? "flex-col gap-1" : "items-center gap-2"}`,
-              children: r ? /* @__PURE__ */ m(bt, { children: [
-                /* @__PURE__ */ m(Pe, { wrap: !!g, id: G, children: [
+              id: b ? void 0 : G,
+              className: `text-left ${j ? "flex-[1_1_auto]" : "flex-1"} min-w-0 flex ${b ? "flex-col gap-1" : "items-center gap-2"}`,
+              children: r ? /* @__PURE__ */ x(bt, { children: [
+                /* @__PURE__ */ x(Fe, { wrap: !!b, id: G, children: [
                   r.icon && /* @__PURE__ */ e("span", { className: "flex items-center justify-center shrink-0", children: r.icon }),
                   /* @__PURE__ */ e(
                     $t,
                     {
                       text: K,
-                      shouldShow: g ? Qt : I,
-                      triggerAs: g ? "span" : "div",
+                      shouldShow: b ? Qt : I,
+                      triggerAs: "span",
                       isShrinkable: !0,
                       children: /* @__PURE__ */ e(
                         "span",
                         {
-                          ref: j,
+                          ref: H,
                           className: `min-w-0 block truncate text-[length:inherit] ${u ? "text-[var(--malachite-text-placeholder)]" : "text-[var(--malachite-text-primary)]"}`,
                           children: K
                         }
@@ -274,13 +275,13 @@ const Re = Ot.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
                     }
                   )
                 ] }),
-                g && /* @__PURE__ */ e(
+                b && /* @__PURE__ */ e(
                   "span",
                   {
                     id: St,
                     ref: J,
                     className: "min-w-0 block truncate text-[length:var(--malachite-font-size-xsmall,11px)] text-[var(--malachite-text-secondary,rgb(123,123,123))] leading-normal",
-                    children: /* @__PURE__ */ e(mt, { text: g })
+                    children: /* @__PURE__ */ e(mt, { text: b })
                   }
                 )
               ] }) : /* @__PURE__ */ e(
@@ -292,8 +293,8 @@ const Re = Ot.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
               )
             }
           ),
-          (r == null ? void 0 : r.triggerTag) && /* @__PURE__ */ e(Xt, { id: D, text: r.triggerTag, disabled: u }),
-          v && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "shrink-0 w-4" }),
+          (r == null ? void 0 : r.triggerTag) && /* @__PURE__ */ e(Xt, { id: O, text: r.triggerTag, disabled: u }),
+          m && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "shrink-0 w-4" }),
           /* @__PURE__ */ e("span", { className: "flex items-center justify-center shrink-0", children: /* @__PURE__ */ e(
             Zt,
             {
@@ -315,10 +316,10 @@ const Re = Ot.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
           ["value", tt.value && K],
           [
             "subtitle",
-            tt.subtitle && g && /* @__PURE__ */ e(mt, { text: g })
+            tt.subtitle && b && /* @__PURE__ */ e(mt, { text: b })
           ]
         ]),
-        shouldShow: g ? Dt : Qt,
+        shouldShow: b ? Ot : Qt,
         fill: !0,
         describesTrigger: !1,
         children: ut
@@ -327,16 +328,16 @@ const Re = Ot.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
   }
 );
 ee.displayName = "DropdownTrigger";
-const Ge = ({
+const We = ({
   item: t,
   selected: a,
   showTooltipOnFocus: r,
   subtitleLayout: u,
   onItemSelected: d
 }) => {
-  const S = a ? "var(--malachite-accent-foreground, rgb(2, 122, 66))" : "var(--malachite-text-primary, rgb(10, 10, 10))", N = u === "stacked" && !!t.subtitle, p = `mal-${se().replace(/[^a-zA-Z0-9_-]/g, "")}`, T = `${p}-label`, L = `${p}-subtitle`, C = `${p}-badge`, _ = x(null), y = x(null), k = x(null), [E, v] = F({ label: !0, subtitle: !0, rightSide: !0 }), P = () => {
-    const o = xt(_.current), f = xt(y.current), w = xt(k.current);
-    return !o && !f && !w ? !1 : (v({ label: o, subtitle: f, rightSide: w }), !0);
+  const S = a ? "var(--malachite-accent-foreground, rgb(2, 122, 66))" : "var(--malachite-text-primary, rgb(10, 10, 10))", N = u === "stacked" && !!t.subtitle, p = `mal-${se().replace(/[^a-zA-Z0-9_-]/g, "")}`, T = `${p}-label`, L = `${p}-subtitle`, C = `${p}-badge`, k = g(null), y = g(null), R = g(null), [E, m] = F({ label: !0, subtitle: !0, rightSide: !0 }), P = () => {
+    const o = xt(k.current), f = xt(y.current), w = xt(R.current);
+    return !o && !f && !w ? !1 : (m({ label: o, subtitle: f, rightSide: w }), !0);
   }, W = t.rightSideTextVariant === "primary" ? "var(--malachite-text-right-side-text-primary, rgb(10, 10, 10))" : "var(--malachite-text-right-side-text-muted, rgb(123, 123, 123))", i = t.rightSideTextAlignment === "left" ? "flex-start" : "flex-end", c = (
     // `role="option"` would be invalid — nothing here declares a `listbox`, and an
     // orphaned option is dropped from the a11y tree. `aria-current`, not
@@ -376,7 +377,7 @@ const Ge = ({
           font: "inherit",
           color: "inherit"
         },
-        children: /* @__PURE__ */ m(
+        children: /* @__PURE__ */ x(
           "span",
           {
             style: {
@@ -387,12 +388,12 @@ const Ge = ({
               minWidth: 0
             },
             children: [
-              /* @__PURE__ */ e("span", { style: { flex: "1 1 auto", display: "block", minWidth: 0 }, children: /* @__PURE__ */ m(
+              /* @__PURE__ */ e("span", { style: { flex: "1 1 auto", display: "block", minWidth: 0 }, children: /* @__PURE__ */ x(
                 "span",
                 {
                   style: N ? { display: "flex", flexDirection: "column", gap: 2 } : { display: "flex", alignItems: "center", gap: 8 },
                   children: [
-                    /* @__PURE__ */ m(We, { row: N && !!t.icon, children: [
+                    /* @__PURE__ */ x(Pe, { row: N && !!t.icon, children: [
                       t.icon && /* @__PURE__ */ e(
                         "span",
                         {
@@ -409,7 +410,7 @@ const Ge = ({
                         "span",
                         {
                           id: t.subtitle || Lt(t.badge) ? T : void 0,
-                          ref: _,
+                          ref: k,
                           style: {
                             fontWeight: 400,
                             color: S,
@@ -438,7 +439,7 @@ const Ge = ({
                         },
                         children: /* @__PURE__ */ e(mt, { text: t.subtitle })
                       }
-                    ) : /* @__PURE__ */ m(
+                    ) : /* @__PURE__ */ x(
                       "span",
                       {
                         style: {
@@ -501,7 +502,7 @@ const Ge = ({
                   children: t.rightSideText && /* @__PURE__ */ e(
                     "span",
                     {
-                      ref: k,
+                      ref: R,
                       style: {
                         fontSize: "var(--malachite-text-right-side-text-font-size, 12px)",
                         fontWeight: 400,
@@ -516,7 +517,7 @@ const Ge = ({
                   )
                 }
               ),
-              Lt(t.badge) && /* @__PURE__ */ e("span", { id: C, style: { flexShrink: 0, display: "flex" }, children: /* @__PURE__ */ e(Ot.Suspense, { fallback: null, children: /* @__PURE__ */ e(Re, { children: t.badge }) }) })
+              Lt(t.badge) && /* @__PURE__ */ e("span", { id: C, style: { flexShrink: 0, display: "flex" }, children: /* @__PURE__ */ e(Dt.Suspense, { fallback: null, children: /* @__PURE__ */ e(Re, { children: t.badge }) }) })
             ]
           }
         )
@@ -541,7 +542,7 @@ const Ge = ({
       children: c
     }
   );
-}, re = Ot.forwardRef((t, a) => {
+}, re = Dt.forwardRef((t, a) => {
   const {
     items: r,
     onItemSelected: u,
@@ -552,24 +553,24 @@ const Ge = ({
     positioned: T,
     onDismiss: L,
     keyboardNavigation: C,
-    onKeyboardNavigation: _,
+    onKeyboardNavigation: k,
     subtitleLayout: y,
-    size: k,
+    size: R,
     style: E
-  } = t, v = x(null), P = _e("dropdown", !0, v);
+  } = t, m = g(null), P = Ce("dropdown", !0, m);
   return le(() => {
-    Ce();
-  }, []), ke(v, !0), Pt(() => {
+    Ne();
+  }, []), ke(m, !0), Pt(() => {
     var o;
     if (!p || !T)
       return;
-    const i = Wt(v.current);
-    (o = i.find((f) => f.dataset.selected === "true") ?? i[0] ?? v.current) == null || o.focus();
+    const i = Wt(m.current);
+    (o = i.find((f) => f.dataset.selected === "true") ?? i[0] ?? m.current) == null || o.focus();
   }, [p, T]), /* @__PURE__ */ e(
     "div",
     {
       ref: (i) => {
-        v.current = i, typeof a == "function" ? a(i) : a && (a.current = i);
+        m.current = i, typeof a == "function" ? a(i) : a && (a.current = i);
       },
       ...P,
       tabIndex: -1,
@@ -579,7 +580,7 @@ const Ge = ({
           L();
           return;
         }
-        const c = Wt(v.current);
+        const c = Wt(m.current);
         if (c.length === 0)
           return;
         const o = c.indexOf(document.activeElement), f = {
@@ -588,7 +589,7 @@ const Ge = ({
           Home: 0,
           End: c.length - 1
         }[i.key];
-        f !== void 0 && (i.preventDefault(), _(), (w = c[Math.min(Math.max(f, 0), c.length - 1)]) == null || w.focus());
+        f !== void 0 && (i.preventDefault(), k(), (w = c[Math.min(Math.max(f, 0), c.length - 1)]) == null || w.focus());
       },
       style: {
         background: gt.standard.background,
@@ -599,10 +600,10 @@ const Ge = ({
         overflow: "hidden",
         display: "flex",
         flexDirection: "column",
-        fontSize: me[k],
+        fontSize: me[R],
         ...E
       },
-      children: S ? /* @__PURE__ */ m("div", { style: Yt, children: [
+      children: S ? /* @__PURE__ */ x("div", { style: Yt, children: [
         /* @__PURE__ */ e(fe, { size: "xxxsmall" }),
         /* @__PURE__ */ e("span", { children: "Loading…" })
       ] }) : r.length === 0 ? /* @__PURE__ */ e("div", { style: Yt, children: N }) : /* @__PURE__ */ e(
@@ -619,7 +620,7 @@ const Ge = ({
           },
           children: r.map((i, c) => {
             const o = r[c - 1], f = !!i.group && (!o || o.group !== i.group);
-            return /* @__PURE__ */ m("div", { style: { flexShrink: 0 }, children: [
+            return /* @__PURE__ */ x("div", { style: { flexShrink: 0 }, children: [
               f && /* @__PURE__ */ e(
                 "div",
                 {
@@ -635,7 +636,7 @@ const Ge = ({
                 }
               ),
               /* @__PURE__ */ e(
-                Ge,
+                We,
                 {
                   item: i,
                   onItemSelected: u,
@@ -652,7 +653,7 @@ const Ge = ({
   );
 });
 re.displayName = "DropdownPanel";
-const pr = ({
+const ur = ({
   items: t,
   onItemSelected: a,
   defaultValue: r,
@@ -664,11 +665,11 @@ const pr = ({
   hint: T,
   rightSideContent: L,
   tooltip: C,
-  name: _,
+  name: k,
   required: y = !1,
-  requiredIndicator: k,
+  requiredIndicator: R,
   loading: E,
-  menuLoading: v,
+  menuLoading: m,
   formControl: P,
   description: W,
   helperText: i,
@@ -679,39 +680,39 @@ const pr = ({
   clearable: yt = !1,
   size: $ = "large",
   fullWidth: wt = !1,
-  width: O,
+  width: D,
   minWidth: it,
   menuAlign: at = "start",
   id: G,
   "aria-label": St,
-  "aria-labelledby": D
+  "aria-labelledby": O
 }) => {
-  const { controlId: ot, labelId: H, descriptionId: lt, hintId: st, helperTextId: ct } = ue({
+  const { controlId: ot, labelId: j, descriptionId: lt, hintId: st, helperTextId: ct } = ue({
     id: G,
     label: p,
     description: W,
     hint: T,
     helperText: !0
-  }), [b, R] = F(!1), [Tt, j] = F(r), J = u ?? Tt, z = t.find((n) => n.id === J), dt = yt && J !== void 0 && J !== "" && !d, K = f && !o && !!(z != null && z.subtitle), g = `Clear ${p ?? c ?? "selection"}`, I = x(r);
+  }), [v, _] = F(!1), [Tt, H] = F(r), J = u ?? Tt, z = t.find((n) => n.id === J), dt = yt && J !== void 0 && J !== "" && !d, K = f && !o && !!(z != null && z.subtitle), b = `Clear ${p ?? c ?? "selection"}`, I = g(r);
   Pt(() => {
-    I.current !== r && (I.current = r, j(r));
+    I.current !== r && (I.current = r, H(r));
   }, [r]);
-  const [tt, A] = F(""), [Dt, ut] = F(!1), [l, et] = F(!1), zt = x(null), Et = x(null), B = x(null), [h, Gt] = F(null), Nt = x(!0), Z = Mt(() => {
+  const [tt, A] = F(""), [Ot, ut] = F(!1), [l, et] = F(!1), zt = g(null), Et = g(null), B = g(null), [h, Gt] = F(null), Nt = g(!0), Z = Mt(() => {
     const n = Et.current, s = n instanceof HTMLButtonElement ? n : (n == null ? void 0 : n.querySelector("input")) ?? null;
-    if (!(!s || s === Rt())) {
+    if (!(!s || s === _t())) {
       if (!o) {
         s.focus();
         return;
       }
-      Nt.current = !1, s.focus(), Rt() !== s && (Nt.current = !0);
+      Nt.current = !1, s.focus(), _t() !== s && (Nt.current = !0);
     }
-  }, [o]), Ht = Mt(
+  }, [o]), jt = Mt(
     (n) => {
       var s;
-      n.stopPropagation(), j(void 0), (s = q.current) == null || s.call(q, At.current), a == null || a(void 0), Z();
+      n.stopPropagation(), H(void 0), (s = U.current) == null || s.call(U, At.current), a == null || a(void 0), Z();
     },
     [a, Z]
-  ), U = Mt(() => {
+  ), q = Mt(() => {
     const n = Et.current;
     n && Gt(
       ye(B.current, {
@@ -725,50 +726,50 @@ const pr = ({
     );
   }, [it, at]);
   Pt(() => {
-    if (!b) {
+    if (!v) {
       Gt(null), ut(!1);
       return;
     }
-    U();
+    q();
     const n = (X) => {
       var ft, ht, Bt;
-      const M = X.composedPath(), Y = zt.current, Q = B.current, kt = !!Y && M.includes(Y), Kt = !!Q && M.includes(Q);
-      !kt && !Kt && (R(!1), o && A(""), (ft = B.current) != null && ft.contains(Rt()) && Z(), (ht = zt.current) != null && ht.contains(Rt()) || (Bt = V.current) == null || Bt.call(V));
+      const M = X.composedPath(), Y = zt.current, Q = B.current, Rt = !!Y && M.includes(Y), Kt = !!Q && M.includes(Q);
+      !Rt && !Kt && (_(!1), o && A(""), (ft = B.current) != null && ft.contains(_t()) && Z(), (ht = zt.current) != null && ht.contains(_t()) || (Bt = V.current) == null || Bt.call(V));
     }, s = be(() => {
-      R(!1), o && A(""), Z();
-    }), rt = () => U();
+      _(!1), o && A(""), Z();
+    }), rt = () => q();
     let pt = 0, Ct = "";
-    const _t = () => {
+    const kt = () => {
       const X = Et.current;
       if (X) {
         const M = X.getBoundingClientRect();
         if (we(M, window.innerWidth, window.innerHeight)) {
-          R(!1), o && A("");
+          _(!1), o && A("");
           return;
         }
         const Y = Se(M);
-        Y !== Ct && (Ct = Y, U());
+        Y !== Ct && (Ct = Y, q());
       }
-      pt = requestAnimationFrame(_t);
+      pt = requestAnimationFrame(kt);
     };
-    return pt = requestAnimationFrame(_t), document.addEventListener("mousedown", n), window.addEventListener("scroll", rt, !0), window.addEventListener("resize", rt), () => {
+    return pt = requestAnimationFrame(kt), document.addEventListener("mousedown", n), window.addEventListener("scroll", rt, !0), window.addEventListener("resize", rt), () => {
       cancelAnimationFrame(pt), document.removeEventListener("mousedown", n), s(), window.removeEventListener("scroll", rt, !0), window.removeEventListener("resize", rt);
     };
-  }, [b, o, U, Z]), oe(() => {
-    if (!b)
+  }, [v, o, q, Z]), oe(() => {
+    if (!v)
       return;
-    U();
+    q();
     const n = B.current;
     if (!n || typeof ResizeObserver > "u")
       return;
-    const s = new ResizeObserver(() => U());
+    const s = new ResizeObserver(() => q());
     return s.observe(n), () => s.disconnect();
-  }, [b, U]);
-  const q = x(void 0), V = x(void 0), At = x(""), ne = (n) => {
+  }, [v, q]);
+  const U = g(void 0), V = g(void 0), At = g(""), ne = (n) => {
     var s;
-    j(n == null ? void 0 : n.id), (s = q.current) == null || s.call(q, (n == null ? void 0 : n.id) ?? At.current), R(!1), o && A(""), a == null || a(n == null ? void 0 : n.id), Z();
-  }, jt = () => {
-    R(!1), o && A(""), Z();
+    H(n == null ? void 0 : n.id), (s = U.current) == null || s.call(U, (n == null ? void 0 : n.id) ?? At.current), _(!1), o && A(""), a == null || a(n == null ? void 0 : n.id), Z();
+  }, Ht = () => {
+    _(!1), o && A(""), Z();
   }, ie = () => {
     et(!0);
     const n = Wt(B.current)[0];
@@ -776,8 +777,8 @@ const pr = ({
       n.focus();
       return;
     }
-    ut(!0), R(!0);
-  }, ae = o && tt ? t.filter((n) => Oe(n, tt)) : t;
+    ut(!0), _(!0);
+  }, ae = o && tt ? t.filter((n) => $e(n, tt)) : t;
   return /* @__PURE__ */ e(
     de,
     {
@@ -786,25 +787,25 @@ const pr = ({
       hint: T,
       rightSideContent: L,
       tooltip: C,
-      name: _,
+      name: k,
       required: y,
-      requiredIndicator: k,
+      requiredIndicator: R,
       loading: E,
       formControl: P,
       description: W,
       controlId: ot,
-      labelId: H,
+      labelId: j,
       descriptionId: lt,
       hintId: st,
-      loadingComponent: O === void 0 ? /* @__PURE__ */ e(
-        Ut,
+      loadingComponent: D === void 0 ? /* @__PURE__ */ e(
+        qt,
         {
           heightClass: vt[$],
           helperText: !!i,
           helperTextMarginTop: !0
         }
-      ) : /* @__PURE__ */ e("div", { style: qt(O), children: /* @__PURE__ */ e(
-        Ut,
+      ) : /* @__PURE__ */ e("div", { style: Ut(D), children: /* @__PURE__ */ e(
+        qt,
         {
           heightClass: vt[$],
           helperText: !!i,
@@ -812,36 +813,36 @@ const pr = ({
         }
       ) }),
       children: ({ error: n, message: s, onFieldChange: rt, onFieldBlur: pt, emptyValue: Ct }) => {
-        q.current = rt, V.current = pt, At.current = Ct;
-        const _t = S ?? n, X = S === !1 ? void 0 : s, M = `${ct}-error`, Y = [
+        U.current = rt, V.current = pt, At.current = Ct;
+        const kt = S ?? n, X = S === !1 ? void 0 : s, M = `${ct}-error`, Y = [
           lt,
           st,
           i ? ct : void 0,
           X ? M : void 0
         ].filter(Boolean).join(" ") || void 0;
-        return /* @__PURE__ */ m(bt, { children: [
-          /* @__PURE__ */ m(
+        return /* @__PURE__ */ x(bt, { children: [
+          /* @__PURE__ */ x(
             "div",
             {
               ref: zt,
               className: "relative w-full",
-              style: qt(O),
+              style: Ut(D),
               onBlur: (Q) => {
                 var ft, ht;
-                const kt = Q.relatedTarget;
-                Q.currentTarget.contains(kt) || ((ft = B.current) == null ? void 0 : ft.contains(kt)) === !0 || (ht = V.current) == null || ht.call(V);
+                const Rt = Q.relatedTarget;
+                Q.currentTarget.contains(Rt) || ((ft = B.current) == null ? void 0 : ft.contains(Rt)) === !0 || (ht = V.current) == null || ht.call(V);
               },
               children: [
                 dt && !o && /* @__PURE__ */ e(
                   "button",
                   {
                     type: "button",
-                    onClick: Ht,
-                    "aria-label": g,
-                    className: `absolute ${K ? Me[$] : "top-1/2 -translate-y-1/2"} z-10 flex items-center
+                    onClick: jt,
+                    "aria-label": b,
+                    className: `absolute ${K ? Ae[$] : "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
-                            focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:outline-offset-2 ${Ae[$]}`,
+                            focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:outline-offset-2 ${ze[$]}`,
                     children: /* @__PURE__ */ e(Jt, { size: 13 })
                   }
                 ),
@@ -849,16 +850,16 @@ const pr = ({
                   ee,
                   {
                     hasClear: dt,
-                    onClear: Ht,
-                    clearLabel: g,
+                    onClear: jt,
+                    clearLabel: b,
                     ref: Et,
-                    isOpen: b,
+                    isOpen: v,
                     onClick: (Q) => {
-                      d || (et(!!Q), R(!b));
+                      d || (et(!!Q), _(!v));
                     },
                     selectedItem: z,
                     disabled: d,
-                    error: _t,
+                    error: kt,
                     tone: N,
                     placeholder: c,
                     search: o,
@@ -870,25 +871,25 @@ const pr = ({
                         Nt.current = !0;
                         return;
                       }
-                      R(!0);
+                      _(!0);
                     },
                     onArrowDown: () => {
                       d || ie();
                     },
                     onTabAway: () => {
-                      b && jt();
+                      v && Ht();
                     },
                     size: $,
                     controlId: ot,
                     hasCallerId: !!G,
-                    labelId: H,
+                    labelId: j,
                     describedBy: Y,
                     required: y,
                     ariaLabel: St,
-                    ariaLabelledBy: D
+                    ariaLabelledBy: O
                   }
                 ),
-                b && ce(
+                v && ce(
                   /* @__PURE__ */ e(
                     re,
                     {
@@ -905,13 +906,13 @@ const pr = ({
                       items: ae,
                       onItemSelected: ne,
                       selectedItem: z,
-                      menuLoading: v,
+                      menuLoading: m,
                       emptyMessage: t.length === 0 ? "No options available" : "No results found",
                       subtitleLayout: w,
                       size: $,
-                      autoFocus: !o || Dt,
+                      autoFocus: !o || Ot,
                       positioned: h !== null,
-                      onDismiss: jt,
+                      onDismiss: Ht,
                       keyboardNavigation: l,
                       onKeyboardNavigation: () => et(!0)
                     }
@@ -936,6 +937,6 @@ const pr = ({
   );
 };
 export {
-  pr as Dropdown
+  ur as Dropdown
 };
 //# sourceMappingURL=Dropdown.js.map