@carbon/ibm-products 2.54.0-canary.6 → 2.54.0-canary.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (341) hide show
  1. package/css/index-full-carbon.css +1352 -681
  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 +974 -59
  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 +597 -557
  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 +678 -562
  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/_rollupPluginBabelHelpers.js +1 -1
  18. package/es/components/APIKeyModal/APIKeyDownloader.d.ts +1 -1
  19. package/es/components/APIKeyModal/APIKeyDownloader.js +1 -1
  20. package/es/components/APIKeyModal/APIKeyModal.d.ts +13 -0
  21. package/es/components/APIKeyModal/APIKeyModal.js +85 -38
  22. package/es/components/APIKeyModal/APIKeyModal.types.d.ts +21 -3
  23. package/es/components/AboutModal/AboutModal.js +3 -6
  24. package/es/components/AddSelect/hooks/useFocus.js +1 -2
  25. package/es/components/AddSelect/hooks/useParentSelect.js +1 -2
  26. package/es/components/AddSelect/hooks/usePath.js +1 -2
  27. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +18 -9
  28. package/es/components/Card/Card.d.ts +3 -3
  29. package/es/components/Card/Card.js +23 -18
  30. package/es/components/Card/CardHeader.d.ts +7 -7
  31. package/es/components/Card/CardHeader.js +14 -12
  32. package/es/components/Checklist/Checklist.js +1 -1
  33. package/es/components/Checklist/ChecklistIcon.js +1 -1
  34. package/es/components/Coachmark/Coachmark.d.ts +5 -0
  35. package/es/components/Coachmark/Coachmark.js +11 -3
  36. package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts +5 -0
  37. package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +19 -5
  38. package/es/components/CoachmarkStack/CoachmarkStackHome.d.ts +4 -0
  39. package/es/components/CoachmarkStack/CoachmarkStackHome.js +18 -6
  40. package/es/components/ConditionBuilder/ConditionBuilderConnector/GroupConnector.js +1 -2
  41. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js +1 -5
  42. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js +5 -5
  43. package/es/components/ConditionBuilder/utils/util.js +0 -4
  44. package/es/components/CreateTearsheet/CreateTearsheet.d.ts +1 -1
  45. package/es/components/CreateTearsheet/CreateTearsheet.js +2 -2
  46. package/es/components/CreateTearsheet/CreateTearsheetStep.js +6 -3
  47. package/es/components/Datagrid/Datagrid/Datagrid.d.ts +1 -0
  48. package/es/components/Datagrid/Datagrid/Datagrid.js +7 -0
  49. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +2 -2
  50. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +1 -2
  51. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +1 -2
  52. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +1 -2
  53. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +1 -2
  54. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -2
  55. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +2 -3
  56. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +2 -3
  57. package/es/components/Datagrid/Datagrid/addons/Filtering/OverflowCheckboxes.js +1 -2
  58. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js +1 -2
  59. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +1 -2
  60. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +1 -2
  61. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +1 -2
  62. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +1 -2
  63. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -2
  64. package/es/components/Datagrid/Datagrid/addons/stateReducer.js +1 -1
  65. package/es/components/Datagrid/useCustomizeColumns.js +4 -4
  66. package/es/components/Datagrid/useDatagrid.js +2 -2
  67. package/es/components/Datagrid/useDefaultStringRenderer.js +1 -2
  68. package/es/components/Datagrid/useEditableCell.js +1 -2
  69. package/es/components/Datagrid/useFlexResize.js +1 -2
  70. package/es/components/Datagrid/useFloatingScroll.js +1 -2
  71. package/es/components/Datagrid/useNestedRowExpander.js +1 -2
  72. package/es/components/Datagrid/useParentDimensions.js +1 -2
  73. package/es/components/Datagrid/useResizeTable.js +1 -2
  74. package/es/components/Datagrid/useRowExpander.js +1 -2
  75. package/es/components/Datagrid/useRowRenderer.js +1 -2
  76. package/es/components/Datagrid/useRowSize.js +1 -2
  77. package/es/components/Datagrid/useSkeletonRows.js +1 -2
  78. package/es/components/DecoratorDualButton/DecoratorDualButton.d.ts +1 -0
  79. package/es/components/DecoratorDualButton/DecoratorDualButton.js +5 -0
  80. package/es/components/DecoratorLink/DecoratorLink.d.ts +1 -0
  81. package/es/components/DecoratorLink/DecoratorLink.js +5 -0
  82. package/es/components/DecoratorSingleButton/DecoratorSingleButton.d.ts +1 -0
  83. package/es/components/DecoratorSingleButton/DecoratorSingleButton.js +5 -0
  84. package/es/components/DescriptionList/DescriptionList.d.ts +1 -0
  85. package/es/components/DescriptionList/DescriptionList.js +5 -0
  86. package/es/components/EditFullPage/EditFullPage.d.ts +2 -0
  87. package/es/components/EditFullPage/EditFullPage.js +8 -0
  88. package/es/components/EditSidePanel/EditSidePanel.d.ts +2 -0
  89. package/es/components/EditSidePanel/EditSidePanel.js +8 -0
  90. package/es/components/EditTearsheet/EditTearsheet.d.ts +2 -0
  91. package/es/components/EditTearsheet/EditTearsheet.js +8 -0
  92. package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.d.ts +2 -0
  93. package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.js +8 -0
  94. package/es/components/EditUpdateCards/EditUpdateCards.d.ts +2 -0
  95. package/es/components/EditUpdateCards/EditUpdateCards.js +8 -0
  96. package/es/components/EmptyStates/EmptyStateIllustration.js +1 -2
  97. package/es/components/EmptyStates/EmptyStateV2.d.ts +1 -0
  98. package/es/components/EmptyStates/EmptyStateV2.js +7 -0
  99. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -1
  100. package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -1
  101. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +1 -1
  102. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -1
  103. package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +1 -1
  104. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +1 -1
  105. package/es/components/EmptyStates/assets/ErrorIllustration.js +3 -5
  106. package/es/components/EmptyStates/assets/NoDataIllustration.js +3 -5
  107. package/es/components/EmptyStates/assets/NoTagsIllustration.js +3 -5
  108. package/es/components/EmptyStates/assets/NotFoundIllustration.js +3 -5
  109. package/es/components/EmptyStates/assets/NotificationsIllustration.js +3 -5
  110. package/es/components/EmptyStates/assets/UnauthorizedIllustration.js +3 -5
  111. package/es/components/ExpressiveCard/ExpressiveCard.d.ts +5 -5
  112. package/es/components/ExpressiveCard/ExpressiveCard.js +5 -5
  113. package/es/components/FilterPanel/FilterPanel.d.ts +1 -0
  114. package/es/components/FilterPanel/FilterPanel.js +6 -0
  115. package/es/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.d.ts +1 -0
  116. package/es/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js +5 -0
  117. package/es/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.d.ts +1 -0
  118. package/es/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js +5 -1
  119. package/es/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.d.ts +1 -0
  120. package/es/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js +5 -0
  121. package/es/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.d.ts +1 -0
  122. package/es/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js +5 -0
  123. package/es/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.d.ts +1 -0
  124. package/es/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.js +5 -0
  125. package/es/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.d.ts +1 -0
  126. package/es/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js +5 -1
  127. package/es/components/FullPageError/FullPageError.js +7 -7
  128. package/es/components/FullPageError/assets/Error403SVG.d.ts +1 -3
  129. package/es/components/FullPageError/assets/Error403SVG.js +4 -6
  130. package/es/components/FullPageError/assets/Error404SVG.d.ts +1 -3
  131. package/es/components/FullPageError/assets/Error404SVG.js +4 -6
  132. package/es/components/FullPageError/assets/ErrorGenericSVG.d.ts +1 -3
  133. package/es/components/FullPageError/assets/ErrorGenericSVG.js +4 -6
  134. package/es/components/InlineTip/InlineTip.d.ts +5 -0
  135. package/es/components/InlineTip/InlineTip.js +17 -8
  136. package/es/components/Nav/Nav.d.ts +3 -0
  137. package/es/components/Nav/Nav.js +8 -0
  138. package/es/components/Nav/NavItemLink.js +1 -2
  139. package/es/components/ProductiveCard/ProductiveCard.d.ts +3 -3
  140. package/es/components/ProductiveCard/ProductiveCard.js +4 -4
  141. package/es/components/SidePanel/SidePanel.d.ts +6 -1
  142. package/es/components/SidePanel/SidePanel.js +27 -14
  143. package/es/components/StatusIndicator/StatusIndicator.d.ts +1 -0
  144. package/es/components/StatusIndicator/StatusIndicator.js +5 -0
  145. package/es/components/StatusIndicator/StatusIndicatorStep.d.ts +1 -0
  146. package/es/components/StatusIndicator/StatusIndicatorStep.js +5 -0
  147. package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +3 -1
  148. package/es/components/Tearsheet/TearsheetShell.js +3 -24
  149. package/es/global/js/hooks/useFocus.d.ts +1 -0
  150. package/es/global/js/hooks/useFocus.js +21 -1
  151. package/es/global/js/hooks/usePrefersReducedMotion.js +1 -2
  152. package/es/global/js/package-settings.d.ts +1 -1
  153. package/es/global/js/package-settings.js +1 -1
  154. package/es/index.js +1 -1
  155. package/es/settings.d.ts +1 -1
  156. package/lib/_virtual/_rollupPluginBabelHelpers.js +1 -1
  157. package/lib/components/APIKeyModal/APIKeyDownloader.d.ts +1 -1
  158. package/lib/components/APIKeyModal/APIKeyDownloader.js +1 -1
  159. package/lib/components/APIKeyModal/APIKeyModal.d.ts +13 -0
  160. package/lib/components/APIKeyModal/APIKeyModal.js +83 -34
  161. package/lib/components/APIKeyModal/APIKeyModal.types.d.ts +21 -3
  162. package/lib/components/AboutModal/AboutModal.js +2 -5
  163. package/lib/components/AddSelect/hooks/useFocus.js +1 -2
  164. package/lib/components/AddSelect/hooks/useParentSelect.js +1 -2
  165. package/lib/components/AddSelect/hooks/usePath.js +1 -2
  166. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +17 -8
  167. package/lib/components/Card/Card.d.ts +3 -3
  168. package/lib/components/Card/Card.js +22 -17
  169. package/lib/components/Card/CardHeader.d.ts +7 -7
  170. package/lib/components/Card/CardHeader.js +14 -12
  171. package/lib/components/Checklist/ChecklistChart.js +7 -7
  172. package/lib/components/Coachmark/Coachmark.d.ts +5 -0
  173. package/lib/components/Coachmark/Coachmark.js +11 -3
  174. package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts +5 -0
  175. package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +18 -4
  176. package/lib/components/CoachmarkStack/CoachmarkStackHome.d.ts +4 -0
  177. package/lib/components/CoachmarkStack/CoachmarkStackHome.js +18 -6
  178. package/lib/components/ConditionBuilder/ConditionBuilderConnector/GroupConnector.js +1 -2
  179. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js +1 -5
  180. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js +5 -5
  181. package/lib/components/ConditionBuilder/utils/util.js +0 -4
  182. package/lib/components/CreateTearsheet/CreateTearsheet.d.ts +1 -1
  183. package/lib/components/CreateTearsheet/CreateTearsheet.js +2 -2
  184. package/lib/components/CreateTearsheet/CreateTearsheetStep.js +5 -2
  185. package/lib/components/Datagrid/Datagrid/Datagrid.d.ts +1 -0
  186. package/lib/components/Datagrid/Datagrid/Datagrid.js +7 -0
  187. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +2 -2
  188. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +1 -2
  189. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +1 -2
  190. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +1 -2
  191. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +1 -2
  192. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -2
  193. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +1 -2
  194. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +1 -2
  195. package/lib/components/Datagrid/Datagrid/addons/Filtering/OverflowCheckboxes.js +1 -2
  196. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js +1 -2
  197. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +1 -2
  198. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +1 -2
  199. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +1 -2
  200. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +1 -2
  201. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -2
  202. package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +1 -1
  203. package/lib/components/Datagrid/useColumnOrder.js +1 -1
  204. package/lib/components/Datagrid/useDefaultStringRenderer.js +1 -2
  205. package/lib/components/Datagrid/useEditableCell.js +1 -2
  206. package/lib/components/Datagrid/useFlexResize.js +1 -2
  207. package/lib/components/Datagrid/useFloatingScroll.js +1 -2
  208. package/lib/components/Datagrid/useNestedRowExpander.js +1 -2
  209. package/lib/components/Datagrid/useParentDimensions.js +1 -2
  210. package/lib/components/Datagrid/useResizeTable.js +1 -2
  211. package/lib/components/Datagrid/useRowExpander.js +1 -2
  212. package/lib/components/Datagrid/useRowRenderer.js +1 -2
  213. package/lib/components/Datagrid/useRowSize.js +1 -2
  214. package/lib/components/Datagrid/useSkeletonRows.js +1 -2
  215. package/lib/components/DecoratorDualButton/DecoratorDualButton.d.ts +1 -0
  216. package/lib/components/DecoratorDualButton/DecoratorDualButton.js +5 -0
  217. package/lib/components/DecoratorLink/DecoratorLink.d.ts +1 -0
  218. package/lib/components/DecoratorLink/DecoratorLink.js +5 -0
  219. package/lib/components/DecoratorSingleButton/DecoratorSingleButton.d.ts +1 -0
  220. package/lib/components/DecoratorSingleButton/DecoratorSingleButton.js +5 -0
  221. package/lib/components/DescriptionList/DescriptionList.d.ts +1 -0
  222. package/lib/components/DescriptionList/DescriptionList.js +5 -0
  223. package/lib/components/EditFullPage/EditFullPage.d.ts +2 -0
  224. package/lib/components/EditFullPage/EditFullPage.js +8 -0
  225. package/lib/components/EditSidePanel/EditSidePanel.d.ts +2 -0
  226. package/lib/components/EditSidePanel/EditSidePanel.js +8 -0
  227. package/lib/components/EditTearsheet/EditTearsheet.d.ts +2 -0
  228. package/lib/components/EditTearsheet/EditTearsheet.js +8 -0
  229. package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.d.ts +2 -0
  230. package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.js +8 -0
  231. package/lib/components/EditUpdateCards/EditUpdateCards.d.ts +2 -0
  232. package/lib/components/EditUpdateCards/EditUpdateCards.js +8 -0
  233. package/lib/components/EmptyStates/EmptyStateIllustration.js +1 -2
  234. package/lib/components/EmptyStates/EmptyStateV2.d.ts +1 -0
  235. package/lib/components/EmptyStates/EmptyStateV2.js +7 -0
  236. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -1
  237. package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -1
  238. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +1 -1
  239. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -1
  240. package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +1 -1
  241. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +1 -1
  242. package/lib/components/EmptyStates/assets/ErrorIllustration.js +2 -4
  243. package/lib/components/EmptyStates/assets/NoDataIllustration.js +2 -4
  244. package/lib/components/EmptyStates/assets/NoTagsIllustration.js +2 -4
  245. package/lib/components/EmptyStates/assets/NotFoundIllustration.js +2 -4
  246. package/lib/components/EmptyStates/assets/NotificationsIllustration.js +2 -4
  247. package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js +2 -4
  248. package/lib/components/ExpressiveCard/ExpressiveCard.d.ts +5 -5
  249. package/lib/components/ExpressiveCard/ExpressiveCard.js +5 -5
  250. package/lib/components/FilterPanel/FilterPanel.d.ts +1 -0
  251. package/lib/components/FilterPanel/FilterPanel.js +6 -0
  252. package/lib/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.d.ts +1 -0
  253. package/lib/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js +5 -0
  254. package/lib/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.d.ts +1 -0
  255. package/lib/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js +5 -1
  256. package/lib/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.d.ts +1 -0
  257. package/lib/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js +5 -0
  258. package/lib/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.d.ts +1 -0
  259. package/lib/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js +5 -0
  260. package/lib/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.d.ts +1 -0
  261. package/lib/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.js +5 -0
  262. package/lib/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.d.ts +1 -0
  263. package/lib/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js +5 -1
  264. package/lib/components/FullPageError/FullPageError.js +7 -7
  265. package/lib/components/FullPageError/assets/Error403SVG.d.ts +1 -3
  266. package/lib/components/FullPageError/assets/Error403SVG.js +4 -6
  267. package/lib/components/FullPageError/assets/Error404SVG.d.ts +1 -3
  268. package/lib/components/FullPageError/assets/Error404SVG.js +4 -6
  269. package/lib/components/FullPageError/assets/ErrorGenericSVG.d.ts +1 -3
  270. package/lib/components/FullPageError/assets/ErrorGenericSVG.js +4 -6
  271. package/lib/components/InlineTip/InlineTip.d.ts +5 -0
  272. package/lib/components/InlineTip/InlineTip.js +17 -8
  273. package/lib/components/Nav/Nav.d.ts +3 -0
  274. package/lib/components/Nav/Nav.js +8 -0
  275. package/lib/components/Nav/NavItemLink.js +1 -2
  276. package/lib/components/ProductiveCard/ProductiveCard.d.ts +3 -3
  277. package/lib/components/ProductiveCard/ProductiveCard.js +4 -4
  278. package/lib/components/SidePanel/SidePanel.d.ts +6 -1
  279. package/lib/components/SidePanel/SidePanel.js +27 -14
  280. package/lib/components/StatusIndicator/StatusIndicator.d.ts +1 -0
  281. package/lib/components/StatusIndicator/StatusIndicator.js +5 -0
  282. package/lib/components/StatusIndicator/StatusIndicatorStep.d.ts +1 -0
  283. package/lib/components/StatusIndicator/StatusIndicatorStep.js +5 -0
  284. package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +3 -1
  285. package/lib/components/Tearsheet/TearsheetShell.js +2 -23
  286. package/lib/global/js/hooks/useFocus.d.ts +1 -0
  287. package/lib/global/js/hooks/useFocus.js +21 -0
  288. package/lib/global/js/hooks/usePrefersReducedMotion.js +1 -2
  289. package/lib/global/js/package-settings.d.ts +1 -1
  290. package/lib/global/js/package-settings.js +1 -1
  291. package/lib/index.js +109 -109
  292. package/lib/settings.d.ts +1 -1
  293. package/package.json +10 -10
  294. package/scss/components/APIKeyModal/_api-key-modal.scss +4 -0
  295. package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +3 -3
  296. package/scss/components/Card/_card.scss +19 -5
  297. package/scss/components/Coachmark/_coachmark-overlay.scss +2 -2
  298. package/scss/components/Coachmark/_coachmark-tagline.scss +1 -1
  299. package/scss/components/CoachmarkBeacon/_coachmark-beacon.scss +3 -3
  300. package/scss/components/CoachmarkStack/_coachmark-stack.scss +2 -2
  301. package/scss/components/ConditionBuilder/styles/_conditionBuilderItem.scss +7 -7
  302. package/scss/components/CreateInfluencer/_create-influencer.scss +2 -2
  303. package/scss/components/CreateTearsheet/_create-tearsheet.scss +1 -2
  304. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +4 -4
  305. package/scss/components/Datagrid/styles/_datagrid.scss +21 -14
  306. package/scss/components/Datagrid/styles/_draggableElement.scss +2 -2
  307. package/scss/components/Datagrid/styles/_useColumnRightAlign.scss +1 -1
  308. package/scss/components/Datagrid/styles/_useExpandedRow.scss +1 -1
  309. package/scss/components/Datagrid/styles/_useInlineEdit.scss +1 -1
  310. package/scss/components/Datagrid/styles/_useNestedRows.scss +2 -2
  311. package/scss/components/Datagrid/styles/_useStickyColumn.scss +2 -2
  312. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss +1 -1
  313. package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss +1 -1
  314. package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +1 -1
  315. package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +1 -2
  316. package/scss/components/DecoratorBase/_decorator-base-mixins.scss +1 -1
  317. package/scss/components/DecoratorBase/_decorator-base.scss +3 -3
  318. package/scss/components/DecoratorDualButton/_decorator-dual-button.scss +1 -1
  319. package/scss/components/DecoratorSingleButton/_decorator-single-button.scss +1 -1
  320. package/scss/components/EditTearsheet/_edit-tearsheet.scss +1 -2
  321. package/scss/components/EditUpdateCards/_edit-update-cards.scss +7 -7
  322. package/scss/components/FullPageError/_full-page-error.scss +1 -1
  323. package/scss/components/GetStartedCard/_get-started-card.scss +1 -1
  324. package/scss/components/Guidebanner/_guidebanner.scss +4 -4
  325. package/scss/components/HTTPErrors/_http-errors.scss +1 -1
  326. package/scss/components/InlineTip/_inline-tip.scss +4 -4
  327. package/scss/components/InterstitialScreen/_interstitial-screen.scss +6 -6
  328. package/scss/components/NonLinearReading/_non-linear-reading.scss +2 -2
  329. package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -3
  330. package/scss/components/OptionsTile/_options-tile.scss +6 -8
  331. package/scss/components/PageHeader/_page-header.scss +20 -13
  332. package/scss/components/ProductiveCard/_productive-card.scss +2 -2
  333. package/scss/components/SidePanel/_side-panel.scss +24 -17
  334. package/scss/components/StatusIcon/_status-icon.scss +9 -7
  335. package/scss/components/StatusIndicator/_status-indicator.scss +1 -1
  336. package/scss/components/Tearsheet/_tearsheet.scss +5 -5
  337. package/scss/components/UserAvatar/_user-avatar.scss +5 -3
  338. package/scss/components/UserProfileImage/_user-profile-image.scss +6 -4
  339. package/scss/components/WebTerminal/_web-terminal.scss +2 -2
  340. package/scss/components/_index-released-only.scss +1 -0
  341. package/telemetry.yml +3 -0
