@workday/canvas-kit-react 16.0.0-alpha.0499-next.0 → 16.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (325) hide show
  1. package/common/lib/CanvasProvider.tsx +156 -324
  2. package/common/lib/theming/README.md +49 -6
  3. package/common/lib/theming/brandScope.ts +566 -0
  4. package/common/lib/theming/index.ts +1 -0
  5. package/common/lib/theming/sanaTheme.ts +133 -0
  6. package/common/lib/theming/types.ts +292 -0
  7. package/dist/commonjs/action-bar/lib/ActionBarList.js +1 -1
  8. package/dist/commonjs/action-bar/lib/ActionBarOverflowButton.js +1 -1
  9. package/dist/commonjs/avatar/lib/Avatar.js +13 -13
  10. package/dist/commonjs/avatar/lib/AvatarImage.js +1 -1
  11. package/dist/commonjs/avatar/lib/AvatarName.js +1 -1
  12. package/dist/commonjs/avatar/lib/BaseAvatar.js +14 -14
  13. package/dist/commonjs/badge/lib/CountBadge.js +6 -6
  14. package/dist/commonjs/banner/lib/Banner.js +5 -5
  15. package/dist/commonjs/banner/lib/BannerActionText.js +2 -2
  16. package/dist/commonjs/banner/lib/BannerIcon.js +1 -1
  17. package/dist/commonjs/banner/lib/BannerLabel.js +1 -1
  18. package/dist/commonjs/breadcrumbs/lib/BreadcrumbsCurrentItem.js +1 -1
  19. package/dist/commonjs/breadcrumbs/lib/BreadcrumbsItem.js +1 -1
  20. package/dist/commonjs/breadcrumbs/lib/BreadcrumbsLink.js +1 -1
  21. package/dist/commonjs/breadcrumbs/lib/BreadcrumbsList.js +1 -1
  22. package/dist/commonjs/breadcrumbs/lib/BreadcrumbsMenu.js +2 -2
  23. package/dist/commonjs/breadcrumbs/lib/BreadcrumbsOverflowButton.js +1 -1
  24. package/dist/commonjs/button/lib/BaseButton.js +21 -21
  25. package/dist/commonjs/button/lib/DeleteButton.js +2 -2
  26. package/dist/commonjs/button/lib/ExternalHyperlink.js +1 -1
  27. package/dist/commonjs/button/lib/Hyperlink.js +5 -5
  28. package/dist/commonjs/button/lib/PrimaryButton.js +2 -2
  29. package/dist/commonjs/button/lib/SecondaryButton.js +2 -2
  30. package/dist/commonjs/button/lib/TertiaryButton.js +14 -14
  31. package/dist/commonjs/button/lib/ToolbarDropdownButton.js +3 -3
  32. package/dist/commonjs/button/lib/ToolbarIconButton.js +1 -1
  33. package/dist/commonjs/button/lib/parts/ButtonLabel.js +1 -1
  34. package/dist/commonjs/button/lib/parts/ButtonLabelIcon.js +5 -5
  35. package/dist/commonjs/card/lib/Card.js +3 -3
  36. package/dist/commonjs/card/lib/CardBody.js +1 -1
  37. package/dist/commonjs/card/lib/CardHeading.js +1 -1
  38. package/dist/commonjs/checkbox/lib/CheckBackground.js +6 -6
  39. package/dist/commonjs/checkbox/lib/CheckboxCheck.js +6 -6
  40. package/dist/commonjs/checkbox/lib/CheckboxContainer.js +2 -2
  41. package/dist/commonjs/checkbox/lib/CheckboxInput.js +5 -5
  42. package/dist/commonjs/checkbox/lib/CheckboxRipple.js +1 -1
  43. package/dist/commonjs/collection/lib/ListBox.js +3 -3
  44. package/dist/commonjs/color-picker/lib/ColorInput.js +3 -3
  45. package/dist/commonjs/color-picker/lib/ColorPreview.js +1 -1
  46. package/dist/commonjs/color-picker/lib/parts/ColorSwatch.js +2 -2
  47. package/dist/commonjs/combobox/lib/ComboboxMenuList.js +1 -1
  48. package/dist/commonjs/common/lib/AccessibleHide.js +1 -1
  49. package/dist/commonjs/common/lib/CanvasProvider.d.ts +296 -5
  50. package/dist/commonjs/common/lib/CanvasProvider.d.ts.map +1 -1
  51. package/dist/commonjs/common/lib/CanvasProvider.js +105 -287
  52. package/dist/commonjs/common/lib/EllipsisText.js +1 -1
  53. package/dist/commonjs/common/lib/styles/cornerShape.js +1 -1
  54. package/dist/commonjs/common/lib/theming/brandScope.d.ts +64 -0
  55. package/dist/commonjs/common/lib/theming/brandScope.d.ts.map +1 -0
  56. package/dist/commonjs/common/lib/theming/brandScope.js +499 -0
  57. package/dist/commonjs/common/lib/theming/index.d.ts +1 -0
  58. package/dist/commonjs/common/lib/theming/index.d.ts.map +1 -1
  59. package/dist/commonjs/common/lib/theming/index.js +1 -0
  60. package/dist/commonjs/common/lib/theming/sanaTheme.d.ts +33 -0
  61. package/dist/commonjs/common/lib/theming/sanaTheme.d.ts.map +1 -0
  62. package/dist/commonjs/common/lib/theming/sanaTheme.js +130 -0
  63. package/dist/commonjs/common/lib/theming/types.d.ts +162 -0
  64. package/dist/commonjs/common/lib/theming/types.d.ts.map +1 -1
  65. package/dist/commonjs/common/lib/theming/types.js +81 -1
  66. package/dist/commonjs/expandable/lib/Expandable.js +1 -1
  67. package/dist/commonjs/expandable/lib/ExpandableAvatar.js +1 -1
  68. package/dist/commonjs/expandable/lib/ExpandableContent.js +1 -1
  69. package/dist/commonjs/expandable/lib/ExpandableIcon.js +10 -10
  70. package/dist/commonjs/expandable/lib/ExpandableTarget.js +1 -1
  71. package/dist/commonjs/expandable/lib/ExpandableTitle.js +1 -1
  72. package/dist/commonjs/form-field/lib/FormFieldField.js +1 -1
  73. package/dist/commonjs/form-field/lib/FormFieldGroupLabel.js +5 -5
  74. package/dist/commonjs/form-field/lib/FormFieldGroupList.js +3 -3
  75. package/dist/commonjs/form-field/lib/FormFieldHint.js +3 -3
  76. package/dist/commonjs/form-field/lib/FormFieldLabel.js +6 -6
  77. package/dist/commonjs/form-field/lib/formFieldStencil.js +8 -8
  78. package/dist/commonjs/icon/lib/AccentIcon.js +2 -2
  79. package/dist/commonjs/icon/lib/AppletIcon.js +1 -1
  80. package/dist/commonjs/icon/lib/ExpressiveIcon.js +1 -1
  81. package/dist/commonjs/icon/lib/Graphic.js +4 -4
  82. package/dist/commonjs/icon/lib/Svg.js +3 -3
  83. package/dist/commonjs/icon/lib/SystemIcon.js +1 -1
  84. package/dist/commonjs/icon/lib/SystemIconCircle.js +2 -2
  85. package/dist/commonjs/information-highlight/lib/InformationHighlight.js +9 -9
  86. package/dist/commonjs/information-highlight/lib/parts/Body.js +3 -3
  87. package/dist/commonjs/information-highlight/lib/parts/Heading.js +3 -3
  88. package/dist/commonjs/information-highlight/lib/parts/Link.js +3 -3
  89. package/dist/commonjs/loading-dots/lib/LoadingDots.js +3 -3
  90. package/dist/commonjs/menu/lib/MenuCard.js +1 -1
  91. package/dist/commonjs/menu/lib/MenuDivider.js +1 -1
  92. package/dist/commonjs/menu/lib/MenuGroup.js +1 -1
  93. package/dist/commonjs/menu/lib/MenuItem.js +1 -1
  94. package/dist/commonjs/menu/lib/MenuList.js +3 -3
  95. package/dist/commonjs/modal/lib/ModalBody.js +1 -1
  96. package/dist/commonjs/modal/lib/ModalCard.js +1 -1
  97. package/dist/commonjs/modal/lib/ModalHeading.js +1 -1
  98. package/dist/commonjs/modal/lib/ModalOverflowOverlay.js +1 -1
  99. package/dist/commonjs/modal/lib/ModalOverlay.js +2 -2
  100. package/dist/commonjs/pagination/lib/Pagination/AdditionalDetails.js +2 -2
  101. package/dist/commonjs/pagination/lib/Pagination/Controls.js +2 -2
  102. package/dist/commonjs/pagination/lib/Pagination/GoTo/Form.js +1 -1
  103. package/dist/commonjs/pagination/lib/Pagination/GoTo/Label.js +1 -1
  104. package/dist/commonjs/pagination/lib/Pagination/GoTo/TextInput.js +1 -1
  105. package/dist/commonjs/pagination/lib/Pagination/Nav.js +1 -1
  106. package/dist/commonjs/pagination/lib/Pagination/PageButton.js +2 -2
  107. package/dist/commonjs/pagination/lib/Pagination/PageList.js +1 -1
  108. package/dist/commonjs/pagination/lib/Pagination/Pagination.js +1 -1
  109. package/dist/commonjs/pagination/lib/Pagination/common/List.js +2 -2
  110. package/dist/commonjs/pill/lib/Pill.d.ts +2 -2
  111. package/dist/commonjs/pill/lib/Pill.js +3 -3
  112. package/dist/commonjs/pill/lib/PillAvatar.js +1 -1
  113. package/dist/commonjs/pill/lib/PillCount.js +1 -1
  114. package/dist/commonjs/pill/lib/PillIcon.js +1 -1
  115. package/dist/commonjs/pill/lib/PillIconButton.js +1 -1
  116. package/dist/commonjs/pill/lib/PillLabel.js +1 -1
  117. package/dist/commonjs/popup/lib/PopupBody.js +1 -1
  118. package/dist/commonjs/popup/lib/PopupButtonGroup.js +5 -5
  119. package/dist/commonjs/popup/lib/PopupCard.js +2 -2
  120. package/dist/commonjs/popup/lib/PopupCloseIcon.js +1 -1
  121. package/dist/commonjs/popup/lib/PopupHeading.js +1 -1
  122. package/dist/commonjs/popup/lib/hooks/useDisableBodyScroll.js +1 -1
  123. package/dist/commonjs/popup/lib/hooks/usePopupStack.d.ts.map +1 -1
  124. package/dist/commonjs/popup/lib/hooks/usePopupStack.js +18 -16
  125. package/dist/commonjs/segmented-control/lib/SegmentedControlItem.js +16 -16
  126. package/dist/commonjs/segmented-control/lib/SegmentedControlList.js +6 -6
  127. package/dist/commonjs/select/lib/SelectCard.js +1 -1
  128. package/dist/commonjs/select/lib/SelectInput.js +3 -3
  129. package/dist/commonjs/side-panel/lib/SidePanel.js +8 -8
  130. package/dist/commonjs/side-panel/lib/SidePanelHeading.js +3 -3
  131. package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js +7 -7
  132. package/dist/commonjs/skeleton/lib/Skeleton.js +2 -2
  133. package/dist/commonjs/skeleton/lib/parts/SkeletonHeader.js +1 -1
  134. package/dist/commonjs/skeleton/lib/parts/SkeletonShape.js +2 -2
  135. package/dist/commonjs/skeleton/lib/parts/SkeletonText.js +2 -2
  136. package/dist/commonjs/switch/lib/Switch.js +7 -7
  137. package/dist/commonjs/table/lib/BaseTable.js +1 -1
  138. package/dist/commonjs/table/lib/Table.js +7 -7
  139. package/dist/commonjs/table/lib/parts/BaseTableBody.js +1 -1
  140. package/dist/commonjs/table/lib/parts/BaseTableCaption.js +1 -1
  141. package/dist/commonjs/table/lib/parts/BaseTableCell.js +1 -1
  142. package/dist/commonjs/table/lib/parts/BaseTableHead.js +1 -1
  143. package/dist/commonjs/table/lib/parts/BaseTableHeader.js +1 -1
  144. package/dist/commonjs/table/lib/parts/css-grid-table/TableRow.js +1 -1
  145. package/dist/commonjs/tabs/lib/TabsItem.js +1 -1
  146. package/dist/commonjs/tabs/lib/TabsList.js +8 -8
  147. package/dist/commonjs/tabs/lib/TabsOverflowButton.js +1 -1
  148. package/dist/commonjs/testing/lib/ComponentStatesTable.js +1 -1
  149. package/dist/commonjs/testing/lib/StaticStates.d.ts +2 -2
  150. package/dist/commonjs/testing/lib/StaticStates.d.ts.map +1 -1
  151. package/dist/commonjs/testing/lib/StaticStates.js +5 -2
  152. package/dist/commonjs/text/lib/LabelText.js +6 -6
  153. package/dist/commonjs/text/lib/Text.js +16 -16
  154. package/dist/commonjs/text/lib/TypeLevelComponents.js +4 -4
  155. package/dist/commonjs/text-area/lib/TextArea.js +5 -5
  156. package/dist/commonjs/text-input/lib/InputGroup.js +7 -7
  157. package/dist/commonjs/text-input/lib/TextInput.js +5 -5
  158. package/dist/commonjs/toast/lib/Toast.js +1 -1
  159. package/dist/commonjs/toast/lib/ToastBody.js +1 -1
  160. package/dist/commonjs/toast/lib/ToastCloseIcon.js +1 -1
  161. package/dist/commonjs/toast/lib/ToastIcon.js +1 -1
  162. package/dist/commonjs/toast/lib/ToastMessage.js +1 -1
  163. package/dist/commonjs/tooltip/lib/TooltipContainer.js +4 -4
  164. package/dist/commonjs/version/lib/version.js +1 -1
  165. package/dist/es6/action-bar/lib/ActionBarList.js +1 -1
  166. package/dist/es6/action-bar/lib/ActionBarOverflowButton.js +1 -1
  167. package/dist/es6/avatar/lib/Avatar.js +13 -13
  168. package/dist/es6/avatar/lib/AvatarImage.js +1 -1
  169. package/dist/es6/avatar/lib/AvatarName.js +1 -1
  170. package/dist/es6/avatar/lib/BaseAvatar.js +14 -14
  171. package/dist/es6/badge/lib/CountBadge.js +6 -6
  172. package/dist/es6/banner/lib/Banner.js +5 -5
  173. package/dist/es6/banner/lib/BannerActionText.js +2 -2
  174. package/dist/es6/banner/lib/BannerIcon.js +1 -1
  175. package/dist/es6/banner/lib/BannerLabel.js +1 -1
  176. package/dist/es6/breadcrumbs/lib/BreadcrumbsCurrentItem.js +1 -1
  177. package/dist/es6/breadcrumbs/lib/BreadcrumbsItem.js +1 -1
  178. package/dist/es6/breadcrumbs/lib/BreadcrumbsLink.js +1 -1
  179. package/dist/es6/breadcrumbs/lib/BreadcrumbsList.js +1 -1
  180. package/dist/es6/breadcrumbs/lib/BreadcrumbsMenu.js +2 -2
  181. package/dist/es6/breadcrumbs/lib/BreadcrumbsOverflowButton.js +1 -1
  182. package/dist/es6/button/lib/BaseButton.js +21 -21
  183. package/dist/es6/button/lib/DeleteButton.js +2 -2
  184. package/dist/es6/button/lib/ExternalHyperlink.js +1 -1
  185. package/dist/es6/button/lib/Hyperlink.js +5 -5
  186. package/dist/es6/button/lib/PrimaryButton.js +2 -2
  187. package/dist/es6/button/lib/SecondaryButton.js +2 -2
  188. package/dist/es6/button/lib/TertiaryButton.js +14 -14
  189. package/dist/es6/button/lib/ToolbarDropdownButton.js +3 -3
  190. package/dist/es6/button/lib/ToolbarIconButton.js +1 -1
  191. package/dist/es6/button/lib/parts/ButtonLabel.js +1 -1
  192. package/dist/es6/button/lib/parts/ButtonLabelIcon.js +5 -5
  193. package/dist/es6/card/lib/Card.js +3 -3
  194. package/dist/es6/card/lib/CardBody.js +1 -1
  195. package/dist/es6/card/lib/CardHeading.js +1 -1
  196. package/dist/es6/checkbox/lib/CheckBackground.js +6 -6
  197. package/dist/es6/checkbox/lib/CheckboxCheck.js +6 -6
  198. package/dist/es6/checkbox/lib/CheckboxContainer.js +2 -2
  199. package/dist/es6/checkbox/lib/CheckboxInput.js +5 -5
  200. package/dist/es6/checkbox/lib/CheckboxRipple.js +1 -1
  201. package/dist/es6/collection/lib/ListBox.js +3 -3
  202. package/dist/es6/color-picker/lib/ColorInput.js +3 -3
  203. package/dist/es6/color-picker/lib/ColorPreview.js +1 -1
  204. package/dist/es6/color-picker/lib/parts/ColorSwatch.js +2 -2
  205. package/dist/es6/combobox/lib/ComboboxMenuList.js +1 -1
  206. package/dist/es6/common/lib/AccessibleHide.js +1 -1
  207. package/dist/es6/common/lib/CanvasProvider.d.ts +296 -5
  208. package/dist/es6/common/lib/CanvasProvider.d.ts.map +1 -1
  209. package/dist/es6/common/lib/CanvasProvider.js +82 -288
  210. package/dist/es6/common/lib/EllipsisText.js +1 -1
  211. package/dist/es6/common/lib/styles/cornerShape.js +1 -1
  212. package/dist/es6/common/lib/theming/brandScope.d.ts +64 -0
  213. package/dist/es6/common/lib/theming/brandScope.d.ts.map +1 -0
  214. package/dist/es6/common/lib/theming/brandScope.js +483 -0
  215. package/dist/es6/common/lib/theming/index.d.ts +1 -0
  216. package/dist/es6/common/lib/theming/index.d.ts.map +1 -1
  217. package/dist/es6/common/lib/theming/index.js +1 -0
  218. package/dist/es6/common/lib/theming/sanaTheme.d.ts +33 -0
  219. package/dist/es6/common/lib/theming/sanaTheme.d.ts.map +1 -0
  220. package/dist/es6/common/lib/theming/sanaTheme.js +127 -0
  221. package/dist/es6/common/lib/theming/types.d.ts +162 -0
  222. package/dist/es6/common/lib/theming/types.d.ts.map +1 -1
  223. package/dist/es6/common/lib/theming/types.js +78 -0
  224. package/dist/es6/expandable/lib/Expandable.js +1 -1
  225. package/dist/es6/expandable/lib/ExpandableAvatar.js +1 -1
  226. package/dist/es6/expandable/lib/ExpandableContent.js +1 -1
  227. package/dist/es6/expandable/lib/ExpandableIcon.js +10 -10
  228. package/dist/es6/expandable/lib/ExpandableTarget.js +1 -1
  229. package/dist/es6/expandable/lib/ExpandableTitle.js +1 -1
  230. package/dist/es6/form-field/lib/FormFieldField.js +1 -1
  231. package/dist/es6/form-field/lib/FormFieldGroupLabel.js +5 -5
  232. package/dist/es6/form-field/lib/FormFieldGroupList.js +3 -3
  233. package/dist/es6/form-field/lib/FormFieldHint.js +3 -3
  234. package/dist/es6/form-field/lib/FormFieldLabel.js +6 -6
  235. package/dist/es6/form-field/lib/formFieldStencil.js +8 -8
  236. package/dist/es6/icon/lib/AccentIcon.js +2 -2
  237. package/dist/es6/icon/lib/AppletIcon.js +1 -1
  238. package/dist/es6/icon/lib/ExpressiveIcon.js +1 -1
  239. package/dist/es6/icon/lib/Graphic.js +4 -4
  240. package/dist/es6/icon/lib/Svg.js +3 -3
  241. package/dist/es6/icon/lib/SystemIcon.js +1 -1
  242. package/dist/es6/icon/lib/SystemIconCircle.js +2 -2
  243. package/dist/es6/information-highlight/lib/InformationHighlight.js +9 -9
  244. package/dist/es6/information-highlight/lib/parts/Body.js +3 -3
  245. package/dist/es6/information-highlight/lib/parts/Heading.js +3 -3
  246. package/dist/es6/information-highlight/lib/parts/Link.js +3 -3
  247. package/dist/es6/loading-dots/lib/LoadingDots.js +3 -3
  248. package/dist/es6/menu/lib/MenuCard.js +1 -1
  249. package/dist/es6/menu/lib/MenuDivider.js +1 -1
  250. package/dist/es6/menu/lib/MenuGroup.js +1 -1
  251. package/dist/es6/menu/lib/MenuItem.js +1 -1
  252. package/dist/es6/menu/lib/MenuList.js +3 -3
  253. package/dist/es6/modal/lib/ModalBody.js +1 -1
  254. package/dist/es6/modal/lib/ModalCard.js +1 -1
  255. package/dist/es6/modal/lib/ModalHeading.js +1 -1
  256. package/dist/es6/modal/lib/ModalOverflowOverlay.js +1 -1
  257. package/dist/es6/modal/lib/ModalOverlay.js +2 -2
  258. package/dist/es6/pagination/lib/Pagination/AdditionalDetails.js +2 -2
  259. package/dist/es6/pagination/lib/Pagination/Controls.js +2 -2
  260. package/dist/es6/pagination/lib/Pagination/GoTo/Form.js +1 -1
  261. package/dist/es6/pagination/lib/Pagination/GoTo/Label.js +1 -1
  262. package/dist/es6/pagination/lib/Pagination/GoTo/TextInput.js +1 -1
  263. package/dist/es6/pagination/lib/Pagination/Nav.js +1 -1
  264. package/dist/es6/pagination/lib/Pagination/PageButton.js +2 -2
  265. package/dist/es6/pagination/lib/Pagination/PageList.js +1 -1
  266. package/dist/es6/pagination/lib/Pagination/Pagination.js +1 -1
  267. package/dist/es6/pagination/lib/Pagination/common/List.js +2 -2
  268. package/dist/es6/pill/lib/Pill.d.ts +2 -2
  269. package/dist/es6/pill/lib/Pill.js +3 -3
  270. package/dist/es6/pill/lib/PillAvatar.js +1 -1
  271. package/dist/es6/pill/lib/PillCount.js +1 -1
  272. package/dist/es6/pill/lib/PillIcon.js +1 -1
  273. package/dist/es6/pill/lib/PillIconButton.js +1 -1
  274. package/dist/es6/pill/lib/PillLabel.js +1 -1
  275. package/dist/es6/popup/lib/PopupBody.js +1 -1
  276. package/dist/es6/popup/lib/PopupButtonGroup.js +5 -5
  277. package/dist/es6/popup/lib/PopupCard.js +2 -2
  278. package/dist/es6/popup/lib/PopupCloseIcon.js +1 -1
  279. package/dist/es6/popup/lib/PopupHeading.js +1 -1
  280. package/dist/es6/popup/lib/hooks/useDisableBodyScroll.js +1 -1
  281. package/dist/es6/popup/lib/hooks/usePopupStack.d.ts.map +1 -1
  282. package/dist/es6/popup/lib/hooks/usePopupStack.js +13 -11
  283. package/dist/es6/segmented-control/lib/SegmentedControlItem.js +16 -16
  284. package/dist/es6/segmented-control/lib/SegmentedControlList.js +6 -6
  285. package/dist/es6/select/lib/SelectCard.js +1 -1
  286. package/dist/es6/select/lib/SelectInput.js +3 -3
  287. package/dist/es6/side-panel/lib/SidePanel.js +8 -8
  288. package/dist/es6/side-panel/lib/SidePanelHeading.js +3 -3
  289. package/dist/es6/side-panel/lib/SidePanelToggleButton.js +7 -7
  290. package/dist/es6/skeleton/lib/Skeleton.js +2 -2
  291. package/dist/es6/skeleton/lib/parts/SkeletonHeader.js +1 -1
  292. package/dist/es6/skeleton/lib/parts/SkeletonShape.js +2 -2
  293. package/dist/es6/skeleton/lib/parts/SkeletonText.js +2 -2
  294. package/dist/es6/switch/lib/Switch.js +7 -7
  295. package/dist/es6/table/lib/BaseTable.js +1 -1
  296. package/dist/es6/table/lib/Table.js +7 -7
  297. package/dist/es6/table/lib/parts/BaseTableBody.js +1 -1
  298. package/dist/es6/table/lib/parts/BaseTableCaption.js +1 -1
  299. package/dist/es6/table/lib/parts/BaseTableCell.js +1 -1
  300. package/dist/es6/table/lib/parts/BaseTableHead.js +1 -1
  301. package/dist/es6/table/lib/parts/BaseTableHeader.js +1 -1
  302. package/dist/es6/table/lib/parts/css-grid-table/TableRow.js +1 -1
  303. package/dist/es6/tabs/lib/TabsItem.js +1 -1
  304. package/dist/es6/tabs/lib/TabsList.js +8 -8
  305. package/dist/es6/tabs/lib/TabsOverflowButton.js +1 -1
  306. package/dist/es6/testing/lib/ComponentStatesTable.js +1 -1
  307. package/dist/es6/testing/lib/StaticStates.d.ts +2 -2
  308. package/dist/es6/testing/lib/StaticStates.d.ts.map +1 -1
  309. package/dist/es6/testing/lib/StaticStates.js +6 -3
  310. package/dist/es6/text/lib/LabelText.js +6 -6
  311. package/dist/es6/text/lib/Text.js +16 -16
  312. package/dist/es6/text/lib/TypeLevelComponents.js +4 -4
  313. package/dist/es6/text-area/lib/TextArea.js +5 -5
  314. package/dist/es6/text-input/lib/InputGroup.js +7 -7
  315. package/dist/es6/text-input/lib/TextInput.js +5 -5
  316. package/dist/es6/toast/lib/Toast.js +1 -1
  317. package/dist/es6/toast/lib/ToastBody.js +1 -1
  318. package/dist/es6/toast/lib/ToastCloseIcon.js +1 -1
  319. package/dist/es6/toast/lib/ToastIcon.js +1 -1
  320. package/dist/es6/toast/lib/ToastMessage.js +1 -1
  321. package/dist/es6/tooltip/lib/TooltipContainer.js +4 -4
  322. package/dist/es6/version/lib/version.js +1 -1
  323. package/package.json +4 -4
  324. package/popup/lib/hooks/usePopupStack.ts +13 -11
  325. package/testing/lib/StaticStates.tsx +11 -9
