@stackone/malachite 2.42.1 → 2.43.0

package/dist/components/Dropdown.js

@@ -1,26 +1,28 @@
-import { jsx as t, jsxs as y, Fragment as we } from "react/jsx-runtime";
-import je, { useState as j, useRef as g, useEffect as Le, useCallback as Ne, useLayoutEffect as Je, useInsertionEffect as et, useId as tt } from "react";
-import { createPortal as rt } from "react-dom";
-import nt, { useFormFieldIds as it } from "./BaseFormComponent.js";
-import Me from "./CustomIcons/CaretDownIcon.js";
-import Ze from "./CustomIcons/CloseIcon.js";
-import { FieldMessage as at } from "./FieldMessage.js";
-import We from "./LoadingInput.js";
-import ot from "./Spinner.js";
-import ye from "./Tooltip.js";
-import lt from "./Typography/MarkdownBlock.js";
-import { inlineMarkdownText as st } from "./Typography/inlineMarkdown.js";
-import { CONTROL_TEXT_SIZE_CLASS as Q, CONTROL_TEXT_SIZE as ct } from "./controlTextSize.js";
-import { controlWidthStyle as Pe } from "./controlWidth.js";
-import { getTriggerVisual as dt, DROPDOWN_TRIGGER_ATTR as Fe } from "./dropdownTriggerStyle.js";
-import { pushEscapeLayer as ut } from "./escapeLayers.js";
-import { measureMenuGeometry as pt, isTriggerOffscreen as ft, rectSignature as ht, MENU_MAX_HEIGHT_PX as gt, MENU_SPECS as oe } from "./floatingMenuGeometry.js";
-import { ensureDropdownPanelStyles as mt } from "./optionRowStyles.js";
-import { overlayIdentity as xt } from "./portalOverlay.js";
-import { useTopLayer as vt } from "./topLayer.js";
-import { tooltipLines as Ie, isCut as le } from "./truncatedLines.js";
-const Ke = /[*`[<&\\]/, se = ({ text: e }) => Ke.test(e) ? /* @__PURE__ */ t(
-  lt,
+import { jsx as t, jsxs as v, Fragment as Ne } from "react/jsx-runtime";
+import Ue, { useState as z, useRef as h, useEffect as Oe, useCallback as ke, useLayoutEffect as nt, useInsertionEffect as it, useId as at } from "react";
+import { createPortal as ot } from "react-dom";
+import lt, { useFormFieldIds as st } from "./BaseFormComponent.js";
+import Ge from "./CustomIcons/CaretDownIcon.js";
+import Be from "./CustomIcons/CloseIcon.js";
+import { FieldMessage as ct } from "./FieldMessage.js";
+import He from "./LoadingInput.js";
+import dt from "./Spinner.js";
+import Ee from "./Tooltip.js";
+import ut from "./Typography/MarkdownBlock.js";
+import { inlineMarkdownText as pt } from "./Typography/inlineMarkdown.js";
+import { getDeepActiveElement as Te } from "./activeElement.js";
+import { CONTROL_TEXT_SIZE_CLASS as ee, CONTROL_TEXT_SIZE as ft } from "./controlTextSize.js";
+import { controlWidthStyle as je } from "./controlWidth.js";
+import { getTriggerVisual as ht, DROPDOWN_TRIGGER_ATTR as Ie } from "./dropdownTriggerStyle.js";
+import { pushEscapeLayer as gt } from "./escapeLayers.js";
+import { measureMenuGeometry as mt, isTriggerOffscreen as xt, rectSignature as vt, MENU_MAX_HEIGHT_PX as bt, MENU_SPECS as se } from "./floatingMenuGeometry.js";
+import { FOCUS_RING_WITHIN_INPUT as yt, FOCUS_RING as wt } from "./focusRing.js";
+import { ensureDropdownPanelStyles as St } from "./optionRowStyles.js";
+import { usePopupLayer as Tt } from "./overlayLayers.js";
+import { useTopLayer as Et } from "./topLayer.js";
+import { tooltipLines as qe, isCut as ce } from "./truncatedLines.js";
+const Ve = /[*`[<&\\]/, de = ({ text: e }) => Ve.test(e) ? /* @__PURE__ */ t(
+  ut,
   {
     text: e,
     variant: "inline",
@@ -29,95 +31,100 @@ const Ke = /[*`[<&\\]/, se = ({ text: e }) => Ke.test(e) ? /* @__PURE__ */ t(
     links: "inert",
     omitMargin: !0
   }
-) : e, Ge = {
+) : e, Ke = {
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
   gap: 8,
   padding: "24px 16px",
   color: "var(--malachite-text-dimmed, rgb(161, 161, 161))"
-}, Re = "var(--malachite-font-size-xsmall, 11px)", bt = "[data-dropdown-option]", _e = (e) => Array.from((e == null ? void 0 : e.querySelectorAll(bt)) ?? []), yt = (e) => Ke.test(e) ? st(e) : e.replace(/\s+/g, " "), wt = (e, i) => {
-  const r = i.toLowerCase(), m = e.label.toLowerCase().includes(r), c = e.subtitle ? yt(e.subtitle).toLowerCase().includes(r) : !1, w = e.rightSideText ? e.rightSideText.toLowerCase().includes(r) : !1;
-  return m || c || w;
-}, ce = {
+}, $e = "var(--malachite-font-size-xsmall, 11px)", Nt = "[data-dropdown-option]", De = (e) => Array.from((e == null ? void 0 : e.querySelectorAll(Nt)) ?? []), Ct = (e) => Ve.test(e) ? pt(e) : e.replace(/\s+/g, " "), Rt = (e, a) => {
+  const r = a.toLowerCase(), g = e.label.toLowerCase().includes(r), d = e.subtitle ? Ct(e.subtitle).toLowerCase().includes(r) : !1, b = e.rightSideText ? e.rightSideText.toLowerCase().includes(r) : !1;
+  return g || d || b;
+}, ue = {
   small: "h-[var(--malachite-control-height-small,28px)]",
   medium: "h-[var(--malachite-control-height-medium,32px)]",
   large: "h-[var(--malachite-control-height-large,42px)]"
-}, St = {
-  small: `${ce.small} px-2.5 py-1.5 ${Q.small}`,
-  medium: `${ce.medium} px-3 py-1.5 ${Q.medium}`,
-  large: `${ce.large} px-4 py-2.5 ${Q.large}`
-}, Tt = {
-  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}`
-}, Et = {
+}, _t = {
+  small: `${ue.small} px-2.5 py-1.5 ${ee.small}`,
+  medium: `${ue.medium} px-3 py-1.5 ${ee.medium}`,
+  large: `${ue.large} px-4 py-2.5 ${ee.large}`
+}, Lt = {
+  small: `min-h-[var(--malachite-control-height-small,28px)] px-2.5 py-1.5 ${ee.small}`,
+  medium: `min-h-[var(--malachite-control-height-medium,32px)] px-3 py-1.5 ${ee.medium}`,
+  large: `min-h-[var(--malachite-control-height-large,42px)] px-4 py-2.5 ${ee.large}`
+}, kt = {
   small: "right-[26px] size-4",
   medium: "right-[30px] size-4",
   large: "right-[38px] size-4"
-}, Ct = {
+}, $t = {
   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"
-}, Nt = {
+}, Ot = {
   small: "rounded-[var(--malachite-radius-10,10px)]",
   medium: "rounded-xl",
   large: "rounded-[var(--malachite-radius-xxl,14px)]"
-}, He = () => !1, Rt = ({
+}, Ze = () => !1, Dt = ({
   wrap: e,
-  id: i,
+  id: a,
   children: r
-}) => e ? /* @__PURE__ */ t("span", { id: i, className: "min-w-0 flex items-center gap-2", children: r }) : /* @__PURE__ */ t(we, { children: r }), Lt = ({ row: e, children: i }) => e ? /* @__PURE__ */ t("span", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: i }) : /* @__PURE__ */ t(we, { children: i }), Be = je.forwardRef(
+}) => e ? /* @__PURE__ */ t("span", { id: a, className: "min-w-0 flex items-center gap-2", children: r }) : /* @__PURE__ */ t(Ne, { children: r }), At = ({ row: e, children: a }) => e ? /* @__PURE__ */ t("span", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: a }) : /* @__PURE__ */ t(Ne, { children: a }), Xe = Ue.forwardRef(
   ({
     isOpen: e,
-    onClick: i,
+    onClick: a,
     selectedItem: r,
-    disabled: m = !1,
-    error: c = !1,
-    tone: w,
-    placeholder: L,
-    search: x = !1,
-    showSubtitleInTrigger: S = !1,
-    searchQuery: k = "",
-    onSearchChange: E,
-    onFocusOpen: N,
-    onArrowDown: T,
-    size: v = "large",
-    hasClear: $ = !1,
-    onClear: a,
-    clearLabel: f,
-    controlId: s,
-    labelId: o,
-    describedBy: C,
-    required: l = !1,
-    ariaLabel: D,
-    ariaLabelledBy: de,
-    hasCallerId: Se = !1
-  }, _) => {
-    const Z = S && !x && !!(r != null && r.subtitle), I = Z ? Tt[v] : St[v], J = Nt[v], O = `${s}-value`, ue = `${s}-subtitle`, Te = !o && !D && !Se && Z, pe = de ?? (o && !D ? `${o} ${O}` : void 0) ?? (Te ? O : void 0), ee = (d) => {
-      d.key === "ArrowDown" && (d.preventDefault(), T == null || T());
-    }, K = g(null), te = g(null), B = dt({ disabled: m, error: c, tone: w, open: e }), R = !e && !!r, h = (r == null ? void 0 : r.triggerLabel) ?? (r == null ? void 0 : r.label), b = Z ? r == null ? void 0 : r.subtitle : void 0, z = () => le(K.current), [q, M] = j({ value: !1, subtitle: !0 }), fe = () => {
-      const d = z(), re = le(te.current);
-      return !d && !re ? !1 : (M({ value: d, subtitle: re }), !0);
+    disabled: g = !1,
+    error: d = !1,
+    tone: b,
+    placeholder: C,
+    search: m = !1,
+    showSubtitleInTrigger: y = !1,
+    searchQuery: _ = "",
+    onSearchChange: R,
+    onFocusOpen: w,
+    onArrowDown: S,
+    onTabAway: T,
+    size: L = "large",
+    hasClear: x = !1,
+    onClear: M,
+    clearLabel: F,
+    controlId: i,
+    labelId: l,
+    describedBy: o,
+    required: u = !1,
+    ariaLabel: k,
+    ariaLabelledBy: pe,
+    hasCallerId: $ = !1
+  }, fe) => {
+    const O = y && !m && !!(r != null && r.subtitle), te = O ? Lt[L] : _t[L], re = Ot[L], q = `${i}-value`, he = `${i}-subtitle`, ge = !l && !k && !$ && O, me = pe ?? (l && !k ? `${l} ${q}` : void 0) ?? (ge ? q : void 0), ne = (s) => {
+      if (s.key === "Tab") {
+        T == null || T();
+        return;
+      }
+      s.key === "ArrowDown" && (s.preventDefault(), S == null || S());
+    }, V = h(null), X = h(null), E = ht({ disabled: g, error: d, tone: b, open: e }), N = !e && !!r, P = (r == null ? void 0 : r.triggerLabel) ?? (r == null ? void 0 : r.label), p = O ? r == null ? void 0 : r.subtitle : void 0, W = () => ce(V.current), [D, xe] = z({ value: !1, subtitle: !0 }), Ce = () => {
+      const s = W(), Y = ce(X.current);
+      return !s && !Y ? !1 : (xe({ value: s, subtitle: Y }), !0);
     };
-    if (x && !m)
-      return /* @__PURE__ */ y(
+    if (m && !g)
+      return /* @__PURE__ */ v(
         "div",
         {
-          ref: _,
+          ref: fe,
           className: `
-                relative w-full ${I} ${J}
+                relative w-full ${te} ${re}
                 border border-solid
                 transition-all duration-200
-                flex items-center
+                flex items-center ${yt}
             `,
-          style: B,
-          [Fe]: "",
-          onClick: (d) => d.stopPropagation(),
+          style: E,
+          [Ie]: "",
+          onClick: (s) => s.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(ye, { text: h, shouldShow: z, isShrinkable: !0, fill: !0, children: /* @__PURE__ */ y("div", { className: "relative flex-1 flex items-center min-w-0", children: [
-              R && /* @__PURE__ */ t(
+            /* @__PURE__ */ t(Ee, { text: P, shouldShow: W, isShrinkable: !0, fill: !0, children: /* @__PURE__ */ v("div", { className: "relative flex-1 flex items-center min-w-0", children: [
+              N && /* @__PURE__ */ t(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -125,10 +132,10 @@ const Ke = /[*`[<&\\]/, se = ({ text: e }) => Ke.test(e) ? /* @__PURE__ */ t(
                   children: /* @__PURE__ */ t(
                     "span",
                     {
-                      ref: K,
+                      ref: V,
                       className: `min-w-0 block truncate text-[length:inherit]
                                         text-[var(--malachite-text-primary)]`,
-                      children: h
+                      children: P
                     }
                   )
                 }
@@ -136,39 +143,39 @@ const Ke = /[*`[<&\\]/, se = ({ text: e }) => Ke.test(e) ? /* @__PURE__ */ t(
               /* @__PURE__ */ t(
                 "input",
                 {
-                  id: s,
+                  id: i,
                   type: "text",
-                  "aria-label": D,
-                  "aria-labelledby": de,
-                  "aria-invalid": c || void 0,
-                  "aria-required": l || void 0,
-                  "aria-describedby": C,
-                  value: e ? k : (r == null ? void 0 : r.label) ?? "",
-                  onChange: (d) => {
-                    d.stopPropagation(), E == null || E(d.target.value), e || i();
+                  "aria-label": k,
+                  "aria-labelledby": pe,
+                  "aria-invalid": d || void 0,
+                  "aria-required": u || void 0,
+                  "aria-describedby": o,
+                  value: e ? _ : (r == null ? void 0 : r.label) ?? "",
+                  onChange: (s) => {
+                    s.stopPropagation(), R == null || R(s.target.value), e || a();
                   },
                   onFocus: () => {
-                    N == null || N();
+                    w == null || w();
                   },
-                  onKeyDown: ee,
-                  placeholder: L ?? "Select Field",
+                  onKeyDown: ne,
+                  placeholder: C ?? "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)] ${N ? "text-transparent" : "text-[var(--malachite-text-primary)]"}`
                 }
               )
             ] }) }),
-            $ && /* @__PURE__ */ t(
+            x && /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
-                "aria-label": f,
-                onClick: a,
+                "aria-label": F,
+                onClick: M,
                 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__ */ t(Ze, { size: 13 })
+                children: /* @__PURE__ */ t(Be, { size: 13 })
               }
             ),
             /* @__PURE__ */ t("div", { className: "flex items-center justify-center pl-2", children: /* @__PURE__ */ t(
@@ -177,12 +184,12 @@ const Ke = /[*`[<&\\]/, se = ({ text: e }) => Ke.test(e) ? /* @__PURE__ */ t(
                 type: "button",
                 tabIndex: -1,
                 "aria-label": e ? "Close options" : "Open options",
-                onClick: (d) => {
-                  d.stopPropagation(), i();
+                onClick: (s) => {
+                  s.stopPropagation(), a();
                 },
                 className: "flex items-center justify-center cursor-pointer bg-transparent border-none p-0",
                 children: /* @__PURE__ */ t(
-                  Me,
+                  Ge,
                   {
                     size: 13,
                     style: {
@@ -197,80 +204,80 @@ const Ke = /[*`[<&\\]/, se = ({ text: e }) => Ke.test(e) ? /* @__PURE__ */ t(
           ]
         }
       );
-    const he = /* @__PURE__ */ y(
+    const ie = /* @__PURE__ */ v(
       "button",
       {
-        ref: _,
-        id: s,
+        ref: fe,
+        id: i,
         type: "button",
-        "aria-label": D,
-        "aria-labelledby": pe,
-        "aria-invalid": c || void 0,
-        "aria-required": l || void 0,
-        "aria-describedby": [C, b ? ue : void 0].filter(Boolean).join(" ") || void 0,
-        onClick: (d) => {
-          d.stopPropagation(), i();
+        "aria-label": k,
+        "aria-labelledby": me,
+        "aria-invalid": d || void 0,
+        "aria-required": u || void 0,
+        "aria-describedby": [o, p ? he : void 0].filter(Boolean).join(" ") || void 0,
+        onClick: (s) => {
+          s.stopPropagation(), a(s.detail === 0);
         },
-        onKeyDown: ee,
-        disabled: m,
-        style: B,
-        [Fe]: "",
+        onKeyDown: ne,
+        disabled: g,
+        style: E,
+        [Ie]: "",
         className: `
-                relative w-full ${I} ${J}
+                relative w-full ${te} ${re}
                 border border-solid
                 transition-all duration-200
-                flex ${Z ? "items-start" : "items-center"} gap-3
+                flex ${O ? "items-start" : "items-center"} gap-3
                 cursor-pointer
-                disabled:cursor-not-allowed
+                disabled:cursor-not-allowed ${wt}
             `,
         children: [
           /* @__PURE__ */ t(
             "span",
             {
-              id: b ? void 0 : O,
-              className: `text-left flex-1 min-w-0 flex ${b ? "flex-col gap-1" : "items-center gap-2"}`,
-              children: r ? /* @__PURE__ */ y(we, { children: [
-                /* @__PURE__ */ y(Rt, { wrap: !!b, id: O, children: [
+              id: p ? void 0 : q,
+              className: `text-left flex-1 min-w-0 flex ${p ? "flex-col gap-1" : "items-center gap-2"}`,
+              children: r ? /* @__PURE__ */ v(Ne, { children: [
+                /* @__PURE__ */ v(Dt, { wrap: !!p, id: q, children: [
                   r.icon && /* @__PURE__ */ t("span", { className: "flex items-center justify-center shrink-0", children: r.icon }),
                   /* @__PURE__ */ t(
-                    ye,
+                    Ee,
                     {
-                      text: h,
-                      shouldShow: b ? He : z,
-                      triggerAs: b ? "span" : "div",
+                      text: P,
+                      shouldShow: p ? Ze : W,
+                      triggerAs: p ? "span" : "div",
                       isShrinkable: !0,
                       children: /* @__PURE__ */ t(
                         "span",
                         {
-                          ref: K,
-                          className: `min-w-0 block truncate text-[length:inherit] ${m ? "text-[var(--malachite-text-placeholder)]" : "text-[var(--malachite-text-primary)]"}`,
-                          children: h
+                          ref: V,
+                          className: `min-w-0 block truncate text-[length:inherit] ${g ? "text-[var(--malachite-text-placeholder)]" : "text-[var(--malachite-text-primary)]"}`,
+                          children: P
                         }
                       )
                     }
                   )
                 ] }),
-                b && /* @__PURE__ */ t(
+                p && /* @__PURE__ */ t(
                   "span",
                   {
-                    id: ue,
-                    ref: te,
+                    id: he,
+                    ref: X,
                     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__ */ t(se, { text: b })
+                    children: /* @__PURE__ */ t(de, { text: p })
                   }
                 )
               ] }) : /* @__PURE__ */ t(
                 "span",
                 {
-                  className: `flex-1 min-w-0 truncate text-[length:inherit] ${m ? "text-[var(--malachite-text-placeholder)]" : "text-[var(--malachite-text-dimmed)]"}`,
-                  children: L ?? "Select Field"
+                  className: `flex-1 min-w-0 truncate text-[length:inherit] ${g ? "text-[var(--malachite-text-placeholder)]" : "text-[var(--malachite-text-dimmed)]"}`,
+                  children: C ?? "Select Field"
                 }
               )
             }
           ),
-          $ && /* @__PURE__ */ t("span", { "aria-hidden": "true", className: "shrink-0 w-4" }),
+          x && /* @__PURE__ */ t("span", { "aria-hidden": "true", className: "shrink-0 w-4" }),
           /* @__PURE__ */ t("span", { className: "flex items-center justify-center shrink-0", children: /* @__PURE__ */ t(
-            Me,
+            Ge,
             {
               size: 13,
               style: {
@@ -283,35 +290,36 @@ const Ke = /[*`[<&\\]/, se = ({ text: e }) => Ke.test(e) ? /* @__PURE__ */ t(
         ]
       }
     );
-    return S && !x ? /* @__PURE__ */ t(
-      ye,
+    return y && !m ? /* @__PURE__ */ t(
+      Ee,
       {
-        text: Ie([
-          ["value", q.value && h],
+        text: qe([
+          ["value", D.value && P],
           [
             "subtitle",
-            q.subtitle && b && /* @__PURE__ */ t(se, { text: b })
+            D.subtitle && p && /* @__PURE__ */ t(de, { text: p })
           ]
         ]),
-        shouldShow: b ? fe : He,
+        shouldShow: p ? Ce : Ze,
         fill: !0,
         describesTrigger: !1,
-        children: he
+        children: ie
       }
-    ) : he;
+    ) : ie;
   }
 );
-Be.displayName = "DropdownTrigger";
-const _t = ({
+Xe.displayName = "DropdownTrigger";
+const zt = ({
   item: e,
-  selected: i,
-  subtitleLayout: r,
-  onItemSelected: m
+  selected: a,
+  showTooltipOnFocus: r,
+  subtitleLayout: g,
+  onItemSelected: d
 }) => {
-  const c = i ? "var(--malachite-accent-foreground, rgb(2, 122, 66))" : "var(--malachite-text-primary, rgb(10, 10, 10))", w = r === "stacked" && !!e.subtitle, L = `mal-${tt().replace(/[^a-zA-Z0-9_-]/g, "")}`, x = `${L}-label`, S = `${L}-subtitle`, k = g(null), E = g(null), N = g(null), [T, v] = j({ label: !0, subtitle: !0, rightSide: !0 }), $ = () => {
-    const o = le(k.current), C = le(E.current), l = le(N.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 = (
+  const b = a ? "var(--malachite-accent-foreground, rgb(2, 122, 66))" : "var(--malachite-text-primary, rgb(10, 10, 10))", C = g === "stacked" && !!e.subtitle, m = `mal-${at().replace(/[^a-zA-Z0-9_-]/g, "")}`, y = `${m}-label`, _ = `${m}-subtitle`, R = h(null), w = h(null), S = h(null), [T, L] = z({ label: !0, subtitle: !0, rightSide: !0 }), x = () => {
+    const l = ce(R.current), o = ce(w.current), u = ce(S.current);
+    return !l && !o && !u ? !1 : (L({ label: l, subtitle: o, rightSide: u }), !0);
+  }, M = 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", i = (
     // `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}
@@ -322,13 +330,13 @@ const _t = ({
       {
         type: "button",
         "data-dropdown-option": "",
-        "data-selected": i,
-        "aria-current": i || void 0,
-        "aria-labelledby": e.subtitle ? x : void 0,
-        "aria-describedby": e.subtitle ? S : void 0,
+        "data-selected": a,
+        "aria-current": a || void 0,
+        "aria-labelledby": e.subtitle ? y : void 0,
+        "aria-describedby": e.subtitle ? _ : void 0,
         tabIndex: -1,
-        onClick: (o) => {
-          o.stopPropagation(), m(e);
+        onClick: (l) => {
+          l.stopPropagation(), d(e);
         },
         className: "malachite-dropdown-option",
         style: {
@@ -347,7 +355,7 @@ const _t = ({
           font: "inherit",
           color: "inherit"
         },
-        children: /* @__PURE__ */ y(
+        children: /* @__PURE__ */ v(
           "span",
           {
             style: {
@@ -358,12 +366,12 @@ const _t = ({
               minWidth: 0
             },
             children: [
-              /* @__PURE__ */ t("span", { style: { flex: "1 1 auto", display: "block", minWidth: 0 }, children: /* @__PURE__ */ y(
+              /* @__PURE__ */ t("span", { style: { flex: "1 1 auto", display: "block", minWidth: 0 }, children: /* @__PURE__ */ v(
                 "span",
                 {
-                  style: w ? { display: "flex", flexDirection: "column", gap: 2 } : { display: "flex", alignItems: "center", gap: 8 },
+                  style: C ? { display: "flex", flexDirection: "column", gap: 2 } : { display: "flex", alignItems: "center", gap: 8 },
                   children: [
-                    /* @__PURE__ */ y(Lt, { row: w && !!e.icon, children: [
+                    /* @__PURE__ */ v(At, { row: C && !!e.icon, children: [
                       e.icon && /* @__PURE__ */ t(
                         "span",
                         {
@@ -379,11 +387,11 @@ const _t = ({
                       /* @__PURE__ */ t(
                         "span",
                         {
-                          id: e.subtitle ? x : void 0,
-                          ref: k,
+                          id: e.subtitle ? y : void 0,
+                          ref: R,
                           style: {
                             fontWeight: 400,
-                            color: c,
+                            color: b,
                             whiteSpace: "nowrap",
                             overflow: "hidden",
                             textOverflow: "ellipsis",
@@ -393,23 +401,23 @@ const _t = ({
                         }
                       )
                     ] }),
-                    e.subtitle && (w ? /* @__PURE__ */ t(
+                    e.subtitle && (C ? /* @__PURE__ */ t(
                       "span",
                       {
-                        id: S,
-                        ref: E,
+                        id: _,
+                        ref: w,
                         style: {
-                          fontSize: Re,
+                          fontSize: $e,
                           fontWeight: 400,
                           lineHeight: 1.4,
-                          color: i ? c : "var(--malachite-text-dimmed, rgb(161, 161, 161))",
+                          color: a ? b : "var(--malachite-text-dimmed, rgb(161, 161, 161))",
                           whiteSpace: "nowrap",
                           overflow: "hidden",
                           textOverflow: "ellipsis"
                         },
-                        children: /* @__PURE__ */ t(se, { text: e.subtitle })
+                        children: /* @__PURE__ */ t(de, { text: e.subtitle })
                       }
-                    ) : /* @__PURE__ */ y(
+                    ) : /* @__PURE__ */ v(
                       "span",
                       {
                         style: {
@@ -427,7 +435,7 @@ const _t = ({
                             "span",
                             {
                               style: {
-                                fontSize: Re,
+                                fontSize: $e,
                                 fontWeight: 400,
                                 color: "var(--malachite-text-secondary, rgb(123, 123, 123))",
                                 flexShrink: 0
@@ -438,10 +446,10 @@ const _t = ({
                           /* @__PURE__ */ t(
                             "span",
                             {
-                              id: S,
-                              ref: E,
+                              id: _,
+                              ref: w,
                               style: {
-                                fontSize: Re,
+                                fontSize: $e,
                                 fontWeight: 400,
                                 color: "var(--malachite-text-secondary, rgb(123, 123, 123))",
                                 whiteSpace: "nowrap",
@@ -449,7 +457,7 @@ const _t = ({
                                 textOverflow: "ellipsis",
                                 minWidth: 0
                               },
-                              children: /* @__PURE__ */ t(se, { text: e.subtitle })
+                              children: /* @__PURE__ */ t(de, { text: e.subtitle })
                             }
                           )
                         ]
@@ -467,16 +475,16 @@ const _t = ({
                     minWidth: e.rightSideText ? "var(--malachite-text-right-side-text-min-width, 80px)" : 0,
                     flexShrink: 1,
                     display: "flex",
-                    justifyContent: f
+                    justifyContent: F
                   },
                   children: e.rightSideText && /* @__PURE__ */ t(
                     "span",
                     {
-                      ref: N,
+                      ref: S,
                       style: {
                         fontSize: "var(--malachite-text-right-side-text-font-size, 12px)",
                         fontWeight: 400,
-                        color: a,
+                        color: M,
                         whiteSpace: "nowrap",
                         overflow: "hidden",
                         textOverflow: "ellipsis",
@@ -494,102 +502,103 @@ const _t = ({
     )
   );
   return /* @__PURE__ */ t(
-    ye,
+    Ee,
     {
-      text: Ie([
+      text: qe([
         ["label", T.label && e.label],
         [
           "subtitle",
-          T.subtitle && e.subtitle && /* @__PURE__ */ t(se, { text: e.subtitle })
+          T.subtitle && e.subtitle && /* @__PURE__ */ t(de, { text: e.subtitle })
         ],
         ["rightSide", T.rightSide && e.rightSideText]
       ]),
-      shouldShow: $,
+      shouldShow: x,
+      showOnFocus: r,
       isShrinkable: !0,
       describesTrigger: !1,
-      children: s
+      children: i
     }
   );
-}, qe = je.forwardRef((e, i) => {
+}, Ye = Ue.forwardRef((e, a) => {
   const {
     items: r,
-    onItemSelected: m,
-    selectedItem: c,
-    menuLoading: w,
-    emptyMessage: L,
-    autoFocus: x,
-    positioned: S,
-    onDismiss: k,
-    subtitleLayout: E,
-    size: N,
-    style: T
-  } = e, v = g(null);
-  et(() => {
-    mt();
-  }, []), vt(v, !0), Le(() => {
-    var s;
-    if (!x || !S)
-      return;
-    const a = _e(v.current);
-    (s = a.find((o) => o.dataset.selected === "true") ?? a[0] ?? v.current) == null || s.focus();
-  }, [x, S]);
-  const $ = (a) => {
-    var C;
-    if (a.key === "Tab") {
-      k();
-      return;
-    }
-    const f = _e(v.current);
-    if (f.length === 0)
+    onItemSelected: g,
+    selectedItem: d,
+    menuLoading: b,
+    emptyMessage: C,
+    autoFocus: m,
+    positioned: y,
+    onDismiss: _,
+    keyboardNavigation: R,
+    onKeyboardNavigation: w,
+    subtitleLayout: S,
+    size: T,
+    style: L
+  } = e, x = h(null), M = Tt("dropdown", !0, x);
+  return it(() => {
+    St();
+  }, []), Et(x, !0), Oe(() => {
+    var o;
+    if (!m || !y)
       return;
-    const s = f.indexOf(document.activeElement), o = {
-      ArrowDown: s + 1,
-      ArrowUp: s - 1,
-      Home: 0,
-      End: f.length - 1
-    }[a.key];
-    o !== void 0 && (a.preventDefault(), (C = f[Math.min(Math.max(o, 0), f.length - 1)]) == null || C.focus());
-  };
-  return /* @__PURE__ */ t(
+    const i = De(x.current);
+    (o = i.find((u) => u.dataset.selected === "true") ?? i[0] ?? x.current) == null || o.focus();
+  }, [m, y]), /* @__PURE__ */ t(
     "div",
     {
-      ref: (a) => {
-        v.current = a, typeof i == "function" ? i(a) : i && (i.current = a);
+      ref: (i) => {
+        x.current = i, typeof a == "function" ? a(i) : a && (a.current = i);
       },
-      ...xt("dropdown"),
+      ...M,
       tabIndex: -1,
-      onKeyDown: $,
+      onKeyDown: (i) => {
+        var k;
+        if (i.key === "Tab") {
+          _();
+          return;
+        }
+        const l = De(x.current);
+        if (l.length === 0)
+          return;
+        const o = l.indexOf(document.activeElement), u = {
+          ArrowDown: o + 1,
+          ArrowUp: o - 1,
+          Home: 0,
+          End: l.length - 1
+        }[i.key];
+        u !== void 0 && (i.preventDefault(), w(), (k = l[Math.min(Math.max(u, 0), l.length - 1)]) == null || k.focus());
+      },
       style: {
-        background: oe.standard.background,
-        border: oe.standard.border,
-        borderRadius: oe.standard.radius,
-        boxShadow: oe.standard.shadow,
-        maxHeight: gt,
+        background: se.standard.background,
+        border: se.standard.border,
+        borderRadius: se.standard.radius,
+        boxShadow: se.standard.shadow,
+        maxHeight: bt,
         overflow: "hidden",
         display: "flex",
         flexDirection: "column",
-        fontSize: ct[N],
-        ...T
+        fontSize: ft[T],
+        ...L
       },
-      children: w ? /* @__PURE__ */ y("div", { style: Ge, children: [
-        /* @__PURE__ */ t(ot, { size: "xxxsmall" }),
+      children: b ? /* @__PURE__ */ v("div", { style: Ke, children: [
+        /* @__PURE__ */ t(dt, { size: "xxxsmall" }),
         /* @__PURE__ */ t("span", { children: "Loading…" })
-      ] }) : r.length === 0 ? /* @__PURE__ */ t("div", { style: Ge, children: L }) : /* @__PURE__ */ t(
+      ] }) : r.length === 0 ? /* @__PURE__ */ t("div", { style: Ke, children: C }) : /* @__PURE__ */ t(
         "div",
         {
           style: {
             display: "flex",
             flexDirection: "column",
             gap: 4,
-            padding: oe.standard.padding,
+            padding: se.standard.padding,
             overflowY: "auto",
             scrollbarWidth: "thin",
             scrollbarColor: "var(--malachite-text-placeholder, rgb(187, 187, 187)) transparent"
           },
-          children: r.map((a, f) => {
-            const s = r[f - 1], o = !!a.group && (!s || s.group !== a.group);
-            return /* @__PURE__ */ y("div", { style: { flexShrink: 0 }, children: [
-              o && /* @__PURE__ */ t(
+          children: r.map((i, l) => {
+            const o = r[l - 1], u = !!i.group && (!o || o.group !== i.group);
+            return /* @__PURE__ */ v("div", { style: { flexShrink: 0 }, children: [
+              u && /* @__PURE__ */ t(
                 "div",
                 {
                   style: {
@@ -600,273 +609,287 @@ const _t = ({
                     textTransform: "none",
                     userSelect: "none"
                   },
-                  children: a.group
+                  children: i.group
                 }
               ),
               /* @__PURE__ */ t(
-                _t,
+                zt,
                 {
-                  item: a,
-                  onItemSelected: m,
-                  subtitleLayout: E,
-                  selected: a.id === (c == null ? void 0 : c.id) || !1
+                  item: i,
+                  onItemSelected: g,
+                  subtitleLayout: S,
+                  selected: i.id === (d == null ? void 0 : d.id) || !1,
+                  showTooltipOnFocus: R
                 }
               )
-            ] }, a.id);
+            ] }, i.id);
           })
         }
       )
     }
   );
 });
-qe.displayName = "DropdownPanel";
-const Yt = ({
+Ye.displayName = "DropdownPanel";
+const ar = ({
   items: e,
-  onItemSelected: i,
+  onItemSelected: a,
   defaultValue: r,
-  value: m,
-  disabled: c = !1,
-  error: w,
-  tone: L,
-  label: x,
-  hint: S,
-  rightSideContent: k,
-  tooltip: E,
-  name: N,
-  required: T = !1,
-  requiredIndicator: v,
-  loading: $,
-  menuLoading: a,
-  formControl: f,
-  description: s,
-  helperText: o,
-  placeholder: C,
-  search: l = !1,
-  showSubtitleInTrigger: D = !1,
-  subtitleLayout: de = "inline",
-  clearable: Se = !1,
-  size: _ = "large",
-  fullWidth: Z = !1,
-  width: I,
-  minWidth: J,
-  id: O,
-  "aria-label": ue,
-  "aria-labelledby": Te
+  value: g,
+  disabled: d = !1,
+  error: b,
+  tone: C,
+  label: m,
+  hint: y,
+  rightSideContent: _,
+  tooltip: R,
+  name: w,
+  required: S = !1,
+  requiredIndicator: T,
+  loading: L,
+  menuLoading: x,
+  formControl: M,
+  description: F,
+  helperText: i,
+  placeholder: l,
+  search: o = !1,
+  showSubtitleInTrigger: u = !1,
+  subtitleLayout: k = "inline",
+  clearable: pe = !1,
+  size: $ = "large",
+  fullWidth: fe = !1,
+  width: O,
+  minWidth: te,
+  id: re,
+  "aria-label": q,
+  "aria-labelledby": he
 }) => {
-  const { controlId: pe, labelId: ee, descriptionId: K, hintId: te, helperTextId: B } = it({
-    id: O,
-    label: x,
-    description: s,
-    hint: S,
+  const { controlId: ge, labelId: me, descriptionId: ne, hintId: V, helperTextId: X } = st({
+    id: re,
+    label: m,
+    description: F,
+    hint: y,
     helperText: !0
-  }), [R, h] = j(!1), [b, z] = j(r), q = m ?? b, M = e.find((n) => n.id === q), fe = Se && q !== void 0 && q !== "" && !c, he = D && !l && !!(M != null && M.subtitle), d = `Clear ${x ?? C ?? "selection"}`, re = g(r);
-  Le(() => {
-    re.current !== r && (re.current = r, z(r));
+  }), [E, N] = z(!1), [P, p] = z(r), W = g ?? P, D = e.find((n) => n.id === W), xe = pe && W !== void 0 && W !== "" && !d, Ce = u && !o && !!(D != null && D.subtitle), ie = `Clear ${m ?? l ?? "selection"}`, s = h(r);
+  Oe(() => {
+    s.current !== r && (s.current = r, p(r));
   }, [r]);
-  const [Ee, V] = j(""), [Ve, ke] = j(!1), $e = g(null), ge = g(null), X = g(null), [u, Ae] = j(null), me = g(!0), U = Ne(() => {
-    var p;
-    const n = ge.current;
-    n && ((p = n instanceof HTMLButtonElement ? n : n.querySelector("input")) == null || p.focus());
-  }, []), De = Ne(
+  const [Y, Q] = z(""), [Qe, Ae] = z(!1), [Je, Re] = z(!1), _e = h(null), ve = h(null), G = h(null), [f, ze] = z(null), be = h(!0), H = ke(() => {
+    const n = ve.current, c = n instanceof HTMLButtonElement ? n : (n == null ? void 0 : n.querySelector("input")) ?? null;
+    if (!(!c || c === Te())) {
+      if (!o) {
+        c.focus();
+        return;
+      }
+      be.current = !1, c.focus(), Te() !== c && (be.current = !0);
+    }
+  }, [o]), Me = ke(
     (n) => {
-      var p;
-      n.stopPropagation(), z(void 0), (p = P.current) == null || p.call(P, Ce.current), i == null || i(void 0), l && (me.current = !1), U();
+      var c;
+      n.stopPropagation(), p(void 0), (c = I.current) == null || c.call(I, Le.current), a == null || a(void 0), H();
     },
-    [i, l, U]
-  ), W = Ne(() => {
-    const n = ge.current;
-    n && Ae(
-      pt(X.current, {
+    [a, H]
+  ), j = ke(() => {
+    const n = ve.current;
+    n && ze(
+      mt(G.current, {
         triggerRect: n.getBoundingClientRect(),
         preset: "standard",
-        minWidth: J,
+        minWidth: te,
         viewportWidth: window.innerWidth,
         viewportHeight: window.innerHeight
       })
     );
-  }, [J]);
-  Le(() => {
-    if (!R) {
-      Ae(null), ke(!1);
+  }, [te]);
+  Oe(() => {
+    if (!E) {
+      ze(null), Ae(!1);
       return;
     }
-    W();
-    const n = (G) => {
-      var ae;
-      const A = G.composedPath(), H = $e.current, ie = X.current, be = !!H && A.includes(H), Oe = !!ie && A.includes(ie);
-      !be && !Oe && (h(!1), l && V(""), (ae = F.current) == null || ae.call(F));
-    }, p = ut(() => {
-      h(!1), l && V(""), U();
-    }), Y = () => W();
-    let ne = 0, xe = "";
-    const ve = () => {
-      const G = ge.current;
-      if (G) {
-        const A = G.getBoundingClientRect();
-        if (ft(A, window.innerWidth, window.innerHeight)) {
-          h(!1), l && V("");
+    j();
+    const n = (Z) => {
+      var oe, le, We;
+      const A = Z.composedPath(), U = _e.current, B = G.current, Se = !!U && A.includes(U), Pe = !!B && A.includes(B);
+      !Se && !Pe && (N(!1), o && Q(""), (oe = G.current) != null && oe.contains(Te()) && H(), (le = _e.current) != null && le.contains(Te()) || (We = K.current) == null || We.call(K));
+    }, c = gt(() => {
+      N(!1), o && Q(""), H();
+    }), J = () => j();
+    let ae = 0, ye = "";
+    const we = () => {
+      const Z = ve.current;
+      if (Z) {
+        const A = Z.getBoundingClientRect();
+        if (xt(A, window.innerWidth, window.innerHeight)) {
+          N(!1), o && Q("");
           return;
         }
-        const H = ht(A);
-        H !== xe && (xe = H, W());
+        const U = vt(A);
+        U !== ye && (ye = U, j());
       }
-      ne = requestAnimationFrame(ve);
+      ae = requestAnimationFrame(we);
     };
-    return ne = requestAnimationFrame(ve), document.addEventListener("mousedown", n), window.addEventListener("scroll", Y, !0), window.addEventListener("resize", Y), () => {
-      cancelAnimationFrame(ne), document.removeEventListener("mousedown", n), p(), window.removeEventListener("scroll", Y, !0), window.removeEventListener("resize", Y);
+    return ae = requestAnimationFrame(we), document.addEventListener("mousedown", n), window.addEventListener("scroll", J, !0), window.addEventListener("resize", J), () => {
+      cancelAnimationFrame(ae), document.removeEventListener("mousedown", n), c(), window.removeEventListener("scroll", J, !0), window.removeEventListener("resize", J);
     };
-  }, [R, l, W, U]), Je(() => {
-    if (!R)
+  }, [E, o, j, H]), nt(() => {
+    if (!E)
       return;
-    W();
-    const n = X.current;
+    j();
+    const n = G.current;
     if (!n || typeof ResizeObserver > "u")
       return;
-    const p = new ResizeObserver(() => W());
-    return p.observe(n), () => p.disconnect();
-  }, [R, W]);
-  const P = g(void 0), F = g(void 0), Ce = g(""), Xe = (n) => {
-    var p;
-    z(n == null ? void 0 : n.id), (p = P.current) == null || p.call(P, (n == null ? void 0 : n.id) ?? Ce.current), h(!1), l && (V(""), me.current = !1), i == null || i(n == null ? void 0 : n.id), U();
-  }, Ue = () => {
-    h(!1), l && V(""), U();
-  }, Ye = () => {
-    const n = _e(X.current)[0];
+    const c = new ResizeObserver(() => j());
+    return c.observe(n), () => c.disconnect();
+  }, [E, j]);
+  const I = h(void 0), K = h(void 0), Le = h(""), et = (n) => {
+    var c;
+    p(n == null ? void 0 : n.id), (c = I.current) == null || c.call(I, (n == null ? void 0 : n.id) ?? Le.current), N(!1), o && Q(""), a == null || a(n == null ? void 0 : n.id), H();
+  }, Fe = () => {
+    N(!1), o && Q(""), H();
+  }, tt = () => {
+    Re(!0);
+    const n = De(G.current)[0];
     if (n) {
       n.focus();
       return;
     }
-    ke(!0), h(!0);
-  }, Qe = l && Ee ? e.filter((n) => wt(n, Ee)) : e;
+    Ae(!0), N(!0);
+  }, rt = o && Y ? e.filter((n) => Rt(n, Y)) : e;
   return /* @__PURE__ */ t(
-    nt,
+    lt,
     {
-      fullWidth: Z,
-      label: x,
-      hint: S,
-      rightSideContent: k,
-      tooltip: E,
-      name: N,
-      required: T,
-      requiredIndicator: v,
-      loading: $,
-      formControl: f,
-      description: s,
-      controlId: pe,
-      labelId: ee,
-      descriptionId: K,
-      hintId: te,
-      loadingComponent: I === void 0 ? /* @__PURE__ */ t(
-        We,
+      fullWidth: fe,
+      label: m,
+      hint: y,
+      rightSideContent: _,
+      tooltip: R,
+      name: w,
+      required: S,
+      requiredIndicator: T,
+      loading: L,
+      formControl: M,
+      description: F,
+      controlId: ge,
+      labelId: me,
+      descriptionId: ne,
+      hintId: V,
+      loadingComponent: O === void 0 ? /* @__PURE__ */ t(
+        He,
         {
-          heightClass: ce[_],
-          helperText: !!o,
+          heightClass: ue[$],
+          helperText: !!i,
           helperTextMarginTop: !0
         }
-      ) : /* @__PURE__ */ t("div", { style: Pe(I), children: /* @__PURE__ */ t(
-        We,
+      ) : /* @__PURE__ */ t("div", { style: je(O), children: /* @__PURE__ */ t(
+        He,
         {
-          heightClass: ce[_],
-          helperText: !!o,
+          heightClass: ue[$],
+          helperText: !!i,
           helperTextMarginTop: !0
         }
       ) }),
-      children: ({ error: n, message: p, onFieldChange: Y, onFieldBlur: ne, emptyValue: xe }) => {
-        P.current = Y, F.current = ne, Ce.current = xe;
-        const ve = w ?? n, G = w === !1 ? void 0 : p, A = `${B}-error`, H = [
-          K,
-          te,
-          o ? B : void 0,
-          G ? A : void 0
+      children: ({ error: n, message: c, onFieldChange: J, onFieldBlur: ae, emptyValue: ye }) => {
+        I.current = J, K.current = ae, Le.current = ye;
+        const we = b ?? n, Z = b === !1 ? void 0 : c, A = `${X}-error`, U = [
+          ne,
+          V,
+          i ? X : void 0,
+          Z ? A : void 0
         ].filter(Boolean).join(" ") || void 0;
-        return /* @__PURE__ */ y(we, { children: [
-          /* @__PURE__ */ y(
+        return /* @__PURE__ */ v(Ne, { children: [
+          /* @__PURE__ */ v(
             "div",
             {
-              ref: $e,
+              ref: _e,
               className: "relative w-full",
-              style: Pe(I),
-              onBlur: (ie) => {
-                var ae, ze;
-                const be = ie.relatedTarget;
-                ie.currentTarget.contains(be) || ((ae = X.current) == null ? void 0 : ae.contains(be)) === !0 || (ze = F.current) == null || ze.call(F);
+              style: je(O),
+              onBlur: (B) => {
+                var oe, le;
+                const Se = B.relatedTarget;
+                B.currentTarget.contains(Se) || ((oe = G.current) == null ? void 0 : oe.contains(Se)) === !0 || (le = K.current) == null || le.call(K);
               },
               children: [
-                fe && !l && /* @__PURE__ */ t(
+                xe && !o && /* @__PURE__ */ t(
                   "button",
                   {
                     type: "button",
-                    onClick: De,
-                    "aria-label": d,
-                    className: `absolute ${he ? Ct[_] : "top-1/2 -translate-y-1/2"} z-10 flex items-center
+                    onClick: Me,
+                    "aria-label": ie,
+                    className: `absolute ${Ce ? $t[$] : "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 ${Et[_]}`,
-                    children: /* @__PURE__ */ t(Ze, { size: 13 })
+                            focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:outline-offset-2 ${kt[$]}`,
+                    children: /* @__PURE__ */ t(Be, { size: 13 })
                   }
                 ),
                 /* @__PURE__ */ t(
-                  Be,
+                  Xe,
                   {
-                    hasClear: fe,
-                    onClear: De,
-                    clearLabel: d,
-                    ref: ge,
-                    isOpen: R,
-                    onClick: () => !c && h(!R),
-                    selectedItem: M,
-                    disabled: c,
-                    error: ve,
-                    tone: L,
-                    placeholder: C,
-                    search: l,
-                    showSubtitleInTrigger: D,
-                    searchQuery: Ee,
-                    onSearchChange: V,
+                    hasClear: xe,
+                    onClear: Me,
+                    clearLabel: ie,
+                    ref: ve,
+                    isOpen: E,
+                    onClick: (B) => {
+                      d || (Re(!!B), N(!E));
+                    },
+                    selectedItem: D,
+                    disabled: d,
+                    error: we,
+                    tone: C,
+                    placeholder: l,
+                    search: o,
+                    showSubtitleInTrigger: u,
+                    searchQuery: Y,
+                    onSearchChange: Q,
                     onFocusOpen: () => {
-                      if (!me.current) {
-                        me.current = !0;
+                      if (!be.current) {
+                        be.current = !0;
                         return;
                       }
-                      h(!0);
+                      N(!0);
                     },
                     onArrowDown: () => {
-                      c || Ye();
+                      d || tt();
+                    },
+                    onTabAway: () => {
+                      E && Fe();
                     },
-                    size: _,
-                    controlId: pe,
-                    hasCallerId: !!O,
-                    labelId: ee,
-                    describedBy: H,
-                    required: T,
-                    ariaLabel: ue,
-                    ariaLabelledBy: Te
+                    size: $,
+                    controlId: ge,
+                    hasCallerId: !!re,
+                    labelId: me,
+                    describedBy: U,
+                    required: S,
+                    ariaLabel: q,
+                    ariaLabelledBy: he
                   }
                 ),
-                R && rt(
+                E && ot(
                   /* @__PURE__ */ t(
-                    qe,
+                    Ye,
                     {
-                      ref: X,
+                      ref: G,
                       style: {
                         position: "fixed",
-                        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
+                        top: (f == null ? void 0 : f.top) ?? 0,
+                        left: (f == null ? void 0 : f.left) ?? 0,
+                        width: f == null ? void 0 : f.width,
+                        maxHeight: f == null ? void 0 : f.maxHeight,
+                        visibility: f ? "visible" : "hidden",
+                        opacity: f ? 1 : 0
                       },
-                      items: Qe,
-                      onItemSelected: Xe,
-                      selectedItem: M,
-                      menuLoading: a,
+                      items: rt,
+                      onItemSelected: et,
+                      selectedItem: D,
+                      menuLoading: x,
                       emptyMessage: e.length === 0 ? "No options available" : "No results found",
-                      subtitleLayout: de,
-                      size: _,
-                      autoFocus: !l || Ve,
-                      positioned: u !== null,
-                      onDismiss: Ue
+                      subtitleLayout: k,
+                      size: $,
+                      autoFocus: !o || Qe,
+                      positioned: f !== null,
+                      onDismiss: Fe,
+                      keyboardNavigation: Je,
+                      onKeyboardNavigation: () => Re(!0)
                     }
                   ),
                   document.body
@@ -874,21 +897,21 @@ const Yt = ({
               ]
             }
           ),
-          o && /* @__PURE__ */ t(
+          i && /* @__PURE__ */ t(
             "div",
             {
-              id: B,
+              id: X,
               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__ */ t(at, { id: A, message: G, spaced: !0 })
+          /* @__PURE__ */ t(ct, { id: A, message: Z, spaced: !0 })
         ] });
       }
     }
   );
 };
 export {
-  Yt as Dropdown
+  ar as Dropdown
 };
 //# sourceMappingURL=Dropdown.js.map