@tight-embedded/react 1.4.1 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -74,24 +74,28 @@
74
74
  --Tight-colors-black400: #6F7576;
75
75
  --Tight-colors-black600: #50595C;
76
76
  --Tight-colors-black700: #182428;
77
+ --Tight-colors-blue200: #EDFAFC;
77
78
  --Tight-colors-blue300: #DAF4FA;
78
79
  --Tight-colors-blue400: #CAECF3;
79
80
  --Tight-colors-blue500: #94D8E8;
80
81
  --Tight-colors-blue700: #2AB2D1;
81
82
  --Tight-colors-blue900: #177F96;
83
+ --Tight-colors-green200: #DBF9EA;
82
84
  --Tight-colors-green300: #B8F3D5;
83
85
  --Tight-colors-green400: #94E8BD;
84
86
  --Tight-colors-green500: #5FDD9C;
85
87
  --Tight-colors-green700: #009C75;
88
+ --Tight-colors-yellow200: #FFF3C3;
86
89
  --Tight-colors-yellow300: #FFE787;
87
90
  --Tight-colors-yellow400: #FCD34D;
88
91
  --Tight-colors-yellow500: #FBBF24;
92
+ --Tight-colors-red200: #FFCBCB;
89
93
  --Tight-colors-red300: #FF9797;
90
94
  --Tight-colors-red400: #F45C5C;
91
95
  --Tight-colors-red500: #E84747;
92
96
  --Tight-colors-red700: #E42525;
93
97
  --Tight-fonts-base: Duplet Regular, sans-serif;
94
- --Tight-fontSizes-sm: 11px;
98
+ --Tight-fontSizes-sm: 12px;
95
99
  --Tight-fontSizes-md: 14px;
96
100
  --Tight-fontSizes-lg: 16px;
97
101
  --Tight-fontSizes-xl: 20px;
@@ -111,11 +115,11 @@
111
115
  --Tight-animations-appear-delay: 0.25s linear both 1.5s fade-in;
112
116
  --Tight-animations-shimmer: 2s ease-in-out infinite shimmer;
113
117
  --Tight-animations-spin: 1.5s ease-in-out 0.1s spin infinite;
114
- --Tight-animations-slideIn-right: 0.3s ease-out both slide-in-right;
115
- --Tight-animations-slideIn-up: 0.3s ease-out both slide-in-up;
116
- --Tight-animations-slideOut-right: 0.3s ease-in both slide-out-right;
117
- --Tight-animations-slideOut-down: 0.3s ease-in both slide-out-down;
118
- --Tight-shadows-box-shadow: 0px 10px 30px 0px rgba(24, 36, 40, 0.10);
118
+ --Tight-animations-slideIn-right: 300ms ease-out both slide-in-right;
119
+ --Tight-animations-slideIn-up: 300ms ease-out both slide-in-up;
120
+ --Tight-animations-slideOut-right: 300ms ease-in both slide-out-right;
121
+ --Tight-animations-slideOut-down: 300ms ease-in both slide-out-down;
122
+ --Tight-shadows-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.05), 0px 4px 12px 0px rgba(0, 0, 0, 0.15) ;
119
123
  --Tight-breakpoints-sm: 640px;
120
124
  --Tight-breakpoints-md: 850px;
121
125
  --Tight-breakpoints-lg: 1024px;
@@ -134,17 +138,21 @@
134
138
  --Tight-colors-brand-secondary-weak: var(--Tight-colors-white200);
135
139
  --Tight-colors-brand-secondary: var(--Tight-colors-white600);
136
140
  --Tight-colors-brand-secondary-strong: var(--Tight-colors-black100);
141
+ --Tight-colors-brand-action-opaque: var(--Tight-colors-blue200);
137
142
  --Tight-colors-brand-action-weak: var(--Tight-colors-blue300);
138
143
  --Tight-colors-brand-action: var(--Tight-colors-blue400);
139
144
  --Tight-colors-brand-action-strong: var(--Tight-colors-blue500);
140
145
  --Tight-colors-brand-action-stronger: var(--Tight-colors-blue700);
141
146
  --Tight-colors-brand-action-strongest: var(--Tight-colors-blue900);
147
+ --Tight-colors-brand-success-opaque: var(--Tight-colors-green200);
142
148
  --Tight-colors-brand-success-weak: var(--Tight-colors-green300);
143
149
  --Tight-colors-brand-success: var(--Tight-colors-green400);
144
150
  --Tight-colors-brand-success-strong: var(--Tight-colors-green500);
151
+ --Tight-colors-brand-warning-opaque: var(--Tight-colors-yellow200);
145
152
  --Tight-colors-brand-warning-weak: var(--Tight-colors-yellow300);
146
153
  --Tight-colors-brand-warning: var(--Tight-colors-yellow400);
147
154
  --Tight-colors-brand-warning-strong: var(--Tight-colors-yellow500);
155
+ --Tight-colors-brand-danger-opaque: var(--Tight-colors-red200);
148
156
  --Tight-colors-brand-danger-weak: var(--Tight-colors-red300);
149
157
  --Tight-colors-brand-danger: var(--Tight-colors-red400);
150
158
  --Tight-colors-brand-danger-strong: var(--Tight-colors-red500);
@@ -182,6 +190,8 @@
182
190
  --Tight-colors-surface-intent-danger-hover: var(--Tight-colors-brand-danger);
183
191
  --Tight-colors-surface-intent-danger-active: var(--Tight-colors-brand-danger-strong);
184
192
  --Tight-colors-surface-intent-danger-disabled: var(--Tight-colors-surface-foreground-disabled);
193
+ --Tight-colors-surface-intent-danger-weak: var(--Tight-colors-brand-danger-weak);
194
+ --Tight-colors-surface-intent-danger-opaque: var(--Tight-colors-brand-danger-opaque);
185
195
  --Tight-colors-typography-base: var(--Tight-colors-black700);
186
196
  --Tight-colors-typography-base-weak: var(--Tight-colors-black400);
187
197
  --Tight-colors-typography-contrast: var(--Tight-colors-white100);
@@ -388,6 +398,42 @@
388
398
  border: var(--Tight-borderWidths-md) solid;
389
399
  }
390
400
 
401
+ .tsystem-bg_surface\.background {
402
+ background: var(--Tight-colors-surface-background);
403
+ }
404
+
405
+ .tsystem-p_2\.5px {
406
+ padding: 2.5px;
407
+ }
408
+
409
+ .tsystem-p_4px_5px {
410
+ padding: 4px 5px;
411
+ }
412
+
413
+ .tsystem-bg_surface\.intent\.secondary {
414
+ background: var(--Tight-colors-surface-intent-secondary);
415
+ }
416
+
417
+ .tsystem-bd_\{borderWidths\.sm\}_solid {
418
+ border: var(--Tight-borderWidths-sm) solid;
419
+ }
420
+
421
+ .tsystem-bg_surface\.intent\.action {
422
+ background: var(--Tight-colors-surface-intent-action);
423
+ }
424
+
425
+ .tsystem-bg_surface\.intent\.success {
426
+ background: var(--Tight-colors-surface-intent-success);
427
+ }
428
+
429
+ .tsystem-bg_surface\.intent\.warning {
430
+ background: var(--Tight-colors-surface-intent-warning);
431
+ }
432
+
433
+ .tsystem-bg_surface\.intent\.danger {
434
+ background: var(--Tight-colors-surface-intent-danger);
435
+ }
436
+
391
437
  .tsystem-p_10px {
392
438
  padding: 10px;
393
439
  }
@@ -400,22 +446,34 @@
400
446
  border: var(--Tight-borderWidths-md) solid transparent;
401
447
  }
402
448
 
403
- .tsystem-p_5px {
404
- padding: 5px;
449
+ .tsystem-p_16px_12px {
450
+ padding: 16px 12px;
405
451
  }
406
452
 
407
- .tsystem-p_15px {
408
- padding: 15px;
453
+ .tsystem-bd_0\.75px {
454
+ border: 0.75px;
455
+ }
456
+
457
+ .tsystem-p_5px {
458
+ padding: 5px;
409
459
  }
410
460
 
411
461
  .tsystem-p_12px_16px {
412
462
  padding: 12px 16px;
413
463
  }
414
464
 
465
+ .tsystem-p_16px {
466
+ padding: 16px;
467
+ }
468
+
415
469
  .tsystem-bd_1px_solid {
416
470
  border: 1px solid;
417
471
  }
418
472
 
473
+ .tsystem-bg_surface\.background\.hover {
474
+ background: var(--Tight-colors-surface-background-hover);
475
+ }
476
+
419
477
  .tsystem-bd_\{borderWidths\.lg\}_solid_\{colors\.border\.layout\.weak\} {
420
478
  border: var(--Tight-borderWidths-lg) solid var(--Tight-colors-border-layout-weak);
421
479
  }
@@ -432,6 +490,10 @@
432
490
  border: none;
433
491
  }
434
492
 
493
+ .tsystem-p_0 {
494
+ padding: 0;
495
+ }
496
+
435
497
  .tsystem-p_md {
436
498
  padding: md;
437
499
  }
@@ -440,10 +502,6 @@
440
502
  inset: 0;
441
503
  }
442
504
 
443
- .tsystem-bg_surface\.background {
444
- background: var(--Tight-colors-surface-background);
445
- }
446
-
447
505
  .tsystem-m_32px {
448
506
  margin: 32px;
449
507
  }
@@ -452,18 +510,10 @@
452
510
  margin: 0;
453
511
  }
454
512
 
455
- .tsystem-p_0 {
456
- padding: 0;
457
- }
458
-
459
513
  .tsystem-p_8px {
460
514
  padding: 8px;
461
515
  }
462
516
 
463
- .tsystem-p_16px {
464
- padding: 16px;
465
- }
466
-
467
517
  .tsystem-p_24px {
468
518
  padding: 24px;
469
519
  }
@@ -484,36 +534,12 @@
484
534
  animation: var(--Tight-animations-slideOut-down);
485
535
  }
486
536
 
487
- .tsystem-m_0_0_7px_0 {
488
- margin: 0 0 7px 0;
489
- }
490
-
491
- .tsystem-p_4px_5px {
492
- padding: 4px 5px;
493
- }
494
-
495
- .tsystem-bg_surface\.intent\.secondary {
496
- background: var(--Tight-colors-surface-intent-secondary);
497
- }
498
-
499
- .tsystem-bd_\{borderWidths\.sm\}_solid {
500
- border: var(--Tight-borderWidths-sm) solid;
501
- }
502
-
503
- .tsystem-bg_surface\.intent\.action {
504
- background: var(--Tight-colors-surface-intent-action);
505
- }
506
-
507
- .tsystem-bg_surface\.intent\.success {
508
- background: var(--Tight-colors-surface-intent-success);
509
- }
510
-
511
- .tsystem-bg_surface\.intent\.warning {
512
- background: var(--Tight-colors-surface-intent-warning);
537
+ .tsystem-p_15px {
538
+ padding: 15px;
513
539
  }
514
540
 
515
- .tsystem-bg_surface\.intent\.danger {
516
- background: var(--Tight-colors-surface-intent-danger);
541
+ .tsystem-m_0_0_7px_0 {
542
+ margin: 0 0 7px 0;
517
543
  }
518
544
 
519
545
  .tsystem-bd_1px_solid_\{colors\.border\.intent\.action\} {
@@ -528,10 +554,6 @@
528
554
  padding: 0 25px;
529
555
  }
530
556
 
531
- .tsystem-bd_\{borderWidths\.lg\}_solid {
532
- border: var(--Tight-borderWidths-lg) solid;
533
- }
534
-
535
557
  .tsystem-bg_surface\.foreground {
536
558
  background: var(--Tight-colors-surface-foreground);
537
559
  }
@@ -548,6 +570,14 @@
548
570
  border: 2px solid red;
549
571
  }
550
572
 
573
+ .tsystem-m_0_8px {
574
+ margin: 0 8px;
575
+ }
576
+
577
+ .tsystem-anim_linear_1s_spin_infinite {
578
+ animation: linear 1s spin infinite;
579
+ }
580
+
551
581
  .tsystem-anim_shimmer {
552
582
  animation: var(--Tight-animations-shimmer);
553
583
  }
@@ -564,10 +594,6 @@
564
594
  padding: 12px;
565
595
  }
