@carbon/ibm-products 2.8.0 → 2.9.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (53) hide show
  1. package/css/index-full-carbon.css +236 -182
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +5 -3
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +7 -2
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +188 -157
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +3 -3
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +92 -50
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +3 -3
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/CreateFullPage/CreateFullPage.js +4 -3
  18. package/es/components/CreateInfluencer/CreateInfluencer.js +10 -3
  19. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +1 -0
  20. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +8 -2
  21. package/es/components/Datagrid/Datagrid/DraggableElement.js +61 -68
  22. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +23 -15
  23. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +5 -5
  24. package/es/components/FilterSummary/FilterSummary.js +9 -3
  25. package/es/components/OptionsTile/OptionsTile.js +1 -1
  26. package/es/components/SidePanel/SidePanel.js +3 -1
  27. package/es/components/TagSet/TagSet.js +3 -7
  28. package/es/global/decorators/sidePanelDecorator.js +11 -0
  29. package/es/global/js/utils/StoryDocsPage.js +5 -2
  30. package/lib/components/CreateFullPage/CreateFullPage.js +4 -3
  31. package/lib/components/CreateInfluencer/CreateInfluencer.js +10 -3
  32. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +1 -0
  33. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +8 -2
  34. package/lib/components/Datagrid/Datagrid/DraggableElement.js +62 -68
  35. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +23 -15
  36. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +5 -5
  37. package/lib/components/FilterSummary/FilterSummary.js +9 -4
  38. package/lib/components/OptionsTile/OptionsTile.js +1 -1
  39. package/lib/components/SidePanel/SidePanel.js +3 -1
  40. package/lib/components/TagSet/TagSet.js +2 -6
  41. package/lib/global/decorators/sidePanelDecorator.js +19 -0
  42. package/lib/global/js/utils/StoryDocsPage.js +5 -2
  43. package/package.json +13 -15
  44. package/scss/components/CreateInfluencer/_create-influencer.scss +6 -2
  45. package/scss/components/CreateSidePanel/_storybook-styles.scss +3 -0
  46. package/scss/components/DataSpreadsheet/_storybook-styles.scss +7 -2
  47. package/scss/components/Datagrid/_storybook-styles.scss +10 -2
  48. package/scss/components/Datagrid/styles/_datagrid.scss +32 -5
  49. package/scss/components/EditSidePanel/_storybook-styles.scss +8 -5
  50. package/scss/components/EditTearsheetNarrow/_storybook-styles.scss +1 -1
  51. package/scss/components/SidePanel/_storybook-styles.scss +7 -0
  52. package/scss/global/decorators/_side-panel-decorator.scss +18 -0
  53. package/scss/global/js/utils/_story-as-full-page.scss +6 -0
@@ -369,31 +369,31 @@
369
369
  display: block;
370
370
  }
371
371
 
372
- .cds--popover--tab-tip > .cds--popover .cds--popover-caret {
372
+ .cds--popover--tab-tip > .cds--popover > .cds--popover-caret {
373
373
  display: none;
374
374
  }
375
375
 
376
- .cds--popover--bottom > .cds--popover .cds--popover-content {
376
+ .cds--popover--bottom > .cds--popover > .cds--popover-content {
377
377
  bottom: 0;
378
378
  left: 50%;
379
379
  transform: translate(-50%, calc(100% + var(--cds-popover-offset, 0rem)));
380
380
  }
381
381
 
382
- .cds--popover--bottom-left > .cds--popover .cds--popover-content {
382
+ .cds--popover--bottom-left > .cds--popover > .cds--popover-content {
383
383
  bottom: 0;
384
384
  left: 0;
385
385
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem)));
386
386
  }
387
387
 
388
- .cds--popover--bottom-right > .cds--popover .cds--popover-content {
388
+ .cds--popover--bottom-right > .cds--popover > .cds--popover-content {
389
389
  right: 0;
390
390
  bottom: 0;
391
391
  transform: translate(var(--cds-popover-offset, 0rem), calc(100% + var(--cds-popover-offset, 0rem)));
392
392
  }
393
393
 
394
- .cds--popover--bottom > .cds--popover .cds--popover-content::before,
395
- .cds--popover--bottom-left > .cds--popover .cds--popover-content::before,
396
- .cds--popover--bottom-right > .cds--popover .cds--popover-content::before {
394
+ .cds--popover--bottom > .cds--popover > .cds--popover-content::before,
395
+ .cds--popover--bottom-left > .cds--popover > .cds--popover-content::before,
396
+ .cds--popover--bottom-right > .cds--popover > .cds--popover-content::before {
397
397
  top: 0;
398
398
  right: 0;
399
399
  left: 0;
@@ -401,9 +401,9 @@
401
401
  transform: translateY(-100%);
402
402
  }
403
403
 
404
- .cds--popover--bottom > .cds--popover .cds--popover-caret,
405
- .cds--popover--bottom-left > .cds--popover .cds--popover-caret,
406
- .cds--popover--bottom-right > .cds--popover .cds--popover-caret {
404
+ .cds--popover--bottom > .cds--popover > .cds--popover-caret,
405
+ .cds--popover--bottom-left > .cds--popover > .cds--popover-caret,
406
+ .cds--popover--bottom-right > .cds--popover > .cds--popover-caret {
407
407
  bottom: 0;
408
408
  left: 50%;
409
409
  width: var(--cds-popover-caret-width, 0.75rem);
@@ -412,27 +412,27 @@
412
412
  transform: translate(-50%, var(--cds-popover-offset, 0rem));
413
413
  }
414
414
 
415
- .cds--popover--top > .cds--popover .cds--popover-content {
415
+ .cds--popover--top > .cds--popover > .cds--popover-content {
416
416
  top: 0;
417
417
  left: 50%;
418
418
  transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem)));
419
419
  }
420
420
 
421
- .cds--popover--top-left > .cds--popover .cds--popover-content {
421
+ .cds--popover--top-left > .cds--popover > .cds--popover-content {
422
422
  top: 0;
423
423
  left: 0;
424
424
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-100% - var(--cds-popover-offset, 0rem)));
425
425
  }
426
426
 
