@tight-embedded/react 6.2.0 → 6.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -174,10 +174,12 @@
174
174
  --Tight-colors-surface-intent-action-discreet: transparent;
175
175
  --Tight-colors-surface-intent-action-discreet-hover: var(--Tight-colors-brand-action-weak);
176
176
  --Tight-colors-surface-intent-action-discreet-active: var(--Tight-colors-brand-action);
177
+ --Tight-colors-surface-intent-action-highlight: var(--Tight-colors-brand-action-opaque);
177
178
  --Tight-colors-surface-intent-success: var(--Tight-colors-brand-success-weak);
178
179
  --Tight-colors-surface-intent-success-hover: var(--Tight-colors-brand-success);
179
180
  --Tight-colors-surface-intent-success-active: var(--Tight-colors-brand-success-strong);
180
181
  --Tight-colors-surface-intent-success-disabled: var(--Tight-colors-surface-foreground-disabled);
182
+ --Tight-colors-surface-intent-success-highlight: var(--Tight-colors-brand-success-opaque);
181
183
  --Tight-colors-surface-intent-warning: var(--Tight-colors-brand-warning-weak);
182
184
  --Tight-colors-surface-intent-warning-hover: var(--Tight-colors-brand-warning);
183
185
  --Tight-colors-surface-intent-warning-active: var(--Tight-colors-brand-warning-strong);
@@ -187,7 +189,7 @@
187
189
  --Tight-colors-surface-intent-danger-active: var(--Tight-colors-brand-danger-strong);
188
190
  --Tight-colors-surface-intent-danger-disabled: var(--Tight-colors-surface-foreground-disabled);
189
191
  --Tight-colors-surface-intent-danger-weak: var(--Tight-colors-brand-danger-weak);
190
- --Tight-colors-surface-intent-danger-opaque: var(--Tight-colors-brand-danger-opaque);
192
+ --Tight-colors-surface-intent-danger-highlight: var(--Tight-colors-brand-danger-opaque);
191
193
  --Tight-colors-typography-base: var(--Tight-colors-black700);
192
194
  --Tight-colors-typography-base-weak: var(--Tight-colors-black400);
193
195
  --Tight-colors-typography-contrast: var(--Tight-colors-white100);
@@ -432,18 +434,6 @@
432
434
  background: var(--Tight-colors-surface-intent-danger);
433
435
  }
434
436
 
435
- .tsystem-p_10px {
436
- padding: 10px;
437
- }
438
-
439
- .tsystem-p_6px {
440
- padding: 6px;
441
- }
442
-
443
- .tsystem-bd_\{borderWidths\.md\}_solid_transparent {
444
- border: var(--Tight-borderWidths-md) solid transparent;
445
- }
446
-
447
437
  .tsystem-p_16px_12px {
448
438
  padding: 16px 12px;
449
439
  }
@@ -472,6 +462,18 @@
472
462
  border: 1px solid;
473
463
  }
474
464
 
465
+ .tsystem-bd_1px_solid_\{colors\.border\.intent\.action\} {
466
+ border: 1px solid var(--Tight-colors-border-intent-action);
467
+ }
468
+
469
+ .tsystem-p_6px {
470
+ padding: 6px;
471
+ }
472
+
473
+ .tsystem-bd_1px_solid_\{colors\.border\.intent\.warning\} {
474
+ border: 1px solid var(--Tight-colors-border-intent-warning);
475
+ }
476
+
475
477
  .tsystem-p_8px {
476
478
  padding: 8px;
477
479
  }
@@ -524,14 +526,6 @@
524
526
  padding: 15px;
525
527
  }
526
528
 
527
- .tsystem-bd_1px_solid_\{colors\.border\.intent\.action\} {
528
- border: 1px solid var(--Tight-colors-border-intent-action);
529
- }
530
-
531
- .tsystem-bd_1px_solid_\{colors\.border\.intent\.warning\} {
532
- border: 1px solid var(--Tight-colors-border-intent-warning);
533
- }
534
-
535
529
  .tsystem-p_0_25px {
536
530
  padding: 0 25px;
537
531
  }
@@ -564,14 +558,18 @@
564
558
  border: 1px solid var(--Tight-colors-border-layout);
565
559
  }
566
560
 
567
- .tsystem-m_6px {
568
- margin: 6px;
569
- }
570
-
571
561
  .tsystem-m_0_8px {
572
562
  margin: 0 8px;
573
563
  }
574
564
 
565
+ .tsystem-p_10px {
566
+ padding: 10px;
567
+ }
568
+
569
+ .tsystem-bd-x_\{borderWidths\.md\}_solid_\{colors\.border\.layout\} {
570
+ border-inline: var(--Tight-borderWidths-md) solid var(--Tight-colors-border-layout);
571
+ }
572
+
575
573
  .tsystem-anim_linear_1s_spin_infinite {
576
574
  animation: linear 1s spin infinite;
577
575
  }
@@ -616,6 +614,10 @@
616
614
  margin: 0 auto;
617
615
  }
618
616
 
617
+ .tsystem-bd_\{borderWidths\.md\}_solid_transparent {
618
+ border: var(--Tight-borderWidths-md) solid transparent;
619
+ }
620
+
619
621
  .tsystem-p_10 {
620
622
  padding: 10px;
621
623
  }
@@ -712,8 +714,8 @@
712
714
  padding: 25px;
713
715
  }
714
716
 
715
- .tsystem-bd-x_\{borderWidths\.md\}_solid_\{colors\.border\.layout\} {
716
- border-inline: var(--Tight-borderWidths-md) solid var(--Tight-colors-border-layout);
717
+ .tsystem-bd_\{borderWidths\.md\}_dashed_\{colors\.border\.layout\} {
718
+ border: var(--Tight-borderWidths-md) dashed var(--Tight-colors-border-layout);
717
719
  }
718
720
 
719
721
  .tsystem-bg_brand\.success {
@@ -788,19 +790,6 @@
788
790
  border-color: var(--Tight-colors-border-intent-danger);
789
791
  }
790
792
 
791
- .tsystem-ring_none {
792
- outline: 2px solid transparent;
793
- outline-offset: 2px;
794
- }
795
-
796
- .tsystem-bdr_md {
797
- border-radius: var(--Tight-radii-md);
798
- }
799
-
800
- .tsystem-gap_9px {
801
- gap: 9px;
802
- }
803
-
804
793
  .tsystem-border-style_solid {
805
794
  border-style: solid;
806
795
  }
@@ -837,6 +826,15 @@
837
826
  gap: 8px;
838
827
  }
839
828
 
829
+ .tsystem-bdr_md {
830
+ border-radius: var(--Tight-radii-md);
831
+ }
832
+
833
+ .tsystem-ring_none {
834
+ outline: 2px solid transparent;
835
+ outline-offset: 2px;
836
+ }
837
+
840
838
  .tsystem-bd-w_lg {
841
839
  border-width: var(--Tight-borderWidths-lg);
842
840
  }
@@ -857,6 +855,10 @@
857
855
  gap: 10px;
858
856
  }
859
857
 
858
+ .tsystem-bd-c_border\.intent\.primary {
859
+ border-color: var(--Tight-colors-border-intent-primary);
860
+ }
861
+
860
862
  .tsystem-gap_12px {
861
863
  gap: 12px;
862
864
  }
@@ -897,10 +899,6 @@
897
899
  overflow: wrap;
898
900
  }
899
901
 
900
- .tsystem-bd-c_border\.intent\.primary {
901
- border-color: var(--Tight-colors-border-intent-primary);
902
- }
903
-
904
902
  .tsystem-bdr_999px {
905
903
  border-radius: 999px;
906
904
  }
@@ -969,28 +967,32 @@
969
967
  padding-inline: 8px;
970
968
  }
971
969
 
