@tight-embedded/react 6.7.0 → 6.8.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
@@ -102,6 +102,56 @@
102
102
  --Tight-colors-red400: #F45C5C;
103
103
  --Tight-colors-red500: #E84747;
104
104
  --Tight-colors-red700: #E42525;
105
+ --Tight-colors-template-appBackground: var(--Tight-colors-white200);
106
+ --Tight-colors-template-appBackground-weak: hsl(from var(--Tight-colors-template-appBackground) h max(calc(s - 5), 0) min(calc(l + 12), 93));
107
+ --Tight-colors-template-foreground: var(--Tight-colors-white100);
108
+ --Tight-colors-template-foreground-weak: hsl(from var(--Tight-colors-template-foreground) h max(calc(s - 5), 0) min(calc(l + 12), 93));
109
+ --Tight-colors-template-typography: var(--Tight-colors-black700);
110
+ --Tight-colors-template-typography-weak: hsl(from var(--Tight-colors-template-typography) h max(calc(s - 5), 0) min(calc(l + 12), 93));
111
+ --Tight-colors-template-brand: var(--Tight-colors-black600);
112
+ --Tight-colors-template-brand-weak: hsl(from var(--Tight-colors-template-brand) h max(calc(s - 5), 0) min(calc(l + 12), 93));
113
+ --Tight-colors-template-brand-strong: hsl(from var(--Tight-colors-template-brand) h min(calc(s + 5), 100) max(calc(l - 18), 5));
114
+ --Tight-colors-template-brand-weaker: hsl(from var(--Tight-colors-template-brand-weak) h max(calc(s - 5), 0) min(calc(l + 12), 93));
115
+ --Tight-colors-template-brand-stronger: hsl(from var(--Tight-colors-template-brand-strong) h min(calc(s + 5), 100) max(calc(l - 18), 5));
116
+ --Tight-colors-template-brand-weakest: hsl(from var(--Tight-colors-template-brand-weaker) h max(calc(s - 5), 0) min(calc(l + 12), 93));
117
+ --Tight-colors-template-brand-strongest: hsl(from var(--Tight-colors-template-brand-stronger) h min(calc(s + 5), 100) max(calc(l - 18), 5));
118
+ --Tight-colors-template-neutral: var(--Tight-colors-white600);
119
+ --Tight-colors-template-neutral-weak: hsl(from var(--Tight-colors-template-neutral) h max(calc(s - 5), 0) min(calc(l + 12), 93));
120
+ --Tight-colors-template-neutral-strong: hsl(from var(--Tight-colors-template-neutral) h min(calc(s + 5), 100) max(calc(l - 18), 5));
121
+ --Tight-colors-template-neutral-weaker: hsl(from var(--Tight-colors-template-neutral-weak) h max(calc(s - 5), 0) min(calc(l + 12), 93));
122
+ --Tight-colors-template-neutral-stronger: hsl(from var(--Tight-colors-template-neutral-strong) h min(calc(s + 5), 100) max(calc(l - 18), 5));
123
+ --Tight-colors-template-neutral-weakest: hsl(from var(--Tight-colors-template-neutral-weaker) h max(calc(s - 5), 0) min(calc(l + 12), 93));
124
+ --Tight-colors-template-neutral-strongest: hsl(from var(--Tight-colors-template-neutral-stronger) h min(calc(s + 5), 100) max(calc(l - 18), 5));
125
+ --Tight-colors-template-accent: var(--Tight-colors-blue400);
126
+ --Tight-colors-template-accent-weak: hsl(from var(--Tight-colors-template-accent) h max(calc(s - 5), 0) min(calc(l + 12), 93));
127
+ --Tight-colors-template-accent-strong: hsl(from var(--Tight-colors-template-accent) h min(calc(s + 5), 100) max(calc(l - 18), 5));
128
+ --Tight-colors-template-accent-weaker: hsl(from var(--Tight-colors-template-accent-weak) h max(calc(s - 5), 0) min(calc(l + 12), 93));
129
+ --Tight-colors-template-accent-stronger: hsl(from var(--Tight-colors-template-accent-strong) h min(calc(s + 5), 100) max(calc(l - 18), 5));
130
+ --Tight-colors-template-accent-weakest: hsl(from var(--Tight-colors-template-accent-weaker) h max(calc(s - 5), 0) min(calc(l + 12), 93));
131
+ --Tight-colors-template-accent-strongest: hsl(from var(--Tight-colors-template-accent-stronger) h min(calc(s + 5), 100) max(calc(l - 18), 5));
132
+ --Tight-colors-template-success: var(--Tight-colors-green400);
133
+ --Tight-colors-template-success-weak: hsl(from var(--Tight-colors-template-success) h max(calc(s - 5), 0) min(calc(l + 12), 93));
134
+ --Tight-colors-template-success-strong: hsl(from var(--Tight-colors-template-success) h min(calc(s + 5), 100) max(calc(l - 18), 5));
135
+ --Tight-colors-template-success-weaker: hsl(from var(--Tight-colors-template-success-weak) h max(calc(s - 5), 0) min(calc(l + 12), 93));
136
+ --Tight-colors-template-success-stronger: hsl(from var(--Tight-colors-template-success-strong) h min(calc(s + 5), 100) max(calc(l - 18), 5));
137
+ --Tight-colors-template-success-weakest: hsl(from var(--Tight-colors-template-success-weaker) h max(calc(s - 5), 0) min(calc(l + 12), 93));
138
+ --Tight-colors-template-success-strongest: hsl(from var(--Tight-colors-template-success-stronger) h min(calc(s + 5), 100) max(calc(l - 18), 5));
139
+ --Tight-colors-template-warning: var(--Tight-colors-yellow400);
140
+ --Tight-colors-template-warning-weak: hsl(from var(--Tight-colors-template-warning) h max(calc(s - 5), 0) min(calc(l + 12), 93));
141
+ --Tight-colors-template-warning-strong: hsl(from var(--Tight-colors-template-warning) h min(calc(s + 5), 100) max(calc(l - 18), 5));
142
+ --Tight-colors-template-warning-weaker: hsl(from var(--Tight-colors-template-warning-weak) h max(calc(s - 5), 0) min(calc(l + 12), 93));
143
+ --Tight-colors-template-warning-stronger: hsl(from var(--Tight-colors-template-warning-strong) h min(calc(s + 5), 100) max(calc(l - 18), 5));
144
+ --Tight-colors-template-warning-weakest: hsl(from var(--Tight-colors-template-warning-weaker) h max(calc(s - 5), 0) min(calc(l + 12), 93));
145
+ --Tight-colors-template-warning-strongest: hsl(from var(--Tight-colors-template-warning-stronger) h min(calc(s + 5), 100) max(calc(l - 18), 5));
146
+ --Tight-colors-template-danger: var(--Tight-colors-red400);
147
+ --Tight-colors-template-danger-weak: hsl(from var(--Tight-colors-template-danger) h max(calc(s - 5), 0) min(calc(l + 12), 93));
148
+ --Tight-colors-template-danger-strong: hsl(from var(--Tight-colors-template-danger) h min(calc(s + 5), 100) max(calc(l - 18), 5));
149
+ --Tight-colors-template-danger-weaker: hsl(from var(--Tight-colors-template-danger-weak) h max(calc(s - 5), 0) min(calc(l + 12), 93));
150
+ --Tight-colors-template-danger-stronger: hsl(from var(--Tight-colors-template-danger-strong) h min(calc(s + 5), 100) max(calc(l - 18), 5));
151
+ --Tight-colors-template-danger-weakest: hsl(from var(--Tight-colors-template-danger-weaker) h max(calc(s - 5), 0) min(calc(l + 12), 93));
152
+ --Tight-colors-template-danger-strongest: hsl(from var(--Tight-colors-template-danger-stronger) h min(calc(s + 5), 100) max(calc(l - 18), 5));
153
+ --Tight-lineHeights-template: normal;
154
+ --Tight-letterSpacings-template: normal;
105
155
  --Tight-fonts-base: Duplet Regular, sans-serif;
106
156
  --Tight-fontSizes-sm: 12px;
107
157
  --Tight-fontSizes-md: 14px;
@@ -124,58 +174,62 @@
124
174
  --Tight-animations-shimmer: 2s ease-in-out infinite shimmer;
125
175
  --Tight-animations-spin: 1.5s ease-in-out 0.1s spin infinite;
