@carbon/ibm-products 0.99.1 → 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (45) hide show
  1. package/css/index-full-carbon.css +895 -922
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +8 -8
  4. package/css/index-without-carbon-released-only.css +808 -796
  5. package/css/index-without-carbon-released-only.css.map +1 -1
  6. package/css/index-without-carbon-released-only.min.css +8 -8
  7. package/css/index-without-carbon.css +895 -922
  8. package/css/index-without-carbon.css.map +1 -1
  9. package/css/index-without-carbon.min.css +8 -8
  10. package/css/index.css +895 -922
  11. package/css/index.css.map +1 -1
  12. package/css/index.min.css +8 -8
  13. package/es/components/ActionBar/ActionBar.js +11 -36
  14. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +42 -115
  15. package/es/components/CreateSidePanel/CreateSidePanel.js +5 -17
  16. package/es/components/PageHeader/PageHeader.js +17 -100
  17. package/es/components/SidePanel/SidePanel.js +13 -28
  18. package/es/components/Tearsheet/Tearsheet.js +1 -10
  19. package/es/components/Tearsheet/TearsheetNarrow.js +1 -10
  20. package/es/components/Tearsheet/TearsheetShell.js +0 -10
  21. package/es/components/UserProfileImage/UserProfileImage.js +1 -1
  22. package/es/components/index.js +0 -1
  23. package/es/global/js/package-settings.js +1 -2
  24. package/lib/components/ActionBar/ActionBar.js +11 -37
  25. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +44 -116
  26. package/lib/components/CreateSidePanel/CreateSidePanel.js +5 -19
  27. package/lib/components/PageHeader/PageHeader.js +16 -99
  28. package/lib/components/SidePanel/SidePanel.js +13 -29
  29. package/lib/components/Tearsheet/Tearsheet.js +0 -9
  30. package/lib/components/Tearsheet/TearsheetNarrow.js +0 -9
  31. package/lib/components/Tearsheet/TearsheetShell.js +0 -11
  32. package/lib/components/UserProfileImage/UserProfileImage.js +1 -1
  33. package/lib/components/index.js +0 -8
  34. package/lib/global/js/package-settings.js +1 -2
  35. package/package.json +2 -2
  36. package/scss/components/PageHeader/_page-header.scss +26 -5
  37. package/scss/components/UserProfileImage/_user-profile-image.scss +2 -2
  38. package/scss/components/_index.scss +0 -1
  39. package/scss/global/styles/_project-settings.scss +1 -1
  40. package/es/components/ContextHeader/ContextHeader.js +0 -46
  41. package/es/components/ContextHeader/index.js +0 -7
  42. package/lib/components/ContextHeader/ContextHeader.js +0 -62
  43. package/lib/components/ContextHeader/index.js +0 -15
  44. package/scss/components/ContextHeader/_context-header.scss +0 -43
  45. package/scss/components/ContextHeader/_index.scss +0 -8