972
- .tsystem-bdr_9999px {
973
- border-radius: 9999px;
970
+ .tsystem-bdr_zero {
971
+ border-radius: var(--Tight-radii-zero);
974
972
  }
975
973
 
976
- .tsystem-ring_3px_solid {
977
- outline: 3px solid;
974
+ .tsystem-bd-b_\{borderWidths\.md\}_solid_\{colors\.border\.layout\} {
975
+ border-bottom: var(--Tight-borderWidths-md) solid var(--Tight-colors-border-layout);
978
976
  }
979
977
 
980
- .tsystem-bg-p_100\%_0 {
981
- background-position: 100% 0;
978
+ .tsystem-bd-t_none {
979
+ border-top: none;
982
980
  }
983
981
 
984
- .tsystem-gap_15px {
985
- gap: 15px;
982
+ .tsystem-bd-b_none {
983
+ border-bottom: none;
986
984
  }
987
985
 
988
- .tsystem-gap_6px {
989
- gap: 6px;
986
+ .tsystem-gap_9px {
987
+ gap: 9px;
990
988
  }
991
989
 
992
- .tsystem-bdr_zero {
993
- border-radius: var(--Tight-radii-zero);
990
+ .tsystem-bg-p_100\%_0 {
991
+ background-position: 100% 0;
992
+ }
993
+
994
+ .tsystem-gap_15px {
995
+ gap: 15px;
994
996
  }
995
997
 
996
998
  .tsystem-gap_0 {
@@ -1025,10 +1027,6 @@
1025
1027
  border-bottom: var(--Tight-borderWidths-md) solid var(--Tight-colors-border-layout-weak);
1026
1028
  }
1027
1029
 
1028
- .tsystem-bd-t_none {
1029
- border-top: none;
1030
- }
1031
-
1032
1030
  .tsystem-bd-l_none {
1033
1031
  border-left: none;
1034
1032
  }
@@ -1073,10 +1071,18 @@
1073
1071
  border-top: var(--Tight-borderWidths-md) solid var(--Tight-colors-border-layout-strong);
1074
1072
  }
1075
1073
 
1074
+ .tsystem-gap_6px {
1075
+ gap: 6px;
1076
+ }
1077
+
1076
1078
  .tsystem-gap_10 {
1077
1079
  gap: 10px;
1078
1080
  }
1079
1081
 
1082
+ .tsystem-bdr_9999px {
1083
+ border-radius: 9999px;
1084
+ }
1085
+
1080
1086
  .tsystem-bdr_2px {
1081
1087
  border-radius: 2px;
1082
1088
  }
@@ -1097,10 +1103,6 @@
1097
1103
  border-left: 1px solid var(--Tight-colors-border-layout);
1098
1104
  }
1099
1105
 
1100
- .tsystem-bd-b_none {
1101
- border-bottom: none;
1102
- }
1103
-
1104
1106
  .tsystem-bd-c_active {
1105
1107
  border-color: active;
1106
1108
  }
@@ -1129,10 +1131,6 @@
1129
1131
  overflow: auto;
1130
1132
  }
1131
1133
 
1132
- .tsystem-bd-b_\{borderWidths\.md\}_solid_\{colors\.border\.layout\} {
1133
- border-bottom: var(--Tight-borderWidths-md) solid var(--Tight-colors-border-layout);
1134
- }
1135
-
1136
1134
  .tsystem-gap_30px {
1137
1135
  gap: 30px;
1138
1136
  }
@@ -1185,42 +1183,6 @@
1185
1183
  display: flex;
1186
1184
  }
1187
1185
 
1188
- .tsystem-c_typography\.intent\.secondary {
1189
- color: var(--Tight-colors-typography-intent-secondary);
1190
- }
1191
-
1192
- .tsystem-bg-c_surface\.intent\.action\.discreet {
1193
- background-color: var(--Tight-colors-surface-intent-action-discreet);
1194
- }
1195
-
1196
- .tsystem-fs_md {
1197
- font-size: var(--Tight-fontSizes-md);
1198
- }
1199
-
1200
- .tsystem-fw_md {
1201
- font-weight: var(--Tight-fontWeights-md);
1202
- }
1203
-
1204
- .tsystem-fs_sm {
1205
- font-size: var(--Tight-fontSizes-sm);
1206
- }
1207
-
1208
- .tsystem-fw_sm {
1209
- font-weight: var(--Tight-fontWeights-sm);
1210
- }
1211
-
1212
- .tsystem-bx-sh_0_0_0_0_transparent {
1213
- box-shadow: 0 0 0 0 transparent;
1214
- }
1215
-
1216
- .tsystem-pos_relative {
1217
- position: relative;
1218
- }
1219
-
1220
- .tsystem-c_icon\.base {
1221
- color: var(--Tight-colors-icon-base);
1222
- }
1223
-
1224
1186
  .tsystem-bg-c_brand\.primary {
1225
1187
  background-color: var(--Tight-colors-brand-primary);
1226
1188
  }
@@ -1253,10 +1215,18 @@
1253
1215
  white-space: nowrap;
1254
1216
  }
1255
1217
 
1218
+ .tsystem-fs_sm {
1219
+ font-size: var(--Tight-fontSizes-sm);
1220
+ }
1221
+
1256
1222
  .tsystem-font-style_normal {
1257
1223
  font-style: normal;
1258
1224
  }
1259
1225
 
1226
+ .tsystem-fw_sm {
1227
+ font-weight: var(--Tight-fontWeights-sm);
1228
+ }
1229
+
1260
1230
  .tsystem-lh_12px {
1261
1231
  line-height: 12px;
1262
1232
  }
@@ -1265,6 +1235,14 @@
1265
1235
  letter-spacing: 0.66px;
1266
1236
  }
1267
1237
 
1238
+ .tsystem-white-space_normal {
1239
+ white-space: normal;
1240
+ }
1241
+
1242
+ .tsystem-ov-wrap_break-word {
1243
+ overflow-wrap: break-word;
1244
+ }
1245
+
1268
1246
  .tsystem-bx-s_border-box {
1269
1247
  box-sizing: border-box;
1270
1248
  }
@@ -1297,6 +1275,34 @@
1297
1275
  align-self: stretch;
1298
1276
  }
1299
1277
 
1278
+ .tsystem-c_typography\.intent\.action {
1279
+ color: var(--Tight-colors-typography-intent-action);
1280
+ }
1281
+
1282
+ .tsystem-c_typography\.intent\.primary {
1283
+ color: var(--Tight-colors-typography-intent-primary);
1284
+ }
1285
+
1286
+ .tsystem-bg-c_surface\.intent\.primary {
1287
+ background-color: var(--Tight-colors-surface-intent-primary);
1288
+ }
1289
+
1290
+ .tsystem-c_typography\.intent\.success {
1291
+ color: var(--Tight-colors-typography-intent-success);
1292
+ }
1293
+
1294
+ .tsystem-bg-c_surface\.intent\.success {
1295
+ background-color: var(--Tight-colors-surface-intent-success);
1296
+ }
1297
+
1298
+ .tsystem-c_typography\.intent\.warning {
1299
+ color: var(--Tight-colors-typography-intent-warning);
1300
+ }
1301
+
1302
+ .tsystem-bg-c_surface\.intent\.warning {
1303
+ background-color: var(--Tight-colors-surface-intent-warning);
1304
+ }
1305
+
1300
1306
  .tsystem-jc_flex-start {
1301
1307
  justify-content: flex-start;
1302
1308
  }
@@ -1350,6 +1356,10 @@
1350
1356
  color: var(--Tight-colors-inherit);
1351
1357
  }
1352
1358
 
1359
+ .tsystem-pos_relative {
1360
+ position: relative;
1361
+ }
1362
+
1353
1363
  .tsystem-bg-c_surface\.background {
1354
1364
  background-color: var(--Tight-colors-surface-background);
1355
1365
  }
@@ -1362,14 +1372,6 @@
1362
1372
  white-space: pre-wrap;
