@norges-domstoler/dds-components 16.3.0 → 17.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.css +427 -122
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.d.mts +449 -447
  4. package/dist/index.d.ts +449 -447
  5. package/dist/index.js +1821 -1725
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +1746 -1658
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +22 -22
package/dist/index.css CHANGED
@@ -114,12 +114,30 @@
114
114
  }
115
115
 
116
116
  /* src/components/Typography/typographyStyles.module.css */
117
+ :root {
118
+ --dds-color-text-body: var(--dds-color-text-default);
119
+ --dds-color-text-link: var(--dds-color-text-action-resting);
120
+ --dds-color-text-link-visited: var(--dds-color-text-action-visited);
121
+ --dds-color-text-label: var(--dds-color-text-medium);
122
+ --dds-color-text-placeholder: var(--dds-color-text-subtle);
123
+ --dds-color-text-helper: var(--dds-color-text-subtle);
124
+ }
125
+ .typographyStyles_contrast {
126
+ --dds-color-text-body: var(--dds-color-text-on-inverse);
127
+ --dds-color-text-link: var(--dds-color-text-on-inverse);
128
+ --dds-color-text-link-visited: var( --dds-color-text-action-visited-on-inverse );
129
+ --dds-color-text-label: var(--dds-color-text-on-inverse);
130
+ --dds-color-text-helper: var(--dds-color-text-on-inverse);
131
+ --dds-color-text-placeholder: var(--dds-color-text-subtle);
132
+ }
117
133
  :where(.typographyStyles_a) {
118
134
  font: inherit;
119
- color: var(--dds-color-text-action-resting);
135
+ color: var(--dds-color-text-link);
120
136
  width: -moz-fit-content;
121
137
  width: fit-content;
122
138
  text-decoration: underline;
139
+ text-decoration-thickness: max(1px, 0.0625rem);
140
+ text-underline-offset: max(4px, 0.25rem);
123
141
  margin: 0;
124
142
  &:hover {
125
143
  text-decoration-color: transparent;
@@ -151,9 +169,9 @@
151
169
  }
152
170
  :where(.typographyStyles_body-sans-01) {
153
171
  margin: 0;
154
- font: var(--dds-font-body-sans-01-font-style) var(--dds-font-body-sans-01-font-weight) var(--dds-font-body-sans-01-font-size) / var(--dds-font-body-sans-01-line-height) var(--dds-font-body-sans-01-font-family);
172
+ font: var(--dds-font-body-sans-01);
155
173
  letter-spacing: var(--dds-font-body-sans-01-letter-spacing);
156
- color: var(--dds-color-text-default);
174
+ color: var(--dds-color-text-body);
157
175
  }
158
176
  :where(.typographyStyles_body-sans-01--margins) {
159
177
  display: block;
@@ -162,9 +180,9 @@
162
180
  }
163
181
  :where(.typographyStyles_body-sans-02) {
164
182
  margin: 0;
165
- font: var(--dds-font-body-sans-02-font-style) var(--dds-font-body-sans-02-font-weight) var(--dds-font-body-sans-02-font-size) / var(--dds-font-body-sans-02-line-height) var(--dds-font-body-sans-02-font-family);
183
+ font: var(--dds-font-body-sans-02);
166
184
  letter-spacing: var(--dds-font-body-sans-02-letter-spacing);
167
- color: var(--dds-color-text-default);
185
+ color: var(--dds-color-text-body);
168
186
  }
169
187
  :where(.typographyStyles_body-sans-02--margins) {
170
188
  display: block;
@@ -173,9 +191,9 @@
173
191
  }
174
192
  :where(.typographyStyles_body-sans-03) {
175
193
  margin: 0;
176
- font: var(--dds-font-body-sans-03-font-style) var(--dds-font-body-sans-03-font-weight) var(--dds-font-body-sans-03-font-size) / var(--dds-font-body-sans-03-line-height) var(--dds-font-body-sans-03-font-family);
194
+ font: var(--dds-font-body-sans-03);
177
195
  letter-spacing: var(--dds-font-body-sans-03-letter-spacing);
178
- color: var(--dds-color-text-default);
196
+ color: var(--dds-color-text-body);
179
197
  }
180
198
  :where(.typographyStyles_body-sans-03--margins) {
181
199
  display: block;
@@ -184,9 +202,9 @@
184
202
  }
185
203
  :where(.typographyStyles_body-sans-04) {
186
204
  margin: 0;
187
- font: var(--dds-font-body-sans-04-font-style) var(--dds-font-body-sans-04-font-weight) var(--dds-font-body-sans-04-font-size) / var(--dds-font-body-sans-04-line-height) var(--dds-font-body-sans-04-font-family);
205
+ font: var(--dds-font-body-sans-04);
188
206
  letter-spacing: var(--dds-font-body-sans-04-letter-spacing);
189
- color: var(--dds-color-text-default);
207
+ color: var(--dds-color-text-body);
190
208
  }
191
209
  :where(.typographyStyles_body-sans-04--margins) {
192
210
  display: block;
@@ -195,9 +213,9 @@
195
213
  }
196
214
  :where(.typographyStyles_lead-sans-01) {
197
215
  margin: 0;
198
- font: var(--dds-font-lead-sans-01-font-style) var(--dds-font-lead-sans-01-font-weight) var(--dds-font-lead-sans-01-font-size) / var(--dds-font-lead-sans-01-line-height) var(--dds-font-lead-sans-01-font-family);
216
+ font: var(--dds-font-lead-sans-01);
199
217
  letter-spacing: var(--dds-font-lead-sans-01-letter-spacing);
200
- color: var(--dds-color-text-default);
218
+ color: var(--dds-color-text-body);
201
219
  }
202
220
  :where(.typographyStyles_lead-sans-01--margins) {
203
221
  display: block;
@@ -206,9 +224,9 @@
206
224
  }
207
225
  :where(.typographyStyles_lead-sans-02) {
208
226
  margin: 0;
209
- font: var(--dds-font-lead-sans-02-font-style) var(--dds-font-lead-sans-02-font-weight) var(--dds-font-lead-sans-02-font-size) / var(--dds-font-lead-sans-02-line-height) var(--dds-font-lead-sans-02-font-family);
227
+ font: var(--dds-font-lead-sans-02);
210
228
  letter-spacing: var(--dds-font-lead-sans-02-letter-spacing);
211
- color: var(--dds-color-text-default);
229
+ color: var(--dds-color-text-body);
212
230
  }
213
231
  :where(.typographyStyles_lead-sans-02--margins) {
214
232
  display: block;
@@ -217,9 +235,9 @@
217
235
  }
218
236
  :where(.typographyStyles_lead-sans-03) {
219
237
  margin: 0;
220
- font: var(--dds-font-lead-sans-03-font-style) var(--dds-font-lead-sans-03-font-weight) var(--dds-font-lead-sans-03-font-size) / var(--dds-font-lead-sans-03-line-height) var(--dds-font-lead-sans-03-font-family);
238
+ font: var(--dds-font-lead-sans-03);
221
239
  letter-spacing: var(--dds-font-lead-sans-03-letter-spacing);
222
- color: var(--dds-color-text-default);
240
+ color: var(--dds-color-text-body);
223
241
  }
224
242
  :where(.typographyStyles_lead-sans-03--margins) {
225
243
  display: block;
@@ -228,9 +246,9 @@
228
246
  }
229
247
  :where(.typographyStyles_lead-sans-04) {
230
248
  margin: 0;
231
- font: var(--dds-font-lead-sans-04-font-style) var(--dds-font-lead-sans-04-font-weight) var(--dds-font-lead-sans-04-font-size) / var(--dds-font-lead-sans-04-line-height) var(--dds-font-lead-sans-04-font-family);
249
+ font: var(--dds-font-lead-sans-04);
232
250
  letter-spacing: var(--dds-font-lead-sans-04-letter-spacing);
233
- color: var(--dds-color-text-default);
251
+ color: var(--dds-color-text-body);
234
252
  }
235
253
  :where(.typographyStyles_lead-sans-04--margins) {
236
254
  display: block;
@@ -239,9 +257,9 @@
239
257
  }
240
258
  :where(.typographyStyles_lead-sans-05) {
241
259
  margin: 0;
242
- font: var(--dds-font-lead-sans-05-font-style) var(--dds-font-lead-sans-05-font-weight) var(--dds-font-lead-sans-05-font-size) / var(--dds-font-lead-sans-05-line-height) var(--dds-font-lead-sans-05-font-family);
260
+ font: var(--dds-font-lead-sans-05);
243
261
  letter-spacing: var(--dds-font-lead-sans-05-letter-spacing);
244
- color: var(--dds-color-text-default);
262
+ color: var(--dds-color-text-body);
245
263
  }
246
264
  :where(.typographyStyles_lead-sans-05--margins) {
247
265
  display: block;
@@ -250,9 +268,9 @@
250
268
  }
251
269
  :where(.typographyStyles_heading-sans-01) {
252
270
  margin: 0;
253
- font: var(--dds-font-heading-sans-01-font-style) var(--dds-font-heading-sans-01-font-weight) var(--dds-font-heading-sans-01-font-size) / var(--dds-font-heading-sans-01-line-height) var(--dds-font-heading-sans-01-font-family);
271
+ font: var(--dds-font-heading-sans-01);
254
272
  letter-spacing: var(--dds-font-heading-sans-01-letter-spacing);
255
- color: var(--dds-color-text-default);
273
+ color: var(--dds-color-text-body);
256
274
  }
257
275
  :where(.typographyStyles_heading-sans-01--margins) {
258
276
  display: block;
@@ -262,9 +280,9 @@
262
280
  }
263
281
  :where(.typographyStyles_heading-sans-02) {
264
282
  margin: 0;
265
- font: var(--dds-font-heading-sans-02-font-style) var(--dds-font-heading-sans-02-font-weight) var(--dds-font-heading-sans-02-font-size) / var(--dds-font-heading-sans-02-line-height) var(--dds-font-heading-sans-02-font-family);
283
+ font: var(--dds-font-heading-sans-02);
266
284
  letter-spacing: var(--dds-font-heading-sans-02-letter-spacing);
267
- color: var(--dds-color-text-default);
285
+ color: var(--dds-color-text-body);
268
286
  }
269
287
  :where(.typographyStyles_heading-sans-02--margins) {
270
288
  display: block;
@@ -274,9 +292,9 @@
274
292
  }
275
293
  :where(.typographyStyles_heading-sans-03) {
276
294
  margin: 0;
277
- font: var(--dds-font-heading-sans-03-font-style) var(--dds-font-heading-sans-03-font-weight) var(--dds-font-heading-sans-03-font-size) / var(--dds-font-heading-sans-03-line-height) var(--dds-font-heading-sans-03-font-family);
295
+ font: var(--dds-font-heading-sans-03);
278
296
  letter-spacing: var(--dds-font-heading-sans-03-letter-spacing);
279
- color: var(--dds-color-text-default);
297
+ color: var(--dds-color-text-body);
280
298
  }
281
299
  :where(.typographyStyles_heading-sans-03--margins) {
282
300
  display: block;
@@ -286,9 +304,9 @@
286
304
  }
287
305
  :where(.typographyStyles_heading-sans-04) {
288
306
  margin: 0;
289
- font: var(--dds-font-heading-sans-04-font-style) var(--dds-font-heading-sans-04-font-weight) var(--dds-font-heading-sans-04-font-size) / var(--dds-font-heading-sans-04-line-height) var(--dds-font-heading-sans-04-font-family);
307
+ font: var(--dds-font-heading-sans-04);
290
308
  letter-spacing: var(--dds-font-heading-sans-04-letter-spacing);
291
- color: var(--dds-color-text-default);
309
+ color: var(--dds-color-text-body);
292
310
  }
293
311
  :where(.typographyStyles_heading-sans-04--margins) {
294
312
  display: block;
@@ -298,9 +316,9 @@
298
316
  }
299
317
  :where(.typographyStyles_heading-sans-05) {
300
318
  margin: 0;
301
- font: var(--dds-font-heading-sans-05-font-style) var(--dds-font-heading-sans-05-font-weight) var(--dds-font-heading-sans-05-font-size) / var(--dds-font-heading-sans-05-line-height) var(--dds-font-heading-sans-05-font-family);
319
+ font: var(--dds-font-heading-sans-05);
302
320
  letter-spacing: var(--dds-font-heading-sans-05-letter-spacing);
303
- color: var(--dds-color-text-default);
321
+ color: var(--dds-color-text-body);
304
322
  }
305
323
  :where(.typographyStyles_heading-sans-05--margins) {
306
324
  display: block;
@@ -310,9 +328,9 @@
310
328
  }
311
329
  :where(.typographyStyles_heading-sans-06) {
312
330
  margin: 0;
313
- font: var(--dds-font-heading-sans-06-font-style) var(--dds-font-heading-sans-06-font-weight) var(--dds-font-heading-sans-06-font-size) / var(--dds-font-heading-sans-06-line-height) var(--dds-font-heading-sans-06-font-family);
331
+ font: var(--dds-font-heading-sans-06);
314
332
  letter-spacing: var(--dds-font-heading-sans-06-letter-spacing);
315
- color: var(--dds-color-text-default);
333
+ color: var(--dds-color-text-body);
316
334
  }
317
335
  :where(.typographyStyles_heading-sans-06--margins) {
318
336
  display: block;
@@ -322,9 +340,9 @@
322
340
  }
323
341
  :where(.typographyStyles_heading-sans-07) {
324
342
  margin: 0;
325
- font: var(--dds-font-heading-sans-07-font-style) var(--dds-font-heading-sans-07-font-weight) var(--dds-font-heading-sans-07-font-size) / var(--dds-font-heading-sans-07-line-height) var(--dds-font-heading-sans-07-font-family);
343
+ font: var(--dds-font-heading-sans-07);
326
344
  letter-spacing: var(--dds-font-heading-sans-07-letter-spacing);
327
- color: var(--dds-color-text-default);
345
+ color: var(--dds-color-text-body);
328
346
  }
329
347
  :where(.typographyStyles_heading-sans-07--margins) {
330
348
  display: block;
@@ -334,9 +352,9 @@
334
352
  }
335
353
  :where(.typographyStyles_heading-sans-08) {
336
354
  margin: 0;
337
- font: var(--dds-font-heading-sans-08-font-style) var(--dds-font-heading-sans-08-font-weight) var(--dds-font-heading-sans-08-font-size) / var(--dds-font-heading-sans-08-line-height) var(--dds-font-heading-sans-08-font-family);
355
+ font: var(--dds-font-heading-sans-08);
338
356
  letter-spacing: var(--dds-font-heading-sans-08-letter-spacing);
339
- color: var(--dds-color-text-default);
357
+ color: var(--dds-color-text-body);
340
358
  }
341
359
  :where(.typographyStyles_heading-sans-08--margins) {
342
360
  display: block;
@@ -346,9 +364,9 @@
346
364
  }
347
365
  :where(.typographyStyles_supporting-style-label-01) {
348
366
  margin: 0;
349
- font: var(--dds-font-supporting-style-label-01-font-style) var(--dds-font-supporting-style-label-01-font-weight) var(--dds-font-supporting-style-label-01-font-size) / var(--dds-font-supporting-style-label-01-line-height) var(--dds-font-supporting-style-label-01-font-family);
367
+ font: var(--dds-font-supporting-style-label-01);
350
368
  letter-spacing: var(--dds-font-supporting-style-label-01-letter-spacing);
351
- color: var(--dds-color-text-medium);
369
+ color: var(--dds-color-text-label);
352
370
  }
353
371
  :where(.typographyStyles_supporting-style-label-01--margins) {
354
372
  display: block;
@@ -357,9 +375,9 @@
357
375
  }
358
376
  :where(.typographyStyles_supporting-style-helper-text-01) {
359
377
  margin: 0;
360
- font: var(--dds-font-supporting-style-helpertext-01-font-style) var(--dds-font-supporting-style-helpertext-01-font-weight) var(--dds-font-supporting-style-helpertext-01-font-size) / var(--dds-font-supporting-style-helpertext-01-line-height) var(--dds-font-supporting-style-helpertext-01-font-family);
378
+ font: var(--dds-font-supporting-style-helpertext-01);
361
379
  letter-spacing: var(--dds-font-supporting-style-helpertext-01-letter-spacing);
362
- color: var(--dds-color-text-subtle);
380
+ color: var(--dds-color-text-helper);
363
381
  }
364
382
  :where(.typographyStyles_supporting-style-helper-text-01--margins) {
365
383
  display: block;
@@ -368,9 +386,9 @@
368
386
  }
369
387
  :where(.typographyStyles_supporting-style-placeholder-text-01) {
370
388
  margin: 0;
371
- font: var(--dds-font-supporting-style-placeholdertext-01-font-style) var(--dds-font-supporting-style-placeholdertext-01-font-weight) var(--dds-font-supporting-style-placeholdertext-01-font-size) / var(--dds-font-supporting-style-placeholdertext-01-line-height) var(--dds-font-supporting-style-placeholdertext-01-font-family);
389
+ font: var(--dds-font-supporting-style-placeholdertext-01);
372
390
  letter-spacing: var( --dds-font-supporting-style-placeholdertext-01-letter-spacing );
373
- color: var(--dds-color-text-subtle);
391
+ color: var(--dds-color-text-placeholder);
374
392
  }
375
393
  :where(.typographyStyles_supporting-style-placeholder-text-01--margins) {
376
394
  display: block;
@@ -379,9 +397,9 @@
379
397
  }
380
398
  :where(.typographyStyles_supporting-style-placeholder-text-02) {
381
399
  margin: 0;
382
- font: var(--dds-font-supporting-style-placeholdertext-02-font-style) var(--dds-font-supporting-style-placeholdertext-02-font-weight) var(--dds-font-supporting-style-placeholdertext-02-font-size) / var(--dds-font-supporting-style-placeholdertext-02-line-height) var(--dds-font-supporting-style-placeholdertext-02-font-family);
400
+ font: var(--dds-font-supporting-style-placeholdertext-02);
383
401
  letter-spacing: var( --dds-font-supporting-style-placeholdertext-02-letter-spacing );
384
- color: var(--dds-color-text-subtle);
402
+ color: var(--dds-color-text-placeholder);
385
403
  }
386
404
  :where(.typographyStyles_supporting-style-placeholder-text-02--margins) {
387
405
  display: block;
@@ -390,9 +408,9 @@
390
408
  }
391
409
  :where(.typographyStyles_supporting-style-placeholder-text-03) {
392
410
  margin: 0;
393
- font: var(--dds-font-supporting-style-placeholdertext-03-font-style) var(--dds-font-supporting-style-placeholdertext-03-font-weight) var(--dds-font-supporting-style-placeholdertext-03-font-size) / var(--dds-font-supporting-style-placeholdertext-03-line-height) var(--dds-font-supporting-style-placeholdertext-03-font-family);
411
+ font: var(--dds-font-supporting-style-placeholdertext-03);
394
412
  letter-spacing: var( --dds-font-supporting-style-placeholdertext-03-letter-spacing );
395
- color: var(--dds-color-text-subtle);
413
+ color: var(--dds-color-text-placeholder);
396
414
  }
397
415
  :where(.typographyStyles_supporting-style-placeholder-text-03--margins) {
398
416
  display: block;
@@ -401,9 +419,9 @@
401
419
  }
402
420
  :where(.typographyStyles_supporting-style-tiny-01) {
403
421
  margin: 0;
404
- font: var(--dds-font-supporting-style-tiny-01-font-style) var(--dds-font-supporting-style-tiny-01-font-weight) var(--dds-font-supporting-style-tiny-01-font-size) / var(--dds-font-supporting-style-tiny-01-line-height) var(--dds-font-supporting-style-tiny-01-font-family);
422
+ font: var(--dds-font-supporting-style-tiny-01);
405
423
  letter-spacing: var(--dds-font-supporting-style-tiny-01-letter-spacing);
406
- color: var(--dds-color-text-default);
424
+ color: var(--dds-color-text-body);
407
425
  }
408
426
  :where(.typographyStyles_supporting-style-tiny-01--margins) {
409
427
  display: block;
@@ -412,9 +430,9 @@
412
430
  }
413
431
  :where(.typographyStyles_supporting-style-tiny-02) {
414
432
  margin: 0;
415
- font: var(--dds-font-supporting-style-tiny-02-font-style) var(--dds-font-supporting-style-tiny-02-font-weight) var(--dds-font-supporting-style-tiny-02-font-size) / var(--dds-font-supporting-style-tiny-02-line-height) var(--dds-font-supporting-style-tiny-02-font-family);
433
+ font: var(--dds-font-supporting-style-tiny-02);
416
434
  letter-spacing: var(--dds-font-supporting-style-tiny-02-letter-spacing);
417
- color: var(--dds-color-text-default);
435
+ color: var(--dds-color-text-body);
418
436
  }
419
437
  :where(.typographyStyles_supporting-style-tiny-02--margins) {
420
438
  display: block;
@@ -437,7 +455,7 @@
437
455
  text-decoration: underline;
438
456
  }
439
457
  :where(.typographyStyles_a) {
440
- color: var(--dds-color-text-action-resting);
458
+ color: var(--dds-color-text-link);
441
459
  }
442
460
  .typographyStyles_text-color--default {
443
461
  color: var(--dds-color-text-default);
@@ -474,7 +492,6 @@
474
492
  text-transform: none;
475
493
  }
476
494
  .utilStyles_hide-input {
477
- -webkit-clip-path: rect(0 0 0 0);
478
495
  clip-path: rect(0 0 0 0);
479
496
  position: absolute;
480
497
  height: 1px;
@@ -528,7 +545,6 @@
528
545
  inset-inline-start: 0px;
529
546
  overflow: hidden;
530
547
  clip: rect(0, 0, 0, 0);
531
- -webkit-clip-path: inset(50%);
532
548
  clip-path: inset(50%);
533
549
  border: 0px;
534
550
  }
@@ -598,7 +614,7 @@
598
614
  border: 1px solid var(--dds-color-border-default);
599
615
  background-color: var(--dds-color-surface-default);
600
616
  padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1) var(--dds-spacing-x0-75) var(--dds-spacing-x0-75);
