@boostdev/design-system-components 0.1.15 → 0.1.16

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 (18) hide show
  1. package/dist/client.cjs +49 -47
  2. package/dist/client.css +431 -435
  3. package/dist/client.d.cts +3 -2
  4. package/dist/client.d.ts +3 -2
  5. package/dist/client.js +49 -47
  6. package/dist/index.cjs +49 -47
  7. package/dist/index.css +431 -435
  8. package/dist/index.d.cts +3 -2
  9. package/dist/index.d.ts +3 -2
  10. package/dist/index.js +49 -47
  11. package/package.json +1 -1
  12. package/src/components/interaction/form/Switch/Switch.mdx +7 -2
  13. package/src/components/interaction/form/Switch/Switch.module.css +6 -6
  14. package/src/components/interaction/form/Switch/Switch.spec.tsx +23 -0
  15. package/src/components/interaction/form/Switch/Switch.stories.tsx +8 -0
  16. package/src/components/interaction/form/Switch/Switch.tsx +5 -2
  17. package/src/components/interaction/form/atoms/Label.module.css +0 -1
  18. package/src/components/ui/Progress/Progress.module.css +0 -4
package/dist/client.css CHANGED
@@ -1,22 +1,22 @@
1
1
  /* src/components/ui/Accordion/Accordion.module.css */