@@ -66,20 +66,20 @@ export const useTabsList = composeHooks(useTabOverflowScroll, createElemPropsHoo
66
66
  };
67
67
  }), useOverflowListMeasure, useListResetCursorOnBlur);
68
68
  export const tabsListStencil = createStencil({
69
- base: { name: "411qnq", styles: "box-sizing:border-box;display:flex;position:relative;border-block-end:0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));padding-inline:var(--cnvs-base-size-500, 2.5rem);@media screen and (max-width: 768px){padding-inline:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));}" },
69
+ base: { name: "3fc8rr", styles: "box-sizing:border-box;display:flex;position:relative;border-block-end:0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));padding-inline:var(--cnvs-base-size-500, 2.5rem);@media screen and (max-width: 768px){padding-inline:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));}" },
70
70
  modifiers: {
71
71
  modality: {
72
- touch: { name: "1xvd3i", styles: "overflow-x:auto;padding-inline:0;&[data-scroll-position=\"start\"]{mask-image:linear-gradient(to right, white 80%, transparent);}&[data-scroll-position=\"middle\"]{mask-image:linear-gradient(to left, white 80%, transparent), linear-gradient(to right, white 80%, transparent);mask-composite:intersect;}&[data-scroll-position=\"end\"]{mask-image:linear-gradient(to left, white 80%, transparent);}" },
73
- mouse: { name: "3trogi", styles: "" },
74
- pen: { name: "440gvx", styles: "" }
72
+ touch: { name: "2a702q", styles: "overflow-x:auto;padding-inline:0;&[data-scroll-position=\"start\"]{mask-image:linear-gradient(to right, white 80%, transparent);}&[data-scroll-position=\"middle\"]{mask-image:linear-gradient(to left, white 80%, transparent), linear-gradient(to right, white 80%, transparent);mask-composite:intersect;}&[data-scroll-position=\"end\"]{mask-image:linear-gradient(to left, white 80%, transparent);}" },
73
+ mouse: { name: "47kjsi", styles: "" },
74
+ pen: { name: "5328k", styles: "" }
75
75
  },
76
76
  isDragging: {
77
- true: { name: "n9ef3", styles: "" },
78
- false: { name: "2981qh", styles: "" }
77
+ true: { name: "204u6w", styles: "" },
78
+ false: { name: "4av5y6", styles: "" }
79
79
  },
80
80
  direction: {
81
- left: { name: "2du4ms", styles: "" },
82
- right: { name: "jamcn", styles: "" }
81
+ left: { name: "1yb99u", styles: "" },
82
+ right: { name: "3gk6f1", styles: "" }
83
83
  }
84
84
  }
85
85
  }, "tabs-list-917c0e");
