@carbon/ibm-products 0.99.1 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (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
  }