1363
1373
  }
1364
1374
 
1365
- .tsystem-c_typography\.intent\.primary {
1366
- color: var(--Tight-colors-typography-intent-primary);
1367
- }
1368
-
1369
- .tsystem-bg-c_surface\.intent\.primary {
1370
- background-color: var(--Tight-colors-surface-intent-primary);
1371
- }
1372
-
1373
1375
  .tsystem-flex-d_column-reverse {
1374
1376
  flex-direction: column-reverse;
1375
1377
  }
@@ -1378,10 +1380,6 @@
1378
1380
  position: absolute;
1379
1381
  }
1380
1382
 
1381
- .tsystem-bg-c_surface\.intent\.warning {
1382
- background-color: var(--Tight-colors-surface-intent-warning);
1383
- }
1384
-
1385
1383
  .tsystem-bx-sh_0_0_0_1px_\{colors\.border\.intent\.warning\} {
1386
1384
  box-shadow: 0 0 0 1px var(--Tight-colors-border-intent-warning);
1387
1385
  }
@@ -1434,6 +1432,10 @@
1434
1432
  flex-grow: 1;
1435
1433
  }
1436
1434
 
1435
+ .tsystem-bg-c_surface\.intent\.action\.discreet {
1436
+ background-color: var(--Tight-colors-surface-intent-action-discreet);
1437
+ }
1438
+
1437
1439
  .tsystem-c_icon\.accent\.danger {
1438
1440
  color: var(--Tight-colors-icon-accent-danger);
1439
1441
  }
@@ -1526,28 +1528,8 @@
1526
1528
  fill: var(--Tight-colors-transparent);
1527
1529
  }
1528
1530
 
1529
- .tsystem-c_typography\.intent\.action {
1530
- color: var(--Tight-colors-typography-intent-action);
1531
- }
1532
-
1533
- .tsystem-c_typography\.intent\.danger {
1534
- color: var(--Tight-colors-typography-intent-danger);
1535
- }
1536
-
1537
- .tsystem-bg-c_surface\.intent\.danger {
1538
- background-color: var(--Tight-colors-surface-intent-danger);
1539
- }
1540
-
1541
- .tsystem-c_typography\.intent\.success {
1542
- color: var(--Tight-colors-typography-intent-success);
1543
- }
1544
-
1545
- .tsystem-bg-c_surface\.intent\.success {
1546
- background-color: var(--Tight-colors-surface-intent-success);
1547
- }
1548
-
1549
- .tsystem-c_typography\.intent\.warning {
1550
- color: var(--Tight-colors-typography-intent-warning);
1531
+ .tsystem-bx-sh_0_0_0_0_transparent {
1532
+ box-shadow: 0 0 0 0 transparent;
1551
1533
  }
1552
1534
 
1553
1535
  .tsystem-c_icon\.contrast {
@@ -1570,24 +1552,8 @@
1570
1552
  background-color: yellow;
1571
1553
  }
1572
1554
 
1573
- .tsystem-ring-o_3px {
1574
- outline-offset: 3px;
1575
- }
1576
-
1577
- .tsystem-bg-c_brand\.action\.stronger {
1578
- background-color: var(--Tight-colors-brand-action-stronger);
1579
- }
1580
-
1581
- .tsystem-ring-c_brand\.action\.stronger {
1582
- outline-color: var(--Tight-colors-brand-action-stronger);
1583
- }
1584
-
1585
- .tsystem-ring-c_brand\.primary {
1586
- outline-color: var(--Tight-colors-brand-primary);
1587
- }
1588
-
1589
- .tsystem-ov-wrap_break-word {
1590
- overflow-wrap: break-word;
1555
+ .tsystem-fill_surface\.intent\.action\.active {
1556
+ fill: var(--Tight-colors-surface-intent-action-active);
1591
1557
  }
1592
1558
 
1593
1559
  .tsystem-fw_label\.strong {
@@ -1622,6 +1588,14 @@
1622
1588
  background-color: var(--Tight-colors-brand-action-strong);
1623
1589
  }
1624
1590
 
1591
+ .tsystem-bg-c_surface\.intent\.action\.highlight {
1592
+ background-color: var(--Tight-colors-surface-intent-action-highlight);
1593
+ }
1594
+
1595
+ .tsystem-c_typography\.intent\.secondary {
1596
+ color: var(--Tight-colors-typography-intent-secondary);
1597
+ }
1598
+
1625
1599
  .tsystem-bg-c_surface\.elevated {
1626
1600
  background-color: var(--Tight-colors-surface-elevated);
1627
1601
  }
@@ -1634,17 +1608,16 @@
1634
1608
  background-size: 400%;
1635
1609
  }
1636
1610
 
1637
- .tsystem-scr-bar_hidden {
1638
- -ms-overflow-style: none;
1639
- scrollbar-width: none;
1611
+ .tsystem-bx-sh_box-shadow {
1612
+ box-shadow: var(--Tight-shadows-box-shadow);
1640
1613
  }
1641
1614
 
1642
- .tsystem-scr-bar_hidden::-webkit-scrollbar {
1643
- display: none;
1615
+ .tsystem-bg-c_surface\.intent\.success\.highlight {
1616
+ background-color: var(--Tight-colors-surface-intent-success-highlight);
1644
1617
  }
1645
1618
 
1646
- .tsystem-bx-sh_box-shadow {
1647
- box-shadow: var(--Tight-shadows-box-shadow);
1619
+ .tsystem-bg-c_surface\.intent\.danger\.highlight {
1620
+ background-color: var(--Tight-colors-surface-intent-danger-highlight);
1648
1621
  }
1649
1622
 
1650
1623
  .tsystem-op_0\.6 {
@@ -1693,6 +1666,10 @@
1693
1666
  pointer-events: all;
1694
1667
  }
1695
1668
 
1669
+ .tsystem-fs_md {
1670
+ font-size: var(--Tight-fontSizes-md);
1671
+ }
1672
+
1696
1673
  .tsystem-fw_lg {
1697
1674
  font-weight: var(--Tight-fontWeights-lg);
1698
1675
  }
@@ -1709,14 +1686,14 @@
1709
1686
  color: var(--Tight-colors-typography-label);
1710
1687
  }
1711
1688
 
1712
- .tsystem-white-space_normal {
1713
- white-space: normal;
1714
- }
1715
-
1716
1689
  .tsystem-ta_start {
1717
1690
  text-align: start;
1718
1691
  }
1719
1692
 
1693
+ .tsystem-fw_md {
1694
+ font-weight: var(--Tight-fontWeights-md);
1695
+ }
1696
+
1720
1697
  .tsystem-fw_label\.sub {
1721
1698
  font-weight: var(--Tight-fontWeights-label-sub);
1722
1699
  }
@@ -1733,6 +1710,10 @@
1733
1710
  color: var(--Tight-colors-typography-accent-action);
1734
1711
  }
1735
1712
 
1713
+ .tsystem-c_brand\.action\.strongest {
1714
+ color: var(--Tight-colors-brand-action-strongest);
1715
+ }
1716
+
1736
1717
  .tsystem-d_-webkit-box {
1737
1718
  display: -webkit-box;
1738
1719
  }
@@ -1745,6 +1726,14 @@
1745
1726
  -webkit-box-orient: vertical;
1746
1727
  }
1747
1728
 
1729
+ .tsystem-lh_20px {
1730
+ line-height: 20px;
1731
+ }
1732
+
1733
+ .tsystem-ls_0\.96px {
1734
+ letter-spacing: 0.96px;
1735
+ }
1736
+
1748
1737
  .tsystem-trf_rotate\(-20deg\) {
1749
1738
  transform: rotate(-20deg);
1750
1739
  }
@@ -1765,6 +1754,18 @@
1765
1754
  font-size: 10em;
1766
1755
  }
1767
1756
 