@@ -9,7 +9,7 @@ import { chevronDownSmallIcon } from '@workday/canvas-system-icons-web';
9
9
  import { StyledTabItem } from './TabsItem';
10
10
  import { useTabsModel } from './useTabsModel';
11
11
  const tabsOverflowButtonStencil = createStencil({
12
- base: { name: "yr55e", styles: "box-sizing:border-box;&:has([data-part=\"tabs-overflow-button-icon\"]){display:flex;gap:0;}" }
12
+ base: { name: "3slhgn", styles: "box-sizing:border-box;&:has([data-part=\"tabs-overflow-button-icon\"]){display:flex;gap:0;}" }
13
13
  }, "tabs-overflow-button-c1675c");
14
14
  export const useTabsOverflowButton = composeHooks(createElemPropsHook(useTabsModel)(() => {
15
15
  return {
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { createStyles, px2rem } from '@workday/canvas-kit-styling';
3
3
  import { system } from '@workday/canvas-tokens-web';
4
- const tableStyles = createStyles({ name: "4ao8i", styles: "width:100%;thead{text-align:start;padding-block-end:var(--cnvs-sys-padding-md);}td, th{min-width:6.25rem;padding-block-end:var(--cnvs-sys-padding-md);padding-inline-end:var(--cnvs-sys-padding-md);text-align:start;}" });
4
+ const tableStyles = createStyles({ name: "t84kt", styles: "width:100%;thead{text-align:start;padding-block-end:var(--cnvs-sys-padding-md);}td, th{min-width:6.25rem;padding-block-end:var(--cnvs-sys-padding-md);padding-inline-end:var(--cnvs-sys-padding-md);text-align:start;}" });
5
5
  export const ComponentStatesTable = ({ rowProps, columnProps, children, }) => {
6
6
  return (_jsxs("table", { className: tableStyles, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Variants" }), columnProps.map(col => (_jsx("th", { children: col.label }, `component-table-heading-${col.label.toLowerCase().replace(' ', ',')}`)))] }) }), _jsx("tbody", { children: rowProps.map(row => {
7
7
  return (_jsxs("tr", { children: [_jsx("td", { children: row.label }), columnProps.map(col => {
@@ -1,8 +1,8 @@
1
1
  import * as React from 'react';
2
- import { PartialEmotionCanvasTheme, StyleRewriteFn } from '@workday/canvas-kit-react/common';
2
+ import { CanvasProviderTheme, StyleRewriteFn } from '@workday/canvas-kit-react/common';
3
3
  export declare const convertToStaticStates: StyleRewriteFn;
4
4
  export declare const StaticStates: React.FC<React.PropsWithChildren<{
5
- theme?: PartialEmotionCanvasTheme;
5
+ theme?: CanvasProviderTheme;
6
6
  className?: React.HTMLAttributes<HTMLElement>['className'];
7
7
  } & React.HTMLAttributes<HTMLElement>>>;
8
8
  //# sourceMappingURL=StaticStates.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"StaticStates.d.ts","sourceRoot":"","sources":["../../../../testing/lib/StaticStates.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,yBAAyB,EACzB,cAAc,EAEf,MAAM,kCAAkC,CAAC;AAG1C,eAAO,MAAM,qBAAqB,EAAE,cAoBnC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CACjC,KAAK,CAAC,iBAAiB,CACrB;IACE,KAAK,CAAC,EAAE,yBAAyB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,CAAC;CAC5D,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CACtC,CAeF,CAAC"}
1
+ {"version":3,"file":"StaticStates.d.ts","sourceRoot":"","sources":["../../../../testing/lib/StaticStates.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,mBAAmB,EAGnB,cAAc,EAGf,MAAM,kCAAkC,CAAC;AAG1C,eAAO,MAAM,qBAAqB,EAAE,cAoBnC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CACjC,KAAK,CAAC,iBAAiB,CACrB;IACE,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,CAAC;CAC5D,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CACtC,CAcF,CAAC"}
@@ -1,5 +1,6 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { CanvasProvider, useTheme, } from '@workday/canvas-kit-react/common';
2
+ import { ThemeProvider } from '@emotion/react';
3
+ import { CanvasProvider, isNumericalTheme, useTheme, } from '@workday/canvas-kit-react/common';
3
4
  export const convertToStaticStates = obj => {
4
5
  if (!obj) {
5
6
  return obj;
@@ -19,7 +20,9 @@ export const convertToStaticStates = obj => {
19
20
  }, {});
20
21
  };
21
22
  export const StaticStates = ({ children, theme, className, ...elemProps }) => {
22
- const localTheme = useTheme(theme);
23
+ const localTheme = useTheme(theme && !isNumericalTheme(theme) ? theme : undefined);
23
24
  localTheme._styleRewriteFn = convertToStaticStates;
24
- return (_jsx(CanvasProvider, { theme: localTheme, className: className, ...elemProps, "data-theme": "sana-canvas", children: children }));
25
+ // Nest ThemeProvider *inside* CanvasProvider so CanvasProvider's own ThemeProvider
26
+ // (used for legacy Emotion theme consumers) does not wipe `_styleRewriteFn`.
27
+ return (_jsx(CanvasProvider, { className: className, ...elemProps, theme: theme, children: _jsx(ThemeProvider, { theme: localTheme, children: children }) }));
25
28
  };
@@ -6,21 +6,21 @@ import { system } from '@workday/canvas-tokens-web';
6
6
  import { textStencil } from './Text';
7
7
  const labelTextStencil = createStencil({
8
8
  extends: textStencil,
9
- base: { name: "2ok5yw", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));color:var(--cnvs-sys-color-fg-default);" },
9
+ base: { name: "9a9ec", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));color:var(--cnvs-sys-color-fg-default);" },
10
10
  modifiers: {
11
11
  disabled: {
12
- true: { name: "22b0dp", styles: "cursor:default;color:var(--cnvs-sys-color-fg-disabled);" }
12
+ true: { name: "7y2z", styles: "cursor:default;color:var(--cnvs-sys-color-fg-disabled);" }
13
13
  },
14
14
  variant: {
15
- inverse: { name: "saoo5", styles: "color:var(--cnvs-sys-color-fg-inverse);" },
16
- error: { name: "1kko50", styles: "color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));" },
17
- hint: { name: "44ahhg", styles: "color:var(--cnvs-sys-color-fg-muted-default);" }
15
+ inverse: { name: "10v361", styles: "color:var(--cnvs-sys-color-fg-inverse);" },
16
+ error: { name: "1cbv0r", styles: "color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));" },
17
+ hint: { name: "1neipf", styles: "color:var(--cnvs-sys-color-fg-muted-default);" }
18
18
  }
19
19
  },
20
20
  compound: [
21
21
  {
22
22
  modifiers: { variant: 'inverse', disabled: true },
23
- styles: { name: "snjpb", styles: "opacity:var(--cnvs-sys-opacity-disabled);color:var(--cnvs-sys-color-fg-inverse);" }
23
+ styles: { name: "1j9sio", styles: "opacity:var(--cnvs-sys-opacity-disabled);color:var(--cnvs-sys-color-fg-inverse);" }
24
24
  }
25
25
  ]
26
26
  }, "label-text-3d99f1");
@@ -4,30 +4,30 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
4
4
  import { createStencil } from '@workday/canvas-kit-styling';
5
5
  import { system } from '@workday/canvas-tokens-web';
6
6
  export const textStencil = createStencil({
7
- base: { name: "4158rc", styles: "box-sizing:border-box;" },
7
+ base: { name: "u0nwi", styles: "box-sizing:border-box;" },
8
8
  modifiers: {
9
9
  typeLevel: {
10
10
  // Title level styles
11
- 'title.large': { name: "2uu4w9", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);font-size:var(--cnvs-sys-font-size-title-lg, var(--cnvs-sys-font-size-title-large, 3.5rem));line-height:var(--cnvs-sys-line-height-title-lg, var(--cnvs-sys-line-height-title-large, 4rem));color:var(--cnvs-sys-color-fg-strong);" },
12
- 'title.medium': { name: "43n8zw", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);font-size:var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem));line-height:var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem));color:var(--cnvs-sys-color-fg-strong);" },
13
- 'title.small': { name: "3ip4b1", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem));font-size:var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem));color:var(--cnvs-sys-color-fg-strong);" },
11
+ 'title.large': { name: "35ntup", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);font-size:var(--cnvs-sys-font-size-title-lg, var(--cnvs-sys-font-size-title-large, 3.5rem));line-height:var(--cnvs-sys-line-height-title-lg, var(--cnvs-sys-line-height-title-large, 4rem));color:var(--cnvs-sys-color-fg-strong);" },
12
+ 'title.medium': { name: "48lozg", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);font-size:var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem));line-height:var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem));color:var(--cnvs-sys-color-fg-strong);" },
13
+ 'title.small': { name: "jqd1q", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem));font-size:var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem));color:var(--cnvs-sys-color-fg-strong);" },
14
14
  // Heading level styles
15
- 'heading.large': { name: "3kxs75", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);font-size:var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem));line-height:var(--cnvs-sys-line-height-heading-lg, var(--cnvs-sys-line-height-heading-large, 2.5rem));color:var(--cnvs-sys-color-fg-strong);" },
16
- 'heading.medium': { name: "24gvuc", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);font-size:var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem));line-height:var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem));color:var(--cnvs-sys-color-fg-strong);" },
17
- 'heading.small': { name: "31snis", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);font-size:var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem));line-height:var(--cnvs-sys-line-height-heading-sm, var(--cnvs-sys-line-height-heading-small, 2rem));color:var(--cnvs-sys-color-fg-strong);" },
15
+ 'heading.large': { name: "1zfrcl", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);font-size:var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem));line-height:var(--cnvs-sys-line-height-heading-lg, var(--cnvs-sys-line-height-heading-large, 2.5rem));color:var(--cnvs-sys-color-fg-strong);" },
16
+ 'heading.medium': { name: "19d7jn", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);font-size:var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem));line-height:var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem));color:var(--cnvs-sys-color-fg-strong);" },
17
+ 'heading.small': { name: "3e7hi8", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);font-size:var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem));line-height:var(--cnvs-sys-line-height-heading-sm, var(--cnvs-sys-line-height-heading-small, 2rem));color:var(--cnvs-sys-color-fg-strong);" },
18
18
  // Body level styles
