@boostdev/design-system-components 0.1.9 → 0.1.10

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