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