@carbon/ibm-products 2.0.0-rc.2 → 2.0.0-rc.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (256) hide show
  1. package/css/index-full-carbon.css +946 -327
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +4 -8
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +785 -168
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +4 -8
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +720 -232
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +4 -8
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +742 -244
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +4 -8
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/APIKeyModal/APIKeyModal.js +1 -1
  18. package/es/components/AddSelect/AddSelect.js +0 -3
  19. package/es/components/AddSelect/AddSelectBody.js +22 -5
  20. package/es/components/AddSelect/AddSelectBreadcrumbs.js +11 -3
  21. package/es/components/AddSelect/AddSelectColumn.js +5 -5
  22. package/es/components/AddSelect/AddSelectFilter.js +5 -4
  23. package/es/components/AddSelect/AddSelectList.js +61 -27
  24. package/es/components/AddSelect/AddSelectMetaPanel.js +1 -1
  25. package/es/components/AddSelect/AddSelectSort.js +1 -1
  26. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +4 -6
  27. package/es/components/Card/Card.js +16 -6
  28. package/es/components/Card/CardFooter.js +3 -1
  29. package/es/components/Card/CardHeader.js +20 -1
  30. package/es/components/ComboButton/ComboButton.js +1 -1
  31. package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
  32. package/es/components/DataSpreadsheet/DataSpreadsheet.js +63 -11
  33. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  34. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  35. package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  36. package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +31 -0
  37. package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  38. package/es/components/Datagrid/Datagrid/Datagrid.js +10 -38
  39. package/es/components/Datagrid/Datagrid/DatagridContent.js +154 -0
  40. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  41. package/es/components/Datagrid/Datagrid/DatagridRow.js +10 -2
  42. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +10 -3
  43. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +13 -4
  44. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +5 -4
  45. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +2 -1
  46. package/es/components/Datagrid/Datagrid/DraggableElement.js +6 -2
  47. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +5 -45
  48. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +4 -1
  49. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +36 -10
  50. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +62 -26
  51. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  52. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +60 -0
  53. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +1 -0
  54. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +534 -0
  55. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +1 -0
  56. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +112 -0
  57. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +27 -0
  58. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +1 -0
  59. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +39 -0
  60. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +19 -0
  61. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +263 -0
  62. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +87 -0
  63. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -14
  64. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -36
  65. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  66. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
  67. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  68. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  69. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  70. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  71. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
  72. package/es/components/Datagrid/index.js +3 -1
  73. package/es/components/Datagrid/useActionsColumn.js +28 -12
  74. package/es/components/Datagrid/useColumnOrder.js +8 -0
  75. package/es/components/Datagrid/useCustomizeColumns.js +5 -0
  76. package/es/components/Datagrid/useDisableSelectRows.js +6 -2
  77. package/es/components/Datagrid/useExpandedRow.js +0 -1
  78. package/es/components/Datagrid/useInfiniteScroll.js +5 -2
  79. package/es/components/Datagrid/useInlineEdit.js +71 -0
  80. package/es/components/Datagrid/useNestedRowExpander.js +42 -0
  81. package/es/components/Datagrid/useNestedRows.js +2 -2
  82. package/es/components/Datagrid/useRowExpander.js +1 -1
  83. package/es/components/Datagrid/useRowSize.js +17 -6
  84. package/es/components/Datagrid/useSelectAllToggle.js +17 -4
  85. package/es/components/Datagrid/useSelectRows.js +12 -2
  86. package/es/components/Datagrid/useSortableColumns.js +1 -1
  87. package/es/components/Datagrid/useStickyColumn.js +11 -0
  88. package/es/components/Datagrid/utils/DatagridActions.js +152 -0
  89. package/es/components/Datagrid/utils/DatagridPagination.js +33 -0
  90. package/es/components/Datagrid/utils/Wrapper.js +21 -0
  91. package/es/components/Datagrid/utils/getArgTypes.js +89 -0
  92. package/es/components/Datagrid/utils/getInlineEditColumns.js +153 -0
  93. package/es/components/Datagrid/utils/makeData.js +46 -1
  94. package/es/components/EditUpdateCards/EditUpdateCards.js +144 -0
  95. package/es/components/EditUpdateCards/index.js +7 -0
  96. package/es/components/ExportModal/ExportModal.js +1 -1
  97. package/es/components/ImportModal/ImportModal.js +3 -3
  98. package/es/components/InlineEdit/InlineEdit.js +11 -9
  99. package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +1 -1
  100. package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +1 -1
  101. package/es/components/NotificationsPanel/NotificationsPanel.js +1 -1
  102. package/es/components/OptionsTile/OptionsTile.js +1 -1
  103. package/es/components/PageHeader/PageHeader.js +1 -1
  104. package/es/components/PageHeader/PageHeaderTitle.js +3 -1
  105. package/es/components/ProductiveCard/ProductiveCard.js +5 -0
  106. package/es/components/Saving/Saving.js +1 -1
  107. package/es/components/SidePanel/SidePanel.js +45 -52
  108. package/es/components/SidePanel/motion/variants.js +45 -0
  109. package/es/components/StatusIcon/StatusIcon.js +1 -1
  110. package/es/components/UserProfileImage/UserProfileImage.js +1 -1
  111. package/es/components/WebTerminal/WebTerminal.js +1 -1
  112. package/es/components/WebTerminal/preview-components/Navigation.js +1 -1
  113. package/es/components/index.js +3 -2
  114. package/es/global/js/hooks/useClickOutside.js +1 -1
  115. package/es/global/js/package-settings.js +5 -4
  116. package/es/global/js/utils/getBezierValues.js +20 -0
  117. package/es/global/js/utils/motionConstants.js +45 -0
  118. package/es/global/js/utils/rangeWithCallback.js +13 -0
  119. package/es/global/js/utils/story-helper.js +5 -1
  120. package/es/global/js/utils/uuidv4.spec.js +4 -0
  121. package/lib/components/APIKeyModal/APIKeyModal.js +4 -4
  122. package/lib/components/AddSelect/AddSelect.js +0 -4
  123. package/lib/components/AddSelect/AddSelectBody.js +22 -5
  124. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +14 -3
  125. package/lib/components/AddSelect/AddSelectColumn.js +5 -5
  126. package/lib/components/AddSelect/AddSelectFilter.js +5 -4
  127. package/lib/components/AddSelect/AddSelectList.js +62 -28
  128. package/lib/components/AddSelect/AddSelectMetaPanel.js +2 -2
  129. package/lib/components/AddSelect/AddSelectSort.js +4 -4
  130. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -6
  131. package/lib/components/Card/Card.js +16 -6
  132. package/lib/components/Card/CardFooter.js +3 -1
  133. package/lib/components/Card/CardHeader.js +21 -1
  134. package/lib/components/ComboButton/ComboButton.js +3 -3
  135. package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
  136. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +63 -10
  137. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  138. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  139. package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  140. package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +42 -0
  141. package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  142. package/lib/components/Datagrid/Datagrid/Datagrid.js +12 -45
  143. package/lib/components/Datagrid/Datagrid/DatagridContent.js +188 -0
  144. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  145. package/lib/components/Datagrid/Datagrid/DatagridRow.js +19 -2
  146. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +12 -3
  147. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +16 -5
  148. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +6 -5
  149. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +2 -1
  150. package/lib/components/Datagrid/Datagrid/DraggableElement.js +7 -3
  151. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +12 -47
  152. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +5 -2
  153. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +48 -25
  154. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +60 -25
  155. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  156. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +76 -0
  157. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +13 -0
  158. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +558 -0
  159. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +13 -0
  160. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +129 -0
  161. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +36 -0
  162. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +19 -0
  163. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +45 -0
  164. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +28 -0
  165. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +272 -0
  166. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +100 -0
  167. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -13
  168. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -35
  169. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  170. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
  171. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  172. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  173. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  174. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  175. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
  176. package/lib/components/Datagrid/index.js +17 -1
  177. package/lib/components/Datagrid/useActionsColumn.js +28 -13
  178. package/lib/components/Datagrid/useColumnOrder.js +17 -0
  179. package/lib/components/Datagrid/useCustomizeColumns.js +5 -0
  180. package/lib/components/Datagrid/useDisableSelectRows.js +6 -2
  181. package/lib/components/Datagrid/useExpandedRow.js +0 -1
  182. package/lib/components/Datagrid/useInfiniteScroll.js +5 -2
  183. package/lib/components/Datagrid/useInlineEdit.js +85 -0
  184. package/lib/components/Datagrid/useNestedRowExpander.js +57 -0
  185. package/lib/components/Datagrid/useNestedRows.js +3 -3
  186. package/lib/components/Datagrid/useRowExpander.js +3 -3
  187. package/lib/components/Datagrid/useRowSize.js +18 -13
  188. package/lib/components/Datagrid/useSelectAllToggle.js +18 -4
  189. package/lib/components/Datagrid/useSelectRows.js +12 -2
  190. package/lib/components/Datagrid/useSortableColumns.js +5 -5
  191. package/lib/components/Datagrid/useStickyColumn.js +11 -0
  192. package/lib/components/Datagrid/utils/DatagridActions.js +170 -0
  193. package/lib/components/Datagrid/utils/DatagridPagination.js +46 -0
  194. package/lib/components/Datagrid/utils/Wrapper.js +33 -0
  195. package/lib/components/Datagrid/utils/getArgTypes.js +97 -0
  196. package/lib/components/Datagrid/utils/getInlineEditColumns.js +168 -0
  197. package/lib/components/Datagrid/utils/makeData.js +47 -1
  198. package/lib/components/EditUpdateCards/EditUpdateCards.js +152 -0
  199. package/lib/components/EditUpdateCards/index.js +13 -0
  200. package/lib/components/ExportModal/ExportModal.js +3 -3
  201. package/lib/components/ImportModal/ImportModal.js +4 -4
  202. package/lib/components/InlineEdit/InlineEdit.js +16 -14
  203. package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +2 -2
  204. package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +3 -3
  205. package/lib/components/NotificationsPanel/NotificationsPanel.js +8 -8
  206. package/lib/components/OptionsTile/OptionsTile.js +6 -6
  207. package/lib/components/PageHeader/PageHeader.js +2 -2
  208. package/lib/components/PageHeader/PageHeaderTitle.js +3 -1
  209. package/lib/components/ProductiveCard/ProductiveCard.js +5 -0
  210. package/lib/components/Saving/Saving.js +5 -5
  211. package/lib/components/SidePanel/SidePanel.js +48 -53
  212. package/lib/components/SidePanel/motion/variants.js +55 -0
  213. package/lib/components/StatusIcon/StatusIcon.js +45 -45
  214. package/lib/components/UserProfileImage/UserProfileImage.js +7 -7
  215. package/lib/components/WebTerminal/WebTerminal.js +3 -3
  216. package/lib/components/WebTerminal/preview-components/Navigation.js +4 -4
  217. package/lib/components/index.js +21 -1
  218. package/lib/global/js/hooks/useClickOutside.js +1 -1
  219. package/lib/global/js/package-settings.js +5 -4
  220. package/lib/global/js/utils/getBezierValues.js +29 -0
  221. package/lib/global/js/utils/motionConstants.js +55 -0
  222. package/lib/global/js/utils/rangeWithCallback.js +22 -0
  223. package/lib/global/js/utils/story-helper.js +5 -1
  224. package/lib/global/js/utils/uuidv4.spec.js +4 -0
  225. package/package.json +18 -16
  226. package/scss/components/AddSelect/_add-select.scss +129 -30
  227. package/scss/components/Card/_card.scss +1 -0
  228. package/scss/components/Cascade/_cascade.scss +1 -1
  229. package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -0
  230. package/scss/components/Datagrid/_datagrid.scss +7 -0
  231. package/scss/components/Datagrid/_storybook-styles.scss +12 -5
  232. package/scss/components/Datagrid/styles/_datagrid.scss +31 -15
  233. package/scss/components/Datagrid/styles/_draggableElement.scss +26 -9
  234. package/scss/components/Datagrid/styles/_index.scss +1 -0
  235. package/scss/components/Datagrid/styles/_useActionsColumn.scss +14 -0
  236. package/scss/components/Datagrid/styles/_useExpandedRow.scss +37 -9
  237. package/scss/components/Datagrid/styles/_useInlineEdit.scss +419 -0
  238. package/scss/components/Datagrid/styles/_useNestedRows.scss +16 -1
  239. package/scss/components/Datagrid/styles/_useStickyColumn.scss +31 -2
  240. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +47 -6
  241. package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +9 -1
  242. package/scss/components/EditUpdateCards/_carbon-imports.scss +9 -0
  243. package/scss/components/EditUpdateCards/_edit-update-cards.scss +85 -0
  244. package/scss/components/EditUpdateCards/_index-with-carbon.scss +9 -0
  245. package/scss/components/EditUpdateCards/_index.scss +8 -0
  246. package/scss/components/EditUpdateCards/_storybook-styles.scss +55 -0
  247. package/scss/components/InlineEdit/_inline-edit.scss +4 -2
  248. package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -6
  249. package/scss/components/PageHeader/_page-header.scss +4 -0
  250. package/scss/components/RemoveModal/_remove-modal.scss +0 -4
  251. package/scss/components/SidePanel/_side-panel.scss +3 -82
  252. package/scss/components/SidePanel/_storybook-styles.scss +6 -1
  253. package/scss/components/Tearsheet/_tearsheet.scss +2 -2
  254. package/scss/components/_index-released-only.scss +1 -0
  255. package/scss/components/_index-with-carbon.scss +1 -0
  256. package/scss/components/_index.scss +1 -0
