@clickpalm/react 1.3.13 → 1.3.15

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.
package/dist/index.js DELETED
@@ -1,4445 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
-
30
- // src/index.tsx
31
- var src_exports = {};
32
- __export(src_exports, {
33
- Accordion: () => Accordion2,
34
- Avatar: () => Avatar2,
35
- Box: () => Box,
36
- Button: () => Button,
37
- Calendar: () => Calendar2,
38
- Carousel: () => Carousel,
39
- Checkbox: () => Checkbox2,
40
- Datepicker: () => Datepicker,
41
- Dropdown: () => Dropdown,
42
- DropdownItem: () => DropdownItem,
43
- DropdownSeparator: () => DropdownSeparator,
44
- Heading: () => Heading,
45
- Hr: () => Hr,
46
- Icon: () => Icon,
47
- Input: () => Input2,
48
- LabelledValue: () => LabelledValue,
49
- Loader: () => Loader,
50
- MaskedInput: () => MaskedInput,
51
- Modal: () => Modal,
52
- MultiStep: () => MultiStep,
53
- OneTimePassword: () => OneTimePassword,
54
- Paragraph: () => Paragraph,
55
- PasswordInput: () => PasswordInput,
56
- ProgressBar: () => ProgressBar,
57
- Radio: () => Radio,
58
- Select: () => Select2,
59
- Spacing: () => Spacing,
60
- Span: () => Span5,
61
- StyledHr: () => StyledHr,
62
- Switch: () => Switch2,
63
- Tabs: () => Tabs2,
64
- TextArea: () => TextArea,
65
- TextAreaElement: () => TextAreaElement,
66
- Toast: () => Toast,
67
- Tooltip: () => Tooltip,
68
- config: () => config,
69
- createTheme: () => createTheme,
70
- css: () => css,
71
- getCssText: () => getCssText,
72
- globalCss: () => globalCss,
73
- keyframes: () => keyframes,
74
- styled: () => styled,
75
- theme: () => theme,
76
- toast: () => toast
77
- });
78
- module.exports = __toCommonJS(src_exports);
79
-
80
- // ../tokens/dist/index.mjs
81
- var colors = {
82
- white: "#FFF",
83
- black: "#000",
84
- gray_background: "#EFEFEF",
85
- gray_light: "#D9D9D9",
86
- gray_mid: "#C2C2C2",
87
- gray_dark: "#979797",
88
- clickpalm_light: "#8987E6",
89
- clickpalm_mid: "#8556E5",
90
- clickpalm_dark: "#854FE8",
91
- clickpalm_superDark: "#4A307F",
92
- ignite_light: "#78CB63",
93
- ignite_dark: "#518D42",
94
- success: "#84FF8A",
95
- success_dark: "#3EBF4A",
96
- warning: "#FCD842",
97
- warning_dark: "#C9A600",
98
- danger: "#FF8173",
99
- danger_dark: "#C94A3F"
100
- };
101
- var space = {
102
- 1: "0.25rem",
103
- 2: "0.5rem",
104
- 3: "0.75rem",
105
- 4: "1rem",
106
- 5: "1.25rem",
107
- 6: "1.5rem",
108
- 7: "1.75rem",
109
- 8: "2rem",
110
- 10: "2.5rem",
111
- 11: "2.75rem",
112
- 12: "3rem",
113
- 14: "3.5rem",
114
- 16: "4rem",
115
- 19: "4.75rem",
116
- 20: "5rem",
117
- 22: "6rem",
118
- 40: "10rem",
119
- 64: "16rem",
120
- 80: "20rem"
121
- };
122
- var radii = {
123
- px: "1px",
124
- xs: "4px",
125
- sm: "6px",
126
- md: "8px",
127
- lg: "16px",
128
- full: "99999px"
129
- };
130
- var fonts = {
131
- default: "Nunito",
132
- code: "monospace"
133
- };
134
- var fontSizes = {
135
- xxs: "0.625rem",
136
- xs: "0.75rem",
137
- sm: "0.875rem",
138
- md: "1rem",
139
- lg: "1.125rem",
140
- xl: "1.25rem",
141
- "2xl": "1.5rem",
142
- "4xl": "2rem",
143
- "5xl": "2.25rem",
144
- "6xl": "3rem",
145
- "7xl": "4rem",
146
- "8xl": "4.5rem",
147
- "9xl": "6rem"
148
- };
149
- var fontWeights = {
150
- regular: "400",
151
- medium: "500",
152
- bold: "700"
153
- };
154
- var lineHeights = {
155
- regular: "100%",
156
- shorter: "125%",
157
- short: "140%",
158
- base: "160%",
159
- tall: "180%"
160
- };
161
-
162
- // src/styles/stitches.config.ts
163
- var import_react = require("@stitches/react");
164
- var {
165
- styled,
166
- css,
167
- globalCss,
168
- keyframes,
169
- getCssText,
170
- theme,
171
- createTheme,
172
- config
173
- } = (0, import_react.createStitches)({
174
- themeMap: {
175
- ...import_react.defaultThemeMap,
176
- height: "space",
177
- width: "space"
178
- },
179
- theme: {
180
- colors,
181
- fontSizes,
182
- fontWeights,
183
- fonts,
184
- lineHeights,
185
- radii,
186
- space
187
- },
188
- media: {
189
- sm: "(min-width: 375px)",
190
- md: "(min-width: 768px)",
191
- lg: "(min-width: 1024px)"
192
- }
193
- });
194
-
195
- // src/components/Avatar/styles.ts
196
- var Avatar = __toESM(require("@radix-ui/react-avatar"));
197
- var AvatarContainer = styled(Avatar.Root, {
198
- borderRadius: "$full",
199
- display: "inline-block",
200
- overflow: "hidden",
201
- borderWidth: "3px",
202
- borderStyle: "solid",
203
- boxSizing: "border-box",
204
- variants: {
205
- size: {
206
- sm: { width: "$11", height: "$11" },
207
- md: { width: "$14", height: "$14" },
208
- lg: { width: "$19", height: "$19" },
209
- xlg: { width: "$22", height: "$22" }
210
- },
211
- status: {
212
- default: { borderColor: "$white" },
213
- warning: { borderColor: "$warning" },
214
- error: { borderColor: "$danger" },
215
- success: { borderColor: "$success" },
216
- completed: { borderColor: "$clickpalm_dark" }
217
- },
218
- shadow: {
219
- true: { boxShadow: "0 2px 4px $colors$gray_dark" }
220
- }
221
- },
222
- defaultVariants: {
223
- size: "md",
224
- status: "default"
225
- }
226
- });
227
- var AvatarImage = styled(Avatar.Image, {
228
- width: "100%",
229
- height: "100%",
230
- objectFit: "cover",
231
- borderRadius: "inherit"
232
- });
233
- var AvatarFallback = styled(Avatar.Fallback, {
234
- width: "100%",
235
- height: "100%",
236
- display: "flex",
237
- alignItems: "center",
238
- justifyContent: "center",
239
- backgroundColor: "$gray_background",
240
- color: "$black",
241
- fontWeight: "$bold",
242
- fontSize: "$sm"
243
- });
244
- var NotificationBadge = styled("div", {
245
- position: "absolute",
246
- transform: "translate(50%, 50%)",
247
- backgroundColor: "$ignite_light",
248
- color: "$black",
249
- fontWeight: "$bold",
250
- display: "flex",
251
- alignItems: "center",
252
- justifyContent: "center",
253
- borderRadius: "$full",
254
- border: "1px solid $white",
255
- boxSizing: "border-box",
256
- zIndex: 1,
257
- variants: {
258
- size: {
259
- sm: {
260
- width: "20px",
261
- height: "20px",
262
- fontSize: "8px",
263
- bottom: 18,
264
- right: 4
265
- },
266
- md: {
267
- width: "20px",
268
- height: "20px",
269
- fontSize: "10px",
270
- bottom: 20,
271
- right: 5
272
- },
273
- lg: {
274
- width: "30px",
275
- height: "30px",
276
- fontSize: "11px",
277
- bottom: 25,
278
- right: 8
279
- },
280
- xlg: {
281
- width: "30px",
282
- height: "30px",
283
- fontSize: "12px",
284
- bottom: 25,
285
- right: 8
286
- }
287
- }
288
- },
289
- defaultVariants: {
290
- size: "md"
291
- }
292
- });
293
-
294
- // src/components/Avatar/index.tsx
295
- var import_jsx_runtime = require("react/jsx-runtime");
296
- function Avatar2({
297
- fallback,
298
- className,
299
- style,
300
- size = "md",
301
- status = "default",
302
- notifications = 0,
303
- shadow = false,
304
- ...props
305
- }) {
306
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative", display: "inline-block" }, children: [
307
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AvatarContainer, { className, style, size, status, shadow, children: [
308
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarImage, { ...props }),
309
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarFallback, { children: fallback })
310
- ] }),
311
- notifications > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NotificationBadge, { size, children: notifications > 99 ? "99+" : notifications })
312
- ] });
313
- }
314
- Avatar2.displayName = "Avatar";
315
-
316
- // src/components/Calendar/index.tsx
317
- var import_date_fns = require("date-fns");
318
- var import_locale = require("date-fns/locale");
319
- var import_react4 = require("react");
320
- var import_react_day_picker = require("react-day-picker");
321
- var import_style = require("react-day-picker/dist/style.css");
322
-
323
- // src/components/Button.tsx
324
- var import_react2 = require("react");
325
- var import_jsx_runtime2 = require("react/jsx-runtime");
326
- var StyledButton = styled("button", {
327
- all: "unset",
328
- borderRadius: "$md",
329
- fontWeight: "$bold",
330
- fontFamily: "$default",
331
- textAlign: "center",
332
- boxSizing: "border-box",
333
- display: "flex",
334
- alignItems: "center",
335
- justifyContent: "center",
336
- gap: "$2",
337
- cursor: "pointer",
338
- svg: {
339
- width: "$4",
340
- height: "$4"
341
- },
342
- "&:disabled": {
343
- cursor: "not-allowed"
344
- },
345
- "&:focus": {
346
- outline: "none"
347
- },
348
- variants: {
349
- variant: {
350
- primary: {
351
- color: "$white",
352
- backgroundImage: "linear-gradient(to bottom, $ignite_light, $ignite_dark)",
353
- "&:not(:disabled):is(:hover, :focus)": {
354
- background: "$ignite_dark"
355
- },
356
- "&:disabled": {
357
- opacity: "0.6"
358
- }
359
- },
360
- secondary: {
361
- color: "$clickpalm_mid",
362
- border: "2px solid $ignite_light",
363
- "&:not(:disabled):is(:hover, :focus)": {
364
- border: "2px solid $ignite_dark"
365
- },
366
- "&:disabled": {
367
- opacity: "0.6"
368
- }
369
- },
370
- tertiary: {
371
- color: "$ignite_light",
372
- border: "3px solid $clickpalm_mid",
373
- "&:not(:disabled):is(:hover, :focus)": {
374
- color: "$ignite_dark"
375
- },
376
- "&:disabled": {
377
- opacity: "0.6"
378
- },
379
- svg: {
380
- fill: "$ignite_light"
381
- }
382
- }
383
- },
384
- size: {
385
- xs: {},
386
- sm: {
387
- height: 33,
388
- padding: "0 $2",
389
- fontSize: "$md"
390
- },
391
- md: {
392
- height: 53,
393
- padding: "0 $4",
394
- fontSize: "$md"
395
- },
396
- lg: {
397
- height: 70,
398
- padding: "0 $6",
399
- fontSize: "$2xl"
400
- }
401
- },
402
- full: {
403
- true: {
404
- width: "100%"
405
- }
406
- },
407
- round: {
408
- md: {
409
- height: 53,
410
- width: 53,
411
- padding: "0 $4",
412
- borderRadius: "50%"
413
- },
414
- lg: {
415
- height: 70,
416
- width: 70,
417
- padding: "0 $6",
418
- borderRadius: "50%"
419
- },
420
- xlg: {
421
- height: 160,
422
- width: 160,
423
- padding: "0 $8",
424
- borderRadius: "50%"
425
- }
426
- }
427
- },
428
- defaultVariants: {
429
- variant: "primary",
430
- size: "md"
431
- }
432
- });
433
- var Button = (0, import_react2.forwardRef)(function Button2({ children, ...props }, ref) {
434
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyledButton, { ref, ...props, children });
435
- });
436
- Button.displayName = "Button";
437
-
438
- // src/components/Icon/index.tsx
439
- var import_react3 = require("react");
440
-
441
- // src/components/Icon/icons.ts
442
- var import_react_icons = require("@radix-ui/react-icons");
443
-
444
- // src/components/Icon/Svgs/Calendar.tsx
445
- var import_jsx_runtime3 = require("react/jsx-runtime");
446
- var Calendar = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
447
- "svg",
448
- {
449
- width: "18",
450
- height: "21",
451
- viewBox: "0 0 18 21",
452
- fill: "none",
453
- xmlns: "http://www.w3.org/2000/svg",
454
- ...props,
455
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
456
- "path",
457
- {
458
- d: "M6 14.6113C5.3 14.6113 4.70833 14.3697 4.225 13.8863C3.74167 13.403 3.5 12.8113 3.5 12.1113C3.5 11.4113 3.74167 10.8197 4.225 10.3363C4.70833 9.85299 5.3 9.61133 6 9.61133C6.7 9.61133 7.29167 9.85299 7.775 10.3363C8.25833 10.8197 8.5 11.4113 8.5 12.1113C8.5 12.8113 8.25833 13.403 7.775 13.8863C7.29167 14.3697 6.7 14.6113 6 14.6113ZM2 20.1113C1.45 20.1113 0.979167 19.9155 0.5875 19.5238C0.195833 19.1322 0 18.6613 0 18.1113V4.11133C0 3.56133 0.195833 3.09049 0.5875 2.69883C0.979167 2.30716 1.45 2.11133 2 2.11133H3V0.111328H5V2.11133H13V0.111328H15V2.11133H16C16.55 2.11133 17.0208 2.30716 17.4125 2.69883C17.8042 3.09049 18 3.56133 18 4.11133V18.1113C18 18.6613 17.8042 19.1322 17.4125 19.5238C17.0208 19.9155 16.55 20.1113 16 20.1113H2ZM2 18.1113H16V8.11133H2V18.1113Z",
459
- fill: "currentColor"
460
- }
461
- )
462
- }
463
- );
464
-
465
- // src/components/Icon/Svgs/Closed.tsx
466
- var import_jsx_runtime4 = require("react/jsx-runtime");
467
- var Closed = (props) => {
468
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
469
- "svg",
470
- {
471
- width: "14",
472
- height: "15",
473
- viewBox: "0 0 14 15",
474
- fill: "none",
475
- xmlns: "http://www.w3.org/2000/svg",
476
- ...props,
477
- children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
478
- "path",
479
- {
480
- d: "M1.4 14.5L0 13.1L5.6 7.5L0 1.9L1.4 0.5L7 6.1L12.6 0.5L14 1.9L8.4 7.5L14 13.1L12.6 14.5L7 8.9L1.4 14.5Z",
481
- fill: "currentColor"
482
- }
483
- )
484
- }
485
- );
486
- };
487
-
488
- // src/components/Icon/Svgs/Dots.tsx
489
- var import_jsx_runtime5 = require("react/jsx-runtime");
490
- var Dots = (props) => {
491
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
492
- "svg",
493
- {
494
- width: "16",
495
- height: "5",
496
- viewBox: "0 0 16 5",
497
- fill: "none",
498
- xmlns: "http://www.w3.org/2000/svg",
499
- ...props,
500
- children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
501
- "path",
502
- {
503
- d: "M2 4.36865C1.45 4.36865 0.979167 4.17282 0.5875 3.78115C0.195833 3.38949 0 2.91865 0 2.36865C0 1.81865 0.195833 1.34782 0.5875 0.956152C0.979167 0.564486 1.45 0.368652 2 0.368652C2.55 0.368652 3.02083 0.564486 3.4125 0.956152C3.80417 1.34782 4 1.81865 4 2.36865C4 2.91865 3.80417 3.38949 3.4125 3.78115C3.02083 4.17282 2.55 4.36865 2 4.36865ZM8 4.36865C7.45 4.36865 6.97917 4.17282 6.5875 3.78115C6.19583 3.38949 6 2.91865 6 2.36865C6 1.81865 6.19583 1.34782 6.5875 0.956152C6.97917 0.564486 7.45 0.368652 8 0.368652C8.55 0.368652 9.02083 0.564486 9.4125 0.956152C9.80417 1.34782 10 1.81865 10 2.36865C10 2.91865 9.80417 3.38949 9.4125 3.78115C9.02083 4.17282 8.55 4.36865 8 4.36865ZM14 4.36865C13.45 4.36865 12.9792 4.17282 12.5875 3.78115C12.1958 3.38949 12 2.91865 12 2.36865C12 1.81865 12.1958 1.34782 12.5875 0.956152C12.9792 0.564486 13.45 0.368652 14 0.368652C14.55 0.368652 15.0208 0.564486 15.4125 0.956152C15.8042 1.34782 16 1.81865 16 2.36865C16 2.91865 15.8042 3.38949 15.4125 3.78115C15.0208 4.17282 14.55 4.36865 14 4.36865Z",
504
- fill: "currentColor"
505
- }
506
- )
507
- }
508
- );
509
- };
510
-
511
- // src/components/Icon/Svgs/Filter.tsx
512
- var import_jsx_runtime6 = require("react/jsx-runtime");
513
- var Filter = (props) => {
514
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
515
- "svg",
516
- {
517
- xmlns: "http://www.w3.org/2000/svg",
518
- width: "32",
519
- height: "32",
520
- fill: "currentColor",
521
- viewBox: "0 0 256 256",
522
- ...props,
523
- children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M234.29,47.91A20,20,0,0,0,216,36H40A20,20,0,0,0,25.2,69.45l.12.14L92,140.75V216a20,20,0,0,0,31.1,16.64l32-21.33A20,20,0,0,0,164,194.66V140.75l66.67-71.16.12-.14A20,20,0,0,0,234.29,47.91Zm-91,79.89A12,12,0,0,0,140,136v56.52l-24,16V136a12,12,0,0,0-3.25-8.2L49.23,60H206.77Z" })
524
- }
525
- );
526
- };
527
-
528
- // src/components/Icon/Svgs/Hamburger.tsx
529
- var import_jsx_runtime7 = require("react/jsx-runtime");
530
- var Hamburger = (props) => {
531
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
532
- "svg",
533
- {
534
- xmlns: "http://www.w3.org/2000/svg",
535
- width: "32",
536
- height: "32",
537
- fill: "currentColor",
538
- viewBox: "0 0 256 256",
539
- ...props,
540
- children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128ZM40,76H216a12,12,0,0,0,0-24H40a12,12,0,0,0,0,24ZM216,180H40a12,12,0,0,0,0,24H216a12,12,0,0,0,0-24Z" })
541
- }
542
- );
543
- };
544
-
545
- // src/components/Icon/Svgs/Pencil.tsx
546
- var import_jsx_runtime8 = require("react/jsx-runtime");
547
- var Pencil = (props) => {
548
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
549
- "svg",
550
- {
551
- width: "18",
552
- height: "19",
553
- viewBox: "0 0 18 19",
554
- fill: "none",
555
- xmlns: "http://www.w3.org/2000/svg",
556
- ...props,
557
- children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
558
- "path",
559
- {
560
- d: "M2 16.9287H3.425L13.2 7.15371L11.775 5.72871L2 15.5037V16.9287ZM0 18.9287V14.6787L13.2 1.50371C13.4 1.32038 13.6208 1.17871 13.8625 1.07871C14.1042 0.978711 14.3583 0.928711 14.625 0.928711C14.8917 0.928711 15.15 0.978711 15.4 1.07871C15.65 1.17871 15.8667 1.32871 16.05 1.52871L17.425 2.92871C17.625 3.11204 17.7708 3.32871 17.8625 3.57871C17.9542 3.82871 18 4.07871 18 4.32871C18 4.59538 17.9542 4.84954 17.8625 5.09121C17.7708 5.33288 17.625 5.55371 17.425 5.75371L4.25 18.9287H0ZM12.475 6.45371L11.775 5.72871L13.2 7.15371L12.475 6.45371Z",
561
- fill: "currentColor"
562
- }
563
- )
564
- }
565
- );
566
- };
567
-
568
- // src/components/Icon/Svgs/Photo.tsx
569
- var import_jsx_runtime9 = require("react/jsx-runtime");
570
- var Photo = (props) => {
571
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
572
- "svg",
573
- {
574
- width: "18",
575
- height: "18",
576
- viewBox: "0 0 18 18",
577
- fill: "none",
578
- xmlns: "http://www.w3.org/2000/svg",
579
- ...props,
580
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
581
- "path",
582
- {
583
- d: "M2 18C1.45 18 0.975 17.8083 0.575 17.425C0.191667 17.025 0 16.55 0 16V2C0 1.45 0.191667 0.983334 0.575 0.600001C0.975 0.2 1.45 0 2 0H16C16.55 0 17.0167 0.2 17.4 0.600001C17.8 0.983334 18 1.45 18 2V16C18 16.55 17.8 17.025 17.4 17.425C17.0167 17.8083 16.55 18 16 18H2ZM2 16H16V2H2V16ZM3 14H15L11.25 9L8.25 13L6 10L3 14ZM2 16V2V16Z",
584
- fill: "currentColor"
585
- }
586
- )
587
- }
588
- );
589
- };
590
-
591
- // src/components/Icon/Svgs/Plus.tsx
592
- var import_jsx_runtime10 = require("react/jsx-runtime");
593
- var Plus = (props) => {
594
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
595
- "svg",
596
- {
597
- width: "20",
598
- height: "20",
599
- viewBox: "0 0 20 20",
600
- fill: "none",
601
- xmlns: "http://www.w3.org/2000/svg",
602
- ...props,
603
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
604
- "path",
605
- {
606
- d: "M8.58301 11.4167H0.0830078V8.58334H8.58301V0.0833435H11.4163V8.58334H19.9163V11.4167H11.4163V19.9167H8.58301V11.4167Z",
607
- fill: "currentColor"
608
- }
609
- )
610
- }
611
- );
612
- };
613
-
614
- // src/components/Icon/Svgs/Search.tsx
615
- var import_jsx_runtime11 = require("react/jsx-runtime");
616
- var Search = (props) => {
617
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
618
- "svg",
619
- {
620
- width: "18",
621
- height: "18",
622
- viewBox: "0 0 18 18",
623
- fill: "none",
624
- xmlns: "http://www.w3.org/2000/svg",
625
- ...props,
626
- children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
627
- "path",
628
- {
629
- d: "M16.6 18L10.3 11.7C9.8 12.1 9.225 12.4167 8.575 12.65C7.925 12.8833 7.23333 13 6.5 13C4.68333 13 3.14583 12.3708 1.8875 11.1125C0.629167 9.85417 0 8.31667 0 6.5C0 4.68333 0.629167 3.14583 1.8875 1.8875C3.14583 0.629167 4.68333 0 6.5 0C8.31667 0 9.85417 0.629167 11.1125 1.8875C12.3708 3.14583 13 4.68333 13 6.5C13 7.23333 12.8833 7.925 12.65 8.575C12.4167 9.225 12.1 9.8 11.7 10.3L18 16.6L16.6 18ZM6.5 11C7.75 11 8.8125 10.5625 9.6875 9.6875C10.5625 8.8125 11 7.75 11 6.5C11 5.25 10.5625 4.1875 9.6875 3.3125C8.8125 2.4375 7.75 2 6.5 2C5.25 2 4.1875 2.4375 3.3125 3.3125C2.4375 4.1875 2 5.25 2 6.5C2 7.75 2.4375 8.8125 3.3125 9.6875C4.1875 10.5625 5.25 11 6.5 11Z",
630
- fill: "currentColor"
631
- }
632
- )
633
- }
634
- );
635
- };
636
-
637
- // src/components/Icon/Svgs/ChevronLeft.tsx
638
- var import_jsx_runtime12 = require("react/jsx-runtime");
639
- var ChevronLeft = (props) => {
640
- return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
641
- "svg",
642
- {
643
- width: "8",
644
- height: "12",
645
- viewBox: "0 0 8 12",
646
- fill: "none",
647
- xmlns: "http://www.w3.org/2000/svg",
648
- ...props,
649
- children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
650
- "path",
651
- {
652
- d: "M6 12L0 6L6 0L7.4 1.4L2.8 6L7.4 10.6L6 12Z",
653
- fill: "currentColor"
654
- }
655
- )
656
- }
657
- );
658
- };
659
-
660
- // src/components/Icon/Svgs/ChevronRight.tsx
661
- var import_jsx_runtime13 = require("react/jsx-runtime");
662
- var ChevronRight = (props) => {
663
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
664
- "svg",
665
- {
666
- width: "8",
667
- height: "12",
668
- viewBox: "0 0 8 12",
669
- fill: "none",
670
- xmlns: "http://www.w3.org/2000/svg",
671
- ...props,
672
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
673
- "path",
674
- {
675
- d: "M4.6 6L0 1.4L1.4 0L7.4 6L1.4 12L0 10.6L4.6 6Z",
676
- fill: "currentColor"
677
- }
678
- )
679
- }
680
- );
681
- };
682
-
683
- // src/components/Icon/Svgs/Check.tsx
684
- var import_jsx_runtime14 = require("react/jsx-runtime");
685
- var Check = (props) => {
686
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
687
- "svg",
688
- {
689
- xmlns: "http://www.w3.org/2000/svg",
690
- width: "18",
691
- height: "13",
692
- viewBox: "0 0 18 13",
693
- fill: "none",
694
- ...props,
695
- children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
696
- "path",
697
- {
698
- d: "M6.55001 13L0.850006 7.3L2.27501 5.875L6.55001 10.15L15.725 0.975L17.15 2.4L6.55001 13Z",
699
- fill: "currentColor"
700
- }
701
- )
702
- }
703
- );
704
- };
705
-
706
- // src/components/Icon/Svgs/Copy.tsx
707
- var import_jsx_runtime15 = require("react/jsx-runtime");
708
- var Copy = (props) => {
709
- return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
710
- "svg",
711
- {
712
- width: "18",
713
- height: "19",
714
- viewBox: "0 0 18 19",
715
- fill: "none",
716
- xmlns: "http://www.w3.org/2000/svg",
717
- ...props,
718
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
719
- "path",
720
- {
721
- d: "M3.4 11.9547H2.6C2.17565 11.9547 1.76869 11.7861 1.46863 11.4861C1.16857 11.186 1 10.779 1 10.3547V3.15469C1 2.73034 1.16857 2.32337 1.46863 2.02332C1.76869 1.72326 2.17565 1.55469 2.6 1.55469H9.8C10.2243 1.55469 10.6313 1.72326 10.9314 2.02332C11.2314 2.32337 11.4 2.73034 11.4 3.15469V3.95469M8.2 7.15469H15.4C16.2837 7.15469 17 7.87103 17 8.75469V15.9547C17 16.8383 16.2837 17.5547 15.4 17.5547H8.2C7.31634 17.5547 6.6 16.8383 6.6 15.9547V8.75469C6.6 7.87103 7.31634 7.15469 8.2 7.15469Z",
722
- stroke: "currentColor",
723
- "stroke-width": "2",
724
- "stroke-linecap": "round",
725
- "stroke-linejoin": "round"
726
- }
727
- )
728
- }
729
- );
730
- };
731
-
732
- // src/components/Icon/Svgs/Download.tsx
733
- var import_jsx_runtime16 = require("react/jsx-runtime");
734
- var Download = (props) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
735
- "svg",
736
- {
737
- width: "15",
738
- height: "15",
739
- viewBox: "0 0 15 15",
740
- fill: "none",
741
- xmlns: "http://www.w3.org/2000/svg",
742
- ...props,
743
- children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
744
- "path",
745
- {
746
- d: "M7.50005 1.04999C7.74858 1.04999 7.95005 1.25146 7.95005 1.49999V8.41359L10.1819 6.18179C10.3576 6.00605 10.6425 6.00605 10.8182 6.18179C10.994 6.35753 10.994 6.64245 10.8182 6.81819L7.81825 9.81819C7.64251 9.99392 7.35759 9.99392 7.18185 9.81819L4.18185 6.81819C4.00611 6.64245 4.00611 6.35753 4.18185 6.18179C4.35759 6.00605 4.64251 6.00605 4.81825 6.18179L7.05005 8.41359V1.49999C7.05005 1.25146 7.25152 1.04999 7.50005 1.04999ZM2.5 10C2.77614 10 3 10.2239 3 10.5V12C3 12.5539 3.44565 13 3.99635 13H11.0012C11.5529 13 12 12.5528 12 12V10.5C12 10.2239 12.2239 10 12.5 10C12.7761 10 13 10.2239 13 10.5V12C13 13.1041 12.1062 14 11.0012 14H3.99635C2.89019 14 2 13.103 2 12V10.5C2 10.2239 2.22386 10 2.5 10Z",
747
- fill: "currentColor",
748
- fillRule: "evenodd",
749
- clipRule: "evenodd"
750
- }
751
- )
752
- }
753
- );
754
-
755
- // src/components/Icon/icons.ts
756
- var iconMap = {
757
- TriangleDown: import_react_icons.TriangleDownIcon,
758
- TriangleUp: import_react_icons.TriangleUpIcon,
759
- TriangleLeft: import_react_icons.TriangleLeftIcon,
760
- TriangleRight: import_react_icons.TriangleRightIcon,
761
- EyeClosed: import_react_icons.EyeClosedIcon,
762
- EyeOpen: import_react_icons.EyeOpenIcon,
763
- QuestionMark: import_react_icons.QuestionMarkIcon,
764
- Reload: import_react_icons.ReloadIcon,
765
- Calendar,
766
- Closed,
767
- Dots,
768
- Download,
769
- Filter,
770
- Hamburger,
771
- Pencil,
772
- Photo,
773
- Plus,
774
- Search,
775
- ChevronLeft,
776
- ChevronRight,
777
- Check,
778
- Copy
779
- };
780
-
781
- // src/components/Icon/index.tsx
782
- var import_jsx_runtime17 = require("react/jsx-runtime");
783
- var colorMap = {
784
- black: "#000000",
785
- green: "#78CB63",
786
- white: "#ffffff"
787
- };
788
- var Icon = (0, import_react3.forwardRef)(
789
- ({ name, size = 24, color = "black", ...rest }, ref) => {
790
- const IconComponent = iconMap[name];
791
- if (!IconComponent) {
792
- console.warn(`Icon "${name}" not found in iconMap`);
793
- return null;
794
- }
795
- const fillColor = colorMap[color];
796
- return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
797
- IconComponent,
798
- {
799
- ref,
800
- width: size,
801
- height: size,
802
- style: { color: fillColor },
803
- "aria-hidden": true,
804
- ...rest
805
- }
806
- );
807
- }
808
- );
809
- Icon.displayName = "Icon";
810
-
811
- // src/components/Calendar/styles.ts
812
- var calendarStyles = globalCss({
813
- ".calendar-root": {
814
- "--rdp-accent-color": theme.colors.clickpalm_light,
815
- "--rdp-accent-background-color": theme.colors.clickpalm_light,
816
- "--rdp-day-height": "45px",
817
- "--rdp-day-width": "45px",
818
- "--rdp-day_button-border-radius": theme.radii.md.value,
819
- "--rdp-day_button-border": "2px solid transparent",
820
- "--rdp-day_button-height": "40px",
821
- "--rdp-day_button-width": "40px",
822
- "--rdp-selected-border": "2px solid var(--rdp-accent-color)",
823
- "--rdp-disabled-opacity": "0.5",
824
- "--rdp-outside-opacity": "1",
825
- "--rdp-today-color": theme.colors.clickpalm_light,
826
- "--rdp-dropdown-gap": "0.5rem",
827
- "--rdp-months-gap": "2rem",
828
- "--rdp-nav_button-disabled-opacity": "0.5",
829
- "--rdp-nav_button-height": "36px",
830
- "--rdp-nav_button-width": "36px",
831
- "--rdp-nav-height": "44px",
832
- "--rdp-range_middle-background-color": "var(--rdp-accent-background-color)",
833
- "--rdp-range_middle-color": "inherit",
834
- "--rdp-range_start-color": "white",
835
- "--rdp-range_start-background": "linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%)",
836
- "--rdp-range_start-date-background-color": "var(--rdp-accent-color)",
837
- "--rdp-range_end-background": "linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%)",
838
- "--rdp-range_end-color": "white",
839
- "--rdp-range_end-date-background-color": "var(--rdp-accent-color)",
840
- "--rdp-weekday-opacity": "1",
841
- "--rdp-weekday-padding": "0.5rem 0",
842
- "--rdp-weekday-text-align": "center",
843
- "--rdp-gradient-direction": "90deg",
844
- "--rdp-animation_duration": "0.3s",
845
- "--rdp-animation_timing": "cubic-bezier(0.4, 0, 0.2, 1)",
846
- padding: theme.space[3],
847
- border: `1px solid ${theme.colors.gray_light}`,
848
- borderRadius: theme.radii.md.value,
849
- maxWidth: "329px",
850
- paddingLeft: "15px"
851
- },
852
- '.calendar-root[dir="rtl"]': {
853
- "--rdp-gradient-direction": "-90deg"
854
- },
855
- '.calendar-root[data-broadcast-calendar="true"]': {
856
- "--rdp-outside-opacity": "unset"
857
- },
858
- '.calendar-root[dir="rtl"] .rdp-nav .rdp-chevron': {
859
- transform: "rotate(180deg)",
860
- transformOrigin: "50%"
861
- },
862
- '.calendar-root[data-nav-layout="around"] .rdp-month': {
863
- position: "relative"
864
- },
865
- '.calendar-root[data-nav-layout="after"] .rdp-month': {
866
- position: "relative"
867
- },
868
- '.calendar-root[data-nav-layout="around"] .calendar-month_caption': {
869
- justifyContent: "center",
870
- marginInlineStart: "var(--rdp-nav_button-width)",
871
- marginInlineEnd: "var(--rdp-nav_button-width)",
872
- position: "relative"
873
- },
874
- '.calendar-root[data-nav-layout="around"] .rdp-button_previous': {
875
- position: "absolute",
876
- insetInlineStart: 0,
877
- top: 0,
878
- height: "var(--rdp-nav-height)",
879
- display: "inline-flex"
880
- },
881
- '.calendar-root[data-nav-layout="around"] .rdp-button_next': {
882
- position: "absolute",
883
- insetInlineEnd: 0,
884
- top: 0,
885
- height: "var(--rdp-nav-height)",
886
- display: "inline-flex",
887
- justifyContent: "center"
888
- },
889
- '.calendar-root[dir="rtl"] .rdp-weeks_after_enter': {
890
- animation: "rdp-slide_in_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards"
891
- },
892
- '.calendar-root[dir="rtl"] .rdp-weeks_before_exit': {
893
- animation: "rdp-slide_out_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards"
894
- },
895
- '.calendar-root[dir="rtl"] .rdp-weeks_before_enter': {
896
- animation: "rdp-slide_in_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards"
897
- },
898
- '.calendar-root[dir="rtl"] .rdp-weeks_after_exit': {
899
- animation: "rdp-slide_out_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards"
900
- },
901
- ".calendar-month_caption": {
902
- paddingLeft: "2px",
903
- display: "flex",
904
- alignItems: "center",
905
- height: "var(--rdp-nav-height)",
906
- fontWeight: "$bold",
907
- fontSize: "$lg"
908
- },
909
- ".calendar-caption_label": {
910
- paddingLeft: "$3",
911
- zIndex: 1,
912
- position: "relative",
913
- display: "flex",
914
- alignItems: "center",
915
- whiteSpace: "nowrap"
916
- },
917
- ".calendar-root-collapsed": {
918
- minWidth: "329px",
919
- position: "relative"
920
- },
921
- ".calendar-root-collapsed .rdp-weekdays": {
922
- display: "none"
923
- },
924
- ".calendar-root-collapsed .rdp-day": {
925
- display: "none"
926
- },
927
- ".calendar-root-collapsed .rdp-months": {
928
- minHeight: "var(--rdp-nav-height)",
929
- position: "relative",
930
- display: "flex",
931
- flexWrap: "wrap",
932
- gap: "var(--rdp-months-gap)",
933
- maxWidth: "100%"
934
- },
935
- ".calendar-root-collapsed .rdp-nav": {
936
- position: "absolute",
937
- top: 0,
938
- right: 0,
939
- display: "flex",
940
- alignItems: "center",
941
- height: "var(--rdp-nav-height)"
942
- },
943
- ".rdp-dropdown:focus-visible ~ .calendar-caption_label": {
944
- outline: "5px auto Highlight",
945
- WebkitOutline: "5px auto -webkit-focus-ring-color"
946
- },
947
- ".rdp-nav": {
948
- gap: "$1",
949
- paddingRight: "6px"
950
- },
951
- ".rdp-weekday": {
952
- fontFamily: theme.fonts.default,
953
- fontWeight: theme.fontWeights.bold,
954
- paddingRight: "6px"
955
- },
956
- ".rdp-day_button": {
957
- background: theme.colors.gray_background,
958
- color: theme.colors.black,
959
- fontFamily: theme.fonts.default,
960
- fontWeight: theme.fontWeights.bold,
961
- fontSize: theme.fontSizes.md,
962
- "&:hover": {
963
- border: `2px solid ${theme.colors.clickpalm_light}`
964
- },
965
- "&:focus": {
966
- border: `2px solid ${theme.colors.clickpalm_light}`,
967
- outline: "none"
968
- }
969
- },
970
- ".rdp-outside .rdp-day_button": {
971
- fontFamily: theme.fonts.default,
972
- background: theme.colors.gray_mid,
973
- color: theme.colors.black
974
- },
975
- ".rdp-selected .rdp-day_button": {
976
- background: theme.colors.clickpalm_light,
977
- color: theme.colors.white
978
- }
979
- });
980
- var StyledButton2 = styled("div", {
981
- display: "flex",
982
- alignItems: "center",
983
- transition: "transform 0.4s ease",
984
- variants: {
985
- isOpen: {
986
- true: {
987
- transform: "rotate(180deg)"
988
- },
989
- false: {
990
- transform: "rotate(0deg)"
991
- }
992
- }
993
- }
994
- });
995
- var StyledLabel = styled("label", {
996
- color: "$black",
997
- fontFamily: "$default",
998
- fontSize: "$md",
999
- fontWeight: "$bold",
1000
- display: "flex",
1001
- marginBottom: "$6"
1002
- });
1003
-
1004
- // src/components/Calendar/index.tsx
1005
- var import_jsx_runtime18 = require("react/jsx-runtime");
1006
- calendarStyles();
1007
- var Calendar2 = ({ label, onChange }) => {
1008
- const [selected, setSelected] = (0, import_react4.useState)(void 0);
1009
- const [month, setMonth] = (0, import_react4.useState)(/* @__PURE__ */ new Date());
1010
- const [open, setOpen] = (0, import_react4.useState)(true);
1011
- const handleDaySelect = (date) => {
1012
- setSelected(date);
1013
- if (date) {
1014
- const formatted = (0, import_date_fns.format)(date, "dd/MM/yyyy");
1015
- onChange(formatted);
1016
- }
1017
- };
1018
- (0, import_react4.useEffect)(() => {
1019
- if (selected) {
1020
- setMonth(selected);
1021
- }
1022
- }, [selected]);
1023
- return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
1024
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StyledLabel, { children: label }),
1025
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1026
- import_react_day_picker.DayPicker,
1027
- {
1028
- className: !open ? "calendar-root-collapsed" : "",
1029
- mode: "single",
1030
- selected,
1031
- onSelect: handleDaySelect,
1032
- month,
1033
- onMonthChange: setMonth,
1034
- locale: import_locale.ptBR,
1035
- showOutsideDays: true,
1036
- classNames: {
1037
- root: "calendar-root",
1038
- month_caption: "calendar-month_caption",
1039
- caption_label: "calendar-caption_label"
1040
- },
1041
- formatters: {
1042
- formatCaption: (month2, options) => {
1043
- const mes = (0, import_date_fns.format)(month2, "MMMM", options).replace(/^./, (c) => c.toUpperCase());
1044
- const ano = (0, import_date_fns.format)(month2, "yyyy", options);
1045
- return `${mes} de ${ano}`;
1046
- },
1047
- formatWeekdayName: (date, options) => {
1048
- const dia = (0, import_date_fns.format)(date, "EEEEEE", options);
1049
- return dia.charAt(0).toUpperCase() + dia.slice(1);
1050
- }
1051
- },
1052
- components: {
1053
- MonthCaption: ({ calendarMonth, displayIndex, ...safeprops }) => {
1054
- const displayMonth = calendarMonth.date;
1055
- return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { ...safeprops, children: [
1056
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1057
- Button,
1058
- {
1059
- variant: "secondary",
1060
- size: "sm",
1061
- onClick: () => setOpen(!open),
1062
- children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StyledButton2, { isOpen: open, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "TriangleUp", size: 16 }) })
1063
- }
1064
- ) }),
1065
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "calendar-month_caption", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "calendar-caption_label", role: "heading", "aria-level": 2, children: (0, import_date_fns.format)(displayMonth, "MMMM 'de' yyyy", { locale: import_locale.ptBR }).replace(/^./, (c) => c.toUpperCase()) }) })
1066
- ] });
1067
- },
1068
- PreviousMonthButton: (props) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "TriangleLeft", size: 16 }) }),
1069
- NextMonthButton: (props) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "TriangleRight", size: 16 }) })
1070
- }
1071
- }
1072
- )
1073
- ] });
1074
- };
1075
-
1076
- // src/components/Checkbox/index.tsx
1077
- var import_react5 = require("react");
1078
-
1079
- // src/components/Checkbox/styles.ts
1080
- var Checkbox = __toESM(require("@radix-ui/react-checkbox"));
1081
- var StyledWrapper = styled("div", {
1082
- display: "flex",
1083
- alignSelf: "flex-start",
1084
- alignItems: "center",
1085
- lineHeight: "150%",
1086
- variants: {
1087
- hasError: {
1088
- true: {
1089
- marginBottom: "0px",
1090
- "&:focus": {
1091
- border: "2px solid $danger_dark"
1092
- }
1093
- },
1094
- false: {
1095
- marginBottom: "$6"
1096
- }
1097
- }
1098
- }
1099
- });
1100
- var CheckboxContainer = styled(Checkbox.Root, {
1101
- all: "unset",
1102
- width: "$6",
1103
- height: "$6",
1104
- backgroundColor: "$white",
1105
- borderRadius: "$md",
1106
- lineHeight: 0,
1107
- cursor: "pointer",
1108
- overflow: "hidden",
1109
- boxSizing: "border-box",
1110
- display: "flex",
1111
- justifyContent: "center",
1112
- alignItems: "center",
1113
- borderWidth: "3px",
1114
- borderStyle: "solid",
1115
- borderColor: "$gray_mid",
1116
- '&[data-state="checked"]': {
1117
- outline: "none",
1118
- backgroundColor: "$clickpalm_dark",
1119
- borderColor: "$clickpalm_dark"
1120
- },
1121
- "&:focus": {
1122
- outline: "none",
1123
- border: "2px solid $clickpalm_light"
1124
- },
1125
- "&:disabled": {
1126
- opacity: 0.5,
1127
- cursor: "not-allowed"
1128
- },
1129
- variants: {
1130
- hasError: {
1131
- true: {
1132
- borderColor: "$danger_dark",
1133
- marginBottom: "0px",
1134
- "&:focus, &:hover": {
1135
- outline: "none",
1136
- border: "4px solid $danger_dark"
1137
- },
1138
- '&[data-state="checked"]': {
1139
- outline: "none",
1140
- backgroundColor: "$danger_dark",
1141
- borderColor: "$danger_dark"
1142
- }
1143
- }
1144
- }
1145
- }
1146
- });
1147
- var slideIn = keyframes({
1148
- from: {
1149
- transform: "translateY(-100%)"
1150
- },
1151
- to: {
1152
- transform: "translateY(0)"
1153
- }
1154
- });
1155
- var slideOut = keyframes({
1156
- from: {
1157
- transform: "translateY(0)"
1158
- },
1159
- to: {
1160
- transform: "translateY(-100%)"
1161
- }
1162
- });
1163
- var CheckboxIndicator = styled(Checkbox.Indicator, {
1164
- color: "$white",
1165
- width: "$4",
1166
- height: "$4",
1167
- '&[data-state="checked"]': {
1168
- animation: `${slideIn} 200ms ease-out`
1169
- },
1170
- '&[data-state="unchecked"]': {
1171
- animation: `${slideOut} 200ms ease-out`
1172
- }
1173
- });
1174
- var CheckboxLabel = styled("label", {
1175
- display: "flex",
1176
- paddingLeft: "$3",
1177
- fontSize: "$md",
1178
- lineHeight: "$base",
1179
- color: "$black"
1180
- });
1181
- var Span = styled("span", {
1182
- fontFamily: "$default",
1183
- fontWeight: "$regular",
1184
- fontSize: "$sm",
1185
- color: "$danger_dark",
1186
- alignSelf: "flex-start",
1187
- paddingLeft: "1px",
1188
- marginTop: "2px",
1189
- marginBottom: "$6"
1190
- });
1191
-
1192
- // src/components/Checkbox/index.tsx
1193
- var import_jsx_runtime19 = require("react/jsx-runtime");
1194
- var Checkbox2 = (0, import_react5.forwardRef)(
1195
- ({ label, checked, onCheckedChange, errorMessage, ...rest }, ref) => {
1196
- return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
1197
- /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(StyledWrapper, { hasError: !!errorMessage, children: [
1198
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1199
- CheckboxContainer,
1200
- {
1201
- ref,
1202
- checked: !!checked,
1203
- onCheckedChange,
1204
- hasError: !!errorMessage,
1205
- ...rest,
1206
- children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CheckboxIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "Check", size: 16, color: "white" }) })
1207
- }
1208
- ),
1209
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CheckboxLabel, { children: label })
1210
- ] }),
1211
- errorMessage && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Span, { children: errorMessage })
1212
- ] });
1213
- }
1214
- );
1215
- Checkbox2.displayName = "Checkbox";
1216
-
1217
- // src/components/Datepicker/index.tsx
1218
- var import_date_fns2 = require("date-fns");
1219
- var import_locale2 = require("date-fns/locale");
1220
- var import_react8 = require("react");
1221
- var import_react_day_picker2 = require("react-day-picker");
1222
- var import_style2 = require("react-day-picker/dist/style.css");
1223
-
1224
- // src/components/Input/index.tsx
1225
- var import_react6 = __toESM(require("react"));
1226
-
1227
- // src/components/Input/styles.ts
1228
- var StyledWrapper2 = styled("div", {
1229
- display: "flex",
1230
- flexDirection: "column"
1231
- });
1232
- var Label = styled("label", {
1233
- fontSize: "$md",
1234
- fontWeight: "$regular",
1235
- alignSelf: "flex-start",
1236
- marginBottom: "$2",
1237
- paddingLeft: "1px",
1238
- color: "$black"
1239
- });
1240
- var TextInputContainer = styled("div", {
1241
- backgroundColor: "$white",
1242
- borderRadius: "$md",
1243
- boxSizing: "border-box",
1244
- border: "1px solid $gray_mid",
1245
- display: "flex",
1246
- alignItems: "center",
1247
- padding: "$4 $4",
1248
- marginBottom: "$6",
1249
- FontSize: "$md",
1250
- "&:has(input:focus), &:hover": {
1251
- border: "1px solid $clickpalm_light"
1252
- },
1253
- "&:has(input:disabled)": {
1254
- opacity: 0.5,
1255
- cursor: "not-allowed"
1256
- },
1257
- variants: {
1258
- hasButtonSuffix: {
1259
- true: {
1260
- paddingTop: "10px",
1261
- paddingBottom: "10px"
1262
- }
1263
- },
1264
- noMargin: {
1265
- true: { marginBottom: "0px" }
1266
- },
1267
- hasError: {
1268
- true: {
1269
- border: "1px solid $danger_dark",
1270
- marginBottom: "0px",
1271
- "&:has(input:focus), &:hover": {
1272
- border: "1px solid $danger_dark"
1273
- }
1274
- }
1275
- },
1276
- hasCounter: {
1277
- true: {
1278
- marginBottom: "0px"
1279
- }
1280
- },
1281
- redBorder: {
1282
- true: {
1283
- border: "1px solid $danger_dark",
1284
- marginBottom: "0px",
1285
- "&:has(input:focus), &:hover": {
1286
- border: "1px solid $danger_dark"
1287
- }
1288
- }
1289
- }
1290
- }
1291
- });
1292
- var Prefix = styled("span", {
1293
- fontFamily: "$default",
1294
- fontSize: "$sm",
1295
- color: "$gray_light",
1296
- fontWeight: "regular"
1297
- });
1298
- var Input = styled("input", {
1299
- fontFamily: "$default",
1300
- fontSize: "$md",
1301
- color: "$black",
1302
- fontWeight: "regular",
1303
- background: "transparent",
1304
- border: 0,
1305
- width: "100%",
1306
- "&:focus": {
1307
- outline: 0
1308
- },
1309
- "&:disabled": {
1310
- cursor: "not-allowed",
1311
- opacity: 0.5
1312
- },
1313
- "&::placeholder": {
1314
- color: "$gray_mid"
1315
- }
1316
- });
1317
- var Suffix = styled("div", {
1318
- display: "flex",
1319
- alignItems: "center",
1320
- justifyContent: "center",
1321
- marginLeft: "$2",
1322
- color: "$gray_light"
1323
- });
1324
- var Span2 = styled("span", {
1325
- fontFamily: "$default",
1326
- fontWeight: "$regular",
1327
- fontSize: "$sm",
1328
- textAlign: "left",
1329
- color: "$danger_dark",
1330
- alignSelf: "flex-start",
1331
- paddingLeft: "1px",
1332
- marginTop: "2px",
1333
- marginBottom: "$6",
1334
- flexShrink: 1,
1335
- wordBreak: "break-word"
1336
- });
1337
- var Footer = styled("div", {
1338
- display: "flex",
1339
- justifyContent: "space-between",
1340
- width: "100%",
1341
- gap: "$2"
1342
- });
1343
- var CharCounter = styled(Span2, {
1344
- fontFamily: "$default",
1345
- fontWeight: "$regular",
1346
- fontSize: "$sm",
1347
- color: "$gray_mid",
1348
- marginLeft: "auto",
1349
- whiteSpace: "nowrap",
1350
- paddingRight: "1px",
1351
- marginTop: "2px",
1352
- marginBottom: "0px",
1353
- variants: {
1354
- hasReachedMax: {
1355
- true: {
1356
- color: "$danger_dark"
1357
- }
1358
- }
1359
- }
1360
- });
1361
-
1362
- // src/components/Input/index.tsx
1363
- var import_jsx_runtime20 = require("react/jsx-runtime");
1364
- var Input2 = (0, import_react6.forwardRef)(
1365
- ({ prefix, suffix, label, maxLength, showCounter = false, errorMessage, noMargin = false, redBorder, ...props }, forwardedRef) => {
1366
- const getDisplayValue = (value) => {
1367
- const stringValue = String(value || "");
1368
- if (prefix && stringValue.startsWith(prefix)) {
1369
- return stringValue.substring(prefix.length);
1370
- }
1371
- return stringValue;
1372
- };
1373
- const localInputRef = (0, import_react6.useRef)(null);
1374
- const inputRef = forwardedRef || localInputRef;
1375
- const displayValue = getDisplayValue(props.value);
1376
- const charCount = displayValue.length;
1377
- const handleChange = (e) => {
1378
- let currentDisplayValue = e.target.value;
1379
- if (prefix && currentDisplayValue.startsWith(prefix)) {
1380
- currentDisplayValue = currentDisplayValue.substring(prefix.length);
1381
- }
1382
- if (props.type === "number") {
1383
- currentDisplayValue = currentDisplayValue.replace(/[^0-9]/g, "");
1384
- }
1385
- if (props.onChange) {
1386
- const newEvent = {
1387
- ...e,
1388
- target: {
1389
- ...e.target,
1390
- value: currentDisplayValue
1391
- }
1392
- };
1393
- props.onChange(newEvent);
1394
- }
1395
- };
1396
- const handleContainerClick = () => {
1397
- inputRef?.current?.focus();
1398
- };
1399
- const isButtonElement = (node) => {
1400
- if (!import_react6.default.isValidElement(node))
1401
- return false;
1402
- const type = node.type;
1403
- return type?.displayName === "Button";
1404
- };
1405
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(StyledWrapper2, { children: [
1406
- label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Label, { children: label }),
1407
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
1408
- TextInputContainer,
1409
- {
1410
- hasButtonSuffix: isButtonElement(suffix),
1411
- noMargin,
1412
- hasError: !!errorMessage,
1413
- hasCounter: showCounter,
1414
- onClick: handleContainerClick,
1415
- redBorder,
1416
- children: [
1417
- !!prefix && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Prefix, { children: prefix }),
1418
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1419
- Input,
1420
- {
1421
- ref: inputRef,
1422
- ...props,
1423
- type: props.type === "number" ? "text" : props.type,
1424
- inputMode: props.type === "number" ? "numeric" : props.inputMode,
1425
- value: displayValue,
1426
- maxLength,
1427
- onChange: handleChange
1428
- }
1429
- ),
1430
- !!suffix && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Suffix, { children: suffix })
1431
- ]
1432
- }
1433
- ),
1434
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Footer, { children: [
1435
- errorMessage && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Span2, { children: errorMessage }),
1436
- showCounter && maxLength && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(CharCounter, { hasReachedMax: maxLength ? charCount >= maxLength : false, children: [
1437
- charCount,
1438
- "/",
1439
- maxLength
1440
- ] })
1441
- ] })
1442
- ] });
1443
- }
1444
- );
1445
- Input2.displayName = "Input";
1446
-
1447
- // src/components/Datepicker/CustomSelect/index.tsx
1448
- var import_react7 = require("react");
1449
-
1450
- // src/components/Datepicker/CustomSelect/styles.ts
1451
- var IconWrapper = styled("span", {
1452
- display: "flex",
1453
- alignItems: "center",
1454
- justifyContent: "center",
1455
- transition: "transform 0.3s ease"
1456
- });
1457
- var SelectValueButton = styled("button", {
1458
- position: "relative",
1459
- display: "flex",
1460
- alignItems: "center",
1461
- width: "100%",
1462
- backgroundColor: "transparent",
1463
- borderRadius: "8px",
1464
- padding: "8px",
1465
- fontSize: "16px",
1466
- fontWeight: theme.fontWeights.bold,
1467
- fontFamily: theme.fonts.default,
1468
- textAlign: "left",
1469
- cursor: "pointer",
1470
- gap: theme.space[2],
1471
- "&:hover, &:focus": {
1472
- backgroundColor: "transparent",
1473
- outline: "none",
1474
- boxShadow: "none",
1475
- border: `2px solid ${theme.colors.gray_mid}`
1476
- }
1477
- });
1478
- var SelectOptionsList = styled("ul", {
1479
- position: "absolute",
1480
- top: "100%",
1481
- left: 0,
1482
- right: 0,
1483
- backgroundColor: theme.colors.gray_background,
1484
- border: `2px solid ${theme.colors.white}`,
1485
- borderRadius: "8px",
1486
- boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
1487
- listStyle: "none",
1488
- margin: "4px 0 0",
1489
- padding: "0 12px",
1490
- zIndex: 10,
1491
- maxHeight: "200px",
1492
- overflowY: "auto",
1493
- fontFamily: theme.fonts.default,
1494
- fontWeight: theme.fontWeights.regular,
1495
- textAlign: "left",
1496
- width: "120px",
1497
- overflowX: "hidden",
1498
- "&::-webkit-scrollbar": {
1499
- width: "8px"
1500
- },
1501
- "&::-webkit-scrollbar-track": {
1502
- background: theme.colors.gray_light,
1503
- borderRadius: "8px"
1504
- },
1505
- "&::-webkit-scrollbar-thumb": {
1506
- backgroundColor: theme.colors.clickpalm_light,
1507
- borderRadius: "8px"
1508
- }
1509
- });
1510
- var SelectOptionItem = styled("li", {
1511
- padding: "12px 0",
1512
- color: theme.colors.black,
1513
- cursor: "pointer",
1514
- borderBottom: `1px solid ${theme.colors.gray_mid}`,
1515
- "&:last-child": {
1516
- borderBottom: "none"
1517
- },
1518
- "&:hover": {
1519
- backgroundColor: theme.colors.gray_background,
1520
- color: theme.colors.clickpalm_mid
1521
- },
1522
- '&[aria-disabled="true"]': {
1523
- color: theme.colors.gray_mid,
1524
- cursor: "not-allowed",
1525
- "&:hover": {
1526
- backgroundColor: "transparent",
1527
- color: theme.colors.gray_mid
1528
- }
1529
- },
1530
- variants: {
1531
- selected: {
1532
- true: {
1533
- backgroundColor: theme.colors.gray_background,
1534
- color: theme.colors.clickpalm_mid
1535
- }
1536
- }
1537
- }
1538
- });
1539
- var SelectContainer = styled("div", {
1540
- position: "relative",
1541
- width: "100%",
1542
- maxWidth: "130px",
1543
- variants: {
1544
- isOpen: {
1545
- true: {
1546
- [`& ${IconWrapper}`]: {
1547
- transform: "rotate(180deg)"
1548
- }
1549
- }
1550
- },
1551
- color: {
1552
- white: {
1553
- [`& ${SelectValueButton}`]: {
1554
- color: theme.colors.white,
1555
- border: `2px solid ${theme.colors.white}`
1556
- },
1557
- [`& ${IconWrapper}`]: {
1558
- color: theme.colors.white
1559
- }
1560
- },
1561
- black: {
1562
- marginBottom: 0,
1563
- [`& ${SelectValueButton}`]: {
1564
- color: theme.colors.black,
1565
- border: "1px solid transparent"
1566
- },
1567
- [`& ${IconWrapper}`]: {
1568
- color: theme.colors.black
1569
- }
1570
- }
1571
- }
1572
- }
1573
- });
1574
-
1575
- // src/components/Datepicker/CustomSelect/index.tsx
1576
- var import_jsx_runtime21 = require("react/jsx-runtime");
1577
- var CustomSelect = ({
1578
- options = [],
1579
- value,
1580
- onChange,
1581
- color = "white"
1582
- }) => {
1583
- const [isOpen, setIsOpen] = (0, import_react7.useState)(false);
1584
- const selectRef = (0, import_react7.useRef)(null);
1585
- const handleToggle = () => setIsOpen(!isOpen);
1586
- const handleOptionClick = (optionValue) => {
1587
- if (onChange) {
1588
- onChange(optionValue);
1589
- }
1590
- setIsOpen(false);
1591
- };
1592
- (0, import_react7.useEffect)(() => {
1593
- const handleClickOutside = (event) => {
1594
- if (selectRef.current && !selectRef.current.contains(event.target)) {
1595
- setIsOpen(false);
1596
- }
1597
- };
1598
- document.addEventListener("mousedown", handleClickOutside);
1599
- return () => {
1600
- document.removeEventListener("mousedown", handleClickOutside);
1601
- };
1602
- }, []);
1603
- const safeValue = value ?? "";
1604
- const selectedLabel = options.find((opt) => opt.value === safeValue)?.label || safeValue;
1605
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(SelectContainer, { color, isOpen, ref: selectRef, children: [
1606
- /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(SelectValueButton, { onClick: handleToggle, children: [
1607
- selectedLabel,
1608
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(IconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "TriangleDown", size: 16 }) })
1609
- ] }),
1610
- isOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SelectOptionsList, { onMouseDown: (e) => e.preventDefault(), children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1611
- SelectOptionItem,
1612
- {
1613
- selected: option.value === value,
1614
- onClick: () => !option.disabled && handleOptionClick(option.value),
1615
- "aria-disabled": option.disabled,
1616
- children: option.label
1617
- },
1618
- option.value
1619
- )) })
1620
- ] });
1621
- };
1622
-
1623
- // src/components/Datepicker/DatePickerSelectAdapter.tsx
1624
- var import_jsx_runtime22 = require("react/jsx-runtime");
1625
- function DatePickerSelectAdapter(props) {
1626
- const { options, value, onChange } = props;
1627
- const handleValueChange = (newValue) => {
1628
- if (onChange) {
1629
- const syntheticEvent = {
1630
- target: { value: newValue }
1631
- };
1632
- onChange(syntheticEvent);
1633
- }
1634
- };
1635
- const selectOptions = options?.map((option) => {
1636
- const label = typeof option.label === "string" ? option.label.charAt(0).toUpperCase() + option.label.slice(1) : option.label;
1637
- return {
1638
- label,
1639
- value: option.value?.toString() ?? "",
1640
- disabled: option.disabled
1641
- };
1642
- }) || [];
1643
- const isYearDropdown = options && options.length > 0 && typeof options[0].value === "number" && options[0].value > 31;
1644
- if (isYearDropdown) {
1645
- selectOptions.reverse();
1646
- }
1647
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1648
- CustomSelect,
1649
- {
1650
- color: "black",
1651
- options: selectOptions,
1652
- value: value?.toString() || "",
1653
- onChange: handleValueChange
1654
- }
1655
- );
1656
- }
1657
-
1658
- // src/components/Datepicker/styles.ts
1659
- var datePickerStyles = globalCss({
1660
- ".rdp-root": {
1661
- "--rdp-accent-color": theme.colors.clickpalm_light,
1662
- "--rdp-accent-background-color": theme.colors.clickpalm_light,
1663
- "--rdp-day-height": "45px",
1664
- "--rdp-day-width": "45px",
1665
- "--rdp-day_button-border-radius": theme.radii.md.value,
1666
- "--rdp-day_button-height": "40px",
1667
- "--rdp-day_button-width": "40px",
1668
- "--rdp-selected-border": "2px solid var(--rdp-accent-color)",
1669
- "--rdp-disabled-opacity": "0.5",
1670
- "--rdp-outside-opacity": "1",
1671
- "--rdp-today-color": theme.colors.clickpalm_light,
1672
- "--rdp-nav_button-disabled-opacity": "0.5",
1673
- "--rdp-nav_button-height": "36px",
1674
- "--rdp-nav_button-width": "36px",
1675
- "--rdp-nav-height": "44px",
1676
- "--rdp-weekday-opacity": "1",
1677
- "--rdp-weekday-padding": "0.5rem 0",
1678
- "--rdp-weekday-text-align": "center",
1679
- "--rdp-animation_duration": "0.3s",
1680
- "--rdp-animation_timing": "cubic-bezier(0.4, 0, 0.2, 1)",
1681
- padding: theme.space[3],
1682
- paddingLeft: "15px"
1683
- },
1684
- ".rdp-caption_label": {
1685
- paddingLeft: theme.space[1],
1686
- textTransform: "capitalize"
1687
- },
1688
- ".rdp-nav": {
1689
- gap: theme.space[1]
1690
- },
1691
- ".rdp-weekday": {
1692
- fontFamily: theme.fonts.default,
1693
- fontWeight: theme.fontWeights.bold
1694
- },
1695
- ".rdp-day_button": {
1696
- background: theme.colors.gray_background,
1697
- color: theme.colors.black,
1698
- fontFamily: theme.fonts.default,
1699
- fontWeight: theme.fontWeights.bold,
1700
- fontSize: theme.fontSizes.md,
1701
- "&:hover": {
1702
- border: `2px solid ${theme.colors.clickpalm_light}`
1703
- },
1704
- "&:focus": {
1705
- border: `2px solid ${theme.colors.clickpalm_light}`,
1706
- outline: "none"
1707
- }
1708
- },
1709
- ".rdp-outside .rdp-day_button": {
1710
- fontFamily: theme.fonts.default,
1711
- background: theme.colors.gray_mid,
1712
- color: theme.colors.black
1713
- },
1714
- ".rdp-selected .rdp-day_button": {
1715
- background: theme.colors.clickpalm_light,
1716
- color: theme.colors.white
1717
- }
1718
- // '.rdp-caption_dropdowns': {
1719
- // display: 'flex',
1720
- // gap: theme.space[2],
1721
- // },
1722
- // '.rdp-dropdown': {
1723
- // padding: '6px 8px',
1724
- // fontFamily: theme.fonts.default,
1725
- // fontSize: theme.fontSizes.sm,
1726
- // color: theme.colors.black,
1727
- // border: `1px solid ${theme.colors.gray_light}`,
1728
- // borderRadius: theme.radii.md,
1729
- // backgroundColor: theme.colors.white,
1730
- // appearance: 'none',
1731
- // backgroundRepeat: 'no-repeat',
1732
- // backgroundPosition: `right ${theme.space[2]} center`,
1733
- // backgroundSize: '1em',
1734
- // '&:focus, &:hover': {
1735
- // outline: 'none',
1736
- // borderColor: theme.colors.clickpalm_light,
1737
- // },
1738
- // '& option:checked': {
1739
- // backgroundColor: theme.colors.clickpalm_light,
1740
- // color: theme.colors.white,
1741
- // },
1742
- // '& option:hover': {
1743
- // backgroundColor: theme.colors.gray_background,
1744
- // color: theme.colors.black,
1745
- // },
1746
- // },
1747
- });
1748
-
1749
- // src/components/Datepicker/index.tsx
1750
- var import_jsx_runtime23 = require("react/jsx-runtime");
1751
- datePickerStyles();
1752
- var oneYearMore = new Date((/* @__PURE__ */ new Date()).getFullYear() + 1, 11);
1753
- var Datepicker = (0, import_react8.forwardRef)(({ label, placeholder, value, onChange, errorMessage, endDate = oneYearMore }, ref) => {
1754
- const [selected, setSelected] = (0, import_react8.useState)(void 0);
1755
- const [month, setMonth] = (0, import_react8.useState)(/* @__PURE__ */ new Date());
1756
- const [open, setOpen] = (0, import_react8.useState)(false);
1757
- const inputRef = (0, import_react8.useRef)(null);
1758
- const calendarRef = (0, import_react8.useRef)(null);
1759
- (0, import_react8.useImperativeHandle)(ref, () => inputRef.current);
1760
- const handleDaySelect = (date) => {
1761
- setSelected(date);
1762
- if (date) {
1763
- const formatted = (0, import_date_fns2.format)(date, "dd/MM/yyyy");
1764
- onChange(formatted);
1765
- }
1766
- setOpen(false);
1767
- };
1768
- (0, import_react8.useEffect)(() => {
1769
- const handleClickOutside = (event) => {
1770
- if (calendarRef.current && !calendarRef.current.contains(event.target) && inputRef.current && !inputRef.current.contains(event.target)) {
1771
- setOpen(false);
1772
- }
1773
- };
1774
- document.addEventListener("mousedown", handleClickOutside);
1775
- return () => document.removeEventListener("mousedown", handleClickOutside);
1776
- }, []);
1777
- (0, import_react8.useEffect)(() => {
1778
- if (!open && selected) {
1779
- setMonth(selected);
1780
- }
1781
- }, [open, selected]);
1782
- const isOpenWithError = open && errorMessage ? true : false;
1783
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
1784
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1785
- Input2,
1786
- {
1787
- ref: inputRef,
1788
- label,
1789
- placeholder,
1790
- onFocus: () => setOpen(true),
1791
- value: value || "",
1792
- readOnly: true,
1793
- suffix: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "Calendar", size: 16 }),
1794
- noMargin: true,
1795
- errorMessage: open ? "" : errorMessage,
1796
- redBorder: isOpenWithError
1797
- }
1798
- ),
1799
- open && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1800
- "div",
1801
- {
1802
- ref: calendarRef,
1803
- style: {
1804
- position: "absolute",
1805
- marginTop: "4px",
1806
- zIndex: 100,
1807
- backgroundColor: "#fff",
1808
- boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
1809
- borderRadius: "8px"
1810
- },
1811
- children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1812
- import_react_day_picker2.DayPicker,
1813
- {
1814
- mode: "single",
1815
- selected,
1816
- onSelect: handleDaySelect,
1817
- month,
1818
- onMonthChange: setMonth,
1819
- locale: import_locale2.ptBR,
1820
- showOutsideDays: true,
1821
- captionLayout: "dropdown",
1822
- startMonth: new Date(1915, 0),
1823
- endMonth: endDate,
1824
- components: {
1825
- PreviousMonthButton: (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "TriangleLeft", size: 16 }) }),
1826
- NextMonthButton: (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "TriangleRight", size: 16 }) }),
1827
- Dropdown: DatePickerSelectAdapter
1828
- }
1829
- }
1830
- )
1831
- }
1832
- )
1833
- ] });
1834
- });
1835
- Datepicker.displayName = "Datepicker";
1836
-
1837
- // src/components/Hr.tsx
1838
- var import_react9 = require("react");
1839
- var import_jsx_runtime24 = require("react/jsx-runtime");
1840
- var StyledHr = styled("hr", {
1841
- border: "none",
1842
- height: "1px",
1843
- width: "100%",
1844
- variants: {
1845
- variant: {
1846
- gray: {
1847
- backgroundColor: "$gray_mid"
1848
- },
1849
- purple: {
1850
- backgroundColor: "$clickpalm_light"
1851
- }
1852
- }
1853
- }
1854
- });
1855
- var Hr = (0, import_react9.forwardRef)(function Hr2({ children, ...props }, ref) {
1856
- return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StyledHr, { ref, ...props, children });
1857
- });
1858
- Hr.displayName = "Hr";
1859
-
1860
- // src/components/Modal/index.tsx
1861
- var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
1862
-
1863
- // src/components/Modal/styles.ts
1864
- var Dialog = __toESM(require("@radix-ui/react-dialog"));
1865
- var StyledOverlay = styled(Dialog.Overlay, {
1866
- backgroundColor: "rgba(0, 0, 0, 0.5)",
1867
- position: "fixed",
1868
- inset: 0,
1869
- zIndex: 101
1870
- });
1871
- var StyledContent = styled(Dialog.Content, {
1872
- position: "fixed",
1873
- top: "50%",
1874
- left: "50%",
1875
- display: "flex",
1876
- flexDirection: "column",
1877
- padding: "0 $4",
1878
- width: "90%",
1879
- maxWidth: "600px",
1880
- backgroundColor: "$white",
1881
- borderRadius: "$md",
1882
- boxShadow: "0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)",
1883
- transform: "translate(-50%, -50%)",
1884
- zIndex: 102,
1885
- fontFamily: "$default",
1886
- fontWeight: "$regular"
1887
- });
1888
- var Wrapper = styled("div", {
1889
- display: "flex",
1890
- justifyContent: "space-between",
1891
- alignItems: "center"
1892
- });
1893
- var StyledTitle = styled(Dialog.Title, {
1894
- fontSize: "$lg",
1895
- fontWeight: "bold",
1896
- color: "$black"
1897
- });
1898
- var StyledClose = styled(Dialog.Close, {
1899
- // position: 'absolute',
1900
- // top: '24px',
1901
- // right: '16px',
1902
- cursor: "pointer",
1903
- fontSize: "18px",
1904
- color: "#999",
1905
- "&:hover": {
1906
- color: "#333"
1907
- }
1908
- });
1909
- var StyledDivider = styled("hr", {
1910
- width: "100%",
1911
- border: "none",
1912
- borderTop: "1px solid $gray_mid",
1913
- margin: "0px"
1914
- });
1915
- var StyledDescription = styled(Dialog.Description, {
1916
- display: "flex",
1917
- fontFamily: "$default",
1918
- fontWeight: "$regular",
1919
- fontSize: "$md",
1920
- color: "$black",
1921
- marginTop: "$4",
1922
- marginBottom: 0
1923
- });
1924
- var StyledChildren = styled("div", {
1925
- fontFamily: "$default",
1926
- fontWeight: "$regular",
1927
- fontSize: "$md",
1928
- color: "$black",
1929
- margin: "$4 0"
1930
- });
1931
-
1932
- // src/components/Modal/index.tsx
1933
- var import_jsx_runtime25 = require("react/jsx-runtime");
1934
- var Modal = ({ open, onOpenChange, title, description, children }) => {
1935
- return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Dialog2.Root, { open, onOpenChange, modal: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Dialog2.Portal, { children: [
1936
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StyledOverlay, {}),
1937
- /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(StyledContent, { children: [
1938
- /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Wrapper, { children: [
1939
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StyledTitle, { children: title }),
1940
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StyledClose, { asChild: true, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: "Closed", size: 8 }) }) })
1941
- ] }),
1942
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StyledDivider, {}),
1943
- /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
1944
- description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StyledDescription, { children: description }),
1945
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StyledChildren, { children })
1946
- ] })
1947
- ] })
1948
- ] }) });
1949
- };
1950
-
1951
- // src/components/ProgressBar/index.tsx
1952
- var import_react10 = require("react");
1953
-
1954
- // src/components/ProgressBar/styles.ts
1955
- var Progress = __toESM(require("@radix-ui/react-progress"));
1956
- var StyledWrapper3 = styled("div", {
1957
- display: "flex",
1958
- flexDirection: "column",
1959
- gap: "$2",
1960
- marginBottom: "$6"
1961
- });
1962
- var StyledRoot = styled(Progress.Root, {
1963
- position: "relative",
1964
- overflow: "hidden",
1965
- background: "$gray_background",
1966
- borderRadius: "$md",
1967
- border: "1px solid $gray_dark",
1968
- boxSizing: "border-box",
1969
- transform: "translateZ(0)",
1970
- width: "100%",
1971
- height: "10px"
1972
- });
1973
- var StyledIndicator = styled(Progress.Indicator, {
1974
- backgroundColor: "$ignite_light",
1975
- borderRadius: "$md",
1976
- height: "100%",
1977
- transition: "transform 660ms cubic-bezier(0.65, 0, 0.35, 1)",
1978
- transformOrigin: "left"
1979
- });
1980
-
1981
- // src/components/ProgressBar/index.tsx
1982
- var import_jsx_runtime26 = require("react/jsx-runtime");
1983
- var ProgressBar = ({ label, value = 0, max = 100, ...rest }) => {
1984
- const [progress2, setProgress] = (0, import_react10.useState)(0);
1985
- (0, import_react10.useEffect)(() => {
1986
- const timer = setTimeout(() => setProgress(value), 500);
1987
- return () => clearTimeout(timer);
1988
- }, [value]);
1989
- const valueLabel = `${Math.round(progress2 / max * 100)}%`;
1990
- return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(StyledWrapper3, { children: [
1991
- /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("label", { style: { fontSize: 16, alignSelf: "flex-start", color: "black" }, children: label }),
1992
- /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
1993
- StyledRoot,
1994
- {
1995
- value: progress2,
1996
- "aria-valuetext": valueLabel,
1997
- ...rest,
1998
- children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
1999
- StyledIndicator,
2000
- {
2001
- style: { transform: `translateX(-${100 - progress2}%)` }
2002
- }
2003
- )
2004
- }
2005
- )
2006
- ] });
2007
- };
2008
- ProgressBar.displayName = "ProgressBar";
2009
-
2010
- // src/components/Radio/index.tsx
2011
- var import_react11 = require("react");
2012
-
2013
- // src/components/Radio/styles.ts
2014
- var RadioGroup = __toESM(require("@radix-ui/react-radio-group"));
2015
- var StyledRoot2 = styled(RadioGroup.Root, {
2016
- display: "flex",
2017
- flexDirection: "column",
2018
- gap: "$2",
2019
- cursor: "pointer",
2020
- variants: {
2021
- hasError: {
2022
- true: {
2023
- marginBottom: "0px",
2024
- "&:focus": {
2025
- border: "2px solid $danger_dark"
2026
- }
2027
- },
2028
- false: {
2029
- marginBottom: "$6"
2030
- }
2031
- }
2032
- }
2033
- });
2034
- var Wrapper2 = styled("div", {
2035
- display: "flex",
2036
- alignItems: "center"
2037
- });
2038
- var StyledItem = styled(RadioGroup.Item, {
2039
- all: "unset",
2040
- display: "flex",
2041
- justifyContent: "center",
2042
- alignItems: "center",
2043
- width: "$5",
2044
- height: "$5",
2045
- borderRadius: "50%",
2046
- boxSizing: "border-box",
2047
- backgroundColor: "$clickpalm_dark",
2048
- '&[data-state="checked"]': {
2049
- backgroundColor: "$clickpalm_dark"
2050
- },
2051
- '&[data-state="unchecked"]': {
2052
- backgroundColor: "$white",
2053
- border: "2px solid $gray_dark"
2054
- },
2055
- "&:disabled": {
2056
- opacity: 0.5,
2057
- cursor: "not-allowed"
2058
- },
2059
- "&:focus": {
2060
- outline: "1px solid $clickpalm_light"
2061
- },
2062
- variants: {
2063
- hasError: {
2064
- true: {
2065
- borderColor: "$danger_dark",
2066
- marginBottom: "0px",
2067
- "&:focus": {
2068
- outline: "none",
2069
- border: "4px solid $danger_dark"
2070
- },
2071
- '&[data-state="unchecked"]': {
2072
- outline: "none",
2073
- border: "2px solid $danger_dark"
2074
- },
2075
- '&[data-state="checked"]': {
2076
- backgroundColor: "$danger_dark"
2077
- }
2078
- }
2079
- }
2080
- }
2081
- });
2082
- var StyledIndicator2 = styled(RadioGroup.Indicator, {
2083
- width: "$3",
2084
- height: "$3",
2085
- borderRadius: "50%",
2086
- backgroundColor: "$white"
2087
- });
2088
- var ItemLabel = styled("label", {
2089
- paddingLeft: "$3",
2090
- color: "$black",
2091
- cursor: "pointer"
2092
- });
2093
- var Span3 = styled("span", {
2094
- fontFamily: "$default",
2095
- fontWeight: "$regular",
2096
- fontSize: "$sm",
2097
- color: "$danger_dark",
2098
- alignSelf: "flex-start",
2099
- paddingLeft: "1px",
2100
- marginTop: "2px",
2101
- marginBottom: "$6"
2102
- });
2103
-
2104
- // src/components/Radio/index.tsx
2105
- var import_jsx_runtime27 = require("react/jsx-runtime");
2106
- var Radio = (0, import_react11.forwardRef)(({
2107
- labels,
2108
- value,
2109
- onChange,
2110
- disabled = false,
2111
- required = false,
2112
- errorMessage
2113
- }, ref) => {
2114
- return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("form", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
2115
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
2116
- StyledRoot2,
2117
- {
2118
- ref,
2119
- value,
2120
- onValueChange: onChange,
2121
- hasError: !!errorMessage,
2122
- disabled,
2123
- required,
2124
- loop: true,
2125
- children: labels.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Wrapper2, { children: [
2126
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
2127
- StyledItem,
2128
- {
2129
- value: label,
2130
- id: `radio-${index}`,
2131
- "aria-label": label,
2132
- hasError: !!errorMessage,
2133
- children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StyledIndicator2, {})
2134
- }
2135
- ),
2136
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ItemLabel, { htmlFor: `radio-${index}`, children: label })
2137
- ] }, label))
2138
- }
2139
- ),
2140
- errorMessage && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Span3, { children: errorMessage })
2141
- ] });
2142
- });
2143
- Radio.displayName = "Radio";
2144
-
2145
- // src/components/Spacing.tsx
2146
- var import_jsx_runtime28 = require("react/jsx-runtime");
2147
- var spacingMap = {
2148
- xs: 8,
2149
- sm: 12,
2150
- md: 16,
2151
- lg: 24,
2152
- xlg: 32,
2153
- xxlg: 40,
2154
- xxxlg: 64
2155
- };
2156
- var Spacing = ({ size, axis = "vertical" }) => {
2157
- const style = axis === "vertical" ? { height: spacingMap[size], width: "100%" } : { width: spacingMap[size], height: "100%" };
2158
- return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { style, "data-testid": `spacing-${size}-${axis}` });
2159
- };
2160
-
2161
- // src/components/Switch/index.tsx
2162
- var import_react12 = require("react");
2163
-
2164
- // src/components/Switch/styles.ts
2165
- var Switch = __toESM(require("@radix-ui/react-switch"));
2166
- var Wrapper3 = styled("div", {
2167
- all: "unset",
2168
- display: "flex",
2169
- alignItems: "center",
2170
- variants: {
2171
- hasError: {
2172
- true: {
2173
- marginBottom: "0px"
2174
- },
2175
- false: {
2176
- marginBottom: "$6"
2177
- }
2178
- }
2179
- }
2180
- });
2181
- var Label2 = styled("label", {
2182
- paddingLeft: "$3",
2183
- color: "$black",
2184
- cursor: "pointer"
2185
- });
2186
- var StyledRoot3 = styled(Switch.Root, {
2187
- border: "none",
2188
- outline: "none",
2189
- boxShadow: "none",
2190
- position: "relative",
2191
- width: "$10",
2192
- height: "$5",
2193
- padding: "0 2px",
2194
- borderRadius: "30px",
2195
- boxSizing: "border-box",
2196
- WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
2197
- cursor: "pointer",
2198
- '&[data-state="checked"]': {
2199
- backgroundColor: "$clickpalm_dark"
2200
- },
2201
- '&[data-state="unchecked"]': {
2202
- backgroundColor: "$white",
2203
- border: "1px solid $gray_dark"
2204
- },
2205
- "&:disabled": {
2206
- opacity: 0.5,
2207
- cursor: "not-allowed"
2208
- },
2209
- "&:focus": {
2210
- outline: "1px solid $clickpalm_light"
2211
- },
2212
- variants: {
2213
- hasError: {
2214
- true: {
2215
- border: "1px solid $danger_dark",
2216
- marginBottom: "0px",
2217
- "&:focus": {
2218
- outline: "1px solid $danger_dark"
2219
- },
2220
- '&[data-state="unchecked"]': {
2221
- border: "1px solid $danger_dark"
2222
- }
2223
- }
2224
- }
2225
- }
2226
- });
2227
- var StyledThumb = styled(Switch.Thumb, {
2228
- position: "absolute",
2229
- top: "50%",
2230
- left: "2px",
2231
- borderRadius: "$full",
2232
- transition: "transform 100ms",
2233
- transform: "translateY(-50%)",
2234
- willChange: "transform",
2235
- '[data-state="checked"] &': {
2236
- width: "14px",
2237
- height: "14px",
2238
- backgroundColor: "$white",
2239
- transform: "translate(20px, -50%)"
2240
- },
2241
- '&[data-state="unchecked"]': {
2242
- width: "12px",
2243
- height: "12px",
2244
- backgroundColor: "$gray_light"
2245
- }
2246
- });
2247
- var Span4 = styled("span", {
2248
- fontFamily: "$default",
2249
- fontWeight: "$regular",
2250
- fontSize: "$sm",
2251
- color: "$danger_dark",
2252
- alignSelf: "flex-start",
2253
- paddingLeft: "1px",
2254
- marginTop: "2px",
2255
- marginBottom: "$6"
2256
- });
2257
-
2258
- // src/components/Switch/index.tsx
2259
- var import_jsx_runtime29 = require("react/jsx-runtime");
2260
- var Switch2 = (0, import_react12.forwardRef)(({
2261
- label,
2262
- checked,
2263
- defaultChecked,
2264
- onCheckedChange,
2265
- disabled = false,
2266
- required = false,
2267
- id,
2268
- errorMessage
2269
- }, ref) => {
2270
- return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
2271
- /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Wrapper3, { hasError: !!errorMessage, children: [
2272
- /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
2273
- StyledRoot3,
2274
- {
2275
- ref,
2276
- id,
2277
- checked,
2278
- defaultChecked,
2279
- onCheckedChange,
2280
- hasError: !!errorMessage,
2281
- disabled,
2282
- required,
2283
- children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(StyledThumb, {})
2284
- }
2285
- ),
2286
- label && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Label2, { htmlFor: id, children: label })
2287
- ] }),
2288
- errorMessage && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Span4, { children: errorMessage })
2289
- ] });
2290
- });
2291
- Switch2.displayName = "Switch";
2292
-
2293
- // src/components/Tabs/index.tsx
2294
- var import_react13 = require("react");
2295
-
2296
- // src/components/Tabs/styles.ts
2297
- var Tabs = __toESM(require("@radix-ui/react-tabs"));
2298
- var TabsRoot = styled(Tabs.Root, {
2299
- all: "unset",
2300
- display: "flex",
2301
- flexDirection: "column",
2302
- width: "100%",
2303
- backgroundColor: "$white"
2304
- });
2305
- var TabsList = styled(Tabs.List, {
2306
- all: "unset",
2307
- border: "none",
2308
- outline: "none",
2309
- boxShadow: "none",
2310
- display: "flex",
2311
- gap: "$2",
2312
- overflowX: "auto",
2313
- overflowY: "hidden",
2314
- whiteSpace: "nowrap",
2315
- "::-webkit-scrollbar": { display: "none" },
2316
- "-ms-overflow-style": "none",
2317
- "scrollbar-width": "none",
2318
- variants: {
2319
- scrollable: {
2320
- true: {
2321
- flex: 1
2322
- },
2323
- false: {
2324
- width: "100%",
2325
- flexShrink: 0,
2326
- flex: "0 0 auto",
2327
- justifyContent: "space-around"
2328
- }
2329
- }
2330
- }
2331
- });
2332
- var TabsTrigger = styled(Tabs.Trigger, {
2333
- all: "unset",
2334
- border: "none",
2335
- outline: "none",
2336
- boxShadow: "none",
2337
- display: "flex",
2338
- flex: "0 0 auto",
2339
- alignItems: "center",
2340
- justifyContent: "center",
2341
- padding: "0 $2",
2342
- height: "$11",
2343
- fontSize: "$md",
2344
- lineHeight: "$base",
2345
- whiteSpace: "nowrap",
2346
- textOverflow: "ellipsis",
2347
- overflow: "hidden",
2348
- background: "$gray100",
2349
- backgroundImage: "linear-gradient(to bottom, $clickpalm_mid, $clickpalm_superDark)",
2350
- WebkitBackgroundClip: "text",
2351
- WebkitTextFillColor: "transparent",
2352
- '&[data-state="active"]': {
2353
- color: "$ignite_light",
2354
- borderBottom: "3px solid $ignite_light",
2355
- outline: "none"
2356
- }
2357
- });
2358
- var TabsContent = styled(Tabs.Content, {
2359
- padding: "$3",
2360
- backgroundColor: "$white",
2361
- outline: "none",
2362
- variants: {
2363
- colorContent: {
2364
- gray: { backgroundColor: "$gray_background" },
2365
- white: { backgroundColor: "$white" }
2366
- }
2367
- },
2368
- defaultVariants: {
2369
- colorContent: "white"
2370
- }
2371
- });
2372
-
2373
- // src/components/Tabs/index.tsx
2374
- var import_jsx_runtime30 = require("react/jsx-runtime");
2375
- var TabsItem = ({ children }) => {
2376
- return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children });
2377
- };
2378
- var Tabs2 = ({ defaultValue, colorContent, children, value, onValueChange }) => {
2379
- const items = [];
2380
- const childrenArray = import_react13.Children.toArray(children);
2381
- childrenArray.forEach((child) => {
2382
- if ((0, import_react13.isValidElement)(child) && child.type === TabsItem) {
2383
- const { value: value2, label, forceMount, children: content } = child.props;
2384
- items.push({ value: value2, label, forceMount, children: content });
2385
- }
2386
- });
2387
- const listRef = (0, import_react13.useRef)(null);
2388
- const rootRef = (0, import_react13.useRef)(null);
2389
- const hasOverflowRef = (0, import_react13.useRef)(false);
2390
- const [hasOverflow, setHasOverflow] = (0, import_react13.useState)(false);
2391
- const checkOverflow = () => {
2392
- const listEl = listRef.current;
2393
- const rootEl = rootRef.current;
2394
- if (listEl && rootEl) {
2395
- const availableWidth = rootEl.clientWidth;
2396
- const contentWidth = listEl.scrollWidth;
2397
- const overflow = contentWidth > availableWidth;
2398
- if (overflow !== hasOverflow) {
2399
- hasOverflowRef.current = overflow;
2400
- setHasOverflow(overflow);
2401
- }
2402
- setHasOverflow(overflow);
2403
- }
2404
- };
2405
- (0, import_react13.useLayoutEffect)(() => {
2406
- checkOverflow();
2407
- const resizeObserver = new ResizeObserver(checkOverflow);
2408
- if (listRef.current) {
2409
- resizeObserver.observe(listRef.current);
2410
- }
2411
- return () => {
2412
- if (listRef.current) {
2413
- resizeObserver.unobserve(listRef.current);
2414
- }
2415
- };
2416
- }, []);
2417
- const scroll = (direction) => {
2418
- if (listRef.current) {
2419
- const scrollAmount = 120;
2420
- listRef.current.scrollBy({
2421
- left: direction === "left" ? -scrollAmount : scrollAmount,
2422
- behavior: "smooth"
2423
- });
2424
- }
2425
- };
2426
- return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
2427
- TabsRoot,
2428
- {
2429
- defaultValue: defaultValue || items[0]?.value,
2430
- ref: rootRef,
2431
- value,
2432
- onValueChange,
2433
- children: [
2434
- /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", padding: `${hasOverflow ? "0 1rem" : ""}` }, children: [
2435
- hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
2436
- Button,
2437
- {
2438
- variant: "secondary",
2439
- size: "sm",
2440
- onClick: () => scroll("left"),
2441
- children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { name: "TriangleLeft", size: 64 })
2442
- }
2443
- ),
2444
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
2445
- TabsList,
2446
- {
2447
- ref: listRef,
2448
- scrollable: hasOverflow,
2449
- children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
2450
- TabsTrigger,
2451
- {
2452
- value: item.value,
2453
- style: !hasOverflow ? { flexGrow: 1 } : { flexGrow: "0 0 auto" },
2454
- children: item.label
2455
- },
2456
- `trigger-${item.value}`
2457
- ))
2458
- }
2459
- ),
2460
- hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
2461
- Button,
2462
- {
2463
- variant: "secondary",
2464
- size: "sm",
2465
- onClick: () => scroll("right"),
2466
- children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { name: "TriangleRight", size: 64 })
2467
- }
2468
- )
2469
- ] }),
2470
- items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
2471
- TabsContent,
2472
- {
2473
- colorContent,
2474
- value: item.value,
2475
- forceMount: item.forceMount || void 0,
2476
- children: item.children
2477
- },
2478
- `content-${item.value}`
2479
- ))
2480
- ]
2481
- }
2482
- );
2483
- };
2484
- Tabs2.Item = TabsItem;
2485
-
2486
- // src/components/TextArea.tsx
2487
- var import_react14 = require("react");
2488
- var import_jsx_runtime31 = require("react/jsx-runtime");
2489
- var Wrapper4 = styled("div", {
2490
- display: "flex",
2491
- flexDirection: "column"
2492
- });
2493
- var StyledLabel2 = styled("label", {
2494
- fontSize: "$md",
2495
- fontWeight: "$regular",
2496
- color: "$black",
2497
- marginBottom: "$2",
2498
- paddingLeft: "1px",
2499
- alignSelf: "flex-start"
2500
- });
2501
- var TextAreaElement = styled("textarea", {
2502
- backgroundColor: "$white",
2503
- padding: "$3 $4",
2504
- marginBottom: "$6",
2505
- borderRadius: "$md",
2506
- boxSizing: "border-box",
2507
- border: "1px solid $gray_mid",
2508
- fontFamily: "$default",
2509
- fontSize: "$sm",
2510
- color: "$black",
2511
- fontWeight: "$regular",
2512
- resize: "vertical",
2513
- minHeight: "100px",
2514
- overflowY: "auto",
2515
- width: "100%",
2516
- "&:focus": {
2517
- outline: 0,
2518
- border: "1px solid $clickpalm_light"
2519
- },
2520
- "&:disabled": {
2521
- opacity: 0.5,
2522
- cursor: "not-allowed"
2523
- },
2524
- "&::placeholder": {
2525
- color: "$gray_mid"
2526
- },
2527
- "&::-webkit-scrollbar": {
2528
- width: "6px"
2529
- },
2530
- "&::-webkit-scrollbar-track": {
2531
- background: "transparent",
2532
- borderRadius: "$md",
2533
- margin: "$2"
2534
- },
2535
- "&::-webkit-scrollbar-thumb": {
2536
- backgroundColor: "$gray_mid",
2537
- borderRadius: "$md",
2538
- border: "2px solid $white"
2539
- },
2540
- variants: {
2541
- hasError: {
2542
- true: {
2543
- border: "1px solid $danger",
2544
- marginBottom: "0px",
2545
- "&:focus": {
2546
- border: "1px solid $danger_dark"
2547
- }
2548
- }
2549
- },
2550
- hasCounter: {
2551
- true: {
2552
- marginBottom: "0px"
2553
- }
2554
- }
2555
- }
2556
- });
2557
- var Span5 = styled("span", {
2558
- fontFamily: "$default",
2559
- fontWeight: "$regular",
2560
- fontSize: "$sm",
2561
- textAlign: "left",
2562
- color: "$danger_dark",
2563
- alignSelf: "flex-start",
2564
- paddingLeft: "1px",
2565
- marginTop: "2px",
2566
- marginBottom: "$6",
2567
- flexShrink: 1,
2568
- wordBreak: "break-word"
2569
- });
2570
- var Footer2 = styled("div", {
2571
- display: "flex",
2572
- justifyContent: "space-between",
2573
- width: "100%",
2574
- gap: "$2"
2575
- });
2576
- var CharCounter2 = styled(Span5, {
2577
- fontFamily: "$default",
2578
- fontWeight: "$regular",
2579
- fontSize: "$sm",
2580
- color: "$gray_mid",
2581
- marginLeft: "auto",
2582
- whiteSpace: "nowrap",
2583
- paddingRight: "1px",
2584
- marginTop: "2px",
2585
- marginBottom: "0px",
2586
- variants: {
2587
- hasReachedMax: {
2588
- true: {
2589
- color: "$danger_dark"
2590
- }
2591
- }
2592
- }
2593
- });
2594
- var TextArea = (0, import_react14.forwardRef)(
2595
- ({ label, id, htmlFor, errorMessage, maxLength, showCounter = false, ...props }, ref) => {
2596
- const textAreaId = id || htmlFor || `textarea-${crypto.randomUUID()}`;
2597
- const [charCount, setCharCount] = (0, import_react14.useState)(props.value?.toString().length || 0);
2598
- (0, import_react14.useEffect)(() => {
2599
- setCharCount(props.value?.toString().length || 0);
2600
- }, [props.value]);
2601
- return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Wrapper4, { children: [
2602
- label && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(StyledLabel2, { htmlFor: textAreaId, children: label }),
2603
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
2604
- TextAreaElement,
2605
- {
2606
- id: textAreaId,
2607
- ...props,
2608
- hasError: !!errorMessage,
2609
- hasCounter: showCounter,
2610
- ref,
2611
- maxLength,
2612
- onChange: (e) => {
2613
- if (props.onChange) {
2614
- props.onChange(e);
2615
- }
2616
- setCharCount(e.target.value.length);
2617
- }
2618
- }
2619
- ),
2620
- /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Footer2, { children: [
2621
- errorMessage && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Span5, { children: errorMessage }),
2622
- showCounter && maxLength && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(CharCounter2, { hasReachedMax: maxLength ? charCount >= maxLength : false, children: [
2623
- charCount,
2624
- "/",
2625
- maxLength
2626
- ] })
2627
- ] })
2628
- ] });
2629
- }
2630
- );
2631
- TextArea.displayName = "TextArea";
2632
-
2633
- // src/components/Tooltip/index.tsx
2634
- var RadixTooltip2 = __toESM(require("@radix-ui/react-tooltip"));
2635
-
2636
- // src/components/Tooltip/styles.ts
2637
- var RadixTooltip = __toESM(require("@radix-ui/react-tooltip"));
2638
- var slideUpAndFade = keyframes({
2639
- "0%": { opacity: 0, transform: "translateY(2px)" },
2640
- "100%": { opacity: 1, transform: "translateY(0)" }
2641
- });
2642
- var slideDownAndFade = keyframes({
2643
- "0%": { opacity: 0, transform: "translateY(-2px)" },
2644
- "100%": { opacity: 1, transform: "translateY(0)" }
2645
- });
2646
- var slideLeftAndFade = keyframes({
2647
- "0%": { opacity: 0, transform: "translateX(2px)" },
2648
- "100%": { opacity: 1, transform: "translateX(0)" }
2649
- });
2650
- var slideRightAndFade = keyframes({
2651
- "0%": { opacity: 0, transform: "translateX(-2px)" },
2652
- "100%": { opacity: 1, transform: "translateX(0)" }
2653
- });
2654
- var TooltipTrigger = RadixTooltip.Trigger;
2655
- var TooltipContent = styled(RadixTooltip.Content, {
2656
- borderRadius: "$sm",
2657
- border: "2px solid $gray_background",
2658
- padding: "$2 $4",
2659
- fontSize: "$sm",
2660
- lineHeight: "1",
2661
- color: "$black",
2662
- backgroundColor: "$white",
2663
- boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.2)",
2664
- zIndex: 50,
2665
- maxWidth: "200px",
2666
- whiteSpace: "normal",
2667
- wordBreak: "break-word",
2668
- textAlign: "left",
2669
- "@media (prefers-reduced-motion: no-preference)": {
2670
- animationDuration: "200ms",
2671
- animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
2672
- willChange: "transform, opacity",
2673
- '&[data-state="delayed-open"][data-side="top"]': { animationName: slideDownAndFade },
2674
- '&[data-state="delayed-open"][data-side="right"]': { animationName: slideLeftAndFade },
2675
- '&[data-state="delayed-open"][data-side="bottom"]': { animationName: slideUpAndFade },
2676
- '&[data-state="delayed-open"][data-side="left"]': { animationName: slideRightAndFade }
2677
- }
2678
- });
2679
- var TooltipArrow = styled(RadixTooltip.Arrow, {
2680
- fill: "$gray_background"
2681
- });
2682
-
2683
- // src/components/Tooltip/index.tsx
2684
- var import_react15 = require("react");
2685
- var import_jsx_runtime32 = require("react/jsx-runtime");
2686
- var Tooltip = ({
2687
- content,
2688
- children,
2689
- side = "top",
2690
- sideOffset = 5,
2691
- open: controlledOpen,
2692
- onOpenChange,
2693
- delayDuration = 100
2694
- }) => {
2695
- const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react15.useState)(false);
2696
- const [isTouchDevice, setIsTouchDevice] = (0, import_react15.useState)(false);
2697
- (0, import_react15.useEffect)(() => {
2698
- setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
2699
- }, []);
2700
- const open = controlledOpen ?? uncontrolledOpen;
2701
- const setOpen = onOpenChange ?? setUncontrolledOpen;
2702
- const handleClick = (event) => {
2703
- if (isTouchDevice) {
2704
- event.preventDefault();
2705
- setOpen(!open);
2706
- }
2707
- };
2708
- return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(RadixTooltip2.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(RadixTooltip2.Root, { open, onOpenChange: setOpen, delayDuration, children: [
2709
- /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipTrigger, { asChild: true, onClick: handleClick, children }),
2710
- /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(TooltipContent, { side, sideOffset, children: [
2711
- content,
2712
- /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipArrow, {})
2713
- ] })
2714
- ] }) });
2715
- };
2716
- Tooltip.displayName = "Tooltip";
2717
-
2718
- // src/components/Loader/style.ts
2719
- var Content4 = styled("div", {
2720
- position: "relative",
2721
- height: "100%",
2722
- width: "100%",
2723
- minHeight: "inherit",
2724
- top: 0,
2725
- left: 0,
2726
- backgroundColor: "YellowGreen"
2727
- });
2728
- var Overlay2 = styled("div", {
2729
- display: "flex",
2730
- justifyContent: "center",
2731
- alignItems: "center",
2732
- backgroundColor: "rgba(255, 255, 255, 0.6)",
2733
- zIndex: 999,
2734
- transition: "opacity 0.3s ease-in-out",
2735
- variants: {
2736
- show: {
2737
- true: {
2738
- opacity: 1,
2739
- pointerEvents: "auto"
2740
- },
2741
- false: {
2742
- opacity: 0,
2743
- pointerEvents: "none"
2744
- }
2745
- },
2746
- fullscreen: {
2747
- true: {
2748
- position: "fixed",
2749
- top: 0,
2750
- left: 0,
2751
- right: 0,
2752
- bottom: 0
2753
- },
2754
- false: {
2755
- position: "absolute",
2756
- top: 0,
2757
- left: 0,
2758
- width: "100%",
2759
- height: "100%"
2760
- }
2761
- }
2762
- }
2763
- });
2764
- var SpinnerContainer = styled("div", {
2765
- position: "relative"
2766
- });
2767
- var rotation = keyframes({
2768
- "0%": { transform: "rotate(0deg)" },
2769
- "100%": { transform: "rotate(360deg)" }
2770
- });
2771
- var Spinner = styled("span", {
2772
- width: "$19",
2773
- height: "$19",
2774
- borderRadius: "50%",
2775
- display: "inline-block",
2776
- borderTop: "6px solid $ignite_light",
2777
- borderRight: "6px solid transparent",
2778
- boxSizing: "border-box",
2779
- animation: `${rotation} 1s linear infinite`,
2780
- "&::after": {
2781
- content: '""',
2782
- boxSizing: "border-box",
2783
- position: "absolute",
2784
- left: 0,
2785
- top: 0,
2786
- width: "$19",
2787
- height: "$19",
2788
- borderRadius: "50%",
2789
- borderLeft: "6px solid $clickpalm_light",
2790
- borderBottom: "6px solid transparent",
2791
- animation: `${rotation} 0.5s linear infinite reverse`
2792
- }
2793
- });
2794
-
2795
- // src/components/Loader/index.tsx
2796
- var import_jsx_runtime33 = require("react/jsx-runtime");
2797
- var Loader = ({ show, fullscreen = false }) => {
2798
- return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Overlay2, { show, fullscreen, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SpinnerContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Spinner, {}) }) });
2799
- };
2800
- Loader.displayName = "Loader";
2801
-
2802
- // src/components/MaskedInput/index.tsx
2803
- var import_react16 = require("react");
2804
-
2805
- // src/components/MaskedInput/utils.ts
2806
- var MAX_LENGTHS = {
2807
- cellPhone: 15,
2808
- homePhone: 14,
2809
- cep: 9,
2810
- cpf: 14,
2811
- cnpj: 18,
2812
- date: 10
2813
- };
2814
- var applyMask = (value, maskType) => {
2815
- const digits = value.replace(/\D/g, "");
2816
- const maxLength = MAX_LENGTHS[maskType];
2817
- if (digits.length > maxLength) {
2818
- return value.slice(0, -1);
2819
- }
2820
- switch (maskType) {
2821
- case "cellPhone":
2822
- if (digits.length <= 2)
2823
- return digits;
2824
- if (digits.length <= 7)
2825
- return `(${digits.slice(0, 2)}) ${digits.slice(2)}`;
2826
- return `(${digits.slice(0, 2)}) ${digits.slice(2, 7)}-${digits.slice(7, 11)}`;
2827
- case "homePhone":
2828
- if (digits.length <= 2)
2829
- return digits;
2830
- if (digits.length <= 6)
2831
- return `(${digits.slice(0, 2)}) ${digits.slice(2)}`;
2832
- return `(${digits.slice(0, 2)}) ${digits.slice(2, 6)}-${digits.slice(6, 10)}`;
2833
- case "cep":
2834
- if (digits.length <= 5)
2835
- return digits;
2836
- return `${digits.slice(0, 5)}-${digits.slice(5, 8)}`;
2837
- case "cpf":
2838
- if (digits.length <= 3)
2839
- return digits;
2840
- if (digits.length <= 6)
2841
- return `${digits.slice(0, 3)}.${digits.slice(3)}`;
2842
- if (digits.length <= 9)
2843
- return `${digits.slice(0, 3)}.${digits.slice(3, 6)}.${digits.slice(6)}`;
2844
- return `${digits.slice(0, 3)}.${digits.slice(3, 6)}.${digits.slice(6, 9)}-${digits.slice(9, 11)}`;
2845
- case "cnpj":
2846
- if (digits.length <= 2)
2847
- return digits;
2848
- if (digits.length <= 5)
2849
- return `${digits.slice(0, 2)}.${digits.slice(2)}`;
2850
- if (digits.length <= 8)
2851
- return `${digits.slice(0, 2)}.${digits.slice(2, 5)}.${digits.slice(5)}`;
2852
- if (digits.length <= 12)
2853
- return `${digits.slice(0, 2)}.${digits.slice(2, 5)}.${digits.slice(5, 8)}/${digits.slice(8)}`;
2854
- return `${digits.slice(0, 2)}.${digits.slice(2, 5)}.${digits.slice(5, 8)}/${digits.slice(8, 12)}-${digits.slice(12, 14)}`;
2855
- case "date":
2856
- if (digits.length <= 2)
2857
- return digits;
2858
- if (digits.length <= 4)
2859
- return `${digits.slice(0, 2)}/${digits.slice(2)}`;
2860
- return `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4, 8)}`;
2861
- default:
2862
- return value;
2863
- }
2864
- };
2865
-
2866
- // src/components/MaskedInput/index.tsx
2867
- var import_jsx_runtime34 = require("react/jsx-runtime");
2868
- var MaskedInput = (0, import_react16.forwardRef)(
2869
- ({ maskType, onChange, ...props }, ref) => {
2870
- const [value, setValue] = (0, import_react16.useState)("");
2871
- const inputRef = (0, import_react16.useRef)(null);
2872
- const handleChange = (e) => {
2873
- const { value: inputValue, selectionStart } = e.target;
2874
- const isBackspace = value.length > inputValue.length;
2875
- const rawValue = inputValue.replace(/\D/g, "");
2876
- const maskedValue = applyMask(rawValue, maskType);
2877
- setValue(maskedValue);
2878
- if (inputRef.current && selectionStart !== null) {
2879
- let newCursorPos = selectionStart;
2880
- if (isBackspace && value.length > 0) {
2881
- const prevChar = value[selectionStart || 0];
2882
- if (prevChar && !/\d/.test(prevChar)) {
2883
- newCursorPos = Math.max(0, (selectionStart || 0) - 1);
2884
- }
2885
- }
2886
- setTimeout(() => {
2887
- if (inputRef.current) {
2888
- inputRef.current.setSelectionRange(newCursorPos, newCursorPos);
2889
- }
2890
- }, 0);
2891
- }
2892
- if (onChange) {
2893
- const syntheticEvent = {
2894
- ...e,
2895
- target: {
2896
- ...e.target,
2897
- value: maskedValue,
2898
- rawValue
2899
- }
2900
- };
2901
- onChange(syntheticEvent);
2902
- }
2903
- };
2904
- return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
2905
- Input2,
2906
- {
2907
- ...props,
2908
- ref,
2909
- value,
2910
- onChange: handleChange,
2911
- maxLength: MAX_LENGTHS[maskType]
2912
- }
2913
- );
2914
- }
2915
- );
2916
- MaskedInput.displayName = "MaskedInput";
2917
-
2918
- // src/components/Dropdown/index.tsx
2919
- var import_react17 = __toESM(require("react"));
2920
- var DropdownMenu2 = __toESM(require("@radix-ui/react-dropdown-menu"));
2921
-
2922
- // src/components/Dropdown/styles.ts
2923
- var DropdownMenu = __toESM(require("@radix-ui/react-dropdown-menu"));
2924
- var slideUpAndFade2 = keyframes({
2925
- "0%": { opacity: 0, transform: "translateY(2px)" },
2926
- "100%": { opacity: 1, transform: "translateY(0)" }
2927
- });
2928
- var slideRightAndFade2 = keyframes({
2929
- "0%": { opacity: 0, transform: "translateX(-2px)" },
2930
- "100%": { opacity: 1, transform: "translateX(0)" }
2931
- });
2932
- var slideDownAndFade2 = keyframes({
2933
- "0%": { opacity: 0, transform: "translateY(-2px)" },
2934
- "100%": { opacity: 1, transform: "translateY(0)" }
2935
- });
2936
- var slideLeftAndFade2 = keyframes({
2937
- "0%": { opacity: 0, transform: "translateX(2px)" },
2938
- "100%": { opacity: 1, transform: "translateX(0)" }
2939
- });
2940
- var StyledContent2 = styled(DropdownMenu.Content, {
2941
- minWidth: 100,
2942
- backgroundColor: "$white",
2943
- borderRadius: "$md",
2944
- padding: "$2",
2945
- boxShadow: "0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)",
2946
- animationDuration: "400ms",
2947
- animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
2948
- willChange: "transform, opacity",
2949
- '&[data-state="open"]': {
2950
- '&[data-side="top"]': { animationName: slideDownAndFade2 },
2951
- '&[data-side="right"]': { animationName: slideLeftAndFade2 },
2952
- '&[data-side="bottom"]': { animationName: slideUpAndFade2 },
2953
- '&[data-side="left"]': { animationName: slideRightAndFade2 }
2954
- }
2955
- });
2956
- var itemStyles = {
2957
- all: "unset",
2958
- fontFamily: "$default",
2959
- fontSize: "$sm",
2960
- fontWeights: "$regular",
2961
- lineHeight: 1,
2962
- color: "$black",
2963
- borderRadius: "$sm",
2964
- display: "flex",
2965
- alignItems: "center",
2966
- height: 25,
2967
- padding: "0 $2",
2968
- position: "relative",
2969
- paddingLeft: "$5",
2970
- userSelect: "none",
2971
- "&[data-disabled]": {
2972
- color: "$gray_mid",
2973
- pointerEvents: "none"
2974
- },
2975
- "&[data-highlighted]": {
2976
- color: "$clickpalm_light",
2977
- cursor: "pointer"
2978
- },
2979
- button: {
2980
- all: "unset",
2981
- width: "100%",
2982
- textAlign: "left"
2983
- }
2984
- };
2985
- var StyledItem2 = styled(DropdownMenu.Item, { ...itemStyles });
2986
- var StyledSeparator = styled(DropdownMenu.Separator, {
2987
- height: "1px",
2988
- backgroundColor: "$gray_light",
2989
- margin: "$2"
2990
- });
2991
- var IconButton = styled("button", {
2992
- all: "unset",
2993
- fontFamily: "inherit",
2994
- borderRadius: "100%",
2995
- height: 35,
2996
- width: 35,
2997
- display: "inline-flex",
2998
- alignItems: "center",
2999
- justifyContent: "center",
3000
- color: "$clickpalm_light",
3001
- backgroundColor: "transparent"
3002
- });
3003
-
3004
- // src/components/Dropdown/index.tsx
3005
- var import_jsx_runtime35 = require("react/jsx-runtime");
3006
- var Dropdown = ({ children }) => {
3007
- const childrenArray = import_react17.Children.toArray(children);
3008
- return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(DropdownMenu2.Root, { modal: false, children: [
3009
- /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon, { name: "Dots", size: 16 }) }) }),
3010
- /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropdownMenu2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StyledContent2, { sideOffset: 5, align: "end", children: childrenArray.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react17.Fragment, { children: [
3011
- child,
3012
- index < childrenArray.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropdownSeparator, {})
3013
- ] }, index)) }) })
3014
- ] });
3015
- };
3016
- var DropdownSeparator = StyledSeparator;
3017
- var DropdownItem = import_react17.default.forwardRef(({ children, ...props }, forwardedRef) => {
3018
- return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StyledItem2, { ...props, ref: forwardedRef, children });
3019
- });
3020
- Dropdown.displayName = "Dropdown";
3021
- DropdownItem.displayName = "DropdownItem";
3022
- DropdownSeparator.displayName = "DropdownSeparator";
3023
-
3024
- // src/components/Box.tsx
3025
- var import_jsx_runtime36 = require("react/jsx-runtime");
3026
- var StyledBox = styled("div", {
3027
- padding: "$5",
3028
- borderRadius: "$md",
3029
- textAlign: "center",
3030
- marginBottom: "$6",
3031
- variants: {
3032
- variant: {
3033
- gray: {
3034
- backgroundColor: "$gray_background",
3035
- boxShadow: "0 1px 2px $colors$gray_dark"
3036
- },
3037
- white: {
3038
- backgroundColor: "$white"
3039
- }
3040
- }
3041
- },
3042
- defaultVariants: {
3043
- variant: "gray"
3044
- }
3045
- });
3046
- var Box = (props) => {
3047
- return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(StyledBox, { ...props });
3048
- };
3049
- Box.displayName = "Box";
3050
-
3051
- // src/components/Paragraph.tsx
3052
- var import_jsx_runtime37 = require("react/jsx-runtime");
3053
- var StyledParagraph = styled("p", {
3054
- fontFamily: "$default",
3055
- lineHeight: "$short",
3056
- color: "$black",
3057
- margin: 0,
3058
- variants: {
3059
- size: {
3060
- xxs: { fontSize: "$xxs" },
3061
- xs: { fontSize: "$xs" },
3062
- sm: { fontSize: "$sm" },
3063
- md: { fontSize: "$md" },
3064
- lg: { fontSize: "$lg" },
3065
- xl: { fontSize: "$xl" },
3066
- "2xl": { fontSize: "$2xl" },
3067
- "4xl": { fontSize: "$4xl" },
3068
- "5xl": { fontSize: "$5xl" },
3069
- "6xl": { fontSize: "$6xl" },
3070
- "7xl": { fontSize: "$7xl" },
3071
- "8xl": { fontSize: "$8xl" },
3072
- "9xl": { fontSize: "$9xl" }
3073
- },
3074
- weight: {
3075
- regular: { fontWeight: "$regular" },
3076
- medium: { fontWeight: "$medium" },
3077
- bold: { fontWeight: "$bold" }
3078
- },
3079
- lineHeight: {
3080
- regular: { lineHeight: "$regular" },
3081
- shorter: { lineHeight: "$shorter" },
3082
- short: { lineHeight: "$short" },
3083
- base: { lineHeight: "$base" },
3084
- tall: { lineHeight: "$tall" }
3085
- }
3086
- },
3087
- defaultVariants: {
3088
- size: "md",
3089
- weight: "regular",
3090
- lineHeight: "short"
3091
- }
3092
- });
3093
- var Paragraph = (props) => {
3094
- return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StyledParagraph, { ...props });
3095
- };
3096
- Paragraph.displayName = "Paragraph";
3097
-
3098
- // src/components/Heading.tsx
3099
- var import_react18 = require("react");
3100
- var import_jsx_runtime38 = require("react/jsx-runtime");
3101
- var StyledHeading = styled("h2", {
3102
- fontFamily: "$default",
3103
- lineHeight: "$shorter",
3104
- margin: "1px",
3105
- color: "$black",
3106
- fontWeight: "$regular",
3107
- variants: {
3108
- size: {
3109
- sm: { fontSize: "$xl" },
3110
- md: { fontSize: "$2xl" },
3111
- lg: { fontSize: "$4xl" },
3112
- "2xl": { fontSize: "$5xl" },
3113
- "3xl": { fontSize: "$6xl" },
3114
- "4xl": { fontSize: "$7xl" },
3115
- "5xl": { fontSize: "$8xl" },
3116
- "6xl": { fontSize: "$9xl" }
3117
- },
3118
- bold: {
3119
- true: {
3120
- fontWeight: "$bold"
3121
- },
3122
- false: {
3123
- fontWeight: "$regular"
3124
- }
3125
- }
3126
- },
3127
- defaultVariants: {
3128
- size: "md"
3129
- }
3130
- });
3131
- var Heading = (0, import_react18.forwardRef)(
3132
- function Heading2({ children, bold = false, ...props }, ref) {
3133
- return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StyledHeading, { ref, bold, ...props, children });
3134
- }
3135
- );
3136
- Heading.displayName = "Heading";
3137
-
3138
- // src/components/Select/index.tsx
3139
- var import_react_icons2 = require("@radix-ui/react-icons");
3140
- var CustomSelect2 = __toESM(require("@radix-ui/react-select"));
3141
- var import_react19 = require("react");
3142
-
3143
- // src/components/Select/styles.ts
3144
- var Select = __toESM(require("@radix-ui/react-select"));
3145
- var StyledWrapper4 = styled("div", {
3146
- display: "flex",
3147
- flexDirection: "column",
3148
- fontFamily: "$default"
3149
- });
3150
- var Label3 = styled("label", {
3151
- fontSize: "$md",
3152
- fontWeight: "$regular",
3153
- alignSelf: "flex-start",
3154
- marginBottom: "$2",
3155
- paddingLeft: "1px",
3156
- color: "$black"
3157
- });
3158
- var StyledTrigger = styled(Select.Trigger, {
3159
- all: "unset",
3160
- display: "flex",
3161
- alignItems: "center",
3162
- justifyContent: "space-between",
3163
- marginBottom: "$6",
3164
- padding: "0.92rem $4",
3165
- boxSizing: "border-box",
3166
- borderRadius: "$md",
3167
- border: "1px solid $gray_mid",
3168
- fontSize: "$md",
3169
- backgroundColor: "white",
3170
- cursor: "pointer",
3171
- color: "$black",
3172
- "&[data-placeholder]": {
3173
- color: "$gray_mid"
3174
- },
3175
- "&[data-highlighted], &:focus, &:hover": {
3176
- outline: "none",
3177
- border: "1px solid $clickpalm_light"
3178
- },
3179
- "&:disabled": {
3180
- opacity: 0.5,
3181
- cursor: "not-allowed"
3182
- },
3183
- variants: {
3184
- hasError: {
3185
- true: {
3186
- border: "1px solid $danger_dark",
3187
- marginBottom: "0px",
3188
- "&[data-highlighted], &:focus, &:hover": {
3189
- outline: "none",
3190
- border: "1px solid $danger_dark"
3191
- }
3192
- }
3193
- }
3194
- }
3195
- });
3196
- var StyledContent3 = styled(Select.Content, {
3197
- overflow: "hidden",
3198
- backgroundColor: "$gray_background",
3199
- borderRadius: "$md",
3200
- boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
3201
- zIndex: 103,
3202
- width: "var(--radix-select-trigger-width)",
3203
- maxHeight: "var(--radix-select-content-available-height)",
3204
- fontFamily: "$default",
3205
- fontSize: "$md",
3206
- fontWeight: "$regular"
3207
- });
3208
- var StyledViewport = styled(Select.Viewport, {
3209
- padding: "4px",
3210
- fontFamily: "$default",
3211
- fontSize: "$md",
3212
- fontWeight: "$regular"
3213
- });
3214
- var StyledItem3 = styled(Select.Item, {
3215
- position: "relative",
3216
- fontFamily: "$default",
3217
- fontSize: "$md",
3218
- fontWeight: "$regular",
3219
- padding: "14px 12px",
3220
- color: "$black",
3221
- cursor: "pointer",
3222
- "&[data-highlighted], &:focus, &:hover": {
3223
- outline: "none",
3224
- color: "$clickpalm_light"
3225
- },
3226
- "&:not(:last-child)::after": {
3227
- content: '""',
3228
- position: "absolute",
3229
- bottom: 0,
3230
- left: "$3",
3231
- right: "$3",
3232
- height: "1px",
3233
- backgroundColor: "$gray_light"
3234
- }
3235
- });
3236
- var StyledItemText = styled(Select.ItemText, {
3237
- fontFamily: "$default",
3238
- fontSize: "$md",
3239
- fontWeight: "$regular"
3240
- });
3241
- var StyledIcon = styled(Select.Icon, {
3242
- display: "flex",
3243
- alignItems: "center",
3244
- color: "$black",
3245
- transition: "transform 0.4s ease",
3246
- variants: {
3247
- open: {
3248
- true: {
3249
- transform: "rotate(180deg)"
3250
- },
3251
- false: {
3252
- transform: "rotate(0deg)"
3253
- }
3254
- }
3255
- },
3256
- svg: {
3257
- width: 26,
3258
- height: 26
3259
- }
3260
- });
3261
- var Span6 = styled("span", {
3262
- fontFamily: "$default",
3263
- fontWeight: "$regular",
3264
- fontSize: "$sm",
3265
- color: "$danger_dark",
3266
- alignSelf: "flex-start",
3267
- paddingLeft: "1px",
3268
- marginTop: "2px",
3269
- marginBottom: "$6"
3270
- });
3271
-
3272
- // src/components/Select/index.tsx
3273
- var import_jsx_runtime39 = require("react/jsx-runtime");
3274
- var Select2 = (0, import_react19.forwardRef)(
3275
- ({
3276
- value,
3277
- onValueChange,
3278
- items,
3279
- placeholder = "Selecione",
3280
- label,
3281
- errorMessage,
3282
- css: css2,
3283
- className,
3284
- style,
3285
- ...rest
3286
- }, ref) => {
3287
- const [open, setOpen] = (0, import_react19.useState)(false);
3288
- return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(StyledWrapper4, { css: css2, className, style, children: [
3289
- label && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Label3, { children: label }),
3290
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
3291
- CustomSelect2.Root,
3292
- {
3293
- value,
3294
- onValueChange,
3295
- onOpenChange: setOpen,
3296
- ...rest,
3297
- children: [
3298
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(StyledTrigger, { "aria-label": label, hasError: !!errorMessage, ref, children: [
3299
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CustomSelect2.Value, { placeholder }),
3300
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(StyledIcon, { open, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_icons2.TriangleDownIcon, {}) })
3301
- ] }),
3302
- errorMessage && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Span6, { children: errorMessage }),
3303
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CustomSelect2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(StyledContent3, { side: "bottom", align: "start", position: "popper", children: [
3304
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CustomSelect2.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_icons2.TriangleUpIcon, {}) }),
3305
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(StyledViewport, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(StyledItem3, { value: item.value, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(StyledItemText, { children: item.label }) }, item.value)) }),
3306
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CustomSelect2.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_icons2.TriangleDownIcon, {}) })
3307
- ] }) })
3308
- ]
3309
- }
3310
- )
3311
- ] });
3312
- }
3313
- );
3314
- Select2.displayName = "Select";
3315
-
3316
- // src/components/LabelledValue/index.tsx
3317
- var import_react20 = require("react");
3318
-
3319
- // src/components/LabelledValue/styles.ts
3320
- var Container = styled("div", {
3321
- display: "flex",
3322
- fontWeight: "$regular",
3323
- fontSize: "$md",
3324
- fontFamily: "$default",
3325
- variants: {
3326
- position: {
3327
- vertical: {
3328
- flexDirection: "column",
3329
- gap: "$5"
3330
- },
3331
- horizontal: {
3332
- flexDirection: "column",
3333
- flexWrap: "wrap",
3334
- gap: "$3"
3335
- }
3336
- }
3337
- }
3338
- });
3339
- var ItemWrapper = styled("div", {
3340
- display: "flex",
3341
- alignItems: "center",
3342
- fontWeight: "$regular",
3343
- fontSize: "$md",
3344
- fontFamily: "$default",
3345
- variants: {
3346
- position: {
3347
- vertical: {
3348
- flexDirection: "column",
3349
- alignItems: "flex-start"
3350
- },
3351
- horizontal: {
3352
- paddingBottom: "$2",
3353
- flexDirection: "row",
3354
- alignItems: "center",
3355
- justifyContent: "space-between",
3356
- borderBottom: "1px solid $gray_mid"
3357
- }
3358
- },
3359
- withRow: {
3360
- true: {
3361
- paddingBottom: "$2",
3362
- borderBottom: "1px solid $gray_mid"
3363
- }
3364
- }
3365
- }
3366
- });
3367
- var Label4 = styled("div", {
3368
- fontWeight: "$regular",
3369
- fontSize: "$md",
3370
- fontFamily: "$default",
3371
- color: "$black",
3372
- whiteSpace: "nowrap"
3373
- });
3374
- var Value2 = styled("div", {
3375
- fontWeight: "$bold",
3376
- fontSize: "$md",
3377
- fontFamily: "$default",
3378
- color: "$black",
3379
- textAlign: "right",
3380
- wordBreak: "break-word",
3381
- maxWidth: "100%",
3382
- flex: 1
3383
- });
3384
-
3385
- // src/components/LabelledValue/index.tsx
3386
- var import_jsx_runtime40 = require("react/jsx-runtime");
3387
- function LabelledValue({ position = "vertical", withRow = false, children }) {
3388
- return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Container, { position, children: import_react20.Children.map(children, (child) => {
3389
- if ((0, import_react20.isValidElement)(child)) {
3390
- return (0, import_react20.cloneElement)(child, { position, withRow });
3391
- }
3392
- return child;
3393
- }) });
3394
- }
3395
- function Item4({ label, value, position = "vertical", withRow = false }) {
3396
- return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(ItemWrapper, { position, withRow, children: [
3397
- /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Label4, { children: label }),
3398
- /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Value2, { children: value })
3399
- ] });
3400
- }
3401
- LabelledValue.Item = Item4;
3402
-
3403
- // src/components/OneTimePassword/index.tsx
3404
- var OneTimePasswordField2 = __toESM(require("@radix-ui/react-one-time-password-field"));
3405
-
3406
- // src/components/OneTimePassword/styles.ts
3407
- var OneTimePasswordField = __toESM(require("@radix-ui/react-one-time-password-field"));
3408
- var Container2 = styled("div", {
3409
- display: "flex",
3410
- flexDirection: "column",
3411
- justifyContent: "center",
3412
- alignItems: "center",
3413
- marginBottom: "$6",
3414
- width: "100%"
3415
- });
3416
- var StyledWrapper5 = styled("div", {
3417
- display: "flex",
3418
- flexDirection: "column"
3419
- });
3420
- var StyledRoot4 = styled(OneTimePasswordField.Root, {
3421
- display: "grid",
3422
- gap: "$2",
3423
- gridTemplateColumns: "repeat(var(--otp-length), 1fr)",
3424
- width: "100%"
3425
- });
3426
- var StyledLabel3 = styled(OneTimePasswordField.Root, {
3427
- display: "flex",
3428
- justifyContent: "center",
3429
- alignItems: "center",
3430
- marginBottom: "$5",
3431
- color: "$black"
3432
- });
3433
- var StyledInput = styled(OneTimePasswordField.Input, {
3434
- all: "unset",
3435
- gap: "1rem",
3436
- display: "inline-flex",
3437
- alignItems: "center",
3438
- justifyContent: "center",
3439
- textAlign: "center",
3440
- boxSizing: "border-box",
3441
- borderRadius: "$md",
3442
- borderStyle: "solid",
3443
- borderColor: "$gray_mid",
3444
- borderWidth: "3px",
3445
- fontSize: "$md",
3446
- color: "$black",
3447
- padding: "0",
3448
- width: "100%",
3449
- aspectRatio: "1 / 1",
3450
- maxWidth: "53px",
3451
- "&:hover": {
3452
- borderColor: "$gray_dark"
3453
- },
3454
- "&:focus": {
3455
- borderColor: "$clickpalm_mid"
3456
- }
3457
- });
3458
- var Span7 = styled("span", {
3459
- fontFamily: "$default",
3460
- fontWeight: "$regular",
3461
- fontSize: "$sm",
3462
- color: "$danger_dark",
3463
- alignSelf: "flex-start",
3464
- paddingLeft: "1px",
3465
- marginTop: "2px",
3466
- marginBottom: "$6"
3467
- });
3468
-
3469
- // src/components/OneTimePassword/index.tsx
3470
- var import_jsx_runtime41 = require("react/jsx-runtime");
3471
- var OneTimePassword = ({ label, length, value, errorMessage, onValueChange, ...rootProps }) => {
3472
- return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Container2, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(StyledWrapper5, { children: [
3473
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(StyledLabel3, { children: label }),
3474
- /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
3475
- StyledRoot4,
3476
- {
3477
- value,
3478
- onValueChange,
3479
- ...rootProps,
3480
- style: { "--otp-length": length },
3481
- children: [
3482
- Array.from({ length }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(StyledInput, {}, index)),
3483
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(OneTimePasswordField2.HiddenInput, {})
3484
- ]
3485
- }
3486
- ),
3487
- errorMessage && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Span7, { children: errorMessage })
3488
- ] }) });
3489
- };
3490
- OneTimePassword.displayName = "OneTimePasswordInput";
3491
-
3492
- // src/components/Toast/index.tsx
3493
- var ToastPrimitive2 = __toESM(require("@radix-ui/react-toast"));
3494
- var React4 = __toESM(require("react"));
3495
-
3496
- // src/components/Toast/styles.ts
3497
- var ToastPrimitive = __toESM(require("@radix-ui/react-toast"));
3498
- var hide = keyframes({
3499
- from: { opacity: 1 },
3500
- to: { opacity: 0 }
3501
- });
3502
- var slideIn2 = keyframes({
3503
- from: { transform: "translateX(calc(100% + 25px))" },
3504
- to: { transform: "translateX(0)" }
3505
- });
3506
- var swipeOut = keyframes({
3507
- from: { transform: "translateX(var(--radix-toast-swipe-end-x))" },
3508
- to: { transform: "translateX(calc(100% + 25px))" }
3509
- });
3510
- var ToastRoot = styled(ToastPrimitive.Root, {
3511
- position: "relative",
3512
- display: "flex",
3513
- justifyContent: "space-between",
3514
- alignItems: "center",
3515
- flexWrap: "nowrap",
3516
- gap: "$2",
3517
- width: "100%",
3518
- boxSizing: "border-box",
3519
- borderRadius: "$md",
3520
- padding: "$4 $6",
3521
- color: "$black",
3522
- fontSize: "$md",
3523
- boxShadow: "0 2px 10px rgba(0,0,0,0.1)",
3524
- '&[data-state="open"]': {
3525
- animation: `${slideIn2} 150ms cubic-bezier(0.16, 1, 0.3, 1)`
3526
- },
3527
- '&[data-state="closed"]': {
3528
- animation: `${hide} 100ms ease-in`
3529
- },
3530
- '&[data-swipe="move"]': {
3531
- transform: "translateX(var(--radix-toast-swipe-move-x))"
3532
- },
3533
- '&[data-swipe="cancel"]': {
3534
- transform: "translateX(0)",
3535
- transition: "transform 200ms ease-out"
3536
- },
3537
- '&[data-swipe="end"]': {
3538
- animation: `${swipeOut} 100ms ease-out`
3539
- },
3540
- variants: {
3541
- variant: {
3542
- success: { backgroundColor: "$success" },
3543
- warning: { backgroundColor: "$warning" },
3544
- error: { backgroundColor: "$danger" }
3545
- }
3546
- }
3547
- });
3548
- var ToastAction = styled(ToastPrimitive.Action, {
3549
- marginLeft: "auto",
3550
- background: "transparent",
3551
- border: "none",
3552
- cursor: "pointer"
3553
- });
3554
- var ToastContent = styled("div", {
3555
- display: "flex",
3556
- flexDirection: "column",
3557
- gap: "$1",
3558
- width: "100%",
3559
- alignItems: "flex-start",
3560
- "@lg": {
3561
- justifyContent: "space-between",
3562
- alignItems: "center",
3563
- flexDirection: "row"
3564
- }
3565
- });
3566
- var ToastTitle = styled("strong", {
3567
- fontWeight: "$bold",
3568
- display: "block"
3569
- });
3570
- var ToastDescription = styled("span", {
3571
- marginRight: "$6",
3572
- display: "block"
3573
- });
3574
- var ToastViewport = styled(ToastPrimitive.Viewport, {
3575
- position: "fixed",
3576
- top: "110px",
3577
- left: "50%",
3578
- transform: "translateX(-50%)",
3579
- display: "flex",
3580
- flexDirection: "column",
3581
- justifyContent: "flex-start",
3582
- alignItems: "center",
3583
- padding: 0,
3584
- margin: "0 auto",
3585
- gap: "$2",
3586
- width: "79%",
3587
- listStyle: "none",
3588
- outline: "none",
3589
- zIndex: 9999,
3590
- "@lg": {
3591
- maxWidth: "700px"
3592
- }
3593
- });
3594
- var progress = keyframes({
3595
- from: { width: "100%" },
3596
- to: { width: "0%" }
3597
- });
3598
- var ToastProgress = styled("div", {
3599
- position: "absolute",
3600
- bottom: 0,
3601
- left: 0,
3602
- height: "6px",
3603
- width: "90%",
3604
- justifyContent: "center",
3605
- borderBottomLeftRadius: "$full",
3606
- borderBottomRightRadius: "$full",
3607
- backgroundColor: "$clickpalm_light",
3608
- animationTimingFunction: "linear",
3609
- animation: `${progress} 6s linear`,
3610
- animationFillMode: "forwards",
3611
- variants: {
3612
- paused: {
3613
- true: {
3614
- animationPlayState: "paused"
3615
- },
3616
- false: {
3617
- animationPlayState: "running"
3618
- }
3619
- },
3620
- variant: {
3621
- success: { backgroundColor: "$success_dark" },
3622
- warning: { backgroundColor: "$warning_dark" },
3623
- error: { backgroundColor: "$danger_dark" }
3624
- }
3625
- }
3626
- });
3627
-
3628
- // src/components/Toast/toast.ts
3629
- var subscribers = [];
3630
- var toastImpl = {
3631
- success(title, description) {
3632
- publish({ id: crypto.randomUUID(), variant: "success", title, description });
3633
- },
3634
- warning(title, description) {
3635
- publish({ id: crypto.randomUUID(), variant: "warning", title, description });
3636
- },
3637
- error(title, description) {
3638
- publish({ id: crypto.randomUUID(), variant: "error", title, description });
3639
- },
3640
- _subscribe(fn) {
3641
- subscribers.push(fn);
3642
- },
3643
- _unsubscribe(fn) {
3644
- subscribers = subscribers.filter((sub) => sub !== fn);
3645
- }
3646
- };
3647
- function publish(msg) {
3648
- subscribers.forEach((fn) => fn(msg));
3649
- }
3650
- var toast = {
3651
- success: toastImpl.success,
3652
- warning: toastImpl.warning,
3653
- error: toastImpl.error
3654
- };
3655
-
3656
- // src/components/Toast/index.tsx
3657
- var import_jsx_runtime42 = require("react/jsx-runtime");
3658
- var Toast = () => {
3659
- const [messages, setMessages] = React4.useState([]);
3660
- const [paused, setPaused] = React4.useState(false);
3661
- React4.useEffect(() => {
3662
- const handleNewToast = (msg) => {
3663
- setMessages((prev) => [...prev, msg]);
3664
- };
3665
- toastImpl._subscribe(handleNewToast);
3666
- return () => {
3667
- toastImpl._unsubscribe(handleNewToast);
3668
- };
3669
- }, []);
3670
- const removeToast = (id) => {
3671
- setMessages((prev) => prev.filter((msg) => msg.id !== id));
3672
- };
3673
- return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(ToastPrimitive2.Provider, { swipeDirection: "right", children: [
3674
- messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
3675
- ToastRoot,
3676
- {
3677
- open: true,
3678
- onOpenChange: (open) => {
3679
- if (!open)
3680
- removeToast(message.id);
3681
- },
3682
- variant: message.variant,
3683
- duration: 6e3,
3684
- onPause: () => setPaused(true),
3685
- onResume: () => setPaused(false),
3686
- children: [
3687
- /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(ToastContent, { children: [
3688
- /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ToastTitle, { children: message.title }),
3689
- message.description && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ToastDescription, { children: message.description })
3690
- ] }),
3691
- /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ToastAction, { altText: "Fechar", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
3692
- "button",
3693
- {
3694
- style: {
3695
- all: "unset",
3696
- display: "flex",
3697
- justifyContent: "space-between",
3698
- alignItems: "center"
3699
- },
3700
- onClick: () => removeToast(message.id),
3701
- children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { name: "Closed", size: 16, height: 14, width: 14 })
3702
- }
3703
- ) }),
3704
- /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ToastProgress, { paused, variant: message.variant })
3705
- ]
3706
- },
3707
- message.id
3708
- )),
3709
- /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ToastViewport, {})
3710
- ] });
3711
- };
3712
-
3713
- // src/components/MultiStep/styles.ts
3714
- var Wrapper5 = styled("div", {
3715
- display: "flex",
3716
- "--circle-size": "48px",
3717
- "--gap": "16px",
3718
- variants: {
3719
- orientation: {
3720
- horizontal: {
3721
- display: "grid",
3722
- gridTemplateColumns: "repeat(auto-fit, minmax(100px, 1fr))",
3723
- alignItems: "center",
3724
- gap: "var(--gap)"
3725
- },
3726
- vertical: {
3727
- flexDirection: "column",
3728
- alignItems: "flex-start"
3729
- }
3730
- }
3731
- }
3732
- });
3733
- var StepItem = styled("div", {
3734
- display: "flex",
3735
- alignItems: "center",
3736
- position: "relative",
3737
- variants: {
3738
- orientation: {
3739
- horizontal: {
3740
- flexDirection: "column",
3741
- textAlign: "center"
3742
- },
3743
- vertical: {
3744
- margin: "$2 0",
3745
- flexDirection: "row"
3746
- }
3747
- }
3748
- }
3749
- });
3750
- var StepCircle = styled("div", {
3751
- position: "relative",
3752
- width: "var(--circle-size)",
3753
- height: "var(--circle-size)",
3754
- borderRadius: "50%",
3755
- border: "2px solid",
3756
- display: "flex",
3757
- alignItems: "center",
3758
- justifyContent: "center",
3759
- fontWeight: "$regular",
3760
- color: "$black",
3761
- variants: {
3762
- isActive: {
3763
- true: {},
3764
- false: {}
3765
- },
3766
- hasLeftLine: {
3767
- true: {}
3768
- },
3769
- hasRightLine: {
3770
- true: {}
3771
- },
3772
- orientation: {
3773
- horizontal: {},
3774
- vertical: {
3775
- "&::before": {
3776
- content: "",
3777
- position: "absolute",
3778
- top: 0,
3779
- left: "50%",
3780
- transform: "translate(-50%, -100%)",
3781
- width: "3px",
3782
- height: "$4",
3783
- backgroundColor: "$clickpalm_dark"
3784
- },
3785
- "&::after": {
3786
- content: "",
3787
- position: "absolute",
3788
- bottom: 0,
3789
- left: "50%",
3790
- transform: "translate(-50%, 100%)",
3791
- width: "3px",
3792
- height: "$4",
3793
- backgroundColor: "$clickpalm_dark"
3794
- }
3795
- }
3796
- },
3797
- variant: {
3798
- primary: {
3799
- borderColor: "$clickpalm_dark"
3800
- },
3801
- secondary: {}
3802
- }
3803
- },
3804
- compoundVariants: [
3805
- {
3806
- hasLeftLine: false,
3807
- orientation: "horizontal",
3808
- css: {
3809
- "&::before": { display: "none" }
3810
- }
3811
- },
3812
- {
3813
- hasRightLine: false,
3814
- orientation: "horizontal",
3815
- css: {
3816
- "&::after": { display: "none" }
3817
- }
3818
- },
3819
- {
3820
- hasLeftLine: false,
3821
- orientation: "vertical",
3822
- css: {
3823
- "&::before": { display: "none" }
3824
- }
3825
- },
3826
- {
3827
- hasRightLine: false,
3828
- orientation: "vertical",
3829
- css: {
3830
- "&::after": { display: "none" }
3831
- }
3832
- },
3833
- {
3834
- isActive: true,
3835
- variant: "primary",
3836
- css: {
3837
- backgroundColor: "$clickpalm_dark",
3838
- color: "$white"
3839
- }
3840
- },
3841
- {
3842
- isActive: false,
3843
- variant: "primary",
3844
- css: {
3845
- borderColor: "$clickpalm_dark"
3846
- }
3847
- },
3848
- {
3849
- isActive: true,
3850
- variant: "secondary",
3851
- css: {
3852
- borderColor: "$ignite_light",
3853
- backgroundColor: "$ignite_light"
3854
- }
3855
- },
3856
- {
3857
- isActive: false,
3858
- variant: "secondary",
3859
- css: {
3860
- borderColor: "$white",
3861
- color: "$white"
3862
- }
3863
- },
3864
- {
3865
- isActive: true,
3866
- variant: "primary",
3867
- orientation: "vertical",
3868
- css: {
3869
- "&::before": {
3870
- backgroundColor: "$clickpalm_dark"
3871
- },
3872
- "&::after": {
3873
- backgroundColor: "$clickpalm_dark"
3874
- }
3875
- }
3876
- },
3877
- {
3878
- isActive: false,
3879
- variant: "primary",
3880
- orientation: "vertical",
3881
- css: {
3882
- "&::before": {
3883
- backgroundColor: "$clickpalm_dark"
3884
- },
3885
- "&::after": {
3886
- backgroundColor: "$clickpalm_dark"
3887
- }
3888
- }
3889
- },
3890
- {
3891
- isActive: true,
3892
- variant: "secondary",
3893
- orientation: "vertical",
3894
- css: {
3895
- "&::before": {
3896
- backgroundColor: "$ignite_light"
3897
- },
3898
- "&::after": {
3899
- backgroundColor: "$ignite_light"
3900
- }
3901
- }
3902
- },
3903
- {
3904
- isActive: false,
3905
- variant: "secondary",
3906
- orientation: "vertical",
3907
- css: {
3908
- "&::before": {
3909
- backgroundColor: "$white"
3910
- },
3911
- "&::after": {
3912
- backgroundColor: "$white"
3913
- }
3914
- }
3915
- }
3916
- ]
3917
- });
3918
- var StepLabel = styled("span", {
3919
- fontSize: "$md",
3920
- whiteSpace: "nowrap",
3921
- overflow: "hidden",
3922
- textOverflow: "ellipsis",
3923
- variants: {
3924
- orientation: {
3925
- horizontal: {
3926
- marginTop: "$2"
3927
- },
3928
- vertical: {
3929
- marginLeft: "$3"
3930
- }
3931
- },
3932
- variant: {
3933
- primary: {
3934
- color: "$black"
3935
- },
3936
- secondary: {
3937
- color: "$white"
3938
- }
3939
- }
3940
- }
3941
- });
3942
-
3943
- // src/components/MultiStep/index.tsx
3944
- var import_jsx_runtime43 = require("react/jsx-runtime");
3945
- var MultiStep = ({
3946
- steps,
3947
- currentStep,
3948
- orientation = "horizontal",
3949
- variant
3950
- }) => {
3951
- return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
3952
- Wrapper5,
3953
- {
3954
- orientation,
3955
- children: steps.map((step, index) => {
3956
- const isFirst = index === 0;
3957
- const isLast = index === steps.length - 1;
3958
- return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(StepItem, { orientation, children: [
3959
- /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
3960
- StepCircle,
3961
- {
3962
- orientation,
3963
- variant,
3964
- isActive: currentStep >= index,
3965
- hasLeftLine: !isFirst,
3966
- hasRightLine: !isLast,
3967
- children: index + 1
3968
- }
3969
- ),
3970
- /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
3971
- StepLabel,
3972
- {
3973
- orientation,
3974
- variant,
3975
- children: step.label
3976
- }
3977
- )
3978
- ] }, index);
3979
- })
3980
- }
3981
- );
3982
- };
3983
- MultiStep.displayName = "MultiStep";
3984
-
3985
- // src/components/Carousel/index.tsx
3986
- var import_react21 = require("react");
3987
-
3988
- // src/components/Carousel/styles.ts
3989
- var CarouselContainer = styled("div", {
3990
- display: "flex",
3991
- flexDirection: "column",
3992
- alignItems: "center",
3993
- width: "100%",
3994
- maxWidth: "720px"
3995
- });
3996
- var Wrapper6 = styled("div", {
3997
- display: "flex",
3998
- flexDirection: "column",
3999
- alignItems: "center",
4000
- borderRadius: "$md",
4001
- width: "stretch",
4002
- padding: "$4",
4003
- variants: {
4004
- variant: {
4005
- gray: {
4006
- backgroundColor: "$gray_background",
4007
- boxShadow: "0 1px 2px $colors$gray_dark"
4008
- },
4009
- purple: {
4010
- backgroundColor: "$clickpalm_mid",
4011
- color: "$white"
4012
- }
4013
- }
4014
- }
4015
- });
4016
- var CarouselHeader = styled("div", {
4017
- display: "flex",
4018
- justifyContent: "space-between",
4019
- alignItems: "center",
4020
- width: "100%",
4021
- color: "$black"
4022
- });
4023
- var Title2 = styled("h3", {
4024
- fontFamily: "$default",
4025
- fontWeight: "$bold",
4026
- fontSize: "$md",
4027
- color: "$black",
4028
- margin: "0px",
4029
- variants: {
4030
- variant: {
4031
- gray: {
4032
- color: "$black"
4033
- },
4034
- purple: {
4035
- color: "$white"
4036
- }
4037
- }
4038
- }
4039
- });
4040
- var Navigation = styled("h3", {
4041
- display: "flex",
4042
- justifyContent: "center",
4043
- alignItems: "center",
4044
- gap: "$1",
4045
- margin: "0px"
4046
- });
4047
- var CarouselContent = styled("div", {
4048
- width: "100%",
4049
- overflow: "hidden",
4050
- position: "relative",
4051
- variants: {
4052
- variant: {
4053
- gray: {
4054
- color: "$black"
4055
- },
4056
- purple: {
4057
- color: "$white",
4058
- "& *": {
4059
- color: "$white"
4060
- }
4061
- }
4062
- }
4063
- }
4064
- });
4065
- var DotsContainer = styled("div", {
4066
- display: "flex",
4067
- alignItems: "center",
4068
- justifyContent: "center",
4069
- width: "100%"
4070
- });
4071
- var Dots2 = styled("div", {
4072
- display: "flex",
4073
- gap: "$2",
4074
- justifyContent: "center",
4075
- flexWrap: "nowrap"
4076
- });
4077
- var DotButton = styled("button", {
4078
- border: "2px solid $ignite_light",
4079
- background: "transparent",
4080
- height: "9px",
4081
- width: "9px",
4082
- borderRadius: "$full",
4083
- padding: 0,
4084
- cursor: "pointer",
4085
- transition: "background-color 0.3s ease, border-color 0.3s ease",
4086
- flexShrink: 0,
4087
- variants: {
4088
- active: {
4089
- true: {
4090
- backgroundColor: "$ignite_light",
4091
- borderColor: "$ignite_light"
4092
- },
4093
- false: {}
4094
- }
4095
- },
4096
- "&:focus": {
4097
- outline: "none",
4098
- borderColor: "$ignite_dark"
4099
- }
4100
- });
4101
- var Ellipsis = styled("span", {
4102
- color: "$ignite_light",
4103
- textDecoration: "none",
4104
- height: "9px",
4105
- display: "flex",
4106
- alignItems: "center"
4107
- });
4108
- var CarouselItemContainer = styled("div", {
4109
- width: "100%",
4110
- color: "inherit"
4111
- });
4112
-
4113
- // src/components/Carousel/index.tsx
4114
- var import_jsx_runtime44 = require("react/jsx-runtime");
4115
- var SWIPE_THRESHOLD = 50;
4116
- var Carousel = ({ title, variant, children }) => {
4117
- const items = import_react21.Children.toArray(children);
4118
- const [activeIndex, setActiveIndex] = (0, import_react21.useState)(0);
4119
- const [touchStartX, setTouchStartX] = (0, import_react21.useState)(null);
4120
- const [touchEndX, setTouchEndX] = (0, import_react21.useState)(null);
4121
- const prev = () => {
4122
- setActiveIndex((prevIndex) => prevIndex === 0 ? items.length - 1 : prevIndex - 1);
4123
- };
4124
- const next = () => {
4125
- setActiveIndex((prevIndex) => prevIndex === items.length - 1 ? 0 : prevIndex + 1);
4126
- };
4127
- const onTouchStart = (e) => {
4128
- setTouchEndX(null);
4129
- setTouchStartX(e.targetTouches[0].clientX);
4130
- };
4131
- const onTouchMove = (e) => {
4132
- setTouchEndX(e.targetTouches[0].clientX);
4133
- };
4134
- const onTouchEnd = () => {
4135
- if (touchStartX !== null && touchEndX !== null) {
4136
- const distance = touchStartX - touchEndX;
4137
- if (Math.abs(distance) > SWIPE_THRESHOLD) {
4138
- if (distance > 0) {
4139
- next();
4140
- } else {
4141
- prev();
4142
- }
4143
- }
4144
- }
4145
- setTouchStartX(null);
4146
- setTouchEndX(null);
4147
- };
4148
- const activeItem = items[activeIndex];
4149
- const itemTitle = activeItem?.props?.title;
4150
- return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
4151
- CarouselContainer,
4152
- {
4153
- role: "region",
4154
- "aria-roledescription": "carousel",
4155
- "aria-label": "Carousel Component",
4156
- children: [
4157
- /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Wrapper6, { variant, children: [
4158
- /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(CarouselHeader, { children: [
4159
- /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Title2, { variant, children: itemTitle ?? title }),
4160
- items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Navigation, { children: [
4161
- /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
4162
- Button,
4163
- {
4164
- size: "sm",
4165
- variant: "secondary",
4166
- "aria-label": "Previous Slide",
4167
- onClick: prev,
4168
- tabIndex: 0,
4169
- children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, { name: "TriangleLeft", size: 16, color: variant === "purple" ? "white" : "black" })
4170
- }
4171
- ),
4172
- /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
4173
- Button,
4174
- {
4175
- size: "sm",
4176
- variant: "secondary",
4177
- "aria-label": "Next Slide",
4178
- onClick: next,
4179
- tabIndex: 0,
4180
- children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, { name: "TriangleRight", size: 16, color: variant === "purple" ? "white" : "black" })
4181
- }
4182
- )
4183
- ] })
4184
- ] }),
4185
- /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Spacing, { size: "xs" }),
4186
- /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Hr, { variant }),
4187
- /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Spacing, { size: "xs" }),
4188
- /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
4189
- CarouselContent,
4190
- {
4191
- onTouchStart,
4192
- onTouchMove,
4193
- onTouchEnd,
4194
- variant,
4195
- children: items.map(
4196
- (child, index) => (0, import_react21.cloneElement)(child, {
4197
- "aria-hidden": index !== activeIndex,
4198
- style: {
4199
- display: index === activeIndex ? "block" : "none"
4200
- }
4201
- })
4202
- )
4203
- }
4204
- )
4205
- ] }),
4206
- /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Spacing, { size: "md" }),
4207
- items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DotsContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Dots2, { role: "tablist", "aria-label": "Carousel Pagination", children: getPaginationItems(items.length, activeIndex).map(
4208
- (page, index) => typeof page === "number" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
4209
- DotButton,
4210
- {
4211
- active: page === activeIndex,
4212
- "aria-label": `Go to slide ${page + 1}`,
4213
- "aria-selected": page === activeIndex,
4214
- role: "tab",
4215
- onClick: () => setActiveIndex(page),
4216
- type: "button"
4217
- },
4218
- page
4219
- ) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Ellipsis, { children: "..." }, `ellipsis-${index}`)
4220
- ) }) })
4221
- ]
4222
- }
4223
- );
4224
- };
4225
- var getPaginationItems = (totalItems, activeIndex) => {
4226
- if (totalItems <= 10) {
4227
- return Array.from({ length: totalItems }, (_, i) => i);
4228
- }
4229
- if (activeIndex < 7) {
4230
- return [0, 1, 2, 3, 4, 5, 6, "...", totalItems - 1];
4231
- }
4232
- if (activeIndex >= totalItems - 5) {
4233
- return [0, "...", totalItems - 5, totalItems - 4, totalItems - 3, totalItems - 2, totalItems - 1];
4234
- }
4235
- return [0, "...", activeIndex - 2, activeIndex - 1, activeIndex, activeIndex + 1, activeIndex + 2, "...", totalItems - 1];
4236
- };
4237
- var CarouselItem = ({ children, style, title, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CarouselItemContainer, { ...props, style: { ...style }, children });
4238
- Carousel.Item = CarouselItem;
4239
-
4240
- // src/components/PasswordInput.tsx
4241
- var import_react22 = require("react");
4242
- var import_jsx_runtime45 = require("react/jsx-runtime");
4243
- var ToggleButton = styled("button", {
4244
- all: "unset",
4245
- cursor: "pointer",
4246
- display: "flex",
4247
- alignItems: "center",
4248
- justifyContent: "center",
4249
- borderRadius: "$sm",
4250
- padding: "2px",
4251
- "&:focus-visible": {
4252
- outline: "none",
4253
- boxShadow: "0 0 0 2px $colors$ignite_light",
4254
- borderRadius: "$sm"
4255
- }
4256
- });
4257
- var PasswordInput = (0, import_react22.forwardRef)(
4258
- ({ value, onChange, ...props }, ref) => {
4259
- const [visible, setVisible] = (0, import_react22.useState)(false);
4260
- const innerRef = (0, import_react22.useRef)(null);
4261
- (0, import_react22.useImperativeHandle)(ref, () => innerRef.current);
4262
- const handleToggleVisibility = () => {
4263
- setVisible((v) => !v);
4264
- setTimeout(() => {
4265
- if (innerRef.current) {
4266
- const length = innerRef.current.value.length;
4267
- innerRef.current.setSelectionRange(length, length);
4268
- }
4269
- }, 0);
4270
- };
4271
- return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
4272
- Input2,
4273
- {
4274
- ...props,
4275
- ref: innerRef,
4276
- type: visible ? "text" : "password",
4277
- value,
4278
- onChange,
4279
- suffix: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
4280
- ToggleButton,
4281
- {
4282
- type: "button",
4283
- onClick: handleToggleVisibility,
4284
- onMouseDown: (e) => e.preventDefault(),
4285
- "aria-label": visible ? "Ocultar senha" : "Mostrar senha",
4286
- children: visible ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icon, { name: "EyeClosed", size: 16, color: "black" }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icon, { name: "EyeOpen", size: 16, color: "black" })
4287
- }
4288
- )
4289
- }
4290
- );
4291
- }
4292
- );
4293
- PasswordInput.displayName = "PasswordInput";
4294
-
4295
- // src/components/Accordion/index.tsx
4296
- var RadixAccordion = __toESM(require("@radix-ui/react-accordion"));
4297
- var import_react23 = __toESM(require("react"));
4298
-
4299
- // src/components/Accordion/styles.ts
4300
- var Accordion = __toESM(require("@radix-ui/react-accordion"));
4301
- var AccordionContainer = styled(Accordion.Root, {
4302
- borderRadius: "$md",
4303
- width: "100%",
4304
- backgroundColor: "$white",
4305
- boxShadow: "0 1px 2px $colors$gray_mid",
4306
- border: "2px solid $colors$gray_mid"
4307
- });
4308
- var AccordionItem = styled(Accordion.Item, {
4309
- overflow: "hidden",
4310
- marginTop: "1px",
4311
- "&:first-child": {
4312
- marginTop: 0,
4313
- borderTopLeftRadius: "$md",
4314
- borderTopRightRadius: "$md"
4315
- },
4316
- "&:last-child": {
4317
- borderBottomLeftRadius: "$md",
4318
- borderBottomRightRadius: "$md"
4319
- }
4320
- });
4321
- var AccordionHeader = styled(Accordion.Header, {
4322
- display: "flex",
4323
- alignItems: "center",
4324
- justifyContent: "space-between",
4325
- padding: "0 $5",
4326
- gap: "$2"
4327
- });
4328
- var AccordionTrigger = styled(Accordion.Trigger, {
4329
- all: "unset",
4330
- backgroundColor: "transparent",
4331
- display: "flex",
4332
- alignItems: "center",
4333
- fontFamily: "$default",
4334
- fontWeight: "$bold",
4335
- fontSize: "$md",
4336
- lineHeight: "$regular",
4337
- textAlign: "left",
4338
- color: "$black",
4339
- width: "100%",
4340
- flexWrap: "wrap",
4341
- wordBreak: "break-word",
4342
- whiteSpace: "normal",
4343
- "&:hover": {
4344
- cursor: "pointer"
4345
- },
4346
- "&:focus": {
4347
- cursor: "pointer",
4348
- outline: "none"
4349
- }
4350
- });
4351
- var AccordionChevron = styled(Icon, {
4352
- color: "$ignite_light",
4353
- transition: "transform 300ms cubic-bezier(0.87, 0, 0.13, 1)",
4354
- "[data-state=open] &": {
4355
- transform: "rotate(180deg)"
4356
- }
4357
- });
4358
- var AccordionContent = styled(Accordion.Content, {
4359
- overflow: "hidden",
4360
- fontSize: "$md",
4361
- color: "$black",
4362
- borderTop: "1px solid $colors$gray_mid",
4363
- '&[data-state="open"]': {
4364
- animation: "slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)"
4365
- },
4366
- '&[data-state="closed"]': {
4367
- animation: "slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)"
4368
- },
4369
- "> div": {
4370
- padding: "$5"
4371
- }
4372
- });
4373
- var TriggerContent = styled("div", {
4374
- display: "flex",
4375
- alignItems: "center",
4376
- gap: "$2"
4377
- });
4378
- var OptionsButton = styled(Button, {
4379
- marginRight: "$1"
4380
- });
4381
-
4382
- // src/components/Accordion/index.tsx
4383
- var import_jsx_runtime46 = require("react/jsx-runtime");
4384
- var Accordion2 = import_react23.default.forwardRef(
4385
- ({ title, children, dropdownItems }, ref) => {
4386
- return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AccordionContainer, { type: "single", collapsible: true, ref, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(AccordionItem, { value: "item-1", children: [
4387
- /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(AccordionHeader, { children: [
4388
- /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AccordionTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: title }) }),
4389
- /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(TriggerContent, { children: [
4390
- dropdownItems && dropdownItems,
4391
- /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(RadixAccordion.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(StyledButton, { as: "div", variant: "secondary", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AccordionChevron, { name: "TriangleDown", size: 16, "aria-hidden": true }) }) })
4392
- ] })
4393
- ] }),
4394
- /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(RadixAccordion.Content, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AccordionContent, { children }) })
4395
- ] }) });
4396
- }
4397
- );
4398
- Accordion2.displayName = "Accordion";
4399
- // Annotate the CommonJS export names for ESM import in node:
4400
- 0 && (module.exports = {
4401
- Accordion,
4402
- Avatar,
4403
- Box,
4404
- Button,
4405
- Calendar,
4406
- Carousel,
4407
- Checkbox,
4408
- Datepicker,
4409
- Dropdown,
4410
- DropdownItem,
4411
- DropdownSeparator,
4412
- Heading,
4413
- Hr,
4414
- Icon,
4415
- Input,
4416
- LabelledValue,
4417
- Loader,
4418
- MaskedInput,
4419
- Modal,
4420
- MultiStep,
4421
- OneTimePassword,
4422
- Paragraph,
4423
- PasswordInput,
4424
- ProgressBar,
4425
- Radio,
4426
- Select,
4427
- Spacing,
4428
- Span,
4429
- StyledHr,
4430
- Switch,
4431
- Tabs,
4432
- TextArea,
4433
- TextAreaElement,
4434
- Toast,
4435
- Tooltip,
4436
- config,
4437
- createTheme,
4438
- css,
4439
- getCssText,
4440
- globalCss,
4441
- keyframes,
4442
- styled,
4443
- theme,
4444
- toast
4445
- });