126
176
  --Tight-shadows-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.05), 0px 4px 12px 0px rgba(0, 0, 0, 0.15) ;
177
+ --Tight-durations-toast-enter: 250ms;
178
+ --Tight-durations-toast-exit: 200ms;
179
+ --Tight-easings-toast-enter: ease-out;
180
+ --Tight-easings-toast-exit: ease-in;
127
181
  --Tight-breakpoints-sm: 640px;
128
182
  --Tight-breakpoints-md: 850px;
129
183
  --Tight-breakpoints-lg: 1024px;
130
184
  --Tight-breakpoints-xl: 1280px;
131
- --Tight-breakpoints-1.5xl: 1400px;
185
+ --Tight-breakpoints-1_5xl: 1400px;
132
186
  --Tight-breakpoints-2xl: 1536px;
133
187
  --Tight-sizes-breakpoint-sm: 640px;
134
188
  --Tight-sizes-breakpoint-md: 850px;
135
189
  --Tight-sizes-breakpoint-lg: 1024px;
136
190
  --Tight-sizes-breakpoint-xl: 1280px;
137
- --Tight-sizes-breakpoint-1.5xl: 1400px;
191
+ --Tight-sizes-breakpoint-1_5xl: 1400px;
138
192
  --Tight-sizes-breakpoint-2xl: 1536px;
139
- --Tight-colors-brand-primary-weaker: var(--Tight-colors-black200);
140
- --Tight-colors-brand-primary-weak: var(--Tight-colors-black400);
141
- --Tight-colors-brand-primary: var(--Tight-colors-black600);
142
- --Tight-colors-brand-primary-strong: var(--Tight-colors-black700);
143
- --Tight-colors-brand-primary-stronger: var(--Tight-colors-black800);
144
- --Tight-colors-brand-secondary-weaker: var(--Tight-colors-white100);
145
- --Tight-colors-brand-secondary-weak: var(--Tight-colors-white200);
146
- --Tight-colors-brand-secondary: var(--Tight-colors-white600);
147
- --Tight-colors-brand-secondary-strong: var(--Tight-colors-black100);
148
- --Tight-colors-brand-action-opaque: var(--Tight-colors-blue200);
149
- --Tight-colors-brand-action-weaker: var(--Tight-colors-brand-action-opaque);
150
- --Tight-colors-brand-action-weak: var(--Tight-colors-blue300);
151
- --Tight-colors-brand-action: var(--Tight-colors-blue400);
152
- --Tight-colors-brand-action-strong: var(--Tight-colors-blue500);
153
- --Tight-colors-brand-action-stronger: var(--Tight-colors-blue700);
154
- --Tight-colors-brand-action-strongest: var(--Tight-colors-blue900);
155
- --Tight-colors-brand-success-opaque: var(--Tight-colors-green100);
156
- --Tight-colors-brand-success-weaker: var(--Tight-colors-brand-success-opaque);
157
- --Tight-colors-brand-success-weak: var(--Tight-colors-green300);
158
- --Tight-colors-brand-success: var(--Tight-colors-green400);
159
- --Tight-colors-brand-success-strong: var(--Tight-colors-green500);
160
- --Tight-colors-brand-success-stronger: var(--Tight-colors-green700);
161
- --Tight-colors-brand-success-strongest: var(--Tight-colors-green900);
162
- --Tight-colors-brand-warning-opaque: var(--Tight-colors-yellow200);
163
- --Tight-colors-brand-warning-weaker: var(--Tight-colors-brand-warning-opaque);
164
- --Tight-colors-brand-warning-weak: var(--Tight-colors-yellow300);
165
- --Tight-colors-brand-warning: var(--Tight-colors-yellow400);
166
- --Tight-colors-brand-warning-strong: var(--Tight-colors-yellow500);
167
- --Tight-colors-brand-warning-stronger: var(--Tight-colors-yellow700);
168
- --Tight-colors-brand-warning-strongest: var(--Tight-colors-yellow800);
169
- --Tight-colors-brand-danger-opaque: var(--Tight-colors-red200);
170
- --Tight-colors-brand-danger-weaker: var(--Tight-colors-brand-danger-opaque);
171
- --Tight-colors-brand-danger-weak: var(--Tight-colors-red300);
172
- --Tight-colors-brand-danger: var(--Tight-colors-red400);
173
- --Tight-colors-brand-danger-strong: var(--Tight-colors-red500);
174
- --Tight-colors-brand-danger-stronger: var(--Tight-colors-red700);
193
+ --Tight-colors-brand-primary-weaker: var(--Tight-colors-template-brand-weaker);
194
+ --Tight-colors-brand-primary-weak: var(--Tight-colors-template-brand-weak);
195
+ --Tight-colors-brand-primary: var(--Tight-colors-template-brand);
196
+ --Tight-colors-brand-primary-strong: var(--Tight-colors-template-brand-strong);
197
+ --Tight-colors-brand-primary-stronger: var(--Tight-colors-template-brand-stronger);
198
+ --Tight-colors-brand-secondary-weaker: var(--Tight-colors-template-neutral-weaker);
199
+ --Tight-colors-brand-secondary-weak: var(--Tight-colors-template-neutral-weak);
200
+ --Tight-colors-brand-secondary: var(--Tight-colors-template-neutral);
201
+ --Tight-colors-brand-secondary-strong: var(--Tight-colors-template-neutral-strong);
202
+ --Tight-colors-brand-action-opaque: var(--Tight-colors-template-accent-weaker);
203
+ --Tight-colors-brand-action-weaker: var(--Tight-colors-template-accent-weaker);
204
+ --Tight-colors-brand-action-weak: var(--Tight-colors-template-accent-weak);
205
+ --Tight-colors-brand-action: var(--Tight-colors-template-accent);
206
+ --Tight-colors-brand-action-strong: var(--Tight-colors-template-accent-strong);
207
+ --Tight-colors-brand-action-stronger: var(--Tight-colors-template-accent-stronger);
208
+ --Tight-colors-brand-action-strongest: var(--Tight-colors-template-accent-strongest);
209
+ --Tight-colors-brand-success-opaque: var(--Tight-colors-template-success-weaker);
210
+ --Tight-colors-brand-success-weaker: var(--Tight-colors-template-success-weaker);
211
+ --Tight-colors-brand-success-weak: var(--Tight-colors-template-success-weak);
212
+ --Tight-colors-brand-success: var(--Tight-colors-template-success);
213
+ --Tight-colors-brand-success-strong: var(--Tight-colors-template-success-strong);
214
+ --Tight-colors-brand-success-stronger: var(--Tight-colors-template-success-stronger);
215
+ --Tight-colors-brand-success-strongest: var(--Tight-colors-template-success-strongest);
216
+ --Tight-colors-brand-warning-opaque: var(--Tight-colors-template-warning-weaker);
217
+ --Tight-colors-brand-warning-weaker: var(--Tight-colors-template-warning-weaker);
218
+ --Tight-colors-brand-warning-weak: var(--Tight-colors-template-warning-weak);
219
+ --Tight-colors-brand-warning: var(--Tight-colors-template-warning);
220
+ --Tight-colors-brand-warning-strong: var(--Tight-colors-template-warning-strong);
221
+ --Tight-colors-brand-warning-stronger: var(--Tight-colors-template-warning-stronger);
222
+ --Tight-colors-brand-warning-strongest: var(--Tight-colors-template-warning-strongest);
223
+ --Tight-colors-brand-danger-opaque: var(--Tight-colors-template-danger-weaker);
224
+ --Tight-colors-brand-danger-weaker: var(--Tight-colors-template-danger-weaker);
225
+ --Tight-colors-brand-danger-weak: var(--Tight-colors-template-danger-weak);
226
+ --Tight-colors-brand-danger: var(--Tight-colors-template-danger);
227
+ --Tight-colors-brand-danger-strong: var(--Tight-colors-template-danger-strong);
228
+ --Tight-colors-brand-danger-stronger: var(--Tight-colors-template-danger-stronger);
175
229
  --Tight-colors-surface-background: var(--Tight-colors-white200);
176
230
  --Tight-colors-surface-background-hover: var(--Tight-colors-white300);
177
- --Tight-colors-surface-foreground: var(--Tight-colors-white100);
178
- --Tight-colors-surface-foreground-hover: var(--Tight-colors-white200);
231
+ --Tight-colors-surface-foreground: var(--Tight-colors-template-foreground);
232
+ --Tight-colors-surface-foreground-hover: var(--Tight-colors-template-foreground-weak);
179
233
  --Tight-colors-surface-foreground-disabled: var(--Tight-colors-white600);