566
596
 
567
- .tsystem-bd_\{borderWidths\.lg\}_solid_\{colors\.border\.layout\.strong\} {
568
- border: var(--Tight-borderWidths-lg) solid var(--Tight-colors-border-layout-strong);
569
- }
570
-
571
597
  .tsystem-bg_surface\.intent\.action\.disabled {
572
598
  background: var(--Tight-colors-surface-intent-action-disabled);
573
599
  }
@@ -580,6 +606,10 @@
580
606
  padding: 20px 15px;
581
607
  }
582
608
 
609
+ .tsystem-bd_\{borderWidths\.lg\}_solid_\{colors\.border\.layout\} {
610
+ border: var(--Tight-borderWidths-lg) solid var(--Tight-colors-border-layout);
611
+ }
612
+
583
613
  .tsystem-bg_surface\.intent\.primary {
584
614
  background: var(--Tight-colors-surface-intent-primary);
585
615
  }
@@ -592,6 +622,10 @@
592
622
  padding: 10px;
593
623
  }
594
624
 
625
+ .tsystem-bd-y_\{borderWidths\.md\}_solid {
626
+ border-block: var(--Tight-borderWidths-md) solid;
627
+ }
628
+
595
629
  .tsystem-p_20px {
596
630
  padding: 20px;
597
631
  }
@@ -600,12 +634,8 @@
600
634
  padding: none;
601
635
  }
602
636
 
603
- .tsystem-p_20px_15px_14px_15px {
604
- padding: 20px 15px 14px 15px;
605
- }
606
-
607
- .tsystem-m_15px {
608
- margin: 15px;
637
+ .tsystem-p_20px_16px_8px_16px {
638
+ padding: 20px 16px 8px 16px;
609
639
  }
610
640
 
611
641
  .tsystem-bg_foreground {
@@ -616,20 +646,64 @@
616
646
  padding: 10px 8px;
617
647
  }
618
648
 
649
+ .tsystem-bd_\{borderWidths\.lg\}_solid {
650
+ border: var(--Tight-borderWidths-lg) solid;
651
+ }
652
+
653
+ .tsystem-bg_surface\.intent\.danger\.opaque {
654
+ background: var(--Tight-colors-surface-intent-danger-opaque);
655
+ }
656
+
657
+ .tsystem-p_1px_0 {
658
+ padding: 1px 0;
659
+ }
660
+
661
+ .tsystem-p_1px {
662
+ padding: 1px;
663
+ }
664
+
619
665
  .tsystem-p_4px_8px {
620
666
  padding: 4px 8px;
621
667
  }
622
668
 
669
+ .tsystem-p_20px_16px {
670
+ padding: 20px 16px;
671
+ }
672
+
673
+ .tsystem-m_16px {
674
+ margin: 16px;
675
+ }
676
+
677
+ .tsystem-bd_1px_solid_\{colors\.border\.intent\.primary\} {
678
+ border: 1px solid var(--Tight-colors-border-intent-primary);
679
+ }
680
+
681
+ .tsystem-anim_spin_1s_linear_infinite {
682
+ animation: spin 1s linear infinite;
683
+ }
684
+
685
+ .tsystem-anim_none {
686
+ animation: none;
687
+ }
688
+
623
689
  .tsystem-p_40px_20px {
624
690
  padding: 40px 20px;
625
691
  }
626
692
 
693
+ .tsystem-bd_\{borderWidths\.md\}_solid_\{colors\.border\.layout\.weak\} {
694
+ border: var(--Tight-borderWidths-md) solid var(--Tight-colors-border-layout-weak);
695
+ }
696
+
697
+ .tsystem-p_18px {
698
+ padding: 18px;
699
+ }
700
+
627
701
  .tsystem-p_15px_15px_0_15px {
628
702
  padding: 15px 15px 0 15px;
629
703
  }
630
704
 
631
- .tsystem-p_0_10px {
632
- padding: 0 10px;
705
+ .tsystem-bd_1px_solid_\{colors\.border\.layout\} {
706
+ border: 1px solid var(--Tight-colors-border-layout);
633
707
  }
634
708
 
635
709
  .tsystem-p_2px {
@@ -644,10 +718,6 @@
644
718
  background: var(--Tight-colors-none);
645
719
  }
646
720
 
647
- .tsystem-bd_1px_solid_\{colors\.border\.layout\} {
648
- border: 1px solid var(--Tight-colors-border-layout);
649
- }
650
-
651
721
  .tsystem-p_10px_25px_10px_15px {
652
722
  padding: 10px 25px 10px 15px;
653
723
  }
@@ -672,10 +742,6 @@
672
742
  padding: 16px 16px 45px 16px;
673
743
  }
674
744
 
675
- .tsystem-bd_\{borderWidths\.sm\}_solid_\{colors\.border\.layout\} {
676
- border: var(--Tight-borderWidths-sm) solid var(--Tight-colors-border-layout);
677
- }
678
-
679
745
  .tsystem-bg_brand\.success {
680
746
  background: var(--Tight-colors-brand-success);
681
747
  }
@@ -684,8 +750,8 @@
684
750
  padding: 2px 6px;
685
751
  }
686
752
 
