@carbon/ibm-products 2.2.0 → 2.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (225) hide show
  1. package/css/index-full-carbon.css +965 -434
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +4 -4
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +354 -155
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +2 -2
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +600 -236
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +4 -4
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +516 -293
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +4 -4
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/APIKeyModal/APIKeyModal.docs-page.js +26 -0
  18. package/es/components/AboutModal/AboutModal.docs-page.js +21 -0
  19. package/es/components/AboutModal/AboutModal.js +2 -4
  20. package/es/components/ActionBar/ActionBar.js +2 -6
  21. package/es/components/AddSelect/AddSelectFormControl.js +6 -6
  22. package/es/components/AddSelect/AddSelectRow.js +15 -5
  23. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -6
  24. package/es/components/ButtonMenu/ButtonMenu.js +4 -4
  25. package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +3 -9
  26. package/es/components/Cascade/Cascade.docs-page.js +22 -0
  27. package/es/components/Cascade/Cascade.js +11 -1
  28. package/es/components/CreateFullPage/CreateFullPage.docs-page.js +39 -0
  29. package/es/components/CreateFullPage/CreateFullPage.js +13 -0
  30. package/es/components/CreateModal/CreateModal.docs-page.js +24 -0
  31. package/es/components/CreateModal/CreateModal.js +7 -0
  32. package/es/components/CreateSidePanel/CreateSidePanel.docs-page.js +18 -0
  33. package/es/components/CreateSidePanel/CreateSidePanel.js +1 -1
  34. package/es/components/CreateTearsheet/CreateTearsheet.docs-page.js +29 -0
  35. package/es/components/DataSpreadsheet/DataSpreadsheet.js +3 -3
  36. package/es/components/Datagrid/Datagrid/DatagridContent.js +1 -1
  37. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +3 -3
  38. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +25 -10
  39. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +1 -3
  40. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -1
  41. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +39 -47
  42. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +20 -24
  43. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +2 -2
  44. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js +13 -0
  45. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +44 -15
  46. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +16 -30
  47. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
  48. package/es/components/Datagrid/index.js +2 -1
  49. package/es/components/Datagrid/useActionsColumn.js +10 -7
  50. package/es/components/Datagrid/useCustomizeColumns.js +9 -7
  51. package/es/components/Datagrid/useExpandedRow.js +11 -7
  52. package/es/components/Datagrid/useFiltering.js +12 -8
  53. package/es/components/Datagrid/useInlineEdit.js +3 -0
  54. package/es/components/Datagrid/useNestedRows.js +10 -6
  55. package/es/components/Datagrid/useStickyColumn.js +10 -3
  56. package/es/components/Datagrid/utils/DatagridActions.js +12 -20
  57. package/es/components/EditFullPage/EditFullPage.docs-page.js +39 -0
  58. package/es/components/EditFullPage/EditFullPage.js +2 -1
  59. package/es/components/EditSidePanel/EditSidePanel.js +1 -1
  60. package/es/components/EditTearsheet/EditTearsheet.docs-page.js +25 -0
  61. package/es/components/EditTearsheet/EditTearsheet.js +4 -0
  62. package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.js +1 -1
  63. package/es/components/EditUpdateCards/EditUpdateCards.js +3 -2
  64. package/es/components/EmptyStates/EmptyState.js +4 -0
  65. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +4 -0
  66. package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +4 -0
  67. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +4 -0
  68. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +4 -0
  69. package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +4 -0
  70. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +4 -0
  71. package/es/components/ExampleComponent/ExampleComponent.docs-page.js +22 -0
  72. package/es/components/ExportModal/ExportModal.js +4 -0
  73. package/es/components/HTTPErrors/HTTPError403/HTTPError403.js +6 -0
  74. package/es/components/HTTPErrors/HTTPError404/HTTPError404.js +6 -0
  75. package/es/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +6 -0
  76. package/es/components/ImportModal/ImportModal.docs-page.js +18 -0
  77. package/es/components/ImportModal/ImportModal.js +13 -6
  78. package/es/components/MultiAddSelect/MultiAddSelect.docs-page.js +17 -0
  79. package/es/components/MultiAddSelect/MultiAddSelect.js +4 -0
  80. package/es/components/NotificationsPanel/preview-components/UnreadNotificationBell.js +2 -17
  81. package/es/components/PageHeader/PageHeader.js +2 -6
  82. package/es/components/PageHeader/PageHeaderUtils.js +2 -2
  83. package/es/components/RemoveModal/RemoveModal.docs-page.js +18 -0
  84. package/es/components/RemoveModal/RemoveModal.js +6 -0
  85. package/es/components/SidePanel/SidePanel.js +1 -3
  86. package/es/components/SingleAddSelect/SingleAddSelect.docs-page.js +15 -0
  87. package/es/components/SingleAddSelect/SingleAddSelect.js +4 -0
  88. package/es/components/StatusIcon/StatusIcon.docs-page.js +17 -0
  89. package/es/components/StatusIcon/StatusIcon.js +10 -0
  90. package/es/components/TagSet/TagSet.js +4 -7
  91. package/es/components/Tearsheet/TearsheetShell.js +11 -6
  92. package/es/components/Toolbar/Toolbar.docs-page.js +14 -0
  93. package/es/components/UserProfileImage/UserProfileImage.docs-page.js +17 -0
  94. package/es/components/UserProfileImage/UserProfileImage.js +14 -3
  95. package/es/components/WebTerminal/WebTerminal.docs-page.js +52 -0
  96. package/es/components/WebTerminal/WebTerminal.js +4 -0
  97. package/es/components/index.js +1 -1
  98. package/es/global/js/hooks/useCreateComponentStepChange.js +16 -15
  99. package/es/global/js/hooks/useResizeObserver.js +14 -28
  100. package/es/global/js/package-settings.js +14 -1
  101. package/es/global/js/utils/StoryDocsPage.js +218 -0
  102. package/es/global/js/utils/story-helper.js +108 -6
  103. package/lib/components/APIKeyModal/APIKeyModal.docs-page.js +37 -0
  104. package/lib/components/AboutModal/AboutModal.docs-page.js +32 -0
  105. package/lib/components/AboutModal/AboutModal.js +2 -4
  106. package/lib/components/ActionBar/ActionBar.js +2 -6
  107. package/lib/components/AddSelect/AddSelectFormControl.js +6 -6
  108. package/lib/components/AddSelect/AddSelectRow.js +15 -5
  109. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -6
  110. package/lib/components/ButtonMenu/ButtonMenu.js +4 -4
  111. package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +3 -9
  112. package/lib/components/Cascade/Cascade.docs-page.js +33 -0
  113. package/lib/components/Cascade/Cascade.js +11 -1
  114. package/lib/components/CreateFullPage/CreateFullPage.docs-page.js +50 -0
  115. package/lib/components/CreateFullPage/CreateFullPage.js +13 -0
  116. package/lib/components/CreateModal/CreateModal.docs-page.js +35 -0
  117. package/lib/components/CreateModal/CreateModal.js +7 -0
  118. package/lib/components/CreateSidePanel/CreateSidePanel.docs-page.js +29 -0
  119. package/lib/components/CreateSidePanel/CreateSidePanel.js +1 -1
  120. package/lib/components/CreateTearsheet/CreateTearsheet.docs-page.js +40 -0
  121. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +3 -3
  122. package/lib/components/Datagrid/Datagrid/DatagridContent.js +1 -1
  123. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +3 -3
  124. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +25 -10
  125. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +1 -3
  126. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -1
  127. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +37 -45
  128. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +20 -24
  129. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +6 -6
  130. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js +20 -0
  131. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +42 -13
  132. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +16 -30
  133. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
  134. package/lib/components/Datagrid/index.js +8 -1
  135. package/lib/components/Datagrid/useActionsColumn.js +12 -7
  136. package/lib/components/Datagrid/useCustomizeColumns.js +10 -8
  137. package/lib/components/Datagrid/useExpandedRow.js +9 -6
  138. package/lib/components/Datagrid/useFiltering.js +10 -7
  139. package/lib/components/Datagrid/useInlineEdit.js +3 -0
  140. package/lib/components/Datagrid/useNestedRows.js +9 -6
  141. package/lib/components/Datagrid/useStickyColumn.js +10 -3
  142. package/lib/components/Datagrid/utils/DatagridActions.js +49 -57
  143. package/lib/components/EditFullPage/EditFullPage.docs-page.js +50 -0
  144. package/lib/components/EditFullPage/EditFullPage.js +2 -1
  145. package/lib/components/EditSidePanel/EditSidePanel.js +1 -1
  146. package/lib/components/EditTearsheet/EditTearsheet.docs-page.js +36 -0
  147. package/lib/components/EditTearsheet/EditTearsheet.js +4 -0
  148. package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.js +1 -1
  149. package/lib/components/EditUpdateCards/EditUpdateCards.js +3 -2
  150. package/lib/components/EmptyStates/EmptyState.js +4 -0
  151. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +4 -0
  152. package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +4 -0
  153. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +4 -0
  154. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +4 -0
  155. package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +4 -0
  156. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +4 -0
  157. package/lib/components/ExampleComponent/ExampleComponent.docs-page.js +33 -0
  158. package/lib/components/ExportModal/ExportModal.js +4 -0
  159. package/lib/components/HTTPErrors/HTTPError403/HTTPError403.js +6 -0
  160. package/lib/components/HTTPErrors/HTTPError404/HTTPError404.js +6 -0
  161. package/lib/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +6 -0
  162. package/lib/components/ImportModal/ImportModal.docs-page.js +26 -0
  163. package/lib/components/ImportModal/ImportModal.js +13 -6
  164. package/lib/components/MultiAddSelect/MultiAddSelect.docs-page.js +25 -0
  165. package/lib/components/MultiAddSelect/MultiAddSelect.js +4 -0
  166. package/lib/components/NotificationsPanel/preview-components/UnreadNotificationBell.js +2 -17
  167. package/lib/components/PageHeader/PageHeader.js +2 -6
  168. package/lib/components/PageHeader/PageHeaderUtils.js +2 -2
  169. package/lib/components/RemoveModal/RemoveModal.docs-page.js +26 -0
  170. package/lib/components/RemoveModal/RemoveModal.js +6 -0
  171. package/lib/components/SidePanel/SidePanel.js +1 -3
  172. package/lib/components/SingleAddSelect/SingleAddSelect.docs-page.js +23 -0
  173. package/lib/components/SingleAddSelect/SingleAddSelect.js +4 -0
  174. package/lib/components/StatusIcon/StatusIcon.docs-page.js +28 -0
  175. package/lib/components/StatusIcon/StatusIcon.js +10 -0
  176. package/lib/components/TagSet/TagSet.js +4 -7
  177. package/lib/components/Tearsheet/TearsheetShell.js +11 -6
  178. package/lib/components/Toolbar/Toolbar.docs-page.js +25 -0
  179. package/lib/components/UserProfileImage/UserProfileImage.docs-page.js +28 -0
  180. package/lib/components/UserProfileImage/UserProfileImage.js +14 -3
  181. package/lib/components/WebTerminal/WebTerminal.docs-page.js +63 -0
  182. package/lib/components/WebTerminal/WebTerminal.js +4 -0
  183. package/lib/components/index.js +6 -0
  184. package/lib/global/js/hooks/useCreateComponentStepChange.js +16 -15
  185. package/lib/global/js/hooks/useResizeObserver.js +13 -27
  186. package/lib/global/js/package-settings.js +14 -1
  187. package/lib/global/js/utils/StoryDocsPage.js +225 -0
  188. package/lib/global/js/utils/story-helper.js +115 -7
  189. package/package.json +4 -4
  190. package/scss/components/AddSelect/_add-select.scss +10 -6
  191. package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +0 -1
  192. package/scss/components/ButtonMenu/_button-menu.scss +32 -1
  193. package/scss/components/Cascade/_storybook-styles.scss +3 -2
  194. package/scss/components/CreateFullPage/_create-full-page.scss +3 -3
  195. package/scss/components/CreateModal/_create-modal.scss +3 -3
  196. package/scss/components/CreateSidePanel/_create-side-panel.scss +4 -4
  197. package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -2
  198. package/scss/components/CreateTearsheet/_storybook-styles.scss +1 -1
  199. package/scss/components/CreateTearsheetNarrow/_create-tearsheet-narrow.scss +2 -2
  200. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +5 -5
  201. package/scss/components/DataSpreadsheet/_storybook-styles.scss +6 -0
  202. package/scss/components/Datagrid/_datagrid.scss +4 -2
  203. package/scss/components/Datagrid/_storybook-styles.scss +18 -4
  204. package/scss/components/Datagrid/styles/_datagrid.scss +26 -13
  205. package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss +7 -0
  206. package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +4 -0
  207. package/scss/components/EditSidePanel/_edit-side-panel.scss +2 -2
  208. package/scss/components/EditTearsheet/_edit-tearsheet.scss +2 -2
  209. package/scss/components/EditTearsheet/_storybook-styles.scss +1 -1
  210. package/scss/components/ImportModal/_import-modal.scss +1 -1
  211. package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -3
  212. package/scss/components/NotificationsPanel/_storybook-styles.scss +10 -2
  213. package/scss/components/OptionsTile/_storybook-styles.scss +1 -1
  214. package/scss/components/PageHeader/_page-header.scss +4 -5
  215. package/scss/components/PageHeader/_storybook-styles.scss +24 -14
  216. package/scss/components/Saving/_saving.scss +1 -1
  217. package/scss/components/SidePanel/_side-panel.scss +3 -5
  218. package/scss/components/TagSet/_tag-set.scss +1 -1
  219. package/scss/components/Tearsheet/_tearsheet.scss +9 -8
  220. package/scss/components/UserProfileImage/_user-profile-image.scss +2 -2
  221. package/scss/components/WebTerminal/_storybook-styles.scss +11 -1
  222. package/scss/global/styles/_display-box.scss +1 -0
  223. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +0 -21
  224. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +0 -30
  225. package/scss/components/HTTPErrors/_storybook-styles.scss +0 -6