180
234
  --Tight-colors-surface-elevated: var(--Tight-colors-white300);
181
235
  --Tight-colors-surface-elevated-hover: var(--Tight-colors-white600);
@@ -211,9 +265,10 @@
211
265
  --Tight-colors-surface-intent-danger-disabled: var(--Tight-colors-surface-foreground-disabled);
212
266
  --Tight-colors-surface-intent-danger-weak: var(--Tight-colors-brand-danger-weak);
213
267
  --Tight-colors-surface-intent-danger-highlight: var(--Tight-colors-brand-danger-weaker);
268
+ --Tight-colors-surface-intent-notification: var(--Tight-colors-surface-foreground);
214
269
  --Tight-colors-surface-reports-alternateRows: var(--Tight-colors-brand-action-weaker);
215
- --Tight-colors-typography-base: var(--Tight-colors-black700);
216
- --Tight-colors-typography-base-weak: var(--Tight-colors-black400);
270
+ --Tight-colors-typography-base: var(--Tight-colors-template-typography);
271
+ --Tight-colors-typography-base-weak: var(--Tight-colors-template-typography-weak);
217
272
  --Tight-colors-typography-contrast: var(--Tight-colors-white100);
218
273
  --Tight-colors-typography-contrast-weak: var(--Tight-colors-black100);
219
274
  --Tight-colors-typography-intent-primary: var(--Tight-colors-white100);
@@ -234,6 +289,7 @@
234
289
  --Tight-colors-typography-intent-danger: var(--Tight-colors-typography-base);
235
290
  --Tight-colors-typography-intent-danger-hover: var(--Tight-colors-typography-base);
236
291
  --Tight-colors-typography-intent-danger-active: var(--Tight-colors-typography-base);
292
+ --Tight-colors-typography-intent-notification: var(--Tight-colors-typography-base);
237
293
  --Tight-colors-typography-accent-success: var(--Tight-colors-brand-success-strong);
238
294
  --Tight-colors-typography-accent-warning: var(--Tight-colors-brand-warning-strong);
239
295
  --Tight-colors-typography-accent-danger: var(--Tight-colors-brand-danger-strong);
@@ -459,10 +515,6 @@
459
515
  padding: 16px 12px;
460
516
  }
461
517
 
462
- .tsystem-bd_0\.75px {
463
- border: 0.75px;
464
- }
465
-
466
518
  .tsystem-p_8px_16px {
467
519
  padding: 8px 16px;
468
520
  }
@@ -587,6 +639,10 @@
587
639
  animation: linear 1s spin infinite;
588
640
  }
589
641
 
642
+ .tsystem-bg_conic-gradient\(from_90deg\,_transparent_0deg\,_\{colors\.icon\.base\.weak\}_360deg\) {
643
+ background: conic-gradient(from 90deg, transparent 0deg, var(--Tight-colors-icon-base-weak) 360deg);
644
+ }
645
+
590
646
  .tsystem-anim_shimmer {
591
647
  animation: var(--Tight-animations-shimmer);
592
648
  }
@@ -831,6 +887,10 @@
831
887
  border-color: var(--Tight-colors-border-intent-danger);
832
888
  }
833
889
 
890
+ .tsystem-bd-w_md {
891
+ border-width: var(--Tight-borderWidths-md);
892
+ }
893
+
834
894
  .tsystem-border-style_solid {
835
895
  border-style: solid;
836
896
  }
@@ -879,6 +939,10 @@
879
939
  gap: inherit;
880
940
  }
881
941
 
942
+ .tsystem-flex_1 {
943
+ flex: 1 1 0%;
944
+ }
945
+
882
946
  .tsystem-gap_4px {
883
947
  gap: 4px;
884
948
  }
@@ -924,10 +988,6 @@
924
988
  border-radius: 2px;
925
989
  }
926
990
 
927
- .tsystem-flex_1 {
928
- flex: 1 1 0%;
929
- }
930
-
931
991
  .tsystem-bd-c_normal {
932
992
  border-color: normal;
933
993
  }
@@ -964,6 +1024,10 @@
964
1024
  background-position: 100% 0;
965
1025
  }
966
1026
 
1027
+ .tsystem-bd-c_transparent {
1028
+ border-color: var(--Tight-colors-transparent);
1029
+ }
1030
+
967
1031
  .tsystem-gap_15px {
968
1032
  gap: 15px;
969
1033
  }
@@ -1000,6 +1064,14 @@
1000
1064
  gap: 9px;
1001
1065
  }
1002
1066
 
1067
+ .tsystem-px_16px {
1068
+ padding-inline: 16px;
1069
+ }
1070
+
1071
+ .tsystem-py_12px {
1072
+ padding-block: 12px;
1073
+ }
1074
+
1003
1075
  .tsystem-bd-w_1 {
1004
1076
  border-width: 1px;
1005
1077
  }
@@ -1064,6 +1136,10 @@
1064
1136
  transition: all 300ms ease-out;
1065
1137
  }
1066
1138
 
1139
+ .tsystem-bd-r_1px_solid_\{colors\.border\.layout\} {
1140
+ border-right: 1px solid var(--Tight-colors-border-layout);
1141
+ }
1142
+
1067
1143
  .tsystem-bdr_4px {
1068
1144
  border-radius: 4px;
1069
1145
  }
@@ -1120,10 +1196,6 @@
1120
1196
  border-top: var(--Tight-borderWidths-md) solid var(--Tight-colors-border-layout-weak);
1121
1197
  }
1122
1198
 
1123
- .tsystem-px_16px {
1124
- padding-inline: 16px;
1125
- }
1126
-
1127
1199
  .tsystem-bd-t_\{borderWidths\.md\}_solid_\{colors\.border\.layout\.strong\} {
1128
1200
  border-top: var(--Tight-borderWidths-md) solid var(--Tight-colors-border-layout-strong);
1129
1201
  }
@@ -1144,10 +1216,6 @@
1144
1216
  gap: 16px;
1145
1217
  }
1146
1218
 
1147
- .tsystem-bd-r_1px_solid_\{colors\.border\.layout\} {
1148
- border-right: 1px solid var(--Tight-colors-border-layout);
1149
- }
1150
-
1151
1219
  .tsystem-bd-l_1px_solid_\{colors\.border\.layout\} {
1152
1220
  border-left: 1px solid var(--Tight-colors-border-layout);
1153
1221
  }
@@ -1184,10 +1252,6 @@
1184
1252
  border-width: var(--Tight-borderWidths-sm);
1185
1253
  }
1186
1254
 
1187
- .tsystem-bd-w_md {
1188
- border-width: var(--Tight-borderWidths-md);
1189
- }
1190
-
1191
1255
  .tsystem-bd-c_border\.layout\.weak {
1192
1256
  border-color: var(--Tight-colors-border-layout-weak);
1193
1257
  }
@@ -1260,6 +1324,10 @@
1260
1324
  display: flex;
1261
1325
  }
1262
1326
 
1327
+ .tsystem-bg-c_surface\.foreground {
1328
+ background-color: var(--Tight-colors-surface-foreground);
1329
+ }
1330
+
1263
1331
  .tsystem-bg-c_brand\.primary {
1264
1332
  background-color: var(--Tight-colors-brand-primary);
1265
1333
  }
@@ -1280,10 +1348,6 @@
1280
1348
  justify-content: space-between;
1281
1349
  }
1282
1350
 
1283
- .tsystem-bg-c_surface\.foreground {
1284
- background-color: var(--Tight-colors-surface-foreground);
1285
- }
1286
-
1287
1351
  .tsystem-flex-d_column {
1288
1352
  flex-direction: column;
1289
1353
  }
@@ -1321,8 +1385,8 @@
1321
1385
  font-weight: var(--Tight-fontWeights-sm);
1322
1386
  }
1323
1387
 