687
- .tsystem-bd_\{borderWidths\.lg\}_solid_\{colors\.border\.layout\} {
688
- border: var(--Tight-borderWidths-lg) solid var(--Tight-colors-border-layout);
753
+ .tsystem-p_large {
754
+ padding: large;
689
755
  }
690
756
 
691
757
  .tsystem-p_6px_0_6px_6px {
@@ -712,6 +778,38 @@
712
778
  padding: 4px;
713
779
  }
714
780
 
781
+ .tsystem-gap_5px {
782
+ gap: 5px;
783
+ }
784
+
785
+ .tsystem-bdr_sm {
786
+ border-radius: var(--Tight-radii-sm);
787
+ }
788
+
789
+ .tsystem-bd-c_border\.layout {
790
+ border-color: var(--Tight-colors-border-layout);
791
+ }
792
+
793
+ .tsystem-bd-c_border\.intent\.secondary {
794
+ border-color: var(--Tight-colors-border-intent-secondary);
795
+ }
796
+
797
+ .tsystem-bd-c_border\.intent\.action {
798
+ border-color: var(--Tight-colors-border-intent-action);
799
+ }
800
+
801
+ .tsystem-bd-c_border\.intent\.success {
802
+ border-color: var(--Tight-colors-border-intent-success);
803
+ }
804
+
805
+ .tsystem-bd-c_border\.intent\.warning {
806
+ border-color: var(--Tight-colors-border-intent-warning);
807
+ }
808
+
809
+ .tsystem-bd-c_border\.intent\.danger {
810
+ border-color: var(--Tight-colors-border-intent-danger);
811
+ }
812
+
715
813
  .tsystem-ring_none {
716
814
  outline: 2px solid transparent;
717
815
  outline-offset: 2px;
@@ -721,16 +819,16 @@
721
819
  border-radius: var(--Tight-radii-md);
722
820
  }
723
821
 
724
- .tsystem-bd-c_border\.layout {
725
- border-color: var(--Tight-colors-border-layout);
726
- }
727
-
728
822
  .tsystem-gap_9px {
729
823
  gap: 9px;
730
824
  }
731
825
 
732
- .tsystem-gap_5px {
733
- gap: 5px;
826
+ .tsystem-border-style_solid {
827
+ border-style: solid;
828
+ }
829
+
830
+ .tsystem-bdr_borderWidths\.sm {
831
+ border-radius: borderWidths.sm;
734
832
  }
735
833
 
736
834
  .tsystem-ov_hidden {
@@ -765,68 +863,36 @@
765
863
  border-width: var(--Tight-borderWidths-lg);
766
864
  }
767
865
 
768
- .tsystem-border-style_solid {
769
- border-style: solid;
770
- }
771
-
772
866
  .tsystem-bd-c_border\.layout\.strong {
773
867
  border-color: var(--Tight-colors-border-layout-strong);
774
868
  }
775
869
 
776
- .tsystem-gap_15px {
777
- gap: 15px;
778
- }
779
-
780
- .tsystem-bd-c_border\.intent\.warning {
781
- border-color: var(--Tight-colors-border-intent-warning);
782
- }
783
-
784
- .tsystem-bd-c_border\.intent\.action {
785
- border-color: var(--Tight-colors-border-intent-action);
786
- }
787
-
788
- .tsystem-bd-c_border\.intent\.success {
789
- border-color: var(--Tight-colors-border-intent-success);
790
- }
791
-
792
- .tsystem-bd-c_border\.intent\.danger {
793
- border-color: var(--Tight-colors-border-intent-danger);
794
- }
795
-
796
- .tsystem-bd-c_border\.intent\.secondary {
797
- border-color: var(--Tight-colors-border-intent-secondary);
870
+ .tsystem-gap_16px {
871
+ gap: 16px;
798
872
  }
799
873
 
800
- .tsystem-flex_1_1_0 {
801
- flex: 1 1 0;
874
+ .tsystem-gap_4px {
875
+ gap: 4px;
802
876
  }
803
877
 
804
878
  .tsystem-gap_10px {
805
879
  gap: 10px;
806
880
  }
807
881
 
808
- .tsystem-bdr_sm {
809
- border-radius: var(--Tight-radii-sm);
810
- }
811
-
812
- .tsystem-bdr_50\% {
813
- border-radius: 50%;
814
- }
815
-
816
882
  .tsystem-gap_12px {
817
883
  gap: 12px;
818
884
  }
819
885
 
820
- .tsystem-bd-w_1 {
821
- border-width: 1px;
886
+ .tsystem-flex_1 {
887
+ flex: 1 1 0%;
822
888
  }
823
889
 
824
- .tsystem-gap_4px {
825
- gap: 4px;
890
+ .tsystem-bdr_50\% {
891
+ border-radius: 50%;
826
892
  }
827
893
 
828
- .tsystem-flex_1 {
829
- flex: 1 1 0%;
894
+ .tsystem-bd-w_1 {
895
+ border-width: 1px;
830
896
  }
831
897
 
832
898
  .tsystem-td_none {
@@ -865,12 +931,20 @@
865
931
  flex-flow: column;
866
932
  }
867
933
 
934
+ .tsystem-gap_8 {
935
+ gap: 8px;
936
+ }
937
+
938
+ .tsystem-bd-b_1px_solid {
939
+ border-bottom: 1px solid;
940
+ }
941
+
868
942
  .tsystem-bdr_0 {
869
943
  border-radius: 0;
870
944
  }
871
945
 
872
- .tsystem-gap_2px {
873
- gap: 2px;
946
+ .tsystem-gap_4 {
947
+ gap: 4px;
874
948
  }
875
949
 
876
950
  .tsystem-gap_5 {
@@ -885,14 +959,18 @@
885
959
  transition: all 300ms ease-out;
886
960
  }
887
961
 
888
- .tsystem-gap_16px {
889
- gap: 16px;
962
+ .tsystem-flex_1_1_0 {
963
+ flex: 1 1 0;
890
964
  }
891
965
 
892
966
  .tsystem-ov_auto {
893
967
  overflow: auto;
894
968
  }
895
969
 
970
+ .tsystem-gap_2px {
971
+ gap: 2px;
972
+ }
973
+
896
974
  .tsystem-px_8px {
897
975
  padding-inline: 8px;
898
976
  }
@@ -901,6 +979,10 @@
901
979
  background-position: 100% 0;
902
980
  }
903
981
 
982
+ .tsystem-gap_15px {
983
+ gap: 15px;
984
+ }
985
+
904
986
  .tsystem-bdr_zero {
905
987
  border-radius: var(--Tight-radii-zero);
906
988
  }
@@ -909,8 +991,8 @@
909
991
  padding-block: 10px;
910
992
  }
911
993
 
912
- .tsystem-gap_20 {
913
- gap: 20px;
994
+ .tsystem-gap_0 {
995
+ gap: 0;
914
996
  }
915
997
 
916
998
  .tsystem-trs_height_0\.5s\,_width_0\.5s {
@@ -937,18 +1019,14 @@
937
1019
  gap: 9px;
938
1020
  }
939
1021
 
940
- .tsystem-bd-c_strong {
941
- border-color: strong;
942
- }
943
-
944
- .tsystem-bd-b_\{borderWidths\.md\}_solid {
945
- border-bottom: var(--Tight-borderWidths-md) solid;
946
- }
947
-
948
1022
  .tsystem-bd-c_border\.layout\.weak {
949
1023
  border-color: var(--Tight-colors-border-layout-weak);
950
1024
  }
951
1025
 
1026
+ .tsystem-bd-b_\{borderWidths\.md\}_solid_\{colors\.border\.layout\.weak\} {
1027
+ border-bottom: var(--Tight-borderWidths-md) solid var(--Tight-colors-border-layout-weak);
1028
+ }
1029
+
952
1030
  .tsystem-bd-t_none {
953
1031
  border-top: none;
954
1032
  }
@@ -961,6 +1039,10 @@
961
1039
  border-right: none;
962
1040
  }
963
1041
 
1042
+ .tsystem-px_16px {
1043
+ padding-inline: 16px;
1044
+ }
1045
+
964
1046
  .tsystem-bd-t_1px_solid {
965
1047
  border-top: 1px solid;
966
1048
  }
@@ -969,16 +1051,28 @@
969
1051
  place-self: center;
970
1052
  }
971
1053
 
972
- .tsystem-mx_15px {
973
- margin-inline: 15px;
1054
+ .tsystem-bd-t_\{borderWidths\.md\}_solid_\{colors\.border\.layout\.weak\} {
1055
+ border-top: var(--Tight-borderWidths-md) solid var(--Tight-colors-border-layout-weak);
974
1056
  }
975
1057
 
976
- .tsystem-bd-b_\{borderWidths\.md\}_solid_\{colors\.border\.layout\.weak\} {
977
- border-bottom: var(--Tight-borderWidths-md) solid var(--Tight-colors-border-layout-weak);
1058
+ .tsystem-bd-w_1px {
1059
+ border-width: 1px;
1060
+ }
1061
+
1062
+ .tsystem-bd-c_surface\.intent\.warning\.active {
1063
+ border-color: var(--Tight-colors-surface-intent-warning-active);
1064
+ }
1065
+
1066
+ .tsystem-bd-c_surface\.intent\.danger\.weak {
1067
+ border-color: var(--Tight-colors-surface-intent-danger-weak);
978
1068
  }
979
1069
 
980
- .tsystem-my_20px {
981
- margin-block: 20px;
1070
+ .tsystem-bd-c_surface\.intent\.success\.active {
1071
+ border-color: var(--Tight-colors-surface-intent-success-active);
1072
+ }
1073
+
1074
+ .tsystem-flex_1_0_0 {
1075
+ flex: 1 0 0;
982
1076
  }
983
1077
 
984
1078
  .tsystem-bd-w_sm {
@@ -993,8 +1087,12 @@
993
1087
  gap: 10px;
994
1088
  }
995
1089
 
996
- .tsystem-flex_1_0_0 {
997
- flex: 1 0 0;
1090
+ .tsystem-bdr_9999px {
1091
+ border-radius: 9999px;
1092
+ }
1093
+
1094
+ .tsystem-bdr_2px {
1095
+ border-radius: 2px;
998
1096
  }
999
1097
 
1000
1098
  .tsystem-gap_16 {
@@ -1009,6 +1107,10 @@
1009
1107
  border-left: 1px solid var(--Tight-colors-border-layout);
1010
1108
  }
1011
1109
 
1110
+ .tsystem-bd-c_normal {
1111
+ border-color: normal;
1112
+ }
1113
+
1012
1114
  .tsystem-bd-l_1px_solid_\{colors\.border\.layout\.strong\} {
1013
1115
  border-left: 1px solid var(--Tight-colors-border-layout-strong);
1014
1116
  }
@@ -1029,10 +1131,6 @@
1029
1131
  gap: 7px;
1030
1132
  }
1031
1133
 
1032
- .tsystem-bd-w_1px {
1033
- border-width: 1px;
1034
- }
1035
-
1036
1134
  .tsystem-fv_normal {
1037
1135
  font-variant: normal;
1038
1136
  }
@@ -1049,8 +1147,8 @@
1049
1147
  flex: 1 1 100%;
1050
1148
  }
1051
1149
 
1052
- .tsystem-bd-b_\{borderWidths\.lg\}_solid_\{colors\.border\.layout\.strong\} {
1053
- border-bottom: var(--Tight-borderWidths-lg) solid var(--Tight-colors-border-layout-strong);
1150
+ .tsystem-bd-b_\{borderWidths\.lg\}_solid_\{colors\.border\.layout\} {
1151
+ border-bottom: var(--Tight-borderWidths-lg) solid var(--Tight-colors-border-layout);
1054
1152
  }
1055
1153
 
1056
1154
  .tsystem-ov_scroll {
@@ -1061,22 +1159,26 @@
1061
1159
  gap: 6px;
1062
1160
  }
1063
1161
 
1064
- .tsystem-d_flex {
1065
- display: flex;
1066
- }
1067
-
1068
- .tsystem-ai_center {
1069
- align-items: center;
1162
+ .tsystem-d_inline-flex {
1163
+ display: inline-flex;
1070
1164
  }
1071
1165
 
1072
1166
  .tsystem-jc_center {
1073
1167
  justify-content: center;
1074
1168
  }
1075
1169
 
1170
+ .tsystem-ai_center {
1171
+ align-items: center;
1172
+ }
1173
+
1076
1174
  .tsystem-cursor_pointer {
1077
1175
  cursor: pointer;
1078
1176
  }
1079
1177
 
1178
+ .tsystem-d_flex {
1179
+ display: flex;
1180
+ }
1181
+
1080
1182
  .tsystem-c_typography\.intent\.secondary {
1081
1183
  color: var(--Tight-colors-typography-intent-secondary);
1082
1184
  }
@@ -1181,26 +1283,22 @@
1181
1283
  text-align: left;
1182
1284
  }
1183
1285
 
1184
- .tsystem-jc_flex-end {
1185
- justify-content: flex-end;
1186
- }
1187
-
1188
- .tsystem-flex-sh_0 {
1189
- flex-shrink: 0;
1190
- }
1191
-
1192
- .tsystem-jc_space-between {
1193
- justify-content: space-between;
1194
- }
1195
-
1196
1286
  .tsystem-as_stretch {
1197
1287
  align-self: stretch;
1198
1288
  }
1199
1289
 
1290
+ .tsystem-d_none {
1291
+ display: none;
1292
+ }
1293
+
1200
1294
  .tsystem-bg-c_surface\.intent\.secondary {
1201
1295
  background-color: var(--Tight-colors-surface-intent-secondary);
1202
1296
  }
1203
1297
 
1298
+ .tsystem-flex-sh_0 {
1299
+ flex-shrink: 0;
1300
+ }
1301
+
1204
1302
  .tsystem-flex-d_row-reverse {
1205
1303
  flex-direction: row-reverse;
1206
1304
  }
@@ -1209,6 +1307,10 @@
1209
1307
  position: static;
1210
1308
  }
1211
1309
 
1310
+ .tsystem-jc_space-between {
1311
+ justify-content: space-between;
1312
+ }
1313
+
1212
1314
  .tsystem-flex-sh_1 {
1213
1315
  flex-shrink: 1;
1214
1316
  }
@@ -1257,12 +1359,8 @@
1257
1359
  scrollbar-width: thin;
1258
1360
  }
1259
1361
 
1260
- .tsystem-d_grid {
1261
- display: grid;
1262
- }
1263
-
1264
- .tsystem-grid-tc_3fr_1fr {
1265
- grid-template-columns: 3fr 1fr;
1362
+ .tsystem-ai_stretch {
1363
+ align-items: stretch;
1266
1364
  }
1267
1365
 
1268
1366
  .tsystem-bg-c_transparent {
@@ -1277,10 +1375,6 @@
1277
1375
  justify-content: end;
1278
1376
  }
1279
1377
 
1280
- .tsystem-ai_stretch {
1281
- align-items: stretch;
1282
- }
1283
-
1284
1378
  .tsystem-bg-c_border\.layout {
1285
1379
  background-color: var(--Tight-colors-border-layout);
1286
1380
  }
@@ -1289,6 +1383,10 @@
1289
1383
  text-align: center;
1290
1384
  }
1291
1385
 
1386
+ .tsystem-jc_flex-end {
1387
+ justify-content: flex-end;
1388
+ }
1389
+
1292
1390
  .tsystem-pos_fixed {
1293
1391
  position: fixed;
1294
1392
  }
@@ -1297,10 +1395,6 @@
1297
1395
  background-color: var(--Tight-colors-overlay);
1298
1396
  }
1299
1397
 
1300
- .tsystem-d_none {
1301
- display: none;
1302
- }
1303
-
1304
1398
  .tsystem-flex-g_1 {
1305
1399
  flex-grow: 1;
1306
1400
  }
@@ -1393,10 +1487,6 @@
1393
1487
  object-fit: contain;
1394
1488
  }
1395
1489
 
1396
- .tsystem-d_inline-flex {
1397
- display: inline-flex;
1398
- }
1399
-
1400
1490
  .tsystem-c_typography\.intent\.action {
1401
1491
  color: var(--Tight-colors-typography-intent-action);
1402
1492
  }
@@ -1571,6 +1661,18 @@
1571
1661
  color: var(--Tight-colors-typography-accent-action);
1572
1662
  }
1573
1663
 
1664
+ .tsystem-d_-webkit-box {
1665
+ display: -webkit-box;
1666
+ }
1667
+
1668
+ .tsystem--webkit-line-clamp_3 {
1669
+ -webkit-line-clamp: 3;
1670
+ }
1671
+
1672
+ .tsystem--webkit-box-orient_vertical {
1673
+ -webkit-box-orient: vertical;
1674
+ }
1675
+
1574
1676
  .tsystem-c_typography\.base\.weak {
1575
1677
  color: var(--Tight-colors-typography-base-weak);
1576
1678
  }
@@ -1708,18 +1810,30 @@
1708
1810
  user-select: none;
1709
1811
  }
1710
1812
 
1711
- .tsystem-bd-be-w_var\(--thickness\) {
1712
- border-block-end-width: var(--thickness);
1813
+ .tsystem-c_brand\.danger {
1814
+ color: var(--Tight-colors-brand-danger);
1815
+ }
1816
+
1817
+ .tsystem-c_brand\.primary\.weak {
1818
+ color: var(--Tight-colors-brand-primary-weak);
1713
1819
  }
1714
1820
 
1715
1821
  .tsystem-d_block {
1716
1822
  display: block;
1717
1823
  }
1718
1824
 
1825
+ .tsystem-d_grid {
1826
+ display: grid;
1827
+ }
1828
+
1719
1829
  .tsystem-grid-tc_1fr {
1720
1830
  grid-template-columns: 1fr;
1721
1831
  }
1722
1832
 
1833
+ .tsystem-bd-be-w_var\(--thickness\) {
1834
+ border-block-end-width: var(--thickness);
1835
+ }
1836
+
1723
1837
  .tsystem-grid-tc_300px_auto_175px {
1724
1838
  grid-template-columns: 300px auto 175px;
1725
1839
  }
@@ -1736,6 +1850,10 @@
1736
1850
  transform: rotate(90deg);
1737
1851
  }
1738
1852
 
1853
+ .tsystem-fs_14px {
1854
+ font-size: 14px;
1855
+ }
1856
+
1739
1857
  .tsystem-fs_26px {
1740
1858
  font-size: 26px;
1741
1859
  }
@@ -1761,14 +1879,26 @@
1761
1879
  stroke: var(--Tight-colors-icon-base-weak);
1762
1880
  }
1763
1881
 
1764
- .tsystem-lh_14px {
1765
- line-height: 14px;
1882
+ .tsystem-ai_flexStart {
1883
+ align-items: flexStart;
1766
1884
  }
1767
1885
 
1768
1886
  .tsystem-stk_icon\.base {
1769
1887
  stroke: var(--Tight-colors-icon-base);
1770
1888
  }
1771
1889
 
1890
+ .tsystem-fs_16px {
1891
+ font-size: 16px;
1892
+ }
1893
+
1894
+ .tsystem-ls_0\.96px {
1895
+ letter-spacing: 0.96px;
1896
+ }
1897
+
1898
+ .tsystem-lh_14px {
1899
+ line-height: 14px;
1900
+ }
1901
+
1772
1902
  .tsystem-bg-c_brand\.secondary {
1773
1903
  background-color: var(--Tight-colors-brand-secondary);
1774
1904
  }
@@ -1852,8 +1982,32 @@
1852
1982
  -webkit-appearance: none;
1853
1983
  }
1854
1984
 
1855
- .tsystem-fs_16px {
1856
- font-size: 16px;
1985
+ .tsystem-stk_var\(--Tight-colors-border-layout\) {
1986
+ stroke: var(--Tight-colors-border-layout);
1987
+ }
1988
+
1989
+ .tsystem-fill_var\(--Tight-colors-money-negative-weak\) {
1990
+ fill: var(--Tight-colors-money-negative-weak);
1991
+ }
1992
+
1993
+ .tsystem-fill_var\(--Tight-colors-money-positive-weak\) {
1994
+ fill: var(--Tight-colors-money-positive-weak);
1995
+ }
1996
+
1997
+ .tsystem-c_var\(--Tight-colors-money-positive-weak\) {
1998
+ color: var(--Tight-colors-money-positive-weak);
1999
+ }
2000
+
2001
+ .tsystem-c_var\(--Tight-colors-money-negative-weak\) {
2002
+ color: var(--Tight-colors-money-negative-weak);
2003
+ }
2004
+
2005
+ .tsystem-c_var\(--Tight-colors-money-positive\) {
2006
+ color: var(--Tight-colors-money-positive);
2007
+ }
2008
+
2009
+ .tsystem-c_var\(--Tight-colors-money-negative\) {
2010
+ color: var(--Tight-colors-money-negative);
1857
2011
  }
1858
2012
 
1859
2013
  .tsystem-bg-c_money\.positive\.weak {
@@ -1872,26 +2026,14 @@
1872
2026
  stroke-dasharray: 0;
1873
2027
  }
1874
2028
 
1875
- .tsystem-stk_var\(--Tight-colors-border-layout\) {
1876
- stroke: var(--Tight-colors-border-layout);
1877
- }
1878
-
1879
2029
  .tsystem-fill_var\(--Tight-colors-money-positive\) {
1880
2030
  fill: var(--Tight-colors-money-positive);
1881
2031
  }
1882
2032
 
1883
- .tsystem-fill_var\(--Tight-colors-money-positive-weak\) {
1884
- fill: var(--Tight-colors-money-positive-weak);
1885
- }
1886
-
1887
2033
  .tsystem-fill_var\(--Tight-colors-money-negative\) {
1888
2034
  fill: var(--Tight-colors-money-negative);
1889
2035
  }
1890
2036
 
1891
- .tsystem-fill_var\(--Tight-colors-money-negative-weak\) {
1892
- fill: var(--Tight-colors-money-negative-weak);
1893
- }
1894
-
1895
2037
  .tsystem-fill_var\(--Tight-colors-border-layout\) {
1896
2038
  fill: var(--Tight-colors-border-layout);
1897
2039
  }
@@ -1940,6 +2082,10 @@
1940
2082
  max-width: 100%;
1941
2083
  }
1942
2084
 
2085
+ .tsystem-w_fit-content {
2086
+ width: fit-content;
2087
+ }
2088
+
1943
2089
  .tsystem-w_50px {
1944
2090
  width: 50px;
1945
2091
  }
@@ -1948,6 +2094,14 @@
1948
2094
  height: 50px;
1949
2095
  }
1950
2096
 
2097
+ .tsystem-h_44px {
2098
+ height: 44px;
2099
+ }
2100
+
2101
+ .tsystem-w_fill-parent {
2102
+ width: fill-parent;
2103
+ }
2104
+
1951
2105
  .tsystem-w_100\% {
1952
2106
  width: 100%;
1953
2107
  }
@@ -1956,32 +2110,48 @@
1956
2110
  width: sm;
1957
2111
  }
