@carbon/ibm-products 2.54.0-canary.8 → 2.54.0-canary.80

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 (365) hide show
  1. package/css/index-full-carbon.css +1399 -690
  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 +987 -64
  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 +610 -562
  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 +692 -567
  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 +12 -12
  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/Coachmark/CoachmarkOverlay.js +4 -0
  37. package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts +17 -0
  38. package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +57 -12
  39. package/es/components/CoachmarkStack/CoachmarkStackHome.d.ts +4 -0
  40. package/es/components/CoachmarkStack/CoachmarkStackHome.js +18 -6
  41. package/es/components/ConditionBuilder/ConditionBuilderConnector/GroupConnector.js +1 -2
  42. package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +9 -5
  43. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js +1 -5
  44. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js +5 -5
  45. package/es/components/ConditionBuilder/utils/util.js +0 -4
  46. package/es/components/CreateTearsheet/CreateTearsheet.d.ts +1 -1
  47. package/es/components/CreateTearsheet/CreateTearsheet.js +4 -3
  48. package/es/components/CreateTearsheet/CreateTearsheetStep.js +6 -3
  49. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +2 -2
  50. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +31 -2
  51. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +1 -2
  52. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +1 -2
  53. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +1 -2
  54. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +1 -2
  55. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -2
  56. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +2 -3
  57. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +2 -3
  58. package/es/components/Datagrid/Datagrid/addons/Filtering/OverflowCheckboxes.js +1 -2
  59. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js +1 -2
  60. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +1 -2
  61. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +1 -2
  62. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +1 -2
  63. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +1 -2
  64. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -2
  65. package/es/components/Datagrid/Datagrid/addons/stateReducer.js +1 -1
  66. package/es/components/Datagrid/useCustomizeColumns.js +4 -4
  67. package/es/components/Datagrid/useDatagrid.js +2 -2
  68. package/es/components/Datagrid/useDefaultStringRenderer.js +1 -2
  69. package/es/components/Datagrid/useEditableCell.js +1 -2
  70. package/es/components/Datagrid/useFlexResize.js +1 -2
  71. package/es/components/Datagrid/useFloatingScroll.js +1 -2
  72. package/es/components/Datagrid/useNestedRowExpander.js +1 -2
  73. package/es/components/Datagrid/useParentDimensions.js +1 -2
  74. package/es/components/Datagrid/useResizeTable.js +1 -2
  75. package/es/components/Datagrid/useRowExpander.js +1 -2
  76. package/es/components/Datagrid/useRowRenderer.js +1 -2
  77. package/es/components/Datagrid/useRowSize.js +1 -2
  78. package/es/components/Datagrid/useSkeletonRows.js +1 -2
  79. package/es/components/DecoratorDualButton/DecoratorDualButton.d.ts +1 -0
  80. package/es/components/DecoratorDualButton/DecoratorDualButton.js +5 -0
  81. package/es/components/DecoratorLink/DecoratorLink.d.ts +1 -0
  82. package/es/components/DecoratorLink/DecoratorLink.js +5 -0
  83. package/es/components/DecoratorSingleButton/DecoratorSingleButton.d.ts +1 -0
  84. package/es/components/DecoratorSingleButton/DecoratorSingleButton.js +5 -0
  85. package/es/components/DescriptionList/DescriptionList.d.ts +1 -0
  86. package/es/components/DescriptionList/DescriptionList.js +5 -0
  87. package/es/components/EditFullPage/EditFullPage.d.ts +2 -0
  88. package/es/components/EditFullPage/EditFullPage.js +8 -0
  89. package/es/components/EditSidePanel/EditSidePanel.d.ts +2 -0
  90. package/es/components/EditSidePanel/EditSidePanel.js +8 -0
  91. package/es/components/EditTearsheet/EditTearsheet.d.ts +2 -0
  92. package/es/components/EditTearsheet/EditTearsheet.js +8 -0
  93. package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.d.ts +2 -0
  94. package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.js +8 -0
  95. package/es/components/EditUpdateCards/EditUpdateCards.d.ts +2 -0
  96. package/es/components/EditUpdateCards/EditUpdateCards.js +8 -0
  97. package/es/components/EmptyStates/EmptyStateIllustration.js +1 -2
  98. package/es/components/EmptyStates/EmptyStateV2.d.ts +1 -0
  99. package/es/components/EmptyStates/EmptyStateV2.js +7 -0
  100. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -1
  101. package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -1
  102. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +1 -1
  103. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -1
  104. package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +1 -1
  105. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +1 -1
  106. package/es/components/EmptyStates/assets/ErrorIllustration.js +3 -5
  107. package/es/components/EmptyStates/assets/NoDataIllustration.js +3 -5
  108. package/es/components/EmptyStates/assets/NoTagsIllustration.js +3 -5
  109. package/es/components/EmptyStates/assets/NotFoundIllustration.js +3 -5
  110. package/es/components/EmptyStates/assets/NotificationsIllustration.js +3 -5
  111. package/es/components/EmptyStates/assets/UnauthorizedIllustration.js +3 -5
  112. package/es/components/ExpressiveCard/ExpressiveCard.d.ts +5 -5
  113. package/es/components/ExpressiveCard/ExpressiveCard.js +5 -5
  114. package/es/components/FilterPanel/FilterPanel.d.ts +1 -0
  115. package/es/components/FilterPanel/FilterPanel.js +6 -0
  116. package/es/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.d.ts +1 -0
  117. package/es/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js +5 -0
  118. package/es/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.d.ts +1 -0
  119. package/es/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js +5 -1
  120. package/es/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.d.ts +1 -0
  121. package/es/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js +5 -0
  122. package/es/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.d.ts +1 -0
  123. package/es/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js +5 -0
  124. package/es/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.d.ts +1 -0
  125. package/es/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.js +5 -0
  126. package/es/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.d.ts +1 -0
  127. package/es/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js +5 -1
  128. package/es/components/FilterSummary/FilterSummary.js +1 -1
  129. package/es/components/FullPageError/FullPageError.js +7 -7
  130. package/es/components/FullPageError/assets/Error403SVG.d.ts +1 -3
  131. package/es/components/FullPageError/assets/Error403SVG.js +4 -6
  132. package/es/components/FullPageError/assets/Error404SVG.d.ts +1 -3
  133. package/es/components/FullPageError/assets/Error404SVG.js +4 -6
  134. package/es/components/FullPageError/assets/ErrorGenericSVG.d.ts +1 -3
  135. package/es/components/FullPageError/assets/ErrorGenericSVG.js +4 -6
  136. package/es/components/HTTPErrors/HTTPError403/HTTPError403.js +1 -1
  137. package/es/components/HTTPErrors/HTTPError404/HTTPError404.js +1 -1
  138. package/es/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +1 -1
  139. package/es/components/InlineTip/InlineTip.d.ts +5 -0
  140. package/es/components/InlineTip/InlineTip.js +17 -8
  141. package/es/components/InterstitialScreen/InterstitialScreen.js +2 -3
  142. package/es/components/Nav/Nav.d.ts +3 -0
  143. package/es/components/Nav/Nav.js +8 -0
  144. package/es/components/Nav/NavItemLink.js +1 -2
  145. package/es/components/PageHeader/PageHeader.js +13 -3
  146. package/es/components/PageHeader/PageHeaderTitle.js +10 -29
  147. package/es/components/ProductiveCard/ProductiveCard.d.ts +9 -5
  148. package/es/components/ProductiveCard/ProductiveCard.js +11 -9
  149. package/es/components/SidePanel/SidePanel.d.ts +6 -1
  150. package/es/components/SidePanel/SidePanel.js +27 -14
  151. package/es/components/StatusIndicator/StatusIndicator.d.ts +1 -0
  152. package/es/components/StatusIndicator/StatusIndicator.js +5 -0
  153. package/es/components/StatusIndicator/StatusIndicatorStep.d.ts +1 -0
  154. package/es/components/StatusIndicator/StatusIndicatorStep.js +5 -0
  155. package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +3 -1
  156. package/es/components/TagOverflow/TagOverflow.js +2 -5
  157. package/es/components/Tearsheet/TearsheetShell.d.ts +4 -0
  158. package/es/components/Tearsheet/TearsheetShell.js +7 -60
  159. package/es/global/js/hooks/useFocus.d.ts +1 -0
  160. package/es/global/js/hooks/useFocus.js +24 -1
  161. package/es/global/js/hooks/usePrefersReducedMotion.js +1 -2
  162. package/es/global/js/package-settings.d.ts +1 -1
  163. package/es/global/js/package-settings.js +1 -1
  164. package/es/global/js/utils/checkForOverflow.d.ts +5 -0
  165. package/es/global/js/utils/checkForOverflow.js +31 -0
  166. package/es/index.js +1 -1
  167. package/es/settings.d.ts +1 -1
  168. package/lib/_virtual/_rollupPluginBabelHelpers.js +1 -1
  169. package/lib/components/APIKeyModal/APIKeyDownloader.d.ts +1 -1
  170. package/lib/components/APIKeyModal/APIKeyDownloader.js +1 -1
  171. package/lib/components/APIKeyModal/APIKeyModal.d.ts +13 -0
  172. package/lib/components/APIKeyModal/APIKeyModal.js +83 -34
  173. package/lib/components/APIKeyModal/APIKeyModal.types.d.ts +21 -3
  174. package/lib/components/AboutModal/AboutModal.js +2 -5
  175. package/lib/components/AddSelect/hooks/useFocus.js +1 -2
  176. package/lib/components/AddSelect/hooks/useParentSelect.js +1 -2
  177. package/lib/components/AddSelect/hooks/usePath.js +1 -2
  178. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +17 -8
  179. package/lib/components/Card/Card.d.ts +3 -3
  180. package/lib/components/Card/Card.js +12 -12
  181. package/lib/components/Card/CardHeader.d.ts +7 -7
  182. package/lib/components/Card/CardHeader.js +14 -12
  183. package/lib/components/Checklist/ChecklistChart.js +7 -7
  184. package/lib/components/Coachmark/Coachmark.d.ts +5 -0
  185. package/lib/components/Coachmark/Coachmark.js +11 -3
  186. package/lib/components/Coachmark/CoachmarkOverlay.js +4 -0
  187. package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts +17 -0
  188. package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +56 -11
  189. package/lib/components/CoachmarkStack/CoachmarkStackHome.d.ts +4 -0
  190. package/lib/components/CoachmarkStack/CoachmarkStackHome.js +18 -6
  191. package/lib/components/ConditionBuilder/ConditionBuilderConnector/GroupConnector.js +1 -2
  192. package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +9 -5
  193. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js +1 -5
  194. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js +5 -5
  195. package/lib/components/ConditionBuilder/utils/util.js +0 -4
  196. package/lib/components/CreateTearsheet/CreateTearsheet.d.ts +1 -1
  197. package/lib/components/CreateTearsheet/CreateTearsheet.js +4 -3
  198. package/lib/components/CreateTearsheet/CreateTearsheetStep.js +5 -2
  199. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +2 -2
  200. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +30 -1
  201. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +1 -2
  202. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +1 -2
  203. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +1 -2
  204. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +1 -2
  205. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -2
  206. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +1 -2
  207. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +1 -2
  208. package/lib/components/Datagrid/Datagrid/addons/Filtering/OverflowCheckboxes.js +1 -2
  209. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js +1 -2
  210. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +1 -2
  211. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +1 -2
  212. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +1 -2
  213. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +1 -2
  214. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -2
  215. package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +1 -1
  216. package/lib/components/Datagrid/useColumnOrder.js +1 -1
  217. package/lib/components/Datagrid/useDefaultStringRenderer.js +1 -2
  218. package/lib/components/Datagrid/useEditableCell.js +1 -2
  219. package/lib/components/Datagrid/useFlexResize.js +1 -2
  220. package/lib/components/Datagrid/useFloatingScroll.js +1 -2
  221. package/lib/components/Datagrid/useNestedRowExpander.js +1 -2
  222. package/lib/components/Datagrid/useParentDimensions.js +1 -2
  223. package/lib/components/Datagrid/useResizeTable.js +1 -2
  224. package/lib/components/Datagrid/useRowExpander.js +1 -2
  225. package/lib/components/Datagrid/useRowRenderer.js +1 -2
  226. package/lib/components/Datagrid/useRowSize.js +1 -2
  227. package/lib/components/Datagrid/useSkeletonRows.js +1 -2
  228. package/lib/components/DecoratorDualButton/DecoratorDualButton.d.ts +1 -0
  229. package/lib/components/DecoratorDualButton/DecoratorDualButton.js +5 -0
  230. package/lib/components/DecoratorLink/DecoratorLink.d.ts +1 -0
  231. package/lib/components/DecoratorLink/DecoratorLink.js +5 -0
  232. package/lib/components/DecoratorSingleButton/DecoratorSingleButton.d.ts +1 -0
  233. package/lib/components/DecoratorSingleButton/DecoratorSingleButton.js +5 -0
  234. package/lib/components/DescriptionList/DescriptionList.d.ts +1 -0
  235. package/lib/components/DescriptionList/DescriptionList.js +5 -0
  236. package/lib/components/EditFullPage/EditFullPage.d.ts +2 -0
  237. package/lib/components/EditFullPage/EditFullPage.js +8 -0
  238. package/lib/components/EditSidePanel/EditSidePanel.d.ts +2 -0
  239. package/lib/components/EditSidePanel/EditSidePanel.js +8 -0
  240. package/lib/components/EditTearsheet/EditTearsheet.d.ts +2 -0
  241. package/lib/components/EditTearsheet/EditTearsheet.js +8 -0
  242. package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.d.ts +2 -0
  243. package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.js +8 -0
  244. package/lib/components/EditUpdateCards/EditUpdateCards.d.ts +2 -0
  245. package/lib/components/EditUpdateCards/EditUpdateCards.js +8 -0
  246. package/lib/components/EmptyStates/EmptyStateIllustration.js +1 -2
  247. package/lib/components/EmptyStates/EmptyStateV2.d.ts +1 -0
  248. package/lib/components/EmptyStates/EmptyStateV2.js +7 -0
  249. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -1
  250. package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -1
  251. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +1 -1
  252. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -1
  253. package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +1 -1
  254. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +1 -1
  255. package/lib/components/EmptyStates/assets/ErrorIllustration.js +2 -4
  256. package/lib/components/EmptyStates/assets/NoDataIllustration.js +2 -4
  257. package/lib/components/EmptyStates/assets/NoTagsIllustration.js +2 -4
  258. package/lib/components/EmptyStates/assets/NotFoundIllustration.js +2 -4
  259. package/lib/components/EmptyStates/assets/NotificationsIllustration.js +2 -4
  260. package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js +2 -4
  261. package/lib/components/ExpressiveCard/ExpressiveCard.d.ts +5 -5
  262. package/lib/components/ExpressiveCard/ExpressiveCard.js +5 -5
  263. package/lib/components/FilterPanel/FilterPanel.d.ts +1 -0
  264. package/lib/components/FilterPanel/FilterPanel.js +6 -0
  265. package/lib/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.d.ts +1 -0
  266. package/lib/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js +5 -0
  267. package/lib/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.d.ts +1 -0
  268. package/lib/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js +5 -1
  269. package/lib/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.d.ts +1 -0
  270. package/lib/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js +5 -0
  271. package/lib/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.d.ts +1 -0
  272. package/lib/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js +5 -0
  273. package/lib/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.d.ts +1 -0
  274. package/lib/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.js +5 -0
  275. package/lib/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.d.ts +1 -0
  276. package/lib/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js +5 -1
  277. package/lib/components/FilterSummary/FilterSummary.js +1 -1
  278. package/lib/components/FullPageError/FullPageError.js +7 -7
  279. package/lib/components/FullPageError/assets/Error403SVG.d.ts +1 -3
  280. package/lib/components/FullPageError/assets/Error403SVG.js +4 -6
  281. package/lib/components/FullPageError/assets/Error404SVG.d.ts +1 -3
  282. package/lib/components/FullPageError/assets/Error404SVG.js +4 -6
  283. package/lib/components/FullPageError/assets/ErrorGenericSVG.d.ts +1 -3
  284. package/lib/components/FullPageError/assets/ErrorGenericSVG.js +4 -6
  285. package/lib/components/HTTPErrors/HTTPError403/HTTPError403.js +1 -1
  286. package/lib/components/HTTPErrors/HTTPError404/HTTPError404.js +1 -1
  287. package/lib/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +1 -1
  288. package/lib/components/InlineTip/InlineTip.d.ts +5 -0
  289. package/lib/components/InlineTip/InlineTip.js +17 -8
  290. package/lib/components/InterstitialScreen/InterstitialScreen.js +2 -3
  291. package/lib/components/Nav/Nav.d.ts +3 -0
  292. package/lib/components/Nav/Nav.js +8 -0
  293. package/lib/components/Nav/NavItemLink.js +1 -2
  294. package/lib/components/PageHeader/PageHeader.js +12 -2
  295. package/lib/components/PageHeader/PageHeaderTitle.js +8 -27
  296. package/lib/components/ProductiveCard/ProductiveCard.d.ts +9 -5
  297. package/lib/components/ProductiveCard/ProductiveCard.js +11 -9
  298. package/lib/components/SidePanel/SidePanel.d.ts +6 -1
  299. package/lib/components/SidePanel/SidePanel.js +27 -14
  300. package/lib/components/StatusIndicator/StatusIndicator.d.ts +1 -0
  301. package/lib/components/StatusIndicator/StatusIndicator.js +5 -0
  302. package/lib/components/StatusIndicator/StatusIndicatorStep.d.ts +1 -0
  303. package/lib/components/StatusIndicator/StatusIndicatorStep.js +5 -0
  304. package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +3 -1
  305. package/lib/components/TagOverflow/TagOverflow.js +1 -4
  306. package/lib/components/Tearsheet/TearsheetShell.d.ts +4 -0
  307. package/lib/components/Tearsheet/TearsheetShell.js +6 -59
  308. package/lib/global/js/hooks/useFocus.d.ts +1 -0
  309. package/lib/global/js/hooks/useFocus.js +24 -0
  310. package/lib/global/js/hooks/usePrefersReducedMotion.js +1 -2
  311. package/lib/global/js/package-settings.d.ts +1 -1
  312. package/lib/global/js/package-settings.js +1 -1
  313. package/lib/global/js/utils/checkForOverflow.d.ts +5 -0
  314. package/lib/global/js/utils/checkForOverflow.js +34 -0
  315. package/lib/index.js +109 -109
  316. package/lib/settings.d.ts +1 -1
  317. package/package.json +11 -11
  318. package/scss/components/APIKeyModal/_api-key-modal.scss +4 -0
  319. package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +3 -3
  320. package/scss/components/Card/_card.scss +19 -5
  321. package/scss/components/Coachmark/_coachmark-overlay.scss +2 -2
  322. package/scss/components/Coachmark/_coachmark-tagline.scss +1 -1
  323. package/scss/components/CoachmarkBeacon/_coachmark-beacon.scss +3 -3
  324. package/scss/components/CoachmarkStack/_coachmark-stack.scss +2 -2
  325. package/scss/components/ConditionBuilder/styles/_conditionBuilderItem.scss +7 -7
  326. package/scss/components/CreateInfluencer/_create-influencer.scss +2 -2
  327. package/scss/components/CreateTearsheet/_create-tearsheet.scss +1 -2
  328. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +4 -4
  329. package/scss/components/Datagrid/styles/_datagrid.scss +21 -14
  330. package/scss/components/Datagrid/styles/_draggableElement.scss +2 -2
  331. package/scss/components/Datagrid/styles/_useColumnRightAlign.scss +1 -1
  332. package/scss/components/Datagrid/styles/_useExpandedRow.scss +1 -1
  333. package/scss/components/Datagrid/styles/_useInlineEdit.scss +1 -1
  334. package/scss/components/Datagrid/styles/_useNestedRows.scss +2 -2
  335. package/scss/components/Datagrid/styles/_useStickyColumn.scss +2 -2
  336. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss +1 -1
  337. package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss +1 -1
  338. package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +1 -1
  339. package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +1 -2
  340. package/scss/components/DecoratorBase/_decorator-base-mixins.scss +1 -1
  341. package/scss/components/DecoratorBase/_decorator-base.scss +3 -3
  342. package/scss/components/DecoratorDualButton/_decorator-dual-button.scss +1 -1
  343. package/scss/components/DecoratorSingleButton/_decorator-single-button.scss +1 -1
  344. package/scss/components/EditTearsheet/_edit-tearsheet.scss +1 -2
  345. package/scss/components/EditUpdateCards/_edit-update-cards.scss +7 -7
  346. package/scss/components/FullPageError/_full-page-error.scss +1 -1
  347. package/scss/components/GetStartedCard/_get-started-card.scss +1 -1
  348. package/scss/components/Guidebanner/_guidebanner.scss +4 -4
  349. package/scss/components/HTTPErrors/_http-errors.scss +1 -1
  350. package/scss/components/InlineTip/_inline-tip.scss +4 -4
  351. package/scss/components/InterstitialScreen/_interstitial-screen.scss +6 -6
  352. package/scss/components/NonLinearReading/_non-linear-reading.scss +2 -2
  353. package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -3
  354. package/scss/components/OptionsTile/_options-tile.scss +6 -8
  355. package/scss/components/PageHeader/_page-header.scss +38 -19
  356. package/scss/components/ProductiveCard/_productive-card.scss +2 -2
  357. package/scss/components/SidePanel/_side-panel.scss +24 -17
  358. package/scss/components/StatusIcon/_status-icon.scss +9 -7
  359. package/scss/components/StatusIndicator/_status-indicator.scss +1 -1
  360. package/scss/components/Tearsheet/_tearsheet.scss +5 -5
  361. package/scss/components/UserAvatar/_user-avatar.scss +5 -3
  362. package/scss/components/UserProfileImage/_user-profile-image.scss +6 -4
  363. package/scss/components/WebTerminal/_web-terminal.scss +2 -2
  364. package/scss/components/_index-released-only.scss +1 -0
  365. 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 {
5822
5831
  position: absolute;
5823
5832
  top: 1rem;
5824
5833
  right: 1rem;
5825
5834
  }
