@carbon/ibm-products 2.0.0-rc.3 → 2.0.0-rc.32

Sign up to get free protection for your applications and to get access to all the features.
Files changed (766) hide show
  1. package/README.md +46 -21
  2. package/css/config.css +3 -0
  3. package/css/config.css.map +1 -0
  4. package/css/index-full-carbon.css +6711 -4153
  5. package/css/index-full-carbon.css.map +1 -1
  6. package/css/index-full-carbon.min.css +6 -10
  7. package/css/index-full-carbon.min.css.map +1 -1
  8. package/css/index-without-carbon-released-only.css +853 -698
  9. package/css/index-without-carbon-released-only.css.map +1 -1
  10. package/css/index-without-carbon-released-only.min.css +2 -10
  11. package/css/index-without-carbon-released-only.min.css.map +1 -1
  12. package/css/index-without-carbon.css +1080 -1011
  13. package/css/index-without-carbon.css.map +1 -1
  14. package/css/index-without-carbon.min.css +6 -10
  15. package/css/index-without-carbon.min.css.map +1 -1
  16. package/css/index.css +1524 -1091
  17. package/css/index.css.map +1 -1
  18. package/css/index.min.css +6 -10
  19. package/css/index.min.css.map +1 -1
  20. package/es/components/APIKeyModal/APIKeyDownloader.js +29 -41
  21. package/es/components/APIKeyModal/APIKeyModal.js +101 -185
  22. package/es/components/APIKeyModal/index.js +1 -0
  23. package/es/components/AboutModal/AboutModal.js +76 -111
  24. package/es/components/AboutModal/index.js +1 -0
  25. package/es/components/ActionBar/ActionBar.js +71 -90
  26. package/es/components/ActionBar/ActionBarItem.js +21 -22
  27. package/es/components/ActionBar/ActionBarOverflowItems.js +13 -12
  28. package/es/components/ActionBar/index.js +1 -0
  29. package/es/components/ActionSet/ActionSet.js +36 -42
  30. package/es/components/ActionSet/actions.js +1 -2
  31. package/es/components/ActionSet/index.js +1 -0
  32. package/es/components/AddSelect/AddSelect.js +9 -7
  33. package/es/components/AddSelect/AddSelectBody.js +119 -119
  34. package/es/components/AddSelect/AddSelectBreadcrumbs.js +10 -9
  35. package/es/components/AddSelect/AddSelectColumn.js +44 -56
  36. package/es/components/AddSelect/AddSelectFilter.js +32 -43
  37. package/es/components/AddSelect/AddSelectFormControl.js +82 -0
  38. package/es/components/AddSelect/AddSelectList.js +31 -218
  39. package/es/components/AddSelect/AddSelectMetaPanel.js +10 -5
  40. package/es/components/AddSelect/AddSelectRow.js +206 -0
  41. package/es/components/AddSelect/AddSelectSidebar.js +19 -23
  42. package/es/components/AddSelect/AddSelectSort.js +10 -8
  43. package/es/components/AddSelect/add-select-utils.js +10 -24
  44. package/es/components/AddSelect/hooks/useFocus.js +31 -0
  45. package/es/components/AddSelect/hooks/useItemSort.js +13 -8
  46. package/es/components/AddSelect/hooks/useParentSelect.js +10 -6
  47. package/es/components/AddSelect/hooks/usePath.js +27 -21
  48. package/es/components/AddSelect/index.js +2 -1
  49. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +75 -104
  50. package/es/components/BreadcrumbWithOverflow/index.js +2 -0
  51. package/es/components/ButtonMenu/ButtonMenu.js +39 -37
  52. package/es/components/ButtonMenu/ButtonMenuItem.js +10 -6
  53. package/es/components/ButtonMenu/index.js +1 -0
  54. package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +42 -64
  55. package/es/components/ButtonSetWithOverflow/index.js +1 -0
  56. package/es/components/Card/Card.js +64 -80
  57. package/es/components/Card/CardFooter.js +21 -20
  58. package/es/components/Card/CardHeader.js +15 -15
  59. package/es/components/Card/index.js +1 -0
  60. package/es/components/Cascade/Cascade.js +5 -14
  61. package/es/components/ComboButton/ComboButton.js +24 -35
  62. package/es/components/ComboButton/ComboButtonItem/index.js +4 -8
  63. package/es/components/ComboButton/index.js +1 -0
  64. package/es/components/CreateFullPage/CreateFullPage.js +80 -90
  65. package/es/components/CreateFullPage/CreateFullPageStep.js +44 -49
  66. package/es/components/CreateFullPage/index.js +1 -0
  67. package/es/components/CreateInfluencer/CreateInfluencer.js +14 -15
  68. package/es/components/CreateInfluencer/index.js +1 -0
  69. package/es/components/CreateModal/CreateModal.js +19 -31
  70. package/es/components/CreateModal/index.js +2 -0
  71. package/es/components/CreateSidePanel/CreateSidePanel.js +24 -37
  72. package/es/components/CreateSidePanel/index.js +1 -0
  73. package/es/components/CreateTearsheet/CreateTearsheet.js +80 -91
  74. package/es/components/CreateTearsheet/CreateTearsheetDivider.js +4 -4
  75. package/es/components/CreateTearsheet/CreateTearsheetStep.js +39 -50
  76. package/es/components/CreateTearsheet/index.js +1 -0
  77. package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +60 -84
  78. package/es/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +50 -70
  79. package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +32 -41
  80. package/es/components/CreateTearsheetNarrow/index.js +1 -0
  81. package/es/components/DataSpreadsheet/DataSpreadsheet.js +139 -229
  82. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +62 -113
  83. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +25 -56
  84. package/es/components/DataSpreadsheet/hooks/index.js +1 -0
  85. package/es/components/DataSpreadsheet/hooks/useMoveActiveCell.js +6 -5
  86. package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +23 -44
  87. package/es/components/DataSpreadsheet/hooks/useResetSpreadsheetFocus.js +5 -5
  88. package/es/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js +18 -30
  89. package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +10 -14
  90. package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +34 -54
  91. package/es/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +10 -10
  92. package/es/components/DataSpreadsheet/index.js +1 -0
  93. package/es/components/DataSpreadsheet/utils/checkActiveHeaderCell.js +4 -8
  94. package/es/components/DataSpreadsheet/utils/checkSelectedHeaderCell.js +3 -4
  95. package/es/components/DataSpreadsheet/utils/createActiveCellFn.js +15 -19
  96. package/es/components/DataSpreadsheet/utils/createCellSelectionArea.js +15 -17
  97. package/es/components/DataSpreadsheet/utils/generateData.js +4 -13
  98. package/es/components/DataSpreadsheet/utils/getCellSize.js +1 -6
  99. package/es/components/DataSpreadsheet/utils/getSelectionAreaPoints.js +1 -0
  100. package/es/components/DataSpreadsheet/utils/getSpreadsheetWidth.js +7 -9
  101. package/es/components/DataSpreadsheet/utils/handleActiveCellInSelectionEnter.js +20 -34
  102. package/es/components/DataSpreadsheet/utils/handleActiveCellInSelectionTab.js +20 -30
  103. package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +18 -9
  104. package/es/components/DataSpreadsheet/utils/handleEditSubmit.js +13 -20
  105. package/es/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +22 -44
  106. package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +40 -75
  107. package/es/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +6 -8
  108. package/es/components/DataSpreadsheet/utils/removeCellSelections.js +6 -8
  109. package/es/components/DataSpreadsheet/utils/selectAllCells.js +7 -11
  110. package/es/components/Datagrid/Datagrid/Datagrid.js +21 -17
  111. package/es/components/Datagrid/Datagrid/DatagridBody.js +4 -10
  112. package/es/components/Datagrid/Datagrid/DatagridContent.js +89 -57
  113. package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +29 -26
  114. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +4 -6
  115. package/es/components/Datagrid/Datagrid/DatagridHead.js +7 -8
  116. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +8 -13
  117. package/es/components/Datagrid/Datagrid/DatagridRefBody.js +8 -9
  118. package/es/components/Datagrid/Datagrid/DatagridRow.js +76 -28
  119. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +29 -24
  120. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +47 -44
  121. package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js +6 -10
  122. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +37 -46
  123. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +53 -31
  124. package/es/components/Datagrid/Datagrid/DraggableElement.js +82 -89
  125. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +10 -14
  126. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +18 -21
  127. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +37 -85
  128. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +176 -0
  129. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +109 -0
  130. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +51 -0
  131. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/common.js +1 -1
  132. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/index.js +2 -1
  133. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +244 -0
  134. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +269 -0
  135. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +83 -0
  136. package/es/components/Datagrid/Datagrid/addons/Filtering/constants.js +27 -0
  137. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +11 -0
  138. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +299 -0
  139. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +21 -0
  140. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +34 -0
  141. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +23 -0
  142. package/es/components/Datagrid/Datagrid/addons/Filtering/index.js +9 -0
  143. package/es/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js +55 -0
  144. package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +84 -0
  145. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +11 -12
  146. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +73 -118
  147. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +7 -21
  148. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +1 -1
  149. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +9 -14
  150. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +2 -3
  151. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +29 -64
  152. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +14 -21
  153. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +35 -33
  154. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +19 -27
  155. package/es/components/Datagrid/Datagrid/addons/RowSize/index.js +1 -0
  156. package/es/components/Datagrid/Datagrid/index.js +1 -0
  157. package/es/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js +10 -0
  158. package/es/components/Datagrid/Datagrid.stories/common.js +2 -11
  159. package/es/components/Datagrid/Datagrid.stories/index.js +0 -1
  160. package/es/components/Datagrid/common-column-ids.js +1 -0
  161. package/es/components/Datagrid/index.js +10 -7
  162. package/es/components/Datagrid/useActionsColumn.js +42 -32
  163. package/es/components/Datagrid/useColumnCenterAlign.js +0 -8
  164. package/es/components/Datagrid/useColumnOrder.js +1 -0
  165. package/es/components/Datagrid/useColumnRightAlign.js +0 -8
  166. package/es/components/Datagrid/useCustomizeColumns.js +11 -19
  167. package/es/components/Datagrid/useDatagrid.js +0 -7
  168. package/es/components/Datagrid/useDefaultStringRenderer.js +1 -10
  169. package/es/components/Datagrid/useDisableSelectRows.js +2 -10
  170. package/es/components/Datagrid/useEditableCell.js +12 -0
  171. package/es/components/Datagrid/useExpandedRow.js +5 -15
  172. package/es/components/Datagrid/useFiltering.js +91 -0
  173. package/es/components/Datagrid/useFlexResize.js +0 -7
  174. package/es/components/Datagrid/useFloatingScroll.js +9 -22
  175. package/es/components/Datagrid/useInfiniteScroll.js +15 -17
  176. package/es/components/Datagrid/useInlineEdit.js +17 -20
  177. package/es/components/Datagrid/useNestedRowExpander.js +7 -8
  178. package/es/components/Datagrid/useNestedRows.js +13 -12
  179. package/es/components/Datagrid/useOnRowClick.js +16 -13
  180. package/es/components/Datagrid/useParentDimensions.js +9 -17
  181. package/es/components/Datagrid/useResizeTable.js +1 -7
  182. package/es/components/Datagrid/useRowExpander.js +11 -8
  183. package/es/components/Datagrid/useRowIsMouseOver.js +6 -15
  184. package/es/components/Datagrid/useRowRenderer.js +0 -5
  185. package/es/components/Datagrid/useRowSize.js +8 -20
  186. package/es/components/Datagrid/useSelectAllToggle.js +27 -24
  187. package/es/components/Datagrid/useSelectRows.js +30 -31
  188. package/es/components/Datagrid/useSkeletonRows.js +1 -6
  189. package/es/components/Datagrid/useSortableColumns.js +33 -39
  190. package/es/components/Datagrid/useStickyColumn.js +21 -36
  191. package/es/components/Datagrid/utils/DatagridActions.js +166 -79
  192. package/es/components/Datagrid/utils/DatagridPagination.js +5 -6
  193. package/es/components/Datagrid/utils/Wrapper.js +1 -1
  194. package/es/components/Datagrid/utils/getArgTypes.js +10 -0
  195. package/es/components/Datagrid/utils/getAutoSizedColumnWidth.js +27 -0
  196. package/es/components/Datagrid/utils/getInlineEditColumns.js +8 -4
  197. package/es/components/Datagrid/utils/makeData.js +23 -30
  198. package/es/components/EditFullPage/EditFullPage.js +27 -20
  199. package/es/components/EditFullPage/index.js +1 -0
  200. package/es/components/EditInPlace/EditInPlace.js +303 -0
  201. package/es/components/{InlineEdit → EditInPlace}/index.js +2 -1
  202. package/es/components/EditSidePanel/EditSidePanel.js +38 -51
  203. package/es/components/EditSidePanel/index.js +1 -0
  204. package/es/components/EditTearsheet/EditTearsheet.js +35 -45
  205. package/es/components/EditTearsheet/EditTearsheetForm.js +19 -25
  206. package/es/components/EditTearsheet/index.js +1 -0
  207. package/es/components/EditTearsheet/preview-components/MultiFormEditTearsheet.js +37 -49
  208. package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.js +27 -20
  209. package/es/components/EditTearsheetNarrow/index.js +1 -0
  210. package/es/components/EditUpdateCards/EditUpdateCards.js +142 -0
  211. package/es/components/EditUpdateCards/index.js +8 -0
  212. package/es/components/EmptyStates/EmptyState.js +33 -36
  213. package/es/components/EmptyStates/EmptyStateContent.js +19 -18
  214. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +28 -26
  215. package/es/components/EmptyStates/ErrorEmptyState/index.js +1 -0
  216. package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +28 -26
  217. package/es/components/EmptyStates/NoDataEmptyState/index.js +1 -0
  218. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +28 -26
  219. package/es/components/EmptyStates/NoTagsEmptyState/index.js +1 -0
  220. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +28 -26
  221. package/es/components/EmptyStates/NotFoundEmptyState/index.js +1 -0
  222. package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +28 -26
  223. package/es/components/EmptyStates/NotificationsEmptyState/index.js +1 -0
  224. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +28 -26
  225. package/es/components/EmptyStates/UnauthorizedEmptyState/index.js +1 -0
  226. package/es/components/EmptyStates/assets/ErrorIllustration.js +7 -6
  227. package/es/components/EmptyStates/assets/NoDataIllustration.js +7 -6
  228. package/es/components/EmptyStates/assets/NoTagsIllustration.js +7 -6
  229. package/es/components/EmptyStates/assets/NotFoundIllustration.js +7 -6
  230. package/es/components/EmptyStates/assets/NotificationsIllustration.js +7 -6
  231. package/es/components/EmptyStates/assets/UnauthorizedIllustration.js +7 -6
  232. package/es/components/EmptyStates/index.js +1 -0
  233. package/es/components/ExampleComponent/ExampleComponent.js +69 -48
  234. package/es/components/ExampleComponent/ExampleDeprecatedComponent.js +28 -0
  235. package/es/components/ExampleComponent/index.js +1 -0
  236. package/es/components/ExampleComponent/useExample.js +49 -0
  237. package/es/components/ExportModal/ExportModal.js +41 -80
  238. package/es/components/ExportModal/index.js +1 -0
  239. package/es/components/ExpressiveCard/ExpressiveCard.js +6 -23
  240. package/es/components/ExpressiveCard/index.js +1 -0
  241. package/es/components/FilterSummary/FilterSummary.js +54 -0
  242. package/es/components/FilterSummary/index.js +7 -0
  243. package/es/components/HTTPErrors/HTTPError403/HTTPError403.js +16 -18
  244. package/es/components/HTTPErrors/HTTPError403/index.js +1 -0
  245. package/es/components/HTTPErrors/HTTPError404/HTTPError404.js +16 -18
  246. package/es/components/HTTPErrors/HTTPError404/index.js +1 -0
  247. package/es/components/HTTPErrors/HTTPErrorContent.js +15 -18
  248. package/es/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +16 -18
  249. package/es/components/HTTPErrors/HTTPErrorOther/index.js +1 -0
  250. package/es/components/HTTPErrors/assets/HTTPErrorSvg403.js +6 -3
  251. package/es/components/HTTPErrors/assets/HTTPErrorSvg404.js +6 -3
  252. package/es/components/HTTPErrors/assets/HTTPErrorSvgOther.js +6 -3
  253. package/es/components/HTTPErrors/index.js +1 -0
  254. package/es/components/ImportModal/ImportModal.js +82 -137
  255. package/es/components/ImportModal/index.js +1 -0
  256. package/es/components/MultiAddSelect/MultiAddSelect.js +14 -29
  257. package/es/components/MultiAddSelect/index.js +7 -0
  258. package/es/components/NotificationsPanel/NotificationsPanel.js +85 -126
  259. package/es/components/NotificationsPanel/NotificationsPanel_data.js +1 -0
  260. package/es/components/NotificationsPanel/index.js +1 -0
  261. package/es/components/NotificationsPanel/preview-components/UnreadNotificationBell.js +1 -2
  262. package/es/components/NotificationsPanel/utils.js +13 -19
  263. package/es/components/OptionsTile/OptionsTile.js +73 -86
  264. package/es/components/OptionsTile/index.js +1 -0
  265. package/es/components/PageHeader/PageHeader.js +159 -225
  266. package/es/components/PageHeader/PageHeaderDemo.data.js +0 -1
  267. package/es/components/PageHeader/PageHeaderTitle.js +35 -39
  268. package/es/components/PageHeader/PageHeaderUtils.js +18 -45
  269. package/es/components/PageHeader/index.js +1 -0
  270. package/es/components/ProductiveCard/ProductiveCard.js +10 -27
  271. package/es/components/ProductiveCard/index.js +1 -0
  272. package/es/components/RemoveModal/RemoveModal.js +41 -47
  273. package/es/components/RemoveModal/index.js +1 -0
  274. package/es/components/Saving/Saving.js +15 -30
  275. package/es/components/Saving/index.js +1 -0
  276. package/es/components/SidePanel/SidePanel.js +166 -213
  277. package/es/components/SidePanel/constants.js +1 -0
  278. package/es/components/SidePanel/index.js +1 -0
  279. package/es/components/SidePanel/motion/variants.js +46 -0
  280. package/es/components/SingleAddSelect/SingleAddSelect.js +7 -14
  281. package/es/components/SingleAddSelect/index.js +7 -0
  282. package/es/components/StatusIcon/StatusIcon.js +5 -12
  283. package/es/components/StatusIcon/index.js +1 -0
  284. package/es/components/TagSet/TagSet.js +62 -97
  285. package/es/components/TagSet/TagSetModal.js +19 -30
  286. package/es/components/TagSet/TagSetOverflow.js +14 -23
  287. package/es/components/TagSet/constants.js +1 -0
  288. package/es/components/TagSet/index.js +1 -0
  289. package/es/components/Tearsheet/Tearsheet.js +37 -36
  290. package/es/components/Tearsheet/TearsheetNarrow.js +26 -25
  291. package/es/components/Tearsheet/TearsheetShell.js +92 -102
  292. package/es/components/Tearsheet/index.js +1 -0
  293. package/es/components/Toolbar/Toolbar.js +13 -27
  294. package/es/components/Toolbar/ToolbarButton.js +8 -14
  295. package/es/components/Toolbar/ToolbarGroup.js +4 -6
  296. package/es/components/Toolbar/index.js +1 -0
  297. package/es/components/UserProfileImage/UserProfileImage.js +26 -40
  298. package/es/components/UserProfileImage/index.js +2 -0
  299. package/es/components/WebTerminal/WebTerminal.js +44 -54
  300. package/es/components/WebTerminal/WebTerminalContentWrapper.js +14 -11
  301. package/es/components/WebTerminal/hooks/index.js +8 -7
  302. package/es/components/WebTerminal/index.js +1 -0
  303. package/es/components/WebTerminal/preview-components/Navigation.js +2 -4
  304. package/es/components/WebTerminal/preview-components/documentationLinks.js +1 -0
  305. package/es/components/_Canary/Canary.js +13 -13
  306. package/es/components/_Canary/index.js +1 -0
  307. package/es/components/index.js +6 -5
  308. package/es/global/js/hooks/index.js +3 -1
  309. package/es/global/js/hooks/useActiveElement.js +4 -6
  310. package/es/global/js/hooks/useClickOutside.js +1 -1
  311. package/es/global/js/hooks/useControllableState.js +74 -0
  312. package/es/global/js/hooks/useCreateComponentFocus.js +35 -13
  313. package/es/global/js/hooks/useCreateComponentStepChange.js +94 -131
  314. package/es/global/js/hooks/usePreviousValue.js +2 -1
  315. package/es/global/js/hooks/useResetCreateComponent.js +16 -11
  316. package/es/global/js/hooks/useResizeObserver.js +74 -0
  317. package/es/global/js/hooks/useRetrieveStepData.js +7 -10
  318. package/es/global/js/hooks/useValidCreateStepCount.js +2 -1
  319. package/es/global/js/hooks/useWindowResize.js +14 -16
  320. package/es/global/js/hooks/useWindowScroll.js +10 -14
  321. package/es/global/js/package-settings.js +32 -19
  322. package/es/global/js/utils/ClickListener.js +5 -10
  323. package/es/global/js/utils/DisplayBox.js +3 -2
  324. package/es/global/js/utils/Wrap.js +14 -17
  325. package/es/global/js/utils/deepCloneObject.js +5 -8
  326. package/es/global/js/utils/devtools.js +1 -4
  327. package/es/global/js/utils/getBezierValues.js +19 -0
  328. package/es/global/js/utils/getFocusableElements.js +1 -1
  329. package/es/global/js/utils/getNumberOfHiddenSteps.js +19 -0
  330. package/es/global/js/utils/getScrollbarWidth.js +1 -0
  331. package/es/global/js/utils/keyboardNavigation.js +7 -5
  332. package/es/global/js/utils/lastIndexInArray.js +0 -2
  333. package/es/global/js/utils/motionConstants.js +44 -0
  334. package/es/global/js/utils/pconsole.js +1 -3
  335. package/es/global/js/utils/props-helper.js +19 -35
  336. package/es/global/js/utils/rangeWithCallback.js +1 -0
  337. package/es/global/js/utils/scrollableAncestor.js +6 -9
  338. package/es/global/js/utils/story-helper.js +39 -10
  339. package/es/global/js/utils/test-helper.js +71 -59
  340. package/es/global/js/utils/unwrap-if-fragment.js +9 -17
  341. package/es/global/js/utils/uuidv4.js +1 -2
  342. package/es/global/js/utils/uuidv4.spec.js +1 -1
  343. package/es/global/js/utils/wait.js +1 -1
  344. package/es/global/js/utils/wrapFocus.js +8 -14
  345. package/es/index.js +1 -0
  346. package/es/settings.js +48 -29
  347. package/lib/components/APIKeyModal/APIKeyDownloader.js +29 -54
  348. package/lib/components/APIKeyModal/APIKeyModal.js +106 -207
  349. package/lib/components/APIKeyModal/index.js +0 -1
  350. package/lib/components/AboutModal/AboutModal.js +79 -128
  351. package/lib/components/AboutModal/index.js +0 -1
  352. package/lib/components/ActionBar/ActionBar.js +73 -106
  353. package/lib/components/ActionBar/ActionBarItem.js +23 -29
  354. package/lib/components/ActionBar/ActionBarOverflowItems.js +11 -22
  355. package/lib/components/ActionBar/index.js +0 -2
  356. package/lib/components/ActionSet/ActionSet.js +41 -52
  357. package/lib/components/ActionSet/actions.js +1 -5
  358. package/lib/components/ActionSet/index.js +0 -1
  359. package/lib/components/AddSelect/AddSelect.js +13 -19
  360. package/lib/components/AddSelect/AddSelectBody.js +121 -147
  361. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +10 -19
  362. package/lib/components/AddSelect/AddSelectColumn.js +47 -76
  363. package/lib/components/AddSelect/AddSelectFilter.js +35 -57
  364. package/lib/components/AddSelect/AddSelectFormControl.js +90 -0
  365. package/lib/components/AddSelect/AddSelectList.js +30 -232
  366. package/lib/components/AddSelect/AddSelectMetaPanel.js +9 -17
  367. package/lib/components/AddSelect/AddSelectRow.js +217 -0
  368. package/lib/components/AddSelect/AddSelectSidebar.js +23 -33
  369. package/lib/components/AddSelect/AddSelectSort.js +10 -19
  370. package/lib/components/AddSelect/add-select-utils.js +10 -34
  371. package/lib/components/AddSelect/hooks/useFocus.js +39 -0
  372. package/lib/components/AddSelect/hooks/useItemSort.js +12 -12
  373. package/lib/components/AddSelect/hooks/useParentSelect.js +9 -8
  374. package/lib/components/AddSelect/hooks/usePath.js +26 -23
  375. package/lib/components/AddSelect/index.js +0 -1
  376. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +75 -116
  377. package/lib/components/BreadcrumbWithOverflow/index.js +0 -1
  378. package/lib/components/ButtonMenu/ButtonMenu.js +40 -41
  379. package/lib/components/ButtonMenu/ButtonMenuItem.js +9 -10
  380. package/lib/components/ButtonMenu/index.js +0 -2
  381. package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +46 -83
  382. package/lib/components/ButtonSetWithOverflow/index.js +0 -1
  383. package/lib/components/Card/Card.js +66 -91
  384. package/lib/components/Card/CardFooter.js +21 -30
  385. package/lib/components/Card/CardHeader.js +15 -25
  386. package/lib/components/Card/index.js +0 -3
  387. package/lib/components/Cascade/Cascade.js +10 -31
  388. package/lib/components/Cascade/index.js +0 -1
  389. package/lib/components/ComboButton/ComboButton.js +29 -49
  390. package/lib/components/ComboButton/ComboButtonItem/index.js +2 -10
  391. package/lib/components/ComboButton/index.js +0 -2
  392. package/lib/components/CreateFullPage/CreateFullPage.js +83 -107
  393. package/lib/components/CreateFullPage/CreateFullPageStep.js +47 -63
  394. package/lib/components/CreateFullPage/index.js +0 -2
  395. package/lib/components/CreateInfluencer/CreateInfluencer.js +13 -24
  396. package/lib/components/CreateInfluencer/index.js +0 -1
  397. package/lib/components/CreateModal/CreateModal.js +24 -39
  398. package/lib/components/CreateModal/index.js +0 -1
  399. package/lib/components/CreateSidePanel/CreateSidePanel.js +26 -46
  400. package/lib/components/CreateSidePanel/index.js +0 -1
  401. package/lib/components/CreateTearsheet/CreateTearsheet.js +85 -110
  402. package/lib/components/CreateTearsheet/CreateTearsheetDivider.js +9 -14
  403. package/lib/components/CreateTearsheet/CreateTearsheetStep.js +43 -65
  404. package/lib/components/CreateTearsheet/index.js +0 -3
  405. package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +65 -96
  406. package/lib/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +50 -84
  407. package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +35 -49
  408. package/lib/components/CreateTearsheetNarrow/index.js +0 -1
  409. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +141 -259
  410. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +67 -136
  411. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +30 -76
  412. package/lib/components/DataSpreadsheet/hooks/index.js +0 -7
  413. package/lib/components/DataSpreadsheet/hooks/useMoveActiveCell.js +4 -7
  414. package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +23 -48
  415. package/lib/components/DataSpreadsheet/hooks/useResetSpreadsheetFocus.js +5 -9
  416. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js +18 -37
  417. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +7 -18
  418. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +39 -62
  419. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +8 -14
  420. package/lib/components/DataSpreadsheet/index.js +0 -1
  421. package/lib/components/DataSpreadsheet/utils/checkActiveHeaderCell.js +1 -9
  422. package/lib/components/DataSpreadsheet/utils/checkSelectedHeaderCell.js +3 -7
  423. package/lib/components/DataSpreadsheet/utils/createActiveCellFn.js +15 -23
  424. package/lib/components/DataSpreadsheet/utils/createCellSelectionArea.js +15 -22
  425. package/lib/components/DataSpreadsheet/utils/generateData.js +4 -16
  426. package/lib/components/DataSpreadsheet/utils/getCellSize.js +1 -8
  427. package/lib/components/DataSpreadsheet/utils/getSelectionAreaPoints.js +1 -2
  428. package/lib/components/DataSpreadsheet/utils/getSpreadsheetWidth.js +7 -12
  429. package/lib/components/DataSpreadsheet/utils/handleActiveCellInSelectionEnter.js +25 -39
  430. package/lib/components/DataSpreadsheet/utils/handleActiveCellInSelectionTab.js +20 -33
  431. package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +18 -13
  432. package/lib/components/DataSpreadsheet/utils/handleEditSubmit.js +16 -25
  433. package/lib/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +22 -50
  434. package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +45 -85
  435. package/lib/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +6 -12
  436. package/lib/components/DataSpreadsheet/utils/removeCellSelections.js +4 -10
  437. package/lib/components/DataSpreadsheet/utils/selectAllCells.js +12 -17
  438. package/lib/components/Datagrid/Datagrid/Datagrid.js +26 -31
  439. package/lib/components/Datagrid/Datagrid/DatagridBody.js +5 -16
  440. package/lib/components/Datagrid/Datagrid/DatagridContent.js +89 -80
  441. package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +28 -31
  442. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +4 -10
  443. package/lib/components/Datagrid/Datagrid/DatagridHead.js +6 -11
  444. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +8 -20
  445. package/lib/components/Datagrid/Datagrid/DatagridRefBody.js +15 -16
  446. package/lib/components/Datagrid/Datagrid/DatagridRow.js +85 -46
  447. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +40 -32
  448. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +45 -50
  449. package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +12 -17
  450. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +37 -59
  451. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +58 -40
  452. package/lib/components/Datagrid/Datagrid/DraggableElement.js +82 -101
  453. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +10 -23
  454. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +18 -25
  455. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +36 -99
  456. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +184 -0
  457. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +117 -0
  458. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +61 -0
  459. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/common.js +1 -5
  460. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/index.js +3 -6
  461. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +255 -0
  462. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +280 -0
  463. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +96 -0
  464. package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +45 -0
  465. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +34 -0
  466. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +309 -0
  467. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +30 -0
  468. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +41 -0
  469. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +30 -0
  470. package/lib/components/Datagrid/Datagrid/addons/Filtering/index.js +33 -0
  471. package/lib/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js +64 -0
  472. package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +91 -0
  473. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +11 -20
  474. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +0 -1
  475. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +80 -140
  476. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +0 -1
  477. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +12 -33
  478. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +1 -3
  479. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +0 -1
  480. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +14 -19
  481. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +2 -5
  482. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +34 -72
  483. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +14 -27
  484. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +34 -41
  485. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +19 -38
  486. package/lib/components/Datagrid/Datagrid/addons/RowSize/index.js +0 -2
  487. package/lib/components/Datagrid/Datagrid/index.js +0 -1
  488. package/lib/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js +10 -0
  489. package/lib/components/Datagrid/Datagrid.stories/common.js +2 -17
  490. package/lib/components/Datagrid/Datagrid.stories/index.js +0 -13
  491. package/lib/components/Datagrid/common-column-ids.js +1 -1
  492. package/lib/components/Datagrid/index.js +22 -20
  493. package/lib/components/Datagrid/useActionsColumn.js +49 -38
  494. package/lib/components/Datagrid/useColumnCenterAlign.js +7 -15
  495. package/lib/components/Datagrid/useColumnOrder.js +0 -2
  496. package/lib/components/Datagrid/useColumnRightAlign.js +7 -15
  497. package/lib/components/Datagrid/useCustomizeColumns.js +17 -26
  498. package/lib/components/Datagrid/useDatagrid.js +7 -21
  499. package/lib/components/Datagrid/useDefaultStringRenderer.js +8 -17
  500. package/lib/components/Datagrid/useDisableSelectRows.js +2 -11
  501. package/lib/components/Datagrid/useEditableCell.js +20 -0
  502. package/lib/components/Datagrid/useExpandedRow.js +12 -21
  503. package/lib/components/Datagrid/useFiltering.js +98 -0
  504. package/lib/components/Datagrid/useFlexResize.js +0 -9
  505. package/lib/components/Datagrid/useFloatingScroll.js +10 -27
  506. package/lib/components/Datagrid/useInfiniteScroll.js +15 -21
  507. package/lib/components/Datagrid/useInlineEdit.js +20 -26
  508. package/lib/components/Datagrid/useNestedRowExpander.js +7 -14
  509. package/lib/components/Datagrid/useNestedRows.js +14 -16
  510. package/lib/components/Datagrid/useOnRowClick.js +16 -14
  511. package/lib/components/Datagrid/useParentDimensions.js +10 -19
  512. package/lib/components/Datagrid/useResizeTable.js +2 -8
  513. package/lib/components/Datagrid/useRowExpander.js +12 -11
  514. package/lib/components/Datagrid/useRowIsMouseOver.js +12 -20
  515. package/lib/components/Datagrid/useRowRenderer.js +1 -7
  516. package/lib/components/Datagrid/useRowSize.js +14 -25
  517. package/lib/components/Datagrid/useSelectAllToggle.js +31 -31
  518. package/lib/components/Datagrid/useSelectRows.js +40 -44
  519. package/lib/components/Datagrid/useSkeletonRows.js +1 -8
  520. package/lib/components/Datagrid/useSortableColumns.js +33 -41
  521. package/lib/components/Datagrid/useStickyColumn.js +26 -42
  522. package/lib/components/Datagrid/utils/DatagridActions.js +168 -88
  523. package/lib/components/Datagrid/utils/DatagridPagination.js +5 -11
  524. package/lib/components/Datagrid/utils/Wrapper.js +1 -5
  525. package/lib/components/Datagrid/utils/getArgTypes.js +10 -1
  526. package/lib/components/Datagrid/utils/getAutoSizedColumnWidth.js +35 -0
  527. package/lib/components/Datagrid/utils/getInlineEditColumns.js +8 -10
  528. package/lib/components/Datagrid/utils/makeData.js +29 -41
  529. package/lib/components/EditFullPage/EditFullPage.js +30 -26
  530. package/lib/components/EditFullPage/index.js +0 -1
  531. package/lib/components/EditInPlace/EditInPlace.js +312 -0
  532. package/lib/components/{InlineEdit → EditInPlace}/index.js +3 -4
  533. package/lib/components/EditSidePanel/EditSidePanel.js +40 -59
  534. package/lib/components/EditSidePanel/index.js +0 -1
  535. package/lib/components/EditTearsheet/EditTearsheet.js +39 -61
  536. package/lib/components/EditTearsheet/EditTearsheetForm.js +24 -39
  537. package/lib/components/EditTearsheet/index.js +0 -2
  538. package/lib/components/EditTearsheet/preview-components/MultiFormEditTearsheet.js +37 -62
  539. package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.js +30 -26
  540. package/lib/components/EditTearsheetNarrow/index.js +0 -1
  541. package/lib/components/EditUpdateCards/EditUpdateCards.js +146 -0
  542. package/lib/components/EditUpdateCards/index.js +12 -0
  543. package/lib/components/EmptyStates/EmptyState.js +36 -49
  544. package/lib/components/EmptyStates/EmptyStateContent.js +21 -27
  545. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +31 -39
  546. package/lib/components/EmptyStates/ErrorEmptyState/index.js +0 -1
  547. package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +31 -39
  548. package/lib/components/EmptyStates/NoDataEmptyState/index.js +0 -1
  549. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +31 -39
  550. package/lib/components/EmptyStates/NoTagsEmptyState/index.js +0 -1
  551. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +31 -39
  552. package/lib/components/EmptyStates/NotFoundEmptyState/index.js +0 -1
  553. package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +31 -39
  554. package/lib/components/EmptyStates/NotificationsEmptyState/index.js +0 -1
  555. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +31 -39
  556. package/lib/components/EmptyStates/UnauthorizedEmptyState/index.js +0 -1
  557. package/lib/components/EmptyStates/assets/ErrorIllustration.js +10 -13
  558. package/lib/components/EmptyStates/assets/NoDataIllustration.js +10 -13
  559. package/lib/components/EmptyStates/assets/NoTagsIllustration.js +10 -13
  560. package/lib/components/EmptyStates/assets/NotFoundIllustration.js +10 -13
  561. package/lib/components/EmptyStates/assets/NotificationsIllustration.js +10 -13
  562. package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js +10 -13
  563. package/lib/components/EmptyStates/index.js +0 -7
  564. package/lib/components/ExampleComponent/ExampleComponent.js +75 -55
  565. package/lib/components/ExampleComponent/ExampleDeprecatedComponent.js +36 -0
  566. package/lib/components/ExampleComponent/index.js +0 -1
  567. package/lib/components/ExampleComponent/useExample.js +58 -0
  568. package/lib/components/ExportModal/ExportModal.js +46 -96
  569. package/lib/components/ExportModal/index.js +0 -1
  570. package/lib/components/ExpressiveCard/ExpressiveCard.js +6 -35
  571. package/lib/components/ExpressiveCard/index.js +0 -1
  572. package/lib/components/FilterSummary/FilterSummary.js +63 -0
  573. package/lib/components/FilterSummary/index.js +13 -0
  574. package/lib/components/HTTPErrors/HTTPError403/HTTPError403.js +19 -27
  575. package/lib/components/HTTPErrors/HTTPError403/index.js +0 -1
  576. package/lib/components/HTTPErrors/HTTPError404/HTTPError404.js +19 -27
  577. package/lib/components/HTTPErrors/HTTPError404/index.js +0 -1
  578. package/lib/components/HTTPErrors/HTTPErrorContent.js +17 -24
  579. package/lib/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +19 -27
  580. package/lib/components/HTTPErrors/HTTPErrorOther/index.js +0 -1
  581. package/lib/components/HTTPErrors/assets/HTTPErrorSvg403.js +6 -7
  582. package/lib/components/HTTPErrors/assets/HTTPErrorSvg404.js +6 -7
  583. package/lib/components/HTTPErrors/assets/HTTPErrorSvgOther.js +6 -7
  584. package/lib/components/HTTPErrors/index.js +0 -3
  585. package/lib/components/ImportModal/ImportModal.js +87 -155
  586. package/lib/components/ImportModal/index.js +0 -1
  587. package/lib/components/MultiAddSelect/MultiAddSelect.js +13 -39
  588. package/lib/components/MultiAddSelect/index.js +0 -1
  589. package/lib/components/NotificationsPanel/NotificationsPanel.js +87 -143
  590. package/lib/components/NotificationsPanel/NotificationsPanel_data.js +1 -4
  591. package/lib/components/NotificationsPanel/index.js +0 -1
  592. package/lib/components/NotificationsPanel/preview-components/UnreadNotificationBell.js +1 -4
  593. package/lib/components/NotificationsPanel/utils.js +13 -21
  594. package/lib/components/OptionsTile/OptionsTile.js +74 -101
  595. package/lib/components/OptionsTile/index.js +0 -1
  596. package/lib/components/PageHeader/PageHeader.js +162 -252
  597. package/lib/components/PageHeader/PageHeaderDemo.data.js +0 -3
  598. package/lib/components/PageHeader/PageHeaderTitle.js +35 -52
  599. package/lib/components/PageHeader/PageHeaderUtils.js +23 -59
  600. package/lib/components/PageHeader/index.js +0 -1
  601. package/lib/components/ProductiveCard/ProductiveCard.js +15 -41
  602. package/lib/components/ProductiveCard/index.js +0 -1
  603. package/lib/components/RemoveModal/RemoveModal.js +45 -63
  604. package/lib/components/RemoveModal/index.js +0 -1
  605. package/lib/components/Saving/Saving.js +20 -44
  606. package/lib/components/Saving/index.js +0 -1
  607. package/lib/components/SidePanel/SidePanel.js +169 -233
  608. package/lib/components/SidePanel/constants.js +1 -1
  609. package/lib/components/SidePanel/index.js +0 -1
  610. package/lib/components/SidePanel/motion/variants.js +54 -0
  611. package/lib/components/SingleAddSelect/SingleAddSelect.js +6 -25
  612. package/lib/components/SingleAddSelect/index.js +0 -1
  613. package/lib/components/StatusIcon/StatusIcon.js +11 -25
  614. package/lib/components/StatusIcon/index.js +0 -1
  615. package/lib/components/TagSet/TagSet.js +66 -117
  616. package/lib/components/TagSet/TagSetModal.js +23 -46
  617. package/lib/components/TagSet/TagSetOverflow.js +19 -42
  618. package/lib/components/TagSet/constants.js +1 -0
  619. package/lib/components/TagSet/index.js +0 -1
  620. package/lib/components/Tearsheet/Tearsheet.js +39 -44
  621. package/lib/components/Tearsheet/TearsheetNarrow.js +29 -34
  622. package/lib/components/Tearsheet/TearsheetShell.js +93 -123
  623. package/lib/components/Tearsheet/index.js +0 -2
  624. package/lib/components/Toolbar/Toolbar.js +18 -41
  625. package/lib/components/Toolbar/ToolbarButton.js +13 -27
  626. package/lib/components/Toolbar/ToolbarGroup.js +8 -16
  627. package/lib/components/Toolbar/index.js +0 -3
  628. package/lib/components/UserProfileImage/UserProfileImage.js +28 -48
  629. package/lib/components/UserProfileImage/index.js +0 -1
  630. package/lib/components/WebTerminal/WebTerminal.js +46 -70
  631. package/lib/components/WebTerminal/WebTerminalContentWrapper.js +17 -20
  632. package/lib/components/WebTerminal/hooks/index.js +8 -19
  633. package/lib/components/WebTerminal/index.js +0 -3
  634. package/lib/components/WebTerminal/preview-components/Navigation.js +2 -9
  635. package/lib/components/WebTerminal/preview-components/documentationLinks.js +1 -0
  636. package/lib/components/WebTerminal/preview-components/index.js +0 -2
  637. package/lib/components/_Canary/Canary.js +14 -17
  638. package/lib/components/_Canary/index.js +0 -1
  639. package/lib/components/index.js +33 -52
  640. package/lib/global/js/hooks/index.js +8 -11
  641. package/lib/global/js/hooks/useActiveElement.js +4 -10
  642. package/lib/global/js/hooks/useClickOutside.js +1 -4
  643. package/lib/global/js/hooks/useControllableState.js +80 -0
  644. package/lib/global/js/hooks/useCreateComponentFocus.js +35 -17
  645. package/lib/global/js/hooks/useCreateComponentStepChange.js +94 -136
  646. package/lib/global/js/hooks/usePreviousValue.js +0 -3
  647. package/lib/global/js/hooks/useResetCreateComponent.js +14 -13
  648. package/lib/global/js/hooks/useResizeObserver.js +83 -0
  649. package/lib/global/js/hooks/useRetrieveStepData.js +5 -12
  650. package/lib/global/js/hooks/useValidCreateStepCount.js +0 -3
  651. package/lib/global/js/hooks/useWindowResize.js +14 -22
  652. package/lib/global/js/hooks/useWindowScroll.js +10 -19
  653. package/lib/global/js/package-settings.js +37 -23
  654. package/lib/global/js/utils/ClickListener.js +3 -16
  655. package/lib/global/js/utils/DisplayBox.js +3 -9
  656. package/lib/global/js/utils/Wrap.js +16 -22
  657. package/lib/global/js/utils/deepCloneObject.js +5 -11
  658. package/lib/global/js/utils/devtools.js +1 -6
  659. package/lib/global/js/utils/getBezierValues.js +25 -0
  660. package/lib/global/js/utils/getFocusableElements.js +1 -4
  661. package/lib/global/js/utils/getNumberOfHiddenSteps.js +26 -0
  662. package/lib/global/js/utils/getScrollbarWidth.js +1 -2
  663. package/lib/global/js/utils/keyboardNavigation.js +7 -6
  664. package/lib/global/js/utils/lastIndexInArray.js +0 -4
  665. package/lib/global/js/utils/motionConstants.js +51 -0
  666. package/lib/global/js/utils/pconsole.js +1 -7
  667. package/lib/global/js/utils/props-helper.js +21 -58
  668. package/lib/global/js/utils/rangeWithCallback.js +1 -2
  669. package/lib/global/js/utils/scrollableAncestor.js +6 -13
  670. package/lib/global/js/utils/story-helper.js +41 -25
  671. package/lib/global/js/utils/test-helper.js +74 -88
  672. package/lib/global/js/utils/unwrap-if-fragment.js +8 -20
  673. package/lib/global/js/utils/uuidv4.js +1 -3
  674. package/lib/global/js/utils/uuidv4.spec.js +1 -3
  675. package/lib/global/js/utils/wait.js +1 -2
  676. package/lib/global/js/utils/wrapFocus.js +6 -16
  677. package/lib/index.js +0 -3
  678. package/lib/settings.js +49 -38
  679. package/package.json +29 -27
  680. package/scss/components/AboutModal/_about-modal.scss +26 -60
  681. package/scss/components/AboutModal/_storybook-styles.scss +18 -5
  682. package/scss/components/ActionBar/_action-bar.scss +0 -4
  683. package/scss/components/ActionSet/_action-set.scss +28 -10
  684. package/scss/components/AddSelect/_add-select.scss +44 -72
  685. package/scss/components/AddSelect/_index.scss +1 -1
  686. package/scss/components/AddSelect/_storybook-styles.scss +1 -1
  687. package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +10 -1
  688. package/scss/components/Card/_card.scss +13 -6
  689. package/scss/components/CreateFullPage/_create-full-page.scss +5 -10
  690. package/scss/components/CreateTearsheet/_create-tearsheet.scss +8 -3
  691. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +1 -1
  692. package/scss/components/Datagrid/_datagrid.scss +0 -1
  693. package/scss/components/Datagrid/_storybook-styles.scss +21 -0
  694. package/scss/components/Datagrid/styles/_datagrid.scss +131 -29
  695. package/scss/components/Datagrid/styles/_draggableElement.scss +27 -12
  696. package/scss/components/Datagrid/styles/_index.scss +9 -8
  697. package/scss/components/Datagrid/styles/_useExpandedRow.scss +20 -2
  698. package/scss/components/Datagrid/styles/_useInlineEdit.scss +36 -9
  699. package/scss/components/Datagrid/styles/_useNestedRows.scss +36 -0
  700. package/scss/components/Datagrid/styles/_useSelectAllToggle.scss +23 -15
  701. package/scss/components/Datagrid/styles/_useSortableColumns.scss +40 -18
  702. package/scss/components/Datagrid/styles/_useStickyColumn.scss +3 -3
  703. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss +82 -0
  704. package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss +87 -0
  705. package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +129 -0
  706. package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +19 -7
  707. package/scss/components/EditInPlace/_carbon-imports.scss +9 -0
  708. package/scss/components/EditInPlace/_edit-in-place.scss +164 -0
  709. package/scss/components/{InlineEdit → EditInPlace}/_index-with-carbon.scss +1 -1
  710. package/scss/components/EditInPlace/_index.scss +10 -0
  711. package/scss/components/{InlineEdit → EditInPlace}/_storybook-styles.scss +3 -15
  712. package/scss/components/EditTearsheet/_edit-tearsheet.scss +6 -4
  713. package/scss/components/EditUpdateCards/_carbon-imports.scss +9 -0
  714. package/scss/components/EditUpdateCards/_edit-update-cards.scss +85 -0
  715. package/scss/components/{InlineEdit/_carbon-imports.scss → EditUpdateCards/_index-with-carbon.scss} +3 -0
  716. package/scss/components/{InlineEdit → EditUpdateCards}/_index.scss +1 -1
  717. package/scss/components/EditUpdateCards/_storybook-styles.scss +55 -0
  718. package/scss/components/EmptyStates/_empty-state.scss +29 -6
  719. package/scss/components/ExportModal/_export-modal.scss +0 -4
  720. package/scss/components/ExpressiveCard/_expressive-card.scss +1 -1
  721. package/scss/components/FilterSummary/_filter-summary.scss +21 -0
  722. package/scss/components/{ModifiedTabs → FilterSummary}/_index.scss +4 -2
  723. package/scss/components/{ModifiedTabs/_index-with-carbon.scss → FilterSummary/_storybook-styles.scss} +8 -3
  724. package/scss/components/HTTPErrors/_http-errors.scss +8 -4
  725. package/scss/components/MultiAddSelect/_multi-add-select.scss +8 -1
  726. package/scss/components/MultiAddSelect/_storybook-styles.scss +1 -1
  727. package/scss/components/OptionsTile/_options-tile.scss +10 -3
  728. package/scss/components/PageHeader/_page-header.scss +9 -12
  729. package/scss/components/ProductiveCard/_productive-card.scss +31 -2
  730. package/scss/components/SidePanel/_side-panel.scss +10 -97
  731. package/scss/components/SidePanel/_storybook-styles.scss +6 -1
  732. package/scss/components/SingleAddSelect/_carbon-imports.scss +1 -1
  733. package/scss/components/SingleAddSelect/_index-with-carbon.scss +1 -1
  734. package/scss/components/SingleAddSelect/_index.scss +7 -0
  735. package/scss/components/SingleAddSelect/_single-add-select.scss +8 -1
  736. package/scss/components/SingleAddSelect/_storybook-styles.scss +1 -1
  737. package/scss/components/TagSet/_tag-set.scss +1 -0
  738. package/scss/components/Tearsheet/_carbon-imports.scss +2 -1
  739. package/scss/components/Tearsheet/_tearsheet.scss +10 -5
  740. package/scss/components/UserProfileImage/_user-profile-image.scss +5 -0
  741. package/scss/components/_index-released-only-with-carbon.scss +3 -1
  742. package/scss/components/_index-released-only.scss +3 -1
  743. package/scss/components/_index-with-carbon.scss +2 -2
  744. package/scss/components/_index.scss +3 -2
  745. package/scss/config.scss +1 -0
  746. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +0 -194
  747. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +0 -63
  748. package/es/components/Datagrid/Datagrid.stories/LeftPanelStory.js +0 -6
  749. package/es/components/InlineEdit/InlineEdit.js +0 -447
  750. package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +0 -34
  751. package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +0 -47
  752. package/es/components/ModifiedTabs/ModifiedTabs.js +0 -141
  753. package/es/components/ModifiedTabs/index.js +0 -1
  754. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +0 -209
  755. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +0 -74
  756. package/lib/components/Datagrid/Datagrid.stories/LeftPanelStory.js +0 -13
  757. package/lib/components/InlineEdit/InlineEdit.js +0 -464
  758. package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +0 -50
  759. package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +0 -63
  760. package/lib/components/ModifiedTabs/ModifiedTabs.js +0 -164
  761. package/lib/components/ModifiedTabs/index.js +0 -13
  762. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +0 -91
  763. package/scss/components/InlineEdit/_inline-edit.scss +0 -355
  764. package/scss/components/ModifiedTabs/_carbon-imports.scss +0 -10
  765. package/scss/components/ModifiedTabs/_modified-tabs.scss +0 -89
  766. package/scss/components/ModifiedTabs/_storybook-styles.scss +0 -6
