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

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 +36 -2
  2. package/dist/base.css +744 -0
  3. package/dist/index.css +1999 -2037
  4. package/package.json +18 -7
  5. package/tailwind/components.css +480 -0
  6. package/tailwind/preset.cjs +46 -0
package/dist/index.css CHANGED
@@ -499,895 +499,390 @@ 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
- }
502
+ .container {
503
+ width: 100%;
504
+ margin-right: auto;
505
+ margin-left: auto;
506
+ padding-right: 2rem;
507
+ padding-left: 2rem;
508
+ }
509
+ @media (min-width: 1400px) {
1291
510
 
1292
- .color-utility-overlay {
1293
- background-color: hsl(var(--color-utility-overlay));
511
+ .container {
512
+ max-width: 1400px;
1294
513
  }
1295
-
1296
- /* ELEVATIONS */
1297
-
1298
- .shadow-elevation-1 {
1299
- --tw-shadow: 0 1px 2px rgba(0,0,0,0.15);
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
+ --tw-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
1300
820
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color);
1301
821
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1302
822
  }
1303
-
1304
- .shadow-elevation-2 {
1305
- --tw-shadow: 0 2px 4px rgba(0,0,0,0.15);
823
+ .shadow-elevation-2 {
824
+ --tw-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
1306
825
  --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
1307
826
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1308
827
  }
1309
-
1310
- .shadow-elevation-3 {
1311
- --tw-shadow: 0 4px 16px rgba(0,0,0,0.15);
828
+ .shadow-elevation-3 {
829
+ --tw-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
1312
830
  --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color);
1313
831
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1314
832
  }
1315
-
1316
- .shadow-elevation-4 {
1317
- --tw-shadow: 0 8px 32px rgba(0,0,0,0.15);
833
+ .shadow-elevation-4 {
834
+ --tw-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
1318
835
  --tw-shadow-colored: 0 8px 32px var(--tw-shadow-color);
1319
836
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1320
837
  }
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
- .container {
1371
- width: 100%;
1372
- margin-right: auto;
1373
- margin-left: auto;
1374
- padding-right: 2rem;
1375
- padding-left: 2rem;
838
+ .divider-y-sm {
839
+ border-right-width: 0px;
840
+ border-left-width: 0.5px;
841
+ border-left-color: hsl(var(--color-border-default));
842
+ }
843
+ .divider-y-md {
844
+ border-right-width: 0px;
845
+ border-left-width: 1px;
846
+ border-left-color: hsl(var(--color-border-default));
847
+ }
848
+ .divider-y-lg {
849
+ border-right-width: 0px;
850
+ border-left-width: 2px;
851
+ border-left-color: hsl(var(--color-border-default));
852
+ }
853
+ .divider-y-xlg {
854
+ border-right-width: 0px;
855
+ border-left-width: 4px;
856
+ border-left-color: hsl(var(--color-border-default));
857
+ }
858
+ .divider-x-sm {
859
+ border-bottom-width: 0px;
860
+ border-top-width: 0.5px;
861
+ border-left-color: hsl(var(--color-border-default));
862
+ }
863
+ .divider-x-md {
864
+ border-bottom-width: 0px;
865
+ border-top-width: 1px;
866
+ border-top-color: hsl(var(--color-border-default));
1376
867
  }
1377
- @media (min-width: 1400px) {
1378
-
1379
- .container {
1380
- max-width: 1400px;
1381
- }
868
+ .divider-x-lg {
869
+ border-bottom-width: 0px;
870
+ border-top-width: 2px;
871
+ border-top-color: hsl(var(--color-border-default));
872
+ }
873
+ .divider-x-xlg {
874
+ border-bottom-width: 0px;
875
+ border-top-width: 4px;
876
+ border-top-color: hsl(var(--color-border-default));
1382
877
  }
1383
878
  .avatar-sm {
1384
- border-radius: 4px;
1385
- border-width: 2px;
1386
- }
879
+ border-radius: 4px;
880
+ border-width: 2px;
881
+ }
1387
882
  .avatar-lg {
1388
- border-radius: 8px;
1389
- border-width: 4px;
1390
- }
883
+ border-radius: 8px;
884
+ border-width: 4px;
885
+ }
1391
886
  .sr-only {
1392
887
  position: absolute;
1393
888
  width: 1px;
@@ -2634,860 +2129,592 @@ video {
2634
2129
  padding: 0.75rem;
2635
2130
  }
2636
2131
  .p-4 {
2637
- padding: 1rem;
2638
- }
2639
- .p-5 {
2640
- padding: 1.25rem;
2641
- }
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));
2132
+ padding: 1rem;
2877
2133
  }
2878
- .text-\[hsl\(var\(--color-bg-default\)\)\] {
2879
- color: hsl(var(--color-bg-default));
2134
+ .p-5 {
2135
+ padding: 1.25rem;
2880
2136
  }
2881
- .text-\[hsl\(var\(--color-icon-secondary\)\)\] {
2882
- color: hsl(var(--color-icon-secondary));
2137
+ .p-6 {
2138
+ padding: 1.5rem;
2883
2139
  }
2884
- .text-\[hsl\(var\(--color-text-inverse\)\)\] {
2885
- color: hsl(var(--color-text-inverse));
2140
+ .\!px-0 {
2141
+ padding-left: 0px !important;
2142
+ padding-right: 0px !important;
2886
2143
  }
2887
- .text-current {
2888
- color: currentColor;
2144
+ .\!px-1 {
2145
+ padding-left: 0.25rem !important;
2146
+ padding-right: 0.25rem !important;
2889
2147
  }
2890
- .text-gray-400 {
2891
- --tw-text-opacity: 1;
2892
- color: rgb(156 163 175 / var(--tw-text-opacity, 1));
2148
+ .\!py-\[2px\] {
2149
+ padding-top: 2px !important;
2150
+ padding-bottom: 2px !important;
2893
2151
  }
2894
- .text-red-500 {
2895
- --tw-text-opacity: 1;
2896
- color: rgb(239 68 68 / var(--tw-text-opacity, 1));
2152
+ .px-0 {
2153
+ padding-left: 0px;
2154
+ padding-right: 0px;
2897
2155
  }
2898
- .text-white {
2899
- --tw-text-opacity: 1;
2900
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
2156
+ .px-0\.5 {
2157
+ padding-left: 0.125rem;
2158
+ padding-right: 0.125rem;
2901
2159
  }
2902
- .text-white\/60 {
2903
- color: rgb(255 255 255 / 0.6);
2160
+ .px-1 {
2161
+ padding-left: 0.25rem;
2162
+ padding-right: 0.25rem;
2904
2163
  }
2905
- .underline {
2906
- text-decoration-line: underline;
2164
+ .px-2 {
2165
+ padding-left: 0.5rem;
2166
+ padding-right: 0.5rem;
2907
2167
  }
2908
- .caret-transparent {
2909
- caret-color: transparent;
2168
+ .px-3 {
2169
+ padding-left: 0.75rem;
2170
+ padding-right: 0.75rem;
2910
2171
  }
2911
- .opacity-0 {
2912
- opacity: 0;
2172
+ .px-4 {
2173
+ padding-left: 1rem;
2174
+ padding-right: 1rem;
2913
2175
  }
2914
- .opacity-30 {
2915
- opacity: 0.3;
2176
+ .px-5 {
2177
+ padding-left: 1.25rem;
2178
+ padding-right: 1.25rem;
2916
2179
  }
2917
- .opacity-50 {
2918
- opacity: 0.5;
2180
+ .px-6 {
2181
+ padding-left: 1.5rem;
2182
+ padding-right: 1.5rem;
2919
2183
  }
2920
- .opacity-90 {
2921
- opacity: 0.9;
2184
+ .px-8 {
2185
+ padding-left: 2rem;
2186
+ padding-right: 2rem;
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
+ .px-\[3px\] {
2189
+ padding-left: 3px;
2190
+ padding-right: 3px;
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
+ .px-px {
2193
+ padding-left: 1px;
2194
+ padding-right: 1px;
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-1 {
2197
+ padding-top: 0.25rem;
2198
+ padding-bottom: 0.25rem;
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-1\.5 {
2201
+ padding-top: 0.375rem;
2202
+ padding-bottom: 0.375rem;
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-10 {
2205
+ padding-top: 2.5rem;
2206
+ padding-bottom: 2.5rem;
2947
2207
  }
2948
- .outline-none {
2949
- outline: 2px solid transparent;
2950
- outline-offset: 2px;
2208
+ .py-2 {
2209
+ padding-top: 0.5rem;
2210
+ padding-bottom: 0.5rem;
2951
2211
  }
2952
- .outline {
2953
- outline-style: solid;
2212
+ .py-3 {
2213
+ padding-top: 0.75rem;
2214
+ padding-bottom: 0.75rem;
2954
2215
  }
2955
- .outline-1 {
2956
- outline-width: 1px;
2216
+ .py-4 {
2217
+ padding-top: 1rem;
2218
+ padding-bottom: 1rem;
2957
2219
  }
2958
- .-outline-offset-\[0\.5px\] {
2959
- outline-offset: -0.5px;
2220
+ .py-6 {
2221
+ padding-top: 1.5rem;
2222
+ padding-bottom: 1.5rem;
2960
2223
  }
2961
- .-outline-offset-\[1px\] {
2962
- outline-offset: -1px;
2224
+ .\!pb-0 {
2225
+ padding-bottom: 0px !important;
2963
2226
  }
2964
- .outline-offset-\[-1px\] {
2965
- outline-offset: -1px;
2227
+ .\!pb-\[calc\(16px\+24px\)\] {
2228
+ padding-bottom: calc(16px + 24px) !important;
2966
2229
  }
2967
- .outline-\[hsl\(var\(--color-border-default\)\)\] {
2968
- outline-color: hsl(var(--color-border-default));
2230
+ .\!pr-0 {
2231
+ padding-right: 0px !important;
2969
2232
  }
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);
2233
+ .\!pt-4 {
2234
+ padding-top: 1rem !important;
2974
2235
  }
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);
2236
+ .pb-2 {
2237
+ padding-bottom: 0.5rem;
2979
2238
  }
2980
- .ring-focused {
2981
- --tw-ring-color: hsl(var(--focused));
2239
+ .pb-3 {
2240
+ padding-bottom: 0.75rem;
2982
2241
  }
2983
- .ring-offset-2 {
2984
- --tw-ring-offset-width: 2px;
2242
+ .pb-4 {
2243
+ padding-bottom: 1rem;
2985
2244
  }
2986
- .ring-offset-transparent {
2987
- --tw-ring-offset-color: transparent;
2245
+ .pb-5 {
2246
+ padding-bottom: 1.25rem;
2988
2247
  }
2989
- .ring-offset-white {
2990
- --tw-ring-offset-color: #fff;
2248
+ .pb-6 {
2249
+ padding-bottom: 1.5rem;
2991
2250
  }
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);
2251
+ .pl-10 {
2252
+ padding-left: 2.5rem;
2995
2253
  }
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);
2254
+ .pl-2 {
2255
+ padding-left: 0.5rem;
2998
2256
  }
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);
2257
+ .pl-6 {
2258
+ padding-left: 1.5rem;
3002
2259
  }
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;
2260
+ .pl-8 {
2261
+ padding-left: 2rem;
3007
2262
  }
3008
- .transition-all {
3009
- transition-property: all;
3010
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3011
- transition-duration: 150ms;
2263
+ .pr-10 {
2264
+ padding-right: 2.5rem;
3012
2265
  }
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;
2266
+ .pr-2 {
2267
+ padding-right: 0.5rem;
3017
2268
  }
3018
- .transition-opacity {
3019
- transition-property: opacity;
3020
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3021
- transition-duration: 150ms;
2269
+ .pr-3 {
2270
+ padding-right: 0.75rem;
3022
2271
  }
3023
- .transition-transform {
3024
- transition-property: transform;
3025
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3026
- transition-duration: 150ms;
2272
+ .pr-8 {
2273
+ padding-right: 2rem;
3027
2274
  }
3028
- .duration-200 {
3029
- transition-duration: 200ms;
2275
+ .pt-0 {
2276
+ padding-top: 0px;
3030
2277
  }
3031
- .duration-300 {
3032
- transition-duration: 300ms;
2278
+ .pt-0\.5 {
2279
+ padding-top: 0.125rem;
3033
2280
  }
3034
- .duration-500 {
3035
- transition-duration: 500ms;
2281
+ .pt-2 {
2282
+ padding-top: 0.5rem;
3036
2283
  }
3037
- .ease-in-out {
3038
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2284
+ .pt-4 {
2285
+ padding-top: 1rem;
3039
2286
  }
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
- }
2287
+ .text-left {
2288
+ text-align: left;
3046
2289
  }
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
- }
2290
+ .text-center {
2291
+ text-align: center;
3053
2292
  }
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;
2293
+ .text-justify {
2294
+ text-align: justify;
2295
+ }
2296
+ .align-middle {
2297
+ vertical-align: middle;
3062
2298
  }
3063
- .fade-in-0 {
3064
- --tw-enter-opacity: 0;
2299
+ .font-mono {
2300
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
3065
2301
  }
3066
- .zoom-in-95 {
3067
- --tw-enter-scale: .95;
2302
+ .text-\[10px\] {
2303
+ font-size: 10px;
3068
2304
  }
3069
- .duration-200 {
3070
- animation-duration: 200ms;
2305
+ .text-\[14px\] {
2306
+ font-size: 14px;
3071
2307
  }
3072
- .duration-300 {
3073
- animation-duration: 300ms;
2308
+ .text-\[16px\] {
2309
+ font-size: 16px;
3074
2310
  }
3075
- .duration-500 {
3076
- animation-duration: 500ms;
2311
+ .text-\[20px\] {
2312
+ font-size: 20px;
3077
2313
  }
3078
- .ease-in-out {
3079
- animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2314
+ .text-\[24px\] {
2315
+ font-size: 24px;
3080
2316
  }
3081
-
3082
- #selected-value > div > div > p {
3083
- display: none;
2317
+ .text-\[32px\] {
2318
+ font-size: 32px;
3084
2319
  }
3085
-
3086
- #storybook-root {
3087
- padding: 0 !important;
2320
+ .text-\[9px\] {
2321
+ font-size: 9px;
3088
2322
  }
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;
2323
+ .text-lg {
2324
+ font-size: 1.125rem;
2325
+ line-height: 1.75rem;
3097
2326
  }
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;
2327
+ .text-sm {
2328
+ font-size: 0.875rem;
2329
+ line-height: 1.25rem;
3107
2330
  }
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;
2331
+ .text-xs {
2332
+ font-size: 0.75rem;
2333
+ line-height: 1rem;
3115
2334
  }
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";
2335
+ .\!font-bold {
2336
+ font-weight: 700 !important;
3128
2337
  }
3129
-
3130
- /* For hover state */
3131
- .epr-search-container > input:hover {
3132
- border-color: #000; /* hover:border-border-hover */
2338
+ .font-\[700\] {
2339
+ font-weight: 700;
3133
2340
  }
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 */
2341
+ .font-medium {
2342
+ font-weight: 500;
3139
2343
  }
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;
2344
+ .font-normal {
2345
+ font-weight: 400;
3146
2346
  }
3147
- .epr-search-container > input::placeholder {
3148
- color: hsl(var(--color-text-disabled));
3149
- font-family: system-ui, "Roboto";
3150
- font-size: 14px;
2347
+ .tabular-nums {
2348
+ --tw-numeric-spacing: tabular-nums;
2349
+ font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
3151
2350
  }
3152
-
3153
- .epr_-bbny0t > button {
3154
- border-radius: 50% !important;
2351
+ .leading-5 {
2352
+ line-height: 1.25rem;
3155
2353
  }
3156
-
3157
- .epr_-6kfaby.epr-active {
3158
- background-color: #ffdf0a !important;
3159
- color: #000 !important;
3160
- border-radius: 4px !important;
3161
- border: none !important;
2354
+ .leading-6 {
2355
+ line-height: 1.5rem;
3162
2356
  }
3163
-
3164
- .epr_-f1jbax:focus:before {
3165
- border: none !important;
3166
- border-radius: 4px !important;
2357
+ .leading-\[20px\] {
2358
+ line-height: 20px;
3167
2359
  }
3168
-
3169
- .epr_-8ygbw8 {
3170
- padding: 0.5rem 1rem !important;
2360
+ .leading-none {
2361
+ line-height: 1;
3171
2362
  }
3172
-
3173
- .epr-body {
3174
- margin: 0 0.5rem !important;
2363
+ .tracking-wide {
2364
+ letter-spacing: 0.025em;
3175
2365
  }
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;
2366
+ .tracking-widest {
2367
+ letter-spacing: 0.1em;
3184
2368
  }
3185
-
3186
- .toast-mini > * + * {
3187
- margin-left: 0;
2369
+ .text-\[\#77818A\] {
2370
+ --tw-text-opacity: 1;
2371
+ color: rgb(119 129 138 / var(--tw-text-opacity, 1));
3188
2372
  }
3189
-
3190
- .space-lg {
3191
- padding: 20px !important;
2373
+ .text-\[hsl\(var\(--color-bg-default\)\)\] {
2374
+ color: hsl(var(--color-bg-default));
3192
2375
  }
3193
- .space-y-lg {
3194
- padding-top: 20px !important;
3195
- padding-bottom: 20px !important;
2376
+ .text-\[hsl\(var\(--color-icon-secondary\)\)\] {
2377
+ color: hsl(var(--color-icon-secondary));
3196
2378
  }
3197
- .space-x-lg {
3198
- padding-left: 20px !important;
3199
- padding-right: 20px !important;
2379
+ .text-\[hsl\(var\(--color-text-inverse\)\)\] {
2380
+ color: hsl(var(--color-text-inverse));
3200
2381
  }
3201
- .top-space-lg {
3202
- padding-top: 20px !important;
2382
+ .text-current {
2383
+ color: currentColor;
3203
2384
  }
3204
- .bottom-space-lg {
3205
- padding-bottom: 20px !important;
2385
+ .text-gray-400 {
2386
+ --tw-text-opacity: 1;
2387
+ color: rgb(156 163 175 / var(--tw-text-opacity, 1));
3206
2388
  }
3207
- .left-space-lg {
3208
- padding-left: 20px !important;
2389
+ .text-red-500 {
2390
+ --tw-text-opacity: 1;
2391
+ color: rgb(239 68 68 / var(--tw-text-opacity, 1));
3209
2392
  }
3210
- .right-space-lg {
3211
- padding-right: 20px !important;
2393
+ .text-white {
2394
+ --tw-text-opacity: 1;
2395
+ color: rgb(255 255 255 / var(--tw-text-opacity, 1));
3212
2396
  }
3213
- .bottom-space-xlg {
3214
- padding-bottom: 24px !important;
2397
+ .text-white\/60 {
2398
+ color: rgb(255 255 255 / 0.6);
3215
2399
  }
3216
-
3217
- .space-sm {
3218
- padding: 12px !important;
2400
+ .underline {
2401
+ text-decoration-line: underline;
3219
2402
  }
3220
- .space-y-sm {
3221
- padding-top: 12px !important;
3222
- padding-bottom: 12px !important;
2403
+ .caret-transparent {
2404
+ caret-color: transparent;
3223
2405
  }
3224
- .space-x-sm {
3225
- padding-left: 12px !important;
3226
- padding-right: 12px !important;
2406
+ .opacity-0 {
2407
+ opacity: 0;
3227
2408
  }
3228
- .top-space-sm {
3229
- padding-top: 12px !important;
2409
+ .opacity-30 {
2410
+ opacity: 0.3;
3230
2411
  }
3231
- .bottom-space-sm {
3232
- padding-bottom: 12px !important;
2412
+ .opacity-50 {
2413
+ opacity: 0.5;
3233
2414
  }
3234
- .left-space-sm {
3235
- padding-left: 12px !important;
2415
+ .opacity-90 {
2416
+ opacity: 0.9;
3236
2417
  }
3237
- .right-space-sm {
3238
- padding-right: 12px !important;
2418
+ .shadow {
2419
+ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
2420
+ --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
2421
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3239
2422
  }
3240
-
3241
- .space-xsm {
3242
- padding: 8px !important;
2423
+ .shadow-lg {
2424
+ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
2425
+ --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
2426
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3243
2427
  }
3244
- .space-y-xsm {
3245
- padding-top: 8px !important;
3246
- padding-bottom: 8px !important;
2428
+ .shadow-md {
2429
+ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
2430
+ --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
2431
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3247
2432
  }
3248
- .space-x-xsm {
3249
- padding-left: 8px !important;
3250
- padding-right: 8px !important;
2433
+ .shadow-none {
2434
+ --tw-shadow: 0 0 #0000;
2435
+ --tw-shadow-colored: 0 0 #0000;
2436
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2437
+ }
2438
+ .shadow-sm {
2439
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
2440
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
2441
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2442
+ }
2443
+ .outline-none {
2444
+ outline: 2px solid transparent;
2445
+ outline-offset: 2px;
3251
2446
  }
3252
- .space-x-3xlg {
3253
- padding-left: 40px !important;
3254
- padding-right: 40px !important;
2447
+ .outline {
2448
+ outline-style: solid;
3255
2449
  }
3256
- .space-y-3xlg {
3257
- padding-left: 40px !important;
3258
- padding-right: 40px !important;
2450
+ .outline-1 {
2451
+ outline-width: 1px;
3259
2452
  }
3260
- .top-space-xsm {
3261
- padding-top: 8px !important;
2453
+ .-outline-offset-\[0\.5px\] {
2454
+ outline-offset: -0.5px;
3262
2455
  }
3263
- .bottom-space-xsm {
3264
- padding-bottom: 8px !important;
2456
+ .-outline-offset-\[1px\] {
2457
+ outline-offset: -1px;
3265
2458
  }
3266
- .left-space-xsm {
3267
- padding-left: 8px !important;
2459
+ .outline-offset-\[-1px\] {
2460
+ outline-offset: -1px;
3268
2461
  }
3269
- .right-space-xsm {
3270
- padding-right: 8px !important;
2462
+ .outline-\[hsl\(var\(--color-border-default\)\)\] {
2463
+ outline-color: hsl(var(--color-border-default));
3271
2464
  }
3272
- .right-space-2xsm {
3273
- padding-right: 4px !important;
2465
+ .ring-0 {
2466
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2467
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2468
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3274
2469
  }
3275
- .bottom-space-2xsm {
3276
- padding-bottom: 4px !important;
2470
+ .ring-2 {
2471
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2472
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2473
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3277
2474
  }
3278
- .bottom-space-2xlg {
3279
- padding-bottom: 32px !important;
2475
+ .ring-focused {
2476
+ --tw-ring-color: hsl(var(--focused));
3280
2477
  }
3281
- .space-2xsm {
3282
- padding: 4px !important;
2478
+ .ring-offset-2 {
2479
+ --tw-ring-offset-width: 2px;
3283
2480
  }
3284
- .space-md {
3285
- padding: 16px !important;
2481
+ .ring-offset-transparent {
2482
+ --tw-ring-offset-color: transparent;
3286
2483
  }
3287
- .space-y-md {
3288
- padding-top: 16px !important;
3289
- padding-bottom: 16px !important;
2484
+ .ring-offset-white {
2485
+ --tw-ring-offset-color: #fff;
3290
2486
  }
3291
- .space-x-md {
3292
- padding-left: 16px !important;
3293
- padding-right: 16px !important;
2487
+ .drop-shadow {
2488
+ --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));
2489
+ 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
2490
  }
3295
- .top-space-md {
3296
- padding-top: 16px !important;
2491
+ .filter {
2492
+ 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);
3297
2493
  }
3298
- .bottom-space-md {
3299
- padding-bottom: 16px !important;
2494
+ .backdrop-blur-sm {
2495
+ --tw-backdrop-blur: blur(4px);
2496
+ 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);
3300
2497
  }
3301
- .left-space-md {
3302
- padding-left: 16px !important;
2498
+ .transition {
2499
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2500
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2501
+ transition-duration: 150ms;
3303
2502
  }
3304
- .right-space-md {
3305
- padding-right: 16px !important;
2503
+ .transition-all {
2504
+ transition-property: all;
2505
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2506
+ transition-duration: 150ms;
3306
2507
  }
3307
- .top-space-xlg {
3308
- padding-top: 32px !important;
2508
+ .transition-colors {
2509
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
2510
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2511
+ transition-duration: 150ms;
3309
2512
  }
3310
-
3311
- .gap-xsm {
3312
- gap: 8px !important;
2513
+ .transition-opacity {
2514
+ transition-property: opacity;
2515
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2516
+ transition-duration: 150ms;
3313
2517
  }
3314
- .gap-2xsm {
3315
- gap: 4px !important;
2518
+ .transition-transform {
2519
+ transition-property: transform;
2520
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2521
+ transition-duration: 150ms;
3316
2522
  }
3317
- .gap-3xsm {
3318
- gap: 2px !important;
2523
+ .duration-200 {
2524
+ transition-duration: 200ms;
3319
2525
  }
3320
- .gap-md {
3321
- gap: 16px !important;
2526
+ .duration-300 {
2527
+ transition-duration: 300ms;
3322
2528
  }
3323
- .gap-sm {
3324
- gap: 12px !important;
2529
+ .duration-500 {
2530
+ transition-duration: 500ms;
3325
2531
  }
3326
-
3327
- .border-radius-sm {
3328
- border-radius: 4px !important;
2532
+ .ease-in-out {
2533
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3329
2534
  }
3330
- .border-width-md {
3331
- border-width: 1px !important;
2535
+ @keyframes enter {
2536
+
2537
+ from {
2538
+ opacity: var(--tw-enter-opacity, 1);
2539
+ 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));
2540
+ }
3332
2541
  }
3333
- .border-radius-lg {
3334
- border-radius: 12px !important;
2542
+ @keyframes exit {
2543
+
2544
+ to {
2545
+ opacity: var(--tw-exit-opacity, 1);
2546
+ 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));
2547
+ }
3335
2548
  }
3336
- .top-left-border-radius-xlg {
3337
- border-top-left-radius: 16px !important;
2549
+ .animate-in {
2550
+ animation-name: enter;
2551
+ animation-duration: 150ms;
2552
+ --tw-enter-opacity: initial;
2553
+ --tw-enter-scale: initial;
2554
+ --tw-enter-rotate: initial;
2555
+ --tw-enter-translate-x: initial;
2556
+ --tw-enter-translate-y: initial;
3338
2557
  }
3339
- .top-right-border-radius-xlg {
3340
- border-top-right-radius: 16px !important;
2558
+ .fade-in-0 {
2559
+ --tw-enter-opacity: 0;
3341
2560
  }
3342
- .bottom-left-border-radius-xlg {
3343
- border-bottom-left-radius: 16px !important;
2561
+ .zoom-in-95 {
2562
+ --tw-enter-scale: .95;
3344
2563
  }
3345
- .bottom-right-border-radius-xlg {
3346
- border-bottom-right-radius: 16px !important;
2564
+ .duration-200 {
2565
+ animation-duration: 200ms;
3347
2566
  }
3348
- .border-radius-xlg {
3349
- border-radius: 16px !important;
2567
+ .duration-300 {
2568
+ animation-duration: 300ms;
3350
2569
  }
3351
- .border-radius-md {
3352
- border-radius: 8px !important;
2570
+ .duration-500 {
2571
+ animation-duration: 500ms;
3353
2572
  }
3354
- .space-x-xlg {
3355
- padding-left: 24px !important;
3356
- padding-right: 24px !important;
2573
+ .ease-in-out {
2574
+ animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3357
2575
  }
3358
2576
  .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
- }
2577
+ font-family: system-ui;
2578
+ font-size: 14px;
2579
+ font-weight: 400;
2580
+ line-height: 20px;
2581
+ }
3364
2582
  .placeholder\:color-text-disabled::-moz-placeholder {
3365
- color: hsl(var(--color-text-disabled));
3366
- }
2583
+ color: hsl(var(--color-text-disabled));
2584
+ }
3367
2585
  .placeholder\:color-text-disabled::placeholder {
3368
- color: hsl(var(--color-text-disabled));
3369
- }
2586
+ color: hsl(var(--color-text-disabled));
2587
+ }
3370
2588
  .checked\:color-text-inverse:checked {
3371
- color: hsl(var(--color-text-inverse));
3372
- }
2589
+ color: hsl(var(--color-text-inverse));
2590
+ }
3373
2591
  .checked\:color-bg-default-inverse:checked {
3374
- background-color: hsl(var(--color-bg-default-inverse));
3375
- }
2592
+ background-color: hsl(var(--color-bg-default-inverse));
2593
+ }
3376
2594
  .focus-within\:color-button-secondary-hover:focus-within {
3377
- background-color: hsl(var(--color-button-secondary-hover));
3378
- }
2595
+ background-color: hsl(var(--color-button-secondary-hover));
2596
+ }
3379
2597
  .hover\:color-text-inverse:hover {
3380
- color: hsl(var(--color-text-inverse));
3381
- }
2598
+ color: hsl(var(--color-text-inverse));
2599
+ }
3382
2600
  .hover\:\!color-bg-default:hover {
3383
- background-color: hsl(var(--color-bg-default)) !important;
3384
- }
2601
+ background-color: hsl(var(--color-bg-default)) !important;
2602
+ }
3385
2603
  .hover\:\!color-bg-default-hover:hover {
3386
- background-color: hsl(var(--color-bg-default-hover)) !important;
3387
- }
2604
+ background-color: hsl(var(--color-bg-default-hover)) !important;
2605
+ }
3388
2606
  .hover\:color-bg-default-hover:hover {
3389
- background-color: hsl(var(--color-bg-default-hover));
3390
- }
2607
+ background-color: hsl(var(--color-bg-default-hover));
2608
+ }
3391
2609
  .hover\:color-bg-secondary-hover:hover {
3392
- background-color: hsl(var(--color-bg-secondary-hover));
3393
- }
2610
+ background-color: hsl(var(--color-bg-secondary-hover));
2611
+ }
3394
2612
  .hover\:\!color-bg-brand:hover {
3395
- background-color: hsl(var(--color-bg-brand)) !important;
3396
- }
2613
+ background-color: hsl(var(--color-bg-brand)) !important;
2614
+ }
3397
2615
  .hover\:color-bg-brand-hover:hover {
3398
- background-color: hsl(var(--color-bg-brand-hover));
3399
- }
2616
+ background-color: hsl(var(--color-bg-brand-hover));
2617
+ }
3400
2618
  .hover\:color-button-default-hover:hover {
3401
- background-color: hsl(var(--color-button-default-hover));
3402
- }
2619
+ background-color: hsl(var(--color-button-default-hover));
2620
+ }
3403
2621
  .hover\:color-button-secondary-hover:hover {
3404
- background-color: hsl(var(--color-button-secondary-hover));
3405
- }
2622
+ background-color: hsl(var(--color-button-secondary-hover));
2623
+ }
3406
2624
  .hover\:color-button-danger-hover:hover {
3407
- background-color: hsl(var(--color-button-danger-hover));
3408
- }
2625
+ background-color: hsl(var(--color-button-danger-hover));
2626
+ }
3409
2627
  .hover\:\!color-button-floating-hover:hover {
3410
- background-color: hsl(var(--color-button-floating-hover)) !important;
3411
- }
2628
+ background-color: hsl(var(--color-button-floating-hover)) !important;
2629
+ }
3412
2630
  .hover\:color-border-hover:hover {
3413
- border-color: hsl(var(--color-border-hover));
3414
- }
2631
+ border-color: hsl(var(--color-border-hover));
2632
+ }
3415
2633
  .focus\:color-bg-brand:focus {
3416
- background-color: hsl(var(--color-bg-brand));
3417
- }
2634
+ background-color: hsl(var(--color-bg-brand));
2635
+ }
3418
2636
  .focus-visible\:color-border-hover:focus-visible {
3419
- border-color: hsl(var(--color-border-hover));
3420
- }
2637
+ border-color: hsl(var(--color-border-hover));
2638
+ }
3421
2639
  .disabled\:color-text-disabled:disabled {
3422
- color: hsl(var(--color-text-disabled));
3423
- }
2640
+ color: hsl(var(--color-text-disabled));
2641
+ }
3424
2642
  .disabled\:color-bg-disabled:disabled {
3425
- background-color: hsl(var(--color-bg-disabled));
3426
- }
2643
+ background-color: hsl(var(--color-bg-disabled));
2644
+ }
3427
2645
  .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
- }
2646
+ background-color: hsl(var(--color-button-disabled)) !important;
2647
+ border-color: hsl(var(--color-button-disabled)) !important;
2648
+ color: hsl(var(--color-text-disabled)) !important;
2649
+ }
3432
2650
  .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
- }
2651
+ background-color: hsl(var(--color-button-disabled));
2652
+ border-color: hsl(var(--color-button-disabled));
2653
+ color: hsl(var(--color-text-disabled));
2654
+ }
3437
2655
  .disabled\:color-border-disabled:disabled {
3438
- border-color: hsl(var(--color-border-disabled));
3439
- }
2656
+ border-color: hsl(var(--color-border-disabled));
2657
+ }
3440
2658
  .aria-selected\:color-text-default[aria-selected="true"] {
3441
- color: hsl(var(--color-text-default));
3442
- }
2659
+ color: hsl(var(--color-text-default));
2660
+ }
3443
2661
  .aria-selected\:color-bg-default-selected[aria-selected="true"] {
3444
- background-color: hsl(var(--color-bg-default-selected));
3445
- }
2662
+ background-color: hsl(var(--color-bg-default-selected));
2663
+ }
3446
2664
  .aria-selected\:color-bg-secondary[aria-selected="true"] {
3447
- background-color: hsl(var(--color-bg-secondary));
3448
- }
2665
+ background-color: hsl(var(--color-bg-secondary));
2666
+ }
3449
2667
  .data-\[highlighted\]\:color-text-default[data-highlighted] {
3450
- color: hsl(var(--color-text-default));
3451
- }
2668
+ color: hsl(var(--color-text-default));
2669
+ }
3452
2670
  .data-\[state\=active\]\:color-text-default[data-state="active"] {
3453
- color: hsl(var(--color-text-default));
3454
- }
2671
+ color: hsl(var(--color-text-default));
2672
+ }
3455
2673
  .data-\[state\=open\]\:color-text-default[data-state="open"] {
3456
- color: hsl(var(--color-text-default));
3457
- }
2674
+ color: hsl(var(--color-text-default));
2675
+ }
3458
2676
  .data-\[disabled\]\:color-text-disabled[data-disabled] {
3459
- color: hsl(var(--color-text-disabled));
3460
- }
2677
+ color: hsl(var(--color-text-disabled));
2678
+ }
3461
2679
  .data-\[highlighted\]\:color-bg-default-hover[data-highlighted] {
3462
- background-color: hsl(var(--color-bg-default-hover));
3463
- }
2680
+ background-color: hsl(var(--color-bg-default-hover));
2681
+ }
3464
2682
  .data-\[state\=open\]\:color-bg-default-hover[data-state="open"] {
3465
- background-color: hsl(var(--color-bg-default-hover));
3466
- }
2683
+ background-color: hsl(var(--color-bg-default-hover));
2684
+ }
3467
2685
  .data-\[state\=unchecked\]\:color-bg-default-hover[data-state="unchecked"] {
3468
- background-color: hsl(var(--color-bg-default-hover));
3469
- }
2686
+ background-color: hsl(var(--color-bg-default-hover));
2687
+ }
3470
2688
  .data-\[highlighted\]\:color-bg-default-selected[data-highlighted] {
3471
- background-color: hsl(var(--color-bg-default-selected));
3472
- }
2689
+ background-color: hsl(var(--color-bg-default-selected));
2690
+ }
3473
2691
  .data-\[state\=open\]\:color-bg-default-selected[data-state="open"] {
3474
- background-color: hsl(var(--color-bg-default-selected));
3475
- }
2692
+ background-color: hsl(var(--color-bg-default-selected));
2693
+ }
3476
2694
  .data-\[state\=selected\]\:color-bg-default-selected[data-state="selected"] {
3477
- background-color: hsl(var(--color-bg-default-selected));
3478
- }
2695
+ background-color: hsl(var(--color-bg-default-selected));
2696
+ }
3479
2697
  .data-\[state\=checked\]\:color-bg-brand-hover[data-state="checked"] {
3480
- background-color: hsl(var(--color-bg-brand-hover));
3481
- }
2698
+ background-color: hsl(var(--color-bg-brand-hover));
2699
+ }
3482
2700
  .data-\[state\=active\]\:color-border-active[data-state="active"] {
3483
- border-color: hsl(var(--color-border-active));
3484
- }
2701
+ border-color: hsl(var(--color-border-active));
2702
+ }
2703
+ .data-\[state\=unchecked\]\:toggle-default[data-state="unchecked"] {
2704
+ background-color: hsl(var(--color-bg-disabled));
2705
+ }
2706
+ .data-\[state\=checked\]\:toggle-active[data-state="checked"] {
2707
+ background-color: hsl(var(--color-bg-brand));
2708
+ }
3485
2709
  .data-\[state\=unchecked\]\:hover\:enabled\:color-bg-default-hover:enabled:hover[data-state="unchecked"] {
3486
- background-color: hsl(var(--color-bg-default-hover));
3487
- }
2710
+ background-color: hsl(var(--color-bg-default-hover));
2711
+ }
3488
2712
  .data-\[state\=checked\]\:hover\:enabled\:color-bg-brand-hover:enabled:hover[data-state="checked"] {
3489
- background-color: hsl(var(--color-bg-brand-hover));
3490
- }
2713
+ background-color: hsl(var(--color-bg-brand-hover));
2714
+ }
2715
+ .data-\[state\=checked\]\:disabled\:toggle-default:disabled[data-state="checked"] {
2716
+ background-color: hsl(var(--color-bg-disabled));
2717
+ }
3491
2718
  @media (min-width: 1024px) {
3492
2719
 
3493
2720
  .lg\:\!text-heading-2xlg {
@@ -3504,32 +2731,23 @@ textarea:is(:-webkit-autofill, :autofill) {
3504
2731
  }
3505
2732
  }
3506
2733
  .\[\&\>svg\]\:color-text-default>svg {
3507
- color: hsl(var(--color-text-default));
3508
- }
2734
+ color: hsl(var(--color-text-default));
2735
+ }
3509
2736
  .\[\&\>svg\]\:color-text-danger>svg {
3510
- color: hsl(var(--color-text-danger));
3511
- }
2737
+ color: hsl(var(--color-text-danger));
2738
+ }
3512
2739
  .\[\&_\[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
- }
2740
+ font-family: system-ui;
2741
+ font-size: 12px;
2742
+ font-weight: 400;
2743
+ line-height: 16px;
2744
+ }
3518
2745
  .\[\&_\[cmdk-group-heading\]\]\:color-text-disabled [cmdk-group-heading] {
3519
- color: hsl(var(--color-text-disabled));
3520
- }
2746
+ color: hsl(var(--color-text-disabled));
2747
+ }
3521
2748
  .\[\&_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
- }
2749
+ border-color: hsl(var(--color-border-default));
2750
+ }
3533
2751
  .file\:border-0::file-selector-button {
3534
2752
  border-width: 0px;
3535
2753
  }
@@ -3548,608 +2766,1352 @@ textarea:is(:-webkit-autofill, :autofill) {
3548
2766
  .hover\:cursor-pointer:hover {
3549
2767
  cursor: pointer;
3550
2768
  }
3551
- .hover\:\!border-transparent:hover {
3552
- border-color: transparent !important;
2769
+ .hover\:\!border-transparent:hover {
2770
+ border-color: transparent !important;
2771
+ }
2772
+ .hover\:bg-inherit:hover {
2773
+ background-color: inherit;
2774
+ }
2775
+ .hover\:bg-transparent:hover {
2776
+ background-color: transparent;
2777
+ }
2778
+ .hover\:opacity-90:hover {
2779
+ opacity: 0.9;
2780
+ }
2781
+ .hover\:brightness-95:hover {
2782
+ --tw-brightness: brightness(.95);
2783
+ 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);
2784
+ }
2785
+ .focus\:shadow-none:focus {
2786
+ --tw-shadow: 0 0 #0000;
2787
+ --tw-shadow-colored: 0 0 #0000;
2788
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2789
+ }
2790
+ .focus\:outline-none:focus {
2791
+ outline: 2px solid transparent;
2792
+ outline-offset: 2px;
2793
+ }
2794
+ .focus\:ring-0:focus {
2795
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2796
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2797
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2798
+ }
2799
+ .focus\:ring-2:focus {
2800
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2801
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2802
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2803
+ }
2804
+ .focus\:ring-focused:focus {
2805
+ --tw-ring-color: hsl(var(--focused));
2806
+ }
2807
+ .focus\:ring-offset-2:focus {
2808
+ --tw-ring-offset-width: 2px;
2809
+ }
2810
+ .focus-visible\:outline-none:focus-visible {
2811
+ outline: 2px solid transparent;
2812
+ outline-offset: 2px;
2813
+ }
2814
+ .focus-visible\:ring-1:focus-visible {
2815
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2816
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2817
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2818
+ }
2819
+ .focus-visible\:ring-2:focus-visible {
2820
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2821
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2822
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2823
+ }
2824
+ .focus-visible\:ring-focused:focus-visible {
2825
+ --tw-ring-color: hsl(var(--focused));
2826
+ }
2827
+ .focus-visible\:ring-offset-2:focus-visible {
2828
+ --tw-ring-offset-width: 2px;
2829
+ }
2830
+ .focus-visible\:ring-offset-white:focus-visible {
2831
+ --tw-ring-offset-color: #fff;
2832
+ }
2833
+ .disabled\:pointer-events-none:disabled {
2834
+ pointer-events: none;
2835
+ }
2836
+ .disabled\:cursor-not-allowed:disabled {
2837
+ cursor: not-allowed;
2838
+ }
2839
+ .disabled\:opacity-50:disabled {
2840
+ opacity: 0.5;
2841
+ }
2842
+ .group:hover .group-hover\:visible {
2843
+ visibility: visible;
2844
+ }
2845
+ .group:hover .group-hover\:opacity-100 {
2846
+ opacity: 1;
2847
+ }
2848
+ .peer:checked ~ .peer-checked\:block {
2849
+ display: block;
2850
+ }
2851
+ .peer:disabled ~ .peer-disabled\:cursor-not-allowed {
2852
+ cursor: not-allowed;
2853
+ }
2854
+ .peer:disabled ~ .peer-disabled\:opacity-70 {
2855
+ opacity: 0.7;
2856
+ }
2857
+ .aria-selected\:opacity-100[aria-selected="true"] {
2858
+ opacity: 1;
2859
+ }
2860
+ .data-\[disabled\]\:pointer-events-none[data-disabled] {
2861
+ pointer-events: none;
2862
+ }
2863
+ .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
2864
+ --tw-translate-y: 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\=left\]\:-translate-x-1[data-side="left"] {
2868
+ --tw-translate-x: -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-\[side\=right\]\:translate-x-1[data-side="right"] {
2872
+ --tw-translate-x: 0.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-\[side\=top\]\:-translate-y-1[data-side="top"] {
2876
+ --tw-translate-y: -0.25rem;
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-\[state\=checked\]\:translate-x-5[data-state="checked"] {
2880
+ --tw-translate-x: 1.25rem;
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-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
2884
+ --tw-translate-x: 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\=cancel\]\:translate-x-0[data-swipe="cancel"] {
2888
+ --tw-translate-x: 0px;
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\=cancel\]\:translate-y-0[data-swipe="cancel"] {
2892
+ --tw-translate-y: 0px;
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\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe="end"] {
2896
+ --tw-translate-x: var(--radix-toast-swipe-end-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\=end\]\:translate-y-\[var\(--radix-toast-swipe-end-y\)\][data-swipe="end"] {
2900
+ --tw-translate-y: var(--radix-toast-swipe-end-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
+ .data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe="move"] {
2904
+ --tw-translate-x: var(--radix-toast-swipe-move-x);
2905
+ 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));
2906
+ }
2907
+ .data-\[swipe\=move\]\:translate-y-\[var\(--radix-toast-swipe-move-y\)\][data-swipe="move"] {
2908
+ --tw-translate-y: var(--radix-toast-swipe-move-y);
2909
+ 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));
2910
+ }
2911
+ @keyframes accordion-up {
2912
+
2913
+ from {
2914
+ height: var(--radix-accordion-content-height);
2915
+ }
2916
+
2917
+ to {
2918
+ height: 0;
2919
+ }
2920
+ }
2921
+ .data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
2922
+ animation: accordion-up 0.2s ease-out;
2923
+ }
2924
+ @keyframes accordion-down {
2925
+
2926
+ from {
2927
+ height: 0;
2928
+ }
2929
+
2930
+ to {
2931
+ height: var(--radix-accordion-content-height);
2932
+ }
2933
+ }
2934
+ .data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
2935
+ animation: accordion-down 0.2s ease-out;
2936
+ }
2937
+ .data-\[state\=active\]\:border-b-2[data-state="active"] {
2938
+ border-bottom-width: 2px;
2939
+ }
2940
+ .data-\[state\=inactive\]\:border-transparent[data-state="inactive"] {
2941
+ border-color: transparent;
2942
+ }
2943
+ .data-\[swipe\=move\]\:transition-none[data-swipe="move"] {
2944
+ transition-property: none;
2945
+ }
2946
+ .data-\[state\=closed\]\:duration-300[data-state="closed"] {
2947
+ transition-duration: 300ms;
2948
+ }
2949
+ .data-\[state\=open\]\:duration-300[data-state="open"] {
2950
+ transition-duration: 300ms;
2951
+ }
2952
+ .data-\[state\=open\]\:duration-500[data-state="open"] {
2953
+ transition-duration: 500ms;
2954
+ }
2955
+ .data-\[state\=open\]\:animate-in[data-state="open"] {
2956
+ animation-name: enter;
2957
+ animation-duration: 150ms;
2958
+ --tw-enter-opacity: initial;
2959
+ --tw-enter-scale: initial;
2960
+ --tw-enter-rotate: initial;
2961
+ --tw-enter-translate-x: initial;
2962
+ --tw-enter-translate-y: initial;
2963
+ }
2964
+ .data-\[state\=closed\]\:animate-out[data-state="closed"] {
2965
+ animation-name: exit;
2966
+ animation-duration: 150ms;
2967
+ --tw-exit-opacity: initial;
2968
+ --tw-exit-scale: initial;
2969
+ --tw-exit-rotate: initial;
2970
+ --tw-exit-translate-x: initial;
2971
+ --tw-exit-translate-y: initial;
2972
+ }
2973
+ .data-\[swipe\=end\]\:animate-out[data-swipe="end"] {
2974
+ animation-name: exit;
2975
+ animation-duration: 150ms;
2976
+ --tw-exit-opacity: initial;
2977
+ --tw-exit-scale: initial;
2978
+ --tw-exit-rotate: initial;
2979
+ --tw-exit-translate-x: initial;
2980
+ --tw-exit-translate-y: initial;
2981
+ }
2982
+ .data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
2983
+ --tw-exit-opacity: 0;
2984
+ }
2985
+ .data-\[state\=closed\]\:fade-out-80[data-state="closed"] {
2986
+ --tw-exit-opacity: 0.8;
2987
+ }
2988
+ .data-\[state\=open\]\:fade-in-0[data-state="open"] {
2989
+ --tw-enter-opacity: 0;
2990
+ }
2991
+ .data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
2992
+ --tw-exit-scale: .95;
3553
2993
  }
3554
- .hover\:bg-inherit:hover {
3555
- background-color: inherit;
2994
+ .data-\[state\=open\]\:zoom-in-95[data-state="open"] {
2995
+ --tw-enter-scale: .95;
3556
2996
  }
3557
- .hover\:bg-transparent:hover {
3558
- background-color: transparent;
2997
+ .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
2998
+ --tw-enter-translate-y: -0.5rem;
3559
2999
  }
3560
- .hover\:opacity-90:hover {
3561
- opacity: 0.9;
3000
+ .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
3001
+ --tw-enter-translate-x: 0.5rem;
3562
3002
  }
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);
3003
+ .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
3004
+ --tw-enter-translate-x: -0.5rem;
3566
3005
  }
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);
3006
+ .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
3007
+ --tw-enter-translate-y: 0.5rem;
3571
3008
  }
3572
- .focus\:outline-none:focus {
3573
- outline: 2px solid transparent;
3574
- outline-offset: 2px;
3009
+ .data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
3010
+ --tw-exit-translate-y: 100%;
3575
3011
  }
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);
3012
+ .data-\[state\=closed\]\:slide-out-to-bottom-\[calc\(100\%\+16px\*2\)\][data-state="closed"] {
3013
+ --tw-exit-translate-y: calc(100% + 16px * 2);
3580
3014
  }
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);
3015
+ .data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
3016
+ --tw-exit-translate-x: -100%;
3585
3017
  }
3586
- .focus\:ring-focused:focus {
3587
- --tw-ring-color: hsl(var(--focused));
3018
+ .data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
3019
+ --tw-exit-translate-x: -50%;
3588
3020
  }
3589
- .focus\:ring-offset-2:focus {
3590
- --tw-ring-offset-width: 2px;
3021
+ .data-\[state\=closed\]\:slide-out-to-left-\[calc\(100\%\+16px\*2\)\][data-state="closed"] {
3022
+ --tw-exit-translate-x: -calc(100% + 16px * 2);
3591
3023
  }
3592
- .focus-visible\:outline-none:focus-visible {
3593
- outline: 2px solid transparent;
3594
- outline-offset: 2px;
3024
+ .data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
3025
+ --tw-exit-translate-x: 100%;
3595
3026
  }
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);
3027
+ .data-\[state\=closed\]\:slide-out-to-right-\[calc\(100\%\+16px\*2\)\][data-state="closed"] {
3028
+ --tw-exit-translate-x: calc(100% + 16px * 2);
3600
3029
  }
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);
3030
+ .data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
3031
+ --tw-exit-translate-y: -100%;
3605
3032
  }
3606
- .focus-visible\:ring-focused:focus-visible {
3607
- --tw-ring-color: hsl(var(--focused));
3033
+ .data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
3034
+ --tw-exit-translate-y: -48%;
3608
3035
  }
3609
- .focus-visible\:ring-offset-2:focus-visible {
3610
- --tw-ring-offset-width: 2px;
3036
+ .data-\[state\=closed\]\:slide-out-to-top-\[calc\(100\%\+16px\*2\)\][data-state="closed"] {
3037
+ --tw-exit-translate-y: -calc(100% + 16px * 2);
3611
3038
  }
3612
- .focus-visible\:ring-offset-white:focus-visible {
3613
- --tw-ring-offset-color: #fff;
3039
+ .data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
3040
+ --tw-enter-translate-y: 100%;
3614
3041
  }
3615
- .disabled\:pointer-events-none:disabled {
3616
- pointer-events: none;
3042
+ .data-\[state\=open\]\:slide-in-from-bottom-\[calc\(100\%\+16px\*2\)\][data-state="open"] {
3043
+ --tw-enter-translate-y: calc(100% + 16px * 2);
3617
3044
  }
3618
- .disabled\:cursor-not-allowed:disabled {
3619
- cursor: not-allowed;
3045
+ .data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
3046
+ --tw-enter-translate-x: -100%;
3620
3047
  }
3621
- .disabled\:opacity-50:disabled {
3622
- opacity: 0.5;
3048
+ .data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
3049
+ --tw-enter-translate-x: -50%;
3623
3050
  }
3624
- .group:hover .group-hover\:visible {
3625
- visibility: visible;
3051
+ .data-\[state\=open\]\:slide-in-from-left-\[calc\(100\%\+16px\*2\)\][data-state="open"] {
3052
+ --tw-enter-translate-x: -calc(100% + 16px * 2);
3626
3053
  }
3627
- .group:hover .group-hover\:opacity-100 {
3628
- opacity: 1;
3054
+ .data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
3055
+ --tw-enter-translate-x: 100%;
3629
3056
  }
3630
- .peer:checked ~ .peer-checked\:block {
3631
- display: block;
3057
+ .data-\[state\=open\]\:slide-in-from-right-\[calc\(100\%\+16px\*2\)\][data-state="open"] {
3058
+ --tw-enter-translate-x: calc(100% + 16px * 2);
3632
3059
  }
3633
- .peer:disabled ~ .peer-disabled\:cursor-not-allowed {
3634
- cursor: not-allowed;
3060
+ .data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
3061
+ --tw-enter-translate-y: -100%;
3635
3062
  }
3636
- .peer:disabled ~ .peer-disabled\:opacity-70 {
3637
- opacity: 0.7;
3063
+ .data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
3064
+ --tw-enter-translate-y: -48%;
3638
3065
  }
3639
- .aria-selected\:opacity-100[aria-selected="true"] {
3640
- opacity: 1;
3066
+ .data-\[state\=open\]\:slide-in-from-top-\[calc\(100\%\+16px\*2\)\][data-state="open"] {
3067
+ --tw-enter-translate-y: -calc(100% + 16px * 2);
3641
3068
  }
3642
- .data-\[disabled\]\:pointer-events-none[data-disabled] {
3643
- pointer-events: none;
3069
+ .data-\[state\=closed\]\:duration-300[data-state="closed"] {
3070
+ animation-duration: 300ms;
3644
3071
  }
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));
3072
+ .data-\[state\=open\]\:duration-300[data-state="open"] {
3073
+ animation-duration: 300ms;
3648
3074
  }
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));
3075
+ .data-\[state\=open\]\:duration-500[data-state="open"] {
3076
+ animation-duration: 500ms;
3652
3077
  }
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));
3078
+ .data-\[highlighted\]\:hover\:bg-\[hsl\(var\(--color-bg-default-hover\)\)\]:hover[data-highlighted] {
3079
+ background-color: hsl(var(--color-bg-default-hover));
3656
3080
  }
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));
3081
+ .data-\[highlighted\]\:hover\:\!outline-0:hover[data-highlighted] {
3082
+ outline-width: 0px !important;
3660
3083
  }
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));
3084
+ .data-\[highlighted\]\:hover\:outline-0:hover[data-highlighted] {
3085
+ outline-width: 0px;
3664
3086
  }
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));
3087
+ .data-\[highlighted\]\:hover\:\!outline-transparent:hover[data-highlighted] {
3088
+ outline-color: transparent !important;
3668
3089
  }
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));
3090
+ .data-\[highlighted\]\:focus-visible\:outline:focus-visible[data-highlighted] {
3091
+ outline-style: solid;
3672
3092
  }
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));
3093
+ .data-\[highlighted\]\:focus-visible\:outline-2:focus-visible[data-highlighted] {
3094
+ outline-width: 2px;
3676
3095
  }
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));
3096
+ .data-\[highlighted\]\:focus-visible\:outline-\[hsl\(var\(--color-border-focused\)\)\]:focus-visible[data-highlighted] {
3097
+ outline-color: hsl(var(--color-border-focused));
3680
3098
  }
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));
3099
+ .dark\:\!text-\[\#363B3F\]:is(.dark *) {
3100
+ --tw-text-opacity: 1 !important;
3101
+ color: rgb(54 59 63 / var(--tw-text-opacity, 1)) !important;
3684
3102
  }
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));
3103
+ .dark\:text-\[\#363B3F\]:is(.dark *) {
3104
+ --tw-text-opacity: 1;
3105
+ color: rgb(54 59 63 / var(--tw-text-opacity, 1));
3688
3106
  }
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));
3107
+ @media (min-width: 640px) {
3108
+
3109
+ .sm\:max-w-fit {
3110
+ max-width: -moz-fit-content;
3111
+ max-width: fit-content;
3112
+ }
3113
+
3114
+ .sm\:max-w-sm {
3115
+ max-width: 24rem;
3116
+ }
3117
+
3118
+ .sm\:grid-cols-1 {
3119
+ grid-template-columns: repeat(1, minmax(0, 1fr));
3120
+ }
3121
+
3122
+ .sm\:flex-row {
3123
+ flex-direction: row;
3124
+ }
3125
+
3126
+ .sm\:flex-col {
3127
+ flex-direction: column;
3128
+ }
3129
+
3130
+ .sm\:justify-end {
3131
+ justify-content: flex-end;
3132
+ }
3133
+
3134
+ .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
3135
+ --tw-space-x-reverse: 0;
3136
+ margin-right: calc(0.5rem * var(--tw-space-x-reverse));
3137
+ margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
3138
+ }
3139
+
3140
+ .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
3141
+ --tw-space-y-reverse: 0;
3142
+ margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
3143
+ margin-bottom: calc(0px * var(--tw-space-y-reverse));
3144
+ }
3145
+
3146
+ .sm\:rounded-lg {
3147
+ border-radius: var(--radius);
3148
+ }
3692
3149
  }
3693
- @keyframes accordion-up {
3150
+ @media (min-width: 768px) {
3151
+
3152
+ .md\:\!right-4 {
3153
+ right: 1rem !important;
3154
+ }
3155
+
3156
+ .md\:block {
3157
+ display: block;
3158
+ }
3159
+
3160
+ .md\:w-\[384px\] {
3161
+ width: 384px;
3162
+ }
3163
+
3164
+ .md\:w-\[60vw\] {
3165
+ width: 60vw;
3166
+ }
3167
+
3168
+ .md\:w-\[80\%\] {
3169
+ width: 80%;
3170
+ }
3171
+
3172
+ .md\:w-auto {
3173
+ width: auto;
3174
+ }
3175
+
3176
+ .md\:max-w-min {
3177
+ max-width: -moz-min-content;
3178
+ max-width: min-content;
3179
+ }
3694
3180
 
3695
- from {
3696
- height: var(--radix-accordion-content-height);
3181
+ .md\:grid-cols-2 {
3182
+ grid-template-columns: repeat(2, minmax(0, 1fr));
3697
3183
  }
3698
3184
 
3699
- to {
3700
- height: 0;
3185
+ .md\:flex-row {
3186
+ flex-direction: row;
3701
3187
  }
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
3188
 
3708
- from {
3709
- height: 0;
3189
+ .md\:justify-start {
3190
+ justify-content: flex-start;
3710
3191
  }
3711
3192
 
3712
- to {
3713
- height: var(--radix-accordion-content-height);
3193
+ .md\:gap-8 {
3194
+ gap: 2rem;
3195
+ }
3196
+
3197
+ .md\:p-24 {
3198
+ padding: 6rem;
3199
+ }
3200
+
3201
+ .md\:p-8 {
3202
+ padding: 2rem;
3714
3203
  }
3715
3204
  }
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;
3205
+ @media (min-width: 1024px) {
3206
+
3207
+ .lg\:\!mt-0 {
3208
+ margin-top: 0px !important;
3209
+ }
3210
+
3211
+ .lg\:mb-1 {
3212
+ margin-bottom: 0.25rem;
3213
+ }
3214
+
3215
+ .lg\:block {
3216
+ display: block;
3217
+ }
3218
+
3219
+ .lg\:flex {
3220
+ display: flex;
3221
+ }
3222
+
3223
+ .lg\:hidden {
3224
+ display: none;
3225
+ }
3226
+
3227
+ .lg\:h-12 {
3228
+ height: 3rem;
3229
+ }
3230
+
3231
+ .lg\:w-3\/4 {
3232
+ width: 75%;
3233
+ }
3234
+
3235
+ .lg\:w-\[180px\] {
3236
+ width: 180px;
3237
+ }
3238
+
3239
+ .lg\:w-\[452px\] {
3240
+ width: 452px;
3241
+ }
3242
+
3243
+ .lg\:w-auto {
3244
+ width: auto;
3245
+ }
3246
+
3247
+ .lg\:w-fit {
3248
+ width: -moz-fit-content;
3249
+ width: fit-content;
3250
+ }
3251
+
3252
+ .lg\:min-w-\[418px\] {
3253
+ min-width: 418px;
3254
+ }
3255
+
3256
+ .lg\:min-w-\[420px\] {
3257
+ min-width: 420px;
3258
+ }
3259
+
3260
+ .lg\:min-w-\[884px\] {
3261
+ min-width: 884px;
3262
+ }
3263
+
3264
+ .lg\:\!max-w-fit {
3265
+ max-width: -moz-fit-content !important;
3266
+ max-width: fit-content !important;
3267
+ }
3268
+
3269
+ .lg\:grid-cols-3 {
3270
+ grid-template-columns: repeat(3, minmax(0, 1fr));
3271
+ }
3272
+
3273
+ .lg\:text-wrap {
3274
+ text-wrap: wrap;
3275
+ }
3276
+
3277
+ .lg\:py-4 {
3278
+ padding-top: 1rem;
3279
+ padding-bottom: 1rem;
3280
+ }
3787
3281
  }
3788
- .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
3789
- --tw-enter-translate-y: 0.5rem;
3282
+ .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
3283
+ -webkit-appearance: none;
3284
+ appearance: none;
3790
3285
  }
3791
- .data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
3792
- --tw-exit-translate-y: 100%;
3286
+ .\[\&\:has\(\>\.day-range-end\)\]\:rounded-r-md:has(>.day-range-end) {
3287
+ border-top-right-radius: calc(var(--radius) - 2px);
3288
+ border-bottom-right-radius: calc(var(--radius) - 2px);
3793
3289
  }
3794
- .data-\[state\=closed\]\:slide-out-to-bottom-\[calc\(100\%\+16px\*2\)\][data-state="closed"] {
3795
- --tw-exit-translate-y: calc(100% + 16px * 2);
3290
+ .\[\&\:has\(\>\.day-range-start\)\]\:rounded-l-md:has(>.day-range-start) {
3291
+ border-top-left-radius: calc(var(--radius) - 2px);
3292
+ border-bottom-left-radius: calc(var(--radius) - 2px);
3796
3293
  }
3797
- .data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
3798
- --tw-exit-translate-x: -100%;
3294
+ .\[\&\:has\(\[aria-selected\]\)\]\:rounded-md:has([aria-selected]) {
3295
+ border-radius: calc(var(--radius) - 2px);
3799
3296
  }
3800
- .data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
3801
- --tw-exit-translate-x: -50%;
3297
+ .first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:has([aria-selected]):first-child {
3298
+ border-top-left-radius: calc(var(--radius) - 2px);
3299
+ border-bottom-left-radius: calc(var(--radius) - 2px);
3802
3300
  }
3803
- .data-\[state\=closed\]\:slide-out-to-left-\[calc\(100\%\+16px\*2\)\][data-state="closed"] {
3804
- --tw-exit-translate-x: -calc(100% + 16px * 2);
3301
+ .last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:has([aria-selected]):last-child {
3302
+ border-top-right-radius: calc(var(--radius) - 2px);
3303
+ border-bottom-right-radius: calc(var(--radius) - 2px);
3805
3304
  }
3806
- .data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
3807
- --tw-exit-translate-x: 100%;
3305
+ .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
3306
+ padding-right: 0px;
3808
3307
  }
3809
- .data-\[state\=closed\]\:slide-out-to-right-\[calc\(100\%\+16px\*2\)\][data-state="closed"] {
3810
- --tw-exit-translate-x: calc(100% + 16px * 2);
3308
+ .\[\&\>span\]\:line-clamp-1>span {
3309
+ overflow: hidden;
3310
+ display: -webkit-box;
3311
+ -webkit-box-orient: vertical;
3312
+ -webkit-line-clamp: 1;
3811
3313
  }
3812
- .data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
3813
- --tw-exit-translate-y: -100%;
3314
+ .\[\&\>tr\]\:last\:border-b-0:last-child>tr {
3315
+ border-bottom-width: 0px;
3814
3316
  }
3815
- .data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
3816
- --tw-exit-translate-y: -48%;
3317
+ .\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
3318
+ --tw-rotate: 180deg;
3319
+ 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));
3817
3320
  }
3818
- .data-\[state\=closed\]\:slide-out-to-top-\[calc\(100\%\+16px\*2\)\][data-state="closed"] {
3819
- --tw-exit-translate-y: -calc(100% + 16px * 2);
3321
+ .\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
3322
+ padding-left: 0.5rem;
3323
+ padding-right: 0.5rem;
3820
3324
  }
3821
- .data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
3822
- --tw-enter-translate-y: 100%;
3325
+ .\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
3326
+ padding-top: 0.375rem;
3327
+ padding-bottom: 0.375rem;
3823
3328
  }
3824
- .data-\[state\=open\]\:slide-in-from-bottom-\[calc\(100\%\+16px\*2\)\][data-state="open"] {
3825
- --tw-enter-translate-y: calc(100% + 16px * 2);
3329
+ .\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
3330
+ font-weight: 500;
3826
3331
  }
3827
- .data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
3828
- --tw-enter-translate-x: -100%;
3332
+ .\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
3333
+ padding-top: 0px;
3829
3334
  }
3830
- .data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
3831
- --tw-enter-translate-x: -50%;
3335
+ .\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
3336
+ padding-left: 0.5rem;
3337
+ padding-right: 0.5rem;
3832
3338
  }
3833
- .data-\[state\=open\]\:slide-in-from-left-\[calc\(100\%\+16px\*2\)\][data-state="open"] {
3834
- --tw-enter-translate-x: -calc(100% + 16px * 2);
3339
+ .\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
3340
+ height: 1.25rem;
3835
3341
  }
3836
- .data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
3837
- --tw-enter-translate-x: 100%;
3342
+ .\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
3343
+ width: 1.25rem;
3838
3344
  }
3839
- .data-\[state\=open\]\:slide-in-from-right-\[calc\(100\%\+16px\*2\)\][data-state="open"] {
3840
- --tw-enter-translate-x: calc(100% + 16px * 2);
3345
+ .\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
3346
+ height: 3rem;
3841
3347
  }
3842
- .data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
3843
- --tw-enter-translate-y: -100%;
3348
+ .\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
3349
+ padding-left: 0.5rem;
3350
+ padding-right: 0.5rem;
3844
3351
  }
3845
- .data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
3846
- --tw-enter-translate-y: -48%;
3352
+ .\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
3353
+ padding-top: 0.75rem;
3354
+ padding-bottom: 0.75rem;
3847
3355
  }
3848
- .data-\[state\=open\]\:slide-in-from-top-\[calc\(100\%\+16px\*2\)\][data-state="open"] {
3849
- --tw-enter-translate-y: -calc(100% + 16px * 2);
3356
+ .\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
3357
+ height: 1.25rem;
3850
3358
  }
3851
- .data-\[state\=closed\]\:duration-300[data-state="closed"] {
3852
- animation-duration: 300ms;
3359
+ .\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
3360
+ width: 1.25rem;
3853
3361
  }
3854
- .data-\[state\=open\]\:duration-300[data-state="open"] {
3855
- animation-duration: 300ms;
3362
+ .\[\&_p\]\:leading-relaxed p {
3363
+ line-height: 1.625;
3856
3364
  }
3857
- .data-\[state\=open\]\:duration-500[data-state="open"] {
3858
- animation-duration: 500ms;
3365
+ .\[\&_svg\]\:invisible svg {
3366
+ visibility: hidden;
3859
3367
  }
3860
- .data-\[highlighted\]\:hover\:bg-\[hsl\(var\(--color-bg-default-hover\)\)\]:hover[data-highlighted] {
3861
- background-color: hsl(var(--color-bg-default-hover));
3368
+ .\[\&_tr\:last-child\]\:border-0 tr:last-child {
3369
+ border-width: 0px;
3862
3370
  }
3863
- .data-\[highlighted\]\:hover\:\!outline-0:hover[data-highlighted] {
3864
- outline-width: 0px !important;
3371
+ .\[\&_tr\]\:border-b tr {
3372
+ border-bottom-width: 1px;
3865
3373
  }
3866
- .data-\[highlighted\]\:hover\:outline-0:hover[data-highlighted] {
3867
- outline-width: 0px;
3374
+ :root {
3375
+ --focused: 260, 100%, 52%, 1; /* Blue-700 */
3376
+ --radius: 0.5rem;
3377
+
3378
+ /* Button */
3379
+ --color-button-default: 0, 0%, 0%, 1; /* Black */
3380
+ --color-button-default-hover: 207, 8%, 23%, 1; /* Gray-950 */
3381
+ --color-button-secondary: 0, 0%, 100%, 1; /* White */
3382
+ --color-button-secondary-hover: 200, 13%, 95%, 1; /* Gray-100 */
3383
+ --color-button-disabled: 195, 10%, 92%, 1; /* Gray-200 */
3384
+ --color-button-danger: 354, 96%, 59%, 1; /* Red-500 */
3385
+ --color-button-danger-hover: 354, 84%, 42%, 1; /* Red-700 */
3386
+ --color-button-floating: 0, 0%, 100%, 1; /* White */
3387
+ --color-button-floating-hover: 200, 13%, 95%, 1; /* Gray-100 */
3388
+
3389
+ /* Text */
3390
+ --color-text-default: 207, 8%, 23%, 1; /* Gray-950 */
3391
+ --color-text-secondary: 208, 8%, 50%, 1; /* Gray-700 */
3392
+ --color-text-disabled: 206, 9%, 66%, 1; /* Gray-500 */
3393
+ --color-text-danger: 354, 96%, 59%, 1; /* Red-500 */
3394
+ --color-text-success: 127, 69%, 29%, 1; /* Green-700 */
3395
+ --color-text-inverse: 0, 0%, 100%, 1; /* White */
3396
+ --color-text-link: 260, 100%, 52%, 1; /* Blue-700 */
3397
+ --color-text-on-brand: 207, 8%, 23%, 1; /* Gray-950 */
3398
+
3399
+ /* Background */
3400
+ --color-bg-default: 0, 0%, 100%, 1; /* White */
3401
+ --color-bg-default-hover: 200, 13%, 95%, 1; /* Gray-100 */
3402
+ --color-bg-default-active: 52, 100%, 52%, 1; /* Yellow-400 */
3403
+ --color-bg-default-selected: 210, 17%, 98%, 1; /* Gray-50 */
3404
+ --color-bg-secondary: 210, 17%, 98%, 1; /* Gray-50 */
3405
+ --color-bg-secondary-hover: 195, 10%, 92%, 1; /* Gray-200 */
3406
+ --color-bg-disabled: 195, 10%, 92%, 1; /* Gray-200 */
3407
+ --color-bg-brand: 52, 100%, 52%, 1; /* Yellow-400 */
3408
+ --color-bg-brand-hover: 50, 98%, 47%, 1; /* Yellow-500 */
3409
+ --color-bg-brand-light: 53, 100%, 90%, 1; /* Yellow-100 */
3410
+ --color-bg-danger: 354, 96%, 59%, 1; /* Red-500 */
3411
+ --color-bg-danger-light: 354, 100%, 94%, 1; /* Red-100 */
3412
+ --color-bg-default-inverse: 0, 0%, 0%, 1; /* Black */
3413
+ --color-bg-tertiary: 195, 10%, 92%, 1; /* Tertiary */
3414
+ --color-bg-success: 126, 73%, 39%, 1;
3415
+ --color-bg-success-light: 124, 79%, 93%, 1; /* Green-100 */
3416
+ --color-bg-info-light: 248, 100%, 97%, 1;
3417
+
3418
+ /* Border */
3419
+ --color-border-default: 195, 10%, 92%, 1; /* Gray-200 */
3420
+ --color-border-hover: 203, 10%, 76%, 1;
3421
+ --color-border-light: 0, 0%, 100%, 1; /* White */
3422
+ --color-border-active: 0, 0%, 0%, 1; /* Black */
3423
+ --color-border-focused: 260, 100%, 52%, 1; /* Blue-700 */
3424
+ --color-border-warning: 18, 88%, 55%, 1; /* Red-500 */
3425
+ --color-border-danger: 354, 96%, 59%, 1; /* Red-500 */
3426
+ --color-border-success: 127, 69%, 29%, 1;
3427
+ --color-border-info: 260, 100%, 52%, 1;
3428
+ --color-border-disabled: 206, 9%, 66%, 1; /* Gray-500 */
3429
+
3430
+ /* Icon */
3431
+ --color-icon-default: 0, 0%, 100%, 1; /* White */
3432
+ --color-icon-default-hover: 207, 8%, 23%, 1; /* Gray-950 */
3433
+ --color-icon-brand: 52, 100%, 52%, 1; /* Yellow-400 */
3434
+ --color-icon-secondary: 208, 8%, 50%, 1; /* Gray-700 */
3435
+ --color-icon-disabled: 206, 9%, 66%, 1; /* Gray-500 */
3436
+ --color-icon-inverse: 0, 0%, 100%, 1; /* White */
3437
+ --color-icon-danger: 354, 96%, 59%, 1; /* Red-500 */
3438
+ --color-icon-warning: 18, 88%, 55%, 1;
3439
+ --color-icon-info: 260, 100%, 52%, 1;
3440
+ --color-icon-success: 127, 69%, 29%, 1; /* Green-700 */
3441
+ --color-icon-on-brand: 207, 8%, 23%, 1; /* Gray-900 */
3442
+
3443
+ /* Tooltip */
3444
+ --color-bg-tooltip: 0, 0%, 0%, 1; /* Black */
3445
+ --color-text-tooltip: 0, 0%, 100%, 1; /* White */
3446
+
3447
+ /* Inline Comment */
3448
+ --color-inline-comment: 124, 79%, 93%, 1; /* #DDFBDF */
3449
+ --color-inline-comment-active: 126, 74%, 73%, 1; /* #88ED92 */
3450
+
3451
+ /* Utility */
3452
+ --color-bg-transparent: 0, 0%, 0%, 0.04; /* Black 4% */
3453
+ --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
3454
+
3455
+ /* Elevation */
3456
+ --shadow-elevation-1: 0px 1px 2px rgba (0,  0,  0,  0.15);
3457
+ --shadow-elevation-2: 0px 2px 4px rgba (0,  0,  0,  0.15);
3458
+ --shadow-elevation-3: 0px 4px 16px rgba (0,  0,  0,  0.15);
3459
+ --shadow-elevation-4: 0px 8px 32px rgba (0,  0,  0,  0.15);
3460
+ }
3461
+
3462
+ .dark {
3463
+ /* Button */
3464
+ --color-button-default: 0, 0%, 31%, 1; /* Gray-700 */
3465
+ --color-button-default-hover: 0, 0%, 36%, 1; /* Gray-600 */
3466
+ --color-button-secondary: 0, 0%, 12%, 1; /* Gray-950 */
3467
+ --color-button-secondary-hover: 0, 0%, 25%, 1; /* Gray-800 */
3468
+ --color-button-disabled: 0, 0%, 25%, 1; /* Gray-800 */
3469
+ --color-button-danger: 354, 96%, 59%, 1; /* Red-500 */
3470
+ --color-button-danger-hover: 354, 84%, 42%, 1; /* Red-700 */
3471
+ --color-button-floating: 0, 0%, 31%, 1; /* Gray-700 */
3472
+ --color-button-floating-hover: 0, 0%, 25%, 1; /* Gray-800 */
3473
+
3474
+ /* Text */
3475
+ --color-text-default: 0, 0%, 91%, 1; /* Gray-100 */
3476
+ --color-text-secondary: 0, 0%, 53%, 1; /* Gray-400 */
3477
+ --color-text-disabled: 0, 0%, 43%, 1; /* Gray-500 */
3478
+ --color-text-danger: 354, 100%, 70%, 1; /* Red-400 */
3479
+ --color-text-success: 126, 67%, 45%, 1; /* Green-500 */
3480
+ --color-text-inverse: 0, 0%, 91%, 1; /* Gray-100 */
3481
+ --color-text-link: 251, 100%, 83%, 1; /* Blue-700 */
3482
+ --color-text-on-brand: 0, 0%, 18%, 1; /* Gray-950 */
3483
+
3484
+ /* Background */
3485
+ --color-bg-default: 0, 0%, 18%, 1; /* Gray-900 */
3486
+ --color-bg-default-hover: 0, 0%, 25%, 1; /* Gray-800 */
3487
+ --color-bg-default-active: 50, 74%, 54%, 1; /* Yellow-400 */
3488
+ --color-bg-default-selected: 0, 0%, 25%, 1; /* Gray-800 */
3489
+ --color-bg-secondary: 0, 0%, 12%, 1; /* Gray-950 */
3490
+ --color-bg-secondary-hover: 0, 0%, 18%, 1; /* Gray-900 */
3491
+ --color-bg-disabled: 0, 0%, 53%, 1; /* Gray-400 */
3492
+ --color-bg-brand: 50, 74%, 54%, 1; /* Yellow-400 */
3493
+ --color-bg-brand-hover: 50, 60%, 45%, 1; /* Yellow-500 */
3494
+ --color-bg-brand-light: 57, 92%, 76%, 1; /* Yellow-100 */
3495
+ --color-bg-danger: 354, 84%, 42%, 1; /* Red-200 */
3496
+ --color-bg-danger-light: 356, 100%, 97%, 1; /* Red-50 */
3497
+ --color-bg-default-inverse: 0, 0%, 0%, 1; /* White */
3498
+ --color-bg-tertiary: 0, 0%, 25%, 1; /* Gray-800 */
3499
+ --color-bg-success: 128, 59%, 20%, 1;
3500
+ --color-bg-success-light: 128, 59%, 20%, 1; /* Green-900 */
3501
+ --color-bg-info-light: 254, 100%, 73%, 0.16;
3502
+
3503
+ /* Border */
3504
+ --color-border-default: 0, 0%, 25%, 1; /* Gray-800 */
3505
+ --color-border-hover: 0, 0%, 36%, 1; /* Gray-600 */
3506
+ --color-border-light: 0, 0%, 100%, 1; /* White */
3507
+ --color-border-active: 0, 0%, 91%, 1; /* Gray-200 */
3508
+ --color-border-focused: 254, 100%, 73%, 1; /* Blue-400 */
3509
+ --color-border-danger: 354, 100%, 70%, 1; /* Red-400 */
3510
+ --color-border-warning: 22, 89%, 62%, 1; /* Red-500 */
3511
+ --color-border-success: 126, 74%, 73%, 1;
3512
+ --color-border-info: 254, 100%, 73%, 1;
3513
+ --color-border-disabled: 0, 0%, 53%, 1; /* Gray-400 */
3514
+
3515
+ /* Icon */
3516
+ --color-icon-default: 0, 0%, 100%, 1; /* White */
3517
+ --color-icon-default-hover: 0, 0%, 12%, 1; /* Gray-900 */
3518
+ --color-icon-brand: 50, 74%, 54%, 1; /* Yellow-400 */
3519
+ --color-icon-secondary: 0, 0%, 53%, 1; /* Gray-400 */
3520
+ --color-icon-disabled: 0, 0%, 25%, 1; /* Gray-800 */
3521
+ --color-icon-inverse: 207, 8%, 23%, 1; /* Gray-100 */
3522
+ --color-icon-danger: 354, 100%, 70%, 1;
3523
+ --color-icon-warning: 22, 89%, 62%, 1;
3524
+ --color-icon-info: 254, 100%, 73%, 1;
3525
+ --color-icon-success: 126, 74%, 73%, 1;
3526
+ --color-icon-on-brand: 0, 0%, 18%, 1; /* Gray-950 */
3527
+
3528
+ /* Tooltip */
3529
+ --color-bg-tooltip: 0, 0%, 100%, 1; /* White */
3530
+ --color-text-tooltip: 0, 0%, 0%, 1; /* Black */
3531
+
3532
+ /* Inline Comment */
3533
+ --color-inline-comment: 128, 59%, 20%, 1; /* #15521D */
3534
+ --color-inline-comment-active: 127, 69%, 29%, 1; /* #177E23 */
3535
+
3536
+ /* Utility */
3537
+ --color-bg-transparent: 0, 0%, 100%, 0.04; /* White 4% */
3538
+ --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
3539
+ }
3540
+
3541
+ .theme-sepia {
3542
+ /* Button */
3543
+ --color-button-default: 28, 16%, 21%, 1; /* #3E352D */
3544
+ --color-button-default-hover: 29, 16%, 26%, 1; /* #4D4238 */
3545
+ --color-button-secondary: 41, 61%, 84%, 1; /* #EFDFBD */
3546
+ --color-button-secondary-hover: 28, 16%, 21%, 0.06; /* #3E352D 6% */
3547
+ --color-button-disabled: 28, 16%, 21%, 0.04; /* #3E352D 4% */
3548
+ --color-button-danger: 0, 71%, 38%, 1; /* #A61C1C */
3549
+ --color-button-danger-hover: 0, 71%, 42%, 1; /* #B71F1F */
3550
+ --color-button-floating: 41, 61%, 84%, 1; /* #EFDFBD */
3551
+ --color-button-floating-hover: 28, 16%, 21%, 0.06; /* #3E352D 6% */
3552
+
3553
+ /* Text */
3554
+ --color-text-default: 28, 16%, 21%, 1; /* #3E352D */
3555
+ --color-text-secondary: 31, 17%, 42%, 1; /* #7D6B58 */
3556
+ --color-text-disabled: 31, 29%, 64%, 1; /* #BEA489 */
3557
+ --color-text-danger: 0, 71%, 38%, 1; /* #A61C1C */
3558
+ --color-text-success: 77, 23%, 35%, 1; /* #616C44 */
3559
+ --color-text-inverse: 41, 61%, 84%, 1; /* #EFDFBD */
3560
+ --color-text-link: 199, 100%, 29%, 1; /* #006494 */
3561
+ --color-text-on-brand: 28, 16%, 21%, 1; /* #3E352D */
3562
+
3563
+ /* Background */
3564
+ --color-bg-default: 41, 61%, 84%, 1; /* #EFDFBD */
3565
+ --color-bg-default-hover: 28, 16%, 21%, 0.08; /* #3E352D 8% */
3566
+ --color-bg-default-active: 46, 88%, 56%, 1; /* #F2C42D */
3567
+ --color-bg-default-selected: 28, 16%, 21%, 0.1; /* #3E352D 10% */
3568
+ --color-bg-secondary: 41, 61%, 80%, 1; /* #EBD7AD */
3569
+ --color-bg-secondary-hover: 28, 16%, 21%, 0.12; /* #3E352D 12% */
3570
+ --color-bg-disabled: 28, 16%, 21%, 0.04; /* #3E352D 4% */
3571
+ --color-bg-brand: 46, 88%, 56%, 1; /* #F2C42D */
3572
+ --color-bg-brand-hover: 40, 84%, 50%, 1; /* #EBA515 */
3573
+ --color-bg-brand-light: 47, 87%, 88%, 1; /* #FBEFC5 */
3574
+ --color-bg-danger: 0, 71%, 38%, 1; /* #A61C1C */
3575
+ --color-bg-danger-light: 0, 71%, 42%, 0.06; /* #B71F1F 6% */
3576
+ --color-bg-default-inverse: 28, 16%, 21%, 1; /* #3E352D */
3577
+ --color-bg-tertiary: 44, 32%, 86%, 1; /* #E7E1D0 */
3578
+ --color-bg-success: 77, 23%, 35%, 1; /* #616C44 */
3579
+ --color-bg-success-light: 76, 23%, 64%, 1; /* #ADB88E */
3580
+ --color-bg-info-light: 199, 45%, 87%, 1;
3581
+
3582
+ /* Border */
3583
+ --color-border-default: 41, 49%, 76%, 1; /* #E0CDA4 */
3584
+ --color-border-hover: 41, 50%, 68%, 1; /* #D6BC85 */
3585
+ --color-border-light: 41, 61%, 84%, 1; /* #EFDFBD */
3586
+ --color-border-active: 28, 16%, 21%, 1; /* #3E352D */
3587
+ --color-border-focused: 199, 100%, 29%, 1; /* #006494 */
3588
+ --color-border-danger: 0, 71%, 38%, 1; /* #A61C1C */
3589
+ --color-border-warning: 12, 85%, 60%, 1; /* #F06543 */
3590
+ --color-border-success: 77, 23%, 35%, 1; /* #616C44 */
3591
+ --color-border-info: 199, 100%, 29%, 1; /* #006494 */
3592
+ --color-border-disabled: 31, 29%, 64%, 1; /* #BEA489 */
3593
+
3594
+ /* Icon */
3595
+ --color-icon-default: 28, 16%, 21%, 1; /* #3E352D */
3596
+ --color-icon-default-hover: 29, 16%, 26%, 1; /* #4D4238 */
3597
+ --color-icon-brand: 46, 88%, 56%, 1; /* #F2C42D */
3598
+ --color-icon-secondary: 31, 17%, 42%, 1; /* #7D6B58 */
3599
+ --color-icon-disabled: 31, 29%, 64%, 1; /* #BEA489 */
3600
+ --color-icon-inverse: 41, 61%, 84%, 1; /* #EFDFBD */
3601
+ --color-icon-danger: 0, 71%, 38%, 1; /* #A61C1C */
3602
+ --color-icon-warning: 12, 85%, 60%, 1; /* #F06543 */
3603
+ --color-icon-info: 199, 100%, 29%, 1; /* #006494 */
3604
+ --color-icon-success: 77, 23%, 35%, 1; /* #616C44 */
3605
+ --color-icon-on-brand: 28, 16%, 21%, 1; /* #3E352D */
3606
+
3607
+ /* Tooltip */
3608
+ --color-bg-tooltip: 28, 16%, 21%, 1; /* #3E352D */
3609
+ --color-text-tooltip: 41, 61%, 84%, 1; /* #EFDFBD */
3610
+
3611
+ /* Inline Comment */
3612
+ --color-inline-comment: 76, 23%, 72%, 1; /* #BFC8A7 */
3613
+ --color-inline-comment-active: 75, 23%, 62%, 1; /* #A9B488 */
3614
+
3615
+ /* Utility */
3616
+ --color-bg-transparent: 28, 16%, 21%, 0.04; /* #3E352D 4% */
3617
+ --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
3618
+ }
3619
+
3620
+ .theme-pink {
3621
+ /* Button */
3622
+ --color-button-default: 349, 25%, 13%, 1; /* #2A191C */
3623
+ --color-button-default-hover: 349, 25%, 22%, 1; /* #462A2F */
3624
+ --color-button-secondary: 346, 100%, 95%, 1; /* #FFE6EC */
3625
+ --color-button-secondary-hover: 24, 16%, 21%, 0.06; /* #3E352D 6% */
3626
+ --color-button-disabled: 24, 16%, 21%, 0.04; /* #3E352D 4% */
3627
+ --color-button-danger: 2, 79%, 56%, 1; /* #E73D36 */
3628
+ --color-button-danger-hover: 2, 79%, 48%, 1; /* #DB221A */
3629
+ --color-button-floating: 346, 100%, 95%, 1; /* #FFE6EC */
3630
+ --color-button-floating-hover: 24, 16%, 21%, 0.06; /* #3E352D 6% */
3631
+
3632
+ /* Text */
3633
+ --color-text-default: 3, 88%, 26%, 1; /* #7C0E08 */
3634
+ --color-text-secondary: 3, 39%, 59%, 1; /* #C0736F */
3635
+ --color-text-disabled: 3, 43%, 76%, 1; /* #DCABA8 */
3636
+ --color-text-danger: 2, 79%, 56%, 1; /* #E73D36 */
3637
+ --color-text-success: 139, 35%, 42%, 1; /* #46905E */
3638
+ --color-text-inverse: 346, 100%, 95%, 1; /* #FFE6EC */
3639
+ --color-text-link: 209, 89%, 39%, 1; /* #0B67BD */
3640
+ --color-text-on-brand: 3, 88%, 26%, 1; /* #7C0E08 */
3641
+
3642
+ /* Background */
3643
+ --color-bg-default: 346, 100%, 95%, 1; /* #FFE6EC */
3644
+ --color-bg-default-hover: 3, 88%, 26%, 0.08; /* #7C0E08 8% */
3645
+ --color-bg-default-active: 45, 100%, 65%, 1; /* #FFD24D */
3646
+ --color-bg-default-selected: 3, 88%, 26%, 0.06; /* #7C0E08 6% */
3647
+ --color-bg-secondary: 346, 100%, 92%, 1; /* #FFD6E0 */
3648
+ --color-bg-secondary-hover: 3, 88%, 26%, 0.12; /* #7C0E08 12% */
3649
+ --color-bg-disabled: 24, 16%, 21%, 0.04; /* #3E352D 4% */
3650
+ --color-bg-brand: 45, 100%, 65%, 1; /* #FFD24D */
3651
+ --color-bg-brand-hover: 45, 100%, 56%, 1; /* #FFC61F */
3652
+ --color-bg-brand-light: 45, 100%, 90%, 1; /* #FFF2CC */
3653
+ --color-bg-danger: 2, 79%, 56%, 1; /* #E73D36 */
3654
+ --color-bg-danger-light: 2, 79%, 56%, 0.14; /* #E73D36 14% */
3655
+ --color-bg-default-inverse: 3, 88%, 26%, 1;
3656
+ --color-bg-tertiary: 3, 88%, 26%, 0.12; /* #7C0E08 12% */
3657
+ --color-bg-success: 139, 35%, 42%, 1; /* #46905E */
3658
+ --color-bg-success-light: 140, 34%, 88%, 1; /* #D6EBDD */
3659
+ --color-bg-info-light: 209, 89%, 88%, 1;
3660
+
3661
+ /* Border */
3662
+ --color-border-default: 346, 100%, 90%, 1; /* #FFCCD8 */
3663
+ --color-border-hover: 346, 100%, 86%, 1; /* #FFB8C9 */
3664
+ --color-border-light: 348, 100%, 96%, 1; /* #FFEBEF */
3665
+ --color-border-active: 3, 88%, 26%, 1; /* #7C0E08 */
3666
+ --color-border-focused: 209, 89%, 39%, 1; /* #0B67BD */
3667
+ --color-border-danger: 2, 79%, 56%, 1; /* #E73D36 */
3668
+ --color-border-warning: 19, 83%, 53%, 1; /* #EB6424 */
3669
+ --color-border-success: 139, 35%, 42%, 1; /* #46905E */
3670
+ --color-border-info: 209, 89%, 39%, 1; /* #0B67BD */
3671
+ --color-border-disabled: 3, 43%, 76%, 1; /* #DCABA8 */
3672
+
3673
+ /* Icon */
3674
+ --color-icon-default: 3, 88%, 26%, 1; /* #7C0E08 */
3675
+ --color-icon-default-hover: 3, 88%, 32%, 1; /* #99110A */
3676
+ --color-icon-brand: 45, 100%, 65%, 1; /* #FFD24D */
3677
+ --color-icon-secondary: 3, 39%, 59%, 1; /* #C0736F */
3678
+ --color-icon-disabled: 3, 43%, 76%, 1; /* #DCABA8 */
3679
+ --color-icon-inverse: 346, 100%, 95%, 1; /* #FFE6EC */
3680
+ --color-icon-danger: 2, 79%, 56%, 1; /* #E73D36 */
3681
+ --color-icon-warning: 19, 83%, 53%, 1; /* #EB6424 */
3682
+ --color-icon-info: 209, 89%, 39%, 1; /* #0B67BD */
3683
+ --color-icon-success: 140, 35%, 45%, 1; /* #4B9B65 */
3684
+ --color-icon-on-brand: 3, 88%, 26%, 1; /* #7C0E08 */
3685
+
3686
+ /* Tooltip */
3687
+ --color-bg-tooltip: 3, 88%, 26%, 1; /* #7C0E08 */
3688
+ --color-text-tooltip: 346, 100%, 95%, 1; /* #FFE6EC */
3689
+
3690
+ /* Inline Comment */
3691
+ --color-inline-comment: 139, 35%, 86%, 1; /* #CFE8D7 */
3692
+ --color-inline-comment-active: 139, 36%, 78%, 1; /* #B3DBC0 */
3693
+
3694
+ /* Utility */
3695
+ --color-bg-transparent: 3, 88%, 26%, 0.04; /* #7C0E08 4% */
3696
+ --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
3697
+ }
3698
+
3699
+ .theme-green {
3700
+ /* Button */
3701
+ --color-button-default: 63, 15%, 74%, 1; /* #C6C7B3 */
3702
+ --color-button-default-hover: 65, 14%, 82%, 1; /* #D7D8CA */
3703
+ --color-button-secondary: 120, 9%, 24%, 1; /* #384338 */
3704
+ --color-button-secondary-hover: 63, 15%, 74%, 0.06; /* #C6C7B3 6% */
3705
+ --color-button-disabled: 63, 15%, 74%, 0.04; /* #C6C7B3 4% */
3706
+ --color-button-danger: 2, 99%, 68%, 1; /* #FE625D */
3707
+ --color-button-danger-hover: 2, 99%, 72%, 1; /* #FE7571 */
3708
+ --color-button-floating: 120, 9%, 24%, 1; /* #384338 */
3709
+ --color-button-floating-hover: 63, 15%, 74%, 0.06; /* #C6C7B3 6% */
3710
+
3711
+ /* Text */
3712
+ --color-text-default: 63, 27%, 83%, 1; /* #DFE0C9 */
3713
+ --color-text-secondary: 84, 5%, 56%, 1; /* #909688 */
3714
+ --color-text-disabled: 104, 7%, 42%, 1; /* #687364 */
3715
+ --color-text-danger: 2, 99%, 68%, 1; /* #FE625D */
3716
+ --color-text-success: 120, 46%, 55%, 1; /* #59C259 */
3717
+ --color-text-inverse: 120, 6%, 16%, 1; /* #262B26 */
3718
+ --color-text-link: 197, 78%, 64%, 1; /* #5BC3EB */
3719
+ --color-text-on-brand: 120, 6%, 16%, 1; /* #262B26 */
3720
+
3721
+ /* Background */
3722
+ --color-bg-default: 120, 9%, 24%, 1; /* #384338 */
3723
+ --color-bg-default-hover: 63, 15%, 74%, 0.06; /* #C6C7B3 6% */
3724
+ --color-bg-default-active: 45, 100%, 65%, 1; /* #FFD24D */
3725
+ --color-bg-default-selected: 63, 15%, 74%, 0.04; /* #C6C7B3 4% */
3726
+ --color-bg-secondary: 120, 6%, 16%, 1; /* #262B26 */
3727
+ --color-bg-secondary-hover: 63, 15%, 74%, 0.08; /* #C6C7B3 8% */
3728
+ --color-bg-disabled: 63, 15%, 74%, 0.04; /* #C6C7B3 4% */
3729
+ --color-bg-brand: 46, 88%, 56%, 1; /* #F2C42D */
3730
+ --color-bg-brand-hover: 40, 84%, 50%, 1; /* #EBA515 */
3731
+ --color-bg-brand-light: 50, 89%, 89%, 1; /* #FCF4C9 */
3732
+ --color-bg-danger: 2, 99%, 68%, 1; /* #FE625D */
3733
+ --color-bg-danger-light: 2, 99%, 68%, 0.12; /* #FE625D 12% */
3734
+ --color-bg-default-inverse: 120, 9%, 76%, 1; /* #BCC7BC */
3735
+ --color-bg-tertiary: 63, 15%, 74%, 0.12; /* #C6C7B3 12% */
3736
+ --color-bg-success: 120, 46%, 55%, 1; /* #59C259 */
3737
+ --color-bg-success-light: 120, 46%, 55%, 0.16; /* #59C259 16% */
3738
+ --color-bg-info-light: 197, 78%, 64%, 0.16;
3739
+
3740
+ /* Border */
3741
+ --color-border-default: 120, 8%, 30%, 1; /* #465346 */
3742
+ --color-border-hover: 120, 8%, 36%, 1; /* #546354 */
3743
+ --color-border-light: 120, 8%, 44%, 1; /* #677A67 */
3744
+ --color-border-active: 62, 27%, 83%, 1; /* #DFE0C9 */
3745
+ --color-border-focused: 197, 78%, 64%, 1; /* #5BC3EB */
3746
+ --color-border-danger: 2, 99%, 68%, 1; /* #FE625D */
3747
+ --color-border-warning: 10, 85%, 61%, 1; /* #F06449 */
3748
+ --color-border-success: 120, 46%, 55%, 1; /* #59C259 */
3749
+ --color-border-info: 197, 78%, 64%, 1; /* #5BC3EB */
3750
+ --color-border-disabled: 104, 7%, 42%, 1; /* #687364 */
3751
+
3752
+ /* Icon */
3753
+ --color-icon-default: 62, 27%, 83%, 1; /* #DFE0C9 */
3754
+ --color-icon-default-hover: 65, 14%, 82%, 1; /* #D7D8CA */
3755
+ --color-icon-brand: 46, 88%, 56%, 1; /* #F2C42D */
3756
+ --color-icon-secondary: 84, 5%, 56%, 1; /* #909688 */
3757
+ --color-icon-disabled: 104, 7%, 42%, 1; /* #687364 */
3758
+ --color-icon-inverse: 120, 6%, 16%, 1; /* #262B26 */
3759
+ --color-icon-danger: 2, 79%, 56%, 1; /* #E73D36 */
3760
+ --color-icon-warning: 10, 85%, 61%, 1; /* #F06449 */
3761
+ --color-icon-info: 197, 78%, 64%, 1; /* #5BC3EB */
3762
+ --color-icon-success: 120, 46%, 55%, 1; /* #59C259 */
3763
+ --color-icon-on-brand: 120, 6%, 16%, 1; /* #262B26 */
3764
+
3765
+ /* Tooltip */
3766
+ --color-bg-tooltip: 120, 9%, 76%, 1; /* #BCC7BC */
3767
+ --color-text-tooltip: 120, 9%, 24%, 1; /* #384338 */
3768
+
3769
+ /* Inline Comment */
3770
+ --color-inline-comment: 120, 47%, 20%, 1; /* #1B4B1B */
3771
+ --color-inline-comment-active: 120, 47%, 28%, 1; /* #266826 */
3772
+
3773
+ /* Utility */
3774
+ --color-bg-transparent: 63, 15%, 74%, 0.04; /* #C6C7B3 4% */
3775
+ --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
3868
3776
  }
3869
- .data-\[highlighted\]\:hover\:\!outline-transparent:hover[data-highlighted] {
3870
- outline-color: transparent !important;
3777
+
3778
+ *,
3779
+ ::before,
3780
+ ::after {
3781
+ border-color: hsl(var(--color-border-default));
3782
+ -webkit-font-smoothing: antialiased;
3783
+ -moz-osx-font-smoothing: grayscale;
3784
+ text-rendering: optimizeLegibility;
3871
3785
  }
3872
- .data-\[highlighted\]\:focus-visible\:outline:focus-visible[data-highlighted] {
3873
- outline-style: solid;
3786
+
3787
+ body {
3788
+ background-color: hsl(var(--color-bg-default));
3789
+ color: hsl(var(--color-text-default));
3874
3790
  }
3875
- .data-\[highlighted\]\:focus-visible\:outline-2:focus-visible[data-highlighted] {
3876
- outline-width: 2px;
3791
+
3792
+ #selected-value > div > div > p {
3793
+ display: none;
3877
3794
  }
3878
- .data-\[highlighted\]\:focus-visible\:outline-\[hsl\(var\(--color-border-focused\)\)\]:focus-visible[data-highlighted] {
3879
- outline-color: hsl(var(--color-border-focused));
3795
+
3796
+ #storybook-root {
3797
+ padding: 0 !important;
3880
3798
  }
3881
- .dark\:\!text-\[\#363B3F\]:is(.dark *) {
3882
- --tw-text-opacity: 1 !important;
3883
- color: rgb(54 59 63 / var(--tw-text-opacity, 1)) !important;
3799
+
3800
+ input:is(:-webkit-autofill, :-webkit-autofill), textarea:is(:-webkit-autofill, :-webkit-autofill) {
3801
+ -webkit-transition:
3802
+ background-color 0s 600000s,
3803
+ color 0s 600000s !important;
3804
+ transition:
3805
+ background-color 0s 600000s,
3806
+ color 0s 600000s !important;
3884
3807
  }
3885
- .dark\:text-\[\#363B3F\]:is(.dark *) {
3886
- --tw-text-opacity: 1;
3887
- color: rgb(54 59 63 / var(--tw-text-opacity, 1));
3808
+
3809
+ input:is(:-webkit-autofill, :autofill),
3810
+ textarea:is(:-webkit-autofill, :autofill) {
3811
+ -webkit-transition:
3812
+ background-color 0s 600000s,
3813
+ color 0s 600000s !important;
3814
+ transition:
3815
+ background-color 0s 600000s,
3816
+ color 0s 600000s !important;
3888
3817
  }
3889
- @media (min-width: 640px) {
3890
3818
 
3891
- .sm\:max-w-fit {
3892
- max-width: -moz-fit-content;
3893
- max-width: fit-content;
3894
- }
3819
+ .epr-emoji-category-label {
3820
+ font-family: system-ui !important;
3821
+ font-size: 14px !important;
3822
+ font-style: normal !important;
3823
+ font-weight: 500 !important;
3824
+ line-height: 20px !important;
3825
+ }
3895
3826
 
3896
- .sm\:max-w-sm {
3897
- max-width: 24rem;
3898
- }
3827
+ .epr-search-container > input {
3828
+ display: flex;
3829
+ height: 2.25rem; /* h-9 */
3830
+ width: 100%; /* w-full */
3831
+ border-radius: 4px; /* rounded-md */
3832
+ border: 1px solid hsl(214.3, 31.8%, 91.4%); /* border border-input */
3833
+ background-color: transparent !important; /* bg-transparent */
3834
+ font-size: 14px; /* text-sm */
3835
+ transition: colors 0.15s ease-in-out;
3836
+ color: #000;
3837
+ font-family: system-ui, "Roboto";
3838
+ }
3899
3839
 
3900
- .sm\:grid-cols-1 {
3901
- grid-template-columns: repeat(1, minmax(0, 1fr));
3902
- }
3840
+ /* For hover state */
3903
3841
 
3904
- .sm\:flex-row {
3905
- flex-direction: row;
3906
- }
3842
+ .epr-search-container > input:hover {
3843
+ border-color: #000; /* hover:border-border-hover */
3844
+ }
3907
3845
 
3908
- .sm\:flex-col {
3909
- flex-direction: column;
3910
- }
3846
+ /* For focus-visible state */
3911
3847
 
3912
- .sm\:justify-end {
3913
- justify-content: flex-end;
3914
- }
3848
+ .epr-search-container > input:focus-visible {
3849
+ outline: none; /* focus-visible:outline-none */
3850
+ border-color: #000; /* focus-visible:border-border-hover */
3851
+ }
3915
3852
 
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
- }
3853
+ /* For placeholder text */
3921
3854
 
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
- }
3855
+ .epr-search-container > input::-moz-placeholder {
3856
+ color: hsl(var(--color-text-disabled));
3857
+ font-family: system-ui, "Roboto";
3858
+ font-size: 14px;
3859
+ }
3927
3860
 
3928
- .sm\:rounded-lg {
3929
- border-radius: var(--radius);
3930
- }
3861
+ .epr-search-container > input::placeholder {
3862
+ color: hsl(var(--color-text-disabled));
3863
+ font-family: system-ui, "Roboto";
3864
+ font-size: 14px;
3931
3865
  }
3932
- @media (min-width: 768px) {
3933
3866
 
3934
- .md\:\!right-4 {
3935
- right: 1rem !important;
3936
- }
3867
+ .epr_-bbny0t > button {
3868
+ border-radius: 50% !important;
3869
+ }
3937
3870
 
3938
- .md\:block {
3939
- display: block;
3940
- }
3871
+ .epr_-6kfaby.epr-active {
3872
+ background-color: #ffdf0a !important;
3873
+ color: #000 !important;
3874
+ border-radius: 4px !important;
3875
+ border: none !important;
3876
+ }
3941
3877
 
3942
- .md\:w-\[384px\] {
3943
- width: 384px;
3944
- }
3878
+ .epr_-f1jbax:focus:before {
3879
+ border: none !important;
3880
+ border-radius: 4px !important;
3881
+ }
3945
3882
 
3946
- .md\:w-\[60vw\] {
3947
- width: 60vw;
3948
- }
3883
+ .epr_-8ygbw8 {
3884
+ padding: 0.5rem 1rem !important;
3885
+ }
3949
3886
 
3950
- .md\:w-\[80\%\] {
3951
- width: 80%;
3952
- }
3887
+ .epr-body {
3888
+ margin: 0 0.5rem !important;
3889
+ }
3953
3890
 
3954
- .md\:w-auto {
3955
- width: auto;
3956
- }
3891
+ .toast-mini {
3892
+ padding: 8px 12px !important;
3893
+ gap: 8px !important;
3894
+ width: -moz-fit-content !important;
3895
+ width: fit-content !important;
3896
+ border-radius: 8px !important;
3897
+ place-self: end !important;
3898
+ }
3957
3899
 
3958
- .md\:max-w-min {
3959
- max-width: -moz-min-content;
3960
- max-width: min-content;
3961
- }
3900
+ .toast-mini > * + * {
3901
+ margin-left: 0;
3902
+ }
3962
3903
 
3963
- .md\:grid-cols-2 {
3964
- grid-template-columns: repeat(2, minmax(0, 1fr));
3965
- }
3904
+ .space-lg {
3905
+ padding: 20px !important;
3906
+ }
3966
3907
 
3967
- .md\:flex-row {
3968
- flex-direction: row;
3969
- }
3908
+ .space-y-lg {
3909
+ padding-top: 20px !important;
3910
+ padding-bottom: 20px !important;
3911
+ }
3970
3912
 
3971
- .md\:justify-start {
3972
- justify-content: flex-start;
3973
- }
3913
+ .space-x-lg {
3914
+ padding-left: 20px !important;
3915
+ padding-right: 20px !important;
3916
+ }
3974
3917
 
3975
- .md\:gap-8 {
3976
- gap: 2rem;
3977
- }
3918
+ .top-space-lg {
3919
+ padding-top: 20px !important;
3920
+ }
3978
3921
 
3979
- .md\:p-24 {
3980
- padding: 6rem;
3981
- }
3922
+ .bottom-space-lg {
3923
+ padding-bottom: 20px !important;
3924
+ }
3982
3925
 
3983
- .md\:p-8 {
3984
- padding: 2rem;
3985
- }
3926
+ .left-space-lg {
3927
+ padding-left: 20px !important;
3986
3928
  }
3987
- @media (min-width: 1024px) {
3988
3929
 
3989
- .lg\:\!mt-0 {
3990
- margin-top: 0px !important;
3991
- }
3930
+ .right-space-lg {
3931
+ padding-right: 20px !important;
3932
+ }
3992
3933
 
3993
- .lg\:mb-1 {
3994
- margin-bottom: 0.25rem;
3995
- }
3934
+ .bottom-space-xlg {
3935
+ padding-bottom: 24px !important;
3936
+ }
3996
3937
 
3997
- .lg\:block {
3998
- display: block;
3999
- }
3938
+ .space-sm {
3939
+ padding: 12px !important;
3940
+ }
4000
3941
 
4001
- .lg\:flex {
4002
- display: flex;
4003
- }
3942
+ .space-y-sm {
3943
+ padding-top: 12px !important;
3944
+ padding-bottom: 12px !important;
3945
+ }
4004
3946
 
4005
- .lg\:hidden {
4006
- display: none;
4007
- }
3947
+ .space-x-sm {
3948
+ padding-left: 12px !important;
3949
+ padding-right: 12px !important;
3950
+ }
4008
3951
 
4009
- .lg\:h-12 {
4010
- height: 3rem;
4011
- }
3952
+ .top-space-sm {
3953
+ padding-top: 12px !important;
3954
+ }
4012
3955
 
4013
- .lg\:w-3\/4 {
4014
- width: 75%;
4015
- }
3956
+ .bottom-space-sm {
3957
+ padding-bottom: 12px !important;
3958
+ }
4016
3959
 
4017
- .lg\:w-\[180px\] {
4018
- width: 180px;
4019
- }
3960
+ .left-space-sm {
3961
+ padding-left: 12px !important;
3962
+ }
4020
3963
 
4021
- .lg\:w-\[452px\] {
4022
- width: 452px;
4023
- }
3964
+ .right-space-sm {
3965
+ padding-right: 12px !important;
3966
+ }
4024
3967
 
4025
- .lg\:w-auto {
4026
- width: auto;
4027
- }
3968
+ .space-xsm {
3969
+ padding: 8px !important;
3970
+ }
4028
3971
 
4029
- .lg\:w-fit {
4030
- width: -moz-fit-content;
4031
- width: fit-content;
4032
- }
3972
+ .space-y-xsm {
3973
+ padding-top: 8px !important;
3974
+ padding-bottom: 8px !important;
3975
+ }
4033
3976
 
4034
- .lg\:min-w-\[418px\] {
4035
- min-width: 418px;
4036
- }
3977
+ .space-x-xsm {
3978
+ padding-left: 8px !important;
3979
+ padding-right: 8px !important;
3980
+ }
4037
3981
 
4038
- .lg\:min-w-\[420px\] {
4039
- min-width: 420px;
4040
- }
3982
+ .space-x-3xlg {
3983
+ padding-left: 40px !important;
3984
+ padding-right: 40px !important;
3985
+ }
4041
3986
 
4042
- .lg\:min-w-\[884px\] {
4043
- min-width: 884px;
4044
- }
3987
+ .space-y-3xlg {
3988
+ padding-left: 40px !important;
3989
+ padding-right: 40px !important;
3990
+ }
4045
3991
 
4046
- .lg\:\!max-w-fit {
4047
- max-width: -moz-fit-content !important;
4048
- max-width: fit-content !important;
4049
- }
3992
+ .top-space-xsm {
3993
+ padding-top: 8px !important;
3994
+ }
4050
3995
 
4051
- .lg\:grid-cols-3 {
4052
- grid-template-columns: repeat(3, minmax(0, 1fr));
4053
- }
3996
+ .bottom-space-xsm {
3997
+ padding-bottom: 8px !important;
3998
+ }
4054
3999
 
4055
- .lg\:text-wrap {
4056
- text-wrap: wrap;
4057
- }
4000
+ .left-space-xsm {
4001
+ padding-left: 8px !important;
4002
+ }
4058
4003
 
4059
- .lg\:py-4 {
4060
- padding-top: 1rem;
4061
- padding-bottom: 1rem;
4062
- }
4004
+ .right-space-xsm {
4005
+ padding-right: 8px !important;
4063
4006
  }
4064
- .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
4065
- -webkit-appearance: none;
4066
- appearance: none;
4007
+
4008
+ .right-space-2xsm {
4009
+ padding-right: 4px !important;
4067
4010
  }
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);
4011
+
4012
+ .bottom-space-2xsm {
4013
+ padding-bottom: 4px !important;
4071
4014
  }
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);
4015
+
4016
+ .bottom-space-2xlg {
4017
+ padding-bottom: 32px !important;
4075
4018
  }
4076
- .\[\&\:has\(\[aria-selected\]\)\]\:rounded-md:has([aria-selected]) {
4077
- border-radius: calc(var(--radius) - 2px);
4019
+
4020
+ .space-2xsm {
4021
+ padding: 4px !important;
4078
4022
  }
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);
4023
+
4024
+ .space-md {
4025
+ padding: 16px !important;
4082
4026
  }
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);
4027
+
4028
+ .space-y-md {
4029
+ padding-top: 16px !important;
4030
+ padding-bottom: 16px !important;
4086
4031
  }
4087
- .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
4088
- padding-right: 0px;
4032
+
4033
+ .space-x-md {
4034
+ padding-left: 16px !important;
4035
+ padding-right: 16px !important;
4089
4036
  }
4090
- .\[\&\>span\]\:line-clamp-1>span {
4091
- overflow: hidden;
4092
- display: -webkit-box;
4093
- -webkit-box-orient: vertical;
4094
- -webkit-line-clamp: 1;
4037
+
4038
+ .top-space-md {
4039
+ padding-top: 16px !important;
4095
4040
  }
4096
- .\[\&\>tr\]\:last\:border-b-0:last-child>tr {
4097
- border-bottom-width: 0px;
4041
+
4042
+ .bottom-space-md {
4043
+ padding-bottom: 16px !important;
4098
4044
  }
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));
4045
+
4046
+ .left-space-md {
4047
+ padding-left: 16px !important;
4102
4048
  }
4103
- .\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
4104
- padding-left: 0.5rem;
4105
- padding-right: 0.5rem;
4049
+
4050
+ .right-space-md {
4051
+ padding-right: 16px !important;
4106
4052
  }
4107
- .\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
4108
- padding-top: 0.375rem;
4109
- padding-bottom: 0.375rem;
4053
+
4054
+ .top-space-xlg {
4055
+ padding-top: 32px !important;
4110
4056
  }
4111
- .\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
4112
- font-weight: 500;
4057
+
4058
+ .gap-xsm {
4059
+ gap: 8px !important;
4113
4060
  }
4114
- .\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
4115
- padding-top: 0px;
4061
+
4062
+ .gap-2xsm {
4063
+ gap: 4px !important;
4116
4064
  }
4117
- .\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
4118
- padding-left: 0.5rem;
4119
- padding-right: 0.5rem;
4065
+
4066
+ .gap-3xsm {
4067
+ gap: 2px !important;
4120
4068
  }
4121
- .\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
4122
- height: 1.25rem;
4069
+
4070
+ .gap-md {
4071
+ gap: 16px !important;
4123
4072
  }
4124
- .\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
4125
- width: 1.25rem;
4073
+
4074
+ .gap-sm {
4075
+ gap: 12px !important;
4126
4076
  }
4127
- .\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
4128
- height: 3rem;
4077
+
4078
+ .border-radius-sm {
4079
+ border-radius: 4px !important;
4129
4080
  }
4130
- .\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
4131
- padding-left: 0.5rem;
4132
- padding-right: 0.5rem;
4081
+
4082
+ .border-width-md {
4083
+ border-width: 1px !important;
4133
4084
  }
4134
- .\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
4135
- padding-top: 0.75rem;
4136
- padding-bottom: 0.75rem;
4085
+
4086
+ .border-radius-lg {
4087
+ border-radius: 12px !important;
4137
4088
  }
4138
- .\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
4139
- height: 1.25rem;
4089
+
4090
+ .top-left-border-radius-xlg {
4091
+ border-top-left-radius: 16px !important;
4140
4092
  }
4141
- .\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
4142
- width: 1.25rem;
4093
+
4094
+ .top-right-border-radius-xlg {
4095
+ border-top-right-radius: 16px !important;
4143
4096
  }
4144
- .\[\&_p\]\:leading-relaxed p {
4145
- line-height: 1.625;
4097
+
4098
+ .bottom-left-border-radius-xlg {
4099
+ border-bottom-left-radius: 16px !important;
4146
4100
  }
4147
- .\[\&_svg\]\:invisible svg {
4148
- visibility: hidden;
4101
+
4102
+ .bottom-right-border-radius-xlg {
4103
+ border-bottom-right-radius: 16px !important;
4149
4104
  }
4150
- .\[\&_tr\:last-child\]\:border-0 tr:last-child {
4151
- border-width: 0px;
4105
+
4106
+ .border-radius-xlg {
4107
+ border-radius: 16px !important;
4152
4108
  }
4153
- .\[\&_tr\]\:border-b tr {
4154
- border-bottom-width: 1px;
4109
+
4110
+ .border-radius-md {
4111
+ border-radius: 8px !important;
4112
+ }
4113
+
4114
+ .space-x-xlg {
4115
+ padding-left: 24px !important;
4116
+ padding-right: 24px !important;
4155
4117
  }