@boostdev/design-system-components 0.1.12 → 0.1.13

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.
Files changed (10) hide show
  1. package/AGENTS.md +13 -1
  2. package/README.md +34 -4
  3. package/dist/client.cjs +46 -46
  4. package/dist/client.css +415 -410
  5. package/dist/client.js +46 -46
  6. package/dist/index.cjs +46 -46
  7. package/dist/index.css +415 -410
  8. package/dist/index.js +46 -46
  9. package/package.json +4 -2
  10. package/src/components/interaction/Dialog/Dialog.module.css +6 -0
package/dist/client.css CHANGED
@@ -1,22 +1,22 @@
1
1
  /* src/components/ui/Accordion/Accordion.module.css */
2
2
  @layer component {
3
- .bds0112Accordion-accordion {
3
+ .bds0113Accordion-accordion {
4
4
  display: flex;
5
5
  flex-direction: column;
6
6
  border: 1px solid var(--color_bg--subtle);
7
7
  border-radius: var(--border_radius--s);
8
8
  overflow: hidden;
9
9
  }
10
- .bds0112Accordion-item {
10
+ .bds0113Accordion-item {
11
11
  border-bottom: 1px solid var(--color_bg--subtle);
12
12
  }
13
- .bds0112Accordion-item:last-child {
13
+ .bds0113Accordion-item:last-child {
14
14
  border-bottom: none;
15
15
  }
16
- .bds0112Accordion-heading {
16
+ .bds0113Accordion-heading {
17
17
  margin: 0;
18
18
  }
19
- .bds0112Accordion-trigger {
19
+ .bds0113Accordion-trigger {
20
20
  all: unset;
21
21
  display: flex;
22
22
  align-items: center;
@@ -31,44 +31,44 @@
31
31
  transition: var(--animation_transition);
32
32
  box-sizing: border-box;
33
33
  }
34
- .bds0112Accordion-trigger:disabled {
34
+ .bds0113Accordion-trigger:disabled {
35
35
  opacity: 0.4;
36
36
  cursor: not-allowed;
37
37
  }
38
- .bds0112Accordion-trigger:focus-visible {
38
+ .bds0113Accordion-trigger:focus-visible {
39
39
  outline: var(--outline_default);
40
40
  outline-offset: calc(var(--outline_offset) * -1);
41
41
  border-radius: var(--border_radius--xs);
42
42
  }
43
43
  @media (hover: hover) and (pointer: fine) {
44
- .bds0112Accordion-trigger:not(:disabled):hover {
44
+ .bds0113Accordion-trigger:not(:disabled):hover {
45
45
  background-color: var(--color_bg--subtle);
46
46
  }
47
47
  }
48
- .bds0112Accordion-triggerLabel {
48
+ .bds0113Accordion-triggerLabel {
49
49
  flex: 1;
50
50
  text-align: start;
51
51
  }
52
- .bds0112Accordion-chevron {
52
+ .bds0113Accordion-chevron {
53
53
  width: 1.25rem;
54
54
  height: 1.25rem;
55
55
  flex-shrink: 0;
56
56
  transition: transform var(--animation_transition-duration) var(--animation_easing);
57
57
  }
58
- .bds0112Accordion-item.bds0112Accordion---open .bds0112Accordion-chevron {
58
+ .bds0113Accordion-item.bds0113Accordion---open .bds0113Accordion-chevron {
59
59
  transform: rotate(180deg);
60
60
  }
61
- .bds0112Accordion-panel {
61
+ .bds0113Accordion-panel {
62
62
  overflow: hidden;
63
63
  }
64
- .bds0112Accordion-panelContent {
64
+ .bds0113Accordion-panelContent {
65
65
  padding: 0 var(--space_m) var(--space_m);
66
66
  color: var(--color_on-bg);
67
67
  font-size: var(--font_size--body);
68
68
  line-height: var(--font_line-height--body);
69
69
  }
70
70
  @media (prefers-reduced-motion: reduce) {
71
- .bds0112Accordion-chevron {
71
+ .bds0113Accordion-chevron {
72
72
  transition: none;
73
73
  }
74
74
  }
@@ -76,7 +76,7 @@
76
76
 
77
77
  /* src/components/ui/Alert/Alert.module.css */
78
78
  @layer component {
79
- .bds0112Alert-alert {
79
+ .bds0113Alert-alert {
80
80
  --alert_bg: var(--color_blue--subtle);
81
81
  --alert_text: var(--color_on-blue--subtle);
82
82
  --alert_border: var(--color_blue);
@@ -91,43 +91,43 @@
91
91
  font-size: var(--font_size--body);
92
92
  line-height: var(--font_line-height--body);
93
93
  }
94
- .bds0112Alert---variant_info {
94
+ .bds0113Alert---variant_info {
95
95
  --alert_bg: var(--color_blue--subtle);
96
96
  --alert_text: var(--color_on-blue--subtle);
97
97
  --alert_border: var(--color_blue);
98
98
  }
99
- .bds0112Alert---variant_success {
99
+ .bds0113Alert---variant_success {
100
100
  --alert_bg: var(--color_success--subtle);
101
101
  --alert_text: var(--color_on-success--subtle);
102
102
  --alert_border: var(--color_success);
103
103
  }
104
- .bds0112Alert---variant_warning {
104
+ .bds0113Alert---variant_warning {
105
105
  --alert_bg: var(--color_orange--subtle);
106
106
  --alert_text: var(--color_on-orange--subtle);
107
107
  --alert_border: var(--color_warning);
108
108
  }
109
- .bds0112Alert---variant_error {
109
+ .bds0113Alert---variant_error {
110
110
  --alert_bg: rgb(from var(--color_error) r g b / 12%);
111
111
  --alert_text: var(--color_on-bg);
112
112
  --alert_border: var(--color_error);
113
113
  }
114
- .bds0112Alert-icon {
114
+ .bds0113Alert-icon {
115
115
  display: flex;
116
116
  align-items: center;
117
117
  flex-shrink: 0;
118
118
  margin-block-start: 0.1em;
119
119
  }
120
- .bds0112Alert-content {
120
+ .bds0113Alert-content {
121
121
  flex: 1;
122
122
  display: flex;
123
123
  flex-direction: column;
124
124
  gap: var(--space_xxs);
125
125
  }
126
- .bds0112Alert-title {
126
+ .bds0113Alert-title {
127
127
  font-weight: var(--font_weight--semibold);
128
128
  font-size: var(--font_size--body);
129
129
  }
130
- .bds0112Alert-dismiss {
130
+ .bds0113Alert-dismiss {
131
131
  all: unset;
132
132
  display: flex;
133
133
  align-items: center;
@@ -139,16 +139,16 @@
139
139
  border: 1px solid currentcolor;
140
140
  border-radius: 50%;
141
141
  }
142
- .bds0112Alert-dismiss svg {
142
+ .bds0113Alert-dismiss svg {
143
143
  width: 1rem;
144
144
  height: 1rem;
145
145
  }
146
- .bds0112Alert-dismiss:focus-visible {
146
+ .bds0113Alert-dismiss:focus-visible {
147
147
  outline: var(--outline_default);
148
148
  outline-offset: var(--outline_offset);
149
149
  }
150
150
  @media (hover: hover) and (pointer: fine) {
151
- .bds0112Alert-dismiss:hover {
151
+ .bds0113Alert-dismiss:hover {
152
152
  opacity: 0.7;
153
153
  }
154
154
  }
@@ -156,7 +156,7 @@
156
156
 
157
157
  /* src/components/ui/Avatar/Avatar.module.css */
158
158
  @layer component {
159
- .bds0112Avatar-avatar {
159
+ .bds0113Avatar-avatar {
160
160
  --avatar_size: 3em;
161
161
  --avatar_bg: var(--color_blue);
162
162
  --avatar_text: var(--color_on-blue);
@@ -169,42 +169,42 @@
169
169
  overflow: hidden;
170
170
  flex-shrink: 0;
171
171
  }
172
- .bds0112Avatar-avatar.bds0112Avatar---fallback {
172
+ .bds0113Avatar-avatar.bds0113Avatar---fallback {
173
173
  background-color: var(--avatar_bg);
174
174
  color: var(--avatar_text);
175
175
  font-weight: var(--font_weight--semibold);
176
176
  }
177
- .bds0112Avatar-avatar.bds0112Avatar---size_small {
177
+ .bds0113Avatar-avatar.bds0113Avatar---size_small {
178
178
  --avatar_size: 2em;
179
179
  }
180
- .bds0112Avatar-avatar.bds0112Avatar---size_medium {
180
+ .bds0113Avatar-avatar.bds0113Avatar---size_medium {
181
181
  --avatar_size: 3em;
182
182
  }
183
- .bds0112Avatar-avatar.bds0112Avatar---size_large {
183
+ .bds0113Avatar-avatar.bds0113Avatar---size_large {
184
184
  --avatar_size: 4.5em;
185
185
  }
186
- .bds0112Avatar-image {
186
+ .bds0113Avatar-image {
187
187
  width: 100%;
188
188
  height: 100%;
189
189
  object-fit: cover;
190
190
  display: block;
191
191
  }
192
- .bds0112Avatar-initials {
192
+ .bds0113Avatar-initials {
193
193
  line-height: 1;
194
194
  user-select: none;
195
195
  font-size: var(--font_size--body);
196
196
  }
197
- .bds0112Avatar-avatar.bds0112Avatar---size_small .bds0112Avatar-initials {
197
+ .bds0113Avatar-avatar.bds0113Avatar---size_small .bds0113Avatar-initials {
198
198
  font-size: var(--font_size--body--s);
199
199
  }
200
- .bds0112Avatar-avatar.bds0112Avatar---size_large .bds0112Avatar-initials {
200
+ .bds0113Avatar-avatar.bds0113Avatar---size_large .bds0113Avatar-initials {
201
201
  font-size: var(--font_size--heading-3);
202
202
  }
203
203
  }
204
204
 
205
205
  /* src/components/ui/Badge/Badge.module.css */
206
206
  @layer component {
207
- .bds0112Badge-badge {
207
+ .bds0113Badge-badge {
208
208
  --badge_bg: var(--color_blue);
209
209
  --badge_text: var(--color_on-blue);
210
210
  --badge_radius: 2em;
@@ -221,23 +221,23 @@
221
221
  background-color: var(--badge_bg);
222
222
  color: var(--badge_text);
223
223
  }
224
- .bds0112Badge---variant_primary {
224
+ .bds0113Badge---variant_primary {
225
225
  --badge_bg: var(--color_interactive);
226
226
  --badge_text: var(--color_on-interactive);
227
227
  }
228
- .bds0112Badge---variant_secondary {
228
+ .bds0113Badge---variant_secondary {
229
229
  --badge_bg: var(--color_bg);
230
230
  --badge_text: var(--color_on-bg);
231
231
  }
232
- .bds0112Badge---variant_success {
232
+ .bds0113Badge---variant_success {
233
233
  --badge_bg: var(--color_success);
234
234
  --badge_text: var(--color_on-success);
235
235
  }
236
- .bds0112Badge---variant_error {
236
+ .bds0113Badge---variant_error {
237
237
  --badge_bg: var(--color_error);
238
238
  --badge_text: var(--color_on-error);
239
239
  }
240
- .bds0112Badge---variant_warning {
240
+ .bds0113Badge---variant_warning {
241
241
  --badge_bg: var(--color_warning);
242
242
  --badge_text: var(--color_on-warning);
243
243
  }
@@ -245,10 +245,10 @@
245
245
 
246
246
  /* src/components/ui/Breadcrumb/Breadcrumb.module.css */
247
247
  @layer component {
248
- .bds0112Breadcrumb-breadcrumb {
248
+ .bds0113Breadcrumb-breadcrumb {
249
249
  font-size: var(--font_size--body--s);
250
250
  }
251
- .bds0112Breadcrumb-list {
251
+ .bds0113Breadcrumb-list {
252
252
  display: flex;
253
253
  flex-wrap: wrap;
254
254
  align-items: center;
@@ -257,32 +257,32 @@
257
257
  margin: 0;
258
258
  padding: 0;
259
259
  }
260
- .bds0112Breadcrumb-item {
260
+ .bds0113Breadcrumb-item {
261
261
  display: flex;
262
262
  align-items: center;
263
263
  gap: var(--space_xxs);
264
264
  }
265
- .bds0112Breadcrumb-link {
265
+ .bds0113Breadcrumb-link {
266
266
  color: var(--color_interactive);
267
267
  text-decoration: none;
268
268
  transition: var(--animation_transition);
269
269
  }
270
- .bds0112Breadcrumb-link:focus-visible {
270
+ .bds0113Breadcrumb-link:focus-visible {
271
271
  outline: var(--outline_default);
272
272
  outline-offset: var(--outline_offset);
273
273
  border-radius: var(--border_radius--xs);
274
274
  }
275
275
  @media (hover: hover) and (pointer: fine) {
276
- .bds0112Breadcrumb-link:hover {
276
+ .bds0113Breadcrumb-link:hover {
277
277
  text-decoration: underline;
278
278
  text-underline-offset: 0.2em;
279
279
  }
280
280
  }
281
- .bds0112Breadcrumb-separator {
281
+ .bds0113Breadcrumb-separator {
282
282
  color: var(--color_on-bg--subtle);
283
283
  user-select: none;
284
284
  }
285
- .bds0112Breadcrumb-current {
285
+ .bds0113Breadcrumb-current {
286
286
  color: var(--color_on-bg--subtle);
287
287
  font-weight: var(--font_weight--semibold);
288
288
  }
@@ -290,7 +290,7 @@
290
290
 
291
291
  /* src/components/ui/Calendar/Calendar.module.css */
292
292
  @layer component {
293
- .bds0112Calendar-calendar {
293
+ .bds0113Calendar-calendar {
294
294
  display: inline-flex;
295
295
  flex-direction: column;
296
296
  gap: var(--space_s);
@@ -301,17 +301,17 @@
301
301
  box-shadow: var(--shadow_s);
302
302
  width: 20rem;
303
303
  }
304
- .bds0112Calendar-header {
304
+ .bds0113Calendar-header {
305
305
  display: flex;
306
306
  align-items: center;
307
307
  justify-content: space-between;
308
308
  }
309
- .bds0112Calendar-monthYear {
309
+ .bds0113Calendar-monthYear {
310
310
  font-size: var(--font_size--body);
311
311
  font-weight: var(--font_weight--semibold);
312
312
  color: var(--color_on-bg);
313
313
  }
314
- .bds0112Calendar-navBtn {
314
+ .bds0113Calendar-navBtn {
315
315
  all: unset;
316
316
  display: flex;
317
317
  align-items: center;
@@ -323,35 +323,35 @@
323
323
  color: var(--color_on-bg);
324
324
  transition: var(--animation_transition);
325
325
  }
326
- .bds0112Calendar-navBtn svg {
326
+ .bds0113Calendar-navBtn svg {
327
327
  width: 1rem;
328
328
  height: 1rem;
329
329
  }
330
- .bds0112Calendar-navBtn:focus-visible {
330
+ .bds0113Calendar-navBtn:focus-visible {
331
331
  outline: var(--outline_default);
332
332
  outline-offset: var(--outline_offset);
333
333
  }
334
334
  @media (hover: hover) and (pointer: fine) {
335
- .bds0112Calendar-navBtn:hover {
335
+ .bds0113Calendar-navBtn:hover {
336
336
  background-color: var(--color_bg--subtle);
337
337
  }
338
338
  }
339
- .bds0112Calendar-grid {
339
+ .bds0113Calendar-grid {
340
340
  border-collapse: collapse;
341
341
  width: 100%;
342
342
  table-layout: fixed;
343
343
  }
344
- .bds0112Calendar-weekday {
344
+ .bds0113Calendar-weekday {
345
345
  font-size: var(--font_size--body--s);
346
346
  font-weight: var(--font_weight--semibold);
347
347
  color: var(--color_on-bg--muted);
348
348
  text-align: center;
349
349
  padding-block-end: var(--space_xs);
350
350
  }
351
- .bds0112Calendar-empty {
351
+ .bds0113Calendar-empty {
352
352
  padding: 0;
353
353
  }
354
- .bds0112Calendar-day {
354
+ .bds0113Calendar-day {
355
355
  all: unset;
356
356
  display: flex;
357
357
  align-items: center;
@@ -365,30 +365,30 @@
365
365
  transition: var(--animation_transition);
366
366
  box-sizing: border-box;
367
367
  }
368
- .bds0112Calendar-day:focus-visible {
368
+ .bds0113Calendar-day:focus-visible {
369
369
  outline: var(--outline_default);
370
370
  outline-offset: var(--outline_offset);
371
371
  }
372
372
  @media (hover: hover) and (pointer: fine) {
373
- .bds0112Calendar-day:not(.bds0112Calendar-disabled, .bds0112Calendar-selected):hover {
373
+ .bds0113Calendar-day:not(.bds0113Calendar-disabled, .bds0113Calendar-selected):hover {
374
374
  background-color: var(--color_bg--subtle);
375
375
  }
376
376
  }
377
- .bds0112Calendar-today {
377
+ .bds0113Calendar-today {
378
378
  border: 2px solid var(--color_interactive);
379
379
  font-weight: var(--font_weight--semibold);
380
380
  }
381
- .bds0112Calendar-selected {
381
+ .bds0113Calendar-selected {
382
382
  background-color: var(--color_interactive);
383
383
  color: var(--color_on-interactive);
384
384
  font-weight: var(--font_weight--semibold);
385
385
  }
386
- .bds0112Calendar-disabled {
386
+ .bds0113Calendar-disabled {
387
387
  opacity: 0.35;
388
388
  cursor: not-allowed;
389
389
  }
390
390
  @media (prefers-reduced-motion: reduce) {
391
- .bds0112Calendar-day {
391
+ .bds0113Calendar-day {
392
392
  transition: none;
393
393
  }
394
394
  }
@@ -396,13 +396,13 @@
396
396
 
397
397
  /* src/components/ui/Carousel/Carousel.module.css */
398
398
  @layer component {
399
- .bds0112Carousel-carousel {
399
+ .bds0113Carousel-carousel {
400
400
  position: relative;
401
401
  display: flex;
402
402
  align-items: center;
403
403
  gap: var(--space_xs);
404
404
  }
405
- .bds0112Carousel-track {
405
+ .bds0113Carousel-track {
406
406
  display: flex;
407
407
  gap: var(--space_m);
408
408
  overflow-x: auto;
@@ -411,14 +411,14 @@
411
411
  flex: 1;
412
412
  scroll-behavior: smooth;
413
413
  }
414
- .bds0112Carousel-track::-webkit-scrollbar {
414
+ .bds0113Carousel-track::-webkit-scrollbar {
415
415
  display: none;
416
416
  }
417
- .bds0112Carousel-slide {
417
+ .bds0113Carousel-slide {
418
418
  scroll-snap-align: start;
419
419
  flex-shrink: 0;
420
420
  }
421
- .bds0112Carousel-navBtn {
421
+ .bds0113Carousel-navBtn {
422
422
  all: unset;
423
423
  display: flex;
424
424
  align-items: center;
@@ -434,21 +434,21 @@
434
434
  transition: var(--animation_transition);
435
435
  box-shadow: var(--shadow_s);
436
436
  }
437
- .bds0112Carousel-navBtn svg {
437
+ .bds0113Carousel-navBtn svg {
438
438
  width: 1.25rem;
439
439
  height: 1.25rem;
440
440
  }
441
- .bds0112Carousel-navBtn:focus-visible {
441
+ .bds0113Carousel-navBtn:focus-visible {
442
442
  outline: var(--outline_default);
443
443
  outline-offset: var(--outline_offset);
444
444
  }
445
445
  @media (hover: hover) and (pointer: fine) {
446
- .bds0112Carousel-navBtn:hover {
446
+ .bds0113Carousel-navBtn:hover {
447
447
  background-color: var(--color_bg--subtle);
448
448
  }
449
449
  }
450
450
  @media (prefers-reduced-motion: reduce) {
451
- .bds0112Carousel-track {
451
+ .bds0113Carousel-track {
452
452
  scroll-behavior: auto;
453
453
  }
454
454
  }
@@ -456,7 +456,7 @@
456
456
 
457
457
  /* src/components/ui/DescriptionList/DescriptionList.module.css */
458
458
  @layer component {
459
- .bds0112DescriptionList-list {
459
+ .bds0113DescriptionList-list {
460
460
  display: flex;
461
461
  flex-direction: column;
462
462
  gap: var(--space_s);
@@ -465,36 +465,36 @@
465
465
  font-size: var(--font_size--body);
466
466
  color: var(--color_on-bg);
467
467
  }
468
- .bds0112DescriptionList-group {
468
+ .bds0113DescriptionList-group {
469
469
  display: flex;
470
470
  flex-direction: column;
471
471
  gap: var(--space_xxs);
472
472
  }
473
- .bds0112DescriptionList-term {
473
+ .bds0113DescriptionList-term {
474
474
  font-weight: var(--font_weight--semibold);
475
475
  color: var(--color_on-bg);
476
476
  }
477
- .bds0112DescriptionList-details {
477
+ .bds0113DescriptionList-details {
478
478
  margin: 0;
479
479
  color: var(--color_on-bg--muted);
480
480
  }
481
- .bds0112DescriptionList---layout_inline .bds0112DescriptionList-group {
481
+ .bds0113DescriptionList---layout_inline .bds0113DescriptionList-group {
482
482
  display: grid;
483
483
  grid-template-columns: minmax(8rem, 1fr) 2fr;
484
484
  gap: var(--space_xs);
485
485
  align-items: baseline;
486
486
  }
487
- .bds0112DescriptionList---layout_inline .bds0112DescriptionList-term {
487
+ .bds0113DescriptionList---layout_inline .bds0113DescriptionList-term {
488
488
  grid-column: 1;
489
489
  }
490
- .bds0112DescriptionList---layout_inline .bds0112DescriptionList-details {
490
+ .bds0113DescriptionList---layout_inline .bds0113DescriptionList-details {
491
491
  grid-column: 2;
492
492
  }
493
493
  }
494
494
 
495
495
  /* src/components/ui/Link/Link.module.css */
496
496
  @layer component {
497
- .bds0112Link-link {
497
+ .bds0113Link-link {
498
498
  --link_color: var(--color_interactive);
499
499
  --link_color-hover: var(--color_blue--strong);
500
500
  color: var(--link_color);
@@ -503,25 +503,25 @@
503
503
  transition: var(--animation_transition);
504
504
  cursor: pointer;
505
505
  }
506
- .bds0112Link-link:focus-visible {
506
+ .bds0113Link-link:focus-visible {
507
507
  outline: var(--outline_default);
508
508
  outline-offset: var(--outline_offset);
509
509
  border-radius: var(--border_radius--xs);
510
510
  }
511
511
  @media (hover: hover) and (pointer: fine) {
512
- .bds0112Link-link:hover {
512
+ .bds0113Link-link:hover {
513
513
  --link_color: var(--link_color-hover);
514
514
  }
515
515
  }
516
- .bds0112Link---variant_default {
516
+ .bds0113Link---variant_default {
517
517
  --link_color: var(--color_interactive);
518
518
  --link_color-hover: var(--color_blue--strong);
519
519
  }
520
- .bds0112Link---variant_subtle {
520
+ .bds0113Link---variant_subtle {
521
521
  --link_color: var(--color_on-bg);
522
522
  --link_color-hover: var(--color_interactive);
523
523
  }
524
- .bds0112Link---variant_standalone {
524
+ .bds0113Link---variant_standalone {
525
525
  --link_color: var(--color_interactive);
526
526
  --link_color-hover: var(--color_blue--strong);
527
527
  display: inline-flex;
@@ -531,12 +531,12 @@
531
531
  text-decoration: none;
532
532
  }
533
533
  @media (hover: hover) and (pointer: fine) {
534
- .bds0112Link---variant_standalone:hover {
534
+ .bds0113Link---variant_standalone:hover {
535
535
  text-decoration: underline;
536
536
  text-underline-offset: 0.2em;
537
537
  }
538
538
  }
539
- .bds0112Link-externalLabel {
539
+ .bds0113Link-externalLabel {
540
540
  position: absolute;
541
541
  width: 1px;
542
542
  height: 1px;
@@ -551,12 +551,12 @@
551
551
 
552
552
  /* src/components/ui/Loading/Loading.module.css */
553
553
  @layer component {
554
- .bds0112Loading-loading {
554
+ .bds0113Loading-loading {
555
555
  display: flex;
556
556
  justify-content: center;
557
557
  align-items: center;
558
558
  }
559
- .bds0112Loading-spinner {
559
+ .bds0113Loading-spinner {
560
560
  width: 2.5em;
561
561
  height: 2.5em;
562
562
  border: 4px solid var(--color_bg);
@@ -564,12 +564,12 @@
564
564
  border-radius: 50%;
565
565
  animation: spin 1s linear infinite;
566
566
  }
567
- .bds0112Loading---size_small .bds0112Loading-spinner {
567
+ .bds0113Loading---size_small .bds0113Loading-spinner {
568
568
  width: 1.5em;
569
569
  height: 1.5em;
570
570
  border-width: 2px;
571
571
  }
572
- .bds0112Loading---size_large .bds0112Loading-spinner {
572
+ .bds0113Loading---size_large .bds0113Loading-spinner {
573
573
  width: 4em;
574
574
  height: 4em;
575
575
  border-width: 6px;
@@ -586,7 +586,7 @@
586
586
 
587
587
  /* src/components/ui/NotificationBanner/NotificationBanner.module.css */
588
588
  @layer component {
589
- .bds0112NotificationBanner-banner {
589
+ .bds0113NotificationBanner-banner {
590
590
  --banner_bg: var(--color_blue--subtle);
591
591
  --banner_text: var(--color_on-blue--subtle);
592
592
  --banner_border: var(--color_blue);
@@ -601,33 +601,33 @@
601
601
  line-height: var(--font_line-height--body);
602
602
  width: 100%;
603
603
  }
604
- .bds0112NotificationBanner---variant_info {
604
+ .bds0113NotificationBanner---variant_info {
605
605
  --banner_bg: var(--color_blue--subtle);
606
606
  --banner_text: var(--color_on-blue--subtle);
607
607
  --banner_border: var(--color_blue);
608
608
  }
609
- .bds0112NotificationBanner---variant_success {
609
+ .bds0113NotificationBanner---variant_success {
610
610
  --banner_bg: var(--color_success--subtle);
611
611
  --banner_text: var(--color_on-success--subtle);
612
612
  --banner_border: var(--color_success);
613
613
  }
614
- .bds0112NotificationBanner---variant_warning {
614
+ .bds0113NotificationBanner---variant_warning {
615
615
  --banner_bg: var(--color_orange--subtle);
616
616
  --banner_text: var(--color_on-orange--subtle);
617
617
  --banner_border: var(--color_warning);
618
618
  }
619
- .bds0112NotificationBanner---variant_error {
619
+ .bds0113NotificationBanner---variant_error {
620
620
  --banner_bg: rgb(from var(--color_error) r g b / 12%);
621
621
  --banner_text: var(--color_on-bg);
622
622
  --banner_border: var(--color_error);
623
623
  }
624
- .bds0112NotificationBanner-content {
624
+ .bds0113NotificationBanner-content {
625
625
  flex: 1;
626
626
  }
627
- .bds0112NotificationBanner-action {
627
+ .bds0113NotificationBanner-action {
628
628
  flex-shrink: 0;
629
629
  }
630
- .bds0112NotificationBanner-dismiss {
630
+ .bds0113NotificationBanner-dismiss {
631
631
  all: unset;
632
632
  display: flex;
633
633
  align-items: center;
@@ -639,16 +639,16 @@
639
639
  border: 1px solid currentcolor;
640
640
  transition: var(--animation_transition);
641
641
  }
642
- .bds0112NotificationBanner-dismiss svg {
642
+ .bds0113NotificationBanner-dismiss svg {
643
643
  width: 1rem;
644
644
  height: 1rem;
645
645
  }
646
- .bds0112NotificationBanner-dismiss:focus-visible {
646
+ .bds0113NotificationBanner-dismiss:focus-visible {
647
647
  outline: var(--outline_default);
648
648
  outline-offset: var(--outline_offset);
649
649
  }
650
650
  @media (hover: hover) and (pointer: fine) {
651
- .bds0112NotificationBanner-dismiss:hover {
651
+ .bds0113NotificationBanner-dismiss:hover {
652
652
  opacity: 0.7;
653
653
  }
654
654
  }
@@ -656,11 +656,11 @@
656
656
 
657
657
  /* src/components/ui/Pagination/Pagination.module.css */
658
658
  @layer component {
659
- .bds0112Pagination-pagination {
659
+ .bds0113Pagination-pagination {
660
660
  display: flex;
661
661
  justify-content: center;
662
662
  }
663
- .bds0112Pagination-list {
663
+ .bds0113Pagination-list {
664
664
  display: flex;
665
665
  align-items: center;
666
666
  gap: var(--space_xxs);
@@ -668,7 +668,7 @@
668
668
  margin: 0;
669
669
  padding: 0;
670
670
  }
671
- .bds0112Pagination-button {
671
+ .bds0113Pagination-button {
672
672
  --btn_bg: transparent;
673
673
  --btn_color: var(--color_on-bg);
674
674
  --btn_border: var(--color_bg--subtle);
@@ -690,30 +690,30 @@
690
690
  transition: var(--animation_transition);
691
691
  box-sizing: border-box;
692
692
  }
693
- .bds0112Pagination-button:disabled {
693
+ .bds0113Pagination-button:disabled {
694
694
  opacity: 0.4;
695
695
  cursor: not-allowed;
696
696
  }
697
- .bds0112Pagination-button:focus-visible {
697
+ .bds0113Pagination-button:focus-visible {
698
698
  outline: var(--outline_default);
699
699
  outline-offset: var(--outline_offset);
700
700
  }
701
701
  @media (hover: hover) and (pointer: fine) {
702
- .bds0112Pagination-button:not(:disabled, .bds0112Pagination---active):hover {
702
+ .bds0113Pagination-button:not(:disabled, .bds0113Pagination---active):hover {
703
703
  --btn_bg: var(--color_bg--subtle);
704
704
  --btn_color: var(--color_interactive);
705
705
  }
706
706
  }
707
- .bds0112Pagination-button.bds0112Pagination---active {
707
+ .bds0113Pagination-button.bds0113Pagination---active {
708
708
  --btn_bg: var(--color_interactive);
709
709
  --btn_color: var(--color_on-interactive);
710
710
  --btn_border: var(--color_interactive);
711
711
  }
712
- .bds0112Pagination-button.bds0112Pagination---nav svg {
712
+ .bds0113Pagination-button.bds0113Pagination---nav svg {
713
713
  width: 1rem;
714
714
  height: 1rem;
715
715
  }
716
- .bds0112Pagination-ellipsis {
716
+ .bds0113Pagination-ellipsis {
717
717
  display: inline-flex;
718
718
  align-items: center;
719
719
  justify-content: center;
@@ -727,26 +727,26 @@
727
727
 
728
728
  /* src/components/ui/Progress/Progress.module.css */
729
729
  @layer component {
730
- .bds0112Progress-container {
730
+ .bds0113Progress-container {
731
731
  display: flex;
732
732
  flex-direction: column;
733
733
  gap: var(--space_xxs);
734
734
  width: 100%;
735
735
  }
736
- .bds0112Progress-labelRow {
736
+ .bds0113Progress-labelRow {
737
737
  display: flex;
738
738
  justify-content: space-between;
739
739
  align-items: baseline;
740
740
  font-size: var(--font_size--body--s);
741
741
  color: var(--color_on-bg);
742
742
  }
743
- .bds0112Progress-label {
743
+ .bds0113Progress-label {
744
744
  font-weight: var(--font_weight--semibold);
745
745
  }
746
- .bds0112Progress-value {
746
+ .bds0113Progress-value {
747
747
  font-variant-numeric: tabular-nums;
748
748
  }
749
- .bds0112Progress-track {
749
+ .bds0113Progress-track {
750
750
  --progress_height: var(--space_xs);
751
751
  width: 100%;
752
752
  height: var(--progress_height);
@@ -754,23 +754,23 @@
754
754
  border-radius: 999px;
755
755
  overflow: hidden;
756
756
  }
757
- .bds0112Progress-track.bds0112Progress---size_small {
757
+ .bds0113Progress-track.bds0113Progress---size_small {
758
758
  --progress_height: var(--space_xxs);
759
759
  }
760
- .bds0112Progress-track.bds0112Progress---size_medium {
760
+ .bds0113Progress-track.bds0113Progress---size_medium {
761
761
  --progress_height: var(--space_xs);
762
762
  }
763
- .bds0112Progress-track.bds0112Progress---size_large {
763
+ .bds0113Progress-track.bds0113Progress---size_large {
764
764
  --progress_height: var(--space_s);
765
765
  }
766
- .bds0112Progress-fill {
766
+ .bds0113Progress-fill {
767
767
  height: 100%;
768
768
  background-color: var(--progress_color-active, var(--color_active));
769
769
  border-radius: 999px;
770
770
  transition: width var(--animation_transition-duration) var(--animation_easing);
771
771
  }
772
772
  @media (prefers-reduced-motion: reduce) {
773
- .bds0112Progress-fill {
773
+ .bds0113Progress-fill {
774
774
  transition: none;
775
775
  }
776
776
  }
@@ -778,23 +778,23 @@
778
778
 
779
779
  /* src/components/ui/ProgressCircle/ProgressCircle.module.css */
780
780
  @layer component {
781
- .bds0112ProgressCircle-wrapper {
781
+ .bds0113ProgressCircle-wrapper {
782
782
  position: relative;
783
783
  display: inline-flex;
784
784
  align-items: center;
785
785
  justify-content: center;
786
786
  }
787
- .bds0112ProgressCircle-svg {
787
+ .bds0113ProgressCircle-svg {
788
788
  display: block;
789
789
  }
790
- .bds0112ProgressCircle-track {
790
+ .bds0113ProgressCircle-track {
791
791
  stroke: var(--color_bg--subtle);
792
792
  }
793
- .bds0112ProgressCircle-fill {
793
+ .bds0113ProgressCircle-fill {
794
794
  stroke: var(--progressCircle_color-active, var(--color_active));
795
795
  transition: stroke-dashoffset var(--animation_transition-duration) var(--animation_easing);
796
796
  }
797
- .bds0112ProgressCircle-value {
797
+ .bds0113ProgressCircle-value {
798
798
  position: absolute;
799
799
  font-size: var(--font_size--body--s);
800
800
  font-weight: var(--font_weight--semibold);
@@ -802,17 +802,17 @@
802
802
  color: var(--color_on-bg);
803
803
  line-height: 1;
804
804
  }
805
- .bds0112ProgressCircle---size_small .bds0112ProgressCircle-value {
805
+ .bds0113ProgressCircle---size_small .bds0113ProgressCircle-value {
806
806
  font-size: 0.5rem;
807
807
  }
808
- .bds0112ProgressCircle---size_medium .bds0112ProgressCircle-value {
808
+ .bds0113ProgressCircle---size_medium .bds0113ProgressCircle-value {
809
809
  font-size: var(--font_size--body--s);
810
810
  }
811
- .bds0112ProgressCircle---size_large .bds0112ProgressCircle-value {
811
+ .bds0113ProgressCircle---size_large .bds0113ProgressCircle-value {
812
812
  font-size: var(--font_size--body);
813
813
  }
814
814
  @media (prefers-reduced-motion: reduce) {
815
- .bds0112ProgressCircle-fill {
815
+ .bds0113ProgressCircle-fill {
816
816
  transition: none;
817
817
  }
818
818
  }
@@ -820,16 +820,16 @@
820
820
 
821
821
  /* src/components/ui/Separator/Separator.module.css */
822
822
  @layer component {
823
- .bds0112Separator-separator {
823
+ .bds0113Separator-separator {
824
824
  border: none;
825
825
  background-color: var(--separator_color, var(--color_on-bg));
826
826
  }
827
- .bds0112Separator-separator.bds0112Separator---horizontal {
827
+ .bds0113Separator-separator.bds0113Separator---horizontal {
828
828
  display: block;
829
829
  width: 100%;
830
830
  height: var(--separator_thickness, 1px);
831
831
  }
832
- .bds0112Separator-separator.bds0112Separator---vertical {
832
+ .bds0113Separator-separator.bds0113Separator---vertical {
833
833
  display: inline-block;
834
834
  width: var(--separator_thickness, 1px);
835
835
  align-self: stretch;
@@ -838,7 +838,7 @@
838
838
 
839
839
  /* src/components/ui/Skeleton/Skeleton.module.css */
840
840
  @layer component {
841
- .bds0112Skeleton-skeleton {
841
+ .bds0113Skeleton-skeleton {
842
842
  background:
843
843
  linear-gradient(
844
844
  90deg,
@@ -862,7 +862,7 @@
862
862
 
863
863
  /* src/components/ui/SkipLink/SkipLink.module.css */
864
864
  @layer component {
865
- .bds0112SkipLink-skipLink {
865
+ .bds0113SkipLink-skipLink {
866
866
  position: absolute;
867
867
  inset-block-start: var(--space_s);
868
868
  inset-inline-start: var(--space_s);
@@ -878,13 +878,13 @@
878
878
  transform: translateY(-200%);
879
879
  transition: transform var(--animation_transition-duration) var(--animation_easing);
880
880
  }
881
- .bds0112SkipLink-skipLink:focus-visible {
881
+ .bds0113SkipLink-skipLink:focus-visible {
882
882
  transform: translateY(0);
883
883
  outline: var(--outline_default);
884
884
  outline-offset: var(--outline_offset);
885
885
  }
886
886
  @media (prefers-reduced-motion: reduce) {
887
- .bds0112SkipLink-skipLink {
887
+ .bds0113SkipLink-skipLink {
888
888
  transition: none;
889
889
  }
890
890
  }
@@ -892,29 +892,29 @@
892
892
 
893
893
  /* src/components/ui/Table/Table.module.css */
894
894
  @layer component {
895
- .bds0112Table-wrapper {
895
+ .bds0113Table-wrapper {
896
896
  width: 100%;
897
897
  overflow-x: auto;
898
898
  border-radius: var(--border_radius--s);
899
899
  border: 1px solid var(--color_bg--subtle);
900
900
  }
901
- .bds0112Table-table {
901
+ .bds0113Table-table {
902
902
  width: 100%;
903
903
  border-collapse: collapse;
904
904
  font-size: var(--font_size--body);
905
905
  font-family: var(--font_family--body);
906
906
  }
907
- .bds0112Table-caption {
907
+ .bds0113Table-caption {
908
908
  caption-side: top;
909
909
  text-align: start;
910
910
  padding: var(--space_s) var(--space_m);
911
911
  font-weight: var(--font_weight--semibold);
912
912
  color: var(--color_on-bg);
913
913
  }
914
- .bds0112Table-thead {
914
+ .bds0113Table-thead {
915
915
  background-color: var(--color_bg--subtle);
916
916
  }
917
- .bds0112Table-th {
917
+ .bds0113Table-th {
918
918
  padding: var(--space_s) var(--space_m);
919
919
  text-align: start;
920
920
  font-weight: var(--font_weight--semibold);
@@ -923,10 +923,10 @@
923
923
  white-space: nowrap;
924
924
  border-bottom: 1px solid var(--color_bg--subtle);
925
925
  }
926
- .bds0112Table-th.bds0112Table---sortable {
926
+ .bds0113Table-th.bds0113Table---sortable {
927
927
  padding: 0;
928
928
  }
929
- .bds0112Table-sortButton {
929
+ .bds0113Table-sortButton {
930
930
  all: unset;
931
931
  display: flex;
932
932
  align-items: center;
@@ -940,47 +940,47 @@
940
940
  transition: var(--animation_transition);
941
941
  box-sizing: border-box;
942
942
  }
943
- .bds0112Table-sortButton:focus-visible {
943
+ .bds0113Table-sortButton:focus-visible {
944
944
  outline: var(--outline_default);
945
945
  outline-offset: calc(var(--outline_offset) * -1);
946
946
  }
947
947
  @media (hover: hover) and (pointer: fine) {
948
- .bds0112Table-sortButton:hover {
948
+ .bds0113Table-sortButton:hover {
949
949
  color: var(--color_on-bg);
950
950
  }
951
951
  }
952
- .bds0112Table-sortIcon {
952
+ .bds0113Table-sortIcon {
953
953
  width: 1rem;
954
954
  height: 1rem;
955
955
  opacity: 0.4;
956
956
  transition: transform var(--animation_transition-duration) var(--animation_easing), opacity var(--animation_transition-duration) var(--animation_easing);
957
957
  }
958
- .bds0112Table-sortIcon.bds0112Table---sort-active {
958
+ .bds0113Table-sortIcon.bds0113Table---sort-active {
959
959
  opacity: 1;
960
960
  color: var(--color_interactive);
961
961
  }
962
- .bds0112Table-sortIcon.bds0112Table---sort-desc {
962
+ .bds0113Table-sortIcon.bds0113Table---sort-desc {
963
963
  transform: rotate(180deg);
964
964
  }
965
- .bds0112Table-tbody .bds0112Table-tr {
965
+ .bds0113Table-tbody .bds0113Table-tr {
966
966
  border-bottom: 1px solid var(--color_bg--subtle);
967
967
  transition: var(--animation_transition);
968
968
  }
969
- .bds0112Table-tbody .bds0112Table-tr:last-child {
969
+ .bds0113Table-tbody .bds0113Table-tr:last-child {
970
970
  border-bottom: none;
971
971
  }
972
972
  @media (hover: hover) and (pointer: fine) {
973
- .bds0112Table-tbody .bds0112Table-tr:hover {
973
+ .bds0113Table-tbody .bds0113Table-tr:hover {
974
974
  background-color: var(--color_bg--subtle);
975
975
  }
976
976
  }
977
- .bds0112Table-td {
977
+ .bds0113Table-td {
978
978
  padding: var(--space_s) var(--space_m);
979
979
  color: var(--color_on-bg);
980
980
  vertical-align: middle;
981
981
  }
982
982
  @media (prefers-reduced-motion: reduce) {
983
- .bds0112Table-sortIcon {
983
+ .bds0113Table-sortIcon {
984
984
  transition: none;
985
985
  }
986
986
  }
@@ -988,16 +988,16 @@
988
988
 
989
989
  /* src/components/ui/Tabs/Tabs.module.css */
990
990
  @layer component {
991
- .bds0112Tabs-tabs {
991
+ .bds0113Tabs-tabs {
992
992
  display: flex;
993
993
  flex-direction: column;
994
994
  }
995
- .bds0112Tabs-tabList {
995
+ .bds0113Tabs-tabList {
996
996
  display: flex;
997
997
  border-bottom: 1px solid var(--color_bg--subtle);
998
998
  gap: var(--space_xxs);
999
999
  }
1000
- .bds0112Tabs-tab {
1000
+ .bds0113Tabs-tab {
1001
1001
  --tab_color: var(--color_on-bg);
1002
1002
  --tab_border-color: transparent;
1003
1003
  all: unset;
@@ -1013,28 +1013,28 @@
1013
1013
  cursor: pointer;
1014
1014
  transition: var(--animation_transition);
1015
1015
  }
1016
- .bds0112Tabs-tab.bds0112Tabs---active {
1016
+ .bds0113Tabs-tab.bds0113Tabs---active {
1017
1017
  --tab_color: var(--color_interactive);
1018
1018
  --tab_border-color: var(--color_interactive);
1019
1019
  }
1020
- .bds0112Tabs-tab:disabled {
1020
+ .bds0113Tabs-tab:disabled {
1021
1021
  opacity: 0.4;
1022
1022
  cursor: not-allowed;
1023
1023
  }
1024
- .bds0112Tabs-tab:focus-visible {
1024
+ .bds0113Tabs-tab:focus-visible {
1025
1025
  outline: var(--outline_default);
1026
1026
  outline-offset: var(--outline_offset);
1027
1027
  border-radius: var(--border_radius--xs);
1028
1028
  }
1029
1029
  @media (hover: hover) and (pointer: fine) {
1030
- .bds0112Tabs-tab:not(:disabled, .bds0112Tabs---active):hover {
1030
+ .bds0113Tabs-tab:not(:disabled, .bds0113Tabs---active):hover {
1031
1031
  --tab_color: var(--color_interactive);
1032
1032
  }
1033
1033
  }
1034
- .bds0112Tabs-panel {
1034
+ .bds0113Tabs-panel {
1035
1035
  padding-block-start: var(--space_m);
1036
1036
  }
1037
- .bds0112Tabs-panel:focus-visible {
1037
+ .bds0113Tabs-panel:focus-visible {
1038
1038
  outline: var(--outline_default);
1039
1039
  outline-offset: var(--outline_offset);
1040
1040
  }
@@ -1042,12 +1042,12 @@
1042
1042
 
1043
1043
  /* src/components/ui/Tooltip/Tooltip.module.css */
1044
1044
  @layer component {
1045
- .bds0112Tooltip-wrapper {
1045
+ .bds0113Tooltip-wrapper {
1046
1046
  position: relative;
1047
1047
  display: inline-flex;
1048
1048
  align-items: center;
1049
1049
  }
1050
- .bds0112Tooltip-tooltip {
1050
+ .bds0113Tooltip-tooltip {
1051
1051
  --tooltip_bg: var(--color_on-bg);
1052
1052
  --tooltip_text: var(--color_bg);
1053
1053
  position: absolute;
@@ -1064,33 +1064,33 @@
1064
1064
  opacity: 0;
1065
1065
  transition: opacity var(--animation_transition-duration) var(--animation_easing);
1066
1066
  }
1067
- .bds0112Tooltip-wrapper:hover .bds0112Tooltip-tooltip,
1068
- .bds0112Tooltip-wrapper:focus-within .bds0112Tooltip-tooltip {
1067
+ .bds0113Tooltip-wrapper:hover .bds0113Tooltip-tooltip,
1068
+ .bds0113Tooltip-wrapper:focus-within .bds0113Tooltip-tooltip {
1069
1069
  visibility: visible;
1070
1070
  opacity: 1;
1071
1071
  }
1072
- .bds0112Tooltip---placement_top {
1072
+ .bds0113Tooltip---placement_top {
1073
1073
  bottom: calc(100% + var(--space_xs));
1074
1074
  left: 50%;
1075
1075
  transform: translateX(-50%);
1076
1076
  }
1077
- .bds0112Tooltip---placement_bottom {
1077
+ .bds0113Tooltip---placement_bottom {
1078
1078
  top: calc(100% + var(--space_xs));
1079
1079
  left: 50%;
1080
1080
  transform: translateX(-50%);
1081
1081
  }
1082
- .bds0112Tooltip---placement_left {
1082
+ .bds0113Tooltip---placement_left {
1083
1083
  right: calc(100% + var(--space_xs));
1084
1084
  top: 50%;
1085
1085
  transform: translateY(-50%);
1086
1086
  }
1087
- .bds0112Tooltip---placement_right {
1087
+ .bds0113Tooltip---placement_right {
1088
1088
  left: calc(100% + var(--space_xs));
1089
1089
  top: 50%;
1090
1090
  transform: translateY(-50%);
1091
1091
  }
1092
1092
  @media (prefers-reduced-motion: reduce) {
1093
- .bds0112Tooltip-tooltip {
1093
+ .bds0113Tooltip-tooltip {
1094
1094
  transition: none;
1095
1095
  }
1096
1096
  }
@@ -1098,34 +1098,34 @@
1098
1098
 
1099
1099
  /* src/components/ui/Typography/Typography.module.css */
1100
1100
  @layer component {
1101
- .bds0112Typography-typography {
1101
+ .bds0113Typography-typography {
1102
1102
  margin: 0;
1103
1103
  font-family: var(--font_family--body);
1104
1104
  color: var(--typography_color, var(--color_on-bg));
1105
1105
  }
1106
- .bds0112Typography---h1 {
1106
+ .bds0113Typography---h1 {
1107
1107
  font-family: var(--font_family--heading);
1108
1108
  font-size: var(--font_size--heading-1);
1109
1109
  font-weight: var(--font_weight--bold);
1110
1110
  line-height: var(--font_line-height--heading);
1111
1111
  }
1112
- .bds0112Typography---h2 {
1112
+ .bds0113Typography---h2 {
1113
1113
  font-family: var(--font_family--heading);
1114
1114
  font-size: var(--font_size--heading-2);
1115
1115
  font-weight: var(--font_weight--semibold);
1116
1116
  line-height: var(--font_line-height--heading);
1117
1117
  }
1118
- .bds0112Typography---h3 {
1118
+ .bds0113Typography---h3 {
1119
1119
  font-family: var(--font_family--heading);
1120
1120
  font-size: var(--font_size--heading-3);
1121
1121
  font-weight: var(--font_weight--semibold);
1122
1122
  line-height: var(--font_line-height--heading);
1123
1123
  }
1124
- .bds0112Typography---body {
1124
+ .bds0113Typography---body {
1125
1125
  font-size: var(--font_size--body);
1126
1126
  line-height: var(--font_line-height--body);
1127
1127
  }
1128
- .bds0112Typography---body_s {
1128
+ .bds0113Typography---body_s {
1129
1129
  font-size: var(--font_size--body--s);
1130
1130
  line-height: var(--font_line-height--body);
1131
1131
  }
@@ -1147,8 +1147,8 @@
1147
1147
  }
1148
1148
  }
1149
1149
  @layer component {
1150
- .bds0112Button-button,
1151
- .bds0112Button-button[href] {
1150
+ .bds0113Button-button,
1151
+ .bds0113Button-button[href] {
1152
1152
  --button_height: 3em;
1153
1153
  --button_font-size: inherit;
1154
1154
  --button_bg: var(--color_cta);
@@ -1175,69 +1175,69 @@
1175
1175
  border: 2px solid var(--button_border-color);
1176
1176
  transition: var(--animation_transition);
1177
1177
  }
1178
- .bds0112Button-button.bds0112Button---primary {
1178
+ .bds0113Button-button.bds0113Button---primary {
1179
1179
  --button_bg: var(--color_cta);
1180
1180
  --button_text: var(--color_on-cta);
1181
1181
  --button_border-color: transparent;
1182
1182
  }
1183
- .bds0112Button-button.bds0112Button---secondary {
1183
+ .bds0113Button-button.bds0113Button---secondary {
1184
1184
  --button_bg: var(--color_bg);
1185
1185
  --button_text: var(--color_on-bg);
1186
1186
  --button_border-color: var(--button_text);
1187
1187
  }
1188
- .bds0112Button-button.bds0112Button---size_small {
1188
+ .bds0113Button-button.bds0113Button---size_small {
1189
1189
  --button_height: 2.25em;
1190
1190
  --button_font-size: var(--font_size--body--s);
1191
1191
  padding-inline: var(--space_m);
1192
1192
  }
1193
- .bds0112Button-button.bds0112Button---size_medium {
1193
+ .bds0113Button-button.bds0113Button---size_medium {
1194
1194
  --button_height: 3em;
1195
1195
  padding-inline: var(--space_l);
1196
1196
  }
1197
- .bds0112Button-button.bds0112Button---size_large {
1197
+ .bds0113Button-button.bds0113Button---size_large {
1198
1198
  --button_height: 3.75em;
1199
1199
  --button_font-size: var(--font_size--heading-3);
1200
1200
  padding-inline: var(--space_xl);
1201
1201
  }
1202
- .bds0112Button-button.bds0112Button---hasPulse {
1202
+ .bds0113Button-button.bds0113Button---hasPulse {
1203
1203
  animation: pulse 3s infinite;
1204
1204
  }
1205
- .bds0112Button-button[href] {
1205
+ .bds0113Button-button[href] {
1206
1206
  text-decoration: none;
1207
1207
  }
1208
- .bds0112Button-button svg {
1208
+ .bds0113Button-button svg {
1209
1209
  --icon__stroke: currentcolor;
1210
1210
  fill: currentcolor;
1211
1211
  color: currentcolor;
1212
1212
  flex-shrink: 0;
1213
1213
  }
1214
- .bds0112Button-prefix {
1214
+ .bds0113Button-prefix {
1215
1215
  display: flex;
1216
1216
  align-items: center;
1217
1217
  margin-inline-start: calc(var(--space_s) * -1);
1218
1218
  transition: var(--animation_transition);
1219
1219
  }
1220
- .bds0112Button-suffix {
1220
+ .bds0113Button-suffix {
1221
1221
  display: flex;
1222
1222
  align-items: center;
1223
1223
  margin-inline-end: calc(var(--space_s) * -1);
1224
1224
  transition: var(--animation_transition);
1225
1225
  }
1226
1226
  @media (hover: hover) and (pointer: fine) {
1227
- .bds0112Button-button:hover .bds0112Button-prefix svg {
1227
+ .bds0113Button-button:hover .bds0113Button-prefix svg {
1228
1228
  animation: 2s infinite fadeZoom ease-out;
1229
1229
  }
1230
- .bds0112Button-button:hover .bds0112Button-suffix svg {
1230
+ .bds0113Button-button:hover .bds0113Button-suffix svg {
1231
1231
  animation: 2s infinite fadeZoom ease-out;
1232
1232
  }
1233
1233
  }
1234
- .bds0112Button-button:focus-visible {
1234
+ .bds0113Button-button:focus-visible {
1235
1235
  outline-offset: var(--outline_offset);
1236
1236
  outline: var(--outline_default);
1237
1237
  border-radius: var(--border_radius--s);
1238
1238
  }
1239
1239
  @media (hover: hover) and (pointer: fine) {
1240
- .bds0112Button-button:hover {
1240
+ .bds0113Button-button:hover {
1241
1241
  --button_bg: var(--color_bg);
1242
1242
  --button_text: var(--color_interactive);
1243
1243
  --button_pulse-color: var(--color_interactive);
@@ -1248,7 +1248,7 @@
1248
1248
 
1249
1249
  /* src/components/interaction/Command/Command.module.css */
1250
1250
  @layer component {
1251
- .bds0112Command-dialog {
1251
+ .bds0113Command-dialog {
1252
1252
  padding: 0;
1253
1253
  border: none;
1254
1254
  border-radius: var(--border_radius--m);
@@ -1258,10 +1258,10 @@
1258
1258
  overflow: visible;
1259
1259
  margin-block-start: 10vh;
1260
1260
  }
1261
- .bds0112Command-dialog::backdrop {
1261
+ .bds0113Command-dialog::backdrop {
1262
1262
  background: rgb(0 0 0 / 50%);
1263
1263
  }
1264
- .bds0112Command-palette {
1264
+ .bds0113Command-palette {
1265
1265
  display: flex;
1266
1266
  flex-direction: column;
1267
1267
  background-color: var(--command_color, var(--color_bg));
@@ -1272,7 +1272,7 @@
1272
1272
  max-height: 70vh;
1273
1273
  border: 1px solid currentcolor;
1274
1274
  }
1275
- .bds0112Command-searchRow {
1275
+ .bds0113Command-searchRow {
1276
1276
  display: flex;
1277
1277
  align-items: center;
1278
1278
  gap: var(--space_xs);
@@ -1280,13 +1280,13 @@
1280
1280
  border-block-end: 1px solid currentcolor;
1281
1281
  flex-shrink: 0;
1282
1282
  }
1283
- .bds0112Command-searchIcon {
1283
+ .bds0113Command-searchIcon {
1284
1284
  width: 1.25rem;
1285
1285
  height: 1.25rem;
1286
1286
  color: var(--color_on-bg--muted);
1287
1287
  flex-shrink: 0;
1288
1288
  }
1289
- .bds0112Command-search {
1289
+ .bds0113Command-search {
1290
1290
  flex: 1;
1291
1291
  border: none;
1292
1292
  outline: none;
@@ -1296,10 +1296,10 @@
1296
1296
  background: transparent;
1297
1297
  min-width: 0;
1298
1298
  }
1299
- .bds0112Command-search::placeholder {
1299
+ .bds0113Command-search::placeholder {
1300
1300
  color: var(--color_on-bg--muted);
1301
1301
  }
1302
- .bds0112Command-escHint {
1302
+ .bds0113Command-escHint {
1303
1303
  font-size: var(--font_size--body--s);
1304
1304
  color: var(--color_on-bg--muted);
1305
1305
  border: 1px solid currentcolor;
@@ -1307,18 +1307,18 @@
1307
1307
  padding: 0.1em 0.4em;
1308
1308
  flex-shrink: 0;
1309
1309
  }
1310
- .bds0112Command-list {
1310
+ .bds0113Command-list {
1311
1311
  overflow-y: auto;
1312
1312
  list-style: none;
1313
1313
  margin: 0;
1314
1314
  padding: var(--space_xs) 0;
1315
1315
  }
1316
- .bds0112Command-groupList {
1316
+ .bds0113Command-groupList {
1317
1317
  list-style: none;
1318
1318
  margin: 0;
1319
1319
  padding: 0;
1320
1320
  }
1321
- .bds0112Command-group {
1321
+ .bds0113Command-group {
1322
1322
  padding: var(--space_xs) var(--space_m);
1323
1323
  font-size: var(--font_size--body--s);
1324
1324
  font-weight: var(--font_weight--semibold);
@@ -1326,7 +1326,7 @@
1326
1326
  text-transform: uppercase;
1327
1327
  letter-spacing: 0.05em;
1328
1328
  }
1329
- .bds0112Command-item {
1329
+ .bds0113Command-item {
1330
1330
  display: flex;
1331
1331
  align-items: center;
1332
1332
  gap: var(--space_s);
@@ -1334,26 +1334,26 @@
1334
1334
  cursor: pointer;
1335
1335
  transition: background-color var(--animation_transition-duration) var(--animation_easing);
1336
1336
  }
1337
- .bds0112Command-itemActive {
1337
+ .bds0113Command-itemActive {
1338
1338
  background-color: var(--color_bg--subtle);
1339
1339
  }
1340
- .bds0112Command-itemLabel {
1340
+ .bds0113Command-itemLabel {
1341
1341
  flex: 1;
1342
1342
  font-size: var(--font_size--body);
1343
1343
  color: var(--color_on-bg);
1344
1344
  }
1345
- .bds0112Command-itemDesc {
1345
+ .bds0113Command-itemDesc {
1346
1346
  font-size: var(--font_size--body--s);
1347
1347
  color: var(--color_on-bg--muted);
1348
1348
  }
1349
- .bds0112Command-shortcut {
1349
+ .bds0113Command-shortcut {
1350
1350
  font-size: var(--font_size--body--s);
1351
1351
  color: var(--color_on-bg--muted);
1352
1352
  border: 1px solid currentcolor;
1353
1353
  border-radius: var(--border_radius--xs);
1354
1354
  padding: 0.1em 0.4em;
1355
1355
  }
1356
- .bds0112Command-empty {
1356
+ .bds0113Command-empty {
1357
1357
  padding: var(--space_l) var(--space_m);
1358
1358
  text-align: center;
1359
1359
  color: var(--color_on-bg--muted);
@@ -1363,7 +1363,7 @@
1363
1363
 
1364
1364
  /* src/components/interaction/Dialog/Dialog.module.css */
1365
1365
  @layer component {
1366
- .bds0112Dialog-dialog {
1366
+ .bds0113Dialog-dialog {
1367
1367
  font-size: var(--font_size--body--s);
1368
1368
  border: 2px solid currentcolor;
1369
1369
  background-color: var(--dialog_color ,var(--color_grey--subtle));
@@ -1372,20 +1372,21 @@
1372
1372
  padding: var(--space_l);
1373
1373
  max-width: 90svw;
1374
1374
  max-height: 90svh;
1375
+ overflow: visible;
1375
1376
  }
1376
- .bds0112Dialog-dialogContent {
1377
+ .bds0113Dialog-dialogContent {
1377
1378
  display: grid;
1378
1379
  gap: var(--grid_gap);
1379
1380
  overflow-y: auto;
1380
1381
  min-height: 0;
1381
1382
  flex: 1;
1382
1383
  }
1383
- .bds0112Dialog-closeForm {
1384
+ .bds0113Dialog-closeForm {
1384
1385
  position: absolute;
1385
1386
  inset-block-start: -1em;
1386
1387
  inset-inline-end: -1em;
1387
1388
  }
1388
- .bds0112Dialog-closeButton {
1389
+ .bds0113Dialog-closeButton {
1389
1390
  all: unset;
1390
1391
  width: 2em;
1391
1392
  height: 2em;
@@ -1398,15 +1399,19 @@
1398
1399
  border: 2px solid currentcolor;
1399
1400
  cursor: pointer;
1400
1401
  }
1401
- .bds0112Dialog-closeButton svg {
1402
+ .bds0113Dialog-closeButton svg {
1402
1403
  width: 1.25em;
1403
1404
  height: 1.25em;
1404
1405
  }
1406
+ .bds0113Dialog-dialog::backdrop {
1407
+ background-color: var(--dialog_backdrop-color, rgb(0 0 0 / 50%));
1408
+ backdrop-filter: blur(2px);
1409
+ }
1405
1410
  }
1406
1411
 
1407
1412
  /* src/components/interaction/Drawer/Drawer.module.css */
1408
1413
  @layer component {
1409
- .bds0112Drawer-drawer {
1414
+ .bds0113Drawer-drawer {
1410
1415
  position: fixed;
1411
1416
  inset: 0;
1412
1417
  margin: 0;
@@ -1419,10 +1424,10 @@
1419
1424
  background: transparent;
1420
1425
  overflow: hidden;
1421
1426
  }
1422
- .bds0112Drawer-drawer::backdrop {
1427
+ .bds0113Drawer-drawer::backdrop {
1423
1428
  background: rgb(0 0 0 / 50%);
1424
1429
  }
1425
- .bds0112Drawer-panel {
1430
+ .bds0113Drawer-panel {
1426
1431
  position: absolute;
1427
1432
  inset-block: 0;
1428
1433
  display: flex;
@@ -1435,13 +1440,13 @@
1435
1440
  overflow: hidden;
1436
1441
  transition: transform var(--animation_transition-duration) var(--animation_easing);
1437
1442
  }
1438
- .bds0112Drawer---side_right .bds0112Drawer-panel {
1443
+ .bds0113Drawer---side_right .bds0113Drawer-panel {
1439
1444
  inset-inline-end: 0;
1440
1445
  }
1441
- .bds0112Drawer---side_left .bds0112Drawer-panel {
1446
+ .bds0113Drawer---side_left .bds0113Drawer-panel {
1442
1447
  inset-inline-start: 0;
1443
1448
  }
1444
- .bds0112Drawer-header {
1449
+ .bds0113Drawer-header {
1445
1450
  display: flex;
1446
1451
  align-items: center;
1447
1452
  justify-content: space-between;
@@ -1449,13 +1454,13 @@
1449
1454
  border-block-end: 1px solid currentcolor;
1450
1455
  flex-shrink: 0;
1451
1456
  }
1452
- .bds0112Drawer-title {
1457
+ .bds0113Drawer-title {
1453
1458
  margin: 0;
1454
1459
  font-size: var(--font_size--heading--s);
1455
1460
  font-weight: var(--font_weight--semibold);
1456
1461
  line-height: var(--font_line-height--heading);
1457
1462
  }
1458
- .bds0112Drawer-closeButton {
1463
+ .bds0113Drawer-closeButton {
1459
1464
  all: unset;
1460
1465
  display: flex;
1461
1466
  align-items: center;
@@ -1466,26 +1471,26 @@
1466
1471
  cursor: pointer;
1467
1472
  transition: var(--animation_transition);
1468
1473
  }
1469
- .bds0112Drawer-closeButton svg {
1474
+ .bds0113Drawer-closeButton svg {
1470
1475
  width: 1.25rem;
1471
1476
  height: 1.25rem;
1472
1477
  }
1473
- .bds0112Drawer-closeButton:focus-visible {
1478
+ .bds0113Drawer-closeButton:focus-visible {
1474
1479
  outline: var(--outline_default);
1475
1480
  outline-offset: var(--outline_offset);
1476
1481
  }
1477
1482
  @media (hover: hover) and (pointer: fine) {
1478
- .bds0112Drawer-closeButton:hover {
1483
+ .bds0113Drawer-closeButton:hover {
1479
1484
  background-color: var(--color_bg--subtle);
1480
1485
  }
1481
1486
  }
1482
- .bds0112Drawer-body {
1487
+ .bds0113Drawer-body {
1483
1488
  flex: 1;
1484
1489
  overflow-y: auto;
1485
1490
  padding: var(--space_l);
1486
1491
  }
1487
1492
  @media (prefers-reduced-motion: reduce) {
1488
- .bds0112Drawer-panel {
1493
+ .bds0113Drawer-panel {
1489
1494
  transition: none;
1490
1495
  }
1491
1496
  }
@@ -1493,11 +1498,11 @@
1493
1498
 
1494
1499
  /* src/components/interaction/DropdownMenu/DropdownMenu.module.css */
1495
1500
  @layer component {
1496
- .bds0112DropdownMenu-wrapper {
1501
+ .bds0113DropdownMenu-wrapper {
1497
1502
  position: relative;
1498
1503
  display: inline-flex;
1499
1504
  }
1500
- .bds0112DropdownMenu-menu {
1505
+ .bds0113DropdownMenu-menu {
1501
1506
  position: absolute;
1502
1507
  top: calc(100% + var(--space_xxs));
1503
1508
  z-index: var(--z-index_dropdown);
@@ -1511,19 +1516,19 @@
1511
1516
  list-style: none;
1512
1517
  margin: 0;
1513
1518
  }
1514
- .bds0112DropdownMenu---placement_bottom-start {
1519
+ .bds0113DropdownMenu---placement_bottom-start {
1515
1520
  left: 0;
1516
1521
  }
1517
- .bds0112DropdownMenu---placement_bottom-end {
1522
+ .bds0113DropdownMenu---placement_bottom-end {
1518
1523
  right: 0;
1519
1524
  }
1520
- .bds0112DropdownMenu-separator {
1525
+ .bds0113DropdownMenu-separator {
1521
1526
  border: none;
1522
1527
  border-top: 1px solid currentcolor;
1523
1528
  margin: var(--space_xxs) 0;
1524
1529
  opacity: 0.15;
1525
1530
  }
1526
- .bds0112DropdownMenu-item {
1531
+ .bds0113DropdownMenu-item {
1527
1532
  all: unset;
1528
1533
  display: flex;
1529
1534
  align-items: center;
@@ -1537,22 +1542,22 @@
1537
1542
  box-sizing: border-box;
1538
1543
  transition: var(--animation_transition);
1539
1544
  }
1540
- .bds0112DropdownMenu-item:disabled {
1545
+ .bds0113DropdownMenu-item:disabled {
1541
1546
  opacity: 0.4;
1542
1547
  cursor: not-allowed;
1543
1548
  }
1544
- .bds0112DropdownMenu-item:focus-visible {
1549
+ .bds0113DropdownMenu-item:focus-visible {
1545
1550
  outline: var(--outline_default);
1546
1551
  outline-offset: calc(var(--outline_offset) * -1);
1547
1552
  border-radius: var(--border_radius--xs);
1548
1553
  }
1549
1554
  @media (hover: hover) and (pointer: fine) {
1550
- .bds0112DropdownMenu-item:not(:disabled):hover {
1555
+ .bds0113DropdownMenu-item:not(:disabled):hover {
1551
1556
  background-color: var(--color_bg--subtle);
1552
1557
  color: var(--color_interactive);
1553
1558
  }
1554
1559
  }
1555
- .bds0112DropdownMenu-icon {
1560
+ .bds0113DropdownMenu-icon {
1556
1561
  display: flex;
1557
1562
  align-items: center;
1558
1563
  flex-shrink: 0;
@@ -1561,11 +1566,11 @@
1561
1566
 
1562
1567
  /* src/components/interaction/Popover/Popover.module.css */
1563
1568
  @layer component {
1564
- .bds0112Popover-wrapper {
1569
+ .bds0113Popover-wrapper {
1565
1570
  position: relative;
1566
1571
  display: inline-flex;
1567
1572
  }
1568
- .bds0112Popover-panel {
1573
+ .bds0113Popover-panel {
1569
1574
  position: absolute;
1570
1575
  z-index: var(--z-index_popover);
1571
1576
  min-width: 12rem;
@@ -1577,19 +1582,19 @@
1577
1582
  color: var(--popover_on-color, var(--color_on-bg));
1578
1583
  font-size: var(--font_size--body);
1579
1584
  }
1580
- .bds0112Popover---placement_bottom {
1585
+ .bds0113Popover---placement_bottom {
1581
1586
  top: calc(100% + var(--space_xs));
1582
1587
  left: 0;
1583
1588
  }
1584
- .bds0112Popover---placement_top {
1589
+ .bds0113Popover---placement_top {
1585
1590
  bottom: calc(100% + var(--space_xs));
1586
1591
  left: 0;
1587
1592
  }
1588
- .bds0112Popover---placement_right {
1593
+ .bds0113Popover---placement_right {
1589
1594
  left: calc(100% + var(--space_xs));
1590
1595
  top: 0;
1591
1596
  }
1592
- .bds0112Popover---placement_left {
1597
+ .bds0113Popover---placement_left {
1593
1598
  right: calc(100% + var(--space_xs));
1594
1599
  top: 0;
1595
1600
  }
@@ -1597,23 +1602,23 @@
1597
1602
 
1598
1603
  /* src/components/interaction/Rating/Rating.module.css */
1599
1604
  @layer component {
1600
- .bds0112Rating-rating {
1605
+ .bds0113Rating-rating {
1601
1606
  display: inline-flex;
1602
1607
  gap: var(--space_xxxs);
1603
1608
  color: var(--color_bg);
1604
1609
  }
1605
- .bds0112Rating-star {
1610
+ .bds0113Rating-star {
1606
1611
  width: 1.5em;
1607
1612
  height: 1.5em;
1608
1613
  }
1609
- .bds0112Rating---filled {
1614
+ .bds0113Rating---filled {
1610
1615
  color: var(--color_warning);
1611
1616
  }
1612
1617
  }
1613
1618
 
1614
1619
  /* src/components/interaction/Toast/Toast.module.css */
1615
1620
  @layer component {
1616
- .bds0112Toast-toastContainer {
1621
+ .bds0113Toast-toastContainer {
1617
1622
  position: fixed;
1618
1623
  bottom: var(--space_xl);
1619
1624
  right: var(--space_xl);
@@ -1622,7 +1627,7 @@
1622
1627
  gap: var(--space_m);
1623
1628
  z-index: var(--z-index_toast);
1624
1629
  }
1625
- .bds0112Toast-toast {
1630
+ .bds0113Toast-toast {
1626
1631
  padding: var(--space_m) var(--space_l);
1627
1632
  background-color: var(--toast_color, var(--color_bg));
1628
1633
  color: var(--toast_on-color, var(--color_on-bg));
@@ -1635,10 +1640,10 @@
1635
1640
  min-width: 300px;
1636
1641
  animation: slideIn var(--animation_duration--fast) var(--animation_easing);
1637
1642
  }
1638
- .bds0112Toast-message {
1643
+ .bds0113Toast-message {
1639
1644
  flex: 1;
1640
1645
  }
1641
- .bds0112Toast-closeButton {
1646
+ .bds0113Toast-closeButton {
1642
1647
  display: flex;
1643
1648
  align-items: center;
1644
1649
  justify-content: center;
@@ -1652,10 +1657,10 @@
1652
1657
  color: inherit;
1653
1658
  opacity: 0.6;
1654
1659
  }
1655
- .bds0112Toast-closeButton:hover {
1660
+ .bds0113Toast-closeButton:hover {
1656
1661
  opacity: 1;
1657
1662
  }
1658
- .bds0112Toast-closeButton svg {
1663
+ .bds0113Toast-closeButton svg {
1659
1664
  width: 1rem;
1660
1665
  height: 1rem;
1661
1666
  }
@@ -1673,17 +1678,17 @@
1673
1678
 
1674
1679
  /* src/components/interaction/form/Checkbox/Checkbox.module.css */
1675
1680
  @layer component {
1676
- .bds0112Checkbox-checkboxGroup {
1681
+ .bds0113Checkbox-checkboxGroup {
1677
1682
  --inputSize: calc(var(--space_s) * 2);
1678
1683
  display: flex;
1679
1684
  flex-direction: column;
1680
1685
  }
1681
- .bds0112Checkbox-inputWrapper {
1686
+ .bds0113Checkbox-inputWrapper {
1682
1687
  display: flex;
1683
1688
  align-items: stretch;
1684
1689
  gap: var(--space_xs);
1685
1690
  }
1686
- .bds0112Checkbox-checkbox {
1691
+ .bds0113Checkbox-checkbox {
1687
1692
  margin-block-start: 0.25em;
1688
1693
  width: var(--inputSize);
1689
1694
  height: var(--inputSize);
@@ -1696,11 +1701,11 @@
1696
1701
  position: relative;
1697
1702
  transition: background-color 0.3s ease, border-color 0.3s ease;
1698
1703
  }
1699
- .bds0112Checkbox-checkbox:checked {
1704
+ .bds0113Checkbox-checkbox:checked {
1700
1705
  background-color: var(--checkbox_color-active, var(--color_active));
1701
1706
  border-color: var(--checkbox_color-active, var(--color_active));
1702
1707
  }
1703
- .bds0112Checkbox-checkbox:checked::after {
1708
+ .bds0113Checkbox-checkbox:checked::after {
1704
1709
  content: "";
1705
1710
  position: absolute;
1706
1711
  left: 0.6em;
@@ -1711,15 +1716,15 @@
1711
1716
  border-width: 0 2px 2px 0;
1712
1717
  transform: rotate(45deg);
1713
1718
  }
1714
- .bds0112Checkbox-checkbox:focus {
1719
+ .bds0113Checkbox-checkbox:focus {
1715
1720
  outline: none;
1716
1721
  border-color: var(--color_interactive);
1717
1722
  box-shadow: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
1718
1723
  }
1719
- .bds0112Checkbox-checkboxError {
1724
+ .bds0113Checkbox-checkboxError {
1720
1725
  border-color: var(--color_error);
1721
1726
  }
1722
- .bds0112Checkbox-checkboxError:focus {
1727
+ .bds0113Checkbox-checkboxError:focus {
1723
1728
  border-color: var(--color_error);
1724
1729
  box-shadow: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
1725
1730
  }
@@ -1727,19 +1732,19 @@
1727
1732
 
1728
1733
  /* src/components/interaction/form/atoms/Message.module.css */
1729
1734
  @layer component {
1730
- .bds0112Message-error,
1731
- .bds0112Message-hint {
1735
+ .bds0113Message-error,
1736
+ .bds0113Message-hint {
1732
1737
  font-size: var(--font_size--body--s);
1733
1738
  margin-inline-start: var(--labelPosition);
1734
1739
  }
1735
- .bds0112Message-error {
1740
+ .bds0113Message-error {
1736
1741
  color: var(--color_error);
1737
1742
  }
1738
1743
  }
1739
1744
 
1740
1745
  /* src/components/interaction/form/atoms/Label.module.css */
1741
1746
  @layer component {
1742
- .bds0112Label-label {
1747
+ .bds0113Label-label {
1743
1748
  display: flex;
1744
1749
  align-items: center;
1745
1750
  font-family: var(--font_family--body);
@@ -1751,7 +1756,7 @@
1751
1756
 
1752
1757
  /* src/components/interaction/form/atoms/InputContainer.module.css */
1753
1758
  @layer component {
1754
- .bds0112InputContainer-container {
1759
+ .bds0113InputContainer-container {
1755
1760
  --labelPosition: calc(var(--inputSize) + var(--space_m));
1756
1761
  display: flex;
1757
1762
  flex-direction: column;
@@ -1761,16 +1766,16 @@
1761
1766
 
1762
1767
  /* src/components/interaction/form/Combobox/Combobox.module.css */
1763
1768
  @layer component {
1764
- .bds0112Combobox-formGroup {
1769
+ .bds0113Combobox-formGroup {
1765
1770
  display: flex;
1766
1771
  flex-direction: column;
1767
1772
  }
1768
- .bds0112Combobox-inputWrapper {
1773
+ .bds0113Combobox-inputWrapper {
1769
1774
  position: relative;
1770
1775
  display: flex;
1771
1776
  align-items: center;
1772
1777
  }
1773
- .bds0112Combobox-input {
1778
+ .bds0113Combobox-input {
1774
1779
  appearance: none;
1775
1780
  width: 100%;
1776
1781
  font-family: var(--font_family--body);
@@ -1783,22 +1788,22 @@
1783
1788
  color: var(--combobox_color, var(--color_on-bg));
1784
1789
  transition: var(--animation_transition);
1785
1790
  }
1786
- .bds0112Combobox-input:focus {
1791
+ .bds0113Combobox-input:focus {
1787
1792
  --combobox_border-color: var(--color_interactive);
1788
1793
  outline: none;
1789
1794
  box-shadow: var(--combobox_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
1790
1795
  }
1791
- .bds0112Combobox-input:disabled {
1796
+ .bds0113Combobox-input:disabled {
1792
1797
  opacity: 0.5;
1793
1798
  cursor: not-allowed;
1794
1799
  }
1795
- .bds0112Combobox-inputError {
1800
+ .bds0113Combobox-inputError {
1796
1801
  --combobox_border-color: var(--color_error);
1797
1802
  }
1798
- .bds0112Combobox-inputError:focus {
1803
+ .bds0113Combobox-inputError:focus {
1799
1804
  --combobox_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
1800
1805
  }
1801
- .bds0112Combobox-chevron {
1806
+ .bds0113Combobox-chevron {
1802
1807
  position: absolute;
1803
1808
  inset-inline-end: var(--space_s);
1804
1809
  display: flex;
@@ -1806,11 +1811,11 @@
1806
1811
  pointer-events: none;
1807
1812
  color: var(--combobox_color, var(--color_on-bg));
1808
1813
  }
1809
- .bds0112Combobox-chevron svg {
1814
+ .bds0113Combobox-chevron svg {
1810
1815
  width: 1rem;
1811
1816
  height: 1rem;
1812
1817
  }
1813
- .bds0112Combobox-listbox {
1818
+ .bds0113Combobox-listbox {
1814
1819
  position: absolute;
1815
1820
  top: calc(100% + var(--space_xxs));
1816
1821
  left: 0;
@@ -1827,7 +1832,7 @@
1827
1832
  color: var(--combobox_on-color, var(--color_on-bg));
1828
1833
  box-shadow: var(--shadow_m);
1829
1834
  }
1830
- .bds0112Combobox-option {
1835
+ .bds0113Combobox-option {
1831
1836
  display: flex;
1832
1837
  align-items: center;
1833
1838
  padding: var(--space_xs) var(--space_m);
@@ -1836,14 +1841,14 @@
1836
1841
  cursor: pointer;
1837
1842
  transition: var(--animation_transition);
1838
1843
  }
1839
- .bds0112Combobox-option.bds0112Combobox---highlighted {
1844
+ .bds0113Combobox-option.bds0113Combobox---highlighted {
1840
1845
  background-color: var(--color_bg--subtle);
1841
1846
  color: var(--color_interactive);
1842
1847
  }
1843
- .bds0112Combobox-option.bds0112Combobox---selected {
1848
+ .bds0113Combobox-option.bds0113Combobox---selected {
1844
1849
  font-weight: var(--font_weight--semibold);
1845
1850
  }
1846
- .bds0112Combobox-option.bds0112Combobox---disabled {
1851
+ .bds0113Combobox-option.bds0113Combobox---disabled {
1847
1852
  opacity: 0.4;
1848
1853
  cursor: not-allowed;
1849
1854
  }
@@ -1851,11 +1856,11 @@
1851
1856
 
1852
1857
  /* src/components/interaction/form/FileInput/FileInput.module.css */
1853
1858
  @layer component {
1854
- .bds0112FileInput-formGroup {
1859
+ .bds0113FileInput-formGroup {
1855
1860
  display: flex;
1856
1861
  flex-direction: column;
1857
1862
  }
1858
- .bds0112FileInput-dropZone {
1863
+ .bds0113FileInput-dropZone {
1859
1864
  display: flex;
1860
1865
  flex-direction: column;
1861
1866
  align-items: center;
@@ -1869,40 +1874,40 @@
1869
1874
  text-align: center;
1870
1875
  transition: var(--animation_transition);
1871
1876
  }
1872
- .bds0112FileInput-dropZone:focus-within {
1877
+ .bds0113FileInput-dropZone:focus-within {
1873
1878
  outline: var(--outline_default);
1874
1879
  outline-offset: var(--outline_offset);
1875
1880
  border-color: var(--fileInput_border-color, currentcolor);
1876
1881
  }
1877
- .bds0112FileInput-isDragging {
1882
+ .bds0113FileInput-isDragging {
1878
1883
  border-color: currentcolor;
1879
1884
  background-color: rgb(from currentcolor r g b / 8%);
1880
1885
  }
1881
- .bds0112FileInput-hasError {
1886
+ .bds0113FileInput-hasError {
1882
1887
  border-color: var(--color_error);
1883
1888
  }
1884
- .bds0112FileInput-isDisabled {
1889
+ .bds0113FileInput-isDisabled {
1885
1890
  opacity: 0.5;
1886
1891
  cursor: not-allowed;
1887
1892
  }
1888
- .bds0112FileInput-icon {
1893
+ .bds0113FileInput-icon {
1889
1894
  width: 2rem;
1890
1895
  height: 2rem;
1891
1896
  flex-shrink: 0;
1892
1897
  }
1893
- .bds0112FileInput-prompt {
1898
+ .bds0113FileInput-prompt {
1894
1899
  font-size: var(--font_size--body);
1895
1900
  color: var(--color_on-bg--muted);
1896
1901
  }
1897
- .bds0112FileInput-prompt strong {
1902
+ .bds0113FileInput-prompt strong {
1898
1903
  color: var(--color_interactive);
1899
1904
  font-weight: var(--font_weight--semibold);
1900
1905
  }
1901
- .bds0112FileInput-acceptHint {
1906
+ .bds0113FileInput-acceptHint {
1902
1907
  font-size: var(--font_size--body--s);
1903
1908
  color: var(--color_on-bg--muted);
1904
1909
  }
1905
- .bds0112FileInput-hiddenInput {
1910
+ .bds0113FileInput-hiddenInput {
1906
1911
  position: absolute;
1907
1912
  width: 1px;
1908
1913
  height: 1px;
@@ -1912,7 +1917,7 @@
1912
1917
  border: 0;
1913
1918
  }
1914
1919
  @media (hover: hover) and (pointer: fine) {
1915
- .bds0112FileInput-dropZone:not(.bds0112FileInput-isDisabled):hover {
1920
+ .bds0113FileInput-dropZone:not(.bds0113FileInput-isDisabled):hover {
1916
1921
  border-color: var(--color_interactive);
1917
1922
  background-color: rgb(from var(--color_interactive) r g b / 4%);
1918
1923
  }
@@ -1921,12 +1926,12 @@
1921
1926
 
1922
1927
  /* src/components/interaction/form/FormInput/FormInput.module.css */
1923
1928
  @layer component {
1924
- .bds0112FormInput-formGroup {
1929
+ .bds0113FormInput-formGroup {
1925
1930
  --labelPosition: 0;
1926
1931
  display: flex;
1927
1932
  flex-direction: column;
1928
1933
  }
1929
- .bds0112FormInput-input {
1934
+ .bds0113FormInput-input {
1930
1935
  font-family: var(--font_family--body);
1931
1936
  font-size: var(--font_size--body);
1932
1937
  padding: var(--space_s);
@@ -1936,26 +1941,26 @@
1936
1941
  color: var(--input_color, var(--color_on-bg));
1937
1942
  background-color: var(--input_color_bg, var(--color_bg));
1938
1943
  }
1939
- .bds0112FormInput-input:focus {
1944
+ .bds0113FormInput-input:focus {
1940
1945
  --input_border-color: var(--color_interactive);
1941
1946
  outline: none;
1942
1947
  box-shadow: var(--input_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
1943
1948
  }
1944
- .bds0112FormInput-inputError {
1949
+ .bds0113FormInput-inputError {
1945
1950
  --input_border-color: var(--color_error);
1946
1951
  }
1947
- .bds0112FormInput-inputError:focus {
1952
+ .bds0113FormInput-inputError:focus {
1948
1953
  --input_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
1949
1954
  }
1950
1955
  }
1951
1956
 
1952
1957
  /* src/components/interaction/form/NumberInput/NumberInput.module.css */
1953
1958
  @layer component {
1954
- .bds0112NumberInput-formGroup {
1959
+ .bds0113NumberInput-formGroup {
1955
1960
  display: flex;
1956
1961
  flex-direction: column;
1957
1962
  }
1958
- .bds0112NumberInput-inputRow {
1963
+ .bds0113NumberInput-inputRow {
1959
1964
  display: flex;
1960
1965
  align-items: stretch;
1961
1966
  border: 1px solid currentcolor;
@@ -1963,11 +1968,11 @@
1963
1968
  overflow: hidden;
1964
1969
  transition: var(--animation_transition);
1965
1970
  }
1966
- .bds0112NumberInput-inputRow:focus-within {
1971
+ .bds0113NumberInput-inputRow:focus-within {
1967
1972
  border-color: var(--numberInput_border-color, var(--color_interactive));
1968
1973
  box-shadow: var(--numberInput_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
1969
1974
  }
1970
- .bds0112NumberInput-input {
1975
+ .bds0113NumberInput-input {
1971
1976
  flex: 1;
1972
1977
  border: none;
1973
1978
  outline: none;
@@ -1980,17 +1985,17 @@
1980
1985
  min-width: 0;
1981
1986
  appearance: textfield;
1982
1987
  }
1983
- .bds0112NumberInput-input::-webkit-inner-spin-button,
1984
- .bds0112NumberInput-input::-webkit-outer-spin-button {
1988
+ .bds0113NumberInput-input::-webkit-inner-spin-button,
1989
+ .bds0113NumberInput-input::-webkit-outer-spin-button {
1985
1990
  appearance: none;
1986
1991
  }
1987
- .bds0112NumberInput-inputError {
1992
+ .bds0113NumberInput-inputError {
1988
1993
  --numberInput_border-color: var(--color_error);
1989
1994
  }
1990
- .bds0112NumberInput-inputError:focus-within {
1995
+ .bds0113NumberInput-inputError:focus-within {
1991
1996
  --numberInput_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
1992
1997
  }
1993
- .bds0112NumberInput-stepper {
1998
+ .bds0113NumberInput-stepper {
1994
1999
  all: unset;
1995
2000
  display: flex;
1996
2001
  align-items: center;
@@ -2002,16 +2007,16 @@
2002
2007
  transition: var(--animation_transition);
2003
2008
  flex-shrink: 0;
2004
2009
  }
2005
- .bds0112NumberInput-stepper svg {
2010
+ .bds0113NumberInput-stepper svg {
2006
2011
  width: 1rem;
2007
2012
  height: 1rem;
2008
2013
  }
2009
- .bds0112NumberInput-stepper:disabled {
2014
+ .bds0113NumberInput-stepper:disabled {
2010
2015
  opacity: 0.4;
2011
2016
  cursor: not-allowed;
2012
2017
  }
2013
2018
  @media (hover: hover) and (pointer: fine) {
2014
- .bds0112NumberInput-stepper:not(:disabled):hover {
2019
+ .bds0113NumberInput-stepper:not(:disabled):hover {
2015
2020
  background-color: var(--color_bg--subtle);
2016
2021
  opacity: 0.7;
2017
2022
  }
@@ -2020,18 +2025,18 @@
2020
2025
 
2021
2026
  /* src/components/interaction/form/Radio/Radio.module.css */
2022
2027
  @layer component {
2023
- .bds0112Radio-radioGroup {
2028
+ .bds0113Radio-radioGroup {
2024
2029
  --inputSize: calc(var(--space_s) * 2);
2025
2030
  --labelPosition: calc(var(--inputSize) + var(--space_m));
2026
2031
  display: flex;
2027
2032
  flex-direction: column;
2028
2033
  }
2029
- .bds0112Radio-inputWrapper {
2034
+ .bds0113Radio-inputWrapper {
2030
2035
  display: flex;
2031
2036
  align-items: stretch;
2032
2037
  gap: var(--space_xs);
2033
2038
  }
2034
- .bds0112Radio-radio {
2039
+ .bds0113Radio-radio {
2035
2040
  flex-shrink: 0;
2036
2041
  margin-block-start: 0.25em;
2037
2042
  width: var(--inputSize);
@@ -2045,11 +2050,11 @@
2045
2050
  position: relative;
2046
2051
  transition: background-color 0.3s ease, border-color 0.3s ease;
2047
2052
  }
2048
- .bds0112Radio-radio:checked {
2053
+ .bds0113Radio-radio:checked {
2049
2054
  background-color: var(--radio_color-active, var(--color_active));
2050
2055
  border-color: var(--radio_color-active, var(--color_active));
2051
2056
  }
2052
- .bds0112Radio-radio:checked::after {
2057
+ .bds0113Radio-radio:checked::after {
2053
2058
  content: "";
2054
2059
  position: absolute;
2055
2060
  left: 0.6em;
@@ -2060,15 +2065,15 @@
2060
2065
  border-width: 0 2px 2px 0;
2061
2066
  transform: rotate(45deg);
2062
2067
  }
2063
- .bds0112Radio-radio:focus {
2068
+ .bds0113Radio-radio:focus {
2064
2069
  outline: none;
2065
2070
  border-color: var(--color_interactive);
2066
2071
  box-shadow: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
2067
2072
  }
2068
- .bds0112Radio-radioError {
2073
+ .bds0113Radio-radioError {
2069
2074
  border-color: var(--color_error);
2070
2075
  }
2071
- .bds0112Radio-radioError:focus {
2076
+ .bds0113Radio-radioError:focus {
2072
2077
  border-color: var(--color_error);
2073
2078
  box-shadow: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
2074
2079
  }
@@ -2076,16 +2081,16 @@
2076
2081
 
2077
2082
  /* src/components/interaction/form/Select/Select.module.css */
2078
2083
  @layer component {
2079
- .bds0112Select-formGroup {
2084
+ .bds0113Select-formGroup {
2080
2085
  display: flex;
2081
2086
  flex-direction: column;
2082
2087
  }
2083
- .bds0112Select-selectWrapper {
2088
+ .bds0113Select-selectWrapper {
2084
2089
  position: relative;
2085
2090
  display: flex;
2086
2091
  align-items: center;
2087
2092
  }
2088
- .bds0112Select-select {
2093
+ .bds0113Select-select {
2089
2094
  appearance: none;
2090
2095
  width: 100%;
2091
2096
  font-family: var(--font_family--body);
@@ -2099,22 +2104,22 @@
2099
2104
  cursor: pointer;
2100
2105
  transition: var(--animation_transition);
2101
2106
  }
2102
- .bds0112Select-select:focus {
2107
+ .bds0113Select-select:focus {
2103
2108
  --select_border-color: var(--color_interactive);
2104
2109
  outline: none;
2105
2110
  box-shadow: var(--select_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
2106
2111
  }
2107
- .bds0112Select-select:disabled {
2112
+ .bds0113Select-select:disabled {
2108
2113
  opacity: 0.5;
2109
2114
  cursor: not-allowed;
2110
2115
  }
2111
- .bds0112Select-selectError {
2116
+ .bds0113Select-selectError {
2112
2117
  --select_border-color: var(--color_error);
2113
2118
  }
2114
- .bds0112Select-selectError:focus {
2119
+ .bds0113Select-selectError:focus {
2115
2120
  --select_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
2116
2121
  }
2117
- .bds0112Select-chevron {
2122
+ .bds0113Select-chevron {
2118
2123
  position: absolute;
2119
2124
  inset-inline-end: var(--space_s);
2120
2125
  display: flex;
@@ -2122,7 +2127,7 @@
2122
2127
  pointer-events: none;
2123
2128
  color: var(--select_color, var(--color_on-bg));
2124
2129
  }
2125
- .bds0112Select-chevron svg {
2130
+ .bds0113Select-chevron svg {
2126
2131
  width: 1rem;
2127
2132
  height: 1rem;
2128
2133
  }
@@ -2130,22 +2135,22 @@
2130
2135
 
2131
2136
  /* src/components/interaction/form/Slider/Slider.module.css */
2132
2137
  @layer component {
2133
- .bds0112Slider-formGroup {
2138
+ .bds0113Slider-formGroup {
2134
2139
  display: flex;
2135
2140
  flex-direction: column;
2136
2141
  gap: var(--space_xxs);
2137
2142
  }
2138
- .bds0112Slider-labelRow {
2143
+ .bds0113Slider-labelRow {
2139
2144
  display: flex;
2140
2145
  justify-content: space-between;
2141
2146
  align-items: baseline;
2142
2147
  }
2143
- .bds0112Slider-value {
2148
+ .bds0113Slider-value {
2144
2149
  font-size: var(--font_size--body--s);
2145
2150
  font-variant-numeric: tabular-nums;
2146
2151
  color: var(--color_on-bg--subtle);
2147
2152
  }
2148
- .bds0112Slider-slider {
2153
+ .bds0113Slider-slider {
2149
2154
  --slider_fill: 0%;
2150
2155
  --slider_track-height: var(--space_xxs);
2151
2156
  --slider_thumb-size: calc(var(--space_s) * 2);
@@ -2164,16 +2169,16 @@
2164
2169
  cursor: pointer;
2165
2170
  transition: var(--animation_transition);
2166
2171
  }
2167
- .bds0112Slider-slider:focus-visible {
2172
+ .bds0113Slider-slider:focus-visible {
2168
2173
  outline: var(--outline_default);
2169
2174
  outline-offset: var(--outline_offset);
2170
2175
  border-radius: 999px;
2171
2176
  }
2172
- .bds0112Slider-slider:disabled {
2177
+ .bds0113Slider-slider:disabled {
2173
2178
  opacity: 0.4;
2174
2179
  cursor: not-allowed;
2175
2180
  }
2176
- .bds0112Slider-slider::-webkit-slider-thumb {
2181
+ .bds0113Slider-slider::-webkit-slider-thumb {
2177
2182
  appearance: none;
2178
2183
  width: var(--slider_thumb-size);
2179
2184
  height: var(--slider_thumb-size);
@@ -2183,7 +2188,7 @@
2183
2188
  transition: var(--animation_transition);
2184
2189
  cursor: pointer;
2185
2190
  }
2186
- .bds0112Slider-slider::-moz-range-thumb {
2191
+ .bds0113Slider-slider::-moz-range-thumb {
2187
2192
  width: var(--slider_thumb-size);
2188
2193
  height: var(--slider_thumb-size);
2189
2194
  border: none;
@@ -2192,7 +2197,7 @@
2192
2197
  box-shadow: var(--shadow_s);
2193
2198
  cursor: pointer;
2194
2199
  }
2195
- .bds0112Slider-sliderError {
2200
+ .bds0113Slider-sliderError {
2196
2201
  background:
2197
2202
  linear-gradient(
2198
2203
  to right,
@@ -2201,16 +2206,16 @@
2201
2206
  var(--color_bg--subtle) var(--slider_fill),
2202
2207
  var(--color_bg--subtle) 100%);
2203
2208
  }
2204
- .bds0112Slider-sliderError::-webkit-slider-thumb {
2209
+ .bds0113Slider-sliderError::-webkit-slider-thumb {
2205
2210
  background-color: var(--color_error);
2206
2211
  }
2207
- .bds0112Slider-sliderError::-moz-range-thumb {
2212
+ .bds0113Slider-sliderError::-moz-range-thumb {
2208
2213
  background-color: var(--color_error);
2209
2214
  }
2210
2215
  @media (prefers-reduced-motion: reduce) {
2211
- .bds0112Slider-slider,
2212
- .bds0112Slider-slider::-webkit-slider-thumb,
2213
- .bds0112Slider-slider::-moz-range-thumb {
2216
+ .bds0113Slider-slider,
2217
+ .bds0113Slider-slider::-webkit-slider-thumb,
2218
+ .bds0113Slider-slider::-moz-range-thumb {
2214
2219
  transition: none;
2215
2220
  }
2216
2221
  }
@@ -2218,7 +2223,7 @@
2218
2223
 
2219
2224
  /* src/components/interaction/form/Switch/Switch.module.css */
2220
2225
  @layer component {
2221
- .bds0112Switch-switchGroup {
2226
+ .bds0113Switch-switchGroup {
2222
2227
  --switch_thumb-size: 1.25em;
2223
2228
  --switch_track-pad: var(--space_xxxs);
2224
2229
  --switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
@@ -2231,21 +2236,21 @@
2231
2236
  display: flex;
2232
2237
  flex-direction: column;
2233
2238
  }
2234
- .bds0112Switch-switchGroup.bds0112Switch---size_small {
2239
+ .bds0113Switch-switchGroup.bds0113Switch---size_small {
2235
2240
  --switch_thumb-size: 1em;
2236
2241
  }
2237
- .bds0112Switch-switchGroup.bds0112Switch---size_medium {
2242
+ .bds0113Switch-switchGroup.bds0113Switch---size_medium {
2238
2243
  --switch_thumb-size: 1.25em;
2239
2244
  }
2240
- .bds0112Switch-switchGroup.bds0112Switch---size_large {
2245
+ .bds0113Switch-switchGroup.bds0113Switch---size_large {
2241
2246
  --switch_thumb-size: 1.5em;
2242
2247
  }
2243
- .bds0112Switch-inputWrapper {
2248
+ .bds0113Switch-inputWrapper {
2244
2249
  display: flex;
2245
2250
  align-items: center;
2246
2251
  gap: var(--space_xs);
2247
2252
  }
2248
- .bds0112Switch-trackWrapper {
2253
+ .bds0113Switch-trackWrapper {
2249
2254
  position: relative;
2250
2255
  display: inline-flex;
2251
2256
  align-items: center;
@@ -2253,7 +2258,7 @@
2253
2258
  width: var(--switch_track-width);
2254
2259
  height: var(--switch_track-height);
2255
2260
  }
2256
- .bds0112Switch-switch {
2261
+ .bds0113Switch-switch {
2257
2262
  position: absolute;
2258
2263
  inset: 0;
2259
2264
  appearance: none;
@@ -2264,10 +2269,10 @@
2264
2269
  cursor: pointer;
2265
2270
  z-index: 1;
2266
2271
  }
2267
- .bds0112Switch-switch:disabled {
2272
+ .bds0113Switch-switch:disabled {
2268
2273
  cursor: not-allowed;
2269
2274
  }
2270
- .bds0112Switch-track {
2275
+ .bds0113Switch-track {
2271
2276
  display: inline-flex;
2272
2277
  align-items: center;
2273
2278
  width: var(--switch_track-width);
@@ -2280,7 +2285,7 @@
2280
2285
  outline: 1px solid var(--thumb_bg);
2281
2286
  outline-offset: var(--outline_offset);
2282
2287
  }
2283
- .bds0112Switch-thumb {
2288
+ .bds0113Switch-thumb {
2284
2289
  display: block;
2285
2290
  width: var(--switch_thumb-size);
2286
2291
  height: var(--switch_thumb-size);
@@ -2290,28 +2295,28 @@
2290
2295
  transition: var(--animation_transition);
2291
2296
  transform: translateX(0);
2292
2297
  }
2293
- .bds0112Switch-switch.bds0112Switch-switchError + .bds0112Switch-track {
2298
+ .bds0113Switch-switch.bds0113Switch-switchError + .bds0113Switch-track {
2294
2299
  outline: 1px solid var(--color_error);
2295
2300
  }
2296
- .bds0112Switch-switch:checked + .bds0112Switch-track {
2301
+ .bds0113Switch-switch:checked + .bds0113Switch-track {
2297
2302
  background-color: var(--track_active);
2298
2303
  outline-color: var(--thumb_bg--active);
2299
2304
  }
2300
- .bds0112Switch-switch:checked + .bds0112Switch-track .bds0112Switch-thumb {
2305
+ .bds0113Switch-switch:checked + .bds0113Switch-track .bds0113Switch-thumb {
2301
2306
  background-color: var(--thumb_bg--active);
2302
2307
  transform: translateX(var(--switch_thumb-size));
2303
2308
  }
2304
- .bds0112Switch-switch:focus-visible + .bds0112Switch-track {
2309
+ .bds0113Switch-switch:focus-visible + .bds0113Switch-track {
2305
2310
  outline: var(--outline_default);
2306
2311
  outline-offset: var(--outline_offset);
2307
2312
  border-radius: 999px;
2308
2313
  }
2309
- .bds0112Switch-switch:disabled + .bds0112Switch-track {
2314
+ .bds0113Switch-switch:disabled + .bds0113Switch-track {
2310
2315
  opacity: 0.4;
2311
2316
  }
2312
2317
  @media (prefers-reduced-motion: reduce) {
2313
- .bds0112Switch-track,
2314
- .bds0112Switch-thumb {
2318
+ .bds0113Switch-track,
2319
+ .bds0113Switch-thumb {
2315
2320
  transition: none;
2316
2321
  }
2317
2322
  }
@@ -2319,11 +2324,11 @@
2319
2324
 
2320
2325
  /* src/components/interaction/form/Textarea/Textarea.module.css */
2321
2326
  @layer component {
2322
- .bds0112Textarea-formGroup {
2327
+ .bds0113Textarea-formGroup {
2323
2328
  display: flex;
2324
2329
  flex-direction: column;
2325
2330
  }
2326
- .bds0112Textarea-textarea {
2331
+ .bds0113Textarea-textarea {
2327
2332
  font-family: var(--font_family--body);
2328
2333
  font-size: var(--font_size--body);
2329
2334
  line-height: var(--font_line-height--body);
@@ -2336,69 +2341,69 @@
2336
2341
  min-height: calc(var(--space_m) * 5);
2337
2342
  transition: var(--animation_transition);
2338
2343
  }
2339
- .bds0112Textarea-textarea:focus {
2344
+ .bds0113Textarea-textarea:focus {
2340
2345
  --textarea_border-color: var(--color_interactive);
2341
2346
  outline: none;
2342
2347
  box-shadow: var(--textarea_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
2343
2348
  }
2344
- .bds0112Textarea-textarea:disabled {
2349
+ .bds0113Textarea-textarea:disabled {
2345
2350
  opacity: 0.5;
2346
2351
  cursor: not-allowed;
2347
2352
  resize: none;
2348
2353
  }
2349
- .bds0112Textarea-textareaError {
2354
+ .bds0113Textarea-textareaError {
2350
2355
  --textarea_border-color: var(--color_error);
2351
2356
  }
2352
- .bds0112Textarea-textareaError:focus {
2357
+ .bds0113Textarea-textareaError:focus {
2353
2358
  --textarea_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
2354
2359
  }
2355
2360
  }
2356
2361
 
2357
2362
  /* src/components/layout/ButtonGroup/ButtonGroup.module.css */
2358
2363
  @layer component {
2359
- .bds0112ButtonGroup-buttonGroup {
2364
+ .bds0113ButtonGroup-buttonGroup {
2360
2365
  container-type: inline-size;
2361
2366
  container-name: button-group;
2362
2367
  grid-column: var(--grid_span-100);
2363
2368
  }
2364
- .bds0112ButtonGroup-buttonGroup .bds0112ButtonGroup-container {
2369
+ .bds0113ButtonGroup-buttonGroup .bds0113ButtonGroup-container {
2365
2370
  position: relative;
2366
2371
  display: flex;
2367
2372
  flex-direction: column-reverse;
2368
2373
  gap: var(--space_l);
2369
2374
  align-items: center;
2370
2375
  }
2371
- .bds0112ButtonGroup-buttonGroup.bds0112ButtonGroup---variant__card .bds0112ButtonGroup-container {
2376
+ .bds0113ButtonGroup-buttonGroup.bds0113ButtonGroup---variant__card .bds0113ButtonGroup-container {
2372
2377
  align-items: stretch;
2373
2378
  }
2374
- .bds0112ButtonGroup-buttonGroup.bds0112ButtonGroup---variant__flow .bds0112ButtonGroup-container,
2375
- .bds0112ButtonGroup-buttonGroup.bds0112ButtonGroup---variant__modal .bds0112ButtonGroup-container {
2379
+ .bds0113ButtonGroup-buttonGroup.bds0113ButtonGroup---variant__flow .bds0113ButtonGroup-container,
2380
+ .bds0113ButtonGroup-buttonGroup.bds0113ButtonGroup---variant__modal .bds0113ButtonGroup-container {
2376
2381
  align-items: center;
2377
2382
  }
2378
- .bds0112ButtonGroup-buttonGroup.bds0112ButtonGroup---variant__content .bds0112ButtonGroup-container {
2383
+ .bds0113ButtonGroup-buttonGroup.bds0113ButtonGroup---variant__content .bds0113ButtonGroup-container {
2379
2384
  align-items: flex-start;
2380
2385
  }
2381
2386
  @supports (contain: inline-size) {
2382
2387
  @container button-group (min-width: 30rem) {
2383
- .bds0112ButtonGroup-buttonGroup .bds0112ButtonGroup-container {
2388
+ .bds0113ButtonGroup-buttonGroup .bds0113ButtonGroup-container {
2384
2389
  flex-direction: row;
2385
2390
  justify-content: space-between;
2386
2391
  }
2387
- .bds0112ButtonGroup-buttonGroup.bds0112ButtonGroup---variant__modal .bds0112ButtonGroup-container > :first-child:last-child,
2388
- .bds0112ButtonGroup-buttonGroup.bds0112ButtonGroup---variant__flow .bds0112ButtonGroup-container > :first-child:last-child {
2392
+ .bds0113ButtonGroup-buttonGroup.bds0113ButtonGroup---variant__modal .bds0113ButtonGroup-container > :first-child:last-child,
2393
+ .bds0113ButtonGroup-buttonGroup.bds0113ButtonGroup---variant__flow .bds0113ButtonGroup-container > :first-child:last-child {
2389
2394
  margin-inline-start: auto;
2390
2395
  }
2391
- .bds0112ButtonGroup-buttonGroup.bds0112ButtonGroup---variant__card .bds0112ButtonGroup-container {
2396
+ .bds0113ButtonGroup-buttonGroup.bds0113ButtonGroup---variant__card .bds0113ButtonGroup-container {
2392
2397
  justify-content: center;
2393
2398
  }
2394
- .bds0112ButtonGroup-buttonGroup.bds0112ButtonGroup---variant__modal .bds0112ButtonGroup-container {
2399
+ .bds0113ButtonGroup-buttonGroup.bds0113ButtonGroup---variant__modal .bds0113ButtonGroup-container {
2395
2400
  justify-content: flex-end;
2396
2401
  }
2397
- .bds0112ButtonGroup-buttonGroup.bds0112ButtonGroup---variant__content .bds0112ButtonGroup-container {
2402
+ .bds0113ButtonGroup-buttonGroup.bds0113ButtonGroup---variant__content .bds0113ButtonGroup-container {
2398
2403
  justify-content: flex-start;
2399
2404
  align-items: center;
2400
2405
  }
2401
- .bds0112ButtonGroup-buttonGroup.bds0112ButtonGroup---variant__grid .bds0112ButtonGroup-container {
2406
+ .bds0113ButtonGroup-buttonGroup.bds0113ButtonGroup---variant__grid .bds0113ButtonGroup-container {
2402
2407
  justify-content: center;
2403
2408
  }
2404
2409
  }
@@ -2407,59 +2412,59 @@
2407
2412
 
2408
2413
  /* src/components/layout/Card/Card.module.css */
2409
2414
  @layer component {
2410
- .bds0112Card-card {
2415
+ .bds0113Card-card {
2411
2416
  background-color: var(--card_color, var(--color_bg));
2412
2417
  color: var(--card_on-color, var(--color_on-bg));
2413
2418
  border-radius: var(--border_radius--m);
2414
2419
  transition: all 0.3s ease;
2415
2420
  position: relative;
2416
2421
  }
2417
- .bds0112Card-card.bds0112Card---default {
2422
+ .bds0113Card-card.bds0113Card---default {
2418
2423
  box-shadow: var(--shadow_s);
2419
2424
  }
2420
- .bds0112Card-card.bds0112Card---elevated {
2425
+ .bds0113Card-card.bds0113Card---elevated {
2421
2426
  box-shadow: var(--shadow_m);
2422
2427
  }
2423
- .bds0112Card-card.bds0112Card---outlined {
2428
+ .bds0113Card-card.bds0113Card---outlined {
2424
2429
  border: 1px solid currentcolor;
2425
2430
  box-shadow: var(--shadow_s);
2426
2431
  }
2427
- .bds0112Card-card.bds0112Card---clickable {
2432
+ .bds0113Card-card.bds0113Card---clickable {
2428
2433
  cursor: pointer;
2429
2434
  }
2430
- .bds0112Card-card.bds0112Card---padding-none {
2435
+ .bds0113Card-card.bds0113Card---padding-none {
2431
2436
  padding: 0;
2432
2437
  }
2433
- .bds0112Card-card.bds0112Card---padding-small {
2438
+ .bds0113Card-card.bds0113Card---padding-small {
2434
2439
  padding: var(--space_s);
2435
2440
  }
2436
- .bds0112Card-card.bds0112Card---padding-medium {
2441
+ .bds0113Card-card.bds0113Card---padding-medium {
2437
2442
  padding: var(--space_m);
2438
2443
  }
2439
- .bds0112Card-card.bds0112Card---padding-large {
2444
+ .bds0113Card-card.bds0113Card---padding-large {
2440
2445
  padding: var(--space_l);
2441
2446
  }
2442
- .bds0112Card-card.bds0112Card---text-start {
2447
+ .bds0113Card-card.bds0113Card---text-start {
2443
2448
  text-align: left;
2444
2449
  }
2445
- .bds0112Card-card.bds0112Card---text-center {
2450
+ .bds0113Card-card.bds0113Card---text-center {
2446
2451
  text-align: center;
2447
2452
  }
2448
- .bds0112Card-card.bds0112Card---text-end {
2453
+ .bds0113Card-card.bds0113Card---text-end {
2449
2454
  text-align: right;
2450
2455
  }
2451
2456
  @media (hover: hover) and (pointer: fine) {
2452
- .bds0112Card-card.bds0112Card---clickable:hover {
2457
+ .bds0113Card-card.bds0113Card---clickable:hover {
2453
2458
  transform: translateY(-2px);
2454
2459
  box-shadow: var(--shadow_xl);
2455
2460
  }
2456
- .bds0112Card-card.bds0112Card---default:hover {
2461
+ .bds0113Card-card.bds0113Card---default:hover {
2457
2462
  box-shadow: var(--shadow_m);
2458
2463
  }
2459
- .bds0112Card-card.bds0112Card---elevated:hover {
2464
+ .bds0113Card-card.bds0113Card---elevated:hover {
2460
2465
  box-shadow: var(--shadow_2xl);
2461
2466
  }
2462
- .bds0112Card-card.bds0112Card---outlined:hover {
2467
+ .bds0113Card-card.bds0113Card---outlined:hover {
2463
2468
  box-shadow: var(--shadow_s);
2464
2469
  }
2465
2470
  }
@@ -2467,60 +2472,60 @@
2467
2472
 
2468
2473
  /* src/components/layout/SectionHeader/SectionHeader.module.css */
2469
2474
  @layer component {
2470
- .bds0112SectionHeader-sectionHeader {
2475
+ .bds0113SectionHeader-sectionHeader {
2471
2476
  display: flex;
2472
2477
  flex-direction: column;
2473
2478
  gap: var(--space_m);
2474
2479
  grid-column: var(--grid_span-100);
2475
2480
  }
2476
- .bds0112SectionHeader-title {
2481
+ .bds0113SectionHeader-title {
2477
2482
  color: var(--sectionHeader-title-color, var(--color_on-bg));
2478
2483
  margin: 0;
2479
2484
  font-family: var(--font_family--body);
2480
2485
  }
2481
- .bds0112SectionHeader-subtitle {
2486
+ .bds0113SectionHeader-subtitle {
2482
2487
  color: var(--sectionHeader_subtitle-color, var(--color_grey--strong));
2483
2488
  margin: 0;
2484
2489
  font-family: var(--font_family--body);
2485
2490
  font-weight: var(--font_weight--medium);
2486
2491
  }
2487
- .bds0112SectionHeader-sectionHeader.bds0112SectionHeader---start {
2492
+ .bds0113SectionHeader-sectionHeader.bds0113SectionHeader---start {
2488
2493
  align-items: flex-start;
2489
2494
  text-align: left;
2490
2495
  }
2491
- .bds0112SectionHeader-sectionHeader.bds0112SectionHeader---center {
2496
+ .bds0113SectionHeader-sectionHeader.bds0113SectionHeader---center {
2492
2497
  align-items: center;
2493
2498
  text-align: center;
2494
2499
  }
2495
- .bds0112SectionHeader-sectionHeader.bds0112SectionHeader---end {
2500
+ .bds0113SectionHeader-sectionHeader.bds0113SectionHeader---end {
2496
2501
  align-items: flex-end;
2497
2502
  text-align: right;
2498
2503
  }
2499
- .bds0112SectionHeader-sectionHeader.bds0112SectionHeader---small .bds0112SectionHeader-title {
2504
+ .bds0113SectionHeader-sectionHeader.bds0113SectionHeader---small .bds0113SectionHeader-title {
2500
2505
  font-size: var(--font_size--heading-1);
2501
2506
  line-height: var(--font_line-height--heading);
2502
2507
  font-weight: var(--font_weight--bold);
2503
2508
  }
2504
- .bds0112SectionHeader-sectionHeader.bds0112SectionHeader---small .bds0112SectionHeader-subtitle {
2509
+ .bds0113SectionHeader-sectionHeader.bds0113SectionHeader---small .bds0113SectionHeader-subtitle {
2505
2510
  font-size: var(--font_size--body);
2506
2511
  line-height: 1.4;
2507
2512
  }
2508
- .bds0112SectionHeader-sectionHeader.bds0112SectionHeader---medium .bds0112SectionHeader-title {
2513
+ .bds0113SectionHeader-sectionHeader.bds0113SectionHeader---medium .bds0113SectionHeader-title {
2509
2514
  font-size: var(--font_size--display);
2510
2515
  line-height: var(--font_line-height--display);
2511
2516
  font-weight: var(--font_weight--bold);
2512
2517
  }
2513
- .bds0112SectionHeader-sectionHeader.bds0112SectionHeader---medium .bds0112SectionHeader-subtitle {
2518
+ .bds0113SectionHeader-sectionHeader.bds0113SectionHeader---medium .bds0113SectionHeader-subtitle {
2514
2519
  font-size: var(--font_size--heading-3);
2515
2520
  line-height: 1.3;
2516
2521
  }
2517
- .bds0112SectionHeader-sectionHeader.bds0112SectionHeader---large .bds0112SectionHeader-title {
2522
+ .bds0113SectionHeader-sectionHeader.bds0113SectionHeader---large .bds0113SectionHeader-title {
2518
2523
  font-size: var(--font_size--display);
2519
2524
  line-height: var(--font_line-height--display);
2520
2525
  font-weight: var(--font_weight--bold);
2521
2526
  letter-spacing: var(--font_tracking--tight);
2522
2527
  }
2523
- .bds0112SectionHeader-sectionHeader.bds0112SectionHeader---large .bds0112SectionHeader-subtitle {
2528
+ .bds0113SectionHeader-sectionHeader.bds0113SectionHeader---large .bds0113SectionHeader-subtitle {
2524
2529
  font-size: var(--font_size--heading-2);
2525
2530
  line-height: 1.3;
2526
2531
  font-weight: var(--font_weight--medium);
@@ -2529,7 +2534,7 @@
2529
2534
 
2530
2535
  /* src/components/layout/IconWrapper/IconWrapper.module.css */
2531
2536
  @layer component {
2532
- .bds0112IconWrapper-wrapper {
2537
+ .bds0113IconWrapper-wrapper {
2533
2538
  width: 2em;
2534
2539
  height: 2em;
2535
2540
  font-size: 3em;
@@ -2544,7 +2549,7 @@
2544
2549
  position: relative;
2545
2550
  transition: var(--animation_transition);
2546
2551
  }
2547
- .bds0112IconWrapper-wrapper svg {
2552
+ .bds0113IconWrapper-wrapper svg {
2548
2553
  fill: currentcolor;
2549
2554
  }
2550
2555
  }