1757
+ .tsystem-c_typography\.intent\.danger {
1758
+ color: var(--Tight-colors-typography-intent-danger);
1759
+ }
1760
+
1761
+ .tsystem-bg-c_surface\.intent\.danger {
1762
+ background-color: var(--Tight-colors-surface-intent-danger);
1763
+ }
1764
+
1765
+ .tsystem-c_icon\.base {
1766
+ color: var(--Tight-colors-icon-base);
1767
+ }
1768
+
1768
1769
  .tsystem-fw_body {
1769
1770
  font-weight: var(--Tight-fontWeights-body);
1770
1771
  }
@@ -1773,6 +1774,10 @@
1773
1774
  font-family: var(--Tight-fonts-body);
1774
1775
  }
1775
1776
 
1777
+ .tsystem-c_brand\.primary\.weak {
1778
+ color: var(--Tight-colors-brand-primary-weak);
1779
+ }
1780
+
1776
1781
  .tsystem-fw_label\.strongSub {
1777
1782
  font-weight: var(--Tight-fontWeights-label-strongSub);
1778
1783
  }
@@ -1869,10 +1874,6 @@
1869
1874
  color: var(--Tight-colors-money-positive);
1870
1875
  }
1871
1876
 
1872
- .tsystem-c_brand\.primary\.weak {
1873
- color: var(--Tight-colors-brand-primary-weak);
1874
- }
1875
-
1876
1877
  .tsystem-c_brand\.danger {
1877
1878
  color: var(--Tight-colors-brand-danger);
1878
1879
  }
@@ -1913,6 +1914,15 @@
1913
1914
  line-height: 26px;
1914
1915
  }
1915
1916
 
1917
+ .tsystem-scr-bar_hidden {
1918
+ -ms-overflow-style: none;
1919
+ scrollbar-width: none;
1920
+ }
1921
+
1922
+ .tsystem-scr-bar_hidden::-webkit-scrollbar {
1923
+ display: none;
1924
+ }
1925
+
1916
1926
  .tsystem-pos_sticky {
1917
1927
  position: sticky;
1918
1928
  }
@@ -1925,10 +1935,6 @@
1925
1935
  stroke: var(--Tight-colors-icon-base);
1926
1936
  }
1927
1937
 
1928
- .tsystem-ls_0\.96px {
1929
- letter-spacing: 0.96px;
1930
- }
1931
-
1932
1938
  .tsystem-lh_14px {
1933
1939
  line-height: 14px;
1934
1940
  }
@@ -2176,6 +2182,10 @@
2176
2182
  padding-right: 16px;
2177
2183
  }
2178
2184
 
2185
+ .tsystem-h_100\% {
2186
+ height: 100%;
2187
+ }
2188
+
2179
2189
  .tsystem-h_48px {
2180
2190
  height: 48px;
2181
2191
  }
@@ -2212,10 +2222,6 @@
2212
2222
  height: 32px;
2213
2223
  }
2214
2224
 
2215
- .tsystem-h_100\% {
2216
- height: 100%;
2217
- }
2218
-
2219
2225
  .tsystem-pl_10px {
2220
2226
  padding-left: 10px;
2221
2227
  }
@@ -2440,14 +2446,6 @@
2440
2446
  min-height: 48px;
2441
2447
  }
2442
2448
 
2443
- .tsystem-w_24 {
2444
- width: 24px;
2445
- }
2446
-
2447
- .tsystem-h_24 {
2448
- height: 24px;
2449
- }
2450
-
2451
2449
  .tsystem-w_15px {
2452
2450
  width: 15px;
2453
2451
  }
@@ -2456,12 +2454,12 @@
2456
2454
  height: 15px;
2457
2455
  }
2458
2456
 
2459
- .tsystem-w_9px {
2460
- width: 9px;
2457
+ .tsystem-w_24 {
2458
+ width: 24px;
2461
2459
  }
2462
2460
 
2463
- .tsystem-h_9px {
2464
- height: 9px;
2461
+ .tsystem-h_24 {
2462
+ height: 24px;
2465
2463
  }
2466
2464
 
2467
2465
  .tsystem-h_37px {
@@ -2484,6 +2482,14 @@
2484
2482
  min-height: var(--Tight-borderWidths-md);
2485
2483
  }
2486
2484
 
2485
+ .tsystem-min-h_52px {
2486
+ min-height: 52px;
2487
+ }
2488
+
2489
+ .tsystem-min-w_58px {
2490
+ min-width: 58px;
2491
+ }
2492
+
2487
2493
  .tsystem-w_30px {
2488
2494
  width: 30px;
2489
2495
  }
@@ -2528,10 +2534,6 @@
2528
2534
  min-width: 360px;
2529
2535
  }
2530
2536
 
2531
- .tsystem-right_16px {
2532
- right: 16px;
2533
- }
2534
-
2535
2537
  .tsystem-w_max-content {
2536
2538
  width: max-content;
2537
2539
  }
@@ -2568,6 +2570,18 @@
2568
2570
  max-width: 1440px;
2569
2571
  }
2570
2572
 
2573
+ .tsystem-pl_8px {
2574
+ padding-left: 8px;
2575
+ }
2576
+
2577
+ .tsystem-pt_4px {
2578
+ padding-top: 4px;
2579
+ }
2580
+
2581
+ .tsystem-pb_4px {
2582
+ padding-bottom: 4px;
2583
+ }
2584
+
2571
2585
  .tsystem-min-w_150px {
2572
2586
  min-width: 150px;
2573
2587
  }
@@ -2872,6 +2886,10 @@
2872
2886
  min-width: 120px;
2873
2887
  }
2874
2888
 
2889
+ .tsystem-w_24px {
2890
+ width: 24px;
2891
+ }
2892
+
2875
2893
  .tsystem-max-h_150 {
2876
2894
  max-height: 150px;
2877
2895
  }
@@ -2888,12 +2906,8 @@
2888
2906
  max-height: 314px;
2889
2907
  }
2890
2908
 
2891
- .tsystem-pt_4px {
2892
- padding-top: 4px;
2893
- }
2894
-
2895
- .tsystem-pb_4px {
2896
- padding-bottom: 4px;
2909
+ .tsystem-right_16px {
2910
+ right: 16px;
2897
2911
  }
2898
2912
 
2899
2913
  .tsystem-pl_25px {
@@ -2924,10 +2938,6 @@
2924
2938
  margin-bottom: 10px;
2925
2939
  }
2926
2940
 
2927
- .tsystem-w_342px {
2928
- width: 342px;
2929
- }
2930
-
2931
2941
  .tsystem-w_512px {
2932
2942
  width: 512px;
2933
2943
  }
@@ -3116,6 +3126,10 @@
3116
3126
  transition: width 300ms ease-out;
3117
3127
  }
3118
3128
 
3129
+ .first\:tsystem-bd-t_\{borderWidths\.md\}_solid_\{colors\.border\.layout\}:first-child {
3130
+ border-top: var(--Tight-borderWidths-md) solid var(--Tight-colors-border-layout);
3131
+ }
3132
+
3119
3133
  .\[\&\[data-haserror\=\'true\'\]\]\:tsystem-bd-c_border\.intent\.danger[data-haserror='true'] {
3120
3134
  border-color: var(--Tight-colors-border-intent-danger);
3121
3135
  }
@@ -3144,10 +3158,6 @@
3144
3158
  border-radius: 50%;
3145
3159
  }
3146
3160
 
