@carbon/ibm-products 2.26.0 → 2.28.0-alpha.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (391) hide show
  1. package/css/index-full-carbon.css +700 -163
  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 +85 -22
  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 +700 -163
  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 +660 -152
  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.d.ts +11 -0
  30. package/es/components/BigNumbers/BigNumbers.js +238 -0
  31. package/es/components/BigNumbers/constants.d.ts +13 -0
  32. package/es/components/BigNumbers/constants.js +67 -0
  33. package/es/components/BigNumbers/index.d.ts +1 -0
  34. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +1 -1
  35. package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +1 -1
  36. package/es/components/Card/Card.js +1 -1
  37. package/es/components/Card/CardFooter.js +1 -1
  38. package/es/components/Card/CardHeader.js +1 -1
  39. package/es/components/Carousel/Carousel.js +1 -1
  40. package/es/components/Carousel/CarouselItem.js +1 -1
  41. package/es/components/Cascade/Cascade.js +1 -1
  42. package/es/components/Checklist/Checklist.js +1 -1
  43. package/es/components/Checklist/ChecklistChart.js +1 -1
  44. package/es/components/Checklist/ChecklistIcon.js +1 -1
  45. package/es/components/Coachmark/Coachmark.js +1 -1
  46. package/es/components/Coachmark/CoachmarkDragbar.js +1 -1
  47. package/es/components/Coachmark/CoachmarkHeader.js +1 -1
  48. package/es/components/Coachmark/CoachmarkOverlay.js +1 -1
  49. package/es/components/Coachmark/CoachmarkTagline.js +1 -1
  50. package/es/components/CoachmarkBeacon/CoachmarkBeacon.js +1 -1
  51. package/es/components/CoachmarkButton/CoachmarkButton.js +1 -1
  52. package/es/components/CoachmarkFixed/CoachmarkFixed.js +1 -1
  53. package/es/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js +1 -1
  54. package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +1 -1
  55. package/es/components/CoachmarkStack/CoachmarkStack.js +1 -1
  56. package/es/components/CoachmarkStack/CoachmarkStackHome.js +1 -1
  57. package/es/components/ComboButton/ComboButton.js +1 -1
  58. package/es/components/CreateFullPage/CreateFullPage.js +1 -1
  59. package/es/components/CreateFullPage/CreateFullPageStep.js +1 -1
  60. package/es/components/CreateInfluencer/CreateInfluencer.js +1 -1
  61. package/es/components/CreateModal/CreateModal.js +1 -1
  62. package/es/components/CreateSidePanel/CreateSidePanel.js +1 -1
  63. package/es/components/CreateTearsheet/CreateTearsheet.js +8 -2
  64. package/es/components/CreateTearsheet/CreateTearsheetDivider.js +1 -1
  65. package/es/components/CreateTearsheet/CreateTearsheetStep.js +1 -1
  66. package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +1 -1
  67. package/es/components/DataSpreadsheet/DataSpreadsheet.js +1 -1
  68. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +5 -4
  69. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +4 -3
  70. package/es/components/DataSpreadsheet/utils/checkForHoldingKey.d.ts +1 -0
  71. package/es/components/DataSpreadsheet/utils/checkForHoldingKey.js +17 -0
  72. package/es/components/Datagrid/Datagrid/Datagrid.js +10 -3
  73. package/es/components/Datagrid/Datagrid/DatagridContent.d.ts +3 -1
  74. package/es/components/Datagrid/Datagrid/DatagridContent.js +7 -3
  75. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +8 -4
  76. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +9 -5
  77. package/es/components/Datagrid/Datagrid/DatagridRefBody.js +1 -1
  78. package/es/components/Datagrid/Datagrid/DatagridRow.js +19 -15
  79. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +1 -1
  80. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +1 -1
  81. package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js +1 -1
  82. package/es/components/Datagrid/Datagrid/DatagridToolbar.d.ts +10 -1
  83. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +22 -5
  84. package/es/components/Datagrid/Datagrid/DraggableElement.js +1 -1
  85. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +1 -1
  86. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +1 -1
  87. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +1 -1
  88. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +39 -16
  89. package/es/components/Datagrid/Datagrid/addons/Filtering/constants.d.ts +4 -1
  90. package/es/components/Datagrid/Datagrid/addons/Filtering/constants.js +5 -1
  91. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +102 -6
  92. package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +12 -1
  93. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +1 -1
  94. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +1 -1
  95. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +1 -1
  96. package/es/components/Datagrid/Datagrid/addons/stateReducer.js +1 -1
  97. package/es/components/Datagrid/useActionsColumn.js +1 -1
  98. package/es/components/Datagrid/useColumnCenterAlign.js +1 -1
  99. package/es/components/Datagrid/useColumnRightAlign.js +1 -1
  100. package/es/components/Datagrid/useDefaultStringRenderer.js +1 -1
  101. package/es/components/Datagrid/useFiltering.js +48 -47
  102. package/es/components/Datagrid/useFloatingScroll.js +1 -1
  103. package/es/components/Datagrid/useInlineEdit.js +1 -1
  104. package/es/components/Datagrid/useNestedRowExpander.js +1 -1
  105. package/es/components/Datagrid/useNestedRows.js +1 -1
  106. package/es/components/Datagrid/useRowExpander.js +1 -1
  107. package/es/components/Datagrid/useSelectAllToggle.js +6 -4
  108. package/es/components/Datagrid/useSelectRows.js +2 -2
  109. package/es/components/Datagrid/useSortableColumns.js +1 -1
  110. package/es/components/Datagrid/useStickyColumn.js +1 -1
  111. package/es/components/DelimitedList/DelimitedList.js +1 -1
  112. package/es/components/EditFullPage/EditFullPage.js +1 -1
  113. package/es/components/EditInPlace/EditInPlace.js +1 -1
  114. package/es/components/EditSidePanel/EditSidePanel.js +1 -1
  115. package/es/components/EditTearsheet/EditTearsheet.js +1 -1
  116. package/es/components/EditTearsheet/EditTearsheetForm.js +1 -1
  117. package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.js +1 -1
  118. package/es/components/EditUpdateCards/EditUpdateCards.js +1 -1
  119. package/es/components/EmptyStates/EmptyState.js +1 -1
  120. package/es/components/EmptyStates/EmptyStateContent.js +1 -1
  121. package/es/components/EmptyStates/EmptyStateV2.js +1 -1
  122. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -1
  123. package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -1
  124. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +1 -1
  125. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -1
  126. package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +1 -1
  127. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +1 -1
  128. package/es/components/EmptyStates/assets/ErrorIllustration.js +1 -1
  129. package/es/components/EmptyStates/assets/NoDataIllustration.js +1 -1
  130. package/es/components/EmptyStates/assets/NoTagsIllustration.js +1 -1
  131. package/es/components/EmptyStates/assets/NotFoundIllustration.js +1 -1
  132. package/es/components/EmptyStates/assets/NotificationsIllustration.js +1 -1
  133. package/es/components/EmptyStates/assets/UnauthorizedIllustration.js +1 -1
  134. package/es/components/ExportModal/ExportModal.js +1 -1
  135. package/es/components/FilterSummary/FilterSummary.js +1 -1
  136. package/es/components/FullPageError/FullPageError.js +1 -1
  137. package/es/components/Guidebanner/Guidebanner.js +1 -1
  138. package/es/components/Guidebanner/GuidebannerElement.js +1 -1
  139. package/es/components/Guidebanner/GuidebannerElementButton.js +1 -1
  140. package/es/components/Guidebanner/GuidebannerElementLink.js +1 -1
  141. package/es/components/HTTPErrors/HTTPError403/HTTPError403.js +1 -1
  142. package/es/components/HTTPErrors/HTTPError404/HTTPError404.js +1 -1
  143. package/es/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +1 -1
  144. package/es/components/ImportModal/ImportModal.js +1 -1
  145. package/es/components/InlineTip/InlineTip.js +1 -1
  146. package/es/components/InlineTip/InlineTipButton.js +1 -1
  147. package/es/components/InlineTip/InlineTipLink.js +1 -1
  148. package/es/components/InterstitialScreen/InterstitialScreen.js +1 -1
  149. package/es/components/InterstitialScreenView/InterstitialScreenView.js +1 -1
  150. package/es/components/InterstitialScreenViewModule/InterstitialScreenViewModule.js +1 -1
  151. package/es/components/NonLinearReading/NonLinearReading.js +1 -1
  152. package/es/components/NotificationsPanel/NotificationsPanel.js +1 -1
  153. package/es/components/OptionsTile/OptionsTile.js +1 -1
  154. package/es/components/PageHeader/PageHeader.js +1 -1
  155. package/es/components/PageHeader/PageHeaderTitle.js +1 -1
  156. package/es/components/PageHeader/PageHeaderUtils.js +1 -1
  157. package/es/components/RemoveModal/RemoveModal.js +1 -1
  158. package/es/components/Saving/Saving.js +1 -1
  159. package/es/components/SearchBar/SearchBar.js +1 -1
  160. package/es/components/SidePanel/SidePanel.js +14 -7
  161. package/es/components/SidePanel/motion/variants.d.ts +39 -12
  162. package/es/components/SidePanel/motion/variants.js +42 -11
  163. package/es/components/SimpleHeader/SimpleHeader.js +1 -1
  164. package/es/components/StatusIcon/StatusIcon.js +1 -1
  165. package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +1 -1
  166. package/es/components/StringFormatter/StringFormatter.d.ts +6 -0
  167. package/es/components/StringFormatter/StringFormatter.js +79 -0
  168. package/es/components/StringFormatter/index.d.ts +1 -0
  169. package/es/components/StringFormatter/utils/enums.d.ts +14 -0
  170. package/es/components/StringFormatter/utils/enums.js +23 -0
  171. package/es/components/TagSet/TagSet.js +1 -1
  172. package/es/components/TagSet/TagSetModal.js +1 -1
  173. package/es/components/TagSet/TagSetOverflow.js +1 -1
  174. package/es/components/Tearsheet/TearsheetShell.js +13 -8
  175. package/es/components/Toolbar/Toolbar.js +1 -1
  176. package/es/components/Toolbar/ToolbarButton.js +1 -1
  177. package/es/components/Toolbar/ToolbarGroup.js +1 -1
  178. package/es/components/TooltipTrigger/TooltipTrigger.js +1 -1
  179. package/es/components/TruncatedList/TruncatedList.js +1 -1
  180. package/es/components/UserAvatar/UserAvatar.js +59 -43
  181. package/es/components/UserProfileImage/UserProfileImage.js +1 -1
  182. package/es/components/WebTerminal/WebTerminal.js +1 -1
  183. package/es/components/WebTerminal/WebTerminalContentWrapper.js +1 -1
  184. package/es/components/_Canary/Canary.js +1 -1
  185. package/es/components/index.d.ts +2 -0
  186. package/es/global/js/hooks/index.d.ts +1 -0
  187. package/es/global/js/hooks/useIsomorphicEffect.d.ts +2 -0
  188. package/es/global/js/hooks/useIsomorphicEffect.js +14 -0
  189. package/es/global/js/package-settings.d.ts +2 -0
  190. package/es/global/js/package-settings.js +2 -0
  191. package/es/index.js +2 -0
  192. package/es/node_modules/prop-types/index.js +1 -1
  193. package/es/settings.d.ts +2 -0
  194. package/lib/_virtual/index.js +2 -2
  195. package/lib/components/APIKeyModal/APIKeyModal.js +50 -49
  196. package/lib/components/AboutModal/AboutModal.js +17 -16
  197. package/lib/components/ActionBar/ActionBar.js +16 -15
  198. package/lib/components/ActionBar/ActionBarItem.js +8 -7
  199. package/lib/components/ActionBar/ActionBarOverflowItems.js +9 -8
  200. package/lib/components/ActionSet/ActionSet.js +4 -3
  201. package/lib/components/AddSelect/AddSelectBody.js +67 -66
  202. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +7 -6
  203. package/lib/components/AddSelect/AddSelectFilter.js +19 -18
  204. package/lib/components/AddSelect/AddSelectList.js +7 -6
  205. package/lib/components/AddSelect/AddSelectRow.js +33 -32
  206. package/lib/components/BigNumbers/BigNumbers.d.ts +11 -0
  207. package/lib/components/BigNumbers/BigNumbers.js +245 -0
  208. package/lib/components/BigNumbers/constants.d.ts +13 -0
  209. package/lib/components/BigNumbers/constants.js +76 -0
  210. package/lib/components/BigNumbers/index.d.ts +1 -0
  211. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +20 -19
  212. package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +3 -2
  213. package/lib/components/Card/Card.js +5 -4
  214. package/lib/components/Card/CardFooter.js +22 -21
  215. package/lib/components/Card/CardHeader.js +27 -26
  216. package/lib/components/Carousel/Carousel.js +13 -12
  217. package/lib/components/Carousel/CarouselItem.js +6 -5
  218. package/lib/components/Cascade/Cascade.js +9 -8
  219. package/lib/components/Checklist/Checklist.js +33 -32
  220. package/lib/components/Checklist/ChecklistChart.js +7 -6
  221. package/lib/components/Checklist/ChecklistIcon.js +7 -6
  222. package/lib/components/Coachmark/Coachmark.js +21 -20
  223. package/lib/components/Coachmark/CoachmarkDragbar.js +10 -9
  224. package/lib/components/Coachmark/CoachmarkHeader.js +8 -7
  225. package/lib/components/Coachmark/CoachmarkOverlay.js +10 -9
  226. package/lib/components/Coachmark/CoachmarkTagline.js +8 -7
  227. package/lib/components/CoachmarkBeacon/CoachmarkBeacon.js +7 -6
  228. package/lib/components/CoachmarkButton/CoachmarkButton.js +6 -5
  229. package/lib/components/CoachmarkFixed/CoachmarkFixed.js +11 -10
  230. package/lib/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js +8 -7
  231. package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +16 -15
  232. package/lib/components/CoachmarkStack/CoachmarkStack.js +20 -19
  233. package/lib/components/CoachmarkStack/CoachmarkStackHome.js +17 -16
  234. package/lib/components/ComboButton/ComboButton.js +7 -6
  235. package/lib/components/CreateFullPage/CreateFullPage.js +29 -28
  236. package/lib/components/CreateFullPage/CreateFullPageStep.js +18 -17
  237. package/lib/components/CreateInfluencer/CreateInfluencer.js +13 -12
  238. package/lib/components/CreateModal/CreateModal.js +16 -15
  239. package/lib/components/CreateSidePanel/CreateSidePanel.js +21 -20
  240. package/lib/components/CreateTearsheet/CreateTearsheet.js +27 -20
  241. package/lib/components/CreateTearsheet/CreateTearsheetDivider.js +5 -4
  242. package/lib/components/CreateTearsheet/CreateTearsheetStep.js +19 -18
  243. package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +21 -20
  244. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +22 -21
  245. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +60 -58
  246. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +42 -40
  247. package/lib/components/DataSpreadsheet/utils/checkForHoldingKey.d.ts +1 -0
  248. package/lib/components/DataSpreadsheet/utils/checkForHoldingKey.js +21 -0
  249. package/lib/components/Datagrid/Datagrid/Datagrid.js +15 -7
  250. package/lib/components/Datagrid/Datagrid/DatagridContent.d.ts +3 -1
  251. package/lib/components/Datagrid/Datagrid/DatagridContent.js +37 -32
  252. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +8 -3
  253. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +14 -9
  254. package/lib/components/Datagrid/Datagrid/DatagridRefBody.js +3 -2
  255. package/lib/components/Datagrid/Datagrid/DatagridRow.js +20 -15
  256. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +4 -3
  257. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +14 -13
  258. package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +3 -2
  259. package/lib/components/Datagrid/Datagrid/DatagridToolbar.d.ts +10 -1
  260. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +24 -6
  261. package/lib/components/Datagrid/Datagrid/DraggableElement.js +13 -12
  262. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +15 -14
  263. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +25 -24
  264. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +27 -26
  265. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +37 -14
  266. package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.d.ts +4 -1
  267. package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +6 -0
  268. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +98 -2
  269. package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +11 -0
  270. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +15 -14
  271. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +20 -19
  272. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +9 -8
  273. package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +1 -1
  274. package/lib/components/Datagrid/useActionsColumn.js +7 -6
  275. package/lib/components/Datagrid/useColumnCenterAlign.js +3 -2
  276. package/lib/components/Datagrid/useColumnRightAlign.js +3 -2
  277. package/lib/components/Datagrid/useDefaultStringRenderer.js +4 -3
  278. package/lib/components/Datagrid/useFiltering.js +46 -45
  279. package/lib/components/Datagrid/useFloatingScroll.js +6 -2
  280. package/lib/components/Datagrid/useInlineEdit.js +4 -3
  281. package/lib/components/Datagrid/useNestedRowExpander.js +4 -3
  282. package/lib/components/Datagrid/useNestedRows.js +6 -2
  283. package/lib/components/Datagrid/useRowExpander.js +3 -2
  284. package/lib/components/Datagrid/useSelectAllToggle.js +7 -4
  285. package/lib/components/Datagrid/useSelectRows.js +5 -4
  286. package/lib/components/Datagrid/useSortableColumns.js +3 -2
  287. package/lib/components/Datagrid/useStickyColumn.js +4 -3
  288. package/lib/components/DelimitedList/DelimitedList.js +8 -7
  289. package/lib/components/EditFullPage/EditFullPage.js +6 -5
  290. package/lib/components/EditInPlace/EditInPlace.js +23 -22
  291. package/lib/components/EditSidePanel/EditSidePanel.js +23 -22
  292. package/lib/components/EditTearsheet/EditTearsheet.js +18 -17
  293. package/lib/components/EditTearsheet/EditTearsheetForm.js +11 -10
  294. package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.js +6 -5
  295. package/lib/components/EditUpdateCards/EditUpdateCards.js +31 -30
  296. package/lib/components/EmptyStates/EmptyState.js +20 -19
  297. package/lib/components/EmptyStates/EmptyStateContent.js +16 -15
  298. package/lib/components/EmptyStates/EmptyStateV2.js +20 -19
  299. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +18 -17
  300. package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +18 -17
  301. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +18 -17
  302. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +18 -17
  303. package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +18 -17
  304. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +18 -17
  305. package/lib/components/EmptyStates/assets/ErrorIllustration.js +7 -6
  306. package/lib/components/EmptyStates/assets/NoDataIllustration.js +7 -6
  307. package/lib/components/EmptyStates/assets/NoTagsIllustration.js +7 -6
  308. package/lib/components/EmptyStates/assets/NotFoundIllustration.js +7 -6
  309. package/lib/components/EmptyStates/assets/NotificationsIllustration.js +7 -6
  310. package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js +7 -6
  311. package/lib/components/ExportModal/ExportModal.js +30 -29
  312. package/lib/components/FilterSummary/FilterSummary.js +13 -12
  313. package/lib/components/FullPageError/FullPageError.js +13 -12
  314. package/lib/components/Guidebanner/Guidebanner.js +20 -19
  315. package/lib/components/Guidebanner/GuidebannerElement.js +8 -7
  316. package/lib/components/Guidebanner/GuidebannerElementButton.js +8 -7
  317. package/lib/components/Guidebanner/GuidebannerElementLink.js +6 -5
  318. package/lib/components/HTTPErrors/HTTPError403/HTTPError403.js +11 -10
  319. package/lib/components/HTTPErrors/HTTPError404/HTTPError404.js +11 -10
  320. package/lib/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +11 -10
  321. package/lib/components/ImportModal/ImportModal.js +32 -31
  322. package/lib/components/InlineTip/InlineTip.js +21 -20
  323. package/lib/components/InlineTip/InlineTipButton.js +6 -5
  324. package/lib/components/InlineTip/InlineTipLink.js +6 -5
  325. package/lib/components/InterstitialScreen/InterstitialScreen.js +13 -12
  326. package/lib/components/InterstitialScreenView/InterstitialScreenView.js +7 -6
  327. package/lib/components/InterstitialScreenViewModule/InterstitialScreenViewModule.js +7 -6
  328. package/lib/components/NonLinearReading/NonLinearReading.js +9 -8
  329. package/lib/components/NotificationsPanel/NotificationsPanel.js +59 -58
  330. package/lib/components/OptionsTile/OptionsTile.js +21 -20
  331. package/lib/components/PageHeader/PageHeader.js +74 -73
  332. package/lib/components/PageHeader/PageHeaderTitle.js +21 -20
  333. package/lib/components/PageHeader/PageHeaderUtils.js +3 -2
  334. package/lib/components/RemoveModal/RemoveModal.js +22 -21
  335. package/lib/components/Saving/Saving.js +18 -17
  336. package/lib/components/SearchBar/SearchBar.js +20 -19
  337. package/lib/components/SidePanel/SidePanel.js +58 -50
  338. package/lib/components/SidePanel/motion/variants.d.ts +39 -12
  339. package/lib/components/SidePanel/motion/variants.js +42 -10
  340. package/lib/components/SimpleHeader/SimpleHeader.js +17 -16
  341. package/lib/components/StatusIcon/StatusIcon.js +9 -8
  342. package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +7 -6
  343. package/lib/components/StringFormatter/StringFormatter.d.ts +6 -0
  344. package/lib/components/StringFormatter/StringFormatter.js +86 -0
  345. package/lib/components/StringFormatter/index.d.ts +1 -0
  346. package/lib/components/StringFormatter/utils/enums.d.ts +14 -0
  347. package/lib/components/StringFormatter/utils/enums.js +27 -0
  348. package/lib/components/TagSet/TagSet.js +21 -20
  349. package/lib/components/TagSet/TagSetModal.js +13 -12
  350. package/lib/components/TagSet/TagSetOverflow.js +18 -17
  351. package/lib/components/Tearsheet/TearsheetShell.js +42 -36
  352. package/lib/components/Toolbar/Toolbar.js +7 -6
  353. package/lib/components/Toolbar/ToolbarButton.js +9 -8
  354. package/lib/components/Toolbar/ToolbarGroup.js +6 -5
  355. package/lib/components/TooltipTrigger/TooltipTrigger.js +6 -5
  356. package/lib/components/TruncatedList/TruncatedList.js +14 -13
  357. package/lib/components/UserAvatar/UserAvatar.js +61 -44
  358. package/lib/components/UserProfileImage/UserProfileImage.js +3 -2
  359. package/lib/components/WebTerminal/WebTerminal.js +14 -13
  360. package/lib/components/WebTerminal/WebTerminalContentWrapper.js +5 -4
  361. package/lib/components/_Canary/Canary.js +6 -5
  362. package/lib/components/index.d.ts +2 -0
  363. package/lib/global/js/hooks/index.d.ts +1 -0
  364. package/lib/global/js/hooks/useIsomorphicEffect.d.ts +2 -0
  365. package/lib/global/js/hooks/useIsomorphicEffect.js +18 -0
  366. package/lib/global/js/package-settings.d.ts +2 -0
  367. package/lib/global/js/package-settings.js +2 -0
  368. package/lib/index.js +10 -0
  369. package/lib/node_modules/prop-types/index.js +1 -1
  370. package/lib/settings.d.ts +2 -0
  371. package/package.json +8 -7
  372. package/scss/components/BigNumbers/_big-numbers.scss +151 -0
  373. package/scss/components/BigNumbers/_carbon-imports.scss +11 -0
  374. package/scss/components/BigNumbers/_index-with-carbon.scss +9 -0
  375. package/scss/components/BigNumbers/_index.scss +8 -0
  376. package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +0 -1
  377. package/scss/components/Datagrid/styles/_datagrid.scss +61 -4
  378. package/scss/components/FullPageError/_full-page-error.scss +2 -2
  379. package/scss/components/SidePanel/_side-panel.scss +9 -2
  380. package/scss/components/StringFormatter/_carbon-imports.scss +10 -0
  381. package/scss/components/StringFormatter/_index-with-carbon.scss +9 -0
  382. package/scss/components/StringFormatter/_index.scss +8 -0
  383. package/scss/components/StringFormatter/_string-formatter.scss +97 -0
  384. package/scss/components/Tearsheet/_tearsheet.scss +38 -7
  385. package/scss/components/UserAvatar/_user-avatar.scss +40 -0
  386. package/scss/components/_index-with-carbon.scss +2 -0
  387. package/scss/components/_index.scss +2 -0
  388. package/es/_virtual/index2.js +0 -10
  389. package/es/node_modules/classnames/index.js +0 -70
  390. package/lib/_virtual/index2.js +0 -14
  391. package/lib/node_modules/classnames/index.js +0 -74