1324
- .tsystem-lh_12px {
1325
- line-height: 12px;
1388
+ .tsystem-lh_template {
1389
+ line-height: var(--Tight-lineHeights-template);
1326
1390
  }
1327
1391
 
1328
1392
  .tsystem-white-space_normal {
@@ -1341,22 +1405,10 @@
1341
1405
  font-size: var(--Tight-fontSizes-md);
1342
1406
  }
1343
1407
 
1344
- .tsystem-lh_18px {
1345
- line-height: 18px;
1346
- }
1347
-
1348
1408
  .tsystem-fw_md {
1349
1409
  font-weight: var(--Tight-fontWeights-md);
1350
1410
  }
1351
1411
 
1352
- .tsystem-lh_16px {
1353
- line-height: 16px;
1354
- }
1355
-
1356
- .tsystem-lh_14px {
1357
- line-height: 14px;
1358
- }
1359
-
1360
1412
  .tsystem-bx-s_border-box {
1361
1413
  box-sizing: border-box;
1362
1414
  }
@@ -1430,10 +1482,6 @@
1430
1482
  font-size: var(--Tight-fontSizes-xl);
1431
1483
  }
1432
1484
 
1433
- .tsystem-lh_26px {
1434
- line-height: 26px;
1435
- }
1436
-
1437
1485
  .tsystem-pos_fixed {
1438
1486
  position: fixed;
1439
1487
  }
@@ -1582,10 +1630,6 @@
1582
1630
  background-color: var(--Tight-colors-surface-foreground-disabled);
1583
1631
  }
1584
1632
 
1585
- .tsystem-pointer-events_none {
1586
- pointer-events: none;
1587
- }
1588
-
1589
1633
  .tsystem-cursor_text {
1590
1634
  cursor: text;
1591
1635
  }
@@ -1634,6 +1678,10 @@
1634
1678
  justify-content: flex-end;
1635
1679
  }
1636
1680
 
1681
+ .tsystem-op_1 {
1682
+ opacity: 1;
1683
+ }
1684
+
1637
1685
  .tsystem-bg-c_surface\.elevated {
1638
1686
  background-color: var(--Tight-colors-surface-elevated);
1639
1687
  }
@@ -1646,6 +1694,14 @@
1646
1694
  background-size: 400%;
1647
1695
  }
1648
1696
 
1697
+ .tsystem-fw_label\.strong {
1698
+ font-weight: var(--Tight-fontWeights-label-strong);
1699
+ }
1700
+
1701
+ .tsystem-obj-p_left {
1702
+ object-position: left;
1703
+ }
1704
+
1649
1705
  .tsystem-cursor_not-allowed {
1650
1706
  cursor: not-allowed;
1651
1707
  }
@@ -1666,6 +1722,18 @@
1666
1722
  flex-shrink: 1;
1667
1723
  }
1668
1724
 
1725
+ .tsystem-isolation_isolate {
1726
+ isolation: isolate;
1727
+ }
1728
+
1729
+ .tsystem-op_80\% {
1730
+ opacity: 80%;
1731
+ }
1732
+
1733
+ .tsystem-pointer-events_all {
1734
+ pointer-events: all;
1735
+ }
1736
+
1669
1737
  .tsystem-bg-c_surface\.intent\.success\.highlight {
1670
1738
  background-color: var(--Tight-colors-surface-intent-success-highlight);
1671
1739
  }
@@ -1678,6 +1746,10 @@
1678
1746
  opacity: 0.6;
1679
1747
  }
1680
1748
 
1749
+ .tsystem-pointer-events_none {
1750
+ pointer-events: none;
1751
+ }
1752
+
1681
1753
  .tsystem-jc_end {
1682
1754
  justify-content: end;
1683
1755
  }
@@ -1700,8 +1772,39 @@
1700
1772
  color: var(--Tight-colors-icon-intent-primary);
1701
1773
  }
1702
1774
 
1703
- .tsystem-pointer-events_all {
1704
- pointer-events: all;
1775
+ .tsystem-bg-c_surface\.intent\.notification {
1776
+ background-color: var(--Tight-colors-surface-intent-notification);
1777
+ }
1778
+
1779
+ .tsystem-c_typography\.intent\.notification {
1780
+ color: var(--Tight-colors-typography-intent-notification);
1781
+ }
1782
+
1783
+ .tsystem-will-change_translate\,_opacity {
1784
+ will-change: translate, opacity;
1785
+ }
1786
+
1787
+ .tsystem-trs-prop_opacity\,_translate {
1788
+ --transition-prop: opacity, translate;
1789
+ transition-property: opacity, translate;
1790
+ }
1791
+
1792
+ .tsystem-trs-dur_toast\.enter {
1793
+ --transition-duration: var(--Tight-durations-toast-enter);
1794
+ transition-duration: var(--Tight-durations-toast-enter);
1795
+ }
1796
+
1797
+ .tsystem-trs-tmf_toast\.enter {
1798
+ --transition-easing: var(--Tight-easings-toast-enter);
1799
+ transition-timing-function: var(--Tight-easings-toast-enter);
1800
+ }
1801
+
1802
+ .tsystem-fill_typography\.intent\.notification {
1803
+ fill: var(--Tight-colors-typography-intent-notification);
1804
+ }
1805
+
1806
+ .tsystem-stk_surface\.intent\.notification {
1807
+ stroke: var(--Tight-colors-surface-intent-notification);
1705
1808
  }
1706
1809
 
1707
1810
  .tsystem-fw_lg {
@@ -1764,18 +1867,10 @@
1764
1867
  -webkit-box-orient: vertical;
1765
1868
  }
1766
1869
 
1767
- .tsystem-lh_20px {
1768
- line-height: 20px;
1769
- }
1770
-
1771
1870
  .tsystem-trf_rotate\(-20deg\) {
1772
1871
  transform: rotate(-20deg);
1773
1872
  }
1774
1873
 
1775
- .tsystem-op_80\% {
1776
- opacity: 80%;
1777
- }
1778
-
1779
1874
  .tsystem-fs_4em {
1780
1875
  font-size: 4em;
1781
1876
  }
@@ -1820,6 +1915,14 @@
1820
1915
  background-color: var(--Tight-colors-typography-base);
1821
1916
  }
1822
1917
 
1918
+ .tsystem-pos_sticky {
1919
+ position: sticky;
1920
+ }
1921
+
1922
+ .tsystem-as_flex-start {
1923
+ align-self: flex-start;
1924
+ }
1925
+
1823
1926
  .tsystem-bg-linear_to-t {
1824
1927
  --gradient-stops: var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position));
1825
1928
  --gradient-position: to top;
@@ -1842,14 +1945,22 @@
1842
1945
  --gradient-to-position: 106.24%;
1843
1946
  }
1844
1947
 
1845
- .tsystem-fw_label\.strong {
1846
- font-weight: var(--Tight-fontWeights-label-strong);
1948
+ .tsystem-ff_Duplet_Semibold\,_sans-serif {
1949
+ font-family: Duplet Semibold, sans-serif;
1847
1950
  }
1848
1951
 
1849
1952
  .tsystem-c_\#FFF {
1850
1953
  color: #FFF;
1851
1954
  }
1852
1955
 
1956
+ .tsystem-ff_Duplet_Regular\,_sans-serif {
1957
+ font-family: Duplet Regular, sans-serif;
1958
+ }
1959
+
1960
+ .tsystem-ls_0\.84px {
1961
+ letter-spacing: 0.84px;
1962
+ }
1963
+
1853
1964
  .tsystem-d_inline {
1854
1965
  display: inline;
1855
1966
  }
@@ -1862,10 +1973,6 @@
1862
1973
  cursor: inherit;
1863
1974
  }
1864
1975
 
1865
- .tsystem-pos_sticky {
1866
- position: sticky;
1867
- }
1868
-
1869
1976
  .tsystem-z_1 {
1870
1977
  z-index: 1;
1871
1978
  }
@@ -1938,10 +2045,6 @@
1938
2045
  color: var(--Tight-colors-typography-heading);
1939
2046
  }
1940
2047
 
1941
- .tsystem-lh_25px {
1942
- line-height: 25px;
1943
- }
1944
-
1945
2048
  .tsystem-fw_metric\.sm {
1946
2049
  font-weight: var(--Tight-fontWeights-metric-sm);
1947
2050
  }
@@ -2010,14 +2113,14 @@
2010
2113
  font-size: 14px;
2011
2114
  }
2012
2115
 
2013
- .tsystem-c_black600 {
2014
- color: var(--Tight-colors-black600);
2015
- }
2016
-
2017
2116
  .tsystem-c_black400 {
2018
2117
  color: var(--Tight-colors-black400);
2019
2118
  }
2020
2119
 
