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