19
- 'body.large': { name: "1gp5ru", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));line-height:var(--cnvs-sys-line-height-body-lg, var(--cnvs-sys-line-height-body-large, 1.75rem));color:var(--cnvs-sys-color-fg-default);" },
20
- 'body.medium': { name: "1kwad6", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));color:var(--cnvs-sys-color-fg-default);" },
21
- 'body.small': { name: "1r1rjy", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem));line-height:var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem));letter-spacing:var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small));color:var(--cnvs-sys-color-fg-default);" },
19
+ 'body.large': { name: "ywtpj", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));line-height:var(--cnvs-sys-line-height-body-lg, var(--cnvs-sys-line-height-body-large, 1.75rem));color:var(--cnvs-sys-color-fg-default);" },
20
+ 'body.medium': { name: "1hlzw8", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));color:var(--cnvs-sys-color-fg-default);" },
21
+ 'body.small': { name: "32xvvk", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem));line-height:var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem));letter-spacing:var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small));color:var(--cnvs-sys-color-fg-default);" },
22
22
  // Subtext level styles
23
- 'subtext.large': { name: "3rq2di", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));color:var(--cnvs-sys-color-fg-default);" },
24
- 'subtext.medium': { name: "f2ppu", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));color:var(--cnvs-sys-color-fg-default);" },
25
- 'subtext.small': { name: "3ge76i", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem));line-height:var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small));color:var(--cnvs-sys-color-fg-default);" }
23
+ 'subtext.large': { name: "1aujzw", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));color:var(--cnvs-sys-color-fg-default);" },
24
+ 'subtext.medium': { name: "17zb8i", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));color:var(--cnvs-sys-color-fg-default);" },
25
+ 'subtext.small': { name: "37nd79", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem));line-height:var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small));color:var(--cnvs-sys-color-fg-default);" }
26
26
  },
