@fileverse/ui 5.3.3 → 5.4.0-unstable-styles-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +27 -2
  2. package/dist/base.css +748 -0
  3. package/dist/index.css +2000 -2042
  4. package/package.json +13 -7
  5. package/tailwind/components.css +472 -0
  6. package/tailwind/preset.cjs +44 -0
package/dist/index.css CHANGED
@@ -499,874 +499,6 @@ video {
499
499
  [hidden]:where(:not([hidden="until-found"])) {
500
500
  display: none;
501
501
  }
502
- :root {
503
- --focused: 260, 100%, 52%, 1; /* Blue-700 */
504
- --radius: 0.5rem;
505
-
506
- /* Button */
507
- --color-button-default: 0, 0%, 0%, 1; /* Black */
508
- --color-button-default-hover: 207, 8%, 23%, 1; /* Gray-950 */
509
- --color-button-secondary: 0, 0%, 100%, 1; /* White */
510
- --color-button-secondary-hover: 200, 13%, 95%, 1; /* Gray-100 */
511
- --color-button-disabled: 195, 10%, 92%, 1; /* Gray-200 */
512
- --color-button-danger: 354, 96%, 59%, 1; /* Red-500 */
513
- --color-button-danger-hover: 354, 84%, 42%, 1; /* Red-700 */
514
- --color-button-floating: 0, 0%, 100%, 1; /* White */
515
- --color-button-floating-hover: 200, 13%, 95%, 1; /* Gray-100 */
516
-
517
- /* Text */
518
- --color-text-default: 207, 8%, 23%, 1; /* Gray-950 */
519
- --color-text-secondary: 208, 8%, 50%, 1; /* Gray-700 */
520
- --color-text-disabled: 206, 9%, 66%, 1; /* Gray-500 */
521
- --color-text-danger: 354, 96%, 59%, 1; /* Red-500 */
522
- --color-text-success: 127, 69%, 29%, 1; /* Green-700 */
523
- --color-text-inverse: 0, 0%, 100%, 1; /* White */
524
- --color-text-link: 260, 100%, 52%, 1; /* Blue-700 */
525
- --color-text-on-brand: 207, 8%, 23%, 1; /* Gray-950 */
526
-
527
- /* Background */
528
- --color-bg-default: 0, 0%, 100%, 1; /* White */
529
- --color-bg-default-hover: 200, 13%, 95%, 1; /* Gray-100 */
530
- --color-bg-default-active: 52, 100%, 52%, 1; /* Yellow-400 */
531
- --color-bg-default-selected: 210, 17%, 98%, 1; /* Gray-50 */
532
- --color-bg-secondary: 210, 17%, 98%, 1; /* Gray-50 */
533
- --color-bg-secondary-hover: 195, 10%, 92%, 1; /* Gray-200 */
534
- --color-bg-disabled: 195, 10%, 92%, 1; /* Gray-200 */
535
- --color-bg-brand: 52, 100%, 52%, 1; /* Yellow-400 */
536
- --color-bg-brand-hover: 50, 98%, 47%, 1; /* Yellow-500 */
537
- --color-bg-brand-light: 53, 100%, 90%, 1; /* Yellow-100 */
538
- --color-bg-danger: 354, 96%, 59%, 1; /* Red-500 */
539
- --color-bg-danger-light: 354, 100%, 94%, 1; /* Red-100 */
540
- --color-bg-default-inverse: 0, 0%, 0%, 1; /* Black */
541
- --color-bg-tertiary: 195, 10%, 92%, 1; /* Tertiary */
542
- --color-bg-success: 126, 73%, 39%, 1;
543
- --color-bg-success-light: 124, 79%, 93%, 1; /* Green-100 */
544
- --color-bg-info-light: 248, 100%, 97%, 1;
545
-
546
- /* Border */
547
- --color-border-default: 195, 10%, 92%, 1; /* Gray-200 */
548
- --color-border-hover: 203, 10%, 76%, 1;
549
- --color-border-light: 0, 0%, 100%, 1; /* White */
550
- --color-border-active: 0, 0%, 0%, 1; /* Black */
551
- --color-border-focused: 260, 100%, 52%, 1; /* Blue-700 */
552
- --color-border-warning: 18, 88%, 55%, 1; /* Red-500 */
553
- --color-border-danger: 354, 96%, 59%, 1; /* Red-500 */
554
- --color-border-success: 127, 69%, 29%, 1;
555
- --color-border-info: 260, 100%, 52%, 1;
556
- --color-border-disabled: 206, 9%, 66%, 1; /* Gray-500 */
557
-
558
- /* Icon */
559
- --color-icon-default: 0, 0%, 100%, 1; /* White */
560
- --color-icon-default-hover: 207, 8%, 23%, 1; /* Gray-950 */
561
- --color-icon-brand: 52, 100%, 52%, 1; /* Yellow-400 */
562
- --color-icon-secondary: 208, 8%, 50%, 1; /* Gray-700 */
563
- --color-icon-disabled: 206, 9%, 66%, 1; /* Gray-500 */
564
- --color-icon-inverse: 0, 0%, 100%, 1; /* White */
565
- --color-icon-danger: 354, 96%, 59%, 1; /* Red-500 */
566
- --color-icon-warning: 18, 88%, 55%, 1;
567
- --color-icon-info: 260, 100%, 52%, 1;
568
- --color-icon-success: 127, 69%, 29%, 1; /* Green-700 */
569
- --color-icon-on-brand: 207, 8%, 23%, 1; /* Gray-900 */
570
-
571
- /* Tooltip */
572
- --color-bg-tooltip: 0, 0%, 0%, 1; /* Black */
573
- --color-text-tooltip: 0, 0%, 100%, 1; /* White */
574
-
575
- /* Inline Comment */
576
- --color-inline-comment: 124, 79%, 93%, 1; /* #DDFBDF */
577
- --color-inline-comment-active: 126, 74%, 73%, 1; /* #88ED92 */
578
-
579
- /* Utility */
580
- --color-bg-transparent: 0, 0%, 0%, 0.04; /* Black 4% */
581
- --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
582
-
583
- /* Elevation */
584
- --shadow-elevation-1: 0px 1px 2px rgba (0,  0,  0,  0.15);
585
- --shadow-elevation-2: 0px 2px 4px rgba (0,  0,  0,  0.15);
586
- --shadow-elevation-3: 0px 4px 16px rgba (0,  0,  0,  0.15);
587
- --shadow-elevation-4: 0px 8px 32px rgba (0,  0,  0,  0.15);
588
- }
589
-
590
- .dark {
591
- /* Button */
592
- --color-button-default: 0, 0%, 31%, 1; /* Gray-700 */
593
- --color-button-default-hover: 0, 0%, 36%, 1; /* Gray-600 */
594
- --color-button-secondary: 0, 0%, 12%, 1; /* Gray-950 */
595
- --color-button-secondary-hover: 0, 0%, 25%, 1; /* Gray-800 */
596
- --color-button-disabled: 0, 0%, 25%, 1; /* Gray-800 */
597
- --color-button-danger: 354, 96%, 59%, 1; /* Red-500 */
598
- --color-button-danger-hover: 354, 84%, 42%, 1; /* Red-700 */
599
- --color-button-floating: 0, 0%, 31%, 1; /* Gray-700 */
600
- --color-button-floating-hover: 0, 0%, 25%, 1; /* Gray-800 */
601
-
602
- /* Text */
603
- --color-text-default: 0, 0%, 91%, 1; /* Gray-100 */
604
- --color-text-secondary: 0, 0%, 53%, 1; /* Gray-400 */
605
- --color-text-disabled: 0, 0%, 43%, 1; /* Gray-500 */
606
- --color-text-danger: 354, 100%, 70%, 1; /* Red-400 */
607
- --color-text-success: 126, 67%, 45%, 1; /* Green-500 */
608
- --color-text-inverse: 0, 0%, 91%, 1; /* Gray-100 */
609
- --color-text-link: 251, 100%, 83%, 1; /* Blue-700 */
610
- --color-text-on-brand: 0, 0%, 18%, 1; /* Gray-950 */
611
-
612
- /* Background */
613
- --color-bg-default: 0, 0%, 18%, 1; /* Gray-900 */
614
- --color-bg-default-hover: 0, 0%, 25%, 1; /* Gray-800 */
615
- --color-bg-default-active: 50, 74%, 54%, 1; /* Yellow-400 */
616
- --color-bg-default-selected: 0, 0%, 25%, 1; /* Gray-800 */
617
- --color-bg-secondary: 0, 0%, 12%, 1; /* Gray-950 */
618
- --color-bg-secondary-hover: 0, 0%, 18%, 1; /* Gray-900 */
619
- --color-bg-disabled: 0, 0%, 53%, 1; /* Gray-400 */
620
- --color-bg-brand: 50, 74%, 54%, 1; /* Yellow-400 */
621
- --color-bg-brand-hover: 50, 60%, 45%, 1; /* Yellow-500 */
622
- --color-bg-brand-light: 57, 92%, 76%, 1; /* Yellow-100 */
623
- --color-bg-danger: 354, 84%, 42%, 1; /* Red-200 */
624
- --color-bg-danger-light: 356, 100%, 97%, 1; /* Red-50 */
625
- --color-bg-default-inverse: 0, 0%, 0%, 1; /* White */
626
- --color-bg-tertiary: 0, 0%, 25%, 1; /* Gray-800 */
627
- --color-bg-success: 128, 59%, 20%, 1;
628
- --color-bg-success-light: 128, 59%, 20%, 1; /* Green-900 */
629
- --color-bg-info-light: 254, 100%, 73%, 0.16;
630
-
631
- /* Border */
632
- --color-border-default: 0, 0%, 25%, 1; /* Gray-800 */
633
- --color-border-hover: 0, 0%, 36%, 1; /* Gray-600 */
634
- --color-border-light: 0, 0%, 100%, 1; /* White */
635
- --color-border-active: 0, 0%, 91%, 1; /* Gray-200 */
636
- --color-border-focused: 254, 100%, 73%, 1; /* Blue-400 */
637
- --color-border-danger: 354, 100%, 70%, 1; /* Red-400 */
638
- --color-border-warning: 22, 89%, 62%, 1; /* Red-500 */
639
- --color-border-success: 126, 74%, 73%, 1;
640
- --color-border-info: 254, 100%, 73%, 1;
641
- --color-border-disabled: 0, 0%, 53%, 1; /* Gray-400 */
642
-
643
- /* Icon */
644
- --color-icon-default: 0, 0%, 100%, 1; /* White */
645
- --color-icon-default-hover: 0, 0%, 12%, 1; /* Gray-900 */
646
- --color-icon-brand: 50, 74%, 54%, 1; /* Yellow-400 */
647
- --color-icon-secondary: 0, 0%, 53%, 1; /* Gray-400 */
648
- --color-icon-disabled: 0, 0%, 25%, 1; /* Gray-800 */
649
- --color-icon-inverse: 207, 8%, 23%, 1; /* Gray-100 */
650
- --color-icon-danger: 354, 100%, 70%, 1;
651
- --color-icon-warning: 22, 89%, 62%, 1;
652
- --color-icon-info: 254, 100%, 73%, 1;
653
- --color-icon-success: 126, 74%, 73%, 1;
654
- --color-icon-on-brand: 0, 0%, 18%, 1; /* Gray-950 */
655
-
656
- /* Tooltip */
657
- --color-bg-tooltip: 0, 0%, 100%, 1; /* White */
658
- --color-text-tooltip: 0, 0%, 0%, 1; /* Black */
659
-
660
- /* Inline Comment */
661
- --color-inline-comment: 128, 59%, 20%, 1; /* #15521D */
662
- --color-inline-comment-active: 127, 69%, 29%, 1; /* #177E23 */
663
-
664
- /* Utility */
665
- --color-bg-transparent: 0, 0%, 100%, 0.04; /* White 4% */
666
- --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
667
- }
668
-
669
- .theme-sepia {
670
- /* Button */
671
- --color-button-default: 28, 16%, 21%, 1; /* #3E352D */
672
- --color-button-default-hover: 29, 16%, 26%, 1; /* #4D4238 */
673
- --color-button-secondary: 41, 61%, 84%, 1; /* #EFDFBD */
674
- --color-button-secondary-hover: 28, 16%, 21%, 0.06; /* #3E352D 6% */
675
- --color-button-disabled: 28, 16%, 21%, 0.04; /* #3E352D 4% */
676
- --color-button-danger: 0, 71%, 38%, 1; /* #A61C1C */
677
- --color-button-danger-hover: 0, 71%, 42%, 1; /* #B71F1F */
678
- --color-button-floating: 41, 61%, 84%, 1; /* #EFDFBD */
679
- --color-button-floating-hover: 28, 16%, 21%, 0.06; /* #3E352D 6% */
680
-
681
- /* Text */
682
- --color-text-default: 28, 16%, 21%, 1; /* #3E352D */
683
- --color-text-secondary: 31, 17%, 42%, 1; /* #7D6B58 */
684
- --color-text-disabled: 31, 29%, 64%, 1; /* #BEA489 */
685
- --color-text-danger: 0, 71%, 38%, 1; /* #A61C1C */
686
- --color-text-success: 77, 23%, 35%, 1; /* #616C44 */
687
- --color-text-inverse: 41, 61%, 84%, 1; /* #EFDFBD */
688
- --color-text-link: 199, 100%, 29%, 1; /* #006494 */
689
- --color-text-on-brand: 28, 16%, 21%, 1; /* #3E352D */
690
-
691
- /* Background */
692
- --color-bg-default: 41, 61%, 84%, 1; /* #EFDFBD */
693
- --color-bg-default-hover: 28, 16%, 21%, 0.08; /* #3E352D 8% */
694
- --color-bg-default-active: 46, 88%, 56%, 1; /* #F2C42D */
695
- --color-bg-default-selected: 28, 16%, 21%, 0.1; /* #3E352D 10% */
696
- --color-bg-secondary: 41, 61%, 80%, 1; /* #EBD7AD */
697
- --color-bg-secondary-hover: 28, 16%, 21%, 0.12; /* #3E352D 12% */
698
- --color-bg-disabled: 28, 16%, 21%, 0.04; /* #3E352D 4% */
699
- --color-bg-brand: 46, 88%, 56%, 1; /* #F2C42D */
700
- --color-bg-brand-hover: 40, 84%, 50%, 1; /* #EBA515 */
701
- --color-bg-brand-light: 47, 87%, 88%, 1; /* #FBEFC5 */
702
- --color-bg-danger: 0, 71%, 38%, 1; /* #A61C1C */
703
- --color-bg-danger-light: 0, 71%, 42%, 0.06; /* #B71F1F 6% */
704
- --color-bg-default-inverse: 28, 16%, 21%, 1; /* #3E352D */
705
- --color-bg-tertiary: 44, 32%, 86%, 1; /* #E7E1D0 */
706
- --color-bg-success: 77, 23%, 35%, 1; /* #616C44 */
707
- --color-bg-success-light: 76, 23%, 64%, 1; /* #ADB88E */
708
- --color-bg-info-light: 199, 45%, 87%, 1;
709
-
710
- /* Border */
711
- --color-border-default: 41, 49%, 76%, 1; /* #E0CDA4 */
712
- --color-border-hover: 41, 50%, 68%, 1; /* #D6BC85 */
713
- --color-border-light: 41, 61%, 84%, 1; /* #EFDFBD */
714
- --color-border-active: 28, 16%, 21%, 1; /* #3E352D */
715
- --color-border-focused: 199, 100%, 29%, 1; /* #006494 */
716
- --color-border-danger: 0, 71%, 38%, 1; /* #A61C1C */
717
- --color-border-warning: 12, 85%, 60%, 1; /* #F06543 */
718
- --color-border-success: 77, 23%, 35%, 1; /* #616C44 */
719
- --color-border-info: 199, 100%, 29%, 1; /* #006494 */
720
- --color-border-disabled: 31, 29%, 64%, 1; /* #BEA489 */
721
-
722
- /* Icon */
723
- --color-icon-default: 28, 16%, 21%, 1; /* #3E352D */
724
- --color-icon-default-hover: 29, 16%, 26%, 1; /* #4D4238 */
725
- --color-icon-brand: 46, 88%, 56%, 1; /* #F2C42D */
726
- --color-icon-secondary: 31, 17%, 42%, 1; /* #7D6B58 */
727
- --color-icon-disabled: 31, 29%, 64%, 1; /* #BEA489 */
728
- --color-icon-inverse: 41, 61%, 84%, 1; /* #EFDFBD */
729
- --color-icon-danger: 0, 71%, 38%, 1; /* #A61C1C */
730
- --color-icon-warning: 12, 85%, 60%, 1; /* #F06543 */
731
- --color-icon-info: 199, 100%, 29%, 1; /* #006494 */
732
- --color-icon-success: 77, 23%, 35%, 1; /* #616C44 */
733
- --color-icon-on-brand: 28, 16%, 21%, 1; /* #3E352D */
734
-
735
- /* Tooltip */
736
- --color-bg-tooltip: 28, 16%, 21%, 1; /* #3E352D */
737
- --color-text-tooltip: 41, 61%, 84%, 1; /* #EFDFBD */
738
-
739
- /* Inline Comment */
740
- --color-inline-comment: 76, 23%, 72%, 1; /* #BFC8A7 */
741
- --color-inline-comment-active: 75, 23%, 62%, 1; /* #A9B488 */
742
-
743
- /* Utility */
744
- --color-bg-transparent: 28, 16%, 21%, 0.04; /* #3E352D 4% */
745
- --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
746
- }
747
-
748
- .theme-pink {
749
- /* Button */
750
- --color-button-default: 349, 25%, 13%, 1; /* #2A191C */
751
- --color-button-default-hover: 349, 25%, 22%, 1; /* #462A2F */
752
- --color-button-secondary: 346, 100%, 95%, 1; /* #FFE6EC */
753
- --color-button-secondary-hover: 24, 16%, 21%, 0.06; /* #3E352D 6% */
754
- --color-button-disabled: 24, 16%, 21%, 0.04; /* #3E352D 4% */
755
- --color-button-danger: 2, 79%, 56%, 1; /* #E73D36 */
756
- --color-button-danger-hover: 2, 79%, 48%, 1; /* #DB221A */
757
- --color-button-floating: 346, 100%, 95%, 1; /* #FFE6EC */
758
- --color-button-floating-hover: 24, 16%, 21%, 0.06; /* #3E352D 6% */
759
-
760
- /* Text */
761
- --color-text-default: 3, 88%, 26%, 1; /* #7C0E08 */
762
- --color-text-secondary: 3, 39%, 59%, 1; /* #C0736F */
763
- --color-text-disabled: 3, 43%, 76%, 1; /* #DCABA8 */
764
- --color-text-danger: 2, 79%, 56%, 1; /* #E73D36 */
765
- --color-text-success: 139, 35%, 42%, 1; /* #46905E */
766
- --color-text-inverse: 346, 100%, 95%, 1; /* #FFE6EC */
767
- --color-text-link: 209, 89%, 39%, 1; /* #0B67BD */
768
- --color-text-on-brand: 3, 88%, 26%, 1; /* #7C0E08 */
769
-
770
- /* Background */
771
- --color-bg-default: 346, 100%, 95%, 1; /* #FFE6EC */
772
- --color-bg-default-hover: 3, 88%, 26%, 0.08; /* #7C0E08 8% */
773
- --color-bg-default-active: 45, 100%, 65%, 1; /* #FFD24D */
774
- --color-bg-default-selected: 3, 88%, 26%, 0.06; /* #7C0E08 6% */
775
- --color-bg-secondary: 346, 100%, 92%, 1; /* #FFD6E0 */
776
- --color-bg-secondary-hover: 3, 88%, 26%, 0.12; /* #7C0E08 12% */
777
- --color-bg-disabled: 24, 16%, 21%, 0.04; /* #3E352D 4% */
778
- --color-bg-brand: 45, 100%, 65%, 1; /* #FFD24D */
779
- --color-bg-brand-hover: 45, 100%, 56%, 1; /* #FFC61F */
780
- --color-bg-brand-light: 45, 100%, 90%, 1; /* #FFF2CC */
781
- --color-bg-danger: 2, 79%, 56%, 1; /* #E73D36 */
782
- --color-bg-danger-light: 2, 79%, 56%, 0.14; /* #E73D36 14% */
783
- --color-bg-default-inverse: 3, 88%, 26%, 1;
784
- --color-bg-tertiary: 3, 88%, 26%, 0.12; /* #7C0E08 12% */
785
- --color-bg-success: 139, 35%, 42%, 1; /* #46905E */
786
- --color-bg-success-light: 140, 34%, 88%, 1; /* #D6EBDD */
787
- --color-bg-info-light: 209, 89%, 88%, 1;
788
-
789
- /* Border */
790
- --color-border-default: 346, 100%, 90%, 1; /* #FFCCD8 */
791
- --color-border-hover: 346, 100%, 86%, 1; /* #FFB8C9 */
792
- --color-border-light: 348, 100%, 96%, 1; /* #FFEBEF */
793
- --color-border-active: 3, 88%, 26%, 1; /* #7C0E08 */
794
- --color-border-focused: 209, 89%, 39%, 1; /* #0B67BD */
795
- --color-border-danger: 2, 79%, 56%, 1; /* #E73D36 */
796
- --color-border-warning: 19, 83%, 53%, 1; /* #EB6424 */
797
- --color-border-success: 139, 35%, 42%, 1; /* #46905E */
798
- --color-border-info: 209, 89%, 39%, 1; /* #0B67BD */
799
- --color-border-disabled: 3, 43%, 76%, 1; /* #DCABA8 */
800
-
801
- /* Icon */
802
- --color-icon-default: 3, 88%, 26%, 1; /* #7C0E08 */
803
- --color-icon-default-hover: 3, 88%, 32%, 1; /* #99110A */
804
- --color-icon-brand: 45, 100%, 65%, 1; /* #FFD24D */
805
- --color-icon-secondary: 3, 39%, 59%, 1; /* #C0736F */
806
- --color-icon-disabled: 3, 43%, 76%, 1; /* #DCABA8 */
807
- --color-icon-inverse: 346, 100%, 95%, 1; /* #FFE6EC */
808
- --color-icon-danger: 2, 79%, 56%, 1; /* #E73D36 */
809
- --color-icon-warning: 19, 83%, 53%, 1; /* #EB6424 */
810
- --color-icon-info: 209, 89%, 39%, 1; /* #0B67BD */
811
- --color-icon-success: 140, 35%, 45%, 1; /* #4B9B65 */
812
- --color-icon-on-brand: 3, 88%, 26%, 1; /* #7C0E08 */
813
-
814
- /* Tooltip */
815
- --color-bg-tooltip: 3, 88%, 26%, 1; /* #7C0E08 */
816
- --color-text-tooltip: 346, 100%, 95%, 1; /* #FFE6EC */
817
-
818
- /* Inline Comment */
819
- --color-inline-comment: 139, 35%, 86%, 1; /* #CFE8D7 */
820
- --color-inline-comment-active: 139, 36%, 78%, 1; /* #B3DBC0 */
821
-
822
- /* Utility */
823
- --color-bg-transparent: 3, 88%, 26%, 0.04; /* #7C0E08 4% */
824
- --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
825
- }
826
-
827
- .theme-green {
828
- /* Button */
829
- --color-button-default: 63, 15%, 74%, 1; /* #C6C7B3 */
830
- --color-button-default-hover: 65, 14%, 82%, 1; /* #D7D8CA */
831
- --color-button-secondary: 120, 9%, 24%, 1; /* #384338 */
832
- --color-button-secondary-hover: 63, 15%, 74%, 0.06; /* #C6C7B3 6% */
833
- --color-button-disabled: 63, 15%, 74%, 0.04; /* #C6C7B3 4% */
834
- --color-button-danger: 2, 99%, 68%, 1; /* #FE625D */
835
- --color-button-danger-hover: 2, 99%, 72%, 1; /* #FE7571 */
836
- --color-button-floating: 120, 9%, 24%, 1; /* #384338 */
837
- --color-button-floating-hover: 63, 15%, 74%, 0.06; /* #C6C7B3 6% */
838
-
839
- /* Text */
840
- --color-text-default: 63, 27%, 83%, 1; /* #DFE0C9 */
841
- --color-text-secondary: 84, 5%, 56%, 1; /* #909688 */
842
- --color-text-disabled: 104, 7%, 42%, 1; /* #687364 */
843
- --color-text-danger: 2, 99%, 68%, 1; /* #FE625D */
844
- --color-text-success: 120, 46%, 55%, 1; /* #59C259 */
845
- --color-text-inverse: 120, 6%, 16%, 1; /* #262B26 */
846
- --color-text-link: 197, 78%, 64%, 1; /* #5BC3EB */
847
- --color-text-on-brand: 120, 6%, 16%, 1; /* #262B26 */
848
-
849
- /* Background */
850
- --color-bg-default: 120, 9%, 24%, 1; /* #384338 */
851
- --color-bg-default-hover: 63, 15%, 74%, 0.06; /* #C6C7B3 6% */
852
- --color-bg-default-active: 45, 100%, 65%, 1; /* #FFD24D */
853
- --color-bg-default-selected: 63, 15%, 74%, 0.04; /* #C6C7B3 4% */
854
- --color-bg-secondary: 120, 6%, 16%, 1; /* #262B26 */
855
- --color-bg-secondary-hover: 63, 15%, 74%, 0.08; /* #C6C7B3 8% */
856
- --color-bg-disabled: 63, 15%, 74%, 0.04; /* #C6C7B3 4% */
857
- --color-bg-brand: 46, 88%, 56%, 1; /* #F2C42D */
858
- --color-bg-brand-hover: 40, 84%, 50%, 1; /* #EBA515 */
859
- --color-bg-brand-light: 50, 89%, 89%, 1; /* #FCF4C9 */
860
- --color-bg-danger: 2, 99%, 68%, 1; /* #FE625D */
861
- --color-bg-danger-light: 2, 99%, 68%, 0.12; /* #FE625D 12% */
862
- --color-bg-default-inverse: 120, 9%, 76%, 1; /* #BCC7BC */
863
- --color-bg-tertiary: 63, 15%, 74%, 0.12; /* #C6C7B3 12% */
864
- --color-bg-success: 120, 46%, 55%, 1; /* #59C259 */
865
- --color-bg-success-light: 120, 46%, 55%, 0.16; /* #59C259 16% */
866
- --color-bg-info-light: 197, 78%, 64%, 0.16;
867
-
868
- /* Border */
869
- --color-border-default: 120, 8%, 30%, 1; /* #465346 */
870
- --color-border-hover: 120, 8%, 36%, 1; /* #546354 */
871
- --color-border-light: 120, 8%, 44%, 1; /* #677A67 */
872
- --color-border-active: 62, 27%, 83%, 1; /* #DFE0C9 */
873
- --color-border-focused: 197, 78%, 64%, 1; /* #5BC3EB */
874
- --color-border-danger: 2, 99%, 68%, 1; /* #FE625D */
875
- --color-border-warning: 10, 85%, 61%, 1; /* #F06449 */
876
- --color-border-success: 120, 46%, 55%, 1; /* #59C259 */
877
- --color-border-info: 197, 78%, 64%, 1; /* #5BC3EB */
878
- --color-border-disabled: 104, 7%, 42%, 1; /* #687364 */
879
-
880
- /* Icon */
881
- --color-icon-default: 62, 27%, 83%, 1; /* #DFE0C9 */
882
- --color-icon-default-hover: 65, 14%, 82%, 1; /* #D7D8CA */
883
- --color-icon-brand: 46, 88%, 56%, 1; /* #F2C42D */
884
- --color-icon-secondary: 84, 5%, 56%, 1; /* #909688 */
885
- --color-icon-disabled: 104, 7%, 42%, 1; /* #687364 */
886
- --color-icon-inverse: 120, 6%, 16%, 1; /* #262B26 */
887
- --color-icon-danger: 2, 79%, 56%, 1; /* #E73D36 */
888
- --color-icon-warning: 10, 85%, 61%, 1; /* #F06449 */
889
- --color-icon-info: 197, 78%, 64%, 1; /* #5BC3EB */
890
- --color-icon-success: 120, 46%, 55%, 1; /* #59C259 */
891
- --color-icon-on-brand: 120, 6%, 16%, 1; /* #262B26 */
892
-
893
- /* Tooltip */
894
- --color-bg-tooltip: 120, 9%, 76%, 1; /* #BCC7BC */
895
- --color-text-tooltip: 120, 9%, 24%, 1; /* #384338 */
896
-
897
- /* Inline Comment */
898
- --color-inline-comment: 120, 47%, 20%, 1; /* #1B4B1B */
899
- --color-inline-comment-active: 120, 47%, 28%, 1; /* #266826 */
900
-
901
- /* Utility */
902
- --color-bg-transparent: 63, 15%, 74%, 0.04; /* #C6C7B3 4% */
903
- --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
904
- }
905
- * {
906
- border-color: hsl(var(--color-border-default));
907
- -webkit-font-smoothing: antialiased;
908
- -moz-osx-font-smoothing: grayscale;
909
- text-rendering: optimizeLegibility;
910
- }
911
- body {
912
- color: hsl(var(--color-text-default));
913
- background-color: hsl(var(--color-bg-default));
914
- }
915
-
916
- .text-heading-2xlg {
917
- font-family: system-ui;
918
- font-size: 32px;
919
- font-weight: 700;
920
- line-height: 40px;
921
- }
922
-
923
- .\!text-heading-xlg {
924
- font-family: system-ui !important;
925
- font-size: 24px !important;
926
- font-weight: 500 !important;
927
- line-height: 32px !important;
928
- }
929
-
930
- .text-heading-xlg {
931
- font-family: system-ui;
932
- font-size: 24px;
933
- font-weight: 500;
934
- line-height: 32px;
935
- }
936
-
937
- .text-heading-xlg-bold {
938
- font-family: system-ui;
939
- font-size: 24px;
940
- font-weight: 700;
941
- line-height: 32px;
942
- }
943
-
944
- .text-heading-lg {
945
- font-family: system-ui;
946
- font-size: 20px;
947
- font-weight: 500;
948
- line-height: 28px;
949
- }
950
-
951
- .text-heading-lg-bold {
952
- font-family: system-ui;
953
- font-size: 20px;
954
- font-weight: 700;
955
- line-height: 28px;
956
- }
957
-
958
- .text-heading-md {
959
- font-family: system-ui;
960
- font-size: 18px;
961
- font-weight: 500;
962
- line-height: 28px;
963
- }
964
-
965
- .text-heading-md-bold {
966
- font-family: system-ui;
967
- font-size: 18px;
968
- font-weight: 700;
969
- line-height: 28px;
970
- }
971
-
972
- .text-heading-sm {
973
- font-family: system-ui;
974
- font-size: 16px;
975
- font-weight: 500;
976
- line-height: 22px;
977
- }
978
-
979
- .text-heading-sm-bold {
980
- font-family: system-ui;
981
- font-size: 16px;
982
- font-weight: 700;
983
- line-height: 22px;
984
- }
985
-
986
- .text-heading-xsm {
987
- font-family: system-ui;
988
- font-size: 14px;
989
- font-weight: 500;
990
- line-height: 20px;
991
- }
992
-
993
- .text-heading-xsm-bold {
994
- font-family: system-ui;
995
- font-size: 14px;
996
- font-weight: 700;
997
- line-height: 20px;
998
- }
999
-
1000
- .text-body-md {
1001
- font-family: system-ui;
1002
- font-size: 16px;
1003
- font-weight: 400;
1004
- line-height: 24px;
1005
- }
1006
-
1007
- .text-body-md-bold {
1008
- font-family: system-ui;
1009
- font-size: 16px;
1010
- font-weight: 500;
1011
- line-height: 24px;
1012
- }
1013
-
1014
- .text-body-sm {
1015
- font-family: system-ui;
1016
- font-size: 14px;
1017
- font-weight: 400;
1018
- line-height: 20px;
1019
- }
1020
-
1021
- .text-body-sm-bold {
1022
- font-family: system-ui;
1023
- font-size: 14px;
1024
- font-weight: 500;
1025
- line-height: 20px;
1026
- }
1027
-
1028
- .text-helper-text-sm {
1029
- font-family: system-ui;
1030
- font-size: 12px;
1031
- font-weight: 400;
1032
- line-height: 16px;
1033
- }
1034
-
1035
- .text-helper-link {
1036
- font-family: system-ui;
1037
- font-size: 12px;
1038
- font-weight: 400;
1039
- line-height: 16px;
1040
- text-decoration: underline;
1041
- }
1042
-
1043
- /** COLORS **/
1044
- .color-text-default {
1045
- color: hsl(var(--color-text-default));
1046
- }
1047
-
1048
- .color-text-secondary {
1049
- color: hsl(var(--color-text-secondary));
1050
- }
1051
-
1052
- .color-text-disabled {
1053
- color: hsl(var(--color-text-disabled));
1054
- }
1055
-
1056
- .color-text-danger {
1057
- color: hsl(var(--color-text-danger));
1058
- }
1059
-
1060
- .color-text-success {
1061
- color: hsl(var(--color-text-success));
1062
- }
1063
-
1064
- .color-text-link {
1065
- color: hsl(var(--color-text-link));
1066
- }
1067
-
1068
- .\!color-text-inverse {
1069
- color: hsl(var(--color-text-inverse)) !important;
1070
- }
1071
-
1072
- .color-text-inverse {
1073
- color: hsl(var(--color-text-inverse));
1074
- }
1075
-
1076
- .color-text-on-brand {
1077
- color: hsl(var(--color-text-on-brand));
1078
- }
1079
-
1080
- .color-bg-default {
1081
- background-color: hsl(var(--color-bg-default));
1082
- }
1083
-
1084
- .color-bg-default-hover {
1085
- background-color: hsl(var(--color-bg-default-hover));
1086
- }
1087
-
1088
- .color-bg-default-active {
1089
- background-color: hsl(var(--color-bg-default-active));
1090
- }
1091
-
1092
- .color-bg-default-selected {
1093
- background-color: hsl(var(--color-bg-default-selected));
1094
- }
1095
-
1096
- .color-bg-secondary {
1097
- background-color: hsl(var(--color-bg-secondary));
1098
- }
1099
-
1100
- .color-bg-secondary-hover {
1101
- background-color: hsl(var(--color-bg-secondary-hover));
1102
- }
1103
-
1104
- .color-bg-tertiary {
1105
- background-color: hsl(var(--color-bg-tertiary));
1106
- }
1107
-
1108
- .color-bg-disabled {
1109
- background-color: hsl(var(--color-bg-disabled));
1110
- }
1111
-
1112
- .color-bg-brand {
1113
- background-color: hsl(var(--color-bg-brand));
1114
- }
1115
-
1116
- .\!color-bg-brand-hover {
1117
- background-color: hsl(var(--color-bg-brand-hover)) !important;
1118
- }
1119
-
1120
- .color-bg-brand-hover {
1121
- background-color: hsl(var(--color-bg-brand-hover));
1122
- }
1123
-
1124
- .color-bg-brand-light {
1125
- background-color: hsl(var(--color-bg-brand-light));
1126
- }
1127
-
1128
- .color-bg-danger {
1129
- background-color: hsl(var(--color-bg-danger));
1130
- }
1131
-
1132
- .color-bg-danger-light {
1133
- background-color: hsl(var(--color-bg-danger-light));
1134
- }
1135
-
1136
- .color-bg-success-light {
1137
- background-color: hsl(var(--color-bg-success-light));
1138
- }
1139
-
1140
- .color-bg-info-light {
1141
- background-color: hsl(var(--color-bg-info-light));
1142
- }
1143
-
1144
- .color-bg-success {
1145
- background-color: hsl(var(--color-bg-success));
1146
- }
1147
-
1148
- .\!color-bg-default-inverse {
1149
- background-color: hsl(var(--color-bg-default-inverse)) !important;
1150
- }
1151
-
1152
- .color-bg-default-inverse {
1153
- background-color: hsl(var(--color-bg-default-inverse));
1154
- }
1155
-
1156
- .color-bg-tooltip {
1157
- background-color: hsl(var(--color-bg-tooltip));
1158
- }
1159
-
1160
- .color-text-tooltip {
1161
- color: hsl(var(--color-text-tooltip));
1162
- }
1163
-
1164
- .color-bg-transparent {
1165
- background-color: hsl(var(--color-bg-transparent));
1166
- }
1167
-
1168
- .color-button-default {
1169
- background-color: hsl(var(--color-button-default));
1170
- border-color: hsl(var(--color-button-default));
1171
- }
1172
-
1173
- .color-button-default-hover {
1174
- background-color: hsl(var(--color-button-default-hover));
1175
- }
1176
-
1177
- .color-button-secondary {
1178
- border: 2px solid hsl(var(--color-border-active));
1179
- }
1180
-
1181
- .color-button-secondary-hover {
1182
- background-color: hsl(var(--color-button-secondary-hover));
1183
- }
1184
-
1185
- .color-button-disabled {
1186
- background-color: hsl(var(--color-button-disabled));
1187
- border-color: hsl(var(--color-button-disabled));
1188
- color: hsl(var(--color-text-disabled));
1189
- }
1190
-
1191
- .color-button-danger {
1192
- background-color: hsl(var(--color-button-danger));
1193
- border-color: hsl(var(--color-button-danger));
1194
- }
1195
-
1196
- .color-button-danger-hover {
1197
- background-color: hsl(var(--color-button-danger-hover));
1198
- }
1199
-
1200
- .\!color-button-floating {
1201
- background-color: hsl(var(--color-button-floating)) !important;
1202
- border-color: hsl(var(--color-border-default)) !important;
1203
- }
1204
-
1205
- .color-border-default {
1206
- border-color: hsl(var(--color-border-default));
1207
- }
1208
-
1209
- .color-border-toast-warning {
1210
- border-left-color: hsl(var(--color-border-warning));
1211
- }
1212
- .color-border-toast-error {
1213
- border-left-color: hsl(var(--color-border-danger));
1214
- }
1215
- .color-border-toast-success {
1216
- border-left-color: hsl(var(--color-border-success));
1217
- }
1218
- .color-border-toast-info {
1219
- border-left-color: hsl(var(--color-border-info));
1220
- }
1221
-
1222
- .color-border-hover {
1223
- border-color: hsl(var(--color-border-hover));
1224
- }
1225
-
1226
- .color-border-light {
1227
- border-color: hsl(var(--color-border-light));
1228
- }
1229
-
1230
- .color-border-active {
1231
- border-color: hsl(var(--color-border-active));
1232
- }
1233
-
1234
- .color-border-focused {
1235
- border-color: hsl(var(--color-border-focused));
1236
- }
1237
-
1238
- .color-border-warning {
1239
- border-color: hsl(var(--color-border-warning));
1240
- }
1241
-
1242
- .color-border-success {
1243
- border-color: hsl(var(--color-border-success));
1244
- }
1245
-
1246
- .color-border-info {
1247
- border-color: hsl(var(--color-border-info));
1248
- }
1249
-
1250
- .color-border-danger {
1251
- border-color: hsl(var(--color-border-danger));
1252
- }
1253
-
1254
- .color-icon-default {
1255
- background-color: hsl(var(--color-icon-default));
1256
- }
1257
-
1258
- .color-icon-default-hover {
1259
- color: hsl(var(--color-icon-default-hover));
1260
- }
1261
-
1262
- .color-icon-brand {
1263
- color: hsl(var(--color-icon-brand));
1264
- }
1265
-
1266
- .color-icon-secondary {
1267
- color: hsl(var(--color-icon-secondary));
1268
- }
1269
-
1270
- .color-icon-disabled {
1271
- background-color: hsl(var(--color-icon-disabled));
1272
- }
1273
-
1274
- .color-icon-inverse {
1275
- color: hsl(var(--color-icon-inverse));
1276
- }
1277
-
1278
- .color-icon-success {
1279
- color: hsl(var(--color-icon-success));
1280
- }
1281
-
1282
- .color-icon-danger {
1283
- color: hsl(var(--color-icon-danger));
1284
- }
1285
- .color-icon-warning {
1286
- color: hsl(var(--color-icon-warning));
1287
- }
1288
- .color-icon-info {
1289
- color: hsl(var(--color-icon-info));
1290
- }
1291
-
1292
- .color-utility-overlay {
1293
- background-color: hsl(var(--color-utility-overlay));
1294
- }
1295
-
1296
- /* ELEVATIONS */
1297
-
1298
- .shadow-elevation-1 {
1299
- --tw-shadow: 0 1px 2px rgba(0,0,0,0.15);
1300
- --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color);
1301
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1302
- }
1303
-
1304
- .shadow-elevation-2 {
1305
- --tw-shadow: 0 2px 4px rgba(0,0,0,0.15);
1306
- --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
1307
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1308
- }
1309
-
1310
- .shadow-elevation-3 {
1311
- --tw-shadow: 0 4px 16px rgba(0,0,0,0.15);
1312
- --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color);
1313
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1314
- }
1315
-
1316
- .shadow-elevation-4 {
1317
- --tw-shadow: 0 8px 32px rgba(0,0,0,0.15);
1318
- --tw-shadow-colored: 0 8px 32px var(--tw-shadow-color);
1319
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1320
- }
1321
-
1322
- /* DIVIDERS */
1323
- .divider-y-sm {
1324
- border-right-width: 0px;
1325
- border-left-width: 0.5px;
1326
- border-left-color: hsl(var(--color-border-default));
1327
- }
1328
-
1329
- .divider-y-md {
1330
- border-right-width: 0px;
1331
- border-left-width: 1px;
1332
- border-left-color: hsl(var(--color-border-default));
1333
- }
1334
-
1335
- .divider-y-lg {
1336
- border-right-width: 0px;
1337
- border-left-width: 2px;
1338
- border-left-color: hsl(var(--color-border-default));
1339
- }
1340
-
1341
- .divider-y-xlg {
1342
- border-right-width: 0px;
1343
- border-left-width: 4px;
1344
- border-left-color: hsl(var(--color-border-default));
1345
- }
1346
-
1347
- .divider-x-sm {
1348
- border-bottom-width: 0px;
1349
- border-top-width: 0.5px;
1350
- border-left-color: hsl(var(--color-border-default));
1351
- }
1352
-
1353
- .divider-x-md {
1354
- border-bottom-width: 0px;
1355
- border-top-width: 1px;
1356
- border-top-color: hsl(var(--color-border-default));
1357
- }
1358
-
1359
- .divider-x-lg {
1360
- border-bottom-width: 0px;
1361
- border-top-width: 2px;
1362
- border-top-color: hsl(var(--color-border-default));
1363
- }
1364
-
1365
- .divider-x-xlg {
1366
- border-bottom-width: 0px;
1367
- border-top-width: 4px;
1368
- border-top-color: hsl(var(--color-border-default));
1369
- }
1370
502
  .container {
1371
503
  width: 100%;
1372
504
  margin-right: auto;
@@ -1374,20 +506,375 @@ video {
1374
506
  padding-right: 2rem;
1375
507
  padding-left: 2rem;
1376
508
  }
1377
- @media (min-width: 1400px) {
1378
-
1379
- .container {
1380
- max-width: 1400px;
1381
- }
509
+ @media (min-width: 1400px) {
510
+
511
+ .container {
512
+ max-width: 1400px;
513
+ }
514
+ }
515
+ .text-heading-2xlg {
516
+ font-family: system-ui;
517
+ font-size: 32px;
518
+ font-weight: 700;
519
+ line-height: 40px;
520
+ }
521
+ .\!text-heading-xlg {
522
+ font-family: system-ui !important;
523
+ font-size: 24px !important;
524
+ font-weight: 500 !important;
525
+ line-height: 32px !important;
526
+ }
527
+ .text-heading-xlg {
528
+ font-family: system-ui;
529
+ font-size: 24px;
530
+ font-weight: 500;
531
+ line-height: 32px;
532
+ }
533
+ .text-heading-xlg-bold {
534
+ font-family: system-ui;
535
+ font-size: 24px;
536
+ font-weight: 700;
537
+ line-height: 32px;
538
+ }
539
+ .text-heading-lg {
540
+ font-family: system-ui;
541
+ font-size: 20px;
542
+ font-weight: 500;
543
+ line-height: 28px;
544
+ }
545
+ .text-heading-lg-bold {
546
+ font-family: system-ui;
547
+ font-size: 20px;
548
+ font-weight: 700;
549
+ line-height: 28px;
550
+ }
551
+ .text-heading-md {
552
+ font-family: system-ui;
553
+ font-size: 18px;
554
+ font-weight: 500;
555
+ line-height: 28px;
556
+ }
557
+ .text-heading-md-bold {
558
+ font-family: system-ui;
559
+ font-size: 18px;
560
+ font-weight: 700;
561
+ line-height: 28px;
562
+ }
563
+ .text-heading-sm {
564
+ font-family: system-ui;
565
+ font-size: 16px;
566
+ font-weight: 500;
567
+ line-height: 22px;
568
+ }
569
+ .text-heading-sm-bold {
570
+ font-family: system-ui;
571
+ font-size: 16px;
572
+ font-weight: 700;
573
+ line-height: 22px;
574
+ }
575
+ .text-heading-xsm {
576
+ font-family: system-ui;
577
+ font-size: 14px;
578
+ font-weight: 500;
579
+ line-height: 20px;
580
+ }
581
+ .text-heading-xsm-bold {
582
+ font-family: system-ui;
583
+ font-size: 14px;
584
+ font-weight: 700;
585
+ line-height: 20px;
586
+ }
587
+ .text-body-md {
588
+ font-family: system-ui;
589
+ font-size: 16px;
590
+ font-weight: 400;
591
+ line-height: 24px;
592
+ }
593
+ .text-body-md-bold {
594
+ font-family: system-ui;
595
+ font-size: 16px;
596
+ font-weight: 500;
597
+ line-height: 24px;
598
+ }
599
+ .text-body-sm {
600
+ font-family: system-ui;
601
+ font-size: 14px;
602
+ font-weight: 400;
603
+ line-height: 20px;
604
+ }
605
+ .text-body-sm-bold {
606
+ font-family: system-ui;
607
+ font-size: 14px;
608
+ font-weight: 500;
609
+ line-height: 20px;
610
+ }
611
+ .text-helper-text-sm {
612
+ font-family: system-ui;
613
+ font-size: 12px;
614
+ font-weight: 400;
615
+ line-height: 16px;
616
+ }
617
+ .text-helper-link {
618
+ font-family: system-ui;
619
+ font-size: 12px;
620
+ font-weight: 400;
621
+ line-height: 16px;
622
+ text-decoration: underline;
623
+ }
624
+ .color-text-default {
625
+ color: hsl(var(--color-text-default));
626
+ }
627
+ .color-text-secondary {
628
+ color: hsl(var(--color-text-secondary));
629
+ }
630
+ .color-text-disabled {
631
+ color: hsl(var(--color-text-disabled));
632
+ }
633
+ .color-text-danger {
634
+ color: hsl(var(--color-text-danger));
635
+ }
636
+ .color-text-success {
637
+ color: hsl(var(--color-text-success));
638
+ }
639
+ .color-text-link {
640
+ color: hsl(var(--color-text-link));
641
+ }
642
+ .\!color-text-inverse {
643
+ color: hsl(var(--color-text-inverse)) !important;
644
+ }
645
+ .color-text-inverse {
646
+ color: hsl(var(--color-text-inverse));
647
+ }
648
+ .color-text-on-brand {
649
+ color: hsl(var(--color-text-on-brand));
650
+ }
651
+ .color-bg-default {
652
+ background-color: hsl(var(--color-bg-default));
653
+ }
654
+ .color-bg-default-hover {
655
+ background-color: hsl(var(--color-bg-default-hover));
656
+ }
657
+ .color-bg-default-active {
658
+ background-color: hsl(var(--color-bg-default-active));
659
+ }
660
+ .color-bg-default-selected {
661
+ background-color: hsl(var(--color-bg-default-selected));
662
+ }
663
+ .color-bg-secondary {
664
+ background-color: hsl(var(--color-bg-secondary));
665
+ }
666
+ .color-bg-secondary-hover {
667
+ background-color: hsl(var(--color-bg-secondary-hover));
668
+ }
669
+ .color-bg-tertiary {
670
+ background-color: hsl(var(--color-bg-tertiary));
671
+ }
672
+ .color-bg-disabled {
673
+ background-color: hsl(var(--color-bg-disabled));
674
+ }
675
+ .color-bg-brand {
676
+ background-color: hsl(var(--color-bg-brand));
677
+ }
678
+ .\!color-bg-brand-hover {
679
+ background-color: hsl(var(--color-bg-brand-hover)) !important;
680
+ }
681
+ .color-bg-brand-hover {
682
+ background-color: hsl(var(--color-bg-brand-hover));
683
+ }
684
+ .color-bg-brand-light {
685
+ background-color: hsl(var(--color-bg-brand-light));
686
+ }
687
+ .color-bg-danger {
688
+ background-color: hsl(var(--color-bg-danger));
689
+ }
690
+ .color-bg-danger-light {
691
+ background-color: hsl(var(--color-bg-danger-light));
692
+ }
693
+ .color-bg-success-light {
694
+ background-color: hsl(var(--color-bg-success-light));
695
+ }
696
+ .color-bg-info-light {
697
+ background-color: hsl(var(--color-bg-info-light));
698
+ }
699
+ .color-bg-success {
700
+ background-color: hsl(var(--color-bg-success));
701
+ }
702
+ .\!color-bg-default-inverse {
703
+ background-color: hsl(var(--color-bg-default-inverse)) !important;
704
+ }
705
+ .color-bg-default-inverse {
706
+ background-color: hsl(var(--color-bg-default-inverse));
707
+ }
708
+ .color-bg-tooltip {
709
+ background-color: hsl(var(--color-bg-tooltip));
710
+ }
711
+ .color-text-tooltip {
712
+ color: hsl(var(--color-text-tooltip));
713
+ }
714
+ .color-bg-transparent {
715
+ background-color: hsl(var(--color-bg-transparent));
716
+ }
717
+ .color-button-default {
718
+ background-color: hsl(var(--color-button-default));
719
+ border-color: hsl(var(--color-button-default));
720
+ }
721
+ .color-button-default-hover {
722
+ background-color: hsl(var(--color-button-default-hover));
723
+ }
724
+ .color-button-secondary {
725
+ border: 2px solid hsl(var(--color-border-active));
726
+ }
727
+ .color-button-secondary-hover {
728
+ background-color: hsl(var(--color-button-secondary-hover));
729
+ }
730
+ .color-button-disabled {
731
+ background-color: hsl(var(--color-button-disabled));
732
+ border-color: hsl(var(--color-button-disabled));
733
+ color: hsl(var(--color-text-disabled));
734
+ }
735
+ .color-button-danger {
736
+ background-color: hsl(var(--color-button-danger));
737
+ border-color: hsl(var(--color-button-danger));
738
+ }
739
+ .color-button-danger-hover {
740
+ background-color: hsl(var(--color-button-danger-hover));
741
+ }
742
+ .\!color-button-floating {
743
+ background-color: hsl(var(--color-button-floating)) !important;
744
+ border-color: hsl(var(--color-border-default)) !important;
745
+ }
746
+ .color-border-default {
747
+ border-color: hsl(var(--color-border-default));
748
+ }
749
+ .color-border-toast-warning {
750
+ border-left-color: hsl(var(--color-border-warning));
751
+ }
752
+ .color-border-toast-error {
753
+ border-left-color: hsl(var(--color-border-danger));
754
+ }
755
+ .color-border-toast-success {
756
+ border-left-color: hsl(var(--color-border-success));
757
+ }
758
+ .color-border-toast-info {
759
+ border-left-color: hsl(var(--color-border-info));
760
+ }
761
+ .color-border-hover {
762
+ border-color: hsl(var(--color-border-hover));
763
+ }
764
+ .color-border-light {
765
+ border-color: hsl(var(--color-border-light));
766
+ }
767
+ .color-border-active {
768
+ border-color: hsl(var(--color-border-active));
769
+ }
770
+ .color-border-focused {
771
+ border-color: hsl(var(--color-border-focused));
772
+ }
773
+ .color-border-warning {
774
+ border-color: hsl(var(--color-border-warning));
775
+ }
776
+ .color-border-success {
777
+ border-color: hsl(var(--color-border-success));
778
+ }
779
+ .color-border-info {
780
+ border-color: hsl(var(--color-border-info));
781
+ }
782
+ .color-border-danger {
783
+ border-color: hsl(var(--color-border-danger));
784
+ }
785
+ .color-icon-default {
786
+ background-color: hsl(var(--color-icon-default));
787
+ }
788
+ .color-icon-default-hover {
789
+ color: hsl(var(--color-icon-default-hover));
790
+ }
791
+ .color-icon-brand {
792
+ color: hsl(var(--color-icon-brand));
793
+ }
794
+ .color-icon-secondary {
795
+ color: hsl(var(--color-icon-secondary));
796
+ }
797
+ .color-icon-disabled {
798
+ background-color: hsl(var(--color-icon-disabled));
799
+ }
800
+ .color-icon-inverse {
801
+ color: hsl(var(--color-icon-inverse));
802
+ }
803
+ .color-icon-success {
804
+ color: hsl(var(--color-icon-success));
805
+ }
806
+ .color-icon-danger {
807
+ color: hsl(var(--color-icon-danger));
808
+ }
809
+ .color-icon-warning {
810
+ color: hsl(var(--color-icon-warning));
811
+ }
812
+ .color-icon-info {
813
+ color: hsl(var(--color-icon-info));
814
+ }
815
+ .color-utility-overlay {
816
+ background-color: hsl(var(--color-utility-overlay));
817
+ }
818
+ .shadow-elevation-1 {
819
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
820
+ }
821
+ .shadow-elevation-2 {
822
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
823
+ }
824
+ .shadow-elevation-3 {
825
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
826
+ }
827
+ .shadow-elevation-4 {
828
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
829
+ }
830
+ .divider-y-sm {
831
+ border-right-width: 0px;
832
+ border-left-width: 0.5px;
833
+ border-left-color: hsl(var(--color-border-default));
834
+ }
835
+ .divider-y-md {
836
+ border-right-width: 0px;
837
+ border-left-width: 1px;
838
+ border-left-color: hsl(var(--color-border-default));
839
+ }
840
+ .divider-y-lg {
841
+ border-right-width: 0px;
842
+ border-left-width: 2px;
843
+ border-left-color: hsl(var(--color-border-default));
844
+ }
845
+ .divider-y-xlg {
846
+ border-right-width: 0px;
847
+ border-left-width: 4px;
848
+ border-left-color: hsl(var(--color-border-default));
849
+ }
850
+ .divider-x-sm {
851
+ border-bottom-width: 0px;
852
+ border-top-width: 0.5px;
853
+ border-left-color: hsl(var(--color-border-default));
854
+ }
855
+ .divider-x-md {
856
+ border-bottom-width: 0px;
857
+ border-top-width: 1px;
858
+ border-top-color: hsl(var(--color-border-default));
859
+ }
860
+ .divider-x-lg {
861
+ border-bottom-width: 0px;
862
+ border-top-width: 2px;
863
+ border-top-color: hsl(var(--color-border-default));
864
+ }
865
+ .divider-x-xlg {
866
+ border-bottom-width: 0px;
867
+ border-top-width: 4px;
868
+ border-top-color: hsl(var(--color-border-default));
1382
869
  }
1383
870
  .avatar-sm {
1384
- border-radius: 4px;
1385
- border-width: 2px;
1386
- }
871
+ border-radius: 4px;
872
+ border-width: 2px;
873
+ }
1387
874
  .avatar-lg {
1388
- border-radius: 8px;
1389
- border-width: 4px;
1390
- }
875
+ border-radius: 8px;
876
+ border-width: 4px;
877
+ }
1391
878
  .sr-only {
1392
879
  position: absolute;
1393
880
  width: 1px;
@@ -2639,855 +2126,587 @@ video {
2639
2126
  .p-5 {
2640
2127
  padding: 1.25rem;
2641
2128
  }
2642
- .p-6 {
2643
- padding: 1.5rem;
2644
- }
2645
- .\!px-0 {
2646
- padding-left: 0px !important;
2647
- padding-right: 0px !important;
2648
- }
2649
- .\!px-1 {
2650
- padding-left: 0.25rem !important;
2651
- padding-right: 0.25rem !important;
2652
- }
2653
- .\!py-\[2px\] {
2654
- padding-top: 2px !important;
2655
- padding-bottom: 2px !important;
2656
- }
2657
- .px-0 {
2658
- padding-left: 0px;
2659
- padding-right: 0px;
2660
- }
2661
- .px-0\.5 {
2662
- padding-left: 0.125rem;
2663
- padding-right: 0.125rem;
2664
- }
2665
- .px-1 {
2666
- padding-left: 0.25rem;
2667
- padding-right: 0.25rem;
2668
- }
2669
- .px-2 {
2670
- padding-left: 0.5rem;
2671
- padding-right: 0.5rem;
2672
- }
2673
- .px-3 {
2674
- padding-left: 0.75rem;
2675
- padding-right: 0.75rem;
2676
- }
2677
- .px-4 {
2678
- padding-left: 1rem;
2679
- padding-right: 1rem;
2680
- }
2681
- .px-5 {
2682
- padding-left: 1.25rem;
2683
- padding-right: 1.25rem;
2684
- }
2685
- .px-6 {
2686
- padding-left: 1.5rem;
2687
- padding-right: 1.5rem;
2688
- }
2689
- .px-8 {
2690
- padding-left: 2rem;
2691
- padding-right: 2rem;
2692
- }
2693
- .px-\[3px\] {
2694
- padding-left: 3px;
2695
- padding-right: 3px;
2696
- }
2697
- .px-px {
2698
- padding-left: 1px;
2699
- padding-right: 1px;
2700
- }
2701
- .py-1 {
2702
- padding-top: 0.25rem;
2703
- padding-bottom: 0.25rem;
2704
- }
2705
- .py-1\.5 {
2706
- padding-top: 0.375rem;
2707
- padding-bottom: 0.375rem;
2708
- }
2709
- .py-10 {
2710
- padding-top: 2.5rem;
2711
- padding-bottom: 2.5rem;
2712
- }
2713
- .py-2 {
2714
- padding-top: 0.5rem;
2715
- padding-bottom: 0.5rem;
2716
- }
2717
- .py-3 {
2718
- padding-top: 0.75rem;
2719
- padding-bottom: 0.75rem;
2720
- }
2721
- .py-4 {
2722
- padding-top: 1rem;
2723
- padding-bottom: 1rem;
2724
- }
2725
- .py-6 {
2726
- padding-top: 1.5rem;
2727
- padding-bottom: 1.5rem;
2728
- }
2729
- .\!pb-0 {
2730
- padding-bottom: 0px !important;
2731
- }
2732
- .\!pb-\[calc\(16px\+24px\)\] {
2733
- padding-bottom: calc(16px + 24px) !important;
2734
- }
2735
- .\!pr-0 {
2736
- padding-right: 0px !important;
2737
- }
2738
- .\!pt-4 {
2739
- padding-top: 1rem !important;
2740
- }
2741
- .pb-2 {
2742
- padding-bottom: 0.5rem;
2743
- }
2744
- .pb-3 {
2745
- padding-bottom: 0.75rem;
2746
- }
2747
- .pb-4 {
2748
- padding-bottom: 1rem;
2749
- }
2750
- .pb-5 {
2751
- padding-bottom: 1.25rem;
2752
- }
2753
- .pb-6 {
2754
- padding-bottom: 1.5rem;
2755
- }
2756
- .pl-10 {
2757
- padding-left: 2.5rem;
2758
- }
2759
- .pl-2 {
2760
- padding-left: 0.5rem;
2761
- }
2762
- .pl-6 {
2763
- padding-left: 1.5rem;
2764
- }
2765
- .pl-8 {
2766
- padding-left: 2rem;
2767
- }
2768
- .pr-10 {
2769
- padding-right: 2.5rem;
2770
- }
2771
- .pr-2 {
2772
- padding-right: 0.5rem;
2773
- }
2774
- .pr-3 {
2775
- padding-right: 0.75rem;
2776
- }
2777
- .pr-8 {
2778
- padding-right: 2rem;
2779
- }
2780
- .pt-0 {
2781
- padding-top: 0px;
2782
- }
2783
- .pt-0\.5 {
2784
- padding-top: 0.125rem;
2785
- }
2786
- .pt-2 {
2787
- padding-top: 0.5rem;
2788
- }
2789
- .pt-4 {
2790
- padding-top: 1rem;
2791
- }
2792
- .text-left {
2793
- text-align: left;
2794
- }
2795
- .text-center {
2796
- text-align: center;
2797
- }
2798
- .text-justify {
2799
- text-align: justify;
2800
- }
2801
- .align-middle {
2802
- vertical-align: middle;
2803
- }
2804
- .font-mono {
2805
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
2806
- }
2807
- .text-\[10px\] {
2808
- font-size: 10px;
2809
- }
2810
- .text-\[14px\] {
2811
- font-size: 14px;
2812
- }
2813
- .text-\[16px\] {
2814
- font-size: 16px;
2815
- }
2816
- .text-\[20px\] {
2817
- font-size: 20px;
2818
- }
2819
- .text-\[24px\] {
2820
- font-size: 24px;
2821
- }
2822
- .text-\[32px\] {
2823
- font-size: 32px;
2824
- }
2825
- .text-\[9px\] {
2826
- font-size: 9px;
2827
- }
2828
- .text-lg {
2829
- font-size: 1.125rem;
2830
- line-height: 1.75rem;
2831
- }
2832
- .text-sm {
2833
- font-size: 0.875rem;
2834
- line-height: 1.25rem;
2835
- }
2836
- .text-xs {
2837
- font-size: 0.75rem;
2838
- line-height: 1rem;
2839
- }
2840
- .\!font-bold {
2841
- font-weight: 700 !important;
2842
- }
2843
- .font-\[700\] {
2844
- font-weight: 700;
2845
- }
2846
- .font-medium {
2847
- font-weight: 500;
2848
- }
2849
- .font-normal {
2850
- font-weight: 400;
2851
- }
2852
- .tabular-nums {
2853
- --tw-numeric-spacing: tabular-nums;
2854
- font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
2855
- }
2856
- .leading-5 {
2857
- line-height: 1.25rem;
2858
- }
2859
- .leading-6 {
2860
- line-height: 1.5rem;
2861
- }
2862
- .leading-\[20px\] {
2863
- line-height: 20px;
2864
- }
2865
- .leading-none {
2866
- line-height: 1;
2867
- }
2868
- .tracking-wide {
2869
- letter-spacing: 0.025em;
2870
- }
2871
- .tracking-widest {
2872
- letter-spacing: 0.1em;
2873
- }
2874
- .text-\[\#77818A\] {
2875
- --tw-text-opacity: 1;
2876
- color: rgb(119 129 138 / var(--tw-text-opacity, 1));
2129
+ .p-6 {
2130
+ padding: 1.5rem;
2877
2131
  }
2878
- .text-\[hsl\(var\(--color-bg-default\)\)\] {
2879
- color: hsl(var(--color-bg-default));
2132
+ .\!px-0 {
2133
+ padding-left: 0px !important;
2134
+ padding-right: 0px !important;
2880
2135
  }
2881
- .text-\[hsl\(var\(--color-icon-secondary\)\)\] {
2882
- color: hsl(var(--color-icon-secondary));
2136
+ .\!px-1 {
2137
+ padding-left: 0.25rem !important;
2138
+ padding-right: 0.25rem !important;
2883
2139
  }
2884
- .text-\[hsl\(var\(--color-text-inverse\)\)\] {
2885
- color: hsl(var(--color-text-inverse));
2140
+ .\!py-\[2px\] {
2141
+ padding-top: 2px !important;
2142
+ padding-bottom: 2px !important;
2886
2143
  }
2887
- .text-current {
2888
- color: currentColor;
2144
+ .px-0 {
2145
+ padding-left: 0px;
2146
+ padding-right: 0px;
2889
2147
  }
2890
- .text-gray-400 {
2891
- --tw-text-opacity: 1;
2892
- color: rgb(156 163 175 / var(--tw-text-opacity, 1));
2148
+ .px-0\.5 {
2149
+ padding-left: 0.125rem;
2150
+ padding-right: 0.125rem;
2893
2151
  }
2894
- .text-red-500 {
2895
- --tw-text-opacity: 1;
2896
- color: rgb(239 68 68 / var(--tw-text-opacity, 1));
2152
+ .px-1 {
2153
+ padding-left: 0.25rem;
2154
+ padding-right: 0.25rem;
2897
2155
  }
2898
- .text-white {
2899
- --tw-text-opacity: 1;
2900
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
2156
+ .px-2 {
2157
+ padding-left: 0.5rem;
2158
+ padding-right: 0.5rem;
2901
2159
  }
2902
- .text-white\/60 {
2903
- color: rgb(255 255 255 / 0.6);
2160
+ .px-3 {
2161
+ padding-left: 0.75rem;
2162
+ padding-right: 0.75rem;
2904
2163
  }
2905
- .underline {
2906
- text-decoration-line: underline;
2164
+ .px-4 {
2165
+ padding-left: 1rem;
2166
+ padding-right: 1rem;
2907
2167
  }
2908
- .caret-transparent {
2909
- caret-color: transparent;
2168
+ .px-5 {
2169
+ padding-left: 1.25rem;
2170
+ padding-right: 1.25rem;
2910
2171
  }
2911
- .opacity-0 {
2912
- opacity: 0;
2172
+ .px-6 {
2173
+ padding-left: 1.5rem;
2174
+ padding-right: 1.5rem;
2913
2175
  }
2914
- .opacity-30 {
2915
- opacity: 0.3;
2176
+ .px-8 {
2177
+ padding-left: 2rem;
2178
+ padding-right: 2rem;
2916
2179
  }
2917
- .opacity-50 {
2918
- opacity: 0.5;
2180
+ .px-\[3px\] {
2181
+ padding-left: 3px;
2182
+ padding-right: 3px;
2919
2183
  }
2920
- .opacity-90 {
2921
- opacity: 0.9;
2184
+ .px-px {
2185
+ padding-left: 1px;
2186
+ padding-right: 1px;
2922
2187
  }
2923
- .shadow {
2924
- --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
2925
- --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
2926
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2188
+ .py-1 {
2189
+ padding-top: 0.25rem;
2190
+ padding-bottom: 0.25rem;
2927
2191
  }
2928
- .shadow-lg {
2929
- --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
2930
- --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
2931
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2192
+ .py-1\.5 {
2193
+ padding-top: 0.375rem;
2194
+ padding-bottom: 0.375rem;
2932
2195
  }
2933
- .shadow-md {
2934
- --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
2935
- --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
2936
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2196
+ .py-10 {
2197
+ padding-top: 2.5rem;
2198
+ padding-bottom: 2.5rem;
2937
2199
  }
2938
- .shadow-none {
2939
- --tw-shadow: 0 0 #0000;
2940
- --tw-shadow-colored: 0 0 #0000;
2941
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2200
+ .py-2 {
2201
+ padding-top: 0.5rem;
2202
+ padding-bottom: 0.5rem;
2942
2203
  }
2943
- .shadow-sm {
2944
- --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
2945
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
2946
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2204
+ .py-3 {
2205
+ padding-top: 0.75rem;
2206
+ padding-bottom: 0.75rem;
2947
2207
  }
2948
- .outline-none {
2949
- outline: 2px solid transparent;
2950
- outline-offset: 2px;
2208
+ .py-4 {
2209
+ padding-top: 1rem;
2210
+ padding-bottom: 1rem;
2951
2211
  }
2952
- .outline {
2953
- outline-style: solid;
2212
+ .py-6 {
2213
+ padding-top: 1.5rem;
2214
+ padding-bottom: 1.5rem;
2954
2215
  }
2955
- .outline-1 {
2956
- outline-width: 1px;
2216
+ .\!pb-0 {
2217
+ padding-bottom: 0px !important;
2957
2218
  }
2958
- .-outline-offset-\[0\.5px\] {
2959
- outline-offset: -0.5px;
2219
+ .\!pb-\[calc\(16px\+24px\)\] {
2220
+ padding-bottom: calc(16px + 24px) !important;
2960
2221
  }
2961
- .-outline-offset-\[1px\] {
2962
- outline-offset: -1px;
2222
+ .\!pr-0 {
2223
+ padding-right: 0px !important;
2963
2224
  }
2964
- .outline-offset-\[-1px\] {
2965
- outline-offset: -1px;
2225
+ .\!pt-4 {
2226
+ padding-top: 1rem !important;
2966
2227
  }
2967
- .outline-\[hsl\(var\(--color-border-default\)\)\] {
2968
- outline-color: hsl(var(--color-border-default));
2228
+ .pb-2 {
2229
+ padding-bottom: 0.5rem;
2969
2230
  }
2970
- .ring-0 {
2971
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2972
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2973
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2231
+ .pb-3 {
2232
+ padding-bottom: 0.75rem;
2974
2233
  }
2975
- .ring-2 {
2976
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2977
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2978
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2234
+ .pb-4 {
2235
+ padding-bottom: 1rem;
2979
2236
  }
2980
- .ring-focused {
2981
- --tw-ring-color: hsl(var(--focused));
2237
+ .pb-5 {
2238
+ padding-bottom: 1.25rem;
2982
2239
  }
2983
- .ring-offset-2 {
2984
- --tw-ring-offset-width: 2px;
2240
+ .pb-6 {
2241
+ padding-bottom: 1.5rem;
2985
2242
  }
2986
- .ring-offset-transparent {
2987
- --tw-ring-offset-color: transparent;
2243
+ .pl-10 {
2244
+ padding-left: 2.5rem;
2988
2245
  }
2989
- .ring-offset-white {
2990
- --tw-ring-offset-color: #fff;
2246
+ .pl-2 {
2247
+ padding-left: 0.5rem;
2991
2248
  }
2992
- .drop-shadow {
2993
- --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
2994
- filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
2249
+ .pl-6 {
2250
+ padding-left: 1.5rem;
2995
2251
  }
2996
- .filter {
2997
- filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
2252
+ .pl-8 {
2253
+ padding-left: 2rem;
2998
2254
  }
2999
- .backdrop-blur-sm {
3000
- --tw-backdrop-blur: blur(4px);
3001
- backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
2255
+ .pr-10 {
2256
+ padding-right: 2.5rem;
3002
2257
  }
3003
- .transition {
3004
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
3005
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3006
- transition-duration: 150ms;
2258
+ .pr-2 {
2259
+ padding-right: 0.5rem;
3007
2260
  }
3008
- .transition-all {
3009
- transition-property: all;
3010
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3011
- transition-duration: 150ms;
2261
+ .pr-3 {
2262
+ padding-right: 0.75rem;
3012
2263
  }
3013
- .transition-colors {
3014
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
3015
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3016
- transition-duration: 150ms;
2264
+ .pr-8 {
2265
+ padding-right: 2rem;
3017
2266
  }
3018
- .transition-opacity {
3019
- transition-property: opacity;
3020
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3021
- transition-duration: 150ms;
2267
+ .pt-0 {
2268
+ padding-top: 0px;
3022
2269
  }
3023
- .transition-transform {
3024
- transition-property: transform;
3025
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3026
- transition-duration: 150ms;
2270
+ .pt-0\.5 {
2271
+ padding-top: 0.125rem;
3027
2272
  }
3028
- .duration-200 {
3029
- transition-duration: 200ms;
2273
+ .pt-2 {
2274
+ padding-top: 0.5rem;
3030
2275
  }
3031
- .duration-300 {
3032
- transition-duration: 300ms;
2276
+ .pt-4 {
2277
+ padding-top: 1rem;
3033
2278
  }
3034
- .duration-500 {
3035
- transition-duration: 500ms;
2279
+ .text-left {
2280
+ text-align: left;
3036
2281
  }
3037
- .ease-in-out {
3038
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2282
+ .text-center {
2283
+ text-align: center;
3039
2284
  }
3040
- @keyframes enter {
3041
-
3042
- from {
3043
- opacity: var(--tw-enter-opacity, 1);
3044
- transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
3045
- }
2285
+ .text-justify {
2286
+ text-align: justify;
3046
2287
  }
3047
- @keyframes exit {
3048
-
3049
- to {
3050
- opacity: var(--tw-exit-opacity, 1);
3051
- transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
3052
- }
2288
+ .align-middle {
2289
+ vertical-align: middle;
3053
2290
  }
3054
- .animate-in {
3055
- animation-name: enter;
3056
- animation-duration: 150ms;
3057
- --tw-enter-opacity: initial;
3058
- --tw-enter-scale: initial;
3059
- --tw-enter-rotate: initial;
3060
- --tw-enter-translate-x: initial;
3061
- --tw-enter-translate-y: initial;
2291
+ .font-mono {
2292
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
3062
2293
  }
3063
- .fade-in-0 {
3064
- --tw-enter-opacity: 0;
2294
+ .text-\[10px\] {
2295
+ font-size: 10px;
3065
2296
  }
3066
- .zoom-in-95 {
3067
- --tw-enter-scale: .95;
2297
+ .text-\[14px\] {
2298
+ font-size: 14px;
3068
2299
  }
3069
- .duration-200 {
3070
- animation-duration: 200ms;
2300
+ .text-\[16px\] {
2301
+ font-size: 16px;
3071
2302
  }
3072
- .duration-300 {
3073
- animation-duration: 300ms;
2303
+ .text-\[20px\] {
2304
+ font-size: 20px;
3074
2305
  }
3075
- .duration-500 {
3076
- animation-duration: 500ms;
2306
+ .text-\[24px\] {
2307
+ font-size: 24px;
3077
2308
  }
3078
- .ease-in-out {
3079
- animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2309
+ .text-\[32px\] {
2310
+ font-size: 32px;
3080
2311
  }
3081
-
3082
- #selected-value > div > div > p {
3083
- display: none;
2312
+ .text-\[9px\] {
2313
+ font-size: 9px;
3084
2314
  }
3085
-
3086
- #storybook-root {
3087
- padding: 0 !important;
2315
+ .text-lg {
2316
+ font-size: 1.125rem;
2317
+ line-height: 1.75rem;
3088
2318
  }
3089
-
3090
- input:is(:-webkit-autofill, :-webkit-autofill), textarea:is(:-webkit-autofill, :-webkit-autofill) {
3091
- -webkit-transition:
3092
- background-color 0s 600000s,
3093
- color 0s 600000s !important;
3094
- transition:
3095
- background-color 0s 600000s,
3096
- color 0s 600000s !important;
2319
+ .text-sm {
2320
+ font-size: 0.875rem;
2321
+ line-height: 1.25rem;
3097
2322
  }
3098
-
3099
- input:is(:-webkit-autofill, :autofill),
3100
- textarea:is(:-webkit-autofill, :autofill) {
3101
- -webkit-transition:
3102
- background-color 0s 600000s,
3103
- color 0s 600000s !important;
3104
- transition:
3105
- background-color 0s 600000s,
3106
- color 0s 600000s !important;
2323
+ .text-xs {
2324
+ font-size: 0.75rem;
2325
+ line-height: 1rem;
3107
2326
  }
3108
-
3109
- .epr-emoji-category-label {
3110
- font-family: system-ui !important;
3111
- font-size: 14px !important;
3112
- font-style: normal !important;
3113
- font-weight: 500 !important;
3114
- line-height: 20px !important;
2327
+ .\!font-bold {
2328
+ font-weight: 700 !important;
3115
2329
  }
3116
-
3117
- .epr-search-container > input {
3118
- display: flex;
3119
- height: 2.25rem; /* h-9 */
3120
- width: 100%; /* w-full */
3121
- border-radius: 4px; /* rounded-md */
3122
- border: 1px solid hsl(214.3, 31.8%, 91.4%); /* border border-input */
3123
- background-color: transparent !important; /* bg-transparent */
3124
- font-size: 14px; /* text-sm */
3125
- transition: colors 0.15s ease-in-out;
3126
- color: #000;
3127
- font-family: system-ui, "Roboto";
2330
+ .font-\[700\] {
2331
+ font-weight: 700;
3128
2332
  }
3129
-
3130
- /* For hover state */
3131
- .epr-search-container > input:hover {
3132
- border-color: #000; /* hover:border-border-hover */
2333
+ .font-medium {
2334
+ font-weight: 500;
3133
2335
  }
3134
-
3135
- /* For focus-visible state */
3136
- .epr-search-container > input:focus-visible {
3137
- outline: none; /* focus-visible:outline-none */
3138
- border-color: #000; /* focus-visible:border-border-hover */
2336
+ .font-normal {
2337
+ font-weight: 400;
3139
2338
  }
3140
-
3141
- /* For placeholder text */
3142
- .epr-search-container > input::-moz-placeholder {
3143
- color: hsl(var(--color-text-disabled));
3144
- font-family: system-ui, "Roboto";
3145
- font-size: 14px;
2339
+ .tabular-nums {
2340
+ --tw-numeric-spacing: tabular-nums;
2341
+ font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
3146
2342
  }
3147
- .epr-search-container > input::placeholder {
3148
- color: hsl(var(--color-text-disabled));
3149
- font-family: system-ui, "Roboto";
3150
- font-size: 14px;
2343
+ .leading-5 {
2344
+ line-height: 1.25rem;
3151
2345
  }
3152
-
3153
- .epr_-bbny0t > button {
3154
- border-radius: 50% !important;
2346
+ .leading-6 {
2347
+ line-height: 1.5rem;
3155
2348
  }
3156
-
3157
- .epr_-6kfaby.epr-active {
3158
- background-color: #ffdf0a !important;
3159
- color: #000 !important;
3160
- border-radius: 4px !important;
3161
- border: none !important;
2349
+ .leading-\[20px\] {
2350
+ line-height: 20px;
3162
2351
  }
3163
-
3164
- .epr_-f1jbax:focus:before {
3165
- border: none !important;
3166
- border-radius: 4px !important;
2352
+ .leading-none {
2353
+ line-height: 1;
3167
2354
  }
3168
-
3169
- .epr_-8ygbw8 {
3170
- padding: 0.5rem 1rem !important;
2355
+ .tracking-wide {
2356
+ letter-spacing: 0.025em;
3171
2357
  }
3172
-
3173
- .epr-body {
3174
- margin: 0 0.5rem !important;
2358
+ .tracking-widest {
2359
+ letter-spacing: 0.1em;
3175
2360
  }
3176
-
3177
- .toast-mini {
3178
- padding: 8px 12px !important;
3179
- gap: 8px !important;
3180
- width: -moz-fit-content !important;
3181
- width: fit-content !important;
3182
- border-radius: 8px !important;
3183
- place-self: end !important;
2361
+ .text-\[\#77818A\] {
2362
+ --tw-text-opacity: 1;
2363
+ color: rgb(119 129 138 / var(--tw-text-opacity, 1));
3184
2364
  }
3185
-
3186
- .toast-mini > * + * {
3187
- margin-left: 0;
2365
+ .text-\[hsl\(var\(--color-bg-default\)\)\] {
2366
+ color: hsl(var(--color-bg-default));
3188
2367
  }
3189
-
3190
- .space-lg {
3191
- padding: 20px !important;
2368
+ .text-\[hsl\(var\(--color-icon-secondary\)\)\] {
2369
+ color: hsl(var(--color-icon-secondary));
3192
2370
  }
3193
- .space-y-lg {
3194
- padding-top: 20px !important;
3195
- padding-bottom: 20px !important;
2371
+ .text-\[hsl\(var\(--color-text-inverse\)\)\] {
2372
+ color: hsl(var(--color-text-inverse));
3196
2373
  }
3197
- .space-x-lg {
3198
- padding-left: 20px !important;
3199
- padding-right: 20px !important;
2374
+ .text-current {
2375
+ color: currentColor;
3200
2376
  }
3201
- .top-space-lg {
3202
- padding-top: 20px !important;
2377
+ .text-gray-400 {
2378
+ --tw-text-opacity: 1;
2379
+ color: rgb(156 163 175 / var(--tw-text-opacity, 1));
3203
2380
  }
3204
- .bottom-space-lg {
3205
- padding-bottom: 20px !important;
2381
+ .text-red-500 {
2382
+ --tw-text-opacity: 1;
2383
+ color: rgb(239 68 68 / var(--tw-text-opacity, 1));
3206
2384
  }
3207
- .left-space-lg {
3208
- padding-left: 20px !important;
2385
+ .text-white {
2386
+ --tw-text-opacity: 1;
2387
+ color: rgb(255 255 255 / var(--tw-text-opacity, 1));
3209
2388
  }
3210
- .right-space-lg {
3211
- padding-right: 20px !important;
2389
+ .text-white\/60 {
2390
+ color: rgb(255 255 255 / 0.6);
3212
2391
  }
3213
- .bottom-space-xlg {
3214
- padding-bottom: 24px !important;
2392
+ .underline {
2393
+ text-decoration-line: underline;
3215
2394
  }
3216
-
3217
- .space-sm {
3218
- padding: 12px !important;
2395
+ .caret-transparent {
2396
+ caret-color: transparent;
3219
2397
  }
3220
- .space-y-sm {
3221
- padding-top: 12px !important;
3222
- padding-bottom: 12px !important;
2398
+ .opacity-0 {
2399
+ opacity: 0;
3223
2400
  }
3224
- .space-x-sm {
3225
- padding-left: 12px !important;
3226
- padding-right: 12px !important;
2401
+ .opacity-30 {
2402
+ opacity: 0.3;
3227
2403
  }
3228
- .top-space-sm {
3229
- padding-top: 12px !important;
2404
+ .opacity-50 {
2405
+ opacity: 0.5;
3230
2406
  }
3231
- .bottom-space-sm {
3232
- padding-bottom: 12px !important;
2407
+ .opacity-90 {
2408
+ opacity: 0.9;
3233
2409
  }
3234
- .left-space-sm {
3235
- padding-left: 12px !important;
2410
+ .shadow {
2411
+ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
2412
+ --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
2413
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3236
2414
  }
3237
- .right-space-sm {
3238
- padding-right: 12px !important;
2415
+ .shadow-lg {
2416
+ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
2417
+ --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
2418
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3239
2419
  }
3240
-
3241
- .space-xsm {
3242
- padding: 8px !important;
2420
+ .shadow-md {
2421
+ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
2422
+ --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
2423
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3243
2424
  }
3244
- .space-y-xsm {
3245
- padding-top: 8px !important;
3246
- padding-bottom: 8px !important;
2425
+ .shadow-none {
2426
+ --tw-shadow: 0 0 #0000;
2427
+ --tw-shadow-colored: 0 0 #0000;
2428
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3247
2429
  }
3248
- .space-x-xsm {
3249
- padding-left: 8px !important;
3250
- padding-right: 8px !important;
2430
+ .shadow-sm {
2431
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
2432
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
2433
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2434
+ }
2435
+ .outline-none {
2436
+ outline: 2px solid transparent;
2437
+ outline-offset: 2px;
2438
+ }
2439
+ .outline {
2440
+ outline-style: solid;
3251
2441
  }
3252
- .space-x-3xlg {
3253
- padding-left: 40px !important;
3254
- padding-right: 40px !important;
2442
+ .outline-1 {
2443
+ outline-width: 1px;
3255
2444
  }
3256
- .space-y-3xlg {
3257
- padding-left: 40px !important;
3258
- padding-right: 40px !important;
2445
+ .-outline-offset-\[0\.5px\] {
2446
+ outline-offset: -0.5px;
3259
2447
  }
3260
- .top-space-xsm {
3261
- padding-top: 8px !important;
2448
+ .-outline-offset-\[1px\] {
2449
+ outline-offset: -1px;
3262
2450
  }
3263
- .bottom-space-xsm {
3264
- padding-bottom: 8px !important;
2451
+ .outline-offset-\[-1px\] {
2452
+ outline-offset: -1px;
3265
2453
  }
3266
- .left-space-xsm {
3267
- padding-left: 8px !important;
2454
+ .outline-\[hsl\(var\(--color-border-default\)\)\] {
2455
+ outline-color: hsl(var(--color-border-default));
3268
2456
  }
3269
- .right-space-xsm {
3270
- padding-right: 8px !important;
2457
+ .ring-0 {
2458
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2459
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2460
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3271
2461
  }
3272
- .right-space-2xsm {
3273
- padding-right: 4px !important;
2462
+ .ring-2 {
2463
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2464
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2465
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3274
2466
  }
3275
- .bottom-space-2xsm {
3276
- padding-bottom: 4px !important;
2467
+ .ring-focused {
2468
+ --tw-ring-color: hsl(var(--focused));
3277
2469
  }
3278
- .bottom-space-2xlg {
3279
- padding-bottom: 32px !important;
2470
+ .ring-offset-2 {
2471
+ --tw-ring-offset-width: 2px;
3280
2472
  }
3281
- .space-2xsm {
3282
- padding: 4px !important;
2473
+ .ring-offset-transparent {
2474
+ --tw-ring-offset-color: transparent;
3283
2475
  }
3284
- .space-md {
3285
- padding: 16px !important;
2476
+ .ring-offset-white {
2477
+ --tw-ring-offset-color: #fff;
3286
2478
  }
3287
- .space-y-md {
3288
- padding-top: 16px !important;
3289
- padding-bottom: 16px !important;
2479
+ .drop-shadow {
2480
+ --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
2481
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
3290
2482
  }
3291
- .space-x-md {
3292
- padding-left: 16px !important;
3293
- padding-right: 16px !important;
2483
+ .filter {
2484
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
3294
2485
  }
3295
- .top-space-md {
3296
- padding-top: 16px !important;
2486
+ .backdrop-blur-sm {
2487
+ --tw-backdrop-blur: blur(4px);
2488
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
3297
2489
  }
3298
- .bottom-space-md {
3299
- padding-bottom: 16px !important;
2490
+ .transition {
2491
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2492
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2493
+ transition-duration: 150ms;
3300
2494
  }
3301
- .left-space-md {
3302
- padding-left: 16px !important;
2495
+ .transition-all {
2496
+ transition-property: all;
2497
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2498
+ transition-duration: 150ms;
3303
2499
  }
3304
- .right-space-md {
3305
- padding-right: 16px !important;
2500
+ .transition-colors {
2501
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
2502
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2503
+ transition-duration: 150ms;
3306
2504
  }
3307
- .top-space-xlg {
3308
- padding-top: 32px !important;
2505
+ .transition-opacity {
2506
+ transition-property: opacity;
2507
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2508
+ transition-duration: 150ms;
3309
2509
  }
3310
-
3311
- .gap-xsm {
3312
- gap: 8px !important;
2510
+ .transition-transform {
2511
+ transition-property: transform;
2512
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2513
+ transition-duration: 150ms;
3313
2514
  }
3314
- .gap-2xsm {
3315
- gap: 4px !important;
2515
+ .duration-200 {
2516
+ transition-duration: 200ms;
3316
2517
  }
3317
- .gap-3xsm {
3318
- gap: 2px !important;
2518
+ .duration-300 {
2519
+ transition-duration: 300ms;
3319
2520
  }
3320
- .gap-md {
3321
- gap: 16px !important;
2521
+ .duration-500 {
2522
+ transition-duration: 500ms;
3322
2523
  }
3323
- .gap-sm {
3324
- gap: 12px !important;
2524
+ .ease-in-out {
2525
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3325
2526
  }
2527
+ @keyframes enter {
3326
2528
 
3327
- .border-radius-sm {
3328
- border-radius: 4px !important;
3329
- }
3330
- .border-width-md {
3331
- border-width: 1px !important;
2529
+ from {
2530
+ opacity: var(--tw-enter-opacity, 1);
2531
+ transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
2532
+ }
3332
2533
  }
3333
- .border-radius-lg {
3334
- border-radius: 12px !important;
2534
+ @keyframes exit {
2535
+
2536
+ to {
2537
+ opacity: var(--tw-exit-opacity, 1);
2538
+ transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
2539
+ }
3335
2540
  }
3336
- .top-left-border-radius-xlg {
3337
- border-top-left-radius: 16px !important;
2541
+ .animate-in {
2542
+ animation-name: enter;
2543
+ animation-duration: 150ms;
2544
+ --tw-enter-opacity: initial;
2545
+ --tw-enter-scale: initial;
2546
+ --tw-enter-rotate: initial;
2547
+ --tw-enter-translate-x: initial;
2548
+ --tw-enter-translate-y: initial;
3338
2549
  }
3339
- .top-right-border-radius-xlg {
3340
- border-top-right-radius: 16px !important;
2550
+ .fade-in-0 {
2551
+ --tw-enter-opacity: 0;
3341
2552
  }
3342
- .bottom-left-border-radius-xlg {
3343
- border-bottom-left-radius: 16px !important;
2553
+ .zoom-in-95 {
2554
+ --tw-enter-scale: .95;
3344
2555
  }
3345
- .bottom-right-border-radius-xlg {
3346
- border-bottom-right-radius: 16px !important;
2556
+ .duration-200 {
2557
+ animation-duration: 200ms;
3347
2558
  }
3348
- .border-radius-xlg {
3349
- border-radius: 16px !important;
2559
+ .duration-300 {
2560
+ animation-duration: 300ms;
3350
2561
  }
3351
- .border-radius-md {
3352
- border-radius: 8px !important;
2562
+ .duration-500 {
2563
+ animation-duration: 500ms;
3353
2564
  }
3354
- .space-x-xlg {
3355
- padding-left: 24px !important;
3356
- padding-right: 24px !important;
2565
+ .ease-in-out {
2566
+ animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3357
2567
  }
3358
2568
  .file\:text-body-sm::file-selector-button {
3359
- font-family: system-ui;
3360
- font-size: 14px;
3361
- font-weight: 400;
3362
- line-height: 20px;
3363
- }
2569
+ font-family: system-ui;
2570
+ font-size: 14px;
2571
+ font-weight: 400;
2572
+ line-height: 20px;
2573
+ }
3364
2574
  .placeholder\:color-text-disabled::-moz-placeholder {
3365
- color: hsl(var(--color-text-disabled));
3366
- }
2575
+ color: hsl(var(--color-text-disabled));
2576
+ }
3367
2577
  .placeholder\:color-text-disabled::placeholder {
3368
- color: hsl(var(--color-text-disabled));
3369
- }
2578
+ color: hsl(var(--color-text-disabled));
2579
+ }
3370
2580
  .checked\:color-text-inverse:checked {
3371
- color: hsl(var(--color-text-inverse));
3372
- }
2581
+ color: hsl(var(--color-text-inverse));
2582
+ }
3373
2583
  .checked\:color-bg-default-inverse:checked {
3374
- background-color: hsl(var(--color-bg-default-inverse));
3375
- }
2584
+ background-color: hsl(var(--color-bg-default-inverse));
2585
+ }
3376
2586
  .focus-within\:color-button-secondary-hover:focus-within {
3377
- background-color: hsl(var(--color-button-secondary-hover));
3378
- }
2587
+ background-color: hsl(var(--color-button-secondary-hover));
2588
+ }
3379
2589
  .hover\:color-text-inverse:hover {
3380
- color: hsl(var(--color-text-inverse));
3381
- }
2590
+ color: hsl(var(--color-text-inverse));
2591
+ }
3382
2592
  .hover\:\!color-bg-default:hover {
3383
- background-color: hsl(var(--color-bg-default)) !important;
3384
- }
2593
+ background-color: hsl(var(--color-bg-default)) !important;
2594
+ }
3385
2595
  .hover\:\!color-bg-default-hover:hover {
3386
- background-color: hsl(var(--color-bg-default-hover)) !important;
3387
- }
2596
+ background-color: hsl(var(--color-bg-default-hover)) !important;
2597
+ }
3388
2598
  .hover\:color-bg-default-hover:hover {
3389
- background-color: hsl(var(--color-bg-default-hover));
3390
- }
2599
+ background-color: hsl(var(--color-bg-default-hover));
2600
+ }
3391
2601
  .hover\:color-bg-secondary-hover:hover {
3392
- background-color: hsl(var(--color-bg-secondary-hover));
3393
- }
2602
+ background-color: hsl(var(--color-bg-secondary-hover));
2603
+ }
3394
2604
  .hover\:\!color-bg-brand:hover {
3395
- background-color: hsl(var(--color-bg-brand)) !important;
3396
- }
2605
+ background-color: hsl(var(--color-bg-brand)) !important;
2606
+ }
3397
2607
  .hover\:color-bg-brand-hover:hover {
3398
- background-color: hsl(var(--color-bg-brand-hover));
3399
- }
2608
+ background-color: hsl(var(--color-bg-brand-hover));
2609
+ }
3400
2610
  .hover\:color-button-default-hover:hover {
3401
- background-color: hsl(var(--color-button-default-hover));
3402
- }
2611
+ background-color: hsl(var(--color-button-default-hover));
2612
+ }
3403
2613
  .hover\:color-button-secondary-hover:hover {
3404
- background-color: hsl(var(--color-button-secondary-hover));
3405
- }
2614
+ background-color: hsl(var(--color-button-secondary-hover));
2615
+ }
3406
2616
  .hover\:color-button-danger-hover:hover {
3407
- background-color: hsl(var(--color-button-danger-hover));
3408
- }
2617
+ background-color: hsl(var(--color-button-danger-hover));
2618
+ }
3409
2619
  .hover\:\!color-button-floating-hover:hover {
3410
- background-color: hsl(var(--color-button-floating-hover)) !important;
3411
- }
2620
+ background-color: hsl(var(--color-button-floating-hover)) !important;
2621
+ }
3412
2622
  .hover\:color-border-hover:hover {
3413
- border-color: hsl(var(--color-border-hover));
3414
- }
2623
+ border-color: hsl(var(--color-border-hover));
2624
+ }
3415
2625
  .focus\:color-bg-brand:focus {
3416
- background-color: hsl(var(--color-bg-brand));
3417
- }
2626
+ background-color: hsl(var(--color-bg-brand));
2627
+ }
3418
2628
  .focus-visible\:color-border-hover:focus-visible {
3419
- border-color: hsl(var(--color-border-hover));
3420
- }
2629
+ border-color: hsl(var(--color-border-hover));
2630
+ }
3421
2631
  .disabled\:color-text-disabled:disabled {
3422
- color: hsl(var(--color-text-disabled));
3423
- }
2632
+ color: hsl(var(--color-text-disabled));
2633
+ }
3424
2634
  .disabled\:color-bg-disabled:disabled {
3425
- background-color: hsl(var(--color-bg-disabled));
3426
- }
2635
+ background-color: hsl(var(--color-bg-disabled));
2636
+ }
3427
2637
  .disabled\:\!color-button-disabled:disabled {
3428
- background-color: hsl(var(--color-button-disabled)) !important;
3429
- border-color: hsl(var(--color-button-disabled)) !important;
3430
- color: hsl(var(--color-text-disabled)) !important;
3431
- }
2638
+ background-color: hsl(var(--color-button-disabled)) !important;
2639
+ border-color: hsl(var(--color-button-disabled)) !important;
2640
+ color: hsl(var(--color-text-disabled)) !important;
2641
+ }
3432
2642
  .disabled\:color-button-disabled:disabled {
3433
- background-color: hsl(var(--color-button-disabled));
3434
- border-color: hsl(var(--color-button-disabled));
3435
- color: hsl(var(--color-text-disabled));
3436
- }
2643
+ background-color: hsl(var(--color-button-disabled));
2644
+ border-color: hsl(var(--color-button-disabled));
2645
+ color: hsl(var(--color-text-disabled));
2646
+ }
3437
2647
  .disabled\:color-border-disabled:disabled {
3438
- border-color: hsl(var(--color-border-disabled));
3439
- }
2648
+ border-color: hsl(var(--color-border-disabled));
2649
+ }
3440
2650
  .aria-selected\:color-text-default[aria-selected="true"] {
3441
- color: hsl(var(--color-text-default));
3442
- }
2651
+ color: hsl(var(--color-text-default));
2652
+ }
3443
2653
  .aria-selected\:color-bg-default-selected[aria-selected="true"] {
3444
- background-color: hsl(var(--color-bg-default-selected));
3445
- }
2654
+ background-color: hsl(var(--color-bg-default-selected));
2655
+ }
3446
2656
  .aria-selected\:color-bg-secondary[aria-selected="true"] {
3447
- background-color: hsl(var(--color-bg-secondary));
3448
- }
2657
+ background-color: hsl(var(--color-bg-secondary));
2658
+ }
3449
2659
  .data-\[highlighted\]\:color-text-default[data-highlighted] {
3450
- color: hsl(var(--color-text-default));
3451
- }
2660
+ color: hsl(var(--color-text-default));
2661
+ }
3452
2662
  .data-\[state\=active\]\:color-text-default[data-state="active"] {
3453
- color: hsl(var(--color-text-default));
3454
- }
2663
+ color: hsl(var(--color-text-default));
2664
+ }
3455
2665
  .data-\[state\=open\]\:color-text-default[data-state="open"] {
3456
- color: hsl(var(--color-text-default));
3457
- }
2666
+ color: hsl(var(--color-text-default));
2667
+ }
3458
2668
  .data-\[disabled\]\:color-text-disabled[data-disabled] {
3459
- color: hsl(var(--color-text-disabled));
3460
- }
2669
+ color: hsl(var(--color-text-disabled));
2670
+ }
3461
2671
  .data-\[highlighted\]\:color-bg-default-hover[data-highlighted] {
3462
- background-color: hsl(var(--color-bg-default-hover));
3463
- }
2672
+ background-color: hsl(var(--color-bg-default-hover));
2673
+ }
3464
2674
  .data-\[state\=open\]\:color-bg-default-hover[data-state="open"] {
3465
- background-color: hsl(var(--color-bg-default-hover));
3466
- }
2675
+ background-color: hsl(var(--color-bg-default-hover));
2676
+ }
3467
2677
  .data-\[state\=unchecked\]\:color-bg-default-hover[data-state="unchecked"] {
3468
- background-color: hsl(var(--color-bg-default-hover));
3469
- }
2678
+ background-color: hsl(var(--color-bg-default-hover));
2679
+ }
3470
2680
  .data-\[highlighted\]\:color-bg-default-selected[data-highlighted] {
3471
- background-color: hsl(var(--color-bg-default-selected));
3472
- }
2681
+ background-color: hsl(var(--color-bg-default-selected));
2682
+ }
3473
2683
  .data-\[state\=open\]\:color-bg-default-selected[data-state="open"] {
3474
- background-color: hsl(var(--color-bg-default-selected));
3475
- }
2684
+ background-color: hsl(var(--color-bg-default-selected));
2685
+ }
3476
2686
  .data-\[state\=selected\]\:color-bg-default-selected[data-state="selected"] {
3477
- background-color: hsl(var(--color-bg-default-selected));
3478
- }
2687
+ background-color: hsl(var(--color-bg-default-selected));
2688
+ }
3479
2689
  .data-\[state\=checked\]\:color-bg-brand-hover[data-state="checked"] {
3480
- background-color: hsl(var(--color-bg-brand-hover));
3481
- }
2690
+ background-color: hsl(var(--color-bg-brand-hover));
2691
+ }
3482
2692
  .data-\[state\=active\]\:color-border-active[data-state="active"] {
3483
- border-color: hsl(var(--color-border-active));
3484
- }
2693
+ border-color: hsl(var(--color-border-active));
2694
+ }
2695
+ .data-\[state\=unchecked\]\:toggle-default[data-state="unchecked"] {
2696
+ background-color: hsl(var(--color-bg-disabled));
2697
+ }
2698
+ .data-\[state\=checked\]\:toggle-active[data-state="checked"] {
2699
+ background-color: hsl(var(--color-bg-brand));
2700
+ }
3485
2701
  .data-\[state\=unchecked\]\:hover\:enabled\:color-bg-default-hover:enabled:hover[data-state="unchecked"] {
3486
- background-color: hsl(var(--color-bg-default-hover));
3487
- }
2702
+ background-color: hsl(var(--color-bg-default-hover));
2703
+ }
3488
2704
  .data-\[state\=checked\]\:hover\:enabled\:color-bg-brand-hover:enabled:hover[data-state="checked"] {
3489
- background-color: hsl(var(--color-bg-brand-hover));
3490
- }
2705
+ background-color: hsl(var(--color-bg-brand-hover));
2706
+ }
2707
+ .data-\[state\=checked\]\:disabled\:toggle-default:disabled[data-state="checked"] {
2708
+ background-color: hsl(var(--color-bg-disabled));
2709
+ }
3491
2710
  @media (min-width: 1024px) {
3492
2711
 
3493
2712
  .lg\:\!text-heading-2xlg {
@@ -3504,32 +2723,23 @@ textarea:is(:-webkit-autofill, :autofill) {
3504
2723
  }
3505
2724
  }
3506
2725
  .\[\&\>svg\]\:color-text-default>svg {
3507
- color: hsl(var(--color-text-default));
3508
- }
2726
+ color: hsl(var(--color-text-default));
2727
+ }
3509
2728
  .\[\&\>svg\]\:color-text-danger>svg {
3510
- color: hsl(var(--color-text-danger));
3511
- }
2729
+ color: hsl(var(--color-text-danger));
2730
+ }
3512
2731
  .\[\&_\[cmdk-group-heading\]\]\:text-helper-text-sm [cmdk-group-heading] {
3513
- font-family: system-ui;
3514
- font-size: 12px;
3515
- font-weight: 400;
3516
- line-height: 16px;
3517
- }
2732
+ font-family: system-ui;
2733
+ font-size: 12px;
2734
+ font-weight: 400;
2735
+ line-height: 16px;
2736
+ }
3518
2737
  .\[\&_\[cmdk-group-heading\]\]\:color-text-disabled [cmdk-group-heading] {
3519
- color: hsl(var(--color-text-disabled));
3520
- }
2738
+ color: hsl(var(--color-text-disabled));
2739
+ }
3521
2740
  .\[\&_tr\]\:color-border-default tr {
3522
- border-color: hsl(var(--color-border-default));
3523
- }
3524
- .data-\[state\=unchecked\]\:toggle-default[data-state="unchecked"] {
3525
- background-color: hsl(var(--color-bg-disabled));
3526
- }
3527
- .data-\[state\=checked\]\:toggle-active[data-state="checked"] {
3528
- background-color: hsl(var(--color-bg-brand));
3529
- }
3530
- .data-\[state\=checked\]\:disabled\:toggle-default:disabled[data-state="checked"] {
3531
- background-color: hsl(var(--color-bg-disabled));
3532
- }
2741
+ border-color: hsl(var(--color-border-default));
2742
+ }
3533
2743
  .file\:border-0::file-selector-button {
3534
2744
  border-width: 0px;
3535
2745
  }
@@ -3548,608 +2758,1356 @@ textarea:is(:-webkit-autofill, :autofill) {
3548
2758
  .hover\:cursor-pointer:hover {
3549
2759
  cursor: pointer;
3550
2760
  }
3551
- .hover\:\!border-transparent:hover {
3552
- border-color: transparent !important;
2761
+ .hover\:\!border-transparent:hover {
2762
+ border-color: transparent !important;
2763
+ }
2764
+ .hover\:bg-inherit:hover {
2765
+ background-color: inherit;
2766
+ }
2767
+ .hover\:bg-transparent:hover {
2768
+ background-color: transparent;
2769
+ }
2770
+ .hover\:opacity-90:hover {
2771
+ opacity: 0.9;
2772
+ }
2773
+ .hover\:brightness-95:hover {
2774
+ --tw-brightness: brightness(.95);
2775
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
2776
+ }
2777
+ .focus\:shadow-none:focus {
2778
+ --tw-shadow: 0 0 #0000;
2779
+ --tw-shadow-colored: 0 0 #0000;
2780
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2781
+ }
2782
+ .focus\:outline-none:focus {
2783
+ outline: 2px solid transparent;
2784
+ outline-offset: 2px;
2785
+ }
2786
+ .focus\:ring-0:focus {
2787
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2788
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2789
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2790
+ }
2791
+ .focus\:ring-2:focus {
2792
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2793
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2794
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2795
+ }
2796
+ .focus\:ring-focused:focus {
2797
+ --tw-ring-color: hsl(var(--focused));
2798
+ }
2799
+ .focus\:ring-offset-2:focus {
2800
+ --tw-ring-offset-width: 2px;
2801
+ }
2802
+ .focus-visible\:outline-none:focus-visible {
2803
+ outline: 2px solid transparent;
2804
+ outline-offset: 2px;
2805
+ }
2806
+ .focus-visible\:ring-1:focus-visible {
2807
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2808
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2809
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2810
+ }
2811
+ .focus-visible\:ring-2:focus-visible {
2812
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2813
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2814
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2815
+ }
2816
+ .focus-visible\:ring-focused:focus-visible {
2817
+ --tw-ring-color: hsl(var(--focused));
2818
+ }
2819
+ .focus-visible\:ring-offset-2:focus-visible {
2820
+ --tw-ring-offset-width: 2px;
2821
+ }
2822
+ .focus-visible\:ring-offset-white:focus-visible {
2823
+ --tw-ring-offset-color: #fff;
2824
+ }
2825
+ .disabled\:pointer-events-none:disabled {
2826
+ pointer-events: none;
2827
+ }
2828
+ .disabled\:cursor-not-allowed:disabled {
2829
+ cursor: not-allowed;
2830
+ }
2831
+ .disabled\:opacity-50:disabled {
2832
+ opacity: 0.5;
2833
+ }
2834
+ .group:hover .group-hover\:visible {
2835
+ visibility: visible;
2836
+ }
2837
+ .group:hover .group-hover\:opacity-100 {
2838
+ opacity: 1;
2839
+ }
2840
+ .peer:checked ~ .peer-checked\:block {
2841
+ display: block;
2842
+ }
2843
+ .peer:disabled ~ .peer-disabled\:cursor-not-allowed {
2844
+ cursor: not-allowed;
2845
+ }
2846
+ .peer:disabled ~ .peer-disabled\:opacity-70 {
2847
+ opacity: 0.7;
2848
+ }
2849
+ .aria-selected\:opacity-100[aria-selected="true"] {
2850
+ opacity: 1;
2851
+ }
2852
+ .data-\[disabled\]\:pointer-events-none[data-disabled] {
2853
+ pointer-events: none;
2854
+ }
2855
+ .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
2856
+ --tw-translate-y: 0.25rem;
2857
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2858
+ }
2859
+ .data-\[side\=left\]\:-translate-x-1[data-side="left"] {
2860
+ --tw-translate-x: -0.25rem;
2861
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2862
+ }
2863
+ .data-\[side\=right\]\:translate-x-1[data-side="right"] {
2864
+ --tw-translate-x: 0.25rem;
2865
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2866
+ }
2867
+ .data-\[side\=top\]\:-translate-y-1[data-side="top"] {
2868
+ --tw-translate-y: -0.25rem;
2869
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2870
+ }
2871
+ .data-\[state\=checked\]\:translate-x-5[data-state="checked"] {
2872
+ --tw-translate-x: 1.25rem;
2873
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2874
+ }
2875
+ .data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
2876
+ --tw-translate-x: 0px;
2877
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2878
+ }
2879
+ .data-\[swipe\=cancel\]\:translate-x-0[data-swipe="cancel"] {
2880
+ --tw-translate-x: 0px;
2881
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2882
+ }
2883
+ .data-\[swipe\=cancel\]\:translate-y-0[data-swipe="cancel"] {
2884
+ --tw-translate-y: 0px;
2885
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2886
+ }
2887
+ .data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe="end"] {
2888
+ --tw-translate-x: var(--radix-toast-swipe-end-x);
2889
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2890
+ }
2891
+ .data-\[swipe\=end\]\:translate-y-\[var\(--radix-toast-swipe-end-y\)\][data-swipe="end"] {
2892
+ --tw-translate-y: var(--radix-toast-swipe-end-y);
2893
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2894
+ }
2895
+ .data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe="move"] {
2896
+ --tw-translate-x: var(--radix-toast-swipe-move-x);
2897
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2898
+ }
2899
+ .data-\[swipe\=move\]\:translate-y-\[var\(--radix-toast-swipe-move-y\)\][data-swipe="move"] {
2900
+ --tw-translate-y: var(--radix-toast-swipe-move-y);
2901
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2902
+ }
2903
+ @keyframes accordion-up {
2904
+
2905
+ from {
2906
+ height: var(--radix-accordion-content-height);
2907
+ }
2908
+
2909
+ to {
2910
+ height: 0;
2911
+ }
2912
+ }
2913
+ .data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
2914
+ animation: accordion-up 0.2s ease-out;
2915
+ }
2916
+ @keyframes accordion-down {
2917
+
2918
+ from {
2919
+ height: 0;
2920
+ }
2921
+
2922
+ to {
2923
+ height: var(--radix-accordion-content-height);
2924
+ }
2925
+ }
2926
+ .data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
2927
+ animation: accordion-down 0.2s ease-out;
2928
+ }
2929
+ .data-\[state\=active\]\:border-b-2[data-state="active"] {
2930
+ border-bottom-width: 2px;
2931
+ }
2932
+ .data-\[state\=inactive\]\:border-transparent[data-state="inactive"] {
2933
+ border-color: transparent;
2934
+ }
2935
+ .data-\[swipe\=move\]\:transition-none[data-swipe="move"] {
2936
+ transition-property: none;
2937
+ }
2938
+ .data-\[state\=closed\]\:duration-300[data-state="closed"] {
2939
+ transition-duration: 300ms;
2940
+ }
2941
+ .data-\[state\=open\]\:duration-300[data-state="open"] {
2942
+ transition-duration: 300ms;
2943
+ }
2944
+ .data-\[state\=open\]\:duration-500[data-state="open"] {
2945
+ transition-duration: 500ms;
2946
+ }
2947
+ .data-\[state\=open\]\:animate-in[data-state="open"] {
2948
+ animation-name: enter;
2949
+ animation-duration: 150ms;
2950
+ --tw-enter-opacity: initial;
2951
+ --tw-enter-scale: initial;
2952
+ --tw-enter-rotate: initial;
2953
+ --tw-enter-translate-x: initial;
2954
+ --tw-enter-translate-y: initial;
2955
+ }
2956
+ .data-\[state\=closed\]\:animate-out[data-state="closed"] {
2957
+ animation-name: exit;
2958
+ animation-duration: 150ms;
2959
+ --tw-exit-opacity: initial;
2960
+ --tw-exit-scale: initial;
2961
+ --tw-exit-rotate: initial;
2962
+ --tw-exit-translate-x: initial;
2963
+ --tw-exit-translate-y: initial;
2964
+ }
2965
+ .data-\[swipe\=end\]\:animate-out[data-swipe="end"] {
2966
+ animation-name: exit;
2967
+ animation-duration: 150ms;
2968
+ --tw-exit-opacity: initial;
2969
+ --tw-exit-scale: initial;
2970
+ --tw-exit-rotate: initial;
2971
+ --tw-exit-translate-x: initial;
2972
+ --tw-exit-translate-y: initial;
2973
+ }
2974
+ .data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
2975
+ --tw-exit-opacity: 0;
2976
+ }
2977
+ .data-\[state\=closed\]\:fade-out-80[data-state="closed"] {
2978
+ --tw-exit-opacity: 0.8;
2979
+ }
2980
+ .data-\[state\=open\]\:fade-in-0[data-state="open"] {
2981
+ --tw-enter-opacity: 0;
2982
+ }
2983
+ .data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
2984
+ --tw-exit-scale: .95;
3553
2985
  }
3554
- .hover\:bg-inherit:hover {
3555
- background-color: inherit;
2986
+ .data-\[state\=open\]\:zoom-in-95[data-state="open"] {
2987
+ --tw-enter-scale: .95;
3556
2988
  }
3557
- .hover\:bg-transparent:hover {
3558
- background-color: transparent;
2989
+ .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
2990
+ --tw-enter-translate-y: -0.5rem;
3559
2991
  }
3560
- .hover\:opacity-90:hover {
3561
- opacity: 0.9;
2992
+ .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
2993
+ --tw-enter-translate-x: 0.5rem;
3562
2994
  }
3563
- .hover\:brightness-95:hover {
3564
- --tw-brightness: brightness(.95);
3565
- filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
2995
+ .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
2996
+ --tw-enter-translate-x: -0.5rem;
3566
2997
  }
3567
- .focus\:shadow-none:focus {
3568
- --tw-shadow: 0 0 #0000;
3569
- --tw-shadow-colored: 0 0 #0000;
3570
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2998
+ .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
2999
+ --tw-enter-translate-y: 0.5rem;
3571
3000
  }
3572
- .focus\:outline-none:focus {
3573
- outline: 2px solid transparent;
3574
- outline-offset: 2px;
3001
+ .data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
3002
+ --tw-exit-translate-y: 100%;
3575
3003
  }
3576
- .focus\:ring-0:focus {
3577
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3578
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3579
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3004
+ .data-\[state\=closed\]\:slide-out-to-bottom-\[calc\(100\%\+16px\*2\)\][data-state="closed"] {
3005
+ --tw-exit-translate-y: calc(100% + 16px * 2);
3580
3006
  }
3581
- .focus\:ring-2:focus {
3582
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3583
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3584
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3007
+ .data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
3008
+ --tw-exit-translate-x: -100%;
3585
3009
  }
3586
- .focus\:ring-focused:focus {
3587
- --tw-ring-color: hsl(var(--focused));
3010
+ .data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
3011
+ --tw-exit-translate-x: -50%;
3588
3012
  }
3589
- .focus\:ring-offset-2:focus {
3590
- --tw-ring-offset-width: 2px;
3013
+ .data-\[state\=closed\]\:slide-out-to-left-\[calc\(100\%\+16px\*2\)\][data-state="closed"] {
3014
+ --tw-exit-translate-x: -calc(100% + 16px * 2);
3591
3015
  }
3592
- .focus-visible\:outline-none:focus-visible {
3593
- outline: 2px solid transparent;
3594
- outline-offset: 2px;
3016
+ .data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
3017
+ --tw-exit-translate-x: 100%;
3595
3018
  }
3596
- .focus-visible\:ring-1:focus-visible {
3597
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3598
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3599
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3019
+ .data-\[state\=closed\]\:slide-out-to-right-\[calc\(100\%\+16px\*2\)\][data-state="closed"] {
3020
+ --tw-exit-translate-x: calc(100% + 16px * 2);
3600
3021
  }
3601
- .focus-visible\:ring-2:focus-visible {
3602
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3603
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3604
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3022
+ .data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
3023
+ --tw-exit-translate-y: -100%;
3605
3024
  }
3606
- .focus-visible\:ring-focused:focus-visible {
3607
- --tw-ring-color: hsl(var(--focused));
3025
+ .data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
3026
+ --tw-exit-translate-y: -48%;
3608
3027
  }
3609
- .focus-visible\:ring-offset-2:focus-visible {
3610
- --tw-ring-offset-width: 2px;
3028
+ .data-\[state\=closed\]\:slide-out-to-top-\[calc\(100\%\+16px\*2\)\][data-state="closed"] {
3029
+ --tw-exit-translate-y: -calc(100% + 16px * 2);
3611
3030
  }
3612
- .focus-visible\:ring-offset-white:focus-visible {
3613
- --tw-ring-offset-color: #fff;
3031
+ .data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
3032
+ --tw-enter-translate-y: 100%;
3614
3033
  }
3615
- .disabled\:pointer-events-none:disabled {
3616
- pointer-events: none;
3034
+ .data-\[state\=open\]\:slide-in-from-bottom-\[calc\(100\%\+16px\*2\)\][data-state="open"] {
3035
+ --tw-enter-translate-y: calc(100% + 16px * 2);
3617
3036
  }
3618
- .disabled\:cursor-not-allowed:disabled {
3619
- cursor: not-allowed;
3037
+ .data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
3038
+ --tw-enter-translate-x: -100%;
3620
3039
  }
3621
- .disabled\:opacity-50:disabled {
3622
- opacity: 0.5;
3040
+ .data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
3041
+ --tw-enter-translate-x: -50%;
3623
3042
  }
3624
- .group:hover .group-hover\:visible {
3625
- visibility: visible;
3043
+ .data-\[state\=open\]\:slide-in-from-left-\[calc\(100\%\+16px\*2\)\][data-state="open"] {
3044
+ --tw-enter-translate-x: -calc(100% + 16px * 2);
3626
3045
  }
3627
- .group:hover .group-hover\:opacity-100 {
3628
- opacity: 1;
3046
+ .data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
3047
+ --tw-enter-translate-x: 100%;
3629
3048
  }
3630
- .peer:checked ~ .peer-checked\:block {
3631
- display: block;
3049
+ .data-\[state\=open\]\:slide-in-from-right-\[calc\(100\%\+16px\*2\)\][data-state="open"] {
3050
+ --tw-enter-translate-x: calc(100% + 16px * 2);
3632
3051
  }
3633
- .peer:disabled ~ .peer-disabled\:cursor-not-allowed {
3634
- cursor: not-allowed;
3052
+ .data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
3053
+ --tw-enter-translate-y: -100%;
3635
3054
  }
3636
- .peer:disabled ~ .peer-disabled\:opacity-70 {
3637
- opacity: 0.7;
3055
+ .data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
3056
+ --tw-enter-translate-y: -48%;
3638
3057
  }
3639
- .aria-selected\:opacity-100[aria-selected="true"] {
3640
- opacity: 1;
3058
+ .data-\[state\=open\]\:slide-in-from-top-\[calc\(100\%\+16px\*2\)\][data-state="open"] {
3059
+ --tw-enter-translate-y: -calc(100% + 16px * 2);
3641
3060
  }
3642
- .data-\[disabled\]\:pointer-events-none[data-disabled] {
3643
- pointer-events: none;
3061
+ .data-\[state\=closed\]\:duration-300[data-state="closed"] {
3062
+ animation-duration: 300ms;
3644
3063
  }
3645
- .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
3646
- --tw-translate-y: 0.25rem;
3647
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3064
+ .data-\[state\=open\]\:duration-300[data-state="open"] {
3065
+ animation-duration: 300ms;
3648
3066
  }
3649
- .data-\[side\=left\]\:-translate-x-1[data-side="left"] {
3650
- --tw-translate-x: -0.25rem;
3651
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3067
+ .data-\[state\=open\]\:duration-500[data-state="open"] {
3068
+ animation-duration: 500ms;
3652
3069
  }
3653
- .data-\[side\=right\]\:translate-x-1[data-side="right"] {
3654
- --tw-translate-x: 0.25rem;
3655
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3070
+ .data-\[highlighted\]\:hover\:bg-\[hsl\(var\(--color-bg-default-hover\)\)\]:hover[data-highlighted] {
3071
+ background-color: hsl(var(--color-bg-default-hover));
3656
3072
  }
3657
- .data-\[side\=top\]\:-translate-y-1[data-side="top"] {
3658
- --tw-translate-y: -0.25rem;
3659
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3073
+ .data-\[highlighted\]\:hover\:\!outline-0:hover[data-highlighted] {
3074
+ outline-width: 0px !important;
3660
3075
  }
3661
- .data-\[state\=checked\]\:translate-x-5[data-state="checked"] {
3662
- --tw-translate-x: 1.25rem;
3663
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3076
+ .data-\[highlighted\]\:hover\:outline-0:hover[data-highlighted] {
3077
+ outline-width: 0px;
3664
3078
  }
3665
- .data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
3666
- --tw-translate-x: 0px;
3667
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3079
+ .data-\[highlighted\]\:hover\:\!outline-transparent:hover[data-highlighted] {
3080
+ outline-color: transparent !important;
3668
3081
  }
3669
- .data-\[swipe\=cancel\]\:translate-x-0[data-swipe="cancel"] {
3670
- --tw-translate-x: 0px;
3671
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3082
+ .data-\[highlighted\]\:focus-visible\:outline:focus-visible[data-highlighted] {
3083
+ outline-style: solid;
3672
3084
  }
3673
- .data-\[swipe\=cancel\]\:translate-y-0[data-swipe="cancel"] {
3674
- --tw-translate-y: 0px;
3675
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3085
+ .data-\[highlighted\]\:focus-visible\:outline-2:focus-visible[data-highlighted] {
3086
+ outline-width: 2px;
3676
3087
  }
3677
- .data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe="end"] {
3678
- --tw-translate-x: var(--radix-toast-swipe-end-x);
3679
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3088
+ .data-\[highlighted\]\:focus-visible\:outline-\[hsl\(var\(--color-border-focused\)\)\]:focus-visible[data-highlighted] {
3089
+ outline-color: hsl(var(--color-border-focused));
3680
3090
  }
3681
- .data-\[swipe\=end\]\:translate-y-\[var\(--radix-toast-swipe-end-y\)\][data-swipe="end"] {
3682
- --tw-translate-y: var(--radix-toast-swipe-end-y);
3683
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3091
+ .dark\:\!text-\[\#363B3F\]:is(.dark *) {
3092
+ --tw-text-opacity: 1 !important;
3093
+ color: rgb(54 59 63 / var(--tw-text-opacity, 1)) !important;
3684
3094
  }
3685
- .data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe="move"] {
3686
- --tw-translate-x: var(--radix-toast-swipe-move-x);
3687
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3095
+ .dark\:text-\[\#363B3F\]:is(.dark *) {
3096
+ --tw-text-opacity: 1;
3097
+ color: rgb(54 59 63 / var(--tw-text-opacity, 1));
3688
3098
  }
3689
- .data-\[swipe\=move\]\:translate-y-\[var\(--radix-toast-swipe-move-y\)\][data-swipe="move"] {
3690
- --tw-translate-y: var(--radix-toast-swipe-move-y);
3691
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3099
+ @media (min-width: 640px) {
3100
+
3101
+ .sm\:max-w-fit {
3102
+ max-width: -moz-fit-content;
3103
+ max-width: fit-content;
3104
+ }
3105
+
3106
+ .sm\:max-w-sm {
3107
+ max-width: 24rem;
3108
+ }
3109
+
3110
+ .sm\:grid-cols-1 {
3111
+ grid-template-columns: repeat(1, minmax(0, 1fr));
3112
+ }
3113
+
3114
+ .sm\:flex-row {
3115
+ flex-direction: row;
3116
+ }
3117
+
3118
+ .sm\:flex-col {
3119
+ flex-direction: column;
3120
+ }
3121
+
3122
+ .sm\:justify-end {
3123
+ justify-content: flex-end;
3124
+ }
3125
+
3126
+ .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
3127
+ --tw-space-x-reverse: 0;
3128
+ margin-right: calc(0.5rem * var(--tw-space-x-reverse));
3129
+ margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
3130
+ }
3131
+
3132
+ .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
3133
+ --tw-space-y-reverse: 0;
3134
+ margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
3135
+ margin-bottom: calc(0px * var(--tw-space-y-reverse));
3136
+ }
3137
+
3138
+ .sm\:rounded-lg {
3139
+ border-radius: var(--radius);
3140
+ }
3692
3141
  }
3693
- @keyframes accordion-up {
3142
+ @media (min-width: 768px) {
3143
+
3144
+ .md\:\!right-4 {
3145
+ right: 1rem !important;
3146
+ }
3147
+
3148
+ .md\:block {
3149
+ display: block;
3150
+ }
3151
+
3152
+ .md\:w-\[384px\] {
3153
+ width: 384px;
3154
+ }
3155
+
3156
+ .md\:w-\[60vw\] {
3157
+ width: 60vw;
3158
+ }
3159
+
3160
+ .md\:w-\[80\%\] {
3161
+ width: 80%;
3162
+ }
3163
+
3164
+ .md\:w-auto {
3165
+ width: auto;
3166
+ }
3167
+
3168
+ .md\:max-w-min {
3169
+ max-width: -moz-min-content;
3170
+ max-width: min-content;
3171
+ }
3172
+
3173
+ .md\:grid-cols-2 {
3174
+ grid-template-columns: repeat(2, minmax(0, 1fr));
3175
+ }
3694
3176
 
3695
- from {
3696
- height: var(--radix-accordion-content-height);
3177
+ .md\:flex-row {
3178
+ flex-direction: row;
3697
3179
  }
3698
3180
 
3699
- to {
3700
- height: 0;
3181
+ .md\:justify-start {
3182
+ justify-content: flex-start;
3701
3183
  }
3702
- }
3703
- .data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
3704
- animation: accordion-up 0.2s ease-out;
3705
- }
3706
- @keyframes accordion-down {
3707
3184
 
3708
- from {
3709
- height: 0;
3185
+ .md\:gap-8 {
3186
+ gap: 2rem;
3710
3187
  }
3711
3188
 
3712
- to {
3713
- height: var(--radix-accordion-content-height);
3189
+ .md\:p-24 {
3190
+ padding: 6rem;
3191
+ }
3192
+
3193
+ .md\:p-8 {
3194
+ padding: 2rem;
3714
3195
  }
3715
3196
  }
3716
- .data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
3717
- animation: accordion-down 0.2s ease-out;
3718
- }
3719
- .data-\[state\=active\]\:border-b-2[data-state="active"] {
3720
- border-bottom-width: 2px;
3721
- }
3722
- .data-\[state\=inactive\]\:border-transparent[data-state="inactive"] {
3723
- border-color: transparent;
3724
- }
3725
- .data-\[swipe\=move\]\:transition-none[data-swipe="move"] {
3726
- transition-property: none;
3727
- }
3728
- .data-\[state\=closed\]\:duration-300[data-state="closed"] {
3729
- transition-duration: 300ms;
3730
- }
3731
- .data-\[state\=open\]\:duration-300[data-state="open"] {
3732
- transition-duration: 300ms;
3733
- }
3734
- .data-\[state\=open\]\:duration-500[data-state="open"] {
3735
- transition-duration: 500ms;
3736
- }
3737
- .data-\[state\=open\]\:animate-in[data-state="open"] {
3738
- animation-name: enter;
3739
- animation-duration: 150ms;
3740
- --tw-enter-opacity: initial;
3741
- --tw-enter-scale: initial;
3742
- --tw-enter-rotate: initial;
3743
- --tw-enter-translate-x: initial;
3744
- --tw-enter-translate-y: initial;
3745
- }
3746
- .data-\[state\=closed\]\:animate-out[data-state="closed"] {
3747
- animation-name: exit;
3748
- animation-duration: 150ms;
3749
- --tw-exit-opacity: initial;
3750
- --tw-exit-scale: initial;
3751
- --tw-exit-rotate: initial;
3752
- --tw-exit-translate-x: initial;
3753
- --tw-exit-translate-y: initial;
3754
- }
3755
- .data-\[swipe\=end\]\:animate-out[data-swipe="end"] {
3756
- animation-name: exit;
3757
- animation-duration: 150ms;
3758
- --tw-exit-opacity: initial;
3759
- --tw-exit-scale: initial;
3760
- --tw-exit-rotate: initial;
3761
- --tw-exit-translate-x: initial;
3762
- --tw-exit-translate-y: initial;
3763
- }
3764
- .data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
3765
- --tw-exit-opacity: 0;
3766
- }
3767
- .data-\[state\=closed\]\:fade-out-80[data-state="closed"] {
3768
- --tw-exit-opacity: 0.8;
3769
- }
3770
- .data-\[state\=open\]\:fade-in-0[data-state="open"] {
3771
- --tw-enter-opacity: 0;
3772
- }
3773
- .data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
3774
- --tw-exit-scale: .95;
3775
- }
3776
- .data-\[state\=open\]\:zoom-in-95[data-state="open"] {
3777
- --tw-enter-scale: .95;
3778
- }
3779
- .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
3780
- --tw-enter-translate-y: -0.5rem;
3781
- }
3782
- .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
3783
- --tw-enter-translate-x: 0.5rem;
3784
- }
3785
- .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
3786
- --tw-enter-translate-x: -0.5rem;
3787
- }
3788
- .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
3789
- --tw-enter-translate-y: 0.5rem;
3790
- }
3791
- .data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
3792
- --tw-exit-translate-y: 100%;
3197
+ @media (min-width: 1024px) {
3198
+
3199
+ .lg\:\!mt-0 {
3200
+ margin-top: 0px !important;
3201
+ }
3202
+
3203
+ .lg\:mb-1 {
3204
+ margin-bottom: 0.25rem;
3205
+ }
3206
+
3207
+ .lg\:block {
3208
+ display: block;
3209
+ }
3210
+
3211
+ .lg\:flex {
3212
+ display: flex;
3213
+ }
3214
+
3215
+ .lg\:hidden {
3216
+ display: none;
3217
+ }
3218
+
3219
+ .lg\:h-12 {
3220
+ height: 3rem;
3221
+ }
3222
+
3223
+ .lg\:w-3\/4 {
3224
+ width: 75%;
3225
+ }
3226
+
3227
+ .lg\:w-\[180px\] {
3228
+ width: 180px;
3229
+ }
3230
+
3231
+ .lg\:w-\[452px\] {
3232
+ width: 452px;
3233
+ }
3234
+
3235
+ .lg\:w-auto {
3236
+ width: auto;
3237
+ }
3238
+
3239
+ .lg\:w-fit {
3240
+ width: -moz-fit-content;
3241
+ width: fit-content;
3242
+ }
3243
+
3244
+ .lg\:min-w-\[418px\] {
3245
+ min-width: 418px;
3246
+ }
3247
+
3248
+ .lg\:min-w-\[420px\] {
3249
+ min-width: 420px;
3250
+ }
3251
+
3252
+ .lg\:min-w-\[884px\] {
3253
+ min-width: 884px;
3254
+ }
3255
+
3256
+ .lg\:\!max-w-fit {
3257
+ max-width: -moz-fit-content !important;
3258
+ max-width: fit-content !important;
3259
+ }
3260
+
3261
+ .lg\:grid-cols-3 {
3262
+ grid-template-columns: repeat(3, minmax(0, 1fr));
3263
+ }
3264
+
3265
+ .lg\:text-wrap {
3266
+ text-wrap: wrap;
3267
+ }
3268
+
3269
+ .lg\:py-4 {
3270
+ padding-top: 1rem;
3271
+ padding-bottom: 1rem;
3272
+ }
3793
3273
  }
3794
- .data-\[state\=closed\]\:slide-out-to-bottom-\[calc\(100\%\+16px\*2\)\][data-state="closed"] {
3795
- --tw-exit-translate-y: calc(100% + 16px * 2);
3274
+ .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
3275
+ -webkit-appearance: none;
3276
+ appearance: none;
3796
3277
  }
3797
- .data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
3798
- --tw-exit-translate-x: -100%;
3278
+ .\[\&\:has\(\>\.day-range-end\)\]\:rounded-r-md:has(>.day-range-end) {
3279
+ border-top-right-radius: calc(var(--radius) - 2px);
3280
+ border-bottom-right-radius: calc(var(--radius) - 2px);
3799
3281
  }
3800
- .data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
3801
- --tw-exit-translate-x: -50%;
3282
+ .\[\&\:has\(\>\.day-range-start\)\]\:rounded-l-md:has(>.day-range-start) {
3283
+ border-top-left-radius: calc(var(--radius) - 2px);
3284
+ border-bottom-left-radius: calc(var(--radius) - 2px);
3802
3285
  }
3803
- .data-\[state\=closed\]\:slide-out-to-left-\[calc\(100\%\+16px\*2\)\][data-state="closed"] {
3804
- --tw-exit-translate-x: -calc(100% + 16px * 2);
3286
+ .\[\&\:has\(\[aria-selected\]\)\]\:rounded-md:has([aria-selected]) {
3287
+ border-radius: calc(var(--radius) - 2px);
3805
3288
  }
3806
- .data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
3807
- --tw-exit-translate-x: 100%;
3289
+ .first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:has([aria-selected]):first-child {
3290
+ border-top-left-radius: calc(var(--radius) - 2px);
3291
+ border-bottom-left-radius: calc(var(--radius) - 2px);
3808
3292
  }
3809
- .data-\[state\=closed\]\:slide-out-to-right-\[calc\(100\%\+16px\*2\)\][data-state="closed"] {
3810
- --tw-exit-translate-x: calc(100% + 16px * 2);
3293
+ .last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:has([aria-selected]):last-child {
3294
+ border-top-right-radius: calc(var(--radius) - 2px);
3295
+ border-bottom-right-radius: calc(var(--radius) - 2px);
3811
3296
  }
3812
- .data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
3813
- --tw-exit-translate-y: -100%;
3297
+ .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
3298
+ padding-right: 0px;
3814
3299
  }
3815
- .data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
3816
- --tw-exit-translate-y: -48%;
3300
+ .\[\&\>span\]\:line-clamp-1>span {
3301
+ overflow: hidden;
3302
+ display: -webkit-box;
3303
+ -webkit-box-orient: vertical;
3304
+ -webkit-line-clamp: 1;
3817
3305
  }
3818
- .data-\[state\=closed\]\:slide-out-to-top-\[calc\(100\%\+16px\*2\)\][data-state="closed"] {
3819
- --tw-exit-translate-y: -calc(100% + 16px * 2);
3306
+ .\[\&\>tr\]\:last\:border-b-0:last-child>tr {
3307
+ border-bottom-width: 0px;
3820
3308
  }
3821
- .data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
3822
- --tw-enter-translate-y: 100%;
3309
+ .\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
3310
+ --tw-rotate: 180deg;
3311
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3823
3312
  }
3824
- .data-\[state\=open\]\:slide-in-from-bottom-\[calc\(100\%\+16px\*2\)\][data-state="open"] {
3825
- --tw-enter-translate-y: calc(100% + 16px * 2);
3313
+ .\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
3314
+ padding-left: 0.5rem;
3315
+ padding-right: 0.5rem;
3826
3316
  }
3827
- .data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
3828
- --tw-enter-translate-x: -100%;
3317
+ .\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
3318
+ padding-top: 0.375rem;
3319
+ padding-bottom: 0.375rem;
3829
3320
  }
3830
- .data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
3831
- --tw-enter-translate-x: -50%;
3321
+ .\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
3322
+ font-weight: 500;
3832
3323
  }
3833
- .data-\[state\=open\]\:slide-in-from-left-\[calc\(100\%\+16px\*2\)\][data-state="open"] {
3834
- --tw-enter-translate-x: -calc(100% + 16px * 2);
3324
+ .\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
3325
+ padding-top: 0px;
3835
3326
  }
3836
- .data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
3837
- --tw-enter-translate-x: 100%;
3327
+ .\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
3328
+ padding-left: 0.5rem;
3329
+ padding-right: 0.5rem;
3838
3330
  }
3839
- .data-\[state\=open\]\:slide-in-from-right-\[calc\(100\%\+16px\*2\)\][data-state="open"] {
3840
- --tw-enter-translate-x: calc(100% + 16px * 2);
3331
+ .\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
3332
+ height: 1.25rem;
3841
3333
  }
3842
- .data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
3843
- --tw-enter-translate-y: -100%;
3334
+ .\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
3335
+ width: 1.25rem;
3844
3336
  }
3845
- .data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
3846
- --tw-enter-translate-y: -48%;
3337
+ .\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
3338
+ height: 3rem;
3847
3339
  }
3848
- .data-\[state\=open\]\:slide-in-from-top-\[calc\(100\%\+16px\*2\)\][data-state="open"] {
3849
- --tw-enter-translate-y: -calc(100% + 16px * 2);
3340
+ .\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
3341
+ padding-left: 0.5rem;
3342
+ padding-right: 0.5rem;
3850
3343
  }
3851
- .data-\[state\=closed\]\:duration-300[data-state="closed"] {
3852
- animation-duration: 300ms;
3344
+ .\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
3345
+ padding-top: 0.75rem;
3346
+ padding-bottom: 0.75rem;
3853
3347
  }
3854
- .data-\[state\=open\]\:duration-300[data-state="open"] {
3855
- animation-duration: 300ms;
3348
+ .\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
3349
+ height: 1.25rem;
3856
3350
  }
3857
- .data-\[state\=open\]\:duration-500[data-state="open"] {
3858
- animation-duration: 500ms;
3351
+ .\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
3352
+ width: 1.25rem;
3859
3353
  }
3860
- .data-\[highlighted\]\:hover\:bg-\[hsl\(var\(--color-bg-default-hover\)\)\]:hover[data-highlighted] {
3861
- background-color: hsl(var(--color-bg-default-hover));
3354
+ .\[\&_p\]\:leading-relaxed p {
3355
+ line-height: 1.625;
3862
3356
  }
3863
- .data-\[highlighted\]\:hover\:\!outline-0:hover[data-highlighted] {
3864
- outline-width: 0px !important;
3357
+ .\[\&_svg\]\:invisible svg {
3358
+ visibility: hidden;
3865
3359
  }
3866
- .data-\[highlighted\]\:hover\:outline-0:hover[data-highlighted] {
3867
- outline-width: 0px;
3360
+ .\[\&_tr\:last-child\]\:border-0 tr:last-child {
3361
+ border-width: 0px;
3868
3362
  }
3869
- .data-\[highlighted\]\:hover\:\!outline-transparent:hover[data-highlighted] {
3870
- outline-color: transparent !important;
3363
+ .\[\&_tr\]\:border-b tr {
3364
+ border-bottom-width: 1px;
3871
3365
  }
3872
- .data-\[highlighted\]\:focus-visible\:outline:focus-visible[data-highlighted] {
3873
- outline-style: solid;
3366
+ :root {
3367
+ --focused: 260, 100%, 52%, 1; /* Blue-700 */
3368
+ --radius: 0.5rem;
3369
+
3370
+ /* Button */
3371
+ --color-button-default: 0, 0%, 0%, 1; /* Black */
3372
+ --color-button-default-hover: 207, 8%, 23%, 1; /* Gray-950 */
3373
+ --color-button-secondary: 0, 0%, 100%, 1; /* White */
3374
+ --color-button-secondary-hover: 200, 13%, 95%, 1; /* Gray-100 */
3375
+ --color-button-disabled: 195, 10%, 92%, 1; /* Gray-200 */
3376
+ --color-button-danger: 354, 96%, 59%, 1; /* Red-500 */
3377
+ --color-button-danger-hover: 354, 84%, 42%, 1; /* Red-700 */
3378
+ --color-button-floating: 0, 0%, 100%, 1; /* White */
3379
+ --color-button-floating-hover: 200, 13%, 95%, 1; /* Gray-100 */
3380
+
3381
+ /* Text */
3382
+ --color-text-default: 207, 8%, 23%, 1; /* Gray-950 */
3383
+ --color-text-secondary: 208, 8%, 50%, 1; /* Gray-700 */
3384
+ --color-text-disabled: 206, 9%, 66%, 1; /* Gray-500 */
3385
+ --color-text-danger: 354, 96%, 59%, 1; /* Red-500 */
3386
+ --color-text-success: 127, 69%, 29%, 1; /* Green-700 */
3387
+ --color-text-inverse: 0, 0%, 100%, 1; /* White */
3388
+ --color-text-link: 260, 100%, 52%, 1; /* Blue-700 */
3389
+ --color-text-on-brand: 207, 8%, 23%, 1; /* Gray-950 */
3390
+
3391
+ /* Background */
3392
+ --color-bg-default: 0, 0%, 100%, 1; /* White */
3393
+ --color-bg-default-hover: 200, 13%, 95%, 1; /* Gray-100 */
3394
+ --color-bg-default-active: 52, 100%, 52%, 1; /* Yellow-400 */
3395
+ --color-bg-default-selected: 210, 17%, 98%, 1; /* Gray-50 */
3396
+ --color-bg-secondary: 210, 17%, 98%, 1; /* Gray-50 */
3397
+ --color-bg-secondary-hover: 195, 10%, 92%, 1; /* Gray-200 */
3398
+ --color-bg-disabled: 195, 10%, 92%, 1; /* Gray-200 */
3399
+ --color-bg-brand: 52, 100%, 52%, 1; /* Yellow-400 */
3400
+ --color-bg-brand-hover: 50, 98%, 47%, 1; /* Yellow-500 */
3401
+ --color-bg-brand-light: 53, 100%, 90%, 1; /* Yellow-100 */
3402
+ --color-bg-danger: 354, 96%, 59%, 1; /* Red-500 */
3403
+ --color-bg-danger-light: 354, 100%, 94%, 1; /* Red-100 */
3404
+ --color-bg-default-inverse: 0, 0%, 0%, 1; /* Black */
3405
+ --color-bg-tertiary: 195, 10%, 92%, 1; /* Tertiary */
3406
+ --color-bg-success: 126, 73%, 39%, 1;
3407
+ --color-bg-success-light: 124, 79%, 93%, 1; /* Green-100 */
3408
+ --color-bg-info-light: 248, 100%, 97%, 1;
3409
+
3410
+ /* Border */
3411
+ --color-border-default: 195, 10%, 92%, 1; /* Gray-200 */
3412
+ --color-border-hover: 203, 10%, 76%, 1;
3413
+ --color-border-light: 0, 0%, 100%, 1; /* White */
3414
+ --color-border-active: 0, 0%, 0%, 1; /* Black */
3415
+ --color-border-focused: 260, 100%, 52%, 1; /* Blue-700 */
3416
+ --color-border-warning: 18, 88%, 55%, 1; /* Red-500 */
3417
+ --color-border-danger: 354, 96%, 59%, 1; /* Red-500 */
3418
+ --color-border-success: 127, 69%, 29%, 1;
3419
+ --color-border-info: 260, 100%, 52%, 1;
3420
+ --color-border-disabled: 206, 9%, 66%, 1; /* Gray-500 */
3421
+
3422
+ /* Icon */
3423
+ --color-icon-default: 0, 0%, 100%, 1; /* White */
3424
+ --color-icon-default-hover: 207, 8%, 23%, 1; /* Gray-950 */
3425
+ --color-icon-brand: 52, 100%, 52%, 1; /* Yellow-400 */
3426
+ --color-icon-secondary: 208, 8%, 50%, 1; /* Gray-700 */
3427
+ --color-icon-disabled: 206, 9%, 66%, 1; /* Gray-500 */
3428
+ --color-icon-inverse: 0, 0%, 100%, 1; /* White */
3429
+ --color-icon-danger: 354, 96%, 59%, 1; /* Red-500 */
3430
+ --color-icon-warning: 18, 88%, 55%, 1;
3431
+ --color-icon-info: 260, 100%, 52%, 1;
3432
+ --color-icon-success: 127, 69%, 29%, 1; /* Green-700 */
3433
+ --color-icon-on-brand: 207, 8%, 23%, 1; /* Gray-900 */
3434
+
3435
+ /* Tooltip */
3436
+ --color-bg-tooltip: 0, 0%, 0%, 1; /* Black */
3437
+ --color-text-tooltip: 0, 0%, 100%, 1; /* White */
3438
+
3439
+ /* Inline Comment */
3440
+ --color-inline-comment: 124, 79%, 93%, 1; /* #DDFBDF */
3441
+ --color-inline-comment-active: 126, 74%, 73%, 1; /* #88ED92 */
3442
+
3443
+ /* Utility */
3444
+ --color-bg-transparent: 0, 0%, 0%, 0.04; /* Black 4% */
3445
+ --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
3446
+
3447
+ /* Elevation */
3448
+ --shadow-elevation-1: 0px 1px 2px rgba (0,  0,  0,  0.15);
3449
+ --shadow-elevation-2: 0px 2px 4px rgba (0,  0,  0,  0.15);
3450
+ --shadow-elevation-3: 0px 4px 16px rgba (0,  0,  0,  0.15);
3451
+ --shadow-elevation-4: 0px 8px 32px rgba (0,  0,  0,  0.15);
3452
+ }
3453
+
3454
+ .dark {
3455
+ /* Button */
3456
+ --color-button-default: 0, 0%, 31%, 1; /* Gray-700 */
3457
+ --color-button-default-hover: 0, 0%, 36%, 1; /* Gray-600 */
3458
+ --color-button-secondary: 0, 0%, 12%, 1; /* Gray-950 */
3459
+ --color-button-secondary-hover: 0, 0%, 25%, 1; /* Gray-800 */
3460
+ --color-button-disabled: 0, 0%, 25%, 1; /* Gray-800 */
3461
+ --color-button-danger: 354, 96%, 59%, 1; /* Red-500 */
3462
+ --color-button-danger-hover: 354, 84%, 42%, 1; /* Red-700 */
3463
+ --color-button-floating: 0, 0%, 31%, 1; /* Gray-700 */
3464
+ --color-button-floating-hover: 0, 0%, 25%, 1; /* Gray-800 */
3465
+
3466
+ /* Text */
3467
+ --color-text-default: 0, 0%, 91%, 1; /* Gray-100 */
3468
+ --color-text-secondary: 0, 0%, 53%, 1; /* Gray-400 */
3469
+ --color-text-disabled: 0, 0%, 43%, 1; /* Gray-500 */
3470
+ --color-text-danger: 354, 100%, 70%, 1; /* Red-400 */
3471
+ --color-text-success: 126, 67%, 45%, 1; /* Green-500 */
3472
+ --color-text-inverse: 0, 0%, 91%, 1; /* Gray-100 */
3473
+ --color-text-link: 251, 100%, 83%, 1; /* Blue-700 */
3474
+ --color-text-on-brand: 0, 0%, 18%, 1; /* Gray-950 */
3475
+
3476
+ /* Background */
3477
+ --color-bg-default: 0, 0%, 18%, 1; /* Gray-900 */
3478
+ --color-bg-default-hover: 0, 0%, 25%, 1; /* Gray-800 */
3479
+ --color-bg-default-active: 50, 74%, 54%, 1; /* Yellow-400 */
3480
+ --color-bg-default-selected: 0, 0%, 25%, 1; /* Gray-800 */
3481
+ --color-bg-secondary: 0, 0%, 12%, 1; /* Gray-950 */
3482
+ --color-bg-secondary-hover: 0, 0%, 18%, 1; /* Gray-900 */
3483
+ --color-bg-disabled: 0, 0%, 53%, 1; /* Gray-400 */
3484
+ --color-bg-brand: 50, 74%, 54%, 1; /* Yellow-400 */
3485
+ --color-bg-brand-hover: 50, 60%, 45%, 1; /* Yellow-500 */
3486
+ --color-bg-brand-light: 57, 92%, 76%, 1; /* Yellow-100 */
3487
+ --color-bg-danger: 354, 84%, 42%, 1; /* Red-200 */
3488
+ --color-bg-danger-light: 356, 100%, 97%, 1; /* Red-50 */
3489
+ --color-bg-default-inverse: 0, 0%, 0%, 1; /* White */
3490
+ --color-bg-tertiary: 0, 0%, 25%, 1; /* Gray-800 */
3491
+ --color-bg-success: 128, 59%, 20%, 1;
3492
+ --color-bg-success-light: 128, 59%, 20%, 1; /* Green-900 */
3493
+ --color-bg-info-light: 254, 100%, 73%, 0.16;
3494
+
3495
+ /* Border */
3496
+ --color-border-default: 0, 0%, 25%, 1; /* Gray-800 */
3497
+ --color-border-hover: 0, 0%, 36%, 1; /* Gray-600 */
3498
+ --color-border-light: 0, 0%, 100%, 1; /* White */
3499
+ --color-border-active: 0, 0%, 91%, 1; /* Gray-200 */
3500
+ --color-border-focused: 254, 100%, 73%, 1; /* Blue-400 */
3501
+ --color-border-danger: 354, 100%, 70%, 1; /* Red-400 */
3502
+ --color-border-warning: 22, 89%, 62%, 1; /* Red-500 */
3503
+ --color-border-success: 126, 74%, 73%, 1;
3504
+ --color-border-info: 254, 100%, 73%, 1;
3505
+ --color-border-disabled: 0, 0%, 53%, 1; /* Gray-400 */
3506
+
3507
+ /* Icon */
3508
+ --color-icon-default: 0, 0%, 100%, 1; /* White */
3509
+ --color-icon-default-hover: 0, 0%, 12%, 1; /* Gray-900 */
3510
+ --color-icon-brand: 50, 74%, 54%, 1; /* Yellow-400 */
3511
+ --color-icon-secondary: 0, 0%, 53%, 1; /* Gray-400 */
3512
+ --color-icon-disabled: 0, 0%, 25%, 1; /* Gray-800 */
3513
+ --color-icon-inverse: 207, 8%, 23%, 1; /* Gray-100 */
3514
+ --color-icon-danger: 354, 100%, 70%, 1;
3515
+ --color-icon-warning: 22, 89%, 62%, 1;
3516
+ --color-icon-info: 254, 100%, 73%, 1;
3517
+ --color-icon-success: 126, 74%, 73%, 1;
3518
+ --color-icon-on-brand: 0, 0%, 18%, 1; /* Gray-950 */
3519
+
3520
+ /* Tooltip */
3521
+ --color-bg-tooltip: 0, 0%, 100%, 1; /* White */
3522
+ --color-text-tooltip: 0, 0%, 0%, 1; /* Black */
3523
+
3524
+ /* Inline Comment */
3525
+ --color-inline-comment: 128, 59%, 20%, 1; /* #15521D */
3526
+ --color-inline-comment-active: 127, 69%, 29%, 1; /* #177E23 */
3527
+
3528
+ /* Utility */
3529
+ --color-bg-transparent: 0, 0%, 100%, 0.04; /* White 4% */
3530
+ --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
3531
+ }
3532
+
3533
+ .theme-sepia {
3534
+ /* Button */
3535
+ --color-button-default: 28, 16%, 21%, 1; /* #3E352D */
3536
+ --color-button-default-hover: 29, 16%, 26%, 1; /* #4D4238 */
3537
+ --color-button-secondary: 41, 61%, 84%, 1; /* #EFDFBD */
3538
+ --color-button-secondary-hover: 28, 16%, 21%, 0.06; /* #3E352D 6% */
3539
+ --color-button-disabled: 28, 16%, 21%, 0.04; /* #3E352D 4% */
3540
+ --color-button-danger: 0, 71%, 38%, 1; /* #A61C1C */
3541
+ --color-button-danger-hover: 0, 71%, 42%, 1; /* #B71F1F */
3542
+ --color-button-floating: 41, 61%, 84%, 1; /* #EFDFBD */
3543
+ --color-button-floating-hover: 28, 16%, 21%, 0.06; /* #3E352D 6% */
3544
+
3545
+ /* Text */
3546
+ --color-text-default: 28, 16%, 21%, 1; /* #3E352D */
3547
+ --color-text-secondary: 31, 17%, 42%, 1; /* #7D6B58 */
3548
+ --color-text-disabled: 31, 29%, 64%, 1; /* #BEA489 */
3549
+ --color-text-danger: 0, 71%, 38%, 1; /* #A61C1C */
3550
+ --color-text-success: 77, 23%, 35%, 1; /* #616C44 */
3551
+ --color-text-inverse: 41, 61%, 84%, 1; /* #EFDFBD */
3552
+ --color-text-link: 199, 100%, 29%, 1; /* #006494 */
3553
+ --color-text-on-brand: 28, 16%, 21%, 1; /* #3E352D */
3554
+
3555
+ /* Background */
3556
+ --color-bg-default: 41, 61%, 84%, 1; /* #EFDFBD */
3557
+ --color-bg-default-hover: 28, 16%, 21%, 0.08; /* #3E352D 8% */
3558
+ --color-bg-default-active: 46, 88%, 56%, 1; /* #F2C42D */
3559
+ --color-bg-default-selected: 28, 16%, 21%, 0.1; /* #3E352D 10% */
3560
+ --color-bg-secondary: 41, 61%, 80%, 1; /* #EBD7AD */
3561
+ --color-bg-secondary-hover: 28, 16%, 21%, 0.12; /* #3E352D 12% */
3562
+ --color-bg-disabled: 28, 16%, 21%, 0.04; /* #3E352D 4% */
3563
+ --color-bg-brand: 46, 88%, 56%, 1; /* #F2C42D */
3564
+ --color-bg-brand-hover: 40, 84%, 50%, 1; /* #EBA515 */
3565
+ --color-bg-brand-light: 47, 87%, 88%, 1; /* #FBEFC5 */
3566
+ --color-bg-danger: 0, 71%, 38%, 1; /* #A61C1C */
3567
+ --color-bg-danger-light: 0, 71%, 42%, 0.06; /* #B71F1F 6% */
3568
+ --color-bg-default-inverse: 28, 16%, 21%, 1; /* #3E352D */
3569
+ --color-bg-tertiary: 44, 32%, 86%, 1; /* #E7E1D0 */
3570
+ --color-bg-success: 77, 23%, 35%, 1; /* #616C44 */
3571
+ --color-bg-success-light: 76, 23%, 64%, 1; /* #ADB88E */
3572
+ --color-bg-info-light: 199, 45%, 87%, 1;
3573
+
3574
+ /* Border */
3575
+ --color-border-default: 41, 49%, 76%, 1; /* #E0CDA4 */
3576
+ --color-border-hover: 41, 50%, 68%, 1; /* #D6BC85 */
3577
+ --color-border-light: 41, 61%, 84%, 1; /* #EFDFBD */
3578
+ --color-border-active: 28, 16%, 21%, 1; /* #3E352D */
3579
+ --color-border-focused: 199, 100%, 29%, 1; /* #006494 */
3580
+ --color-border-danger: 0, 71%, 38%, 1; /* #A61C1C */
3581
+ --color-border-warning: 12, 85%, 60%, 1; /* #F06543 */
3582
+ --color-border-success: 77, 23%, 35%, 1; /* #616C44 */
3583
+ --color-border-info: 199, 100%, 29%, 1; /* #006494 */
3584
+ --color-border-disabled: 31, 29%, 64%, 1; /* #BEA489 */
3585
+
3586
+ /* Icon */
3587
+ --color-icon-default: 28, 16%, 21%, 1; /* #3E352D */
3588
+ --color-icon-default-hover: 29, 16%, 26%, 1; /* #4D4238 */
3589
+ --color-icon-brand: 46, 88%, 56%, 1; /* #F2C42D */
3590
+ --color-icon-secondary: 31, 17%, 42%, 1; /* #7D6B58 */
3591
+ --color-icon-disabled: 31, 29%, 64%, 1; /* #BEA489 */
3592
+ --color-icon-inverse: 41, 61%, 84%, 1; /* #EFDFBD */
3593
+ --color-icon-danger: 0, 71%, 38%, 1; /* #A61C1C */
3594
+ --color-icon-warning: 12, 85%, 60%, 1; /* #F06543 */
3595
+ --color-icon-info: 199, 100%, 29%, 1; /* #006494 */
3596
+ --color-icon-success: 77, 23%, 35%, 1; /* #616C44 */
3597
+ --color-icon-on-brand: 28, 16%, 21%, 1; /* #3E352D */
3598
+
3599
+ /* Tooltip */
3600
+ --color-bg-tooltip: 28, 16%, 21%, 1; /* #3E352D */
3601
+ --color-text-tooltip: 41, 61%, 84%, 1; /* #EFDFBD */
3602
+
3603
+ /* Inline Comment */
3604
+ --color-inline-comment: 76, 23%, 72%, 1; /* #BFC8A7 */
3605
+ --color-inline-comment-active: 75, 23%, 62%, 1; /* #A9B488 */
3606
+
3607
+ /* Utility */
3608
+ --color-bg-transparent: 28, 16%, 21%, 0.04; /* #3E352D 4% */
3609
+ --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
3610
+ }
3611
+
3612
+ .theme-pink {
3613
+ /* Button */
3614
+ --color-button-default: 349, 25%, 13%, 1; /* #2A191C */
3615
+ --color-button-default-hover: 349, 25%, 22%, 1; /* #462A2F */
3616
+ --color-button-secondary: 346, 100%, 95%, 1; /* #FFE6EC */
3617
+ --color-button-secondary-hover: 24, 16%, 21%, 0.06; /* #3E352D 6% */
3618
+ --color-button-disabled: 24, 16%, 21%, 0.04; /* #3E352D 4% */
3619
+ --color-button-danger: 2, 79%, 56%, 1; /* #E73D36 */
3620
+ --color-button-danger-hover: 2, 79%, 48%, 1; /* #DB221A */
3621
+ --color-button-floating: 346, 100%, 95%, 1; /* #FFE6EC */
3622
+ --color-button-floating-hover: 24, 16%, 21%, 0.06; /* #3E352D 6% */
3623
+
3624
+ /* Text */
3625
+ --color-text-default: 3, 88%, 26%, 1; /* #7C0E08 */
3626
+ --color-text-secondary: 3, 39%, 59%, 1; /* #C0736F */
3627
+ --color-text-disabled: 3, 43%, 76%, 1; /* #DCABA8 */
3628
+ --color-text-danger: 2, 79%, 56%, 1; /* #E73D36 */
3629
+ --color-text-success: 139, 35%, 42%, 1; /* #46905E */
3630
+ --color-text-inverse: 346, 100%, 95%, 1; /* #FFE6EC */
3631
+ --color-text-link: 209, 89%, 39%, 1; /* #0B67BD */
3632
+ --color-text-on-brand: 3, 88%, 26%, 1; /* #7C0E08 */
3633
+
3634
+ /* Background */
3635
+ --color-bg-default: 346, 100%, 95%, 1; /* #FFE6EC */
3636
+ --color-bg-default-hover: 3, 88%, 26%, 0.08; /* #7C0E08 8% */
3637
+ --color-bg-default-active: 45, 100%, 65%, 1; /* #FFD24D */
3638
+ --color-bg-default-selected: 3, 88%, 26%, 0.06; /* #7C0E08 6% */
3639
+ --color-bg-secondary: 346, 100%, 92%, 1; /* #FFD6E0 */
3640
+ --color-bg-secondary-hover: 3, 88%, 26%, 0.12; /* #7C0E08 12% */
3641
+ --color-bg-disabled: 24, 16%, 21%, 0.04; /* #3E352D 4% */
3642
+ --color-bg-brand: 45, 100%, 65%, 1; /* #FFD24D */
3643
+ --color-bg-brand-hover: 45, 100%, 56%, 1; /* #FFC61F */
3644
+ --color-bg-brand-light: 45, 100%, 90%, 1; /* #FFF2CC */
3645
+ --color-bg-danger: 2, 79%, 56%, 1; /* #E73D36 */
3646
+ --color-bg-danger-light: 2, 79%, 56%, 0.14; /* #E73D36 14% */
3647
+ --color-bg-default-inverse: 3, 88%, 26%, 1;
3648
+ --color-bg-tertiary: 3, 88%, 26%, 0.12; /* #7C0E08 12% */
3649
+ --color-bg-success: 139, 35%, 42%, 1; /* #46905E */
3650
+ --color-bg-success-light: 140, 34%, 88%, 1; /* #D6EBDD */
3651
+ --color-bg-info-light: 209, 89%, 88%, 1;
3652
+
3653
+ /* Border */
3654
+ --color-border-default: 346, 100%, 90%, 1; /* #FFCCD8 */
3655
+ --color-border-hover: 346, 100%, 86%, 1; /* #FFB8C9 */
3656
+ --color-border-light: 348, 100%, 96%, 1; /* #FFEBEF */
3657
+ --color-border-active: 3, 88%, 26%, 1; /* #7C0E08 */
3658
+ --color-border-focused: 209, 89%, 39%, 1; /* #0B67BD */
3659
+ --color-border-danger: 2, 79%, 56%, 1; /* #E73D36 */
3660
+ --color-border-warning: 19, 83%, 53%, 1; /* #EB6424 */
3661
+ --color-border-success: 139, 35%, 42%, 1; /* #46905E */
3662
+ --color-border-info: 209, 89%, 39%, 1; /* #0B67BD */
3663
+ --color-border-disabled: 3, 43%, 76%, 1; /* #DCABA8 */
3664
+
3665
+ /* Icon */
3666
+ --color-icon-default: 3, 88%, 26%, 1; /* #7C0E08 */
3667
+ --color-icon-default-hover: 3, 88%, 32%, 1; /* #99110A */
3668
+ --color-icon-brand: 45, 100%, 65%, 1; /* #FFD24D */
3669
+ --color-icon-secondary: 3, 39%, 59%, 1; /* #C0736F */
3670
+ --color-icon-disabled: 3, 43%, 76%, 1; /* #DCABA8 */
3671
+ --color-icon-inverse: 346, 100%, 95%, 1; /* #FFE6EC */
3672
+ --color-icon-danger: 2, 79%, 56%, 1; /* #E73D36 */
3673
+ --color-icon-warning: 19, 83%, 53%, 1; /* #EB6424 */
3674
+ --color-icon-info: 209, 89%, 39%, 1; /* #0B67BD */
3675
+ --color-icon-success: 140, 35%, 45%, 1; /* #4B9B65 */
3676
+ --color-icon-on-brand: 3, 88%, 26%, 1; /* #7C0E08 */
3677
+
3678
+ /* Tooltip */
3679
+ --color-bg-tooltip: 3, 88%, 26%, 1; /* #7C0E08 */
3680
+ --color-text-tooltip: 346, 100%, 95%, 1; /* #FFE6EC */
3681
+
3682
+ /* Inline Comment */
3683
+ --color-inline-comment: 139, 35%, 86%, 1; /* #CFE8D7 */
3684
+ --color-inline-comment-active: 139, 36%, 78%, 1; /* #B3DBC0 */
3685
+
3686
+ /* Utility */
3687
+ --color-bg-transparent: 3, 88%, 26%, 0.04; /* #7C0E08 4% */
3688
+ --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
3689
+ }
3690
+
3691
+ .theme-green {
3692
+ /* Button */
3693
+ --color-button-default: 63, 15%, 74%, 1; /* #C6C7B3 */
3694
+ --color-button-default-hover: 65, 14%, 82%, 1; /* #D7D8CA */
3695
+ --color-button-secondary: 120, 9%, 24%, 1; /* #384338 */
3696
+ --color-button-secondary-hover: 63, 15%, 74%, 0.06; /* #C6C7B3 6% */
3697
+ --color-button-disabled: 63, 15%, 74%, 0.04; /* #C6C7B3 4% */
3698
+ --color-button-danger: 2, 99%, 68%, 1; /* #FE625D */
3699
+ --color-button-danger-hover: 2, 99%, 72%, 1; /* #FE7571 */
3700
+ --color-button-floating: 120, 9%, 24%, 1; /* #384338 */
3701
+ --color-button-floating-hover: 63, 15%, 74%, 0.06; /* #C6C7B3 6% */
3702
+
3703
+ /* Text */
3704
+ --color-text-default: 63, 27%, 83%, 1; /* #DFE0C9 */
3705
+ --color-text-secondary: 84, 5%, 56%, 1; /* #909688 */
3706
+ --color-text-disabled: 104, 7%, 42%, 1; /* #687364 */
3707
+ --color-text-danger: 2, 99%, 68%, 1; /* #FE625D */
3708
+ --color-text-success: 120, 46%, 55%, 1; /* #59C259 */
3709
+ --color-text-inverse: 120, 6%, 16%, 1; /* #262B26 */
3710
+ --color-text-link: 197, 78%, 64%, 1; /* #5BC3EB */
3711
+ --color-text-on-brand: 120, 6%, 16%, 1; /* #262B26 */
3712
+
3713
+ /* Background */
3714
+ --color-bg-default: 120, 9%, 24%, 1; /* #384338 */
3715
+ --color-bg-default-hover: 63, 15%, 74%, 0.06; /* #C6C7B3 6% */
3716
+ --color-bg-default-active: 45, 100%, 65%, 1; /* #FFD24D */
3717
+ --color-bg-default-selected: 63, 15%, 74%, 0.04; /* #C6C7B3 4% */
3718
+ --color-bg-secondary: 120, 6%, 16%, 1; /* #262B26 */
3719
+ --color-bg-secondary-hover: 63, 15%, 74%, 0.08; /* #C6C7B3 8% */
3720
+ --color-bg-disabled: 63, 15%, 74%, 0.04; /* #C6C7B3 4% */
3721
+ --color-bg-brand: 46, 88%, 56%, 1; /* #F2C42D */
3722
+ --color-bg-brand-hover: 40, 84%, 50%, 1; /* #EBA515 */
3723
+ --color-bg-brand-light: 50, 89%, 89%, 1; /* #FCF4C9 */
3724
+ --color-bg-danger: 2, 99%, 68%, 1; /* #FE625D */
3725
+ --color-bg-danger-light: 2, 99%, 68%, 0.12; /* #FE625D 12% */
3726
+ --color-bg-default-inverse: 120, 9%, 76%, 1; /* #BCC7BC */
3727
+ --color-bg-tertiary: 63, 15%, 74%, 0.12; /* #C6C7B3 12% */
3728
+ --color-bg-success: 120, 46%, 55%, 1; /* #59C259 */
3729
+ --color-bg-success-light: 120, 46%, 55%, 0.16; /* #59C259 16% */
3730
+ --color-bg-info-light: 197, 78%, 64%, 0.16;
3731
+
3732
+ /* Border */
3733
+ --color-border-default: 120, 8%, 30%, 1; /* #465346 */
3734
+ --color-border-hover: 120, 8%, 36%, 1; /* #546354 */
3735
+ --color-border-light: 120, 8%, 44%, 1; /* #677A67 */
3736
+ --color-border-active: 62, 27%, 83%, 1; /* #DFE0C9 */
3737
+ --color-border-focused: 197, 78%, 64%, 1; /* #5BC3EB */
3738
+ --color-border-danger: 2, 99%, 68%, 1; /* #FE625D */
3739
+ --color-border-warning: 10, 85%, 61%, 1; /* #F06449 */
3740
+ --color-border-success: 120, 46%, 55%, 1; /* #59C259 */
3741
+ --color-border-info: 197, 78%, 64%, 1; /* #5BC3EB */
3742
+ --color-border-disabled: 104, 7%, 42%, 1; /* #687364 */
3743
+
3744
+ /* Icon */
3745
+ --color-icon-default: 62, 27%, 83%, 1; /* #DFE0C9 */
3746
+ --color-icon-default-hover: 65, 14%, 82%, 1; /* #D7D8CA */
3747
+ --color-icon-brand: 46, 88%, 56%, 1; /* #F2C42D */
3748
+ --color-icon-secondary: 84, 5%, 56%, 1; /* #909688 */
3749
+ --color-icon-disabled: 104, 7%, 42%, 1; /* #687364 */
3750
+ --color-icon-inverse: 120, 6%, 16%, 1; /* #262B26 */
3751
+ --color-icon-danger: 2, 79%, 56%, 1; /* #E73D36 */
3752
+ --color-icon-warning: 10, 85%, 61%, 1; /* #F06449 */
3753
+ --color-icon-info: 197, 78%, 64%, 1; /* #5BC3EB */
3754
+ --color-icon-success: 120, 46%, 55%, 1; /* #59C259 */
3755
+ --color-icon-on-brand: 120, 6%, 16%, 1; /* #262B26 */
3756
+
3757
+ /* Tooltip */
3758
+ --color-bg-tooltip: 120, 9%, 76%, 1; /* #BCC7BC */
3759
+ --color-text-tooltip: 120, 9%, 24%, 1; /* #384338 */
3760
+
3761
+ /* Inline Comment */
3762
+ --color-inline-comment: 120, 47%, 20%, 1; /* #1B4B1B */
3763
+ --color-inline-comment-active: 120, 47%, 28%, 1; /* #266826 */
3764
+
3765
+ /* Utility */
3766
+ --color-bg-transparent: 63, 15%, 74%, 0.04; /* #C6C7B3 4% */
3767
+ --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
3768
+ }
3769
+
3770
+ * {
3771
+ border-color: hsl(var(--color-border-default));
3772
+ -webkit-font-smoothing: antialiased;
3773
+ -moz-osx-font-smoothing: grayscale;
3774
+ text-rendering: optimizeLegibility;
3874
3775
  }
3875
- .data-\[highlighted\]\:focus-visible\:outline-2:focus-visible[data-highlighted] {
3876
- outline-width: 2px;
3776
+
3777
+ body {
3778
+ background-color: hsl(var(--color-bg-default));
3779
+ color: hsl(var(--color-text-default));
3877
3780
  }
3878
- .data-\[highlighted\]\:focus-visible\:outline-\[hsl\(var\(--color-border-focused\)\)\]:focus-visible[data-highlighted] {
3879
- outline-color: hsl(var(--color-border-focused));
3781
+
3782
+ /** COLORS **/
3783
+
3784
+ /* ELEVATIONS */
3785
+
3786
+ /* DIVIDERS */
3787
+
3788
+ #selected-value > div > div > p {
3789
+ display: none;
3880
3790
  }
3881
- .dark\:\!text-\[\#363B3F\]:is(.dark *) {
3882
- --tw-text-opacity: 1 !important;
3883
- color: rgb(54 59 63 / var(--tw-text-opacity, 1)) !important;
3791
+
3792
+ #storybook-root {
3793
+ padding: 0 !important;
3884
3794
  }
3885
- .dark\:text-\[\#363B3F\]:is(.dark *) {
3886
- --tw-text-opacity: 1;
3887
- color: rgb(54 59 63 / var(--tw-text-opacity, 1));
3795
+
3796
+ input:is(:-webkit-autofill, :-webkit-autofill), textarea:is(:-webkit-autofill, :-webkit-autofill) {
3797
+ -webkit-transition:
3798
+ background-color 0s 600000s,
3799
+ color 0s 600000s !important;
3800
+ transition:
3801
+ background-color 0s 600000s,
3802
+ color 0s 600000s !important;
3888
3803
  }
3889
- @media (min-width: 640px) {
3890
3804
 
3891
- .sm\:max-w-fit {
3892
- max-width: -moz-fit-content;
3893
- max-width: fit-content;
3894
- }
3805
+ input:is(:-webkit-autofill, :autofill),
3806
+ textarea:is(:-webkit-autofill, :autofill) {
3807
+ -webkit-transition:
3808
+ background-color 0s 600000s,
3809
+ color 0s 600000s !important;
3810
+ transition:
3811
+ background-color 0s 600000s,
3812
+ color 0s 600000s !important;
3813
+ }
3895
3814
 
3896
- .sm\:max-w-sm {
3897
- max-width: 24rem;
3898
- }
3815
+ .epr-emoji-category-label {
3816
+ font-family: system-ui !important;
3817
+ font-size: 14px !important;
3818
+ font-style: normal !important;
3819
+ font-weight: 500 !important;
3820
+ line-height: 20px !important;
3821
+ }
3899
3822
 
3900
- .sm\:grid-cols-1 {
3901
- grid-template-columns: repeat(1, minmax(0, 1fr));
3902
- }
3823
+ .epr-search-container > input {
3824
+ display: flex;
3825
+ height: 2.25rem; /* h-9 */
3826
+ width: 100%; /* w-full */
3827
+ border-radius: 4px; /* rounded-md */
3828
+ border: 1px solid hsl(214.3, 31.8%, 91.4%); /* border border-input */
3829
+ background-color: transparent !important; /* bg-transparent */
3830
+ font-size: 14px; /* text-sm */
3831
+ transition: colors 0.15s ease-in-out;
3832
+ color: #000;
3833
+ font-family: system-ui, "Roboto";
3834
+ }
3903
3835
 
3904
- .sm\:flex-row {
3905
- flex-direction: row;
3906
- }
3836
+ /* For hover state */
3907
3837
 
3908
- .sm\:flex-col {
3909
- flex-direction: column;
3910
- }
3838
+ .epr-search-container > input:hover {
3839
+ border-color: #000; /* hover:border-border-hover */
3840
+ }
3911
3841
 
3912
- .sm\:justify-end {
3913
- justify-content: flex-end;
3914
- }
3842
+ /* For focus-visible state */
3915
3843
 
3916
- .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
3917
- --tw-space-x-reverse: 0;
3918
- margin-right: calc(0.5rem * var(--tw-space-x-reverse));
3919
- margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
3920
- }
3844
+ .epr-search-container > input:focus-visible {
3845
+ outline: none; /* focus-visible:outline-none */
3846
+ border-color: #000; /* focus-visible:border-border-hover */
3847
+ }
3921
3848
 
3922
- .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
3923
- --tw-space-y-reverse: 0;
3924
- margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
3925
- margin-bottom: calc(0px * var(--tw-space-y-reverse));
3926
- }
3849
+ /* For placeholder text */
3927
3850
 
3928
- .sm\:rounded-lg {
3929
- border-radius: var(--radius);
3930
- }
3851
+ .epr-search-container > input::-moz-placeholder {
3852
+ color: hsl(var(--color-text-disabled));
3853
+ font-family: system-ui, "Roboto";
3854
+ font-size: 14px;
3931
3855
  }
3932
- @media (min-width: 768px) {
3933
3856
 
3934
- .md\:\!right-4 {
3935
- right: 1rem !important;
3936
- }
3857
+ .epr-search-container > input::placeholder {
3858
+ color: hsl(var(--color-text-disabled));
3859
+ font-family: system-ui, "Roboto";
3860
+ font-size: 14px;
3861
+ }
3937
3862
 
3938
- .md\:block {
3939
- display: block;
3940
- }
3863
+ .epr_-bbny0t > button {
3864
+ border-radius: 50% !important;
3865
+ }
3941
3866
 
3942
- .md\:w-\[384px\] {
3943
- width: 384px;
3944
- }
3867
+ .epr_-6kfaby.epr-active {
3868
+ background-color: #ffdf0a !important;
3869
+ color: #000 !important;
3870
+ border-radius: 4px !important;
3871
+ border: none !important;
3872
+ }
3945
3873
 
3946
- .md\:w-\[60vw\] {
3947
- width: 60vw;
3948
- }
3874
+ .epr_-f1jbax:focus:before {
3875
+ border: none !important;
3876
+ border-radius: 4px !important;
3877
+ }
3949
3878
 
3950
- .md\:w-\[80\%\] {
3951
- width: 80%;
3952
- }
3879
+ .epr_-8ygbw8 {
3880
+ padding: 0.5rem 1rem !important;
3881
+ }
3953
3882
 
3954
- .md\:w-auto {
3955
- width: auto;
3956
- }
3883
+ .epr-body {
3884
+ margin: 0 0.5rem !important;
3885
+ }
3957
3886
 
3958
- .md\:max-w-min {
3959
- max-width: -moz-min-content;
3960
- max-width: min-content;
3961
- }
3887
+ .toast-mini {
3888
+ padding: 8px 12px !important;
3889
+ gap: 8px !important;
3890
+ width: -moz-fit-content !important;
3891
+ width: fit-content !important;
3892
+ border-radius: 8px !important;
3893
+ place-self: end !important;
3894
+ }
3962
3895
 
3963
- .md\:grid-cols-2 {
3964
- grid-template-columns: repeat(2, minmax(0, 1fr));
3965
- }
3896
+ .toast-mini > * + * {
3897
+ margin-left: 0;
3898
+ }
3966
3899
 
3967
- .md\:flex-row {
3968
- flex-direction: row;
3969
- }
3900
+ .space-lg {
3901
+ padding: 20px !important;
3902
+ }
3970
3903
 
3971
- .md\:justify-start {
3972
- justify-content: flex-start;
3973
- }
3904
+ .space-y-lg {
3905
+ padding-top: 20px !important;
3906
+ padding-bottom: 20px !important;
3907
+ }
3974
3908
 
3975
- .md\:gap-8 {
3976
- gap: 2rem;
3977
- }
3909
+ .space-x-lg {
3910
+ padding-left: 20px !important;
3911
+ padding-right: 20px !important;
3912
+ }
3978
3913
 
3979
- .md\:p-24 {
3980
- padding: 6rem;
3981
- }
3914
+ .top-space-lg {
3915
+ padding-top: 20px !important;
3916
+ }
3982
3917
 
3983
- .md\:p-8 {
3984
- padding: 2rem;
3985
- }
3918
+ .bottom-space-lg {
3919
+ padding-bottom: 20px !important;
3986
3920
  }
3987
- @media (min-width: 1024px) {
3988
3921
 
3989
- .lg\:\!mt-0 {
3990
- margin-top: 0px !important;
3991
- }
3922
+ .left-space-lg {
3923
+ padding-left: 20px !important;
3924
+ }
3992
3925
 
3993
- .lg\:mb-1 {
3994
- margin-bottom: 0.25rem;
3995
- }
3926
+ .right-space-lg {
3927
+ padding-right: 20px !important;
3928
+ }
3929
+
3930
+ .bottom-space-xlg {
3931
+ padding-bottom: 24px !important;
3932
+ }
3996
3933
 
3997
- .lg\:block {
3998
- display: block;
3999
- }
3934
+ .space-sm {
3935
+ padding: 12px !important;
3936
+ }
4000
3937
 
4001
- .lg\:flex {
4002
- display: flex;
4003
- }
3938
+ .space-y-sm {
3939
+ padding-top: 12px !important;
3940
+ padding-bottom: 12px !important;
3941
+ }
4004
3942
 
4005
- .lg\:hidden {
4006
- display: none;
4007
- }
3943
+ .space-x-sm {
3944
+ padding-left: 12px !important;
3945
+ padding-right: 12px !important;
3946
+ }
4008
3947
 
4009
- .lg\:h-12 {
4010
- height: 3rem;
4011
- }
3948
+ .top-space-sm {
3949
+ padding-top: 12px !important;
3950
+ }
4012
3951
 
4013
- .lg\:w-3\/4 {
4014
- width: 75%;
4015
- }
3952
+ .bottom-space-sm {
3953
+ padding-bottom: 12px !important;
3954
+ }
4016
3955
 
4017
- .lg\:w-\[180px\] {
4018
- width: 180px;
4019
- }
3956
+ .left-space-sm {
3957
+ padding-left: 12px !important;
3958
+ }
4020
3959
 
4021
- .lg\:w-\[452px\] {
4022
- width: 452px;
4023
- }
3960
+ .right-space-sm {
3961
+ padding-right: 12px !important;
3962
+ }
4024
3963
 
4025
- .lg\:w-auto {
4026
- width: auto;
4027
- }
3964
+ .space-xsm {
3965
+ padding: 8px !important;
3966
+ }
4028
3967
 
4029
- .lg\:w-fit {
4030
- width: -moz-fit-content;
4031
- width: fit-content;
4032
- }
3968
+ .space-y-xsm {
3969
+ padding-top: 8px !important;
3970
+ padding-bottom: 8px !important;
3971
+ }
4033
3972
 
4034
- .lg\:min-w-\[418px\] {
4035
- min-width: 418px;
4036
- }
3973
+ .space-x-xsm {
3974
+ padding-left: 8px !important;
3975
+ padding-right: 8px !important;
3976
+ }
4037
3977
 
4038
- .lg\:min-w-\[420px\] {
4039
- min-width: 420px;
4040
- }
3978
+ .space-x-3xlg {
3979
+ padding-left: 40px !important;
3980
+ padding-right: 40px !important;
3981
+ }
4041
3982
 
4042
- .lg\:min-w-\[884px\] {
4043
- min-width: 884px;
4044
- }
3983
+ .space-y-3xlg {
3984
+ padding-left: 40px !important;
3985
+ padding-right: 40px !important;
3986
+ }
4045
3987
 
4046
- .lg\:\!max-w-fit {
4047
- max-width: -moz-fit-content !important;
4048
- max-width: fit-content !important;
4049
- }
3988
+ .top-space-xsm {
3989
+ padding-top: 8px !important;
3990
+ }
4050
3991
 
4051
- .lg\:grid-cols-3 {
4052
- grid-template-columns: repeat(3, minmax(0, 1fr));
4053
- }
3992
+ .bottom-space-xsm {
3993
+ padding-bottom: 8px !important;
3994
+ }
4054
3995
 
4055
- .lg\:text-wrap {
4056
- text-wrap: wrap;
4057
- }
3996
+ .left-space-xsm {
3997
+ padding-left: 8px !important;
3998
+ }
4058
3999
 
4059
- .lg\:py-4 {
4060
- padding-top: 1rem;
4061
- padding-bottom: 1rem;
4062
- }
4000
+ .right-space-xsm {
4001
+ padding-right: 8px !important;
4063
4002
  }
4064
- .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
4065
- -webkit-appearance: none;
4066
- appearance: none;
4003
+
4004
+ .right-space-2xsm {
4005
+ padding-right: 4px !important;
4067
4006
  }
4068
- .\[\&\:has\(\>\.day-range-end\)\]\:rounded-r-md:has(>.day-range-end) {
4069
- border-top-right-radius: calc(var(--radius) - 2px);
4070
- border-bottom-right-radius: calc(var(--radius) - 2px);
4007
+
4008
+ .bottom-space-2xsm {
4009
+ padding-bottom: 4px !important;
4071
4010
  }
4072
- .\[\&\:has\(\>\.day-range-start\)\]\:rounded-l-md:has(>.day-range-start) {
4073
- border-top-left-radius: calc(var(--radius) - 2px);
4074
- border-bottom-left-radius: calc(var(--radius) - 2px);
4011
+
4012
+ .bottom-space-2xlg {
4013
+ padding-bottom: 32px !important;
4075
4014
  }
4076
- .\[\&\:has\(\[aria-selected\]\)\]\:rounded-md:has([aria-selected]) {
4077
- border-radius: calc(var(--radius) - 2px);
4015
+
4016
+ .space-2xsm {
4017
+ padding: 4px !important;
4078
4018
  }
4079
- .first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:has([aria-selected]):first-child {
4080
- border-top-left-radius: calc(var(--radius) - 2px);
4081
- border-bottom-left-radius: calc(var(--radius) - 2px);
4019
+
4020
+ .space-md {
4021
+ padding: 16px !important;
4082
4022
  }
4083
- .last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:has([aria-selected]):last-child {
4084
- border-top-right-radius: calc(var(--radius) - 2px);
4085
- border-bottom-right-radius: calc(var(--radius) - 2px);
4023
+
4024
+ .space-y-md {
4025
+ padding-top: 16px !important;
4026
+ padding-bottom: 16px !important;
4086
4027
  }
4087
- .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
4088
- padding-right: 0px;
4028
+
4029
+ .space-x-md {
4030
+ padding-left: 16px !important;
4031
+ padding-right: 16px !important;
4089
4032
  }
4090
- .\[\&\>span\]\:line-clamp-1>span {
4091
- overflow: hidden;
4092
- display: -webkit-box;
4093
- -webkit-box-orient: vertical;
4094
- -webkit-line-clamp: 1;
4033
+
4034
+ .top-space-md {
4035
+ padding-top: 16px !important;
4095
4036
  }
4096
- .\[\&\>tr\]\:last\:border-b-0:last-child>tr {
4097
- border-bottom-width: 0px;
4037
+
4038
+ .bottom-space-md {
4039
+ padding-bottom: 16px !important;
4098
4040
  }
4099
- .\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
4100
- --tw-rotate: 180deg;
4101
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
4041
+
4042
+ .left-space-md {
4043
+ padding-left: 16px !important;
4102
4044
  }
4103
- .\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
4104
- padding-left: 0.5rem;
4105
- padding-right: 0.5rem;
4045
+
4046
+ .right-space-md {
4047
+ padding-right: 16px !important;
4106
4048
  }
4107
- .\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
4108
- padding-top: 0.375rem;
4109
- padding-bottom: 0.375rem;
4049
+
4050
+ .top-space-xlg {
4051
+ padding-top: 32px !important;
4110
4052
  }
4111
- .\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
4112
- font-weight: 500;
4053
+
4054
+ .gap-xsm {
4055
+ gap: 8px !important;
4113
4056
  }
4114
- .\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
4115
- padding-top: 0px;
4057
+
4058
+ .gap-2xsm {
4059
+ gap: 4px !important;
4116
4060
  }
4117
- .\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
4118
- padding-left: 0.5rem;
4119
- padding-right: 0.5rem;
4061
+
4062
+ .gap-3xsm {
4063
+ gap: 2px !important;
4120
4064
  }
4121
- .\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
4122
- height: 1.25rem;
4065
+
4066
+ .gap-md {
4067
+ gap: 16px !important;
4123
4068
  }
4124
- .\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
4125
- width: 1.25rem;
4069
+
4070
+ .gap-sm {
4071
+ gap: 12px !important;
4126
4072
  }
4127
- .\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
4128
- height: 3rem;
4073
+
4074
+ .border-radius-sm {
4075
+ border-radius: 4px !important;
4129
4076
  }
4130
- .\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
4131
- padding-left: 0.5rem;
4132
- padding-right: 0.5rem;
4077
+
4078
+ .border-width-md {
4079
+ border-width: 1px !important;
4133
4080
  }
4134
- .\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
4135
- padding-top: 0.75rem;
4136
- padding-bottom: 0.75rem;
4081
+
4082
+ .border-radius-lg {
4083
+ border-radius: 12px !important;
4137
4084
  }
4138
- .\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
4139
- height: 1.25rem;
4085
+
4086
+ .top-left-border-radius-xlg {
4087
+ border-top-left-radius: 16px !important;
4140
4088
  }
4141
- .\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
4142
- width: 1.25rem;
4089
+
4090
+ .top-right-border-radius-xlg {
4091
+ border-top-right-radius: 16px !important;
4143
4092
  }
4144
- .\[\&_p\]\:leading-relaxed p {
4145
- line-height: 1.625;
4093
+
4094
+ .bottom-left-border-radius-xlg {
4095
+ border-bottom-left-radius: 16px !important;
4146
4096
  }
4147
- .\[\&_svg\]\:invisible svg {
4148
- visibility: hidden;
4097
+
4098
+ .bottom-right-border-radius-xlg {
4099
+ border-bottom-right-radius: 16px !important;
4149
4100
  }
4150
- .\[\&_tr\:last-child\]\:border-0 tr:last-child {
4151
- border-width: 0px;
4101
+
4102
+ .border-radius-xlg {
4103
+ border-radius: 16px !important;
4152
4104
  }
4153
- .\[\&_tr\]\:border-b tr {
4154
- border-bottom-width: 1px;
4105
+
4106
+ .border-radius-md {
4107
+ border-radius: 8px !important;
4108
+ }
4109
+
4110
+ .space-x-xlg {
4111
+ padding-left: 24px !important;
4112
+ padding-right: 24px !important;
4155
4113
  }