@stackone/malachite 2.49.1 → 2.50.0

package/dist/components/Dropdown.js

@@ -1,37 +1,37 @@
 import { jsx as e, jsxs as v, Fragment as bt } from "react/jsx-runtime";
-import $t, { useState as W, useRef as m, useEffect as Ft, 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 fe } from "./FieldMessage.js";
+import Ot, { useState as j, useRef as m, useEffect as At, useCallback as Rt, useLayoutEffect as le, useInsertionEffect as se, useId as ce } from "react";
+import { createPortal as de } from "react-dom";
+import ue, { useFormFieldIds as fe } from "./BaseFormComponent.js";
+import Vt from "./CustomIcons/CaretDownIcon.js";
+import It from "./CustomIcons/CloseIcon.js";
+import { FieldMessage as pe } from "./FieldMessage.js";
 import qt from "./LoadingInput.js";
-import pe 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 Lt } from "./activeElement.js";
-import { CONTROL_TEXT_SIZE_CLASS as at, CONTROL_TEXT_SIZE as me } from "./controlTextSize.js";
+import he from "./Spinner.js";
+import { Tag as ge } from "./Tag.js";
+import Dt from "./Tooltip.js";
+import xe from "./Typography/MarkdownBlock.js";
+import { inlineMarkdownText as me } from "./Typography/inlineMarkdown.js";
+import { getDeepActiveElement as _t } from "./activeElement.js";
+import { CONTROL_TEXT_SIZE_CLASS as at, CONTROL_TEXT_SIZE as ve } from "./controlTextSize.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 as Ee } from "./focusRing.js";
-import { hasBadge as Rt } from "./hasBadge.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 Le = $t.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text: i, disabled: r }) => /* @__PURE__ */ e(
+import { getTriggerVisual as be, DROPDOWN_TRIGGER_ATTR as Xt } from "./dropdownTriggerStyle.js";
+import { pushEscapeLayer as ye, isTopEscapeLayer as we } from "./escapeLayers.js";
+import { measureMenuGeometry as Se, isTriggerOffscreen as Te, rectSignature as Ee, MENU_MAX_HEIGHT_PX as Ne, MENU_SPECS as gt } from "./floatingMenuGeometry.js";
+import { FOCUS_RING as Ce } from "./focusRing.js";
+import { hasBadge as $t } from "./hasBadge.js";
+import { ensureDropdownPanelStyles as ke } from "./optionRowStyles.js";
+import { usePopupLayer as Le } from "./overlayLayers.js";
+import { useTopLayer as Re } from "./topLayer.js";
+import { tooltipLines as te, isCut as xt } from "./truncatedLines.js";
+const _e = Ot.lazy(() => import("./ActionMenuTagHost.js")), Yt = ({ id: t, text: o, disabled: r }) => /* @__PURE__ */ e(
   "span",
   {
     id: t,
     className: `flex min-w-0 max-w-[40%] [flex-shrink:3] ${r ? "opacity-60" : ""}`,
-    children: /* @__PURE__ */ e(he, { value: i, paddingSize: "compact", fontSize: "xsmall", textTransform: "none" })
+    children: /* @__PURE__ */ e(ge, { value: o, paddingSize: "compact", fontSize: "xsmall", textTransform: "none" })
   }
-), te = /[*`[<&\\]/, mt = ({ text: t }) => te.test(t) ? /* @__PURE__ */ e(
-  ge,
+), ee = /[*`[<&\\]/, mt = ({ text: t }) => ee.test(t) ? /* @__PURE__ */ e(
+  xe,
   {
     text: t,
     variant: "inline",
@@ -40,84 +40,84 @@ const Le = $t.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
     links: "inert",
     omitMargin: !0
   }
-) : t, Yt = {
+) : t, Qt = {
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
   gap: 8,
   padding: "24px 16px",
   color: "var(--malachite-text-dimmed, rgb(161, 161, 161))"
-}, Pt = "var(--malachite-font-size-xsmall, 11px)", Re = "[data-dropdown-option]", Wt = (t) => Array.from((t == null ? void 0 : t.querySelectorAll(Re)) ?? []), _e = (t) => te.test(t) ? xe(t) : t.replace(/\s+/g, " "), $e = (t, i) => {
-  const r = i.toLowerCase(), u = t.label.toLowerCase().includes(r), d = t.subtitle ? _e(t.subtitle).toLowerCase().includes(r) : !1, T = t.rightSideText ? t.rightSideText.toLowerCase().includes(r) : !1;
-  return u || d || T;
+}, Gt = "var(--malachite-font-size-xsmall, 11px)", $e = "[data-dropdown-option]", zt = (t) => Array.from((t == null ? void 0 : t.querySelectorAll($e)) ?? []), De = (t) => ee.test(t) ? me(t) : t.replace(/\s+/g, " "), ze = (t, o) => {
+  const r = o.toLowerCase(), p = t.label.toLowerCase().includes(r), u = t.subtitle ? De(t.subtitle).toLowerCase().includes(r) : !1, b = t.rightSideText ? t.rightSideText.toLowerCase().includes(r) : !1;
+  return p || u || b;
 }, vt = {
   small: "h-[var(--malachite-control-height-small,28px)]",
   medium: "h-[var(--malachite-control-height-medium,32px)]",
   large: "h-[var(--malachite-control-height-large,42px)]"
-}, De = {
+}, Ae = {
   small: `${vt.small} px-2.5 py-1.5 ${at.small}`,
   medium: `${vt.medium} px-3 py-1.5 ${at.medium}`,
   large: `${vt.large} px-4 py-2.5 ${at.large}`
-}, ze = {
+}, Oe = {
   small: `min-h-[var(--malachite-control-height-small,28px)] px-2.5 py-1.5 ${at.small}`,
   medium: `min-h-[var(--malachite-control-height-medium,32px)] px-3 py-1.5 ${at.medium}`,
   large: `min-h-[var(--malachite-control-height-large,42px)] px-4 py-2.5 ${at.large}`
-}, Ae = {
+}, Pe = {
   small: "right-[26px] size-4",
   medium: "right-[30px] size-4",
   large: "right-[38px] size-4"
-}, Oe = {
+}, Me = {
   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"
-}, Me = {
+}, Fe = {
   small: "rounded-[var(--malachite-radius-10,10px)]",
   medium: "rounded-xl",
   large: "rounded-[var(--malachite-radius-xxl,14px)]"
-}, Qt = () => !1, Pe = ({
+}, Jt = () => !1, We = ({
   wrap: t,
-  id: i,
+  id: o,
   children: r
-}) => t ? /* @__PURE__ */ e("span", { id: i, className: "min-w-0 flex items-center gap-2", children: r }) : /* @__PURE__ */ e(bt, { children: r }), Fe = ({ row: t, children: i }) => t ? /* @__PURE__ */ e("span", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: i }) : /* @__PURE__ */ e(bt, { children: i }), ee = $t.forwardRef(
+}) => t ? /* @__PURE__ */ e("span", { id: o, className: "min-w-0 flex items-center gap-2", children: r }) : /* @__PURE__ */ e(bt, { children: r }), Ge = ({ row: t, children: o }) => t ? /* @__PURE__ */ e("span", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: o }) : /* @__PURE__ */ e(bt, { children: o }), re = Ot.forwardRef(
   ({
     isOpen: t,
-    onClick: i,
+    onClick: o,
     selectedItem: r,
-    disabled: u = !1,
-    error: d = !1,
-    tone: T,
-    placeholder: k,
-    search: f = !1,
-    showSubtitleInTrigger: E = !1,
-    searchQuery: D = "",
-    onSearchChange: L,
+    disabled: p = !1,
+    error: u = !1,
+    tone: b,
+    placeholder: R,
+    search: d = !1,
+    showSubtitleInTrigger: y = !1,
+    searchQuery: z = "",
+    onSearchChange: _,
     onFocusOpen: N,
-    onClickOpen: y,
-    onArrowDown: R,
+    onClickOpen: S,
+    onArrowDown: $,
     onTabAway: C,
-    size: p = "large",
-    hasClear: _ = !1,
-    onClear: G,
-    clearLabel: o,
-    controlId: s,
+    size: f = "large",
+    hasClear: D = !1,
+    onClear: H,
+    clearLabel: i,
+    controlId: l,
     labelId: a,
     describedBy: g,
-    required: w = !1,
-    ariaLabel: z,
-    ariaLabelledBy: S,
-    hasCallerId: Dt = !1
+    required: T = !1,
+    ariaLabel: A,
+    ariaLabelledBy: E,
+    hasCallerId: Pt = !1
   }, I) => {
-    const j = E && !f && !!(r != null && r.subtitle), ot = j ? ze[p] : De[p], lt = Me[p], tt = `${s}-value`, yt = `${s}-subtitle`, A = `${s}-tag`, st = !f || u, H = st && !!(r != null && r.triggerTag), ct = !st && !t && !!(r != null && r.triggerTag), et = H ? `${tt} ${A}` : tt, $ = !a && !z && !Dt && (j || H), x = S ?? (a && !z ? `${a} ${et}` : void 0) ?? ($ ? et : void 0), zt = H && !(x != null && x.split(" ").includes(A)), rt = (l) => {
-      if (l.key === "Tab") {
+    const K = y && !d && !!(r != null && r.subtitle), ot = K ? Oe[f] : Ae[f], lt = Fe[f], tt = `${l}-value`, yt = `${l}-subtitle`, O = `${l}-tag`, st = !d || p, B = st && !!(r != null && r.triggerTag), ct = !st && !t && !!(r != null && r.triggerTag), et = B ? `${tt} ${O}` : tt, k = !a && !A && !Pt && (K || B), x = E ?? (a && !A ? `${a} ${et}` : void 0) ?? (k ? et : void 0), Mt = B && !(x != null && x.split(" ").includes(O)), rt = (s) => {
+      if (s.key === "Tab") {
         C == null || C();
         return;
       }
-      l.key === "ArrowDown" && (l.preventDefault(), R == null || R());
-    }, K = m(null), M = m(null), dt = ve({ disabled: u, error: d, tone: T, open: t }), wt = !t && !!r, P = (r == null ? void 0 : r.triggerLabel) ?? (r == null ? void 0 : r.label), b = j ? r == null ? void 0 : r.subtitle : void 0, B = () => xt(K.current), [O, At] = W({ value: !1, subtitle: !0 }), St = () => {
-      const l = B(), nt = xt(M.current);
-      return !l && !nt ? !1 : (At({ value: l, subtitle: nt }), !0);
+      s.key === "ArrowDown" && (s.preventDefault(), $ == null || $());
+    }, Z = m(null), M = m(null), dt = be({ disabled: p, error: u, tone: b, open: t }), wt = !t && !!r, F = (r == null ? void 0 : r.triggerLabel) ?? (r == null ? void 0 : r.label), w = K ? r == null ? void 0 : r.subtitle : void 0, V = () => xt(Z.current), [P, Ft] = j({ value: !1, subtitle: !0 }), St = () => {
+      const s = V(), nt = xt(M.current);
+      return !s && !nt ? !1 : (Ft({ value: s, subtitle: nt }), !0);
     };
-    if (f && !u)
+    if (d && !p)
       return /* @__PURE__ */ v(
         "div",
         {
@@ -129,12 +129,12 @@ const Le = $t.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
                 flex items-center
             `,
           style: dt,
-          [Vt]: "",
+          [Xt]: "",
           "data-open": t || void 0,
-          onClick: (l) => l.stopPropagation(),
+          onClick: (s) => s.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: P, shouldShow: B, isShrinkable: !0, fill: !0, children: /* @__PURE__ */ v("div", { className: "relative flex-1 flex items-center min-w-0", children: [
+            /* @__PURE__ */ e(Dt, { text: F, shouldShow: V, isShrinkable: !0, fill: !0, children: /* @__PURE__ */ v("div", { className: "relative flex-1 flex items-center min-w-0", children: [
               wt && /* @__PURE__ */ e(
                 "span",
                 {
@@ -143,10 +143,10 @@ const Le = $t.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
                   children: /* @__PURE__ */ e(
                     "span",
                     {
-                      ref: K,
+                      ref: Z,
                       className: `min-w-0 block truncate text-[length:inherit]
                                         text-[var(--malachite-text-primary)]`,
-                      children: P
+                      children: F
                     }
                   )
                 }
@@ -154,25 +154,25 @@ const Le = $t.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
               /* @__PURE__ */ e(
                 "input",
                 {
-                  id: s,
+                  id: l,
                   type: "text",
-                  "aria-label": z,
-                  "aria-labelledby": S,
-                  "aria-invalid": d || void 0,
-                  "aria-required": w || void 0,
-                  "aria-describedby": [g, ct ? A : void 0].filter(Boolean).join(" ") || void 0,
-                  value: t ? D : (r == null ? void 0 : r.label) ?? "",
-                  onChange: (l) => {
-                    l.stopPropagation(), L == null || L(l.target.value), t || i();
+                  "aria-label": A,
+                  "aria-labelledby": E,
+                  "aria-invalid": u || void 0,
+                  "aria-required": T || void 0,
+                  "aria-describedby": [g, ct ? O : void 0].filter(Boolean).join(" ") || void 0,
+                  value: t ? z : (r == null ? void 0 : r.label) ?? "",
+                  onChange: (s) => {
+                    s.stopPropagation(), _ == null || _(s.target.value), t || o();
                   },
                   onFocus: () => {
                     N == null || N();
                   },
                   onClick: () => {
-                    t || y == null || y();
+                    t || S == null || S();
                   },
                   onKeyDown: rt,
-                  placeholder: k ?? "Select Field",
+                  placeholder: R ?? "Select Field",
                   className: `flex-1 min-w-0 bg-transparent outline-none
                             text-[length:inherit] font-normal
                             placeholder:text-[var(--malachite-text-dimmed)] ${wt ? "text-transparent" : "text-[var(--malachite-text-primary)]"}`
@@ -181,19 +181,19 @@ const Le = $t.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
             ] }) }),
             ct && (r == null ? void 0 : r.triggerTag) && /* @__PURE__ */ v(bt, { children: [
               /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "w-2 shrink-0" }),
-              /* @__PURE__ */ e(Xt, { id: A, text: r.triggerTag })
+              /* @__PURE__ */ e(Yt, { id: O, text: r.triggerTag })
             ] }),
-            _ && /* @__PURE__ */ e(
+            D && /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
-                "aria-label": o,
-                onClick: G,
+                "aria-label": i,
+                onClick: H,
                 className: `flex shrink-0 items-center justify-center pl-2 cursor-pointer
                                 bg-transparent border-none p-0 text-[var(--malachite-text-placeholder)]
                                 hover:text-[var(--malachite-text-primary)] transition-colors
                                 rounded-full focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:outline-offset-2`,
-                children: /* @__PURE__ */ e(Jt, { size: 13 })
+                children: /* @__PURE__ */ e(It, { size: 13 })
               }
             ),
             /* @__PURE__ */ e("div", { className: "flex items-center justify-center pl-2", children: /* @__PURE__ */ e(
@@ -202,12 +202,12 @@ const Le = $t.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
                 type: "button",
                 tabIndex: -1,
                 "aria-label": t ? "Close options" : "Open options",
-                onClick: (l) => {
-                  l.stopPropagation(), i();
+                onClick: (s) => {
+                  s.stopPropagation(), o();
                 },
                 className: "flex items-center justify-center cursor-pointer bg-transparent border-none p-0",
                 children: /* @__PURE__ */ e(
-                  Zt,
+                  Vt,
                   {
                     size: 13,
                     style: {
@@ -226,81 +226,81 @@ const Le = $t.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
       "button",
       {
         ref: I,
-        id: s,
+        id: l,
         type: "button",
-        "aria-label": z,
+        "aria-label": A,
         "aria-labelledby": x,
-        "aria-invalid": d || void 0,
-        "aria-required": w || void 0,
+        "aria-invalid": u || void 0,
+        "aria-required": T || void 0,
         "aria-describedby": [
           g,
-          b ? yt : void 0,
-          zt ? A : void 0
+          w ? yt : void 0,
+          Mt ? O : void 0
         ].filter(Boolean).join(" ") || void 0,
-        onClick: (l) => {
-          l.stopPropagation(), i(l.detail === 0);
+        onClick: (s) => {
+          s.stopPropagation(), o(s.detail === 0);
         },
         onKeyDown: rt,
-        disabled: u,
+        disabled: p,
         style: dt,
-        [Vt]: "",
+        [Xt]: "",
         className: `
                 relative w-full ${ot} ${lt}
                 border border-solid
                 transition-all duration-200
-                flex ${j ? "items-start" : "items-center"} gap-3
+                flex ${K ? "items-start" : "items-center"} gap-3
                 cursor-pointer
-                disabled:cursor-not-allowed ${Ee}
+                disabled:cursor-not-allowed ${Ce}
             `,
         children: [
           /* @__PURE__ */ e(
             "span",
             {
-              id: b ? void 0 : tt,
-              className: `text-left ${H ? "flex-[1_1_auto]" : "flex-1"} min-w-0 flex ${b ? "flex-col gap-1" : "items-center gap-2"}`,
+              id: w ? void 0 : tt,
+              className: `text-left ${B ? "flex-[1_1_auto]" : "flex-1"} min-w-0 flex ${w ? "flex-col gap-1" : "items-center gap-2"}`,
               children: r ? /* @__PURE__ */ v(bt, { children: [
-                /* @__PURE__ */ v(Pe, { wrap: !!b, id: tt, children: [
+                /* @__PURE__ */ v(We, { wrap: !!w, id: tt, children: [
                   r.icon && /* @__PURE__ */ e("span", { className: "flex items-center justify-center shrink-0", children: r.icon }),
                   /* @__PURE__ */ e(
-                    _t,
+                    Dt,
                     {
-                      text: P,
-                      shouldShow: b ? Qt : B,
+                      text: F,
+                      shouldShow: w ? Jt : V,
                       triggerAs: "span",
                       isShrinkable: !0,
                       children: /* @__PURE__ */ e(
                         "span",
                         {
-                          ref: K,
-                          className: `min-w-0 block truncate text-[length:inherit] ${u ? "text-[var(--malachite-text-placeholder)]" : "text-[var(--malachite-text-primary)]"}`,
-                          children: P
+                          ref: Z,
+                          className: `min-w-0 block truncate text-[length:inherit] ${p ? "text-[var(--malachite-text-placeholder)]" : "text-[var(--malachite-text-primary)]"}`,
+                          children: F
                         }
                       )
                     }
                   )
                 ] }),
-                b && /* @__PURE__ */ e(
+                w && /* @__PURE__ */ e(
                   "span",
                   {
                     id: yt,
                     ref: M,
                     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: b })
+                    children: /* @__PURE__ */ e(mt, { text: w })
                   }
                 )
               ] }) : /* @__PURE__ */ e(
                 "span",
                 {
-                  className: `flex-1 min-w-0 truncate text-[length:inherit] ${u ? "text-[var(--malachite-text-placeholder)]" : "text-[var(--malachite-text-dimmed)]"}`,
-                  children: k ?? "Select Field"
+                  className: `flex-1 min-w-0 truncate text-[length:inherit] ${p ? "text-[var(--malachite-text-placeholder)]" : "text-[var(--malachite-text-dimmed)]"}`,
+                  children: R ?? "Select Field"
                 }
               )
             }
           ),
-          (r == null ? void 0 : r.triggerTag) && /* @__PURE__ */ e(Xt, { id: A, text: r.triggerTag, disabled: u }),
-          _ && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "shrink-0 w-4" }),
+          (r == null ? void 0 : r.triggerTag) && /* @__PURE__ */ e(Yt, { id: O, text: r.triggerTag, disabled: p }),
+          D && /* @__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,
+            Vt,
             {
               size: 13,
               style: {
@@ -313,17 +313,17 @@ const Le = $t.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
         ]
       }
     );
-    return E && !f ? /* @__PURE__ */ e(
-      _t,
+    return y && !d ? /* @__PURE__ */ e(
+      Dt,
       {
-        text: It([
-          ["value", O.value && P],
+        text: te([
+          ["value", P.value && F],
           [
             "subtitle",
-            O.subtitle && b && /* @__PURE__ */ e(mt, { text: b })
+            P.subtitle && w && /* @__PURE__ */ e(mt, { text: w })
           ]
         ]),
-        shouldShow: b ? St : Qt,
+        shouldShow: w ? St : Jt,
         fill: !0,
         describesTrigger: !1,
         children: Tt
@@ -331,18 +331,18 @@ const Le = $t.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
     ) : Tt;
   }
 );
-ee.displayName = "DropdownTrigger";
-const We = ({
+re.displayName = "DropdownTrigger";
+const je = ({
   item: t,
-  selected: i,
+  selected: o,
   showTooltipOnFocus: r,
-  subtitleLayout: u,
-  onItemSelected: d
+  subtitleLayout: p,
+  onItemSelected: u
 }) => {
-  const T = i ? "var(--malachite-accent-foreground, rgb(2, 122, 66))" : "var(--malachite-text-primary, rgb(10, 10, 10))", k = u === "stacked" && !!t.subtitle, f = `mal-${se().replace(/[^a-zA-Z0-9_-]/g, "")}`, E = `${f}-label`, D = `${f}-subtitle`, L = `${f}-badge`, N = t.badgePlacement === "label", y = Rt(t.badge) ? /* @__PURE__ */ e("span", { id: L, style: { flexShrink: 0, display: "flex" }, children: /* @__PURE__ */ e($t.Suspense, { fallback: null, children: /* @__PURE__ */ e(Le, { children: t.badge }) }) }) : null, R = m(null), C = m(null), p = m(null), [_, G] = W({ label: !0, subtitle: !0, rightSide: !0 }), o = () => {
-    const w = xt(R.current), z = xt(C.current), S = xt(p.current);
-    return !w && !z && !S ? !1 : (G({ label: w, subtitle: z, rightSide: S }), !0);
-  }, s = 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))", a = t.rightSideTextAlignment === "left" ? "flex-start" : "flex-end", g = (
+  const b = o ? "var(--malachite-accent-foreground, rgb(2, 122, 66))" : "var(--malachite-text-primary, rgb(10, 10, 10))", R = p === "stacked" && !!t.subtitle, d = `mal-${ce().replace(/[^a-zA-Z0-9_-]/g, "")}`, y = `${d}-label`, z = `${d}-subtitle`, _ = `${d}-badge`, N = t.badgePlacement === "label", S = $t(t.badge) ? /* @__PURE__ */ e("span", { id: _, style: { flexShrink: 0, display: "flex" }, children: /* @__PURE__ */ e(Ot.Suspense, { fallback: null, children: /* @__PURE__ */ e(_e, { children: t.badge }) }) }) : null, $ = m(null), C = m(null), f = m(null), [D, H] = j({ label: !0, subtitle: !0, rightSide: !0 }), i = () => {
+    const T = xt($.current), A = xt(C.current), E = xt(f.current);
+    return !T && !A && !E ? !1 : (H({ label: T, subtitle: A, rightSide: E }), !0);
+  }, l = 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))", a = t.rightSideTextAlignment === "left" ? "flex-start" : "flex-end", g = (
     // `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}
@@ -353,16 +353,16 @@ const We = ({
       {
         type: "button",
         "data-dropdown-option": "",
-        "data-selected": i,
-        "aria-current": i || void 0,
-        "aria-labelledby": t.subtitle || Rt(t.badge) ? E : void 0,
+        "data-selected": o,
+        "aria-current": o || void 0,
+        "aria-labelledby": t.subtitle || $t(t.badge) ? y : void 0,
         "aria-describedby": [
-          t.subtitle ? D : void 0,
-          Rt(t.badge) ? L : void 0
+          t.subtitle ? z : void 0,
+          $t(t.badge) ? _ : void 0
         ].filter(Boolean).join(" ") || void 0,
         tabIndex: -1,
-        onClick: (w) => {
-          w.stopPropagation(), d(t);
+        onClick: (T) => {
+          T.stopPropagation(), u(t);
         },
         className: "malachite-dropdown-option",
         style: {
@@ -395,9 +395,9 @@ const We = ({
               /* @__PURE__ */ e("span", { style: { flex: "1 1 auto", display: "block", minWidth: 0 }, children: /* @__PURE__ */ v(
                 "span",
                 {
-                  style: k ? { display: "flex", flexDirection: "column", gap: 2 } : { display: "flex", alignItems: "center", gap: 8 },
+                  style: R ? { display: "flex", flexDirection: "column", gap: 2 } : { display: "flex", alignItems: "center", gap: 8 },
                   children: [
-                    /* @__PURE__ */ v(Fe, { row: k && (!!t.icon || N && !!y), children: [
+                    /* @__PURE__ */ v(Ge, { row: R && (!!t.icon || N && !!S), children: [
                       t.icon && /* @__PURE__ */ e(
                         "span",
                         {
@@ -413,11 +413,11 @@ const We = ({
                       /* @__PURE__ */ e(
                         "span",
                         {
-                          id: t.subtitle || Rt(t.badge) ? E : void 0,
-                          ref: R,
+                          id: t.subtitle || $t(t.badge) ? y : void 0,
+                          ref: $,
                           style: {
                             fontWeight: 400,
-                            color: T,
+                            color: b,
                             whiteSpace: "nowrap",
                             overflow: "hidden",
                             textOverflow: "ellipsis",
@@ -426,18 +426,18 @@ const We = ({
                           children: t.label
                         }
                       ),
-                      N && y
+                      N && S
                     ] }),
-                    t.subtitle && (k ? /* @__PURE__ */ e(
+                    t.subtitle && (R ? /* @__PURE__ */ e(
                       "span",
                       {
-                        id: D,
+                        id: z,
                         ref: C,
                         style: {
-                          fontSize: Pt,
+                          fontSize: Gt,
                           fontWeight: 400,
                           lineHeight: 1.4,
-                          color: i ? T : "var(--malachite-text-dimmed, rgb(161, 161, 161))",
+                          color: o ? b : "var(--malachite-text-dimmed, rgb(161, 161, 161))",
                           whiteSpace: "nowrap",
                           overflow: "hidden",
                           textOverflow: "ellipsis"
@@ -462,7 +462,7 @@ const We = ({
                             "span",
                             {
                               style: {
-                                fontSize: Pt,
+                                fontSize: Gt,
                                 fontWeight: 400,
                                 color: "var(--malachite-text-secondary, rgb(123, 123, 123))",
                                 flexShrink: 0
@@ -473,10 +473,10 @@ const We = ({
                           /* @__PURE__ */ e(
                             "span",
                             {
-                              id: D,
+                              id: z,
                               ref: C,
                               style: {
-                                fontSize: Pt,
+                                fontSize: Gt,
                                 fontWeight: 400,
                                 color: "var(--malachite-text-secondary, rgb(123, 123, 123))",
                                 whiteSpace: "nowrap",
@@ -507,11 +507,11 @@ const We = ({
                   children: t.rightSideText && /* @__PURE__ */ e(
                     "span",
                     {
-                      ref: p,
+                      ref: f,
                       style: {
                         fontSize: "var(--malachite-text-right-side-text-font-size, 12px)",
                         fontWeight: 400,
-                        color: s,
+                        color: l,
                         whiteSpace: "nowrap",
                         overflow: "hidden",
                         textOverflow: "ellipsis",
@@ -522,7 +522,7 @@ const We = ({
                   )
                 }
               ),
-              !N && y
+              !N && S
             ]
           }
         )
@@ -530,88 +530,91 @@ const We = ({
     )
   );
   return /* @__PURE__ */ e(
-    _t,
+    Dt,
     {
-      text: It([
-        ["label", _.label && t.label],
+      text: te([
+        ["label", D.label && t.label],
         [
           "subtitle",
-          _.subtitle && t.subtitle && /* @__PURE__ */ e(mt, { text: t.subtitle })
+          D.subtitle && t.subtitle && /* @__PURE__ */ e(mt, { text: t.subtitle })
         ],
-        ["rightSide", _.rightSide && t.rightSideText]
+        ["rightSide", D.rightSide && t.rightSideText]
       ]),
-      shouldShow: o,
+      shouldShow: i,
       showOnFocus: r,
       isShrinkable: !0,
       describesTrigger: !1,
       children: g
     }
   );
-}, re = $t.forwardRef((t, i) => {
+}, ne = Ot.forwardRef((t, o) => {
   const {
     items: r,
-    onItemSelected: u,
-    selectedItem: d,
-    menuLoading: T,
-    emptyMessage: k,
-    autoFocus: f,
-    positioned: E,
-    onDismiss: D,
-    keyboardNavigation: L,
+    onItemSelected: p,
+    selectedItem: u,
+    menuLoading: b,
+    emptyMessage: R,
+    autoFocus: d,
+    positioned: y,
+    onDismiss: z,
+    keyboardNavigation: _,
     onKeyboardNavigation: N,
-    subtitleLayout: y,
-    size: R,
+    subtitleLayout: S,
+    size: $,
     style: C
-  } = t, p = m(null), _ = Ce("dropdown", !0, p);
-  return le(() => {
-    Ne();
-  }, []), ke(p, !0), Ft(() => {
+  } = t, f = m(null), D = Le("dropdown", !0, f);
+  return se(() => {
+    ke();
+  }, []), Re(f, !0), At(() => {
     var a;
-    if (!f || !E)
+    if (!d || !y)
       return;
-    const o = Wt(p.current);
-    (a = o.find((g) => g.dataset.selected === "true") ?? o[0] ?? p.current) == null || a.focus();
-  }, [f, E]), /* @__PURE__ */ e(
+    const i = zt(f.current);
+    (a = i.find((g) => g.dataset.selected === "true") ?? i[0] ?? f.current) == null || a.focus();
+  }, [d, y]), At(() => {
+    var i, l;
+    d || !y || b || (l = (i = zt(f.current).find((a) => a.dataset.selected === "true")) == null ? void 0 : i.scrollIntoView) == null || l.call(i, { block: "nearest" });
+  }, [d, y, b]), /* @__PURE__ */ e(
     "div",
     {
-      ref: (o) => {
-        p.current = o, typeof i == "function" ? i(o) : i && (i.current = o);
+      ref: (i) => {
+        f.current = i, typeof o == "function" ? o(i) : o && (o.current = i);
       },
-      ..._,
+      ...D,
       tabIndex: -1,
-      onKeyDown: (o) => {
-        var w;
-        if (o.key === "Tab") {
-          D();
+      onKeyDown: (i) => {
+        var T;
+        if (i.key === "Tab") {
+          z();
           return;
         }
-        const s = Wt(p.current);
-        if (s.length === 0)
+        const l = zt(f.current);
+        if (l.length === 0)
           return;
-        const a = s.indexOf(document.activeElement), g = {
+        const a = l.indexOf(document.activeElement), g = {
           ArrowDown: a + 1,
           ArrowUp: a - 1,
           Home: 0,
-          End: s.length - 1
-        }[o.key];
-        g !== void 0 && (o.preventDefault(), N(), (w = s[Math.min(Math.max(g, 0), s.length - 1)]) == null || w.focus());
+          End: l.length - 1
+        }[i.key];
+        g !== void 0 && (i.preventDefault(), N(), (T = l[Math.min(Math.max(g, 0), l.length - 1)]) == null || T.focus());
       },
       style: {
         background: gt.standard.background,
         border: gt.standard.border,
         borderRadius: gt.standard.radius,
         boxShadow: gt.standard.shadow,
-        maxHeight: Te,
+        maxHeight: Ne,
         overflow: "hidden",
         display: "flex",
         flexDirection: "column",
-        fontSize: me[R],
+        fontSize: ve[$],
         ...C
       },
-      children: T ? /* @__PURE__ */ v("div", { style: Yt, children: [
-        /* @__PURE__ */ e(pe, { size: "xxxsmall" }),
+      children: b ? /* @__PURE__ */ v("div", { style: Qt, children: [
+        /* @__PURE__ */ e(he, { size: "xxxsmall" }),
         /* @__PURE__ */ e("span", { children: "Loading…" })
-      ] }) : r.length === 0 ? /* @__PURE__ */ e("div", { style: Yt, children: k }) : /* @__PURE__ */ e(
+      ] }) : r.length === 0 ? /* @__PURE__ */ e("div", { style: Qt, children: R }) : /* @__PURE__ */ e(
         "div",
         {
           style: {
@@ -623,8 +626,8 @@ const We = ({
             scrollbarWidth: "thin",
             scrollbarColor: "var(--malachite-text-placeholder, rgb(187, 187, 187)) transparent"
           },
-          children: r.map((o, s) => {
-            const a = r[s - 1], g = !!o.group && (!a || a.group !== o.group);
+          children: r.map((i, l) => {
+            const a = r[l - 1], g = !!i.group && (!a || a.group !== i.group);
             return /* @__PURE__ */ v("div", { style: { flexShrink: 0 }, children: [
               g && /* @__PURE__ */ e(
                 "div",
@@ -637,193 +640,193 @@ const We = ({
                     textTransform: "none",
                     userSelect: "none"
                   },
-                  children: o.group
+                  children: i.group
                 }
               ),
               /* @__PURE__ */ e(
-                We,
+                je,
                 {
-                  item: o,
-                  onItemSelected: u,
-                  subtitleLayout: y,
-                  selected: o.id === (d == null ? void 0 : d.id) || !1,
-                  showTooltipOnFocus: L
+                  item: i,
+                  onItemSelected: p,
+                  subtitleLayout: S,
+                  selected: i.id === (u == null ? void 0 : u.id) || !1,
+                  showTooltipOnFocus: _
                 }
               )
-            ] }, o.id);
+            ] }, i.id);
           })
         }
       )
     }
   );
 });
-re.displayName = "DropdownPanel";
-const ur = ({
+ne.displayName = "DropdownPanel";
+const pr = ({
   items: t,
-  onItemSelected: i,
+  onItemSelected: o,
   defaultValue: r,
-  value: u,
-  disabled: d = !1,
-  error: T,
-  tone: k,
-  label: f,
-  hint: E,
-  rightSideContent: D,
-  tooltip: L,
+  value: p,
+  disabled: u = !1,
+  error: b,
+  tone: R,
+  label: d,
+  hint: y,
+  rightSideContent: z,
+  tooltip: _,
   name: N,
-  required: y = !1,
-  requiredIndicator: R,
+  required: S = !1,
+  requiredIndicator: $,
   loading: C,
-  menuLoading: p,
-  formControl: _,
-  description: G,
-  helperText: o,
-  placeholder: s,
+  menuLoading: f,
+  formControl: D,
+  description: H,
+  helperText: i,
+  placeholder: l,
   search: a = !1,
   showSubtitleInTrigger: g = !1,
-  subtitleLayout: w = "inline",
-  clearable: z = !1,
-  size: S = "large",
-  fullWidth: Dt = !1,
+  subtitleLayout: T = "inline",
+  clearable: A = !1,
+  size: E = "large",
+  fullWidth: Pt = !1,
   width: I,
-  minWidth: j,
+  minWidth: K,
   menuAlign: ot = "start",
   id: lt,
   "aria-label": tt,
   "aria-labelledby": yt
 }) => {
-  const { controlId: A, labelId: st, descriptionId: H, hintId: ct, helperTextId: et } = ue({
+  const { controlId: O, labelId: st, descriptionId: B, hintId: ct, helperTextId: et } = fe({
     id: lt,
-    label: f,
-    description: G,
-    hint: E,
+    label: d,
+    description: H,
+    hint: y,
     helperText: !0
-  }), [$, x] = W(!1), [zt, rt] = W(r), K = u ?? zt, M = t.find((n) => n.id === K), dt = z && K !== void 0 && K !== "" && !d, wt = g && !a && !!(M != null && M.subtitle), P = `Clear ${f ?? s ?? "selection"}`, b = m(r);
-  Ft(() => {
-    b.current !== r && (b.current = r, rt(r));
+  }), [k, x] = j(!1), [Mt, rt] = j(r), Z = p ?? Mt, M = t.find((n) => n.id === Z), dt = A && Z !== void 0 && Z !== "" && !u, wt = g && !a && !!(M != null && M.subtitle), F = `Clear ${d ?? l ?? "selection"}`, w = m(r);
+  At(() => {
+    w.current !== r && (w.current = r, rt(r));
   }, [r]);
-  const [B, O] = W(""), [At, St] = W(!1), [Tt, l] = W(!1), nt = m(null), Et = m(null), Z = m(null), [h, Gt] = W(null), ut = m(!0), q = Mt(() => {
+  const [V, P] = j(""), [Ft, St] = j(!1), [Tt, s] = j(!1), nt = m(null), Et = m(null), q = m(null), [h, jt] = j(null), ut = m(!0), W = Rt(() => {
     const n = Et.current, c = n instanceof HTMLButtonElement ? n : (n == null ? void 0 : n.querySelector("input")) ?? null;
-    if (!(!c || c === Lt())) {
+    if (!(!c || c === _t())) {
       if (!a) {
         c.focus();
         return;
       }
-      ut.current = !1, c.focus(), Lt() !== c && (ut.current = !0);
+      ut.current = !1, c.focus(), _t() !== c && (ut.current = !0);
     }
-  }, [a]), jt = Mt(
+  }, [a]), Nt = Rt(() => {
+    x(!1), a && P(""), W();
+  }, [a, W]), Ht = Rt(
     (n) => {
       var c;
-      n.stopPropagation(), rt(void 0), (c = V.current) == null || c.call(V, Ot.current), i == null || i(void 0), q();
+      n.stopPropagation(), rt(void 0), (c = X.current) == null || c.call(X, Wt.current), o == null || o(void 0), W();
     },
-    [i, q]
-  ), U = Mt(() => {
+    [o, W]
+  ), U = Rt(() => {
     const n = Et.current;
-    n && Gt(
-      ye(Z.current, {
+    n && jt(
+      Se(q.current, {
         triggerRect: n.getBoundingClientRect(),
         preset: "standard",
-        minWidth: j,
+        minWidth: K,
         align: ot === "end" ? "right" : "left",
         viewportWidth: window.innerWidth,
         viewportHeight: window.innerHeight
       })
     );
-  }, [j, ot]);
-  Ft(() => {
-    if (!$) {
-      Gt(null), St(!1);
+  }, [K, ot]);
+  At(() => {
+    if (!k) {
+      jt(null), St(!1);
       return;
     }
     U();
-    const n = (Y) => {
-      var pt, ht, Bt;
-      const F = Y.composedPath(), Q = nt.current, J = Z.current, kt = !!Q && F.includes(Q), Kt = !!J && F.includes(J);
-      !kt && !Kt && (x(!1), a && O(""), (pt = Z.current) != null && pt.contains(Lt()) && q(), (ht = nt.current) != null && ht.contains(Lt()) || (Bt = X.current) == null || Bt.call(X));
-    }, c = be(() => {
-      x(!1), a && O(""), q();
-    }), it = () => U();
-    let ft = 0, Nt = "";
-    const Ct = () => {
-      const Y = Et.current;
-      if (Y) {
-        const F = Y.getBoundingClientRect();
-        if (we(F, window.innerWidth, window.innerHeight)) {
-          x(!1), a && O("");
+    const n = (Q) => {
+      var pt, ht, Zt;
+      const G = Q.composedPath(), J = nt.current, L = q.current, Lt = !!J && G.includes(J), Bt = !!L && G.includes(L);
+      !Lt && !Bt && (x(!1), a && P(""), (pt = q.current) != null && pt.contains(_t()) && W(), (ht = nt.current) != null && ht.contains(_t()) || (Zt = Y.current) == null || Zt.call(Y));
+    }, c = ye(Nt), it = () => U();
+    let ft = 0, Ct = "";
+    const kt = () => {
+      const Q = Et.current;
+      if (Q) {
+        const G = Q.getBoundingClientRect();
+        if (Te(G, window.innerWidth, window.innerHeight)) {
+          x(!1), a && P("");
           return;
         }
-        const Q = Se(F);
-        Q !== Nt && (Nt = Q, U());
+        const J = Ee(G);
+        J !== Ct && (Ct = J, U());
       }
-      ft = requestAnimationFrame(Ct);
+      ft = requestAnimationFrame(kt);
     };
-    return ft = requestAnimationFrame(Ct), document.addEventListener("mousedown", n), window.addEventListener("scroll", it, !0), window.addEventListener("resize", it), () => {
+    return ft = requestAnimationFrame(kt), document.addEventListener("mousedown", n), window.addEventListener("scroll", it, !0), window.addEventListener("resize", it), () => {
       cancelAnimationFrame(ft), document.removeEventListener("mousedown", n), c(), window.removeEventListener("scroll", it, !0), window.removeEventListener("resize", it);
     };
-  }, [$, a, U, q]), oe(() => {
-    if (!$)
+  }, [k, a, U, W, Nt]), le(() => {
+    if (!k)
       return;
     U();
-    const n = Z.current;
+    const n = q.current;
     if (!n || typeof ResizeObserver > "u")
       return;
     const c = new ResizeObserver(() => U());
     return c.observe(n), () => c.disconnect();
-  }, [$, U]);
-  const V = m(void 0), X = m(void 0), Ot = m(""), ne = (n) => {
+  }, [k, U]);
+  const X = m(void 0), Y = m(void 0), Wt = m(""), ie = (n) => {
     var c;
-    rt(n == null ? void 0 : n.id), (c = V.current) == null || c.call(V, (n == null ? void 0 : n.id) ?? Ot.current), x(!1), a && O(""), i == null || i(n == null ? void 0 : n.id), q();
-  }, Ht = () => {
-    x(!1), a && O(""), q();
-  }, ie = () => {
-    l(!0);
-    const n = Wt(Z.current)[0];
+    rt(n == null ? void 0 : n.id), (c = X.current) == null || c.call(X, (n == null ? void 0 : n.id) ?? Wt.current), x(!1), a && P(""), o == null || o(n == null ? void 0 : n.id), W();
+  }, Kt = () => {
+    x(!1), a && P(""), W();
+  }, ae = () => {
+    s(!0);
+    const n = zt(q.current)[0];
     if (n) {
       n.focus();
       return;
     }
     St(!0), x(!0);
-  }, ae = a && B ? t.filter((n) => $e(n, B)) : t;
+  }, oe = a && V ? t.filter((n) => ze(n, V)) : t;
   return /* @__PURE__ */ e(
-    de,
+    ue,
     {
-      fullWidth: Dt,
-      label: f,
-      hint: E,
-      rightSideContent: D,
-      tooltip: L,
+      fullWidth: Pt,
+      label: d,
+      hint: y,
+      rightSideContent: z,
+      tooltip: _,
       name: N,
-      required: y,
-      requiredIndicator: R,
+      required: S,
+      requiredIndicator: $,
       loading: C,
-      formControl: _,
-      description: G,
-      controlId: A,
+      formControl: D,
+      description: H,
+      controlId: O,
       labelId: st,
-      descriptionId: H,
+      descriptionId: B,
       hintId: ct,
       loadingComponent: I === void 0 ? /* @__PURE__ */ e(
         qt,
         {
-          heightClass: vt[S],
-          helperText: !!o,
+          heightClass: vt[E],
+          helperText: !!i,
           helperTextMarginTop: !0
         }
       ) : /* @__PURE__ */ e("div", { style: Ut(I), children: /* @__PURE__ */ e(
         qt,
         {
-          heightClass: vt[S],
-          helperText: !!o,
+          heightClass: vt[E],
+          helperText: !!i,
           helperTextMarginTop: !0
         }
       ) }),
-      children: ({ error: n, message: c, onFieldChange: it, onFieldBlur: ft, emptyValue: Nt }) => {
-        V.current = it, X.current = ft, Ot.current = Nt;
-        const Ct = T ?? n, Y = T === !1 ? void 0 : c, F = `${et}-error`, Q = [
-          H,
+      children: ({ error: n, message: c, onFieldChange: it, onFieldBlur: ft, emptyValue: Ct }) => {
+        X.current = it, Y.current = ft, Wt.current = Ct;
+        const kt = b ?? n, Q = b === !1 ? void 0 : c, G = `${et}-error`, J = [
+          B,
           ct,
-          o ? et : void 0,
-          Y ? F : void 0
+          i ? et : void 0,
+          Q ? G : void 0
         ].filter(Boolean).join(" ") || void 0;
         return /* @__PURE__ */ v(bt, { children: [
           /* @__PURE__ */ v(
@@ -832,45 +835,48 @@ const ur = ({
               ref: nt,
               className: "relative w-full",
               style: Ut(I),
-              onBlur: (J) => {
+              onKeyDown: (L) => {
+                L.key !== "Escape" || !k || L.defaultPrevented || !we(Nt) || (L.stopPropagation(), Nt());
+              },
+              onBlur: (L) => {
                 var pt, ht;
-                const kt = J.relatedTarget;
-                J.currentTarget.contains(kt) || ((pt = Z.current) == null ? void 0 : pt.contains(kt)) === !0 || (ht = X.current) == null || ht.call(X);
+                const Lt = L.relatedTarget;
+                L.currentTarget.contains(Lt) || ((pt = q.current) == null ? void 0 : pt.contains(Lt)) === !0 || (ht = Y.current) == null || ht.call(Y);
               },
               children: [
                 dt && !a && /* @__PURE__ */ e(
                   "button",
                   {
                     type: "button",
-                    onClick: jt,
-                    "aria-label": P,
-                    className: `absolute ${wt ? Oe[S] : "top-1/2 -translate-y-1/2"} z-10 flex items-center
+                    onClick: Ht,
+                    "aria-label": F,
+                    className: `absolute ${wt ? Me[E] : "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[S]}`,
-                    children: /* @__PURE__ */ e(Jt, { size: 13 })
+                            focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:outline-offset-2 ${Pe[E]}`,
+                    children: /* @__PURE__ */ e(It, { size: 13 })
                   }
                 ),
                 /* @__PURE__ */ e(
-                  ee,
+                  re,
                   {
                     hasClear: dt,
-                    onClear: jt,
-                    clearLabel: P,
+                    onClear: Ht,
+                    clearLabel: F,
                     ref: Et,
-                    isOpen: $,
-                    onClick: (J) => {
-                      d || (l(!!J), x(!$));
+                    isOpen: k,
+                    onClick: (L) => {
+                      u || (s(!!L), x(!k));
                     },
                     selectedItem: M,
-                    disabled: d,
-                    error: Ct,
-                    tone: k,
-                    placeholder: s,
+                    disabled: u,
+                    error: kt,
+                    tone: R,
+                    placeholder: l,
                     search: a,
                     showSubtitleInTrigger: g,
-                    searchQuery: B,
-                    onSearchChange: O,
+                    searchQuery: V,
+                    onSearchChange: P,
                     onFocusOpen: () => {
                       if (!ut.current) {
                         ut.current = !0;
@@ -882,26 +888,26 @@ const ur = ({
                       ut.current = !0, x(!0);
                     },
                     onArrowDown: () => {
-                      d || ie();
+                      u || ae();
                     },
                     onTabAway: () => {
-                      $ && Ht();
+                      k && Kt();
                     },
-                    size: S,
-                    controlId: A,
+                    size: E,
+                    controlId: O,
                     hasCallerId: !!lt,
                     labelId: st,
-                    describedBy: Q,
-                    required: y,
+                    describedBy: J,
+                    required: S,
                     ariaLabel: tt,
                     ariaLabelledBy: yt
                   }
                 ),
-                $ && ce(
+                k && de(
                   /* @__PURE__ */ e(
-                    re,
+                    ne,
                     {
-                      ref: Z,
+                      ref: q,
                       style: {
                         position: "fixed",
                         top: (h == null ? void 0 : h.top) ?? 0,
@@ -911,18 +917,18 @@ const ur = ({
                         visibility: h ? "visible" : "hidden",
                         opacity: h ? 1 : 0
                       },
-                      items: ae,
-                      onItemSelected: ne,
+                      items: oe,
+                      onItemSelected: ie,
                       selectedItem: M,
-                      menuLoading: p,
+                      menuLoading: f,
                       emptyMessage: t.length === 0 ? "No options available" : "No results found",
-                      subtitleLayout: w,
-                      size: S,
-                      autoFocus: !a || At,
+                      subtitleLayout: T,
+                      size: E,
+                      autoFocus: !a || Ft,
                       positioned: h !== null,
-                      onDismiss: Ht,
+                      onDismiss: Kt,
                       keyboardNavigation: Tt,
-                      onKeyboardNavigation: () => l(!0)
+                      onKeyboardNavigation: () => s(!0)
                     }
                   ),
                   document.body
@@ -930,21 +936,21 @@ const ur = ({
               ]
             }
           ),
-          o && /* @__PURE__ */ e(
+          i && /* @__PURE__ */ e(
             "div",
             {
               id: et,
               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
+              children: i
             }
           ),
-          /* @__PURE__ */ e(fe, { id: F, message: Y, spaced: !0 })
+          /* @__PURE__ */ e(pe, { id: G, message: Q, spaced: !0 })
         ] });
       }
     }
   );
 };
 export {
-  ur as Dropdown
+  pr as Dropdown
 };
 //# sourceMappingURL=Dropdown.js.map