@stackone/malachite 2.45.0 → 2.46.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/COMPONENTS.md +1 -1
  2. package/dist/components/ActionMenuTagHost.js +11 -11
  3. package/dist/components/ActionMenuTagHost.js.map +1 -1
  4. package/dist/components/Dropdown.js +290 -286
  5. package/dist/components/Dropdown.js.map +1 -1
  6. package/dist/components/MultiSelect.js +132 -131
  7. package/dist/components/MultiSelect.js.map +1 -1
  8. package/dist/components/floatingMenuGeometry.js +51 -50
  9. package/dist/components/floatingMenuGeometry.js.map +1 -1
  10. package/dist/components/hasBadge.js +5 -0
  11. package/dist/components/hasBadge.js.map +1 -0
  12. package/dist/index.d.ts +8 -1
  13. package/package.json +1 -1
package/dist/components/Dropdown.js CHANGED
@@ -1,28 +1,29 @@
1
- import { jsx as t, jsxs as v, Fragment as Ne } from "react/jsx-runtime";
2
- 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";
3
- import { createPortal as ot } from "react-dom";
4
- import lt, { useFormFieldIds as st } from "./BaseFormComponent.js";
5
- import Ge from "./CustomIcons/CaretDownIcon.js";
6
- import Be from "./CustomIcons/CloseIcon.js";
7
- import { FieldMessage as ct } from "./FieldMessage.js";
8
- import He from "./LoadingInput.js";
9
- import dt from "./Spinner.js";
1
+ import { jsx as t, jsxs as b, Fragment as Ne } from "react/jsx-runtime";
2
+ import Ce, { useState as A, useRef as h, useEffect as ze, useCallback as Oe, useLayoutEffect as at, useInsertionEffect as ot, useId as lt } from "react";
3
+ import { createPortal as st } from "react-dom";
4
+ import ct, { useFormFieldIds as dt } from "./BaseFormComponent.js";
5
+ import Ie from "./CustomIcons/CaretDownIcon.js";
6
+ import Ve from "./CustomIcons/CloseIcon.js";
7
+ import { FieldMessage as ut } from "./FieldMessage.js";
8
+ import Ke from "./LoadingInput.js";
9
+ import pt from "./Spinner.js";
10
10
  import Ee from "./Tooltip.js";
11
- import ut from "./Typography/MarkdownBlock.js";
12
- import { inlineMarkdownText as pt } from "./Typography/inlineMarkdown.js";
11
+ import ft from "./Typography/MarkdownBlock.js";
12
+ import { inlineMarkdownText as ht } from "./Typography/inlineMarkdown.js";
13
13
  import { getDeepActiveElement as Te } from "./activeElement.js";