2120
+ .tsystem-op_0\.4 {
2121
+ opacity: 0.4;
2122
+ }
2123
+
2021
2124
  .tsystem-bg-cp_content-box {
2022
2125
  background-clip: content-box;
2023
2126
  -webkit-background-clip: content-box;
@@ -2040,6 +2143,10 @@
2040
2143
  -webkit-backdrop-filter: brightness(85%);
2041
2144
  }
2042
2145
 
2146
+ .tsystem-c_black600 {
2147
+ color: var(--Tight-colors-black600);
2148
+ }
2149
+
2043
2150
  .tsystem-c_brand\.danger {
2044
2151
  color: var(--Tight-colors-brand-danger);
2045
2152
  }
@@ -2094,10 +2201,6 @@
2094
2201
  background-color: foreground;
2095
2202
  }
2096
2203
 
2097
- .tsystem-isolation_isolate {
2098
- isolation: isolate;
2099
- }
2100
-
2101
2204
  .tsystem-grid-tc_repeat\(7\,_1fr\) {
2102
2205
  grid-template-columns: repeat(7, 1fr);
2103
2206
  }
@@ -2235,6 +2338,10 @@
2235
2338
  font-size: 26px;
2236
2339
  }
2237
2340
 
2341
+ .tsystem-lh_26px {
2342
+ line-height: 26px;
2343
+ }
2344
+
2238
2345
  .tsystem-c_icon\.base\.weak {
2239
2346
  color: var(--Tight-colors-icon-base-weak);
2240
2347
  }
@@ -2283,10 +2390,6 @@
2283
2390
  color: var(--Tight-colors-money-negative);
2284
2391
  }
2285
2392
 
2286
- .tsystem-ff_Duplet_Regular\,_sans-serif {
2287
- font-family: Duplet Regular, sans-serif;
2288
- }
2289
-
2290
2393
  .tsystem-bg-c_surface\.intent\.action\.discreet\.hover {
2291
2394
  background-color: var(--Tight-colors-surface-intent-action-discreet-hover);
2292
2395
  }
@@ -2323,6 +2426,18 @@
2323
2426
  width: fit-content;
2324
2427
  }
2325
2428
 
2429
+ .tsystem-h_80px {
2430
+ height: 80px;
2431
+ }
2432
+
2433
+ .tsystem-pl_16px {
2434
+ padding-left: 16px;
2435
+ }
2436
+
2437
+ .tsystem-pr_16px {
2438
+ padding-right: 16px;
2439
+ }
2440
+
2326
2441
  .tsystem-min-h_55px {
2327
2442
  min-height: 55px;
2328
2443
  }
@@ -2383,14 +2498,6 @@
2383
2498
  height: 20px;
2384
2499
  }
2385
2500
 
2386
- .tsystem-pl_16px {
2387
- padding-left: 16px;
2388
- }
2389
-
2390
- .tsystem-pr_16px {
2391
- padding-right: 16px;
2392
- }
2393
-
2394
2501
  .tsystem-h_100\% {
2395
2502
  height: 100%;
2396
2503
  }
@@ -2467,18 +2574,10 @@
2467
2574
  height: 100dvh;
2468
2575
  }
2469
2576
 
2470
- .tsystem-right_0 {
2471
- right: 0;
2472
- }
2473
-
2474
2577
  .tsystem-top_0 {
2475
2578
  top: 0;
2476
2579
  }
2477
2580
 
2478
- .tsystem-left_0 {
2479
- left: 0;
2480
- }
2481
-
2482
2581
  .tsystem-bottom_0 {
2483
2582
  bottom: 0;
2484
2583
  }
@@ -2491,6 +2590,22 @@
2491
2590
  min-width: 100%;
2492
2591
  }
2493
2592
 
2593
+ .tsystem-right_0 {
2594
+ right: 0;
2595
+ }
2596
+
2597
+ .tsystem-left_0 {
2598
+ left: 0;
2599
+ }
2600
+
2601
+ .tsystem-w_80\% {
2602
+ width: 80%;
2603
+ }
2604
+
2605
+ .tsystem-min-w_auto {
2606
+ min-width: auto;
2607
+ }
2608
+
2494
2609
  .tsystem-w_1 {
2495
2610
  width: 1px;
2496
2611
  }
@@ -2623,8 +2738,40 @@
2623
2738
  height: 40px;
2624
2739
  }
2625
2740
 
2626
- .tsystem-h_80px {
2627
- height: 80px;
2741
+ .tsystem-mt_8px {
2742
+ margin-top: 8px;
2743
+ }
2744
+
2745
+ .tsystem-mb_16px {
2746
+ margin-bottom: 16px;
2747
+ }
2748
+
2749
+ .tsystem-w_auto {
2750
+ width: auto;
2751
+ }
2752
+
2753
+ .tsystem-pt_16px {
2754
+ padding-top: 16px;
2755
+ }
2756
+
2757
+ .tsystem-pb_16px {
2758
+ padding-bottom: 16px;
2759
+ }
2760
+
2761
+ .tsystem-min-h_42px {
2762
+ min-height: 42px;
2763
+ }
2764
+
2765
+ .tsystem-bd-l-w_xl {
2766
+ border-left-width: var(--Tight-borderWidths-xl);
2767
+ }
2768
+
2769
+ .tsystem-bd-l-c_border\.intent\.action\.active {
2770
+ border-left-color: var(--Tight-colors-border-intent-action-active);
2771
+ }
2772
+
2773
+ .tsystem-bd-l-c_transparent {
2774
+ border-left-color: var(--Tight-colors-transparent);
2628
2775
  }
2629
2776
 
2630
2777
  .tsystem-w_14px {
@@ -2755,6 +2902,17 @@
2755
2902
  min-height: 65px;
2756
2903
  }
2757
2904
 
2905
+ .tsystem-w_92\% {
2906
+ width: 92%;
2907
+ }
2908
+
2909
+ .tsystem-lc_2 {
2910
+ overflow: hidden;
2911
+ display: -webkit-box;
2912
+ -webkit-line-clamp: 2;
2913
+ -webkit-box-orient: vertical;
2914
+ }
2915
+
2758
2916
  .tsystem-h_250px {
2759
2917
  height: 250px;
2760
2918
  }
@@ -2811,14 +2969,6 @@
2811
2969
  border-bottom-color: var(--Tight-colors-border-layout-weak);
2812
2970
  }
2813
2971
 
2814
- .tsystem-pt_16px {
2815
- padding-top: 16px;
2816
- }
2817
-
2818
- .tsystem-pb_16px {
2819
- padding-bottom: 16px;
2820
- }
2821
-
2822
2972
  .tsystem-max-h_8 {
2823
2973
  max-height: 8px;
2824
2974
  }
@@ -2871,8 +3021,24 @@
2871
3021
  max-width: 250px;
2872
3022
  }
2873
3023
 
2874
- .tsystem-w_361 {
2875
- width: 361px;
3024
+ .tsystem-w_256px {
3025
+ width: 256px;
3026
+ }
3027
+
3028
+ .tsystem-max-w_256px {
3029
+ max-width: 256px;
3030
+ }
3031
+
3032
+ .tsystem-pt_15\% {
3033
+ padding-top: 15%;
3034
+ }
3035
+
3036
+ .tsystem-h_100vh {
3037
+ height: 100vh;
3038
+ }
3039
+
3040
+ .tsystem-min-h_140px {
3041
+ min-height: 140px;
2876
3042
  }
2877
3043
 
2878
3044
  .tsystem-w_89 {
@@ -2999,6 +3165,10 @@
2999
3165
  margin-bottom: 42px;
3000
3166
  }
3001
3167
 
3168
+ .tsystem-min-h_80px {
3169
+ min-height: 80px;
3170
+ }
3171
+
3002
3172
  .tsystem-pl_20px {
3003
3173
  padding-left: 20px;
3004
3174
  }
@@ -3175,10 +3345,6 @@
3175
3345
  height: 16px;
3176
3346
  }
3177
3347
 
3178
- .tsystem-w_92\% {
3179
- width: 92%;
3180
- }
3181
-
3182
3348
  .tsystem-w_90\% {
3183
3349
  width: 90%;
3184
3350
  }
@@ -3255,10 +3421,6 @@
3255
3421
  min-height: 24px;
3256
3422
  }
3257
3423
 
3258
- .tsystem-mb_16px {
3259
- margin-bottom: 16px;
3260
- }
3261
-
3262
3424
  .tsystem-w_160px {
3263
3425
  width: 160px;
3264
3426
  }