427
- .cds--popover--top-right > .cds--popover .cds--popover-content {
427
+ .cds--popover--top-right > .cds--popover > .cds--popover-content {
428
428
  top: 0;
429
429
  right: 0;
430
430
  transform: translate(var(--cds-popover-offset, 0rem), calc(-100% - var(--cds-popover-offset, 0rem)));
431
431
  }
432
432
 
433
- .cds--popover--top > .cds--popover .cds--popover-content::before,
434
- .cds--popover--top-left > .cds--popover .cds--popover-content::before,
435
- .cds--popover--top-right > .cds--popover .cds--popover-content::before {
433
+ .cds--popover--top > .cds--popover > .cds--popover-content::before,
434
+ .cds--popover--top-left > .cds--popover > .cds--popover-content::before,
435
+ .cds--popover--top-right > .cds--popover > .cds--popover-content::before {
436
436
  right: 0;
437
437
  bottom: 0;
438
438
  left: 0;
@@ -440,9 +440,9 @@
440
440
  transform: translateY(100%);
441
441
  }
442
442
 
443
- .cds--popover--top > .cds--popover .cds--popover-caret,
444
- .cds--popover--top-left > .cds--popover .cds--popover-caret,
445
- .cds--popover--top-right > .cds--popover .cds--popover-caret {
443
+ .cds--popover--top > .cds--popover > .cds--popover-caret,
444
+ .cds--popover--top-left > .cds--popover > .cds--popover-caret,
445
+ .cds--popover--top-right > .cds--popover > .cds--popover-caret {
446
446
  top: 0;
447
447
  left: 50%;
448
448
  width: var(--cds-popover-caret-width, 0.75rem);
@@ -451,27 +451,27 @@
451
451
  transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
452
452
  }
453
453
 
454
- .cds--popover--right > .cds--popover .cds--popover-content {
454
+ .cds--popover--right > .cds--popover > .cds--popover-content {
455
455
  top: 50%;
456
456
  left: 100%;
457
457
  transform: translate(var(--cds-popover-offset, 0rem), -50%);
458
458
  }
459
459
 
460
- .cds--popover--right-top > .cds--popover .cds--popover-content {
460
+ .cds--popover--right-top > .cds--popover > .cds--popover-content {
461
461
  top: 50%;
462
462
  left: 100%;
463
463
  transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) * -1 - 16px));
464
464
  }
465
465
 
466
- .cds--popover--right-bottom > .cds--popover .cds--popover-content {
466
+ .cds--popover--right-bottom > .cds--popover > .cds--popover-content {
467
467
  bottom: 50%;
468
468
  left: 100%;
469
469
  transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
470
470
  }
471
471
 
472
- .cds--popover--right > .cds--popover .cds--popover-content::before,
473
- .cds--popover--right-top > .cds--popover .cds--popover-content::before,
474
- .cds--popover--right-bottom > .cds--popover .cds--popover-content::before {
472
+ .cds--popover--right > .cds--popover > .cds--popover-content::before,
473
+ .cds--popover--right-top > .cds--popover > .cds--popover-content::before,
474
+ .cds--popover--right-bottom > .cds--popover > .cds--popover-content::before {
475
475
  top: 0;
476
476
  bottom: 0;
477
477
  left: 0;
@@ -479,9 +479,9 @@
479
479
  transform: translateX(-100%);
480
480
  }
481
481
 
482
- .cds--popover--right > .cds--popover .cds--popover-caret,
483
- .cds--popover--right-top > .cds--popover .cds--popover-caret,
484
- .cds--popover--right-bottom > .cds--popover .cds--popover-caret {
482
+ .cds--popover--right > .cds--popover > .cds--popover-caret,
483
+ .cds--popover--right-top > .cds--popover > .cds--popover-caret,
484
+ .cds--popover--right-bottom > .cds--popover > .cds--popover-caret {
485
485
  top: 50%;
486
486
  left: 100%;
487
487
  width: var(--cds-popover-caret-height, 0.375rem);
@@ -490,27 +490,27 @@
490
490
  transform: translate(calc(var(--cds-popover-offset, 0rem) - 100%), -50%);
491
491
  }
492
492
 
493
- .cds--popover--left > .cds--popover .cds--popover-content {
493
+ .cds--popover--left > .cds--popover > .cds--popover-content {
494
494
  top: 50%;
495
495
  right: 100%;
496
496
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 0.1px), -50%);
497
497
  }
498
498
 
499
- .cds--popover--left-top > .cds--popover .cds--popover-content {
499
+ .cds--popover--left-top > .cds--popover > .cds--popover-content {
500
500
  top: -50%;
501
501
  right: 100%;
502
502
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
503
503
  }
504
504
 
505
- .cds--popover--left-bottom > .cds--popover .cds--popover-content {
505
+ .cds--popover--left-bottom > .cds--popover > .cds--popover-content {
506
506
  right: 100%;
507
507
  bottom: -50%;
508
508
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
509
509
  }
510
510
 
511
- .cds--popover--left > .cds--popover .cds--popover-content::before,
512
- .cds--popover--left-top > .cds--popover .cds--popover-content::before,
513
- .cds--popover--left-bottom > .cds--popover .cds--popover-content::before {
511
+ .cds--popover--left > .cds--popover > .cds--popover-content::before,
512
+ .cds--popover--left-top > .cds--popover > .cds--popover-content::before,
513
+ .cds--popover--left-bottom > .cds--popover > .cds--popover-content::before {
514
514
  top: 0;
515
515
  right: 0;
516
516
  bottom: 0;
@@ -518,9 +518,9 @@
518
518
  transform: translateX(100%);
519
519
  }
520
520
 
521
- .cds--popover--left > .cds--popover .cds--popover-caret,
522
- .cds--popover--left-top > .cds--popover .cds--popover-caret,
523
- .cds--popover--left-bottom > .cds--popover .cds--popover-caret {
521
+ .cds--popover--left > .cds--popover > .cds--popover-caret,
522
+ .cds--popover--left-top > .cds--popover > .cds--popover-caret,
523
+ .cds--popover--left-bottom > .cds--popover > .cds--popover-caret {
524
524
  top: 50%;
525
525
  right: 100%;
526
526
  width: var(--cds-popover-caret-height, 0.375rem);
@@ -529,7 +529,7 @@
529
529
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 100%), -50%);
530
530
  }
531
531
 
532
- .cds--popover--tab-tip > .cds--popover .cds--popover-content {
532
+ .cds--popover--tab-tip > .cds--popover > .cds--popover-content {
533
533
  border-radius: 0;
534
534
  }
535
535
 
@@ -848,14 +848,14 @@
848
848
  padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
849
849
  }
850
850
  .cds--btn--ghost:hover {
851
- background-color: var(--cds-layer-hover);
851
+ background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
852
852
  }
853
853
  .cds--btn--ghost:focus {
854
854
  border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
855
855
  box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
856
856
  }
857
857
  .cds--btn--ghost:active {
858
- background-color: var(--cds-layer-active);
858
+ background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5));
859
859
  }
860
860
  .cds--btn--ghost .cds--btn__icon,
861
861
  .cds--btn--ghost .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
@@ -3732,6 +3732,7 @@ p.c4p--about-modal__copyright-text:first-child {
3732
3732
  .c4p--create-influencer {
3733
3733
  display: grid;
3734
3734
  height: 100%;
3735
+ padding: 1.5rem 2rem;
3735
3736
  grid-template-columns: 100%;
3736
3737
  grid-template-rows: 1fr auto;
3737
3738
  }
@@ -3742,8 +3743,12 @@ p.c4p--about-modal__copyright-text:first-child {
3742
3743
  overflow-y: auto;
3743
3744
  }
3744
3745
 
3745
- .c4p--create-influencer__progress-indicator.cds--progress {
3746
- padding: 1.5rem;
3746
+ .c4p--create-influencer__title {
3747
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
3748
+ font-weight: var(--cds-heading-03-font-weight, 400);
3749
+ line-height: var(--cds-heading-03-line-height, 1.4);
3750
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
3751
+ margin-bottom: 1.5rem;
3747
3752
  }
3748
3753
 
3749
3754
  .c4p--create-influencer__view-all-toggle {
@@ -11352,6 +11357,22 @@ button.c4p--add-select__global-filter-toggle--open {
11352
11357
  width: 100%;
11353
11358
  padding-top: 0;
11354
11359
  }
11360
+ .c4p--datagrid__grid-container .cds--data-table-header__description {
11361
+ overflow: hidden;
11362
+ text-overflow: ellipsis;
11363
+ white-space: nowrap;
11364
+ }
11365
+ .c4p--datagrid__grid-container .cds--data-table-header__title {
11366
+ overflow: hidden;
11367
+ max-width: 80ch;
11368
+ text-overflow: ellipsis;
11369
+ white-space: nowrap;
11370
+ }
11371
+ @media (min-width: 42rem) {
11372
+ .c4p--datagrid__grid-container .cds--data-table-header__title {
11373
+ max-width: 55ch;
11374
+ }
11375
+ }
11355
11376
  .c4p--datagrid__grid-container .cds--data-table-content {
11356
11377
  width: 100%;
11357
11378
  height: 100%;
@@ -11774,6 +11795,7 @@ button.c4p--add-select__global-filter-toggle--open {
11774
11795
  width: 1rem;
11775
11796
  height: 100%;
11776
11797
  margin: 0;
11798
+ -moz-appearance: initial;
11777
11799
  -webkit-appearance: none;
11778
11800
  appearance: none;
11779
11801
  background: transparent;
@@ -11783,12 +11805,12 @@ button.c4p--add-select__global-filter-toggle--open {
11783
11805
  outline: 0;
11784
11806
  }
11785
11807
 
11786
- .c4p--datagrid .c4p--datagrid__col-resizer-range:focus::before {
11808
+ .c4p--datagrid .c4p--datagrid__col-resizer-range:focus + .c4p--datagrid__col-resize-indicator::before {
11787
11809
  position: absolute;
11788
11810
  top: 50%;
11789
11811
  left: 50%;
11790
11812
  width: 2px;
11791
- height: 100%;
11813
+ height: var(--c4p--datagrid--header-height);
11792
11814
  background-color: var(--cds-focus, #0f62fe);
11793
11815
  content: "";
11794
11816
  transform: translate(-50%, -50%);
@@ -11806,11 +11828,11 @@ button.c4p--add-select__global-filter-toggle--open {
11806
11828
  transform: translate(-50%, 0);
11807
11829
  }
11808
11830
 
11809
- .c4p--datagrid .c4p--datagrid__col-resizer-range:focus::after {
11831
+ .c4p--datagrid .c4p--datagrid__col-resizer-range:focus + .c4p--datagrid__col-resize-indicator::after {
11810
11832
  position: absolute;
11811
11833
  /* stylelint-disable-next-line carbon/layout-token-use */
11812
- top: var(--c4p--datagrid--row-height);
11813
- right: 0.5rem;
11834
+ top: calc(var(--c4p--datagrid--row-height) - 20px);
11835
+ right: 0.25rem;
11814
11836
  width: 1px;
11815
11837
  height: calc(var(--c4p--datagrid--grid-height) - var(--c4p--datagrid--row-height));
11816
11838
  background-color: var(--cds-layer-active-01, #c6c6c6);
@@ -11827,6 +11849,10 @@ button.c4p--add-select__global-filter-toggle--open {
11827
11849
  background: transparent;
11828
11850
  }
11829
11851
 
11852
+ .c4p--datagrid .c4p--datagrid__col-resizer-range::-moz-range-thumb {
11853
+ visibility: hidden;
11854
+ }
11855
+
11830
11856
  /*
11831
11857
  * Licensed Materials - Property of IBM
11832
11858
  * 5724-Q36
@@ -14506,71 +14532,71 @@ th.c4p--datagrid__select-all-toggle-on.button {
14506
14532
  }
14507
14533
  }
14508
14534
  :root {
14509
- --cds-layer:var(--cds-layer-01, #f4f4f4);
14510
- --cds-layer-active:var(--cds-layer-active-01, #c6c6c6);
14511
- --cds-layer-hover:var(--cds-layer-hover-01, #e8e8e8);
14512
- --cds-layer-selected:var(--cds-layer-selected-01, #e0e0e0);
14513
- --cds-layer-selected-hover:var(--cds-layer-selected-hover-01, #d1d1d1);
14514
- --cds-layer-accent:var(--cds-layer-accent-01, #e0e0e0);
14515
- --cds-layer-accent-hover:var(--cds-layer-accent-hover-01, #d1d1d1);
14516
- --cds-layer-accent-active:var(--cds-layer-accent-active-01, #a8a8a8);
14517
- --cds-field:var(--cds-field-01, #f4f4f4);
14518
- --cds-field-hover:var(--cds-field-hover-01, #e8e8e8);
14519
- --cds-border-subtle:var(--cds-border-subtle-00, #e0e0e0);
14520
- --cds-border-subtle-selected:var(--cds-border-subtle-selected-01, #c6c6c6);
14521
- --cds-border-strong:var(--cds-border-strong-01, #8d8d8d);
14522
- --cds-border-tile:var(--cds-border-tile-01, #c6c6c6);
14535
+ --cds-layer: var(--cds-layer-01, #f4f4f4);
14536
+ --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
14537
+ --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
14538
+ --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
14539
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
14540
+ --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
14541
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
14542
+ --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
14543
+ --cds-field: var(--cds-field-01, #f4f4f4);
14544
+ --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
14545
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
14546
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
14547
+ --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
14548
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
14523
14549
  }
14524
14550
 
14525
14551
  .cds--layer-one {
14526
- --cds-layer:var(--cds-layer-01, #f4f4f4);
14527
- --cds-layer-active:var(--cds-layer-active-01, #c6c6c6);
14528
- --cds-layer-hover:var(--cds-layer-hover-01, #e8e8e8);
14529
- --cds-layer-selected:var(--cds-layer-selected-01, #e0e0e0);
14530
- --cds-layer-selected-hover:var(--cds-layer-selected-hover-01, #d1d1d1);
14531
- --cds-layer-accent:var(--cds-layer-accent-01, #e0e0e0);
14532
- --cds-layer-accent-hover:var(--cds-layer-accent-hover-01, #d1d1d1);
14533
- --cds-layer-accent-active:var(--cds-layer-accent-active-01, #a8a8a8);
14534
- --cds-field:var(--cds-field-01, #f4f4f4);
14535
- --cds-field-hover:var(--cds-field-hover-01, #e8e8e8);
14536
- --cds-border-subtle:var(--cds-border-subtle-00, #e0e0e0);
14537
- --cds-border-subtle-selected:var(--cds-border-subtle-selected-01, #c6c6c6);
14538
- --cds-border-strong:var(--cds-border-strong-01, #8d8d8d);
14539
- --cds-border-tile:var(--cds-border-tile-01, #c6c6c6);
14552
+ --cds-layer: var(--cds-layer-01, #f4f4f4);
14553
+ --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
14554
+ --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
14555
+ --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
14556
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
14557
+ --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
14558
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
14559
+ --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
14560
+ --cds-field: var(--cds-field-01, #f4f4f4);
14561
+ --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
14562
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
14563
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
14564
+ --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
14565
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
14540
14566
  }
14541
14567
 
14542
14568
  .cds--layer-two {
14543
- --cds-layer:var(--cds-layer-02, #ffffff);
14544
- --cds-layer-active:var(--cds-layer-active-02, #c6c6c6);
14545
- --cds-layer-hover:var(--cds-layer-hover-02, #e8e8e8);
14546
- --cds-layer-selected:var(--cds-layer-selected-02, #e0e0e0);
14547
- --cds-layer-selected-hover:var(--cds-layer-selected-hover-02, #d1d1d1);
14548
- --cds-layer-accent:var(--cds-layer-accent-02, #e0e0e0);
14549
- --cds-layer-accent-hover:var(--cds-layer-accent-hover-02, #d1d1d1);
14550
- --cds-layer-accent-active:var(--cds-layer-accent-active-02, #a8a8a8);
14551
- --cds-field:var(--cds-field-02, #ffffff);
14552
- --cds-field-hover:var(--cds-field-hover-02, #e8e8e8);
14553
- --cds-border-subtle:var(--cds-border-subtle-01, #c6c6c6);
14554
- --cds-border-subtle-selected:var(--cds-border-subtle-selected-02, #c6c6c6);
14555
- --cds-border-strong:var(--cds-border-strong-02, #8d8d8d);
14556
- --cds-border-tile:var(--cds-border-tile-02, #a8a8a8);
14569
+ --cds-layer: var(--cds-layer-02, #ffffff);
14570
+ --cds-layer-active: var(--cds-layer-active-02, #c6c6c6);
14571
+ --cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8);
14572
+ --cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0);
14573
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1);
14574
+ --cds-layer-accent: var(--cds-layer-accent-02, #e0e0e0);
14575
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-02, #d1d1d1);
14576
+ --cds-layer-accent-active: var(--cds-layer-accent-active-02, #a8a8a8);
14577
+ --cds-field: var(--cds-field-02, #ffffff);
14578
+ --cds-field-hover: var(--cds-field-hover-02, #e8e8e8);
14579
+ --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
14580
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-02, #c6c6c6);
14581
+ --cds-border-strong: var(--cds-border-strong-02, #8d8d8d);
14582
+ --cds-border-tile: var(--cds-border-tile-02, #a8a8a8);
14557
14583
  }
14558
14584
 
14559
14585
  .cds--layer-three {
14560
- --cds-layer:var(--cds-layer-03, #f4f4f4);
14561
- --cds-layer-active:var(--cds-layer-active-03, #c6c6c6);
14562
- --cds-layer-hover:var(--cds-layer-hover-03, #e8e8e8);
14563
- --cds-layer-selected:var(--cds-layer-selected-03, #e0e0e0);
14564
- --cds-layer-selected-hover:var(--cds-layer-selected-hover-03, #d1d1d1);
14565
- --cds-layer-accent:var(--cds-layer-accent-03, #e0e0e0);
14566
- --cds-layer-accent-hover:var(--cds-layer-accent-hover-03, #d1d1d1);
14567
- --cds-layer-accent-active:var(--cds-layer-accent-active-03, #a8a8a8);
14568
- --cds-field:var(--cds-field-03, #f4f4f4);
14569
- --cds-field-hover:var(--cds-field-hover-03, #e8e8e8);
14570
- --cds-border-subtle:var(--cds-border-subtle-02, #e0e0e0);
14571
- --cds-border-subtle-selected:var(--cds-border-subtle-selected-03, #c6c6c6);
14572
- --cds-border-strong:var(--cds-border-strong-03, #8d8d8d);
14573
- --cds-border-tile:var(--cds-border-tile-03, #c6c6c6);
14586
+ --cds-layer: var(--cds-layer-03, #f4f4f4);
14587
+ --cds-layer-active: var(--cds-layer-active-03, #c6c6c6);
14588
+ --cds-layer-hover: var(--cds-layer-hover-03, #e8e8e8);
14589
+ --cds-layer-selected: var(--cds-layer-selected-03, #e0e0e0);
14590
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-03, #d1d1d1);
14591
+ --cds-layer-accent: var(--cds-layer-accent-03, #e0e0e0);
14592
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-03, #d1d1d1);
14593
+ --cds-layer-accent-active: var(--cds-layer-accent-active-03, #a8a8a8);
14594
+ --cds-field: var(--cds-field-03, #f4f4f4);
14595
+ --cds-field-hover: var(--cds-field-hover-03, #e8e8e8);
14596
+ --cds-border-subtle: var(--cds-border-subtle-02, #e0e0e0);
14597
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-03, #c6c6c6);
14598
+ --cds-border-strong: var(--cds-border-strong-03, #8d8d8d);
14599
+ --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
14574
14600
  }
14575
14601
 
14576
14602
  .cds--side-nav {
@@ -15081,154 +15107,154 @@ a.cds--side-nav__link--current::before {
15081
15107
  }
15082
15108
  }
15083
15109
  .cds--layout--size-xs {
15084
- --cds-layout-size-height-context:var(--cds-layout-size-height-xs, 1.5rem);
15085
- --cds-layout-size-height:var(--cds-layout-size-height-context);
15110
+ --cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem);
15111
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
15086
15112
  }
15087
15113
 
15088
15114
  .cds--layout-constraint--size__default-xs {
15089
- --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
15115
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
15090
15116
  }
15091
15117
 
15092
15118
  .cds--layout-constraint--size__min-xs {
15093
- --cds-layout-size-height-min:var(--cds-layout-size-height-xs, 1.5rem);
15119
+ --cds-layout-size-height-min: var(--cds-layout-size-height-xs, 1.5rem);
15094
15120
  }
15095
15121
 
15096
15122
  .cds--layout-constraint--size__max-xs {
15097
- --cds-layout-size-height-max:var(--cds-layout-size-height-xs, 1.5rem);
15123
+ --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem);
15098
15124
  }
15099
15125
 
15100
15126
  .cds--layout--size-sm {
15101
- --cds-layout-size-height-context:var(--cds-layout-size-height-sm, 2rem);
15102
- --cds-layout-size-height:var(--cds-layout-size-height-context);
15127
+ --cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem);
15128
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
15103
15129
  }
15104
15130
 
15105
15131
  .cds--layout-constraint--size__default-sm {
15106
- --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
15132
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
15107
15133
  }
15108
15134
 
15109
15135
  .cds--layout-constraint--size__min-sm {
15110
- --cds-layout-size-height-min:var(--cds-layout-size-height-sm, 2rem);
15136
+ --cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem);
15111
15137
  }
15112
15138
 
15113
15139
  .cds--layout-constraint--size__max-sm {
15114
- --cds-layout-size-height-max:var(--cds-layout-size-height-sm, 2rem);
15140
+ --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem);
15115
15141
  }
15116
15142
 
15117
15143
  .cds--layout--size-md {
15118
- --cds-layout-size-height-context:var(--cds-layout-size-height-md, 2.5rem);
15119
- --cds-layout-size-height:var(--cds-layout-size-height-context);
15144
+ --cds-layout-size-height-context: var(--cds-layout-size-height-md, 2.5rem);
15145
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
15120
15146
  }
15121
15147
 
15122
15148
  .cds--layout-constraint--size__default-md {
15123
- --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
15149
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
15124
15150
  }
15125
15151
 
15126
15152
  .cds--layout-constraint--size__min-md {
15127
- --cds-layout-size-height-min:var(--cds-layout-size-height-md, 2.5rem);
15153
+ --cds-layout-size-height-min: var(--cds-layout-size-height-md, 2.5rem);
15128
15154
  }
15129
15155
 
15130
15156
  .cds--layout-constraint--size__max-md {
15131
- --cds-layout-size-height-max:var(--cds-layout-size-height-md, 2.5rem);
15157
+ --cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem);
15132
15158
  }
15133
15159
 
15134
15160
  .cds--layout--size-lg {
15135
- --cds-layout-size-height-context:var(--cds-layout-size-height-lg, 3rem);
15136
- --cds-layout-size-height:var(--cds-layout-size-height-context);
15161
+ --cds-layout-size-height-context: var(--cds-layout-size-height-lg, 3rem);
15162
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
15137
15163
  }
15138
15164
 
15139
15165
  .cds--layout-constraint--size__default-lg {
15140
- --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
15166
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
15141
15167
  }
15142
15168
 
15143
15169
  .cds--layout-constraint--size__min-lg {
15144
- --cds-layout-size-height-min:var(--cds-layout-size-height-lg, 3rem);
15170
+ --cds-layout-size-height-min: var(--cds-layout-size-height-lg, 3rem);
15145
15171
  }
15146
15172
 
15147
15173
  .cds--layout-constraint--size__max-lg {
15148
- --cds-layout-size-height-max:var(--cds-layout-size-height-lg, 3rem);
15174
+ --cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem);
15149
15175
  }
15150
15176
 
15151
15177
  .cds--layout--size-xl {
15152
- --cds-layout-size-height-context:var(--cds-layout-size-height-xl, 4rem);
15153
- --cds-layout-size-height:var(--cds-layout-size-height-context);
15178
+ --cds-layout-size-height-context: var(--cds-layout-size-height-xl, 4rem);
15179
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
15154
15180
  }
15155
15181
 
15156
15182
  .cds--layout-constraint--size__default-xl {
15157
- --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
15183
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
15158
15184
  }
15159
15185
 
15160
15186
  .cds--layout-constraint--size__min-xl {
15161
- --cds-layout-size-height-min:var(--cds-layout-size-height-xl, 4rem);
15187
+ --cds-layout-size-height-min: var(--cds-layout-size-height-xl, 4rem);
15162
15188
  }
15163
15189
 
15164
15190
  .cds--layout-constraint--size__max-xl {
15165
- --cds-layout-size-height-max:var(--cds-layout-size-height-xl, 4rem);
15191
+ --cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem);
15166
15192
  }
15167
15193
 
15168
15194
  .cds--layout--size-2xl {
15169
- --cds-layout-size-height-context:var(--cds-layout-size-height-2xl, 5rem);
15170
- --cds-layout-size-height:var(--cds-layout-size-height-context);
15195
+ --cds-layout-size-height-context: var(--cds-layout-size-height-2xl, 5rem);
15196
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
15171
15197
  }
15172
15198
 
15173
15199
  .cds--layout-constraint--size__default-2xl {
15174
- --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
15200
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
15175
15201
  }
15176
15202
 
15177
15203
  .cds--layout-constraint--size__min-2xl {
15178
- --cds-layout-size-height-min:var(--cds-layout-size-height-2xl, 5rem);
15204
+ --cds-layout-size-height-min: var(--cds-layout-size-height-2xl, 5rem);
15179
15205
  }
15180
15206
 
15181
15207
  .cds--layout-constraint--size__max-2xl {
15182
- --cds-layout-size-height-max:var(--cds-layout-size-height-2xl, 5rem);
15208
+ --cds-layout-size-height-max: var(--cds-layout-size-height-2xl, 5rem);
15183
15209
  }
15184
15210
 
15185
15211
  .cds--layout--density-condensed {
15186
- --cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed, 0.5rem);
15187
- --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context);
15212
+ --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
15213
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
15188
15214
  }
15189
15215
 
15190
15216
  .cds--layout-constraint--density__default-condensed {
15191
- --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
15217
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
15192
15218
  }
15193
15219
 
15194
15220
  .cds--layout-constraint--density__min-condensed {
15195
- --cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed, 0.5rem);
15221
+ --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
15196
15222
  }
15197
15223
 
15198
15224
  .cds--layout-constraint--density__max-condensed {
15199
- --cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed, 0.5rem);
15225
+ --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
15200
15226
  }
15201
15227
 
15202
15228
  .cds--layout--density-normal {
15203
- --cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal, 1rem);
15204
- --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context);
15229
+ --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-normal, 1rem);
15230
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
15205
15231
  }
15206
15232
 
15207
15233
  .cds--layout-constraint--density__default-normal {
15208
- --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
15234
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
15209
15235
  }
15210
15236
 
15211
15237
  .cds--layout-constraint--density__min-normal {
15212
- --cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal, 1rem);
15238
+ --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-normal, 1rem);
15213
15239
  }
15214
15240
 
15215
15241
  .cds--layout-constraint--density__max-normal {
15216
- --cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal, 1rem);
15242
+ --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem);
15217
15243
  }
15218
15244
 
15219
15245
  :root {
15220
- --cds-layout-size-height-xs:1.5rem;
15221
- --cds-layout-size-height-sm:2rem;
15222
- --cds-layout-size-height-md:2.5rem;
15223
- --cds-layout-size-height-lg:3rem;
15224
- --cds-layout-size-height-xl:4rem;
15225
- --cds-layout-size-height-2xl:5rem;
15226
- --cds-layout-size-height-min:0px;
15227
- --cds-layout-size-height-max:999999999px;
15228
- --cds-layout-density-padding-inline-condensed:0.5rem;
15229
- --cds-layout-density-padding-inline-normal:1rem;
15230
- --cds-layout-density-padding-inline-min:0px;
15231
- --cds-layout-density-padding-inline-max:999999999px;
15246
+ --cds-layout-size-height-xs: 1.5rem;
15247
+ --cds-layout-size-height-sm: 2rem;
15248
+ --cds-layout-size-height-md: 2.5rem;
15249
+ --cds-layout-size-height-lg: 3rem;
15250
+ --cds-layout-size-height-xl: 4rem;
15251
+ --cds-layout-size-height-2xl: 5rem;
15252
+ --cds-layout-size-height-min: 0px;
15253
+ --cds-layout-size-height-max: 999999999px;
15254
+ --cds-layout-density-padding-inline-condensed: 0.5rem;
15255
+ --cds-layout-density-padding-inline-normal: 1rem;
15256
+ --cds-layout-density-padding-inline-min: 0px;
15257
+ --cds-layout-density-padding-inline-max: 999999999px;
15232
15258
  }
15233
15259
 
15234
15260
  .c4p--action-set {
@@ -15599,6 +15625,7 @@ a.cds--side-nav__link--current::before {
15599
15625
  .c4p--create-influencer {
15600
15626
  display: grid;
15601
15627
  height: 100%;
15628
+ padding: 1.5rem 2rem;
15602
15629
  grid-template-columns: 100%;
15603
15630
  grid-template-rows: 1fr auto;
15604
15631
  }
@@ -15609,8 +15636,12 @@ a.cds--side-nav__link--current::before {
15609
15636
  overflow-y: auto;
15610
15637
  }
15611
15638
 
15612
- .c4p--create-influencer__progress-indicator.cds--progress {
15613
- padding: 1.5rem;
15639
+ .c4p--create-influencer__title {
15640
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
15641
+ font-weight: var(--cds-heading-03-font-weight, 400);
15642
+ line-height: var(--cds-heading-03-line-height, 1.4);
15643
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
15644
+ margin-bottom: 1.5rem;
15614
15645
  }
15615
15646
 
15616
15647
  .c4p--create-influencer__view-all-toggle {
@@ -16876,7 +16907,7 @@ em {
16876
16907
  --cds-notification-background-success: #defbe6;
16877
16908
  --cds-notification-background-info: #edf5ff;
16878
16909
  --cds-notification-background-warning: #fdf6dd;
16879
- --cds-notification-action-hover: #edf5ff;
16910
+ --cds-notification-action-hover: #ffffff;
16880
16911
  --cds-notification-action-tertiary-inverse: #ffffff;
16881
16912
  --cds-notification-action-tertiary-inverse-active: #c6c6c6;
16882
16913
  --cds-notification-action-tertiary-inverse-hover: #f4f4f4;
@@ -17050,7 +17081,7 @@ em {
17050
17081
  --cds-notification-background-success: #defbe6;
17051
17082
  --cds-notification-background-info: #edf5ff;
17052
17083
  --cds-notification-background-warning: #fdf6dd;
17053
- --cds-notification-action-hover: #edf5ff;
17084
+ --cds-notification-action-hover: #ffffff;
17054
17085
  --cds-notification-action-tertiary-inverse: #ffffff;
17055
17086
  --cds-notification-action-tertiary-inverse-active: #c6c6c6;
17056
17087
  --cds-notification-action-tertiary-inverse-hover: #f4f4f4;
@@ -18918,12 +18949,13 @@ fieldset[disabled] .cds--form__helper-text {
18918
18949
  .cds--checkbox-group__validation-msg,
18919
18950
  .cds--checkbox__validation-msg {
18920
18951
  display: none;
18921
- align-items: flex-end;
18952
+ align-items: flex-start;
18922
18953
  margin-top: 0.25rem;
18923
18954
  }
18924
18955
 
18925
18956
  .cds--checkbox__invalid-icon {
18926
- margin: 0 0.0625rem 0 0.1875rem;
18957
+ min-width: 1rem;
18958
+ margin: 0.0625rem 0.0625rem 0 0.1875rem;
18927
18959
  fill: var(--cds-support-error, #da1e28);
18928
18960
  }
18929
18961
 
@@ -22437,7 +22469,7 @@ tr.cds--data-table--selected:last-of-type td {
22437
22469
  }
22438
22470
 
22439
22471
  .cds--data-table--sticky-header {
22440
- max-height: rem(300px);
22472
+ max-height: 18.75rem;
22441
22473
  }
22442
22474
 
22443
22475
  .cds--data-table .cds--form-item.cds--checkbox-wrapper:last-of-type {
@@ -23339,6 +23371,10 @@ tr.cds--data-table--selected:last-of-type td {
23339
23371
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
23340
23372
  }
23341
23373
 
23374
+ .cds--batch-summary__divider {
23375
+ padding-left: 0.5rem;
23376
+ }
23377
+
23342
23378
  .cds--table-toolbar--sm {
23343
23379
  height: 2rem;
23344
23380
  min-height: 2rem;
@@ -23429,8 +23465,8 @@ tr.cds--data-table--selected:last-of-type td {
23429
23465
  .cds--table-toolbar--sm .cds--btn--primary {
23430
23466
  height: 2rem;
23431
23467
  min-height: auto;
23432
- padding-top: calc(0.375rem - 3px);
23433
- padding-bottom: calc(0.375rem - 3px);
23468
+ padding-top: 0.375rem;
23469
+ padding-bottom: 0.375rem;
23434
23470
  }
23435
23471
 
23436
23472
  .cds--table-toolbar--sm .cds--btn--primary.cds--batch-summary__cancel::before {
@@ -26623,6 +26659,7 @@ button.cds--dropdown-text:focus {
26623
26659
  border: 0;
26624
26660
  border-bottom: 0.0625rem solid var(--cds-border-strong);
26625
26661
  -moz-appearance: textfield;
26662
+ appearance: textfield;
26626
26663
  background-color: var(--cds-field);
26627
26664
  border-radius: 0;
26628
26665
  color: var(--cds-text-primary, #161616);
@@ -28644,9 +28681,13 @@ optgroup.cds--select-optgroup:disabled,
28644
28681
  .cds--modal .cds--date-picker__input,
28645
28682
  .cds--modal .cds--multi-select,
28646
28683
  .cds--modal .cds--number__control-btn::before,
28647
- .cds--modal .cds--number__control-btn::after {
28684
+ .cds--modal .cds--number__control-btn::after,
28685
+ .cds--modal .cds--list-box input[role=combobox] {
28648
28686
  background-color: var(--cds-field-02, #ffffff);
28649
28687
  }
28688
+ .cds--modal .cds--list-box__menu {
28689
+ background-color: var(--cds-layer-02, #ffffff);
28690
+ }
28650
28691
  .cds--modal .cds--number__rule-divider {
28651
28692
  background-color: var(--cds-border-subtle-02, #e0e0e0);
28652
28693
  }
@@ -28654,10 +28695,10 @@ optgroup.cds--select-optgroup:disabled,
28654
28695
  border-top-color: var(--cds-border-subtle-02, #e0e0e0);
28655
28696
  }
28656
28697
  .cds--modal .cds--list-box__menu-item:hover .cds--list-box__menu-item__option {
28657
- border-top-color: var(--cds-layer-hover);
28698
+ border-top-color: var(--cds-layer-hover-02, #e8e8e8);
28658
28699
  }
28659
28700
  .cds--modal .cds--list-box__menu-item--active:hover .cds--list-box__menu-item__option {
28660
- border-top-color: var(--cds-layer-selected-hover);
28701
+ border-top-color: var(--cds-layer-selected-hover-02, #d1d1d1);
28661
28702
  }
28662
28703
  .cds--modal .cds--text-input--fluid .cds--text-input,
28663
28704
  .cds--modal .cds--text-area--fluid .cds--text-area__wrapper,
@@ -28673,6 +28714,18 @@ optgroup.cds--select-optgroup:disabled,
28673
28714
  .cds--modal .cds--date-picker--fluid .ccdsds--date-picker-input__wrapper .cds--date-picker__input {
28674
28715
  background-color: var(--cds-field-01, #f4f4f4);
28675
28716
  }
28717
+ .cds--modal .cds--list-box__wrapper--fluid .cds--list-box__menu {
28718
+ background-color: var(--cds-layer-01, #f4f4f4);
28719
+ }
28720
+ .cds--modal .cds--list-box__menu-item:hover {
28721
+ background-color: var(--cds-layer-hover-02, #e8e8e8);
28722
+ }
28723
+ .cds--modal .cds--list-box__menu-item--active {
28724
+ background-color: var(--cds-layer-selected-02, #e0e0e0);
28725
+ }
28726
+ .cds--modal .cds--list-box__menu-item--active:hover {
28727
+ background-color: var(--cds-layer-selected-hover-02, #d1d1d1);
28728
+ }
28676
28729
  .cds--modal .cds--number-input--fluid .cds--number__control-btn:hover::before,
28677
28730
  .cds--modal .cds--number-input--fluid .cds--number__control-btn:hover::after {
28678
28731
  background-color: var(--cds-field-hover);
@@ -29274,7 +29327,7 @@ optgroup.cds--select-optgroup:disabled,
29274
29327
 
29275
29328
  .cds--inline-notification--low-contrast .cds--inline-notification__action-button.cds--btn--ghost:active,
29276
29329
  .cds--inline-notification--low-contrast .cds--inline-notification__action-button.cds--btn--ghost:hover {
29277
- background-color: var(--cds-notification-action-hover, #edf5ff);
29330
+ background-color: var(--cds-notification-action-hover, #ffffff);
29278
29331
  }
29279
29332
 
29280
29333
  .cds--inline-notification__action-button.cds--btn--ghost:focus {
@@ -29953,7 +30006,7 @@ optgroup.cds--select-optgroup:disabled,
29953
30006
 
29954
30007
  .cds--actionable-notification--low-contrast .cds--actionable-notification__action-button.cds--btn--ghost:active,
29955
30008
  .cds--actionable-notification--low-contrast .cds--actionable-notification__action-button.cds--btn--ghost:hover {
29956
- background-color: var(--cds-notification-action-hover, #edf5ff);
30009
+ background-color: var(--cds-notification-action-hover, #ffffff);
29957
30010
  }
29958
30011
 
29959
30012
  .cds--actionable-notification__action-button.cds--btn--ghost:focus {
@@ -29976,7 +30029,9 @@ optgroup.cds--select-optgroup:disabled,
29976
30029
  padding-right: 1rem;
29977
30030
  padding-left: 1rem;
29978
30031
  margin-bottom: 1rem;
29979
- margin-left: calc(2rem + 1.25rem - 0.125rem);
30032
+ margin-left: calc(
30033
+ 2rem + 1.25rem - 0.125rem
30034
+ );
29980
30035
  }
29981
30036
 
29982
30037
  .cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary {
@@ -31440,6 +31495,7 @@ span.cds--pagination__text.cds--pagination__items-count {
31440
31495
  width: 4rem;
31441
31496
  height: 2.5rem;
31442
31497
  -moz-appearance: textfield;
31498
+ appearance: textfield;
31443
31499
  }
31444
31500
  .cds--slider-text-input::-webkit-outer-spin-button, .cds--slider-text-input::-webkit-inner-spin-button,
31445
31501
  .cds-slider-text-input::-webkit-outer-spin-button,
@@ -32538,8 +32594,8 @@ span.cds--pagination__text.cds--pagination__items-count {
32538
32594
  .cds--tile--clickable .cds--tile--icon,
32539
32595
  .cds--tile--clickable.cds--link--disabled .cds--tile--disabled-icon {
32540
32596
  position: absolute;
32541
- right: var(--cds-layout-density-padding-inline-local);
32542
- bottom: var(--cds-layout-density-padding-inline-local);
32597
+ inset-block-end: var(--cds-layout-density-padding-inline-local);
32598
+ inset-inline-end: var(--cds-layout-density-padding-inline-local);
32543
32599
  }
32544
32600
 
32545
32601
  .cds--tile--clickable .cds--tile--icon {
@@ -32561,11 +32617,11 @@ span.cds--pagination__text.cds--pagination__items-count {
32561
32617
 
32562
32618
  .cds--tile__checkmark {
32563
32619
  position: absolute;
32564
- top: var(--cds-layout-density-padding-inline-local);
32565
- right: var(--cds-layout-density-padding-inline-local);
32566
32620
  height: 1rem;
32567
32621
  border: none;
32568
32622
  background: transparent;
32623
+ inset-block-start: var(--cds-layout-density-padding-inline-local);
32624
+ inset-inline-end: var(--cds-layout-density-padding-inline-local);
32569
32625
  opacity: 0;
32570
32626
  transition: 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
32571
32627
  }
@@ -32589,13 +32645,13 @@ span.cds--pagination__text.cds--pagination__items-count {
32589
32645
 
32590
32646
  .cds--tile__chevron {
32591
32647
  position: absolute;
32592
- right: 0;
32593
- bottom: 0;
32594
32648
  display: flex;
32595
32649
  width: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
32596
32650
  height: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
32597
32651
  align-items: center;
32598
32652
  justify-content: center;
32653
+ inset-block-end: 0;
32654
+ inset-inline-end: 0;
32599
32655
  }
32600
32656
  .cds--tile__chevron svg {
32601
32657
  fill: var(--cds-icon-primary, #161616);
@@ -32630,13 +32686,13 @@ span.cds--pagination__text.cds--pagination__items-count {
32630
32686
  text-align: start;
32631
32687
  width: 100%;
32632
32688
  position: absolute;
32633
- right: 0;
32634
- bottom: 0;
32635
32689
  display: flex;
32636
32690
  width: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
32637
32691
  height: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
32638
32692
  align-items: center;
32639
32693
  justify-content: center;
32694
+ inset-block-end: 0;
32695
+ inset-inline-end: 0;
32640
32696
  }
32641
32697
  .cds--tile__chevron--interactive *,
32642
32698
  .cds--tile__chevron--interactive *::before,
@@ -32664,7 +32720,7 @@ span.cds--pagination__text.cds--pagination__items-count {
32664
32720
  cursor: pointer;
32665
32721
  font-family: inherit;
32666
32722
  font-size: inherit;
32667
- text-align: left;
32723
+ text-align: start;
32668
32724
  transition: max-height 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
32669
32725
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
32670
32726
  font-weight: var(--cds-body-compact-01-font-weight, 400);
@@ -32805,9 +32861,7 @@ span.cds--pagination__text.cds--pagination__items-count {
32805
32861
 
32806
32862
  .cds--time-picker__select {
32807
32863
  justify-content: center;
32808
- }
32809
- .cds--time-picker__select:not(:last-of-type) {
32810
- margin: 0 0.125rem;
32864
+ margin-left: 0.125rem;
32811
32865
  }
32812
32866
 
32813
32867
  .cds--time-picker__input {