601
- border-radius: var(--dds-border-radius-1);
617
+ border-radius: var(--dds-border-radius-input);
602
618
  margin: 0;
603
619
  box-sizing: border-box;
604
620
  box-shadow: none;
@@ -701,6 +717,13 @@
701
717
  :where(.Input_char-counter) {
702
718
  margin-left: auto;
703
719
  }
720
+ :where(.Input_icon) {
721
+ position: absolute;
722
+ top: 50%;
723
+ transform: translate(0, -50%);
724
+ z-index: 1;
725
+ color: var(--dds-color-icon-default);
726
+ }
704
727
 
705
728
  /* src/components/Typography/Typography/TextOverflowEllipsis/TextOverflowEllipsis.module.css */
706
729
  .TextOverflowEllipsis_wrapper {
@@ -792,20 +815,20 @@
792
815
  .Paper_container {
793
816
  box-sizing: border-box;
794
817
  background-color: var(--dds-color-surface-default);
795
- border-radius: var(--dds-border-radius-1);
818
+ border-radius: var(--dds-border-radius-surface);
796
819
  margin: 0;
797
820
  }
798
821
  .Paper_shadow--1 {
799
- box-shadow: var(--dds-shadow-1-onlight);
822
+ box-shadow: var(--dds-shadow-1);
800
823
  }
801
824
  .Paper_shadow--2 {
802
- box-shadow: var(--dds-shadow-2-onlight);
825
+ box-shadow: var(--dds-shadow-2);
803
826
  }
804
827
  .Paper_shadow--3 {
805
- box-shadow: var(--dds-shadow-3-onlight);
828
+ box-shadow: var(--dds-shadow-3);
806
829
  }
807
830
  .Paper_shadow--4 {
808
- box-shadow: var(--dds-shadow-4-onlight);
831
+ box-shadow: var(--dds-shadow-4);
809
832
  }
810
833
  .Paper_border--default {
811
834
  border: 1px solid var(--dds-color-border-default);
@@ -831,6 +854,55 @@
831
854
  align-items: center;
832
855
  gap: var(--dds-spacing-x0-5);
833
856
  }
857
+ .Breadcrumbs_list--large-screen-hide-xs {
858
+ @media only screen and (max-width: 600px) {
859
+ display: none;
860
+ }
861
+ }
862
+ .Breadcrumbs_list--large-screen-hide-sm {
863
+ @media only screen and (max-width: 960px) {
864
+ display: none;
865
+ }
866
+ }
867
+ .Breadcrumbs_list--large-screen-hide-md {
868
+ @media only screen and (max-width: 1280px) {
869
+ display: none;
870
+ }
871
+ }
872
+ .Breadcrumbs_list--large-screen-hide-lg {
873
+ @media only screen and (max-width: 1920px) {
874
+ display: none;
875
+ }
876
+ }
877
+ .Breadcrumbs_list--large-screen-hide-xl {
878
+ display: none;
879
+ }
880
+ .Breadcrumbs_list--small-screen {
881
+ display: none;
882
+ }
883
+ .Breadcrumbs_list--small-screen-show-xs {
884
+ @media only screen and (max-width: 600px) {
885
+ display: flex;
886
+ }
887
+ }
888
+ .Breadcrumbs_list--small-screen-show-sm {
889
+ @media only screen and (max-width: 960px) {
890
+ display: flex;
891
+ }
892
+ }
893
+ .Breadcrumbs_list--small-screen-show-md {
894
+ @media only screen and (max-width: 1280px) {
895
+ display: flex;
896
+ }
897
+ }
898
+ .Breadcrumbs_list--small-screen-show-lg {
899
+ @media only screen and (max-width: 1920px) {
900
+ display: flex;
901
+ }
902
+ }
903
+ .Breadcrumbs_list--small-screen-show-xl {
904
+ display: flex;
905
+ }
834
906
  .Breadcrumbs_list-item {
835
907
  align-items: center;
836
908
  display: flex;
@@ -859,7 +931,7 @@
859
931
  cursor: pointer;
860
932
  box-shadow: none;
861
933
  text-decoration: none;
862
- border-radius: var(--dds-border-radius-1);
934
+ border-radius: var(--dds-border-radius-button);
863
935
  border: 1px solid;
864
936
  @media (prefers-reduced-motion: no-preference) {
865
937
  transition: all 0.2s;
@@ -885,15 +957,15 @@
885
957
  }
886
958
  .Button_button--tiny {
887
959
  &.Button_just-text {
888
- padding: var(--dds-spacing-x0-25);
960
+ padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
889
961
  }
890
962
  &.Button_with-text-and-icon {
891
963
  gap: var(--dds-spacing-x0-125);
892
964
  &.Button_with-icon-left {
893
- padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-25) var(--dds-spacing-x0-25) var(--dds-spacing-x0-125);
965
+ padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5) var(--dds-spacing-x0-25) var(--dds-spacing-x0-25);
894
966
  }
895
967
  &.Button_with-icon-right {
896
- padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-125) var(--dds-spacing-x0-25) var(--dds-spacing-x0-25);
968
+ padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-25) var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
897
969
  }