package/css/index.css CHANGED
@@ -218,7 +218,7 @@
218
218
  --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
219
219
  }
220
220
 
221
- @keyframes hide-feedback {
221
+ @keyframes cds--hide-feedback {
222
222
  0% {
223
223
  opacity: 1;
224
224
  visibility: inherit;
@@ -228,7 +228,7 @@
228
228
  visibility: hidden;
229
229
  }
230
230
  }
231
- @keyframes show-feedback {
231
+ @keyframes cds--show-feedback {
232
232
  0% {
233
233
  opacity: 0;
234
234
  visibility: hidden;
@@ -238,7 +238,7 @@
238
238
  visibility: inherit;
239
239
  }
240
240
  }
241
- @keyframes skeleton {
241
+ @keyframes cds--skeleton {
242
242
  0% {
243
243
  opacity: 0.3;
244
244
  transform: scaleX(0);
@@ -1137,7 +1137,7 @@
1137
1137
  }
1138
1138
  .cds--btn.cds--skeleton::before {
1139
1139
  position: absolute;
1140
- animation: 3000ms ease-in-out skeleton infinite;
1140
+ animation: 3000ms ease-in-out cds--skeleton infinite;
1141
1141
  background: var(--cds-skeleton-element, #c6c6c6);
1142
1142
  block-size: 100%;
1143
1143
  content: "";
@@ -1321,10 +1321,10 @@
1321
1321
  border: none;
1322
1322
  }
1323
1323
  .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 {
1324
- animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) hide-feedback;
1324
+ animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--hide-feedback;
1325
1325
  }
1326
1326
  .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 {
1327
- animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) show-feedback;
1327
+ animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--show-feedback;
1328
1328
  }
1329
1329
 
1330
1330
  .cds--copy-btn svg {
@@ -1477,12 +1477,12 @@
1477
1477
 
1478
1478
  .cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-out::before,
1479
1479
  .cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-out .cds--copy-btn__feedback {
1480
- animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) hide-feedback;
1480
+ animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--hide-feedback;
1481
1481
  }
1482
1482
 
1483
1483
  .cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-in::before,
1484
1484
  .cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-in .cds--copy-btn__feedback {
1485
- animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) show-feedback;
1485
+ animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--show-feedback;
1486
1486
  }
1487
1487
 
1488
1488
  .cds--snippet--inline code {
@@ -1911,7 +1911,7 @@
1911
1911
  }
1912
1912
  .cds--snippet.cds--skeleton span::before {
1913
1913
  position: absolute;
1914
- animation: 3000ms ease-in-out skeleton infinite;
1914
+ animation: 3000ms ease-in-out cds--skeleton infinite;
1915
1915
  background: var(--cds-skeleton-element, #c6c6c6);
1916
1916
  block-size: 100%;
1917
1917
  content: "";
@@ -2259,52 +2259,13 @@
2259
2259
 
2260
2260
  .cds--modal-scroll-content {
2261
2261
  border-block-end: 2px solid transparent;
2262
+ 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);
2262
2263
  }
2263
2264
 
2264
2265
  .cds--modal-scroll-content > *:last-child {
2265
2266
  padding-block-end: 1.5rem;
2266
2267
  }
2267
2268
 
2268
- .cds--modal-content--overflow-indicator {
2269
- position: absolute;
2270
- background: var(--cds-layer);
2271
- block-size: 3rem;
2272
- grid-column: 1/-1;
2273
- grid-row: 2/-2;
2274
- inline-size: calc(100% - 1rem);
2275
- inset-block-end: 0;
2276
- inset-inline-start: 0;
2277
- pointer-events: none;
2278
- }
2279
- .cds--modal-content--overflow-indicator::before {
2280
- position: absolute;
2281
- background-image: linear-gradient(to bottom, transparent, var(--cds-layer));
2282
- block-size: 2rem;
2283
- content: "";
2284
- inline-size: 100%;
2285
- inset-block-start: -32px;
2286
- pointer-events: none;
2287
- }
2288
-
2289
- @media not all and (min-resolution >= 0.001dpcm) {
2290
- @supports (-webkit-appearance: none) and (stroke-color: transparent) {
2291
- .cds--modal-content--overflow-indicator {
2292
- background-image: linear-gradient(to bottom, rgba(var(--cds-layer), 0), var(--cds-layer));
2293
- }
2294
- }
2295
- }
2296
- .cds--modal-content:focus ~ .cds--modal-content--overflow-indicator {
2297
- margin: 0 2px 2px;
2298
- }
2299
-
2300
- @media screen and (-ms-high-contrast: active) {
2301
- .cds--modal-scroll-content > *:last-child {
2302
- padding-block-end: 0;
2303
- }
2304
- .cds--modal-content--overflow-indicator {
2305
- display: none;
2306
- }
2307
- }
2308
2269
  .cds--modal-footer {
2309
2270
  display: flex;
2310
2271
  justify-content: flex-end;
@@ -2376,14 +2337,20 @@
2376
2337
  margin: 0;
2377
2338
  }
2378
2339
 
2340
+ .cds--modal--slug.cds--modal {
2341
+ background-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5));
2342
+ }
2343
+
2379
2344
  .cds--modal--slug .cds--modal-container {
2380
- 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, #ffffff), 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, #ffffff), var(--cds-background, #ffffff)) border-box;
2345
+ 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;
2346
+ border: 1px solid transparent;
2381
2347
  background-color: var(--cds-layer);
2348
+ 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));
2382
2349
  }