3147
- .first\:tsystem-bd-t_\{borderWidths\.md\}_solid_\{colors\.border\.layout\}:first-child {
3148
- border-top: var(--Tight-borderWidths-md) solid var(--Tight-colors-border-layout);
3149
- }
3150
-
3151
3161
  .\[\&\[data-focused\=\'true\'\]\]\:tsystem-ring_none[data-focused='true'] {
3152
3162
  outline: 2px solid transparent;
3153
3163
  outline-offset: 2px;
@@ -3210,38 +3220,10 @@
3210
3220
  stroke: var(--Tight-colors-icon-intent-danger);
3211
3221
  }
3212
3222
 
3213
- .\[\&\:disabled\]\:tsystem-cursor_not-allowed:disabled {
3214
- cursor: not-allowed;
3215
- }
3216
-
3217
- .\[\&\:disabled\]\:tsystem-op_0\.6:disabled {
3218
- opacity: 0.6;
3219
- }
3220
-
3221
- .\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.secondary .Tight-text {
3222
- color: var(--Tight-colors-typography-intent-secondary);
3223
- }
3224
-
3225
- .\[\&\:disabled\]\:tsystem-cursor_default:disabled {
3226
- cursor: default;
3227
- }
3228
-
3229
- .\[\&_path\]\:tsystem-stk_icon\.base path {
3230
- stroke: var(--Tight-colors-icon-base);
3231
- }
3232
-
3233
- .\[\&_path\]\:tsystem-stk_icon\.accent\.danger path {
3234
- stroke: var(--Tight-colors-icon-accent-danger);
3235
- }
3236
-
3237
3223
  .\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.action .Tight-text {
3238
3224
  color: var(--Tight-colors-typography-intent-action);
3239
3225
  }
3240
3226
 
3241
- .\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.danger .Tight-text {
3242
- color: var(--Tight-colors-typography-intent-danger);
3243
- }
3244
-
3245
3227
  .\[\&\:\:before\]\:tsystem-content_\'\'::before {
3246
3228
  content: '';
3247
3229
  }
@@ -3270,6 +3252,14 @@
3270
3252
  color: var(--Tight-colors-typography-intent-warning);
3271
3253
  }
3272
3254
 
3255
+ .\[\&_path\]\:tsystem-stk_icon\.base path {
3256
+ stroke: var(--Tight-colors-icon-base);
3257
+ }
3258
+
3259
+ .\[\&_path\]\:tsystem-stk_icon\.accent\.danger path {
3260
+ stroke: var(--Tight-colors-icon-accent-danger);
3261
+ }
3262
+
3273
3263
  .\[\&\[data-state\=\'open\'\]\]\:tsystem-bg-c_surface\.intent\.action\.active[data-state='open'] {
3274
3264
  background-color: var(--Tight-colors-surface-intent-action-active);
3275
3265
  }
@@ -3290,14 +3280,18 @@
3290
3280
  background-color: var(--Tight-colors-currentColor);
3291
3281
  }
3292
3282
 
3293
- .\[\&\[data-state\=\'open\'\]\]\:tsystem-bg-c_surface\.intent\.action\.discreet\.active[data-state='open'] {
3294
- background-color: var(--Tight-colors-surface-intent-action-discreet-active);
3295
- }
3296
-
3297
3283
  .\[\&\:\:placeholder\]\:tsystem-c_typography\.base\.weak::placeholder {
3298
3284
  color: var(--Tight-colors-typography-base-weak);
3299
3285
  }
3300
3286
 
3287
+ .\[\&\:disabled\]\:tsystem-cursor_not-allowed:disabled {
3288
+ cursor: not-allowed;
3289
+ }
3290
+
3291
+ .\[\&\:disabled\]\:tsystem-op_0\.6:disabled {
3292
+ opacity: 0.6;
3293
+ }
3294
+
3301
3295
  .\[\&_\*\]\:tsystem-bx-s_border-box * {
3302
3296
  box-sizing: border-box;
3303
3297
  }
@@ -3306,6 +3300,22 @@
3306
3300
  pointer-events: none;
3307
3301
  }
3308
3302
 
3303
+ .\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.danger .Tight-text {
3304
+ color: var(--Tight-colors-typography-intent-danger);
3305
+ }
3306
+
3307
+ .\[\&\:disabled\]\:tsystem-cursor_default:disabled {
3308
+ cursor: default;
3309
+ }
3310
+
3311
+ .\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.secondary .Tight-text {
3312
+ color: var(--Tight-colors-typography-intent-secondary);
3313
+ }
3314
+
3315
+ .\[\&\[data-state\=\'open\'\]\]\:tsystem-bg-c_surface\.intent\.action\.discreet\.active[data-state='open'] {
3316
+ background-color: var(--Tight-colors-surface-intent-action-discreet-active);
3317
+ }
3318
+
3309
3319
  .placeholder\:tsystem-c_typography\.base\.weak::placeholder,.placeholder\:tsystem-c_typography\.base\.weak[data-placeholder] {
3310
3320
  color: var(--Tight-colors-typography-base-weak);
3311
3321
  }
@@ -3354,18 +3364,6 @@
3354
3364
  color: var(--Tight-colors-inherit);
3355
3365
  }
3356
3366
 
