@stackone/malachite 2.34.0 → 2.36.0

package/dist/components/Dropdown.js

@@ -1,75 +1,87 @@
-import { jsx as t, jsxs as b, Fragment as ye } from "react/jsx-runtime";
-import He, { useState as j, useRef as g, useEffect as Le, useCallback as Ce, useLayoutEffect as Qe, useInsertionEffect as Ye, useId as Je } from "react";
-import { createPortal as et } from "react-dom";
-import tt, { useFormFieldIds as rt } from "./BaseFormComponent.js";
-import ze from "./CustomIcons/CaretDownIcon.js";
-import je from "./CustomIcons/CloseIcon.js";
-import { FieldMessage as nt } from "./FieldMessage.js";
-import Pe from "./LoadingInput.js";
-import it from "./Spinner.js";
-import be from "./Tooltip.js";
-import { CONTROL_TEXT_SIZE_CLASS as Y, CONTROL_TEXT_SIZE as at } from "./controlTextSize.js";
-import { controlWidthStyle as We } from "./controlWidth.js";
-import { getTriggerVisual as ot, DROPDOWN_TRIGGER_ATTR as Me } from "./dropdownTriggerStyle.js";
-import { pushEscapeLayer as lt } from "./escapeLayers.js";
-import { measureMenuGeometry as st, isTriggerOffscreen as ct, rectSignature as dt, MENU_MAX_HEIGHT_PX as ut, MENU_SPECS as oe } from "./floatingMenuGeometry.js";
-import { ensureDropdownPanelStyles as pt } from "./optionRowStyles.js";
-import { overlayIdentity as ft } from "./portalOverlay.js";
-import { useTopLayer as ht } from "./topLayer.js";
-import { tooltipLines as Ze, isCut as le } from "./truncatedLines.js";
-const Fe = {
+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,
+  {
+    text: e,
+    variant: "inline",
+    color: "inherit",
+    size: "inherit",
+    links: "inert",
+    omitMargin: !0
+  }
+) : e, Ge = {
   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)", gt = "[data-dropdown-option]", Ne = (e) => Array.from((e == null ? void 0 : e.querySelectorAll(gt)) ?? []), mt = (e, i) => {