2383
2350
 
2384
- .cds--modal--slug .cds--modal-container:has(.cds--btn-set:not(.cds--modal-footer--three-button) > button:not(:only-child)) {
2385
- 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, #ffffff), 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, #ffffff), var(--cds-background, #ffffff)) border-box;
2386
- background-color: var(--cds-layer);
2351
+ .cds--modal--slug .cds--modal-container:has(.cds--modal-footer) {
2352
+ 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;
2353
+ 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));
2387
2354
  }
2388
2355
 
2389
2356
  .cds--modal--slug .cds--slug {
@@ -2392,13 +2359,22 @@
2392
2359
  inset-inline-end: 0;
2393
2360
  }
2394
2361
 
2362
+ .cds--modal--slug .cds--modal-content.cds--modal-scroll-content {
2363
+ 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);
2364
+ }
2365
+
2395
2366
  .cds--modal-header > .cds--slug:has(+ .cds--modal-close-button),
2396
2367
  .cds--modal-header > .cds--modal-close-button ~ .cds--slug,
2397
2368
  .cds--modal--slug .cds--modal-container-body > .cds--slug {
2398
2369
  inset-inline-end: 3rem;
2399
2370
  }
2400
2371
 
2401
- /* stylelint-disable */
2372
+ .cds--modal--slug .cds--modal-content--overflow-indicator::before,
2373
+ .cds--modal--slug .cds--modal-content--overflow-indicator {
2374
+ display: none;
2375
+ }
2376
+
2377
+ /* stylelint-disable no-duplicate-selectors */
2402
2378
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
2403
2379
  .cds--modal-close__icon {
2404
2380
  fill: ButtonText;
@@ -2412,7 +2388,7 @@
2412
2388
  }
2413
2389
  }
2414
2390
 
2415
- /* stylelint-enable */
2391
+ /* stylelint-enable no-duplicate-selectors */
2416
2392
  input:-webkit-autofill,
2417
2393
  input:-webkit-autofill:hover,
2418
2394
  input:-webkit-autofill:focus,
@@ -2562,7 +2538,7 @@ textarea:-webkit-autofill:focus {
2562
2538
  }