1958
2112
 
1959
- .tsystem-w_202px {
1960
- width: 202px;
2113
+ .tsystem-h_72 {
2114
+ height: 72px;
1961
2115
  }
1962
2116
 
1963
- .tsystem-min-w_350px {
1964
- min-width: 350px;
2117
+ .tsystem-min-w_300px {
2118
+ min-width: 300px;
1965
2119
  }
1966
2120
 
1967
- .tsystem-min-w_200px {
1968
- min-width: 200px;
2121
+ .tsystem-w_20px {
2122
+ width: 20px;
1969
2123
  }
1970
2124
 
1971
- .tsystem-h_72 {
1972
- height: 72px;
2125
+ .tsystem-h_20px {
2126
+ height: 20px;
1973
2127
  }
1974
2128
 
1975
- .tsystem-min-w_300px {
1976
- min-width: 300px;
2129
+ .tsystem-pl_16px {
2130
+ padding-left: 16px;
2131
+ }
2132
+
2133
+ .tsystem-pr_16px {
2134
+ padding-right: 16px;
2135
+ }
2136
+
2137
+ .tsystem-w_200px {
2138
+ width: 200px;
2139
+ }
2140
+
2141
+ .tsystem-h_48px {
2142
+ height: 48px;
2143
+ }
2144
+
2145
+ .tsystem-bd-l-w_4px {
2146
+ border-left-width: 4px;
1977
2147
  }
1978
2148
 
1979
- .tsystem-w_20px {
1980
- width: 20px;
2149
+ .tsystem-border-left-style_solid {
2150
+ border-left-style: solid;
1981
2151
  }
1982
2152
 
1983
- .tsystem-h_20px {
1984
- height: 20px;
2153
+ .tsystem-bd-l-c_brand\.action\.strong {
2154
+ border-left-color: var(--Tight-colors-brand-action-strong);
1985
2155
  }
1986
2156
 
1987
2157
  .tsystem-h_32px {
@@ -2080,6 +2250,18 @@
2080
2250
  height: xl;
2081
2251
  }
2082
2252
 
2253
+ .tsystem-bd-b-c_border\.layout\.weak {
2254
+ border-bottom-color: var(--Tight-colors-border-layout-weak);
2255
+ }
2256
+
2257
+ .tsystem-pt_16px {
2258
+ padding-top: 16px;
2259
+ }
2260
+
2261
+ .tsystem-pb_16px {
2262
+ padding-bottom: 16px;
2263
+ }
2264
+
2083
2265
  .tsystem-pl_16 {
2084
2266
  padding-left: 16px;
2085
2267
  }
@@ -2204,10 +2386,6 @@
2204
2386
  height: 24px;
2205
2387
  }
2206
2388
 
2207
- .tsystem-w_fit-content {
2208
- width: fit-content;
2209
- }
2210
-
2211
2389
  .tsystem-w_15px {
2212
2390
  width: 15px;
2213
2391
  }
@@ -2216,6 +2394,10 @@
2216
2394
  height: 15px;
2217
2395
  }
2218
2396
 
2397
+ .tsystem-h_37px {
2398
+ height: 37px;
2399
+ }
2400
+
2219
2401
  .tsystem-w_\{borderWidths\.md\} {
2220
2402
  width: var(--Tight-borderWidths-md);
2221
2403
  }
@@ -2280,6 +2462,10 @@
2280
2462
  width: max-content;
2281
2463
  }
2282
2464
 
2465
+ .tsystem-w_44px {
2466
+ width: 44px;
2467
+ }
2468
+
2283
2469
  .tsystem-min-w_fit-content {
2284
2470
  min-width: fit-content;
2285
2471
  }
@@ -2348,10 +2534,6 @@
2348
2534
  width: calc(100% - 2);
2349
2535
  }
2350
2536
 
2351
- .tsystem-h_44px {
2352
- height: 44px;
2353
- }
2354
-
2355
2537
  .tsystem-w_40\% {
2356
2538
  width: 40%;
2357
2539
  }
@@ -2368,20 +2550,8 @@
2368
2550
  padding-bottom: 20px;
2369
2551
  }
2370
2552
 
2371
- .tsystem-pt_20px {
2372
- padding-top: 20px;
2373
- }
2374
-
2375
- .tsystem-pb_14px {
2376
- padding-bottom: 14px;
2377
- }
2378
-
2379
- .tsystem-pl_15px {
2380
- padding-left: 15px;
2381
- }
2382
-
2383
- .tsystem-pr_15px {
2384
- padding-right: 15px;
2553
+ .tsystem-mb_8px {
2554
+ margin-bottom: 8px;
2385
2555
  }
2386
2556
 
2387
2557
  .tsystem-pt_10px {
@@ -2404,10 +2574,6 @@
2404
2574
  margin-bottom: 15px;
2405
2575
  }
2406
2576
 
2407
- .tsystem-w_fill-parent {
2408
- width: fill-parent;
2409
- }
2410
-
2411
2577
  .tsystem-pr_10px {
2412
2578
  padding-right: 10px;
2413
2579
  }
@@ -2424,6 +2590,10 @@
2424
2590
  margin-bottom: 5px;
2425
2591
  }
2426
2592
 
2593
+ .tsystem-bd-t-c_transparent {
2594
+ border-top-color: var(--Tight-colors-transparent);
2595
+ }
2596
+
2427
2597
  .tsystem-h_45px {
2428
2598
  height: 45px;
2429
2599
  }
@@ -2440,12 +2610,16 @@
2440
2610
  height: 16px;
2441
2611
  }
2442
2612
 
2443
- .tsystem-mb_8px {
2444
- margin-bottom: 8px;
2613
+ .tsystem-pb_8px {
2614
+ padding-bottom: 8px;
2445
2615
  }
2446
2616
 
2447
- .tsystem-mb_20px {
2448
- margin-bottom: 20px;
2617
+ .tsystem-pl_8px {
2618
+ padding-left: 8px;
2619
+ }
2620
+
2621
+ .tsystem-pl_4px {
2622
+ padding-left: 4px;
2449
2623
  }
2450
2624
 
2451
2625
  .tsystem-bottom_-25px {
@@ -2464,8 +2638,8 @@
2464
2638
  width: 26px;
2465
2639
  }
2466
2640
 
2467
- .tsystem-mt_0px {
2468
- margin-top: 0px;
2641
+ .tsystem-mt_16px {
2642
+ margin-top: 16px;
2469
2643
  }
2470
2644
 
2471
2645
  .tsystem-max-w_1440 {
@@ -2476,6 +2650,14 @@
2476
2650
  height: 80px;
2477
2651
  }
2478
2652
 
2653
+ .tsystem-pl_15px {
2654
+ padding-left: 15px;
2655
+ }
2656
+
2657
+ .tsystem-pr_15px {
2658
+ padding-right: 15px;
2659
+ }
2660
+
2479
2661
  .tsystem-pl_20px {
2480
2662
  padding-left: 20px;
2481
2663
  }
@@ -2484,20 +2666,20 @@
2484
2666
  padding-right: 5px;
2485
2667
  }
2486
2668
 
2487
- .tsystem-h_35px {
2488
- height: 35px;
2669
+ .tsystem-w_20 {
2670
+ width: 20px;
2489
2671
  }
2490
2672
 
2491
- .tsystem-w_14px {
2492
- width: 14px;
2673
+ .tsystem-min-w_20 {
2674
+ min-width: 20px;
2493
2675
  }
2494
2676
 
2495
- .tsystem-h_14px {
2496
- height: 14px;
2677
+ .tsystem-h_20 {
2678
+ height: 20px;
2497
2679
  }
2498
2680
 
2499
- .tsystem-max-w_200px {
2500
- max-width: 200px;
2681
+ .tsystem-min-h_20 {
2682
+ min-height: 20px;
2501
2683
  }
2502
2684
 
2503
2685
  .tsystem-pl_5px {
@@ -2508,6 +2690,22 @@
2508
2690
  margin-right: 15px;
2509
2691
  }
2510
2692
 
2693
+ .tsystem-w_25 {
2694
+ width: 25px;
2695
+ }
2696
+
2697
+ .tsystem-w_14px {
2698
+ width: 14px;
2699
+ }
2700
+
2701
+ .tsystem-h_14px {
2702
+ height: 14px;
2703
+ }
2704
+
2705
+ .tsystem-max-w_200px {
2706
+ max-width: 200px;
2707
+ }
2708
+
2511
2709
  .tsystem-h_17px {
2512
2710
  height: 17px;
2513
2711
  }
@@ -2516,10 +2714,6 @@
2516
2714
  margin-bottom: 10px;
2517
2715
  }
2518
2716
 
2519
- .tsystem-w_200px {
2520
- width: 200px;
2521
- }
2522
-
2523
2717
  .tsystem-h_52px {
2524
2718
  height: 52px;
2525
2719
  }
@@ -2568,6 +2762,10 @@
2568
2762
  margin-top: 35px;
2569
2763
  }
2570
2764
 
2765
+ .tsystem-mb_20px {
2766
+ margin-bottom: 20px;
2767
+ }
2768
+
2571
2769
  .tsystem-w_full {
2572
2770
  width: full;
2573
2771
  }
@@ -2624,6 +2822,18 @@
2624
2822
  padding-left: 25px;
2625
2823
  }
2626
2824
 
2825
+ .tsystem-w_300px {
2826
+ width: 300px;
2827
+ }
2828
+
2829
+ .tsystem-min-h_100\% {
2830
+ min-height: 100%;
2831
+ }
2832
+
2833
+ .tsystem-top_20 {
2834
+ top: 20px;
2835
+ }
2836
+
2627
2837
  .tsystem-right_20 {
2628
2838
  right: 20px;
2629
2839
  }
@@ -2632,6 +2842,18 @@
2632
2842
  left: 20px;
2633
2843
  }
2634
2844
 
2845
+ .tsystem-bottom_5 {
2846
+ bottom: 5px;
2847
+ }
2848
+
2849
+ .tsystem-min-w_180px {
2850
+ min-width: 180px;
2851
+ }
2852
+
2853
+ .tsystem-h_1px {
2854
+ height: 1px;
2855
+ }
2856
+
2635
2857
  .tsystem-max-h_247px {
2636
2858
  max-height: 247px;
2637
2859
  }
@@ -2696,18 +2918,42 @@
2696
2918
  padding-top: 50px;
2697
2919
  }
2698
2920
 
2699
- .tsystem-pb_8px {
2700
- padding-bottom: 8px;
2701
- }
2702
-
2703
2921
  .tsystem-max-w_fit-content {
2704
2922
  max-width: fit-content;
2705
2923
  }
2706
2924
 
2925
+ .tsystem-pl_0 {
2926
+ padding-left: 0;
2927
+ }
2928
+
2707
2929
  .tsystem-pl_19px {
2708
2930
  padding-left: 19px;
2709
2931
  }
2710
2932
 
2933
+ .tsystem-pl_33px {
2934
+ padding-left: 33px;
2935
+ }
2936
+
2937
+ .tsystem-pr_0 {
2938
+ padding-right: 0;
2939
+ }
2940
+
2941
+ .tsystem-pr_19px {
2942
+ padding-right: 19px;
2943
+ }
2944
+
2945
+ .tsystem-pr_33px {
2946
+ padding-right: 33px;
2947
+ }
2948
+
2949
+ .tsystem-min-w_24 {
2950
+ min-width: 24px;
2951
+ }
2952
+
2953
+ .tsystem-min-h_24 {
2954
+ min-height: 24px;
2955
+ }
2956
+
2711
2957
  .tsystem-max-w_120px {
2712
2958
  max-width: 120px;
2713
2959
  }
@@ -2716,10 +2962,6 @@
2716
2962
  width: 1px;
2717
2963
  }
2718
2964
 
2719
- .tsystem-h_1px {
2720
- height: 1px;
2721
- }
2722
-
2723
2965
  .tsystem-ml_auto {
2724
2966
  margin-left: auto;
2725
2967
  }
@@ -2790,78 +3032,78 @@
2790
3032
  border-color: var(--Tight-colors-border-intent-action-active);
2791
3033
  }