3357
- .\[\&\[data-open\=\'true\'\]\]\:tsystem-max-h_1\/3[data-open='true'] {
3358
- max-height: 33.333333%;
3359
- }
3360
-
3361
- .\[\&\[data-open\=\'true\'\]\]\:tsystem-pt_16[data-open='true'] {
3362
- padding-top: 16px;
3363
- }
3364
-
3365
- .\[\&\[data-open\=\'true\'\]\]\:tsystem-pb_16[data-open='true'] {
3366
- padding-bottom: 16px;
3367
- }
3368
-
3369
3367
  .\[\&\:\:before\]\:tsystem-top_-11px::before {
3370
3368
  top: -11px;
3371
3369
  }
@@ -3382,6 +3380,18 @@
3382
3380
  bottom: -11px;
3383
3381
  }
3384
3382
 
3383
+ .\[\&\[data-open\=\'true\'\]\]\:tsystem-max-h_1\/3[data-open='true'] {
3384
+ max-height: 33.333333%;
3385
+ }
3386
+
3387
+ .\[\&\[data-open\=\'true\'\]\]\:tsystem-pt_16[data-open='true'] {
3388
+ padding-top: 16px;
3389
+ }
3390
+
3391
+ .\[\&\[data-open\=\'true\'\]\]\:tsystem-pb_16[data-open='true'] {
3392
+ padding-bottom: 16px;
3393
+ }
3394
+
3385
3395
  .\[\&_\.Tight-text\:\:after\]\:tsystem-bottom_0 .Tight-text::after {
3386
3396
  bottom: 0;
3387
3397
  }
@@ -3540,10 +3550,6 @@
3540
3550
  border-color: var(--Tight-colors-border-intent-danger-hover);
3541
3551
  }
3542
3552
 
3543
- .\[\&\:focus-visible\]\:tsystem-ring_4px_solid:focus-visible {
3544
- outline: 4px solid;
3545
- }
3546
-
3547
3553
  .focusVisible\:tsystem-ring_4px_solid:is(:focus-visible, [data-focus-visible]) {
3548
3554
  outline: 4px solid;
3549
3555
  }
@@ -3553,6 +3559,10 @@
3553
3559
  outline-offset: 2px;
3554
3560
  }
3555
3561
 
3562
+ .\[\&\:focus-visible\]\:tsystem-ring_4px_solid:focus-visible {
3563
+ outline: 4px solid;
3564
+ }
3565
+
3556
3566
  .\[\&\:focus-visible\]\:tsystem-trs_none:focus-visible {
3557
3567
  transition: none;
3558
3568
  }
@@ -3565,14 +3575,14 @@
3565
3575
  outline: 4px solid;
3566
3576
  }
3567
3577
 
3568
- .\[\&\[data-clicked\=\'false\'\]\:has\(\:focus-visible\)\]\:tsystem-ring_4px_solid[data-clicked='false']:has(:focus-visible) {
3569
- outline: 4px solid;
3570
- }
3571
-
3572
3578
  .\[\&\:focus-visible\]\:tsystem-ring_2px_solid:focus-visible {
3573
3579
  outline: 2px solid;
3574
3580
  }
3575
3581
 
3582
+ .\[\&\[data-active\=\'false\'\]\:has\(\:focus-visible\)\]\:tsystem-ring_4px_solid[data-active='false']:has(:focus-visible) {
3583
+ outline: 4px solid;
3584
+ }
3585
+
3576
3586
  .\[\&\:has\(button\:focus-visible\)\]\:tsystem-ring_4px_solid:has(button:focus-visible) {
3577
3587
  outline: 4px solid;
3578
3588
  }
@@ -3581,15 +3591,15 @@
3581
3591
  border-radius: var(--Tight-radii-sm);
3582
3592
  }
3583
3593
 
3584
- .\[\&\:focus-visible\]\:tsystem-ring-c_border\.layout:focus-visible {
3585
- outline-color: var(--Tight-colors-border-layout);
3594
+ .\[\&\[data-clicked\=\'false\'\]\:has\(\:focus-visible\)\]\:tsystem-ring_4px_solid[data-clicked='false']:has(:focus-visible) {
3595
+ outline: 4px solid;
3586
3596
  }
3587
3597
 
3588
- .\[\&\:focus-visible\]\:tsystem-ring-o_-1px:focus-visible {
3589
- outline-offset: -1px;
3598
+ .focusVisible\:tsystem-ring-c_border\.layout:is(:focus-visible, [data-focus-visible]) {
3599
+ outline-color: var(--Tight-colors-border-layout);
3590
3600
  }
3591
3601
 
3592
- .focusVisible\:tsystem-ring-c_border\.layout:is(:focus-visible, [data-focus-visible]) {
3602
+ .\[\&\:focus-visible\]\:tsystem-ring-c_border\.layout:focus-visible {
3593
3603
  outline-color: var(--Tight-colors-border-layout);
3594
3604
  }
3595
3605
 
@@ -3617,14 +3627,18 @@
3617
3627
  pointer-events: none;
3618
3628
  }
3619
3629
 
3620
- .\[\&\[data-clicked\=\'false\'\]\:has\(\:focus-visible\)\]\:tsystem-ring-c_border\.layout[data-clicked='false']:has(:focus-visible) {
3621
- outline-color: var(--Tight-colors-border-layout);
3622
- }
3623
-
3624
3630
  .\[\&\:focus-visible\]\:tsystem-ring-o_2px:focus-visible {
3625
3631
  outline-offset: 2px;
3626
3632
  }
3627
3633
 
3634
+ .\[\&\:focus-visible\]\:tsystem-ring-o_-1px:focus-visible {
3635
+ outline-offset: -1px;
3636
+ }
3637
+
3638
+ .\[\&\[data-active\=\'false\'\]\:has\(\:focus-visible\)\]\:tsystem-ring-c_border\.layout[data-active='false']:has(:focus-visible) {
3639
+ outline-color: var(--Tight-colors-border-layout);
3640
+ }
3641
+
3628
3642
  .focus\:tsystem-z_2:is(:focus, [data-focus]) {
3629
3643
  z-index: 2;
3630
3644
  }
@@ -3645,6 +3659,10 @@
3645
3659
  outline-offset: 2px;
3646
3660
  }
3647
3661
 
3662
+ .\[\&\[data-clicked\=\'false\'\]\:has\(\:focus-visible\)\]\:tsystem-ring-c_border\.layout[data-clicked='false']:has(:focus-visible) {
3663
+ outline-color: var(--Tight-colors-border-layout);
3664
+ }
3665
+
3648
3666
  .\[\&\:focus-visible\:\:before\]\:tsystem-top_0:focus-visible::before {
3649
3667
  top: 0;
3650
3668
  }
@@ -3673,18 +3691,10 @@
3673
3691
  background-color: var(--Tight-colors-surface-intent-action-discreet-hover);
3674
3692
  }
3675
3693
 
3676
- .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_transparent:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_transparent[data-active='true']:enabled {
3677
- border-color: var(--Tight-colors-transparent);
3678
- }
3679
-
3680
3694
  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.action\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.action\.active[data-active='true']:enabled {
3681
3695
  border-color: var(--Tight-colors-border-intent-action-active);
3682
3696
  }
3683
3697
 
3684
- .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.danger\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.danger\.active[data-active='true']:enabled {
3685
- border-color: var(--Tight-colors-border-intent-danger-active);
3686
- }
3687
-
3688
3698
  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.primary\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.primary\.active[data-active='true']:enabled {
3689
3699
  border-color: var(--Tight-colors-border-intent-primary-active);
3690
3700
  }
@@ -3697,16 +3707,12 @@
3697
3707
  border-color: var(--Tight-colors-border-intent-warning-active);
3698
3708
  }
3699
3709
 
3700
- .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.action\.discreet\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.action\.discreet\.active[data-active='true']:enabled {
3701
- background-color: var(--Tight-colors-surface-intent-action-discreet-active);
3702
- }
3703
-
3704
- .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-c_icon\.intent\.action\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-c_icon\.intent\.action\.active[data-active='true']:enabled {
3705
- color: var(--Tight-colors-icon-intent-action-active);
3710
+ .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.danger\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.danger\.active[data-active='true']:enabled {
3711
+ border-color: var(--Tight-colors-border-intent-danger-active);
3706
3712
  }
3707
3713
 
3708
- .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-fill_icon\.intent\.action\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-fill_icon\.intent\.action\.active[data-active='true']:enabled {
3709
- fill: var(--Tight-colors-icon-intent-action-active);
3714
+ .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_transparent:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_transparent[data-active='true']:enabled {
3715
+ border-color: var(--Tight-colors-transparent);
3710
3716
  }
3711
3717
 
3712
3718
  .active\:tsystem-bg-c_surface\.intent\.action\.discreet\.active:is(:active, [data-active]) {
@@ -3717,10 +3723,6 @@
3717
3723
  background-color: var(--Tight-colors-surface-intent-action-active);
3718
3724
  }
3719
3725
 
3720
- .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.danger\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.danger\.active[data-active='true']:enabled {
3721
- background-color: var(--Tight-colors-surface-intent-danger-active);
3722
- }
3723
-
3724
3726
  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.primary\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.primary\.active[data-active='true']:enabled {
3725
3727
  background-color: var(--Tight-colors-surface-intent-primary-active);
3726
3728
  }
@@ -3733,6 +3735,22 @@
3733
3735
  background-color: var(--Tight-colors-surface-intent-warning-active);
3734
3736
  }
3735
3737
 
3738
+ .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.danger\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.danger\.active[data-active='true']:enabled {
3739
+ background-color: var(--Tight-colors-surface-intent-danger-active);
3740
+ }
3741
+
3742
+ .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.action\.discreet\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.action\.discreet\.active[data-active='true']:enabled {
3743
+ background-color: var(--Tight-colors-surface-intent-action-discreet-active);
3744
+ }
3745
+
3746
+ .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-c_icon\.intent\.action\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-c_icon\.intent\.action\.active[data-active='true']:enabled {
3747
+ color: var(--Tight-colors-icon-intent-action-active);
3748
+ }
3749
+
3750
+ .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-fill_icon\.intent\.action\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-fill_icon\.intent\.action\.active[data-active='true']:enabled {
3751
+ fill: var(--Tight-colors-icon-intent-action-active);
3752
+ }
3753
+
3736
3754
  .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.secondary\.hover:focus-visible .Tight-sub-label,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.secondary\.hover[data-state='open'] .Tight-sub-label {
3737
3755
  color: var(--Tight-colors-typography-intent-secondary-hover);
3738
3756
  }
@@ -3793,18 +3811,10 @@
3793
3811
  stroke: var(--Tight-colors-icon-intent-danger-hover);
3794
3812
  }
3795
3813
 
3796
- .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.secondary\.active:active:enabled .Tight-text,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.secondary\.active[data-active='true']:enabled .Tight-text {
3797
- color: var(--Tight-colors-typography-intent-secondary-active);
3798
- }
3799
-
3800
3814
  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.action\.active:active:enabled .Tight-text,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.action\.active[data-active='true']:enabled .Tight-text {
3801
3815
  color: var(--Tight-colors-typography-intent-action-active);
3802
3816
  }
3803
3817
 
3804
- .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.danger\.active:active:enabled .Tight-text,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.danger\.active[data-active='true']:enabled .Tight-text {
3805
- color: var(--Tight-colors-typography-intent-danger-active);
3806
- }
3807
-
3808
3818
  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.primary\.active:active:enabled .Tight-text,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.primary\.active[data-active='true']:enabled .Tight-text {
3809
3819
  color: var(--Tight-colors-typography-intent-primary-active);
3810
3820
  }
@@ -3825,6 +3835,14 @@
3825
3835
  color: var(--Tight-colors-typography-intent-warning-active);
3826
3836
  }
3827
3837
 
3838
+ .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.danger\.active:active:enabled .Tight-text,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.danger\.active[data-active='true']:enabled .Tight-text {
3839
+ color: var(--Tight-colors-typography-intent-danger-active);
3840
+ }
3841
+
3842
+ .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.secondary\.active:active:enabled .Tight-text,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.secondary\.active[data-active='true']:enabled .Tight-text {
3843
+ color: var(--Tight-colors-typography-intent-secondary-active);
3844
+ }
3845
+
3828
3846
  .\[\&\:hover\]\:\[\&_svg\]\:\[\&_path\]\:tsystem-stk_icon\.accent\.danger:hover svg path {
3829
3847
  stroke: var(--Tight-colors-icon-accent-danger);
3830
3848
  }
@@ -3866,6 +3884,10 @@
3866
3884
  line-height: 16px;
3867
3885
  }
3868
3886
 
3887
+ .sm\:tsystem-fs_label {
3888
+ font-size: var(--Tight-fontSizes-label);
3889
+ }
3890
+
3869
3891
  .sm\:tsystem-d_none {
3870
3892
  display: none;
3871
3893
  }
@@ -4002,14 +4024,6 @@
4002
4024
  }
4003
4025
 
4004
4026
  @media screen and (min-width: 53.125rem) {
4005
- .md\:tsystem-flex_1_1_0 {
4006
- flex: 1 1 0;
4007
- }
4008
-
4009
- .md\:tsystem-flex_0_0_342px {
4010
- flex: 0 0 342px;
4011
- }
4012
-
4013
4027
  .md\:tsystem-d_grid {
4014
4028
  display: grid;
4015
4029
  }
@@ -4104,6 +4118,10 @@
4104
4118
  gap: 12px;
4105
4119
  }
4106
4120
 
4121
+ .xl\:tsystem-flex_0_0_342px {
4122
+ flex: 0 0 342px;
4123
+ }
4124
+
4107
4125
  .xl\:tsystem-flex-sh_0 {
4108
4126
  flex-shrink: 0;
4109
4127
  }
@@ -4176,6 +4194,10 @@
4176
4194
  font-size: var(--Tight-fontSizes-label-strong);
4177
4195
  }
4178
4196
 
4197
+ .xl\:tsystem-ls_0\.84px {
4198
+ letter-spacing: 0.84px;
4199
+ }
4200
+
4179
4201
  .xl\:tsystem-fs_label\.strongSub {
4180
4202
  font-size: var(--Tight-fontSizes-label-strongSub);
4181
4203
  }
@@ -4196,6 +4218,10 @@
4196
4218
  font-size: 14px;
4197
4219
  }
4198
4220
 
4221
+ .xl\:tsystem-flex-wrap_wrap {
4222
+ flex-wrap: wrap;
4223
+ }
4224
+
4199
4225
  .xl\:tsystem-h_auto {
4200
4226
  height: auto;
4201
4227
  }
@@ -4252,33 +4278,37 @@
4252
4278
  height: 60px;
4253
4279
  }