@@ -3339,10 +3501,6 @@
3339
3501
  max-height: 80dvh;
3340
3502
  }
3341
3503
 
3342
- .tsystem-max-w_120px {
3343
- max-width: 120px;
3344
- }
3345
-
3346
3504
  .tsystem-min-w_180px {
3347
3505
  min-width: 180px;
3348
3506
  }
@@ -3351,6 +3509,14 @@
3351
3509
  height: 1px;
3352
3510
  }
3353
3511
 
3512
+ .tsystem-w_14 {
3513
+ width: 14px;
3514
+ }
3515
+
3516
+ .tsystem-h_14 {
3517
+ height: 14px;
3518
+ }
3519
+
3354
3520
  .tsystem-min-w_175px {
3355
3521
  min-width: 175px;
3356
3522
  }
@@ -3395,6 +3561,10 @@
3395
3561
  overflow: scroll;
3396
3562
  }
3397
3563
 
3564
+ .disabled\:tsystem-bd-c_border\.layout:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
3565
+ border-color: var(--Tight-colors-border-layout);
3566
+ }
3567
+
3398
3568
  .\[\&\[data-haserror\=\'true\'\]\]\:tsystem-bd-c_border\.intent\.danger[data-haserror='true'] {
3399
3569
  border-color: var(--Tight-colors-border-intent-danger);
3400
3570
  }
@@ -3529,6 +3699,10 @@
3529
3699
  background-color: var(--Tight-colors-currentColor);
3530
3700
  }
3531
3701
 
3702
+ .disabled\:tsystem-bg-c_surface\.foreground\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
3703
+ background-color: var(--Tight-colors-surface-foreground-disabled);
3704
+ }
3705
+
3532
3706
  .\[\&\:\:placeholder\]\:tsystem-c_typography\.base\.weak::placeholder {
3533
3707
  color: var(--Tight-colors-typography-base-weak);
3534
3708
  }
@@ -3549,6 +3723,16 @@
3549
3723
  pointer-events: none;
3550
3724
  }
3551
3725
 
3726
+ .\[\&\[data-state\=\'closed\'\]\]\:tsystem-trs-dur_toast\.exit[data-state='closed'] {
3727
+ --transition-duration: var(--Tight-durations-toast-exit);
3728
+ transition-duration: var(--Tight-durations-toast-exit);
3729
+ }
3730
+
3731
+ .\[\&\[data-state\=\'closed\'\]\]\:tsystem-trs-tmf_toast\.exit[data-state='closed'] {
3732
+ --transition-easing: var(--Tight-easings-toast-exit);
3733
+ transition-timing-function: var(--Tight-easings-toast-exit);
3734
+ }
3735
+
3552
3736
  [data-scrolled-x=true] .scrolledX\:tsystem-filter_drop-shadow\(4px_2px_4px_rgba\(0\,_0\,_0\,_0\.05\)\) {
3553
3737
  filter: drop-shadow(4px 2px 4px rgba(0, 0, 0, 0.05));
3554
3738
  }
@@ -3589,8 +3773,16 @@
3589
3773
  cursor: default;
3590
3774
  }
3591
3775
 
3592
- .\[\&\[data-state\=\'open\'\]\]\:tsystem-bg-c_surface\.intent\.action\.discreet\.active[data-state='open'] {
3593
- background-color: var(--Tight-colors-surface-intent-action-discreet-active);
3776
+ .disabled\:tsystem-c_typography\.base\.weak:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
3777
+ color: var(--Tight-colors-typography-base-weak);
3778
+ }
3779
+
3780
+ .disabled\:tsystem-pointer-events_none:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
3781
+ pointer-events: none;
3782
+ }
3783
+
3784
+ .\[\&\:disabled\]\:tsystem-op_0\.3:disabled {
3785
+ opacity: 0.3;
3594
3786
  }
3595
3787
 
3596
3788
  .disabled\:tsystem-cursor_default:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
@@ -3633,14 +3825,6 @@
3633
3825
  background-color: var(--Tight-colors-surface-foreground);
3634
3826
  }
3635
3827
 
3636
- .\[\&_path\]\:tsystem-stk_surface\.foreground path {
3637
- stroke: var(--Tight-colors-surface-foreground);
3638
- }
3639
-
3640
- .\[\&_\.Tight-amount-input\,_\&_\.Tight-text\]\:tsystem-c_inherit .Tight-amount-input,.\[\&_\.Tight-amount-input\,_\&_\.Tight-text\]\:tsystem-c_inherit .Tight-text {
3641
- color: inherit;
3642
- }
3643
-
3644
3828
  .\[\&\:\:before\]\:tsystem-top_-11px::before {
3645
3829
  top: -11px;
3646
3830
  }
@@ -3761,39 +3945,11 @@
3761
3945
  left: -5px;
3762
3946
  }
3763
3947
 
