@carbon/ibm-products 2.27.0 → 2.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (334) hide show
  1. package/css/index-full-carbon.css +229 -116
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +56 -11
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +229 -116
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +1 -1
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +217 -112
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +1 -1
  16. package/css/index.min.css.map +1 -1
  17. package/es/_virtual/index.js +2 -2
  18. package/es/components/APIKeyModal/APIKeyModal.js +1 -1
  19. package/es/components/AboutModal/AboutModal.js +1 -1
  20. package/es/components/ActionBar/ActionBar.js +1 -1
  21. package/es/components/ActionBar/ActionBarItem.js +1 -1
  22. package/es/components/ActionBar/ActionBarOverflowItems.js +1 -1
  23. package/es/components/ActionSet/ActionSet.js +1 -1
  24. package/es/components/AddSelect/AddSelectBody.js +1 -1
  25. package/es/components/AddSelect/AddSelectBreadcrumbs.js +1 -1
  26. package/es/components/AddSelect/AddSelectFilter.js +1 -1
  27. package/es/components/AddSelect/AddSelectList.js +1 -1
  28. package/es/components/AddSelect/AddSelectRow.js +1 -1
  29. package/es/components/BigNumbers/BigNumbers.js +1 -1
  30. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +1 -1
  31. package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +1 -1
  32. package/es/components/Card/Card.js +1 -1
  33. package/es/components/Card/CardFooter.js +1 -1
  34. package/es/components/Card/CardHeader.js +1 -1
  35. package/es/components/Carousel/Carousel.js +1 -1
  36. package/es/components/Carousel/CarouselItem.js +1 -1
  37. package/es/components/Cascade/Cascade.js +1 -1
  38. package/es/components/Checklist/Checklist.js +1 -1
  39. package/es/components/Checklist/ChecklistChart.js +1 -1
  40. package/es/components/Checklist/ChecklistIcon.js +1 -1
  41. package/es/components/Coachmark/Coachmark.js +1 -1
  42. package/es/components/Coachmark/CoachmarkDragbar.js +1 -1
  43. package/es/components/Coachmark/CoachmarkHeader.js +1 -1
  44. package/es/components/Coachmark/CoachmarkOverlay.js +1 -1
  45. package/es/components/Coachmark/CoachmarkTagline.js +1 -1
  46. package/es/components/CoachmarkBeacon/CoachmarkBeacon.js +1 -1
  47. package/es/components/CoachmarkButton/CoachmarkButton.js +1 -1
  48. package/es/components/CoachmarkFixed/CoachmarkFixed.js +1 -1
  49. package/es/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js +1 -1
  50. package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +1 -1
  51. package/es/components/CoachmarkStack/CoachmarkStack.js +1 -1
  52. package/es/components/CoachmarkStack/CoachmarkStackHome.js +1 -1
  53. package/es/components/ComboButton/ComboButton.js +1 -1
  54. package/es/components/CreateFullPage/CreateFullPage.js +1 -1
  55. package/es/components/CreateFullPage/CreateFullPageStep.js +1 -1
  56. package/es/components/CreateInfluencer/CreateInfluencer.js +1 -1
  57. package/es/components/CreateModal/CreateModal.js +1 -1
  58. package/es/components/CreateSidePanel/CreateSidePanel.js +1 -1
  59. package/es/components/CreateTearsheet/CreateTearsheet.js +8 -2
  60. package/es/components/CreateTearsheet/CreateTearsheetDivider.js +1 -1
  61. package/es/components/CreateTearsheet/CreateTearsheetStep.js +1 -1
  62. package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +1 -1
  63. package/es/components/DataSpreadsheet/DataSpreadsheet.js +1 -1
  64. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +1 -1
  65. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +1 -1
  66. package/es/components/Datagrid/Datagrid/Datagrid.js +1 -1
  67. package/es/components/Datagrid/Datagrid/DatagridContent.js +1 -1
  68. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +8 -4
  69. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +1 -1
  70. package/es/components/Datagrid/Datagrid/DatagridRefBody.js +1 -1
  71. package/es/components/Datagrid/Datagrid/DatagridRow.js +19 -15
  72. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +1 -1
  73. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +1 -1
  74. package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js +1 -1
  75. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +1 -1
  76. package/es/components/Datagrid/Datagrid/DraggableElement.js +1 -1
  77. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +1 -1
  78. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +1 -1
  79. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +1 -1
  80. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +8 -8
  81. package/es/components/Datagrid/Datagrid/addons/Filtering/constants.d.ts +1 -0
  82. package/es/components/Datagrid/Datagrid/addons/Filtering/constants.js +2 -1
  83. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +68 -4
  84. package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +12 -1
  85. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +1 -1
  86. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +1 -1
  87. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +1 -1
  88. package/es/components/Datagrid/useActionsColumn.js +1 -1
  89. package/es/components/Datagrid/useColumnCenterAlign.js +1 -1
  90. package/es/components/Datagrid/useColumnRightAlign.js +1 -1
  91. package/es/components/Datagrid/useDefaultStringRenderer.js +1 -1
  92. package/es/components/Datagrid/useFiltering.js +48 -47
  93. package/es/components/Datagrid/useFloatingScroll.js +1 -1
  94. package/es/components/Datagrid/useInlineEdit.js +1 -1
  95. package/es/components/Datagrid/useNestedRowExpander.js +1 -1
  96. package/es/components/Datagrid/useNestedRows.js +1 -1
  97. package/es/components/Datagrid/useRowExpander.js +1 -1
  98. package/es/components/Datagrid/useSelectAllToggle.js +1 -1
  99. package/es/components/Datagrid/useSelectRows.js +2 -2
  100. package/es/components/Datagrid/useSortableColumns.js +2 -2
  101. package/es/components/Datagrid/useStickyColumn.js +1 -1
  102. package/es/components/DelimitedList/DelimitedList.js +1 -1
  103. package/es/components/EditFullPage/EditFullPage.js +1 -1
  104. package/es/components/EditInPlace/EditInPlace.js +1 -1
  105. package/es/components/EditSidePanel/EditSidePanel.js +1 -1
  106. package/es/components/EditTearsheet/EditTearsheet.js +1 -1
  107. package/es/components/EditTearsheet/EditTearsheetForm.js +1 -1
  108. package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.js +1 -1
  109. package/es/components/EditUpdateCards/EditUpdateCards.js +1 -1
  110. package/es/components/EmptyStates/EmptyState.js +1 -1
  111. package/es/components/EmptyStates/EmptyStateContent.js +1 -1
  112. package/es/components/EmptyStates/EmptyStateV2.js +1 -1
  113. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -1
  114. package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -1
  115. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +1 -1
  116. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -1
  117. package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +1 -1
  118. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +1 -1
  119. package/es/components/EmptyStates/assets/ErrorIllustration.js +1 -1
  120. package/es/components/EmptyStates/assets/NoDataIllustration.js +1 -1
  121. package/es/components/EmptyStates/assets/NoTagsIllustration.js +1 -1
  122. package/es/components/EmptyStates/assets/NotFoundIllustration.js +1 -1
  123. package/es/components/EmptyStates/assets/NotificationsIllustration.js +1 -1
  124. package/es/components/EmptyStates/assets/UnauthorizedIllustration.js +1 -1
  125. package/es/components/ExportModal/ExportModal.js +1 -1
  126. package/es/components/FilterSummary/FilterSummary.js +1 -1
  127. package/es/components/FullPageError/FullPageError.js +1 -1
  128. package/es/components/Guidebanner/Guidebanner.js +1 -1
  129. package/es/components/Guidebanner/GuidebannerElement.js +1 -1
  130. package/es/components/Guidebanner/GuidebannerElementButton.js +1 -1
  131. package/es/components/Guidebanner/GuidebannerElementLink.js +1 -1
  132. package/es/components/HTTPErrors/HTTPError403/HTTPError403.js +1 -1
  133. package/es/components/HTTPErrors/HTTPError404/HTTPError404.js +1 -1
  134. package/es/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +1 -1
  135. package/es/components/ImportModal/ImportModal.js +1 -1
  136. package/es/components/InlineTip/InlineTip.js +1 -1
  137. package/es/components/InlineTip/InlineTipButton.js +1 -1
  138. package/es/components/InlineTip/InlineTipLink.js +1 -1
  139. package/es/components/InterstitialScreen/InterstitialScreen.js +1 -1
  140. package/es/components/InterstitialScreenView/InterstitialScreenView.js +1 -1
  141. package/es/components/InterstitialScreenViewModule/InterstitialScreenViewModule.js +1 -1
  142. package/es/components/NonLinearReading/NonLinearReading.js +1 -1
  143. package/es/components/NotificationsPanel/NotificationsPanel.js +1 -1
  144. package/es/components/OptionsTile/OptionsTile.js +1 -1
  145. package/es/components/PageHeader/PageHeader.js +1 -1
  146. package/es/components/PageHeader/PageHeaderTitle.js +1 -1
  147. package/es/components/PageHeader/PageHeaderUtils.js +1 -1
  148. package/es/components/RemoveModal/RemoveModal.js +1 -1
  149. package/es/components/Saving/Saving.js +1 -1
  150. package/es/components/SearchBar/SearchBar.js +1 -1
  151. package/es/components/SidePanel/SidePanel.js +1 -1
  152. package/es/components/SimpleHeader/SimpleHeader.js +1 -1
  153. package/es/components/StatusIcon/StatusIcon.js +1 -1
  154. package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +1 -1
  155. package/es/components/StringFormatter/StringFormatter.js +1 -1
  156. package/es/components/TagSet/TagSet.js +1 -1
  157. package/es/components/TagSet/TagSetModal.js +1 -1
  158. package/es/components/TagSet/TagSetOverflow.js +1 -1
  159. package/es/components/Tearsheet/TearsheetShell.js +4 -5
  160. package/es/components/Toolbar/Toolbar.js +1 -1
  161. package/es/components/Toolbar/ToolbarButton.js +1 -1
  162. package/es/components/Toolbar/ToolbarGroup.js +1 -1
  163. package/es/components/TooltipTrigger/TooltipTrigger.js +1 -1
  164. package/es/components/TruncatedList/TruncatedList.js +1 -1
  165. package/es/components/UserAvatar/UserAvatar.js +23 -2
  166. package/es/components/UserProfileImage/UserProfileImage.js +1 -1
  167. package/es/components/WebTerminal/WebTerminal.js +1 -1
  168. package/es/components/WebTerminal/WebTerminalContentWrapper.js +1 -1
  169. package/es/components/_Canary/Canary.js +1 -1
  170. package/es/node_modules/prop-types/index.js +1 -1
  171. package/lib/_virtual/index.js +2 -2
  172. package/lib/components/APIKeyModal/APIKeyModal.js +50 -49
  173. package/lib/components/AboutModal/AboutModal.js +17 -16
  174. package/lib/components/ActionBar/ActionBar.js +16 -15
  175. package/lib/components/ActionBar/ActionBarItem.js +8 -7
  176. package/lib/components/ActionBar/ActionBarOverflowItems.js +9 -8
  177. package/lib/components/ActionSet/ActionSet.js +4 -3
  178. package/lib/components/AddSelect/AddSelectBody.js +67 -66
  179. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +7 -6
  180. package/lib/components/AddSelect/AddSelectFilter.js +19 -18
  181. package/lib/components/AddSelect/AddSelectList.js +7 -6
  182. package/lib/components/AddSelect/AddSelectRow.js +33 -32
  183. package/lib/components/BigNumbers/BigNumbers.js +23 -22
  184. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +20 -19
  185. package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +3 -2
  186. package/lib/components/Card/Card.js +5 -4
  187. package/lib/components/Card/CardFooter.js +22 -21
  188. package/lib/components/Card/CardHeader.js +27 -26
  189. package/lib/components/Carousel/Carousel.js +13 -12
  190. package/lib/components/Carousel/CarouselItem.js +6 -5
  191. package/lib/components/Cascade/Cascade.js +9 -8
  192. package/lib/components/Checklist/Checklist.js +33 -32
  193. package/lib/components/Checklist/ChecklistChart.js +7 -6
  194. package/lib/components/Checklist/ChecklistIcon.js +7 -6
  195. package/lib/components/Coachmark/Coachmark.js +21 -20
  196. package/lib/components/Coachmark/CoachmarkDragbar.js +10 -9
  197. package/lib/components/Coachmark/CoachmarkHeader.js +8 -7
  198. package/lib/components/Coachmark/CoachmarkOverlay.js +10 -9
  199. package/lib/components/Coachmark/CoachmarkTagline.js +8 -7
  200. package/lib/components/CoachmarkBeacon/CoachmarkBeacon.js +7 -6
  201. package/lib/components/CoachmarkButton/CoachmarkButton.js +6 -5
  202. package/lib/components/CoachmarkFixed/CoachmarkFixed.js +11 -10
  203. package/lib/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js +8 -7
  204. package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +16 -15
  205. package/lib/components/CoachmarkStack/CoachmarkStack.js +20 -19
  206. package/lib/components/CoachmarkStack/CoachmarkStackHome.js +17 -16
  207. package/lib/components/ComboButton/ComboButton.js +7 -6
  208. package/lib/components/CreateFullPage/CreateFullPage.js +29 -28
  209. package/lib/components/CreateFullPage/CreateFullPageStep.js +18 -17
  210. package/lib/components/CreateInfluencer/CreateInfluencer.js +13 -12
  211. package/lib/components/CreateModal/CreateModal.js +16 -15
  212. package/lib/components/CreateSidePanel/CreateSidePanel.js +21 -20
  213. package/lib/components/CreateTearsheet/CreateTearsheet.js +27 -20
  214. package/lib/components/CreateTearsheet/CreateTearsheetDivider.js +5 -4
  215. package/lib/components/CreateTearsheet/CreateTearsheetStep.js +19 -18
  216. package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +21 -20
  217. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +22 -21
  218. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +56 -55
  219. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +39 -38
  220. package/lib/components/Datagrid/Datagrid/Datagrid.js +7 -6
  221. package/lib/components/Datagrid/Datagrid/DatagridContent.js +32 -31
  222. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +8 -3
  223. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +6 -5
  224. package/lib/components/Datagrid/Datagrid/DatagridRefBody.js +3 -2
  225. package/lib/components/Datagrid/Datagrid/DatagridRow.js +20 -15
  226. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +4 -3
  227. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +14 -13
  228. package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +3 -2
  229. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +6 -5
  230. package/lib/components/Datagrid/Datagrid/DraggableElement.js +13 -12
  231. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +15 -14
  232. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +25 -24
  233. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +27 -26
  234. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +7 -7
  235. package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.d.ts +1 -0
  236. package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +2 -0
  237. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +65 -1
  238. package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +11 -0
  239. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +15 -14
  240. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +20 -19
  241. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +9 -8
  242. package/lib/components/Datagrid/useActionsColumn.js +7 -6
  243. package/lib/components/Datagrid/useColumnCenterAlign.js +3 -2
  244. package/lib/components/Datagrid/useColumnRightAlign.js +3 -2
  245. package/lib/components/Datagrid/useDefaultStringRenderer.js +4 -3
  246. package/lib/components/Datagrid/useFiltering.js +46 -45
  247. package/lib/components/Datagrid/useFloatingScroll.js +6 -2
  248. package/lib/components/Datagrid/useInlineEdit.js +4 -3
  249. package/lib/components/Datagrid/useNestedRowExpander.js +4 -3
  250. package/lib/components/Datagrid/useNestedRows.js +6 -2
  251. package/lib/components/Datagrid/useRowExpander.js +3 -2
  252. package/lib/components/Datagrid/useSelectAllToggle.js +3 -2
  253. package/lib/components/Datagrid/useSelectRows.js +5 -4
  254. package/lib/components/Datagrid/useSortableColumns.js +4 -3
  255. package/lib/components/Datagrid/useStickyColumn.js +4 -3
  256. package/lib/components/DelimitedList/DelimitedList.js +8 -7
  257. package/lib/components/EditFullPage/EditFullPage.js +6 -5
  258. package/lib/components/EditInPlace/EditInPlace.js +23 -22
  259. package/lib/components/EditSidePanel/EditSidePanel.js +23 -22
  260. package/lib/components/EditTearsheet/EditTearsheet.js +18 -17
  261. package/lib/components/EditTearsheet/EditTearsheetForm.js +11 -10
  262. package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.js +6 -5
  263. package/lib/components/EditUpdateCards/EditUpdateCards.js +31 -30
  264. package/lib/components/EmptyStates/EmptyState.js +20 -19
  265. package/lib/components/EmptyStates/EmptyStateContent.js +16 -15
  266. package/lib/components/EmptyStates/EmptyStateV2.js +20 -19
  267. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +18 -17
  268. package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +18 -17
  269. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +18 -17
  270. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +18 -17
  271. package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +18 -17
  272. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +18 -17
  273. package/lib/components/EmptyStates/assets/ErrorIllustration.js +7 -6
  274. package/lib/components/EmptyStates/assets/NoDataIllustration.js +7 -6
  275. package/lib/components/EmptyStates/assets/NoTagsIllustration.js +7 -6
  276. package/lib/components/EmptyStates/assets/NotFoundIllustration.js +7 -6
  277. package/lib/components/EmptyStates/assets/NotificationsIllustration.js +7 -6
  278. package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js +7 -6
  279. package/lib/components/ExportModal/ExportModal.js +30 -29
  280. package/lib/components/FilterSummary/FilterSummary.js +13 -12
  281. package/lib/components/FullPageError/FullPageError.js +13 -12
  282. package/lib/components/Guidebanner/Guidebanner.js +20 -19
  283. package/lib/components/Guidebanner/GuidebannerElement.js +8 -7
  284. package/lib/components/Guidebanner/GuidebannerElementButton.js +8 -7
  285. package/lib/components/Guidebanner/GuidebannerElementLink.js +6 -5
  286. package/lib/components/HTTPErrors/HTTPError403/HTTPError403.js +11 -10
  287. package/lib/components/HTTPErrors/HTTPError404/HTTPError404.js +11 -10
  288. package/lib/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +11 -10
  289. package/lib/components/ImportModal/ImportModal.js +32 -31
  290. package/lib/components/InlineTip/InlineTip.js +21 -20
  291. package/lib/components/InlineTip/InlineTipButton.js +6 -5
  292. package/lib/components/InlineTip/InlineTipLink.js +6 -5
  293. package/lib/components/InterstitialScreen/InterstitialScreen.js +13 -12
  294. package/lib/components/InterstitialScreenView/InterstitialScreenView.js +7 -6
  295. package/lib/components/InterstitialScreenViewModule/InterstitialScreenViewModule.js +7 -6
  296. package/lib/components/NonLinearReading/NonLinearReading.js +9 -8
  297. package/lib/components/NotificationsPanel/NotificationsPanel.js +59 -58
  298. package/lib/components/OptionsTile/OptionsTile.js +21 -20
  299. package/lib/components/PageHeader/PageHeader.js +74 -73
  300. package/lib/components/PageHeader/PageHeaderTitle.js +21 -20
  301. package/lib/components/PageHeader/PageHeaderUtils.js +3 -2
  302. package/lib/components/RemoveModal/RemoveModal.js +22 -21
  303. package/lib/components/Saving/Saving.js +18 -17
  304. package/lib/components/SearchBar/SearchBar.js +20 -19
  305. package/lib/components/SidePanel/SidePanel.js +47 -46
  306. package/lib/components/SimpleHeader/SimpleHeader.js +17 -16
  307. package/lib/components/StatusIcon/StatusIcon.js +9 -8
  308. package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +7 -6
  309. package/lib/components/StringFormatter/StringFormatter.js +11 -10
  310. package/lib/components/TagSet/TagSet.js +21 -20
  311. package/lib/components/TagSet/TagSetModal.js +13 -12
  312. package/lib/components/TagSet/TagSetOverflow.js +18 -17
  313. package/lib/components/Tearsheet/TearsheetShell.js +35 -35
  314. package/lib/components/Toolbar/Toolbar.js +7 -6
  315. package/lib/components/Toolbar/ToolbarButton.js +9 -8
  316. package/lib/components/Toolbar/ToolbarGroup.js +6 -5
  317. package/lib/components/TooltipTrigger/TooltipTrigger.js +6 -5
  318. package/lib/components/TruncatedList/TruncatedList.js +14 -13
  319. package/lib/components/UserAvatar/UserAvatar.js +25 -3
  320. package/lib/components/UserProfileImage/UserProfileImage.js +3 -2
  321. package/lib/components/WebTerminal/WebTerminal.js +14 -13
  322. package/lib/components/WebTerminal/WebTerminalContentWrapper.js +5 -4
  323. package/lib/components/_Canary/Canary.js +6 -5
  324. package/lib/node_modules/prop-types/index.js +1 -1
  325. package/package.json +6 -5
  326. package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +0 -1
  327. package/scss/components/Datagrid/styles/_datagrid.scss +61 -4
  328. package/scss/components/SidePanel/_side-panel.scss +8 -1
  329. package/scss/components/Tearsheet/_tearsheet.scss +4 -5
  330. package/scss/components/UserAvatar/_user-avatar.scss +27 -0
  331. package/es/_virtual/index2.js +0 -10
  332. package/es/node_modules/classnames/index.js +0 -70
  333. package/lib/_virtual/index2.js +0 -14
  334. package/lib/node_modules/classnames/index.js +0 -74