4254
4280
 
4281
+ .xl\:tsystem-min-w_450px {
4282
+ min-width: 450px;
4283
+ }
4284
+
4285
+ .xl\:tsystem-w_342px {
4286
+ width: 342px;
4287
+ }
4288
+
4289
+ .xl\:tsystem-max-w_342px {
4290
+ max-width: 342px;
4291
+ }
4292
+
4255
4293
  .xl\:tsystem-min-w_900px {
4256
4294
  min-width: 900px;
4257
4295
  }
4296
+
4297
+ .xl\:tsystem-max-w_500px {
4298
+ max-width: 500px;
4299
+ }
4258
4300
  }
4259
4301
 
4260
4302
  @media screen and (max-width: 87.4975rem) {
4261
4303
  .tsystem-show_1\.5xl {
4262
4304
  display: none;
4263
4305
  }
4264
- }
4265
-
4266
- @media (hover: hover) and (pointer: fine) {
4267
- .supportHover\:notDisabled\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.secondary\.hover:not(:disabled, [disabled], [data-disabled]) .Tight-text:hover {
4268
- color: var(--Tight-colors-typography-intent-secondary-hover);
4269
- }
4270
4306
  }
4271
4307
 
4272
4308
  @media (hover: hover) and (pointer: fine) {
4273
4309
  .supportHover\:notDisabled\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.action\.hover:not(:disabled, [disabled], [data-disabled]) .Tight-text:hover {
4274
4310
  color: var(--Tight-colors-typography-intent-action-hover);
4275
4311
  }
4276
- }
4277
-
4278
- @media (hover: hover) and (pointer: fine) {
4279
- .supportHover\:notDisabled\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.danger\.hover:not(:disabled, [disabled], [data-disabled]) .Tight-text:hover {
4280
- color: var(--Tight-colors-typography-intent-danger-hover);
4281
- }
4282
4312
  }
4283
4313
 
4284
4314
  @media (hover: hover) and (pointer: fine) {
@@ -4312,20 +4342,20 @@
4312
4342
  }
4313
4343
 
