@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
@@ -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 {