@@ -3,61 +3,66 @@
3
3
  }
4
4
 
5
5
  .c4p--about-modal .c4p--about-modal__logo {
6
- margin: 1rem;
6
+ margin: 1rem 1rem 2rem 1rem;
7
7
  }
8
8
 
9
9
  .c4p--about-modal .c4p--about-modal__header {
10
- padding: 0 20% 0.5rem 1rem;
10
+ padding: 0 20% 0 1rem;
11
11
  margin-bottom: 0;
12
12
  grid-row: auto;
13
13
  }
14
14
 
15
15
  .c4p--about-modal .c4p--about-modal__title {
16
- font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
17
- font-weight: var(--cds-productive-heading-04-font-weight, 400);
18
- line-height: var(--cds-productive-heading-04-line-height, 1.28572);
19
- letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
16
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
17
+ font-weight: var(--cds-heading-04-font-weight, 400);
18
+ line-height: var(--cds-heading-04-line-height, 1.28572);
19
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
20
20
  color: var(--cds-text-primary, #161616);
21
21
  }
22
22
 
23
23
  .c4p--about-modal .c4p--about-modal__body {
24
- font-size: var(--cds-body-short-02-font-size, 1rem);
25
- font-weight: var(--cds-body-short-02-font-weight, 400);
26
- line-height: var(--cds-body-short-02-line-height, 1.375);
27
- letter-spacing: var(--cds-body-short-02-letter-spacing, 0);
24
+ font-size: var(--cds-body-compact-02-font-size, 1rem);
25
+ font-weight: var(--cds-body-compact-02-font-weight, 400);
26
+ line-height: var(--cds-body-compact-02-line-height, 1.375);
27
+ letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
28
28
  min-height: 4rem;
29
29
  padding: 0 20% 0 1rem;
30
+ margin-bottom: 1.5rem;
30
31
  grid-row: auto;
31
32
  overflow-x: hidden;
32
33
  overflow-y: auto;
33
34
  }
34
35
 
35
- .c4p--about-modal.c4p--about-modal--with-tabs .c4p--about-modal__body {
36
- min-height: calc(4rem + 2.5rem);
37
- margin-bottom: calc(3rem + 2.5rem);
38
- }
39
-
40
- .c4p--about-modal.c4p--about-modal--with-tabs .cds--modal-content--overflow-indicator {
41
- bottom: calc(3rem + 2.5rem);
42
- }
43
-
44
36
  .c4p--about-modal .cds--modal-content--overflow-indicator {
37
+ bottom: 1.5rem;
45
38
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--cds-layer-01, #f4f4f4));
46
39
  }
47
40
 
48
41
  .c4p--about-modal .c4p--about-modal__links-container {
49
- margin-top: 1rem;
42
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
43
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
44
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
45
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
46
+ margin-top: 1.5rem;
47
+ }
48
+
49
+ .c4p--about-modal .c4p--about-modal__version {
50
+ color: var(--cds-text-secondary, #525252);
50
51
  }
51
52
 
52
53
  .c4p--about-modal .c4p--about-modal__links-container a + a {
53
54
  padding-left: 0.5rem;
54
- border-left: 1px solid var(--cds-text-primary, #161616);
55
+ border-left: 1px solid var(--cds-border-strong-01, #8d8d8d);
55
56
  margin-left: 0.5rem;
56
57
  }
57
58
 
58
- .c4p--about-modal .c4p--about-modal__legal-text,
59
+ .c4p--about-modal .c4p--about-modal__content,
59
60
  .c4p--about-modal .c4p--about-modal__copyright-text {
60
- margin-top: 2rem;
61
+ font-size: var(--cds-label-01-font-size, 0.75rem);
62
+ font-weight: var(--cds-label-01-font-weight, 400);
63
+ line-height: var(--cds-label-01-line-height, 1.33333);
64
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
65
+ margin-top: 1.5rem;
61
66
  margin-bottom: 0;
62
67
  color: var(--cds-text-secondary, #525252);
63
68
  }
@@ -66,51 +71,16 @@
66
71
  margin-top: 1rem;
67
72
  }
68
73
 
69
- .c4p--about-modal .c4p--about-modal__footer {
70
- position: relative;
71
- height: 4.5rem;
72
- flex-direction: column;
73
- justify-content: center;
74
- background-color: var(--cds-background-inverse, #393939);
75
- color: var(--cds-text-inverse, #ffffff);
76
- }
77
-
78
- .c4p--about-modal .c4p--about-modal__tab-container {
79
- position: absolute;
80
- bottom: 0;
81
- }
82
-
83
- .c4p--about-modal .c4p--about-modal__version-label,
84
- .c4p--about-modal .c4p--about-modal__version-number {
85
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
86
- font-weight: var(--cds-body-short-01-font-weight, 400);
87
- line-height: var(--cds-body-short-01-line-height, 1.28572);
88
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
89
- padding-left: 1rem;
90
- margin-top: 0;
91
- margin-bottom: 0;
92
- color: var(--cds-text-inverse, #ffffff);
93
- }
94
-
95
- .c4p--about-modal .c4p--about-modal__version-label {
96
- font-weight: 600;
97
- }
98
-
99
- .c4p--about-modal .cds--tabs .cds--tabs__nav-link,
100
- .c4p--about-modal .cds--tab-content {
101
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
102
- font-weight: var(--cds-body-short-01-font-weight, 400);
103
- line-height: var(--cds-body-short-01-line-height, 1.28572);
104
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
105
- }
106
-
107
- .c4p--about-modal .cds--tab-content {
108
- height: 4.5rem;
74
+ p.c4p--about-modal__content:first-child,
75
+ p.c4p--about-modal__copyright-text:first-child {
76
+ margin-top: 2rem;
109
77
  }
110
78
 
111
- .c4p--about-modal .cds--tab-content:not([hidden]) {
112
- display: flex;
113
- align-items: center;
79
+ .c4p--about-modal .c4p--about-modal__footer {
80
+ display: block;
81
+ height: auto;
82
+ padding: 1rem;
83
+ background-color: var(--cds-layer-02, #ffffff);
114
84
  }
115
85
 
116
86
  .c4p--apikey-modal .cds--modal-close {
@@ -164,14 +134,17 @@
164
134
  font-weight: var(--cds-body-short-01-font-weight, 400);
165
135
  line-height: var(--cds-body-short-01-line-height, 1.28572);
166
136
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
167
- height: 4rem;
168
137
  align-items: center;
138
+ margin: 0;
139
+ }
140
+ .c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive {
141
+ height: 4rem;
169
142
  padding-top: 1rem;
170
143
  padding-bottom: 2rem;
171
- margin: 0;
172
144
  }
173
145
 
174
- .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive {
146
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive,
147
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn {
175
148
  max-width: none;
176
149
  }
177
150
 
@@ -203,7 +176,7 @@
203
176
  .c4p--action-set.cds--btn-set.c4p--action-set--xl .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
204
177
  .c4p--action-set.cds--btn-set.c4p--action-set--2xl .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
205
178
  .c4p--action-set.cds--btn-set.c4p--action-set--row-quadruple .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost) {
206
- max-width: rem(232px);
179
+ max-width: 14.5rem;
207
180
  flex: 0 1 25%;
208
181
  }
209
182
 
@@ -1721,7 +1694,7 @@
1721
1694
  }
1722
1695
  @media (prefers-reduced-motion: no-preference) {
1723
1696
  .c4p--cascade__element,
1724
- .c4p--cascade__col {
1697
+ .c4p--cascade__col {
1725
1698
  /* stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use -- Carbon animation duration defined above in $animationProps */
1726
1699
  animation: 240ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 fade;
1727
1700
  animation-fill-mode: forwards;
@@ -1897,9 +1870,9 @@
1897
1870
 
1898
1871
  @media (prefers-reduced-motion) {
1899
1872
  .c4p--create-influencer__side-nav-opening,
1900
- .c4p--create-influencer__progress-indicator-opening,
1901
- .c4p--create-influencer__side-nav-closing,
1902
- .c4p--create-influencer__progress-indicator-closing {
1873
+ .c4p--create-influencer__progress-indicator-opening,
1874
+ .c4p--create-influencer__side-nav-closing,
1875
+ .c4p--create-influencer__progress-indicator-closing {
1903
1876
  animation: none;
1904
1877
  opacity: 1;
1905
1878
  }
@@ -1927,8 +1900,6 @@
1927
1900
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
1928
1901
  line-height: var(--cds-productive-heading-01-line-height, 1.28572);
1929
1902
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
1930
- max-width: 50%;
1931
- padding-left: 2.5rem;
1932
1903
  margin-bottom: 0.5rem;
1933
1904
  }
1934
1905
 
@@ -1937,8 +1908,6 @@
1937
1908
  font-weight: var(--cds-body-long-01-font-weight, 400);
1938
1909
  line-height: var(--cds-body-long-01-line-height, 1.42857);
1939
1910
  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
1940
- max-width: 50%;
1941
- padding-left: 2.5rem;
1942
1911
  margin-bottom: 1.5rem;
1943
1912
  }
1944
1913
 
@@ -1993,7 +1962,8 @@
1993
1962
  position: relative;
1994
1963
  padding-bottom: 2rem;
1995
1964
  }
1996
- .c4p--create-full-page .c4p--create-full-page__step .cds--css-grid {
1965
+
1966
+ .c4p--create-full-page__step .cds--css-grid {
1997
1967
  margin-left: 0;
1998
1968
  }
1999
1969
 
@@ -2001,7 +1971,7 @@
2001
1971
  top: 0;
2002
1972
  height: min-content;
2003
1973
  padding-top: 0;
2004
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
1974
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
2005
1975
  background-color: transparent;
2006
1976
  grid-row: 1;
2007
1977
  overflow-x: auto;
@@ -2030,8 +2000,6 @@
2030
2000
  font-weight: var(--cds-productive-heading-04-font-weight, 400);
2031
2001
  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
2032
2002
  letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
2033
- max-width: 50%;
2034
- padding-left: 2.5rem;
2035
2003
  margin-bottom: 1rem;
2036
2004
  }
2037
2005
 
@@ -2133,26 +2101,6 @@
2133
2101
  white-space: nowrap;
2134
2102
  }
2135
2103
 
2136
- @keyframes side-panel-exit-left {
2137
- 0% {
2138
- opacity: 1;
2139
- transform: translateX(0);
2140
- }
2141
- 100% {
2142
- opacity: 0;
2143
- transform: translateX(calc(-1 * 30rem));
2144
- }
2145
- }
2146
- @keyframes side-panel-exit-right {
2147
- 0% {
2148
- opacity: 1;
2149
- transform: translateX(0);
2150
- }
2151
- 100% {
2152
- opacity: 0;
2153
- transform: translateX(30rem);
2154
- }
2155
- }
2156
2104
  .c4p--side-panel__container {
2157
2105
  --c4p--side-panel--subtitle-opacity: 1;
2158
2106
  --c4p--side-panel--title-container-height: 0;
@@ -2172,7 +2120,6 @@
2172
2120
  box-sizing: border-box;
2173
2121
  background-color: var(--cds-layer-01, #f4f4f4);
2174
2122
  color: var(--cds-text-primary, #161616);
2175
- transition: transform 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
2176
2123
  }
2177
2124
  .c4p--side-panel__container.c4p--side-panel__container--xs {
2178
2125
  width: 16rem;
@@ -2186,37 +2133,13 @@
2186
2133
  max-width: 100%;
2187
2134
  }
2188
2135
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--xs {
2189
- width: 16rem;
2190
- max-width: 100%;
2191
2136
  right: 0;
2192
2137
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2193
2138
  }
2194
- @keyframes side-panel-entrance-right {
2195
- 0% {
2196
- opacity: 0;
2197
- transform: translateX(16rem);
2198
- }
2199
- 100% {
2200
- opacity: 1;
2201
- transform: translateX(0);
2202
- }
2203
- }
2204
2139
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--xs {
2205
- width: 16rem;
2206
- max-width: 100%;
2207
2140
  left: 0;
2208
2141
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2209
2142
  }
2210
- @keyframes side-panel-entrance-left {
2211
- 0% {
2212
- opacity: 0;
2213
- transform: translateX(-16rem);
2214
- }
2215
- 100% {
2216
- opacity: 1;
2217
- transform: translateX(0);
2218
- }
2219
- }
2220
2143
  .c4p--side-panel__container.c4p--side-panel__container--sm {
2221
2144
  width: 20rem;
2222
2145
  max-width: 100%;
@@ -2229,37 +2152,13 @@
2229
2152
  max-width: 100%;
2230
2153
  }
2231
2154
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--sm {
2232
- width: 20rem;
2233
- max-width: 100%;
2234
2155
  right: 0;
2235
2156
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2236
2157
  }
2237
- @keyframes side-panel-entrance-right {
2238
- 0% {
2239
- opacity: 0;
2240
- transform: translateX(20rem);
2241
- }
2242
- 100% {
2243
- opacity: 1;
2244
- transform: translateX(0);
2245
- }
2246
- }
2247
2158
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--sm {
2248
- width: 20rem;
2249
- max-width: 100%;
2250
2159
  left: 0;
2251
2160
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2252
2161
  }
2253
- @keyframes side-panel-entrance-left {
2254
- 0% {
2255
- opacity: 0;
2256
- transform: translateX(-20rem);
2257
- }
2258
- 100% {
2259
- opacity: 1;
2260
- transform: translateX(0);
2261
- }
2262
- }
2263
2162
  .c4p--side-panel__container.c4p--side-panel__container--md {
2264
2163
  width: 30rem;
2265
2164
  max-width: 100%;
@@ -2272,37 +2171,13 @@
2272
2171
  max-width: 100%;
2273
2172
  }
2274
2173
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--md {
2275
- width: 30rem;
2276
- max-width: 100%;
2277
2174
  right: 0;
2278
2175
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2279
2176
  }
2280
- @keyframes side-panel-entrance-right {
2281
- 0% {
2282
- opacity: 0;
2283
- transform: translateX(30rem);
2284
- }
2285
- 100% {
2286
- opacity: 1;
2287
- transform: translateX(0);
2288
- }
2289
- }
2290
2177
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--md {
2291
- width: 30rem;
2292
- max-width: 100%;
2293
2178
  left: 0;
2294
2179
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2295
2180
  }
2296
- @keyframes side-panel-entrance-left {
2297
- 0% {
2298
- opacity: 0;
2299
- transform: translateX(-30rem);
2300
- }
2301
- 100% {
2302
- opacity: 1;
2303
- transform: translateX(0);
2304
- }
2305
- }
2306
2181
  .c4p--side-panel__container.c4p--side-panel__container--lg {
2307
2182
  width: 40rem;
2308
2183
  max-width: 100%;
@@ -2315,37 +2190,13 @@
2315
2190
  max-width: 100%;
2316
2191
  }
2317
2192
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--lg {
2318
- width: 40rem;
2319
- max-width: 100%;
2320
2193
  right: 0;
2321
2194
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2322
2195
  }
2323
- @keyframes side-panel-entrance-right {
2324
- 0% {
2325
- opacity: 0;
2326
- transform: translateX(40rem);
2327
- }
2328
- 100% {
2329
- opacity: 1;
2330
- transform: translateX(0);
2331
- }
2332
- }
2333
2196
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--lg {
2334
- width: 40rem;
2335
- max-width: 100%;
2336
2197
  left: 0;
2337
2198
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2338
2199
  }
2339
- @keyframes side-panel-entrance-left {
2340
- 0% {
2341
- opacity: 0;
2342
- transform: translateX(-40rem);
2343
- }
2344
- 100% {
2345
- opacity: 1;
2346
- transform: translateX(0);
2347
- }
2348
- }
2349
2200
  .c4p--side-panel__container.c4p--side-panel__container--2xl {
2350
2201
  width: 75%;
2351
2202
  max-width: 100%;
@@ -2358,37 +2209,13 @@
2358
2209
  max-width: 100%;
2359
2210
  }
2360
2211
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--2xl {
2361
- width: 75%;
2362
- max-width: 100%;
2363
2212
  right: 0;
2364
2213
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2365
2214
  }
2366
- @keyframes side-panel-entrance-right {
2367
- 0% {
2368
- opacity: 0;
2369
- transform: translateX(75%);
2370
- }
2371
- 100% {
2372
- opacity: 1;
2373
- transform: translateX(0);
2374
- }
2375
- }
2376
2215
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--2xl {
2377
- width: 75%;
2378
- max-width: 100%;
2379
2216
  left: 0;
2380
2217
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2381
2218
  }
2382
- @keyframes side-panel-entrance-left {
2383
- 0% {
2384
- opacity: 0;
2385
- transform: translateX(-75%);
2386
- }
2387
- 100% {
2388
- opacity: 1;
2389
- transform: translateX(0);
2390
- }
2391
- }
2392
2219
  .c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__title-container {
2393
2220
  /* stylelint-disable-next-line max-nesting-depth */
2394
2221
  }
@@ -2521,10 +2348,7 @@
2521
2348
  .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation {
2522
2349
  position: fixed;
2523
2350
  z-index: 2;
2524
- top: calc(
2525
- var(--c4p--side-panel--title-text-height) +
2526
- var(--c4p--side-panel--label-text-height) + 3rem
2527
- );
2351
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
2528
2352
  background-color: var(--cds-layer-01, #f4f4f4);
2529
2353
  }
2530
2354
  .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation.c4p--side-panel__subtitle-text-is-animating {
@@ -2539,7 +2363,6 @@
2539
2363
  }
2540
2364
  .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
2541
2365
  position: fixed;
2542
- top: 3rem;
2543
2366
  height: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
2544
2367
  }
2545
2368
  .c4p--side-panel__container .c4p--side-panel__inner-content {
@@ -2560,10 +2383,7 @@
2560
2383
  }
2561
2384
  .c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
2562
2385
  position: fixed;
2563
- top: calc(
2564
- var(--c4p--side-panel--title-text-height) +
2565
- var(--c4p--side-panel--subtitle-container-height) + 3rem
2566
- );
2386
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height));
2567
2387
  width: 100%;
2568
2388
  border-bottom: 1px solid var(--cds-layer-active-01, #c6c6c6);
2569
2389
  }
@@ -2590,17 +2410,7 @@
2590
2410
  background-color: var(--cds-layer-01, #f4f4f4);
2591
2411
  transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
2592
2412
  }
2593
- .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button {
2594
- min-width: 2rem;
2595
- }
2596
- .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button.c4p--side-panel__action-toolbar-icon-only-button {
2597
- padding: 0;
2598
- color: var(--cds-text-primary, #161616);
2599
- }
2600
- .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button.c4p--side-panel__action-toolbar-icon-only-button svg {
2601
- margin-left: 0.5rem;
2602
- }
2603
- .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button.c4p--side-panel__action-toolbar-leading-button {
2413
+ .c4p--side-panel__container .c4p--side-panel__action-toolbar-leading-button {
2604
2414
  margin-right: 0.5rem;
2605
2415
  }
2606
2416
  .c4p--side-panel__container .cds--btn.c4p--side-panel__navigation-back-button {
@@ -2623,7 +2433,6 @@
2623
2433
  display: flex;
2624
2434
  align-items: center;
2625
2435
  justify-content: center;
2626
- background-color: var(--cds-layer-01, #f4f4f4);
2627
2436
  }
2628
2437
  .c4p--side-panel__container .cds--btn.c4p--side-panel__close-button .cds--btn__icon {
2629
2438
  margin: 0;
@@ -2712,14 +2521,10 @@
2712
2521
  position: fixed;
2713
2522
  /* stylelint-disable-next-line function-no-unknown */
2714
2523
  z-index: 6000;
2715
- top: 0;
2716
- right: 0;
2717
- bottom: 0;
2718
- left: 0;
2719
2524
  width: 100%;
2720
2525
  height: 100%;
2721
2526
  background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
2722
- transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
2527
+ inset: 0;
2723
2528
  }
2724
2529
 
2725
2530
  .c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
@@ -2931,12 +2736,12 @@
2931
2736
  }
2932
2737
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header {
2933
2738
  padding: 1.5rem 2rem;
2934
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
2739
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
2935
2740
  margin: 0;
2936
2741
  }
2937
2742
  .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header {
2938
2743
  padding: 1rem;
2939
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
2744
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
2940
2745
  margin: 0;
2941
2746
  }
2942
2747
  .c4p--tearsheet .c4p--tearsheet__header-content {
@@ -2973,6 +2778,7 @@
2973
2778
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
2974
2779
  -webkit-box-orient: vertical;
2975
2780
  -webkit-line-clamp: 2;
2781
+ word-break: break-word;
2976
2782
  }
2977
2783
  @media (min-width: 42rem) {
2978
2784
  .c4p--tearsheet .c4p--tearsheet__header-description {
@@ -2991,6 +2797,9 @@
2991
2797
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon {
2992
2798
  padding-right: 4rem;
2993
2799
  }
2800
+ .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header-description {
2801
+ max-width: 80%;
2802
+ }
2994
2803
  .c4p--tearsheet .c4p--tearsheet__header-navigation {
2995
2804
  margin: 0.75rem 0 0;
2996
2805
  }
@@ -3006,7 +2815,7 @@
3006
2815
  }
3007
2816
  .c4p--tearsheet .c4p--tearsheet__influencer {
3008
2817
  flex: 0 0 257px;
3009
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
2818
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3010
2819
  overflow-y: auto;
3011
2820
  }
3012
2821
  .c4p--tearsheet .c4p--tearsheet__influencer.c4p--tearsheet__influencer p {
@@ -3024,20 +2833,18 @@
3024
2833
  .c4p--tearsheet .c4p--tearsheet__main {
3025
2834
  display: flex;
3026
2835
  flex-direction: row;
2836
+ background-color: var(--cds-layer);
3027
2837
  grid-column: 1/-1;
3028
2838
  grid-row: 1/-1;
3029
2839
  }
3030
2840
  .c4p--tearsheet .c4p--tearsheet__main .c4p--tearsheet__influencer {
3031
2841
  border-right: none;
3032
- border-left: 1px solid var(--cds-border-subtle-01, #e0e0e0);
2842
+ border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3033
2843
  }
3034
2844
  .c4p--tearsheet .c4p--tearsheet__content {
3035
2845
  overflow: auto;
3036
2846
  flex-grow: 1;
3037
2847
  }
3038
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content {
3039
- background: var(--cds-background, #ffffff);
3040
- }
3041
2848
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination,
3042
2849
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination__control-buttons,
3043
2850
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--text-input,
@@ -3048,7 +2855,7 @@
3048
2855
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--dropdown-list,
3049
2856
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--number input[type=number],
3050
2857
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--date-picker__input {
3051
- background-color: var(--cds-field-01, #f4f4f4);
2858
+ background-color: var(--cds-field);
3052
2859
  }
3053
2860
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--select--inline .cds--select-input {
3054
2861
  background-color: transparent;
@@ -3071,7 +2878,7 @@
3071
2878
  .c4p--tearsheet .c4p--tearsheet__buttons {
3072
2879
  display: inline-flex;
3073
2880
  min-width: 100%;
3074
- border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
2881
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3075
2882
  }
3076
2883
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__buttons {
3077
2884
  background: var(--cds-background, #ffffff);
@@ -3134,6 +2941,9 @@
3134
2941
  }
3135
2942
  }
3136
2943
  .c4p--tearsheet-create .c4p--tearsheet-create__step__step--visible-step {
2944
+ padding-right: 0.5rem;
2945
+ padding-left: 0.5rem;
2946
+ margin-left: 0;
3137
2947
  animation: step-content-entrance 400ms;
3138
2948
  animation-fill-mode: forwards;
3139
2949
  animation-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
@@ -3145,7 +2955,6 @@
3145
2955
  }
3146
2956
 
3147
2957
  .c4p--tearsheet-create__step .cds--css-grid {
3148
- padding-left: 0;
3149
2958
  margin-left: 0;
3150
2959
  }
3151
2960
 
@@ -3168,7 +2977,8 @@
3168
2977
  }
3169
2978
  .c4p--tearsheet-create .c4p--tearsheet-create__content {
3170
2979
  height: 100%;
3171
- padding: 1.5rem;
2980
+ padding-top: 1.5rem;
2981
+ padding-bottom: 1.5rem;
3172
2982
  overflow-x: hidden;
3173
2983
  }
3174
2984
 
@@ -3230,51 +3040,202 @@
3230
3040
  margin-bottom: 1rem;
3231
3041
  }
3232
3042
 
3233
- .c4p--empty-state {
3234
- color: var(--cds-text-primary, #161616);
3043
+ .c4p--edit-in-place {
3044
+ --c4p--edit-in-place--size: 2rem;
3045
+ display: flex;
3046
+ align-items: center;
3047
+ background: transparent;
3048
+ cursor: pointer;
3235
3049
  }
3236
- .c4p--empty-state .c4p--empty-state__header {
3237
- font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
3238
- font-weight: var(--cds-productive-heading-03-font-weight, 400);
3239
- line-height: var(--cds-productive-heading-03-line-height, 1.4);
3240
- letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
3241
- padding-bottom: 0.375rem;
3242
- margin: 0;
3050
+
3051
+ .c4p--edit-in-place--sm {
3052
+ --c4p--edit-in-place--size: 2rem;
3243
3053
  }
3244
- .c4p--empty-state .c4p--empty-state__subtitle {
3245
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
3246
- font-weight: var(--cds-body-long-01-font-weight, 400);
3247
- line-height: var(--cds-body-long-01-line-height, 1.42857);
3248
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
3249
- padding-bottom: 1rem;
3054
+
3055
+ .c4p--edit-in-place--md {
3056
+ --c4p--edit-in-place--size: 2.5rem;
3250
3057
  }
3251
- .c4p--empty-state .c4p--empty-state__header--small {
3252
- font-size: var(--cds-body-short-02-font-size, 1rem);
3253
- font-weight: var(--cds-body-short-02-font-weight, 400);
3254
- line-height: var(--cds-body-short-02-line-height, 1.375);
3255
- letter-spacing: var(--cds-body-short-02-letter-spacing, 0);
3256
- padding-bottom: 0.5rem;
3058
+
3059
+ .c4p--edit-in-place--lg {
3060
+ /* April 2023 max text input size */
3061
+ --c4p--edit-in-place--size: 3rem;
3257
3062
  }
3258
- .c4p--empty-state .c4p--empty-state__subtitle--small {
3259
- font-size: var(--cds-label-01-font-size, 0.75rem);
3260
- font-weight: var(--cds-label-01-font-weight, 400);
3261
- line-height: var(--cds-label-01-line-height, 1.33333);
3262
- letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
3063
+
3064
+ .c4p--edit-in-place--readonly {
3065
+ cursor: not-allowed;
3263
3066
  }
3264
3067
 
3265
- .c4p--empty-state__illustration {
3266
- height: auto;
3267
- margin-bottom: 1rem;
3068
+ .c4p--edit-in-place:hover {
3069
+ background: var(--cds-field-01, #f4f4f4);
3268
3070
  }
3269
- .c4p--empty-state__illustration.c4p--empty-state__illustration--lg {
3270
- min-width: 5rem;
3271
- max-width: 5rem;
3071
+
3072
+ .c4p--edit-in-place:hover .c4p--edit-in-place__btn-edit,
3073
+ .c4p--edit-in-place__btn-edit.c4p--edit-in-place__btn-edit--always-visible {
3074
+ visibility: visible;
3272
3075
  }
3273
- .c4p--empty-state__illustration.c4p--empty-state__illustration--sm {
3076
+
3077
+ .c4p--edit-in-place__btn-edit {
3078
+ visibility: hidden;
3079
+ }
3080
+
3081
+ .c4p--edit-in-place--invalid {
3082
+ outline: 2px solid var(--cds-support-error, #da1e28);
3083
+ }
3084
+
3085
+ .c4p--edit-in-place--focused {
3086
+ background: var(--cds-field-01, #f4f4f4);
3087
+ outline: 2px solid var(--cds-focus, #0f62fe);
3088
+ }
3089
+
3090
+ .c4p--edit-in-place__text-input {
3091
+ flex: 1;
3092
+ }
3093
+
3094
+ .c4p--edit-in-place--inherit-type .c4p--edit-in-place__text-input {
3095
+ /* match font of container */
3096
+ font-size: inherit;
3097
+ font-weight: inherit;
3098
+ letter-spacing: inherit;
3099
+ line-height: inherit;
3100
+ }
3101
+
3102
+ .c4p--edit-in-place__ellipsis {
3103
+ position: relative;
3104
+ margin-left: -1rem;
3105
+ opacity: 0;
3106
+ }
3107
+
3108
+ .c4p--edit-in-place--overflows:not(.c4p--edit-in-place--focused) .c4p--edit-in-place__ellipsis {
3109
+ opacity: 1;
3110
+ }
3111
+
3112
+ .c4p--edit-in-place__text-input-label {
3113
+ display: none;
3114
+ }
3115
+
3116
+ .c4p--edit-in-place__warning-icon {
3117
+ width: 1rem;
3118
+ margin: auto 0.5rem;
3119
+ color: var(--cds-support-error, #da1e28);
3120
+ }
3121
+
3122
+ .c4p--edit-in-place__warning-text {
3123
+ font-size: var(--cds-label-01-font-size, 0.75rem);
3124
+ font-weight: var(--cds-label-01-font-weight, 400);
3125
+ line-height: var(--cds-label-01-line-height, 1.33333);
3126
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
3127
+ margin-top: 0.5rem;
3128
+ color: var(--cds-support-error, #da1e28);
3129
+ }
3130
+
3131
+ .c4p--edit-in-place__text-input.cds--text-input {
3132
+ border: none;
3133
+ background: transparent;
3134
+ cursor: pointer;
3135
+ outline: none;
3136
+ }
3137
+
3138
+ .c4p--edit-in-place__text-input.cds--text-input:focus,
3139
+ .c4p--edit-in-place__text-input.cds--text-input:active {
3140
+ outline: none;
3141
+ }
3142
+
3143
+ .c4p--edit-in-place__toolbar {
3144
+ --toolbar-width: var(--c4p--edit-in-place--size);
3145
+ --toolbar-width-focussed: calc(2 * var(--c4p--edit-in-place--size));
3146
+ display: inline-flex;
3147
+ width: var(--toolbar-width);
3148
+ }
3149
+
3150
+ .c4p--edit-in-place--invalid .c4p--edit-in-place__toolbar {
3151
+ --toolbar-width: calc(var(--c4p--edit-in-place--size) + 2rem);
3152
+ --toolbar-width-focussed: calc(
3153
+ 2 * var(--c4p--edit-in-place--size) + 2rem
3154
+ );
3155
+ }
3156
+
3157
+ @keyframes slide-in {
3158
+ 0% {
3159
+ overflow: hidden;
3160
+ width: var(--toolbar-width);
3161
+ }
3162
+ 99% {
3163
+ overflow: hidden;
3164
+ width: var(--toolbar-width-focussed);
3165
+ }
3166
+ 100% {
3167
+ overflow: visible;
3168
+ width: var(--toolbar-width-focussed);
3169
+ }
3170
+ }
3171
+ .c4p--edit-in-place--focused .c4p--edit-in-place__toolbar {
3172
+ overflow: initial;
3173
+ width: var(--toolbar-width-focussed);
3174
+ animation: slide-in 150ms cubic-bezier(0, 0, 0.38, 0.9);
3175
+ }
3176
+
3177
+ .c4p--empty-state {
3178
+ display: flex;
3179
+ color: var(--cds-text-primary, #161616);
3180
+ }
3181
+ .c4p--empty-state .c4p--empty-state__header {
3182
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
3183
+ font-weight: var(--cds-heading-03-font-weight, 400);
3184
+ line-height: var(--cds-heading-03-line-height, 1.4);
3185
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
3186
+ padding-bottom: 0.5rem;
3187
+ margin: 0;
3188
+ }
3189
+ .c4p--empty-state .c4p--empty-state__subtitle {
3190
+ font-size: var(--cds-body-01-font-size, 0.875rem);
3191
+ font-weight: var(--cds-body-01-font-weight, 400);
3192
+ line-height: var(--cds-body-01-line-height, 1.42857);
3193
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
3194
+ padding-bottom: 1rem;
3195
+ }
3196
+ .c4p--empty-state .c4p--empty-state__header--small {
3197
+ font-size: var(--cds-body-compact-02-font-size, 1rem);
3198
+ font-weight: var(--cds-body-compact-02-font-weight, 400);
3199
+ line-height: var(--cds-body-compact-02-line-height, 1.375);
3200
+ letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
3201
+ padding-bottom: 0.5rem;
3202
+ }
3203
+ .c4p--empty-state .c4p--empty-state__subtitle--small {
3204
+ font-size: var(--cds-label-01-font-size, 0.75rem);
3205
+ font-weight: var(--cds-label-01-font-weight, 400);
3206
+ line-height: var(--cds-label-01-line-height, 1.33333);
3207
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
3208
+ }
3209
+
3210
+ .c4p--empty-state__illustration {
3211
+ height: auto;
3212
+ margin-bottom: 1rem;
3213
+ }
3214
+ .c4p--empty-state__illustration.c4p--empty-state__illustration--lg {
3215
+ min-width: 5rem;
3216
+ max-width: 5rem;
3217
+ }
3218
+ .c4p--empty-state__illustration.c4p--empty-state__illustration--sm {
3274
3219
  min-width: 4rem;
3275
3220
  max-width: 4rem;
3276
3221
  }
3277
3222
 
3223
+ .c4p--empty-state-position--top {
3224
+ flex-direction: column;
3225
+ }
3226
+
3227
+ .c4p--empty-state-position--right {
3228
+ flex-direction: row-reverse;
3229
+ }
3230
+
3231
+ .c4p--empty-state-position--bottom {
3232
+ flex-direction: column-reverse;
3233
+ }
3234
+
3235
+ .c4p--empty-state-position--left {
3236
+ flex-direction: row;
3237
+ }
3238
+
3278
3239
  .c4p--empty-state .c4p--empty-state__action-button {
3279
3240
  display: block;
3280
3241
  margin-bottom: 1rem;
@@ -3314,22 +3275,18 @@
3314
3275
  fill: var(--cds-button-danger-primary, #da1e28);
3315
3276
  }
3316
3277
 
3317
- .cds--modal-content.c4p--export-modal__body-container {
3318
- padding-bottom: 1.5rem;
3319
- }
3320
-
3321
3278
  .c4p--card {
3322
- background: var(--cds-layer-01, #f4f4f4);
3279
+ background-color: var(--cds-layer-01, #f4f4f4);
3323
3280
  color: var(--cds-text-primary, #161616);
3324
3281
  }
3325
3282
 
3326
3283
  .c4p--card__clickable {
3327
3284
  cursor: pointer;
3328
- transition: background 110ms;
3285
+ transition: background-color 110ms;
3329
3286
  }
3330
3287
 
3331
3288
  .c4p--card__clickable:hover {
3332
- background: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
3289
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
3333
3290
  }
3334
3291
 
3335
3292
  .c4p--card__media-left {
@@ -3389,10 +3346,10 @@
3389
3346
  }
3390
3347
 
3391
3348
  .c4p--card__body {
3392
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
3393
- font-weight: var(--cds-body-short-01-font-weight, 400);
3394
- line-height: var(--cds-body-short-01-line-height, 1.28572);
3395
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
3349
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
3350
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
3351
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
3352
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
3396
3353
  padding: 1rem;
3397
3354
  padding-top: 0;
3398
3355
  }
@@ -3405,15 +3362,22 @@
3405
3362
  .c4p--card__actions {
3406
3363
  display: flex;
3407
3364
  flex-direction: row;
3408
- margin: 1rem;
3409
- margin-top: 0;
3410
3365
  }
3411
3366
 
3412
3367
  .c4p--card__icon {
3368
+ padding: 0.5rem;
3413
3369
  color: inherit;
3414
3370
  cursor: pointer;
3415
3371
  }
3416
3372
 
3373
+ .c4p--card__icon:hover {
3374
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
3375
+ }
3376
+
3377
+ c4p--card__icon:active {
3378
+ color: var(--cds-link-primary-hover, #0043ce);
3379
+ }
3380
+
3417
3381
  .c4p--card__link {
3418
3382
  color: inherit;
3419
3383
  text-decoration: inherit;
@@ -3425,10 +3389,10 @@
3425
3389
  }
3426
3390
 
3427
3391
  .c4p--card__title {
3428
- font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
3429
- font-weight: var(--cds-productive-heading-03-font-weight, 400);
3430
- line-height: var(--cds-productive-heading-03-line-height, 1.4);
3431
- letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
3392
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
3393
+ font-weight: var(--cds-heading-03-font-weight, 400);
3394
+ line-height: var(--cds-heading-03-line-height, 1.4);
3395
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
3432
3396
  }
3433
3397
 
3434
3398
  .c4p--http-errors .c4p--http-errors__content {
@@ -3450,26 +3414,26 @@
3450
3414
  }
3451
3415
 
3452
3416
  .c4p--http-errors .c4p--http-errors__error-code-label {
3453
- font-size: var(--cds-productive-heading-02-font-size, 1rem);
3454
- font-weight: var(--cds-productive-heading-02-font-weight, 600);
3455
- line-height: var(--cds-productive-heading-02-line-height, 1.375);
3456
- letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
3417
+ font-size: var(--cds-heading-compact-02-font-size, 1rem);
3418
+ font-weight: var(--cds-heading-compact-02-font-weight, 600);
3419
+ line-height: var(--cds-heading-compact-02-line-height, 1.375);
3420
+ letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
3457
3421
  margin-bottom: 0.25rem;
3458
3422
  }
3459
3423
 
3460
3424
  .c4p--http-errors .c4p--http-errors__title {
3461
- font-size: var(--cds-productive-heading-05-font-size, 2rem);
3462
- font-weight: var(--cds-productive-heading-05-font-weight, 400);
3463
- line-height: var(--cds-productive-heading-05-line-height, 1.25);
3464
- letter-spacing: var(--cds-productive-heading-05-letter-spacing, 0);
3425
+ font-size: var(--cds-heading-05-font-size, 2rem);
3426
+ font-weight: var(--cds-heading-05-font-weight, 400);
3427
+ line-height: var(--cds-heading-05-line-height, 1.25);
3428
+ letter-spacing: var(--cds-heading-05-letter-spacing, 0);
3465
3429
  margin-bottom: 0.75rem;
3466
3430
  }
3467
3431
 
3468
3432
  .c4p--http-errors .c4p--http-errors__description {
3469
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
3470
- font-weight: var(--cds-body-short-01-font-weight, 400);
3471
- line-height: var(--cds-body-short-01-line-height, 1.28572);
3472
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
3433
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
3434
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
3435
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
3436
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
3473
3437
  margin-bottom: 1.5rem;
3474
3438
  }
3475
3439
 
@@ -3498,332 +3462,465 @@
3498
3462
  }
3499
3463
  }
3500
3464
 
3501
- .c4p--inline-edit {
3502
- --c4p--inline-edit--size: 2.5rem;
3503
- --c4p--inline-edit--icon-size: 1rem;
3504
- --c4p--inline-edit--background-color: var(--cds-layer-01, #f4f4f4);
3505
- --c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
3506
- position: relative;
3507
- display: inline-block;
3508
- min-width: calc(4 * var(--c4p--inline-edit--size));
3509
- max-width: 100%;
3510
- height: var(--c4p--inline-edit--size);
3511
- background-color: var(--c4p--inline-edit--background-color);
3512
- cursor: text;
3513
- transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
3514
- vertical-align: middle;
3515
- white-space: nowrap;
3465
+ .c4p--import-modal .cds--modal-close {
3466
+ display: none;
3516
3467
  }
3517
- .c4p--inline-edit.c4p--inline-edit--light {
3518
- --c4p--inline-edit--background-color: transparent;
3468
+
3469
+ .c4p--import-modal .cds--modal-footer .cds--btn {
3470
+ max-width: none;
3519
3471
  }
3520
- .c4p--inline-edit:hover {
3521
- --c4p--inline-edit--background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
3472
+
3473
+ .c4p--import-modal.cds--modal .cds--modal-content {
3474
+ padding-right: 1rem;
3522
3475
  }
3523
- .c4p--inline-edit.c4p--inline-edit--sm {
3524
- --c4p--inline-edit--size: 2rem;
3525
- --c4p--inline-edit--icon-size: 1rem;
3476
+
3477
+ .cds--file .cds--file-container,
3478
+ .cds--file ~ .cds--file-container {
3479
+ margin-top: 0;
3526
3480
  }
3527
- .c4p--inline-edit.c4p--inline-edit--lg {
3528
- --c4p--inline-edit--size: 3rem;
3529
- --c4p--inline-edit--icon-size: 1rem;
3481
+
3482
+ .cds--modal-container--sm .cds--modal-header {
3483
+ padding-right: calc(20% - 1rem);
3530
3484
  }
3531
- .c4p--inline-edit.c4p--inline-edit--invalid {
3532
- /* stylelint-disable-next-line carbon/theme-token-use */
3533
- outline: 0.125rem solid var(--cds-support-error, #da1e28);
3534
- outline-offset: calc(-1 * 0.125rem);
3485
+
3486
+ .c4p--import-modal__input-group {
3487
+ display: flex;
3535
3488
  }
3536
- @media screen and (prefers-contrast) {
3537
- .c4p--inline-edit.c4p--inline-edit--invalid {
3538
- outline-style: dotted;
3539
- }
3489
+
3490
+ .c4p--import-modal__import-button.cds--btn {
3491
+ margin-left: 0.5rem;
3540
3492
  }
3541
- .c4p--inline-edit.c4p--inline-edit--editing {
3542
- /* stylelint-disable-next-line carbon/theme-token-use */
3543
- outline: 0.125rem solid var(--cds-focus, #0f62fe);
3544
- outline-offset: calc(-1 * 0.125rem);
3545
- background-color: var(--cds-layer-01, #f4f4f4);
3493
+
3494
+ .c4p--import-modal__file-container {
3495
+ width: 100%;
3546
3496
  }
3547
- @media screen and (prefers-contrast) {
3548
- .c4p--inline-edit.c4p--inline-edit--editing {
3549
- outline-style: dotted;
3550
- }
3497
+
3498
+ .c4p--import-modal .c4p--import-modal__file-drop-header,
3499
+ .c4p--import-modal .c4p--import-modal__label {
3500
+ 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);
3551
3505
  }
3552
- .c4p--inline-edit .c4p--inline-edit__input {
3553
- display: inline-block;
3554
- overflow: hidden;
3555
- width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
3556
- max-width: calc(
3557
- 100% - var(--c4p--inline-edit--toolbar-width) - 1rem
3558
- );
3559
- min-height: var(--c4p--inline-edit--size);
3560
- /* stylelint-disable-next-line carbon/layout-token-use */
3561
- margin-right: var(--c4p--inline-edit--toolbar-width);
3562
- margin-left: 1rem;
3563
- font-family: inherit;
3564
- line-height: var(--c4p--inline-edit--size);
3506
+
3507
+ .c4p--import-modal__helper-text {
3508
+ margin-top: 1.5rem;
3509
+ margin-bottom: 0.5rem;
3510
+ font-size: var(--cds-helper-text-01-font-size, 0.75rem);
3511
+ line-height: var(--cds-helper-text-01-line-height, 1.33333);
3512
+ letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
3565
3513
  }
3566
- .c4p--inline-edit .c4p--inline-edit__input:focus {
3567
- outline: none;
3514
+
3515
+ .c4p--import-modal__body {
3516
+ padding-right: calc(20% - 1rem);
3517
+ margin-bottom: 1.5rem;
3568
3518
  }
3569
- .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__input {
3570
- --c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
3519
+
3520
+ .c4p--import-modal .cds--file__selected-file {
3521
+ max-width: none;
3522
+ background: var(--cds-layer-02, #ffffff);
3571
3523
  }
3572
- .c4p--inline-edit .c4p--inline-edit__input::after {
3573
- position: absolute;
3574
- top: 0;
3575
- left: 0;
3524
+
3525
+ .c4p--import-modal .cds--file {
3526
+ margin-bottom: 1rem;
3527
+ }
3528
+
3529
+ .c4p--import-modal .cds--text-input:disabled {
3530
+ background: var(--cds-layer-02, #ffffff);
3531
+ }
3532
+
3533
+ .c4p--add-select__header {
3534
+ padding: 1rem;
3535
+ padding-bottom: 0;
3536
+ border-top: 1px solid var(--cds-layer-accent-01, #e0e0e0);
3537
+ }
3538
+
3539
+ .c4p--add-select__body {
3540
+ padding: 1rem;
3541
+ }
3542
+
3543
+ /* stylelint-disable max-nesting-depth */
3544
+ .c4p--add-select__selections-wrapper {
3576
3545
  display: block;
3577
- overflow: hidden;
3578
- width: 0;
3546
+ }
3547
+ .c4p--add-select__selections-cell-wrapper {
3548
+ display: flex;
3549
+ height: 3rem;
3550
+ align-items: center;
3551
+ justify-content: space-between;
3552
+ padding: 0 1rem;
3553
+ border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
3554
+ }
3555
+ .c4p--add-select__selections-cell-title {
3556
+ display: block;
3557
+ color: var(--cds-text-primary, #161616);
3558
+ }
3559
+ .c4p--add-select__selections-cell-subtitle {
3560
+ font-size: var(--cds-label-01-font-size, 0.75rem);
3561
+ font-weight: var(--cds-label-01-font-weight, 400);
3562
+ line-height: var(--cds-label-01-line-height, 1.33333);
3563
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
3564
+ display: block;
3565
+ color: var(--cds-text-secondary, #525252);
3566
+ }
3567
+ .c4p--add-select__selections-cell {
3568
+ display: flex;
3569
+ flex-direction: column;
3570
+ justify-content: center;
3571
+ }
3572
+ .c4p--add-select__selections-dropdown .cds--dropdown {
3573
+ background: transparent;
3574
+ }
3575
+ .c4p--add-select__selections-row--selected {
3576
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
3577
+ }
3578
+ .c4p--add-select__selections-row--active {
3579
+ background-color: var(--cds-layer-active-01, #c6c6c6);
3580
+ }
3581
+ .c4p--add-select__selections-form-control {
3582
+ display: flex;
3583
+ align-items: center;
3584
+ }
3585
+ .c4p--add-select__selections-form-control-label-wrapper {
3586
+ display: flex;
3579
3587
  margin-left: 1rem;
3580
- color: var(--cds-text-helper, #6f6f6f);
3581
- content: attr(data-placeholder);
3582
- opacity: 0;
3583
- visibility: hidden;
3584
3588
  }
3585
- .c4p--inline-edit .c4p--inline-edit__ellipsis {
3586
- display: inline-block;
3587
- overflow: hidden;
3588
- width: 0;
3589
- height: var(--c4p--inline-edit--size);
3590
- line-height: var(--c4p--inline-edit--size);
3591
- opacity: 0;
3592
- pointer-events: none;
3593
- transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
3589
+ .c4p--add-select__selections-form-control-label-text {
3590
+ display: flex;
3591
+ flex-direction: column;
3594
3592
  }
3595
- .c4p--inline-edit.c4p--inline-edit--overflows:not(.c4p--inline-edit--editing) .c4p--inline-edit__ellipsis {
3596
- width: initial;
3597
- opacity: 1;
3593
+ .c4p--add-select__selections-cell-avatar {
3594
+ margin-right: 0.5rem;
3598
3595
  }
3599
- .c4p--inline-edit .c4p--inline-edit__disabled-cover {
3600
- position: absolute;
3601
- top: 0;
3602
- left: 0;
3603
- width: 100%;
3604
- height: 100%;
3605
- pointer-events: none;
3596
+ .c4p--add-select__selections-cell-icon {
3597
+ margin-right: 0.5rem;
3598
+ }
3599
+ .c4p--add-select__selections-row {
3600
+ border-left: 0.125rem solid transparent;
3601
+ }
3602
+ .c4p--add-select__selections-row-meta--selected {
3603
+ border-left: 0.125rem solid var(--cds-interactive, #0f62fe);
3604
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
3605
+ }
3606
+
3607
+ .c4p--add-select .c4p--add-select__selections-row:hover {
3608
+ background: var(--cds-layer-hover-01, #e8e8e8);
3609
+ }
3610
+ .c4p--add-select .c4p--add-select__selections-row:hover .c4p--add-select__selections-cell-title {
3611
+ color: var(--cds-interactive, #0f62fe);
3612
+ }
3613
+ .c4p--add-select .c4p--add-select__selections-row:hover .c4p--add-select__selections-view-children svg {
3614
+ color: var(--cds-interactive, #0f62fe);
3615
+ }
3616
+ .c4p--add-select .c4p--add-select__selections-row:hover button.c4p--add-select__selections-view-children.cds--btn--ghost.cds--btn--icon-only .cds--btn__icon path {
3617
+ fill: currentColor;
3618
+ }
3619
+
3620
+ .c4p--add-select__sub-header {
3621
+ display: flex;
3622
+ align-items: flex-end;
3623
+ justify-content: space-between;
3624
+ }
3625
+ .c4p--add-select__sub-header-multi {
3626
+ padding: 0 1rem;
3627
+ }
3628
+
3629
+ .c4p--add-select__sidebar-header {
3630
+ display: flex;
3631
+ padding: 2rem 1rem 0.5rem 1rem;
3632
+ border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
3633
+ }
3634
+ .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);
3639
+ }
3640
+
3641
+ .c4p--add-select__sidebar-title {
3642
+ margin-right: 0.5rem;
3643
+ }
3644
+
3645
+ .c4p--add-select__sidebar-selected-item-title {
3646
+ color: var(--cds-text-primary, #161616);
3647
+ }
3648
+ .c4p--add-select__sidebar-selected-item-subtitle {
3649
+ font-size: var(--cds-label-01-font-size, 0.75rem);
3650
+ font-weight: var(--cds-label-01-font-weight, 400);
3651
+ line-height: var(--cds-label-01-line-height, 1.33333);
3652
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
3653
+ color: var(--cds-text-secondary, #525252);
3654
+ }
3655
+
3656
+ .c4p--add-select__sidebar-body {
3657
+ padding: 0 1rem;
3658
+ }
3659
+
3660
+ .c4p--add-select .c4p--add-select__sidebar-item-header {
3661
+ font-size: var(--cds-label-01-font-size, 0.75rem);
3662
+ font-weight: var(--cds-label-01-font-weight, 400);
3663
+ line-height: var(--cds-label-01-line-height, 1.33333);
3664
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
3665
+ margin-bottom: 0.5rem;
3666
+ color: var(--cds-text-secondary, #525252);
3606
3667
  }
3607
- .c4p--inline-edit.c4p--inline-edit--disabled .c4p--inline-edit__disabled-cover {
3608
- cursor: not-allowed;
3609
- pointer-events: all;
3668
+
3669
+ .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);
3674
+ margin-bottom: 1rem;
3610
3675
  }
3611
- .c4p--inline-edit .c4p--inline-edit__input--empty::after {
3612
- width: initial;
3613
- opacity: 1;
3614
- transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
3615
- visibility: visible;
3676
+
3677
+ .c4p--add-select .c4p--add-select__sidebar-item-remove-button:hover {
3678
+ background: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
3616
3679
  }
3617
- .c4p--inline-edit .c4p--inline-edit__after-input-elements {
3618
- --c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
3619
- position: absolute;
3620
- top: 0;
3621
- right: 0;
3680
+
3681
+ .c4p--add-select .c4p--add-select__sidebar-accordion-title {
3622
3682
  display: flex;
3623
- width: var(--c4p--inline-edit--toolbar-width);
3624
- height: 100%;
3683
+ align-items: center;
3625
3684
  justify-content: space-between;
3626
- cursor: text;
3627
3685
  }
3628
- .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__after-input-elements {
3629
- --c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
3686
+
3687
+ .c4p--add-select__columns {
3688
+ display: flex;
3689
+ flex-direction: row;
3690
+ flex-grow: 1;
3691
+ overflow-x: auto;
3630
3692
  }
3631
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar::after {
3632
- position: absolute;
3633
- top: 0;
3634
- left: 0;
3635
- display: block;
3636
- width: 100%;
3637
- height: 100%;
3638
- box-sizing: border-box;
3639
- border: 2px solid var(--cds-focus, #0f62fe);
3693
+ .c4p--add-select__columns .c4p--add-select__selections-form-control-label-wrapper {
3694
+ margin-left: 0.5rem;
3695
+ }
3696
+ .c4p--add-select__columns .c4p--add-select__selections-row {
3640
3697
  border-left: 0;
3641
- content: "";
3642
- pointer-events: none;
3643
3698
  }
3644
- .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel {
3645
- display: inline-flex;
3646
- width: var(--c4p--inline-edit--size);
3647
- max-width: var(--c4p--inline-edit--size);
3648
- height: 100%;
3649
- min-height: initial;
3650
- max-height: var(--c4p--inline-edit--size);
3651
- align-items: center;
3652
- justify-content: center;
3653
- border: 2px solid transparent;
3699
+ .c4p--add-select__columns .c4p--add-select__selections .c4p--add-select__selections-cell {
3700
+ padding: 0;
3701
+ }
3702
+ .c4p--add-select__columns .c4p--add-select__selections-cell-wrapper {
3703
+ height: 2rem;
3704
+ padding: 0 0.5rem;
3654
3705
  }
3655
- .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:hover {
3656
- outline: initial;
3706
+ .c4p--add-select__columns .c4p--add-select__tags {
3707
+ padding: 0 0.5rem;
3708
+ margin-bottom: 0;
3657
3709
  }
3658
- .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:focus:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:focus, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:focus:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:focus {
3659
- border-color: var(--cds-focus, #0f62fe);
3660
- box-shadow: initial;
3661
- outline: initial;
3710
+ .c4p--add-select__columns .c4p--add-select__selections-wrapper-multi {
3711
+ padding: 0;
3662
3712
  }
3663
- .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:focus:active:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:focus:active:hover {
3664
- box-shadow: inset 0 0 0 1px var(--cds-field-01, #f4f4f4);
3713
+
3714
+ .c4p--add-select__selections-wrapper-multi .c4p--add-select__selections-cell {
3715
+ padding: 0 1rem;
3665
3716
  }
3666
- .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save::before, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel::before {
3667
- background-color: transparent;
3717
+
3718
+ .c4p--add-select__selections-row:first-child .c4p--add-select__selections-cell-wrapper {
3719
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3668
3720
  }
3669
- .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save[disabled], .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel[disabled] {
3670
- border-color: transparent;
3721
+
3722
+ .c4p--add-select__column {
3723
+ overflow: auto;
3724
+ flex: 0 0 20rem;
3725
+ padding: 1rem;
3726
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3727
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3671
3728
  }
3672
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
3673
- overflow: visible;
3674
- width: var(--c4p--inline-edit--edit-size);
3675
- transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
3676
- transition-property: margin, padding;
3729
+ .c4p--add-select__column-search-bar {
3730
+ display: flex;
3677
3731
  }
3678
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
3679
- overflow: hidden;
3680
- width: 0;
3681
- padding: 0;
3682
- border-right: 0;
3683
- border-left: 0;
3732
+ .c4p--add-select__column-search-bar label {
3733
+ display: none;
3684
3734
  }
3685
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
3686
- margin-right: 0;
3687
- transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
3688
- transition-property: margin, padding;
3735
+ .c4p--add-select__column-sort-filter {
3736
+ display: flex;
3689
3737
  }
3690
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save svg {
3691
- transition: width 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
3738
+ .c4p--add-select__column .cds--overflow-menu {
3739
+ border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d);
3692
3740
  }
3693
- @media (prefers-reduced-motion: reduce) {
3694
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save svg {
3695
- transition: none;
3696
- }
3741
+
3742
+ .c4p--add-select-sort_overflow {
3743
+ z-index: 9999;
3697
3744
  }
3698
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
3699
- padding-right: 0;
3700
- padding-left: 0;
3701
- border-right: 0;
3702
- border-left: 0;
3703
- margin-right: calc(-1 * var(--c4p--inline-edit--size));
3745
+
3746
+ .c4p--add-select__tags {
3747
+ display: flex;
3748
+ align-items: center;
3749
+ margin-top: 1rem;
3750
+ margin-bottom: 0.5rem;
3704
3751
  }
3705
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save svg {
3706
- overflow: hidden;
3707
- width: 0;
3752
+ .c4p--add-select__tags-label {
3753
+ margin-right: 0.5rem;
3708
3754
  }
3709
- .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit {
3710
- display: inline-flex;
3711
- width: var(--c4p--inline-edit--size);
3712
- max-width: var(--c4p--inline-edit--size);
3713
- height: 100%;
3714
- min-height: initial;
3715
- max-height: var(--c4p--inline-edit--size);
3755
+
3756
+ .c4p--add-select__global-filter {
3757
+ position: absolute;
3758
+ z-index: 999999;
3759
+ right: 0;
3760
+ width: 100%;
3761
+ max-width: 40rem;
3762
+ background: var(--cds-layer-01, #f4f4f4);
3763
+ box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
3764
+ transform: translate(0, 100%);
3765
+ }
3766
+ .c4p--add-select__global-filter-search {
3767
+ position: relative;
3768
+ display: flex;
3769
+ align-items: flex-end;
3770
+ }
3771
+ .c4p--add-select__global-filter-content {
3772
+ padding: 1rem;
3773
+ }
3774
+ .c4p--add-select__global-filter-opts {
3775
+ display: grid;
3776
+ grid-gap: 1rem 2rem;
3777
+ grid-template-columns: repeat(2, 1fr);
3778
+ }
3779
+ .c4p--add-select__global-filter-applied {
3780
+ display: flex;
3716
3781
  align-items: center;
3717
- justify-content: center;
3718
- border: 2px solid transparent;
3782
+ padding: 0.5rem;
3783
+ background: var(--cds-layer-01, #f4f4f4);
3719
3784
  }
3720
- .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:focus {
3721
- border-color: transparent;
3722
- background-color: transparent;
3723
- box-shadow: initial;
3724
- outline: initial;
3785
+
3786
+ .c4p--add-select__global-filter-button-set button.c4p--add-select__global-filter-button {
3787
+ max-width: none;
3788
+ flex: 1;
3725
3789
  }
3726
- @media (hover: hover) {
3727
- .c4p--inline-edit .c4p--inline-edit__edit {
3728
- opacity: 0;
3729
- transition: opacity 70ms cubic-bezier(0, 0, 0.38, 0.9);
3730
- }
3731
- .c4p--inline-edit:hover .c4p--inline-edit__edit {
3732
- opacity: 1;
3733
- }
3790
+
3791
+ button.c4p--add-select__global-filter-toggle {
3792
+ border-bottom-color: var(--cds-border-strong-01, #8d8d8d);
3793
+ background: var(--cds-field-01, #f4f4f4);
3734
3794
  }
3735
- .c4p--inline-edit .c4p--inline-edit__edit--always-visible {
3736
- opacity: 1;
3795
+ button.c4p--add-select__global-filter-toggle--open {
3796
+ border-bottom: var(--cds-border-strong-01, #8d8d8d);
3797
+ box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
3737
3798
  }
3738
- .c4p--inline-edit .c4p--inline-edit__validation-icon {
3739
- display: inline-flex;
3740
- width: var(--c4p--inline-edit--size);
3741
- max-width: var(--c4p--inline-edit--size);
3742
- height: 100%;
3743
- min-height: initial;
3744
- max-height: var(--c4p--inline-edit--size);
3799
+
3800
+ .c4p--add-select__meta-panel {
3801
+ padding: 1rem;
3802
+ }
3803
+ .c4p--add-select__meta-panel-header {
3804
+ display: flex;
3745
3805
  align-items: center;
3746
- justify-content: center;
3747
- border: 2px solid transparent;
3806
+ justify-content: space-between;
3807
+ margin-bottom: 1rem;
3748
3808
  }
3749
- .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-icon {
3750
- color: var(--cds-support-error, #da1e28);
3809
+ .c4p--add-select__meta-panel-entry {
3810
+ margin-bottom: 1rem;
3751
3811
  }
3752
- .c4p--inline-edit .c4p--inline-edit__validation-text {
3753
- display: block;
3754
- overflow: visible;
3755
- margin-left: 1rem;
3812
+
3813
+ .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);
3756
3818
  }
3757
- .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-text {
3758
- color: var(--cds-support-error, #da1e28);
3819
+
3820
+ .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);
3759
3825
  }
3760
3826
 
3761
- .c4p--import-modal .cds--modal-close {
3762
- display: none;
3827
+ .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);
3763
3832
  }
3764
3833
 
3765
- .c4p--import-modal .cds--modal-footer .cds--btn {
3766
- max-width: none;
3834
+ .c4p--add-select__selections .cds--list-box__menu {
3835
+ left: auto;
3767
3836
  }
3768
3837
 
3769
- .c4p--import-modal.cds--modal .cds--modal-content {
3770
- padding-right: 1rem;
3838
+ .c4p--add-select__tags .cds--tag {
3839
+ margin: 0;
3771
3840
  }
3772
3841
 
3773
- .cds--file .cds--file-container,
3774
- .cds--file ~ .cds--file-container {
3775
- margin-top: 0;
3842
+ .c4p--add-select.c4p--tearsheet .c4p--tearsheet__influencer {
3843
+ flex-basis: 22.5rem;
3844
+ background: var(--cds-layer-01, #f4f4f4);
3776
3845
  }
3777
3846
 
3778
- .cds--modal-container--sm .cds--modal-header {
3779
- padding-right: calc(20% - 1rem);
3847
+ .c4p--add-select.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--dropdown {
3848
+ background-color: transparent;
3780
3849
  }
3781
3850
 
3782
- .c4p--import-modal__input-group {
3783
- display: flex;
3851
+ .c4p--add-select.c4p--tearsheet .c4p--tearsheet__header-description {
3852
+ color: var(--cds-text-secondary, #525252);
3784
3853
  }
3785
3854
 
3786
- .c4p--import-modal__import-button.cds--btn {
3787
- margin-left: 0.5rem;
3855
+ .c4p--add-select.c4p--tearsheet .c4p--tearsheet__content {
3856
+ display: flex;
3857
+ flex-direction: column;
3788
3858
  }
3789
3859
 
3790
- .c4p--import-modal__file-container {
3791
- width: 100%;
3860
+ .c4p--add-select.c4p--add-select__multi .c4p--action-set.cds--btn-set.c4p--action-set--max .c4p--action-set__action-button {
3861
+ max-width: 11.25rem;
3792
3862
  }
3793
3863
 
3794
- .c4p--import-modal .c4p--import-modal__file-drop-header,
3795
- .c4p--import-modal .c4p--import-modal__label {
3796
- margin-bottom: 0.5rem;
3864
+ .c4p--add-select .c4p--add-select__items-label {
3797
3865
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
3798
3866
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
3799
3867
  line-height: var(--cds-productive-heading-01-line-height, 1.28572);
3800
3868
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
3801
3869
  }
3802
3870
 
3803
- .c4p--import-modal__helper-text {
3804
- margin-top: 1.5rem;
3805
- margin-bottom: 0.5rem;
3806
- font-size: var(--cds-helper-text-01-font-size, 0.75rem);
3807
- line-height: var(--cds-helper-text-01-line-height, 1.33333);
3808
- letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
3871
+ .c4p--add-select .cds--modal-container--sm .cds--modal-content p {
3872
+ padding-right: 0;
3809
3873
  }
3810
3874
 
3811
- .c4p--import-modal__body {
3812
- padding-right: calc(20% - 1rem);
3813
- margin-bottom: 1.5rem;
3875
+ .c4p--add-select .cds--radio-button__appearance {
3876
+ margin: 0 1rem 0 0;
3814
3877
  }
3815
3878
 
3816
- .c4p--import-modal .cds--file__selected-file {
3817
- max-width: none;
3818
- background: var(--cds-layer-02, #ffffff);
3879
+ .c4p--add-select .cds--radio-button-wrapper .cds--radio-button__label {
3880
+ justify-content: left;
3819
3881
  }
3820
3882
 
3821
- .c4p--import-modal .cds--file {
3822
- margin-bottom: 1rem;
3883
+ .c4p--add-select .cds--breadcrumb .cds--link {
3884
+ cursor: pointer;
3823
3885
  }
3824
3886
 
3825
- .c4p--import-modal .cds--text-input:disabled {
3826
- background: var(--cds-layer-02, #ffffff);
3887
+ .c4p--add-select .cds--accordion__item:hover .c4p--add-select__sidebar-accordion-title button {
3888
+ opacity: 1;
3889
+ }
3890
+ .c4p--add-select .cds--accordion__item .c4p--add-select__sidebar-accordion-title button {
3891
+ opacity: 0;
3892
+ }
3893
+
3894
+ .c4p--add-select__multi .c4p--empty-state {
3895
+ max-width: 16rem;
3896
+ margin-top: 3rem;
3897
+ }
3898
+
3899
+ .c4p--add-select .cds--accordion__arrow {
3900
+ transform: rotate(0deg);
3901
+ }
3902
+
3903
+ .c4p--add-select .cds--accordion__item--active .cds--accordion__arrow {
3904
+ transform: rotate(90deg);
3905
+ }
3906
+
3907
+ .c4p--add-select .cds--accordion--start .cds--accordion__arrow {
3908
+ margin: 0 0 0 1rem;
3909
+ }
3910
+
3911
+ .c4p--add-select .cds--accordion--start .cds--accordion__title {
3912
+ margin: 0 1rem 0 0.5rem;
3913
+ }
3914
+
3915
+ .c4p--add-select .cds--accordion__item--active .cds--accordion__content {
3916
+ padding-top: 0;
3917
+ padding-bottom: 0;
3918
+ margin-top: 0.5rem;
3919
+ }
3920
+
3921
+ .c4p--add-select + div .cds--tooltip,
3922
+ .c4p--add-select + div .cds--overflow-menu-options {
3923
+ z-index: 9000;
3827
3924
  }
3828
3925
 
3829
3926
  @keyframes fade-in {
@@ -3868,6 +3965,9 @@
3868
3965
  --cds-border-subtle-selected-01: #525252;
3869
3966
  --cds-border-subtle-selected-02: #6f6f6f;
3870
3967
  --cds-border-subtle-selected-03: #8d8d8d;
3968
+ --cds-border-tile-01: #525252;
3969
+ --cds-border-tile-02: #6f6f6f;
3970
+ --cds-border-tile-03: #8d8d8d;
3871
3971
  --cds-field-01: #262626;
3872
3972
  --cds-field-02: #393939;
3873
3973
  --cds-field-03: #525252;
@@ -3879,6 +3979,7 @@
3879
3979
  --cds-focus-inverse: #0f62fe;
3880
3980
  --cds-highlight: #002d9c;
3881
3981
  --cds-icon-disabled: rgba(244, 244, 244, 0.25);
3982
+ --cds-icon-interactive: #ffffff;
3882
3983
  --cds-icon-inverse: #161616;
3883
3984
  --cds-icon-on-color: #ffffff;
3884
3985
  --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
@@ -3964,6 +4065,10 @@
3964
4065
  --cds-label-01-font-weight: 400;
3965
4066
  --cds-label-01-line-height: 1.33333;
3966
4067
  --cds-label-01-letter-spacing: 0.32px;
4068
+ --cds-label-02-font-size: 0.875rem;
4069
+ --cds-label-02-font-weight: 400;
4070
+ --cds-label-02-line-height: 1.28572;
4071
+ --cds-label-02-letter-spacing: 0.16px;
3967
4072
  --cds-helper-text-01-font-size: 0.75rem;
3968
4073
  --cds-helper-text-01-line-height: 1.33333;
3969
4074
  --cds-helper-text-01-letter-spacing: 0.32px;
@@ -4025,11 +4130,11 @@
4025
4130
  --cds-productive-heading-05-font-weight: 400;
4026
4131
  --cds-productive-heading-05-line-height: 1.25;
4027
4132
  --cds-productive-heading-05-letter-spacing: 0;
4028
- --cds-productive-heading-06-font-size: 2rem;
4133
+ --cds-productive-heading-06-font-size: 2.625rem;
4029
4134
  --cds-productive-heading-06-font-weight: 300;
4030
4135
  --cds-productive-heading-06-line-height: 1.199;
4031
4136
  --cds-productive-heading-06-letter-spacing: 0;
4032
- --cds-productive-heading-07-font-size: 2.625rem;
4137
+ --cds-productive-heading-07-font-size: 3.375rem;
4033
4138
  --cds-productive-heading-07-font-weight: 300;
4034
4139
  --cds-productive-heading-07-line-height: 1.19;
4035
4140
  --cds-productive-heading-07-letter-spacing: 0;
@@ -4084,7 +4189,7 @@
4084
4189
  --cds-display-03-line-height: 1.19;
4085
4190
  --cds-display-03-letter-spacing: 0;
4086
4191
  --cds-display-04-font-size: 2.625rem;
4087
- --cds-display-04-font-weight: 600;
4192
+ --cds-display-04-font-weight: 300;
4088
4193
  --cds-display-04-line-height: 1.19;
4089
4194
  --cds-display-04-letter-spacing: 0;
4090
4195
  --cds-legal-01-font-size: 0.75rem;
@@ -4131,11 +4236,11 @@
4131
4236
  --cds-heading-05-font-weight: 400;
4132
4237
  --cds-heading-05-line-height: 1.25;
4133
4238
  --cds-heading-05-letter-spacing: 0;
4134
- --cds-heading-06-font-size: 2rem;
4239
+ --cds-heading-06-font-size: 2.625rem;
4135
4240
  --cds-heading-06-font-weight: 300;
4136
4241
  --cds-heading-06-line-height: 1.199;
4137
4242
  --cds-heading-06-letter-spacing: 0;
4138
- --cds-heading-07-font-size: 2.625rem;
4243
+ --cds-heading-07-font-size: 3.375rem;
4139
4244
  --cds-heading-07-font-weight: 300;
4140
4245
  --cds-heading-07-line-height: 1.19;
4141
4246
  --cds-heading-07-letter-spacing: 0;
@@ -4182,7 +4287,7 @@
4182
4287
  --cds-fluid-display-03-line-height: 1.19;
4183
4288
  --cds-fluid-display-03-letter-spacing: 0;
4184
4289
  --cds-fluid-display-04-font-size: 2.625rem;
4185
- --cds-fluid-display-04-font-weight: 600;
4290
+ --cds-fluid-display-04-font-weight: 300;
4186
4291
  --cds-fluid-display-04-line-height: 1.19;
4187
4292
  --cds-fluid-display-04-letter-spacing: 0;
4188
4293
  --cds-layer: var(--cds-layer-01, #f4f4f4);
@@ -4195,9 +4300,10 @@
4195
4300
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
4196
4301
  --cds-field: var(--cds-field-01, #f4f4f4);
4197
4302
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
4198
- --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
4303
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
4199
4304
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
4200
4305
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
4306
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
4201
4307
  position: fixed;
4202
4308
  z-index: 2;
4203
4309
  top: 3rem;
@@ -4309,7 +4415,7 @@
4309
4415
  fill: var(--cds-support-error, #da1e28);
4310
4416
  }
4311
4417
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-success {
4312
- fill: var(--cds-support-success, #198038);
4418
+ fill: var(--cds-support-success, #24a148);
4313
4419
  }
4314
4420
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-warning {
4315
4421
  fill: var(--cds-support-warning, #f1c21b);
@@ -4355,7 +4461,7 @@
4355
4461
  }
4356
4462
  @media (prefers-reduced-motion: reduce) {
4357
4463
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button .cds--btn__icon,
4358
- .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button .cds--btn__icon {
4464
+ .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button .cds--btn__icon {
4359
4465
  transition: none;
4360
4466
  }
4361
4467
  }
@@ -4804,13 +4910,13 @@
4804
4910
 
4805
4911
  @media (min-width: 42rem) {
4806
4912
  .cds--col,
4807
- .cds--col-md {
4913
+ .cds--col-md {
4808
4914
  max-width: 100%;
4809
4915
  flex-basis: 0;
4810
4916
  flex-grow: 1;
4811
4917
  }
4812
4918
  .cds--col--auto,
4813
- .cds--col-md--auto {
4919
+ .cds--col-md--auto {
4814
4920
  width: auto;
4815
4921
  max-width: 100%;
4816
4922
  flex: 1 0 0%;
@@ -5142,13 +5248,13 @@
5142
5248
 
5143
5249
  @media (min-width: 66rem) {
5144
5250
  .cds--col,
5145
- .cds--col-lg {
5251
+ .cds--col-lg {
5146
5252
  max-width: 100%;
5147
5253
  flex-basis: 0;
5148
5254
  flex-grow: 1;
5149
5255
  }
5150
5256
  .cds--col--auto,
5151
- .cds--col-lg--auto {
5257
+ .cds--col-lg--auto {
5152
5258
  width: auto;
5153
5259
  max-width: 100%;
5154
5260
  flex: 1 0 0%;
@@ -5544,13 +5650,13 @@
5544
5650
 
5545
5651
  @media (min-width: 82rem) {
5546
5652
  .cds--col,
5547
- .cds--col-xlg {
5653
+ .cds--col-xlg {
5548
5654
  max-width: 100%;
5549
5655
  flex-basis: 0;
5550
5656
  flex-grow: 1;
5551
5657
  }
5552
5658
  .cds--col--auto,
5553
- .cds--col-xlg--auto {
5659
+ .cds--col-xlg--auto {
5554
5660
  width: auto;
5555
5661
  max-width: 100%;
5556
5662
  flex: 1 0 0%;
@@ -5946,13 +6052,13 @@
5946
6052
 
5947
6053
  @media (min-width: 99rem) {
5948
6054
  .cds--col,
5949
- .cds--col-max {
6055
+ .cds--col-max {
5950
6056
  max-width: 100%;
5951
6057
  flex-basis: 0;
5952
6058
  flex-grow: 1;
5953
6059
  }
5954
6060
  .cds--col--auto,
5955
- .cds--col-max--auto {
6061
+ .cds--col-max--auto {
5956
6062
  width: auto;
5957
6063
  max-width: 100%;
5958
6064
  flex: 1 0 0%;
@@ -6124,9 +6230,6 @@
6124
6230
  .c4p--action-bar .c4p--action-bar__displayed-items--right {
6125
6231
  justify-content: flex-end;
6126
6232
  }
6127
- .c4p--action-bar .c4p--action-bar-overflow-items {
6128
- display: inline-block;
6129
- }
6130
6233
  .c4p--action-bar .c4p--action-bar__hidden-sizing-items {
6131
6234
  position: absolute;
6132
6235
  top: -100vh;
@@ -6179,12 +6282,19 @@
6179
6282
  .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back {
6180
6283
  display: none;
6181
6284
  }
6285
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__back__button.cds--btn {
6286
+ min-height: revert;
6287
+ padding: 0;
6288
+ }
6289
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__back__button.cds--btn--ghost:hover {
6290
+ background-color: inherit;
6291
+ }
6182
6292
  @media (max-width: 41.98rem) {
6183
6293
  .c4p--breadcrumb-with-overflow .cds--breadcrumb-item {
6184
6294
  display: none;
6185
6295
  }
6186
6296
  .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back,
6187
- .c4p--breadcrumb-with-overflow .cds--breadcrumb-item:last-child {
6297
+ .c4p--breadcrumb-with-overflow .cds--breadcrumb-item:last-child {
6188
6298
  display: inline-flex;
6189
6299
  vertical-align: middle;
6190
6300
  }
@@ -6326,6 +6436,7 @@
6326
6436
  min-width: initial;
6327
6437
  min-height: initial;
6328
6438
  padding: 0;
6439
+ border-radius: 0;
6329
6440
  margin: 0;
6330
6441
  background-color: inherit;
6331
6442
  color: inherit;
@@ -6640,7 +6751,7 @@
6640
6751
  white-space: nowrap;
6641
6752
  }
6642
6753
  .c4p--page-header .c4p--page-header__title-row {
6643
- margin-top: 0;
6754
+ margin-top: 0.125rem; /* spacing needed in case of editable title, otherwise top of focus indicator hidden */
6644
6755
  margin-bottom: 0;
6645
6756
  transform: translateY(0.125rem);
6646
6757
  }
@@ -6700,9 +6811,6 @@
6700
6811
  text-overflow: ellipsis;
6701
6812
  white-space: nowrap;
6702
6813
  }
6703
- .c4p--page-header .c4p--page-header__title .c4p--inline-edit__value {
6704
- transform: translateY(-2px);
6705
- }
6706
6814
  .c4p--page-header .c4p--page-header__title--editable {
6707
6815
  display: flex;
6708
6816
  overflow: visible;
@@ -6866,7 +6974,7 @@
6866
6974
  .c4p--page-header .c4p--page-header__navigation-row .cds--content-switcher-btn {
6867
6975
  background-color: var(--cds-background, #ffffff);
6868
6976
  }
6869
- .c4p--page-header .cds--btn.cds--btn--icon-only.c4p--page-header__collapse-expand-toggle {
6977
+ .c4p--page-header .c4p--page-header__collapse-expand-toggle {
6870
6978
  position: absolute;
6871
6979
  z-index: 100;
6872
6980
  right: 0;
@@ -6875,7 +6983,7 @@
6875
6983
  .c4p--page-header .c4p--page-header__collapse-expand-toggle .cds--btn__icon {
6876
6984
  transition: all 400ms cubic-bezier(0.2, 0, 0.38, 0.9);
6877
6985
  }
6878
- .c4p--page-header .c4p--page-header__collapse-expand-toggle--collapsed .cds--btn__icon {
6986
+ .c4p--page-header .c4p--page-header__collapse-expand-toggle--collapsed svg {
6879
6987
  transform: scaleY(-1);
6880
6988
  }
6881
6989
 
@@ -6902,16 +7010,16 @@
6902
7010
  padding-right: 0;
6903
7011
  }
6904
7012
  .c4p--card__productive .c4p--card__title {
6905
- font-size: var(--cds-productive-heading-02-font-size, 1rem);
6906
- font-weight: var(--cds-productive-heading-02-font-weight, 600);
6907
- line-height: var(--cds-productive-heading-02-line-height, 1.375);
6908
- letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
7013
+ font-size: var(--cds-heading-compact-02-font-size, 1rem);
7014
+ font-weight: var(--cds-heading-compact-02-font-weight, 600);
7015
+ line-height: var(--cds-heading-compact-02-line-height, 1.375);
7016
+ letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
6909
7017
  }
6910
7018
  .c4p--card__productive .c4p--card__title-lg .c4p--card__title {
6911
- font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
6912
- font-weight: var(--cds-productive-heading-03-font-weight, 400);
6913
- line-height: var(--cds-productive-heading-03-line-height, 1.4);
6914
- letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
7019
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
7020
+ font-weight: var(--cds-heading-03-font-weight, 400);
7021
+ line-height: var(--cds-heading-03-line-height, 1.4);
7022
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
6915
7023
  }
6916
7024
  .c4p--card__productive .c4p--card__body {
6917
7025
  padding-top: 0.5rem;
@@ -6919,18 +7027,42 @@
6919
7027
  .c4p--card__productive .c4p--card__footer {
6920
7028
  align-items: center;
6921
7029
  justify-content: space-between;
6922
- border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
7030
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
6923
7031
  }
6924
7032
  .c4p--card__productive .c4p--card__footer-no-button {
6925
7033
  justify-content: flex-end;
6926
7034
  }
6927
7035
  .c4p--card__productive .c4p--card__actions {
7036
+ min-height: 2rem;
6928
7037
  margin: 0;
6929
7038
  }
6930
7039
  .c4p--card__productive .c4p--card__actions-header {
6931
7040
  margin-top: calc(-1 * 0.25rem);
6932
7041
  margin-right: 0.5rem;
6933
7042
  }
7043
+ .c4p--card__productive .c4p--card__actions-header-ghost-button {
7044
+ min-height: 2rem;
7045
+ padding: 0 1rem;
7046
+ padding-right: 0.625rem;
7047
+ padding-left: 0.625rem;
7048
+ /* stylelint-disable-next-line max-nesting-depth */
7049
+ /* stylelint-disable-next-line max-nesting-depth */
7050
+ }
7051
+ .c4p--card__productive .c4p--card__actions-header-ghost-button::before {
7052
+ position: absolute;
7053
+ left: 0;
7054
+ width: 0.05rem;
7055
+ height: 1.5rem;
7056
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
7057
+ content: "";
7058
+ opacity: 1;
7059
+ }
7060
+ .c4p--card__productive .c4p--card__actions-header-ghost-button:hover {
7061
+ /* stylelint-disable-next-line max-nesting-depth */
7062
+ }
7063
+ .c4p--card__productive .c4p--card__actions-header-ghost-button:hover::before {
7064
+ opacity: 0;
7065
+ }
6934
7066
  .c4p--card__productive .c4p--card__title-lg .c4p--card__actions-header,
6935
7067
  .c4p--card__productive .c4p--card__header-has-label .c4p--card__actions-header {
6936
7068
  margin-top: 0;
@@ -7010,8 +7142,8 @@
7010
7142
  }
7011
7143
  @media (prefers-reduced-motion) {
7012
7144
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--light-fatal .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7013
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-fatal .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7014
- .c4p--status-icon--light.c4p--status-icon--light-fatal .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7145
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-fatal .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7146
+ .c4p--status-icon--light.c4p--status-icon--light-fatal .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7015
7147
  animation: none;
7016
7148
  }
7017
7149
  }
@@ -7023,8 +7155,8 @@
7023
7155
  }
7024
7156
  @media (prefers-reduced-motion) {
7025
7157
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--dark-fatal .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7026
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-fatal .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7027
- .c4p--status-icon--light.c4p--status-icon--dark-fatal .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7158
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-fatal .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7159
+ .c4p--status-icon--light.c4p--status-icon--dark-fatal .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7028
7160
  animation: none;
7029
7161
  }
7030
7162
  }
@@ -7036,8 +7168,8 @@
7036
7168
  }
7037
7169
  @media (prefers-reduced-motion) {
7038
7170
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--light-critical .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7039
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-critical .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7040
- .c4p--status-icon--light.c4p--status-icon--light-critical .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7171
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-critical .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7172
+ .c4p--status-icon--light.c4p--status-icon--light-critical .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7041
7173
  animation: none;
7042
7174
  }
7043
7175
  }
@@ -7049,8 +7181,8 @@
7049
7181
  }
7050
7182
  @media (prefers-reduced-motion) {
7051
7183
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--dark-critical .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7052
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-critical .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7053
- .c4p--status-icon--light.c4p--status-icon--dark-critical .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7184
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-critical .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7185
+ .c4p--status-icon--light.c4p--status-icon--dark-critical .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7054
7186
  animation: none;
7055
7187
  }
7056
7188
  }
@@ -7062,8 +7194,8 @@
7062
7194
  }
7063
7195
  @media (prefers-reduced-motion) {
7064
7196
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--light-major-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7065
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-major-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7066
- .c4p--status-icon--light.c4p--status-icon--light-major-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7197
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-major-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7198
+ .c4p--status-icon--light.c4p--status-icon--light-major-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7067
7199
  animation: none;
7068
7200
  }
7069
7201
  }
@@ -7075,8 +7207,8 @@
7075
7207
  }
7076
7208
  @media (prefers-reduced-motion) {
7077
7209
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--dark-major-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7078
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-major-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7079
- .c4p--status-icon--light.c4p--status-icon--dark-major-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7210
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-major-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7211
+ .c4p--status-icon--light.c4p--status-icon--dark-major-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7080
7212
  animation: none;
7081
7213
  }
7082
7214
  }
@@ -7088,8 +7220,8 @@
7088
7220
  }
7089
7221
  @media (prefers-reduced-motion) {
7090
7222
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--light-minor-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7091
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-minor-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7092
- .c4p--status-icon--light.c4p--status-icon--light-minor-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7223
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-minor-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7224
+ .c4p--status-icon--light.c4p--status-icon--light-minor-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7093
7225
  animation: none;
7094
7226
  }
7095
7227
  }
@@ -7101,8 +7233,8 @@
7101
7233
  }
7102
7234
  @media (prefers-reduced-motion) {
7103
7235
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--dark-minor-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7104
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-minor-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7105
- .c4p--status-icon--light.c4p--status-icon--dark-minor-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7236
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-minor-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7237
+ .c4p--status-icon--light.c4p--status-icon--dark-minor-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7106
7238
  animation: none;
7107
7239
  }
7108
7240
  }
@@ -7114,8 +7246,8 @@
7114
7246
  }
7115
7247
  @media (prefers-reduced-motion) {
7116
7248
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--light-undefined .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7117
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-undefined .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7118
- .c4p--status-icon--light.c4p--status-icon--light-undefined .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7249
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-undefined .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7250
+ .c4p--status-icon--light.c4p--status-icon--light-undefined .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7119
7251
  animation: none;
7120
7252
  }
7121
7253
  }
@@ -7127,8 +7259,8 @@
7127
7259
  }
7128
7260
  @media (prefers-reduced-motion) {
7129
7261
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--dark-undefined .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7130
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-undefined .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7131
- .c4p--status-icon--light.c4p--status-icon--dark-undefined .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7262
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-undefined .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7263
+ .c4p--status-icon--light.c4p--status-icon--dark-undefined .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7132
7264
  animation: none;
7133
7265
  }
7134
7266
  }
@@ -7140,8 +7272,8 @@
7140
7272
  }
7141
7273
  @media (prefers-reduced-motion) {
7142
7274
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--light-unknown .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7143
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-unknown .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7144
- .c4p--status-icon--light.c4p--status-icon--light-unknown .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7275
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-unknown .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7276
+ .c4p--status-icon--light.c4p--status-icon--light-unknown .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7145
7277
  animation: none;
7146
7278
  }
7147
7279
  }
@@ -7153,8 +7285,8 @@
7153
7285
  }
7154
7286
  @media (prefers-reduced-motion) {
7155
7287
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--dark-unknown .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7156
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-unknown .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7157
- .c4p--status-icon--light.c4p--status-icon--dark-unknown .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7288
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-unknown .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7289
+ .c4p--status-icon--light.c4p--status-icon--dark-unknown .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7158
7290
  animation: none;
7159
7291
  }
7160
7292
  }
@@ -7166,8 +7298,8 @@
7166
7298
  }
7167
7299
  @media (prefers-reduced-motion) {
7168
7300
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--light-normal .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7169
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-normal .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7170
- .c4p--status-icon--light.c4p--status-icon--light-normal .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7301
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-normal .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7302
+ .c4p--status-icon--light.c4p--status-icon--light-normal .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7171
7303
  animation: none;
7172
7304
  }
7173
7305
  }
@@ -7179,8 +7311,8 @@
7179
7311
  }
7180
7312
  @media (prefers-reduced-motion) {
7181
7313
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--dark-normal .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7182
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-normal .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7183
- .c4p--status-icon--light.c4p--status-icon--dark-normal .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7314
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-normal .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7315
+ .c4p--status-icon--light.c4p--status-icon--dark-normal .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7184
7316
  animation: none;
7185
7317
  }
7186
7318
  }
@@ -7192,8 +7324,8 @@
7192
7324
  }
7193
7325
  @media (prefers-reduced-motion) {
7194
7326
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--light-info .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7195
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-info .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7196
- .c4p--status-icon--light.c4p--status-icon--light-info .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7327
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-info .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7328
+ .c4p--status-icon--light.c4p--status-icon--light-info .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7197
7329
  animation: none;
7198
7330
  }
7199
7331
  }
@@ -7205,8 +7337,8 @@
7205
7337
  }
7206
7338
  @media (prefers-reduced-motion) {
7207
7339
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--dark-info .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7208
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-info .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7209
- .c4p--status-icon--light.c4p--status-icon--dark-info .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7340
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-info .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7341
+ .c4p--status-icon--light.c4p--status-icon--dark-info .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7210
7342
  animation: none;
7211
7343
  }
7212
7344
  }
@@ -7219,8 +7351,8 @@
7219
7351
  }
7220
7352
  @media (prefers-reduced-motion: reduce) {
7221
7353
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7222
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7223
- .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7354
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7355
+ .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7224
7356
  animation: none;
7225
7357
  }
7226
7358
  }
@@ -7233,8 +7365,8 @@
7233
7365
  }
7234
7366
  @media (prefers-reduced-motion: reduce) {
7235
7367
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7236
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7237
- .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7368
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7369
+ .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7238
7370
  animation: none;
7239
7371
  }
7240
7372
  }
@@ -7260,8 +7392,8 @@
7260
7392
  }
7261
7393
  @media (prefers-reduced-motion) {
7262
7394
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--light-pending .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7263
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-pending .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7264
- .c4p--status-icon--light.c4p--status-icon--light-pending .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7395
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-pending .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7396
+ .c4p--status-icon--light.c4p--status-icon--light-pending .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7265
7397
  animation: none;
7266
7398
  }
7267
7399
  }
@@ -7273,8 +7405,8 @@
7273
7405
  }
7274
7406
  @media (prefers-reduced-motion) {
7275
7407
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--dark-pending .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7276
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-pending .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7277
- .c4p--status-icon--light.c4p--status-icon--dark-pending .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7408
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-pending .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7409
+ .c4p--status-icon--light.c4p--status-icon--dark-pending .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7278
7410
  animation: none;
7279
7411
  }
7280
7412
  }
@@ -7286,8 +7418,8 @@
7286
7418
  }
7287
7419
  @media (prefers-reduced-motion) {
7288
7420
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--light-fatal .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7289
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-fatal .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7290
- .c4p--status-icon--dark.c4p--status-icon--light-fatal .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7421
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-fatal .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7422
+ .c4p--status-icon--dark.c4p--status-icon--light-fatal .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7291
7423
  animation: none;
7292
7424
  }
7293
7425
  }
@@ -7299,8 +7431,8 @@
7299
7431
  }
7300
7432
  @media (prefers-reduced-motion) {
7301
7433
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--dark-fatal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7302
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-fatal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7303
- .c4p--status-icon--dark.c4p--status-icon--dark-fatal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7434
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-fatal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7435
+ .c4p--status-icon--dark.c4p--status-icon--dark-fatal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7304
7436
  animation: none;
7305
7437
  }
7306
7438
  }
@@ -7312,8 +7444,8 @@
7312
7444
  }
7313
7445
  @media (prefers-reduced-motion) {
7314
7446
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--light-critical .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7315
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-critical .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7316
- .c4p--status-icon--dark.c4p--status-icon--light-critical .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7447
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-critical .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7448
+ .c4p--status-icon--dark.c4p--status-icon--light-critical .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7317
7449
  animation: none;
7318
7450
  }
7319
7451
  }
@@ -7325,8 +7457,8 @@
7325
7457
  }
7326
7458
  @media (prefers-reduced-motion) {
7327
7459
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--dark-critical .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7328
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-critical .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7329
- .c4p--status-icon--dark.c4p--status-icon--dark-critical .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7460
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-critical .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7461
+ .c4p--status-icon--dark.c4p--status-icon--dark-critical .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7330
7462
  animation: none;
7331
7463
  }
7332
7464
  }
@@ -7338,8 +7470,8 @@
7338
7470
  }
7339
7471
  @media (prefers-reduced-motion) {
7340
7472
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--light-major-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7341
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-major-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7342
- .c4p--status-icon--dark.c4p--status-icon--light-major-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7473
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-major-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7474
+ .c4p--status-icon--dark.c4p--status-icon--light-major-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7343
7475
  animation: none;
7344
7476
  }
7345
7477
  }
@@ -7351,8 +7483,8 @@
7351
7483
  }
7352
7484
  @media (prefers-reduced-motion) {
7353
7485
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--dark-major-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7354
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-major-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7355
- .c4p--status-icon--dark.c4p--status-icon--dark-major-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7486
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-major-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7487
+ .c4p--status-icon--dark.c4p--status-icon--dark-major-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7356
7488
  animation: none;
7357
7489
  }
7358
7490
  }
@@ -7364,8 +7496,8 @@
7364
7496
  }
7365
7497
  @media (prefers-reduced-motion) {
7366
7498
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--light-minor-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7367
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-minor-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7368
- .c4p--status-icon--dark.c4p--status-icon--light-minor-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7499
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-minor-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7500
+ .c4p--status-icon--dark.c4p--status-icon--light-minor-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7369
7501
  animation: none;
7370
7502
  }
7371
7503
  }
@@ -7377,8 +7509,8 @@
7377
7509
  }
7378
7510
  @media (prefers-reduced-motion) {
7379
7511
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7380
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7381
- .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7512
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7513
+ .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7382
7514
  animation: none;
7383
7515
  }
7384
7516
  }
@@ -7390,8 +7522,8 @@
7390
7522
  }
7391
7523
  @media (prefers-reduced-motion) {
7392
7524
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--light-undefined .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7393
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-undefined .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7394
- .c4p--status-icon--dark.c4p--status-icon--light-undefined .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7525
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-undefined .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7526
+ .c4p--status-icon--dark.c4p--status-icon--light-undefined .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7395
7527
  animation: none;
7396
7528
  }
7397
7529
  }
@@ -7403,8 +7535,8 @@
7403
7535
  }
7404
7536
  @media (prefers-reduced-motion) {
7405
7537
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--dark-undefined .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7406
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-undefined .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7407
- .c4p--status-icon--dark.c4p--status-icon--dark-undefined .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7538
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-undefined .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7539
+ .c4p--status-icon--dark.c4p--status-icon--dark-undefined .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7408
7540
  animation: none;
7409
7541
  }
7410
7542
  }
@@ -7416,8 +7548,8 @@
7416
7548
  }
7417
7549
  @media (prefers-reduced-motion) {
7418
7550
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--light-unknown .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7419
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-unknown .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7420
- .c4p--status-icon--dark.c4p--status-icon--light-unknown .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7551
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-unknown .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7552
+ .c4p--status-icon--dark.c4p--status-icon--light-unknown .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7421
7553
  animation: none;
7422
7554
  }
7423
7555
  }
@@ -7429,8 +7561,8 @@
7429
7561
  }
7430
7562
  @media (prefers-reduced-motion) {
7431
7563
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--dark-unknown .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7432
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-unknown .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7433
- .c4p--status-icon--dark.c4p--status-icon--dark-unknown .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7564
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-unknown .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7565
+ .c4p--status-icon--dark.c4p--status-icon--dark-unknown .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7434
7566
  animation: none;
7435
7567
  }
7436
7568
  }
@@ -7442,8 +7574,8 @@
7442
7574
  }
7443
7575
  @media (prefers-reduced-motion) {
7444
7576
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--light-normal .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7445
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-normal .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7446
- .c4p--status-icon--dark.c4p--status-icon--light-normal .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7577
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-normal .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7578
+ .c4p--status-icon--dark.c4p--status-icon--light-normal .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7447
7579
  animation: none;
7448
7580
  }
7449
7581
  }
@@ -7455,8 +7587,8 @@
7455
7587
  }
7456
7588
  @media (prefers-reduced-motion) {
7457
7589
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--dark-normal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7458
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-normal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7459
- .c4p--status-icon--dark.c4p--status-icon--dark-normal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7590
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-normal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7591
+ .c4p--status-icon--dark.c4p--status-icon--dark-normal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7460
7592
  animation: none;
7461
7593
  }
7462
7594
  }
@@ -7468,8 +7600,8 @@
7468
7600
  }
7469
7601
  @media (prefers-reduced-motion) {
7470
7602
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--light-info .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7471
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-info .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7472
- .c4p--status-icon--dark.c4p--status-icon--light-info .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7603
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-info .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7604
+ .c4p--status-icon--dark.c4p--status-icon--light-info .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7473
7605
  animation: none;
7474
7606
  }
7475
7607
  }
@@ -7481,8 +7613,8 @@
7481
7613
  }
7482
7614
  @media (prefers-reduced-motion) {
7483
7615
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--dark-info .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7484
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-info .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7485
- .c4p--status-icon--dark.c4p--status-icon--dark-info .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7616
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-info .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7617
+ .c4p--status-icon--dark.c4p--status-icon--dark-info .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7486
7618
  animation: none;
7487
7619
  }
7488
7620
  }
@@ -7495,8 +7627,8 @@
7495
7627
  }
7496
7628
  @media (prefers-reduced-motion: reduce) {
7497
7629
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7498
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7499
- .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7630
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7631
+ .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7500
7632
  animation: none;
7501
7633
  }
7502
7634
  }
@@ -7509,8 +7641,8 @@
7509
7641
  }
7510
7642
  @media (prefers-reduced-motion: reduce) {
7511
7643
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7512
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7513
- .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7644
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7645
+ .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7514
7646
  animation: none;
7515
7647
  }
7516
7648
  }
@@ -7536,8 +7668,8 @@
7536
7668
  }
7537
7669
  @media (prefers-reduced-motion) {
7538
7670
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--light-pending .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7539
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-pending .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7540
- .c4p--status-icon--dark.c4p--status-icon--light-pending .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7671
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-pending .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7672
+ .c4p--status-icon--dark.c4p--status-icon--light-pending .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7541
7673
  animation: none;
7542
7674
  }
7543
7675
  }
@@ -7549,8 +7681,8 @@
7549
7681
  }
7550
7682
  @media (prefers-reduced-motion) {
7551
7683
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--dark-pending .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7552
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-pending .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7553
- .c4p--status-icon--dark.c4p--status-icon--dark-pending .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7684
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-pending .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7685
+ .c4p--status-icon--dark.c4p--status-icon--dark-pending .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7554
7686
  animation: none;
7555
7687
  }
7556
7688
  }
@@ -7689,6 +7821,11 @@
7689
7821
  border-radius: 50%;
7690
7822
  }
7691
7823
 
7824
+ .cds--btn--ghost.c4p--user-profile-image__tooltip:focus {
7825
+ border: 0;
7826
+ box-shadow: 0 0 0 0.25rem var(--cds-focus, #0f62fe);
7827
+ }
7828
+
7692
7829
  .cds--tooltip__trigger .c4p--user-profile-image svg,
7693
7830
  .c4p--user-profile-image__tooltip.cds--btn--ghost:not([disabled]) svg {
7694
7831
  fill: var(--cds-layer-01, #f4f4f4);
@@ -7819,6 +7956,9 @@
7819
7956
  --cds-border-subtle-selected-01: #6f6f6f;
7820
7957
  --cds-border-subtle-selected-02: #8d8d8d;
7821
7958
  --cds-border-subtle-selected-03: #a8a8a8;
7959
+ --cds-border-tile-01: #6f6f6f;
7960
+ --cds-border-tile-02: #8d8d8d;
7961
+ --cds-border-tile-03: #a8a8a8;
7822
7962
  --cds-field-01: #393939;
7823
7963
  --cds-field-02: #525252;
7824
7964
  --cds-field-03: #6f6f6f;
@@ -7830,6 +7970,7 @@
7830
7970
  --cds-focus-inverse: #0f62fe;
7831
7971
  --cds-highlight: #0043ce;
7832
7972
  --cds-icon-disabled: rgba(244, 244, 244, 0.25);
7973
+ --cds-icon-interactive: #ffffff;
7833
7974
  --cds-icon-inverse: #161616;
7834
7975
  --cds-icon-on-color: #ffffff;
7835
7976
  --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
@@ -7915,6 +8056,10 @@
7915
8056
  --cds-label-01-font-weight: 400;
7916
8057
  --cds-label-01-line-height: 1.33333;
7917
8058
  --cds-label-01-letter-spacing: 0.32px;
8059
+ --cds-label-02-font-size: 0.875rem;
8060
+ --cds-label-02-font-weight: 400;
8061
+ --cds-label-02-line-height: 1.28572;
8062
+ --cds-label-02-letter-spacing: 0.16px;
7918
8063
  --cds-helper-text-01-font-size: 0.75rem;
7919
8064
  --cds-helper-text-01-line-height: 1.33333;
7920
8065
  --cds-helper-text-01-letter-spacing: 0.32px;
@@ -7976,11 +8121,11 @@
7976
8121
  --cds-productive-heading-05-font-weight: 400;
7977
8122
  --cds-productive-heading-05-line-height: 1.25;
7978
8123
  --cds-productive-heading-05-letter-spacing: 0;
7979
- --cds-productive-heading-06-font-size: 2rem;
8124
+ --cds-productive-heading-06-font-size: 2.625rem;
7980
8125
  --cds-productive-heading-06-font-weight: 300;
7981
8126
  --cds-productive-heading-06-line-height: 1.199;
7982
8127
  --cds-productive-heading-06-letter-spacing: 0;
7983
- --cds-productive-heading-07-font-size: 2.625rem;
8128
+ --cds-productive-heading-07-font-size: 3.375rem;
7984
8129
  --cds-productive-heading-07-font-weight: 300;
7985
8130
  --cds-productive-heading-07-line-height: 1.19;
7986
8131
  --cds-productive-heading-07-letter-spacing: 0;
@@ -8035,7 +8180,7 @@
8035
8180
  --cds-display-03-line-height: 1.19;
8036
8181
  --cds-display-03-letter-spacing: 0;
8037
8182
  --cds-display-04-font-size: 2.625rem;
8038
- --cds-display-04-font-weight: 600;
8183
+ --cds-display-04-font-weight: 300;
8039
8184
  --cds-display-04-line-height: 1.19;
8040
8185
  --cds-display-04-letter-spacing: 0;
8041
8186
  --cds-legal-01-font-size: 0.75rem;
@@ -8082,11 +8227,11 @@
8082
8227
  --cds-heading-05-font-weight: 400;
8083
8228
  --cds-heading-05-line-height: 1.25;
8084
8229
  --cds-heading-05-letter-spacing: 0;
8085
- --cds-heading-06-font-size: 2rem;
8230
+ --cds-heading-06-font-size: 2.625rem;
8086
8231
  --cds-heading-06-font-weight: 300;
8087
8232
  --cds-heading-06-line-height: 1.199;
8088
8233
  --cds-heading-06-letter-spacing: 0;
8089
- --cds-heading-07-font-size: 2.625rem;
8234
+ --cds-heading-07-font-size: 3.375rem;
8090
8235
  --cds-heading-07-font-weight: 300;
8091
8236
  --cds-heading-07-line-height: 1.19;
8092
8237
  --cds-heading-07-letter-spacing: 0;
@@ -8133,7 +8278,7 @@
8133
8278
  --cds-fluid-display-03-line-height: 1.19;
8134
8279
  --cds-fluid-display-03-letter-spacing: 0;
8135
8280
  --cds-fluid-display-04-font-size: 2.625rem;
8136
- --cds-fluid-display-04-font-weight: 600;
8281
+ --cds-fluid-display-04-font-weight: 300;
8137
8282
  --cds-fluid-display-04-line-height: 1.19;
8138
8283
  --cds-fluid-display-04-letter-spacing: 0;
8139
8284
  --cds-layer: var(--cds-layer-01, #f4f4f4);
@@ -8146,9 +8291,10 @@
8146
8291
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
8147
8292
  --cds-field: var(--cds-field-01, #f4f4f4);
8148
8293
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
8149
- --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
8294
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
8150
8295
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
8151
8296
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
8297
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
8152
8298
  position: fixed;
8153
8299
  top: 3rem;
8154
8300
  right: 0;
@@ -8195,6 +8341,9 @@
8195
8341
  --cds-border-subtle-selected-01: #525252;
8196
8342
  --cds-border-subtle-selected-02: #6f6f6f;
8197
8343
  --cds-border-subtle-selected-03: #8d8d8d;
8344
+ --cds-border-tile-01: #525252;
8345
+ --cds-border-tile-02: #6f6f6f;
8346
+ --cds-border-tile-03: #8d8d8d;
8198
8347
  --cds-field-01: #262626;
8199
8348
  --cds-field-02: #393939;
8200
8349
  --cds-field-03: #525252;
@@ -8206,6 +8355,7 @@
8206
8355
  --cds-focus-inverse: #0f62fe;
8207
8356
  --cds-highlight: #002d9c;
8208
8357
  --cds-icon-disabled: rgba(244, 244, 244, 0.25);
8358
+ --cds-icon-interactive: #ffffff;
8209
8359
  --cds-icon-inverse: #161616;
8210
8360
  --cds-icon-on-color: #ffffff;
8211
8361
  --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
@@ -8291,6 +8441,10 @@
8291
8441
  --cds-label-01-font-weight: 400;
8292
8442
  --cds-label-01-line-height: 1.33333;
8293
8443
  --cds-label-01-letter-spacing: 0.32px;
8444
+ --cds-label-02-font-size: 0.875rem;
8445
+ --cds-label-02-font-weight: 400;
8446
+ --cds-label-02-line-height: 1.28572;
8447
+ --cds-label-02-letter-spacing: 0.16px;
8294
8448
  --cds-helper-text-01-font-size: 0.75rem;
8295
8449
  --cds-helper-text-01-line-height: 1.33333;
8296
8450
  --cds-helper-text-01-letter-spacing: 0.32px;
@@ -8352,11 +8506,11 @@
8352
8506
  --cds-productive-heading-05-font-weight: 400;
8353
8507
  --cds-productive-heading-05-line-height: 1.25;
8354
8508
  --cds-productive-heading-05-letter-spacing: 0;
8355
- --cds-productive-heading-06-font-size: 2rem;
8509
+ --cds-productive-heading-06-font-size: 2.625rem;
8356
8510
  --cds-productive-heading-06-font-weight: 300;
8357
8511
  --cds-productive-heading-06-line-height: 1.199;
8358
8512
  --cds-productive-heading-06-letter-spacing: 0;
8359
- --cds-productive-heading-07-font-size: 2.625rem;
8513
+ --cds-productive-heading-07-font-size: 3.375rem;
8360
8514
  --cds-productive-heading-07-font-weight: 300;
8361
8515
  --cds-productive-heading-07-line-height: 1.19;
8362
8516
  --cds-productive-heading-07-letter-spacing: 0;
@@ -8411,7 +8565,7 @@
8411
8565
  --cds-display-03-line-height: 1.19;
8412
8566
  --cds-display-03-letter-spacing: 0;
8413
8567
  --cds-display-04-font-size: 2.625rem;
8414
- --cds-display-04-font-weight: 600;
8568
+ --cds-display-04-font-weight: 300;
8415
8569
  --cds-display-04-line-height: 1.19;
8416
8570
  --cds-display-04-letter-spacing: 0;
8417
8571
  --cds-legal-01-font-size: 0.75rem;
@@ -8458,11 +8612,11 @@
8458
8612
  --cds-heading-05-font-weight: 400;
8459
8613
  --cds-heading-05-line-height: 1.25;
8460
8614
  --cds-heading-05-letter-spacing: 0;
8461
- --cds-heading-06-font-size: 2rem;
8615
+ --cds-heading-06-font-size: 2.625rem;
8462
8616
  --cds-heading-06-font-weight: 300;
8463
8617
  --cds-heading-06-line-height: 1.199;
8464
8618
  --cds-heading-06-letter-spacing: 0;
8465
- --cds-heading-07-font-size: 2.625rem;
8619
+ --cds-heading-07-font-size: 3.375rem;
8466
8620
  --cds-heading-07-font-weight: 300;
8467
8621
  --cds-heading-07-line-height: 1.19;
8468
8622
  --cds-heading-07-letter-spacing: 0;
@@ -8509,7 +8663,7 @@
8509
8663
  --cds-fluid-display-03-line-height: 1.19;
8510
8664
  --cds-fluid-display-03-letter-spacing: 0;
8511
8665
  --cds-fluid-display-04-font-size: 2.625rem;
8512
- --cds-fluid-display-04-font-weight: 600;
8666
+ --cds-fluid-display-04-font-weight: 300;
8513
8667
  --cds-fluid-display-04-line-height: 1.19;
8514
8668
  --cds-fluid-display-04-letter-spacing: 0;
8515
8669
  --cds-layer: var(--cds-layer-01, #f4f4f4);
@@ -8522,9 +8676,10 @@
8522
8676
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
8523
8677
  --cds-field: var(--cds-field-01, #f4f4f4);
8524
8678
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
8525
- --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
8679
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
8526
8680
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
8527
8681
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
8682
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
8528
8683
  }
8529
8684
 
8530
8685
  .c4p--web-terminal__body {