2792
3034
 
2793
- .\[\&\:disabled\]\:tsystem-cursor_not-allowed:disabled {
2794
- cursor: not-allowed;
2795
- }
2796
-
2797
- .\[\&\:disabled\]\:tsystem-op_0\.6:disabled {
2798
- opacity: 0.6;
2799
- }
2800
-
2801
- .\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.secondary .Tight-text {
2802
- color: var(--Tight-colors-typography-intent-secondary);
2803
- }
2804
-
2805
- .\[\&\:disabled\]\:tsystem-cursor_default:disabled {
2806
- cursor: default;
2807
- }
2808
-
2809
- .\[\&_path\]\:tsystem-stk_icon\.base path {
2810
- stroke: var(--Tight-colors-icon-base);
2811
- }
2812
-
2813
- .\[\&_path\]\:tsystem-stk_icon\.accent\.danger path {
2814
- stroke: var(--Tight-colors-icon-accent-danger);
2815
- }
2816
-
2817
3035
  .\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.base .Tight-sub-label {
2818
3036
  color: var(--Tight-colors-typography-base);
2819
3037
  }
2820
3038
 
2821
- .\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.base .Tight-medium-icon > path {
3039
+ .\[\&_\.Tight-icon_\>_path\]\:tsystem-stk_icon\.base .Tight-icon > path {
2822
3040
  stroke: var(--Tight-colors-icon-base);
2823
3041
  }
2824
3042
 
2825
- .\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.secondary .Tight-sub-label {
3043
+ .\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.secondary .Tight-sub-label,.\[\&_\.Tight-label\]\:tsystem-c_typography\.intent\.secondary .Tight-label {
2826
3044
  color: var(--Tight-colors-typography-intent-secondary);
2827
3045
  }
2828
3046
 
2829
- .\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.secondary .Tight-medium-icon > path {
3047
+ .\[\&_\.Tight-icon_\>_path\]\:tsystem-stk_icon\.intent\.secondary .Tight-icon > path {
2830
3048
  stroke: var(--Tight-colors-icon-intent-secondary);
2831
3049
  }
2832
3050
 
2833
- .\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.action .Tight-sub-label {
3051
+ .\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.action .Tight-sub-label,.\[\&_\.Tight-label\]\:tsystem-c_typography\.intent\.action .Tight-label {
2834
3052
  color: var(--Tight-colors-typography-intent-action);
2835
3053
  }
2836
3054
 
2837
- .\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.action .Tight-medium-icon > path {
3055
+ .\[\&_\.Tight-icon_\>_path\]\:tsystem-stk_icon\.intent\.action .Tight-icon > path {
2838
3056
  stroke: var(--Tight-colors-icon-intent-action);
2839
3057
  }
2840
3058
 
2841
- .\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.success .Tight-sub-label {
3059
+ .\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.success .Tight-sub-label,.\[\&_\.Tight-label\]\:tsystem-c_typography\.intent\.success .Tight-label {
2842
3060
  color: var(--Tight-colors-typography-intent-success);
2843
3061
  }
2844
3062
 
2845
- .\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.success .Tight-medium-icon > path {
3063
+ .\[\&_\.Tight-icon_\>_path\]\:tsystem-stk_icon\.intent\.success .Tight-icon > path {
2846
3064
  stroke: var(--Tight-colors-icon-intent-success);
2847
3065
  }
2848
3066
 
2849
- .\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.warning .Tight-sub-label {
3067
+ .\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.warning .Tight-sub-label,.\[\&_\.Tight-label\]\:tsystem-c_typography\.intent\.warning .Tight-label {
2850
3068
  color: var(--Tight-colors-typography-intent-warning);
2851
3069
  }
2852
3070
 
2853
- .\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.warning .Tight-medium-icon > path {
3071
+ .\[\&_\.Tight-icon_\>_path\]\:tsystem-stk_icon\.intent\.warning .Tight-icon > path {
2854
3072
  stroke: var(--Tight-colors-icon-intent-warning);
2855
3073
  }
2856
3074
 
2857
- .\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.danger .Tight-sub-label {
3075
+ .\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.danger .Tight-sub-label,.\[\&_\.Tight-label\]\:tsystem-c_typography\.intent\.danger .Tight-label {
2858
3076
  color: var(--Tight-colors-typography-intent-danger);
2859
3077
  }
2860
3078
 
2861
- .\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.danger .Tight-medium-icon > path {
3079
+ .\[\&_\.Tight-icon_\>_path\]\:tsystem-stk_icon\.intent\.danger .Tight-icon > path {
2862
3080
  stroke: var(--Tight-colors-icon-intent-danger);
2863
3081
  }
2864
3082
 
3083
+ .\[\&\:disabled\]\:tsystem-cursor_not-allowed:disabled {
3084
+ cursor: not-allowed;
3085
+ }
3086
+
3087
+ .\[\&\:disabled\]\:tsystem-op_0\.6:disabled {
3088
+ opacity: 0.6;
3089
+ }
3090
+
3091
+ .\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.secondary .Tight-text {
3092
+ color: var(--Tight-colors-typography-intent-secondary);
3093
+ }
3094
+
3095
+ .\[\&\:disabled\]\:tsystem-cursor_default:disabled {
3096
+ cursor: default;
3097
+ }
3098
+
3099
+ .\[\&_path\]\:tsystem-stk_icon\.base path {
3100
+ stroke: var(--Tight-colors-icon-base);
3101
+ }
3102
+
3103
+ .\[\&_path\]\:tsystem-stk_icon\.accent\.danger path {
3104
+ stroke: var(--Tight-colors-icon-accent-danger);
3105
+ }
3106
+
2865
3107
  .\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.action .Tight-text {
2866
3108
  color: var(--Tight-colors-typography-intent-action);
2867
3109
  }
@@ -2934,6 +3176,10 @@
2934
3176
  pointer-events: none;
2935
3177
  }
2936
3178
 
3179
+ .placeholder\:tsystem-c_typography\.base\.weak::placeholder,.placeholder\:tsystem-c_typography\.base\.weak[data-placeholder] {
3180
+ color: var(--Tight-colors-typography-base-weak);
3181
+ }
3182
+
2937
3183
  .disabled\:tsystem-cursor_default:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
2938
3184
  cursor: default;
2939
3185
  }
@@ -3123,19 +3369,6 @@
3123
3369
  background: var(--Tight-colors-surface-intent-danger-hover);
3124
3370
  }
3125
3371
 
3126
- .\[\&\:focus-visible\]\:tsystem-ring_4px_solid:focus-visible {
3127
- outline: 4px solid;
3128
- }
3129
-
3130
- .focusVisible\:tsystem-ring_4px_solid:is(:focus-visible, [data-focus-visible]) {
3131
- outline: 4px solid;
3132
- }
3133
-
3134
- .focus\:tsystem-ring_none:is(:focus, [data-focus]) {
3135
- outline: 2px solid transparent;
3136
- outline-offset: 2px;
3137
- }
3138
-
3139
3372
  .\[\&\:focus\]\:tsystem-ring_none:focus {
3140
3373
  outline: 2px solid transparent;
3141
3374
  outline-offset: 2px;
@@ -3161,6 +3394,19 @@
3161
3394
  border-color: var(--Tight-colors-border-intent-danger-hover);
3162
3395
  }
3163
3396
 
3397
+ .\[\&\:focus-visible\]\:tsystem-ring_4px_solid:focus-visible {
3398
+ outline: 4px solid;
3399
+ }
3400
+
3401
+ .focusVisible\:tsystem-ring_4px_solid:is(:focus-visible, [data-focus-visible]) {
3402
+ outline: 4px solid;
3403
+ }
3404
+
3405
+ .focus\:tsystem-ring_none:is(:focus, [data-focus]) {
3406
+ outline: 2px solid transparent;
3407
+ outline-offset: 2px;
3408
+ }
3409
+
3164
3410
  .\[\&\:focus-visible\]\:tsystem-trs_none:focus-visible {
3165
3411
  transition: none;
3166
3412
  }
@@ -3177,6 +3423,10 @@
3177
3423
  outline: 4px solid;
3178
3424
  }
3179
3425
 
3426
+ .\[\&\:focus-visible\]\:tsystem-ring_2px_solid:focus-visible {
3427
+ outline: 2px solid;
3428
+ }
3429
+
3180
3430
  .\[\&\:has\(button\:focus-visible\)\]\:tsystem-ring_4px_solid:has(button:focus-visible) {
3181
3431
  outline: 4px solid;
3182
3432
  }
@@ -3225,6 +3475,10 @@
3225
3475
  outline-color: var(--Tight-colors-border-layout);
3226
3476
  }
3227
3477
 
3478
+ .\[\&\:focus-visible\]\:tsystem-ring-o_2px:focus-visible {
3479
+ outline-offset: 2px;
3480
+ }
3481
+
3228
3482
  .focus\:tsystem-z_1:is(:focus, [data-focus]) {
3229
3483
  z-index: 1;
3230
3484
  }
@@ -3245,10 +3499,6 @@
3245
3499
  outline-offset: 2px;
3246
3500
  }
3247
3501
 
3248
- .\[\&\:focus-visible\]\:tsystem-ring-o_2px:focus-visible {
3249
- outline-offset: 2px;
3250
- }
3251
-
3252
3502
  .\[\&\:focus-visible\:\:before\]\:tsystem-top_0:focus-visible::before {
3253
3503
  top: 0;
3254
3504
  }
@@ -3269,6 +3519,10 @@
3269
3519
  background-color: var(--Tight-colors-surface-intent-action-hover);
3270
3520
  }
3271
3521
 
3522
+ .hover\:tsystem-bg-c_brand\.action\.opaque:is(:hover, [data-hover]) {
3523
+ background-color: var(--Tight-colors-brand-action-opaque);
3524
+ }
3525
+
3272
3526
  .hover\:tsystem-bg-c_surface\.intent\.action\.discrete\.hover:is(:hover, [data-hover]) {
3273
3527
  background-color: var(--Tight-colors-surface-intent-action-discrete-hover);
3274
3528
  }
@@ -3337,7 +3591,11 @@
3337
3591
  color: var(--Tight-colors-typography-intent-secondary-hover);
3338
3592
  }
3339
3593
 
3340
- .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.secondary\.hover:focus-visible .Tight-medium-icon > path,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.secondary\.hover[data-state='open'] .Tight-medium-icon > path {
3594
+ .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-label\]\:tsystem-c_typography\.intent\.secondary\.hover:focus-visible .Tight-label,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-label\]\:tsystem-c_typography\.intent\.secondary\.hover[data-state='open'] .Tight-label {
3595
+ color: var(--Tight-colors-typography-intent-secondary-hover);
3596
+ }
3597
+
3598
+ .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-icon_\>_path\]\:tsystem-stk_icon\.intent\.secondary\.hover:focus-visible .Tight-icon > path,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-icon_\>_path\]\:tsystem-stk_icon\.intent\.secondary\.hover[data-state='open'] .Tight-icon > path {
3341
3599
  stroke: var(--Tight-colors-icon-intent-secondary-hover);
3342
3600
  }