2
2
  @layer component {
3
- .bds0115Accordion-accordion {
3
+ .bds0116Accordion-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
- .bds0115Accordion-item {
10
+ .bds0116Accordion-item {
11
11
  border-bottom: 1px solid var(--color_bg--subtle);
12
12
  }
13
- .bds0115Accordion-item:last-child {
13
+ .bds0116Accordion-item:last-child {
14
14
  border-bottom: none;
15
15
  }
16
- .bds0115Accordion-heading {
16
+ .bds0116Accordion-heading {
17
17
  margin: 0;
18
18
  }
19
- .bds0115Accordion-trigger {
19
+ .bds0116Accordion-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
- .bds0115Accordion-trigger:disabled {
34
+ .bds0116Accordion-trigger:disabled {
35
35
  opacity: 0.4;
36
36
  cursor: not-allowed;
37
37
  }
38
- .bds0115Accordion-trigger:focus-visible {
38
+ .bds0116Accordion-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
- .bds0115Accordion-trigger:not(:disabled):hover {
44
+ .bds0116Accordion-trigger:not(:disabled):hover {
45
45
  background-color: var(--color_bg--subtle);
46
46
  }
47
47
  }
48
- .bds0115Accordion-triggerLabel {
48
+ .bds0116Accordion-triggerLabel {
49
49
  flex: 1;
50
50
  text-align: start;
51
51
  }
52
- .bds0115Accordion-chevron {
52
+ .bds0116Accordion-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
- .bds0115Accordion-item.bds0115Accordion---open .bds0115Accordion-chevron {
58
+ .bds0116Accordion-item.bds0116Accordion---open .bds0116Accordion-chevron {
59
59
  transform: rotate(180deg);
60
60
  }
61
- .bds0115Accordion-panel {
61
+ .bds0116Accordion-panel {
62
62
  overflow: hidden;
63
63
  }
64
- .bds0115Accordion-panelContent {
64
+ .bds0116Accordion-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
- .bds0115Accordion-chevron {
71
+ .bds0116Accordion-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
- .bds0115Alert-alert {
79
+ .bds0116Alert-alert {
80
80
  display: flex;
81
81
  align-items: flex-start;
82
82
  gap: var(--space_s);
@@ -88,43 +88,43 @@
88
88
  font-size: var(--font_size--body);
89
89
  line-height: var(--font_line-height--body);
90
90
  }
91
- .bds0115Alert---variant_info {
91
+ .bds0116Alert---variant_info {
92
92
  --alert_bg: var(--color_blue--subtle);
93
93
  --alert_text: var(--color_on-blue--subtle);
94
94
  --alert_border: var(--color_blue);
95
95
  }
96
- .bds0115Alert---variant_success {
96
+ .bds0116Alert---variant_success {
97
97
  --alert_bg: var(--color_success--subtle);
98
98
  --alert_text: var(--color_on-success--subtle);
99
99
  --alert_border: var(--color_success);
100
100
  }
101
- .bds0115Alert---variant_warning {
101
+ .bds0116Alert---variant_warning {
102
102
  --alert_bg: var(--color_orange--subtle);
103
103
  --alert_text: var(--color_on-orange--subtle);
104
104
  --alert_border: var(--color_warning);
105
105
  }
106
- .bds0115Alert---variant_error {
106
+ .bds0116Alert---variant_error {
107
107
  --alert_bg: rgb(from var(--color_error) r g b / 12%);
108
108
  --alert_text: var(--color_on-bg);
109
109
  --alert_border: var(--color_error);
110
110
  }
111
- .bds0115Alert-icon {
111
+ .bds0116Alert-icon {
112
112
  display: flex;
113
113
  align-items: center;
114
114
  flex-shrink: 0;
115
115
  margin-block-start: 0.1em;
116
116
  }
117
- .bds0115Alert-content {
117
+ .bds0116Alert-content {
118
118
  flex: 1;
119
119
  display: flex;
120
120
  flex-direction: column;
121
121
  gap: var(--space_xxs);
122
122
  }
123
- .bds0115Alert-title {
123
+ .bds0116Alert-title {
124
124
  font-weight: var(--font_weight--semibold);
125
125
  font-size: var(--font_size--body);
126
126
  }
127
- .bds0115Alert-dismiss {
127
+ .bds0116Alert-dismiss {
128
128
  all: unset;
129
129
  display: flex;
130
130
  align-items: center;
@@ -136,16 +136,16 @@
136
136
  border: 1px solid currentcolor;
137
137
  border-radius: 50%;
138
138
  }
139
- .bds0115Alert-dismiss svg {
139
+ .bds0116Alert-dismiss svg {
140
140
  width: 1rem;
141
141
  height: 1rem;
142
142
  }
143
- .bds0115Alert-dismiss:focus-visible {
143
+ .bds0116Alert-dismiss:focus-visible {
144
144
  outline: var(--outline_default);
145
145
  outline-offset: var(--outline_offset);
146
146
  }
147
147
  @media (hover: hover) and (pointer: fine) {
148
- .bds0115Alert-dismiss:hover {
148
+ .bds0116Alert-dismiss:hover {
149
149
  opacity: 0.7;
150
150
  }
151
151
  }
@@ -153,7 +153,7 @@
153
153
 
154
154
  /* src/components/ui/Avatar/Avatar.module.css */
155
155
  @layer component {
156
- .bds0115Avatar-avatar {
156
+ .bds0116Avatar-avatar {
157
157
  display: inline-flex;
158
158
  align-items: center;
159
159
  justify-content: center;
@@ -163,42 +163,42 @@
163
163
  overflow: hidden;
164
164
  flex-shrink: 0;
165
165
  }
166
- .bds0115Avatar-avatar.bds0115Avatar---fallback {
166
+ .bds0116Avatar-avatar.bds0116Avatar---fallback {
167
167
  background-color: var(--avatar_bg, var(--color_blue));
168
168
  color: var(--avatar_text, var(--color_on-blue));
169
169
  font-weight: var(--font_weight--semibold);
170
170
  }
171
- .bds0115Avatar-avatar.bds0115Avatar---size_small {
171
+ .bds0116Avatar-avatar.bds0116Avatar---size_small {
172
172
  --avatar_size: 2em;
173
173
  }
174
- .bds0115Avatar-avatar.bds0115Avatar---size_medium {
174
+ .bds0116Avatar-avatar.bds0116Avatar---size_medium {
175
175
  --avatar_size: 3em;
176
176
  }
177
- .bds0115Avatar-avatar.bds0115Avatar---size_large {
177
+ .bds0116Avatar-avatar.bds0116Avatar---size_large {
178
178
  --avatar_size: 4.5em;
179
179
  }
180
- .bds0115Avatar-image {
180
+ .bds0116Avatar-image {
181
181
  width: 100%;
182
182
  height: 100%;
183
183
  object-fit: cover;
184
184
  display: block;
185
185
  }
186
- .bds0115Avatar-initials {
186
+ .bds0116Avatar-initials {
187
187
  line-height: 1;
188
188
  user-select: none;
189
189
  font-size: var(--font_size--body);
190
190
  }
191
- .bds0115Avatar-avatar.bds0115Avatar---size_small .bds0115Avatar-initials {
191
+ .bds0116Avatar-avatar.bds0116Avatar---size_small .bds0116Avatar-initials {
192
192
  font-size: var(--font_size--body--s);
193
193
  }
194
- .bds0115Avatar-avatar.bds0115Avatar---size_large .bds0115Avatar-initials {
194
+ .bds0116Avatar-avatar.bds0116Avatar---size_large .bds0116Avatar-initials {
195
195
  font-size: var(--font_size--heading-3);
196
196
  }
197
197
  }
198
198
 
199
199
  /* src/components/ui/Badge/Badge.module.css */
200
200
  @layer component {
201
- .bds0115Badge-badge {
201
+ .bds0116Badge-badge {
202
202
  display: inline-flex;
203
203
  align-items: center;
204
204
  justify-content: center;
@@ -211,23 +211,23 @@
211
211
  background-color: var(--badge_bg, var(--color_blue));
212
212
  color: var(--badge_text, var(--color_on-blue));
213
213
  }
214
- .bds0115Badge---variant_primary {
214
+ .bds0116Badge---variant_primary {
215
215
  --badge_bg: var(--color_interactive);
216
216
  --badge_text: var(--color_on-interactive);
217
217
  }
218
- .bds0115Badge---variant_secondary {
218
+ .bds0116Badge---variant_secondary {
219
219
  --badge_bg: var(--color_bg);
220
220
  --badge_text: var(--color_on-bg);
221
221
  }
222
- .bds0115Badge---variant_success {
222
+ .bds0116Badge---variant_success {
223
223
  --badge_bg: var(--color_success);
224
224
  --badge_text: var(--color_on-success);
225
225
  }
226
- .bds0115Badge---variant_error {
226
+ .bds0116Badge---variant_error {
227
227
  --badge_bg: var(--color_error);
228
228
  --badge_text: var(--color_on-error);
229
229
  }
230
- .bds0115Badge---variant_warning {
230
+ .bds0116Badge---variant_warning {
231
231
  --badge_bg: var(--color_warning);
232
232
  --badge_text: var(--color_on-warning);
233
233
  }
@@ -235,10 +235,10 @@
235
235
 
236
236
  /* src/components/ui/Breadcrumb/Breadcrumb.module.css */
237
237
  @layer component {
238
- .bds0115Breadcrumb-breadcrumb {
238
+ .bds0116Breadcrumb-breadcrumb {
239
239
  font-size: var(--font_size--body--s);
240
240
  }
241
- .bds0115Breadcrumb-list {
241
+ .bds0116Breadcrumb-list {
242
242
  display: flex;
243
243
  flex-wrap: wrap;
244
244
  align-items: center;
@@ -247,32 +247,32 @@
247
247
  margin: 0;
248
248
  padding: 0;
249
249
  }
250
- .bds0115Breadcrumb-item {
250
+ .bds0116Breadcrumb-item {
251
251
  display: flex;
252
252
  align-items: center;
253
253
  gap: var(--space_xxs);
254
254
  }
255
- .bds0115Breadcrumb-link {
255
+ .bds0116Breadcrumb-link {
256
256
  color: var(--color_interactive);
257
257
  text-decoration: none;
258
258
  transition: var(--animation_transition);
259
259
  }
260
- .bds0115Breadcrumb-link:focus-visible {
260
+ .bds0116Breadcrumb-link:focus-visible {
261
261
  outline: var(--outline_default);
262
262
  outline-offset: var(--outline_offset);
263
263
  border-radius: var(--border_radius--xs);
264
264
  }
265
265
  @media (hover: hover) and (pointer: fine) {
266
- .bds0115Breadcrumb-link:hover {
266
+ .bds0116Breadcrumb-link:hover {
267
267
  text-decoration: underline;
268
268
  text-underline-offset: 0.2em;
269
269
  }
270
270
  }
271
- .bds0115Breadcrumb-separator {
271
+ .bds0116Breadcrumb-separator {
272
272
  color: var(--color_on-bg--subtle);
273
273
  user-select: none;
274
274
  }
275
- .bds0115Breadcrumb-current {
275
+ .bds0116Breadcrumb-current {
276
276
  color: var(--color_on-bg--subtle);
277
277
  font-weight: var(--font_weight--semibold);
278
278
  }
@@ -280,12 +280,12 @@
280
280
 
281
281
  /* src/components/ui/Collapsible/Collapsible.module.css */
282
282
  @layer component {
283
- .bds0115Collapsible-collapsible {
283
+ .bds0116Collapsible-collapsible {
284
284
  border: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--color_bg--subtle));
285
285
  border-radius: var(--collapsible_border-radius, var(--border_radius--m));
286
286
  overflow: hidden;
287
287
  }
288
- .bds0115Collapsible-summary {
288
+ .bds0116Collapsible-summary {
289
289
  list-style: none;
290
290
  display: flex;
291
291
  align-items: center;
@@ -300,25 +300,25 @@
300
300
  user-select: none;
301
301
  transition: var(--animation_transition);
302
302
  }
303
- .bds0115Collapsible-summary::-webkit-details-marker {
303
+ .bds0116Collapsible-summary::-webkit-details-marker {
304
304
  display: none;
305
305
  }
306
- .bds0115Collapsible-summary:focus-visible {
306
+ .bds0116Collapsible-summary:focus-visible {
307
307
  outline: var(--outline_default);
308
308
  outline-offset: calc(var(--outline_offset) * -1);
309
309
  }
310
310
  @media (hover: hover) and (pointer: fine) {
311
- .bds0115Collapsible-summary:hover {
311
+ .bds0116Collapsible-summary:hover {
312
312
  background-color: var(--collapsible_bg--hover, var(--color_bg--subtle));
313
313
  }
314
314
  }
315
- .bds0115Collapsible-collapsible[open] > .bds0115Collapsible-summary {
315
+ .bds0116Collapsible-collapsible[open] > .bds0116Collapsible-summary {
316
316
  border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--color_bg--subtle));
317
317
  }
318
- .bds0115Collapsible-summaryContent {
318
+ .bds0116Collapsible-summaryContent {
319
319
  flex: 1;
320
320
  }
321
- .bds0115Collapsible-icon {
321
+ .bds0116Collapsible-icon {
322
322
  width: 0.5rem;
323
323
  height: 0.5rem;
324
324
  border-right: 2px solid currentcolor;
@@ -327,17 +327,17 @@
327
327
  flex-shrink: 0;
328
328
  transition: transform var(--animation_transition-duration) var(--animation_easing);
329
329
  }
330
- .bds0115Collapsible-collapsible[open] > .bds0115Collapsible-summary .bds0115Collapsible-icon {
330
+ .bds0116Collapsible-collapsible[open] > .bds0116Collapsible-summary .bds0116Collapsible-icon {
331
331
  transform: rotate(-135deg);
332
332
  }
333
- .bds0115Collapsible-content {
333
+ .bds0116Collapsible-content {
334
334
  padding: var(--space_m);
335
335
  color: var(--collapsible_on-color, var(--color_on-bg));
336
336
  font-size: var(--font_size--body);
337
337
  line-height: var(--font_line-height--body);
338
338
  }
339
339
  @media (prefers-reduced-motion: reduce) {
340
- .bds0115Collapsible-icon {
340
+ .bds0116Collapsible-icon {
341
341
  transition: none;
342
342
  }
343
343
  }
@@ -345,7 +345,7 @@
345
345
 
346
346
  /* src/components/ui/Calendar/Calendar.module.css */
347
347
  @layer component {
348
- .bds0115Calendar-calendar {
348
+ .bds0116Calendar-calendar {
349
349
  display: inline-flex;
350
350
  flex-direction: column;
351
351
  gap: var(--space_s);
@@ -356,17 +356,17 @@
356
356
  box-shadow: var(--shadow_s);
357
357
  width: 20rem;
358
358
  }
359
- .bds0115Calendar-header {
359
+ .bds0116Calendar-header {
360
360
  display: flex;
361
361
  align-items: center;
362
362
  justify-content: space-between;
363
363
  }
364
- .bds0115Calendar-monthYear {
364
+ .bds0116Calendar-monthYear {
365
365
  font-size: var(--font_size--body);
366
366
  font-weight: var(--font_weight--semibold);
367
367
  color: var(--color_on-bg);
368
368
  }
369
- .bds0115Calendar-navBtn {
369
+ .bds0116Calendar-navBtn {
370
370
  all: unset;
371
371
  display: flex;
372
372
  align-items: center;
@@ -378,35 +378,35 @@
378
378
  color: var(--color_on-bg);
379
379
  transition: var(--animation_transition);
380
380
  }
381
- .bds0115Calendar-navBtn svg {
381
+ .bds0116Calendar-navBtn svg {
382
382
  width: 1rem;
383
383
  height: 1rem;
384
384
  }
385
- .bds0115Calendar-navBtn:focus-visible {
385
+ .bds0116Calendar-navBtn:focus-visible {
386
386
  outline: var(--outline_default);
387
387
  outline-offset: var(--outline_offset);
388
388
  }
389
389
  @media (hover: hover) and (pointer: fine) {
390
- .bds0115Calendar-navBtn:hover {
390
+ .bds0116Calendar-navBtn:hover {
391
391
  background-color: var(--color_bg--subtle);
392
392
  }
393
393
  }
394
- .bds0115Calendar-grid {
394
+ .bds0116Calendar-grid {
395
395
  border-collapse: collapse;
396
396
  width: 100%;
397
397
  table-layout: fixed;
398
398
  }
399
- .bds0115Calendar-weekday {
399
+ .bds0116Calendar-weekday {
400
400
  font-size: var(--font_size--body--s);
401
401
  font-weight: var(--font_weight--semibold);
402
402
  color: var(--color_on-bg--muted);
403
403
  text-align: center;
404
404
  padding-block-end: var(--space_xs);
405
405
  }
406
- .bds0115Calendar-empty {
406
+ .bds0116Calendar-empty {
407
407
  padding: 0;
408
408
  }
409
- .bds0115Calendar-day {
409
+ .bds0116Calendar-day {
410
410
  all: unset;
411
411
  display: flex;
412
412
  align-items: center;
@@ -420,30 +420,30 @@
420
420
  transition: var(--animation_transition);
421
421
  box-sizing: border-box;
422
422
  }
423
- .bds0115Calendar-day:focus-visible {
423
+ .bds0116Calendar-day:focus-visible {
424
424
  outline: var(--outline_default);
425
425
  outline-offset: var(--outline_offset);
426
426
  }
427
427
  @media (hover: hover) and (pointer: fine) {
428
- .bds0115Calendar-day:not(.bds0115Calendar-disabled, .bds0115Calendar-selected):hover {
428
+ .bds0116Calendar-day:not(.bds0116Calendar-disabled, .bds0116Calendar-selected):hover {
429
429
  background-color: var(--color_bg--subtle);
430
430
  }
431
431
  }
432
- .bds0115Calendar-today {
432
+ .bds0116Calendar-today {
433
433
  border: 2px solid var(--color_interactive);
434
434
  font-weight: var(--font_weight--semibold);
435
435
  }
436
- .bds0115Calendar-selected {
436
+ .bds0116Calendar-selected {
437
437
  background-color: var(--color_interactive);
438
438
  color: var(--color_on-interactive);
439
439
  font-weight: var(--font_weight--semibold);
440
440
  }
441
- .bds0115Calendar-disabled {
441
+ .bds0116Calendar-disabled {
442
442
  opacity: 0.35;
443
443
  cursor: not-allowed;
444
444
  }
445
445
  @media (prefers-reduced-motion: reduce) {
446
- .bds0115Calendar-day {
446
+ .bds0116Calendar-day {
447
447
  transition: none;
448
448
  }
449
449
  }
@@ -451,13 +451,13 @@
451
451
 
452
452
  /* src/components/ui/Carousel/Carousel.module.css */
453
453
  @layer component {
454
- .bds0115Carousel-carousel {
454
+ .bds0116Carousel-carousel {
455
455
  position: relative;
456
456
  display: flex;
457
457
  align-items: center;
458
458
  gap: var(--space_xs);
459
459
  }
460
- .bds0115Carousel-track {
460
+ .bds0116Carousel-track {
461
461
  display: flex;
462
462
  gap: var(--space_m);
463
463
  overflow-x: auto;
@@ -466,14 +466,14 @@
466
466
  flex: 1;
467
467
  scroll-behavior: smooth;
468
468
  }
469
- .bds0115Carousel-track::-webkit-scrollbar {
469
+ .bds0116Carousel-track::-webkit-scrollbar {
470
470
  display: none;
471
471
  }
472
- .bds0115Carousel-slide {
472
+ .bds0116Carousel-slide {
473
473
  scroll-snap-align: start;
474
474
  flex-shrink: 0;
475
475
  }
476
- .bds0115Carousel-navBtn {
476
+ .bds0116Carousel-navBtn {
477
477
  all: unset;
478
478
  display: flex;
479
479
  align-items: center;
@@ -489,21 +489,21 @@
489
489
  transition: var(--animation_transition);
490
490
  box-shadow: var(--shadow_s);
491
491
  }
492
- .bds0115Carousel-navBtn svg {
492
+ .bds0116Carousel-navBtn svg {
493
493
  width: 1.25rem;
494
494
  height: 1.25rem;
495
495
  }
496
- .bds0115Carousel-navBtn:focus-visible {
496
+ .bds0116Carousel-navBtn:focus-visible {
497
497
  outline: var(--outline_default);
498
498
  outline-offset: var(--outline_offset);
499
499
  }
500
500
  @media (hover: hover) and (pointer: fine) {
501
- .bds0115Carousel-navBtn:hover {
501
+ .bds0116Carousel-navBtn:hover {
502
502
  background-color: var(--color_bg--subtle);
503
503
  }
504
504
  }
505
505
  @media (prefers-reduced-motion: reduce) {
506
- .bds0115Carousel-track {
506
+ .bds0116Carousel-track {
507
507
  scroll-behavior: auto;
508
508
  }
509
509
  }
@@ -511,7 +511,7 @@
511
511
 
512
512
  /* src/components/ui/DescriptionList/DescriptionList.module.css */
513
513
  @layer component {
514
- .bds0115DescriptionList-list {
514
+ .bds0116DescriptionList-list {
515
515
  display: flex;
516
516
  flex-direction: column;
517
517
  gap: var(--space_s);
@@ -520,61 +520,61 @@
520
520
  font-size: var(--font_size--body);
521
521
  color: var(--color_on-bg);
522
522
  }
523
- .bds0115DescriptionList-group {
523
+ .bds0116DescriptionList-group {
524
524
  display: flex;
525
525
  flex-direction: column;
526
526
  gap: var(--space_xxs);
527
527
  }
528
- .bds0115DescriptionList-term {
528
+ .bds0116DescriptionList-term {
529
529
  font-weight: var(--font_weight--semibold);
530
530
  color: var(--color_on-bg);
531
531
  }
532
- .bds0115DescriptionList-details {
532
+ .bds0116DescriptionList-details {
533
533
  margin: 0;
534
534
  color: var(--color_on-bg--muted);
535
535
  }
536
- .bds0115DescriptionList---layout_inline .bds0115DescriptionList-group {
536
+ .bds0116DescriptionList---layout_inline .bds0116DescriptionList-group {
537
537
  display: grid;
538
538
  grid-template-columns: minmax(8rem, 1fr) 2fr;
539
539
  gap: var(--space_xs);
540
540
  align-items: baseline;
541
541
  }
542
- .bds0115DescriptionList---layout_inline .bds0115DescriptionList-term {
542
+ .bds0116DescriptionList---layout_inline .bds0116DescriptionList-term {
543
543
  grid-column: 1;
544
544
  }
545
- .bds0115DescriptionList---layout_inline .bds0115DescriptionList-details {
545
+ .bds0116DescriptionList---layout_inline .bds0116DescriptionList-details {
546
546
  grid-column: 2;
547
547
  }
548
548
  }
549
549
 
550
550
  /* src/components/ui/Link/Link.module.css */
551
551
  @layer component {
552
- .bds0115Link-link {
552
+ .bds0116Link-link {
553
553
  color: var(--link_color, var(--color_interactive));
554
554
  text-decoration: underline;
555
555
  text-underline-offset: 0.2em;
556
556
  transition: var(--animation_transition);
557
557
  cursor: pointer;
558
558
  }
559
- .bds0115Link-link:focus-visible {
559
+ .bds0116Link-link:focus-visible {
560
560
  outline: var(--outline_default);
561
561
  outline-offset: var(--outline_offset);
562
562
  border-radius: var(--border_radius--xs);
563
563
  }
564
564
  @media (hover: hover) and (pointer: fine) {
565
- .bds0115Link-link:hover {
565
+ .bds0116Link-link:hover {
566
566
  --link_color: var(--link_color-hover, var(--color_blue--strong));
567
567
  }
568
568
  }
569
- .bds0115Link---variant_default {
569
+ .bds0116Link---variant_default {
570
570
  --link_color: var(--color_interactive);
571
571
  --link_color-hover: var(--color_blue--strong);
572
572
  }
573
- .bds0115Link---variant_subtle {
573
+ .bds0116Link---variant_subtle {
574
574
  --link_color: var(--color_on-bg);
575
575
  --link_color-hover: var(--color_interactive);
576
576
  }
577
- .bds0115Link---variant_standalone {
577
+ .bds0116Link---variant_standalone {
578
578
  --link_color: var(--color_interactive);
579
579
  --link_color-hover: var(--color_blue--strong);
580
580
  display: inline-flex;
@@ -584,12 +584,12 @@
584
584
  text-decoration: none;
585
585
  }
586
586
  @media (hover: hover) and (pointer: fine) {
587
- .bds0115Link---variant_standalone:hover {
587
+ .bds0116Link---variant_standalone:hover {
588
588
  text-decoration: underline;
589
589
  text-underline-offset: 0.2em;
590
590
  }
591
591
  }
592
- .bds0115Link-externalLabel {
592
+ .bds0116Link-externalLabel {
593
593
  position: absolute;
594
594
  width: 1px;
595
595
  height: 1px;
@@ -604,12 +604,12 @@
604
604
 
605
605
  /* src/components/ui/Loading/Loading.module.css */
606
606
  @layer component {
607
- .bds0115Loading-loading {
607
+ .bds0116Loading-loading {
608
608
  display: flex;
609
609
  justify-content: center;
610
610
  align-items: center;
611
611
  }
612
- .bds0115Loading-spinner {
612
+ .bds0116Loading-spinner {
613
613
  width: 2.5em;
614
614
  height: 2.5em;
615
615
  border: 4px solid var(--color_bg);
@@ -617,12 +617,12 @@
617
617
  border-radius: 50%;
618
618
  animation: spin 1s linear infinite;
619
619
  }
620
- .bds0115Loading---size_small .bds0115Loading-spinner {
620
+ .bds0116Loading---size_small .bds0116Loading-spinner {
621
621
  width: 1.5em;
622
622
  height: 1.5em;
623
623
  border-width: 2px;
624
624
  }
625
- .bds0115Loading---size_large .bds0115Loading-spinner {
625
+ .bds0116Loading---size_large .bds0116Loading-spinner {
626
626
  width: 4em;
627
627
  height: 4em;
628
628
  border-width: 6px;
@@ -639,7 +639,7 @@
639
639
 
640
640
  /* src/components/ui/NotificationBanner/NotificationBanner.module.css */
641
641
  @layer component {
642
- .bds0115NotificationBanner-banner {
642
+ .bds0116NotificationBanner-banner {
643
643
  display: flex;
644
644
  align-items: center;
645
645
  gap: var(--space_m);
@@ -651,33 +651,33 @@
651
651
  line-height: var(--font_line-height--body);
652
652
  width: 100%;
653
653
  }
654
- .bds0115NotificationBanner---variant_info {
654
+ .bds0116NotificationBanner---variant_info {
655
655
  --banner_bg: var(--color_blue--subtle);
656
656
  --banner_text: var(--color_on-blue--subtle);
657
657
  --banner_border: var(--color_blue);
658
658
  }
659
- .bds0115NotificationBanner---variant_success {
659
+ .bds0116NotificationBanner---variant_success {
660
660
  --banner_bg: var(--color_success--subtle);
661
661
  --banner_text: var(--color_on-success--subtle);
662
662
  --banner_border: var(--color_success);
663
663
  }
664
- .bds0115NotificationBanner---variant_warning {
664
+ .bds0116NotificationBanner---variant_warning {
665
665
  --banner_bg: var(--color_orange--subtle);
666
666
  --banner_text: var(--color_on-orange--subtle);
667
667
  --banner_border: var(--color_warning);
668
668
  }
669
- .bds0115NotificationBanner---variant_error {
669
+ .bds0116NotificationBanner---variant_error {
670
670
  --banner_bg: rgb(from var(--color_error) r g b / 12%);
671
671
  --banner_text: var(--color_on-bg);
672
672
  --banner_border: var(--color_error);
673
673
  }
674
- .bds0115NotificationBanner-content {
674
+ .bds0116NotificationBanner-content {
675
675
  flex: 1;
676
676
  }
677
- .bds0115NotificationBanner-action {
677
+ .bds0116NotificationBanner-action {
678
678
  flex-shrink: 0;
679
679
  }
680
- .bds0115NotificationBanner-dismiss {
680
+ .bds0116NotificationBanner-dismiss {
681
681
  all: unset;
682
682
  display: flex;
683
683
  align-items: center;
@@ -689,16 +689,16 @@
689
689
  border: 1px solid currentcolor;
690
690
  transition: var(--animation_transition);
691
691
  }
692
- .bds0115NotificationBanner-dismiss svg {
692
+ .bds0116NotificationBanner-dismiss svg {
693
693
  width: 1rem;
694
694
  height: 1rem;
695
695
  }
696
- .bds0115NotificationBanner-dismiss:focus-visible {
696
+ .bds0116NotificationBanner-dismiss:focus-visible {
697
697
  outline: var(--outline_default);
698
698
  outline-offset: var(--outline_offset);
699
699
  }
700
700
  @media (hover: hover) and (pointer: fine) {
701
- .bds0115NotificationBanner-dismiss:hover {
701
+ .bds0116NotificationBanner-dismiss:hover {
702
702
  opacity: 0.7;
703
703
  }
704
704
  }
@@ -706,11 +706,11 @@
706
706
 
707
707
  /* src/components/ui/Pagination/Pagination.module.css */
708
708
  @layer component {
709
- .bds0115Pagination-pagination {
709
+ .bds0116Pagination-pagination {
710
710
  display: flex;
711
711
  justify-content: center;
712
712
  }
713
- .bds0115Pagination-list {
713
+ .bds0116Pagination-list {
714
714
  display: flex;
715
715
  align-items: center;
716
716
  gap: var(--space_xxs);
@@ -718,7 +718,7 @@
718
718
  margin: 0;
719
719
  padding: 0;
720
720
  }
721
- .bds0115Pagination-button {
721
+ .bds0116Pagination-button {
722
722
  all: unset;
723
723
  display: inline-flex;
724
724
  align-items: center;
@@ -737,30 +737,30 @@
737
737
  transition: var(--animation_transition);
738
738
  box-sizing: border-box;
739
739
  }
740
- .bds0115Pagination-button:disabled {
740
+ .bds0116Pagination-button:disabled {
741
741
  opacity: 0.4;
742
742
  cursor: not-allowed;
743
743
  }
744
- .bds0115Pagination-button:focus-visible {
744
+ .bds0116Pagination-button:focus-visible {
745
745
  outline: var(--outline_default);
746
746
  outline-offset: var(--outline_offset);
747
747
  }
748
748
  @media (hover: hover) and (pointer: fine) {
749
- .bds0115Pagination-button:not(:disabled, .bds0115Pagination---active):hover {
749
+ .bds0116Pagination-button:not(:disabled, .bds0116Pagination---active):hover {
750
750
  --btn_bg: var(--color_bg--subtle);
751
751
  --btn_color: var(--color_interactive);
752
752
  }
753
753
  }
754
- .bds0115Pagination-button.bds0115Pagination---active {
754
+ .bds0116Pagination-button.bds0116Pagination---active {
755
755
  --btn_bg: var(--color_interactive);
756
756
  --btn_color: var(--color_on-interactive);
757
757
  --btn_border: var(--color_interactive);
758
758
  }
759
- .bds0115Pagination-button.bds0115Pagination---nav svg {
759
+ .bds0116Pagination-button.bds0116Pagination---nav svg {
760
760
  width: 1rem;
761
761
  height: 1rem;
762
762
  }
763
- .bds0115Pagination-ellipsis {
763
+ .bds0116Pagination-ellipsis {
764
764
  display: inline-flex;
765
765
  align-items: center;
766
766
  justify-content: center;
@@ -774,49 +774,46 @@
774
774
 
775
775
  /* src/components/ui/Progress/Progress.module.css */
776
776
  @layer component {
777
- .bds0115Progress-container {
777
+ .bds0116Progress-container {
778
778
  display: flex;
779
779
  flex-direction: column;
780
780
  gap: var(--space_xxs);
781
781
  width: 100%;
782
782
  }
783
- .bds0115Progress-labelRow {
783
+ .bds0116Progress-labelRow {
784
784
  display: flex;
785
785
  justify-content: space-between;
786
786
  align-items: baseline;
787
787
  font-size: var(--font_size--body--s);
788
788
  color: var(--color_on-bg);
789
789
  }
790
- .bds0115Progress-label {
791
- font-weight: var(--font_weight--semibold);
792
- }
793
- .bds0115Progress-value {
790
+ .bds0116Progress-value {
794
791
  font-variant-numeric: tabular-nums;
795
792
  }
796
- .bds0115Progress-track {
793
+ .bds0116Progress-track {
797
794
  width: 100%;
798
795
  height: var(--progress_height, var(--space_xs));
799
796
  background-color: var(--color_bg--subtle);
800
797
  border-radius: 999px;
801
798
  overflow: hidden;
802
799
  }
803
- .bds0115Progress-track.bds0115Progress---size_small {
800
+ .bds0116Progress-track.bds0116Progress---size_small {
804
801
  --progress_height: var(--space_xxs);
805
802
  }
806
- .bds0115Progress-track.bds0115Progress---size_medium {
803
+ .bds0116Progress-track.bds0116Progress---size_medium {
807
804
  --progress_height: var(--space_xs);
808
805
  }
809
- .bds0115Progress-track.bds0115Progress---size_large {
806
+ .bds0116Progress-track.bds0116Progress---size_large {
810
807
  --progress_height: var(--space_s);
811
808
  }
812
- .bds0115Progress-fill {
809
+ .bds0116Progress-fill {
813
810
  height: 100%;
814
811
  background-color: var(--progress_color-active, var(--color_active));
815
812
  border-radius: 999px;
816
813
  transition: width var(--animation_transition-duration) var(--animation_easing);
817
814
  }
818
815
  @media (prefers-reduced-motion: reduce) {
819
- .bds0115Progress-fill {
816
+ .bds0116Progress-fill {
820
817
  transition: none;
821
818
  }
822
819
  }
@@ -824,23 +821,23 @@
824
821
 
825
822
  /* src/components/ui/ProgressCircle/ProgressCircle.module.css */
826
823
  @layer component {
827
- .bds0115ProgressCircle-wrapper {
824
+ .bds0116ProgressCircle-wrapper {
828
825
  position: relative;
829
826
  display: inline-flex;
830
827
  align-items: center;
831
828
  justify-content: center;
832
829
  }
833
- .bds0115ProgressCircle-svg {
830
+ .bds0116ProgressCircle-svg {
834
831
  display: block;
835
832
  }
836
- .bds0115ProgressCircle-track {
833
+ .bds0116ProgressCircle-track {
837
834
  stroke: var(--color_bg--subtle);
838
835
  }
839
- .bds0115ProgressCircle-fill {
836
+ .bds0116ProgressCircle-fill {
840
837
  stroke: var(--progressCircle_color-active, var(--color_active));
841
838
  transition: stroke-dashoffset var(--animation_transition-duration) var(--animation_easing);
842
839
  }
843
- .bds0115ProgressCircle-value {
840
+ .bds0116ProgressCircle-value {
844
841
  position: absolute;
845
842
  font-size: var(--font_size--body--s);
846
843
  font-weight: var(--font_weight--semibold);
@@ -848,17 +845,17 @@
848
845
  color: var(--color_on-bg);
849
846
  line-height: 1;
850
847
  }
851
- .bds0115ProgressCircle---size_small .bds0115ProgressCircle-value {
848
+ .bds0116ProgressCircle---size_small .bds0116ProgressCircle-value {
852
849
  font-size: 0.5rem;
853
850
  }
854
- .bds0115ProgressCircle---size_medium .bds0115ProgressCircle-value {
851
+ .bds0116ProgressCircle---size_medium .bds0116ProgressCircle-value {
855
852
  font-size: var(--font_size--body--s);
856
853
  }
857
- .bds0115ProgressCircle---size_large .bds0115ProgressCircle-value {
854
+ .bds0116ProgressCircle---size_large .bds0116ProgressCircle-value {
858
855
  font-size: var(--font_size--body);
859
856
  }
860
857
  @media (prefers-reduced-motion: reduce) {
861
- .bds0115ProgressCircle-fill {
858
+ .bds0116ProgressCircle-fill {
862
859
  transition: none;
863
860
  }
864
861
  }
@@ -866,16 +863,16 @@
866
863
 
867
864
  /* src/components/ui/Separator/Separator.module.css */
868
865
  @layer component {
869
- .bds0115Separator-separator {
866
+ .bds0116Separator-separator {
870
867
  border: none;
871
868
  background-color: var(--separator_color, var(--color_on-bg));
872
869
  }
873
- .bds0115Separator-separator.bds0115Separator---horizontal {
870
+ .bds0116Separator-separator.bds0116Separator---horizontal {
874
871
  display: block;
875
872
  width: 100%;
876
873
  height: var(--separator_thickness, 1px);
877
874
  }
878
- .bds0115Separator-separator.bds0115Separator---vertical {
875
+ .bds0116Separator-separator.bds0116Separator---vertical {
879
876
  display: inline-block;
880
877
  width: var(--separator_thickness, 1px);
881
878
  align-self: stretch;
@@ -884,7 +881,7 @@
884
881
 
885
882
  /* src/components/ui/Skeleton/Skeleton.module.css */
886
883
  @layer component {
887
- .bds0115Skeleton-skeleton {
884
+ .bds0116Skeleton-skeleton {
888
885
  background:
889
886
  linear-gradient(
890
887
  90deg,
@@ -908,7 +905,7 @@
908
905
 
909
906
  /* src/components/ui/SkipLink/SkipLink.module.css */
910
907
  @layer component {
911
- .bds0115SkipLink-skipLink {
908
+ .bds0116SkipLink-skipLink {
912
909
  position: absolute;
913
910
  inset-block-start: var(--space_s);
914
911
  inset-inline-start: var(--space_s);
@@ -924,13 +921,13 @@
924
921
  transform: translateY(-200%);
925
922
  transition: transform var(--animation_transition-duration) var(--animation_easing);
926
923
  }
927
- .bds0115SkipLink-skipLink:focus-visible {
924
+ .bds0116SkipLink-skipLink:focus-visible {
928
925
  transform: translateY(0);
929
926
  outline: var(--outline_default);
930
927
  outline-offset: var(--outline_offset);
931
928
  }
932
929
  @media (prefers-reduced-motion: reduce) {
933
- .bds0115SkipLink-skipLink {
930
+ .bds0116SkipLink-skipLink {
934
931
  transition: none;
935
932
  }
936
933
  }
@@ -938,29 +935,29 @@
938
935
 
939
936
  /* src/components/ui/Table/Table.module.css */
940
937
  @layer component {
941
- .bds0115Table-wrapper {
938
+ .bds0116Table-wrapper {
942
939
  width: 100%;
943
940
  overflow-x: auto;
944
941
  border-radius: var(--border_radius--s);
945
942
  border: 1px solid var(--color_bg--subtle);
946
943
  }
947
- .bds0115Table-table {
944
+ .bds0116Table-table {
948
945
  width: 100%;
949
946
  border-collapse: collapse;
950
947
  font-size: var(--font_size--body);
951
948
  font-family: var(--font_family--body);
952
949
  }
953
- .bds0115Table-caption {
950
+ .bds0116Table-caption {
954
951
  caption-side: top;
955
952
  text-align: start;
956
953
  padding: var(--space_s) var(--space_m);
957
954
  font-weight: var(--font_weight--semibold);
958
955
  color: var(--color_on-bg);
959
956
  }
960
- .bds0115Table-thead {
957
+ .bds0116Table-thead {
961
958
  background-color: var(--color_bg--subtle);
962
959
  }
963
- .bds0115Table-th {
960
+ .bds0116Table-th {
964
961
  padding: var(--space_s) var(--space_m);
965
962
  text-align: start;
966
963
  font-weight: var(--font_weight--semibold);
@@ -969,10 +966,10 @@
969
966
  white-space: nowrap;
970
967
  border-bottom: 1px solid var(--color_bg--subtle);
971
968
  }
972
- .bds0115Table-th.bds0115Table---sortable {
969
+ .bds0116Table-th.bds0116Table---sortable {
973
970
  padding: 0;
974
971
  }
975
- .bds0115Table-sortButton {
972
+ .bds0116Table-sortButton {
976
973
  all: unset;
977
974
  display: flex;
978
975
  align-items: center;
@@ -986,47 +983,47 @@
986
983
  transition: var(--animation_transition);
987
984
  box-sizing: border-box;
988
985
  }
989
- .bds0115Table-sortButton:focus-visible {
986
+ .bds0116Table-sortButton:focus-visible {
990
987
  outline: var(--outline_default);
991
988
  outline-offset: calc(var(--outline_offset) * -1);
992
989
  }
993
990
  @media (hover: hover) and (pointer: fine) {
994
- .bds0115Table-sortButton:hover {
991
+ .bds0116Table-sortButton:hover {
995
992
  color: var(--color_on-bg);
996
993
  }
997
994
  }
998
- .bds0115Table-sortIcon {
995
+ .bds0116Table-sortIcon {
999
996
  width: 1rem;
1000
997
  height: 1rem;
1001
998
  opacity: 0.4;
1002
999
  transition: transform var(--animation_transition-duration) var(--animation_easing), opacity var(--animation_transition-duration) var(--animation_easing);
1003
1000
  }
1004
- .bds0115Table-sortIcon.bds0115Table---sort-active {
1001
+ .bds0116Table-sortIcon.bds0116Table---sort-active {
1005
1002
  opacity: 1;
1006
1003
  color: var(--color_interactive);
1007
1004
  }
1008
- .bds0115Table-sortIcon.bds0115Table---sort-desc {
1005
+ .bds0116Table-sortIcon.bds0116Table---sort-desc {
1009
1006
  transform: rotate(180deg);
1010
1007
  }
1011
- .bds0115Table-tbody .bds0115Table-tr {
1008
+ .bds0116Table-tbody .bds0116Table-tr {
1012
1009
  border-bottom: 1px solid var(--color_bg--subtle);
1013
1010
  transition: var(--animation_transition);
1014
1011
  }
1015
- .bds0115Table-tbody .bds0115Table-tr:last-child {
1012
+ .bds0116Table-tbody .bds0116Table-tr:last-child {
1016
1013
  border-bottom: none;
1017
1014
  }
1018
1015
  @media (hover: hover) and (pointer: fine) {
1019
- .bds0115Table-tbody .bds0115Table-tr:hover {
1016
+ .bds0116Table-tbody .bds0116Table-tr:hover {
1020
1017
  background-color: var(--color_bg--subtle);
1021
1018
  }
1022
1019
  }
1023
- .bds0115Table-td {
1020
+ .bds0116Table-td {
1024
1021
  padding: var(--space_s) var(--space_m);
1025
1022
  color: var(--color_on-bg);
1026
1023
  vertical-align: middle;
1027
1024
  }
1028
1025
  @media (prefers-reduced-motion: reduce) {
1029
- .bds0115Table-sortIcon {
1026
+ .bds0116Table-sortIcon {
1030
1027
  transition: none;
1031
1028
  }
1032
1029
  }
@@ -1034,16 +1031,16 @@
1034
1031
 
1035
1032
  /* src/components/ui/Tabs/Tabs.module.css */
1036
1033
  @layer component {
1037
- .bds0115Tabs-tabs {
1034
+ .bds0116Tabs-tabs {
1038
1035
  display: flex;
1039
1036
  flex-direction: column;
1040
1037
  }
1041
- .bds0115Tabs-tabList {
1038
+ .bds0116Tabs-tabList {
1042
1039
  display: flex;
1043
1040
  border-bottom: 1px solid var(--color_bg--subtle);
1044
1041
  gap: var(--space_xxs);
1045
1042
  }
1046
- .bds0115Tabs-tab {
1043
+ .bds0116Tabs-tab {
1047
1044
  all: unset;
1048
1045
  display: inline-flex;
1049
1046
  align-items: center;
@@ -1057,28 +1054,28 @@
1057
1054
  cursor: pointer;
1058
1055
  transition: var(--animation_transition);
1059
1056
  }
1060
- .bds0115Tabs-tab.bds0115Tabs---active {
1057
+ .bds0116Tabs-tab.bds0116Tabs---active {
1061
1058
  --tab_color: var(--color_interactive);
1062
1059
  --tab_border-color: var(--color_interactive);
1063
1060
  }
1064
- .bds0115Tabs-tab:disabled {
1061
+ .bds0116Tabs-tab:disabled {
1065
1062
  opacity: 0.4;
1066
1063
  cursor: not-allowed;
1067
1064
  }
1068
- .bds0115Tabs-tab:focus-visible {
1065
+ .bds0116Tabs-tab:focus-visible {
1069
1066
  outline: var(--outline_default);
1070
1067
  outline-offset: var(--outline_offset);
1071
1068
  border-radius: var(--border_radius--xs);
1072
1069
  }
1073
1070
  @media (hover: hover) and (pointer: fine) {
1074
- .bds0115Tabs-tab:not(:disabled, .bds0115Tabs---active):hover {
1071
+ .bds0116Tabs-tab:not(:disabled, .bds0116Tabs---active):hover {
1075
1072
  --tab_color: var(--color_interactive);
1076
1073
  }
1077
1074
  }
1078
- .bds0115Tabs-panel {
1075
+ .bds0116Tabs-panel {
1079
1076
  padding-block-start: var(--space_m);
1080
1077
  }
1081
- .bds0115Tabs-panel:focus-visible {
1078
+ .bds0116Tabs-panel:focus-visible {
1082
1079
  outline: var(--outline_default);
1083
1080
  outline-offset: var(--outline_offset);
1084
1081
  }
@@ -1086,12 +1083,12 @@
1086
1083
 
1087
1084
  /* src/components/ui/Tooltip/Tooltip.module.css */
1088
1085
  @layer component {
1089
- .bds0115Tooltip-wrapper {
1086
+ .bds0116Tooltip-wrapper {
1090
1087
  position: relative;
1091
1088
  display: inline-flex;
1092
1089
  align-items: center;
1093
1090
  }
1094
- .bds0115Tooltip-tooltip {
1091
+ .bds0116Tooltip-tooltip {
1095
1092
  position: absolute;
1096
1093
  z-index: var(--z-index_popover);
1097
1094
  padding: var(--space_xxs) var(--space_xs);
@@ -1106,33 +1103,33 @@
1106
1103
  opacity: 0;
1107
1104
  transition: opacity var(--animation_transition-duration) var(--animation_easing);
1108
1105
  }
1109
- .bds0115Tooltip-wrapper:hover .bds0115Tooltip-tooltip,
1110
- .bds0115Tooltip-wrapper:focus-within .bds0115Tooltip-tooltip {
1106
+ .bds0116Tooltip-wrapper:hover .bds0116Tooltip-tooltip,
1107
+ .bds0116Tooltip-wrapper:focus-within .bds0116Tooltip-tooltip {
1111
1108
  visibility: visible;
1112
1109
  opacity: 1;
1113
1110
  }
1114
- .bds0115Tooltip---placement_top {
1111
+ .bds0116Tooltip---placement_top {
1115
1112
  bottom: calc(100% + var(--space_xs));
1116
1113
  left: 50%;
1117
1114
  transform: translateX(-50%);
1118
1115
  }
1119
- .bds0115Tooltip---placement_bottom {
1116
+ .bds0116Tooltip---placement_bottom {
1120
1117
  top: calc(100% + var(--space_xs));
1121
1118
  left: 50%;
1122
1119
  transform: translateX(-50%);
1123
1120
  }
1124
- .bds0115Tooltip---placement_left {
1121
+ .bds0116Tooltip---placement_left {
1125
1122
  right: calc(100% + var(--space_xs));
1126
1123
  top: 50%;
1127
1124
  transform: translateY(-50%);
1128
1125
  }
1129
- .bds0115Tooltip---placement_right {
1126
+ .bds0116Tooltip---placement_right {
1130
1127
  left: calc(100% + var(--space_xs));
1131
1128
  top: 50%;
1132
1129
  transform: translateY(-50%);
1133
1130
  }
1134
1131
  @media (prefers-reduced-motion: reduce) {
1135
- .bds0115Tooltip-tooltip {
1132
+ .bds0116Tooltip-tooltip {
1136
1133
  transition: none;
1137
1134
  }
1138
1135
  }
@@ -1140,34 +1137,34 @@
1140
1137
 
1141
1138
  /* src/components/ui/Typography/Typography.module.css */
1142
1139
  @layer component {
1143
- .bds0115Typography-typography {
1140
+ .bds0116Typography-typography {
1144
1141
  margin: 0;
1145
1142
  font-family: var(--font_family--body);
1146
1143
  color: var(--typography_color, var(--color_on-bg));
1147
1144
  }
1148
- .bds0115Typography---h1 {
1145
+ .bds0116Typography---h1 {
1149
1146
  font-family: var(--font_family--heading);
1150
1147
  font-size: var(--font_size--heading-1);
1151
1148
  font-weight: var(--font_weight--bold);
1152
1149
  line-height: var(--font_line-height--heading);
1153
1150
  }
1154
- .bds0115Typography---h2 {
1151
+ .bds0116Typography---h2 {
1155
1152
  font-family: var(--font_family--heading);
1156
1153
  font-size: var(--font_size--heading-2);
1157
1154
  font-weight: var(--font_weight--semibold);
1158
1155
  line-height: var(--font_line-height--heading);
1159
1156
  }
1160
- .bds0115Typography---h3 {
1157
+ .bds0116Typography---h3 {
1161
1158
  font-family: var(--font_family--heading);
1162
1159
  font-size: var(--font_size--heading-3);
1163
1160
  font-weight: var(--font_weight--semibold);
1164
1161
  line-height: var(--font_line-height--heading);
1165
1162
  }
1166
- .bds0115Typography---body {
1163
+ .bds0116Typography---body {
1167
1164
  font-size: var(--font_size--body);
1168
1165
  line-height: var(--font_line-height--body);
1169
1166
  }
1170
- .bds0115Typography---body_s {
1167
+ .bds0116Typography---body_s {
1171
1168
  font-size: var(--font_size--body--s);
1172
1169
  line-height: var(--font_line-height--body);
1173
1170
  }
@@ -1189,8 +1186,8 @@
1189
1186
  }
1190
1187
  }
1191
1188
  @layer component {
1192
- .bds0115Button-button,
1193
- .bds0115Button-button[href] {
1189
+ .bds0116Button-button,
1190
+ .bds0116Button-button[href] {
1194
1191
  all: unset;
1195
1192
  position: relative;
1196
1193
  font: inherit;
@@ -1211,68 +1208,68 @@
1211
1208
  border: 2px solid var(--button_border-color, var(--color_cta));
1212
1209
  transition: var(--animation_transition);
1213
1210
  }
1214
- .bds0115Button-button.bds0115Button---primary {
1211
+ .bds0116Button-button.bds0116Button---primary {
1215
1212
  --button_border-color: transparent;
1216
1213
  }
1217
- .bds0115Button-button.bds0115Button---secondary {
1214
+ .bds0116Button-button.bds0116Button---secondary {
1218
1215
  --button_bg: var(--color_bg);
1219
1216
  --button_text: var(--color_on-bg);
1220
1217
  --button_border-color: var(--button_text);
1221
1218
  }
1222
- .bds0115Button-button.bds0115Button---size_small {
1219
+ .bds0116Button-button.bds0116Button---size_small {
1223
1220
  --button_height: 2.25em;
1224
1221
  --button_font-size: var(--font_size--body--s);
1225
1222
  --button_border_radius--s: var(--border_radius--xs);
1226
1223
  padding-inline: var(--space_m);
1227
1224
  }
1228
- .bds0115Button-button.bds0115Button---size_medium {
1225
+ .bds0116Button-button.bds0116Button---size_medium {
1229
1226
  --button_height: 3em;
1230
1227
  padding-inline: var(--space_l);
1231
1228
  }
1232
- .bds0115Button-button.bds0115Button---size_large {
1229
+ .bds0116Button-button.bds0116Button---size_large {
1233
1230
  --button_font-size: var(--font_size--heading-3);
1234
1231
  padding-inline: var(--space_xl);
1235
1232
  --button_border_radius--s: var(--border_radius--m);
1236
1233
  }
1237
- .bds0115Button-button.bds0115Button---hasPulse {
1234
+ .bds0116Button-button.bds0116Button---hasPulse {
1238
1235
  animation: pulse 3s infinite;
1239
1236
  }
1240
- .bds0115Button-button[href] {
1237
+ .bds0116Button-button[href] {
1241
1238
  text-decoration: none;
1242
1239
  }
1243
- .bds0115Button-button svg {
1240
+ .bds0116Button-button svg {
1244
1241
  --icon__stroke: currentcolor;
1245
1242
  fill: currentcolor;
1246
1243
  color: currentcolor;
1247
1244
  flex-shrink: 0;
1248
1245
  }
1249
- .bds0115Button-prefix {
1246
+ .bds0116Button-prefix {
1250
1247
  display: flex;
1251
1248
  align-items: center;
1252
1249
  margin-inline-start: calc(var(--space_s) * -1);
1253
1250
  transition: var(--animation_transition);
1254
1251
  }
1255
- .bds0115Button-suffix {
1252
+ .bds0116Button-suffix {
1256
1253
  display: flex;
1257
1254
  align-items: center;
1258
1255
  margin-inline-end: calc(var(--space_s) * -1);
1259
1256
  transition: var(--animation_transition);
1260
1257
  }
1261
1258
  @media (hover: hover) and (pointer: fine) {
1262
- .bds0115Button-button:hover .bds0115Button-prefix svg {
1259
+ .bds0116Button-button:hover .bds0116Button-prefix svg {
1263
1260
  animation: 2s infinite fadeZoom ease-out;
1264
1261
  }
1265
- .bds0115Button-button:hover .bds0115Button-suffix svg {
1262
+ .bds0116Button-button:hover .bds0116Button-suffix svg {
1266
1263
  animation: 2s infinite fadeZoom ease-out;
1267
1264
  }
1268
1265
  }
1269
- .bds0115Button-button:focus-visible {
1266
+ .bds0116Button-button:focus-visible {
1270
1267
  outline-offset: var(--outline_offset);
1271
1268
  outline: var(--outline_default);
1272
1269
  border-radius: var(--border_radius--s);
1273
1270
  }
1274
1271
  @media (hover: hover) and (pointer: fine) {
1275
- .bds0115Button-button:hover {
1272
+ .bds0116Button-button:hover {
1276
1273
  --button_bg: var(--color_bg);
1277
1274
  --button_text: var(--color_interactive);
1278
1275
  --button_pulse-color: var(--color_interactive);
@@ -1283,7 +1280,7 @@
1283
1280
 
1284
1281
  /* src/components/interaction/Command/Command.module.css */
1285
1282
  @layer component {
1286
- .bds0115Command-dialog {
1283
+ .bds0116Command-dialog {
1287
1284
  padding: 0;
1288
1285
  border: none;
1289
1286
  border-radius: var(--border_radius--m);
@@ -1293,11 +1290,11 @@
1293
1290
  overflow: visible;
1294
1291
  margin-block-start: 10vh;
1295
1292
  }
1296
- .bds0115Command-dialog::backdrop {
1293
+ .bds0116Command-dialog::backdrop {
1297
1294
  background-color: var(--command_backdrop-color, rgb(0 0 0 / 50%));
1298
1295
  backdrop-filter: blur(3px);
1299
1296
  }
1300
- .bds0115Command-palette {
1297
+ .bds0116Command-palette {
1301
1298
  display: flex;
1302
1299
  flex-direction: column;
1303
1300
  background-color: var(--command_color, var(--color_bg));
@@ -1308,7 +1305,7 @@
1308
1305
  max-height: 70vh;
1309
1306
  border: 1px solid currentcolor;
1310
1307
  }
1311
- .bds0115Command-searchRow {
1308
+ .bds0116Command-searchRow {
1312
1309
  display: flex;
1313
1310
  align-items: center;
1314
1311
  gap: var(--space_xs);
@@ -1316,13 +1313,13 @@
1316
1313
  border-block-end: 1px solid currentcolor;
1317
1314
  flex-shrink: 0;
1318
1315
  }
1319
- .bds0115Command-searchIcon {
1316
+ .bds0116Command-searchIcon {
1320
1317
  width: 1.25rem;
1321
1318
  height: 1.25rem;
1322
1319
  color: var(--color_on-bg--muted);
1323
1320
  flex-shrink: 0;
1324
1321
  }
1325
- .bds0115Command-search {
1322
+ .bds0116Command-search {
1326
1323
  flex: 1;
1327
1324
  border: none;
1328
1325
  outline: none;
@@ -1332,10 +1329,10 @@
1332
1329
  background: transparent;
1333
1330
  min-width: 0;
1334
1331
  }
1335
- .bds0115Command-search::placeholder {
1332
+ .bds0116Command-search::placeholder {
1336
1333
  color: var(--color_on-bg--muted);
1337
1334
  }
1338
- .bds0115Command-escHint {
1335
+ .bds0116Command-escHint {
1339
1336
  font-size: var(--font_size--body--s);
1340
1337
  color: var(--color_on-bg--muted);
1341
1338
  border: 1px solid currentcolor;
@@ -1343,18 +1340,18 @@
1343
1340
  padding: 0.1em 0.4em;
1344
1341
  flex-shrink: 0;
1345
1342
  }
1346
- .bds0115Command-list {
1343
+ .bds0116Command-list {
1347
1344
  overflow-y: auto;
1348
1345
  list-style: none;
1349
1346
  margin: 0;
1350
1347
  padding: var(--space_xs) 0;
1351
1348
  }
1352
- .bds0115Command-groupList {
1349
+ .bds0116Command-groupList {
1353
1350
  list-style: none;
1354
1351
  margin: 0;
1355
1352
  padding: 0;
1356
1353
  }
1357
- .bds0115Command-group {
1354
+ .bds0116Command-group {
1358
1355
  padding: var(--space_xs) var(--space_m);
1359
1356
  font-size: var(--font_size--body--s);
1360
1357
  font-weight: var(--font_weight--semibold);
@@ -1362,7 +1359,7 @@
1362
1359
  text-transform: uppercase;
1363
1360
  letter-spacing: 0.05em;
1364
1361
  }
1365
- .bds0115Command-item {
1362
+ .bds0116Command-item {
1366
1363
  display: flex;
1367
1364
  align-items: center;
1368
1365
  gap: var(--space_s);
@@ -1370,26 +1367,26 @@
1370
1367
  cursor: pointer;
1371
1368
  transition: background-color var(--animation_transition-duration) var(--animation_easing);
1372
1369
  }
1373
- .bds0115Command-itemActive {
1370
+ .bds0116Command-itemActive {
1374
1371
  background-color: var(--color_bg--subtle);
1375
1372
  }
1376
- .bds0115Command-itemLabel {
1373
+ .bds0116Command-itemLabel {
1377
1374
  flex: 1;
1378
1375
  font-size: var(--font_size--body);
1379
1376
  color: var(--color_on-bg);
1380
1377
  }
1381
- .bds0115Command-itemDesc {
1378
+ .bds0116Command-itemDesc {
1382
1379
  font-size: var(--font_size--body--s);
1383
1380
  color: var(--color_on-bg--muted);
1384
1381
  }
1385
- .bds0115Command-shortcut {
1382
+ .bds0116Command-shortcut {
1386
1383
  font-size: var(--font_size--body--s);
1387
1384
  color: var(--color_on-bg--muted);
1388
1385
  border: 1px solid currentcolor;
1389
1386
  border-radius: var(--border_radius--xs);
1390
1387
  padding: 0.1em 0.4em;
1391
1388
  }
1392
- .bds0115Command-empty {
1389
+ .bds0116Command-empty {
1393
1390
  padding: var(--space_l) var(--space_m);
1394
1391
  text-align: center;
1395
1392
  color: var(--color_on-bg--muted);
@@ -1399,7 +1396,7 @@
1399
1396
 
1400
1397
  /* src/components/interaction/Dialog/Dialog.module.css */
1401
1398
  @layer component {
1402
- .bds0115Dialog-dialog {
1399
+ .bds0116Dialog-dialog {
1403
1400
  font-size: var(--font_size--body--s);
1404
1401
  border: 2px solid currentcolor;
1405
1402
  background-color: var(--dialog_color ,var(--color_grey--subtle));
@@ -1410,19 +1407,19 @@
1410
1407
  max-height: 90svh;
1411
1408
  overflow: visible;
1412
1409
  }
1413
- .bds0115Dialog-dialogContent {
1410
+ .bds0116Dialog-dialogContent {
1414
1411
  display: grid;
1415
1412
  gap: var(--grid_gap);
1416
1413
  overflow-y: auto;
1417
1414
  min-height: 0;
1418
1415
  flex: 1;
1419
1416
  }
1420
- .bds0115Dialog-closeForm {
1417
+ .bds0116Dialog-closeForm {
1421
1418
  position: absolute;
1422
1419
  inset-block-start: -1em;
1423
1420
  inset-inline-end: -1em;
1424
1421
  }
1425
- .bds0115Dialog-closeButton {
1422
+ .bds0116Dialog-closeButton {
1426
1423
  all: unset;
1427
1424
  width: 2em;
1428
1425
  height: 2em;
@@ -1435,11 +1432,11 @@
1435
1432
  border: 2px solid currentcolor;
1436
1433
  cursor: pointer;
1437
1434
  }
1438
- .bds0115Dialog-closeButton svg {
1435
+ .bds0116Dialog-closeButton svg {
1439
1436
  width: 1.25em;
1440
1437
  height: 1.25em;
1441
1438
  }
1442
- .bds0115Dialog-dialog::backdrop {
1439
+ .bds0116Dialog-dialog::backdrop {
1443
1440
  background-color: var(--dialog_backdrop-color, rgb(0 0 0 / 50%));
1444
1441
  backdrop-filter: blur(3px);
1445
1442
  }
@@ -1447,7 +1444,7 @@
1447
1444
 
1448
1445
  /* src/components/interaction/Drawer/Drawer.module.css */
1449
1446
  @layer component {
1450
- .bds0115Drawer-drawer {
1447
+ .bds0116Drawer-drawer {
1451
1448
  position: fixed;
1452
1449
  inset: 0;
1453
1450
  margin: 0;
@@ -1460,11 +1457,11 @@
1460
1457
  background: transparent;
1461
1458
  overflow: hidden;
1462
1459
  }
1463
- .bds0115Drawer-drawer::backdrop {
1460
+ .bds0116Drawer-drawer::backdrop {
1464
1461
  background-color: var(--drawer_backdrop-color, rgb(0 0 0 / 50%));
1465
1462
  backdrop-filter: blur(3px);
1466
1463
  }
1467
- .bds0115Drawer-panel {
1464
+ .bds0116Drawer-panel {
1468
1465
  position: absolute;
1469
1466
  inset-block: 0;
1470
1467
  display: flex;
@@ -1477,13 +1474,13 @@
1477
1474
  overflow: hidden;
1478
1475
  transition: var(--animation_transition);
1479
1476
  }
1480
- .bds0115Drawer---side_right .bds0115Drawer-panel {
1477
+ .bds0116Drawer---side_right .bds0116Drawer-panel {
1481
1478
  inset-inline-end: 0;
1482
1479
  }
1483
- .bds0115Drawer---side_left .bds0115Drawer-panel {
1480
+ .bds0116Drawer---side_left .bds0116Drawer-panel {
1484
1481
  inset-inline-start: 0;
1485
1482
  }
1486
- .bds0115Drawer-header {
1483
+ .bds0116Drawer-header {
1487
1484
  display: flex;
1488
1485
  align-items: center;
1489
1486
  justify-content: space-between;
@@ -1491,7 +1488,7 @@
1491
1488
  border-block-end: 1px solid currentcolor;
1492
1489
  flex-shrink: 0;
1493
1490
  }
1494
- .bds0115Drawer-closeButton {
1491
+ .bds0116Drawer-closeButton {
1495
1492
  all: unset;
1496
1493
  display: flex;
1497
1494
  align-items: center;
@@ -1502,26 +1499,26 @@
1502
1499
  cursor: pointer;
1503
1500
  transition: var(--animation_transition);
1504
1501
  }
1505
- .bds0115Drawer-closeButton svg {
1502
+ .bds0116Drawer-closeButton svg {
1506
1503
  width: 1.25rem;
1507
1504
  height: 1.25rem;
1508
1505
  }
1509
- .bds0115Drawer-closeButton:focus-visible {
1506
+ .bds0116Drawer-closeButton:focus-visible {
1510
1507
  outline: var(--outline_default);
1511
1508
  outline-offset: var(--outline_offset);
1512
1509
  }
1513
1510
  @media (hover: hover) and (pointer: fine) {
1514
- .bds0115Drawer-closeButton:hover {
1511
+ .bds0116Drawer-closeButton:hover {
1515
1512
  background-color: var(--color_bg--subtle);
1516
1513
  }
1517
1514
  }
1518
- .bds0115Drawer-body {
1515
+ .bds0116Drawer-body {
1519
1516
  flex: 1;
1520
1517
  overflow-y: auto;
1521
1518
  padding: var(--space_l);
1522
1519
  }
1523
1520
  @media (prefers-reduced-motion: reduce) {
1524
- .bds0115Drawer-panel {
1521
+ .bds0116Drawer-panel {
1525
1522
  transition: none;
1526
1523
  }
1527
1524
  }
@@ -1529,11 +1526,11 @@
1529
1526
 
1530
1527
  /* src/components/interaction/DropdownMenu/DropdownMenu.module.css */
1531
1528
  @layer component {
1532
- .bds0115DropdownMenu-wrapper {
1529
+ .bds0116DropdownMenu-wrapper {
1533
1530
  position: relative;
1534
1531
  display: inline-flex;
1535
1532
  }
1536
- .bds0115DropdownMenu-menu {
1533
+ .bds0116DropdownMenu-menu {
1537
1534
  position: absolute;
1538
1535
  top: calc(100% + var(--space_xxs));
1539
1536
  z-index: var(--z-index_dropdown);
@@ -1547,19 +1544,19 @@
1547
1544
  list-style: none;
1548
1545
  margin: 0;
1549
1546
  }
1550
- .bds0115DropdownMenu---placement_bottom-start {
1547
+ .bds0116DropdownMenu---placement_bottom-start {
1551
1548
  left: 0;
1552
1549
  }
1553
- .bds0115DropdownMenu---placement_bottom-end {
1550
+ .bds0116DropdownMenu---placement_bottom-end {
1554
1551
  right: 0;
1555
1552
  }
1556
- .bds0115DropdownMenu-separator {
1553
+ .bds0116DropdownMenu-separator {
1557
1554
  border: none;
1558
1555
  border-top: 1px solid currentcolor;
1559
1556
  margin: var(--space_xxs) 0;
1560
1557
  opacity: 0.15;
1561
1558
  }
1562
- .bds0115DropdownMenu-item {
1559
+ .bds0116DropdownMenu-item {
1563
1560
  all: unset;
1564
1561
  display: flex;
1565
1562
  align-items: center;
@@ -1573,22 +1570,22 @@
1573
1570
  box-sizing: border-box;
1574
1571
  transition: var(--animation_transition);
1575
1572
  }
1576
- .bds0115DropdownMenu-item:disabled {
1573
+ .bds0116DropdownMenu-item:disabled {
1577
1574
  opacity: 0.4;
1578
1575
  cursor: not-allowed;
1579
1576
  }
1580
- .bds0115DropdownMenu-item:focus-visible {
1577
+ .bds0116DropdownMenu-item:focus-visible {
1581
1578
  outline: var(--outline_default);
1582
1579
  outline-offset: calc(var(--outline_offset) * -1);
1583
1580
  border-radius: var(--border_radius--xs);
1584
1581
  }
1585
1582
  @media (hover: hover) and (pointer: fine) {
1586
- .bds0115DropdownMenu-item:not(:disabled):hover {
1583
+ .bds0116DropdownMenu-item:not(:disabled):hover {
1587
1584
  background-color: var(--color_bg--subtle);
1588
1585
  color: var(--color_interactive);
1589
1586
  }
1590
1587
  }
1591
- .bds0115DropdownMenu-icon {
1588
+ .bds0116DropdownMenu-icon {
1592
1589
  display: flex;
1593
1590
  align-items: center;
1594
1591
  flex-shrink: 0;
@@ -1597,11 +1594,11 @@
1597
1594
 
1598
1595
  /* src/components/interaction/Popover/Popover.module.css */
1599
1596
  @layer component {
1600
- .bds0115Popover-wrapper {
1597
+ .bds0116Popover-wrapper {
1601
1598
  position: relative;
1602
1599
  display: inline-flex;
1603
1600
  }
1604
- .bds0115Popover-panel {
1601
+ .bds0116Popover-panel {
1605
1602
  position: absolute;
1606
1603
  z-index: var(--z-index_popover);
1607
1604
  min-width: 12rem;
@@ -1613,19 +1610,19 @@
1613
1610
  color: var(--popover_on-color, var(--color_on-bg));
1614
1611
  font-size: var(--font_size--body);
1615
1612
  }
1616
- .bds0115Popover---placement_bottom {
1613
+ .bds0116Popover---placement_bottom {
1617
1614
  top: calc(100% + var(--space_xs));
1618
1615
  left: 0;
1619
1616
  }
1620
- .bds0115Popover---placement_top {
1617
+ .bds0116Popover---placement_top {
1621
1618
  bottom: calc(100% + var(--space_xs));
1622
1619
  left: 0;
1623
1620
  }
1624
- .bds0115Popover---placement_right {
1621
+ .bds0116Popover---placement_right {
1625
1622
  left: calc(100% + var(--space_xs));
1626
1623
  top: 0;
1627
1624
  }
1628
- .bds0115Popover---placement_left {
1625
+ .bds0116Popover---placement_left {
1629
1626
  right: calc(100% + var(--space_xs));
1630
1627
  top: 0;
1631
1628
  }
@@ -1633,23 +1630,23 @@
1633
1630
 
1634
1631
  /* src/components/interaction/Rating/Rating.module.css */
1635
1632
  @layer component {
1636
- .bds0115Rating-rating {
1633
+ .bds0116Rating-rating {
1637
1634
  display: inline-flex;
1638
1635
  gap: var(--space_xxxs);
1639
1636
  color: var(--color_bg);
1640
1637
  }
1641
- .bds0115Rating-star {
1638
+ .bds0116Rating-star {
1642
1639
  width: 1.5em;
1643
1640
  height: 1.5em;
1644
1641
  }
1645
- .bds0115Rating---filled {
1642
+ .bds0116Rating---filled {
1646
1643
  color: var(--color_warning);
1647
1644
  }
1648
1645
  }
1649
1646
 
1650
1647
  /* src/components/interaction/Toast/Toast.module.css */
1651
1648
  @layer component {
1652
- .bds0115Toast-toastContainer {
1649
+ .bds0116Toast-toastContainer {
1653
1650
  position: fixed;
1654
1651
  bottom: var(--space_xl);
1655
1652
  right: var(--space_xl);
@@ -1658,7 +1655,7 @@
1658
1655
  gap: var(--space_m);
1659
1656
  z-index: var(--z-index_toast);
1660
1657
  }
1661
- .bds0115Toast-toast {
1658
+ .bds0116Toast-toast {
1662
1659
  padding: var(--space_m) var(--space_l);
1663
1660
  background-color: var(--toast_color, var(--color_bg));
1664
1661
  color: var(--toast_on-color, var(--color_on-bg));
@@ -1670,26 +1667,26 @@
1670
1667
  min-width: 300px;
1671
1668
  animation: slideIn var(--animation_duration--fast) var(--animation_easing);
1672
1669
  }
1673
- .bds0115Toast-toast.bds0115Toast---variant_success {
1670
+ .bds0116Toast-toast.bds0116Toast---variant_success {
1674
1671
  --toast_color: var(--color_success);
1675
1672
  --toast_on-color: var(--color_on-success);
1676
1673
  }
1677
- .bds0115Toast-toast.bds0115Toast---variant_warning {
1674
+ .bds0116Toast-toast.bds0116Toast---variant_warning {
1678
1675
  --toast_color: var(--color_warning);
1679
1676
  --toast_on-color: var(--color_on-warning);
1680
1677
  }
1681
- .bds0115Toast-toast.bds0115Toast---variant_info {
1678
+ .bds0116Toast-toast.bds0116Toast---variant_info {
1682
1679
  --toast_color: var(--color_bg--subtle);
1683
1680
  --toast_on-color: var(--color_on-bg--subtle);
1684
1681
  }
1685
- .bds0115Toast-toast.bds0115Toast---variant_error {
1682
+ .bds0116Toast-toast.bds0116Toast---variant_error {
1686
1683
  --toast_color: var(--color_error);
1687
1684
  --toast_on-color: var(--color_on-error);
1688
1685
  }
1689
- .bds0115Toast-message {
1686
+ .bds0116Toast-message {
1690
1687
  flex: 1;
1691
1688
  }
1692
- .bds0115Toast-closeButton {
1689
+ .bds0116Toast-closeButton {
1693
1690
  display: flex;
1694
1691
  align-items: center;
1695
1692
  justify-content: center;
@@ -1702,7 +1699,7 @@
1702
1699
  cursor: pointer;
1703
1700
  color: var(--toast_on-color);
1704
1701
  }
1705
- .bds0115Toast-closeButton svg {
1702
+ .bds0116Toast-closeButton svg {
1706
1703
  width: 1rem;
1707
1704
  height: 1rem;
1708
1705
  }
@@ -1720,17 +1717,17 @@
1720
1717
 
1721
1718
  /* src/components/interaction/form/Checkbox/Checkbox.module.css */
1722
1719
  @layer component {
1723
- .bds0115Checkbox-checkboxGroup {
1720
+ .bds0116Checkbox-checkboxGroup {
1724
1721
  --inputSize: calc(var(--space_s) * 2);
1725
1722
  display: flex;
1726
1723
  flex-direction: column;
1727
1724
  }
1728
- .bds0115Checkbox-inputWrapper {
1725
+ .bds0116Checkbox-inputWrapper {
1729
1726
  display: flex;
1730
1727
  align-items: stretch;
1731
1728
  gap: var(--space_xs);
1732
1729
  }
1733
- .bds0115Checkbox-checkbox {
1730
+ .bds0116Checkbox-checkbox {
1734
1731
  margin-block-start: 0.25em;
1735
1732
  width: var(--inputSize);
1736
1733
  height: var(--inputSize);
@@ -1743,11 +1740,11 @@
1743
1740
  position: relative;
1744
1741
  transition: background-color 0.3s ease, border-color 0.3s ease;
1745
1742
  }
1746
- .bds0115Checkbox-checkbox:checked {
1743
+ .bds0116Checkbox-checkbox:checked {
1747
1744
  background-color: var(--checkbox_color-active, var(--color_active));
1748
1745
  border-color: var(--checkbox_color-active, var(--color_active));
1749
1746
  }
1750
- .bds0115Checkbox-checkbox:checked::after {
1747
+ .bds0116Checkbox-checkbox:checked::after {
1751
1748
  content: "";
1752
1749
  position: absolute;
1753
1750
  left: 0.6em;
@@ -1758,15 +1755,15 @@
1758
1755
  border-width: 0 2px 2px 0;
1759
1756
  transform: rotate(45deg);
1760
1757
  }
1761
- .bds0115Checkbox-checkbox:focus {
1758
+ .bds0116Checkbox-checkbox:focus {
1762
1759
  outline: none;
1763
1760
  border-color: var(--color_interactive);
1764
1761
  box-shadow: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
1765
1762
  }
1766
- .bds0115Checkbox-checkboxError {
1763
+ .bds0116Checkbox-checkboxError {
1767
1764
  border-color: var(--color_error);
1768
1765
  }
1769
- .bds0115Checkbox-checkboxError:focus {
1766
+ .bds0116Checkbox-checkboxError:focus {
1770
1767
  border-color: var(--color_error);
1771
1768
  box-shadow: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
1772
1769
  }
@@ -1774,23 +1771,22 @@
1774
1771
 
1775
1772
  /* src/components/interaction/form/atoms/Message.module.css */
1776
1773
  @layer component {
1777
- .bds0115Message-error,
1778
- .bds0115Message-hint {
1774
+ .bds0116Message-error,
1775
+ .bds0116Message-hint {
1779
1776
  font-size: var(--font_size--body--s);
1780
1777
  margin-inline-start: var(--labelPosition);
1781
1778
  }
1782
- .bds0115Message-error {
1779
+ .bds0116Message-error {
1783
1780
  color: var(--color_error);
1784
1781
  }
1785
1782
  }
1786
1783
 
1787
1784
  /* src/components/interaction/form/atoms/Label.module.css */
1788
1785
  @layer component {
1789
- .bds0115Label-label {
1786
+ .bds0116Label-label {
1790
1787
  display: flex;
1791
1788
  align-items: center;
1792
1789
  font-family: var(--font_family--body);
1793
- font-weight: var(--font_weight--semibold);
1794
1790
  color: var(--color_on-bg);
1795
1791
  cursor: pointer;
1796
1792
  }
@@ -1798,7 +1794,7 @@
1798
1794
 
1799
1795
  /* src/components/interaction/form/atoms/InputContainer.module.css */
1800
1796
  @layer component {
1801
- .bds0115InputContainer-container {
1797
+ .bds0116InputContainer-container {
1802
1798
  --labelPosition: calc(var(--inputSize) + var(--space_m));
1803
1799
  display: flex;
1804
1800
  flex-direction: column;
@@ -1808,16 +1804,16 @@
1808
1804
 
1809
1805
  /* src/components/interaction/form/Combobox/Combobox.module.css */
1810
1806
  @layer component {
1811
- .bds0115Combobox-formGroup {
1807
+ .bds0116Combobox-formGroup {
1812
1808
  display: flex;
1813
1809
  flex-direction: column;
1814
1810
  }
1815
- .bds0115Combobox-inputWrapper {
1811
+ .bds0116Combobox-inputWrapper {
1816
1812
  position: relative;
1817
1813
  display: flex;
1818
1814
  align-items: center;
1819
1815
  }
1820
- .bds0115Combobox-input {
1816
+ .bds0116Combobox-input {
1821
1817
  appearance: none;
1822
1818
  width: 100%;
1823
1819
  font-family: var(--font_family--body);
@@ -1830,22 +1826,22 @@
1830
1826
  color: var(--combobox_color, var(--color_on-bg));
1831
1827
  transition: var(--animation_transition);
1832
1828
  }
1833
- .bds0115Combobox-input:focus {
1829
+ .bds0116Combobox-input:focus {
1834
1830
  --combobox_border-color: var(--color_interactive);
1835
1831
  outline: none;
1836
1832
  box-shadow: var(--combobox_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
1837
1833
  }
1838
- .bds0115Combobox-input:disabled {
1834
+ .bds0116Combobox-input:disabled {
1839
1835
  opacity: 0.5;
1840
1836
  cursor: not-allowed;
1841
1837
  }
1842
- .bds0115Combobox-inputError {
1838
+ .bds0116Combobox-inputError {
1843
1839
  --combobox_border-color: var(--color_error);
1844
1840
  }
1845
- .bds0115Combobox-inputError:focus {
1841
+ .bds0116Combobox-inputError:focus {
1846
1842
  --combobox_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
1847
1843
  }
1848
- .bds0115Combobox-chevron {
1844
+ .bds0116Combobox-chevron {
1849
1845
  position: absolute;
1850
1846
  inset-inline-end: var(--space_s);
1851
1847
  display: flex;
@@ -1853,11 +1849,11 @@
1853
1849
  pointer-events: none;
1854
1850
  color: var(--combobox_color, var(--color_on-bg));
1855
1851
  }
1856
- .bds0115Combobox-chevron svg {
1852
+ .bds0116Combobox-chevron svg {
1857
1853
  width: 1rem;
1858
1854
  height: 1rem;
1859
1855
  }
1860
- .bds0115Combobox-listbox {
1856
+ .bds0116Combobox-listbox {
1861
1857
  position: absolute;
1862
1858
  top: calc(100% + var(--space_xxs));
1863
1859
  left: 0;
@@ -1874,7 +1870,7 @@
1874
1870
  color: var(--combobox_on-color, var(--color_on-bg));
1875
1871
  box-shadow: var(--shadow_m);
1876
1872
  }
1877
- .bds0115Combobox-option {
1873
+ .bds0116Combobox-option {
1878
1874
  display: flex;
1879
1875
  align-items: center;
1880
1876
  padding: var(--space_xs) var(--space_m);
@@ -1883,14 +1879,14 @@
1883
1879
  cursor: pointer;
1884
1880
  transition: var(--animation_transition);
1885
1881
  }
1886
- .bds0115Combobox-option.bds0115Combobox---highlighted {
1882
+ .bds0116Combobox-option.bds0116Combobox---highlighted {
1887
1883
  background-color: var(--color_bg--subtle);
1888
1884
  color: var(--color_interactive);
1889
1885
  }
1890
- .bds0115Combobox-option.bds0115Combobox---selected {
1886
+ .bds0116Combobox-option.bds0116Combobox---selected {
1891
1887
  font-weight: var(--font_weight--semibold);
1892
1888
  }
1893
- .bds0115Combobox-option.bds0115Combobox---disabled {
1889
+ .bds0116Combobox-option.bds0116Combobox---disabled {
1894
1890
  opacity: 0.4;
1895
1891
  cursor: not-allowed;
1896
1892
  }
@@ -1898,11 +1894,11 @@
1898
1894
 
1899
1895
  /* src/components/interaction/form/FileInput/FileInput.module.css */
1900
1896
  @layer component {
1901
- .bds0115FileInput-formGroup {
1897
+ .bds0116FileInput-formGroup {
1902
1898
  display: flex;
1903
1899
  flex-direction: column;
1904
1900
  }
1905
- .bds0115FileInput-dropZone {
1901
+ .bds0116FileInput-dropZone {
1906
1902
  display: flex;
1907
1903
  flex-direction: column;
1908
1904
  align-items: center;
@@ -1916,40 +1912,40 @@
1916
1912
  text-align: center;
1917
1913
  transition: var(--animation_transition);
1918
1914
  }
1919
- .bds0115FileInput-dropZone:focus-within {
1915
+ .bds0116FileInput-dropZone:focus-within {
1920
1916
  outline: var(--outline_default);
1921
1917
  outline-offset: var(--outline_offset);
1922
1918
  border-color: var(--fileInput_border-color, currentcolor);
1923
1919
  }
1924
- .bds0115FileInput-isDragging {
1920
+ .bds0116FileInput-isDragging {
1925
1921
  border-color: currentcolor;
1926
1922
  background-color: rgb(from currentcolor r g b / 8%);
1927
1923
  }
1928
- .bds0115FileInput-hasError {
1924
+ .bds0116FileInput-hasError {
1929
1925
  border-color: var(--color_error);
1930
1926
  }
1931
- .bds0115FileInput-isDisabled {
1927
+ .bds0116FileInput-isDisabled {
1932
1928
  opacity: 0.5;
1933
1929
  cursor: not-allowed;
1934
1930
  }
1935
- .bds0115FileInput-icon {
1931
+ .bds0116FileInput-icon {
1936
1932
  width: 2rem;
1937
1933
  height: 2rem;
1938
1934
  flex-shrink: 0;
1939
1935
  }
1940
- .bds0115FileInput-prompt {
1936
+ .bds0116FileInput-prompt {
1941
1937
  font-size: var(--font_size--body);
1942
1938
  color: var(--color_on-bg--muted);
1943
1939
  }
1944
- .bds0115FileInput-prompt strong {
1940
+ .bds0116FileInput-prompt strong {
1945
1941
  color: var(--color_interactive);
1946
1942
  font-weight: var(--font_weight--semibold);
1947
1943
  }
1948
- .bds0115FileInput-acceptHint {
1944
+ .bds0116FileInput-acceptHint {
1949
1945
  font-size: var(--font_size--body--s);
1950
1946
  color: var(--color_on-bg--muted);
1951
1947
  }
1952
- .bds0115FileInput-hiddenInput {
1948
+ .bds0116FileInput-hiddenInput {
1953
1949
  position: absolute;
1954
1950
  width: 1px;
1955
1951
  height: 1px;
@@ -1959,7 +1955,7 @@
1959
1955
  border: 0;
1960
1956
  }
1961
1957
  @media (hover: hover) and (pointer: fine) {
1962
- .bds0115FileInput-dropZone:not(.bds0115FileInput-isDisabled):hover {
1958
+ .bds0116FileInput-dropZone:not(.bds0116FileInput-isDisabled):hover {
1963
1959
  border-color: var(--color_interactive);
1964
1960
  background-color: rgb(from var(--color_interactive) r g b / 4%);
1965
1961
  }
@@ -1968,12 +1964,12 @@
1968
1964
 
1969
1965
  /* src/components/interaction/form/FormInput/FormInput.module.css */
1970
1966
  @layer component {
1971
- .bds0115FormInput-formGroup {
1967
+ .bds0116FormInput-formGroup {
1972
1968
  --labelPosition: 0;
1973
1969
  display: flex;
1974
1970
  flex-direction: column;
1975
1971
  }
1976
- .bds0115FormInput-input {
1972
+ .bds0116FormInput-input {
1977
1973
  font-family: var(--font_family--body);
1978
1974
  font-size: var(--font_size--body);
1979
1975
  padding: var(--space_s);
@@ -1983,26 +1979,26 @@
1983
1979
  color: var(--input_color, var(--color_on-bg));
1984
1980
  background-color: var(--input_color_bg, var(--color_bg));
1985
1981
  }
1986
- .bds0115FormInput-input:focus {
1982
+ .bds0116FormInput-input:focus {
1987
1983
  --input_border-color: var(--color_interactive);
1988
1984
  outline: none;
1989
1985
  box-shadow: var(--input_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
1990
1986
  }
1991
- .bds0115FormInput-inputError {
1987
+ .bds0116FormInput-inputError {
1992
1988
  --input_border-color: var(--color_error);
1993
1989
  }
1994
- .bds0115FormInput-inputError:focus {
1990
+ .bds0116FormInput-inputError:focus {
1995
1991
  --input_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
1996
1992
  }
1997
1993
  }
1998
1994
 
1999
1995
  /* src/components/interaction/form/NumberInput/NumberInput.module.css */
2000
1996
  @layer component {
2001
- .bds0115NumberInput-formGroup {
1997
+ .bds0116NumberInput-formGroup {
2002
1998
  display: flex;
2003
1999
  flex-direction: column;
2004
2000
  }
2005
- .bds0115NumberInput-inputRow {
2001
+ .bds0116NumberInput-inputRow {
2006
2002
  display: flex;
2007
2003
  align-items: stretch;
2008
2004
  border: 1px solid currentcolor;
@@ -2010,11 +2006,11 @@
2010
2006
  overflow: hidden;
2011
2007
  transition: var(--animation_transition);
2012
2008
  }
2013
- .bds0115NumberInput-inputRow:focus-within {
2009
+ .bds0116NumberInput-inputRow:focus-within {
2014
2010
  border-color: var(--numberInput_border-color, var(--color_interactive));
2015
2011
  box-shadow: var(--numberInput_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
2016
2012
  }
2017
- .bds0115NumberInput-input {
2013
+ .bds0116NumberInput-input {
2018
2014
  flex: 1;
2019
2015
  border: none;
2020
2016
  outline: none;
@@ -2027,17 +2023,17 @@
2027
2023
  min-width: 0;
2028
2024
  appearance: textfield;
2029
2025
  }
2030
- .bds0115NumberInput-input::-webkit-inner-spin-button,
2031
- .bds0115NumberInput-input::-webkit-outer-spin-button {
2026
+ .bds0116NumberInput-input::-webkit-inner-spin-button,
2027
+ .bds0116NumberInput-input::-webkit-outer-spin-button {
2032
2028
  appearance: none;
2033
2029
  }
2034
- .bds0115NumberInput-inputError {
2030
+ .bds0116NumberInput-inputError {
2035
2031
  --numberInput_border-color: var(--color_error);
2036
2032
  }
2037
- .bds0115NumberInput-inputError:focus-within {
2033
+ .bds0116NumberInput-inputError:focus-within {
2038
2034
  --numberInput_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
2039
2035
  }
2040
- .bds0115NumberInput-stepper {
2036
+ .bds0116NumberInput-stepper {
2041
2037
  all: unset;
2042
2038
  display: flex;
2043
2039
  align-items: center;
@@ -2049,16 +2045,16 @@
2049
2045
  transition: var(--animation_transition);
2050
2046
  flex-shrink: 0;
2051
2047
  }
2052
- .bds0115NumberInput-stepper svg {
2048
+ .bds0116NumberInput-stepper svg {
2053
2049
  width: 1rem;
2054
2050
  height: 1rem;
2055
2051
  }
2056
- .bds0115NumberInput-stepper:disabled {
2052
+ .bds0116NumberInput-stepper:disabled {
2057
2053
  opacity: 0.4;
2058
2054
  cursor: not-allowed;
2059
2055
  }
2060
2056
  @media (hover: hover) and (pointer: fine) {
2061
- .bds0115NumberInput-stepper:not(:disabled):hover {
2057
+ .bds0116NumberInput-stepper:not(:disabled):hover {
2062
2058
  background-color: var(--color_bg--subtle);
2063
2059
  opacity: 0.7;
2064
2060
  }
@@ -2067,29 +2063,29 @@
2067
2063
 
2068
2064
  /* src/components/interaction/form/Radio/Radio.module.css */
2069
2065
  @layer component {
2070
- .bds0115Radio-radioGroup {
2066
+ .bds0116Radio-radioGroup {
2071
2067
  --inputSize: calc(var(--space_s) * 2);
2072
2068
  --labelPosition: calc(var(--inputSize) + var(--space_m));
2073
2069
  display: flex;
2074
2070
  flex-direction: column;
2075
2071
  }
2076
- .bds0115Radio-inputWrapper {
2072
+ .bds0116Radio-inputWrapper {
2077
2073
  display: flex;
2078
2074
  align-items: flex-start;
2079
2075
  gap: var(--space_xs);
2080
2076
  }
2081
- .bds0115Radio-textWrapper {
2077
+ .bds0116Radio-textWrapper {
2082
2078
  display: flex;
2083
2079
  flex-direction: column;
2084
2080
  gap: var(--space_xxxs);
2085
2081
  padding-block-start: var(--space_xxxs);
2086
2082
  }
2087
- .bds0115Radio-description {
2083
+ .bds0116Radio-description {
2088
2084
  font-size: var(--font_size--body--s);
2089
2085
  color: var(--radio_description-color, var(--color_on-bg--subtle));
2090
2086
  line-height: var(--font_line-height--body);
2091
2087
  }
2092
- .bds0115Radio-radio {
2088
+ .bds0116Radio-radio {
2093
2089
  flex-shrink: 0;
2094
2090
  margin-block-start: 0.2em;
2095
2091
  width: var(--inputSize);
@@ -2103,11 +2099,11 @@
2103
2099
  position: relative;
2104
2100
  transition: background-color 0.2s ease, border-color 0.2s ease;
2105
2101
  }
2106
- .bds0115Radio-radio:checked {
2102
+ .bds0116Radio-radio:checked {
2107
2103
  background-color: var(--radio_color-active, var(--color_active));
2108
2104
  border-color: var(--radio_color-active, var(--color_active));
2109
2105
  }
2110
- .bds0115Radio-radio:checked::after {
2106
+ .bds0116Radio-radio:checked::after {
2111
2107
  content: "";
2112
2108
  position: absolute;
2113
2109
  left: 50%;
@@ -2118,15 +2114,15 @@
2118
2114
  border-radius: 50%;
2119
2115
  background-color: var(--radio_color-on-active, var(--color_on-active));
2120
2116
  }
2121
- .bds0115Radio-radio:focus {
2117
+ .bds0116Radio-radio:focus {
2122
2118
  outline: none;
2123
2119
  border-color: var(--color_interactive);
2124
2120
  box-shadow: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
2125
2121
  }
2126
- .bds0115Radio-radioError {
2122
+ .bds0116Radio-radioError {
2127
2123
  border-color: var(--color_error);
2128
2124
  }
2129
- .bds0115Radio-radioError:focus {
2125
+ .bds0116Radio-radioError:focus {
2130
2126
  border-color: var(--color_error);
2131
2127
  box-shadow: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
2132
2128
  }
@@ -2134,16 +2130,16 @@
2134
2130
 
2135
2131
  /* src/components/interaction/form/Select/Select.module.css */
2136
2132
  @layer component {
2137
- .bds0115Select-formGroup {
2133
+ .bds0116Select-formGroup {
2138
2134
  display: flex;
2139
2135
  flex-direction: column;
2140
2136
  }
2141
- .bds0115Select-selectWrapper {
2137
+ .bds0116Select-selectWrapper {
2142
2138
  position: relative;
2143
2139
  display: flex;
2144
2140
  align-items: center;
2145
2141
  }
2146
- .bds0115Select-select {
2142
+ .bds0116Select-select {
2147
2143
  appearance: none;
2148
2144
  width: 100%;
2149
2145
  font-family: var(--font_family--body);
@@ -2157,22 +2153,22 @@
2157
2153
  cursor: pointer;
2158
2154
  transition: var(--animation_transition);
2159
2155
  }
2160
- .bds0115Select-select:focus {
2156
+ .bds0116Select-select:focus {
2161
2157
  --select_border-color: var(--color_interactive);
2162
2158
  outline: none;
2163
2159
  box-shadow: var(--select_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
2164
2160
  }
2165
- .bds0115Select-select:disabled {
2161
+ .bds0116Select-select:disabled {
2166
2162
  opacity: 0.5;
2167
2163
  cursor: not-allowed;
2168
2164
  }
2169
- .bds0115Select-selectError {
2165
+ .bds0116Select-selectError {
2170
2166
  --select_border-color: var(--color_error);
2171
2167
  }
2172
- .bds0115Select-selectError:focus {
2168
+ .bds0116Select-selectError:focus {
2173
2169
  --select_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
2174
2170
  }
2175
- .bds0115Select-chevron {
2171
+ .bds0116Select-chevron {
2176
2172
  position: absolute;
2177
2173
  inset-inline-end: var(--space_s);
2178
2174
  display: flex;
@@ -2180,7 +2176,7 @@
2180
2176
  pointer-events: none;
2181
2177
  color: var(--select_color, var(--color_on-bg));
2182
2178
  }
2183
- .bds0115Select-chevron svg {
2179
+ .bds0116Select-chevron svg {
2184
2180
  width: 1rem;
2185
2181
  height: 1rem;
2186
2182
  }
@@ -2188,22 +2184,22 @@
2188
2184
 
2189
2185
  /* src/components/interaction/form/Slider/Slider.module.css */
2190
2186
  @layer component {
2191
- .bds0115Slider-formGroup {
2187
+ .bds0116Slider-formGroup {
2192
2188
  display: flex;
2193
2189
  flex-direction: column;
2194
2190
  gap: var(--space_xxs);
2195
2191
  }
2196
- .bds0115Slider-labelRow {
2192
+ .bds0116Slider-labelRow {
2197
2193
  display: flex;
2198
2194
  justify-content: space-between;
2199
2195
  align-items: baseline;
2200
2196
  }
2201
- .bds0115Slider-value {
2197
+ .bds0116Slider-value {
2202
2198
  font-size: var(--font_size--body--s);
2203
2199
  font-variant-numeric: tabular-nums;
2204
2200
  color: var(--color_on-bg--subtle);
2205
2201
  }
2206
- .bds0115Slider-slider {
2202
+ .bds0116Slider-slider {
2207
2203
  --slider_fill: 0%;
2208
2204
  --slider_track-height: var(--space_xxs);
2209
2205
  --slider_thumb-size: calc(var(--space_s) * 2);
@@ -2222,16 +2218,16 @@
2222
2218
  cursor: pointer;
2223
2219
  transition: var(--animation_transition);
2224
2220
  }
2225
- .bds0115Slider-slider:focus-visible {
2221
+ .bds0116Slider-slider:focus-visible {
2226
2222
  outline: var(--outline_default);
2227
2223
  outline-offset: var(--outline_offset);
2228
2224
  border-radius: 999px;
2229
2225
  }
2230
- .bds0115Slider-slider:disabled {
2226
+ .bds0116Slider-slider:disabled {
2231
2227
  opacity: 0.4;
2232
2228
  cursor: not-allowed;
2233
2229
  }
2234
- .bds0115Slider-slider::-webkit-slider-thumb {
2230
+ .bds0116Slider-slider::-webkit-slider-thumb {
2235
2231
  appearance: none;
2236
2232
  width: var(--slider_thumb-size);
2237
2233
  height: var(--slider_thumb-size);
@@ -2241,7 +2237,7 @@
2241
2237
  transition: var(--animation_transition);
2242
2238
  cursor: pointer;
2243
2239
  }
2244
- .bds0115Slider-slider::-moz-range-thumb {
2240
+ .bds0116Slider-slider::-moz-range-thumb {
2245
2241
  width: var(--slider_thumb-size);
2246
2242
  height: var(--slider_thumb-size);
2247
2243
  border: none;
@@ -2250,7 +2246,7 @@
2250
2246
  box-shadow: var(--shadow_s);
2251
2247
  cursor: pointer;
2252
2248
  }
2253
- .bds0115Slider-sliderError {
2249
+ .bds0116Slider-sliderError {
2254
2250
  background:
2255
2251
  linear-gradient(
2256
2252
  to right,
@@ -2259,16 +2255,16 @@
2259
2255
  var(--color_bg--subtle) var(--slider_fill),
2260
2256
  var(--color_bg--subtle) 100%);
2261
2257
  }
2262
- .bds0115Slider-sliderError::-webkit-slider-thumb {
2258
+ .bds0116Slider-sliderError::-webkit-slider-thumb {
2263
2259
  background-color: var(--color_error);
2264
2260
  }
2265
- .bds0115Slider-sliderError::-moz-range-thumb {
2261
+ .bds0116Slider-sliderError::-moz-range-thumb {
2266
2262
  background-color: var(--color_error);
2267
2263
  }
2268
2264
  @media (prefers-reduced-motion: reduce) {
2269
- .bds0115Slider-slider,
2270
- .bds0115Slider-slider::-webkit-slider-thumb,
2271
- .bds0115Slider-slider::-moz-range-thumb {
2265
+ .bds0116Slider-slider,
2266
+ .bds0116Slider-slider::-webkit-slider-thumb,
2267
+ .bds0116Slider-slider::-moz-range-thumb {
2272
2268
  transition: none;
2273
2269
  }
2274
2270
  }
@@ -2276,7 +2272,7 @@
2276
2272
 
2277
2273
  /* src/components/interaction/form/Switch/Switch.module.css */
2278
2274
  @layer component {
2279
- .bds0115Switch-switchGroup {
2275
+ .bds0116Switch-switchGroup {
2280
2276
  --switch_thumb-size: 1.25em;
2281
2277
  --switch_track-pad: var(--space_xxxs);
2282
2278
  --switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
@@ -2285,21 +2281,21 @@
2285
2281
  display: flex;
2286
2282
  flex-direction: column;
2287
2283
  }
2288
- .bds0115Switch-switchGroup.bds0115Switch---size_small {
2284
+ .bds0116Switch-switchGroup.bds0116Switch---size_small {
2289
2285
  --switch_thumb-size: 1em;
2290
2286
  }
2291
- .bds0115Switch-switchGroup.bds0115Switch---size_medium {
2287
+ .bds0116Switch-switchGroup.bds0116Switch---size_medium {
2292
2288
  --switch_thumb-size: 1.25em;
2293
2289
  }
2294
- .bds0115Switch-switchGroup.bds0115Switch---size_large {
2290
+ .bds0116Switch-switchGroup.bds0116Switch---size_large {
2295
2291
  --switch_thumb-size: 1.5em;
2296
2292
  }
2297
- .bds0115Switch-inputWrapper {
2293
+ .bds0116Switch-inputWrapper {
2298
2294
  display: flex;
2299
2295
  align-items: center;
2300
2296
  gap: var(--space_xs);
2301
2297
  }
2302
- .bds0115Switch-trackWrapper {
2298
+ .bds0116Switch-trackWrapper {
2303
2299
  position: relative;
2304
2300
  display: inline-flex;
2305
2301
  align-items: center;
@@ -2307,7 +2303,7 @@
2307
2303
  width: var(--switch_track-width);
2308
2304
  height: var(--switch_track-height);
2309
2305
  }
2310
- .bds0115Switch-switch {
2306
+ .bds0116Switch-switch {
2311
2307
  position: absolute;
2312
2308
  inset: 0;
2313
2309
  appearance: none;
@@ -2318,54 +2314,54 @@
2318
2314
  cursor: pointer;
2319
2315
  z-index: 1;
2320
2316
  }
2321
- .bds0115Switch-switch:disabled {
2317
+ .bds0116Switch-switch:disabled {
2322
2318
  cursor: not-allowed;
2323
2319
  }
2324
- .bds0115Switch-track {
2320
+ .bds0116Switch-track {
2325
2321
  display: inline-flex;
2326
2322
  align-items: center;
2327
2323
  width: var(--switch_track-width);
2328
2324
  height: var(--switch_track-height);
2329
2325
  border-radius: 999px;
2330
- background-color: var(--track_bg, var(--color_grey--subtle));
2326
+ background-color: var(--switch_track-bg, var(--color_grey--subtle));
2331
2327
  padding-inline: var(--switch_track-pad);
2332
2328
  pointer-events: none;
2333
2329
  transition: var(--animation_transition);
2334
- outline: 1px solid var(--thumb_bg, var(--color_grey));
2330
+ outline: 1px solid var(--switch_thumb-bg, var(--color_grey));
2335
2331
  outline-offset: var(--outline_offset);
2336
2332
  }
2337
- .bds0115Switch-thumb {
2333
+ .bds0116Switch-thumb {
2338
2334
  display: block;
2339
2335
  width: var(--switch_thumb-size);
2340
2336
  height: var(--switch_thumb-size);
2341
2337
  border-radius: 50%;
2342
- background-color: var(--thumb_bg, var(--color_grey));
2338
+ background-color: var(--switch_thumb-bg, var(--color_grey));
2343
2339
  box-shadow: var(--shadow_s);
2344
2340
  transition: var(--animation_transition);
2345
2341
  transform: translateX(0);
2346
2342
  }
2347
- .bds0115Switch-switch.bds0115Switch-switchError + .bds0115Switch-track {
2343
+ .bds0116Switch-switch.bds0116Switch-switchError + .bds0116Switch-track {
2348
2344
  outline: 1px solid var(--color_error);
2349
2345
  }
2350
- .bds0115Switch-switch:checked + .bds0115Switch-track {
2351
- background-color: var(--track_active, var(--color_active--subtle));
2352
- outline-color: var(--thumb_bg--active, var(--color_active--strong));
2346
+ .bds0116Switch-switch:checked + .bds0116Switch-track {
2347
+ background-color: var(--switch_track-bg--active, var(--color_active--subtle));
2348
+ outline-color: var(--switch_thumb-bg--active, var(--color_active--strong));
2353
2349
  }
2354
- .bds0115Switch-switch:checked + .bds0115Switch-track .bds0115Switch-thumb {
2355
- background-color: var(--thumb_bg--active, var(--color_active--strong));
2350
+ .bds0116Switch-switch:checked + .bds0116Switch-track .bds0116Switch-thumb {
2351
+ background-color: var(--switch_thumb-bg--active, var(--color_active--strong));
2356
2352
  transform: translateX(var(--switch_thumb-size));
2357
2353
  }
2358
- .bds0115Switch-switch:focus-visible + .bds0115Switch-track {
2354
+ .bds0116Switch-switch:focus-visible + .bds0116Switch-track {
2359
2355
  outline: var(--outline_default);
2360
2356
  outline-offset: var(--outline_offset);
2361
2357
  border-radius: 999px;
2362
2358
  }
2363
- .bds0115Switch-switch:disabled + .bds0115Switch-track {
2359
+ .bds0116Switch-switch:disabled + .bds0116Switch-track {
2364
2360
  opacity: 0.4;
2365
2361
  }
2366
2362
  @media (prefers-reduced-motion: reduce) {
2367
- .bds0115Switch-track,
2368
- .bds0115Switch-thumb {
2363
+ .bds0116Switch-track,
2364
+ .bds0116Switch-thumb {
2369
2365
  transition: none;
2370
2366
  }
2371
2367
  }
@@ -2373,11 +2369,11 @@
2373
2369
 
2374
2370
  /* src/components/interaction/form/Textarea/Textarea.module.css */
2375
2371
  @layer component {
2376
- .bds0115Textarea-formGroup {
2372
+ .bds0116Textarea-formGroup {
2377
2373
  display: flex;
2378
2374
  flex-direction: column;
2379
2375
  }
2380
- .bds0115Textarea-textarea {
2376
+ .bds0116Textarea-textarea {
2381
2377
  font-family: var(--font_family--body);
2382
2378
  font-size: var(--font_size--body);
2383
2379
  line-height: var(--font_line-height--body);
@@ -2390,69 +2386,69 @@
2390
2386
  min-height: calc(var(--space_m) * 5);
2391
2387
  transition: var(--animation_transition);
2392
2388
  }
2393
- .bds0115Textarea-textarea:focus {
2389
+ .bds0116Textarea-textarea:focus {
2394
2390
  --textarea_border-color: var(--color_interactive);
2395
2391
  outline: none;
2396
2392
  box-shadow: var(--textarea_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
2397
2393
  }
2398
- .bds0115Textarea-textarea:disabled {
2394
+ .bds0116Textarea-textarea:disabled {
2399
2395
  opacity: 0.5;
2400
2396
  cursor: not-allowed;
2401
2397
  resize: none;
2402
2398
  }
2403
- .bds0115Textarea-textareaError {
2399
+ .bds0116Textarea-textareaError {
2404
2400
  --textarea_border-color: var(--color_error);
2405
2401
  }
2406
- .bds0115Textarea-textareaError:focus {
2402
+ .bds0116Textarea-textareaError:focus {
2407
2403
  --textarea_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
2408
2404
  }
2409
2405
  }
2410
2406
 
2411
2407
  /* src/components/layout/ButtonGroup/ButtonGroup.module.css */
2412
2408
  @layer component {
2413
- .bds0115ButtonGroup-buttonGroup {
2409
+ .bds0116ButtonGroup-buttonGroup {
2414
2410
  container-type: inline-size;
2415
2411
  container-name: button-group;
2416
2412
  grid-column: var(--grid_span-100);
2417
2413
  }
2418
- .bds0115ButtonGroup-buttonGroup .bds0115ButtonGroup-container {
2414
+ .bds0116ButtonGroup-buttonGroup .bds0116ButtonGroup-container {
2419
2415
  position: relative;
2420
2416
  display: flex;
2421
2417
  flex-direction: column-reverse;
2422
2418
  gap: var(--space_l);
2423
2419
  align-items: center;
2424
2420
  }
2425
- .bds0115ButtonGroup-buttonGroup.bds0115ButtonGroup---variant_card .bds0115ButtonGroup-container {
2421
+ .bds0116ButtonGroup-buttonGroup.bds0116ButtonGroup---variant_card .bds0116ButtonGroup-container {
2426
2422
  align-items: stretch;
2427
2423
  }
2428
- .bds0115ButtonGroup-buttonGroup.bds0115ButtonGroup---variant_flow .bds0115ButtonGroup-container,
2429
- .bds0115ButtonGroup-buttonGroup.bds0115ButtonGroup---variant_modal .bds0115ButtonGroup-container {
2424
+ .bds0116ButtonGroup-buttonGroup.bds0116ButtonGroup---variant_flow .bds0116ButtonGroup-container,
2425
+ .bds0116ButtonGroup-buttonGroup.bds0116ButtonGroup---variant_modal .bds0116ButtonGroup-container {
2430
2426
  align-items: center;
2431
2427
  }
2432
- .bds0115ButtonGroup-buttonGroup.bds0115ButtonGroup---variant_content .bds0115ButtonGroup-container {
2428
+ .bds0116ButtonGroup-buttonGroup.bds0116ButtonGroup---variant_content .bds0116ButtonGroup-container {
2433
2429
  align-items: flex-start;
2434
2430
  }
2435
2431
  @supports (contain: inline-size) {
2436
2432
  @container button-group (min-width: 30rem) {
2437
- .bds0115ButtonGroup-buttonGroup .bds0115ButtonGroup-container {
2433
+ .bds0116ButtonGroup-buttonGroup .bds0116ButtonGroup-container {
2438
2434
  flex-direction: row;
2439
2435
  justify-content: space-between;
2440
2436
  }
2441
- .bds0115ButtonGroup-buttonGroup.bds0115ButtonGroup---variant_modal .bds0115ButtonGroup-container > :first-child:last-child,
2442
- .bds0115ButtonGroup-buttonGroup.bds0115ButtonGroup---variant_flow .bds0115ButtonGroup-container > :first-child:last-child {
2437
+ .bds0116ButtonGroup-buttonGroup.bds0116ButtonGroup---variant_modal .bds0116ButtonGroup-container > :first-child:last-child,
2438
+ .bds0116ButtonGroup-buttonGroup.bds0116ButtonGroup---variant_flow .bds0116ButtonGroup-container > :first-child:last-child {
2443
2439
  margin-inline-start: auto;
2444
2440
  }
2445
- .bds0115ButtonGroup-buttonGroup.bds0115ButtonGroup---variant_card .bds0115ButtonGroup-container {
2441
+ .bds0116ButtonGroup-buttonGroup.bds0116ButtonGroup---variant_card .bds0116ButtonGroup-container {
2446
2442
  justify-content: center;
2447
2443
  }
2448
- .bds0115ButtonGroup-buttonGroup.bds0115ButtonGroup---variant_modal .bds0115ButtonGroup-container {
2444
+ .bds0116ButtonGroup-buttonGroup.bds0116ButtonGroup---variant_modal .bds0116ButtonGroup-container {
2449
2445
  justify-content: flex-end;
2450
2446
  }
2451
- .bds0115ButtonGroup-buttonGroup.bds0115ButtonGroup---variant_content .bds0115ButtonGroup-container {
2447
+ .bds0116ButtonGroup-buttonGroup.bds0116ButtonGroup---variant_content .bds0116ButtonGroup-container {
2452
2448
  justify-content: flex-start;
2453
2449
  align-items: center;
2454
2450
  }
2455
- .bds0115ButtonGroup-buttonGroup.bds0115ButtonGroup---variant_grid .bds0115ButtonGroup-container {
2451
+ .bds0116ButtonGroup-buttonGroup.bds0116ButtonGroup---variant_grid .bds0116ButtonGroup-container {
2456
2452
  justify-content: center;
2457
2453
  }
2458
2454
  }
@@ -2461,59 +2457,59 @@
2461
2457
 
2462
2458
  /* src/components/layout/Card/Card.module.css */
2463
2459
  @layer component {
2464
- .bds0115Card-card {
2460
+ .bds0116Card-card {
2465
2461
  background-color: var(--card_color, var(--color_bg));
2466
2462
  color: var(--card_on-color, var(--color_on-bg));
2467
2463
  border-radius: var(--border_radius--m);
2468
2464
  transition: all 0.3s ease;
2469
2465
  position: relative;
2470
2466
  }
2471
- .bds0115Card-card.bds0115Card---default {
2467
+ .bds0116Card-card.bds0116Card---default {
2472
2468
  box-shadow: var(--shadow_s);
2473
2469
  }
2474
- .bds0115Card-card.bds0115Card---elevated {
2470
+ .bds0116Card-card.bds0116Card---elevated {
2475
2471
  box-shadow: var(--shadow_m);
2476
2472
  }
2477
- .bds0115Card-card.bds0115Card---outlined {
2473
+ .bds0116Card-card.bds0116Card---outlined {
2478
2474
  border: 1px solid currentcolor;
2479
2475
  box-shadow: var(--shadow_s);
2480
2476
  }
2481
- .bds0115Card-card.bds0115Card---clickable {
2477
+ .bds0116Card-card.bds0116Card---clickable {
2482
2478
  cursor: pointer;
2483
2479
  }
2484
- .bds0115Card-card.bds0115Card---padding-none {
2480
+ .bds0116Card-card.bds0116Card---padding-none {
2485
2481
  padding: 0;
2486
2482
  }
2487
- .bds0115Card-card.bds0115Card---padding-small {
2483
+ .bds0116Card-card.bds0116Card---padding-small {
2488
2484
  padding: var(--space_s);
2489
2485
  }
2490
- .bds0115Card-card.bds0115Card---padding-medium {
2486
+ .bds0116Card-card.bds0116Card---padding-medium {
2491
2487
  padding: var(--space_m);
2492
2488
  }
2493
- .bds0115Card-card.bds0115Card---padding-large {
2489
+ .bds0116Card-card.bds0116Card---padding-large {
2494
2490
  padding: var(--space_l);
2495
2491
  }
2496
- .bds0115Card-card.bds0115Card---text-start {
2492
+ .bds0116Card-card.bds0116Card---text-start {
2497
2493
  text-align: left;
2498
2494
  }
2499
- .bds0115Card-card.bds0115Card---text-center {
2495
+ .bds0116Card-card.bds0116Card---text-center {
2500
2496
  text-align: center;
2501
2497
  }
2502
- .bds0115Card-card.bds0115Card---text-end {
2498
+ .bds0116Card-card.bds0116Card---text-end {
2503
2499
  text-align: right;
2504
2500
  }
2505
2501
  @media (hover: hover) and (pointer: fine) {
2506
- .bds0115Card-card.bds0115Card---clickable:hover {
2502
+ .bds0116Card-card.bds0116Card---clickable:hover {
2507
2503
  transform: translateY(-2px);
2508
2504
  box-shadow: var(--shadow_xl);
2509
2505
  }
2510
- .bds0115Card-card.bds0115Card---default:hover {
2506
+ .bds0116Card-card.bds0116Card---default:hover {
2511
2507
  box-shadow: var(--shadow_m);
2512
2508
  }
2513
- .bds0115Card-card.bds0115Card---elevated:hover {
2509
+ .bds0116Card-card.bds0116Card---elevated:hover {
2514
2510
  box-shadow: var(--shadow_2xl);
2515
2511
  }
2516
- .bds0115Card-card.bds0115Card---outlined:hover {
2512
+ .bds0116Card-card.bds0116Card---outlined:hover {
2517
2513
  box-shadow: var(--shadow_s);
2518
2514
  }
2519
2515
  }
@@ -2521,60 +2517,60 @@
2521
2517
 
2522
2518
  /* src/components/layout/SectionHeader/SectionHeader.module.css */
2523
2519
  @layer component {
2524
- .bds0115SectionHeader-sectionHeader {
2520
+ .bds0116SectionHeader-sectionHeader {
2525
2521
  display: flex;
2526
2522
  flex-direction: column;
2527
2523
  gap: var(--space_m);
2528
2524
  grid-column: var(--grid_span-100);
2529
2525
  }
2530
- .bds0115SectionHeader-title {
2526
+ .bds0116SectionHeader-title {
2531
2527
  color: var(--sectionHeader-title-color, var(--color_on-bg));
2532
2528
  margin: 0;
2533
2529
  font-family: var(--font_family--body);
2534
2530
  }
2535
- .bds0115SectionHeader-subtitle {
2531
+ .bds0116SectionHeader-subtitle {
2536
2532
  color: var(--sectionHeader_subtitle-color, var(--color_grey--strong));
2537
2533
  margin: 0;
2538
2534
  font-family: var(--font_family--body);
2539
2535
  font-weight: var(--font_weight--medium);
2540
2536
  }
2541
- .bds0115SectionHeader-sectionHeader.bds0115SectionHeader---start {
2537
+ .bds0116SectionHeader-sectionHeader.bds0116SectionHeader---start {
2542
2538
  align-items: flex-start;
2543
2539
  text-align: left;
2544
2540
  }
2545
- .bds0115SectionHeader-sectionHeader.bds0115SectionHeader---center {
2541
+ .bds0116SectionHeader-sectionHeader.bds0116SectionHeader---center {
2546
2542
  align-items: center;
2547
2543
  text-align: center;
2548
2544
  }
2549
- .bds0115SectionHeader-sectionHeader.bds0115SectionHeader---end {
2545
+ .bds0116SectionHeader-sectionHeader.bds0116SectionHeader---end {
2550
2546
  align-items: flex-end;
2551
2547
  text-align: right;
2552
2548
  }
2553
- .bds0115SectionHeader-sectionHeader.bds0115SectionHeader---small .bds0115SectionHeader-title {
2549
+ .bds0116SectionHeader-sectionHeader.bds0116SectionHeader---small .bds0116SectionHeader-title {
2554
2550
  font-size: var(--font_size--heading-1);
2555
2551
  line-height: var(--font_line-height--heading);
2556
2552
  font-weight: var(--font_weight--bold);
2557
2553
  }
2558
- .bds0115SectionHeader-sectionHeader.bds0115SectionHeader---small .bds0115SectionHeader-subtitle {
2554
+ .bds0116SectionHeader-sectionHeader.bds0116SectionHeader---small .bds0116SectionHeader-subtitle {
2559
2555
  font-size: var(--font_size--body);
2560
2556
  line-height: 1.4;
2561
2557
  }
2562
- .bds0115SectionHeader-sectionHeader.bds0115SectionHeader---medium .bds0115SectionHeader-title {
2558
+ .bds0116SectionHeader-sectionHeader.bds0116SectionHeader---medium .bds0116SectionHeader-title {
2563
2559
  font-size: var(--font_size--display);
2564
2560
  line-height: var(--font_line-height--display);
2565
2561
  font-weight: var(--font_weight--bold);
2566
2562
  }
2567
- .bds0115SectionHeader-sectionHeader.bds0115SectionHeader---medium .bds0115SectionHeader-subtitle {
2563
+ .bds0116SectionHeader-sectionHeader.bds0116SectionHeader---medium .bds0116SectionHeader-subtitle {
2568
2564
  font-size: var(--font_size--heading-3);
2569
2565
  line-height: 1.3;
2570
2566
  }
2571
- .bds0115SectionHeader-sectionHeader.bds0115SectionHeader---large .bds0115SectionHeader-title {
2567
+ .bds0116SectionHeader-sectionHeader.bds0116SectionHeader---large .bds0116SectionHeader-title {
2572
2568
  font-size: var(--font_size--display);
2573
2569
  line-height: var(--font_line-height--display);
2574
2570
  font-weight: var(--font_weight--bold);
2575
2571
  letter-spacing: var(--font_tracking--tight);
2576
2572
  }
2577
- .bds0115SectionHeader-sectionHeader.bds0115SectionHeader---large .bds0115SectionHeader-subtitle {
2573
+ .bds0116SectionHeader-sectionHeader.bds0116SectionHeader---large .bds0116SectionHeader-subtitle {
2578
2574
  font-size: var(--font_size--heading-2);
2579
2575
  line-height: 1.3;
2580
2576
  font-weight: var(--font_weight--medium);
@@ -2583,7 +2579,7 @@
2583
2579
 
2584
2580
  /* src/components/layout/IconWrapper/IconWrapper.module.css */
2585
2581
  @layer component {
2586
- .bds0115IconWrapper-wrapper {
2582
+ .bds0116IconWrapper-wrapper {
2587
2583
  width: 2em;
2588
2584
  height: 2em;
2589
2585
  font-size: 3em;
@@ -2598,7 +2594,7 @@
2598
2594
  position: relative;
2599
2595
  transition: var(--animation_transition);
2600
2596
  }
2601
- .bds0115IconWrapper-wrapper svg {
2597
+ .bds0116IconWrapper-wrapper svg {
2602
2598
  fill: currentcolor;
2603
2599
  }
2604
2600
  }