beth-clarity 1.1.28 → 1.1.30

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.
@@ -1,47 +1,27 @@
1
1
  import { jsx as a, jsxs as g, Fragment as ct } from "react/jsx-runtime";
2
- import L, { useState as B, useRef as z, useEffect as P, forwardRef as dt, isValidElement as Q, createContext as Z, cloneElement as G, useContext as K, useMemo as oe, useCallback as de, useLayoutEffect as mt, Children as ut } from "react";
3
- import pt from "react-dom";
4
- const At = ({
5
- variant: e = "primary",
6
- product: t,
7
- tone: s,
8
- size: r = "medium",
9
- bgColor: l,
10
- textColor: o,
11
- children: d,
12
- className: c = "",
13
- rounded: n = !1,
14
- outlined: i = !1,
15
- ...m
16
- }) => {
17
- const v = "clarity-badge", p = !!l, f = t && s && !p;
18
- let u = "";
19
- p ? u = `${v}--custom-bg` : f ? u = `${v}--custom` : u = `${v}--${e}`;
2
+ import T, { useState as B, useRef as z, useEffect as P, forwardRef as dt, isValidElement as Q, createContext as Z, cloneElement as G, useContext as K, useMemo as oe, useCallback as de, useLayoutEffect as ut, Children as mt } from "react";
3
+ import ft from "react-dom";
4
+ const Vt = ({ variant: e = "primary", product: t, tone: s, size: n = "medium", bgColor: l, textColor: r, children: d, className: c = "", rounded: i = !1, outlined: o = !1, ...u }) => {
5
+ const v = "clarity-badge", f = !!l, p = t && s && !f;
6
+ let m = "";
7
+ f ? m = `${v}--custom-bg` : p ? m = `${v}--custom` : m = `${v}--${e}`;
20
8
  const h = [
21
9
  v,
22
- u,
23
- `${v}--${r}`,
24
- n ? `${v}--rounded` : "",
25
- i ? `${v}--outlined` : "",
10
+ m,
11
+ `${v}--${n}`,
12
+ i ? `${v}--rounded` : "",
13
+ o ? `${v}--outlined` : "",
26
14
  c
27
15
  ].filter(Boolean).join(" "), y = {};
28
- p && (y.backgroundColor = l, o && (y.color = o));
29
- const b = f && t && s ? {
16
+ f && (y.backgroundColor = l, r && (y.color = r));
17
+ const b = p && t && s ? {
30
18
  "--custom-bg-color": `var(--clarity-${t}-${s})`,
31
19
  "--custom-text-color": s && parseInt(s) >= 500 ? "white" : `var(--clarity-${t}-800)`
32
20
  } : {};
33
- return /* @__PURE__ */ a(
34
- "span",
35
- {
36
- className: h,
37
- style: {
38
- ...y,
39
- ...b
40
- },
41
- ...m,
42
- children: d
43
- }
44
- );
21
+ return a("span", { className: h, style: {
22
+ ...y,
23
+ ...b
24
+ }, ...u, children: d });
45
25
  }, Ne = {
46
26
  fontFamily: {
47
27
  sans: ["Inter", "system-ui", "sans-serif"],
@@ -69,7 +49,7 @@ const At = ({
69
49
  wide: "0.025em",
70
50
  wider: "0.05em"
71
51
  }
72
- }, pe = (e) => {
52
+ }, fe = (e) => {
73
53
  if (e) {
74
54
  if (e.startsWith("#") || e.startsWith("rgb") || e.startsWith("hsl") || e === "transparent")
75
55
  return e;
@@ -79,737 +59,298 @@ const At = ({
79
59
  }
80
60
  return `var(--clarity-${e})`;
81
61
  }
82
- }, X = (e) => e !== void 0 ? `var(--clarity-spacing-${e})` : void 0, ft = L.forwardRef(
83
- (e, t) => {
84
- const {
85
- children: s,
86
- className: r,
87
- display: l,
88
- position: o,
89
- flexDirection: d,
90
- alignItems: c,
91
- justifyContent: n,
92
- gap: i,
93
- m,
94
- mt: v,
95
- mr: p,
96
- mb: f,
97
- ml: u,
98
- mx: h,
99
- my: y,
100
- p: b,
101
- pt: C,
102
- pr: T,
103
- pb: x,
104
- pl: _,
105
- px: $,
106
- py: R,
107
- bg: k,
108
- color: j,
109
- fontSize: S,
110
- fontWeight: I,
111
- textAlign: E,
112
- lineHeight: w,
113
- letterSpacing: H,
114
- borderRadius: W,
115
- borderTopLeftRadius: V,
116
- borderTopRightRadius: U,
117
- borderBottomLeftRadius: q,
118
- borderBottomRightRadius: M,
119
- boxShadow: A,
120
- borderWidth: J,
121
- borderTopWidth: se,
122
- borderRightWidth: ae,
123
- borderBottomWidth: re,
124
- borderLeftWidth: N,
125
- borderXWidth: O,
126
- borderYWidth: F,
127
- borderColor: D,
128
- overflow: Y,
129
- ...lt
130
- } = e, ie = (ue, be) => {
131
- if (ue === void 0 || ue === 0) return;
132
- const it = `var(--clarity-border-width-${ue})`, ot = be ? pe(be) : "currentColor";
133
- return `${it} solid ${ot}`;
134
- }, nt = L.useMemo(() => ({
135
- display: l,
136
- position: o,
137
- flexDirection: d,
138
- alignItems: c,
139
- justifyContent: n,
140
- gap: X(i),
141
- marginTop: X(v ?? y ?? m),
142
- marginRight: X(p ?? h ?? m),
143
- marginBottom: X(f ?? y ?? m),
144
- marginLeft: X(u ?? h ?? m),
145
- paddingTop: X(C ?? R ?? b),
146
- paddingRight: X(T ?? $ ?? b),
147
- paddingBottom: X(x ?? R ?? b),
148
- paddingLeft: X(_ ?? $ ?? b),
149
- backgroundColor: k ? pe(k) : void 0,
150
- color: j ? pe(j) : void 0,
151
- fontSize: S ? `var(--clarity-font-size-${S})` : void 0,
152
- fontWeight: I ? Ne.fontWeight[I] : void 0,
153
- textAlign: E,
154
- lineHeight: w,
155
- letterSpacing: H ? Ne.letterSpacing[H] : void 0,
156
- borderRadius: W ? `var(--clarity-radius-${W})` : void 0,
157
- borderTopLeftRadius: V ? `var(--clarity-radius-${V})` : void 0,
158
- borderTopRightRadius: U ? `var(--clarity-radius-${U})` : void 0,
159
- borderBottomLeftRadius: q ? `var(--clarity-radius-${q})` : void 0,
160
- borderBottomRightRadius: M ? `var(--clarity-radius-${M})` : void 0,
161
- boxShadow: A ? `var(--clarity-shadow-${A})` : void 0,
162
- border: ie(J, D),
163
- borderTop: ie(se ?? F),
164
- borderRight: ie(ae ?? O),
165
- borderBottom: ie(re ?? F),
166
- borderLeft: ie(N ?? O),
167
- overflow: Y
168
- }), [
169
- l,
170
- o,
171
- d,
172
- c,
173
- n,
174
- i,
175
- m,
176
- v,
177
- p,
178
- f,
179
- u,
180
- h,
181
- y,
182
- b,
183
- C,
184
- T,
185
- x,
186
- _,
187
- $,
188
- R,
189
- k,
190
- j,
191
- S,
192
- I,
193
- E,
194
- w,
195
- H,
196
- W,
197
- V,
198
- U,
199
- q,
200
- M,
201
- A,
202
- J,
203
- se,
204
- ae,
205
- re,
206
- N,
207
- O,
208
- F,
209
- D,
210
- Y
211
- ]);
212
- return /* @__PURE__ */ a("div", { ref: t, className: `clarity-box ${r || ""}`.trim(), style: nt, ...lt, children: s });
213
- }
214
- );
215
- ft.displayName = "Box";
216
- const Ht = ({
217
- variant: e = "primary",
218
- size: t = "medium",
219
- disabled: s = !1,
220
- loading: r = !1,
221
- children: l,
222
- onClick: o,
223
- type: d = "button",
224
- className: c = "",
225
- title: n,
226
- customColor: i,
227
- customColorHover: m,
228
- ...v
229
- }) => {
230
- const p = "clarity-button", f = [
62
+ }, X = (e) => e !== void 0 ? `var(--clarity-spacing-${e})` : void 0, pt = T.forwardRef((e, t) => {
63
+ const { children: s, className: n, display: l, position: r, flexDirection: d, alignItems: c, justifyContent: i, gap: o, m: u, mt: v, mr: f, mb: p, ml: m, mx: h, my: y, p: b, pt: C, pr: j, pb: x, pl: _, px: $, py: L, bg: k, color: E, fontSize: R, fontWeight: I, textAlign: S, lineHeight: w, letterSpacing: A, borderRadius: W, borderTopLeftRadius: H, borderTopRightRadius: U, borderBottomLeftRadius: q, borderBottomRightRadius: M, boxShadow: V, borderWidth: J, borderTopWidth: se, borderRightWidth: ae, borderBottomWidth: ne, borderLeftWidth: N, borderXWidth: O, borderYWidth: F, borderColor: D, overflow: Y, ...lt } = e, ie = (me, be) => {
64
+ if (me === void 0 || me === 0)
65
+ return;
66
+ const it = `var(--clarity-border-width-${me})`, ot = be ? fe(be) : "currentColor";
67
+ return `${it} solid ${ot}`;
68
+ }, rt = T.useMemo(() => ({
69
+ display: l,
70
+ position: r,
71
+ flexDirection: d,
72
+ alignItems: c,
73
+ justifyContent: i,
74
+ gap: X(o),
75
+ marginTop: X(v ?? y ?? u),
76
+ marginRight: X(f ?? h ?? u),
77
+ marginBottom: X(p ?? y ?? u),
78
+ marginLeft: X(m ?? h ?? u),
79
+ paddingTop: X(C ?? L ?? b),
80
+ paddingRight: X(j ?? $ ?? b),
81
+ paddingBottom: X(x ?? L ?? b),
82
+ paddingLeft: X(_ ?? $ ?? b),
83
+ backgroundColor: k ? fe(k) : void 0,
84
+ color: E ? fe(E) : void 0,
85
+ fontSize: R ? `var(--clarity-font-size-${R})` : void 0,
86
+ fontWeight: I ? Ne.fontWeight[I] : void 0,
87
+ textAlign: S,
88
+ lineHeight: w,
89
+ letterSpacing: A ? Ne.letterSpacing[A] : void 0,
90
+ borderRadius: W ? `var(--clarity-radius-${W})` : void 0,
91
+ borderTopLeftRadius: H ? `var(--clarity-radius-${H})` : void 0,
92
+ borderTopRightRadius: U ? `var(--clarity-radius-${U})` : void 0,
93
+ borderBottomLeftRadius: q ? `var(--clarity-radius-${q})` : void 0,
94
+ borderBottomRightRadius: M ? `var(--clarity-radius-${M})` : void 0,
95
+ boxShadow: V ? `var(--clarity-shadow-${V})` : void 0,
96
+ border: ie(J, D),
97
+ borderTop: ie(se ?? F),
98
+ borderRight: ie(ae ?? O),
99
+ borderBottom: ie(ne ?? F),
100
+ borderLeft: ie(N ?? O),
101
+ overflow: Y
102
+ }), [
103
+ l,
104
+ r,
105
+ d,
106
+ c,
107
+ i,
108
+ o,
109
+ u,
110
+ v,
111
+ f,
231
112
  p,
232
- !i && `${p}--${e}`,
233
- `${p}--${t}`,
234
- r && `${p}--loading`,
235
- s && `${p}--disabled`,
236
- c
237
- ].filter(Boolean).join(" "), u = {};
238
- return i && (u["--button-bg"] = i, u["--button-hover-bg"] = m || `${i}E6`, u["--button-border"] = i, u["--button-hover-border"] = m || `${i}E6`, u["--button-fg"] = "#fff"), /* @__PURE__ */ g(
239
- "button",
240
- {
241
- className: f,
242
- style: u,
243
- disabled: s || r,
244
- onClick: o,
245
- type: d,
246
- title: n,
247
- ...v,
248
- children: [
249
- r && /* @__PURE__ */ a("div", { className: `${p}__spinner` }),
250
- l
251
- ]
252
- }
253
- );
254
- }, Vt = ({
255
- variant: e = "primary",
256
- size: t = "medium",
257
- filled: s = !0,
258
- items: r,
259
- value: l,
260
- multiple: o = !1,
261
- disabled: d = !1,
262
- onChange: c,
263
- className: n = "",
264
- ...i
265
- }) => {
266
- const m = "clarity-button-group", v = `${m}--${e}`, p = [
267
113
  m,
114
+ h,
115
+ y,
116
+ b,
117
+ C,
118
+ j,
119
+ x,
120
+ _,
121
+ $,
122
+ L,
123
+ k,
124
+ E,
125
+ R,
126
+ I,
127
+ S,
128
+ w,
129
+ A,
130
+ W,
131
+ H,
132
+ U,
133
+ q,
134
+ M,
135
+ V,
136
+ J,
137
+ se,
138
+ ae,
139
+ ne,
140
+ N,
141
+ O,
142
+ F,
143
+ D,
144
+ Y
145
+ ]);
146
+ return a("div", { ref: t, className: `clarity-box ${n || ""}`.trim(), style: rt, ...lt, children: s });
147
+ });
148
+ pt.displayName = "Box";
149
+ const At = ({ variant: e = "primary", size: t = "medium", disabled: s = !1, loading: n = !1, children: l, onClick: r, type: d = "button", className: c = "", title: i, customColor: o, customColorHover: u, ...v }) => {
150
+ const f = "clarity-button", p = [
151
+ f,
152
+ !o && `${f}--${e}`,
153
+ `${f}--${t}`,
154
+ n && `${f}--loading`,
155
+ s && `${f}--disabled`,
156
+ c
157
+ ].filter(Boolean).join(" "), m = {};
158
+ return o && (m["--button-bg"] = o, m["--button-hover-bg"] = u || `${o}E6`, m["--button-border"] = o, m["--button-hover-border"] = u || `${o}E6`, m["--button-fg"] = "#fff"), g("button", { className: p, style: m, disabled: s || n, onClick: r, type: d, title: i, ...v, children: [n && a("div", { className: `${f}__spinner` }), l] });
159
+ }, Ht = ({ variant: e = "primary", size: t = "medium", filled: s = !0, items: n, value: l, multiple: r = !1, disabled: d = !1, onChange: c, className: i = "", ...o }) => {
160
+ const u = "clarity-button-group", v = `${u}--${e}`, f = [
161
+ u,
268
162
  v,
269
- `${m}--${t}`,
270
- !s && `${m}--outline`,
271
- d && `${m}--disabled`,
272
- n
273
- ].filter(Boolean).join(" "), f = (h) => {
274
- if (d || !c) return;
275
- const y = r.find((b) => b.id === h);
163
+ `${u}--${t}`,
164
+ !s && `${u}--outline`,
165
+ d && `${u}--disabled`,
166
+ i
167
+ ].filter(Boolean).join(" "), p = (h) => {
168
+ if (d || !c)
169
+ return;
170
+ const y = n.find((b) => b.id === h);
276
171
  if (!(y != null && y.disabled))
277
- if (o) {
278
- const b = Array.isArray(l) ? l : [], C = b.includes(h) ? b.filter((T) => T !== h) : [...b, h];
172
+ if (r) {
173
+ const b = Array.isArray(l) ? l : [], C = b.includes(h) ? b.filter((j) => j !== h) : [...b, h];
279
174
  c(C);
280
175
  } else
281
176
  c(h);
282
- }, u = (h) => o ? Array.isArray(l) && l.includes(h) : l === h;
283
- return /* @__PURE__ */ a(
284
- "div",
285
- {
286
- className: p,
287
- role: "group",
288
- ...i,
289
- children: r.map((h, y) => {
290
- const b = u(h.id), C = [
291
- `${m}__item`,
292
- b && `${m}__item--selected`,
293
- h.disabled && `${m}__item--disabled`,
294
- y === 0 && `${m}__item--first`,
295
- y === r.length - 1 && `${m}__item--last`
296
- ].filter(Boolean).join(" ");
297
- return /* @__PURE__ */ g(
298
- "button",
299
- {
300
- className: C,
301
- onClick: () => f(h.id),
302
- disabled: d || h.disabled,
303
- type: "button",
304
- "aria-pressed": b,
305
- children: [
306
- h.icon && /* @__PURE__ */ a("span", { className: `${m}__item-icon`, children: h.icon }),
307
- /* @__PURE__ */ a("span", { className: `${m}__item-label`, children: h.label })
308
- ]
309
- },
310
- h.id
311
- );
312
- })
313
- }
314
- );
315
- }, ht = L.forwardRef(({
316
- variant: e,
317
- size: t = "medium",
318
- label: s,
319
- helperText: r,
320
- error: l = !1,
321
- errorMessage: o,
322
- startIcon: d,
323
- endIcon: c,
324
- className: n = "",
325
- disabled: i = !1,
326
- value: m,
327
- defaultValue: v,
328
- onFocus: p,
329
- onBlur: f,
330
- ...u
331
- }, h) => {
332
- const [y, b] = B(!1), [C, T] = B(!1), x = z(null);
333
- L.useImperativeHandle(h, () => x.current), P(() => {
177
+ }, m = (h) => r ? Array.isArray(l) && l.includes(h) : l === h;
178
+ return a("div", { className: f, role: "group", ...o, children: n.map((h, y) => {
179
+ const b = m(h.id), C = [
180
+ `${u}__item`,
181
+ b && `${u}__item--selected`,
182
+ h.disabled && `${u}__item--disabled`,
183
+ y === 0 && `${u}__item--first`,
184
+ y === n.length - 1 && `${u}__item--last`
185
+ ].filter(Boolean).join(" ");
186
+ return g("button", { className: C, onClick: () => p(h.id), disabled: d || h.disabled, type: "button", "aria-pressed": b, children: [h.icon && a("span", { className: `${u}__item-icon`, children: h.icon }), a("span", { className: `${u}__item-label`, children: h.label })] }, h.id);
187
+ }) });
188
+ }, ht = T.forwardRef(({ variant: e, size: t = "medium", label: s, helperText: n, error: l = !1, errorMessage: r, startIcon: d, endIcon: c, className: i = "", disabled: o = !1, value: u, defaultValue: v, onFocus: f, onBlur: p, ...m }, h) => {
189
+ const [y, b] = B(!1), [C, j] = B(!1), x = z(null);
190
+ T.useImperativeHandle(h, () => x.current), P(() => {
334
191
  const k = x.current;
335
- k && T(k.value.length > 0);
336
- }, [m, v]);
192
+ k && j(k.value.length > 0);
193
+ }, [u, v]);
337
194
  const _ = (k) => {
338
- b(!0), p == null || p(k);
195
+ b(!0), f == null || f(k);
339
196
  }, $ = (k) => {
340
- b(!1), T(k.target.value.length > 0), f == null || f(k);
341
- }, R = [
197
+ b(!1), j(k.target.value.length > 0), p == null || p(k);
198
+ }, L = [
342
199
  "clarity-input",
343
200
  "clarity-input--outlined",
344
201
  `clarity-input--${t}`,
345
202
  e && `clarity-input--${e}`,
346
203
  l && "clarity-input--error",
347
- i && "clarity-input--disabled",
204
+ o && "clarity-input--disabled",
348
205
  y && "clarity-input--focused",
349
206
  C && "clarity-input--has-value",
350
207
  d && "clarity-input--with-start-icon",
351
208
  c && "clarity-input--with-end-icon",
352
- n
209
+ i
353
210
  ].filter(Boolean).join(" ");
354
- return /* @__PURE__ */ g("div", { className: "clarity-input-wrapper", children: [
355
- /* @__PURE__ */ g("div", { className: R, children: [
356
- d && /* @__PURE__ */ a("div", { className: "clarity-input__start-icon", children: d }),
357
- /* @__PURE__ */ g("div", { className: "clarity-input__field", children: [
358
- /* @__PURE__ */ a(
359
- "input",
360
- {
361
- ref: x,
362
- className: "clarity-input__element",
363
- disabled: i,
364
- value: m,
365
- defaultValue: v,
366
- onFocus: _,
367
- onBlur: $,
368
- ...u
369
- }
370
- ),
371
- s && /* @__PURE__ */ a("label", { className: "clarity-input__label", children: s })
372
- ] }),
373
- c && /* @__PURE__ */ a("div", { className: "clarity-input__end-icon", children: c })
374
- ] }),
375
- (r || l && o) && /* @__PURE__ */ a("div", { className: "clarity-input__helper-text", children: l && o ? o : r })
376
- ] });
211
+ return g("div", { className: "clarity-input-wrapper", children: [g("div", { className: L, children: [d && a("div", { className: "clarity-input__start-icon", children: d }), g("div", { className: "clarity-input__field", children: [a("input", { ref: x, className: "clarity-input__element", disabled: o, value: u, defaultValue: v, onFocus: _, onBlur: $, ...m }), s && a("label", { className: "clarity-input__label", children: s })] }), c && a("div", { className: "clarity-input__end-icon", children: c })] }), (n || l && r) && a("div", { className: "clarity-input__helper-text", children: l && r ? r : n })] });
377
212
  });
378
213
  ht.displayName = "Input";
379
- const yt = L.forwardRef(({
380
- variant: e,
381
- size: t = "medium",
382
- label: s,
383
- helperText: r,
384
- error: l = !1,
385
- errorMessage: o,
386
- startIcon: d,
387
- endIcon: c,
388
- className: n = "",
389
- disabled: i = !1,
390
- value: m,
391
- defaultValue: v,
392
- onFocus: p,
393
- onBlur: f,
394
- rows: u = 3,
395
- minHeight: h,
396
- maxHeight: y,
397
- resizable: b = !0,
398
- ...C
399
- }, T) => {
400
- const [x, _] = B(!1), [$, R] = B(!1), k = z(null);
401
- L.useImperativeHandle(T, () => k.current), P(() => {
214
+ const yt = T.forwardRef(({ variant: e, size: t = "medium", label: s, helperText: n, error: l = !1, errorMessage: r, startIcon: d, endIcon: c, className: i = "", disabled: o = !1, value: u, defaultValue: v, onFocus: f, onBlur: p, rows: m = 3, minHeight: h, maxHeight: y, resizable: b = !0, ...C }, j) => {
215
+ const [x, _] = B(!1), [$, L] = B(!1), k = z(null);
216
+ T.useImperativeHandle(j, () => k.current), P(() => {
402
217
  const w = k.current;
403
- w && R(w.value.length > 0);
404
- }, [m, v]);
405
- const j = (w) => {
406
- _(!0), p == null || p(w);
407
- }, S = (w) => {
408
- _(!1), R(w.target.value.length > 0), f == null || f(w);
218
+ w && L(w.value.length > 0);
219
+ }, [u, v]);
220
+ const E = (w) => {
221
+ _(!0), f == null || f(w);
222
+ }, R = (w) => {
223
+ _(!1), L(w.target.value.length > 0), p == null || p(w);
409
224
  }, I = [
410
225
  "clarity-textarea",
411
226
  "clarity-textarea--outlined",
412
227
  `clarity-textarea--${t}`,
413
228
  e && `clarity-textarea--${e}`,
414
229
  l && "clarity-textarea--error",
415
- i && "clarity-textarea--disabled",
230
+ o && "clarity-textarea--disabled",
416
231
  x && "clarity-textarea--focused",
417
232
  $ && "clarity-textarea--has-value",
418
233
  d && "clarity-textarea--with-start-icon",
419
234
  c && "clarity-textarea--with-end-icon",
420
- n
421
- ].filter(Boolean).join(" "), E = {
235
+ i
236
+ ].filter(Boolean).join(" "), S = {
422
237
  resize: b ? "vertical" : "none",
423
238
  minHeight: h ? `${h}px` : void 0,
424
239
  maxHeight: y ? `${y}px` : void 0
425
240
  };
426
- return /* @__PURE__ */ g("div", { className: "clarity-textarea-wrapper", children: [
427
- /* @__PURE__ */ g("div", { className: I, children: [
428
- d && /* @__PURE__ */ a("div", { className: "clarity-textarea__start-icon", children: d }),
429
- /* @__PURE__ */ g("div", { className: "clarity-textarea__field", children: [
430
- /* @__PURE__ */ a(
431
- "textarea",
432
- {
433
- ref: k,
434
- className: "clarity-textarea__element",
435
- disabled: i,
436
- value: m,
437
- defaultValue: v,
438
- onFocus: j,
439
- onBlur: S,
440
- rows: u,
441
- style: E,
442
- ...C
443
- }
444
- ),
445
- s && /* @__PURE__ */ a("label", { className: "clarity-textarea__label", children: s })
446
- ] }),
447
- c && /* @__PURE__ */ a("div", { className: "clarity-textarea__end-icon", children: c })
448
- ] }),
449
- (r || l && o) && /* @__PURE__ */ a("div", { className: "clarity-textarea__helper-text", children: l && o ? o : r })
450
- ] });
241
+ return g("div", { className: "clarity-textarea-wrapper", children: [g("div", { className: I, children: [d && a("div", { className: "clarity-textarea__start-icon", children: d }), g("div", { className: "clarity-textarea__field", children: [a("textarea", { ref: k, className: "clarity-textarea__element", disabled: o, value: u, defaultValue: v, onFocus: E, onBlur: R, rows: m, style: S, ...C }), s && a("label", { className: "clarity-textarea__label", children: s })] }), c && a("div", { className: "clarity-textarea__end-icon", children: c })] }), (n || l && r) && a("div", { className: "clarity-textarea__helper-text", children: l && r ? r : n })] });
451
242
  });
452
243
  yt.displayName = "Textarea";
453
- const vt = L.forwardRef(({
454
- variant: e,
455
- size: t = "medium",
456
- label: s,
457
- helperText: r,
458
- error: l = !1,
459
- errorMessage: o,
460
- startIcon: d,
461
- endIcon: c,
462
- className: n = "",
463
- disabled: i = !1,
464
- value: m,
465
- defaultValue: v,
466
- onFocus: p,
467
- onBlur: f,
468
- onChange: u,
469
- options: h,
470
- placeholder: y = "Selecione uma opção",
471
- isClearable: b = !1,
472
- isSearchable: C = !1,
473
- ...T
474
- }, x) => {
475
- const [_, $] = B(!1), [R, k] = B(!1), [j, S] = B(m || v || ""), [I, E] = B(""), w = z(null), H = z(null);
476
- L.useImperativeHandle(x, () => w.current), P(() => {
477
- m !== void 0 && S(m);
478
- }, [m]), P(() => {
244
+ const vt = T.forwardRef(({ variant: e, size: t = "medium", label: s, helperText: n, error: l = !1, errorMessage: r, startIcon: d, endIcon: c, className: i = "", disabled: o = !1, value: u, defaultValue: v, onFocus: f, onBlur: p, onChange: m, options: h, placeholder: y = "Selecione uma opção", isClearable: b = !1, isSearchable: C = !1, ...j }, x) => {
245
+ const [_, $] = B(!1), [L, k] = B(!1), [E, R] = B(u || v || ""), [I, S] = B(""), w = z(null), A = z(null);
246
+ T.useImperativeHandle(x, () => w.current), P(() => {
247
+ u !== void 0 && R(u);
248
+ }, [u]), P(() => {
479
249
  const N = (O) => {
480
- w.current && !w.current.contains(O.target) && ($(!1), k(!1), f == null || f());
250
+ w.current && !w.current.contains(O.target) && ($(!1), k(!1), p == null || p());
481
251
  };
482
252
  return document.addEventListener("mousedown", N), () => document.removeEventListener("mousedown", N);
483
- }, [f]);
484
- const W = C && I ? h.filter(
485
- (N) => N.label.toLowerCase().includes(I.toLowerCase())
486
- ) : h, V = () => {
487
- i || ($(!_), k(!_), _ ? (f == null || f(), C && E("")) : (p == null || p(), C && setTimeout(() => {
253
+ }, [p]);
254
+ const W = C && I ? h.filter((N) => N.label.toLowerCase().includes(I.toLowerCase())) : h, H = () => {
255
+ o || ($(!_), k(!_), _ ? (p == null || p(), C && S("")) : (f == null || f(), C && setTimeout(() => {
488
256
  var N;
489
- (N = H.current) == null || N.focus();
257
+ (N = A.current) == null || N.focus();
490
258
  }, 0)));
491
259
  }, U = (N) => {
492
- N.disabled || (S(N.value), $(!1), k(!1), E(""), u == null || u(N.value), f == null || f());
260
+ N.disabled || (R(N.value), $(!1), k(!1), S(""), m == null || m(N.value), p == null || p());
493
261
  }, q = (N) => {
494
- E(N.target.value);
262
+ S(N.target.value);
495
263
  }, M = (N) => {
496
- N.key === "Escape" ? ($(!1), k(!1), E("")) : N.key === "Enter" && W.length > 0 && W[0] && U(W[0]);
497
- }, A = h.find((N) => N.value === j), J = j !== "" && j !== void 0, se = (N) => {
498
- N.stopPropagation(), S(""), u == null || u("");
499
- }, ae = J || R || y || C && I, re = [
264
+ N.key === "Escape" ? ($(!1), k(!1), S("")) : N.key === "Enter" && W.length > 0 && W[0] && U(W[0]);
265
+ }, V = h.find((N) => N.value === E), J = E !== "" && E !== void 0, se = (N) => {
266
+ N.stopPropagation(), R(""), m == null || m("");
267
+ }, ae = J || L || y || C && I, ne = [
500
268
  "clarity-select",
501
269
  "clarity-select--outlined",
502
270
  `clarity-select--${t}`,
503
271
  e && `clarity-select--${e}`,
504
272
  l && "clarity-select--error",
505
- i && "clarity-select--disabled",
506
- (R || _) && "clarity-select--focused",
273
+ o && "clarity-select--disabled",
274
+ (L || _) && "clarity-select--focused",
507
275
  ae && "clarity-select--label-up",
508
276
  _ && "clarity-select--open",
509
277
  C && "clarity-select--searchable",
510
278
  d && "clarity-select--with-start-icon",
511
279
  (c || b) && "clarity-select--with-end-icon",
512
- n
280
+ i
513
281
  ].filter(Boolean).join(" ");
514
- return /* @__PURE__ */ g("div", { className: "clarity-select-wrapper", children: [
515
- /* @__PURE__ */ g(
516
- "div",
517
- {
518
- ref: w,
519
- className: re,
520
- onClick: C ? void 0 : V,
521
- role: "combobox",
522
- "aria-expanded": _,
523
- "aria-haspopup": "listbox",
524
- tabIndex: i || C ? -1 : 0,
525
- ...T,
526
- children: [
527
- d && /* @__PURE__ */ a("div", { className: "clarity-select__start-icon", children: d }),
528
- /* @__PURE__ */ g("div", { className: "clarity-select__field", children: [
529
- C ? /* @__PURE__ */ a(
530
- "input",
531
- {
532
- ref: H,
533
- type: "text",
534
- className: "clarity-select__search-input",
535
- value: _ ? I : A ? A.label : "",
536
- onChange: q,
537
- onKeyDown: M,
538
- onFocus: () => {
539
- _ || ($(!0), k(!0), p == null || p());
540
- },
541
- placeholder: A ? A.label : y,
542
- disabled: i,
543
- readOnly: !_
544
- }
545
- ) : /* @__PURE__ */ a("div", { className: "clarity-select__display", children: A ? A.label : y }),
546
- s && /* @__PURE__ */ a("label", { className: "clarity-select__label", children: s })
547
- ] }),
548
- b && J && /* @__PURE__ */ a(
549
- "button",
550
- {
551
- type: "button",
552
- className: "clarity-select__clear-button",
553
- onClick: se,
554
- "aria-label": "Limpar seleção",
555
- children: /* @__PURE__ */ a(
556
- "svg",
557
- {
558
- width: "16",
559
- height: "16",
560
- viewBox: "0 0 16 16",
561
- fill: "none",
562
- children: /* @__PURE__ */ a(
563
- "path",
564
- {
565
- d: "M12 4L4 12M4 4L12 12",
566
- stroke: "currentColor",
567
- strokeWidth: "1.5",
568
- strokeLinecap: "round",
569
- strokeLinejoin: "round"
570
- }
571
- )
572
- }
573
- )
574
- }
575
- ),
576
- /* @__PURE__ */ a(
577
- "div",
578
- {
579
- className: "clarity-select__end-icon",
580
- onClick: C ? V : void 0,
581
- children: c || /* @__PURE__ */ a(
582
- "svg",
583
- {
584
- className: "clarity-select__arrow",
585
- width: "16",
586
- height: "16",
587
- viewBox: "0 0 16 16",
588
- fill: "none",
589
- children: /* @__PURE__ */ a(
590
- "path",
591
- {
592
- d: "M4 6L8 10L12 6",
593
- stroke: "currentColor",
594
- strokeWidth: "1.5",
595
- strokeLinecap: "round",
596
- strokeLinejoin: "round"
597
- }
598
- )
599
- }
600
- )
601
- }
602
- ),
603
- _ && /* @__PURE__ */ a("div", { className: "clarity-select__dropdown", children: /* @__PURE__ */ a("ul", { className: "clarity-select__options", role: "listbox", children: W.length > 0 ? W.map((N) => /* @__PURE__ */ a(
604
- "li",
605
- {
606
- className: [
607
- "clarity-select__option",
608
- N.disabled && "clarity-select__option--disabled",
609
- j === N.value && "clarity-select__option--selected"
610
- ].filter(Boolean).join(" "),
611
- onClick: () => U(N),
612
- role: "option",
613
- "aria-selected": j === N.value,
614
- children: N.label
615
- },
616
- N.value
617
- )) : /* @__PURE__ */ a("li", { className: "clarity-select__option clarity-select__option--no-results", children: "Nenhum resultado encontrado" }) }) })
618
- ]
619
- }
620
- ),
621
- (r || l && o) && /* @__PURE__ */ a("div", { className: "clarity-select__helper-text", children: l && o ? o : r })
622
- ] });
282
+ return g("div", { className: "clarity-select-wrapper", children: [g("div", { ref: w, className: ne, onClick: C ? void 0 : H, role: "combobox", "aria-expanded": _, "aria-haspopup": "listbox", tabIndex: o || C ? -1 : 0, ...j, children: [d && a("div", { className: "clarity-select__start-icon", children: d }), g("div", { className: "clarity-select__field", children: [C ? a("input", { ref: A, type: "text", className: "clarity-select__search-input", value: _ ? I : V ? V.label : "", onChange: q, onKeyDown: M, onFocus: () => {
283
+ _ || ($(!0), k(!0), f == null || f());
284
+ }, placeholder: V ? V.label : y, disabled: o, readOnly: !_ }) : a("div", { className: "clarity-select__display", children: V ? V.label : y }), s && a("label", { className: "clarity-select__label", children: s })] }), b && J && a("button", { type: "button", className: "clarity-select__clear-button", onClick: se, "aria-label": "Limpar seleção", children: a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: a("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), a("div", { className: "clarity-select__end-icon", onClick: C ? H : void 0, children: c || a("svg", { className: "clarity-select__arrow", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: a("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _ && a("div", { className: "clarity-select__dropdown", children: a("ul", { className: "clarity-select__options", role: "listbox", children: W.length > 0 ? W.map((N) => a("li", { className: [
285
+ "clarity-select__option",
286
+ N.disabled && "clarity-select__option--disabled",
287
+ E === N.value && "clarity-select__option--selected"
288
+ ].filter(Boolean).join(" "), onClick: () => U(N), role: "option", "aria-selected": E === N.value, children: N.label }, N.value)) : a("li", { className: "clarity-select__option clarity-select__option--no-results", children: "Nenhum resultado encontrado" }) }) })] }), (n || l && r) && a("div", { className: "clarity-select__helper-text", children: l && r ? r : n })] });
623
289
  });
624
290
  vt.displayName = "Select";
625
- const bt = dt(({
626
- options: e = [],
627
- value: t = [],
628
- onChange: s,
629
- placeholder: r = "Selecione opções",
630
- label: l,
631
- helperText: o,
632
- error: d = !1,
633
- errorMessage: c,
634
- disabled: n = !1,
635
- variant: i = "primary",
636
- size: m = "medium",
637
- maxSelectedLabels: v = 3,
638
- selectionLimit: p,
639
- className: f = "",
640
- id: u,
641
- name: h,
642
- required: y = !1,
643
- "data-testid": b,
644
- ...C
645
- }, T) => {
646
- const [x, _] = B(!1), [$, R] = B(""), [k, j] = B(!1), S = z(null), I = z(null), E = z(null), w = (N) => {
647
- S.current = N, T && (typeof T == "function" ? T(N) : T.current = N);
291
+ const bt = dt(({ options: e = [], value: t = [], onChange: s, placeholder: n = "Selecione opções", label: l, helperText: r, error: d = !1, errorMessage: c, disabled: i = !1, variant: o = "primary", size: u = "medium", maxSelectedLabels: v = 3, selectionLimit: f, className: p = "", id: m, name: h, required: y = !1, "data-testid": b, ...C }, j) => {
292
+ const [x, _] = B(!1), [$, L] = B(""), [k, E] = B(!1), R = z(null), I = z(null), S = z(null), w = (N) => {
293
+ R.current = N, j && (typeof j == "function" ? j(N) : j.current = N);
648
294
  };
649
295
  P(() => {
650
296
  const N = (O) => {
651
- S.current && !S.current.contains(O.target) && (_(!1), j(!1), R(""));
297
+ R.current && !R.current.contains(O.target) && (_(!1), E(!1), L(""));
652
298
  };
653
299
  return document.addEventListener("click", N), () => document.removeEventListener("click", N);
654
300
  }, []);
655
- const H = e.filter(
656
- (N) => N.label.toLowerCase().includes($.toLowerCase())
657
- ), W = () => {
658
- n || (_(!x), j(!x), x ? R("") : setTimeout(() => {
301
+ const A = e.filter((N) => N.label.toLowerCase().includes($.toLowerCase())), W = () => {
302
+ i || (_(!x), E(!x), x ? L("") : setTimeout(() => {
659
303
  var N;
660
304
  (N = I.current) == null || N.focus();
661
305
  }, 100));
662
- }, V = (N, O) => {
663
- if (n)
306
+ }, H = (N, O) => {
307
+ if (i)
664
308
  return;
665
309
  O && (O.stopPropagation(), O.preventDefault());
666
310
  const F = t.includes(N);
667
311
  let D;
668
312
  F ? D = t.filter((Y) => Y !== N) : D = [...t, N], s && s(D);
669
313
  }, U = (N, O) => {
670
- if (O.stopPropagation(), n) return;
314
+ if (O.stopPropagation(), i)
315
+ return;
671
316
  const F = t.filter((D) => D !== N);
672
317
  s == null || s(F);
673
318
  }, q = (N) => {
674
- N.stopPropagation(), !n && (s == null || s([]));
319
+ N.stopPropagation(), !i && (s == null || s([]));
675
320
  }, M = (N) => {
676
- R(N.target.value);
677
- }, A = (N) => {
678
- N.key === "Escape" && (_(!1), j(!1), R(""));
321
+ L(N.target.value);
322
+ }, V = (N) => {
323
+ N.key === "Escape" && (_(!1), E(!1), L(""));
679
324
  }, J = k || x || t.length > 0, se = () => {
680
- if (t.length === 0) return null;
681
- const N = t.map(
682
- (D) => e.find((Y) => Y.value === D)
683
- ).filter(Boolean), O = N.slice(0, v), F = N.length - v;
684
- return /* @__PURE__ */ g("div", { className: "clarity-multiselect__chips", children: [
685
- O.map((D) => /* @__PURE__ */ g("div", { className: "clarity-multiselect__chip", children: [
686
- /* @__PURE__ */ a("span", { className: "clarity-multiselect__chip-label", children: D.label }),
687
- !n && /* @__PURE__ */ a(
688
- "button",
689
- {
690
- type: "button",
691
- className: "clarity-multiselect__chip-remove",
692
- onClick: (Y) => U(D.value, Y),
693
- "aria-label": `Remover ${D.label}`,
694
- children: "×"
695
- }
696
- )
697
- ] }, D.value)),
698
- F > 0 && /* @__PURE__ */ g("div", { className: "clarity-multiselect__chip clarity-multiselect__chip--count", children: [
699
- "+",
700
- F,
701
- " mais"
702
- ] })
703
- ] });
325
+ if (t.length === 0)
326
+ return null;
327
+ const N = t.map((D) => e.find((Y) => Y.value === D)).filter(Boolean), O = N.slice(0, v), F = N.length - v;
328
+ return g("div", { className: "clarity-multiselect__chips", children: [O.map((D) => g("div", { className: "clarity-multiselect__chip", children: [a("span", { className: "clarity-multiselect__chip-label", children: D.label }), !i && a("button", { type: "button", className: "clarity-multiselect__chip-remove", onClick: (Y) => U(D.value, Y), "aria-label": `Remover ${D.label}`, children: "×" })] }, D.value)), F > 0 && g("div", { className: "clarity-multiselect__chip clarity-multiselect__chip--count", children: ["+", F, " mais"] })] });
704
329
  }, ae = [
705
330
  "clarity-multiselect-wrapper",
706
- f
707
- ].filter(Boolean).join(" "), re = [
331
+ p
332
+ ].filter(Boolean).join(" "), ne = [
708
333
  "clarity-multiselect",
709
- `clarity-multiselect--${i}`,
710
- `clarity-multiselect--${m}`,
334
+ `clarity-multiselect--${o}`,
335
+ `clarity-multiselect--${u}`,
711
336
  x && "clarity-multiselect--open",
712
337
  k && "clarity-multiselect--focused",
713
338
  J && "clarity-multiselect--label-up",
714
339
  d && "clarity-multiselect--error",
715
- n && "clarity-multiselect--disabled",
340
+ i && "clarity-multiselect--disabled",
716
341
  t.length > 0 && "clarity-multiselect--has-value"
717
342
  ].filter(Boolean).join(" ");
718
- return /* @__PURE__ */ g("div", { className: ae, children: [
719
- /* @__PURE__ */ g(
720
- "div",
721
- {
722
- ref: w,
723
- className: re,
724
- "data-testid": b,
725
- ...C,
726
- children: [
727
- /* @__PURE__ */ g(
728
- "div",
729
- {
730
- className: "clarity-multiselect__field",
731
- onClick: W,
732
- children: [
733
- l && /* @__PURE__ */ g("label", { className: "clarity-multiselect__label", children: [
734
- l,
735
- y && /* @__PURE__ */ a("span", { className: "clarity-multiselect__required", children: "*" })
736
- ] }),
737
- /* @__PURE__ */ a("div", { className: "clarity-multiselect__content", children: t.length > 0 ? se() : /* @__PURE__ */ a("span", { className: "clarity-multiselect__placeholder", children: r }) }),
738
- /* @__PURE__ */ g("div", { className: "clarity-multiselect__icons", children: [
739
- t.length > 0 && !n && /* @__PURE__ */ a(
740
- "button",
741
- {
742
- type: "button",
743
- className: "clarity-multiselect__clear-button",
744
- onClick: q,
745
- "aria-label": "Limpar seleção",
746
- children: "×"
747
- }
748
- ),
749
- /* @__PURE__ */ a("div", { className: "clarity-multiselect__dropdown-icon", children: /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ a(
750
- "path",
751
- {
752
- d: "M4 6L8 10L12 6",
753
- stroke: "currentColor",
754
- strokeWidth: "1.5",
755
- strokeLinecap: "round",
756
- strokeLinejoin: "round"
757
- }
758
- ) }) })
759
- ] })
760
- ]
761
- }
762
- ),
763
- x && /* @__PURE__ */ g("div", { ref: E, className: "clarity-multiselect__dropdown", children: [
764
- /* @__PURE__ */ a("div", { className: "clarity-multiselect__search", children: /* @__PURE__ */ a(
765
- "input",
766
- {
767
- ref: I,
768
- type: "text",
769
- className: "clarity-multiselect__search-input",
770
- placeholder: "Buscar opções...",
771
- value: $,
772
- onChange: M,
773
- onKeyDown: A
774
- }
775
- ) }),
776
- /* @__PURE__ */ a("ul", { className: "clarity-multiselect__options", children: H.length > 0 ? H.map((N) => {
777
- const O = t.includes(N.value), F = N.disabled || n;
778
- return /* @__PURE__ */ g(
779
- "li",
780
- {
781
- className: [
782
- "clarity-multiselect__option",
783
- O && "clarity-multiselect__option--selected",
784
- F && "clarity-multiselect__option--disabled"
785
- ].filter(Boolean).join(" "),
786
- onClick: (D) => !F && V(N.value, D),
787
- children: [
788
- /* @__PURE__ */ a("div", { className: "clarity-multiselect__option-checkbox", children: /* @__PURE__ */ a("div", { className: [
789
- "clarity-multiselect__checkbox",
790
- O && "clarity-multiselect__checkbox--checked"
791
- ].filter(Boolean).join(" "), children: O && /* @__PURE__ */ a("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ a(
792
- "path",
793
- {
794
- d: "M2 6L5 9L10 3",
795
- stroke: "currentColor",
796
- strokeWidth: "2",
797
- strokeLinecap: "round",
798
- strokeLinejoin: "round"
799
- }
800
- ) }) }) }),
801
- /* @__PURE__ */ a("span", { className: "clarity-multiselect__option-label", children: N.label })
802
- ]
803
- },
804
- N.value
805
- );
806
- }) : /* @__PURE__ */ a("li", { className: "clarity-multiselect__option clarity-multiselect__option--no-results", children: "Nenhum resultado encontrado" }) })
807
- ] })
808
- ]
809
- }
810
- ),
811
- (o || d && c) && /* @__PURE__ */ a("div", { className: "clarity-multiselect__helper", children: d && c ? /* @__PURE__ */ a("span", { className: "clarity-multiselect__error-message", children: c }) : o && /* @__PURE__ */ a("span", { className: "clarity-multiselect__helper-text", children: o }) })
812
- ] });
343
+ return g("div", { className: ae, children: [g("div", { ref: w, className: ne, "data-testid": b, ...C, children: [g("div", { className: "clarity-multiselect__field", onClick: W, children: [l && g("label", { className: "clarity-multiselect__label", children: [l, y && a("span", { className: "clarity-multiselect__required", children: "*" })] }), a("div", { className: "clarity-multiselect__content", children: t.length > 0 ? se() : a("span", { className: "clarity-multiselect__placeholder", children: n }) }), g("div", { className: "clarity-multiselect__icons", children: [t.length > 0 && !i && a("button", { type: "button", className: "clarity-multiselect__clear-button", onClick: q, "aria-label": "Limpar seleção", children: "×" }), a("div", { className: "clarity-multiselect__dropdown-icon", children: a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: a("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), x && g("div", { ref: S, className: "clarity-multiselect__dropdown", children: [a("div", { className: "clarity-multiselect__search", children: a("input", { ref: I, type: "text", className: "clarity-multiselect__search-input", placeholder: "Buscar opções...", value: $, onChange: M, onKeyDown: V }) }), a("ul", { className: "clarity-multiselect__options", children: A.length > 0 ? A.map((N) => {
344
+ const O = t.includes(N.value), F = N.disabled || i;
345
+ return g("li", { className: [
346
+ "clarity-multiselect__option",
347
+ O && "clarity-multiselect__option--selected",
348
+ F && "clarity-multiselect__option--disabled"
349
+ ].filter(Boolean).join(" "), onClick: (D) => !F && H(N.value, D), children: [a("div", { className: "clarity-multiselect__option-checkbox", children: a("div", { className: [
350
+ "clarity-multiselect__checkbox",
351
+ O && "clarity-multiselect__checkbox--checked"
352
+ ].filter(Boolean).join(" "), children: O && a("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: a("path", { d: "M2 6L5 9L10 3", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) }), a("span", { className: "clarity-multiselect__option-label", children: N.label })] }, N.value);
353
+ }) : a("li", { className: "clarity-multiselect__option clarity-multiselect__option--no-results", children: "Nenhum resultado encontrado" }) })] })] }), (r || d && c) && a("div", { className: "clarity-multiselect__helper", children: d && c ? a("span", { className: "clarity-multiselect__error-message", children: c }) : r && a("span", { className: "clarity-multiselect__helper-text", children: r }) })] });
813
354
  });
814
355
  bt.displayName = "MultiSelect";
815
356
  const Ce = Z(null), ge = () => {
@@ -817,12 +358,8 @@ const Ce = Z(null), ge = () => {
817
358
  if (!e)
818
359
  throw new Error("useModal must be used within a Modal provider");
819
360
  return e;
820
- }, _e = ({
821
- children: e,
822
- className: t = "",
823
- title: s
824
- }) => {
825
- const { onClose: r, variant: l, showCloseButton: o } = ge(), d = [
361
+ }, _e = ({ children: e, className: t = "", title: s }) => {
362
+ const { onClose: n, variant: l, showCloseButton: r } = ge(), d = [
826
363
  "clarity-modal-header",
827
364
  t,
828
365
  l && `clarity-modal-header--${l}`
@@ -830,26 +367,19 @@ const Ce = Z(null), ge = () => {
830
367
  "clarity-modal-close",
831
368
  l && `clarity-modal-close--${l}`
832
369
  ].filter(Boolean).join(" ");
833
- return /* @__PURE__ */ g("div", { className: d, children: [
834
- s && /* @__PURE__ */ a("h2", { className: "clarity-modal-title", children: s }),
835
- e,
836
- o && /* @__PURE__ */ a("button", { className: c, onClick: (n) => {
837
- n.stopPropagation(), r();
838
- }, children: "×" })
839
- ] });
370
+ return g("div", { className: d, children: [s && a("h2", { className: "clarity-modal-title", children: s }), e, r && a("button", { className: c, onClick: (i) => {
371
+ i.stopPropagation(), n();
372
+ }, children: "×" })] });
840
373
  };
841
374
  _e.displayName = "Modal.Header";
842
- const we = ({ children: e, className: t = "" }) => /* @__PURE__ */ a("div", { className: `clarity-modal-content ${t}`, children: e });
375
+ const we = ({ children: e, className: t = "" }) => a("div", { className: `clarity-modal-content ${t}`, children: e });
843
376
  we.displayName = "Modal.Content";
844
- const $e = ({ children: e, className: t = "" }) => /* @__PURE__ */ g("div", { className: `clarity-modal-footer ${t}`, children: [
845
- /* @__PURE__ */ a("div", { className: "clarity-modal-scroll-indicator" }),
846
- e
847
- ] });
377
+ const $e = ({ children: e, className: t = "" }) => g("div", { className: `clarity-modal-footer ${t}`, children: [a("div", { className: "clarity-modal-scroll-indicator" }), e] });
848
378
  $e.displayName = "Modal.Footer";
849
379
  const ke = ({ children: e, onClick: t }) => G(e, {
850
380
  onClick: (s) => {
851
- var r, l;
852
- t == null || t(), (l = (r = e.props).onClick) == null || l.call(r, s);
381
+ var n, l;
382
+ t == null || t(), (l = (n = e.props).onClick) == null || l.call(n, s);
853
383
  }
854
384
  });
855
385
  ke.displayName = "Modal.Trigger";
@@ -857,47 +387,30 @@ const xe = ({ children: e }) => {
857
387
  const { onClose: t } = ge();
858
388
  return G(e, {
859
389
  onClick: (s) => {
860
- var r, l;
861
- t(), (l = (r = e.props).onClick) == null || l.call(r, s);
390
+ var n, l;
391
+ t(), (l = (n = e.props).onClick) == null || l.call(n, s);
862
392
  }
863
393
  });
864
394
  };
865
395
  xe.displayName = "Modal.Close";
866
- const ee = ({
867
- isOpen: e,
868
- onClose: t,
869
- onOpen: s,
870
- children: r,
871
- className: l = "",
872
- variant: o,
873
- size: d = "medium",
874
- showCloseButton: c = !0,
875
- closeOnOverlayClick: n = !0
876
- }) => {
877
- const [i, m] = B(!1), p = e !== void 0 ? e : i, f = t || (() => {
878
- m(!1);
396
+ const ee = ({ isOpen: e, onClose: t, onOpen: s, children: n, className: l = "", variant: r, size: d = "medium", showCloseButton: c = !0, closeOnOverlayClick: i = !0 }) => {
397
+ const [o, u] = B(!1), f = e !== void 0 ? e : o, p = t || (() => {
398
+ u(!1);
879
399
  });
880
400
  P(() => {
881
- p && (s == null || s());
882
- }, [p, s]), P(() => {
883
- const C = (T) => {
884
- T.key === "Escape" && f();
401
+ f && (s == null || s());
402
+ }, [f, s]), P(() => {
403
+ const C = (j) => {
404
+ j.key === "Escape" && p();
885
405
  };
886
- return p ? (document.addEventListener("keydown", C), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
406
+ return f ? (document.addEventListener("keydown", C), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
887
407
  document.removeEventListener("keydown", C), document.body.style.overflow = "unset";
888
408
  };
889
- }, [p, f]);
890
- const u = (C) => {
891
- n && C.target === C.currentTarget && f();
892
- }, h = L.Children.toArray(r).find(
893
- (C) => Q(C) && C.type.displayName === "Modal.Trigger"
894
- ), y = L.Children.toArray(r).filter(
895
- (C) => Q(C) && C.type.displayName !== "Modal.Trigger"
896
- ), b = ["clarity-modal", l, `clarity-modal--${d}`].filter(Boolean).join(" ");
897
- return /* @__PURE__ */ g(Ce.Provider, { value: { onClose: f, variant: o, showCloseButton: c }, children: [
898
- h && G(h, { onClick: () => m(!0) }),
899
- p && /* @__PURE__ */ a("div", { className: "clarity-modal-overlay", onClick: u, children: /* @__PURE__ */ a("div", { className: b, children: y }) })
900
- ] });
409
+ }, [f, p]);
410
+ const m = (C) => {
411
+ i && C.target === C.currentTarget && p();
412
+ }, h = T.Children.toArray(n).find((C) => Q(C) && C.type.displayName === "Modal.Trigger"), y = T.Children.toArray(n).filter((C) => Q(C) && C.type.displayName !== "Modal.Trigger"), b = ["clarity-modal", l, `clarity-modal--${d}`].filter(Boolean).join(" ");
413
+ return g(Ce.Provider, { value: { onClose: p, variant: r, showCloseButton: c }, children: [h && G(h, { onClick: () => u(!0) }), f && a("div", { className: "clarity-modal-overlay", onClick: m, children: a("div", { className: b, children: y }) })] });
901
414
  };
902
415
  ee.Header = _e;
903
416
  ee.Content = we;
@@ -910,156 +423,122 @@ const Be = Z(void 0), Mt = () => {
910
423
  if (!e)
911
424
  throw new Error("useToast must be used within a ToastProvider");
912
425
  return e;
913
- }, Nt = ({ id: e, message: t, variant: s, duration: r, onClose: l, invertColors: o }) => {
426
+ }, Nt = ({ id: e, message: t, variant: s, duration: n, onClose: l, invertColors: r }) => {
914
427
  const [d, c] = B("entering");
915
428
  P(() => {
916
- const i = setTimeout(() => {
429
+ const o = setTimeout(() => {
917
430
  c("visible");
918
- }, 10), m = setTimeout(() => {
431
+ }, 10), u = setTimeout(() => {
919
432
  c("exiting");
920
- }, r * 1e3 - 300), v = setTimeout(() => {
433
+ }, n * 1e3 - 300), v = setTimeout(() => {
921
434
  l(e);
922
- }, r * 1e3);
435
+ }, n * 1e3);
923
436
  return () => {
924
- clearTimeout(i), clearTimeout(m), clearTimeout(v);
437
+ clearTimeout(o), clearTimeout(u), clearTimeout(v);
925
438
  };
926
- }, [e, r, l]);
927
- const n = [
439
+ }, [e, n, l]);
440
+ const i = [
928
441
  "cl-toast",
929
442
  s,
930
- o ? "colored-background" : "",
443
+ r ? "colored-background" : "",
931
444
  `cl-toast-${d}`
932
445
  ].filter(Boolean).join(" ");
933
- return /* @__PURE__ */ g("div", { className: n, children: [
934
- /* @__PURE__ */ a("div", { className: "cl-toast-message", children: t }),
935
- /* @__PURE__ */ a("button", { onClick: () => c("exiting"), className: "cl-toast-close-button", children: "×" }),
936
- /* @__PURE__ */ a(
937
- "div",
938
- {
939
- className: "cl-toast-progress-bar",
940
- style: { animationDuration: `${r}s` }
941
- }
942
- )
943
- ] });
446
+ return g("div", { className: i, children: [a("div", { className: "cl-toast-message", children: t }), a("button", { onClick: () => c("exiting"), className: "cl-toast-close-button", children: "×" }), a("div", { className: "cl-toast-progress-bar", style: { animationDuration: `${n}s` } })] });
944
447
  }, Ft = ({ children: e }) => {
945
- const [t, s] = B([]), r = oe(() => {
448
+ const [t, s] = B([]), n = oe(() => {
946
449
  if (typeof document < "u") {
947
- const n = document.createElement("div");
948
- return n.id = "toast-portal-root", n;
450
+ const i = document.createElement("div");
451
+ return i.id = "toast-portal-root", i;
949
452
  }
950
453
  return null;
951
454
  }, []);
952
455
  P(() => {
953
- if (r)
954
- return document.body.appendChild(r), () => {
955
- document.body.removeChild(r);
456
+ if (n)
457
+ return document.body.appendChild(n), () => {
458
+ document.body.removeChild(n);
956
459
  };
957
- }, [r]);
958
- const l = de((n) => {
959
- const m = {
460
+ }, [n]);
461
+ const l = de((i) => {
462
+ const u = {
960
463
  id: (/* @__PURE__ */ new Date()).toISOString() + Math.random(),
961
464
  // duration: 5,
962
465
  // position: 'right-top',
963
- ...n
466
+ ...i
964
467
  };
965
468
  s((v) => {
966
- const p = [m, ...v];
967
- return p.length > 4 ? p.slice(0, 4) : p;
469
+ const f = [u, ...v];
470
+ return f.length > 4 ? f.slice(0, 4) : f;
968
471
  });
969
- }, []), o = de((n) => {
970
- s((i) => i.filter((m) => m.id !== n));
971
- }, []), d = oe(() => t.reduce((n, i) => (n[i.position] || (n[i.position] = []), n[i.position].push(i), n), {}), [t]), c = oe(() => ({ show: l }), [l]);
972
- return /* @__PURE__ */ g(Be.Provider, { value: c, children: [
973
- e,
974
- r && pt.createPortal(
975
- Object.entries(d).map(([n, i]) => /* @__PURE__ */ a("div", { className: `cl-toast-container ${n}`, children: i.map((m) => /* @__PURE__ */ a(Nt, { ...m, onClose: o }, m.id)) }, n)),
976
- r
977
- )
978
- ] });
472
+ }, []), r = de((i) => {
473
+ s((o) => o.filter((u) => u.id !== i));
474
+ }, []), d = oe(() => t.reduce((i, o) => (i[o.position] || (i[o.position] = []), i[o.position].push(o), i), {}), [t]), c = oe(() => ({ show: l }), [l]);
475
+ return g(Be.Provider, { value: c, children: [e, n && ft.createPortal(Object.entries(d).map(([i, o]) => a("div", { className: `cl-toast-container ${i}`, children: o.map((u) => a(Nt, { ...u, onClose: r }, u.id)) }, i)), n)] });
979
476
  }, Te = Z(null), je = () => {
980
477
  const e = K(Te);
981
478
  if (!e)
982
479
  throw new Error("useOffcanvas must be used within an Offcanvas provider");
983
480
  return e;
984
- }, Le = ({
985
- children: e,
986
- className: t = ""
987
- }) => {
988
- const { onClose: s, variant: r, showCloseButton: l, title: o } = je(), d = [
481
+ }, Ee = ({ children: e, className: t = "" }) => {
482
+ const { onClose: s, variant: n, showCloseButton: l, title: r } = je(), d = [
989
483
  "clarity-offcanvas-header",
990
484
  t
991
485
  ].filter(Boolean).join(" "), c = [
992
486
  "clarity-offcanvas-close",
993
- r && `clarity-offcanvas-close--${r}`
994
- ].filter(Boolean).join(" "), n = [
487
+ n && `clarity-offcanvas-close--${n}`
488
+ ].filter(Boolean).join(" "), i = [
995
489
  "clarity-offcanvas-title",
996
- r && `clarity-offcanvas-title--${r}`
490
+ n && `clarity-offcanvas-title--${n}`
997
491
  ].filter(Boolean).join(" ");
998
- return /* @__PURE__ */ g("div", { className: d, children: [
999
- o && /* @__PURE__ */ a("h2", { className: n, children: o }),
1000
- e,
1001
- l && /* @__PURE__ */ a("button", { className: c, onClick: (i) => {
1002
- i.stopPropagation(), s();
1003
- }, children: "×" })
1004
- ] });
492
+ return g("div", { className: d, children: [r && a("h2", { className: i, children: r }), e, l && a("button", { className: c, onClick: (o) => {
493
+ o.stopPropagation(), s();
494
+ }, children: "×" })] });
1005
495
  };
1006
- Le.displayName = "Offcanvas.Header";
1007
- const Re = ({ children: e, className: t = "" }) => /* @__PURE__ */ a("div", { className: `clarity-offcanvas-content ${t}`, children: e });
1008
- Re.displayName = "Offcanvas.Content";
1009
- const Se = ({ children: e, onClick: t, variant: s }) => G(e, {
1010
- onClick: (r) => {
1011
- var l, o;
1012
- t == null || t(), (o = (l = e.props).onClick) == null || o.call(l, r);
496
+ Ee.displayName = "Offcanvas.Header";
497
+ const Le = ({ children: e, className: t = "" }) => a("div", { className: `clarity-offcanvas-content ${t}`, children: e });
498
+ Le.displayName = "Offcanvas.Content";
499
+ const Re = ({ children: e, onClick: t, variant: s }) => G(e, {
500
+ onClick: (n) => {
501
+ var l, r;
502
+ t == null || t(), (r = (l = e.props).onClick) == null || r.call(l, n);
1013
503
  },
1014
504
  variant: s
1015
505
  });
1016
- Se.displayName = "Offcanvas.Trigger";
1017
- const fe = ({ children: e, className: t = "" }) => /* @__PURE__ */ a("div", { className: `clarity-offcanvas-footer ${t}`, children: e });
1018
- fe.displayName = "Offcanvas.Footer";
1019
- const Ee = ({ children: e }) => {
506
+ Re.displayName = "Offcanvas.Trigger";
507
+ const pe = ({ children: e, className: t = "" }) => a("div", { className: `clarity-offcanvas-footer ${t}`, children: e });
508
+ pe.displayName = "Offcanvas.Footer";
509
+ const Se = ({ children: e }) => {
1020
510
  const { onClose: t } = je();
1021
511
  return G(e, {
1022
512
  onClick: (s) => {
1023
- var r, l;
1024
- t(), (l = (r = e.props).onClick) == null || l.call(r, s);
513
+ var n, l;
514
+ t(), (l = (n = e.props).onClick) == null || l.call(n, s);
1025
515
  }
1026
516
  });
1027
517
  };
1028
- Ee.displayName = "Offcanvas.Close";
1029
- const le = ({
1030
- isOpen: e,
1031
- onClose: t,
1032
- onOpen: s,
1033
- children: r,
1034
- className: l = "",
1035
- variant: o,
1036
- placement: d = "right",
1037
- closeOnOverlayClick: c = !0,
1038
- showCloseButton: n = !0,
1039
- title: i
1040
- }) => {
1041
- const [m, v] = B(!1), [p, f] = B(!1), [u, h] = B(!1), y = e !== void 0, b = y ? e : m, C = de(() => {
518
+ Se.displayName = "Offcanvas.Close";
519
+ const le = ({ isOpen: e, onClose: t, onOpen: s, children: n, className: l = "", variant: r, placement: d = "right", closeOnOverlayClick: c = !0, showCloseButton: i = !0, title: o }) => {
520
+ const [u, v] = B(!1), [f, p] = B(!1), [m, h] = B(!1), y = e !== void 0, b = y ? e : u, C = de(() => {
1042
521
  t ? t() : v(!1);
1043
- }, [t]), T = de(() => {
522
+ }, [t]), j = de(() => {
1044
523
  y || v(!0), s == null || s();
1045
524
  }, [y, s]);
1046
525
  P(() => {
1047
526
  if (b) {
1048
527
  h(!0);
1049
528
  const w = setTimeout(() => {
1050
- f(!0);
529
+ p(!0);
1051
530
  }, 50);
1052
531
  return () => clearTimeout(w);
1053
532
  } else {
1054
- f(!1);
533
+ p(!1);
1055
534
  const w = setTimeout(() => {
1056
535
  h(!1);
1057
536
  }, 300);
1058
537
  return () => clearTimeout(w);
1059
538
  }
1060
539
  }, [b]), P(() => {
1061
- const w = (H) => {
1062
- H.key === "Escape" && C();
540
+ const w = (A) => {
541
+ A.key === "Escape" && C();
1063
542
  };
1064
543
  return b ? (document.addEventListener("keydown", w), document.body.style.overflow = "hidden") : (document.removeEventListener("keydown", w), document.body.style.overflow = "unset"), () => {
1065
544
  document.removeEventListener("keydown", w), document.body.style.overflow = "unset";
@@ -1067,178 +546,82 @@ const le = ({
1067
546
  }, [b, C]);
1068
547
  const x = (w) => {
1069
548
  c && w.target === w.currentTarget && C();
1070
- }, _ = L.Children.toArray(r);
1071
- let $, R, k, j, S;
549
+ }, _ = T.Children.toArray(n);
550
+ let $, L, k, E, R;
1072
551
  _.forEach((w) => {
1073
552
  if (Q(w))
1074
553
  if (w.type.displayName === "Offcanvas.Trigger")
1075
554
  $ = w;
1076
555
  else if (w.type.displayName === "Offcanvas.Header")
1077
- R = w;
556
+ L = w;
1078
557
  else if (w.type.displayName === "Offcanvas.Content") {
1079
558
  k = w;
1080
- const W = L.Children.toArray(k.props.children).filter((V) => Q(V) && V.type.displayName === "Offcanvas.Close" ? (S = V, !1) : !0);
559
+ const W = T.Children.toArray(k.props.children).filter((H) => Q(H) && H.type.displayName === "Offcanvas.Close" ? (R = H, !1) : !0);
1081
560
  k = G(k, { children: W });
1082
- } else w.type.displayName === "Offcanvas.Footer" && (j = w);
1083
- }), S && (j ? j = G(j, {
1084
- children: /* @__PURE__ */ g(ct, { children: [
1085
- j.props.children,
1086
- S
1087
- ] })
1088
- }) : j = /* @__PURE__ */ a(fe, { children: S }));
561
+ } else w.type.displayName === "Offcanvas.Footer" && (E = w);
562
+ }), R && (E ? E = G(E, {
563
+ children: g(ct, { children: [E.props.children, R] })
564
+ }) : E = a(pe, { children: R }));
1089
565
  const I = [
1090
566
  "clarity-offcanvas",
1091
567
  l,
1092
568
  `clarity-offcanvas--${d}`,
1093
- o && `clarity-offcanvas--${o}`,
1094
- p ? "clarity-offcanvas--open" : "clarity-offcanvas--closed"
1095
- ].filter(Boolean).join(" "), E = [
569
+ r && `clarity-offcanvas--${r}`,
570
+ f ? "clarity-offcanvas--open" : "clarity-offcanvas--closed"
571
+ ].filter(Boolean).join(" "), S = [
1096
572
  "clarity-offcanvas-overlay",
1097
- p ? "clarity-offcanvas-overlay--visible" : ""
573
+ f ? "clarity-offcanvas-overlay--visible" : ""
1098
574
  ].filter(Boolean).join(" ");
1099
- return /* @__PURE__ */ g(Te.Provider, { value: { onClose: C, variant: o, showCloseButton: n, placement: d, title: i }, children: [
1100
- $ && G($, { onClick: T, variant: o }),
1101
- u && // Only render if shouldRender is true
1102
- /* @__PURE__ */ a("div", { className: E, onClick: x, children: /* @__PURE__ */ g("div", { className: I, children: [
1103
- R,
1104
- k,
1105
- j && /* @__PURE__ */ a("div", { className: "clarity-offcanvas-scroll-indicator" }),
1106
- " ",
1107
- j
1108
- ] }) })
1109
- ] });
575
+ return g(Te.Provider, { value: { onClose: C, variant: r, showCloseButton: i, placement: d, title: o }, children: [$ && G($, { onClick: j, variant: r }), m && // Only render if shouldRender is true
576
+ a("div", { className: S, onClick: x, children: g("div", { className: I, children: [L, k, E && a("div", { className: "clarity-offcanvas-scroll-indicator" }), " ", E] }) })] });
1110
577
  };
1111
- le.Header = Le;
1112
- le.Content = Re;
1113
- le.Footer = fe;
1114
- le.Trigger = Se;
1115
- le.Close = Ee;
578
+ le.Header = Ee;
579
+ le.Content = Le;
580
+ le.Footer = pe;
581
+ le.Trigger = Re;
582
+ le.Close = Se;
1116
583
  le.displayName = "Offcanvas";
1117
- const Ct = L.forwardRef(({
1118
- type: e,
1119
- variant: t = "primary",
1120
- size: s = "medium",
1121
- label: r,
1122
- helperText: l,
1123
- error: o = !1,
1124
- errorMessage: d,
1125
- labelPosition: c = "right",
1126
- className: n = "",
1127
- disabled: i = !1,
1128
- checked: m,
1129
- id: v,
1130
- ...p
1131
- }, f) => {
1132
- const u = v || `check-input-${Math.random().toString(36).substr(2, 9)}`, h = [
584
+ const Ct = T.forwardRef(({ type: e, variant: t = "primary", size: s = "medium", label: n, helperText: l, error: r = !1, errorMessage: d, labelPosition: c = "right", className: i = "", disabled: o = !1, checked: u, id: v, ...f }, p) => {
585
+ const m = v || `check-input-${Math.random().toString(36).substr(2, 9)}`, h = [
1133
586
  "clarity-check-input-wrapper",
1134
587
  `clarity-check-input-wrapper--${c}`,
1135
- i && "clarity-check-input-wrapper--disabled",
1136
- o && "clarity-check-input-wrapper--error"
588
+ o && "clarity-check-input-wrapper--disabled",
589
+ r && "clarity-check-input-wrapper--error"
1137
590
  ].filter(Boolean).join(" "), y = [
1138
591
  "clarity-check-input",
1139
592
  `clarity-check-input--${e}`,
1140
593
  `clarity-check-input--${s}`,
1141
594
  t && `clarity-check-input--${t}`,
1142
- o && "clarity-check-input--error",
1143
- i && "clarity-check-input--disabled",
1144
- n
595
+ r && "clarity-check-input--error",
596
+ o && "clarity-check-input--disabled",
597
+ i
1145
598
  ].filter(Boolean).join(" "), b = [
1146
599
  "clarity-check-input__label",
1147
600
  `clarity-check-input__label--${s}`,
1148
- i && "clarity-check-input__label--disabled"
601
+ o && "clarity-check-input__label--disabled"
1149
602
  ].filter(Boolean).join(" ");
1150
- return /* @__PURE__ */ g("div", { className: "clarity-check-input-container", children: [
1151
- /* @__PURE__ */ g("label", { className: h, htmlFor: u, children: [
1152
- /* @__PURE__ */ a(
1153
- "input",
1154
- {
1155
- ref: f,
1156
- id: u,
1157
- type: e,
1158
- className: y,
1159
- disabled: i,
1160
- checked: m,
1161
- ...p
1162
- }
1163
- ),
1164
- /* @__PURE__ */ g("div", { className: "clarity-check-input__custom", children: [
1165
- e === "checkbox" && /* @__PURE__ */ a(
1166
- "svg",
1167
- {
1168
- className: "clarity-check-input__icon",
1169
- viewBox: "0 0 16 16",
1170
- fill: "none",
1171
- xmlns: "http://www.w3.org/2000/svg",
1172
- children: /* @__PURE__ */ a(
1173
- "path",
1174
- {
1175
- d: "M13.5 4.5L6 12L2.5 8.5",
1176
- stroke: "currentColor",
1177
- strokeWidth: "2",
1178
- strokeLinecap: "round",
1179
- strokeLinejoin: "round"
1180
- }
1181
- )
1182
- }
1183
- ),
1184
- e === "radio" && /* @__PURE__ */ a("div", { className: "clarity-check-input__radio-dot" })
1185
- ] }),
1186
- r && /* @__PURE__ */ a("span", { className: b, children: r })
1187
- ] }),
1188
- (l || o && d) && /* @__PURE__ */ a("div", { className: "clarity-check-input__helper-text", children: o && d ? d : l })
1189
- ] });
603
+ return g("div", { className: "clarity-check-input-container", children: [g("label", { className: h, htmlFor: m, children: [a("input", { ref: p, id: m, type: e, className: y, disabled: o, checked: u, ...f }), g("div", { className: "clarity-check-input__custom", children: [e === "checkbox" && a("svg", { className: "clarity-check-input__icon", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: a("path", { d: "M13.5 4.5L6 12L2.5 8.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }), e === "radio" && a("div", { className: "clarity-check-input__radio-dot" })] }), n && a("span", { className: b, children: n })] }), (l || r && d) && a("div", { className: "clarity-check-input__helper-text", children: r && d ? d : l })] });
1190
604
  });
1191
605
  Ct.displayName = "CheckInput";
1192
- const gt = L.forwardRef(({
1193
- variant: e = "primary",
1194
- size: t = "medium",
1195
- label: s,
1196
- helperText: r,
1197
- error: l = !1,
1198
- errorMessage: o,
1199
- labelPosition: d = "right",
1200
- className: c = "",
1201
- disabled: n = !1,
1202
- checked: i,
1203
- id: m,
1204
- ...v
1205
- }, p) => {
1206
- const f = m || `input-switch-${Math.random().toString(36).substr(2, 9)}`, u = [
606
+ const gt = T.forwardRef(({ variant: e = "primary", size: t = "medium", label: s, helperText: n, error: l = !1, errorMessage: r, labelPosition: d = "right", className: c = "", disabled: i = !1, checked: o, id: u, ...v }, f) => {
607
+ const p = u || `input-switch-${Math.random().toString(36).substr(2, 9)}`, m = [
1207
608
  "clarity-input-switch-wrapper",
1208
609
  `clarity-input-switch-wrapper--${d}`,
1209
- n && "clarity-input-switch-wrapper--disabled",
610
+ i && "clarity-input-switch-wrapper--disabled",
1210
611
  l && "clarity-input-switch-wrapper--error"
1211
612
  ].filter(Boolean).join(" "), h = [
1212
613
  "clarity-input-switch",
1213
614
  `clarity-input-switch--${t}`,
1214
615
  e && `clarity-input-switch--${e}`,
1215
616
  l && "clarity-input-switch--error",
1216
- n && "clarity-input-switch--disabled",
617
+ i && "clarity-input-switch--disabled",
1217
618
  c
1218
619
  ].filter(Boolean).join(" "), y = [
1219
620
  "clarity-input-switch__label",
1220
621
  `clarity-input-switch__label--${t}`,
1221
- n && "clarity-input-switch__label--disabled"
622
+ i && "clarity-input-switch__label--disabled"
1222
623
  ].filter(Boolean).join(" ");
1223
- return /* @__PURE__ */ g("div", { className: "clarity-input-switch-container", children: [
1224
- /* @__PURE__ */ g("label", { className: u, htmlFor: f, children: [
1225
- /* @__PURE__ */ a(
1226
- "input",
1227
- {
1228
- ref: p,
1229
- id: f,
1230
- type: "checkbox",
1231
- className: h,
1232
- disabled: n,
1233
- checked: i,
1234
- ...v
1235
- }
1236
- ),
1237
- /* @__PURE__ */ a("div", { className: "clarity-input-switch__track", children: /* @__PURE__ */ a("div", { className: "clarity-input-switch__thumb" }) }),
1238
- s && /* @__PURE__ */ a("span", { className: y, children: s })
1239
- ] }),
1240
- (r || l && o) && /* @__PURE__ */ a("div", { className: "clarity-input-switch__helper-text", children: l && o ? o : r })
1241
- ] });
624
+ return g("div", { className: "clarity-input-switch-container", children: [g("label", { className: m, htmlFor: p, children: [a("input", { ref: f, id: p, type: "checkbox", className: h, disabled: i, checked: o, ...v }), a("div", { className: "clarity-input-switch__track", children: a("div", { className: "clarity-input-switch__thumb" }) }), s && a("span", { className: y, children: s })] }), (n || l && r) && a("div", { className: "clarity-input-switch__helper-text", children: l && r ? r : n })] });
1242
625
  });
1243
626
  gt.displayName = "InputSwitch";
1244
627
  const Oe = Z(null), he = () => {
@@ -1247,479 +630,270 @@ const Oe = Z(null), he = () => {
1247
630
  throw new Error("useConfirmationDialog must be used within a ConfirmationDialog provider");
1248
631
  return e;
1249
632
  }, Ie = ({ children: e, className: t = "" }) => {
1250
- const { variant: s } = he(), r = `clarity-confirmation-dialog-header ${t} clarity-confirmation-dialog-header--${s}`;
1251
- return /* @__PURE__ */ a("div", { className: r, children: e });
633
+ const { variant: s } = he(), n = `clarity-confirmation-dialog-header ${t} clarity-confirmation-dialog-header--${s}`;
634
+ return a("div", { className: n, children: e });
1252
635
  };
1253
636
  Ie.displayName = "ConfirmationDialog.Header";
1254
- const De = ({ children: e, className: t = "" }) => /* @__PURE__ */ a("div", { className: `clarity-confirmation-dialog-content ${t}`, children: e });
637
+ const De = ({ children: e, className: t = "" }) => a("div", { className: `clarity-confirmation-dialog-content ${t}`, children: e });
1255
638
  De.displayName = "ConfirmationDialog.Content";
1256
- const Pe = ({ children: e, className: t = "" }) => /* @__PURE__ */ a("div", { className: `clarity-confirmation-dialog-footer ${t}`, children: e });
639
+ const Pe = ({ children: e, className: t = "" }) => a("div", { className: `clarity-confirmation-dialog-footer ${t}`, children: e });
1257
640
  Pe.displayName = "ConfirmationDialog.Footer";
1258
641
  const We = ({ children: e }) => G(e, {
1259
642
  onClick: (t) => {
1260
- var s, r;
1261
- (r = (s = e.props).onClick) == null || r.call(s, t);
643
+ var s, n;
644
+ (n = (s = e.props).onClick) == null || n.call(s, t);
1262
645
  }
1263
646
  });
1264
647
  We.displayName = "ConfirmationDialog.Trigger";
1265
- const Ae = ({ children: e }) => {
648
+ const Ve = ({ children: e }) => {
1266
649
  const { onClose: t } = he();
1267
650
  return G(e, {
1268
651
  onClick: (s) => {
1269
- var r, l;
1270
- t(), (l = (r = e.props).onClick) == null || l.call(r, s);
652
+ var n, l;
653
+ t(), (l = (n = e.props).onClick) == null || l.call(n, s);
1271
654
  }
1272
655
  });
1273
656
  };
1274
- Ae.displayName = "ConfirmationDialog.Close";
1275
- const He = ({ children: e }) => {
657
+ Ve.displayName = "ConfirmationDialog.Close";
658
+ const Ae = ({ children: e }) => {
1276
659
  const { onConfirm: t } = he();
1277
660
  return G(e, {
1278
661
  onClick: (s) => {
1279
- var r, l;
1280
- t(), (l = (r = e.props).onClick) == null || l.call(r, s);
662
+ var n, l;
663
+ t(), (l = (n = e.props).onClick) == null || l.call(n, s);
1281
664
  }
1282
665
  });
1283
666
  };
1284
- He.displayName = "ConfirmationDialog.Confirm";
1285
- const te = ({
1286
- isOpen: e,
1287
- onClose: t,
1288
- onConfirm: s,
1289
- variant: r = "clarity-primary",
1290
- children: l
1291
- }) => {
1292
- const [o, d] = B(!1), c = e !== void 0, n = c ? e : o, i = () => {
667
+ Ae.displayName = "ConfirmationDialog.Confirm";
668
+ const te = ({ isOpen: e, onClose: t, onConfirm: s, variant: n = "clarity-primary", children: l }) => {
669
+ const [r, d] = B(!1), c = e !== void 0, i = c ? e : r, o = () => {
1293
670
  c || d(!0);
1294
- }, m = () => {
671
+ }, u = () => {
1295
672
  t ? t() : d(!1);
1296
673
  }, v = () => {
1297
- s && s(), m();
674
+ s && s(), u();
1298
675
  };
1299
676
  P(() => {
1300
677
  const h = (y) => {
1301
- y.key === "Escape" && m();
678
+ y.key === "Escape" && u();
1302
679
  };
1303
- return n ? (document.addEventListener("keydown", h), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
680
+ return i ? (document.addEventListener("keydown", h), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
1304
681
  document.removeEventListener("keydown", h), document.body.style.overflow = "unset";
1305
682
  };
1306
- }, [n, m]);
1307
- const p = L.Children.toArray(l).find(
1308
- (h) => Q(h) && h.type.displayName === "ConfirmationDialog.Trigger"
1309
- ), f = L.Children.toArray(l).filter(
1310
- (h) => Q(h) && h.type.displayName !== "ConfirmationDialog.Trigger"
1311
- ), u = `clarity-confirmation-dialog clarity-confirmation-dialog--${r}`;
1312
- return /* @__PURE__ */ g(Oe.Provider, { value: { variant: r, onClose: m, onConfirm: v, onOpen: i }, children: [
1313
- p,
1314
- n && /* @__PURE__ */ a("div", { className: "clarity-modal-overlay", children: /* @__PURE__ */ a("div", { className: u, children: f }) })
1315
- ] });
683
+ }, [i, u]);
684
+ const f = T.Children.toArray(l).find((h) => Q(h) && h.type.displayName === "ConfirmationDialog.Trigger"), p = T.Children.toArray(l).filter((h) => Q(h) && h.type.displayName !== "ConfirmationDialog.Trigger"), m = `clarity-confirmation-dialog clarity-confirmation-dialog--${n}`;
685
+ return g(Oe.Provider, { value: { variant: n, onClose: u, onConfirm: v, onOpen: o }, children: [f, i && a("div", { className: "clarity-modal-overlay", children: a("div", { className: m, children: p }) })] });
1316
686
  };
1317
687
  te.Header = Ie;
1318
688
  te.Content = De;
1319
689
  te.Footer = Pe;
1320
690
  te.Trigger = We;
1321
- te.Close = Ae;
1322
- te.Confirm = He;
691
+ te.Close = Ve;
692
+ te.Confirm = Ae;
1323
693
  te.displayName = "ConfirmationDialog";
1324
- const zt = ({
1325
- variant: e = "primary",
1326
- size: t = "medium",
1327
- disabled: s = !1,
1328
- loading: r = !1,
1329
- children: l,
1330
- onClick: o,
1331
- type: d = "button",
1332
- className: c = "",
1333
- "aria-label": n,
1334
- title: i,
1335
- customColor: m,
1336
- customColorHover: v,
1337
- ...p
1338
- }) => {
1339
- const f = "clarity-button-icon", u = [
1340
- f,
1341
- !m && `${f}--${e}`,
1342
- `${f}--${t}`,
1343
- r && `${f}--loading`,
1344
- s && `${f}--disabled`,
694
+ const zt = ({ variant: e = "primary", size: t = "medium", disabled: s = !1, loading: n = !1, children: l, onClick: r, type: d = "button", className: c = "", "aria-label": i, title: o, customColor: u, customColorHover: v, ...f }) => {
695
+ const p = "clarity-button-icon", m = [
696
+ p,
697
+ !u && `${p}--${e}`,
698
+ `${p}--${t}`,
699
+ n && `${p}--loading`,
700
+ s && `${p}--disabled`,
1345
701
  c
1346
702
  ].filter(Boolean).join(" "), h = {};
1347
- return m && (h["--button-icon-bg"] = m, h["--button-icon-hover-bg"] = v || `${m}E6`), /* @__PURE__ */ g(
1348
- "button",
1349
- {
1350
- className: u,
1351
- disabled: s || r,
1352
- onClick: o,
1353
- type: d,
1354
- "aria-label": n,
1355
- title: i,
1356
- style: h,
1357
- ...p,
1358
- children: [
1359
- r && /* @__PURE__ */ a("div", { className: `${f}__spinner` }),
1360
- !r && l
1361
- ]
1362
- }
1363
- );
1364
- }, Gt = ({
1365
- variant: e = "primary",
1366
- product: t,
1367
- tone: s,
1368
- hoverTone: r,
1369
- size: l = "medium",
1370
- disabled: o = !1,
1371
- children: d,
1372
- onClick: c,
1373
- href: n,
1374
- target: i,
1375
- rel: m,
1376
- className: v = "",
1377
- ...p
1378
- }) => {
1379
- const f = "clarity-button-link", u = t && s, h = u ? `${f}--custom` : `${f}--${e}`, y = [
1380
- f,
703
+ return u && (h["--button-icon-bg"] = u, h["--button-icon-hover-bg"] = v || `${u}E6`), g("button", { className: m, disabled: s || n, onClick: r, type: d, "aria-label": i, title: o, style: h, ...f, children: [n && a("div", { className: `${p}__spinner` }), !n && l] });
704
+ }, Gt = ({ variant: e = "primary", product: t, tone: s, hoverTone: n, size: l = "medium", disabled: r = !1, children: d, onClick: c, href: i, target: o, rel: u, className: v = "", ...f }) => {
705
+ const p = "clarity-button-link", m = t && s, h = m ? `${p}--custom` : `${p}--${e}`, y = [
706
+ p,
1381
707
  h,
1382
- `${f}--${l}`,
1383
- o && `${f}--disabled`,
708
+ `${p}--${l}`,
709
+ r && `${p}--disabled`,
1384
710
  v
1385
- ].filter(Boolean).join(" "), b = (T) => {
1386
- const x = parseInt(T);
711
+ ].filter(Boolean).join(" "), b = (j) => {
712
+ const x = parseInt(j);
1387
713
  return x >= 800 ? "900" : x >= 700 ? "800" : x >= 600 ? "700" : x >= 500 ? "600" : x >= 400 ? "500" : x >= 300 ? "400" : x >= 200 ? "300" : "200";
1388
- }, C = u ? {
714
+ }, C = m ? {
1389
715
  "--custom-color": `var(--clarity-${t}-${s})`,
1390
- "--custom-hover-color": `var(--clarity-${t}-${r || b(s)})`
716
+ "--custom-hover-color": `var(--clarity-${t}-${n || b(s)})`
1391
717
  } : {};
1392
- return n ? /* @__PURE__ */ a(
1393
- "a",
1394
- {
1395
- href: n,
1396
- target: i,
1397
- rel: m || (i === "_blank" ? "noopener noreferrer" : void 0),
1398
- className: y,
1399
- style: C,
1400
- onClick: o ? void 0 : c,
1401
- ...p,
1402
- children: d
1403
- }
1404
- ) : /* @__PURE__ */ a(
1405
- "button",
1406
- {
1407
- className: y,
1408
- style: C,
1409
- disabled: o,
1410
- onClick: c,
1411
- ...p,
1412
- children: d
1413
- }
1414
- );
1415
- }, Ve = Z(void 0), Me = () => {
1416
- const e = K(Ve);
718
+ return i ? a("a", { href: i, target: o, rel: u || (o === "_blank" ? "noopener noreferrer" : void 0), className: y, style: C, onClick: r ? void 0 : c, ...f, children: d }) : a("button", { className: y, style: C, disabled: r, onClick: c, ...f, children: d });
719
+ }, He = Z(void 0), Me = () => {
720
+ const e = K(He);
1417
721
  if (!e)
1418
722
  throw new Error("Accordion components must be used within an Accordion");
1419
723
  return e;
1420
- }, _t = ({
1421
- variant: e = "primary",
1422
- product: t,
1423
- tone: s,
1424
- hoverTone: r,
1425
- defaultActiveKey: l,
1426
- alwaysOpen: o = !1,
1427
- flush: d = !1,
1428
- className: c = "",
1429
- children: n,
1430
- onSelect: i,
1431
- ...m
1432
- }) => {
1433
- const [v, p] = B(() => l ? Array.isArray(l) ? l : [l] : []), f = (_) => {
724
+ }, _t = ({ variant: e = "primary", product: t, tone: s, hoverTone: n, defaultActiveKey: l, alwaysOpen: r = !1, flush: d = !1, className: c = "", children: i, onSelect: o, ...u }) => {
725
+ const [v, f] = B(() => l ? Array.isArray(l) ? l : [l] : []), p = (_) => {
1434
726
  let $;
1435
- o ? $ = v.includes(_) ? v.filter((R) => R !== _) : [...v, _] : $ = v.includes(_) ? [] : [_], p($), i && i(v.includes(_) ? null : _, {});
1436
- }, u = "clarity-accordion", h = t && s, y = h ? `${u}--custom` : `${u}--${e}`, b = [
1437
- u,
727
+ r ? $ = v.includes(_) ? v.filter((L) => L !== _) : [...v, _] : $ = v.includes(_) ? [] : [_], f($), o && o(v.includes(_) ? null : _, {});
728
+ }, m = "clarity-accordion", h = t && s, y = h ? `${m}--custom` : `${m}--${e}`, b = [
729
+ m,
1438
730
  y,
1439
- d && `${u}--flush`,
731
+ d && `${m}--flush`,
1440
732
  c
1441
733
  ].filter(Boolean).join(" "), C = (_) => {
1442
734
  const $ = parseInt(_);
1443
735
  return $ >= 800 ? "900" : $ >= 700 ? "800" : $ >= 600 ? "700" : $ >= 500 ? "600" : $ >= 400 ? "500" : $ >= 300 ? "400" : $ >= 200 ? "300" : "200";
1444
- }, T = h ? {
736
+ }, j = h ? {
1445
737
  "--custom-border-color": `var(--clarity-${t}-${s})`,
1446
738
  "--custom-header-color": `var(--clarity-${t}-${s})`,
1447
- "--custom-hover-color": `var(--clarity-${t}-${r || C(s)})`
739
+ "--custom-hover-color": `var(--clarity-${t}-${n || C(s)})`
1448
740
  } : {}, x = {
1449
741
  activeKeys: v,
1450
- toggleItem: f,
1451
- alwaysOpen: o,
742
+ toggleItem: p,
743
+ alwaysOpen: r,
1452
744
  variant: e,
1453
745
  product: t,
1454
746
  tone: s,
1455
- hoverTone: r,
747
+ hoverTone: n,
1456
748
  flush: d
1457
749
  };
1458
- return /* @__PURE__ */ a(Ve.Provider, { value: x, children: /* @__PURE__ */ a("div", { className: b, style: T, ...m, children: n }) });
1459
- }, wt = ({
1460
- eventKey: e,
1461
- disabled: t = !1,
1462
- className: s = "",
1463
- children: r,
1464
- ...l
1465
- }) => {
1466
- const { activeKeys: o } = Me(), d = "clarity-accordion", c = o.includes(e), n = [
750
+ return a(He.Provider, { value: x, children: a("div", { className: b, style: j, ...u, children: i }) });
751
+ }, wt = ({ eventKey: e, disabled: t = !1, className: s = "", children: n, ...l }) => {
752
+ const { activeKeys: r } = Me(), d = "clarity-accordion", c = r.includes(e), i = [
1467
753
  `${d}__item`,
1468
754
  c && `${d}__item--active`,
1469
755
  t && `${d}__item--disabled`,
1470
756
  s
1471
757
  ].filter(Boolean).join(" ");
1472
- return /* @__PURE__ */ a("div", { className: n, ...l, children: L.Children.map(r, (i) => L.isValidElement(i) ? L.cloneElement(i, {
1473
- ...i.props,
758
+ return a("div", { className: i, ...l, children: T.Children.map(n, (o) => T.isValidElement(o) ? T.cloneElement(o, {
759
+ ...o.props,
1474
760
  eventKey: e,
1475
761
  disabled: t,
1476
762
  isActive: c
1477
- }) : i) });
1478
- }, $t = ({
1479
- className: e = "",
1480
- children: t,
1481
- onClick: s,
1482
- eventKey: r,
1483
- disabled: l = !1,
1484
- isActive: o = !1,
1485
- ...d
1486
- }) => {
1487
- const { toggleItem: c } = Me(), n = "clarity-accordion", i = (m) => {
1488
- !l && r && c(r), s == null || s(m);
763
+ }) : o) });
764
+ }, $t = ({ className: e = "", children: t, onClick: s, eventKey: n, disabled: l = !1, isActive: r = !1, ...d }) => {
765
+ const { toggleItem: c } = Me(), i = "clarity-accordion", o = (u) => {
766
+ !l && n && c(n), s == null || s(u);
1489
767
  };
1490
- return /* @__PURE__ */ g(
1491
- "button",
1492
- {
1493
- className: [`${n}__header`, e].filter(Boolean).join(" "),
1494
- onClick: i,
1495
- disabled: l,
1496
- "aria-expanded": o,
1497
- "aria-controls": r ? `${n}-collapse-${r}` : void 0,
1498
- ...d,
1499
- children: [
1500
- /* @__PURE__ */ a("span", { className: `${n}__title`, children: t }),
1501
- /* @__PURE__ */ a("span", { className: `${n}__icon`, children: /* @__PURE__ */ a(
1502
- "svg",
1503
- {
1504
- width: "16",
1505
- height: "16",
1506
- viewBox: "0 0 16 16",
1507
- fill: "currentColor",
1508
- className: o ? `${n}__icon--rotated` : "",
1509
- children: /* @__PURE__ */ a("path", { d: "M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z" })
1510
- }
1511
- ) })
1512
- ]
1513
- }
1514
- );
1515
- }, kt = ({
1516
- className: e = "",
1517
- children: t,
1518
- eventKey: s,
1519
- isActive: r = !1,
1520
- ...l
1521
- }) => {
1522
- const o = "clarity-accordion";
1523
- return /* @__PURE__ */ a(
1524
- "div",
1525
- {
1526
- id: s ? `${o}-collapse-${s}` : void 0,
1527
- className: [
1528
- `${o}__collapse`,
1529
- r && `${o}__collapse--show`
1530
- ].filter(Boolean).join(" "),
1531
- children: /* @__PURE__ */ a("div", { className: [`${o}__body`, e].filter(Boolean).join(" "), ...l, children: t })
1532
- }
1533
- );
768
+ return g("button", { className: [`${i}__header`, e].filter(Boolean).join(" "), onClick: o, disabled: l, "aria-expanded": r, "aria-controls": n ? `${i}-collapse-${n}` : void 0, ...d, children: [a("span", { className: `${i}__title`, children: t }), a("span", { className: `${i}__icon`, children: a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", className: r ? `${i}__icon--rotated` : "", children: a("path", { d: "M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z" }) }) })] });
769
+ }, kt = ({ className: e = "", children: t, eventKey: s, isActive: n = !1, ...l }) => {
770
+ const r = "clarity-accordion";
771
+ return a("div", { id: s ? `${r}-collapse-${s}` : void 0, className: [
772
+ `${r}__collapse`,
773
+ n && `${r}__collapse--show`
774
+ ].filter(Boolean).join(" "), children: a("div", { className: [`${r}__body`, e].filter(Boolean).join(" "), ...l, children: t }) });
1534
775
  }, Ut = Object.assign(_t, {
1535
776
  Item: wt,
1536
777
  Header: $t,
1537
778
  Body: kt
1538
- }), Fe = Z(
1539
- void 0
1540
- ), ze = () => {
779
+ }), Fe = Z(void 0), ze = () => {
1541
780
  const e = K(Fe);
1542
781
  if (!e)
1543
782
  throw new Error("useDropdown must be used within a DropdownProvider");
1544
783
  return e;
1545
784
  }, xt = ({ children: e }) => {
1546
785
  const { setIsOpen: t, triggerRef: s } = ze();
1547
- return /* @__PURE__ */ a(
1548
- "button",
1549
- {
1550
- type: "button",
1551
- ref: s,
1552
- className: "dropdown__trigger",
1553
- onClick: () => t((r) => !r),
1554
- "aria-haspopup": "true",
1555
- children: e
1556
- }
1557
- );
786
+ return a("button", { type: "button", ref: s, className: "dropdown__trigger", onClick: () => t((n) => !n), "aria-haspopup": "true", children: e });
1558
787
  }, Bt = ({ children: e }) => {
1559
- const { isOpen: t, contentRef: s, styles: r } = ze();
1560
- return t ? /* @__PURE__ */ a("div", { ref: s, className: "dropdown__content", style: r, children: e }) : null;
1561
- }, Tt = ({ children: e }) => /* @__PURE__ */ a("div", { className: "dropdown__menu", children: e }), jt = ({ as: e, children: t, ...s }) => /* @__PURE__ */ a(e || "a", { ...s, className: "dropdown__item", children: t }), Lt = () => /* @__PURE__ */ a("hr", { className: "dropdown__separator" }), ce = ({ title: e, position: t = "bottom", children: s }) => {
1562
- const [r, l] = B(!1), [o, d] = B({}), c = z(null), n = z(null), i = z(null);
1563
- return mt(() => {
1564
- if (r) {
1565
- const m = n.current, v = i.current;
1566
- if (!m || !v) return;
1567
- const p = m.getBoundingClientRect(), f = v.getBoundingClientRect(), u = window.innerHeight, h = window.innerWidth;
788
+ const { isOpen: t, contentRef: s, styles: n } = ze();
789
+ return t ? a("div", { ref: s, className: "dropdown__content", style: n, children: e }) : null;
790
+ }, Tt = ({ children: e }) => a("div", { className: "dropdown__menu", children: e }), jt = ({ as: e, children: t, ...s }) => a(e || "a", { ...s, className: "dropdown__item", children: t }), Et = () => a("hr", { className: "dropdown__separator" }), ce = ({ title: e, position: t = "bottom", children: s }) => {
791
+ const [n, l] = B(!1), [r, d] = B({}), c = z(null), i = z(null), o = z(null);
792
+ return ut(() => {
793
+ if (n) {
794
+ const u = i.current, v = o.current;
795
+ if (!u || !v)
796
+ return;
797
+ const f = u.getBoundingClientRect(), p = v.getBoundingClientRect(), m = window.innerHeight, h = window.innerWidth;
1568
798
  let y = t;
1569
- t === "bottom" && p.bottom + f.height > u && (y = "top"), t === "top" && p.top - f.height < 0 && (y = "bottom"), t === "right" && p.right + f.width > h && (y = "left"), t === "left" && p.left - f.width < 0 && (y = "right");
799
+ t === "bottom" && f.bottom + p.height > m && (y = "top"), t === "top" && f.top - p.height < 0 && (y = "bottom"), t === "right" && f.right + p.width > h && (y = "left"), t === "left" && f.left - p.width < 0 && (y = "right");
1570
800
  const b = {};
1571
801
  switch (y) {
1572
802
  case "top":
1573
- b.bottom = p.height + 4, b.left = p.width / 2 - f.width / 2;
803
+ b.bottom = f.height + 4, b.left = f.width / 2 - p.width / 2;
1574
804
  break;
1575
805
  case "right":
1576
- b.left = p.width + 4, b.top = p.height / 2 - f.height / 2;
806
+ b.left = f.width + 4, b.top = f.height / 2 - p.height / 2;
1577
807
  break;
1578
808
  case "left":
1579
- b.right = p.width + 4, b.top = p.height / 2 - f.height / 2;
809
+ b.right = f.width + 4, b.top = f.height / 2 - p.height / 2;
1580
810
  break;
1581
811
  case "bottom":
1582
812
  default:
1583
- b.top = p.height + 4, b.left = p.width / 2 - f.width / 2;
813
+ b.top = f.height + 4, b.left = f.width / 2 - p.width / 2;
1584
814
  break;
1585
815
  }
1586
816
  d(b);
1587
817
  }
1588
- }, [r, t]), P(() => {
1589
- const m = (v) => {
818
+ }, [n, t]), P(() => {
819
+ const u = (v) => {
1590
820
  c.current && !c.current.contains(v.target) && l(!1);
1591
821
  };
1592
- return document.addEventListener("mousedown", m), () => {
1593
- document.removeEventListener("mousedown", m);
822
+ return document.addEventListener("mousedown", u), () => {
823
+ document.removeEventListener("mousedown", u);
1594
824
  };
1595
- }, []), /* @__PURE__ */ a(Fe.Provider, { value: { isOpen: r, setIsOpen: l, triggerRef: n, contentRef: i, styles: o }, children: /* @__PURE__ */ a(
1596
- "div",
1597
- {
1598
- ref: c,
1599
- className: "dropdown",
1600
- title: e,
1601
- children: s
1602
- }
1603
- ) });
825
+ }, []), a(Fe.Provider, { value: { isOpen: n, setIsOpen: l, triggerRef: i, contentRef: o, styles: r }, children: a("div", { ref: c, className: "dropdown", title: e, children: s }) });
1604
826
  };
1605
827
  ce.Trigger = xt;
1606
828
  ce.Content = Bt;
1607
829
  ce.Menu = Tt;
1608
830
  ce.Item = jt;
1609
- ce.Separator = Lt;
1610
- const ye = ({
1611
- as: e = "button",
1612
- id: t,
1613
- children: s,
1614
- className: r = "",
1615
- isActive: l,
1616
- onClick: o,
1617
- variant: d,
1618
- orientation: c,
1619
- ...n
1620
- }) => {
1621
- const i = [
831
+ ce.Separator = Et;
832
+ const ye = ({ as: e = "button", id: t, children: s, className: n = "", isActive: l, onClick: r, variant: d, orientation: c, ...i }) => {
833
+ const o = [
1622
834
  "clarity-tab",
1623
- r,
835
+ n,
1624
836
  l ? "active" : "",
1625
837
  l ? `variant-${d}` : "",
1626
838
  `orientation-${c}`
1627
839
  ].filter(Boolean).join(" ");
1628
- return /* @__PURE__ */ a(
1629
- e,
1630
- {
1631
- ...e === "button" ? { type: "button" } : {},
1632
- ...n,
1633
- className: i,
1634
- onClick: () => {
1635
- o && o(t);
1636
- },
1637
- role: "tab",
1638
- "aria-selected": l,
1639
- children: s
1640
- }
1641
- );
840
+ return a(e, { ...e === "button" ? { type: "button" } : {}, ...i, className: o, onClick: () => {
841
+ r == null || r(t);
842
+ }, role: "tab", "aria-selected": l, children: s });
1642
843
  };
1643
844
  ye.displayName = "Tabs.Tab";
1644
- const Ge = ({
1645
- children: e,
1646
- activeTab: t,
1647
- onTabChange: s,
1648
- variant: r = "primary",
1649
- orientation: l = "horizontal",
1650
- className: o = ""
1651
- }) => {
845
+ const Ge = ({ children: e, activeTab: t, onTabChange: s, variant: n = "primary", orientation: l = "horizontal", className: r = "" }) => {
1652
846
  const d = [
1653
847
  "clarity-tabs-container",
1654
- o,
848
+ r,
1655
849
  `orientation-${l}`
1656
- ].filter(Boolean).join(" "), c = [], n = [];
1657
- return ut.forEach(e, (i) => {
1658
- Q(i) && i.type === ye ? c.push(i) : n.push(i);
1659
- }), /* @__PURE__ */ g("div", { className: d, children: [
1660
- /* @__PURE__ */ a("div", { className: "clarity-tab-list", role: "tablist", children: c.map(
1661
- (i) => G(i, {
1662
- isActive: (i == null ? void 0 : i.props).id === t,
1663
- onClick: s,
1664
- variant: r,
1665
- orientation: l
1666
- })
1667
- ) }),
1668
- n
1669
- ] });
850
+ ].filter(Boolean).join(" "), c = [], i = [];
851
+ return mt.forEach(e, (o) => {
852
+ Q(o) && o.type === ye ? c.push(o) : i.push(o);
853
+ }), g("div", { className: d, children: [a("div", { className: "clarity-tab-list", role: "tablist", children: c.map((o) => G(o, {
854
+ isActive: T.isValidElement(o) && o.props.id === t,
855
+ onClick: s,
856
+ variant: n,
857
+ orientation: l
858
+ })) }), i] });
1670
859
  };
1671
860
  Ge.Tab = ye;
1672
861
  Ge.displayName = "Tabs";
1673
- const qt = ({
1674
- content: e,
1675
- position: t = "top",
1676
- variant: s = "primary",
1677
- product: r,
1678
- tone: l,
1679
- bgColor: o,
1680
- textColor: d,
1681
- children: c,
1682
- className: n = "",
1683
- disabled: i = !1,
1684
- delay: m = 200,
1685
- hideDelay: v = 100,
1686
- trigger: p = "hover",
1687
- arrow: f = !0,
1688
- ...u
1689
- }) => {
1690
- const [h, y] = B(!1), [b, C] = B(null), T = z(null), x = z(null), _ = "clarity-tooltip", $ = !!o, R = r && l && !$;
862
+ const qt = ({ content: e, position: t = "top", variant: s = "primary", product: n, tone: l, bgColor: r, textColor: d, children: c, className: i = "", disabled: o = !1, delay: u = 200, hideDelay: v = 100, trigger: f = "hover", arrow: p = !0, ...m }) => {
863
+ const [h, y] = B(!1), [b, C] = B(null), j = z(null), x = z(null), _ = "clarity-tooltip", $ = !!r, L = n && l && !$;
1691
864
  let k = "";
1692
- $ ? k = `${_}__content--custom-bg` : R ? k = `${_}__content--custom` : k = `${_}__content--${s}`;
1693
- const j = [
865
+ $ ? k = `${_}__content--custom-bg` : L ? k = `${_}__content--custom` : k = `${_}__content--${s}`;
866
+ const E = [
1694
867
  _,
1695
868
  `${_}--${t}`,
1696
- n
1697
- ].filter(Boolean).join(" "), S = [
869
+ i
870
+ ].filter(Boolean).join(" "), R = [
1698
871
  `${_}__content`,
1699
872
  k,
1700
- f && `${_}__content--arrow`
1701
- ].filter(Boolean).join(" "), I = {}, E = {};
1702
- $ && o && (E["--tooltip-bg-color"] = o), d && (E["--tooltip-text-color"] = d), R && r && l && (E["--tooltip-product"] = r, E["--tooltip-tone"] = l);
873
+ p && `${_}__content--arrow`
874
+ ].filter(Boolean).join(" "), I = {}, S = {};
875
+ $ && r && (S["--tooltip-bg-color"] = r), d && (S["--tooltip-text-color"] = d), L && n && l && (S["--tooltip-product"] = n, S["--tooltip-tone"] = l);
1703
876
  const w = {
1704
877
  ...I,
1705
- ...Object.keys(E).length > 0 ? E : {}
1706
- }, H = () => {
1707
- if (i) return;
878
+ ...Object.keys(S).length > 0 ? S : {}
879
+ }, A = () => {
880
+ if (o)
881
+ return;
1708
882
  b && clearTimeout(b);
1709
- const A = setTimeout(() => {
883
+ const V = setTimeout(() => {
1710
884
  y(!0);
1711
- }, m);
1712
- C(A);
885
+ }, u);
886
+ C(V);
1713
887
  }, W = () => {
1714
888
  b && clearTimeout(b);
1715
- const A = setTimeout(() => {
889
+ const V = setTimeout(() => {
1716
890
  y(!1);
1717
891
  }, v);
1718
- C(A);
1719
- }, V = () => {
1720
- i || y(!h);
892
+ C(V);
893
+ }, H = () => {
894
+ o || y(!h);
1721
895
  }, U = () => {
1722
- i || H();
896
+ o || A();
1723
897
  }, q = () => {
1724
898
  W();
1725
899
  };
@@ -1727,162 +901,115 @@ const qt = ({
1727
901
  b && clearTimeout(b);
1728
902
  }, [b]);
1729
903
  const M = {};
1730
- return p === "hover" ? (M.onMouseEnter = H, M.onMouseLeave = W) : p === "click" ? M.onClick = V : p === "focus" && (M.onFocus = U, M.onBlur = q), /* @__PURE__ */ g(
1731
- "div",
1732
- {
1733
- ref: x,
1734
- className: `${_}__trigger`,
1735
- ...M,
1736
- ...u,
1737
- children: [
1738
- c,
1739
- h && /* @__PURE__ */ a(
1740
- "div",
1741
- {
1742
- ref: T,
1743
- className: j,
1744
- style: w,
1745
- role: "tooltip",
1746
- "aria-hidden": !h,
1747
- children: /* @__PURE__ */ a("div", { className: S, children: e })
1748
- }
1749
- )
1750
- ]
1751
- }
1752
- );
1753
- }, Ue = Z(null), ne = () => {
904
+ return f === "hover" ? (M.onMouseEnter = A, M.onMouseLeave = W) : f === "click" ? M.onClick = H : f === "focus" && (M.onFocus = U, M.onBlur = q), g("div", { ref: x, className: `${_}__trigger`, ...M, ...m, children: [c, h && a("div", { ref: j, className: E, style: w, role: "tooltip", "aria-hidden": !h, children: a("div", { className: R, children: e }) })] });
905
+ }, Ue = Z(null), re = () => {
1754
906
  const e = K(Ue);
1755
907
  if (!e)
1756
908
  throw new Error("useCommand must be used within a Command provider");
1757
909
  return e;
1758
- }, qe = ({
1759
- children: e,
1760
- className: t = "",
1761
- variant: s = "secondary",
1762
- emptyText: r = "No results found.",
1763
- inputPlaceholder: l = "Search...",
1764
- ...o
1765
- }) => {
1766
- const [d, c] = B(""), [n, i] = B(null), [m, v] = B(!1), p = [
910
+ }, qe = ({ children: e, className: t = "", variant: s = "secondary", emptyText: n = "No results found.", inputPlaceholder: l = "Search...", ...r }) => {
911
+ const [d, c] = B(""), [i, o] = B(null), [u, v] = B(!1), f = [
1767
912
  "clarity-command",
1768
913
  `clarity-command--${s}`,
1769
914
  t
1770
- ].filter(Boolean).join(" "), f = oe(() => ({
915
+ ].filter(Boolean).join(" "), p = oe(() => ({
1771
916
  searchTerm: d,
1772
917
  setSearchTerm: c,
1773
- value: n,
1774
- setValue: i,
918
+ value: i,
919
+ setValue: o,
1775
920
  variant: s,
1776
921
  texts: {
1777
- empty: r,
922
+ empty: n,
1778
923
  inputPlaceholder: l
1779
924
  },
1780
- isOpen: m,
925
+ isOpen: u,
1781
926
  setIsOpen: v
1782
- }), [d, n, s, r, l, m]);
1783
- return /* @__PURE__ */ a(Ue.Provider, { value: f, children: /* @__PURE__ */ a("div", { className: p, ...o, children: e }) });
927
+ }), [d, i, s, n, l, u]);
928
+ return a(Ue.Provider, { value: p, children: a("div", { className: f, ...r, children: e }) });
1784
929
  };
1785
930
  qe.displayName = "Command";
1786
931
  const Xe = ({ placeholder: e = "Search...", variant: t, onClick: s }) => {
1787
- const { setIsOpen: r, variant: l } = ne(), [o, d] = B(!1);
932
+ const { setIsOpen: n, variant: l } = re(), [r, d] = B(!1);
1788
933
  P(() => {
1789
934
  d(/Mac|iPod|iPhone|iPad/.test(navigator.platform));
1790
935
  }, []);
1791
- const n = [
936
+ const i = [
1792
937
  "clarity-command-button",
1793
938
  `clarity-command-button--${t || l}`
1794
939
  ].filter(Boolean).join(" ");
1795
- return /* @__PURE__ */ g("button", { className: n, onClick: (m) => {
1796
- r(!0), s == null || s(m);
1797
- }, children: [
1798
- /* @__PURE__ */ a("span", { children: e }),
1799
- /* @__PURE__ */ g("kbd", { className: "clarity-command-shortcut", children: [
1800
- o ? "⌘" : "Ctrl+",
1801
- "K"
1802
- ] })
1803
- ] });
940
+ return g("button", { className: i, onClick: (u) => {
941
+ n(!0), s == null || s(u);
942
+ }, children: [a("span", { children: e }), g("kbd", { className: "clarity-command-shortcut", children: [r ? "⌘" : "Ctrl+", "K"] })] });
1804
943
  };
1805
944
  Xe.displayName = "Command.Button";
1806
- const Ye = ({ children: e, ...t }) => {
1807
- const { isOpen: s, setIsOpen: r, variant: l } = ne();
945
+ const Ye = ({ children: e }) => {
946
+ const { isOpen: t, setIsOpen: s, variant: n } = re();
1808
947
  return P(() => {
1809
- const o = (d) => {
1810
- d.key === "k" && (d.metaKey || d.ctrlKey) && (d.preventDefault(), r(!s));
948
+ const l = (r) => {
949
+ r.key === "k" && (r.metaKey || r.ctrlKey) && (r.preventDefault(), s(!t));
1811
950
  };
1812
- return document.addEventListener("keydown", o), () => document.removeEventListener("keydown", o);
1813
- }, [s, r]), /* @__PURE__ */ a(ee, { isOpen: s, onClose: () => r(!1), size: "large", closeOnOverlayClick: !0, children: /* @__PURE__ */ a("div", { className: `clarity-command--${l}`, children: e }) });
951
+ return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
952
+ }, [t, s]), a(ee, { isOpen: t, onClose: () => s(!1), size: "large", closeOnOverlayClick: !0, children: a("div", { className: `clarity-command--${n}`, children: e }) });
1814
953
  };
1815
954
  Ye.displayName = "Command.Dialog";
1816
955
  const Je = ({ className: e = "", ...t }) => {
1817
- const { searchTerm: s, setSearchTerm: r, variant: l, texts: o, isOpen: d } = ne(), c = z(null);
956
+ const { searchTerm: s, setSearchTerm: n, variant: l, texts: r, isOpen: d } = re(), c = z(null);
1818
957
  P(() => {
1819
- var i;
1820
- d && ((i = c.current) == null || i.focus());
958
+ var o;
959
+ d && ((o = c.current) == null || o.focus());
1821
960
  }, [d]);
1822
- const n = [
961
+ const i = [
1823
962
  "clarity-command-input",
1824
963
  `clarity-command-input--${l}`,
1825
964
  e
1826
965
  ].filter(Boolean).join(" ");
1827
- return /* @__PURE__ */ a("div", { className: "clarity-command-input__wrapper", children: /* @__PURE__ */ a(
1828
- "input",
1829
- {
1830
- ref: c,
1831
- className: n,
1832
- value: s,
1833
- onChange: (i) => r(i.target.value),
1834
- placeholder: t.placeholder || o.inputPlaceholder,
1835
- ...t
1836
- }
1837
- ) });
966
+ return a("div", { className: "clarity-command-input__wrapper", children: a("input", { ref: c, className: i, value: s, onChange: (o) => n(o.target.value), placeholder: t.placeholder || r.inputPlaceholder, ...t }) });
1838
967
  };
1839
968
  Je.displayName = "Command.Input";
1840
969
  const Qe = ({ children: e, className: t = "", ...s }) => {
1841
- const { searchTerm: r } = ne();
970
+ const { searchTerm: n } = re();
1842
971
  let l = !1;
1843
- const o = (n) => L.Children.toArray(n).map((i) => {
972
+ const r = (i) => T.Children.toArray(i).map((o) => {
1844
973
  var v;
1845
- if (!L.isValidElement(i)) return i;
1846
- const m = i.type.displayName;
1847
- if (m === "Command.Empty")
974
+ if (!T.isValidElement(o))
975
+ return o;
976
+ const u = o.type.displayName;
977
+ if (u === "Command.Empty")
1848
978
  return null;
1849
- if (m === "Command.Item")
1850
- return (((v = i.props.children) == null ? void 0 : v.toString().toLowerCase()) || "").includes(r.toLowerCase()) ? (l = !0, i) : null;
1851
- if (m === "Command.Group") {
1852
- const p = o(i.props.children);
1853
- return L.Children.toArray(p).some((u) => L.isValidElement(u) && u.type.displayName === "Command.Item") ? L.cloneElement(i, { ...i.props, children: p }) : null;
979
+ if (u === "Command.Item")
980
+ return (((v = o.props.children) == null ? void 0 : v.toString().toLowerCase()) || "").includes(n.toLowerCase()) ? (l = !0, o) : null;
981
+ if (u === "Command.Group") {
982
+ const f = r(o.props.children);
983
+ return T.Children.toArray(f).some((m) => T.isValidElement(m) && m.type.displayName === "Command.Item") ? T.cloneElement(o, { ...o.props, children: f }) : null;
1854
984
  }
1855
- return i;
1856
- }).filter(Boolean), d = o(e), c = ["clarity-command-list", t].filter(Boolean).join(" ");
1857
- return /* @__PURE__ */ g("div", { className: c, ...s, children: [
1858
- d,
1859
- !l && /* @__PURE__ */ a(ve, {})
1860
- ] });
985
+ return o;
986
+ }).filter(Boolean), d = r(e), c = ["clarity-command-list", t].filter(Boolean).join(" ");
987
+ return g("div", { className: c, ...s, children: [d, !l && a(ve, {})] });
1861
988
  };
1862
989
  Qe.displayName = "Command.List";
1863
990
  const ve = ({ children: e, className: t = "", ...s }) => {
1864
- const { texts: r } = ne(), l = ["clarity-command-empty", t].filter(Boolean).join(" ");
1865
- return /* @__PURE__ */ a("div", { className: l, ...s, children: e || s.emptyText || r.empty });
991
+ const { texts: n } = re(), l = ["clarity-command-empty", t].filter(Boolean).join(" ");
992
+ return a("div", { className: l, ...s, children: e || s.emptyText || n.empty });
1866
993
  };
1867
994
  ve.displayName = "Command.Empty";
1868
995
  const Ze = ({ children: e, className: t = "", ...s }) => {
1869
- const r = ["clarity-command-group", t].filter(Boolean).join(" ");
1870
- return /* @__PURE__ */ a("div", { className: r, ...s, children: e });
996
+ const n = ["clarity-command-group", t].filter(Boolean).join(" ");
997
+ return a("div", { className: n, ...s, children: e });
1871
998
  };
1872
999
  Ze.displayName = "Command.Group";
1873
1000
  const Ke = ({ children: e, className: t = "", ...s }) => {
1874
- const { setValue: r, variant: l } = ne(), o = ["clarity-command-item", `clarity-command-item--${l}`, t].filter(Boolean).join(" ");
1875
- return /* @__PURE__ */ a("div", { className: o, onClick: () => r((e == null ? void 0 : e.toString()) || ""), ...s, children: e });
1001
+ const { setValue: n, variant: l } = re(), r = ["clarity-command-item", `clarity-command-item--${l}`, t].filter(Boolean).join(" ");
1002
+ return a("div", { className: r, onClick: () => n((e == null ? void 0 : e.toString()) || ""), ...s, children: e });
1876
1003
  };
1877
1004
  Ke.displayName = "Command.Item";
1878
1005
  const et = ({ className: e = "", ...t }) => {
1879
1006
  const s = ["clarity-command-separator", e].filter(Boolean).join(" ");
1880
- return /* @__PURE__ */ a("hr", { className: s, ...t });
1007
+ return a("hr", { className: s, ...t });
1881
1008
  };
1882
1009
  et.displayName = "Command.Separator";
1883
1010
  const tt = ({ children: e, className: t = "", ...s }) => {
1884
- const r = ["clarity-command-shortcut", t].filter(Boolean).join(" ");
1885
- return /* @__PURE__ */ a("span", { className: r, ...s, children: e });
1011
+ const n = ["clarity-command-shortcut", t].filter(Boolean).join(" ");
1012
+ return a("span", { className: n, ...s, children: e });
1886
1013
  };
1887
1014
  tt.displayName = "Command.Shortcut";
1888
1015
  const Xt = Object.assign(qe, {
@@ -1895,166 +1022,67 @@ const Xt = Object.assign(qe, {
1895
1022
  Item: Ke,
1896
1023
  Separator: et,
1897
1024
  Shortcut: tt
1898
- }), Rt = ({ columns: e, viewMode: t }) => {
1899
- const s = Array.from({ length: 5 }, (r, l) => l);
1900
- return t === "card" ? /* @__PURE__ */ g("div", { className: "card-view-wrapper is-loading", children: [
1901
- /* @__PURE__ */ a("div", { className: "skeleton card-view-header" }),
1902
- /* @__PURE__ */ a("div", { className: "card-view-body", children: s.map((r) => /* @__PURE__ */ a("div", { className: "skeleton card-view-row" }, r)) })
1903
- ] }) : /* @__PURE__ */ a("div", { className: "table-wrapper is-loading", children: /* @__PURE__ */ g("table", { children: [
1904
- /* @__PURE__ */ a("thead", { children: /* @__PURE__ */ a("tr", { className: "table-row", children: e.map((r) => /* @__PURE__ */ a("th", { className: "table-header-cell", children: /* @__PURE__ */ a("div", { className: "skeleton skeleton-text" }) }, r.key)) }) }),
1905
- /* @__PURE__ */ a("tbody", { children: s.map((r) => /* @__PURE__ */ a("tr", { className: "table-row", children: e.map((l) => /* @__PURE__ */ a("td", { className: "table-cell", children: /* @__PURE__ */ a("div", { className: "skeleton skeleton-text" }) }, l.key)) }, r)) })
1906
- ] }) });
1907
- }, Yt = ({
1908
- variant: e = "secondary",
1909
- columns: t,
1910
- data: s,
1911
- viewMode: r = "table",
1912
- isScrollable: l = !1,
1913
- isLoading: o = !1
1914
- }) => {
1915
- const [d, c] = B(null), [n, i] = B("none"), m = (u) => {
1916
- u.sortable && (d === u.key ? i((h) => h === "asc" ? "desc" : h === "desc" ? "none" : "asc") : (c(u.key), i("asc")));
1917
- }, v = oe(() => n === "none" || !d ? s : [...s].sort((u, h) => {
1918
- const y = u[d], b = h[d];
1919
- return y < b ? n === "asc" ? -1 : 1 : y > b ? n === "asc" ? 1 : -1 : 0;
1920
- }), [s, d, n]), p = (u) => u.sortable ? d !== u.key || n === "none" ? /* @__PURE__ */ a("span", { className: "sort-icon", children: "↕" }) : n === "asc" ? /* @__PURE__ */ a("span", { className: "sort-icon", children: "↑" }) : /* @__PURE__ */ a("span", { className: "sort-icon", children: "↓" }) : null;
1921
- if (o)
1922
- return /* @__PURE__ */ a(Rt, { columns: t, viewMode: r });
1923
- const f = `table-variant-${e} ${l ? "is-scrollable" : ""}`;
1924
- return r === "card" ? /* @__PURE__ */ g("div", { className: `card-view-wrapper ${f}`, children: [
1925
- /* @__PURE__ */ a("div", { className: `card-view-header table-header-cell-${e}`, children: t.map((u) => /* @__PURE__ */ g(
1926
- "div",
1927
- {
1928
- className: `card-view-header-cell ${u.sortable ? "sortable" : ""}`,
1929
- onClick: () => m(u),
1930
- style: { minWidth: u.minWidth },
1931
- children: [
1932
- u.header,
1933
- p(u)
1934
- ]
1935
- },
1936
- u.key
1937
- )) }),
1938
- /* @__PURE__ */ a("div", { className: "card-view-body", children: v.map((u, h) => /* @__PURE__ */ a("div", { className: `card-view-row table-row-${e}`, children: t.map((y) => /* @__PURE__ */ a("div", { className: `card-view-cell ${y.align ? `table-cell-align-${y.align}` : ""}`, style: { minWidth: y.minWidth }, children: y.render ? y.render(u) : u[y.key] }, y.key)) }, h)) })
1939
- ] }) : /* @__PURE__ */ a("div", { className: `table-wrapper ${f}`, children: /* @__PURE__ */ g("table", { children: [
1940
- /* @__PURE__ */ a("thead", { className: "table-header", children: /* @__PURE__ */ a("tr", { className: "table-row", children: t.map((u) => /* @__PURE__ */ g(
1941
- "th",
1942
- {
1943
- className: `table-header-cell ${u.sortable ? "sortable" : ""} table-header-cell-${e}`,
1944
- onClick: () => m(u),
1945
- style: { minWidth: u.minWidth },
1946
- children: [
1947
- u.header,
1948
- p(u)
1949
- ]
1950
- },
1951
- u.key
1952
- )) }) }),
1953
- /* @__PURE__ */ a("tbody", { children: v.map((u, h) => /* @__PURE__ */ a("tr", { className: `table-row table-row-${e}`, children: t.map((y) => /* @__PURE__ */ a("td", { className: `table-cell ${y.align ? `table-cell-align-${y.align}` : ""}`, style: { minWidth: y.minWidth }, children: y.render ? y.render(u) : u[y.key] }, y.key)) }, h)) })
1954
- ] }) });
1955
- }, Jt = ({
1956
- variant: e = "primary",
1957
- product: t,
1958
- tone: s,
1959
- size: r = "medium",
1960
- color: l,
1961
- className: o = "",
1962
- "aria-label": d = "Carregando...",
1963
- ...c
1964
- }) => {
1965
- const n = "clarity-spinner", v = l ? `${n}--custom` : t && s ? `${n}--custom` : `${n}--${e}`, p = [
1966
- n,
1967
- `${n}--${r}`,
1025
+ }), Lt = ({ columns: e, viewMode: t }) => {
1026
+ const s = Array.from({ length: 5 }, (n, l) => l);
1027
+ return t === "card" ? g("div", { className: "card-view-wrapper is-loading", children: [a("div", { className: "skeleton card-view-header" }), a("div", { className: "card-view-body", children: s.map((n) => a("div", { className: "skeleton card-view-row" }, n)) })] }) : a("div", { className: "table-wrapper is-loading", children: g("table", { children: [a("thead", { children: a("tr", { className: "table-row", children: e.map((n) => a("th", { className: "table-header-cell", children: a("div", { className: "skeleton skeleton-text" }) }, n.key)) }) }), a("tbody", { children: s.map((n) => a("tr", { className: "table-row", children: e.map((l) => a("td", { className: "table-cell", children: a("div", { className: "skeleton skeleton-text" }) }, l.key)) }, n)) })] }) });
1028
+ }, Yt = ({ variant: e = "secondary", columns: t, data: s, viewMode: n = "table", isScrollable: l = !1, isLoading: r = !1 }) => {
1029
+ const [d, c] = B(null), [i, o] = B("none"), u = (m) => {
1030
+ m.sortable && (d === m.key ? o((h) => h === "asc" ? "desc" : h === "desc" ? "none" : "asc") : (c(m.key), o("asc")));
1031
+ }, v = oe(() => i === "none" || !d ? s : [...s].sort((m, h) => {
1032
+ const y = m[d], b = h[d];
1033
+ return y < b ? i === "asc" ? -1 : 1 : y > b ? i === "asc" ? 1 : -1 : 0;
1034
+ }), [s, d, i]), f = (m) => m.sortable ? d !== m.key || i === "none" ? a("span", { className: "sort-icon", children: "↕" }) : i === "asc" ? a("span", { className: "sort-icon", children: "↑" }) : a("span", { className: "sort-icon", children: "↓" }) : null;
1035
+ if (r)
1036
+ return a(Lt, { columns: t, viewMode: n });
1037
+ const p = `table-variant-${e} ${l ? "is-scrollable" : ""}`;
1038
+ return n === "card" ? g("div", { className: `card-view-wrapper ${p}`, children: [a("div", { className: `card-view-header table-header-cell-${e}`, children: t.map((m) => g("div", { className: `card-view-header-cell ${m.sortable ? "sortable" : ""}`, onClick: () => u(m), style: { minWidth: m.minWidth }, children: [m.header, f(m)] }, m.key)) }), a("div", { className: "card-view-body", children: v.map((m, h) => a("div", { className: `card-view-row table-row-${e}`, children: t.map((y) => a("div", { className: `card-view-cell ${y.align ? `table-cell-align-${y.align}` : ""}`, style: { minWidth: y.minWidth }, children: y.render ? y.render(m) : m[y.key] }, y.key)) }, h)) })] }) : a("div", { className: `table-wrapper ${p}`, children: g("table", { children: [a("thead", { className: "table-header", children: a("tr", { className: "table-row", children: t.map((m) => g("th", { className: `table-header-cell ${m.sortable ? "sortable" : ""} table-header-cell-${e}`, onClick: () => u(m), style: { minWidth: m.minWidth }, children: [m.header, f(m)] }, m.key)) }) }), a("tbody", { children: v.map((m, h) => a("tr", { className: `table-row table-row-${e}`, children: t.map((y) => a("td", { className: `table-cell ${y.align ? `table-cell-align-${y.align}` : ""}`, style: { minWidth: y.minWidth }, children: y.render ? y.render(m) : m[y.key] }, y.key)) }, h)) })] }) });
1039
+ }, Jt = ({ variant: e = "primary", product: t, tone: s, size: n = "medium", color: l, className: r = "", "aria-label": d = "Carregando...", ...c }) => {
1040
+ const i = "clarity-spinner", v = l ? `${i}--custom` : t && s ? `${i}--custom` : `${i}--${e}`, f = [
1041
+ i,
1042
+ `${i}--${n}`,
1968
1043
  v,
1969
- o
1970
- ].filter(Boolean).join(" "), f = {};
1971
- return l ? f["--spinner-color"] = l : t && s && (f["--spinner-color"] = `var(--clarity-${t}-${s})`), /* @__PURE__ */ a(
1972
- "div",
1973
- {
1974
- className: p,
1975
- style: f,
1976
- role: "status",
1977
- "aria-label": d,
1978
- ...c,
1979
- children: /* @__PURE__ */ a("div", { className: `${n}__container`, children: /* @__PURE__ */ a(
1980
- "svg",
1981
- {
1982
- className: `${n}__svg`,
1983
- viewBox: "0 0 50 50",
1984
- xmlns: "http://www.w3.org/2000/svg",
1985
- children: /* @__PURE__ */ a(
1986
- "circle",
1987
- {
1988
- className: `${n}__circle`,
1989
- cx: "25",
1990
- cy: "25",
1991
- r: "20",
1992
- fill: "none",
1993
- strokeWidth: "4"
1994
- }
1995
- )
1996
- }
1997
- ) })
1998
- }
1999
- );
2000
- }, St = ({
2001
- className: e = "",
2002
- noGutters: t,
2003
- justify: s,
2004
- align: r,
2005
- children: l,
2006
- as: o = "div",
2007
- ...d
2008
- }) => {
1044
+ r
1045
+ ].filter(Boolean).join(" "), p = {};
1046
+ return l ? p["--spinner-color"] = l : t && s && (p["--spinner-color"] = `var(--clarity-${t}-${s})`), a("div", { className: f, style: p, role: "status", "aria-label": d, ...c, children: a("div", { className: `${i}__container`, children: a("svg", { className: `${i}__svg`, viewBox: "0 0 50 50", xmlns: "http://www.w3.org/2000/svg", children: a("circle", { className: `${i}__circle`, cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "4" }) }) }) });
1047
+ }, Rt = ({ className: e = "", noGutters: t, justify: s, align: n, children: l, as: r = "div", ...d }) => {
2009
1048
  const c = [
2010
1049
  "clarity-row",
2011
1050
  t ? "clarity-row--no-gutters" : "",
2012
1051
  s ? `clarity-row--justify-${s}` : "",
2013
- r ? `clarity-row--align-${r}` : "",
1052
+ n ? `clarity-row--align-${n}` : "",
2014
1053
  e
2015
1054
  ].filter(Boolean).join(" ");
2016
- return L.createElement(o, { className: c, ...d }, l);
1055
+ return T.createElement(r, { className: c, ...d }, l);
2017
1056
  };
2018
- St.displayName = "Row";
2019
- const Et = (e) => `${e / 12 * 100}%`, Ot = (e) => `${e / 12 * 100}%`, It = ({
2020
- className: e = "",
2021
- xs: t,
2022
- sm: s,
2023
- md: r,
2024
- lg: l,
2025
- xl: o,
2026
- xxl: d,
2027
- offset: c,
2028
- children: n,
2029
- as: i = "div",
2030
- style: m,
2031
- ...v
2032
- }) => {
2033
- const p = { ...m }, f = (y, b) => {
2034
- if (b === void 0) return;
1057
+ Rt.displayName = "Row";
1058
+ const St = (e) => `${e / 12 * 100}%`, Ot = (e) => `${e / 12 * 100}%`, It = ({ className: e = "", xs: t, sm: s, md: n, lg: l, xl: r, xxl: d, offset: c, children: i, as: o = "div", style: u, ...v }) => {
1059
+ const f = { ...u }, p = (y, b) => {
1060
+ if (b === void 0)
1061
+ return;
2035
1062
  const C = `--clarity-col-width-${y}`;
2036
- p[C] = typeof b == "number" ? Et(b) : "auto";
2037
- }, u = (y, b) => {
2038
- if (b === void 0) return;
1063
+ f[C] = typeof b == "number" ? St(b) : "auto";
1064
+ }, m = (y, b) => {
1065
+ if (b === void 0)
1066
+ return;
2039
1067
  const C = `--clarity-col-offset-${y}`;
2040
- p[C] = Ot(b);
1068
+ f[C] = Ot(b);
2041
1069
  };
2042
- f("xs", t), f("sm", s), f("md", r), f("lg", l), f("xl", o), f("xxl", d), u("xs", c == null ? void 0 : c.xs), u("sm", c == null ? void 0 : c.sm), u("md", c == null ? void 0 : c.md), u("lg", c == null ? void 0 : c.lg), u("xl", c == null ? void 0 : c.xl), u("xxl", c == null ? void 0 : c.xxl);
1070
+ p("xs", t), p("sm", s), p("md", n), p("lg", l), p("xl", r), p("xxl", d), m("xs", c == null ? void 0 : c.xs), m("sm", c == null ? void 0 : c.sm), m("md", c == null ? void 0 : c.md), m("lg", c == null ? void 0 : c.lg), m("xl", c == null ? void 0 : c.xl), m("xxl", c == null ? void 0 : c.xxl);
2043
1071
  const h = ["clarity-col", e].filter(Boolean).join(" ");
2044
- return L.createElement(i, { className: h, style: p, ...v }, n);
1072
+ return T.createElement(o, { className: h, style: f, ...v }, i);
2045
1073
  };
2046
1074
  It.displayName = "Col";
2047
- const st = ({ children: e, className: t }) => /* @__PURE__ */ a("div", { className: t, children: e });
1075
+ const st = ({ children: e, className: t }) => a("div", { className: t, children: e });
2048
1076
  st.displayName = "Card.Header";
2049
- const at = ({ children: e, className: t }) => /* @__PURE__ */ a("div", { className: t, children: e });
1077
+ const at = ({ children: e, className: t }) => a("div", { className: t, children: e });
2050
1078
  at.displayName = "Card.Content";
2051
- const rt = ({ children: e, className: t }) => /* @__PURE__ */ a("div", { className: t, children: e });
2052
- rt.displayName = "Card.Footer";
2053
- const me = ({ children: e, className: t }) => /* @__PURE__ */ a("div", { className: t, children: e });
2054
- me.Header = st;
2055
- me.Content = at;
2056
- me.Footer = rt;
2057
- me.displayName = "Card";
1079
+ const nt = ({ children: e, className: t }) => a("div", { className: t, children: e });
1080
+ nt.displayName = "Card.Footer";
1081
+ const ue = ({ children: e, className: t }) => a("div", { className: t, children: e });
1082
+ ue.Header = st;
1083
+ ue.Content = at;
1084
+ ue.Footer = nt;
1085
+ ue.displayName = "Card";
2058
1086
  const Qt = {
2059
1087
  primary: {
2060
1088
  50: "#f0f9ff",
@@ -2115,13 +1143,13 @@ const Qt = {
2115
1143
  }, Kt = (...e) => e.filter(Boolean).join(" "), es = () => Math.random().toString(36).substr(2, 9);
2116
1144
  export {
2117
1145
  Ut as Accordion,
2118
- At as Badge,
2119
- ft as Box,
2120
- Ht as Button,
2121
- Vt as ButtonGroup,
1146
+ Vt as Badge,
1147
+ pt as Box,
1148
+ At as Button,
1149
+ Ht as ButtonGroup,
2122
1150
  zt as ButtonIcon,
2123
1151
  Gt as ButtonLink,
2124
- me as Card,
1152
+ ue as Card,
2125
1153
  Ct as CheckInput,
2126
1154
  It as Col,
2127
1155
  Xt as Command,
@@ -2132,7 +1160,7 @@ export {
2132
1160
  ee as Modal,
2133
1161
  bt as MultiSelect,
2134
1162
  le as Offcanvas,
2135
- St as Row,
1163
+ Rt as Row,
2136
1164
  vt as Select,
2137
1165
  Jt as Spinner,
2138
1166
  Yt as Table,