@@ -1773,27 +1773,27 @@ p.c4p--about-modal__copyright-text:first-child {
1773
1773
  }
1774
1774
 
1775
1775
  .c4p--create-modal__title {
1776
- font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
1777
- font-weight: var(--cds-productive-heading-03-font-weight, 400);
1778
- line-height: var(--cds-productive-heading-03-line-height, 1.4);
1779
- letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
1776
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
1777
+ font-weight: var(--cds-heading-03-font-weight, 400);
1778
+ line-height: var(--cds-heading-03-line-height, 1.4);
1779
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
1780
1780
  margin-bottom: 0.25rem;
1781
1781
  }
1782
1782
 
1783
1783
  .c4p--create-modal__subtitle {
1784
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
1785
- font-weight: var(--cds-body-short-01-font-weight, 400);
1786
- line-height: var(--cds-body-short-01-line-height, 1.28572);
1787
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
1784
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
1785
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
1786
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
1787
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
1788
1788
  margin-bottom: 0.5rem;
1789
1789
  color: var(--cds-text-secondary, #525252);
1790
1790
  }
1791
1791
 
1792
1792
  .c4p--create-modal__description {
1793
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
1794
- font-weight: var(--cds-body-long-01-font-weight, 400);
1795
- line-height: var(--cds-body-long-01-line-height, 1.42857);
1796
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
1793
+ font-size: var(--cds-body-01-font-size, 0.875rem);
1794
+ font-weight: var(--cds-body-01-font-weight, 400);
1795
+ line-height: var(--cds-body-01-line-height, 1.42857);
1796
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
1797
1797
  padding-right: calc(20% - 1rem);
1798
1798
  margin: 0.5rem 0 1rem 0;
1799
1799
  }
@@ -1896,18 +1896,18 @@ p.c4p--about-modal__copyright-text:first-child {
1896
1896
  }
1897
1897
 
1898
1898
  .c4p--create-full-page .c4p--create-full-page__step-subtitle {
1899
- font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
1900
- font-weight: var(--cds-productive-heading-01-font-weight, 600);
1901
- line-height: var(--cds-productive-heading-01-line-height, 1.28572);
1902
- letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
1899
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
1900
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
1901
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
1902
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
1903
1903
  margin-bottom: 0.5rem;
1904
1904
  }
1905
1905
 
1906
1906
  .c4p--create-full-page .c4p--create-full-page__step-description {
1907
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
1908
- font-weight: var(--cds-body-long-01-font-weight, 400);
1909
- line-height: var(--cds-body-long-01-line-height, 1.42857);
1910
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
1907
+ font-size: var(--cds-body-01-font-size, 0.875rem);
1908
+ font-weight: var(--cds-body-01-font-weight, 400);
1909
+ line-height: var(--cds-body-01-line-height, 1.42857);
1910
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
1911
1911
  margin-bottom: 1.5rem;
1912
1912
  }
1913
1913
 
@@ -1996,10 +1996,10 @@ p.c4p--about-modal__copyright-text:first-child {
1996
1996
  }
1997
1997
 
1998
1998
  .c4p--create-full-page .c4p--create-full-page__step-title {
1999
- font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
2000
- font-weight: var(--cds-productive-heading-04-font-weight, 400);
2001
- line-height: var(--cds-productive-heading-04-line-height, 1.28572);
2002
- letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
1999
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
2000
+ font-weight: var(--cds-heading-04-font-weight, 400);
2001
+ line-height: var(--cds-heading-04-line-height, 1.28572);
2002
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
2003
2003
  margin-bottom: 1rem;
2004
2004
  }
2005
2005
 
@@ -2087,6 +2087,157 @@ p.c4p--about-modal__copyright-text:first-child {
2087
2087
  transform-origin: left;
2088
2088
  }
2089
2089
  }