package/css/index.css CHANGED
@@ -4540,30 +4540,30 @@ fieldset[disabled] .bx--form__helper-text {
4540
4540
  /* stylelint-disable-line no-invalid-position-at-import-rule */
4541
4541
  /* stylelint-disable-line no-invalid-position-at-import-rule */
4542
4542
  /* stylelint-disable-line no-invalid-position-at-import-rule */
4543
- .exp--apikey-modal .bx--modal-close {
4543
+ .c4p--apikey-modal .bx--modal-close {
4544
4544
  display: none;
4545
4545
  }
4546
4546
 
4547
- .exp--apikey-modal .bx--inline-loading {
4547
+ .c4p--apikey-modal .bx--inline-loading {
4548
4548
  min-height: 3rem;
4549
4549
  }
4550
4550
 
4551
- .exp--apikey-modal .bx--modal-content {
4551
+ .c4p--apikey-modal .bx--modal-content {
4552
4552
  padding-right: var(--cds-spacing-05, 1rem);
4553
4553
  }
4554
4554
 
4555
- .exp--apikey-modal__body {
4555
+ .c4p--apikey-modal__body {
4556
4556
  padding-right: calc(20% - var(--cds-spacing-05, 1rem));
4557
4557
  margin-bottom: var(--cds-spacing-05, 1rem);
4558
4558
  }
4559
4559
 
4560
- .exp--apikey-modal__messaging {
4560
+ .c4p--apikey-modal__messaging {
4561
4561
  display: flex;
4562
4562
  padding-right: calc(20% - var(--cds-spacing-05, 1rem));
4563
4563
  margin-top: var(--cds-spacing-03, 0.5rem);
4564
4564
  }
4565
4565
 
4566
- .exp--apikey-modal__messaging-text {
4566
+ .c4p--apikey-modal__messaging-text {
4567
4567
  flex: 1;
4568
4568
  margin-left: var(--cds-spacing-03, 0.5rem);
4569
4569
  font-size: var(--cds-label-01-font-size, 0.75rem);
@@ -4572,11 +4572,11 @@ fieldset[disabled] .bx--form__helper-text {
4572
4572
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
4573
4573
  }
4574
4574
 
4575
- .exp--apikey-modal__messaging-text > * {
4575
+ .c4p--apikey-modal__messaging-text > * {
4576
4576
  font: inherit;
4577
4577
  }
4578
4578
 
4579
- .exp--apikey-modal__error-icon svg {
4579
+ .c4p--apikey-modal__error-icon svg {
4580
4580
  fill: var(--cds-danger-01, #da1e28);
4581
4581
  }
4582
4582
 
@@ -5524,21 +5524,21 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
5524
5524
  }
5525
5525
  }
5526
5526
 
5527
- .exp--about-modal .bx--modal-container {
5527
+ .c4p--about-modal .bx--modal-container {
5528
5528
  grid-template-rows: auto auto 1fr auto;
5529
5529
  }
5530
5530
 
5531
- .exp--about-modal .exp--about-modal__logo {
5531
+ .c4p--about-modal .c4p--about-modal__logo {
5532
5532
  margin: var(--cds-spacing-05, 1rem);
5533
5533
  }
5534
5534
 
5535
- .exp--about-modal .exp--about-modal__header {
5535
+ .c4p--about-modal .c4p--about-modal__header {
5536
5536
  padding: 0 20% var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
5537
5537
  margin-bottom: 0;
5538
5538
  grid-row: auto;
5539
5539
  }
5540
5540
 
5541
- .exp--about-modal .exp--about-modal__title {
5541
+ .c4p--about-modal .c4p--about-modal__title {
5542
5542
  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
5543
5543
  font-weight: var(--cds-productive-heading-04-font-weight, 400);
5544
5544
  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
@@ -5546,7 +5546,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
5546
5546
  color: var(--cds-text-01, #161616);
5547
5547
  }
5548
5548
 
5549
- .exp--about-modal .exp--about-modal__body {
5549
+ .c4p--about-modal .c4p--about-modal__body {
5550
5550
  font-size: var(--cds-body-short-02-font-size, 1rem);
5551
5551
  font-weight: var(--cds-body-short-02-font-weight, 400);
5552
5552
  line-height: var(--cds-body-short-02-line-height, 1.375);
@@ -5558,37 +5558,37 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
5558
5558
  overflow-y: auto;
5559
5559
  }
5560
5560
 
5561
- .exp--about-modal.exp--about-modal--with-tabs .exp--about-modal__body {
5561
+ .c4p--about-modal.c4p--about-modal--with-tabs .c4p--about-modal__body {
5562
5562
  min-height: calc(var(--cds-layout-05, 4rem) + var(--cds-spacing-08, 2.5rem));
5563
5563
  margin-bottom: calc(var(--cds-spacing-09, 3rem) + var(--cds-spacing-08, 2.5rem));
5564
5564
  }
5565
5565
 
5566
- .exp--about-modal.exp--about-modal--with-tabs .bx--modal-content--overflow-indicator {
5566
+ .c4p--about-modal.c4p--about-modal--with-tabs .bx--modal-content--overflow-indicator {
5567
5567
  bottom: calc(var(--cds-spacing-09, 3rem) + var(--cds-spacing-08, 2.5rem));
5568
5568
  }
5569
5569
 
5570
- .exp--about-modal .exp--about-modal__links-container {
5570
+ .c4p--about-modal .c4p--about-modal__links-container {
5571
5571
  margin-top: var(--cds-spacing-05, 1rem);
5572
5572
  }
5573
5573
 
5574
- .exp--about-modal .exp--about-modal__links-container a + a {
5574
+ .c4p--about-modal .c4p--about-modal__links-container a + a {
5575
5575
  padding-left: var(--cds-spacing-03, 0.5rem);
5576
5576
  border-left: 1px solid var(--cds-text-01, #161616);
5577
5577
  margin-left: var(--cds-spacing-03, 0.5rem);
5578
5578
  }
5579
5579
 
5580
- .exp--about-modal .exp--about-modal__legal-text,
5581
- .exp--about-modal .exp--about-modal__copyright-text {
5580
+ .c4p--about-modal .c4p--about-modal__legal-text,
5581
+ .c4p--about-modal .c4p--about-modal__copyright-text {
5582
5582
  margin-top: var(--cds-spacing-07, 2rem);
5583
5583
  margin-bottom: 0;
5584
5584
  color: var(--cds-text-02, #525252);
5585
5585
  }
5586
5586
 
5587
- .exp--about-modal .exp--about-modal__copyright-text {
5587
+ .c4p--about-modal .c4p--about-modal__copyright-text {
5588
5588
  margin-top: var(--cds-spacing-05, 1rem);
5589
5589
  }
5590
5590
 
5591
- .exp--about-modal .exp--about-modal__footer {
5591
+ .c4p--about-modal .c4p--about-modal__footer {
5592
5592
  position: relative;
5593
5593
  height: 4.5rem;
5594
5594
  flex-direction: column;
@@ -5597,13 +5597,13 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
5597
5597
  color: var(--cds-inverse-01, #ffffff);
5598
5598
  }
5599
5599
 
5600
- .exp--about-modal .exp--about-modal__tab-container {
5600
+ .c4p--about-modal .c4p--about-modal__tab-container {
5601
5601
  position: absolute;
5602
5602
  bottom: 100%;
5603
5603
  }
5604
5604
 
5605
- .exp--about-modal .exp--about-modal__version-label,
5606
- .exp--about-modal .exp--about-modal__version-number {
5605
+ .c4p--about-modal .c4p--about-modal__version-label,
5606
+ .c4p--about-modal .c4p--about-modal__version-number {
5607
5607
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
5608
5608
  font-weight: var(--cds-body-short-01-font-weight, 400);
5609
5609
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -5614,7 +5614,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
5614
5614
  color: var(--cds-inverse-01, #ffffff);
5615
5615
  }
5616
5616
 
5617
- .exp--about-modal .exp--about-modal__version-label {
5617
+ .c4p--about-modal .c4p--about-modal__version-label {
5618
5618
  font-weight: 600;
5619
5619
  }
5620
5620
 
@@ -5716,13 +5716,13 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
5716
5716
  stroke-dashoffset: 0;
5717
5717
  }
5718
5718
  }
5719
- .exp--action-set {
5719
+ .c4p--action-set {
5720
5720
  align-items: stretch;
5721
5721
  justify-content: flex-end;
5722
5722
  background-color: var(--cds-ui-01, #f4f4f4);
5723
5723
  }
5724
5724
 
5725
- .exp--action-set .exp--action-set__action-button {
5725
+ .c4p--action-set .c4p--action-set__action-button {
5726
5726
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
5727
5727
  font-weight: var(--cds-body-short-01-font-weight, 400);
5728
5728
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -5734,47 +5734,47 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
5734
5734
  margin: 0;
5735
5735
  }
5736
5736
 
5737
- .exp--action-set.bx--btn-set .exp--action-set__action-button.bx--btn.bx--btn--expressive {
5737
+ .c4p--action-set.bx--btn-set .c4p--action-set__action-button.bx--btn.bx--btn--expressive {
5738
5738
  max-width: none;
5739
5739
  }
5740
5740
 
5741
- .exp--action-set:not(.exp--action-set--stacking) .exp--action-set__action-button--ghost {
5741
+ .c4p--action-set:not(.c4p--action-set--stacking) .c4p--action-set__action-button--ghost {
5742
5742
  padding-left: var(--cds-spacing-07, 2rem);
5743
5743
  }
5744
5744
 
5745
- .exp--action-set.exp--action-set--row-single.exp--action-set--md .exp--action-set__action-button,
5746
- .exp--action-set.exp--action-set--row-single .exp--action-set__action-button--ghost {
5745
+ .c4p--action-set.c4p--action-set--row-single.c4p--action-set--md .c4p--action-set__action-button,
5746
+ .c4p--action-set.c4p--action-set--row-single .c4p--action-set__action-button--ghost {
5747
5747
  flex: 0 0 100%;
5748
5748
  }
5749
5749
 
5750
- .exp--action-set.exp--action-set--row-double .exp--action-set__action-button--ghost {
5750
+ .c4p--action-set.c4p--action-set--row-double .c4p--action-set__action-button--ghost {
5751
5751
  flex: 1 1 75%;
5752
5752
  }
5753
5753
 
5754
- .exp--action-set.exp--action-set--row-single.exp--action-set--lg .exp--action-set__action-button:not(.exp--action-set__action-button--ghost),
5755
- .exp--action-set.exp--action-set--row-double.exp--action-set--md .exp--action-set__action-button,
5756
- .exp--action-set.exp--action-set--row-double.exp--action-set--lg .exp--action-set__action-button,
5757
- .exp--action-set.exp--action-set--row-triple .exp--action-set__action-button--ghost {
5754
+ .c4p--action-set.c4p--action-set--row-single.c4p--action-set--lg .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
5755
+ .c4p--action-set.c4p--action-set--row-double.c4p--action-set--md .c4p--action-set__action-button,
5756
+ .c4p--action-set.c4p--action-set--row-double.c4p--action-set--lg .c4p--action-set__action-button,
5757
+ .c4p--action-set.c4p--action-set--row-triple .c4p--action-set__action-button--ghost {
5758
5758
  flex: 0 1 50%;
5759
5759
  }
5760
5760
 
5761
- .exp--action-set.exp--action-set--row-triple .exp--action-set__action-button--ghost {
5761
+ .c4p--action-set.c4p--action-set--row-triple .c4p--action-set__action-button--ghost {
5762
5762
  flex: 1 1 50%;
5763
5763
  }
5764
5764
 
5765
- .exp--action-set.bx--btn-set.exp--action-set--row-triple.exp--action-set--lg .exp--action-set__action-button:not(.exp--action-set__action-button--ghost),
5766
- .exp--action-set.bx--btn-set.exp--action-set--xlg .exp--action-set__action-button:not(.exp--action-set__action-button--ghost),
5767
- .exp--action-set.bx--btn-set.exp--action-set--max .exp--action-set__action-button:not(.exp--action-set__action-button--ghost),
5768
- .exp--action-set.bx--btn-set.exp--action-set--row-quadruple .exp--action-set__action-button:not(.exp--action-set__action-button--ghost) {
5765
+ .c4p--action-set.bx--btn-set.c4p--action-set--row-triple.c4p--action-set--lg .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
5766
+ .c4p--action-set.bx--btn-set.c4p--action-set--xlg .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
5767
+ .c4p--action-set.bx--btn-set.c4p--action-set--max .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
5768
+ .c4p--action-set.bx--btn-set.c4p--action-set--row-quadruple .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost) {
5769
5769
  max-width: 14.5rem;
5770
5770
  flex: 0 1 25%;
5771
5771
  }
5772
5772
 
5773
- .exp--action-set.bx--btn-set.exp--action-set--row-quadruple .exp--action-set__action-button--ghost {
5773
+ .c4p--action-set.bx--btn-set.c4p--action-set--row-quadruple .c4p--action-set__action-button--ghost {
5774
5774
  flex: 1 1 25%;
5775
5775
  }
5776
5776
 
5777
- .exp--action-set .exp--action-set__action-button .bx--inline-loading {
5777
+ .c4p--action-set .c4p--action-set__action-button .bx--inline-loading {
5778
5778
  position: absolute;
5779
5779
  top: 0;
5780
5780
  right: 0;
@@ -5784,15 +5784,15 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
5784
5784
  /* stylelint-disable-line no-invalid-position-at-import-rule */
5785
5785
  /* stylelint-disable-line no-invalid-position-at-import-rule */
5786
5786
  /* stylelint-disable-line no-invalid-position-at-import-rule */
5787
- .exp--button-menu {
5787
+ .c4p--button-menu {
5788
5788
  min-width: 160px;
5789
5789
  }
5790
- .exp--button-menu .exp--button-menu__trigger {
5790
+ .c4p--button-menu .c4p--button-menu__trigger {
5791
5791
  width: 100%;
5792
5792
  padding: 0 var(--cds-spacing-05, 1rem);
5793
5793
  }
5794
5794
 
5795
- .exp--button-menu__options.bx--overflow-menu-options::after {
5795
+ .c4p--button-menu__options.bx--overflow-menu-options::after {
5796
5796
  content: initial;
5797
5797
  }
5798
5798
 
@@ -7683,51 +7683,51 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
7683
7683
  }
7684
7684
  }
7685
7685
  @media (prefers-reduced-motion: no-preference) {
7686
- .exp--cascade__element,
7687
- .exp--cascade__col {
7686
+ .c4p--cascade__element,
7687
+ .c4p--cascade__col {
7688
7688
  animation: 240ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 fade;
7689
7689
  animation-fill-mode: forwards;
7690
7690
  opacity: 0;
7691
7691
  }
7692
7692
  }
7693
7693
 
7694
- .exp--cascade__element:nth-child(n+1),
7695
- .exp--cascade__col-1 {
7694
+ .c4p--cascade__element:nth-child(n+1),
7695
+ .c4p--cascade__col-1 {
7696
7696
  animation-delay: 60ms;
7697
7697
  }
7698
7698
 
7699
- .exp--cascade__element:nth-child(n+2),
7700
- .exp--cascade__col-2 {
7699
+ .c4p--cascade__element:nth-child(n+2),
7700
+ .c4p--cascade__col-2 {
7701
7701
  animation-delay: 120ms;
7702
7702
  }
7703
7703
 
7704
- .exp--cascade__element:nth-child(n+3),
7705
- .exp--cascade__col-3 {
7704
+ .c4p--cascade__element:nth-child(n+3),
7705
+ .c4p--cascade__col-3 {
7706
7706
  animation-delay: 180ms;
7707
7707
  }
7708
7708
 
7709
- .exp--cascade__element:nth-child(n+4),
7710
- .exp--cascade__col-4 {
7709
+ .c4p--cascade__element:nth-child(n+4),
7710
+ .c4p--cascade__col-4 {
7711
7711
  animation-delay: 240ms;
7712
7712
  }
7713
7713
 
7714
- .exp--cascade__element:nth-child(n+5),
7715
- .exp--cascade__col-5 {
7714
+ .c4p--cascade__element:nth-child(n+5),
7715
+ .c4p--cascade__col-5 {
7716
7716
  animation-delay: 300ms;
7717
7717
  }
7718
7718
 
7719
- .exp--cascade__element:nth-child(n+6),
7720
- .exp--cascade__col-6 {
7719
+ .c4p--cascade__element:nth-child(n+6),
7720
+ .c4p--cascade__col-6 {
7721
7721
  animation-delay: 360ms;
7722
7722
  }
7723
7723
 
7724
- .exp--cascade__element:nth-child(n+7),
7725
- .exp--cascade__col-7 {
7724
+ .c4p--cascade__element:nth-child(n+7),
7725
+ .c4p--cascade__col-7 {
7726
7726
  animation-delay: 420ms;
7727
7727
  }
7728
7728
 
7729
- .exp--cascade__element:nth-child(n+8),
7730
- .exp--cascade__col-8 {
7729
+ .c4p--cascade__element:nth-child(n+8),
7730
+ .c4p--cascade__col-8 {
7731
7731
  animation-delay: 480ms;
7732
7732
  }
7733
7733
 
@@ -8246,45 +8246,6 @@ a.bx--overflow-menu-options__btn::before {
8246
8246
  margin-left: auto;
8247
8247
  }
8248
8248
 
8249
- /* stylelint-disable-line no-invalid-position-at-import-rule */
8250
- /* stylelint-disable-line no-invalid-position-at-import-rule */
8251
- /* stylelint-disable-line no-invalid-position-at-import-rule */
8252
- .exp-context-header {
8253
- display: flex;
8254
- width: 100%;
8255
- height: var(--cds-spacing-07, 2rem);
8256
- padding: 0 var(--cds-spacing-05, 1rem);
8257
- border-bottom: 0.0625rem solid var(--cds-ui-03, #e0e0e0);
8258
- background: var(--cds-ui-background, #ffffff);
8259
- }
8260
-
8261
- .exp-context-header--task,
8262
- .exp-context-header--name,
8263
- .exp-context-header--namespace,
8264
- .exp-context-header--separator {
8265
- font-size: var(--cds-label-01-font-size, 0.75rem);
8266
- font-weight: var(--cds-label-01-font-weight, 400);
8267
- line-height: var(--cds-label-01-line-height, 1.33333);
8268
- letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
8269
- display: inline-flex;
8270
- align-items: center;
8271
- }
8272
-
8273
- .exp-context-header--task {
8274
- padding-right: var(--cds-spacing-05, 1rem);
8275
- color: var(--cds-text-01, #161616);
8276
- }
8277
-
8278
- .exp-context-header--name,
8279
- .exp-context-header--namespace,
8280
- .exp-context-header--separator {
8281
- color: var(--cds-text-02, #525252);
8282
- }
8283
-
8284
- .exp-context-header--separator {
8285
- padding: 0 var(--cds-spacing-03, 0.5rem);
8286
- }
8287
-
8288
8249
  /* stylelint-disable-line no-invalid-position-at-import-rule */
8289
8250
  /* stylelint-disable-line no-invalid-position-at-import-rule */
8290
8251
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -11639,48 +11600,48 @@ a.bx--overflow-menu-options__btn::before {
11639
11600
  transform: translateX(calc(-1 * var(--cds-spacing-05, 1rem)));
11640
11601
  }
11641
11602
  }
11642
- .exp--create-influencer {
11603
+ .c4p--create-influencer {
11643
11604
  display: grid;
11644
11605
  height: 100%;
11645
11606
  grid-template-columns: 100%;
11646
11607
  grid-template-rows: 1fr auto;
11647
11608
  }
11648
11609
 
11649
- .exp--create-influencer__left-nav {
11610
+ .c4p--create-influencer__left-nav {
11650
11611
  grid-column: 1/-1;
11651
11612
  grid-row: 1/-1;
11652
11613
  overflow-y: auto;
11653
11614
  }
11654
11615
 
11655
- .exp--create-influencer__progress-indicator {
11616
+ .c4p--create-influencer__progress-indicator {
11656
11617
  padding: var(--cds-spacing-06, 1.5rem);
11657
11618
  }
11658
11619
 
11659
- .exp--create-influencer__view-all-toggle {
11620
+ .c4p--create-influencer__view-all-toggle {
11660
11621
  padding: var(--cds-spacing-06, 1.5rem);
11661
11622
  grid-column: 1/-1;
11662
11623
  grid-row: -1/-1;
11663
11624
  }
11664
11625
 
11665
- .exp--create-influencer__side-nav-opening,
11666
- .exp--create-influencer__progress-indicator-opening {
11626
+ .c4p--create-influencer__side-nav-opening,
11627
+ .c4p--create-influencer__progress-indicator-opening {
11667
11628
  animation: influencerMenuEntrance 240ms 1;
11668
11629
  animation-fill-mode: forwards;
11669
11630
  transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
11670
11631
  }
11671
11632
 
11672
- .exp--create-influencer__side-nav-closing,
11673
- .exp--create-influencer__progress-indicator-closing {
11633
+ .c4p--create-influencer__side-nav-closing,
11634
+ .c4p--create-influencer__progress-indicator-closing {
11674
11635
  animation: influencerMenuExit 240ms 1;
11675
11636
  animation-fill-mode: forwards;
11676
11637
  transition-timing-function: cubic-bezier(0.2, 0, 1, 0.9);
11677
11638
  }
11678
11639
 
11679
11640
  @media (prefers-reduced-motion) {
11680
- .exp--create-influencer__side-nav-opening,
11681
- .exp--create-influencer__progress-indicator-opening,
11682
- .exp--create-influencer__side-nav-closing,
11683
- .exp--create-influencer__progress-indicator-closing {
11641
+ .c4p--create-influencer__side-nav-opening,
11642
+ .c4p--create-influencer__progress-indicator-opening,
11643
+ .c4p--create-influencer__side-nav-closing,
11644
+ .c4p--create-influencer__progress-indicator-closing {
11684
11645
  animation: none;
11685
11646
  opacity: 1;
11686
11647
  }
@@ -11783,31 +11744,31 @@ a.bx--overflow-menu-options__btn::before {
11783
11744
  stroke-dashoffset: 0;
11784
11745
  }
11785
11746
  }
11786
- .exp--create-full-page .exp--create-full-page {
11747
+ .c4p--create-full-page .c4p--create-full-page {
11787
11748
  color: var(--cds-text-01, #161616);
11788
11749
  }
11789
11750
 
11790
- .exp--create-full-page .exp--create-full-page__content .bx--grid {
11751
+ .c4p--create-full-page .c4p--create-full-page__content .bx--grid {
11791
11752
  padding-top: var(--cds-spacing-06, 1.5rem);
11792
11753
  margin-right: 0;
11793
11754
  margin-left: 0;
11794
11755
  }
11795
11756
 
11796
- .exp--create-full-page .exp--create-full-page__step--hidden-step,
11797
- .exp--create-full-page .exp--create-full-page__step--hidden-section {
11757
+ .c4p--create-full-page .c4p--create-full-page__step--hidden-step,
11758
+ .c4p--create-full-page .c4p--create-full-page__step--hidden-section {
11798
11759
  display: none;
11799
11760
  }
11800
11761
 
11801
- .exp--create-full-page .exp--create-full-page__step--visible-section {
11762
+ .c4p--create-full-page .c4p--create-full-page__step--visible-section {
11802
11763
  display: block;
11803
11764
  }
11804
11765
 
11805
- .exp--create-full-page .exp--create-full-page__step--visible-step {
11766
+ .c4p--create-full-page .c4p--create-full-page__step--visible-step {
11806
11767
  opacity: 1;
11807
11768
  }
11808
11769
 
11809
- .exp--create-full-page .exp--create-full-page__section-subtitle,
11810
- .exp--create-full-page .exp--create-full-page__step-subtitle {
11770
+ .c4p--create-full-page .c4p--create-full-page__section-subtitle,
11771
+ .c4p--create-full-page .c4p--create-full-page__step-subtitle {
11811
11772
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
11812
11773
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
11813
11774
  line-height: var(--cds-productive-heading-01-line-height, 1.28572);
@@ -11816,8 +11777,8 @@ a.bx--overflow-menu-options__btn::before {
11816
11777
  margin-bottom: var(--cds-spacing-03, 0.5rem);
11817
11778
  }
11818
11779
 
11819
- .exp--create-full-page .exp--create-full-page__section-description,
11820
- .exp--create-full-page .exp--create-full-page__step-description {
11780
+ .c4p--create-full-page .c4p--create-full-page__section-description,
11781
+ .c4p--create-full-page .c4p--create-full-page__step-description {
11821
11782
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
11822
11783
  font-weight: var(--cds-body-long-01-font-weight, 400);
11823
11784
  line-height: var(--cds-body-long-01-line-height, 1.42857);
@@ -11826,45 +11787,45 @@ a.bx--overflow-menu-options__btn::before {
11826
11787
  margin-bottom: var(--cds-spacing-06, 1.5rem);
11827
11788
  }
11828
11789
 
11829
- .exp--create-full-page .bx--fieldset {
11790
+ .c4p--create-full-page .bx--fieldset {
11830
11791
  margin-bottom: 0;
11831
11792
  }
11832
11793
 
11833
- .exp--create-full-page .exp--create-full-page__step-fieldset > * {
11794
+ .c4p--create-full-page .c4p--create-full-page__step-fieldset > * {
11834
11795
  margin-bottom: var(--cds-spacing-05, 1rem);
11835
11796
  }
11836
11797
 
11837
- .exp--create-full-page .bx--modal-close {
11798
+ .c4p--create-full-page .bx--modal-close {
11838
11799
  display: none;
11839
11800
  }
11840
11801
 
11841
- .exp--create-full-page {
11802
+ .c4p--create-full-page {
11842
11803
  display: flex;
11843
11804
  height: 100vh;
11844
11805
  padding: 0;
11845
11806
  margin: 0;
11846
11807
  }
11847
11808
 
11848
- .exp--create-full-page .exp--create-full-page__left-nav {
11809
+ .c4p--create-full-page .c4p--create-full-page__left-nav {
11849
11810
  grid-column: 1/-1;
11850
11811
  grid-row: 1/-1;
11851
11812
  overflow-y: auto;
11852
11813
  }
11853
11814
 
11854
- .exp--create-full-page .exp--create-full-page__body {
11815
+ .c4p--create-full-page .c4p--create-full-page__body {
11855
11816
  display: flex;
11856
11817
  flex-direction: column;
11857
11818
  flex-grow: 1;
11858
11819
  }
11859
11820
 
11860
- .exp--create-full-page .exp--create-full-page__main {
11821
+ .c4p--create-full-page .c4p--create-full-page__main {
11861
11822
  display: flex;
11862
11823
  max-height: 100%;
11863
11824
  flex-direction: column;
11864
11825
  flex-grow: 1;
11865
11826
  }
11866
11827
 
11867
- .exp--create-full-page .exp--create-full-page__content {
11828
+ .c4p--create-full-page .c4p--create-full-page__content {
11868
11829
  overflow: auto;
11869
11830
  flex-grow: 1;
11870
11831
  background-color: var(--cds-ui-background, #ffffff);
@@ -11872,12 +11833,12 @@ a.bx--overflow-menu-options__btn::before {
11872
11833
  overflow-x: hidden;
11873
11834
  }
11874
11835
 
11875
- .exp--create-full-page .exp--create-full-page__step {
11836
+ .c4p--create-full-page .c4p--create-full-page__step {
11876
11837
  position: relative;
11877
11838
  padding-bottom: var(--cds-spacing-07, 2rem);
11878
11839
  }
11879
11840
 
11880
- .exp--create-full-page .bx--side-nav--ux {
11841
+ .c4p--create-full-page .bx--side-nav--ux {
11881
11842
  top: 0;
11882
11843
  height: min-content;
11883
11844
  padding-top: 0;
@@ -11887,14 +11848,14 @@ a.bx--overflow-menu-options__btn::before {
11887
11848
  overflow-x: auto;
11888
11849
  }
11889
11850
 
11890
- .exp--create-full-page .exp--create-full-page__section-divider {
11851
+ .c4p--create-full-page .c4p--create-full-page__section-divider {
11891
11852
  position: relative;
11892
11853
  display: block;
11893
11854
  width: 0;
11894
11855
  height: 1px;
11895
11856
  margin: var(--cds-spacing-07, 2rem) calc(-1 * var(--cds-spacing-08, 2.5rem)) var(--cds-spacing-07, 2rem) calc(-1 * var(--cds-spacing-08, 2.5rem));
11896
11857
  }
11897
- .exp--create-full-page .exp--create-full-page__section-divider::after {
11858
+ .c4p--create-full-page .c4p--create-full-page__section-divider::after {
11898
11859
  position: absolute;
11899
11860
  top: 0;
11900
11861
  left: 0;
@@ -11904,8 +11865,8 @@ a.bx--overflow-menu-options__btn::before {
11904
11865
  content: "";
11905
11866
  }
11906
11867
 
11907
- .exp--create-full-page .exp--create-full-page__step-title,
11908
- .exp--create-full-page .exp--create-full-page__section-title {
11868
+ .c4p--create-full-page .c4p--create-full-page__step-title,
11869
+ .c4p--create-full-page .c4p--create-full-page__section-title {
11909
11870
  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
11910
11871
  font-weight: var(--cds-productive-heading-04-font-weight, 400);
11911
11872
  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
@@ -11914,7 +11875,7 @@ a.bx--overflow-menu-options__btn::before {
11914
11875
  margin-bottom: var(--cds-spacing-05, 1rem);
11915
11876
  }
11916
11877
 
11917
- .exp--create-full-page .exp--create-full-page__influencer {
11878
+ .c4p--create-full-page .c4p--create-full-page__influencer {
11918
11879
  display: grid;
11919
11880
  flex: 0 0 257px;
11920
11881
  border-right: 1px solid var(--cds-ui-03, #e0e0e0);
@@ -11923,17 +11884,17 @@ a.bx--overflow-menu-options__btn::before {
11923
11884
  grid-template-rows: 1fr auto;
11924
11885
  }
11925
11886
 
11926
- .exp--create-full-page .exp--create-full-page__progress-indicator {
11887
+ .c4p--create-full-page .c4p--create-full-page__progress-indicator {
11927
11888
  padding: var(--cds-spacing-06, 1.5rem);
11928
11889
  }
11929
11890
 
11930
- .exp--create-full-page .exp--create-full-page__influencer-toggle {
11891
+ .c4p--create-full-page .c4p--create-full-page__influencer-toggle {
11931
11892
  padding: var(--cds-spacing-06, 1.5rem);
11932
11893
  grid-column: 1/-1;
11933
11894
  grid-row: -1/-1;
11934
11895
  }
11935
11896
 
11936
- .exp--create-full-page .exp--create-full-page__buttons {
11897
+ .c4p--create-full-page .c4p--create-full-page__buttons {
11937
11898
  border-top: 1px solid var(--cds-ui-03, #e0e0e0);
11938
11899
  }
11939
11900
 
@@ -12056,37 +12017,37 @@ a.bx--overflow-menu-options__btn::before {
12056
12017
  /* stylelint-disable-line no-invalid-position-at-import-rule */
12057
12018
  /* stylelint-disable-line no-invalid-position-at-import-rule */
12058
12019
  /* stylelint-disable-line no-invalid-position-at-import-rule */
12059
- .exp--create-modal {
12020
+ .c4p--create-modal {
12060
12021
  background-color: var(--cds-ui-background, #ffffff);
12061
12022
  }
12062
12023
 
12063
- .exp--create-modal .bx--modal-close {
12024
+ .c4p--create-modal .bx--modal-close {
12064
12025
  display: none;
12065
12026
  }
12066
12027
 
12067
12028
  @media (min-width: 42rem) {
12068
- .exp--create-modal .bx--modal-container {
12029
+ .c4p--create-modal .bx--modal-container {
12069
12030
  max-height: 95%;
12070
12031
  }
12071
12032
  }
12072
12033
  @media (min-width: 66rem) {
12073
- .exp--create-modal .bx--modal-container {
12034
+ .c4p--create-modal .bx--modal-container {
12074
12035
  max-height: 95%;
12075
12036
  }
12076
12037
  }
12077
12038
 
12078
- .exp--create-modal .bx--modal-header {
12039
+ .c4p--create-modal .bx--modal-header {
12079
12040
  padding-right: 20%;
12080
12041
  padding-bottom: var(--cds-spacing-03, 0.5rem);
12081
12042
  border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
12082
12043
  margin-bottom: 0;
12083
12044
  }
12084
12045
 
12085
- .exp--create-modal .bx--modal-footer .bx--btn {
12046
+ .c4p--create-modal .bx--modal-footer .bx--btn {
12086
12047
  max-width: none;
12087
12048
  }
12088
12049
 
12089
- .exp--create-modal__title {
12050
+ .c4p--create-modal__title {
12090
12051
  font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
12091
12052
  font-weight: var(--cds-productive-heading-03-font-weight, 400);
12092
12053
  line-height: var(--cds-productive-heading-03-line-height, 1.4);
@@ -12094,7 +12055,7 @@ a.bx--overflow-menu-options__btn::before {
12094
12055
  margin-bottom: var(--cds-spacing-02, 0.25rem);
12095
12056
  }
12096
12057
 
12097
- .exp--create-modal__subtitle {
12058
+ .c4p--create-modal__subtitle {
12098
12059
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
12099
12060
  font-weight: var(--cds-body-short-01-font-weight, 400);
12100
12061
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -12103,7 +12064,7 @@ a.bx--overflow-menu-options__btn::before {
12103
12064
  color: var(--cds-text-02, #525252);
12104
12065
  }
12105
12066
 
12106
- .exp--create-modal__description {
12067
+ .c4p--create-modal__description {
12107
12068
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
12108
12069
  font-weight: var(--cds-body-long-01-font-weight, 400);
12109
12070
  line-height: var(--cds-body-long-01-line-height, 1.42857);
@@ -12112,15 +12073,15 @@ a.bx--overflow-menu-options__btn::before {
12112
12073
  margin: var(--cds-spacing-03, 0.5rem) 0 var(--cds-spacing-05, 1rem) 0;
12113
12074
  }
12114
12075
 
12115
- .exp--create-modal__form .bx--fieldset {
12076
+ .c4p--create-modal__form .bx--fieldset {
12116
12077
  min-width: 100%;
12117
12078
  margin-bottom: 0;
12118
12079
  }
12119
12080
 
12120
- .exp--create-modal__form > * {
12081
+ .c4p--create-modal__form > * {
12121
12082
  margin-bottom: var(--cds-spacing-05, 1rem);
12122
12083
  }
12123
- .exp--create-modal__form > *:last-child {
12084
+ .c4p--create-modal__form > *:last-child {
12124
12085
  margin-bottom: 0;
12125
12086
  }
12126
12087
 
@@ -12320,17 +12281,17 @@ a.bx--overflow-menu-options__btn::before {
12320
12281
  transform: translateX(30rem);
12321
12282
  }
12322
12283
  }
12323
- .exp--side-panel__container {
12324
- --exp--side-panel--subtitle-opacity: 1;
12325
- --exp--side-panel--title-container-height: 0;
12326
- --exp--side-panel--title-text-height: 0;
12327
- --exp--side-panel--subtitle-container-height: 0;
12328
- --exp--side-panel--action-bar-container-height: 0;
12329
- --exp--side-panel--divider-opacity: 0;
12330
- --exp--side-panel--title-y-position: 0;
12331
- --exp--side-panel--content-bottom-padding: var(--cds-spacing-10, 4rem);
12332
- --exp--side-panel--collapsed-title-y-position: 1rem;
12333
- --exp--side-panel--label-text-height: 0;
12284
+ .c4p--side-panel__container {
12285
+ --c4p--side-panel--subtitle-opacity: 1;
12286
+ --c4p--side-panel--title-container-height: 0;
12287
+ --c4p--side-panel--title-text-height: 0;
12288
+ --c4p--side-panel--subtitle-container-height: 0;
12289
+ --c4p--side-panel--action-bar-container-height: 0;
12290
+ --c4p--side-panel--divider-opacity: 0;
12291
+ --c4p--side-panel--title-y-position: 0;
12292
+ --c4p--side-panel--content-bottom-padding: var(--cds-spacing-10, 4rem);
12293
+ --c4p--side-panel--collapsed-title-y-position: 1rem;
12294
+ --c4p--side-panel--label-text-height: 0;
12334
12295
  position: fixed;
12335
12296
  z-index: 9000;
12336
12297
  top: var(--cds-spacing-09, 3rem);
@@ -12341,18 +12302,18 @@ a.bx--overflow-menu-options__btn::before {
12341
12302
  transition: transform 240ms;
12342
12303
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
12343
12304
  }
12344
- .exp--side-panel__container.exp--side-panel__container--xs {
12305
+ .c4p--side-panel__container.c4p--side-panel__container--xs {
12345
12306
  min-width: 16rem;
12346
12307
  max-width: 16rem;
12347
12308
  }
12348
- .exp--side-panel__container.exp--side-panel__container--xs .exp--side-panel__title-container.exp--side-panel__title-container--no-title-animation,
12349
- .exp--side-panel__container.exp--side-panel__container--xs .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation,
12350
- .exp--side-panel__container.exp--side-panel__container--xs .exp--side-panel__action-toolbar.exp--side-panel__action-toolbar-no-animation,
12351
- .exp--side-panel__container.exp--side-panel__container--xs .exp--side-panel__actions-container.exp--action-set--xs {
12309
+ .c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
12310
+ .c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
12311
+ .c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation,
12312
+ .c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__actions-container.c4p--action-set--xs {
12352
12313
  min-width: 16rem;
12353
12314
  max-width: 16rem;
12354
12315
  }
12355
- .exp--side-panel__container.exp--side-panel__container-right-placement.exp--side-panel__container--xs {
12316
+ .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--xs {
12356
12317
  min-width: 16rem;
12357
12318
  max-width: 16rem;
12358
12319
  right: 0;
@@ -12368,7 +12329,7 @@ a.bx--overflow-menu-options__btn::before {
12368
12329
  transform: translateX(0);
12369
12330
  }
12370
12331
  }
12371
- .exp--side-panel__container.exp--side-panel__container-left-placement.exp--side-panel__container--xs {
12332
+ .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--xs {
12372
12333
  min-width: 16rem;
12373
12334
  max-width: 16rem;
12374
12335
  left: 0;
@@ -12384,18 +12345,18 @@ a.bx--overflow-menu-options__btn::before {
12384
12345
  transform: translateX(0);
12385
12346
  }
12386
12347
  }
12387
- .exp--side-panel__container.exp--side-panel__container--sm {
12348
+ .c4p--side-panel__container.c4p--side-panel__container--sm {
12388
12349
  min-width: 20rem;
12389
12350
  max-width: 20rem;
12390
12351
  }
12391
- .exp--side-panel__container.exp--side-panel__container--sm .exp--side-panel__title-container.exp--side-panel__title-container--no-title-animation,
12392
- .exp--side-panel__container.exp--side-panel__container--sm .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation,
12393
- .exp--side-panel__container.exp--side-panel__container--sm .exp--side-panel__action-toolbar.exp--side-panel__action-toolbar-no-animation,
12394
- .exp--side-panel__container.exp--side-panel__container--sm .exp--side-panel__actions-container.exp--action-set--sm {
12352
+ .c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
12353
+ .c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
12354
+ .c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation,
12355
+ .c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__actions-container.c4p--action-set--sm {
12395
12356
  min-width: 20rem;
12396
12357
  max-width: 20rem;
12397
12358
  }
12398
- .exp--side-panel__container.exp--side-panel__container-right-placement.exp--side-panel__container--sm {
12359
+ .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--sm {
12399
12360
  min-width: 20rem;
12400
12361
  max-width: 20rem;
12401
12362
  right: 0;
@@ -12411,7 +12372,7 @@ a.bx--overflow-menu-options__btn::before {
12411
12372
  transform: translateX(0);
12412
12373
  }
12413
12374
  }
12414
- .exp--side-panel__container.exp--side-panel__container-left-placement.exp--side-panel__container--sm {
12375
+ .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--sm {
12415
12376
  min-width: 20rem;
12416
12377
  max-width: 20rem;
12417
12378
  left: 0;
@@ -12427,18 +12388,18 @@ a.bx--overflow-menu-options__btn::before {
12427
12388
  transform: translateX(0);
12428
12389
  }
12429
12390
  }
12430
- .exp--side-panel__container.exp--side-panel__container--md {
12391
+ .c4p--side-panel__container.c4p--side-panel__container--md {
12431
12392
  min-width: 30rem;
12432
12393
  max-width: 30rem;
12433
12394
  }
12434
- .exp--side-panel__container.exp--side-panel__container--md .exp--side-panel__title-container.exp--side-panel__title-container--no-title-animation,
12435
- .exp--side-panel__container.exp--side-panel__container--md .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation,
12436
- .exp--side-panel__container.exp--side-panel__container--md .exp--side-panel__action-toolbar.exp--side-panel__action-toolbar-no-animation,
12437
- .exp--side-panel__container.exp--side-panel__container--md .exp--side-panel__actions-container.exp--action-set--md {
12395
+ .c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
12396
+ .c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
12397
+ .c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation,
12398
+ .c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__actions-container.c4p--action-set--md {
12438
12399
  min-width: 30rem;
12439
12400
  max-width: 30rem;
12440
12401
  }
12441
- .exp--side-panel__container.exp--side-panel__container-right-placement.exp--side-panel__container--md {
12402
+ .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--md {
12442
12403
  min-width: 30rem;
12443
12404
  max-width: 30rem;
12444
12405
  right: 0;
@@ -12454,7 +12415,7 @@ a.bx--overflow-menu-options__btn::before {
12454
12415
  transform: translateX(0);
12455
12416
  }
12456
12417
  }
12457
- .exp--side-panel__container.exp--side-panel__container-left-placement.exp--side-panel__container--md {
12418
+ .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--md {
12458
12419
  min-width: 30rem;
12459
12420
  max-width: 30rem;
12460
12421
  left: 0;
@@ -12470,18 +12431,18 @@ a.bx--overflow-menu-options__btn::before {
12470
12431
  transform: translateX(0);
12471
12432
  }
12472
12433
  }
12473
- .exp--side-panel__container.exp--side-panel__container--lg {
12434
+ .c4p--side-panel__container.c4p--side-panel__container--lg {
12474
12435
  min-width: 40rem;
12475
12436
  max-width: 40rem;
12476
12437
  }
12477
- .exp--side-panel__container.exp--side-panel__container--lg .exp--side-panel__title-container.exp--side-panel__title-container--no-title-animation,
12478
- .exp--side-panel__container.exp--side-panel__container--lg .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation,
12479
- .exp--side-panel__container.exp--side-panel__container--lg .exp--side-panel__action-toolbar.exp--side-panel__action-toolbar-no-animation,
12480
- .exp--side-panel__container.exp--side-panel__container--lg .exp--side-panel__actions-container.exp--action-set--lg {
12438
+ .c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
12439
+ .c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
12440
+ .c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation,
12441
+ .c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__actions-container.c4p--action-set--lg {
12481
12442
  min-width: 40rem;
12482
12443
  max-width: 40rem;
12483
12444
  }
12484
- .exp--side-panel__container.exp--side-panel__container-right-placement.exp--side-panel__container--lg {
12445
+ .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--lg {
12485
12446
  min-width: 40rem;
12486
12447
  max-width: 40rem;
12487
12448
  right: 0;
@@ -12497,7 +12458,7 @@ a.bx--overflow-menu-options__btn::before {
12497
12458
  transform: translateX(0);
12498
12459
  }
12499
12460
  }
12500
- .exp--side-panel__container.exp--side-panel__container-left-placement.exp--side-panel__container--lg {
12461
+ .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--lg {
12501
12462
  min-width: 40rem;
12502
12463
  max-width: 40rem;
12503
12464
  left: 0;
@@ -12513,18 +12474,18 @@ a.bx--overflow-menu-options__btn::before {
12513
12474
  transform: translateX(0);
12514
12475
  }
12515
12476
  }
12516
- .exp--side-panel__container.exp--side-panel__container--max {
12477
+ .c4p--side-panel__container.c4p--side-panel__container--max {
12517
12478
  min-width: 75%;
12518
12479
  max-width: 75%;
12519
12480
  }
12520
- .exp--side-panel__container.exp--side-panel__container--max .exp--side-panel__title-container.exp--side-panel__title-container--no-title-animation,
12521
- .exp--side-panel__container.exp--side-panel__container--max .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation,
12522
- .exp--side-panel__container.exp--side-panel__container--max .exp--side-panel__action-toolbar.exp--side-panel__action-toolbar-no-animation,
12523
- .exp--side-panel__container.exp--side-panel__container--max .exp--side-panel__actions-container.exp--action-set--max {
12481
+ .c4p--side-panel__container.c4p--side-panel__container--max .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
12482
+ .c4p--side-panel__container.c4p--side-panel__container--max .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
12483
+ .c4p--side-panel__container.c4p--side-panel__container--max .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation,
12484
+ .c4p--side-panel__container.c4p--side-panel__container--max .c4p--side-panel__actions-container.c4p--action-set--max {
12524
12485
  min-width: 75%;
12525
12486
  max-width: 75%;
12526
12487
  }
12527
- .exp--side-panel__container.exp--side-panel__container-right-placement.exp--side-panel__container--max {
12488
+ .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--max {
12528
12489
  min-width: 75%;
12529
12490
  max-width: 75%;
12530
12491
  right: 0;
@@ -12540,7 +12501,7 @@ a.bx--overflow-menu-options__btn::before {
12540
12501
  transform: translateX(0);
12541
12502
  }
12542
12503
  }
12543
- .exp--side-panel__container.exp--side-panel__container-left-placement.exp--side-panel__container--max {
12504
+ .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--max {
12544
12505
  min-width: 75%;
12545
12506
  max-width: 75%;
12546
12507
  left: 0;
@@ -12556,10 +12517,10 @@ a.bx--overflow-menu-options__btn::before {
12556
12517
  transform: translateX(0);
12557
12518
  }
12558
12519
  }
12559
- .exp--side-panel__container.exp--side-panel__container-with-action-toolbar.exp--side-panel__with-condensed-header .exp--side-panel__title-container::before {
12520
+ .c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__title-container::before {
12560
12521
  content: none;
12561
12522
  }
12562
- .exp--side-panel__container.exp--side-panel__container-with-action-toolbar.exp--side-panel__with-condensed-header .exp--side-panel__action-toolbar::before {
12523
+ .c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__action-toolbar::before {
12563
12524
  position: absolute;
12564
12525
  bottom: 0;
12565
12526
  left: 0;
@@ -12567,20 +12528,20 @@ a.bx--overflow-menu-options__btn::before {
12567
12528
  height: 1px;
12568
12529
  background-color: var(--cds-decorative-01, #e0e0e0);
12569
12530
  content: "";
12570
- opacity: var(--exp--side-panel--divider-opacity);
12531
+ opacity: var(--c4p--side-panel--divider-opacity);
12571
12532
  }
12572
- .exp--side-panel__container.exp--side-panel__container-without-overlay {
12533
+ .c4p--side-panel__container.c4p--side-panel__container-without-overlay {
12573
12534
  box-shadow: 0 var(--cds-spacing-01, 0.125rem) var(--cds-spacing-02, 0.25rem) var(--cds-overlay-01, rgba(22, 22, 22, 0.5));
12574
12535
  }
12575
- .exp--side-panel__container .exp--side-panel__title-container {
12536
+ .c4p--side-panel__container .c4p--side-panel__title-container {
12576
12537
  position: sticky;
12577
12538
  z-index: 4;
12578
12539
  top: 0;
12579
- height: calc(var(--exp--side-panel--title-container-height) - var(--exp--side-panel--label-text-height));
12540
+ height: calc(var(--c4p--side-panel--title-container-height) - var(--c4p--side-panel--label-text-height));
12580
12541
  padding: var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
12581
12542
  background-color: var(--cds-ui-01, #f4f4f4);
12582
12543
  }
12583
- .exp--side-panel__container .exp--side-panel__title-container::before {
12544
+ .c4p--side-panel__container .c4p--side-panel__title-container::before {
12584
12545
  position: absolute;
12585
12546
  bottom: 0;
12586
12547
  left: 0;
@@ -12588,34 +12549,34 @@ a.bx--overflow-menu-options__btn::before {
12588
12549
  height: 1px;
12589
12550
  background-color: var(--cds-decorative-01, #e0e0e0);
12590
12551
  content: "";
12591
- opacity: var(--exp--side-panel--divider-opacity);
12552
+ opacity: var(--c4p--side-panel--divider-opacity);
12592
12553
  }
12593
- .exp--side-panel__container .exp--side-panel__title-container.exp--side-panel__on-detail-step .exp--side-panel__collapsed-title-text {
12554
+ .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__on-detail-step .c4p--side-panel__collapsed-title-text {
12594
12555
  top: var(--cds-spacing-09, 3rem);
12595
12556
  }
12596
- .exp--side-panel__container .exp--side-panel__title-container.exp--side-panel__title-container-without-title {
12557
+ .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container-without-title {
12597
12558
  padding: 0;
12598
12559
  }
12599
- .exp--side-panel__container .exp--side-panel__title-container.exp--side-panel__title-container-without-title.exp--side-panel__on-detail-step-without-title {
12560
+ .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container-without-title.c4p--side-panel__on-detail-step-without-title {
12600
12561
  height: calc(var(--cds-spacing-08, 2.5rem) + var(--cds-spacing-02, 0.25rem));
12601
12562
  padding: var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
12602
12563
  }
12603
- .exp--side-panel__container .exp--side-panel__title-container.exp--side-panel__title-container-without-title::before {
12564
+ .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container-without-title::before {
12604
12565
  background-color: transparent;
12605
12566
  }
12606
- .exp--side-panel__container.exp--side-panel__container-is-animating {
12567
+ .c4p--side-panel__container.c4p--side-panel__container-is-animating {
12607
12568
  pointer-events: none;
12608
12569
  }
12609
- .exp--side-panel__container.exp--side-panel__container-is-animating .exp--side-panel__title-container.exp--side-panel__title-container--no-title-animation {
12570
+ .c4p--side-panel__container.c4p--side-panel__container-is-animating .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
12610
12571
  top: 0;
12611
12572
  }
12612
- .exp--side-panel__container.exp--side-panel__container-is-animating .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation {
12613
- top: var(--exp--side-panel--title-text-height);
12573
+ .c4p--side-panel__container.c4p--side-panel__container-is-animating .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation {
12574
+ top: var(--c4p--side-panel--title-text-height);
12614
12575
  }
12615
- .exp--side-panel__container.exp--side-panel__container-is-animating .exp--side-panel__action-toolbar.exp--side-panel__action-toolbar-no-animation {
12616
- top: calc(var(--exp--side-panel--title-text-height) + var(--exp--side-panel--subtitle-container-height));
12576
+ .c4p--side-panel__container.c4p--side-panel__container-is-animating .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
12577
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height));
12617
12578
  }
12618
- .exp--side-panel__container .exp--side-panel__title-text {
12579
+ .c4p--side-panel__container .c4p--side-panel__title-text {
12619
12580
  font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
12620
12581
  font-weight: var(--cds-productive-heading-03-font-weight, 400);
12621
12582
  line-height: var(--cds-productive-heading-03-line-height, 1.4);
@@ -12628,22 +12589,22 @@ a.bx--overflow-menu-options__btn::before {
12628
12589
  position: inherit;
12629
12590
  z-index: 4;
12630
12591
  background-color: var(--cds-ui-01, #f4f4f4);
12631
- opacity: var(--exp--side-panel--subtitle-opacity);
12632
- transform: translateY(var(--exp--side-panel--title-y-position));
12592
+ opacity: var(--c4p--side-panel--subtitle-opacity);
12593
+ transform: translateY(var(--c4p--side-panel--title-y-position));
12633
12594
  }
12634
- .exp--side-panel__container .exp--side-panel__label-text {
12595
+ .c4p--side-panel__container .c4p--side-panel__label-text {
12635
12596
  font-size: var(--cds-label-01-font-size, 0.75rem);
12636
12597
  font-weight: var(--cds-label-01-font-weight, 400);
12637
12598
  line-height: var(--cds-label-01-line-height, 1.33333);
12638
12599
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
12639
12600
  overflow: hidden;
12640
12601
  padding-right: var(--cds-spacing-05, 1rem);
12641
- opacity: var(--exp--side-panel--subtitle-opacity);
12602
+ opacity: var(--c4p--side-panel--subtitle-opacity);
12642
12603
  text-overflow: ellipsis;
12643
- transform: translateY(var(--exp--side-panel--title-y-position));
12604
+ transform: translateY(var(--c4p--side-panel--title-y-position));
12644
12605
  white-space: nowrap;
12645
12606
  }
12646
- .exp--side-panel__container .exp--side-panel__collapsed-title-text {
12607
+ .c4p--side-panel__container .c4p--side-panel__collapsed-title-text {
12647
12608
  font-size: var(--cds-productive-heading-02-font-size, 1rem);
12648
12609
  font-weight: var(--cds-productive-heading-02-font-weight, 600);
12649
12610
  line-height: var(--cds-productive-heading-02-line-height, 1.375);
@@ -12655,10 +12616,10 @@ a.bx--overflow-menu-options__btn::before {
12655
12616
  -webkit-line-clamp: 2;
12656
12617
  position: absolute;
12657
12618
  top: var(--cds-spacing-05, 1rem);
12658
- opacity: var(--exp--side-panel--divider-opacity);
12659
- transform: translateY(var(--exp--side-panel--collapsed-title-y-position));
12619
+ opacity: var(--c4p--side-panel--divider-opacity);
12620
+ transform: translateY(var(--c4p--side-panel--collapsed-title-y-position));
12660
12621
  }
12661
- .exp--side-panel__container .exp--side-panel__subtitle-text {
12622
+ .c4p--side-panel__container .c4p--side-panel__subtitle-text {
12662
12623
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
12663
12624
  font-weight: var(--cds-body-short-01-font-weight, 400);
12664
12625
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -12667,65 +12628,65 @@ a.bx--overflow-menu-options__btn::before {
12667
12628
  padding: 0 var(--cds-spacing-09, 3rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem);
12668
12629
  -webkit-box-orient: vertical;
12669
12630
  -webkit-line-clamp: 3;
12670
- opacity: var(--exp--side-panel--subtitle-opacity);
12631
+ opacity: var(--c4p--side-panel--subtitle-opacity);
12671
12632
  }
12672
- .exp--side-panel__container .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation {
12633
+ .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation {
12673
12634
  position: fixed;
12674
12635
  z-index: 2;
12675
- top: calc(var(--exp--side-panel--title-text-height) + var(--cds-spacing-09, 3rem));
12636
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--cds-spacing-09, 3rem));
12676
12637
  background-color: var(--cds-ui-01, #f4f4f4);
12677
12638
  }
12678
- .exp--side-panel__container .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation.exp--side-panel__subtitle-text-is-animating {
12679
- top: var(--exp--side-panel--title-text-height);
12639
+ .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation.c4p--side-panel__subtitle-text-is-animating {
12640
+ top: var(--c4p--side-panel--title-text-height);
12680
12641
  }
12681
- .exp--side-panel__container .exp--side-panel__subtitle-text.exp--side-panel__subtitle-without-title {
12642
+ .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-without-title {
12682
12643
  padding-top: var(--cds-spacing-05, 1rem);
12683
12644
  padding-right: var(--cds-spacing-09, 3rem);
12684
12645
  }
12685
- .exp--side-panel__container .exp--side-panel__title-container.exp--side-panel__title-container--no-title-animation.exp--side-panel__title-container-is-animating {
12646
+ .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation.c4p--side-panel__title-container-is-animating {
12686
12647
  top: 0;
12687
12648
  }
12688
- .exp--side-panel__container .exp--side-panel__title-container.exp--side-panel__title-container--no-title-animation {
12649
+ .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
12689
12650
  position: fixed;
12690
12651
  top: var(--cds-spacing-09, 3rem);
12691
- height: var(--exp--side-panel--title-text-height);
12652
+ height: var(--c4p--side-panel--title-text-height);
12692
12653
  }
12693
- .exp--side-panel__container .exp--side-panel__inner-content {
12654
+ .c4p--side-panel__container .c4p--side-panel__inner-content {
12694
12655
  overflow: auto;
12695
12656
  height: calc(100vh - 3rem);
12696
- margin-top: calc(var(--exp--side-panel--title-text-height) + var(--exp--side-panel--subtitle-container-height) + var(--exp--side-panel--action-bar-container-height));
12657
+ margin-top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height) + var(--c4p--side-panel--action-bar-container-height));
12697
12658
  overflow-x: hidden;
12698
12659
  }
12699
- .exp--side-panel__container .exp--side-panel__inner-content-with-actions {
12700
- height: calc(100vh - (var(--exp--side-panel--content-bottom-padding) + 2rem));
12660
+ .c4p--side-panel__container .c4p--side-panel__inner-content-with-actions {
12661
+ height: calc(100vh - (var(--c4p--side-panel--content-bottom-padding) + 2rem));
12701
12662
  }
12702
- .exp--side-panel__container .exp--side-panel__inner-content.exp--side-panel__static-inner-content {
12703
- height: calc(100vh - (var(--exp--side-panel--title-text-height) + var(--exp--side-panel--subtitle-container-height) + var(--exp--side-panel--action-bar-container-height)) + -1 * (var(--cds-spacing-09, 3rem) + var(--cds-spacing-10, 4rem)));
12663
+ .c4p--side-panel__container .c4p--side-panel__inner-content.c4p--side-panel__static-inner-content {
12664
+ height: calc(100vh - (var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height) + var(--c4p--side-panel--action-bar-container-height)) + -1 * (var(--cds-spacing-09, 3rem) + var(--cds-spacing-10, 4rem)));
12704
12665
  padding-top: var(--cds-spacing-05, 1rem);
12705
12666
  }
12706
- .exp--side-panel__container .exp--side-panel__action-toolbar.exp--side-panel__action-toolbar-no-animation {
12667
+ .c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
12707
12668
  position: fixed;
12708
12669
  top: calc(
12709
- var(--exp--side-panel--title-text-height) +
12710
- var(--exp--side-panel--subtitle-container-height) + var(--cds-spacing-09, 3rem)
12670
+ var(--c4p--side-panel--title-text-height) +
12671
+ var(--c4p--side-panel--subtitle-container-height) + var(--cds-spacing-09, 3rem)
12711
12672
  );
12712
12673
  width: 100%;
12713
12674
  border-bottom: 1px solid var(--cds-decorative-01, #e0e0e0);
12714
12675
  }
12715
- .exp--side-panel__container .exp--side-panel__action-toolbar.exp--side-panel__action-toolbar-no-animation + .exp--side-panel__body-content {
12676
+ .c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation + .c4p--side-panel__body-content {
12716
12677
  margin-top: calc(
12717
- var(--exp--side-panel--title-text-height) +
12718
- var(--exp--side-panel--subtitle-container-height) + var(--cds-spacing-09, 3rem)
12678
+ var(--c4p--side-panel--title-text-height) +
12679
+ var(--c4p--side-panel--subtitle-container-height) + var(--cds-spacing-09, 3rem)
12719
12680
  );
12720
12681
  }
12721
- .exp--side-panel__container .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation.exp--side-panel__subtitle-text-no-animation-no-action-toolbar {
12682
+ .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation.c4p--side-panel__subtitle-text-no-animation-no-action-toolbar {
12722
12683
  border-bottom: 1px solid var(--cds-decorative-01, #e0e0e0);
12723
12684
  margin-bottom: var(--cds-spacing-05, 1rem);
12724
12685
  }
12725
- .exp--side-panel__container .exp--side-panel__action-toolbar {
12686
+ .c4p--side-panel__container .c4p--side-panel__action-toolbar {
12726
12687
  position: sticky;
12727
12688
  z-index: 4;
12728
- top: var(--exp--side-panel--title-height);
12689
+ top: var(--c4p--side-panel--title-height);
12729
12690
  display: flex;
12730
12691
  align-items: center;
12731
12692
  justify-content: flex-start;
@@ -12735,32 +12696,32 @@ a.bx--overflow-menu-options__btn::before {
12735
12696
  transition: transform 150ms;
12736
12697
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
12737
12698
  }
12738
- .exp--side-panel__container .exp--side-panel__action-toolbar .exp--side-panel__action-toolbar-button {
12699
+ .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button {
12739
12700
  min-width: 2rem;
12740
12701
  }
12741
- .exp--side-panel__container .exp--side-panel__action-toolbar .exp--side-panel__action-toolbar-button.exp--side-panel__action-toolbar-icon-only-button {
12702
+ .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button.c4p--side-panel__action-toolbar-icon-only-button {
12742
12703
  padding: 0;
12743
12704
  color: var(--cds-text-01, #161616);
12744
12705
  }
12745
- .exp--side-panel__container .exp--side-panel__action-toolbar .exp--side-panel__action-toolbar-button.exp--side-panel__action-toolbar-icon-only-button svg {
12706
+ .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button.c4p--side-panel__action-toolbar-icon-only-button svg {
12746
12707
  margin-left: var(--cds-spacing-03, 0.5rem);
12747
12708
  }
12748
- .exp--side-panel__container .exp--side-panel__action-toolbar .exp--side-panel__action-toolbar-button.exp--side-panel__action-toolbar-leading-button {
12709
+ .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button.c4p--side-panel__action-toolbar-leading-button {
12749
12710
  margin-right: var(--cds-spacing-03, 0.5rem);
12750
12711
  }
12751
- .exp--side-panel__container .bx--btn.exp--side-panel__navigation-back-button {
12712
+ .c4p--side-panel__container .bx--btn.c4p--side-panel__navigation-back-button {
12752
12713
  position: relative;
12753
12714
  z-index: 5;
12754
12715
  top: calc(-1 * var(--cds-spacing-03, 0.5rem));
12755
12716
  left: calc(-1 * var(--cds-spacing-03, 0.5rem));
12756
12717
  }
12757
- .exp--side-panel__container .bx--btn.exp--side-panel__navigation-back-button,
12758
- .exp--side-panel__container .bx--btn.exp--side-panel__close-button {
12718
+ .c4p--side-panel__container .bx--btn.c4p--side-panel__navigation-back-button,
12719
+ .c4p--side-panel__container .bx--btn.c4p--side-panel__close-button {
12759
12720
  min-width: 2rem;
12760
12721
  padding: 0;
12761
12722
  color: var(--cds-text-01, #161616);
12762
12723
  }
12763
- .exp--side-panel__container .bx--btn.exp--side-panel__close-button {
12724
+ .c4p--side-panel__container .bx--btn.c4p--side-panel__close-button {
12764
12725
  position: absolute;
12765
12726
  z-index: 5;
12766
12727
  top: var(--cds-spacing-03, 0.5rem);
@@ -12770,53 +12731,53 @@ a.bx--overflow-menu-options__btn::before {
12770
12731
  justify-content: center;
12771
12732
  background-color: var(--cds-ui-01, #f4f4f4);
12772
12733
  }
12773
- .exp--side-panel__container .bx--btn.exp--side-panel__close-button .bx--btn__icon {
12734
+ .c4p--side-panel__container .bx--btn.c4p--side-panel__close-button .bx--btn__icon {
12774
12735
  margin: 0;
12775
12736
  }
12776
- .exp--side-panel__container .exp--side-panel__body-content {
12737
+ .c4p--side-panel__container .c4p--side-panel__body-content {
12777
12738
  padding: var(--cds-spacing-05, 1rem);
12778
12739
  padding-top: 0;
12779
12740
  }
12780
- .exp--side-panel__container.exp--side-panel__container-is-animating .exp--side-panel__actions-container.exp--action-set--max {
12741
+ .c4p--side-panel__container.c4p--side-panel__container-is-animating .c4p--side-panel__actions-container.c4p--action-set--max {
12781
12742
  min-width: 100%;
12782
12743
  max-width: 100%;
12783
12744
  }
12784
- .exp--side-panel__container .exp--side-panel__actions-container {
12745
+ .c4p--side-panel__container .c4p--side-panel__actions-container {
12785
12746
  position: fixed;
12786
12747
  bottom: 0;
12787
12748
  border-top: 1px solid var(--cds-decorative-01, #e0e0e0);
12788
12749
  background-color: var(--cds-ui-01, #f4f4f4);
12789
12750
  }
12790
- .exp--side-panel__container .exp--side-panel__actions-container.exp--action-set--max {
12751
+ .c4p--side-panel__container .c4p--side-panel__actions-container.c4p--action-set--max {
12791
12752
  flex-direction: column;
12792
12753
  }
12793
- .exp--side-panel__container .exp--side-panel__actions-container.exp--action-set--max .exp--action-set__action-button {
12754
+ .c4p--side-panel__container .c4p--side-panel__actions-container.c4p--action-set--max .c4p--action-set__action-button {
12794
12755
  width: 100%;
12795
12756
  max-width: 100%;
12796
12757
  }
12797
12758
  @media (min-width: 42rem) {
12798
- .exp--side-panel__container .exp--side-panel__actions-container.exp--action-set--max {
12759
+ .c4p--side-panel__container .c4p--side-panel__actions-container.c4p--action-set--max {
12799
12760
  flex-direction: row;
12800
12761
  }
12801
- .exp--side-panel__container .exp--side-panel__actions-container.exp--action-set--max .exp--action-set__action-button {
12762
+ .c4p--side-panel__container .c4p--side-panel__actions-container.c4p--action-set--max .c4p--action-set__action-button {
12802
12763
  width: 25%;
12803
12764
  }
12804
12765
  }
12805
- .exp--side-panel__container .exp--side-panel__actions-container .exp--action-set__action-button {
12766
+ .c4p--side-panel__container .c4p--side-panel__actions-container .c4p--action-set__action-button {
12806
12767
  height: var(--cds-layout-05, 4rem);
12807
12768
  }
12808
- .exp--side-panel__container .exp--side-panel__actions-container.exp--side-panel__actions-container-condensed .exp--action-set__action-button {
12769
+ .c4p--side-panel__container .c4p--side-panel__actions-container.c4p--side-panel__actions-container-condensed .c4p--action-set__action-button {
12809
12770
  height: var(--cds-layout-04, 3rem);
12810
12771
  }
12811
12772
 
12812
- .exp--side-panel__container .bx--text-input,
12813
- .exp--side-panel__container .bx--text-area,
12814
- .exp--side-panel__container .bx--search-input,
12815
- .exp--side-panel__container .bx--select-input,
12816
- .exp--side-panel__container .bx--dropdown,
12817
- .exp--side-panel__container .bx--dropdown-list,
12818
- .exp--side-panel__container .bx--number input[type=number],
12819
- .exp--side-panel__container .bx--date-picker__input {
12773
+ .c4p--side-panel__container .bx--text-input,
12774
+ .c4p--side-panel__container .bx--text-area,
12775
+ .c4p--side-panel__container .bx--search-input,
12776
+ .c4p--side-panel__container .bx--select-input,
12777
+ .c4p--side-panel__container .bx--dropdown,
12778
+ .c4p--side-panel__container .bx--dropdown-list,
12779
+ .c4p--side-panel__container .bx--number input[type=number],
12780
+ .c4p--side-panel__container .bx--date-picker__input {
12820
12781
  background-color: var(--cds-field-02, #ffffff);
12821
12782
  }
12822
12783
 
@@ -12836,7 +12797,7 @@ a.bx--overflow-menu-options__btn::before {
12836
12797
  opacity: 0;
12837
12798
  }
12838
12799
  }
12839
- .exp--side-panel__visually-hidden {
12800
+ .c4p--side-panel__visually-hidden {
12840
12801
  position: absolute;
12841
12802
  overflow: hidden;
12842
12803
  width: 1px;
@@ -12849,7 +12810,7 @@ a.bx--overflow-menu-options__btn::before {
12849
12810
  white-space: nowrap;
12850
12811
  }
12851
12812
 
12852
- .exp--side-panel__overlay {
12813
+ .c4p--side-panel__overlay {
12853
12814
  position: fixed;
12854
12815
  z-index: 6000;
12855
12816
  top: 0;
@@ -12863,17 +12824,17 @@ a.bx--overflow-menu-options__btn::before {
12863
12824
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
12864
12825
  }
12865
12826
 
12866
- .exp--create-side-panel.exp--side-panel__container .exp--create-side-panel__content-text {
12827
+ .c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
12867
12828
  padding-right: calc(20% - var(--cds-spacing-05, 1rem));
12868
12829
  }
12869
12830
 
12870
- .exp--create-side-panel.exp--side-panel__container--xs .exp--side-panel__title-text {
12831
+ .c4p--create-side-panel.c4p--side-panel__container--xs .c4p--side-panel__title-text {
12871
12832
  width: calc(16rem - var(--cds-spacing-05, 1rem));
12872
12833
  padding-right: calc((16rem * 0.2) - var(--cds-spacing-05, 1rem));
12873
12834
  margin-bottom: var(--cds-spacing-02, 0.25rem);
12874
12835
  }
12875
12836
 
12876
- .exp--create-side-panel.exp--side-panel__container--xs .exp--side-panel__subtitle-text {
12837
+ .c4p--create-side-panel.c4p--side-panel__container--xs .c4p--side-panel__subtitle-text {
12877
12838
  width: calc(16rem - var(--cds-spacing-05, 1rem));
12878
12839
  padding-right: calc((16rem * 0.2) - var(--cds-spacing-05, 1rem));
12879
12840
  padding-bottom: var(--cds-spacing-05, 1rem);
@@ -12881,13 +12842,13 @@ a.bx--overflow-menu-options__btn::before {
12881
12842
  color: var(--cds-text-02, #525252);
12882
12843
  }
12883
12844
 
12884
- .exp--create-side-panel.exp--side-panel__container--sm .exp--side-panel__title-text {
12845
+ .c4p--create-side-panel.c4p--side-panel__container--sm .c4p--side-panel__title-text {
12885
12846
  width: calc(20rem - var(--cds-spacing-05, 1rem));
12886
12847
  padding-right: calc((20rem * 0.2) - var(--cds-spacing-05, 1rem));
12887
12848
  margin-bottom: var(--cds-spacing-02, 0.25rem);
12888
12849
  }
12889
12850
 
12890
- .exp--create-side-panel.exp--side-panel__container--sm .exp--side-panel__subtitle-text {
12851
+ .c4p--create-side-panel.c4p--side-panel__container--sm .c4p--side-panel__subtitle-text {
12891
12852
  width: calc(20rem - var(--cds-spacing-05, 1rem));
12892
12853
  padding-right: calc((20rem * 0.2) - var(--cds-spacing-05, 1rem));
12893
12854
  padding-bottom: var(--cds-spacing-05, 1rem);
@@ -12895,13 +12856,13 @@ a.bx--overflow-menu-options__btn::before {
12895
12856
  color: var(--cds-text-02, #525252);
12896
12857
  }
12897
12858
 
12898
- .exp--create-side-panel.exp--side-panel__container--md .exp--side-panel__title-text {
12859
+ .c4p--create-side-panel.c4p--side-panel__container--md .c4p--side-panel__title-text {
12899
12860
  width: calc(30rem - var(--cds-spacing-05, 1rem));
12900
12861
  padding-right: calc((30rem * 0.2) - var(--cds-spacing-05, 1rem));
12901
12862
  margin-bottom: var(--cds-spacing-02, 0.25rem);
12902
12863
  }
12903
12864
 
12904
- .exp--create-side-panel.exp--side-panel__container--md .exp--side-panel__subtitle-text {
12865
+ .c4p--create-side-panel.c4p--side-panel__container--md .c4p--side-panel__subtitle-text {
12905
12866
  width: calc(30rem - var(--cds-spacing-05, 1rem));
12906
12867
  padding-right: calc((30rem * 0.2) - var(--cds-spacing-05, 1rem));
12907
12868
  padding-bottom: var(--cds-spacing-05, 1rem);
@@ -12909,13 +12870,13 @@ a.bx--overflow-menu-options__btn::before {
12909
12870
  color: var(--cds-text-02, #525252);
12910
12871
  }
12911
12872
 
12912
- .exp--create-side-panel.exp--side-panel__container--lg .exp--side-panel__title-text {
12873
+ .c4p--create-side-panel.c4p--side-panel__container--lg .c4p--side-panel__title-text {
12913
12874
  width: calc(40rem - var(--cds-spacing-05, 1rem));
12914
12875
  padding-right: calc((40rem * 0.2) - var(--cds-spacing-05, 1rem));
12915
12876
  margin-bottom: var(--cds-spacing-02, 0.25rem);
12916
12877
  }
12917
12878
 
12918
- .exp--create-side-panel.exp--side-panel__container--lg .exp--side-panel__subtitle-text {
12879
+ .c4p--create-side-panel.c4p--side-panel__container--lg .c4p--side-panel__subtitle-text {
12919
12880
  width: calc(40rem - var(--cds-spacing-05, 1rem));
12920
12881
  padding-right: calc((40rem * 0.2) - var(--cds-spacing-05, 1rem));
12921
12882
  padding-bottom: var(--cds-spacing-05, 1rem);
@@ -12923,13 +12884,13 @@ a.bx--overflow-menu-options__btn::before {
12923
12884
  color: var(--cds-text-02, #525252);
12924
12885
  }
12925
12886
 
12926
- .exp--create-side-panel.exp--side-panel__container--max .exp--side-panel__title-text {
12887
+ .c4p--create-side-panel.c4p--side-panel__container--max .c4p--side-panel__title-text {
12927
12888
  width: calc(75% - var(--cds-spacing-05, 1rem));
12928
12889
  padding-right: calc((75% * 0.2) - var(--cds-spacing-05, 1rem));
12929
12890
  margin-bottom: var(--cds-spacing-02, 0.25rem);
12930
12891
  }
12931
12892
 
12932
- .exp--create-side-panel.exp--side-panel__container--max .exp--side-panel__subtitle-text {
12893
+ .c4p--create-side-panel.c4p--side-panel__container--max .c4p--side-panel__subtitle-text {
12933
12894
  width: calc(75% - var(--cds-spacing-05, 1rem));
12934
12895
  padding-right: calc((75% * 0.2) - var(--cds-spacing-05, 1rem));
12935
12896
  padding-bottom: var(--cds-spacing-05, 1rem);
@@ -12937,19 +12898,19 @@ a.bx--overflow-menu-options__btn::before {
12937
12898
  color: var(--cds-text-02, #525252);
12938
12899
  }
12939
12900
 
12940
- .bx--form.exp--create-side-panel__form {
12901
+ .bx--form.c4p--create-side-panel__form {
12941
12902
  padding-top: var(--cds-spacing-05, 1rem);
12942
12903
  }
12943
12904
 
12944
- .exp--create-side-panel__form.bx--fieldset {
12905
+ .c4p--create-side-panel__form.bx--fieldset {
12945
12906
  padding-top: var(--cds-spacing-03, 0.5rem);
12946
12907
  }
12947
12908
 
12948
- .exp--create-side-panel__form > * {
12909
+ .c4p--create-side-panel__form > * {
12949
12910
  margin-bottom: var(--cds-spacing-05, 1rem);
12950
12911
  }
12951
12912
 
12952
- .exp--create-side-panel__form-title-text {
12913
+ .c4p--create-side-panel__form-title-text {
12953
12914
  font-size: var(--cds-productive-heading-02-font-size, 1rem);
12954
12915
  font-weight: var(--cds-productive-heading-02-font-weight, 600);
12955
12916
  line-height: var(--cds-productive-heading-02-line-height, 1.375);
@@ -12957,18 +12918,18 @@ a.bx--overflow-menu-options__btn::before {
12957
12918
  padding-bottom: var(--cds-spacing-03, 0.5rem);
12958
12919
  }
12959
12920
 
12960
- .exp--create-side-panel__form-description-text {
12921
+ .c4p--create-side-panel__form-description-text {
12961
12922
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
12962
12923
  font-weight: var(--cds-body-long-01-font-weight, 400);
12963
12924
  line-height: var(--cds-body-long-01-line-height, 1.42857);
12964
12925
  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
12965
12926
  }
12966
12927
 
12967
- .exp--create-side-panel.exp--side-panel .bx--btn.exp--side-panel__close-button {
12928
+ .c4p--create-side-panel.c4p--side-panel .bx--btn.c4p--side-panel__close-button {
12968
12929
  display: none;
12969
12930
  }
12970
12931
 
12971
- .exp--create-side-panel__title {
12932
+ .c4p--create-side-panel__title {
12972
12933
  font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
12973
12934
  font-weight: var(--cds-productive-heading-03-font-weight, 400);
12974
12935
  line-height: var(--cds-productive-heading-03-line-height, 1.4);
@@ -12976,7 +12937,7 @@ a.bx--overflow-menu-options__btn::before {
12976
12937
  margin-bottom: var(--cds-spacing-02, 0.25rem);
12977
12938
  }
12978
12939
 
12979
- .exp--create-side-panel__subtitle {
12940
+ .c4p--create-side-panel__subtitle {
12980
12941
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
12981
12942
  font-weight: var(--cds-body-short-01-font-weight, 400);
12982
12943
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -12985,7 +12946,7 @@ a.bx--overflow-menu-options__btn::before {
12985
12946
  color: var(--cds-text-02, #525252);
12986
12947
  }
12987
12948
 
12988
- .exp--side-panel .exp--create-side-panel__actions-container {
12949
+ .c4p--side-panel .c4p--create-side-panel__actions-container {
12989
12950
  position: absolute;
12990
12951
  z-index: 4;
12991
12952
  bottom: 0;
@@ -13892,114 +13853,114 @@ a.bx--side-nav__link--current::before {
13892
13853
  stroke-dashoffset: 0;
13893
13854
  }
13894
13855
  }
13895
- .exp--tearsheet.exp--tearsheet {
13856
+ .c4p--tearsheet.c4p--tearsheet {
13896
13857
  z-index: 9001;
13897
13858
  align-items: flex-end;
13898
13859
  color: var(--cds-text-01, #161616);
13899
13860
  transition: visibility 0s linear 240ms, background-color 240ms cubic-bezier(0.4, 0.14, 1, 1), opacity 240ms cubic-bezier(0.4, 0.14, 1, 1);
13900
- --exp--tearsheet--stacking-scale-factor-single: 0.95;
13901
- --exp--tearsheet--stacking-scale-factor-double: 0.9;
13861
+ --c4p--tearsheet--stacking-scale-factor-single: 0.95;
13862
+ --c4p--tearsheet--stacking-scale-factor-double: 0.9;
13902
13863
  }
13903
- .exp--tearsheet.is-visible {
13864
+ .c4p--tearsheet.is-visible {
13904
13865
  z-index: 9000;
13905
13866
  align-items: flex-end;
13906
13867
  transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
13907
13868
  }
13908
- .exp--tearsheet.exp--tearsheet--stacked-1-of-2 {
13869
+ .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 {
13909
13870
  z-index: 8999;
13910
13871
  background-color: rgba(22, 22, 22, 0.33);
13911
13872
  }
13912
- .exp--tearsheet.exp--tearsheet--stacked-1-of-3 {
13873
+ .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 {
13913
13874
  z-index: 8998;
13914
13875
  background-color: rgba(22, 22, 22, 0.11);
13915
13876
  }
13916
- .exp--tearsheet.exp--tearsheet--stacked-2-of-3 {
13877
+ .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 {
13917
13878
  z-index: 8999;
13918
13879
  background-color: rgba(22, 22, 22, 0.25);
13919
13880
  }
13920
- .exp--tearsheet.exp--tearsheet--stacked-2-of-2, .exp--tearsheet.exp--tearsheet--stacked-3-of-3 {
13881
+ .c4p--tearsheet.c4p--tearsheet--stacked-2-of-2, .c4p--tearsheet.c4p--tearsheet--stacked-3-of-3 {
13921
13882
  background-color: rgba(22, 22, 22, 0.25);
13922
13883
  }
13923
- .exp--tearsheet .exp--tearsheet__container {
13884
+ .c4p--tearsheet .c4p--tearsheet__container {
13924
13885
  top: auto;
13925
13886
  height: 100%;
13926
13887
  max-height: calc(100% - var(--cds-spacing-09, 3rem));
13927
13888
  transform: translate3d(0, min(95vh, 500px), 0);
13928
13889
  }
13929
- .exp--tearsheet.exp--tearsheet.exp--tearsheet .exp--tearsheet__container {
13890
+ .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__container {
13930
13891
  transition: transform 240ms cubic-bezier(0, 0, 0.3, 1), max-height 240ms cubic-bezier(0, 0, 0.3, 1);
13931
13892
  }
13932
- .exp--tearsheet.exp--tearsheet--stacked-1-of-2 .exp--tearsheet__container, .exp--tearsheet.exp--tearsheet--stacked-2-of-3 .exp--tearsheet__container {
13893
+ .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 .c4p--tearsheet__container, .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 .c4p--tearsheet__container {
13933
13894
  max-height: calc(100% - var(--cds-spacing-09, 3rem) + var(--cds-spacing-05, 1rem));
13934
13895
  }
13935
- .exp--tearsheet.exp--tearsheet--stacked-1-of-3 .exp--tearsheet__container {
13896
+ .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container {
13936
13897
  max-height: calc(100% - var(--cds-spacing-09, 3rem) + (2 * var(--cds-spacing-05, 1rem)));
13937
13898
  }
13938
- .exp--tearsheet .exp--tearsheet__container--lower {
13899
+ .c4p--tearsheet .c4p--tearsheet__container--lower {
13939
13900
  max-height: calc(100% - (var(--cds-spacing-09, 3rem) + var(--cds-spacing-08, 2.5rem)));
13940
13901
  }
13941
- .exp--tearsheet.exp--tearsheet--stacked-1-of-2 .exp--tearsheet__container--lower, .exp--tearsheet.exp--tearsheet--stacked-2-of-3 .exp--tearsheet__container--lower {
13902
+ .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 .c4p--tearsheet__container--lower, .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 .c4p--tearsheet__container--lower {
13942
13903
  max-height: calc(
13943
13904
  100% - (var(--cds-spacing-09, 3rem) + var(--cds-spacing-08, 2.5rem)) + var(--cds-spacing-05, 1rem)
13944
13905
  );
13945
13906
  }
13946
- .exp--tearsheet.exp--tearsheet--stacked-1-of-3 .exp--tearsheet__container--lower {
13907
+ .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container--lower {
13947
13908
  max-height: calc(100% - (var(--cds-spacing-09, 3rem) + var(--cds-spacing-08, 2.5rem)) + (2 * var(--cds-spacing-05, 1rem)));
13948
13909
  }
13949
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__container {
13910
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__container {
13950
13911
  width: 100%;
13951
13912
  }
13952
13913
  @media (min-width: 42rem) {
13953
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__container {
13914
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__container {
13954
13915
  width: calc(100% - (2 * var(--cds-spacing-10, 4rem)));
13955
13916
  }
13956
13917
  }
13957
- .exp--tearsheet.exp--tearsheet--stacked-1-of-2.is-visible .exp--tearsheet__container, .exp--tearsheet.exp--tearsheet--stacked-2-of-3.is-visible .exp--tearsheet__container {
13958
- transform: scale(var(--exp--tearsheet--stacking-scale-factor-single));
13918
+ .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2.is-visible .c4p--tearsheet__container, .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3.is-visible .c4p--tearsheet__container {
13919
+ transform: scale(var(--c4p--tearsheet--stacking-scale-factor-single));
13959
13920
  }
13960
- .exp--tearsheet.exp--tearsheet--stacked-1-of-3.is-visible .exp--tearsheet__container {
13961
- transform: scale(var(--exp--tearsheet--stacking-scale-factor-double));
13921
+ .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3.is-visible .c4p--tearsheet__container {
13922
+ transform: scale(var(--c4p--tearsheet--stacking-scale-factor-double));
13962
13923
  }
13963
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__header {
13924
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header {
13964
13925
  padding: var(--cds-spacing-06, 1.5rem) var(--cds-spacing-07, 2rem);
13965
13926
  border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
13966
13927
  margin: 0;
13967
13928
  }
13968
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__header--with-nav {
13929
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header--with-nav {
13969
13930
  padding-bottom: 0;
13970
13931
  }
13971
- .exp--tearsheet.exp--tearsheet--narrow .exp--tearsheet__header {
13932
+ .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header {
13972
13933
  padding: var(--cds-spacing-05, 1rem);
13973
13934
  margin: 0;
13974
13935
  }
13975
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__header--with-close-icon {
13936
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header--with-close-icon {
13976
13937
  padding-right: var(--cds-spacing-05, 1rem);
13977
13938
  margin-right: var(--cds-spacing-09, 3rem);
13978
13939
  }
13979
- .exp--tearsheet .exp--tearsheet__header-content {
13940
+ .c4p--tearsheet .c4p--tearsheet__header-content {
13980
13941
  display: flex;
13981
13942
  justify-content: space-between;
13982
13943
  }
13983
- .exp--tearsheet .exp--tearsheet__header-fields {
13944
+ .c4p--tearsheet .c4p--tearsheet__header-fields {
13984
13945
  flex: 1 1 100%;
13985
13946
  }
13986
- .exp--tearsheet .exp--tearsheet__header-actions {
13947
+ .c4p--tearsheet .c4p--tearsheet__header-actions {
13987
13948
  flex: 0 0 auto;
13988
13949
  padding-left: var(--cds-spacing-06, 1.5rem);
13989
13950
  }
13990
- .exp--tearsheet .exp--tearsheet__header-actions .bx--btn-set .bx--btn:not(:first-of-type) {
13951
+ .c4p--tearsheet .c4p--tearsheet__header-actions .bx--btn-set .bx--btn:not(:first-of-type) {
13991
13952
  margin-left: var(--cds-spacing-03, 0.5rem);
13992
13953
  }
13993
- .exp--tearsheet .exp--tearsheet__header--no-close-icon {
13954
+ .c4p--tearsheet .c4p--tearsheet__header--no-close-icon {
13994
13955
  display: none;
13995
13956
  }
13996
- .exp--tearsheet.exp--tearsheet--wide .bx--modal-header__heading.exp--tearsheet__heading {
13957
+ .c4p--tearsheet.c4p--tearsheet--wide .bx--modal-header__heading.c4p--tearsheet__heading {
13997
13958
  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
13998
13959
  font-weight: var(--cds-productive-heading-04-font-weight, 400);
13999
13960
  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
14000
13961
  letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
14001
13962
  }
14002
- .exp--tearsheet .exp--tearsheet__header-description {
13963
+ .c4p--tearsheet .c4p--tearsheet__header-description {
14003
13964
  display: -webkit-box;
14004
13965
  overflow: hidden;
14005
13966
  max-width: 100%;
@@ -14012,90 +13973,90 @@ a.bx--side-nav__link--current::before {
14012
13973
  -webkit-line-clamp: 2;
14013
13974
  }
14014
13975
  @media (min-width: 42rem) {
14015
- .exp--tearsheet .exp--tearsheet__header-description {
13976
+ .c4p--tearsheet .c4p--tearsheet__header-description {
14016
13977
  max-width: 60%;
14017
13978
  }
14018
13979
  }
14019
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__header-description {
13980
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header-description {
14020
13981
  margin-top: var(--cds-spacing-03, 0.5rem);
14021
13982
  }
14022
- .exp--tearsheet .exp--tearsheet__header-navigation {
13983
+ .c4p--tearsheet .c4p--tearsheet__header-navigation {
14023
13984
  margin: var(--cds-spacing-04, 0.75rem) 0 0;
14024
13985
  }
14025
- .exp--tearsheet.exp--tearsheet .exp--tearsheet__body {
13986
+ .c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__body {
14026
13987
  display: flex;
14027
13988
  flex-direction: row;
14028
13989
  padding: 0;
14029
13990
  margin: 0;
14030
13991
  }
14031
- .exp--tearsheet .exp--tearsheet__resize-detector {
13992
+ .c4p--tearsheet .c4p--tearsheet__resize-detector {
14032
13993
  width: 100%;
14033
13994
  height: 0;
14034
13995
  }
14035
- .exp--tearsheet .exp--tearsheet__influencer {
13996
+ .c4p--tearsheet .c4p--tearsheet__influencer {
14036
13997
  flex: 0 0 257px;
14037
13998
  border-right: 1px solid var(--cds-ui-03, #e0e0e0);
14038
13999
  overflow-y: auto;
14039
14000
  }
14040
- .exp--tearsheet .exp--tearsheet__influencer--wide {
14001
+ .c4p--tearsheet .c4p--tearsheet__influencer--wide {
14041
14002
  flex-basis: 321px;
14042
14003
  }
14043
- .exp--tearsheet .exp--tearsheet__right {
14004
+ .c4p--tearsheet .c4p--tearsheet__right {
14044
14005
  display: grid;
14045
14006
  flex-grow: 1;
14046
14007
  grid-template-columns: 100%;
14047
14008
  grid-template-rows: 1fr auto;
14048
14009
  }
14049
- .exp--tearsheet .exp--tearsheet__main {
14010
+ .c4p--tearsheet .c4p--tearsheet__main {
14050
14011
  display: flex;
14051
14012
  flex-direction: row;
14052
14013
  grid-column: 1/-1;
14053
14014
  grid-row: 1/-1;
14054
14015
  }
14055
- .exp--tearsheet .exp--tearsheet__main .exp--tearsheet__influencer {
14016
+ .c4p--tearsheet .c4p--tearsheet__main .c4p--tearsheet__influencer {
14056
14017
  border-right: none;
14057
14018
  border-left: 1px solid var(--cds-ui-03, #e0e0e0);
14058
14019
  }
14059
- .exp--tearsheet .exp--tearsheet__content {
14020
+ .c4p--tearsheet .c4p--tearsheet__content {
14060
14021
  overflow: auto;
14061
14022
  flex-grow: 1;
14062
14023
  }
14063
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content {
14024
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content {
14064
14025
  background: var(--cds-ui-background, #ffffff);
14065
14026
  }
14066
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--pagination,
14067
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--pagination__control-buttons,
14068
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--text-input,
14069
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--text-area,
14070
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--search-input,
14071
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--select-input,
14072
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--dropdown,
14073
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--dropdown-list,
14074
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--number input[type=number],
14075
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--date-picker__input {
14027
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--pagination,
14028
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--pagination__control-buttons,
14029
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--text-input,
14030
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--text-area,
14031
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--search-input,
14032
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--select-input,
14033
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--dropdown,
14034
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--dropdown-list,
14035
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--number input[type=number],
14036
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--date-picker__input {
14076
14037
  background-color: var(--cds-field-01, #f4f4f4);
14077
14038
  }
14078
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--text-input--light,
14079
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--text-area--light,
14080
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--search--light .bx--search-input,
14081
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--select--light .bx--select-input,
14082
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--dropdown--light,
14083
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--dropdown--light .bx--dropdown-list,
14084
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--number--light input[type=number],
14085
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--date-picker--light .bx--date-picker__input {
14039
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--text-input--light,
14040
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--text-area--light,
14041
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--search--light .bx--search-input,
14042
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--select--light .bx--select-input,
14043
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--dropdown--light,
14044
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--dropdown--light .bx--dropdown-list,
14045
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--number--light input[type=number],
14046
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--date-picker--light .bx--date-picker__input {
14086
14047
  background-color: var(--cds-field-02, #ffffff);
14087
14048
  }
14088
- .exp--tearsheet .exp--tearsheet__button-container {
14049
+ .c4p--tearsheet .c4p--tearsheet__button-container {
14089
14050
  grid-column: 1/-1;
14090
14051
  grid-row: -1/-1;
14091
14052
  overflow-x: auto;
14092
14053
  }
14093
- .exp--tearsheet .exp--tearsheet__buttons {
14054
+ .c4p--tearsheet .c4p--tearsheet__buttons {
14094
14055
  display: inline-flex;
14095
14056
  min-width: 100%;
14096
14057
  border-top: 1px solid var(--cds-ui-03, #e0e0e0);
14097
14058
  }
14098
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__buttons {
14059
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__buttons {
14099
14060
  background: var(--cds-ui-background, #ffffff);
14100
14061
  }
14101
14062
 
@@ -14203,20 +14164,20 @@ a.bx--side-nav__link--current::before {
14203
14164
  transform: translateY(0);
14204
14165
  }
14205
14166
  }
14206
- .exp--tearsheet-create {
14207
- --exp--tearsheet-create--total-width: 0;
14167
+ .c4p--tearsheet-create {
14168
+ --c4p--tearsheet-create--total-width: 0;
14208
14169
  }
14209
14170
 
14210
- .exp--tearsheet-create .exp--tearsheet-create__step--hidden-step,
14211
- .exp--tearsheet-create .exp--tearsheet-create__step--hidden-section {
14171
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--hidden-step,
14172
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--hidden-section {
14212
14173
  display: none;
14213
14174
  }
14214
14175
 
14215
- .exp--tearsheet-create .exp--tearsheet-create__step--visible-section {
14176
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--visible-section {
14216
14177
  display: block;
14217
14178
  }
14218
14179
 
14219
- .exp--tearsheet-create .exp--tearsheet-create__step--visible-step {
14180
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--visible-step {
14220
14181
  animation: 400ms stepContentEntrance;
14221
14182
  animation-fill-mode: forwards;
14222
14183
  animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
@@ -14224,51 +14185,51 @@ a.bx--side-nav__link--current::before {
14224
14185
  }
14225
14186
 
14226
14187
  @media (prefers-reduced-motion) {
14227
- .exp--tearsheet-create .exp--tearsheet-create__step--visible-step {
14188
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--visible-step {
14228
14189
  animation: none;
14229
14190
  opacity: 1;
14230
14191
  }
14231
14192
  }
14232
- .exp--tearsheet-create .exp--tearsheet-create__content {
14193
+ .c4p--tearsheet-create .c4p--tearsheet-create__content {
14233
14194
  height: 100%;
14234
14195
  padding: var(--cds-spacing-06, 1.5rem);
14235
14196
  overflow-x: hidden;
14236
14197
  }
14237
14198
 
14238
- .exp--tearsheet-create .exp--tearsheet-create__content .bx--grid {
14199
+ .c4p--tearsheet-create .c4p--tearsheet-create__content .bx--grid {
14239
14200
  padding: 0;
14240
14201
  margin: 0;
14241
14202
  }
14242
14203
 
14243
- .exp--tearsheet-create .exp--tearsheet-create__step--heading {
14204
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--heading {
14244
14205
  padding-bottom: var(--cds-spacing-06, 1.5rem);
14245
14206
  }
14246
14207
 
14247
- .exp--tearsheet-create .bx--btn-set .bx--btn.bx--btn--disabled {
14208
+ .c4p--tearsheet-create .bx--btn-set .bx--btn.bx--btn--disabled {
14248
14209
  box-shadow: -0.0625rem 0 0 0 var(--cds-button-separator, #e0e0e0);
14249
14210
  }
14250
14211
 
14251
- .exp--tearsheet-create .bx--side-nav--ux {
14212
+ .c4p--tearsheet-create .bx--side-nav--ux {
14252
14213
  position: initial;
14253
14214
  background-color: transparent;
14254
14215
  }
14255
14216
 
14256
- .exp--tearsheet-create .exp--tearsheet-create__section--divider {
14217
+ .c4p--tearsheet-create .c4p--tearsheet-create__section--divider {
14257
14218
  position: relative;
14258
14219
  display: block;
14259
- width: var(--exp--tearsheet-create--total-width);
14220
+ width: var(--c4p--tearsheet-create--total-width);
14260
14221
  height: 1px;
14261
14222
  margin: var(--cds-spacing-06, 1.5rem) calc(-1 * var(--cds-spacing-08, 2.5rem)) var(--cds-spacing-07, 2rem) calc(-1 * var(--cds-spacing-06, 1.5rem));
14262
14223
  background-color: var(--cds-ui-03, #e0e0e0);
14263
14224
  }
14264
14225
 
14265
- .exp--tearsheet-create .exp--tearsheet-create__step--title,
14266
- .exp--tearsheet-create .exp--tearsheet-create__section--title {
14226
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--title,
14227
+ .c4p--tearsheet-create .c4p--tearsheet-create__section--title {
14267
14228
  margin-bottom: var(--cds-spacing-05, 1rem);
14268
14229
  }
14269
14230
 
14270
- .exp--tearsheet-create .exp--tearsheet-create__section--subtitle,
14271
- .exp--tearsheet-create .exp--tearsheet-create__step--subtitle {
14231
+ .c4p--tearsheet-create .c4p--tearsheet-create__section--subtitle,
14232
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--subtitle {
14272
14233
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
14273
14234
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
14274
14235
  line-height: var(--cds-productive-heading-01-line-height, 1.28572);
@@ -14276,8 +14237,8 @@ a.bx--side-nav__link--current::before {
14276
14237
  margin-bottom: var(--cds-spacing-03, 0.5rem);
14277
14238
  }
14278
14239
 
14279
- .exp--tearsheet-create .exp--tearsheet-create__section--description,
14280
- .exp--tearsheet-create .exp--tearsheet-create__step--description {
14240
+ .c4p--tearsheet-create .c4p--tearsheet-create__section--description,
14241
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--description {
14281
14242
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
14282
14243
  font-weight: var(--cds-body-long-01-font-weight, 400);
14283
14244
  line-height: var(--cds-body-long-01-line-height, 1.42857);
@@ -14285,11 +14246,11 @@ a.bx--side-nav__link--current::before {
14285
14246
  margin-bottom: var(--cds-spacing-06, 1.5rem);
14286
14247
  }
14287
14248
 
14288
- .exp--tearsheet-create .bx--fieldset {
14249
+ .c4p--tearsheet-create .bx--fieldset {
14289
14250
  margin-bottom: 0;
14290
14251
  }
14291
14252
 
14292
- .exp--tearsheet-create .exp--tearsheet-create__step--fieldset > * {
14253
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--fieldset > * {
14293
14254
  margin-bottom: var(--cds-spacing-05, 1rem);
14294
14255
  }
14295
14256
 
@@ -14468,37 +14429,37 @@ a.bx--side-nav__link--current::before {
14468
14429
  stroke-dashoffset: 0;
14469
14430
  }
14470
14431
  }
14471
- .exp--create-tearsheet-narrow .bx--modal-header__heading,
14472
- .exp--create-tearsheet-narrow .bx--modal-header__label,
14473
- .exp--create-tearsheet-narrow .exp--tearsheet__header-description {
14432
+ .c4p--create-tearsheet-narrow .bx--modal-header__heading,
14433
+ .c4p--create-tearsheet-narrow .bx--modal-header__label,
14434
+ .c4p--create-tearsheet-narrow .c4p--tearsheet__header-description {
14474
14435
  max-width: 100%;
14475
14436
  padding-right: calc(20% - var(--cds-spacing-05, 1rem));
14476
14437
  }
14477
14438
 
14478
- .exp--create-tearsheet-narrow .exp--tearsheet__header-description {
14439
+ .c4p--create-tearsheet-narrow .c4p--tearsheet__header-description {
14479
14440
  margin-top: var(--cds-spacing-02, 0.25rem);
14480
14441
  }
14481
14442
 
14482
- .exp--create-tearsheet-narrow .exp--tearsheet__header {
14443
+ .c4p--create-tearsheet-narrow .c4p--tearsheet__header {
14483
14444
  border-bottom: 1px solid var(--cds-decorative-01, #e0e0e0);
14484
14445
  }
14485
14446
 
14486
- .exp--create-tearsheet-narrow .exp--tearsheet__content {
14447
+ .c4p--create-tearsheet-narrow .c4p--tearsheet__content {
14487
14448
  padding: var(--cds-spacing-05, 1rem);
14488
14449
  }
14489
14450
 
14490
- .exp--create-tearsheet-narrow .exp--create-tearsheet-narrow__form {
14451
+ .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form {
14491
14452
  padding-top: var(--cds-spacing-05, 1rem);
14492
14453
  }
14493
14454
 
14494
- .exp--create-tearsheet-narrow .exp--create-tearsheet-narrow__form > * {
14455
+ .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form > * {
14495
14456
  margin-bottom: var(--cds-spacing-05, 1rem);
14496
14457
  }
14497
- .exp--create-tearsheet-narrow .exp--create-tearsheet-narrow__form > *:last-child {
14458
+ .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form > *:last-child {
14498
14459
  margin-bottom: 0;
14499
14460
  }
14500
14461
 
14501
- .exp--create-tearsheet-narrow .exp--create-tearsheet-narrow__form-title-text {
14462
+ .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form-title-text {
14502
14463
  font-size: var(--cds-productive-heading-02-font-size, 1rem);
14503
14464
  font-weight: var(--cds-productive-heading-02-font-weight, 600);
14504
14465
  line-height: var(--cds-productive-heading-02-line-height, 1.375);
@@ -14506,7 +14467,7 @@ a.bx--side-nav__link--current::before {
14506
14467
  padding-bottom: var(--cds-spacing-03, 0.5rem);
14507
14468
  }
14508
14469
 
14509
- .exp--create-tearsheet-narrow .exp--create-tearsheet-narrow__form-description-text {
14470
+ .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form-description-text {
14510
14471
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
14511
14472
  font-weight: var(--cds-body-long-01-font-weight, 400);
14512
14473
  line-height: var(--cds-body-long-01-line-height, 1.42857);
@@ -14693,46 +14654,46 @@ a.bx--side-nav__link--current::before {
14693
14654
  margin-left: var(--cds-spacing-03, 0.5rem);
14694
14655
  }
14695
14656
 
14696
- .exp--empty-state {
14657
+ .c4p--empty-state {
14697
14658
  color: var(--cds-text-01, #161616);
14698
14659
  }
14699
- .exp--empty-state .exp--empty-state__header,
14700
- .exp--empty-state .exp--empty-state__subtitle {
14660
+ .c4p--empty-state .c4p--empty-state__header,
14661
+ .c4p--empty-state .c4p--empty-state__subtitle {
14701
14662
  padding-bottom: var(--cds-spacing-02, 0.25rem);
14702
14663
  margin: 0;
14703
14664
  }
14704
- .exp--empty-state .exp--empty-state__header--small {
14665
+ .c4p--empty-state .c4p--empty-state__header--small {
14705
14666
  font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
14706
14667
  font-weight: var(--cds-productive-heading-03-font-weight, 400);
14707
14668
  line-height: var(--cds-productive-heading-03-line-height, 1.4);
14708
14669
  letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
14709
14670
  }
14710
- .exp--empty-state .exp--empty-state__subtitle--small {
14671
+ .c4p--empty-state .c4p--empty-state__subtitle--small {
14711
14672
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
14712
14673
  font-weight: var(--cds-body-short-01-font-weight, 400);
14713
14674
  line-height: var(--cds-body-short-01-line-height, 1.28572);
14714
14675
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
14715
14676
  }
14716
14677
 
14717
- .exp--empty-state__illustration.exp--empty-state__illustration--lg {
14678
+ .c4p--empty-state__illustration.c4p--empty-state__illustration--lg {
14718
14679
  min-width: var(--cds-spacing-11, 5rem);
14719
14680
  max-width: var(--cds-spacing-11, 5rem);
14720
14681
  }
14721
- .exp--empty-state__illustration.exp--empty-state__illustration--sm {
14682
+ .c4p--empty-state__illustration.c4p--empty-state__illustration--sm {
14722
14683
  min-width: var(--cds-spacing-10, 4rem);
14723
14684
  max-width: var(--cds-spacing-10, 4rem);
14724
14685
  }
14725
14686
 
14726
- .exp--empty-state__action-button,
14727
- .exp--empty-state__link {
14687
+ .c4p--empty-state__action-button,
14688
+ .c4p--empty-state__link {
14728
14689
  margin-top: var(--cds-spacing-06, 1.5rem);
14729
14690
  }
14730
14691
 
14731
- .exp--empty-state .exp--empty-state__action-button {
14692
+ .c4p--empty-state .c4p--empty-state__action-button {
14732
14693
  display: block;
14733
14694
  }
14734
14695
 
14735
- .exp--empty-state .exp--empty-state__link {
14696
+ .c4p--empty-state .c4p--empty-state__link {
14736
14697
  display: block;
14737
14698
  }
14738
14699
 
@@ -14784,19 +14745,19 @@ a.bx--side-nav__link--current::before {
14784
14745
  /* stylelint-disable-line no-invalid-position-at-import-rule */
14785
14746
  /* stylelint-disable-line no-invalid-position-at-import-rule */
14786
14747
  /* stylelint-disable-line no-invalid-position-at-import-rule */
14787
- .exp--example-component {
14748
+ .c4p--example-component {
14788
14749
  display: flex;
14789
14750
  justify-content: flex-end;
14790
- --exp--example-component--border-color: transparent;
14751
+ --c4p--example-component--border-color: transparent;
14791
14752
  }
14792
14753
 
14793
- .exp--example-component.exp--example-component--boxed-set {
14794
- border: 10px solid var(--exp--example-component--border-color);
14754
+ .c4p--example-component.c4p--example-component--boxed-set {
14755
+ border: 10px solid var(--c4p--example-component--border-color);
14795
14756
  }
14796
14757
 
14797
- .exp--example-component.exp--example-component--shadow-set {
14758
+ .c4p--example-component.c4p--example-component--shadow-set {
14798
14759
  margin: var(--cds-spacing-04, 0.75rem);
14799
- box-shadow: 0 0 10px var(--exp--example-component--border-color);
14760
+ box-shadow: 0 0 10px var(--c4p--example-component--border-color);
14800
14761
  }
14801
14762
 
14802
14763
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -15230,37 +15191,37 @@ a.bx--side-nav__link--current::before {
15230
15191
  stroke-dashoffset: 276.4608;
15231
15192
  }
15232
15193
  }
15233
- .exp--export-modal .bx--modal-footer .bx--btn {
15194
+ .c4p--export-modal .bx--modal-footer .bx--btn {
15234
15195
  max-width: none;
15235
15196
  }
15236
15197
 
15237
- .exp--export-modal.bx--modal .bx--modal-content {
15198
+ .c4p--export-modal.bx--modal .bx--modal-content {
15238
15199
  padding-right: var(--cds-spacing-05, 1rem);
15239
15200
  }
15240
15201
 
15241
- .exp--export-modal .bx--modal-close {
15202
+ .c4p--export-modal .bx--modal-close {
15242
15203
  display: none;
15243
15204
  }
15244
15205
 
15245
- .exp--export-modal__body {
15206
+ .c4p--export-modal__body {
15246
15207
  padding-right: calc(20% - var(--cds-spacing-05, 1rem));
15247
15208
  margin-bottom: var(--cds-spacing-05, 1rem);
15248
15209
  }
15249
15210
 
15250
- .exp--export-modal__messaging {
15211
+ .c4p--export-modal__messaging {
15251
15212
  display: flex;
15252
15213
  align-items: center;
15253
15214
  }
15254
15215
 
15255
- .exp--export-modal__messaging p {
15216
+ .c4p--export-modal__messaging p {
15256
15217
  margin-left: var(--cds-spacing-03, 0.5rem);
15257
15218
  }
15258
15219
 
15259
- .exp--export-modal__checkmark-icon {
15220
+ .c4p--export-modal__checkmark-icon {
15260
15221
  fill: var(--cds-interactive-01, #0f62fe);
15261
15222
  }
15262
15223
 
15263
- .exp--export-modal__error-icon {
15224
+ .c4p--export-modal__error-icon {
15264
15225
  fill: var(--cds-danger, #da1e28);
15265
15226
  }
15266
15227
 
@@ -15338,61 +15299,61 @@ a.bx--side-nav__link--current::before {
15338
15299
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15339
15300
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15340
15301
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15341
- .exp--card {
15302
+ .c4p--card {
15342
15303
  background: var(--cds-ui-01, #f4f4f4);
15343
15304
  color: var(--cds-text-01, #161616);
15344
15305
  }
15345
15306
 
15346
- .exp--card__clickable {
15307
+ .c4p--card__clickable {
15347
15308
  cursor: pointer;
15348
15309
  transition: background 110ms;
15349
15310
  }
15350
15311
 
15351
- .exp--card__clickable:hover {
15312
+ .c4p--card__clickable:hover {
15352
15313
  background: var(--cds-hover-ui, #e5e5e5);
15353
15314
  }
15354
15315
 
15355
- .exp--card__media-left {
15316
+ .c4p--card__media-left {
15356
15317
  display: flex;
15357
15318
  flex-direction: row;
15358
15319
  }
15359
15320
 
15360
- .exp--card__media-left .exp--card__content-container {
15321
+ .c4p--card__media-left .c4p--card__content-container {
15361
15322
  display: flex;
15362
15323
  flex: 1;
15363
15324
  flex-direction: column;
15364
15325
  }
15365
15326
 
15366
- .exp--card__media-left .exp--card__footer {
15327
+ .c4p--card__media-left .c4p--card__footer {
15367
15328
  align-self: flex-end;
15368
15329
  margin-top: auto;
15369
15330
  }
15370
15331
 
15371
- .exp--card__media > * {
15332
+ .c4p--card__media > * {
15372
15333
  display: block;
15373
15334
  max-width: 100%;
15374
15335
  }
15375
15336
 
15376
- .exp--card__header {
15337
+ .c4p--card__header {
15377
15338
  padding: var(--cds-spacing-05, 1rem);
15378
15339
  }
15379
15340
 
15380
- .exp--card__header-label-only {
15341
+ .c4p--card__header-label-only {
15381
15342
  padding-bottom: var(--cds-spacing-03, 0.5rem);
15382
15343
  }
15383
15344
 
15384
- .exp--card__header-label-only .exp--card__label {
15345
+ .c4p--card__header-label-only .c4p--card__label {
15385
15346
  margin-bottom: 0;
15386
15347
  }
15387
15348
 
15388
- .exp--card__header-container {
15349
+ .c4p--card__header-container {
15389
15350
  display: flex;
15390
15351
  flex-direction: row;
15391
15352
  align-items: center;
15392
15353
  justify-content: space-between;
15393
15354
  }
15394
15355
 
15395
- .exp--card__label {
15356
+ .c4p--card__label {
15396
15357
  font-size: var(--cds-label-01-font-size, 0.75rem);
15397
15358
  font-weight: var(--cds-label-01-font-weight, 400);
15398
15359
  line-height: var(--cds-label-01-line-height, 1.33333);
@@ -15400,7 +15361,7 @@ a.bx--side-nav__link--current::before {
15400
15361
  margin-bottom: var(--cds-spacing-01, 0.125rem);
15401
15362
  }
15402
15363
 
15403
- .exp--card__description {
15364
+ .c4p--card__description {
15404
15365
  font-size: var(--cds-caption-01-font-size, 0.75rem);
15405
15366
  font-weight: var(--cds-caption-01-font-weight, 400);
15406
15367
  line-height: var(--cds-caption-01-line-height, 1.33333);
@@ -15408,7 +15369,7 @@ a.bx--side-nav__link--current::before {
15408
15369
  margin-top: var(--cds-spacing-01, 0.125rem);
15409
15370
  }
15410
15371
 
15411
- .exp--card__body {
15372
+ .c4p--card__body {
15412
15373
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
15413
15374
  font-weight: var(--cds-body-short-01-font-weight, 400);
15414
15375
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -15417,33 +15378,33 @@ a.bx--side-nav__link--current::before {
15417
15378
  padding-top: 0;
15418
15379
  }
15419
15380
 
15420
- .exp--card__footer {
15381
+ .c4p--card__footer {
15421
15382
  display: flex;
15422
15383
  justify-content: flex-end;
15423
15384
  }
15424
15385
 
15425
- .exp--card__actions {
15386
+ .c4p--card__actions {
15426
15387
  display: flex;
15427
15388
  flex-direction: row;
15428
15389
  margin: var(--cds-spacing-05, 1rem);
15429
15390
  margin-top: 0;
15430
15391
  }
15431
15392
 
15432
- .exp--card__icon {
15393
+ .c4p--card__icon {
15433
15394
  cursor: pointer;
15434
15395
  }
15435
15396
 
15436
- .exp--card__link {
15397
+ .c4p--card__link {
15437
15398
  color: inherit;
15438
15399
  text-decoration: inherit;
15439
15400
  }
15440
15401
 
15441
- .exp--card__pictogram {
15402
+ .c4p--card__pictogram {
15442
15403
  padding-top: var(--cds-spacing-05, 1rem);
15443
15404
  padding-left: var(--cds-spacing-05, 1rem);
15444
15405
  }
15445
15406
 
15446
- .exp--card__title {
15407
+ .c4p--card__title {
15447
15408
  font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
15448
15409
  font-weight: var(--cds-productive-heading-03-font-weight, 400);
15449
15410
  line-height: var(--cds-productive-heading-03-line-height, 1.4);
@@ -15474,7 +15435,7 @@ a.bx--side-nav__link--current::before {
15474
15435
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15475
15436
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15476
15437
  /* stylelint-disable-line no-invalid-position-at-import-rule */
15477
- .exp--http-errors .exp--http-errors__content {
15438
+ .c4p--http-errors .c4p--http-errors__content {
15478
15439
  position: fixed;
15479
15440
  z-index: 2;
15480
15441
  top: 50%;
@@ -15482,12 +15443,12 @@ a.bx--side-nav__link--current::before {
15482
15443
  transform: translate(-50%, -150%);
15483
15444
  }
15484
15445
  @media (min-width: 42rem) {
15485
- .exp--http-errors .exp--http-errors__content {
15446
+ .c4p--http-errors .c4p--http-errors__content {
15486
15447
  transform: translate(-50%, -50%);
15487
15448
  }
15488
15449
  }
15489
15450
 
15490
- .exp--http-errors .exp--http-errors__error-code-label {
15451
+ .c4p--http-errors .c4p--http-errors__error-code-label {
15491
15452
  font-size: var(--cds-productive-heading-02-font-size, 1rem);
15492
15453
  font-weight: var(--cds-productive-heading-02-font-weight, 600);
15493
15454
  line-height: var(--cds-productive-heading-02-line-height, 1.375);
@@ -15495,7 +15456,7 @@ a.bx--side-nav__link--current::before {
15495
15456
  margin-bottom: var(--cds-spacing-02, 0.25rem);
15496
15457
  }
15497
15458
 
15498
- .exp--http-errors .exp--http-errors__title {
15459
+ .c4p--http-errors .c4p--http-errors__title {
15499
15460
  font-size: var(--cds-productive-heading-05-font-size, 2rem);
15500
15461
  font-weight: var(--cds-productive-heading-05-font-weight, 400);
15501
15462
  line-height: var(--cds-productive-heading-05-line-height, 1.25);
@@ -15503,7 +15464,7 @@ a.bx--side-nav__link--current::before {
15503
15464
  margin-bottom: var(--cds-spacing-04, 0.75rem);
15504
15465
  }
15505
15466
 
15506
- .exp--http-errors .exp--http-errors__description {
15467
+ .c4p--http-errors .c4p--http-errors__description {
15507
15468
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
15508
15469
  font-weight: var(--cds-body-short-01-font-weight, 400);
15509
15470
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -15511,18 +15472,18 @@ a.bx--side-nav__link--current::before {
15511
15472
  margin-bottom: var(--cds-spacing-06, 1.5rem);
15512
15473
  }
15513
15474
 
15514
- .exp--http-errors .exp--http-errors__error-code-label,
15515
- .exp--http-errors .exp--http-errors__title,
15516
- .exp--http-errors .exp--http-errors__description {
15475
+ .c4p--http-errors .c4p--http-errors__error-code-label,
15476
+ .c4p--http-errors .c4p--http-errors__title,
15477
+ .c4p--http-errors .c4p--http-errors__description {
15517
15478
  color: var(--cds-text-01, #161616);
15518
15479
  }
15519
15480
 
15520
- .exp--http-errors .exp--http-errors__link {
15481
+ .c4p--http-errors .c4p--http-errors__link {
15521
15482
  display: block;
15522
15483
  margin-bottom: var(--cds-spacing-02, 0.25rem);
15523
15484
  }
15524
15485
 
15525
- .exp--http-errors .exp--http-errors__image {
15486
+ .c4p--http-errors .c4p--http-errors__image {
15526
15487
  position: fixed;
15527
15488
  top: 50%;
15528
15489
  left: 50%;
@@ -15530,7 +15491,7 @@ a.bx--side-nav__link--current::before {
15530
15491
  transform: translate(-50%, -40%);
15531
15492
  }
15532
15493
  @media (min-width: 42rem) {
15533
- .exp--http-errors .exp--http-errors__image {
15494
+ .c4p--http-errors .c4p--http-errors__image {
15534
15495
  transform: translate(-50%, -50%);
15535
15496
  }
15536
15497
  }
@@ -16148,15 +16109,15 @@ a.bx--side-nav__link--current::before {
16148
16109
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16149
16110
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16150
16111
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16151
- .exp--import-modal .bx--modal-close {
16112
+ .c4p--import-modal .bx--modal-close {
16152
16113
  display: none;
16153
16114
  }
16154
16115
 
16155
- .exp--import-modal .bx--modal-footer .bx--btn {
16116
+ .c4p--import-modal .bx--modal-footer .bx--btn {
16156
16117
  max-width: none;
16157
16118
  }
16158
16119
 
16159
- .exp--import-modal.bx--modal .bx--modal-content {
16120
+ .c4p--import-modal.bx--modal .bx--modal-content {
16160
16121
  padding-right: var(--cds-spacing-05, 1rem);
16161
16122
  }
16162
16123
 
@@ -16169,20 +16130,20 @@ a.bx--side-nav__link--current::before {
16169
16130
  padding-right: calc(20% - var(--cds-spacing-05, 1rem));
16170
16131
  }
16171
16132
 
16172
- .exp--import-modal__input-group {
16133
+ .c4p--import-modal__input-group {
16173
16134
  display: flex;
16174
16135
  }
16175
16136
 
16176
- .exp--import-modal__import-button.bx--btn {
16137
+ .c4p--import-modal__import-button.bx--btn {
16177
16138
  margin-left: var(--cds-spacing-03, 0.5rem);
16178
16139
  }
16179
16140
 
16180
- .exp--import-modal__file-container {
16141
+ .c4p--import-modal__file-container {
16181
16142
  width: 100%;
16182
16143
  }
16183
16144
 
16184
- .exp--import-modal .exp--import-modal__file-drop-header,
16185
- .exp--import-modal .exp--import-modal__label {
16145
+ .c4p--import-modal .c4p--import-modal__file-drop-header,
16146
+ .c4p--import-modal .c4p--import-modal__label {
16186
16147
  margin-bottom: var(--cds-spacing-03, 0.5rem);
16187
16148
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
16188
16149
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
@@ -16190,7 +16151,7 @@ a.bx--side-nav__link--current::before {
16190
16151
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
16191
16152
  }
16192
16153
 
16193
- .exp--import-modal__helper-text {
16154
+ .c4p--import-modal__helper-text {
16194
16155
  margin-top: var(--cds-spacing-06, 1.5rem);
16195
16156
  margin-bottom: var(--cds-spacing-03, 0.5rem);
16196
16157
  font-size: var(--cds-helper-text-01-font-size, 0.75rem);
@@ -16198,21 +16159,21 @@ a.bx--side-nav__link--current::before {
16198
16159
  letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
16199
16160
  }
16200
16161
 
16201
- .exp--import-modal__body {
16162
+ .c4p--import-modal__body {
16202
16163
  padding-right: calc(20% - var(--cds-spacing-05, 1rem));
16203
16164
  margin-bottom: var(--cds-spacing-06, 1.5rem);
16204
16165
  }
16205
16166
 
16206
- .exp--import-modal .bx--file__selected-file {
16167
+ .c4p--import-modal .bx--file__selected-file {
16207
16168
  max-width: none;
16208
16169
  background: var(--cds-ui-02, #ffffff);
16209
16170
  }
16210
16171
 
16211
- .exp--import-modal .bx--file {
16172
+ .c4p--import-modal .bx--file {
16212
16173
  margin-bottom: var(--cds-spacing-05, 1rem);
16213
16174
  }
16214
16175
 
16215
- .exp--import-modal .bx--text-input:disabled {
16176
+ .c4p--import-modal .bx--text-input:disabled {
16216
16177
  background: var(--cds-ui-02, #ffffff);
16217
16178
  }
16218
16179
 
@@ -16307,7 +16268,7 @@ a.bx--side-nav__link--current::before {
16307
16268
  opacity: 0;
16308
16269
  }
16309
16270
  }
16310
- .exp--loading-bar .exp--loading-bar__inner {
16271
+ .c4p--loading-bar .c4p--loading-bar__inner {
16311
16272
  position: relative;
16312
16273
  width: 100%;
16313
16274
  height: 8px;
@@ -16319,30 +16280,30 @@ a.bx--side-nav__link--current::before {
16319
16280
  pointer-events: none;
16320
16281
  }
16321
16282
 
16322
- .exp--loading-bar .exp--loading-bar__inner:hover,
16323
- .exp--loading-bar .exp--loading-bar__inner:focus,
16324
- .exp--loading-bar .exp--loading-bar__inner:active {
16283
+ .c4p--loading-bar .c4p--loading-bar__inner:hover,
16284
+ .c4p--loading-bar .c4p--loading-bar__inner:focus,
16285
+ .c4p--loading-bar .c4p--loading-bar__inner:active {
16325
16286
  border: none;
16326
16287
  cursor: default;
16327
16288
  outline: none;
16328
16289
  }
16329
16290
 
16330
- .exp--loading-bar__preload {
16291
+ .c4p--loading-bar__preload {
16331
16292
  opacity: 0;
16332
16293
  }
16333
16294
 
16334
- .exp--loading-bar__progress {
16295
+ .c4p--loading-bar__progress {
16335
16296
  position: relative;
16336
16297
  height: 8px;
16337
16298
  transition: width 720ms cubic-bezier(0.4, 0.14, 0.3, 1);
16338
16299
  }
16339
16300
 
16340
- .exp--loading-bar__indicator-wrapper {
16301
+ .c4p--loading-bar__indicator-wrapper {
16341
16302
  display: flex;
16342
16303
  justify-content: flex-end;
16343
16304
  }
16344
16305
 
16345
- .exp--loading-bar__indicator {
16306
+ .c4p--loading-bar__indicator {
16346
16307
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
16347
16308
  font-weight: var(--cds-body-short-01-font-weight, 400);
16348
16309
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -16352,23 +16313,23 @@ a.bx--side-nav__link--current::before {
16352
16313
  color: var(--cds-text-01, #161616);
16353
16314
  }
16354
16315
 
16355
- .exp--loading-bar__small {
16316
+ .c4p--loading-bar__small {
16356
16317
  height: 4px;
16357
16318
  }
16358
16319
 
16359
- .exp--loading-bar__small .exp--loading-bar__progress {
16320
+ .c4p--loading-bar__small .c4p--loading-bar__progress {
16360
16321
  height: 4px;
16361
16322
  }
16362
16323
 
16363
- .exp--loading-bar__linear-stop {
16324
+ .c4p--loading-bar__linear-stop {
16364
16325
  display: none;
16365
16326
  }
16366
16327
 
16367
- .exp--loading-bar__indefinite-stop {
16328
+ .c4p--loading-bar__indefinite-stop {
16368
16329
  animation: 1800ms ease-in-out loading-bar-stop forwards;
16369
16330
  }
16370
16331
 
16371
- .exp--loading-bar__stop-progress:before {
16332
+ .c4p--loading-bar__stop-progress:before {
16372
16333
  position: absolute;
16373
16334
  top: 0;
16374
16335
  left: 0;
@@ -16379,7 +16340,7 @@ a.bx--side-nav__link--current::before {
16379
16340
  content: "";
16380
16341
  }
16381
16342
 
16382
- .exp--loading-bar__indefinite-progress:before {
16343
+ .c4p--loading-bar__indefinite-progress:before {
16383
16344
  position: absolute;
16384
16345
  top: 0;
16385
16346
  left: 0;
@@ -16390,7 +16351,7 @@ a.bx--side-nav__link--current::before {
16390
16351
  content: "";
16391
16352
  }
16392
16353
 
16393
- .exp--loading-bar__linear-progress:before {
16354
+ .c4p--loading-bar__linear-progress:before {
16394
16355
  position: absolute;
16395
16356
  top: 0;
16396
16357
  left: 0;
@@ -16655,7 +16616,7 @@ a.bx--side-nav__link--current::before {
16655
16616
  transform: translateY(-38.5rem);
16656
16617
  }
16657
16618
  }
16658
- .exp--notifications-panel__container {
16619
+ .c4p--notifications-panel__container {
16659
16620
  --cds-interactive-01: #0f62fe;
16660
16621
  --cds-interactive-02: #6f6f6f;
16661
16622
  --cds-interactive-03: #ffffff;
@@ -17092,7 +17053,7 @@ a.bx--side-nav__link--current::before {
17092
17053
  transition: transform 110ms;
17093
17054
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
17094
17055
  }
17095
- .exp--notifications-panel__container .exp--notifications-panel__header-container {
17056
+ .c4p--notifications-panel__container .c4p--notifications-panel__header-container {
17096
17057
  position: sticky;
17097
17058
  z-index: 2;
17098
17059
  top: 0;
@@ -17100,25 +17061,25 @@ a.bx--side-nav__link--current::before {
17100
17061
  border-bottom: 1px solid var(--cds-ui-02, #ffffff);
17101
17062
  background-color: var(--cds-ui-background, #ffffff);
17102
17063
  }
17103
- .exp--notifications-panel__container .exp--notifications-panel__header-container .exp--notifications-panel__header-flex {
17064
+ .c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__header-flex {
17104
17065
  display: flex;
17105
17066
  align-items: center;
17106
17067
  justify-content: space-between;
17107
17068
  }
17108
- .exp--notifications-panel__container .exp--notifications-panel__header-container .exp--notifications-panel__do-not-disturb-toggle .bx--toggle__switch {
17069
+ .c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__do-not-disturb-toggle .bx--toggle__switch {
17109
17070
  margin-top: var(--cds-spacing-02, 0.25rem);
17110
17071
  }
17111
- .exp--notifications-panel__container .exp--notifications-panel__header-container .exp--notifications-panel__dismiss-button {
17072
+ .c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__dismiss-button {
17112
17073
  color: var(--cds-text-01, #161616);
17113
17074
  }
17114
- .exp--notifications-panel__container .exp--notifications-panel__header-container .exp--notifications-panel__header {
17075
+ .c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__header {
17115
17076
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
17116
17077
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
17117
17078
  line-height: var(--cds-productive-heading-01-line-height, 1.28572);
17118
17079
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
17119
17080
  margin: 0;
17120
17081
  }
17121
- .exp--notifications-panel__container .exp--notifications-panel__time-section-label {
17082
+ .c4p--notifications-panel__container .c4p--notifications-panel__time-section-label {
17122
17083
  font-size: var(--cds-label-01-font-size, 0.75rem);
17123
17084
  font-weight: var(--cds-label-01-font-weight, 400);
17124
17085
  line-height: var(--cds-label-01-line-height, 1.33333);
@@ -17131,20 +17092,20 @@ a.bx--side-nav__link--current::before {
17131
17092
  background-color: var(--cds-ui-01, #f4f4f4);
17132
17093
  color: var(--cds-text-02, #525252);
17133
17094
  }
17134
- .exp--notifications-panel__container .exp--notifications-panel__notification:hover,
17135
- .exp--notifications-panel__container .exp--notifications-panel__notification:focus {
17095
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification:hover,
17096
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification:focus {
17136
17097
  background-color: var(--cds-ui-03, #e0e0e0);
17137
17098
  }
17138
- .exp--notifications-panel__container .exp--notifications-panel__notification:hover .exp--notifications-panel__dismiss-single-button,
17139
- .exp--notifications-panel__container .exp--notifications-panel__notification:focus .exp--notifications-panel__dismiss-single-button {
17099
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification:hover .c4p--notifications-panel__dismiss-single-button,
17100
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification:focus .c4p--notifications-panel__dismiss-single-button {
17140
17101
  opacity: 1;
17141
17102
  }
17142
- .exp--notifications-panel__container .exp--notifications-panel__notification:focus {
17103
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification:focus {
17143
17104
  border-color: var(--cds-focus, #0f62fe);
17144
17105
  box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe), inset 0 0 0 2px var(--cds-ui-background, #ffffff);
17145
17106
  outline: 0;
17146
17107
  }
17147
- .exp--notifications-panel__container .exp--notifications-panel__notification {
17108
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification {
17148
17109
  position: relative;
17149
17110
  display: flex;
17150
17111
  width: 100%;
@@ -17158,62 +17119,62 @@ a.bx--side-nav__link--current::before {
17158
17119
  transition: background-color 240ms;
17159
17120
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
17160
17121
  }
17161
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-title {
17122
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title {
17162
17123
  margin-bottom: var(--cds-spacing-02, 0.25rem);
17163
17124
  color: var(--cds-text-04, #ffffff);
17164
17125
  font-weight: 400;
17165
17126
  }
17166
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-title.exp--notifications-panel__notification-title-unread {
17127
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title.c4p--notifications-panel__notification-title-unread {
17167
17128
  margin-bottom: var(--cds-spacing-02, 0.25rem);
17168
17129
  color: var(--cds-text-04, #ffffff);
17169
17130
  font-weight: 600;
17170
17131
  }
17171
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notifications-link {
17132
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notifications-link {
17172
17133
  font-size: var(--cds-label-01-font-size, 0.75rem);
17173
17134
  font-weight: var(--cds-label-01-font-weight, 400);
17174
17135
  line-height: var(--cds-label-01-line-height, 1.33333);
17175
17136
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
17176
17137
  }
17177
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-status-icon {
17138
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon {
17178
17139
  min-width: 1rem;
17179
17140
  margin-right: var(--cds-spacing-03, 0.5rem);
17180
17141
  }
17181
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-status-icon.exp--notifications-panel__notification-status-icon-error {
17142
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-error {
17182
17143
  fill: var(--cds-support-01, #da1e28);
17183
17144
  }
17184
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-status-icon.exp--notifications-panel__notification-status-icon-success {
17145
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-success {
17185
17146
  fill: var(--cds-support-02, #198038);
17186
17147
  }
17187
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-status-icon.exp--notifications-panel__notification-status-icon-warning {
17148
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-warning {
17188
17149
  fill: var(--cds-support-03, #f1c21b);
17189
17150
  }
17190
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-status-icon.exp--notifications-panel__notification-status-icon-informational {
17151
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-informational {
17191
17152
  fill: var(--cds-support-04, #0043ce);
17192
17153
  }
17193
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-time-label {
17154
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-time-label {
17194
17155
  margin-bottom: var(--cds-spacing-03, 0.5rem);
17195
17156
  }
17196
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-time-label,
17197
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-description {
17157
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-time-label,
17158
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-description {
17198
17159
  font-size: var(--cds-label-01-font-size, 0.75rem);
17199
17160
  font-weight: var(--cds-label-01-font-weight, 400);
17200
17161
  line-height: var(--cds-label-01-line-height, 1.33333);
17201
17162
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
17202
17163
  color: var(--cds-text-02, #525252);
17203
17164
  }
17204
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-description.exp--notifications-panel__notification-short-description {
17165
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-description.c4p--notifications-panel__notification-short-description {
17205
17166
  display: -webkit-box;
17206
17167
  overflow: hidden;
17207
17168
  -webkit-box-orient: vertical;
17208
17169
  -webkit-line-clamp: 2;
17209
17170
  }
17210
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-description.exp--notifications-panel__notification-long-description {
17171
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-description.c4p--notifications-panel__notification-long-description {
17211
17172
  display: block;
17212
17173
  overflow: initial;
17213
17174
  -webkit-line-clamp: initial;
17214
17175
  }
17215
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-read-more-button,
17216
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-read-less-button {
17176
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button,
17177
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button {
17217
17178
  font-size: var(--cds-label-01-font-size, 0.75rem);
17218
17179
  font-weight: var(--cds-label-01-font-weight, 400);
17219
17180
  line-height: var(--cds-label-01-line-height, 1.33333);
@@ -17221,19 +17182,19 @@ a.bx--side-nav__link--current::before {
17221
17182
  min-width: 5.5rem;
17222
17183
  padding: 0;
17223
17184
  }
17224
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-read-more-button .bx--btn__icon,
17225
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-read-less-button .bx--btn__icon {
17185
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button .bx--btn__icon,
17186
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button .bx--btn__icon {
17226
17187
  transition: transform 240ms ease;
17227
17188
  }
17228
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-read-more-button.exp--notifications-panel__notification-read-more-button .bx--btn__icon,
17229
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-read-less-button.exp--notifications-panel__notification-read-more-button .bx--btn__icon {
17189
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button.c4p--notifications-panel__notification-read-more-button .bx--btn__icon,
17190
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button.c4p--notifications-panel__notification-read-more-button .bx--btn__icon {
17230
17191
  transform: rotate(0deg);
17231
17192
  }
17232
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-read-more-button.exp--notifications-panel__notification-read-less-button .bx--btn__icon,
17233
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-read-less-button.exp--notifications-panel__notification-read-less-button .bx--btn__icon {
17193
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button.c4p--notifications-panel__notification-read-less-button .bx--btn__icon,
17194
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button.c4p--notifications-panel__notification-read-less-button .bx--btn__icon {
17234
17195
  transform: rotate(180deg);
17235
17196
  }
17236
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__dismiss-single-button {
17197
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button {
17237
17198
  position: absolute;
17238
17199
  top: 0;
17239
17200
  right: 0;
@@ -17242,12 +17203,12 @@ a.bx--side-nav__link--current::before {
17242
17203
  color: var(--cds-text-01, #161616);
17243
17204
  opacity: 0;
17244
17205
  }
17245
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__dismiss-single-button:hover, .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__dismiss-single-button:focus {
17206
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button:hover, .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button:focus {
17246
17207
  opacity: 1;
17247
17208
  }
17248
- .exp--notifications-panel__container .exp--notifications-panel__notification-today:not(:first-of-type):before,
17249
- .exp--notifications-panel__container .exp--notifications-panel__notification-yesterday:not(:first-of-type):before,
17250
- .exp--notifications-panel__container .exp--notifications-panel__notification-previous:not(:first-of-type):before {
17209
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification-today:not(:first-of-type):before,
17210
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before,
17211
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification-previous:not(:first-of-type):before {
17251
17212
  position: absolute;
17252
17213
  top: 0;
17253
17214
  width: calc(100% - (2 * var(--cds-spacing-05, 1rem)));
@@ -17258,12 +17219,12 @@ a.bx--side-nav__link--current::before {
17258
17219
  transition: background-color 240ms;
17259
17220
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
17260
17221
  }
17261
- .exp--notifications-panel__container .exp--notifications-panel__notification-today:hover + .exp--notifications-panel__notification-today:not(:first-of-type):before,
17262
- .exp--notifications-panel__container .exp--notifications-panel__notification-yesterday:hover + .exp--notifications-panel__notification-yesterday:not(:first-of-type):before,
17263
- .exp--notifications-panel__container .exp--notifications-panel__notification-previous:hover + .exp--notifications-panel__notification-previous:not(:first-of-type):before {
17222
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification-today:hover + .c4p--notifications-panel__notification-today:not(:first-of-type):before,
17223
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:hover + .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before,
17224
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification-previous:hover + .c4p--notifications-panel__notification-previous:not(:first-of-type):before {
17264
17225
  background-color: transparent;
17265
17226
  }
17266
- .exp--notifications-panel__container .exp--notifications-panel__main-section-empty.exp--notifications-panel__main-section {
17227
+ .c4p--notifications-panel__container .c4p--notifications-panel__main-section-empty.c4p--notifications-panel__main-section {
17267
17228
  display: flex;
17268
17229
  height: 100%;
17269
17230
  min-height: initial;
@@ -17271,16 +17232,16 @@ a.bx--side-nav__link--current::before {
17271
17232
  justify-content: center;
17272
17233
  margin-top: var(--cds-layout-07, 10rem);
17273
17234
  }
17274
- .exp--notifications-panel__container .exp--notifications-panel__main-section-empty.exp--notifications-panel__main-section .exp-subtext {
17235
+ .c4p--notifications-panel__container .c4p--notifications-panel__main-section-empty.c4p--notifications-panel__main-section .c4p-subtext {
17275
17236
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
17276
17237
  font-weight: var(--cds-body-short-01-font-weight, 400);
17277
17238
  line-height: var(--cds-body-short-01-line-height, 1.28572);
17278
17239
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
17279
17240
  }
17280
- .exp--notifications-panel__container .exp--notifications-panel__main-section {
17241
+ .c4p--notifications-panel__container .c4p--notifications-panel__main-section {
17281
17242
  min-height: 498px;
17282
17243
  }
17283
- .exp--notifications-panel__container .exp--notifications-panel__bottom-actions {
17244
+ .c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions {
17284
17245
  position: sticky;
17285
17246
  z-index: 2;
17286
17247
  bottom: 0;
@@ -17291,7 +17252,7 @@ a.bx--side-nav__link--current::before {
17291
17252
  border-top: 1px solid var(--cds-ui-02, #ffffff);
17292
17253
  background-color: var(--cds-ui-background, #ffffff);
17293
17254
  }
17294
- .exp--notifications-panel__container .exp--notifications-panel__bottom-actions .exp--notifications-panel__view-all-button {
17255
+ .c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions .c4p--notifications-panel__view-all-button {
17295
17256
  width: 100%;
17296
17257
  max-width: calc(100% - 2.5rem);
17297
17258
  height: 2.5rem;
@@ -17299,7 +17260,7 @@ a.bx--side-nav__link--current::before {
17299
17260
  border-right: 1px solid var(--cds-ui-02, #ffffff);
17300
17261
  color: var(--cds-text-01, #161616);
17301
17262
  }
17302
- .exp--notifications-panel__container .exp--notifications-panel__bottom-actions .exp--notifications-panel__settings-button {
17263
+ .c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions .c4p--notifications-panel__settings-button {
17303
17264
  display: flex;
17304
17265
  min-width: 2.5rem;
17305
17266
  height: 2.5rem;
@@ -17309,7 +17270,7 @@ a.bx--side-nav__link--current::before {
17309
17270
  padding: 0;
17310
17271
  color: var(--cds-text-01, #161616);
17311
17272
  }
17312
- .exp--notifications-panel__container .exp--notifications-panel__bottom-actions .exp--notifications-panel__settings-button .bx--btn__icon {
17273
+ .c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions .c4p--notifications-panel__settings-button .bx--btn__icon {
17313
17274
  margin: 0;
17314
17275
  }
17315
17276
 
@@ -18045,21 +18006,21 @@ a.bx--side-nav__link--current::before {
18045
18006
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18046
18007
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18047
18008
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18048
- .exp--action-bar.exp--action-bar {
18009
+ .c4p--action-bar.c4p--action-bar {
18049
18010
  display: block;
18050
18011
  }
18051
- .exp--action-bar .exp--action-bar__displayed-items {
18012
+ .c4p--action-bar .c4p--action-bar__displayed-items {
18052
18013
  display: inline-flex;
18053
18014
  width: 100%;
18054
18015
  white-space: nowrap;
18055
18016
  }
18056
- .exp--action-bar .exp--action-bar__displayed-items--right {
18017
+ .c4p--action-bar .c4p--action-bar__displayed-items--right {
18057
18018
  justify-content: flex-end;
18058
18019
  }
18059
- .exp--action-bar .exp--action-bar-overflow-items {
18020
+ .c4p--action-bar .c4p--action-bar-overflow-items {
18060
18021
  display: inline-block;
18061
18022
  }
18062
- .exp--action-bar .exp--action-bar__hidden-sizing-items {
18023
+ .c4p--action-bar .c4p--action-bar__hidden-sizing-items {
18063
18024
  position: absolute;
18064
18025
  top: -100vh;
18065
18026
  left: -100vw;
@@ -18069,15 +18030,15 @@ a.bx--side-nav__link--current::before {
18069
18030
  visibility: hidden;
18070
18031
  }
18071
18032
 
18072
- .exp--action-bar-overflow-items__options .exp--action-bar-overflow-items__item {
18033
+ .c4p--action-bar-overflow-items__options .c4p--action-bar-overflow-items__item {
18073
18034
  padding: 0 var(--cds-spacing-03, 0.5rem);
18074
18035
  }
18075
- .exp--action-bar-overflow-items__options .exp--action-bar-overflow-items__item-content {
18036
+ .c4p--action-bar-overflow-items__options .c4p--action-bar-overflow-items__item-content {
18076
18037
  display: flex;
18077
18038
  width: 100%;
18078
18039
  justify-content: space-between;
18079
18040
  }
18080
- .exp--action-bar-overflow-items__options .exp--action-bar-overflow-items__item svg {
18041
+ .c4p--action-bar-overflow-items__options .c4p--action-bar-overflow-items__item svg {
18081
18042
  margin: 0 var(--cds-spacing-02, 0.25rem);
18082
18043
  }
18083
18044
 
@@ -18140,30 +18101,30 @@ a.bx--side-nav__link--current::before {
18140
18101
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18141
18102
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18142
18103
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18143
- .exp--breadcrumb-with-overflow.exp--breadcrumb-with-overflow {
18104
+ .c4p--breadcrumb-with-overflow.c4p--breadcrumb-with-overflow {
18144
18105
  display: block;
18145
18106
  }
18146
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__space {
18107
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__space {
18147
18108
  position: relative;
18148
18109
  display: block;
18149
18110
  width: 100%;
18150
18111
  white-space: nowrap;
18151
18112
  }
18152
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__breadcrumb-container.exp--breadcrumb-with-overflow__breadcrumb-container-with-items {
18113
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-container.c4p--breadcrumb-with-overflow__breadcrumb-container-with-items {
18153
18114
  display: none;
18154
18115
  width: 100%;
18155
18116
  }
18156
18117
  @media (min-width: 42rem) {
18157
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__breadcrumb-container.exp--breadcrumb-with-overflow__breadcrumb-container-with-items {
18118
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-container.c4p--breadcrumb-with-overflow__breadcrumb-container-with-items {
18158
18119
  display: inline-flex;
18159
18120
  }
18160
18121
  }
18161
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__breadcrumb-container .bx--breadcrumb {
18122
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-container .bx--breadcrumb {
18162
18123
  width: 100%;
18163
18124
  flex-wrap: nowrap;
18164
18125
  align-items: flex-start;
18165
18126
  }
18166
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__breadcrumb-container--hidden {
18127
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-container--hidden {
18167
18128
  position: absolute;
18168
18129
  top: -100vh;
18169
18130
  left: -100vw;
@@ -18172,28 +18133,28 @@ a.bx--side-nav__link--current::before {
18172
18133
  pointer-events: none;
18173
18134
  visibility: hidden;
18174
18135
  }
18175
- .exp--breadcrumb-with-overflow .bx--breadcrumb-item:last-child {
18136
+ .c4p--breadcrumb-with-overflow .bx--breadcrumb-item:last-child {
18176
18137
  display: inline;
18177
18138
  }
18178
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__displayed-breadcrumb:last-child {
18139
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__displayed-breadcrumb:last-child {
18179
18140
  display: inline;
18180
18141
  overflow: hidden;
18181
18142
  }
18182
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__displayed-breadcrumb:last-child .bx--link {
18143
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__displayed-breadcrumb:last-child .bx--link {
18183
18144
  display: inline-block;
18184
18145
  overflow: hidden;
18185
18146
  width: 100%;
18186
18147
  text-overflow: ellipsis;
18187
18148
  }
18188
- .exp--breadcrumb-with-overflow .bx--link {
18149
+ .c4p--breadcrumb-with-overflow .bx--link {
18189
18150
  max-height: 18px;
18190
18151
  }
18191
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__breadcrumb-back-button.bx--btn.bx--btn--icon-only.bx--tooltip__trigger {
18152
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back-button.bx--btn.bx--btn--icon-only.bx--tooltip__trigger {
18192
18153
  display: inline-flex;
18193
18154
  margin-top: calc(-1 * var(--cds-spacing-04, 0.75rem));
18194
18155
  }
18195
18156
  @media (min-width: 42rem) {
18196
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__breadcrumb-back-button.bx--btn.bx--btn--icon-only.bx--tooltip__trigger {
18157
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back-button.bx--btn.bx--btn--icon-only.bx--tooltip__trigger {
18197
18158
  display: none;
18198
18159
  }
18199
18160
  }
@@ -18743,27 +18704,27 @@ a.bx--side-nav__link--current::before {
18743
18704
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18744
18705
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18745
18706
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18746
- .exp--tag-set.exp--tag-set {
18707
+ .c4p--tag-set.c4p--tag-set {
18747
18708
  display: block;
18748
18709
  width: 100%;
18749
18710
  }
18750
- .exp--tag-set .exp--tag-set__space {
18711
+ .c4p--tag-set .c4p--tag-set__space {
18751
18712
  position: relative;
18752
18713
  display: block;
18753
18714
  width: 100%;
18754
18715
  white-space: nowrap;
18755
18716
  }
18756
- .exp--tag-set .exp--tag-set__space--align-end {
18717
+ .c4p--tag-set .c4p--tag-set__space--align-end {
18757
18718
  text-align: end;
18758
18719
  }
18759
- .exp--tag-set .exp--tag-set__space--align-center {
18720
+ .c4p--tag-set .c4p--tag-set__space--align-center {
18760
18721
  text-align: center;
18761
18722
  }
18762
- .exp--tag-set .exp--tag-set__tag-container {
18723
+ .c4p--tag-set .c4p--tag-set__tag-container {
18763
18724
  display: inline-flex;
18764
18725
  white-space: nowrap;
18765
18726
  }
18766
- .exp--tag-set .exp--tag-set__tag-container--hidden {
18727
+ .c4p--tag-set .c4p--tag-set__tag-container--hidden {
18767
18728
  position: absolute;
18768
18729
  top: -100vh;
18769
18730
  left: -100vw;
@@ -18772,43 +18733,43 @@ a.bx--side-nav__link--current::before {
18772
18733
  pointer-events: none;
18773
18734
  visibility: hidden;
18774
18735
  }
18775
- .exp--tag-set .exp--tag-set-overflow {
18736
+ .c4p--tag-set .c4p--tag-set-overflow {
18776
18737
  display: inline-block;
18777
18738
  vertical-align: bottom;
18778
18739
  }
18779
- .exp--tag-set .exp--tag-set-overflow--hidden {
18740
+ .c4p--tag-set .c4p--tag-set-overflow--hidden {
18780
18741
  overflow: hidden;
18781
18742
  max-width: 0;
18782
18743
  visibility: hidden;
18783
18744
  }
18784
18745
 
18785
- .exp--tag-set-modal.exp--tag-set-modal {
18746
+ .c4p--tag-set-modal.c4p--tag-set-modal {
18786
18747
  text-align: initial;
18787
18748
  white-space: initial;
18788
18749
  }
18789
18750
  @media (min-width: 42rem) {
18790
- .exp--tag-set-modal .exp--tag-set-modal__container {
18751
+ .c4p--tag-set-modal .c4p--tag-set-modal__container {
18791
18752
  height: 90%;
18792
18753
  max-height: 450px;
18793
18754
  }
18794
18755
  }
18795
- .exp--tag-set-modal .exp--tag-set-modal__search {
18756
+ .c4p--tag-set-modal .c4p--tag-set-modal__search {
18796
18757
  margin-top: var(--cds-spacing-05, 1rem);
18797
18758
  margin-bottom: 0;
18798
18759
  }
18799
- .exp--tag-set-modal.exp--tag-set-modal .exp--tag-set-modal__fade {
18760
+ .c4p--tag-set-modal.c4p--tag-set-modal .c4p--tag-set-modal__fade {
18800
18761
  position: relative;
18801
18762
  margin-right: var(--cds-spacing-05, 1rem);
18802
18763
  margin-left: var(--cds-spacing-05, 1rem);
18803
18764
  }
18804
- .exp--tag-set-modal .exp--tag-set-modal__body {
18765
+ .c4p--tag-set-modal .c4p--tag-set-modal__body {
18805
18766
  padding-bottom: var(--cds-spacing-06, 1.5rem);
18806
18767
  }
18807
- .exp--tag-set-modal .exp--tag-set-modal__header {
18768
+ .c4p--tag-set-modal .c4p--tag-set-modal__header {
18808
18769
  padding-right: 0;
18809
18770
  margin-right: var(--cds-spacing-05, 1rem);
18810
18771
  }
18811
- .exp--tag-set-modal.exp--tag-set-modal .exp--tag-set-modal__fade::after {
18772
+ .c4p--tag-set-modal.c4p--tag-set-modal .c4p--tag-set-modal__fade::after {
18812
18773
  position: absolute;
18813
18774
  top: calc(-1 * var(--cds-spacing-11, 5rem));
18814
18775
  left: 0;
@@ -18818,15 +18779,15 @@ a.bx--side-nav__link--current::before {
18818
18779
  content: "";
18819
18780
  }
18820
18781
 
18821
- .exp--tag-set-overflow__tooltip.exp--tag-set-overflow__tooltip {
18782
+ .c4p--tag-set-overflow__tooltip.c4p--tag-set-overflow__tooltip {
18822
18783
  min-width: initial;
18823
18784
  }
18824
- .exp--tag-set-overflow__tooltip .exp--tag-set-overflow__show-all-tags-link {
18785
+ .c4p--tag-set-overflow__tooltip .c4p--tag-set-overflow__show-all-tags-link {
18825
18786
  display: inline-block;
18826
18787
  margin: var(--cds-spacing-03, 0.5rem) 0 var(--cds-spacing-02, 0.25rem);
18827
18788
  }
18828
- .exp--tag-set-overflow__tooltip .exp--tag-set-overflow__tag-item,
18829
- .exp--tag-set-overflow__tooltip .exp--tag-set-overflow__tag-item .bx--tag {
18789
+ .c4p--tag-set-overflow__tooltip .c4p--tag-set-overflow__tag-item,
18790
+ .c4p--tag-set-overflow__tooltip .c4p--tag-set-overflow__tag-item .bx--tag {
18830
18791
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
18831
18792
  font-weight: var(--cds-body-short-01-font-weight, 400);
18832
18793
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -18842,17 +18803,17 @@ a.bx--side-nav__link--current::before {
18842
18803
  text-overflow: ellipsis;
18843
18804
  white-space: nowrap;
18844
18805
  }
18845
- .exp--tag-set-overflow__tooltip .exp--tag-set-overflow__tag .bx--tag__close-icon {
18806
+ .c4p--tag-set-overflow__tooltip .c4p--tag-set-overflow__tag .bx--tag__close-icon {
18846
18807
  padding: 0;
18847
18808
  }
18848
- .exp--tag-set-overflow__tooltip .exp--tag-set-overflow__tag .bx--tag--high-contrast {
18809
+ .c4p--tag-set-overflow__tooltip .c4p--tag-set-overflow__tag .bx--tag--high-contrast {
18849
18810
  background-color: var(--cds-ui-background, #ffffff);
18850
18811
  color: var(--cds-text-01, #161616);
18851
18812
  }
18852
- .exp--tag-set-overflow__tooltip .exp--tag-set-overflow__tag .bx--tag__close-icon:hover {
18813
+ .c4p--tag-set-overflow__tooltip .c4p--tag-set-overflow__tag .bx--tag__close-icon:hover {
18853
18814
  background-color: var(--cds-hover-ui, #e5e5e5);
18854
18815
  }
18855
- .exp--tag-set-overflow__tooltip .exp--tag-set-overflow__tag .bx--tag__close-icon:focus {
18816
+ .c4p--tag-set-overflow__tooltip .c4p--tag-set-overflow__tag .bx--tag__close-icon:focus {
18856
18817
  box-shadow: inset 0 0 0 var(--cds-spacing-01, 0.125rem) var(--cds-focus, #0f62fe);
18857
18818
  }
18858
18819
 
@@ -18907,19 +18868,19 @@ a.bx--side-nav__link--current::before {
18907
18868
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18908
18869
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18909
18870
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18910
- .exp--button-set-with-overflow.exp--button-set-with-overflow {
18871
+ .c4p--button-set-with-overflow.c4p--button-set-with-overflow {
18911
18872
  display: flex;
18912
18873
  }
18913
- .exp--button-set-with-overflow .exp--button-set-with-overflow__space {
18874
+ .c4p--button-set-with-overflow .c4p--button-set-with-overflow__space {
18914
18875
  position: relative;
18915
18876
  display: block;
18916
18877
  width: 100%;
18917
18878
  white-space: nowrap;
18918
18879
  }
18919
- .exp--button-set-with-overflow .exp--button-set-with-overflow__button-container {
18880
+ .c4p--button-set-with-overflow .c4p--button-set-with-overflow__button-container {
18920
18881
  display: inline-flex;
18921
18882
  }
18922
- .exp--button-set-with-overflow .exp--button-set-with-overflow__button-container--hidden {
18883
+ .c4p--button-set-with-overflow .c4p--button-set-with-overflow__button-container--hidden {
18923
18884
  position: absolute;
18924
18885
  top: -100vh;
18925
18886
  left: -100vw;
@@ -18928,7 +18889,7 @@ a.bx--side-nav__link--current::before {
18928
18889
  pointer-events: none;
18929
18890
  visibility: hidden;
18930
18891
  }
18931
- .exp--button-set-with-overflow.exp--button-set-with-overflow--right {
18892
+ .c4p--button-set-with-overflow.c4p--button-set-with-overflow--right {
18932
18893
  justify-content: flex-end;
18933
18894
  }
18934
18895
 
@@ -18940,76 +18901,86 @@ a.bx--side-nav__link--current::before {
18940
18901
  background-color: var(--to-color);
18941
18902
  }
18942
18903
  }
18943
- .exp--page-header.exp--page-header {
18904
+ @keyframes background-and-shadow-appear {
18905
+ from {
18906
+ background-color: var(--from-color);
18907
+ box-shadow: 0 1px 0 var(--from-color);
18908
+ }
18909
+ to {
18910
+ background-color: var(--to-color);
18911
+ box-shadow: 0 1px 0 var(--to-color-shadow);
18912
+ }
18913
+ }
18914
+ .c4p--page-header.c4p--page-header {
18944
18915
  /* Bleed class for the background */
18945
18916
  position: sticky;
18946
18917
  /* z-index used to raise above any position relative content as per Carbon header */
18947
18918
  /* dropped 1 below Carbon header so as not to overlay the side panel */
18948
18919
  z-index: 7999;
18949
- top: var(--exp--page-header--header-top);
18920
+ top: var(--c4p--page-header--header-top);
18950
18921
  display: inline-block;
18951
18922
  /* cause top/bottom margin to reserve space */
18952
18923
  width: 100%;
18953
18924
  background-color: var(--cds-ui-background, #ffffff);
18954
18925
  color: var(--cds-text-01, #161616);
18955
18926
  /* custom props */
18956
- --exp--page-header--breadcrumb-title-visibility: hidden;
18957
- --exp--page-header--breadcrumb-title-opacity: 1;
18958
- --exp--page-header--breadcrumb-top: 0;
18959
- --exp--page-header--background-opacity: 1;
18960
- --exp--page-header--breadcrumb-title-top: initial;
18961
- --exp--page-header--button-set-in-breadcrumb-width-px: initial;
18962
- --exp--page-header--navigation-buffer-top: $spacing-06;
18963
- }
18964
- .exp--page-header.exp--page-header--has-navigation-tags-only {
18965
- --exp--page-header--navigation-buffer-top: $spacing-04;
18966
- }
18967
- .exp--page-header::before {
18927
+ --c4p--page-header--breadcrumb-title-visibility: hidden;
18928
+ --c4p--page-header--breadcrumb-title-opacity: 1;
18929
+ --c4p--page-header--breadcrumb-top: 0;
18930
+ --c4p--page-header--background-opacity: 1;
18931
+ --c4p--page-header--breadcrumb-title-top: initial;
18932
+ --c4p--page-header--button-set-in-breadcrumb-width-px: initial;
18933
+ --c4p--page-header--navigation-buffer-top: $spacing-06;
18934
+ }
18935
+ .c4p--page-header.c4p--page-header--has-navigation-tags-only {
18936
+ --c4p--page-header--navigation-buffer-top: $spacing-04;
18937
+ }
18938
+ .c4p--page-header::before {
18968
18939
  --from-color: var(--cds-ui-background, #ffffff);
18969
18940
  --to-color: var(--cds-ui-01, #f4f4f4);
18941
+ --to-color-shadow: var(--cds-ui-03, #e0e0e0);
18970
18942
  position: absolute;
18971
18943
  top: 0;
18972
18944
  left: 0;
18973
18945
  display: block;
18974
18946
  width: 100%;
18975
18947
  height: 100%;
18976
- animation: background-appear 1000ms calc(-1000ms * var(--exp--page-header--background-opacity)) linear paused forwards;
18948
+ animation: background-and-shadow-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
18977
18949
  content: "";
18978
18950
  z-index: -1;
18979
- box-shadow: 0 1px 0 var(--cds-ui-03, #e0e0e0);
18980
18951
  }
18981
- .exp--page-header .exp--page-header--width--xl {
18952
+ .c4p--page-header .c4p--page-header--width--xl {
18982
18953
  padding-right: var(--cds-spacing-07, 2rem);
18983
18954
  padding-left: var(--cds-spacing-07, 2rem);
18984
18955
  }
18985
- .exp--page-header .exp--page-header__breadcrumb-row {
18956
+ .c4p--page-header .c4p--page-header__breadcrumb-row {
18986
18957
  position: sticky;
18987
18958
  z-index: 99;
18988
- top: var(--exp--page-header--breadcrumb-top);
18959
+ top: var(--c4p--page-header--breadcrumb-top);
18989
18960
  min-height: var(--cds-spacing-08, 2.5rem);
18990
18961
  }
18991
- .exp--page-header .exp--page-header__breadcrumb-row + .exp--page-header__last-row-buffer--active {
18962
+ .c4p--page-header .c4p--page-header__breadcrumb-row + .c4p--page-header__last-row-buffer--active {
18992
18963
  height: var(--cds-spacing-02, 0.25rem);
18993
18964
  }
18994
- .exp--page-header .exp--page-header__breadcrumb-row:not(.exp--page-header__breadcrumb-row--has-action-bar) {
18965
+ .c4p--page-header .c4p--page-header__breadcrumb-row:not(.c4p--page-header__breadcrumb-row--has-action-bar) {
18995
18966
  margin-bottom: calc(-1 * var(--cds-spacing-03, 0.5rem));
18996
18967
  }
18997
- .exp--page-header .exp--page-header__breadcrumb-row--container {
18968
+ .c4p--page-header .c4p--page-header__breadcrumb-row--container {
18998
18969
  display: flex;
18999
18970
  min-width: 100%;
19000
18971
  flex-wrap: nowrap;
19001
18972
  }
19002
- .exp--page-header .exp--page-header__has-page-actions-without-action-bar {
18973
+ .c4p--page-header .c4p--page-header__has-page-actions-without-action-bar {
19003
18974
  min-width: calc(0.6 * (100% + 2 * var(--cds-spacing-05, 1rem)));
19004
18975
  max-width: calc(0.6 * (100% + 2 * var(--cds-spacing-05, 1rem)));
19005
18976
  }
19006
- .exp--page-header .exp--page-header__has-page-actions-without-action-bar .exp--page-header__has-page-actions-without-action-bar {
18977
+ .c4p--page-header .c4p--page-header__has-page-actions-without-action-bar .c4p--page-header__has-page-actions-without-action-bar {
19007
18978
  min-width: 100%;
19008
18979
  }
19009
- .exp--page-header .exp--page-header__breadcrumb-row--has-action-bar .exp--page-header__breadcrumb-row--container {
19010
- min-width: calc(100% + (var(--exp--page-header--width-px) - var(--exp--page-header--breadcrumb-row-width-px)) / 2);
18980
+ .c4p--page-header .c4p--page-header__breadcrumb-row--has-action-bar .c4p--page-header__breadcrumb-row--container {
18981
+ min-width: calc(100% + (var(--c4p--page-header--width-px) - var(--c4p--page-header--breadcrumb-row-width-px)) / 2);
19011
18982
  }
19012
- .exp--page-header .exp--page-header__breadcrumb-row::after {
18983
+ .c4p--page-header .c4p--page-header__breadcrumb-row::after {
19013
18984
  position: absolute;
19014
18985
  bottom: 0;
19015
18986
  left: 50%;
@@ -19023,204 +18994,205 @@ a.bx--side-nav__link--current::before {
19023
18994
  transform: translateX(-50%) scaleX(1);
19024
18995
  transition: all 150ms ease-out;
19025
18996
  }
19026
- .exp--page-header .exp--page-header__breadcrumb-row--next-to-tabs::after,
19027
- .exp--page-header .exp--page-header__breadcrumb-row--has-action-bar::after {
18997
+ .c4p--page-header .c4p--page-header__breadcrumb-row--next-to-tabs::after,
18998
+ .c4p--page-header .c4p--page-header__breadcrumb-row--has-action-bar::after {
19028
18999
  /* creates a full width box shadow without causing scroll */
19029
19000
  box-shadow: 25vw 1px 0 0 var(--cds-ui-03, #e0e0e0), -25vw 1px 0 0 var(--cds-ui-03, #e0e0e0);
19030
19001
  opacity: 1;
19031
19002
  }
19032
- .exp--page-header .exp--page-header__breadcrumb-container {
19003
+ .c4p--page-header .c4p--page-header__breadcrumb-container {
19033
19004
  width: 100%;
19034
19005
  }
19035
- .exp--page-header .exp--page-header__action-bar-column {
19006
+ .c4p--page-header .c4p--page-header__action-bar-column {
19036
19007
  display: none;
19037
19008
  }
19038
- .exp--page-header .exp--page-header__breadcrumb-row--has-breadcrumbs .exp--page-header__action-bar-column {
19009
+ .c4p--page-header .c4p--page-header__breadcrumb-row--has-breadcrumbs .c4p--page-header__action-bar-column {
19039
19010
  max-width: 75%;
19040
19011
  flex: 0 1 75%;
19041
19012
  }
19042
19013
  @media (min-width: 42rem) {
19043
- .exp--page-header .exp--page-header__breadcrumb-row--has-breadcrumbs .exp--page-header__action-bar-column {
19014
+ .c4p--page-header .c4p--page-header__breadcrumb-row--has-breadcrumbs .c4p--page-header__action-bar-column {
19044
19015
  max-width: 40%;
19045
19016
  flex: 1 0 40%;
19046
19017
  }
19047
19018
  }
19048
- .exp--page-header .exp--page-header__breadcrumb-row--has-action-bar .exp--page-header__action-bar-column {
19019
+ .c4p--page-header .c4p--page-header__breadcrumb-row--has-action-bar .c4p--page-header__action-bar-column {
19049
19020
  display: initial;
19050
19021
  }
19051
- .exp--page-header .exp--page-header__action-bar-column-content {
19022
+ .c4p--page-header .c4p--page-header__action-bar-column-content {
19052
19023
  display: flex;
19053
19024
  justify-content: flex-end;
19054
19025
  white-space: nowrap;
19055
19026
  }
19056
19027
  @media (min-width: 66rem) {
19057
- .exp--page-header .exp--page-header__action-bar-column-content {
19028
+ .c4p--page-header .c4p--page-header__action-bar-column-content {
19058
19029
  flex-wrap: nowrap;
19059
19030
  /* assume enough space */
19060
19031
  }
19061
19032
  }
19062
- .exp--page-header .exp--page-header__breadcrumb-row .exp--page-header__page-actions {
19033
+ .c4p--page-header .c4p--page-header__breadcrumb-row .c4p--page-header__page-actions {
19063
19034
  position: relative;
19064
19035
  display: inline-block;
19065
19036
  width: 100%;
19066
- max-width: var(--exp--page-header--button-set-in-breadcrumb-width-px);
19067
- flex: 1 1 var(--exp--page-header--button-set-in-breadcrumb-width-px);
19037
+ max-width: var(--c4p--page-header--button-set-in-breadcrumb-width-px);
19038
+ flex: 1 1 var(--c4p--page-header--button-set-in-breadcrumb-width-px);
19068
19039
  opacity: 0;
19069
19040
  transition: opacity 240ms cubic-bezier(0, 0, 0.38, 0.9);
19070
19041
  visibility: hidden;
19071
19042
  white-space: nowrap;
19072
19043
  }
19073
- .exp--page-header .exp--page-header__breadcrumb-row .exp--page-header__page-actions--in-breadcrumb {
19044
+ .c4p--page-header .c4p--page-header__breadcrumb-row .c4p--page-header__page-actions--in-breadcrumb {
19074
19045
  opacity: 1;
19075
19046
  visibility: visible;
19076
19047
  }
19077
- .exp--page-header .exp--page-header__breadcrumb-column {
19048
+ .c4p--page-header .c4p--page-header__breadcrumb-column {
19078
19049
  max-width: 100%;
19079
19050
  flex: 0 0 100%;
19080
19051
  }
19081
19052
  @media (min-width: 42rem) {
19082
- .exp--page-header .exp--page-header__breadcrumb-column {
19053
+ .c4p--page-header .c4p--page-header__breadcrumb-column {
19083
19054
  overflow: hidden;
19084
19055
  /* required for ellipsis in title, title not visible in breadcrumb with back arrow */
19085
19056
  }
19086
19057
  }
19087
- .exp--page-header .exp--page-header__breadcrumb-row--has-action-bar.exp--page-header__breadcrumb-row .exp--page-header__breadcrumb-column {
19058
+ .c4p--page-header .c4p--page-header__breadcrumb-row--has-action-bar.c4p--page-header__breadcrumb-row .c4p--page-header__breadcrumb-column {
19088
19059
  max-width: 75%;
19089
19060
  flex: 0 1 75%;
19090
19061
  }
19091
19062
  @media (min-width: 42rem) {
19092
- .exp--page-header .exp--page-header__breadcrumb-row--has-action-bar.exp--page-header__breadcrumb-row .exp--page-header__breadcrumb-column {
19063
+ .c4p--page-header .c4p--page-header__breadcrumb-row--has-action-bar.c4p--page-header__breadcrumb-row .c4p--page-header__breadcrumb-column {
19093
19064
  max-width: 60%;
19094
19065
  flex: 0 1 60%;
19095
19066
  }
19096
19067
  }
19097
- .exp--page-header .exp--page-header__has-page-actions-without-action-bar.exp--page-header__breadcrumb-row .exp--page-header__breadcrumb-column {
19068
+ .c4p--page-header .c4p--page-header__has-page-actions-without-action-bar.c4p--page-header__breadcrumb-row .c4p--page-header__breadcrumb-column {
19098
19069
  max-width: 100%;
19099
19070
  flex: 0 1 100%;
19100
19071
  }
19101
- .exp--page-header .exp--page-header__breadcrumb-column--background,
19102
- .exp--page-header .exp--page-header__action-bar-column--background {
19072
+ .c4p--page-header .c4p--page-header__breadcrumb-column--background,
19073
+ .c4p--page-header .c4p--page-header__action-bar-column--background {
19103
19074
  position: relative;
19104
19075
  }
19105
- .exp--page-header .exp--page-header__breadcrumb-column--background::before,
19106
- .exp--page-header .exp--page-header__action-bar-column--background::before {
19076
+ .c4p--page-header .c4p--page-header__breadcrumb-column--background::before,
19077
+ .c4p--page-header .c4p--page-header__action-bar-column--background::before {
19107
19078
  --from-color: var(--cds-ui-background, #ffffff);
19108
19079
  --to-color: var(--cds-ui-01, #f4f4f4);
19080
+ --to-color-shadow: var(--cds-ui-03, #e0e0e0);
19109
19081
  position: absolute;
19110
19082
  top: 0;
19111
19083
  left: 0;
19112
19084
  display: block;
19113
19085
  width: 100%;
19114
19086
  height: 100%;
19115
- animation: background-appear 1000ms calc(-1000ms * var(--exp--page-header--background-opacity)) linear paused forwards;
19087
+ animation: background-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
19116
19088
  content: "";
19117
19089
  }
19118
- .exp--page-header .exp--page-header__action-bar-column--influenced-by-collapse-button {
19090
+ .c4p--page-header .c4p--page-header__action-bar-column--influenced-by-collapse-button {
19119
19091
  padding-right: var(--cds-spacing-08, 2.5rem);
19120
19092
  }
19121
- .exp--page-header .exp--page-header__breadcrumb {
19093
+ .c4p--page-header .c4p--page-header__breadcrumb {
19122
19094
  font-size: var(--cds-label-01-font-size, 0.75rem);
19123
19095
  font-weight: var(--cds-label-01-font-weight, 400);
19124
19096
  line-height: var(--cds-label-01-line-height, 1.33333);
19125
19097
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
19126
19098
  padding-top: var(--cds-spacing-04, 0.75rem);
19127
19099
  }
19128
- .exp--page-header .exp--page-header--breadcrumb.exp--breadcrumb-with-overflow__with-items {
19100
+ .c4p--page-header .c4p--page-header--breadcrumb.c4p--breadcrumb-with-overflow__with-items {
19129
19101
  padding-top: 0;
19130
19102
  }
19131
19103
  @media (min-width: 42rem) {
19132
- .exp--page-header .exp--page-header--breadcrumb.exp--breadcrumb-with-overflow__with-items {
19104
+ .c4p--page-header .c4p--page-header--breadcrumb.c4p--breadcrumb-with-overflow__with-items {
19133
19105
  padding-top: var(--cds-spacing-04, 0.75rem);
19134
19106
  }
19135
19107
  }
19136
- .exp--page-header .exp--page-header__breadcrumb .bx--breadcrumb-item {
19108
+ .c4p--page-header .c4p--page-header__breadcrumb .bx--breadcrumb-item {
19137
19109
  margin-right: var(--cds-spacing-02, 0.25rem);
19138
19110
  }
19139
- .exp--page-header .exp--page-header__breadcrumb .bx--breadcrumb-item::after {
19111
+ .c4p--page-header .c4p--page-header__breadcrumb .bx--breadcrumb-item::after {
19140
19112
  margin-left: var(--cds-spacing-02, 0.25rem);
19141
19113
  }
19142
- .exp--page-header .exp--page-header__breadcrumb .bx--breadcrumb-item,
19143
- .exp--page-header .exp--page-header__breadcrumb .bx--breadcrumb-item .bx--link {
19114
+ .c4p--page-header .c4p--page-header__breadcrumb .bx--breadcrumb-item,
19115
+ .c4p--page-header .c4p--page-header__breadcrumb .bx--breadcrumb-item .bx--link {
19144
19116
  font-size: var(--cds-label-01-font-size, 0.75rem);
19145
19117
  font-weight: var(--cds-label-01-font-weight, 400);
19146
19118
  line-height: var(--cds-label-01-line-height, 1.33333);
19147
19119
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
19148
19120
  }
19149
- .exp--page-header .exp--page-header__breadcrumb-title {
19121
+ .c4p--page-header .c4p--page-header__breadcrumb-title {
19150
19122
  position: relative;
19151
19123
  }
19152
- .exp--page-header .exp--page-header__breadcrumb-title:not(.exp--page-header__breadcrumb-title--pre-collapsed) {
19153
- opacity: var(--exp--page-header--breadcrumb-title-opacity);
19154
- transform: translateY(var(--exp--page-header--breadcrumb-title-top));
19124
+ .c4p--page-header .c4p--page-header__breadcrumb-title:not(.c4p--page-header__breadcrumb-title--pre-collapsed) {
19125
+ opacity: var(--c4p--page-header--breadcrumb-title-opacity);
19126
+ transform: translateY(var(--c4p--page-header--breadcrumb-title-top));
19155
19127
  /* token linter does not support this form */
19156
- visibility: var(--exp--page-header--breadcrumb-title-visibility);
19128
+ visibility: var(--c4p--page-header--breadcrumb-title-visibility);
19157
19129
  }
19158
- .exp--page-header .exp--page-header__breadcrumb-container--hidden .exp--page-header__breadcrumb-title.exp--page-header__breadcrumb-title {
19130
+ .c4p--page-header .c4p--page-header__breadcrumb-container--hidden .c4p--page-header__breadcrumb-title.c4p--page-header__breadcrumb-title {
19159
19131
  overflow: initial;
19160
19132
  }
19161
- .exp--page-header .exp--page-header__action-bar {
19133
+ .c4p--page-header .c4p--page-header__action-bar {
19162
19134
  width: 100%;
19163
- max-width: var(--exp--page-header--max-action-bar-width-px);
19164
- flex: 1 1 var(--exp--page-header--max-action-bar-width-px);
19135
+ max-width: var(--c4p--page-header--max-action-bar-width-px);
19136
+ flex: 1 1 var(--c4p--page-header--max-action-bar-width-px);
19165
19137
  padding-top: var(--cds-spacing-04, 0.75rem);
19166
19138
  margin-top: calc(-1 * var(--cds-spacing-04, 0.75rem));
19167
19139
  /* align with breadcrumb */
19168
19140
  vertical-align: top;
19169
19141
  white-space: nowrap;
19170
19142
  }
19171
- .exp--page-header .exp--page-header__title-row {
19143
+ .c4p--page-header .c4p--page-header__title-row {
19172
19144
  margin-top: 0;
19173
19145
  margin-bottom: 0;
19174
19146
  }
19175
19147
  @media (min-width: 42rem) {
19176
- .exp--page-header .exp--page-header__title-row {
19148
+ .c4p--page-header .c4p--page-header__title-row {
19177
19149
  flex-wrap: nowrap;
19178
19150
  /* assume enough space */
19179
19151
  }
19180
19152
  }
19181
- .exp--page-header .exp--page-header__title-row.exp--page-header__title-row--under-action-bar {
19153
+ .c4p--page-header .c4p--page-header__title-row.c4p--page-header__title-row--under-action-bar {
19182
19154
  margin-top: var(--cds-spacing-05, 1rem);
19183
19155
  }
19184
- .exp--page-header .exp--page-header__title-row + .exp--page-header__last-row-buffer--active {
19156
+ .c4p--page-header .c4p--page-header__title-row + .c4p--page-header__last-row-buffer--active {
19185
19157
  height: var(--cds-spacing-07, 2rem);
19186
19158
  }
19187
- .exp--page-header .exp--page-header__title-row.exp--page-header__title-row--spacing-below-03 {
19159
+ .c4p--page-header .c4p--page-header__title-row.c4p--page-header__title-row--spacing-below-03 {
19188
19160
  margin-bottom: var(--cds-spacing-03, 0.5rem);
19189
19161
  }
19190
- .exp--page-header .exp--page-header__title-row.exp--page-header__title-row--spacing-below-05 + .exp--page-header__last-row-buffer--active {
19162
+ .c4p--page-header .c4p--page-header__title-row.c4p--page-header__title-row--spacing-below-05 + .c4p--page-header__last-row-buffer--active {
19191
19163
  height: var(--cds-spacing-05, 1rem);
19192
19164
  }
19193
- .exp--page-header .exp--page-header__title-row.exp--page-header__title-row--spacing-below-06 {
19165
+ .c4p--page-header .c4p--page-header__title-row.c4p--page-header__title-row--spacing-below-06 {
19194
19166
  margin-bottom: var(--cds-spacing-06, 1.5rem);
19195
19167
  }
19196
- .exp--page-header .exp--page-header__title-row.exp--page-header__title-row--no-breadcrumb-row {
19168
+ .c4p--page-header .c4p--page-header__title-row.c4p--page-header__title-row--no-breadcrumb-row {
19197
19169
  margin-top: var(--cds-spacing-07, 2rem);
19198
19170
  }
19199
- .exp--page-header.exp--page-header--has-navigation .exp--page-header__title-row + .exp--page-header__last-row-buffer--active {
19171
+ .c4p--page-header.c4p--page-header--has-navigation .c4p--page-header__title-row + .c4p--page-header__last-row-buffer--active {
19200
19172
  height: calc(var(--cds-spacing-06, 1.5rem));
19201
19173
  }
19202
- .exp--page-header.exp--page-header--has-navigation-tags-only .exp--page-header__title-row + .exp--page-header__last-row-buffer--active {
19174
+ .c4p--page-header.c4p--page-header--has-navigation-tags-only .c4p--page-header__title-row + .c4p--page-header__last-row-buffer--active {
19203
19175
  height: calc(var(--cds-spacing-05, 1rem));
19204
19176
  }
19205
- .exp--page-header .exp--page-header__title-row--sticky {
19177
+ .c4p--page-header .c4p--page-header__title-row--sticky {
19206
19178
  position: sticky;
19207
19179
  }
19208
- .exp--page-header .exp--page-header__breadcrumb-row--has-breadcrumbs + .exp--page-header__title-row--sticky {
19209
- top: var(--exp--page-header--breadcrumb-top);
19180
+ .c4p--page-header .c4p--page-header__breadcrumb-row--has-breadcrumbs + .c4p--page-header__title-row--sticky {
19181
+ top: var(--c4p--page-header--breadcrumb-top);
19210
19182
  }
19211
- .exp--page-header .exp--page-header__title-column {
19183
+ .c4p--page-header .c4p--page-header__title-column {
19212
19184
  overflow: hidden;
19213
19185
  /* required for ellipsis in title */
19214
19186
  min-height: 40px;
19215
19187
  flex: 0 0 100%;
19216
19188
  }
19217
19189
  @media (min-width: 42rem) {
19218
- .exp--page-header .exp--page-header__title-column {
19190
+ .c4p--page-header .c4p--page-header__title-column {
19219
19191
  max-width: 60%;
19220
19192
  flex: 1 0 60%;
19221
19193
  }
19222
19194
  }
19223
- .exp--page-header .exp--page-header__title {
19195
+ .c4p--page-header .c4p--page-header__title {
19224
19196
  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
19225
19197
  font-weight: var(--cds-productive-heading-04-font-weight, 400);
19226
19198
  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
@@ -19229,72 +19201,73 @@ a.bx--side-nav__link--current::before {
19229
19201
  text-overflow: ellipsis;
19230
19202
  white-space: nowrap;
19231
19203
  }
19232
- .exp--page-header .exp--page-header__title-skeleton {
19204
+ .c4p--page-header .c4p--page-header__title-skeleton {
19233
19205
  height: var(--cds-spacing-07, 2rem);
19234
19206
  }
19235
- .exp--page-header .exp--page-header__title--fades {
19236
- opacity: calc(1 - var(--exp--page-header--breadcrumb-title-opacity));
19207
+ .c4p--page-header .c4p--page-header__title--fades {
19208
+ opacity: calc(1 - var(--c4p--page-header--breadcrumb-title-opacity));
19237
19209
  }
19238
- .exp--page-header .exp--page-header__title-icon {
19210
+ .c4p--page-header .c4p--page-header__title-icon {
19239
19211
  margin-right: var(--cds-spacing-04, 0.75rem);
19240
19212
  transform: translateY(-2px);
19241
19213
  vertical-align: middle;
19242
19214
  }
19243
- .exp--page-header .exp--page-header__page-actions {
19215
+ .c4p--page-header .c4p--page-header__page-actions {
19244
19216
  flex: 0 0 100%;
19245
19217
  margin-top: var(--cds-spacing-05, 1rem);
19246
19218
  white-space: nowrap;
19247
19219
  }
19248
19220
  @media (min-width: 42rem) {
19249
- .exp--page-header .exp--page-header__page-actions {
19221
+ .c4p--page-header .c4p--page-header__page-actions {
19250
19222
  max-width: 40%;
19251
19223
  flex: 0 1 40%;
19252
19224
  margin-top: 0;
19253
19225
  }
19254
19226
  }
19255
- .exp--page-header .exp--page-header__page-actions .bx--btn-set .bx--btn {
19227
+ .c4p--page-header .c4p--page-header__page-actions .bx--btn-set .bx--btn {
19256
19228
  width: initial;
19257
19229
  }
19258
- .exp--page-header .exp--page-header__action-bar-column .exp--page-header__page-actions {
19230
+ .c4p--page-header .c4p--page-header__action-bar-column .c4p--page-header__page-actions {
19259
19231
  margin-top: 0;
19260
19232
  }
19261
- .exp--page-header .exp--page-header__page-actions-container {
19233
+ .c4p--page-header .c4p--page-header__page-actions-container {
19262
19234
  justify-content: flex-start;
19263
19235
  }
19264
19236
  @media (min-width: 42rem) {
19265
- .exp--page-header .exp--page-header__page-actions-container {
19237
+ .c4p--page-header .c4p--page-header__page-actions-container {
19266
19238
  justify-content: flex-end;
19267
19239
  }
19268
19240
  }
19269
- .exp--page-header .exp--page-header__title-row .exp--page-header__page-actions {
19241
+ .c4p--page-header .c4p--page-header__title-row .c4p--page-header__page-actions {
19270
19242
  position: relative;
19271
19243
  opacity: 1;
19272
19244
  transition: all 110ms cubic-bezier(0, 0, 0.38, 0.9);
19273
19245
  transition-property: opacity, visibility;
19274
19246
  visibility: visible;
19275
19247
  }
19276
- .exp--page-header .exp--page-header__title-row .exp--page-header__page-actions::before {
19248
+ .c4p--page-header .c4p--page-header__title-row .c4p--page-header__page-actions::before {
19277
19249
  --from-color: var(--cds-ui-background, #ffffff);
19278
19250
  --to-color: var(--cds-ui-01, #f4f4f4);
19251
+ --to-color-shadow: var(--cds-ui-03, #e0e0e0);
19279
19252
  position: absolute;
19280
19253
  top: 0;
19281
19254
  left: 0;
19282
19255
  display: block;
19283
19256
  width: 100%;
19284
19257
  height: 100%;
19285
- animation: background-appear 1000ms calc(-1000ms * var(--exp--page-header--background-opacity)) linear paused forwards;
19258
+ animation: background-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
19286
19259
  content: "";
19287
19260
  }
19288
- .exp--page-header .exp--page-header__page-actions-content {
19261
+ .c4p--page-header .c4p--page-header__page-actions-content {
19289
19262
  position: relative;
19290
19263
  width: 100%;
19291
19264
  height: 100%;
19292
19265
  }
19293
- .exp--page-header .exp--page-header__title-row .exp--page-header__page-actions--in-breadcrumb {
19266
+ .c4p--page-header .c4p--page-header__title-row .c4p--page-header__page-actions--in-breadcrumb {
19294
19267
  opacity: 0;
19295
19268
  visibility: hidden;
19296
19269
  }
19297
- .exp--page-header .exp--page-header__subtitle-row {
19270
+ .c4p--page-header .c4p--page-header__subtitle-row {
19298
19271
  display: -webkit-box;
19299
19272
  overflow: hidden;
19300
19273
  max-width: 100%;
@@ -19303,58 +19276,58 @@ a.bx--side-nav__link--current::before {
19303
19276
  -webkit-line-clamp: 2;
19304
19277
  }
19305
19278
  @media (min-width: 42rem) {
19306
- .exp--page-header .exp--page-header__subtitle-row {
19279
+ .c4p--page-header .c4p--page-header__subtitle-row {
19307
19280
  max-width: 60%;
19308
19281
  }
19309
19282
  }
19310
- .exp--page-header .exp--page-header__subtitle-row + .exp--page-header__last-row-buffer--active {
19283
+ .c4p--page-header .c4p--page-header__subtitle-row + .c4p--page-header__last-row-buffer--active {
19311
19284
  height: var(--cds-spacing-05, 1rem);
19312
19285
  }
19313
- .exp--page-header .exp--page-header__subtitle {
19286
+ .c4p--page-header .c4p--page-header__subtitle {
19314
19287
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
19315
19288
  font-weight: var(--cds-body-long-01-font-weight, 400);
19316
19289
  line-height: var(--cds-body-long-01-line-height, 1.42857);
19317
19290
  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
19318
19291
  }
19319
- .exp--page-header .exp--page-header__available-row {
19292
+ .c4p--page-header .c4p--page-header__available-row {
19320
19293
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
19321
19294
  font-weight: var(--cds-body-long-01-font-weight, 400);
19322
19295
  line-height: var(--cds-body-long-01-line-height, 1.42857);
19323
19296
  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
19324
19297
  margin-top: var(--cds-spacing-03, 0.5rem);
19325
19298
  }
19326
- .exp--page-header .exp--page-header__available-row + .exp--page-header__last-row-buffer--active {
19299
+ .c4p--page-header .c4p--page-header__available-row + .c4p--page-header__last-row-buffer--active {
19327
19300
  height: var(--cds-spacing-05, 1rem);
19328
19301
  }
19329
- .exp--page-header .exp--page-header__title-row + .exp--page-header__available-row {
19302
+ .c4p--page-header .c4p--page-header__title-row + .c4p--page-header__available-row {
19330
19303
  margin-top: var(--cds-spacing-05, 1rem);
19331
19304
  }
19332
- .exp--page-header .exp--page-header__available-row * {
19305
+ .c4p--page-header .c4p--page-header__available-row * {
19333
19306
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
19334
19307
  font-weight: var(--cds-body-long-01-font-weight, 400);
19335
19308
  line-height: var(--cds-body-long-01-line-height, 1.42857);
19336
19309
  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
19337
19310
  }
19338
- .exp--page-header .exp--page-header__navigation-row {
19311
+ .c4p--page-header .c4p--page-header__navigation-row {
19339
19312
  flex-wrap: wrap-reverse;
19340
19313
  margin-top: 0;
19341
19314
  }
19342
- .exp--page-header .exp--page-header__navigation-row .bx--content-switcher {
19315
+ .c4p--page-header .c4p--page-header__navigation-row .bx--content-switcher {
19343
19316
  box-sizing: content-box;
19344
19317
  padding-bottom: var(--cds-spacing-05, 1rem);
19345
19318
  }
19346
- .exp--page-header .exp--page-header__navigation-row .bx--tab-content {
19319
+ .c4p--page-header .c4p--page-header__navigation-row .bx--tab-content {
19347
19320
  display: none;
19348
19321
  /* need to figure out how to handle the tab content */
19349
19322
  }
19350
- .exp--page-header .exp--page-header__navigation-tabs {
19323
+ .c4p--page-header .c4p--page-header__navigation-tabs {
19351
19324
  margin-left: calc(-1 * var(--cds-spacing-05, 1rem));
19352
19325
  }
19353
- .exp--page-header .exp--page-header__navigation-row--has-tags .exp--page-header__navigation-tabs {
19326
+ .c4p--page-header .c4p--page-header__navigation-row--has-tags .c4p--page-header__navigation-tabs {
19354
19327
  max-width: 75%;
19355
19328
  flex: 0 1 75%;
19356
19329
  }
19357
- .exp--page-header .exp--page-header__navigation-tags {
19330
+ .c4p--page-header .c4p--page-header__navigation-tags {
19358
19331
  display: flex;
19359
19332
  max-width: 25%;
19360
19333
  flex: 1 0 25%;
@@ -19367,49 +19340,49 @@ a.bx--side-nav__link--current::before {
19367
19340
  white-space: nowrap;
19368
19341
  }
19369
19342
  @media (min-width: 42rem) {
19370
- .exp--page-header .exp--page-header__navigation-tags {
19343
+ .c4p--page-header .c4p--page-header__navigation-tags {
19371
19344
  padding-right: var(--cds-spacing-05, 1rem);
19372
19345
  }
19373
19346
  }
19374
- .exp--page-header .exp--page-header__navigation-tags--tags-only {
19347
+ .c4p--page-header .c4p--page-header__navigation-tags--tags-only {
19375
19348
  justify-content: flex-start;
19376
19349
  padding-top: 0;
19377
19350
  padding-bottom: var(--cds-spacing-04, 0.75rem);
19378
19351
  margin-left: calc(-1 * var(--cds-spacing-02, 0.25rem));
19379
19352
  text-align: initial;
19380
19353
  }
19381
- .exp--page-header .exp--page-header__navigation-row .bx--content-switcher-btn {
19354
+ .c4p--page-header .c4p--page-header__navigation-row .bx--content-switcher-btn {
19382
19355
  background-color: var(--cds-ui-background, #ffffff);
19383
19356
  }
19384
- .exp--page-header .bx--btn.bx--btn--icon-only.exp--page-header__collapse-expand-toggle {
19357
+ .c4p--page-header .bx--btn.bx--btn--icon-only.c4p--page-header__collapse-expand-toggle {
19385
19358
  position: absolute;
19386
19359
  z-index: 100;
19387
19360
  right: 0;
19388
19361
  bottom: 0;
19389
19362
  }
19390
- .exp--page-header .exp--page-header__collapse-expand-toggle .bx--btn__icon {
19363
+ .c4p--page-header .c4p--page-header__collapse-expand-toggle .bx--btn__icon {
19391
19364
  transition: all 400ms cubic-bezier(0.2, 0, 0.38, 0.9);
19392
19365
  }
19393
- .exp--page-header .exp--page-header__collapse-expand-toggle--collapsed .bx--btn__icon {
19366
+ .c4p--page-header .c4p--page-header__collapse-expand-toggle--collapsed .bx--btn__icon {
19394
19367
  transform: scaleY(-1);
19395
19368
  }
19396
19369
 
19397
19370
  :root {
19398
- --exp--page-header--tagset-tooltip-offset: 0;
19371
+ --c4p--page-header--tagset-tooltip-offset: 0;
19399
19372
  }
19400
19373
 
19401
- .exp--page-header__tagset-tooltip.exp--page-header__tagset-tooltip {
19402
- position: var(--exp--page-header--tagset-tooltip-position) !important;
19403
- top: var(--exp--page-header--tagset-tooltip-offset) !important;
19374
+ .c4p--page-header__tagset-tooltip.c4p--page-header__tagset-tooltip {
19375
+ position: var(--c4p--page-header--tagset-tooltip-position) !important;
19376
+ top: var(--c4p--page-header--tagset-tooltip-offset) !important;
19404
19377
  }
19405
19378
 
19406
- .exp--page-header__navigation-tags-overflow.bx--tooltip {
19379
+ .c4p--page-header__navigation-tags-overflow.bx--tooltip {
19407
19380
  z-index: 7999;
19408
19381
  }
19409
19382
 
19410
- .exp--page-header__action-bar-menu-options.bx--overflow-menu-options,
19383
+ .c4p--page-header__action-bar-menu-options.bx--overflow-menu-options,
19411
19384
  .bx--breadcrumb-menu-options.bx--overflow-menu-options,
19412
- .exp--page-header__button-set-menu-options.bx--overflow-menu-options {
19385
+ .c4p--page-header__button-set-menu-options.bx--overflow-menu-options {
19413
19386
  z-index: 7999;
19414
19387
  }
19415
19388
 
@@ -19487,47 +19460,47 @@ a.bx--side-nav__link--current::before {
19487
19460
  /* stylelint-disable-line no-invalid-position-at-import-rule */
19488
19461
  /* stylelint-disable-line no-invalid-position-at-import-rule */
19489
19462
  /* stylelint-disable-line no-invalid-position-at-import-rule */
19490
- .exp--card__productive .exp--card__header {
19463
+ .c4p--card__productive .c4p--card__header {
19491
19464
  padding-right: 0;
19492
19465
  }
19493
- .exp--card__productive .exp--card__title {
19466
+ .c4p--card__productive .c4p--card__title {
19494
19467
  font-size: var(--cds-productive-heading-02-font-size, 1rem);
19495
19468
  font-weight: var(--cds-productive-heading-02-font-weight, 600);
19496
19469
  line-height: var(--cds-productive-heading-02-line-height, 1.375);
19497
19470
  letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
19498
19471
  }
19499
- .exp--card__productive .exp--card__title-lg .exp--card__title {
19472
+ .c4p--card__productive .c4p--card__title-lg .c4p--card__title {
19500
19473
  font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
19501
19474
  font-weight: var(--cds-productive-heading-03-font-weight, 400);
19502
19475
  line-height: var(--cds-productive-heading-03-line-height, 1.4);
19503
19476
  letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
19504
19477
  }
19505
- .exp--card__productive .exp--card__body {
19478
+ .c4p--card__productive .c4p--card__body {
19506
19479
  padding-top: var(--cds-spacing-03, 0.5rem);
19507
19480
  }
19508
- .exp--card__productive .exp--card__footer {
19481
+ .c4p--card__productive .c4p--card__footer {
19509
19482
  align-items: center;
19510
19483
  justify-content: space-between;
19511
19484
  border-top: 1px solid var(--cds-ui-03, #e0e0e0);
19512
19485
  }
19513
- .exp--card__productive .exp--card__footer-no-button {
19486
+ .c4p--card__productive .c4p--card__footer-no-button {
19514
19487
  justify-content: flex-end;
19515
19488
  }
19516
- .exp--card__productive .exp--card__actions {
19489
+ .c4p--card__productive .c4p--card__actions {
19517
19490
  margin: 0;
19518
19491
  }
19519
- .exp--card__productive .exp--card__actions-header {
19492
+ .c4p--card__productive .c4p--card__actions-header {
19520
19493
  margin-top: calc(-1 * var(--cds-spacing-02, 0.25rem));
19521
19494
  margin-right: var(--cds-spacing-03, 0.5rem);
19522
19495
  }
19523
- .exp--card__productive .exp--card__title-lg .exp--card__actions-header,
19524
- .exp--card__productive .exp--card__header-has-label .exp--card__actions-header {
19496
+ .c4p--card__productive .c4p--card__title-lg .c4p--card__actions-header,
19497
+ .c4p--card__productive .c4p--card__header-has-label .c4p--card__actions-header {
19525
19498
  margin-top: 0;
19526
19499
  }
19527
- .exp--card__productive .exp--card__icon {
19500
+ .c4p--card__productive .c4p--card__icon {
19528
19501
  margin-right: var(--cds-spacing-05, 1rem);
19529
19502
  }
19530
- .exp--card__productive .exp--card__header-container {
19503
+ .c4p--card__productive .c4p--card__header-container {
19531
19504
  align-items: start;
19532
19505
  }
19533
19506
 
@@ -19684,19 +19657,19 @@ a.bx--side-nav__link--current::before {
19684
19657
  /* stylelint-disable-line no-invalid-position-at-import-rule */
19685
19658
  /* stylelint-disable-line no-invalid-position-at-import-rule */
19686
19659
  /* stylelint-disable-line no-invalid-position-at-import-rule */
19687
- .exp--remove-modal .bx--modal-footer .bx--btn {
19660
+ .c4p--remove-modal .bx--modal-footer .bx--btn {
19688
19661
  max-width: none;
19689
19662
  }
19690
19663
 
19691
- .exp--remove-modal .bx--modal-content {
19664
+ .c4p--remove-modal .bx--modal-content {
19692
19665
  padding-right: var(--cds-spacing-05, 1rem);
19693
19666
  }
19694
19667
 
19695
- .exp--remove-modal .bx--modal-close {
19668
+ .c4p--remove-modal .bx--modal-close {
19696
19669
  display: none;
19697
19670
  }
19698
19671
 
19699
- .exp--remove-modal__body {
19672
+ .c4p--remove-modal__body {
19700
19673
  padding-right: 20%;
19701
19674
  margin-bottom: var(--cds-spacing-05, 1rem);
19702
19675
  }
@@ -19799,26 +19772,26 @@ a.bx--side-nav__link--current::before {
19799
19772
  stroke-dashoffset: 0;
19800
19773
  }
19801
19774
  }
19802
- .exp--saving__message {
19775
+ .c4p--saving__message {
19803
19776
  display: flex;
19804
19777
  }
19805
19778
 
19806
- .exp--saving__error-icon {
19779
+ .c4p--saving__error-icon {
19807
19780
  margin-right: var(--cds-spacing-05, 1rem);
19808
19781
  }
19809
19782
 
19810
- .exp--saving__error-icon svg {
19783
+ .c4p--saving__error-icon svg {
19811
19784
  fill: var(--cds-danger-01, #da1e28);
19812
19785
  }
19813
19786
 
19814
- .exp--saving__text {
19787
+ .c4p--saving__text {
19815
19788
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
19816
19789
  font-weight: var(--cds-body-short-01-font-weight, 400);
19817
19790
  line-height: var(--cds-body-short-01-line-height, 1.28572);
19818
19791
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
19819
19792
  }
19820
19793
 
19821
- .exp--saving__buttons {
19794
+ .c4p--saving__buttons {
19822
19795
  display: flex;
19823
19796
  }
19824
19797
 
@@ -19992,403 +19965,403 @@ a.bx--side-nav__link--current::before {
19992
19965
  transform: scaleY(-1) rotate(0deg);
19993
19966
  }
19994
19967
  }
19995
- .exp--status-icon {
19968
+ .c4p--status-icon {
19996
19969
  display: flex;
19997
19970
  justify-content: flex-end;
19998
19971
  }
19999
19972
 
20000
- .exp--status-icon--light.exp--status-icon--light-minor-warning,
20001
- .exp--status-icon--dark.exp--status-icon--dark-minor-warning {
19973
+ .c4p--status-icon--light.c4p--status-icon--light-minor-warning,
19974
+ .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning {
20002
19975
  fill: #fddc69;
20003
19976
  }
20004
19977
 
20005
- .exp--status-icon--light.exp--status-icon--light-major-warning path:nth-of-type(1),
20006
- .exp--status-icon--dark.exp--status-icon--dark-major-warning path:nth-of-type(1),
20007
- .exp--status-icon--light.exp--status-icon--light-minor-warning path:nth-of-type(1),
20008
- .exp--status-icon--dark.exp--status-icon--dark-minor-warning path:nth-of-type(1) {
19978
+ .c4p--status-icon--light.c4p--status-icon--light-major-warning path:nth-of-type(1),
19979
+ .c4p--status-icon--dark.c4p--status-icon--dark-major-warning path:nth-of-type(1),
19980
+ .c4p--status-icon--light.c4p--status-icon--light-minor-warning path:nth-of-type(1),
19981
+ .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning path:nth-of-type(1) {
20009
19982
  fill: #161616;
20010
19983
  }
20011
19984
 
20012
- .exp--status-icon--light.exp--status-icon--light-fatal {
19985
+ .c4p--status-icon--light.c4p--status-icon--light-fatal {
20013
19986
  fill: #000000;
20014
19987
  }
20015
19988
  @media (prefers-reduced-motion) {
20016
- .exp--status-icon--light.exp--status-icon--light-fatal .exp--status-icon--light.exp--status-icon--light-in-progress {
19989
+ .c4p--status-icon--light.c4p--status-icon--light-fatal .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20017
19990
  animation: none;
20018
19991
  }
20019
19992
  }
20020
19993
 
20021
- .exp--status-icon--light.exp--status-icon--dark-fatal {
19994
+ .c4p--status-icon--light.c4p--status-icon--dark-fatal {
20022
19995
  fill: #000000;
20023
19996
  }
20024
19997
  @media (prefers-reduced-motion) {
20025
- .exp--status-icon--light.exp--status-icon--dark-fatal .exp--status-icon--light.exp--status-icon--dark-in-progress {
19998
+ .c4p--status-icon--light.c4p--status-icon--dark-fatal .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20026
19999
  animation: none;
20027
20000
  }
20028
20001
  }
20029
20002
 
20030
- .exp--status-icon--light.exp--status-icon--light-critical {
20003
+ .c4p--status-icon--light.c4p--status-icon--light-critical {
20031
20004
  fill: #da1e28;
20032
20005
  }
20033
20006
  @media (prefers-reduced-motion) {
20034
- .exp--status-icon--light.exp--status-icon--light-critical .exp--status-icon--light.exp--status-icon--light-in-progress {
20007
+ .c4p--status-icon--light.c4p--status-icon--light-critical .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20035
20008
  animation: none;
20036
20009
  }
20037
20010
  }
20038
20011
 
20039
- .exp--status-icon--light.exp--status-icon--dark-critical {
20012
+ .c4p--status-icon--light.c4p--status-icon--dark-critical {
20040
20013
  fill: #da1e28;
20041
20014
  }
20042
20015
  @media (prefers-reduced-motion) {
20043
- .exp--status-icon--light.exp--status-icon--dark-critical .exp--status-icon--light.exp--status-icon--dark-in-progress {
20016
+ .c4p--status-icon--light.c4p--status-icon--dark-critical .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20044
20017
  animation: none;
20045
20018
  }
20046
20019
  }
20047
20020
 
20048
- .exp--status-icon--light.exp--status-icon--light-major-warning {
20021
+ .c4p--status-icon--light.c4p--status-icon--light-major-warning {
20049
20022
  fill: #ff832b;
20050
20023
  }
20051
20024
  @media (prefers-reduced-motion) {
20052
- .exp--status-icon--light.exp--status-icon--light-major-warning .exp--status-icon--light.exp--status-icon--light-in-progress {
20025
+ .c4p--status-icon--light.c4p--status-icon--light-major-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20053
20026
  animation: none;
20054
20027
  }
20055
20028
  }
20056
20029
 
20057
- .exp--status-icon--light.exp--status-icon--dark-major-warning {
20030
+ .c4p--status-icon--light.c4p--status-icon--dark-major-warning {
20058
20031
  fill: #ff832b;
20059
20032
  }
20060
20033
  @media (prefers-reduced-motion) {
20061
- .exp--status-icon--light.exp--status-icon--dark-major-warning .exp--status-icon--light.exp--status-icon--dark-in-progress {
20034
+ .c4p--status-icon--light.c4p--status-icon--dark-major-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20062
20035
  animation: none;
20063
20036
  }
20064
20037
  }
20065
20038
 
20066
- .exp--status-icon--light.exp--status-icon--light-minor-warning {
20039
+ .c4p--status-icon--light.c4p--status-icon--light-minor-warning {
20067
20040
  fill: #fddc69;
20068
20041
  }
20069
20042
  @media (prefers-reduced-motion) {
20070
- .exp--status-icon--light.exp--status-icon--light-minor-warning .exp--status-icon--light.exp--status-icon--light-in-progress {
20043
+ .c4p--status-icon--light.c4p--status-icon--light-minor-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20071
20044
  animation: none;
20072
20045
  }
20073
20046
  }
20074
20047
 
20075
- .exp--status-icon--light.exp--status-icon--dark-minor-warning {
20048
+ .c4p--status-icon--light.c4p--status-icon--dark-minor-warning {
20076
20049
  fill: #fddc69;
20077
20050
  }
20078
20051
  @media (prefers-reduced-motion) {
20079
- .exp--status-icon--light.exp--status-icon--dark-minor-warning .exp--status-icon--light.exp--status-icon--dark-in-progress {
20052
+ .c4p--status-icon--light.c4p--status-icon--dark-minor-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20080
20053
  animation: none;
20081
20054
  }
20082
20055
  }
20083
20056
 
20084
- .exp--status-icon--light.exp--status-icon--light-undefined {
20057
+ .c4p--status-icon--light.c4p--status-icon--light-undefined {
20085
20058
  fill: #8a3ffc;
20086
20059
  }
20087
20060
  @media (prefers-reduced-motion) {
20088
- .exp--status-icon--light.exp--status-icon--light-undefined .exp--status-icon--light.exp--status-icon--light-in-progress {
20061
+ .c4p--status-icon--light.c4p--status-icon--light-undefined .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20089
20062
  animation: none;
20090
20063
  }
20091
20064
  }
20092
20065
 
20093
- .exp--status-icon--light.exp--status-icon--dark-undefined {
20066
+ .c4p--status-icon--light.c4p--status-icon--dark-undefined {
20094
20067
  fill: #8a3ffc;
20095
20068
  }
20096
20069
  @media (prefers-reduced-motion) {
20097
- .exp--status-icon--light.exp--status-icon--dark-undefined .exp--status-icon--light.exp--status-icon--dark-in-progress {
20070
+ .c4p--status-icon--light.c4p--status-icon--dark-undefined .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20098
20071
  animation: none;
20099
20072
  }
20100
20073
  }
20101
20074
 
20102
- .exp--status-icon--light.exp--status-icon--light-unknown {
20075
+ .c4p--status-icon--light.c4p--status-icon--light-unknown {
20103
20076
  fill: #6f6f6f;
20104
20077
  }
20105
20078
  @media (prefers-reduced-motion) {
20106
- .exp--status-icon--light.exp--status-icon--light-unknown .exp--status-icon--light.exp--status-icon--light-in-progress {
20079
+ .c4p--status-icon--light.c4p--status-icon--light-unknown .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20107
20080
  animation: none;
20108
20081
  }
20109
20082
  }
20110
20083
 
20111
- .exp--status-icon--light.exp--status-icon--dark-unknown {
20084
+ .c4p--status-icon--light.c4p--status-icon--dark-unknown {
20112
20085
  fill: #6f6f6f;
20113
20086
  }
20114
20087
  @media (prefers-reduced-motion) {
20115
- .exp--status-icon--light.exp--status-icon--dark-unknown .exp--status-icon--light.exp--status-icon--dark-in-progress {
20088
+ .c4p--status-icon--light.c4p--status-icon--dark-unknown .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20116
20089
  animation: none;
20117
20090
  }
20118
20091
  }
20119
20092
 
20120
- .exp--status-icon--light.exp--status-icon--light-normal {
20093
+ .c4p--status-icon--light.c4p--status-icon--light-normal {
20121
20094
  fill: #198038;
20122
20095
  }
20123
20096
  @media (prefers-reduced-motion) {
20124
- .exp--status-icon--light.exp--status-icon--light-normal .exp--status-icon--light.exp--status-icon--light-in-progress {
20097
+ .c4p--status-icon--light.c4p--status-icon--light-normal .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20125
20098
  animation: none;
20126
20099
  }
20127
20100
  }
20128
20101
 
20129
- .exp--status-icon--light.exp--status-icon--dark-normal {
20102
+ .c4p--status-icon--light.c4p--status-icon--dark-normal {
20130
20103
  fill: #198038;
20131
20104
  }
20132
20105
  @media (prefers-reduced-motion) {
20133
- .exp--status-icon--light.exp--status-icon--dark-normal .exp--status-icon--light.exp--status-icon--dark-in-progress {
20106
+ .c4p--status-icon--light.c4p--status-icon--dark-normal .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20134
20107
  animation: none;
20135
20108
  }
20136
20109
  }
20137
20110
 
20138
- .exp--status-icon--light.exp--status-icon--light-info {
20111
+ .c4p--status-icon--light.c4p--status-icon--light-info {
20139
20112
  fill: #0f62fe;
20140
20113
  }
20141
20114
  @media (prefers-reduced-motion) {
20142
- .exp--status-icon--light.exp--status-icon--light-info .exp--status-icon--light.exp--status-icon--light-in-progress {
20115
+ .c4p--status-icon--light.c4p--status-icon--light-info .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20143
20116
  animation: none;
20144
20117
  }
20145
20118
  }
20146
20119
 
20147
- .exp--status-icon--light.exp--status-icon--dark-info {
20120
+ .c4p--status-icon--light.c4p--status-icon--dark-info {
20148
20121
  fill: #0f62fe;
20149
20122
  }
20150
20123
  @media (prefers-reduced-motion) {
20151
- .exp--status-icon--light.exp--status-icon--dark-info .exp--status-icon--light.exp--status-icon--dark-in-progress {
20124
+ .c4p--status-icon--light.c4p--status-icon--dark-info .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20152
20125
  animation: none;
20153
20126
  }
20154
20127
  }
20155
20128
 
20156
- .exp--status-icon--light.exp--status-icon--light-in-progress {
20129
+ .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20157
20130
  animation: rotating 8000ms infinite linear;
20158
20131
  fill: #0f62fe;
20159
20132
  }
20160
20133
  @media (prefers-reduced-motion: reduce) {
20161
- .exp--status-icon--light.exp--status-icon--light-in-progress {
20134
+ .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20162
20135
  animation: none;
20163
20136
  }
20164
20137
  }
20165
20138
 
20166
- .exp--status-icon--light.exp--status-icon--dark-in-progress {
20139
+ .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20167
20140
  animation: rotating 8000ms infinite linear;
20168
20141
  fill: #0f62fe;
20169
20142
  }
20170
20143
  @media (prefers-reduced-motion: reduce) {
20171
- .exp--status-icon--light.exp--status-icon--dark-in-progress {
20144
+ .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20172
20145
  animation: none;
20173
20146
  }
20174
20147
  }
20175
20148
 
20176
- .exp--status-icon--light.exp--status-icon--light-running {
20149
+ .c4p--status-icon--light.c4p--status-icon--light-running {
20177
20150
  fill: #198038;
20178
20151
  transform: scaleY(-1);
20179
20152
  }
20180
20153
 
20181
- .exp--status-icon--light.exp--status-icon--dark-running {
20154
+ .c4p--status-icon--light.c4p--status-icon--dark-running {
20182
20155
  fill: #198038;
20183
20156
  transform: scaleY(-1);
20184
20157
  }
20185
20158
 
20186
- .exp--status-icon--light.exp--status-icon--light-pending {
20159
+ .c4p--status-icon--light.c4p--status-icon--light-pending {
20187
20160
  fill: #6f6f6f;
20188
20161
  }
20189
20162
  @media (prefers-reduced-motion) {
20190
- .exp--status-icon--light.exp--status-icon--light-pending .exp--status-icon--light.exp--status-icon--light-in-progress {
20163
+ .c4p--status-icon--light.c4p--status-icon--light-pending .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20191
20164
  animation: none;
20192
20165
  }
20193
20166
  }
20194
20167
 
20195
- .exp--status-icon--light.exp--status-icon--dark-pending {
20168
+ .c4p--status-icon--light.c4p--status-icon--dark-pending {
20196
20169
  fill: #6f6f6f;
20197
20170
  }
20198
20171
  @media (prefers-reduced-motion) {
20199
- .exp--status-icon--light.exp--status-icon--dark-pending .exp--status-icon--light.exp--status-icon--dark-in-progress {
20172
+ .c4p--status-icon--light.c4p--status-icon--dark-pending .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20200
20173
  animation: none;
20201
20174
  }
20202
20175
  }
20203
20176
 
20204
- .exp--status-icon--dark.exp--status-icon--light-fatal {
20177
+ .c4p--status-icon--dark.c4p--status-icon--light-fatal {
20205
20178
  fill: #8d8d8d;
20206
20179
  }
20207
20180
  @media (prefers-reduced-motion) {
20208
- .exp--status-icon--dark.exp--status-icon--light-fatal .exp--status-icon--dark.exp--status-icon--light-in-progress {
20181
+ .c4p--status-icon--dark.c4p--status-icon--light-fatal .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20209
20182
  animation: none;
20210
20183
  }
20211
20184
  }
20212
20185
 
20213
- .exp--status-icon--dark.exp--status-icon--dark-fatal {
20186
+ .c4p--status-icon--dark.c4p--status-icon--dark-fatal {
20214
20187
  fill: #8d8d8d;
20215
20188
  }
20216
20189
  @media (prefers-reduced-motion) {
20217
- .exp--status-icon--dark.exp--status-icon--dark-fatal .exp--status-icon--dark.exp--status-icon--dark-in-progress {
20190
+ .c4p--status-icon--dark.c4p--status-icon--dark-fatal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20218
20191
  animation: none;
20219
20192
  }
20220
20193
  }
20221
20194
 
20222
- .exp--status-icon--dark.exp--status-icon--light-critical {
20195
+ .c4p--status-icon--dark.c4p--status-icon--light-critical {
20223
20196
  fill: #fa4d56;
20224
20197
  }
20225
20198
  @media (prefers-reduced-motion) {
20226
- .exp--status-icon--dark.exp--status-icon--light-critical .exp--status-icon--dark.exp--status-icon--light-in-progress {
20199
+ .c4p--status-icon--dark.c4p--status-icon--light-critical .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20227
20200
  animation: none;
20228
20201
  }
20229
20202
  }
20230
20203
 
20231
- .exp--status-icon--dark.exp--status-icon--dark-critical {
20204
+ .c4p--status-icon--dark.c4p--status-icon--dark-critical {
20232
20205
  fill: #fa4d56;
20233
20206
  }
20234
20207
  @media (prefers-reduced-motion) {
20235
- .exp--status-icon--dark.exp--status-icon--dark-critical .exp--status-icon--dark.exp--status-icon--dark-in-progress {
20208
+ .c4p--status-icon--dark.c4p--status-icon--dark-critical .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20236
20209
  animation: none;
20237
20210
  }
20238
20211
  }
20239
20212
 
20240
- .exp--status-icon--dark.exp--status-icon--light-major-warning {
20213
+ .c4p--status-icon--dark.c4p--status-icon--light-major-warning {
20241
20214
  fill: #ff832b;
20242
20215
  }
20243
20216
  @media (prefers-reduced-motion) {
20244
- .exp--status-icon--dark.exp--status-icon--light-major-warning .exp--status-icon--dark.exp--status-icon--light-in-progress {
20217
+ .c4p--status-icon--dark.c4p--status-icon--light-major-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20245
20218
  animation: none;
20246
20219
  }
20247
20220
  }
20248
20221
 
20249
- .exp--status-icon--dark.exp--status-icon--dark-major-warning {
20222
+ .c4p--status-icon--dark.c4p--status-icon--dark-major-warning {
20250
20223
  fill: #ff832b;
20251
20224
  }
20252
20225
  @media (prefers-reduced-motion) {
20253
- .exp--status-icon--dark.exp--status-icon--dark-major-warning .exp--status-icon--dark.exp--status-icon--dark-in-progress {
20226
+ .c4p--status-icon--dark.c4p--status-icon--dark-major-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20254
20227
  animation: none;
20255
20228
  }
20256
20229
  }
20257
20230
 
20258
- .exp--status-icon--dark.exp--status-icon--light-minor-warning {
20231
+ .c4p--status-icon--dark.c4p--status-icon--light-minor-warning {
20259
20232
  fill: #fddc69;
20260
20233
  }
20261
20234
  @media (prefers-reduced-motion) {
20262
- .exp--status-icon--dark.exp--status-icon--light-minor-warning .exp--status-icon--dark.exp--status-icon--light-in-progress {
20235
+ .c4p--status-icon--dark.c4p--status-icon--light-minor-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20263
20236
  animation: none;
20264
20237
  }
20265
20238
  }
20266
20239
 
20267
- .exp--status-icon--dark.exp--status-icon--dark-minor-warning {
20240
+ .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning {
20268
20241
  fill: #fddc69;
20269
20242
  }
20270
20243
  @media (prefers-reduced-motion) {
20271
- .exp--status-icon--dark.exp--status-icon--dark-minor-warning .exp--status-icon--dark.exp--status-icon--dark-in-progress {
20244
+ .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20272
20245
  animation: none;
20273
20246
  }
20274
20247
  }
20275
20248
 
20276
- .exp--status-icon--dark.exp--status-icon--light-undefined {
20249
+ .c4p--status-icon--dark.c4p--status-icon--light-undefined {
20277
20250
  fill: #a56eff;
20278
20251
  }
20279
20252
  @media (prefers-reduced-motion) {
20280
- .exp--status-icon--dark.exp--status-icon--light-undefined .exp--status-icon--dark.exp--status-icon--light-in-progress {
20253
+ .c4p--status-icon--dark.c4p--status-icon--light-undefined .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20281
20254
  animation: none;
20282
20255
  }
20283
20256
  }
20284
20257
 
20285
- .exp--status-icon--dark.exp--status-icon--dark-undefined {
20258
+ .c4p--status-icon--dark.c4p--status-icon--dark-undefined {
20286
20259
  fill: #a56eff;
20287
20260
  }
20288
20261
  @media (prefers-reduced-motion) {
20289
- .exp--status-icon--dark.exp--status-icon--dark-undefined .exp--status-icon--dark.exp--status-icon--dark-in-progress {
20262
+ .c4p--status-icon--dark.c4p--status-icon--dark-undefined .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20290
20263
  animation: none;
20291
20264
  }
20292
20265
  }
20293
20266
 
20294
- .exp--status-icon--dark.exp--status-icon--light-unknown {
20267
+ .c4p--status-icon--dark.c4p--status-icon--light-unknown {
20295
20268
  fill: #8d8d8d;
20296
20269
  }
20297
20270
  @media (prefers-reduced-motion) {
20298
- .exp--status-icon--dark.exp--status-icon--light-unknown .exp--status-icon--dark.exp--status-icon--light-in-progress {
20271
+ .c4p--status-icon--dark.c4p--status-icon--light-unknown .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20299
20272
  animation: none;
20300
20273
  }
20301
20274
  }
20302
20275
 
20303
- .exp--status-icon--dark.exp--status-icon--dark-unknown {
20276
+ .c4p--status-icon--dark.c4p--status-icon--dark-unknown {
20304
20277
  fill: #8d8d8d;
20305
20278
  }
20306
20279
  @media (prefers-reduced-motion) {
20307
- .exp--status-icon--dark.exp--status-icon--dark-unknown .exp--status-icon--dark.exp--status-icon--dark-in-progress {
20280
+ .c4p--status-icon--dark.c4p--status-icon--dark-unknown .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20308
20281
  animation: none;
20309
20282
  }
20310
20283
  }
20311
20284
 
20312
- .exp--status-icon--dark.exp--status-icon--light-normal {
20285
+ .c4p--status-icon--dark.c4p--status-icon--light-normal {
20313
20286
  fill: #24a148;
20314
20287
  }
20315
20288
  @media (prefers-reduced-motion) {
20316
- .exp--status-icon--dark.exp--status-icon--light-normal .exp--status-icon--dark.exp--status-icon--light-in-progress {
20289
+ .c4p--status-icon--dark.c4p--status-icon--light-normal .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20317
20290
  animation: none;
20318
20291
  }
20319
20292
  }
20320
20293
 
20321
- .exp--status-icon--dark.exp--status-icon--dark-normal {
20294
+ .c4p--status-icon--dark.c4p--status-icon--dark-normal {
20322
20295
  fill: #24a148;
20323
20296
  }
20324
20297
  @media (prefers-reduced-motion) {
20325
- .exp--status-icon--dark.exp--status-icon--dark-normal .exp--status-icon--dark.exp--status-icon--dark-in-progress {
20298
+ .c4p--status-icon--dark.c4p--status-icon--dark-normal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20326
20299
  animation: none;
20327
20300
  }
20328
20301
  }
20329
20302
 
20330
- .exp--status-icon--dark.exp--status-icon--light-info {
20303
+ .c4p--status-icon--dark.c4p--status-icon--light-info {
20331
20304
  fill: #4589ff;
20332
20305
  }
20333
20306
  @media (prefers-reduced-motion) {
20334
- .exp--status-icon--dark.exp--status-icon--light-info .exp--status-icon--dark.exp--status-icon--light-in-progress {
20307
+ .c4p--status-icon--dark.c4p--status-icon--light-info .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20335
20308
  animation: none;
20336
20309
  }
20337
20310
  }
20338
20311
 
20339
- .exp--status-icon--dark.exp--status-icon--dark-info {
20312
+ .c4p--status-icon--dark.c4p--status-icon--dark-info {
20340
20313
  fill: #4589ff;
20341
20314
  }
20342
20315
  @media (prefers-reduced-motion) {
20343
- .exp--status-icon--dark.exp--status-icon--dark-info .exp--status-icon--dark.exp--status-icon--dark-in-progress {
20316
+ .c4p--status-icon--dark.c4p--status-icon--dark-info .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20344
20317
  animation: none;
20345
20318
  }
20346
20319
  }
20347
20320
 
20348
- .exp--status-icon--dark.exp--status-icon--light-in-progress {
20321
+ .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20349
20322
  animation: rotating 8000ms infinite linear;
20350
20323
  fill: #4589ff;
20351
20324
  }
20352
20325
  @media (prefers-reduced-motion: reduce) {
20353
- .exp--status-icon--dark.exp--status-icon--light-in-progress {
20326
+ .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20354
20327
  animation: none;
20355
20328
  }
20356
20329
  }
20357
20330
 
20358
- .exp--status-icon--dark.exp--status-icon--dark-in-progress {
20331
+ .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20359
20332
  animation: rotating 8000ms infinite linear;
20360
20333
  fill: #4589ff;
20361
20334
  }
20362
20335
  @media (prefers-reduced-motion: reduce) {
20363
- .exp--status-icon--dark.exp--status-icon--dark-in-progress {
20336
+ .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20364
20337
  animation: none;
20365
20338
  }
20366
20339
  }
20367
20340
 
20368
- .exp--status-icon--dark.exp--status-icon--light-running {
20341
+ .c4p--status-icon--dark.c4p--status-icon--light-running {
20369
20342
  fill: #24a148;
20370
20343
  transform: scaleY(-1);
20371
20344
  }
20372
20345
 
20373
- .exp--status-icon--dark.exp--status-icon--dark-running {
20346
+ .c4p--status-icon--dark.c4p--status-icon--dark-running {
20374
20347
  fill: #24a148;
20375
20348
  transform: scaleY(-1);
20376
20349
  }
20377
20350
 
20378
- .exp--status-icon--dark.exp--status-icon--light-pending {
20351
+ .c4p--status-icon--dark.c4p--status-icon--light-pending {
20379
20352
  fill: #8d8d8d;
20380
20353
  }
20381
20354
  @media (prefers-reduced-motion) {
20382
- .exp--status-icon--dark.exp--status-icon--light-pending .exp--status-icon--dark.exp--status-icon--light-in-progress {
20355
+ .c4p--status-icon--dark.c4p--status-icon--light-pending .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20383
20356
  animation: none;
20384
20357
  }
20385
20358
  }
20386
20359
 
20387
- .exp--status-icon--dark.exp--status-icon--dark-pending {
20360
+ .c4p--status-icon--dark.c4p--status-icon--dark-pending {
20388
20361
  fill: #8d8d8d;
20389
20362
  }
20390
20363
  @media (prefers-reduced-motion) {
20391
- .exp--status-icon--dark.exp--status-icon--dark-pending .exp--status-icon--dark.exp--status-icon--dark-in-progress {
20364
+ .c4p--status-icon--dark.c4p--status-icon--dark-pending .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20392
20365
  animation: none;
20393
20366
  }
20394
20367
  }
@@ -20744,48 +20717,48 @@ a.bx--side-nav__link--current::before {
20744
20717
  /* stylelint-disable-line no-invalid-position-at-import-rule */
20745
20718
  /* stylelint-disable-line no-invalid-position-at-import-rule */
20746
20719
  /* stylelint-disable-line no-invalid-position-at-import-rule */
20747
- .exp--toolbar {
20720
+ .c4p--toolbar {
20748
20721
  display: flex;
20749
20722
  min-width: 2.5rem;
20750
20723
  min-height: 2.5rem;
20751
20724
  background-color: var(--cds-ui-01, #f4f4f4);
20752
20725
  }
20753
20726
  @media (min-width: 66rem) {
20754
- .exp--toolbar {
20727
+ .c4p--toolbar {
20755
20728
  justify-content: flex-end;
20756
20729
  }
20757
20730
  }
20758
20731
 
20759
- .exp--toolbar--vertical,
20760
- .exp--toolbar--vertical > .exp--toolbar__group {
20732
+ .c4p--toolbar--vertical,
20733
+ .c4p--toolbar--vertical > .c4p--toolbar__group {
20761
20734
  flex-wrap: wrap;
20762
20735
  }
20763
20736
 
20764
- .exp--toolbar--vertical {
20737
+ .c4p--toolbar--vertical {
20765
20738
  max-width: 2.5rem;
20766
20739
  }
20767
20740
 
20768
- .exp--toolbar__group {
20741
+ .c4p--toolbar__group {
20769
20742
  display: flex;
20770
20743
  border-right: 0.0625rem solid var(--cds-ui-03, #e0e0e0);
20771
20744
  border-bottom: 0.0625rem solid var(--cds-ui-03, #e0e0e0);
20772
20745
  }
20773
20746
 
20774
- .exp--toolbar--vertical > .exp--toolbar__group,
20775
- .exp--toolbar__group:last-of-type {
20747
+ .c4p--toolbar--vertical > .c4p--toolbar__group,
20748
+ .c4p--toolbar__group:last-of-type {
20776
20749
  border-right-width: 0;
20777
20750
  }
20778
20751
 
20779
- .exp--toolbar--vertical > .exp--toolbar__group:last-of-type,
20780
- .exp--toolbar .bx--dropdown {
20752
+ .c4p--toolbar--vertical > .c4p--toolbar__group:last-of-type,
20753
+ .c4p--toolbar .bx--dropdown {
20781
20754
  border-bottom-width: 0;
20782
20755
  }
20783
20756
 
20784
- .exp--toolbar__button--caret {
20757
+ .c4p--toolbar__button--caret {
20785
20758
  position: relative;
20786
20759
  }
20787
20760
 
20788
- .exp--toolbar__button__caret {
20761
+ .c4p--toolbar__button__caret {
20789
20762
  position: absolute;
20790
20763
  right: 0.125rem;
20791
20764
  bottom: 0.125rem;
@@ -20823,7 +20796,7 @@ a.bx--side-nav__link--current::before {
20823
20796
  component is because we want these colors to always be the same
20824
20797
  despite of which carbon theme the user has.
20825
20798
  */
20826
- .exp--web-terminal {
20799
+ .c4p--web-terminal {
20827
20800
  --cds-interactive-01: #0f62fe;
20828
20801
  --cds-interactive-02: #6f6f6f;
20829
20802
  --cds-interactive-03: #ffffff;
@@ -21257,7 +21230,7 @@ a.bx--side-nav__link--current::before {
21257
21230
  background-color: #161616;
21258
21231
  }
21259
21232
 
21260
- .exp--web-terminal__bar {
21233
+ .c4p--web-terminal__bar {
21261
21234
  display: flex;
21262
21235
  height: 3rem;
21263
21236
  align-items: center;
@@ -21265,11 +21238,11 @@ a.bx--side-nav__link--current::before {
21265
21238
  background-color: var(--cds-ui-background, #ffffff);
21266
21239
  }
21267
21240
 
21268
- .exp--web-terminal__actions {
21241
+ .c4p--web-terminal__actions {
21269
21242
  display: flex;
21270
21243
  }
21271
21244
 
21272
- .exp--web-terminal__documentation-overflow {
21245
+ .c4p--web-terminal__documentation-overflow {
21273
21246
  --cds-interactive-01: #0f62fe;
21274
21247
  --cds-interactive-02: #6f6f6f;
21275
21248
  --cds-interactive-03: #ffffff;
@@ -21694,7 +21667,7 @@ a.bx--side-nav__link--current::before {
21694
21667
  --cds-icon-size-02: 1.25rem;
21695
21668
  }
21696
21669
 
21697
- .exp--web-terminal__body {
21670
+ .c4p--web-terminal__body {
21698
21671
  height: 100%;
21699
21672
  }
21700
21673
 
@@ -21733,111 +21706,111 @@ a.bx--side-nav__link--current::before {
21733
21706
  /* stylelint-disable-line no-invalid-position-at-import-rule */
21734
21707
  /* stylelint-disable-line no-invalid-position-at-import-rule */
21735
21708
  /* stylelint-disable-line no-invalid-position-at-import-rule */
21736
- .exp-user-profile-avatar--light {
21709
+ .c4p--user-profile-image--light {
21737
21710
  color: var(--cds-ui-01, #f4f4f4);
21738
21711
  }
21739
21712
 
21740
- .exp-user-profile-avatar--light.exp-user-profile-avatar--light-cyan {
21713
+ .c4p--user-profile-image--light.c4p--user-profile-image--light-cyan {
21741
21714
  background-color: #0072c3;
21742
21715
  }
21743
21716
 
21744
- .exp-user-profile-avatar--light.exp-user-profile-avatar--dark-cyan {
21717
+ .c4p--user-profile-image--light.c4p--user-profile-image--dark-cyan {
21745
21718
  background-color: #003a6d;
21746
21719
  }
21747
21720
 
21748
- .exp-user-profile-avatar--light.exp-user-profile-avatar--light-gray {
21721
+ .c4p--user-profile-image--light.c4p--user-profile-image--light-gray {
21749
21722
  background-color: #6f6f6f;
21750
21723
  }
21751
21724
 
21752
- .exp-user-profile-avatar--light.exp-user-profile-avatar--dark-gray {
21725
+ .c4p--user-profile-image--light.c4p--user-profile-image--dark-gray {
21753
21726
  background-color: #393939;
21754
21727
  }
21755
21728
 
21756
- .exp-user-profile-avatar--light.exp-user-profile-avatar--light-green {
21729
+ .c4p--user-profile-image--light.c4p--user-profile-image--light-green {
21757
21730
  background-color: #198038;
21758
21731
  }
21759
21732
 
21760
- .exp-user-profile-avatar--light.exp-user-profile-avatar--dark-green {
21733
+ .c4p--user-profile-image--light.c4p--user-profile-image--dark-green {
21761
21734
  background-color: #044317;
21762
21735
  }
21763
21736
 
21764
- .exp-user-profile-avatar--light.exp-user-profile-avatar--light-magenta {
21737
+ .c4p--user-profile-image--light.c4p--user-profile-image--light-magenta {
21765
21738
  background-color: #d02670;
21766
21739
  }
21767
21740
 
21768
- .exp-user-profile-avatar--light.exp-user-profile-avatar--dark-magenta {
21741
+ .c4p--user-profile-image--light.c4p--user-profile-image--dark-magenta {
21769
21742
  background-color: #740937;
21770
21743
  }
21771
21744
 
21772
- .exp-user-profile-avatar--light.exp-user-profile-avatar--light-purple {
21745
+ .c4p--user-profile-image--light.c4p--user-profile-image--light-purple {
21773
21746
  background-color: #8a3ffc;
21774
21747
  }
21775
21748
 
21776
- .exp-user-profile-avatar--light.exp-user-profile-avatar--dark-purple {
21749
+ .c4p--user-profile-image--light.c4p--user-profile-image--dark-purple {
21777
21750
  background-color: #491d8b;
21778
21751
  }
21779
21752
 
21780
- .exp-user-profile-avatar--light.exp-user-profile-avatar--light-teal {
21753
+ .c4p--user-profile-image--light.c4p--user-profile-image--light-teal {
21781
21754
  background-color: #007d79;
21782
21755
  }
21783
21756
 
21784
- .exp-user-profile-avatar--light.exp-user-profile-avatar--dark-teal {
21757
+ .c4p--user-profile-image--light.c4p--user-profile-image--dark-teal {
21785
21758
  background-color: #004144;
21786
21759
  }
21787
21760
 
21788
- .exp-user-profile-avatar--dark {
21761
+ .c4p--user-profile-image--dark {
21789
21762
  color: var(--cds-ui-01, #f4f4f4);
21790
21763
  }
21791
21764
 
21792
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--light-cyan {
21765
+ .c4p--user-profile-image--dark.c4p--user-profile-image--light-cyan {
21793
21766
  background-color: #1192e8;
21794
21767
  }
21795
21768
 
21796
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--dark-cyan {
21769
+ .c4p--user-profile-image--dark.c4p--user-profile-image--dark-cyan {
21797
21770
  background-color: #82cfff;
21798
21771
  }
21799
21772
 
21800
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--light-gray {
21773
+ .c4p--user-profile-image--dark.c4p--user-profile-image--light-gray {
21801
21774
  background-color: #8d8d8d;
21802
21775
  }
21803
21776
 
21804
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--dark-gray {
21777
+ .c4p--user-profile-image--dark.c4p--user-profile-image--dark-gray {
21805
21778
  background-color: #c6c6c6;
21806
21779
  }
21807
21780
 
21808
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--light-green {
21781
+ .c4p--user-profile-image--dark.c4p--user-profile-image--light-green {
21809
21782
  background-color: #24a148;
21810
21783
  }
21811
21784
 
21812
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--dark-green {
21785
+ .c4p--user-profile-image--dark.c4p--user-profile-image--dark-green {
21813
21786
  background-color: #6fdc8c;
21814
21787
  }
21815
21788
 
21816
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--light-magenta {
21789
+ .c4p--user-profile-image--dark.c4p--user-profile-image--light-magenta {
21817
21790
  background-color: #ee5396;
21818
21791
  }
21819
21792
 
21820
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--dark-magenta {
21793
+ .c4p--user-profile-image--dark.c4p--user-profile-image--dark-magenta {
21821
21794
  background-color: #ffafd2;
21822
21795
  }
21823
21796
 
21824
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--light-purple {
21797
+ .c4p--user-profile-image--dark.c4p--user-profile-image--light-purple {
21825
21798
  background-color: #a56eff;
21826
21799
  }
21827
21800
 
21828
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--dark-purple {
21801
+ .c4p--user-profile-image--dark.c4p--user-profile-image--dark-purple {
21829
21802
  background-color: #d4bbff;
21830
21803
  }
21831
21804
 
21832
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--light-teal {
21805
+ .c4p--user-profile-image--dark.c4p--user-profile-image--light-teal {
21833
21806
  background-color: #009d9a;
21834
21807
  }
21835
21808
 
21836
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--dark-teal {
21809
+ .c4p--user-profile-image--dark.c4p--user-profile-image--dark-teal {
21837
21810
  background-color: #3ddbd9;
21838
21811
  }
21839
21812
 
21840
- .exp-user-profile-avatar {
21813
+ .c4p--user-profile-image {
21841
21814
  display: flex;
21842
21815
  flex-direction: column;
21843
21816
  align-items: center;
@@ -21846,41 +21819,41 @@ a.bx--side-nav__link--current::before {
21846
21819
  text-transform: uppercase;
21847
21820
  }
21848
21821
 
21849
- .bx--tooltip__trigger .exp-user-profile-avatar svg {
21822
+ .bx--tooltip__trigger .c4p--user-profile-image svg {
21850
21823
  fill: var(--cds-ui-01, #f4f4f4);
21851
21824
  }
21852
21825
 
21853
- .exp-user-profile-avatar__photo {
21826
+ .c4p--user-profile-image__photo {
21854
21827
  width: 100%;
21855
21828
  border-radius: 100%;
21856
21829
  }
21857
21830
 
21858
- .exp-user-profile-avatar__photo--xlg {
21831
+ .c4p--user-profile-image__photo--xlg {
21859
21832
  width: var(--cds-spacing-10, 4rem);
21860
21833
  height: var(--cds-spacing-10, 4rem);
21861
21834
  }
21862
21835
 
21863
- .exp-user-profile-avatar__photo--lg {
21836
+ .c4p--user-profile-image__photo--lg {
21864
21837
  width: var(--cds-spacing-07, 2rem);
21865
21838
  height: var(--cds-spacing-07, 2rem);
21866
21839
  }
21867
21840
 
21868
- .exp-user-profile-avatar__photo--md {
21841
+ .c4p--user-profile-image__photo--md {
21869
21842
  width: var(--cds-spacing-06, 1.5rem);
21870
21843
  height: var(--cds-spacing-06, 1.5rem);
21871
21844
  }
21872
21845
 
21873
- .exp-user-profile-avatar__photo--sm {
21846
+ .c4p--user-profile-image__photo--sm {
21874
21847
  width: calc(var(--cds-spacing-05, 1rem) + var(--cds-spacing-02, 0.25rem));
21875
21848
  height: calc(var(--cds-spacing-05, 1rem) + var(--cds-spacing-02, 0.25rem));
21876
21849
  }
21877
21850
 
21878
- .exp-user-profile-avatar__photo--xs {
21851
+ .c4p--user-profile-image__photo--xs {
21879
21852
  width: var(--cds-spacing-05, 1rem);
21880
21853
  height: var(--cds-spacing-05, 1rem);
21881
21854
  }
21882
21855
 
21883
- .exp-user-profile-avatar--xlg {
21856
+ .c4p--user-profile-image--xlg {
21884
21857
  width: var(--cds-spacing-10, 4rem);
21885
21858
  height: var(--cds-spacing-10, 4rem);
21886
21859
  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
@@ -21889,7 +21862,7 @@ a.bx--side-nav__link--current::before {
21889
21862
  letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
21890
21863
  }
21891
21864
 
21892
- .exp-user-profile-avatar--lg {
21865
+ .c4p--user-profile-image--lg {
21893
21866
  width: var(--cds-spacing-07, 2rem);
21894
21867
  height: var(--cds-spacing-07, 2rem);
21895
21868
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
@@ -21898,7 +21871,7 @@ a.bx--side-nav__link--current::before {
21898
21871
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
21899
21872
  }
21900
21873
 
21901
- .exp-user-profile-avatar--md {
21874
+ .c4p--user-profile-image--md {
21902
21875
  width: var(--cds-spacing-06, 1.5rem);
21903
21876
  height: var(--cds-spacing-06, 1.5rem);
21904
21877
  font-size: var(--cds-label-01-font-size, 0.75rem);
@@ -21908,7 +21881,7 @@ a.bx--side-nav__link--current::before {
21908
21881
  font-weight: 600;
21909
21882
  }
21910
21883
 
21911
- .exp-user-profile-avatar--sm {
21884
+ .c4p--user-profile-image--sm {
21912
21885
  width: calc(var(--cds-spacing-05, 1rem) + var(--cds-spacing-02, 0.25rem));
21913
21886
  height: calc(var(--cds-spacing-05, 1rem) + var(--cds-spacing-02, 0.25rem));
21914
21887
  font-size: var(--cds-label-01-font-size, 0.75rem);
@@ -21918,7 +21891,7 @@ a.bx--side-nav__link--current::before {
21918
21891
  font-weight: 600;
21919
21892
  }
21920
21893
 
21921
- .exp-user-profile-avatar--xs {
21894
+ .c4p--user-profile-image--xs {
21922
21895
  width: var(--cds-spacing-05, 1rem);
21923
21896
  height: var(--cds-spacing-05, 1rem);
21924
21897
  font-size: var(--cds-label-01-font-size, 0.75rem);
@@ -22104,32 +22077,32 @@ a.bx--side-nav__link--current::before {
22104
22077
  stroke-dashoffset: 0;
22105
22078
  }
22106
22079
  }
22107
- .exp--edit-side-panel .bx--form.exp--edit-side-panel__form {
22080
+ .c4p--edit-side-panel .bx--form.c4p--edit-side-panel__form {
22108
22081
  padding-top: var(--cds-spacing-05, 1rem);
22109
22082
  }
22110
- .exp--edit-side-panel .exp--edit-side-panel__form.bx--fieldset {
22083
+ .c4p--edit-side-panel .c4p--edit-side-panel__form.bx--fieldset {
22111
22084
  padding-top: var(--cds-spacing-03, 0.5rem);
22112
22085
  }
22113
- .exp--edit-side-panel .exp--edit-side-panel__form > * {
22086
+ .c4p--edit-side-panel .c4p--edit-side-panel__form > * {
22114
22087
  margin-bottom: var(--cds-spacing-05, 1rem);
22115
22088
  }
22116
- .exp--edit-side-panel .exp--edit-side-panel__form-title-text {
22089
+ .c4p--edit-side-panel .c4p--edit-side-panel__form-title-text {
22117
22090
  font-size: var(--cds-productive-heading-02-font-size, 1rem);
22118
22091
  font-weight: var(--cds-productive-heading-02-font-weight, 600);
22119
22092
  line-height: var(--cds-productive-heading-02-line-height, 1.375);
22120
22093
  letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
22121
22094
  padding-bottom: var(--cds-spacing-03, 0.5rem);
22122
22095
  }
22123
- .exp--edit-side-panel .exp--edit-side-panel__form-description-text {
22096
+ .c4p--edit-side-panel .c4p--edit-side-panel__form-description-text {
22124
22097
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
22125
22098
  font-weight: var(--cds-body-long-01-font-weight, 400);
22126
22099
  line-height: var(--cds-body-long-01-line-height, 1.42857);
22127
22100
  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
22128
22101
  }
22129
- .exp--edit-side-panel.exp--side-panel .bx--btn.exp--side-panel__close-button {
22102
+ .c4p--edit-side-panel.c4p--side-panel .bx--btn.c4p--side-panel__close-button {
22130
22103
  display: none;
22131
22104
  }
22132
- .exp--edit-side-panel .exp--side-panel .exp--edit-side-panel__actions-container {
22105
+ .c4p--edit-side-panel .c4p--side-panel .c4p--edit-side-panel__actions-container {
22133
22106
  position: absolute;
22134
22107
  z-index: 4;
22135
22108
  bottom: 0;
@@ -22148,26 +22121,26 @@ a.bx--side-nav__link--current::before {
22148
22121
  /* stylelint-disable-line no-invalid-position-at-import-rule */
22149
22122
  /* stylelint-disable-line no-invalid-position-at-import-rule */
22150
22123
  /* stylelint-disable-line no-invalid-position-at-import-rule */
22151
- .exp--options-tile {
22124
+ .c4p--options-tile {
22152
22125
  border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
22153
22126
  background-color: var(--cds-ui-01, #f4f4f4);
22154
22127
  }
22155
22128
 
22156
- .exp--options-tile__toggle-container {
22129
+ .c4p--options-tile__toggle-container {
22157
22130
  position: relative;
22158
22131
  }
22159
22132
 
22160
- .exp--options-tile__toggle {
22133
+ .c4p--options-tile__toggle {
22161
22134
  position: absolute;
22162
22135
  right: var(--cds-spacing-05, 1rem);
22163
22136
  }
22164
22137
 
22165
- .exp--options-tile__toggle .bx--toggle-input__label .bx--toggle__switch {
22138
+ .c4p--options-tile__toggle .bx--toggle-input__label .bx--toggle__switch {
22166
22139
  margin: 0;
22167
22140
  }
22168
22141
 
22169
- .exp--options-tile__header,
22170
- .exp--options-tile__static-content {
22142
+ .c4p--options-tile__header,
22143
+ .c4p--options-tile__static-content {
22171
22144
  display: grid;
22172
22145
  box-sizing: border-box;
22173
22146
  align-items: center;
@@ -22175,31 +22148,31 @@ a.bx--side-nav__link--current::before {
22175
22148
  grid-template-columns: 3rem 1fr 1rem;
22176
22149
  }
22177
22150
 
22178
- .exp--options-tile__header {
22151
+ .c4p--options-tile__header {
22179
22152
  background-color: transparent;
22180
22153
  cursor: pointer;
22181
22154
  transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
22182
22155
  }
22183
22156
 
22184
- .exp--options-tile__header:hover {
22157
+ .c4p--options-tile__header:hover {
22185
22158
  background-color: var(--cds-hover-ui, #e5e5e5);
22186
22159
  }
22187
22160
 
22188
- .exp--options-tile__header:focus {
22161
+ .c4p--options-tile__header:focus {
22189
22162
  outline: 2px solid var(--cds-focus, #0f62fe);
22190
22163
  outline-offset: -2px;
22191
22164
  }
22192
22165
  @media screen and (prefers-contrast) {
22193
- .exp--options-tile__header:focus {
22166
+ .c4p--options-tile__header:focus {
22194
22167
  outline-style: dotted;
22195
22168
  }
22196
22169
  }
22197
22170
 
22198
- .exp--options-tile__title {
22171
+ .c4p--options-tile__title {
22199
22172
  grid-column: 2;
22200
22173
  }
22201
22174
 
22202
- .exp--options-tile__heading {
22175
+ .c4p--options-tile__heading {
22203
22176
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
22204
22177
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
22205
22178
  line-height: var(--cds-productive-heading-01-line-height, 1.28572);
@@ -22207,7 +22180,7 @@ a.bx--side-nav__link--current::before {
22207
22180
  color: var(--cds-text-01, #161616);
22208
22181
  }
22209
22182
 
22210
- .exp--options-tile__summary {
22183
+ .c4p--options-tile__summary {
22211
22184
  font-size: var(--cds-helper-text-01-font-size, 0.75rem);
22212
22185
  line-height: var(--cds-helper-text-01-line-height, 1.33333);
22213
22186
  letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
@@ -22221,71 +22194,71 @@ a.bx--side-nav__link--current::before {
22221
22194
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
22222
22195
  }
22223
22196
 
22224
- .exp--options-tile__summary--invalid,
22225
- .exp--options-tile__summary--warn,
22226
- .exp--options-tile__summary--locked {
22197
+ .c4p--options-tile__summary--invalid,
22198
+ .c4p--options-tile__summary--warn,
22199
+ .c4p--options-tile__summary--locked {
22227
22200
  column-gap: var(--cds-spacing-02, 0.25rem);
22228
22201
  grid-template-columns: 1rem 1fr;
22229
22202
  }
22230
22203
 
22231
- .exp--options-tile__summary--invalid {
22204
+ .c4p--options-tile__summary--invalid {
22232
22205
  color: var(--cds-support-01, #da1e28);
22233
22206
  }
22234
22207
 
22235
- .exp--options-tile__summary--warn {
22208
+ .c4p--options-tile__summary--warn {
22236
22209
  color: var(--cds-text-01, #161616);
22237
22210
  }
22238
22211
 
22239
- .exp--options-tile__summary--warn svg {
22212
+ .c4p--options-tile__summary--warn svg {
22240
22213
  color: var(--cds-support-03, #f1c21b);
22241
22214
  }
22242
22215
 
22243
- .exp--options-tile__summary--warn svg path[fill=none] {
22216
+ .c4p--options-tile__summary--warn svg path[fill=none] {
22244
22217
  fill: #000000;
22245
22218
  }
22246
22219
 
22247
- .exp--options-tile__summary-text {
22220
+ .c4p--options-tile__summary-text {
22248
22221
  overflow: hidden;
22249
22222
  height: max-content;
22250
22223
  text-overflow: ellipsis;
22251
22224
  white-space: nowrap;
22252
22225
  }
22253
22226
 
22254
- .exp--options-tile__chevron {
22227
+ .c4p--options-tile__chevron {
22255
22228
  justify-self: center;
22256
22229
  transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
22257
22230
  }
22258
22231
 
22259
- .exp--options-tile__content {
22232
+ .c4p--options-tile__content {
22260
22233
  padding-right: var(--cds-spacing-05, 1rem);
22261
22234
  padding-left: calc(var(--cds-spacing-05, 1rem) * 2 + 1rem);
22262
22235
  }
22263
22236
 
22264
- .exp--options-tile__content > .bx--fieldset > .bx--label:empty {
22237
+ .c4p--options-tile__content > .bx--fieldset > .bx--label:empty {
22265
22238
  display: none;
22266
22239
  }
22267
22240
 
22268
- .exp--options-tile--closing .exp--options-tile__content {
22241
+ .c4p--options-tile--closing .c4p--options-tile__content {
22269
22242
  overflow: hidden;
22270
22243
  }
22271
22244
 
22272
- .exp--options-tile:not(.exp--options-tile--closing) > details[open] .exp--options-tile__summary,
22273
- .exp--options-tile__summary--hidden {
22245
+ .c4p--options-tile:not(.c4p--options-tile--closing) > details[open] .c4p--options-tile__summary,
22246
+ .c4p--options-tile__summary--hidden {
22274
22247
  height: 0;
22275
22248
  margin-top: 0;
22276
22249
  opacity: 0;
22277
22250
  }
22278
22251
 
22279
- .exp--options-tile:not(.exp--options-tile--closing) > details[open] .exp--options-tile__chevron {
22252
+ .c4p--options-tile:not(.c4p--options-tile--closing) > details[open] .c4p--options-tile__chevron {
22280
22253
  transform: rotate(180deg);
22281
22254
  }
22282
22255
 
22283
- .exp--options-tile > details[open] .exp--options-tile__content {
22256
+ .c4p--options-tile > details[open] .c4p--options-tile__content {
22284
22257
  padding-top: var(--cds-spacing-03, 0.5rem);
22285
22258
  padding-bottom: var(--cds-spacing-06, 1.5rem);
22286
22259
  }
22287
22260
 
22288
- .exp--options-tile__locked-text {
22261
+ .c4p--options-tile__locked-text {
22289
22262
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
22290
22263
  font-weight: var(--cds-body-long-01-font-weight, 400);
22291
22264
  line-height: var(--cds-body-long-01-line-height, 1.42857);
@@ -22296,43 +22269,43 @@ a.bx--side-nav__link--current::before {
22296
22269
  color: var(--cds-text-02, #525252);
22297
22270
  }
22298
22271
 
22299
- .exp--options-tile__locked-text > svg {
22272
+ .c4p--options-tile__locked-text > svg {
22300
22273
  margin-right: var(--cds-spacing-02, 0.25rem);
22301
22274
  }
22302
22275
 
22303
- .exp--options-tile--lg .exp--options-tile__header,
22304
- .exp--options-tile--lg .exp--options-tile__static-content {
22276
+ .c4p--options-tile--lg .c4p--options-tile__header,
22277
+ .c4p--options-tile--lg .c4p--options-tile__static-content {
22305
22278
  height: 3rem;
22306
22279
  }
22307
22280
 
22308
- .exp--options-tile--xl .exp--options-tile__header,
22309
- .exp--options-tile--xl .exp--options-tile__static-content {
22281
+ .c4p--options-tile--xl .c4p--options-tile__header,
22282
+ .c4p--options-tile--xl .c4p--options-tile__static-content {
22310
22283
  height: 4rem;
22311
22284
  }
22312
22285
 
22313
- .exp--options-tile--lg .exp--options-tile__toggle {
22286
+ .c4p--options-tile--lg .c4p--options-tile__toggle {
22314
22287
  top: 1rem;
22315
22288
  }
22316
22289
 
22317
- .exp--options-tile--xl .exp--options-tile__toggle {
22290
+ .c4p--options-tile--xl .c4p--options-tile__toggle {
22318
22291
  top: 1.5rem;
22319
22292
  }
22320
22293
 
22321
- .exp--options-tile--lg .exp--options-tile__summary {
22294
+ .c4p--options-tile--lg .c4p--options-tile__summary {
22322
22295
  margin-top: var(--cds-spacing-01, 0.125rem);
22323
22296
  }
22324
22297
 
22325
- .exp--options-tile--lg .exp--options-tile__summary-text {
22298
+ .c4p--options-tile--lg .c4p--options-tile__summary-text {
22326
22299
  padding-right: calc(var(--cds-spacing-05, 1rem) + 1rem);
22327
22300
  }
22328
22301
 
22329
- .exp--options-tile--xl .exp--options-tile__summary-text {
22302
+ .c4p--options-tile--xl .c4p--options-tile__summary-text {
22330
22303
  padding-right: calc(var(--cds-spacing-05, 1rem) + 2rem);
22331
22304
  }
22332
22305
 
22333
22306
  @media (prefers-reduced-motion: reduce) {
22334
- .exp--options-tile__summary,
22335
- .exp--options-tile__chevron {
22307
+ .c4p--options-tile__summary,
22308
+ .c4p--options-tile__chevron {
22336
22309
  transition: none;
22337
22310
  }
22338
22311
  }