3764
- .\[\&\:focus-within\,_\&\[data-isdefaultvalue\=\'false\'\]\]\:tsystem-bd_\{borderWidths\.lg\}_solid:focus-within,.\[\&\:focus-within\,_\&\[data-isdefaultvalue\=\'false\'\]\]\:tsystem-bd_\{borderWidths\.lg\}_solid[data-isdefaultvalue='false'] {
3765
- border: var(--Tight-borderWidths-lg) solid;
3766
- }
3767
-
3768
- .\[\&\:focus-within\,_\&\[data-isdefaultvalue\=\'false\'\]\]\:tsystem-bd-c_border\.layout:focus-within,.\[\&\:focus-within\,_\&\[data-isdefaultvalue\=\'false\'\]\]\:tsystem-bd-c_border\.layout[data-isdefaultvalue='false'] {
3769
- border-color: var(--Tight-colors-border-layout);
3770
- }
3771
-
3772
3948
  .\[\&\:focus\,_\&\:focus-within\]\:tsystem-ring_none:focus,.\[\&\:focus\,_\&\:focus-within\]\:tsystem-ring_none:focus-within {
3773
3949
  outline: 2px solid transparent;
3774
3950
  outline-offset: 2px;
3775
3951
  }
3776
3952
 
3777
- .\[\&\[data-clicked\=\'true\'\]\:focus-within\]\:tsystem-ring_1px_solid[data-clicked='true']:focus-within {
3778
- outline: 1px solid;
3779
- }
3780
-
3781
- .\[\&\:focus-within\,_\&\[data-isdefaultvalue\=\'false\'\]\]\:tsystem-bg-c_surface\.foreground:focus-within,.\[\&\:focus-within\,_\&\[data-isdefaultvalue\=\'false\'\]\]\:tsystem-bg-c_surface\.foreground[data-isdefaultvalue='false'] {
3782
- background-color: var(--Tight-colors-surface-foreground);
3783
- }
3784
-
3785
- .\[\&\:focus-within\]\:tsystem-cursor_text:focus-within {
3786
- cursor: text;
3787
- }
3788
-
3789
- .\[\&\[data-clicked\=\'true\'\]\:focus-within\]\:tsystem-ring-o_2px[data-clicked='true']:focus-within {
3790
- outline-offset: 2px;
3791
- }
3792
-
3793
- .\[\&\[data-clicked\=\'true\'\]\:focus-within\]\:tsystem-ring-c_border\.layout\.strong[data-clicked='true']:focus-within {
3794
- outline-color: var(--Tight-colors-border-layout-strong);
3795
- }
3796
-
3797
3953
  .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.secondary\.hover:focus-visible,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.secondary\.hover[data-state='open'] {
3798
3954
  background: var(--Tight-colors-surface-intent-secondary-hover);
3799
3955
  }
@@ -3868,10 +4024,6 @@
3868
4024
  outline: 2px solid;
3869
4025
  }
3870
4026
 
3871
- .\[\&\[data-active\=\'false\'\]\:has\(\:focus-visible\)\]\:tsystem-ring_4px_solid[data-active='false']:has(:focus-visible) {
3872
- outline: 4px solid;
3873
- }
3874
-
3875
4027
  .\[\&\:has\(button\:focus-visible\)\]\:tsystem-ring_4px_solid:has(button:focus-visible) {
3876
4028
  outline: 4px solid;
3877
4029
  }
@@ -3880,10 +4032,6 @@
3880
4032
  border-radius: var(--Tight-radii-sm);
3881
4033
  }
3882
4034
 
3883
- .\[\&\[data-clicked\=\'false\'\]\:has\(\:focus-visible\)\]\:tsystem-ring_4px_solid[data-clicked='false']:has(:focus-visible) {
3884
- outline: 4px solid;
3885
- }
3886
-
3887
4035
  .focusVisible\:tsystem-ring-c_border\.layout:is(:focus-visible, [data-focus-visible]) {
3888
4036
  outline-color: var(--Tight-colors-border-layout);
3889
4037
  }
@@ -3920,12 +4068,16 @@
3920
4068
  outline-offset: 2px;
3921
4069
  }
3922
4070
 
3923
- .\[\&\:focus-visible\]\:tsystem-ring-o_-1px:focus-visible {
3924
- outline-offset: -1px;
4071
+ .\[\&\:focus-visible\]\:tsystem-ring-w_xl:focus-visible {
4072
+ outline-width: var(--Tight-borderWidths-xl);
3925
4073
  }
3926
4074
 
3927
- .\[\&\[data-active\=\'false\'\]\:has\(\:focus-visible\)\]\:tsystem-ring-c_border\.layout[data-active='false']:has(:focus-visible) {
3928
- outline-color: var(--Tight-colors-border-layout);
4075
+ .\[\&\:focus-visible\]\:tsystem-outline-style_solid:focus-visible {
4076
+ outline-style: solid;
4077
+ }
4078
+
4079
+ .\[\&\:focus-visible\]\:tsystem-ring-o_-1px:focus-visible {
4080
+ outline-offset: -1px;
3929
4081
  }
3930
4082
 
3931
4083
  .focus\:tsystem-z_2:is(:focus, [data-focus]) {
@@ -3944,14 +4096,6 @@
3944
4096
  outline-color: var(--Tight-colors-border-layout);
3945
4097
  }
3946
4098
 
3947
- .\[\&\[data-clicked\=\'false\'\]\:has\(\:focus-visible\)\]\:tsystem-ring-o_2px[data-clicked='false']:has(:focus-visible) {
3948
- outline-offset: 2px;
3949
- }
3950
-
3951
- .\[\&\[data-clicked\=\'false\'\]\:has\(\:focus-visible\)\]\:tsystem-ring-c_border\.layout[data-clicked='false']:has(:focus-visible) {
3952
- outline-color: var(--Tight-colors-border-layout);
3953
- }
3954
-
3955
4099
  .\[\&\:focus-visible\:\:before\]\:tsystem-top_0:focus-visible::before {
3956
4100
  top: 0;
3957
4101
  }
@@ -4048,6 +4192,34 @@
4048
4192
  fill: var(--Tight-colors-icon-intent-action-active);
4049
4193
  }
4050
4194
 
4195
+ .notDisabled\:\[\&\:focus-within\,_\&\[data-isdefaultvalue\=\'false\'\]\]\:tsystem-bd_\{borderWidths\.lg\}_solid:not(:disabled, [disabled], [data-disabled]):focus-within,.notDisabled\:\[\&\:focus-within\,_\&\[data-isdefaultvalue\=\'false\'\]\]\:tsystem-bd_\{borderWidths\.lg\}_solid:not(:disabled, [disabled], [data-disabled])[data-isdefaultvalue='false'] {
4196
+ border: var(--Tight-borderWidths-lg) solid;
4197
+ }
4198
+
4199
+ .notDisabled\:\[\&\:focus-within\,_\&\[data-isdefaultvalue\=\'false\'\]\]\:tsystem-bd-c_border\.layout:not(:disabled, [disabled], [data-disabled]):focus-within,.notDisabled\:\[\&\:focus-within\,_\&\[data-isdefaultvalue\=\'false\'\]\]\:tsystem-bd-c_border\.layout:not(:disabled, [disabled], [data-disabled])[data-isdefaultvalue='false'] {
4200
+ border-color: var(--Tight-colors-border-layout);
4201
+ }
4202
+
4203
+ .notDisabled\:\[\&\[data-active\=\'false\'\]\:has\(\:focus-visible\)\]\:tsystem-ring_4px_solid:not(:disabled, [disabled], [data-disabled])[data-active='false']:has(:focus-visible) {
4204
+ outline: 4px solid;
4205
+ }
4206
+
4207
+ .notDisabled\:\[\&\:focus-within\,_\&\[data-isdefaultvalue\=\'false\'\]\]\:tsystem-bg-c_surface\.foreground:not(:disabled, [disabled], [data-disabled]):focus-within,.notDisabled\:\[\&\:focus-within\,_\&\[data-isdefaultvalue\=\'false\'\]\]\:tsystem-bg-c_surface\.foreground:not(:disabled, [disabled], [data-disabled])[data-isdefaultvalue='false'] {
4208
+ background-color: var(--Tight-colors-surface-foreground);
4209
+ }
4210
+
4211
+ .notDisabled\:\[\&\:focus-within\]\:tsystem-cursor_text:not(:disabled, [disabled], [data-disabled]):focus-within {
4212
+ cursor: text;
4213
+ }
4214
+
4215
+ .notDisabled\:\[\&\[data-state\=\'open\'\]\]\:tsystem-bg-c_surface\.intent\.action\.discreet\.active:not(:disabled, [disabled], [data-disabled])[data-state='open'] {
4216
+ background-color: var(--Tight-colors-surface-intent-action-discreet-active);
4217
+ }
4218
+
4219
+ .notDisabled\:\[\&\[data-active\=\'false\'\]\:has\(\:focus-visible\)\]\:tsystem-ring-c_border\.layout:not(:disabled, [disabled], [data-disabled])[data-active='false']:has(:focus-visible) {
4220
+ outline-color: var(--Tight-colors-border-layout);
4221
+ }
4222
+
4051
4223
  .\[\&\: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 {
4052
4224
  color: var(--Tight-colors-typography-intent-secondary-hover);
4053
4225
  }
@@ -4179,6 +4351,10 @@
4179
4351
  place-self: flex-end;
4180
4352
  }
4181
4353
 
4354
+ .sm\:tsystem-gap_16px {
4355
+ gap: 16px;
4356
+ }
4357
+
4182
4358
  .sm\:tsystem-bg-c_surface\.intent\.action\.discreet {
4183
4359
  background-color: var(--Tight-colors-surface-intent-action-discreet);
4184
4360
  }
@@ -4187,10 +4363,6 @@
4187
4363
  font-size: var(--Tight-fontSizes-label);
4188
4364
  }
4189
4365
 
4190
- .sm\:tsystem-lh_16px {
4191
- line-height: 16px;
4192
- }
4193
-
4194
4366
  .sm\:tsystem-d_none {
4195
4367
  display: none;
4196
4368
  }
@@ -4271,10 +4443,6 @@
4271
4443
  height: auto;
4272
4444
  }
4273
4445
 
4274
- .sm\:tsystem-left_auto {
4275
- left: auto;
4276
- }
4277
-
4278
4446
  .sm\:tsystem-bottom_auto {
4279
4447
  bottom: auto;
4280
4448
  }
@@ -4287,10 +4455,22 @@
4287
4455
  min-width: fit-content;
4288
4456
  }
4289
4457
 
4458
+ .sm\:tsystem-left_auto {
4459
+ left: auto;
4460
+ }
4461
+
4462
+ .sm\:tsystem-right_auto {
4463
+ right: auto;
4464
+ }
4465
+
4290
4466
  .sm\:tsystem-min-w_512px {
4291
4467
  min-width: 512px;
4292
4468
  }
4293
4469
 
4470
+ .sm\:tsystem-w_316px {
4471
+ width: 316px;
4472
+ }
4473
+
4294
4474
  .sm\:tsystem-max-w_300 {
4295
4475
  max-width: 300px;
4296
4476
  }
@@ -4355,8 +4535,8 @@
4355
4535
  transform: none;
4356
4536
  }
4357
4537
 
4358
- .md\:tsystem-w_416 {
4359
- width: 416px;
4538
+ .md\:tsystem-min-h_110px {
4539
+ min-height: 110px;
4360
4540
  }
4361
4541
 
4362
4542
  .md\:tsystem-min-w_800px {
@@ -4391,6 +4571,10 @@
4391
4571
  }
4392
4572
 
4393
4573
  @media screen and (min-width: 80rem) {
4574
+ .xl\:tsystem-p_50px {
4575
+ padding: 50px;
4576
+ }
4577
+
4394
4578
  .xl\:tsystem-p_15px {
4395
4579
  padding: 15px;
4396
4580
  }
@@ -4483,10 +4667,6 @@
4483
4667
  justify-content: flex-end;
4484
4668
  }
4485
4669
 
4486
- .xl\:tsystem-bg-c_overlay {
4487
- background-color: var(--Tight-colors-overlay);
4488
- }
4489
-
4490
4670
  .xl\:tsystem-d_flex {
4491
4671
  display: flex;
4492
4672
  }
@@ -4507,18 +4687,14 @@
4507
4687
  font-size: 14px;
4508
4688
  }
4509
4689
 
4510
- .xl\:tsystem-lh_16px {
4511
- line-height: 16px;
4690
+ .xl\:tsystem-lh_template {
4691
+ line-height: var(--Tight-lineHeights-template);
4512
4692
  }
4513
4693
 
4514
4694
  .xl\:tsystem-fs_label {
4515
4695
  font-size: var(--Tight-fontSizes-label);
4516
4696
  }
4517
4697
 
4518
- .xl\:tsystem-lh_14px {
4519
- line-height: 14px;
4520
- }
4521
-
4522
4698
  .xl\:tsystem-fs_label\.sub {
4523
4699
  font-size: var(--Tight-fontSizes-label-sub);
4524
4700
  }
@@ -4555,6 +4731,14 @@
4555
4731
  flex-wrap: wrap;
4556
4732
  }
4557
4733
 
4734
+ .xl\:tsystem-pl_0 {
4735
+ padding-left: 0;
4736
+ }
4737
+
4738
+ .xl\:tsystem-pr_0 {
4739
+ padding-right: 0;
4740
+ }
4741
+
4558
4742
  .xl\:tsystem-h_auto {
4559
4743
  height: auto;
4560
4744
  }
@@ -4575,14 +4759,6 @@
4575
4759
  min-width: 200px;
4576
4760
  }
4577
4761
 
4578
- .xl\:tsystem-pl_0 {
4579
- padding-left: 0;
4580
- }
4581
-
4582
- .xl\:tsystem-pr_0 {
4583
- padding-right: 0;
4584
- }
4585
-
4586
4762
  .xl\:tsystem-h_35px {
4587
4763
  height: 35px;
4588
4764
  }
@@ -4603,6 +4779,18 @@
4603
4779
  height: 60px;
4604
4780
  }
4605
4781
 
4782
+ .xl\:tsystem-w_328px {
4783
+ width: 328px;
4784
+ }
4785
+
4786
+ .xl\:tsystem-w_368px {
4787
+ width: 368px;
4788
+ }
4789
+
4790
+ .xl\:tsystem-h_80px {
4791
+ height: 80px;
4792
+ }
4793
+
4606
4794
  .xl\:tsystem-max-h_35px {
4607
4795
  max-height: 35px;
4608
4796
  }
@@ -4674,6 +4862,18 @@
4674
4862
  .supportHover\:notDisabled\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.warning\.hover:not(:disabled, [disabled], [data-disabled]) .Tight-text:hover {
4675
4863
  color: var(--Tight-colors-typography-intent-warning-hover);
4676
4864
  }
4865
+ }
4866
+
4867
+ @media (hover: hover) and (pointer: fine) {
4868
+ .notDisabled\:\[\&\[data-state\=\'closed\'\]\[data-disablehover\=\'false\'\]\]\:supportHover\:tsystem-bg-c_surface\.intent\.action\.discreet\.hover:not(:disabled, [disabled], [data-disabled])[data-state='closed'][data-disablehover='false']:hover {
4869
+ background-color: var(--Tight-colors-surface-intent-action-discreet-hover);
4870
+ }
4871
+ }
4872
+
4873
+ @media (hover: hover) and (pointer: fine) {
4874
+ .notDisabled\:\[\&\:not\(\[data-state\]\)\[data-disablehover\=\'false\'\]\:not\(\:focus-within\)\]\:supportHover\:tsystem-bg-c_surface\.intent\.action\.discreet\.hover:not(:disabled, [disabled], [data-disabled]):not([data-state])[data-disablehover='false']:not(:focus-within):hover {
4875
+ background-color: var(--Tight-colors-surface-intent-action-discreet-hover);
4876
+ }
4677
4877
  }
4678
4878
 
4679
4879
  @media (hover: hover) and (pointer: fine) {
@@ -4701,14 +4901,14 @@
4701
4901
  }
4702
4902
 
4703
4903
  @media (hover: hover) and (pointer: fine) {
4704
- .supportHover\:notDisabled\:tsystem-bd-c_border\.intent\.primary\.hover:not(:disabled, [disabled], [data-disabled]):hover {
4705
- border-color: var(--Tight-colors-border-intent-primary-hover);
4904
+ .supportHover\:notDisabled\:tsystem-bd-c_border\.intent\.action\.hover:not(:disabled, [disabled], [data-disabled]):hover {
4905
+ border-color: var(--Tight-colors-border-intent-action-hover);
4706
4906
  }
4707
4907
  }
4708
4908
 
4709
4909
  @media (hover: hover) and (pointer: fine) {
4710
- .supportHover\:notDisabled\:tsystem-bd-c_border\.intent\.action\.hover:not(:disabled, [disabled], [data-disabled]):hover {
4711
- border-color: var(--Tight-colors-border-intent-action-hover);
4910
+ .supportHover\:notDisabled\:tsystem-bd-c_border\.intent\.primary\.hover:not(:disabled, [disabled], [data-disabled]):hover {
4911
+ border-color: var(--Tight-colors-border-intent-primary-hover);
4712
4912
  }
4713
4913
  }
4714
4914
 
@@ -4896,36 +5096,12 @@
4896
5096
  .supportHover\:enabled\:tsystem-fill_icon\.intent\.action\.hover:enabled:hover {
4897
5097
  fill: var(--Tight-colors-icon-intent-action-hover);
4898
5098
  }
4899
- }
4900
-
4901
- @media (hover: hover) and (pointer: fine) {
4902
- .\[\&\[data-state\=\'closed\'\]\[data-disablehover\=\'false\'\]\]\:supportHover\:tsystem-bg-c_surface\.intent\.action\.discreet\.hover[data-state='closed'][data-disablehover='false']:hover {
4903
- background-color: var(--Tight-colors-surface-intent-action-discreet-hover);
4904
- }
4905
- }
4906
-
4907
- @media (hover: hover) and (pointer: fine) {
4908
- .\[\&_\.Tight-icon_\>_path\]\:supportHover\:tsystem-stk_typography\.intent\.action\.hover .Tight-icon > path:hover {
4909
- stroke: var(--Tight-colors-typography-intent-action-hover);
4910
- }
4911
5099
  }
4912
5100
 
4913
5101
  @media (hover: hover) and (pointer: fine) {
4914
5102
  .\[\&_\.Tight-text\:\:after\]\:supportHover\:tsystem-w_100\% .Tight-text::after:hover {
4915
5103
  width: 100%;
4916
5104
  }
4917
- }
4918
-
4919
- @media (hover: hover) and (pointer: fine) {
4920
- .\[\&\:not\(\[data-state\]\)\[data-disablehover\=\'false\'\]\:not\(\:focus-within\)\]\:supportHover\:tsystem-bg-c_surface\.intent\.action\.discreet\.hover:not([data-state])[data-disablehover='false']:not(:focus-within):hover {
4921
- background-color: var(--Tight-colors-surface-intent-action-discreet-hover);
4922
- }
4923
- }
4924
-
4925
- @media (hover: hover) and (pointer: fine) {
4926
- .\[\&\:not\(\:focus-within\)\]\:supportHover\:tsystem-c_typography\.intent\.action\.hover:not(:focus-within):hover {
4927
- color: var(--Tight-colors-typography-intent-action-hover);
4928
- }
4929
5105
  }
4930
5106
 
4931
5107
  @media (hover: hover) and (pointer: fine) {
@@ -5064,11 +5240,5 @@
5064
5240
  .supportHover\:tsystem-bg-c_surface\.background:hover {
5065
5241
  background-color: var(--Tight-colors-surface-background);
5066
5242
  }
5067
- }
5068
-
5069
- @media (hover: hover) and (pointer: fine) {
5070
- .supportHover\:tsystem-c_typography\.intent\.action\.hover:hover {
5071
- color: var(--Tight-colors-typography-intent-action-hover);
5072
- }
5073
5243
  }
5074
5244
  }