4314
4344
  @media (hover: hover) and (pointer: fine) {
4315
- .supportHover\:notDisabled\:tsystem-bd_\{borderWidths\.lg\}_solid:not(:disabled, [disabled], [data-disabled]):hover {
4316
- border: var(--Tight-borderWidths-lg) solid;
4345
+ .supportHover\:notDisabled\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.danger\.hover:not(:disabled, [disabled], [data-disabled]) .Tight-text:hover {
4346
+ color: var(--Tight-colors-typography-intent-danger-hover);
4317
4347
  }
4318
4348
  }
4319
4349
 
4320
4350
  @media (hover: hover) and (pointer: fine) {
4321
- .supportHover\:notDisabled\:tsystem-bd-c_border\.layout:not(:disabled, [disabled], [data-disabled]):hover {
4322
- border-color: var(--Tight-colors-border-layout);
4351
+ .supportHover\:notDisabled\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.secondary\.hover:not(:disabled, [disabled], [data-disabled]) .Tight-text:hover {
4352
+ color: var(--Tight-colors-typography-intent-secondary-hover);
4323
4353
  }
4324
4354
  }
4325
4355
 
4326
4356
  @media (hover: hover) and (pointer: fine) {
4327
- .supportHover\:enabled\:tsystem-bd-c_border\.intent\.action\.hover:enabled:hover {
4328
- border-color: var(--Tight-colors-border-intent-action-hover);
4357
+ .supportHover\:notDisabled\:tsystem-bd_\{borderWidths\.lg\}_solid:not(:disabled, [disabled], [data-disabled]):hover {
4358
+ border: var(--Tight-borderWidths-lg) solid;
4329
4359
  }
4330
4360
  }
4331
4361
 
@@ -4345,12 +4375,6 @@
4345
4375
  .supportHover\:notDisabled\:tsystem-bd-c_border\.intent\.action\.hover:not(:disabled, [disabled], [data-disabled]):hover {
4346
4376
  border-color: var(--Tight-colors-border-intent-action-hover);
4347
4377
  }
4348
- }
4349
-
4350
- @media (hover: hover) and (pointer: fine) {
4351
- .supportHover\:notDisabled\:tsystem-bd-c_border\.intent\.danger\.hover:not(:disabled, [disabled], [data-disabled]):hover {
4352
- border-color: var(--Tight-colors-border-intent-danger-hover);
4353
- }
4354
4378
  }
4355
4379
 
4356
4380
  @media (hover: hover) and (pointer: fine) {
@@ -4375,6 +4399,24 @@
4375
4399
  .\[\&_\.Tight-text\:\:after\]\:supportHover\:tsystem-trs_width_300ms_ease-out .Tight-text::after:hover {
4376
4400
  transition: width 300ms ease-out;
4377
4401
  }
4402
+ }
4403
+
4404
+ @media (hover: hover) and (pointer: fine) {
4405
+ .supportHover\:notDisabled\:tsystem-bd-c_border\.intent\.danger\.hover:not(:disabled, [disabled], [data-disabled]):hover {
4406
+ border-color: var(--Tight-colors-border-intent-danger-hover);
4407
+ }
4408
+ }
4409
+
4410
+ @media (hover: hover) and (pointer: fine) {
4411
+ .supportHover\:enabled\:tsystem-bd-c_border\.intent\.action\.hover:enabled:hover {
4412
+ border-color: var(--Tight-colors-border-intent-action-hover);
4413
+ }
4414
+ }
4415
+
4416
+ @media (hover: hover) and (pointer: fine) {
4417
+ .supportHover\:notDisabled\:tsystem-bd-c_border\.layout:not(:disabled, [disabled], [data-disabled]):hover {
4418
+ border-color: var(--Tight-colors-border-layout);
4419
+ }
4378
4420
  }
4379
4421
 
4380
4422
  @media (hover: hover) and (pointer: fine) {
@@ -4468,62 +4510,62 @@
4468
4510
  }
4469
4511
 
4470
4512
  @media (hover: hover) and (pointer: fine) {
4471
- .supportHover\:notDisabled\:tsystem-bg-c_surface\.intent\.action\.discreet\.hover:not(:disabled, [disabled], [data-disabled]):hover {
4472
- background-color: var(--Tight-colors-surface-intent-action-discreet-hover);
4513
+ .supportHover\:notDisabled\:tsystem-bg-c_surface\.intent\.action\.hover:not(:disabled, [disabled], [data-disabled]):hover {
4514
+ background-color: var(--Tight-colors-surface-intent-action-hover);
4473
4515
  }
4474
4516
  }
4475
4517
 
4476
4518
  @media (hover: hover) and (pointer: fine) {
4477
- .supportHover\:enabled\:tsystem-bg-c_surface\.intent\.action\.discreet\.hover:enabled:hover {
4478
- background-color: var(--Tight-colors-surface-intent-action-discreet-hover);
4519
+ .supportHover\:notDisabled\:tsystem-bg-c_surface\.intent\.primary\.hover:not(:disabled, [disabled], [data-disabled]):hover {
4520
+ background-color: var(--Tight-colors-surface-intent-primary-hover);
4479
4521
  }
4480
4522
  }
4481
4523
 
4482
4524
  @media (hover: hover) and (pointer: fine) {
4483
- .supportHover\:enabled\:tsystem-c_icon\.intent\.action\.hover:enabled:hover {
4484
- color: var(--Tight-colors-icon-intent-action-hover);
4525
+ .supportHover\:notDisabled\:tsystem-bg-c_surface\.intent\.success\.hover:not(:disabled, [disabled], [data-disabled]):hover {
4526
+ background-color: var(--Tight-colors-surface-intent-success-hover);
4485
4527
  }
4486
4528
  }
4487
4529
 
4488
4530
  @media (hover: hover) and (pointer: fine) {
4489
- .supportHover\:enabled\:tsystem-fill_icon\.intent\.action\.hover:enabled:hover {
4490
- fill: var(--Tight-colors-icon-intent-action-hover);
4531
+ .supportHover\:notDisabled\:tsystem-bg-c_surface\.intent\.warning\.hover:not(:disabled, [disabled], [data-disabled]):hover {
4532
+ background-color: var(--Tight-colors-surface-intent-warning-hover);
4491
4533
  }
4492
4534
  }
4493
4535
 
4494
4536
  @media (hover: hover) and (pointer: fine) {
4495
- .supportHover\:notDisabled\:tsystem-bg-c_surface\.intent\.action\.hover:not(:disabled, [disabled], [data-disabled]):hover {
4496
- background-color: var(--Tight-colors-surface-intent-action-hover);
4537
+ .supportHover\:\[\&\[data-is-checked\=\'false\'\]\]\:tsystem-bg-c_surface\.background\.hover[data-is-checked='false']:hover {
4538
+ background-color: var(--Tight-colors-surface-background-hover);
4497
4539
  }
4498
4540
  }
4499
4541
 
4500
4542
  @media (hover: hover) and (pointer: fine) {
4501
- .supportHover\:notDisabled\:tsystem-bg-c_surface\.intent\.danger\.hover:not(:disabled, [disabled], [data-disabled]):hover {
4502
- background-color: var(--Tight-colors-surface-intent-danger-hover);
4543
+ .supportHover\:notDisabled\:tsystem-bg-c_surface\.intent\.action\.discreet\.hover:not(:disabled, [disabled], [data-disabled]):hover {
4544
+ background-color: var(--Tight-colors-surface-intent-action-discreet-hover);
4503
4545
  }
4504
4546
  }
4505
4547
 
4506
4548
  @media (hover: hover) and (pointer: fine) {
4507
- .supportHover\:notDisabled\:tsystem-bg-c_surface\.intent\.primary\.hover:not(:disabled, [disabled], [data-disabled]):hover {
4508
- background-color: var(--Tight-colors-surface-intent-primary-hover);
4549
+ .supportHover\:notDisabled\:tsystem-bg-c_surface\.intent\.danger\.hover:not(:disabled, [disabled], [data-disabled]):hover {
4550
+ background-color: var(--Tight-colors-surface-intent-danger-hover);
4509
4551
  }
4510
4552
  }
4511
4553
 
4512
4554
  @media (hover: hover) and (pointer: fine) {
4513
- .supportHover\:notDisabled\:tsystem-bg-c_surface\.intent\.success\.hover:not(:disabled, [disabled], [data-disabled]):hover {
4514
- background-color: var(--Tight-colors-surface-intent-success-hover);
4555
+ .supportHover\:enabled\:tsystem-bg-c_surface\.intent\.action\.discreet\.hover:enabled:hover {
4556
+ background-color: var(--Tight-colors-surface-intent-action-discreet-hover);
4515
4557
  }
4516
4558
  }
4517
4559
 
4518
4560
  @media (hover: hover) and (pointer: fine) {
4519
- .supportHover\:notDisabled\:tsystem-bg-c_surface\.intent\.warning\.hover:not(:disabled, [disabled], [data-disabled]):hover {
4520
- background-color: var(--Tight-colors-surface-intent-warning-hover);
4561
+ .supportHover\:enabled\:tsystem-c_icon\.intent\.action\.hover:enabled:hover {
4562
+ color: var(--Tight-colors-icon-intent-action-hover);
4521
4563
  }
4522
4564
  }
4523
4565
 
4524
4566
  @media (hover: hover) and (pointer: fine) {
4525
- .supportHover\:\[\&\[data-is-checked\=\'false\'\]\]\:tsystem-bg-c_surface\.background\.hover[data-is-checked='false']:hover {
4526
- background-color: var(--Tight-colors-surface-background-hover);
4567
+ .supportHover\:enabled\:tsystem-fill_icon\.intent\.action\.hover:enabled:hover {
4568
+ fill: var(--Tight-colors-icon-intent-action-hover);
4527
4569
  }
4528
4570
  }
4529
4571