@okam/directus-next 1.2.11 → 1.2.12

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
@@ -2,12 +2,2560 @@
2
2
  "use strict";
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
4
4
  const router = require("./router-DTZYUtal.js");
5
- require("server-only");
6
- const react = require("react");
7
- const directusQuery = require("@okam/directus-query");
5
+ const jsxRuntime = require("react/jsx-runtime");
6
+ const React = require("react");
7
+ const tailwindVariants = require("tailwind-variants");
8
8
  const radashi = require("radashi");
9
+ require("@react-aria/accordion");
10
+ const coreLib = require("@okam/core-lib");
11
+ const reactAria = require("react-aria");
12
+ require("react-use");
13
+ require("@react-spring/web");
14
+ const reactStately = require("react-stately");
15
+ require("react-div-100vh");
16
+ require("@react-aria/focus");
17
+ require("swiper/react");
18
+ require("swiper/modules");
19
+ require("sanitize-html");
20
+ require("@react-aria/i18n");
21
+ const reactHookForm = require("react-hook-form");
22
+ const logger$1 = require("@okam/logger");
23
+ const utils = require("@react-aria/utils");
24
+ require("next/headers");
25
+ const directusQuery = require("@okam/directus-query");
26
+ const makeTheme = (theme) => theme;
27
+ function createCtxNullable() {
28
+ const ctx = React.createContext(void 0);
29
+ function useCtx() {
30
+ const c = React.useContext(ctx);
31
+ if (c === void 0) {
32
+ return null;
33
+ }
34
+ return c;
35
+ }
36
+ return [useCtx, ctx.Provider];
37
+ }
38
+ const defaultTheme = {
39
+ typography: () => ""
40
+ };
41
+ const [useTheme, ThemeProvider] = createCtxNullable();
42
+ function ThemeContextProvider({ children, brandTheme = defaultTheme }) {
43
+ const value = React.useMemo(() => ({ brandTheme }), [brandTheme]);
44
+ return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { value, children });
45
+ }
46
+ const createThemeProvider = (brandTheme) => {
47
+ const ThemeProviderContext = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(ThemeContextProvider, { brandTheme, children });
48
+ return ThemeProviderContext;
49
+ };
50
+ const accordionContainer = tailwindVariants.tv({
51
+ base: "[border-radius: 32px] p-1.5 focus:outline-none text-color-1-500",
52
+ defaultVariants: {
53
+ textAlign: "left",
54
+ isOpen: false
55
+ },
56
+ variants: {
57
+ textAlign: {
58
+ center: "text-center",
59
+ left: "text-left"
60
+ }
61
+ }
62
+ });
63
+ const accordionButton = tailwindVariants.tv({
64
+ base: "grid overflow-hidden w-full items-center border-b-2 border-color-1-500 focus-ring-black",
65
+ variants: {
66
+ titleBold: {
67
+ true: "font-bold"
68
+ },
69
+ textAlign: {
70
+ center: "grid-cols-[3rem_1fr_3rem] pl-0 sm:pl-0",
71
+ left: "grid-cols-[1fr_3rem]"
72
+ },
73
+ bgColor: {
74
+ gray: "bg-gray-300",
75
+ white: "bg-white"
76
+ }
77
+ },
78
+ defaultVariants: {
79
+ titleBold: false,
80
+ textAlign: "left",
81
+ bgColor: "white"
82
+ }
83
+ });
84
+ const accordionTitle = tailwindVariants.tv({
85
+ base: "",
86
+ defaultVariants: {
87
+ textAlign: "left"
88
+ },
89
+ variants: {
90
+ textAlign: {
91
+ center: "justify-self-center col-start-2",
92
+ left: "justify-self-start"
93
+ }
94
+ }
95
+ });
96
+ const accordionIcon = tailwindVariants.tv({
97
+ 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",
98
+ variants: {
99
+ isOpen: {
100
+ true: "-rotate-90",
101
+ false: ""
102
+ }
103
+ }
104
+ });
105
+ const accordionRegion = tailwindVariants.tv({
106
+ base: `
107
+ font-body
108
+ text-inherit
109
+ h-auto
110
+ grid
111
+ `,
112
+ defaultVariants: {
113
+ textAlign: "left"
114
+ },
115
+ variants: {
116
+ textAlign: {
117
+ center: "grid-cols-[3rem_1fr_3rem] px-6 text-center",
118
+ left: "grid-cols-[1fr_3rem] text-left"
119
+ }
120
+ }
121
+ });
122
+ const accordionContent = tailwindVariants.tv({
123
+ base: "overflow-hidden flex flex-col gap-2 items-start",
124
+ defaultVariants: {
125
+ textAlign: "left"
126
+ },
127
+ variants: {
128
+ textAlign: {
129
+ center: "col-start-2",
130
+ left: ""
131
+ }
132
+ }
133
+ });
134
+ const accordionTheme = {
135
+ container: (props) => accordionContainer(props),
136
+ button: (props) => accordionButton(props),
137
+ title: (props) => accordionTitle(props),
138
+ icon: (props) => accordionIcon(props),
139
+ region: (props) => accordionRegion(props),
140
+ content: (props) => accordionContent(props)
141
+ };
142
+ const button = tailwindVariants.tv({
143
+ base: `
144
+ flex
145
+ items-center
146
+ justify-center
147
+ gap-4
148
+ transition
149
+ duration-300
150
+ ease-in-out
151
+ disabled:pointer-events-none
152
+ disabled:opacity-30
153
+ focus-ring-black
154
+ h-fit
155
+ `,
156
+ defaultVariants: {
157
+ buttonStyle: "default",
158
+ type: "button",
159
+ size: "default",
160
+ shape: "rounded"
161
+ },
162
+ variants: {
163
+ type: {
164
+ button: "",
165
+ menu: "text-2xl"
166
+ },
167
+ buttonStyle: {
168
+ default: `
169
+ px-4
170
+ py-2
171
+ text-white
172
+ bg-color-1-500
173
+ hover:bg-color-1-400
174
+ active:bg-color-1-400
175
+ `,
176
+ outline: `
177
+ px-4
178
+ py-2
179
+ bg-transparent
180
+ border-color-1-500
181
+ text-color-1-500
182
+ hover:bg-color-1-500
183
+ hover:text-white
184
+ active:bg-color-1-500
185
+ active:text-white
186
+ `,
187
+ hollow: `
188
+ px-2
189
+ bg-transparent
190
+ text-color-1-500
191
+ hover:border-b-color-1-500
192
+ active:border-b-color-1-500
193
+ focus:border-b-color-1-500
194
+
195
+ `
196
+ },
197
+ intent: {
198
+ danger: ``,
199
+ error: `
200
+ bg-error
201
+ text-white
202
+ pointer-events-none
203
+ border-error
204
+ `
205
+ },
206
+ size: {
207
+ default: `min-w-12 min-h-6`,
208
+ large: `min-w-36 min-h-18`
209
+ },
210
+ shape: {
211
+ rounded: `rounded-md`,
212
+ circular: `rounded-full`
213
+ }
214
+ },
215
+ compoundVariants: [
216
+ {
217
+ intent: "danger",
218
+ buttonStyle: "default",
219
+ className: `
220
+ bg-danger-500
221
+ text-white
222
+ border-danger-500
223
+ hover:bg-danger-400
224
+ hover:border-danger-400
225
+ focus:bg-danger-400
226
+ focus:border-danger-400
227
+ `
228
+ }
229
+ ]
230
+ });
231
+ const typography = tailwindVariants.tv({
232
+ variants: {
233
+ size: {
234
+ h1: `text-5xl`,
235
+ h2: `text-4xl`,
236
+ h3: `text-3xl`,
237
+ h4: `text-2xl`,
238
+ h5: `text-xl`,
239
+ h6: `text-lg`,
240
+ leading: `text-md font-bold leading-normal`,
241
+ paragraph: `text-md inline`,
242
+ footnotes: `text-sm`,
243
+ xs: `text-xs`
244
+ },
245
+ font: {
246
+ body: `font-body`
247
+ },
248
+ weight: {
249
+ normal: `font-normal`,
250
+ light: `font-light`,
251
+ bold: "font-bold"
252
+ },
253
+ color: {
254
+ gray: `text-gray-500`,
255
+ white: `text-white`
256
+ },
257
+ isError: {
258
+ true: "text-sm text-error"
259
+ },
260
+ align: {
261
+ center: "text-center",
262
+ left: "text-left",
263
+ right: "text-right"
264
+ }
265
+ },
266
+ defaultVariants: {
267
+ size: "paragraph",
268
+ font: "body"
269
+ }
270
+ });
271
+ const alertsWrapper = tailwindVariants.tv({
272
+ base: "bg-color-1-200 p-4 flex flex-col gap-4"
273
+ });
274
+ const alertsCarouselWrapper = tailwindVariants.tv({
275
+ base: "flex flex-wrap justify-between items-center gap-4 relative"
276
+ });
277
+ const alertsCloseBtn = tailwindVariants.tv({
278
+ extend: button,
279
+ base: "self-end"
280
+ });
281
+ const alertsSwiperSwiper = tailwindVariants.tv({
282
+ base: "bg-color-1-300 m-2 rounded-lg order-2 basis-9/12"
283
+ });
284
+ const alertsSwiperWrapper = tailwindVariants.tv({
285
+ base: "m-4"
286
+ });
287
+ const alertsItemWrapper = tailwindVariants.tv({
288
+ base: ""
289
+ });
290
+ const alertsItemContainer = tailwindVariants.tv({
291
+ base: ""
292
+ });
293
+ const alertsItemTitle = tailwindVariants.tv({
294
+ extend: typography,
295
+ defaultVariants: {
296
+ size: "h1"
297
+ }
298
+ });
299
+ const alertsItemContent = tailwindVariants.tv({
300
+ extend: typography
301
+ });
302
+ const alertsItemIcon = tailwindVariants.tv({
303
+ base: "block w-min bg-color-1-400 p-2 rounded-lg"
304
+ });
305
+ const alertsNavigationButton = tailwindVariants.tv({
306
+ extend: button,
307
+ base: "basis-1/12",
308
+ variants: {
309
+ order: {
310
+ prev: "order-1",
311
+ next: "order-3"
312
+ }
313
+ }
314
+ });
315
+ const alertsPaginationWrapper = tailwindVariants.tv({
316
+ base: "flex gap-4 justify-center bg-color-1-200 z-10 bottom-4 left-0 right-0 order-4 basis-full"
317
+ });
318
+ const alertsPaginationBullet = tailwindVariants.tv({
319
+ base: "w-4 h-4 rounded-full block bg-color-1-600 focus-ring-black",
320
+ variants: {
321
+ active: {
322
+ true: "bg-color-1-100",
323
+ false: ""
324
+ }
325
+ }
326
+ });
327
+ const alertsTheme = {
328
+ wrapper: alertsWrapper,
329
+ carouselWrapper: alertsCarouselWrapper,
330
+ closeBtn: alertsCloseBtn,
331
+ swiper: {
332
+ swiper: alertsSwiperSwiper,
333
+ wrapper: alertsSwiperWrapper
334
+ },
335
+ item: {
336
+ wrapper: alertsItemWrapper,
337
+ container: alertsItemContainer,
338
+ title: alertsItemTitle,
339
+ content: alertsItemContent,
340
+ icon: alertsItemIcon
341
+ },
342
+ navigation: {
343
+ button: alertsNavigationButton
344
+ },
345
+ pagination: {
346
+ wrapper: alertsPaginationWrapper,
347
+ bullet: alertsPaginationBullet
348
+ }
349
+ };
350
+ const main = tailwindVariants.tv({
351
+ base: "w-full bg-slate-100"
352
+ });
353
+ const container = tailwindVariants.tv({
354
+ base: "max-w-screen-lg mx-auto w-full",
355
+ variants: {
356
+ fullWidth: {
357
+ true: "max-w-full col-span-full p-0"
358
+ },
359
+ spacing: {
360
+ small: "mb-3",
361
+ medium: "mb-6",
362
+ large: "mb-8",
363
+ none: "mb-0"
364
+ }
365
+ }
366
+ });
367
+ const grid = tailwindVariants.tv({
368
+ extend: container,
369
+ base: "grid grid-cols-12 gap-6 px-4 col-span-full",
370
+ variants: {
371
+ fullWidth: {
372
+ true: "max-w-full col-span-full p-0"
373
+ }
374
+ }
375
+ });
376
+ const gridItem = tailwindVariants.tv({
377
+ base: "bg-slate-300 h-64 p-4 flex justify-start items-end",
378
+ defaultVariants: {
379
+ size: "small"
380
+ },
381
+ variants: {
382
+ size: {
383
+ small: "col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-4",
384
+ medium: "col-span-12 sm:col-span-12 md:col-span-8 lg:col-span-8",
385
+ 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"
386
+ }
387
+ }
388
+ });
389
+ const calendarContainer = tailwindVariants.tv({
390
+ base: "text-gray-800 flex flex-col gap-4"
391
+ });
392
+ const calendarHeader = tailwindVariants.tv({
393
+ base: "flex items-center justify-between"
394
+ });
395
+ const calendarTitle = tailwindVariants.tv({
396
+ base: "text-2xl text-color-1-500 font-bold"
397
+ });
398
+ const calendarHeaderContainer = tailwindVariants.tv({
399
+ base: ""
400
+ });
401
+ tailwindVariants.tv({
402
+ base: ""
403
+ });
404
+ tailwindVariants.tv({
405
+ base: ""
406
+ });
407
+ tailwindVariants.tv({
408
+ base: ""
409
+ });
410
+ const calendarNavigationButtonsContainer = tailwindVariants.tv({
411
+ base: "flex items-center gap-1"
412
+ });
413
+ const calendarNavigationButtons = tailwindVariants.tv({
414
+ base: `
415
+ active:bg-color-1-500
416
+ p-2
417
+ rounded-full
418
+ active:text-color-1-100
419
+ hover:bg-color-1-200
420
+ focus-ring-black
421
+ transition-all
422
+ duration-300
423
+ ease-in-out
424
+ `
425
+ });
426
+ const calendarTable = tailwindVariants.tv({
427
+ base: `
428
+ border-spacing-2
429
+ border-separate
430
+ `
431
+ });
432
+ const calendarDayLabel = tailwindVariants.tv({
433
+ base: `
434
+ text-center
435
+ capitalize
436
+ rounded-lg
437
+ p-2
438
+ mx-2
439
+ bg-color-1-300
440
+ `
441
+ });
442
+ const calendarCellContainer = tailwindVariants.tv({
443
+ base: "text-center",
444
+ variants: {
445
+ isFocusVisible: {
446
+ true: "z-10",
447
+ false: ""
448
+ }
449
+ }
450
+ });
451
+ const calendarCell = tailwindVariants.tv({
452
+ base: "w-10 h-10",
453
+ variants: {
454
+ isSelected: {
455
+ true: "",
456
+ false: ""
457
+ },
458
+ isInvalid: {
459
+ true: "",
460
+ false: ""
461
+ },
462
+ isDisabled: {
463
+ true: "disabled pointer-events-none",
464
+ false: ""
465
+ },
466
+ isUnavailable: {
467
+ true: "pointer-events-none",
468
+ false: ""
469
+ },
470
+ isOutsideRange: {
471
+ true: "pointer-events-none",
472
+ false: ""
473
+ },
474
+ isOutsideVisibleRange: {
475
+ true: "pointer-events-none",
476
+ false: ""
477
+ },
478
+ isRoundedLeft: {
479
+ true: "rounded-l-full",
480
+ false: ""
481
+ },
482
+ isRoundedRight: {
483
+ true: "rounded-r-full",
484
+ false: ""
485
+ }
486
+ },
487
+ compoundVariants: [
488
+ {
489
+ isSelected: [true, false],
490
+ isInvalid: true,
491
+ class: "bg-error-400 hover:bg-error-500"
492
+ },
493
+ {
494
+ isSelected: true
495
+ }
496
+ ]
497
+ });
498
+ const calendarCellDate = tailwindVariants.tv({
499
+ base: `
500
+ w-full
501
+ h-full
502
+ flex
503
+ items-center
504
+ justify-center
505
+ cursor-pointer
506
+ transition-all
507
+ duration-100
508
+ ease-in-out
509
+ relative
510
+ `,
511
+ variants: {
512
+ isSelected: {
513
+ true: `
514
+ bg-color-1-400
515
+ text-white
516
+ hover:bg-color-1-500
517
+ `,
518
+ false: `
519
+ rounded-full
520
+ hover:text-white
521
+ hover:bg-color-1-400
522
+ `
523
+ },
524
+ isInvalid: {
525
+ true: "",
526
+ fasle: ""
527
+ },
528
+ isDisabled: {
529
+ true: "opacity-50",
530
+ false: ""
531
+ },
532
+ isUnavailable: {
533
+ true: "text-gray-200",
534
+ false: ""
535
+ },
536
+ isOutsideRange: {
537
+ true: `
538
+ text-black
539
+ before:content-['/']
540
+ before:text-gray-400
541
+ before:[font-weight:100]
542
+ before:text-4xl
543
+ before:absolute
544
+ before:inset-0
545
+ before:flex
546
+ before:items-center
547
+ before:justify-center
548
+ `,
549
+ false: ""
550
+ },
551
+ isOutsideVisibleRange: {
552
+ true: `text-gray-400`,
553
+ false: ""
554
+ },
555
+ isFocusVisible: {
556
+ true: "",
557
+ false: ""
558
+ },
559
+ isSelectionStart: {
560
+ true: "",
561
+ false: ""
562
+ },
563
+ isSelectionEnd: {
564
+ true: "",
565
+ false: ""
566
+ }
567
+ },
568
+ compoundVariants: [
569
+ {
570
+ isSelectionStart: [true, false],
571
+ isSelectionEnd: [true, false],
572
+ isDisabled: false,
573
+ isOutsideRange: false,
574
+ isUnavailable: false,
575
+ isInvalid: true,
576
+ class: `
577
+ bg-error-400
578
+ hover:bg-error-500
579
+ `
580
+ },
581
+ {
582
+ isSelectionStart: true,
583
+ class: `
584
+ rounded-l-full
585
+ bg-color-1-400
586
+ text-white
587
+ hover:bg-color-1-500
588
+ `
589
+ },
590
+ {
591
+ isSelectionEnd: true,
592
+ class: `
593
+ rounded-r-full
594
+ bg-color-1-400
595
+ text-white
596
+ hover:bg-color-1-500
597
+ `
598
+ }
599
+ ]
600
+ });
601
+ const calendarTheme = {
602
+ container: calendarContainer,
603
+ header: calendarHeader,
604
+ calendarHeaderContainer,
605
+ title: calendarTitle,
606
+ navigationButtonsContainer: calendarNavigationButtonsContainer,
607
+ navigationButtons: calendarNavigationButtons,
608
+ calendarTable,
609
+ calendarDayLabel,
610
+ cellContainer: calendarCellContainer,
611
+ cell: calendarCell,
612
+ cellDate: calendarCellDate
613
+ };
614
+ const carouselWrapper = tailwindVariants.tv({
615
+ base: "flex flex-wrap justify-between items-center gap-4 relative"
616
+ });
617
+ const carouselSwiperSwiper = tailwindVariants.tv({
618
+ base: `
619
+ basis-9/12
620
+ bg-color-1-300
621
+ m-2
622
+ rounded-lg
623
+ order-2
624
+ focus-visible:outline-2
625
+ focus-visible:outline-black
626
+ focus-visible:outline-offset-2
627
+ `
628
+ });
629
+ const carouselSwiperWrapper = tailwindVariants.tv({
630
+ base: ""
631
+ });
632
+ const carouselNavigationButton = tailwindVariants.tv({
633
+ extend: button,
634
+ base: "basis-1/12",
635
+ variants: {
636
+ order: {
637
+ prev: "order-1",
638
+ next: "order-3"
639
+ }
640
+ }
641
+ });
642
+ const carouselPaginationWrapper = tailwindVariants.tv({
643
+ base: "flex gap-4 justify-center z-10 bottom-4 left-0 right-0 order-4 basis-full"
644
+ });
645
+ const carouselPaginationBullet = tailwindVariants.tv({
646
+ base: "w-4 h-4 rounded-full block bg-color-1-600 focus-ring-black",
647
+ variants: {
648
+ active: {
649
+ true: "bg-color-1-100",
650
+ false: ""
651
+ }
652
+ }
653
+ });
654
+ const carouselPaginationFractionWrapper = tailwindVariants.tv({
655
+ base: "bg-color-1-300 rounded-lg p-2"
656
+ });
657
+ const carouselSlideWrapper = tailwindVariants.tv({
658
+ base: "px-4 flex flex-col justify-center h-full"
659
+ });
660
+ const carouselSlideContainer = tailwindVariants.tv({
661
+ base: "flex flex-col gap-2 bg-color-1-400 my-4 rounded-lg p-4"
662
+ });
663
+ const carouselSlideTitle = tailwindVariants.tv({
664
+ extend: typography,
665
+ defaultVariants: {
666
+ size: "h3"
667
+ }
668
+ });
669
+ const carouselTheme = {
670
+ carouselWrapper,
671
+ swiper: {
672
+ swiper: carouselSwiperSwiper,
673
+ wrapper: carouselSwiperWrapper
674
+ },
675
+ navigation: {
676
+ button: carouselNavigationButton
677
+ },
678
+ pagination: {
679
+ wrapper: carouselPaginationWrapper,
680
+ bullet: carouselPaginationBullet,
681
+ fraction: {
682
+ wrapper: carouselPaginationFractionWrapper
683
+ }
684
+ },
685
+ slide: {
686
+ wrapper: carouselSlideWrapper,
687
+ container: carouselSlideContainer,
688
+ title: carouselSlideTitle
689
+ }
690
+ };
691
+ const checkboxContainer = tailwindVariants.tv({
692
+ base: "flex focus-ring-black"
693
+ });
694
+ const checkboxLabel = tailwindVariants.tv({
695
+ base: `hover:cursor-pointer`,
696
+ variants: {
697
+ color: {
698
+ gray: "text-gray-300",
699
+ black: "text-black"
700
+ },
701
+ isDisabled: {
702
+ true: "text-gray-6"
703
+ }
704
+ },
705
+ defaultVariants: {
706
+ color: "black"
707
+ }
708
+ });
709
+ const checkBox = tailwindVariants.tv({
710
+ 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`,
711
+ variants: {
712
+ isDisabled: {
713
+ true: "border-gray-6"
714
+ },
715
+ isFocused: {
716
+ true: `outline-black [outline-offset: 2px]`
717
+ },
718
+ isError: {
719
+ true: "border-red-500"
720
+ }
721
+ }
722
+ });
723
+ const checkMark = tailwindVariants.tv({
724
+ base: `hidden w-4 h-4 bg-gray-300 rounded-full`,
725
+ variants: {
726
+ selected: {
727
+ true: "block text-white"
728
+ }
729
+ }
730
+ });
731
+ const checkMarkIcon = tailwindVariants.tv({
732
+ base: "text-white w-4 h-4 [&_svg]:w-4 [&_svg]:h-4"
733
+ });
734
+ const checkboxGroup = tailwindVariants.tv({
735
+ base: `block`,
736
+ variants: {
737
+ isDisabled: {
738
+ true: "opacity-60 pointer-events-none"
739
+ }
740
+ }
741
+ });
742
+ const checkboxGroupItemsGroup = tailwindVariants.tv({
743
+ base: `flex flex-col gap-4 py-8`
744
+ });
745
+ const listBoxWrapper = tailwindVariants.tv({
746
+ base: "flex flex-col gap-2"
747
+ });
748
+ const listBoxLabel = tailwindVariants.tv({
749
+ extend: typography,
750
+ defaultVariants: {
751
+ size: "h3"
752
+ }
753
+ });
754
+ const listBoxList = tailwindVariants.tv({
755
+ base: "flex flex-col gap-2"
756
+ });
757
+ const listBoxSectionWrapper = tailwindVariants.tv({
758
+ base: "flex flex-col gap-2 pt-2 mb-2 border-t border-border first:border-t-0 first:pt-0 last:mb-0"
759
+ });
760
+ const listBoxSectionHeading = tailwindVariants.tv({
761
+ extend: typography,
762
+ defaultVariants: {
763
+ size: "h4"
764
+ }
765
+ });
766
+ const listBoxSectionGroup = tailwindVariants.tv({
767
+ base: "flex flex-col gap-2"
768
+ });
769
+ const listBoxOptionOption = tailwindVariants.tv({
770
+ extend: typography,
771
+ base: "p-1 rounded-md",
772
+ variants: {
773
+ isSelectable: {
774
+ true: "cursor-pointer"
775
+ },
776
+ isLink: {
777
+ 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",
778
+ false: ""
779
+ },
780
+ isFocused: {
781
+ true: "outline outline-2 outline-offset-1 outline-gray-400"
782
+ },
783
+ isFocusVisible: {
784
+ true: "outline outline-4 outline-offset-2 outline-black"
785
+ },
786
+ isSelected: {
787
+ true: "bg-color-1-400 text-white hover:bg-color-1-500 active:bg-color-1-600"
788
+ },
789
+ isDisabled: {
790
+ true: "opacity-50 pointer-events-none"
791
+ },
792
+ allowsSelection: {
793
+ true: ""
794
+ }
795
+ },
796
+ defaultVariants: {
797
+ size: "paragraph"
798
+ },
799
+ compoundVariants: [
800
+ {
801
+ isFocused: true,
802
+ isFocusVisible: true,
803
+ className: "outline outline-4 outline-offset-2 outline-black"
804
+ },
805
+ {
806
+ isSelectable: true,
807
+ isLink: false,
808
+ className: "hover:bg-color-1-100 active:bg-color-1-200"
809
+ }
810
+ ]
811
+ });
812
+ const listBoxOptionLabel = tailwindVariants.tv({
813
+ extend: typography,
814
+ defaultVariants: {
815
+ size: "h5"
816
+ }
817
+ });
818
+ const listBoxOptionDescription = tailwindVariants.tv({
819
+ extend: typography,
820
+ defaultVariants: {
821
+ size: "footnotes"
822
+ }
823
+ });
824
+ const listBoxErrorMessage = tailwindVariants.tv({
825
+ extend: typography,
826
+ defaultVariants: {
827
+ size: "footnotes",
828
+ isError: true
829
+ }
830
+ });
831
+ const itemTheme = {
832
+ option: listBoxOptionOption,
833
+ label: listBoxOptionLabel,
834
+ description: listBoxOptionDescription
835
+ };
836
+ const listBoxTheme = {
837
+ wrapper: listBoxWrapper,
838
+ label: listBoxLabel,
839
+ list: listBoxList,
840
+ section: {
841
+ wrapper: listBoxSectionWrapper,
842
+ heading: listBoxSectionHeading,
843
+ group: listBoxSectionGroup,
844
+ item: itemTheme
845
+ },
846
+ item: itemTheme,
847
+ errorMessage: listBoxErrorMessage
848
+ };
849
+ const comboBoxButton = tailwindVariants.tv({
850
+ base: [
851
+ button.base,
852
+ `
853
+ px-4
854
+ py-2
855
+ text-white
856
+ bg-color-1-500
857
+ `
858
+ ],
859
+ variants: {
860
+ isOpen: {
861
+ true: "pointer-events-none",
862
+ false: "hover:bg-color-1-400 active:bg-color-1-400"
863
+ }
864
+ }
865
+ });
866
+ const comboBoxTheme = {
867
+ wrapper: () => "flex flex-col gap-4 relative",
868
+ label: (props) => typography({ ...props, className: "text-gray-3" }),
869
+ container: () => "flex flex-col gap-4",
870
+ 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",
871
+ button: comboBoxButton,
872
+ popover: {
873
+ 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"
874
+ },
875
+ listContainer: (props) => typography({
876
+ ...props,
877
+ 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"
878
+ }),
879
+ ul: (props) => typography({
880
+ ...props,
881
+ className: "w-full flex flex-col gap-6"
882
+ }),
883
+ li: () => "transition w-full hover:text-gray-300 focus-ring-white",
884
+ group: () => "flex flex-col gap-4",
885
+ section: () => "flex flex-col gap-4",
886
+ list: {
887
+ ...listBoxTheme
888
+ },
889
+ headerText: () => "text-gray-300",
890
+ noResults: () => "p-4 text-center",
891
+ noResultsText: (props) => typography({ ...props, className: "text-gray-400" }),
892
+ errorMessage: (props) => typography({ ...props, size: "footnotes", isError: true })
893
+ };
894
+ const focusable = tailwindVariants.tv({
895
+ base: `
896
+ focus-ring-black
897
+ transition-all
898
+ duration-200
899
+ `
900
+ });
901
+ const datePickerContainer = tailwindVariants.tv({
902
+ base: "relative inline-flex flex-col text-left"
903
+ });
904
+ const datePickerButton = tailwindVariants.tv({
905
+ extend: focusable,
906
+ base: "flex gap-4 justify-between items-center border-2 border-color-1-500 rounded-md bg-gray-100 p-4",
907
+ variants: {
908
+ dateFieldShown: {
909
+ true: "w-full",
910
+ false: "w-fit"
911
+ },
912
+ isInvalid: {
913
+ true: "bg-red-100 border-red-500",
914
+ false: "bg-gray-100 border-color-1-500"
915
+ }
916
+ },
917
+ defaultVariants: {
918
+ dateFieldShown: true
919
+ }
920
+ });
921
+ const datePickerIcon = tailwindVariants.tv({
922
+ base: "text-white bg-color-1-500 rounded-md h-full p-2"
923
+ });
924
+ const datePickerLabel = tailwindVariants.tv({
925
+ base: "text-color-1-500 font-bold pb-2 text-2xl"
926
+ });
927
+ const datePickerWrapper = tailwindVariants.tv({
928
+ base: "w-fit flex flex-col gap-4"
929
+ });
930
+ const datePickerCalendarPopoverUnderlay = tailwindVariants.tv({
931
+ base: "fixed inset-0"
932
+ });
933
+ const datePickerCalendarPopoverContainer = tailwindVariants.tv({
934
+ base: "absolute top-full bg-white border border-gray-300 rounded-md shadow-lg mt-2 p-8 z-10"
935
+ });
936
+ const datePickerDialog = tailwindVariants.tv({
937
+ base: "flex flex-col gap-4"
938
+ });
939
+ const datePickerDateFieldContainer = tailwindVariants.tv({
940
+ base: "flex gap-2 items-center justify-between",
941
+ defaultVariants: {
942
+ dateFieldShown: true
943
+ },
944
+ variants: {
945
+ dateFieldShown: {
946
+ true: "",
947
+ false: "hidden"
948
+ }
949
+ }
950
+ });
951
+ const datePickerDateField = tailwindVariants.tv({
952
+ base: "flex bg-gray-300 p-2 rounded-md"
953
+ });
954
+ const datePickerDateSegment = tailwindVariants.tv({
955
+ extend: focusable,
956
+ base: `rounded-sm p-1 focus:bg-color-1-400 focus:text-white`
957
+ });
958
+ const datePickerInvalidIndicator = tailwindVariants.tv({
959
+ base: "rounded-lg p-2 border-2 border-red-500",
960
+ variants: {
961
+ position: {
962
+ inner: "text-red-500 bg-white",
963
+ outer: "text-black bg-red-100"
964
+ }
965
+ }
966
+ });
967
+ const datePickerTheme = {
968
+ container: datePickerContainer,
969
+ wrapper: datePickerWrapper,
970
+ button: datePickerButton,
971
+ icon: datePickerIcon,
972
+ dateField: datePickerDateField,
973
+ dateSegment: datePickerDateSegment,
974
+ label: datePickerLabel,
975
+ calendarPopover: datePickerCalendarPopoverContainer,
976
+ calendarUnderlay: datePickerCalendarPopoverUnderlay,
977
+ dialog: datePickerDialog,
978
+ dateFieldContainer: datePickerDateFieldContainer,
979
+ invalidIndicator: datePickerInvalidIndicator
980
+ };
981
+ const imgStyles = tailwindVariants.tv({
982
+ base: "object-contain"
983
+ });
984
+ const imgTheme = (props) => imgStyles(props);
985
+ const lightBoxWrapper = tailwindVariants.tv({
986
+ base: "focus-ring-black"
987
+ });
988
+ const lightBoxContainer = tailwindVariants.tv({
989
+ base: `rounded-3xl overflow-hidden`
990
+ });
991
+ const lightBoxCloseBtn = tailwindVariants.tv({
992
+ base: `
993
+ absolute
994
+ xl:top-10
995
+ xl:right-20
996
+ lg:top-8
997
+ lg:right-8
998
+ z-[10000]
999
+ top-4
1000
+ right-4
1001
+ size-10
1002
+ focus-ring-black
1003
+ `
1004
+ });
1005
+ const lightBoxLabel = tailwindVariants.tv({
1006
+ extend: typography,
1007
+ base: "sr-only"
1008
+ });
1009
+ const lightBoxModalUnderlay = tailwindVariants.tv({
1010
+ base: "w-screen h-screen bg-black/50 absolute top-0 left-0 flex justify-center items-center"
1011
+ });
1012
+ const lightBoxModalOverlay = tailwindVariants.tv({
1013
+ base: ""
1014
+ });
1015
+ const lightBoxModalDialog = tailwindVariants.tv({
1016
+ base: "flex flex-col gap-4 items-center"
1017
+ });
1018
+ const lightboxTheme = {
1019
+ wrapper: lightBoxWrapper,
1020
+ container: lightBoxContainer,
1021
+ label: lightBoxLabel,
1022
+ closeBtn: lightBoxCloseBtn,
1023
+ modal: {
1024
+ underlay: lightBoxModalUnderlay,
1025
+ overlay: lightBoxModalOverlay,
1026
+ dialog: lightBoxModalDialog
1027
+ }
1028
+ };
1029
+ const popoverPopover = tailwindVariants.tv({
1030
+ base: "border-2 text-black p-4 bg-gray-300"
1031
+ });
1032
+ const popoverUnderlay = tailwindVariants.tv({});
1033
+ const popoverArrow = tailwindVariants.tv({});
1034
+ const popoverButton = tailwindVariants.tv({
1035
+ extend: button
1036
+ });
1037
+ const popoverTheme = {
1038
+ popover: popoverPopover,
1039
+ underlay: popoverUnderlay,
1040
+ arrow: popoverArrow,
1041
+ button: popoverButton
1042
+ };
1043
+ const printButton = tailwindVariants.tv({
1044
+ 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"
1045
+ });
1046
+ const printButtonIcon = tailwindVariants.tv({
1047
+ base: "text-white"
1048
+ });
1049
+ const radioLabel = tailwindVariants.tv({
1050
+ base: `text-black flex flex-row items-center hover:cursor-pointer focus-ring-black`,
1051
+ variants: {
1052
+ isDisabled: {
1053
+ true: "text-gray-6"
1054
+ }
1055
+ }
1056
+ });
1057
+ const radio = tailwindVariants.tv({
1058
+ 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`,
1059
+ variants: {
1060
+ isDisabled: {
1061
+ true: "border-gray-6"
1062
+ },
1063
+ isFocused: {
1064
+ true: `outline-black [outline-offset: 2px]`
1065
+ }
1066
+ }
1067
+ });
1068
+ const selectedMark = tailwindVariants.tv({
1069
+ base: `hidden w-4 h-4 bg-gray-300 rounded-full`,
1070
+ variants: {
1071
+ selected: {
1072
+ true: "block text-white"
1073
+ }
1074
+ }
1075
+ });
1076
+ const radioGroup = tailwindVariants.tv({
1077
+ base: `block`,
1078
+ variants: {
1079
+ isDisabled: {
1080
+ true: "opacity-60 pointer-events-none"
1081
+ }
1082
+ }
1083
+ });
1084
+ const radioGroupItemsGroup = tailwindVariants.tv({
1085
+ base: `flex flex-col gap-4 py-8`
1086
+ });
1087
+ const searchInput = tailwindVariants.tv({
1088
+ base: "p-4 w-full outline-0 search-cancel:appearance-none",
1089
+ variants: {
1090
+ isDisabled: {
1091
+ true: "opacity-60 pointer-events-none"
1092
+ }
1093
+ }
1094
+ });
1095
+ const searchIcon = tailwindVariants.tv({
1096
+ base: `
1097
+ box-border
1098
+ absolute
1099
+ right-4
1100
+ focus-ring-black
1101
+ outline-0
1102
+ `
1103
+ });
1104
+ const shareButtonContainer = tailwindVariants.tv({
1105
+ base: "flex print:hidden relative",
1106
+ defaultVariants: {
1107
+ listDirection: "row"
1108
+ },
1109
+ variants: {
1110
+ listDirection: {
1111
+ row: "flex-row",
1112
+ column: "flex-col"
1113
+ }
1114
+ }
1115
+ });
1116
+ const shareButton = tailwindVariants.tv({
1117
+ 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",
1118
+ variants: {
1119
+ isOpen: {
1120
+ true: "",
1121
+ false: ""
1122
+ }
1123
+ }
1124
+ });
1125
+ const shareButtonLinksList = tailwindVariants.tv({
1126
+ 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",
1127
+ defaultVariants: {
1128
+ listDirection: "row"
1129
+ },
1130
+ variants: {
1131
+ listDirection: {
1132
+ row: "flex-row pl-14 h-16 left-0",
1133
+ column: "flex-col [width:calc(100% + .5rem)] pt-14 w-16 top-0"
1134
+ },
1135
+ isOpen: {
1136
+ true: "opacity-100 visible",
1137
+ false: ""
1138
+ }
1139
+ }
1140
+ });
1141
+ const shareButtonLink = tailwindVariants.tv({
1142
+ base: `
1143
+ flex
1144
+ items-center
1145
+ justify-center
1146
+ cursor-pointer
1147
+ bg-color-1-200
1148
+ hover:bg-color-1-300
1149
+ w-full
1150
+ text-color-1-500
1151
+ rounded-none
1152
+ p-2
1153
+ focus-ring-black
1154
+ z-10
1155
+ has-focus-ring:z-20
1156
+ `,
1157
+ defaultVariants: {
1158
+ listDirection: "row"
1159
+ },
1160
+ variants: {
1161
+ listDirection: {
1162
+ row: "last:rounded-r-full h-full",
1163
+ column: "last:rounded-b-full"
1164
+ }
1165
+ }
1166
+ });
1167
+ const shareButtonIcon = tailwindVariants.tv({
1168
+ base: "text-white"
1169
+ });
1170
+ const shareButtonLinkIcons = tailwindVariants.tv({
1171
+ base: ""
1172
+ });
1173
+ const sidePanelWrapper = tailwindVariants.tv({
1174
+ base: "m-auto fixed right-0 top-0 bottom-0 w-full max-w-[512px] [&>div]:h-full"
1175
+ });
1176
+ const sidePanelContainer = tailwindVariants.tv({ base: "h-full w-full flex justify-end" });
1177
+ const sidePanelInnerContainer = tailwindVariants.tv({ base: "bg-gray-300 h-full w-full overflow-y-auto" });
1178
+ const skipToMain = tailwindVariants.tv({
1179
+ extend: button,
1180
+ base: `
1181
+ left-1/2
1182
+ absolute
1183
+ -translate-x-1/2
1184
+ -translate-y-[300px]
1185
+ transition-transform
1186
+ focus:-translate-x-1/2
1187
+ focus:translate-y-[75px]
1188
+ `
1189
+ });
1190
+ const tabListWrapper = tailwindVariants.tv({
1191
+ base: `
1192
+ flex
1193
+ flex-col
1194
+ gap-4
1195
+ `
1196
+ });
1197
+ const tabListContainer = tailwindVariants.tv({
1198
+ base: `
1199
+ flex
1200
+ gap-4
1201
+ `,
1202
+ variants: {
1203
+ orientation: {
1204
+ horizontal: "flex-col",
1205
+ vertical: "flex-row"
1206
+ }
1207
+ }
1208
+ });
1209
+ const tabListList = tailwindVariants.tv({
1210
+ base: `
1211
+ flex
1212
+ flex-wrap
1213
+ gap-4
1214
+ `,
1215
+ variants: {
1216
+ orientation: {
1217
+ horizontal: "flex-row items-center",
1218
+ vertical: "flex-col items-end"
1219
+ }
1220
+ },
1221
+ defaultVariants: {
1222
+ orientation: "horizontal"
1223
+ }
1224
+ });
1225
+ const tabListLabel = tailwindVariants.tv({
1226
+ extend: typography,
1227
+ defaultVariants: {
1228
+ size: "h3"
1229
+ }
1230
+ });
1231
+ const tabListTabPanelTransition = tailwindVariants.tv({
1232
+ base: `
1233
+ focus-ring-black
1234
+ transition-all
1235
+ duration-200
1236
+ `
1237
+ });
1238
+ const tabListTabPanelContainer = tailwindVariants.tv({
1239
+ base: `
1240
+ mt-4
1241
+ p-4
1242
+ bg-color-1-100
1243
+ rounded-md
1244
+ focus-ring-black
1245
+ transition-all
1246
+ duration-200
1247
+ `
1248
+ });
1249
+ const tabListTab = tailwindVariants.tv({
1250
+ extend: typography,
1251
+ base: `
1252
+ focus-ring-black
1253
+ transition-all
1254
+ duration-200
1255
+ px-4
1256
+ py-2
1257
+ `,
1258
+ variants: {
1259
+ orientation: {
1260
+ horizontal: "border-b border-b-4",
1261
+ vertical: "border-r border-r-4"
1262
+ },
1263
+ isSelected: {
1264
+ true: `
1265
+ border-color-1-500
1266
+ hover:border-color-1-900
1267
+ active:border-color-1-900
1268
+ `,
1269
+ false: `
1270
+ border-color-1-200
1271
+ hover:border-color-1-400
1272
+ active:border-color-1-400
1273
+ `
1274
+ },
1275
+ isDisabled: {
1276
+ true: `
1277
+ opacity-30
1278
+ pointer-events-none
1279
+ `
1280
+ },
1281
+ isFocusVisible: {
1282
+ true: `has-focus-ring`
1283
+ }
1284
+ },
1285
+ defaultVariants: {
1286
+ size: "h6"
1287
+ }
1288
+ });
1289
+ const tabListTheme = {
1290
+ wrapper: tabListWrapper,
1291
+ container: tabListContainer,
1292
+ list: tabListList,
1293
+ label: tabListLabel,
1294
+ panel: {
1295
+ transition: tabListTabPanelTransition,
1296
+ container: tabListTabPanelContainer
1297
+ },
1298
+ tab: tabListTab
1299
+ };
1300
+ const tagGroupWrapper = tailwindVariants.tv({
1301
+ base: `
1302
+ flex
1303
+ flex-col
1304
+ gap-4
1305
+ `
1306
+ });
1307
+ const tagGroupTags = tailwindVariants.tv({
1308
+ base: `
1309
+ w-full
1310
+ flex
1311
+ flex-wrap
1312
+ gap-2
1313
+ `
1314
+ });
1315
+ const tagGroupLabel = tailwindVariants.tv({
1316
+ extend: typography,
1317
+ defaultVariants: {
1318
+ size: "h4"
1319
+ }
1320
+ });
1321
+ const tagGroupDescription = tailwindVariants.tv({
1322
+ extend: typography,
1323
+ defaultVariants: {
1324
+ size: "paragraph"
1325
+ }
1326
+ });
1327
+ const tagGroupErrorMessage = tailwindVariants.tv({
1328
+ extend: typography,
1329
+ defaultVariants: {
1330
+ size: "paragraph",
1331
+ isError: true
1332
+ }
1333
+ });
1334
+ const tagGroupTagWrapper = tailwindVariants.tv({
1335
+ base: `
1336
+ focus-visible:outline
1337
+ focus-visible:outline-offset-2
1338
+ focus-visible:outline-2
1339
+ focus-visible:outline-black
1340
+ cursor-pointer
1341
+ transition-all
1342
+ duration-200
1343
+ `,
1344
+ variants: {
1345
+ isSelected: {
1346
+ true: `bg-color-1-800 text-white`
1347
+ },
1348
+ isDisabled: {
1349
+ true: `opacity-50 pointer-events-none`
1350
+ },
1351
+ isLink: {
1352
+ true: `
1353
+ border-b
1354
+ border-color-1-300
1355
+ px-2
1356
+ py-0.5
1357
+ mx-2
1358
+ text-color-1-500
1359
+ hover:text-color-1-700
1360
+ hover:border-color-1-700
1361
+ active:text-color-1-900
1362
+ active:border-color-1-900
1363
+ `,
1364
+ false: `
1365
+ p-2
1366
+ bg-color-1-200
1367
+ rounded-full
1368
+ hover:bg-color-1-300
1369
+ active:bg-color-1-400
1370
+ active:text-white
1371
+ `
1372
+ }
1373
+ },
1374
+ defaultVariants: {
1375
+ isLink: false
1376
+ }
1377
+ });
1378
+ const tagGroupTagContainer = tailwindVariants.tv({
1379
+ base: `
1380
+ flex
1381
+ items-center
1382
+ gap-2
1383
+ `
1384
+ });
1385
+ const tagGroupTagRemoveButton = tailwindVariants.tv({
1386
+ base: `
1387
+ aspect-square
1388
+ rounded-full
1389
+ bg-black/30
1390
+ p-1
1391
+ h-auto
1392
+ w-8
1393
+ `
1394
+ });
1395
+ const tagGroupTheme = {
1396
+ wrapper: tagGroupWrapper,
1397
+ tags: tagGroupTags,
1398
+ label: tagGroupLabel,
1399
+ description: tagGroupDescription,
1400
+ errorMessage: tagGroupErrorMessage,
1401
+ tag: {
1402
+ wrapper: tagGroupTagWrapper,
1403
+ container: tagGroupTagContainer,
1404
+ removeButton: tagGroupTagRemoveButton
1405
+ }
1406
+ };
1407
+ const textArea = tailwindVariants.tv({
1408
+ base: `
1409
+ w-full
1410
+ min-h-32
1411
+ rounded-2xl
1412
+ px-6
1413
+ h-12
1414
+ border-2
1415
+ border-solid
1416
+ transition
1417
+ duration-300
1418
+ ease-in-out
1419
+ text-gray-2
1420
+ placeholder:text-gray-2
1421
+ focus-ring-black
1422
+
1423
+ `,
1424
+ variants: {
1425
+ isError: {
1426
+ true: "border-red-500"
1427
+ }
1428
+ }
1429
+ });
1430
+ const textInputWrapper = tailwindVariants.tv({
1431
+ base: `
1432
+ relative
1433
+ group
1434
+ flex
1435
+ items-center
1436
+ gap-4
1437
+ rounded-md
1438
+ px-4
1439
+ py-1
1440
+ mb-3
1441
+ m-0.5
1442
+ border-2
1443
+ aria-disabled:pointer-events-none
1444
+ aria-disabled:opacity-30
1445
+ focus-ring-black
1446
+ `,
1447
+ variants: {
1448
+ isError: {
1449
+ true: `border-error`
1450
+ }
1451
+ }
1452
+ });
1453
+ const textInputInputWrapper = tailwindVariants.tv({
1454
+ base: `flex flex-col order-2`
1455
+ });
1456
+ const textInputContainer = tailwindVariants.tv({
1457
+ base: `flex items-center gap-2`
1458
+ });
1459
+ const textInputLabel = tailwindVariants.tv({
1460
+ base: `
1461
+ group-has-[:required]:after:content-["_*"]
1462
+ group-has-[:required]:after:text-red-500
1463
+ text-xs
1464
+ `
1465
+ });
1466
+ const textInputInput = tailwindVariants.tv({
1467
+ base: ``
1468
+ });
1469
+ const textInputErrorMessage = tailwindVariants.tv({
1470
+ extend: typography,
1471
+ base: `ml-0`,
1472
+ variants: {
1473
+ isError: {
1474
+ false: `hidden`
1475
+ }
1476
+ },
1477
+ defaultVariants: {
1478
+ isError: false,
1479
+ size: "footnotes"
1480
+ }
1481
+ });
1482
+ const textInputIcon = tailwindVariants.tv({
1483
+ base: [typography(), `order-1`],
1484
+ variants: {
1485
+ isDisabled: {
1486
+ true: `text-gray-300`
1487
+ },
1488
+ isError: {
1489
+ true: `hidden`
1490
+ }
1491
+ }
1492
+ });
1493
+ const textInputErrorIcon = tailwindVariants.tv({
1494
+ base: [typography({ isError: true }), `order-3`],
1495
+ variants: {
1496
+ isError: {
1497
+ false: `hidden`
1498
+ }
1499
+ }
1500
+ });
1501
+ const textInputTheme = {
1502
+ wrapper: textInputWrapper,
1503
+ container: textInputContainer,
1504
+ inputWrapper: textInputInputWrapper,
1505
+ label: textInputLabel,
1506
+ input: textInputInput,
1507
+ errorMessage: textInputErrorMessage,
1508
+ icon: textInputIcon,
1509
+ errorIcon: textInputErrorIcon
1510
+ };
1511
+ const BaseTheme = makeTheme({
1512
+ main: (props) => main(props),
1513
+ gridItem: (props) => gridItem(props),
1514
+ grid: (props) => grid(props),
1515
+ container: (props) => container(props),
1516
+ accordion: accordionTheme,
1517
+ carousel: carouselTheme,
1518
+ calendar: calendarTheme,
1519
+ datePicker: datePickerTheme,
1520
+ popover: popoverTheme,
1521
+ typography: (props) => typography(props),
1522
+ button: (props) => button(props),
1523
+ link: button,
1524
+ sidePanel: {
1525
+ wrapper: (props) => sidePanelWrapper(props),
1526
+ container: (props) => sidePanelContainer(props),
1527
+ innerContainer: (props) => sidePanelInnerContainer(props)
1528
+ },
1529
+ comboBox: comboBoxTheme,
1530
+ lightBox: lightboxTheme,
1531
+ printButton: {
1532
+ icon: (props) => printButtonIcon(props),
1533
+ button: (props) => printButton(props)
1534
+ },
1535
+ shareButton: {
1536
+ icon: (props) => shareButtonIcon(props),
1537
+ button: (props) => shareButton(props),
1538
+ container: (props) => shareButtonContainer(props),
1539
+ linksList: (props) => shareButtonLinksList(props),
1540
+ link: (props) => shareButtonLink(props),
1541
+ linkIcons: (props) => shareButtonLinkIcons(props)
1542
+ },
1543
+ skipToMain: (props) => skipToMain(props),
1544
+ checkbox: {
1545
+ container: (props) => checkboxContainer(props),
1546
+ label: (props) => checkboxLabel(props),
1547
+ checkBox: (props) => checkBox(props),
1548
+ checkMark: (props) => checkMark(props),
1549
+ checkMarkIcon: (props) => checkMarkIcon(props),
1550
+ errorMessage: (props) => typography(props)
1551
+ },
1552
+ radio: {
1553
+ label: (props) => radioLabel(props),
1554
+ radio: (props) => radio(props),
1555
+ selectedMark: (props) => selectedMark(props),
1556
+ errorMessage: (props) => typography(props)
1557
+ },
1558
+ radioGroup: {
1559
+ radioGroup: (props) => radioGroup(props),
1560
+ radioGroupItemsGroup: (props) => radioGroupItemsGroup(props),
1561
+ errorMessage: (props) => typography(props)
1562
+ },
1563
+ checkboxGroup: {
1564
+ checkboxGroup: (props) => checkboxGroup(props),
1565
+ checkboxGroupItemsGroup: (props) => checkboxGroupItemsGroup(props),
1566
+ errormessage: (props) => typography(props)
1567
+ },
1568
+ select: {
1569
+ button: (props) => button(props),
1570
+ ul: (props) => typography({
1571
+ ...props,
1572
+ className: "outline outline-2 outline-white outline-offset-2 p-2 my-4 rounded-md w-full flex flex-col gap-6"
1573
+ }),
1574
+ popover: (props) => button({ ...props, className: "w-[var(--select-container-width)]" }),
1575
+ errorMessage: (props) => typography({ ...props, size: "footnotes", isError: true }),
1576
+ wrapper: () => "flex flex-col gap-4 relative",
1577
+ container: () => "flex flex-col gap-4",
1578
+ list: () => "flex flex-col gap-4",
1579
+ li: () => "transition w-full hover:text-gray-300 focus-ring-white",
1580
+ headerText: () => "text-gray-300",
1581
+ section: () => "flex flex-col gap-4"
1582
+ },
1583
+ textarea: {
1584
+ wrapper: () => "flex flex-col",
1585
+ container: () => "flex items-center gap-4",
1586
+ label: () => "text-gray-3 px-6",
1587
+ input: (props) => textArea(props),
1588
+ errorMessage: (props) => typography({ ...props, size: "footnotes", isError: true })
1589
+ },
1590
+ textInput: textInputTheme,
1591
+ search: {
1592
+ wrapper: () => "min-w-fit sm:w-80 flex flex-col gap-2",
1593
+ container: () => "relative flex items-center outline outline-2 outline-gray-300 focus-within:outline focus-within:outline-black focus-within:outline-2",
1594
+ label: () => "text-gray-3",
1595
+ input: (props) => searchInput(props),
1596
+ icon: (props) => searchIcon(props),
1597
+ errorMessage: (props) => typography({ ...props, size: "footnotes", isError: true })
1598
+ },
1599
+ menu: {
1600
+ sidePanel: {
1601
+ wrapper: () => ``,
1602
+ container: () => "",
1603
+ innerContainer: () => ""
1604
+ },
1605
+ wrapper: () => ""
1606
+ },
1607
+ menuItem: {
1608
+ wrapper: () => ``,
1609
+ container: () => ``,
1610
+ innerContent: () => ``,
1611
+ button: () => ``,
1612
+ anchor: () => ``
1613
+ },
1614
+ img: imgTheme,
1615
+ alerts: alertsTheme,
1616
+ tagGroup: tagGroupTheme,
1617
+ tabList: tabListTheme,
1618
+ listBox: listBoxTheme
1619
+ });
1620
+ React.memo(createThemeProvider(BaseTheme));
1621
+ const useThemeContext = (func, props = {}, customTheme = null) => {
1622
+ const theme = useTheme();
1623
+ if (theme != null && func != null) {
1624
+ const { brandTheme } = theme;
1625
+ const themeFunc = radashi.get(brandTheme, func);
1626
+ if (typeof themeFunc === "function") {
1627
+ const returnValue = themeFunc == null ? void 0 : themeFunc(props);
1628
+ if (typeof returnValue === "string") {
1629
+ return returnValue;
1630
+ }
1631
+ }
1632
+ }
1633
+ if (!customTheme) {
1634
+ return void 0;
1635
+ }
1636
+ return customTheme;
1637
+ };
1638
+ const Typography = ({
1639
+ as: Component = "span",
1640
+ themeName = "typography",
1641
+ tokens,
1642
+ customTheme,
1643
+ children,
1644
+ ...rest
1645
+ }) => {
1646
+ const theme = useThemeContext(themeName, tokens, customTheme);
1647
+ return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest, className: theme, children });
1648
+ };
1649
+ React.forwardRef((props, ref) => {
1650
+ const { as: Component = "span", tokens, themeName = "typography", customTheme, children, ...rest } = props;
1651
+ const theme = useThemeContext(themeName, tokens, customTheme);
1652
+ return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest, ref, className: theme, children });
1653
+ });
1654
+ const [useAccordionCtx, AccordionProvider] = coreLib.createCtxNullable();
1655
+ const Box = ({
1656
+ as: Component = "div",
1657
+ themeName = "box",
1658
+ tokens,
1659
+ customTheme,
1660
+ children,
1661
+ className,
1662
+ ...rest
1663
+ }) => {
1664
+ const theme = useThemeContext(themeName, tokens, customTheme);
1665
+ return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest, className: theme, children });
1666
+ };
1667
+ const BoxWithForwardRef = React.forwardRef((props, ref) => {
1668
+ const { as: Component = "div", tokens, themeName = "box", customTheme, children, ...rest } = props;
1669
+ const theme = useThemeContext(themeName, tokens, customTheme);
1670
+ return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest, ref, className: theme, children });
1671
+ });
1672
+ const Anchor = React.forwardRef((props, forwardRef) => {
1673
+ var _a;
1674
+ const {
1675
+ as: Component = "a",
1676
+ handlePress,
1677
+ children,
1678
+ as,
1679
+ customTheme,
1680
+ tokens,
1681
+ themeName = "button",
1682
+ nextLinkProps: { onClick, ...nextLinkProps } = {},
1683
+ ...rest
1684
+ } = props;
1685
+ const { onPress, onFocusChange, excludeFromTabOrder, preventFocusOnPress, ...anchorProps } = rest;
1686
+ const ref = forwardRef;
1687
+ const { linkProps } = reactAria.useLink(
1688
+ {
1689
+ ...props,
1690
+ ...nextLinkProps,
1691
+ onClick: ({ currentTarget, ...e }) => {
1692
+ onClick == null ? void 0 : onClick({
1693
+ ...e,
1694
+ // @ts-expect-error Mismatch between react-aria and next/link. Happens since react-aria >3.36
1695
+ currentTarget
1696
+ });
1697
+ },
1698
+ href: props.href ?? ((_a = nextLinkProps == null ? void 0 : nextLinkProps.href) == null ? void 0 : _a.toString()),
1699
+ elementType: as == null ? void 0 : as.toString(),
1700
+ onPress: handlePress
1701
+ },
1702
+ forwardRef ?? ref
1703
+ );
1704
+ const theme = useThemeContext(themeName, tokens, customTheme);
1705
+ return /* @__PURE__ */ jsxRuntime.jsx(reactAria.FocusRing, { focusRingClass: "has-focus-ring", children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, ...linkProps, ...nextLinkProps, ...anchorProps, className: theme, children }) });
1706
+ });
1707
+ const Button = React.forwardRef((props, forwardRef) => {
1708
+ const {
1709
+ as: Component = "button",
1710
+ handlePress,
1711
+ children,
1712
+ as,
1713
+ customTheme,
1714
+ tokens,
1715
+ themeName = "button",
1716
+ isDisabled = false,
1717
+ ...rest
1718
+ } = props;
1719
+ const ref = forwardRef;
1720
+ const { buttonProps } = reactAria.useButton(
1721
+ { ...props, isDisabled, elementType: as, onPress: handlePress },
1722
+ forwardRef ?? ref
1723
+ );
1724
+ const theme = useThemeContext(themeName, tokens, customTheme);
1725
+ const { onPress, onFocusChange, excludeFromTabOrder, preventFocusOnPress, ...allProps } = rest;
1726
+ return /* @__PURE__ */ jsxRuntime.jsx(reactAria.FocusRing, { within: true, focusRingClass: "has-focus-ring", children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, ...buttonProps, ...allProps, className: theme, children }) });
1727
+ });
1728
+ const ButtonWithForwardRef = React.forwardRef(
1729
+ (props, ref) => {
1730
+ const { as } = props;
1731
+ if (as === "a") return /* @__PURE__ */ jsxRuntime.jsx(Anchor, { ref, ...props });
1732
+ return /* @__PURE__ */ jsxRuntime.jsx(Button, { ref, ...props });
1733
+ }
1734
+ );
1735
+ const ButtonComponent = (props) => {
1736
+ const { as } = props;
1737
+ const ref = React.useRef(null);
1738
+ if (as === "a") return /* @__PURE__ */ jsxRuntime.jsx(Anchor, { ref, ...props });
1739
+ return /* @__PURE__ */ jsxRuntime.jsx(Button, { ref, ...props });
1740
+ };
1741
+ ButtonComponent.displayName = "Button";
1742
+ const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
1743
+ const v = glob[path];
1744
+ if (v) {
1745
+ return typeof v === "function" ? v() : Promise.resolve(v);
1746
+ }
1747
+ return new Promise((_, reject) => {
1748
+ (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
1749
+ reject.bind(
1750
+ null,
1751
+ new Error(
1752
+ "Unknown variable dynamic import: " + path + (path.split("/").length !== segs ? ". Note that variables only represent file names one level deep." : "")
1753
+ )
1754
+ )
1755
+ );
1756
+ });
1757
+ };
1758
+ const SvgComponent$q = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: 48, width: 48, fill: "currentColor", ...props });
1759
+ const Fallback = React.memo(SvgComponent$q);
1760
+ const IconFallback = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
1761
+ __proto__: null,
1762
+ default: Fallback
1763
+ }, Symbol.toStringTag, { value: "Module" }));
1764
+ const Icon = (props) => {
1765
+ const { icon, ...rest } = props;
1766
+ 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]);
1767
+ 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 }) });
1768
+ };
1769
+ const IconDispatcher = (props) => {
1770
+ const { icon, as: Component = "span", tokens, customTheme, themeName = "icon", children, ...rest } = props;
1771
+ const theme = useThemeContext(themeName, tokens, customTheme);
1772
+ if (typeof icon !== "string") {
1773
+ return /* @__PURE__ */ jsxRuntime.jsxs(Component, { ...rest, className: theme, children: [
1774
+ children,
1775
+ icon
1776
+ ] });
1777
+ }
1778
+ return /* @__PURE__ */ jsxRuntime.jsxs(Component, { className: theme, children: [
1779
+ children,
1780
+ /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, ...rest })
1781
+ ] });
1782
+ };
1783
+ const [useSidePanel, SidePanelProvider] = coreLib.createCtx();
1784
+ const [useCarousel, CarouselProvider] = coreLib.createCtxNullable();
1785
+ const LegacyCarouselNavigationButton = React.forwardRef(
1786
+ (props, ref) => {
1787
+ const { themeName, tokens, customTheme, children, onSubmit, ...rest } = props;
1788
+ const { isDisabled } = rest;
1789
+ const { pressProps } = reactAria.usePress({
1790
+ onPress: () => onSubmit == null ? void 0 : onSubmit()
1791
+ });
1792
+ return /* @__PURE__ */ jsxRuntime.jsx(reactAria.FocusRing, { within: true, focusRingClass: "has-focus-ring", children: /* @__PURE__ */ jsxRuntime.jsx(
1793
+ ButtonWithForwardRef,
1794
+ {
1795
+ themeName,
1796
+ tokens,
1797
+ ref,
1798
+ ...pressProps,
1799
+ ...rest,
1800
+ ...{ "aria-disabled": isDisabled },
1801
+ children
1802
+ }
1803
+ ) });
1804
+ }
1805
+ );
1806
+ const LegacyCarouselNextNavigationButton = React.forwardRef(
1807
+ (props, ref) => {
1808
+ const { children, ...rest } = props;
1809
+ const { controller } = useCarousel();
1810
+ const { params, activeIndex = 1, slides } = controller ?? {};
1811
+ const { slidesPerView = 1, loop } = params ?? {};
1812
+ const slidesGroupIndex = Math.round(
1813
+ typeof slidesPerView === "number" ? (activeIndex + 1) / slidesPerView : activeIndex
1814
+ );
1815
+ const slidesGroupLength = Math.round(
1816
+ slides && typeof slidesPerView === "number" ? slides.length / slidesPerView : (slides == null ? void 0 : slides.length) ?? 1
1817
+ );
1818
+ const allowNavigateNext = slidesGroupIndex < slidesGroupLength;
1819
+ const disabled = !loop && !allowNavigateNext;
1820
+ return /* @__PURE__ */ jsxRuntime.jsx(
1821
+ LegacyCarouselNavigationButton,
1822
+ {
1823
+ onSubmit: () => controller == null ? void 0 : controller.slideNext(),
1824
+ ...rest,
1825
+ ref,
1826
+ isDisabled: disabled,
1827
+ children: children || /* @__PURE__ */ jsxRuntime.jsx(IconDispatcher, { icon: "ArrowRight" })
1828
+ }
1829
+ );
1830
+ }
1831
+ );
1832
+ const LegacyCarouselPrevNavigationButton = React.forwardRef(
1833
+ (props, ref) => {
1834
+ const { children, ...rest } = props;
1835
+ const { controller } = useCarousel();
1836
+ const { params, activeIndex = 1 } = controller ?? {};
1837
+ const { loop } = params ?? {};
1838
+ const allowNavigatePrev = activeIndex !== 0;
1839
+ const disabled = !loop && !allowNavigatePrev;
1840
+ return /* @__PURE__ */ jsxRuntime.jsx(
1841
+ LegacyCarouselNavigationButton,
1842
+ {
1843
+ onSubmit: () => controller == null ? void 0 : controller.slidePrev(),
1844
+ ...rest,
1845
+ ref,
1846
+ isDisabled: disabled,
1847
+ children: children || /* @__PURE__ */ jsxRuntime.jsx(IconDispatcher, { icon: "ArrowLeft" })
1848
+ }
1849
+ );
1850
+ }
1851
+ );
1852
+ LegacyCarouselNavigationButton.displayName = "LegacyCarouselNavigationButton";
1853
+ LegacyCarouselNextNavigationButton.displayName = "LegacyCarouselNextNavigationButton";
1854
+ LegacyCarouselPrevNavigationButton.displayName = "LegacyCarouselPrevNavigationButton";
1855
+ const logger = logger$1.createLogger("[StackUI]");
1856
+ const { log } = logger;
1857
+ const [useTranslation, TranslationProvider] = coreLib.createCtx();
1858
+ const [useUserQueryValHook, SearchProvider] = coreLib.createCtx();
1859
+ 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" }) });
1860
+ const CloseBtn = React.memo(SvgComponent$p, radashi.isEqual);
1861
+ const CloseBtn$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
1862
+ __proto__: null,
1863
+ default: CloseBtn
1864
+ }, Symbol.toStringTag, { value: "Module" }));
1865
+ 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: [
1866
+ /* @__PURE__ */ jsxRuntime.jsxs("g", { stroke: "currentColor", clipPath: "url(#a)", children: [
1867
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8.2727", cy: "8.2727", r: "7.2727" }),
1868
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.4551 13.4531L19.5005 19.4986" })
1869
+ ] }),
1870
+ /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "currentColor", d: "M0 0h14v14H0z" }) }) })
1871
+ ] });
1872
+ const Search = React.memo(SvgComponent$o, radashi.isEqual);
1873
+ const Search$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
1874
+ __proto__: null,
1875
+ default: Search
1876
+ }, Symbol.toStringTag, { value: "Module" }));
1877
+ React.createContext(null);
1878
+ const Wrapper = React.forwardRef((props, ref) => {
1879
+ const {
1880
+ themeName = "datePicker",
1881
+ tokens,
1882
+ groupProps,
1883
+ buttonProps,
1884
+ buttonLabel,
1885
+ buttonContent,
1886
+ icon,
1887
+ children
1888
+ } = props;
1889
+ return /* @__PURE__ */ jsxRuntime.jsxs(BoxWithForwardRef, { themeName: `${themeName}.wrapper`, tokens, ...groupProps, ref, children: [
1890
+ buttonLabel && /* @__PURE__ */ jsxRuntime.jsx(Typography, { themeName: `${themeName}.buttonLabel`, tokens, children: buttonLabel }),
1891
+ /* @__PURE__ */ jsxRuntime.jsx(Box, { themeName: `${themeName}.dateFieldContainer`, tokens, children }),
1892
+ /* @__PURE__ */ jsxRuntime.jsxs(
1893
+ ButtonComponent,
1894
+ {
1895
+ themeName: `${themeName}.button`,
1896
+ tokens,
1897
+ type: "button",
1898
+ ...buttonProps,
1899
+ handlePress: buttonProps.onPress,
1900
+ children: [
1901
+ buttonContent && /* @__PURE__ */ jsxRuntime.jsx(Typography, { themeName: `${themeName}.buttonContent`, tokens, children: buttonContent }),
1902
+ /* @__PURE__ */ jsxRuntime.jsx(IconDispatcher, { themeName: `${themeName}.icon`, tokens, icon: icon ?? "ArrowDown" })
1903
+ ]
1904
+ }
1905
+ )
1906
+ ] });
1907
+ });
1908
+ Wrapper.displayName = "Wrapper";
1909
+ React.createContext(null);
1910
+ const [useMenu, MenuProvider] = coreLib.createCtxNullable();
1911
+ const AlertsCloseButton = React.forwardRef((props, ref) => {
1912
+ const { themeName = "alerts.closeBtn", ...rest } = props;
1913
+ return /* @__PURE__ */ jsxRuntime.jsx(ButtonWithForwardRef, { ref, themeName, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(IconDispatcher, { icon: /* @__PURE__ */ jsxRuntime.jsx(CloseBtn, {}) }) });
1914
+ });
1915
+ AlertsCloseButton.displayName = "AlertsCloseButton";
1916
+ function mergeDefaultComponentProps(firstArg, ...args) {
1917
+ const allArgs = [firstArg, ...args];
1918
+ const mergedTokens = allArgs.reduce(
1919
+ (acc, curr) => curr && "tokens" in curr ? Object.assign(acc, curr == null ? void 0 : curr.tokens) : acc,
1920
+ {}
1921
+ );
1922
+ const mergedCustomThemes = allArgs.map((arg) => arg && "customTheme" in arg ? arg == null ? void 0 : arg.customTheme : void 0).filter((theme) => !radashi.isEmpty(theme)).join(" ");
1923
+ const mergedArgs = reactAria.mergeProps(...allArgs.filter((arg) => arg !== null));
1924
+ return { ...mergedArgs, tokens: mergedTokens, customTheme: mergedCustomThemes };
1925
+ }
1926
+ const Option = ({
1927
+ item,
1928
+ state,
1929
+ ...props
1930
+ }) => {
1931
+ const { key, rendered, type } = item;
1932
+ const {
1933
+ themeName = "option",
1934
+ tokens,
1935
+ as = "li",
1936
+ customTheme,
1937
+ linkElementType: LinkElement = Anchor,
1938
+ ...rest
1939
+ } = mergeDefaultComponentProps(props, item.props);
1940
+ const ref = React.useRef(null);
1941
+ const {
1942
+ optionProps,
1943
+ isFocused,
1944
+ isDisabled,
1945
+ isFocusVisible,
1946
+ isPressed,
1947
+ isSelected,
1948
+ allowsSelection,
1949
+ descriptionProps,
1950
+ labelProps,
1951
+ hasAction
1952
+ } = reactAria.useOption({ key }, state, ref);
1953
+ const isLink = state.selectionManager.isLink(key);
1954
+ const isSelectable = state.selectionManager.canSelectItem(key);
1955
+ const optionTokens = {
1956
+ ...tokens,
1957
+ type,
1958
+ isFocused,
1959
+ isDisabled,
1960
+ isFocusVisible,
1961
+ isPressed,
1962
+ isSelected,
1963
+ allowsSelection,
1964
+ hasAction,
1965
+ isLink,
1966
+ isSelectable
1967
+ };
1968
+ const Component = isLink ? LinkElement : BoxWithForwardRef;
1969
+ const elementType = isLink ? "a" : as;
1970
+ const renderChildren = () => {
1971
+ if (React.Children.count(rendered) > 1) {
1972
+ const [label, description] = React.Children.toArray(rendered);
1973
+ const isLabelValid = React.isValidElement(label);
1974
+ const isDescriptionValid = React.isValidElement(description);
1975
+ if (!isLabelValid && !isDescriptionValid) {
1976
+ return rendered;
1977
+ }
1978
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1979
+ isLabelValid && /* @__PURE__ */ jsxRuntime.jsx(Box, { themeName: `${themeName}.label`, tokens: optionTokens, children: React.cloneElement(label, labelProps) }),
1980
+ isDescriptionValid && /* @__PURE__ */ jsxRuntime.jsx(Box, { themeName: `${themeName}.description`, tokens: optionTokens, children: React.cloneElement(description, descriptionProps) })
1981
+ ] });
1982
+ }
1983
+ return rendered;
1984
+ };
1985
+ return /* @__PURE__ */ jsxRuntime.jsx(reactAria.FocusRing, { focusRingClass: "has-focus-ring", children: /* @__PURE__ */ jsxRuntime.jsx(
1986
+ Component,
1987
+ {
1988
+ as: elementType,
1989
+ ...reactAria.mergeProps(rest, optionProps),
1990
+ ref,
1991
+ themeName: `${themeName}.option`,
1992
+ tokens: optionTokens,
1993
+ customTheme,
1994
+ children: renderChildren()
1995
+ }
1996
+ ) });
1997
+ };
1998
+ const ListBoxSection = ({
1999
+ section,
2000
+ state,
2001
+ ...props
2002
+ }) => {
2003
+ var _a, _b;
2004
+ const { key, rendered, props: sectionProps, level, hasChildNodes, type } = section;
2005
+ const {
2006
+ themeName = "listBox.section",
2007
+ tokens,
2008
+ as = "li",
2009
+ customTheme,
2010
+ ...rest
2011
+ } = mergeDefaultComponentProps(props, sectionProps);
2012
+ const sectionTokens = {
2013
+ ...tokens,
2014
+ type,
2015
+ level: level.toString(),
2016
+ hasChildNodes
2017
+ };
2018
+ const { itemProps, headingProps, groupProps } = reactAria.useListBoxSection(props);
2019
+ return /* @__PURE__ */ jsxRuntime.jsxs(
2020
+ Box,
2021
+ {
2022
+ as,
2023
+ themeName: `${themeName}.wrapper`,
2024
+ tokens: sectionTokens,
2025
+ ...reactAria.mergeProps(utils.filterDOMProps(rest), itemProps),
2026
+ customTheme,
2027
+ children: [
2028
+ rendered && /* @__PURE__ */ jsxRuntime.jsx(Typography, { themeName: `${themeName}.heading`, tokens, ...headingProps, children: rendered }),
2029
+ /* @__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)) })
2030
+ ]
2031
+ }
2032
+ );
2033
+ };
2034
+ const itemComponents = {
2035
+ item: Option,
2036
+ section: ListBoxSection
2037
+ };
2038
+ const ControlledListBox = React.forwardRef(
2039
+ (props, listBoxRef) => {
2040
+ const {
2041
+ themeName = "listBox",
2042
+ tokens,
2043
+ customTheme,
2044
+ label,
2045
+ escapeKeyBehavior = "clearSelection",
2046
+ linkElementType = Anchor,
2047
+ isDisabled = false,
2048
+ isRequired = false,
2049
+ isInvalid = false,
2050
+ isError = false,
2051
+ errorMessage,
2052
+ disabledKeys,
2053
+ fieldRef,
2054
+ ...rest
2055
+ } = props;
2056
+ const state = reactStately.useListState(props);
2057
+ const keys = state.collection.getKeys();
2058
+ const mergeRefs = (newRef) => {
2059
+ if (newRef) {
2060
+ fieldRef == null ? void 0 : fieldRef(newRef);
2061
+ if (!listBoxRef) return;
2062
+ if (typeof listBoxRef === "function") {
2063
+ listBoxRef(newRef);
2064
+ } else {
2065
+ listBoxRef.current = newRef;
2066
+ }
2067
+ }
2068
+ };
2069
+ const { listBoxProps, labelProps } = reactAria.useListBox(
2070
+ {
2071
+ ...rest,
2072
+ escapeKeyBehavior,
2073
+ label,
2074
+ disabledKeys: isDisabled ? keys : disabledKeys
2075
+ },
2076
+ state,
2077
+ mergeRefs
2078
+ );
2079
+ const listBoxTokens = {
2080
+ ...tokens,
2081
+ isDisabled,
2082
+ isRequired,
2083
+ isInvalid,
2084
+ isError
2085
+ };
2086
+ return /* @__PURE__ */ jsxRuntime.jsxs(Box, { themeName: `${themeName}.wrapper`, tokens: listBoxTokens, customTheme, children: [
2087
+ label && /* @__PURE__ */ jsxRuntime.jsx(Typography, { ...labelProps, themeName: `${themeName}.label`, tokens: listBoxTokens, children: label }),
2088
+ /* @__PURE__ */ jsxRuntime.jsx(
2089
+ BoxWithForwardRef,
2090
+ {
2091
+ ref: listBoxRef,
2092
+ as: "ul",
2093
+ ...listBoxProps,
2094
+ themeName: `${themeName}.list`,
2095
+ tokens: listBoxTokens,
2096
+ children: [...state.collection].map((item) => {
2097
+ const { key } = item;
2098
+ const type = item.type ?? "item";
2099
+ const Component = itemComponents[type];
2100
+ return /* @__PURE__ */ jsxRuntime.jsx(
2101
+ Component,
2102
+ {
2103
+ ...{ [type]: item },
2104
+ state,
2105
+ tokens: { ...tokens, type },
2106
+ themeName: `${themeName}.${type}`,
2107
+ linkElementType
2108
+ },
2109
+ key
2110
+ );
2111
+ })
2112
+ }
2113
+ ),
2114
+ isError && errorMessage && /* @__PURE__ */ jsxRuntime.jsx(Typography, { themeName: `${themeName}.errorMessage`, tokens: listBoxTokens, children: errorMessage })
2115
+ ] });
2116
+ }
2117
+ );
2118
+ ControlledListBox.displayName = "ControlledListBox";
2119
+ const ControlledReactHookFormListBox = React.forwardRef((props, listBoxRef) => {
2120
+ const { name, rules, isRequired, isDisabled, tokens, selectionMode = "single", errorMessage, ...rest } = props;
2121
+ const { control, setValue, watch, getValues } = reactHookForm.useFormContext();
2122
+ const { selectedKeys = watch(name), defaultSelectedKeys = getValues(name) } = rest;
2123
+ const { t } = useTranslation();
2124
+ const mergedRules = {
2125
+ required: isRequired ? t("FORM.ERROR.REQUIRED") ?? "required" : false,
2126
+ disabled: isDisabled,
2127
+ ...rules
2128
+ };
2129
+ return /* @__PURE__ */ jsxRuntime.jsx(
2130
+ reactHookForm.Controller,
2131
+ {
2132
+ ...rest,
2133
+ defaultValue: defaultSelectedKeys,
2134
+ name,
2135
+ control,
2136
+ rules: mergedRules,
2137
+ disabled: mergedRules == null ? void 0 : mergedRules.disabled,
2138
+ render: ({ field, fieldState }) => {
2139
+ var _a;
2140
+ const { ref, ...fieldProps } = field;
2141
+ const isError = !radashi.isEmpty(fieldState.error);
2142
+ const validityField = {
2143
+ isDisabled: field.disabled ?? false,
2144
+ isRequired: (mergedRules == null ? void 0 : mergedRules.required) === true || (mergedRules == null ? void 0 : mergedRules.required) === "required",
2145
+ isInvalid: fieldState.invalid,
2146
+ isError
2147
+ };
2148
+ const validityTokens = {
2149
+ ...tokens,
2150
+ ...validityField
2151
+ };
2152
+ return /* @__PURE__ */ jsxRuntime.jsx(
2153
+ ControlledListBox,
2154
+ {
2155
+ ...utils.mergeProps(rest, fieldProps, validityField, {
2156
+ onSelectionChange: (keys) => {
2157
+ setValue(name, keys);
2158
+ }
2159
+ }),
2160
+ tokens: validityTokens,
2161
+ selectionMode,
2162
+ selectedKeys,
2163
+ defaultSelectedKeys,
2164
+ errorMessage: errorMessage ?? ((_a = fieldState.error) == null ? void 0 : _a.message),
2165
+ ref: listBoxRef
2166
+ }
2167
+ );
2168
+ }
2169
+ }
2170
+ );
2171
+ });
2172
+ ControlledReactHookFormListBox.displayName = "ControlledReactHookFormListBox";
2173
+ 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" }) });
2174
+ const ArrowDown = React.memo(SvgComponent$n, radashi.isEqual);
2175
+ const ArrowDown$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2176
+ __proto__: null,
2177
+ default: ArrowDown
2178
+ }, Symbol.toStringTag, { value: "Module" }));
2179
+ const ComboBoxButton = React.forwardRef((props, ref) => {
2180
+ const { state, handlePress: handlePressProp, ...rest } = props;
2181
+ const handlePress = React.useCallback(
2182
+ (e) => {
2183
+ state.setInputValue("");
2184
+ state.selectionManager.clearSelection();
2185
+ handlePressProp == null ? void 0 : handlePressProp(e);
2186
+ },
2187
+ [handlePressProp, state]
2188
+ );
2189
+ return /* @__PURE__ */ jsxRuntime.jsx(ButtonWithForwardRef, { ...rest, ref, handlePress });
2190
+ });
2191
+ ComboBoxButton.displayName = "ComboBoxButton";
2192
+ 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: [
2193
+ /* @__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" }) }),
2194
+ /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "currentColor", d: "M0 0h24v24H0z" }) }) })
2195
+ ] });
2196
+ const ArrowLeft = React.memo(SvgComponent$m, radashi.isEqual);
2197
+ const ArrowLeft$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2198
+ __proto__: null,
2199
+ default: ArrowLeft
2200
+ }, Symbol.toStringTag, { value: "Module" }));
2201
+ 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: [
2202
+ /* @__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" }) }),
2203
+ /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "currentColor", d: "M0 0h24v24H0z" }) }) })
2204
+ ] });
2205
+ const ArrowRight = React.memo(SvgComponent$l, radashi.isEqual);
2206
+ const ArrowRight$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2207
+ __proto__: null,
2208
+ default: ArrowRight
2209
+ }, Symbol.toStringTag, { value: "Module" }));
2210
+ 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" }) });
2211
+ const Check = React.memo(SvgComponent$k, radashi.isEqual);
2212
+ const Check$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2213
+ __proto__: null,
2214
+ default: Check
2215
+ }, Symbol.toStringTag, { value: "Module" }));
2216
+ 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" }) });
2217
+ const ChevronLeft = React.memo(SvgComponent$j, radashi.isEqual);
2218
+ const ChevronLeft$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2219
+ __proto__: null,
2220
+ default: ChevronLeft
2221
+ }, Symbol.toStringTag, { value: "Module" }));
2222
+ 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" }) });
2223
+ const ChevronRight = React.memo(SvgComponent$i, radashi.isEqual);
2224
+ const ChevronRight$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2225
+ __proto__: null,
2226
+ default: ChevronRight
2227
+ }, Symbol.toStringTag, { value: "Module" }));
2228
+ 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(
2229
+ "path",
2230
+ {
2231
+ 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",
2232
+ fill: "currentColor"
2233
+ }
2234
+ ) });
2235
+ const Facebook = React.memo(SvgComponent$h, radashi.isEqual);
2236
+ const Facebook$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2237
+ __proto__: null,
2238
+ default: Facebook
2239
+ }, Symbol.toStringTag, { value: "Module" }));
2240
+ 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(
2241
+ "path",
2242
+ {
2243
+ fill: "#3b5998",
2244
+ strokeMiterlimit: "10",
2245
+ strokeWidth: "0",
2246
+ 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"
2247
+ }
2248
+ ) });
2249
+ const FacebookColored = React.memo(SvgComponent$g, radashi.isEqual);
2250
+ const FacebookColored$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2251
+ __proto__: null,
2252
+ default: FacebookColored
2253
+ }, Symbol.toStringTag, { value: "Module" }));
2254
+ 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(
2255
+ "path",
2256
+ {
2257
+ fillRule: "evenodd",
2258
+ clipRule: "evenodd",
2259
+ 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",
2260
+ fill: "currentColor"
2261
+ }
2262
+ ) });
2263
+ const FacebookRounded = React.memo(SvgComponent$f, radashi.isEqual);
2264
+ const FacebookRounded$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2265
+ __proto__: null,
2266
+ default: FacebookRounded
2267
+ }, Symbol.toStringTag, { value: "Module" }));
2268
+ 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: [
2269
+ /* @__PURE__ */ jsxRuntime.jsx(
2270
+ "path",
2271
+ {
2272
+ 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",
2273
+ stroke: "currentColor",
2274
+ strokeWidth: "5",
2275
+ strokeLinecap: "round",
2276
+ strokeLinejoin: "round"
2277
+ }
2278
+ ),
2279
+ /* @__PURE__ */ jsxRuntime.jsx(
2280
+ "path",
2281
+ {
2282
+ 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",
2283
+ stroke: "currentColor",
2284
+ strokeWidth: "5",
2285
+ strokeLinecap: "round",
2286
+ strokeLinejoin: "round"
2287
+ }
2288
+ ),
2289
+ /* @__PURE__ */ jsxRuntime.jsx(
2290
+ "path",
2291
+ {
2292
+ 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",
2293
+ stroke: "currentColor",
2294
+ strokeWidth: "5",
2295
+ strokeLinecap: "round",
2296
+ strokeLinejoin: "round"
2297
+ }
2298
+ ),
2299
+ /* @__PURE__ */ jsxRuntime.jsx(
2300
+ "path",
2301
+ {
2302
+ 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",
2303
+ stroke: "currentColor",
2304
+ strokeWidth: "5",
2305
+ strokeLinecap: "round",
2306
+ strokeLinejoin: "round"
2307
+ }
2308
+ )
2309
+ ] });
2310
+ const Globe = React.memo(SvgComponent$e, radashi.isEqual);
2311
+ const Globe$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2312
+ __proto__: null,
2313
+ default: Globe
2314
+ }, Symbol.toStringTag, { value: "Module" }));
2315
+ 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: [
2316
+ /* @__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" }),
2317
+ /* @__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" })
2318
+ ] }) });
2319
+ const Instagram = React.memo(SvgComponent$d, radashi.isEqual);
2320
+ const Instagram$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2321
+ __proto__: null,
2322
+ default: Instagram
2323
+ }, Symbol.toStringTag, { value: "Module" }));
2324
+ 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: [
2325
+ /* @__PURE__ */ jsxRuntime.jsxs(
2326
+ "linearGradient",
2327
+ {
2328
+ id: "a",
2329
+ x1: "7.6",
2330
+ x2: "82.4",
2331
+ y1: "9.6",
2332
+ y2: "84.4",
2333
+ gradientTransform: "matrix(1 0 0 -1 0 92)",
2334
+ gradientUnits: "userSpaceOnUse",
2335
+ children: [
2336
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#ffd600" }),
2337
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "50%", stopColor: "#ff0100" }),
2338
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#d800b9" })
2339
+ ]
2340
+ }
2341
+ ),
2342
+ /* @__PURE__ */ jsxRuntime.jsx(
2343
+ "path",
2344
+ {
2345
+ fill: "url(#a)",
2346
+ 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"
2347
+ }
2348
+ ),
2349
+ /* @__PURE__ */ jsxRuntime.jsxs(
2350
+ "linearGradient",
2351
+ {
2352
+ id: "b",
2353
+ x1: "28.7",
2354
+ x2: "61.3",
2355
+ y1: "30.7",
2356
+ y2: "63.3",
2357
+ gradientTransform: "matrix(1 0 0 -1 0 92)",
2358
+ gradientUnits: "userSpaceOnUse",
2359
+ children: [
2360
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#ff6400" }),
2361
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "50%", stopColor: "#ff0100" }),
2362
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#fd0056" })
2363
+ ]
2364
+ }
2365
+ ),
2366
+ /* @__PURE__ */ jsxRuntime.jsx(
2367
+ "path",
2368
+ {
2369
+ fill: "url(#b)",
2370
+ 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"
2371
+ }
2372
+ ),
2373
+ /* @__PURE__ */ jsxRuntime.jsxs(
2374
+ "linearGradient",
2375
+ {
2376
+ id: "c",
2377
+ x1: "65.2",
2378
+ x2: "72.8",
2379
+ y1: "67.2",
2380
+ y2: "74.8",
2381
+ gradientTransform: "matrix(1 0 0 -1 0 92)",
2382
+ gradientUnits: "userSpaceOnUse",
2383
+ children: [
2384
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#f30072" }),
2385
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#e50097" })
2386
+ ]
2387
+ }
2388
+ ),
2389
+ /* @__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" })
2390
+ ] }) });
2391
+ const InstagramColored = React.memo(SvgComponent$c, radashi.isEqual);
2392
+ const InstagramColored$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2393
+ __proto__: null,
2394
+ default: InstagramColored
2395
+ }, Symbol.toStringTag, { value: "Module" }));
2396
+ 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: [
2397
+ /* @__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" }),
2398
+ /* @__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" })
2399
+ ] }) });
2400
+ const Link = React.memo(SvgComponent$b, radashi.isEqual);
2401
+ const Link$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2402
+ __proto__: null,
2403
+ default: Link
2404
+ }, Symbol.toStringTag, { value: "Module" }));
2405
+ 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(
2406
+ "path",
2407
+ {
2408
+ fillRule: "evenodd",
2409
+ clipRule: "evenodd",
2410
+ 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",
2411
+ fill: "currentColor"
2412
+ }
2413
+ ) });
2414
+ const LinkedIn = React.memo(SvgComponent$a, radashi.isEqual);
2415
+ const LinkedIn$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2416
+ __proto__: null,
2417
+ default: LinkedIn
2418
+ }, Symbol.toStringTag, { value: "Module" }));
2419
+ 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: [
2420
+ /* @__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" }),
2421
+ /* @__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" }),
2422
+ /* @__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)" }),
2423
+ /* @__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)" })
2424
+ ] }) });
2425
+ const Mail = React.memo(SvgComponent$9, radashi.isEqual);
2426
+ const Mail$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2427
+ __proto__: null,
2428
+ default: Mail
2429
+ }, Symbol.toStringTag, { value: "Module" }));
2430
+ const SvgComponent$8 = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { height: 48, width: 48, fill: "currentColor", ...props, xmlns: "http://www.w3.org/2000/svg", children: [
2431
+ /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "26", cy: "24.095", rx: "26", ry: "23.547", fill: "#fff" }),
2432
+ /* @__PURE__ */ jsxRuntime.jsx(
2433
+ "path",
2434
+ {
2435
+ d: "M37.742 24.095H14.258M26 13.46V34.73 13.46Z",
2436
+ stroke: "#9E9E9E",
2437
+ strokeWidth: "5",
2438
+ strokeLinecap: "round",
2439
+ strokeLinejoin: "round"
2440
+ }
2441
+ )
2442
+ ] });
2443
+ const Plus = React.memo(SvgComponent$8, radashi.isEqual);
2444
+ const Plus$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2445
+ __proto__: null,
2446
+ default: Plus
2447
+ }, Symbol.toStringTag, { value: "Module" }));
2448
+ 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(
2449
+ "path",
2450
+ {
2451
+ 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",
2452
+ fill: "currentColor"
2453
+ }
2454
+ ) });
2455
+ const Print = React.memo(SvgComponent$7, radashi.isEqual);
2456
+ const Print$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2457
+ __proto__: null,
2458
+ default: Print
2459
+ }, Symbol.toStringTag, { value: "Module" }));
2460
+ 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(
2461
+ "path",
2462
+ {
2463
+ fill: "currentColor",
2464
+ strokeMiterlimit: "10",
2465
+ strokeWidth: "0",
2466
+ 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"
2467
+ }
2468
+ ) });
2469
+ const Share = React.memo(SvgComponent$6, radashi.isEqual);
2470
+ const Share$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2471
+ __proto__: null,
2472
+ default: Share
2473
+ }, Symbol.toStringTag, { value: "Module" }));
2474
+ 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(
2475
+ "path",
2476
+ {
2477
+ fill: "currentColor",
2478
+ strokeMiterlimit: "10",
2479
+ strokeWidth: "0",
2480
+ 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"
2481
+ }
2482
+ ) });
2483
+ const Twitter = React.memo(SvgComponent$5, radashi.isEqual);
2484
+ const Twitter$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2485
+ __proto__: null,
2486
+ default: Twitter
2487
+ }, Symbol.toStringTag, { value: "Module" }));
2488
+ 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(
2489
+ "path",
2490
+ {
2491
+ fill: "#1da1f2",
2492
+ strokeMiterlimit: "10",
2493
+ strokeWidth: "0",
2494
+ 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"
2495
+ }
2496
+ ) });
2497
+ const TwitterColored = React.memo(SvgComponent$4, radashi.isEqual);
2498
+ const TwitterColored$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2499
+ __proto__: null,
2500
+ default: TwitterColored
2501
+ }, Symbol.toStringTag, { value: "Module" }));
2502
+ 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(
2503
+ "path",
2504
+ {
2505
+ 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",
2506
+ fill: "currentColor"
2507
+ }
2508
+ ) });
2509
+ const Upload = React.memo(SvgComponent$3, radashi.isEqual);
2510
+ const Upload$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2511
+ __proto__: null,
2512
+ default: Upload
2513
+ }, Symbol.toStringTag, { value: "Module" }));
2514
+ 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(
2515
+ "path",
2516
+ {
2517
+ 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",
2518
+ fill: "currentColor"
2519
+ }
2520
+ ) });
2521
+ const X = React.memo(SvgComponent$2, radashi.isEqual);
2522
+ const X$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2523
+ __proto__: null,
2524
+ default: X
2525
+ }, Symbol.toStringTag, { value: "Module" }));
2526
+ 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(
2527
+ "path",
2528
+ {
2529
+ fill: "currentColor",
2530
+ strokeMiterlimit: "10",
2531
+ strokeWidth: "0",
2532
+ 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"
2533
+ }
2534
+ ) });
2535
+ const YouTube = React.memo(SvgComponent$1, radashi.isEqual);
2536
+ const YouTube$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2537
+ __proto__: null,
2538
+ default: YouTube
2539
+ }, Symbol.toStringTag, { value: "Module" }));
2540
+ 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: [
2541
+ /* @__PURE__ */ jsxRuntime.jsx(
2542
+ "path",
2543
+ {
2544
+ fill: "red",
2545
+ 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"
2546
+ }
2547
+ ),
2548
+ /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#fff", d: "m102.57 165.8 65.7-37.94-65.7-37.94z" })
2549
+ ] }) });
2550
+ const YouTubeColored = React.memo(SvgComponent, radashi.isEqual);
2551
+ const YouTubeColored$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2552
+ __proto__: null,
2553
+ default: YouTubeColored
2554
+ }, Symbol.toStringTag, { value: "Module" }));
2555
+ const [useIsClient, IsClientProvider] = coreLib.createCtx();
2556
+ const [useDraftMode, DraftModeProvider] = coreLib.createCtx();
9
2557
  function createServerContext(defaultValue) {
10
- const getRef = react.cache(() => ({ current: defaultValue }));
2558
+ const getRef = React.cache(() => ({ current: defaultValue }));
11
2559
  const getValue = () => getRef().current;
12
2560
  const setValue = (value) => {
13
2561
  getRef().current = value;