@carbon/ibm-products 2.8.0 → 2.9.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 (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 {