2090
+ :root {
2091
+ --cds-layout-size-height-xs: 1.5rem;
2092
+ --cds-layout-size-height-sm: 2rem;
2093
+ --cds-layout-size-height-md: 2.5rem;
2094
+ --cds-layout-size-height-lg: 3rem;
2095
+ --cds-layout-size-height-xl: 4rem;
2096
+ --cds-layout-size-height-2xl: 5rem;
2097
+ --cds-layout-size-height-min: 0px;
2098
+ --cds-layout-size-height-max: 999999999px;
2099
+ --cds-layout-density-padding-inline-condensed: 0.5rem;
2100
+ --cds-layout-density-padding-inline-normal: 1rem;
2101
+ --cds-layout-density-padding-inline-min: 0px;
2102
+ --cds-layout-density-padding-inline-max: 999999999px;
2103
+ }
2104
+
2105
+ .cds--layout--size-xs {
2106
+ --cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem);
2107
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
2108
+ }
2109
+
2110
+ .cds--layout-constraint--size\:default-xs {
2111
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
2112
+ }
2113
+
2114
+ .cds--layout-constraint--size\:min-xs {
2115
+ --cds-layout-size-height-min: var(--cds-layout-size-height-xs, 1.5rem);
2116
+ }
2117
+
2118
+ .cds--layout-constraint--size\:max-xs {
2119
+ --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem);
2120
+ }
2121
+
2122
+ .cds--layout--size-sm {
2123
+ --cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem);
2124
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
2125
+ }
2126
+
2127
+ .cds--layout-constraint--size\:default-sm {
2128
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
2129
+ }
2130
+
2131
+ .cds--layout-constraint--size\:min-sm {
2132
+ --cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem);
2133
+ }
2134
+
2135
+ .cds--layout-constraint--size\:max-sm {
2136
+ --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem);
2137
+ }
2138
+
2139
+ .cds--layout--size-md {
2140
+ --cds-layout-size-height-context: var(--cds-layout-size-height-md, 2.5rem);
2141
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
2142
+ }
2143
+
2144
+ .cds--layout-constraint--size\:default-md {
2145
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
2146
+ }
2147
+
2148
+ .cds--layout-constraint--size\:min-md {
2149
+ --cds-layout-size-height-min: var(--cds-layout-size-height-md, 2.5rem);
2150
+ }
2151
+
2152
+ .cds--layout-constraint--size\:max-md {
2153
+ --cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem);
2154
+ }
2155
+
2156
+ .cds--layout--size-lg {
2157
+ --cds-layout-size-height-context: var(--cds-layout-size-height-lg, 3rem);
2158
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
2159
+ }
2160
+
2161
+ .cds--layout-constraint--size\:default-lg {
2162
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
2163
+ }
2164
+
2165
+ .cds--layout-constraint--size\:min-lg {
2166
+ --cds-layout-size-height-min: var(--cds-layout-size-height-lg, 3rem);
2167
+ }
2168
+
2169
+ .cds--layout-constraint--size\:max-lg {
2170
+ --cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem);
2171
+ }
2172
+
2173
+ .cds--layout--size-xl {
2174
+ --cds-layout-size-height-context: var(--cds-layout-size-height-xl, 4rem);
2175
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
2176
+ }
2177
+
2178
+ .cds--layout-constraint--size\:default-xl {
2179
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
2180
+ }
2181
+
2182
+ .cds--layout-constraint--size\:min-xl {
2183
+ --cds-layout-size-height-min: var(--cds-layout-size-height-xl, 4rem);
2184
+ }
2185
+
2186
+ .cds--layout-constraint--size\:max-xl {
2187
+ --cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem);
2188
+ }
2189
+
2190
+ .cds--layout--size-2xl {
2191
+ --cds-layout-size-height-context: var(--cds-layout-size-height-2xl, 5rem);
2192
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
2193
+ }
2194
+
2195
+ .cds--layout-constraint--size\:default-2xl {
2196
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
2197
+ }
2198
+
2199
+ .cds--layout-constraint--size\:min-2xl {
2200
+ --cds-layout-size-height-min: var(--cds-layout-size-height-2xl, 5rem);
2201
+ }
2202
+
2203
+ .cds--layout-constraint--size\:max-2xl {
2204
+ --cds-layout-size-height-max: var(--cds-layout-size-height-2xl, 5rem);
2205
+ }
2206
+
2207
+ .cds--layout--density-condensed {
2208
+ --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
2209
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
2210
+ }
2211
+
2212
+ .cds--layout-constraint--density\:default-condensed {
2213
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
2214
+ }
2215
+
2216
+ .cds--layout-constraint--density\:min-condensed {
2217
+ --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
2218
+ }
2219
+
2220
+ .cds--layout-constraint--density\:max-condensed {
2221
+ --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
2222
+ }
2223
+
2224
+ .cds--layout--density-normal {
2225
+ --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-normal, 1rem);
2226
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
2227
+ }
2228
+
2229
+ .cds--layout-constraint--density\:default-normal {
2230
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
2231
+ }
2232
+
2233
+ .cds--layout-constraint--density\:min-normal {
2234
+ --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-normal, 1rem);
2235
+ }
2236
+
2237
+ .cds--layout-constraint--density\:max-normal {
2238
+ --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem);
2239
+ }
2240
+
2090
2241
  .cds--assistive-text,