@@ -2533,7 +2533,7 @@
2533
2533
  @media (prefers-reduced-motion: no-preference) {
2534
2534
  .c4p--cascade__element,
2535
2535
  .c4p--cascade__col {
2536
- /* stylelint-disable-next-line carbon/motion-duration-use -- Carbon animation duration defined above in $animationProps */
2536
+ /* stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use -- Carbon animation duration defined above in $animationProps */
2537
2537
  animation: 240ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 fade;
2538
2538
  animation-fill-mode: forwards;
2539
2539
  opacity: 0;
@@ -2926,26 +2926,6 @@
2926
2926
  margin-bottom: 0;
2927
2927
  }
2928
2928
 
2929
- @keyframes side-panel-exit-left {
2930
- 0% {
2931
- opacity: 1;
2932
- transform: translateX(0);
2933
- }
2934
- 100% {
2935
- opacity: 0;
2936
- transform: translateX(calc(-1 * 30rem));
2937
- }
2938
- }
2939
- @keyframes side-panel-exit-right {
2940
- 0% {
2941
- opacity: 1;
2942
- transform: translateX(0);
2943
- }
2944
- 100% {
2945
- opacity: 0;
2946
- transform: translateX(30rem);
2947
- }
2948
- }
2949
2929
  .c4p--side-panel__container {
2950
2930
  --c4p--side-panel--subtitle-opacity: 1;
2951
2931
  --c4p--side-panel--title-container-height: 0;
@@ -2965,8 +2945,6 @@
2965
2945
  box-sizing: border-box;
2966
2946
  background-color: var(--cds-layer-01, #f4f4f4);
2967
2947
  color: var(--cds-text-primary, #161616);
2968
- transition: transform 240ms;
2969
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
2970
2948
  }
2971
2949
  .c4p--side-panel__container.c4p--side-panel__container--xs {
2972
2950
  width: 16rem;
@@ -2980,37 +2958,13 @@
2980
2958
  max-width: 100%;
2981
2959
  }
2982
2960
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--xs {
2983
- width: 16rem;
2984
- max-width: 100%;
2985
2961
  right: 0;
2986
2962
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2987
2963
  }
2988
- @keyframes side-panel-entrance-right {
2989
- 0% {
2990
- opacity: 0;
2991
- transform: translateX(16rem);
2992
- }
2993
- 100% {
2994
- opacity: 1;
2995
- transform: translateX(0);
2996
- }
2997
- }
2998
2964
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--xs {
2999
- width: 16rem;
3000
- max-width: 100%;
3001
2965
  left: 0;
3002
2966
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3003
2967
  }
3004
- @keyframes side-panel-entrance-left {
3005
- 0% {
3006
- opacity: 0;
3007
- transform: translateX(-16rem);
3008
- }
3009
- 100% {
3010
- opacity: 1;
3011
- transform: translateX(0);
3012
- }
3013
- }
3014
2968
  .c4p--side-panel__container.c4p--side-panel__container--sm {
3015
2969
  width: 20rem;
3016
2970
  max-width: 100%;
@@ -3023,37 +2977,13 @@
3023
2977
  max-width: 100%;
3024
2978
  }
3025
2979
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--sm {
3026
- width: 20rem;
3027
- max-width: 100%;
3028
2980
  right: 0;
3029
2981
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3030
2982
  }
3031
- @keyframes side-panel-entrance-right {
3032
- 0% {
3033
- opacity: 0;
3034
- transform: translateX(20rem);
3035
- }
3036
- 100% {
3037
- opacity: 1;
3038
- transform: translateX(0);
3039
- }
3040
- }
3041
2983
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--sm {
3042
- width: 20rem;
3043
- max-width: 100%;
3044
2984
  left: 0;
3045
2985
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3046
2986
  }
3047
- @keyframes side-panel-entrance-left {
3048
- 0% {
3049
- opacity: 0;
3050
- transform: translateX(-20rem);
3051
- }
3052
- 100% {
3053
- opacity: 1;
3054
- transform: translateX(0);
3055
- }
3056
- }
3057
2987
  .c4p--side-panel__container.c4p--side-panel__container--md {
3058
2988
  width: 30rem;
3059
2989
  max-width: 100%;
@@ -3066,37 +2996,13 @@
3066
2996
  max-width: 100%;
3067
2997
  }
3068
2998
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--md {
3069
- width: 30rem;
3070
- max-width: 100%;
3071
2999
  right: 0;
3072
3000
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3073
3001
  }
3074
- @keyframes side-panel-entrance-right {
3075
- 0% {
3076
- opacity: 0;
3077
- transform: translateX(30rem);
3078
- }
3079
- 100% {
3080
- opacity: 1;
3081
- transform: translateX(0);
3082
- }
3083
- }
3084
3002
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--md {
3085
- width: 30rem;
3086
- max-width: 100%;
3087
3003
  left: 0;
3088
3004
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3089
3005
  }
3090
- @keyframes side-panel-entrance-left {
3091
- 0% {
3092
- opacity: 0;
3093
- transform: translateX(-30rem);
3094
- }
3095
- 100% {
3096
- opacity: 1;
3097
- transform: translateX(0);
3098
- }
3099
- }
3100
3006
  .c4p--side-panel__container.c4p--side-panel__container--lg {
3101
3007
  width: 40rem;
3102
3008
  max-width: 100%;
@@ -3109,37 +3015,13 @@
3109
3015
  max-width: 100%;
3110
3016
  }
3111
3017
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--lg {
3112
- width: 40rem;
3113
- max-width: 100%;
3114
3018
  right: 0;
3115
3019
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3116
3020
  }
3117
- @keyframes side-panel-entrance-right {
3118
- 0% {
3119
- opacity: 0;
3120
- transform: translateX(40rem);
3121
- }
3122
- 100% {
3123
- opacity: 1;
3124
- transform: translateX(0);
3125
- }
3126
- }
3127
3021
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--lg {
3128
- width: 40rem;
3129
- max-width: 100%;
3130
3022
  left: 0;
3131
3023
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3132
3024
  }
3133
- @keyframes side-panel-entrance-left {
3134
- 0% {
3135
- opacity: 0;
3136
- transform: translateX(-40rem);
3137
- }
3138
- 100% {
3139
- opacity: 1;
3140
- transform: translateX(0);
3141
- }
3142
- }
3143
3025
  .c4p--side-panel__container.c4p--side-panel__container--2xl {
3144
3026
  width: 75%;
3145
3027
  max-width: 100%;
@@ -3152,37 +3034,13 @@
3152
3034
  max-width: 100%;
3153
3035
  }
3154
3036
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--2xl {
3155
- width: 75%;
3156
- max-width: 100%;
3157
3037
  right: 0;
3158
3038
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3159
3039
  }
3160
- @keyframes side-panel-entrance-right {
3161
- 0% {
3162
- opacity: 0;
3163
- transform: translateX(75%);
3164
- }
3165
- 100% {
3166
- opacity: 1;
3167
- transform: translateX(0);
3168
- }
3169
- }
3170
3040
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--2xl {
3171
- width: 75%;
3172
- max-width: 100%;
3173
3041
  left: 0;
3174
3042
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3175
3043
  }
3176
- @keyframes side-panel-entrance-left {
3177
- 0% {
3178
- opacity: 0;
3179
- transform: translateX(-75%);
3180
- }
3181
- 100% {
3182
- opacity: 1;
3183
- transform: translateX(0);
3184
- }
3185
- }
3186
3044
  .c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__title-container {
3187
3045
  /* stylelint-disable-next-line max-nesting-depth */
3188
3046
  }
@@ -3315,10 +3173,7 @@
3315
3173
  .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation {
3316
3174
  position: fixed;
3317
3175
  z-index: 2;
3318
- top: calc(
3319
- var(--c4p--side-panel--title-text-height) +
3320
- var(--c4p--side-panel--label-text-height) + 3rem
3321
- );
3176
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
3322
3177
  background-color: var(--cds-layer-01, #f4f4f4);
3323
3178
  }
3324
3179
  .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation.c4p--side-panel__subtitle-text-is-animating {
@@ -3333,7 +3188,6 @@
3333
3188
  }
3334
3189
  .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
3335
3190
  position: fixed;
3336
- top: 3rem;
3337
3191
  height: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
3338
3192
  }
3339
3193
  .c4p--side-panel__container .c4p--side-panel__inner-content {
@@ -3354,10 +3208,7 @@
3354
3208
  }
3355
3209
  .c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
3356
3210
  position: fixed;
3357
- top: calc(
3358
- var(--c4p--side-panel--title-text-height) +
3359
- var(--c4p--side-panel--subtitle-container-height) + 3rem
3360
- );
3211
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height));
3361
3212
  width: 100%;
3362
3213
  border-bottom: 1px solid var(--cds-layer-active-01, #c6c6c6);
3363
3214
  }
@@ -3382,8 +3233,7 @@
3382
3233
  padding: 0 1rem;
3383
3234
  margin-bottom: 0.5rem;
3384
3235
  background-color: var(--cds-layer-01, #f4f4f4);
3385
- transition: transform 150ms;
3386
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
3236
+ transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
3387
3237
  }
3388
3238
  .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button {
3389
3239
  min-width: 2rem;
@@ -3514,8 +3364,6 @@
3514
3364
  width: 100%;
3515
3365
  height: 100%;
3516
3366
  background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
3517
- transition: background-color 240ms;
3518
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
3519
3367
  }
3520
3368
 
3521
3369
  .c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
@@ -3662,7 +3510,7 @@
3662
3510
  /* stylelint-disable-next-line function-no-unknown */
3663
3511
  z-index: 9000;
3664
3512
  align-items: flex-end;
3665
- transition: visibility 0 linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
3513
+ transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
3666
3514
  }
