@stackone/malachite 2.23.3 → 2.24.0

package/dist/components/Dropdown.js

@@ -1,122 +1,123 @@
-import { jsx as e, jsxs as m, Fragment as rt } from "react/jsx-runtime";
-import jt, { useState as B, useRef as g, useEffect as Et, useCallback as St, useLayoutEffect as Pt, useInsertionEffect as Bt, useId as Xt } from "react";
-import { createPortal as Yt } from "react-dom";
-import Qt, { useFormFieldIds as Ut } from "./BaseFormComponent.js";
-import Wt from "./CustomIcons/CaretDownIcon.js";
-import Ht from "./CustomIcons/CloseIcon.js";
-import { FieldMessage as Jt } from "./FieldMessage.js";
-import te from "./LoadingInput.js";
-import ee from "./Spinner.js";
-import xt from "./Tooltip.js";
-import { CONTROL_TEXT_SIZE_CLASS as X, CONTROL_TEXT_SIZE as re } from "./controlTextSize.js";
-import { computePanelGeometry as ne, isContentSizedPanel as Ot, PANEL_VIEWPORT_PADDING_PX as ie, isTriggerOffscreen as ae, rectSignature as oe } from "./dropdownPanelPosition.js";
-import { getTriggerVisual as le, DROPDOWN_TRIGGER_ATTR as zt } from "./dropdownTriggerStyle.js";
-import { pushEscapeLayer as se } from "./escapeLayers.js";
-import { ensureDropdownPanelStyles as ce } from "./optionRowStyles.js";
-import { overlayIdentity as de } from "./portalOverlay.js";
-import { useTopLayer as ue } from "./topLayer.js";
-const Ft = {
+import { jsx as e, jsxs as m, Fragment as ce } from "react/jsx-runtime";
+import Ge, { useState as Y, useRef as T, useEffect as Ne, useCallback as Ee, useLayoutEffect as Ue, useInsertionEffect as Xe, useId as Ye } from "react";
+import { createPortal as Qe } from "react-dom";
+import Je, { useFormFieldIds as et } from "./BaseFormComponent.js";
+import Oe from "./CustomIcons/CaretDownIcon.js";
+import He from "./CustomIcons/CloseIcon.js";
+import { FieldMessage as tt } from "./FieldMessage.js";
+import We from "./LoadingInput.js";
+import rt from "./Spinner.js";
+import ye from "./Tooltip.js";
+import { CONTROL_TEXT_SIZE_CLASS as Q, CONTROL_TEXT_SIZE as nt } from "./controlTextSize.js";
+import { controlWidthStyle as ze } from "./controlWidth.js";
+import { getTriggerVisual as it, DROPDOWN_TRIGGER_ATTR as Pe } from "./dropdownTriggerStyle.js";
+import { pushEscapeLayer as at } from "./escapeLayers.js";
+import { measureMenuGeometry as ot, isTriggerOffscreen as lt, rectSignature as st, MENU_MAX_HEIGHT_PX as ct, MENU_SPECS as le } from "./floatingMenuGeometry.js";
+import { ensureDropdownPanelStyles as dt } from "./optionRowStyles.js";
+import { overlayIdentity as ut } from "./portalOverlay.js";
+import { useTopLayer as pt } from "./topLayer.js";
+const Me = {
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
   gap: 8,
   padding: "24px 16px",
   color: "var(--malachite-text-dimmed, rgb(161, 161, 161))"
-}, Tt = "var(--malachite-font-size-xsmall, 11px)", pe = "[data-dropdown-option]", Ct = (t) => Array.from((t == null ? void 0 : t.querySelectorAll(pe)) ?? []), he = (t, n) => {
-  const r = n.toLowerCase(), x = t.label.toLowerCase().includes(r), l = t.subtitle ? t.subtitle.toLowerCase().includes(r) : !1, d = t.rightSideText ? t.rightSideText.toLowerCase().includes(r) : !1;
-  return x || l || d;
-}, vt = {
+}, Ce = "var(--malachite-font-size-xsmall, 11px)", ht = "[data-dropdown-option]", _e = (t) => Array.from((t == null ? void 0 : t.querySelectorAll(ht)) ?? []), ft = (t, i) => {
+  const r = i.toLowerCase(), x = t.label.toLowerCase().includes(r), l = t.subtitle ? t.subtitle.toLowerCase().includes(r) : !1, u = t.rightSideText ? t.rightSideText.toLowerCase().includes(r) : !1;
+  return x || l || u;
+}, se = {
   small: "h-[var(--malachite-control-height-small,28px)]",
   medium: "h-[var(--malachite-control-height-medium,32px)]",
   large: "h-[var(--malachite-control-height-large,42px)]"
-}, fe = {
-  small: `${vt.small} px-2.5 py-1.5 ${X.small}`,
-  medium: `${vt.medium} px-3 py-1.5 ${X.medium}`,
-  large: `${vt.large} px-4 py-2.5 ${X.large}`
-}, ge = {
-  small: `min-h-[var(--malachite-control-height-small,28px)] px-2.5 py-1.5 ${X.small}`,
-  medium: `min-h-[var(--malachite-control-height-medium,32px)] px-3 py-1.5 ${X.medium}`,
-  large: `min-h-[var(--malachite-control-height-large,42px)] px-4 py-2.5 ${X.large}`
-}, me = {
+}, gt = {
+  small: `${se.small} px-2.5 py-1.5 ${Q.small}`,
+  medium: `${se.medium} px-3 py-1.5 ${Q.medium}`,
+  large: `${se.large} px-4 py-2.5 ${Q.large}`
+}, mt = {
+  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}`
+}, xt = {
   small: "right-[26px] size-4",
   medium: "right-[30px] size-4",
   large: "right-[38px] size-4"
-}, xe = {
+}, vt = {
   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"
-}, ve = {
+}, yt = {
   small: "rounded-[var(--malachite-radius-10,10px)]",
   medium: "rounded-xl",
   large: "rounded-[var(--malachite-radius-xxl,14px)]"
-}, Gt = () => !1, be = {
+}, Fe = () => !1, bt = {
   display: "flex",
   flexDirection: "column",
   gap: 4
-}, ye = (t, n, r) => t === "value" ? n : t === "subtitle" ? r : /* @__PURE__ */ m("span", { style: be, children: [
-  /* @__PURE__ */ e("span", { children: n }),
+}, wt = (t, i, r) => t === "value" ? i : t === "subtitle" ? r : /* @__PURE__ */ m("span", { style: bt, children: [
+  /* @__PURE__ */ e("span", { children: i }),
   /* @__PURE__ */ e("span", { children: r })
-] }), we = ({
+] }), St = ({
   wrap: t,
-  id: n,
+  id: i,
   children: r
-}) => t ? /* @__PURE__ */ e("span", { id: n, className: "min-w-0 flex items-center gap-2", children: r }) : /* @__PURE__ */ e(rt, { children: r }), Se = ({ row: t, children: n }) => t ? /* @__PURE__ */ e("span", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: n }) : /* @__PURE__ */ e(rt, { children: n }), Mt = jt.forwardRef(
+}) => t ? /* @__PURE__ */ e("span", { id: i, className: "min-w-0 flex items-center gap-2", children: r }) : /* @__PURE__ */ e(ce, { children: r }), Tt = ({ row: t, children: i }) => t ? /* @__PURE__ */ e("span", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: i }) : /* @__PURE__ */ e(ce, { children: i }), je = Ge.forwardRef(
   ({
     isOpen: t,
-    onClick: n,
+    onClick: i,
     selectedItem: r,
     disabled: x = !1,
     error: l = !1,
-    tone: d,
-    placeholder: R,
+    tone: u,
+    placeholder: N,
     search: v = !1,
     showSubtitleInTrigger: y = !1,
-    searchQuery: P = "",
+    searchQuery: k = "",
     onSearchChange: _,
-    onFocusOpen: k,
-    onArrowDown: N,
-    size: h = "large",
-    hasClear: w = !1,
+    onFocusOpen: L,
+    onArrowDown: E,
+    size: f = "large",
+    hasClear: b = !1,
     onClear: o,
-    clearLabel: S,
+    clearLabel: w,
     controlId: s,
-    labelId: u,
-    describedBy: W,
-    required: c = !1,
-    ariaLabel: F,
-    ariaLabelledBy: nt,
-    hasCallerId: bt = !1
-  }, b) => {
-    const C = y && !v && !!(r != null && r.subtitle), Y = C ? ge[h] : fe[h], it = ve[h], K = `${s}-value`, Q = `${s}-subtitle`, at = !u && !F && !bt && C, ot = nt ?? (u && !F ? `${u} ${K}` : void 0) ?? (at ? K : void 0), U = (a) => {
-      a.key === "ArrowDown" && (a.preventDefault(), N == null || N());
-    }, G = g(null), T = g(null), L = le({ disabled: x, error: l, tone: d, open: t }), lt = !t && !!r, $ = (r == null ? void 0 : r.triggerLabel) ?? (r == null ? void 0 : r.label), f = C ? r == null ? void 0 : r.subtitle : void 0, A = () => {
-      const a = G.current;
+    labelId: c,
+    describedBy: $,
+    required: d = !1,
+    ariaLabel: D,
+    ariaLabelledBy: de,
+    hasCallerId: be = !1
+  }, R) => {
+    const j = y && !v && !!(r != null && r.subtitle), Z = j ? mt[f] : gt[f], J = yt[f], O = `${s}-value`, ue = `${s}-subtitle`, we = !c && !D && !be && j, pe = de ?? (c && !D ? `${c} ${O}` : void 0) ?? (we ? O : void 0), ee = (a) => {
+      a.key === "ArrowDown" && (a.preventDefault(), E == null || E());
+    }, K = T(null), te = T(null), q = it({ disabled: x, error: l, tone: u, open: t }), C = !t && !!r, g = (r == null ? void 0 : r.triggerLabel) ?? (r == null ? void 0 : r.label), S = j ? r == null ? void 0 : r.subtitle : void 0, W = () => {
+      const a = K.current;
       return !!a && a.scrollWidth > a.clientWidth;
-    }, st = () => {
-      const a = T.current;
+    }, re = () => {
+      const a = te.current;
       return !!a && a.scrollWidth > a.clientWidth;
-    }, [yt, ct] = B("subtitle"), dt = () => {
-      const a = A(), ut = st();
-      return !a && !ut ? !1 : (ct(a && ut ? "both" : a ? "value" : "subtitle"), !0);
+    }, [z, he] = Y("subtitle"), Se = () => {
+      const a = W(), I = re();
+      return !a && !I ? !1 : (he(a && I ? "both" : a ? "value" : "subtitle"), !0);
     };
     if (v && !x)
       return /* @__PURE__ */ m(
         "div",
         {
-          ref: b,
+          ref: R,
           className: `
-                relative w-full ${Y} ${it}
+                relative w-full ${Z} ${J}
                 border border-solid
                 transition-all duration-200
                 flex items-center
             `,
-          style: L,
-          [zt]: "",
+          style: q,
+          [Pe]: "",
           onClick: (a) => a.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(xt, { text: $, shouldShow: A, isShrinkable: !0, fill: !0, children: /* @__PURE__ */ m("div", { className: "relative flex-1 flex items-center", children: [
-              lt && /* @__PURE__ */ e(
+            /* @__PURE__ */ e(ye, { text: g, shouldShow: W, isShrinkable: !0, fill: !0, children: /* @__PURE__ */ m("div", { className: "relative flex-1 flex items-center min-w-0", children: [
+              C && /* @__PURE__ */ e(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -124,10 +125,10 @@ const Ft = {
                   children: /* @__PURE__ */ e(
                     "span",
                     {
-                      ref: G,
+                      ref: K,
                       className: `min-w-0 block truncate text-[length:inherit]
                                         text-[var(--malachite-text-primary)]`,
-                      children: $
+                      children: g
                     }
                   )
                 }
@@ -137,37 +138,37 @@ const Ft = {
                 {
                   id: s,
                   type: "text",
-                  "aria-label": F,
-                  "aria-labelledby": nt,
+                  "aria-label": D,
+                  "aria-labelledby": de,
                   "aria-invalid": l || void 0,
-                  "aria-required": c || void 0,
-                  "aria-describedby": W,
-                  value: t ? P : (r == null ? void 0 : r.label) ?? "",
+                  "aria-required": d || void 0,
+                  "aria-describedby": $,
+                  value: t ? k : (r == null ? void 0 : r.label) ?? "",
                   onChange: (a) => {
-                    a.stopPropagation(), _ == null || _(a.target.value), t || n();
+                    a.stopPropagation(), _ == null || _(a.target.value), t || i();
                   },
                   onFocus: () => {
-                    k == null || k();
+                    L == null || L();
                   },
-                  onKeyDown: U,
-                  placeholder: R ?? "Select Field",
-                  className: `flex-1 bg-transparent outline-none
+                  onKeyDown: ee,
+                  placeholder: N ?? "Select Field",
+                  className: `flex-1 min-w-0 bg-transparent outline-none
                             text-[length:inherit] font-normal
-                            placeholder:text-[var(--malachite-text-dimmed)] ${lt ? "text-transparent" : "text-[var(--malachite-text-primary)]"}`
+                            placeholder:text-[var(--malachite-text-dimmed)] ${C ? "text-transparent" : "text-[var(--malachite-text-primary)]"}`
                 }
               )
             ] }) }),
-            w && /* @__PURE__ */ e(
+            b && /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
-                "aria-label": S,
+                "aria-label": w,
                 onClick: o,
                 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(Ht, { size: 13 })
+                children: /* @__PURE__ */ e(He, { size: 13 })
               }
             ),
             /* @__PURE__ */ e("div", { className: "flex items-center justify-center pl-2", children: /* @__PURE__ */ e(
@@ -177,11 +178,11 @@ const Ft = {
                 tabIndex: -1,
                 "aria-label": t ? "Close options" : "Open options",
                 onClick: (a) => {
-                  a.stopPropagation(), n();
+                  a.stopPropagation(), i();
                 },
                 className: "flex items-center justify-center cursor-pointer bg-transparent border-none p-0",
                 children: /* @__PURE__ */ e(
-                  Wt,
+                  Oe,
                   {
                     size: 13,
                     style: {
@@ -196,29 +197,29 @@ const Ft = {
           ]
         }
       );
-    const V = /* @__PURE__ */ m(
+    const ne = /* @__PURE__ */ m(
       "button",
       {
-        ref: b,
+        ref: R,
         id: s,
         type: "button",
-        "aria-label": F,
-        "aria-labelledby": ot,
+        "aria-label": D,
+        "aria-labelledby": pe,
         "aria-invalid": l || void 0,
-        "aria-required": c || void 0,
-        "aria-describedby": [W, f ? Q : void 0].filter(Boolean).join(" ") || void 0,
+        "aria-required": d || void 0,
+        "aria-describedby": [$, S ? ue : void 0].filter(Boolean).join(" ") || void 0,
         onClick: (a) => {
-          a.stopPropagation(), n();
+          a.stopPropagation(), i();
         },
-        onKeyDown: U,
+        onKeyDown: ee,
         disabled: x,
-        style: L,
-        [zt]: "",
+        style: q,
+        [Pe]: "",
         className: `
-                relative w-full ${Y} ${it}
+                relative w-full ${Z} ${J}
                 border border-solid
                 transition-all duration-200
-                flex ${C ? "items-start" : "items-center"} gap-3
+                flex ${j ? "items-start" : "items-center"} gap-3
                 cursor-pointer
                 disabled:cursor-not-allowed
             `,
@@ -226,50 +227,50 @@ const Ft = {
           /* @__PURE__ */ e(
             "span",
             {
-              id: f ? void 0 : K,
-              className: `text-left flex-1 min-w-0 flex ${f ? "flex-col gap-1" : "items-center gap-2"}`,
-              children: r ? /* @__PURE__ */ m(rt, { children: [
-                /* @__PURE__ */ m(we, { wrap: !!f, id: K, children: [
+              id: S ? void 0 : O,
+              className: `text-left flex-1 min-w-0 flex ${S ? "flex-col gap-1" : "items-center gap-2"}`,
+              children: r ? /* @__PURE__ */ m(ce, { children: [
+                /* @__PURE__ */ m(St, { wrap: !!S, id: O, children: [
                   r.icon && /* @__PURE__ */ e("span", { className: "flex items-center justify-center shrink-0", children: r.icon }),
                   /* @__PURE__ */ e(
-                    xt,
+                    ye,
                     {
-                      text: $,
-                      shouldShow: f ? Gt : A,
-                      triggerAs: f ? "span" : "div",
+                      text: g,
+                      shouldShow: S ? Fe : W,
+                      triggerAs: S ? "span" : "div",
                       isShrinkable: !0,
                       children: /* @__PURE__ */ e(
                         "span",
                         {
-                          ref: G,
+                          ref: K,
                           className: `min-w-0 block truncate text-[length:inherit] ${x ? "text-[var(--malachite-text-placeholder)]" : "text-[var(--malachite-text-primary)]"}`,
-                          children: $
+                          children: g
                         }
                       )
                     }
                   )
                 ] }),
-                f && /* @__PURE__ */ e(
+                S && /* @__PURE__ */ e(
                   "span",
                   {
-                    id: Q,
-                    ref: T,
+                    id: ue,
+                    ref: te,
                     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: f
+                    children: S
                   }
                 )
               ] }) : /* @__PURE__ */ e(
                 "span",
                 {
                   className: `flex-1 min-w-0 truncate text-[length:inherit] ${x ? "text-[var(--malachite-text-placeholder)]" : "text-[var(--malachite-text-dimmed)]"}`,
-                  children: R ?? "Select Field"
+                  children: N ?? "Select Field"
                 }
               )
             }
           ),
-          w && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "shrink-0 w-4" }),
+          b && /* @__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(
-            Wt,
+            Oe,
             {
               size: 13,
               style: {
@@ -283,28 +284,28 @@ const Ft = {
       }
     );
     return y && !v ? /* @__PURE__ */ e(
-      xt,
+      ye,
       {
-        text: ye(yt, $, f),
-        shouldShow: f ? dt : Gt,
+        text: wt(z, g, S),
+        shouldShow: S ? Se : Fe,
         fill: !0,
         describesTrigger: !1,
-        children: V
+        children: ne
       }
-    ) : V;
+    ) : ne;
   }
 );
-Mt.displayName = "DropdownTrigger";
-const Te = ({
+je.displayName = "DropdownTrigger";
+const Et = ({
   item: t,
-  selected: n,
+  selected: i,
   subtitleLayout: r,
   onItemSelected: x
 }) => {
-  const l = n ? "var(--malachite-accent-foreground, rgb(2, 122, 66))" : "var(--malachite-text-primary, rgb(10, 10, 10))", d = r === "stacked" && !!t.subtitle, R = `mal-${Xt().replace(/[^a-zA-Z0-9_-]/g, "")}`, v = `${R}-label`, y = `${R}-subtitle`, P = g(null), _ = () => {
-    const w = P.current;
-    return !!w && w.scrollWidth > w.clientWidth + 1;
-  }, k = 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))", N = t.rightSideTextAlignment === "left" ? "flex-start" : "flex-end", h = (
+  const l = i ? "var(--malachite-accent-foreground, rgb(2, 122, 66))" : "var(--malachite-text-primary, rgb(10, 10, 10))", u = r === "stacked" && !!t.subtitle, N = `mal-${Ye().replace(/[^a-zA-Z0-9_-]/g, "")}`, v = `${N}-label`, y = `${N}-subtitle`, k = T(null), _ = () => {
+    const b = k.current;
+    return !!b && b.scrollWidth > b.clientWidth + 1;
+  }, 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))", E = t.rightSideTextAlignment === "left" ? "flex-start" : "flex-end", f = (
     // `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}