898
970
  }
899
971
  &.Button_just-icon,
@@ -901,7 +973,7 @@
901
973
  padding: var(--dds-spacing-x0-25);
902
974
  }
903
975
  .Button_icon {
904
- font-size: var(--dds-font-supporting-style-tiny-01-line-height);
976
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
905
977
  }
906
978
  }
907
979
  .Button_button--small {
@@ -922,7 +994,7 @@
922
994
  padding: var(--dds-spacing-x0-5);
923
995
  }
924
996
  .Button_icon {
925
- font-size: var(--dds-font-body-sans-01-line-height);
997
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
926
998
  }
927
999
  }
928
1000
  .Button_button--medium {
@@ -943,7 +1015,7 @@
943
1015
  padding: var(--dds-spacing-x0-75);
944
1016
  }
945
1017
  .Button_icon {
946
- font-size: var(--dds-font-body-sans-02-line-height);
1018
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
947
1019
  }
948
1020
  }
949
1021
  .Button_button--large {
@@ -964,7 +1036,7 @@
964
1036
  padding: var(--dds-spacing-x1);
965
1037
  }
966
1038
  .Button_icon {
967
- font-size: var(--dds-font-body-sans-04-line-height);
1039
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
968
1040
  }
969
1041
  }
970
1042
  .Button_spinner-wrapper--absolute {
@@ -1058,7 +1130,6 @@
1058
1130
  overflow-y: auto;
1059
1131
  min-width: 180px;
1060
1132
  max-width: 300px;
1061
- box-shadow: var(--dds-shadow-1-onlight);
1062
1133
  }
