@carbon/ibm-products 2.0.0-rc.9 → 2.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (765) 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 +9111 -6606
  5. package/css/index-full-carbon.css.map +1 -1
  6. package/css/index-full-carbon.min.css +5 -5
  7. package/css/index-full-carbon.min.css.map +1 -1
  8. package/css/index-without-carbon-released-only.css +825 -524
  9. package/css/index-without-carbon-released-only.css.map +1 -1
  10. package/css/index-without-carbon-released-only.min.css +2 -4
  11. package/css/index-without-carbon-released-only.min.css.map +1 -1
  12. package/css/index-without-carbon.css +860 -844
  13. package/css/index-without-carbon.css.map +1 -1
  14. package/css/index-without-carbon.min.css +5 -5
  15. package/css/index-without-carbon.min.css.map +1 -1
  16. package/css/index.css +1319 -935
  17. package/css/index.css.map +1 -1
  18. package/css/index.min.css +5 -5
  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 +12 -12
  28. package/es/components/ActionBar/index.js +1 -0
  29. package/es/components/ActionSet/ActionSet.js +32 -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 +3 -4
  33. package/es/components/AddSelect/AddSelectBody.js +80 -104
  34. package/es/components/AddSelect/AddSelectBreadcrumbs.js +9 -8
  35. package/es/components/AddSelect/AddSelectColumn.js +41 -53
  36. package/es/components/AddSelect/AddSelectFilter.js +28 -41
  37. package/es/components/AddSelect/AddSelectFormControl.js +82 -0
  38. package/es/components/AddSelect/AddSelectList.js +30 -218
  39. package/es/components/AddSelect/AddSelectMetaPanel.js +4 -5
  40. package/es/components/AddSelect/AddSelectRow.js +206 -0
  41. package/es/components/AddSelect/AddSelectSidebar.js +15 -22
  42. package/es/components/AddSelect/AddSelectSort.js +10 -8
  43. package/es/components/AddSelect/add-select-utils.js +2 -23
  44. package/es/components/AddSelect/hooks/useFocus.js +31 -0
  45. package/es/components/AddSelect/hooks/useItemSort.js +7 -8
  46. package/es/components/AddSelect/hooks/useParentSelect.js +4 -6
  47. package/es/components/AddSelect/hooks/usePath.js +13 -21
  48. package/es/components/AddSelect/index.js +1 -0
  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 +76 -89
  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 +73 -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 +30 -39
  80. package/es/components/CreateTearsheetNarrow/index.js +1 -0
  81. package/es/components/DataSpreadsheet/DataSpreadsheet.js +137 -228
  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 +11 -11
  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 +82 -55
  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 +52 -43
  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 +35 -46
  123. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +52 -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 +15 -21
  127. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +35 -84
  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 +52 -39
  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 +20 -26
  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 +16 -22
  172. package/es/components/Datagrid/useFiltering.js +95 -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 +12 -17
  176. package/es/components/Datagrid/useInlineEdit.js +20 -20
  177. package/es/components/Datagrid/useNestedRowExpander.js +0 -6
  178. package/es/components/Datagrid/useNestedRows.js +13 -20
  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 +0 -5
  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 +60 -57
  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 +6 -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 +33 -35
  211. package/es/components/EditUpdateCards/index.js +1 -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/{InlineEditV1 → FilterSummary}/index.js +1 -1
  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 +1 -23
  257. package/es/components/MultiAddSelect/index.js +1 -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 +63 -92
  264. package/es/components/OptionsTile/index.js +1 -0
  265. package/es/components/PageHeader/PageHeader.js +156 -222
  266. package/es/components/PageHeader/PageHeaderDemo.data.js +0 -1
  267. package/es/components/PageHeader/PageHeaderTitle.js +34 -38
  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 +133 -173
  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 +1 -0
  280. package/es/components/SingleAddSelect/SingleAddSelect.js +1 -14
  281. package/es/components/SingleAddSelect/index.js +1 -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 +4 -4
  308. package/es/global/js/hooks/index.js +1 -0
  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 +14 -23
  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 +11 -10
  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 +44 -21
  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 +1 -2
  328. package/es/global/js/utils/getFocusableElements.js +1 -1
  329. package/es/global/js/utils/getNumberOfHiddenSteps.js +1 -1
  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 +2 -3
  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 +10 -22
  355. package/lib/components/ActionBar/index.js +0 -2
  356. package/lib/components/ActionSet/ActionSet.js +37 -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 +8 -17
  360. package/lib/components/AddSelect/AddSelectBody.js +84 -130
  361. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +9 -18
  362. package/lib/components/AddSelect/AddSelectColumn.js +45 -74
  363. package/lib/components/AddSelect/AddSelectFilter.js +32 -56
  364. package/lib/components/AddSelect/AddSelectFormControl.js +90 -0
  365. package/lib/components/AddSelect/AddSelectList.js +29 -232
  366. package/lib/components/AddSelect/AddSelectMetaPanel.js +4 -18
  367. package/lib/components/AddSelect/AddSelectRow.js +217 -0
  368. package/lib/components/AddSelect/AddSelectSidebar.js +20 -33
  369. package/lib/components/AddSelect/AddSelectSort.js +10 -19
  370. package/lib/components/AddSelect/add-select-utils.js +2 -33
  371. package/lib/components/AddSelect/hooks/useFocus.js +39 -0
  372. package/lib/components/AddSelect/hooks/useItemSort.js +7 -13
  373. package/lib/components/AddSelect/hooks/useParentSelect.js +4 -9
  374. package/lib/components/AddSelect/hooks/usePath.js +18 -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 +79 -106
  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 +78 -111
  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 +33 -47
  408. package/lib/components/CreateTearsheetNarrow/index.js +0 -1
  409. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +139 -258
  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 +11 -15
  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 +83 -79
  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 +61 -62
  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 +35 -59
  451. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +57 -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 +15 -25
  455. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +35 -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 +55 -39
  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 +19 -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 +15 -21
  503. package/lib/components/Datagrid/useFiltering.js +101 -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 +12 -21
  507. package/lib/components/Datagrid/useInlineEdit.js +23 -26
  508. package/lib/components/Datagrid/useNestedRowExpander.js +1 -14
  509. package/lib/components/Datagrid/useNestedRows.js +13 -25
  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 +1 -12
  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 +58 -68
  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 +6 -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 +35 -41
  542. package/lib/components/EditUpdateCards/index.js +0 -1
  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 +1 -34
  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 +64 -108
  595. package/lib/components/OptionsTile/index.js +0 -1
  596. package/lib/components/PageHeader/PageHeader.js +159 -249
  597. package/lib/components/PageHeader/PageHeaderDemo.data.js +0 -3
  598. package/lib/components/PageHeader/PageHeaderTitle.js +34 -51
  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 +136 -195
  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 +1 -2
  611. package/lib/components/SingleAddSelect/SingleAddSelect.js +1 -26
  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 +25 -52
  640. package/lib/global/js/hooks/index.js +0 -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 +12 -26
  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 +9 -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 +49 -25
  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 +1 -5
  660. package/lib/global/js/utils/getFocusableElements.js +1 -4
  661. package/lib/global/js/utils/getNumberOfHiddenSteps.js +1 -3
  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 +1 -5
  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 +27 -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 +19 -6
  684. package/scss/components/AddSelect/_add-select.scss +29 -56
  685. package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +10 -1
  686. package/scss/components/Card/_card.scss +13 -6
  687. package/scss/components/CreateFullPage/_create-full-page.scss +5 -10
  688. package/scss/components/CreateTearsheet/_create-tearsheet.scss +8 -3
  689. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +1 -1
  690. package/scss/components/Datagrid/_datagrid.scss +0 -1
  691. package/scss/components/Datagrid/_storybook-styles.scss +12 -0
  692. package/scss/components/Datagrid/styles/_datagrid.scss +83 -26
  693. package/scss/components/Datagrid/styles/_draggableElement.scss +27 -12
  694. package/scss/components/Datagrid/styles/_index.scss +9 -8
  695. package/scss/components/Datagrid/styles/_useExpandedRow.scss +1 -1
  696. package/scss/components/Datagrid/styles/_useInlineEdit.scss +16 -4
  697. package/scss/components/Datagrid/styles/_useNestedRows.scss +19 -0
  698. package/scss/components/Datagrid/styles/_useSelectAllToggle.scss +23 -15
  699. package/scss/components/Datagrid/styles/_useSortableColumns.scss +40 -18
  700. package/scss/components/Datagrid/styles/_useStickyColumn.scss +3 -3
  701. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss +82 -0
  702. package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss +87 -0
  703. package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +129 -0
  704. package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +19 -7
  705. package/scss/components/EditInPlace/_edit-in-place.scss +164 -0
  706. package/scss/components/{InlineEditV1 → EditInPlace}/_index-with-carbon.scss +1 -1
  707. package/scss/components/{InlineEditV2 → EditInPlace}/_index.scss +1 -1
  708. package/scss/components/{InlineEditV1 → EditInPlace}/_storybook-styles.scss +3 -15
  709. package/scss/components/EditTearsheet/_edit-tearsheet.scss +6 -4
  710. package/scss/components/EmptyStates/_empty-state.scss +29 -6
  711. package/scss/components/ExportModal/_export-modal.scss +0 -4
  712. package/scss/components/ExpressiveCard/_expressive-card.scss +1 -1
  713. package/scss/components/FilterSummary/_filter-summary.scss +21 -0
  714. package/scss/components/{ModifiedTabs → FilterSummary}/_index.scss +4 -2
  715. package/scss/components/{InlineEditV2 → FilterSummary}/_storybook-styles.scss +7 -2
  716. package/scss/components/HTTPErrors/_http-errors.scss +8 -4
  717. package/scss/components/MultiAddSelect/_multi-add-select.scss +1 -1
  718. package/scss/components/OptionsTile/_options-tile.scss +10 -3
  719. package/scss/components/PageHeader/_page-header.scss +9 -12
  720. package/scss/components/ProductiveCard/_productive-card.scss +31 -2
  721. package/scss/components/SidePanel/_side-panel.scss +8 -19
  722. package/scss/components/SingleAddSelect/_single-add-select.scss +1 -1
  723. package/scss/components/TagSet/_tag-set.scss +1 -0
  724. package/scss/components/Tearsheet/_carbon-imports.scss +2 -1
  725. package/scss/components/Tearsheet/_tearsheet.scss +10 -5
  726. package/scss/components/UserProfileImage/_user-profile-image.scss +5 -0
  727. package/scss/components/_index-released-only-with-carbon.scss +3 -1
  728. package/scss/components/_index-released-only.scss +3 -1
  729. package/scss/components/_index-with-carbon.scss +1 -3
  730. package/scss/components/_index.scss +2 -3
  731. package/scss/config.scss +1 -0
  732. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +0 -193
  733. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +0 -63
  734. package/es/components/Datagrid/Datagrid.stories/LeftPanelStory.js +0 -6
  735. package/es/components/InlineEdit/InlineEdit.js +0 -47
  736. package/es/components/InlineEditV1/InlineEditV1.js +0 -447
  737. package/es/components/InlineEditV2/InlineEditV2.js +0 -289
  738. package/es/components/InlineEditV2/index.js +0 -7
  739. package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +0 -34
  740. package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +0 -47
  741. package/es/components/ModifiedTabs/ModifiedTabs.js +0 -141
  742. package/es/components/ModifiedTabs/index.js +0 -1
  743. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +0 -208
  744. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +0 -74
  745. package/lib/components/Datagrid/Datagrid.stories/LeftPanelStory.js +0 -13
  746. package/lib/components/InlineEdit/InlineEdit.js +0 -63
  747. package/lib/components/InlineEditV1/InlineEditV1.js +0 -464
  748. package/lib/components/InlineEditV1/index.js +0 -13
  749. package/lib/components/InlineEditV2/InlineEditV2.js +0 -309
  750. package/lib/components/InlineEditV2/index.js +0 -13
  751. package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +0 -50
  752. package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +0 -63
  753. package/lib/components/ModifiedTabs/ModifiedTabs.js +0 -164
  754. package/lib/components/ModifiedTabs/index.js +0 -13
  755. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +0 -93
  756. package/scss/components/InlineEditV1/_carbon-imports.scss +0 -6
  757. package/scss/components/InlineEditV1/_index.scss +0 -8
  758. package/scss/components/InlineEditV1/_inline-edit-v1.scss +0 -355
  759. package/scss/components/InlineEditV2/_index-with-carbon.scss +0 -9
  760. package/scss/components/InlineEditV2/_inline-edit-v2.scss +0 -83
  761. package/scss/components/ModifiedTabs/_carbon-imports.scss +0 -10
  762. package/scss/components/ModifiedTabs/_index-with-carbon.scss +0 -9
  763. package/scss/components/ModifiedTabs/_modified-tabs.scss +0 -89
  764. package/scss/components/ModifiedTabs/_storybook-styles.scss +0 -6
  765. /package/scss/components/{InlineEditV2 → EditInPlace}/_carbon-imports.scss +0 -0
