@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
@@ -368,31 +368,31 @@
368
368
  display: block;
369
369
  }
370
370
 
371
- .cds--popover--tab-tip > .cds--popover .cds--popover-caret {
371
+ .cds--popover--tab-tip > .cds--popover > .cds--popover-caret {
372
372
  display: none;
373
373
  }
374
374
 
375
- .cds--popover--bottom > .cds--popover .cds--popover-content {
375
+ .cds--popover--bottom > .cds--popover > .cds--popover-content {
376
376
  bottom: 0;
377
377
  left: 50%;
378
378
  transform: translate(-50%, calc(100% + var(--cds-popover-offset, 0rem)));
379
379
  }
380
380
 
381
- .cds--popover--bottom-left > .cds--popover .cds--popover-content {
381
+ .cds--popover--bottom-left > .cds--popover > .cds--popover-content {
382
382
  bottom: 0;
383
383
  left: 0;
384
384
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem)));
385
385
  }
386
386
 
387
- .cds--popover--bottom-right > .cds--popover .cds--popover-content {
387
+ .cds--popover--bottom-right > .cds--popover > .cds--popover-content {
388
388
  right: 0;
389
389
  bottom: 0;
390
390
  transform: translate(var(--cds-popover-offset, 0rem), calc(100% + var(--cds-popover-offset, 0rem)));
391
391
  }
392
392
 
393
- .cds--popover--bottom > .cds--popover .cds--popover-content::before,
394
- .cds--popover--bottom-left > .cds--popover .cds--popover-content::before,
395
- .cds--popover--bottom-right > .cds--popover .cds--popover-content::before {
393
+ .cds--popover--bottom > .cds--popover > .cds--popover-content::before,
394
+ .cds--popover--bottom-left > .cds--popover > .cds--popover-content::before,
395
+ .cds--popover--bottom-right > .cds--popover > .cds--popover-content::before {
396
396
  top: 0;
397
397
  right: 0;
398
398
  left: 0;
@@ -400,9 +400,9 @@
400
400
  transform: translateY(-100%);
401
401
  }
402
402
 
403
- .cds--popover--bottom > .cds--popover .cds--popover-caret,
404
- .cds--popover--bottom-left > .cds--popover .cds--popover-caret,
405
- .cds--popover--bottom-right > .cds--popover .cds--popover-caret {
403
+ .cds--popover--bottom > .cds--popover > .cds--popover-caret,
404
+ .cds--popover--bottom-left > .cds--popover > .cds--popover-caret,
405
+ .cds--popover--bottom-right > .cds--popover > .cds--popover-caret {
406
406
  bottom: 0;
407
407
  left: 50%;
408
408
  width: var(--cds-popover-caret-width, 0.75rem);
@@ -411,27 +411,27 @@
411
411
  transform: translate(-50%, var(--cds-popover-offset, 0rem));
412
412
  }
413
413
 
414
- .cds--popover--top > .cds--popover .cds--popover-content {
414
+ .cds--popover--top > .cds--popover > .cds--popover-content {
415
415
  top: 0;
416
416
  left: 50%;
417
417
  transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem)));
418
418
  }
419
419
 
420
- .cds--popover--top-left > .cds--popover .cds--popover-content {
420
+ .cds--popover--top-left > .cds--popover > .cds--popover-content {
421
421
  top: 0;
422
422
  left: 0;
423
423
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-100% - var(--cds-popover-offset, 0rem)));
424
424
  }
425
425
 