27
27
  variant: {
28
- error: { name: "3o5jko", styles: "color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));" },
29
- hint: { name: "1ofyv9", styles: "color:var(--cnvs-sys-color-fg-muted-default);" },
30
- inverse: { name: "101wm6", styles: "color:var(--cnvs-sys-color-fg-inverse);" }
28
+ error: { name: "3bmcqb", styles: "color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));" },
29
+ hint: { name: "31d87j", styles: "color:var(--cnvs-sys-color-fg-muted-default);" },
30
+ inverse: { name: "1zeha", styles: "color:var(--cnvs-sys-color-fg-inverse);" }
31
31
  }
32
32
  }
33
33
  }, "text-479eff");
@@ -5,7 +5,7 @@ import { createStencil } from '@workday/canvas-kit-styling';
5
5
  import { textStencil } from './Text';
6
6
  const subtextStencil = createStencil({
7
7
  extends: textStencil,
8
- base: { name: "xghb9", styles: "box-sizing:border-box;" }
8
+ base: { name: "3p59m9", styles: "box-sizing:border-box;" }
9
9
  }, "subtext-5f1e4c");
10
10
  /**
11
11
  * This component is intended to be used for small subtext content or in tight spaces.
@@ -40,7 +40,7 @@ export const Subtext = createComponent('p')({
40
40
  });
41
41
  const bodyTextStencil = createStencil({
42
42
  extends: textStencil,
43
- base: { name: "ial1d", styles: "box-sizing:border-box;" }
43
+ base: { name: "6zsm2", styles: "box-sizing:border-box;" }
44
44
  }, "body-text-3fa494");
45
45
  /**
46
46
  * This component is intended to be used for standard body text.
@@ -75,7 +75,7 @@ export const BodyText = createComponent('p')({
75
75
  });
76
76
  export const headingStencil = createStencil({
77
77
  extends: textStencil,
78
- base: { name: "17n2p8", styles: "box-sizing:border-box;" }
78
+ base: { name: "3vnuc8", styles: "box-sizing:border-box;" }
79
79
  }, "heading-5f541c");
80
80
  /**
81
81
  * This component is intended to be used for headings and large text.
@@ -110,7 +110,7 @@ export const Heading = createComponent('h2')({
110
110
  });
111
111
  const titleStencil = createStencil({
112
112
  extends: textStencil,
113
- base: { name: "3unlyk", styles: "box-sizing:border-box;" }
113
+ base: { name: "3hrbti", styles: "box-sizing:border-box;" }
114
114
  }, "title-ee184f");
115
115
  /**
116
116
  * This component is intended to be used large page titles.
@@ -11,13 +11,13 @@ export const TextAreaResizeDirection = {
11
11
  };
12
12
  export const textAreaStencil = createStencil({
13
13
  extends: textInputStencil,
14
- base: { name: "2gzexe", styles: "box-sizing:border-box;min-height:var(--cnvs-sys-size-xxl, var(--cnvs-sys-space-x16, 4rem));min-width:17.5rem;&::webkit-resizer{display:none;}" },
14
+ base: { name: "11zry6", styles: "box-sizing:border-box;min-height:var(--cnvs-sys-size-xxl, var(--cnvs-sys-space-x16, 4rem));min-width:17.5rem;&::webkit-resizer{display:none;}" },
15
15
  modifiers: {
16
16
  resize: {
17
- both: { name: "1zl4ji", styles: "resize:both;" },
18
- horizontal: { name: "m048q", styles: "resize:horizontal;" },
19
- vertical: { name: "2fxvkd", styles: "resize:vertical;" },
20
- none: { name: "2t5qv1", styles: "resize:none;" }
17
+ both: { name: "1nt8gp", styles: "resize:both;" },
18
+ horizontal: { name: "q11tc", styles: "resize:horizontal;" },
19
+ vertical: { name: "3gxp2m", styles: "resize:vertical;" },
20
+ none: { name: "p7axs", styles: "resize:none;" }
21
21
  }
22
22
  },
23
23
  defaultModifiers: {
@@ -36,10 +36,10 @@ export const inputGroupInnerStencil = createStencil({
36
36
  */