@@ -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 {
@@ -206,7 +176,7 @@
206
176
  .c4p--action-set.cds--btn-set.c4p--action-set--xl .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
207
177
  .c4p--action-set.cds--btn-set.c4p--action-set--2xl .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
208
178
  .c4p--action-set.cds--btn-set.c4p--action-set--row-quadruple .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost) {
209
- max-width: rem(232px);
179
+ max-width: 14.5rem;
210
180
  flex: 0 1 25%;
211
181
  }
212
182
 
@@ -1724,7 +1694,7 @@
1724
1694
  }
1725
1695
  @media (prefers-reduced-motion: no-preference) {
1726
1696
  .c4p--cascade__element,
1727
- .c4p--cascade__col {
1697
+ .c4p--cascade__col {
1728
1698
  /* stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use -- Carbon animation duration defined above in $animationProps */
1729
1699
  animation: 240ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 fade;
1730
1700
  animation-fill-mode: forwards;
@@ -1900,9 +1870,9 @@
1900
1870
 
1901
1871
  @media (prefers-reduced-motion) {
1902
1872
  .c4p--create-influencer__side-nav-opening,
1903
- .c4p--create-influencer__progress-indicator-opening,
1904
- .c4p--create-influencer__side-nav-closing,
1905
- .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 {
1906
1876
  animation: none;
1907
1877
  opacity: 1;
1908
1878
  }
@@ -1930,8 +1900,6 @@
1930
1900
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
1931
1901
  line-height: var(--cds-productive-heading-01-line-height, 1.28572);
1932
1902
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
1933
- max-width: 50%;
1934
- padding-left: 2.5rem;
1935
1903
  margin-bottom: 0.5rem;
1936
1904
  }
1937
1905
 
@@ -1940,8 +1908,6 @@
1940
1908
  font-weight: var(--cds-body-long-01-font-weight, 400);
1941
1909
  line-height: var(--cds-body-long-01-line-height, 1.42857);
1942
1910
  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
1943
- max-width: 50%;
1944
- padding-left: 2.5rem;
1945
1911
  margin-bottom: 1.5rem;
1946
1912
  }
1947
1913
 
@@ -1996,7 +1962,8 @@
1996
1962
  position: relative;
1997
1963
  padding-bottom: 2rem;
1998
1964
  }
1999
- .c4p--create-full-page .c4p--create-full-page__step .cds--css-grid {
1965
+
1966
+ .c4p--create-full-page__step .cds--css-grid {
2000
1967
  margin-left: 0;
2001
1968
  }
2002
1969
 
@@ -2004,7 +1971,7 @@
2004
1971
  top: 0;
2005
1972
  height: min-content;
2006
1973
  padding-top: 0;
2007
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
1974
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
2008
1975
  background-color: transparent;
2009
1976
  grid-row: 1;
2010
1977
  overflow-x: auto;
@@ -2033,8 +2000,6 @@
2033
2000
  font-weight: var(--cds-productive-heading-04-font-weight, 400);
2034
2001
  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
2035
2002
  letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
2036
- max-width: 50%;
2037
- padding-left: 2.5rem;
2038
2003
  margin-bottom: 1rem;
2039
2004
  }
2040
2005
 
@@ -2445,17 +2410,7 @@
2445
2410
  background-color: var(--cds-layer-01, #f4f4f4);
2446
2411
  transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
2447
2412
  }
2448
- .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button {
2449
- min-width: 2rem;
2450
- }
2451
- .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button.c4p--side-panel__action-toolbar-icon-only-button {
2452
- padding: 0;
2453
- color: var(--cds-text-primary, #161616);
2454
- }
2455
- .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button.c4p--side-panel__action-toolbar-icon-only-button svg {
2456
- margin-left: 0.5rem;
2457
- }
2458
- .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 {
2459
2414
  margin-right: 0.5rem;
2460
2415
  }
2461
2416
  .c4p--side-panel__container .cds--btn.c4p--side-panel__navigation-back-button {
@@ -2478,7 +2433,6 @@
2478
2433
  display: flex;
2479
2434
  align-items: center;
2480
2435
  justify-content: center;
2481
- background-color: var(--cds-layer-01, #f4f4f4);
2482
2436
  }
2483
2437
  .c4p--side-panel__container .cds--btn.c4p--side-panel__close-button .cds--btn__icon {
2484
2438
  margin: 0;
@@ -2567,13 +2521,10 @@
2567
2521
  position: fixed;
2568
2522
  /* stylelint-disable-next-line function-no-unknown */
2569
2523
  z-index: 6000;
2570
- top: 0;
2571
- right: 0;
2572
- bottom: 0;
2573
- left: 0;
2574
2524
  width: 100%;
2575
2525
  height: 100%;
2576
2526
  background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
2527
+ inset: 0;
2577
2528
  }
2578
2529
 
2579
2530
  .c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
@@ -2785,12 +2736,12 @@
2785
2736
  }
2786
2737
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header {
2787
2738
  padding: 1.5rem 2rem;
2788
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
2739
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
2789
2740
  margin: 0;
2790
2741
  }
2791
2742
  .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header {
2792
2743
  padding: 1rem;
2793
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
2744
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
2794
2745
  margin: 0;
2795
2746
  }
2796
2747
  .c4p--tearsheet .c4p--tearsheet__header-content {
@@ -2827,6 +2778,7 @@
2827
2778
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
2828
2779
  -webkit-box-orient: vertical;
2829
2780
  -webkit-line-clamp: 2;
2781
+ word-break: break-word;
2830
2782
  }
2831
2783
  @media (min-width: 42rem) {
2832
2784
  .c4p--tearsheet .c4p--tearsheet__header-description {
@@ -2845,6 +2797,9 @@
2845
2797
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon {
2846
2798
  padding-right: 4rem;
2847
2799
  }
2800
+ .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header-description {
2801
+ max-width: 80%;
2802
+ }
2848
2803
  .c4p--tearsheet .c4p--tearsheet__header-navigation {
2849
2804
  margin: 0.75rem 0 0;
2850
2805
  }
@@ -2860,7 +2815,7 @@
2860
2815
  }
2861
2816
  .c4p--tearsheet .c4p--tearsheet__influencer {
2862
2817
  flex: 0 0 257px;
2863
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
2818
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
2864
2819
  overflow-y: auto;
2865
2820
  }
2866
2821
  .c4p--tearsheet .c4p--tearsheet__influencer.c4p--tearsheet__influencer p {
@@ -2878,20 +2833,18 @@
2878
2833
  .c4p--tearsheet .c4p--tearsheet__main {
2879
2834
  display: flex;
2880
2835
  flex-direction: row;
2836
+ background-color: var(--cds-layer);
2881
2837
  grid-column: 1/-1;
2882
2838
  grid-row: 1/-1;
2883
2839
  }
2884
2840
  .c4p--tearsheet .c4p--tearsheet__main .c4p--tearsheet__influencer {
2885
2841
  border-right: none;
2886
- border-left: 1px solid var(--cds-border-subtle-01, #e0e0e0);
2842
+ border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
2887
2843
  }
2888
2844
  .c4p--tearsheet .c4p--tearsheet__content {
2889
2845
  overflow: auto;
2890
2846
  flex-grow: 1;
2891
2847
  }
2892
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content {
2893
- background: var(--cds-background, #ffffff);
2894
- }
2895
2848
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination,
2896
2849
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination__control-buttons,
2897
2850
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--text-input,
@@ -2902,7 +2855,7 @@
2902
2855
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--dropdown-list,
2903
2856
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--number input[type=number],
2904
2857
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--date-picker__input {
2905
- background-color: var(--cds-field-01, #f4f4f4);
2858
+ background-color: var(--cds-field);
2906
2859
  }
2907
2860
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--select--inline .cds--select-input {
2908
2861
  background-color: transparent;
@@ -2925,7 +2878,7 @@
2925
2878
  .c4p--tearsheet .c4p--tearsheet__buttons {
2926
2879
  display: inline-flex;
2927
2880
  min-width: 100%;
2928
- border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
2881
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
2929
2882
  }
2930
2883
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__buttons {
2931
2884
  background: var(--cds-background, #ffffff);
@@ -2988,6 +2941,9 @@
2988
2941
  }
2989
2942
  }
2990
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;
2991
2947
  animation: step-content-entrance 400ms;
2992
2948
  animation-fill-mode: forwards;
2993
2949
  animation-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
@@ -2999,7 +2955,6 @@
2999
2955
  }
3000
2956
 
3001
2957
  .c4p--tearsheet-create__step .cds--css-grid {
3002
- padding-left: 0;
3003
2958
  margin-left: 0;
3004
2959
  }
3005
2960
 
@@ -3022,7 +2977,8 @@
3022
2977
  }
3023
2978
  .c4p--tearsheet-create .c4p--tearsheet-create__content {
3024
2979
  height: 100%;
3025
- padding: 1.5rem;
2980
+ padding-top: 1.5rem;
2981
+ padding-bottom: 1.5rem;
3026
2982
  overflow-x: hidden;
3027
2983
  }
3028
2984
 
@@ -3084,29 +3040,164 @@
3084
3040
  margin-bottom: 1rem;
3085
3041
  }
3086
3042
 
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;
3049
+ }
3050
+
3051
+ .c4p--edit-in-place--sm {
3052
+ --c4p--edit-in-place--size: 2rem;
3053
+ }
3054
+
3055
+ .c4p--edit-in-place--md {
3056
+ --c4p--edit-in-place--size: 2.5rem;
3057
+ }
3058
+
3059
+ .c4p--edit-in-place--lg {
3060
+ /* April 2023 max text input size */
3061
+ --c4p--edit-in-place--size: 3rem;
3062
+ }
3063
+
3064
+ .c4p--edit-in-place--readonly {
3065
+ cursor: not-allowed;
3066
+ }
3067
+
3068
+ .c4p--edit-in-place:hover {
3069
+ background: var(--cds-field-01, #f4f4f4);
3070
+ }
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;
3075
+ }
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
+
3087
3177
  .c4p--empty-state {
3178
+ display: flex;
3088
3179
  color: var(--cds-text-primary, #161616);
3089
3180
  }
3090
3181
  .c4p--empty-state .c4p--empty-state__header {
3091
- font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
3092
- font-weight: var(--cds-productive-heading-03-font-weight, 400);
3093
- line-height: var(--cds-productive-heading-03-line-height, 1.4);
3094
- letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
3095
- padding-bottom: 0.375rem;
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;
3096
3187
  margin: 0;
3097
3188
  }
3098
3189
  .c4p--empty-state .c4p--empty-state__subtitle {
3099
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
3100
- font-weight: var(--cds-body-long-01-font-weight, 400);
3101
- line-height: var(--cds-body-long-01-line-height, 1.42857);
3102
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
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);
3103
3194
  padding-bottom: 1rem;
3104
3195
  }
3105
3196
  .c4p--empty-state .c4p--empty-state__header--small {
3106
- font-size: var(--cds-body-short-02-font-size, 1rem);
3107
- font-weight: var(--cds-body-short-02-font-weight, 400);
3108
- line-height: var(--cds-body-short-02-line-height, 1.375);
3109
- letter-spacing: var(--cds-body-short-02-letter-spacing, 0);
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);
3110
3201
  padding-bottom: 0.5rem;
3111
3202
  }
3112
3203
  .c4p--empty-state .c4p--empty-state__subtitle--small {
@@ -3129,6 +3220,22 @@
3129
3220
  max-width: 4rem;
3130
3221
  }
3131
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
+
3132
3239
  .c4p--empty-state .c4p--empty-state__action-button {
3133
3240
  display: block;
3134
3241
  margin-bottom: 1rem;
@@ -3168,22 +3275,18 @@
3168
3275
  fill: var(--cds-button-danger-primary, #da1e28);
3169
3276
  }
3170
3277
 
3171
- .cds--modal-content.c4p--export-modal__body-container {
3172
- padding-bottom: 1.5rem;
3173
- }
3174
-
3175
3278
  .c4p--card {
3176
- background: var(--cds-layer-01, #f4f4f4);
3279
+ background-color: var(--cds-layer-01, #f4f4f4);
3177
3280
  color: var(--cds-text-primary, #161616);
3178
3281
  }
3179
3282
 
3180
3283
  .c4p--card__clickable {
3181
3284
  cursor: pointer;
3182
- transition: background 110ms;
3285
+ transition: background-color 110ms;
3183
3286
  }
3184
3287
 
3185
3288
  .c4p--card__clickable:hover {
3186
- background: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
3289
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
3187
3290
  }
3188
3291
 
3189
3292
  .c4p--card__media-left {
@@ -3243,10 +3346,10 @@
3243
3346
  }
3244
3347
 
3245
3348
  .c4p--card__body {
3246
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
3247
- font-weight: var(--cds-body-short-01-font-weight, 400);
3248
- line-height: var(--cds-body-short-01-line-height, 1.28572);
3249
- 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);
3250
3353
  padding: 1rem;
3251
3354
  padding-top: 0;
3252
3355
  }
@@ -3259,15 +3362,22 @@
3259
3362
  .c4p--card__actions {
3260
3363
  display: flex;
3261
3364
  flex-direction: row;
3262
- margin: 1rem;
3263
- margin-top: 0;
3264
3365
  }
3265
3366
 
3266
3367
  .c4p--card__icon {
3368
+ padding: 0.5rem;
3267
3369
  color: inherit;
3268
3370
  cursor: pointer;
3269
3371
  }
3270
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
+
3271
3381
  .c4p--card__link {
3272
3382
  color: inherit;
3273
3383
  text-decoration: inherit;
@@ -3279,10 +3389,10 @@
3279
3389
  }
3280
3390
 
3281
3391
  .c4p--card__title {
3282
- font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
3283
- font-weight: var(--cds-productive-heading-03-font-weight, 400);
3284
- line-height: var(--cds-productive-heading-03-line-height, 1.4);
3285
- 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);
3286
3396
  }
3287
3397
 
3288
3398
  .c4p--http-errors .c4p--http-errors__content {
@@ -3304,26 +3414,26 @@
3304
3414
  }
3305
3415
 
3306
3416
  .c4p--http-errors .c4p--http-errors__error-code-label {
3307
- font-size: var(--cds-productive-heading-02-font-size, 1rem);
3308
- font-weight: var(--cds-productive-heading-02-font-weight, 600);
3309
- line-height: var(--cds-productive-heading-02-line-height, 1.375);
3310
- 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);
3311
3421
  margin-bottom: 0.25rem;
3312
3422
  }
3313
3423
 
3314
3424
  .c4p--http-errors .c4p--http-errors__title {
3315
- font-size: var(--cds-productive-heading-05-font-size, 2rem);
3316
- font-weight: var(--cds-productive-heading-05-font-weight, 400);
3317
- line-height: var(--cds-productive-heading-05-line-height, 1.25);
3318
- 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);
3319
3429
  margin-bottom: 0.75rem;
3320
3430
  }
3321
3431
 
3322
3432
  .c4p--http-errors .c4p--http-errors__description {
3323
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
3324
- font-weight: var(--cds-body-short-01-font-weight, 400);
3325
- line-height: var(--cds-body-short-01-line-height, 1.28572);
3326
- 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);
3327
3437
  margin-bottom: 1.5rem;
3328
3438
  }
3329
3439
 
@@ -3352,332 +3462,465 @@
3352
3462
  }
3353
3463
  }