3343
3601
 
@@ -3345,7 +3603,11 @@
3345
3603
  color: var(--Tight-colors-typography-intent-action-hover);
3346
3604
  }
3347
3605
 
3348
- .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.action\.hover:focus-visible .Tight-medium-icon > path,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.action\.hover[data-state='open'] .Tight-medium-icon > path {
3606
+ .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-label\]\:tsystem-c_typography\.intent\.action\.hover:focus-visible .Tight-label,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-label\]\:tsystem-c_typography\.intent\.action\.hover[data-state='open'] .Tight-label {
3607
+ color: var(--Tight-colors-typography-intent-action-hover);
3608
+ }
3609
+
3610
+ .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-icon_\>_path\]\:tsystem-stk_icon\.intent\.action\.hover:focus-visible .Tight-icon > path,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-icon_\>_path\]\:tsystem-stk_icon\.intent\.action\.hover[data-state='open'] .Tight-icon > path {
3349
3611
  stroke: var(--Tight-colors-icon-intent-action-hover);
3350
3612
  }
3351
3613
 
@@ -3353,7 +3615,11 @@
3353
3615
  color: var(--Tight-colors-typography-intent-success-hover);
3354
3616
  }
3355
3617
 
3356
- .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.success\.hover:focus-visible .Tight-medium-icon > path,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.success\.hover[data-state='open'] .Tight-medium-icon > path {
3618
+ .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-label\]\:tsystem-c_typography\.intent\.success\.hover:focus-visible .Tight-label,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-label\]\:tsystem-c_typography\.intent\.success\.hover[data-state='open'] .Tight-label {
3619
+ color: var(--Tight-colors-typography-intent-success-hover);
3620
+ }
3621
+
3622
+ .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-icon_\>_path\]\:tsystem-stk_icon\.intent\.success\.hover:focus-visible .Tight-icon > path,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-icon_\>_path\]\:tsystem-stk_icon\.intent\.success\.hover[data-state='open'] .Tight-icon > path {
3357
3623
  stroke: var(--Tight-colors-icon-intent-success-hover);
3358
3624
  }
3359
3625
 
@@ -3361,7 +3627,11 @@
3361
3627
  color: var(--Tight-colors-typography-intent-warning-hover);
3362
3628
  }
3363
3629
 
3364
- .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.warning\.hover:focus-visible .Tight-medium-icon > path,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.warning\.hover[data-state='open'] .Tight-medium-icon > path {
3630
+ .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-label\]\:tsystem-c_typography\.intent\.warning\.hover:focus-visible .Tight-label,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-label\]\:tsystem-c_typography\.intent\.warning\.hover[data-state='open'] .Tight-label {
3631
+ color: var(--Tight-colors-typography-intent-warning-hover);
3632
+ }
3633
+
3634
+ .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-icon_\>_path\]\:tsystem-stk_icon\.intent\.warning\.hover:focus-visible .Tight-icon > path,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-icon_\>_path\]\:tsystem-stk_icon\.intent\.warning\.hover[data-state='open'] .Tight-icon > path {
3365
3635
  stroke: var(--Tight-colors-icon-intent-warning-hover);
3366
3636
  }
3367
3637
 
@@ -3369,7 +3639,11 @@
3369
3639
  color: var(--Tight-colors-typography-intent-danger-hover);
3370
3640
  }
3371
3641
 
3372
- .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.danger\.hover:focus-visible .Tight-medium-icon > path,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.danger\.hover[data-state='open'] .Tight-medium-icon > path {
3642
+ .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-label\]\:tsystem-c_typography\.intent\.danger\.hover:focus-visible .Tight-label,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-label\]\:tsystem-c_typography\.intent\.danger\.hover[data-state='open'] .Tight-label {
3643
+ color: var(--Tight-colors-typography-intent-danger-hover);
3644
+ }
3645
+
3646
+ .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-icon_\>_path\]\:tsystem-stk_icon\.intent\.danger\.hover:focus-visible .Tight-icon > path,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-icon_\>_path\]\:tsystem-stk_icon\.intent\.danger\.hover[data-state='open'] .Tight-icon > path {
3373
3647
  stroke: var(--Tight-colors-icon-intent-danger-hover);
3374
3648
  }
3375
3649
 
@@ -3414,18 +3688,10 @@
3414
3688
  margin: 32px;
3415
3689
  }
3416
3690
 
3417
- .sm\:tsystem-p_4px {
3418
- padding: 4px;
3419
- }
3420
-
3421
3691
  .sm\:tsystem-p_10px {
3422
3692
  padding: 10px;
3423
3693
  }
3424
3694
 
3425
- .sm\:tsystem-bd_\{borderWidths\.md\}_solid_\{colors\.border\.layout\} {
3426
- border: var(--Tight-borderWidths-md) solid var(--Tight-colors-border-layout);
3427
- }
3428
-
3429
3695
  .sm\:tsystem-bd-c_transparent {
3430
3696
  border-color: var(--Tight-colors-transparent);
3431
3697
  }
@@ -3450,36 +3716,8 @@
3450
3716
  font-size: var(--Tight-fontSizes-label-strong);
3451
3717
  }
3452
3718
 