37
37
  pointerEvents: '',
38
38
  },
39
- base: { name: "2b5byp", styles: "--insetInlineStart-input-group-inner-fddb83:initial;--insetInlineEnd-input-group-inner-fddb83:initial;--width-input-group-inner-fddb83:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));--height-input-group-inner-fddb83:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));box-sizing:border-box;display:flex;position:absolute;align-items:center;justify-content:center;width:var(--width-input-group-inner-fddb83);height:var(--height-input-group-inner-fddb83);inset-inline-start:var(--insetInlineStart-input-group-inner-fddb83);inset-inline-end:var(--insetInlineEnd-input-group-inner-fddb83);--size-svg-bca693:var(--cnvs-component-system-icon-size-xs);" },
39
+ base: { name: "1w1kac", styles: "--insetInlineStart-input-group-inner-fddb83:initial;--insetInlineEnd-input-group-inner-fddb83:initial;--width-input-group-inner-fddb83:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));--height-input-group-inner-fddb83:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));box-sizing:border-box;display:flex;position:absolute;align-items:center;justify-content:center;width:var(--width-input-group-inner-fddb83);height:var(--height-input-group-inner-fddb83);inset-inline-start:var(--insetInlineStart-input-group-inner-fddb83);inset-inline-end:var(--insetInlineEnd-input-group-inner-fddb83);--size-svg-bca693:var(--cnvs-component-system-icon-size-xs);" },
40
40
  modifiers: {
41
41
  pointerEvents: {
42
- _: { name: "3icuia", styles: "pointer-events:var(--pointerEvents-input-group-inner-fddb83);" }
42
+ _: { name: "3j63s4", styles: "pointer-events:var(--pointerEvents-input-group-inner-fddb83);" }
43
43
  }
44
44
  }
45
45
  }, "input-group-inner-fddb83");
@@ -77,13 +77,13 @@ export const inputGroupInputStencil = createStencil({
77
77
  paddingInlineStart: '',
78
78
  paddingInlineEnd: '',
79
79
  },
80
- base: { name: "k1427", styles: "box-sizing:border-box;display:flex;width:100%;" },
80
+ base: { name: "1sbxtf", styles: "box-sizing:border-box;display:flex;width:100%;" },
81
81
  modifiers: {
82
82
  paddingInlineStart: {
83
- _: { name: "1or18o", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-b51031);" }
83
+ _: { name: "u15tn", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-b51031);" }
84
84
  },
85
85
  paddingInlineEnd: {
86
- _: { name: "f8jts", styles: "padding-inline-end:var(--paddingInlineEnd-input-group-input-b51031);" }
86
+ _: { name: "1886aw", styles: "padding-inline-end:var(--paddingInlineEnd-input-group-input-b51031);" }
87
87
  }
88
88
  }
89
89
  }, "input-group-input-b51031");
@@ -117,7 +117,7 @@ export const useClearButton = createElemPropsHook(useInputGroupModel)(model => {
117
117
  };
118
118
  });
119
119
  const clearButtonStencil = createStencil({
120
- base: { name: "2xcotx", styles: "box-sizing:border-box;svg{--size-svg-bca693:var(--cnvs-component-system-icon-size-xs);}" }
120
+ base: { name: "2mcba3", styles: "box-sizing:border-box;svg{--size-svg-bca693:var(--cnvs-component-system-icon-size-xs);}" }
121
121
  }, "clear-button-49e5c1");
