@okam/directus-next 1.2.14 → 1.2.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/server.js CHANGED
@@ -5,2558 +5,14 @@ const router = require("./router-DTZYUtal.js");
5
5
  const directusQuery = require("@okam/directus-query");
6
6
  const radashi = require("radashi");
7
7
  require("server-only");
8
- const jsxRuntime = require("react/jsx-runtime");
9
- const React = require("react");
10
- const tailwindVariants = require("tailwind-variants");
11
- require("@react-aria/accordion");
12
- const coreLib = require("@okam/core-lib");
13
- const reactAria = require("react-aria");
14
- require("react-use");
15
- require("@react-spring/web");
16
- const reactStately = require("react-stately");
17
- require("react-div-100vh");
18
- require("@react-aria/focus");
19
- require("swiper/react");
20
- require("swiper/modules");
21
- require("sanitize-html");
22
- require("@react-aria/i18n");
23
- const reactHookForm = require("react-hook-form");
24
- const logger$1 = require("@okam/logger");
25
- const utils = require("@react-aria/utils");
8
+ require("react/jsx-runtime");
9
+ require("@okam/stack-ui");
26
10
  require("next/headers");
27
- const makeTheme = (theme) => theme;
28
- function createCtxNullable() {
29
- const ctx = React.createContext(void 0);
30
- function useCtx() {
31
- const c = React.useContext(ctx);
32
- if (c === void 0) {
33
- return null;
34
- }
35
- return c;
36
- }
37
- return [useCtx, ctx.Provider];
38
- }
39
- const defaultTheme = {
40
- typography: () => ""
41
- };
42
- const [useTheme, ThemeProvider] = createCtxNullable();
43
- function ThemeContextProvider({ children, brandTheme = defaultTheme }) {
44
- const value = React.useMemo(() => ({ brandTheme }), [brandTheme]);
45
- return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { value, children });
46
- }
47
- const createThemeProvider = (brandTheme) => {
48
- const ThemeProviderContext = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(ThemeContextProvider, { brandTheme, children });
49
- return ThemeProviderContext;
50
- };
51
- const accordionContainer = tailwindVariants.tv({
52
- base: "[border-radius: 32px] p-1.5 focus:outline-none text-color-1-500",
53
- defaultVariants: {
54
- textAlign: "left",
55
- isOpen: false
56
- },
57
- variants: {
58
- textAlign: {
59
- center: "text-center",
60
- left: "text-left"
61
- }
62
- }
63
- });
64
- const accordionButton = tailwindVariants.tv({
65
- base: "grid overflow-hidden w-full items-center border-b-2 border-color-1-500 focus-ring-black",
66
- variants: {
67
- titleBold: {
68
- true: "font-bold"
69
- },
70
- textAlign: {
71
- center: "grid-cols-[3rem_1fr_3rem] pl-0 sm:pl-0",
72
- left: "grid-cols-[1fr_3rem]"
73
- },
74
- bgColor: {
75
- gray: "bg-gray-300",
76
- white: "bg-white"
77
- }
78
- },
79
- defaultVariants: {
80
- titleBold: false,
81
- textAlign: "left",
82
- bgColor: "white"
83
- }
84
- });
85
- const accordionTitle = tailwindVariants.tv({
86
- base: "",
87
- defaultVariants: {
88
- textAlign: "left"
89
- },
90
- variants: {
91
- textAlign: {
92
- center: "justify-self-center col-start-2",
93
- left: "justify-self-start"
94
- }
95
- }
96
- });
97
- const accordionIcon = tailwindVariants.tv({
98
- base: "text-color-1-500 min-h-12 rotate-90 min-w-12 rounded-full flex items-center justify-center transition duration-500 transform ml-auto aspect-square",
99
- variants: {
100
- isOpen: {
101
- true: "-rotate-90",
102
- false: ""
103
- }
104
- }
105
- });
106
- const accordionRegion = tailwindVariants.tv({
107
- base: `
108
- font-body
109
- text-inherit
110
- h-auto
111
- grid
112
- `,
113
- defaultVariants: {
114
- textAlign: "left"
115
- },
116
- variants: {
117
- textAlign: {
118
- center: "grid-cols-[3rem_1fr_3rem] px-6 text-center",
119
- left: "grid-cols-[1fr_3rem] text-left"
120
- }
121
- }
122
- });
123
- const accordionContent = tailwindVariants.tv({
124
- base: "overflow-hidden flex flex-col gap-2 items-start",
125
- defaultVariants: {
126
- textAlign: "left"
127
- },
128
- variants: {
129
- textAlign: {
130
- center: "col-start-2",
131
- left: ""
132
- }
133
- }
134
- });
135
- const accordionTheme = {
136
- container: (props) => accordionContainer(props),
137
- button: (props) => accordionButton(props),
138
- title: (props) => accordionTitle(props),
139
- icon: (props) => accordionIcon(props),
140
- region: (props) => accordionRegion(props),
141
- content: (props) => accordionContent(props)
142
- };
143
- const button = tailwindVariants.tv({
144
- base: `
145
- flex
146
- items-center
147
- justify-center
148
- gap-4
149
- transition
150
- duration-300
151
- ease-in-out
152
- disabled:pointer-events-none
153
- disabled:opacity-30
154
- focus-ring-black
155
- h-fit
156
- `,
157
- defaultVariants: {
158
- buttonStyle: "default",
159
- type: "button",
160
- size: "default",
161
- shape: "rounded"
162
- },
163
- variants: {
164
- type: {
165
- button: "",
166
- menu: "text-2xl"
167
- },
168
- buttonStyle: {
169
- default: `
170
- px-4
171
- py-2
172
- text-white
173
- bg-color-1-500
174
- hover:bg-color-1-400
175
- active:bg-color-1-400
176
- `,
177
- outline: `
178
- px-4
179
- py-2
180
- bg-transparent
181
- border-color-1-500
182
- text-color-1-500
183
- hover:bg-color-1-500
184
- hover:text-white
185
- active:bg-color-1-500
186
- active:text-white
187
- `,
188
- hollow: `
189
- px-2
190
- bg-transparent
191
- text-color-1-500
192
- hover:border-b-color-1-500
193
- active:border-b-color-1-500
194
- focus:border-b-color-1-500
195
-
196
- `
197
- },
198
- intent: {
199
- danger: ``,
200
- error: `
201
- bg-error
202
- text-white
203
- pointer-events-none
204
- border-error
205
- `
206
- },
207
- size: {
208
- default: `min-w-12 min-h-6`,
209
- large: `min-w-36 min-h-18`
210
- },
211
- shape: {
212
- rounded: `rounded-md`,
213
- circular: `rounded-full`
214
- }
215
- },
216
- compoundVariants: [
217
- {
218
- intent: "danger",
219
- buttonStyle: "default",
220
- className: `
221
- bg-danger-500
222
- text-white
223
- border-danger-500
224
- hover:bg-danger-400
225
- hover:border-danger-400
226
- focus:bg-danger-400
227
- focus:border-danger-400
228
- `
229
- }
230
- ]
231
- });
232
- const typography = tailwindVariants.tv({
233
- variants: {
234
- size: {
235
- h1: `text-5xl`,
236
- h2: `text-4xl`,
237
- h3: `text-3xl`,
238
- h4: `text-2xl`,
239
- h5: `text-xl`,
240
- h6: `text-lg`,
241
- leading: `text-md font-bold leading-normal`,
242
- paragraph: `text-md inline`,
243
- footnotes: `text-sm`,
244
- xs: `text-xs`
245
- },
246
- font: {
247
- body: `font-body`
248
- },
249
- weight: {
250
- normal: `font-normal`,
251
- light: `font-light`,
252
- bold: "font-bold"
253
- },
254
- color: {
255
- gray: `text-gray-500`,
256
- white: `text-white`
257
- },
258
- isError: {
259
- true: "text-sm text-error"
260
- },
261
- align: {
262
- center: "text-center",
263
- left: "text-left",
264
- right: "text-right"
265
- }
266
- },
267
- defaultVariants: {
268
- size: "paragraph",
269
- font: "body"
270
- }
271
- });
272
- const alertsWrapper = tailwindVariants.tv({
273
- base: "bg-color-1-200 p-4 flex flex-col gap-4"
274
- });
275
- const alertsCarouselWrapper = tailwindVariants.tv({
276
- base: "flex flex-wrap justify-between items-center gap-4 relative"
277
- });
278
- const alertsCloseBtn = tailwindVariants.tv({
279
- extend: button,
280
- base: "self-end"
281
- });
282
- const alertsSwiperSwiper = tailwindVariants.tv({
283
- base: "bg-color-1-300 m-2 rounded-lg order-2 basis-9/12"
284
- });
285
- const alertsSwiperWrapper = tailwindVariants.tv({
286
- base: "m-4"
287
- });
288
- const alertsItemWrapper = tailwindVariants.tv({
289
- base: ""
290
- });
291
- const alertsItemContainer = tailwindVariants.tv({
292
- base: ""
293
- });
294
- const alertsItemTitle = tailwindVariants.tv({
295
- extend: typography,
296
- defaultVariants: {
297
- size: "h1"
298
- }
299
- });
300
- const alertsItemContent = tailwindVariants.tv({
301
- extend: typography
302
- });
303
- const alertsItemIcon = tailwindVariants.tv({
304
- base: "block w-min bg-color-1-400 p-2 rounded-lg"
305
- });
306
- const alertsNavigationButton = tailwindVariants.tv({
307
- extend: button,
308
- base: "basis-1/12",
309
- variants: {
310
- order: {
311
- prev: "order-1",
312
- next: "order-3"
313
- }
314
- }
315
- });
316
- const alertsPaginationWrapper = tailwindVariants.tv({
317
- base: "flex gap-4 justify-center bg-color-1-200 z-10 bottom-4 left-0 right-0 order-4 basis-full"
318
- });
319
- const alertsPaginationBullet = tailwindVariants.tv({
320
- base: "w-4 h-4 rounded-full block bg-color-1-600 focus-ring-black",
321
- variants: {
322
- active: {
323
- true: "bg-color-1-100",
324
- false: ""
325
- }
326
- }
327
- });
328
- const alertsTheme = {
329
- wrapper: alertsWrapper,
330
- carouselWrapper: alertsCarouselWrapper,
331
- closeBtn: alertsCloseBtn,
332
- swiper: {
333
- swiper: alertsSwiperSwiper,
334
- wrapper: alertsSwiperWrapper
335
- },
336
- item: {
337
- wrapper: alertsItemWrapper,
338
- container: alertsItemContainer,
339
- title: alertsItemTitle,
340
- content: alertsItemContent,
341
- icon: alertsItemIcon
342
- },
343
- navigation: {
344
- button: alertsNavigationButton
345
- },
346
- pagination: {
347
- wrapper: alertsPaginationWrapper,
348
- bullet: alertsPaginationBullet
349
- }
350
- };
351
- const main = tailwindVariants.tv({
352
- base: "w-full bg-slate-100"
353
- });
354
- const container = tailwindVariants.tv({
355
- base: "max-w-screen-lg mx-auto w-full",
356
- variants: {
357
- fullWidth: {
358
- true: "max-w-full col-span-full p-0"
359
- },
360
- spacing: {
361
- small: "mb-3",
362
- medium: "mb-6",
363
- large: "mb-8",
364
- none: "mb-0"
365
- }
366
- }
367
- });
368
- const grid = tailwindVariants.tv({
369
- extend: container,
370
- base: "grid grid-cols-12 gap-6 px-4 col-span-full",
371
- variants: {
372
- fullWidth: {
373
- true: "max-w-full col-span-full p-0"
374
- }
375
- }
376
- });
377
- const gridItem = tailwindVariants.tv({
378
- base: "bg-slate-300 h-64 p-4 flex justify-start items-end",
379
- defaultVariants: {
380
- size: "small"
381
- },
382
- variants: {
383
- size: {
384
- small: "col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-4",
385
- medium: "col-span-12 sm:col-span-12 md:col-span-8 lg:col-span-8",
386
- large: "lg:col-start-3 sm:col-start-1 sm:col-end-13 lg:col-end-11 md:col-start-3 md:col-end-11 col-start-1 col-end-13"
387
- }
388
- }
389
- });
390
- const calendarContainer = tailwindVariants.tv({
391
- base: "text-gray-800 flex flex-col gap-4"
392
- });
393
- const calendarHeader = tailwindVariants.tv({
394
- base: "flex items-center justify-between"
395
- });
396
- const calendarTitle = tailwindVariants.tv({
397
- base: "text-2xl text-color-1-500 font-bold"
398
- });
399
- const calendarHeaderContainer = tailwindVariants.tv({
400
- base: ""
401
- });
402
- tailwindVariants.tv({
403
- base: ""
404
- });
405
- tailwindVariants.tv({
406
- base: ""
407
- });
408
- tailwindVariants.tv({
409
- base: ""
410
- });
411
- const calendarNavigationButtonsContainer = tailwindVariants.tv({
412
- base: "flex items-center gap-1"
413
- });
414
- const calendarNavigationButtons = tailwindVariants.tv({
415
- base: `
416
- active:bg-color-1-500
417
- p-2
418
- rounded-full
419
- active:text-color-1-100
420
- hover:bg-color-1-200
421
- focus-ring-black
422
- transition-all
423
- duration-300
424
- ease-in-out
425
- `
426
- });
427
- const calendarTable = tailwindVariants.tv({
428
- base: `
429
- border-spacing-2
430
- border-separate
431
- `
432
- });
433
- const calendarDayLabel = tailwindVariants.tv({
434
- base: `
435
- text-center
436
- capitalize
437
- rounded-lg
438
- p-2
439
- mx-2
440
- bg-color-1-300
441
- `
442
- });
443
- const calendarCellContainer = tailwindVariants.tv({
444
- base: "text-center",
445
- variants: {
446
- isFocusVisible: {
447
- true: "z-10",
448
- false: ""
449
- }
450
- }
451
- });
452
- const calendarCell = tailwindVariants.tv({
453
- base: "w-10 h-10",
454
- variants: {
455
- isSelected: {
456
- true: "",
457
- false: ""
458
- },
459
- isInvalid: {
460
- true: "",
461
- false: ""
462
- },
463
- isDisabled: {
464
- true: "disabled pointer-events-none",
465
- false: ""
466
- },
467
- isUnavailable: {
468
- true: "pointer-events-none",
469
- false: ""
470
- },
471
- isOutsideRange: {
472
- true: "pointer-events-none",
473
- false: ""
474
- },
475
- isOutsideVisibleRange: {
476
- true: "pointer-events-none",
477
- false: ""
478
- },
479
- isRoundedLeft: {
480
- true: "rounded-l-full",
481
- false: ""
482
- },
483
- isRoundedRight: {
484
- true: "rounded-r-full",
485
- false: ""
486
- }
487
- },
488
- compoundVariants: [
489
- {
490
- isSelected: [true, false],
491
- isInvalid: true,
492
- class: "bg-error-400 hover:bg-error-500"
493
- },
494
- {
495
- isSelected: true
496
- }
497
- ]
498
- });
499
- const calendarCellDate = tailwindVariants.tv({
500
- base: `
501
- w-full
502
- h-full
503
- flex
504
- items-center
505
- justify-center
506
- cursor-pointer
507
- transition-all
508
- duration-100
509
- ease-in-out
510
- relative
511
- `,
512
- variants: {
513
- isSelected: {
514
- true: `
515
- bg-color-1-400
516
- text-white
517
- hover:bg-color-1-500
518
- `,
519
- false: `
520
- rounded-full
521
- hover:text-white
522
- hover:bg-color-1-400
523
- `
524
- },
525
- isInvalid: {
526
- true: "",
527
- fasle: ""
528
- },
529
- isDisabled: {
530
- true: "opacity-50",
531
- false: ""
532
- },
533
- isUnavailable: {
534
- true: "text-gray-200",
535
- false: ""
536
- },
537
- isOutsideRange: {
538
- true: `
539
- text-black
540
- before:content-['/']
541
- before:text-gray-400
542
- before:[font-weight:100]
543
- before:text-4xl
544
- before:absolute
545
- before:inset-0
546
- before:flex
547
- before:items-center
548
- before:justify-center
549
- `,
550
- false: ""
551
- },
552
- isOutsideVisibleRange: {
553
- true: `text-gray-400`,
554
- false: ""
555
- },
556
- isFocusVisible: {
557
- true: "",
558
- false: ""
559
- },
560
- isSelectionStart: {
561
- true: "",
562
- false: ""
563
- },
564
- isSelectionEnd: {
565
- true: "",
566
- false: ""
567
- }
568
- },
569
- compoundVariants: [
570
- {
571
- isSelectionStart: [true, false],
572
- isSelectionEnd: [true, false],
573
- isDisabled: false,
574
- isOutsideRange: false,
575
- isUnavailable: false,
576
- isInvalid: true,
577
- class: `
578
- bg-error-400
579
- hover:bg-error-500
580
- `
581
- },
582
- {
583
- isSelectionStart: true,
584
- class: `
585
- rounded-l-full
586
- bg-color-1-400
587
- text-white
588
- hover:bg-color-1-500
589
- `
590
- },
591
- {
592
- isSelectionEnd: true,
593
- class: `
594
- rounded-r-full
595
- bg-color-1-400
596
- text-white
597
- hover:bg-color-1-500
598
- `
599
- }
600
- ]
601
- });
602
- const calendarTheme = {
603
- container: calendarContainer,
604
- header: calendarHeader,
605
- calendarHeaderContainer,
606
- title: calendarTitle,
607
- navigationButtonsContainer: calendarNavigationButtonsContainer,
608
- navigationButtons: calendarNavigationButtons,
609
- calendarTable,
610
- calendarDayLabel,
611
- cellContainer: calendarCellContainer,
612
- cell: calendarCell,
613
- cellDate: calendarCellDate
614
- };
615
- const carouselWrapper = tailwindVariants.tv({
616
- base: "flex flex-wrap justify-between items-center gap-4 relative"
617
- });
618
- const carouselSwiperSwiper = tailwindVariants.tv({
619
- base: `
620
- basis-9/12
621
- bg-color-1-300
622
- m-2
623
- rounded-lg
624
- order-2
625
- focus-visible:outline-2
626
- focus-visible:outline-black
627
- focus-visible:outline-offset-2
628
- `
629
- });
630
- const carouselSwiperWrapper = tailwindVariants.tv({
631
- base: ""
632
- });
633
- const carouselNavigationButton = tailwindVariants.tv({
634
- extend: button,
635
- base: "basis-1/12",
636
- variants: {
637
- order: {
638
- prev: "order-1",
639
- next: "order-3"
640
- }
641
- }
642
- });
643
- const carouselPaginationWrapper = tailwindVariants.tv({
644
- base: "flex gap-4 justify-center z-10 bottom-4 left-0 right-0 order-4 basis-full"
645
- });
646
- const carouselPaginationBullet = tailwindVariants.tv({
647
- base: "w-4 h-4 rounded-full block bg-color-1-600 focus-ring-black",
648
- variants: {
649
- active: {
650
- true: "bg-color-1-100",
651
- false: ""
652
- }
653
- }
654
- });
655
- const carouselPaginationFractionWrapper = tailwindVariants.tv({
656
- base: "bg-color-1-300 rounded-lg p-2"
657
- });
658
- const carouselSlideWrapper = tailwindVariants.tv({
659
- base: "px-4 flex flex-col justify-center h-full"
660
- });
661
- const carouselSlideContainer = tailwindVariants.tv({
662
- base: "flex flex-col gap-2 bg-color-1-400 my-4 rounded-lg p-4"
663
- });
664
- const carouselSlideTitle = tailwindVariants.tv({
665
- extend: typography,
666
- defaultVariants: {
667
- size: "h3"
668
- }
669
- });
670
- const carouselTheme = {
671
- carouselWrapper,
672
- swiper: {
673
- swiper: carouselSwiperSwiper,
674
- wrapper: carouselSwiperWrapper
675
- },
676
- navigation: {
677
- button: carouselNavigationButton
678
- },
679
- pagination: {
680
- wrapper: carouselPaginationWrapper,
681
- bullet: carouselPaginationBullet,
682
- fraction: {
683
- wrapper: carouselPaginationFractionWrapper
684
- }
685
- },
686
- slide: {
687
- wrapper: carouselSlideWrapper,
688
- container: carouselSlideContainer,
689
- title: carouselSlideTitle
690
- }
691
- };
692
- const checkboxContainer = tailwindVariants.tv({
693
- base: "flex focus-ring-black"
694
- });
695
- const checkboxLabel = tailwindVariants.tv({
696
- base: `hover:cursor-pointer`,
697
- variants: {
698
- color: {
699
- gray: "text-gray-300",
700
- black: "text-black"
701
- },
702
- isDisabled: {
703
- true: "text-gray-6"
704
- }
705
- },
706
- defaultVariants: {
707
- color: "black"
708
- }
709
- });
710
- const checkBox = tailwindVariants.tv({
711
- base: `w-6 h-6 mt-0.5 mr-2.5 rounded-full border-2 border-gray-2 shrink-0 hover:cursor-pointer flex items-center justify-center`,
712
- variants: {
713
- isDisabled: {
714
- true: "border-gray-6"
715
- },
716
- isFocused: {
717
- true: `outline-black [outline-offset: 2px]`
718
- },
719
- isError: {
720
- true: "border-red-500"
721
- }
722
- }
723
- });
724
- const checkMark = tailwindVariants.tv({
725
- base: `hidden w-4 h-4 bg-gray-300 rounded-full`,
726
- variants: {
727
- selected: {
728
- true: "block text-white"
729
- }
730
- }
731
- });
732
- const checkMarkIcon = tailwindVariants.tv({
733
- base: "text-white w-4 h-4 [&_svg]:w-4 [&_svg]:h-4"
734
- });
735
- const checkboxGroup = tailwindVariants.tv({
736
- base: `block`,
737
- variants: {
738
- isDisabled: {
739
- true: "opacity-60 pointer-events-none"
740
- }
741
- }
742
- });
743
- const checkboxGroupItemsGroup = tailwindVariants.tv({
744
- base: `flex flex-col gap-4 py-8`
745
- });
746
- const listBoxWrapper = tailwindVariants.tv({
747
- base: "flex flex-col gap-2"
748
- });
749
- const listBoxLabel = tailwindVariants.tv({
750
- extend: typography,
751
- defaultVariants: {
752
- size: "h3"
753
- }
754
- });
755
- const listBoxList = tailwindVariants.tv({
756
- base: "flex flex-col gap-2"
757
- });
758
- const listBoxSectionWrapper = tailwindVariants.tv({
759
- base: "flex flex-col gap-2 pt-2 mb-2 border-t border-border first:border-t-0 first:pt-0 last:mb-0"
760
- });
761
- const listBoxSectionHeading = tailwindVariants.tv({
762
- extend: typography,
763
- defaultVariants: {
764
- size: "h4"
765
- }
766
- });
767
- const listBoxSectionGroup = tailwindVariants.tv({
768
- base: "flex flex-col gap-2"
769
- });
770
- const listBoxOptionOption = tailwindVariants.tv({
771
- extend: typography,
772
- base: "p-1 rounded-md",
773
- variants: {
774
- isSelectable: {
775
- true: "cursor-pointer"
776
- },
777
- isLink: {
778
- true: "cursor-pointer underline underline-offset-4 decoration-color-1-400 text-color-1-400 hover:text-color-1-500 active:text-color-1-600",
779
- false: ""
780
- },
781
- isFocused: {
782
- true: "outline outline-2 outline-offset-1 outline-gray-400"
783
- },
784
- isFocusVisible: {
785
- true: "outline outline-4 outline-offset-2 outline-black"
786
- },
787
- isSelected: {
788
- true: "bg-color-1-400 text-white hover:bg-color-1-500 active:bg-color-1-600"
789
- },
790
- isDisabled: {
791
- true: "opacity-50 pointer-events-none"
792
- },
793
- allowsSelection: {
794
- true: ""
795
- }
796
- },
797
- defaultVariants: {
798
- size: "paragraph"
799
- },
800
- compoundVariants: [
801
- {
802
- isFocused: true,
803
- isFocusVisible: true,
804
- className: "outline outline-4 outline-offset-2 outline-black"
805
- },
806
- {
807
- isSelectable: true,
808
- isLink: false,
809
- className: "hover:bg-color-1-100 active:bg-color-1-200"
810
- }
811
- ]
812
- });
813
- const listBoxOptionLabel = tailwindVariants.tv({
814
- extend: typography,
815
- defaultVariants: {
816
- size: "h5"
817
- }
818
- });
819
- const listBoxOptionDescription = tailwindVariants.tv({
820
- extend: typography,
821
- defaultVariants: {
822
- size: "footnotes"
823
- }
824
- });
825
- const listBoxErrorMessage = tailwindVariants.tv({
826
- extend: typography,
827
- defaultVariants: {
828
- size: "footnotes",
829
- isError: true
830
- }
831
- });
832
- const itemTheme = {
833
- option: listBoxOptionOption,
834
- label: listBoxOptionLabel,
835
- description: listBoxOptionDescription
836
- };
837
- const listBoxTheme = {
838
- wrapper: listBoxWrapper,
839
- label: listBoxLabel,
840
- list: listBoxList,
841
- section: {
842
- wrapper: listBoxSectionWrapper,
843
- heading: listBoxSectionHeading,
844
- group: listBoxSectionGroup,
845
- item: itemTheme
846
- },
847
- item: itemTheme,
848
- errorMessage: listBoxErrorMessage
849
- };
850
- const comboBoxButton = tailwindVariants.tv({
851
- base: [
852
- button.base,
853
- `
854
- px-4
855
- py-2
856
- text-white
857
- bg-color-1-500
858
- `
859
- ],
860
- variants: {
861
- isOpen: {
862
- true: "pointer-events-none",
863
- false: "hover:bg-color-1-400 active:bg-color-1-400"
864
- }
865
- }
866
- });
867
- const comboBoxTheme = {
868
- wrapper: () => "flex flex-col gap-4 relative",
869
- label: (props) => typography({ ...props, className: "text-gray-3" }),
870
- container: () => "flex flex-col gap-4",
871
- inputWrapper: () => "relative flex items-center outline outline-2 outline-gray-300 focus-within:outline focus-within:outline-black focus-within:outline-2 [&>input]:flex-1 [&>input]:min-w-0 [&>input]:pr-10 [&>input]:border-0 [&>input]:outline-0 [&>input]:bg-transparent [&>input]:text-ellipsis [&>input]:whitespace-nowrap [&>input]:overflow-hidden",
872
- button: comboBoxButton,
873
- popover: {
874
- popover: () => "w-[var(--comboBox-popover-container-width)] max-h-[300px] overflow-y-auto overflow-x-hidden text-white !bg-color-1-500 rounded-md p-2"
875
- },
876
- listContainer: (props) => typography({
877
- ...props,
878
- className: "outline outline-2 outline-white outline-offset-2 p-2 my-4 rounded-md w-full flex flex-col gap-6 max-h-[300px] overflow-y-auto overflow-x-hidden"
879
- }),
880
- ul: (props) => typography({
881
- ...props,
882
- className: "w-full flex flex-col gap-6"
883
- }),
884
- li: () => "transition w-full hover:text-gray-300 focus-ring-white",
885
- group: () => "flex flex-col gap-4",
886
- section: () => "flex flex-col gap-4",
887
- list: {
888
- ...listBoxTheme
889
- },
890
- headerText: () => "text-gray-300",
891
- noResults: () => "p-4 text-center",
892
- noResultsText: (props) => typography({ ...props, className: "text-gray-400" }),
893
- errorMessage: (props) => typography({ ...props, size: "footnotes", isError: true })
894
- };
895
- const focusable = tailwindVariants.tv({
896
- base: `
897
- focus-ring-black
898
- transition-all
899
- duration-200
900
- `
901
- });
902
- const datePickerContainer = tailwindVariants.tv({
903
- base: "relative inline-flex flex-col text-left"
904
- });
905
- const datePickerButton = tailwindVariants.tv({
906
- extend: focusable,
907
- base: "flex gap-4 justify-between items-center border-2 border-color-1-500 rounded-md bg-gray-100 p-4",
908
- variants: {
909
- dateFieldShown: {
910
- true: "w-full",
911
- false: "w-fit"
912
- },
913
- isInvalid: {
914
- true: "bg-red-100 border-red-500",
915
- false: "bg-gray-100 border-color-1-500"
916
- }
917
- },
918
- defaultVariants: {
919
- dateFieldShown: true
920
- }
921
- });
922
- const datePickerIcon = tailwindVariants.tv({
923
- base: "text-white bg-color-1-500 rounded-md h-full p-2"
924
- });
925
- const datePickerLabel = tailwindVariants.tv({
926
- base: "text-color-1-500 font-bold pb-2 text-2xl"
927
- });
928
- const datePickerWrapper = tailwindVariants.tv({
929
- base: "w-fit flex flex-col gap-4"
930
- });
931
- const datePickerCalendarPopoverUnderlay = tailwindVariants.tv({
932
- base: "fixed inset-0"
933
- });
934
- const datePickerCalendarPopoverContainer = tailwindVariants.tv({
935
- base: "absolute top-full bg-white border border-gray-300 rounded-md shadow-lg mt-2 p-8 z-10"
936
- });
937
- const datePickerDialog = tailwindVariants.tv({
938
- base: "flex flex-col gap-4"
939
- });
940
- const datePickerDateFieldContainer = tailwindVariants.tv({
941
- base: "flex gap-2 items-center justify-between",
942
- defaultVariants: {
943
- dateFieldShown: true
944
- },
945
- variants: {
946
- dateFieldShown: {
947
- true: "",
948
- false: "hidden"
949
- }
950
- }
951
- });
952
- const datePickerDateField = tailwindVariants.tv({
953
- base: "flex bg-gray-300 p-2 rounded-md"
954
- });
955
- const datePickerDateSegment = tailwindVariants.tv({
956
- extend: focusable,
957
- base: `rounded-sm p-1 focus:bg-color-1-400 focus:text-white`
958
- });
959
- const datePickerInvalidIndicator = tailwindVariants.tv({
960
- base: "rounded-lg p-2 border-2 border-red-500",
961
- variants: {
962
- position: {
963
- inner: "text-red-500 bg-white",
964
- outer: "text-black bg-red-100"
965
- }
966
- }
967
- });
968
- const datePickerTheme = {
969
- container: datePickerContainer,
970
- wrapper: datePickerWrapper,
971
- button: datePickerButton,
972
- icon: datePickerIcon,
973
- dateField: datePickerDateField,
974
- dateSegment: datePickerDateSegment,
975
- label: datePickerLabel,
976
- calendarPopover: datePickerCalendarPopoverContainer,
977
- calendarUnderlay: datePickerCalendarPopoverUnderlay,
978
- dialog: datePickerDialog,
979
- dateFieldContainer: datePickerDateFieldContainer,
980
- invalidIndicator: datePickerInvalidIndicator
981
- };
982
- const imgStyles = tailwindVariants.tv({
983
- base: "object-contain"
984
- });
985
- const imgTheme = (props) => imgStyles(props);
986
- const lightBoxWrapper = tailwindVariants.tv({
987
- base: "focus-ring-black"
988
- });
989
- const lightBoxContainer = tailwindVariants.tv({
990
- base: `rounded-3xl overflow-hidden`
991
- });
992
- const lightBoxCloseBtn = tailwindVariants.tv({
993
- base: `
994
- absolute
995
- xl:top-10
996
- xl:right-20
997
- lg:top-8
998
- lg:right-8
999
- z-[10000]
1000
- top-4
1001
- right-4
1002
- size-10
1003
- focus-ring-black
1004
- `
1005
- });
1006
- const lightBoxLabel = tailwindVariants.tv({
1007
- extend: typography,
1008
- base: "sr-only"
1009
- });
1010
- const lightBoxModalUnderlay = tailwindVariants.tv({
1011
- base: "w-screen h-screen bg-black/50 absolute top-0 left-0 flex justify-center items-center"
1012
- });
1013
- const lightBoxModalOverlay = tailwindVariants.tv({
1014
- base: ""
1015
- });
1016
- const lightBoxModalDialog = tailwindVariants.tv({
1017
- base: "flex flex-col gap-4 items-center"
1018
- });
1019
- const lightboxTheme = {
1020
- wrapper: lightBoxWrapper,
1021
- container: lightBoxContainer,
1022
- label: lightBoxLabel,
1023
- closeBtn: lightBoxCloseBtn,
1024
- modal: {
1025
- underlay: lightBoxModalUnderlay,
1026
- overlay: lightBoxModalOverlay,
1027
- dialog: lightBoxModalDialog
1028
- }
1029
- };
1030
- const popoverPopover = tailwindVariants.tv({
1031
- base: "border-2 text-black p-4 bg-gray-300"
1032
- });
1033
- const popoverUnderlay = tailwindVariants.tv({});
1034
- const popoverArrow = tailwindVariants.tv({});
1035
- const popoverButton = tailwindVariants.tv({
1036
- extend: button
1037
- });
1038
- const popoverTheme = {
1039
- popover: popoverPopover,
1040
- underlay: popoverUnderlay,
1041
- arrow: popoverArrow,
1042
- button: popoverButton
1043
- };
1044
- const printButton = tailwindVariants.tv({
1045
- base: "relative z-20 !bg-color-1-500 hover:!bg-color-1-400 w-16 h-16 flex justify-center items-center active:!bg-color-1-400 rounded-full text-white focus-ring-black"
1046
- });
1047
- const printButtonIcon = tailwindVariants.tv({
1048
- base: "text-white"
1049
- });
1050
- const radioLabel = tailwindVariants.tv({
1051
- base: `text-black flex flex-row items-center hover:cursor-pointer focus-ring-black`,
1052
- variants: {
1053
- isDisabled: {
1054
- true: "text-gray-6"
1055
- }
1056
- }
1057
- });
1058
- const radio = tailwindVariants.tv({
1059
- base: `w-6 h-6 mt-0.5 mr-2.5 rounded-full border-2 border-gray-2 shrink-0 hover:cursor-pointer flex items-center justify-center`,
1060
- variants: {
1061
- isDisabled: {
1062
- true: "border-gray-6"
1063
- },
1064
- isFocused: {
1065
- true: `outline-black [outline-offset: 2px]`
1066
- }
1067
- }
1068
- });
1069
- const selectedMark = tailwindVariants.tv({
1070
- base: `hidden w-4 h-4 bg-gray-300 rounded-full`,
1071
- variants: {
1072
- selected: {
1073
- true: "block text-white"
1074
- }
1075
- }
1076
- });
1077
- const radioGroup = tailwindVariants.tv({
1078
- base: `block`,
1079
- variants: {
1080
- isDisabled: {
1081
- true: "opacity-60 pointer-events-none"
1082
- }
1083
- }
1084
- });
1085
- const radioGroupItemsGroup = tailwindVariants.tv({
1086
- base: `flex flex-col gap-4 py-8`
1087
- });
1088
- const searchInput = tailwindVariants.tv({
1089
- base: "p-4 w-full outline-0 search-cancel:appearance-none",
1090
- variants: {
1091
- isDisabled: {
1092
- true: "opacity-60 pointer-events-none"
1093
- }
1094
- }
1095
- });
1096
- const searchIcon = tailwindVariants.tv({
1097
- base: `
1098
- box-border
1099
- absolute
1100
- right-4
1101
- focus-ring-black
1102
- outline-0
1103
- `
1104
- });
1105
- const shareButtonContainer = tailwindVariants.tv({
1106
- base: "flex print:hidden relative",
1107
- defaultVariants: {
1108
- listDirection: "row"
1109
- },
1110
- variants: {
1111
- listDirection: {
1112
- row: "flex-row",
1113
- column: "flex-col"
1114
- }
1115
- }
1116
- });
1117
- const shareButton = tailwindVariants.tv({
1118
- base: "relative z-20 !bg-color-1-500 hover:!bg-color-1-400 w-16 h-16 flex justify-center items-center active:!bg-color-1-400 rounded-full text-white focus-ring-black",
1119
- variants: {
1120
- isOpen: {
1121
- true: "",
1122
- false: ""
1123
- }
1124
- }
1125
- });
1126
- const shareButtonLinksList = tailwindVariants.tv({
1127
- base: "!bg-color-1-200 absolute opacity-0 invisible flex transition duration-300 items-center p-0 bg-primary-1 z-0 rounded-b-full rounded-t-full",
1128
- defaultVariants: {
1129
- listDirection: "row"
1130
- },
1131
- variants: {
1132
- listDirection: {
1133
- row: "flex-row pl-14 h-16 left-0",
1134
- column: "flex-col [width:calc(100% + .5rem)] pt-14 w-16 top-0"
1135
- },
1136
- isOpen: {
1137
- true: "opacity-100 visible",
1138
- false: ""
1139
- }
1140
- }
1141
- });
1142
- const shareButtonLink = tailwindVariants.tv({
1143
- base: `
1144
- flex
1145
- items-center
1146
- justify-center
1147
- cursor-pointer
1148
- bg-color-1-200
1149
- hover:bg-color-1-300
1150
- w-full
1151
- text-color-1-500
1152
- rounded-none
1153
- p-2
1154
- focus-ring-black
1155
- z-10
1156
- has-focus-ring:z-20
1157
- `,
1158
- defaultVariants: {
1159
- listDirection: "row"
1160
- },
1161
- variants: {
1162
- listDirection: {
1163
- row: "last:rounded-r-full h-full",
1164
- column: "last:rounded-b-full"
1165
- }
1166
- }
1167
- });
1168
- const shareButtonIcon = tailwindVariants.tv({
1169
- base: "text-white"
1170
- });
1171
- const shareButtonLinkIcons = tailwindVariants.tv({
1172
- base: ""
1173
- });
1174
- const sidePanelWrapper = tailwindVariants.tv({
1175
- base: "m-auto fixed right-0 top-0 bottom-0 w-full max-w-[512px] [&>div]:h-full"
1176
- });
1177
- const sidePanelContainer = tailwindVariants.tv({ base: "h-full w-full flex justify-end" });
1178
- const sidePanelInnerContainer = tailwindVariants.tv({ base: "bg-gray-300 h-full w-full overflow-y-auto" });
1179
- const skipToMain = tailwindVariants.tv({
1180
- extend: button,
1181
- base: `
1182
- left-1/2
1183
- absolute
1184
- -translate-x-1/2
1185
- -translate-y-[300px]
1186
- transition-transform
1187
- focus:-translate-x-1/2
1188
- focus:translate-y-[75px]
1189
- `
1190
- });
1191
- const tabListWrapper = tailwindVariants.tv({
1192
- base: `
1193
- flex
1194
- flex-col
1195
- gap-4
1196
- `
1197
- });
1198
- const tabListContainer = tailwindVariants.tv({
1199
- base: `
1200
- flex
1201
- gap-4
1202
- `,
1203
- variants: {
1204
- orientation: {
1205
- horizontal: "flex-col",
1206
- vertical: "flex-row"
1207
- }
1208
- }
1209
- });
1210
- const tabListList = tailwindVariants.tv({
1211
- base: `
1212
- flex
1213
- flex-wrap
1214
- gap-4
1215
- `,
1216
- variants: {
1217
- orientation: {
1218
- horizontal: "flex-row items-center",
1219
- vertical: "flex-col items-end"
1220
- }
1221
- },
1222
- defaultVariants: {
1223
- orientation: "horizontal"
1224
- }
1225
- });
1226
- const tabListLabel = tailwindVariants.tv({
1227
- extend: typography,
1228
- defaultVariants: {
1229
- size: "h3"
1230
- }
1231
- });
1232
- const tabListTabPanelTransition = tailwindVariants.tv({
1233
- base: `
1234
- focus-ring-black
1235
- transition-all
1236
- duration-200
1237
- `
1238
- });
1239
- const tabListTabPanelContainer = tailwindVariants.tv({
1240
- base: `
1241
- mt-4
1242
- p-4
1243
- bg-color-1-100
1244
- rounded-md
1245
- focus-ring-black
1246
- transition-all
1247
- duration-200
1248
- `
1249
- });
1250
- const tabListTab = tailwindVariants.tv({
1251
- extend: typography,
1252
- base: `
1253
- focus-ring-black
1254
- transition-all
1255
- duration-200
1256
- px-4
1257
- py-2
1258
- `,
1259
- variants: {
1260
- orientation: {
1261
- horizontal: "border-b border-b-4",
1262
- vertical: "border-r border-r-4"
1263
- },
1264
- isSelected: {
1265
- true: `
1266
- border-color-1-500
1267
- hover:border-color-1-900
1268
- active:border-color-1-900
1269
- `,
1270
- false: `
1271
- border-color-1-200
1272
- hover:border-color-1-400
1273
- active:border-color-1-400
1274
- `
1275
- },
1276
- isDisabled: {
1277
- true: `
1278
- opacity-30
1279
- pointer-events-none
1280
- `
1281
- },
1282
- isFocusVisible: {
1283
- true: `has-focus-ring`
1284
- }
1285
- },
1286
- defaultVariants: {
1287
- size: "h6"
1288
- }
1289
- });
1290
- const tabListTheme = {
1291
- wrapper: tabListWrapper,
1292
- container: tabListContainer,
1293
- list: tabListList,
1294
- label: tabListLabel,
1295
- panel: {
1296
- transition: tabListTabPanelTransition,
1297
- container: tabListTabPanelContainer
1298
- },
1299
- tab: tabListTab
1300
- };
1301
- const tagGroupWrapper = tailwindVariants.tv({
1302
- base: `
1303
- flex
1304
- flex-col
1305
- gap-4
1306
- `
1307
- });
1308
- const tagGroupTags = tailwindVariants.tv({
1309
- base: `
1310
- w-full
1311
- flex
1312
- flex-wrap
1313
- gap-2
1314
- `
1315
- });
1316
- const tagGroupLabel = tailwindVariants.tv({
1317
- extend: typography,
1318
- defaultVariants: {
1319
- size: "h4"
1320
- }
1321
- });
1322
- const tagGroupDescription = tailwindVariants.tv({
1323
- extend: typography,
1324
- defaultVariants: {
1325
- size: "paragraph"
1326
- }
1327
- });
1328
- const tagGroupErrorMessage = tailwindVariants.tv({
1329
- extend: typography,
1330
- defaultVariants: {
1331
- size: "paragraph",
1332
- isError: true
1333
- }
1334
- });
1335
- const tagGroupTagWrapper = tailwindVariants.tv({
1336
- base: `
1337
- focus-visible:outline
1338
- focus-visible:outline-offset-2
1339
- focus-visible:outline-2
1340
- focus-visible:outline-black
1341
- cursor-pointer
1342
- transition-all
1343
- duration-200
1344
- `,
1345
- variants: {
1346
- isSelected: {
1347
- true: `bg-color-1-800 text-white`
1348
- },
1349
- isDisabled: {
1350
- true: `opacity-50 pointer-events-none`
1351
- },
1352
- isLink: {
1353
- true: `
1354
- border-b
1355
- border-color-1-300
1356
- px-2
1357
- py-0.5
1358
- mx-2
1359
- text-color-1-500
1360
- hover:text-color-1-700
1361
- hover:border-color-1-700
1362
- active:text-color-1-900
1363
- active:border-color-1-900
1364
- `,
1365
- false: `
1366
- p-2
1367
- bg-color-1-200
1368
- rounded-full
1369
- hover:bg-color-1-300
1370
- active:bg-color-1-400
1371
- active:text-white
1372
- `
1373
- }
1374
- },
1375
- defaultVariants: {
1376
- isLink: false
1377
- }
1378
- });
1379
- const tagGroupTagContainer = tailwindVariants.tv({
1380
- base: `
1381
- flex
1382
- items-center
1383
- gap-2
1384
- `
1385
- });
1386
- const tagGroupTagRemoveButton = tailwindVariants.tv({
1387
- base: `
1388
- aspect-square
1389
- rounded-full
1390
- bg-black/30
1391
- p-1
1392
- h-auto
1393
- w-8
1394
- `
1395
- });
1396
- const tagGroupTheme = {
1397
- wrapper: tagGroupWrapper,
1398
- tags: tagGroupTags,
1399
- label: tagGroupLabel,
1400
- description: tagGroupDescription,
1401
- errorMessage: tagGroupErrorMessage,
1402
- tag: {
1403
- wrapper: tagGroupTagWrapper,
1404
- container: tagGroupTagContainer,
1405
- removeButton: tagGroupTagRemoveButton
1406
- }
1407
- };
1408
- const textArea = tailwindVariants.tv({
1409
- base: `
1410
- w-full
1411
- min-h-32
1412
- rounded-2xl
1413
- px-6
1414
- h-12
1415
- border-2
1416
- border-solid
1417
- transition
1418
- duration-300
1419
- ease-in-out
1420
- text-gray-2
1421
- placeholder:text-gray-2
1422
- focus-ring-black
1423
-
1424
- `,
1425
- variants: {
1426
- isError: {
1427
- true: "border-red-500"
1428
- }
1429
- }
1430
- });
1431
- const textInputWrapper = tailwindVariants.tv({
1432
- base: `
1433
- relative
1434
- group
1435
- flex
1436
- items-center
1437
- gap-4
1438
- rounded-md
1439
- px-4
1440
- py-1
1441
- mb-3
1442
- m-0.5
1443
- border-2
1444
- aria-disabled:pointer-events-none
1445
- aria-disabled:opacity-30
1446
- focus-ring-black
1447
- `,
1448
- variants: {
1449
- isError: {
1450
- true: `border-error`
1451
- }
1452
- }
1453
- });
1454
- const textInputInputWrapper = tailwindVariants.tv({
1455
- base: `flex flex-col order-2`
1456
- });
1457
- const textInputContainer = tailwindVariants.tv({
1458
- base: `flex items-center gap-2`
1459
- });
1460
- const textInputLabel = tailwindVariants.tv({
1461
- base: `
1462
- group-has-[:required]:after:content-["_*"]
1463
- group-has-[:required]:after:text-red-500
1464
- text-xs
1465
- `
1466
- });
1467
- const textInputInput = tailwindVariants.tv({
1468
- base: ``
1469
- });
1470
- const textInputErrorMessage = tailwindVariants.tv({
1471
- extend: typography,
1472
- base: `ml-0`,
1473
- variants: {
1474
- isError: {
1475
- false: `hidden`
1476
- }
1477
- },
1478
- defaultVariants: {
1479
- isError: false,
1480
- size: "footnotes"
1481
- }
1482
- });
1483
- const textInputIcon = tailwindVariants.tv({
1484
- base: [typography(), `order-1`],
1485
- variants: {
1486
- isDisabled: {
1487
- true: `text-gray-300`
1488
- },
1489
- isError: {
1490
- true: `hidden`
1491
- }
1492
- }
1493
- });
1494
- const textInputErrorIcon = tailwindVariants.tv({
1495
- base: [typography({ isError: true }), `order-3`],
1496
- variants: {
1497
- isError: {
1498
- false: `hidden`
1499
- }
1500
- }
1501
- });
1502
- const textInputTheme = {
1503
- wrapper: textInputWrapper,
1504
- container: textInputContainer,
1505
- inputWrapper: textInputInputWrapper,
1506
- label: textInputLabel,
1507
- input: textInputInput,
1508
- errorMessage: textInputErrorMessage,
1509
- icon: textInputIcon,
1510
- errorIcon: textInputErrorIcon
1511
- };
1512
- const BaseTheme = makeTheme({
1513
- main: (props) => main(props),
1514
- gridItem: (props) => gridItem(props),
1515
- grid: (props) => grid(props),
1516
- container: (props) => container(props),
1517
- accordion: accordionTheme,
1518
- carousel: carouselTheme,
1519
- calendar: calendarTheme,
1520
- datePicker: datePickerTheme,
1521
- popover: popoverTheme,
1522
- typography: (props) => typography(props),
1523
- button: (props) => button(props),
1524
- link: button,
1525
- sidePanel: {
1526
- wrapper: (props) => sidePanelWrapper(props),
1527
- container: (props) => sidePanelContainer(props),
1528
- innerContainer: (props) => sidePanelInnerContainer(props)
1529
- },
1530
- comboBox: comboBoxTheme,
1531
- lightBox: lightboxTheme,
1532
- printButton: {
1533
- icon: (props) => printButtonIcon(props),
1534
- button: (props) => printButton(props)
1535
- },
1536
- shareButton: {
1537
- icon: (props) => shareButtonIcon(props),
1538
- button: (props) => shareButton(props),
1539
- container: (props) => shareButtonContainer(props),
1540
- linksList: (props) => shareButtonLinksList(props),
1541
- link: (props) => shareButtonLink(props),
1542
- linkIcons: (props) => shareButtonLinkIcons(props)
1543
- },
1544
- skipToMain: (props) => skipToMain(props),
1545
- checkbox: {
1546
- container: (props) => checkboxContainer(props),
1547
- label: (props) => checkboxLabel(props),
1548
- checkBox: (props) => checkBox(props),
1549
- checkMark: (props) => checkMark(props),
1550
- checkMarkIcon: (props) => checkMarkIcon(props),
1551
- errorMessage: (props) => typography(props)
1552
- },
1553
- radio: {
1554
- label: (props) => radioLabel(props),
1555
- radio: (props) => radio(props),
1556
- selectedMark: (props) => selectedMark(props),
1557
- errorMessage: (props) => typography(props)
1558
- },
1559
- radioGroup: {
1560
- radioGroup: (props) => radioGroup(props),
1561
- radioGroupItemsGroup: (props) => radioGroupItemsGroup(props),
1562
- errorMessage: (props) => typography(props)
1563
- },
1564
- checkboxGroup: {
1565
- checkboxGroup: (props) => checkboxGroup(props),
1566
- checkboxGroupItemsGroup: (props) => checkboxGroupItemsGroup(props),
1567
- errormessage: (props) => typography(props)
1568
- },
1569
- select: {
1570
- button: (props) => button(props),
1571
- ul: (props) => typography({
1572
- ...props,
1573
- className: "outline outline-2 outline-white outline-offset-2 p-2 my-4 rounded-md w-full flex flex-col gap-6"
1574
- }),
1575
- popover: (props) => button({ ...props, className: "w-[var(--select-container-width)]" }),
1576
- errorMessage: (props) => typography({ ...props, size: "footnotes", isError: true }),
1577
- wrapper: () => "flex flex-col gap-4 relative",
1578
- container: () => "flex flex-col gap-4",
1579
- list: () => "flex flex-col gap-4",
1580
- li: () => "transition w-full hover:text-gray-300 focus-ring-white",
1581
- headerText: () => "text-gray-300",
1582
- section: () => "flex flex-col gap-4"
1583
- },
1584
- textarea: {
1585
- wrapper: () => "flex flex-col",
1586
- container: () => "flex items-center gap-4",
1587
- label: () => "text-gray-3 px-6",
1588
- input: (props) => textArea(props),
1589
- errorMessage: (props) => typography({ ...props, size: "footnotes", isError: true })
1590
- },
1591
- textInput: textInputTheme,
1592
- search: {
1593
- wrapper: () => "min-w-fit sm:w-80 flex flex-col gap-2",
1594
- container: () => "relative flex items-center outline outline-2 outline-gray-300 focus-within:outline focus-within:outline-black focus-within:outline-2",
1595
- label: () => "text-gray-3",
1596
- input: (props) => searchInput(props),
1597
- icon: (props) => searchIcon(props),
1598
- errorMessage: (props) => typography({ ...props, size: "footnotes", isError: true })
1599
- },
1600
- menu: {
1601
- sidePanel: {
1602
- wrapper: () => ``,
1603
- container: () => "",
1604
- innerContainer: () => ""
1605
- },
1606
- wrapper: () => ""
1607
- },
1608
- menuItem: {
1609
- wrapper: () => ``,
1610
- container: () => ``,
1611
- innerContent: () => ``,
1612
- button: () => ``,
1613
- anchor: () => ``
1614
- },
1615
- img: imgTheme,
1616
- alerts: alertsTheme,
1617
- tagGroup: tagGroupTheme,
1618
- tabList: tabListTheme,
1619
- listBox: listBoxTheme
1620
- });
1621
- React.memo(createThemeProvider(BaseTheme));
1622
- const useThemeContext = (func, props = {}, customTheme = null) => {
1623
- const theme = useTheme();
1624
- if (theme != null && func != null) {
1625
- const { brandTheme } = theme;
1626
- const themeFunc = radashi.get(brandTheme, func);
1627
- if (typeof themeFunc === "function") {
1628
- const returnValue = themeFunc == null ? void 0 : themeFunc(props);
1629
- if (typeof returnValue === "string") {
1630
- return returnValue;
1631
- }
1632
- }
1633
- }
1634
- if (!customTheme) {
1635
- return void 0;
1636
- }
1637
- return customTheme;
1638
- };
1639
- const Typography = ({
1640
- as: Component = "span",
1641
- themeName = "typography",
1642
- tokens,
1643
- customTheme,
1644
- children,
1645
- ...rest
1646
- }) => {
1647
- const theme = useThemeContext(themeName, tokens, customTheme);
1648
- return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest, className: theme, children });
1649
- };
1650
- React.forwardRef((props, ref) => {
1651
- const { as: Component = "span", tokens, themeName = "typography", customTheme, children, ...rest } = props;
1652
- const theme = useThemeContext(themeName, tokens, customTheme);
1653
- return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest, ref, className: theme, children });
1654
- });
1655
- const [useAccordionCtx, AccordionProvider] = coreLib.createCtxNullable();
1656
- const Box = ({
1657
- as: Component = "div",
1658
- themeName = "box",
1659
- tokens,
1660
- customTheme,
1661
- children,
1662
- className,
1663
- ...rest
1664
- }) => {
1665
- const theme = useThemeContext(themeName, tokens, customTheme);
1666
- return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest, className: theme, children });
1667
- };
1668
- const BoxWithForwardRef = React.forwardRef((props, ref) => {
1669
- const { as: Component = "div", tokens, themeName = "box", customTheme, children, ...rest } = props;
1670
- const theme = useThemeContext(themeName, tokens, customTheme);
1671
- return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest, ref, className: theme, children });
1672
- });
1673
- const Anchor = React.forwardRef((props, forwardRef) => {
1674
- var _a;
1675
- const {
1676
- as: Component = "a",
1677
- handlePress,
1678
- children,
1679
- as,
1680
- customTheme,
1681
- tokens,
1682
- themeName = "button",
1683
- nextLinkProps: { onClick, ...nextLinkProps } = {},
1684
- ...rest
1685
- } = props;
1686
- const { onPress, onFocusChange, excludeFromTabOrder, preventFocusOnPress, ...anchorProps } = rest;
1687
- const ref = forwardRef;
1688
- const { linkProps } = reactAria.useLink(
1689
- {
1690
- ...props,
1691
- ...nextLinkProps,
1692
- onClick: ({ currentTarget, ...e }) => {
1693
- onClick == null ? void 0 : onClick({
1694
- ...e,
1695
- // @ts-expect-error Mismatch between react-aria and next/link. Happens since react-aria >3.36
1696
- currentTarget
1697
- });
1698
- },
1699
- href: props.href ?? ((_a = nextLinkProps == null ? void 0 : nextLinkProps.href) == null ? void 0 : _a.toString()),
1700
- elementType: as == null ? void 0 : as.toString(),
1701
- onPress: handlePress
1702
- },
1703
- forwardRef ?? ref
1704
- );
1705
- const theme = useThemeContext(themeName, tokens, customTheme);
1706
- return /* @__PURE__ */ jsxRuntime.jsx(reactAria.FocusRing, { focusRingClass: "has-focus-ring", children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, ...linkProps, ...nextLinkProps, ...anchorProps, className: theme, children }) });
1707
- });
1708
- const Button = React.forwardRef((props, forwardRef) => {
1709
- const {
1710
- as: Component = "button",
1711
- handlePress,
1712
- children,
1713
- as,
1714
- customTheme,
1715
- tokens,
1716
- themeName = "button",
1717
- isDisabled = false,
1718
- ...rest
1719
- } = props;
1720
- const ref = forwardRef;
1721
- const { buttonProps } = reactAria.useButton(
1722
- { ...props, isDisabled, elementType: as, onPress: handlePress },
1723
- forwardRef ?? ref
1724
- );
1725
- const theme = useThemeContext(themeName, tokens, customTheme);
1726
- const { onPress, onFocusChange, excludeFromTabOrder, preventFocusOnPress, ...allProps } = rest;
1727
- return /* @__PURE__ */ jsxRuntime.jsx(reactAria.FocusRing, { within: true, focusRingClass: "has-focus-ring", children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, ...buttonProps, ...allProps, className: theme, children }) });
1728
- });
1729
- const ButtonWithForwardRef = React.forwardRef(
1730
- (props, ref) => {
1731
- const { as } = props;
1732
- if (as === "a") return /* @__PURE__ */ jsxRuntime.jsx(Anchor, { ref, ...props });
1733
- return /* @__PURE__ */ jsxRuntime.jsx(Button, { ref, ...props });
1734
- }
1735
- );
1736
- const ButtonComponent = (props) => {
1737
- const { as } = props;
1738
- const ref = React.useRef(null);
1739
- if (as === "a") return /* @__PURE__ */ jsxRuntime.jsx(Anchor, { ref, ...props });
1740
- return /* @__PURE__ */ jsxRuntime.jsx(Button, { ref, ...props });
1741
- };
1742
- ButtonComponent.displayName = "Button";
1743
- const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
1744
- const v = glob[path];
1745
- if (v) {
1746
- return typeof v === "function" ? v() : Promise.resolve(v);
1747
- }
1748
- return new Promise((_, reject) => {
1749
- (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
1750
- reject.bind(
1751
- null,
1752
- new Error(
1753
- "Unknown variable dynamic import: " + path + (path.split("/").length !== segs ? ". Note that variables only represent file names one level deep." : "")
1754
- )
1755
- )
1756
- );
1757
- });
1758
- };
1759
- const SvgComponent$q = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: 48, width: 48, fill: "currentColor", ...props });
1760
- const Fallback = React.memo(SvgComponent$q);
1761
- const IconFallback = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
1762
- __proto__: null,
1763
- default: Fallback
1764
- }, Symbol.toStringTag, { value: "Module" }));
1765
- const Icon = (props) => {
1766
- const { icon, ...rest } = props;
1767
- const ImportedIcon = React.useMemo(() => React.lazy(() => __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../icons/ArrowDown.tsx": () => Promise.resolve().then(() => ArrowDown$1), "../icons/ArrowLeft.tsx": () => Promise.resolve().then(() => ArrowLeft$1), "../icons/ArrowRight.tsx": () => Promise.resolve().then(() => ArrowRight$1), "../icons/Check.tsx": () => Promise.resolve().then(() => Check$1), "../icons/ChevronLeft.tsx": () => Promise.resolve().then(() => ChevronLeft$1), "../icons/ChevronRight.tsx": () => Promise.resolve().then(() => ChevronRight$1), "../icons/CloseBtn.tsx": () => Promise.resolve().then(() => CloseBtn$1), "../icons/ErrorIcon.tsx": () => Promise.resolve().then(() => require("./ErrorIcon-Vnk7YKtL.js")), "../icons/Facebook.tsx": () => Promise.resolve().then(() => Facebook$1), "../icons/FacebookColored.tsx": () => Promise.resolve().then(() => FacebookColored$1), "../icons/FacebookRounded.tsx": () => Promise.resolve().then(() => FacebookRounded$1), "../icons/Globe.tsx": () => Promise.resolve().then(() => Globe$1), "../icons/IconFallback.tsx": () => Promise.resolve().then(() => IconFallback), "../icons/Instagram.tsx": () => Promise.resolve().then(() => Instagram$1), "../icons/InstagramColored.tsx": () => Promise.resolve().then(() => InstagramColored$1), "../icons/Link.tsx": () => Promise.resolve().then(() => Link$1), "../icons/LinkedIn.tsx": () => Promise.resolve().then(() => LinkedIn$1), "../icons/Mail.tsx": () => Promise.resolve().then(() => Mail$1), "../icons/Plus.tsx": () => Promise.resolve().then(() => Plus$1), "../icons/Print.tsx": () => Promise.resolve().then(() => Print$1), "../icons/Search.tsx": () => Promise.resolve().then(() => Search$1), "../icons/Share.tsx": () => Promise.resolve().then(() => Share$1), "../icons/Twitter.tsx": () => Promise.resolve().then(() => Twitter$1), "../icons/TwitterColored.tsx": () => Promise.resolve().then(() => TwitterColored$1), "../icons/Upload.tsx": () => Promise.resolve().then(() => Upload$1), "../icons/X.tsx": () => Promise.resolve().then(() => X$1), "../icons/YouTube.tsx": () => Promise.resolve().then(() => YouTube$1), "../icons/YouTubeColored.tsx": () => Promise.resolve().then(() => YouTubeColored$1) }), `../icons/${icon || "ArrowRight"}.tsx`, 3)), [icon]);
1768
- return /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(Fallback, { className: "overflow-visible pointer-events-none" }), children: /* @__PURE__ */ jsxRuntime.jsx(ImportedIcon, { ...rest, className: "overflow-visible pointer-events-none", ...props }) });
1769
- };
1770
- const IconDispatcher = (props) => {
1771
- const { icon, as: Component = "span", tokens, customTheme, themeName = "icon", children, ...rest } = props;
1772
- const theme = useThemeContext(themeName, tokens, customTheme);
1773
- if (typeof icon !== "string") {
1774
- return /* @__PURE__ */ jsxRuntime.jsxs(Component, { ...rest, className: theme, children: [
1775
- children,
1776
- icon
1777
- ] });
1778
- }
1779
- return /* @__PURE__ */ jsxRuntime.jsxs(Component, { className: theme, children: [
1780
- children,
1781
- /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, ...rest })
1782
- ] });
1783
- };
1784
- const [useSidePanel, SidePanelProvider] = coreLib.createCtx();
1785
- const [useCarousel, CarouselProvider] = coreLib.createCtxNullable();
1786
- const LegacyCarouselNavigationButton = React.forwardRef(
1787
- (props, ref) => {
1788
- const { themeName, tokens, customTheme, children, onSubmit, ...rest } = props;
1789
- const { isDisabled } = rest;
1790
- const { pressProps } = reactAria.usePress({
1791
- onPress: () => onSubmit == null ? void 0 : onSubmit()
1792
- });
1793
- return /* @__PURE__ */ jsxRuntime.jsx(reactAria.FocusRing, { within: true, focusRingClass: "has-focus-ring", children: /* @__PURE__ */ jsxRuntime.jsx(
1794
- ButtonWithForwardRef,
1795
- {
1796
- themeName,
1797
- tokens,
1798
- ref,
1799
- ...pressProps,
1800
- ...rest,
1801
- ...{ "aria-disabled": isDisabled },
1802
- children
1803
- }
1804
- ) });
1805
- }
1806
- );
1807
- const LegacyCarouselNextNavigationButton = React.forwardRef(
1808
- (props, ref) => {
1809
- const { children, ...rest } = props;
1810
- const { controller } = useCarousel();
1811
- const { params, activeIndex = 1, slides } = controller ?? {};
1812
- const { slidesPerView = 1, loop } = params ?? {};
1813
- const slidesGroupIndex = Math.round(
1814
- typeof slidesPerView === "number" ? (activeIndex + 1) / slidesPerView : activeIndex
1815
- );
1816
- const slidesGroupLength = Math.round(
1817
- slides && typeof slidesPerView === "number" ? slides.length / slidesPerView : (slides == null ? void 0 : slides.length) ?? 1
1818
- );
1819
- const allowNavigateNext = slidesGroupIndex < slidesGroupLength;
1820
- const disabled = !loop && !allowNavigateNext;
1821
- return /* @__PURE__ */ jsxRuntime.jsx(
1822
- LegacyCarouselNavigationButton,
1823
- {
1824
- onSubmit: () => controller == null ? void 0 : controller.slideNext(),
1825
- ...rest,
1826
- ref,
1827
- isDisabled: disabled,
1828
- children: children || /* @__PURE__ */ jsxRuntime.jsx(IconDispatcher, { icon: "ArrowRight" })
1829
- }
1830
- );
1831
- }
1832
- );
1833
- const LegacyCarouselPrevNavigationButton = React.forwardRef(
1834
- (props, ref) => {
1835
- const { children, ...rest } = props;
1836
- const { controller } = useCarousel();
1837
- const { params, activeIndex = 1 } = controller ?? {};
1838
- const { loop } = params ?? {};
1839
- const allowNavigatePrev = activeIndex !== 0;
1840
- const disabled = !loop && !allowNavigatePrev;
1841
- return /* @__PURE__ */ jsxRuntime.jsx(
1842
- LegacyCarouselNavigationButton,
1843
- {
1844
- onSubmit: () => controller == null ? void 0 : controller.slidePrev(),
1845
- ...rest,
1846
- ref,
1847
- isDisabled: disabled,
1848
- children: children || /* @__PURE__ */ jsxRuntime.jsx(IconDispatcher, { icon: "ArrowLeft" })
1849
- }
1850
- );
1851
- }
1852
- );
1853
- LegacyCarouselNavigationButton.displayName = "LegacyCarouselNavigationButton";
1854
- LegacyCarouselNextNavigationButton.displayName = "LegacyCarouselNextNavigationButton";
1855
- LegacyCarouselPrevNavigationButton.displayName = "LegacyCarouselPrevNavigationButton";
1856
- const logger = logger$1.createLogger("[StackUI]");
1857
- const { log } = logger;
1858
- const [useTranslation, TranslationProvider] = coreLib.createCtx();
1859
- const [useUserQueryValHook, SearchProvider] = coreLib.createCtx();
1860
- const SvgComponent$p = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 24, height: 24, fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6 6 18M6 6l12 12" }) });
1861
- const CloseBtn = React.memo(SvgComponent$p, radashi.isEqual);
1862
- const CloseBtn$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
1863
- __proto__: null,
1864
- default: CloseBtn
1865
- }, Symbol.toStringTag, { value: "Module" }));
1866
- const SvgComponent$o = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: 20, height: 20, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 20 20", ...props, children: [
1867
- /* @__PURE__ */ jsxRuntime.jsxs("g", { stroke: "currentColor", clipPath: "url(#a)", children: [
1868
- /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8.2727", cy: "8.2727", r: "7.2727" }),
1869
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.4551 13.4531L19.5005 19.4986" })
1870
- ] }),
1871
- /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "currentColor", d: "M0 0h14v14H0z" }) }) })
1872
- ] });
1873
- const Search = React.memo(SvgComponent$o, radashi.isEqual);
1874
- const Search$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
1875
- __proto__: null,
1876
- default: Search
1877
- }, Symbol.toStringTag, { value: "Module" }));
1878
- React.createContext(null);
1879
- const Wrapper = React.forwardRef((props, ref) => {
1880
- const {
1881
- themeName = "datePicker",
1882
- tokens,
1883
- groupProps,
1884
- buttonProps,
1885
- buttonLabel,
1886
- buttonContent,
1887
- icon,
1888
- children
1889
- } = props;
1890
- return /* @__PURE__ */ jsxRuntime.jsxs(BoxWithForwardRef, { themeName: `${themeName}.wrapper`, tokens, ...groupProps, ref, children: [
1891
- buttonLabel && /* @__PURE__ */ jsxRuntime.jsx(Typography, { themeName: `${themeName}.buttonLabel`, tokens, children: buttonLabel }),
1892
- /* @__PURE__ */ jsxRuntime.jsx(Box, { themeName: `${themeName}.dateFieldContainer`, tokens, children }),
1893
- /* @__PURE__ */ jsxRuntime.jsxs(
1894
- ButtonComponent,
1895
- {
1896
- themeName: `${themeName}.button`,
1897
- tokens,
1898
- type: "button",
1899
- ...buttonProps,
1900
- handlePress: buttonProps.onPress,
1901
- children: [
1902
- buttonContent && /* @__PURE__ */ jsxRuntime.jsx(Typography, { themeName: `${themeName}.buttonContent`, tokens, children: buttonContent }),
1903
- /* @__PURE__ */ jsxRuntime.jsx(IconDispatcher, { themeName: `${themeName}.icon`, tokens, icon: icon ?? "ArrowDown" })
1904
- ]
1905
- }
1906
- )
1907
- ] });
1908
- });
1909
- Wrapper.displayName = "Wrapper";
1910
- React.createContext(null);
1911
- const [useMenu, MenuProvider] = coreLib.createCtxNullable();
1912
- const AlertsCloseButton = React.forwardRef((props, ref) => {
1913
- const { themeName = "alerts.closeBtn", ...rest } = props;
1914
- return /* @__PURE__ */ jsxRuntime.jsx(ButtonWithForwardRef, { ref, themeName, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(IconDispatcher, { icon: /* @__PURE__ */ jsxRuntime.jsx(CloseBtn, {}) }) });
1915
- });
1916
- AlertsCloseButton.displayName = "AlertsCloseButton";
1917
- function mergeDefaultComponentProps(firstArg, ...args) {
1918
- const allArgs = [firstArg, ...args];
1919
- const mergedTokens = allArgs.reduce(
1920
- (acc, curr) => curr && "tokens" in curr ? Object.assign(acc, curr == null ? void 0 : curr.tokens) : acc,
1921
- {}
1922
- );
1923
- const mergedCustomThemes = allArgs.map((arg) => arg && "customTheme" in arg ? arg == null ? void 0 : arg.customTheme : void 0).filter((theme) => !radashi.isEmpty(theme)).join(" ");
1924
- const mergedArgs = reactAria.mergeProps(...allArgs.filter((arg) => arg !== null));
1925
- return { ...mergedArgs, tokens: mergedTokens, customTheme: mergedCustomThemes };
1926
- }
1927
- const Option = ({
1928
- item,
1929
- state,
1930
- ...props
1931
- }) => {
1932
- const { key, rendered, type } = item;
1933
- const {
1934
- themeName = "option",
1935
- tokens,
1936
- as = "li",
1937
- customTheme,
1938
- linkElementType: LinkElement = Anchor,
1939
- ...rest
1940
- } = mergeDefaultComponentProps(props, item.props);
1941
- const ref = React.useRef(null);
1942
- const {
1943
- optionProps,
1944
- isFocused,
1945
- isDisabled,
1946
- isFocusVisible,
1947
- isPressed,
1948
- isSelected,
1949
- allowsSelection,
1950
- descriptionProps,
1951
- labelProps,
1952
- hasAction
1953
- } = reactAria.useOption({ key }, state, ref);
1954
- const isLink = state.selectionManager.isLink(key);
1955
- const isSelectable = state.selectionManager.canSelectItem(key);
1956
- const optionTokens = {
1957
- ...tokens,
1958
- type,
1959
- isFocused,
1960
- isDisabled,
1961
- isFocusVisible,
1962
- isPressed,
1963
- isSelected,
1964
- allowsSelection,
1965
- hasAction,
1966
- isLink,
1967
- isSelectable
1968
- };
1969
- const Component = isLink ? LinkElement : BoxWithForwardRef;
1970
- const elementType = isLink ? "a" : as;
1971
- const renderChildren = () => {
1972
- if (React.Children.count(rendered) > 1) {
1973
- const [label, description] = React.Children.toArray(rendered);
1974
- const isLabelValid = React.isValidElement(label);
1975
- const isDescriptionValid = React.isValidElement(description);
1976
- if (!isLabelValid && !isDescriptionValid) {
1977
- return rendered;
1978
- }
1979
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1980
- isLabelValid && /* @__PURE__ */ jsxRuntime.jsx(Box, { themeName: `${themeName}.label`, tokens: optionTokens, children: React.cloneElement(label, labelProps) }),
1981
- isDescriptionValid && /* @__PURE__ */ jsxRuntime.jsx(Box, { themeName: `${themeName}.description`, tokens: optionTokens, children: React.cloneElement(description, descriptionProps) })
1982
- ] });
1983
- }
1984
- return rendered;
1985
- };
1986
- return /* @__PURE__ */ jsxRuntime.jsx(reactAria.FocusRing, { focusRingClass: "has-focus-ring", children: /* @__PURE__ */ jsxRuntime.jsx(
1987
- Component,
1988
- {
1989
- as: elementType,
1990
- ...reactAria.mergeProps(rest, optionProps),
1991
- ref,
1992
- themeName: `${themeName}.option`,
1993
- tokens: optionTokens,
1994
- customTheme,
1995
- children: renderChildren()
1996
- }
1997
- ) });
1998
- };
1999
- const ListBoxSection = ({
2000
- section,
2001
- state,
2002
- ...props
2003
- }) => {
2004
- var _a, _b;
2005
- const { key, rendered, props: sectionProps, level, hasChildNodes, type } = section;
2006
- const {
2007
- themeName = "listBox.section",
2008
- tokens,
2009
- as = "li",
2010
- customTheme,
2011
- ...rest
2012
- } = mergeDefaultComponentProps(props, sectionProps);
2013
- const sectionTokens = {
2014
- ...tokens,
2015
- type,
2016
- level: level.toString(),
2017
- hasChildNodes
2018
- };
2019
- const { itemProps, headingProps, groupProps } = reactAria.useListBoxSection(props);
2020
- return /* @__PURE__ */ jsxRuntime.jsxs(
2021
- Box,
2022
- {
2023
- as,
2024
- themeName: `${themeName}.wrapper`,
2025
- tokens: sectionTokens,
2026
- ...reactAria.mergeProps(utils.filterDOMProps(rest), itemProps),
2027
- customTheme,
2028
- children: [
2029
- rendered && /* @__PURE__ */ jsxRuntime.jsx(Typography, { themeName: `${themeName}.heading`, tokens, ...headingProps, children: rendered }),
2030
- /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "ul", themeName: `${themeName}.group`, tokens: sectionTokens, ...groupProps, children: [...((_b = (_a = state.collection).getChildren) == null ? void 0 : _b.call(_a, key)) ?? []].map((item) => /* @__PURE__ */ jsxRuntime.jsx(Option, { item, state, tokens, themeName: `${themeName}.item` }, item.key)) })
2031
- ]
2032
- }
2033
- );
2034
- };
2035
- const itemComponents = {
2036
- item: Option,
2037
- section: ListBoxSection
2038
- };
2039
- const ControlledListBox = React.forwardRef(
2040
- (props, listBoxRef) => {
2041
- const {
2042
- themeName = "listBox",
2043
- tokens,
2044
- customTheme,
2045
- label,
2046
- escapeKeyBehavior = "clearSelection",
2047
- linkElementType = Anchor,
2048
- isDisabled = false,
2049
- isRequired = false,
2050
- isInvalid = false,
2051
- isError = false,
2052
- errorMessage,
2053
- disabledKeys,
2054
- fieldRef,
2055
- ...rest
2056
- } = props;
2057
- const state = reactStately.useListState(props);
2058
- const keys = state.collection.getKeys();
2059
- const mergeRefs = (newRef) => {
2060
- if (newRef) {
2061
- fieldRef == null ? void 0 : fieldRef(newRef);
2062
- if (!listBoxRef) return;
2063
- if (typeof listBoxRef === "function") {
2064
- listBoxRef(newRef);
2065
- } else {
2066
- listBoxRef.current = newRef;
2067
- }
2068
- }
2069
- };
2070
- const { listBoxProps, labelProps } = reactAria.useListBox(
2071
- {
2072
- ...rest,
2073
- escapeKeyBehavior,
2074
- label,
2075
- disabledKeys: isDisabled ? keys : disabledKeys
2076
- },
2077
- state,
2078
- mergeRefs
2079
- );
2080
- const listBoxTokens = {
2081
- ...tokens,
2082
- isDisabled,
2083
- isRequired,
2084
- isInvalid,
2085
- isError
2086
- };
2087
- return /* @__PURE__ */ jsxRuntime.jsxs(Box, { themeName: `${themeName}.wrapper`, tokens: listBoxTokens, customTheme, children: [
2088
- label && /* @__PURE__ */ jsxRuntime.jsx(Typography, { ...labelProps, themeName: `${themeName}.label`, tokens: listBoxTokens, children: label }),
2089
- /* @__PURE__ */ jsxRuntime.jsx(
2090
- BoxWithForwardRef,
2091
- {
2092
- ref: listBoxRef,
2093
- as: "ul",
2094
- ...listBoxProps,
2095
- themeName: `${themeName}.list`,
2096
- tokens: listBoxTokens,
2097
- children: [...state.collection].map((item) => {
2098
- const { key } = item;
2099
- const type = item.type ?? "item";
2100
- const Component = itemComponents[type];
2101
- return /* @__PURE__ */ jsxRuntime.jsx(
2102
- Component,
2103
- {
2104
- ...{ [type]: item },
2105
- state,
2106
- tokens: { ...tokens, type },
2107
- themeName: `${themeName}.${type}`,
2108
- linkElementType
2109
- },
2110
- key
2111
- );
2112
- })
2113
- }
2114
- ),
2115
- isError && errorMessage && /* @__PURE__ */ jsxRuntime.jsx(Typography, { themeName: `${themeName}.errorMessage`, tokens: listBoxTokens, children: errorMessage })
2116
- ] });
2117
- }
2118
- );
2119
- ControlledListBox.displayName = "ControlledListBox";
2120
- const ControlledReactHookFormListBox = React.forwardRef((props, listBoxRef) => {
2121
- const { name, rules, isRequired, isDisabled, tokens, selectionMode = "single", errorMessage, ...rest } = props;
2122
- const { control, setValue, watch, getValues } = reactHookForm.useFormContext();
2123
- const { selectedKeys = watch(name), defaultSelectedKeys = getValues(name) } = rest;
2124
- const { t } = useTranslation();
2125
- const mergedRules = {
2126
- required: isRequired ? t("FORM.ERROR.REQUIRED") ?? "required" : false,
2127
- disabled: isDisabled,
2128
- ...rules
2129
- };
2130
- return /* @__PURE__ */ jsxRuntime.jsx(
2131
- reactHookForm.Controller,
2132
- {
2133
- ...rest,
2134
- defaultValue: defaultSelectedKeys,
2135
- name,
2136
- control,
2137
- rules: mergedRules,
2138
- disabled: mergedRules == null ? void 0 : mergedRules.disabled,
2139
- render: ({ field, fieldState }) => {
2140
- var _a;
2141
- const { ref, ...fieldProps } = field;
2142
- const isError = !radashi.isEmpty(fieldState.error);
2143
- const validityField = {
2144
- isDisabled: field.disabled ?? false,
2145
- isRequired: (mergedRules == null ? void 0 : mergedRules.required) === true || (mergedRules == null ? void 0 : mergedRules.required) === "required",
2146
- isInvalid: fieldState.invalid,
2147
- isError
2148
- };
2149
- const validityTokens = {
2150
- ...tokens,
2151
- ...validityField
2152
- };
2153
- return /* @__PURE__ */ jsxRuntime.jsx(
2154
- ControlledListBox,
2155
- {
2156
- ...utils.mergeProps(rest, fieldProps, validityField, {
2157
- onSelectionChange: (keys) => {
2158
- setValue(name, keys);
2159
- }
2160
- }),
2161
- tokens: validityTokens,
2162
- selectionMode,
2163
- selectedKeys,
2164
- defaultSelectedKeys,
2165
- errorMessage: errorMessage ?? ((_a = fieldState.error) == null ? void 0 : _a.message),
2166
- ref: listBoxRef
2167
- }
2168
- );
2169
- }
2170
- }
2171
- );
2172
- });
2173
- ControlledReactHookFormListBox.displayName = "ControlledReactHookFormListBox";
2174
- const SvgComponent$n = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 24, height: 24, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17.728 13.66 12.388 19 7.05 13.66M12.4 5v14", stroke: "currentColor" }) });
2175
- const ArrowDown = React.memo(SvgComponent$n, radashi.isEqual);
2176
- const ArrowDown$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2177
- __proto__: null,
2178
- default: ArrowDown
2179
- }, Symbol.toStringTag, { value: "Module" }));
2180
- const ComboBoxButton = React.forwardRef((props, ref) => {
2181
- const { state, handlePress: handlePressProp, ...rest } = props;
2182
- const handlePress = React.useCallback(
2183
- (e) => {
2184
- state.setInputValue("");
2185
- state.selectionManager.clearSelection();
2186
- handlePressProp == null ? void 0 : handlePressProp(e);
2187
- },
2188
- [handlePressProp, state]
2189
- );
2190
- return /* @__PURE__ */ jsxRuntime.jsx(ButtonWithForwardRef, { ...rest, ref, handlePress });
2191
- });
2192
- ComboBoxButton.displayName = "ComboBoxButton";
2193
- const SvgComponent$m = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: 24, height: 24, fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...props, children: [
2194
- /* @__PURE__ */ jsxRuntime.jsx("g", { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M.075 11.622a1 1 0 0 0 0 .76 1 1 0 0 0 .21.33l8 8a1.004 1.004 0 0 0 1.42-1.42l-6.3-6.29h19.59a1 1 0 0 0 0-2H3.405l6.3-6.29a1 1 0 0 0 0-1.42 1 1 0 0 0-1.42 0l-8 8a1 1 0 0 0-.21.33Z" }) }),
2195
- /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "currentColor", d: "M0 0h24v24H0z" }) }) })
2196
- ] });
2197
- const ArrowLeft = React.memo(SvgComponent$m, radashi.isEqual);
2198
- const ArrowLeft$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2199
- __proto__: null,
2200
- default: ArrowLeft
2201
- }, Symbol.toStringTag, { value: "Module" }));
2202
- const SvgComponent$l = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: 24, height: 24, fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...props, children: [
2203
- /* @__PURE__ */ jsxRuntime.jsx("g", { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M23.92 12.38a1 1 0 0 0 0-.76 1 1 0 0 0-.21-.33l-8-8a1.003 1.003 0 1 0-1.42 1.42l6.3 6.29H1a1 1 0 1 0 0 2h19.59l-6.3 6.29a1 1 0 0 0 0 1.42 1.002 1.002 0 0 0 1.42 0l8-8c.091-.095.162-.207.21-.33Z" }) }),
2204
- /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "currentColor", d: "M0 0h24v24H0z" }) }) })
2205
- ] });
2206
- const ArrowRight = React.memo(SvgComponent$l, radashi.isEqual);
2207
- const ArrowRight$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2208
- __proto__: null,
2209
- default: ArrowRight
2210
- }, Symbol.toStringTag, { value: "Module" }));
2211
- const SvgComponent$k = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: 48, width: 48, fill: "currentColor", viewBox: "0 0 48 48", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21.05 33.1 35.2 18.95l-2.3-2.25-11.85 11.85-6-6-2.25 2.25ZM24 44q-4.1 0-7.75-1.575-3.65-1.575-6.375-4.3-2.725-2.725-4.3-6.375Q4 28.1 4 24q0-4.15 1.575-7.8 1.575-3.65 4.3-6.35 2.725-2.7 6.375-4.275Q19.9 4 24 4q4.15 0 7.8 1.575 3.65 1.575 6.35 4.275 2.7 2.7 4.275 6.35Q44 19.85 44 24q0 4.1-1.575 7.75-1.575 3.65-4.275 6.375t-6.35 4.3Q28.15 44 24 44Z" }) });
2212
- const Check = React.memo(SvgComponent$k, radashi.isEqual);
2213
- const Check$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2214
- __proto__: null,
2215
- default: Check
2216
- }, Symbol.toStringTag, { value: "Module" }));
2217
- const SvgComponent$j = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "48", width: "48", fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M28.05 36 16 23.95 28.05 11.9l2.15 2.15-9.9 9.9 9.9 9.9Z" }) });
2218
- const ChevronLeft = React.memo(SvgComponent$j, radashi.isEqual);
2219
- const ChevronLeft$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2220
- __proto__: null,
2221
- default: ChevronLeft
2222
- }, Symbol.toStringTag, { value: "Module" }));
2223
- const SvgComponent$i = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "48", width: "48", fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m18.75 36-2.15-2.15 9.9-9.9-9.9-9.9 2.15-2.15L30.8 23.95Z" }) });
2224
- const ChevronRight = React.memo(SvgComponent$i, radashi.isEqual);
2225
- const ChevronRight$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2226
- __proto__: null,
2227
- default: ChevronRight
2228
- }, Symbol.toStringTag, { value: "Module" }));
2229
- const SvgComponent$h = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 24, height: 24, fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
2230
- "path",
2231
- {
2232
- d: "M9.161 5.889v2.753H7V12h2.161v10h4.442V12h2.977s.28-1.614.417-3.38h-3.379V6.316a.963.963 0 0 1 .332-.558c.174-.146.396-.233.63-.248H17V2h-3.275C9.063 2 9.173 5.37 9.173 5.889h-.012Z",
2233
- fill: "currentColor"
2234
- }
2235
- ) });
2236
- const Facebook = React.memo(SvgComponent$h, radashi.isEqual);
2237
- const Facebook$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2238
- __proto__: null,
2239
- default: Facebook
2240
- }, Symbol.toStringTag, { value: "Module" }));
2241
- const SvgComponent$g = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 24, height: 24, xmlns: "http://www.w3.org/2000/svg", xmlSpace: "preserve", viewBox: "0 0 256 256", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
2242
- "path",
2243
- {
2244
- fill: "#3b5998",
2245
- strokeMiterlimit: "10",
2246
- strokeWidth: "0",
2247
- d: "M147.5 254.3V139.1h38.7l6-45h-44.7V65.2c0-13 3.6-21.9 22.3-21.9h23.7V3.2c-11.6-1.2-23.1-1.8-34.7-1.8-34.3 0-57.8 20.9-57.8 59.4V94H62.2v45.1H101v115.2h46.5z"
2248
- }
2249
- ) });
2250
- const FacebookColored = React.memo(SvgComponent$g, radashi.isEqual);
2251
- const FacebookColored$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2252
- __proto__: null,
2253
- default: FacebookColored
2254
- }, Symbol.toStringTag, { value: "Module" }));
2255
- const SvgComponent$f = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 25, viewBox: "0 0 24 25", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
2256
- "path",
2257
- {
2258
- fillRule: "evenodd",
2259
- clipRule: "evenodd",
2260
- d: "M2 12.5001C2 17.4501 5.6 21.5501 10.35 22.4001L10.4094 22.3515C10.4063 22.3509 10.4032 22.3503 10.4001 22.3498V15.2998H7.90015V12.4998H10.4001V10.2998C10.4001 7.79978 12.0001 6.39978 14.3001 6.39978C15.0001 6.39978 15.8001 6.49978 16.5001 6.59978V9.14978H15.2001C14.0001 9.14978 13.7001 9.74978 13.7001 10.5498V12.4998H16.3501L15.9001 15.2998H13.7001V22.3498C13.6696 22.3553 13.639 22.3608 13.6084 22.366L13.65 22.4001C18.4 21.5501 22 17.4501 22 12.5001C22 7.00006 17.5 2.50006 12 2.50006C6.5 2.50006 2 7.00006 2 12.5001Z",
2261
- fill: "currentColor"
2262
- }
2263
- ) });
2264
- const FacebookRounded = React.memo(SvgComponent$f, radashi.isEqual);
2265
- const FacebookRounded$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2266
- __proto__: null,
2267
- default: FacebookRounded
2268
- }, Symbol.toStringTag, { value: "Module" }));
2269
- const SvgComponent$e = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "40", height: "40", viewBox: "0 0 67 67", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
2270
- /* @__PURE__ */ jsxRuntime.jsx(
2271
- "path",
2272
- {
2273
- d: "M16.1339 8.5415C18.1397 10.0645 19.8152 11.9792 21.0587 14.1693C22.2848 16.2537 25.064 22.0491 22.5341 25.3227C19.6732 29.0215 11.3848 30.2721 11.3848 33.6807C11.3848 36.2473 15.0181 39.1736 16.9594 42.0386C18.0736 43.6842 18.6691 45.626 18.6691 47.6133C18.6691 49.6006 18.0736 51.5423 16.9594 53.1879C16.0541 54.6088 14.817 55.7884 13.3547 56.6251",
2274
- stroke: "currentColor",
2275
- strokeWidth: "5",
2276
- strokeLinecap: "round",
2277
- strokeLinejoin: "round"
2278
- }
2279
- ),
2280
- /* @__PURE__ */ jsxRuntime.jsx(
2281
- "path",
2282
- {
2283
- d: "M57.8289 14.8058C52.7905 17.106 47.4837 18.766 42.0327 19.747C39.1227 19.9555 38.6895 17.5605 36.4621 14.1724C34.7905 11.6302 30.8874 8.45055 30.8874 5.81443C30.8648 4.90303 30.9876 3.99386 31.2511 3.12109",
2284
- stroke: "currentColor",
2285
- strokeWidth: "5",
2286
- strokeLinecap: "round",
2287
- strokeLinejoin: "round"
2288
- }
2289
- ),
2290
- /* @__PURE__ */ jsxRuntime.jsx(
2291
- "path",
2292
- {
2293
- d: "M33.6799 64.3334C50.6088 64.3334 64.3324 50.6098 64.3324 33.6809C64.3324 16.7519 50.6088 3.02832 33.6799 3.02832C16.751 3.02832 3.02734 16.7519 3.02734 33.6809C3.02734 50.6098 16.751 64.3334 33.6799 64.3334Z",
2294
- stroke: "currentColor",
2295
- strokeWidth: "5",
2296
- strokeLinecap: "round",
2297
- strokeLinejoin: "round"
2298
- }
2299
- ),
2300
- /* @__PURE__ */ jsxRuntime.jsx(
2301
- "path",
2302
- {
2303
- d: "M53.2225 36.1983C53.341 44.781 42.1549 55.5094 36.4658 53.188C31.4796 51.1445 34.9944 47.2291 33.7193 36.1983C33.188 31.6127 38.0842 27.8404 43.4872 27.8404C45.8806 27.6839 48.24 28.4711 50.0597 30.0335C51.8795 31.5958 53.2225 32.8948 53.2225 36.1983Z",
2304
- stroke: "currentColor",
2305
- strokeWidth: "5",
2306
- strokeLinecap: "round",
2307
- strokeLinejoin: "round"
2308
- }
2309
- )
2310
- ] });
2311
- const Globe = React.memo(SvgComponent$e, radashi.isEqual);
2312
- const Globe$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2313
- __proto__: null,
2314
- default: Globe
2315
- }, Symbol.toStringTag, { value: "Module" }));
2316
- const SvgComponent$d = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 24, height: 24, xmlns: "http://www.w3.org/2000/svg", xmlSpace: "preserve", viewBox: "0 0 256 256", ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "currentColor", strokeMiterlimit: "10", strokeWidth: "0", children: [
2317
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M253.5 75.7a92.8 92.8 0 0 0-5.8-30.7A62 62 0 0 0 233 22.6 62 62 0 0 0 210.7 8c-8-3-17.2-5.2-30.7-5.8-13.5-.6-17.8-.8-52.1-.8s-38.7.2-52.2.8A92.8 92.8 0 0 0 45 8c-8.4 3.2-16 8.2-22.4 14.6A62 62 0 0 0 8 45c-3 8-5.2 17.3-5.8 30.7a890 890 0 0 0-.8 52.2c0 34.3.2 38.6.8 52.1A92.8 92.8 0 0 0 8 210.7a62 62 0 0 0 14.5 22.4A62 62 0 0 0 45 247.7c8 3.1 17.3 5.2 30.7 5.9 13.5.6 17.8.7 52.2.7s38.6-.1 52-.7a92.8 92.8 0 0 0 30.8-6c17-6.5 30.4-20 37-36.9 3-8 5.2-17.2 5.8-30.7.7-13.5.8-17.8.8-52.1s-.1-38.7-.8-52.2zM230.8 179c-.6 12.3-2.6 19-4.4 23.4-4.2 11-13 19.8-24 24a69.9 69.9 0 0 1-23.4 4.4c-13.4.6-17.4.7-51.1.7-33.8 0-37.8-.1-51.1-.7-12.4-.6-19-2.6-23.5-4.4-5.5-2-10.5-5.2-14.5-9.4-4.2-4.1-7.5-9-9.5-14.6a69.9 69.9 0 0 1-4.4-23.4c-.6-13.4-.7-17.4-.7-51.1s.1-37.8.7-51.1c.6-12.4 2.6-19 4.4-23.5 2-5.5 5.2-10.5 9.4-14.6 4.1-4.2 9-7.4 14.6-9.4a69.9 69.9 0 0 1 23.5-4.4c13.3-.6 17.3-.7 51-.7 33.8 0 37.8.1 51.1.7 12.4.6 19 2.7 23.5 4.4 5.5 2 10.5 5.2 14.6 9.4 4.2 4.1 7.4 9.1 9.4 14.6a69.9 69.9 0 0 1 4.4 23.5c.6 13.3.7 17.3.7 51s-.1 37.8-.7 51.2z" }),
2318
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M127.9 63a65 65 0 1 0 0 129.8 65 65 0 0 0 0-129.9zm0 107a42.2 42.2 0 1 1 0-84.3 42.2 42.2 0 0 1 0 84.3zM210.5 60.4a15.2 15.2 0 1 1-30.3 0 15.2 15.2 0 0 1 30.3 0z" })
2319
- ] }) });
2320
- const Instagram = React.memo(SvgComponent$d, radashi.isEqual);
2321
- const Instagram$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2322
- __proto__: null,
2323
- default: Instagram
2324
- }, Symbol.toStringTag, { value: "Module" }));
2325
- const SvgComponent$c = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 24, height: 24, xmlns: "http://www.w3.org/2000/svg", xmlSpace: "preserve", viewBox: "0 0 256 256", ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", strokeMiterlimit: "10", strokeWidth: "0", transform: "matrix(2.8 0 0 2.8 1.4 1.4)", children: [
2326
- /* @__PURE__ */ jsxRuntime.jsxs(
2327
- "linearGradient",
2328
- {
2329
- id: "a",
2330
- x1: "7.6",
2331
- x2: "82.4",
2332
- y1: "9.6",
2333
- y2: "84.4",
2334
- gradientTransform: "matrix(1 0 0 -1 0 92)",
2335
- gradientUnits: "userSpaceOnUse",
2336
- children: [
2337
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#ffd600" }),
2338
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "50%", stopColor: "#ff0100" }),
2339
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#d800b9" })
2340
- ]
2341
- }
2342
- ),
2343
- /* @__PURE__ */ jsxRuntime.jsx(
2344
- "path",
2345
- {
2346
- fill: "url(#a)",
2347
- d: "M89.7 26.4c-.2-4.7-1-8-2-10.9a22 22 0 0 0-5.3-8 22 22 0 0 0-8-5.1A33 33 0 0 0 63.7.3C58.8 0 57.2 0 45 0S31.2 0 26.4.3c-4.7.2-8 1-10.9 2a22 22 0 0 0-8 5.3 22 22 0 0 0-5.1 8A33 33 0 0 0 .3 26.3C0 31.2 0 32.8 0 45c0 12.2 0 13.8.3 18.6.2 4.7 1 8 2 10.9a22 22 0 0 0 5.3 8c2.2 2.2 5 4 8 5.1a33 33 0 0 0 10.8 2.1c4.8.2 6.4.3 18.6.3s13.8 0 18.6-.3c4.7-.2 8-1 10.9-2a23 23 0 0 0 13.1-13.2 33 33 0 0 0 2.1-11c.2-4.7.3-6.3.3-18.5s0-13.8-.3-18.6zm-8 36.8c-.3 4.4-1 6.8-1.6 8.3-1.5 4-4.6 7-8.6 8.6-1.5.6-4 1.3-8.3 1.5-4.8.2-6.2.3-18.2.3s-13.4 0-18.2-.3a25 25 0 0 1-8.3-1.5 14 14 0 0 1-5.2-3.4 14 14 0 0 1-3.4-5.2c-.6-1.5-1.3-4-1.5-8.3A313 313 0 0 1 8 45c0-12 0-13.4.3-18.2a25 25 0 0 1 1.5-8.3 14 14 0 0 1 3.4-5.2 14 14 0 0 1 5.2-3.4c1.5-.6 4-1.3 8.3-1.5C31.6 8.2 33 8 45 8s13.4 0 18.2.3c4.4.2 6.8.9 8.3 1.5a14 14 0 0 1 5.2 3.4 14 14 0 0 1 3.4 5.2c.6 1.5 1.3 4 1.5 8.3.2 4.8.3 6.2.3 18.2s0 13.4-.3 18.2z"
2348
- }
2349
- ),
2350
- /* @__PURE__ */ jsxRuntime.jsxs(
2351
- "linearGradient",
2352
- {
2353
- id: "b",
2354
- x1: "28.7",
2355
- x2: "61.3",
2356
- y1: "30.7",
2357
- y2: "63.3",
2358
- gradientTransform: "matrix(1 0 0 -1 0 92)",
2359
- gradientUnits: "userSpaceOnUse",
2360
- children: [
2361
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#ff6400" }),
2362
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "50%", stopColor: "#ff0100" }),
2363
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#fd0056" })
2364
- ]
2365
- }
2366
- ),
2367
- /* @__PURE__ */ jsxRuntime.jsx(
2368
- "path",
2369
- {
2370
- fill: "url(#b)",
2371
- d: "M45 21.9A23.1 23.1 0 1 0 45 68 23.1 23.1 0 0 0 45 22zM45 60a15 15 0 1 1 0-30 15 15 0 0 1 0 30z"
2372
- }
2373
- ),
2374
- /* @__PURE__ */ jsxRuntime.jsxs(
2375
- "linearGradient",
2376
- {
2377
- id: "c",
2378
- x1: "65.2",
2379
- x2: "72.8",
2380
- y1: "67.2",
2381
- y2: "74.8",
2382
- gradientTransform: "matrix(1 0 0 -1 0 92)",
2383
- gradientUnits: "userSpaceOnUse",
2384
- children: [
2385
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#f30072" }),
2386
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#e50097" })
2387
- ]
2388
- }
2389
- ),
2390
- /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "url(#c)", d: "M74.4 21a5.4 5.4 0 1 1-10.8 0 5.4 5.4 0 0 1 10.8 0z" })
2391
- ] }) });
2392
- const InstagramColored = React.memo(SvgComponent$c, radashi.isEqual);
2393
- const InstagramColored$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2394
- __proto__: null,
2395
- default: InstagramColored
2396
- }, Symbol.toStringTag, { value: "Module" }));
2397
- const SvgComponent$b = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 24, height: 24, xmlns: "http://www.w3.org/2000/svg", xmlSpace: "preserve", viewBox: "0 0 256 256", ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "currentColor", strokeMiterlimit: "10", strokeWidth: "0", children: [
2398
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M61.4 254.3A59.8 59.8 0 0 1 19 151.8L65.8 105a11.2 11.2 0 0 1 15.9 16l-46.8 46.7a37.3 37.3 0 0 0 0 53.1 37.6 37.6 0 0 0 53 0l46.9-46.8a11.2 11.2 0 1 1 15.9 16l-46.8 46.7a59.8 59.8 0 0 1-42.5 17.6zM182 154a11.2 11.2 0 0 1-8-19.2L220.8 88a37.6 37.6 0 0 0-53-53.1l-46.9 46.8a11.2 11.2 0 0 1-15.9-16L151.8 19a59.6 59.6 0 0 1 85 0 60.1 60.1 0 0 1 0 84.9l-46.9 46.8c-2.2 2.2-5 3.3-8 3.3z" }),
2399
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M72.6 194.3a11.2 11.2 0 0 1-8-19.1L175.3 64.7A11.2 11.2 0 1 1 191 80.6L80.6 191c-2.2 2.2-5.1 3.2-8 3.2z" })
2400
- ] }) });
2401
- const Link = React.memo(SvgComponent$b, radashi.isEqual);
2402
- const Link$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2403
- __proto__: null,
2404
- default: Link
2405
- }, Symbol.toStringTag, { value: "Module" }));
2406
- const SvgComponent$a = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 18, height: 19, viewBox: "0 0 18 19", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
2407
- "path",
2408
- {
2409
- fillRule: "evenodd",
2410
- clipRule: "evenodd",
2411
- d: "M0 1.79773C0 1.07677 0.604838 0.5 1.33064 0.5H16.6694C17.3952 0.5 18 1.07677 18 1.79773V17.2023C18 17.9232 17.3952 18.5 16.6694 18.5H1.33064C0.604838 18.5 0 17.9232 0 17.2023V1.79773ZM5.44373 15.5677V7.44492H2.73405V15.5677H5.44373ZM4.08889 6.31541C5.03244 6.31541 5.63728 5.69058 5.63728 4.92155C5.61308 4.1285 5.05663 3.52769 4.11308 3.52769C3.19373 3.52769 2.5647 4.1285 2.5647 4.92155C2.5647 5.69058 3.14534 6.31541 4.08889 6.31541ZM9.65304 15.5677H6.94336C6.94336 15.5677 6.99175 8.18991 6.94336 7.44492H9.67723V8.58586C9.66903 8.59819 9.66097 8.6104 9.65304 8.62249H9.67723V8.58586C10.0439 8.03441 10.6772 7.25266 12.1208 7.25266C13.9111 7.25266 15.2417 8.4062 15.2417 10.9055V15.5677H12.5321V11.2179C12.5321 10.1365 12.145 9.39151 11.153 9.39151C10.403 9.39151 9.94336 9.89619 9.74981 10.3768C9.67723 10.5451 9.65304 10.7854 9.65304 11.0257V15.5677Z",
2412
- fill: "currentColor"
2413
- }
2414
- ) });
2415
- const LinkedIn = React.memo(SvgComponent$a, radashi.isEqual);
2416
- const LinkedIn$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2417
- __proto__: null,
2418
- default: LinkedIn
2419
- }, Symbol.toStringTag, { value: "Module" }));
2420
- const SvgComponent$9 = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 24, height: 24, xmlns: "http://www.w3.org/2000/svg", xmlSpace: "preserve", viewBox: "0 0 256 256", ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "currentColor", strokeMiterlimit: "10", strokeWidth: "0", transform: "matrix(2.8 0 0 2.8 1.4 1.4)", children: [
2421
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M80.9 78.8H9c-5 0-9.1-4.1-9.1-9.1V20.3c0-5 4-9 9.1-9H81c5 0 9.1 4 9.1 9v49.4c0 5-4 9-9.1 9zM9 17.2A3.1 3.1 0 0 0 6 20.3v49.4c0 1.7 1.4 3 3.1 3H81c1.7 0 3.1-1.3 3.1-3V20.3c0-1.7-1.4-3-3.1-3H9z" }),
2422
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M45 55.4c-5.4 0-10.6-2.3-14.2-6.3l-28.3-31 4.4-4 28.3 31c2.5 2.8 6 4.3 9.8 4.3 3.8 0 7.3-1.5 9.8-4.3l28.3-31 4.4 4-28.3 31c-3.6 4-8.8 6.3-14.2 6.3z" }),
2423
- /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "39", height: "6", x: "-1", y: "57.2", rx: "0", ry: "0", transform: "rotate(-45.1 18.5 60.2)" }),
2424
- /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "6", height: "39", x: "68.5", y: "40.7", rx: "0", ry: "0", transform: "rotate(-44.8 71.5 60.2)" })
2425
- ] }) });
2426
- const Mail = React.memo(SvgComponent$9, radashi.isEqual);
2427
- const Mail$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2428
- __proto__: null,
2429
- default: Mail
2430
- }, Symbol.toStringTag, { value: "Module" }));
2431
- const SvgComponent$8 = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { height: 48, width: 48, fill: "currentColor", ...props, xmlns: "http://www.w3.org/2000/svg", children: [
2432
- /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "26", cy: "24.095", rx: "26", ry: "23.547", fill: "#fff" }),
2433
- /* @__PURE__ */ jsxRuntime.jsx(
2434
- "path",
2435
- {
2436
- d: "M37.742 24.095H14.258M26 13.46V34.73 13.46Z",
2437
- stroke: "#9E9E9E",
2438
- strokeWidth: "5",
2439
- strokeLinecap: "round",
2440
- strokeLinejoin: "round"
2441
- }
2442
- )
2443
- ] });
2444
- const Plus = React.memo(SvgComponent$8, radashi.isEqual);
2445
- const Plus$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2446
- __proto__: null,
2447
- default: Plus
2448
- }, Symbol.toStringTag, { value: "Module" }));
2449
- const SvgComponent$7 = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 18 18", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
2450
- "path",
2451
- {
2452
- d: "M11.7001 17.9999H6.30011C5.58427 17.9993 4.89798 17.7144 4.39212 17.2079C4.13889 16.9593 3.93828 16.6622 3.80222 16.3344C3.66616 16.0066 3.59743 15.6548 3.60012 15.2999V14.3999H2.70012C1.98428 14.3993 1.29799 14.1144 0.792133 13.6079C0.538909 13.3593 0.338298 13.0622 0.202237 12.7344C0.0661752 12.4066 -0.0025547 12.0548 0.000137153 11.6999V8.09996C0.000767338 7.38412 0.285642 6.69783 0.792133 6.19197C1.29799 5.68548 1.98428 5.40061 2.70012 5.39998H3.60012V2.69999C3.60075 1.98415 3.88563 1.29786 4.39212 0.791996C4.89798 0.285506 5.58427 0.000630184 6.30011 0H11.7001C12.4159 0.000630184 13.1022 0.285506 13.6081 0.791996C14.1146 1.29786 14.3994 1.98415 14.4001 2.69999V5.39998H15.3001C16.0159 5.40061 16.7022 5.68548 17.2081 6.19197C17.7145 6.69783 17.9994 7.38412 18.0001 8.09996V11.6999C18.0009 12.0559 17.9314 12.4085 17.7955 12.7375C17.6596 13.0665 17.4599 13.3654 17.2081 13.6169C16.7007 14.1201 16.0146 14.4017 15.3001 14.3999H14.4001V15.2999C14.4009 15.6559 14.3314 16.0085 14.1955 16.3375C14.0596 16.6665 13.8599 16.9654 13.6081 17.2169C13.1007 17.7201 12.4146 18.0017 11.7001 17.9999ZM5.40011 13.4999V15.2999C5.39943 15.4184 5.42213 15.5358 5.46692 15.6454C5.5117 15.7551 5.5777 15.8548 5.66111 15.9389C5.74521 16.0223 5.84494 16.0883 5.95459 16.1331C6.06425 16.1779 6.18166 16.2006 6.30011 16.1999H11.7001C11.8185 16.2006 11.9359 16.1779 12.0456 16.1331C12.1552 16.0883 12.255 16.0223 12.3391 15.9389C12.4225 15.8548 12.4885 15.7551 12.5333 15.6454C12.5781 15.5358 12.6008 15.4184 12.6001 15.2999V11.6999C12.5991 11.4638 12.5053 11.2376 12.3391 11.0699C12.2557 10.9849 12.1563 10.9173 12.0466 10.8709C11.937 10.8246 11.8192 10.8004 11.7001 10.8H6.30011C6.18103 10.8004 6.06324 10.8246 5.95355 10.8709C5.84386 10.9173 5.74446 10.9849 5.66111 11.0699C5.49484 11.2376 5.40111 11.4638 5.40011 11.6999V13.4999ZM14.4001 12.5999H15.3001C15.4185 12.6006 15.5359 12.5779 15.6456 12.5331C15.7552 12.4883 15.855 12.4224 15.9391 12.3389C16.0225 12.2548 16.0885 12.1551 16.1333 12.0455C16.178 11.9358 16.2007 11.8184 16.2001 11.6999V8.09996C16.1991 7.86386 16.1053 7.6376 15.9391 7.46996C15.8557 7.38493 15.7563 7.31727 15.6466 7.27093C15.5369 7.22458 15.4191 7.20046 15.3001 7.19997H2.70012C2.58105 7.20046 2.46325 7.22458 2.35357 7.27093C2.24388 7.31727 2.14448 7.38493 2.06113 7.46996C1.89486 7.6376 1.80112 7.86386 1.80013 8.09996V11.6999C1.79944 11.8184 1.82215 11.9358 1.86693 12.0455C1.91172 12.1551 1.97771 12.2548 2.06113 12.3389C2.14522 12.4224 2.24496 12.4883 2.35461 12.5331C2.46426 12.5779 2.58168 12.6006 2.70012 12.5999H3.60012V11.6999C3.60075 10.9841 3.88563 10.2978 4.39212 9.79195C4.89798 9.28546 5.58427 9.00059 6.30011 8.99996H11.7001C12.4159 9.00059 13.1022 9.28546 13.6081 9.79195C14.1146 10.2978 14.3994 10.9841 14.4001 11.6999V12.5999ZM5.40011 5.39998H12.6001V2.69999C12.5991 2.46388 12.5053 2.23762 12.3391 2.06999C12.2557 1.98495 12.1563 1.9173 12.0466 1.87095C11.937 1.82461 11.8192 1.80049 11.7001 1.79999H6.30011C6.18103 1.80049 6.06324 1.82461 5.95355 1.87095C5.84386 1.9173 5.74446 1.98495 5.66111 2.06999C5.49484 2.23762 5.40111 2.46388 5.40011 2.69999V5.39998Z",
2453
- fill: "currentColor"
2454
- }
2455
- ) });
2456
- const Print = React.memo(SvgComponent$7, radashi.isEqual);
2457
- const Print$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2458
- __proto__: null,
2459
- default: Print
2460
- }, Symbol.toStringTag, { value: "Module" }));
2461
- const SvgComponent$6 = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 24, height: 24, xmlns: "http://www.w3.org/2000/svg", xmlSpace: "preserve", viewBox: "0 0 256 256", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
2462
- "path",
2463
- {
2464
- fill: "currentColor",
2465
- strokeMiterlimit: "10",
2466
- strokeWidth: "0",
2467
- d: "M199.75 145.13a54.45 54.45 0 0 0-43.54 21.82l-47.88-23.93c1.4-4.82 2.2-9.9 2.2-15.17a54.3 54.3 0 0 0-2.2-15.16l47.88-23.93a54.45 54.45 0 0 0 43.54 21.82 54.61 54.61 0 0 0 54.56-54.56c0-30.08-24.48-54.56-54.56-54.56s-54.56 24.48-54.56 54.56c0 5.27.79 10.35 2.19 15.17L99.5 95.11A54.45 54.45 0 0 0 55.97 73.3C25.88 73.3 1.4 97.77 1.4 127.86s24.47 54.56 54.56 54.56c17.79 0 33.56-8.6 43.53-21.82l47.88 23.92a54.32 54.32 0 0 0-2.2 15.17c0 30.09 24.48 54.56 54.57 54.56s54.56-24.47 54.56-54.56a54.62 54.62 0 0 0-54.56-54.56zm0-124c19.24 0 34.89 15.65 34.89 34.9s-15.65 34.88-34.9 34.88-34.88-15.65-34.88-34.89 15.65-34.89 34.89-34.89zM55.97 162.75c-19.24 0-34.9-15.65-34.9-34.9s15.66-34.88 34.9-34.88 34.88 15.65 34.88 34.89-15.65 34.89-34.88 34.89zm143.78 71.83a34.93 34.93 0 0 1-34.9-34.89c0-19.24 15.66-34.89 34.9-34.89s34.89 15.65 34.89 34.9a34.93 34.93 0 0 1-34.9 34.88z"
2468
- }
2469
- ) });
2470
- const Share = React.memo(SvgComponent$6, radashi.isEqual);
2471
- const Share$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2472
- __proto__: null,
2473
- default: Share
2474
- }, Symbol.toStringTag, { value: "Module" }));
2475
- const SvgComponent$5 = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 24, height: 24, xmlns: "http://www.w3.org/2000/svg", xmlSpace: "preserve", viewBox: "0 0 256 256", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
2476
- "path",
2477
- {
2478
- fill: "currentColor",
2479
- strokeMiterlimit: "10",
2480
- strokeWidth: "0",
2481
- d: "M81 231A147 147 0 0 0 228 76c11-7 19-16 26-27-9 5-19 7-29 9 10-7 18-17 22-29-10 6-21 10-33 12a52 52 0 0 0-88 48C83 87 45 66 19 35a52 52 0 0 0 16 69c-8 0-16-3-23-7v1c0 25 17 46 41 51a52 52 0 0 1-23 1c6 20 26 35 48 36a104 104 0 0 1-77 21c23 15 51 24 80 24"
2482
- }
2483
- ) });
2484
- const Twitter = React.memo(SvgComponent$5, radashi.isEqual);
2485
- const Twitter$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2486
- __proto__: null,
2487
- default: Twitter
2488
- }, Symbol.toStringTag, { value: "Module" }));
2489
- const SvgComponent$4 = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 24, height: 24, xmlns: "http://www.w3.org/2000/svg", xmlSpace: "preserve", viewBox: "0 0 256 256", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
2490
- "path",
2491
- {
2492
- fill: "#1da1f2",
2493
- strokeMiterlimit: "10",
2494
- strokeWidth: "0",
2495
- d: "M81 230.6c95.4 0 147.6-79 147.6-147.6 0-2.3 0-4.5-.2-6.7 10.2-7.4 19-16.5 25.9-26.9-9.5 4.2-19.5 7-29.8 8.2a52 52 0 0 0 22.8-28.7 104 104 0 0 1-33 12.6A52 52 0 0 0 126 88.8C84.2 86.7 45.4 67 19 34.6a52 52 0 0 0 16 69.2 51.5 51.5 0 0 1-23.5-6.5v.7c0 24.7 17.4 46 41.6 50.9-7.6 2-15.6 2.4-23.4.9a52 52 0 0 0 48.5 36 104.1 104.1 0 0 1-76.8 21.5A146.9 146.9 0 0 0 81 230.6"
2496
- }
2497
- ) });
2498
- const TwitterColored = React.memo(SvgComponent$4, radashi.isEqual);
2499
- const TwitterColored$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2500
- __proto__: null,
2501
- default: TwitterColored
2502
- }, Symbol.toStringTag, { value: "Module" }));
2503
- const SvgComponent$3 = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 24, height: 24, fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
2504
- "path",
2505
- {
2506
- d: "M17 21H7a4 4 0 0 1-4-4v-1a1 1 0 1 1 2 0v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 1 2 0v1a4 4 0 0 1-4 4Zm-5-4a1 1 0 0 1-1-1V6.41l-2.29 2.3a1.004 1.004 0 0 1-1.42-1.42l4-4a1 1 0 0 1 .33-.21A1 1 0 0 1 12 3a1 1 0 0 1 .38.08 1 1 0 0 1 .33.21l4 4a1.004 1.004 0 1 1-1.42 1.42L13 6.41V16a1 1 0 0 1-1 1Z",
2507
- fill: "currentColor"
2508
- }
2509
- ) });
2510
- const Upload = React.memo(SvgComponent$3, radashi.isEqual);
2511
- const Upload$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2512
- __proto__: null,
2513
- default: Upload
2514
- }, Symbol.toStringTag, { value: "Module" }));
2515
- const SvgComponent$2 = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 25, viewBox: "0 0 24 25", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
2516
- "path",
2517
- {
2518
- d: "M14.119 11.7052L20.4486 4.5H18.9492L13.4509 10.7549L9.0626 4.5H4L10.6374 13.9594L4 21.5142H5.4994L11.3021 14.9074L15.9374 21.5142H21M6.04057 5.60727H8.34407L18.9481 20.4613H16.644",
2519
- fill: "currentColor"
2520
- }
2521
- ) });
2522
- const X = React.memo(SvgComponent$2, radashi.isEqual);
2523
- const X$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2524
- __proto__: null,
2525
- default: X
2526
- }, Symbol.toStringTag, { value: "Module" }));
2527
- const SvgComponent$1 = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 24, height: 24, xmlns: "http://www.w3.org/2000/svg", xmlSpace: "preserve", viewBox: "0 0 256 256", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
2528
- "path",
2529
- {
2530
- fill: "currentColor",
2531
- strokeMiterlimit: "10",
2532
- strokeWidth: "0",
2533
- d: "M249 67c-3-11-11-19-22-22-20-6-99-6-99-6s-79 0-99 6C18 48 10 56 7 67c-6 20-6 61-6 61s0 41 6 61c3 11 11 19 22 22 20 5 99 5 99 5s79 0 99-5c11-3 19-11 22-22 5-20 5-61 5-61s0-41-5-61zm-146 99V90l65 38-65 38z"
2534
- }
2535
- ) });
2536
- const YouTube = React.memo(SvgComponent$1, radashi.isEqual);
2537
- const YouTube$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2538
- __proto__: null,
2539
- default: YouTube
2540
- }, Symbol.toStringTag, { value: "Module" }));
2541
- const SvgComponent = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 24, height: 24, xmlns: "http://www.w3.org/2000/svg", xmlSpace: "preserve", viewBox: "0 0 256 256", ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "currentColor", strokeMiterlimit: "10", strokeWidth: "0", children: [
2542
- /* @__PURE__ */ jsxRuntime.jsx(
2543
- "path",
2544
- {
2545
- fill: "red",
2546
- d: "M249.02 66.99a31.68 31.68 0 0 0-22.36-22.36c-19.72-5.29-98.8-5.29-98.8-5.29s-79.09 0-98.8 5.29A31.68 31.68 0 0 0 6.68 66.99c-5.28 19.72-5.28 60.87-5.28 60.87s0 41.15 5.28 60.87a31.68 31.68 0 0 0 22.36 22.36c19.72 5.28 98.8 5.28 98.8 5.28s79.1 0 98.81-5.28a31.68 31.68 0 0 0 22.36-22.36c5.29-19.72 5.29-60.87 5.29-60.87s0-41.15-5.29-60.87z"
2547
- }
2548
- ),
2549
- /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#fff", d: "m102.57 165.8 65.7-37.94-65.7-37.94z" })
2550
- ] }) });
2551
- const YouTubeColored = React.memo(SvgComponent, radashi.isEqual);
2552
- const YouTubeColored$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2553
- __proto__: null,
2554
- default: YouTubeColored
2555
- }, Symbol.toStringTag, { value: "Module" }));
2556
- const [useIsClient, IsClientProvider] = coreLib.createCtx();
11
+ const coreLib = require("@okam/core-lib");
12
+ const react = require("react");
2557
13
  const [useDraftMode, DraftModeProvider] = coreLib.createCtx();
2558
14
  function createServerContext(defaultValue) {
2559
- const getRef = React.cache(() => ({ current: defaultValue }));
15
+ const getRef = react.cache(() => ({ current: defaultValue }));
2560
16
  const getValue = () => getRef().current;
2561
17
  const setValue = (value) => {
2562
18
  getRef().current = value;