-  const r = i.toLowerCase(), m = e.label.toLowerCase().includes(r), c = e.subtitle ? e.subtitle.toLowerCase().includes(r) : !1, y = e.rightSideText ? e.rightSideText.toLowerCase().includes(r) : !1;
-  return m || c || y;
-}, se = {
+}, 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 = {
   small: "h-[var(--malachite-control-height-small,28px)]",
   medium: "h-[var(--malachite-control-height-medium,32px)]",
   large: "h-[var(--malachite-control-height-large,42px)]"
-}, xt = {
-  small: `${se.small} px-2.5 py-1.5 ${Y.small}`,
-  medium: `${se.medium} px-3 py-1.5 ${Y.medium}`,
-  large: `${se.large} px-4 py-2.5 ${Y.large}`
-}, vt = {
-  small: `min-h-[var(--malachite-control-height-small,28px)] px-2.5 py-1.5 ${Y.small}`,
-  medium: `min-h-[var(--malachite-control-height-medium,32px)] px-3 py-1.5 ${Y.medium}`,
-  large: `min-h-[var(--malachite-control-height-large,42px)] px-4 py-2.5 ${Y.large}`
-}, bt = {
+}, 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 = {
   small: "right-[26px] size-4",
   medium: "right-[30px] size-4",
   large: "right-[38px] size-4"
-}, yt = {
+}, Ct = {
   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"
-}, wt = {
+}, Nt = {
   small: "rounded-[var(--malachite-radius-10,10px)]",
   medium: "rounded-xl",
   large: "rounded-[var(--malachite-radius-xxl,14px)]"
-}, Ge = () => !1, St = ({
+}, He = () => !1, Rt = ({
   wrap: e,
   id: i,
   children: r
-}) => e ? /* @__PURE__ */ t("span", { id: i, className: "min-w-0 flex items-center gap-2", children: r }) : /* @__PURE__ */ t(ye, { children: r }), Tt = ({ row: e, children: i }) => e ? /* @__PURE__ */ t("span", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: i }) : /* @__PURE__ */ t(ye, { children: i }), Ke = He.forwardRef(
+}) => 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(
   ({
     isOpen: e,
     onClick: i,
     selectedItem: r,
     disabled: m = !1,
     error: c = !1,
-    tone: y,
-    placeholder: N,
+    tone: w,
+    placeholder: L,
     search: x = !1,
-    showSubtitleInTrigger: w = !1,
+    showSubtitleInTrigger: S = !1,
     searchQuery: k = "",
     onSearchChange: E,
-    onFocusOpen: R,
-    onArrowDown: S,
+    onFocusOpen: N,
+    onArrowDown: T,
     size: v = "large",
     hasClear: $ = !1,
     onClear: a,
@@ -79,33 +91,33 @@ const Fe = {
     describedBy: C,
     required: l = !1,
     ariaLabel: D,
-    ariaLabelledBy: ce,
-    hasCallerId: we = !1
+    ariaLabelledBy: de,
+    hasCallerId: Se = !1
   }, _) => {
-    const Z = w && !x && !!(r != null && r.subtitle), K = Z ? vt[v] : xt[v], J = wt[v], O = `${s}-value`, de = `${s}-subtitle`, Se = !o && !D && !we && Z, ue = ce ?? (o && !D ? `${o} ${O}` : void 0) ?? (Se ? O : void 0), ee = (d) => {
-      d.key === "ArrowDown" && (d.preventDefault(), S == null || S());
-    }, q = g(null), te = g(null), B = ot({ disabled: m, error: c, tone: y, open: e }), L = !e && !!r, h = (r == null ? void 0 : r.triggerLabel) ?? (r == null ? void 0 : r.label), T = Z ? r == null ? void 0 : r.subtitle : void 0, z = () => le(q.current), [V, P] = j({ value: !1, subtitle: !0 }), pe = () => {
+    const 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 : (P({ value: d, subtitle: re }), !0);
+      return !d && !re ? !1 : (M({ value: d, subtitle: re }), !0);
     };
     if (x && !m)
-      return /* @__PURE__ */ b(
+      return /* @__PURE__ */ y(
         "div",
         {
           ref: _,
           className: `
-                relative w-full ${K} ${J}
+                relative w-full ${I} ${J}
                 border border-solid
                 transition-all duration-200
                 flex items-center
             `,
           style: B,
-          [Me]: "",
+          [Fe]: "",
           onClick: (d) => d.stopPropagation(),
           children: [
             (r == null ? void 0 : r.icon) && /* @__PURE__ */ t("span", { className: "flex shrink-0 items-center justify-center pr-2", children: r.icon }),
-            /* @__PURE__ */ t(be, { text: h, shouldShow: z, isShrinkable: !0, fill: !0, children: /* @__PURE__ */ b("div", { className: "relative flex-1 flex items-center min-w-0", children: [
-              L && /* @__PURE__ */ t(
+            /* @__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(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -113,7 +125,7 @@ const Fe = {
                   children: /* @__PURE__ */ t(
                     "span",
                     {
-                      ref: q,
+                      ref: K,
                       className: `min-w-0 block truncate text-[length:inherit]
                                         text-[var(--malachite-text-primary)]`,
                       children: h
@@ -127,7 +139,7 @@ const Fe = {
                   id: s,
                   type: "text",
                   "aria-label": D,
-                  "aria-labelledby": ce,
+                  "aria-labelledby": de,
                   "aria-invalid": c || void 0,
                   "aria-required": l || void 0,
                   "aria-describedby": C,
@@ -136,13 +148,13 @@ const Fe = {
                     d.stopPropagation(), E == null || E(d.target.value), e || i();
                   },
                   onFocus: () => {
-                    R == null || R();
+                    N == null || N();
                   },
                   onKeyDown: ee,
-                  placeholder: N ?? "Select Field",
+                  placeholder: L ?? "Select Field",
                   className: `flex-1 min-w-0 bg-transparent outline-none
                             text-[length:inherit] font-normal
-                            placeholder:text-[var(--malachite-text-dimmed)] ${L ? "text-transparent" : "text-[var(--malachite-text-primary)]"}`
+                            placeholder:text-[var(--malachite-text-dimmed)] ${R ? "text-transparent" : "text-[var(--malachite-text-primary)]"}`
                 }
               )
             ] }) }),
@@ -156,7 +168,7 @@ const Fe = {
                                 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(je, { size: 13 })
+                children: /* @__PURE__ */ t(Ze, { size: 13 })
               }
             ),
             /* @__PURE__ */ t("div", { className: "flex items-center justify-center pl-2", children: /* @__PURE__ */ t(
@@ -170,7 +182,7 @@ const Fe = {
                 },
                 className: "flex items-center justify-center cursor-pointer bg-transparent border-none p-0",
                 children: /* @__PURE__ */ t(
-                  ze,
+                  Me,
                   {
                     size: 13,
                     style: {
@@ -185,26 +197,26 @@ const Fe = {
           ]
         }
       );
-    const fe = /* @__PURE__ */ b(
+    const he = /* @__PURE__ */ y(
       "button",
       {
         ref: _,
         id: s,
         type: "button",
         "aria-label": D,
-        "aria-labelledby": ue,
+        "aria-labelledby": pe,
         "aria-invalid": c || void 0,
         "aria-required": l || void 0,
-        "aria-describedby": [C, T ? de : void 0].filter(Boolean).join(" ") || void 0,
+        "aria-describedby": [C, b ? ue : void 0].filter(Boolean).join(" ") || void 0,
         onClick: (d) => {
           d.stopPropagation(), i();
         },
         onKeyDown: ee,
         disabled: m,
         style: B,
-        [Me]: "",
+        [Fe]: "",
         className: `
-                relative w-full ${K} ${J}
+                relative w-full ${I} ${J}
                 border border-solid
                 transition-all duration-200
                 flex ${Z ? "items-start" : "items-center"} gap-3
@@ -215,22 +227,22 @@ const Fe = {
           /* @__PURE__ */ t(
             "span",
             {
-              id: T ? void 0 : O,
-              className: `text-left flex-1 min-w-0 flex ${T ? "flex-col gap-1" : "items-center gap-2"}`,
-              children: r ? /* @__PURE__ */ b(ye, { children: [
-                /* @__PURE__ */ b(St, { wrap: !!T, id: O, children: [
+              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: [
                   r.icon && /* @__PURE__ */ t("span", { className: "flex items-center justify-center shrink-0", children: r.icon }),
                   /* @__PURE__ */ t(
-                    be,
+                    ye,
                     {
                       text: h,
-                      shouldShow: T ? Ge : z,
-                      triggerAs: T ? "span" : "div",
+                      shouldShow: b ? He : z,
+                      triggerAs: b ? "span" : "div",
                       isShrinkable: !0,
                       children: /* @__PURE__ */ t(
                         "span",
                         {
-                          ref: q,
+                          ref: K,
                           className: `min-w-0 block truncate text-[length:inherit] ${m ? "text-[var(--malachite-text-placeholder)]" : "text-[var(--malachite-text-primary)]"}`,
                           children: h
                         }
@@ -238,27 +250,27 @@ const Fe = {
                     }
                   )
                 ] }),
-                T && /* @__PURE__ */ t(
+                b && /* @__PURE__ */ t(
                   "span",
                   {
-                    id: de,
+                    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: T
+                    children: /* @__PURE__ */ t(se, { text: b })
                   }
                 )
               ] }) : /* @__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: N ?? "Select Field"
+                  children: L ?? "Select Field"
                 }
               )
             }
           ),
           $ && /* @__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(
-            ze,
+            Me,
             {
               size: 13,
               style: {
@@ -271,30 +283,33 @@ const Fe = {
         ]
       }
     );
-    return w && !x ? /* @__PURE__ */ t(
-      be,
+    return S && !x ? /* @__PURE__ */ t(
+      ye,
       {
-        text: Ze([
-          ["value", V.value && h],
-          ["subtitle", V.subtitle && T]
+        text: Ie([
+          ["value", q.value && h],
+          [
+            "subtitle",
+            q.subtitle && b && /* @__PURE__ */ t(se, { text: b })
+          ]
         ]),
-        shouldShow: T ? pe : Ge,
+        shouldShow: b ? fe : He,
         fill: !0,
         describesTrigger: !1,
-        children: fe
+        children: he
       }
-    ) : fe;
+    ) : he;
   }
 );
-Ke.displayName = "DropdownTrigger";
-const Et = ({
+Be.displayName = "DropdownTrigger";
+const _t = ({
   item: e,
   selected: i,
   subtitleLayout: r,
   onItemSelected: m
 }) => {
-  const c = i ? "var(--malachite-accent-foreground, rgb(2, 122, 66))" : "var(--malachite-text-primary, rgb(10, 10, 10))", y = r === "stacked" && !!e.subtitle, N = `mal-${Je().replace(/[^a-zA-Z0-9_-]/g, "")}`, x = `${N}-label`, w = `${N}-subtitle`, k = g(null), E = g(null), R = g(null), [S, v] = j({ label: !0, subtitle: !0, rightSide: !0 }), $ = () => {
-    const o = le(k.current), C = le(E.current), l = le(R.current);
+  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 = (
     // `role="option"` would be invalid — nothing here declares a `listbox`, and an
@@ -310,7 +325,7 @@ const Et = ({
         "data-selected": i,
         "aria-current": i || void 0,
         "aria-labelledby": e.subtitle ? x : void 0,
-        "aria-describedby": e.subtitle ? w : void 0,
+        "aria-describedby": e.subtitle ? S : void 0,
         tabIndex: -1,
         onClick: (o) => {
           o.stopPropagation(), m(e);
@@ -332,7 +347,7 @@ const Et = ({
           font: "inherit",
           color: "inherit"
         },
-        children: /* @__PURE__ */ b(
+        children: /* @__PURE__ */ y(
           "span",
           {
             style: {
@@ -343,12 +358,12 @@ const Et = ({
               minWidth: 0
             },
             children: [
-              /* @__PURE__ */ t("span", { style: { flex: "1 1 auto", display: "block", minWidth: 0 }, children: /* @__PURE__ */ b(
+              /* @__PURE__ */ t("span", { style: { flex: "1 1 auto", display: "block", minWidth: 0 }, children: /* @__PURE__ */ y(
                 "span",
                 {
-                  style: y ? { display: "flex", flexDirection: "column", gap: 2 } : { display: "flex", alignItems: "center", gap: 8 },
+                  style: w ? { display: "flex", flexDirection: "column", gap: 2 } : { display: "flex", alignItems: "center", gap: 8 },
                   children: [
-                    /* @__PURE__ */ b(Tt, { row: y && !!e.icon, children: [
+                    /* @__PURE__ */ y(Lt, { row: w && !!e.icon, children: [
                       e.icon && /* @__PURE__ */ t(
                         "span",
                         {
@@ -378,10 +393,10 @@ const Et = ({
                         }
                       )
                     ] }),
-                    e.subtitle && (y ? /* @__PURE__ */ t(
+                    e.subtitle && (w ? /* @__PURE__ */ t(
                       "span",
                       {
-                        id: w,
+                        id: S,
                         ref: E,
                         style: {
                           fontSize: Re,
@@ -392,9 +407,9 @@ const Et = ({
                           overflow: "hidden",
                           textOverflow: "ellipsis"
                         },
-                        children: e.subtitle
+                        children: /* @__PURE__ */ t(se, { text: e.subtitle })
                       }
-                    ) : /* @__PURE__ */ b(
+                    ) : /* @__PURE__ */ y(
                       "span",
                       {
                         style: {
@@ -423,7 +438,7 @@ const Et = ({
                           /* @__PURE__ */ t(
                             "span",
                             {
-                              id: w,
+                              id: S,
                               ref: E,
                               style: {
                                 fontSize: Re,
@@ -434,7 +449,7 @@ const Et = ({
                                 textOverflow: "ellipsis",
                                 minWidth: 0
                               },
-                              children: e.subtitle
+                              children: /* @__PURE__ */ t(se, { text: e.subtitle })
                             }
                           )
                         ]
@@ -457,7 +472,7 @@ const Et = ({
                   children: e.rightSideText && /* @__PURE__ */ t(
                     "span",
                     {
-                      ref: R,
+                      ref: N,
                       style: {
                         fontSize: "var(--malachite-text-right-side-text-font-size, 12px)",
                         fontWeight: 400,
@@ -479,12 +494,15 @@ const Et = ({
     )
   );
   return /* @__PURE__ */ t(
-    be,
+    ye,
     {
-      text: Ze([
-        ["label", S.label && e.label],
-        ["subtitle", S.subtitle && e.subtitle],
-        ["rightSide", S.rightSide && e.rightSideText]
+      text: Ie([
+        ["label", T.label && e.label],
+        [
+          "subtitle",
+          T.subtitle && e.subtitle && /* @__PURE__ */ t(se, { text: e.subtitle })
+        ],
+        ["rightSide", T.rightSide && e.rightSideText]
       ]),
       shouldShow: $,
       isShrinkable: !0,
@@ -492,36 +510,36 @@ const Et = ({
       children: s
     }
   );
-}, qe = He.forwardRef((e, i) => {
+}, qe = je.forwardRef((e, i) => {
   const {
     items: r,
     onItemSelected: m,
     selectedItem: c,
-    menuLoading: y,
-    emptyMessage: N,
+    menuLoading: w,
+    emptyMessage: L,
     autoFocus: x,
-    positioned: w,
+    positioned: S,
     onDismiss: k,
     subtitleLayout: E,
-    size: R,
-    style: S
+    size: N,
+    style: T
   } = e, v = g(null);
-  Ye(() => {
-    pt();
-  }, []), ht(v, !0), Le(() => {
+  et(() => {
+    mt();
+  }, []), vt(v, !0), Le(() => {
     var s;
-    if (!x || !w)
+    if (!x || !S)
       return;
-    const a = Ne(v.current);
+    const a = _e(v.current);
     (s = a.find((o) => o.dataset.selected === "true") ?? a[0] ?? v.current) == null || s.focus();
-  }, [x, w]);
+  }, [x, S]);
   const $ = (a) => {
     var C;
     if (a.key === "Tab") {
       k();
       return;
     }
-    const f = Ne(v.current);
+    const f = _e(v.current);
     if (f.length === 0)
       return;
     const s = f.indexOf(document.activeElement), o = {
@@ -538,7 +556,7 @@ const Et = ({
       ref: (a) => {
         v.current = a, typeof i == "function" ? i(a) : i && (i.current = a);
       },
-      ...ft("dropdown"),
+      ...xt("dropdown"),
       tabIndex: -1,
       onKeyDown: $,
       style: {
@@ -546,17 +564,17 @@ const Et = ({
         border: oe.standard.border,
         borderRadius: oe.standard.radius,
         boxShadow: oe.standard.shadow,
-        maxHeight: ut,
+        maxHeight: gt,
         overflow: "hidden",
         display: "flex",
         flexDirection: "column",
-        fontSize: at[R],
-        ...S
+        fontSize: ct[N],
+        ...T
       },
-      children: y ? /* @__PURE__ */ b("div", { style: Fe, children: [
-        /* @__PURE__ */ t(it, { size: "xxxsmall" }),
+      children: w ? /* @__PURE__ */ y("div", { style: Ge, children: [
+        /* @__PURE__ */ t(ot, { size: "xxxsmall" }),
         /* @__PURE__ */ t("span", { children: "Loading…" })
-      ] }) : r.length === 0 ? /* @__PURE__ */ t("div", { style: Fe, children: N }) : /* @__PURE__ */ t(
+      ] }) : r.length === 0 ? /* @__PURE__ */ t("div", { style: Ge, children: L }) : /* @__PURE__ */ t(
         "div",
         {
           style: {
@@ -570,7 +588,7 @@ const Et = ({
           },
           children: r.map((a, f) => {
             const s = r[f - 1], o = !!a.group && (!s || s.group !== a.group);
-            return /* @__PURE__ */ b("div", { style: { flexShrink: 0 }, children: [
+            return /* @__PURE__ */ y("div", { style: { flexShrink: 0 }, children: [
               o && /* @__PURE__ */ t(
                 "div",
                 {
@@ -586,7 +604,7 @@ const Et = ({
                 }
               ),
               /* @__PURE__ */ t(
-                Et,
+                _t,
                 {
                   item: a,
                   onItemSelected: m,
@@ -602,20 +620,20 @@ const Et = ({
   );
 });
 qe.displayName = "DropdownPanel";
-const Kt = ({
+const Yt = ({
   items: e,
   onItemSelected: i,
   defaultValue: r,
   value: m,
   disabled: c = !1,
-  error: y,
-  tone: N,
+  error: w,
+  tone: L,
   label: x,
-  hint: w,
+  hint: S,
   rightSideContent: k,
   tooltip: E,
-  name: R,
-  required: S = !1,
+  name: N,
+  required: T = !1,
   requiredIndicator: v,
   loading: $,
   menuLoading: a,
@@ -625,40 +643,40 @@ const Kt = ({
   placeholder: C,
   search: l = !1,
   showSubtitleInTrigger: D = !1,
-  subtitleLayout: ce = "inline",
-  clearable: we = !1,
+  subtitleLayout: de = "inline",
+  clearable: Se = !1,
   size: _ = "large",
   fullWidth: Z = !1,
-  width: K,
+  width: I,
   minWidth: J,
   id: O,
-  "aria-label": de,
-  "aria-labelledby": Se
+  "aria-label": ue,
+  "aria-labelledby": Te
 }) => {
-  const { controlId: ue, labelId: ee, descriptionId: q, hintId: te, helperTextId: B } = rt({
+  const { controlId: pe, labelId: ee, descriptionId: K, hintId: te, helperTextId: B } = it({
     id: O,
     label: x,
     description: s,
-    hint: w,
+    hint: S,
     helperText: !0
-  }), [L, h] = j(!1), [T, z] = j(r), V = m ?? T, P = e.find((n) => n.id === V), pe = we && V !== void 0 && V !== "" && !c, fe = D && !l && !!(P != null && P.subtitle), d = `Clear ${x ?? C ?? "selection"}`, re = g(r);
+  }), [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));
   }, [r]);
-  const [Te, I] = j(""), [Be, _e] = j(!1), ke = g(null), he = g(null), U = g(null), [u, $e] = j(null), ge = g(!0), X = Ce(() => {
+  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 = he.current;
+    const n = ge.current;
     n && ((p = n instanceof HTMLButtonElement ? n : n.querySelector("input")) == null || p.focus());
-  }, []), Ae = Ce(
+  }, []), De = Ne(
     (n) => {
       var p;
-      n.stopPropagation(), z(void 0), (p = M.current) == null || p.call(M, Ee.current), i == null || i(void 0), l && (ge.current = !1), X();
+      n.stopPropagation(), z(void 0), (p = P.current) == null || p.call(P, Ce.current), i == null || i(void 0), l && (me.current = !1), U();
     },
-    [i, l, X]
-  ), W = Ce(() => {
-    const n = he.current;
-    n && $e(
-      st(U.current, {
+    [i, l, U]
+  ), W = Ne(() => {
+    const n = ge.current;
+    n && Ae(
+      pt(X.current, {
         triggerRect: n.getBoundingClientRect(),
         preset: "standard",
         minWidth: J,
@@ -668,168 +686,168 @@ const Kt = ({
     );
   }, [J]);
   Le(() => {
-    if (!L) {
-      $e(null), _e(!1);
+    if (!R) {
+      Ae(null), ke(!1);
       return;
     }
     W();
     const n = (G) => {
       var ae;
-      const A = G.composedPath(), H = ke.current, ie = U.current, ve = !!H && A.includes(H), De = !!ie && A.includes(ie);
-      !ve && !De && (h(!1), l && I(""), (ae = F.current) == null || ae.call(F));
-    }, p = lt(() => {
-      h(!1), l && I(""), X();
-    }), Q = () => W();
-    let ne = 0, me = "";
-    const xe = () => {
-      const G = he.current;
+      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 (ct(A, window.innerWidth, window.innerHeight)) {
-          h(!1), l && I("");
+        if (ft(A, window.innerWidth, window.innerHeight)) {
+          h(!1), l && V("");
           return;
         }
-        const H = dt(A);
-        H !== me && (me = H, W());
+        const H = ht(A);
+        H !== xe && (xe = H, W());
       }
-      ne = requestAnimationFrame(xe);
+      ne = requestAnimationFrame(ve);
     };
-    return ne = requestAnimationFrame(xe), document.addEventListener("mousedown", n), window.addEventListener("scroll", Q, !0), window.addEventListener("resize", Q), () => {
-      cancelAnimationFrame(ne), document.removeEventListener("mousedown", n), p(), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q);
+    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);
     };
-  }, [L, l, W, X]), Qe(() => {
-    if (!L)
+  }, [R, l, W, U]), Je(() => {
+    if (!R)
       return;
     W();
-    const n = U.current;
+    const n = X.current;
     if (!n || typeof ResizeObserver > "u")
       return;
     const p = new ResizeObserver(() => W());
     return p.observe(n), () => p.disconnect();
-  }, [L, W]);
-  const M = g(void 0), F = g(void 0), Ee = g(""), Ve = (n) => {
+  }, [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 = M.current) == null || p.call(M, (n == null ? void 0 : n.id) ?? Ee.current), h(!1), l && (I(""), ge.current = !1), i == null || i(n == null ? void 0 : n.id), X();
-  }, Ie = () => {
-    h(!1), l && I(""), X();
+    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 = () => {
-    const n = Ne(U.current)[0];
+    h(!1), l && V(""), U();
+  }, Ye = () => {
+    const n = _e(X.current)[0];
     if (n) {
       n.focus();
       return;
     }
-    _e(!0), h(!0);
-  }, Xe = l && Te ? e.filter((n) => mt(n, Te)) : e;
+    ke(!0), h(!0);
+  }, Qe = l && Ee ? e.filter((n) => wt(n, Ee)) : e;
   return /* @__PURE__ */ t(
-    tt,
+    nt,
     {
       fullWidth: Z,
       label: x,
-      hint: w,
+      hint: S,
       rightSideContent: k,
       tooltip: E,
-      name: R,
-      required: S,
+      name: N,
+      required: T,
       requiredIndicator: v,
       loading: $,
       formControl: f,
       description: s,
-      controlId: ue,
+      controlId: pe,
       labelId: ee,
-      descriptionId: q,
+      descriptionId: K,
       hintId: te,
-      loadingComponent: K === void 0 ? /* @__PURE__ */ t(
-        Pe,
+      loadingComponent: I === void 0 ? /* @__PURE__ */ t(
+        We,
         {
-          heightClass: se[_],
+          heightClass: ce[_],
           helperText: !!o,
           helperTextMarginTop: !0
         }
-      ) : /* @__PURE__ */ t("div", { style: We(K), children: /* @__PURE__ */ t(
-        Pe,
+      ) : /* @__PURE__ */ t("div", { style: Pe(I), children: /* @__PURE__ */ t(
+        We,
         {
-          heightClass: se[_],
+          heightClass: ce[_],
           helperText: !!o,
           helperTextMarginTop: !0
         }
       ) }),
-      children: ({ error: n, message: p, onFieldChange: Q, onFieldBlur: ne, emptyValue: me }) => {
-        M.current = Q, F.current = ne, Ee.current = me;
-        const xe = y ?? n, G = y === !1 ? void 0 : p, A = `${B}-error`, H = [
-          q,
+      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
         ].filter(Boolean).join(" ") || void 0;
-        return /* @__PURE__ */ b(ye, { children: [
-          /* @__PURE__ */ b(
+        return /* @__PURE__ */ y(we, { children: [
+          /* @__PURE__ */ y(
             "div",
             {
-              ref: ke,
+              ref: $e,
               className: "relative w-full",
-              style: We(K),
+              style: Pe(I),
               onBlur: (ie) => {
-                var ae, Oe;
-                const ve = ie.relatedTarget;
-                ie.currentTarget.contains(ve) || ((ae = U.current) == null ? void 0 : ae.contains(ve)) === !0 || (Oe = F.current) == null || Oe.call(F);
+                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);
               },
               children: [
-                pe && !l && /* @__PURE__ */ t(
+                fe && !l && /* @__PURE__ */ t(
                   "button",
                   {
                     type: "button",
-                    onClick: Ae,
+                    onClick: De,
                     "aria-label": d,
-                    className: `absolute ${fe ? yt[_] : "top-1/2 -translate-y-1/2"} z-10 flex items-center
+                    className: `absolute ${he ? Ct[_] : "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 ${bt[_]}`,
-                    children: /* @__PURE__ */ t(je, { size: 13 })
+                            focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:outline-offset-2 ${Et[_]}`,
+                    children: /* @__PURE__ */ t(Ze, { size: 13 })
                   }
                 ),
                 /* @__PURE__ */ t(
-                  Ke,
+                  Be,
                   {
-                    hasClear: pe,
-                    onClear: Ae,
+                    hasClear: fe,
+                    onClear: De,
                     clearLabel: d,
-                    ref: he,
-                    isOpen: L,
-                    onClick: () => !c && h(!L),
-                    selectedItem: P,
+                    ref: ge,
+                    isOpen: R,
+                    onClick: () => !c && h(!R),
+                    selectedItem: M,
                     disabled: c,
-                    error: xe,
-                    tone: N,
+                    error: ve,
+                    tone: L,
                     placeholder: C,
                     search: l,
                     showSubtitleInTrigger: D,
-                    searchQuery: Te,
-                    onSearchChange: I,
+                    searchQuery: Ee,
+                    onSearchChange: V,
                     onFocusOpen: () => {
-                      if (!ge.current) {
-                        ge.current = !0;
+                      if (!me.current) {
+                        me.current = !0;
                         return;
                       }
                       h(!0);
                     },
                     onArrowDown: () => {
-                      c || Ue();
+                      c || Ye();
                     },
                     size: _,
-                    controlId: ue,
+                    controlId: pe,
                     hasCallerId: !!O,
                     labelId: ee,
                     describedBy: H,
-                    required: S,
-                    ariaLabel: de,
-                    ariaLabelledBy: Se
+                    required: T,
+                    ariaLabel: ue,
+                    ariaLabelledBy: Te
                   }
                 ),
-                L && et(
+                R && rt(
                   /* @__PURE__ */ t(
                     qe,
                     {
-                      ref: U,
+                      ref: X,
                       style: {
                         position: "fixed",
                         top: (u == null ? void 0 : u.top) ?? 0,
@@ -839,16 +857,16 @@ const Kt = ({
                         visibility: u ? "visible" : "hidden",
                         opacity: u ? 1 : 0
                       },
-                      items: Xe,
-                      onItemSelected: Ve,
-                      selectedItem: P,
+                      items: Qe,
+                      onItemSelected: Xe,
+                      selectedItem: M,
                       menuLoading: a,
                       emptyMessage: e.length === 0 ? "No options available" : "No results found",
-                      subtitleLayout: ce,
+                      subtitleLayout: de,
                       size: _,
-                      autoFocus: !l || Be,
+                      autoFocus: !l || Ve,
                       positioned: u !== null,
-                      onDismiss: Ie
+                      onDismiss: Ue
                     }
                   ),
                   document.body
@@ -864,13 +882,13 @@ const Kt = ({
               children: o
             }
           ),
-          /* @__PURE__ */ t(nt, { id: A, message: G, spaced: !0 })
+          /* @__PURE__ */ t(at, { id: A, message: G, spaced: !0 })
         ] });
       }
     }
   );
 };
 export {
-  Kt as Dropdown
+  Yt as Dropdown
 };
 //# sourceMappingURL=Dropdown.js.map