@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
@@ -375,30 +375,30 @@
375
375
  /* stylelint-disable-line no-invalid-position-at-import-rule */
376
376
  /* stylelint-disable-line no-invalid-position-at-import-rule */
377
377
  /* stylelint-disable-line no-invalid-position-at-import-rule */
378
- .exp--apikey-modal .bx--modal-close {
378
+ .c4p--apikey-modal .bx--modal-close {
379
379
  display: none;
380
380
  }
381
381
 
382
- .exp--apikey-modal .bx--inline-loading {
382
+ .c4p--apikey-modal .bx--inline-loading {
383
383
  min-height: 3rem;
384
384
  }
385
385
 
386
- .exp--apikey-modal .bx--modal-content {
386
+ .c4p--apikey-modal .bx--modal-content {
387
387
  padding-right: var(--cds-spacing-05, 1rem);
388
388
  }
389
389
 
390
- .exp--apikey-modal__body {
390
+ .c4p--apikey-modal__body {
391
391
  padding-right: calc(20% - var(--cds-spacing-05, 1rem));
392
392
  margin-bottom: var(--cds-spacing-05, 1rem);
393
393
  }
394
394
 
395
- .exp--apikey-modal__messaging {
395
+ .c4p--apikey-modal__messaging {
396
396
  display: flex;
397
397
  padding-right: calc(20% - var(--cds-spacing-05, 1rem));
398
398
  margin-top: var(--cds-spacing-03, 0.5rem);
399
399
  }
400
400
 
401
- .exp--apikey-modal__messaging-text {
401
+ .c4p--apikey-modal__messaging-text {
402
402
  flex: 1;
403
403
  margin-left: var(--cds-spacing-03, 0.5rem);
404
404
  font-size: var(--cds-label-01-font-size, 0.75rem);
@@ -407,11 +407,11 @@
407
407
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
408
408
  }
409
409
 
410
- .exp--apikey-modal__messaging-text > * {
410
+ .c4p--apikey-modal__messaging-text > * {
411
411
  font: inherit;
412
412
  }
413
413
 
414
- .exp--apikey-modal__error-icon svg {
414
+ .c4p--apikey-modal__error-icon svg {
415
415
  fill: var(--cds-danger-01, #da1e28);
416
416
  }
417
417
 
@@ -484,21 +484,21 @@
484
484
  /* stylelint-disable-line no-invalid-position-at-import-rule */
485
485
  /* stylelint-disable-line no-invalid-position-at-import-rule */
486
486
  /* stylelint-disable-line no-invalid-position-at-import-rule */
487
- .exp--about-modal .bx--modal-container {
487
+ .c4p--about-modal .bx--modal-container {
488
488
  grid-template-rows: auto auto 1fr auto;
489
489
  }
490
490
 
491
- .exp--about-modal .exp--about-modal__logo {
491
+ .c4p--about-modal .c4p--about-modal__logo {
492
492
  margin: var(--cds-spacing-05, 1rem);
493
493
  }
494
494
 
495
- .exp--about-modal .exp--about-modal__header {
495
+ .c4p--about-modal .c4p--about-modal__header {
496
496
  padding: 0 20% var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
497
497
  margin-bottom: 0;
498
498
  grid-row: auto;
499
499
  }
500
500
 
501
- .exp--about-modal .exp--about-modal__title {
501
+ .c4p--about-modal .c4p--about-modal__title {
502
502
  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
503
503
  font-weight: var(--cds-productive-heading-04-font-weight, 400);
504
504
  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
@@ -506,7 +506,7 @@
506
506
  color: var(--cds-text-01, #161616);
507
507
  }
508
508
 
509
- .exp--about-modal .exp--about-modal__body {
509
+ .c4p--about-modal .c4p--about-modal__body {
510
510
  font-size: var(--cds-body-short-02-font-size, 1rem);
511
511
  font-weight: var(--cds-body-short-02-font-weight, 400);
512
512
  line-height: var(--cds-body-short-02-line-height, 1.375);
@@ -518,37 +518,37 @@
518
518
  overflow-y: auto;
519
519
  }
520
520
 
521
- .exp--about-modal.exp--about-modal--with-tabs .exp--about-modal__body {
521
+ .c4p--about-modal.c4p--about-modal--with-tabs .c4p--about-modal__body {
522
522
  min-height: calc(var(--cds-layout-05, 4rem) + var(--cds-spacing-08, 2.5rem));
523
523
  margin-bottom: calc(var(--cds-spacing-09, 3rem) + var(--cds-spacing-08, 2.5rem));
524
524
  }
525
525
 
526
- .exp--about-modal.exp--about-modal--with-tabs .bx--modal-content--overflow-indicator {
526
+ .c4p--about-modal.c4p--about-modal--with-tabs .bx--modal-content--overflow-indicator {
527
527
  bottom: calc(var(--cds-spacing-09, 3rem) + var(--cds-spacing-08, 2.5rem));
528
528
  }
529
529
 
530
- .exp--about-modal .exp--about-modal__links-container {
530
+ .c4p--about-modal .c4p--about-modal__links-container {
531
531
  margin-top: var(--cds-spacing-05, 1rem);
532
532
  }
533
533
 
534
- .exp--about-modal .exp--about-modal__links-container a + a {
534
+ .c4p--about-modal .c4p--about-modal__links-container a + a {
535
535
  padding-left: var(--cds-spacing-03, 0.5rem);
536
536
  border-left: 1px solid var(--cds-text-01, #161616);
537
537
  margin-left: var(--cds-spacing-03, 0.5rem);
538
538
  }
539
539
 
540
- .exp--about-modal .exp--about-modal__legal-text,
541
- .exp--about-modal .exp--about-modal__copyright-text {
540
+ .c4p--about-modal .c4p--about-modal__legal-text,
541
+ .c4p--about-modal .c4p--about-modal__copyright-text {
542
542
  margin-top: var(--cds-spacing-07, 2rem);
543
543
  margin-bottom: 0;
544
544
  color: var(--cds-text-02, #525252);
545
545
  }
546
546
 
547
- .exp--about-modal .exp--about-modal__copyright-text {
547
+ .c4p--about-modal .c4p--about-modal__copyright-text {
548
548
  margin-top: var(--cds-spacing-05, 1rem);
549
549
  }
550
550
 
551
- .exp--about-modal .exp--about-modal__footer {
551
+ .c4p--about-modal .c4p--about-modal__footer {
552
552
  position: relative;
553
553
  height: 4.5rem;
554
554
  flex-direction: column;
@@ -557,13 +557,13 @@
557
557
  color: var(--cds-inverse-01, #ffffff);
558
558
  }
559
559
 
560
- .exp--about-modal .exp--about-modal__tab-container {
560
+ .c4p--about-modal .c4p--about-modal__tab-container {
561
561
  position: absolute;
562
562
  bottom: 100%;
563
563
  }
564
564
 
565
- .exp--about-modal .exp--about-modal__version-label,
566
- .exp--about-modal .exp--about-modal__version-number {
565
+ .c4p--about-modal .c4p--about-modal__version-label,
566
+ .c4p--about-modal .c4p--about-modal__version-number {
567
567
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
568
568
  font-weight: var(--cds-body-short-01-font-weight, 400);
569
569
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -574,7 +574,7 @@
574
574
  color: var(--cds-inverse-01, #ffffff);
575
575
  }
576
576
 
577
- .exp--about-modal .exp--about-modal__version-label {
577
+ .c4p--about-modal .c4p--about-modal__version-label {
578
578
  font-weight: 600;
579
579
  }
580
580
 
@@ -676,13 +676,13 @@
676
676
  stroke-dashoffset: 0;
677
677
  }
678
678
  }
679
- .exp--action-set {
679
+ .c4p--action-set {
680
680
  align-items: stretch;
681
681
  justify-content: flex-end;
682
682
  background-color: var(--cds-ui-01, #f4f4f4);
683
683
  }
684
684
 
685
- .exp--action-set .exp--action-set__action-button {
685
+ .c4p--action-set .c4p--action-set__action-button {
686
686
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
687
687
  font-weight: var(--cds-body-short-01-font-weight, 400);
688
688
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -694,47 +694,47 @@
694
694
  margin: 0;
695
695
  }
696
696
 
697
- .exp--action-set.bx--btn-set .exp--action-set__action-button.bx--btn.bx--btn--expressive {
697
+ .c4p--action-set.bx--btn-set .c4p--action-set__action-button.bx--btn.bx--btn--expressive {
698
698
  max-width: none;
699
699
  }
700
700
 
701
- .exp--action-set:not(.exp--action-set--stacking) .exp--action-set__action-button--ghost {
701
+ .c4p--action-set:not(.c4p--action-set--stacking) .c4p--action-set__action-button--ghost {
702
702
  padding-left: var(--cds-spacing-07, 2rem);
703
703
  }
704
704
 
705
- .exp--action-set.exp--action-set--row-single.exp--action-set--md .exp--action-set__action-button,
706
- .exp--action-set.exp--action-set--row-single .exp--action-set__action-button--ghost {
705
+ .c4p--action-set.c4p--action-set--row-single.c4p--action-set--md .c4p--action-set__action-button,
706
+ .c4p--action-set.c4p--action-set--row-single .c4p--action-set__action-button--ghost {
707
707
  flex: 0 0 100%;
708
708
  }
709
709
 
710
- .exp--action-set.exp--action-set--row-double .exp--action-set__action-button--ghost {
710
+ .c4p--action-set.c4p--action-set--row-double .c4p--action-set__action-button--ghost {
711
711
  flex: 1 1 75%;
712
712
  }
713
713
 
714
- .exp--action-set.exp--action-set--row-single.exp--action-set--lg .exp--action-set__action-button:not(.exp--action-set__action-button--ghost),
715
- .exp--action-set.exp--action-set--row-double.exp--action-set--md .exp--action-set__action-button,
716
- .exp--action-set.exp--action-set--row-double.exp--action-set--lg .exp--action-set__action-button,
717
- .exp--action-set.exp--action-set--row-triple .exp--action-set__action-button--ghost {
714
+ .c4p--action-set.c4p--action-set--row-single.c4p--action-set--lg .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
715
+ .c4p--action-set.c4p--action-set--row-double.c4p--action-set--md .c4p--action-set__action-button,
716
+ .c4p--action-set.c4p--action-set--row-double.c4p--action-set--lg .c4p--action-set__action-button,
717
+ .c4p--action-set.c4p--action-set--row-triple .c4p--action-set__action-button--ghost {
718
718
  flex: 0 1 50%;
719
719
  }
720
720
 
721
- .exp--action-set.exp--action-set--row-triple .exp--action-set__action-button--ghost {
721
+ .c4p--action-set.c4p--action-set--row-triple .c4p--action-set__action-button--ghost {
722
722
  flex: 1 1 50%;
723
723
  }
724
724
 
725
- .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),
726
- .exp--action-set.bx--btn-set.exp--action-set--xlg .exp--action-set__action-button:not(.exp--action-set__action-button--ghost),
727
- .exp--action-set.bx--btn-set.exp--action-set--max .exp--action-set__action-button:not(.exp--action-set__action-button--ghost),
728
- .exp--action-set.bx--btn-set.exp--action-set--row-quadruple .exp--action-set__action-button:not(.exp--action-set__action-button--ghost) {
725
+ .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),
726
+ .c4p--action-set.bx--btn-set.c4p--action-set--xlg .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
727
+ .c4p--action-set.bx--btn-set.c4p--action-set--max .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
728
+ .c4p--action-set.bx--btn-set.c4p--action-set--row-quadruple .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost) {
729
729
  max-width: 14.5rem;
730
730
  flex: 0 1 25%;
731
731
  }
732
732
 
733
- .exp--action-set.bx--btn-set.exp--action-set--row-quadruple .exp--action-set__action-button--ghost {
733
+ .c4p--action-set.bx--btn-set.c4p--action-set--row-quadruple .c4p--action-set__action-button--ghost {
734
734
  flex: 1 1 25%;
735
735
  }
736
736
 
737
- .exp--action-set .exp--action-set__action-button .bx--inline-loading {
737
+ .c4p--action-set .c4p--action-set__action-button .bx--inline-loading {
738
738
  position: absolute;
739
739
  top: 0;
740
740
  right: 0;
@@ -744,15 +744,15 @@
744
744
  /* stylelint-disable-line no-invalid-position-at-import-rule */
745
745
  /* stylelint-disable-line no-invalid-position-at-import-rule */
746
746
  /* stylelint-disable-line no-invalid-position-at-import-rule */
747
- .exp--button-menu {
747
+ .c4p--button-menu {
748
748
  min-width: 160px;
749
749
  }
750
- .exp--button-menu .exp--button-menu__trigger {
750
+ .c4p--button-menu .c4p--button-menu__trigger {
751
751
  width: 100%;
752
752
  padding: 0 var(--cds-spacing-05, 1rem);
753
753
  }
754
754
 
755
- .exp--button-menu__options.bx--overflow-menu-options::after {
755
+ .c4p--button-menu__options.bx--overflow-menu-options::after {
756
756
  content: initial;
757
757
  }
758
758
 
@@ -783,51 +783,51 @@
783
783
  }
784
784
  }
785
785
  @media (prefers-reduced-motion: no-preference) {
786
- .exp--cascade__element,
787
- .exp--cascade__col {
786
+ .c4p--cascade__element,
787
+ .c4p--cascade__col {
788
788
  animation: 240ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 fade;
789
789
  animation-fill-mode: forwards;
790
790
  opacity: 0;
791
791
  }
792
792
  }
793
793
 
794
- .exp--cascade__element:nth-child(n+1),
795
- .exp--cascade__col-1 {
794
+ .c4p--cascade__element:nth-child(n+1),
795
+ .c4p--cascade__col-1 {
796
796
  animation-delay: 60ms;
797
797
  }
798
798
 
799
- .exp--cascade__element:nth-child(n+2),
800
- .exp--cascade__col-2 {
799
+ .c4p--cascade__element:nth-child(n+2),
800
+ .c4p--cascade__col-2 {
801
801
  animation-delay: 120ms;
802
802
  }
803
803
 
804
- .exp--cascade__element:nth-child(n+3),
805
- .exp--cascade__col-3 {
804
+ .c4p--cascade__element:nth-child(n+3),
805
+ .c4p--cascade__col-3 {
806
806
  animation-delay: 180ms;
807
807
  }
808
808
 
809
- .exp--cascade__element:nth-child(n+4),
810
- .exp--cascade__col-4 {
809
+ .c4p--cascade__element:nth-child(n+4),
810
+ .c4p--cascade__col-4 {
811
811
  animation-delay: 240ms;
812
812
  }
813
813
 
814
- .exp--cascade__element:nth-child(n+5),
815
- .exp--cascade__col-5 {
814
+ .c4p--cascade__element:nth-child(n+5),
815
+ .c4p--cascade__col-5 {
816
816
  animation-delay: 300ms;
817
817
  }
818
818
 
819
- .exp--cascade__element:nth-child(n+6),
820
- .exp--cascade__col-6 {
819
+ .c4p--cascade__element:nth-child(n+6),
820
+ .c4p--cascade__col-6 {
821
821
  animation-delay: 360ms;
822
822
  }
823
823
 
824
- .exp--cascade__element:nth-child(n+7),
825
- .exp--cascade__col-7 {
824
+ .c4p--cascade__element:nth-child(n+7),
825
+ .c4p--cascade__col-7 {
826
826
  animation-delay: 420ms;
827
827
  }
828
828
 
829
- .exp--cascade__element:nth-child(n+8),
830
- .exp--cascade__col-8 {
829
+ .c4p--cascade__element:nth-child(n+8),
830
+ .c4p--cascade__col-8 {
831
831
  animation-delay: 480ms;
832
832
  }
833
833
 
@@ -951,45 +951,6 @@
951
951
  margin-left: auto;
952
952
  }
953
953
 
954
- /* stylelint-disable-line no-invalid-position-at-import-rule */
955
- /* stylelint-disable-line no-invalid-position-at-import-rule */
956
- /* stylelint-disable-line no-invalid-position-at-import-rule */
957
- .exp-context-header {
958
- display: flex;
959
- width: 100%;
960
- height: var(--cds-spacing-07, 2rem);
961
- padding: 0 var(--cds-spacing-05, 1rem);
962
- border-bottom: 0.0625rem solid var(--cds-ui-03, #e0e0e0);
963
- background: var(--cds-ui-background, #ffffff);
964
- }
965
-
966
- .exp-context-header--task,
967
- .exp-context-header--name,
968
- .exp-context-header--namespace,
969
- .exp-context-header--separator {
970
- font-size: var(--cds-label-01-font-size, 0.75rem);
971
- font-weight: var(--cds-label-01-font-weight, 400);
972
- line-height: var(--cds-label-01-line-height, 1.33333);
973
- letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
974
- display: inline-flex;
975
- align-items: center;
976
- }
977
-
978
- .exp-context-header--task {
979
- padding-right: var(--cds-spacing-05, 1rem);
980
- color: var(--cds-text-01, #161616);
981
- }
982
-
983
- .exp-context-header--name,
984
- .exp-context-header--namespace,
985
- .exp-context-header--separator {
986
- color: var(--cds-text-02, #525252);
987
- }
988
-
989
- .exp-context-header--separator {
990
- padding: 0 var(--cds-spacing-03, 0.5rem);
991
- }
992
-
993
954
  /* stylelint-disable-line no-invalid-position-at-import-rule */
994
955
  /* stylelint-disable-line no-invalid-position-at-import-rule */
995
956
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -1352,48 +1313,48 @@
1352
1313
  transform: translateX(calc(-1 * var(--cds-spacing-05, 1rem)));
1353
1314
  }
1354
1315
  }
1355
- .exp--create-influencer {
1316
+ .c4p--create-influencer {
1356
1317
  display: grid;
1357
1318
  height: 100%;
1358
1319
  grid-template-columns: 100%;
1359
1320
  grid-template-rows: 1fr auto;
1360
1321
  }
1361
1322
 
1362
- .exp--create-influencer__left-nav {
1323
+ .c4p--create-influencer__left-nav {
1363
1324
  grid-column: 1/-1;
1364
1325
  grid-row: 1/-1;
1365
1326
  overflow-y: auto;
1366
1327
  }
1367
1328
 
1368
- .exp--create-influencer__progress-indicator {
1329
+ .c4p--create-influencer__progress-indicator {
1369
1330
  padding: var(--cds-spacing-06, 1.5rem);
1370
1331
  }
1371
1332
 
1372
- .exp--create-influencer__view-all-toggle {
1333
+ .c4p--create-influencer__view-all-toggle {
1373
1334
  padding: var(--cds-spacing-06, 1.5rem);
1374
1335
  grid-column: 1/-1;
1375
1336
  grid-row: -1/-1;
1376
1337
  }
1377
1338
 
1378
- .exp--create-influencer__side-nav-opening,
1379
- .exp--create-influencer__progress-indicator-opening {
1339
+ .c4p--create-influencer__side-nav-opening,
1340
+ .c4p--create-influencer__progress-indicator-opening {
1380
1341
  animation: influencerMenuEntrance 240ms 1;
1381
1342
  animation-fill-mode: forwards;
1382
1343
  transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
1383
1344
  }
1384
1345
 
1385
- .exp--create-influencer__side-nav-closing,
1386
- .exp--create-influencer__progress-indicator-closing {
1346
+ .c4p--create-influencer__side-nav-closing,
1347
+ .c4p--create-influencer__progress-indicator-closing {
1387
1348
  animation: influencerMenuExit 240ms 1;
1388
1349
  animation-fill-mode: forwards;
1389
1350
  transition-timing-function: cubic-bezier(0.2, 0, 1, 0.9);
1390
1351
  }
1391
1352
 
1392
1353
  @media (prefers-reduced-motion) {
1393
- .exp--create-influencer__side-nav-opening,
1394
- .exp--create-influencer__progress-indicator-opening,
1395
- .exp--create-influencer__side-nav-closing,
1396
- .exp--create-influencer__progress-indicator-closing {
1354
+ .c4p--create-influencer__side-nav-opening,
1355
+ .c4p--create-influencer__progress-indicator-opening,
1356
+ .c4p--create-influencer__side-nav-closing,
1357
+ .c4p--create-influencer__progress-indicator-closing {
1397
1358
  animation: none;
1398
1359
  opacity: 1;
1399
1360
  }
@@ -1496,31 +1457,31 @@
1496
1457
  stroke-dashoffset: 0;
1497
1458
  }
1498
1459
  }
1499
- .exp--create-full-page .exp--create-full-page {
1460
+ .c4p--create-full-page .c4p--create-full-page {
1500
1461
  color: var(--cds-text-01, #161616);
1501
1462
  }
1502
1463
 
1503
- .exp--create-full-page .exp--create-full-page__content .bx--grid {
1464
+ .c4p--create-full-page .c4p--create-full-page__content .bx--grid {
1504
1465
  padding-top: var(--cds-spacing-06, 1.5rem);
1505
1466
  margin-right: 0;
1506
1467
  margin-left: 0;
1507
1468
  }
1508
1469
 
1509
- .exp--create-full-page .exp--create-full-page__step--hidden-step,
1510
- .exp--create-full-page .exp--create-full-page__step--hidden-section {
1470
+ .c4p--create-full-page .c4p--create-full-page__step--hidden-step,
1471
+ .c4p--create-full-page .c4p--create-full-page__step--hidden-section {
1511
1472
  display: none;
1512
1473
  }
1513
1474
 
1514
- .exp--create-full-page .exp--create-full-page__step--visible-section {
1475
+ .c4p--create-full-page .c4p--create-full-page__step--visible-section {
1515
1476
  display: block;
1516
1477
  }
1517
1478
 
1518
- .exp--create-full-page .exp--create-full-page__step--visible-step {
1479
+ .c4p--create-full-page .c4p--create-full-page__step--visible-step {
1519
1480
  opacity: 1;
1520
1481
  }
1521
1482
 
1522
- .exp--create-full-page .exp--create-full-page__section-subtitle,
1523
- .exp--create-full-page .exp--create-full-page__step-subtitle {
1483
+ .c4p--create-full-page .c4p--create-full-page__section-subtitle,
1484
+ .c4p--create-full-page .c4p--create-full-page__step-subtitle {
1524
1485
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
1525
1486
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
1526
1487
  line-height: var(--cds-productive-heading-01-line-height, 1.28572);
@@ -1529,8 +1490,8 @@
1529
1490
  margin-bottom: var(--cds-spacing-03, 0.5rem);
1530
1491
  }
1531
1492
 
1532
- .exp--create-full-page .exp--create-full-page__section-description,
1533
- .exp--create-full-page .exp--create-full-page__step-description {
1493
+ .c4p--create-full-page .c4p--create-full-page__section-description,
1494
+ .c4p--create-full-page .c4p--create-full-page__step-description {
1534
1495
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
1535
1496
  font-weight: var(--cds-body-long-01-font-weight, 400);
1536
1497
  line-height: var(--cds-body-long-01-line-height, 1.42857);
@@ -1539,45 +1500,45 @@
1539
1500
  margin-bottom: var(--cds-spacing-06, 1.5rem);
1540
1501
  }
1541
1502
 
1542
- .exp--create-full-page .bx--fieldset {
1503
+ .c4p--create-full-page .bx--fieldset {
1543
1504
  margin-bottom: 0;
1544
1505
  }
1545
1506
 
1546
- .exp--create-full-page .exp--create-full-page__step-fieldset > * {
1507
+ .c4p--create-full-page .c4p--create-full-page__step-fieldset > * {
1547
1508
  margin-bottom: var(--cds-spacing-05, 1rem);
1548
1509
  }
1549
1510
 
1550
- .exp--create-full-page .bx--modal-close {
1511
+ .c4p--create-full-page .bx--modal-close {
1551
1512
  display: none;
1552
1513
  }
1553
1514
 
1554
- .exp--create-full-page {
1515
+ .c4p--create-full-page {
1555
1516
  display: flex;
1556
1517
  height: 100vh;
1557
1518
  padding: 0;
1558
1519
  margin: 0;
1559
1520
  }
1560
1521
 
1561
- .exp--create-full-page .exp--create-full-page__left-nav {
1522
+ .c4p--create-full-page .c4p--create-full-page__left-nav {
1562
1523
  grid-column: 1/-1;
1563
1524
  grid-row: 1/-1;
1564
1525
  overflow-y: auto;
1565
1526
  }
1566
1527
 
1567
- .exp--create-full-page .exp--create-full-page__body {
1528
+ .c4p--create-full-page .c4p--create-full-page__body {
1568
1529
  display: flex;
1569
1530
  flex-direction: column;
1570
1531
  flex-grow: 1;
1571
1532
  }
1572
1533
 
1573
- .exp--create-full-page .exp--create-full-page__main {
1534
+ .c4p--create-full-page .c4p--create-full-page__main {
1574
1535
  display: flex;
1575
1536
  max-height: 100%;
1576
1537
  flex-direction: column;
1577
1538
  flex-grow: 1;
1578
1539
  }
1579
1540
 
1580
- .exp--create-full-page .exp--create-full-page__content {
1541
+ .c4p--create-full-page .c4p--create-full-page__content {
1581
1542
  overflow: auto;
1582
1543
  flex-grow: 1;
1583
1544
  background-color: var(--cds-ui-background, #ffffff);
@@ -1585,12 +1546,12 @@
1585
1546
  overflow-x: hidden;
1586
1547
  }
1587
1548
 
1588
- .exp--create-full-page .exp--create-full-page__step {
1549
+ .c4p--create-full-page .c4p--create-full-page__step {
1589
1550
  position: relative;
1590
1551
  padding-bottom: var(--cds-spacing-07, 2rem);
1591
1552
  }
1592
1553
 
1593
- .exp--create-full-page .bx--side-nav--ux {
1554
+ .c4p--create-full-page .bx--side-nav--ux {
1594
1555
  top: 0;
1595
1556
  height: min-content;
1596
1557
  padding-top: 0;
@@ -1600,14 +1561,14 @@
1600
1561
  overflow-x: auto;
1601
1562
  }
1602
1563
 
1603
- .exp--create-full-page .exp--create-full-page__section-divider {
1564
+ .c4p--create-full-page .c4p--create-full-page__section-divider {
1604
1565
  position: relative;
1605
1566
  display: block;
1606
1567
  width: 0;
1607
1568
  height: 1px;
1608
1569
  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));
1609
1570
  }
1610
- .exp--create-full-page .exp--create-full-page__section-divider::after {
1571
+ .c4p--create-full-page .c4p--create-full-page__section-divider::after {
1611
1572
  position: absolute;
1612
1573
  top: 0;
1613
1574
  left: 0;
@@ -1617,8 +1578,8 @@
1617
1578
  content: "";
1618
1579
  }
1619
1580
 
1620
- .exp--create-full-page .exp--create-full-page__step-title,
1621
- .exp--create-full-page .exp--create-full-page__section-title {
1581
+ .c4p--create-full-page .c4p--create-full-page__step-title,
1582
+ .c4p--create-full-page .c4p--create-full-page__section-title {
1622
1583
  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
1623
1584
  font-weight: var(--cds-productive-heading-04-font-weight, 400);
1624
1585
  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
@@ -1627,7 +1588,7 @@
1627
1588
  margin-bottom: var(--cds-spacing-05, 1rem);
1628
1589
  }
1629
1590
 
1630
- .exp--create-full-page .exp--create-full-page__influencer {
1591
+ .c4p--create-full-page .c4p--create-full-page__influencer {
1631
1592
  display: grid;
1632
1593
  flex: 0 0 257px;
1633
1594
  border-right: 1px solid var(--cds-ui-03, #e0e0e0);
@@ -1636,17 +1597,17 @@
1636
1597
  grid-template-rows: 1fr auto;
1637
1598
  }
1638
1599
 
1639
- .exp--create-full-page .exp--create-full-page__progress-indicator {
1600
+ .c4p--create-full-page .c4p--create-full-page__progress-indicator {
1640
1601
  padding: var(--cds-spacing-06, 1.5rem);
1641
1602
  }
1642
1603
 
1643
- .exp--create-full-page .exp--create-full-page__influencer-toggle {
1604
+ .c4p--create-full-page .c4p--create-full-page__influencer-toggle {
1644
1605
  padding: var(--cds-spacing-06, 1.5rem);
1645
1606
  grid-column: 1/-1;
1646
1607
  grid-row: -1/-1;
1647
1608
  }
1648
1609
 
1649
- .exp--create-full-page .exp--create-full-page__buttons {
1610
+ .c4p--create-full-page .c4p--create-full-page__buttons {
1650
1611
  border-top: 1px solid var(--cds-ui-03, #e0e0e0);
1651
1612
  }
1652
1613
 
@@ -1769,37 +1730,37 @@
1769
1730
  /* stylelint-disable-line no-invalid-position-at-import-rule */
1770
1731
  /* stylelint-disable-line no-invalid-position-at-import-rule */
1771
1732
  /* stylelint-disable-line no-invalid-position-at-import-rule */
1772
- .exp--create-modal {
1733
+ .c4p--create-modal {
1773
1734
  background-color: var(--cds-ui-background, #ffffff);
1774
1735
  }
1775
1736
 
1776
- .exp--create-modal .bx--modal-close {
1737
+ .c4p--create-modal .bx--modal-close {
1777
1738
  display: none;
1778
1739
  }
1779
1740
 
1780
1741
  @media (min-width: 42rem) {
1781
- .exp--create-modal .bx--modal-container {
1742
+ .c4p--create-modal .bx--modal-container {
1782
1743
  max-height: 95%;
1783
1744
  }
1784
1745
  }
1785
1746
  @media (min-width: 66rem) {
1786
- .exp--create-modal .bx--modal-container {
1747
+ .c4p--create-modal .bx--modal-container {
1787
1748
  max-height: 95%;
1788
1749
  }
1789
1750
  }
1790
1751
 
1791
- .exp--create-modal .bx--modal-header {
1752
+ .c4p--create-modal .bx--modal-header {
1792
1753
  padding-right: 20%;
1793
1754
  padding-bottom: var(--cds-spacing-03, 0.5rem);
1794
1755
  border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
1795
1756
  margin-bottom: 0;
1796
1757
  }
1797
1758
 
1798
- .exp--create-modal .bx--modal-footer .bx--btn {
1759
+ .c4p--create-modal .bx--modal-footer .bx--btn {
1799
1760
  max-width: none;
1800
1761
  }
1801
1762
 
1802
- .exp--create-modal__title {
1763
+ .c4p--create-modal__title {
1803
1764
  font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
1804
1765
  font-weight: var(--cds-productive-heading-03-font-weight, 400);
1805
1766
  line-height: var(--cds-productive-heading-03-line-height, 1.4);
@@ -1807,7 +1768,7 @@
1807
1768
  margin-bottom: var(--cds-spacing-02, 0.25rem);
1808
1769
  }
1809
1770
 
1810
- .exp--create-modal__subtitle {
1771
+ .c4p--create-modal__subtitle {
1811
1772
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
1812
1773
  font-weight: var(--cds-body-short-01-font-weight, 400);
1813
1774
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -1816,7 +1777,7 @@
1816
1777
  color: var(--cds-text-02, #525252);
1817
1778
  }
1818
1779
 
1819
- .exp--create-modal__description {
1780
+ .c4p--create-modal__description {
1820
1781
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
1821
1782
  font-weight: var(--cds-body-long-01-font-weight, 400);
1822
1783
  line-height: var(--cds-body-long-01-line-height, 1.42857);
@@ -1825,15 +1786,15 @@
1825
1786
  margin: var(--cds-spacing-03, 0.5rem) 0 var(--cds-spacing-05, 1rem) 0;
1826
1787
  }
1827
1788
 
1828
- .exp--create-modal__form .bx--fieldset {
1789
+ .c4p--create-modal__form .bx--fieldset {
1829
1790
  min-width: 100%;
1830
1791
  margin-bottom: 0;
1831
1792
  }
1832
1793
 
1833
- .exp--create-modal__form > * {
1794
+ .c4p--create-modal__form > * {
1834
1795
  margin-bottom: var(--cds-spacing-05, 1rem);
1835
1796
  }
1836
- .exp--create-modal__form > *:last-child {
1797
+ .c4p--create-modal__form > *:last-child {
1837
1798
  margin-bottom: 0;
1838
1799
  }
1839
1800
 
@@ -2033,17 +1994,17 @@
2033
1994
  transform: translateX(30rem);
2034
1995
  }
2035
1996
  }
2036
- .exp--side-panel__container {
2037
- --exp--side-panel--subtitle-opacity: 1;
2038
- --exp--side-panel--title-container-height: 0;
2039
- --exp--side-panel--title-text-height: 0;
2040
- --exp--side-panel--subtitle-container-height: 0;
2041
- --exp--side-panel--action-bar-container-height: 0;
2042
- --exp--side-panel--divider-opacity: 0;
2043
- --exp--side-panel--title-y-position: 0;
2044
- --exp--side-panel--content-bottom-padding: var(--cds-spacing-10, 4rem);
2045
- --exp--side-panel--collapsed-title-y-position: 1rem;
2046
- --exp--side-panel--label-text-height: 0;
1997
+ .c4p--side-panel__container {
1998
+ --c4p--side-panel--subtitle-opacity: 1;
1999
+ --c4p--side-panel--title-container-height: 0;
2000
+ --c4p--side-panel--title-text-height: 0;
2001
+ --c4p--side-panel--subtitle-container-height: 0;
2002
+ --c4p--side-panel--action-bar-container-height: 0;
2003
+ --c4p--side-panel--divider-opacity: 0;
2004
+ --c4p--side-panel--title-y-position: 0;
2005
+ --c4p--side-panel--content-bottom-padding: var(--cds-spacing-10, 4rem);
2006
+ --c4p--side-panel--collapsed-title-y-position: 1rem;
2007
+ --c4p--side-panel--label-text-height: 0;
2047
2008
  position: fixed;
2048
2009
  z-index: 9000;
2049
2010
  top: var(--cds-spacing-09, 3rem);
@@ -2054,18 +2015,18 @@
2054
2015
  transition: transform 240ms;
2055
2016
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
2056
2017
  }
2057
- .exp--side-panel__container.exp--side-panel__container--xs {
2018
+ .c4p--side-panel__container.c4p--side-panel__container--xs {
2058
2019
  min-width: 16rem;
2059
2020
  max-width: 16rem;
2060
2021
  }
2061
- .exp--side-panel__container.exp--side-panel__container--xs .exp--side-panel__title-container.exp--side-panel__title-container--no-title-animation,
2062
- .exp--side-panel__container.exp--side-panel__container--xs .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation,
2063
- .exp--side-panel__container.exp--side-panel__container--xs .exp--side-panel__action-toolbar.exp--side-panel__action-toolbar-no-animation,
2064
- .exp--side-panel__container.exp--side-panel__container--xs .exp--side-panel__actions-container.exp--action-set--xs {
2022
+ .c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
2023
+ .c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
2024
+ .c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation,
2025
+ .c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__actions-container.c4p--action-set--xs {
2065
2026
  min-width: 16rem;
2066
2027
  max-width: 16rem;
2067
2028
  }
2068
- .exp--side-panel__container.exp--side-panel__container-right-placement.exp--side-panel__container--xs {
2029
+ .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--xs {
2069
2030
  min-width: 16rem;
2070
2031
  max-width: 16rem;
2071
2032
  right: 0;
@@ -2081,7 +2042,7 @@
2081
2042
  transform: translateX(0);
2082
2043
  }
2083
2044
  }
2084
- .exp--side-panel__container.exp--side-panel__container-left-placement.exp--side-panel__container--xs {
2045
+ .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--xs {
2085
2046
  min-width: 16rem;
2086
2047
  max-width: 16rem;
2087
2048
  left: 0;
@@ -2097,18 +2058,18 @@
2097
2058
  transform: translateX(0);
2098
2059
  }
2099
2060
  }
2100
- .exp--side-panel__container.exp--side-panel__container--sm {
2061
+ .c4p--side-panel__container.c4p--side-panel__container--sm {
2101
2062
  min-width: 20rem;
2102
2063
  max-width: 20rem;
2103
2064
  }
2104
- .exp--side-panel__container.exp--side-panel__container--sm .exp--side-panel__title-container.exp--side-panel__title-container--no-title-animation,
2105
- .exp--side-panel__container.exp--side-panel__container--sm .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation,
2106
- .exp--side-panel__container.exp--side-panel__container--sm .exp--side-panel__action-toolbar.exp--side-panel__action-toolbar-no-animation,
2107
- .exp--side-panel__container.exp--side-panel__container--sm .exp--side-panel__actions-container.exp--action-set--sm {
2065
+ .c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
2066
+ .c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
2067
+ .c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation,
2068
+ .c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__actions-container.c4p--action-set--sm {
2108
2069
  min-width: 20rem;
2109
2070
  max-width: 20rem;
2110
2071
  }
2111
- .exp--side-panel__container.exp--side-panel__container-right-placement.exp--side-panel__container--sm {
2072
+ .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--sm {
2112
2073
  min-width: 20rem;
2113
2074
  max-width: 20rem;
2114
2075
  right: 0;
@@ -2124,7 +2085,7 @@
2124
2085
  transform: translateX(0);
2125
2086
  }
2126
2087
  }
2127
- .exp--side-panel__container.exp--side-panel__container-left-placement.exp--side-panel__container--sm {
2088
+ .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--sm {
2128
2089
  min-width: 20rem;
2129
2090
  max-width: 20rem;
2130
2091
  left: 0;
@@ -2140,18 +2101,18 @@
2140
2101
  transform: translateX(0);
2141
2102
  }
2142
2103
  }
2143
- .exp--side-panel__container.exp--side-panel__container--md {
2104
+ .c4p--side-panel__container.c4p--side-panel__container--md {
2144
2105
  min-width: 30rem;
2145
2106
  max-width: 30rem;
2146
2107
  }
2147
- .exp--side-panel__container.exp--side-panel__container--md .exp--side-panel__title-container.exp--side-panel__title-container--no-title-animation,
2148
- .exp--side-panel__container.exp--side-panel__container--md .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation,
2149
- .exp--side-panel__container.exp--side-panel__container--md .exp--side-panel__action-toolbar.exp--side-panel__action-toolbar-no-animation,
2150
- .exp--side-panel__container.exp--side-panel__container--md .exp--side-panel__actions-container.exp--action-set--md {
2108
+ .c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
2109
+ .c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
2110
+ .c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation,
2111
+ .c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__actions-container.c4p--action-set--md {
2151
2112
  min-width: 30rem;
2152
2113
  max-width: 30rem;
2153
2114
  }
2154
- .exp--side-panel__container.exp--side-panel__container-right-placement.exp--side-panel__container--md {
2115
+ .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--md {
2155
2116
  min-width: 30rem;
2156
2117
  max-width: 30rem;
2157
2118
  right: 0;
@@ -2167,7 +2128,7 @@
2167
2128
  transform: translateX(0);
2168
2129
  }
2169
2130
  }
2170
- .exp--side-panel__container.exp--side-panel__container-left-placement.exp--side-panel__container--md {
2131
+ .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--md {
2171
2132
  min-width: 30rem;
2172
2133
  max-width: 30rem;
2173
2134
  left: 0;
@@ -2183,18 +2144,18 @@
2183
2144
  transform: translateX(0);
2184
2145
  }
2185
2146
  }
2186
- .exp--side-panel__container.exp--side-panel__container--lg {
2147
+ .c4p--side-panel__container.c4p--side-panel__container--lg {
2187
2148
  min-width: 40rem;
2188
2149
  max-width: 40rem;
2189
2150
  }
2190
- .exp--side-panel__container.exp--side-panel__container--lg .exp--side-panel__title-container.exp--side-panel__title-container--no-title-animation,
2191
- .exp--side-panel__container.exp--side-panel__container--lg .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation,
2192
- .exp--side-panel__container.exp--side-panel__container--lg .exp--side-panel__action-toolbar.exp--side-panel__action-toolbar-no-animation,
2193
- .exp--side-panel__container.exp--side-panel__container--lg .exp--side-panel__actions-container.exp--action-set--lg {
2151
+ .c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
2152
+ .c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
2153
+ .c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation,
2154
+ .c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__actions-container.c4p--action-set--lg {
2194
2155
  min-width: 40rem;
2195
2156
  max-width: 40rem;
2196
2157
  }
2197
- .exp--side-panel__container.exp--side-panel__container-right-placement.exp--side-panel__container--lg {
2158
+ .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--lg {
2198
2159
  min-width: 40rem;
2199
2160
  max-width: 40rem;
2200
2161
  right: 0;
@@ -2210,7 +2171,7 @@
2210
2171
  transform: translateX(0);
2211
2172
  }
2212
2173
  }
2213
- .exp--side-panel__container.exp--side-panel__container-left-placement.exp--side-panel__container--lg {
2174
+ .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--lg {
2214
2175
  min-width: 40rem;
2215
2176
  max-width: 40rem;
2216
2177
  left: 0;
@@ -2226,18 +2187,18 @@
2226
2187
  transform: translateX(0);
2227
2188
  }
2228
2189
  }
2229
- .exp--side-panel__container.exp--side-panel__container--max {
2190
+ .c4p--side-panel__container.c4p--side-panel__container--max {
2230
2191
  min-width: 75%;
2231
2192
  max-width: 75%;
2232
2193
  }
2233
- .exp--side-panel__container.exp--side-panel__container--max .exp--side-panel__title-container.exp--side-panel__title-container--no-title-animation,
2234
- .exp--side-panel__container.exp--side-panel__container--max .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation,
2235
- .exp--side-panel__container.exp--side-panel__container--max .exp--side-panel__action-toolbar.exp--side-panel__action-toolbar-no-animation,
2236
- .exp--side-panel__container.exp--side-panel__container--max .exp--side-panel__actions-container.exp--action-set--max {
2194
+ .c4p--side-panel__container.c4p--side-panel__container--max .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
2195
+ .c4p--side-panel__container.c4p--side-panel__container--max .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
2196
+ .c4p--side-panel__container.c4p--side-panel__container--max .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation,
2197
+ .c4p--side-panel__container.c4p--side-panel__container--max .c4p--side-panel__actions-container.c4p--action-set--max {
2237
2198
  min-width: 75%;
2238
2199
  max-width: 75%;
2239
2200
  }
2240
- .exp--side-panel__container.exp--side-panel__container-right-placement.exp--side-panel__container--max {
2201
+ .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--max {
2241
2202
  min-width: 75%;
2242
2203
  max-width: 75%;
2243
2204
  right: 0;
@@ -2253,7 +2214,7 @@
2253
2214
  transform: translateX(0);
2254
2215
  }
2255
2216
  }
2256
- .exp--side-panel__container.exp--side-panel__container-left-placement.exp--side-panel__container--max {
2217
+ .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--max {
2257
2218
  min-width: 75%;
2258
2219
  max-width: 75%;
2259
2220
  left: 0;
@@ -2269,10 +2230,10 @@
2269
2230
  transform: translateX(0);
2270
2231
  }
2271
2232
  }
2272
- .exp--side-panel__container.exp--side-panel__container-with-action-toolbar.exp--side-panel__with-condensed-header .exp--side-panel__title-container::before {
2233
+ .c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__title-container::before {
2273
2234
  content: none;
2274
2235
  }
2275
- .exp--side-panel__container.exp--side-panel__container-with-action-toolbar.exp--side-panel__with-condensed-header .exp--side-panel__action-toolbar::before {
2236
+ .c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__action-toolbar::before {
2276
2237
  position: absolute;
2277
2238
  bottom: 0;
2278
2239
  left: 0;
@@ -2280,20 +2241,20 @@
2280
2241
  height: 1px;
2281
2242
  background-color: var(--cds-decorative-01, #e0e0e0);
2282
2243
  content: "";
2283
- opacity: var(--exp--side-panel--divider-opacity);
2244
+ opacity: var(--c4p--side-panel--divider-opacity);
2284
2245
  }
2285
- .exp--side-panel__container.exp--side-panel__container-without-overlay {
2246
+ .c4p--side-panel__container.c4p--side-panel__container-without-overlay {
2286
2247
  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));
2287
2248
  }
2288
- .exp--side-panel__container .exp--side-panel__title-container {
2249
+ .c4p--side-panel__container .c4p--side-panel__title-container {
2289
2250
  position: sticky;
2290
2251
  z-index: 4;
2291
2252
  top: 0;
2292
- height: calc(var(--exp--side-panel--title-container-height) - var(--exp--side-panel--label-text-height));
2253
+ height: calc(var(--c4p--side-panel--title-container-height) - var(--c4p--side-panel--label-text-height));
2293
2254
  padding: var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
2294
2255
  background-color: var(--cds-ui-01, #f4f4f4);
2295
2256
  }
2296
- .exp--side-panel__container .exp--side-panel__title-container::before {
2257
+ .c4p--side-panel__container .c4p--side-panel__title-container::before {
2297
2258
  position: absolute;
2298
2259
  bottom: 0;
2299
2260
  left: 0;
@@ -2301,34 +2262,34 @@
2301
2262
  height: 1px;
2302
2263
  background-color: var(--cds-decorative-01, #e0e0e0);
2303
2264
  content: "";
2304
- opacity: var(--exp--side-panel--divider-opacity);
2265
+ opacity: var(--c4p--side-panel--divider-opacity);
2305
2266
  }
2306
- .exp--side-panel__container .exp--side-panel__title-container.exp--side-panel__on-detail-step .exp--side-panel__collapsed-title-text {
2267
+ .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__on-detail-step .c4p--side-panel__collapsed-title-text {
2307
2268
  top: var(--cds-spacing-09, 3rem);
2308
2269
  }
2309
- .exp--side-panel__container .exp--side-panel__title-container.exp--side-panel__title-container-without-title {
2270
+ .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container-without-title {
2310
2271
  padding: 0;
2311
2272
  }
2312
- .exp--side-panel__container .exp--side-panel__title-container.exp--side-panel__title-container-without-title.exp--side-panel__on-detail-step-without-title {
2273
+ .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container-without-title.c4p--side-panel__on-detail-step-without-title {
2313
2274
  height: calc(var(--cds-spacing-08, 2.5rem) + var(--cds-spacing-02, 0.25rem));
2314
2275
  padding: var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
2315
2276
  }
2316
- .exp--side-panel__container .exp--side-panel__title-container.exp--side-panel__title-container-without-title::before {
2277
+ .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container-without-title::before {
2317
2278
  background-color: transparent;
2318
2279
  }
2319
- .exp--side-panel__container.exp--side-panel__container-is-animating {
2280
+ .c4p--side-panel__container.c4p--side-panel__container-is-animating {
2320
2281
  pointer-events: none;
2321
2282
  }
2322
- .exp--side-panel__container.exp--side-panel__container-is-animating .exp--side-panel__title-container.exp--side-panel__title-container--no-title-animation {
2283
+ .c4p--side-panel__container.c4p--side-panel__container-is-animating .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
2323
2284
  top: 0;
2324
2285
  }
2325
- .exp--side-panel__container.exp--side-panel__container-is-animating .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation {
2326
- top: var(--exp--side-panel--title-text-height);
2286
+ .c4p--side-panel__container.c4p--side-panel__container-is-animating .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation {
2287
+ top: var(--c4p--side-panel--title-text-height);
2327
2288
  }
2328
- .exp--side-panel__container.exp--side-panel__container-is-animating .exp--side-panel__action-toolbar.exp--side-panel__action-toolbar-no-animation {
2329
- top: calc(var(--exp--side-panel--title-text-height) + var(--exp--side-panel--subtitle-container-height));
2289
+ .c4p--side-panel__container.c4p--side-panel__container-is-animating .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
2290
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height));
2330
2291
  }
2331
- .exp--side-panel__container .exp--side-panel__title-text {
2292
+ .c4p--side-panel__container .c4p--side-panel__title-text {
2332
2293
  font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
2333
2294
  font-weight: var(--cds-productive-heading-03-font-weight, 400);
2334
2295
  line-height: var(--cds-productive-heading-03-line-height, 1.4);
@@ -2341,22 +2302,22 @@
2341
2302
  position: inherit;
2342
2303
  z-index: 4;
2343
2304
  background-color: var(--cds-ui-01, #f4f4f4);
2344
- opacity: var(--exp--side-panel--subtitle-opacity);
2345
- transform: translateY(var(--exp--side-panel--title-y-position));
2305
+ opacity: var(--c4p--side-panel--subtitle-opacity);
2306
+ transform: translateY(var(--c4p--side-panel--title-y-position));
2346
2307
  }
2347
- .exp--side-panel__container .exp--side-panel__label-text {
2308
+ .c4p--side-panel__container .c4p--side-panel__label-text {
2348
2309
  font-size: var(--cds-label-01-font-size, 0.75rem);
2349
2310
  font-weight: var(--cds-label-01-font-weight, 400);
2350
2311
  line-height: var(--cds-label-01-line-height, 1.33333);
2351
2312
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
2352
2313
  overflow: hidden;
2353
2314
  padding-right: var(--cds-spacing-05, 1rem);
2354
- opacity: var(--exp--side-panel--subtitle-opacity);
2315
+ opacity: var(--c4p--side-panel--subtitle-opacity);
2355
2316
  text-overflow: ellipsis;
2356
- transform: translateY(var(--exp--side-panel--title-y-position));
2317
+ transform: translateY(var(--c4p--side-panel--title-y-position));
2357
2318
  white-space: nowrap;
2358
2319
  }
2359
- .exp--side-panel__container .exp--side-panel__collapsed-title-text {
2320
+ .c4p--side-panel__container .c4p--side-panel__collapsed-title-text {
2360
2321
  font-size: var(--cds-productive-heading-02-font-size, 1rem);
2361
2322
  font-weight: var(--cds-productive-heading-02-font-weight, 600);
2362
2323
  line-height: var(--cds-productive-heading-02-line-height, 1.375);
@@ -2368,10 +2329,10 @@
2368
2329
  -webkit-line-clamp: 2;
2369
2330
  position: absolute;
2370
2331
  top: var(--cds-spacing-05, 1rem);
2371
- opacity: var(--exp--side-panel--divider-opacity);
2372
- transform: translateY(var(--exp--side-panel--collapsed-title-y-position));
2332
+ opacity: var(--c4p--side-panel--divider-opacity);
2333
+ transform: translateY(var(--c4p--side-panel--collapsed-title-y-position));
2373
2334
  }
2374
- .exp--side-panel__container .exp--side-panel__subtitle-text {
2335
+ .c4p--side-panel__container .c4p--side-panel__subtitle-text {
2375
2336
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
2376
2337
  font-weight: var(--cds-body-short-01-font-weight, 400);
2377
2338
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -2380,65 +2341,65 @@
2380
2341
  padding: 0 var(--cds-spacing-09, 3rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem);
2381
2342
  -webkit-box-orient: vertical;
2382
2343
  -webkit-line-clamp: 3;
2383
- opacity: var(--exp--side-panel--subtitle-opacity);
2344
+ opacity: var(--c4p--side-panel--subtitle-opacity);
2384
2345
  }
2385
- .exp--side-panel__container .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation {
2346
+ .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation {
2386
2347
  position: fixed;
2387
2348
  z-index: 2;
2388
- top: calc(var(--exp--side-panel--title-text-height) + var(--cds-spacing-09, 3rem));
2349
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--cds-spacing-09, 3rem));
2389
2350
  background-color: var(--cds-ui-01, #f4f4f4);
2390
2351
  }
2391
- .exp--side-panel__container .exp--side-panel__subtitle-text.exp--side-panel__subtitle-text-no-animation.exp--side-panel__subtitle-text-is-animating {
2392
- top: var(--exp--side-panel--title-text-height);
2352
+ .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation.c4p--side-panel__subtitle-text-is-animating {
2353
+ top: var(--c4p--side-panel--title-text-height);
2393
2354
  }
2394
- .exp--side-panel__container .exp--side-panel__subtitle-text.exp--side-panel__subtitle-without-title {
2355
+ .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-without-title {
2395
2356
  padding-top: var(--cds-spacing-05, 1rem);
2396
2357
  padding-right: var(--cds-spacing-09, 3rem);
2397
2358
  }
2398
- .exp--side-panel__container .exp--side-panel__title-container.exp--side-panel__title-container--no-title-animation.exp--side-panel__title-container-is-animating {
2359
+ .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation.c4p--side-panel__title-container-is-animating {
2399
2360
  top: 0;
2400
2361
  }
2401
- .exp--side-panel__container .exp--side-panel__title-container.exp--side-panel__title-container--no-title-animation {
2362
+ .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
2402
2363
  position: fixed;
2403
2364
  top: var(--cds-spacing-09, 3rem);
2404
- height: var(--exp--side-panel--title-text-height);
2365
+ height: var(--c4p--side-panel--title-text-height);
2405
2366
  }
2406
- .exp--side-panel__container .exp--side-panel__inner-content {
2367
+ .c4p--side-panel__container .c4p--side-panel__inner-content {
2407
2368
  overflow: auto;
2408
2369
  height: calc(100vh - 3rem);
2409
- 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));
2370
+ 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));
2410
2371
  overflow-x: hidden;
2411
2372
  }
2412
- .exp--side-panel__container .exp--side-panel__inner-content-with-actions {
2413
- height: calc(100vh - (var(--exp--side-panel--content-bottom-padding) + 2rem));
2373
+ .c4p--side-panel__container .c4p--side-panel__inner-content-with-actions {
2374
+ height: calc(100vh - (var(--c4p--side-panel--content-bottom-padding) + 2rem));
2414
2375
  }
2415
- .exp--side-panel__container .exp--side-panel__inner-content.exp--side-panel__static-inner-content {
2416
- 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)));
2376
+ .c4p--side-panel__container .c4p--side-panel__inner-content.c4p--side-panel__static-inner-content {
2377
+ 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)));
2417
2378
  padding-top: var(--cds-spacing-05, 1rem);
2418
2379
  }
2419
- .exp--side-panel__container .exp--side-panel__action-toolbar.exp--side-panel__action-toolbar-no-animation {
2380
+ .c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
2420
2381
  position: fixed;
2421
2382
  top: calc(
2422
- var(--exp--side-panel--title-text-height) +
2423
- var(--exp--side-panel--subtitle-container-height) + var(--cds-spacing-09, 3rem)
2383
+ var(--c4p--side-panel--title-text-height) +
2384
+ var(--c4p--side-panel--subtitle-container-height) + var(--cds-spacing-09, 3rem)
2424
2385
  );
2425
2386
  width: 100%;
2426
2387
  border-bottom: 1px solid var(--cds-decorative-01, #e0e0e0);
2427
2388
  }
2428
- .exp--side-panel__container .exp--side-panel__action-toolbar.exp--side-panel__action-toolbar-no-animation + .exp--side-panel__body-content {
2389
+ .c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation + .c4p--side-panel__body-content {
2429
2390
  margin-top: calc(
2430
- var(--exp--side-panel--title-text-height) +
2431
- var(--exp--side-panel--subtitle-container-height) + var(--cds-spacing-09, 3rem)
2391
+ var(--c4p--side-panel--title-text-height) +
2392
+ var(--c4p--side-panel--subtitle-container-height) + var(--cds-spacing-09, 3rem)
2432
2393
  );
2433
2394
  }
2434
- .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 {
2395
+ .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 {
2435
2396
  border-bottom: 1px solid var(--cds-decorative-01, #e0e0e0);
2436
2397
  margin-bottom: var(--cds-spacing-05, 1rem);
2437
2398
  }
2438
- .exp--side-panel__container .exp--side-panel__action-toolbar {
2399
+ .c4p--side-panel__container .c4p--side-panel__action-toolbar {
2439
2400
  position: sticky;
2440
2401
  z-index: 4;
2441
- top: var(--exp--side-panel--title-height);
2402
+ top: var(--c4p--side-panel--title-height);
2442
2403
  display: flex;
2443
2404
  align-items: center;
2444
2405
  justify-content: flex-start;
@@ -2448,32 +2409,32 @@
2448
2409
  transition: transform 150ms;
2449
2410
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
2450
2411
  }
2451
- .exp--side-panel__container .exp--side-panel__action-toolbar .exp--side-panel__action-toolbar-button {
2412
+ .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button {
2452
2413
  min-width: 2rem;
2453
2414
  }
2454
- .exp--side-panel__container .exp--side-panel__action-toolbar .exp--side-panel__action-toolbar-button.exp--side-panel__action-toolbar-icon-only-button {
2415
+ .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button.c4p--side-panel__action-toolbar-icon-only-button {
2455
2416
  padding: 0;
2456
2417
  color: var(--cds-text-01, #161616);
2457
2418
  }
2458
- .exp--side-panel__container .exp--side-panel__action-toolbar .exp--side-panel__action-toolbar-button.exp--side-panel__action-toolbar-icon-only-button svg {
2419
+ .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button.c4p--side-panel__action-toolbar-icon-only-button svg {
2459
2420
  margin-left: var(--cds-spacing-03, 0.5rem);
2460
2421
  }
2461
- .exp--side-panel__container .exp--side-panel__action-toolbar .exp--side-panel__action-toolbar-button.exp--side-panel__action-toolbar-leading-button {
2422
+ .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button.c4p--side-panel__action-toolbar-leading-button {
2462
2423
  margin-right: var(--cds-spacing-03, 0.5rem);
2463
2424
  }
2464
- .exp--side-panel__container .bx--btn.exp--side-panel__navigation-back-button {
2425
+ .c4p--side-panel__container .bx--btn.c4p--side-panel__navigation-back-button {
2465
2426
  position: relative;
2466
2427
  z-index: 5;
2467
2428
  top: calc(-1 * var(--cds-spacing-03, 0.5rem));
2468
2429
  left: calc(-1 * var(--cds-spacing-03, 0.5rem));
2469
2430
  }
2470
- .exp--side-panel__container .bx--btn.exp--side-panel__navigation-back-button,
2471
- .exp--side-panel__container .bx--btn.exp--side-panel__close-button {
2431
+ .c4p--side-panel__container .bx--btn.c4p--side-panel__navigation-back-button,
2432
+ .c4p--side-panel__container .bx--btn.c4p--side-panel__close-button {
2472
2433
  min-width: 2rem;
2473
2434
  padding: 0;
2474
2435
  color: var(--cds-text-01, #161616);
2475
2436
  }
2476
- .exp--side-panel__container .bx--btn.exp--side-panel__close-button {
2437
+ .c4p--side-panel__container .bx--btn.c4p--side-panel__close-button {
2477
2438
  position: absolute;
2478
2439
  z-index: 5;
2479
2440
  top: var(--cds-spacing-03, 0.5rem);
@@ -2483,53 +2444,53 @@
2483
2444
  justify-content: center;
2484
2445
  background-color: var(--cds-ui-01, #f4f4f4);
2485
2446
  }
2486
- .exp--side-panel__container .bx--btn.exp--side-panel__close-button .bx--btn__icon {
2447
+ .c4p--side-panel__container .bx--btn.c4p--side-panel__close-button .bx--btn__icon {
2487
2448
  margin: 0;
2488
2449
  }
2489
- .exp--side-panel__container .exp--side-panel__body-content {
2450
+ .c4p--side-panel__container .c4p--side-panel__body-content {
2490
2451
  padding: var(--cds-spacing-05, 1rem);
2491
2452
  padding-top: 0;
2492
2453
  }
2493
- .exp--side-panel__container.exp--side-panel__container-is-animating .exp--side-panel__actions-container.exp--action-set--max {
2454
+ .c4p--side-panel__container.c4p--side-panel__container-is-animating .c4p--side-panel__actions-container.c4p--action-set--max {
2494
2455
  min-width: 100%;
2495
2456
  max-width: 100%;
2496
2457
  }
2497
- .exp--side-panel__container .exp--side-panel__actions-container {
2458
+ .c4p--side-panel__container .c4p--side-panel__actions-container {
2498
2459
  position: fixed;
2499
2460
  bottom: 0;
2500
2461
  border-top: 1px solid var(--cds-decorative-01, #e0e0e0);
2501
2462
  background-color: var(--cds-ui-01, #f4f4f4);
2502
2463
  }
2503
- .exp--side-panel__container .exp--side-panel__actions-container.exp--action-set--max {
2464
+ .c4p--side-panel__container .c4p--side-panel__actions-container.c4p--action-set--max {
2504
2465
  flex-direction: column;
2505
2466
  }
2506
- .exp--side-panel__container .exp--side-panel__actions-container.exp--action-set--max .exp--action-set__action-button {
2467
+ .c4p--side-panel__container .c4p--side-panel__actions-container.c4p--action-set--max .c4p--action-set__action-button {
2507
2468
  width: 100%;
2508
2469
  max-width: 100%;
2509
2470
  }
2510
2471
  @media (min-width: 42rem) {
2511
- .exp--side-panel__container .exp--side-panel__actions-container.exp--action-set--max {
2472
+ .c4p--side-panel__container .c4p--side-panel__actions-container.c4p--action-set--max {
2512
2473
  flex-direction: row;
2513
2474
  }
2514
- .exp--side-panel__container .exp--side-panel__actions-container.exp--action-set--max .exp--action-set__action-button {
2475
+ .c4p--side-panel__container .c4p--side-panel__actions-container.c4p--action-set--max .c4p--action-set__action-button {
2515
2476
  width: 25%;
2516
2477
  }
2517
2478
  }
2518
- .exp--side-panel__container .exp--side-panel__actions-container .exp--action-set__action-button {
2479
+ .c4p--side-panel__container .c4p--side-panel__actions-container .c4p--action-set__action-button {
2519
2480
  height: var(--cds-layout-05, 4rem);
2520
2481
  }
2521
- .exp--side-panel__container .exp--side-panel__actions-container.exp--side-panel__actions-container-condensed .exp--action-set__action-button {
2482
+ .c4p--side-panel__container .c4p--side-panel__actions-container.c4p--side-panel__actions-container-condensed .c4p--action-set__action-button {
2522
2483
  height: var(--cds-layout-04, 3rem);
2523
2484
  }
2524
2485
 
2525
- .exp--side-panel__container .bx--text-input,
2526
- .exp--side-panel__container .bx--text-area,
2527
- .exp--side-panel__container .bx--search-input,
2528
- .exp--side-panel__container .bx--select-input,
2529
- .exp--side-panel__container .bx--dropdown,
2530
- .exp--side-panel__container .bx--dropdown-list,
2531
- .exp--side-panel__container .bx--number input[type=number],
2532
- .exp--side-panel__container .bx--date-picker__input {
2486
+ .c4p--side-panel__container .bx--text-input,
2487
+ .c4p--side-panel__container .bx--text-area,
2488
+ .c4p--side-panel__container .bx--search-input,
2489
+ .c4p--side-panel__container .bx--select-input,
2490
+ .c4p--side-panel__container .bx--dropdown,
2491
+ .c4p--side-panel__container .bx--dropdown-list,
2492
+ .c4p--side-panel__container .bx--number input[type=number],
2493
+ .c4p--side-panel__container .bx--date-picker__input {
2533
2494
  background-color: var(--cds-field-02, #ffffff);
2534
2495
  }
2535
2496
 
@@ -2549,7 +2510,7 @@
2549
2510
  opacity: 0;
2550
2511
  }
2551
2512
  }
2552
- .exp--side-panel__visually-hidden {
2513
+ .c4p--side-panel__visually-hidden {
2553
2514
  position: absolute;
2554
2515
  overflow: hidden;
2555
2516
  width: 1px;
@@ -2562,7 +2523,7 @@
2562
2523
  white-space: nowrap;
2563
2524
  }
2564
2525
 
2565
- .exp--side-panel__overlay {
2526
+ .c4p--side-panel__overlay {
2566
2527
  position: fixed;
2567
2528
  z-index: 6000;
2568
2529
  top: 0;
@@ -2576,17 +2537,17 @@
2576
2537
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
2577
2538
  }
2578
2539
 
2579
- .exp--create-side-panel.exp--side-panel__container .exp--create-side-panel__content-text {
2540
+ .c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
2580
2541
  padding-right: calc(20% - var(--cds-spacing-05, 1rem));
2581
2542
  }
2582
2543
 
2583
- .exp--create-side-panel.exp--side-panel__container--xs .exp--side-panel__title-text {
2544
+ .c4p--create-side-panel.c4p--side-panel__container--xs .c4p--side-panel__title-text {
2584
2545
  width: calc(16rem - var(--cds-spacing-05, 1rem));
2585
2546
  padding-right: calc((16rem * 0.2) - var(--cds-spacing-05, 1rem));
2586
2547
  margin-bottom: var(--cds-spacing-02, 0.25rem);
2587
2548
  }
2588
2549
 
2589
- .exp--create-side-panel.exp--side-panel__container--xs .exp--side-panel__subtitle-text {
2550
+ .c4p--create-side-panel.c4p--side-panel__container--xs .c4p--side-panel__subtitle-text {
2590
2551
  width: calc(16rem - var(--cds-spacing-05, 1rem));
2591
2552
  padding-right: calc((16rem * 0.2) - var(--cds-spacing-05, 1rem));
2592
2553
  padding-bottom: var(--cds-spacing-05, 1rem);
@@ -2594,13 +2555,13 @@
2594
2555
  color: var(--cds-text-02, #525252);
2595
2556
  }
2596
2557
 
2597
- .exp--create-side-panel.exp--side-panel__container--sm .exp--side-panel__title-text {
2558
+ .c4p--create-side-panel.c4p--side-panel__container--sm .c4p--side-panel__title-text {
2598
2559
  width: calc(20rem - var(--cds-spacing-05, 1rem));
2599
2560
  padding-right: calc((20rem * 0.2) - var(--cds-spacing-05, 1rem));
2600
2561
  margin-bottom: var(--cds-spacing-02, 0.25rem);
2601
2562
  }
2602
2563
 
2603
- .exp--create-side-panel.exp--side-panel__container--sm .exp--side-panel__subtitle-text {
2564
+ .c4p--create-side-panel.c4p--side-panel__container--sm .c4p--side-panel__subtitle-text {
2604
2565
  width: calc(20rem - var(--cds-spacing-05, 1rem));
2605
2566
  padding-right: calc((20rem * 0.2) - var(--cds-spacing-05, 1rem));
2606
2567
  padding-bottom: var(--cds-spacing-05, 1rem);
@@ -2608,13 +2569,13 @@
2608
2569
  color: var(--cds-text-02, #525252);
2609
2570
  }
2610
2571
 
2611
- .exp--create-side-panel.exp--side-panel__container--md .exp--side-panel__title-text {
2572
+ .c4p--create-side-panel.c4p--side-panel__container--md .c4p--side-panel__title-text {
2612
2573
  width: calc(30rem - var(--cds-spacing-05, 1rem));
2613
2574
  padding-right: calc((30rem * 0.2) - var(--cds-spacing-05, 1rem));
2614
2575
  margin-bottom: var(--cds-spacing-02, 0.25rem);
2615
2576
  }
2616
2577
 
2617
- .exp--create-side-panel.exp--side-panel__container--md .exp--side-panel__subtitle-text {
2578
+ .c4p--create-side-panel.c4p--side-panel__container--md .c4p--side-panel__subtitle-text {
2618
2579
  width: calc(30rem - var(--cds-spacing-05, 1rem));
2619
2580
  padding-right: calc((30rem * 0.2) - var(--cds-spacing-05, 1rem));
2620
2581
  padding-bottom: var(--cds-spacing-05, 1rem);
@@ -2622,13 +2583,13 @@
2622
2583
  color: var(--cds-text-02, #525252);
2623
2584
  }
2624
2585
 
2625
- .exp--create-side-panel.exp--side-panel__container--lg .exp--side-panel__title-text {
2586
+ .c4p--create-side-panel.c4p--side-panel__container--lg .c4p--side-panel__title-text {
2626
2587
  width: calc(40rem - var(--cds-spacing-05, 1rem));
2627
2588
  padding-right: calc((40rem * 0.2) - var(--cds-spacing-05, 1rem));
2628
2589
  margin-bottom: var(--cds-spacing-02, 0.25rem);
2629
2590
  }
2630
2591
 
2631
- .exp--create-side-panel.exp--side-panel__container--lg .exp--side-panel__subtitle-text {
2592
+ .c4p--create-side-panel.c4p--side-panel__container--lg .c4p--side-panel__subtitle-text {
2632
2593
  width: calc(40rem - var(--cds-spacing-05, 1rem));
2633
2594
  padding-right: calc((40rem * 0.2) - var(--cds-spacing-05, 1rem));
2634
2595
  padding-bottom: var(--cds-spacing-05, 1rem);
@@ -2636,13 +2597,13 @@
2636
2597
  color: var(--cds-text-02, #525252);
2637
2598
  }
2638
2599
 
2639
- .exp--create-side-panel.exp--side-panel__container--max .exp--side-panel__title-text {
2600
+ .c4p--create-side-panel.c4p--side-panel__container--max .c4p--side-panel__title-text {
2640
2601
  width: calc(75% - var(--cds-spacing-05, 1rem));
2641
2602
  padding-right: calc((75% * 0.2) - var(--cds-spacing-05, 1rem));
2642
2603
  margin-bottom: var(--cds-spacing-02, 0.25rem);
2643
2604
  }
2644
2605
 
2645
- .exp--create-side-panel.exp--side-panel__container--max .exp--side-panel__subtitle-text {
2606
+ .c4p--create-side-panel.c4p--side-panel__container--max .c4p--side-panel__subtitle-text {
2646
2607
  width: calc(75% - var(--cds-spacing-05, 1rem));
2647
2608
  padding-right: calc((75% * 0.2) - var(--cds-spacing-05, 1rem));
2648
2609
  padding-bottom: var(--cds-spacing-05, 1rem);
@@ -2650,19 +2611,19 @@
2650
2611
  color: var(--cds-text-02, #525252);
2651
2612
  }
2652
2613
 
2653
- .bx--form.exp--create-side-panel__form {
2614
+ .bx--form.c4p--create-side-panel__form {
2654
2615
  padding-top: var(--cds-spacing-05, 1rem);
2655
2616
  }
2656
2617
 
2657
- .exp--create-side-panel__form.bx--fieldset {
2618
+ .c4p--create-side-panel__form.bx--fieldset {
2658
2619
  padding-top: var(--cds-spacing-03, 0.5rem);
2659
2620
  }
2660
2621
 
2661
- .exp--create-side-panel__form > * {
2622
+ .c4p--create-side-panel__form > * {
2662
2623
  margin-bottom: var(--cds-spacing-05, 1rem);
2663
2624
  }
2664
2625
 
2665
- .exp--create-side-panel__form-title-text {
2626
+ .c4p--create-side-panel__form-title-text {
2666
2627
  font-size: var(--cds-productive-heading-02-font-size, 1rem);
2667
2628
  font-weight: var(--cds-productive-heading-02-font-weight, 600);
2668
2629
  line-height: var(--cds-productive-heading-02-line-height, 1.375);
@@ -2670,18 +2631,18 @@
2670
2631
  padding-bottom: var(--cds-spacing-03, 0.5rem);
2671
2632
  }
2672
2633
 
2673
- .exp--create-side-panel__form-description-text {
2634
+ .c4p--create-side-panel__form-description-text {
2674
2635
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
2675
2636
  font-weight: var(--cds-body-long-01-font-weight, 400);
2676
2637
  line-height: var(--cds-body-long-01-line-height, 1.42857);
2677
2638
  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
2678
2639
  }
2679
2640
 
2680
- .exp--create-side-panel.exp--side-panel .bx--btn.exp--side-panel__close-button {
2641
+ .c4p--create-side-panel.c4p--side-panel .bx--btn.c4p--side-panel__close-button {
2681
2642
  display: none;
2682
2643
  }
2683
2644
 
2684
- .exp--create-side-panel__title {
2645
+ .c4p--create-side-panel__title {
2685
2646
  font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
2686
2647
  font-weight: var(--cds-productive-heading-03-font-weight, 400);
2687
2648
  line-height: var(--cds-productive-heading-03-line-height, 1.4);
@@ -2689,7 +2650,7 @@
2689
2650
  margin-bottom: var(--cds-spacing-02, 0.25rem);
2690
2651
  }
2691
2652
 
2692
- .exp--create-side-panel__subtitle {
2653
+ .c4p--create-side-panel__subtitle {
2693
2654
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
2694
2655
  font-weight: var(--cds-body-short-01-font-weight, 400);
2695
2656
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -2698,7 +2659,7 @@
2698
2659
  color: var(--cds-text-02, #525252);
2699
2660
  }
2700
2661
 
2701
- .exp--side-panel .exp--create-side-panel__actions-container {
2662
+ .c4p--side-panel .c4p--create-side-panel__actions-container {
2702
2663
  position: absolute;
2703
2664
  z-index: 4;
2704
2665
  bottom: 0;
@@ -3017,114 +2978,114 @@
3017
2978
  stroke-dashoffset: 0;
3018
2979
  }
3019
2980
  }
3020
- .exp--tearsheet.exp--tearsheet {
2981
+ .c4p--tearsheet.c4p--tearsheet {
3021
2982
  z-index: 9001;
3022
2983
  align-items: flex-end;
3023
2984
  color: var(--cds-text-01, #161616);
3024
2985
  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);
3025
- --exp--tearsheet--stacking-scale-factor-single: 0.95;
3026
- --exp--tearsheet--stacking-scale-factor-double: 0.9;
2986
+ --c4p--tearsheet--stacking-scale-factor-single: 0.95;
2987
+ --c4p--tearsheet--stacking-scale-factor-double: 0.9;
3027
2988
  }
3028
- .exp--tearsheet.is-visible {
2989
+ .c4p--tearsheet.is-visible {
3029
2990
  z-index: 9000;
3030
2991
  align-items: flex-end;
3031
2992
  transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
3032
2993
  }
3033
- .exp--tearsheet.exp--tearsheet--stacked-1-of-2 {
2994
+ .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 {
3034
2995
  z-index: 8999;
3035
2996
  background-color: rgba(22, 22, 22, 0.33);
3036
2997
  }
3037
- .exp--tearsheet.exp--tearsheet--stacked-1-of-3 {
2998
+ .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 {
3038
2999
  z-index: 8998;
3039
3000
  background-color: rgba(22, 22, 22, 0.11);
3040
3001
  }
3041
- .exp--tearsheet.exp--tearsheet--stacked-2-of-3 {
3002
+ .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 {
3042
3003
  z-index: 8999;
3043
3004
  background-color: rgba(22, 22, 22, 0.25);
3044
3005
  }
3045
- .exp--tearsheet.exp--tearsheet--stacked-2-of-2, .exp--tearsheet.exp--tearsheet--stacked-3-of-3 {
3006
+ .c4p--tearsheet.c4p--tearsheet--stacked-2-of-2, .c4p--tearsheet.c4p--tearsheet--stacked-3-of-3 {
3046
3007
  background-color: rgba(22, 22, 22, 0.25);
3047
3008
  }
3048
- .exp--tearsheet .exp--tearsheet__container {
3009
+ .c4p--tearsheet .c4p--tearsheet__container {
3049
3010
  top: auto;
3050
3011
  height: 100%;
3051
3012
  max-height: calc(100% - var(--cds-spacing-09, 3rem));
3052
3013
  transform: translate3d(0, min(95vh, 500px), 0);
3053
3014
  }
3054
- .exp--tearsheet.exp--tearsheet.exp--tearsheet .exp--tearsheet__container {
3015
+ .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__container {
3055
3016
  transition: transform 240ms cubic-bezier(0, 0, 0.3, 1), max-height 240ms cubic-bezier(0, 0, 0.3, 1);
3056
3017
  }
3057
- .exp--tearsheet.exp--tearsheet--stacked-1-of-2 .exp--tearsheet__container, .exp--tearsheet.exp--tearsheet--stacked-2-of-3 .exp--tearsheet__container {
3018
+ .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 .c4p--tearsheet__container, .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 .c4p--tearsheet__container {
3058
3019
  max-height: calc(100% - var(--cds-spacing-09, 3rem) + var(--cds-spacing-05, 1rem));
3059
3020
  }
3060
- .exp--tearsheet.exp--tearsheet--stacked-1-of-3 .exp--tearsheet__container {
3021
+ .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container {
3061
3022
  max-height: calc(100% - var(--cds-spacing-09, 3rem) + (2 * var(--cds-spacing-05, 1rem)));
3062
3023
  }
3063
- .exp--tearsheet .exp--tearsheet__container--lower {
3024
+ .c4p--tearsheet .c4p--tearsheet__container--lower {
3064
3025
  max-height: calc(100% - (var(--cds-spacing-09, 3rem) + var(--cds-spacing-08, 2.5rem)));
3065
3026
  }
3066
- .exp--tearsheet.exp--tearsheet--stacked-1-of-2 .exp--tearsheet__container--lower, .exp--tearsheet.exp--tearsheet--stacked-2-of-3 .exp--tearsheet__container--lower {
3027
+ .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 .c4p--tearsheet__container--lower, .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 .c4p--tearsheet__container--lower {
3067
3028
  max-height: calc(
3068
3029
  100% - (var(--cds-spacing-09, 3rem) + var(--cds-spacing-08, 2.5rem)) + var(--cds-spacing-05, 1rem)
3069
3030
  );
3070
3031
  }
3071
- .exp--tearsheet.exp--tearsheet--stacked-1-of-3 .exp--tearsheet__container--lower {
3032
+ .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container--lower {
3072
3033
  max-height: calc(100% - (var(--cds-spacing-09, 3rem) + var(--cds-spacing-08, 2.5rem)) + (2 * var(--cds-spacing-05, 1rem)));
3073
3034
  }
3074
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__container {
3035
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__container {
3075
3036
  width: 100%;
3076
3037
  }
3077
3038
  @media (min-width: 42rem) {
3078
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__container {
3039
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__container {
3079
3040
  width: calc(100% - (2 * var(--cds-spacing-10, 4rem)));
3080
3041
  }
3081
3042
  }
3082
- .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 {
3083
- transform: scale(var(--exp--tearsheet--stacking-scale-factor-single));
3043
+ .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 {
3044
+ transform: scale(var(--c4p--tearsheet--stacking-scale-factor-single));
3084
3045
  }
3085
- .exp--tearsheet.exp--tearsheet--stacked-1-of-3.is-visible .exp--tearsheet__container {
3086
- transform: scale(var(--exp--tearsheet--stacking-scale-factor-double));
3046
+ .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3.is-visible .c4p--tearsheet__container {
3047
+ transform: scale(var(--c4p--tearsheet--stacking-scale-factor-double));
3087
3048
  }
3088
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__header {
3049
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header {
3089
3050
  padding: var(--cds-spacing-06, 1.5rem) var(--cds-spacing-07, 2rem);
3090
3051
  border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
3091
3052
  margin: 0;
3092
3053
  }
3093
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__header--with-nav {
3054
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header--with-nav {
3094
3055
  padding-bottom: 0;
3095
3056
  }
3096
- .exp--tearsheet.exp--tearsheet--narrow .exp--tearsheet__header {
3057
+ .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header {
3097
3058
  padding: var(--cds-spacing-05, 1rem);
3098
3059
  margin: 0;
3099
3060
  }
3100
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__header--with-close-icon {
3061
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header--with-close-icon {
3101
3062
  padding-right: var(--cds-spacing-05, 1rem);
3102
3063
  margin-right: var(--cds-spacing-09, 3rem);
3103
3064
  }
3104
- .exp--tearsheet .exp--tearsheet__header-content {
3065
+ .c4p--tearsheet .c4p--tearsheet__header-content {
3105
3066
  display: flex;
3106
3067
  justify-content: space-between;
3107
3068
  }
3108
- .exp--tearsheet .exp--tearsheet__header-fields {
3069
+ .c4p--tearsheet .c4p--tearsheet__header-fields {
3109
3070
  flex: 1 1 100%;
3110
3071
  }
3111
- .exp--tearsheet .exp--tearsheet__header-actions {
3072
+ .c4p--tearsheet .c4p--tearsheet__header-actions {
3112
3073
  flex: 0 0 auto;
3113
3074
  padding-left: var(--cds-spacing-06, 1.5rem);
3114
3075
  }
3115
- .exp--tearsheet .exp--tearsheet__header-actions .bx--btn-set .bx--btn:not(:first-of-type) {
3076
+ .c4p--tearsheet .c4p--tearsheet__header-actions .bx--btn-set .bx--btn:not(:first-of-type) {
3116
3077
  margin-left: var(--cds-spacing-03, 0.5rem);
3117
3078
  }
3118
- .exp--tearsheet .exp--tearsheet__header--no-close-icon {
3079
+ .c4p--tearsheet .c4p--tearsheet__header--no-close-icon {
3119
3080
  display: none;
3120
3081
  }
3121
- .exp--tearsheet.exp--tearsheet--wide .bx--modal-header__heading.exp--tearsheet__heading {
3082
+ .c4p--tearsheet.c4p--tearsheet--wide .bx--modal-header__heading.c4p--tearsheet__heading {
3122
3083
  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
3123
3084
  font-weight: var(--cds-productive-heading-04-font-weight, 400);
3124
3085
  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
3125
3086
  letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
3126
3087
  }
3127
- .exp--tearsheet .exp--tearsheet__header-description {
3088
+ .c4p--tearsheet .c4p--tearsheet__header-description {
3128
3089
  display: -webkit-box;
3129
3090
  overflow: hidden;
3130
3091
  max-width: 100%;
@@ -3137,90 +3098,90 @@
3137
3098
  -webkit-line-clamp: 2;
3138
3099
  }
3139
3100
  @media (min-width: 42rem) {
3140
- .exp--tearsheet .exp--tearsheet__header-description {
3101
+ .c4p--tearsheet .c4p--tearsheet__header-description {
3141
3102
  max-width: 60%;
3142
3103
  }
3143
3104
  }
3144
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__header-description {
3105
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header-description {
3145
3106
  margin-top: var(--cds-spacing-03, 0.5rem);
3146
3107
  }
3147
- .exp--tearsheet .exp--tearsheet__header-navigation {
3108
+ .c4p--tearsheet .c4p--tearsheet__header-navigation {
3148
3109
  margin: var(--cds-spacing-04, 0.75rem) 0 0;
3149
3110
  }
3150
- .exp--tearsheet.exp--tearsheet .exp--tearsheet__body {
3111
+ .c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__body {
3151
3112
  display: flex;
3152
3113
  flex-direction: row;
3153
3114
  padding: 0;
3154
3115
  margin: 0;
3155
3116
  }
3156
- .exp--tearsheet .exp--tearsheet__resize-detector {
3117
+ .c4p--tearsheet .c4p--tearsheet__resize-detector {
3157
3118
  width: 100%;
3158
3119
  height: 0;
3159
3120
  }
3160
- .exp--tearsheet .exp--tearsheet__influencer {
3121
+ .c4p--tearsheet .c4p--tearsheet__influencer {
3161
3122
  flex: 0 0 257px;
3162
3123
  border-right: 1px solid var(--cds-ui-03, #e0e0e0);
3163
3124
  overflow-y: auto;
3164
3125
  }
3165
- .exp--tearsheet .exp--tearsheet__influencer--wide {
3126
+ .c4p--tearsheet .c4p--tearsheet__influencer--wide {
3166
3127
  flex-basis: 321px;
3167
3128
  }
3168
- .exp--tearsheet .exp--tearsheet__right {
3129
+ .c4p--tearsheet .c4p--tearsheet__right {
3169
3130
  display: grid;
3170
3131
  flex-grow: 1;
3171
3132
  grid-template-columns: 100%;
3172
3133
  grid-template-rows: 1fr auto;
3173
3134
  }
3174
- .exp--tearsheet .exp--tearsheet__main {
3135
+ .c4p--tearsheet .c4p--tearsheet__main {
3175
3136
  display: flex;
3176
3137
  flex-direction: row;
3177
3138
  grid-column: 1/-1;
3178
3139
  grid-row: 1/-1;
3179
3140
  }
3180
- .exp--tearsheet .exp--tearsheet__main .exp--tearsheet__influencer {
3141
+ .c4p--tearsheet .c4p--tearsheet__main .c4p--tearsheet__influencer {
3181
3142
  border-right: none;
3182
3143
  border-left: 1px solid var(--cds-ui-03, #e0e0e0);
3183
3144
  }
3184
- .exp--tearsheet .exp--tearsheet__content {
3145
+ .c4p--tearsheet .c4p--tearsheet__content {
3185
3146
  overflow: auto;
3186
3147
  flex-grow: 1;
3187
3148
  }
3188
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content {
3149
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content {
3189
3150
  background: var(--cds-ui-background, #ffffff);
3190
3151
  }
3191
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--pagination,
3192
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--pagination__control-buttons,
3193
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--text-input,
3194
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--text-area,
3195
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--search-input,
3196
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--select-input,
3197
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--dropdown,
3198
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--dropdown-list,
3199
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--number input[type=number],
3200
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--date-picker__input {
3152
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--pagination,
3153
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--pagination__control-buttons,
3154
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--text-input,
3155
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--text-area,
3156
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--search-input,
3157
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--select-input,
3158
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--dropdown,
3159
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--dropdown-list,
3160
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--number input[type=number],
3161
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--date-picker__input {
3201
3162
  background-color: var(--cds-field-01, #f4f4f4);
3202
3163
  }
3203
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--text-input--light,
3204
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--text-area--light,
3205
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--search--light .bx--search-input,
3206
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--select--light .bx--select-input,
3207
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--dropdown--light,
3208
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--dropdown--light .bx--dropdown-list,
3209
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--number--light input[type=number],
3210
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__content .bx--date-picker--light .bx--date-picker__input {
3164
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--text-input--light,
3165
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--text-area--light,
3166
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--search--light .bx--search-input,
3167
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--select--light .bx--select-input,
3168
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--dropdown--light,
3169
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--dropdown--light .bx--dropdown-list,
3170
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--number--light input[type=number],
3171
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .bx--date-picker--light .bx--date-picker__input {
3211
3172
  background-color: var(--cds-field-02, #ffffff);
3212
3173
  }
3213
- .exp--tearsheet .exp--tearsheet__button-container {
3174
+ .c4p--tearsheet .c4p--tearsheet__button-container {
3214
3175
  grid-column: 1/-1;
3215
3176
  grid-row: -1/-1;
3216
3177
  overflow-x: auto;
3217
3178
  }
3218
- .exp--tearsheet .exp--tearsheet__buttons {
3179
+ .c4p--tearsheet .c4p--tearsheet__buttons {
3219
3180
  display: inline-flex;
3220
3181
  min-width: 100%;
3221
3182
  border-top: 1px solid var(--cds-ui-03, #e0e0e0);
3222
3183
  }
3223
- .exp--tearsheet.exp--tearsheet--wide .exp--tearsheet__buttons {
3184
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__buttons {
3224
3185
  background: var(--cds-ui-background, #ffffff);
3225
3186
  }
3226
3187
 
@@ -3328,20 +3289,20 @@
3328
3289
  transform: translateY(0);
3329
3290
  }
3330
3291
  }
3331
- .exp--tearsheet-create {
3332
- --exp--tearsheet-create--total-width: 0;
3292
+ .c4p--tearsheet-create {
3293
+ --c4p--tearsheet-create--total-width: 0;
3333
3294
  }
3334
3295
 
3335
- .exp--tearsheet-create .exp--tearsheet-create__step--hidden-step,
3336
- .exp--tearsheet-create .exp--tearsheet-create__step--hidden-section {
3296
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--hidden-step,
3297
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--hidden-section {
3337
3298
  display: none;
3338
3299
  }
3339
3300
 
3340
- .exp--tearsheet-create .exp--tearsheet-create__step--visible-section {
3301
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--visible-section {
3341
3302
  display: block;
3342
3303
  }
3343
3304
 
3344
- .exp--tearsheet-create .exp--tearsheet-create__step--visible-step {
3305
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--visible-step {
3345
3306
  animation: 400ms stepContentEntrance;
3346
3307
  animation-fill-mode: forwards;
3347
3308
  animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
@@ -3349,51 +3310,51 @@
3349
3310
  }
3350
3311
 
3351
3312
  @media (prefers-reduced-motion) {
3352
- .exp--tearsheet-create .exp--tearsheet-create__step--visible-step {
3313
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--visible-step {
3353
3314
  animation: none;
3354
3315
  opacity: 1;
3355
3316
  }
3356
3317
  }
3357
- .exp--tearsheet-create .exp--tearsheet-create__content {
3318
+ .c4p--tearsheet-create .c4p--tearsheet-create__content {
3358
3319
  height: 100%;
3359
3320
  padding: var(--cds-spacing-06, 1.5rem);
3360
3321
  overflow-x: hidden;
3361
3322
  }
3362
3323
 
3363
- .exp--tearsheet-create .exp--tearsheet-create__content .bx--grid {
3324
+ .c4p--tearsheet-create .c4p--tearsheet-create__content .bx--grid {
3364
3325
  padding: 0;
3365
3326
  margin: 0;
3366
3327
  }
3367
3328
 
3368
- .exp--tearsheet-create .exp--tearsheet-create__step--heading {
3329
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--heading {
3369
3330
  padding-bottom: var(--cds-spacing-06, 1.5rem);
3370
3331
  }
3371
3332
 
3372
- .exp--tearsheet-create .bx--btn-set .bx--btn.bx--btn--disabled {
3333
+ .c4p--tearsheet-create .bx--btn-set .bx--btn.bx--btn--disabled {
3373
3334
  box-shadow: -0.0625rem 0 0 0 var(--cds-button-separator, #e0e0e0);
3374
3335
  }
3375
3336
 
3376
- .exp--tearsheet-create .bx--side-nav--ux {
3337
+ .c4p--tearsheet-create .bx--side-nav--ux {
3377
3338
  position: initial;
3378
3339
  background-color: transparent;
3379
3340
  }
3380
3341
 
3381
- .exp--tearsheet-create .exp--tearsheet-create__section--divider {
3342
+ .c4p--tearsheet-create .c4p--tearsheet-create__section--divider {
3382
3343
  position: relative;
3383
3344
  display: block;
3384
- width: var(--exp--tearsheet-create--total-width);
3345
+ width: var(--c4p--tearsheet-create--total-width);
3385
3346
  height: 1px;
3386
3347
  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));
3387
3348
  background-color: var(--cds-ui-03, #e0e0e0);
3388
3349
  }
3389
3350
 
3390
- .exp--tearsheet-create .exp--tearsheet-create__step--title,
3391
- .exp--tearsheet-create .exp--tearsheet-create__section--title {
3351
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--title,
3352
+ .c4p--tearsheet-create .c4p--tearsheet-create__section--title {
3392
3353
  margin-bottom: var(--cds-spacing-05, 1rem);
3393
3354
  }
3394
3355
 
3395
- .exp--tearsheet-create .exp--tearsheet-create__section--subtitle,
3396
- .exp--tearsheet-create .exp--tearsheet-create__step--subtitle {
3356
+ .c4p--tearsheet-create .c4p--tearsheet-create__section--subtitle,
3357
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--subtitle {
3397
3358
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
3398
3359
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
3399
3360
  line-height: var(--cds-productive-heading-01-line-height, 1.28572);
@@ -3401,8 +3362,8 @@
3401
3362
  margin-bottom: var(--cds-spacing-03, 0.5rem);
3402
3363
  }
3403
3364
 
3404
- .exp--tearsheet-create .exp--tearsheet-create__section--description,
3405
- .exp--tearsheet-create .exp--tearsheet-create__step--description {
3365
+ .c4p--tearsheet-create .c4p--tearsheet-create__section--description,
3366
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--description {
3406
3367
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
3407
3368
  font-weight: var(--cds-body-long-01-font-weight, 400);
3408
3369
  line-height: var(--cds-body-long-01-line-height, 1.42857);
@@ -3410,11 +3371,11 @@
3410
3371
  margin-bottom: var(--cds-spacing-06, 1.5rem);
3411
3372
  }
3412
3373
 
3413
- .exp--tearsheet-create .bx--fieldset {
3374
+ .c4p--tearsheet-create .bx--fieldset {
3414
3375
  margin-bottom: 0;
3415
3376
  }
3416
3377
 
3417
- .exp--tearsheet-create .exp--tearsheet-create__step--fieldset > * {
3378
+ .c4p--tearsheet-create .c4p--tearsheet-create__step--fieldset > * {
3418
3379
  margin-bottom: var(--cds-spacing-05, 1rem);
3419
3380
  }
3420
3381
 
@@ -3593,37 +3554,37 @@
3593
3554
  stroke-dashoffset: 0;
3594
3555
  }
3595
3556
  }
3596
- .exp--create-tearsheet-narrow .bx--modal-header__heading,
3597
- .exp--create-tearsheet-narrow .bx--modal-header__label,
3598
- .exp--create-tearsheet-narrow .exp--tearsheet__header-description {
3557
+ .c4p--create-tearsheet-narrow .bx--modal-header__heading,
3558
+ .c4p--create-tearsheet-narrow .bx--modal-header__label,
3559
+ .c4p--create-tearsheet-narrow .c4p--tearsheet__header-description {
3599
3560
  max-width: 100%;
3600
3561
  padding-right: calc(20% - var(--cds-spacing-05, 1rem));
3601
3562
  }
3602
3563
 
3603
- .exp--create-tearsheet-narrow .exp--tearsheet__header-description {
3564
+ .c4p--create-tearsheet-narrow .c4p--tearsheet__header-description {
3604
3565
  margin-top: var(--cds-spacing-02, 0.25rem);
3605
3566
  }
3606
3567
 
3607
- .exp--create-tearsheet-narrow .exp--tearsheet__header {
3568
+ .c4p--create-tearsheet-narrow .c4p--tearsheet__header {
3608
3569
  border-bottom: 1px solid var(--cds-decorative-01, #e0e0e0);
3609
3570
  }
3610
3571
 
3611
- .exp--create-tearsheet-narrow .exp--tearsheet__content {
3572
+ .c4p--create-tearsheet-narrow .c4p--tearsheet__content {
3612
3573
  padding: var(--cds-spacing-05, 1rem);
3613
3574
  }
3614
3575
 
3615
- .exp--create-tearsheet-narrow .exp--create-tearsheet-narrow__form {
3576
+ .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form {
3616
3577
  padding-top: var(--cds-spacing-05, 1rem);
3617
3578
  }
3618
3579
 
3619
- .exp--create-tearsheet-narrow .exp--create-tearsheet-narrow__form > * {
3580
+ .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form > * {
3620
3581
  margin-bottom: var(--cds-spacing-05, 1rem);
3621
3582
  }
3622
- .exp--create-tearsheet-narrow .exp--create-tearsheet-narrow__form > *:last-child {
3583
+ .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form > *:last-child {
3623
3584
  margin-bottom: 0;
3624
3585
  }
3625
3586
 
3626
- .exp--create-tearsheet-narrow .exp--create-tearsheet-narrow__form-title-text {
3587
+ .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form-title-text {
3627
3588
  font-size: var(--cds-productive-heading-02-font-size, 1rem);
3628
3589
  font-weight: var(--cds-productive-heading-02-font-weight, 600);
3629
3590
  line-height: var(--cds-productive-heading-02-line-height, 1.375);
@@ -3631,7 +3592,7 @@
3631
3592
  padding-bottom: var(--cds-spacing-03, 0.5rem);
3632
3593
  }
3633
3594
 
3634
- .exp--create-tearsheet-narrow .exp--create-tearsheet-narrow__form-description-text {
3595
+ .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form-description-text {
3635
3596
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
3636
3597
  font-weight: var(--cds-body-long-01-font-weight, 400);
3637
3598
  line-height: var(--cds-body-long-01-line-height, 1.42857);
@@ -3707,46 +3668,46 @@
3707
3668
  /* stylelint-disable-line no-invalid-position-at-import-rule */
3708
3669
  /* stylelint-disable-line no-invalid-position-at-import-rule */
3709
3670
  /* stylelint-disable-line no-invalid-position-at-import-rule */
3710
- .exp--empty-state {
3671
+ .c4p--empty-state {
3711
3672
  color: var(--cds-text-01, #161616);
3712
3673
  }
3713
- .exp--empty-state .exp--empty-state__header,
3714
- .exp--empty-state .exp--empty-state__subtitle {
3674
+ .c4p--empty-state .c4p--empty-state__header,
3675
+ .c4p--empty-state .c4p--empty-state__subtitle {
3715
3676
  padding-bottom: var(--cds-spacing-02, 0.25rem);
3716
3677
  margin: 0;
3717
3678
  }
3718
- .exp--empty-state .exp--empty-state__header--small {
3679
+ .c4p--empty-state .c4p--empty-state__header--small {
3719
3680
  font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
3720
3681
  font-weight: var(--cds-productive-heading-03-font-weight, 400);
3721
3682
  line-height: var(--cds-productive-heading-03-line-height, 1.4);
3722
3683
  letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
3723
3684
  }
3724
- .exp--empty-state .exp--empty-state__subtitle--small {
3685
+ .c4p--empty-state .c4p--empty-state__subtitle--small {
3725
3686
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
3726
3687
  font-weight: var(--cds-body-short-01-font-weight, 400);
3727
3688
  line-height: var(--cds-body-short-01-line-height, 1.28572);
3728
3689
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
3729
3690
  }
3730
3691
 
3731
- .exp--empty-state__illustration.exp--empty-state__illustration--lg {
3692
+ .c4p--empty-state__illustration.c4p--empty-state__illustration--lg {
3732
3693
  min-width: var(--cds-spacing-11, 5rem);
3733
3694
  max-width: var(--cds-spacing-11, 5rem);
3734
3695
  }
3735
- .exp--empty-state__illustration.exp--empty-state__illustration--sm {
3696
+ .c4p--empty-state__illustration.c4p--empty-state__illustration--sm {
3736
3697
  min-width: var(--cds-spacing-10, 4rem);
3737
3698
  max-width: var(--cds-spacing-10, 4rem);
3738
3699
  }
3739
3700
 
3740
- .exp--empty-state__action-button,
3741
- .exp--empty-state__link {
3701
+ .c4p--empty-state__action-button,
3702
+ .c4p--empty-state__link {
3742
3703
  margin-top: var(--cds-spacing-06, 1.5rem);
3743
3704
  }
3744
3705
 
3745
- .exp--empty-state .exp--empty-state__action-button {
3706
+ .c4p--empty-state .c4p--empty-state__action-button {
3746
3707
  display: block;
3747
3708
  }
3748
3709
 
3749
- .exp--empty-state .exp--empty-state__link {
3710
+ .c4p--empty-state .c4p--empty-state__link {
3750
3711
  display: block;
3751
3712
  }
3752
3713
 
@@ -3798,19 +3759,19 @@
3798
3759
  /* stylelint-disable-line no-invalid-position-at-import-rule */
3799
3760
  /* stylelint-disable-line no-invalid-position-at-import-rule */
3800
3761
  /* stylelint-disable-line no-invalid-position-at-import-rule */
3801
- .exp--example-component {
3762
+ .c4p--example-component {
3802
3763
  display: flex;
3803
3764
  justify-content: flex-end;
3804
- --exp--example-component--border-color: transparent;
3765
+ --c4p--example-component--border-color: transparent;
3805
3766
  }
3806
3767
 
3807
- .exp--example-component.exp--example-component--boxed-set {
3808
- border: 10px solid var(--exp--example-component--border-color);
3768
+ .c4p--example-component.c4p--example-component--boxed-set {
3769
+ border: 10px solid var(--c4p--example-component--border-color);
3809
3770
  }
3810
3771
 
3811
- .exp--example-component.exp--example-component--shadow-set {
3772
+ .c4p--example-component.c4p--example-component--shadow-set {
3812
3773
  margin: var(--cds-spacing-04, 0.75rem);
3813
- box-shadow: 0 0 10px var(--exp--example-component--border-color);
3774
+ box-shadow: 0 0 10px var(--c4p--example-component--border-color);
3814
3775
  }
3815
3776
 
3816
3777
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -4046,37 +4007,37 @@
4046
4007
  stroke-dashoffset: 276.4608;
4047
4008
  }
4048
4009
  }
4049
- .exp--export-modal .bx--modal-footer .bx--btn {
4010
+ .c4p--export-modal .bx--modal-footer .bx--btn {
4050
4011
  max-width: none;
4051
4012
  }
4052
4013
 
4053
- .exp--export-modal.bx--modal .bx--modal-content {
4014
+ .c4p--export-modal.bx--modal .bx--modal-content {
4054
4015
  padding-right: var(--cds-spacing-05, 1rem);
4055
4016
  }
4056
4017
 
4057
- .exp--export-modal .bx--modal-close {
4018
+ .c4p--export-modal .bx--modal-close {
4058
4019
  display: none;
4059
4020
  }
4060
4021
 
4061
- .exp--export-modal__body {
4022
+ .c4p--export-modal__body {
4062
4023
  padding-right: calc(20% - var(--cds-spacing-05, 1rem));
4063
4024
  margin-bottom: var(--cds-spacing-05, 1rem);
4064
4025
  }
4065
4026
 
4066
- .exp--export-modal__messaging {
4027
+ .c4p--export-modal__messaging {
4067
4028
  display: flex;
4068
4029
  align-items: center;
4069
4030
  }
4070
4031
 
4071
- .exp--export-modal__messaging p {
4032
+ .c4p--export-modal__messaging p {
4072
4033
  margin-left: var(--cds-spacing-03, 0.5rem);
4073
4034
  }
4074
4035
 
4075
- .exp--export-modal__checkmark-icon {
4036
+ .c4p--export-modal__checkmark-icon {
4076
4037
  fill: var(--cds-interactive-01, #0f62fe);
4077
4038
  }
4078
4039
 
4079
- .exp--export-modal__error-icon {
4040
+ .c4p--export-modal__error-icon {
4080
4041
  fill: var(--cds-danger, #da1e28);
4081
4042
  }
4082
4043
 
@@ -4154,61 +4115,61 @@
4154
4115
  /* stylelint-disable-line no-invalid-position-at-import-rule */
4155
4116
  /* stylelint-disable-line no-invalid-position-at-import-rule */
4156
4117
  /* stylelint-disable-line no-invalid-position-at-import-rule */
4157
- .exp--card {
4118
+ .c4p--card {
4158
4119
  background: var(--cds-ui-01, #f4f4f4);
4159
4120
  color: var(--cds-text-01, #161616);
4160
4121
  }
4161
4122
 
4162
- .exp--card__clickable {
4123
+ .c4p--card__clickable {
4163
4124
  cursor: pointer;
4164
4125
  transition: background 110ms;
4165
4126
  }
4166
4127
 
4167
- .exp--card__clickable:hover {
4128
+ .c4p--card__clickable:hover {
4168
4129
  background: var(--cds-hover-ui, #e5e5e5);
4169
4130
  }
4170
4131
 
4171
- .exp--card__media-left {
4132
+ .c4p--card__media-left {
4172
4133
  display: flex;
4173
4134
  flex-direction: row;
4174
4135
  }
4175
4136
 
4176
- .exp--card__media-left .exp--card__content-container {
4137
+ .c4p--card__media-left .c4p--card__content-container {
4177
4138
  display: flex;
4178
4139
  flex: 1;
4179
4140
  flex-direction: column;
4180
4141
  }
4181
4142
 
4182
- .exp--card__media-left .exp--card__footer {
4143
+ .c4p--card__media-left .c4p--card__footer {
4183
4144
  align-self: flex-end;
4184
4145
  margin-top: auto;
4185
4146
  }
4186
4147
 
4187
- .exp--card__media > * {
4148
+ .c4p--card__media > * {
4188
4149
  display: block;
4189
4150
  max-width: 100%;
4190
4151
  }
4191
4152
 
4192
- .exp--card__header {
4153
+ .c4p--card__header {
4193
4154
  padding: var(--cds-spacing-05, 1rem);
4194
4155
  }
4195
4156
 
4196
- .exp--card__header-label-only {
4157
+ .c4p--card__header-label-only {
4197
4158
  padding-bottom: var(--cds-spacing-03, 0.5rem);
4198
4159
  }
4199
4160
 
4200
- .exp--card__header-label-only .exp--card__label {
4161
+ .c4p--card__header-label-only .c4p--card__label {
4201
4162
  margin-bottom: 0;
4202
4163
  }
4203
4164
 
4204
- .exp--card__header-container {
4165
+ .c4p--card__header-container {
4205
4166
  display: flex;
4206
4167
  flex-direction: row;
4207
4168
  align-items: center;
4208
4169
  justify-content: space-between;
4209
4170
  }
4210
4171
 
4211
- .exp--card__label {
4172
+ .c4p--card__label {
4212
4173
  font-size: var(--cds-label-01-font-size, 0.75rem);
4213
4174
  font-weight: var(--cds-label-01-font-weight, 400);
4214
4175
  line-height: var(--cds-label-01-line-height, 1.33333);
@@ -4216,7 +4177,7 @@
4216
4177
  margin-bottom: var(--cds-spacing-01, 0.125rem);
4217
4178
  }
4218
4179
 
4219
- .exp--card__description {
4180
+ .c4p--card__description {
4220
4181
  font-size: var(--cds-caption-01-font-size, 0.75rem);
4221
4182
  font-weight: var(--cds-caption-01-font-weight, 400);
4222
4183
  line-height: var(--cds-caption-01-line-height, 1.33333);
@@ -4224,7 +4185,7 @@
4224
4185
  margin-top: var(--cds-spacing-01, 0.125rem);
4225
4186
  }
4226
4187
 
4227
- .exp--card__body {
4188
+ .c4p--card__body {
4228
4189
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
4229
4190
  font-weight: var(--cds-body-short-01-font-weight, 400);
4230
4191
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -4233,33 +4194,33 @@
4233
4194
  padding-top: 0;
4234
4195
  }
4235
4196
 
4236
- .exp--card__footer {
4197
+ .c4p--card__footer {
4237
4198
  display: flex;
4238
4199
  justify-content: flex-end;
4239
4200
  }
4240
4201
 
4241
- .exp--card__actions {
4202
+ .c4p--card__actions {
4242
4203
  display: flex;
4243
4204
  flex-direction: row;
4244
4205
  margin: var(--cds-spacing-05, 1rem);
4245
4206
  margin-top: 0;
4246
4207
  }
4247
4208
 
4248
- .exp--card__icon {
4209
+ .c4p--card__icon {
4249
4210
  cursor: pointer;
4250
4211
  }
4251
4212
 
4252
- .exp--card__link {
4213
+ .c4p--card__link {
4253
4214
  color: inherit;
4254
4215
  text-decoration: inherit;
4255
4216
  }
4256
4217
 
4257
- .exp--card__pictogram {
4218
+ .c4p--card__pictogram {
4258
4219
  padding-top: var(--cds-spacing-05, 1rem);
4259
4220
  padding-left: var(--cds-spacing-05, 1rem);
4260
4221
  }
4261
4222
 
4262
- .exp--card__title {
4223
+ .c4p--card__title {
4263
4224
  font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
4264
4225
  font-weight: var(--cds-productive-heading-03-font-weight, 400);
4265
4226
  line-height: var(--cds-productive-heading-03-line-height, 1.4);
@@ -4290,7 +4251,7 @@
4290
4251
  /* stylelint-disable-line no-invalid-position-at-import-rule */
4291
4252
  /* stylelint-disable-line no-invalid-position-at-import-rule */
4292
4253
  /* stylelint-disable-line no-invalid-position-at-import-rule */
4293
- .exp--http-errors .exp--http-errors__content {
4254
+ .c4p--http-errors .c4p--http-errors__content {
4294
4255
  position: fixed;
4295
4256
  z-index: 2;
4296
4257
  top: 50%;
@@ -4298,12 +4259,12 @@
4298
4259
  transform: translate(-50%, -150%);
4299
4260
  }
4300
4261
  @media (min-width: 42rem) {
4301
- .exp--http-errors .exp--http-errors__content {
4262
+ .c4p--http-errors .c4p--http-errors__content {
4302
4263
  transform: translate(-50%, -50%);
4303
4264
  }
4304
4265
  }
4305
4266
 
4306
- .exp--http-errors .exp--http-errors__error-code-label {
4267
+ .c4p--http-errors .c4p--http-errors__error-code-label {
4307
4268
  font-size: var(--cds-productive-heading-02-font-size, 1rem);
4308
4269
  font-weight: var(--cds-productive-heading-02-font-weight, 600);
4309
4270
  line-height: var(--cds-productive-heading-02-line-height, 1.375);
@@ -4311,7 +4272,7 @@
4311
4272
  margin-bottom: var(--cds-spacing-02, 0.25rem);
4312
4273
  }
4313
4274
 
4314
- .exp--http-errors .exp--http-errors__title {
4275
+ .c4p--http-errors .c4p--http-errors__title {
4315
4276
  font-size: var(--cds-productive-heading-05-font-size, 2rem);
4316
4277
  font-weight: var(--cds-productive-heading-05-font-weight, 400);
4317
4278
  line-height: var(--cds-productive-heading-05-line-height, 1.25);
@@ -4319,7 +4280,7 @@
4319
4280
  margin-bottom: var(--cds-spacing-04, 0.75rem);
4320
4281
  }
4321
4282
 
4322
- .exp--http-errors .exp--http-errors__description {
4283
+ .c4p--http-errors .c4p--http-errors__description {
4323
4284
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
4324
4285
  font-weight: var(--cds-body-short-01-font-weight, 400);
4325
4286
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -4327,18 +4288,18 @@
4327
4288
  margin-bottom: var(--cds-spacing-06, 1.5rem);
4328
4289
  }
4329
4290
 
4330
- .exp--http-errors .exp--http-errors__error-code-label,
4331
- .exp--http-errors .exp--http-errors__title,
4332
- .exp--http-errors .exp--http-errors__description {
4291
+ .c4p--http-errors .c4p--http-errors__error-code-label,
4292
+ .c4p--http-errors .c4p--http-errors__title,
4293
+ .c4p--http-errors .c4p--http-errors__description {
4333
4294
  color: var(--cds-text-01, #161616);
4334
4295
  }
4335
4296
 
4336
- .exp--http-errors .exp--http-errors__link {
4297
+ .c4p--http-errors .c4p--http-errors__link {
4337
4298
  display: block;
4338
4299
  margin-bottom: var(--cds-spacing-02, 0.25rem);
4339
4300
  }
4340
4301
 
4341
- .exp--http-errors .exp--http-errors__image {
4302
+ .c4p--http-errors .c4p--http-errors__image {
4342
4303
  position: fixed;
4343
4304
  top: 50%;
4344
4305
  left: 50%;
@@ -4346,7 +4307,7 @@
4346
4307
  transform: translate(-50%, -40%);
4347
4308
  }
4348
4309
  @media (min-width: 42rem) {
4349
- .exp--http-errors .exp--http-errors__image {
4310
+ .c4p--http-errors .c4p--http-errors__image {
4350
4311
  transform: translate(-50%, -50%);
4351
4312
  }
4352
4313
  }
@@ -4614,15 +4575,15 @@
4614
4575
  /* stylelint-disable-line no-invalid-position-at-import-rule */
4615
4576
  /* stylelint-disable-line no-invalid-position-at-import-rule */
4616
4577
  /* stylelint-disable-line no-invalid-position-at-import-rule */
4617
- .exp--import-modal .bx--modal-close {
4578
+ .c4p--import-modal .bx--modal-close {
4618
4579
  display: none;
4619
4580
  }
4620
4581
 
4621
- .exp--import-modal .bx--modal-footer .bx--btn {
4582
+ .c4p--import-modal .bx--modal-footer .bx--btn {
4622
4583
  max-width: none;
4623
4584
  }
4624
4585
 
4625
- .exp--import-modal.bx--modal .bx--modal-content {
4586
+ .c4p--import-modal.bx--modal .bx--modal-content {
4626
4587
  padding-right: var(--cds-spacing-05, 1rem);
4627
4588
  }
4628
4589
 
@@ -4635,20 +4596,20 @@
4635
4596
  padding-right: calc(20% - var(--cds-spacing-05, 1rem));
4636
4597
  }
4637
4598
 
4638
- .exp--import-modal__input-group {
4599
+ .c4p--import-modal__input-group {
4639
4600
  display: flex;
4640
4601
  }
4641
4602
 
4642
- .exp--import-modal__import-button.bx--btn {
4603
+ .c4p--import-modal__import-button.bx--btn {
4643
4604
  margin-left: var(--cds-spacing-03, 0.5rem);
4644
4605
  }
4645
4606
 
4646
- .exp--import-modal__file-container {
4607
+ .c4p--import-modal__file-container {
4647
4608
  width: 100%;
4648
4609
  }
4649
4610
 
4650
- .exp--import-modal .exp--import-modal__file-drop-header,
4651
- .exp--import-modal .exp--import-modal__label {
4611
+ .c4p--import-modal .c4p--import-modal__file-drop-header,
4612
+ .c4p--import-modal .c4p--import-modal__label {
4652
4613
  margin-bottom: var(--cds-spacing-03, 0.5rem);
4653
4614
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
4654
4615
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
@@ -4656,7 +4617,7 @@
4656
4617
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
4657
4618
  }
4658
4619
 
4659
- .exp--import-modal__helper-text {
4620
+ .c4p--import-modal__helper-text {
4660
4621
  margin-top: var(--cds-spacing-06, 1.5rem);
4661
4622
  margin-bottom: var(--cds-spacing-03, 0.5rem);
4662
4623
  font-size: var(--cds-helper-text-01-font-size, 0.75rem);
@@ -4664,21 +4625,21 @@
4664
4625
  letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
4665
4626
  }
4666
4627
 
4667
- .exp--import-modal__body {
4628
+ .c4p--import-modal__body {
4668
4629
  padding-right: calc(20% - var(--cds-spacing-05, 1rem));
4669
4630
  margin-bottom: var(--cds-spacing-06, 1.5rem);
4670
4631
  }
4671
4632
 
4672
- .exp--import-modal .bx--file__selected-file {
4633
+ .c4p--import-modal .bx--file__selected-file {
4673
4634
  max-width: none;
4674
4635
  background: var(--cds-ui-02, #ffffff);
4675
4636
  }
4676
4637
 
4677
- .exp--import-modal .bx--file {
4638
+ .c4p--import-modal .bx--file {
4678
4639
  margin-bottom: var(--cds-spacing-05, 1rem);
4679
4640
  }
4680
4641
 
4681
- .exp--import-modal .bx--text-input:disabled {
4642
+ .c4p--import-modal .bx--text-input:disabled {
4682
4643
  background: var(--cds-ui-02, #ffffff);
4683
4644
  }
4684
4645
 
@@ -4773,7 +4734,7 @@
4773
4734
  opacity: 0;
4774
4735
  }
4775
4736
  }
4776
- .exp--loading-bar .exp--loading-bar__inner {
4737
+ .c4p--loading-bar .c4p--loading-bar__inner {
4777
4738
  position: relative;
4778
4739
  width: 100%;
4779
4740
  height: 8px;
@@ -4785,30 +4746,30 @@
4785
4746
  pointer-events: none;
4786
4747
  }
4787
4748
 
4788
- .exp--loading-bar .exp--loading-bar__inner:hover,
4789
- .exp--loading-bar .exp--loading-bar__inner:focus,
4790
- .exp--loading-bar .exp--loading-bar__inner:active {
4749
+ .c4p--loading-bar .c4p--loading-bar__inner:hover,
4750
+ .c4p--loading-bar .c4p--loading-bar__inner:focus,
4751
+ .c4p--loading-bar .c4p--loading-bar__inner:active {
4791
4752
  border: none;
4792
4753
  cursor: default;
4793
4754
  outline: none;
4794
4755
  }
4795
4756
 
4796
- .exp--loading-bar__preload {
4757
+ .c4p--loading-bar__preload {
4797
4758
  opacity: 0;
4798
4759
  }
4799
4760
 
4800
- .exp--loading-bar__progress {
4761
+ .c4p--loading-bar__progress {
4801
4762
  position: relative;
4802
4763
  height: 8px;
4803
4764
  transition: width 720ms cubic-bezier(0.4, 0.14, 0.3, 1);
4804
4765
  }
4805
4766
 
4806
- .exp--loading-bar__indicator-wrapper {
4767
+ .c4p--loading-bar__indicator-wrapper {
4807
4768
  display: flex;
4808
4769
  justify-content: flex-end;
4809
4770
  }
4810
4771
 
4811
- .exp--loading-bar__indicator {
4772
+ .c4p--loading-bar__indicator {
4812
4773
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
4813
4774
  font-weight: var(--cds-body-short-01-font-weight, 400);
4814
4775
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -4818,23 +4779,23 @@
4818
4779
  color: var(--cds-text-01, #161616);
4819
4780
  }
4820
4781
 
4821
- .exp--loading-bar__small {
4782
+ .c4p--loading-bar__small {
4822
4783
  height: 4px;
4823
4784
  }
4824
4785
 
4825
- .exp--loading-bar__small .exp--loading-bar__progress {
4786
+ .c4p--loading-bar__small .c4p--loading-bar__progress {
4826
4787
  height: 4px;
4827
4788
  }
4828
4789
 
4829
- .exp--loading-bar__linear-stop {
4790
+ .c4p--loading-bar__linear-stop {
4830
4791
  display: none;
4831
4792
  }
4832
4793
 
4833
- .exp--loading-bar__indefinite-stop {
4794
+ .c4p--loading-bar__indefinite-stop {
4834
4795
  animation: 1800ms ease-in-out loading-bar-stop forwards;
4835
4796
  }
4836
4797
 
4837
- .exp--loading-bar__stop-progress:before {
4798
+ .c4p--loading-bar__stop-progress:before {
4838
4799
  position: absolute;
4839
4800
  top: 0;
4840
4801
  left: 0;
@@ -4845,7 +4806,7 @@
4845
4806
  content: "";
4846
4807
  }
4847
4808
 
4848
- .exp--loading-bar__indefinite-progress:before {
4809
+ .c4p--loading-bar__indefinite-progress:before {
4849
4810
  position: absolute;
4850
4811
  top: 0;
4851
4812
  left: 0;
@@ -4856,7 +4817,7 @@
4856
4817
  content: "";
4857
4818
  }
4858
4819
 
4859
- .exp--loading-bar__linear-progress:before {
4820
+ .c4p--loading-bar__linear-progress:before {
4860
4821
  position: absolute;
4861
4822
  top: 0;
4862
4823
  left: 0;
@@ -5121,7 +5082,7 @@
5121
5082
  transform: translateY(-38.5rem);
5122
5083
  }
5123
5084
  }
5124
- .exp--notifications-panel__container {
5085
+ .c4p--notifications-panel__container {
5125
5086
  --cds-interactive-01: #0f62fe;
5126
5087
  --cds-interactive-02: #6f6f6f;
5127
5088
  --cds-interactive-03: #ffffff;
@@ -5558,7 +5519,7 @@
5558
5519
  transition: transform 110ms;
5559
5520
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5560
5521
  }
5561
- .exp--notifications-panel__container .exp--notifications-panel__header-container {
5522
+ .c4p--notifications-panel__container .c4p--notifications-panel__header-container {
5562
5523
  position: sticky;
5563
5524
  z-index: 2;
5564
5525
  top: 0;
@@ -5566,25 +5527,25 @@
5566
5527
  border-bottom: 1px solid var(--cds-ui-02, #ffffff);
5567
5528
  background-color: var(--cds-ui-background, #ffffff);
5568
5529
  }
5569
- .exp--notifications-panel__container .exp--notifications-panel__header-container .exp--notifications-panel__header-flex {
5530
+ .c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__header-flex {
5570
5531
  display: flex;
5571
5532
  align-items: center;
5572
5533
  justify-content: space-between;
5573
5534
  }
5574
- .exp--notifications-panel__container .exp--notifications-panel__header-container .exp--notifications-panel__do-not-disturb-toggle .bx--toggle__switch {
5535
+ .c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__do-not-disturb-toggle .bx--toggle__switch {
5575
5536
  margin-top: var(--cds-spacing-02, 0.25rem);
5576
5537
  }
5577
- .exp--notifications-panel__container .exp--notifications-panel__header-container .exp--notifications-panel__dismiss-button {
5538
+ .c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__dismiss-button {
5578
5539
  color: var(--cds-text-01, #161616);
5579
5540
  }
5580
- .exp--notifications-panel__container .exp--notifications-panel__header-container .exp--notifications-panel__header {
5541
+ .c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__header {
5581
5542
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
5582
5543
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
5583
5544
  line-height: var(--cds-productive-heading-01-line-height, 1.28572);
5584
5545
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
5585
5546
  margin: 0;
5586
5547
  }
5587
- .exp--notifications-panel__container .exp--notifications-panel__time-section-label {
5548
+ .c4p--notifications-panel__container .c4p--notifications-panel__time-section-label {
5588
5549
  font-size: var(--cds-label-01-font-size, 0.75rem);
5589
5550
  font-weight: var(--cds-label-01-font-weight, 400);
5590
5551
  line-height: var(--cds-label-01-line-height, 1.33333);
@@ -5597,20 +5558,20 @@
5597
5558
  background-color: var(--cds-ui-01, #f4f4f4);
5598
5559
  color: var(--cds-text-02, #525252);
5599
5560
  }
5600
- .exp--notifications-panel__container .exp--notifications-panel__notification:hover,
5601
- .exp--notifications-panel__container .exp--notifications-panel__notification:focus {
5561
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification:hover,
5562
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification:focus {
5602
5563
  background-color: var(--cds-ui-03, #e0e0e0);
5603
5564
  }
5604
- .exp--notifications-panel__container .exp--notifications-panel__notification:hover .exp--notifications-panel__dismiss-single-button,
5605
- .exp--notifications-panel__container .exp--notifications-panel__notification:focus .exp--notifications-panel__dismiss-single-button {
5565
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification:hover .c4p--notifications-panel__dismiss-single-button,
5566
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification:focus .c4p--notifications-panel__dismiss-single-button {
5606
5567
  opacity: 1;
5607
5568
  }
5608
- .exp--notifications-panel__container .exp--notifications-panel__notification:focus {
5569
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification:focus {
5609
5570
  border-color: var(--cds-focus, #0f62fe);
5610
5571
  box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe), inset 0 0 0 2px var(--cds-ui-background, #ffffff);
5611
5572
  outline: 0;
5612
5573
  }
5613
- .exp--notifications-panel__container .exp--notifications-panel__notification {
5574
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification {
5614
5575
  position: relative;
5615
5576
  display: flex;
5616
5577
  width: 100%;
@@ -5624,62 +5585,62 @@
5624
5585
  transition: background-color 240ms;
5625
5586
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5626
5587
  }
5627
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-title {
5588
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title {
5628
5589
  margin-bottom: var(--cds-spacing-02, 0.25rem);
5629
5590
  color: var(--cds-text-04, #ffffff);
5630
5591
  font-weight: 400;
5631
5592
  }
5632
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-title.exp--notifications-panel__notification-title-unread {
5593
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title.c4p--notifications-panel__notification-title-unread {
5633
5594
  margin-bottom: var(--cds-spacing-02, 0.25rem);
5634
5595
  color: var(--cds-text-04, #ffffff);
5635
5596
  font-weight: 600;
5636
5597
  }
5637
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notifications-link {
5598
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notifications-link {
5638
5599
  font-size: var(--cds-label-01-font-size, 0.75rem);
5639
5600
  font-weight: var(--cds-label-01-font-weight, 400);
5640
5601
  line-height: var(--cds-label-01-line-height, 1.33333);
5641
5602
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
5642
5603
  }
5643
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-status-icon {
5604
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon {
5644
5605
  min-width: 1rem;
5645
5606
  margin-right: var(--cds-spacing-03, 0.5rem);
5646
5607
  }
5647
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-status-icon.exp--notifications-panel__notification-status-icon-error {
5608
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-error {
5648
5609
  fill: var(--cds-support-01, #da1e28);
5649
5610
  }
5650
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-status-icon.exp--notifications-panel__notification-status-icon-success {
5611
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-success {
5651
5612
  fill: var(--cds-support-02, #198038);
5652
5613
  }
5653
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-status-icon.exp--notifications-panel__notification-status-icon-warning {
5614
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-warning {
5654
5615
  fill: var(--cds-support-03, #f1c21b);
5655
5616
  }
5656
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-status-icon.exp--notifications-panel__notification-status-icon-informational {
5617
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-informational {
5657
5618
  fill: var(--cds-support-04, #0043ce);
5658
5619
  }
5659
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-time-label {
5620
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-time-label {
5660
5621
  margin-bottom: var(--cds-spacing-03, 0.5rem);
5661
5622
  }
5662
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-time-label,
5663
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-description {
5623
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-time-label,
5624
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-description {
5664
5625
  font-size: var(--cds-label-01-font-size, 0.75rem);
5665
5626
  font-weight: var(--cds-label-01-font-weight, 400);
5666
5627
  line-height: var(--cds-label-01-line-height, 1.33333);
5667
5628
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
5668
5629
  color: var(--cds-text-02, #525252);
5669
5630
  }
5670
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-description.exp--notifications-panel__notification-short-description {
5631
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-description.c4p--notifications-panel__notification-short-description {
5671
5632
  display: -webkit-box;
5672
5633
  overflow: hidden;
5673
5634
  -webkit-box-orient: vertical;
5674
5635
  -webkit-line-clamp: 2;
5675
5636
  }
5676
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-description.exp--notifications-panel__notification-long-description {
5637
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-description.c4p--notifications-panel__notification-long-description {
5677
5638
  display: block;
5678
5639
  overflow: initial;
5679
5640
  -webkit-line-clamp: initial;
5680
5641
  }
5681
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-read-more-button,
5682
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-read-less-button {
5642
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button,
5643
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button {
5683
5644
  font-size: var(--cds-label-01-font-size, 0.75rem);
5684
5645
  font-weight: var(--cds-label-01-font-weight, 400);
5685
5646
  line-height: var(--cds-label-01-line-height, 1.33333);
@@ -5687,19 +5648,19 @@
5687
5648
  min-width: 5.5rem;
5688
5649
  padding: 0;
5689
5650
  }
5690
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-read-more-button .bx--btn__icon,
5691
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__notification-content .exp--notifications-panel__notification-read-less-button .bx--btn__icon {
5651
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button .bx--btn__icon,
5652
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button .bx--btn__icon {
5692
5653
  transition: transform 240ms ease;
5693
5654
  }
5694
- .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,
5695
- .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 {
5655
+ .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,
5656
+ .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 {
5696
5657
  transform: rotate(0deg);
5697
5658
  }
5698
- .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,
5699
- .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 {
5659
+ .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,
5660
+ .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 {
5700
5661
  transform: rotate(180deg);
5701
5662
  }
5702
- .exp--notifications-panel__container .exp--notifications-panel__notification .exp--notifications-panel__dismiss-single-button {
5663
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button {
5703
5664
  position: absolute;
5704
5665
  top: 0;
5705
5666
  right: 0;
@@ -5708,12 +5669,12 @@
5708
5669
  color: var(--cds-text-01, #161616);
5709
5670
  opacity: 0;
5710
5671
  }
5711
- .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 {
5672
+ .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 {
5712
5673
  opacity: 1;
5713
5674
  }
5714
- .exp--notifications-panel__container .exp--notifications-panel__notification-today:not(:first-of-type):before,
5715
- .exp--notifications-panel__container .exp--notifications-panel__notification-yesterday:not(:first-of-type):before,
5716
- .exp--notifications-panel__container .exp--notifications-panel__notification-previous:not(:first-of-type):before {
5675
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification-today:not(:first-of-type):before,
5676
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before,
5677
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification-previous:not(:first-of-type):before {
5717
5678
  position: absolute;
5718
5679
  top: 0;
5719
5680
  width: calc(100% - (2 * var(--cds-spacing-05, 1rem)));
@@ -5724,12 +5685,12 @@
5724
5685
  transition: background-color 240ms;
5725
5686
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5726
5687
  }
5727
- .exp--notifications-panel__container .exp--notifications-panel__notification-today:hover + .exp--notifications-panel__notification-today:not(:first-of-type):before,
5728
- .exp--notifications-panel__container .exp--notifications-panel__notification-yesterday:hover + .exp--notifications-panel__notification-yesterday:not(:first-of-type):before,
5729
- .exp--notifications-panel__container .exp--notifications-panel__notification-previous:hover + .exp--notifications-panel__notification-previous:not(:first-of-type):before {
5688
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification-today:hover + .c4p--notifications-panel__notification-today:not(:first-of-type):before,
5689
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:hover + .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before,
5690
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification-previous:hover + .c4p--notifications-panel__notification-previous:not(:first-of-type):before {
5730
5691
  background-color: transparent;
5731
5692
  }
5732
- .exp--notifications-panel__container .exp--notifications-panel__main-section-empty.exp--notifications-panel__main-section {
5693
+ .c4p--notifications-panel__container .c4p--notifications-panel__main-section-empty.c4p--notifications-panel__main-section {
5733
5694
  display: flex;
5734
5695
  height: 100%;
5735
5696
  min-height: initial;
@@ -5737,16 +5698,16 @@
5737
5698
  justify-content: center;
5738
5699
  margin-top: var(--cds-layout-07, 10rem);
5739
5700
  }
5740
- .exp--notifications-panel__container .exp--notifications-panel__main-section-empty.exp--notifications-panel__main-section .exp-subtext {
5701
+ .c4p--notifications-panel__container .c4p--notifications-panel__main-section-empty.c4p--notifications-panel__main-section .c4p-subtext {
5741
5702
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
5742
5703
  font-weight: var(--cds-body-short-01-font-weight, 400);
5743
5704
  line-height: var(--cds-body-short-01-line-height, 1.28572);
5744
5705
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
5745
5706
  }
5746
- .exp--notifications-panel__container .exp--notifications-panel__main-section {
5707
+ .c4p--notifications-panel__container .c4p--notifications-panel__main-section {
5747
5708
  min-height: 498px;
5748
5709
  }
5749
- .exp--notifications-panel__container .exp--notifications-panel__bottom-actions {
5710
+ .c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions {
5750
5711
  position: sticky;
5751
5712
  z-index: 2;
5752
5713
  bottom: 0;
@@ -5757,7 +5718,7 @@
5757
5718
  border-top: 1px solid var(--cds-ui-02, #ffffff);
5758
5719
  background-color: var(--cds-ui-background, #ffffff);
5759
5720
  }
5760
- .exp--notifications-panel__container .exp--notifications-panel__bottom-actions .exp--notifications-panel__view-all-button {
5721
+ .c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions .c4p--notifications-panel__view-all-button {
5761
5722
  width: 100%;
5762
5723
  max-width: calc(100% - 2.5rem);
5763
5724
  height: 2.5rem;
@@ -5765,7 +5726,7 @@
5765
5726
  border-right: 1px solid var(--cds-ui-02, #ffffff);
5766
5727
  color: var(--cds-text-01, #161616);
5767
5728
  }
5768
- .exp--notifications-panel__container .exp--notifications-panel__bottom-actions .exp--notifications-panel__settings-button {
5729
+ .c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions .c4p--notifications-panel__settings-button {
5769
5730
  display: flex;
5770
5731
  min-width: 2.5rem;
5771
5732
  height: 2.5rem;
@@ -5775,7 +5736,7 @@
5775
5736
  padding: 0;
5776
5737
  color: var(--cds-text-01, #161616);
5777
5738
  }
5778
- .exp--notifications-panel__container .exp--notifications-panel__bottom-actions .exp--notifications-panel__settings-button .bx--btn__icon {
5739
+ .c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions .c4p--notifications-panel__settings-button .bx--btn__icon {
5779
5740
  margin: 0;
5780
5741
  }
5781
5742
 
@@ -5969,21 +5930,21 @@
5969
5930
  /* stylelint-disable-line no-invalid-position-at-import-rule */
5970
5931
  /* stylelint-disable-line no-invalid-position-at-import-rule */
5971
5932
  /* stylelint-disable-line no-invalid-position-at-import-rule */
5972
- .exp--action-bar.exp--action-bar {
5933
+ .c4p--action-bar.c4p--action-bar {
5973
5934
  display: block;
5974
5935
  }
5975
- .exp--action-bar .exp--action-bar__displayed-items {
5936
+ .c4p--action-bar .c4p--action-bar__displayed-items {
5976
5937
  display: inline-flex;
5977
5938
  width: 100%;
5978
5939
  white-space: nowrap;
5979
5940
  }
5980
- .exp--action-bar .exp--action-bar__displayed-items--right {
5941
+ .c4p--action-bar .c4p--action-bar__displayed-items--right {
5981
5942
  justify-content: flex-end;
5982
5943
  }
5983
- .exp--action-bar .exp--action-bar-overflow-items {
5944
+ .c4p--action-bar .c4p--action-bar-overflow-items {
5984
5945
  display: inline-block;
5985
5946
  }
5986
- .exp--action-bar .exp--action-bar__hidden-sizing-items {
5947
+ .c4p--action-bar .c4p--action-bar__hidden-sizing-items {
5987
5948
  position: absolute;
5988
5949
  top: -100vh;
5989
5950
  left: -100vw;
@@ -5993,15 +5954,15 @@
5993
5954
  visibility: hidden;
5994
5955
  }
5995
5956
 
5996
- .exp--action-bar-overflow-items__options .exp--action-bar-overflow-items__item {
5957
+ .c4p--action-bar-overflow-items__options .c4p--action-bar-overflow-items__item {
5997
5958
  padding: 0 var(--cds-spacing-03, 0.5rem);
5998
5959
  }
5999
- .exp--action-bar-overflow-items__options .exp--action-bar-overflow-items__item-content {
5960
+ .c4p--action-bar-overflow-items__options .c4p--action-bar-overflow-items__item-content {
6000
5961
  display: flex;
6001
5962
  width: 100%;
6002
5963
  justify-content: space-between;
6003
5964
  }
6004
- .exp--action-bar-overflow-items__options .exp--action-bar-overflow-items__item svg {
5965
+ .c4p--action-bar-overflow-items__options .c4p--action-bar-overflow-items__item svg {
6005
5966
  margin: 0 var(--cds-spacing-02, 0.25rem);
6006
5967
  }
6007
5968
 
@@ -6064,30 +6025,30 @@
6064
6025
  /* stylelint-disable-line no-invalid-position-at-import-rule */
6065
6026
  /* stylelint-disable-line no-invalid-position-at-import-rule */
6066
6027
  /* stylelint-disable-line no-invalid-position-at-import-rule */
6067
- .exp--breadcrumb-with-overflow.exp--breadcrumb-with-overflow {
6028
+ .c4p--breadcrumb-with-overflow.c4p--breadcrumb-with-overflow {
6068
6029
  display: block;
6069
6030
  }
6070
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__space {
6031
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__space {
6071
6032
  position: relative;
6072
6033
  display: block;
6073
6034
  width: 100%;
6074
6035
  white-space: nowrap;
6075
6036
  }
6076
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__breadcrumb-container.exp--breadcrumb-with-overflow__breadcrumb-container-with-items {
6037
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-container.c4p--breadcrumb-with-overflow__breadcrumb-container-with-items {
6077
6038
  display: none;
6078
6039
  width: 100%;
6079
6040
  }
6080
6041
  @media (min-width: 42rem) {
6081
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__breadcrumb-container.exp--breadcrumb-with-overflow__breadcrumb-container-with-items {
6042
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-container.c4p--breadcrumb-with-overflow__breadcrumb-container-with-items {
6082
6043
  display: inline-flex;
6083
6044
  }
6084
6045
  }
6085
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__breadcrumb-container .bx--breadcrumb {
6046
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-container .bx--breadcrumb {
6086
6047
  width: 100%;
6087
6048
  flex-wrap: nowrap;
6088
6049
  align-items: flex-start;
6089
6050
  }
6090
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__breadcrumb-container--hidden {
6051
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-container--hidden {
6091
6052
  position: absolute;
6092
6053
  top: -100vh;
6093
6054
  left: -100vw;
@@ -6096,28 +6057,28 @@
6096
6057
  pointer-events: none;
6097
6058
  visibility: hidden;
6098
6059
  }
6099
- .exp--breadcrumb-with-overflow .bx--breadcrumb-item:last-child {
6060
+ .c4p--breadcrumb-with-overflow .bx--breadcrumb-item:last-child {
6100
6061
  display: inline;
6101
6062
  }
6102
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__displayed-breadcrumb:last-child {
6063
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__displayed-breadcrumb:last-child {
6103
6064
  display: inline;
6104
6065
  overflow: hidden;
6105
6066
  }
6106
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__displayed-breadcrumb:last-child .bx--link {
6067
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__displayed-breadcrumb:last-child .bx--link {
6107
6068
  display: inline-block;
6108
6069
  overflow: hidden;
6109
6070
  width: 100%;
6110
6071
  text-overflow: ellipsis;
6111
6072
  }
6112
- .exp--breadcrumb-with-overflow .bx--link {
6073
+ .c4p--breadcrumb-with-overflow .bx--link {
6113
6074
  max-height: 18px;
6114
6075
  }
6115
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__breadcrumb-back-button.bx--btn.bx--btn--icon-only.bx--tooltip__trigger {
6076
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back-button.bx--btn.bx--btn--icon-only.bx--tooltip__trigger {
6116
6077
  display: inline-flex;
6117
6078
  margin-top: calc(-1 * var(--cds-spacing-04, 0.75rem));
6118
6079
  }
6119
6080
  @media (min-width: 42rem) {
6120
- .exp--breadcrumb-with-overflow .exp--breadcrumb-with-overflow__breadcrumb-back-button.bx--btn.bx--btn--icon-only.bx--tooltip__trigger {
6081
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back-button.bx--btn.bx--btn--icon-only.bx--tooltip__trigger {
6121
6082
  display: none;
6122
6083
  }
6123
6084
  }
@@ -6267,27 +6228,27 @@
6267
6228
  /* stylelint-disable-line no-invalid-position-at-import-rule */
6268
6229
  /* stylelint-disable-line no-invalid-position-at-import-rule */
6269
6230
  /* stylelint-disable-line no-invalid-position-at-import-rule */
6270
- .exp--tag-set.exp--tag-set {
6231
+ .c4p--tag-set.c4p--tag-set {
6271
6232
  display: block;
6272
6233
  width: 100%;
6273
6234
  }
6274
- .exp--tag-set .exp--tag-set__space {
6235
+ .c4p--tag-set .c4p--tag-set__space {
6275
6236
  position: relative;
6276
6237
  display: block;
6277
6238
  width: 100%;
6278
6239
  white-space: nowrap;
6279
6240
  }
6280
- .exp--tag-set .exp--tag-set__space--align-end {
6241
+ .c4p--tag-set .c4p--tag-set__space--align-end {
6281
6242
  text-align: end;
6282
6243
  }
6283
- .exp--tag-set .exp--tag-set__space--align-center {
6244
+ .c4p--tag-set .c4p--tag-set__space--align-center {
6284
6245
  text-align: center;
6285
6246
  }
6286
- .exp--tag-set .exp--tag-set__tag-container {
6247
+ .c4p--tag-set .c4p--tag-set__tag-container {
6287
6248
  display: inline-flex;
6288
6249
  white-space: nowrap;
6289
6250
  }
6290
- .exp--tag-set .exp--tag-set__tag-container--hidden {
6251
+ .c4p--tag-set .c4p--tag-set__tag-container--hidden {
6291
6252
  position: absolute;
6292
6253
  top: -100vh;
6293
6254
  left: -100vw;
@@ -6296,43 +6257,43 @@
6296
6257
  pointer-events: none;
6297
6258
  visibility: hidden;
6298
6259
  }
6299
- .exp--tag-set .exp--tag-set-overflow {
6260
+ .c4p--tag-set .c4p--tag-set-overflow {
6300
6261
  display: inline-block;
6301
6262
  vertical-align: bottom;
6302
6263
  }
6303
- .exp--tag-set .exp--tag-set-overflow--hidden {
6264
+ .c4p--tag-set .c4p--tag-set-overflow--hidden {
6304
6265
  overflow: hidden;
6305
6266
  max-width: 0;
6306
6267
  visibility: hidden;
6307
6268
  }
6308
6269
 
6309
- .exp--tag-set-modal.exp--tag-set-modal {
6270
+ .c4p--tag-set-modal.c4p--tag-set-modal {
6310
6271
  text-align: initial;
6311
6272
  white-space: initial;
6312
6273
  }
6313
6274
  @media (min-width: 42rem) {
6314
- .exp--tag-set-modal .exp--tag-set-modal__container {
6275
+ .c4p--tag-set-modal .c4p--tag-set-modal__container {
6315
6276
  height: 90%;
6316
6277
  max-height: 450px;
6317
6278
  }
6318
6279
  }
6319
- .exp--tag-set-modal .exp--tag-set-modal__search {
6280
+ .c4p--tag-set-modal .c4p--tag-set-modal__search {
6320
6281
  margin-top: var(--cds-spacing-05, 1rem);
6321
6282
  margin-bottom: 0;
6322
6283
  }
6323
- .exp--tag-set-modal.exp--tag-set-modal .exp--tag-set-modal__fade {
6284
+ .c4p--tag-set-modal.c4p--tag-set-modal .c4p--tag-set-modal__fade {
6324
6285
  position: relative;
6325
6286
  margin-right: var(--cds-spacing-05, 1rem);
6326
6287
  margin-left: var(--cds-spacing-05, 1rem);
6327
6288
  }
6328
- .exp--tag-set-modal .exp--tag-set-modal__body {
6289
+ .c4p--tag-set-modal .c4p--tag-set-modal__body {
6329
6290
  padding-bottom: var(--cds-spacing-06, 1.5rem);
6330
6291
  }
6331
- .exp--tag-set-modal .exp--tag-set-modal__header {
6292
+ .c4p--tag-set-modal .c4p--tag-set-modal__header {
6332
6293
  padding-right: 0;
6333
6294
  margin-right: var(--cds-spacing-05, 1rem);
6334
6295
  }
6335
- .exp--tag-set-modal.exp--tag-set-modal .exp--tag-set-modal__fade::after {
6296
+ .c4p--tag-set-modal.c4p--tag-set-modal .c4p--tag-set-modal__fade::after {
6336
6297
  position: absolute;
6337
6298
  top: calc(-1 * var(--cds-spacing-11, 5rem));
6338
6299
  left: 0;
@@ -6342,15 +6303,15 @@
6342
6303
  content: "";
6343
6304
  }
6344
6305
 
6345
- .exp--tag-set-overflow__tooltip.exp--tag-set-overflow__tooltip {
6306
+ .c4p--tag-set-overflow__tooltip.c4p--tag-set-overflow__tooltip {
6346
6307
  min-width: initial;
6347
6308
  }
6348
- .exp--tag-set-overflow__tooltip .exp--tag-set-overflow__show-all-tags-link {
6309
+ .c4p--tag-set-overflow__tooltip .c4p--tag-set-overflow__show-all-tags-link {
6349
6310
  display: inline-block;
6350
6311
  margin: var(--cds-spacing-03, 0.5rem) 0 var(--cds-spacing-02, 0.25rem);
6351
6312
  }
6352
- .exp--tag-set-overflow__tooltip .exp--tag-set-overflow__tag-item,
6353
- .exp--tag-set-overflow__tooltip .exp--tag-set-overflow__tag-item .bx--tag {
6313
+ .c4p--tag-set-overflow__tooltip .c4p--tag-set-overflow__tag-item,
6314
+ .c4p--tag-set-overflow__tooltip .c4p--tag-set-overflow__tag-item .bx--tag {
6354
6315
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
6355
6316
  font-weight: var(--cds-body-short-01-font-weight, 400);
6356
6317
  line-height: var(--cds-body-short-01-line-height, 1.28572);
@@ -6366,17 +6327,17 @@
6366
6327
  text-overflow: ellipsis;
6367
6328
  white-space: nowrap;
6368
6329
  }
6369
- .exp--tag-set-overflow__tooltip .exp--tag-set-overflow__tag .bx--tag__close-icon {
6330
+ .c4p--tag-set-overflow__tooltip .c4p--tag-set-overflow__tag .bx--tag__close-icon {
6370
6331
  padding: 0;
6371
6332
  }
6372
- .exp--tag-set-overflow__tooltip .exp--tag-set-overflow__tag .bx--tag--high-contrast {
6333
+ .c4p--tag-set-overflow__tooltip .c4p--tag-set-overflow__tag .bx--tag--high-contrast {
6373
6334
  background-color: var(--cds-ui-background, #ffffff);
6374
6335
  color: var(--cds-text-01, #161616);
6375
6336
  }
6376
- .exp--tag-set-overflow__tooltip .exp--tag-set-overflow__tag .bx--tag__close-icon:hover {
6337
+ .c4p--tag-set-overflow__tooltip .c4p--tag-set-overflow__tag .bx--tag__close-icon:hover {
6377
6338
  background-color: var(--cds-hover-ui, #e5e5e5);
6378
6339
  }
6379
- .exp--tag-set-overflow__tooltip .exp--tag-set-overflow__tag .bx--tag__close-icon:focus {
6340
+ .c4p--tag-set-overflow__tooltip .c4p--tag-set-overflow__tag .bx--tag__close-icon:focus {
6380
6341
  box-shadow: inset 0 0 0 var(--cds-spacing-01, 0.125rem) var(--cds-focus, #0f62fe);
6381
6342
  }
6382
6343
 
@@ -6431,19 +6392,19 @@
6431
6392
  /* stylelint-disable-line no-invalid-position-at-import-rule */
6432
6393
  /* stylelint-disable-line no-invalid-position-at-import-rule */
6433
6394
  /* stylelint-disable-line no-invalid-position-at-import-rule */
6434
- .exp--button-set-with-overflow.exp--button-set-with-overflow {
6395
+ .c4p--button-set-with-overflow.c4p--button-set-with-overflow {
6435
6396
  display: flex;
6436
6397
  }
6437
- .exp--button-set-with-overflow .exp--button-set-with-overflow__space {
6398
+ .c4p--button-set-with-overflow .c4p--button-set-with-overflow__space {
6438
6399
  position: relative;
6439
6400
  display: block;
6440
6401
  width: 100%;
6441
6402
  white-space: nowrap;
6442
6403
  }
6443
- .exp--button-set-with-overflow .exp--button-set-with-overflow__button-container {
6404
+ .c4p--button-set-with-overflow .c4p--button-set-with-overflow__button-container {
6444
6405
  display: inline-flex;
6445
6406
  }
6446
- .exp--button-set-with-overflow .exp--button-set-with-overflow__button-container--hidden {
6407
+ .c4p--button-set-with-overflow .c4p--button-set-with-overflow__button-container--hidden {
6447
6408
  position: absolute;
6448
6409
  top: -100vh;
6449
6410
  left: -100vw;
@@ -6452,7 +6413,7 @@
6452
6413
  pointer-events: none;
6453
6414
  visibility: hidden;
6454
6415
  }
6455
- .exp--button-set-with-overflow.exp--button-set-with-overflow--right {
6416
+ .c4p--button-set-with-overflow.c4p--button-set-with-overflow--right {
6456
6417
  justify-content: flex-end;
6457
6418
  }
6458
6419
 
@@ -6464,76 +6425,86 @@
6464
6425
  background-color: var(--to-color);
6465
6426
  }
6466
6427
  }
6467
- .exp--page-header.exp--page-header {
6428
+ @keyframes background-and-shadow-appear {
6429
+ from {
6430
+ background-color: var(--from-color);
6431
+ box-shadow: 0 1px 0 var(--from-color);
6432
+ }
6433
+ to {
6434
+ background-color: var(--to-color);
6435
+ box-shadow: 0 1px 0 var(--to-color-shadow);
6436
+ }
6437
+ }
6438
+ .c4p--page-header.c4p--page-header {
6468
6439
  /* Bleed class for the background */
6469
6440
  position: sticky;
6470
6441
  /* z-index used to raise above any position relative content as per Carbon header */
6471
6442
  /* dropped 1 below Carbon header so as not to overlay the side panel */
6472
6443
  z-index: 7999;
6473
- top: var(--exp--page-header--header-top);
6444
+ top: var(--c4p--page-header--header-top);
6474
6445
  display: inline-block;
6475
6446
  /* cause top/bottom margin to reserve space */
6476
6447
  width: 100%;
6477
6448
  background-color: var(--cds-ui-background, #ffffff);
6478
6449
  color: var(--cds-text-01, #161616);
6479
6450
  /* custom props */
6480
- --exp--page-header--breadcrumb-title-visibility: hidden;
6481
- --exp--page-header--breadcrumb-title-opacity: 1;
6482
- --exp--page-header--breadcrumb-top: 0;
6483
- --exp--page-header--background-opacity: 1;
6484
- --exp--page-header--breadcrumb-title-top: initial;
6485
- --exp--page-header--button-set-in-breadcrumb-width-px: initial;
6486
- --exp--page-header--navigation-buffer-top: $spacing-06;
6487
- }
6488
- .exp--page-header.exp--page-header--has-navigation-tags-only {
6489
- --exp--page-header--navigation-buffer-top: $spacing-04;
6490
- }
6491
- .exp--page-header::before {
6451
+ --c4p--page-header--breadcrumb-title-visibility: hidden;
6452
+ --c4p--page-header--breadcrumb-title-opacity: 1;
6453
+ --c4p--page-header--breadcrumb-top: 0;
6454
+ --c4p--page-header--background-opacity: 1;
6455
+ --c4p--page-header--breadcrumb-title-top: initial;
6456
+ --c4p--page-header--button-set-in-breadcrumb-width-px: initial;
6457
+ --c4p--page-header--navigation-buffer-top: $spacing-06;
6458
+ }
6459
+ .c4p--page-header.c4p--page-header--has-navigation-tags-only {
6460
+ --c4p--page-header--navigation-buffer-top: $spacing-04;
6461
+ }
6462
+ .c4p--page-header::before {
6492
6463
  --from-color: var(--cds-ui-background, #ffffff);
6493
6464
  --to-color: var(--cds-ui-01, #f4f4f4);
6465
+ --to-color-shadow: var(--cds-ui-03, #e0e0e0);
6494
6466
  position: absolute;
6495
6467
  top: 0;
6496
6468
  left: 0;
6497
6469
  display: block;
6498
6470
  width: 100%;
6499
6471
  height: 100%;
6500
- animation: background-appear 1000ms calc(-1000ms * var(--exp--page-header--background-opacity)) linear paused forwards;
6472
+ animation: background-and-shadow-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
6501
6473
  content: "";
6502
6474
  z-index: -1;
6503
- box-shadow: 0 1px 0 var(--cds-ui-03, #e0e0e0);
6504
6475
  }
6505
- .exp--page-header .exp--page-header--width--xl {
6476
+ .c4p--page-header .c4p--page-header--width--xl {
6506
6477
  padding-right: var(--cds-spacing-07, 2rem);
6507
6478
  padding-left: var(--cds-spacing-07, 2rem);
6508
6479
  }
6509
- .exp--page-header .exp--page-header__breadcrumb-row {
6480
+ .c4p--page-header .c4p--page-header__breadcrumb-row {
6510
6481
  position: sticky;
6511
6482
  z-index: 99;
6512
- top: var(--exp--page-header--breadcrumb-top);
6483
+ top: var(--c4p--page-header--breadcrumb-top);
6513
6484
  min-height: var(--cds-spacing-08, 2.5rem);
6514
6485
  }
6515
- .exp--page-header .exp--page-header__breadcrumb-row + .exp--page-header__last-row-buffer--active {
6486
+ .c4p--page-header .c4p--page-header__breadcrumb-row + .c4p--page-header__last-row-buffer--active {
6516
6487
  height: var(--cds-spacing-02, 0.25rem);
6517
6488
  }
6518
- .exp--page-header .exp--page-header__breadcrumb-row:not(.exp--page-header__breadcrumb-row--has-action-bar) {
6489
+ .c4p--page-header .c4p--page-header__breadcrumb-row:not(.c4p--page-header__breadcrumb-row--has-action-bar) {
6519
6490
  margin-bottom: calc(-1 * var(--cds-spacing-03, 0.5rem));
6520
6491
  }
6521
- .exp--page-header .exp--page-header__breadcrumb-row--container {
6492
+ .c4p--page-header .c4p--page-header__breadcrumb-row--container {
6522
6493
  display: flex;
6523
6494
  min-width: 100%;
6524
6495
  flex-wrap: nowrap;
6525
6496
  }
6526
- .exp--page-header .exp--page-header__has-page-actions-without-action-bar {
6497
+ .c4p--page-header .c4p--page-header__has-page-actions-without-action-bar {
6527
6498
  min-width: calc(0.6 * (100% + 2 * var(--cds-spacing-05, 1rem)));
6528
6499
  max-width: calc(0.6 * (100% + 2 * var(--cds-spacing-05, 1rem)));
6529
6500
  }
6530
- .exp--page-header .exp--page-header__has-page-actions-without-action-bar .exp--page-header__has-page-actions-without-action-bar {
6501
+ .c4p--page-header .c4p--page-header__has-page-actions-without-action-bar .c4p--page-header__has-page-actions-without-action-bar {
6531
6502
  min-width: 100%;
6532
6503
  }
6533
- .exp--page-header .exp--page-header__breadcrumb-row--has-action-bar .exp--page-header__breadcrumb-row--container {
6534
- min-width: calc(100% + (var(--exp--page-header--width-px) - var(--exp--page-header--breadcrumb-row-width-px)) / 2);
6504
+ .c4p--page-header .c4p--page-header__breadcrumb-row--has-action-bar .c4p--page-header__breadcrumb-row--container {
6505
+ min-width: calc(100% + (var(--c4p--page-header--width-px) - var(--c4p--page-header--breadcrumb-row-width-px)) / 2);
6535
6506
  }
6536
- .exp--page-header .exp--page-header__breadcrumb-row::after {
6507
+ .c4p--page-header .c4p--page-header__breadcrumb-row::after {
6537
6508
  position: absolute;
6538
6509
  bottom: 0;
6539
6510
  left: 50%;
@@ -6547,204 +6518,205 @@
6547
6518
  transform: translateX(-50%) scaleX(1);
6548
6519
  transition: all 150ms ease-out;
6549
6520
  }
6550
- .exp--page-header .exp--page-header__breadcrumb-row--next-to-tabs::after,
6551
- .exp--page-header .exp--page-header__breadcrumb-row--has-action-bar::after {
6521
+ .c4p--page-header .c4p--page-header__breadcrumb-row--next-to-tabs::after,
6522
+ .c4p--page-header .c4p--page-header__breadcrumb-row--has-action-bar::after {
6552
6523
  /* creates a full width box shadow without causing scroll */
6553
6524
  box-shadow: 25vw 1px 0 0 var(--cds-ui-03, #e0e0e0), -25vw 1px 0 0 var(--cds-ui-03, #e0e0e0);
6554
6525
  opacity: 1;
6555
6526
  }
6556
- .exp--page-header .exp--page-header__breadcrumb-container {
6527
+ .c4p--page-header .c4p--page-header__breadcrumb-container {
6557
6528
  width: 100%;
6558
6529
  }
6559
- .exp--page-header .exp--page-header__action-bar-column {
6530
+ .c4p--page-header .c4p--page-header__action-bar-column {
6560
6531
  display: none;
6561
6532
  }
6562
- .exp--page-header .exp--page-header__breadcrumb-row--has-breadcrumbs .exp--page-header__action-bar-column {
6533
+ .c4p--page-header .c4p--page-header__breadcrumb-row--has-breadcrumbs .c4p--page-header__action-bar-column {
6563
6534
  max-width: 75%;
6564
6535
  flex: 0 1 75%;
6565
6536
  }
6566
6537
  @media (min-width: 42rem) {
6567
- .exp--page-header .exp--page-header__breadcrumb-row--has-breadcrumbs .exp--page-header__action-bar-column {
6538
+ .c4p--page-header .c4p--page-header__breadcrumb-row--has-breadcrumbs .c4p--page-header__action-bar-column {
6568
6539
  max-width: 40%;
6569
6540
  flex: 1 0 40%;
6570
6541
  }
6571
6542
  }
6572
- .exp--page-header .exp--page-header__breadcrumb-row--has-action-bar .exp--page-header__action-bar-column {
6543
+ .c4p--page-header .c4p--page-header__breadcrumb-row--has-action-bar .c4p--page-header__action-bar-column {
6573
6544
  display: initial;
6574
6545
  }
6575
- .exp--page-header .exp--page-header__action-bar-column-content {
6546
+ .c4p--page-header .c4p--page-header__action-bar-column-content {
6576
6547
  display: flex;
6577
6548
  justify-content: flex-end;
6578
6549
  white-space: nowrap;
6579
6550
  }
6580
6551
  @media (min-width: 66rem) {
6581
- .exp--page-header .exp--page-header__action-bar-column-content {
6552
+ .c4p--page-header .c4p--page-header__action-bar-column-content {
6582
6553
  flex-wrap: nowrap;
6583
6554
  /* assume enough space */
6584
6555
  }
6585
6556
  }
6586
- .exp--page-header .exp--page-header__breadcrumb-row .exp--page-header__page-actions {
6557
+ .c4p--page-header .c4p--page-header__breadcrumb-row .c4p--page-header__page-actions {
6587
6558
  position: relative;
6588
6559
  display: inline-block;
6589
6560
  width: 100%;
6590
- max-width: var(--exp--page-header--button-set-in-breadcrumb-width-px);
6591
- flex: 1 1 var(--exp--page-header--button-set-in-breadcrumb-width-px);
6561
+ max-width: var(--c4p--page-header--button-set-in-breadcrumb-width-px);
6562
+ flex: 1 1 var(--c4p--page-header--button-set-in-breadcrumb-width-px);
6592
6563
  opacity: 0;
6593
6564
  transition: opacity 240ms cubic-bezier(0, 0, 0.38, 0.9);
6594
6565
  visibility: hidden;
6595
6566
  white-space: nowrap;
6596
6567
  }
6597
- .exp--page-header .exp--page-header__breadcrumb-row .exp--page-header__page-actions--in-breadcrumb {
6568
+ .c4p--page-header .c4p--page-header__breadcrumb-row .c4p--page-header__page-actions--in-breadcrumb {
6598
6569
  opacity: 1;
6599
6570
  visibility: visible;
6600
6571
  }
6601
- .exp--page-header .exp--page-header__breadcrumb-column {
6572
+ .c4p--page-header .c4p--page-header__breadcrumb-column {
6602
6573
  max-width: 100%;
6603
6574
  flex: 0 0 100%;
6604
6575
  }
6605
6576
  @media (min-width: 42rem) {
6606
- .exp--page-header .exp--page-header__breadcrumb-column {
6577
+ .c4p--page-header .c4p--page-header__breadcrumb-column {
6607
6578
  overflow: hidden;
6608
6579
  /* required for ellipsis in title, title not visible in breadcrumb with back arrow */
6609
6580
  }
6610
6581
  }
6611
- .exp--page-header .exp--page-header__breadcrumb-row--has-action-bar.exp--page-header__breadcrumb-row .exp--page-header__breadcrumb-column {
6582
+ .c4p--page-header .c4p--page-header__breadcrumb-row--has-action-bar.c4p--page-header__breadcrumb-row .c4p--page-header__breadcrumb-column {
6612
6583
  max-width: 75%;
6613
6584
  flex: 0 1 75%;
6614
6585
  }
6615
6586
  @media (min-width: 42rem) {
6616
- .exp--page-header .exp--page-header__breadcrumb-row--has-action-bar.exp--page-header__breadcrumb-row .exp--page-header__breadcrumb-column {
6587
+ .c4p--page-header .c4p--page-header__breadcrumb-row--has-action-bar.c4p--page-header__breadcrumb-row .c4p--page-header__breadcrumb-column {
6617
6588
  max-width: 60%;
6618
6589
  flex: 0 1 60%;
6619
6590
  }
6620
6591
  }
6621
- .exp--page-header .exp--page-header__has-page-actions-without-action-bar.exp--page-header__breadcrumb-row .exp--page-header__breadcrumb-column {
6592
+ .c4p--page-header .c4p--page-header__has-page-actions-without-action-bar.c4p--page-header__breadcrumb-row .c4p--page-header__breadcrumb-column {
6622
6593
  max-width: 100%;
6623
6594
  flex: 0 1 100%;
6624
6595
  }
6625
- .exp--page-header .exp--page-header__breadcrumb-column--background,
6626
- .exp--page-header .exp--page-header__action-bar-column--background {
6596
+ .c4p--page-header .c4p--page-header__breadcrumb-column--background,
6597
+ .c4p--page-header .c4p--page-header__action-bar-column--background {
6627
6598
  position: relative;
6628
6599
  }
6629
- .exp--page-header .exp--page-header__breadcrumb-column--background::before,
6630
- .exp--page-header .exp--page-header__action-bar-column--background::before {
6600
+ .c4p--page-header .c4p--page-header__breadcrumb-column--background::before,
6601
+ .c4p--page-header .c4p--page-header__action-bar-column--background::before {
6631
6602
  --from-color: var(--cds-ui-background, #ffffff);
6632
6603
  --to-color: var(--cds-ui-01, #f4f4f4);
6604
+ --to-color-shadow: var(--cds-ui-03, #e0e0e0);
6633
6605
  position: absolute;
6634
6606
  top: 0;
6635
6607
  left: 0;
6636
6608
  display: block;
6637
6609
  width: 100%;
6638
6610
  height: 100%;
6639
- animation: background-appear 1000ms calc(-1000ms * var(--exp--page-header--background-opacity)) linear paused forwards;
6611
+ animation: background-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
6640
6612
  content: "";
6641
6613
  }
6642
- .exp--page-header .exp--page-header__action-bar-column--influenced-by-collapse-button {
6614
+ .c4p--page-header .c4p--page-header__action-bar-column--influenced-by-collapse-button {
6643
6615
  padding-right: var(--cds-spacing-08, 2.5rem);
6644
6616
  }
6645
- .exp--page-header .exp--page-header__breadcrumb {
6617
+ .c4p--page-header .c4p--page-header__breadcrumb {
6646
6618
  font-size: var(--cds-label-01-font-size, 0.75rem);
6647
6619
  font-weight: var(--cds-label-01-font-weight, 400);
6648
6620
  line-height: var(--cds-label-01-line-height, 1.33333);
6649
6621
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
6650
6622
  padding-top: var(--cds-spacing-04, 0.75rem);
6651
6623
  }
6652
- .exp--page-header .exp--page-header--breadcrumb.exp--breadcrumb-with-overflow__with-items {
6624
+ .c4p--page-header .c4p--page-header--breadcrumb.c4p--breadcrumb-with-overflow__with-items {
6653
6625
  padding-top: 0;
6654
6626
  }
6655
6627
  @media (min-width: 42rem) {
6656
- .exp--page-header .exp--page-header--breadcrumb.exp--breadcrumb-with-overflow__with-items {
6628
+ .c4p--page-header .c4p--page-header--breadcrumb.c4p--breadcrumb-with-overflow__with-items {
6657
6629
  padding-top: var(--cds-spacing-04, 0.75rem);
6658
6630
  }
6659
6631
  }
6660
- .exp--page-header .exp--page-header__breadcrumb .bx--breadcrumb-item {
6632
+ .c4p--page-header .c4p--page-header__breadcrumb .bx--breadcrumb-item {
6661
6633
  margin-right: var(--cds-spacing-02, 0.25rem);
6662
6634
  }
6663
- .exp--page-header .exp--page-header__breadcrumb .bx--breadcrumb-item::after {
6635
+ .c4p--page-header .c4p--page-header__breadcrumb .bx--breadcrumb-item::after {
6664
6636
  margin-left: var(--cds-spacing-02, 0.25rem);
6665
6637
  }
6666
- .exp--page-header .exp--page-header__breadcrumb .bx--breadcrumb-item,
6667
- .exp--page-header .exp--page-header__breadcrumb .bx--breadcrumb-item .bx--link {
6638
+ .c4p--page-header .c4p--page-header__breadcrumb .bx--breadcrumb-item,
6639
+ .c4p--page-header .c4p--page-header__breadcrumb .bx--breadcrumb-item .bx--link {
6668
6640
  font-size: var(--cds-label-01-font-size, 0.75rem);
6669
6641
  font-weight: var(--cds-label-01-font-weight, 400);
6670
6642
  line-height: var(--cds-label-01-line-height, 1.33333);
6671
6643
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
6672
6644
  }
6673
- .exp--page-header .exp--page-header__breadcrumb-title {
6645
+ .c4p--page-header .c4p--page-header__breadcrumb-title {
6674
6646
  position: relative;
6675
6647
  }
6676
- .exp--page-header .exp--page-header__breadcrumb-title:not(.exp--page-header__breadcrumb-title--pre-collapsed) {
6677
- opacity: var(--exp--page-header--breadcrumb-title-opacity);
6678
- transform: translateY(var(--exp--page-header--breadcrumb-title-top));
6648
+ .c4p--page-header .c4p--page-header__breadcrumb-title:not(.c4p--page-header__breadcrumb-title--pre-collapsed) {
6649
+ opacity: var(--c4p--page-header--breadcrumb-title-opacity);
6650
+ transform: translateY(var(--c4p--page-header--breadcrumb-title-top));
6679
6651
  /* token linter does not support this form */
6680
- visibility: var(--exp--page-header--breadcrumb-title-visibility);
6652
+ visibility: var(--c4p--page-header--breadcrumb-title-visibility);
6681
6653
  }
6682
- .exp--page-header .exp--page-header__breadcrumb-container--hidden .exp--page-header__breadcrumb-title.exp--page-header__breadcrumb-title {
6654
+ .c4p--page-header .c4p--page-header__breadcrumb-container--hidden .c4p--page-header__breadcrumb-title.c4p--page-header__breadcrumb-title {
6683
6655
  overflow: initial;
6684
6656
  }
6685
- .exp--page-header .exp--page-header__action-bar {
6657
+ .c4p--page-header .c4p--page-header__action-bar {
6686
6658
  width: 100%;
6687
- max-width: var(--exp--page-header--max-action-bar-width-px);
6688
- flex: 1 1 var(--exp--page-header--max-action-bar-width-px);
6659
+ max-width: var(--c4p--page-header--max-action-bar-width-px);
6660
+ flex: 1 1 var(--c4p--page-header--max-action-bar-width-px);
6689
6661
  padding-top: var(--cds-spacing-04, 0.75rem);
6690
6662
  margin-top: calc(-1 * var(--cds-spacing-04, 0.75rem));
6691
6663
  /* align with breadcrumb */
6692
6664
  vertical-align: top;
6693
6665
  white-space: nowrap;
6694
6666
  }
6695
- .exp--page-header .exp--page-header__title-row {
6667
+ .c4p--page-header .c4p--page-header__title-row {
6696
6668
  margin-top: 0;
6697
6669
  margin-bottom: 0;
6698
6670
  }
6699
6671
  @media (min-width: 42rem) {
6700
- .exp--page-header .exp--page-header__title-row {
6672
+ .c4p--page-header .c4p--page-header__title-row {
6701
6673
  flex-wrap: nowrap;
6702
6674
  /* assume enough space */
6703
6675
  }
6704
6676
  }
6705
- .exp--page-header .exp--page-header__title-row.exp--page-header__title-row--under-action-bar {
6677
+ .c4p--page-header .c4p--page-header__title-row.c4p--page-header__title-row--under-action-bar {
6706
6678
  margin-top: var(--cds-spacing-05, 1rem);
6707
6679
  }
6708
- .exp--page-header .exp--page-header__title-row + .exp--page-header__last-row-buffer--active {
6680
+ .c4p--page-header .c4p--page-header__title-row + .c4p--page-header__last-row-buffer--active {
6709
6681
  height: var(--cds-spacing-07, 2rem);
6710
6682
  }
6711
- .exp--page-header .exp--page-header__title-row.exp--page-header__title-row--spacing-below-03 {
6683
+ .c4p--page-header .c4p--page-header__title-row.c4p--page-header__title-row--spacing-below-03 {
6712
6684
  margin-bottom: var(--cds-spacing-03, 0.5rem);
6713
6685
  }
6714
- .exp--page-header .exp--page-header__title-row.exp--page-header__title-row--spacing-below-05 + .exp--page-header__last-row-buffer--active {
6686
+ .c4p--page-header .c4p--page-header__title-row.c4p--page-header__title-row--spacing-below-05 + .c4p--page-header__last-row-buffer--active {
6715
6687
  height: var(--cds-spacing-05, 1rem);
6716
6688
  }
6717
- .exp--page-header .exp--page-header__title-row.exp--page-header__title-row--spacing-below-06 {
6689
+ .c4p--page-header .c4p--page-header__title-row.c4p--page-header__title-row--spacing-below-06 {
6718
6690
  margin-bottom: var(--cds-spacing-06, 1.5rem);
6719
6691
  }
6720
- .exp--page-header .exp--page-header__title-row.exp--page-header__title-row--no-breadcrumb-row {
6692
+ .c4p--page-header .c4p--page-header__title-row.c4p--page-header__title-row--no-breadcrumb-row {
6721
6693
  margin-top: var(--cds-spacing-07, 2rem);
6722
6694
  }
6723
- .exp--page-header.exp--page-header--has-navigation .exp--page-header__title-row + .exp--page-header__last-row-buffer--active {
6695
+ .c4p--page-header.c4p--page-header--has-navigation .c4p--page-header__title-row + .c4p--page-header__last-row-buffer--active {
6724
6696
  height: calc(var(--cds-spacing-06, 1.5rem));
6725
6697
  }
6726
- .exp--page-header.exp--page-header--has-navigation-tags-only .exp--page-header__title-row + .exp--page-header__last-row-buffer--active {
6698
+ .c4p--page-header.c4p--page-header--has-navigation-tags-only .c4p--page-header__title-row + .c4p--page-header__last-row-buffer--active {
6727
6699
  height: calc(var(--cds-spacing-05, 1rem));
6728
6700
  }
6729
- .exp--page-header .exp--page-header__title-row--sticky {
6701
+ .c4p--page-header .c4p--page-header__title-row--sticky {
6730
6702
  position: sticky;
6731
6703
  }
6732
- .exp--page-header .exp--page-header__breadcrumb-row--has-breadcrumbs + .exp--page-header__title-row--sticky {
6733
- top: var(--exp--page-header--breadcrumb-top);
6704
+ .c4p--page-header .c4p--page-header__breadcrumb-row--has-breadcrumbs + .c4p--page-header__title-row--sticky {
6705
+ top: var(--c4p--page-header--breadcrumb-top);
6734
6706
  }
6735
- .exp--page-header .exp--page-header__title-column {
6707
+ .c4p--page-header .c4p--page-header__title-column {
6736
6708
  overflow: hidden;
6737
6709
  /* required for ellipsis in title */
6738
6710
  min-height: 40px;
6739
6711
  flex: 0 0 100%;
6740
6712
  }
6741
6713
  @media (min-width: 42rem) {
6742
- .exp--page-header .exp--page-header__title-column {
6714
+ .c4p--page-header .c4p--page-header__title-column {
6743
6715
  max-width: 60%;
6744
6716
  flex: 1 0 60%;
6745
6717
  }
6746
6718
  }
6747
- .exp--page-header .exp--page-header__title {
6719
+ .c4p--page-header .c4p--page-header__title {
6748
6720
  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
6749
6721
  font-weight: var(--cds-productive-heading-04-font-weight, 400);
6750
6722
  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
@@ -6753,72 +6725,73 @@
6753
6725
  text-overflow: ellipsis;
6754
6726
  white-space: nowrap;
6755
6727
  }
6756
- .exp--page-header .exp--page-header__title-skeleton {
6728
+ .c4p--page-header .c4p--page-header__title-skeleton {
6757
6729
  height: var(--cds-spacing-07, 2rem);
6758
6730
  }
6759
- .exp--page-header .exp--page-header__title--fades {
6760
- opacity: calc(1 - var(--exp--page-header--breadcrumb-title-opacity));
6731
+ .c4p--page-header .c4p--page-header__title--fades {
6732
+ opacity: calc(1 - var(--c4p--page-header--breadcrumb-title-opacity));
6761
6733
  }
6762
- .exp--page-header .exp--page-header__title-icon {
6734
+ .c4p--page-header .c4p--page-header__title-icon {
6763
6735
  margin-right: var(--cds-spacing-04, 0.75rem);
6764
6736
  transform: translateY(-2px);
6765
6737
  vertical-align: middle;
6766
6738
  }
6767
- .exp--page-header .exp--page-header__page-actions {
6739
+ .c4p--page-header .c4p--page-header__page-actions {
6768
6740
  flex: 0 0 100%;
6769
6741
  margin-top: var(--cds-spacing-05, 1rem);
6770
6742
  white-space: nowrap;
6771
6743
  }
6772
6744
  @media (min-width: 42rem) {
6773
- .exp--page-header .exp--page-header__page-actions {
6745
+ .c4p--page-header .c4p--page-header__page-actions {
6774
6746
  max-width: 40%;
6775
6747
  flex: 0 1 40%;
6776
6748
  margin-top: 0;
6777
6749
  }
6778
6750
  }
6779
- .exp--page-header .exp--page-header__page-actions .bx--btn-set .bx--btn {
6751
+ .c4p--page-header .c4p--page-header__page-actions .bx--btn-set .bx--btn {
6780
6752
  width: initial;
6781
6753
  }
6782
- .exp--page-header .exp--page-header__action-bar-column .exp--page-header__page-actions {
6754
+ .c4p--page-header .c4p--page-header__action-bar-column .c4p--page-header__page-actions {
6783
6755
  margin-top: 0;
6784
6756
  }
6785
- .exp--page-header .exp--page-header__page-actions-container {
6757
+ .c4p--page-header .c4p--page-header__page-actions-container {
6786
6758
  justify-content: flex-start;
6787
6759
  }
6788
6760
  @media (min-width: 42rem) {
6789
- .exp--page-header .exp--page-header__page-actions-container {
6761
+ .c4p--page-header .c4p--page-header__page-actions-container {
6790
6762
  justify-content: flex-end;
6791
6763
  }
6792
6764
  }
6793
- .exp--page-header .exp--page-header__title-row .exp--page-header__page-actions {
6765
+ .c4p--page-header .c4p--page-header__title-row .c4p--page-header__page-actions {
6794
6766
  position: relative;
6795
6767
  opacity: 1;
6796
6768
  transition: all 110ms cubic-bezier(0, 0, 0.38, 0.9);
6797
6769
  transition-property: opacity, visibility;
6798
6770
  visibility: visible;
6799
6771
  }
6800
- .exp--page-header .exp--page-header__title-row .exp--page-header__page-actions::before {
6772
+ .c4p--page-header .c4p--page-header__title-row .c4p--page-header__page-actions::before {
6801
6773
  --from-color: var(--cds-ui-background, #ffffff);
6802
6774
  --to-color: var(--cds-ui-01, #f4f4f4);
6775
+ --to-color-shadow: var(--cds-ui-03, #e0e0e0);
6803
6776
  position: absolute;
6804
6777
  top: 0;
6805
6778
  left: 0;
6806
6779
  display: block;
6807
6780
  width: 100%;
6808
6781
  height: 100%;
6809
- animation: background-appear 1000ms calc(-1000ms * var(--exp--page-header--background-opacity)) linear paused forwards;
6782
+ animation: background-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
6810
6783
  content: "";
6811
6784
  }
6812
- .exp--page-header .exp--page-header__page-actions-content {
6785
+ .c4p--page-header .c4p--page-header__page-actions-content {
6813
6786
  position: relative;
6814
6787
  width: 100%;
6815
6788
  height: 100%;
6816
6789
  }
6817
- .exp--page-header .exp--page-header__title-row .exp--page-header__page-actions--in-breadcrumb {
6790
+ .c4p--page-header .c4p--page-header__title-row .c4p--page-header__page-actions--in-breadcrumb {
6818
6791
  opacity: 0;
6819
6792
  visibility: hidden;
6820
6793
  }
6821
- .exp--page-header .exp--page-header__subtitle-row {
6794
+ .c4p--page-header .c4p--page-header__subtitle-row {
6822
6795
  display: -webkit-box;
6823
6796
  overflow: hidden;
6824
6797
  max-width: 100%;
@@ -6827,58 +6800,58 @@
6827
6800
  -webkit-line-clamp: 2;
6828
6801
  }
6829
6802
  @media (min-width: 42rem) {
6830
- .exp--page-header .exp--page-header__subtitle-row {
6803
+ .c4p--page-header .c4p--page-header__subtitle-row {
6831
6804
  max-width: 60%;
6832
6805
  }
6833
6806
  }
6834
- .exp--page-header .exp--page-header__subtitle-row + .exp--page-header__last-row-buffer--active {
6807
+ .c4p--page-header .c4p--page-header__subtitle-row + .c4p--page-header__last-row-buffer--active {
6835
6808
  height: var(--cds-spacing-05, 1rem);
6836
6809
  }
6837
- .exp--page-header .exp--page-header__subtitle {
6810
+ .c4p--page-header .c4p--page-header__subtitle {
6838
6811
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
6839
6812
  font-weight: var(--cds-body-long-01-font-weight, 400);
6840
6813
  line-height: var(--cds-body-long-01-line-height, 1.42857);
6841
6814
  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
6842
6815
  }
6843
- .exp--page-header .exp--page-header__available-row {
6816
+ .c4p--page-header .c4p--page-header__available-row {
6844
6817
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
6845
6818
  font-weight: var(--cds-body-long-01-font-weight, 400);
6846
6819
  line-height: var(--cds-body-long-01-line-height, 1.42857);
6847
6820
  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
6848
6821
  margin-top: var(--cds-spacing-03, 0.5rem);
6849
6822
  }
6850
- .exp--page-header .exp--page-header__available-row + .exp--page-header__last-row-buffer--active {
6823
+ .c4p--page-header .c4p--page-header__available-row + .c4p--page-header__last-row-buffer--active {
6851
6824
  height: var(--cds-spacing-05, 1rem);
6852
6825
  }
6853
- .exp--page-header .exp--page-header__title-row + .exp--page-header__available-row {
6826
+ .c4p--page-header .c4p--page-header__title-row + .c4p--page-header__available-row {
6854
6827
  margin-top: var(--cds-spacing-05, 1rem);
6855
6828
  }
6856
- .exp--page-header .exp--page-header__available-row * {
6829
+ .c4p--page-header .c4p--page-header__available-row * {
6857
6830
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
6858
6831
  font-weight: var(--cds-body-long-01-font-weight, 400);
6859
6832
  line-height: var(--cds-body-long-01-line-height, 1.42857);
6860
6833
  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
6861
6834
  }
6862
- .exp--page-header .exp--page-header__navigation-row {
6835
+ .c4p--page-header .c4p--page-header__navigation-row {
6863
6836
  flex-wrap: wrap-reverse;
6864
6837
  margin-top: 0;
6865
6838
  }
6866
- .exp--page-header .exp--page-header__navigation-row .bx--content-switcher {
6839
+ .c4p--page-header .c4p--page-header__navigation-row .bx--content-switcher {
6867
6840
  box-sizing: content-box;
6868
6841
  padding-bottom: var(--cds-spacing-05, 1rem);
6869
6842
  }
6870
- .exp--page-header .exp--page-header__navigation-row .bx--tab-content {
6843
+ .c4p--page-header .c4p--page-header__navigation-row .bx--tab-content {
6871
6844
  display: none;
6872
6845
  /* need to figure out how to handle the tab content */
6873
6846
  }
6874
- .exp--page-header .exp--page-header__navigation-tabs {
6847
+ .c4p--page-header .c4p--page-header__navigation-tabs {
6875
6848
  margin-left: calc(-1 * var(--cds-spacing-05, 1rem));
6876
6849
  }
6877
- .exp--page-header .exp--page-header__navigation-row--has-tags .exp--page-header__navigation-tabs {
6850
+ .c4p--page-header .c4p--page-header__navigation-row--has-tags .c4p--page-header__navigation-tabs {
6878
6851
  max-width: 75%;
6879
6852
  flex: 0 1 75%;
6880
6853
  }
6881
- .exp--page-header .exp--page-header__navigation-tags {
6854
+ .c4p--page-header .c4p--page-header__navigation-tags {
6882
6855
  display: flex;
6883
6856
  max-width: 25%;
6884
6857
  flex: 1 0 25%;
@@ -6891,49 +6864,49 @@
6891
6864
  white-space: nowrap;
6892
6865
  }
6893
6866
  @media (min-width: 42rem) {
6894
- .exp--page-header .exp--page-header__navigation-tags {
6867
+ .c4p--page-header .c4p--page-header__navigation-tags {
6895
6868
  padding-right: var(--cds-spacing-05, 1rem);
6896
6869
  }
6897
6870
  }
6898
- .exp--page-header .exp--page-header__navigation-tags--tags-only {
6871
+ .c4p--page-header .c4p--page-header__navigation-tags--tags-only {
6899
6872
  justify-content: flex-start;
6900
6873
  padding-top: 0;
6901
6874
  padding-bottom: var(--cds-spacing-04, 0.75rem);
6902
6875
  margin-left: calc(-1 * var(--cds-spacing-02, 0.25rem));
6903
6876
  text-align: initial;
6904
6877
  }
6905
- .exp--page-header .exp--page-header__navigation-row .bx--content-switcher-btn {
6878
+ .c4p--page-header .c4p--page-header__navigation-row .bx--content-switcher-btn {
6906
6879
  background-color: var(--cds-ui-background, #ffffff);
6907
6880
  }
6908
- .exp--page-header .bx--btn.bx--btn--icon-only.exp--page-header__collapse-expand-toggle {
6881
+ .c4p--page-header .bx--btn.bx--btn--icon-only.c4p--page-header__collapse-expand-toggle {
6909
6882
  position: absolute;
6910
6883
  z-index: 100;
6911
6884
  right: 0;
6912
6885
  bottom: 0;
6913
6886
  }
6914
- .exp--page-header .exp--page-header__collapse-expand-toggle .bx--btn__icon {
6887
+ .c4p--page-header .c4p--page-header__collapse-expand-toggle .bx--btn__icon {
6915
6888
  transition: all 400ms cubic-bezier(0.2, 0, 0.38, 0.9);
6916
6889
  }
6917
- .exp--page-header .exp--page-header__collapse-expand-toggle--collapsed .bx--btn__icon {
6890
+ .c4p--page-header .c4p--page-header__collapse-expand-toggle--collapsed .bx--btn__icon {
6918
6891
  transform: scaleY(-1);
6919
6892
  }
6920
6893
 
6921
6894
  :root {
6922
- --exp--page-header--tagset-tooltip-offset: 0;
6895
+ --c4p--page-header--tagset-tooltip-offset: 0;
6923
6896
  }
6924
6897
 
6925
- .exp--page-header__tagset-tooltip.exp--page-header__tagset-tooltip {
6926
- position: var(--exp--page-header--tagset-tooltip-position) !important;
6927
- top: var(--exp--page-header--tagset-tooltip-offset) !important;
6898
+ .c4p--page-header__tagset-tooltip.c4p--page-header__tagset-tooltip {
6899
+ position: var(--c4p--page-header--tagset-tooltip-position) !important;
6900
+ top: var(--c4p--page-header--tagset-tooltip-offset) !important;
6928
6901
  }
6929
6902
 
6930
- .exp--page-header__navigation-tags-overflow.bx--tooltip {
6903
+ .c4p--page-header__navigation-tags-overflow.bx--tooltip {
6931
6904
  z-index: 7999;
6932
6905
  }
6933
6906
 
6934
- .exp--page-header__action-bar-menu-options.bx--overflow-menu-options,
6907
+ .c4p--page-header__action-bar-menu-options.bx--overflow-menu-options,
6935
6908
  .bx--breadcrumb-menu-options.bx--overflow-menu-options,
6936
- .exp--page-header__button-set-menu-options.bx--overflow-menu-options {
6909
+ .c4p--page-header__button-set-menu-options.bx--overflow-menu-options {
6937
6910
  z-index: 7999;
6938
6911
  }
6939
6912
 
@@ -7011,47 +6984,47 @@
7011
6984
  /* stylelint-disable-line no-invalid-position-at-import-rule */
7012
6985
  /* stylelint-disable-line no-invalid-position-at-import-rule */
7013
6986
  /* stylelint-disable-line no-invalid-position-at-import-rule */
7014
- .exp--card__productive .exp--card__header {
6987
+ .c4p--card__productive .c4p--card__header {
7015
6988
  padding-right: 0;
7016
6989
  }
7017
- .exp--card__productive .exp--card__title {
6990
+ .c4p--card__productive .c4p--card__title {
7018
6991
  font-size: var(--cds-productive-heading-02-font-size, 1rem);
7019
6992
  font-weight: var(--cds-productive-heading-02-font-weight, 600);
7020
6993
  line-height: var(--cds-productive-heading-02-line-height, 1.375);
7021
6994
  letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
7022
6995
  }
7023
- .exp--card__productive .exp--card__title-lg .exp--card__title {
6996
+ .c4p--card__productive .c4p--card__title-lg .c4p--card__title {
7024
6997
  font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
7025
6998
  font-weight: var(--cds-productive-heading-03-font-weight, 400);
7026
6999
  line-height: var(--cds-productive-heading-03-line-height, 1.4);
7027
7000
  letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
7028
7001
  }
7029
- .exp--card__productive .exp--card__body {
7002
+ .c4p--card__productive .c4p--card__body {
7030
7003
  padding-top: var(--cds-spacing-03, 0.5rem);
7031
7004
  }
7032
- .exp--card__productive .exp--card__footer {
7005
+ .c4p--card__productive .c4p--card__footer {
7033
7006
  align-items: center;
7034
7007
  justify-content: space-between;
7035
7008
  border-top: 1px solid var(--cds-ui-03, #e0e0e0);
7036
7009
  }
7037
- .exp--card__productive .exp--card__footer-no-button {
7010
+ .c4p--card__productive .c4p--card__footer-no-button {
7038
7011
  justify-content: flex-end;
7039
7012
  }
7040
- .exp--card__productive .exp--card__actions {
7013
+ .c4p--card__productive .c4p--card__actions {
7041
7014
  margin: 0;
7042
7015
  }
7043
- .exp--card__productive .exp--card__actions-header {
7016
+ .c4p--card__productive .c4p--card__actions-header {
7044
7017
  margin-top: calc(-1 * var(--cds-spacing-02, 0.25rem));
7045
7018
  margin-right: var(--cds-spacing-03, 0.5rem);
7046
7019
  }
7047
- .exp--card__productive .exp--card__title-lg .exp--card__actions-header,
7048
- .exp--card__productive .exp--card__header-has-label .exp--card__actions-header {
7020
+ .c4p--card__productive .c4p--card__title-lg .c4p--card__actions-header,
7021
+ .c4p--card__productive .c4p--card__header-has-label .c4p--card__actions-header {
7049
7022
  margin-top: 0;
7050
7023
  }
7051
- .exp--card__productive .exp--card__icon {
7024
+ .c4p--card__productive .c4p--card__icon {
7052
7025
  margin-right: var(--cds-spacing-05, 1rem);
7053
7026
  }
7054
- .exp--card__productive .exp--card__header-container {
7027
+ .c4p--card__productive .c4p--card__header-container {
7055
7028
  align-items: start;
7056
7029
  }
7057
7030
 
@@ -7208,19 +7181,19 @@
7208
7181
  /* stylelint-disable-line no-invalid-position-at-import-rule */
7209
7182
  /* stylelint-disable-line no-invalid-position-at-import-rule */
7210
7183
  /* stylelint-disable-line no-invalid-position-at-import-rule */
7211
- .exp--remove-modal .bx--modal-footer .bx--btn {
7184
+ .c4p--remove-modal .bx--modal-footer .bx--btn {
7212
7185
  max-width: none;
7213
7186
  }
7214
7187
 
7215
- .exp--remove-modal .bx--modal-content {
7188
+ .c4p--remove-modal .bx--modal-content {
7216
7189
  padding-right: var(--cds-spacing-05, 1rem);
7217
7190
  }
7218
7191
 
7219
- .exp--remove-modal .bx--modal-close {
7192
+ .c4p--remove-modal .bx--modal-close {
7220
7193
  display: none;
7221
7194
  }
7222
7195
 
7223
- .exp--remove-modal__body {
7196
+ .c4p--remove-modal__body {
7224
7197
  padding-right: 20%;
7225
7198
  margin-bottom: var(--cds-spacing-05, 1rem);
7226
7199
  }
@@ -7323,26 +7296,26 @@
7323
7296
  stroke-dashoffset: 0;
7324
7297
  }
7325
7298
  }
7326
- .exp--saving__message {
7299
+ .c4p--saving__message {
7327
7300
  display: flex;
7328
7301
  }
7329
7302
 
7330
- .exp--saving__error-icon {
7303
+ .c4p--saving__error-icon {
7331
7304
  margin-right: var(--cds-spacing-05, 1rem);
7332
7305
  }
7333
7306
 
7334
- .exp--saving__error-icon svg {
7307
+ .c4p--saving__error-icon svg {
7335
7308
  fill: var(--cds-danger-01, #da1e28);
7336
7309
  }
7337
7310
 
7338
- .exp--saving__text {
7311
+ .c4p--saving__text {
7339
7312
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
7340
7313
  font-weight: var(--cds-body-short-01-font-weight, 400);
7341
7314
  line-height: var(--cds-body-short-01-line-height, 1.28572);
7342
7315
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
7343
7316
  }
7344
7317
 
7345
- .exp--saving__buttons {
7318
+ .c4p--saving__buttons {
7346
7319
  display: flex;
7347
7320
  }
7348
7321
 
@@ -7516,403 +7489,403 @@
7516
7489
  transform: scaleY(-1) rotate(0deg);
7517
7490
  }
7518
7491
  }
7519
- .exp--status-icon {
7492
+ .c4p--status-icon {
7520
7493
  display: flex;
7521
7494
  justify-content: flex-end;
7522
7495
  }
7523
7496
 
7524
- .exp--status-icon--light.exp--status-icon--light-minor-warning,
7525
- .exp--status-icon--dark.exp--status-icon--dark-minor-warning {
7497
+ .c4p--status-icon--light.c4p--status-icon--light-minor-warning,
7498
+ .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning {
7526
7499
  fill: #fddc69;
7527
7500
  }
7528
7501
 
7529
- .exp--status-icon--light.exp--status-icon--light-major-warning path:nth-of-type(1),
7530
- .exp--status-icon--dark.exp--status-icon--dark-major-warning path:nth-of-type(1),
7531
- .exp--status-icon--light.exp--status-icon--light-minor-warning path:nth-of-type(1),
7532
- .exp--status-icon--dark.exp--status-icon--dark-minor-warning path:nth-of-type(1) {
7502
+ .c4p--status-icon--light.c4p--status-icon--light-major-warning path:nth-of-type(1),
7503
+ .c4p--status-icon--dark.c4p--status-icon--dark-major-warning path:nth-of-type(1),
7504
+ .c4p--status-icon--light.c4p--status-icon--light-minor-warning path:nth-of-type(1),
7505
+ .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning path:nth-of-type(1) {
7533
7506
  fill: #161616;
7534
7507
  }
7535
7508
 
7536
- .exp--status-icon--light.exp--status-icon--light-fatal {
7509
+ .c4p--status-icon--light.c4p--status-icon--light-fatal {
7537
7510
  fill: #000000;
7538
7511
  }
7539
7512
  @media (prefers-reduced-motion) {
7540
- .exp--status-icon--light.exp--status-icon--light-fatal .exp--status-icon--light.exp--status-icon--light-in-progress {
7513
+ .c4p--status-icon--light.c4p--status-icon--light-fatal .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7541
7514
  animation: none;
7542
7515
  }
7543
7516
  }
7544
7517
 
7545
- .exp--status-icon--light.exp--status-icon--dark-fatal {
7518
+ .c4p--status-icon--light.c4p--status-icon--dark-fatal {
7546
7519
  fill: #000000;
7547
7520
  }
7548
7521
  @media (prefers-reduced-motion) {
7549
- .exp--status-icon--light.exp--status-icon--dark-fatal .exp--status-icon--light.exp--status-icon--dark-in-progress {
7522
+ .c4p--status-icon--light.c4p--status-icon--dark-fatal .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7550
7523
  animation: none;
7551
7524
  }
7552
7525
  }
7553
7526
 
7554
- .exp--status-icon--light.exp--status-icon--light-critical {
7527
+ .c4p--status-icon--light.c4p--status-icon--light-critical {
7555
7528
  fill: #da1e28;
7556
7529
  }
7557
7530
  @media (prefers-reduced-motion) {
7558
- .exp--status-icon--light.exp--status-icon--light-critical .exp--status-icon--light.exp--status-icon--light-in-progress {
7531
+ .c4p--status-icon--light.c4p--status-icon--light-critical .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7559
7532
  animation: none;
7560
7533
  }
7561
7534
  }
7562
7535
 
7563
- .exp--status-icon--light.exp--status-icon--dark-critical {
7536
+ .c4p--status-icon--light.c4p--status-icon--dark-critical {
7564
7537
  fill: #da1e28;
7565
7538
  }
7566
7539
  @media (prefers-reduced-motion) {
7567
- .exp--status-icon--light.exp--status-icon--dark-critical .exp--status-icon--light.exp--status-icon--dark-in-progress {
7540
+ .c4p--status-icon--light.c4p--status-icon--dark-critical .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7568
7541
  animation: none;
7569
7542
  }
7570
7543
  }
7571
7544
 
7572
- .exp--status-icon--light.exp--status-icon--light-major-warning {
7545
+ .c4p--status-icon--light.c4p--status-icon--light-major-warning {
7573
7546
  fill: #ff832b;
7574
7547
  }
7575
7548
  @media (prefers-reduced-motion) {
7576
- .exp--status-icon--light.exp--status-icon--light-major-warning .exp--status-icon--light.exp--status-icon--light-in-progress {
7549
+ .c4p--status-icon--light.c4p--status-icon--light-major-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7577
7550
  animation: none;
7578
7551
  }
7579
7552
  }
7580
7553
 
7581
- .exp--status-icon--light.exp--status-icon--dark-major-warning {
7554
+ .c4p--status-icon--light.c4p--status-icon--dark-major-warning {
7582
7555
  fill: #ff832b;
7583
7556
  }
7584
7557
  @media (prefers-reduced-motion) {
7585
- .exp--status-icon--light.exp--status-icon--dark-major-warning .exp--status-icon--light.exp--status-icon--dark-in-progress {
7558
+ .c4p--status-icon--light.c4p--status-icon--dark-major-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7586
7559
  animation: none;
7587
7560
  }
7588
7561
  }
7589
7562
 
7590
- .exp--status-icon--light.exp--status-icon--light-minor-warning {
7563
+ .c4p--status-icon--light.c4p--status-icon--light-minor-warning {
7591
7564
  fill: #fddc69;
7592
7565
  }
7593
7566
  @media (prefers-reduced-motion) {
7594
- .exp--status-icon--light.exp--status-icon--light-minor-warning .exp--status-icon--light.exp--status-icon--light-in-progress {
7567
+ .c4p--status-icon--light.c4p--status-icon--light-minor-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7595
7568
  animation: none;
7596
7569
  }
7597
7570
  }
7598
7571
 
7599
- .exp--status-icon--light.exp--status-icon--dark-minor-warning {
7572
+ .c4p--status-icon--light.c4p--status-icon--dark-minor-warning {
7600
7573
  fill: #fddc69;
7601
7574
  }
7602
7575
  @media (prefers-reduced-motion) {
7603
- .exp--status-icon--light.exp--status-icon--dark-minor-warning .exp--status-icon--light.exp--status-icon--dark-in-progress {
7576
+ .c4p--status-icon--light.c4p--status-icon--dark-minor-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7604
7577
  animation: none;
7605
7578
  }
7606
7579
  }
7607
7580
 
7608
- .exp--status-icon--light.exp--status-icon--light-undefined {
7581
+ .c4p--status-icon--light.c4p--status-icon--light-undefined {
7609
7582
  fill: #8a3ffc;
7610
7583
  }
7611
7584
  @media (prefers-reduced-motion) {
7612
- .exp--status-icon--light.exp--status-icon--light-undefined .exp--status-icon--light.exp--status-icon--light-in-progress {
7585
+ .c4p--status-icon--light.c4p--status-icon--light-undefined .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7613
7586
  animation: none;
7614
7587
  }
7615
7588
  }
7616
7589
 
7617
- .exp--status-icon--light.exp--status-icon--dark-undefined {
7590
+ .c4p--status-icon--light.c4p--status-icon--dark-undefined {
7618
7591
  fill: #8a3ffc;
7619
7592
  }
7620
7593
  @media (prefers-reduced-motion) {
7621
- .exp--status-icon--light.exp--status-icon--dark-undefined .exp--status-icon--light.exp--status-icon--dark-in-progress {
7594
+ .c4p--status-icon--light.c4p--status-icon--dark-undefined .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7622
7595
  animation: none;
7623
7596
  }
7624
7597
  }
7625
7598
 
7626
- .exp--status-icon--light.exp--status-icon--light-unknown {
7599
+ .c4p--status-icon--light.c4p--status-icon--light-unknown {
7627
7600
  fill: #6f6f6f;
7628
7601
  }
7629
7602
  @media (prefers-reduced-motion) {
7630
- .exp--status-icon--light.exp--status-icon--light-unknown .exp--status-icon--light.exp--status-icon--light-in-progress {
7603
+ .c4p--status-icon--light.c4p--status-icon--light-unknown .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7631
7604
  animation: none;
7632
7605
  }
7633
7606
  }
7634
7607
 
7635
- .exp--status-icon--light.exp--status-icon--dark-unknown {
7608
+ .c4p--status-icon--light.c4p--status-icon--dark-unknown {
7636
7609
  fill: #6f6f6f;
7637
7610
  }
7638
7611
  @media (prefers-reduced-motion) {
7639
- .exp--status-icon--light.exp--status-icon--dark-unknown .exp--status-icon--light.exp--status-icon--dark-in-progress {
7612
+ .c4p--status-icon--light.c4p--status-icon--dark-unknown .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7640
7613
  animation: none;
7641
7614
  }
7642
7615
  }
7643
7616
 
7644
- .exp--status-icon--light.exp--status-icon--light-normal {
7617
+ .c4p--status-icon--light.c4p--status-icon--light-normal {
7645
7618
  fill: #198038;
7646
7619
  }
7647
7620
  @media (prefers-reduced-motion) {
7648
- .exp--status-icon--light.exp--status-icon--light-normal .exp--status-icon--light.exp--status-icon--light-in-progress {
7621
+ .c4p--status-icon--light.c4p--status-icon--light-normal .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7649
7622
  animation: none;
7650
7623
  }
7651
7624
  }
7652
7625
 
7653
- .exp--status-icon--light.exp--status-icon--dark-normal {
7626
+ .c4p--status-icon--light.c4p--status-icon--dark-normal {
7654
7627
  fill: #198038;
7655
7628
  }
7656
7629
  @media (prefers-reduced-motion) {
7657
- .exp--status-icon--light.exp--status-icon--dark-normal .exp--status-icon--light.exp--status-icon--dark-in-progress {
7630
+ .c4p--status-icon--light.c4p--status-icon--dark-normal .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7658
7631
  animation: none;
7659
7632
  }
7660
7633
  }
7661
7634
 
7662
- .exp--status-icon--light.exp--status-icon--light-info {
7635
+ .c4p--status-icon--light.c4p--status-icon--light-info {
7663
7636
  fill: #0f62fe;
7664
7637
  }
7665
7638
  @media (prefers-reduced-motion) {
7666
- .exp--status-icon--light.exp--status-icon--light-info .exp--status-icon--light.exp--status-icon--light-in-progress {
7639
+ .c4p--status-icon--light.c4p--status-icon--light-info .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7667
7640
  animation: none;
7668
7641
  }
7669
7642
  }
7670
7643
 
7671
- .exp--status-icon--light.exp--status-icon--dark-info {
7644
+ .c4p--status-icon--light.c4p--status-icon--dark-info {
7672
7645
  fill: #0f62fe;
7673
7646
  }
7674
7647
  @media (prefers-reduced-motion) {
7675
- .exp--status-icon--light.exp--status-icon--dark-info .exp--status-icon--light.exp--status-icon--dark-in-progress {
7648
+ .c4p--status-icon--light.c4p--status-icon--dark-info .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7676
7649
  animation: none;
7677
7650
  }
7678
7651
  }
7679
7652
 
7680
- .exp--status-icon--light.exp--status-icon--light-in-progress {
7653
+ .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7681
7654
  animation: rotating 8000ms infinite linear;
7682
7655
  fill: #0f62fe;
7683
7656
  }
7684
7657
  @media (prefers-reduced-motion: reduce) {
7685
- .exp--status-icon--light.exp--status-icon--light-in-progress {
7658
+ .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7686
7659
  animation: none;
7687
7660
  }
7688
7661
  }
7689
7662
 
7690
- .exp--status-icon--light.exp--status-icon--dark-in-progress {
7663
+ .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7691
7664
  animation: rotating 8000ms infinite linear;
7692
7665
  fill: #0f62fe;
7693
7666
  }
7694
7667
  @media (prefers-reduced-motion: reduce) {
7695
- .exp--status-icon--light.exp--status-icon--dark-in-progress {
7668
+ .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7696
7669
  animation: none;
7697
7670
  }
7698
7671
  }
7699
7672
 
7700
- .exp--status-icon--light.exp--status-icon--light-running {
7673
+ .c4p--status-icon--light.c4p--status-icon--light-running {
7701
7674
  fill: #198038;
7702
7675
  transform: scaleY(-1);
7703
7676
  }
7704
7677
 
7705
- .exp--status-icon--light.exp--status-icon--dark-running {
7678
+ .c4p--status-icon--light.c4p--status-icon--dark-running {
7706
7679
  fill: #198038;
7707
7680
  transform: scaleY(-1);
7708
7681
  }
7709
7682
 
7710
- .exp--status-icon--light.exp--status-icon--light-pending {
7683
+ .c4p--status-icon--light.c4p--status-icon--light-pending {
7711
7684
  fill: #6f6f6f;
7712
7685
  }
7713
7686
  @media (prefers-reduced-motion) {
7714
- .exp--status-icon--light.exp--status-icon--light-pending .exp--status-icon--light.exp--status-icon--light-in-progress {
7687
+ .c4p--status-icon--light.c4p--status-icon--light-pending .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7715
7688
  animation: none;
7716
7689
  }
7717
7690
  }
7718
7691
 
7719
- .exp--status-icon--light.exp--status-icon--dark-pending {
7692
+ .c4p--status-icon--light.c4p--status-icon--dark-pending {
7720
7693
  fill: #6f6f6f;
7721
7694
  }
7722
7695
  @media (prefers-reduced-motion) {
7723
- .exp--status-icon--light.exp--status-icon--dark-pending .exp--status-icon--light.exp--status-icon--dark-in-progress {
7696
+ .c4p--status-icon--light.c4p--status-icon--dark-pending .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7724
7697
  animation: none;
7725
7698
  }
7726
7699
  }
7727
7700
 
7728
- .exp--status-icon--dark.exp--status-icon--light-fatal {
7701
+ .c4p--status-icon--dark.c4p--status-icon--light-fatal {
7729
7702
  fill: #8d8d8d;
7730
7703
  }
7731
7704
  @media (prefers-reduced-motion) {
7732
- .exp--status-icon--dark.exp--status-icon--light-fatal .exp--status-icon--dark.exp--status-icon--light-in-progress {
7705
+ .c4p--status-icon--dark.c4p--status-icon--light-fatal .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7733
7706
  animation: none;
7734
7707
  }
7735
7708
  }
7736
7709
 
7737
- .exp--status-icon--dark.exp--status-icon--dark-fatal {
7710
+ .c4p--status-icon--dark.c4p--status-icon--dark-fatal {
7738
7711
  fill: #8d8d8d;
7739
7712
  }
7740
7713
  @media (prefers-reduced-motion) {
7741
- .exp--status-icon--dark.exp--status-icon--dark-fatal .exp--status-icon--dark.exp--status-icon--dark-in-progress {
7714
+ .c4p--status-icon--dark.c4p--status-icon--dark-fatal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7742
7715
  animation: none;
7743
7716
  }
7744
7717
  }
7745
7718
 
7746
- .exp--status-icon--dark.exp--status-icon--light-critical {
7719
+ .c4p--status-icon--dark.c4p--status-icon--light-critical {
7747
7720
  fill: #fa4d56;
7748
7721
  }
7749
7722
  @media (prefers-reduced-motion) {
7750
- .exp--status-icon--dark.exp--status-icon--light-critical .exp--status-icon--dark.exp--status-icon--light-in-progress {
7723
+ .c4p--status-icon--dark.c4p--status-icon--light-critical .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7751
7724
  animation: none;
7752
7725
  }
7753
7726
  }
7754
7727
 
7755
- .exp--status-icon--dark.exp--status-icon--dark-critical {
7728
+ .c4p--status-icon--dark.c4p--status-icon--dark-critical {
7756
7729
  fill: #fa4d56;
7757
7730
  }
7758
7731
  @media (prefers-reduced-motion) {
7759
- .exp--status-icon--dark.exp--status-icon--dark-critical .exp--status-icon--dark.exp--status-icon--dark-in-progress {
7732
+ .c4p--status-icon--dark.c4p--status-icon--dark-critical .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7760
7733
  animation: none;
7761
7734
  }
7762
7735
  }
7763
7736
 
7764
- .exp--status-icon--dark.exp--status-icon--light-major-warning {
7737
+ .c4p--status-icon--dark.c4p--status-icon--light-major-warning {
7765
7738
  fill: #ff832b;
7766
7739
  }
7767
7740
  @media (prefers-reduced-motion) {
7768
- .exp--status-icon--dark.exp--status-icon--light-major-warning .exp--status-icon--dark.exp--status-icon--light-in-progress {
7741
+ .c4p--status-icon--dark.c4p--status-icon--light-major-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7769
7742
  animation: none;
7770
7743
  }
7771
7744
  }
7772
7745
 
7773
- .exp--status-icon--dark.exp--status-icon--dark-major-warning {
7746
+ .c4p--status-icon--dark.c4p--status-icon--dark-major-warning {
7774
7747
  fill: #ff832b;
7775
7748
  }
7776
7749
  @media (prefers-reduced-motion) {
7777
- .exp--status-icon--dark.exp--status-icon--dark-major-warning .exp--status-icon--dark.exp--status-icon--dark-in-progress {
7750
+ .c4p--status-icon--dark.c4p--status-icon--dark-major-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7778
7751
  animation: none;
7779
7752
  }
7780
7753
  }
7781
7754
 
7782
- .exp--status-icon--dark.exp--status-icon--light-minor-warning {
7755
+ .c4p--status-icon--dark.c4p--status-icon--light-minor-warning {
7783
7756
  fill: #fddc69;
7784
7757
  }
7785
7758
  @media (prefers-reduced-motion) {
7786
- .exp--status-icon--dark.exp--status-icon--light-minor-warning .exp--status-icon--dark.exp--status-icon--light-in-progress {
7759
+ .c4p--status-icon--dark.c4p--status-icon--light-minor-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7787
7760
  animation: none;
7788
7761
  }
7789
7762
  }
7790
7763
 
7791
- .exp--status-icon--dark.exp--status-icon--dark-minor-warning {
7764
+ .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning {
7792
7765
  fill: #fddc69;
7793
7766
  }
7794
7767
  @media (prefers-reduced-motion) {
7795
- .exp--status-icon--dark.exp--status-icon--dark-minor-warning .exp--status-icon--dark.exp--status-icon--dark-in-progress {
7768
+ .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7796
7769
  animation: none;
7797
7770
  }
7798
7771
  }
7799
7772
 
7800
- .exp--status-icon--dark.exp--status-icon--light-undefined {
7773
+ .c4p--status-icon--dark.c4p--status-icon--light-undefined {
7801
7774
  fill: #a56eff;
7802
7775
  }
7803
7776
  @media (prefers-reduced-motion) {
7804
- .exp--status-icon--dark.exp--status-icon--light-undefined .exp--status-icon--dark.exp--status-icon--light-in-progress {
7777
+ .c4p--status-icon--dark.c4p--status-icon--light-undefined .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7805
7778
  animation: none;
7806
7779
  }
7807
7780
  }
7808
7781
 
7809
- .exp--status-icon--dark.exp--status-icon--dark-undefined {
7782
+ .c4p--status-icon--dark.c4p--status-icon--dark-undefined {
7810
7783
  fill: #a56eff;
7811
7784
  }
7812
7785
  @media (prefers-reduced-motion) {
7813
- .exp--status-icon--dark.exp--status-icon--dark-undefined .exp--status-icon--dark.exp--status-icon--dark-in-progress {
7786
+ .c4p--status-icon--dark.c4p--status-icon--dark-undefined .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7814
7787
  animation: none;
7815
7788
  }
7816
7789
  }
7817
7790
 
7818
- .exp--status-icon--dark.exp--status-icon--light-unknown {
7791
+ .c4p--status-icon--dark.c4p--status-icon--light-unknown {
7819
7792
  fill: #8d8d8d;
7820
7793
  }
7821
7794
  @media (prefers-reduced-motion) {
7822
- .exp--status-icon--dark.exp--status-icon--light-unknown .exp--status-icon--dark.exp--status-icon--light-in-progress {
7795
+ .c4p--status-icon--dark.c4p--status-icon--light-unknown .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7823
7796
  animation: none;
7824
7797
  }
7825
7798
  }
7826
7799
 
7827
- .exp--status-icon--dark.exp--status-icon--dark-unknown {
7800
+ .c4p--status-icon--dark.c4p--status-icon--dark-unknown {
7828
7801
  fill: #8d8d8d;
7829
7802
  }
7830
7803
  @media (prefers-reduced-motion) {
7831
- .exp--status-icon--dark.exp--status-icon--dark-unknown .exp--status-icon--dark.exp--status-icon--dark-in-progress {
7804
+ .c4p--status-icon--dark.c4p--status-icon--dark-unknown .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7832
7805
  animation: none;
7833
7806
  }
7834
7807
  }
7835
7808
 
7836
- .exp--status-icon--dark.exp--status-icon--light-normal {
7809
+ .c4p--status-icon--dark.c4p--status-icon--light-normal {
7837
7810
  fill: #24a148;
7838
7811
  }
7839
7812
  @media (prefers-reduced-motion) {
7840
- .exp--status-icon--dark.exp--status-icon--light-normal .exp--status-icon--dark.exp--status-icon--light-in-progress {
7813
+ .c4p--status-icon--dark.c4p--status-icon--light-normal .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7841
7814
  animation: none;
7842
7815
  }
7843
7816
  }
7844
7817
 
7845
- .exp--status-icon--dark.exp--status-icon--dark-normal {
7818
+ .c4p--status-icon--dark.c4p--status-icon--dark-normal {
7846
7819
  fill: #24a148;
7847
7820
  }
7848
7821
  @media (prefers-reduced-motion) {
7849
- .exp--status-icon--dark.exp--status-icon--dark-normal .exp--status-icon--dark.exp--status-icon--dark-in-progress {
7822
+ .c4p--status-icon--dark.c4p--status-icon--dark-normal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7850
7823
  animation: none;
7851
7824
  }
7852
7825
  }
7853
7826
 
7854
- .exp--status-icon--dark.exp--status-icon--light-info {
7827
+ .c4p--status-icon--dark.c4p--status-icon--light-info {
7855
7828
  fill: #4589ff;
7856
7829
  }
7857
7830
  @media (prefers-reduced-motion) {
7858
- .exp--status-icon--dark.exp--status-icon--light-info .exp--status-icon--dark.exp--status-icon--light-in-progress {
7831
+ .c4p--status-icon--dark.c4p--status-icon--light-info .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7859
7832
  animation: none;
7860
7833
  }
7861
7834
  }
7862
7835
 
7863
- .exp--status-icon--dark.exp--status-icon--dark-info {
7836
+ .c4p--status-icon--dark.c4p--status-icon--dark-info {
7864
7837
  fill: #4589ff;
7865
7838
  }
7866
7839
  @media (prefers-reduced-motion) {
7867
- .exp--status-icon--dark.exp--status-icon--dark-info .exp--status-icon--dark.exp--status-icon--dark-in-progress {
7840
+ .c4p--status-icon--dark.c4p--status-icon--dark-info .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7868
7841
  animation: none;
7869
7842
  }
7870
7843
  }
7871
7844
 
7872
- .exp--status-icon--dark.exp--status-icon--light-in-progress {
7845
+ .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7873
7846
  animation: rotating 8000ms infinite linear;
7874
7847
  fill: #4589ff;
7875
7848
  }
7876
7849
  @media (prefers-reduced-motion: reduce) {
7877
- .exp--status-icon--dark.exp--status-icon--light-in-progress {
7850
+ .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7878
7851
  animation: none;
7879
7852
  }
7880
7853
  }
7881
7854
 
7882
- .exp--status-icon--dark.exp--status-icon--dark-in-progress {
7855
+ .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7883
7856
  animation: rotating 8000ms infinite linear;
7884
7857
  fill: #4589ff;
7885
7858
  }
7886
7859
  @media (prefers-reduced-motion: reduce) {
7887
- .exp--status-icon--dark.exp--status-icon--dark-in-progress {
7860
+ .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7888
7861
  animation: none;
7889
7862
  }
7890
7863
  }
7891
7864
 
7892
- .exp--status-icon--dark.exp--status-icon--light-running {
7865
+ .c4p--status-icon--dark.c4p--status-icon--light-running {
7893
7866
  fill: #24a148;
7894
7867
  transform: scaleY(-1);
7895
7868
  }
7896
7869
 
7897
- .exp--status-icon--dark.exp--status-icon--dark-running {
7870
+ .c4p--status-icon--dark.c4p--status-icon--dark-running {
7898
7871
  fill: #24a148;
7899
7872
  transform: scaleY(-1);
7900
7873
  }
7901
7874
 
7902
- .exp--status-icon--dark.exp--status-icon--light-pending {
7875
+ .c4p--status-icon--dark.c4p--status-icon--light-pending {
7903
7876
  fill: #8d8d8d;
7904
7877
  }
7905
7878
  @media (prefers-reduced-motion) {
7906
- .exp--status-icon--dark.exp--status-icon--light-pending .exp--status-icon--dark.exp--status-icon--light-in-progress {
7879
+ .c4p--status-icon--dark.c4p--status-icon--light-pending .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7907
7880
  animation: none;
7908
7881
  }
7909
7882
  }
7910
7883
 
7911
- .exp--status-icon--dark.exp--status-icon--dark-pending {
7884
+ .c4p--status-icon--dark.c4p--status-icon--dark-pending {
7912
7885
  fill: #8d8d8d;
7913
7886
  }
7914
7887
  @media (prefers-reduced-motion) {
7915
- .exp--status-icon--dark.exp--status-icon--dark-pending .exp--status-icon--dark.exp--status-icon--dark-in-progress {
7888
+ .c4p--status-icon--dark.c4p--status-icon--dark-pending .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7916
7889
  animation: none;
7917
7890
  }
7918
7891
  }
@@ -8268,48 +8241,48 @@
8268
8241
  /* stylelint-disable-line no-invalid-position-at-import-rule */
8269
8242
  /* stylelint-disable-line no-invalid-position-at-import-rule */
8270
8243
  /* stylelint-disable-line no-invalid-position-at-import-rule */
8271
- .exp--toolbar {
8244
+ .c4p--toolbar {
8272
8245
  display: flex;
8273
8246
  min-width: 2.5rem;
8274
8247
  min-height: 2.5rem;
8275
8248
  background-color: var(--cds-ui-01, #f4f4f4);
8276
8249
  }
8277
8250
  @media (min-width: 66rem) {
8278
- .exp--toolbar {
8251
+ .c4p--toolbar {
8279
8252
  justify-content: flex-end;
8280
8253
  }
8281
8254
  }
8282
8255
 
8283
- .exp--toolbar--vertical,
8284
- .exp--toolbar--vertical > .exp--toolbar__group {
8256
+ .c4p--toolbar--vertical,
8257
+ .c4p--toolbar--vertical > .c4p--toolbar__group {
8285
8258
  flex-wrap: wrap;
8286
8259
  }
8287
8260
 
8288
- .exp--toolbar--vertical {
8261
+ .c4p--toolbar--vertical {
8289
8262
  max-width: 2.5rem;
8290
8263
  }
8291
8264
 
8292
- .exp--toolbar__group {
8265
+ .c4p--toolbar__group {
8293
8266
  display: flex;
8294
8267
  border-right: 0.0625rem solid var(--cds-ui-03, #e0e0e0);
8295
8268
  border-bottom: 0.0625rem solid var(--cds-ui-03, #e0e0e0);
8296
8269
  }
8297
8270
 
8298
- .exp--toolbar--vertical > .exp--toolbar__group,
8299
- .exp--toolbar__group:last-of-type {
8271
+ .c4p--toolbar--vertical > .c4p--toolbar__group,
8272
+ .c4p--toolbar__group:last-of-type {
8300
8273
  border-right-width: 0;
8301
8274
  }
8302
8275
 
8303
- .exp--toolbar--vertical > .exp--toolbar__group:last-of-type,
8304
- .exp--toolbar .bx--dropdown {
8276
+ .c4p--toolbar--vertical > .c4p--toolbar__group:last-of-type,
8277
+ .c4p--toolbar .bx--dropdown {
8305
8278
  border-bottom-width: 0;
8306
8279
  }
8307
8280
 
8308
- .exp--toolbar__button--caret {
8281
+ .c4p--toolbar__button--caret {
8309
8282
  position: relative;
8310
8283
  }
8311
8284
 
8312
- .exp--toolbar__button__caret {
8285
+ .c4p--toolbar__button__caret {
8313
8286
  position: absolute;
8314
8287
  right: 0.125rem;
8315
8288
  bottom: 0.125rem;
@@ -8347,7 +8320,7 @@
8347
8320
  component is because we want these colors to always be the same
8348
8321
  despite of which carbon theme the user has.
8349
8322
  */
8350
- .exp--web-terminal {
8323
+ .c4p--web-terminal {
8351
8324
  --cds-interactive-01: #0f62fe;
8352
8325
  --cds-interactive-02: #6f6f6f;
8353
8326
  --cds-interactive-03: #ffffff;
@@ -8781,7 +8754,7 @@
8781
8754
  background-color: #161616;
8782
8755
  }
8783
8756
 
8784
- .exp--web-terminal__bar {
8757
+ .c4p--web-terminal__bar {
8785
8758
  display: flex;
8786
8759
  height: 3rem;
8787
8760
  align-items: center;
@@ -8789,11 +8762,11 @@
8789
8762
  background-color: var(--cds-ui-background, #ffffff);
8790
8763
  }
8791
8764
 
8792
- .exp--web-terminal__actions {
8765
+ .c4p--web-terminal__actions {
8793
8766
  display: flex;
8794
8767
  }
8795
8768
 
8796
- .exp--web-terminal__documentation-overflow {
8769
+ .c4p--web-terminal__documentation-overflow {
8797
8770
  --cds-interactive-01: #0f62fe;
8798
8771
  --cds-interactive-02: #6f6f6f;
8799
8772
  --cds-interactive-03: #ffffff;
@@ -9218,7 +9191,7 @@
9218
9191
  --cds-icon-size-02: 1.25rem;
9219
9192
  }
9220
9193
 
9221
- .exp--web-terminal__body {
9194
+ .c4p--web-terminal__body {
9222
9195
  height: 100%;
9223
9196
  }
9224
9197
 
@@ -9257,111 +9230,111 @@
9257
9230
  /* stylelint-disable-line no-invalid-position-at-import-rule */
9258
9231
  /* stylelint-disable-line no-invalid-position-at-import-rule */
9259
9232
  /* stylelint-disable-line no-invalid-position-at-import-rule */
9260
- .exp-user-profile-avatar--light {
9233
+ .c4p--user-profile-image--light {
9261
9234
  color: var(--cds-ui-01, #f4f4f4);
9262
9235
  }
9263
9236
 
9264
- .exp-user-profile-avatar--light.exp-user-profile-avatar--light-cyan {
9237
+ .c4p--user-profile-image--light.c4p--user-profile-image--light-cyan {
9265
9238
  background-color: #0072c3;
9266
9239
  }
9267
9240
 
9268
- .exp-user-profile-avatar--light.exp-user-profile-avatar--dark-cyan {
9241
+ .c4p--user-profile-image--light.c4p--user-profile-image--dark-cyan {
9269
9242
  background-color: #003a6d;
9270
9243
  }
9271
9244
 
9272
- .exp-user-profile-avatar--light.exp-user-profile-avatar--light-gray {
9245
+ .c4p--user-profile-image--light.c4p--user-profile-image--light-gray {
9273
9246
  background-color: #6f6f6f;
9274
9247
  }
9275
9248
 
9276
- .exp-user-profile-avatar--light.exp-user-profile-avatar--dark-gray {
9249
+ .c4p--user-profile-image--light.c4p--user-profile-image--dark-gray {
9277
9250
  background-color: #393939;
9278
9251
  }
9279
9252
 
9280
- .exp-user-profile-avatar--light.exp-user-profile-avatar--light-green {
9253
+ .c4p--user-profile-image--light.c4p--user-profile-image--light-green {
9281
9254
  background-color: #198038;
9282
9255
  }
9283
9256
 
9284
- .exp-user-profile-avatar--light.exp-user-profile-avatar--dark-green {
9257
+ .c4p--user-profile-image--light.c4p--user-profile-image--dark-green {
9285
9258
  background-color: #044317;
9286
9259
  }
9287
9260
 
9288
- .exp-user-profile-avatar--light.exp-user-profile-avatar--light-magenta {
9261
+ .c4p--user-profile-image--light.c4p--user-profile-image--light-magenta {
9289
9262
  background-color: #d02670;
9290
9263
  }
9291
9264
 
9292
- .exp-user-profile-avatar--light.exp-user-profile-avatar--dark-magenta {
9265
+ .c4p--user-profile-image--light.c4p--user-profile-image--dark-magenta {
9293
9266
  background-color: #740937;
9294
9267
  }
9295
9268
 
9296
- .exp-user-profile-avatar--light.exp-user-profile-avatar--light-purple {
9269
+ .c4p--user-profile-image--light.c4p--user-profile-image--light-purple {
9297
9270
  background-color: #8a3ffc;
9298
9271
  }
9299
9272
 
9300
- .exp-user-profile-avatar--light.exp-user-profile-avatar--dark-purple {
9273
+ .c4p--user-profile-image--light.c4p--user-profile-image--dark-purple {
9301
9274
  background-color: #491d8b;
9302
9275
  }
9303
9276
 
9304
- .exp-user-profile-avatar--light.exp-user-profile-avatar--light-teal {
9277
+ .c4p--user-profile-image--light.c4p--user-profile-image--light-teal {
9305
9278
  background-color: #007d79;
9306
9279
  }
9307
9280
 
9308
- .exp-user-profile-avatar--light.exp-user-profile-avatar--dark-teal {
9281
+ .c4p--user-profile-image--light.c4p--user-profile-image--dark-teal {
9309
9282
  background-color: #004144;
9310
9283
  }
9311
9284
 
9312
- .exp-user-profile-avatar--dark {
9285
+ .c4p--user-profile-image--dark {
9313
9286
  color: var(--cds-ui-01, #f4f4f4);
9314
9287
  }
9315
9288
 
9316
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--light-cyan {
9289
+ .c4p--user-profile-image--dark.c4p--user-profile-image--light-cyan {
9317
9290
  background-color: #1192e8;
9318
9291
  }
9319
9292
 
9320
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--dark-cyan {
9293
+ .c4p--user-profile-image--dark.c4p--user-profile-image--dark-cyan {
9321
9294
  background-color: #82cfff;
9322
9295
  }
9323
9296
 
9324
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--light-gray {
9297
+ .c4p--user-profile-image--dark.c4p--user-profile-image--light-gray {
9325
9298
  background-color: #8d8d8d;
9326
9299
  }
9327
9300
 
9328
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--dark-gray {
9301
+ .c4p--user-profile-image--dark.c4p--user-profile-image--dark-gray {
9329
9302
  background-color: #c6c6c6;
9330
9303
  }
9331
9304
 
9332
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--light-green {
9305
+ .c4p--user-profile-image--dark.c4p--user-profile-image--light-green {
9333
9306
  background-color: #24a148;
9334
9307
  }
9335
9308
 
9336
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--dark-green {
9309
+ .c4p--user-profile-image--dark.c4p--user-profile-image--dark-green {
9337
9310
  background-color: #6fdc8c;
9338
9311
  }
9339
9312
 
9340
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--light-magenta {
9313
+ .c4p--user-profile-image--dark.c4p--user-profile-image--light-magenta {
9341
9314
  background-color: #ee5396;
9342
9315
  }
9343
9316
 
9344
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--dark-magenta {
9317
+ .c4p--user-profile-image--dark.c4p--user-profile-image--dark-magenta {
9345
9318
  background-color: #ffafd2;
9346
9319
  }
9347
9320
 
9348
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--light-purple {
9321
+ .c4p--user-profile-image--dark.c4p--user-profile-image--light-purple {
9349
9322
  background-color: #a56eff;
9350
9323
  }
9351
9324
 
9352
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--dark-purple {
9325
+ .c4p--user-profile-image--dark.c4p--user-profile-image--dark-purple {
9353
9326
  background-color: #d4bbff;
9354
9327
  }
9355
9328
 
9356
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--light-teal {
9329
+ .c4p--user-profile-image--dark.c4p--user-profile-image--light-teal {
9357
9330
  background-color: #009d9a;
9358
9331
  }
9359
9332
 
9360
- .exp-user-profile-avatar--dark.exp-user-profile-avatar--dark-teal {
9333
+ .c4p--user-profile-image--dark.c4p--user-profile-image--dark-teal {
9361
9334
  background-color: #3ddbd9;
9362
9335
  }
9363
9336
 
9364
- .exp-user-profile-avatar {
9337
+ .c4p--user-profile-image {
9365
9338
  display: flex;
9366
9339
  flex-direction: column;
9367
9340
  align-items: center;
@@ -9370,41 +9343,41 @@
9370
9343
  text-transform: uppercase;
9371
9344
  }
9372
9345
 
9373
- .bx--tooltip__trigger .exp-user-profile-avatar svg {
9346
+ .bx--tooltip__trigger .c4p--user-profile-image svg {
9374
9347
  fill: var(--cds-ui-01, #f4f4f4);
9375
9348
  }
9376
9349
 
9377
- .exp-user-profile-avatar__photo {
9350
+ .c4p--user-profile-image__photo {
9378
9351
  width: 100%;
9379
9352
  border-radius: 100%;
9380
9353
  }
9381
9354
 
9382
- .exp-user-profile-avatar__photo--xlg {
9355
+ .c4p--user-profile-image__photo--xlg {
9383
9356
  width: var(--cds-spacing-10, 4rem);
9384
9357
  height: var(--cds-spacing-10, 4rem);
9385
9358
  }
9386
9359
 
9387
- .exp-user-profile-avatar__photo--lg {
9360
+ .c4p--user-profile-image__photo--lg {
9388
9361
  width: var(--cds-spacing-07, 2rem);
9389
9362
  height: var(--cds-spacing-07, 2rem);
9390
9363
  }
9391
9364
 
9392
- .exp-user-profile-avatar__photo--md {
9365
+ .c4p--user-profile-image__photo--md {
9393
9366
  width: var(--cds-spacing-06, 1.5rem);
9394
9367
  height: var(--cds-spacing-06, 1.5rem);
9395
9368
  }
9396
9369
 
9397
- .exp-user-profile-avatar__photo--sm {
9370
+ .c4p--user-profile-image__photo--sm {
9398
9371
  width: calc(var(--cds-spacing-05, 1rem) + var(--cds-spacing-02, 0.25rem));
9399
9372
  height: calc(var(--cds-spacing-05, 1rem) + var(--cds-spacing-02, 0.25rem));
9400
9373
  }
9401
9374
 
9402
- .exp-user-profile-avatar__photo--xs {
9375
+ .c4p--user-profile-image__photo--xs {
9403
9376
  width: var(--cds-spacing-05, 1rem);
9404
9377
  height: var(--cds-spacing-05, 1rem);
9405
9378
  }
9406
9379
 
9407
- .exp-user-profile-avatar--xlg {
9380
+ .c4p--user-profile-image--xlg {
9408
9381
  width: var(--cds-spacing-10, 4rem);
9409
9382
  height: var(--cds-spacing-10, 4rem);
9410
9383
  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
@@ -9413,7 +9386,7 @@
9413
9386
  letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
9414
9387
  }
9415
9388
 
9416
- .exp-user-profile-avatar--lg {
9389
+ .c4p--user-profile-image--lg {
9417
9390
  width: var(--cds-spacing-07, 2rem);
9418
9391
  height: var(--cds-spacing-07, 2rem);
9419
9392
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
@@ -9422,7 +9395,7 @@
9422
9395
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
9423
9396
  }
9424
9397
 
9425
- .exp-user-profile-avatar--md {
9398
+ .c4p--user-profile-image--md {
9426
9399
  width: var(--cds-spacing-06, 1.5rem);
9427
9400
  height: var(--cds-spacing-06, 1.5rem);
9428
9401
  font-size: var(--cds-label-01-font-size, 0.75rem);
@@ -9432,7 +9405,7 @@
9432
9405
  font-weight: 600;
9433
9406
  }
9434
9407
 
9435
- .exp-user-profile-avatar--sm {
9408
+ .c4p--user-profile-image--sm {
9436
9409
  width: calc(var(--cds-spacing-05, 1rem) + var(--cds-spacing-02, 0.25rem));
9437
9410
  height: calc(var(--cds-spacing-05, 1rem) + var(--cds-spacing-02, 0.25rem));
9438
9411
  font-size: var(--cds-label-01-font-size, 0.75rem);
@@ -9442,7 +9415,7 @@
9442
9415
  font-weight: 600;
9443
9416
  }
9444
9417
 
9445
- .exp-user-profile-avatar--xs {
9418
+ .c4p--user-profile-image--xs {
9446
9419
  width: var(--cds-spacing-05, 1rem);
9447
9420
  height: var(--cds-spacing-05, 1rem);
9448
9421
  font-size: var(--cds-label-01-font-size, 0.75rem);
@@ -9628,32 +9601,32 @@
9628
9601
  stroke-dashoffset: 0;
9629
9602
  }
9630
9603
  }
9631
- .exp--edit-side-panel .bx--form.exp--edit-side-panel__form {
9604
+ .c4p--edit-side-panel .bx--form.c4p--edit-side-panel__form {
9632
9605
  padding-top: var(--cds-spacing-05, 1rem);
9633
9606
  }
9634
- .exp--edit-side-panel .exp--edit-side-panel__form.bx--fieldset {
9607
+ .c4p--edit-side-panel .c4p--edit-side-panel__form.bx--fieldset {
9635
9608
  padding-top: var(--cds-spacing-03, 0.5rem);
9636
9609
  }
9637
- .exp--edit-side-panel .exp--edit-side-panel__form > * {
9610
+ .c4p--edit-side-panel .c4p--edit-side-panel__form > * {
9638
9611
  margin-bottom: var(--cds-spacing-05, 1rem);
9639
9612
  }
9640
- .exp--edit-side-panel .exp--edit-side-panel__form-title-text {
9613
+ .c4p--edit-side-panel .c4p--edit-side-panel__form-title-text {
9641
9614
  font-size: var(--cds-productive-heading-02-font-size, 1rem);
9642
9615
  font-weight: var(--cds-productive-heading-02-font-weight, 600);
9643
9616
  line-height: var(--cds-productive-heading-02-line-height, 1.375);
9644
9617
  letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
9645
9618
  padding-bottom: var(--cds-spacing-03, 0.5rem);
9646
9619
  }
9647
- .exp--edit-side-panel .exp--edit-side-panel__form-description-text {
9620
+ .c4p--edit-side-panel .c4p--edit-side-panel__form-description-text {
9648
9621
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
9649
9622
  font-weight: var(--cds-body-long-01-font-weight, 400);
9650
9623
  line-height: var(--cds-body-long-01-line-height, 1.42857);
9651
9624
  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
9652
9625
  }
9653
- .exp--edit-side-panel.exp--side-panel .bx--btn.exp--side-panel__close-button {
9626
+ .c4p--edit-side-panel.c4p--side-panel .bx--btn.c4p--side-panel__close-button {
9654
9627
  display: none;
9655
9628
  }
9656
- .exp--edit-side-panel .exp--side-panel .exp--edit-side-panel__actions-container {
9629
+ .c4p--edit-side-panel .c4p--side-panel .c4p--edit-side-panel__actions-container {
9657
9630
  position: absolute;
9658
9631
  z-index: 4;
9659
9632
  bottom: 0;
@@ -9672,26 +9645,26 @@
9672
9645
  /* stylelint-disable-line no-invalid-position-at-import-rule */
9673
9646
  /* stylelint-disable-line no-invalid-position-at-import-rule */
9674
9647
  /* stylelint-disable-line no-invalid-position-at-import-rule */
9675
- .exp--options-tile {
9648
+ .c4p--options-tile {
9676
9649
  border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
9677
9650
  background-color: var(--cds-ui-01, #f4f4f4);
9678
9651
  }
9679
9652
 
9680
- .exp--options-tile__toggle-container {
9653
+ .c4p--options-tile__toggle-container {
9681
9654
  position: relative;
9682
9655
  }
9683
9656
 
9684
- .exp--options-tile__toggle {
9657
+ .c4p--options-tile__toggle {
9685
9658
  position: absolute;
9686
9659
  right: var(--cds-spacing-05, 1rem);
9687
9660
  }
9688
9661
 
9689
- .exp--options-tile__toggle .bx--toggle-input__label .bx--toggle__switch {
9662
+ .c4p--options-tile__toggle .bx--toggle-input__label .bx--toggle__switch {
9690
9663
  margin: 0;
9691
9664
  }
9692
9665
 
9693
- .exp--options-tile__header,
9694
- .exp--options-tile__static-content {
9666
+ .c4p--options-tile__header,
9667
+ .c4p--options-tile__static-content {
9695
9668
  display: grid;
9696
9669
  box-sizing: border-box;
9697
9670
  align-items: center;
@@ -9699,31 +9672,31 @@
9699
9672
  grid-template-columns: 3rem 1fr 1rem;
9700
9673
  }
9701
9674
 
9702
- .exp--options-tile__header {
9675
+ .c4p--options-tile__header {
9703
9676
  background-color: transparent;
9704
9677
  cursor: pointer;
9705
9678
  transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
9706
9679
  }
9707
9680
 
9708
- .exp--options-tile__header:hover {
9681
+ .c4p--options-tile__header:hover {
9709
9682
  background-color: var(--cds-hover-ui, #e5e5e5);
9710
9683
  }
9711
9684
 
9712
- .exp--options-tile__header:focus {
9685
+ .c4p--options-tile__header:focus {
9713
9686
  outline: 2px solid var(--cds-focus, #0f62fe);
9714
9687
  outline-offset: -2px;
9715
9688
  }
9716
9689
  @media screen and (prefers-contrast) {
9717
- .exp--options-tile__header:focus {
9690
+ .c4p--options-tile__header:focus {
9718
9691
  outline-style: dotted;
9719
9692
  }
9720
9693
  }
9721
9694
 
9722
- .exp--options-tile__title {
9695
+ .c4p--options-tile__title {
9723
9696
  grid-column: 2;
9724
9697
  }
9725
9698
 
9726
- .exp--options-tile__heading {
9699
+ .c4p--options-tile__heading {
9727
9700
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
9728
9701
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
9729
9702
  line-height: var(--cds-productive-heading-01-line-height, 1.28572);
@@ -9731,7 +9704,7 @@
9731
9704
  color: var(--cds-text-01, #161616);
9732
9705
  }
9733
9706
 
9734
- .exp--options-tile__summary {
9707
+ .c4p--options-tile__summary {
9735
9708
  font-size: var(--cds-helper-text-01-font-size, 0.75rem);
9736
9709
  line-height: var(--cds-helper-text-01-line-height, 1.33333);
9737
9710
  letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
@@ -9745,71 +9718,71 @@
9745
9718
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
9746
9719
  }
9747
9720
 
9748
- .exp--options-tile__summary--invalid,
9749
- .exp--options-tile__summary--warn,
9750
- .exp--options-tile__summary--locked {
9721
+ .c4p--options-tile__summary--invalid,
9722
+ .c4p--options-tile__summary--warn,
9723
+ .c4p--options-tile__summary--locked {
9751
9724
  column-gap: var(--cds-spacing-02, 0.25rem);
9752
9725
  grid-template-columns: 1rem 1fr;
9753
9726
  }
9754
9727
 
9755
- .exp--options-tile__summary--invalid {
9728
+ .c4p--options-tile__summary--invalid {
9756
9729
  color: var(--cds-support-01, #da1e28);
9757
9730
  }
9758
9731
 
9759
- .exp--options-tile__summary--warn {
9732
+ .c4p--options-tile__summary--warn {
9760
9733
  color: var(--cds-text-01, #161616);
9761
9734
  }
9762
9735
 
9763
- .exp--options-tile__summary--warn svg {
9736
+ .c4p--options-tile__summary--warn svg {
9764
9737
  color: var(--cds-support-03, #f1c21b);
9765
9738
  }
9766
9739
 
9767
- .exp--options-tile__summary--warn svg path[fill=none] {
9740
+ .c4p--options-tile__summary--warn svg path[fill=none] {
9768
9741
  fill: #000000;
9769
9742
  }
9770
9743
 
9771
- .exp--options-tile__summary-text {
9744
+ .c4p--options-tile__summary-text {
9772
9745
  overflow: hidden;
9773
9746
  height: max-content;
9774
9747
  text-overflow: ellipsis;
9775
9748
  white-space: nowrap;
9776
9749
  }
9777
9750
 
9778
- .exp--options-tile__chevron {
9751
+ .c4p--options-tile__chevron {
9779
9752
  justify-self: center;
9780
9753
  transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
9781
9754
  }
9782
9755
 
9783
- .exp--options-tile__content {
9756
+ .c4p--options-tile__content {
9784
9757
  padding-right: var(--cds-spacing-05, 1rem);
9785
9758
  padding-left: calc(var(--cds-spacing-05, 1rem) * 2 + 1rem);
9786
9759
  }
9787
9760
 
9788
- .exp--options-tile__content > .bx--fieldset > .bx--label:empty {
9761
+ .c4p--options-tile__content > .bx--fieldset > .bx--label:empty {
9789
9762
  display: none;
9790
9763
  }
9791
9764
 
9792
- .exp--options-tile--closing .exp--options-tile__content {
9765
+ .c4p--options-tile--closing .c4p--options-tile__content {
9793
9766
  overflow: hidden;
9794
9767
  }
9795
9768
 
9796
- .exp--options-tile:not(.exp--options-tile--closing) > details[open] .exp--options-tile__summary,
9797
- .exp--options-tile__summary--hidden {
9769
+ .c4p--options-tile:not(.c4p--options-tile--closing) > details[open] .c4p--options-tile__summary,
9770
+ .c4p--options-tile__summary--hidden {
9798
9771
  height: 0;
9799
9772
  margin-top: 0;
9800
9773
  opacity: 0;
9801
9774
  }
9802
9775
 
9803
- .exp--options-tile:not(.exp--options-tile--closing) > details[open] .exp--options-tile__chevron {
9776
+ .c4p--options-tile:not(.c4p--options-tile--closing) > details[open] .c4p--options-tile__chevron {
9804
9777
  transform: rotate(180deg);
9805
9778
  }
9806
9779
 
9807
- .exp--options-tile > details[open] .exp--options-tile__content {
9780
+ .c4p--options-tile > details[open] .c4p--options-tile__content {
9808
9781
  padding-top: var(--cds-spacing-03, 0.5rem);
9809
9782
  padding-bottom: var(--cds-spacing-06, 1.5rem);
9810
9783
  }
9811
9784
 
9812
- .exp--options-tile__locked-text {
9785
+ .c4p--options-tile__locked-text {
9813
9786
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
9814
9787
  font-weight: var(--cds-body-long-01-font-weight, 400);
9815
9788
  line-height: var(--cds-body-long-01-line-height, 1.42857);
@@ -9820,43 +9793,43 @@
9820
9793
  color: var(--cds-text-02, #525252);
9821
9794
  }
9822
9795
 
9823
- .exp--options-tile__locked-text > svg {
9796
+ .c4p--options-tile__locked-text > svg {
9824
9797
  margin-right: var(--cds-spacing-02, 0.25rem);
9825
9798
  }
9826
9799
 
9827
- .exp--options-tile--lg .exp--options-tile__header,
9828
- .exp--options-tile--lg .exp--options-tile__static-content {
9800
+ .c4p--options-tile--lg .c4p--options-tile__header,
9801
+ .c4p--options-tile--lg .c4p--options-tile__static-content {
9829
9802
  height: 3rem;
9830
9803
  }
9831
9804
 
9832
- .exp--options-tile--xl .exp--options-tile__header,
9833
- .exp--options-tile--xl .exp--options-tile__static-content {
9805
+ .c4p--options-tile--xl .c4p--options-tile__header,
9806
+ .c4p--options-tile--xl .c4p--options-tile__static-content {
9834
9807
  height: 4rem;
9835
9808
  }
9836
9809
 
9837
- .exp--options-tile--lg .exp--options-tile__toggle {
9810
+ .c4p--options-tile--lg .c4p--options-tile__toggle {
9838
9811
  top: 1rem;
9839
9812
  }
9840
9813
 
9841
- .exp--options-tile--xl .exp--options-tile__toggle {
9814
+ .c4p--options-tile--xl .c4p--options-tile__toggle {
9842
9815
  top: 1.5rem;
9843
9816
  }
9844
9817
 
9845
- .exp--options-tile--lg .exp--options-tile__summary {
9818
+ .c4p--options-tile--lg .c4p--options-tile__summary {
9846
9819
  margin-top: var(--cds-spacing-01, 0.125rem);
9847
9820
  }
9848
9821
 
9849
- .exp--options-tile--lg .exp--options-tile__summary-text {
9822
+ .c4p--options-tile--lg .c4p--options-tile__summary-text {
9850
9823
  padding-right: calc(var(--cds-spacing-05, 1rem) + 1rem);
9851
9824
  }
9852
9825
 
9853
- .exp--options-tile--xl .exp--options-tile__summary-text {
9826
+ .c4p--options-tile--xl .c4p--options-tile__summary-text {
9854
9827
  padding-right: calc(var(--cds-spacing-05, 1rem) + 2rem);
9855
9828
  }
9856
9829
 
9857
9830
  @media (prefers-reduced-motion: reduce) {
9858
- .exp--options-tile__summary,
9859
- .exp--options-tile__chevron {
9831
+ .c4p--options-tile__summary,
9832
+ .c4p--options-tile__chevron {
9860
9833
  transition: none;
9861
9834
  }
9862
9835
  }