5826
5835
 
5836
+ .c4p--card__header__inner-wrapper--decorator {
5837
+ position: absolute;
5838
+ top: 1rem;
5839
+ right: 1rem;
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
+ }
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 {
@@ -9412,12 +9434,7 @@ button.c4p--add-select__global-filter-toggle--open {
9412
9434
  visibility: hidden;
9413
9435
  }
9414
9436
  .c4p--page-header .c4p--page-header__subtitle-row {
9415
- display: -webkit-box;
9416
- overflow: hidden;
9417
- max-width: 100%;
9418
9437
  margin-top: 0.5rem;
9419
- -webkit-box-orient: vertical;
9420
- -webkit-line-clamp: 2;
9421
9438
  }
9422
9439
  @media (min-width: 42rem) {
9423
9440
  .c4p--page-header .c4p--page-header__subtitle-row {
@@ -9433,6 +9450,19 @@ button.c4p--add-select__global-filter-toggle--open {
9433
9450
  line-height: var(--cds-body-01-line-height, 1.42857);
9434
9451
  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
9435
9452
  }
9453
+ .c4p--page-header .c4p--page-header__subtitle-tooltip .cds--definition-term {
9454
+ border-bottom: 0;
9455
+ letter-spacing: inherit;
9456
+ }
9457
+ .c4p--page-header .c4p--page-header__subtitle-tooltip .cds--popover-content.cds--definition-tooltip {
9458
+ max-inline-size: fit-content;
9459
+ }
9460
+ .c4p--page-header .c4p--page-header__subtitle-text {
9461
+ display: -webkit-box;
9462
+ overflow: hidden;
9463
+ -webkit-box-orient: vertical;
9464
+ -webkit-line-clamp: 2;
9465
+ }
9436
9466
  .c4p--page-header .c4p--page-header__available-row {
9437
9467
  font-size: var(--cds-body-01-font-size, 0.875rem);
9438
9468
  font-weight: var(--cds-body-01-font-weight, 400);
@@ -9529,6 +9559,10 @@ button.c4p--add-select__global-filter-toggle--open {
9529
9559
  z-index: 7999;
9530
9560
  }
9531
9561
 
9562
+ .c4p--page-header__button-set-menu-options > button.cds--menu-button__trigger {
9563
+ min-inline-size: 0;
9564
+ }
9565
+
9532
9566
  .c4p--card__productive {
9533
9567
  display: flex;
9534
9568
  flex-direction: column;
@@ -11335,4 +11369,893 @@ button.c4p--add-select__global-filter-toggle--open {
11335
11369
  width: calc(100vw - 40rem);
11336
11370
  }
11337
11371
 
11372
+ :root {
11373
+ --cds-layer: var(--cds-layer-01, #f4f4f4);
11374
+ --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
11375
+ --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
11376
+ --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
11377
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
11378
+ --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
11379
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
11380
+ --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
11381
+ --cds-field: var(--cds-field-01, #f4f4f4);
11382
+ --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
11383
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
11384
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
11385
+ --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
11386
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
11387
+ }
11388
+
11389
+ .cds--layer-one {
11390
+ --cds-layer: var(--cds-layer-01, #f4f4f4);
11391
+ --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
11392
+ --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
11393
+ --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
11394
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
11395
+ --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
11396
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
11397
+ --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
11398
+ --cds-field: var(--cds-field-01, #f4f4f4);
11399
+ --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
11400
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
11401
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
11402
+ --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
11403
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
11404
+ }
11405
+
11406
+ .cds--layer-two {
11407
+ --cds-layer: var(--cds-layer-02, #ffffff);
11408
+ --cds-layer-active: var(--cds-layer-active-02, #c6c6c6);
11409
+ --cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8);
11410
+ --cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0);
11411
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1);
11412
+ --cds-layer-accent: var(--cds-layer-accent-02, #e0e0e0);
11413
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-02, #d1d1d1);
11414
+ --cds-layer-accent-active: var(--cds-layer-accent-active-02, #a8a8a8);
11415
+ --cds-field: var(--cds-field-02, #ffffff);
11416
+ --cds-field-hover: var(--cds-field-hover-02, #e8e8e8);
11417
+ --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
11418
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-02, #c6c6c6);
11419
+ --cds-border-strong: var(--cds-border-strong-02, #8d8d8d);
11420
+ --cds-border-tile: var(--cds-border-tile-02, #a8a8a8);
11421
+ }
11422
+
11423
+ .cds--layer-three {
11424
+ --cds-layer: var(--cds-layer-03, #f4f4f4);
11425
+ --cds-layer-active: var(--cds-layer-active-03, #c6c6c6);
11426
+ --cds-layer-hover: var(--cds-layer-hover-03, #e8e8e8);
11427
+ --cds-layer-selected: var(--cds-layer-selected-03, #e0e0e0);
11428
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-03, #d1d1d1);
11429
+ --cds-layer-accent: var(--cds-layer-accent-03, #e0e0e0);
11430
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-03, #d1d1d1);
11431
+ --cds-layer-accent-active: var(--cds-layer-accent-active-03, #a8a8a8);
11432
+ --cds-field: var(--cds-field-03, #f4f4f4);
11433
+ --cds-field-hover: var(--cds-field-hover-03, #e8e8e8);
11434
+ --cds-border-subtle: var(--cds-border-subtle-02, #e0e0e0);
11435
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-03, #c6c6c6);
11436
+ --cds-border-strong: var(--cds-border-strong-03, #8d8d8d);
11437
+ --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
11438
+ }
11439
+
11440
+ .cds--popover-container {
11441
+ display: inline-block;
11442
+ }
11443
+
11444
+ .cds--popover-container:not(.cds--popover--auto-align) {
11445
+ position: relative;
11446
+ }
11447
+
11448
+ .cds--popover--high-contrast .cds--popover {
11449
+ --cds-popover-background-color: var(--cds-background-inverse, #393939);
11450
+ --cds-popover-text-color: var(--cds-text-inverse, #ffffff);
11451
+ }
11452
+
11453
+ .cds--popover--drop-shadow .cds--popover > .cds--popover-content {
11454
+ filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
11455
+ }
11456
+
11457
+ .cds--popover--caret {
11458
+ --cds-popover-offset: 0.625rem;
11459
+ }
11460
+
11461
+ .cds--popover {
11462
+ position: absolute;
11463
+ z-index: 6000;
11464
+ filter: var(--cds-popover-drop-shadow, none);
11465
+ inset: 0;
11466
+ pointer-events: none;
11467
+ }
11468
+
11469
+ .cds--popover-content {
11470
+ --cds-layout-size-height-sm: 2rem;
11471
+ --cds-layout-size-height-md: 2.5rem;
11472
+ --cds-layout-size-height-lg: 3rem;
11473
+ box-sizing: border-box;
11474
+ padding: 0;
11475
+ border: 0;
11476
+ margin: 0;
11477
+ font-family: inherit;
11478
+ font-size: 100%;
11479
+ vertical-align: baseline;
11480
+ position: absolute;
11481
+ z-index: 6000;
11482
+ display: none;
11483
+ border-radius: var(--cds-popover-border-radius, 2px);
11484
+ background-color: var(--cds-popover-background-color, var(--cds-layer));
11485
+ color: var(--cds-popover-text-color, var(--cds-text-primary, #161616));
11486
+ inline-size: max-content;
11487
+ max-inline-size: 23rem;
11488
+ pointer-events: auto;
11489
+ }
11490
+ .cds--layout--size-sm .cds--popover-content {
11491
+ --cds-layout-size-height: var(--cds-layout-size-height-sm);
11492
+ }
11493
+ .cds--layout--size-md .cds--popover-content {
11494
+ --cds-layout-size-height: var(--cds-layout-size-height-md);
11495
+ }
11496
+ .cds--layout--size-lg .cds--popover-content {
11497
+ --cds-layout-size-height: var(--cds-layout-size-height-lg);
11498
+ }
11499
+ .cds--popover-content *,
11500
+ .cds--popover-content *::before,
11501
+ .cds--popover-content *::after {
11502
+ box-sizing: inherit;
11503
+ }
11504
+
11505
+ .cds--popover--open > .cds--popover > .cds--popover-content {
11506
+ display: block;
11507
+ }
11508
+
11509
+ .cds--popover-content::before {
11510
+ position: absolute;
11511
+ display: none;
11512
+ content: "";
11513
+ }
11514
+
11515
+ .cds--popover--open > .cds--popover > .cds--popover-content::before {
11516
+ display: block;
11517
+ }
11518
+
11519
+ .cds--popover-caret,
11520
+ .cds--popover--auto-align.cds--popover-caret {
11521
+ position: absolute;
11522
+ z-index: 6000;
11523
+ display: none;
11524
+ background-color: var(--cds-popover-background-color, var(--cds-layer));
11525
+ will-change: transform;
11526
+ }
11527
+
11528
+ .cds--popover--caret.cds--popover--open > .cds--popover > .cds--popover-caret {
11529
+ display: block;
11530
+ }
11531
+
11532
+ .cds--popover--auto-align.cds--popover--caret.cds--popover--open > .cds--popover > .cds--popover-content > .cds--popover-caret {
11533
+ display: block;
11534
+ }
11535
+
11536
+ .cds--popover--tab-tip > .cds--popover > .cds--popover-caret {
11537
+ display: none;
11538
+ }
11539
+
11540
+ .cds--popover--bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11541
+ inset-block-end: 0;
11542
+ inset-inline-start: 50%;
11543
+ transform: translate(-50%, calc(100% + var(--cds-popover-offset, 0rem)));
11544
+ }
11545
+
11546
+ [dir=rtl] .cds--popover--bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11547
+ transform: translate(50%, calc(100% + var(--cds-popover-offset, 0rem)));
11548
+ }
11549
+
11550
+ .cds--popover--bottom-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11551
+ .cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11552
+ inset-block-end: 0;
11553
+ inset-inline-start: 0;
11554
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem)));
11555
+ }
11556
+
11557
+ [dir=rtl] .cds--popover--bottom-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11558
+ [dir=rtl] .cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11559
+ inset-inline-end: 0;
11560
+ inset-inline-start: initial;
11561
+ }
11562
+
11563
+ .cds--popover--bottom-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11564
+ .cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11565
+ inset-block-end: 0;
11566
+ inset-inline-end: 0;
11567
+ transform: translate(var(--cds-popover-offset, 0rem), calc(100% + var(--cds-popover-offset, 0rem)));
11568
+ }
11569
+
11570
+ [dir=rtl] .cds--popover--bottom-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11571
+ [dir=rtl] .cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11572
+ inset-inline-start: 0;
11573
+ }
11574
+
11575
+ .cds--popover--bottom > .cds--popover > .cds--popover-content::before,
11576
+ .cds--popover--bottom-left > .cds--popover > .cds--popover-content::before,
11577
+ .cds--popover--bottom-start > .cds--popover > .cds--popover-content::before,
11578
+ .cds--popover--bottom-right > .cds--popover > .cds--popover-content::before,
11579
+ .cds--popover--bottom-end > .cds--popover > .cds--popover-content::before {
11580
+ block-size: var(--cds-popover-offset, 0rem);
11581
+ inset-block-start: 0;
11582
+ inset-inline: 0;
11583
+ transform: translateY(-100%);
11584
+ }
11585
+
11586
+ .cds--popover--bottom > .cds--popover > .cds--popover-caret,
11587
+ .cds--popover--bottom-left > .cds--popover > .cds--popover-caret,
11588
+ .cds--popover--bottom-start > .cds--popover > .cds--popover-caret,
11589
+ .cds--popover--bottom-right > .cds--popover > .cds--popover-caret,
11590
+ .cds--popover--bottom-end > .cds--popover > .cds--popover-caret {
11591
+ block-size: var(--cds-popover-caret-height, 0.375rem);
11592
+ clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
11593
+ inline-size: var(--cds-popover-caret-width, 0.75rem);
11594
+ inset-block-end: 0;
11595
+ inset-inline-start: 50%;
11596
+ transform: translate(-50%, var(--cds-popover-offset, 0rem));
11597
+ }
11598
+
11599
+ [dir=rtl] .cds--popover--bottom > .cds--popover > .cds--popover-caret,
11600
+ [dir=rtl] .cds--popover--bottom-left > .cds--popover > .cds--popover-caret,
11601
+ [dir=rtl] .cds--popover--bottom-start > .cds--popover > .cds--popover-caret,
11602
+ [dir=rtl] .cds--popover--bottom-right > .cds--popover > .cds--popover-caret,
11603
+ [dir=rtl] .cds--popover--bottom-end > .cds--popover > .cds--popover-caret {
11604
+ transform: translate(50%, var(--cds-popover-offset, 0rem));
11605
+ }
11606
+
11607
+ .cds--popover--bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11608
+ .cds--popover--bottom-left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11609
+ .cds--popover--bottom-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11610
+ .cds--popover--bottom-right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11611
+ .cds--popover--bottom-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
11612
+ block-size: var(--cds-popover-caret-height, 0.375rem);
11613
+ clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
11614
+ inline-size: var(--cds-popover-caret-width, 0.75rem);
11615
+ }
11616
+
11617
+ .cds--popover--top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11618
+ inset-block-start: 0;
11619
+ inset-inline-start: 50%;
11620
+ transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem)));
11621
+ }
11622
+
11623
+ [dir=rtl] .cds--popover--top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11624
+ transform: translate(50%, calc(-100% - var(--cds-popover-offset, 0rem)));
11625
+ }
11626
+
11627
+ .cds--popover--top-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11628
+ .cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11629
+ inset-block-start: 0;
11630
+ inset-inline-start: 0;
11631
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-100% - var(--cds-popover-offset, 0rem)));
11632
+ }
11633
+
11634
+ [dir=rtl] .cds--popover--top-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11635
+ [dir=rtl] .cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11636
+ inset-inline-end: 0;
11637
+ inset-inline-start: initial;
11638
+ }
11639
+
11640
+ .cds--popover--top-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11641
+ .cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11642
+ inset-block-start: 0;
11643
+ inset-inline-end: 0;
11644
+ transform: translate(var(--cds-popover-offset, 0rem), calc(-100% - var(--cds-popover-offset, 0rem)));
11645
+ }
11646
+
11647
+ [dir=rtl] .cds--popover--top-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11648
+ [dir=rtl] .cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11649
+ inset-inline-start: 0;
11650
+ }
11651
+
11652
+ .cds--popover--top > .cds--popover > .cds--popover-content::before,
11653
+ .cds--popover--top-left > .cds--popover > .cds--popover-content::before,
11654
+ .cds--popover--top-start > .cds--popover > .cds--popover-content::before,
11655
+ .cds--popover--top-right > .cds--popover > .cds--popover-content::before,
11656
+ .cds--popover--top-end > .cds--popover > .cds--popover-content::before {
11657
+ block-size: var(--cds-popover-offset, 0rem);
11658
+ inset-block-end: 0;
11659
+ inset-inline: 0;
11660
+ transform: translateY(100%);
11661
+ }
11662
+
11663
+ .cds--popover--top > .cds--popover > .cds--popover-caret,
11664
+ .cds--popover--top-left > .cds--popover > .cds--popover-caret,
11665
+ .cds--popover--top-start > .cds--popover > .cds--popover-caret,
11666
+ .cds--popover--top-right > .cds--popover > .cds--popover-caret,
11667
+ .cds--popover--top-end > .cds--popover > .cds--popover-caret {
11668
+ block-size: var(--cds-popover-caret-height, 0.375rem);
11669
+ clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
11670
+ inline-size: var(--cds-popover-caret-width, 0.75rem);
11671
+ inset-block-start: 0;
11672
+ inset-inline-start: 50%;
11673
+ transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
11674
+ }
11675
+
11676
+ [dir=rtl] .cds--popover--top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11677
+ [dir=rtl] .cds--popover--top-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11678
+ [dir=rtl] .cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11679
+ [dir=rtl] .cds--popover--top-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11680
+ [dir=rtl] .cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
11681
+ transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem)));
11682
+ }
11683
+
11684
+ .cds--popover--top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11685
+ .cds--popover--top-left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11686
+ .cds--popover--top-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11687
+ .cds--popover--top-right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11688
+ .cds--popover--top-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
11689
+ block-size: var(--cds-popover-caret-height, 0.375rem);
11690
+ clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
11691
+ inline-size: var(--cds-popover-caret-width, 0.75rem);
11692
+ }
11693
+
11694
+ .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11695
+ inset-block-start: 50%;
11696
+ inset-inline-start: 100%;
11697
+ transform: translate(var(--cds-popover-offset, 0rem), -50%);
11698
+ }
11699
+
11700
+ .cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11701
+ .cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11702
+ inset-block-start: 50%;
11703
+ inset-inline-start: 100%;
11704
+ transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) * -1 - 16px));
11705
+ }
11706
+
11707
+ .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11708
+ .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11709
+ inset-block-end: 50%;
11710
+ inset-inline-start: 100%;
11711
+ transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
11712
+ }
11713
+
11714
+ [dir=rtl] .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11715
+ [dir=rtl] .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11716
+ [dir=rtl] .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11717
+ [dir=rtl] .cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11718
+ [dir=rtl] .cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11719
+ inset-inline-end: 100%;
11720
+ inset-inline-start: initial;
11721
+ }
11722
+
11723
+ .cds--popover--right > .cds--popover > .cds--popover-content::before,
11724
+ .cds--popover--right-top > .cds--popover > .cds--popover-content::before,
11725
+ .cds--popover--right-start > .cds--popover > .cds--popover-content::before,
11726
+ .cds--popover--right-bottom > .cds--popover > .cds--popover-content::before,
11727
+ .cds--popover--right-end > .cds--popover > .cds--popover-content::before {
11728
+ inline-size: var(--cds-popover-offset, 0rem);
11729
+ inset-block: 0;
11730
+ inset-inline-start: 0;
11731
+ transform: translateX(-100%);
11732
+ }
11733
+
11734
+ .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11735
+ .cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11736
+ .cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11737
+ .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11738
+ .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
11739
+ block-size: var(--cds-popover-caret-width, 0.75rem);
11740
+ clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
11741
+ inline-size: var(--cds-popover-caret-height, 0.375rem);
11742
+ inset-block-start: 50%;
11743
+ inset-inline-start: 100%;
11744
+ transform: translate(calc(var(--cds-popover-offset, 0rem) - 100%), -50%);
11745
+ }
11746
+
11747
+ [dir=rtl] .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11748
+ [dir=rtl] .cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11749
+ [dir=rtl] .cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11750
+ [dir=rtl] .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11751
+ [dir=rtl] .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
11752
+ inset-inline-end: 100%;
11753
+ inset-inline-start: initial;
11754
+ }
11755
+
11756
+ .cds--popover--right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11757
+ .cds--popover--right-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11758
+ .cds--popover--right-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11759
+ .cds--popover--right-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11760
+ .cds--popover--right-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
11761
+ block-size: var(--cds-popover-caret-width, 0.75rem);
11762
+ clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
11763
+ inline-size: var(--cds-popover-caret-height, 0.375rem);
11764
+ }
11765
+
11766
+ .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11767
+ inset-block-start: 50%;
11768
+ inset-inline-end: 100%;
11769
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 0.1px), -50%);
11770
+ }
11771
+
11772
+ .cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11773
+ .cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11774
+ inset-block-start: 50%;
11775
+ inset-inline-end: 100%;
11776
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) - 16px));
11777
+ }
11778
+
11779
+ .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11780
+ .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11781
+ inset-block-end: 50%;
11782
+ inset-inline-end: 100%;
11783
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
11784
+ }
11785
+
11786
+ [dir=rtl] .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11787
+ [dir=rtl] .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11788
+ [dir=rtl] .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11789
+ [dir=rtl] .cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
11790
+ [dir=rtl] .cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
11791
+ inset-inline-end: initial;
11792
+ inset-inline-start: 100%;
11793
+ }
11794
+
11795
+ .cds--popover--left > .cds--popover > .cds--popover-content::before,
11796
+ .cds--popover--left-top > .cds--popover > .cds--popover-content::before,
11797
+ .cds--popover--left-start > .cds--popover > .cds--popover-content::before,
11798
+ .cds--popover--left-bottom > .cds--popover > .cds--popover-content::before,
11799
+ .cds--popover--left-end > .cds--popover > .cds--popover-content::before {
11800
+ inline-size: var(--cds-popover-offset, 0rem);
11801
+ inset-block: 0;
11802
+ inset-inline-end: 0;
11803
+ transform: translateX(100%);
11804
+ }
11805
+
11806
+ .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11807
+ .cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11808
+ .cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11809
+ .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11810
+ .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
11811
+ block-size: var(--cds-popover-caret-width, 0.75rem);
11812
+ clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
11813
+ inline-size: var(--cds-popover-caret-height, 0.375rem);
11814
+ inset-block-start: 50%;
11815
+ inset-inline-end: 100%;
11816
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 100%), -50%);
11817
+ }
11818
+
11819
+ [dir=rtl] .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11820
+ [dir=rtl] .cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11821
+ [dir=rtl] .cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11822
+ [dir=rtl] .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
11823
+ [dir=rtl] .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
11824
+ inset-inline-end: initial;
11825
+ inset-inline-start: 100%;
11826
+ }
11827
+
11828
+ .cds--popover--left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11829
+ .cds--popover--left-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11830
+ .cds--popover--left-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11831
+ .cds--popover--left-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
11832
+ .cds--popover--left-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
11833
+ block-size: var(--cds-popover-caret-width, 0.75rem);
11834
+ clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
11835
+ inline-size: var(--cds-popover-caret-height, 0.375rem);
11836
+ }
11837
+
11838
+ .cds--popover--tab-tip > .cds--popover > .cds--popover-content {
11839
+ border-radius: 0;
11840
+ }
11841
+
11842
+ .cds--popover--tab-tip .cds--popover {
11843
+ will-change: filter;
11844
+ }
11845
+
11846
+ .cds--popover--tab-tip__button {
11847
+ box-sizing: border-box;
11848
+ padding: 0;
11849
+ border: 0;
11850
+ margin: 0;
11851
+ font-family: inherit;
11852
+ font-size: 100%;
11853
+ vertical-align: baseline;
11854
+ display: inline-block;
11855
+ padding: 0;
11856
+ border: 0;
11857
+ appearance: none;
11858
+ background: none;
11859
+ cursor: pointer;
11860
+ text-align: start;
11861
+ inline-size: 100%;
11862
+ position: relative;
11863
+ display: inline-flex;
11864
+ align-items: center;
11865
+ justify-content: center;
11866
+ block-size: 2rem;
11867
+ inline-size: 2rem;
11868
+ }
11869
+ .cds--popover--tab-tip__button *,
11870
+ .cds--popover--tab-tip__button *::before,
11871
+ .cds--popover--tab-tip__button *::after {
11872
+ box-sizing: inherit;
11873
+ }
11874
+ .cds--popover--tab-tip__button::-moz-focus-inner {
11875
+ border: 0;
11876
+ }
11877
+ .cds--popover--tab-tip__button:focus {
11878
+ outline: 2px solid var(--cds-focus, #0f62fe);
11879
+ outline-offset: -2px;
11880
+ }
11881
+ @media screen and (prefers-contrast) {
11882
+ .cds--popover--tab-tip__button:focus {
11883
+ outline-style: dotted;
11884
+ }
11885
+ }
11886
+ .cds--popover--tab-tip__button:hover {
11887
+ background-color: var(--cds-layer-hover);
11888
+ }
11889
+
11890
+ .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button {
11891
+ background: var(--cds-layer);
11892
+ box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
11893
+ }
11894
+
11895
+ .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button:not(:focus)::after {
11896
+ position: absolute;
11897
+ z-index: 6001;
11898
+ background: var(--cds-layer);
11899
+ block-size: 2px;
11900
+ content: "";
11901
+ inline-size: 100%;
11902
+ inset-block-end: 0;
11903
+ }
11904
+
11905
+ .cds--popover--tab-tip__button svg {
11906
+ fill: var(--cds-icon-primary, #161616);
11907
+ }
11908
+
11909
+ .cds--tooltip {
11910
+ --cds-popover-offset: 12px;
11911
+ }
11912
+
11913
+ .cds--tooltip-content {
11914
+ font-size: var(--cds-body-01-font-size, 0.875rem);
11915
+ font-weight: var(--cds-body-01-font-weight, 400);
11916
+ line-height: var(--cds-body-01-line-height, 1.42857);
11917
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
11918
+ padding: var(--cds-tooltip-padding-block, 1rem) var(--cds-tooltip-padding-inline, 1rem);
11919
+ color: var(--cds-text-inverse, #ffffff);
11920
+ max-inline-size: 18rem;
11921
+ }
11922
+
11923
+ .cds--icon-tooltip {
11924
+ --cds-tooltip-padding-block: 0.125rem;
11925
+ --cds-popover-caret-width: 0.5rem;
11926
+ --cds-popover-caret-height: 0.25rem;
11927
+ --cds-popover-offset: 0.5rem;
11928
+ }
11929
+
11930
+ .cds--icon-tooltip .cds--tooltip-content {
11931
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
11932
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
11933
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
11934
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
11935
+ }
11936
+
11937
+ .cds--definition-term {
11938
+ box-sizing: border-box;
11939
+ padding: 0;
11940
+ border: 0;
11941
+ margin: 0;
11942
+ font-family: inherit;
11943
+ font-size: 100%;
11944
+ vertical-align: baseline;
11945
+ display: inline-block;
11946
+ padding: 0;
11947
+ border: 0;
11948
+ appearance: none;
11949
+ background: none;
11950
+ cursor: pointer;
11951
+ text-align: start;
11952
+ inline-size: 100%;
11953
+ border-radius: 0;
11954
+ border-block-end: 1px dotted var(--cds-border-strong);
11955
+ color: var(--cds-text-primary, #161616);
11956
+ }
11957
+ .cds--definition-term *,
11958
+ .cds--definition-term *::before,
11959
+ .cds--definition-term *::after {
11960
+ box-sizing: inherit;
11961
+ }
11962
+ .cds--definition-term::-moz-focus-inner {
11963
+ border: 0;
11964
+ }
11965
+
11966
+ .cds--definition-term:focus {
11967
+ outline: 1px solid var(--cds-focus, #0f62fe);
11968
+ border-block-end-color: var(--cds-border-interactive, #0f62fe);
11969
+ }
11970
+ @media screen and (prefers-contrast) {
11971
+ .cds--definition-term:focus {
11972
+ outline-style: dotted;
11973
+ }
11974
+ }
11975
+
11976
+ .cds--definition-term:hover {
11977
+ border-block-end-color: var(--cds-border-interactive, #0f62fe);
11978
+ }
11979
+
11980
+ .cds--definition-tooltip {
11981
+ font-size: var(--cds-body-01-font-size, 0.875rem);
11982
+ font-weight: var(--cds-body-01-font-weight, 400);
11983
+ line-height: var(--cds-body-01-line-height, 1.42857);
11984
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
11985
+ padding: 0.5rem 1rem;
11986
+ max-inline-size: 11rem;
11987
+ }
11988
+
11989
+ .c4p--user-avatar {
11990
+ position: relative;
11991
+ display: flex;
11992
+ width: 4rem;
11993
+ height: 4rem;
11994
+ align-items: center;
11995
+ justify-content: center;
11996
+ border: 0.5px solid transparent;
11997
+ border-radius: 100%;
11998
+ color: var(--cds-text-inverse, #ffffff);
11999
+ outline: none;
12000
+ outline-offset: 3px;
12001
+ }
12002
+
12003
+ .c4p--user-avatar svg {
12004
+ color: var(--cds-icon-inverse, #ffffff);
12005
+ }
12006
+
12007
+ .c4p--user-avatar__tooltip:focus-within .c4p--user-avatar {
12008
+ outline: 2px solid var(--cds-focus, #0f62fe);
12009
+ outline-offset: 1px;
12010
+ }
12011
+
12012
+ :root .c4p--user-avatar--order-1-cyan,
12013
+ .cds--g10 .c4p--user-avatar--order-1-cyan,
12014
+ .cds--white .c4p--user-avatar--order-1-cyan,
12015
+ [storybook-carbon-theme=g10] .c4p--user-avatar--order-1-cyan,
12016
+ [storybook-carbon-theme=white] .c4p--user-avatar--order-1-cyan {
12017
+ background-color: #0072c3;
12018
+ }
12019
+
12020
+ :root .c4p--user-avatar--order-2-gray,
12021
+ .cds--g10 .c4p--user-avatar--order-2-gray,
12022
+ .cds--white .c4p--user-avatar--order-2-gray,
12023
+ [storybook-carbon-theme=g10] .c4p--user-avatar--order-2-gray,
12024
+ [storybook-carbon-theme=white] .c4p--user-avatar--order-2-gray {
12025
+ background-color: #6f6f6f;
12026
+ }
12027
+
12028
+ :root .c4p--user-avatar--order-3-green,
12029
+ .cds--g10 .c4p--user-avatar--order-3-green,
12030
+ .cds--white .c4p--user-avatar--order-3-green,
12031
+ [storybook-carbon-theme=g10] .c4p--user-avatar--order-3-green,
12032
+ [storybook-carbon-theme=white] .c4p--user-avatar--order-3-green {
12033
+ background-color: #198038;
12034
+ }
12035
+
12036
+ :root .c4p--user-avatar--order-4-magenta,
12037
+ .cds--g10 .c4p--user-avatar--order-4-magenta,
12038
+ .cds--white .c4p--user-avatar--order-4-magenta,
12039
+ [storybook-carbon-theme=g10] .c4p--user-avatar--order-4-magenta,
12040
+ [storybook-carbon-theme=white] .c4p--user-avatar--order-4-magenta {
12041
+ background-color: #d02670;
12042
+ }
12043
+
12044
+ :root .c4p--user-avatar--order-5-purple,
12045
+ .cds--g10 .c4p--user-avatar--order-5-purple,
12046
+ .cds--white .c4p--user-avatar--order-5-purple,
12047
+ [storybook-carbon-theme=g10] .c4p--user-avatar--order-5-purple,
12048
+ [storybook-carbon-theme=white] .c4p--user-avatar--order-5-purple {
12049
+ background-color: #8a3ffc;
12050
+ }
12051
+
12052
+ :root .c4p--user-avatar--order-6-teal,
12053
+ .cds--g10 .c4p--user-avatar--order-6-teal,
12054
+ .cds--white .c4p--user-avatar--order-6-teal,
12055
+ [storybook-carbon-theme=g10] .c4p--user-avatar--order-6-teal,
12056
+ [storybook-carbon-theme=white] .c4p--user-avatar--order-6-teal {
12057
+ background-color: #007d79;
12058
+ }
12059
+
12060
+ :root .c4p--user-avatar--order-7-cyan,
12061
+ .cds--g10 .c4p--user-avatar--order-7-cyan,
12062
+ .cds--white .c4p--user-avatar--order-7-cyan,
12063
+ [storybook-carbon-theme=g10] .c4p--user-avatar--order-7-cyan,
12064
+ [storybook-carbon-theme=white] .c4p--user-avatar--order-7-cyan {
12065
+ background-color: #003a6d;
12066
+ }
12067
+
12068
+ :root .c4p--user-avatar--order-8-gray,
12069
+ .cds--g10 .c4p--user-avatar--order-8-gray,
12070
+ .cds--white .c4p--user-avatar--order-8-gray,
12071
+ [storybook-carbon-theme=g10] .c4p--user-avatar--order-8-gray,
12072
+ [storybook-carbon-theme=white] .c4p--user-avatar--order-8-gray {
12073
+ background-color: #393939;
12074
+ }
12075
+
12076
+ :root .c4p--user-avatar--order-9-green,
12077
+ .cds--g10 .c4p--user-avatar--order-9-green,
12078
+ .cds--white .c4p--user-avatar--order-9-green,
12079
+ [storybook-carbon-theme=g10] .c4p--user-avatar--order-9-green,
12080
+ [storybook-carbon-theme=white] .c4p--user-avatar--order-9-green {
12081
+ background-color: #044317;
12082
+ }
12083
+
12084
+ :root .c4p--user-avatar--order-10-magenta,
12085
+ .cds--g10 .c4p--user-avatar--order-10-magenta,
12086
+ .cds--white .c4p--user-avatar--order-10-magenta,
12087
+ [storybook-carbon-theme=g10] .c4p--user-avatar--order-10-magenta,
12088
+ [storybook-carbon-theme=white] .c4p--user-avatar--order-10-magenta {
12089
+ background-color: #740937;
12090
+ }
12091
+
12092
+ :root .c4p--user-avatar--order-11-purple,
12093
+ .cds--g10 .c4p--user-avatar--order-11-purple,
12094
+ .cds--white .c4p--user-avatar--order-11-purple,
12095
+ [storybook-carbon-theme=g10] .c4p--user-avatar--order-11-purple,
12096
+ [storybook-carbon-theme=white] .c4p--user-avatar--order-11-purple {
12097
+ background-color: #491d8b;
12098
+ }
12099
+
12100
+ :root .c4p--user-avatar--order-12-teal,
12101
+ .cds--g10 .c4p--user-avatar--order-12-teal,
12102
+ .cds--white .c4p--user-avatar--order-12-teal,
12103
+ [storybook-carbon-theme=g10] .c4p--user-avatar--order-12-teal,
12104
+ [storybook-carbon-theme=white] .c4p--user-avatar--order-12-teal {
12105
+ background-color: #004144;
12106
+ }
12107
+
12108
+ .cds--g90 .c4p--user-avatar--order-1-cyan,
12109
+ .cds--g100 .c4p--user-avatar--order-1-cyan,
12110
+ [storybook-carbon-theme=g90] .c4p--user-avatar--order-1-cyan,
12111
+ [storybook-carbon-theme=g100] .c4p--user-avatar--order-1-cyan {
12112
+ background-color: #1192e8;
12113
+ }
12114
+
12115
+ .cds--g90 .c4p--user-avatar--order-2-gray,
12116
+ .cds--g100 .c4p--user-avatar--order-2-gray,
12117
+ [storybook-carbon-theme=g90] .c4p--user-avatar--order-2-gray,
12118
+ [storybook-carbon-theme=g100] .c4p--user-avatar--order-2-gray {
12119
+ background-color: #8d8d8d;
12120
+ }
12121
+
12122
+ .cds--g90 .c4p--user-avatar--order-3-green,
12123
+ .cds--g100 .c4p--user-avatar--order-3-green,
12124
+ [storybook-carbon-theme=g90] .c4p--user-avatar--order-3-green,
12125
+ [storybook-carbon-theme=g100] .c4p--user-avatar--order-3-green {
12126
+ background-color: #24a148;
12127
+ }
12128
+
12129
+ .cds--g90 .c4p--user-avatar--order-4-magenta,
12130
+ .cds--g100 .c4p--user-avatar--order-4-magenta,
12131
+ [storybook-carbon-theme=g90] .c4p--user-avatar--order-4-magenta,
12132
+ [storybook-carbon-theme=g100] .c4p--user-avatar--order-4-magenta {
12133
+ background-color: #ee5396;
12134
+ }
12135
+
12136
+ .cds--g90 .c4p--user-avatar--order-5-purple,
12137
+ .cds--g100 .c4p--user-avatar--order-5-purple,
12138
+ [storybook-carbon-theme=g90] .c4p--user-avatar--order-5-purple,
12139
+ [storybook-carbon-theme=g100] .c4p--user-avatar--order-5-purple {
12140
+ background-color: #a56eff;
12141
+ }
12142
+
12143
+ .cds--g90 .c4p--user-avatar--order-6-teal,
12144
+ .cds--g100 .c4p--user-avatar--order-6-teal,
12145
+ [storybook-carbon-theme=g90] .c4p--user-avatar--order-6-teal,
12146
+ [storybook-carbon-theme=g100] .c4p--user-avatar--order-6-teal {
12147
+ background-color: #009d9a;
12148
+ }
12149
+
12150
+ .cds--g90 .c4p--user-avatar--order-7-cyan,
12151
+ .cds--g100 .c4p--user-avatar--order-7-cyan,
12152
+ [storybook-carbon-theme=g90] .c4p--user-avatar--order-7-cyan,
12153
+ [storybook-carbon-theme=g100] .c4p--user-avatar--order-7-cyan {
12154
+ background-color: #82cfff;
12155
+ }
12156
+
12157
+ .cds--g90 .c4p--user-avatar--order-8-gray,
12158
+ .cds--g100 .c4p--user-avatar--order-8-gray,
12159
+ [storybook-carbon-theme=g90] .c4p--user-avatar--order-8-gray,
12160
+ [storybook-carbon-theme=g100] .c4p--user-avatar--order-8-gray {
12161
+ background-color: #c6c6c6;
12162
+ }
12163
+
12164
+ .cds--g90 .c4p--user-avatar--order-9-green,
12165
+ .cds--g100 .c4p--user-avatar--order-9-green,
12166
+ [storybook-carbon-theme=g90] .c4p--user-avatar--order-9-green,
12167
+ [storybook-carbon-theme=g100] .c4p--user-avatar--order-9-green {
12168
+ background-color: #6fdc8c;
12169
+ }
12170
+
12171
+ .cds--g90 .c4p--user-avatar--order-10-magenta,
12172
+ .cds--g100 .c4p--user-avatar--order-10-magenta,
12173
+ [storybook-carbon-theme=g90] .c4p--user-avatar--order-10-magenta,
12174
+ [storybook-carbon-theme=g100] .c4p--user-avatar--order-10-magenta {
12175
+ background-color: #ffafd2;
12176
+ }
12177
+
12178
+ .cds--g90 .c4p--user-avatar--order-11-purple,
12179
+ .cds--g100 .c4p--user-avatar--order-11-purple,
12180
+ [storybook-carbon-theme=g90] .c4p--user-avatar--order-11-purple,
12181
+ [storybook-carbon-theme=g100] .c4p--user-avatar--order-11-purple {
12182
+ background-color: #d4bbff;
12183
+ }
12184
+
12185
+ .cds--g90 .c4p--user-avatar--order-12-teal,
12186
+ .cds--g100 .c4p--user-avatar--order-12-teal,
12187
+ [storybook-carbon-theme=g90] .c4p--user-avatar--order-12-teal,
12188
+ [storybook-carbon-theme=g100] .c4p--user-avatar--order-12-teal {
12189
+ background-color: #3ddbd9;
12190
+ }
12191
+
12192
+ .c4p--user-avatar--xl {
12193
+ width: 4rem;
12194
+ height: 4rem;
12195
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
12196
+ font-weight: var(--cds-heading-04-font-weight, 400);
12197
+ line-height: var(--cds-heading-04-line-height, 1.28572);
12198
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
12199
+ }
12200
+
12201
+ .c4p--user-avatar--lg {
12202
+ width: 3rem;
12203
+ height: 3rem;
12204
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
12205
+ font-weight: var(--cds-heading-03-font-weight, 400);
12206
+ line-height: var(--cds-heading-03-line-height, 1.4);
12207
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
12208
+ }
12209
+
12210
+ .c4p--user-avatar--md {
12211
+ width: 2rem;
12212
+ height: 2rem;
12213
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
12214
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
12215
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
12216
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
12217
+ }
12218
+
12219
+ .c4p--user-avatar--sm {
12220
+ width: 1.5rem;
12221
+ height: 1.5rem;
12222
+ font-size: var(--cds-label-01-font-size, 0.75rem);
12223
+ font-weight: var(--cds-label-01-font-weight, 400);
12224
+ line-height: var(--cds-label-01-line-height, 1.33333);
12225
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
12226
+ }
12227
+
12228
+ .c4p--user-avatar__photo {
12229
+ border-radius: 100%;
12230
+ object-fit: contain;
12231
+ }
12232
+
12233
+ .c4p--user-avatar__photo--xl {
12234
+ border-radius: 100%;
12235
+ object-fit: fill;
12236
+ width: 4rem;
12237
+ height: 4rem;
12238
+ }
12239
+
12240
+ .c4p--user-avatar__photo--lg {
12241
+ border-radius: 100%;
12242
+ object-fit: fill;
12243
+ width: 3rem;
12244
+ height: 3rem;
12245
+ }
12246
+
12247
+ .c4p--user-avatar__photo--md {
12248
+ border-radius: 100%;
12249
+ object-fit: fill;
12250
+ width: 2rem;
12251
+ height: 2rem;
12252
+ }
12253
+
12254
+ .c4p--user-avatar__photo--sm {
12255
+ border-radius: 100%;
12256
+ object-fit: fill;
12257
+ width: 1.5rem;
12258
+ height: 1.5rem;
12259
+ }
12260
+
11338
12261
  /*# sourceMappingURL=index-without-carbon-released-only.css.map */