14
- import { CONTROL_TEXT_SIZE_CLASS as ee, CONTROL_TEXT_SIZE as ft } from "./controlTextSize.js";
15
- import { controlWidthStyle as je } from "./controlWidth.js";
16
- import { getTriggerVisual as ht, DROPDOWN_TRIGGER_ATTR as Ie } from "./dropdownTriggerStyle.js";
17
- import { pushEscapeLayer as gt } from "./escapeLayers.js";
18
- import { measureMenuGeometry as mt, isTriggerOffscreen as xt, rectSignature as vt, MENU_MAX_HEIGHT_PX as bt, MENU_SPECS as se } from "./floatingMenuGeometry.js";
19
- import { FOCUS_RING_WITHIN_INPUT as yt, FOCUS_RING as wt } from "./focusRing.js";
20
- import { ensureDropdownPanelStyles as St } from "./optionRowStyles.js";
21
- import { usePopupLayer as Tt } from "./overlayLayers.js";
22
- import { useTopLayer as Et } from "./topLayer.js";
23
- import { tooltipLines as qe, isCut as ce } from "./truncatedLines.js";
24
- const Ve = /[*`[<&\\]/, de = ({ text: e }) => Ve.test(e) ? /* @__PURE__ */ t(
25
- ut,
14
+ import { CONTROL_TEXT_SIZE_CLASS as J, CONTROL_TEXT_SIZE as gt } from "./controlTextSize.js";
15
+ import { controlWidthStyle as Be } from "./controlWidth.js";
16
+ import { getTriggerVisual as mt, DROPDOWN_TRIGGER_ATTR as Ze } from "./dropdownTriggerStyle.js";
17
+ import { pushEscapeLayer as xt } from "./escapeLayers.js";
18
+ import { measureMenuGeometry as vt, isTriggerOffscreen as bt, rectSignature as yt, MENU_MAX_HEIGHT_PX as wt, MENU_SPECS as se } from "./floatingMenuGeometry.js";
19
+ import { FOCUS_RING_WITHIN_INPUT as St, FOCUS_RING as Tt } from "./focusRing.js";
20
+ import { hasBadge as De } from "./hasBadge.js";
21
+ import { ensureDropdownPanelStyles as Et } from "./optionRowStyles.js";
22
+ import { usePopupLayer as Nt } from "./overlayLayers.js";
23
+ import { useTopLayer as Ct } from "./topLayer.js";
24
+ import { tooltipLines as Xe, isCut as ce } from "./truncatedLines.js";
25
+ const Rt = Ce.lazy(() => import("./ActionMenuTagHost.js")), Ye = /[*`[<&\\]/, de = ({ text: e }) => Ye.test(e) ? /* @__PURE__ */ t(
26
+ ft,
26
27
  {
27
28
  text: e,
28
29
  variant: "inline",
@@ -31,99 +32,99 @@ const Ve = /[*`[<&\\]/, de = ({ text: e }) => Ve.test(e) ? /* @__PURE__ */ t(
31
32
  links: "inert",
32
33
  omitMargin: !0
33
34
  }
34
- ) : e, Ke = {
35
+ ) : e, Ue = {
35
36
  display: "flex",
36
37
  alignItems: "center",
37
38
  justifyContent: "center",
38
39
  gap: 8,
39
40
  padding: "24px 16px",
40
41
  color: "var(--malachite-text-dimmed, rgb(161, 161, 161))"
41
- }, $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) => {
42
- 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;
43
- return g || d || b;
42
+ }, Ae = "var(--malachite-font-size-xsmall, 11px)", _t = "[data-dropdown-option]", Me = (e) => Array.from((e == null ? void 0 : e.querySelectorAll(_t)) ?? []), kt = (e) => Ye.test(e) ? ht(e) : e.replace(/\s+/g, " "), Lt = (e, a) => {
43
+ const r = a.toLowerCase(), g = e.label.toLowerCase().includes(r), d = e.subtitle ? kt(e.subtitle).toLowerCase().includes(r) : !1, y = e.rightSideText ? e.rightSideText.toLowerCase().includes(r) : !1;
44
+ return g || d || y;
44
45
  }, ue = {
45
46
  small: "h-[var(--malachite-control-height-small,28px)]",
46
47
  medium: "h-[var(--malachite-control-height-medium,32px)]",
47
48
  large: "h-[var(--malachite-control-height-large,42px)]"
48
- }, _t = {
49
- small: `${ue.small} px-2.5 py-1.5 ${ee.small}`,
50
- medium: `${ue.medium} px-3 py-1.5 ${ee.medium}`,
51
- large: `${ue.large} px-4 py-2.5 ${ee.large}`
52
- }, Lt = {
53
- small: `min-h-[var(--malachite-control-height-small,28px)] px-2.5 py-1.5 ${ee.small}`,
54
- medium: `min-h-[var(--malachite-control-height-medium,32px)] px-3 py-1.5 ${ee.medium}`,
55
- large: `min-h-[var(--malachite-control-height-large,42px)] px-4 py-2.5 ${ee.large}`
56
- }, kt = {
49
+ }, $t = {
50
+ small: `${ue.small} px-2.5 py-1.5 ${J.small}`,
51
+ medium: `${ue.medium} px-3 py-1.5 ${J.medium}`,
52
+ large: `${ue.large} px-4 py-2.5 ${J.large}`
53
+ }, Ot = {
54
+ small: `min-h-[var(--malachite-control-height-small,28px)] px-2.5 py-1.5 ${J.small}`,
55
+ medium: `min-h-[var(--malachite-control-height-medium,32px)] px-3 py-1.5 ${J.medium}`,
56
+ large: `min-h-[var(--malachite-control-height-large,42px)] px-4 py-2.5 ${J.large}`
57
+ }, Dt = {
57
58
  small: "right-[26px] size-4",
58
59
  medium: "right-[30px] size-4",
59
60
  large: "right-[38px] size-4"
60
- }, $t = {
61
+ }, At = {
61
62
  small: "top-[calc(var(--malachite-control-height-small,28px)/2)] -translate-y-1/2",
62
63
  medium: "top-[calc(var(--malachite-control-height-medium,32px)/2)] -translate-y-1/2",
63
64
  large: "top-[calc(var(--malachite-control-height-large,42px)/2)] -translate-y-1/2"
64
- }, Ot = {
65
+ }, zt = {
65
66
  small: "rounded-[var(--malachite-radius-10,10px)]",
66
67
  medium: "rounded-xl",
67
68
  large: "rounded-[var(--malachite-radius-xxl,14px)]"
68
- }, Ze = () => !1, Dt = ({
69
+ }, qe = () => !1, Mt = ({
69
70
  wrap: e,
70
71
  id: a,
71
72
  children: r
72
- }) => 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(
73
+ }) => e ? /* @__PURE__ */ t("span", { id: a, className: "min-w-0 flex items-center gap-2", children: r }) : /* @__PURE__ */ t(Ne, { children: r }), Ft = ({ row: e, children: a }) => e ? /* @__PURE__ */ t("span", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: a }) : /* @__PURE__ */ t(Ne, { children: a }), Qe = Ce.forwardRef(
73
74
  ({
74
75
  isOpen: e,
75
76
  onClick: a,
76
77
  selectedItem: r,
77
78
  disabled: g = !1,
78
79
  error: d = !1,
79
- tone: b,
80
+ tone: y,
80
81
  placeholder: C,
81
82
  search: m = !1,
82
- showSubtitleInTrigger: y = !1,
83
+ showSubtitleInTrigger: w = !1,
83
84
  searchQuery: _ = "",
84
85
  onSearchChange: R,
85
- onFocusOpen: w,
86
- onArrowDown: S,
87
- onTabAway: T,
88
- size: L = "large",
86
+ onFocusOpen: S,
87
+ onArrowDown: T,
88
+ onTabAway: E,
89
+ size: k = "large",
89
90
  hasClear: x = !1,
90
- onClear: M,
91
- clearLabel: F,
91
+ onClear: z,
92
+ clearLabel: M,
92
93
  controlId: i,
93
94
  labelId: l,
94
95
  describedBy: o,
95
96
  required: u = !1,
96
- ariaLabel: k,
97
+ ariaLabel: L,
97
98
  ariaLabelledBy: pe,
98
99
  hasCallerId: $ = !1
99
100
  }, fe) => {
100
- 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) => {
101
+ const O = w && !m && !!(r != null && r.subtitle), ee = O ? Ot[k] : $t[k], te = zt[k], F = `${i}-value`, he = `${i}-subtitle`, Re = !l && !L && !$ && O, ge = pe ?? (l && !L ? `${l} ${F}` : void 0) ?? (Re ? F : void 0), re = (s) => {
101
102
  if (s.key === "Tab") {
102
- T == null || T();
103
+ E == null || E();
103
104
  return;
104
105
  }
105
- s.key === "ArrowDown" && (s.preventDefault(), S == null || S());
106
- }, 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 = () => {
107
- const s = W(), Y = ce(X.current);
108
- return !s && !Y ? !1 : (xe({ value: s, subtitle: Y }), !0);
106
+ s.key === "ArrowDown" && (s.preventDefault(), T == null || T());
107
+ }, q = h(null), ne = h(null), V = mt({ disabled: g, error: d, tone: y, open: e }), N = !e && !!r, f = (r == null ? void 0 : r.triggerLabel) ?? (r == null ? void 0 : r.label), v = O ? r == null ? void 0 : r.subtitle : void 0, P = () => ce(q.current), [X, W] = A({ value: !1, subtitle: !0 }), me = () => {
108
+ const s = P(), ie = ce(ne.current);
109
+ return !s && !ie ? !1 : (W({ value: s, subtitle: ie }), !0);
109
110
  };
110
111
  if (m && !g)
111
- return /* @__PURE__ */ v(
112
+ return /* @__PURE__ */ b(
112
113
  "div",
113
114
  {
114
115
  ref: fe,
115
116
  className: `
116
- relative w-full ${te} ${re}
117
+ relative w-full ${ee} ${te}
117
118
  border border-solid
118
119
  transition-all duration-200
119
- flex items-center ${yt}
120
+ flex items-center ${St}
120
121
  `,
121
- style: E,
122
- [Ie]: "",
122
+ style: V,
123
+ [Ze]: "",
123
124
  onClick: (s) => s.stopPropagation(),
124
125
  children: [
125
126
  (r == null ? void 0 : r.icon) && /* @__PURE__ */ t("span", { className: "flex shrink-0 items-center justify-center pr-2", children: r.icon }),
126
- /* @__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: [
127
+ /* @__PURE__ */ t(Ee, { text: f, shouldShow: P, isShrinkable: !0, fill: !0, children: /* @__PURE__ */ b("div", { className: "relative flex-1 flex items-center min-w-0", children: [
127
128
  N && /* @__PURE__ */ t(
128
129
  "span",
129
130
  {
@@ -132,10 +133,10 @@ const Ve = /[*`[<&\\]/, de = ({ text: e }) => Ve.test(e) ? /* @__PURE__ */ t(
132
133
  children: /* @__PURE__ */ t(
133
134
  "span",
134
135
  {
135
- ref: V,
136
+ ref: q,
136
137
  className: `min-w-0 block truncate text-[length:inherit]
137
138
  text-[var(--malachite-text-primary)]`,
138
- children: P
139
+ children: f
139
140
  }
140
141
  )
141
142
  }
@@ -145,7 +146,7 @@ const Ve = /[*`[<&\\]/, de = ({ text: e }) => Ve.test(e) ? /* @__PURE__ */ t(
145
146
  {
146
147
  id: i,
147
148
  type: "text",
148
- "aria-label": k,
149
+ "aria-label": L,
149
150
  "aria-labelledby": pe,
150
151
  "aria-invalid": d || void 0,
151
152
  "aria-required": u || void 0,
@@ -155,9 +156,9 @@ const Ve = /[*`[<&\\]/, de = ({ text: e }) => Ve.test(e) ? /* @__PURE__ */ t(
155
156
  s.stopPropagation(), R == null || R(s.target.value), e || a();
156
157
  },
157
158
  onFocus: () => {
158
- w == null || w();
159
+ S == null || S();
159
160
  },
160
- onKeyDown: ne,
161
+ onKeyDown: re,
161
162
  placeholder: C ?? "Select Field",
162
163
  className: `flex-1 min-w-0 bg-transparent outline-none
163
164
  text-[length:inherit] font-normal
@@ -169,13 +170,13 @@ const Ve = /[*`[<&\\]/, de = ({ text: e }) => Ve.test(e) ? /* @__PURE__ */ t(
169
170
  "button",
170
171
  {
171
172
  type: "button",
172
- "aria-label": F,
173
- onClick: M,
173
+ "aria-label": M,
174
+ onClick: z,
174
175
  className: `flex shrink-0 items-center justify-center pl-2 cursor-pointer
175
176
  bg-transparent border-none p-0 text-[var(--malachite-text-placeholder)]
176
177
  hover:text-[var(--malachite-text-primary)] transition-colors
177
178
  rounded-full focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:outline-offset-2`,
178
- children: /* @__PURE__ */ t(Be, { size: 13 })
179
+ children: /* @__PURE__ */ t(Ve, { size: 13 })
179
180
  }
180
181
  ),
181
182
  /* @__PURE__ */ t("div", { className: "flex items-center justify-center pl-2", children: /* @__PURE__ */ t(
@@ -189,7 +190,7 @@ const Ve = /[*`[<&\\]/, de = ({ text: e }) => Ve.test(e) ? /* @__PURE__ */ t(
189
190
  },
190
191
  className: "flex items-center justify-center cursor-pointer bg-transparent border-none p-0",
191
192
  children: /* @__PURE__ */ t(
192
- Ge,
193
+ Ie,
193
194
  {
194
195
  size: 13,
195
196
  style: {
@@ -204,66 +205,66 @@ const Ve = /[*`[<&\\]/, de = ({ text: e }) => Ve.test(e) ? /* @__PURE__ */ t(
204
205
  ]
205
206
  }
206
207
  );
207
- const ie = /* @__PURE__ */ v(
208
+ const xe = /* @__PURE__ */ b(
208
209
  "button",
209
210
  {
210
211
  ref: fe,
211
212
  id: i,
212
213
  type: "button",
213
- "aria-label": k,
214
- "aria-labelledby": me,
214
+ "aria-label": L,
215
+ "aria-labelledby": ge,
215
216
  "aria-invalid": d || void 0,
216
217
  "aria-required": u || void 0,
217
- "aria-describedby": [o, p ? he : void 0].filter(Boolean).join(" ") || void 0,
218
+ "aria-describedby": [o, v ? he : void 0].filter(Boolean).join(" ") || void 0,
218
219
  onClick: (s) => {
219
220
  s.stopPropagation(), a(s.detail === 0);
220
221
  },
221
- onKeyDown: ne,
222
+ onKeyDown: re,
222
223
  disabled: g,
223
- style: E,
224
- [Ie]: "",
224
+ style: V,
225
+ [Ze]: "",
225
226
  className: `
226
- relative w-full ${te} ${re}
227
+ relative w-full ${ee} ${te}
227
228
  border border-solid
228
229
  transition-all duration-200
229
230
  flex ${O ? "items-start" : "items-center"} gap-3
230
231
  cursor-pointer
231
- disabled:cursor-not-allowed ${wt}
232
+ disabled:cursor-not-allowed ${Tt}
232
233
  `,
233
234
  children: [
234
235
  /* @__PURE__ */ t(
235
236
  "span",
236
237
  {
237
- id: p ? void 0 : q,
238
- className: `text-left flex-1 min-w-0 flex ${p ? "flex-col gap-1" : "items-center gap-2"}`,
239
- children: r ? /* @__PURE__ */ v(Ne, { children: [
240
- /* @__PURE__ */ v(Dt, { wrap: !!p, id: q, children: [
238
+ id: v ? void 0 : F,
239
+ className: `text-left flex-1 min-w-0 flex ${v ? "flex-col gap-1" : "items-center gap-2"}`,
240
+ children: r ? /* @__PURE__ */ b(Ne, { children: [
241
+ /* @__PURE__ */ b(Mt, { wrap: !!v, id: F, children: [
241
242
  r.icon && /* @__PURE__ */ t("span", { className: "flex items-center justify-center shrink-0", children: r.icon }),
242
243
  /* @__PURE__ */ t(
243
244
  Ee,
244
245
  {
245
- text: P,
246
- shouldShow: p ? Ze : W,
247
- triggerAs: p ? "span" : "div",
246
+ text: f,
247
+ shouldShow: v ? qe : P,
248
+ triggerAs: v ? "span" : "div",
248
249
  isShrinkable: !0,
249
250
  children: /* @__PURE__ */ t(
250
251
  "span",
251
252
  {
252
- ref: V,
253
+ ref: q,
253
254
  className: `min-w-0 block truncate text-[length:inherit] ${g ? "text-[var(--malachite-text-placeholder)]" : "text-[var(--malachite-text-primary)]"}`,
254
- children: P
255
+ children: f
255
256
  }
256
257
  )
257
258
  }
258
259
  )
259
260
  ] }),
260
- p && /* @__PURE__ */ t(
261
+ v && /* @__PURE__ */ t(
261
262
  "span",
262
263
  {
263
264
  id: he,
264
- ref: X,
265
+ ref: ne,
265
266
  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",
266
- children: /* @__PURE__ */ t(de, { text: p })
267
+ children: /* @__PURE__ */ t(de, { text: v })
267
268
  }
268
269
  )
269
270
  ] }) : /* @__PURE__ */ t(
@@ -277,7 +278,7 @@ const Ve = /[*`[<&\\]/, de = ({ text: e }) => Ve.test(e) ? /* @__PURE__ */ t(
277
278
  ),
278
279
  x && /* @__PURE__ */ t("span", { "aria-hidden": "true", className: "shrink-0 w-4" }),
279
280
  /* @__PURE__ */ t("span", { className: "flex items-center justify-center shrink-0", children: /* @__PURE__ */ t(
280
- Ge,
281
+ Ie,
281
282
  {
282
283
  size: 13,
283
284
  style: {
@@ -290,36 +291,36 @@ const Ve = /[*`[<&\\]/, de = ({ text: e }) => Ve.test(e) ? /* @__PURE__ */ t(
290
291
  ]
291
292
  }
292
293
  );
293
- return y && !m ? /* @__PURE__ */ t(
294
+ return w && !m ? /* @__PURE__ */ t(
294
295
  Ee,
295
296
  {
296
- text: qe([
297
- ["value", D.value && P],
297
+ text: Xe([
298
+ ["value", X.value && f],
298
299
  [
299
300
  "subtitle",
300
- D.subtitle && p && /* @__PURE__ */ t(de, { text: p })
301
+ X.subtitle && v && /* @__PURE__ */ t(de, { text: v })
301
302
  ]
302
303
  ]),
303
- shouldShow: p ? Ce : Ze,
304
+ shouldShow: v ? me : qe,
304
305
  fill: !0,
305
306
  describesTrigger: !1,
306
- children: ie
307
+ children: xe
307
308
  }
308
- ) : ie;
309
+ ) : xe;
309
310
  }
310
311
  );
311
- Xe.displayName = "DropdownTrigger";
312
- const zt = ({
312
+ Qe.displayName = "DropdownTrigger";
313
+ const Pt = ({
313
314
  item: e,
314
315
  selected: a,
315
316
  showTooltipOnFocus: r,
316
317
  subtitleLayout: g,
317
318
  onItemSelected: d
318
319
  }) => {
319
- 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 = () => {
320
- const l = ce(R.current), o = ce(w.current), u = ce(S.current);
321
- return !l && !o && !u ? !1 : (L({ label: l, subtitle: o, rightSide: u }), !0);
322
- }, 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 = (
320
+ const y = a ? "var(--malachite-accent-foreground, rgb(2, 122, 66))" : "var(--malachite-text-primary, rgb(10, 10, 10))", C = g === "stacked" && !!e.subtitle, m = `mal-${lt().replace(/[^a-zA-Z0-9_-]/g, "")}`, w = `${m}-label`, _ = `${m}-subtitle`, R = h(null), S = h(null), T = h(null), [E, k] = A({ label: !0, subtitle: !0, rightSide: !0 }), x = () => {
321
+ const l = ce(R.current), o = ce(S.current), u = ce(T.current);
322
+ return !l && !o && !u ? !1 : (k({ label: l, subtitle: o, rightSide: u }), !0);
323
+ }, z = 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))", M = e.rightSideTextAlignment === "left" ? "flex-start" : "flex-end", i = (
323
324
  // `role="option"` would be invalid — nothing here declares a `listbox`, and an
324
325
  // orphaned option is dropped from the a11y tree. `aria-current`, not
325
326
  // `aria-pressed`: these are one-of-many choices, not toggles. tabIndex={-1}
@@ -332,7 +333,7 @@ const zt = ({
332
333
  "data-dropdown-option": "",
333
334
  "data-selected": a,
334
335
  "aria-current": a || void 0,
335
- "aria-labelledby": e.subtitle ? y : void 0,
336
+ "aria-labelledby": e.subtitle || De(e.badge) ? w : void 0,
336
337
  "aria-describedby": e.subtitle ? _ : void 0,
337
338
  tabIndex: -1,
338
339
  onClick: (l) => {
@@ -355,7 +356,7 @@ const zt = ({
355
356
  font: "inherit",
356
357
  color: "inherit"
357
358
  },
358
- children: /* @__PURE__ */ v(
359
+ children: /* @__PURE__ */ b(
359
360
  "span",
360
361
  {
361
362
  style: {
@@ -366,12 +367,12 @@ const zt = ({
366
367
  minWidth: 0
367
368
  },
368
369
  children: [
369
- /* @__PURE__ */ t("span", { style: { flex: "1 1 auto", display: "block", minWidth: 0 }, children: /* @__PURE__ */ v(
370
+ /* @__PURE__ */ t("span", { style: { flex: "1 1 auto", display: "block", minWidth: 0 }, children: /* @__PURE__ */ b(
370
371
  "span",
371
372
  {
372
373
  style: C ? { display: "flex", flexDirection: "column", gap: 2 } : { display: "flex", alignItems: "center", gap: 8 },
373
374
  children: [
374
- /* @__PURE__ */ v(At, { row: C && !!e.icon, children: [
375
+ /* @__PURE__ */ b(Ft, { row: C && !!e.icon, children: [
375
376
  e.icon && /* @__PURE__ */ t(
376
377
  "span",
377
378
  {
@@ -387,11 +388,11 @@ const zt = ({
387
388
  /* @__PURE__ */ t(
388
389
  "span",
389
390
  {
390
- id: e.subtitle ? y : void 0,
391
+ id: e.subtitle || De(e.badge) ? w : void 0,
391
392
  ref: R,
392
393
  style: {
393
394
  fontWeight: 400,
394
- color: b,
395
+ color: y,
395
396
  whiteSpace: "nowrap",
396
397
  overflow: "hidden",
397
398
  textOverflow: "ellipsis",
@@ -405,19 +406,19 @@ const zt = ({
405
406
  "span",
406
407
  {
407
408
  id: _,
408
- ref: w,
409
+ ref: S,
409
410
  style: {
410
- fontSize: $e,
411
+ fontSize: Ae,
411
412
  fontWeight: 400,
412
413
  lineHeight: 1.4,
413
- color: a ? b : "var(--malachite-text-dimmed, rgb(161, 161, 161))",
414
+ color: a ? y : "var(--malachite-text-dimmed, rgb(161, 161, 161))",
414
415
  whiteSpace: "nowrap",
415
416
  overflow: "hidden",
416
417
  textOverflow: "ellipsis"
417
418
  },
418
419
  children: /* @__PURE__ */ t(de, { text: e.subtitle })
419
420
  }
420
- ) : /* @__PURE__ */ v(
421
+ ) : /* @__PURE__ */ b(
421
422
  "span",
422
423
  {
423
424
  style: {
@@ -435,7 +436,7 @@ const zt = ({
435
436
  "span",
436
437
  {
437
438
  style: {
438
- fontSize: $e,
439
+ fontSize: Ae,
439
440
  fontWeight: 400,
440
441
  color: "var(--malachite-text-secondary, rgb(123, 123, 123))",
441
442
  flexShrink: 0
@@ -447,9 +448,9 @@ const zt = ({
447
448
  "span",
448
449
  {
449
450
  id: _,
450
- ref: w,
451
+ ref: S,
451
452
  style: {
452
- fontSize: $e,
453
+ fontSize: Ae,
453
454
  fontWeight: 400,
454
455
  color: "var(--malachite-text-secondary, rgb(123, 123, 123))",
455
456
  whiteSpace: "nowrap",
@@ -475,16 +476,16 @@ const zt = ({
475
476
  minWidth: e.rightSideText ? "var(--malachite-text-right-side-text-min-width, 80px)" : 0,
476
477
  flexShrink: 1,
477
478
  display: "flex",
478
- justifyContent: F
479
+ justifyContent: M
479
480
  },
480
481
  children: e.rightSideText && /* @__PURE__ */ t(
481
482
  "span",
482
483
  {
483
- ref: S,
484
+ ref: T,
484
485
  style: {
485
486
  fontSize: "var(--malachite-text-right-side-text-font-size, 12px)",
486
487
  fontWeight: 400,
487
- color: M,
488
+ color: z,
488
489
  whiteSpace: "nowrap",
489
490
  overflow: "hidden",
490
491
  textOverflow: "ellipsis",
@@ -494,7 +495,8 @@ const zt = ({
494
495
  }
495
496
  )
496
497
  }
497
- )
498
+ ),
499
+ De(e.badge) && /* @__PURE__ */ t("span", { style: { flexShrink: 0, display: "flex" }, children: /* @__PURE__ */ t(Ce.Suspense, { fallback: null, children: /* @__PURE__ */ t(Rt, { children: e.badge }) }) })
498
500
  ]
499
501
  }
500
502
  )
@@ -504,13 +506,13 @@ const zt = ({
504
506
  return /* @__PURE__ */ t(
505
507
  Ee,
506
508
  {
507
- text: qe([
508
- ["label", T.label && e.label],
509
+ text: Xe([
510
+ ["label", E.label && e.label],
509
511
  [
510
512
  "subtitle",
511
- T.subtitle && e.subtitle && /* @__PURE__ */ t(de, { text: e.subtitle })
513
+ E.subtitle && e.subtitle && /* @__PURE__ */ t(de, { text: e.subtitle })
512
514
  ],
513
- ["rightSide", T.rightSide && e.rightSideText]
515
+ ["rightSide", E.rightSide && e.rightSideText]
514
516
  ]),
515
517
  shouldShow: x,
516
518
  showOnFocus: r,
@@ -519,45 +521,45 @@ const zt = ({
519
521
  children: i
520
522
  }
521
523
  );
522
- }, Ye = Ue.forwardRef((e, a) => {
524
+ }, Je = Ce.forwardRef((e, a) => {
523
525
  const {
524
526
  items: r,
525
527
  onItemSelected: g,
526
528
  selectedItem: d,
527
- menuLoading: b,
529
+ menuLoading: y,
528
530
  emptyMessage: C,
529
531
  autoFocus: m,
530
- positioned: y,
532
+ positioned: w,
531
533
  onDismiss: _,
532
534
  keyboardNavigation: R,
533
- onKeyboardNavigation: w,
534
- subtitleLayout: S,
535
- size: T,
536
- style: L
537
- } = e, x = h(null), M = Tt("dropdown", !0, x);
538
- return it(() => {
539
- St();
540
- }, []), Et(x, !0), Oe(() => {
535
+ onKeyboardNavigation: S,
536
+ subtitleLayout: T,
537
+ size: E,
538
+ style: k
539
+ } = e, x = h(null), z = Nt("dropdown", !0, x);
540
+ return ot(() => {
541
+ Et();
542
+ }, []), Ct(x, !0), ze(() => {
541
543
  var o;
542
- if (!m || !y)
544
+ if (!m || !w)
543
545
  return;
544
- const i = De(x.current);
546
+ const i = Me(x.current);
545
547
  (o = i.find((u) => u.dataset.selected === "true") ?? i[0] ?? x.current) == null || o.focus();
546
- }, [m, y]), /* @__PURE__ */ t(
548
+ }, [m, w]), /* @__PURE__ */ t(
547
549
  "div",
548
550
  {
549
551
  ref: (i) => {
550
552
  x.current = i, typeof a == "function" ? a(i) : a && (a.current = i);
551
553
  },
552
- ...M,
554
+ ...z,
553
555
  tabIndex: -1,
554
556
  onKeyDown: (i) => {
555
- var k;
557
+ var L;
556
558
  if (i.key === "Tab") {
557
559
  _();
558
560
  return;
559
561
  }
560
- const l = De(x.current);
562
+ const l = Me(x.current);
561
563
  if (l.length === 0)
562
564
  return;
563
565
  const o = l.indexOf(document.activeElement), u = {
@@ -566,24 +568,24 @@ const zt = ({
566
568
  Home: 0,
567
569
  End: l.length - 1
568
570
  }[i.key];
569
- u !== void 0 && (i.preventDefault(), w(), (k = l[Math.min(Math.max(u, 0), l.length - 1)]) == null || k.focus());
571
+ u !== void 0 && (i.preventDefault(), S(), (L = l[Math.min(Math.max(u, 0), l.length - 1)]) == null || L.focus());
570
572
  },
571
573
  style: {
572
574
  background: se.standard.background,
573
575
  border: se.standard.border,
574
576
  borderRadius: se.standard.radius,
575
577
  boxShadow: se.standard.shadow,
576
- maxHeight: bt,
578
+ maxHeight: wt,
577
579
  overflow: "hidden",
578
580
  display: "flex",
579
581
  flexDirection: "column",
580
- fontSize: ft[T],
581
- ...L
582
+ fontSize: gt[E],
583
+ ...k
582
584
  },
583
- children: b ? /* @__PURE__ */ v("div", { style: Ke, children: [
584
- /* @__PURE__ */ t(dt, { size: "xxxsmall" }),
585
+ children: y ? /* @__PURE__ */ b("div", { style: Ue, children: [
586
+ /* @__PURE__ */ t(pt, { size: "xxxsmall" }),
585
587
  /* @__PURE__ */ t("span", { children: "Loading…" })
586
- ] }) : r.length === 0 ? /* @__PURE__ */ t("div", { style: Ke, children: C }) : /* @__PURE__ */ t(
588
+ ] }) : r.length === 0 ? /* @__PURE__ */ t("div", { style: Ue, children: C }) : /* @__PURE__ */ t(
587
589
  "div",
588
590
  {
589
591
  style: {
@@ -597,7 +599,7 @@ const zt = ({
597
599
  },
598
600
  children: r.map((i, l) => {
599
601
  const o = r[l - 1], u = !!i.group && (!o || o.group !== i.group);
600
- return /* @__PURE__ */ v("div", { style: { flexShrink: 0 }, children: [
602
+ return /* @__PURE__ */ b("div", { style: { flexShrink: 0 }, children: [
601
603
  u && /* @__PURE__ */ t(
602
604
  "div",
603
605
  {
@@ -613,11 +615,11 @@ const zt = ({
613
615
  }
614
616
  ),
615
617
  /* @__PURE__ */ t(
616
- zt,
618
+ Pt,
617
619
  {
618
620
  item: i,
619
621
  onItemSelected: g,
620
- subtitleLayout: S,
622
+ subtitleLayout: T,
621
623
  selected: i.id === (d == null ? void 0 : d.id) || !1,
622
624
  showTooltipOnFocus: R
623
625
  }
@@ -629,51 +631,52 @@ const zt = ({
629
631
  }
630
632
  );
631
633
  });
632
- Ye.displayName = "DropdownPanel";
633
- const ar = ({
634
+ Je.displayName = "DropdownPanel";
635
+ const cr = ({
634
636
  items: e,
635
637
  onItemSelected: a,
636
638
  defaultValue: r,
637
639
  value: g,
638
640
  disabled: d = !1,
639
- error: b,
641
+ error: y,
640
642
  tone: C,
641
643
  label: m,
642
- hint: y,
644
+ hint: w,
643
645
  rightSideContent: _,
644
646
  tooltip: R,
645
- name: w,
646
- required: S = !1,
647
- requiredIndicator: T,
648
- loading: L,
647
+ name: S,
648
+ required: T = !1,
649
+ requiredIndicator: E,
650
+ loading: k,
649
651
  menuLoading: x,
650
- formControl: M,
651
- description: F,
652
+ formControl: z,
653
+ description: M,
652
654
  helperText: i,
653
655
  placeholder: l,
654
656
  search: o = !1,
655
657
  showSubtitleInTrigger: u = !1,
656
- subtitleLayout: k = "inline",
658
+ subtitleLayout: L = "inline",
657
659
  clearable: pe = !1,
658
660
  size: $ = "large",
659
661
  fullWidth: fe = !1,
660
662
  width: O,
661
- minWidth: te,
662
- id: re,
663
- "aria-label": q,
664
- "aria-labelledby": he
663
+ minWidth: ee,
664
+ menuAlign: te = "start",
665
+ id: F,
666
+ "aria-label": he,
667
+ "aria-labelledby": Re
665
668
  }) => {
666
- const { controlId: ge, labelId: me, descriptionId: ne, hintId: V, helperTextId: X } = st({
667
- id: re,
669
+ const { controlId: ge, labelId: re, descriptionId: q, hintId: ne, helperTextId: V } = dt({
670
+ id: F,
668
671
  label: m,
669
- description: F,
670
- hint: y,
672
+ description: M,
673
+ hint: w,
671
674
  helperText: !0
672
- }), [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);
673
- Oe(() => {
674
- s.current !== r && (s.current = r, p(r));
675
+ }), [N, f] = A(!1), [v, P] = A(r), X = g ?? v, W = e.find((n) => n.id === X), me = pe && X !== void 0 && X !== "" && !d, xe = u && !o && !!(W != null && W.subtitle), s = `Clear ${m ?? l ?? "selection"}`, ie = h(r);
676
+ ze(() => {
677
+ ie.current !== r && (ie.current = r, P(r));
675
678
  }, [r]);
676
- 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(() => {
679
+ const [_e, Y] = A(""), [et, Fe] = A(!1), [tt, ke] = A(!1), Le = h(null), ve = h(null), G = h(null), [p, Pe] = A(null), be = h(!0), H = Oe(() => {
677
680
  const n = ve.current, c = n instanceof HTMLButtonElement ? n : (n == null ? void 0 : n.querySelector("input")) ?? null;
678
681
  if (!(!c || c === Te())) {
679
682
  if (!o) {
@@ -682,56 +685,57 @@ const ar = ({
682
685
  }
683
686
  be.current = !1, c.focus(), Te() !== c && (be.current = !0);
684
687
  }
685
- }, [o]), Me = ke(
688
+ }, [o]), We = Oe(
686
689
  (n) => {
687
690
  var c;
688
- n.stopPropagation(), p(void 0), (c = I.current) == null || c.call(I, Le.current), a == null || a(void 0), H();
691
+ n.stopPropagation(), P(void 0), (c = I.current) == null || c.call(I, $e.current), a == null || a(void 0), H();
689
692
  },
690
693
  [a, H]
691
- ), j = ke(() => {
694
+ ), j = Oe(() => {
692
695
  const n = ve.current;
693
- n && ze(
694
- mt(G.current, {
696
+ n && Pe(
697
+ vt(G.current, {
695
698
  triggerRect: n.getBoundingClientRect(),
696
699
  preset: "standard",
697
- minWidth: te,
700
+ minWidth: ee,
701
+ align: te === "end" ? "right" : "left",
698
702
  viewportWidth: window.innerWidth,
699
703
  viewportHeight: window.innerHeight
700
704
  })
701
705
  );
702
- }, [te]);
703
- Oe(() => {
704
- if (!E) {
705
- ze(null), Ae(!1);
706
+ }, [ee, te]);
707
+ ze(() => {
708
+ if (!N) {
709
+ Pe(null), Fe(!1);
706
710
  return;
707
711
  }
708
712
  j();
709
- const n = (Z) => {
710
- var oe, le, We;
711
- const A = Z.composedPath(), U = _e.current, B = G.current, Se = !!U && A.includes(U), Pe = !!B && A.includes(B);
712
- !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));
713
- }, c = gt(() => {
714
- N(!1), o && Q(""), H();
715
- }), J = () => j();
713
+ const n = (B) => {
714
+ var oe, le, je;
715
+ const D = B.composedPath(), Z = Le.current, U = G.current, Se = !!Z && D.includes(Z), He = !!U && D.includes(U);
716
+ !Se && !He && (f(!1), o && Y(""), (oe = G.current) != null && oe.contains(Te()) && H(), (le = Le.current) != null && le.contains(Te()) || (je = K.current) == null || je.call(K));
717
+ }, c = xt(() => {
718
+ f(!1), o && Y(""), H();
719
+ }), Q = () => j();
716
720
  let ae = 0, ye = "";
717
721
  const we = () => {
718
- const Z = ve.current;
719
- if (Z) {
720
- const A = Z.getBoundingClientRect();
721
- if (xt(A, window.innerWidth, window.innerHeight)) {
722
- N(!1), o && Q("");
722
+ const B = ve.current;
723
+ if (B) {
724
+ const D = B.getBoundingClientRect();
725
+ if (bt(D, window.innerWidth, window.innerHeight)) {
726
+ f(!1), o && Y("");
723
727
  return;
724
728
  }
725
- const U = vt(A);
726
- U !== ye && (ye = U, j());
729
+ const Z = yt(D);
730
+ Z !== ye && (ye = Z, j());
727
731
  }
728
732
  ae = requestAnimationFrame(we);
729
733
  };
730
- return ae = requestAnimationFrame(we), document.addEventListener("mousedown", n), window.addEventListener("scroll", J, !0), window.addEventListener("resize", J), () => {
731
- cancelAnimationFrame(ae), document.removeEventListener("mousedown", n), c(), window.removeEventListener("scroll", J, !0), window.removeEventListener("resize", J);
734
+ return ae = requestAnimationFrame(we), document.addEventListener("mousedown", n), window.addEventListener("scroll", Q, !0), window.addEventListener("resize", Q), () => {
735
+ cancelAnimationFrame(ae), document.removeEventListener("mousedown", n), c(), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q);
732
736
  };
733
- }, [E, o, j, H]), nt(() => {
734
- if (!E)
737
+ }, [N, o, j, H]), at(() => {
738
+ if (!N)
735
739
  return;
736
740
  j();
737
741
  const n = G.current;
@@ -739,157 +743,157 @@ const ar = ({
739
743
  return;
740
744
  const c = new ResizeObserver(() => j());
741
745
  return c.observe(n), () => c.disconnect();
742
- }, [E, j]);
743
- const I = h(void 0), K = h(void 0), Le = h(""), et = (n) => {
746
+ }, [N, j]);
747
+ const I = h(void 0), K = h(void 0), $e = h(""), rt = (n) => {
744
748
  var c;
745
- 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();
746
- }, Fe = () => {
747
- N(!1), o && Q(""), H();
748
- }, tt = () => {
749
- Re(!0);
750
- const n = De(G.current)[0];
749
+ P(n == null ? void 0 : n.id), (c = I.current) == null || c.call(I, (n == null ? void 0 : n.id) ?? $e.current), f(!1), o && Y(""), a == null || a(n == null ? void 0 : n.id), H();
750
+ }, Ge = () => {
751
+ f(!1), o && Y(""), H();
752
+ }, nt = () => {
753
+ ke(!0);
754
+ const n = Me(G.current)[0];
751
755
  if (n) {
752
756
  n.focus();
753
757
  return;
754
758
  }
755
- Ae(!0), N(!0);
756
- }, rt = o && Y ? e.filter((n) => Rt(n, Y)) : e;
759
+ Fe(!0), f(!0);
760
+ }, it = o && _e ? e.filter((n) => Lt(n, _e)) : e;
757
761
  return /* @__PURE__ */ t(
758
- lt,
762
+ ct,
759
763
  {
760
764
  fullWidth: fe,
761
765
  label: m,
762
- hint: y,
766
+ hint: w,
763
767
  rightSideContent: _,
764
768
  tooltip: R,
765
- name: w,
766
- required: S,
767
- requiredIndicator: T,
768
- loading: L,
769
- formControl: M,
770
- description: F,
769
+ name: S,
770
+ required: T,
771
+ requiredIndicator: E,
772
+ loading: k,
773
+ formControl: z,
774
+ description: M,
771
775
  controlId: ge,
772
- labelId: me,
773
- descriptionId: ne,
774
- hintId: V,
776
+ labelId: re,
777
+ descriptionId: q,
778
+ hintId: ne,
775
779
  loadingComponent: O === void 0 ? /* @__PURE__ */ t(
776
- He,
780
+ Ke,
777
781
  {
778
782
  heightClass: ue[$],
779
783
  helperText: !!i,
780
784
  helperTextMarginTop: !0
781
785
  }
782
- ) : /* @__PURE__ */ t("div", { style: je(O), children: /* @__PURE__ */ t(
783
- He,
786
+ ) : /* @__PURE__ */ t("div", { style: Be(O), children: /* @__PURE__ */ t(
787
+ Ke,
784
788
  {
785
789
  heightClass: ue[$],
786
790
  helperText: !!i,
787
791
  helperTextMarginTop: !0
788
792
  }
789
793
  ) }),
790
- children: ({ error: n, message: c, onFieldChange: J, onFieldBlur: ae, emptyValue: ye }) => {
791
- I.current = J, K.current = ae, Le.current = ye;
792
- const we = b ?? n, Z = b === !1 ? void 0 : c, A = `${X}-error`, U = [
794
+ children: ({ error: n, message: c, onFieldChange: Q, onFieldBlur: ae, emptyValue: ye }) => {
795
+ I.current = Q, K.current = ae, $e.current = ye;
796
+ const we = y ?? n, B = y === !1 ? void 0 : c, D = `${V}-error`, Z = [
797
+ q,
793
798
  ne,
794
- V,
795
- i ? X : void 0,
796
- Z ? A : void 0
799
+ i ? V : void 0,
800
+ B ? D : void 0
797
801
  ].filter(Boolean).join(" ") || void 0;
798
- return /* @__PURE__ */ v(Ne, { children: [
799
- /* @__PURE__ */ v(
802
+ return /* @__PURE__ */ b(Ne, { children: [
803
+ /* @__PURE__ */ b(
800
804
  "div",
801
805
  {
802
- ref: _e,
806
+ ref: Le,
803
807
  className: "relative w-full",
804
- style: je(O),
805
- onBlur: (B) => {
808
+ style: Be(O),
809
+ onBlur: (U) => {
806
810
  var oe, le;
807
- const Se = B.relatedTarget;
808
- B.currentTarget.contains(Se) || ((oe = G.current) == null ? void 0 : oe.contains(Se)) === !0 || (le = K.current) == null || le.call(K);
811
+ const Se = U.relatedTarget;
812
+ U.currentTarget.contains(Se) || ((oe = G.current) == null ? void 0 : oe.contains(Se)) === !0 || (le = K.current) == null || le.call(K);
809
813
  },
810
814
  children: [
811
- xe && !o && /* @__PURE__ */ t(
815
+ me && !o && /* @__PURE__ */ t(
812
816
  "button",
813
817
  {
814
818
  type: "button",
815
- onClick: Me,
816
- "aria-label": ie,
817
- className: `absolute ${Ce ? $t[$] : "top-1/2 -translate-y-1/2"} z-10 flex items-center
819
+ onClick: We,
820
+ "aria-label": s,
821
+ className: `absolute ${xe ? At[$] : "top-1/2 -translate-y-1/2"} z-10 flex items-center
818
822
  justify-center rounded-full text-[var(--malachite-text-placeholder)]
819
823
  hover:text-[var(--malachite-text-primary)] transition-colors
820
- focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:outline-offset-2 ${kt[$]}`,
821
- children: /* @__PURE__ */ t(Be, { size: 13 })
824
+ focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:outline-offset-2 ${Dt[$]}`,
825
+ children: /* @__PURE__ */ t(Ve, { size: 13 })
822
826
  }
823
827
  ),
824
828
  /* @__PURE__ */ t(
825
- Xe,
829
+ Qe,
826
830
  {
827
- hasClear: xe,
828
- onClear: Me,
829
- clearLabel: ie,
831
+ hasClear: me,
832
+ onClear: We,
833
+ clearLabel: s,
830
834
  ref: ve,
831
- isOpen: E,
832
- onClick: (B) => {
833
- d || (Re(!!B), N(!E));
835
+ isOpen: N,
836
+ onClick: (U) => {
837
+ d || (ke(!!U), f(!N));
834
838
  },
835
- selectedItem: D,
839
+ selectedItem: W,
836
840
  disabled: d,
837
841
  error: we,
838
842
  tone: C,
839
843
  placeholder: l,
840
844
  search: o,
841
845
  showSubtitleInTrigger: u,
842
- searchQuery: Y,
843
- onSearchChange: Q,
846
+ searchQuery: _e,
847
+ onSearchChange: Y,
844
848
  onFocusOpen: () => {
845
849
  if (!be.current) {
846
850
  be.current = !0;
847
851
  return;
848
852
  }
849
- N(!0);
853
+ f(!0);
850
854
  },
851
855
  onArrowDown: () => {
852
- d || tt();
856
+ d || nt();
853
857
  },
854
858
  onTabAway: () => {
855
- E && Fe();
859
+ N && Ge();
856
860
  },
857
861
  size: $,
858
862
  controlId: ge,
859
- hasCallerId: !!re,
860
- labelId: me,
861
- describedBy: U,
862
- required: S,
863
- ariaLabel: q,
864
- ariaLabelledBy: he
863
+ hasCallerId: !!F,
864
+ labelId: re,
865
+ describedBy: Z,
866
+ required: T,
867
+ ariaLabel: he,
868
+ ariaLabelledBy: Re
865
869
  }
866
870
  ),
867
- E && ot(
871
+ N && st(
868
872
  /* @__PURE__ */ t(
869
- Ye,
873
+ Je,
870
874
  {
871
875
  ref: G,
872
876
  style: {
873
877
  position: "fixed",
874
- top: (f == null ? void 0 : f.top) ?? 0,
875
- left: (f == null ? void 0 : f.left) ?? 0,
876
- width: f == null ? void 0 : f.width,
877
- maxHeight: f == null ? void 0 : f.maxHeight,
878
- visibility: f ? "visible" : "hidden",
879
- opacity: f ? 1 : 0
878
+ top: (p == null ? void 0 : p.top) ?? 0,
879
+ left: (p == null ? void 0 : p.left) ?? 0,
880
+ width: p == null ? void 0 : p.width,
881
+ maxHeight: p == null ? void 0 : p.maxHeight,
882
+ visibility: p ? "visible" : "hidden",
883
+ opacity: p ? 1 : 0
880
884
  },
881
- items: rt,
882
- onItemSelected: et,
883
- selectedItem: D,
885
+ items: it,
886
+ onItemSelected: rt,
887
+ selectedItem: W,
884
888
  menuLoading: x,
885
889
  emptyMessage: e.length === 0 ? "No options available" : "No results found",
886
- subtitleLayout: k,
890
+ subtitleLayout: L,
887
891
  size: $,
888
- autoFocus: !o || Qe,
889
- positioned: f !== null,
890
- onDismiss: Fe,
891
- keyboardNavigation: Je,
892
- onKeyboardNavigation: () => Re(!0)
892
+ autoFocus: !o || et,
893
+ positioned: p !== null,
894
+ onDismiss: Ge,
895
+ keyboardNavigation: tt,
896
+ onKeyboardNavigation: () => ke(!0)
893
897
  }
894
898
  ),
895
899
  document.body
@@ -900,18 +904,18 @@ const ar = ({
900
904
  i && /* @__PURE__ */ t(
901
905
  "div",
902
906
  {
903
- id: X,
907
+ id: V,
904
908
  className: "mt-1 text-[length:var(--malachite-font-size-small,13px)] text-left pl-2 text-[var(--malachite-text-dimmed,rgb(161,161,161))]",
905
909
  children: i
906
910
  }
907
911
  ),
908
- /* @__PURE__ */ t(ct, { id: A, message: Z, spaced: !0 })
912
+ /* @__PURE__ */ t(ut, { id: D, message: B, spaced: !0 })
909
913
  ] });
910
914
  }
911
915
  }
912
916
  );
913
917
  };
914
918
  export {
915
- ar as Dropdown
919
+ cr as Dropdown
916
920
  };
917
921
  //# sourceMappingURL=Dropdown.js.map