122
122
  /**
123
123
  * A clear input button. This can be a component later.
@@ -144,7 +144,7 @@ const wrapInCalc = (values) => {
144
144
  return `calc(${values.map(toPx).join(' + ')})`;
145
145
  };
146
146
  export const inputGroupStencil = createStencil({
147
- base: { name: "2yx8zs", styles: "box-sizing:border-box;display:flex;position:relative;align-items:center;& :has([data-part=\"input-group-clear-button\"]){transition:opacity 300ms ease;}&:where(:has(input:placeholder-shown)) :has([data-part=\"input-group-clear-button\"]){opacity:0;pointer-events:none;}" }
147
+ base: { name: "3abgtm", styles: "box-sizing:border-box;display:flex;position:relative;align-items:center;& :has([data-part=\"input-group-clear-button\"]){transition:opacity 300ms ease;}&:where(:has(input:placeholder-shown)) :has([data-part=\"input-group-clear-button\"]){opacity:0;pointer-events:none;}" }
148
148
  }, "input-group-1aae89");
149
149
  /**
150
150
  * An `InputGroup` is a container around a {@link TextInput} with optional inner start and end
@@ -8,15 +8,15 @@ export const textInputStencil = createStencil({
8
8
  vars: {
9
9
  width: '',
10
10
  },
11
- base: { name: "k5ohi", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));display:block;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));transition:0.2s box-shadow, 0.2s border-color;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));margin:0;width:var(--width-text-input-7c8776);min-width:var(--width-text-input-7c8776, 17.5rem);color:var(--cnvs-sys-color-fg-default);text-overflow:ellipsis;::-ms-clear{display:none;}&::placeholder{color:var(--cnvs-sys-color-fg-muted-default);}&:is(:hover, .hover):where(:not([disabled], .disabled)){border-color:var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)));}&:is(:focus-visible, .focus):where(:not([disabled])){border-color:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));outline:0.125rem solid transparent;}&:is(:disabled, .disabled){opacity:var(--cnvs-sys-opacity-disabled);&::placeholder{opacity:var(--cnvs-sys-opacity-disabled);}}" },
11
+ base: { name: "2p110d", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));display:block;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));transition:0.2s box-shadow, 0.2s border-color;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));margin:0;width:var(--width-text-input-7c8776);min-width:var(--width-text-input-7c8776, 17.5rem);color:var(--cnvs-sys-color-fg-default);text-overflow:ellipsis;::-ms-clear{display:none;}&::placeholder{color:var(--cnvs-sys-color-fg-muted-default);}&:is(:hover, .hover):where(:not([disabled], .disabled)){border-color:var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)));}&:is(:focus-visible, .focus):where(:not([disabled])){border-color:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));outline:0.125rem solid transparent;}&:is(:disabled, .disabled){opacity:var(--cnvs-sys-opacity-disabled);&::placeholder{opacity:var(--cnvs-sys-opacity-disabled);}}" },
12
12
  modifiers: {
13
13
  grow: {
14
- true: { name: "2ly6q7", styles: "width:100%;resize:vertical;" },
15
- false: { name: "3s9vgi", styles: "width:initial;" }
14
+ true: { name: "36khkm", styles: "width:100%;resize:vertical;" },
15
+ false: { name: "2i5o8j", styles: "width:initial;" }
16
16
  },
17
17
  error: {
18
- error: { name: "2rcpeg", styles: "border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1)),\n 0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));outline-offset:0.125rem;}@media (forced-colors: active){outline:solid 0.25rem ButtonBorder;}" },
19
- caution: { name: "41nppv", styles: "border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),\n 0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}outline-offset:0.125rem;@media (forced-colors: active){outline:solid 0.25rem ButtonBorder;outline-offset:0;}" }
18
+ error: { name: "1yt1ag", styles: "border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1)),\n 0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));outline-offset:0.125rem;}@media (forced-colors: active){outline:solid 0.25rem ButtonBorder;}" },
19
+ caution: { name: "2srawv", styles: "border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),\n 0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}outline-offset:0.125rem;@media (forced-colors: active){outline:solid 0.25rem ButtonBorder;outline-offset:0;}" }
20
20
  }
21
21
  },
22
22
  defaultModifiers: {
@@ -42,7 +42,7 @@ const getAriaAttributes = (mode, id) => {
42
42
  }
43
43
  };
44
44
  const toastStencil = createStencil({
45
- base: { name: "6z9bk", styles: "box-sizing:border-box;display:flex;flex-direction:row;width:22.5rem;padding-block:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding-inline:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));gap:var(--cnvs-base-size-150, 0.75rem);border-radius:var(--cnvs-sys-shape-xl, var(--cnvs-sys-shape-x4, 1rem));border:0.0625rem solid var(--cnvs-sys-color-border-default);box-shadow:var(--cnvs-sys-depth-5);@media (forced-colors: active){outline:0.0625rem solid CanvasText;}variant{alt{border:0.0625rem solid var(--cnvs-sys-color-border-elevated, oklch(1 0 0 / 1));}tonal{}}" }
45
+ base: { name: "3d2ard", styles: "box-sizing:border-box;display:flex;flex-direction:row;width:22.5rem;padding-block:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding-inline:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));gap:var(--cnvs-base-size-150, 0.75rem);border-radius:var(--cnvs-sys-shape-xl, var(--cnvs-sys-shape-x4, 1rem));border:0.0625rem solid var(--cnvs-sys-color-border-default);box-shadow:var(--cnvs-sys-depth-5);@media (forced-colors: active){outline:0.0625rem solid CanvasText;}variant{alt{border:0.0625rem solid var(--cnvs-sys-color-border-elevated, oklch(1 0 0 / 1));}tonal{}}" }
46
46
  }, "toast-4e8aec");
47
47
  /**
48
48
  * Toast is a compound component that has different modes based on its contents. The modes add the proper aria attributes for accessibility
@@ -3,7 +3,7 @@ import { createComponent } from '@workday/canvas-kit-react/common';
3
3
  import { Flex, mergeStyles } from '@workday/canvas-kit-react/layout';
4
4
  import { createStencil } from '@workday/canvas-kit-styling';
5
5
  export const toastBodyStencil = createStencil({
6
- base: { name: "30ogpn", styles: "box-sizing:border-box;align-items:flex-start;flex-direction:column;justify-content:center;flex-grow:1;gap:0;" }
6
+ base: { name: "1fqoyq", styles: "box-sizing:border-box;align-items:flex-start;flex-direction:column;justify-content:center;flex-grow:1;gap:0;" }
7
7
  }, "toast-body-36e90e");
8
8
  export const ToastBody = createComponent('div')({
9
9
  displayName: 'Toast.Body',
@@ -5,7 +5,7 @@ import { Popup } from '@workday/canvas-kit-react/popup';
5
5
  import { createStencil } from '@workday/canvas-kit-styling';
6
6
  import { base } from '@workday/canvas-tokens-web';
7
7
  export const toastCloseIconStencil = createStencil({
8
- base: { name: "3c997c", styles: "box-sizing:border-box;position:absolute;inset-block-start:var(--cnvs-base-size-50, 0.25rem);inset-inline-end:var(--cnvs-base-size-50, 0.25rem);" }
8
+ base: { name: "4enbun", styles: "box-sizing:border-box;position:absolute;inset-block-start:var(--cnvs-base-size-50, 0.25rem);inset-inline-end:var(--cnvs-base-size-50, 0.25rem);" }
9
9
  }, "toast-close-icon-05fbc5");
10
10
  export const ToastCloseIcon = createComponent('button')({
11
11
  displayName: 'Toast.CloseIcon',
@@ -4,7 +4,7 @@ import { SystemIcon } from '@workday/canvas-kit-react/icon';
4
4
  import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
5
5
  import { component } from '@workday/canvas-tokens-web';
6
6
  export const toastIconStencil = createStencil({
7
- base: { name: "32iux3", styles: "box-sizing:border-box;align-self:start;" }
7
+ base: { name: "cdga8", styles: "box-sizing:border-box;align-self:start;" }
8
8
  }, "toast-icon-7830d1");
9
9
  export const ToastIcon = createComponent('div')({
10
10
  displayName: 'Toast.Icon',
@@ -5,7 +5,7 @@ import { Subtext } from '@workday/canvas-kit-react/text';
5
5
  import { createStencil } from '@workday/canvas-kit-styling';
6
6
  import { useToastModel } from './hooks/useToastModel';
7
7
  export const toastMessageStencil = createStencil({
8
- base: { name: "2ue2oc", styles: "box-sizing:border-box;word-break:break-word;margin-block:0;" }
8
+ base: { name: "4w881", styles: "box-sizing:border-box;word-break:break-word;margin-block:0;" }
9
9
  }, "toast-message-ff5220");
10
10
  export const ToastMessage = createSubcomponent('p')({
11
11
  modelHook: useToastModel,
@@ -11,20 +11,20 @@ const tooltipTranslateVars = createVars({ id: "3e3693", args: ["positionX", "pos
11
11
  /**
12
12
  * Keyframe for the Tooltip animation.
13
13
  */
14
- const tooltipAnimation = keyframes({ name: "38ksuh", styles: "0%{opacity:0;transform:translate(var(--positionX-3e3693), var(--positionY-3e3693));}100%{opacity:1;transform:translate(0);}" });
14
+ const tooltipAnimation = keyframes({ name: "j18nn", styles: "0%{opacity:0;transform:translate(var(--positionX-3e3693), var(--positionY-3e3693));}100%{opacity:1;transform:translate(0);}" });
15
15
  export const tooltipContainerStencil = createStencil({
16
16
  vars: {
17
17
  tooltipTransformOriginHorizontal: '',
18
18
  tooltipTransformOriginVertical: '',
19
19
  background: '',
20
20
  },
21
- base: { name: "3fljd", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-normal, 400);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);display:inline-flex;position:relative;padding:0.375rem var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));color:var(--cnvs-sys-color-fg-default);animation-name:animation-38ksuh;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-3eb75c) var(--tooltipTransformOriginHorizontal-tooltip-container-3eb75c);margin:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));a{color:var(--cnvs-sys-color-fg-default);text-decoration:underline;}&:before{content:\"\";border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));border:0.0625rem solid var(--cnvs-sys-color-border-default);z-index:-1;margin:0;background:var(--background-tooltip-container-3eb75c, var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:var(--cnvs-sys-depth-3);}[data-popper-reference-hidden] &{visibility:hidden;pointer-events:none;}[data-popper-placement=\"top-start\"] &, [data-popper-placement=\"bottom-start\"] &{left:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"top-end\"] &, [data-popper-placement=\"bottom-end\"] &{right:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-start\"] &, [data-popper-placement=\"right-start\"] &{top:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-end\"] &, [data-popper-placement=\"right-end\"] &{bottom:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}@media (forced-colors: active){outline:0.0625rem solid CanvasText;}" },
21
+ base: { name: "1f0gh1", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-normal, 400);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);display:inline-flex;position:relative;padding:0.375rem var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));color:var(--cnvs-sys-color-fg-default);animation-name:animation-j18nn;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-3eb75c) var(--tooltipTransformOriginHorizontal-tooltip-container-3eb75c);margin:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));a{color:var(--cnvs-sys-color-fg-default);text-decoration:underline;}&:before{content:\"\";border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));border:0.0625rem solid var(--cnvs-sys-color-border-default);z-index:-1;margin:0;background:var(--background-tooltip-container-3eb75c, var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:var(--cnvs-sys-depth-3);}[data-popper-reference-hidden] &{visibility:hidden;pointer-events:none;}[data-popper-placement=\"top-start\"] &, [data-popper-placement=\"bottom-start\"] &{left:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"top-end\"] &, [data-popper-placement=\"bottom-end\"] &{right:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-start\"] &, [data-popper-placement=\"right-start\"] &{top:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-end\"] &, [data-popper-placement=\"right-end\"] &{bottom:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}@media (forced-colors: active){outline:0.0625rem solid CanvasText;}" },
22
22
  modifiers: {
23
23
  elementHasFocus: {
24
- true: { name: "3xiz5w", styles: "margin:0.375rem;" }
24
+ true: { name: "37gbci", styles: "margin:0.375rem;" }
25
25
  },
26
26
  variant: {
27
- alt: { name: "36lb76", styles: "&:before{background:var(--background-tooltip-container-3eb75c, var(--cnvs-sys-color-surface-elevated, linear-gradient(0deg, oklch(1 0 89.88 / 0.374) 0%, oklch(1 0 89.88 / 0.374) 100%), linear-gradient(0deg, oklch(0 0 0 / 0.0196) 0%, oklch(0 0 0 / 0.0196) 100%), oklch(1 0 0 / 1)));border:0.0625rem solid var(--cnvs-sys-color-border-elevated, oklch(1 0 0 / 1));}" }
27
+ alt: { name: "1h1xxx", styles: "&:before{background:var(--background-tooltip-container-3eb75c, var(--cnvs-sys-color-surface-elevated, linear-gradient(0deg, oklch(1 0 89.88 / 0.374) 0%, oklch(1 0 89.88 / 0.374) 100%), linear-gradient(0deg, oklch(0 0 0 / 0.0196) 0%, oklch(0 0 0 / 0.0196) 100%), oklch(1 0 0 / 1)));border:0.0625rem solid var(--cnvs-sys-color-border-elevated, oklch(1 0 0 / 1));}" }
28
28
  }
29
29
  }