@@ -2962,6 +2962,9 @@ em {
2962
2962
  --cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
2963
2963
  --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
2964
2964
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
2965
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
2966
+ --cds-ai-skeleton-background: #b8d3ff;
2967
+ --cds-ai-skeleton-element-background: #001141;
2965
2968
  --cds-background: #ffffff;
2966
2969
  --cds-background-active: rgba(141, 141, 141, 0.5);
2967
2970
  --cds-background-brand: #0f62fe;
@@ -3182,6 +3185,9 @@ em {
3182
3185
  --cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
3183
3186
  --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
3184
3187
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
3188
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
3189
+ --cds-ai-skeleton-background: #b8d3ff;
3190
+ --cds-ai-skeleton-element-background: #001141;
3185
3191
  --cds-background: #f4f4f4;
3186
3192
  --cds-background-active: rgba(141, 141, 141, 0.5);
3187
3193
  --cds-background-brand: #0f62fe;
@@ -3401,6 +3407,9 @@ em {
3401
3407
  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
3402
3408
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
3403
3409
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
3410
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
3411
+ --cds-ai-skeleton-background: #0053ff;
3412
+ --cds-ai-skeleton-element-background: #001141;
3404
3413
  --cds-background: #262626;
3405
3414
  --cds-background-active: rgba(141, 141, 141, 0.4);
3406
3415
  --cds-background-brand: #0f62fe;
@@ -3617,6 +3626,9 @@ em {
3617
3626
  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
3618
3627
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
3619
3628
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
3629
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
3630
+ --cds-ai-skeleton-background: #0053ff;
3631
+ --cds-ai-skeleton-element-background: #001141;
3620
3632
  --cds-background: #161616;
3621
3633
  --cds-background-active: rgba(141, 141, 141, 0.4);
3622
3634
  --cds-background-brand: #0f62fe;
@@ -4122,7 +4134,7 @@ li.cds--accordion__item--disabled:last-of-type {
4122
4134
  padding-block-start: 100%;
4123
4135
  }
4124
4136
 
4125
- @keyframes hide-feedback {
4137
+ @keyframes cds--hide-feedback {
4126
4138
  0% {
4127
4139
  opacity: 1;
4128
4140
  visibility: inherit;
@@ -4132,7 +4144,7 @@ li.cds--accordion__item--disabled:last-of-type {
4132
4144
  visibility: hidden;
4133
4145
  }
4134
4146
  }
4135
- @keyframes show-feedback {
4147
+ @keyframes cds--show-feedback {
4136
4148
  0% {
4137
4149
  opacity: 0;
4138
4150
  visibility: hidden;
@@ -4142,7 +4154,7 @@ li.cds--accordion__item--disabled:last-of-type {
4142
4154
  visibility: inherit;
4143
4155
  }
4144
4156
  }
4145
- @keyframes skeleton {
4157
+ @keyframes cds--skeleton {
4146
4158
  0% {
4147
4159
  opacity: 0.3;
4148
4160
  transform: scaleX(0);
@@ -5041,7 +5053,7 @@ li.cds--accordion__item--disabled:last-of-type {
5041
5053
  }
5042
5054
  .cds--btn.cds--skeleton::before {
5043
5055
  position: absolute;
5044
- animation: 3000ms ease-in-out skeleton infinite;
5056
+ animation: 3000ms ease-in-out cds--skeleton infinite;
5045
5057
  background: var(--cds-skeleton-element, #c6c6c6);
5046
5058
  block-size: 100%;
5047
5059
  content: "";
@@ -5674,7 +5686,7 @@ a.cds--overflow-menu-options__btn::before {
5674
5686
  }
5675
5687
  .cds--breadcrumb.cds--skeleton .cds--link::before {
5676
5688
  position: absolute;
5677
- animation: 3000ms ease-in-out skeleton infinite;
5689
+ animation: 3000ms ease-in-out cds--skeleton infinite;
5678
5690
  background: var(--cds-skeleton-element, #c6c6c6);
5679
5691
  block-size: 100%;
5680
5692
  content: "";
@@ -6011,7 +6023,7 @@ textarea:-webkit-autofill:focus {
6011
6023
  }
6012
6024
  .cds--label.cds--skeleton::before {
6013
6025
  position: absolute;
6014
- animation: 3000ms ease-in-out skeleton infinite;
6026
+ animation: 3000ms ease-in-out cds--skeleton infinite;
6015
6027
  background: var(--cds-skeleton-element, #c6c6c6);
6016
6028
  block-size: 100%;
6017
6029
  content: "";
@@ -6430,7 +6442,7 @@ fieldset[disabled] .cds--form__helper-text {
6430
6442
  }
6431
6443
  .cds--checkbox-label-text.cds--skeleton::before {
6432
6444
  position: absolute;
6433
- animation: 3000ms ease-in-out skeleton infinite;
6445
+ animation: 3000ms ease-in-out cds--skeleton infinite;
6434
6446
  background: var(--cds-skeleton-element, #c6c6c6);
6435
6447
  block-size: 100%;
6436
6448
  content: "";
@@ -6575,10 +6587,10 @@ fieldset[disabled] .cds--form__helper-text {
6575
6587
  border: none;
6576
6588
  }
6577
6589
  .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-out::before, .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-out .cds--copy-btn__feedback {
6578
- animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) hide-feedback;
6590
+ animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--hide-feedback;
6579
6591
  }
6580
6592
  .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-in::before, .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-in .cds--copy-btn__feedback {
6581
- animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) show-feedback;
6593
+ animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--show-feedback;
6582
6594
  }
6583
6595
 
6584
6596
  .cds--copy-btn svg {
@@ -6731,12 +6743,12 @@ fieldset[disabled] .cds--form__helper-text {
6731
6743
 
6732
6744
  .cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-out::before,
6733
6745
  .cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-out .cds--copy-btn__feedback {
6734
- animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) hide-feedback;
6746
+ animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--hide-feedback;
6735
6747
  }
6736
6748
 
6737
6749
  .cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-in::before,
6738
6750
  .cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-in .cds--copy-btn__feedback {
6739
- animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) show-feedback;
6751
+ animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--show-feedback;
6740
6752
  }
6741
6753
 
6742
6754
  .cds--snippet--inline code {
@@ -7165,7 +7177,7 @@ fieldset[disabled] .cds--form__helper-text {
7165
7177
  }
7166
7178
  .cds--snippet.cds--skeleton span::before {
7167
7179
  position: absolute;
7168
- animation: 3000ms ease-in-out skeleton infinite;
7180
+ animation: 3000ms ease-in-out cds--skeleton infinite;
7169
7181
  background: var(--cds-skeleton-element, #c6c6c6);
7170
7182
  block-size: 100%;
7171
7183
  content: "";
@@ -7427,7 +7439,7 @@ fieldset[disabled] .cds--form__helper-text {
7427
7439
  .cds--text-input--password__visibility.cds--tooltip--visible::before, .cds--text-input--password__visibility.cds--tooltip--visible::after, .cds--text-input--password__visibility:hover::before, .cds--text-input--password__visibility:hover::after, .cds--text-input--password__visibility:focus::before, .cds--text-input--password__visibility:focus::after {
7428
7440
  opacity: 1;
7429
7441
  }
7430
- @keyframes tooltip-fade {
7442
+ @keyframes cds--tooltip-fade {
7431
7443
  from {
7432
7444
  opacity: 0;
7433
7445
  }
@@ -7447,7 +7459,7 @@ fieldset[disabled] .cds--form__helper-text {
7447
7459
  .cds--text-input--password__visibility.cds--tooltip--visible + .cds--assistive-text, .cds--text-input--password__visibility.cds--tooltip--visible.cds--tooltip--a11y::before, .cds--text-input--password__visibility:hover .cds--assistive-text,
7448
7460
  .cds--text-input--password__visibility:hover + .cds--assistive-text, .cds--text-input--password__visibility:hover.cds--tooltip--a11y::before, .cds--text-input--password__visibility:focus .cds--assistive-text,
7449
7461
  .cds--text-input--password__visibility:focus + .cds--assistive-text, .cds--text-input--password__visibility:focus.cds--tooltip--a11y::before {
7450
- animation: tooltip-fade 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
7462
+ animation: cds--tooltip-fade 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
7451
7463
  }
7452
7464
  .cds--text-input--password__visibility.cds--tooltip--hidden .cds--assistive-text, .cds--text-input--password__visibility.cds--tooltip--hidden + .cds--assistive-text {
7453
7465
  overflow: hidden;
@@ -7624,7 +7636,7 @@ fieldset[disabled] .cds--form__helper-text {
7624
7636
  }
7625
7637
  .cds--skeleton.cds--text-input::before {
7626
7638
  position: absolute;
7627
- animation: 3000ms ease-in-out skeleton infinite;
7639
+ animation: 3000ms ease-in-out cds--skeleton infinite;
7628
7640
  background: var(--cds-skeleton-element, #c6c6c6);
7629
7641
  block-size: 100%;
7630
7642
  content: "";
@@ -8107,7 +8119,7 @@ fieldset[disabled] .cds--form__helper-text {
8107
8119
  }
8108
8120
  .cds--tag.cds--skeleton::before {
8109
8121
  position: absolute;
8110
- animation: 3000ms ease-in-out skeleton infinite;
8122
+ animation: 3000ms ease-in-out cds--skeleton infinite;
8111
8123
  background: var(--cds-skeleton-element, #c6c6c6);
8112
8124
  block-size: 100%;
8113
8125
  content: "";
@@ -10084,7 +10096,7 @@ fieldset[disabled] .cds--form__helper-text {
10084
10096
  }
10085
10097
  .cds--radio-button__label.cds--skeleton::before {
10086
10098
  position: absolute;
10087
- animation: 3000ms ease-in-out skeleton infinite;
10099
+ animation: 3000ms ease-in-out cds--skeleton infinite;
10088
10100
  background: var(--cds-skeleton-element, #c6c6c6);
10089
10101
  block-size: 100%;
10090
10102
  content: "";
@@ -11305,7 +11317,7 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
11305
11317
  .cds--search--md.cds--skeleton .cds--search-input::before,
11306
11318
  .cds--search--sm.cds--skeleton .cds--search-input::before {
11307
11319
  position: absolute;
11308
- animation: 3000ms ease-in-out skeleton infinite;
11320
+ animation: 3000ms ease-in-out cds--skeleton infinite;
11309
11321
  background: var(--cds-skeleton-element, #c6c6c6);
11310
11322
  block-size: 100%;
11311
11323
  content: "";
@@ -12347,7 +12359,7 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
12347
12359
  .cds--data-table.cds--skeleton th span::before,
12348
12360
  .cds--data-table.cds--skeleton td span::before {
12349
12361
  position: absolute;
12350
- animation: 3000ms ease-in-out skeleton infinite;
12362
+ animation: 3000ms ease-in-out cds--skeleton infinite;
12351
12363
  background: var(--cds-skeleton-element, #c6c6c6);
12352
12364
  block-size: 100%;
12353
12365
  content: "";
@@ -12400,7 +12412,7 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
12400
12412
  }
12401
12413
  .cds--data-table-container.cds--skeleton .cds--data-table-header__title::before {
12402
12414
  position: absolute;
12403
- animation: 3000ms ease-in-out skeleton infinite;
12415
+ animation: 3000ms ease-in-out cds--skeleton infinite;
12404
12416
  background: var(--cds-skeleton-element, #c6c6c6);
12405
12417
  block-size: 100%;
12406
12418
  content: "";
@@ -12431,7 +12443,7 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
12431
12443
  }
12432
12444
  .cds--data-table-container.cds--skeleton .cds--data-table-header__description::before {
12433
12445
  position: absolute;
12434
- animation: 3000ms ease-in-out skeleton infinite;
12446
+ animation: 3000ms ease-in-out cds--skeleton infinite;
12435
12447
  background: var(--cds-skeleton-element, #c6c6c6);
12436
12448
  block-size: 100%;
12437
12449
  content: "";
@@ -13429,7 +13441,7 @@ th .cds--table-sort__flex {
13429
13441
  .cds--date-picker.cds--skeleton input::before,
13430
13442
  .cds--date-picker__input.cds--skeleton::before {
13431
13443
  position: absolute;
13432
- animation: 3000ms ease-in-out skeleton infinite;
13444
+ animation: 3000ms ease-in-out cds--skeleton infinite;
13433
13445
  background: var(--cds-skeleton-element, #c6c6c6);
13434
13446
  block-size: 100%;
13435
13447
  content: "";
@@ -13464,7 +13476,7 @@ th .cds--table-sort__flex {
13464
13476
  }
13465
13477
  .cds--date-picker.cds--skeleton .cds--label::before {
13466
13478
  position: absolute;
13467
- animation: 3000ms ease-in-out skeleton infinite;
13479
+ animation: 3000ms ease-in-out cds--skeleton infinite;
13468
13480
  background: var(--cds-skeleton-element, #c6c6c6);
13469
13481
  block-size: 100%;
13470
13482
  content: "";
@@ -13934,7 +13946,7 @@ button.cds--dropdown-text:focus {
13934
13946
  .cds--dropdown-v2.cds--skeleton::before,
13935
13947
  .cds--dropdown.cds--skeleton::before {
13936
13948
  position: absolute;
13937
- animation: 3000ms ease-in-out skeleton infinite;
13949
+ animation: 3000ms ease-in-out cds--skeleton infinite;
13938
13950
  background: var(--cds-skeleton-element, #c6c6c6);
13939
13951
  block-size: 100%;
13940
13952
  content: "";
@@ -13992,7 +14004,7 @@ button.cds--dropdown-text:focus {
13992
14004
  animation-duration: 690ms;
13993
14005
  animation-fill-mode: forwards;
13994
14006
  animation-iteration-count: infinite;
13995
- animation-name: rotate;
14007
+ animation-name: cds--rotate;
13996
14008
  animation-timing-function: linear;
13997
14009
  block-size: 5.5rem;
13998
14010
  inline-size: 5.5rem;
@@ -14004,7 +14016,7 @@ button.cds--dropdown-text:focus {
14004
14016
  }
14005
14017
  .cds--loading svg circle {
14006
14018
  animation-duration: 10ms;
14007
- animation-name: init-stroke;
14019
+ animation-name: cds--init-stroke;
14008
14020
  animation-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
14009
14021
  }
14010
14022
  @media screen and (prefers-reduced-motion: reduce) {
@@ -14033,13 +14045,13 @@ button.cds--dropdown-text:focus {
14033
14045
  }
14034
14046
 
14035
14047
  .cds--loading--stop {
14036
- animation: rotate-end-p1 700ms cubic-bezier(0, 0, 0.25, 1) forwards, rotate-end-p2 700ms cubic-bezier(0, 0, 0.25, 1) 700ms forwards;
14048
+ animation: cds--rotate-end-p1 700ms cubic-bezier(0, 0, 0.25, 1) forwards, cds--rotate-end-p2 700ms cubic-bezier(0, 0, 0.25, 1) 700ms forwards;
14037
14049
  }
14038
14050
  .cds--loading--stop svg circle {
14039
14051
  animation-delay: 700ms;
14040
14052
  animation-duration: 700ms;
14041
14053
  animation-fill-mode: forwards;
14042
- animation-name: stroke-end;
14054
+ animation-name: cds--stroke-end;
14043
14055
  animation-timing-function: cubic-bezier(0, 0, 0.25, 1);
14044
14056
  }
14045
14057
  @media screen and (prefers-reduced-motion: reduce) {
@@ -14092,7 +14104,7 @@ button.cds--dropdown-text:focus {
14092
14104
  display: none;
14093
14105
  }
14094
14106
 
14095
- @keyframes rotate {
14107
+ @keyframes cds--rotate {
14096
14108
  0% {
14097
14109
  transform: rotate(0deg);
14098
14110
  }
@@ -14100,18 +14112,18 @@ button.cds--dropdown-text:focus {
14100
14112
  transform: rotate(360deg);
14101
14113
  }
14102
14114
  }
14103
- @keyframes rotate-end-p1 {
14115
+ @keyframes cds--rotate-end-p1 {
14104
14116
  100% {
14105
14117
  transform: rotate(360deg);
14106
14118
  }
14107
14119
  }
14108
- @keyframes rotate-end-p2 {
14120
+ @keyframes cds--rotate-end-p2 {
14109
14121
  100% {
14110
14122
  transform: rotate(-360deg);
14111
14123
  }
14112
14124
  }
14113
14125
  /* Stroke animations */
14114
- @keyframes init-stroke {
14126
+ @keyframes cds--init-stroke {
14115
14127
  0% {
14116
14128
  stroke-dashoffset: 276.4608;
14117
14129
  }
@@ -14119,7 +14131,7 @@ button.cds--dropdown-text:focus {
14119
14131
  stroke-dashoffset: 52.527552;
14120
14132
  }
14121
14133
  }
14122
- @keyframes stroke-end {
14134
+ @keyframes cds--stroke-end {
14123
14135
  0% {
14124
14136
  stroke-dashoffset: 52.527552;
14125
14137
  }
@@ -15699,7 +15711,7 @@ button.cds--dropdown-text:focus {
15699
15711
  }
15700
15712
  .cds--number.cds--skeleton::before {
15701
15713
  position: absolute;
15702
- animation: 3000ms ease-in-out skeleton infinite;
15714
+ animation: 3000ms ease-in-out cds--skeleton infinite;
15703
15715
  background: var(--cds-skeleton-element, #c6c6c6);
15704
15716
  block-size: 100%;
15705
15717
  content: "";
@@ -16286,7 +16298,7 @@ optgroup.cds--select-optgroup:disabled,
16286
16298
  }
16287
16299
  .cds--select.cds--skeleton::before {
16288
16300
  position: absolute;
16289
- animation: 3000ms ease-in-out skeleton infinite;
16301
+ animation: 3000ms ease-in-out cds--skeleton infinite;
16290
16302
  background: var(--cds-skeleton-element, #c6c6c6);
16291
16303
  block-size: 100%;
16292
16304
  content: "";
@@ -16647,7 +16659,7 @@ optgroup.cds--select-optgroup:disabled,
16647
16659
  }
16648
16660
  .cds--text-area.cds--skeleton::before {
16649
16661
  position: absolute;
16650
- animation: 3000ms ease-in-out skeleton infinite;
16662
+ animation: 3000ms ease-in-out cds--skeleton infinite;
16651
16663
  background: var(--cds-skeleton-element, #c6c6c6);
16652
16664
  block-size: 100%;
16653
16665
  content: "";
@@ -17186,7 +17198,7 @@ optgroup.cds--select-optgroup:disabled,
17186
17198
  inline-size: 50%;
17187
17199
  }
17188
17200
 
17189
- @keyframes stroke {
17201
+ @keyframes prefix--stroke {
17190
17202
  100% {
17191
17203
  stroke-dashoffset: 0;
17192
17204
  }
@@ -17229,7 +17241,7 @@ optgroup.cds--select-optgroup:disabled,
17229
17241
  .cds--inline-loading__checkmark {
17230
17242
  animation-duration: 250ms;
17231
17243
  animation-fill-mode: forwards;
17232
- animation-name: stroke;
17244
+ animation-name: cds--stroke;
17233
17245
  fill: none;
17234
17246
  stroke: var(--cds-interactive, #0f62fe);
17235
17247
  stroke-dasharray: 12;
@@ -17695,52 +17707,13 @@ optgroup.cds--select-optgroup:disabled,
17695
17707
 
17696
17708
  .cds--modal-scroll-content {
17697
17709
  border-block-end: 2px solid transparent;
17710
+ mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 80px), transparent calc(100% - 48px), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 16px, transparent 16px), linear-gradient(to right, var(--cds-layer) 0, 2px, transparent 2px), linear-gradient(to top, var(--cds-layer) 0, 2px, transparent 2px);
17698
17711
  }
17699
17712
 
17700
17713
  .cds--modal-scroll-content > *:last-child {
17701
17714
  padding-block-end: 1.5rem;
17702
17715
  }
17703
17716
 
17704
- .cds--modal-content--overflow-indicator {
17705
- position: absolute;
17706
- background: var(--cds-layer);
17707
- block-size: 3rem;
17708
- grid-column: 1/-1;
17709
- grid-row: 2/-2;
17710
- inline-size: calc(100% - 1rem);
17711
- inset-block-end: 0;
17712
- inset-inline-start: 0;
17713
- pointer-events: none;
17714
- }
17715
- .cds--modal-content--overflow-indicator::before {
17716
- position: absolute;
17717
- background-image: linear-gradient(to bottom, transparent, var(--cds-layer));
17718
- block-size: 2rem;
17719
- content: "";
17720
- inline-size: 100%;
17721
- inset-block-start: -32px;
17722
- pointer-events: none;
17723
- }
17724
-
17725
- @media not all and (min-resolution >= 0.001dpcm) {
17726
- @supports (-webkit-appearance: none) and (stroke-color: transparent) {
17727
- .cds--modal-content--overflow-indicator {
17728
- background-image: linear-gradient(to bottom, rgba(var(--cds-layer), 0), var(--cds-layer));
17729
- }
17730
- }
17731
- }
17732
- .cds--modal-content:focus ~ .cds--modal-content--overflow-indicator {
17733
- margin: 0 2px 2px;
17734
- }
17735
-
17736
- @media screen and (-ms-high-contrast: active) {
17737
- .cds--modal-scroll-content > *:last-child {
17738
- padding-block-end: 0;
17739
- }
17740
- .cds--modal-content--overflow-indicator {
17741
- display: none;
17742
- }
17743
- }
17744
17717
  .cds--modal-footer {
17745
17718
  display: flex;
17746
17719
  justify-content: flex-end;
@@ -17812,14 +17785,20 @@ optgroup.cds--select-optgroup:disabled,
17812
17785
  margin: 0;
17813
17786
  }
17814
17787
 
17788
+ .cds--modal--slug.cds--modal {
17789
+ background-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5));
17790
+ }
17791
+
17815
17792
  .cds--modal--slug .cds--modal-container {
17816
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
17793
+ background: linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
17794
+ border: 1px solid transparent;
17817
17795
  background-color: var(--cds-layer);
17796
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
17818
17797
  }
17819
17798
 
17820
- .cds--modal--slug .cds--modal-container:has(.cds--btn-set:not(.cds--modal-footer--three-button) > button:not(:only-child)) {
17821
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) calc(0% + 64px), var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
17822
- background-color: var(--cds-layer);
17799
+ .cds--modal--slug .cds--modal-container:has(.cds--modal-footer) {
17800
+ background: linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)) calc(0% + 64px), var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) calc(0% + 64px), var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
17801
+ box-shadow: inset 0 -80px 0 -16px var(--cds-layer), inset 0 -160px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
17823
17802
  }
17824
17803
 
17825
17804
  .cds--modal--slug .cds--slug {
@@ -17828,13 +17807,22 @@ optgroup.cds--select-optgroup:disabled,
17828
17807
  inset-inline-end: 0;
17829
17808
  }
17830
17809
 
17810
+ .cds--modal--slug .cds--modal-content.cds--modal-scroll-content {
17811
+ mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 80px), transparent calc(100% - 48px), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 16px, transparent 16px), linear-gradient(to right, var(--cds-layer) 0, 2px, transparent 2px), linear-gradient(to top, var(--cds-layer) 0, 2px, transparent 2px);
17812
+ }
17813
+
17831
17814
  .cds--modal-header > .cds--slug:has(+ .cds--modal-close-button),
17832
17815
  .cds--modal-header > .cds--modal-close-button ~ .cds--slug,
17833
17816
  .cds--modal--slug .cds--modal-container-body > .cds--slug {
17834
17817
  inset-inline-end: 3rem;
17835
17818
  }
17836
17819
 
17837
- /* stylelint-disable */
17820
+ .cds--modal--slug .cds--modal-content--overflow-indicator::before,
17821
+ .cds--modal--slug .cds--modal-content--overflow-indicator {
17822
+ display: none;
17823
+ }
17824
+
17825
+ /* stylelint-disable no-duplicate-selectors */
17838
17826
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
17839
17827
  .cds--modal-close__icon {
17840
17828
  fill: ButtonText;
@@ -17848,7 +17836,7 @@ optgroup.cds--select-optgroup:disabled,
17848
17836
  }
17849
17837
  }
17850
17838
 
17851
- /* stylelint-enable */
17839
+ /* stylelint-enable no-duplicate-selectors */
17852
17840
  .cds--inline-notification {
17853
17841
  position: relative;
17854
17842
  display: flex;
@@ -19677,7 +19665,7 @@ span.cds--pagination__text.cds--pagination__items-count {
19677
19665
  position: absolute;
19678
19666
  animation-duration: 1400ms;
19679
19667
  animation-iteration-count: infinite;
19680
- animation-name: progress-bar-indeterminate;
19668
+ animation-name: cds--progress-bar-indeterminate;
19681
19669
  animation-timing-function: linear;
19682
19670
  background-image: linear-gradient(90deg, var(--cds-interactive, #0f62fe) 12.5%, transparent 12.5%);
19683
19671
  background-position-x: 0%;
@@ -19687,7 +19675,7 @@ span.cds--pagination__text.cds--pagination__items-count {
19687
19675
  }
19688
19676
 
19689
19677
  [dir=rtl] .cds--progress-bar--indeterminate .cds--progress-bar__track::after {
19690
- animation-name: progress-bar-indeterminate-rtl;
19678
+ animation-name: cds--progress-bar-indeterminate-rtl;
19691
19679
  }
19692
19680
 
19693
19681
  .cds--progress-bar__helper-text {
@@ -19740,7 +19728,7 @@ span.cds--pagination__text.cds--pagination__items-count {
19740
19728
  margin-inline-end: 0;
19741
19729
  }
19742
19730
 
19743
- @keyframes progress-bar-indeterminate {
19731
+ @keyframes cds--progress-bar-indeterminate {
19744
19732
  0% {
19745
19733
  background-position-x: 25%;
19746
19734
  }
@@ -19748,7 +19736,7 @@ span.cds--pagination__text.cds--pagination__items-count {
19748
19736
  background-position-x: -105%;
19749
19737
  }
19750
19738
  }
19751
- @keyframes progress-bar-indeterminate-rtl {
19739
+ @keyframes cds--progress-bar-indeterminate-rtl {
19752
19740
  0% {
19753
19741
  background-position-x: -105%;
19754
19742
  }
@@ -20052,7 +20040,7 @@ span.cds--pagination__text.cds--pagination__items-count {
20052
20040
  }
20053
20041
  .cds--progress.cds--skeleton .cds--progress-label::before {
20054
20042
  position: absolute;
20055
- animation: 3000ms ease-in-out skeleton infinite;
20043
+ animation: 3000ms ease-in-out cds--skeleton infinite;
20056
20044
  background: var(--cds-skeleton-element, #c6c6c6);
20057
20045
  block-size: 100%;
20058
20046
  content: "";
@@ -20121,6 +20109,14 @@ span.cds--pagination__text.cds--pagination__items-count {
20121
20109
  inset-inline-start: 0;
20122
20110
  }
20123
20111
 
20112
+ @keyframes ai-skeleton-animation {
20113
+ 0% {
20114
+ transform: translateX(-100%);
20115
+ }
20116
+ 100% {
20117
+ transform: translateX(100%);
20118
+ }
20119
+ }
20124
20120
  .cds--icon--skeleton {
20125
20121
  position: relative;
20126
20122
  padding: 0;
@@ -20139,7 +20135,7 @@ span.cds--pagination__text.cds--pagination__items-count {
20139
20135
  }
20140
20136
  .cds--icon--skeleton::before {
20141
20137
  position: absolute;
20142
- animation: 3000ms ease-in-out skeleton infinite;
20138
+ animation: 3000ms ease-in-out cds--skeleton infinite;
20143
20139
  background: var(--cds-skeleton-element, #c6c6c6);
20144
20140
  block-size: 100%;
20145
20141
  content: "";
@@ -20169,7 +20165,7 @@ span.cds--pagination__text.cds--pagination__items-count {
20169
20165
  }
20170
20166
  .cds--skeleton__placeholder::before {
20171
20167
  position: absolute;
20172
- animation: 3000ms ease-in-out skeleton infinite;
20168
+ animation: 3000ms ease-in-out cds--skeleton infinite;
20173
20169
  background: var(--cds-skeleton-element, #c6c6c6);
20174
20170
  block-size: 100%;
20175
20171
  content: "";
@@ -20200,7 +20196,7 @@ span.cds--pagination__text.cds--pagination__items-count {
20200
20196
  }
20201
20197
  .cds--skeleton__text::before {
20202
20198
  position: absolute;
20203
- animation: 3000ms ease-in-out skeleton infinite;
20199
+ animation: 3000ms ease-in-out cds--skeleton infinite;
20204
20200
  background: var(--cds-skeleton-element, #c6c6c6);
20205
20201
  block-size: 100%;
20206
20202
  content: "";
@@ -20217,6 +20213,37 @@ span.cds--pagination__text.cds--pagination__items-count {
20217
20213
  block-size: 1.5rem;
20218
20214
  }
20219
20215
 
20216
+ .cds--skeleton__text--ai,
20217
+ .cds--skeleton__placeholder--ai,
20218
+ .cds--skeleton__icon--ai {
20219
+ overflow: hidden;
20220
+ background: var(--cds-ai-skeleton-background, #b8d3ff);
20221
+ }
20222
+
20223
+ .cds--skeleton__text--ai::before,
20224
+ .cds--skeleton__placeholder--ai::before,
20225
+ .cds--skeleton__icon--ai::before {
20226
+ animation: 1250ms ease-in-out ai-skeleton-animation infinite;
20227
+ background: linear-gradient(to right, rgba(0, 17, 65, 0) 0%, rgba(0, 17, 65, 0.5) 50%, rgba(0, 17, 65, 0) 100%);
20228
+ }
20229
+
20230
+ .cds--skeleton__placeholder--ai::before,
20231
+ .cds--skeleton__icon--ai::before {
20232
+ inline-size: 200%;
20233
+ }
20234
+
20235
+ .cds--skeleton__placeholder--ai {
20236
+ border-radius: 0.5rem;
20237
+ }
20238
+
20239
+ .cds--skeleton__text--ai {
20240
+ border-radius: 1rem;
20241
+ }
20242
+
20243
+ .cds--skeleton__icon--ai {
20244
+ border-radius: 0.125rem;
20245
+ }
20246
+
20220
20247
  .cds--slider-container {
20221
20248
  position: relative;
20222
20249
  display: flex;
@@ -20588,7 +20615,7 @@ span.cds--pagination__text.cds--pagination__items-count {
20588
20615
  }
20589
20616
  .cds--slider-container.cds--skeleton .cds--slider__range-label::before {
20590
20617
  position: absolute;
20591
- animation: 3000ms ease-in-out skeleton infinite;
20618
+ animation: 3000ms ease-in-out cds--skeleton infinite;
20592
20619
  background: var(--cds-skeleton-element, #c6c6c6);
20593
20620
  block-size: 100%;
20594
20621
  content: "";
@@ -21002,7 +21029,7 @@ span.cds--pagination__text.cds--pagination__items-count {
21002
21029
  }
21003
21030
 
21004
21031
  .cds--slug.cds--slug--enabled .cds--slug-content {
21005
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
21032
+ background: linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
21006
21033
  border: 1px solid transparent;
21007
21034
  border-radius: 0.5rem;
21008
21035
  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), -40px 30px 100px -25px var(--cds-slug-callout-shadow-outer-01, rgba(0, 67, 206, 0.25)), -60px 80px 60px -45px var(--cds-slug-callout-shadow-outer-02, rgba(0, 0, 0, 0.1));
@@ -21474,7 +21501,7 @@ span.cds--pagination__text.cds--pagination__items-count {
21474
21501
  }
21475
21502
  .cds--structured-list.cds--skeleton span::before {
21476
21503
  position: absolute;
21477
- animation: 3000ms ease-in-out skeleton infinite;
21504
+ animation: 3000ms ease-in-out cds--skeleton infinite;
21478
21505
  background: var(--cds-skeleton-element, #c6c6c6);
21479
21506
  block-size: 100%;
21480
21507
  content: "";
@@ -21984,7 +22011,7 @@ span.cds--pagination__text.cds--pagination__items-count {
21984
22011
  }
21985
22012
  .cds--tabs.cds--skeleton .cds--tabs__nav-link span::before {
21986
22013
  position: absolute;
21987
- animation: 3000ms ease-in-out skeleton infinite;
22014
+ animation: 3000ms ease-in-out cds--skeleton infinite;
21988
22015
  background: var(--cds-skeleton-element, #c6c6c6);
21989
22016
  block-size: 100%;
21990
22017
  content: "";
@@ -22286,10 +22313,6 @@ span.cds--pagination__text.cds--pagination__items-count {
22286
22313
  }
22287
22314
  }
22288
22315
 
22289
- .cds--tile-content__above-the-fold {
22290
- display: block;
22291
- }
22292
-
22293
22316
  .cds--tile-content__below-the-fold {
22294
22317
  display: block;
22295
22318
  opacity: 0;
@@ -22397,13 +22420,13 @@ span.cds--pagination__text.cds--pagination__items-count {
22397
22420
  }
22398
22421
 
22399
22422
  .cds--tile--slug.cds--tile {
22400
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
22423
+ background: linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
22401
22424
  border: 1px solid transparent;
22402
22425
  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
22403
22426
  }
22404
22427
 
22405
22428
  .cds--tile--slug.cds--tile--expandable:hover {
22406
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
22429
+ background: linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
22407
22430
  }
22408
22431
 
22409
22432
  .cds--tile--slug.cds--tile--selectable::before,
@@ -22779,7 +22802,7 @@ span.cds--pagination__text.cds--pagination__items-count {
22779
22802
  }
22780
22803
  .cds--toggle--skeleton .cds--toggle__skeleton-circle::before {
22781
22804
  position: absolute;
22782
- animation: 3000ms ease-in-out skeleton infinite;
22805
+ animation: 3000ms ease-in-out cds--skeleton infinite;
22783
22806
  background: var(--cds-skeleton-element, #c6c6c6);
22784
22807
  block-size: 100%;
22785
22808
  content: "";
@@ -22810,7 +22833,7 @@ span.cds--pagination__text.cds--pagination__items-count {
22810
22833
  }
22811
22834
  .cds--toggle--skeleton .cds--toggle__skeleton-rectangle::before {
22812
22835
  position: absolute;
22813
- animation: 3000ms ease-in-out skeleton infinite;
22836
+ animation: 3000ms ease-in-out cds--skeleton infinite;
22814
22837
  background: var(--cds-skeleton-element, #c6c6c6);
22815
22838
  block-size: 100%;
22816
22839
  content: "";
@@ -26328,7 +26351,8 @@ a.cds--side-nav__link--current::before {
26328
26351
  padding-top: 0.5rem;
26329
26352
  }
26330
26353
  .c4p--side-panel.c4p--side-panel--has-slug .c4p--side-panel--scrolls {
26331
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
26354
+ background: linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
26355
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
26332
26356
  }
26333
26357
  .c4p--side-panel .c4p--side-panel__inner-content.c4p--side-panel--scrolls {
26334
26358
  padding-top: 1rem;
@@ -26455,6 +26479,11 @@ a.cds--side-nav__link--current::before {
26455
26479
  inset: 0;
26456
26480
  }
26457
26481
 
26482
+ .c4p--side-panel--has-slug + .c4p--side-panel__overlay {
26483
+ /* stylelint-disable-next-line carbon/theme-token-use */
26484
+ background-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5));
26485
+ }
26486
+
26458
26487
  .c4p--create-side-panel.c4p--side-panel .c4p--create-side-panel__content-text {
26459
26488
  padding-right: calc(20% - 1rem);
26460
26489
  }
@@ -26535,6 +26564,7 @@ a.cds--side-nav__link--current::before {
26535
26564
  }
26536
26565
  .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__container {
26537
26566
  border: 1px solid transparent;
26567
+ border-bottom: 0;
26538
26568
  /* override carbon ai removing background gradient */
26539
26569
  background: linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
26540
26570
  box-shadow: 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
@@ -26694,7 +26724,8 @@ a.cds--side-nav__link--current::before {
26694
26724
  flex-grow: 1;
26695
26725
  }
26696
26726
  .c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__main {
26697
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
26727
+ background: linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
26728
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2));
26698
26729
  }
26699
26730
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination,
26700
26731
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination__control-buttons,
@@ -27166,7 +27197,7 @@ a.cds--side-nav__link--current::before {
27166
27197
  }
27167
27198
 
27168
27199
  .c4p--card--has-slug {
27169
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
27200
+ background: linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
27170
27201
  border: 1px solid transparent;
27171
27202
  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
27172
27203
  }
@@ -27808,6 +27839,9 @@ button.c4p--add-select__global-filter-toggle--open {
27808
27839
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
27809
27840
  --cds-ai-gradient-start-02: transparent;
27810
27841
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
27842
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
27843
+ --cds-ai-skeleton-background: #0053ff;
27844
+ --cds-ai-skeleton-element-background: #001141;
27811
27845
  --cds-background: #161616;
27812
27846
  --cds-background-active: rgba(141, 141, 141, 0.4);
27813
27847
  --cds-background-brand: #0f62fe;
@@ -31535,6 +31569,9 @@ button.c4p--add-select__global-filter-toggle--open {
31535
31569
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
31536
31570
  --cds-ai-gradient-start-02: transparent;
31537
31571
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
31572
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
31573
+ --cds-ai-skeleton-background: #0053ff;
31574
+ --cds-ai-skeleton-element-background: #001141;
31538
31575
  --cds-background: #262626;
31539
31576
  --cds-background-active: rgba(141, 141, 141, 0.4);
31540
31577
  --cds-background-brand: #0f62fe;
@@ -32030,6 +32067,9 @@ button.c4p--add-select__global-filter-toggle--open {
32030
32067
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
32031
32068
  --cds-ai-gradient-start-02: transparent;
32032
32069
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
32070
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
32071
+ --cds-ai-skeleton-background: #0053ff;
32072
+ --cds-ai-skeleton-element-background: #001141;
32033
32073
  --cds-background: #161616;
32034
32074
  --cds-background-active: rgba(141, 141, 141, 0.4);
32035
32075
  --cds-background-brand: #0f62fe;
@@ -33457,16 +33497,41 @@ button.c4p--add-select__global-filter-toggle--open {
33457
33497
  }
33458
33498
 
33459
33499
  .c4p--datagrid th.c4p--datagrid__with-slug {
33460
- background-image: linear-gradient(180deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 100%, transparent 100%);
33461
- border-block-end-color: var(--cds-ai-border-strong, #4589ff);
33500
+ /* stylelint-disable-next-line carbon/theme-token-use */
33501
+ box-shadow: inset 0 1px var(--cds-ai-border-strong, #4589ff);
33462
33502
  }
33463
33503
 
33464
- .c4p--datagrid .cds--data-table tbody tr:has(> .c4p--datagrid__table-row-ai-enabled) {
33465
- background-image: linear-gradient(90deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
33466
- border-block-end-color: var(--cds-ai-border-strong, #4589ff);
33504
+ .c4p--datagrid th.c4p--datagrid__with-slug,
33505
+ .c4p--datagrid td.c4p--datagrid__slug--cell {
33506
+ background: linear-gradient(to right, var(--cds-ai-aura-start-table, rgba(69, 137, 255, 0.15)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
33507
+ }
33508
+
33509
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row,
33510
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row + .c4p--datagrid__expanded-row {
33511
+ background: linear-gradient(to right, var(--cds-ai-aura-start-table, rgba(69, 137, 255, 0.15)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
33467
33512
  background-attachment: fixed;
33468
33513
  }
33469
33514
 
33515
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row {
33516
+ /* stylelint-disable-next-line carbon/theme-token-use */
33517
+ box-shadow: inset 1px 0 var(--cds-ai-border-strong, #4589ff);
33518
+ }
33519
+
33520
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row:hover,
33521
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row.cds--data-table--selected:hover,
33522
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row.c4p--datagrid__carbon-row-expanded:hover + .c4p--datagrid__expanded-row,
33523
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__expandable-row--hover.c4p--datagrid__slug--row {
33524
+ background: linear-gradient(to right, var(--cds-ai-aura-hover-start, rgba(69, 137, 255, 0.4)) 0%, 15%, var(--cds-ai-aura-hover-end, rgba(255, 255, 255, 0)) 50%), var(--cds-ai-aura-hover-background, #edf5ff);
33525
+ }
33526
+
33527
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__expandable-row--hover.c4p--datagrid__slug--row td {
33528
+ background-color: transparent;
33529
+ }
33530
+
33531
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row.cds--data-table--selected {
33532
+ background: linear-gradient(to right, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), var(--cds-layer-selected);
33533
+ }
33534
+
33470
33535
  .c4p--datagrid th.c4p--datagrid__with-slug .cds--slug {
33471
33536
  margin-left: 0.5rem;
33472
33537
  }
@@ -34006,6 +34071,9 @@ button.c4p--add-select__global-filter-toggle--open {
34006
34071
  display: flex;
34007
34072
  align-items: center;
34008
34073
  }
34074
+ .c4p--datagrid .c4p--datagrid__table-row-ai-enabled.c4p--datagrid__slug--expanded {
34075
+ border: none;
34076
+ }
34009
34077
 
34010
34078
  .c4p--datagrid .c4p--datagrid__table-row-ai-spacer,
34011
34079
  .c4p--datagrid .c4p--datagrid__table-row-ai-enabled {
@@ -36702,7 +36770,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
36702
36770
  white-space: nowrap;
36703
36771
  }
36704
36772
 
36705
- @keyframes hide-feedback {
36773
+ @keyframes cds--hide-feedback {
36706
36774
  0% {
36707
36775
  opacity: 1;
36708
36776
  visibility: inherit;
@@ -36712,7 +36780,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
36712
36780
  visibility: hidden;
36713
36781
  }
36714
36782
  }
36715
- @keyframes show-feedback {
36783
+ @keyframes cds--show-feedback {
36716
36784
  0% {
36717
36785
  opacity: 0;
36718
36786
  visibility: hidden;
@@ -36722,7 +36790,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
36722
36790
  visibility: inherit;
36723
36791
  }
36724
36792
  }
36725
- @keyframes skeleton {
36793
+ @keyframes cds--skeleton {
36726
36794
  0% {
36727
36795
  opacity: 0.3;
36728
36796
  transform: scaleX(0);
@@ -37611,6 +37679,7 @@ a.cds--side-nav__link--current::before {
37611
37679
 
37612
37680
  .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__container {
37613
37681
  border: 1px solid transparent;
37682
+ border-bottom: 0;
37614
37683
  /* override carbon ai removing background gradient */
37615
37684
  background: linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
37616
37685
  box-shadow: 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
@@ -37807,7 +37876,8 @@ a.cds--side-nav__link--current::before {
37807
37876
  }
37808
37877
 
37809
37878
  .c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__main {
37810
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
37879
+ background: linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
37880
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2));
37811
37881
  }
37812
37882
 
37813
37883
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination,
@@ -38377,6 +38447,9 @@ a.cds--side-nav__link--current::before {
38377
38447
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
38378
38448
  --cds-ai-gradient-start-02: transparent;
38379
38449
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
38450
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
38451
+ --cds-ai-skeleton-background: #0053ff;
38452
+ --cds-ai-skeleton-element-background: #001141;
38380
38453
  --cds-background: #161616;
38381
38454
  --cds-background-active: rgba(141, 141, 141, 0.4);
38382
38455
  --cds-background-brand: #0f62fe;
@@ -39246,6 +39319,9 @@ a.cds--side-nav__link--current::before {
39246
39319
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
39247
39320
  --cds-ai-gradient-start-02: transparent;
39248
39321
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
39322
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
39323
+ --cds-ai-skeleton-background: #0053ff;
39324
+ --cds-ai-skeleton-element-background: #001141;
39249
39325
  --cds-background: #161616;
39250
39326
  --cds-background-active: rgba(141, 141, 141, 0.4);
39251
39327
  --cds-background-brand: #0f62fe;
@@ -40448,4 +40524,41 @@ a.cds--side-nav__link--current::before {
40448
40524
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
40449
40525
  }
40450
40526
 
40527
+ .c4p--user-avatar__photo {
40528
+ border-radius: 100%;
40529
+ object-fit: contain;
40530
+ }
40531
+
40532
+ .c4p--user-avatar__photo--xl {
40533
+ position: fixed;
40534
+ border-radius: 100%;
40535
+ object-fit: fill;
40536
+ width: 4rem;
40537
+ height: 4rem;
40538
+ }
40539
+
40540
+ .c4p--user-avatar__photo--lg {
40541
+ position: fixed;
40542
+ border-radius: 100%;
40543
+ object-fit: fill;
40544
+ width: 3rem;
40545
+ height: 3rem;
40546
+ }
40547
+
40548
+ .c4p--user-avatar__photo--md {
40549
+ position: fixed;
40550
+ border-radius: 100%;
40551
+ object-fit: fill;
40552
+ width: 2rem;
40553
+ height: 2rem;
40554
+ }
40555
+
40556
+ .c4p--user-avatar__photo--sm {
40557
+ position: fixed;
40558
+ border-radius: 100%;
40559
+ object-fit: fill;
40560
+ width: 1.5rem;
40561
+ height: 1.5rem;
40562
+ }
40563
+
40451
40564
  /*# sourceMappingURL=index-full-carbon.css.map */