@carbon/ibm-products 1.2.3 → 1.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (115) hide show
  1. package/css/index-full-carbon.css +538 -273
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +2 -2
  4. package/css/index-without-carbon-released-only.css +32 -41
  5. package/css/index-without-carbon-released-only.css.map +1 -1
  6. package/css/index-without-carbon-released-only.min.css +2 -2
  7. package/css/index-without-carbon.css +269 -41
  8. package/css/index-without-carbon.css.map +1 -1
  9. package/css/index-without-carbon.min.css +2 -2
  10. package/css/index.css +491 -41
  11. package/css/index.css.map +1 -1
  12. package/css/index.min.css +2 -2
  13. package/es/components/APIKeyModal/APIKeyModal.js +25 -29
  14. package/es/components/ActionBar/ActionBar.js +4 -1
  15. package/es/components/AddSelect/AddSelect.js +157 -0
  16. package/es/components/AddSelect/index.js +7 -0
  17. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +19 -15
  18. package/es/components/CancelableTextEdit/CancelableTextEdit.js +245 -0
  19. package/es/components/{CreateTearsheet/constants.js → CancelableTextEdit/index.js} +1 -2
  20. package/es/components/CreateFullPage/CreateFullPage.js +78 -259
  21. package/es/components/CreateFullPage/CreateFullPageStep.js +58 -14
  22. package/es/components/CreateFullPage/index.js +1 -2
  23. package/es/components/CreateInfluencer/CreateInfluencer.js +23 -225
  24. package/es/components/CreateTearsheet/CreateTearsheet.js +69 -146
  25. package/es/components/CreateTearsheet/CreateTearsheetStep.js +59 -16
  26. package/es/components/CreateTearsheet/index.js +0 -1
  27. package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +66 -27
  28. package/es/components/ExportModal/ExportModal.js +4 -2
  29. package/es/components/ImportModal/ImportModal.js +2 -1
  30. package/es/components/InlineEdit/InlineEdit.js +224 -0
  31. package/es/components/InlineEdit/index.js +7 -0
  32. package/es/components/MultiAddSelect/MultiAddSelect.js +16 -0
  33. package/es/components/MultiAddSelect/index.js +1 -0
  34. package/es/components/OptionsTile/OptionsTile.js +36 -15
  35. package/es/components/PageHeader/PageHeader.js +54 -33
  36. package/es/components/PageHeader/PageHeaderTitle.js +78 -7
  37. package/es/components/PageHeader/PageHeaderUtils.js +21 -2
  38. package/es/components/RemoveModal/RemoveModal.js +4 -2
  39. package/es/components/SingleAddSelect/SingleAddSelect.js +15 -0
  40. package/es/components/SingleAddSelect/index.js +1 -0
  41. package/es/components/TagSet/TagSet.js +4 -1
  42. package/es/components/Toolbar/Toolbar.js +69 -8
  43. package/es/components/index.js +5 -1
  44. package/es/global/js/hooks/useCreateComponentFocus.js +15 -19
  45. package/es/global/js/hooks/useCreateComponentStepChange.js +44 -74
  46. package/es/global/js/hooks/useValidCreateStepCount.js +4 -7
  47. package/es/global/js/package-settings.js +5 -1
  48. package/es/global/js/utils/story-helper.js +1 -1
  49. package/lib/components/APIKeyModal/APIKeyModal.js +25 -29
  50. package/lib/components/ActionBar/ActionBar.js +4 -1
  51. package/lib/components/AddSelect/AddSelect.js +178 -0
  52. package/lib/components/AddSelect/index.js +13 -0
  53. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +18 -14
  54. package/lib/components/CancelableTextEdit/CancelableTextEdit.js +265 -0
  55. package/lib/components/CancelableTextEdit/index.js +13 -0
  56. package/lib/components/CreateFullPage/CreateFullPage.js +78 -259
  57. package/lib/components/CreateFullPage/CreateFullPageStep.js +61 -14
  58. package/lib/components/CreateFullPage/index.js +1 -9
  59. package/lib/components/CreateInfluencer/CreateInfluencer.js +21 -236
  60. package/lib/components/CreateTearsheet/CreateTearsheet.js +71 -148
  61. package/lib/components/CreateTearsheet/CreateTearsheetStep.js +61 -15
  62. package/lib/components/CreateTearsheet/index.js +0 -8
  63. package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +67 -35
  64. package/lib/components/ExportModal/ExportModal.js +4 -2
  65. package/lib/components/ImportModal/ImportModal.js +2 -1
  66. package/lib/components/InlineEdit/InlineEdit.js +242 -0
  67. package/lib/components/InlineEdit/index.js +13 -0
  68. package/lib/components/MultiAddSelect/MultiAddSelect.js +37 -0
  69. package/lib/components/MultiAddSelect/index.js +13 -0
  70. package/lib/components/OptionsTile/OptionsTile.js +36 -15
  71. package/lib/components/PageHeader/PageHeader.js +54 -33
  72. package/lib/components/PageHeader/PageHeaderTitle.js +87 -9
  73. package/lib/components/PageHeader/PageHeaderUtils.js +21 -2
  74. package/lib/components/RemoveModal/RemoveModal.js +4 -2
  75. package/lib/components/SingleAddSelect/SingleAddSelect.js +36 -0
  76. package/lib/components/SingleAddSelect/index.js +13 -0
  77. package/lib/components/TagSet/TagSet.js +4 -1
  78. package/lib/components/Toolbar/Toolbar.js +69 -6
  79. package/lib/components/index.js +33 -1
  80. package/lib/global/js/hooks/useCreateComponentFocus.js +15 -19
  81. package/lib/global/js/hooks/useCreateComponentStepChange.js +44 -74
  82. package/lib/global/js/hooks/useValidCreateStepCount.js +4 -7
  83. package/lib/global/js/package-settings.js +5 -1
  84. package/lib/global/js/utils/story-helper.js +1 -1
  85. package/package.json +15 -15
  86. package/scss/components/AddSelect/_add-select.scss +84 -0
  87. package/scss/components/AddSelect/_index.scss +10 -0
  88. package/scss/components/AddSelect/_storybook-styles.scss +6 -0
  89. package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +19 -15
  90. package/scss/components/CancelableTextEdit/_cancelable-text-edit.scss +211 -0
  91. package/{es/components/CreateFullPage/constants.js → scss/components/CancelableTextEdit/_index.scss} +2 -2
  92. package/scss/components/CancelableTextEdit/_storybook-styles.scss +15 -0
  93. package/scss/components/CreateFullPage/_create-full-page.scss +4 -11
  94. package/scss/components/CreateTearsheet/_create-tearsheet.scss +4 -8
  95. package/scss/components/InlineEdit/_index.scss +8 -0
  96. package/scss/components/InlineEdit/_inline-edit.scss +44 -0
  97. package/scss/components/InlineEdit/_storybook-styles.scss +15 -0
  98. package/scss/components/MultiAddSelect/_index.scss +1 -0
  99. package/scss/components/MultiAddSelect/_multi-add-select.scss +1 -0
  100. package/scss/components/MultiAddSelect/_storybook-styles.scss +6 -0
  101. package/scss/components/PageHeader/_page-header.scss +14 -4
  102. package/scss/components/SingleAddSelect/_index.scss +1 -0
  103. package/scss/components/SingleAddSelect/_single-add-select.scss +1 -0
  104. package/scss/components/SingleAddSelect/_storybook-styles.scss +6 -0
  105. package/scss/components/_index.scss +4 -0
  106. package/es/components/CreateFullPage/CreateFullPageSection.js +0 -53
  107. package/es/components/CreateTearsheet/CreateTearsheetSection.js +0 -83
  108. package/es/components/CreateTearsheet/preview-components/MultiStepWithSectionsTearsheet.js +0 -327
  109. package/es/global/js/utils/hasValidType.js +0 -94
  110. package/lib/components/CreateFullPage/CreateFullPageSection.js +0 -74
  111. package/lib/components/CreateFullPage/constants.js +0 -16
  112. package/lib/components/CreateTearsheet/CreateTearsheetSection.js +0 -105
  113. package/lib/components/CreateTearsheet/constants.js +0 -17
  114. package/lib/components/CreateTearsheet/preview-components/MultiStepWithSectionsTearsheet.js +0 -354
  115. package/lib/global/js/utils/hasValidType.js +0 -110