30
30
  }, "tooltip-container-3eb75c");
@@ -1 +1 @@
1
- export const version = '15.1.4';
1
+ export const version = '16.0.0';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "16.0.0-alpha.0499-next.0",
3
+ "version": "16.0.0",
4
4
  "description": "The parent module that contains all Workday Canvas Kit React components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -53,8 +53,8 @@
53
53
  "@tanstack/react-virtual": "^3.13.9",
54
54
  "@workday/canvas-colors-web": "^2.0.0",
55
55
  "@workday/canvas-expressive-icons-web": "1.0.2",
56
- "@workday/canvas-kit-popup-stack": "^16.0.0-alpha.0499-next.0",
57
- "@workday/canvas-kit-styling": "^16.0.0-alpha.0499-next.0",
56
+ "@workday/canvas-kit-popup-stack": "^16.0.0",
57
+ "@workday/canvas-kit-styling": "^16.0.0",
58
58
  "@workday/canvas-system-icons-web": "^5.0.3",
59
59
  "@workday/canvas-tokens-web": "^4.4.0",
60
60
  "@workday/design-assets-types": "^0.3.0",
@@ -69,5 +69,5 @@
69
69
  "@workday/canvas-accent-icons-web": "^3.0.0",
70
70
  "@workday/canvas-applet-icons-web": "^2.0.0"
71
71
  },
72
- "gitHead": "cd5cbb846495120a4bffea4ee17b3b0a482e68c0"
72
+ "gitHead": "3f3f7e9a3251cf61ffb40f93dba3dd50d9f3e3cf"
73
73
  }
@@ -1,8 +1,7 @@
1
- import {Theme, ThemeContext} from '@emotion/react';
2
1
  import React from 'react';
3
2
 
4
3
  import {PopupStack} from '@workday/canvas-kit-popup-stack';
5
- import {isElementRTL, useCanvasThemeToCssVars, useLocalRef} from '@workday/canvas-kit-react/common';
4
+ import {CanvasBrandStyleContext, isElementRTL, useLocalRef} from '@workday/canvas-kit-react/common';
6
5
 
7
6
  /**
8
7
  * **Note:** If you're using {@link Popper}, you do not need to use this hook directly.
@@ -52,8 +51,8 @@ export const usePopupStack = <E extends HTMLElement>(
52
51
  ): React.RefObject<HTMLElement> => {
53
52
  const {elementRef, localRef} = useLocalRef(ref);
54
53
 
55
- const theme = React.useContext(ThemeContext as React.Context<Theme>);
56
- const {style} = useCanvasThemeToCssVars(theme, {});
54
+ // Read brand style from the context provided by CanvasProvider
55
+ const style = React.useContext(CanvasBrandStyleContext);
57
56
  const firstLoadRef = React.useRef(true); // React 19 can call a useState more than once, so we need to track if we've already created a container
58
57
 
59
58
  // useState function input ensures we only create a container once.
@@ -67,22 +66,25 @@ export const usePopupStack = <E extends HTMLElement>(
67
66
  return localRef.current;
68
67
  });
69
68
 
70
- // Forward only theme overrides (style) to the popup container when a theme was provided via
71
- // CanvasProvider theme prop. We do NOT apply defaultBranding (className) so we don't create a
72
- // cascade barrier—only the CSS variables the consumer overrode are set. This effect runs
73
- // before PopupStack.add below so the container has the theme before it's shown (avoids blue→magenta flash).
69
+ // Forward only CSS custom properties to the popup container when a theme was provided via
70
+ // CanvasProvider. We do NOT apply defaultBranding (className) so we don't create a cascade
71
+ // barrier. Filter to `--*` keys and string values so consumer layout styles from the provider
72
+ // are not copied onto the popup stack. Runs before PopupStack.add to avoid a theme flash.
74
73
  React.useLayoutEffect(() => {
75
74
  const element = localRef.current;
76
75
  if (!element) {
77
76
  return undefined;
78
77
  }
79
- const styleKeys = Object.keys(style);
78
+ const styleKeys = Object.keys(style).filter(key => key.startsWith('--'));
80
79
  if (styleKeys.length === 0) {
81
80
  return undefined;
82
81
  }
83
82
  for (const key of styleKeys) {
84
- // @ts-ignore - token keys are CSS custom property names
85
- element.style.setProperty(key, style[key]);
83
+ const value = style[key as keyof typeof style];
84
+ if (typeof value !== 'string') {
85
+ continue;
86
+ }
87
+ element.style.setProperty(key, value);
86
88
  }
87
89
  // No cleanup: leave theme on container so reopening doesn't flash
88
90
  return undefined;
@@ -1,10 +1,13 @@
1
+ import {ThemeProvider} from '@emotion/react';
1
2
  import * as React from 'react';
2
3
 
3
4
  import {
4
5
  CanvasProvider,
6
+ CanvasProviderTheme,
5
7
  EmotionCanvasTheme,
6
8
  PartialEmotionCanvasTheme,
7
9
  StyleRewriteFn,
10
+ isNumericalTheme,
8
11
  useTheme,
9
12
  } from '@workday/canvas-kit-react/common';
10
13
  import {CSSProperties} from '@workday/canvas-kit-react/tokens';
@@ -34,22 +37,21 @@ export const convertToStaticStates: StyleRewriteFn = obj => {
34
37
  export const StaticStates: React.FC<
35
38
  React.PropsWithChildren<
36
39
  {
37
- theme?: PartialEmotionCanvasTheme;
40
+ theme?: CanvasProviderTheme;
38
41
  className?: React.HTMLAttributes<HTMLElement>['className'];
39
42
  } & React.HTMLAttributes<HTMLElement>
40
43
  >
41
44
  > = ({children, theme, className, ...elemProps}) => {
42
- const localTheme: EmotionCanvasTheme & {_styleRewriteFn?: StyleRewriteFn} = useTheme(theme);
45
+ const localTheme: EmotionCanvasTheme & {_styleRewriteFn?: StyleRewriteFn} = useTheme(
46
+ theme && !isNumericalTheme(theme) ? (theme as PartialEmotionCanvasTheme) : undefined
47
+ );
43
48
  localTheme._styleRewriteFn = convertToStaticStates;
44
49
 
50
+ // Nest ThemeProvider *inside* CanvasProvider so CanvasProvider's own ThemeProvider
51
+ // (used for legacy Emotion theme consumers) does not wipe `_styleRewriteFn`.
45
52
  return (
46
- <CanvasProvider
47
- theme={localTheme}
48
- className={className}
49
- {...elemProps}
50
- data-theme="sana-canvas"
51
- >
52
- {children}
53
+ <CanvasProvider className={className} {...elemProps} theme={theme}>
54
+ <ThemeProvider theme={localTheme}>{children}</ThemeProvider>
53
55
  </CanvasProvider>
54
56
  );
55
57
  };