@@ -315,13 +316,13 @@ const Te = ({
       {
         type: "button",
         "data-dropdown-option": "",
-        "data-selected": n,
-        "aria-current": n || void 0,
+        "data-selected": i,
+        "aria-current": i || void 0,
         "aria-labelledby": t.subtitle ? v : void 0,
         "aria-describedby": t.subtitle ? y : void 0,
         tabIndex: -1,
-        onClick: (w) => {
-          w.stopPropagation(), x(t);
+        onClick: (b) => {
+          b.stopPropagation(), x(t);
         },
         className: "malachite-dropdown-option",
         style: {
@@ -348,15 +349,15 @@ const Te = ({
               display: "flex",
               alignItems: "center",
               gap: 12,
-              ...d ? { minWidth: 0 } : {}
+              ...u ? { minWidth: 0 } : {}
             },
             children: [
-              /* @__PURE__ */ e("span", { style: { flex: 1, display: "block", ...d ? { minWidth: 0 } : {} }, children: /* @__PURE__ */ m(
+              /* @__PURE__ */ e("span", { style: { flex: 1, display: "block", ...u ? { minWidth: 0 } : {} }, children: /* @__PURE__ */ m(
                 "span",
                 {
-                  style: d ? { display: "flex", flexDirection: "column", gap: 2 } : { display: "flex", alignItems: "center", gap: 8 },
+                  style: u ? { display: "flex", flexDirection: "column", gap: 2 } : { display: "flex", alignItems: "center", gap: 8 },
                   children: [
-                    /* @__PURE__ */ m(Se, { row: d && !!t.icon, children: [
+                    /* @__PURE__ */ m(Tt, { row: u && !!t.icon, children: [
                       t.icon && /* @__PURE__ */ e(
                         "span",
                         {
@@ -385,28 +386,28 @@ const Te = ({
                         }
                       )
                     ] }),
-                    t.subtitle && (d ? /* @__PURE__ */ e(
+                    t.subtitle && (u ? /* @__PURE__ */ e(
                       "span",
                       {
                         id: y,
-                        ref: P,
+                        ref: k,
                         style: {
-                          fontSize: Tt,
+                          fontSize: Ce,
                           fontWeight: 400,
                           lineHeight: 1.4,
-                          color: n ? l : "var(--malachite-text-dimmed, rgb(161, 161, 161))",
+                          color: i ? l : "var(--malachite-text-dimmed, rgb(161, 161, 161))",
                           whiteSpace: "nowrap",
                           overflow: "hidden",
                           textOverflow: "ellipsis"
                         },
                         children: t.subtitle
                       }
-                    ) : /* @__PURE__ */ m(rt, { children: [
+                    ) : /* @__PURE__ */ m(ce, { children: [
                       /* @__PURE__ */ e(
                         "span",
                         {
                           style: {
-                            fontSize: Tt,
+                            fontSize: Ce,
                             fontWeight: 400,
                             color: "var(--malachite-text-secondary, rgb(123, 123, 123))",
                             flexShrink: 0
@@ -419,7 +420,7 @@ const Te = ({
                         {
                           id: y,
                           style: {
-                            fontSize: Tt,
+                            fontSize: Ce,
                             fontWeight: 400,
                             color: "var(--malachite-text-secondary, rgb(123, 123, 123))",
                             whiteSpace: "nowrap",
@@ -443,7 +444,7 @@ const Te = ({
                     minWidth: t.rightSideText ? "var(--malachite-text-right-side-text-min-width, 80px)" : 0,
                     flexShrink: 1,
                     display: "flex",
-                    justifyContent: N
+                    justifyContent: E
                   },
                   children: t.rightSideText && /* @__PURE__ */ e(
                     "span",
@@ -451,7 +452,7 @@ const Te = ({
                       style: {
                         fontSize: "var(--malachite-text-right-side-text-font-size, 12px)",
                         fontWeight: 400,
-                        color: k,
+                        color: L,
                         whiteSpace: "nowrap",
                         overflow: "hidden",
                         textOverflow: "ellipsis",
@@ -468,95 +469,96 @@ const Te = ({
       }
     )
   );
-  return d ? /* @__PURE__ */ e(
-    xt,
+  return u ? /* @__PURE__ */ e(
+    ye,
     {
       text: t.subtitle,
       shouldShow: _,
       isShrinkable: !0,
       describesTrigger: !1,
-      children: h
+      children: f
     }
-  ) : h;
-}, Zt = jt.forwardRef((t, n) => {
+  ) : f;
+}, Ze = Ge.forwardRef((t, i) => {
   const {
     items: r,
     onItemSelected: x,
     selectedItem: l,
-    menuLoading: d,
-    emptyMessage: R,
+    menuLoading: u,
+    emptyMessage: N,
     autoFocus: v,
     positioned: y,
-    onDismiss: P,
+    onDismiss: k,
     subtitleLayout: _,
-    size: k,
-    style: N
-  } = t, h = g(null);
-  Bt(() => {
-    ce();
-  }, []), ue(h, !0), Et(() => {
+    size: L,
+    style: E
+  } = t, f = T(null);
+  Xe(() => {
+    dt();
+  }, []), pt(f, !0), Ne(() => {
     var s;
     if (!v || !y)
       return;
-    const o = Ct(h.current);
-    (s = o.find((u) => u.dataset.selected === "true") ?? o[0] ?? h.current) == null || s.focus();
+    const o = _e(f.current);
+    (s = o.find((c) => c.dataset.selected === "true") ?? o[0] ?? f.current) == null || s.focus();
   }, [v, y]);
-  const w = (o) => {
-    var W;
+  const b = (o) => {
+    var $;
     if (o.key === "Tab") {
-      P();
+      k();
       return;
     }
-    const S = Ct(h.current);
-    if (S.length === 0)
+    const w = _e(f.current);
+    if (w.length === 0)
       return;
-    const s = S.indexOf(document.activeElement), u = {
+    const s = w.indexOf(document.activeElement), c = {
       ArrowDown: s + 1,
       ArrowUp: s - 1,
       Home: 0,
-      End: S.length - 1
+      End: w.length - 1
     }[o.key];
-    u !== void 0 && (o.preventDefault(), (W = S[Math.min(Math.max(u, 0), S.length - 1)]) == null || W.focus());
+    c !== void 0 && (o.preventDefault(), ($ = w[Math.min(Math.max(c, 0), w.length - 1)]) == null || $.focus());
   };
   return /* @__PURE__ */ e(
     "div",
     {
       ref: (o) => {
-        h.current = o, typeof n == "function" ? n(o) : n && (n.current = o);
+        f.current = o, typeof i == "function" ? i(o) : i && (i.current = o);
       },
-      ...de("dropdown"),
+      ...ut("dropdown"),
       tabIndex: -1,
-      onKeyDown: w,
+      onKeyDown: b,
       style: {
-        background: "var(--malachite-card-background, rgb(255, 255, 255))",
-        border: "1px solid var(--malachite-card-border, rgb(232, 232, 232))",
-        borderRadius: 12,
-        boxShadow: "0px 2px 5px 0px rgba(0, 0, 0, 0.1)",
-        maxHeight: 400,
+        background: le.standard.background,
+        border: le.standard.border,
+        borderRadius: le.standard.radius,
+        boxShadow: le.standard.shadow,
+        maxHeight: ct,
         overflow: "hidden",
-        fontSize: re[k],
-        ...N
+        display: "flex",
+        flexDirection: "column",
+        fontSize: nt[L],
+        ...E
       },
-      children: d ? /* @__PURE__ */ m("div", { style: Ft, children: [
-        /* @__PURE__ */ e(ee, { size: "xxxsmall" }),
+      children: u ? /* @__PURE__ */ m("div", { style: Me, children: [
+        /* @__PURE__ */ e(rt, { size: "xxxsmall" }),
         /* @__PURE__ */ e("span", { children: "Loading…" })
-      ] }) : r.length === 0 ? /* @__PURE__ */ e("div", { style: Ft, children: R }) : /* @__PURE__ */ e(
+      ] }) : r.length === 0 ? /* @__PURE__ */ e("div", { style: Me, children: N }) : /* @__PURE__ */ e(
         "div",
         {
           style: {
             display: "flex",
             flexDirection: "column",
             gap: 4,
-            padding: 4,
-            maxHeight: 400,
+            padding: le.standard.padding,
             overflowY: "auto",
             scrollbarWidth: "thin",
             scrollbarColor: "var(--malachite-text-placeholder, rgb(187, 187, 187)) transparent"
           },
-          children: r.map((o, S) => {
-            const s = r[S - 1], u = !!o.group && (!s || s.group !== o.group);
+          children: r.map((o, w) => {
+            const s = r[w - 1], c = !!o.group && (!s || s.group !== o.group);
             return /* @__PURE__ */ m("div", { style: { flexShrink: 0 }, children: [
-              u && /* @__PURE__ */ e(
+              c && /* @__PURE__ */ e(
                 "div",
                 {
                   style: {
@@ -571,7 +573,7 @@ const Te = ({
                 }
               ),
               /* @__PURE__ */ e(
-                Te,
+                Et,
                 {
                   item: o,
                   onItemSelected: x,
@@ -586,242 +588,254 @@ const Te = ({
     }
   );
 });
-Zt.displayName = "DropdownPanel";
-const He = ({
+Ze.displayName = "DropdownPanel";
+const Zt = ({
   items: t,
-  onItemSelected: n,
+  onItemSelected: i,
   defaultValue: r,
   value: x,
   disabled: l = !1,
-  error: d,
-  tone: R,
+  error: u,
+  tone: N,
   label: v,
   hint: y,
-  rightSideContent: P,
+  rightSideContent: k,
   tooltip: _,
-  name: k,
-  required: N = !1,
-  requiredIndicator: h,
-  loading: w,
+  name: L,
+  required: E = !1,
+  requiredIndicator: f,
+  loading: b,
   menuLoading: o,
-  formControl: S,
+  formControl: w,
   description: s,
-  helperText: u,
-  placeholder: W,
-  search: c = !1,
-  showSubtitleInTrigger: F = !1,
-  subtitleLayout: nt = "inline",
-  clearable: bt = !1,
-  size: b = "large",
-  fullWidth: C = !1,
-  id: Y,
-  "aria-label": it,
-  "aria-labelledby": K
+  helperText: c,
+  placeholder: $,
+  search: d = !1,
+  showSubtitleInTrigger: D = !1,
+  subtitleLayout: de = "inline",
+  clearable: be = !1,
+  size: R = "large",
+  fullWidth: j = !1,
+  width: Z,
+  minWidth: J,
+  id: O,
+  "aria-label": ue,
+  "aria-labelledby": we
 }) => {
-  const { controlId: Q, labelId: at, descriptionId: ot, hintId: U, helperTextId: G } = Ut({
-    id: Y,
+  const { controlId: pe, labelId: ee, descriptionId: K, hintId: te, helperTextId: q } = et({
+    id: O,
     label: v,
     description: s,
     hint: y,
     helperText: !0
-  }), [T, L] = B(!1), [lt, $] = B(r), f = x ?? lt, A = t.find((i) => i.id === f), st = bt && f !== void 0 && f !== "" && !l, yt = F && !c && !!(A != null && A.subtitle), ct = `Clear ${v ?? W ?? "selection"}`, dt = g(r);
-  Et(() => {
-    dt.current !== r && (dt.current = r, $(r));
+  }), [C, g] = Y(!1), [S, W] = Y(r), re = x ?? S, z = t.find((n) => n.id === re), he = be && re !== void 0 && re !== "" && !l, Se = D && !d && !!(z != null && z.subtitle), ne = `Clear ${v ?? $ ?? "selection"}`, a = T(r);
+  Ne(() => {
+    a.current !== r && (a.current = r, W(r));
   }, [r]);
-  const [V, a] = B(""), [ut, Lt] = B(!1), Nt = g(null), pt = g(null), j = g(null), [E, Rt] = B(null), ht = g(!0), q = St(() => {
-    var p;
-    const i = pt.current;
-    i && ((p = i instanceof HTMLButtonElement ? i : i.querySelector("input")) == null || p.focus());
-  }, []), _t = St(
-    (i) => {
-      var p;
-      i.stopPropagation(), $(void 0), (p = H.current) == null || p.call(H, wt.current), n == null || n(void 0), c && (ht.current = !1), q();
+  const [I, V] = Y(""), [Ke, Le] = Y(!1), Re = T(null), fe = T(null), B = T(null), [p, ke] = Y(null), ge = T(!0), U = Ee(() => {
+    var h;
+    const n = fe.current;
+    n && ((h = n instanceof HTMLButtonElement ? n : n.querySelector("input")) == null || h.focus());
+  }, []), $e = Ee(
+    (n) => {
+      var h;
+      n.stopPropagation(), W(void 0), (h = M.current) == null || h.call(M, Te.current), i == null || i(void 0), d && (ge.current = !1), U();
     },
-    [n, c, q]
-  ), kt = g(b), $t = g(C), O = St(() => {
-    var p, D;
-    const i = pt.current;
-    i && Rt(
-      ne({
-        triggerRect: i.getBoundingClientRect(),
-        panelWidth: ((p = j.current) == null ? void 0 : p.offsetWidth) ?? 0,
-        panelHeight: ((D = j.current) == null ? void 0 : D.offsetHeight) ?? 0,
-        size: kt.current,
-        fullWidth: $t.current,
+    [i, d, U]
+  ), P = Ee(() => {
+    const n = fe.current;
+    n && ke(
+      ot(B.current, {
+        triggerRect: n.getBoundingClientRect(),
+        preset: "standard",
+        minWidth: J,
         viewportWidth: window.innerWidth,
         viewportHeight: window.innerHeight
       })
     );
-  }, []);
-  Pt(() => {
-    kt.current = b, $t.current = C, T && O();
-  }, [b, C, T, O]), Et(() => {
-    if (!T) {
-      Rt(null), Lt(!1);
+  }, [J]);
+  Ne(() => {
+    if (!C) {
+      ke(null), Le(!1);
       return;
     }
-    O();
-    const i = (Z) => {
-      var et;
-      const z = Z.composedPath(), I = Nt.current, tt = j.current, mt = !!I && z.includes(I), At = !!tt && z.includes(tt);
-      !mt && !At && (L(!1), c && a(""), (et = M.current) == null || et.call(M));
-    }, p = se(() => {
-      L(!1), c && a(""), q();
-    }), D = () => O();
-    let J = 0, ft = "";
-    const gt = () => {
-      const Z = pt.current;
-      if (Z) {
-        const z = Z.getBoundingClientRect();
-        if (ae(z, window.innerWidth, window.innerHeight)) {
-          L(!1), c && a("");
+    P();
+    const n = (G) => {
+      var oe;
+      const A = G.composedPath(), H = Re.current, ae = B.current, ve = !!H && A.includes(H), Ae = !!ae && A.includes(ae);
+      !ve && !Ae && (g(!1), d && V(""), (oe = F.current) == null || oe.call(F));
+    }, h = at(() => {
+      g(!1), d && V(""), U();
+    }), X = () => P();
+    let ie = 0, me = "";
+    const xe = () => {
+      const G = fe.current;
+      if (G) {
+        const A = G.getBoundingClientRect();
+        if (lt(A, window.innerWidth, window.innerHeight)) {
+          g(!1), d && V("");
           return;
         }
-        const I = oe(z);
-        I !== ft && (ft = I, O());
+        const H = st(A);
+        H !== me && (me = H, P());
       }
-      J = requestAnimationFrame(gt);
+      ie = requestAnimationFrame(xe);
     };
-    return J = requestAnimationFrame(gt), document.addEventListener("mousedown", i), window.addEventListener("scroll", D, !0), window.addEventListener("resize", D), () => {
-      cancelAnimationFrame(J), document.removeEventListener("mousedown", i), p(), window.removeEventListener("scroll", D, !0), window.removeEventListener("resize", D);
+    return ie = requestAnimationFrame(xe), document.addEventListener("mousedown", n), window.addEventListener("scroll", X, !0), window.addEventListener("resize", X), () => {
+      cancelAnimationFrame(ie), document.removeEventListener("mousedown", n), h(), window.removeEventListener("scroll", X, !0), window.removeEventListener("resize", X);
     };
-  }, [T, c, O, q]), Pt(() => {
-    T && j.current && O();
-  }, [T, O]);
-  const H = g(void 0), M = g(void 0), wt = g(""), It = (i) => {
-    var p;
-    $(i == null ? void 0 : i.id), (p = H.current) == null || p.call(H, (i == null ? void 0 : i.id) ?? wt.current), L(!1), c && (a(""), ht.current = !1), n == null || n(i == null ? void 0 : i.id), q();
-  }, Kt = () => {
-    L(!1), c && a(""), q();
-  }, Vt = () => {
-    const i = Ct(j.current)[0];
-    if (i) {
-      i.focus();
+  }, [C, d, P, U]), Ue(() => {
+    if (!C)
+      return;
+    P();
+    const n = B.current;
+    if (!n || typeof ResizeObserver > "u")
+      return;
+    const h = new ResizeObserver(() => P());
+    return h.observe(n), () => h.disconnect();
+  }, [C, P]);
+  const M = T(void 0), F = T(void 0), Te = T(""), qe = (n) => {
+    var h;
+    W(n == null ? void 0 : n.id), (h = M.current) == null || h.call(M, (n == null ? void 0 : n.id) ?? Te.current), g(!1), d && (V(""), ge.current = !1), i == null || i(n == null ? void 0 : n.id), U();
+  }, Ie = () => {
+    g(!1), d && V(""), U();
+  }, Ve = () => {
+    const n = _e(B.current)[0];
+    if (n) {
+      n.focus();
       return;
     }
-    Lt(!0), L(!0);
-  }, qt = c && V ? t.filter((i) => he(i, V)) : t;
+    Le(!0), g(!0);
+  }, Be = d && I ? t.filter((n) => ft(n, I)) : t;
   return /* @__PURE__ */ e(
-    Qt,
+    Je,
     {
-      fullWidth: C,
+      fullWidth: j,
       label: v,
       hint: y,
-      rightSideContent: P,
+      rightSideContent: k,
       tooltip: _,
-      name: k,
-      required: N,
-      requiredIndicator: h,
-      loading: w,
-      formControl: S,
+      name: L,
+      required: E,
+      requiredIndicator: f,
+      loading: b,
+      formControl: w,
       description: s,
-      controlId: Q,
-      labelId: at,
-      descriptionId: ot,
-      hintId: U,
-      loadingComponent: /* @__PURE__ */ e(
-        te,
+      controlId: pe,
+      labelId: ee,
+      descriptionId: K,
+      hintId: te,
+      loadingComponent: Z === void 0 ? /* @__PURE__ */ e(
+        We,
+        {
+          heightClass: se[R],
+          helperText: !!c,
+          helperTextMarginTop: !0
+        }
+      ) : /* @__PURE__ */ e("div", { style: ze(Z), children: /* @__PURE__ */ e(
+        We,
         {
-          heightClass: vt[b],
-          helperText: !!u,
+          heightClass: se[R],
+          helperText: !!c,
           helperTextMarginTop: !0
         }
-      ),
-      children: ({ error: i, message: p, onFieldChange: D, onFieldBlur: J, emptyValue: ft }) => {
-        H.current = D, M.current = J, wt.current = ft;
-        const gt = d ?? i, Z = d === !1 ? void 0 : p, z = `${G}-error`, I = [
-          ot,
-          U,
-          u ? G : void 0,
-          Z ? z : void 0
+      ) }),
+      children: ({ error: n, message: h, onFieldChange: X, onFieldBlur: ie, emptyValue: me }) => {
+        M.current = X, F.current = ie, Te.current = me;
+        const xe = u ?? n, G = u === !1 ? void 0 : h, A = `${q}-error`, H = [
+          K,
+          te,
+          c ? q : void 0,
+          G ? A : void 0
         ].filter(Boolean).join(" ") || void 0;
-        return /* @__PURE__ */ m(rt, { children: [
+        return /* @__PURE__ */ m(ce, { children: [
           /* @__PURE__ */ m(
             "div",
             {
-              ref: Nt,
+              ref: Re,
               className: "relative w-full",
-              onBlur: (tt) => {
-                var et, Dt;
-                const mt = tt.relatedTarget;
-                tt.currentTarget.contains(mt) || ((et = j.current) == null ? void 0 : et.contains(mt)) === !0 || (Dt = M.current) == null || Dt.call(M);
+              style: ze(Z),
+              onBlur: (ae) => {
+                var oe, De;
+                const ve = ae.relatedTarget;
+                ae.currentTarget.contains(ve) || ((oe = B.current) == null ? void 0 : oe.contains(ve)) === !0 || (De = F.current) == null || De.call(F);
               },
               children: [
-                st && !c && /* @__PURE__ */ e(
+                he && !d && /* @__PURE__ */ e(
                   "button",
                   {
                     type: "button",
-                    onClick: _t,
-                    "aria-label": ct,
-                    className: `absolute ${yt ? xe[b] : "top-1/2 -translate-y-1/2"} z-10 flex items-center
+                    onClick: $e,
+                    "aria-label": ne,
+                    className: `absolute ${Se ? vt[R] : "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 ${me[b]}`,
-                    children: /* @__PURE__ */ e(Ht, { size: 13 })
+                            focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:outline-offset-2 ${xt[R]}`,
+                    children: /* @__PURE__ */ e(He, { size: 13 })
                   }
                 ),
                 /* @__PURE__ */ e(
-                  Mt,
+                  je,
                   {
-                    hasClear: st,
-                    onClear: _t,
-                    clearLabel: ct,
-                    ref: pt,
-                    isOpen: T,
-                    onClick: () => !l && L(!T),
-                    selectedItem: A,
+                    hasClear: he,
+                    onClear: $e,
+                    clearLabel: ne,
+                    ref: fe,
+                    isOpen: C,
+                    onClick: () => !l && g(!C),
+                    selectedItem: z,
                     disabled: l,
-                    error: gt,
-                    tone: R,
-                    placeholder: W,
-                    search: c,
-                    showSubtitleInTrigger: F,
-                    searchQuery: V,
-                    onSearchChange: a,
+                    error: xe,
+                    tone: N,
+                    placeholder: $,
+                    search: d,
+                    showSubtitleInTrigger: D,
+                    searchQuery: I,
+                    onSearchChange: V,
                     onFocusOpen: () => {
-                      if (!ht.current) {
-                        ht.current = !0;
+                      if (!ge.current) {
+                        ge.current = !0;
                         return;
                       }
-                      L(!0);
+                      g(!0);
                     },
                     onArrowDown: () => {
-                      l || Vt();
+                      l || Ve();
                     },
-                    size: b,
-                    controlId: Q,
-                    hasCallerId: !!Y,
-                    labelId: at,
-                    describedBy: I,
-                    required: N,
-                    ariaLabel: it,
-                    ariaLabelledBy: K
+                    size: R,
+                    controlId: pe,
+                    hasCallerId: !!O,
+                    labelId: ee,
+                    describedBy: H,
+                    required: E,
+                    ariaLabel: ue,
+                    ariaLabelledBy: we
                   }
                 ),
-                T && Yt(
+                C && Qe(
                   /* @__PURE__ */ e(
-                    Zt,
+                    Ze,
                     {
-                      ref: j,
+                      ref: B,
                       style: {
                         position: "fixed",
-                        top: (E == null ? void 0 : E.top) ?? 0,
-                        left: (E == null ? void 0 : E.left) ?? 0,
-                        width: Ot(b, C) ? "auto" : E == null ? void 0 : E.width,
-                        maxWidth: Ot(b, C) ? `calc(100vw - ${ie * 2}px)` : void 0,
-                        visibility: E ? "visible" : "hidden",
-                        opacity: E ? 1 : 0
+                        top: (p == null ? void 0 : p.top) ?? 0,
+                        left: (p == null ? void 0 : p.left) ?? 0,
+                        width: p == null ? void 0 : p.width,
+                        maxHeight: p == null ? void 0 : p.maxHeight,
+                        visibility: p ? "visible" : "hidden",
+                        opacity: p ? 1 : 0
                       },
-                      items: qt,
-                      onItemSelected: It,
-                      selectedItem: A,
+                      items: Be,
+                      onItemSelected: qe,
+                      selectedItem: z,
                       menuLoading: o,
                       emptyMessage: t.length === 0 ? "No options available" : "No results found",
-                      subtitleLayout: nt,
-                      size: b,
-                      autoFocus: !c || ut,
-                      positioned: E !== null,
-                      onDismiss: Kt
+                      subtitleLayout: de,
+                      size: R,
+                      autoFocus: !d || Ke,
+                      positioned: p !== null,
+                      onDismiss: Ie
                     }
                   ),
                   document.body
@@ -829,21 +843,21 @@ const He = ({
               ]
             }
           ),
-          u && /* @__PURE__ */ e(
+          c && /* @__PURE__ */ e(
             "div",
             {
-              id: G,
+              id: q,
               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: u
+              children: c
             }
           ),
-          /* @__PURE__ */ e(Jt, { id: z, message: Z, spaced: !0 })
+          /* @__PURE__ */ e(tt, { id: A, message: G, spaced: !0 })
         ] });
       }
     }
   );
 };
 export {
-  He as Dropdown
+  Zt as Dropdown
 };
 //# sourceMappingURL=Dropdown.js.map