@@ -11755,20 +11755,14 @@ a.bx--overflow-menu-options__btn::before {
11755
11755
  margin-left: 0;
11756
11756
  }
11757
11757
 
11758
- .c4p--create-full-page .c4p--create-full-page__step--hidden-step,
11759
- .c4p--create-full-page .c4p--create-full-page__step--hidden-section {
11758
+ .c4p--create-full-page .c4p--create-full-page__step__step--hidden-step {
11760
11759
  display: none;
11761
11760
  }
11762
11761
 
11763
- .c4p--create-full-page .c4p--create-full-page__step--visible-section {
11762
+ .c4p--create-full-page .c4p--create-full-page__step__step--visible-step {
11764
11763
  display: block;
11765
11764
  }
11766
11765
 
11767
- .c4p--create-full-page .c4p--create-full-page__step--visible-step {
11768
- opacity: 1;
11769
- }
11770
-
11771
- .c4p--create-full-page .c4p--create-full-page__section-subtitle,
11772
11766
  .c4p--create-full-page .c4p--create-full-page__step-subtitle {
11773
11767
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
11774
11768
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
@@ -11778,7 +11772,6 @@ a.bx--overflow-menu-options__btn::before {
11778
11772
  margin-bottom: var(--cds-spacing-03, 0.5rem);
11779
11773
  }
11780
11774
 
11781
- .c4p--create-full-page .c4p--create-full-page__section-description,
11782
11775
  .c4p--create-full-page .c4p--create-full-page__step-description {
11783
11776
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
11784
11777
  font-weight: var(--cds-body-long-01-font-weight, 400);
@@ -11866,8 +11859,7 @@ a.bx--overflow-menu-options__btn::before {
11866
11859
  content: "";
11867
11860
  }
11868
11861
 
11869
- .c4p--create-full-page .c4p--create-full-page__step-title,
11870
- .c4p--create-full-page .c4p--create-full-page__section-title {
11862
+ .c4p--create-full-page .c4p--create-full-page__step-title {
11871
11863
  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
11872
11864
  font-weight: var(--cds-productive-heading-04-font-weight, 400);
11873
11865
  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
@@ -14172,16 +14164,11 @@ a.bx--side-nav__link--current::before {
14172
14164
  --c4p--tearsheet-create--total-width: 0;
14173
14165
  }
14174
14166
 
14175
- .c4p--tearsheet-create .c4p--tearsheet-create__step--hidden-step,
14176
- .c4p--tearsheet-create .c4p--tearsheet-create__step--hidden-section {
14167
+ .c4p--tearsheet-create .c4p--tearsheet-create__step__step--hidden-step {
14177
14168
  display: none;
14178
14169
  }
14179
14170
 
14180
- .c4p--tearsheet-create .c4p--tearsheet-create__step--visible-section {
14181
- display: block;
14182
- }
14183
-
14184
- .c4p--tearsheet-create .c4p--tearsheet-create__step--visible-step {
14171
+ .c4p--tearsheet-create .c4p--tearsheet-create__step__step--visible-step {
14185
14172
  animation: 400ms stepContentEntrance;
14186
14173
  animation-fill-mode: forwards;
14187
14174
  animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
@@ -14189,7 +14176,7 @@ a.bx--side-nav__link--current::before {
14189
14176
  }
14190
14177
 
14191
14178
  @media (prefers-reduced-motion) {
14192
- .c4p--tearsheet-create .c4p--tearsheet-create__step--visible-step {
14179
+ .c4p--tearsheet-create .c4p--tearsheet-create__step__step--visible-step {
14193
14180
  animation: none;
14194
14181
  opacity: 1;
14195
14182
  }
@@ -16375,6 +16362,305 @@ a.bx--side-nav__link--current::before {
16375
16362
  padding: 0;
16376
16363
  }
16377
16364
 
16365
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
16366
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
16367
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
16368
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
16369
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
16370
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
16371
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
16372
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
16373
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
16374
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
16375
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
16376
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
16377
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
16378
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
16379
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
16380
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
16381
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
16382
+ .bx--structured-list--selection .bx--structured-list-td,
16383
+ .bx--structured-list--selection .bx--structured-list-th {
16384
+ padding-right: 1rem;
16385
+ padding-left: 1rem;
16386
+ }
16387
+ .bx--structured-list--selection .bx--structured-list-td:first-child,
16388
+ .bx--structured-list--selection .bx--structured-list-th:first-child {
16389
+ padding-right: 1rem;
16390
+ padding-left: 1rem;
16391
+ }
16392
+
16393
+ .bx--structured-list-input {
16394
+ display: none;
16395
+ }
16396
+
16397
+ .bx--structured-list {
16398
+ box-sizing: border-box;
16399
+ padding: 0;
16400
+ border: 0;
16401
+ margin: 0;
16402
+ font-family: inherit;
16403
+ font-size: 100%;
16404
+ vertical-align: baseline;
16405
+ display: table;
16406
+ width: 100%;
16407
+ margin-bottom: 5rem;
16408
+ background-color: transparent;
16409
+ border-collapse: collapse;
16410
+ border-spacing: 0;
16411
+ overflow-x: auto;
16412
+ overflow-y: hidden;
16413
+ }
16414
+ .bx--structured-list *,
16415
+ .bx--structured-list *::before,
16416
+ .bx--structured-list *::after {
16417
+ box-sizing: inherit;
16418
+ }
16419
+ .bx--structured-list.bx--structured-list--condensed .bx--structured-list-td, .bx--structured-list.bx--structured-list--condensed .bx--structured-list-th {
16420
+ padding: 0.5rem;
16421
+ }
16422
+ .bx--structured-list .bx--structured-list-row .bx--structured-list-td:first-of-type,
16423
+ .bx--structured-list .bx--structured-list-row .bx--structured-list-th:first-of-type {
16424
+ padding-left: 1rem;
16425
+ }
16426
+ .bx--structured-list.bx--structured-list--flush .bx--structured-list-row .bx--structured-list-td, .bx--structured-list.bx--structured-list--flush .bx--structured-list-row .bx--structured-list-th, .bx--structured-list.bx--structured-list--flush .bx--structured-list-row .bx--structured-list-td:first-of-type, .bx--structured-list.bx--structured-list--flush .bx--structured-list-row .bx--structured-list-th:first-of-type {
16427
+ padding-right: 1rem;
16428
+ padding-left: 0;
16429
+ }
16430
+
16431
+ .bx--structured-list-row {
16432
+ display: table-row;
16433
+ border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
16434
+ transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
16435
+ }
16436
+
16437
+ .bx--structured-list--selection .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row):not(.bx--structured-list-row--selected) {
16438
+ border-bottom: 1px solid var(--cds-hover-row, #e5e5e5);
16439
+ background-color: var(--cds-hover-row, #e5e5e5);
16440
+ cursor: pointer;
16441
+ }
16442
+
16443
+ .bx--structured-list-row.bx--structured-list-row--selected {
16444
+ background-color: var(--cds-selected-ui, #e0e0e0);
16445
+ }
16446
+
16447
+ .bx--structured-list-row.bx--structured-list-row--header-row {
16448
+ border-bottom: 1px solid var(--cds-selected-ui, #e0e0e0);
16449
+ cursor: inherit;
16450
+ }
16451
+
16452
+ .bx--structured-list-row:focus:not(.bx--structured-list-row--header-row) {
16453
+ outline: 2px solid var(--cds-focus, #0f62fe);
16454
+ outline-offset: -2px;
16455
+ }
16456
+ @media screen and (prefers-contrast) {
16457
+ .bx--structured-list-row:focus:not(.bx--structured-list-row--header-row) {
16458
+ outline-style: dotted;
16459
+ }
16460
+ }
16461
+
16462
+ .bx--structured-list--selection .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row) > .bx--structured-list-td,
16463
+ .bx--structured-list-row.bx--structured-list-row--selected > .bx--structured-list-td {
16464
+ color: var(--cds-text-01, #161616);
16465
+ }
16466
+
16467
+ .bx--structured-list--selection .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row) > .bx--structured-list-td {
16468
+ border-top: 1px solid var(--cds-ui-01, #f4f4f4);
16469
+ }
16470
+
16471
+ .bx--structured-list-thead {
16472
+ display: table-header-group;
16473
+ vertical-align: middle;
16474
+ }
16475
+
16476
+ .bx--structured-list-th {
16477
+ box-sizing: border-box;
16478
+ padding: 0;
16479
+ border: 0;
16480
+ margin: 0;
16481
+ font-family: inherit;
16482
+ font-size: 100%;
16483
+ vertical-align: baseline;
16484
+ padding: 1rem 0.5rem 0.5rem 0.5rem;
16485
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
16486
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
16487
+ line-height: var(--cds-productive-heading-01-line-height, 1.28572);
16488
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
16489
+ display: table-cell;
16490
+ height: 2.5rem;
16491
+ color: var(--cds-text-01, #161616);
16492
+ font-weight: 600;
16493
+ text-align: left;
16494
+ text-transform: none;
16495
+ vertical-align: top;
16496
+ }
16497
+ .bx--structured-list-th *,
16498
+ .bx--structured-list-th *::before,
16499
+ .bx--structured-list-th *::after {
16500
+ box-sizing: inherit;
16501
+ }
16502
+
16503
+ .bx--structured-list-tbody {
16504
+ display: table-row-group;
16505
+ vertical-align: middle;
16506
+ }
16507
+
16508
+ .bx--structured-list-td {
16509
+ box-sizing: border-box;
16510
+ padding: 0;
16511
+ border: 0;
16512
+ margin: 0;
16513
+ font-family: inherit;
16514
+ font-size: 100%;
16515
+ vertical-align: baseline;
16516
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
16517
+ font-weight: var(--cds-body-long-01-font-weight, 400);
16518
+ line-height: var(--cds-body-long-01-line-height, 1.42857);
16519
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
16520
+ padding: 1rem 0.5rem 1.5rem 0.5rem;
16521
+ position: relative;
16522
+ display: table-cell;
16523
+ max-width: 36rem;
16524
+ color: var(--cds-text-02, #525252);
16525
+ transition: color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
16526
+ }
16527
+ .bx--structured-list-td *,
16528
+ .bx--structured-list-td *::before,
16529
+ .bx--structured-list-td *::after {
16530
+ box-sizing: inherit;
16531
+ }
16532
+
16533
+ .bx--structured-list-content--nowrap {
16534
+ white-space: nowrap;
16535
+ }
16536
+
16537
+ .bx--structured-list-svg {
16538
+ display: inline-block;
16539
+ fill: transparent;
16540
+ transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
16541
+ vertical-align: middle;
16542
+ }
16543
+
16544
+ .bx--structured-list-input:checked + .bx--structured-list-row .bx--structured-list-svg,
16545
+ .bx--structured-list-input:checked + .bx--structured-list-td .bx--structured-list-svg {
16546
+ fill: var(--cds-icon-01, #161616);
16547
+ }
16548
+
16549
+ .bx--structured-list.bx--skeleton .bx--structured-list-th:first-child {
16550
+ width: 8%;
16551
+ }
16552
+ .bx--structured-list.bx--skeleton .bx--structured-list-th:nth-child(3n+2) {
16553
+ width: 30%;
16554
+ }
16555
+ .bx--structured-list.bx--skeleton .bx--structured-list-th:nth-child(3n+3) {
16556
+ width: 15%;
16557
+ }
16558
+ .bx--structured-list.bx--skeleton span {
16559
+ position: relative;
16560
+ padding: 0;
16561
+ border: none;
16562
+ background: var(--cds-skeleton-01, #e5e5e5);
16563
+ box-shadow: none;
16564
+ pointer-events: none;
16565
+ display: block;
16566
+ width: 75%;
16567
+ height: 1rem;
16568
+ }
16569
+ .bx--structured-list.bx--skeleton span:hover, .bx--structured-list.bx--skeleton span:focus, .bx--structured-list.bx--skeleton span:active {
16570
+ border: none;
16571
+ cursor: default;
16572
+ outline: none;
16573
+ }
16574
+ .bx--structured-list.bx--skeleton span::before {
16575
+ position: absolute;
16576
+ top: 0;
16577
+ left: 0;
16578
+ width: 100%;
16579
+ height: 100%;
16580
+ animation: 3000ms ease-in-out skeleton infinite;
16581
+ background: var(--cds-skeleton-02, #c6c6c6);
16582
+ content: "";
16583
+ will-change: transform-origin, transform, opacity;
16584
+ }
16585
+ @media (prefers-reduced-motion: reduce) {
16586
+ .bx--structured-list.bx--skeleton span::before {
16587
+ animation: none;
16588
+ }
16589
+ }
16590
+
16591
+ .bx--structured-list.bx--structured-list--selection.bx--skeleton .bx--structured-list-th:first-child {
16592
+ width: 5%;
16593
+ }
16594
+ .bx--structured-list.bx--structured-list--selection.bx--skeleton .bx--structured-list-th:first-child span {
16595
+ display: none;
16596
+ }
16597
+
16598
+ @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
16599
+ .bx--structured-list-input:checked + .bx--structured-list-td .bx--structured-list-svg {
16600
+ fill: ButtonText;
16601
+ }
16602
+ }
16603
+
16604
+ .c4p--add-select__header {
16605
+ padding: var(--cds-spacing-05, 1rem);
16606
+ padding-bottom: 0;
16607
+ border-top: 1px solid var(--cds-ui-03, #e0e0e0);
16608
+ }
16609
+
16610
+ .c4p--add-select__body {
16611
+ padding: var(--cds-spacing-05, 1rem);
16612
+ }
16613
+
16614
+ .c4p--add-select__items-label {
16615
+ margin-right: var(--cds-spacing-03, 0.5rem);
16616
+ }
16617
+ .c4p--add-select__items-label-container {
16618
+ display: flex;
16619
+ align-items: center;
16620
+ margin-top: var(--cds-spacing-05, 1rem);
16621
+ margin-bottom: var(--cds-spacing-03, 0.5rem);
16622
+ }
16623
+
16624
+ .c4p--add-select__selections {
16625
+ border-top: 1px solid var(--cds-ui-03, #e0e0e0);
16626
+ }
16627
+
16628
+ .c4p--add-select__influencer-header {
16629
+ display: flex;
16630
+ padding: var(--cds-spacing-06, 1.5rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
16631
+ border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
16632
+ }
16633
+ .c4p--add-select__influencer-header .c4p--add-select__influencer-title {
16634
+ font-size: var(--cds-productive-heading-02-font-size, 1rem);
16635
+ font-weight: var(--cds-productive-heading-02-font-weight, 600);
16636
+ line-height: var(--cds-productive-heading-02-line-height, 1.375);
16637
+ letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
16638
+ }
16639
+
16640
+ .c4p--add-select__influencer-title {
16641
+ margin-right: var(--cds-spacing-03, 0.5rem);
16642
+ }
16643
+
16644
+ .c4p--add-select__influencer-body {
16645
+ padding: var(--cds-spacing-05, 1rem);
16646
+ }
16647
+
16648
+ .c4p--add-select .c4p--tearsheet .c4p--tearsheet__influencer {
16649
+ max-width: 29rem;
16650
+ flex: 0 0 50%;
16651
+ }
16652
+
16653
+ .c4p--add-select .c4p--add-select__items-label {
16654
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
16655
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
16656
+ line-height: var(--cds-productive-heading-01-line-height, 1.28572);
16657
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
16658
+ }
16659
+
16660
+ .c4p--add-select .bx--modal-container--sm .bx--modal-content p {
16661
+ padding-right: 0;
16662
+ }
16663
+
16378
16664
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16379
16665
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16380
16666
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -18053,14 +18339,9 @@ a.bx--side-nav__link--current::before {
18053
18339
  white-space: nowrap;
18054
18340
  }
18055
18341
  .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-container.c4p--breadcrumb-with-overflow__breadcrumb-container-with-items {
18056
- display: none;
18342
+ display: inline-flex;
18057
18343
  width: 100%;
18058
18344
  }
18059
- @media (min-width: 42rem) {
18060
- .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-container.c4p--breadcrumb-with-overflow__breadcrumb-container-with-items {
18061
- display: inline-flex;
18062
- }
18063
- }
18064
18345
  .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-container .bx--breadcrumb {
18065
18346
  width: 100%;
18066
18347
  flex-wrap: nowrap;
@@ -18075,11 +18356,24 @@ a.bx--side-nav__link--current::before {
18075
18356
  pointer-events: none;
18076
18357
  visibility: hidden;
18077
18358
  }
18359
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back {
18360
+ display: none;
18361
+ }
18362
+ @media (max-width: 41.98rem) {
18363
+ .c4p--breadcrumb-with-overflow .bx--breadcrumb-item {
18364
+ display: none;
18365
+ }
18366
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back,
18078
18367
  .c4p--breadcrumb-with-overflow .bx--breadcrumb-item:last-child {
18079
- display: inline;
18368
+ display: inline-flex;
18369
+ vertical-align: middle;
18370
+ }
18371
+ }
18372
+ .c4p--breadcrumb-with-overflow .bx--breadcrumb-item:last-child {
18373
+ display: inline-flex;
18080
18374
  }
18081
18375
  .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__displayed-breadcrumb:last-child {
18082
- display: inline;
18376
+ display: inline-flex;
18083
18377
  overflow: hidden;
18084
18378
  }
18085
18379
  .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__displayed-breadcrumb:last-child .bx--link {
@@ -18091,15 +18385,6 @@ a.bx--side-nav__link--current::before {
18091
18385
  .c4p--breadcrumb-with-overflow .bx--link {
18092
18386
  max-height: 18px;
18093
18387
  }
18094
- .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back-button.bx--btn.bx--btn--icon-only.bx--tooltip__trigger {
18095
- display: inline-flex;
18096
- margin-top: calc(-1 * var(--cds-spacing-04, 0.75rem));
18097
- }
18098
- @media (min-width: 42rem) {
18099
- .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back-button.bx--btn.bx--btn--icon-only.bx--tooltip__trigger {
18100
- display: none;
18101
- }
18102
- }
18103
18388
 
18104
18389
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18105
18390
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -18907,7 +19192,7 @@ a.bx--side-nav__link--current::before {
18907
19192
  height: var(--cds-spacing-02, 0.25rem);
18908
19193
  }
18909
19194
  .c4p--page-header .c4p--page-header__breadcrumb-row:not(.c4p--page-header__breadcrumb-row--has-action-bar) {
18910
- margin-bottom: calc(-1 * var(--cds-spacing-03, 0.5rem));
19195
+ min-height: var(--cds-spacing-07, 2rem);
18911
19196
  }
18912
19197
  .c4p--page-header .c4p--page-header__breadcrumb-row--container {
18913
19198
  display: flex;
@@ -18938,7 +19223,7 @@ a.bx--side-nav__link--current::before {
18938
19223
  transform: translateX(-50%) scaleX(1);
18939
19224
  transition: all 150ms ease-out;
18940
19225
  }
18941
- .c4p--page-header .c4p--page-header__breadcrumb-row--next-to-tabs::after,
19226
+ .c4p--page-header .c4p--page-header__breadcrumb-row--next-to-tabs:not(.c4p--page-header__has-page-actions-without-action-bar)::after,
18942
19227
  .c4p--page-header .c4p--page-header__breadcrumb-row--has-action-bar::after {
18943
19228
  /* creates a full width box shadow without causing scroll */
18944
19229
  box-shadow: 25vw 1px 0 0 var(--cds-ui-03, #e0e0e0), -25vw 1px 0 0 var(--cds-ui-03, #e0e0e0);
@@ -19126,8 +19411,6 @@ a.bx--side-nav__link--current::before {
19126
19411
  top: var(--c4p--page-header--breadcrumb-top);
19127
19412
  }
19128
19413
  .c4p--page-header .c4p--page-header__title-column {
19129
- overflow: hidden;
19130
- /* required for ellipsis in title */
19131
19414
  min-height: 40px;
19132
19415
  flex: 0 0 100%;
19133
19416
  }
@@ -19142,10 +19425,17 @@ a.bx--side-nav__link--current::before {
19142
19425
  font-weight: var(--cds-productive-heading-04-font-weight, 400);
19143
19426
  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
19144
19427
  letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
19145
- overflow: hidden;
19428
+ overflow-x: hidden;
19146
19429
  text-overflow: ellipsis;
19147
19430
  white-space: nowrap;
19148
19431
  }
19432
+ .c4p--page-header .c4p--page-header__title .c4p--inline-edit__value {
19433
+ transform: translateY(-2px);
19434
+ }
19435
+ .c4p--page-header .c4p--page-header__title--editable {
19436
+ display: flex;
19437
+ overflow: visible;
19438
+ }
19149
19439
  .c4p--page-header .c4p--page-header__title-skeleton {
19150
19440
  height: var(--cds-spacing-07, 2rem);
19151
19441
  }
@@ -19909,6 +20199,23 @@ a.bx--side-nav__link--current::before {
19909
20199
  /* stylelint-disable-line no-invalid-position-at-import-rule */
19910
20200
  /* stylelint-disable-line no-invalid-position-at-import-rule */
19911
20201
  /* stylelint-disable-line no-invalid-position-at-import-rule */
20202
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20203
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20204
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20205
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20206
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20207
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20208
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20209
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20210
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20211
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20212
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20213
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20214
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20215
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20216
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20217
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
20218
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
19912
20219
  @keyframes rotating {
19913
20220
  0% {
19914
20221
  transform: scaleY(-1) rotate(360deg);
@@ -22200,67 +22507,211 @@ a.bx--side-nav__link--current::before {
22200
22507
  margin-top: 0;
22201
22508
  opacity: 0;
22202
22509
  }
22203
-
22204
- .c4p--options-tile:not(.c4p--options-tile--closing) > details[open] .c4p--options-tile__chevron {
22205
- transform: rotate(180deg);
22510
+
22511
+ .c4p--options-tile:not(.c4p--options-tile--closing) > details[open] .c4p--options-tile__chevron {
22512
+ transform: rotate(180deg);
22513
+ }
22514
+
22515
+ .c4p--options-tile > details[open] .c4p--options-tile__content {
22516
+ padding-top: var(--cds-spacing-03, 0.5rem);
22517
+ padding-bottom: var(--cds-spacing-06, 1.5rem);
22518
+ }
22519
+
22520
+ .c4p--options-tile__locked-text {
22521
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
22522
+ font-weight: var(--cds-body-long-01-font-weight, 400);
22523
+ line-height: var(--cds-body-long-01-line-height, 1.42857);
22524
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
22525
+ display: inline-flex;
22526
+ align-items: center;
22527
+ margin-bottom: var(--cds-spacing-06, 1.5rem);
22528
+ color: var(--cds-text-02, #525252);
22529
+ }
22530
+
22531
+ .c4p--options-tile__locked-text > svg {
22532
+ margin-right: var(--cds-spacing-02, 0.25rem);
22533
+ }
22534
+
22535
+ .c4p--options-tile--lg .c4p--options-tile__header,
22536
+ .c4p--options-tile--lg .c4p--options-tile__static-content {
22537
+ height: 3rem;
22538
+ }
22539
+
22540
+ .c4p--options-tile--xl .c4p--options-tile__header,
22541
+ .c4p--options-tile--xl .c4p--options-tile__static-content {
22542
+ height: 4rem;
22543
+ }
22544
+
22545
+ .c4p--options-tile--lg .c4p--options-tile__toggle {
22546
+ top: 1rem;
22547
+ }
22548
+
22549
+ .c4p--options-tile--xl .c4p--options-tile__toggle {
22550
+ top: 1.5rem;
22551
+ }
22552
+
22553
+ .c4p--options-tile--lg .c4p--options-tile__summary {
22554
+ margin-top: var(--cds-spacing-01, 0.125rem);
22555
+ }
22556
+
22557
+ .c4p--options-tile--lg .c4p--options-tile__summary-text {
22558
+ padding-right: calc(var(--cds-spacing-05, 1rem) + 1rem);
22559
+ }
22560
+
22561
+ .c4p--options-tile--xl .c4p--options-tile__summary-text {
22562
+ padding-right: calc(var(--cds-spacing-05, 1rem) + 2rem);
22563
+ }
22564
+
22565
+ @media (prefers-reduced-motion: reduce) {
22566
+ .c4p--options-tile__summary,
22567
+ .c4p--options-tile__chevron {
22568
+ transition: none;
22569
+ }
22570
+ }
22571
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
22572
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
22573
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
22574
+ .c4p--cancelable-text-edit {
22575
+ --size: var(--cds-spacing-08, 2.5rem);
22576
+ --icon-size: var(--cds-spacing-05, 1rem);
22577
+ }
22578
+
22579
+ .c4p--cancelable-text-edit--sm {
22580
+ --size: var(--cds-spacing-07, 2rem);
22581
+ --icon-size: var(--cds-spacing-05, 1rem);
22582
+ }
22583
+
22584
+ .c4p--cancelable-text-edit--lg {
22585
+ --size: var(--cds-spacing-09, 3rem);
22586
+ --icon-size: var(--cds-spacing-05, 1rem);
22587
+ }
22588
+
22589
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__main {
22590
+ position: relative;
22591
+ display: inline-flex;
22592
+ min-height: var(--size);
22593
+ vertical-align: top;
22594
+ }
22595
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__input {
22596
+ height: var(--size);
22597
+ padding-right: calc(2 * var(--size));
22598
+ }
22599
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__buttons {
22600
+ position: absolute;
22601
+ top: 0;
22602
+ right: 0;
22603
+ display: flex;
22604
+ flex-direction: column;
22605
+ }
22606
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__buttons-inner {
22607
+ display: flex;
22608
+ }
22609
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert,
22610
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save {
22611
+ border: 1px solid transparent;
22612
+ }
22613
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert:hover,
22614
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save:hover {
22615
+ border-color: var(--cds-hover-field, #e5e5e5);
22616
+ border-bottom-color: transparent;
22617
+ background-clip: content-box;
22618
+ box-shadow: initial;
22619
+ outline: initial;
22620
+ }
22621
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert:focus:active, .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert:focus,
22622
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save:focus:active,
22623
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save:focus {
22624
+ border-color: var(--cds-focus, #0f62fe);
22625
+ box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
22626
+ outline: initial;
22627
+ }
22628
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert:focus:active:hover,
22629
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save:focus:active:hover {
22630
+ box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe), inset 0 0 0 2px var(--cds-field-01, #f4f4f4);
22631
+ }
22632
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert::before,
22633
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save::before {
22634
+ background-color: transparent;
22635
+ }
22636
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert[disabled],
22637
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save[disabled] {
22638
+ border-color: transparent;
22639
+ }
22640
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .c4p--cancelable-text-edit__save:hover,
22641
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .c4p--cancelable-text-edit__revert:hover {
22642
+ border: 1px solid transparent;
22643
+ box-shadow: inset 0 1px 0 var(--cds-support-01, #da1e28), inset 0 -1px 0 var(--cds-support-01, #da1e28);
22206
22644
  }
22207
-
22208
- .c4p--options-tile > details[open] .c4p--options-tile__content {
22209
- padding-top: var(--cds-spacing-03, 0.5rem);
22210
- padding-bottom: var(--cds-spacing-06, 1.5rem);
22645
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .c4p--cancelable-text-edit__save:hover {
22646
+ box-shadow: inset 0 1px 0 var(--cds-support-01, #da1e28), inset 0 -1px 0 var(--cds-support-01, #da1e28), inset -1px 0 0 var(--cds-support-01, #da1e28);
22211
22647
  }
22212
-
22213
- .c4p--options-tile__locked-text {
22214
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
22215
- font-weight: var(--cds-body-long-01-font-weight, 400);
22216
- line-height: var(--cds-body-long-01-line-height, 1.42857);
22217
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
22218
- display: inline-flex;
22648
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__revert,
22649
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save {
22650
+ border: 1px solid transparent;
22651
+ box-shadow: inset 0 1px 0 var(--cds-focus, #0f62fe), inset 0 -1px 0 var(--cds-focus, #0f62fe);
22652
+ }
22653
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__revert:hover,
22654
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save:hover {
22655
+ background-clip: content-box;
22656
+ }
22657
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save {
22658
+ box-shadow: inset 0 1px 0 var(--cds-focus, #0f62fe), inset 0 -1px 0 var(--cds-focus, #0f62fe), inset -1px 0 0 var(--cds-focus, #0f62fe);
22659
+ }
22660
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert,
22661
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save {
22662
+ display: flex;
22663
+ width: var(--size);
22664
+ height: var(--size);
22665
+ min-height: var(--size);
22666
+ flex-direction: column;
22219
22667
  align-items: center;
22220
- margin-bottom: var(--cds-spacing-06, 1.5rem);
22221
- color: var(--cds-text-02, #525252);
22668
+ justify-content: center;
22669
+ padding: 0;
22222
22670
  }
22223
-
22224
- .c4p--options-tile__locked-text > svg {
22225
- margin-right: var(--cds-spacing-02, 0.25rem);
22671
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert svg,
22672
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save svg {
22673
+ width: var(--icon-size);
22674
+ height: var(--icon-size);
22226
22675
  }
22227
-
22228
- .c4p--options-tile--lg .c4p--options-tile__header,
22229
- .c4p--options-tile--lg .c4p--options-tile__static-content {
22230
- height: 3rem;
22676
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .bx--form-requirement, .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit--warn .bx--form-requirement {
22677
+ display: block;
22678
+ max-height: initial;
22231
22679
  }
22232
-
22233
- .c4p--options-tile--xl .c4p--options-tile__header,
22234
- .c4p--options-tile--xl .c4p--options-tile__static-content {
22235
- height: 4rem;
22680
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid.c4p--cancelable-text-edit--inline .bx--form-requirement, .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit--warn.c4p--cancelable-text-edit--inline .bx--form-requirement {
22681
+ margin-left: calc(20% + 1.25rem);
22236
22682
  }
22237
-
22238
- .c4p--options-tile--lg .c4p--options-tile__toggle {
22239
- top: 1rem;
22683
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .bx--form-requirement {
22684
+ display: block;
22685
+ overflow: visible;
22686
+ color: var(--cds-text-error, #da1e28);
22240
22687
  }
22241
-
22242
- .c4p--options-tile--xl .c4p--options-tile__toggle {
22243
- top: 1.5rem;
22688
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input {
22689
+ padding-right: calc(2 * var(--size));
22244
22690
  }
22245
-
22246
- .c4p--options-tile--lg .c4p--options-tile__summary {
22247
- margin-top: var(--cds-spacing-01, 0.125rem);
22691
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input--invalid {
22692
+ padding-right: calc(3 * var(--size));
22693
+ }
22694
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input__invalid-icon {
22695
+ margin-right: var(--cds-spacing-11, 5rem);
22248
22696
  }
22249
22697
 
22250
- .c4p--options-tile--lg .c4p--options-tile__summary-text {
22251
- padding-right: calc(var(--cds-spacing-05, 1rem) + 1rem);
22698
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
22699
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
22700
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
22701
+ .c4p--inline-edit {
22702
+ display: inline-flex;
22703
+ align-content: center;
22252
22704
  }
22253
22705
 
22254
- .c4p--options-tile--xl .c4p--options-tile__summary-text {
22255
- padding-right: calc(var(--cds-spacing-05, 1rem) + 2rem);
22706
+ .c4p--inline-edit .c4p--inline-edit__value {
22707
+ display: flex;
22708
+ align-items: center;
22256
22709
  }
22257
22710
 
22258
- @media (prefers-reduced-motion: reduce) {
22259
- .c4p--options-tile__summary,
22260
- .c4p--options-tile__chevron {
22261
- transition: none;
22262
- }
22711
+ .c4p--inline-edit .c4p--inline-edit__button {
22712
+ margin-left: var(--cds-spacing-03, 0.5rem);
22263
22713
  }
22714
+
22264
22715
  /* stylelint-disable-line no-invalid-position-at-import-rule */
22265
22716
  /* stylelint-disable-line no-invalid-position-at-import-rule */
22266
22717
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -27305,8 +27756,8 @@ th .bx--table-sort__flex {
27305
27756
  z-index: 1;
27306
27757
  top: 50%;
27307
27758
  right: 1rem;
27308
- cursor: pointer;
27309
27759
  fill: var(--cds-icon-primary, #161616);
27760
+ pointer-events: none;
27310
27761
  transform: translateY(-50%);
27311
27762
  }
27312
27763
 
@@ -31085,192 +31536,6 @@ span.bx--pagination__text {
31085
31536
  /* stylelint-disable-line no-invalid-position-at-import-rule */
31086
31537
  /* stylelint-disable-line no-invalid-position-at-import-rule */
31087
31538
  /* stylelint-disable-line no-invalid-position-at-import-rule */
31088
- .bx--structured-list--selection .bx--structured-list-td,
31089
- .bx--structured-list--selection .bx--structured-list-th {
31090
- padding-right: 1rem;
31091
- padding-left: 1rem;
31092
- }
31093
- .bx--structured-list--selection .bx--structured-list-td:first-child,
31094
- .bx--structured-list--selection .bx--structured-list-th:first-child {
31095
- padding-right: 1rem;
31096
- padding-left: 1rem;
31097
- }
31098
-
31099
- .bx--structured-list-input {
31100
- display: none;
31101
- }
31102
-
31103
- .bx--structured-list {
31104
- display: table;
31105
- width: 100%;
31106
- margin-bottom: 5rem;
31107
- background-color: transparent;
31108
- border-collapse: collapse;
31109
- border-spacing: 0;
31110
- overflow-x: auto;
31111
- overflow-y: hidden;
31112
- }
31113
- .bx--structured-list.bx--structured-list--condensed .bx--structured-list-td, .bx--structured-list.bx--structured-list--condensed .bx--structured-list-th {
31114
- padding: 0.5rem;
31115
- }
31116
- .bx--structured-list .bx--structured-list-row .bx--structured-list-td:first-of-type,
31117
- .bx--structured-list .bx--structured-list-row .bx--structured-list-th:first-of-type {
31118
- padding-left: 1rem;
31119
- }
31120
- .bx--structured-list.bx--structured-list--flush .bx--structured-list-row .bx--structured-list-td, .bx--structured-list.bx--structured-list--flush .bx--structured-list-row .bx--structured-list-th, .bx--structured-list.bx--structured-list--flush .bx--structured-list-row .bx--structured-list-td:first-of-type, .bx--structured-list.bx--structured-list--flush .bx--structured-list-row .bx--structured-list-th:first-of-type {
31121
- padding-right: 1rem;
31122
- padding-left: 0;
31123
- }
31124
-
31125
- .bx--structured-list-row {
31126
- display: table-row;
31127
- border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
31128
- transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
31129
- }
31130
-
31131
- .bx--structured-list--selection .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row):not(.bx--structured-list-row--selected) {
31132
- border-bottom: 1px solid var(--cds-hover-row, #e5e5e5);
31133
- background-color: var(--cds-hover-row, #e5e5e5);
31134
- cursor: pointer;
31135
- }
31136
-
31137
- .bx--structured-list-row.bx--structured-list-row--selected {
31138
- background-color: var(--cds-selected-ui, #e0e0e0);
31139
- }
31140
-
31141
- .bx--structured-list-row.bx--structured-list-row--header-row {
31142
- border-bottom: 1px solid var(--cds-selected-ui, #e0e0e0);
31143
- cursor: inherit;
31144
- }
31145
-
31146
- .bx--structured-list-row:focus:not(.bx--structured-list-row--header-row) {
31147
- outline: 2px solid var(--cds-focus, #0f62fe);
31148
- outline-offset: -2px;
31149
- }
31150
- @media screen and (prefers-contrast) {
31151
- .bx--structured-list-row:focus:not(.bx--structured-list-row--header-row) {
31152
- outline-style: dotted;
31153
- }
31154
- }
31155
-
31156
- .bx--structured-list--selection .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row) > .bx--structured-list-td,
31157
- .bx--structured-list-row.bx--structured-list-row--selected > .bx--structured-list-td {
31158
- color: var(--cds-text-01, #161616);
31159
- }
31160
-
31161
- .bx--structured-list--selection .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row) > .bx--structured-list-td {
31162
- border-top: 1px solid var(--cds-ui-01, #f4f4f4);
31163
- }
31164
-
31165
- .bx--structured-list-thead {
31166
- display: table-header-group;
31167
- vertical-align: middle;
31168
- }
31169
-
31170
- .bx--structured-list-th {
31171
- padding: 1rem 0.5rem 0.5rem 0.5rem;
31172
- font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
31173
- font-weight: var(--cds-productive-heading-01-font-weight, 600);
31174
- line-height: var(--cds-productive-heading-01-line-height, 1.28572);
31175
- letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
31176
- display: table-cell;
31177
- height: 2.5rem;
31178
- color: var(--cds-text-01, #161616);
31179
- font-weight: 600;
31180
- text-align: left;
31181
- text-transform: none;
31182
- vertical-align: top;
31183
- }
31184
-
31185
- .bx--structured-list-tbody {
31186
- display: table-row-group;
31187
- vertical-align: middle;
31188
- }
31189
-
31190
- .bx--structured-list-td {
31191
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
31192
- font-weight: var(--cds-body-long-01-font-weight, 400);
31193
- line-height: var(--cds-body-long-01-line-height, 1.42857);
31194
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
31195
- padding: 1rem 0.5rem 1.5rem 0.5rem;
31196
- position: relative;
31197
- display: table-cell;
31198
- max-width: 36rem;
31199
- color: var(--cds-text-02, #525252);
31200
- transition: color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
31201
- }
31202
-
31203
- .bx--structured-list-content--nowrap {
31204
- white-space: nowrap;
31205
- }
31206
-
31207
- .bx--structured-list-svg {
31208
- display: inline-block;
31209
- fill: transparent;
31210
- transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
31211
- vertical-align: middle;
31212
- }
31213
-
31214
- .bx--structured-list-input:checked + .bx--structured-list-row .bx--structured-list-svg,
31215
- .bx--structured-list-input:checked + .bx--structured-list-td .bx--structured-list-svg {
31216
- fill: var(--cds-icon-01, #161616);
31217
- }
31218
-
31219
- .bx--structured-list.bx--skeleton .bx--structured-list-th:first-child {
31220
- width: 8%;
31221
- }
31222
- .bx--structured-list.bx--skeleton .bx--structured-list-th:nth-child(3n+2) {
31223
- width: 30%;
31224
- }
31225
- .bx--structured-list.bx--skeleton .bx--structured-list-th:nth-child(3n+3) {
31226
- width: 15%;
31227
- }
31228
- .bx--structured-list.bx--skeleton span {
31229
- position: relative;
31230
- padding: 0;
31231
- border: none;
31232
- background: var(--cds-skeleton-01, #e5e5e5);
31233
- box-shadow: none;
31234
- pointer-events: none;
31235
- display: block;
31236
- width: 75%;
31237
- height: 1rem;
31238
- }
31239
- .bx--structured-list.bx--skeleton span:hover, .bx--structured-list.bx--skeleton span:focus, .bx--structured-list.bx--skeleton span:active {
31240
- border: none;
31241
- cursor: default;
31242
- outline: none;
31243
- }
31244
- .bx--structured-list.bx--skeleton span::before {
31245
- position: absolute;
31246
- top: 0;
31247
- left: 0;
31248
- width: 100%;
31249
- height: 100%;
31250
- animation: 3000ms ease-in-out skeleton infinite;
31251
- background: var(--cds-skeleton-02, #c6c6c6);
31252
- content: "";
31253
- will-change: transform-origin, transform, opacity;
31254
- }
31255
- @media (prefers-reduced-motion: reduce) {
31256
- .bx--structured-list.bx--skeleton span::before {
31257
- animation: none;
31258
- }
31259
- }
31260
-
31261
- .bx--structured-list.bx--structured-list--selection.bx--skeleton .bx--structured-list-th:first-child {
31262
- width: 5%;
31263
- }
31264
- .bx--structured-list.bx--structured-list--selection.bx--skeleton .bx--structured-list-th:first-child span {
31265
- display: none;
31266
- }
31267
-
31268
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
31269
- .bx--structured-list-input:checked + .bx--structured-list-td .bx--structured-list-svg {
31270
- fill: ButtonText;
31271
- }
31272
- }
31273
-
31274
31539
  /* stylelint-disable-line no-invalid-position-at-import-rule */
31275
31540
  /* stylelint-disable-line no-invalid-position-at-import-rule */
31276
31541
  /* stylelint-disable-line no-invalid-position-at-import-rule */