@carbon/ibm-products 0.99.1 → 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (45) hide show
  1. package/css/index-full-carbon.css +895 -922
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +8 -8
  4. package/css/index-without-carbon-released-only.css +808 -796
  5. package/css/index-without-carbon-released-only.css.map +1 -1
  6. package/css/index-without-carbon-released-only.min.css +8 -8
  7. package/css/index-without-carbon.css +895 -922
  8. package/css/index-without-carbon.css.map +1 -1
  9. package/css/index-without-carbon.min.css +8 -8
  10. package/css/index.css +895 -922
  11. package/css/index.css.map +1 -1
  12. package/css/index.min.css +8 -8
  13. package/es/components/ActionBar/ActionBar.js +11 -36
  14. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +42 -115
  15. package/es/components/CreateSidePanel/CreateSidePanel.js +5 -17
  16. package/es/components/PageHeader/PageHeader.js +17 -100
  17. package/es/components/SidePanel/SidePanel.js +13 -28
  18. package/es/components/Tearsheet/Tearsheet.js +1 -10
  19. package/es/components/Tearsheet/TearsheetNarrow.js +1 -10
  20. package/es/components/Tearsheet/TearsheetShell.js +0 -10
  21. package/es/components/UserProfileImage/UserProfileImage.js +1 -1
  22. package/es/components/index.js +0 -1
  23. package/es/global/js/package-settings.js +1 -2
  24. package/lib/components/ActionBar/ActionBar.js +11 -37
  25. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +44 -116
  26. package/lib/components/CreateSidePanel/CreateSidePanel.js +5 -19
  27. package/lib/components/PageHeader/PageHeader.js +16 -99
  28. package/lib/components/SidePanel/SidePanel.js +13 -29
  29. package/lib/components/Tearsheet/Tearsheet.js +0 -9
  30. package/lib/components/Tearsheet/TearsheetNarrow.js +0 -9
  31. package/lib/components/Tearsheet/TearsheetShell.js +0 -11
  32. package/lib/components/UserProfileImage/UserProfileImage.js +1 -1
  33. package/lib/components/index.js +0 -8
  34. package/lib/global/js/package-settings.js +1 -2
  35. package/package.json +2 -2
  36. package/scss/components/PageHeader/_page-header.scss +26 -5
  37. package/scss/components/UserProfileImage/_user-profile-image.scss +2 -2
  38. package/scss/components/_index.scss +0 -1
  39. package/scss/global/styles/_project-settings.scss +1 -1
  40. package/es/components/ContextHeader/ContextHeader.js +0 -46
  41. package/es/components/ContextHeader/index.js +0 -7
  42. package/lib/components/ContextHeader/ContextHeader.js +0 -62
  43. package/lib/components/ContextHeader/index.js +0 -15
  44. package/scss/components/ContextHeader/_context-header.scss +0 -43
  45. package/scss/components/ContextHeader/_index.scss +0 -8
@@ -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
  }