3354
3464
 
3355
- .c4p--inline-edit {
3356
- --c4p--inline-edit--size: 2.5rem;
3357
- --c4p--inline-edit--icon-size: 1rem;
3358
- --c4p--inline-edit--background-color: var(--cds-layer-01, #f4f4f4);
3359
- --c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
3360
- position: relative;
3361
- display: inline-block;
3362
- min-width: calc(4 * var(--c4p--inline-edit--size));
3363
- max-width: 100%;
3364
- height: var(--c4p--inline-edit--size);
3365
- background-color: var(--c4p--inline-edit--background-color);
3366
- cursor: text;
3367
- 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);
3368
- vertical-align: middle;
3369
- white-space: nowrap;
3465
+ .c4p--import-modal .cds--modal-close {
3466
+ display: none;
3370
3467
  }
3371
- .c4p--inline-edit.c4p--inline-edit--light {
3372
- --c4p--inline-edit--background-color: transparent;
3468
+
3469
+ .c4p--import-modal .cds--modal-footer .cds--btn {
3470
+ max-width: none;
3373
3471
  }
3374
- .c4p--inline-edit:hover {
3375
- --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;
3376
3475
  }
3377
- .c4p--inline-edit.c4p--inline-edit--sm {
3378
- --c4p--inline-edit--size: 2rem;
3379
- --c4p--inline-edit--icon-size: 1rem;
3476
+
3477
+ .cds--file .cds--file-container,
3478
+ .cds--file ~ .cds--file-container {
3479
+ margin-top: 0;
3380
3480
  }
3381
- .c4p--inline-edit.c4p--inline-edit--lg {
3382
- --c4p--inline-edit--size: 3rem;
3383
- --c4p--inline-edit--icon-size: 1rem;
3481
+
3482
+ .cds--modal-container--sm .cds--modal-header {
3483
+ padding-right: calc(20% - 1rem);
3384
3484
  }
3385
- .c4p--inline-edit.c4p--inline-edit--invalid {
3386
- /* stylelint-disable-next-line carbon/theme-token-use */
3387
- outline: 0.125rem solid var(--cds-support-error, #da1e28);
3388
- outline-offset: calc(-1 * 0.125rem);
3485
+
3486
+ .c4p--import-modal__input-group {
3487
+ display: flex;
3389
3488
  }
3390
- @media screen and (prefers-contrast) {
3391
- .c4p--inline-edit.c4p--inline-edit--invalid {
3392
- outline-style: dotted;
3393
- }
3489
+
3490
+ .c4p--import-modal__import-button.cds--btn {
3491
+ margin-left: 0.5rem;
3394
3492
  }
3395
- .c4p--inline-edit.c4p--inline-edit--editing {
3396
- /* stylelint-disable-next-line carbon/theme-token-use */
3397
- outline: 0.125rem solid var(--cds-focus, #0f62fe);
3398
- outline-offset: calc(-1 * 0.125rem);
3399
- background-color: var(--cds-layer-01, #f4f4f4);
3493
+
3494
+ .c4p--import-modal__file-container {
3495
+ width: 100%;
3400
3496
  }
3401
- @media screen and (prefers-contrast) {
3402
- .c4p--inline-edit.c4p--inline-edit--editing {
3403
- outline-style: dotted;
3404
- }
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);
3405
3505
  }
3406
- .c4p--inline-edit .c4p--inline-edit__input {
3407
- display: inline-block;
3408
- overflow: hidden;
3409
- width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
3410
- max-width: calc(
3411
- 100% - var(--c4p--inline-edit--toolbar-width) - 1rem
3412
- );
3413
- min-height: var(--c4p--inline-edit--size);
3414
- /* stylelint-disable-next-line carbon/layout-token-use */
3415
- margin-right: var(--c4p--inline-edit--toolbar-width);
3416
- margin-left: 1rem;
3417
- font-family: inherit;
3418
- 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);
3419
3513
  }
3420
- .c4p--inline-edit .c4p--inline-edit__input:focus {
3421
- outline: none;
3514
+
3515
+ .c4p--import-modal__body {
3516
+ padding-right: calc(20% - 1rem);
3517
+ margin-bottom: 1.5rem;
3422
3518
  }
3423
- .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__input {
3424
- --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);
3425
3523
  }
3426
- .c4p--inline-edit .c4p--inline-edit__input::after {
3427
- position: absolute;
3428
- top: 0;
3429
- 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 {
3430
3545
  display: block;
3431
- overflow: hidden;
3432
- 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;
3433
3587
  margin-left: 1rem;
3434
- color: var(--cds-text-helper, #6f6f6f);
3435
- content: attr(data-placeholder);
3436
- opacity: 0;
3437
- visibility: hidden;
3438
3588
  }
3439
- .c4p--inline-edit .c4p--inline-edit__ellipsis {
3440
- display: inline-block;
3441
- overflow: hidden;
3442
- width: 0;
3443
- height: var(--c4p--inline-edit--size);
3444
- line-height: var(--c4p--inline-edit--size);
3445
- opacity: 0;
3446
- pointer-events: none;
3447
- 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;
3448
3592
  }
3449
- .c4p--inline-edit.c4p--inline-edit--overflows:not(.c4p--inline-edit--editing) .c4p--inline-edit__ellipsis {
3450
- width: initial;
3451
- opacity: 1;
3593
+ .c4p--add-select__selections-cell-avatar {
3594
+ margin-right: 0.5rem;
3452
3595
  }
3453
- .c4p--inline-edit .c4p--inline-edit__disabled-cover {
3454
- position: absolute;
3455
- top: 0;
3456
- left: 0;
3457
- width: 100%;
3458
- height: 100%;
3459
- 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);
3460
3667
  }
3461
- .c4p--inline-edit.c4p--inline-edit--disabled .c4p--inline-edit__disabled-cover {
3462
- cursor: not-allowed;
3463
- 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;
3464
3675
  }
3465
- .c4p--inline-edit .c4p--inline-edit__input--empty::after {
3466
- width: initial;
3467
- opacity: 1;
3468
- transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
3469
- 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));
3470
3679
  }
3471
- .c4p--inline-edit .c4p--inline-edit__after-input-elements {
3472
- --c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
3473
- position: absolute;
3474
- top: 0;
3475
- right: 0;
3680
+
3681
+ .c4p--add-select .c4p--add-select__sidebar-accordion-title {
3476
3682
  display: flex;
3477
- width: var(--c4p--inline-edit--toolbar-width);
3478
- height: 100%;
3683
+ align-items: center;
3479
3684
  justify-content: space-between;
3480
- cursor: text;
3481
3685
  }
3482
- .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__after-input-elements {
3483
- --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;
3484
3692
  }
3485
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar::after {
3486
- position: absolute;
3487
- top: 0;
3488
- left: 0;
3489
- display: block;
3490
- width: 100%;
3491
- height: 100%;
3492
- box-sizing: border-box;
3493
- 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 {
3494
3697
  border-left: 0;
3495
- content: "";
3496
- pointer-events: none;
3497
3698
  }
3498
- .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 {
3499
- display: inline-flex;
3500
- width: var(--c4p--inline-edit--size);
3501
- max-width: var(--c4p--inline-edit--size);
3502
- height: 100%;
3503
- min-height: initial;
3504
- max-height: var(--c4p--inline-edit--size);
3505
- align-items: center;
3506
- justify-content: center;
3507
- 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;
3508
3705
  }
3509
- .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 {
3510
- outline: initial;
3706
+ .c4p--add-select__columns .c4p--add-select__tags {
3707
+ padding: 0 0.5rem;
3708
+ margin-bottom: 0;
3511
3709
  }
3512
- .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 {
3513
- border-color: var(--cds-focus, #0f62fe);
3514
- box-shadow: initial;
3515
- outline: initial;
3710
+ .c4p--add-select__columns .c4p--add-select__selections-wrapper-multi {
3711
+ padding: 0;
3516
3712
  }
3517
- .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 {
3518
- 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;
3519
3716
  }
3520
- .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 {
3521
- 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);
3522
3720
  }
3523
- .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] {
3524
- 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);
3525
3728
  }
3526
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
3527
- overflow: visible;
3528
- width: var(--c4p--inline-edit--edit-size);
3529
- transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
3530
- transition-property: margin, padding;
3729
+ .c4p--add-select__column-search-bar {
3730
+ display: flex;
3531
3731
  }
3532
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
3533
- overflow: hidden;
3534
- width: 0;
3535
- padding: 0;
3536
- border-right: 0;
3537
- border-left: 0;
3732
+ .c4p--add-select__column-search-bar label {
3733
+ display: none;
3538
3734
  }
3539
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
3540
- margin-right: 0;
3541
- transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
3542
- transition-property: margin, padding;
3735
+ .c4p--add-select__column-sort-filter {
3736
+ display: flex;
3543
3737
  }
3544
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save svg {
3545
- 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);
3546
3740
  }
3547
- @media (prefers-reduced-motion: reduce) {
3548
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save svg {
3549
- transition: none;
3550
- }
3741
+
3742
+ .c4p--add-select-sort_overflow {
3743
+ z-index: 9999;
3551
3744
  }
3552
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
3553
- padding-right: 0;
3554
- padding-left: 0;
3555
- border-right: 0;
3556
- border-left: 0;
3557
- 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;
3558
3751
  }
3559
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save svg {
3560
- overflow: hidden;
3561
- width: 0;
3752
+ .c4p--add-select__tags-label {
3753
+ margin-right: 0.5rem;
3562
3754
  }
3563
- .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit {
3564
- display: inline-flex;
3565
- width: var(--c4p--inline-edit--size);
3566
- max-width: var(--c4p--inline-edit--size);
3567
- height: 100%;
3568
- min-height: initial;
3569
- 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;
3570
3781
  align-items: center;
3571
- justify-content: center;
3572
- border: 2px solid transparent;
3782
+ padding: 0.5rem;
3783
+ background: var(--cds-layer-01, #f4f4f4);
3573
3784
  }
3574
- .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 {
3575
- border-color: transparent;
3576
- background-color: transparent;
3577
- box-shadow: initial;
3578
- 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;
3579
3789
  }
3580
- @media (hover: hover) {
3581
- .c4p--inline-edit .c4p--inline-edit__edit {
3582
- opacity: 0;
3583
- transition: opacity 70ms cubic-bezier(0, 0, 0.38, 0.9);
3584
- }
3585
- .c4p--inline-edit:hover .c4p--inline-edit__edit {
3586
- opacity: 1;
3587
- }
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);
3588
3794
  }
3589
- .c4p--inline-edit .c4p--inline-edit__edit--always-visible {
3590
- 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);
3591
3798
  }
3592
- .c4p--inline-edit .c4p--inline-edit__validation-icon {
3593
- display: inline-flex;
3594
- width: var(--c4p--inline-edit--size);
3595
- max-width: var(--c4p--inline-edit--size);
3596
- height: 100%;
3597
- min-height: initial;
3598
- 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;
3599
3805
  align-items: center;
3600
- justify-content: center;
3601
- border: 2px solid transparent;
3806
+ justify-content: space-between;
3807
+ margin-bottom: 1rem;
3602
3808
  }
3603
- .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-icon {
3604
- color: var(--cds-support-error, #da1e28);
3809
+ .c4p--add-select__meta-panel-entry {
3810
+ margin-bottom: 1rem;
3605
3811
  }
3606
- .c4p--inline-edit .c4p--inline-edit__validation-text {
3607
- display: block;
3608
- overflow: visible;
3609
- 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);
3610
3818
  }
3611
- .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-text {
3612
- 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);
3613
3825
  }
3614
3826
 
3615
- .c4p--import-modal .cds--modal-close {
3616
- 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);
3617
3832
  }
3618
3833
 
3619
- .c4p--import-modal .cds--modal-footer .cds--btn {
3620
- max-width: none;
3834
+ .c4p--add-select__selections .cds--list-box__menu {
3835
+ left: auto;
3621
3836
  }
3622
3837
 
3623
- .c4p--import-modal.cds--modal .cds--modal-content {
3624
- padding-right: 1rem;
3838
+ .c4p--add-select__tags .cds--tag {
3839
+ margin: 0;
3625
3840
  }
3626
3841
 
3627
- .cds--file .cds--file-container,
3628
- .cds--file ~ .cds--file-container {
3629
- margin-top: 0;
3842
+ .c4p--add-select.c4p--tearsheet .c4p--tearsheet__influencer {
3843
+ flex-basis: 22.5rem;
3844
+ background: var(--cds-layer-01, #f4f4f4);
3630
3845
  }
3631
3846
 
3632
- .cds--modal-container--sm .cds--modal-header {
3633
- padding-right: calc(20% - 1rem);
3847
+ .c4p--add-select.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--dropdown {
3848
+ background-color: transparent;
3634
3849
  }
3635
3850
 
3636
- .c4p--import-modal__input-group {
3637
- display: flex;
3851
+ .c4p--add-select.c4p--tearsheet .c4p--tearsheet__header-description {
3852
+ color: var(--cds-text-secondary, #525252);
3638
3853
  }
3639
3854
 
3640
- .c4p--import-modal__import-button.cds--btn {
3641
- margin-left: 0.5rem;
3855
+ .c4p--add-select.c4p--tearsheet .c4p--tearsheet__content {
3856
+ display: flex;
3857
+ flex-direction: column;
3642
3858
  }
3643
3859
 
3644
- .c4p--import-modal__file-container {
3645
- 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;
3646
3862
  }
3647
3863
 
3648
- .c4p--import-modal .c4p--import-modal__file-drop-header,
3649
- .c4p--import-modal .c4p--import-modal__label {
3650
- margin-bottom: 0.5rem;
3864
+ .c4p--add-select .c4p--add-select__items-label {
3651
3865
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
3652
3866
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
3653
3867
  line-height: var(--cds-productive-heading-01-line-height, 1.28572);
3654
3868
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
3655
3869
  }
3656
3870
 
3657
- .c4p--import-modal__helper-text {
3658
- margin-top: 1.5rem;
3659
- margin-bottom: 0.5rem;
3660
- font-size: var(--cds-helper-text-01-font-size, 0.75rem);
3661
- line-height: var(--cds-helper-text-01-line-height, 1.33333);
3662
- 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;
3663
3873
  }
3664
3874
 
3665
- .c4p--import-modal__body {
3666
- padding-right: calc(20% - 1rem);
3667
- margin-bottom: 1.5rem;
3875
+ .c4p--add-select .cds--radio-button__appearance {
3876
+ margin: 0 1rem 0 0;
3668
3877
  }
3669
3878
 
3670
- .c4p--import-modal .cds--file__selected-file {
3671
- max-width: none;
3672
- background: var(--cds-layer-02, #ffffff);
3879
+ .c4p--add-select .cds--radio-button-wrapper .cds--radio-button__label {
3880
+ justify-content: left;
3673
3881
  }
3674
3882
 
3675
- .c4p--import-modal .cds--file {
3676
- margin-bottom: 1rem;
3883
+ .c4p--add-select .cds--breadcrumb .cds--link {
3884
+ cursor: pointer;
3677
3885
  }
3678
3886
 
3679
- .c4p--import-modal .cds--text-input:disabled {
3680
- 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;
3681
3924
  }
3682
3925
 
3683
3926
  @keyframes fade-in {
@@ -3722,6 +3965,9 @@
3722
3965
  --cds-border-subtle-selected-01: #525252;
3723
3966
  --cds-border-subtle-selected-02: #6f6f6f;
3724
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;
3725
3971
  --cds-field-01: #262626;
3726
3972
  --cds-field-02: #393939;
3727
3973
  --cds-field-03: #525252;
@@ -3733,6 +3979,7 @@
3733
3979
  --cds-focus-inverse: #0f62fe;
3734
3980
  --cds-highlight: #002d9c;
3735
3981
  --cds-icon-disabled: rgba(244, 244, 244, 0.25);
3982
+ --cds-icon-interactive: #ffffff;
3736
3983
  --cds-icon-inverse: #161616;
3737
3984
  --cds-icon-on-color: #ffffff;
3738
3985
  --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
@@ -3818,6 +4065,10 @@
3818
4065
  --cds-label-01-font-weight: 400;
3819
4066
  --cds-label-01-line-height: 1.33333;
3820
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;
3821
4072
  --cds-helper-text-01-font-size: 0.75rem;
3822
4073
  --cds-helper-text-01-line-height: 1.33333;
3823
4074
  --cds-helper-text-01-letter-spacing: 0.32px;
@@ -3879,11 +4130,11 @@
3879
4130
  --cds-productive-heading-05-font-weight: 400;
3880
4131
  --cds-productive-heading-05-line-height: 1.25;
3881
4132
  --cds-productive-heading-05-letter-spacing: 0;
3882
- --cds-productive-heading-06-font-size: 2rem;
4133
+ --cds-productive-heading-06-font-size: 2.625rem;
3883
4134
  --cds-productive-heading-06-font-weight: 300;
3884
4135
  --cds-productive-heading-06-line-height: 1.199;
3885
4136
  --cds-productive-heading-06-letter-spacing: 0;
3886
- --cds-productive-heading-07-font-size: 2.625rem;
4137
+ --cds-productive-heading-07-font-size: 3.375rem;
3887
4138
  --cds-productive-heading-07-font-weight: 300;
3888
4139
  --cds-productive-heading-07-line-height: 1.19;
3889
4140
  --cds-productive-heading-07-letter-spacing: 0;
@@ -3938,7 +4189,7 @@
3938
4189
  --cds-display-03-line-height: 1.19;
3939
4190
  --cds-display-03-letter-spacing: 0;
3940
4191
  --cds-display-04-font-size: 2.625rem;
3941
- --cds-display-04-font-weight: 600;
4192
+ --cds-display-04-font-weight: 300;
3942
4193
  --cds-display-04-line-height: 1.19;
3943
4194
  --cds-display-04-letter-spacing: 0;
3944
4195
  --cds-legal-01-font-size: 0.75rem;
@@ -3985,11 +4236,11 @@
3985
4236
  --cds-heading-05-font-weight: 400;
3986
4237
  --cds-heading-05-line-height: 1.25;
3987
4238
  --cds-heading-05-letter-spacing: 0;
3988
- --cds-heading-06-font-size: 2rem;
4239
+ --cds-heading-06-font-size: 2.625rem;
3989
4240
  --cds-heading-06-font-weight: 300;
3990
4241
  --cds-heading-06-line-height: 1.199;
3991
4242
  --cds-heading-06-letter-spacing: 0;
3992
- --cds-heading-07-font-size: 2.625rem;
4243
+ --cds-heading-07-font-size: 3.375rem;
3993
4244
  --cds-heading-07-font-weight: 300;
3994
4245
  --cds-heading-07-line-height: 1.19;
3995
4246
  --cds-heading-07-letter-spacing: 0;
@@ -4036,7 +4287,7 @@
4036
4287
  --cds-fluid-display-03-line-height: 1.19;
4037
4288
  --cds-fluid-display-03-letter-spacing: 0;
4038
4289
  --cds-fluid-display-04-font-size: 2.625rem;
4039
- --cds-fluid-display-04-font-weight: 600;
4290
+ --cds-fluid-display-04-font-weight: 300;
4040
4291
  --cds-fluid-display-04-line-height: 1.19;
4041
4292
  --cds-fluid-display-04-letter-spacing: 0;
4042
4293
  --cds-layer: var(--cds-layer-01, #f4f4f4);
@@ -4049,9 +4300,10 @@
4049
4300
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
4050
4301
  --cds-field: var(--cds-field-01, #f4f4f4);
4051
4302
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
4052
- --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
4303
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
4053
4304
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
4054
4305
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
4306
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
4055
4307
  position: fixed;
4056
4308
  z-index: 2;
4057
4309
  top: 3rem;
@@ -4163,7 +4415,7 @@
4163
4415
  fill: var(--cds-support-error, #da1e28);
4164
4416
  }
4165
4417
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-success {
4166
- fill: var(--cds-support-success, #198038);
4418
+ fill: var(--cds-support-success, #24a148);
4167
4419
  }
4168
4420
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-warning {
4169
4421
  fill: var(--cds-support-warning, #f1c21b);
@@ -4209,7 +4461,7 @@
4209
4461
  }
4210
4462
  @media (prefers-reduced-motion: reduce) {
4211
4463
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button .cds--btn__icon,
4212
- .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 {
4213
4465
  transition: none;
4214
4466
  }
4215
4467
  }
@@ -4658,13 +4910,13 @@
4658
4910
 
4659
4911
  @media (min-width: 42rem) {
4660
4912
  .cds--col,
4661
- .cds--col-md {
4913
+ .cds--col-md {
4662
4914
  max-width: 100%;
4663
4915
  flex-basis: 0;
4664
4916
  flex-grow: 1;
4665
4917
  }
4666
4918
  .cds--col--auto,
4667
- .cds--col-md--auto {
4919
+ .cds--col-md--auto {
4668
4920
  width: auto;
4669
4921
  max-width: 100%;
4670
4922
  flex: 1 0 0%;
@@ -4996,13 +5248,13 @@
4996
5248
 
4997
5249
  @media (min-width: 66rem) {
4998
5250
  .cds--col,
4999
- .cds--col-lg {
5251
+ .cds--col-lg {
5000
5252
  max-width: 100%;
5001
5253
  flex-basis: 0;
5002
5254
  flex-grow: 1;
5003
5255
  }
5004
5256
  .cds--col--auto,
5005
- .cds--col-lg--auto {
5257
+ .cds--col-lg--auto {
5006
5258
  width: auto;
5007
5259
  max-width: 100%;
5008
5260
  flex: 1 0 0%;
@@ -5398,13 +5650,13 @@
5398
5650
 
5399
5651
  @media (min-width: 82rem) {
5400
5652
  .cds--col,
5401
- .cds--col-xlg {
5653
+ .cds--col-xlg {
5402
5654
  max-width: 100%;
5403
5655
  flex-basis: 0;
5404
5656
  flex-grow: 1;
5405
5657
  }
5406
5658
  .cds--col--auto,
5407
- .cds--col-xlg--auto {
5659
+ .cds--col-xlg--auto {
5408
5660
  width: auto;
5409
5661
  max-width: 100%;
5410
5662
  flex: 1 0 0%;
@@ -5800,13 +6052,13 @@
5800
6052
 
5801
6053
  @media (min-width: 99rem) {
5802
6054
  .cds--col,
5803
- .cds--col-max {
6055
+ .cds--col-max {
5804
6056
  max-width: 100%;
5805
6057
  flex-basis: 0;
5806
6058
  flex-grow: 1;
5807
6059
  }
5808
6060
  .cds--col--auto,
5809
- .cds--col-max--auto {
6061
+ .cds--col-max--auto {
5810
6062
  width: auto;
5811
6063
  max-width: 100%;
5812
6064
  flex: 1 0 0%;
@@ -5978,9 +6230,6 @@
5978
6230
  .c4p--action-bar .c4p--action-bar__displayed-items--right {
5979
6231
  justify-content: flex-end;
5980
6232
  }
5981
- .c4p--action-bar .c4p--action-bar-overflow-items {
5982
- display: inline-block;
5983
- }
5984
6233
  .c4p--action-bar .c4p--action-bar__hidden-sizing-items {
5985
6234
  position: absolute;
5986
6235
  top: -100vh;
@@ -6033,12 +6282,19 @@
6033
6282
  .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back {
6034
6283
  display: none;
6035
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
+ }
6036
6292
  @media (max-width: 41.98rem) {
6037
6293
  .c4p--breadcrumb-with-overflow .cds--breadcrumb-item {
6038
6294
  display: none;
6039
6295
  }
6040
6296
  .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back,
6041
- .c4p--breadcrumb-with-overflow .cds--breadcrumb-item:last-child {
6297
+ .c4p--breadcrumb-with-overflow .cds--breadcrumb-item:last-child {
6042
6298
  display: inline-flex;
6043
6299
  vertical-align: middle;
6044
6300
  }
@@ -6180,6 +6436,7 @@
6180
6436
  min-width: initial;
6181
6437
  min-height: initial;
6182
6438
  padding: 0;
6439
+ border-radius: 0;
6183
6440
  margin: 0;
6184
6441
  background-color: inherit;
6185
6442
  color: inherit;
@@ -6494,7 +6751,7 @@
6494
6751
  white-space: nowrap;
6495
6752
  }
6496
6753
  .c4p--page-header .c4p--page-header__title-row {
6497
- margin-top: 0;
6754
+ margin-top: 0.125rem; /* spacing needed in case of editable title, otherwise top of focus indicator hidden */
6498
6755
  margin-bottom: 0;
6499
6756
  transform: translateY(0.125rem);
6500
6757
  }
@@ -6554,9 +6811,6 @@
6554
6811
  text-overflow: ellipsis;
6555
6812
  white-space: nowrap;
6556
6813
  }
6557
- .c4p--page-header .c4p--page-header__title .c4p--inline-edit__value {
6558
- transform: translateY(-2px);
6559
- }
6560
6814
  .c4p--page-header .c4p--page-header__title--editable {
6561
6815
  display: flex;
6562
6816
  overflow: visible;
@@ -6720,7 +6974,7 @@
6720
6974
  .c4p--page-header .c4p--page-header__navigation-row .cds--content-switcher-btn {
6721
6975
  background-color: var(--cds-background, #ffffff);
6722
6976
  }
6723
- .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 {
6724
6978
  position: absolute;
6725
6979
  z-index: 100;
6726
6980
  right: 0;
@@ -6729,7 +6983,7 @@
6729
6983
  .c4p--page-header .c4p--page-header__collapse-expand-toggle .cds--btn__icon {
6730
6984
  transition: all 400ms cubic-bezier(0.2, 0, 0.38, 0.9);
6731
6985
  }
6732
- .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 {
6733
6987
  transform: scaleY(-1);
6734
6988
  }
6735
6989
 
@@ -6756,16 +7010,16 @@
6756
7010
  padding-right: 0;
6757
7011
  }
6758
7012
  .c4p--card__productive .c4p--card__title {
6759
- font-size: var(--cds-productive-heading-02-font-size, 1rem);
6760
- font-weight: var(--cds-productive-heading-02-font-weight, 600);
6761
- line-height: var(--cds-productive-heading-02-line-height, 1.375);
6762
- 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);
6763
7017
  }
6764
7018
  .c4p--card__productive .c4p--card__title-lg .c4p--card__title {
6765
- font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
6766
- font-weight: var(--cds-productive-heading-03-font-weight, 400);
6767
- line-height: var(--cds-productive-heading-03-line-height, 1.4);
6768
- 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);
6769
7023
  }
6770
7024
  .c4p--card__productive .c4p--card__body {
6771
7025
  padding-top: 0.5rem;
@@ -6773,18 +7027,42 @@
6773
7027
  .c4p--card__productive .c4p--card__footer {
6774
7028
  align-items: center;
6775
7029
  justify-content: space-between;
6776
- border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
7030
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
6777
7031
  }
6778
7032
  .c4p--card__productive .c4p--card__footer-no-button {
6779
7033
  justify-content: flex-end;
6780
7034
  }
6781
7035
  .c4p--card__productive .c4p--card__actions {
7036
+ min-height: 2rem;
6782
7037
  margin: 0;
6783
7038
  }
6784
7039
  .c4p--card__productive .c4p--card__actions-header {
6785
7040
  margin-top: calc(-1 * 0.25rem);
6786
7041
  margin-right: 0.5rem;
6787
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
+ }
6788
7066
  .c4p--card__productive .c4p--card__title-lg .c4p--card__actions-header,
6789
7067
  .c4p--card__productive .c4p--card__header-has-label .c4p--card__actions-header {
6790
7068
  margin-top: 0;
@@ -6864,8 +7142,8 @@
6864
7142
  }
6865
7143
  @media (prefers-reduced-motion) {
6866
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,
6867
- .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,
6868
- .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 {
6869
7147
  animation: none;
6870
7148
  }
6871
7149
  }
@@ -6877,8 +7155,8 @@
6877
7155
  }
6878
7156
  @media (prefers-reduced-motion) {
6879
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,
6880
- .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,
6881
- .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 {
6882
7160
  animation: none;
6883
7161
  }
6884
7162
  }
@@ -6890,8 +7168,8 @@
6890
7168
  }
6891
7169
  @media (prefers-reduced-motion) {
6892
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,
6893
- .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,
6894
- .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 {
6895
7173
  animation: none;
6896
7174
  }
6897
7175
  }
@@ -6903,8 +7181,8 @@
6903
7181
  }
6904
7182
  @media (prefers-reduced-motion) {
6905
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,
6906
- .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,
6907
- .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 {
6908
7186
  animation: none;
6909
7187
  }
6910
7188
  }
@@ -6916,8 +7194,8 @@
6916
7194
  }
6917
7195
  @media (prefers-reduced-motion) {
6918
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,
6919
- .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,
6920
- .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 {
6921
7199
  animation: none;
6922
7200
  }
6923
7201
  }
@@ -6929,8 +7207,8 @@
6929
7207
  }
6930
7208
  @media (prefers-reduced-motion) {
6931
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,
6932
- .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,
6933
- .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 {
6934
7212
  animation: none;
6935
7213
  }
6936
7214
  }
@@ -6942,8 +7220,8 @@
6942
7220
  }
6943
7221
  @media (prefers-reduced-motion) {
6944
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,
6945
- .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,
6946
- .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 {
6947
7225
  animation: none;
6948
7226
  }
6949
7227
  }
@@ -6955,8 +7233,8 @@
6955
7233
  }
6956
7234
  @media (prefers-reduced-motion) {
6957
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,
6958
- .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,
6959
- .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 {
6960
7238
  animation: none;
6961
7239
  }
6962
7240
  }
@@ -6968,8 +7246,8 @@
6968
7246
  }
6969
7247
  @media (prefers-reduced-motion) {
6970
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,
6971
- .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,
6972
- .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 {
6973
7251
  animation: none;
6974
7252
  }
6975
7253
  }
@@ -6981,8 +7259,8 @@
6981
7259
  }
6982
7260
  @media (prefers-reduced-motion) {
6983
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,
6984
- .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,
6985
- .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 {
6986
7264
  animation: none;
6987
7265
  }
6988
7266
  }
@@ -6994,8 +7272,8 @@
6994
7272
  }
6995
7273
  @media (prefers-reduced-motion) {
6996
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,
6997
- .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,
6998
- .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 {
6999
7277
  animation: none;
7000
7278
  }
7001
7279
  }
@@ -7007,8 +7285,8 @@
7007
7285
  }
7008
7286
  @media (prefers-reduced-motion) {
7009
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,
7010
- .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,
7011
- .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 {
7012
7290
  animation: none;
7013
7291
  }
7014
7292
  }
@@ -7020,8 +7298,8 @@
7020
7298
  }
7021
7299
  @media (prefers-reduced-motion) {
7022
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,
7023
- .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,
7024
- .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 {
7025
7303
  animation: none;
7026
7304
  }
7027
7305
  }
@@ -7033,8 +7311,8 @@
7033
7311
  }
7034
7312
  @media (prefers-reduced-motion) {
7035
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,
7036
- .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,
7037
- .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 {
7038
7316
  animation: none;
7039
7317
  }
7040
7318
  }
@@ -7046,8 +7324,8 @@
7046
7324
  }
7047
7325
  @media (prefers-reduced-motion) {
7048
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,
7049
- .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,
7050
- .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 {
7051
7329
  animation: none;
7052
7330
  }
7053
7331
  }
@@ -7059,8 +7337,8 @@
7059
7337
  }
7060
7338
  @media (prefers-reduced-motion) {
7061
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,
7062
- .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,
7063
- .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 {
7064
7342
  animation: none;
7065
7343
  }
7066
7344
  }
@@ -7073,8 +7351,8 @@
7073
7351
  }
7074
7352
  @media (prefers-reduced-motion: reduce) {
7075
7353
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7076
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7077
- .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 {
7078
7356
  animation: none;
7079
7357
  }
7080
7358
  }
@@ -7087,8 +7365,8 @@
7087
7365
  }
7088
7366
  @media (prefers-reduced-motion: reduce) {
7089
7367
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7090
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7091
- .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 {
7092
7370
  animation: none;
7093
7371
  }
7094
7372
  }
@@ -7114,8 +7392,8 @@
7114
7392
  }
7115
7393
  @media (prefers-reduced-motion) {
7116
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,
7117
- .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,
7118
- .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 {
7119
7397
  animation: none;
7120
7398
  }
7121
7399
  }
@@ -7127,8 +7405,8 @@
7127
7405
  }
7128
7406
  @media (prefers-reduced-motion) {
7129
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,
7130
- .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,
7131
- .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 {
7132
7410
  animation: none;
7133
7411
  }
7134
7412
  }
@@ -7140,8 +7418,8 @@
7140
7418
  }
7141
7419
  @media (prefers-reduced-motion) {
7142
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,
7143
- .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,
7144
- .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 {
7145
7423
  animation: none;
7146
7424
  }
7147
7425
  }
@@ -7153,8 +7431,8 @@
7153
7431
  }
7154
7432
  @media (prefers-reduced-motion) {
7155
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,
7156
- .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,
7157
- .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 {
7158
7436
  animation: none;
7159
7437
  }
7160
7438
  }
@@ -7166,8 +7444,8 @@
7166
7444
  }
7167
7445
  @media (prefers-reduced-motion) {
7168
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,
7169
- .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,
7170
- .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 {
7171
7449
  animation: none;
7172
7450
  }
7173
7451
  }
@@ -7179,8 +7457,8 @@
7179
7457
  }
7180
7458
  @media (prefers-reduced-motion) {
7181
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,
7182
- .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,
7183
- .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 {
7184
7462
  animation: none;
7185
7463
  }
7186
7464
  }
@@ -7192,8 +7470,8 @@
7192
7470
  }
7193
7471
  @media (prefers-reduced-motion) {
7194
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,
7195
- .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,
7196
- .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 {
7197
7475
  animation: none;
7198
7476
  }
7199
7477
  }
@@ -7205,8 +7483,8 @@
7205
7483
  }
7206
7484
  @media (prefers-reduced-motion) {
7207
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,
7208
- .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,
7209
- .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 {
7210
7488
  animation: none;
7211
7489
  }
7212
7490
  }
@@ -7218,8 +7496,8 @@
7218
7496
  }
7219
7497
  @media (prefers-reduced-motion) {
7220
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,
7221
- .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,
7222
- .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 {
7223
7501
  animation: none;
7224
7502
  }
7225
7503
  }
@@ -7231,8 +7509,8 @@
7231
7509
  }
7232
7510
  @media (prefers-reduced-motion) {
7233
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,
7234
- .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,
7235
- .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 {
7236
7514
  animation: none;
7237
7515
  }
7238
7516
  }
@@ -7244,8 +7522,8 @@
7244
7522
  }
7245
7523
  @media (prefers-reduced-motion) {
7246
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,
7247
- .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,
7248
- .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 {
7249
7527
  animation: none;
7250
7528
  }
7251
7529
  }
@@ -7257,8 +7535,8 @@
7257
7535
  }
7258
7536
  @media (prefers-reduced-motion) {
7259
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,
7260
- .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,
7261
- .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 {
7262
7540
  animation: none;
7263
7541
  }
7264
7542
  }
@@ -7270,8 +7548,8 @@
7270
7548
  }
7271
7549
  @media (prefers-reduced-motion) {
7272
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,
7273
- .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,
7274
- .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 {
7275
7553
  animation: none;
7276
7554
  }
7277
7555
  }
@@ -7283,8 +7561,8 @@
7283
7561
  }
7284
7562
  @media (prefers-reduced-motion) {
7285
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,
7286
- .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,
7287
- .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 {
7288
7566
  animation: none;
7289
7567
  }
7290
7568
  }
@@ -7296,8 +7574,8 @@
7296
7574
  }
7297
7575
  @media (prefers-reduced-motion) {
7298
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,
7299
- .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,
7300
- .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 {
7301
7579
  animation: none;
7302
7580
  }
7303
7581
  }
@@ -7309,8 +7587,8 @@
7309
7587
  }
7310
7588
  @media (prefers-reduced-motion) {
7311
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,
7312
- .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,
7313
- .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 {
7314
7592
  animation: none;
7315
7593
  }
7316
7594
  }
@@ -7322,8 +7600,8 @@
7322
7600
  }
7323
7601
  @media (prefers-reduced-motion) {
7324
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,
7325
- .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,
7326
- .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 {
7327
7605
  animation: none;
7328
7606
  }
7329
7607
  }
@@ -7335,8 +7613,8 @@
7335
7613
  }
7336
7614
  @media (prefers-reduced-motion) {
7337
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,
7338
- .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,
7339
- .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 {
7340
7618
  animation: none;
7341
7619
  }
7342
7620
  }
@@ -7349,8 +7627,8 @@
7349
7627
  }
7350
7628
  @media (prefers-reduced-motion: reduce) {
7351
7629
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7352
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7353
- .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 {
7354
7632
  animation: none;
7355
7633
  }
7356
7634
  }
@@ -7363,8 +7641,8 @@
7363
7641
  }
7364
7642
  @media (prefers-reduced-motion: reduce) {
7365
7643
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7366
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7367
- .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 {
7368
7646
  animation: none;
7369
7647
  }
7370
7648
  }
@@ -7390,8 +7668,8 @@
7390
7668
  }
7391
7669
  @media (prefers-reduced-motion) {
7392
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,
7393
- .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,
7394
- .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 {
7395
7673
  animation: none;
7396
7674
  }
7397
7675
  }
@@ -7403,8 +7681,8 @@
7403
7681
  }
7404
7682
  @media (prefers-reduced-motion) {
7405
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,
7406
- .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,
7407
- .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 {
7408
7686
  animation: none;
7409
7687
  }
7410
7688
  }
@@ -7543,6 +7821,11 @@
7543
7821
  border-radius: 50%;
7544
7822
  }
7545
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
+
7546
7829
  .cds--tooltip__trigger .c4p--user-profile-image svg,
7547
7830
  .c4p--user-profile-image__tooltip.cds--btn--ghost:not([disabled]) svg {
7548
7831
  fill: var(--cds-layer-01, #f4f4f4);
@@ -7673,6 +7956,9 @@
7673
7956
  --cds-border-subtle-selected-01: #6f6f6f;
7674
7957
  --cds-border-subtle-selected-02: #8d8d8d;
7675
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;
7676
7962
  --cds-field-01: #393939;
7677
7963
  --cds-field-02: #525252;
7678
7964
  --cds-field-03: #6f6f6f;
@@ -7684,6 +7970,7 @@
7684
7970
  --cds-focus-inverse: #0f62fe;
7685
7971
  --cds-highlight: #0043ce;
7686
7972
  --cds-icon-disabled: rgba(244, 244, 244, 0.25);
7973
+ --cds-icon-interactive: #ffffff;
7687
7974
  --cds-icon-inverse: #161616;
7688
7975
  --cds-icon-on-color: #ffffff;
7689
7976
  --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
@@ -7769,6 +8056,10 @@
7769
8056
  --cds-label-01-font-weight: 400;
7770
8057
  --cds-label-01-line-height: 1.33333;
7771
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;
7772
8063
  --cds-helper-text-01-font-size: 0.75rem;
7773
8064
  --cds-helper-text-01-line-height: 1.33333;
7774
8065
  --cds-helper-text-01-letter-spacing: 0.32px;
@@ -7830,11 +8121,11 @@
7830
8121
  --cds-productive-heading-05-font-weight: 400;
7831
8122
  --cds-productive-heading-05-line-height: 1.25;
7832
8123
  --cds-productive-heading-05-letter-spacing: 0;
7833
- --cds-productive-heading-06-font-size: 2rem;
8124
+ --cds-productive-heading-06-font-size: 2.625rem;
7834
8125
  --cds-productive-heading-06-font-weight: 300;
7835
8126
  --cds-productive-heading-06-line-height: 1.199;
7836
8127
  --cds-productive-heading-06-letter-spacing: 0;
7837
- --cds-productive-heading-07-font-size: 2.625rem;
8128
+ --cds-productive-heading-07-font-size: 3.375rem;
7838
8129
  --cds-productive-heading-07-font-weight: 300;
7839
8130
  --cds-productive-heading-07-line-height: 1.19;
7840
8131
  --cds-productive-heading-07-letter-spacing: 0;
@@ -7889,7 +8180,7 @@
7889
8180
  --cds-display-03-line-height: 1.19;
7890
8181
  --cds-display-03-letter-spacing: 0;
7891
8182
  --cds-display-04-font-size: 2.625rem;
7892
- --cds-display-04-font-weight: 600;
8183
+ --cds-display-04-font-weight: 300;
7893
8184
  --cds-display-04-line-height: 1.19;
7894
8185
  --cds-display-04-letter-spacing: 0;
7895
8186
  --cds-legal-01-font-size: 0.75rem;
@@ -7936,11 +8227,11 @@
7936
8227
  --cds-heading-05-font-weight: 400;
7937
8228
  --cds-heading-05-line-height: 1.25;
7938
8229
  --cds-heading-05-letter-spacing: 0;
7939
- --cds-heading-06-font-size: 2rem;
8230
+ --cds-heading-06-font-size: 2.625rem;
7940
8231
  --cds-heading-06-font-weight: 300;
7941
8232
  --cds-heading-06-line-height: 1.199;
7942
8233
  --cds-heading-06-letter-spacing: 0;
7943
- --cds-heading-07-font-size: 2.625rem;
8234
+ --cds-heading-07-font-size: 3.375rem;
7944
8235
  --cds-heading-07-font-weight: 300;
7945
8236
  --cds-heading-07-line-height: 1.19;
7946
8237
  --cds-heading-07-letter-spacing: 0;
@@ -7987,7 +8278,7 @@
7987
8278
  --cds-fluid-display-03-line-height: 1.19;
7988
8279
  --cds-fluid-display-03-letter-spacing: 0;
7989
8280
  --cds-fluid-display-04-font-size: 2.625rem;
7990
- --cds-fluid-display-04-font-weight: 600;
8281
+ --cds-fluid-display-04-font-weight: 300;
7991
8282
  --cds-fluid-display-04-line-height: 1.19;
7992
8283
  --cds-fluid-display-04-letter-spacing: 0;
7993
8284
  --cds-layer: var(--cds-layer-01, #f4f4f4);
@@ -8000,9 +8291,10 @@
8000
8291
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
8001
8292
  --cds-field: var(--cds-field-01, #f4f4f4);
8002
8293
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
8003
- --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
8294
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
8004
8295
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
8005
8296
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
8297
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
8006
8298
  position: fixed;
8007
8299
  top: 3rem;
8008
8300
  right: 0;
@@ -8049,6 +8341,9 @@
8049
8341
  --cds-border-subtle-selected-01: #525252;
8050
8342
  --cds-border-subtle-selected-02: #6f6f6f;
8051
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;
8052
8347
  --cds-field-01: #262626;
8053
8348
  --cds-field-02: #393939;
8054
8349
  --cds-field-03: #525252;
@@ -8060,6 +8355,7 @@
8060
8355
  --cds-focus-inverse: #0f62fe;
8061
8356
  --cds-highlight: #002d9c;
8062
8357
  --cds-icon-disabled: rgba(244, 244, 244, 0.25);
8358
+ --cds-icon-interactive: #ffffff;
8063
8359
  --cds-icon-inverse: #161616;
8064
8360
  --cds-icon-on-color: #ffffff;
8065
8361
  --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
@@ -8145,6 +8441,10 @@
8145
8441
  --cds-label-01-font-weight: 400;
8146
8442
  --cds-label-01-line-height: 1.33333;
8147
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;
8148
8448
  --cds-helper-text-01-font-size: 0.75rem;
8149
8449
  --cds-helper-text-01-line-height: 1.33333;
8150
8450
  --cds-helper-text-01-letter-spacing: 0.32px;
@@ -8206,11 +8506,11 @@
8206
8506
  --cds-productive-heading-05-font-weight: 400;
8207
8507
  --cds-productive-heading-05-line-height: 1.25;
8208
8508
  --cds-productive-heading-05-letter-spacing: 0;
8209
- --cds-productive-heading-06-font-size: 2rem;
8509
+ --cds-productive-heading-06-font-size: 2.625rem;
8210
8510
  --cds-productive-heading-06-font-weight: 300;
8211
8511
  --cds-productive-heading-06-line-height: 1.199;
8212
8512
  --cds-productive-heading-06-letter-spacing: 0;
8213
- --cds-productive-heading-07-font-size: 2.625rem;
8513
+ --cds-productive-heading-07-font-size: 3.375rem;
8214
8514
  --cds-productive-heading-07-font-weight: 300;
8215
8515
  --cds-productive-heading-07-line-height: 1.19;
8216
8516
  --cds-productive-heading-07-letter-spacing: 0;
@@ -8265,7 +8565,7 @@
8265
8565
  --cds-display-03-line-height: 1.19;
8266
8566
  --cds-display-03-letter-spacing: 0;
8267
8567
  --cds-display-04-font-size: 2.625rem;
8268
- --cds-display-04-font-weight: 600;
8568
+ --cds-display-04-font-weight: 300;
8269
8569
  --cds-display-04-line-height: 1.19;
8270
8570
  --cds-display-04-letter-spacing: 0;
8271
8571
  --cds-legal-01-font-size: 0.75rem;
@@ -8312,11 +8612,11 @@
8312
8612
  --cds-heading-05-font-weight: 400;
8313
8613
  --cds-heading-05-line-height: 1.25;
8314
8614
  --cds-heading-05-letter-spacing: 0;
8315
- --cds-heading-06-font-size: 2rem;
8615
+ --cds-heading-06-font-size: 2.625rem;
8316
8616
  --cds-heading-06-font-weight: 300;
8317
8617
  --cds-heading-06-line-height: 1.199;
8318
8618
  --cds-heading-06-letter-spacing: 0;
8319
- --cds-heading-07-font-size: 2.625rem;
8619
+ --cds-heading-07-font-size: 3.375rem;
8320
8620
  --cds-heading-07-font-weight: 300;
8321
8621
  --cds-heading-07-line-height: 1.19;
8322
8622
  --cds-heading-07-letter-spacing: 0;
@@ -8363,7 +8663,7 @@
8363
8663
  --cds-fluid-display-03-line-height: 1.19;
8364
8664
  --cds-fluid-display-03-letter-spacing: 0;
8365
8665
  --cds-fluid-display-04-font-size: 2.625rem;
8366
- --cds-fluid-display-04-font-weight: 600;
8666
+ --cds-fluid-display-04-font-weight: 300;
8367
8667
  --cds-fluid-display-04-line-height: 1.19;
8368
8668
  --cds-fluid-display-04-letter-spacing: 0;
8369
8669
  --cds-layer: var(--cds-layer-01, #f4f4f4);
@@ -8376,9 +8676,10 @@
8376
8676
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
8377
8677
  --cds-field: var(--cds-field-01, #f4f4f4);
8378
8678
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
8379
- --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
8679
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
8380
8680
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
8381
8681
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
8682
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
8382
8683
  }
8383
8684
 
8384
8685
  .c4p--web-terminal__body {