1063
1134
  .OverflowMenu_list {
1064
1135
  display: flex;
@@ -1094,7 +1165,7 @@
1094
1165
  .OverflowMenu_icon {
1095
1166
  display: flex;
1096
1167
  align-items: center;
1097
- font-size: var(--dds-font-body-sans-01-line-height);
1168
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
1098
1169
  }
1099
1170
  .OverflowMenu_divider {
1100
1171
  margin-inline: var(--dds-spacing-x0-5);
@@ -1277,7 +1348,7 @@
1277
1348
  gap: var(--dds-spacing-x0-25);
1278
1349
  padding: var(--dds-spacing-x0-125) var(--dds-spacing-x0-25) var(--dds-spacing-x0-125) var(--dds-spacing-x0-5);
1279
1350
  border: 1px solid var(--dds-color-border-subtle);
1280
- border-radius: var(--dds-border-radius-1);
1351
+ border-radius: var(--dds-border-radius-chip);
1281
1352
  background-color: var(--dds-color-surface-subtle);
1282
1353
  }
1283
1354
  .Chip_group {
@@ -1357,7 +1428,7 @@
1357
1428
  border: 0;
1358
1429
  transition: 0.2s;
1359
1430
  background: transparent;
1360
- border-radius: var(--dds-border-radius-1);
1431
+ border-radius: var(--dds-border-radius-button);
1361
1432
  color: var(--dds-color-icon-default);
1362
1433
  &:not(:disabled):not(.DateInput_disabled):hover,
1363
1434
  &:not(:disabled):not(.DateInput_disabled):active {
@@ -1376,11 +1447,11 @@
1376
1447
  }
1377
1448
  .DateInput_popover {
1378
1449
  z-index: 100;
1379
- border-radius: var(--dds-border-radius-1);
1450
+ border-radius: var(--dds-border-radius-surface);
1380
1451
  background-color: var(--dds-color-surface-default);
1381
1452
  border: 1px solid var(--dds-color-border-default);
1382
1453
  padding: var(--dds-spacing-x0-5);
1383
- box-shadow: var(--dds-shadow-2-onlight);
1454
+ box-shadow: var(--dds-shadow-2);
1384
1455
  }
1385
1456
  .DateInput_calendar {
1386
1457
  display: flex;
@@ -1416,7 +1487,7 @@
1416
1487
  cursor: pointer;
1417
1488
  border: 1px solid;
1418
1489
  border-color: transparent;
1419
- border-radius: var(--dds-border-radius-1);
1490
+ border-radius: var(--dds-border-radius-button);
1420
1491
  transition: 0.2s;
1421
1492
  }
1422
1493
  .DateInput_calendar__cell-button--today {
@@ -1465,9 +1536,6 @@
1465
1536
  color: var(--dds-color-icon-on-danger-default);
1466
1537
  }
1467
1538
  }
1468
- .InputMessage_container--tip {
1469
- background-color: var(--dds-color-surface-default);
1470
- }
1471
1539
  .InputMessage_icon {
1472
1540
  margin-top: var(--dds-spacing-x0-125);
1473
1541
  }
@@ -1606,7 +1674,7 @@
1606
1674
  display: inline-block;
1607
1675
  color: var(--dds-color-icon-medium);
1608
1676
  background-color: transparent;
1609
- border-radius: var(--dds-border-radius-1);
1677
+ border-radius: var(--dds-border-radius-button);
1610
1678
  @media (prefers-reduced-motion: no-preference) {
1611
1679
  transition:
1612
1680
  0.2s color,
@@ -1673,7 +1741,7 @@
1673
1741
  gap: var(--dds-spacing-x0-5);
1674
1742
  }
1675
1743
  .Feedback_button {
1676
- border-radius: var(--dds-border-radius-1);
1744
+ border-radius: var(--dds-border-radius-button);
1677
1745
  color: var(--dds-color-text-default);
1678
1746
  &:hover {
1679
1747
  background-color: var(--dds-color-surface-hover-default);
@@ -1840,7 +1908,7 @@
1840
1908
  gap: var(--dds-spacing-x1);
1841
1909
  border-color: var(--dds-color-border-default);
1842
1910
  background-color: var(--dds-color-surface-default);
1843
- border-radius: var(--dds-border-radius-1);
1911
+ border-radius: var(--dds-border-radius-surface);
1844
1912
  padding: var(--dds-spacing-x1-5) var(--dds-spacing-x1-5) var(--dds-spacing-x2) var(--dds-spacing-x1-5);
1845
1913
  @media (prefers-reduced-motion: no-preference) {
1846
1914
  transition: background-color 0.2s, border-color 0.2s;
@@ -1864,7 +1932,7 @@
1864
1932
  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
1865
1933
  margin-top: var(--dds-spacing-x0-5);
1866
1934
  background-color: var(--dds-color-surface-subtle);
1867
- border-radius: var(--dds-border-radius-1);
1935
+ border-radius: var(--dds-border-radius-surface);
1868
1936
  border: 1px solid var(--dds-color-border-default);
1869
1937
  }
1870
1938
  .FileUploader_file--invalid {
@@ -1882,6 +1950,55 @@
1882
1950
  width: 100%;
1883
1951
  }
1884
1952
 
1953
+ /* src/components/Footer/Footer.module.css */
1954
+ .Footer_container {
1955
+ background-color: var(--dds-color-brand-primary-default);
1956
+ padding-block-start: var(--dds-spacing-x3);
1957
+ padding-block-end: var(--dds-spacing-x6);
1958
+ @media only screen and (min-width: 960px) {
1959
+ padding-block: var(--dds-spacing-x4);
1960
+ }
1961
+ }
1962
+ .Footer_logo--xs-hide {
1963
+ @media only screen and (max-width: 600px) {
1964
+ display: none;
1965
+ }
1966
+ }
1967
+ .Footer_logo--sm-hide {
1968
+ @media only screen and (max-width: 960px) {
1969
+ display: none;
1970
+ }
1971
+ }
1972
+ .Footer_logo--md-hide {
1973
+ @media only screen and (max-width: 1280px) {
1974
+ display: none;
1975
+ }
1976
+ }
1977
+ .Footer_left {
1978
+ display: flex;
1979
+ flex-direction: column;
1980
+ gap: var(--dds-spacing-x4);
1981
+ }
1982
+ .Footer_list {
1983
+ display: flex;
1984
+ flex-direction: column;
1985
+ gap: var(--dds-spacing-x1-5);
1986
+ }
1987
+ .Footer_list-group {
1988
+ display: flex;
1989
+ flex-direction: column;
1990
+ gap: var(--dds-spacing-x1-5);
1991
+ }
1992
+ .Footer_socials-group {
1993
+ display: flex;
1994
+ flex-direction: column;
1995
+ gap: var(--dds-spacing-x1);
1996
+ }
1997
+ .Footer_socials-list {
1998
+ display: flex;
1999
+ gap: var(--dds-spacing-x1-5);
2000
+ }
2001
+
1885
2002
  /* src/components/GlobalMessage/GlobalMessage.module.css */
1886
2003
  .GlobalMessage_container {
1887
2004
  border-bottom: 2px solid;
@@ -2023,7 +2140,7 @@
2023
2140
  padding: var(--dds-spacing-x0-25);
2024
2141
  border-color: transparent;
2025
2142
  background-color: transparent;
2026
- border-radius: var(--dds-border-radius-1);
2143
+ border-radius: var(--dds-border-radius-input);
2027
2144
  @media (prefers-reduced-motion: no-preference) {
2028
2145
  transition:
2029
2146
  background-color 0.2s,
@@ -2076,7 +2193,35 @@
2076
2193
  margin-left: auto;
2077
2194
  }
2078
2195
  }
2079
- .InternalHeader_bar--small-screen {
2196
+ .InternalHeader_bar--small-screen-xs {
2197
+ @media only screen and (max-width: 600px) {
2198
+ gap: var(--dds-spacing-x1);
2199
+ padding-inline-start: var(--dds-spacing-x1);
2200
+ padding-inline-end: var(--dds-spacing-x0-5);
2201
+ }
2202
+ }
2203
+ .InternalHeader_bar--small-screen-sm {
2204
+ @media only screen and (max-width: 960px) {
2205
+ gap: var(--dds-spacing-x1);
2206
+ padding-inline-start: var(--dds-spacing-x1);
2207
+ padding-inline-end: var(--dds-spacing-x0-5);
2208
+ }
2209
+ }
2210
+ .InternalHeader_bar--small-screen-md {
2211
+ @media only screen and (max-width: 1280px) {
2212
+ gap: var(--dds-spacing-x1);
2213
+ padding-inline-start: var(--dds-spacing-x1);
2214
+ padding-inline-end: var(--dds-spacing-x0-5);
2215
+ }
2216
+ }
2217
+ .InternalHeader_bar--small-screen-lg {
2218
+ @media only screen and (max-width: 1920px) {
2219
+ gap: var(--dds-spacing-x1);
2220
+ padding-inline-start: var(--dds-spacing-x1);
2221
+ padding-inline-end: var(--dds-spacing-x0-5);
2222
+ }
2223
+ }
2224
+ .InternalHeader_bar--small-screen-xl {
2080
2225
  gap: var(--dds-spacing-x1);
2081
2226
  padding-inline-start: var(--dds-spacing-x1);
2082
2227
  padding-inline-end: var(--dds-spacing-x0-5);
@@ -2104,13 +2249,85 @@
2104
2249
  align-items: initial;
2105
2250
  flex-direction: column;
2106
2251
  }
2252
+ .InternalHeader_nav-list--small-screen-xs,
2253
+ .InternalHeader_context-menu-button-without-nav-xs {
2254
+ @media only screen and (max-width: 600px) {
2255
+ display: none;
2256
+ }
2257
+ }
2258
+ .InternalHeader_nav-list--small-screen-sm,
2259
+ .InternalHeader_context-menu-button-without-nav-sm {
2260
+ @media only screen and (max-width: 960px) {
2261
+ display: none;
2262
+ }
2263
+ }
2264
+ .InternalHeader_nav-list--small-screen-md,
2265
+ .InternalHeader_context-menu-button-without-nav-md {
2266
+ @media only screen and (max-width: 1280px) {
2267
+ display: none;
2268
+ }
2269
+ }
2270
+ .InternalHeader_nav-list--small-screen-lg,
2271
+ .InternalHeader_context-menu-button-without-nav-lg {
2272
+ @media only screen and (max-width: 1920px) {
2273
+ display: none;
2274
+ }
2275
+ }
2276
+ .InternalHeader_nav-list--small-screen-xl,
2277
+ .InternalHeader_context-menu-button-without-nav-xl {
2278
+ display: none;
2279
+ }
2280
+ .InternalHeader_nav--in-menu--small-screen,
2281
+ .InternalHeader_context-menu-group--small-screen-only,
2282
+ .InternalHeader_context-menu-button-with-nav,
2283
+ .InternalHeader_menu-divider {
2284
+ display: none;
2285
+ }
2286
+ .InternalHeader_nav--in-menu--small-screen-xs,
2287
+ .InternalHeader_context-menu-group--small-screen-only-xs,
2288
+ .InternalHeader_context-menu-button-with-nav-xs,
2289
+ .InternalHeader_menu-divider--small-screen-xs {
2290
+ @media only screen and (max-width: 600px) {
2291
+ display: block;
2292
+ }
2293
+ }
2294
+ .InternalHeader_nav--in-menu--small-screen-sm,
2295
+ .InternalHeader_context-menu-group--small-screen-only-sm,
2296
+ .InternalHeader_context-menu-button-with-nav-sm,
2297
+ .InternalHeader_menu-divider--small-screen-sm {
2298
+ @media only screen and (max-width: 960px) {
2299
+ display: block;
2300
+ }
2301
+ }
2302
+ .InternalHeader_nav--in-menu--small-screen-md,
2303
+ .InternalHeader_context-menu-group--small-screen-only-md,
2304
+ .InternalHeader_context-menu-button-with-nav-md,
2305
+ .InternalHeader_menu-divider--small-screen-md {
2306
+ @media only screen and (max-width: 1280px) {
2307
+ display: block;
2308
+ }
2309
+ }
2310
+ .InternalHeader_nav--in-menu--small-screen-lg,
2311
+ .InternalHeader_context-menu-group--small-screen-only-lg,
2312
+ .InternalHeader_context-menu-button-with-nav-lg,
2313
+ .InternalHeader_menu-divider--small-screen-lg {
2314
+ @media only screen and (max-width: 1920px) {
2315
+ display: block;
2316
+ }
2317
+ }
2318
+ .InternalHeader_nav--in-menu--small-screen-xl,
2319
+ .InternalHeader_context-menu-group--small-screen-only-xl,
2320
+ .InternalHeader_context-menu-button-with-nav-xl,
2321
+ .InternalHeader_menu-divider--small-screen-xl {
2322
+ display: block;
2323
+ }
2107
2324
  .InternalHeader_nav-list__item {
2108
2325
  display: flex;
2109
2326
  }
2110
2327
  .InternalHeader_nav-list__item__link {
2111
2328
  text-decoration: none;
2112
2329
  padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1);
2113
- border-radius: var(--dds-border-radius-1);
2330
+ border-radius: var(--dds-border-radius-surface);
2114
2331
  background-color: transparent;
2115
2332
  color: var(--dds-color-text-subtle);
2116
2333
  &:hover {
@@ -2194,8 +2411,7 @@
2194
2411
  box-sizing: border-box;
2195
2412
  display: grid;
2196
2413
  align-items: center;
2197
- box-shadow: var(--dds-shadow-1-onlight);
2198
- border-radius: var(--dds-border-radius-1);
2414
+ border-radius: var(--dds-border-radius-surface);
2199
2415
  padding: var(--dds-spacing-x0-75);
2200
2416
  gap: var(--dds-spacing-x0-5);
2201
2417
  }
@@ -2320,7 +2536,31 @@
2320
2536
  justify-content: space-between;
2321
2537
  flex-wrap: wrap;
2322
2538
  }
2323
- .Pagination_container--small-screen {
2539
+ .Pagination_container--small-screen-xs {
2540
+ @media only screen and (max-width: 600px) {
2541
+ flex-direction: column;
2542
+ align-items: center;
2543
+ }
2544
+ }
2545
+ .Pagination_container--small-screen-sm {
2546
+ @media only screen and (max-width: 960px) {
2547
+ flex-direction: column;
2548
+ align-items: center;
2549
+ }
2550
+ }
2551
+ .Pagination_container--small-screen-md {
2552
+ @media only screen and (max-width: 1280px) {
2553
+ flex-direction: column;
2554
+ align-items: center;
2555
+ }
2556
+ }
2557
+ .Pagination_container--small-screen-lg {
2558
+ @media only screen and (max-width: 1920px) {
2559
+ flex-direction: column;
2560
+ align-items: center;
2561
+ }
2562
+ }
2563
+ .Pagination_container--small-screen-xl {
2324
2564
  flex-direction: column;
2325
2565
  align-items: center;
2326
2566
  }
@@ -2328,6 +2568,55 @@
2328
2568
  display: flex;
2329
2569
  align-items: center;
2330
2570
  }
2571
+ .Pagination_nav--large-screen-hide-xs {
2572
+ @media only screen and (max-width: 600px) {
2573
+ display: none;
2574
+ }
2575
+ }
2576
+ .Pagination_nav--large-screen-hide-sm {
2577
+ @media only screen and (max-width: 960px) {
2578
+ display: none;
2579
+ }
2580
+ }
2581
+ .Pagination_nav--large-screen-hide-md {
2582
+ @media only screen and (max-width: 1280px) {
2583
+ display: none;
2584
+ }
2585
+ }
2586
+ .Pagination_nav--large-screen-hide-lg {
2587
+ @media only screen and (max-width: 1920px) {
2588
+ display: none;
2589
+ }
2590
+ }
2591
+ .Pagination_nav--large-screen-hide-xl {
2592
+ display: none;
2593
+ }
2594
+ .Pagination_nav--small-screen {
2595
+ display: none;
2596
+ }
2597
+ .Pagination_nav--small-screen-show-xs {
2598
+ @media only screen and (max-width: 600px) {
2599
+ display: block;
2600
+ }
2601
+ }
2602
+ .Pagination_nav--small-screen-show-sm {
2603
+ @media only screen and (max-width: 960px) {
2604
+ display: block;
2605
+ }
2606
+ }
2607
+ .Pagination_nav--small-screen-show-md {
2608
+ @media only screen and (max-width: 1280px) {
2609
+ display: block;
2610
+ }
2611
+ }
2612
+ .Pagination_nav--small-screen-show-lg {
2613
+ @media only screen and (max-width: 1920px) {
2614
+ display: block;
2615
+ }
2616
+ }
2617
+ .Pagination_nav--small-screen-show-xl {
2618
+ display: block;
2619
+ }
2331
2620
  .Pagination_list {
2332
2621
  display: grid;
2333
2622
  grid-auto-flow: column;
@@ -2372,9 +2661,14 @@
2372
2661
  box-sizing: border-box;
2373
2662
  max-width: 100%;
2374
2663
  }
2375
- .Select_icon {
2376
- margin-right: var(--dds-spacing-x0-5);
2377
- margin-left: -1px;
2664
+ .Select_icon--medium {
2665
+ left: var(--dds-spacing-x0-75);
2666
+ }
2667
+ .Select_icon--small {
2668
+ left: var(--dds-spacing-x0-75);
2669
+ }
2670
+ .Select_icon--tiny {
2671
+ left: var(--dds-spacing-x0-5);
2378
2672
  }
2379
2673
  .Select_control {
2380
2674
  &:hover:not(.Select_control--readonly) .Select_dropdown-indicator,
@@ -2559,7 +2853,7 @@
2559
2853
  cursor: default;
2560
2854
  }
2561
2855
  .ProgressTracker_item-number {
2562
- border-radius: 50%;
2856
+ border-radius: var(--dds-border-radius-rounded);
2563
2857
  display: flex;
2564
2858
  align-items: center;
2565
2859
  justify-content: center;
@@ -2650,12 +2944,7 @@
2650
2944
  padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5));
2651
2945
  }
2652
2946
  .Search_search-icon {
2653
- position: absolute;
2654
2947
  left: var(--dds-spacing-x0-75);
2655
- top: 50%;
2656
- transform: translate(0, -50%);
2657
- z-index: 1;
2658
- color: var(--dds-color-icon-default);
2659
2948
  }
2660
2949
  .Search_clear-button {
2661
2950
  position: absolute;
@@ -2761,7 +3050,7 @@
2761
3050
  }
2762
3051
  .SelectionControl_label--radio {
2763
3052
  .SelectionControl_selection-control:after {
2764
- border-radius: 50%;
3053
+ border-radius: var(--dds-border-radius-rounded);
2765
3054
  background-color: var(--dds-color-icon-on-action);
2766
3055
  height: 8px;
2767
3056
  width: 8px;
@@ -2816,7 +3105,7 @@
2816
3105
  border: 1px solid;
2817
3106
  border-color: var(--dds-color-border-default);
2818
3107
  background-color: var(--dds-color-surface-field-default);
2819
- border-radius: var(--dds-border-radius-1);
3108
+ border-radius: var(--dds-border-radius-input);
2820
3109
  height: 18px;
2821
3110
  width: 18px;
2822
3111
  &:after {
@@ -2827,7 +3116,21 @@
2827
3116
  }
2828
3117
  }
2829
3118
  .SelectionControl_selection-control--radio {
2830
- border-radius: 50%;
3119
+ border-radius: var(--dds-border-radius-rounded);
3120
+ }
3121
+
3122
+ /* src/components/Skeleton/Skeleton.module.css */
3123
+ @keyframes Skeleton_ddsSkeletonAnimation {
3124
+ 0% {
3125
+ opacity: 1;
3126
+ }
3127
+ to {
3128
+ opacity: 0.5;
3129
+ }
3130
+ }
3131
+ .Skeleton_container {
3132
+ animation: Skeleton_ddsSkeletonAnimation 0.75s ease-out infinite alternate;
3133
+ background-color: var(--dds-color-surface-skeleton);
2831
3134
  }
2832
3135
 
2833
3136
  /* src/components/SkipToContent/SkipToContent.module.css */
@@ -2933,7 +3236,16 @@
2933
3236
  }
2934
3237
  th {
2935
3238
  background-color: var(--dds-color-surface-default);
2936
- font-size: var(--dds-font-body-sans-01-font-size);
3239
+ font: var(--dds-font-body-sans-01);
3240
+ font-weight: var(--dds-font-weight-bold);
3241
+ }
3242
+ .Table_row--body {
3243
+ &:nth-of-type(odd) {
3244
+ background-color: var(--dds-color-surface-subtle);
3245
+ }
3246
+ &:nth-of-type(even) {
3247
+ background-color: var(--dds-color-surface-default);
3248
+ }
2937
3249
  }
2938
3250
  }
2939
3251
  .Table_row {
@@ -2963,9 +3275,9 @@
2963
3275
  &.Table_row--selected:nth-of-type(odd) {
2964
3276
  background-color: var(--dds-color-surface-selected-default);
2965
3277
  }
2966
- }
2967
- .Table_row--hoverable:hover {
2968
- background-color: var(--dds-color-surface-hover-default);
3278
+ &.Table_row--hoverable:hover {
3279
+ background-color: var(--dds-color-surface-hover-default);
3280
+ }
2969
3281
  }
2970
3282
  .Table_cell--head {
2971
3283
  background-color: var(--dds-color-brand-primary-subtle);
@@ -2998,7 +3310,7 @@
2998
3310
  .Table_collapse-button {
2999
3311
  height: var(--dds-icon-size-medium);
3000
3312
  width: var(--dds-icon-size-medium);
3001
- border-radius: var(--dds-border-radius-1);
3313
+ border-radius: var(--dds-border-radius-button);
3002
3314
  margin-left: auto;
3003
3315
  margin-right: auto;
3004
3316
  display: flex;
@@ -3049,8 +3361,8 @@
3049
3361
  color: var(--dds-color-text-medium);
3050
3362
  padding: var(--dds-spacing-x0-5);
3051
3363
  background: var(--dds-color-surface-default);
3052
- border-top-left-radius: var(--dds-border-radius-2);
3053
- border-top-right-radius: var(--dds-border-radius-2);
3364
+ border-top-left-radius: var(--dds-border-radius-button);
3365
+ border-top-right-radius: var(--dds-border-radius-button);
3054
3366
  @media (prefers-reduced-motion: no-preference) {
3055
3367
  transition:
3056
3368
  box-shadow 0.2s,
@@ -3089,7 +3401,7 @@
3089
3401
  border: 1px solid;
3090
3402
  display: inline-flex;
3091
3403
  align-items: center;
3092
- border-radius: var(--dds-border-radius-1);
3404
+ border-radius: var(--dds-border-radius-chip);
3093
3405
  padding: var(--dds-spacing-x0-125) var(--dds-spacing-x0-5);
3094
3406
  }
3095
3407
  .Tag_container--with-icon {
@@ -3197,21 +3509,14 @@
3197
3509
  .TextInput_input--extended {
3198
3510
  width: 100%;
3199
3511
  }
3200
- .TextInput_icon {
3201
- position: absolute;
3202
- z-index: 1;
3203
- }
3204
3512
  .TextInput_icon--medium {
3205
3513
  left: var(--dds-spacing-x0-75);
3206
- top: calc(50% - (var(--dds-icon-size-medium) / 2));
3207
3514
  }
3208
3515
  .TextInput_icon--small {
3209
3516
  left: var(--dds-spacing-x0-75);
3210
- top: calc(50% - (var(--dds-icon-size-medium) / 2));
3211
3517
  }
3212
3518
  .TextInput_icon--tiny {
3213
3519
  left: var(--dds-spacing-x0-5);
3214
- top: calc(50% - (var(--dds-icon-size-small) / 2));
3215
3520
  }
3216
3521
  .TextInput_label {
3217
3522
  display: block;
@@ -3283,7 +3588,7 @@
3283
3588
  .ToggleBar_content--large--just-icon {
3284
3589
  padding: var(--dds-spacing-x1);
3285
3590
  svg {
3286
- font-size: var(--dds-font-body-sans-04-line-height);
3591
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
3287
3592
  }
3288
3593
  }
3289
3594
  .ToggleBar_content--large--with-text {
@@ -3293,7 +3598,7 @@
3293
3598
  .ToggleBar_content--medium--just-icon {
3294
3599
  padding: var(--dds-spacing-x0-75);
3295
3600
  svg {
3296
- font-size: var(--dds-font-body-sans-02-line-height);
3601
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
3297
3602
  }
3298
3603
  }
3299
3604
  .ToggleBar_content--medium--with-text {
@@ -3303,7 +3608,7 @@
3303
3608
  .ToggleBar_content--small--just-icon {
3304
3609
  padding: var(--dds-spacing-x0-5);
3305
3610
  svg {
3306
- font-size: var(--dds-font-body-sans-01-line-height);
3611
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
3307
3612
  }
3308
3613
  }
3309
3614
  .ToggleBar_content--small--with-text {
@@ -3313,7 +3618,7 @@
3313
3618
  .ToggleBar_content--tiny--just-icon {
3314
3619
  padding: var(--dds-spacing-x0-25);
3315
3620
  svg {
3316
- font-size: var(--dds-font-supporting-style-tiny-01-line-height);
3621
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
3317
3622
  }
3318
3623
  }
3319
3624
  .ToggleBar_content--tiny--with-text {
@@ -3326,12 +3631,12 @@
3326
3631
  }
3327
3632
  &:first-child .ToggleBar_content {
3328
3633
  border-left: 1px solid var(--dds-color-border-default);
3329
- border-top-left-radius: var(--dds-border-radius-1);
3330
- border-bottom-left-radius: var(--dds-border-radius-1);
3634
+ border-top-left-radius: var(--dds-border-radius-button);
3635
+ border-bottom-left-radius: var(--dds-border-radius-button);
3331
3636
  }
3332
3637
  &:last-child .ToggleBar_content {
3333
- border-top-right-radius: var(--dds-border-radius-1);
3334
- border-bottom-right-radius: var(--dds-border-radius-1);
3638
+ border-top-right-radius: var(--dds-border-radius-button);
3639
+ border-bottom-right-radius: var(--dds-border-radius-button);
3335
3640
  }
3336
3641
  input:checked + .ToggleBar_content {
3337
3642
  color: var(--dds-color-text-on-action);
@@ -3377,7 +3682,7 @@
3377
3682
  width: -moz-fit-content;
3378
3683
  width: fit-content;
3379
3684
  border: 1px solid;
3380
- border-radius: 100px;
3685
+ border-radius: var(--dds-border-radius-rounded);
3381
3686
  gap: var(--dds-spacing-x0-5);
3382
3687
  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
3383
3688
  background-color: var(--dds-color-surface-default);