2091
2242
  .cds--visually-hidden {
2092
2243
  position: absolute;
@@ -2113,7 +2264,6 @@ p.c4p--about-modal__copyright-text:first-child {
2113
2264
  --c4p--side-panel--collapsed-title-y-position: 1rem;
2114
2265
  --c4p--side-panel--label-text-height: 0;
2115
2266
  position: fixed;
2116
- /* stylelint-disable-next-line function-no-unknown */
2117
2267
  z-index: 9000;
2118
2268
  top: 3rem;
2119
2269
  height: calc(100% - 3rem);
@@ -2292,10 +2442,10 @@ p.c4p--about-modal__copyright-text:first-child {
2292
2442
  top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height));
2293
2443
  }
2294
2444
  .c4p--side-panel__container .c4p--side-panel__title-text {
2295
- font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
2296
- font-weight: var(--cds-productive-heading-03-font-weight, 400);
2297
- line-height: var(--cds-productive-heading-03-line-height, 1.4);
2298
- letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
2445
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
2446
+ font-weight: var(--cds-heading-03-font-weight, 400);
2447
+ line-height: var(--cds-heading-03-line-height, 1.4);
2448
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
2299
2449
  display: -webkit-box;
2300
2450
  overflow: hidden;
2301
2451
  padding-right: 3rem;
@@ -2320,10 +2470,10 @@ p.c4p--about-modal__copyright-text:first-child {
2320
2470
  white-space: nowrap;
2321
2471
  }
2322
2472
  .c4p--side-panel__container .c4p--side-panel__collapsed-title-text {
2323
- font-size: var(--cds-productive-heading-02-font-size, 1rem);
2324
- font-weight: var(--cds-productive-heading-02-font-weight, 600);
2325
- line-height: var(--cds-productive-heading-02-line-height, 1.375);
2326
- letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
2473
+ font-size: var(--cds-heading-compact-02-font-size, 1rem);
2474
+ font-weight: var(--cds-heading-compact-02-font-weight, 600);
2475
+ line-height: var(--cds-heading-compact-02-line-height, 1.375);
2476
+ letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
2327
2477
  display: -webkit-box;
2328
2478
  overflow: hidden;
2329
2479
  padding-right: 3rem;
@@ -2335,10 +2485,10 @@ p.c4p--about-modal__copyright-text:first-child {
2335
2485
  transform: translateY(var(--c4p--side-panel--collapsed-title-y-position));
2336
2486
  }
2337
2487
  .c4p--side-panel__container .c4p--side-panel__subtitle-text {
2338
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
2339
- font-weight: var(--cds-body-short-01-font-weight, 400);
2340
- line-height: var(--cds-body-short-01-line-height, 1.28572);
2341
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
2488
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
2489
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
2490
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
2491
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
2342
2492
  overflow: hidden;
2343
2493
  padding: 0 3rem 1rem 1rem;
2344
2494
  -webkit-box-orient: vertical;
@@ -2519,7 +2669,6 @@ p.c4p--about-modal__copyright-text:first-child {
2519
2669
 
2520
2670
  .c4p--side-panel__overlay {
2521
2671
  position: fixed;
2522
- /* stylelint-disable-next-line function-no-unknown */
2523
2672
  z-index: 6000;
2524
2673
  width: 100%;
2525
2674
  height: 100%;
@@ -2614,18 +2763,18 @@ p.c4p--about-modal__copyright-text:first-child {
2614
2763
  }
2615
2764
 
2616
2765
  .c4p--create-side-panel__form-title-text {
2617
- font-size: var(--cds-productive-heading-02-font-size, 1rem);
2618
- font-weight: var(--cds-productive-heading-02-font-weight, 600);
2619
- line-height: var(--cds-productive-heading-02-line-height, 1.375);
2620
- letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
2766
+ font-size: var(--cds-heading-compact-02-font-size, 1rem);
2767
+ font-weight: var(--cds-heading-compact-02-font-weight, 600);
2768
+ line-height: var(--cds-heading-compact-02-line-height, 1.375);
2769
+ letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
2621
2770
  padding-bottom: 0.5rem;
2622
2771
  }
2623
2772
 
2624
2773
  .c4p--create-side-panel__form-description-text {
2625
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
2626
- font-weight: var(--cds-body-long-01-font-weight, 400);
2627
- line-height: var(--cds-body-long-01-line-height, 1.42857);
2628
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
2774
+ font-size: var(--cds-body-01-font-size, 0.875rem);
2775
+ font-weight: var(--cds-body-01-font-weight, 400);
2776
+ line-height: var(--cds-body-01-line-height, 1.42857);
2777
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
2629
2778
  }
2630
2779
 
2631
2780
  .c4p--create-side-panel.c4p--side-panel .cds--btn.c4p--side-panel__close-button {
@@ -2633,18 +2782,18 @@ p.c4p--about-modal__copyright-text:first-child {
2633
2782
  }
2634
2783
 
2635
2784
  .c4p--create-side-panel__title {
2636
- font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
2637
- font-weight: var(--cds-productive-heading-03-font-weight, 400);
2638
- line-height: var(--cds-productive-heading-03-line-height, 1.4);
2639
- letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
2785
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
2786
+ font-weight: var(--cds-heading-03-font-weight, 400);
2787
+ line-height: var(--cds-heading-03-line-height, 1.4);
2788
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
2640
2789
  margin-bottom: 0.25rem;
2641
2790
  }
2642
2791
 
2643
2792
  .c4p--create-side-panel__subtitle {
2644
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
2645
- font-weight: var(--cds-body-short-01-font-weight, 400);
2646
- line-height: var(--cds-body-short-01-line-height, 1.28572);
2647
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
2793
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
2794
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
2795
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
2796
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
2648
2797
  margin-bottom: 0.5rem;
2649
2798
  color: var(--cds-text-secondary, #525252);
2650
2799
  }
@@ -2659,7 +2808,6 @@ p.c4p--about-modal__copyright-text:first-child {
2659
2808
  }
2660
2809
 
2661
2810
  .c4p--tearsheet.c4p--tearsheet {
2662
- /* stylelint-disable-next-line function-no-unknown */
2663
2811
  z-index: 9001;
2664
2812
  align-items: flex-end;
2665
2813
  color: var(--cds-text-primary, #161616);
@@ -2668,7 +2816,6 @@ p.c4p--about-modal__copyright-text:first-child {
2668
2816
  --c4p--tearsheet--stacking-scale-factor-double: 0.9;
2669
2817
  }
2670
2818
  .c4p--tearsheet.is-visible {
2671
- /* stylelint-disable-next-line function-no-unknown */
2672
2819
  z-index: 9000;
2673
2820
  align-items: flex-end;
2674
2821
  transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
@@ -2679,17 +2826,14 @@ p.c4p--about-modal__copyright-text:first-child {
2679
2826
  }
2680
2827
  }
2681
2828
  .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 {
2682
- /* stylelint-disable-next-line function-no-unknown */
2683
2829
  z-index: 8999;
2684
2830
  background-color: rgba(22, 22, 22, 0.33);
2685
2831
  }
2686
2832
  .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 {
2687
- /* stylelint-disable-next-line function-no-unknown */
2688
2833
  z-index: 8998;
2689
2834
  background-color: rgba(22, 22, 22, 0.11);
2690
2835
  }
2691
2836
  .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 {
2692
- /* stylelint-disable-next-line function-no-unknown */
2693
2837
  z-index: 8999;
2694
2838
  background-color: rgba(22, 22, 22, 0.25);
2695
2839
  }
@@ -2738,11 +2882,13 @@ p.c4p--about-modal__copyright-text:first-child {
2738
2882
  padding: 1.5rem 2rem;
2739
2883
  border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
2740
2884
  margin: 0;
2885
+ background-color: var(--cds-layer);
2741
2886
  }
2742
2887
  .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header {
2743
2888
  padding: 1rem;
2744
2889
  border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
2745
2890
  margin: 0;
2891
+ background-color: var(--cds-layer);
2746
2892
  }
2747
2893
  .c4p--tearsheet .c4p--tearsheet__header-content {
2748
2894
  display: flex;
@@ -2762,20 +2908,20 @@ p.c4p--about-modal__copyright-text:first-child {
2762
2908
  display: none;
2763
2909
  }
2764
2910
  .c4p--tearsheet.c4p--tearsheet--wide .cds--modal-header__heading.c4p--tearsheet__heading {
2765
- font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
2766
- font-weight: var(--cds-productive-heading-04-font-weight, 400);
2767
- line-height: var(--cds-productive-heading-04-line-height, 1.28572);
2768
- letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
2911
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
2912
+ font-weight: var(--cds-heading-04-font-weight, 400);
2913
+ line-height: var(--cds-heading-04-line-height, 1.28572);
2914
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
2769
2915
  }
2770
2916
  .c4p--tearsheet .c4p--tearsheet__header-description {
2771
2917
  display: -webkit-box;
2772
2918
  overflow: hidden;
2773
2919
  max-width: 100%;
2774
2920
  margin-top: 1rem;
2775
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
2776
- font-weight: var(--cds-body-short-01-font-weight, 400);
2777
- line-height: var(--cds-body-short-01-line-height, 1.28572);
2778
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
2921
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
2922
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
2923
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
2924
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
2779
2925
  -webkit-box-orient: vertical;
2780
2926
  -webkit-line-clamp: 2;
2781
2927
  word-break: break-word;
@@ -2833,10 +2979,13 @@ p.c4p--about-modal__copyright-text:first-child {
2833
2979
  .c4p--tearsheet .c4p--tearsheet__main {
2834
2980
  display: flex;
2835
2981
  flex-direction: row;
2836
- background-color: var(--cds-layer);
2982
+ background-color: var(--cds-background, #ffffff);
2837
2983
  grid-column: 1/-1;
2838
2984
  grid-row: 1/-1;
2839
2985
  }
2986
+ .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__main {
2987
+ background-color: var(--cds-layer);
2988
+ }
2840
2989
  .c4p--tearsheet .c4p--tearsheet__main .c4p--tearsheet__influencer {
2841
2990
  border-right: none;
2842
2991
  border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
@@ -2916,18 +3065,18 @@ p.c4p--about-modal__copyright-text:first-child {
2916
3065
  }
2917
3066
 
2918
3067
  .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form-title-text {
2919
- font-size: var(--cds-productive-heading-02-font-size, 1rem);
2920
- font-weight: var(--cds-productive-heading-02-font-weight, 600);
2921
- line-height: var(--cds-productive-heading-02-line-height, 1.375);
2922
- letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
3068
+ font-size: var(--cds-heading-compact-02-font-size, 1rem);
3069
+ font-weight: var(--cds-heading-compact-02-font-weight, 600);
3070
+ line-height: var(--cds-heading-compact-02-line-height, 1.375);
3071
+ letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
2923
3072
  padding-bottom: 0.5rem;
2924
3073
  }
2925
3074
 
2926
3075
  .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form-description-text {
2927
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
2928
- font-weight: var(--cds-body-long-01-font-weight, 400);
2929
- line-height: var(--cds-body-long-01-line-height, 1.42857);
2930
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
3076
+ font-size: var(--cds-body-01-font-size, 0.875rem);
3077
+ font-weight: var(--cds-body-01-font-weight, 400);
3078
+ line-height: var(--cds-body-01-line-height, 1.42857);
3079
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
2931
3080
  }
2932
3081
 
2933
3082
  @keyframes step-content-entrance {
@@ -3016,19 +3165,19 @@ p.c4p--about-modal__copyright-text:first-child {
3016
3165
 
3017
3166
  .c4p--tearsheet-create .c4p--tearsheet-create__section--subtitle,
3018
3167
  .c4p--tearsheet-create .c4p--tearsheet-create__step--subtitle {
3019
- font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
3020
- font-weight: var(--cds-productive-heading-01-font-weight, 600);
3021
- line-height: var(--cds-productive-heading-01-line-height, 1.28572);
3022
- letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
3168
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
3169
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
3170
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
3171
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
3023
3172
  margin-bottom: 0.5rem;
3024
3173
  }
3025
3174
 
3026
3175
  .c4p--tearsheet-create .c4p--tearsheet-create__section--description,
3027
3176
  .c4p--tearsheet-create .c4p--tearsheet-create__step--description {
3028
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
3029
- font-weight: var(--cds-body-long-01-font-weight, 400);
3030
- line-height: var(--cds-body-long-01-line-height, 1.42857);
3031
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
3177
+ font-size: var(--cds-body-01-font-size, 0.875rem);
3178
+ font-weight: var(--cds-body-01-font-weight, 400);
3179
+ line-height: var(--cds-body-01-line-height, 1.42857);
3180
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
3032
3181
  margin-bottom: 1.5rem;
3033
3182
  }
3034
3183
 
@@ -3498,10 +3647,10 @@ c4p--card__icon:active {
3498
3647
  .c4p--import-modal .c4p--import-modal__file-drop-header,
3499
3648
  .c4p--import-modal .c4p--import-modal__label {
3500
3649
  margin-bottom: 0.5rem;
3501
- font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
3502
- font-weight: var(--cds-productive-heading-01-font-weight, 600);
3503
- line-height: var(--cds-productive-heading-01-line-height, 1.28572);
3504
- letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
3650
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
3651
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
3652
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
3653
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
3505
3654
  }
3506
3655
 
3507
3656
  .c4p--import-modal__helper-text {
@@ -3582,6 +3731,9 @@ c4p--card__icon:active {
3582
3731
  display: flex;
3583
3732
  align-items: center;
3584
3733
  }
3734
+ .c4p--add-select__selections-form-control-wrapper--radio {
3735
+ cursor: pointer;
3736
+ }
3585
3737
  .c4p--add-select__selections-form-control-label-wrapper {
3586
3738
  display: flex;
3587
3739
  margin-left: 1rem;
@@ -3632,10 +3784,10 @@ c4p--card__icon:active {
3632
3784
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
3633
3785
  }
3634
3786
  .c4p--add-select__sidebar-header .c4p--add-select__sidebar-title {
3635
- font-size: var(--cds-productive-heading-02-font-size, 1rem);
3636
- font-weight: var(--cds-productive-heading-02-font-weight, 600);
3637
- line-height: var(--cds-productive-heading-02-line-height, 1.375);
3638
- letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
3787
+ font-size: var(--cds-heading-compact-02-font-size, 1rem);
3788
+ font-weight: var(--cds-heading-compact-02-font-weight, 600);
3789
+ line-height: var(--cds-heading-compact-02-line-height, 1.375);
3790
+ letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
3639
3791
  }
3640
3792
 
3641
3793
  .c4p--add-select__sidebar-title {
@@ -3667,10 +3819,10 @@ c4p--card__icon:active {
3667
3819
  }
3668
3820
 
3669
3821
  .c4p--add-select .c4p--add-select__sidebar-item-body {
3670
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
3671
- font-weight: var(--cds-body-long-01-font-weight, 400);
3672
- line-height: var(--cds-body-long-01-line-height, 1.42857);
3673
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
3822
+ font-size: var(--cds-body-01-font-size, 0.875rem);
3823
+ font-weight: var(--cds-body-01-font-weight, 400);
3824
+ line-height: var(--cds-body-01-line-height, 1.42857);
3825
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
3674
3826
  margin-bottom: 1rem;
3675
3827
  }
3676
3828
 
@@ -3811,24 +3963,24 @@ button.c4p--add-select__global-filter-toggle--open {
3811
3963
  }
3812
3964
 
3813
3965
  .c4p--add-select__meta-panel p.c4p--add-select__meta-panel-title {
3814
- font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
3815
- font-weight: var(--cds-productive-heading-03-font-weight, 400);
3816
- line-height: var(--cds-productive-heading-03-line-height, 1.4);
3817
- letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
3966
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
3967
+ font-weight: var(--cds-heading-03-font-weight, 400);
3968
+ line-height: var(--cds-heading-03-line-height, 1.4);
3969
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
3818
3970
  }
3819
3971
 
3820
3972
  .c4p--add-select__meta-panel p.c4p--add-select__meta-panel-entry-title {
3821
- font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
3822
- font-weight: var(--cds-productive-heading-01-font-weight, 600);
3823
- line-height: var(--cds-productive-heading-01-line-height, 1.28572);
3824
- letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
3973
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
3974
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
3975
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
3976
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
3825
3977
  }
3826
3978
 
3827
3979
  .c4p--add-select__meta-panel p.c4p--add-select__meta-panel-entry-body {
3828
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
3829
- font-weight: var(--cds-body-short-01-font-weight, 400);
3830
- line-height: var(--cds-body-short-01-line-height, 1.28572);
3831
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
3980
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
3981
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
3982
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
3983
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
3832
3984
  }
3833
3985
 
3834
3986
  .c4p--add-select__selections .cds--list-box__menu {
@@ -3862,10 +4014,10 @@ button.c4p--add-select__global-filter-toggle--open {
3862
4014
  }
3863
4015
 
3864
4016
  .c4p--add-select .c4p--add-select__items-label {
3865
- font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
3866
- font-weight: var(--cds-productive-heading-01-font-weight, 600);
3867
- line-height: var(--cds-productive-heading-01-line-height, 1.28572);
3868
- letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
4017
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
4018
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
4019
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
4020
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
3869
4021
  }
3870
4022
 
3871
4023
  .c4p--add-select .cds--modal-container--sm .cds--modal-content p {
@@ -4061,6 +4213,14 @@ button.c4p--add-select__global-filter-toggle--open {
4061
4213
  --cds-fluid-spacing-02: 2vw;
4062
4214
  --cds-fluid-spacing-03: 5vw;
4063
4215
  --cds-fluid-spacing-04: 10vw;
4216
+ --cds-caption-01-font-size: 0.75rem;
4217
+ --cds-caption-01-font-weight: 400;
4218
+ --cds-caption-01-line-height: 1.33333;
4219
+ --cds-caption-01-letter-spacing: 0.32px;
4220
+ --cds-caption-02-font-size: 0.875rem;
4221
+ --cds-caption-02-font-weight: 400;
4222
+ --cds-caption-02-line-height: 1.28572;
4223
+ --cds-caption-02-letter-spacing: 0.32px;
4064
4224
  --cds-label-01-font-size: 0.75rem;
4065
4225
  --cds-label-01-font-weight: 400;
4066
4226
  --cds-label-01-line-height: 1.33333;
@@ -4309,7 +4469,7 @@ button.c4p--add-select__global-filter-toggle--open {
4309
4469
  top: 3rem;
4310
4470
  right: 0;
4311
4471
  overflow: auto;
4312
- min-width: 22.75rem;
4472
+ min-width: 20rem;
4313
4473
  max-width: 22.75rem;
4314
4474
  min-height: 38.5rem;
4315
4475
  max-height: 38.5rem;
@@ -4346,10 +4506,10 @@ button.c4p--add-select__global-filter-toggle--open {
4346
4506
  color: var(--cds-text-primary, #161616);
4347
4507
  }
4348
4508
  .c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__header {
4349
- font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
4350
- font-weight: var(--cds-productive-heading-01-font-weight, 600);
4351
- line-height: var(--cds-productive-heading-01-line-height, 1.28572);
4352
- letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
4509
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
4510
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
4511
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
4512
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
4353
4513
  margin: 0;
4354
4514
  }
4355
4515
  .c4p--notifications-panel__container .c4p--notifications-panel__time-section-label {
@@ -4518,10 +4678,10 @@ button.c4p--add-select__global-filter-toggle--open {
4518
4678
  margin-top: 10rem;
4519
4679
  }
4520
4680
  .c4p--notifications-panel__container .c4p--notifications-panel__main-section-empty.c4p--notifications-panel__main-section .c4p-subtext {
4521
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
4522
- font-weight: var(--cds-body-short-01-font-weight, 400);
4523
- line-height: var(--cds-body-short-01-line-height, 1.28572);
4524
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
4681
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
4682
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
4683
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
4684
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
4525
4685
  }
4526
4686
  .c4p--notifications-panel__container .c4p--notifications-panel__main-section {
4527
4687
  min-height: 498px;
@@ -6317,7 +6477,6 @@ button.c4p--add-select__global-filter-toggle--open {
6317
6477
  }
6318
6478
 
6319
6479
  .c4p--breadcrumb-with-overflow__overflow-menu-options.c4p--breadcrumb-with-overflow__overflow-menu-options {
6320
- /* stylelint-disable-next-line function-no-unknown */
6321
6480
  z-index: 8000;
6322
6481
  }
6323
6482
 
@@ -6427,10 +6586,10 @@ button.c4p--add-select__global-filter-toggle--open {
6427
6586
  }
6428
6587
  .c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__tag-item,
6429
6588
  .c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__tag-item .cds--tag {
6430
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
6431
- font-weight: var(--cds-body-short-01-font-weight, 400);
6432
- line-height: var(--cds-body-short-01-line-height, 1.28572);
6433
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
6589
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
6590
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
6591
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
6592
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
6434
6593
  display: block;
6435
6594
  overflow: hidden;
6436
6595
  min-width: initial;
@@ -6460,8 +6619,33 @@ button.c4p--add-select__global-filter-toggle--open {
6460
6619
  .c4p--button-menu {
6461
6620
  min-width: 160px;
6462
6621
  }
6622
+ .c4p--button-menu.c4p--button-menu__wrapper--primary, .c4p--button-menu.c4p--button-menu__wrapper--primary.cds--overflow-menu.cds--overflow-menu--open {
6623
+ background-color: var(--cds-button-primary, #0f62fe);
6624
+ }
6625
+ .c4p--button-menu.cds--overflow-menu.c4p--button-menu__wrapper--primary:hover {
6626
+ background-color: var(--cds-button-primary-hover, #0050e6);
6627
+ }
6628
+ .c4p--button-menu.c4p--button-menu__wrapper--tertiary, .c4p--button-menu.c4p--button-menu__wrapper--tertiary.cds--overflow-menu.cds--overflow-menu--open {
6629
+ background-color: var(--cds-button-tertiary, #0f62fe);
6630
+ }
6631
+ .c4p--button-menu.cds--overflow-menu.c4p--button-menu__wrapper--tertiary:hover {
6632
+ background-color: var(--cds-button-tertiary-hover, #0050e6);
6633
+ }
6634
+ .c4p--button-menu.c4p--button-menu__wrapper--ghost, .c4p--button-menu.c4p--button-menu__wrapper--ghost.cds--overflow-menu.cds--overflow-menu--open {
6635
+ background-color: transparent;
6636
+ }
6637
+ .c4p--button-menu.cds--overflow-menu.c4p--button-menu__wrapper--ghost:hover {
6638
+ background-color: var(--cds-layer-hover);
6639
+ }
6463
6640
  .c4p--button-menu .c4p--button-menu__trigger {
6641
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
6642
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
6643
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
6644
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
6645
+ display: flex;
6464
6646
  width: 100%;
6647
+ align-items: center;
6648
+ justify-content: space-between;
6465
6649
  padding: 0 1rem;
6466
6650
  }
6467
6651
 
@@ -6495,7 +6679,6 @@ button.c4p--add-select__global-filter-toggle--open {
6495
6679
  justify-content: flex-end;
6496
6680
  }
6497
6681
 
6498
- /* stylelint-disable-next-line function-no-unknown */
6499
6682
  @keyframes background-appear {
6500
6683
  from {
6501
6684
  /* stylelint-disable-next-line carbon/theme-token-use */
@@ -6802,10 +6985,10 @@ button.c4p--add-select__global-filter-toggle--open {
6802
6985
  }
6803
6986
  }
6804
6987
  .c4p--page-header .c4p--page-header__title {
6805
- font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
6806
- font-weight: var(--cds-productive-heading-04-font-weight, 400);
6807
- line-height: var(--cds-productive-heading-04-line-height, 1.28572);
6808
- letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
6988
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
6989
+ font-weight: var(--cds-heading-04-font-weight, 400);
6990
+ line-height: var(--cds-heading-04-line-height, 1.28572);
6991
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
6809
6992
  min-height: 2.5rem;
6810
6993
  overflow-x: hidden;
6811
6994
  text-overflow: ellipsis;
@@ -6905,16 +7088,16 @@ button.c4p--add-select__global-filter-toggle--open {
6905
7088
  height: 1rem;
6906
7089
  }
6907
7090
  .c4p--page-header .c4p--page-header__subtitle {
6908
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
6909
- font-weight: var(--cds-body-long-01-font-weight, 400);
6910
- line-height: var(--cds-body-long-01-line-height, 1.42857);
6911
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
7091
+ font-size: var(--cds-body-01-font-size, 0.875rem);
7092
+ font-weight: var(--cds-body-01-font-weight, 400);
7093
+ line-height: var(--cds-body-01-line-height, 1.42857);
7094
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
6912
7095
  }
6913
7096
  .c4p--page-header .c4p--page-header__available-row {
6914
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
6915
- font-weight: var(--cds-body-long-01-font-weight, 400);
6916
- line-height: var(--cds-body-long-01-line-height, 1.42857);
6917
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
7097
+ font-size: var(--cds-body-01-font-size, 0.875rem);
7098
+ font-weight: var(--cds-body-01-font-weight, 400);
7099
+ line-height: var(--cds-body-01-line-height, 1.42857);
7100
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
6918
7101
  margin-top: 0.5rem;
6919
7102
  }
6920
7103
  .c4p--page-header .c4p--page-header__available-row + .c4p--page-header__last-row-buffer--active {
@@ -6924,10 +7107,10 @@ button.c4p--add-select__global-filter-toggle--open {
6924
7107
  margin-top: 1rem;
6925
7108
  }
6926
7109
  .c4p--page-header .c4p--page-header__available-row * {
6927
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
6928
- font-weight: var(--cds-body-long-01-font-weight, 400);
6929
- line-height: var(--cds-body-long-01-line-height, 1.42857);
6930
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
7110
+ font-size: var(--cds-body-01-font-size, 0.875rem);
7111
+ font-weight: var(--cds-body-01-font-weight, 400);
7112
+ line-height: var(--cds-body-01-line-height, 1.42857);
7113
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
6931
7114
  }
6932
7115
  .c4p--page-header .c4p--page-header__navigation-row {
6933
7116
  flex-wrap: wrap-reverse;
@@ -7100,10 +7283,10 @@ button.c4p--add-select__global-filter-toggle--open {
7100
7283
  }
7101
7284
 
7102
7285
  .c4p--saving__text {
7103
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
7104
- font-weight: var(--cds-body-short-01-font-weight, 400);
7105
- line-height: var(--cds-body-short-01-line-height, 1.28572);
7106
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
7286
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
7287
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
7288
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
7289
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
7107
7290
  }
7108
7291
 
7109
7292
  .c4p--saving__buttons {
@@ -7864,19 +8047,19 @@ button.c4p--add-select__global-filter-toggle--open {
7864
8047
  .c4p--user-profile-image--xl {
7865
8048
  width: 4rem;
7866
8049
  height: 4rem;
7867
- font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
7868
- font-weight: var(--cds-productive-heading-04-font-weight, 400);
7869
- line-height: var(--cds-productive-heading-04-line-height, 1.28572);
7870
- letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
8050
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
8051
+ font-weight: var(--cds-heading-04-font-weight, 400);
8052
+ line-height: var(--cds-heading-04-line-height, 1.28572);
8053
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
7871
8054
  }
7872
8055
 
7873
8056
  .c4p--user-profile-image--lg {
7874
8057
  width: 2rem;
7875
8058
  height: 2rem;
7876
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
7877
- font-weight: var(--cds-body-short-01-font-weight, 400);
7878
- line-height: var(--cds-body-short-01-line-height, 1.28572);
7879
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
8059
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
8060
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
8061
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
8062
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
7880
8063
  }
7881
8064
 
7882
8065
  .c4p--user-profile-image--md {
@@ -8052,6 +8235,14 @@ button.c4p--add-select__global-filter-toggle--open {
8052
8235
  --cds-fluid-spacing-02: 2vw;
8053
8236
  --cds-fluid-spacing-03: 5vw;
8054
8237
  --cds-fluid-spacing-04: 10vw;
8238
+ --cds-caption-01-font-size: 0.75rem;
8239
+ --cds-caption-01-font-weight: 400;
8240
+ --cds-caption-01-line-height: 1.33333;
8241
+ --cds-caption-01-letter-spacing: 0.32px;
8242
+ --cds-caption-02-font-size: 0.875rem;
8243
+ --cds-caption-02-font-weight: 400;
8244
+ --cds-caption-02-line-height: 1.28572;
8245
+ --cds-caption-02-letter-spacing: 0.32px;
8055
8246
  --cds-label-01-font-size: 0.75rem;
8056
8247
  --cds-label-01-font-weight: 400;
8057
8248
  --cds-label-01-line-height: 1.33333;
@@ -8437,6 +8628,14 @@ button.c4p--add-select__global-filter-toggle--open {
8437
8628
  --cds-fluid-spacing-02: 2vw;
8438
8629
  --cds-fluid-spacing-03: 5vw;
8439
8630
  --cds-fluid-spacing-04: 10vw;
8631
+ --cds-caption-01-font-size: 0.75rem;
8632
+ --cds-caption-01-font-weight: 400;
8633
+ --cds-caption-01-line-height: 1.33333;
8634
+ --cds-caption-01-letter-spacing: 0.32px;
8635
+ --cds-caption-02-font-size: 0.875rem;
8636
+ --cds-caption-02-font-weight: 400;
8637
+ --cds-caption-02-line-height: 1.28572;
8638
+ --cds-caption-02-letter-spacing: 0.32px;
8440
8639
  --cds-label-01-font-size: 0.75rem;
8441
8640
  --cds-label-01-font-weight: 400;
8442
8641
  --cds-label-01-line-height: 1.33333;