3453
- .sm\:tsystem-lh_16px {
3454
- line-height: 16px;
3455
- }
3456
-
3457
- .sm\:tsystem-fs_label {
3458
- font-size: var(--Tight-fontSizes-label);
3459
- }
3460
-
3461
- .sm\:tsystem-fs_label\.sub {
3462
- font-size: var(--Tight-fontSizes-label-sub);
3463
- }
3464
-
3465
- .sm\:tsystem-lh_14px {
3466
- line-height: 14px;
3467
- }
3468
-
3469
- .sm\:tsystem-fs_sm {
3470
- font-size: var(--Tight-fontSizes-sm);
3471
- }
3472
-
3473
- .sm\:tsystem-fs_md {
3474
- font-size: var(--Tight-fontSizes-md);
3475
- }
3476
-
3477
- .sm\:tsystem-fs_body {
3478
- font-size: var(--Tight-fontSizes-body);
3479
- }
3480
-
3481
- .sm\:tsystem-fs_label\.strongSub {
3482
- font-size: var(--Tight-fontSizes-label-strongSub);
3719
+ .sm\:tsystem-lh_16px {
3720
+ line-height: 16px;
3483
3721
  }
3484
3722
 
3485
3723
  .sm\:tsystem-d_none {
@@ -3494,6 +3732,14 @@
3494
3732
  display: block;
3495
3733
  }
3496
3734
 
3735
+ .sm\:tsystem-flex-d_column {
3736
+ flex-direction: column;
3737
+ }
3738
+
3739
+ .sm\:tsystem-ai_start {
3740
+ align-items: start;
3741
+ }
3742
+
3497
3743
  .sm\:tsystem-grid-tc_300px_auto_300px {
3498
3744
  grid-template-columns: 300px auto 300px;
3499
3745
  }
@@ -3590,36 +3836,24 @@
3590
3836
  max-width: 100dvw;
3591
3837
  }
3592
3838
 
3593
- .sm\:tsystem-h_35px {
3594
- height: 35px;
3595
- }
3596
-
3597
- .sm\:tsystem-h_12px {
3598
- height: 12px;
3599
- }
3600
-
3601
- .sm\:tsystem-w_12px {
3602
- width: 12px;
3603
- }
3604
-
3605
- .sm\:tsystem-h_60px {
3606
- height: 60px;
3607
- }
3608
-
3609
3839
  .sm\:tsystem-max-w_300 {
3610
3840
  max-width: 300px;
3611
3841
  }
3612
3842
 
3843
+ .sm\:tsystem-h_fit-content {
3844
+ height: fit-content;
3845
+ }
3846
+
3613
3847
  .sm\:tsystem-h_39px {
3614
3848
  height: 39px;
3615
3849
  }
3616
3850
 