3667
3515
  @media (prefers-reduced-motion: reduce) {
3668
3516
  .c4p--tearsheet.is-visible {
@@ -4444,7 +4292,6 @@
4444
4292
 
4445
4293
  /* stylelint-disable max-nesting-depth */
4446
4294
  .c4p--add-select__selections.cds--structured-list {
4447
- border-top: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4448
4295
  margin-bottom: 0;
4449
4296
  }
4450
4297
  .c4p--add-select__selections-wrapper {
@@ -4452,8 +4299,11 @@
4452
4299
  }
4453
4300
  .c4p--add-select__selections-cell-wrapper {
4454
4301
  display: flex;
4302
+ height: 3rem;
4455
4303
  align-items: center;
4456
4304
  justify-content: space-between;
4305
+ padding: 0 1rem;
4306
+ border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4457
4307
  }
4458
4308
  .c4p--add-select__selections-cell-title {
4459
4309
  display: block;
@@ -4467,17 +4317,20 @@
4467
4317
  display: block;
4468
4318
  color: var(--cds-text-secondary, #525252);
4469
4319
  }
4320
+ .c4p--add-select__selections-cell {
4321
+ display: flex;
4322
+ flex-direction: column;
4323
+ justify-content: center;
4324
+ }
4470
4325
  .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover {
4471
4326
  visibility: visible;
4472
4327
  }
4473
4328
  .c4p--add-select__selections-hidden-hover {
4474
4329
  visibility: hidden;
4475
4330
  }
4476
- .c4p--add-select__selections-row-selected {
4477
- background: #e5e5e5;
4478
- }
4479
- .c4p--add-select__selections-row-selected .c4p--add-select__selections-hidden-hover {
4480
- visibility: visible;
4331
+ .c4p--add-select__selections-row-selectedcds--structured-list-row {
4332
+ border-bottom: 1px solid var(--cds-layer-selected-01, #e0e0e0);
4333
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
4481
4334
  }
4482
4335
  .c4p--add-select__selections-checkbox {
4483
4336
  display: flex;
@@ -4485,7 +4338,7 @@
4485
4338
  }
4486
4339
  .c4p--add-select__selections-checkbox-label-wrapper {
4487
4340
  display: flex;
4488
- margin-left: 0.5rem;
4341
+ margin-left: 1rem;
4489
4342
  }
4490
4343
  .c4p--add-select__selections-checkbox-label-text {
4491
4344
  display: flex;
@@ -4503,6 +4356,13 @@
4503
4356
  .c4p--add-select__selections-cell-icon {
4504
4357
  margin-right: 0.5rem;
4505
4358
  }
4359
+ .c4p--add-select__selections-row {
4360
+ border-left: 0.125rem solid transparent;
4361
+ }
4362
+ .c4p--add-select__selections-row-meta-selected {
4363
+ border-left: 0.125rem solid var(--cds-interactive, #0f62fe);
4364
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
4365
+ }
4506
4366
 
4507
4367
  .c4p--add-select .c4p--add-select__selections-row:hover .c4p--add-select__selections-radio {
4508
4368
  color: var(--cds-interactive, #0f62fe);
@@ -4514,15 +4374,31 @@
4514
4374
  fill: currentColor;
4515
4375
  }
4516
4376
 
4377
+ .c4p--add-select cds--structured-list--selection .c4p--add-select__selections-row-selectedcds--structured-list-row:hover:not(cds--structured-list-row--header-row):not(cds--structured-list-row--selected) {
4378
+ border-bottom: 1px solid var(--cds-layer-accent-hover-01, #d1d1d1);
4379
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
4380
+ }
4381
+
4517
4382
  .c4p--add-select__sub-header {
4518
4383
  display: flex;
4519
4384
  align-items: flex-end;
4520
4385
  justify-content: space-between;
4521
4386
  }
4387
+ .c4p--add-select__sub-header-multi {
4388
+ padding: 0 1rem;
4389
+ }
4390
+
4391
+ .c4p--add-select cds--structured-list-row {
4392
+ border-bottom: 0;
4393
+ }
4394
+
4395
+ .c4p--add-select cds--structured-list--selection cds--structured-list-row:hover:not(cds--structured-list-row--header-row):not(cds--structured-list-row--selected) {
4396
+ border-bottom: 0;
4397
+ }
4522
4398
 
4523
4399
  .c4p--add-select__sidebar-header {
4524
4400
  display: flex;
4525
- padding: 1.5rem 1rem 0.5rem 1rem;
4401
+ padding: 2rem 1rem 0.5rem 1rem;
4526
4402
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4527
4403
  }
4528
4404
  .c4p--add-select__sidebar-header .c4p--add-select__sidebar-title {
@@ -4548,7 +4424,7 @@
4548
4424
  }
4549
4425
 
4550
4426
  .c4p--add-select__sidebar-body {
4551
- padding: 1rem;
4427
+ padding: 0 1rem;
4552
4428
  }
4553
4429
 
4554
4430
  .c4p--add-select .c4p--add-select__sidebar-item-header {
@@ -4581,18 +4457,44 @@
4581
4457
  .c4p--add-select__columns {
4582
4458
  display: flex;
4583
4459
  flex-direction: row;
4460
+ flex-grow: 1;
4584
4461
  overflow-x: auto;
4585
4462
  }
4463
+ .c4p--add-select__columns .c4p--add-select__selections-checkbox-label-wrapper {
4464
+ margin-left: 0.5rem;
4465
+ }
4466
+ .c4p--add-select__columns .c4p--add-select__selections-rowcds--structured-list-row {
4467
+ border-left: 0;
4468
+ }
4469
+ .c4p--add-select__columns .c4p--add-select__selections .c4p--add-select__selections-cell {
4470
+ padding: 0;
4471
+ }
4472
+ .c4p--add-select__columns .c4p--add-select__selections-cell-wrapper {
4473
+ height: auto;
4474
+ padding: 0 0.5rem;
4475
+ }
4476
+ .c4p--add-select__columns .c4p--add-select__tag-container {
4477
+ padding: 0 0.5rem;
4478
+ margin-bottom: 0;
4479
+ }
4480
+ .c4p--add-select__columns .c4p--add-select__selections-wrapper-multi {
4481
+ padding: 0;
4482
+ }
4483
+ .c4p--add-select__columns .c4p--add-select__selectionscds--structured-list {
4484
+ border-top: 0;
4485
+ }
4586
4486
 
4587
- .c4p--add-select .c4p--add-select__columns .cds--structured-list-td {
4588
- height: 0;
4589
- padding: 0 !important;
4487
+ .c4p--add-select__selections-wrapper-multi .c4p--add-select__selections-cell {
4488
+ padding: 0 1rem;
4489
+ }
4490
+
4491
+ .c4p--add-select__selections-row:first-child .c4p--add-select__selections-cell-wrapper {
4492
+ border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4590
4493
  }
4591
4494
 
4592
4495
  .c4p--add-select__column {
4593
4496
  overflow: auto;
4594
- max-width: 15rem;
4595
- flex: 1 0 15rem;
4497
+ flex: 0 0 20rem;
4596
4498
  padding: 1rem;
4597
4499
  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4598
4500
  border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
@@ -4691,13 +4593,6 @@ button.c4p--add-select__global-filter-toggle--open {
4691
4593
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
4692
4594
  }
4693
4595
 
4694
- .c4p--add-select .cds--structured-list-td {
4695
- height: 3rem;
4696
- padding-top: 0;
4697
- padding-bottom: 0;
4698
- vertical-align: middle;
4699
- }
4700
-
4701
4596
  .c4p--add-select__meta-panel p.c4p--add-select__meta-panel-entry-body {
4702
4597
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
4703
4598
  font-weight: var(--cds-body-short-01-font-weight, 400);
@@ -4710,8 +4605,7 @@ button.c4p--add-select__global-filter-toggle--open {
4710
4605
  }
4711
4606
 
4712
4607
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__influencer {
4713
- max-width: 29rem;
4714
- flex: 0 0 50%;
4608
+ flex-basis: 22.5rem;
4715
4609
  }
4716
4610
 
4717
4611
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__header-description {
@@ -4723,6 +4617,10 @@ button.c4p--add-select__global-filter-toggle--open {
4723
4617
  flex-direction: column;
4724
4618
  }
4725
4619
 
4620
+ .c4p--add-select.c4p--add-select__multi .c4p--action-set.cds--btn-set.c4p--action-set--max .c4p--action-set__action-button {
4621
+ max-width: 11.25rem;
4622
+ }
4623
+
4726
4624
  .c4p--add-select .c4p--add-select__items-label {
4727
4625
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
4728
4626
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
@@ -4763,8 +4661,35 @@ button.c4p--add-select__global-filter-toggle--open {
4763
4661
  padding-left: 0.5rem;
4764
4662
  }
4765
4663
 
4766
- .cds--tooltip,
4767
- .cds--overflow-menu-options {
4664
+ .c4p--add-select__multi .c4p--empty-state {
4665
+ max-width: 16rem;
4666
+ margin-top: 3rem;
4667
+ }
4668
+
4669
+ .c4p--add-select .cds--accordion__arrow {
4670
+ transform: rotate(0deg);
4671
+ }
4672
+
4673
+ .c4p--add-select .cds--accordion__item--active .cds--accordion__arrow {
4674
+ transform: rotate(90deg);
4675
+ }
4676
+
4677
+ .c4p--add-select cds--accordion--start cds--accordion__arrow {
4678
+ margin: 0 0 0 1rem;
4679
+ }
4680
+
4681
+ .c4p--add-select cds--accordion--start cds--accordion__title {
4682
+ margin: 0 1rem 0 0.5rem;
4683
+ }
4684
+
4685
+ .c4p--add-select cds--accordion__item--active cds--accordion__content {
4686
+ padding-top: 0;
4687
+ padding-bottom: 0;
4688
+ margin-top: 0.5rem;
4689
+ }
4690
+
4691
+ .c4p--add-select .cds--tooltip,
4692
+ .c4p--add-select .cds--overflow-menu-options {
4768
4693
  z-index: 9000;
4769
4694
  }
4770
4695
 
@@ -5151,8 +5076,7 @@ button.c4p--add-select__global-filter-toggle--open {
5151
5076
  max-height: 38.5rem;
5152
5077
  background-color: var(--cds-background, #ffffff);
5153
5078
  color: var(--cds-text-primary, #161616);
5154
- transition: transform 110ms;
5155
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5079
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
5156
5080
  }
5157
5081
  .c4p--notifications-panel__container .c4p--notifications-panel__header-container {
5158
5082
  position: sticky;
@@ -5226,8 +5150,7 @@ button.c4p--add-select__global-filter-toggle--open {
5226
5150
  background-color: var(--cds-background, #ffffff);
5227
5151
  cursor: pointer;
5228
5152
  text-align: left;
5229
- transition: background-color 240ms;
5230
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5153
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
5231
5154
  }
5232
5155
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title {
5233
5156
  margin-bottom: 0.25rem;
@@ -5340,8 +5263,7 @@ button.c4p--add-select__global-filter-toggle--open {
5340
5263
  margin: 0 auto;
5341
5264
  background-color: var(--cds-layer-02, #ffffff);
5342
5265
  content: "";
5343
- transition: background-color 240ms;
5344
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5266
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
5345
5267
  }
5346
5268
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-today:hover + .c4p--notifications-panel__notification-today:not(:first-of-type):before,
5347
5269
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:hover + .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before,
@@ -7653,6 +7575,12 @@ button.c4p--add-select__global-filter-toggle--open {
7653
7575
  transform: translateY(-2px);
7654
7576
  vertical-align: middle;
7655
7577
  }
7578
+ .c4p--page-header .c4p--page-header__title-wrapper {
7579
+ font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
7580
+ font-weight: var(--cds-productive-heading-04-font-weight, 400);
7581
+ line-height: var(--cds-productive-heading-04-line-height, 1.28572);
7582
+ letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
7583
+ }
7656
7584
  .c4p--page-header .c4p--page-header__page-actions {
7657
7585
  flex: 0 0 100%;
7658
7586
  margin-top: 1rem;
@@ -7883,10 +7811,6 @@ button.c4p--add-select__global-filter-toggle--open {
7883
7811
  padding-right: 1rem;
7884
7812
  }
7885
7813
 
7886
- .c4p--remove-modal .cds--modal-close {
7887
- display: none;
7888
- }
7889
-
7890
7814
  .c4p--remove-modal__body {
7891
7815
  padding-right: 20%;
7892
7816
  margin-bottom: 1rem;
@@ -9830,7 +9754,9 @@ button.c4p--add-select__global-filter-toggle--open {
9830
9754
  display: inline-block;
9831
9755
  overflow: hidden;
9832
9756
  width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
9833
- max-width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
9757
+ max-width: calc(
9758
+ 100% - var(--c4p--inline-edit--toolbar-width) - 1rem
9759
+ );
9834
9760
  min-height: var(--c4p--inline-edit--size);
9835
9761
  /* stylelint-disable-next-line carbon/layout-token-use */
9836
9762
  margin-right: var(--c4p--inline-edit--toolbar-width);
@@ -10321,6 +10247,11 @@ button.c4p--add-select__global-filter-toggle--open {
10321
10247
  align-items: center;
10322
10248
  color: var(--cds-text-primary, #161616);
10323
10249
  }
10250
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__head .c4p--datagrid__head-select-all.c4p--datagrid__checkbox-cell.c4p--datagrid__checkbox-cell-sticky-left {
10251
+ position: sticky;
10252
+ z-index: 1;
10253
+ left: 0;
10254
+ }
10324
10255
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
10325
10256
  align-items: center;
10326
10257
  padding-top: 0;
@@ -10337,6 +10268,11 @@ button.c4p--add-select__global-filter-toggle--open {
10337
10268
  align-items: center;
10338
10269
  padding-top: 0;
10339
10270
  }
10271
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left,
10272
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left {
10273
+ position: sticky;
10274
+ left: 0;
10275
+ }
10340
10276
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.cds--table-column-checkbox {
10341
10277
  display: flex;
10342
10278
  height: 100%;
@@ -10396,9 +10332,12 @@ button.c4p--add-select__global-filter-toggle--open {
10396
10332
  height: 100%;
10397
10333
  overflow-x: auto;
10398
10334
  }
10399
- .c4p--datagrid__grid-container .c4p--datagrid__table-simple {
10400
- overflow: hidden;
10335
+ .c4p--datagrid__grid-container table.c4p--datagrid__table-simple {
10336
+ display: flex;
10337
+ overflow: auto;
10401
10338
  max-height: 100%;
10339
+ flex-direction: column;
10340
+ background-color: var(--cds-layer-01, #f4f4f4);
10402
10341
  }
10403
10342
  .c4p--datagrid__grid-container .c4p--datagrid__head {
10404
10343
  display: flex;
@@ -10486,10 +10425,6 @@ button.c4p--add-select__global-filter-toggle--open {
10486
10425
  flex: 1 1 auto;
10487
10426
  }
10488
10427
 
10489
- .c4p--datagrid__with-pagination table tr:last-of-type > td {
10490
- border-bottom: none;
10491
- }
10492
-
10493
10428
  .c4p--datagrid__resizer {
10494
10429
  position: absolute;
10495
10430
  z-index: 1;
@@ -10529,6 +10464,12 @@ button.c4p--add-select__global-filter-toggle--open {
10529
10464
  .c4p--datagrid__head-hidden-select-all {
10530
10465
  padding-right: 2.5rem;
10531
10466
  }
10467
+ .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
10468
+ position: sticky;
10469
+ z-index: 1;
10470
+ left: 0;
10471
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
10472
+ }
10532
10473
 
10533
10474
  .c4p--datagrid__simple-body {
10534
10475
  position: relative;
@@ -10552,15 +10493,6 @@ button.c4p--add-select__global-filter-toggle--open {
10552
10493
  min-width: 0 !important;
10553
10494
  }
10554
10495
 
10555
- .c4p--datagrid__table-simple::-webkit-scrollbar {
10556
- width: 6px;
10557
- background-color: var(--cds-background, #ffffff);
10558
- }
10559
-
10560
- .c4p--datagrid__table-simple::-webkit-scrollbar-thumb {
10561
- background-color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
10562
- }
10563
-
10564
10496
  .c4p--datagrid__sticky.c4p--datagrid__simple-body {
10565
10497
  overflow: auto;
10566
10498
  }
@@ -10708,10 +10640,21 @@ button.c4p--add-select__global-filter-toggle--open {
10708
10640
  margin: 0;
10709
10641
  }
10710
10642
 
10711
- /*
10712
- * Licensed Materials - Property of IBM
10713
- * 5724-Q36
10714
- * (c) Copyright IBM Corp. 2020 - 2021
10643
+ .c4p--datagrid .c4p--button-menu {
10644
+ height: 3rem;
10645
+ }
10646
+
10647
+ .c4p--datagrid .c4p--datagrid__row-size-button {
10648
+ display: flex;
10649
+ width: 3rem;
10650
+ height: 3rem;
10651
+ justify-content: center;
10652
+ }
10653
+
10654
+ /*
10655
+ * Licensed Materials - Property of IBM
10656
+ * 5724-Q36
10657
+ * (c) Copyright IBM Corp. 2020 - 2022
10715
10658
  * US Government Users Restricted Rights - Use, duplication or disclosure
10716
10659
  * restricted by GSA ADP Schedule Contract with IBM Corp.
10717
10660
  */
@@ -10722,6 +10665,18 @@ button.c4p--add-select__global-filter-toggle--open {
10722
10665
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10723
10666
  }
10724
10667
 
10668
+ .c4p--datagrid .c4p--datagrid__expander-icon {
10669
+ transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
10670
+ }
10671
+
10672
+ .c4p--datagrid .c4p--datagrid__expander-icon--open {
10673
+ transform: rotate(90deg);
10674
+ }
10675
+
10676
+ .c4p--datagrid__expanded-row .c4p--datagrid__carbon-row-expanded td:first-child {
10677
+ border-bottom: none;
10678
+ }
10679
+
10725
10680
  /*
10726
10681
  * Licensed Materials - Property of IBM
10727
10682
  * 5724-Q36
@@ -10850,14 +10805,36 @@ button.c4p--add-select__global-filter-toggle--open {
10850
10805
  /* stylelint-disable-next-line declaration-no-important */
10851
10806
  position: sticky !important;
10852
10807
  right: 0;
10853
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
10808
+ display: flex;
10809
+ align-items: center;
10810
+ border-left: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10854
10811
  }
10855
10812
 
10856
10813
  .c4p--datagrid__right-sticky-column-header {
10857
10814
  /* stylelint-disable-next-line declaration-no-important */
10858
10815
  position: sticky !important;
10859
10816
  right: 0;
10860
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
10817
+ }
10818
+
10819
+ .c4p--datagrid__left-sticky-column-cell {
10820
+ /* stylelint-disable-next-line declaration-no-important */
10821
+ position: sticky !important;
10822
+ left: 0;
10823
+ display: flex;
10824
+ align-items: center;
10825
+ border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10826
+ }
10827
+
10828
+ .c4p--datagrid__left-sticky-column-header {
10829
+ /* stylelint-disable-next-line declaration-no-important */
10830
+ position: sticky !important;
10831
+ z-index: 1;
10832
+ left: 0;
10833
+ }
10834
+
10835
+ .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
10836
+ .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
10837
+ left: 2.5rem;
10861
10838
  }
10862
10839
 
10863
10840
  .c4p--datagrid__sticky-noShadow {
@@ -10873,6 +10850,12 @@ button.c4p--add-select__global-filter-toggle--open {
10873
10850
  right: 6px !important;
10874
10851
  }
10875
10852
 
10853
+ .c4p--datagrid__select-all-toggle-on.c4p--datagrid__select-all-sticky-left {
10854
+ position: sticky;
10855
+ z-index: 1;
10856
+ left: 0;
10857
+ }
10858
+
10876
10859
  /*
10877
10860
  * Licensed Materials - Property of IBM
10878
10861
  * 5724-Q36
@@ -10895,6 +10878,18 @@ button.c4p--add-select__global-filter-toggle--open {
10895
10878
  margin-bottom: 0.5rem;
10896
10879
  }
10897
10880
 
10881
+ .c4p--datagrid .c4p--datagrid__disabled-row-action-button {
10882
+ cursor: not-allowed;
10883
+ }
10884
+
10885
+ .c4p--datagrid .c4p--datagrid__disabled-row-action {
10886
+ pointer-events: none;
10887
+ }
10888
+
10889
+ .c4p--datagrid .c4p--datagrid__disabled-row-action svg {
10890
+ fill: var(--cds-layer-selected-disabled, #8d8d8d);
10891
+ }
10892
+
10898
10893
  /*
10899
10894
  * Licensed Materials - Property of IBM
10900
10895
  * 5724-Q36
@@ -10906,145 +10901,594 @@ button.c4p--add-select__global-filter-toggle--open {
10906
10901
  position: inherit;
10907
10902
  display: flex;
10908
10903
  flex-flow: column;
10909
- /* stylelint-disable-next-line declaration-no-important */
10910
- padding-top: 0 !important;
10904
+ padding: 0;
10905
+ margin: 0;
10911
10906
  }
10912
10907
 
10913
- .c4p--datagrid__customize-columns-checkbox {
10908
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
10909
+ margin-bottom: 0;
10910
+ }
10911
+
10912
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
10914
10913
  display: flex;
10915
10914
  justify-content: center;
10916
- /* stylelint-disable-next-line declaration-no-important */
10917
- margin-bottom: 0 !important;
10918
10915
  }
10919
10916
 
10920
10917
  .c4p--datagrid__customize-columns-modal--actions {
10921
10918
  display: flex;
10919
+ height: 3rem;
10922
10920
  flex-flow: row;
10921
+ background-color: var(--cds-field-02, #ffffff);
10922
+ }
10923
+
10924
+ .c4p--datagrid__customize-columns-modal--actions input[role=searchbox] {
10925
+ height: 3rem;
10926
+ padding-left: 2.5rem;
10927
+ border-bottom: none;
10928
+ }
10929
+
10930
+ .c4p--datagrid__customize-columns-modal--actions > button {
10931
+ margin-left: 1rem;
10932
+ }
10933
+
10934
+ .c4p--datagrid__customize-columns-instructions {
10935
+ padding-left: 1rem;
10923
10936
  margin-bottom: 1.5rem;
10937
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
10938
+ font-weight: var(--cds-body-long-01-font-weight, 400);
10939
+ line-height: var(--cds-body-long-01-line-height, 1.42857);
10940
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
10941
+ color: var(--cds-text-primary, #161616);
10942
+ }
10943
+
10944
+ .c4p--datagrid__customize-columns-column-list {
10945
+ position: relative;
10946
+ overflow: auto;
10947
+ }
10948
+
10949
+ .c4p--datagrid__customize-columns-select-all {
10950
+ display: flex;
10951
+ height: 3rem;
10952
+ align-items: center;
10953
+ padding-left: 2.5rem;
10954
+ border-bottom: 1px solid var(--cds-layer-active);
10955
+ background-color: var(--cds-layer-01, #f4f4f4);
10956
+ }
10957
+
10958
+ .c4p--datagrid__customize-columns-select-all:hover {
10959
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
10960
+ }
10961
+
10962
+ .c4p--datagrid__customize-columns-select-all-selected {
10963
+ display: flex;
10964
+ height: 3rem;
10965
+ align-items: center;
10966
+ padding-left: 2.5rem;
10967
+ border-bottom: 1px solid var(--cds-layer-active);
10968
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
10969
+ }
10970
+
10971
+ .c4p--datagrid__customize-columns-select-all-selected:hover {
10972
+ background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
10973
+ }
10974
+
10975
+ .c4p--datagrid .c4p--datagrid__customize-columns-modal .cds--modal-content {
10976
+ margin-bottom: 0;
10977
+ }
10978
+
10979
+ /*
10980
+ * Licensed Materials - Property of IBM
10981
+ * 5724-Q36
10982
+ * (c) Copyright IBM Corp. 2021
10983
+ * US Government Users Restricted Rights - Use, duplication or disclosure
10984
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
10985
+ */
10986
+ .c4p--datagrid__row-size-dropdown {
10987
+ padding: 1rem;
10988
+ background-color: var(--cds-background, #ffffff);
10989
+ box-shadow: 1px 4px 8px -3px var(--cds-overlay, rgba(22, 22, 22, 0.5)), -1px 6px 8px -5px var(--cds-overlay, rgba(22, 22, 22, 0.5));
10990
+ }
10991
+
10992
+ .c4p--datagrid__row-size-button--open {
10993
+ background-color: var(--cds-background, #ffffff);
10994
+ box-shadow: 1px 4px 8px -3px var(--cds-overlay, rgba(22, 22, 22, 0.5)), -1px 6px 8px -5px var(--cds-overlay, rgba(22, 22, 22, 0.5));
10995
+ }
10996
+
10997
+ .c4p--datagrid .cds--popover--bottom-right.c4p--datagrid__row-height-settings-popover .cds--popover-caret {
10998
+ /* stylelint-disable-next-line carbon/layout-token-use */
10999
+ left: -4px;
11000
+ }
11001
+
11002
+ /*
11003
+ * Licensed Materials - Property of IBM
11004
+ * 5724-Q36
11005
+ * (c) Copyright IBM Corp. 2021
11006
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11007
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11008
+ */
11009
+ th.c4p--datagrid__select-all-toggle-on,
11010
+ td.c4p--datagrid__select-all-toggle-on {
11011
+ /* stylelint-disable-next-line declaration-no-important */
11012
+ width: 4.5rem !important;
11013
+ /* stylelint-disable-next-line declaration-no-important */
11014
+ min-width: initial !important;
11015
+ box-sizing: border-box;
11016
+ flex: 0 0 auto;
11017
+ }
11018
+
11019
+ th.c4p--datagrid__select-all-toggle-on {
11020
+ display: flex;
11021
+ align-items: center;
11022
+ justify-content: center;
11023
+ }
11024
+
11025
+ th.c4p--datagrid__select-all-toggle-on.button {
11026
+ margin-left: 0.125rem;
11027
+ }
11028
+
11029
+ /*
11030
+ * Licensed Materials - Property of IBM
11031
+ * 5724-Q36
11032
+ * (c) Copyright IBM Corp. 2022
11033
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11034
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11035
+ */
11036
+ .c4p--datagrid .c4p--datagrid__expanded-row-content {
11037
+ position: relative;
11038
+ padding: 1rem 1rem 1.5rem 3rem;
11039
+ }
11040
+
11041
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::before {
11042
+ position: absolute;
11043
+ /* stylelint-disable-next-line carbon/layout-token-use */
11044
+ top: -1px;
11045
+ right: 0;
11046
+ width: calc(100% - 3rem);
11047
+ height: 1px;
11048
+ background-color: var(--cds-layer-accent);
11049
+ content: "";
11050
+ }
11051
+
11052
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::after {
11053
+ position: absolute;
11054
+ bottom: 0;
11055
+ left: 0;
11056
+ width: 100%;
11057
+ height: 1px;
11058
+ background-color: var(--cds-layer-accent);
11059
+ content: "";
11060
+ }
11061
+
11062
+ /*
11063
+ * Licensed Materials - Property of IBM
11064
+ * 5724-Q36
11065
+ * (c) Copyright IBM Corp. 2022
11066
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11067
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11068
+ */
11069
+ .c4p--datagrid__draggable-handleStyle {
11070
+ display: flex;
11071
+ align-items: center;
11072
+ margin-right: 0.5rem;
11073
+ cursor: grab;
11074
+ }
11075
+
11076
+ .c4p--datagrid__draggable-handleStyle.disabled {
11077
+ pointer-events: none;
11078
+ }
11079
+
11080
+ svg.c4p--datagrid__draggable-handleStyle.disable {
11081
+ fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
11082
+ }
11083
+
11084
+ .c4p--datagrid__draggable-handleHolder {
11085
+ display: flex;
11086
+ height: 3rem;
11087
+ padding-left: 1rem;
11088
+ border-bottom: 1px solid var(--cds-layer-active);
11089
+ background-color: var(--cds-layer);
11090
+ }
11091
+
11092
+ .c4p--datagrid__draggable-handleHolder:hover {
11093
+ background-color: var(--cds-layer-hover);
11094
+ }
11095
+
11096
+ .c4p--datagrid__draggable-handleHolder-selected {
11097
+ display: flex;
11098
+ height: 3rem;
11099
+ padding-left: 1rem;
11100
+ border-bottom: 1px solid var(--cds-layer-active);
11101
+ background-color: var(--cds-layer-selected);
11102
+ }
11103
+
11104
+ .c4p--datagrid__draggable-handleHolder-selected:hover {
11105
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
11106
+ }
11107
+
11108
+ .c4p--datagrid__draggable-handleHolder-isOver {
11109
+ border: 2px dashed var(--cds-focus, #0f62fe);
11110
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
11111
+ }
11112
+
11113
+ .c4p--datagrid__draggable-handleHolder-droppable {
11114
+ display: flex;
11115
+ width: 100%;
11116
+ }
11117
+
11118
+ .c4p--datagrid__draggable-handleHolder-grabbed {
11119
+ background-color: var(--cds-highlight, #d0e2ff);
11120
+ color: var(--cds-text-primary, #161616);
11121
+ }
11122
+
11123
+ .c4p--datagrid__shared-ui--assistive-text {
11124
+ position: absolute;
11125
+ overflow: hidden;
11126
+ width: 0;
11127
+ height: 0;
11128
+ padding: 0;
11129
+ border: 0;
11130
+ clip: rect(0 0 0 0);
11131
+ text-transform: none;
11132
+ white-space: nowrap;
11133
+ }
11134
+
11135
+ /*
11136
+ * Licensed Materials - Property of IBM
11137
+ * 5724-Q36
11138
+ * (c) Copyright IBM Corp. 2021
11139
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11140
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11141
+ */
11142
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--text-input,
11143
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number input[type=number],
11144
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11145
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xs .cds--date-picker__input {
11146
+ height: 1.5rem;
11147
+ }
11148
+
11149
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::before,
11150
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::after {
11151
+ height: calc(1.5rem - 0.25rem);
11152
+ }
11153
+
11154
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box {
11155
+ max-height: none;
11156
+ }
11157
+
11158
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--text-input,
11159
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number input[type=number],
11160
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11161
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-sm .cds--date-picker__input {
11162
+ height: 2rem;
11163
+ }
11164
+
11165
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::before,
11166
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::after {
11167
+ height: calc(2rem - 0.25rem);
11168
+ }
11169
+
11170
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box {
11171
+ max-height: none;
11172
+ }
11173
+
11174
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--text-input,
11175
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number input[type=number],
11176
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11177
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-md .cds--date-picker__input {
11178
+ height: 2.5rem;
11179
+ }
11180
+
11181
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::before,
11182
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::after {
11183
+ height: calc(2.5rem - 0.25rem);
11184
+ }
11185
+
11186
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box {
11187
+ max-height: none;
11188
+ }
11189
+
11190
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--text-input,
11191
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number input[type=number],
11192
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11193
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-lg .cds--date-picker__input {
11194
+ height: 3rem;
11195
+ }
11196
+
11197
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::before,
11198
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::after {
11199
+ height: calc(3rem - 0.25rem);
11200
+ }
11201
+
11202
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box {
11203
+ max-height: none;
11204
+ }
11205
+
11206
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--text-input,
11207
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number input[type=number],
11208
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11209
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xl .cds--date-picker__input {
11210
+ height: 4rem;
11211
+ }
11212
+
11213
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::before,
11214
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::after {
11215
+ height: calc(4rem - 0.25rem);
11216
+ }
11217
+
11218
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box {
11219
+ max-height: none;
11220
+ }
11221
+
11222
+ .c4p--datagrid {
11223
+ --c4p--datagrid--grid-header-height: 0;
11224
+ }
11225
+
11226
+ .c4p--datagrid__inline-edit-cell {
11227
+ display: flex;
11228
+ height: 100%;
11229
+ align-items: center;
11230
+ }
11231
+
11232
+ .c4p--datagrid .c4p--inline-edit__after-input-elements {
11233
+ display: flex;
11234
+ align-items: center;
11235
+ }
11236
+
11237
+ .c4p--datagrid__inline-edit--outer-cell-button {
11238
+ width: 100%;
11239
+ height: calc(100% + 2px);
11240
+ }
11241
+
11242
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button {
11243
+ position: relative;
11244
+ display: flex;
11245
+ width: 100%;
11246
+ height: 100%;
11247
+ align-items: center;
11248
+ justify-content: space-between;
11249
+ padding-left: 1rem;
11250
+ color: var(--cds-text-secondary, #525252);
11251
+ cursor: pointer;
11252
+ outline: 0;
11253
+ }
11254
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__label-icon {
11255
+ height: 1rem;
11256
+ padding-right: 1rem;
11257
+ }
11258
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--non-edit {
11259
+ padding-left: 0;
11260
+ cursor: default;
11261
+ }
11262
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
11263
+ height: 1rem;
11264
+ fill: var(--cds-icon-secondary, #525252);
11265
+ }
11266
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--date {
11267
+ font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
11268
+ }
11269
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--selection {
11270
+ justify-content: flex-start;
11271
+ }
11272
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not(.c4p--datagrid__inline-edit-button--edit-less-than-half-of-total-cols) {
11273
+ /* stylelint-disable-next-line */
11274
+ }
11275
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not(.c4p--datagrid__inline-edit-button--edit-less-than-half-of-total-cols) .c4p--datagrid__inline-edit-button-icon {
11276
+ display: none;
11277
+ }
11278
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not(.c4p--datagrid__inline-edit-button--edit-less-than-half-of-total-cols):hover .c4p--datagrid__inline-edit-button-icon {
11279
+ display: block;
11280
+ }
11281
+
11282
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover {
11283
+ background-color: var(--cds-layer-active);
11284
+ color: var(--cds-text-primary, #161616);
11285
+ }
11286
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover .c4p--datagrid__inline-edit-button-icon {
11287
+ fill: var(--cds-icon-primary, #161616);
11288
+ }
11289
+
11290
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active:not([data-disabled=true]) {
11291
+ background-color: var(--cds-layer-active);
11292
+ color: var(--cds-text-primary, #161616);
11293
+ cursor: text;
11294
+ }
11295
+
11296
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
11297
+ /* stylelint-disable-next-line carbon/theme-token-use */
11298
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
11299
+ outline-offset: calc(-1 * 0.125rem);
11300
+ }
11301
+ @media screen and (prefers-contrast) {
11302
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
11303
+ outline-style: dotted;
11304
+ }
11305
+ }
11306
+
11307
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button--disabled:not(.c4p--datagrid__inline-edit-button--edit-less-than-half-of-total-cols) {
11308
+ color: var(--cds-button-disabled, #c6c6c6);
11309
+ cursor: not-allowed;
11310
+ }
11311
+
11312
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-label {
11313
+ overflow: hidden;
11314
+ padding-right: 1rem;
11315
+ text-overflow: ellipsis;
11316
+ white-space: nowrap;
11317
+ }
11318
+
11319
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-label.c4p--datagrid__inline-edit-button-label-with-icon {
11320
+ padding-right: 3rem;
11321
+ }
11322
+
11323
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--text-input,
11324
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--number input[type=number] {
11325
+ height: 3rem;
11326
+ }
11327
+
11328
+ .c4p--datagrid__inline-edit-button-icon {
11329
+ position: absolute;
11330
+ right: 1rem;
11331
+ }
11332
+
11333
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit {
11334
+ position: relative;
11335
+ padding: 0;
11336
+ }
11337
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .c4p--datagrid__inline-edit-button--non-edit {
11338
+ padding-left: 1rem;
11339
+ }
11340
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .cds--number input[type=number] {
11341
+ min-width: auto;
11342
+ padding-right: 1rem;
11343
+ }
11344
+
11345
+ .c4p--datagrid__inline-edit--select .c4p--datagrid__inline-edit--select-item {
11346
+ padding-bottom: 1rem;
11347
+ padding-left: 1rem;
11348
+ }
11349
+
11350
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
11351
+ .c4p--datagrid__inline-edit--date .cds--date-picker {
11352
+ width: inherit;
11353
+ }
11354
+
11355
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
11356
+ .c4p--datagrid__inline-edit--date .cds--date-picker.cds--date-picker--single .cds--date-picker__input {
11357
+ width: 100%;
11358
+ height: 3rem;
11359
+ max-height: none;
11360
+ }
11361
+
11362
+ .c4p--datagrid__inline-edit--date .cds--date-picker-container {
11363
+ width: inherit;
11364
+ }
11365
+
11366
+ .c4p--datagrid__inline-edit--date.cds--date-picker.cds--date-picker--single .cds--date-picker__input {
11367
+ overflow: hidden;
11368
+ width: 100%;
11369
+ max-width: none;
11370
+ padding-right: 2rem;
11371
+ text-overflow: ellipsis;
11372
+ white-space: nowrap;
10924
11373
  }
10925
11374
 
10926
- .c4p--datagrid__customize-columns-modal--actions > button {
10927
- margin-left: 1rem;
11375
+ .c4p--datagrid .cds--data-table .c4p--datagrid__carbon-row-hover-active td {
11376
+ border-top-color: var(--cds-layer-hover);
11377
+ background-color: var(--cds-layer-hover);
10928
11378
  }
10929
11379
 
10930
- .c4p--datagrid__customize-columns-instructions {
10931
- margin-bottom: 1.5rem;
10932
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
10933
- font-weight: var(--cds-body-long-01-font-weight, 400);
10934
- line-height: var(--cds-body-long-01-line-height, 1.42857);
10935
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
10936
- color: var(--cds-text-primary, #161616);
11380
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::before {
11381
+ position: absolute;
11382
+ z-index: 2;
11383
+ bottom: 0;
11384
+ left: 0;
11385
+ width: 2px;
11386
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
11387
+ background-color: var(--cds-link-inverse, #78a9ff);
11388
+ content: "";
10937
11389
  }
10938
11390
 
10939
- .c4p--datagrid__customize-columns-column-list {
10940
- position: relative;
10941
- overflow: auto;
11391
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::after {
11392
+ position: absolute;
11393
+ z-index: 2;
11394
+ right: 0;
11395
+ bottom: 0;
11396
+ width: 2px;
11397
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
11398
+ background-color: var(--cds-link-inverse, #78a9ff);
11399
+ content: "";
10942
11400
  }
10943
11401
 
10944
- /*
10945
- * Licensed Materials - Property of IBM
10946
- * 5724-Q36
10947
- * (c) Copyright IBM Corp. 2021
10948
- * US Government Users Restricted Rights - Use, duplication or disclosure
10949
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10950
- */
10951
- .c4p--datagrid__row-size-dropdown {
11402
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .cds--data-table-content::before {
10952
11403
  position: absolute;
10953
- padding: 1rem;
10954
- background-color: var(--cds-background, #ffffff);
10955
- box-shadow: 1px 4px 8px -3px var(--cds-overlay, rgba(22, 22, 22, 0.5)), -1px 6px 8px -5px var(--cds-overlay, rgba(22, 22, 22, 0.5));
11404
+ z-index: 2;
11405
+ top: 0;
11406
+ right: 0;
11407
+ left: 0;
11408
+ width: var(--c4p--datagrid--grid-width);
11409
+ height: 2px;
11410
+ background-color: var(--cds-link-inverse, #78a9ff);
10956
11411
  }
10957
11412
 
10958
- .c4p--datagrid__row-size-button--open {
10959
- background-color: var(--cds-background, #ffffff);
10960
- box-shadow: 1px 4px 8px -3px var(--cds-overlay, rgba(22, 22, 22, 0.5)), -1px 6px 8px -5px var(--cds-overlay, rgba(22, 22, 22, 0.5));
11413
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::before,
11414
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::after {
11415
+ height: calc(100% - 2px - var(--c4p--datagrid--grid-header-height));
10961
11416
  }
10962
11417
 
10963
- /*
10964
- * Licensed Materials - Property of IBM
10965
- * 5724-Q36
10966
- * (c) Copyright IBM Corp. 2021
10967
- * US Government Users Restricted Rights - Use, duplication or disclosure
10968
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10969
- */
10970
- th.c4p--datagrid__select-all-toggle-on,
10971
- td.c4p--datagrid__select-all-toggle-on {
10972
- /* stylelint-disable-next-line declaration-no-important */
10973
- width: 4.5rem !important;
10974
- /* stylelint-disable-next-line declaration-no-important */
10975
- min-width: initial !important;
10976
- box-sizing: border-box;
10977
- flex: 0 0 auto;
11418
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .c4p--datagrid__table-container {
11419
+ outline: 2px solid var(--cds-link-inverse, #78a9ff);
11420
+ outline-offset: -2px;
10978
11421
  }
10979
11422
 
10980
- th.c4p--datagrid__select-all-toggle-on {
10981
- display: flex;
10982
- align-items: center;
10983
- justify-content: center;
11423
+ .c4p--datagrid .c4p--datagrid__grid-container-inline-edit .c4p--datagrid__table-container {
11424
+ padding-top: 0.125rem;
10984
11425
  }
10985
11426
 
10986
- th.c4p--datagrid__select-all-toggle-on.button {
10987
- margin-left: 0.125rem;
11427
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] ~ .cds--form-requirement,
11428
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] .cds--form-requirement {
11429
+ position: absolute;
11430
+ z-index: 3;
11431
+ top: calc(100% - 0.125rem);
11432
+ width: 100%;
11433
+ padding: 0.5rem 1.5rem 0.5rem 0.5rem;
11434
+ margin: 0;
11435
+ background-color: var(--cds-layer-01, #f4f4f4);
11436
+ outline: 0.125rem solid var(--cds-support-error, #da1e28);
11437
+ outline-offset: calc(-1 * 0.125rem);
10988
11438
  }
10989
11439
 
10990
- .c4p--datagrid__expanded-row-content {
10991
- padding: 1rem 1rem 1.5rem 4rem;
11440
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box[data-invalid]:focus-within ~ .cds--form-requirement {
11441
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
10992
11442
  }
10993
11443
 
10994
- /*
10995
- * Licensed Materials - Property of IBM
10996
- * 5724-Q36
10997
- * (c) Copyright IBM Corp. 2022
10998
- * US Government Users Restricted Rights - Use, duplication or disclosure
10999
- * restricted by GSA ADP Schedule Contract with IBM Corp.
11000
- */
11001
- .c4p--datagrid__draggable-handleStyle {
11002
- display: flex;
11003
- align-items: center;
11004
- margin-right: 0.5rem;
11005
- cursor: grab;
11444
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box__invalid-icon,
11445
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input__invalid-icon,
11446
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
11447
+ z-index: 4;
11448
+ top: calc(100% + 0.75rem + 0.125rem);
11449
+ right: 0.5rem;
11006
11450
  }
11007
11451
 
11008
- .c4p--datagrid__draggable-handleStyle.disabled {
11009
- pointer-events: none;
11452
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
11453
+ top: calc(100% + 0.25rem + 0.125rem);
11010
11454
  }
11011
11455
 
11012
- svg.c4p--datagrid__draggable-handleStyle.disable {
11013
- fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
11456
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
11457
+ position: absolute;
11458
+ top: 0;
11459
+ left: 0.125rem;
11460
+ width: calc(100% - (0.125rem * 2));
11461
+ height: 0.125rem;
11462
+ background-color: var(--cds-layer-01, #f4f4f4);
11463
+ content: "";
11014
11464
  }
11015
11465
 
11016
- .c4p--datagrid__draggable-handleHolder {
11017
- display: flex;
11018
- height: 2rem;
11019
- padding-left: 0.25rem;
11020
- margin-bottom: 0.5rem;
11021
- background: var(--cds-layer-02, #ffffff);
11022
- }
11023
- .c4p--datagrid__draggable-handleHolder.c4p--datagrid__draggable-handleHolder-isOver {
11024
- border: 2px dashed var(--cds-focus, #0f62fe);
11025
- background-color: var(--cds-highlight, #d0e2ff);
11466
+ .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
11467
+ position: absolute;
11468
+ top: 0.125rem;
11469
+ left: 0.5rem;
11470
+ width: calc(100% - (0.5rem * 2));
11471
+ height: 1px;
11472
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
11473
+ content: "";
11026
11474
  }
11027
11475
 
11028
- .c4p--datagrid__draggable-handleHolder-droppable {
11029
- display: flex;
11030
- width: 100%;
11476
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
11477
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
11478
+ }
11479
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
11480
+ background-color: transparent;
11031
11481
  }
11032
11482
 
11033
- .c4p--datagrid__draggable-handleHolder--grabbed {
11034
- background-color: var(--cds-highlight, #d0e2ff);
11035
- color: var(--cds-text-primary, #161616);
11483
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input:focus,
11484
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus,
11485
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover,
11486
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__control-btn:focus {
11487
+ outline-color: var(--cds-support-error, #da1e28);
11036
11488
  }
11037
11489
 
11038
- .c4p--datagrid__shared-ui--assistive-text {
11039
- position: absolute;
11040
- overflow: hidden;
11041
- width: 0;
11042
- height: 0;
11043
- padding: 0;
11044
- border: 0;
11045
- clip: rect(0 0 0 0);
11046
- text-transform: none;
11047
- white-space: nowrap;
11490
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number][data-invalid]:focus ~ .cds--number__controls .cds--number__control-btn.up-icon::after {
11491
+ background-color: var(--cds-support-error, #da1e28);
11048
11492
  }
11049
11493
 
11050
11494
  /*
@@ -11054,6 +11498,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11054
11498
  * US Government Users Restricted Rights - Use, duplication or disclosure
11055
11499
  * restricted by GSA ADP Schedule Contract with IBM Corp.
11056
11500
  */
11501
+ /* stylelint-disable max-nesting-depth */
11057
11502
  .c4p--datagrid__datagridWrap {
11058
11503
  display: block;
11059
11504
  width: 100%;
@@ -11061,6 +11506,10 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11061
11506
  .c4p--datagrid__datagridWrap :global(.cds--checkbox) {
11062
11507
  display: none;
11063
11508
  }
11509
+ .c4p--datagrid__datagridWrap .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11510
+ left: 0.125rem;
11511
+ width: 112px;
11512
+ }
11064
11513
 
11065
11514
  .c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11066
11515
  left: 0.125rem;
@@ -13182,7 +13631,7 @@ a.cds--side-nav__link--current::before {
13182
13631
  /* stylelint-disable-next-line function-no-unknown */
13183
13632
  z-index: 9000;
13184
13633
  align-items: flex-end;
13185
- transition: visibility 0 linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
13634
+ transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
13186
13635
  }
13187
13636
 
13188
13637
  @media (prefers-reduced-motion: reduce) {
@@ -13600,6 +14049,45 @@ a.cds--side-nav__link--current::before {
13600
14049
  margin-bottom: 1rem;
13601
14050
  }
13602
14051
 
14052
+ /* stylelint-disable max-nesting-depth */
14053
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit {
14054
+ /* Used id for overriding the SVG path fill */
14055
+ }
14056
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:hover,
14057
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:hover {
14058
+ background-color: #0050e6;
14059
+ }
14060
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:focus,
14061
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:focus {
14062
+ box-shadow: none;
14063
+ }
14064
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button svg path,
14065
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button svg path {
14066
+ fill: #ffffff;
14067
+ }
14068
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button.c4p--loading:hover,
14069
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button.c4p--loading:hover {
14070
+ background-color: transparent;
14071
+ }
14072
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer {
14073
+ background-color: #0f62fe;
14074
+ color: #ffffff;
14075
+ }
14076
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading {
14077
+ animation-duration: 700ms;
14078
+ animation-fill-mode: forwards;
14079
+ animation-iteration-count: infinite;
14080
+ animation-name: rotate;
14081
+ animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
14082
+ }
14083
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading:hover {
14084
+ background-color: transparent;
14085
+ }
14086
+ .c4p--edit-update-cards:not(.c4p--edit-update-cards__actions-bottom)#c4p--edit-update-cards--edit .c4p--card__header {
14087
+ background-color: #0f62fe;
14088
+ color: #ffffff;
14089
+ }
14090
+
13603
14091
  html,
13604
14092
  body,
13605
14093
  div,
@@ -15074,6 +15562,10 @@ em {
15074
15562
  --cds-button-secondary-hover: #5e5e5e;
15075
15563
  --cds-button-tertiary-hover: #f4f4f4;
15076
15564
  --cds-button-disabled: rgba(141, 141, 141, 0.3);
15565
+ --cds-notification-background-error: #393939;
15566
+ --cds-notification-background-success: #393939;
15567
+ --cds-notification-background-info: #393939;
15568
+ --cds-notification-background-warning: #393939;
15077
15569
  --cds-notification-action-tertiary-inverse: #0f62fe;
15078
15570
  --cds-notification-action-tertiary-inverse-active: #002d9c;
15079
15571
  --cds-notification-action-tertiary-inverse-hover: #0050e6;
@@ -15238,6 +15730,10 @@ em {
15238
15730
  --cds-button-secondary-hover: #5e5e5e;
15239
15731
  --cds-button-tertiary-hover: #f4f4f4;
15240
15732
  --cds-button-disabled: rgba(141, 141, 141, 0.3);
15733
+ --cds-notification-background-error: #262626;
15734
+ --cds-notification-background-success: #262626;
15735
+ --cds-notification-background-info: #262626;
15736
+ --cds-notification-background-warning: #262626;
15241
15737
  --cds-notification-action-tertiary-inverse: #0f62fe;
15242
15738
  --cds-notification-action-tertiary-inverse-active: #002d9c;
15243
15739
  --cds-notification-action-tertiary-inverse-hover: #0050e6;
@@ -16515,7 +17011,7 @@ input[data-invalid]:not(:focus),
16515
17011
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
16516
17012
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
16517
17013
  .cds--list-box[data-invalid]:not(:focus),
16518
- .cds--combo-box[data-invalid] .cds--text-input:not(:focus) {
17014
+ .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
16519
17015
  outline: 2px solid var(--cds-support-error, #da1e28);
16520
17016
  outline-offset: -2px;
16521
17017
  }
@@ -16526,7 +17022,7 @@ input[data-invalid]:not(:focus),
16526
17022
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
16527
17023
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
16528
17024
  .cds--list-box[data-invalid]:not(:focus),
16529
- .cds--combo-box[data-invalid] .cds--text-input:not(:focus) {
17025
+ .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
16530
17026
  outline-style: dotted;
16531
17027
  }
16532
17028
  }
@@ -17257,6 +17753,9 @@ fieldset[disabled] .cds--form__helper-text {
17257
17753
  z-index: 1;
17258
17754
  top: 0.8125rem;
17259
17755
  left: 1rem;
17756
+ display: flex;
17757
+ height: 1rem;
17758
+ align-items: center;
17260
17759
  margin: 0;
17261
17760
  }
17262
17761
 
@@ -17275,12 +17774,12 @@ fieldset[disabled] .cds--form__helper-text {
17275
17774
  }
17276
17775
 
17277
17776
  .cds--form--fluid .cds--text-input--invalid,
17278
- .cds--form--fluid .cds--text-input--warn {
17777
+ .cds--form--fluid .cds--text-input--warning {
17279
17778
  border-bottom: none;
17280
17779
  }
17281
17780
 
17282
17781
  .cds--form--fluid .cds--text-input--invalid + .cds--text-input__divider,
17283
- .cds--form--fluid .cds--text-input--warn + .cds--text-input__divider {
17782
+ .cds--form--fluid .cds--text-input--warning + .cds--text-input__divider {
17284
17783
  display: block;
17285
17784
  border-style: solid;
17286
17785
  border-color: var(--cds-border-subtle);
@@ -17292,13 +17791,13 @@ fieldset[disabled] .cds--form__helper-text {
17292
17791
  top: 5rem;
17293
17792
  }
17294
17793
 
17295
- .cds--form--fluid .cds--text-input-wrapper--light {
17296
- background: var(--cds-field-02, #ffffff);
17794
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid,
17795
+ .cds--form--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning {
17796
+ outline: none;
17297
17797
  }
17298
17798
 
17299
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid {
17300
- outline: 2px solid transparent;
17301
- outline-offset: -2px;
17799
+ .cds--form--fluid .cds--text-input__field-wrapper--warning {
17800
+ border-bottom: 1px solid var(--cds-border-strong);
17302
17801
  }
17303
17802
 
17304
17803
  .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
@@ -17311,16 +17810,23 @@ fieldset[disabled] .cds--form__helper-text {
17311
17810
  }
17312
17811
  }
17313
17812
 
17314
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus {
17813
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
17814
+ .cds--form--fluid .cds--text-input__field-wrapper--warning:focus-within {
17315
17815
  outline: 2px solid var(--cds-focus, #0f62fe);
17316
17816
  outline-offset: -2px;
17317
17817
  }
17318
17818
  @media screen and (prefers-contrast) {
17319
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus {
17819
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
17820
+ .cds--form--fluid .cds--text-input__field-wrapper--warning:focus-within {
17320
17821
  outline-style: dotted;
17321
17822
  }
17322
17823
  }
17323
17824
 
17825
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus,
17826
+ .cds--form--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning:focus {
17827
+ outline: none;
17828
+ }
17829
+
17324
17830
  .cds--text-input-wrapper.cds--text-input-wrapper--inline {
17325
17831
  flex-flow: row wrap;
17326
17832
  }
@@ -22294,6 +22800,106 @@ button.cds--dropdown-text:focus {
22294
22800
  }
22295
22801
 
22296
22802
  /* stylelint-enable */
22803
+ .cds--text-input--fluid.cds--text-input-wrapper {
22804
+ position: relative;
22805
+ height: 100%;
22806
+ background: var(--cds-field);
22807
+ transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
22808
+ }
22809
+
22810
+ .cds--text-input--fluid .cds--label {
22811
+ position: absolute;
22812
+ z-index: 1;
22813
+ top: 0.8125rem;
22814
+ left: 1rem;
22815
+ display: flex;
22816
+ height: 1rem;
22817
+ align-items: center;
22818
+ margin: 0;
22819
+ }
22820
+
22821
+ .cds--text-input--fluid .cds--form__helper-text {
22822
+ display: none;
22823
+ }
22824
+
22825
+ .cds--text-input--fluid .cds--text-input {
22826
+ min-height: 4rem;
22827
+ padding: 2rem 1rem 0.8125rem;
22828
+ }
22829
+
22830
+ .cds--text-input__divider,
22831
+ .cds--text-input--fluid .cds--text-input__divider {
22832
+ display: none;
22833
+ }
22834
+
22835
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid],
22836
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning {
22837
+ display: block;
22838
+ }
22839
+
22840
+ .cds--text-input--fluid input[data-invalid] {
22841
+ outline: none;
22842
+ }
22843
+
22844
+ .cds--text-input--fluid .cds--form-requirement {
22845
+ padding: 0.5rem 2.5rem 0.5rem 1rem;
22846
+ margin: 0;
22847
+ }
22848
+
22849
+ .cds--text-input--fluid .cds--text-input--invalid,
22850
+ .cds--text-input--fluid .cds--text-input--warning {
22851
+ border-bottom: none;
22852
+ }
22853
+
22854
+ .cds--text-input--fluid .cds--text-input--invalid + .cds--text-input__divider,
22855
+ .cds--text-input--fluid .cds--text-input--warning + .cds--text-input__divider {
22856
+ display: block;
22857
+ border-style: solid;
22858
+ border-color: var(--cds-border-subtle);
22859
+ border-bottom: none;
22860
+ margin: 0 1rem;
22861
+ }
22862
+
22863
+ .cds--text-input--fluid .cds--text-input__invalid-icon {
22864
+ top: 5rem;
22865
+ }
22866
+
22867
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid,
22868
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning {
22869
+ outline: none;
22870
+ }
22871
+
22872
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning {
22873
+ border-bottom: 1px solid var(--cds-border-strong);
22874
+ }
22875
+
22876
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
22877
+ outline: 2px solid var(--cds-support-error, #da1e28);
22878
+ outline-offset: -2px;
22879
+ }
22880
+ @media screen and (prefers-contrast) {
22881
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
22882
+ outline-style: dotted;
22883
+ }
22884
+ }
22885
+
22886
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
22887
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning:focus-within {
22888
+ outline: 2px solid var(--cds-focus, #0f62fe);
22889
+ outline-offset: -2px;
22890
+ }
22891
+ @media screen and (prefers-contrast) {
22892
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
22893
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning:focus-within {
22894
+ outline-style: dotted;
22895
+ }
22896
+ }
22897
+
22898
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus,
22899
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning:focus {
22900
+ outline: none;
22901
+ }
22902
+
22297
22903
  @keyframes stroke {
22298
22904
  100% {
22299
22905
  stroke-dashoffset: 0;
@@ -22996,6 +23602,10 @@ button.cds--dropdown-text:focus {
22996
23602
  background-color: transparent;
22997
23603
  }
22998
23604
 
23605
+ .cds--multi-select:not(.cds--list-box--expanded) .cds--list-box__menu {
23606
+ visibility: hidden;
23607
+ }
23608
+
22999
23609
  .cds--inline-notification {
23000
23610
  position: relative;
23001
23611
  display: flex;
@@ -26038,13 +26648,13 @@ span.cds--pagination__text.cds--pagination__items-count {
26038
26648
  .cds--popover--left-top .cds--popover-content {
26039
26649
  top: -50%;
26040
26650
  right: 100%;
26041
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
26651
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem)));
26042
26652
  }
26043
26653
 
26044
26654
  .cds--popover--left-bottom .cds--popover-content {
26045
26655
  right: 100%;
26046
26656
  bottom: -50%;
26047
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
26657
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem)));
26048
26658
  }
26049
26659
 
26050
26660
  .cds--popover--left .cds--popover-content::before,
@@ -28948,7 +29558,7 @@ span.cds--pagination__text.cds--pagination__items-count {
28948
29558
  }
28949
29559
 
28950
29560
  .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
28951
- .cds--toggle__button:active + .cds--toggle__label .cds--toggle__switch {
29561
+ .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch {
28952
29562
  box-shadow: 0 0 0 1px var(--cds-focus-inset, #ffffff), 0 0 0 3px var(--cds-focus, #0f62fe);
28953
29563
  }
28954
29564
 
@@ -29023,7 +29633,7 @@ span.cds--pagination__text.cds--pagination__items-count {
29023
29633
 
29024
29634
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
29025
29635
  .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
29026
- .cds--toggle__button:active + .cds--toggle__label .cds--toggle__switch {
29636
+ .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch {
29027
29637
  color: Highlight;
29028
29638
  outline: 1px solid Highlight;
29029
29639
  }
@@ -29084,6 +29694,8 @@ span.cds--pagination__text.cds--pagination__items-count {
29084
29694
  min-height: 2rem;
29085
29695
  flex: 1;
29086
29696
  align-items: center;
29697
+ padding-top: 0.4375rem;
29698
+ padding-bottom: 0.4375rem;
29087
29699
  }
29088
29700
  .cds--tree-node__label:hover {
29089
29701
  background-color: var(--cds-layer-hover-01, #e8e8e8);
@@ -29118,7 +29730,10 @@ span.cds--pagination__text.cds--pagination__items-count {
29118
29730
  }
29119
29731
 
29120
29732
  .cds--tree-parent-node__toggle {
29121
- padding: 0;
29733
+ display: flex;
29734
+ align-items: center;
29735
+ align-self: flex-start;
29736
+ padding: 0.0625rem 0;
29122
29737
  border: 0;
29123
29738
  margin-right: 0.5rem;
29124
29739
  }
@@ -29142,6 +29757,8 @@ span.cds--pagination__text.cds--pagination__items-count {
29142
29757
  .cds--tree-node__icon {
29143
29758
  min-width: 1rem;
29144
29759
  min-height: 1rem;
29760
+ align-self: flex-start;
29761
+ margin-top: 0.0625rem;
29145
29762
  margin-right: 0.5rem;
29146
29763
  fill: var(--cds-icon-secondary, #525252);
29147
29764
  }
@@ -29174,6 +29791,8 @@ span.cds--pagination__text.cds--pagination__items-count {
29174
29791
 
29175
29792
  .cds--tree--xs .cds--tree-node__label {
29176
29793
  min-height: 1.5rem;
29794
+ padding-top: 0.25rem;
29795
+ padding-bottom: 0.25rem;
29177
29796
  }
29178
29797
 
29179
29798
  .cds--content {