@umami/react-zen 0.14.0 → 0.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -1,594 +1,1752 @@
1
- /* src/components/forms/Form.module.css */
2
- .Form_form {
1
+ /* src/components/Icon.module.css */
2
+ .Icon_icon {
3
+ display: inline-block;
4
+ fill: currentColor;
5
+ }
6
+ .Icon_xs {
7
+ width: 12px;
8
+ height: 12px;
9
+ }
10
+ .Icon_sm {
11
+ width: 16px;
12
+ height: 16px;
13
+ }
14
+ .Icon_md {
15
+ width: 24px;
16
+ height: 24px;
17
+ }
18
+ .Icon_lg {
19
+ width: 32px;
20
+ height: 32px;
21
+ }
22
+ .Icon_xl {
23
+ width: 48px;
24
+ height: 48px;
25
+ }
26
+
27
+ /* src/components/AlertBanner.module.css */
28
+ .AlertBanner_banner {
3
29
  display: flex;
4
- flex-direction: column;
5
- gap: var(--gap-md);
30
+ align-items: center;
31
+ padding: var(--padding);
32
+ border: var(--border);
33
+ border-radius: var(--border-radius);
34
+ background: var(--background-color);
6
35
  width: 100%;
36
+ overflow: hidden;
37
+ font-size: var(--font-size);
38
+ color: var(--font-color);
39
+ gap: var(--spacing-3);
7
40
  }
8
- .Form_text {
9
- text-align: center;
10
- margin: auto;
41
+ .AlertBanner_message {
42
+ display: flex;
43
+ flex-direction: column;
44
+ flex: 1;
11
45
  }
12
- .Form_icon {
13
- align-self: flex-start;
46
+ .AlertBanner_title {
47
+ font-weight: 700;
14
48
  }
15
- .Form_error {
16
- margin: 0 auto var(--size-600) auto;
17
- overflow: auto;
49
+ .AlertBanner_close {
50
+ color: var(--font-muted-color);
51
+ }
52
+ .AlertBanner_close:hover {
53
+ color: var(--font-color);
54
+ cursor: pointer;
55
+ }
56
+ .AlertBanner_error {
57
+ color: var(--light-color);
58
+ background-color: var(--danger-color);
59
+ border: 0;
60
+ }
61
+ .AlertBanner_error .AlertBanner_close {
62
+ color: var(--light-color);
63
+ }
64
+ .AlertBanner_info {
65
+ color: var(--primary-font-color);
66
+ background-color: var(--primary-color);
67
+ border: 0;
68
+ }
69
+ .AlertBanner_info .AlertBanner_close {
70
+ color: var(--primary-font-color);
18
71
  }
19
72
 
20
- /* src/components/Box.module.css */
21
- .Box_font-size-xs {
22
- font-size: var(--font-size-xs);
73
+ /* src/components/styles/global.module.css */
74
+ .global_display {
75
+ display: block;
23
76
  }
24
- .Box_font-size-sm {
25
- font-size: var(--font-size-sm);
77
+ .global_display-none {
78
+ display: none;
26
79
  }
27
- .Box_font-size-md {
28
- font-size: var(--font-size-md);
80
+ .global_display-inline {
81
+ display: inline;
29
82
  }
30
- .Box_font-size-lg {
31
- font-size: var(--font-size-lg);
83
+ .global_display-inline-block {
84
+ display: inline-block;
85
+ }
86
+ .global_display-block {
87
+ display: block;
88
+ }
89
+ .global_display-flex {
90
+ display: flex;
91
+ }
92
+ .global_display-inline-flex {
93
+ display: inline-flex;
94
+ }
95
+ .global_font-size {
96
+ font-size: var(--font-size);
32
97
  }
33
- .Box_font-size-xl {
34
- font-size: var(--font-size-xl);
98
+ .global_font-size-1 {
99
+ font-size: var(--font-size-1);
35
100
  }
36
- .Box_border-sm {
37
- border: var(--border-sm) solid var(--border-color);
101
+ .global_font-size-2 {
102
+ font-size: var(--font-size-2);
38
103
  }
39
- .Box_border-md {
40
- border: var(--border-md) solid var(--border-color);
104
+ .global_font-size-3 {
105
+ font-size: var(--font-size-3);
41
106
  }
42
- .Box_border-lg {
43
- border: var(--border-lg) solid var(--border-color);
107
+ .global_font-size-4 {
108
+ font-size: var(--font-size-4);
44
109
  }
45
- .Box_border-radius-sm {
46
- border-radius: var(--border-radius-sm);
110
+ .global_font-size-5 {
111
+ font-size: var(--font-size-5);
47
112
  }
48
- .Box_border-radius-md {
49
- border-radius: var(--border-radius-md);
113
+ .global_font-size-6 {
114
+ font-size: var(--font-size-6);
50
115
  }
51
- .Box_border-radius-lg {
52
- border-radius: var(--border-radius-lg);
116
+ .global_font-size-7 {
117
+ font-size: var(--font-size-7);
53
118
  }
54
- .Box_border-radius-full {
55
- border-radius: 100%;
119
+ .global_font-size-8 {
120
+ font-size: var(--font-size-8);
121
+ }
122
+ .global_font-size-9 {
123
+ font-size: var(--font-size-9);
124
+ }
125
+ .global_font-weight-light {
126
+ font-weight: var(--font-weight-light);
127
+ }
128
+ .global_font-weight-regular {
129
+ font-weight: var(--font-weight-regular);
130
+ }
131
+ .global_font-weight-medium {
132
+ font-weight: var(--font-weight-medium);
133
+ }
134
+ .global_font-weight-bold {
135
+ font-weight: var(--font-weight-bold);
136
+ }
137
+ .global_border-size-1 {
138
+ border: var(--border-size-1) solid var(--border-color);
139
+ }
140
+ .global_border-size-2 {
141
+ border: var(--border-size-2) solid var(--border-color);
142
+ }
143
+ .global_border-size-3 {
144
+ border: var(--border-size-3) solid var(--border-color);
56
145
  }
57
- .Box_shadow-1 {
146
+ .global_border-size-4 {
147
+ border: var(--border-size-4) solid var(--border-color);
148
+ }
149
+ .global_border-radius-1 {
150
+ border-radius: var(--border-radius-1);
151
+ }
152
+ .global_border-radius-2 {
153
+ border-radius: var(--border-radius-2);
154
+ }
155
+ .global_border-radius-3 {
156
+ border-radius: var(--border-radius-3);
157
+ }
158
+ .global_border-radius-4 {
159
+ border-radius: var(--border-radius-4);
160
+ }
161
+ .global_border-radius-5 {
162
+ border-radius: var(--border-radius-5);
163
+ }
164
+ .global_border-radius-6 {
165
+ border-radius: var(--border-radius-6);
166
+ }
167
+ .global_border-radius-full {
168
+ border-radius: var(--border-radius-full);
169
+ }
170
+ .global_shadow-1 {
58
171
  box-shadow: var(--box-shadow-1);
59
172
  }
60
- .Box_shadow-2 {
173
+ .global_shadow-2 {
61
174
  box-shadow: var(--box-shadow-2);
62
175
  }
63
- .Box_shadow-3 {
176
+ .global_shadow-3 {
64
177
  box-shadow: var(--box-shadow-3);
65
178
  }
66
- .Box_shadow-4 {
179
+ .global_shadow-4 {
67
180
  box-shadow: var(--box-shadow-4);
68
181
  }
69
- .Box_shadow-5 {
182
+ .global_shadow-5 {
70
183
  box-shadow: var(--box-shadow-5);
71
184
  }
72
- .Box_shadow-6 {
185
+ .global_shadow-6 {
73
186
  box-shadow: var(--box-shadow-6);
74
187
  }
75
- .Box_background-color-50 {
188
+ .global_background-color-50 {
76
189
  background-color: var(--base-color-50);
77
190
  }
78
- .Box_background-color-100 {
191
+ .global_background-color-100 {
79
192
  background-color: var(--base-color-100);
80
193
  }
81
- .Box_background-color-200 {
194
+ .global_background-color-200 {
82
195
  background-color: var(--base-color-200);
83
196
  }
84
- .Box_background-color-300 {
197
+ .global_background-color-300 {
85
198
  background-color: var(--base-color-300);
86
199
  }
87
- .Box_background-color-400 {
200
+ .global_background-color-400 {
88
201
  background-color: var(--base-color-400);
89
202
  }
90
- .Box_background-color-500 {
203
+ .global_background-color-500 {
91
204
  background-color: var(--base-color-500);
92
205
  }
93
- .Box_background-color-600 {
206
+ .global_background-color-600 {
94
207
  background-color: var(--base-color-600);
95
208
  }
96
- .Box_background-color-700 {
209
+ .global_background-color-700 {
97
210
  background-color: var(--base-color-700);
98
211
  }
99
- .Box_background-color-800 {
212
+ .global_background-color-800 {
100
213
  background-color: var(--base-color-800);
101
214
  }
102
- .Box_background-color-900 {
215
+ .global_background-color-900 {
103
216
  background-color: var(--base-color-900);
104
217
  }
105
- .Box_background-color-950 {
218
+ .global_background-color-950 {
106
219
  background-color: var(--base-color-950);
107
220
  }
108
- .Box_padding-1,
109
- .Box_margin-1 {
221
+ .global_align-left {
222
+ text-align: left;
223
+ }
224
+ .global_align-center {
225
+ text-align: center;
226
+ }
227
+ .global_align-right {
228
+ text-align: right;
229
+ }
230
+ .global_letter-spacing-tighter {
231
+ letter-spacing: -0.05em;
232
+ }
233
+ .global_letter-spacing-tight {
234
+ letter-spacing: -0.025em;
235
+ }
236
+ .global_letter-spacing-wide {
237
+ letter-spacing: 0.025em;
238
+ }
239
+ .global_letter-spacing-wider {
240
+ letter-spacing: 0.05em;
241
+ }
242
+ .global_padding-1 {
110
243
  padding: var(--spacing-1);
111
244
  }
112
- .Box_padding-2,
113
- .Box_margin-2 {
245
+ .global_padding-2 {
114
246
  padding: var(--spacing-2);
115
247
  }
116
- .Box_padding-3,
117
- .Box_margin-3 {
248
+ .global_padding-3 {
118
249
  padding: var(--spacing-3);
119
250
  }
120
- .Box_padding-4,
121
- .Box_margin-4 {
251
+ .global_padding-4 {
122
252
  padding: var(--spacing-4);
123
253
  }
124
- .Box_padding-5,
125
- .Box_margin-5 {
254
+ .global_padding-5 {
126
255
  padding: var(--spacing-5);
127
256
  }
128
- .Box_padding-6,
129
- .Box_margin-6 {
257
+ .global_padding-6 {
130
258
  padding: var(--spacing-6);
131
259
  }
132
- .Box_padding-7,
133
- .Box_margin-7 {
260
+ .global_padding-7 {
134
261
  padding: var(--spacing-7);
135
262
  }
136
- .Box_padding-8,
137
- .Box_margin-8 {
263
+ .global_padding-8 {
138
264
  padding: var(--spacing-8);
139
265
  }
140
- .Box_padding-9,
141
- .Box_margin-9 {
266
+ .global_padding-9 {
142
267
  padding: var(--spacing-9);
143
268
  }
144
- .Box_padding-10,
145
- .Box_margin-10 {
269
+ .global_padding-10 {
146
270
  padding: var(--spacing-10);
147
271
  }
148
- .Box_padding-11,
149
- .Box_margin-11 {
272
+ .global_padding-11 {
150
273
  padding: var(--spacing-11);
151
274
  }
152
- .Box_padding-12,
153
- .Box_margin-12 {
275
+ .global_padding-12 {
154
276
  padding: var(--spacing-12);
155
277
  }
156
- .Box_padding-x-1,
157
- .Box_margin-x-1 {
158
- padding: 0 var(--spacing-1);
278
+ .global_padding-x-1 {
279
+ padding-left: var(--spacing-1);
280
+ padding-right: var(--spacing-1);
159
281
  }
160
- .Box_padding-x-2,
161
- .Box_margin-x-2 {
162
- padding: 0 var(--spacing-2);
282
+ .global_padding-x-2 {
283
+ padding-left: var(--spacing-2);
284
+ padding-right: var(--spacing-2);
163
285
  }
164
- .Box_padding-x-3,
165
- .Box_margin-x-3 {
166
- padding: 0 var(--spacing-3);
286
+ .global_padding-x-3 {
287
+ padding-left: var(--spacing-3);
288
+ padding-right: var(--spacing-3);
167
289
  }
168
- .Box_padding-x-4,
169
- .Box_margin-x-4 {
170
- padding: 0 var(--spacing-4);
290
+ .global_padding-x-4 {
291
+ padding-left: var(--spacing-4);
292
+ padding-right: var(--spacing-4);
171
293
  }
172
- .Box_padding-x-5,
173
- .Box_margin-x-5 {
174
- padding: 0 var(--spacing-5);
294
+ .global_padding-x-5 {
295
+ padding-left: var(--spacing-5);
296
+ padding-right: var(--spacing-5);
175
297
  }
176
- .Box_padding-x-6,
177
- .Box_margin-x-6 {
178
- padding: 0 var(--spacing-6);
298
+ .global_padding-x-6 {
299
+ padding-left: var(--spacing-6);
300
+ padding-right: var(--spacing-6);
179
301
  }
180
- .Box_padding-x-7,
181
- .Box_margin-x-7 {
182
- padding: 0 var(--spacing-7);
302
+ .global_padding-x-7 {
303
+ padding-left: var(--spacing-7);
304
+ padding-right: var(--spacing-7);
183
305
  }
184
- .Box_padding-x-8,
185
- .Box_margin-x-8 {
186
- padding: 0 var(--spacing-8);
306
+ .global_padding-x-8 {
307
+ padding-left: var(--spacing-8);
308
+ padding-right: var(--spacing-8);
187
309
  }
188
- .Box_padding-x-9,
189
- .Box_margin-x-9 {
190
- padding: 0 var(--spacing-9);
310
+ .global_padding-x-9 {
311
+ padding-left: var(--spacing-9);
312
+ padding-right: var(--spacing-9);
191
313
  }
192
- .Box_padding-x-10,
193
- .Box_margin-x-10 {
194
- padding: 0 var(--spacing-10);
314
+ .global_padding-x-10 {
315
+ padding-left: var(--spacing-10);
316
+ padding-right: var(--spacing-10);
195
317
  }
196
- .Box_padding-x-11,
197
- .Box_margin-x-11 {
198
- padding: 0 var(--spacing-11);
318
+ .global_padding-x-11 {
319
+ padding-left: var(--spacing-11);
320
+ padding-right: var(--spacing-11);
199
321
  }
200
- .Box_padding-x-12,
201
- .Box_margin-x-12 {
202
- padding: 0 var(--spacing-12);
322
+ .global_padding-x-12 {
323
+ padding-left: var(--spacing-12);
324
+ padding-right: var(--spacing-12);
203
325
  }
204
- .Box_padding-y-1,
205
- .Box_margin-y-1 {
206
- padding: var(--spacing-1) 0;
326
+ .global_padding-y-1 {
327
+ padding-top: var(--spacing-1);
328
+ padding-bottom: var(--spacing-1);
207
329
  }
208
- .Box_padding-y-2,
209
- .Box_margin-y-2 {
210
- padding: var(--spacing-2) 0;
330
+ .global_padding-y-2 {
331
+ padding-top: var(--spacing-2);
332
+ padding-bottom: var(--spacing-2);
211
333
  }
212
- .Box_padding-y-3,
213
- .Box_margin-y-3 {
214
- padding: var(--spacing-3) 0;
334
+ .global_padding-y-3 {
335
+ padding-top: var(--spacing-3);
336
+ padding-bottom: var(--spacing-3);
215
337
  }
216
- .Box_padding-y-4,
217
- .Box_margin-y-4 {
218
- padding: var(--spacing-4) 0;
338
+ .global_padding-y-4 {
339
+ padding-top: var(--spacing-4);
340
+ padding-bottom: var(--spacing-4);
219
341
  }
220
- .Box_padding-y-5,
221
- .Box_margin-y-5 {
222
- padding: var(--spacing-5) 0;
342
+ .global_padding-y-5 {
343
+ padding-top: var(--spacing-5);
344
+ padding-bottom: var(--spacing-5);
223
345
  }
224
- .Box_padding-y-6,
225
- .Box_margin-y-6 {
226
- padding: var(--spacing-6) 0;
346
+ .global_padding-y-6 {
347
+ padding-top: var(--spacing-6);
348
+ padding-bottom: var(--spacing-6);
227
349
  }
228
- .Box_padding-y-7,
229
- .Box_margin-y-7 {
230
- padding: var(--spacing-7) 0;
350
+ .global_padding-y-7 {
351
+ padding-top: var(--spacing-7);
352
+ padding-bottom: var(--spacing-7);
231
353
  }
232
- .Box_padding-y-8,
233
- .Box_margin-y-8 {
234
- padding: var(--spacing-8) 0;
354
+ .global_padding-y-8 {
355
+ padding-top: var(--spacing-8);
356
+ padding-bottom: var(--spacing-8);
235
357
  }
236
- .Box_padding-y-9,
237
- .Box_margin-y-9 {
238
- padding: var(--spacing-9) 0;
358
+ .global_padding-y-9 {
359
+ padding-top: var(--spacing-9);
360
+ padding-bottom: var(--spacing-9);
239
361
  }
240
- .Box_padding-y-10,
241
- .Box_margin-y-10 {
242
- padding: var(--spacing-10) 0;
362
+ .global_padding-y-10 {
363
+ padding-top: var(--spacing-10);
364
+ padding-bottom: var(--spacing-10);
243
365
  }
244
- .Box_padding-y-11,
245
- .Box_margin-y-11 {
246
- padding: var(--spacing-11) 0;
366
+ .global_padding-y-11 {
367
+ padding-top: var(--spacing-11);
368
+ padding-bottom: var(--spacing-11);
247
369
  }
248
- .Box_padding-y-12,
249
- .Box_margin-y-12 {
250
- padding: var(--spacing-12) 0;
370
+ .global_padding-y-12 {
371
+ padding-top: var(--spacing-12);
372
+ padding-bottom: var(--spacing-12);
251
373
  }
252
-
253
- /* src/components/Flexbox.module.css */
254
- .Flexbox_flexbox {
255
- display: flex;
374
+ .global_padding-top-1 {
375
+ padding-top: var(--spacing-1);
376
+ }
377
+ .global_padding-top-2 {
378
+ padding-top: var(--spacing-2);
379
+ }
380
+ .global_padding-top-3 {
381
+ padding-top: var(--spacing-3);
382
+ }
383
+ .global_padding-top-4 {
384
+ padding-top: var(--spacing-4);
385
+ }
386
+ .global_padding-top-5 {
387
+ padding-top: var(--spacing-5);
388
+ }
389
+ .global_padding-top-6 {
390
+ padding-top: var(--spacing-6);
391
+ }
392
+ .global_padding-top-7 {
393
+ padding-top: var(--spacing-7);
394
+ }
395
+ .global_padding-top-8 {
396
+ padding-top: var(--spacing-8);
397
+ }
398
+ .global_padding-top-9 {
399
+ padding-top: var(--spacing-9);
400
+ }
401
+ .global_padding-top-10 {
402
+ padding-top: var(--spacing-10);
403
+ }
404
+ .global_padding-top-11 {
405
+ padding-top: var(--spacing-11);
406
+ }
407
+ .global_padding-top-12 {
408
+ padding-top: var(--spacing-12);
409
+ }
410
+ .global_padding-bottom-1 {
411
+ padding-bottom: var(--spacing-1);
412
+ }
413
+ .global_padding-bottom-2 {
414
+ padding-bottom: var(--spacing-2);
415
+ }
416
+ .global_padding-bottom-3 {
417
+ padding-bottom: var(--spacing-3);
418
+ }
419
+ .global_padding-bottom-4 {
420
+ padding-bottom: var(--spacing-4);
421
+ }
422
+ .global_padding-bottom-5 {
423
+ padding-bottom: var(--spacing-5);
424
+ }
425
+ .global_padding-bottom-6 {
426
+ padding-bottom: var(--spacing-6);
427
+ }
428
+ .global_padding-bottom-7 {
429
+ padding-bottom: var(--spacing-7);
430
+ }
431
+ .global_padding-bottom-8 {
432
+ padding-bottom: var(--spacing-8);
433
+ }
434
+ .global_padding-bottom-9 {
435
+ padding-bottom: var(--spacing-9);
436
+ }
437
+ .global_padding-bottom-10 {
438
+ padding-bottom: var(--spacing-10);
439
+ }
440
+ .global_padding-bottom-11 {
441
+ padding-bottom: var(--spacing-11);
442
+ }
443
+ .global_padding-bottom-12 {
444
+ padding-bottom: var(--spacing-12);
445
+ }
446
+ .global_padding-left-1 {
447
+ padding-left: var(--spacing-1);
448
+ }
449
+ .global_padding-left-2 {
450
+ padding-left: var(--spacing-2);
451
+ }
452
+ .global_padding-left-3 {
453
+ padding-left: var(--spacing-3);
454
+ }
455
+ .global_padding-left-4 {
456
+ padding-left: var(--spacing-4);
457
+ }
458
+ .global_padding-left-5 {
459
+ padding-left: var(--spacing-5);
460
+ }
461
+ .global_padding-left-6 {
462
+ padding-left: var(--spacing-6);
463
+ }
464
+ .global_padding-left-7 {
465
+ padding-left: var(--spacing-7);
466
+ }
467
+ .global_padding-left-8 {
468
+ padding-left: var(--spacing-8);
469
+ }
470
+ .global_padding-left-9 {
471
+ padding-left: var(--spacing-9);
472
+ }
473
+ .global_padding-left-10 {
474
+ padding-left: var(--spacing-10);
475
+ }
476
+ .global_padding-left-11 {
477
+ padding-left: var(--spacing-11);
478
+ }
479
+ .global_padding-left-12 {
480
+ padding-left: var(--spacing-12);
481
+ }
482
+ .global_padding-right-1 {
483
+ padding-right: var(--spacing-1);
484
+ }
485
+ .global_padding-right-2 {
486
+ padding-right: var(--spacing-2);
487
+ }
488
+ .global_padding-right-3 {
489
+ padding-right: var(--spacing-3);
490
+ }
491
+ .global_padding-right-4 {
492
+ padding-right: var(--spacing-4);
493
+ }
494
+ .global_padding-right-5 {
495
+ padding-right: var(--spacing-5);
496
+ }
497
+ .global_padding-right-6 {
498
+ padding-right: var(--spacing-6);
499
+ }
500
+ .global_padding-right-7 {
501
+ padding-right: var(--spacing-7);
502
+ }
503
+ .global_padding-right-8 {
504
+ padding-right: var(--spacing-8);
505
+ }
506
+ .global_padding-right-9 {
507
+ padding-right: var(--spacing-9);
508
+ }
509
+ .global_padding-right-10 {
510
+ padding-right: var(--spacing-10);
511
+ }
512
+ .global_padding-right-11 {
513
+ padding-right: var(--spacing-11);
514
+ }
515
+ .global_padding-right-12 {
516
+ padding-right: var(--spacing-12);
517
+ }
518
+ .global_margin-1 {
519
+ margin: var(--spacing-1);
520
+ }
521
+ .global_margin-2 {
522
+ margin: var(--spacing-2);
523
+ }
524
+ .global_margin-3 {
525
+ margin: var(--spacing-3);
526
+ }
527
+ .global_margin-4 {
528
+ margin: var(--spacing-4);
529
+ }
530
+ .global_margin-5 {
531
+ margin: var(--spacing-5);
532
+ }
533
+ .global_margin-6 {
534
+ margin: var(--spacing-6);
535
+ }
536
+ .global_margin-7 {
537
+ margin: var(--spacing-7);
538
+ }
539
+ .global_margin-8 {
540
+ margin: var(--spacing-8);
541
+ }
542
+ .global_margin-9 {
543
+ margin: var(--spacing-9);
544
+ }
545
+ .global_margin-10 {
546
+ margin: var(--spacing-10);
547
+ }
548
+ .global_margin-11 {
549
+ margin: var(--spacing-11);
550
+ }
551
+ .global_margin-12 {
552
+ margin: var(--spacing-12);
553
+ }
554
+ .global_margin-x-1 {
555
+ margin-left: var(--spacing-1);
556
+ margin-right: var(--spacing-1);
557
+ }
558
+ .global_margin-x-2 {
559
+ margin-left: var(--spacing-2);
560
+ margin-right: var(--spacing-2);
561
+ }
562
+ .global_margin-x-3 {
563
+ margin-left: var(--spacing-3);
564
+ margin-right: var(--spacing-3);
565
+ }
566
+ .global_margin-x-4 {
567
+ margin-left: var(--spacing-4);
568
+ margin-right: var(--spacing-4);
569
+ }
570
+ .global_margin-x-5 {
571
+ margin-left: var(--spacing-5);
572
+ margin-right: var(--spacing-5);
573
+ }
574
+ .global_margin-x-6 {
575
+ margin-left: var(--spacing-6);
576
+ margin-right: var(--spacing-6);
577
+ }
578
+ .global_margin-x-7 {
579
+ margin-left: var(--spacing-7);
580
+ margin-right: var(--spacing-7);
581
+ }
582
+ .global_margin-x-8 {
583
+ margin-left: var(--spacing-8);
584
+ margin-right: var(--spacing-8);
585
+ }
586
+ .global_margin-x-9 {
587
+ margin-left: var(--spacing-9);
588
+ margin-right: var(--spacing-9);
589
+ }
590
+ .global_margin-x-10 {
591
+ margin-left: var(--spacing-10);
592
+ margin-right: var(--spacing-10);
593
+ }
594
+ .global_margin-x-11 {
595
+ margin-left: var(--spacing-11);
596
+ margin-right: var(--spacing-11);
597
+ }
598
+ .global_margin-x-12 {
599
+ margin-left: var(--spacing-12);
600
+ margin-right: var(--spacing-12);
601
+ }
602
+ .global_margin-y-1 {
603
+ margin-top: var(--spacing-1);
604
+ margin-bottom: var(--spacing-1);
605
+ }
606
+ .global_margin-y-2 {
607
+ margin-top: var(--spacing-2);
608
+ margin-bottom: var(--spacing-2);
609
+ }
610
+ .global_margin-y-3 {
611
+ margin-top: var(--spacing-3);
612
+ margin-bottom: var(--spacing-3);
613
+ }
614
+ .global_margin-y-4 {
615
+ margin-top: var(--spacing-4);
616
+ margin-bottom: var(--spacing-4);
617
+ }
618
+ .global_margin-y-5 {
619
+ margin-top: var(--spacing-5);
620
+ margin-bottom: var(--spacing-5);
621
+ }
622
+ .global_margin-y-6 {
623
+ margin-top: var(--spacing-6);
624
+ margin-bottom: var(--spacing-6);
625
+ }
626
+ .global_margin-y-7 {
627
+ margin-top: var(--spacing-7);
628
+ margin-bottom: var(--spacing-7);
629
+ }
630
+ .global_margin-y-8 {
631
+ margin-top: var(--spacing-8);
632
+ margin-bottom: var(--spacing-8);
633
+ }
634
+ .global_margin-y-9 {
635
+ margin-top: var(--spacing-9);
636
+ margin-bottom: var(--spacing-9);
637
+ }
638
+ .global_margin-y-10 {
639
+ margin-top: var(--spacing-10);
640
+ margin-bottom: var(--spacing-10);
641
+ }
642
+ .global_margin-y-11 {
643
+ margin-top: var(--spacing-11);
644
+ margin-bottom: var(--spacing-11);
645
+ }
646
+ .global_margin-y-12 {
647
+ margin-top: var(--spacing-12);
648
+ margin-bottom: var(--spacing-12);
649
+ }
650
+ .global_margin-top-1 {
651
+ margin-top: var(--spacing-1);
652
+ }
653
+ .global_margin-top-2 {
654
+ margin-top: var(--spacing-2);
655
+ }
656
+ .global_margin-top-3 {
657
+ margin-top: var(--spacing-3);
658
+ }
659
+ .global_margin-top-4 {
660
+ margin-top: var(--spacing-4);
661
+ }
662
+ .global_margin-top-5 {
663
+ margin-top: var(--spacing-5);
664
+ }
665
+ .global_margin-top-6 {
666
+ margin-top: var(--spacing-6);
667
+ }
668
+ .global_margin-top-7 {
669
+ margin-top: var(--spacing-7);
670
+ }
671
+ .global_margin-top-8 {
672
+ margin-top: var(--spacing-8);
673
+ }
674
+ .global_margin-top-9 {
675
+ margin-top: var(--spacing-9);
676
+ }
677
+ .global_margin-top-10 {
678
+ margin-top: var(--spacing-10);
679
+ }
680
+ .global_margin-top-11 {
681
+ margin-top: var(--spacing-11);
682
+ }
683
+ .global_margin-top-12 {
684
+ margin-top: var(--spacing-12);
685
+ }
686
+ .global_margin-bottom-1 {
687
+ margin-bottom: var(--spacing-1);
688
+ }
689
+ .global_margin-bottom-2 {
690
+ margin-bottom: var(--spacing-2);
691
+ }
692
+ .global_margin-bottom-3 {
693
+ margin-bottom: var(--spacing-3);
694
+ }
695
+ .global_margin-bottom-4 {
696
+ margin-bottom: var(--spacing-4);
697
+ }
698
+ .global_margin-bottom-5 {
699
+ margin-bottom: var(--spacing-5);
700
+ }
701
+ .global_margin-bottom-6 {
702
+ margin-bottom: var(--spacing-6);
703
+ }
704
+ .global_margin-bottom-7 {
705
+ margin-bottom: var(--spacing-7);
706
+ }
707
+ .global_margin-bottom-8 {
708
+ margin-bottom: var(--spacing-8);
709
+ }
710
+ .global_margin-bottom-9 {
711
+ margin-bottom: var(--spacing-9);
712
+ }
713
+ .global_margin-bottom-10 {
714
+ margin-bottom: var(--spacing-10);
715
+ }
716
+ .global_margin-bottom-11 {
717
+ margin-bottom: var(--spacing-11);
718
+ }
719
+ .global_margin-bottom-12 {
720
+ margin-bottom: var(--spacing-12);
721
+ }
722
+ .global_margin-left-1 {
723
+ margin-left: var(--spacing-1);
724
+ }
725
+ .global_margin-left-2 {
726
+ margin-left: var(--spacing-2);
727
+ }
728
+ .global_margin-left-3 {
729
+ margin-left: var(--spacing-3);
730
+ }
731
+ .global_margin-left-4 {
732
+ margin-left: var(--spacing-4);
733
+ }
734
+ .global_margin-left-5 {
735
+ margin-left: var(--spacing-5);
736
+ }
737
+ .global_margin-left-6 {
738
+ margin-left: var(--spacing-6);
739
+ }
740
+ .global_margin-left-7 {
741
+ margin-left: var(--spacing-7);
742
+ }
743
+ .global_margin-left-8 {
744
+ margin-left: var(--spacing-8);
745
+ }
746
+ .global_margin-left-9 {
747
+ margin-left: var(--spacing-9);
748
+ }
749
+ .global_margin-left-10 {
750
+ margin-left: var(--spacing-10);
751
+ }
752
+ .global_margin-left-11 {
753
+ margin-left: var(--spacing-11);
754
+ }
755
+ .global_margin-left-12 {
756
+ margin-left: var(--spacing-12);
757
+ }
758
+ .global_margin-right-1 {
759
+ margin-right: var(--spacing-1);
760
+ }
761
+ .global_margin-right-2 {
762
+ margin-right: var(--spacing-2);
763
+ }
764
+ .global_margin-right-3 {
765
+ margin-right: var(--spacing-3);
766
+ }
767
+ .global_margin-right-4 {
768
+ margin-right: var(--spacing-4);
769
+ }
770
+ .global_margin-right-5 {
771
+ margin-right: var(--spacing-5);
256
772
  }
257
- .Flexbox_row {
773
+ .global_margin-right-6 {
774
+ margin-right: var(--spacing-6);
775
+ }
776
+ .global_margin-right-7 {
777
+ margin-right: var(--spacing-7);
778
+ }
779
+ .global_margin-right-8 {
780
+ margin-right: var(--spacing-8);
781
+ }
782
+ .global_margin-right-9 {
783
+ margin-right: var(--spacing-9);
784
+ }
785
+ .global_margin-right-10 {
786
+ margin-right: var(--spacing-10);
787
+ }
788
+ .global_margin-right-11 {
789
+ margin-right: var(--spacing-11);
790
+ }
791
+ .global_margin-right-12 {
792
+ margin-right: var(--spacing-12);
793
+ }
794
+ .global_gap-1 {
795
+ gap: var(--spacing-1);
796
+ }
797
+ .global_gap-2 {
798
+ gap: var(--spacing-2);
799
+ }
800
+ .global_gap-3 {
801
+ gap: var(--spacing-3);
802
+ }
803
+ .global_gap-4 {
804
+ gap: var(--spacing-4);
805
+ }
806
+ .global_gap-5 {
807
+ gap: var(--spacing-5);
808
+ }
809
+ .global_gap-6 {
810
+ gap: var(--spacing-6);
811
+ }
812
+ .global_gap-7 {
813
+ gap: var(--spacing-7);
814
+ }
815
+ .global_gap-8 {
816
+ gap: var(--spacing-8);
817
+ }
818
+ .global_gap-9 {
819
+ gap: var(--spacing-9);
820
+ }
821
+ .global_gap-10 {
822
+ gap: var(--spacing-10);
823
+ }
824
+ .global_gap-11 {
825
+ gap: var(--spacing-11);
826
+ }
827
+ .global_gap-12 {
828
+ gap: var(--spacing-12);
829
+ }
830
+ .global_gap-x-1 {
831
+ column-gap: var(--spacing-1);
832
+ }
833
+ .global_gap-x-2 {
834
+ column-gap: var(--spacing-2);
835
+ }
836
+ .global_gap-x-3 {
837
+ column-gap: var(--spacing-3);
838
+ }
839
+ .global_gap-x-4 {
840
+ column-gap: var(--spacing-4);
841
+ }
842
+ .global_gap-x-5 {
843
+ column-gap: var(--spacing-5);
844
+ }
845
+ .global_gap-x-6 {
846
+ column-gap: var(--spacing-6);
847
+ }
848
+ .global_gap-x-7 {
849
+ column-gap: var(--spacing-7);
850
+ }
851
+ .global_gap-x-8 {
852
+ column-gap: var(--spacing-8);
853
+ }
854
+ .global_gap-x-9 {
855
+ column-gap: var(--spacing-9);
856
+ }
857
+ .global_gap-x-10 {
858
+ column-gap: var(--spacing-10);
859
+ }
860
+ .global_gap-x-11 {
861
+ column-gap: var(--spacing-11);
862
+ }
863
+ .global_gap-x-12 {
864
+ column-gap: var(--spacing-12);
865
+ }
866
+ .global_gap-y-1 {
867
+ row-gap: var(--spacing-1);
868
+ }
869
+ .global_gap-y-2 {
870
+ row-gap: var(--spacing-2);
871
+ }
872
+ .global_gap-y-3 {
873
+ row-gap: var(--spacing-3);
874
+ }
875
+ .global_gap-y-4 {
876
+ row-gap: var(--spacing-4);
877
+ }
878
+ .global_gap-y-5 {
879
+ row-gap: var(--spacing-5);
880
+ }
881
+ .global_gap-y-6 {
882
+ row-gap: var(--spacing-6);
883
+ }
884
+ .global_gap-y-7 {
885
+ row-gap: var(--spacing-7);
886
+ }
887
+ .global_gap-y-8 {
888
+ row-gap: var(--spacing-8);
889
+ }
890
+ .global_gap-y-9 {
891
+ row-gap: var(--spacing-9);
892
+ }
893
+ .global_gap-y-10 {
894
+ row-gap: var(--spacing-10);
895
+ }
896
+ .global_gap-y-11 {
897
+ row-gap: var(--spacing-11);
898
+ }
899
+ .global_gap-y-12 {
900
+ row-gap: var(--spacing-12);
901
+ }
902
+ .global_flex-direction-row {
258
903
  flex-direction: row;
259
904
  }
260
- .Flexbox_row-reverse {
905
+ .global_flex-direction-row-reverse {
261
906
  flex-direction: row-reverse;
262
907
  }
263
- .Flexbox_column {
908
+ .global_flex-direction-column {
264
909
  flex-direction: column;
265
910
  }
266
- .Flexbox_column-reverse {
911
+ .global_flex-direction-column-reverse {
267
912
  flex-direction: column-reverse;
268
913
  }
269
- .Flexbox_wrap {
914
+ .global_flex-wrap {
270
915
  flex-wrap: wrap;
271
916
  }
272
- .Flexbox_nowrap {
917
+ .global_flex-wrap-nowrap {
273
918
  flex-wrap: nowrap;
274
919
  }
275
- .Flexbox_wrap-reverse {
920
+ .global_flex-wrap-wrap-reverse {
276
921
  flex-wrap: wrap-reverse;
277
922
  }
278
- .Flexbox_justify-content-center {
923
+ .global_justify-content-center {
279
924
  justify-content: center;
280
925
  }
281
- .Flexbox_justify-content-start {
926
+ .global_justify-content-start {
282
927
  justify-content: start;
283
928
  }
284
- .Flexbox_justify-content-end {
929
+ .global_justify-content-end {
285
930
  justify-content: end;
286
931
  }
287
- .Flexbox_justify-content-flex-start {
932
+ .global_justify-content-flex-start {
288
933
  justify-content: flex-start;
289
934
  }
290
- .Flexbox_justify-content-flex-end {
935
+ .global_justify-content-flex-end {
291
936
  justify-content: flex-end;
292
937
  }
293
- .Flexbox_justify-content-left {
938
+ .global_justify-content-left {
294
939
  justify-content: left;
295
940
  }
296
- .Flexbox_justify-content-right {
941
+ .global_justify-content-right {
297
942
  justify-content: right;
298
943
  }
299
- .Flexbox_justify-content-space-between {
944
+ .global_justify-content-space-between {
300
945
  justify-content: space-between;
301
946
  }
302
- .Flexbox_justify-content-space-around {
947
+ .global_justify-content-space-around {
303
948
  justify-content: space-around;
304
949
  }
305
- .Flexbox_justify-content-space-evenly {
950
+ .global_justify-content-space-evenly {
306
951
  justify-content: space-evenly;
307
952
  }
308
- .Flexbox_justify-content-stretch {
953
+ .global_justify-content-stretch {
309
954
  justify-content: stretch;
310
955
  }
311
- .Flexbox_justify-content-safe-center {
956
+ .global_justify-content-safe-center {
312
957
  justify-content: safe center;
313
958
  }
314
- .Flexbox_justify-content-unsafe-center {
959
+ .global_justify-content-unsafe-center {
315
960
  justify-content: unsafe center;
316
961
  }
317
- .Flexbox_justify-items-stretch {
962
+ .global_justify-items-stretch {
318
963
  justify-items: stretch;
319
964
  }
320
- .Flexbox_justify-items-center {
965
+ .global_justify-items-center {
321
966
  justify-items: center;
322
967
  }
323
- .Flexbox_justify-items-start {
968
+ .global_justify-items-start {
324
969
  justify-items: start;
325
970
  }
326
- .Flexbox_justify-items-end {
971
+ .global_justify-items-end {
327
972
  justify-items: end;
328
973
  }
329
- .Flexbox_justify-items-flex-start {
974
+ .global_justify-items-flex-start {
330
975
  justify-items: flex-start;
331
976
  }
332
- .Flexbox_justify-items-flex-end {
977
+ .global_justify-items-flex-end {
333
978
  justify-items: flex-end;
334
979
  }
335
- .Flexbox_justify-items-self-start {
980
+ .global_justify-items-self-start {
336
981
  justify-items: self-start;
337
982
  }
338
- .Flexbox_justify-items-self-end {
983
+ .global_justify-items-self-end {
339
984
  justify-items: self-end;
340
985
  }
341
- .Flexbox_justify-items-left {
986
+ .global_justify-items-left {
342
987
  justify-items: left;
343
988
  }
344
- .Flexbox_justify-items-right {
989
+ .global_justify-items-right {
345
990
  justify-items: right;
346
991
  }
347
- .Flexbox_justify-items-baseline {
992
+ .global_justify-items-baseline {
348
993
  justify-items: baseline;
349
994
  }
350
- .Flexbox_justify-items-first-baseline {
995
+ .global_justify-items-first-baseline {
351
996
  justify-items: first baseline;
352
997
  }
353
- .Flexbox_justify-items-last-baseline {
998
+ .global_justify-items-last-baseline {
354
999
  justify-items: last baseline;
355
1000
  }
356
- .Flexbox_justify-items-safe-center {
1001
+ .global_justify-items-safe-center {
357
1002
  justify-items: safe center;
358
1003
  }
359
- .Flexbox_justify-items-unsafe-center {
1004
+ .global_justify-items-unsafe-center {
360
1005
  justify-items: unsafe center;
361
1006
  }
362
- .Flexbox_align-content-center {
1007
+ .global_align-content-center {
363
1008
  align-content: center;
364
1009
  }
365
- .Flexbox_align-content-start {
1010
+ .global_align-content-start {
366
1011
  align-content: start;
367
1012
  }
368
- .Flexbox_align-content-end {
1013
+ .global_align-content-end {
369
1014
  align-content: end;
370
1015
  }
371
- .Flexbox_align-content-flex-start {
1016
+ .global_align-content-flex-start {
372
1017
  align-content: flex-start;
373
1018
  }
374
- .Flexbox_align-content-flex-end {
1019
+ .global_align-content-flex-end {
375
1020
  align-content: flex-end;
376
1021
  }
377
- .Flexbox_align-content-baseline {
1022
+ .global_align-content-baseline {
378
1023
  align-content: baseline;
379
1024
  }
380
- .Flexbox_align-content-first-baseline {
1025
+ .global_align-content-first-baseline {
381
1026
  align-content: first baseline;
382
1027
  }
383
- .Flexbox_align-content-last-baseline {
1028
+ .global_align-content-last-baseline {
384
1029
  align-content: last baseline;
385
1030
  }
386
- .Flexbox_align-content-space-between {
1031
+ .global_align-content-space-between {
387
1032
  align-content: space-between;
388
1033
  }
389
- .Flexbox_align-content-space-around {
1034
+ .global_align-content-space-around {
390
1035
  align-content: space-around;
391
1036
  }
392
- .Flexbox_align-content-space-evenly {
1037
+ .global_align-content-space-evenly {
393
1038
  align-content: space-evenly;
394
1039
  }
395
- .Flexbox_align-content-stretch {
1040
+ .global_align-content-stretch {
396
1041
  align-content: stretch;
397
1042
  }
398
- .Flexbox_align-content-safe-center {
1043
+ .global_align-content-safe-center {
399
1044
  align-content: safe center;
400
1045
  }
401
- .Flexbox_align-content-unsafe-center {
1046
+ .global_align-content-unsafe-center {
402
1047
  align-content: unsafe center;
403
1048
  }
404
- .Flexbox_align-items-center {
1049
+ .global_align-items-center {
405
1050
  align-items: center;
406
1051
  }
407
- .Flexbox_align-items-start {
1052
+ .global_align-items-start {
408
1053
  align-items: start;
409
1054
  }
410
- .Flexbox_align-items-end {
1055
+ .global_align-items-end {
411
1056
  align-items: end;
412
1057
  }
413
- .Flexbox_align-items-flex-start {
1058
+ .global_align-items-flex-start {
414
1059
  align-items: flex-start;
415
1060
  }
416
- .Flexbox_align-items-flex-end {
1061
+ .global_align-items-flex-end {
417
1062
  align-items: flex-end;
418
1063
  }
419
- .Flexbox_align-items-self-start {
1064
+ .global_align-items-self-start {
420
1065
  align-items: self-start;
421
1066
  }
422
- .Flexbox_align-items-self-end {
1067
+ .global_align-items-self-end {
423
1068
  align-items: self-end;
424
1069
  }
425
- .Flexbox_align-items-stretch {
1070
+ .global_align-items-stretch {
426
1071
  align-items: stretch;
427
1072
  }
428
- .Flexbox_align-items-baseline {
1073
+ .global_align-items-baseline {
429
1074
  align-items: baseline;
430
1075
  }
431
- .Flexbox_align-items-first-baseline {
1076
+ .global_align-items-first-baseline {
432
1077
  align-items: first baseline;
433
1078
  }
434
- .Flexbox_align-items-last-baseline {
1079
+ .global_align-items-last-baseline {
435
1080
  align-items: last baseline;
436
1081
  }
437
- .Flexbox_align-items-safe-center {
1082
+ .global_align-items-safe-center {
438
1083
  align-items: safe center;
439
1084
  }
440
- .Flexbox_align-items-unsafe-center {
1085
+ .global_align-items-unsafe-center {
441
1086
  align-items: unsafe center;
442
1087
  }
443
- .Flexbox_align-self-center {
1088
+ .global_align-self-center {
444
1089
  align-self: center;
445
1090
  }
446
- .Flexbox_align-self-start {
1091
+ .global_align-self-start {
447
1092
  align-self: start;
448
1093
  }
449
- .Flexbox_align-self-end {
1094
+ .global_align-self-end {
450
1095
  align-self: end;
451
1096
  }
452
- .Flexbox_align-self-self-start {
1097
+ .global_align-self-self-start {
453
1098
  align-self: self-start;
454
1099
  }
455
- .Flexbox_align-self-self-end {
1100
+ .global_align-self-self-end {
456
1101
  align-self: self-end;
457
1102
  }
458
- .Flexbox_align-self-flex-start {
1103
+ .global_align-self-flex-start {
459
1104
  align-self: flex-start;
460
1105
  }
461
- .Flexbox_align-self-flex-end {
1106
+ .global_align-self-flex-end {
462
1107
  align-self: flex-end;
463
1108
  }
464
- .Flexbox_align-self-baseline {
1109
+ .global_align-self-baseline {
465
1110
  align-self: baseline;
466
1111
  }
467
- .Flexbox_align-self-first-baseline {
1112
+ .global_align-self-first-baseline {
468
1113
  align-self: first baseline;
469
1114
  }
470
- .Flexbox_align-self-last-baseline {
1115
+ .global_align-self-last-baseline {
471
1116
  align-self: last baseline;
472
1117
  }
473
- .Flexbox_align-self-stretch {
1118
+ .global_align-self-stretch {
474
1119
  align-self: stretch;
475
1120
  }
476
- .Flexbox_align-self-safe-center {
1121
+ .global_align-self-safe-center {
477
1122
  align-self: safe center;
478
1123
  }
479
- .Flexbox_align-self-unsafe-center {
1124
+ .global_align-self-unsafe-center {
480
1125
  align-self: unsafe center;
481
1126
  }
482
- .Flexbox_inline {
483
- display: inline-flex;
484
- }
485
- .Flexbox_gap-xs {
486
- gap: var(--gap-xs);
487
- }
488
- .Flexbox_gap-sm {
489
- gap: var(--gap-sm);
490
- }
491
- .Flexbox_gap-md {
492
- gap: var(--gap-md);
493
- }
494
- .Flexbox_gap-lg {
495
- gap: var(--gap-lg);
496
- }
497
- .Flexbox_gap-xl {
498
- gap: var(--gap-xl);
499
- }
500
-
501
- /* src/components/Icon.module.css */
502
- .Icon_icon {
503
- display: inline-block;
504
- fill: currentColor;
505
- }
506
- .Icon_xs {
507
- width: 12px;
508
- height: 12px;
509
- }
510
- .Icon_sm {
511
- width: 16px;
512
- height: 16px;
513
- }
514
- .Icon_md {
515
- width: 24px;
516
- height: 24px;
517
- }
518
- .Icon_lg {
519
- width: 32px;
520
- height: 32px;
521
- }
522
- .Icon_xl {
523
- width: 48px;
524
- height: 48px;
525
- }
526
-
527
- /* src/components/AlertBanner.module.css */
528
- .AlertBanner_banner {
529
- display: flex;
530
- align-items: center;
531
- font-size: var(--font-size);
532
- padding: var(--padding);
533
- border: var(--border);
534
- border-radius: var(--border-radius);
535
- color: var(--font-color);
536
- background: var(--background-color);
537
- width: 100%;
538
- overflow: hidden;
539
- gap: var(--spacing-3);
540
- }
541
- .AlertBanner_message {
542
- display: flex;
543
- flex-direction: column;
544
- flex: 1;
545
- }
546
- .AlertBanner_title {
547
- font-weight: 700;
548
- }
549
- .AlertBanner_close {
550
- color: var(--font-muted-color);
551
- }
552
- .AlertBanner_close:hover {
553
- color: var(--font-color);
554
- cursor: pointer;
1127
+ @media (min-width: 520px) {
1128
+ .global_display-xs {
1129
+ display: var(--display-xs);
1130
+ }
1131
+ .global_font-size-xs {
1132
+ font-size: var(--font-size-xs);
1133
+ }
1134
+ .global_font-weight-xs {
1135
+ font-weight: var(--font-weight-xs);
1136
+ }
1137
+ .global_border-size-xs {
1138
+ border: var(--border-size-xs) solid var(--border-color);
1139
+ }
1140
+ .global_border-radius-xs {
1141
+ border-radius: var(--border-radius-xs);
1142
+ }
1143
+ .global_shadow-xs {
1144
+ box-shadow: var(--shadow-xs);
1145
+ }
1146
+ .global_background-color-xs {
1147
+ background-color: var(--background-color-xs);
1148
+ }
1149
+ .global_align-xs {
1150
+ text-align: var(--align-xs);
1151
+ }
1152
+ .global_letter-spacing-xs {
1153
+ letter-spacing: var(--letter-spacing-xs);
1154
+ }
1155
+ .global_padding-xs {
1156
+ padding: var(--padding-xs);
1157
+ }
1158
+ .global_padding-x-xs {
1159
+ padding-left: var(--padding-x-xs);
1160
+ padding-right: var(--padding-x-xs);
1161
+ }
1162
+ .global_padding-y-xs {
1163
+ padding-top: var(--padding-y-xs);
1164
+ padding-bottom: var(--padding-y-xs);
1165
+ }
1166
+ .global_padding-top-xs {
1167
+ padding-top: var(--padding-top-xs);
1168
+ }
1169
+ .global_padding-right-xs {
1170
+ padding-right: var(--padding-right-xs);
1171
+ }
1172
+ .global_padding-bottom-xs {
1173
+ padding-bottom: var(--padding-bottom-xs);
1174
+ }
1175
+ .global_padding-left-xs {
1176
+ padding-left: var(--padding-left-xs);
1177
+ }
1178
+ .global_margin-xs {
1179
+ margin: var(--margin-xs);
1180
+ }
1181
+ .global_margin-x-xs {
1182
+ margin-left: var(--margin-x-xs);
1183
+ margin-right: var(--margin-x-xs);
1184
+ }
1185
+ .global_margin-y-xs {
1186
+ margin-top: var(--margin-y-xs);
1187
+ margin-bottom: var(--margin-y-xs);
1188
+ }
1189
+ .global_margin-top-xs {
1190
+ margin-top: var(--margin-top-xs);
1191
+ }
1192
+ .global_margin-right-xs {
1193
+ margin-right: var(--margin-right-xs);
1194
+ }
1195
+ .global_margin-bottom-xs {
1196
+ margin-bottom: var(--margin-bottom-xs);
1197
+ }
1198
+ .global_margin-left-xs {
1199
+ margin-left: var(--margin-left-xs);
1200
+ }
1201
+ .global_gap-xs {
1202
+ gap: var(--gap-xs);
1203
+ }
1204
+ .global_gap-x-xs {
1205
+ column-gap: var(--gap-x-xs);
1206
+ }
1207
+ .global_gap-y-xs {
1208
+ row-gap: var(--gap-y-xs);
1209
+ }
1210
+ .global_height-xs {
1211
+ height: var(--height-xs);
1212
+ }
1213
+ .global_width-xs {
1214
+ min-width: var(--width-xs);
1215
+ }
1216
+ .global_min-height-xs {
1217
+ min-height: var(--min-height-xs);
1218
+ }
1219
+ .global_min-width-xs {
1220
+ max-width: var(--min-width-xs);
1221
+ }
1222
+ .global_max-height-xs {
1223
+ max-height: var(--max-height-xs);
1224
+ }
1225
+ .global_width-xs {
1226
+ width: var(--width-xs);
1227
+ }
1228
+ .global_flex-direction-xs {
1229
+ flex-direction: var(--flex-direction-xs);
1230
+ }
1231
+ .global_flex-wrap-xs {
1232
+ flex-wrap: var(--flex-wrap-xs);
1233
+ }
1234
+ .global_justify-content-xs {
1235
+ justify-content: var(--justify-content-xs);
1236
+ }
1237
+ .global_justify-items-xs {
1238
+ justify-items: var(--justify-items-xs);
1239
+ }
1240
+ .global_align-content-xs {
1241
+ align-content: var(--align-content-xs);
1242
+ }
1243
+ .global_align-items-xs {
1244
+ align-items: var(--align-items-xs);
1245
+ }
1246
+ .global_align-self-xs {
1247
+ align-self: var(--align-self-xs);
1248
+ }
555
1249
  }
556
- .AlertBanner_error {
557
- color: var(--light-color);
558
- background-color: var(--danger-color);
559
- border: 0;
1250
+ @media (min-width: 768px) {
1251
+ .global_display-sm {
1252
+ display: var(--display-sm);
1253
+ }
1254
+ .global_font-size-sm {
1255
+ font-size: var(--font-size-sm);
1256
+ }
1257
+ .global_font-weight-sm {
1258
+ font-weight: var(--font-weight-sm);
1259
+ }
1260
+ .global_border-size-sm {
1261
+ border: var(--border-size-sm) solid var(--border-color);
1262
+ }
1263
+ .global_border-radius-sm {
1264
+ border-radius: var(--border-radius-sm);
1265
+ }
1266
+ .global_shadow-sm {
1267
+ box-shadow: var(--shadow-sm);
1268
+ }
1269
+ .global_background-color-sm {
1270
+ background-color: var(--background-color-sm);
1271
+ }
1272
+ .global_align-sm {
1273
+ text-align: var(--align-sm);
1274
+ }
1275
+ .global_letter-spacing-sm {
1276
+ letter-spacing: var(--letter-spacing-sm);
1277
+ }
1278
+ .global_padding-sm {
1279
+ padding: var(--padding-sm);
1280
+ }
1281
+ .global_padding-x-sm {
1282
+ padding-left: var(--padding-x-sm);
1283
+ padding-right: var(--padding-x-sm);
1284
+ }
1285
+ .global_padding-y-sm {
1286
+ padding-top: var(--padding-y-sm);
1287
+ padding-bottom: var(--padding-y-sm);
1288
+ }
1289
+ .global_padding-top-sm {
1290
+ padding-top: var(--padding-top-sm);
1291
+ }
1292
+ .global_padding-right-sm {
1293
+ padding-right: var(--padding-right-sm);
1294
+ }
1295
+ .global_padding-bottom-sm {
1296
+ padding-bottom: var(--padding-bottom-sm);
1297
+ }
1298
+ .global_padding-left-sm {
1299
+ padding-left: var(--padding-left-sm);
1300
+ }
1301
+ .global_margin-sm {
1302
+ margin: var(--margin-sm);
1303
+ }
1304
+ .global_margin-x-sm {
1305
+ margin-left: var(--margin-x-sm);
1306
+ margin-right: var(--margin-x-sm);
1307
+ }
1308
+ .global_margin-y-sm {
1309
+ margin-top: var(--margin-y-sm);
1310
+ margin-bottom: var(--margin-y-sm);
1311
+ }
1312
+ .global_margin-top-sm {
1313
+ margin-top: var(--margin-top-sm);
1314
+ }
1315
+ .global_margin-right-sm {
1316
+ margin-right: var(--margin-right-sm);
1317
+ }
1318
+ .global_margin-bottom-sm {
1319
+ margin-bottom: var(--margin-bottom-sm);
1320
+ }
1321
+ .global_margin-left-sm {
1322
+ margin-left: var(--margin-left-sm);
1323
+ }
1324
+ .global_gap-sm {
1325
+ gap: var(--gap-sm);
1326
+ }
1327
+ .global_gap-x-sm {
1328
+ column-gap: var(--gap-x-sm);
1329
+ }
1330
+ .global_gap-y-sm {
1331
+ row-gap: var(--gap-y-sm);
1332
+ }
1333
+ .global_height-sm {
1334
+ height: var(--height-sm);
1335
+ }
1336
+ .global_width-sm {
1337
+ width: var(--width-sm);
1338
+ }
1339
+ .global_min-height-sm {
1340
+ min-height: var(--min-height-sm);
1341
+ }
1342
+ .global_min-width-sm {
1343
+ max-width: var(--min-width-sm);
1344
+ }
1345
+ .global_max-height-sm {
1346
+ max-height: var(--max-height-sm);
1347
+ }
1348
+ .global_width-sm {
1349
+ width: var(--width-sm);
1350
+ }
1351
+ .global_flex-direction-sm {
1352
+ flex-direction: var(--flex-direction-sm);
1353
+ }
1354
+ .global_flex-wrap-sm {
1355
+ flex-wrap: var(--flex-wrap-sm);
1356
+ }
1357
+ .global_justify-content-sm {
1358
+ justify-content: var(--justify-content-sm);
1359
+ }
1360
+ .global_justify-items-sm {
1361
+ justify-items: var(--justify-items-sm);
1362
+ }
1363
+ .global_align-content-sm {
1364
+ align-content: var(--align-content-sm);
1365
+ }
1366
+ .global_align-items-sm {
1367
+ align-items: var(--align-items-sm);
1368
+ }
1369
+ .global_align-self-sm {
1370
+ align-self: var(--align-self-sm);
1371
+ }
560
1372
  }
561
- .AlertBanner_error .AlertBanner_close {
562
- color: var(--light-color);
1373
+ @media (min-width: 1024px) {
1374
+ .global_display-md {
1375
+ display: var(--display-md);
1376
+ }
1377
+ .global_font-size-md {
1378
+ font-size: var(--font-size-md);
1379
+ }
1380
+ .global_font-weight-md {
1381
+ font-weight: var(--font-weight-md);
1382
+ }
1383
+ .global_border-size-md {
1384
+ border: var(--border-size-md) solid var(--border-color);
1385
+ }
1386
+ .global_border-radius-md {
1387
+ border-radius: var(--border-radius-md);
1388
+ }
1389
+ .global_shadow-md {
1390
+ box-shadow: var(--shadow-md);
1391
+ }
1392
+ .global_background-color-md {
1393
+ background-color: var(--background-color-md);
1394
+ }
1395
+ .global_align-md {
1396
+ text-align: var(--align-md);
1397
+ }
1398
+ .global_letter-spacing-md {
1399
+ letter-spacing: var(--letter-spacing-md);
1400
+ }
1401
+ .global_padding-md {
1402
+ padding: var(--padding-md);
1403
+ }
1404
+ .global_padding-x-md {
1405
+ padding-left: var(--padding-x-md);
1406
+ padding-right: var(--padding-x-md);
1407
+ }
1408
+ .global_padding-y-md {
1409
+ padding-top: var(--padding-y-md);
1410
+ padding-bottom: var(--padding-y-md);
1411
+ }
1412
+ .global_padding-top-md {
1413
+ padding-top: var(--padding-top-md);
1414
+ }
1415
+ .global_padding-right-md {
1416
+ padding-right: var(--padding-right-md);
1417
+ }
1418
+ .global_padding-bottom-md {
1419
+ padding-bottom: var(--padding-bottom-md);
1420
+ }
1421
+ .global_padding-left-md {
1422
+ padding-left: var(--padding-left-md);
1423
+ }
1424
+ .global_margin-md {
1425
+ margin: var(--margin-md);
1426
+ }
1427
+ .global_margin-x-md {
1428
+ margin-left: var(--margin-x-md);
1429
+ margin-right: var(--margin-x-md);
1430
+ }
1431
+ .global_margin-y-md {
1432
+ margin-top: var(--margin-y-md);
1433
+ margin-bottom: var(--margin-y-md);
1434
+ }
1435
+ .global_margin-top-md {
1436
+ margin-top: var(--margin-top-md);
1437
+ }
1438
+ .global_margin-right-md {
1439
+ margin-right: var(--margin-right-md);
1440
+ }
1441
+ .global_margin-bottom-md {
1442
+ margin-bottom: var(--margin-bottom-md);
1443
+ }
1444
+ .global_margin-left-md {
1445
+ margin-left: var(--margin-left-md);
1446
+ }
1447
+ .global_gap-md {
1448
+ gap: var(--gap-md);
1449
+ }
1450
+ .global_gap-x-md {
1451
+ column-gap: var(--gap-x-md);
1452
+ }
1453
+ .global_gap-y-md {
1454
+ row-gap: var(--gap-y-md);
1455
+ }
1456
+ .global_height-md {
1457
+ height: var(--height-md);
1458
+ }
1459
+ .global_width-md {
1460
+ width: var(--width-md);
1461
+ }
1462
+ .global_min-height-md {
1463
+ min-height: var(--min-height-md);
1464
+ }
1465
+ .global_min-width-md {
1466
+ max-width: var(--min-width-md);
1467
+ }
1468
+ .global_max-height-md {
1469
+ max-height: var(--max-height-md);
1470
+ }
1471
+ .global_width-md {
1472
+ width: var(--width-md);
1473
+ }
1474
+ .global_flex-direction-md {
1475
+ flex-direction: var(--flex-direction-md);
1476
+ }
1477
+ .global_flex-wrap-md {
1478
+ flex-wrap: var(--flex-wrap-md);
1479
+ }
1480
+ .global_justify-content-md {
1481
+ justify-content: var(--justify-content-md);
1482
+ }
1483
+ .global_justify-items-md {
1484
+ justify-items: var(--justify-items-md);
1485
+ }
1486
+ .global_align-content-md {
1487
+ align-content: var(--align-content-md);
1488
+ }
1489
+ .global_align-items-md {
1490
+ align-items: var(--align-items-md);
1491
+ }
1492
+ .global_align-self-md {
1493
+ align-self: var(--align-self-md);
1494
+ }
563
1495
  }
564
- .AlertBanner_info {
565
- color: var(--primary-font-color);
566
- background-color: var(--primary-color);
567
- border: 0;
1496
+ @media (min-width: 1280px) {
1497
+ .global_display-lg {
1498
+ display: var(--display-lg);
1499
+ }
1500
+ .global_font-size-lg {
1501
+ font-size: var(--font-size-lg);
1502
+ }
1503
+ .global_font-weight-lg {
1504
+ font-weight: var(--font-weight-lg);
1505
+ }
1506
+ .global_border-size-lg {
1507
+ border: var(--border-size-lg) solid var(--border-color);
1508
+ }
1509
+ .global_border-radius-lg {
1510
+ border-radius: var(--border-radius-lg);
1511
+ }
1512
+ .global_shadow-lg {
1513
+ box-shadow: var(--shadow-lg);
1514
+ }
1515
+ .global_background-color-lg {
1516
+ background-color: var(--background-color-lg);
1517
+ }
1518
+ .global_align-lg {
1519
+ text-align: var(--align-lg);
1520
+ }
1521
+ .global_letter-spacing-lg {
1522
+ letter-spacing: var(--letter-spacing-lg);
1523
+ }
1524
+ .global_padding-lg {
1525
+ padding: var(--padding-lg);
1526
+ }
1527
+ .global_padding-x-lg {
1528
+ padding-left: var(--padding-x-lg);
1529
+ padding-right: var(--padding-x-lg);
1530
+ }
1531
+ .global_padding-y-lg {
1532
+ padding-top: var(--padding-y-lg);
1533
+ padding-bottom: var(--padding-y-lg);
1534
+ }
1535
+ .global_padding-top-lg {
1536
+ padding-top: var(--padding-top-lg);
1537
+ }
1538
+ .global_padding-right-lg {
1539
+ padding-right: var(--padding-right-lg);
1540
+ }
1541
+ .global_padding-bottom-lg {
1542
+ padding-bottom: var(--padding-bottom-lg);
1543
+ }
1544
+ .global_padding-left-lg {
1545
+ padding-left: var(--padding-left-lg);
1546
+ }
1547
+ .global_margin-lg {
1548
+ margin: var(--margin-lg);
1549
+ }
1550
+ .global_margin-x-lg {
1551
+ margin-left: var(--margin-x-lg);
1552
+ margin-right: var(--margin-x-lg);
1553
+ }
1554
+ .global_margin-y-lg {
1555
+ margin-top: var(--margin-y-lg);
1556
+ margin-bottom: var(--margin-y-lg);
1557
+ }
1558
+ .global_margin-top-lg {
1559
+ margin-top: var(--margin-top-lg);
1560
+ }
1561
+ .global_margin-right-lg {
1562
+ margin-right: var(--margin-right-lg);
1563
+ }
1564
+ .global_margin-bottom-lg {
1565
+ margin-bottom: var(--margin-bottom-lg);
1566
+ }
1567
+ .global_margin-left-lg {
1568
+ margin-left: var(--margin-left-lg);
1569
+ }
1570
+ .global_gap-lg {
1571
+ gap: var(--gap-lg);
1572
+ }
1573
+ .global_gap-x-lg {
1574
+ column-gap: var(--gap-x-lg);
1575
+ }
1576
+ .global_gap-y-lg {
1577
+ row-gap: var(--gap-y-lg);
1578
+ }
1579
+ .global_height-lg {
1580
+ height: var(--height-lg);
1581
+ }
1582
+ .global_width-lg {
1583
+ width: var(--width-lg);
1584
+ }
1585
+ .global_min-height-lg {
1586
+ min-height: var(--min-height-lg);
1587
+ }
1588
+ .global_min-width-lg {
1589
+ max-width: var(--min-width-lg);
1590
+ }
1591
+ .global_max-height-lg {
1592
+ max-height: var(--max-height-lg);
1593
+ }
1594
+ .global_width-lg {
1595
+ width: var(--width-lg);
1596
+ }
1597
+ .global_flex-direction-lg {
1598
+ flex-direction: var(--flex-direction-lg);
1599
+ }
1600
+ .global_flex-wrap-lg {
1601
+ flex-wrap: var(--flex-wrap-lg);
1602
+ }
1603
+ .global_justify-content-lg {
1604
+ justify-content: var(--justify-content-lg);
1605
+ }
1606
+ .global_justify-items-lg {
1607
+ justify-items: var(--justify-items-lg);
1608
+ }
1609
+ .global_align-content-lg {
1610
+ align-content: var(--align-content-lg);
1611
+ }
1612
+ .global_align-items-lg {
1613
+ align-items: var(--align-items-lg);
1614
+ }
1615
+ .global_align-self-lg {
1616
+ align-self: var(--align-self-lg);
1617
+ }
568
1618
  }
569
- .AlertBanner_info .AlertBanner_close {
570
- color: var(--primary-font-color);
1619
+ @media (min-width: 1640px) {
1620
+ .global_display-xl {
1621
+ display: var(--display-xl);
1622
+ }
1623
+ .global_font-size-xl {
1624
+ font-size: var(--font-size-xl);
1625
+ }
1626
+ .global_font-weight-xl {
1627
+ font-weight: var(--font-weight-xl);
1628
+ }
1629
+ .global_border-size-xl {
1630
+ border: var(--border-size-xl) solid var(--border-color);
1631
+ }
1632
+ .global_border-radius-xl {
1633
+ border-radius: var(--border-radius-xl);
1634
+ }
1635
+ .global_shadow-xl {
1636
+ box-shadow: var(--shadow-xl);
1637
+ }
1638
+ .global_background-color-xl {
1639
+ background-color: var(--background-color-xl);
1640
+ }
1641
+ .global_align-xl {
1642
+ text-align: var(--align-xl);
1643
+ }
1644
+ .global_letter-spacing-xl {
1645
+ letter-spacing: var(--letter-spacing-xl);
1646
+ }
1647
+ .global_padding-xl {
1648
+ padding: var(--padding-xl);
1649
+ }
1650
+ .global_padding-x-xl {
1651
+ padding-left: var(--padding-x-xl);
1652
+ padding-right: var(--padding-x-xl);
1653
+ }
1654
+ .global_padding-y-xl {
1655
+ padding-top: var(--padding-y-xl);
1656
+ padding-bottom: var(--padding-y-xl);
1657
+ }
1658
+ .global_padding-top-xl {
1659
+ padding-top: var(--padding-top-xl);
1660
+ }
1661
+ .global_padding-right-xl {
1662
+ padding-right: var(--padding-right-xl);
1663
+ }
1664
+ .global_padding-bottom-xl {
1665
+ padding-bottom: var(--padding-bottom-xl);
1666
+ }
1667
+ .global_padding-left-xl {
1668
+ padding-left: var(--padding-left-xl);
1669
+ }
1670
+ .global_margin-xl {
1671
+ margin: var(--margin-xl);
1672
+ }
1673
+ .global_margin-x-xl {
1674
+ margin-left: var(--margin-x-xl);
1675
+ margin-right: var(--margin-x-xl);
1676
+ }
1677
+ .global_margin-y-xl {
1678
+ margin-top: var(--margin-y-xl);
1679
+ margin-bottom: var(--margin-y-xl);
1680
+ }
1681
+ .global_margin-top-xl {
1682
+ margin-top: var(--margin-top-xl);
1683
+ }
1684
+ .global_margin-right-xl {
1685
+ margin-right: var(--margin-right-xl);
1686
+ }
1687
+ .global_margin-bottom-xl {
1688
+ margin-bottom: var(--margin-bottom-xl);
1689
+ }
1690
+ .global_margin-left-xl {
1691
+ margin-left: var(--margin-left-xl);
1692
+ }
1693
+ .global_gap-xl {
1694
+ gap: var(--gap-xl);
1695
+ }
1696
+ .global_gap-x-xl {
1697
+ column-gap: var(--gap-x-xl);
1698
+ }
1699
+ .global_gap-y-xl {
1700
+ row-gap: var(--gap-y-xl);
1701
+ }
1702
+ .global_height-xl {
1703
+ height: var(--height-xl);
1704
+ }
1705
+ .global_width-xl {
1706
+ width: var(--width-xl);
1707
+ }
1708
+ .global_min-height-xl {
1709
+ min-height: var(--min-height-xl);
1710
+ }
1711
+ .global_min-width-xl {
1712
+ max-width: var(--min-width-xl);
1713
+ }
1714
+ .global_max-height-xl {
1715
+ max-height: var(--max-height-xl);
1716
+ }
1717
+ .global_width-xl {
1718
+ width: var(--width-xl);
1719
+ }
1720
+ .global_flex-direction-xl {
1721
+ flex-direction: var(--flex-direction-xl);
1722
+ }
1723
+ .global_flex-wrap-xl {
1724
+ flex-wrap: var(--flex-wrap-xl);
1725
+ }
1726
+ .global_justify-content-xl {
1727
+ justify-content: var(--justify-content-xl);
1728
+ }
1729
+ .global_justify-items-xl {
1730
+ justify-items: var(--justify-items-xl);
1731
+ }
1732
+ .global_align-content-xl {
1733
+ align-content: var(--align-content-xl);
1734
+ }
1735
+ .global_align-items-xl {
1736
+ align-items: var(--align-items-xl);
1737
+ }
1738
+ .global_align-self-xl {
1739
+ align-self: var(--align-self-xl);
1740
+ }
571
1741
  }
572
1742
 
573
1743
  /* src/components/Text.module.css */
574
1744
  .Text_text {
575
- color: currentColor;
1745
+ color: var(--font-color);
576
1746
  line-height: 1.2em;
577
1747
  }
578
- .Text_xs {
579
- font-size: var(--font-size-xs);
580
- }
581
- .Text_sm {
582
- font-size: var(--font-size-sm);
583
- }
584
- .Text_md {
585
- font-size: var(--font-size-md);
586
- }
587
- .Text_lg {
588
- font-size: var(--font-size-lg);
589
- }
590
- .Text_xl {
591
- font-size: var(--font-size-xl);
1748
+ :where(.Text_text) {
1749
+ font-size: var(--font-size);
592
1750
  }
593
1751
  .Text_muted {
594
1752
  color: var(--font-muted-color);
@@ -596,38 +1754,22 @@
596
1754
  .Text_faded {
597
1755
  color: var(--font-faded-color);
598
1756
  }
599
- .Text_lighter {
600
- font-weight: 200;
601
- }
602
- .Text_light {
603
- font-weight: 300;
604
- }
605
- .Text_bold {
606
- font-weight: 700;
607
- }
608
- .Text_bolder {
609
- font-weight: 900;
610
- }
611
- .Text_tighter {
612
- letter-spacing: -0.05em;
613
- }
614
- .Text_tight {
615
- letter-spacing: -0.025em;
616
- }
617
- .Text_wide {
618
- letter-spacing: 0.025em;
619
- }
620
- .Text_wider {
621
- letter-spacing: 0.05em;
622
- }
623
- .Text_left {
624
- text-align: left;
1757
+
1758
+ /* src/components/forms/Form.module.css */
1759
+ .Form_form {
1760
+ position: relative;
1761
+ font-size: var(--font-size);
625
1762
  }
626
- .Text_center {
1763
+ .Form_text {
627
1764
  text-align: center;
1765
+ margin: auto;
628
1766
  }
629
- .Text_right {
630
- text-align: right;
1767
+ .Form_icon {
1768
+ align-self: flex-start;
1769
+ }
1770
+ .Form_error {
1771
+ margin: 0 auto;
1772
+ overflow: auto;
631
1773
  }
632
1774
 
633
1775
  /* src/components/forms/FormField.module.css */
@@ -636,8 +1778,8 @@
636
1778
  flex-direction: column;
637
1779
  }
638
1780
  .FormField_description {
639
- color: var(--font-muted-color);
640
1781
  line-height: 1.8rem;
1782
+ font-size: var(--font-size);
641
1783
  }
642
1784
  .FormField_error {
643
1785
  color: var(--danger-color);
@@ -651,7 +1793,7 @@
651
1793
  align-items: center;
652
1794
  justify-content: center;
653
1795
  white-space: nowrap;
654
- gap: var(--gap-md);
1796
+ gap: var(--gap);
655
1797
  font-size: var(--font-size);
656
1798
  font-family: inherit;
657
1799
  font-weight: 500;
@@ -749,8 +1891,9 @@
749
1891
  font-size: 1.3rem;
750
1892
  padding: 1.25rem 1.5rem;
751
1893
  }
752
- .Button_button a {
1894
+ body a.Button_button {
753
1895
  color: inherit;
1896
+ text-decoration: none;
754
1897
  }
755
1898
 
756
1899
  /* src/components/Spinner.module.css */
@@ -821,65 +1964,44 @@
821
1964
 
822
1965
  /* src/components/Accordion.module.css */
823
1966
  .Accordion_accordion {
1967
+ display: flex;
1968
+ flex-direction: column;
1969
+ align-items: flex-start;
824
1970
  width: 100%;
825
- background-color: var(--background-color);
1971
+ gap: var(--gap-sm);
1972
+ font-size: var(--font-size);
1973
+ color: var(--font-color);
826
1974
  }
827
1975
  .Accordion_item {
828
- overflow: hidden;
829
- border-bottom: var(--border);
830
- padding-bottom: var(--spacing-5);
831
- }
832
- .Accordion_item[data-state=closed] {
833
- padding: 0;
834
- }
835
- .Accordion_header {
836
- display: flex;
837
- align-items: center;
838
- font-size: var(--font-size-lg);
1976
+ width: 100%;
1977
+ cursor: pointer;
839
1978
  }
840
- .Accordion_trigger {
841
- font-size: inherit;
842
- font-weight: 700;
1979
+ .Accordion_button {
1980
+ width: 100%;
843
1981
  display: flex;
844
1982
  align-items: center;
845
1983
  justify-content: space-between;
846
- color: var(--font-color);
847
- flex: 1;
848
- border: 0;
849
- background: transparent;
850
- padding: 0;
851
- cursor: pointer;
852
- }
853
- .Accordion_content {
854
- overflow: hidden;
855
- }
856
- .Accordion_content[data-state=open] {
857
- animation: Accordion_accordion-slide-down 200ms ease-out;
1984
+ font-weight: 700;
858
1985
  }
859
- .Accordion_content[data-state=closed] {
860
- animation: Accordion_accordion-slide-up 200ms ease-out;
1986
+ .Accordion_accordion .Accordion_button,
1987
+ .Accordion_accordion .Accordion_button:hover {
1988
+ background-color: transparent;
1989
+ padding: var(--spacing-2) 0;
861
1990
  }
862
1991
  .Accordion_icon {
863
- transform: rotate(90deg);
1992
+ transition: transform 200ms;
864
1993
  }
865
- .Accordion_trigger[data-state=open] > .Accordion_icon {
866
- transform: rotate(-90deg);
1994
+ .Accordion_item[data-expanded] .Accordion_icon {
1995
+ transform: rotate(90deg);
867
1996
  }
868
- @keyframes Accordion_accordion-slide-down {
869
- from {
870
- height: 0;
871
- }
872
- to {
873
- height: var(--radix-accordion-content-height);
874
- }
1997
+ .Accordion_panel {
1998
+ overflow: hidden;
1999
+ max-height: 0;
2000
+ transition: max-height 0.5s ease-out;
875
2001
  }
876
- @keyframes Accordion_accordion-slide-up {
877
- from {
878
- height: var(--radix-accordion-content-height);
879
- }
880
- to {
881
- height: 0;
882
- }
2002
+ .Accordion_panel.Accordion_expanded {
2003
+ max-height: 500px;
2004
+ transition: max-height 0.5s ease-out;
883
2005
  }
884
2006
 
885
2007
  /* src/components/Dialog.module.css */
@@ -906,6 +2028,13 @@
906
2028
  font-weight: 700;
907
2029
  }
908
2030
 
2031
+ /* src/components/Blockquote.module.css */
2032
+ .Blockquote_blockquote {
2033
+ font-size: var(--font-size);
2034
+ border-left: 2px solid var(--primary-color);
2035
+ padding-left: var(--spacing-5);
2036
+ }
2037
+
909
2038
  /* src/components/Breadcrumbs.module.css */
910
2039
  .Breadcrumbs_breadcrumbs {
911
2040
  display: flex;
@@ -915,22 +2044,23 @@
915
2044
  .Breadcrumbs_breadcrumb {
916
2045
  display: flex;
917
2046
  align-items: center;
918
- font-size: var(--font-size2);
2047
+ font-size: var(--font-size);
919
2048
  gap: var(--gap);
920
2049
  list-style: none;
921
2050
  }
922
- .Breadcrumbs_breadcrumb a {
2051
+ .Breadcrumbs_breadcrumbs .Breadcrumbs_breadcrumb a {
923
2052
  color: var(--font-muted-color);
2053
+ text-decoration: none;
2054
+ font-weight: 400;
2055
+ padding: var(--padding);
924
2056
  }
925
- .Breadcrumbs_breadcrumb a:hover {
2057
+ .Breadcrumbs_breadcrumbs .Breadcrumbs_breadcrumb a:hover {
926
2058
  color: var(--font-color);
2059
+ text-decoration: none;
927
2060
  }
928
2061
  .Breadcrumbs_icon {
929
2062
  color: var(--font-muted-color);
930
2063
  }
931
- .Breadcrumbs_breadcrumb:last-child {
932
- font-weight: var(--font-weight4);
933
- }
934
2064
  .Breadcrumbs_breadcrumb:last-child .Breadcrumbs_icon {
935
2065
  display: none;
936
2066
  }
@@ -939,6 +2069,8 @@
939
2069
  .Calendar_calendar {
940
2070
  width: fit-content;
941
2071
  max-width: 100%;
2072
+ font-size: var(--font-size);
2073
+ color: var(--font-color);
942
2074
  }
943
2075
  .Calendar_header {
944
2076
  display: flex;
@@ -960,7 +2092,6 @@
960
2092
  background: transparent;
961
2093
  }
962
2094
  .Calendar_headerCell {
963
- font-size: var(--font-size);
964
2095
  font-weight: 700;
965
2096
  }
966
2097
  .Calendar_cell {
@@ -970,7 +2101,7 @@
970
2101
  border-radius: var(--border-radius);
971
2102
  cursor: pointer;
972
2103
  outline: none;
973
- margin: 1px;
2104
+ margin: var(--gap-xs);
974
2105
  forced-color-adjust: none;
975
2106
  }
976
2107
  .Calendar_cell:hover {
@@ -995,7 +2126,8 @@
995
2126
  display: flex;
996
2127
  flex-direction: row;
997
2128
  align-items: center;
998
- gap: var(--gap-md);
2129
+ gap: var(--gap);
2130
+ font-size: var(--font-size);
999
2131
  color: var(--font-color);
1000
2132
  }
1001
2133
  .Checkbox_box {
@@ -1040,11 +2172,23 @@
1040
2172
  outline: var(--outline);
1041
2173
  }
1042
2174
 
2175
+ /* src/components/Code.module.css */
2176
+ .Code_code {
2177
+ font-family: var(--font-family-code), monospace;
2178
+ font-size: var(--font-size-2);
2179
+ font-weight: var(--font-weight-medium);
2180
+ color: var(--font-color);
2181
+ background: var(--highlight-color);
2182
+ border-radius: var(--border-radius);
2183
+ padding: var(--spacing-1);
2184
+ }
2185
+
1043
2186
  /* src/components/ListItem.module.css */
1044
2187
  .ListItem_item {
1045
2188
  display: flex;
1046
2189
  align-items: center;
1047
2190
  justify-content: space-between;
2191
+ font-size: var(--font-size);
1048
2192
  color: var(--font-color);
1049
2193
  background: var(--background-color);
1050
2194
  padding: var(--padding);
@@ -1053,6 +2197,10 @@
1053
2197
  cursor: pointer;
1054
2198
  outline: none;
1055
2199
  }
2200
+ .ListItem_item[data-focus],
2201
+ .ListItem_item[data-focus-visible] {
2202
+ background: var(--highlight-color);
2203
+ }
1056
2204
  .ListItem_item:hover {
1057
2205
  background: var(--highlight-color);
1058
2206
  }
@@ -1150,8 +2298,47 @@
1150
2298
  cursor: pointer;
1151
2299
  }
1152
2300
 
2301
+ /* src/components/Container.module.css */
2302
+ .Container_container {
2303
+ width: 100%;
2304
+ padding: 0 1rem;
2305
+ }
2306
+ .Container_container.Container_centered {
2307
+ margin: 0 auto;
2308
+ }
2309
+ .Container_container.Container_fluid {
2310
+ max-width: 100%;
2311
+ padding: 0;
2312
+ }
2313
+ @media (min-width: 520px) {
2314
+ .Container_container {
2315
+ max-width: 500px;
2316
+ }
2317
+ }
2318
+ @media (min-width: 768px) {
2319
+ .Container_container {
2320
+ max-width: 740px;
2321
+ }
2322
+ }
2323
+ @media (min-width: 1024px) {
2324
+ .Container_container {
2325
+ max-width: 1000px;
2326
+ }
2327
+ }
2328
+ @media (min-width: 1280px) {
2329
+ .Container_container {
2330
+ max-width: 1240px;
2331
+ }
2332
+ }
2333
+ @media (min-width: 1640px) {
2334
+ .Container_container {
2335
+ max-width: 1600px;
2336
+ }
2337
+ }
2338
+
1153
2339
  /* src/components/Label.module.css */
1154
2340
  .Label_label {
2341
+ font-size: var(--font-size);
1155
2342
  color: var(--font-color);
1156
2343
  font-weight: 700;
1157
2344
  line-height: 2;
@@ -1172,44 +2359,48 @@
1172
2359
  }
1173
2360
  }
1174
2361
 
1175
- /* src/components/Input.module.css */
1176
- .Input_field,
1177
- .Input_row {
2362
+ /* src/components/styles/input.module.css */
2363
+ .input_field {
2364
+ min-width: 240px;
2365
+ }
2366
+ .input_field,
2367
+ .input_row {
1178
2368
  position: relative;
1179
2369
  }
1180
- .Input_field[data-readonly] .Input_input,
1181
- .Input_field[data-disabled] .Input_input {
2370
+ .input_field[data-readonly] .input_input,
2371
+ .input_field[data-disabled] .input_input {
1182
2372
  background: var(--input-disabled-color);
1183
2373
  }
1184
- .Input_input {
2374
+ .input_input {
2375
+ font-size: var(--font-size);
2376
+ color: var(--font-color);
1185
2377
  border: var(--border);
1186
2378
  border-radius: var(--border-radius);
1187
2379
  background: var(--background-color);
1188
2380
  box-shadow: var(--box-shadow);
1189
- color: var(--font-color);
1190
2381
  padding: var(--padding);
1191
2382
  line-height: 1.5rem;
1192
2383
  width: 100%;
1193
2384
  }
1194
- .Input_input:focus {
2385
+ .input_input:focus {
1195
2386
  border-color: transparent;
1196
2387
  outline: var(--outline);
1197
2388
  }
1198
- .Input_input::placeholder {
2389
+ .input_input::placeholder {
1199
2390
  color: var(--font-muted-color);
1200
2391
  }
1201
- .Input_input:disabled {
2392
+ .input_input:disabled {
1202
2393
  color: var(--font-muted-color);
1203
2394
  }
1204
- .Input_input::-webkit-search-cancel-button,
1205
- .Input_input::-webkit-search-decoration {
2395
+ .input_input::-webkit-search-cancel-button,
2396
+ .input_input::-webkit-search-decoration {
1206
2397
  -webkit-appearance: none;
1207
2398
  }
1208
- .Input_icon {
2399
+ .input_icon {
1209
2400
  color: var(--font-muted-color);
1210
2401
  background: var(--background-color);
1211
2402
  }
1212
- .Input_icon:hover {
2403
+ .input_icon:hover {
1213
2404
  color: var(--font-color);
1214
2405
  cursor: pointer;
1215
2406
  }
@@ -1220,8 +2411,8 @@
1220
2411
  }
1221
2412
  .TextField_icon {
1222
2413
  position: absolute;
1223
- top: 9px;
1224
- right: 9px;
2414
+ top: var(--padding-y);
2415
+ right: var(--padding-x);
1225
2416
  }
1226
2417
 
1227
2418
  /* src/components/ConfirmationDialog.module.css */
@@ -1235,6 +2426,8 @@
1235
2426
 
1236
2427
  /* src/components/Table.module.css */
1237
2428
  .Table_table {
2429
+ font-size: var(--font-size);
2430
+ color: var(--font-color);
1238
2431
  border-collapse: collapse;
1239
2432
  width: 100%;
1240
2433
  position: relative;
@@ -1288,6 +2481,8 @@
1288
2481
  /* src/components/DataTable.module.css */
1289
2482
  .DataTable_datatable {
1290
2483
  position: relative;
2484
+ font-size: var(--font-size);
2485
+ color: var(--font-color);
1291
2486
  }
1292
2487
  .DataTable_cell {
1293
2488
  align-items: center;
@@ -1331,35 +2526,7 @@
1331
2526
  /* src/components/Heading.module.css */
1332
2527
  .Heading_heading {
1333
2528
  color: var(--font-color);
1334
- font-weight: 700;
1335
- margin-top: 0;
1336
- }
1337
- .Heading_size1 {
1338
- font-size: 0.75rem;
1339
- }
1340
- .Heading_size2 {
1341
- font-size: 1rem;
1342
- }
1343
- .Heading_size3 {
1344
- font-size: 1.25rem;
1345
- }
1346
- .Heading_size4 {
1347
- font-size: 1.5rem;
1348
- }
1349
- .Heading_size5 {
1350
- font-size: 1.75rem;
1351
- }
1352
- .Heading_size6 {
1353
- font-size: 2rem;
1354
- }
1355
- .Heading_size7 {
1356
- font-size: 2.5rem;
1357
- }
1358
- .Heading_size8 {
1359
- font-size: 3.5rem;
1360
- }
1361
- .Heading_size9 {
1362
- font-size: 5rem;
2529
+ font-weight: var(--font-weight-bold);
1363
2530
  }
1364
2531
 
1365
2532
  /* src/components/HoverTrigger.module.css */
@@ -1370,6 +2537,8 @@
1370
2537
 
1371
2538
  /* src/components/InlineEditField.module.css */
1372
2539
  .InlineEditField_edit {
2540
+ font-size: var(--font-size);
2541
+ color: var(--font-color);
1373
2542
  display: flex;
1374
2543
  align-items: center;
1375
2544
  position: relative;
@@ -1413,6 +2582,7 @@
1413
2582
  display: flex;
1414
2583
  align-items: center;
1415
2584
  justify-content: space-between;
2585
+ font-size: var(--font-size);
1416
2586
  color: var(--font-color);
1417
2587
  background: var(--background-color);
1418
2588
  padding: var(--padding);
@@ -1493,22 +2663,26 @@
1493
2663
  .NavigationMenu_nav {
1494
2664
  display: flex;
1495
2665
  align-items: center;
2666
+ font-size: var(--font-size);
2667
+ color: var(--font-color);
1496
2668
  gap: var(--gap-lg);
1497
2669
  }
1498
2670
  .NavigationMenu_item {
1499
- color: var(--font-color);
1500
2671
  display: flex;
1501
2672
  align-items: center;
1502
- gap: var(--gap-md);
2673
+ gap: var(--gap);
1503
2674
  padding: var(--padding);
1504
2675
  border-radius: var(--border-radius);
2676
+ font-weight: 700;
1505
2677
  cursor: default;
1506
2678
  }
1507
2679
  .NavigationMenu_item:hover {
1508
2680
  background: var(--highlight-color);
1509
2681
  }
1510
- .NavigationMenu_nav .NavigationMenu_item > a {
2682
+ .NavigationMenu_nav .NavigationMenu_item > a,
2683
+ .NavigationMenu_nav .NavigationMenu_item > a:hover {
1511
2684
  color: var(--font-color);
2685
+ text-decoration: none;
1512
2686
  }
1513
2687
  .NavigationMenu_icon {
1514
2688
  color: var(--font-muted-color);
@@ -1521,14 +2695,6 @@
1521
2695
  right: 9px;
1522
2696
  }
1523
2697
 
1524
- /* src/components/Page.module.css */
1525
- .Page_page {
1526
- display: grid;
1527
- min-height: 100vh;
1528
- color: var(--font-color);
1529
- background: var(--background-color);
1530
- }
1531
-
1532
2698
  /* src/components/ProgressBar.module.css */
1533
2699
  .ProgressBar_progressbar {
1534
2700
  display: flex;
@@ -1564,7 +2730,6 @@
1564
2730
  fill: none;
1565
2731
  stroke-width: 8px;
1566
2732
  transform: rotate(-90deg);
1567
- font-size: var(--font-size-md);
1568
2733
  width: 96px;
1569
2734
  height: 96px;
1570
2735
  }
@@ -1575,6 +2740,8 @@
1575
2740
  stroke: var(--primary-color);
1576
2741
  }
1577
2742
  .ProgressCircle_value {
2743
+ font-size: var(--font-size);
2744
+ color: var(--font-color);
1578
2745
  font-weight: 700;
1579
2746
  position: absolute;
1580
2747
  top: 50%;
@@ -1587,6 +2754,7 @@
1587
2754
  display: flex;
1588
2755
  flex-direction: column;
1589
2756
  gap: var(--spacing-4);
2757
+ font-size: var(--font-size);
1590
2758
  color: var(--font-color);
1591
2759
  }
1592
2760
  .RadioGroup_radiogroup[data-orientation=vertical] {
@@ -1599,8 +2767,6 @@
1599
2767
  display: flex;
1600
2768
  align-items: center;
1601
2769
  gap: var(--spacing-3);
1602
- font-size: var(--font-size);
1603
- color: var(--font-color);
1604
2770
  forced-color-adjust: none;
1605
2771
  }
1606
2772
  .RadioGroup_radio:before {
@@ -1654,19 +2820,11 @@
1654
2820
  }
1655
2821
 
1656
2822
  /* src/components/Select.module.css */
1657
- .Select_select {
1658
- display: flex;
1659
- align-items: center;
1660
- color: var(--font-color);
1661
- background: var(--background-color);
1662
- box-shadow: var(--box-shadow);
1663
- min-width: 160px;
1664
- }
1665
2823
  .Select_button {
1666
2824
  display: flex;
1667
2825
  align-items: center;
1668
- color: var(--font-color);
1669
2826
  font-size: var(--font-size);
2827
+ color: var(--font-color);
1670
2828
  gap: var(--gap);
1671
2829
  border: var(--border);
1672
2830
  padding: var(--padding);
@@ -1688,6 +2846,7 @@
1688
2846
 
1689
2847
  /* src/components/Slider.module.css */
1690
2848
  .Slider_slider {
2849
+ font-size: var(--font-size);
1691
2850
  color: var(--font-color);
1692
2851
  }
1693
2852
  .Slider_header {
@@ -1778,6 +2937,8 @@
1778
2937
 
1779
2938
  /* src/components/StatusLight.module.css */
1780
2939
  .StatusLight_statuslight {
2940
+ font-size: var(--font-size);
2941
+ color: var(--font-color);
1781
2942
  display: inline-flex;
1782
2943
  align-items: center;
1783
2944
  gap: 12px;
@@ -1811,8 +2972,9 @@
1811
2972
  position: relative;
1812
2973
  display: flex;
1813
2974
  align-items: center;
1814
- gap: var(--gap);
2975
+ font-size: var(--font-size);
1815
2976
  color: var(--font-color);
2977
+ gap: var(--gap);
1816
2978
  --knob-size: 16px;
1817
2979
  --knob-border-size: 3px;
1818
2980
  }
@@ -1858,6 +3020,8 @@
1858
3020
 
1859
3021
  /* src/components/Tabs.module.css */
1860
3022
  .Tabs_tabs {
3023
+ font-size: var(--font-size);
3024
+ color: var(--font-color);
1861
3025
  position: relative;
1862
3026
  width: 100%;
1863
3027
  }
@@ -1900,6 +3064,7 @@
1900
3064
  min-width: 0;
1901
3065
  }
1902
3066
  .TextOverflow_overflow {
3067
+ display: block;
1903
3068
  text-overflow: ellipsis;
1904
3069
  overflow: hidden;
1905
3070
  white-space: nowrap;
@@ -2040,15 +3205,14 @@
2040
3205
 
2041
3206
  /* src/components/Toggle.module.css */
2042
3207
  .Toggle_toggle {
3208
+ font-size: var(--font-size);
3209
+ color: var(--font-color);
2043
3210
  display: flex;
2044
3211
  align-items: center;
2045
3212
  justify-content: center;
2046
3213
  white-space: nowrap;
2047
3214
  gap: var(--gap);
2048
- font-size: var(--font-size);
2049
- font-family: inherit;
2050
3215
  font-weight: 500;
2051
- color: var(--font-color);
2052
3216
  background: transparent;
2053
3217
  border: 1px solid transparent;
2054
3218
  border-radius: var(--border-radius);
@@ -2070,22 +3234,27 @@
2070
3234
 
2071
3235
  /* src/components/ToggleGroup.module.css */
2072
3236
  .ToggleGroup_group {
2073
- display: inline-flex;
3237
+ font-size: var(--font-size);
3238
+ color: var(--font-color);
2074
3239
  background-color: var(--background-color);
2075
3240
  box-shadow: var(--box-shadow);
2076
3241
  border: var(--border);
2077
3242
  border-radius: var(--border-radius);
2078
3243
  overflow: hidden;
2079
3244
  }
3245
+ .ToggleGroup_list {
3246
+ display: flex;
3247
+ flex-direction: row;
3248
+ align-items: center;
3249
+ }
2080
3250
  .ToggleGroup_item {
2081
- color: var(--font-color);
2082
3251
  background-color: var(--background-color);
2083
3252
  display: flex;
2084
3253
  align-items: center;
2085
3254
  justify-content: center;
2086
3255
  padding: var(--padding);
2087
- border: 0;
2088
3256
  cursor: pointer;
3257
+ outline: none;
2089
3258
  }
2090
3259
  .ToggleGroup_item:not(:first-child) {
2091
3260
  border-left: var(--border);
@@ -2093,20 +3262,17 @@
2093
3262
  .ToggleGroup_item:hover {
2094
3263
  background-color: var(--highlight-color);
2095
3264
  }
2096
- .ToggleGroup_item[data-state=on] {
3265
+ .ToggleGroup_item[data-selected] {
2097
3266
  font-weight: 700;
2098
3267
  background-color: var(--highlight-color);
2099
3268
  font-size-adjust: 0.5;
2100
3269
  }
2101
- .ToggleGroup_item:focus {
2102
- position: relative;
2103
- }
2104
3270
 
2105
3271
  /* src/components/Tooltip.module.css */
2106
3272
  .Tooltip_tooltip {
2107
- font-size: var(--font-size-sm);
2108
- background: rgba(0, 0, 0, 0.8);
3273
+ font-size: var(--font-size);
2109
3274
  color: var(--light-color);
3275
+ background: rgba(0, 0, 0, 0.8);
2110
3276
  forced-color-adjust: none;
2111
3277
  outline: none;
2112
3278
  padding: var(--padding);