2563
2539
  .cds--label.cds--skeleton::before {
2564
2540
  position: absolute;
2565
- animation: 3000ms ease-in-out skeleton infinite;
2541
+ animation: 3000ms ease-in-out cds--skeleton infinite;
2566
2542
  background: var(--cds-skeleton-element, #c6c6c6);
2567
2543
  block-size: 100%;
2568
2544
  content: "";
@@ -2922,7 +2898,7 @@ fieldset[disabled] .cds--form__helper-text {
2922
2898
  .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 {
2923
2899
  opacity: 1;
2924
2900
  }
2925
- @keyframes tooltip-fade {
2901
+ @keyframes cds--tooltip-fade {
2926
2902
  from {
2927
2903
  opacity: 0;
2928
2904
  }
@@ -2942,7 +2918,7 @@ fieldset[disabled] .cds--form__helper-text {
2942
2918
  .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,
2943
2919
  .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,
2944
2920
  .cds--text-input--password__visibility:focus + .cds--assistive-text, .cds--text-input--password__visibility:focus.cds--tooltip--a11y::before {
2945
- animation: tooltip-fade 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
2921
+ animation: cds--tooltip-fade 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
2946
2922
  }
2947
2923
  .cds--text-input--password__visibility.cds--tooltip--hidden .cds--assistive-text, .cds--text-input--password__visibility.cds--tooltip--hidden + .cds--assistive-text {
2948
2924
  overflow: hidden;
@@ -3119,7 +3095,7 @@ fieldset[disabled] .cds--form__helper-text {
3119
3095
  }
3120
3096
  .cds--skeleton.cds--text-input::before {
3121
3097
  position: absolute;
3122
- animation: 3000ms ease-in-out skeleton infinite;
3098
+ animation: 3000ms ease-in-out cds--skeleton infinite;
3123
3099
  background: var(--cds-skeleton-element, #c6c6c6);
3124
3100
  block-size: 100%;
3125
3101
  content: "";
@@ -3317,7 +3293,7 @@ fieldset[disabled] .cds--form__helper-text {
3317
3293
  align-self: end;
3318
3294
  }
3319
3295
 
3320
- @keyframes stroke {
3296
+ @keyframes prefix--stroke {
3321
3297
  100% {
3322
3298
  stroke-dashoffset: 0;
3323
3299
  }
@@ -3333,7 +3309,7 @@ fieldset[disabled] .cds--form__helper-text {
3333
3309
  animation-duration: 690ms;
3334
3310
  animation-fill-mode: forwards;
3335
3311
  animation-iteration-count: infinite;
3336
- animation-name: rotate;
3312
+ animation-name: cds--rotate;
3337
3313
  animation-timing-function: linear;
3338
3314
  block-size: 5.5rem;
3339
3315
  inline-size: 5.5rem;
@@ -3345,7 +3321,7 @@ fieldset[disabled] .cds--form__helper-text {
3345
3321
  }
3346
3322
  .cds--loading svg circle {
3347
3323
  animation-duration: 10ms;
3348
- animation-name: init-stroke;
3324
+ animation-name: cds--init-stroke;
3349
3325
  animation-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
3350
3326
  }
3351
3327
  @media screen and (prefers-reduced-motion: reduce) {
@@ -3374,13 +3350,13 @@ fieldset[disabled] .cds--form__helper-text {
3374
3350
  }
3375
3351
 
3376
3352
  .cds--loading--stop {
3377
- 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;
3353
+ 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;
3378
3354
  }
3379
3355
  .cds--loading--stop svg circle {
3380
3356
  animation-delay: 700ms;
3381
3357
  animation-duration: 700ms;
3382
3358
  animation-fill-mode: forwards;
3383
- animation-name: stroke-end;
3359
+ animation-name: cds--stroke-end;
3384
3360
  animation-timing-function: cubic-bezier(0, 0, 0.25, 1);
3385
3361
  }
3386
3362
  @media screen and (prefers-reduced-motion: reduce) {
@@ -3433,7 +3409,7 @@ fieldset[disabled] .cds--form__helper-text {
3433
3409
  display: none;
3434
3410
  }
3435
3411
 
3436
- @keyframes rotate {
3412
+ @keyframes cds--rotate {
3437
3413
  0% {
3438
3414
  transform: rotate(0deg);
3439
3415
  }
@@ -3441,18 +3417,18 @@ fieldset[disabled] .cds--form__helper-text {
3441
3417
  transform: rotate(360deg);
3442
3418
  }
3443
3419
  }
3444
- @keyframes rotate-end-p1 {
3420
+ @keyframes cds--rotate-end-p1 {
3445
3421
  100% {
3446
3422
  transform: rotate(360deg);
3447
3423
  }
3448
3424
  }
3449
- @keyframes rotate-end-p2 {
3425
+ @keyframes cds--rotate-end-p2 {
3450
3426
  100% {
3451
3427
  transform: rotate(-360deg);
3452
3428
  }
3453
3429
  }
3454
3430
  /* Stroke animations */
3455
- @keyframes init-stroke {
3431
+ @keyframes cds--init-stroke {
3456
3432
  0% {
3457
3433
  stroke-dashoffset: 276.4608;
3458
3434
  }
@@ -3460,7 +3436,7 @@ fieldset[disabled] .cds--form__helper-text {
3460
3436
  stroke-dashoffset: 52.527552;
3461
3437
  }
3462
3438
  }
3463
- @keyframes stroke-end {
3439
+ @keyframes cds--stroke-end {
3464
3440
  0% {
3465
3441
  stroke-dashoffset: 52.527552;
3466
3442
  }
@@ -3506,7 +3482,7 @@ fieldset[disabled] .cds--form__helper-text {
3506
3482
  .cds--inline-loading__checkmark {
3507
3483
  animation-duration: 250ms;
3508
3484
  animation-fill-mode: forwards;
3509
- animation-name: stroke;
3485
+ animation-name: cds--stroke;
3510
3486
  fill: none;
3511
3487
  stroke: var(--cds-interactive, #0f62fe);
3512
3488
  stroke-dasharray: 12;
@@ -4074,7 +4050,7 @@ fieldset[disabled] .cds--form__helper-text {
4074
4050
  }
4075
4051
  .cds--tabs.cds--skeleton .cds--tabs__nav-link span::before {
4076
4052
  position: absolute;
4077
- animation: 3000ms ease-in-out skeleton infinite;
4053
+ animation: 3000ms ease-in-out cds--skeleton infinite;
4078
4054
  background: var(--cds-skeleton-element, #c6c6c6);
4079
4055
  block-size: 100%;
4080
4056
  content: "";
@@ -4644,6 +4620,14 @@ a.cds--overflow-menu-options__btn::before {
4644
4620
  }
4645
4621
 
4646
4622
  /*stylelint-enable */
4623
+ .cds--overflow-menu__top-start {
4624
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 2.5rem)));
4625
+ }
4626
+
4627
+ .cds--overflow-menu__top-end {
4628
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 2.5rem)));
4629
+ }
4630
+
4647
4631
  .c4p--button-menu {
4648
4632
  min-width: 160px;
4649
4633
  }
@@ -6544,7 +6528,7 @@ a.cds--overflow-menu-options__btn::before {
6544
6528
  }
6545
6529
  .cds--progress.cds--skeleton .cds--progress-label::before {
6546
6530
  position: absolute;
6547
- animation: 3000ms ease-in-out skeleton infinite;
6531
+ animation: 3000ms ease-in-out cds--skeleton infinite;
6548
6532
  background: var(--cds-skeleton-element, #c6c6c6);
6549
6533
  block-size: 100%;
6550
6534
  content: "";
@@ -6800,7 +6784,7 @@ a.cds--overflow-menu-options__btn::before {
6800
6784
  }
6801
6785
  .cds--toggle--skeleton .cds--toggle__skeleton-circle::before {
6802
6786
  position: absolute;
6803
- animation: 3000ms ease-in-out skeleton infinite;
6787
+ animation: 3000ms ease-in-out cds--skeleton infinite;
6804
6788
  background: var(--cds-skeleton-element, #c6c6c6);
6805
6789
  block-size: 100%;
6806
6790
  content: "";
@@ -6831,7 +6815,7 @@ a.cds--overflow-menu-options__btn::before {
6831
6815
  }
6832
6816
  .cds--toggle--skeleton .cds--toggle__skeleton-rectangle::before {
6833
6817
  position: absolute;
6834
- animation: 3000ms ease-in-out skeleton infinite;
6818
+ animation: 3000ms ease-in-out cds--skeleton infinite;
6835
6819
  background: var(--cds-skeleton-element, #c6c6c6);
6836
6820
  block-size: 100%;
6837
6821
  content: "";
@@ -7408,7 +7392,8 @@ a.cds--overflow-menu-options__btn::before {
7408
7392
  padding-top: 0.5rem;
7409
7393
  }
7410
7394
  .c4p--side-panel.c4p--side-panel--has-slug .c4p--side-panel--scrolls {
7411
- 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-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;
7395
+ 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;
7396
+ 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));
7412
7397
  }
7413
7398
  .c4p--side-panel .c4p--side-panel__inner-content.c4p--side-panel--scrolls {
7414
7399
  padding-top: 1rem;
@@ -7450,7 +7435,7 @@ a.cds--overflow-menu-options__btn::before {
7450
7435
  height: 2.5rem;
7451
7436
  }
7452
7437
  .c4p--side-panel .c4p--side-panel__slug-and-close {
7453
- position: fixed;
7438
+ position: absolute;
7454
7439
  z-index: 10; /* must be higher than title container border bottom */
7455
7440
  top: 0;
7456
7441
  right: 0;
@@ -7535,6 +7520,11 @@ a.cds--overflow-menu-options__btn::before {
7535
7520
  inset: 0;
7536
7521
  }
7537
7522
 
7523
+ .c4p--side-panel--has-slug + .c4p--side-panel__overlay {
7524
+ /* stylelint-disable-next-line carbon/theme-token-use */
7525
+ background-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5));
7526
+ }
7527
+
7538
7528
  .c4p--create-side-panel.c4p--side-panel .c4p--create-side-panel__content-text {
7539
7529
  padding-right: calc(20% - 1rem);
7540
7530
  }
@@ -7613,6 +7603,13 @@ a.cds--overflow-menu-options__btn::before {
7613
7603
  max-height: calc(100% - 3rem);
7614
7604
  transform: translate3d(0, min(95vh, 500px), 0);
7615
7605
  }
7606
+ .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__container {
7607
+ border: 1px solid transparent;
7608
+ border-bottom: 0;
7609
+ /* override carbon ai removing background gradient */
7610
+ 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;
7611
+ box-shadow: 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
7612
+ }
7616
7613
  .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__container {
7617
7614
  transition: transform 240ms cubic-bezier(0, 0, 0.3, 1), max-height 240ms cubic-bezier(0, 0, 0.3, 1);
7618
7615
  }
@@ -7710,8 +7707,11 @@ a.cds--overflow-menu-options__btn::before {
7710
7707
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-nav {
7711
7708
  padding: 1.5rem 2rem 0;
7712
7709
  }
7713
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon {
7714
- padding-right: 4rem;
7710
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon, .c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header {
7711
+ padding-right: 5rem;
7712
+ }
7713
+ .c4p--tearsheet.c4p--tearsheet--wide.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon {
7714
+ margin-right: 3rem;
7715
7715
  }
7716
7716
  .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header-description {
7717
7717
  max-width: 80%;
@@ -7764,6 +7764,10 @@ a.cds--overflow-menu-options__btn::before {
7764
7764
  overflow: auto;
7765
7765
  flex-grow: 1;
7766
7766
  }
7767
+ .c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__main {
7768
+ 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;
7769
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2));
7770
+ }
7767
7771
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination,
7768
7772
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination__control-buttons,
7769
7773
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--text-input,
@@ -7802,6 +7806,9 @@ a.cds--overflow-menu-options__btn::before {
7802
7806
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__buttons {
7803
7807
  background: var(--cds-background, #ffffff);
7804
7808
  }
7809
+ .c4p--tearsheet.c4p--tearsheet--has-slug:not(.c4p--tearsheet--has-close) .cds--slug {
7810
+ inset-inline-end: 0;
7811
+ }
7805
7812
 
7806
7813
  @keyframes step-content-entrance {
7807
7814
  0% {
@@ -8359,7 +8366,7 @@ a.cds--overflow-menu-options__btn::before {
8359
8366
  }
8360
8367
  .cds--radio-button__label.cds--skeleton::before {
8361
8368
  position: absolute;
8362
- animation: 3000ms ease-in-out skeleton infinite;
8369
+ animation: 3000ms ease-in-out cds--skeleton infinite;
8363
8370
  background: var(--cds-skeleton-element, #c6c6c6);
8364
8371
  block-size: 100%;
8365
8372
  content: "";
@@ -8623,7 +8630,7 @@ a.cds--overflow-menu-options__btn::before {
8623
8630
  }
8624
8631
 
8625
8632
  .c4p--card--has-slug {
8626
- 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-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;
8633
+ 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;
8627
8634
  border: 1px solid transparent;
8628
8635
  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));
8629
8636
  }
@@ -8814,6 +8821,7 @@ a.cds--overflow-menu-options__btn::before {
8814
8821
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
8815
8822
  cursor: no-drop;
8816
8823
  text-decoration: none;
8824
+ transition: none;
8817
8825
  }
8818
8826
  .cds--file-browse-btn--disabled:hover, .cds--file-browse-btn--disabled:focus {
8819
8827
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
@@ -9674,6 +9682,7 @@ button.c4p--add-select__global-filter-toggle--open {
9674
9682
  --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
9675
9683
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
9676
9684
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
9685
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
9677
9686
  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
9678
9687
  --cds-ai-border-start: #4589ff;
9679
9688
  --cds-ai-border-strong: #78a9ff;
@@ -9682,6 +9691,9 @@ button.c4p--add-select__global-filter-toggle--open {
9682
9691
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
9683
9692
  --cds-ai-gradient-start-02: transparent;
9684
9693
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
9694
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
9695
+ --cds-ai-skeleton-background: #0053ff;
9696
+ --cds-ai-skeleton-element-background: #001141;
9685
9697
  --cds-background: #161616;
9686
9698
  --cds-background-active: rgba(141, 141, 141, 0.4);
9687
9699
  --cds-background-brand: #0f62fe;
@@ -9706,9 +9718,9 @@ button.c4p--add-select__global-filter-toggle--open {
9706
9718
  --cds-border-tile-01: #525252;
9707
9719
  --cds-border-tile-02: #6f6f6f;
9708
9720
  --cds-border-tile-03: #8d8d8d;
9709
- --cds-chat-avatar-agent: #f4f4f4;
9710
- --cds-chat-avatar-bot: #4589ff;
9711
- --cds-chat-avatar-user: #f4f4f4;
9721
+ --cds-chat-avatar-agent: #c6c6c6;
9722
+ --cds-chat-avatar-bot: #8d8d8d;
9723
+ --cds-chat-avatar-user: #4589ff;
9712
9724
  --cds-chat-bubble-agent: #262626;
9713
9725
  --cds-chat-bubble-agent-border: #525252;
9714
9726
  --cds-chat-bubble-user: #393939;
@@ -10507,7 +10519,7 @@ button.c4p--add-select__global-filter-toggle--open {
10507
10519
  }
10508
10520
  .cds--breadcrumb.cds--skeleton .cds--link::before {
10509
10521
  position: absolute;
10510
- animation: 3000ms ease-in-out skeleton infinite;
10522
+ animation: 3000ms ease-in-out cds--skeleton infinite;
10511
10523
  background: var(--cds-skeleton-element, #c6c6c6);
10512
10524
  block-size: 100%;
10513
10525
  content: "";
@@ -10526,6 +10538,14 @@ button.c4p--add-select__global-filter-toggle--open {
10526
10538
  padding-inline-start: 0;
10527
10539
  }
10528
10540
 
10541
+ @keyframes ai-skeleton-animation {
10542
+ 0% {
10543
+ transform: translateX(-100%);
10544
+ }
10545
+ 100% {
10546
+ transform: translateX(100%);
10547
+ }
10548
+ }
10529
10549
  .cds--icon--skeleton {
10530
10550
  position: relative;
10531
10551
  padding: 0;
@@ -10544,7 +10564,7 @@ button.c4p--add-select__global-filter-toggle--open {
10544
10564
  }
10545
10565
  .cds--icon--skeleton::before {
10546
10566
  position: absolute;
10547
- animation: 3000ms ease-in-out skeleton infinite;
10567
+ animation: 3000ms ease-in-out cds--skeleton infinite;
10548
10568
  background: var(--cds-skeleton-element, #c6c6c6);
10549
10569
  block-size: 100%;
10550
10570
  content: "";
@@ -10574,7 +10594,7 @@ button.c4p--add-select__global-filter-toggle--open {
10574
10594
  }
10575
10595
  .cds--skeleton__placeholder::before {
10576
10596
  position: absolute;
10577
- animation: 3000ms ease-in-out skeleton infinite;
10597
+ animation: 3000ms ease-in-out cds--skeleton infinite;
10578
10598
  background: var(--cds-skeleton-element, #c6c6c6);
10579
10599
  block-size: 100%;
10580
10600
  content: "";
@@ -10605,7 +10625,7 @@ button.c4p--add-select__global-filter-toggle--open {
10605
10625
  }
10606
10626
  .cds--skeleton__text::before {
10607
10627
  position: absolute;
10608
- animation: 3000ms ease-in-out skeleton infinite;
10628
+ animation: 3000ms ease-in-out cds--skeleton infinite;
10609
10629
  background: var(--cds-skeleton-element, #c6c6c6);
10610
10630
  block-size: 100%;
10611
10631
  content: "";
@@ -10622,6 +10642,37 @@ button.c4p--add-select__global-filter-toggle--open {
10622
10642
  block-size: 1.5rem;
10623
10643
  }
10624
10644
 
10645
+ .cds--skeleton__text--ai,
10646
+ .cds--skeleton__placeholder--ai,
10647
+ .cds--skeleton__icon--ai {
10648
+ overflow: hidden;
10649
+ background: var(--cds-ai-skeleton-background, #b8d3ff);
10650
+ }
10651
+
10652
+ .cds--skeleton__text--ai::before,
10653
+ .cds--skeleton__placeholder--ai::before,
10654
+ .cds--skeleton__icon--ai::before {
10655
+ animation: 1250ms ease-in-out ai-skeleton-animation infinite;
10656
+ background: linear-gradient(to right, rgba(0, 17, 65, 0) 0%, rgba(0, 17, 65, 0.5) 50%, rgba(0, 17, 65, 0) 100%);
10657
+ }
10658
+
10659
+ .cds--skeleton__placeholder--ai::before,
10660
+ .cds--skeleton__icon--ai::before {
10661
+ inline-size: 200%;
10662
+ }
10663
+
10664
+ .cds--skeleton__placeholder--ai {
10665
+ border-radius: 0.5rem;
10666
+ }
10667
+
10668
+ .cds--skeleton__text--ai {
10669
+ border-radius: 1rem;
10670
+ }
10671
+
10672
+ .cds--skeleton__icon--ai {
10673
+ border-radius: 0.125rem;
10674
+ }
10675
+
10625
10676
  .cds--tag {
10626
10677
  --cds-layout-size-height-xs: 1.125rem;
10627
10678
  --cds-layout-size-height-sm: 1.125rem;
@@ -10907,7 +10958,7 @@ button.c4p--add-select__global-filter-toggle--open {
10907
10958
  }
10908
10959
  .cds--tag.cds--skeleton::before {
10909
10960
  position: absolute;
10910
- animation: 3000ms ease-in-out skeleton infinite;
10961
+ animation: 3000ms ease-in-out cds--skeleton infinite;
10911
10962
  background: var(--cds-skeleton-element, #c6c6c6);
10912
10963
  block-size: 100%;
10913
10964
  content: "";
@@ -14211,7 +14262,7 @@ button.c4p--add-select__global-filter-toggle--open {
14211
14262
  .cds--search--md.cds--skeleton .cds--search-input::before,
14212
14263
  .cds--search--sm.cds--skeleton .cds--search-input::before {
14213
14264
  position: absolute;
14214
- animation: 3000ms ease-in-out skeleton infinite;
14265
+ animation: 3000ms ease-in-out cds--skeleton infinite;
14215
14266
  background: var(--cds-skeleton-element, #c6c6c6);
14216
14267
  block-size: 100%;
14217
14268
  content: "";
@@ -14395,6 +14446,7 @@ button.c4p--add-select__global-filter-toggle--open {
14395
14446
  --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
14396
14447
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
14397
14448
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
14449
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
14398
14450
  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
14399
14451
  --cds-ai-border-start: #4589ff;
14400
14452
  --cds-ai-border-strong: #78a9ff;
@@ -14403,6 +14455,9 @@ button.c4p--add-select__global-filter-toggle--open {
14403
14455
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
14404
14456
  --cds-ai-gradient-start-02: transparent;
14405
14457
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
14458
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
14459
+ --cds-ai-skeleton-background: #0053ff;
14460
+ --cds-ai-skeleton-element-background: #001141;
14406
14461
  --cds-background: #262626;
14407
14462
  --cds-background-active: rgba(141, 141, 141, 0.4);
14408
14463
  --cds-background-brand: #0f62fe;
@@ -14427,9 +14482,9 @@ button.c4p--add-select__global-filter-toggle--open {
14427
14482
  --cds-border-tile-01: #6f6f6f;
14428
14483
  --cds-border-tile-02: #8d8d8d;
14429
14484
  --cds-border-tile-03: #a8a8a8;
14430
- --cds-chat-avatar-agent: #f4f4f4;
14431
- --cds-chat-avatar-bot: #4589ff;
14432
- --cds-chat-avatar-user: #f4f4f4;
14485
+ --cds-chat-avatar-agent: #c6c6c6;
14486
+ --cds-chat-avatar-bot: #8d8d8d;
14487
+ --cds-chat-avatar-user: #4589ff;
14433
14488
  --cds-chat-bubble-agent: #262626;
14434
14489
  --cds-chat-bubble-agent-border: #525252;
14435
14490
  --cds-chat-bubble-user: #393939;
@@ -14879,6 +14934,7 @@ button.c4p--add-select__global-filter-toggle--open {
14879
14934
  --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
14880
14935
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
14881
14936
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
14937
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
14882
14938
  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
14883
14939
  --cds-ai-border-start: #4589ff;
14884
14940
  --cds-ai-border-strong: #78a9ff;
@@ -14887,6 +14943,9 @@ button.c4p--add-select__global-filter-toggle--open {
14887
14943
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
14888
14944
  --cds-ai-gradient-start-02: transparent;
14889
14945
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
14946
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
14947
+ --cds-ai-skeleton-background: #0053ff;
14948
+ --cds-ai-skeleton-element-background: #001141;
14890
14949
  --cds-background: #161616;
14891
14950
  --cds-background-active: rgba(141, 141, 141, 0.4);
14892
14951
  --cds-background-brand: #0f62fe;
@@ -14911,9 +14970,9 @@ button.c4p--add-select__global-filter-toggle--open {
14911
14970
  --cds-border-tile-01: #525252;
14912
14971
  --cds-border-tile-02: #6f6f6f;
14913
14972
  --cds-border-tile-03: #8d8d8d;
14914
- --cds-chat-avatar-agent: #f4f4f4;
14915
- --cds-chat-avatar-bot: #4589ff;
14916
- --cds-chat-avatar-user: #f4f4f4;
14973
+ --cds-chat-avatar-agent: #c6c6c6;
14974
+ --cds-chat-avatar-bot: #8d8d8d;
14975
+ --cds-chat-avatar-user: #4589ff;
14917
14976
  --cds-chat-bubble-agent: #262626;
14918
14977
  --cds-chat-bubble-agent-border: #525252;
14919
14978
  --cds-chat-bubble-user: #393939;
@@ -16304,16 +16363,41 @@ button.c4p--add-select__global-filter-toggle--open {
16304
16363
  }
16305
16364
 
16306
16365
  .c4p--datagrid th.c4p--datagrid__with-slug {
16307
- 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%);
16308
- border-block-end-color: var(--cds-ai-border-strong, #4589ff);
16366
+ /* stylelint-disable-next-line carbon/theme-token-use */
16367
+ box-shadow: inset 0 1px var(--cds-ai-border-strong, #4589ff);
16309
16368
  }
16310
16369
 
16311
- .c4p--datagrid .cds--data-table tbody tr:has(> .c4p--datagrid__table-row-ai-enabled) {
16312
- 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%);
16313
- border-block-end-color: var(--cds-ai-border-strong, #4589ff);
16370
+ .c4p--datagrid th.c4p--datagrid__with-slug,
16371
+ .c4p--datagrid td.c4p--datagrid__slug--cell {
16372
+ 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%);
16373
+ }
16374
+
16375
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row,
16376
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row + .c4p--datagrid__expanded-row {
16377
+ 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%);
16314
16378
  background-attachment: fixed;
16315
16379
  }
16316
16380
 
16381
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row {
16382
+ /* stylelint-disable-next-line carbon/theme-token-use */
16383
+ box-shadow: inset 1px 0 var(--cds-ai-border-strong, #4589ff);
16384
+ }
16385
+
16386
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row:hover,
16387
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row.cds--data-table--selected:hover,
16388
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row.c4p--datagrid__carbon-row-expanded:hover + .c4p--datagrid__expanded-row,
16389
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__expandable-row--hover.c4p--datagrid__slug--row {
16390
+ 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);
16391
+ }
16392
+
16393
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__expandable-row--hover.c4p--datagrid__slug--row td {
16394
+ background-color: transparent;
16395
+ }
16396
+
16397
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row.cds--data-table--selected {
16398
+ 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);
16399
+ }
16400
+
16317
16401
  .c4p--datagrid th.c4p--datagrid__with-slug .cds--slug {
16318
16402
  margin-left: 0.5rem;
16319
16403
  }
@@ -16853,6 +16937,9 @@ button.c4p--add-select__global-filter-toggle--open {
16853
16937
  display: flex;
16854
16938
  align-items: center;
16855
16939
  }
16940
+ .c4p--datagrid .c4p--datagrid__table-row-ai-enabled.c4p--datagrid__slug--expanded {
16941
+ border: none;
16942
+ }
16856
16943
 
16857
16944
  .c4p--datagrid .c4p--datagrid__table-row-ai-spacer,
16858
16945
  .c4p--datagrid .c4p--datagrid__table-row-ai-enabled {
@@ -18131,6 +18218,157 @@ th.c4p--datagrid__select-all-toggle-on.button {
18131
18218
  color: #ffffff;
18132
18219
  }
18133
18220
 
18221
+ .c4p--big-numbers__label {
18222
+ font-size: var(--cds-label-01-font-size, 0.75rem);
18223
+ font-weight: var(--cds-label-01-font-weight, 400);
18224
+ line-height: var(--cds-label-01-line-height, 1.33333);
18225
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
18226
+ display: block;
18227
+ margin: 0;
18228
+ color: var(--cds-text-secondary, #525252);
18229
+ }
18230
+
18231
+ .c4p--big-numbers__value {
18232
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
18233
+ font-weight: var(--cds-heading-04-font-weight, 400);
18234
+ line-height: var(--cds-heading-04-line-height, 1.28572);
18235
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
18236
+ margin-bottom: 0;
18237
+ }
18238
+
18239
+ .c4p--big-numbers__total {
18240
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
18241
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
18242
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
18243
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
18244
+ }
18245
+
18246
+ .c4p--big-numbers__total,
18247
+ .c4p--big-numbers__percentage-mark {
18248
+ margin-top: auto;
18249
+ margin-bottom: 0.25rem;
18250
+ }
18251
+
18252
+ .c4p--big-numbers__info {
18253
+ vertical-align: top;
18254
+ }
18255
+
18256
+ .c4p--big-numbers__trend {
18257
+ margin-top: 0.5rem;
18258
+ vertical-align: top;
18259
+ }
18260
+
18261
+ .c4p--big-numbers__row {
18262
+ display: flex;
18263
+ }
18264
+
18265
+ .c4p--big-numbers__info {
18266
+ padding-left: 0.5rem;
18267
+ }
18268
+
18269
+ .c4p--big-numbers__percentage {
18270
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
18271
+ font-weight: var(--cds-heading-04-font-weight, 400);
18272
+ line-height: var(--cds-heading-04-line-height, 1.28572);
18273
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
18274
+ }
18275
+
18276
+ .c4p--big-numbers__percentage-mark {
18277
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
18278
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
18279
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
18280
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
18281
+ }
18282
+
18283
+ .c4p--big-numbers--lg .c4p--big-numbers__value,
18284
+ .c4p--big-numbers--lg .c4p--big-numbers__percentage {
18285
+ font-size: var(--cds-heading-06-font-size, 2.625rem);
18286
+ font-weight: var(--cds-heading-06-font-weight, 300);
18287
+ line-height: var(--cds-heading-06-line-height, 1.199);
18288
+ letter-spacing: var(--cds-heading-06-letter-spacing, 0);
18289
+ }
18290
+
18291
+ .c4p--big-numbers--lg .c4p--big-numbers__total,
18292
+ .c4p--big-numbers--lg .c4p--big-numbers__percentage-mark {
18293
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
18294
+ font-weight: var(--cds-heading-03-font-weight, 400);
18295
+ line-height: var(--cds-heading-03-line-height, 1.4);
18296
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
18297
+ }
18298
+
18299
+ .c4p--big-numbers--xl .c4p--big-numbers__label {
18300
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
18301
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
18302
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
18303
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
18304
+ }
18305
+
18306
+ .c4p--big-numbers--xl .c4p--big-numbers__value,
18307
+ .c4p--big-numbers--xl .c4p--big-numbers__percentage {
18308
+ font-size: var(--cds-heading-07-font-size, 3.375rem);
18309
+ font-weight: var(--cds-heading-07-font-weight, 300);
18310
+ line-height: var(--cds-heading-07-line-height, 1.19);
18311
+ letter-spacing: var(--cds-heading-07-letter-spacing, 0);
18312
+ }
18313
+
18314
+ .c4p--big-numbers--xl .c4p--big-numbers__total,
18315
+ .c4p--big-numbers--xl .c4p--big-numbers__percentage-mark {
18316
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
18317
+ font-weight: var(--cds-heading-04-font-weight, 400);
18318
+ line-height: var(--cds-heading-04-line-height, 1.28572);
18319
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
18320
+ }
18321
+
18322
+ .c4p--big-numbers--xl .c4p--big-numbers__trend {
18323
+ margin-top: 0.75rem;
18324
+ }
18325
+
18326
+ .c4p--big-numbers-skeleton {
18327
+ width: 4rem;
18328
+ }
18329
+
18330
+ .c4p--big-numbers-skeleton__label {
18331
+ height: 0.75rem;
18332
+ margin-top: 0;
18333
+ margin-bottom: 0.5rem;
18334
+ }
18335
+
18336
+ .c4p--big-numbers-skeleton__value {
18337
+ /* stylelint-disable-next-line declaration-no-important */
18338
+ height: 2.5rem !important;
18339
+ margin: 0;
18340
+ }
18341
+
18342
+ .c4p--big-numbers-skeleton--lg {
18343
+ width: 5rem;
18344
+ }
18345
+
18346
+ .c4p--big-numbers-skeleton--xl {
18347
+ width: 6rem;
18348
+ }
18349
+
18350
+ .c4p--big-numbers-skeleton.c4p--big-numbers-skeleton--lg .c4p--big-numbers-skeleton__label {
18351
+ height: 0.75rem;
18352
+ }
18353
+
18354
+ .c4p--big-numbers-skeleton.c4p--big-numbers-skeleton--lg .c4p--big-numbers-skeleton__value {
18355
+ /* stylelint-disable-next-line declaration-no-important */
18356
+ height: 3rem !important;
18357
+ }
18358
+
18359
+ .c4p--big-numbers-skeleton.c4p--big-numbers-skeleton--xl .c4p--big-numbers-skeleton__label {
18360
+ height: 0.75rem;
18361
+ }
18362
+
18363
+ .c4p--big-numbers-skeleton.c4p--big-numbers-skeleton--xl .c4p--big-numbers-skeleton__value {
18364
+ /* stylelint-disable-next-line declaration-no-important */
18365
+ height: 4rem !important;
18366
+ }
18367
+
18368
+ .c4p--big-numbers .c4p--big-numbers__tooltip-trigger:focus {
18369
+ outline: 1px solid var(--cds-focus, #0f62fe);
18370
+ }
18371
+
18134
18372
  .c4p--truncated-list__list {
18135
18373
  /* stylelint-disable-next-line carbon/motion-duration-use */
18136
18374
  transition: height 240ms cubic-bezier(0.2, 0, 1, 0.9);
@@ -19354,6 +19592,7 @@ em {
19354
19592
  --cds-ai-aura-hover-end: rgba(255, 255, 255, 0);
19355
19593
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
19356
19594
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
19595
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
19357
19596
  --cds-ai-border-end: #d0e2ff;
19358
19597
  --cds-ai-border-start: #78a9ff;
19359
19598
  --cds-ai-border-strong: #4589ff;
@@ -19362,6 +19601,9 @@ em {
19362
19601
  --cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
19363
19602
  --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
19364
19603
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
19604
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
19605
+ --cds-ai-skeleton-background: #b8d3ff;
19606
+ --cds-ai-skeleton-element-background: #001141;
19365
19607
  --cds-background: #ffffff;
19366
19608
  --cds-background-active: rgba(141, 141, 141, 0.5);
19367
19609
  --cds-background-brand: #0f62fe;
@@ -19386,9 +19628,9 @@ em {
19386
19628
  --cds-border-tile-01: #c6c6c6;
19387
19629
  --cds-border-tile-02: #a8a8a8;
19388
19630
  --cds-border-tile-03: #c6c6c6;
19389
- --cds-chat-avatar-agent: #161616;
19390
- --cds-chat-avatar-bot: #0f62fe;
19391
- --cds-chat-avatar-user: #161616;
19631
+ --cds-chat-avatar-agent: #393939;
19632
+ --cds-chat-avatar-bot: #6f6f6f;
19633
+ --cds-chat-avatar-user: #0f62fe;
19392
19634
  --cds-chat-bubble-agent: #ffffff;
19393
19635
  --cds-chat-bubble-agent-border: #e0e0e0;
19394
19636
  --cds-chat-bubble-user: #e0e0e0;
@@ -19573,6 +19815,7 @@ em {
19573
19815
  --cds-ai-aura-hover-end: rgba(255, 255, 255, 0);
19574
19816
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
19575
19817
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
19818
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
19576
19819
  --cds-ai-border-end: #d0e2ff;
19577
19820
  --cds-ai-border-start: #78a9ff;
19578
19821
  --cds-ai-border-strong: #4589ff;
@@ -19581,6 +19824,9 @@ em {
19581
19824
  --cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
19582
19825
  --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
19583
19826
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
19827
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
19828
+ --cds-ai-skeleton-background: #b8d3ff;
19829
+ --cds-ai-skeleton-element-background: #001141;
19584
19830
  --cds-background: #f4f4f4;
19585
19831
  --cds-background-active: rgba(141, 141, 141, 0.5);
19586
19832
  --cds-background-brand: #0f62fe;
@@ -19605,9 +19851,9 @@ em {
19605
19851
  --cds-border-tile-01: #a8a8a8;
19606
19852
  --cds-border-tile-02: #c6c6c6;
19607
19853
  --cds-border-tile-03: #a8a8a8;
19608
- --cds-chat-avatar-agent: #161616;
19609
- --cds-chat-avatar-bot: #0f62fe;
19610
- --cds-chat-avatar-user: #161616;
19854
+ --cds-chat-avatar-agent: #393939;
19855
+ --cds-chat-avatar-bot: #6f6f6f;
19856
+ --cds-chat-avatar-user: #0f62fe;
19611
19857
  --cds-chat-bubble-agent: #ffffff;
19612
19858
  --cds-chat-bubble-agent-border: #e0e0e0;
19613
19859
  --cds-chat-bubble-user: #e0e0e0;
@@ -19792,6 +20038,7 @@ em {
19792
20038
  --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
19793
20039
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
19794
20040
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
20041
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
19795
20042
  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
19796
20043
  --cds-ai-border-start: #4589ff;
19797
20044
  --cds-ai-border-strong: #78a9ff;
@@ -19799,6 +20046,9 @@ em {
19799
20046
  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
19800
20047
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
19801
20048
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
20049
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
20050
+ --cds-ai-skeleton-background: #0053ff;
20051
+ --cds-ai-skeleton-element-background: #001141;
19802
20052
  --cds-background: #262626;
19803
20053
  --cds-background-active: rgba(141, 141, 141, 0.4);
19804
20054
  --cds-background-brand: #0f62fe;
@@ -19823,9 +20073,9 @@ em {
19823
20073
  --cds-border-tile-01: #6f6f6f;
19824
20074
  --cds-border-tile-02: #8d8d8d;
19825
20075
  --cds-border-tile-03: #a8a8a8;
19826
- --cds-chat-avatar-agent: #f4f4f4;
19827
- --cds-chat-avatar-bot: #4589ff;
19828
- --cds-chat-avatar-user: #f4f4f4;
20076
+ --cds-chat-avatar-agent: #c6c6c6;
20077
+ --cds-chat-avatar-bot: #8d8d8d;
20078
+ --cds-chat-avatar-user: #4589ff;
19829
20079
  --cds-chat-bubble-agent: #262626;
19830
20080
  --cds-chat-bubble-agent-border: #525252;
19831
20081
  --cds-chat-bubble-user: #393939;
@@ -20007,6 +20257,7 @@ em {
20007
20257
  --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
20008
20258
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
20009
20259
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
20260
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
20010
20261
  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
20011
20262
  --cds-ai-border-start: #4589ff;
20012
20263
  --cds-ai-border-strong: #78a9ff;
@@ -20014,6 +20265,9 @@ em {
20014
20265
  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
20015
20266
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
20016
20267
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
20268
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
20269
+ --cds-ai-skeleton-background: #0053ff;
20270
+ --cds-ai-skeleton-element-background: #001141;
20017
20271
  --cds-background: #161616;
20018
20272
  --cds-background-active: rgba(141, 141, 141, 0.4);
20019
20273
  --cds-background-brand: #0f62fe;
@@ -20038,9 +20292,9 @@ em {
20038
20292
  --cds-border-tile-01: #525252;
20039
20293
  --cds-border-tile-02: #6f6f6f;
20040
20294
  --cds-border-tile-03: #8d8d8d;
20041
- --cds-chat-avatar-agent: #f4f4f4;
20042
- --cds-chat-avatar-bot: #4589ff;
20043
- --cds-chat-avatar-user: #f4f4f4;
20295
+ --cds-chat-avatar-agent: #c6c6c6;
20296
+ --cds-chat-avatar-bot: #8d8d8d;
20297
+ --cds-chat-avatar-user: #4589ff;
20044
20298
  --cds-chat-bubble-agent: #262626;
20045
20299
  --cds-chat-bubble-agent-border: #525252;
20046
20300
  --cds-chat-bubble-user: #393939;
@@ -20519,6 +20773,60 @@ li.cds--accordion__item--disabled:last-of-type {
20519
20773
  padding-block-start: 100%;
20520
20774
  }
20521
20775
 
20776
+ .cds--chat-btn {
20777
+ border-radius: 1.5rem;
20778
+ }
20779
+
20780
+ .cds--chat-btn.cds--btn--md {
20781
+ border-radius: 1.25rem;
20782
+ }
20783
+
20784
+ .cds--chat-btn.cds--btn--sm {
20785
+ border-radius: 1rem;
20786
+ }
20787
+
20788
+ .cds--chat-btn--quick-action {
20789
+ align-items: center;
20790
+ border: 1px solid var(--cds-link-primary, #0f62fe);
20791
+ }
20792
+
20793
+ .cds--chat-btn--quick-action:hover:not(:active):not([disabled]) {
20794
+ border-color: transparent;
20795
+ background: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
20796
+ }
20797
+
20798
+ .cds--chat-btn--quick-action.cds--btn--ghost:focus {
20799
+ border-color: var(--cds-focus, #0f62fe);
20800
+ box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
20801
+ }
20802
+
20803
+ .cds--chat-btn--quick-action.cds--btn--ghost:hover:focus {
20804
+ border-color: var(--cds-focus, #0f62fe);
20805
+ box-shadow: inset 0 0 0 1px var(--cds-focus-inset, #ffffff);
20806
+ }
20807
+
20808
+ .cds--chat-btn--quick-action[disabled],
20809
+ .cds--chat-btn--quick-action[disabled]:hover {
20810
+ border-color: var(--cds-button-disabled, #c6c6c6);
20811
+ color: var(--cds-button-disabled, #c6c6c6);
20812
+ }
20813
+
20814
+ .cds--chat-btn--quick-action--selected,
20815
+ .cds--chat-btn--quick-action--selected[disabled],
20816
+ .cds--chat-btn--quick-action--selected[disabled]:hover {
20817
+ border-color: transparent;
20818
+ background: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
20819
+ color: var(--cds-text-secondary, #525252);
20820
+ }
20821
+
20822
+ .cds--chat-btn--quick-action--selected:hover {
20823
+ color: var(--cds-text-secondary, #525252);
20824
+ }
20825
+
20826
+ .cds--chat-btn.cds--skeleton {
20827
+ overflow: hidden;
20828
+ }
20829
+
20522
20830
  .cds--checkbox-group {
20523
20831
  box-sizing: border-box;
20524
20832
  padding: 0;
@@ -20792,7 +21100,7 @@ li.cds--accordion__item--disabled:last-of-type {
20792
21100
  }
20793
21101
  .cds--checkbox-label-text.cds--skeleton::before {
20794
21102
  position: absolute;
20795
- animation: 3000ms ease-in-out skeleton infinite;
21103
+ animation: 3000ms ease-in-out cds--skeleton infinite;
20796
21104
  background: var(--cds-skeleton-element, #c6c6c6);
20797
21105
  block-size: 100%;
20798
21106
  content: "";
@@ -21958,19 +22266,28 @@ li.cds--accordion__item--disabled:last-of-type {
21958
22266
  }
21959
22267
 
21960
22268
  .cds--combo-button__container--sm .cds--combo-button__primary-action {
21961
- min-inline-size: 9.9375rem;
22269
+ min-inline-size: 7.9375rem;
21962
22270
  }
21963
22271
 
21964
22272
  .cds--combo-button__container--md .cds--combo-button__primary-action {
21965
- min-inline-size: 9.4375rem;
22273
+ min-inline-size: 7.4375rem;
21966
22274
  }
21967
22275
 
21968
22276
  .cds--combo-button__container--lg .cds--combo-button__primary-action {
21969
- min-inline-size: 8.9375rem;
22277
+ min-inline-size: 6.9375rem;
21970
22278
  }
21971
22279
 
21972
22280
  .cds--combo-button__primary-action .cds--btn {
21973
22281
  inline-size: 100%;
22282
+ max-inline-size: 14.9375rem;
22283
+ min-inline-size: 6.9375rem;
22284
+ }
22285
+
22286
+ .cds--combo-button__primary-action button {
22287
+ display: block;
22288
+ overflow: hidden;
22289
+ text-overflow: ellipsis;
22290
+ white-space: nowrap;
21974
22291
  }
21975
22292
 
21976
22293
  .cds--combo-button__trigger svg {
@@ -21981,6 +22298,18 @@ li.cds--accordion__item--disabled:last-of-type {
21981
22298
  transform: rotate(180deg);
21982
22299
  }
21983
22300
 
22301
+ .cds--combo-button__top {
22302
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
22303
+ }
22304
+
22305
+ .cds--combo-button__top-start {
22306
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
22307
+ }
22308
+
22309
+ .cds--combo-button__top-end {
22310
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
22311
+ }
22312
+
21984
22313
  .cds--contained-list {
21985
22314
  --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-xl)));
21986
22315
  --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
@@ -23242,20 +23571,67 @@ tr.cds--data-table--selected:last-of-type td {
23242
23571
  padding-inline-end: 0;
23243
23572
  }
23244
23573
 
23245
- .cds--data-table tbody tr:has(> .cds--table-column-slug--active) {
23246
- 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%);
23247
- border-block-end-color: var(--cds-ai-border-strong, #4589ff);
23574
+ tr.cds--data-table--slug-row,
23575
+ tr.cds--data-table--slug-row + .cds--expandable-row {
23576
+ 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%);
23248
23577
  background-attachment: fixed;
23249
23578
  }
23250
23579
 
23580
+ .cds--data-table--slug-row {
23581
+ box-shadow: inset 1px 0 var(--cds-ai-border-strong, #4589ff);
23582
+ }
23583
+
23584
+ .cds--data-table tbody tr.cds--data-table--slug-row:hover td,
23585
+ tr.cds--data-table--slug-row.cds--expandable-row:hover + .cds--expandable-row[data-child-row] td,
23586
+ tr.cds--data-table--slug-row.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover > td,
23587
+ tr.cds--data-table--slug-row.cds--expandable-row--hover > td,
23588
+ tr.cds--data-table--selected.cds--data-table--slug-row.cds--expandable-row + tr.cds--expandable-row[data-child-row] > td,
23589
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td,
23590
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:first-of-type,
23591
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected:not(.cds--expandable-row):hover > td,
23592
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover + tr[data-child-row] > td,
23593
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td,
23594
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td:first-of-type {
23595
+ background-color: transparent;
23596
+ }
23597
+
23598
+ .cds--data-table tbody tr.cds--data-table--slug-row:hover,
23599
+ tr.cds--data-table--slug-row:hover + .cds--expandable-row[data-child-row],
23600
+ tr.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover,
23601
+ tr.cds--expandable-row--hover.cds--data-table--slug-row,
23602
+ tr.cds--data-table--selected.cds--parent-row.cds--expandable-row--hover.cds--data-table--slug-row {
23603
+ 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);
23604
+ }
23605
+
23606
+ tr.cds--parent-row.cds--data-table--selected.cds--data-table--slug-row,
23607
+ .cds--data-table--selected.cds--data-table--slug-row,
23608
+ tr.cds--data-table--selected.cds--data-table--slug-row + .cds--expandable-row {
23609
+ 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);
23610
+ }
23611
+
23612
+ tr.cds--data-table--slug-row.cds--data-table--selected td,
23613
+ tr.cds--data-table--slug-row.cds--data-table--selected:hover td,
23614
+ tbody tr.cds--data-table--slug-row:hover td,
23615
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:not(.cds--table-expand):not(.cds--table-column-checkbox):not(.cds--table-column-slug) {
23616
+ border-block-end-color: var(--cds-border-subtle);
23617
+ }
23618
+
23619
+ tr.cds--expandable-row.cds--data-table--selected.cds--data-table--slug-row[data-parent-row] > td:not(.cds--table-expand):not(.cds--table-column-checkbox):not(.cds--table-column-slug) {
23620
+ border-block-end: 1px solid var(--cds-layer-selected);
23621
+ }
23622
+
23623
+ tr.cds--parent-row.cds--data-table--slug-row.cds--expandable-row:hover td:first-of-type {
23624
+ border-block-end: 1px solid transparent;
23625
+ }
23626
+
23251
23627
  .cds--data-table thead th.cds--table-sort__header--slug .cds--table-sort,
23252
23628
  .cds--data-table thead th:has(> .cds--table-header-label--slug) {
23253
- 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%);
23254
- border-block-end-color: var(--cds-ai-border-strong, #4589ff);
23629
+ 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%);
23255
23630
  }
23256
23631
 
23257
23632
  .cds--table-column-slug .cds--slug {
23258
23633
  position: absolute;
23634
+ z-index: 2;
23259
23635
  transform: translateY(-50%);
23260
23636
  }
23261
23637
 
@@ -23269,10 +23645,24 @@ th .cds--table-header-label.cds--table-header-label--slug {
23269
23645
  }
23270
23646
 
23271
23647
  th .cds--table-header-label.cds--table-header-label--slug .cds--slug {
23272
- margin-inline-start: 0.5rem;
23648
+ margin-inline-start: auto;
23649
+ }
23650
+
23651
+ th.cds--table-sort__header--slug,
23652
+ th:has(.cds--table-header-label--slug) {
23653
+ box-shadow: inset 0 1px var(--cds-ai-border-strong, #4589ff);
23654
+ }
23655
+
23656
+ td.cds--table-cell--column-slug {
23657
+ 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%);
23658
+ }
23659
+
23660
+ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-cell--column-slug {
23661
+ border-block-start: 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%);
23273
23662
  }
23274
23663
 
23275
23664
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
23665
+ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-cell--column-slug,
23276
23666
  .cds--data-table-content {
23277
23667
  outline: 1px solid transparent;
23278
23668
  }
@@ -23890,17 +24280,19 @@ tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td {
23890
24280
  transition: padding-bottom 150ms cubic-bezier(0.2, 0, 0.38, 0.9), transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
23891
24281
  }
23892
24282
 
23893
- tbody:has(> tr.cds--parent-row--slug) > tr.cds--expandable-row[data-child-row] td,
24283
+ tbody:has(> tr.cds--data-table--slug-row) > tr.cds--expandable-row[data-child-row] td,
23894
24284
  tbody:has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
23895
24285
  padding-inline-start: 5.5rem;
23896
24286
  }
23897
24287
 
23898
- tbody:has(> tr.cds--parent-row--slug):has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
24288
+ tbody:has(> tr.cds--data-table--slug-row):has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
23899
24289
  padding-inline-start: 7.5rem;
23900
24290
  }
23901
24291
 
23902
24292
  tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td .cds--child-row-inner-container {
23903
24293
  max-block-size: 100%;
24294
+ padding-block: 1rem;
24295
+ padding-block-end: 1.5rem;
23904
24296
  }
23905
24297
 
23906
24298
  .cds--parent-row.cds--expandable-row > td,
@@ -24186,8 +24578,8 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
24186
24578
  border-block-end: 1px solid transparent;
24187
24579
  }
24188
24580
 
24189
- .cds--parent-row--slug td,
24190
- .cds--data-table tr.cds--parent-row--slug:hover td {
24581
+ .cds--data-table--slug-row td,
24582
+ .cds--data-table tr.cds--data-table--slug-row:hover td {
24191
24583
  border-block-start: 1px solid transparent;
24192
24584
  }
24193
24585
 
@@ -24232,7 +24624,7 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
24232
24624
  .cds--data-table.cds--skeleton th span::before,
24233
24625
  .cds--data-table.cds--skeleton td span::before {
24234
24626
  position: absolute;
24235
- animation: 3000ms ease-in-out skeleton infinite;
24627
+ animation: 3000ms ease-in-out cds--skeleton infinite;
24236
24628
  background: var(--cds-skeleton-element, #c6c6c6);
24237
24629
  block-size: 100%;
24238
24630
  content: "";
@@ -24285,7 +24677,7 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
24285
24677
  }
24286
24678
  .cds--data-table-container.cds--skeleton .cds--data-table-header__title::before {
24287
24679
  position: absolute;
24288
- animation: 3000ms ease-in-out skeleton infinite;
24680
+ animation: 3000ms ease-in-out cds--skeleton infinite;
24289
24681
  background: var(--cds-skeleton-element, #c6c6c6);
24290
24682
  block-size: 100%;
24291
24683
  content: "";
@@ -24316,7 +24708,7 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
24316
24708
  }
24317
24709
  .cds--data-table-container.cds--skeleton .cds--data-table-header__description::before {
24318
24710
  position: absolute;
24319
- animation: 3000ms ease-in-out skeleton infinite;
24711
+ animation: 3000ms ease-in-out cds--skeleton infinite;
24320
24712
  background: var(--cds-skeleton-element, #c6c6c6);
24321
24713
  block-size: 100%;
24322
24714
  content: "";
@@ -24534,9 +24926,14 @@ th .cds--table-sort__flex {
24534
24926
  margin-block-start: 0.8125rem;
24535
24927
  }
24536
24928
 
24929
+ .cds--table-sort__header--slug .cds--table-sort__icon,
24930
+ .cds--table-sort__header--slug .cds--table-sort__icon-unsorted {
24931
+ margin-inline-end: 0.5rem;
24932
+ margin-inline-start: auto;
24933
+ }
24934
+
24537
24935
  .cds--table-sort__header--slug .cds--slug {
24538
- margin-inline-end: auto;
24539
- margin-inline-start: 0.5rem;
24936
+ margin-inline-end: 0.5rem;
24540
24937
  }
24541
24938
 
24542
24939
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
@@ -25309,7 +25706,7 @@ th .cds--table-sort__flex {
25309
25706
  .cds--date-picker.cds--skeleton input::before,
25310
25707
  .cds--date-picker__input.cds--skeleton::before {
25311
25708
  position: absolute;
25312
- animation: 3000ms ease-in-out skeleton infinite;
25709
+ animation: 3000ms ease-in-out cds--skeleton infinite;
25313
25710
  background: var(--cds-skeleton-element, #c6c6c6);
25314
25711
  block-size: 100%;
25315
25712
  content: "";
@@ -25344,7 +25741,7 @@ th .cds--table-sort__flex {
25344
25741
  }
25345
25742
  .cds--date-picker.cds--skeleton .cds--label::before {
25346
25743
  position: absolute;
25347
- animation: 3000ms ease-in-out skeleton infinite;
25744
+ animation: 3000ms ease-in-out cds--skeleton infinite;
25348
25745
  background: var(--cds-skeleton-element, #c6c6c6);
25349
25746
  block-size: 100%;
25350
25747
  content: "";
@@ -25814,7 +26211,7 @@ button.cds--dropdown-text:focus {
25814
26211
  .cds--dropdown-v2.cds--skeleton::before,
25815
26212
  .cds--dropdown.cds--skeleton::before {
25816
26213
  position: absolute;
25817
- animation: 3000ms ease-in-out skeleton infinite;
26214
+ animation: 3000ms ease-in-out cds--skeleton infinite;
25818
26215
  background: var(--cds-skeleton-element, #c6c6c6);
25819
26216
  block-size: 100%;
25820
26217
  content: "";
@@ -26981,7 +27378,7 @@ button.cds--dropdown-text:focus {
26981
27378
  }
26982
27379
  .cds--number.cds--skeleton::before {
26983
27380
  position: absolute;
26984
- animation: 3000ms ease-in-out skeleton infinite;
27381
+ animation: 3000ms ease-in-out cds--skeleton infinite;
26985
27382
  background: var(--cds-skeleton-element, #c6c6c6);
26986
27383
  block-size: 100%;
26987
27384
  content: "";
@@ -27568,7 +27965,7 @@ optgroup.cds--select-optgroup:disabled,
27568
27965
  }
27569
27966
  .cds--select.cds--skeleton::before {
27570
27967
  position: absolute;
27571
- animation: 3000ms ease-in-out skeleton infinite;
27968
+ animation: 3000ms ease-in-out cds--skeleton infinite;
27572
27969
  background: var(--cds-skeleton-element, #c6c6c6);
27573
27970
  block-size: 100%;
27574
27971
  content: "";
@@ -27929,7 +28326,7 @@ optgroup.cds--select-optgroup:disabled,
27929
28326
  }
27930
28327
  .cds--text-area.cds--skeleton::before {
27931
28328
  position: absolute;
27932
- animation: 3000ms ease-in-out skeleton infinite;
28329
+ animation: 3000ms ease-in-out cds--skeleton infinite;
27933
28330
  background: var(--cds-skeleton-element, #c6c6c6);
27934
28331
  block-size: 100%;
27935
28332
  content: "";
@@ -28578,6 +28975,18 @@ optgroup.cds--select-optgroup:disabled,
28578
28975
  transform: rotate(180deg);
28579
28976
  }
28580
28977
 
28978
+ .cds--menu-button__top {
28979
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
28980
+ }
28981
+
28982
+ .cds--menu-button__top-start {
28983
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
28984
+ }
28985
+
28986
+ .cds--menu-button__top-end {
28987
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
28988
+ }
28989
+
28581
28990
  .cds--inline-notification {
28582
28991
  position: relative;
28583
28992
  display: flex;
@@ -30406,7 +30815,7 @@ span.cds--pagination__text.cds--pagination__items-count {
30406
30815
  position: absolute;
30407
30816
  animation-duration: 1400ms;
30408
30817
  animation-iteration-count: infinite;
30409
- animation-name: progress-bar-indeterminate;
30818
+ animation-name: cds--progress-bar-indeterminate;
30410
30819
  animation-timing-function: linear;
30411
30820
  background-image: linear-gradient(90deg, var(--cds-interactive, #0f62fe) 12.5%, transparent 12.5%);
30412
30821
  background-position-x: 0%;
@@ -30416,7 +30825,7 @@ span.cds--pagination__text.cds--pagination__items-count {
30416
30825
  }
30417
30826
 
30418
30827
  [dir=rtl] .cds--progress-bar--indeterminate .cds--progress-bar__track::after {
30419
- animation-name: progress-bar-indeterminate-rtl;
30828
+ animation-name: cds--progress-bar-indeterminate-rtl;
30420
30829
  }
30421
30830
 
30422
30831
  .cds--progress-bar__helper-text {
@@ -30469,7 +30878,7 @@ span.cds--pagination__text.cds--pagination__items-count {
30469
30878
  margin-inline-end: 0;
30470
30879
  }
30471
30880
 
30472
- @keyframes progress-bar-indeterminate {
30881
+ @keyframes cds--progress-bar-indeterminate {
30473
30882
  0% {
30474
30883
  background-position-x: 25%;
30475
30884
  }
@@ -30477,7 +30886,7 @@ span.cds--pagination__text.cds--pagination__items-count {
30477
30886
  background-position-x: -105%;
30478
30887
  }
30479
30888
  }
30480
- @keyframes progress-bar-indeterminate-rtl {
30889
+ @keyframes cds--progress-bar-indeterminate-rtl {
30481
30890
  0% {
30482
30891
  background-position-x: -105%;
30483
30892
  }
@@ -30890,7 +31299,7 @@ span.cds--pagination__text.cds--pagination__items-count {
30890
31299
  }
30891
31300
  .cds--slider-container.cds--skeleton .cds--slider__range-label::before {
30892
31301
  position: absolute;
30893
- animation: 3000ms ease-in-out skeleton infinite;
31302
+ animation: 3000ms ease-in-out cds--skeleton infinite;
30894
31303
  background: var(--cds-skeleton-element, #c6c6c6);
30895
31304
  block-size: 100%;
30896
31305
  content: "";
@@ -31304,7 +31713,7 @@ span.cds--pagination__text.cds--pagination__items-count {
31304
31713
  }
31305
31714
 
31306
31715
  .cds--slug.cds--slug--enabled .cds--slug-content {
31307
- 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, #ffffff), 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, #ffffff), var(--cds-background, #ffffff)) border-box;
31716
+ 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;
31308
31717
  border: 1px solid transparent;
31309
31718
  border-radius: 0.5rem;
31310
31719
  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));
@@ -31776,7 +32185,7 @@ span.cds--pagination__text.cds--pagination__items-count {
31776
32185
  }
31777
32186
  .cds--structured-list.cds--skeleton span::before {
31778
32187
  position: absolute;
31779
- animation: 3000ms ease-in-out skeleton infinite;
32188
+ animation: 3000ms ease-in-out cds--skeleton infinite;
31780
32189
  background: var(--cds-skeleton-element, #c6c6c6);
31781
32190
  block-size: 100%;
31782
32191
  content: "";
@@ -32077,10 +32486,6 @@ span.cds--pagination__text.cds--pagination__items-count {
32077
32486
  }
32078
32487
  }
32079
32488
 
32080
- .cds--tile-content__above-the-fold {
32081
- display: block;
32082
- }
32083
-
32084
32489
  .cds--tile-content__below-the-fold {
32085
32490
  display: block;
32086
32491
  opacity: 0;
@@ -32188,13 +32593,13 @@ span.cds--pagination__text.cds--pagination__items-count {
32188
32593
  }
32189
32594
 
32190
32595
  .cds--tile--slug.cds--tile {
32191
- 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-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;
32596
+ 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;
32192
32597
  border: 1px solid transparent;
32193
32598
  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));
32194
32599
  }
32195
32600
 
32196
32601
  .cds--tile--slug.cds--tile--expandable:hover {
32197
- 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-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;
32602
+ 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;
32198
32603
  }
32199
32604
 
32200
32605
  .cds--tile--slug.cds--tile--selectable::before,
@@ -35305,11 +35710,11 @@ a.cds--side-nav__link--current::before {
35305
35710
  .c4p--full-page-error__error-svg-container {
35306
35711
  display: flex;
35307
35712
  height: 100%;
35308
- margin: 0.5rem 0.5rem 5rem 0.5rem;
35713
+ padding: 0.5rem 0.5rem 5rem 0.5rem;
35309
35714
  }
35310
35715
  @media (min-width: 42rem) {
35311
35716
  .c4p--full-page-error__error-svg-container {
35312
- margin: auto 0.5rem 5rem 0.5rem;
35717
+ padding: auto 0.5rem 5rem 0.5rem;
35313
35718
  }
35314
35719
  }
35315
35720
 
@@ -35388,6 +35793,68 @@ a.cds--side-nav__link--current::before {
35388
35793
  position: absolute;
35389
35794
  }
35390
35795
 
35796
+ .c4p--string-formatter {
35797
+ display: inline-block;
35798
+ text-align: left;
35799
+ }
35800
+
35801
+ .c4p--string-formatter--content {
35802
+ display: inline-block;
35803
+ text-align: left;
35804
+ }
35805
+
35806
+ .c4p--string-formatter--truncate {
35807
+ display: -webkit-box;
35808
+ overflow: hidden;
35809
+ max-width: 80ch;
35810
+ -webkit-box-orient: vertical;
35811
+ -webkit-line-clamp: 1;
35812
+ }
35813
+
35814
+ .c4p--string-formatter__tooltip > button {
35815
+ border-width: 0;
35816
+ color: currentColor;
35817
+ font-size: inherit;
35818
+ font-weight: inherit;
35819
+ line-height: inherit;
35820
+ }
35821
+
35822
+ .cds--popover {
35823
+ max-width: 1rem;
35824
+ margin: 0 auto;
35825
+ }
35826
+
35827
+ .c4p--string-formatter .cds--popover-content {
35828
+ max-inline-size: 20rem;
35829
+ }
35830
+
35831
+ .c4p--string-formatter .cds--popover--left .cds--popover,
35832
+ .c4p--string-formatter .cds--popover--left-bottom .cds--popover,
35833
+ .c4p--string-formatter .cds--popover--left-top .cds--popover {
35834
+ margin: 0;
35835
+ }
35836
+
35837
+ .c4p--string-formatter .cds--popover--right .cds--popover,
35838
+ .c4p--string-formatter .cds--popover--right-bottom .cds--popover,
35839
+ .c4p--string-formatter .cds--popover--right-top .cds--popover {
35840
+ margin-right: 0;
35841
+ margin-left: auto;
35842
+ }
35843
+
35844
+ .c4p--string-formatter .cds--popover--top .cds--popover-caret,
35845
+ .c4p--string-formatter .cds--popover--top-left .cds--popover-caret,
35846
+ .c4p--string-formatter .cds--popover--top-right .cds--popover-caret {
35847
+ /* stylelint-disable-next-line declaration-no-important */
35848
+ inset-block-start: -1px !important;
35849
+ }
35850
+
35851
+ .c4p--string-formatter .cds--popover--bottom .cds--popover-caret,
35852
+ .c4p--string-formatter .cds--popover--bottom-left .cds--popover-caret,
35853
+ .c4p--string-formatter .cds--popover--bottom-right .cds--popover-caret {
35854
+ /* stylelint-disable-next-line declaration-no-important */
35855
+ inset-block-end: -1px !important;
35856
+ }
35857
+
35391
35858
  .c4p--user-avatar {
35392
35859
  position: relative;
35393
35860
  display: flex;
@@ -35397,10 +35864,15 @@ a.cds--side-nav__link--current::before {
35397
35864
  justify-content: center;
35398
35865
  border: 0.5px solid transparent;
35399
35866
  border-radius: 100%;
35867
+ color: var(--cds-text-inverse, #ffffff);
35400
35868
  outline: none;
35401
35869
  outline-offset: 3px;
35402
35870
  }
35403
35871
 
35872
+ .c4p--user-avatar svg {
35873
+ color: var(--cds-icon-inverse, #ffffff);
35874
+ }
35875
+
35404
35876
  .c4p--user-avatar__tooltip:focus-within .c4p--user-avatar {
35405
35877
  outline: 2px solid var(--cds-focus, #0f62fe);
35406
35878
  }
@@ -35413,4 +35885,40 @@ a.cds--side-nav__link--current::before {
35413
35885
  background-color: #0072c3;
35414
35886
  }
35415
35887
 
35888
+ .c4p--user-avatar--xl {
35889
+ width: 4rem;
35890
+ height: 4rem;
35891
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
35892
+ font-weight: var(--cds-heading-04-font-weight, 400);
35893
+ line-height: var(--cds-heading-04-line-height, 1.28572);
35894
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
35895
+ }
35896
+
35897
+ .c4p--user-avatar--lg {
35898
+ width: 3rem;
35899
+ height: 3rem;
35900
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
35901
+ font-weight: var(--cds-heading-03-font-weight, 400);
35902
+ line-height: var(--cds-heading-03-line-height, 1.4);
35903
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
35904
+ }
35905
+
35906
+ .c4p--user-avatar--md {
35907
+ width: 2rem;
35908
+ height: 2rem;
35909
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
35910
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
35911
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
35912
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
35913
+ }
35914
+
35915
+ .c4p--user-avatar--sm {
35916
+ width: 1.5rem;
35917
+ height: 1.5rem;
35918
+ font-size: var(--cds-label-01-font-size, 0.75rem);
35919
+ font-weight: var(--cds-label-01-font-weight, 400);
35920
+ line-height: var(--cds-label-01-line-height, 1.33333);
35921
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
35922
+ }
35923
+
35416
35924
  /*# sourceMappingURL=index.css.map */