3617
- .sm\:tsystem-min-h_35px {
3618
- min-height: 35px;
3851
+ .sm\:tsystem-w_562px {
3852
+ width: 562px;
3619
3853
  }
3620
3854
 
3621
- .sm\:tsystem-h_fit-content {
3622
- height: fit-content;
3855
+ .sm\:tsystem-min-h_35px {
3856
+ min-height: 35px;
3623
3857
  }
3624
3858
 
3625
3859
  .sm\:tsystem-min-w_360px {
@@ -3629,6 +3863,12 @@
3629
3863
  .sm\:tsystem-max-w_392px {
3630
3864
  max-width: 392px;
3631
3865
  }
3866
+ }
3867
+
3868
+ @media screen and (min-width: 40rem) {
3869
+ .\[\&\:\:before\]\:sm\:tsystem-content_none::before {
3870
+ content: none;
3871
+ }
3632
3872
  }
3633
3873
 
3634
3874
  @media screen and (min-width: 40rem) {
@@ -3660,16 +3900,218 @@
3660
3900
  justify-content: flex-end;
3661
3901
  }
3662
3902
 
3663
- .md\:tsystem-flex-d_column {
3903
+ .md\:tsystem-min-w_800px {
3904
+ min-width: 800px;
3905
+ }
3906
+ }
3907
+
3908
+ @media screen and (min-width: 80rem) {
3909
+ .xl\:tsystem-p_15px {
3910
+ padding: 15px;
3911
+ }
3912
+
3913
+ .xl\:tsystem-p_4px {
3914
+ padding: 4px;
3915
+ }
3916
+
3917
+ .xl\:tsystem-bd_\{borderWidths\.lg\}_solid_\{colors\.border\.layout\} {
3918
+ border: var(--Tight-borderWidths-lg) solid var(--Tight-colors-border-layout);
3919
+ }
3920
+
3921
+ .xl\:tsystem-p_10px {
3922
+ padding: 10px;
3923
+ }
3924
+
3925
+ .xl\:tsystem-p_0_10px {
3926
+ padding: 0 10px;
3927
+ }
3928
+
3929
+ .xl\:tsystem-bg_surface\.background {
3930
+ background: var(--Tight-colors-surface-background);
3931
+ }
3932
+
3933
+ .xl\:tsystem-gap_15px {
3934
+ gap: 15px;
3935
+ }
3936
+
3937
+ .xl\:tsystem-gap_0 {
3938
+ gap: 0;
3939
+ }
3940
+
3941
+ .xl\:tsystem-bdr_lg {
3942
+ border-radius: var(--Tight-radii-lg);
3943
+ }
3944
+
3945
+ .xl\:tsystem-gap_5px {
3946
+ gap: 5px;
3947
+ }
3948
+
3949
+ .xl\:tsystem-flex_1_1_0 {
3950
+ flex: 1 1 0;
3951
+ }
3952
+
3953
+ .xl\:tsystem-gap_16px {
3954
+ gap: 16px;
3955
+ }
3956
+
3957
+ .xl\:tsystem-bdr_borderWidths\.sm {
3958
+ border-radius: borderWidths.sm;
3959
+ }
3960
+
3961
+ .xl\:tsystem-gap_12px {
3962
+ gap: 12px;
3963
+ }
3964
+
3965
+ .xl\:tsystem-flex_1_0_0 {
3966
+ flex: 1 0 0;
3967
+ }
3968
+
3969
+ .xl\:tsystem-gap_10px {
3970
+ gap: 10px;
3971
+ }
3972
+
3973
+ .xl\:tsystem-bdr_sm {
3974
+ border-radius: var(--Tight-radii-sm);
3975
+ }
3976
+
3977
+ .xl\:tsystem-flex-sh_0 {
3978
+ flex-shrink: 0;
3979
+ }
3980
+
3981
+ .xl\:tsystem-flex-d_row {
3982
+ flex-direction: row;
3983
+ }
3984
+
3985
+ .xl\:tsystem-jc_space-between {
3986
+ justify-content: space-between;
3987
+ }
3988
+
3989
+ .xl\:tsystem-ai_center {
3990
+ align-items: center;
3991
+ }
3992
+
3993
+ .xl\:tsystem-d_flex {
3994
+ display: flex;
3995
+ }
3996
+
3997
+ .xl\:tsystem-ai_flex-start {
3998
+ align-items: flex-start;
3999
+ }
4000
+
4001
+ .xl\:tsystem-as_stretch {
4002
+ align-self: stretch;
4003
+ }
4004
+
4005
+ .xl\:tsystem-lh_16px {
4006
+ line-height: 16px;
4007
+ }
4008
+
4009
+ .xl\:tsystem-fs_label {
4010
+ font-size: var(--Tight-fontSizes-label);
4011
+ }
4012
+
4013
+ .xl\:tsystem-lh_14px {
4014
+ line-height: 14px;
4015
+ }
4016
+
4017
+ .xl\:tsystem-fs_label\.sub {
4018
+ font-size: var(--Tight-fontSizes-label-sub);
4019
+ }
4020
+
4021
+ .xl\:tsystem-fs_sm {
4022
+ font-size: var(--Tight-fontSizes-sm);
4023
+ }
4024
+
4025
+ .xl\:tsystem-fs_md {
4026
+ font-size: var(--Tight-fontSizes-md);
4027
+ }
4028
+
4029
+ .xl\:tsystem-fw_lg {
4030
+ font-weight: var(--Tight-fontWeights-lg);
4031
+ }
4032
+
4033
+ .xl\:tsystem-fs_body {
4034
+ font-size: var(--Tight-fontSizes-body);
4035
+ }
4036
+
4037
+ .xl\:tsystem-fw_label\.strong {
4038
+ font-weight: var(--Tight-fontWeights-label-strong);
4039
+ }
4040
+
4041
+ .xl\:tsystem-fs_label\.strong {
4042
+ font-size: var(--Tight-fontSizes-label-strong);
4043
+ }
4044
+
4045
+ .xl\:tsystem-fs_label\.strongSub {
4046
+ font-size: var(--Tight-fontSizes-label-strongSub);
4047
+ }
4048
+
4049
+ .xl\:tsystem-flex-d_column {
3664
4050
  flex-direction: column;
3665
4051
  }
3666
4052
 
3667
- .md\:tsystem-ai_start {
3668
- align-items: start;
4053
+ .xl\:tsystem-jc_center {
4054
+ justify-content: center;
3669
4055
  }
3670
4056
 
3671
- .md\:tsystem-min-w_800px {
3672
- min-width: 800px;
4057
+ .xl\:tsystem-fs_14px {
4058
+ font-size: 14px;
4059
+ }
4060
+
4061
+ .xl\:tsystem-h_auto {
4062
+ height: auto;
4063
+ }
4064
+
4065
+ .xl\:tsystem-w_128px {
4066
+ width: 128px;
4067
+ }
4068
+
4069
+ .xl\:tsystem-w_auto {
4070
+ width: auto;
4071
+ }
4072
+
4073
+ .xl\:tsystem-min-w_350px {
4074
+ min-width: 350px;
4075
+ }
4076
+
4077
+ .xl\:tsystem-min-w_200px {
4078
+ min-width: 200px;
4079
+ }
4080
+
4081
+ .xl\:tsystem-pl_0 {
4082
+ padding-left: 0;
4083
+ }
4084
+
4085
+ .xl\:tsystem-pr_0 {
4086
+ padding-right: 0;
4087
+ }
4088
+
4089
+ .xl\:tsystem-h_318px {
4090
+ height: 318px;
4091
+ }
4092
+
4093
+ .xl\:tsystem-max-h_318px {
4094
+ max-height: 318px;
4095
+ }
4096
+
4097
+ .xl\:tsystem-h_35px {
4098
+ height: 35px;
4099
+ }
4100
+
4101
+ .xl\:tsystem-w_100\% {
4102
+ width: 100%;
4103
+ }
4104
+
4105
+ .xl\:tsystem-h_12px {
4106
+ height: 12px;
4107
+ }
4108
+
4109
+ .xl\:tsystem-w_12px {
4110
+ width: 12px;
4111
+ }
4112
+
4113
+ .xl\:tsystem-h_60px {
4114
+ height: 60px;
3673
4115
  }
3674
4116
  }
3675
4117
 
@@ -3788,73 +4230,73 @@
3788
4230
  }
3789
4231
 
3790
4232
  @media (hover: hover) and (pointer: fine) {
3791
- .supportHover\:notDisabled\:tsystem-bg-c_surface\.intent\.action\.discrete\.hover:not(:disabled, [disabled], [data-disabled]):hover {
3792
- background-color: var(--Tight-colors-surface-intent-action-discrete-hover);
4233
+ .supportHover\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.secondary\.hover .Tight-sub-label:hover {
4234
+ color: var(--Tight-colors-typography-intent-secondary-hover);
3793
4235
  }
3794
4236
  }
3795
4237
 
3796
4238
  @media (hover: hover) and (pointer: fine) {
3797
- .supportHover\:enabled\:tsystem-bg-c_surface\.intent\.action\.discrete\.hover:enabled:hover {
3798
- background-color: var(--Tight-colors-surface-intent-action-discrete-hover);
4239
+ .supportHover\:\[\&_\.Tight-label\]\:tsystem-c_typography\.intent\.secondary\.hover .Tight-label:hover {
4240
+ color: var(--Tight-colors-typography-intent-secondary-hover);
3799
4241
  }
3800
4242
  }
3801
4243
 
3802
4244
  @media (hover: hover) and (pointer: fine) {
3803
- .supportHover\:enabled\:tsystem-c_icon\.intent\.action\.hover:enabled:hover {
3804
- color: var(--Tight-colors-icon-intent-action-hover);
4245
+ .supportHover\:\[\&_\.Tight-icon_\>_path\]\:tsystem-stk_icon\.intent\.secondary\.hover .Tight-icon > path:hover {
4246
+ stroke: var(--Tight-colors-icon-intent-secondary-hover);
3805
4247
  }
3806
4248
  }
3807
4249
 
3808
4250
  @media (hover: hover) and (pointer: fine) {
3809
- .supportHover\:enabled\:tsystem-fill_icon\.intent\.action\.hover:enabled:hover {
3810
- fill: var(--Tight-colors-icon-intent-action-hover);
4251
+ .supportHover\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.action\.hover .Tight-sub-label:hover {
4252
+ color: var(--Tight-colors-typography-intent-action-hover);
3811
4253
  }
3812
4254
  }
3813
4255
 
3814
4256
  @media (hover: hover) and (pointer: fine) {
3815
- .supportHover\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.secondary\.hover .Tight-sub-label:hover {
3816
- color: var(--Tight-colors-typography-intent-secondary-hover);
4257
+ .supportHover\:\[\&_\.Tight-label\]\:tsystem-c_typography\.intent\.action\.hover .Tight-label:hover {
4258
+ color: var(--Tight-colors-typography-intent-action-hover);
3817
4259
  }
3818
4260
  }
3819
4261
 
3820
4262
  @media (hover: hover) and (pointer: fine) {
3821
- .supportHover\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.secondary\.hover .Tight-medium-icon > path:hover {
3822
- stroke: var(--Tight-colors-icon-intent-secondary-hover);
4263
+ .supportHover\:\[\&_\.Tight-icon_\>_path\]\:tsystem-stk_icon\.intent\.action\.hover .Tight-icon > path:hover {
4264
+ stroke: var(--Tight-colors-icon-intent-action-hover);
3823
4265
  }
3824
4266
  }
3825
4267
 
3826
4268
  @media (hover: hover) and (pointer: fine) {
3827
- .supportHover\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.action\.hover .Tight-sub-label:hover {
3828
- color: var(--Tight-colors-typography-intent-action-hover);
4269
+ .supportHover\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.success\.hover .Tight-sub-label:hover {
4270
+ color: var(--Tight-colors-typography-intent-success-hover);
3829
4271
  }
3830
4272
  }
3831
4273
 
3832
4274
  @media (hover: hover) and (pointer: fine) {
3833
- .supportHover\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.action\.hover .Tight-medium-icon > path:hover {
3834
- stroke: var(--Tight-colors-icon-intent-action-hover);
4275
+ .supportHover\:\[\&_\.Tight-label\]\:tsystem-c_typography\.intent\.success\.hover .Tight-label:hover {
4276
+ color: var(--Tight-colors-typography-intent-success-hover);
3835
4277
  }
3836
4278
  }
3837
4279
 
3838
4280
  @media (hover: hover) and (pointer: fine) {
3839
- .supportHover\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.success\.hover .Tight-sub-label:hover {
3840
- color: var(--Tight-colors-typography-intent-success-hover);
4281
+ .supportHover\:\[\&_\.Tight-icon_\>_path\]\:tsystem-stk_icon\.intent\.success\.hover .Tight-icon > path:hover {
4282
+ stroke: var(--Tight-colors-icon-intent-success-hover);
3841
4283
  }
3842
4284
  }
3843
4285
 
3844
4286
  @media (hover: hover) and (pointer: fine) {
3845
- .supportHover\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.success\.hover .Tight-medium-icon > path:hover {
3846
- stroke: var(--Tight-colors-icon-intent-success-hover);
4287
+ .supportHover\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.warning\.hover .Tight-sub-label:hover {
4288
+ color: var(--Tight-colors-typography-intent-warning-hover);
3847
4289
  }
3848
4290
  }
3849
4291
 
3850
4292
  @media (hover: hover) and (pointer: fine) {
3851
- .supportHover\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.warning\.hover .Tight-sub-label:hover {
4293
+ .supportHover\:\[\&_\.Tight-label\]\:tsystem-c_typography\.intent\.warning\.hover .Tight-label:hover {
3852
4294
  color: var(--Tight-colors-typography-intent-warning-hover);
3853
4295
  }
3854
4296
  }
3855
4297
 
3856
4298
  @media (hover: hover) and (pointer: fine) {
3857
- .supportHover\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.warning\.hover .Tight-medium-icon > path:hover {
4299
+ .supportHover\:\[\&_\.Tight-icon_\>_path\]\:tsystem-stk_icon\.intent\.warning\.hover .Tight-icon > path:hover {
3858
4300
  stroke: var(--Tight-colors-icon-intent-warning-hover);
3859
4301
  }
3860
4302
  }
@@ -3866,9 +4308,39 @@
3866
4308
  }
3867
4309
 
3868
4310
  @media (hover: hover) and (pointer: fine) {
3869
- .supportHover\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.danger\.hover .Tight-medium-icon > path:hover {
4311
+ .supportHover\:\[\&_\.Tight-label\]\:tsystem-c_typography\.intent\.danger\.hover .Tight-label:hover {
4312
+ color: var(--Tight-colors-typography-intent-danger-hover);
4313
+ }
4314
+ }
4315
+
4316
+ @media (hover: hover) and (pointer: fine) {
4317
+ .supportHover\:\[\&_\.Tight-icon_\>_path\]\:tsystem-stk_icon\.intent\.danger\.hover .Tight-icon > path:hover {
3870
4318
  stroke: var(--Tight-colors-icon-intent-danger-hover);
3871
4319
  }
4320
+ }
4321
+
4322
+ @media (hover: hover) and (pointer: fine) {
4323
+ .supportHover\:notDisabled\:tsystem-bg-c_surface\.intent\.action\.discrete\.hover:not(:disabled, [disabled], [data-disabled]):hover {
4324
+ background-color: var(--Tight-colors-surface-intent-action-discrete-hover);
4325
+ }
4326
+ }
4327
+
4328
+ @media (hover: hover) and (pointer: fine) {
4329
+ .supportHover\:enabled\:tsystem-bg-c_surface\.intent\.action\.discrete\.hover:enabled:hover {
4330
+ background-color: var(--Tight-colors-surface-intent-action-discrete-hover);
4331
+ }
4332
+ }
4333
+
4334
+ @media (hover: hover) and (pointer: fine) {
4335
+ .supportHover\:enabled\:tsystem-c_icon\.intent\.action\.hover:enabled:hover {
4336
+ color: var(--Tight-colors-icon-intent-action-hover);
4337
+ }
4338
+ }
4339
+
4340
+ @media (hover: hover) and (pointer: fine) {
4341
+ .supportHover\:enabled\:tsystem-fill_icon\.intent\.action\.hover:enabled:hover {
4342
+ fill: var(--Tight-colors-icon-intent-action-hover);
4343
+ }
3872
4344
  }
3873
4345
 
3874
4346
  @media (hover: hover) and (pointer: fine) {
@@ -3914,7 +4386,7 @@
3914
4386
  }
3915
4387
 
3916
4388
  @media (hover: hover) and (pointer: fine) {
3917
- .\[\&_\.Tight-medium-icon_\>_path\]\:supportHover\:tsystem-stk_typography\.intent\.action\.hover .Tight-medium-icon > path:hover {
4389
+ .\[\&_\.Tight-icon_\>_path\]\:supportHover\:tsystem-stk_typography\.intent\.action\.hover .Tight-icon > path:hover {
3918
4390
  stroke: var(--Tight-colors-typography-intent-action-hover);
3919
4391
  }
3920
4392
  }
@@ -3974,50 +4446,50 @@
3974
4446
  }
3975
4447
 
3976
4448
  @media (hover: hover) and (pointer: fine) {
3977
- .supportHover\:tsystem-trs_background_100ms_ease-out\,_background-color_100ms_ease-out\,_border-color_100ms_ease-out\,_box-shadow_0ms:hover {
3978
- transition: background 100ms ease-out, background-color 100ms ease-out, border-color 100ms ease-out, box-shadow 0ms;
4449
+ .supportHover\:tsystem-bd-c_border\.intent\.secondary\.hover:hover {
4450
+ border-color: var(--Tight-colors-border-intent-secondary-hover);
3979
4451
  }
3980
4452
  }
3981
4453
 
3982
4454
  @media (hover: hover) and (pointer: fine) {
3983
- .supportHover\:tsystem-trs_background_100ms_ease-out\,_box-shadow_0ms:hover {
3984
- transition: background 100ms ease-out, box-shadow 0ms;
4455
+ .supportHover\:tsystem-bd-c_border\.intent\.action\.hover:hover {
4456
+ border-color: var(--Tight-colors-border-intent-action-hover);
3985
4457
  }
3986
4458
  }
3987
4459
 
3988
4460
  @media (hover: hover) and (pointer: fine) {
3989
- .supportHover\:tsystem-trs_color_100ms_ease-out:hover {
3990
- transition: color 100ms ease-out;
4461
+ .supportHover\:tsystem-bd-c_border\.intent\.success\.hover:hover {
4462
+ border-color: var(--Tight-colors-border-intent-success-hover);
3991
4463
  }
3992
4464
  }
3993
4465
 
3994
4466
  @media (hover: hover) and (pointer: fine) {
3995
- .supportHover\:tsystem-bd-c_border\.intent\.secondary\.hover:hover {
3996
- border-color: var(--Tight-colors-border-intent-secondary-hover);
4467
+ .supportHover\:tsystem-bd-c_border\.intent\.warning\.hover:hover {
4468
+ border-color: var(--Tight-colors-border-intent-warning-hover);
3997
4469
  }
3998
4470
  }
3999
4471
 
4000
4472
  @media (hover: hover) and (pointer: fine) {
4001
- .supportHover\:tsystem-bd-c_border\.intent\.action\.hover:hover {
4002
- border-color: var(--Tight-colors-border-intent-action-hover);
4473
+ .supportHover\:tsystem-bd-c_border\.intent\.danger\.hover:hover {
4474
+ border-color: var(--Tight-colors-border-intent-danger-hover);
4003
4475
  }
4004
4476
  }
4005
4477
 
4006
4478
  @media (hover: hover) and (pointer: fine) {
4007
- .supportHover\:tsystem-bd-c_border\.intent\.success\.hover:hover {
4008
- border-color: var(--Tight-colors-border-intent-success-hover);
4479
+ .supportHover\:tsystem-trs_background_100ms_ease-out\,_background-color_100ms_ease-out\,_border-color_100ms_ease-out\,_box-shadow_0ms:hover {
4480
+ transition: background 100ms ease-out, background-color 100ms ease-out, border-color 100ms ease-out, box-shadow 0ms;
4009
4481
  }
4010
4482
  }
4011
4483
 
4012
4484
  @media (hover: hover) and (pointer: fine) {
4013
- .supportHover\:tsystem-bd-c_border\.intent\.warning\.hover:hover {
4014
- border-color: var(--Tight-colors-border-intent-warning-hover);
4485
+ .supportHover\:tsystem-trs_background_100ms_ease-out\,_box-shadow_0ms:hover {
4486
+ transition: background 100ms ease-out, box-shadow 0ms;
4015
4487
  }
4016
4488
  }
4017
4489
 
4018
4490
  @media (hover: hover) and (pointer: fine) {
4019
- .supportHover\:tsystem-bd-c_border\.intent\.danger\.hover:hover {
4020
- border-color: var(--Tight-colors-border-intent-danger-hover);
4491
+ .supportHover\:tsystem-trs_color_100ms_ease-out:hover {
4492
+ transition: color 100ms ease-out;
4021
4493
  }
4022
4494
  }
4023
4495