@@ -126,6 +126,10 @@ p.c4p--about-modal__copyright-text:first-child {
126
126
  fill: var(--cds-button-danger-primary, #da1e28);
127
127
  }
128
128
 
129
+ .c4p--apikey-modal__checkmark-icon {
130
+ fill: var(--cds-button-primary, #0f62fe);
131
+ }
132
+
129
133
  .c4p--action-set {
130
134
  align-items: stretch;
131
135
  justify-content: flex-end;
@@ -2585,7 +2589,7 @@ p.c4p--about-modal__copyright-text:first-child {
2585
2589
  left: 0;
2586
2590
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2587
2591
  }
2588
- .c4p--side-panel.c4p--side-panel.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel.c4p--side-panel--has-ai-label {
2592
+ .c4p--side-panel.c4p--side-panel.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel.c4p--side-panel--has-ai-label, .c4p--side-panel.c4p--side-panel.c4p--side-panel--has-decorator {
2589
2593
  border-color: transparent;
2590
2594
  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
2591
2595
  }
@@ -2593,7 +2597,7 @@ p.c4p--about-modal__copyright-text:first-child {
2593
2597
  --c4p--side-panel--title-padding-bottom: 1rem;
2594
2598
  position: sticky;
2595
2599
  z-index: 4;
2596
- /* stylelint-disable-next-line carbon/layout-token-use */
2600
+ /* stylelint-disable-next-line carbon/layout-use */
2597
2601
  top: calc(-1px * var(--c4p--side-panel--scroll-animation-distance));
2598
2602
  min-height: 2.5rem;
2599
2603
  padding: 1rem;
@@ -2650,10 +2654,10 @@ p.c4p--about-modal__copyright-text:first-child {
2650
2654
  .c4p--side-panel .c4p--side-panel__header:not(.c4p--side-panel__header--has-title)::before {
2651
2655
  background-color: transparent;
2652
2656
  }
2653
- .c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar), .c4p--side-panel.c4p--side-panel--has-action-toolbar, .c4p--side-panel.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel--has-ai-label {
2657
+ .c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar), .c4p--side-panel.c4p--side-panel--has-action-toolbar, .c4p--side-panel.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel--has-ai-label, .c4p--side-panel.c4p--side-panel--has-decorator {
2654
2658
  --c4p--side-panel--title-padding-right: 4rem;
2655
2659
  }
2656
- .c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar).c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar).c4p--side-panel--has-ai-label, .c4p--side-panel.c4p--side-panel--has-action-toolbar.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel--has-action-toolbar.c4p--side-panel--has-ai-label {
2660
+ .c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar).c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar).c4p--side-panel--has-ai-label, .c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar).c4p--side-panel--has-decorator, .c4p--side-panel.c4p--side-panel--has-action-toolbar.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel--has-action-toolbar.c4p--side-panel--has-ai-label, .c4p--side-panel.c4p--side-panel--has-action-toolbar.c4p--side-panel--has-decorator {
2657
2661
  --c4p--side-panel--title-padding-right: 5rem;
2658
2662
  }
2659
2663
  .c4p--side-panel .c4p--side-panel__animated-scroll-wrapper {
@@ -2663,7 +2667,7 @@ p.c4p--about-modal__copyright-text:first-child {
2663
2667
  .c4p--side-panel .c4p--side-panel__title {
2664
2668
  position: sticky;
2665
2669
  z-index: 4;
2666
- /* stylelint-disable-next-line carbon/layout-token-use */
2670
+ /* stylelint-disable-next-line carbon/layout-use */
2667
2671
  top: var(--c4p--side-panel--title-stop);
2668
2672
  /* border-bottom used instead of padding which wrapped text shows through */
2669
2673
  border-bottom: var(--c4p--side-panel--title-padding-bottom) solid transparent;
@@ -2676,14 +2680,14 @@ p.c4p--about-modal__copyright-text:first-child {
2676
2680
  letter-spacing: var(--cds-heading-03-letter-spacing, 0);
2677
2681
  display: -webkit-box;
2678
2682
  overflow: hidden;
2679
- /* stylelint-disable-next-line carbon/layout-token-use -- custom css property set below */
2683
+ /* stylelint-disable-next-line carbon/layout-use -- custom css property set below */
2680
2684
  padding-right: var(--c4p--side-panel--title-padding-right);
2681
2685
  -webkit-box-orient: vertical;
2682
2686
  -webkit-line-clamp: 2;
2683
2687
  opacity: calc(1 - var(--c4p--side-panel--scroll-animation-progress));
2684
2688
  }
2685
2689
  .c4p--side-panel .c4p--side-panel__title--no-label .c4p--side-panel__title-text {
2686
- /* stylelint-disable-next-line carbon/layout-token-use */
2690
+ /* stylelint-disable-next-line carbon/layout-use */
2687
2691
  transform: translateY(calc(-1 * 1rem * var(--c4p--side-panel--scroll-animation-progress)));
2688
2692
  }
2689
2693
  .c4p--side-panel .c4p--side-panel__header--no-title-animation .c4p--side-panel__title-text {
@@ -2707,17 +2711,16 @@ p.c4p--about-modal__copyright-text:first-child {
2707
2711
  letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
2708
2712
  display: -webkit-box;
2709
2713
  overflow: hidden;
2710
- /* stylelint-disable-next-line carbon/layout-token-use -- custom css property set below */
2714
+ /* stylelint-disable-next-line carbon/layout-use -- custom css property set below */
2711
2715
  padding-right: var(--c4p--side-panel--title-padding-right);
2712
2716
  -webkit-box-orient: vertical;
2713
2717
  -webkit-line-clamp: 2;
2714
2718
  position: absolute;
2715
- /* stylelint-disable-next-line carbon/layout-token-use */
2716
2719
  top: 0;
2717
2720
  opacity: var(--c4p--side-panel--scroll-animation-progress);
2718
2721
  }
2719
2722
  .c4p--side-panel .c4p--side-panel__title--no-label .c4p--side-panel__collapsed-title-text {
2720
- /* stylelint-disable-next-line carbon/layout-token-use */
2723
+ /* stylelint-disable-next-line carbon/layout-use */
2721
2724
  transform: translateY(calc(1rem * (1 - var(--c4p--side-panel--scroll-animation-progress))));
2722
2725
  }
2723
2726
  .c4p--side-panel .c4p--side-panel__subtitle-text {
@@ -2750,7 +2753,7 @@ p.c4p--about-modal__copyright-text:first-child {
2750
2753
  .c4p--side-panel .c4p--side-panel__header--has-action-toolbar + .c4p--side-panel__inner-content {
2751
2754
  padding-top: 0.5rem;
2752
2755
  }
2753
- .c4p--side-panel.c4p--side-panel--has-slug .c4p--side-panel--scrolls, .c4p--side-panel.c4p--side-panel--has-ai-label .c4p--side-panel--scrolls {
2756
+ .c4p--side-panel.c4p--side-panel--has-slug .c4p--side-panel--scrolls, .c4p--side-panel.c4p--side-panel--has-ai-label .c4p--side-panel--scrolls, .c4p--side-panel.c4p--side-panel--has-decorator .c4p--side-panel--scrolls {
2754
2757
  background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
2755
2758
  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
2756
2759
  }
@@ -2799,7 +2802,8 @@ p.c4p--about-modal__copyright-text:first-child {
2799
2802
  height: 2.5rem;
2800
2803
  }
2801
2804
  .c4p--side-panel .c4p--side-panel__slug-and-close,
2802
- .c4p--side-panel .c4p--side-panel__ai-label-and-close {
2805
+ .c4p--side-panel .c4p--side-panel__ai-label-and-close,
2806
+ .c4p--side-panel .c4p--side-panel__decorator-and-close {
2803
2807
  position: absolute;
2804
2808
  z-index: 10; /* must be higher than title container border bottom */
2805
2809
  top: 0;
@@ -2809,7 +2813,8 @@ p.c4p--about-modal__copyright-text:first-child {
2809
2813
  }
2810
2814
  @media (prefers-reduced-motion) {
2811
2815
  .c4p--side-panel .c4p--side-panel__slug-and-close,
2812
- .c4p--side-panel .c4p--side-panel__ai-label-and-close {
2816
+ .c4p--side-panel .c4p--side-panel__ai-label-and-close,
2817
+ .c4p--side-panel .c4p--side-panel__decorator-and-close {
2813
2818
  position: absolute;
2814
2819
  }
2815
2820
  }
@@ -2893,9 +2898,10 @@ p.c4p--about-modal__copyright-text:first-child {
2893
2898
  inset: 0;
2894
2899
  }
2895
2900
 
2901
+ /* stylelint-disable-next-line carbon/theme-token-use */
2896
2902
  .c4p--side-panel--has-slug + .c4p--side-panel__overlay,
2897
- .c4p--side-panel--has-ai-label + .c4p--side-panel__overlay {
2898
- /* stylelint-disable-next-line carbon/theme-token-use */
2903
+ .c4p--side-panel--has-ai-label + .c4p--side-panel__overlay,
2904
+ .c4p--side-panel--has-decorator + .c4p--side-panel__overlay {
2899
2905
  background-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5));
2900
2906
  }
2901
2907
 
@@ -3106,7 +3112,7 @@ p.c4p--about-modal__copyright-text:first-child {
3106
3112
  }
3107
3113
  .c4p--tearsheet.c4p--tearsheet--wide.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon, .c4p--tearsheet.c4p--tearsheet--wide.c4p--tearsheet--has-ai-label .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon {
3108
3114
  /* spacing 11 plus additional space for slug/close */
3109
- /* stylelint-disable-next-line carbon/layout-token-use */
3115
+ /* stylelint-disable-next-line carbon/layout-use */
3110
3116
  padding-inline-end: calc(8rem);
3111
3117
  }
3112
3118
  .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header-description {
@@ -3211,11 +3217,11 @@ p.c4p--about-modal__copyright-text:first-child {
3211
3217
  background: var(--cds-background, #ffffff);
3212
3218
  }
3213
3219
  .c4p--tearsheet.c4p--tearsheet--has-slug, .c4p--tearsheet.c4p--tearsheet--has-ai-label {
3214
- /* stylelint-disable-next-line carbon/theme-token-use */
3215
3220
  --overlay-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5));
3216
3221
  }
3217
3222
  .c4p--tearsheet.c4p--tearsheet--has-slug:not(.c4p--tearsheet--has-close) .cds--slug, .c4p--tearsheet.c4p--tearsheet--has-ai-label:not(.c4p--tearsheet--has-close) .cds--slug {
3218
3223
  inset-inline-end: 0;
3224
+ /* stylelint-disable-next-line carbon/layout-use */
3219
3225
  margin-block: 6px;
3220
3226
  margin-inline-end: 1rem;
3221
3227
  }
@@ -3407,7 +3413,7 @@ p.c4p--about-modal__copyright-text:first-child {
3407
3413
  }
3408
3414
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__head .c4p--datagrid__head-select-all.c4p--datagrid__checkbox-cell.c4p--datagrid__checkbox-cell-sticky-left {
3409
3415
  position: sticky;
3410
- z-index: 1;
3416
+ z-index: 10;
3411
3417
  left: 0;
3412
3418
  }
3413
3419
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
@@ -3417,7 +3423,7 @@ p.c4p--about-modal__copyright-text:first-child {
3417
3423
  }
3418
3424
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.cds--table-column-checkbox,
3419
3425
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.cds--table-column-checkbox {
3420
- /* stylelint-disable-next-line carbon/layout-token-use */
3426
+ /* stylelint-disable-next-line carbon/layout-use */
3421
3427
  padding-top: 0.6875rem;
3422
3428
  }
3423
3429
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.cds--table-column-checkbox.c4p--datagrid__checkbox-cell,
@@ -3482,7 +3488,6 @@ p.c4p--about-modal__copyright-text:first-child {
3482
3488
 
3483
3489
  /* This section to be removed after support for slug dropped - start */
3484
3490
  .c4p--datagrid th.c4p--datagrid__with-slug {
3485
- /* stylelint-disable-next-line carbon/theme-token-use */
3486
3491
  box-shadow: inset 0 1px var(--cds-ai-border-strong, #4589ff);
3487
3492
  }
3488
3493
 
@@ -3498,7 +3503,7 @@ p.c4p--about-modal__copyright-text:first-child {
3498
3503
  }
3499
3504
 
3500
3505
  .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row {
3501
- /* stylelint-disable-next-line carbon/theme-token-use */
3506
+ /* stylelint-disable-next-line carbon/theme-use */
3502
3507
  box-shadow: inset 1px 0 var(--cds-ai-border-strong, #4589ff);
3503
3508
  }
3504
3509
 
@@ -3523,7 +3528,6 @@ p.c4p--about-modal__copyright-text:first-child {
3523
3528
 
3524
3529
  /* This section to be removed after support for slug dropped - end */
3525
3530
  .c4p--datagrid th.c4p--datagrid__with-ai-label {
3526
- /* stylelint-disable-next-line carbon/theme-token-use */
3527
3531
  box-shadow: inset 0 1px var(--cds-ai-border-strong, #4589ff);
3528
3532
  }
3529
3533
 
@@ -3539,7 +3543,6 @@ p.c4p--about-modal__copyright-text:first-child {
3539
3543
  }
3540
3544
 
3541
3545
  .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__ai-label--row {
3542
- /* stylelint-disable-next-line carbon/theme-token-use */
3543
3546
  box-shadow: inset 1px 0 var(--cds-ai-border-strong, #4589ff);
3544
3547
  }
3545
3548
 
@@ -3652,15 +3655,21 @@ p.c4p--about-modal__copyright-text:first-child {
3652
3655
  /* stylelint-disable-next-line declaration-no-important */
3653
3656
  color: var(--cds-link-primary-hover, #0043ce) !important;
3654
3657
  }
3655
- .c4p--datagrid__grid-container .c4p--datagrid__carbon-row td {
3658
+ .c4p--datagrid__grid-container .c4p--datagrid__carbon-row .c4p--datagrid__left-sticky-column-cell,
3659
+ .c4p--datagrid__grid-container .c4p--datagrid__carbon-row .c4p--datagrid__right-sticky-column-cell,
3660
+ .c4p--datagrid__grid-container .c4p--datagrid__carbon-row .c4p--datagrid__checkbox-cell-sticky-left {
3656
3661
  /* stylelint-disable-next-line declaration-no-important */
3657
3662
  background-color: var(--cds-layer-01, #f4f4f4);
3658
3663
  }
3659
- .c4p--datagrid__grid-container .c4p--datagrid__carbon-row:hover td {
3664
+ .c4p--datagrid__grid-container .c4p--datagrid__carbon-row:hover .c4p--datagrid__left-sticky-column-cell,
3665
+ .c4p--datagrid__grid-container .c4p--datagrid__carbon-row:hover .c4p--datagrid__right-sticky-column-cell,
3666
+ .c4p--datagrid__grid-container .c4p--datagrid__carbon-row:hover .c4p--datagrid__checkbox-cell-sticky-left {
3660
3667
  /* stylelint-disable-next-line declaration-no-important */
3661
3668
  background-color: var(--cds-layer-hover-01, #e8e8e8);
3662
3669
  }
3663
- .c4p--datagrid__grid-container .cds--data-table--selected td {
3670
+ .c4p--datagrid__grid-container .cds--data-table--selected .c4p--datagrid__left-sticky-column-cell,
3671
+ .c4p--datagrid__grid-container .cds--data-table--selected .c4p--datagrid__right-sticky-column-cell,
3672
+ .c4p--datagrid__grid-container .cds--data-table--selected .c4p--datagrid__checkbox-cell-sticky-left {
3664
3673
  /* stylelint-disable-next-line declaration-no-important */
3665
3674
  background-color: var(--cds-layer-selected-01, #e0e0e0);
3666
3675
  }
@@ -3745,7 +3754,7 @@ p.c4p--about-modal__copyright-text:first-child {
3745
3754
  }
3746
3755
 
3747
3756
  .c4p--datagrid__resizableColumn:hover {
3748
- background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
3757
+ background-color: var(--cds-layer-selected-hover);
3749
3758
  }
3750
3759
  .c4p--datagrid__resizableColumn:hover .c4p--datagrid__resizer {
3751
3760
  border-right: 0.125rem solid var(--cds-border-strong-01, #8d8d8d);
@@ -3772,7 +3781,7 @@ p.c4p--about-modal__copyright-text:first-child {
3772
3781
  }
3773
3782
  .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
3774
3783
  position: sticky;
3775
- z-index: 1;
3784
+ z-index: 10;
3776
3785
  left: 0;
3777
3786
  background-color: var(--cds-layer-accent-01, #e0e0e0);
3778
3787
  }
@@ -3869,9 +3878,9 @@ p.c4p--about-modal__copyright-text:first-child {
3869
3878
  .c4p--datagrid__carbon-row-expanded.c4p--datagrid__carbon-row-expanded-hover-active::before {
3870
3879
  position: absolute;
3871
3880
  z-index: 2;
3872
- /* stylelint-disable-next-line carbon/layout-token-use */
3881
+ /* stylelint-disable-next-line carbon/layout-use */
3873
3882
  top: var(--c4p--datagrid--row-height);
3874
- /* stylelint-disable-next-line carbon/layout-token-use */
3883
+ /* stylelint-disable-next-line carbon/layout-use */
3875
3884
  left: calc(var(--c4p--datagrid--indicator-offset-amount) + 1rem);
3876
3885
  width: 1px;
3877
3886
  height: var(--c4p--datagrid--indicator-height);
@@ -4099,7 +4108,7 @@ p.c4p--about-modal__copyright-text:first-child {
4099
4108
 
4100
4109
  .c4p--datagrid .c4p--datagrid__col-resizer-range:focus + .c4p--datagrid__col-resize-indicator::after {
4101
4110
  position: absolute;
4102
- /* stylelint-disable-next-line carbon/layout-token-use */
4111
+ /* stylelint-disable-next-line carbon/layout-use */
4103
4112
  top: calc(var(--c4p--datagrid--row-height) - 20px);
4104
4113
  right: 0.25rem;
4105
4114
  width: 1px;
@@ -4166,7 +4175,7 @@ p.c4p--about-modal__copyright-text:first-child {
4166
4175
 
4167
4176
  .c4p--datagrid tr.c4p--datagrid__carbon-nested-row + :not(tr.c4p--datagrid__carbon-nested-row)::after {
4168
4177
  position: absolute;
4169
- /* stylelint-disable-next-line carbon/layout-token-use */
4178
+ /* stylelint-disable-next-line carbon/layout-use */
4170
4179
  top: -1px;
4171
4180
  left: 0;
4172
4181
  width: 100%;
@@ -4194,7 +4203,7 @@ p.c4p--about-modal__copyright-text:first-child {
4194
4203
  .cds--data-table .c4p--datagrid__carbon-nested-row:not(.c4p--datagrid__carbon-row-expandable):not(.c4p--datagrid__carbon-row-expandable--async) td.c4p--datagrid__cell:nth-of-type(2)::before,
4195
4204
  .cds--data-table .c4p--datagrid__carbon-nested-row td.c4p--datagrid__expandable-row-cell + td::before {
4196
4205
  position: absolute;
4197
- /* stylelint-disable-next-line carbon/layout-token-use */
4206
+ /* stylelint-disable-next-line carbon/layout-use */
4198
4207
  bottom: -1px;
4199
4208
  left: 0;
4200
4209
  width: 1rem;
@@ -4316,7 +4325,7 @@ p.c4p--about-modal__copyright-text:first-child {
4316
4325
 
4317
4326
  .c4p--datagrid__right-align-cell-renderer {
4318
4327
  width: 100%;
4319
- /* stylelint-disable-next-line carbon/layout-token-use */
4328
+ /* stylelint-disable-next-line carbon/layout-use */
4320
4329
  padding-right: 23px;
4321
4330
  text-align: right;
4322
4331
  }
@@ -4369,7 +4378,7 @@ p.c4p--about-modal__copyright-text:first-child {
4369
4378
  .c4p--datagrid__left-sticky-column-header {
4370
4379
  /* stylelint-disable-next-line declaration-no-important */
4371
4380
  position: sticky !important;
4372
- z-index: 1;
4381
+ z-index: 10;
4373
4382
  left: 0;
4374
4383
  border-right: 1px solid var(--cds-border-subtle);
4375
4384
  }
@@ -4398,7 +4407,7 @@ p.c4p--about-modal__copyright-text:first-child {
4398
4407
 
4399
4408
  .c4p--datagrid__select-all-toggle-on.c4p--datagrid__select-all-sticky-left {
4400
4409
  position: sticky;
4401
- z-index: 1;
4410
+ z-index: 10;
4402
4411
  left: 0;
4403
4412
  }
4404
4413
 
@@ -4519,8 +4528,7 @@ p.c4p--about-modal__copyright-text:first-child {
4519
4528
  }
4520
4529
 
4521
4530
  .c4p--datagrid .cds--popover--bottom-right.c4p--datagrid__row-height-settings-popover .cds--popover-caret {
4522
- /* stylelint-disable-next-line carbon/layout-token-use */
4523
- left: -4px;
4531
+ left: -0.25rem;
4524
4532
  }
4525
4533
 
4526
4534
  .c4p--datagrid__row-size-toggle-tip-button.cds--toggletip-button {
@@ -4679,7 +4687,7 @@ p.c4p--about-modal__copyright-text:first-child {
4679
4687
  position: relative;
4680
4688
  z-index: 0;
4681
4689
  overflow: auto;
4682
- padding: 0 1rem 4rem 1rem;
4690
+ padding: 0 1rem 4rem;
4683
4691
  overscroll-behavior: contain;
4684
4692
  }
4685
4693
 
@@ -4808,7 +4816,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
4808
4816
 
4809
4817
  .c4p--datagrid .c4p--datagrid__expanded-row-content::before {
4810
4818
  position: absolute;
4811
- /* stylelint-disable-next-line carbon/layout-token-use */
4819
+ /* stylelint-disable-next-line carbon/layout-use */
4812
4820
  top: -1px;
4813
4821
  right: 0;
4814
4822
  width: calc(100% - 3rem);
@@ -4889,7 +4897,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
4889
4897
  width: 100%;
4890
4898
  height: 3rem;
4891
4899
  border: 2px dashed var(--cds-focus, #0f62fe);
4892
- /* stylelint-disable-next-line carbon/theme-token-use */
4900
+ /* stylelint-disable-next-line carbon/theme-use */
4893
4901
  background-color: #edf5ff;
4894
4902
  }
4895
4903
 
@@ -4936,7 +4944,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
4936
4944
  width: 100%;
4937
4945
  align-items: center;
4938
4946
  padding-left: 1rem;
4939
- /* stylelint-disable-next-line carbon/type-token-use */
4947
+ /* stylelint-disable-next-line carbon/type-use */
4940
4948
  line-height: 1;
4941
4949
  transition-property: opacity;
4942
4950
  }
@@ -5145,7 +5153,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
5145
5153
  }
5146
5154
 
5147
5155
  .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
5148
- /* stylelint-disable-next-line carbon/theme-token-use */
5156
+ /* stylelint-disable-next-line carbon/theme-use */
5149
5157
  outline: 0.125rem solid var(--cds-focus, #0f62fe);
5150
5158
  outline-offset: calc(-1 * 0.125rem);
5151
5159
  }
@@ -5818,25 +5826,38 @@ th.c4p--datagrid__select-all-toggle-on.button {
5818
5826
  position: relative;
5819
5827
  }
5820
5828
 
5821
- .c4p--card .cds--slug {
5829
+ .c4p--card .cds--slug,
5830
+ .c4p--card .cds--ai-label {
5831
+ position: absolute;
5832
+ top: 1rem;
5833
+ right: 1rem;
5834
+ }
5835
+
5836
+ .c4p--card__header__inner-wrapper--decorator {
5822
5837
  position: absolute;
5823
5838
  top: 1rem;
5824
5839
  right: 1rem;
5825
5840
  }
5841
+ .c4p--card__header__inner-wrapper--decorator .cds--slug,
5842
+ .c4p--card__header__inner-wrapper--decorator .cds--ai-label {
5843
+ position: relative;
5844
+ top: unset;
5845
+ right: unset;
5846
+ }
5826
5847
 
5827
5848
  .c4p--card__header-container--has-slug,
5828
- .c4p--card__header-container--has-ai-label {
5849
+ .c4p--card__header-container--has-decorator {
5829
5850
  width: 100%;
5830
5851
  padding-right: 2rem;
5831
5852
  }
5832
5853
 
5833
5854
  .c4p--card__header-container--has-slug.c4p--card__header-container--has-actions,
5834
- .c4p--card__header-container--has-ai-label.c4p--card__header-container--has-actions {
5855
+ .c4p--card__header-container--has-decorator.c4p--card__header-container--has-actions {
5835
5856
  padding-right: 2.5rem;
5836
5857
  }
5837
5858
 
5838
5859
  .c4p--card__header-container--has-slug.c4p--card__header-container--large-tile-or-label,
5839
- .c4p--card__header-container--has-ai-label.c4p--card__header-container--large-tile-or-label {
5860
+ .c4p--card__header-container--has-decorator.c4p--card__header-container--large-tile-or-label {
5840
5861
  padding-right: 3rem;
5841
5862
  }
5842
5863
 
@@ -5932,7 +5953,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
5932
5953
  }
5933
5954
  @media (min-width: 42rem) {
5934
5955
  .c4p--full-page-error__svg-container {
5935
- padding: auto 0.5rem 5rem 0.5rem;
5956
+ padding: auto 0.5rem 5rem;
5936
5957
  }
5937
5958
  }
5938
5959
 
@@ -6070,7 +6091,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
6070
6091
  }
6071
6092
  }
6072
6093
 
6073
- /* stylelint-disable carbon/theme-token-use */
6094
+ /* stylelint-disable carbon/theme-use */
6074
6095
  .c4p--http-errors-404__prefix-cls-1 {
6075
6096
  fill: none;
6076
6097
  }
@@ -8848,8 +8869,9 @@ button.c4p--add-select__global-filter-toggle--open {
8848
8869
  text-overflow: ellipsis;
8849
8870
  }
8850
8871
 
8851
- .c4p--breadcrumb-with-overflow__overflow-menu-options.c4p--breadcrumb-with-overflow__overflow-menu-options {
8852
- z-index: 8000;
8872
+ .c4p--breadcrumb-with-overflow__overflow-menu {
8873
+ /* stylelint-disable-next-line carbon/type-use */
8874
+ line-height: 0;
8853
8875
  }
8854
8876
 
8855
8877
  .c4p--tag-set.c4p--tag-set {
@@ -9009,25 +9031,25 @@ button.c4p--add-select__global-filter-toggle--open {
9009
9031
 
9010
9032
  @keyframes background-appear {
9011
9033
  from {
9012
- /* stylelint-disable-next-line carbon/theme-token-use */
9034
+ /* stylelint-disable-next-line carbon/theme-use */
9013
9035
  background-color: var(--from-color);
9014
9036
  }
9015
9037
  to {
9016
- /* stylelint-disable-next-line carbon/theme-token-use */
9038
+ /* stylelint-disable-next-line carbon/theme-use */
9017
9039
  background-color: var(--to-color);
9018
9040
  }
9019
9041
  }
9020
9042
  @keyframes background-and-shadow-appear {
9021
9043
  from {
9022
- /* stylelint-disable-next-line carbon/theme-token-use */
9044
+ /* stylelint-disable-next-line carbon/theme-use */
9023
9045
  background-color: var(--from-color);
9024
- /* stylelint-disable-next-line carbon/theme-token-use */
9046
+ /* stylelint-disable-next-line carbon/theme-use */
9025
9047
  box-shadow: 0 1px 0 var(--from-color);
9026
9048
  }
9027
9049
  to {
9028
- /* stylelint-disable-next-line carbon/theme-token-use */
9050
+ /* stylelint-disable-next-line carbon/theme-use */
9029
9051
  background-color: var(--to-color);
9030
- /* stylelint-disable-next-line carbon/theme-token-use */
9052
+ /* stylelint-disable-next-line carbon/theme-use */
9031
9053
  box-shadow: 0 1px 0 var(--to-color-shadow);
9032
9054
  }
9033
9055
  }
@@ -9037,7 +9059,7 @@ button.c4p--add-select__global-filter-toggle--open {
9037
9059
  /* z-index used to raise above any position relative content as per Carbon header */
9038
9060
  /* dropped 1 below Carbon header so as not to overlay the side panel */
9039
9061
  z-index: 7999;
9040
- /* stylelint-disable-next-line carbon/layout-token-use */
9062
+ /* stylelint-disable-next-line carbon/layout-use */
9041
9063
  top: var(--c4p--page-header--header-top);
9042
9064
  display: inline-block; /* cause top/bottom margin to reserve space */
9043
9065
  width: 100%;
@@ -9348,7 +9370,7 @@ button.c4p--add-select__global-filter-toggle--open {
9348
9370
  }
9349
9371
  .c4p--page-header .c4p--page-header__title-icon {
9350
9372
  margin-right: 0.75rem;
9351
- transform: translateY(-2px);
9373
+ transform: translateY(-0.125rem);
9352
9374
  vertical-align: middle;
9353
9375
  }
9354
9376
  .c4p--page-header .c4p--page-header__page-actions {
@@ -9529,6 +9551,10 @@ button.c4p--add-select__global-filter-toggle--open {
9529
9551
  z-index: 7999;
9530
9552
  }
9531
9553
 
9554
+ .c4p--page-header__button-set-menu-options > button.cds--menu-button__trigger {
9555
+ min-inline-size: 0;
9556
+ }
9557
+
9532
9558
  .c4p--card__productive {
9533
9559
  display: flex;
9534
9560
  flex-direction: column;
@@ -11335,4 +11361,893 @@ button.c4p--add-select__global-filter-toggle--open {
11335
11361
  width: calc(100vw - 40rem);
11336
11362
  }
11337
11363
 
11364
+ :root {
11365
+ --cds-layer: var(--cds-layer-01, #f4f4f4);
11366
+ --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
11367
+ --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
11368
+ --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
11369
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
11370
+ --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
11371
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
11372
+ --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
11373
+ --cds-field: var(--cds-field-01, #f4f4f4);
11374
+ --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
11375
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
11376
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
11377
+ --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
11378
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
11379
+ }
11380
+
11381
+ .cds--layer-one {
11382
+ --cds-layer: var(--cds-layer-01, #f4f4f4);
11383
+ --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
11384
+ --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
11385
+ --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
11386
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
11387
+ --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
11388
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
11389
+ --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
11390
+ --cds-field: var(--cds-field-01, #f4f4f4);
11391
+ --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
11392
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
11393
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
11394
+ --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
11395
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
11396
+ }
11397
+
11398
+ .cds--layer-two {
11399
+ --cds-layer: var(--cds-layer-02, #ffffff);
11400
+ --cds-layer-active: var(--cds-layer-active-02, #c6c6c6);
11401
+ --cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8);
11402
+ --cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0);
11403
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1);
11404
+ --cds-layer-accent: var(--cds-layer-accent-02, #e0e0e0);
11405
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-02, #d1d1d1);
11406
+ --cds-layer-accent-active: var(--cds-layer-accent-active-02, #a8a8a8);
11407
+ --cds-field: var(--cds-field-02, #ffffff);
11408
+ --cds-field-hover: var(--cds-field-hover-02, #e8e8e8);
11409
+ --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
11410
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-02, #c6c6c6);
11411
+ --cds-border-strong: var(--cds-border-strong-02, #8d8d8d);
11412
+ --cds-border-tile: var(--cds-border-tile-02, #a8a8a8);
11413
+ }
11414
+
11415
+ .cds--layer-three {
11416
+ --cds-layer: var(--cds-layer-03, #f4f4f4);
11417
+ --cds-layer-active: var(--cds-layer-active-03, #c6c6c6);
11418
+ --cds-layer-hover: var(--cds-layer-hover-03, #e8e8e8);
11419
+ --cds-layer-selected: var(--cds-layer-selected-03, #e0e0e0);
11420
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-03, #d1d1d1);
11421
+ --cds-layer-accent: var(--cds-layer-accent-03, #e0e0e0);
11422
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-03, #d1d1d1);
11423
+ --cds-layer-accent-active: var(--cds-layer-accent-active-03, #a8a8a8);
11424
+ --cds-field: var(--cds-field-03, #f4f4f4);
11425
+ --cds-field-hover: var(--cds-field-hover-03, #e8e8e8);
11426
+ --cds-border-subtle: var(--cds-border-subtle-02, #e0e0e0);
11427
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-03, #c6c6c6);
11428
+ --cds-border-strong: var(--cds-border-strong-03, #8d8d8d);
11429
+ --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
11430
+ }
11431
+
11432
+ .cds--popover-container {
11433
+ display: inline-block;
11434
+ }
11435
+
11436
+ .cds--popover-container:not(.cds--popover--auto-align) {
11437
+ position: relative;
11438
+ }
11439
+
11440
+ .cds--popover--high-contrast .cds--popover {
11441
+ --cds-popover-background-color: var(--cds-background-inverse, #393939);
11442
+ --cds-popover-text-color: var(--cds-text-inverse, #ffffff);
11443
+ }
11444
+
11445
+ .cds--popover--drop-shadow .cds--popover > .cds--popover-content {
11446
+ filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
11447
+ }
11448
+
11449
+ .cds--popover--caret {
11450
+ --cds-popover-offset: 0.625rem;
11451
+ }
11452
+
11453
+ .cds--popover {
11454
+ position: absolute;
11455
+ z-index: 6000;
11456
+ filter: var(--cds-popover-drop-shadow, none);
11457
+ inset: 0;
11458
+ pointer-events: none;
11459
+ }
11460
+
11461
+ .cds--popover-content {
11462
+ --cds-layout-size-height-sm: 2rem;
11463
+ --cds-layout-size-height-md: 2.5rem;
11464
+ --cds-layout-size-height-lg: 3rem;
11465
+ box-sizing: border-box;
11466
+ padding: 0;
11467
+ border: 0;
11468
+ margin: 0;
11469
+ font-family: inherit;
11470
+ font-size: 100%;
11471
+ vertical-align: baseline;
11472
+ position: absolute;
11473
+ z-index: 6000;
11474
+ display: none;
11475
+ border-radius: var(--cds-popover-border-radius, 2px);
11476
+ background-color: var(--cds-popover-background-color, var(--cds-layer));
11477
+ color: var(--cds-popover-text-color, var(--cds-text-primary, #161616));
11478
+ inline-size: max-content;
11479
+ max-inline-size: 23rem;
11480
+ pointer-events: auto;
11481
+ }
11482
+ .cds--layout--size-sm .cds--popover-content {
11483
+ --cds-layout-size-height: var(--cds-layout-size-height-sm);
11484
+ }
11485
+ .cds--layout--size-md .cds--popover-content {
11486
+ --cds-layout-size-height: var(--cds-layout-size-height-md);
11487
+ }
11488
+ .cds--layout--size-lg .cds--popover-content {
11489
+ --cds-layout-size-height: var(--cds-layout-size-height-lg);
11490
+ }
11491
+ .cds--popover-content *,
11492
+ .cds--popover-content *::before,
11493
+ .cds--popover-content *::after {
11494
+ box-sizing: inherit;
11495
+ }
11496
+
11497
+ .cds--popover--open > .cds--popover > .cds--popover-content {
11498
+ display: block;
11499
+ }
11500
+
11501
+ .cds--popover-content::before {
11502
+ position: absolute;
11503
+ display: none;
11504
+ content: "";
11505
+ }
11506
+
11507
+ .cds--popover--open > .cds--popover > .cds--popover-content::before {
11508
+ display: block;
11509
+ }
11510
+
11511
+ .cds--popover-caret,
11512
+ .cds--popover--auto-align.cds--popover-caret {
11513
+ position: absolute;
11514
+ z-index: 6000;
11515
+ display: none;
11516
+ background-color: var(--cds-popover-background-color, var(--cds-layer));
11517
+ will-change: transform;
11518
+ }
11519
+
11520
+ .cds--popover--caret.cds--popover--open > .cds--popover > .cds--popover-caret {
11521
+ display: block;
11522
+ }
11523
+
11524
+ .cds--popover--auto-align.cds--popover--caret.cds--popover--open > .cds--popover > .cds--popover-content > .cds--popover-caret {
11525
+ display: block;
11526
+ }
11527
+
11528
+ .cds--popover--tab-tip > .cds--popover > .cds--popover-caret {
11529
+ display: none;
11530
+ }
11531
+
11532
+ .cds--popover--bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11533
+ inset-block-end: 0;
11534
+ inset-inline-start: 50%;
11535
+ transform: translate(-50%, calc(100% + var(--cds-popover-offset, 0rem)));
11536
+ }
11537
+
11538
+ [dir=rtl] .cds--popover--bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11539
+ transform: translate(50%, calc(100% + var(--cds-popover-offset, 0rem)));
11540
+ }
11541
+
11542
+ .cds--popover--bottom-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11543
+ .cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11544
+ inset-block-end: 0;
11545
+ inset-inline-start: 0;
11546
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem)));
11547
+ }
11548
+
11549
+ [dir=rtl] .cds--popover--bottom-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11550
+ [dir=rtl] .cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11551
+ inset-inline-end: 0;
11552
+ inset-inline-start: initial;
11553
+ }
11554
+
11555
+ .cds--popover--bottom-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11556
+ .cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11557
+ inset-block-end: 0;
11558
+ inset-inline-end: 0;
11559
+ transform: translate(var(--cds-popover-offset, 0rem), calc(100% + var(--cds-popover-offset, 0rem)));
11560
+ }
11561
+
11562
+ [dir=rtl] .cds--popover--bottom-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11563
+ [dir=rtl] .cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11564
+ inset-inline-start: 0;
11565
+ }
11566
+
11567
+ .cds--popover--bottom > .cds--popover > .cds--popover-content::before,
11568
+ .cds--popover--bottom-left > .cds--popover > .cds--popover-content::before,
11569
+ .cds--popover--bottom-start > .cds--popover > .cds--popover-content::before,
11570
+ .cds--popover--bottom-right > .cds--popover > .cds--popover-content::before,
11571
+ .cds--popover--bottom-end > .cds--popover > .cds--popover-content::before {
11572
+ block-size: var(--cds-popover-offset, 0rem);
11573
+ inset-block-start: 0;
11574
+ inset-inline: 0;
11575
+ transform: translateY(-100%);
11576
+ }
11577
+
11578
+ .cds--popover--bottom > .cds--popover > .cds--popover-caret,
11579
+ .cds--popover--bottom-left > .cds--popover > .cds--popover-caret,
11580
+ .cds--popover--bottom-start > .cds--popover > .cds--popover-caret,
11581
+ .cds--popover--bottom-right > .cds--popover > .cds--popover-caret,
11582
+ .cds--popover--bottom-end > .cds--popover > .cds--popover-caret {
11583
+ block-size: var(--cds-popover-caret-height, 0.375rem);
11584
+ clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
11585
+ inline-size: var(--cds-popover-caret-width, 0.75rem);
11586
+ inset-block-end: 0;
11587
+ inset-inline-start: 50%;
11588
+ transform: translate(-50%, var(--cds-popover-offset, 0rem));
11589
+ }
11590
+
11591
+ [dir=rtl] .cds--popover--bottom > .cds--popover > .cds--popover-caret,
11592
+ [dir=rtl] .cds--popover--bottom-left > .cds--popover > .cds--popover-caret,
11593
+ [dir=rtl] .cds--popover--bottom-start > .cds--popover > .cds--popover-caret,
11594
+ [dir=rtl] .cds--popover--bottom-right > .cds--popover > .cds--popover-caret,
11595
+ [dir=rtl] .cds--popover--bottom-end > .cds--popover > .cds--popover-caret {
11596
+ transform: translate(50%, var(--cds-popover-offset, 0rem));
11597
+ }
11598
+
11599
+ .cds--popover--bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11600
+ .cds--popover--bottom-left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11601
+ .cds--popover--bottom-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11602
+ .cds--popover--bottom-right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11603
+ .cds--popover--bottom-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
11604
+ block-size: var(--cds-popover-caret-height, 0.375rem);
11605
+ clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
11606
+ inline-size: var(--cds-popover-caret-width, 0.75rem);
11607
+ }
11608
+
11609
+ .cds--popover--top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11610
+ inset-block-start: 0;
11611
+ inset-inline-start: 50%;
11612
+ transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem)));
11613
+ }
11614
+
11615
+ [dir=rtl] .cds--popover--top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11616
+ transform: translate(50%, calc(-100% - var(--cds-popover-offset, 0rem)));
11617
+ }
11618
+
11619
+ .cds--popover--top-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11620
+ .cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11621
+ inset-block-start: 0;
11622
+ inset-inline-start: 0;
11623
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-100% - var(--cds-popover-offset, 0rem)));
11624
+ }
11625
+
11626
+ [dir=rtl] .cds--popover--top-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11627
+ [dir=rtl] .cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11628
+ inset-inline-end: 0;
11629
+ inset-inline-start: initial;
11630
+ }
11631
+
11632
+ .cds--popover--top-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11633
+ .cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11634
+ inset-block-start: 0;
11635
+ inset-inline-end: 0;
11636
+ transform: translate(var(--cds-popover-offset, 0rem), calc(-100% - var(--cds-popover-offset, 0rem)));
11637
+ }
11638
+
11639
+ [dir=rtl] .cds--popover--top-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11640
+ [dir=rtl] .cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11641
+ inset-inline-start: 0;
11642
+ }
11643
+
11644
+ .cds--popover--top > .cds--popover > .cds--popover-content::before,
11645
+ .cds--popover--top-left > .cds--popover > .cds--popover-content::before,
11646
+ .cds--popover--top-start > .cds--popover > .cds--popover-content::before,
11647
+ .cds--popover--top-right > .cds--popover > .cds--popover-content::before,
11648
+ .cds--popover--top-end > .cds--popover > .cds--popover-content::before {
11649
+ block-size: var(--cds-popover-offset, 0rem);
11650
+ inset-block-end: 0;
11651
+ inset-inline: 0;
11652
+ transform: translateY(100%);
11653
+ }
11654
+
11655
+ .cds--popover--top > .cds--popover > .cds--popover-caret,
11656
+ .cds--popover--top-left > .cds--popover > .cds--popover-caret,
11657
+ .cds--popover--top-start > .cds--popover > .cds--popover-caret,
11658
+ .cds--popover--top-right > .cds--popover > .cds--popover-caret,
11659
+ .cds--popover--top-end > .cds--popover > .cds--popover-caret {
11660
+ block-size: var(--cds-popover-caret-height, 0.375rem);
11661
+ clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
11662
+ inline-size: var(--cds-popover-caret-width, 0.75rem);
11663
+ inset-block-start: 0;
11664
+ inset-inline-start: 50%;
11665
+ transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
11666
+ }
11667
+
11668
+ [dir=rtl] .cds--popover--top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11669
+ [dir=rtl] .cds--popover--top-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11670
+ [dir=rtl] .cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11671
+ [dir=rtl] .cds--popover--top-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11672
+ [dir=rtl] .cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
11673
+ transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem)));
11674
+ }
11675
+
11676
+ .cds--popover--top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11677
+ .cds--popover--top-left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11678
+ .cds--popover--top-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11679
+ .cds--popover--top-right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11680
+ .cds--popover--top-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
11681
+ block-size: var(--cds-popover-caret-height, 0.375rem);
11682
+ clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
11683
+ inline-size: var(--cds-popover-caret-width, 0.75rem);
11684
+ }
11685
+
11686
+ .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11687
+ inset-block-start: 50%;
11688
+ inset-inline-start: 100%;
11689
+ transform: translate(var(--cds-popover-offset, 0rem), -50%);
11690
+ }
11691
+
11692
+ .cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11693
+ .cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11694
+ inset-block-start: 50%;
11695
+ inset-inline-start: 100%;
11696
+ transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) * -1 - 16px));
11697
+ }
11698
+
11699
+ .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11700
+ .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11701
+ inset-block-end: 50%;
11702
+ inset-inline-start: 100%;
11703
+ transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
11704
+ }
11705
+
11706
+ [dir=rtl] .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11707
+ [dir=rtl] .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11708
+ [dir=rtl] .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11709
+ [dir=rtl] .cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11710
+ [dir=rtl] .cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11711
+ inset-inline-end: 100%;
11712
+ inset-inline-start: initial;
11713
+ }
11714
+
11715
+ .cds--popover--right > .cds--popover > .cds--popover-content::before,
11716
+ .cds--popover--right-top > .cds--popover > .cds--popover-content::before,
11717
+ .cds--popover--right-start > .cds--popover > .cds--popover-content::before,
11718
+ .cds--popover--right-bottom > .cds--popover > .cds--popover-content::before,
11719
+ .cds--popover--right-end > .cds--popover > .cds--popover-content::before {
11720
+ inline-size: var(--cds-popover-offset, 0rem);
11721
+ inset-block: 0;
11722
+ inset-inline-start: 0;
11723
+ transform: translateX(-100%);
11724
+ }
11725
+
11726
+ .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11727
+ .cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11728
+ .cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11729
+ .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11730
+ .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
11731
+ block-size: var(--cds-popover-caret-width, 0.75rem);
11732
+ clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
11733
+ inline-size: var(--cds-popover-caret-height, 0.375rem);
11734
+ inset-block-start: 50%;
11735
+ inset-inline-start: 100%;
11736
+ transform: translate(calc(var(--cds-popover-offset, 0rem) - 100%), -50%);
11737
+ }
11738
+
11739
+ [dir=rtl] .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11740
+ [dir=rtl] .cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11741
+ [dir=rtl] .cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11742
+ [dir=rtl] .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11743
+ [dir=rtl] .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
11744
+ inset-inline-end: 100%;
11745
+ inset-inline-start: initial;
11746
+ }
11747
+
11748
+ .cds--popover--right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11749
+ .cds--popover--right-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11750
+ .cds--popover--right-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11751
+ .cds--popover--right-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11752
+ .cds--popover--right-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
11753
+ block-size: var(--cds-popover-caret-width, 0.75rem);
11754
+ clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
11755
+ inline-size: var(--cds-popover-caret-height, 0.375rem);
11756
+ }
11757
+
11758
+ .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11759
+ inset-block-start: 50%;
11760
+ inset-inline-end: 100%;
11761
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 0.1px), -50%);
11762
+ }
11763
+
11764
+ .cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11765
+ .cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11766
+ inset-block-start: 50%;
11767
+ inset-inline-end: 100%;
11768
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) - 16px));
11769
+ }
11770
+
11771
+ .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11772
+ .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11773
+ inset-block-end: 50%;
11774
+ inset-inline-end: 100%;
11775
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
11776
+ }
11777
+
11778
+ [dir=rtl] .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11779
+ [dir=rtl] .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11780
+ [dir=rtl] .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11781
+ [dir=rtl] .cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11782
+ [dir=rtl] .cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11783
+ inset-inline-end: initial;
11784
+ inset-inline-start: 100%;
11785
+ }
11786
+
11787
+ .cds--popover--left > .cds--popover > .cds--popover-content::before,
11788
+ .cds--popover--left-top > .cds--popover > .cds--popover-content::before,
11789
+ .cds--popover--left-start > .cds--popover > .cds--popover-content::before,
11790
+ .cds--popover--left-bottom > .cds--popover > .cds--popover-content::before,
11791
+ .cds--popover--left-end > .cds--popover > .cds--popover-content::before {
11792
+ inline-size: var(--cds-popover-offset, 0rem);
11793
+ inset-block: 0;
11794
+ inset-inline-end: 0;
11795
+ transform: translateX(100%);
11796
+ }
11797
+
11798
+ .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11799
+ .cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11800
+ .cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11801
+ .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11802
+ .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
11803
+ block-size: var(--cds-popover-caret-width, 0.75rem);
11804
+ clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
11805
+ inline-size: var(--cds-popover-caret-height, 0.375rem);
11806
+ inset-block-start: 50%;
11807
+ inset-inline-end: 100%;
11808
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 100%), -50%);
11809
+ }
11810
+
11811
+ [dir=rtl] .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11812
+ [dir=rtl] .cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11813
+ [dir=rtl] .cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11814
+ [dir=rtl] .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11815
+ [dir=rtl] .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
11816
+ inset-inline-end: initial;
11817
+ inset-inline-start: 100%;
11818
+ }
11819
+
11820
+ .cds--popover--left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11821
+ .cds--popover--left-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11822
+ .cds--popover--left-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11823
+ .cds--popover--left-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11824
+ .cds--popover--left-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
11825
+ block-size: var(--cds-popover-caret-width, 0.75rem);
11826
+ clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
11827
+ inline-size: var(--cds-popover-caret-height, 0.375rem);
11828
+ }
11829
+
11830
+ .cds--popover--tab-tip > .cds--popover > .cds--popover-content {
11831
+ border-radius: 0;
11832
+ }
11833
+
11834
+ .cds--popover--tab-tip .cds--popover {
11835
+ will-change: filter;
11836
+ }
11837
+
11838
+ .cds--popover--tab-tip__button {
11839
+ box-sizing: border-box;
11840
+ padding: 0;
11841
+ border: 0;
11842
+ margin: 0;
11843
+ font-family: inherit;
11844
+ font-size: 100%;
11845
+ vertical-align: baseline;
11846
+ display: inline-block;
11847
+ padding: 0;
11848
+ border: 0;
11849
+ appearance: none;
11850
+ background: none;
11851
+ cursor: pointer;
11852
+ text-align: start;
11853
+ inline-size: 100%;
11854
+ position: relative;
11855
+ display: inline-flex;
11856
+ align-items: center;
11857
+ justify-content: center;
11858
+ block-size: 2rem;
11859
+ inline-size: 2rem;
11860
+ }
11861
+ .cds--popover--tab-tip__button *,
11862
+ .cds--popover--tab-tip__button *::before,
11863
+ .cds--popover--tab-tip__button *::after {
11864
+ box-sizing: inherit;
11865
+ }
11866
+ .cds--popover--tab-tip__button::-moz-focus-inner {
11867
+ border: 0;
11868
+ }
11869
+ .cds--popover--tab-tip__button:focus {
11870
+ outline: 2px solid var(--cds-focus, #0f62fe);
11871
+ outline-offset: -2px;
11872
+ }
11873
+ @media screen and (prefers-contrast) {
11874
+ .cds--popover--tab-tip__button:focus {
11875
+ outline-style: dotted;
11876
+ }
11877
+ }
11878
+ .cds--popover--tab-tip__button:hover {
11879
+ background-color: var(--cds-layer-hover);
11880
+ }
11881
+
11882
+ .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button {
11883
+ background: var(--cds-layer);
11884
+ box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
11885
+ }
11886
+
11887
+ .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button:not(:focus)::after {
11888
+ position: absolute;
11889
+ z-index: 6001;
11890
+ background: var(--cds-layer);
11891
+ block-size: 2px;
11892
+ content: "";
11893
+ inline-size: 100%;
11894
+ inset-block-end: 0;
11895
+ }
11896
+
11897
+ .cds--popover--tab-tip__button svg {
11898
+ fill: var(--cds-icon-primary, #161616);
11899
+ }
11900
+
11901
+ .cds--tooltip {
11902
+ --cds-popover-offset: 12px;
11903
+ }
11904
+
11905
+ .cds--tooltip-content {
11906
+ font-size: var(--cds-body-01-font-size, 0.875rem);
11907
+ font-weight: var(--cds-body-01-font-weight, 400);
11908
+ line-height: var(--cds-body-01-line-height, 1.42857);
11909
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
11910
+ padding: var(--cds-tooltip-padding-block, 1rem) var(--cds-tooltip-padding-inline, 1rem);
11911
+ color: var(--cds-text-inverse, #ffffff);
11912
+ max-inline-size: 18rem;
11913
+ }
11914
+
11915
+ .cds--icon-tooltip {
11916
+ --cds-tooltip-padding-block: 0.125rem;
11917
+ --cds-popover-caret-width: 0.5rem;
11918
+ --cds-popover-caret-height: 0.25rem;
11919
+ --cds-popover-offset: 0.5rem;
11920
+ }
11921
+
11922
+ .cds--icon-tooltip .cds--tooltip-content {
11923
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
11924
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
11925
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
11926
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
11927
+ }
11928
+
11929
+ .cds--definition-term {
11930
+ box-sizing: border-box;
11931
+ padding: 0;
11932
+ border: 0;
11933
+ margin: 0;
11934
+ font-family: inherit;
11935
+ font-size: 100%;
11936
+ vertical-align: baseline;
11937
+ display: inline-block;
11938
+ padding: 0;
11939
+ border: 0;
11940
+ appearance: none;
11941
+ background: none;
11942
+ cursor: pointer;
11943
+ text-align: start;
11944
+ inline-size: 100%;
11945
+ border-radius: 0;
11946
+ border-block-end: 1px dotted var(--cds-border-strong);
11947
+ color: var(--cds-text-primary, #161616);
11948
+ }
11949
+ .cds--definition-term *,
11950
+ .cds--definition-term *::before,
11951
+ .cds--definition-term *::after {
11952
+ box-sizing: inherit;
11953
+ }
11954
+ .cds--definition-term::-moz-focus-inner {
11955
+ border: 0;
11956
+ }
11957
+
11958
+ .cds--definition-term:focus {
11959
+ outline: 1px solid var(--cds-focus, #0f62fe);
11960
+ border-block-end-color: var(--cds-border-interactive, #0f62fe);
11961
+ }
11962
+ @media screen and (prefers-contrast) {
11963
+ .cds--definition-term:focus {
11964
+ outline-style: dotted;
11965
+ }
11966
+ }
11967
+
11968
+ .cds--definition-term:hover {
11969
+ border-block-end-color: var(--cds-border-interactive, #0f62fe);
11970
+ }
11971
+
11972
+ .cds--definition-tooltip {
11973
+ font-size: var(--cds-body-01-font-size, 0.875rem);
11974
+ font-weight: var(--cds-body-01-font-weight, 400);
11975
+ line-height: var(--cds-body-01-line-height, 1.42857);
11976
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
11977
+ padding: 0.5rem 1rem;
11978
+ max-inline-size: 11rem;
11979
+ }
11980
+
11981
+ .c4p--user-avatar {
11982
+ position: relative;
11983
+ display: flex;
11984
+ width: 4rem;
11985
+ height: 4rem;
11986
+ align-items: center;
11987
+ justify-content: center;
11988
+ border: 0.5px solid transparent;
11989
+ border-radius: 100%;
11990
+ color: var(--cds-text-inverse, #ffffff);
11991
+ outline: none;
11992
+ outline-offset: 3px;
11993
+ }
11994
+
11995
+ .c4p--user-avatar svg {
11996
+ color: var(--cds-icon-inverse, #ffffff);
11997
+ }
11998
+
11999
+ .c4p--user-avatar__tooltip:focus-within .c4p--user-avatar {
12000
+ outline: 2px solid var(--cds-focus, #0f62fe);
12001
+ outline-offset: 1px;
12002
+ }
12003
+
12004
+ :root .c4p--user-avatar--order-1-cyan,
12005
+ .cds--g10 .c4p--user-avatar--order-1-cyan,
12006
+ .cds--white .c4p--user-avatar--order-1-cyan,
12007
+ [storybook-carbon-theme=g10] .c4p--user-avatar--order-1-cyan,
12008
+ [storybook-carbon-theme=white] .c4p--user-avatar--order-1-cyan {
12009
+ background-color: #0072c3;
12010
+ }
12011
+
12012
+ :root .c4p--user-avatar--order-2-gray,
12013
+ .cds--g10 .c4p--user-avatar--order-2-gray,
12014
+ .cds--white .c4p--user-avatar--order-2-gray,
12015
+ [storybook-carbon-theme=g10] .c4p--user-avatar--order-2-gray,
12016
+ [storybook-carbon-theme=white] .c4p--user-avatar--order-2-gray {
12017
+ background-color: #6f6f6f;
12018
+ }
12019
+
12020
+ :root .c4p--user-avatar--order-3-green,
12021
+ .cds--g10 .c4p--user-avatar--order-3-green,
12022
+ .cds--white .c4p--user-avatar--order-3-green,
12023
+ [storybook-carbon-theme=g10] .c4p--user-avatar--order-3-green,
12024
+ [storybook-carbon-theme=white] .c4p--user-avatar--order-3-green {
12025
+ background-color: #198038;
12026
+ }
12027
+
12028
+ :root .c4p--user-avatar--order-4-magenta,
12029
+ .cds--g10 .c4p--user-avatar--order-4-magenta,
12030
+ .cds--white .c4p--user-avatar--order-4-magenta,
12031
+ [storybook-carbon-theme=g10] .c4p--user-avatar--order-4-magenta,
12032
+ [storybook-carbon-theme=white] .c4p--user-avatar--order-4-magenta {
12033
+ background-color: #d02670;
12034
+ }
12035
+
12036
+ :root .c4p--user-avatar--order-5-purple,
12037
+ .cds--g10 .c4p--user-avatar--order-5-purple,
12038
+ .cds--white .c4p--user-avatar--order-5-purple,
12039
+ [storybook-carbon-theme=g10] .c4p--user-avatar--order-5-purple,
12040
+ [storybook-carbon-theme=white] .c4p--user-avatar--order-5-purple {
12041
+ background-color: #8a3ffc;
12042
+ }
12043
+
12044
+ :root .c4p--user-avatar--order-6-teal,
12045
+ .cds--g10 .c4p--user-avatar--order-6-teal,
12046
+ .cds--white .c4p--user-avatar--order-6-teal,
12047
+ [storybook-carbon-theme=g10] .c4p--user-avatar--order-6-teal,
12048
+ [storybook-carbon-theme=white] .c4p--user-avatar--order-6-teal {
12049
+ background-color: #007d79;
12050
+ }
12051
+
12052
+ :root .c4p--user-avatar--order-7-cyan,
12053
+ .cds--g10 .c4p--user-avatar--order-7-cyan,
12054
+ .cds--white .c4p--user-avatar--order-7-cyan,
12055
+ [storybook-carbon-theme=g10] .c4p--user-avatar--order-7-cyan,
12056
+ [storybook-carbon-theme=white] .c4p--user-avatar--order-7-cyan {
12057
+ background-color: #003a6d;
12058
+ }
12059
+
12060
+ :root .c4p--user-avatar--order-8-gray,
12061
+ .cds--g10 .c4p--user-avatar--order-8-gray,
12062
+ .cds--white .c4p--user-avatar--order-8-gray,
12063
+ [storybook-carbon-theme=g10] .c4p--user-avatar--order-8-gray,
12064
+ [storybook-carbon-theme=white] .c4p--user-avatar--order-8-gray {
12065
+ background-color: #393939;
12066
+ }
12067
+
12068
+ :root .c4p--user-avatar--order-9-green,
12069
+ .cds--g10 .c4p--user-avatar--order-9-green,
12070
+ .cds--white .c4p--user-avatar--order-9-green,
12071
+ [storybook-carbon-theme=g10] .c4p--user-avatar--order-9-green,
12072
+ [storybook-carbon-theme=white] .c4p--user-avatar--order-9-green {
12073
+ background-color: #044317;
12074
+ }
12075
+
12076
+ :root .c4p--user-avatar--order-10-magenta,
12077
+ .cds--g10 .c4p--user-avatar--order-10-magenta,
12078
+ .cds--white .c4p--user-avatar--order-10-magenta,
12079
+ [storybook-carbon-theme=g10] .c4p--user-avatar--order-10-magenta,
12080
+ [storybook-carbon-theme=white] .c4p--user-avatar--order-10-magenta {
12081
+ background-color: #740937;
12082
+ }
12083
+
12084
+ :root .c4p--user-avatar--order-11-purple,
12085
+ .cds--g10 .c4p--user-avatar--order-11-purple,
12086
+ .cds--white .c4p--user-avatar--order-11-purple,
12087
+ [storybook-carbon-theme=g10] .c4p--user-avatar--order-11-purple,
12088
+ [storybook-carbon-theme=white] .c4p--user-avatar--order-11-purple {
12089
+ background-color: #491d8b;
12090
+ }
12091
+
12092
+ :root .c4p--user-avatar--order-12-teal,
12093
+ .cds--g10 .c4p--user-avatar--order-12-teal,
12094
+ .cds--white .c4p--user-avatar--order-12-teal,
12095
+ [storybook-carbon-theme=g10] .c4p--user-avatar--order-12-teal,
12096
+ [storybook-carbon-theme=white] .c4p--user-avatar--order-12-teal {
12097
+ background-color: #004144;
12098
+ }
12099
+
12100
+ .cds--g90 .c4p--user-avatar--order-1-cyan,
12101
+ .cds--g100 .c4p--user-avatar--order-1-cyan,
12102
+ [storybook-carbon-theme=g90] .c4p--user-avatar--order-1-cyan,
12103
+ [storybook-carbon-theme=g100] .c4p--user-avatar--order-1-cyan {
12104
+ background-color: #1192e8;
12105
+ }
12106
+
12107
+ .cds--g90 .c4p--user-avatar--order-2-gray,
12108
+ .cds--g100 .c4p--user-avatar--order-2-gray,
12109
+ [storybook-carbon-theme=g90] .c4p--user-avatar--order-2-gray,
12110
+ [storybook-carbon-theme=g100] .c4p--user-avatar--order-2-gray {
12111
+ background-color: #8d8d8d;
12112
+ }
12113
+
12114
+ .cds--g90 .c4p--user-avatar--order-3-green,
12115
+ .cds--g100 .c4p--user-avatar--order-3-green,
12116
+ [storybook-carbon-theme=g90] .c4p--user-avatar--order-3-green,
12117
+ [storybook-carbon-theme=g100] .c4p--user-avatar--order-3-green {
12118
+ background-color: #24a148;
12119
+ }
12120
+
12121
+ .cds--g90 .c4p--user-avatar--order-4-magenta,
12122
+ .cds--g100 .c4p--user-avatar--order-4-magenta,
12123
+ [storybook-carbon-theme=g90] .c4p--user-avatar--order-4-magenta,
12124
+ [storybook-carbon-theme=g100] .c4p--user-avatar--order-4-magenta {
12125
+ background-color: #ee5396;
12126
+ }
12127
+
12128
+ .cds--g90 .c4p--user-avatar--order-5-purple,
12129
+ .cds--g100 .c4p--user-avatar--order-5-purple,
12130
+ [storybook-carbon-theme=g90] .c4p--user-avatar--order-5-purple,
12131
+ [storybook-carbon-theme=g100] .c4p--user-avatar--order-5-purple {
12132
+ background-color: #a56eff;
12133
+ }
12134
+
12135
+ .cds--g90 .c4p--user-avatar--order-6-teal,
12136
+ .cds--g100 .c4p--user-avatar--order-6-teal,
12137
+ [storybook-carbon-theme=g90] .c4p--user-avatar--order-6-teal,
12138
+ [storybook-carbon-theme=g100] .c4p--user-avatar--order-6-teal {
12139
+ background-color: #009d9a;
12140
+ }
12141
+
12142
+ .cds--g90 .c4p--user-avatar--order-7-cyan,
12143
+ .cds--g100 .c4p--user-avatar--order-7-cyan,
12144
+ [storybook-carbon-theme=g90] .c4p--user-avatar--order-7-cyan,
12145
+ [storybook-carbon-theme=g100] .c4p--user-avatar--order-7-cyan {
12146
+ background-color: #82cfff;
12147
+ }
12148
+
12149
+ .cds--g90 .c4p--user-avatar--order-8-gray,
12150
+ .cds--g100 .c4p--user-avatar--order-8-gray,
12151
+ [storybook-carbon-theme=g90] .c4p--user-avatar--order-8-gray,
12152
+ [storybook-carbon-theme=g100] .c4p--user-avatar--order-8-gray {
12153
+ background-color: #c6c6c6;
12154
+ }
12155
+
12156
+ .cds--g90 .c4p--user-avatar--order-9-green,
12157
+ .cds--g100 .c4p--user-avatar--order-9-green,
12158
+ [storybook-carbon-theme=g90] .c4p--user-avatar--order-9-green,
12159
+ [storybook-carbon-theme=g100] .c4p--user-avatar--order-9-green {
12160
+ background-color: #6fdc8c;
12161
+ }
12162
+
12163
+ .cds--g90 .c4p--user-avatar--order-10-magenta,
12164
+ .cds--g100 .c4p--user-avatar--order-10-magenta,
12165
+ [storybook-carbon-theme=g90] .c4p--user-avatar--order-10-magenta,
12166
+ [storybook-carbon-theme=g100] .c4p--user-avatar--order-10-magenta {
12167
+ background-color: #ffafd2;
12168
+ }
12169
+
12170
+ .cds--g90 .c4p--user-avatar--order-11-purple,
12171
+ .cds--g100 .c4p--user-avatar--order-11-purple,
12172
+ [storybook-carbon-theme=g90] .c4p--user-avatar--order-11-purple,
12173
+ [storybook-carbon-theme=g100] .c4p--user-avatar--order-11-purple {
12174
+ background-color: #d4bbff;
12175
+ }
12176
+
12177
+ .cds--g90 .c4p--user-avatar--order-12-teal,
12178
+ .cds--g100 .c4p--user-avatar--order-12-teal,
12179
+ [storybook-carbon-theme=g90] .c4p--user-avatar--order-12-teal,
12180
+ [storybook-carbon-theme=g100] .c4p--user-avatar--order-12-teal {
12181
+ background-color: #3ddbd9;
12182
+ }
12183
+
12184
+ .c4p--user-avatar--xl {
12185
+ width: 4rem;
12186
+ height: 4rem;
12187
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
12188
+ font-weight: var(--cds-heading-04-font-weight, 400);
12189
+ line-height: var(--cds-heading-04-line-height, 1.28572);
12190
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
12191
+ }
12192
+
12193
+ .c4p--user-avatar--lg {
12194
+ width: 3rem;
12195
+ height: 3rem;
12196
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
12197
+ font-weight: var(--cds-heading-03-font-weight, 400);
12198
+ line-height: var(--cds-heading-03-line-height, 1.4);
12199
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
12200
+ }
12201
+
12202
+ .c4p--user-avatar--md {
12203
+ width: 2rem;
12204
+ height: 2rem;
12205
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
12206
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
12207
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
12208
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
12209
+ }
12210
+
12211
+ .c4p--user-avatar--sm {
12212
+ width: 1.5rem;
12213
+ height: 1.5rem;
12214
+ font-size: var(--cds-label-01-font-size, 0.75rem);
12215
+ font-weight: var(--cds-label-01-font-weight, 400);
12216
+ line-height: var(--cds-label-01-line-height, 1.33333);
12217
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
12218
+ }
12219
+
12220
+ .c4p--user-avatar__photo {
12221
+ border-radius: 100%;
12222
+ object-fit: contain;
12223
+ }
12224
+
12225
+ .c4p--user-avatar__photo--xl {
12226
+ border-radius: 100%;
12227
+ object-fit: fill;
12228
+ width: 4rem;
12229
+ height: 4rem;
12230
+ }
12231
+
12232
+ .c4p--user-avatar__photo--lg {
12233
+ border-radius: 100%;
12234
+ object-fit: fill;
12235
+ width: 3rem;
12236
+ height: 3rem;
12237
+ }
12238
+
12239
+ .c4p--user-avatar__photo--md {
12240
+ border-radius: 100%;
12241
+ object-fit: fill;
12242
+ width: 2rem;
12243
+ height: 2rem;
12244
+ }
12245
+
12246
+ .c4p--user-avatar__photo--sm {
12247
+ border-radius: 100%;
12248
+ object-fit: fill;
12249
+ width: 1.5rem;
12250
+ height: 1.5rem;
12251
+ }
12252
+
11338
12253
  /*# sourceMappingURL=index-without-carbon-released-only.css.map */