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