beth-clarity 1.0.10 → 1.1.1

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