@boostdev/design-system-components 0.1.13 → 0.1.14

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