426
- .cds--popover--top-right > .cds--popover .cds--popover-content {
426
+ .cds--popover--top-right > .cds--popover > .cds--popover-content {
427
427
  top: 0;
428
428
  right: 0;
429
429
  transform: translate(var(--cds-popover-offset, 0rem), calc(-100% - var(--cds-popover-offset, 0rem)));
430
430
  }
431
431
 
432
- .cds--popover--top > .cds--popover .cds--popover-content::before,
433
- .cds--popover--top-left > .cds--popover .cds--popover-content::before,
434
- .cds--popover--top-right > .cds--popover .cds--popover-content::before {
432
+ .cds--popover--top > .cds--popover > .cds--popover-content::before,
433
+ .cds--popover--top-left > .cds--popover > .cds--popover-content::before,
434
+ .cds--popover--top-right > .cds--popover > .cds--popover-content::before {
435
435
  right: 0;
436
436
  bottom: 0;
437
437
  left: 0;
@@ -439,9 +439,9 @@
439
439
  transform: translateY(100%);
440
440
  }
441
441
 
442
- .cds--popover--top > .cds--popover .cds--popover-caret,
443
- .cds--popover--top-left > .cds--popover .cds--popover-caret,
444
- .cds--popover--top-right > .cds--popover .cds--popover-caret {
442
+ .cds--popover--top > .cds--popover > .cds--popover-caret,
443
+ .cds--popover--top-left > .cds--popover > .cds--popover-caret,
444
+ .cds--popover--top-right > .cds--popover > .cds--popover-caret {
445
445
  top: 0;
446
446
  left: 50%;
447
447
  width: var(--cds-popover-caret-width, 0.75rem);
@@ -450,27 +450,27 @@
450
450
  transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
451
451
  }
452
452
 
453
- .cds--popover--right > .cds--popover .cds--popover-content {
453
+ .cds--popover--right > .cds--popover > .cds--popover-content {
454
454
  top: 50%;
455
455
  left: 100%;
456
456
  transform: translate(var(--cds-popover-offset, 0rem), -50%);
457
457
  }
458
458
 
459
- .cds--popover--right-top > .cds--popover .cds--popover-content {
459
+ .cds--popover--right-top > .cds--popover > .cds--popover-content {
460
460
  top: 50%;
461
461
  left: 100%;
462
462
  transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) * -1 - 16px));
463
463
  }
464
464
 
465
- .cds--popover--right-bottom > .cds--popover .cds--popover-content {
465
+ .cds--popover--right-bottom > .cds--popover > .cds--popover-content {
466
466
  bottom: 50%;
467
467
  left: 100%;
468
468
  transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
469
469
  }
470
470
 
471
- .cds--popover--right > .cds--popover .cds--popover-content::before,
472
- .cds--popover--right-top > .cds--popover .cds--popover-content::before,
473
- .cds--popover--right-bottom > .cds--popover .cds--popover-content::before {
471
+ .cds--popover--right > .cds--popover > .cds--popover-content::before,
472
+ .cds--popover--right-top > .cds--popover > .cds--popover-content::before,
473
+ .cds--popover--right-bottom > .cds--popover > .cds--popover-content::before {
474
474
  top: 0;
475
475
  bottom: 0;
476
476
  left: 0;
@@ -478,9 +478,9 @@
478
478
  transform: translateX(-100%);
479
479
  }
480
480
 
481
- .cds--popover--right > .cds--popover .cds--popover-caret,
482
- .cds--popover--right-top > .cds--popover .cds--popover-caret,
483
- .cds--popover--right-bottom > .cds--popover .cds--popover-caret {
481
+ .cds--popover--right > .cds--popover > .cds--popover-caret,
482
+ .cds--popover--right-top > .cds--popover > .cds--popover-caret,
483
+ .cds--popover--right-bottom > .cds--popover > .cds--popover-caret {
484
484
  top: 50%;
485
485
  left: 100%;
486
486
  width: var(--cds-popover-caret-height, 0.375rem);
@@ -489,27 +489,27 @@
489
489
  transform: translate(calc(var(--cds-popover-offset, 0rem) - 100%), -50%);
490
490
  }
491
491
 
492
- .cds--popover--left > .cds--popover .cds--popover-content {
492
+ .cds--popover--left > .cds--popover > .cds--popover-content {
493
493
  top: 50%;
494
494
  right: 100%;
495
495
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 0.1px), -50%);
496
496
  }
497
497
 
498
- .cds--popover--left-top > .cds--popover .cds--popover-content {
498
+ .cds--popover--left-top > .cds--popover > .cds--popover-content {
499
499
  top: -50%;
500
500
  right: 100%;
501
501
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
502
502
  }
503
503
 
504
- .cds--popover--left-bottom > .cds--popover .cds--popover-content {
504
+ .cds--popover--left-bottom > .cds--popover > .cds--popover-content {
505
505
  right: 100%;
506
506
  bottom: -50%;
507
507
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
508
508
  }
509
509
 
510
- .cds--popover--left > .cds--popover .cds--popover-content::before,
511
- .cds--popover--left-top > .cds--popover .cds--popover-content::before,
512
- .cds--popover--left-bottom > .cds--popover .cds--popover-content::before {
510
+ .cds--popover--left > .cds--popover > .cds--popover-content::before,
511
+ .cds--popover--left-top > .cds--popover > .cds--popover-content::before,
512
+ .cds--popover--left-bottom > .cds--popover > .cds--popover-content::before {
513
513
  top: 0;
514
514
  right: 0;
515
515
  bottom: 0;
@@ -517,9 +517,9 @@
517
517
  transform: translateX(100%);
518
518
  }
519
519
 
520
- .cds--popover--left > .cds--popover .cds--popover-caret,
521
- .cds--popover--left-top > .cds--popover .cds--popover-caret,
522
- .cds--popover--left-bottom > .cds--popover .cds--popover-caret {
520
+ .cds--popover--left > .cds--popover > .cds--popover-caret,
521
+ .cds--popover--left-top > .cds--popover > .cds--popover-caret,
522
+ .cds--popover--left-bottom > .cds--popover > .cds--popover-caret {
523
523
  top: 50%;
524
524
  right: 100%;
525
525
  width: var(--cds-popover-caret-height, 0.375rem);
@@ -528,7 +528,7 @@
528
528
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 100%), -50%);
529
529
  }
530
530
 
531
- .cds--popover--tab-tip > .cds--popover .cds--popover-content {
531
+ .cds--popover--tab-tip > .cds--popover > .cds--popover-content {
532
532
  border-radius: 0;
533
533
  }
534
534
 
@@ -847,14 +847,14 @@
847
847
  padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
848
848
  }
849
849
  .cds--btn--ghost:hover {
850
- background-color: var(--cds-layer-hover);
850
+ background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
851
851
  }
852
852
  .cds--btn--ghost:focus {
853
853
  border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
854
854
  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);
855
855
  }
856
856
  .cds--btn--ghost:active {
857
- background-color: var(--cds-layer-active);
857
+ background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5));
858
858
  }
859
859
  .cds--btn--ghost .cds--btn__icon,
860
860
  .cds--btn--ghost .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
@@ -3731,6 +3731,7 @@ p.c4p--about-modal__copyright-text:first-child {
3731
3731
  .c4p--create-influencer {
3732
3732
  display: grid;
3733
3733
  height: 100%;
3734
+ padding: 1.5rem 2rem;
3734
3735
  grid-template-columns: 100%;
3735
3736
  grid-template-rows: 1fr auto;
3736
3737
  }
@@ -3741,8 +3742,12 @@ p.c4p--about-modal__copyright-text:first-child {
3741
3742
  overflow-y: auto;
3742
3743
  }
3743
3744
 
3744
- .c4p--create-influencer__progress-indicator.cds--progress {
3745
- padding: 1.5rem;
3745
+ .c4p--create-influencer__title {
3746
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
3747
+ font-weight: var(--cds-heading-03-font-weight, 400);
3748
+ line-height: var(--cds-heading-03-line-height, 1.4);
3749
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
3750
+ margin-bottom: 1.5rem;
3746
3751
  }
3747
3752
 
3748
3753
  .c4p--create-influencer__view-all-toggle {
@@ -11351,6 +11356,22 @@ button.c4p--add-select__global-filter-toggle--open {
11351
11356
  width: 100%;
11352
11357
  padding-top: 0;
11353
11358
  }
11359
+ .c4p--datagrid__grid-container .cds--data-table-header__description {
11360
+ overflow: hidden;
11361
+ text-overflow: ellipsis;
11362
+ white-space: nowrap;
11363
+ }
11364
+ .c4p--datagrid__grid-container .cds--data-table-header__title {
11365
+ overflow: hidden;
11366
+ max-width: 80ch;
11367
+ text-overflow: ellipsis;
11368
+ white-space: nowrap;
11369
+ }
11370
+ @media (min-width: 42rem) {
11371
+ .c4p--datagrid__grid-container .cds--data-table-header__title {
11372
+ max-width: 55ch;
11373
+ }
11374
+ }
11354
11375
  .c4p--datagrid__grid-container .cds--data-table-content {
11355
11376
  width: 100%;
11356
11377
  height: 100%;
@@ -11773,6 +11794,7 @@ button.c4p--add-select__global-filter-toggle--open {
11773
11794
  width: 1rem;
11774
11795
  height: 100%;
11775
11796
  margin: 0;
11797
+ -moz-appearance: initial;
11776
11798
  -webkit-appearance: none;
11777
11799
  appearance: none;
11778
11800
  background: transparent;
@@ -11782,12 +11804,12 @@ button.c4p--add-select__global-filter-toggle--open {
11782
11804
  outline: 0;
11783
11805
  }
11784
11806
 
11785
- .c4p--datagrid .c4p--datagrid__col-resizer-range:focus::before {
11807
+ .c4p--datagrid .c4p--datagrid__col-resizer-range:focus + .c4p--datagrid__col-resize-indicator::before {
11786
11808
  position: absolute;
11787
11809
  top: 50%;
11788
11810
  left: 50%;
11789
11811
  width: 2px;
11790
- height: 100%;
11812
+ height: var(--c4p--datagrid--header-height);
11791
11813
  background-color: var(--cds-focus, #0f62fe);
11792
11814
  content: "";
11793
11815
  transform: translate(-50%, -50%);
@@ -11805,11 +11827,11 @@ button.c4p--add-select__global-filter-toggle--open {
11805
11827
  transform: translate(-50%, 0);
11806
11828
  }
11807
11829
 
11808
- .c4p--datagrid .c4p--datagrid__col-resizer-range:focus::after {
11830
+ .c4p--datagrid .c4p--datagrid__col-resizer-range:focus + .c4p--datagrid__col-resize-indicator::after {
11809
11831
  position: absolute;
11810
11832
  /* stylelint-disable-next-line carbon/layout-token-use */
11811
- top: var(--c4p--datagrid--row-height);
11812
- right: 0.5rem;
11833
+ top: calc(var(--c4p--datagrid--row-height) - 20px);
11834
+ right: 0.25rem;
11813
11835
  width: 1px;
11814
11836
  height: calc(var(--c4p--datagrid--grid-height) - var(--c4p--datagrid--row-height));
11815
11837
  background-color: var(--cds-layer-active-01, #c6c6c6);
@@ -11826,6 +11848,10 @@ button.c4p--add-select__global-filter-toggle--open {
11826
11848
  background: transparent;
11827
11849
  }
11828
11850
 
11851
+ .c4p--datagrid .c4p--datagrid__col-resizer-range::-moz-range-thumb {
11852
+ visibility: hidden;
11853
+ }
11854
+
11829
11855
  /*
11830
11856
  * Licensed Materials - Property of IBM
11831
11857
  * 5724-Q36
@@ -14505,71 +14531,71 @@ th.c4p--datagrid__select-all-toggle-on.button {
14505
14531
  }
14506
14532
  }
14507
14533
  :root {
14508
- --cds-layer:var(--cds-layer-01, #f4f4f4);
14509
- --cds-layer-active:var(--cds-layer-active-01, #c6c6c6);
14510
- --cds-layer-hover:var(--cds-layer-hover-01, #e8e8e8);
14511
- --cds-layer-selected:var(--cds-layer-selected-01, #e0e0e0);
14512
- --cds-layer-selected-hover:var(--cds-layer-selected-hover-01, #d1d1d1);
14513
- --cds-layer-accent:var(--cds-layer-accent-01, #e0e0e0);
14514
- --cds-layer-accent-hover:var(--cds-layer-accent-hover-01, #d1d1d1);
14515
- --cds-layer-accent-active:var(--cds-layer-accent-active-01, #a8a8a8);
14516
- --cds-field:var(--cds-field-01, #f4f4f4);
14517
- --cds-field-hover:var(--cds-field-hover-01, #e8e8e8);
14518
- --cds-border-subtle:var(--cds-border-subtle-00, #e0e0e0);
14519
- --cds-border-subtle-selected:var(--cds-border-subtle-selected-01, #c6c6c6);
14520
- --cds-border-strong:var(--cds-border-strong-01, #8d8d8d);
14521
- --cds-border-tile:var(--cds-border-tile-01, #c6c6c6);
14534
+ --cds-layer: var(--cds-layer-01, #f4f4f4);
14535
+ --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
14536
+ --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
14537
+ --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
14538
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
14539
+ --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
14540
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
14541
+ --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
14542
+ --cds-field: var(--cds-field-01, #f4f4f4);
14543
+ --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
14544
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
14545
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
14546
+ --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
14547
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
14522
14548
  }
14523
14549
 
14524
14550
  .cds--layer-one {
14525
- --cds-layer:var(--cds-layer-01, #f4f4f4);
14526
- --cds-layer-active:var(--cds-layer-active-01, #c6c6c6);
14527
- --cds-layer-hover:var(--cds-layer-hover-01, #e8e8e8);
14528
- --cds-layer-selected:var(--cds-layer-selected-01, #e0e0e0);
14529
- --cds-layer-selected-hover:var(--cds-layer-selected-hover-01, #d1d1d1);
14530
- --cds-layer-accent:var(--cds-layer-accent-01, #e0e0e0);
14531
- --cds-layer-accent-hover:var(--cds-layer-accent-hover-01, #d1d1d1);
14532
- --cds-layer-accent-active:var(--cds-layer-accent-active-01, #a8a8a8);
14533
- --cds-field:var(--cds-field-01, #f4f4f4);
14534
- --cds-field-hover:var(--cds-field-hover-01, #e8e8e8);
14535
- --cds-border-subtle:var(--cds-border-subtle-00, #e0e0e0);
14536
- --cds-border-subtle-selected:var(--cds-border-subtle-selected-01, #c6c6c6);
14537
- --cds-border-strong:var(--cds-border-strong-01, #8d8d8d);
14538
- --cds-border-tile:var(--cds-border-tile-01, #c6c6c6);
14551
+ --cds-layer: var(--cds-layer-01, #f4f4f4);
14552
+ --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
14553
+ --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
14554
+ --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
14555
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
14556
+ --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
14557
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
14558
+ --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
14559
+ --cds-field: var(--cds-field-01, #f4f4f4);
14560
+ --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
14561
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
14562
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
14563
+ --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
14564
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
14539
14565
  }
14540
14566
 
14541
14567
  .cds--layer-two {
14542
- --cds-layer:var(--cds-layer-02, #ffffff);
14543
- --cds-layer-active:var(--cds-layer-active-02, #c6c6c6);
14544
- --cds-layer-hover:var(--cds-layer-hover-02, #e8e8e8);
14545
- --cds-layer-selected:var(--cds-layer-selected-02, #e0e0e0);
14546
- --cds-layer-selected-hover:var(--cds-layer-selected-hover-02, #d1d1d1);
14547
- --cds-layer-accent:var(--cds-layer-accent-02, #e0e0e0);
14548
- --cds-layer-accent-hover:var(--cds-layer-accent-hover-02, #d1d1d1);
14549
- --cds-layer-accent-active:var(--cds-layer-accent-active-02, #a8a8a8);
14550
- --cds-field:var(--cds-field-02, #ffffff);
14551
- --cds-field-hover:var(--cds-field-hover-02, #e8e8e8);
14552
- --cds-border-subtle:var(--cds-border-subtle-01, #c6c6c6);
14553
- --cds-border-subtle-selected:var(--cds-border-subtle-selected-02, #c6c6c6);
14554
- --cds-border-strong:var(--cds-border-strong-02, #8d8d8d);
14555
- --cds-border-tile:var(--cds-border-tile-02, #a8a8a8);
14568
+ --cds-layer: var(--cds-layer-02, #ffffff);
14569
+ --cds-layer-active: var(--cds-layer-active-02, #c6c6c6);
14570
+ --cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8);
14571
+ --cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0);
14572
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1);
14573
+ --cds-layer-accent: var(--cds-layer-accent-02, #e0e0e0);
14574
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-02, #d1d1d1);
14575
+ --cds-layer-accent-active: var(--cds-layer-accent-active-02, #a8a8a8);
14576
+ --cds-field: var(--cds-field-02, #ffffff);
14577
+ --cds-field-hover: var(--cds-field-hover-02, #e8e8e8);
14578
+ --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
14579
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-02, #c6c6c6);
14580
+ --cds-border-strong: var(--cds-border-strong-02, #8d8d8d);
14581
+ --cds-border-tile: var(--cds-border-tile-02, #a8a8a8);
14556
14582
  }
14557
14583
 
14558
14584
  .cds--layer-three {
14559
- --cds-layer:var(--cds-layer-03, #f4f4f4);
14560
- --cds-layer-active:var(--cds-layer-active-03, #c6c6c6);
14561
- --cds-layer-hover:var(--cds-layer-hover-03, #e8e8e8);
14562
- --cds-layer-selected:var(--cds-layer-selected-03, #e0e0e0);
14563
- --cds-layer-selected-hover:var(--cds-layer-selected-hover-03, #d1d1d1);
14564
- --cds-layer-accent:var(--cds-layer-accent-03, #e0e0e0);
14565
- --cds-layer-accent-hover:var(--cds-layer-accent-hover-03, #d1d1d1);
14566
- --cds-layer-accent-active:var(--cds-layer-accent-active-03, #a8a8a8);
14567
- --cds-field:var(--cds-field-03, #f4f4f4);
14568
- --cds-field-hover:var(--cds-field-hover-03, #e8e8e8);
14569
- --cds-border-subtle:var(--cds-border-subtle-02, #e0e0e0);
14570
- --cds-border-subtle-selected:var(--cds-border-subtle-selected-03, #c6c6c6);
14571
- --cds-border-strong:var(--cds-border-strong-03, #8d8d8d);
14572
- --cds-border-tile:var(--cds-border-tile-03, #c6c6c6);
14585
+ --cds-layer: var(--cds-layer-03, #f4f4f4);
14586
+ --cds-layer-active: var(--cds-layer-active-03, #c6c6c6);
14587
+ --cds-layer-hover: var(--cds-layer-hover-03, #e8e8e8);
14588
+ --cds-layer-selected: var(--cds-layer-selected-03, #e0e0e0);
14589
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-03, #d1d1d1);
14590
+ --cds-layer-accent: var(--cds-layer-accent-03, #e0e0e0);
14591
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-03, #d1d1d1);
14592
+ --cds-layer-accent-active: var(--cds-layer-accent-active-03, #a8a8a8);
14593
+ --cds-field: var(--cds-field-03, #f4f4f4);
14594
+ --cds-field-hover: var(--cds-field-hover-03, #e8e8e8);
14595
+ --cds-border-subtle: var(--cds-border-subtle-02, #e0e0e0);
14596
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-03, #c6c6c6);
14597
+ --cds-border-strong: var(--cds-border-strong-03, #8d8d8d);
14598
+ --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
14573
14599
  }
14574
14600
 
14575
14601
  .cds--side-nav {
@@ -15080,154 +15106,154 @@ a.cds--side-nav__link--current::before {
15080
15106
  }
15081
15107
  }
15082
15108
  .cds--layout--size-xs {
15083
- --cds-layout-size-height-context:var(--cds-layout-size-height-xs, 1.5rem);
15084
- --cds-layout-size-height:var(--cds-layout-size-height-context);
15109
+ --cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem);
15110
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
15085
15111
  }
15086
15112
 
15087
15113
  .cds--layout-constraint--size__default-xs {
15088
- --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
15114
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
15089
15115
  }
15090
15116
 
15091
15117
  .cds--layout-constraint--size__min-xs {
15092
- --cds-layout-size-height-min:var(--cds-layout-size-height-xs, 1.5rem);
15118
+ --cds-layout-size-height-min: var(--cds-layout-size-height-xs, 1.5rem);
15093
15119
  }
15094
15120
 
15095
15121
  .cds--layout-constraint--size__max-xs {
15096
- --cds-layout-size-height-max:var(--cds-layout-size-height-xs, 1.5rem);
15122
+ --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem);
15097
15123
  }
15098
15124
 
15099
15125
  .cds--layout--size-sm {
15100
- --cds-layout-size-height-context:var(--cds-layout-size-height-sm, 2rem);
15101
- --cds-layout-size-height:var(--cds-layout-size-height-context);
15126
+ --cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem);
15127
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
15102
15128
  }
15103
15129
 
15104
15130
  .cds--layout-constraint--size__default-sm {
15105
- --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
15131
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
15106
15132
  }
15107
15133
 
15108
15134
  .cds--layout-constraint--size__min-sm {
15109
- --cds-layout-size-height-min:var(--cds-layout-size-height-sm, 2rem);
15135
+ --cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem);
15110
15136
  }
15111
15137
 
15112
15138
  .cds--layout-constraint--size__max-sm {
15113
- --cds-layout-size-height-max:var(--cds-layout-size-height-sm, 2rem);
15139
+ --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem);
15114
15140
  }
15115
15141
 
15116
15142
  .cds--layout--size-md {
15117
- --cds-layout-size-height-context:var(--cds-layout-size-height-md, 2.5rem);
15118
- --cds-layout-size-height:var(--cds-layout-size-height-context);
15143
+ --cds-layout-size-height-context: var(--cds-layout-size-height-md, 2.5rem);
15144
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
15119
15145
  }
15120
15146
 
15121
15147
  .cds--layout-constraint--size__default-md {
15122
- --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
15148
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
15123
15149
  }
15124
15150
 
15125
15151
  .cds--layout-constraint--size__min-md {
15126
- --cds-layout-size-height-min:var(--cds-layout-size-height-md, 2.5rem);
15152
+ --cds-layout-size-height-min: var(--cds-layout-size-height-md, 2.5rem);
15127
15153
  }
15128
15154
 
15129
15155
  .cds--layout-constraint--size__max-md {
15130
- --cds-layout-size-height-max:var(--cds-layout-size-height-md, 2.5rem);
15156
+ --cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem);
15131
15157
  }
15132
15158
 
15133
15159
  .cds--layout--size-lg {
15134
- --cds-layout-size-height-context:var(--cds-layout-size-height-lg, 3rem);
15135
- --cds-layout-size-height:var(--cds-layout-size-height-context);
15160
+ --cds-layout-size-height-context: var(--cds-layout-size-height-lg, 3rem);
15161
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
15136
15162
  }
15137
15163
 
15138
15164
  .cds--layout-constraint--size__default-lg {
15139
- --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
15165
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
15140
15166
  }
15141
15167
 
15142
15168
  .cds--layout-constraint--size__min-lg {
15143
- --cds-layout-size-height-min:var(--cds-layout-size-height-lg, 3rem);
15169
+ --cds-layout-size-height-min: var(--cds-layout-size-height-lg, 3rem);
15144
15170
  }
15145
15171
 
15146
15172
  .cds--layout-constraint--size__max-lg {
15147
- --cds-layout-size-height-max:var(--cds-layout-size-height-lg, 3rem);
15173
+ --cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem);
15148
15174
  }
15149
15175
 
15150
15176
  .cds--layout--size-xl {
15151
- --cds-layout-size-height-context:var(--cds-layout-size-height-xl, 4rem);
15152
- --cds-layout-size-height:var(--cds-layout-size-height-context);
15177
+ --cds-layout-size-height-context: var(--cds-layout-size-height-xl, 4rem);
15178
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
15153
15179
  }
15154
15180
 
15155
15181
  .cds--layout-constraint--size__default-xl {
15156
- --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
15182
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
15157
15183
  }
15158
15184
 
15159
15185
  .cds--layout-constraint--size__min-xl {
15160
- --cds-layout-size-height-min:var(--cds-layout-size-height-xl, 4rem);
15186
+ --cds-layout-size-height-min: var(--cds-layout-size-height-xl, 4rem);
15161
15187
  }
15162
15188
 
15163
15189
  .cds--layout-constraint--size__max-xl {
15164
- --cds-layout-size-height-max:var(--cds-layout-size-height-xl, 4rem);
15190
+ --cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem);
15165
15191
  }
15166
15192
 
15167
15193
  .cds--layout--size-2xl {
15168
- --cds-layout-size-height-context:var(--cds-layout-size-height-2xl, 5rem);
15169
- --cds-layout-size-height:var(--cds-layout-size-height-context);
15194
+ --cds-layout-size-height-context: var(--cds-layout-size-height-2xl, 5rem);
15195
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
15170
15196
  }
15171
15197
 
15172
15198
  .cds--layout-constraint--size__default-2xl {
15173
- --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
15199
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
15174
15200
  }
15175
15201
 
15176
15202
  .cds--layout-constraint--size__min-2xl {
15177
- --cds-layout-size-height-min:var(--cds-layout-size-height-2xl, 5rem);
15203
+ --cds-layout-size-height-min: var(--cds-layout-size-height-2xl, 5rem);
15178
15204
  }
15179
15205
 
15180
15206
  .cds--layout-constraint--size__max-2xl {
15181
- --cds-layout-size-height-max:var(--cds-layout-size-height-2xl, 5rem);
15207
+ --cds-layout-size-height-max: var(--cds-layout-size-height-2xl, 5rem);
15182
15208
  }
15183
15209
 
15184
15210
  .cds--layout--density-condensed {
15185
- --cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed, 0.5rem);
15186
- --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context);
15211
+ --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
15212
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
15187
15213
  }
15188
15214
 
15189
15215
  .cds--layout-constraint--density__default-condensed {
15190
- --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
15216
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
15191
15217
  }
15192
15218
 
15193
15219
  .cds--layout-constraint--density__min-condensed {
15194
- --cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed, 0.5rem);
15220
+ --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
15195
15221
  }
15196
15222
 
15197
15223
  .cds--layout-constraint--density__max-condensed {
15198
- --cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed, 0.5rem);
15224
+ --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
15199
15225
  }
15200
15226
 
15201
15227
  .cds--layout--density-normal {
15202
- --cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal, 1rem);
15203
- --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context);
15228
+ --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-normal, 1rem);
15229
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
15204
15230
  }
15205
15231
 
15206
15232
  .cds--layout-constraint--density__default-normal {
15207
- --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
15233
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
15208
15234
  }
15209
15235
 
15210
15236
  .cds--layout-constraint--density__min-normal {
15211
- --cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal, 1rem);
15237
+ --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-normal, 1rem);
15212
15238
  }
15213
15239
 
15214
15240
  .cds--layout-constraint--density__max-normal {
15215
- --cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal, 1rem);
15241
+ --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem);
15216
15242
  }
15217
15243
 
15218
15244
  :root {
15219
- --cds-layout-size-height-xs:1.5rem;
15220
- --cds-layout-size-height-sm:2rem;
15221
- --cds-layout-size-height-md:2.5rem;
15222
- --cds-layout-size-height-lg:3rem;
15223
- --cds-layout-size-height-xl:4rem;
15224
- --cds-layout-size-height-2xl:5rem;
15225
- --cds-layout-size-height-min:0px;
15226
- --cds-layout-size-height-max:999999999px;
15227
- --cds-layout-density-padding-inline-condensed:0.5rem;
15228
- --cds-layout-density-padding-inline-normal:1rem;
15229
- --cds-layout-density-padding-inline-min:0px;
15230
- --cds-layout-density-padding-inline-max:999999999px;
15245
+ --cds-layout-size-height-xs: 1.5rem;
15246
+ --cds-layout-size-height-sm: 2rem;
15247
+ --cds-layout-size-height-md: 2.5rem;
15248
+ --cds-layout-size-height-lg: 3rem;
15249
+ --cds-layout-size-height-xl: 4rem;
15250
+ --cds-layout-size-height-2xl: 5rem;
15251
+ --cds-layout-size-height-min: 0px;
15252
+ --cds-layout-size-height-max: 999999999px;
15253
+ --cds-layout-density-padding-inline-condensed: 0.5rem;
15254
+ --cds-layout-density-padding-inline-normal: 1rem;
15255
+ --cds-layout-density-padding-inline-min: 0px;
15256
+ --cds-layout-density-padding-inline-max: 999999999px;
15231
15257
  }
15232
15258
 
15233
15259
  .c4p--action-set {
@@ -15598,6 +15624,7 @@ a.cds--side-nav__link--current::before {
15598
15624
  .c4p--create-influencer {
15599
15625
  display: grid;
15600
15626
  height: 100%;
15627
+ padding: 1.5rem 2rem;
15601
15628
  grid-template-columns: 100%;
15602
15629
  grid-template-rows: 1fr auto;
15603
15630
  }
@@ -15608,8 +15635,12 @@ a.cds--side-nav__link--current::before {
15608
15635
  overflow-y: auto;
15609
15636
  }
15610
15637
 
15611
- .c4p--create-influencer__progress-indicator.cds--progress {
15612
- padding: 1.5rem;
15638
+ .c4p--create-influencer__title {
15639
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
15640
+ font-weight: var(--cds-heading-03-font-weight, 400);
15641
+ line-height: var(--cds-heading-03-line-height, 1.4);
15642
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
15643
+ margin-bottom: 1.5rem;
15613
15644
  }
15614
15645
 
15615
15646
  .c4p--create-influencer__view-all-toggle {