beth-clarity 1.0.9 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/clarity-design-system.es.js +1416 -408
  2. package/dist/clarity-design-system.umd.js +2 -2
  3. package/dist/styles/index.css +1 -1
  4. package/package.json +1 -1
package/dist/clarity-design-system.es.js CHANGED
@@ -1,285 +1,329 @@
1
- import { jsxs as u, jsx as t } from "react/jsx-runtime";
2
- import P, { useState as R, useRef as B, useEffect as W, forwardRef as ne, isValidElement as ee, createContext as oe, cloneElement as Z, useContext as de } from "react";
3
- const _e = ({
4
- variant: a = "primary",
5
- product: l,
6
- tone: s,
7
- hoverTone: m,
8
- size: c = "medium",
1
+ import { jsx as t, jsxs as C, Fragment as Ve } from "react/jsx-runtime";
2
+ import O, { useState as T, useRef as V, useEffect as D, forwardRef as Me, isValidElement as X, createContext as q, cloneElement as W, useContext as G, useMemo as te, useCallback as ae, useLayoutEffect as We } from "react";
3
+ import Fe from "react-dom";
4
+ const dt = ({
5
+ variant: e = "primary",
6
+ product: s,
7
+ tone: l,
8
+ size: a = "medium",
9
+ bgColor: i,
10
+ textColor: r,
11
+ children: c,
12
+ className: f = "",
13
+ rounded: n = !1,
14
+ outlined: m = !1,
15
+ ...p
16
+ }) => {
17
+ const y = "clarity-badge", u = !!i, d = s && l && !u;
18
+ let o = "";
19
+ u ? o = `${y}--custom-bg` : d ? o = `${y}--custom` : o = `${y}--${e}`;
20
+ const N = [
21
+ y,
22
+ o,
23
+ `${y}--${a}`,
24
+ n ? `${y}--rounded` : "",
25
+ m ? `${y}--outlined` : "",
26
+ f
27
+ ].filter(Boolean).join(" "), v = {};
28
+ u && (v.backgroundColor = i, r && (v.color = r));
29
+ const b = d && s && l ? {
30
+ "--custom-bg-color": `var(--clarity-${s}-${l})`,
31
+ "--custom-text-color": l && parseInt(l) >= 500 ? "white" : `var(--clarity-${s}-800)`
32
+ } : {};
33
+ return /* @__PURE__ */ t(
34
+ "span",
35
+ {
36
+ className: N,
37
+ style: {
38
+ ...v,
39
+ ...b
40
+ },
41
+ ...p,
42
+ children: c
43
+ }
44
+ );
45
+ }, ut = ({
46
+ variant: e = "primary",
47
+ product: s,
48
+ tone: l,
49
+ hoverTone: a,
50
+ size: i = "medium",
9
51
  disabled: r = !1,
10
- loading: o = !1,
52
+ loading: c = !1,
11
53
  children: f,
12
- onClick: y,
13
- type: N = "button",
14
- className: w = "",
15
- ...x
54
+ onClick: n,
55
+ type: m = "button",
56
+ className: p = "",
57
+ title: y,
58
+ ...u
16
59
  }) => {
17
- const i = "clarity-button", n = l && s, b = n ? `${i}--custom` : `${i}--${a}`, j = [
18
- i,
19
- b,
20
- `${i}--${c}`,
21
- o && `${i}--loading`,
22
- r && `${i}--disabled`,
23
- w
24
- ].filter(Boolean).join(" "), k = (h) => {
25
- const _ = parseInt(h);
26
- return _ >= 800 ? "900" : _ >= 700 ? "800" : _ >= 600 ? "700" : _ >= 500 ? "600" : _ >= 400 ? "500" : _ >= 300 ? "400" : _ >= 200 ? "300" : "200";
27
- }, d = n ? {
28
- "--custom-bg-color": `var(--clarity-${l}-${s})`,
29
- "--custom-hover-color": `var(--clarity-${l}-${m || k(s)})`
60
+ const d = "clarity-button", o = s && l, N = o ? `${d}--custom` : `${d}--${e}`, v = [
61
+ d,
62
+ N,
63
+ `${d}--${i}`,
64
+ c && `${d}--loading`,
65
+ r && `${d}--disabled`,
66
+ p
67
+ ].filter(Boolean).join(" "), b = (j) => {
68
+ const g = parseInt(j);
69
+ return g >= 800 ? "900" : g >= 700 ? "800" : g >= 600 ? "700" : g >= 500 ? "600" : g >= 400 ? "500" : g >= 300 ? "400" : g >= 200 ? "300" : "200";
70
+ }, w = o ? {
71
+ "--custom-bg-color": `var(--clarity-${s}-${l})`,
72
+ "--custom-hover-color": `var(--clarity-${s}-${a || b(l)})`
30
73
  } : {};
31
- return /* @__PURE__ */ u(
74
+ return /* @__PURE__ */ C(
32
75
  "button",
33
76
  {
34
- className: j,
35
- style: d,
36
- disabled: r || o,
37
- onClick: y,
38
- type: N,
39
- ...x,
77
+ className: v,
78
+ style: w,
79
+ disabled: r || c,
80
+ onClick: n,
81
+ type: m,
82
+ title: y,
83
+ ...u,
40
84
  children: [
41
- o && /* @__PURE__ */ t("div", { className: `${i}__spinner` }),
85
+ c && /* @__PURE__ */ t("div", { className: `${d}__spinner` }),
42
86
  f
43
87
  ]
44
88
  }
45
89
  );
46
- }, ue = P.forwardRef(({
47
- variant: a,
48
- size: l = "medium",
49
- label: s,
50
- helperText: m,
51
- error: c = !1,
90
+ }, Ue = O.forwardRef(({
91
+ variant: e,
92
+ size: s = "medium",
93
+ label: l,
94
+ helperText: a,
95
+ error: i = !1,
52
96
  errorMessage: r,
53
- startIcon: o,
97
+ startIcon: c,
54
98
  endIcon: f,
55
- className: y = "",
56
- disabled: N = !1,
57
- value: w,
58
- defaultValue: x,
59
- onFocus: i,
60
- onBlur: n,
61
- ...b
62
- }, j) => {
63
- const [k, d] = R(!1), [h, _] = R(!1), g = B(null);
64
- P.useImperativeHandle(j, () => g.current), W(() => {
65
- const p = g.current;
66
- p && _(p.value.length > 0);
67
- }, [w, x]);
68
- const v = (p) => {
69
- d(!0), i == null || i(p);
70
- }, M = (p) => {
71
- d(!1), _(p.target.value.length > 0), n == null || n(p);
72
- }, O = [
99
+ className: n = "",
100
+ disabled: m = !1,
101
+ value: p,
102
+ defaultValue: y,
103
+ onFocus: u,
104
+ onBlur: d,
105
+ ...o
106
+ }, N) => {
107
+ const [v, b] = T(!1), [w, j] = T(!1), g = V(null);
108
+ O.useImperativeHandle(N, () => g.current), D(() => {
109
+ const x = g.current;
110
+ x && j(x.value.length > 0);
111
+ }, [p, y]);
112
+ const _ = (x) => {
113
+ b(!0), u == null || u(x);
114
+ }, k = (x) => {
115
+ b(!1), j(x.target.value.length > 0), d == null || d(x);
116
+ }, E = [
73
117
  "clarity-input",
74
118
  "clarity-input--outlined",
75
- `clarity-input--${l}`,
76
- a && `clarity-input--${a}`,
77
- c && "clarity-input--error",
78
- N && "clarity-input--disabled",
79
- (k || h) && "clarity-input--focused",
80
- o && "clarity-input--with-start-icon",
119
+ `clarity-input--${s}`,
120
+ e && `clarity-input--${e}`,
121
+ i && "clarity-input--error",
122
+ m && "clarity-input--disabled",
123
+ (v || w) && "clarity-input--focused",
124
+ c && "clarity-input--with-start-icon",
81
125
  f && "clarity-input--with-end-icon",
82
- y
126
+ n
83
127
  ].filter(Boolean).join(" ");
84
- return /* @__PURE__ */ u("div", { className: "clarity-input-wrapper", children: [
85
- /* @__PURE__ */ u("div", { className: O, children: [
86
- o && /* @__PURE__ */ t("div", { className: "clarity-input__start-icon", children: o }),
87
- /* @__PURE__ */ u("div", { className: "clarity-input__field", children: [
128
+ return /* @__PURE__ */ C("div", { className: "clarity-input-wrapper", children: [
129
+ /* @__PURE__ */ C("div", { className: E, children: [
130
+ c && /* @__PURE__ */ t("div", { className: "clarity-input__start-icon", children: c }),
131
+ /* @__PURE__ */ C("div", { className: "clarity-input__field", children: [
88
132
  /* @__PURE__ */ t(
89
133
  "input",
90
134
  {
91
135
  ref: g,
92
136
  className: "clarity-input__element",
93
- disabled: N,
94
- value: w,
95
- defaultValue: x,
96
- onFocus: v,
97
- onBlur: M,
98
- ...b
137
+ disabled: m,
138
+ value: p,
139
+ defaultValue: y,
140
+ onFocus: _,
141
+ onBlur: k,
142
+ ...o
99
143
  }
100
144
  ),
101
- s && /* @__PURE__ */ t("label", { className: "clarity-input__label", children: s })
145
+ l && /* @__PURE__ */ t("label", { className: "clarity-input__label", children: l })
102
146
  ] }),
103
147
  f && /* @__PURE__ */ t("div", { className: "clarity-input__end-icon", children: f })
104
148
  ] }),
105
- (m || c && r) && /* @__PURE__ */ t("div", { className: "clarity-input__helper-text", children: c && r ? r : m })
149
+ (a || i && r) && /* @__PURE__ */ t("div", { className: "clarity-input__helper-text", children: i && r ? r : a })
106
150
  ] });
107
151
  });
108
- ue.displayName = "Input";
109
- const me = P.forwardRef(({
110
- variant: a,
111
- size: l = "medium",
112
- label: s,
113
- helperText: m,
114
- error: c = !1,
152
+ Ue.displayName = "Input";
153
+ const ze = O.forwardRef(({
154
+ variant: e,
155
+ size: s = "medium",
156
+ label: l,
157
+ helperText: a,
158
+ error: i = !1,
115
159
  errorMessage: r,
116
- startIcon: o,
160
+ startIcon: c,
117
161
  endIcon: f,
118
- className: y = "",
119
- disabled: N = !1,
120
- value: w,
121
- defaultValue: x,
122
- onFocus: i,
123
- onBlur: n,
124
- rows: b = 3,
125
- minHeight: j,
126
- maxHeight: k,
127
- resizable: d = !0,
128
- ...h
129
- }, _) => {
130
- const [g, v] = R(!1), [M, O] = R(!1), p = B(null);
131
- P.useImperativeHandle(_, () => p.current), W(() => {
132
- const L = p.current;
133
- L && O(L.value.length > 0);
134
- }, [w, x]);
135
- const E = (L) => {
136
- v(!0), i == null || i(L);
137
- }, S = (L) => {
138
- v(!1), O(L.target.value.length > 0), n == null || n(L);
139
- }, T = [
162
+ className: n = "",
163
+ disabled: m = !1,
164
+ value: p,
165
+ defaultValue: y,
166
+ onFocus: u,
167
+ onBlur: d,
168
+ rows: o = 3,
169
+ minHeight: N,
170
+ maxHeight: v,
171
+ resizable: b = !0,
172
+ ...w
173
+ }, j) => {
174
+ const [g, _] = T(!1), [k, E] = T(!1), x = V(null);
175
+ O.useImperativeHandle(j, () => x.current), D(() => {
176
+ const $ = x.current;
177
+ $ && E($.value.length > 0);
178
+ }, [p, y]);
179
+ const B = ($) => {
180
+ _(!0), u == null || u($);
181
+ }, I = ($) => {
182
+ _(!1), E($.target.value.length > 0), d == null || d($);
183
+ }, A = [
140
184
  "clarity-textarea",
141
185
  "clarity-textarea--outlined",
142
- `clarity-textarea--${l}`,
143
- a && `clarity-textarea--${a}`,
144
- c && "clarity-textarea--error",
145
- N && "clarity-textarea--disabled",
146
- (g || M) && "clarity-textarea--focused",
147
- o && "clarity-textarea--with-start-icon",
186
+ `clarity-textarea--${s}`,
187
+ e && `clarity-textarea--${e}`,
188
+ i && "clarity-textarea--error",
189
+ m && "clarity-textarea--disabled",
190
+ (g || k) && "clarity-textarea--focused",
191
+ c && "clarity-textarea--with-start-icon",
148
192
  f && "clarity-textarea--with-end-icon",
149
- y
150
- ].filter(Boolean).join(" "), D = {
151
- resize: d ? "vertical" : "none",
152
- minHeight: j ? `${j}px` : void 0,
153
- maxHeight: k ? `${k}px` : void 0
193
+ n
194
+ ].filter(Boolean).join(" "), L = {
195
+ resize: b ? "vertical" : "none",
196
+ minHeight: N ? `${N}px` : void 0,
197
+ maxHeight: v ? `${v}px` : void 0
154
198
  };
155
- return /* @__PURE__ */ u("div", { className: "clarity-textarea-wrapper", children: [
156
- /* @__PURE__ */ u("div", { className: T, children: [
157
- o && /* @__PURE__ */ t("div", { className: "clarity-textarea__start-icon", children: o }),
158
- /* @__PURE__ */ u("div", { className: "clarity-textarea__field", children: [
199
+ return /* @__PURE__ */ C("div", { className: "clarity-textarea-wrapper", children: [
200
+ /* @__PURE__ */ C("div", { className: A, children: [
201
+ c && /* @__PURE__ */ t("div", { className: "clarity-textarea__start-icon", children: c }),
202
+ /* @__PURE__ */ C("div", { className: "clarity-textarea__field", children: [
159
203
  /* @__PURE__ */ t(
160
204
  "textarea",
161
205
  {
162
- ref: p,
206
+ ref: x,
163
207
  className: "clarity-textarea__element",
164
- disabled: N,
165
- value: w,
166
- defaultValue: x,
167
- onFocus: E,
168
- onBlur: S,
169
- rows: b,
170
- style: D,
171
- ...h
208
+ disabled: m,
209
+ value: p,
210
+ defaultValue: y,
211
+ onFocus: B,
212
+ onBlur: I,
213
+ rows: o,
214
+ style: L,
215
+ ...w
172
216
  }
173
217
  ),
174
- s && /* @__PURE__ */ t("label", { className: "clarity-textarea__label", children: s })
218
+ l && /* @__PURE__ */ t("label", { className: "clarity-textarea__label", children: l })
175
219
  ] }),
176
220
  f && /* @__PURE__ */ t("div", { className: "clarity-textarea__end-icon", children: f })
177
221
  ] }),
178
- (m || c && r) && /* @__PURE__ */ t("div", { className: "clarity-textarea__helper-text", children: c && r ? r : m })
222
+ (a || i && r) && /* @__PURE__ */ t("div", { className: "clarity-textarea__helper-text", children: i && r ? r : a })
179
223
  ] });
180
224
  });
181
- me.displayName = "Textarea";
182
- const fe = P.forwardRef(({
183
- variant: a,
184
- size: l = "medium",
185
- label: s,
186
- helperText: m,
187
- error: c = !1,
225
+ ze.displayName = "Textarea";
226
+ const qe = O.forwardRef(({
227
+ variant: e,
228
+ size: s = "medium",
229
+ label: l,
230
+ helperText: a,
231
+ error: i = !1,
188
232
  errorMessage: r,
189
- startIcon: o,
233
+ startIcon: c,
190
234
  endIcon: f,
191
- className: y = "",
192
- disabled: N = !1,
193
- value: w,
194
- defaultValue: x,
195
- onFocus: i,
196
- onBlur: n,
197
- onChange: b,
198
- options: j,
199
- placeholder: k = "Selecione uma opção",
200
- isClearable: d = !1,
201
- isSearchable: h = !1,
202
- ..._
235
+ className: n = "",
236
+ disabled: m = !1,
237
+ value: p,
238
+ defaultValue: y,
239
+ onFocus: u,
240
+ onBlur: d,
241
+ onChange: o,
242
+ options: N,
243
+ placeholder: v = "Selecione uma opção",
244
+ isClearable: b = !1,
245
+ isSearchable: w = !1,
246
+ ...j
203
247
  }, g) => {
204
- const [v, M] = R(!1), [O, p] = R(!1), [E, S] = R(w || x || ""), [T, D] = R(""), L = B(null), A = B(null);
205
- P.useImperativeHandle(g, () => L.current), W(() => {
206
- w !== void 0 && S(w);
207
- }, [w]), W(() => {
208
- const e = (C) => {
209
- L.current && !L.current.contains(C.target) && (M(!1), p(!1), n == null || n());
248
+ const [_, k] = T(!1), [E, x] = T(!1), [B, I] = T(p || y || ""), [A, L] = T(""), $ = V(null), M = V(null);
249
+ O.useImperativeHandle(g, () => $.current), D(() => {
250
+ p !== void 0 && I(p);
251
+ }, [p]), D(() => {
252
+ const h = (S) => {
253
+ $.current && !$.current.contains(S.target) && (k(!1), x(!1), d == null || d());
210
254
  };
211
- return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
212
- }, [n]);
213
- const V = h && T ? j.filter(
214
- (e) => e.label.toLowerCase().includes(T.toLowerCase())
215
- ) : j, z = () => {
216
- N || (M(!v), p(!v), v ? (n == null || n(), h && D("")) : (i == null || i(), h && setTimeout(() => {
217
- var e;
218
- (e = A.current) == null || e.focus();
255
+ return document.addEventListener("mousedown", h), () => document.removeEventListener("mousedown", h);
256
+ }, [d]);
257
+ const H = w && A ? N.filter(
258
+ (h) => h.label.toLowerCase().includes(A.toLowerCase())
259
+ ) : N, F = () => {
260
+ m || (k(!_), x(!_), _ ? (d == null || d(), w && L("")) : (u == null || u(), w && setTimeout(() => {
261
+ var h;
262
+ (h = M.current) == null || h.focus();
219
263
  }, 0)));
220
- }, q = (e) => {
221
- e.disabled || (S(e.value), M(!1), p(!1), D(""), b == null || b(e.value), n == null || n());
222
- }, G = (e) => {
223
- D(e.target.value);
224
- }, J = (e) => {
225
- e.key === "Escape" ? (M(!1), p(!1), D("")) : e.key === "Enter" && V.length > 0 && V[0] && q(V[0]);
226
- }, I = j.find((e) => e.value === E), F = E !== "" && E !== void 0, Q = (e) => {
227
- e.stopPropagation(), S(""), b == null || b("");
228
- }, X = F || O || k || h && T, Y = [
264
+ }, Q = (h) => {
265
+ h.disabled || (I(h.value), k(!1), x(!1), L(""), o == null || o(h.value), d == null || d());
266
+ }, K = (h) => {
267
+ L(h.target.value);
268
+ }, U = (h) => {
269
+ h.key === "Escape" ? (k(!1), x(!1), L("")) : h.key === "Enter" && H.length > 0 && H[0] && Q(H[0]);
270
+ }, P = N.find((h) => h.value === B), le = B !== "" && B !== void 0, ie = (h) => {
271
+ h.stopPropagation(), I(""), o == null || o("");
272
+ }, ne = le || E || v || w && A, re = [
229
273
  "clarity-select",
230
274
  "clarity-select--outlined",
231
- `clarity-select--${l}`,
232
- a && `clarity-select--${a}`,
233
- c && "clarity-select--error",
234
- N && "clarity-select--disabled",
235
- (O || v) && "clarity-select--focused",
236
- X && "clarity-select--label-up",
237
- v && "clarity-select--open",
238
- h && "clarity-select--searchable",
239
- o && "clarity-select--with-start-icon",
240
- (f || d) && "clarity-select--with-end-icon",
241
- y
275
+ `clarity-select--${s}`,
276
+ e && `clarity-select--${e}`,
277
+ i && "clarity-select--error",
278
+ m && "clarity-select--disabled",
279
+ (E || _) && "clarity-select--focused",
280
+ ne && "clarity-select--label-up",
281
+ _ && "clarity-select--open",
282
+ w && "clarity-select--searchable",
283
+ c && "clarity-select--with-start-icon",
284
+ (f || b) && "clarity-select--with-end-icon",
285
+ n
242
286
  ].filter(Boolean).join(" ");
243
- return /* @__PURE__ */ u("div", { className: "clarity-select-wrapper", children: [
244
- /* @__PURE__ */ u(
287
+ return /* @__PURE__ */ C("div", { className: "clarity-select-wrapper", children: [
288
+ /* @__PURE__ */ C(
245
289
  "div",
246
290
  {
247
- ref: L,
248
- className: Y,
249
- onClick: h ? void 0 : z,
291
+ ref: $,
292
+ className: re,
293
+ onClick: w ? void 0 : F,
250
294
  role: "combobox",
251
- "aria-expanded": v,
295
+ "aria-expanded": _,
252
296
  "aria-haspopup": "listbox",
253
- tabIndex: N || h ? -1 : 0,
254
- ..._,
297
+ tabIndex: m || w ? -1 : 0,
298
+ ...j,
255
299
  children: [
256
- o && /* @__PURE__ */ t("div", { className: "clarity-select__start-icon", children: o }),
257
- /* @__PURE__ */ u("div", { className: "clarity-select__field", children: [
258
- h ? /* @__PURE__ */ t(
300
+ c && /* @__PURE__ */ t("div", { className: "clarity-select__start-icon", children: c }),
301
+ /* @__PURE__ */ C("div", { className: "clarity-select__field", children: [
302
+ w ? /* @__PURE__ */ t(
259
303
  "input",
260
304
  {
261
- ref: A,
305
+ ref: M,
262
306
  type: "text",
263
307
  className: "clarity-select__search-input",
264
- value: v ? T : I ? I.label : "",
265
- onChange: G,
266
- onKeyDown: J,
308
+ value: _ ? A : P ? P.label : "",
309
+ onChange: K,
310
+ onKeyDown: U,
267
311
  onFocus: () => {
268
- v || (M(!0), p(!0), i == null || i());
312
+ _ || (k(!0), x(!0), u == null || u());
269
313
  },
270
- placeholder: I ? I.label : k,
271
- disabled: N,
272
- readOnly: !v
314
+ placeholder: P ? P.label : v,
315
+ disabled: m,
316
+ readOnly: !_
273
317
  }
274
- ) : /* @__PURE__ */ t("div", { className: "clarity-select__display", children: I ? I.label : k }),
275
- s && /* @__PURE__ */ t("label", { className: "clarity-select__label", children: s })
318
+ ) : /* @__PURE__ */ t("div", { className: "clarity-select__display", children: P ? P.label : v }),
319
+ l && /* @__PURE__ */ t("label", { className: "clarity-select__label", children: l })
276
320
  ] }),
277
- d && F && /* @__PURE__ */ t(
321
+ b && le && /* @__PURE__ */ t(
278
322
  "button",
279
323
  {
280
324
  type: "button",
281
325
  className: "clarity-select__clear-button",
282
- onClick: Q,
326
+ onClick: ie,
283
327
  "aria-label": "Limpar seleção",
284
328
  children: /* @__PURE__ */ t(
285
329
  "svg",
@@ -306,7 +350,7 @@ const fe = P.forwardRef(({
306
350
  "div",
307
351
  {
308
352
  className: "clarity-select__end-icon",
309
- onClick: h ? z : void 0,
353
+ onClick: w ? F : void 0,
310
354
  children: f || /* @__PURE__ */ t(
311
355
  "svg",
312
356
  {
@@ -329,148 +373,148 @@ const fe = P.forwardRef(({
329
373
  )
330
374
  }
331
375
  ),
332
- v && /* @__PURE__ */ t("div", { className: "clarity-select__dropdown", children: /* @__PURE__ */ t("ul", { className: "clarity-select__options", role: "listbox", children: V.length > 0 ? V.map((e) => /* @__PURE__ */ t(
376
+ _ && /* @__PURE__ */ t("div", { className: "clarity-select__dropdown", children: /* @__PURE__ */ t("ul", { className: "clarity-select__options", role: "listbox", children: H.length > 0 ? H.map((h) => /* @__PURE__ */ t(
333
377
  "li",
334
378
  {
335
379
  className: [
336
380
  "clarity-select__option",
337
- e.disabled && "clarity-select__option--disabled",
338
- E === e.value && "clarity-select__option--selected"
381
+ h.disabled && "clarity-select__option--disabled",
382
+ B === h.value && "clarity-select__option--selected"
339
383
  ].filter(Boolean).join(" "),
340
- onClick: () => q(e),
384
+ onClick: () => Q(h),
341
385
  role: "option",
342
- "aria-selected": E === e.value,
343
- children: e.label
386
+ "aria-selected": B === h.value,
387
+ children: h.label
344
388
  },
345
- e.value
389
+ h.value
346
390
  )) : /* @__PURE__ */ t("li", { className: "clarity-select__option clarity-select__option--no-results", children: "Nenhum resultado encontrado" }) }) })
347
391
  ]
348
392
  }
349
393
  ),
350
- (m || c && r) && /* @__PURE__ */ t("div", { className: "clarity-select__helper-text", children: c && r ? r : m })
394
+ (a || i && r) && /* @__PURE__ */ t("div", { className: "clarity-select__helper-text", children: i && r ? r : a })
351
395
  ] });
352
396
  });
353
- fe.displayName = "Select";
354
- const ye = ne(({
355
- options: a = [],
356
- value: l = [],
357
- onChange: s,
358
- placeholder: m = "Selecione opções",
359
- label: c,
397
+ qe.displayName = "Select";
398
+ const Ge = Me(({
399
+ options: e = [],
400
+ value: s = [],
401
+ onChange: l,
402
+ placeholder: a = "Selecione opções",
403
+ label: i,
360
404
  helperText: r,
361
- error: o = !1,
405
+ error: c = !1,
362
406
  errorMessage: f,
363
- disabled: y = !1,
364
- variant: N = "primary",
365
- size: w = "medium",
366
- maxSelectedLabels: x = 3,
367
- selectionLimit: i,
368
- className: n = "",
369
- id: b,
370
- name: j,
371
- required: k = !1,
372
- "data-testid": d,
373
- ...h
374
- }, _) => {
375
- const [g, v] = R(!1), [M, O] = R(""), [p, E] = R(!1), S = B(null), T = B(null), D = B(null), L = (e) => {
376
- S.current = e, _ && (typeof _ == "function" ? _(e) : _.current = e);
407
+ disabled: n = !1,
408
+ variant: m = "primary",
409
+ size: p = "medium",
410
+ maxSelectedLabels: y = 3,
411
+ selectionLimit: u,
412
+ className: d = "",
413
+ id: o,
414
+ name: N,
415
+ required: v = !1,
416
+ "data-testid": b,
417
+ ...w
418
+ }, j) => {
419
+ const [g, _] = T(!1), [k, E] = T(""), [x, B] = T(!1), I = V(null), A = V(null), L = V(null), $ = (h) => {
420
+ I.current = h, j && (typeof j == "function" ? j(h) : j.current = h);
377
421
  };
378
- W(() => {
379
- const e = (C) => {
380
- S.current && !S.current.contains(C.target) && (v(!1), E(!1), O(""));
422
+ D(() => {
423
+ const h = (S) => {
424
+ I.current && !I.current.contains(S.target) && (_(!1), B(!1), E(""));
381
425
  };
382
- return document.addEventListener("click", e), () => document.removeEventListener("click", e);
426
+ return document.addEventListener("click", h), () => document.removeEventListener("click", h);
383
427
  }, []);
384
- const A = a.filter(
385
- (e) => e.label.toLowerCase().includes(M.toLowerCase())
386
- ), V = () => {
387
- y || (v(!g), E(!g), g ? O("") : setTimeout(() => {
388
- var e;
389
- (e = T.current) == null || e.focus();
428
+ const M = e.filter(
429
+ (h) => h.label.toLowerCase().includes(k.toLowerCase())
430
+ ), H = () => {
431
+ n || (_(!g), B(!g), g ? E("") : setTimeout(() => {
432
+ var h;
433
+ (h = A.current) == null || h.focus();
390
434
  }, 100));
391
- }, z = (e, C) => {
392
- if (y)
435
+ }, F = (h, S) => {
436
+ if (n)
393
437
  return;
394
- C && (C.stopPropagation(), C.preventDefault());
395
- const H = l.includes(e);
396
- let $;
397
- H ? $ = l.filter((U) => U !== e) : $ = [...l, e], s && s($);
398
- }, q = (e, C) => {
399
- if (C.stopPropagation(), y) return;
400
- const H = l.filter(($) => $ !== e);
401
- s == null || s(H);
402
- }, G = (e) => {
403
- e.stopPropagation(), !y && (s == null || s([]));
404
- }, J = (e) => {
405
- O(e.target.value);
406
- }, I = (e) => {
407
- e.key === "Escape" && (v(!1), E(!1), O(""));
408
- }, F = p || g || l.length > 0, Q = () => {
409
- if (l.length === 0) return null;
410
- const e = l.map(
411
- ($) => a.find((U) => U.value === $)
412
- ).filter(Boolean), C = e.slice(0, x), H = e.length - x;
413
- return /* @__PURE__ */ u("div", { className: "clarity-multiselect__chips", children: [
414
- C.map(($) => /* @__PURE__ */ u("div", { className: "clarity-multiselect__chip", children: [
415
- /* @__PURE__ */ t("span", { className: "clarity-multiselect__chip-label", children: $.label }),
416
- !y && /* @__PURE__ */ t(
438
+ S && (S.stopPropagation(), S.preventDefault());
439
+ const z = s.includes(h);
440
+ let R;
441
+ z ? R = s.filter((ee) => ee !== h) : R = [...s, h], l && l(R);
442
+ }, Q = (h, S) => {
443
+ if (S.stopPropagation(), n) return;
444
+ const z = s.filter((R) => R !== h);
445
+ l == null || l(z);
446
+ }, K = (h) => {
447
+ h.stopPropagation(), !n && (l == null || l([]));
448
+ }, U = (h) => {
449
+ E(h.target.value);
450
+ }, P = (h) => {
451
+ h.key === "Escape" && (_(!1), B(!1), E(""));
452
+ }, le = x || g || s.length > 0, ie = () => {
453
+ if (s.length === 0) return null;
454
+ const h = s.map(
455
+ (R) => e.find((ee) => ee.value === R)
456
+ ).filter(Boolean), S = h.slice(0, y), z = h.length - y;
457
+ return /* @__PURE__ */ C("div", { className: "clarity-multiselect__chips", children: [
458
+ S.map((R) => /* @__PURE__ */ C("div", { className: "clarity-multiselect__chip", children: [
459
+ /* @__PURE__ */ t("span", { className: "clarity-multiselect__chip-label", children: R.label }),
460
+ !n && /* @__PURE__ */ t(
417
461
  "button",
418
462
  {
419
463
  type: "button",
420
464
  className: "clarity-multiselect__chip-remove",
421
- onClick: (U) => q($.value, U),
422
- "aria-label": `Remover ${$.label}`,
465
+ onClick: (ee) => Q(R.value, ee),
466
+ "aria-label": `Remover ${R.label}`,
423
467
  children: "×"
424
468
  }
425
469
  )
426
- ] }, $.value)),
427
- H > 0 && /* @__PURE__ */ u("div", { className: "clarity-multiselect__chip clarity-multiselect__chip--count", children: [
470
+ ] }, R.value)),
471
+ z > 0 && /* @__PURE__ */ C("div", { className: "clarity-multiselect__chip clarity-multiselect__chip--count", children: [
428
472
  "+",
429
- H,
473
+ z,
430
474
  " mais"
431
475
  ] })
432
476
  ] });
433
- }, X = [
477
+ }, ne = [
434
478
  "clarity-multiselect-wrapper",
435
- n
436
- ].filter(Boolean).join(" "), Y = [
479
+ d
480
+ ].filter(Boolean).join(" "), re = [
437
481
  "clarity-multiselect",
438
- `clarity-multiselect--${N}`,
439
- `clarity-multiselect--${w}`,
482
+ `clarity-multiselect--${m}`,
483
+ `clarity-multiselect--${p}`,
440
484
  g && "clarity-multiselect--open",
441
- p && "clarity-multiselect--focused",
442
- F && "clarity-multiselect--label-up",
443
- o && "clarity-multiselect--error",
444
- y && "clarity-multiselect--disabled",
445
- l.length > 0 && "clarity-multiselect--has-value"
485
+ x && "clarity-multiselect--focused",
486
+ le && "clarity-multiselect--label-up",
487
+ c && "clarity-multiselect--error",
488
+ n && "clarity-multiselect--disabled",
489
+ s.length > 0 && "clarity-multiselect--has-value"
446
490
  ].filter(Boolean).join(" ");
447
- return /* @__PURE__ */ u("div", { className: X, children: [
448
- /* @__PURE__ */ u(
491
+ return /* @__PURE__ */ C("div", { className: ne, children: [
492
+ /* @__PURE__ */ C(
449
493
  "div",
450
494
  {
451
- ref: L,
452
- className: Y,
453
- "data-testid": d,
454
- ...h,
495
+ ref: $,
496
+ className: re,
497
+ "data-testid": b,
498
+ ...w,
455
499
  children: [
456
- /* @__PURE__ */ u(
500
+ /* @__PURE__ */ C(
457
501
  "div",
458
502
  {
459
503
  className: "clarity-multiselect__field",
460
- onClick: V,
504
+ onClick: H,
461
505
  children: [
462
- c && /* @__PURE__ */ u("label", { className: "clarity-multiselect__label", children: [
463
- c,
464
- k && /* @__PURE__ */ t("span", { className: "clarity-multiselect__required", children: "*" })
506
+ i && /* @__PURE__ */ C("label", { className: "clarity-multiselect__label", children: [
507
+ i,
508
+ v && /* @__PURE__ */ t("span", { className: "clarity-multiselect__required", children: "*" })
465
509
  ] }),
466
- /* @__PURE__ */ t("div", { className: "clarity-multiselect__content", children: l.length > 0 ? Q() : /* @__PURE__ */ t("span", { className: "clarity-multiselect__placeholder", children: m }) }),
467
- /* @__PURE__ */ u("div", { className: "clarity-multiselect__icons", children: [
468
- l.length > 0 && !y && /* @__PURE__ */ t(
510
+ /* @__PURE__ */ t("div", { className: "clarity-multiselect__content", children: s.length > 0 ? ie() : /* @__PURE__ */ t("span", { className: "clarity-multiselect__placeholder", children: a }) }),
511
+ /* @__PURE__ */ C("div", { className: "clarity-multiselect__icons", children: [
512
+ s.length > 0 && !n && /* @__PURE__ */ t(
469
513
  "button",
470
514
  {
471
515
  type: "button",
472
516
  className: "clarity-multiselect__clear-button",
473
- onClick: G,
517
+ onClick: K,
474
518
  "aria-label": "Limpar seleção",
475
519
  children: "×"
476
520
  }
@@ -489,35 +533,35 @@ const ye = ne(({
489
533
  ]
490
534
  }
491
535
  ),
492
- g && /* @__PURE__ */ u("div", { ref: D, className: "clarity-multiselect__dropdown", children: [
536
+ g && /* @__PURE__ */ C("div", { ref: L, className: "clarity-multiselect__dropdown", children: [
493
537
  /* @__PURE__ */ t("div", { className: "clarity-multiselect__search", children: /* @__PURE__ */ t(
494
538
  "input",
495
539
  {
496
- ref: T,
540
+ ref: A,
497
541
  type: "text",
498
542
  className: "clarity-multiselect__search-input",
499
543
  placeholder: "Buscar opções...",
500
- value: M,
501
- onChange: J,
502
- onKeyDown: I
544
+ value: k,
545
+ onChange: U,
546
+ onKeyDown: P
503
547
  }
504
548
  ) }),
505
- /* @__PURE__ */ t("ul", { className: "clarity-multiselect__options", children: A.length > 0 ? A.map((e) => {
506
- const C = l.includes(e.value), H = e.disabled || y;
507
- return /* @__PURE__ */ u(
549
+ /* @__PURE__ */ t("ul", { className: "clarity-multiselect__options", children: M.length > 0 ? M.map((h) => {
550
+ const S = s.includes(h.value), z = h.disabled || n;
551
+ return /* @__PURE__ */ C(
508
552
  "li",
509
553
  {
510
554
  className: [
511
555
  "clarity-multiselect__option",
512
- C && "clarity-multiselect__option--selected",
513
- H && "clarity-multiselect__option--disabled"
556
+ S && "clarity-multiselect__option--selected",
557
+ z && "clarity-multiselect__option--disabled"
514
558
  ].filter(Boolean).join(" "),
515
- onClick: ($) => !H && z(e.value, $),
559
+ onClick: (R) => !z && F(h.value, R),
516
560
  children: [
517
561
  /* @__PURE__ */ t("div", { className: "clarity-multiselect__option-checkbox", children: /* @__PURE__ */ t("div", { className: [
518
562
  "clarity-multiselect__checkbox",
519
- C && "clarity-multiselect__checkbox--checked"
520
- ].filter(Boolean).join(" "), children: C && /* @__PURE__ */ t("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ t(
563
+ S && "clarity-multiselect__checkbox--checked"
564
+ ].filter(Boolean).join(" "), children: S && /* @__PURE__ */ t("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ t(
521
565
  "path",
522
566
  {
523
567
  d: "M2 6L5 9L10 3",
@@ -527,112 +571,1061 @@ const ye = ne(({
527
571
  strokeLinejoin: "round"
528
572
  }
529
573
  ) }) }) }),
530
- /* @__PURE__ */ t("span", { className: "clarity-multiselect__option-label", children: e.label })
574
+ /* @__PURE__ */ t("span", { className: "clarity-multiselect__option-label", children: h.label })
531
575
  ]
532
576
  },
533
- e.value
577
+ h.value
534
578
  );
535
579
  }) : /* @__PURE__ */ t("li", { className: "clarity-multiselect__option clarity-multiselect__option--no-results", children: "Nenhum resultado encontrado" }) })
536
580
  ] })
537
581
  ]
538
582
  }
539
583
  ),
540
- (r || o && f) && /* @__PURE__ */ t("div", { className: "clarity-multiselect__helper", children: o && f ? /* @__PURE__ */ t("span", { className: "clarity-multiselect__error-message", children: f }) : r && /* @__PURE__ */ t("span", { className: "clarity-multiselect__helper-text", children: r }) })
584
+ (r || c && f) && /* @__PURE__ */ t("div", { className: "clarity-multiselect__helper", children: c && f ? /* @__PURE__ */ t("span", { className: "clarity-multiselect__error-message", children: f }) : r && /* @__PURE__ */ t("span", { className: "clarity-multiselect__helper-text", children: r }) })
541
585
  ] });
542
586
  });
543
- ye.displayName = "MultiSelect";
544
- const te = oe(null), le = () => {
545
- const a = de(te);
546
- if (!a)
587
+ Ge.displayName = "MultiSelect";
588
+ const ue = q(null), me = () => {
589
+ const e = G(ue);
590
+ if (!e)
547
591
  throw new Error("useModal must be used within a Modal provider");
548
- return a;
549
- }, ae = ({
550
- children: a,
551
- className: l = "",
552
- title: s
592
+ return e;
593
+ }, fe = ({
594
+ children: e,
595
+ className: s = "",
596
+ title: l
553
597
  }) => {
554
- const { onClose: m, variant: c, showCloseButton: r } = le(), o = [
598
+ const { onClose: a, variant: i, showCloseButton: r } = me(), c = [
555
599
  "clarity-modal-header",
556
- l,
557
- c && `clarity-modal-header--${c}`
600
+ s,
601
+ i && `clarity-modal-header--${i}`
558
602
  ].filter(Boolean).join(" "), f = [
559
603
  "clarity-modal-close",
560
- c && `clarity-modal-close--${c}`
604
+ i && `clarity-modal-close--${i}`
561
605
  ].filter(Boolean).join(" ");
562
- return /* @__PURE__ */ u("div", { className: o, children: [
563
- s && /* @__PURE__ */ t("h2", { className: "clarity-modal-title", children: s }),
564
- a,
565
- r && /* @__PURE__ */ t("button", { className: f, onClick: (y) => {
566
- y.stopPropagation(), m();
606
+ return /* @__PURE__ */ C("div", { className: c, children: [
607
+ l && /* @__PURE__ */ t("h2", { className: "clarity-modal-title", children: l }),
608
+ e,
609
+ r && /* @__PURE__ */ t("button", { className: f, onClick: (n) => {
610
+ n.stopPropagation(), a();
567
611
  }, children: "×" })
568
612
  ] });
569
613
  };
570
- ae.displayName = "ModalHeader";
571
- const se = ({ children: a, className: l = "" }) => /* @__PURE__ */ t("div", { className: `clarity-modal-content ${l}`, children: a });
572
- se.displayName = "ModalContent";
573
- const ce = ({ children: a, className: l = "" }) => /* @__PURE__ */ u("div", { className: `clarity-modal-footer ${l}`, children: [
614
+ fe.displayName = "Modal.Header";
615
+ const he = ({ children: e, className: s = "" }) => /* @__PURE__ */ t("div", { className: `clarity-modal-content ${s}`, children: e });
616
+ he.displayName = "Modal.Content";
617
+ const pe = ({ children: e, className: s = "" }) => /* @__PURE__ */ C("div", { className: `clarity-modal-footer ${s}`, children: [
574
618
  /* @__PURE__ */ t("div", { className: "clarity-modal-scroll-indicator" }),
575
- a
619
+ e
576
620
  ] });
577
- ce.displayName = "ModalFooter";
578
- const ie = ({ children: a, onClick: l, variant: s }) => Z(a, {
579
- onClick: (m) => {
580
- var c, r;
581
- l == null || l(), (r = (c = a.props).onClick) == null || r.call(c, m);
621
+ pe.displayName = "Modal.Footer";
622
+ const ye = ({ children: e, onClick: s, variant: l }) => W(e, {
623
+ onClick: (a) => {
624
+ var i, r;
625
+ s == null || s(), (r = (i = e.props).onClick) == null || r.call(i, a);
582
626
  },
583
- variant: s
627
+ variant: l
584
628
  });
585
- ie.displayName = "ModalTrigger";
586
- const re = ({ children: a }) => {
587
- const { onClose: l } = le();
588
- return Z(a, {
589
- onClick: (s) => {
590
- var m, c;
591
- l(), (c = (m = a.props).onClick) == null || c.call(m, s);
629
+ ye.displayName = "Modal.Trigger";
630
+ const ve = ({ children: e }) => {
631
+ const { onClose: s } = me();
632
+ return W(e, {
633
+ onClick: (l) => {
634
+ var a, i;
635
+ s(), (i = (a = e.props).onClick) == null || i.call(a, l);
592
636
  }
593
637
  });
594
638
  };
595
- re.displayName = "ModalClose";
596
- const K = ({
597
- isOpen: a,
598
- onClose: l,
599
- children: s,
600
- className: m = "",
601
- variant: c,
602
- size: r = "medium",
603
- showCloseButton: o = !0,
604
- closeOnOverlayClick: f = !0
639
+ ve.displayName = "Modal.Close";
640
+ const Y = ({
641
+ isOpen: e,
642
+ onClose: s,
643
+ onOpen: l,
644
+ children: a,
645
+ className: i = "",
646
+ variant: r,
647
+ size: c = "medium",
648
+ showCloseButton: f = !0,
649
+ closeOnOverlayClick: n = !0
605
650
  }) => {
606
- const [y, N] = R(!1), x = a !== void 0 ? a : y, i = l || (() => {
607
- N(!1);
651
+ const [m, p] = T(!1), u = e !== void 0 ? e : m, d = s || (() => {
652
+ p(!1);
608
653
  });
609
- W(() => {
610
- const d = (h) => {
611
- h.key === "Escape" && i();
654
+ D(() => {
655
+ u && (l == null || l());
656
+ }, [u, l]), D(() => {
657
+ const w = (j) => {
658
+ j.key === "Escape" && d();
612
659
  };
613
- return x ? (document.addEventListener("keydown", d), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
614
- document.removeEventListener("keydown", d), document.body.style.overflow = "unset";
660
+ return u ? (document.addEventListener("keydown", w), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
661
+ document.removeEventListener("keydown", w), document.body.style.overflow = "unset";
615
662
  };
616
- }, [x, i]);
617
- const n = (d) => {
618
- f && d.target === d.currentTarget && i();
619
- }, b = P.Children.toArray(s).find(
620
- (d) => ee(d) && d.type.displayName === "ModalTrigger"
621
- ), j = P.Children.toArray(s).filter(
622
- (d) => ee(d) && d.type.displayName !== "ModalTrigger"
623
- ), k = ["clarity-modal", m, `clarity-modal--${r}`].filter(Boolean).join(" ");
624
- return /* @__PURE__ */ u(te.Provider, { value: { onClose: i, variant: c, showCloseButton: o }, children: [
625
- b && Z(b, { onClick: () => N(!0), variant: c }),
626
- x && /* @__PURE__ */ t("div", { className: "clarity-modal-overlay", onClick: n, children: /* @__PURE__ */ t("div", { className: k, children: j }) })
663
+ }, [u, d]);
664
+ const o = (w) => {
665
+ n && w.target === w.currentTarget && d();
666
+ }, N = O.Children.toArray(a).find(
667
+ (w) => X(w) && w.type.displayName === "Modal.Trigger"
668
+ ), v = O.Children.toArray(a).filter(
669
+ (w) => X(w) && w.type.displayName !== "Modal.Trigger"
670
+ ), b = ["clarity-modal", i, `clarity-modal--${c}`].filter(Boolean).join(" ");
671
+ return /* @__PURE__ */ C(ue.Provider, { value: { onClose: d, variant: r, showCloseButton: f }, children: [
672
+ N && W(N, { onClick: () => p(!0), variant: r }),
673
+ u && /* @__PURE__ */ t("div", { className: "clarity-modal-overlay", onClick: o, children: /* @__PURE__ */ t("div", { className: b, children: v }) })
627
674
  ] });
628
675
  };
629
- K.Header = ae;
630
- K.Content = se;
631
- K.Footer = ce;
632
- K.Trigger = ie;
633
- K.Close = re;
634
- K.displayName = "Modal";
635
- const ve = {
676
+ Y.Header = fe;
677
+ Y.Content = he;
678
+ Y.Footer = pe;
679
+ Y.Trigger = ye;
680
+ Y.Close = ve;
681
+ Y.displayName = "Modal";
682
+ const Ne = q(void 0), mt = () => {
683
+ const e = G(Ne);
684
+ if (!e)
685
+ throw new Error("useToast must be used within a ToastProvider");
686
+ return e;
687
+ }, Je = ({ id: e, message: s, variant: l, duration: a, onClose: i, invertColors: r }) => {
688
+ const [c, f] = T(!1), [n, m] = T(!1);
689
+ D(() => {
690
+ f(!0);
691
+ const u = setTimeout(() => {
692
+ m(!0);
693
+ }, a * 1e3);
694
+ return () => {
695
+ clearTimeout(u);
696
+ };
697
+ }, [a]);
698
+ const p = (u) => {
699
+ u.propertyName === "opacity" && !c && n && i(e);
700
+ }, y = [
701
+ "toast",
702
+ l,
703
+ r ? "colored-background" : "",
704
+ c ? "toast-visible" : "",
705
+ n ? "toast-exiting" : ""
706
+ ].filter(Boolean).join(" ");
707
+ return /* @__PURE__ */ C("div", { className: y, onTransitionEnd: p, children: [
708
+ /* @__PURE__ */ t("div", { className: "toast-message", children: s }),
709
+ /* @__PURE__ */ t("button", { onClick: () => m(!0), className: "toast-close-button", children: "×" }),
710
+ /* @__PURE__ */ t(
711
+ "div",
712
+ {
713
+ className: "toast-progress-bar",
714
+ style: { animationDuration: `${a}s` }
715
+ }
716
+ )
717
+ ] });
718
+ }, ft = ({ children: e }) => {
719
+ const [s, l] = T([]), a = te(() => {
720
+ if (typeof document < "u") {
721
+ const n = document.createElement("div");
722
+ return n.id = "toast-portal-root", n;
723
+ }
724
+ return null;
725
+ }, []);
726
+ D(() => {
727
+ if (a)
728
+ return document.body.appendChild(a), () => {
729
+ document.body.removeChild(a);
730
+ };
731
+ }, [a]);
732
+ const i = ae((n) => {
733
+ const p = {
734
+ id: (/* @__PURE__ */ new Date()).toISOString() + Math.random(),
735
+ // duration: 5,
736
+ // position: 'right-top',
737
+ ...n
738
+ };
739
+ l((y) => {
740
+ const u = [p, ...y];
741
+ return u.length > 4 ? u.slice(0, 4) : u;
742
+ });
743
+ }, []), r = ae((n) => {
744
+ l((m) => m.filter((p) => p.id !== n));
745
+ }, []), c = te(() => s.reduce((n, m) => (n[m.position] || (n[m.position] = []), n[m.position].push(m), n), {}), [s]), f = te(() => ({ show: i }), [i]);
746
+ return /* @__PURE__ */ C(Ne.Provider, { value: f, children: [
747
+ e,
748
+ a && Fe.createPortal(
749
+ Object.entries(c).map(([n, m]) => /* @__PURE__ */ t("div", { className: `toast-container ${n}`, children: m.map((p) => /* @__PURE__ */ t(Je, { ...p, onClose: r }, p.id)) }, n)),
750
+ a
751
+ )
752
+ ] });
753
+ }, be = q(null), _e = () => {
754
+ const e = G(be);
755
+ if (!e)
756
+ throw new Error("useOffcanvas must be used within an Offcanvas provider");
757
+ return e;
758
+ }, we = ({
759
+ children: e,
760
+ className: s = ""
761
+ }) => {
762
+ const { onClose: l, variant: a, showCloseButton: i, title: r } = _e(), c = [
763
+ "clarity-offcanvas-header",
764
+ s
765
+ ].filter(Boolean).join(" "), f = [
766
+ "clarity-offcanvas-close",
767
+ a && `clarity-offcanvas-close--${a}`
768
+ ].filter(Boolean).join(" "), n = [
769
+ "clarity-offcanvas-title",
770
+ a && `clarity-offcanvas-title--${a}`
771
+ ].filter(Boolean).join(" ");
772
+ return /* @__PURE__ */ C("div", { className: c, children: [
773
+ r && /* @__PURE__ */ t("h2", { className: n, children: r }),
774
+ e,
775
+ i && /* @__PURE__ */ t("button", { className: f, onClick: (m) => {
776
+ m.stopPropagation(), l();
777
+ }, children: "×" })
778
+ ] });
779
+ };
780
+ we.displayName = "Offcanvas.Header";
781
+ const Ce = ({ children: e, className: s = "" }) => /* @__PURE__ */ t("div", { className: `clarity-offcanvas-content ${s}`, children: e });
782
+ Ce.displayName = "Offcanvas.Content";
783
+ const ge = ({ children: e, onClick: s, variant: l }) => W(e, {
784
+ onClick: (a) => {
785
+ var i, r;
786
+ s == null || s(), (r = (i = e.props).onClick) == null || r.call(i, a);
787
+ },
788
+ variant: l
789
+ });
790
+ ge.displayName = "Offcanvas.Trigger";
791
+ const ce = ({ children: e, className: s = "" }) => /* @__PURE__ */ t("div", { className: `clarity-offcanvas-footer ${s}`, children: e });
792
+ ce.displayName = "Offcanvas.Footer";
793
+ const $e = ({ children: e }) => {
794
+ const { onClose: s } = _e();
795
+ return W(e, {
796
+ onClick: (l) => {
797
+ var a, i;
798
+ s(), (i = (a = e.props).onClick) == null || i.call(a, l);
799
+ }
800
+ });
801
+ };
802
+ $e.displayName = "Offcanvas.Close";
803
+ const Z = ({
804
+ isOpen: e,
805
+ onClose: s,
806
+ onOpen: l,
807
+ children: a,
808
+ className: i = "",
809
+ variant: r,
810
+ placement: c = "right",
811
+ closeOnOverlayClick: f = !0,
812
+ showCloseButton: n = !0,
813
+ title: m
814
+ }) => {
815
+ const [p, y] = T(!1), [u, d] = T(!1), [o, N] = T(!1), v = e !== void 0, b = v ? e : p, w = ae(() => {
816
+ s ? s() : y(!1);
817
+ }, [s]), j = ae(() => {
818
+ v || y(!0), l == null || l();
819
+ }, [v, l]);
820
+ D(() => {
821
+ if (b) {
822
+ N(!0);
823
+ const $ = setTimeout(() => {
824
+ d(!0);
825
+ }, 50);
826
+ return () => clearTimeout($);
827
+ } else {
828
+ d(!1);
829
+ const $ = setTimeout(() => {
830
+ N(!1);
831
+ }, 300);
832
+ return () => clearTimeout($);
833
+ }
834
+ }, [b]), D(() => {
835
+ const $ = (M) => {
836
+ M.key === "Escape" && w();
837
+ };
838
+ return b ? (document.addEventListener("keydown", $), document.body.style.overflow = "hidden") : (document.removeEventListener("keydown", $), document.body.style.overflow = "unset"), () => {
839
+ document.removeEventListener("keydown", $), document.body.style.overflow = "unset";
840
+ };
841
+ }, [b, w]);
842
+ const g = ($) => {
843
+ f && $.target === $.currentTarget && w();
844
+ }, _ = O.Children.toArray(a);
845
+ let k, E, x, B, I;
846
+ _.forEach(($) => {
847
+ if (X($))
848
+ if ($.type.displayName === "Offcanvas.Trigger")
849
+ k = $;
850
+ else if ($.type.displayName === "Offcanvas.Header")
851
+ E = $;
852
+ else if ($.type.displayName === "Offcanvas.Content") {
853
+ x = $;
854
+ const H = O.Children.toArray(x.props.children).filter((F) => X(F) && F.type.displayName === "Offcanvas.Close" ? (I = F, !1) : !0);
855
+ x = W(x, { children: H });
856
+ } else $.type.displayName === "Offcanvas.Footer" && (B = $);
857
+ }), I && (B ? B = W(B, {
858
+ children: /* @__PURE__ */ C(Ve, { children: [
859
+ B.props.children,
860
+ I
861
+ ] })
862
+ }) : B = /* @__PURE__ */ t(ce, { children: I }));
863
+ const A = [
864
+ "clarity-offcanvas",
865
+ i,
866
+ `clarity-offcanvas--${c}`,
867
+ r && `clarity-offcanvas--${r}`,
868
+ u ? "clarity-offcanvas--open" : "clarity-offcanvas--closed"
869
+ ].filter(Boolean).join(" "), L = [
870
+ "clarity-offcanvas-overlay",
871
+ u ? "clarity-offcanvas-overlay--visible" : ""
872
+ ].filter(Boolean).join(" ");
873
+ return /* @__PURE__ */ C(be.Provider, { value: { onClose: w, variant: r, showCloseButton: n, placement: c, title: m }, children: [
874
+ k && W(k, { onClick: j, variant: r }),
875
+ o && // Only render if shouldRender is true
876
+ /* @__PURE__ */ t("div", { className: L, onClick: g, children: /* @__PURE__ */ C("div", { className: A, children: [
877
+ E,
878
+ x,
879
+ B && /* @__PURE__ */ t("div", { className: "clarity-offcanvas-scroll-indicator" }),
880
+ " ",
881
+ B
882
+ ] }) })
883
+ ] });
884
+ };
885
+ Z.Header = we;
886
+ Z.Content = Ce;
887
+ Z.Footer = ce;
888
+ Z.Trigger = ge;
889
+ Z.Close = $e;
890
+ Z.displayName = "Offcanvas";
891
+ const Qe = O.forwardRef(({
892
+ type: e,
893
+ variant: s = "primary",
894
+ size: l = "medium",
895
+ label: a,
896
+ helperText: i,
897
+ error: r = !1,
898
+ errorMessage: c,
899
+ labelPosition: f = "right",
900
+ className: n = "",
901
+ disabled: m = !1,
902
+ checked: p,
903
+ id: y,
904
+ ...u
905
+ }, d) => {
906
+ const o = y || `check-input-${Math.random().toString(36).substr(2, 9)}`, N = [
907
+ "clarity-check-input-wrapper",
908
+ `clarity-check-input-wrapper--${f}`,
909
+ m && "clarity-check-input-wrapper--disabled",
910
+ r && "clarity-check-input-wrapper--error"
911
+ ].filter(Boolean).join(" "), v = [
912
+ "clarity-check-input",
913
+ `clarity-check-input--${e}`,
914
+ `clarity-check-input--${l}`,
915
+ s && `clarity-check-input--${s}`,
916
+ r && "clarity-check-input--error",
917
+ m && "clarity-check-input--disabled",
918
+ n
919
+ ].filter(Boolean).join(" "), b = [
920
+ "clarity-check-input__label",
921
+ `clarity-check-input__label--${l}`,
922
+ m && "clarity-check-input__label--disabled"
923
+ ].filter(Boolean).join(" ");
924
+ return /* @__PURE__ */ C("div", { className: "clarity-check-input-container", children: [
925
+ /* @__PURE__ */ C("label", { className: N, htmlFor: o, children: [
926
+ /* @__PURE__ */ t(
927
+ "input",
928
+ {
929
+ ref: d,
930
+ id: o,
931
+ type: e,
932
+ className: v,
933
+ disabled: m,
934
+ checked: p,
935
+ ...u
936
+ }
937
+ ),
938
+ /* @__PURE__ */ C("div", { className: "clarity-check-input__custom", children: [
939
+ e === "checkbox" && /* @__PURE__ */ t(
940
+ "svg",
941
+ {
942
+ className: "clarity-check-input__icon",
943
+ viewBox: "0 0 16 16",
944
+ fill: "none",
945
+ xmlns: "http://www.w3.org/2000/svg",
946
+ children: /* @__PURE__ */ t(
947
+ "path",
948
+ {
949
+ d: "M13.5 4.5L6 12L2.5 8.5",
950
+ stroke: "currentColor",
951
+ strokeWidth: "2",
952
+ strokeLinecap: "round",
953
+ strokeLinejoin: "round"
954
+ }
955
+ )
956
+ }
957
+ ),
958
+ e === "radio" && /* @__PURE__ */ t("div", { className: "clarity-check-input__radio-dot" })
959
+ ] }),
960
+ a && /* @__PURE__ */ t("span", { className: b, children: a })
961
+ ] }),
962
+ (i || r && c) && /* @__PURE__ */ t("div", { className: "clarity-check-input__helper-text", children: r && c ? c : i })
963
+ ] });
964
+ });
965
+ Qe.displayName = "CheckInput";
966
+ const Xe = O.forwardRef(({
967
+ variant: e = "primary",
968
+ size: s = "medium",
969
+ label: l,
970
+ helperText: a,
971
+ error: i = !1,
972
+ errorMessage: r,
973
+ labelPosition: c = "right",
974
+ className: f = "",
975
+ disabled: n = !1,
976
+ checked: m,
977
+ id: p,
978
+ ...y
979
+ }, u) => {
980
+ const d = p || `input-switch-${Math.random().toString(36).substr(2, 9)}`, o = [
981
+ "clarity-input-switch-wrapper",
982
+ `clarity-input-switch-wrapper--${c}`,
983
+ n && "clarity-input-switch-wrapper--disabled",
984
+ i && "clarity-input-switch-wrapper--error"
985
+ ].filter(Boolean).join(" "), N = [
986
+ "clarity-input-switch",
987
+ `clarity-input-switch--${s}`,
988
+ e && `clarity-input-switch--${e}`,
989
+ i && "clarity-input-switch--error",
990
+ n && "clarity-input-switch--disabled",
991
+ f
992
+ ].filter(Boolean).join(" "), v = [
993
+ "clarity-input-switch__label",
994
+ `clarity-input-switch__label--${s}`,
995
+ n && "clarity-input-switch__label--disabled"
996
+ ].filter(Boolean).join(" ");
997
+ return /* @__PURE__ */ C("div", { className: "clarity-input-switch-container", children: [
998
+ /* @__PURE__ */ C("label", { className: o, htmlFor: d, children: [
999
+ /* @__PURE__ */ t(
1000
+ "input",
1001
+ {
1002
+ ref: u,
1003
+ id: d,
1004
+ type: "checkbox",
1005
+ className: N,
1006
+ disabled: n,
1007
+ checked: m,
1008
+ ...y
1009
+ }
1010
+ ),
1011
+ /* @__PURE__ */ t("div", { className: "clarity-input-switch__track", children: /* @__PURE__ */ t("div", { className: "clarity-input-switch__thumb" }) }),
1012
+ l && /* @__PURE__ */ t("span", { className: v, children: l })
1013
+ ] }),
1014
+ (a || i && r) && /* @__PURE__ */ t("div", { className: "clarity-input-switch__helper-text", children: i && r ? r : a })
1015
+ ] });
1016
+ });
1017
+ Xe.displayName = "InputSwitch";
1018
+ const ke = q(null), oe = () => {
1019
+ const e = G(ke);
1020
+ if (!e)
1021
+ throw new Error("useConfirmationDialog must be used within a ConfirmationDialog provider");
1022
+ return e;
1023
+ }, xe = ({ children: e, className: s = "" }) => {
1024
+ const { variant: l } = oe(), a = `clarity-confirmation-dialog-header ${s} clarity-confirmation-dialog-header--${l}`;
1025
+ return /* @__PURE__ */ t("div", { className: a, children: e });
1026
+ };
1027
+ xe.displayName = "ConfirmationDialog.Header";
1028
+ const Te = ({ children: e, className: s = "" }) => /* @__PURE__ */ t("div", { className: `clarity-confirmation-dialog-content ${s}`, children: e });
1029
+ Te.displayName = "ConfirmationDialog.Content";
1030
+ const je = ({ children: e, className: s = "" }) => /* @__PURE__ */ t("div", { className: `clarity-confirmation-dialog-footer ${s}`, children: e });
1031
+ je.displayName = "ConfirmationDialog.Footer";
1032
+ const Be = ({ children: e }) => W(e, {
1033
+ onClick: (s) => {
1034
+ var l, a;
1035
+ (a = (l = e.props).onClick) == null || a.call(l, s);
1036
+ }
1037
+ });
1038
+ Be.displayName = "ConfirmationDialog.Trigger";
1039
+ const Ee = ({ children: e }) => {
1040
+ const { onClose: s } = oe();
1041
+ return W(e, {
1042
+ onClick: (l) => {
1043
+ var a, i;
1044
+ s(), (i = (a = e.props).onClick) == null || i.call(a, l);
1045
+ }
1046
+ });
1047
+ };
1048
+ Ee.displayName = "ConfirmationDialog.Close";
1049
+ const Le = ({ children: e }) => {
1050
+ const { onConfirm: s } = oe();
1051
+ return W(e, {
1052
+ onClick: (l) => {
1053
+ var a, i;
1054
+ s(), (i = (a = e.props).onClick) == null || i.call(a, l);
1055
+ }
1056
+ });
1057
+ };
1058
+ Le.displayName = "ConfirmationDialog.Confirm";
1059
+ const J = ({
1060
+ isOpen: e,
1061
+ onClose: s,
1062
+ onConfirm: l,
1063
+ variant: a = "clarity-primary",
1064
+ children: i
1065
+ }) => {
1066
+ const [r, c] = T(!1), f = e !== void 0, n = f ? e : r, m = () => {
1067
+ f || c(!0);
1068
+ }, p = () => {
1069
+ s ? s() : c(!1);
1070
+ }, y = () => {
1071
+ l && l(), p();
1072
+ };
1073
+ D(() => {
1074
+ const N = (v) => {
1075
+ v.key === "Escape" && p();
1076
+ };
1077
+ return n ? (document.addEventListener("keydown", N), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
1078
+ document.removeEventListener("keydown", N), document.body.style.overflow = "unset";
1079
+ };
1080
+ }, [n, p]);
1081
+ const u = O.Children.toArray(i).find(
1082
+ (N) => X(N) && N.type.displayName === "ConfirmationDialog.Trigger"
1083
+ ), d = O.Children.toArray(i).filter(
1084
+ (N) => X(N) && N.type.displayName !== "ConfirmationDialog.Trigger"
1085
+ ), o = `clarity-confirmation-dialog clarity-confirmation-dialog--${a}`;
1086
+ return /* @__PURE__ */ C(ke.Provider, { value: { variant: a, onClose: p, onConfirm: y, onOpen: m }, children: [
1087
+ u,
1088
+ n && /* @__PURE__ */ t("div", { className: "clarity-modal-overlay", children: /* @__PURE__ */ t("div", { className: o, children: d }) })
1089
+ ] });
1090
+ };
1091
+ J.Header = xe;
1092
+ J.Content = Te;
1093
+ J.Footer = je;
1094
+ J.Trigger = Be;
1095
+ J.Close = Ee;
1096
+ J.Confirm = Le;
1097
+ J.displayName = "ConfirmationDialog";
1098
+ const ht = ({
1099
+ variant: e = "primary",
1100
+ product: s,
1101
+ tone: l,
1102
+ hoverTone: a,
1103
+ size: i = "medium",
1104
+ disabled: r = !1,
1105
+ loading: c = !1,
1106
+ children: f,
1107
+ onClick: n,
1108
+ type: m = "button",
1109
+ className: p = "",
1110
+ "aria-label": y,
1111
+ title: u,
1112
+ ...d
1113
+ }) => {
1114
+ const o = "clarity-button-icon", N = s && l, v = N ? `${o}--custom` : `${o}--${e}`, b = [
1115
+ o,
1116
+ v,
1117
+ `${o}--${i}`,
1118
+ c && `${o}--loading`,
1119
+ r && `${o}--disabled`,
1120
+ p
1121
+ ].filter(Boolean).join(" "), w = (g) => {
1122
+ const _ = parseInt(g);
1123
+ return _ >= 800 ? "900" : _ >= 700 ? "800" : _ >= 600 ? "700" : _ >= 500 ? "600" : _ >= 400 ? "500" : _ >= 300 ? "400" : _ >= 200 ? "300" : "200";
1124
+ }, j = N ? {
1125
+ "--custom-bg-color": `var(--clarity-${s}-${l})`,
1126
+ "--custom-hover-color": `var(--clarity-${s}-${a || w(l)})`
1127
+ } : {};
1128
+ return /* @__PURE__ */ C(
1129
+ "button",
1130
+ {
1131
+ className: b,
1132
+ style: j,
1133
+ disabled: r || c,
1134
+ onClick: n,
1135
+ type: m,
1136
+ "aria-label": y,
1137
+ title: u,
1138
+ ...d,
1139
+ children: [
1140
+ c && /* @__PURE__ */ t("div", { className: `${o}__spinner` }),
1141
+ !c && f
1142
+ ]
1143
+ }
1144
+ );
1145
+ }, pt = ({
1146
+ variant: e = "primary",
1147
+ product: s,
1148
+ tone: l,
1149
+ hoverTone: a,
1150
+ size: i = "medium",
1151
+ disabled: r = !1,
1152
+ children: c,
1153
+ onClick: f,
1154
+ href: n,
1155
+ target: m,
1156
+ rel: p,
1157
+ className: y = "",
1158
+ ...u
1159
+ }) => {
1160
+ const d = "clarity-button-link", o = s && l, N = o ? `${d}--custom` : `${d}--${e}`, v = [
1161
+ d,
1162
+ N,
1163
+ `${d}--${i}`,
1164
+ r && `${d}--disabled`,
1165
+ y
1166
+ ].filter(Boolean).join(" "), b = (j) => {
1167
+ const g = parseInt(j);
1168
+ return g >= 800 ? "900" : g >= 700 ? "800" : g >= 600 ? "700" : g >= 500 ? "600" : g >= 400 ? "500" : g >= 300 ? "400" : g >= 200 ? "300" : "200";
1169
+ }, w = o ? {
1170
+ "--custom-color": `var(--clarity-${s}-${l})`,
1171
+ "--custom-hover-color": `var(--clarity-${s}-${a || b(l)})`
1172
+ } : {};
1173
+ return n ? /* @__PURE__ */ t(
1174
+ "a",
1175
+ {
1176
+ href: n,
1177
+ target: m,
1178
+ rel: p || (m === "_blank" ? "noopener noreferrer" : void 0),
1179
+ className: v,
1180
+ style: w,
1181
+ onClick: r ? void 0 : f,
1182
+ ...u,
1183
+ children: c
1184
+ }
1185
+ ) : /* @__PURE__ */ t(
1186
+ "button",
1187
+ {
1188
+ className: v,
1189
+ style: w,
1190
+ disabled: r,
1191
+ onClick: f,
1192
+ ...u,
1193
+ children: c
1194
+ }
1195
+ );
1196
+ }, Oe = q(void 0), Ie = () => {
1197
+ const e = G(Oe);
1198
+ if (!e)
1199
+ throw new Error("Accordion components must be used within an Accordion");
1200
+ return e;
1201
+ }, Ye = ({
1202
+ variant: e = "primary",
1203
+ product: s,
1204
+ tone: l,
1205
+ hoverTone: a,
1206
+ defaultActiveKey: i,
1207
+ alwaysOpen: r = !1,
1208
+ flush: c = !1,
1209
+ className: f = "",
1210
+ children: n,
1211
+ onSelect: m,
1212
+ ...p
1213
+ }) => {
1214
+ const [y, u] = T(() => i ? Array.isArray(i) ? i : [i] : []), d = (_) => {
1215
+ let k;
1216
+ r ? k = y.includes(_) ? y.filter((E) => E !== _) : [...y, _] : k = y.includes(_) ? [] : [_], u(k), m && m(y.includes(_) ? null : _, {});
1217
+ }, o = "clarity-accordion", N = s && l, v = N ? `${o}--custom` : `${o}--${e}`, b = [
1218
+ o,
1219
+ v,
1220
+ c && `${o}--flush`,
1221
+ f
1222
+ ].filter(Boolean).join(" "), w = (_) => {
1223
+ const k = parseInt(_);
1224
+ return k >= 800 ? "900" : k >= 700 ? "800" : k >= 600 ? "700" : k >= 500 ? "600" : k >= 400 ? "500" : k >= 300 ? "400" : k >= 200 ? "300" : "200";
1225
+ }, j = N ? {
1226
+ "--custom-border-color": `var(--clarity-${s}-${l})`,
1227
+ "--custom-header-color": `var(--clarity-${s}-${l})`,
1228
+ "--custom-hover-color": `var(--clarity-${s}-${a || w(l)})`
1229
+ } : {}, g = {
1230
+ activeKeys: y,
1231
+ toggleItem: d,
1232
+ alwaysOpen: r,
1233
+ variant: e,
1234
+ product: s,
1235
+ tone: l,
1236
+ hoverTone: a,
1237
+ flush: c
1238
+ };
1239
+ return /* @__PURE__ */ t(Oe.Provider, { value: g, children: /* @__PURE__ */ t("div", { className: b, style: j, ...p, children: n }) });
1240
+ }, Ze = ({
1241
+ eventKey: e,
1242
+ disabled: s = !1,
1243
+ className: l = "",
1244
+ children: a,
1245
+ ...i
1246
+ }) => {
1247
+ const { activeKeys: r } = Ie(), c = "clarity-accordion", f = r.includes(e), n = [
1248
+ `${c}__item`,
1249
+ f && `${c}__item--active`,
1250
+ s && `${c}__item--disabled`,
1251
+ l
1252
+ ].filter(Boolean).join(" ");
1253
+ return /* @__PURE__ */ t("div", { className: n, ...i, children: O.Children.map(a, (m) => O.isValidElement(m) ? O.cloneElement(m, {
1254
+ ...m.props,
1255
+ eventKey: e,
1256
+ disabled: s,
1257
+ isActive: f
1258
+ }) : m) });
1259
+ }, Ke = ({
1260
+ className: e = "",
1261
+ children: s,
1262
+ onClick: l,
1263
+ eventKey: a,
1264
+ disabled: i = !1,
1265
+ isActive: r = !1,
1266
+ ...c
1267
+ }) => {
1268
+ const { toggleItem: f } = Ie(), n = "clarity-accordion", m = (p) => {
1269
+ !i && a && f(a), l == null || l(p);
1270
+ };
1271
+ return /* @__PURE__ */ C(
1272
+ "button",
1273
+ {
1274
+ className: [`${n}__header`, e].filter(Boolean).join(" "),
1275
+ onClick: m,
1276
+ disabled: i,
1277
+ "aria-expanded": r,
1278
+ "aria-controls": a ? `${n}-collapse-${a}` : void 0,
1279
+ ...c,
1280
+ children: [
1281
+ /* @__PURE__ */ t("span", { className: `${n}__title`, children: s }),
1282
+ /* @__PURE__ */ t("span", { className: `${n}__icon`, children: /* @__PURE__ */ t(
1283
+ "svg",
1284
+ {
1285
+ width: "16",
1286
+ height: "16",
1287
+ viewBox: "0 0 16 16",
1288
+ fill: "currentColor",
1289
+ className: r ? `${n}__icon--rotated` : "",
1290
+ children: /* @__PURE__ */ t("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" })
1291
+ }
1292
+ ) })
1293
+ ]
1294
+ }
1295
+ );
1296
+ }, et = ({
1297
+ className: e = "",
1298
+ children: s,
1299
+ eventKey: l,
1300
+ isActive: a = !1,
1301
+ ...i
1302
+ }) => {
1303
+ const r = "clarity-accordion";
1304
+ return /* @__PURE__ */ t(
1305
+ "div",
1306
+ {
1307
+ id: l ? `${r}-collapse-${l}` : void 0,
1308
+ className: [
1309
+ `${r}__collapse`,
1310
+ a && `${r}__collapse--show`
1311
+ ].filter(Boolean).join(" "),
1312
+ children: /* @__PURE__ */ t("div", { className: [`${r}__body`, e].filter(Boolean).join(" "), ...i, children: s })
1313
+ }
1314
+ );
1315
+ }, yt = Object.assign(Ye, {
1316
+ Item: Ze,
1317
+ Header: Ke,
1318
+ Body: et
1319
+ }), Se = q(
1320
+ void 0
1321
+ ), Re = () => {
1322
+ const e = G(Se);
1323
+ if (!e)
1324
+ throw new Error("useDropdown must be used within a DropdownProvider");
1325
+ return e;
1326
+ }, tt = ({ children: e }) => {
1327
+ const { setIsOpen: s, triggerRef: l } = Re();
1328
+ return /* @__PURE__ */ t(
1329
+ "button",
1330
+ {
1331
+ type: "button",
1332
+ ref: l,
1333
+ className: "dropdown__trigger",
1334
+ onClick: () => s((a) => !a),
1335
+ "aria-haspopup": "true",
1336
+ children: e
1337
+ }
1338
+ );
1339
+ }, st = ({ children: e }) => {
1340
+ const { isOpen: s, contentRef: l, styles: a } = Re();
1341
+ return s ? /* @__PURE__ */ t("div", { ref: l, className: "dropdown__content", style: a, children: e }) : null;
1342
+ }, lt = ({ children: e }) => /* @__PURE__ */ t("div", { className: "dropdown__menu", children: e }), at = ({ href: e, children: s }) => /* @__PURE__ */ t("a", { href: e, className: "dropdown__item", children: s }), it = () => /* @__PURE__ */ t("hr", { className: "dropdown__separator" }), se = ({ title: e, position: s = "bottom", children: l }) => {
1343
+ const [a, i] = T(!1), [r, c] = T({}), f = V(null), n = V(null), m = V(null);
1344
+ return We(() => {
1345
+ if (a) {
1346
+ const p = n.current, y = m.current;
1347
+ if (!p || !y) return;
1348
+ const u = p.getBoundingClientRect(), d = y.getBoundingClientRect(), o = window.innerHeight, N = window.innerWidth;
1349
+ let v = s;
1350
+ s === "bottom" && u.bottom + d.height > o && (v = "top"), s === "top" && u.top - d.height < 0 && (v = "bottom"), s === "right" && u.right + d.width > N && (v = "left"), s === "left" && u.left - d.width < 0 && (v = "right");
1351
+ const b = {};
1352
+ switch (v) {
1353
+ case "top":
1354
+ b.bottom = u.height + 4, b.left = u.width / 2 - d.width / 2;
1355
+ break;
1356
+ case "right":
1357
+ b.left = u.width + 4, b.top = u.height / 2 - d.height / 2;
1358
+ break;
1359
+ case "left":
1360
+ b.right = u.width + 4, b.top = u.height / 2 - d.height / 2;
1361
+ break;
1362
+ case "bottom":
1363
+ default:
1364
+ b.top = u.height + 4, b.left = u.width / 2 - d.width / 2;
1365
+ break;
1366
+ }
1367
+ c(b);
1368
+ }
1369
+ }, [a, s]), D(() => {
1370
+ const p = (y) => {
1371
+ f.current && !f.current.contains(y.target) && i(!1);
1372
+ };
1373
+ return document.addEventListener("mousedown", p), () => {
1374
+ document.removeEventListener("mousedown", p);
1375
+ };
1376
+ }, []), /* @__PURE__ */ t(Se.Provider, { value: { isOpen: a, setIsOpen: i, triggerRef: n, contentRef: m, styles: r }, children: /* @__PURE__ */ t(
1377
+ "div",
1378
+ {
1379
+ ref: f,
1380
+ className: "dropdown",
1381
+ title: e,
1382
+ children: l
1383
+ }
1384
+ ) });
1385
+ };
1386
+ se.Trigger = tt;
1387
+ se.Content = st;
1388
+ se.Menu = lt;
1389
+ se.Item = at;
1390
+ se.Separator = it;
1391
+ const De = q(null), Ae = () => {
1392
+ const e = G(De);
1393
+ if (!e)
1394
+ throw new Error("useTabs must be used within a Tabs provider");
1395
+ return e;
1396
+ }, He = ({ id: e, label: s, className: l = "" }) => {
1397
+ const { activeTab: a, setActiveTab: i, variant: r, orientation: c } = Ae(), f = a === e, n = [
1398
+ "clarity-tab",
1399
+ l,
1400
+ f ? "active" : "",
1401
+ f ? `variant-${r}` : "",
1402
+ `orientation-${c}`
1403
+ ].filter(Boolean).join(" ");
1404
+ return /* @__PURE__ */ t(
1405
+ "button",
1406
+ {
1407
+ className: n,
1408
+ onClick: () => i(e),
1409
+ role: "tab",
1410
+ "aria-selected": f,
1411
+ children: /* @__PURE__ */ t("span", { className: "clarity-tab-label", children: s })
1412
+ }
1413
+ );
1414
+ };
1415
+ He.displayName = "Tabs.Tab";
1416
+ const Pe = ({ id: e, children: s, className: l = "" }) => {
1417
+ const { activeTab: a } = Ae(), i = a === e, r = {
1418
+ visibility: i ? "visible" : "hidden",
1419
+ gridArea: "1 / 1"
1420
+ };
1421
+ return i || (r.pointerEvents = "none"), /* @__PURE__ */ t("div", { className: `clarity-tab-content ${l}`, role: "tabpanel", style: r, children: s });
1422
+ };
1423
+ Pe.displayName = "Tabs.Content";
1424
+ const de = ({
1425
+ children: e,
1426
+ defaultTab: s,
1427
+ variant: l = "primary",
1428
+ orientation: a = "horizontal",
1429
+ className: i = ""
1430
+ }) => {
1431
+ const [r, c] = T(s), f = te(() => ({
1432
+ activeTab: r,
1433
+ setActiveTab: c,
1434
+ variant: l,
1435
+ orientation: a
1436
+ }), [r, l, a]), n = [
1437
+ "clarity-tabs-container",
1438
+ i,
1439
+ `orientation-${a}`
1440
+ ].filter(Boolean).join(" ");
1441
+ return /* @__PURE__ */ t(De.Provider, { value: f, children: /* @__PURE__ */ t("div", { className: n, children: e }) });
1442
+ };
1443
+ de.Tab = He;
1444
+ de.Content = Pe;
1445
+ de.displayName = "Tabs";
1446
+ const vt = ({
1447
+ content: e,
1448
+ position: s = "top",
1449
+ variant: l = "primary",
1450
+ product: a,
1451
+ tone: i,
1452
+ bgColor: r,
1453
+ textColor: c,
1454
+ children: f,
1455
+ className: n = "",
1456
+ disabled: m = !1,
1457
+ delay: p = 200,
1458
+ hideDelay: y = 100,
1459
+ trigger: u = "hover",
1460
+ arrow: d = !0,
1461
+ ...o
1462
+ }) => {
1463
+ const [N, v] = T(!1), [b, w] = T(null), j = V(null), g = V(null), _ = "clarity-tooltip", k = !!r, E = a && i && !k;
1464
+ let x = "";
1465
+ k ? x = `${_}__content--custom-bg` : E ? x = `${_}__content--custom` : x = `${_}__content--${l}`;
1466
+ const B = [
1467
+ _,
1468
+ `${_}--${s}`,
1469
+ n
1470
+ ].filter(Boolean).join(" "), I = [
1471
+ `${_}__content`,
1472
+ x,
1473
+ d && `${_}__content--arrow`
1474
+ ].filter(Boolean).join(" "), A = {}, L = {};
1475
+ k && r && (L["--tooltip-bg-color"] = r), c && (L["--tooltip-text-color"] = c), E && a && i && (L["--tooltip-product"] = a, L["--tooltip-tone"] = i);
1476
+ const $ = {
1477
+ ...A,
1478
+ ...Object.keys(L).length > 0 ? L : {}
1479
+ }, M = () => {
1480
+ if (m) return;
1481
+ b && clearTimeout(b);
1482
+ const P = setTimeout(() => {
1483
+ v(!0);
1484
+ }, p);
1485
+ w(P);
1486
+ }, H = () => {
1487
+ b && clearTimeout(b);
1488
+ const P = setTimeout(() => {
1489
+ v(!1);
1490
+ }, y);
1491
+ w(P);
1492
+ }, F = () => {
1493
+ m || v(!N);
1494
+ }, Q = () => {
1495
+ m || M();
1496
+ }, K = () => {
1497
+ H();
1498
+ };
1499
+ D(() => () => {
1500
+ b && clearTimeout(b);
1501
+ }, [b]);
1502
+ const U = {};
1503
+ return u === "hover" ? (U.onMouseEnter = M, U.onMouseLeave = H) : u === "click" ? U.onClick = F : u === "focus" && (U.onFocus = Q, U.onBlur = K), /* @__PURE__ */ C(
1504
+ "div",
1505
+ {
1506
+ ref: g,
1507
+ className: `${_}__trigger`,
1508
+ ...U,
1509
+ ...o,
1510
+ children: [
1511
+ f,
1512
+ N && /* @__PURE__ */ t(
1513
+ "div",
1514
+ {
1515
+ ref: j,
1516
+ className: B,
1517
+ style: $,
1518
+ role: "tooltip",
1519
+ "aria-hidden": !N,
1520
+ children: /* @__PURE__ */ t("div", { className: I, children: e })
1521
+ }
1522
+ )
1523
+ ]
1524
+ }
1525
+ );
1526
+ }, nt = ({ columns: e, viewMode: s }) => {
1527
+ const l = Array.from({ length: 5 }, (a, i) => i);
1528
+ return s === "card" ? /* @__PURE__ */ C("div", { className: "card-view-wrapper is-loading", children: [
1529
+ /* @__PURE__ */ t("div", { className: "skeleton card-view-header" }),
1530
+ /* @__PURE__ */ t("div", { className: "card-view-body", children: l.map((a) => /* @__PURE__ */ t("div", { className: "skeleton card-view-row" }, a)) })
1531
+ ] }) : /* @__PURE__ */ t("div", { className: "table-wrapper is-loading", children: /* @__PURE__ */ C("table", { children: [
1532
+ /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ t("tr", { className: "table-row", children: e.map((a) => /* @__PURE__ */ t("th", { className: "table-header-cell", children: /* @__PURE__ */ t("div", { className: "skeleton skeleton-text" }) }, a.key)) }) }),
1533
+ /* @__PURE__ */ t("tbody", { children: l.map((a) => /* @__PURE__ */ t("tr", { className: "table-row", children: e.map((i) => /* @__PURE__ */ t("td", { className: "table-cell", children: /* @__PURE__ */ t("div", { className: "skeleton skeleton-text" }) }, i.key)) }, a)) })
1534
+ ] }) });
1535
+ }, Nt = ({
1536
+ variant: e = "secondary",
1537
+ columns: s,
1538
+ data: l,
1539
+ viewMode: a = "table",
1540
+ isScrollable: i = !1,
1541
+ isLoading: r = !1
1542
+ }) => {
1543
+ const [c, f] = T(null), [n, m] = T("none"), p = (o) => {
1544
+ o.sortable && (c === o.key ? m((N) => N === "asc" ? "desc" : N === "desc" ? "none" : "asc") : (f(o.key), m("asc")));
1545
+ }, y = te(() => n === "none" || !c ? l : [...l].sort((o, N) => {
1546
+ const v = o[c], b = N[c];
1547
+ return v < b ? n === "asc" ? -1 : 1 : v > b ? n === "asc" ? 1 : -1 : 0;
1548
+ }), [l, c, n]), u = (o) => o.sortable ? c !== o.key || n === "none" ? /* @__PURE__ */ t("span", { className: "sort-icon", children: "↕" }) : n === "asc" ? /* @__PURE__ */ t("span", { className: "sort-icon", children: "↑" }) : /* @__PURE__ */ t("span", { className: "sort-icon", children: "↓" }) : null;
1549
+ if (r)
1550
+ return /* @__PURE__ */ t(nt, { columns: s, viewMode: a });
1551
+ const d = `table-variant-${e} ${i ? "is-scrollable" : ""}`;
1552
+ return a === "card" ? /* @__PURE__ */ C("div", { className: `card-view-wrapper ${d}`, children: [
1553
+ /* @__PURE__ */ t("div", { className: `card-view-header table-header-cell-${e}`, children: s.map((o) => /* @__PURE__ */ C(
1554
+ "div",
1555
+ {
1556
+ className: `card-view-header-cell ${o.sortable ? "sortable" : ""}`,
1557
+ onClick: () => p(o),
1558
+ style: { minWidth: o.minWidth },
1559
+ children: [
1560
+ o.header,
1561
+ u(o)
1562
+ ]
1563
+ },
1564
+ o.key
1565
+ )) }),
1566
+ /* @__PURE__ */ t("div", { className: "card-view-body", children: y.map((o, N) => /* @__PURE__ */ t("div", { className: `card-view-row table-row-${e}`, children: s.map((v) => /* @__PURE__ */ t("div", { className: "card-view-cell", style: { minWidth: v.minWidth }, children: o[v.key] }, v.key)) }, N)) })
1567
+ ] }) : /* @__PURE__ */ t("div", { className: `table-wrapper ${d}`, children: /* @__PURE__ */ C("table", { children: [
1568
+ /* @__PURE__ */ t("thead", { className: "table-header", children: /* @__PURE__ */ t("tr", { className: "table-row", children: s.map((o) => /* @__PURE__ */ C(
1569
+ "th",
1570
+ {
1571
+ className: `table-header-cell ${o.sortable ? "sortable" : ""} table-header-cell-${e}`,
1572
+ onClick: () => p(o),
1573
+ style: { minWidth: o.minWidth },
1574
+ children: [
1575
+ o.header,
1576
+ u(o)
1577
+ ]
1578
+ },
1579
+ o.key
1580
+ )) }) }),
1581
+ /* @__PURE__ */ t("tbody", { children: y.map((o, N) => /* @__PURE__ */ t("tr", { className: `table-row table-row-${e}`, children: s.map((v) => /* @__PURE__ */ t("td", { className: "table-cell", style: { minWidth: v.minWidth }, children: o[v.key] }, v.key)) }, N)) })
1582
+ ] }) });
1583
+ }, bt = ({
1584
+ variant: e = "primary",
1585
+ product: s,
1586
+ tone: l,
1587
+ size: a = "medium",
1588
+ color: i,
1589
+ className: r = "",
1590
+ "aria-label": c = "Carregando...",
1591
+ ...f
1592
+ }) => {
1593
+ const n = "clarity-spinner", y = i ? `${n}--custom` : s && l ? `${n}--custom` : `${n}--${e}`, u = [
1594
+ n,
1595
+ `${n}--${a}`,
1596
+ y,
1597
+ r
1598
+ ].filter(Boolean).join(" "), d = {};
1599
+ return i ? d["--spinner-color"] = i : s && l && (d["--spinner-color"] = `var(--clarity-${s}-${l})`), /* @__PURE__ */ t(
1600
+ "div",
1601
+ {
1602
+ className: u,
1603
+ style: d,
1604
+ role: "status",
1605
+ "aria-label": c,
1606
+ ...f,
1607
+ children: /* @__PURE__ */ t("div", { className: `${n}__container`, children: /* @__PURE__ */ t(
1608
+ "svg",
1609
+ {
1610
+ className: `${n}__svg`,
1611
+ viewBox: "0 0 50 50",
1612
+ xmlns: "http://www.w3.org/2000/svg",
1613
+ children: /* @__PURE__ */ t(
1614
+ "circle",
1615
+ {
1616
+ className: `${n}__circle`,
1617
+ cx: "25",
1618
+ cy: "25",
1619
+ r: "20",
1620
+ fill: "none",
1621
+ strokeWidth: "4"
1622
+ }
1623
+ )
1624
+ }
1625
+ ) })
1626
+ }
1627
+ );
1628
+ }, _t = {
636
1629
  primary: {
637
1630
  50: "#f0f9ff",
638
1631
  100: "#e0f2fe",
@@ -681,7 +1674,7 @@ const ve = {
681
1674
  800: "#065f46",
682
1675
  900: "#064e3b"
683
1676
  }
684
- }, Ne = {
1677
+ }, wt = {
685
1678
  xs: "4px",
686
1679
  sm: "8px",
687
1680
  md: "16px",
@@ -689,7 +1682,7 @@ const ve = {
689
1682
  xl: "32px",
690
1683
  "2xl": "48px",
691
1684
  "3xl": "64px"
692
- }, xe = {
1685
+ }, Ct = {
693
1686
  fontFamily: {
694
1687
  sans: ["Inter", "system-ui", "sans-serif"],
695
1688
  mono: ["Fira Code", "monospace"]
@@ -709,17 +1702,32 @@ const ve = {
709
1702
  semibold: 600,
710
1703
  bold: 700
711
1704
  }
712
- }, be = (...a) => a.filter(Boolean).join(" "), we = () => Math.random().toString(36).substr(2, 9);
1705
+ }, gt = (...e) => e.filter(Boolean).join(" "), $t = () => Math.random().toString(36).substr(2, 9);
713
1706
  export {
714
- _e as Button,
715
- ue as Input,
716
- K as Modal,
717
- ye as MultiSelect,
718
- fe as Select,
719
- me as Textarea,
720
- be as cn,
721
- ve as colors,
722
- we as generateId,
723
- Ne as spacing,
724
- xe as typography
1707
+ yt as Accordion,
1708
+ dt as Badge,
1709
+ ut as Button,
1710
+ ht as ButtonIcon,
1711
+ pt as ButtonLink,
1712
+ Qe as CheckInput,
1713
+ J as ConfirmationDialog,
1714
+ se as Dropdown,
1715
+ Ue as Input,
1716
+ Xe as InputSwitch,
1717
+ Y as Modal,
1718
+ Ge as MultiSelect,
1719
+ Z as Offcanvas,
1720
+ qe as Select,
1721
+ bt as Spinner,
1722
+ Nt as Table,
1723
+ de as Tabs,
1724
+ ze as Textarea,
1725
+ ft as ToastProvider,
1726
+ vt as Tooltip,
1727
+ gt as cn,
1728
+ _t as colors,
1729
+ $t as generateId,
1730
+ wt as spacing,
1731
+ Ct as typography,
1732
+ mt as useToast
725
1733
  };