@workday/canvas-kit-react 15.0.4 → 15.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (341) hide show
  1. package/button/lib/ExternalHyperlink.tsx +1 -1
  2. package/button/lib/parts/ButtonLabel.tsx +5 -4
  3. package/checkbox/lib/CheckboxInput.tsx +1 -1
  4. package/common/lib/EllipsisText.tsx +12 -6
  5. package/dist/commonjs/action-bar/lib/ActionBarList.js +1 -1
  6. package/dist/commonjs/action-bar/lib/ActionBarOverflowButton.js +1 -1
  7. package/dist/commonjs/avatar/lib/Avatar.js +13 -13
  8. package/dist/commonjs/avatar/lib/AvatarImage.js +1 -1
  9. package/dist/commonjs/avatar/lib/AvatarName.js +1 -1
  10. package/dist/commonjs/avatar/lib/BaseAvatar.js +12 -12
  11. package/dist/commonjs/badge/lib/CountBadge.js +6 -6
  12. package/dist/commonjs/banner/lib/Banner.js +5 -5
  13. package/dist/commonjs/banner/lib/BannerActionText.js +2 -2
  14. package/dist/commonjs/banner/lib/BannerIcon.js +1 -1
  15. package/dist/commonjs/banner/lib/BannerLabel.js +1 -1
  16. package/dist/commonjs/breadcrumbs/lib/BreadcrumbsCurrentItem.js +1 -1
  17. package/dist/commonjs/breadcrumbs/lib/BreadcrumbsItem.js +1 -1
  18. package/dist/commonjs/breadcrumbs/lib/BreadcrumbsLink.js +1 -1
  19. package/dist/commonjs/breadcrumbs/lib/BreadcrumbsList.js +1 -1
  20. package/dist/commonjs/breadcrumbs/lib/BreadcrumbsMenu.js +2 -2
  21. package/dist/commonjs/breadcrumbs/lib/BreadcrumbsOverflowButton.js +1 -1
  22. package/dist/commonjs/button/lib/BaseButton.js +21 -21
  23. package/dist/commonjs/button/lib/DeleteButton.js +1 -1
  24. package/dist/commonjs/button/lib/ExternalHyperlink.d.ts +1 -1
  25. package/dist/commonjs/button/lib/ExternalHyperlink.js +2 -2
  26. package/dist/commonjs/button/lib/Hyperlink.js +4 -4
  27. package/dist/commonjs/button/lib/PrimaryButton.js +2 -2
  28. package/dist/commonjs/button/lib/SecondaryButton.js +2 -2
  29. package/dist/commonjs/button/lib/TertiaryButton.js +17 -17
  30. package/dist/commonjs/button/lib/ToolbarDropdownButton.js +3 -3
  31. package/dist/commonjs/button/lib/ToolbarIconButton.js +1 -1
  32. package/dist/commonjs/button/lib/parts/ButtonLabel.d.ts.map +1 -1
  33. package/dist/commonjs/button/lib/parts/ButtonLabel.js +3 -7
  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 +1 -1
  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/ComboboxCard.js +1 -1
  48. package/dist/commonjs/combobox/lib/ComboboxMenuList.js +1 -1
  49. package/dist/commonjs/common/lib/AccessibleHide.js +1 -1
  50. package/dist/commonjs/common/lib/CanvasProvider.js +1 -1
  51. package/dist/commonjs/common/lib/EllipsisText.d.ts +5 -3
  52. package/dist/commonjs/common/lib/EllipsisText.d.ts.map +1 -1
  53. package/dist/commonjs/common/lib/EllipsisText.js +5 -13
  54. package/dist/commonjs/expandable/lib/Expandable.js +1 -1
  55. package/dist/commonjs/expandable/lib/ExpandableAvatar.js +1 -1
  56. package/dist/commonjs/expandable/lib/ExpandableContent.js +1 -1
  57. package/dist/commonjs/expandable/lib/ExpandableIcon.js +10 -10
  58. package/dist/commonjs/expandable/lib/ExpandableTarget.js +3 -3
  59. package/dist/commonjs/expandable/lib/ExpandableTitle.js +1 -1
  60. package/dist/commonjs/form-field/lib/FormFieldField.js +1 -1
  61. package/dist/commonjs/form-field/lib/FormFieldGroupLabel.js +5 -5
  62. package/dist/commonjs/form-field/lib/FormFieldGroupList.js +3 -3
  63. package/dist/commonjs/form-field/lib/FormFieldHint.js +3 -3
  64. package/dist/commonjs/form-field/lib/FormFieldLabel.js +6 -6
  65. package/dist/commonjs/form-field/lib/formFieldStencil.js +8 -8
  66. package/dist/commonjs/icon/lib/AccentIcon.js +2 -2
  67. package/dist/commonjs/icon/lib/AppletIcon.js +1 -1
  68. package/dist/commonjs/icon/lib/ExpressiveIcon.js +1 -1
  69. package/dist/commonjs/icon/lib/Graphic.js +4 -4
  70. package/dist/commonjs/icon/lib/Svg.js +3 -3
  71. package/dist/commonjs/icon/lib/SystemIcon.js +1 -1
  72. package/dist/commonjs/icon/lib/SystemIconCircle.js +2 -2
  73. package/dist/commonjs/information-highlight/lib/InformationHighlight.js +7 -7
  74. package/dist/commonjs/information-highlight/lib/parts/Body.js +1 -1
  75. package/dist/commonjs/information-highlight/lib/parts/Heading.js +1 -1
  76. package/dist/commonjs/information-highlight/lib/parts/Link.js +1 -1
  77. package/dist/commonjs/layout/lib/Box.d.ts.map +1 -1
  78. package/dist/commonjs/layout/lib/Box.js +2 -0
  79. package/dist/commonjs/layout/lib/Flex.d.ts.map +1 -1
  80. package/dist/commonjs/layout/lib/Flex.js +1 -0
  81. package/dist/commonjs/layout/lib/Grid.d.ts.map +1 -1
  82. package/dist/commonjs/layout/lib/Grid.js +1 -0
  83. package/dist/commonjs/loading-dots/lib/LoadingDots.js +3 -3
  84. package/dist/commonjs/menu/lib/MenuCard.js +1 -1
  85. package/dist/commonjs/menu/lib/MenuDivider.js +1 -1
  86. package/dist/commonjs/menu/lib/MenuGroup.js +1 -1
  87. package/dist/commonjs/menu/lib/MenuItem.js +1 -1
  88. package/dist/commonjs/menu/lib/MenuList.js +3 -3
  89. package/dist/commonjs/modal/lib/ModalBody.js +1 -1
  90. package/dist/commonjs/modal/lib/ModalCard.js +1 -1
  91. package/dist/commonjs/modal/lib/ModalHeading.js +1 -1
  92. package/dist/commonjs/modal/lib/ModalOverflowOverlay.js +1 -1
  93. package/dist/commonjs/modal/lib/ModalOverlay.js +2 -2
  94. package/dist/commonjs/pagination/lib/Pagination/AdditionalDetails.js +2 -2
  95. package/dist/commonjs/pagination/lib/Pagination/Controls.js +2 -2
  96. package/dist/commonjs/pagination/lib/Pagination/GoTo/Form.js +1 -1
  97. package/dist/commonjs/pagination/lib/Pagination/GoTo/Label.js +1 -1
  98. package/dist/commonjs/pagination/lib/Pagination/GoTo/TextInput.js +1 -1
  99. package/dist/commonjs/pagination/lib/Pagination/Nav.js +1 -1
  100. package/dist/commonjs/pagination/lib/Pagination/PageButton.js +2 -2
  101. package/dist/commonjs/pagination/lib/Pagination/PageList.js +1 -1
  102. package/dist/commonjs/pagination/lib/Pagination/Pagination.js +1 -1
  103. package/dist/commonjs/pagination/lib/Pagination/common/List.js +2 -2
  104. package/dist/commonjs/pill/lib/Pill.js +3 -3
  105. package/dist/commonjs/pill/lib/PillAvatar.js +1 -1
  106. package/dist/commonjs/pill/lib/PillCount.js +1 -1
  107. package/dist/commonjs/pill/lib/PillIcon.js +1 -1
  108. package/dist/commonjs/pill/lib/PillIconButton.js +1 -1
  109. package/dist/commonjs/pill/lib/PillLabel.js +1 -1
  110. package/dist/commonjs/popup/lib/PopupBody.js +1 -1
  111. package/dist/commonjs/popup/lib/PopupCard.js +2 -2
  112. package/dist/commonjs/popup/lib/PopupCloseIcon.js +1 -1
  113. package/dist/commonjs/popup/lib/PopupHeading.js +1 -1
  114. package/dist/commonjs/popup/lib/hooks/useDisableBodyScroll.js +1 -1
  115. package/dist/commonjs/radio/lib/Radio.d.ts.map +1 -1
  116. package/dist/commonjs/radio/lib/Radio.js +1 -0
  117. package/dist/commonjs/radio/lib/RadioGroup.d.ts.map +1 -1
  118. package/dist/commonjs/radio/lib/RadioGroup.js +1 -0
  119. package/dist/commonjs/segmented-control/lib/SegmentedControlItem.js +16 -16
  120. package/dist/commonjs/segmented-control/lib/SegmentedControlList.js +3 -3
  121. package/dist/commonjs/select/lib/SelectCard.js +1 -1
  122. package/dist/commonjs/select/lib/SelectInput.js +3 -3
  123. package/dist/commonjs/side-panel/lib/SidePanel.js +7 -7
  124. package/dist/commonjs/side-panel/lib/SidePanelHeading.js +3 -3
  125. package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js +11 -11
  126. package/dist/commonjs/skeleton/lib/Skeleton.js +2 -2
  127. package/dist/commonjs/skeleton/lib/parts/SkeletonHeader.js +1 -1
  128. package/dist/commonjs/skeleton/lib/parts/SkeletonShape.js +1 -1
  129. package/dist/commonjs/skeleton/lib/parts/SkeletonText.js +1 -1
  130. package/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts.map +1 -1
  131. package/dist/commonjs/status-indicator/lib/StatusIndicator.js +2 -1
  132. package/dist/commonjs/switch/lib/Switch.js +8 -8
  133. package/dist/commonjs/table/lib/BaseTable.js +1 -1
  134. package/dist/commonjs/table/lib/Table.js +11 -11
  135. package/dist/commonjs/table/lib/parts/BaseTableBody.js +1 -1
  136. package/dist/commonjs/table/lib/parts/BaseTableCaption.js +1 -1
  137. package/dist/commonjs/table/lib/parts/BaseTableCell.js +1 -1
  138. package/dist/commonjs/table/lib/parts/BaseTableHead.js +1 -1
  139. package/dist/commonjs/table/lib/parts/BaseTableHeader.js +1 -1
  140. package/dist/commonjs/table/lib/parts/css-grid-table/TableRow.js +1 -1
  141. package/dist/commonjs/tabs/lib/Tabs.d.ts +1 -1
  142. package/dist/commonjs/tabs/lib/TabsItem.d.ts +1 -1
  143. package/dist/commonjs/tabs/lib/TabsItem.js +1 -1
  144. package/dist/commonjs/tabs/lib/TabsList.js +8 -8
  145. package/dist/commonjs/tabs/lib/TabsOverflowButton.js +1 -1
  146. package/dist/commonjs/tabs/lib/TabsPanel.d.ts.map +1 -1
  147. package/dist/commonjs/tabs/lib/TabsPanel.js +1 -3
  148. package/dist/commonjs/testing/lib/ComponentStatesTable.d.ts.map +1 -1
  149. package/dist/commonjs/testing/lib/ComponentStatesTable.js +4 -15
  150. package/dist/commonjs/text/lib/LabelText.js +6 -6
  151. package/dist/commonjs/text/lib/Text.js +16 -16
  152. package/dist/commonjs/text/lib/TypeLevelComponents.js +4 -4
  153. package/dist/commonjs/text-area/lib/TextArea.js +5 -5
  154. package/dist/commonjs/text-input/lib/InputGroup.js +6 -6
  155. package/dist/commonjs/text-input/lib/TextInput.js +5 -5
  156. package/dist/commonjs/toast/lib/Toast.js +1 -1
  157. package/dist/commonjs/toast/lib/ToastBody.js +1 -1
  158. package/dist/commonjs/toast/lib/ToastCloseIcon.js +1 -1
  159. package/dist/commonjs/toast/lib/ToastIcon.js +1 -1
  160. package/dist/commonjs/toast/lib/ToastMessage.js +1 -1
  161. package/dist/commonjs/tooltip/lib/TooltipContainer.js +3 -3
  162. package/dist/commonjs/version/lib/version.js +1 -1
  163. package/dist/es6/action-bar/lib/ActionBarList.js +1 -1
  164. package/dist/es6/action-bar/lib/ActionBarOverflowButton.js +1 -1
  165. package/dist/es6/avatar/lib/Avatar.js +13 -13
  166. package/dist/es6/avatar/lib/AvatarImage.js +1 -1
  167. package/dist/es6/avatar/lib/AvatarName.js +1 -1
  168. package/dist/es6/avatar/lib/BaseAvatar.js +12 -12
  169. package/dist/es6/badge/lib/CountBadge.js +6 -6
  170. package/dist/es6/banner/lib/Banner.js +5 -5
  171. package/dist/es6/banner/lib/BannerActionText.js +2 -2
  172. package/dist/es6/banner/lib/BannerIcon.js +1 -1
  173. package/dist/es6/banner/lib/BannerLabel.js +1 -1
  174. package/dist/es6/breadcrumbs/lib/BreadcrumbsCurrentItem.js +1 -1
  175. package/dist/es6/breadcrumbs/lib/BreadcrumbsItem.js +1 -1
  176. package/dist/es6/breadcrumbs/lib/BreadcrumbsLink.js +1 -1
  177. package/dist/es6/breadcrumbs/lib/BreadcrumbsList.js +1 -1
  178. package/dist/es6/breadcrumbs/lib/BreadcrumbsMenu.js +2 -2
  179. package/dist/es6/breadcrumbs/lib/BreadcrumbsOverflowButton.js +1 -1
  180. package/dist/es6/button/lib/BaseButton.js +21 -21
  181. package/dist/es6/button/lib/DeleteButton.js +1 -1
  182. package/dist/es6/button/lib/ExternalHyperlink.d.ts +1 -1
  183. package/dist/es6/button/lib/ExternalHyperlink.js +2 -2
  184. package/dist/es6/button/lib/Hyperlink.js +4 -4
  185. package/dist/es6/button/lib/PrimaryButton.js +2 -2
  186. package/dist/es6/button/lib/SecondaryButton.js +2 -2
  187. package/dist/es6/button/lib/TertiaryButton.js +17 -17
  188. package/dist/es6/button/lib/ToolbarDropdownButton.js +3 -3
  189. package/dist/es6/button/lib/ToolbarIconButton.js +1 -1
  190. package/dist/es6/button/lib/parts/ButtonLabel.d.ts.map +1 -1
  191. package/dist/es6/button/lib/parts/ButtonLabel.js +4 -8
  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 +1 -1
  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/ComboboxCard.js +1 -1
  206. package/dist/es6/combobox/lib/ComboboxMenuList.js +1 -1
  207. package/dist/es6/common/lib/AccessibleHide.js +1 -1
  208. package/dist/es6/common/lib/CanvasProvider.js +1 -1
  209. package/dist/es6/common/lib/EllipsisText.d.ts +5 -3
  210. package/dist/es6/common/lib/EllipsisText.d.ts.map +1 -1
  211. package/dist/es6/common/lib/EllipsisText.js +4 -9
  212. package/dist/es6/expandable/lib/Expandable.js +1 -1
  213. package/dist/es6/expandable/lib/ExpandableAvatar.js +1 -1
  214. package/dist/es6/expandable/lib/ExpandableContent.js +1 -1
  215. package/dist/es6/expandable/lib/ExpandableIcon.js +10 -10
  216. package/dist/es6/expandable/lib/ExpandableTarget.js +5 -5
  217. package/dist/es6/expandable/lib/ExpandableTitle.js +1 -1
  218. package/dist/es6/form-field/lib/FormFieldField.js +1 -1
  219. package/dist/es6/form-field/lib/FormFieldGroupLabel.js +5 -5
  220. package/dist/es6/form-field/lib/FormFieldGroupList.js +3 -3
  221. package/dist/es6/form-field/lib/FormFieldHint.js +3 -3
  222. package/dist/es6/form-field/lib/FormFieldLabel.js +6 -6
  223. package/dist/es6/form-field/lib/formFieldStencil.js +8 -8
  224. package/dist/es6/icon/lib/AccentIcon.js +2 -2
  225. package/dist/es6/icon/lib/AppletIcon.js +1 -1
  226. package/dist/es6/icon/lib/ExpressiveIcon.js +1 -1
  227. package/dist/es6/icon/lib/Graphic.js +4 -4
  228. package/dist/es6/icon/lib/Svg.js +3 -3
  229. package/dist/es6/icon/lib/SystemIcon.js +1 -1
  230. package/dist/es6/icon/lib/SystemIconCircle.js +2 -2
  231. package/dist/es6/information-highlight/lib/InformationHighlight.js +7 -7
  232. package/dist/es6/information-highlight/lib/parts/Body.js +1 -1
  233. package/dist/es6/information-highlight/lib/parts/Heading.js +1 -1
  234. package/dist/es6/information-highlight/lib/parts/Link.js +1 -1
  235. package/dist/es6/layout/lib/Box.d.ts.map +1 -1
  236. package/dist/es6/layout/lib/Box.js +2 -0
  237. package/dist/es6/layout/lib/Flex.d.ts.map +1 -1
  238. package/dist/es6/layout/lib/Flex.js +1 -0
  239. package/dist/es6/layout/lib/Grid.d.ts.map +1 -1
  240. package/dist/es6/layout/lib/Grid.js +1 -0
  241. package/dist/es6/loading-dots/lib/LoadingDots.js +3 -3
  242. package/dist/es6/menu/lib/MenuCard.js +1 -1
  243. package/dist/es6/menu/lib/MenuDivider.js +1 -1
  244. package/dist/es6/menu/lib/MenuGroup.js +1 -1
  245. package/dist/es6/menu/lib/MenuItem.js +1 -1
  246. package/dist/es6/menu/lib/MenuList.js +3 -3
  247. package/dist/es6/modal/lib/ModalBody.js +1 -1
  248. package/dist/es6/modal/lib/ModalCard.js +1 -1
  249. package/dist/es6/modal/lib/ModalHeading.js +1 -1
  250. package/dist/es6/modal/lib/ModalOverflowOverlay.js +1 -1
  251. package/dist/es6/modal/lib/ModalOverlay.js +2 -2
  252. package/dist/es6/pagination/lib/Pagination/AdditionalDetails.js +2 -2
  253. package/dist/es6/pagination/lib/Pagination/Controls.js +2 -2
  254. package/dist/es6/pagination/lib/Pagination/GoTo/Form.js +1 -1
  255. package/dist/es6/pagination/lib/Pagination/GoTo/Label.js +1 -1
  256. package/dist/es6/pagination/lib/Pagination/GoTo/TextInput.js +1 -1
  257. package/dist/es6/pagination/lib/Pagination/Nav.js +1 -1
  258. package/dist/es6/pagination/lib/Pagination/PageButton.js +2 -2
  259. package/dist/es6/pagination/lib/Pagination/PageList.js +1 -1
  260. package/dist/es6/pagination/lib/Pagination/Pagination.js +1 -1
  261. package/dist/es6/pagination/lib/Pagination/common/List.js +2 -2
  262. package/dist/es6/pill/lib/Pill.js +3 -3
  263. package/dist/es6/pill/lib/PillAvatar.js +1 -1
  264. package/dist/es6/pill/lib/PillCount.js +1 -1
  265. package/dist/es6/pill/lib/PillIcon.js +1 -1
  266. package/dist/es6/pill/lib/PillIconButton.js +1 -1
  267. package/dist/es6/pill/lib/PillLabel.js +1 -1
  268. package/dist/es6/popup/lib/PopupBody.js +1 -1
  269. package/dist/es6/popup/lib/PopupCard.js +2 -2
  270. package/dist/es6/popup/lib/PopupCloseIcon.js +1 -1
  271. package/dist/es6/popup/lib/PopupHeading.js +1 -1
  272. package/dist/es6/popup/lib/hooks/useDisableBodyScroll.js +1 -1
  273. package/dist/es6/radio/lib/Radio.d.ts.map +1 -1
  274. package/dist/es6/radio/lib/Radio.js +1 -0
  275. package/dist/es6/radio/lib/RadioGroup.d.ts.map +1 -1
  276. package/dist/es6/radio/lib/RadioGroup.js +1 -0
  277. package/dist/es6/segmented-control/lib/SegmentedControlItem.js +16 -16
  278. package/dist/es6/segmented-control/lib/SegmentedControlList.js +3 -3
  279. package/dist/es6/select/lib/SelectCard.js +1 -1
  280. package/dist/es6/select/lib/SelectInput.js +3 -3
  281. package/dist/es6/side-panel/lib/SidePanel.js +7 -7
  282. package/dist/es6/side-panel/lib/SidePanelHeading.js +3 -3
  283. package/dist/es6/side-panel/lib/SidePanelToggleButton.js +11 -11
  284. package/dist/es6/skeleton/lib/Skeleton.js +2 -2
  285. package/dist/es6/skeleton/lib/parts/SkeletonHeader.js +1 -1
  286. package/dist/es6/skeleton/lib/parts/SkeletonShape.js +1 -1
  287. package/dist/es6/skeleton/lib/parts/SkeletonText.js +1 -1
  288. package/dist/es6/status-indicator/lib/StatusIndicator.d.ts.map +1 -1
  289. package/dist/es6/status-indicator/lib/StatusIndicator.js +2 -1
  290. package/dist/es6/switch/lib/Switch.js +8 -8
  291. package/dist/es6/table/lib/BaseTable.js +1 -1
  292. package/dist/es6/table/lib/Table.js +11 -11
  293. package/dist/es6/table/lib/parts/BaseTableBody.js +1 -1
  294. package/dist/es6/table/lib/parts/BaseTableCaption.js +1 -1
  295. package/dist/es6/table/lib/parts/BaseTableCell.js +1 -1
  296. package/dist/es6/table/lib/parts/BaseTableHead.js +1 -1
  297. package/dist/es6/table/lib/parts/BaseTableHeader.js +1 -1
  298. package/dist/es6/table/lib/parts/css-grid-table/TableRow.js +1 -1
  299. package/dist/es6/tabs/lib/Tabs.d.ts +1 -1
  300. package/dist/es6/tabs/lib/TabsItem.d.ts +1 -1
  301. package/dist/es6/tabs/lib/TabsItem.js +1 -1
  302. package/dist/es6/tabs/lib/TabsList.js +8 -8
  303. package/dist/es6/tabs/lib/TabsOverflowButton.js +1 -1
  304. package/dist/es6/tabs/lib/TabsPanel.d.ts.map +1 -1
  305. package/dist/es6/tabs/lib/TabsPanel.js +1 -3
  306. package/dist/es6/testing/lib/ComponentStatesTable.d.ts.map +1 -1
  307. package/dist/es6/testing/lib/ComponentStatesTable.js +4 -15
  308. package/dist/es6/text/lib/LabelText.js +6 -6
  309. package/dist/es6/text/lib/Text.js +16 -16
  310. package/dist/es6/text/lib/TypeLevelComponents.js +4 -4
  311. package/dist/es6/text-area/lib/TextArea.js +5 -5
  312. package/dist/es6/text-input/lib/InputGroup.js +6 -6
  313. package/dist/es6/text-input/lib/TextInput.js +5 -5
  314. package/dist/es6/toast/lib/Toast.js +1 -1
  315. package/dist/es6/toast/lib/ToastBody.js +1 -1
  316. package/dist/es6/toast/lib/ToastCloseIcon.js +1 -1
  317. package/dist/es6/toast/lib/ToastIcon.js +1 -1
  318. package/dist/es6/toast/lib/ToastMessage.js +1 -1
  319. package/dist/es6/tooltip/lib/TooltipContainer.js +3 -3
  320. package/dist/es6/version/lib/version.js +1 -1
  321. package/expandable/lib/ExpandableTarget.tsx +4 -4
  322. package/layout/lib/Box.tsx +2 -0
  323. package/layout/lib/Flex.tsx +1 -0
  324. package/layout/lib/Grid.tsx +1 -0
  325. package/menu/lib/MenuDivider.tsx +1 -1
  326. package/package.json +7 -7
  327. package/radio/lib/Radio.tsx +1 -0
  328. package/radio/lib/RadioGroup.tsx +1 -0
  329. package/skeleton/lib/parts/SkeletonHeader.tsx +1 -1
  330. package/skeleton/lib/parts/SkeletonShape.tsx +1 -1
  331. package/skeleton/lib/parts/SkeletonText.tsx +1 -1
  332. package/status-indicator/lib/StatusIndicator.tsx +7 -1
  333. package/switch/lib/Switch.tsx +1 -1
  334. package/table/lib/Table.tsx +1 -1
  335. package/table/lib/parts/BaseTableBody.tsx +2 -2
  336. package/table/lib/parts/BaseTableCell.tsx +1 -1
  337. package/table/lib/parts/BaseTableHeader.tsx +1 -1
  338. package/tabs/lib/TabsItem.tsx +1 -1
  339. package/tabs/lib/TabsList.tsx +1 -1
  340. package/tabs/lib/TabsPanel.tsx +2 -6
  341. package/testing/lib/ComponentStatesTable.tsx +9 -8
@@ -10,24 +10,24 @@ export const checkboxBackgroundStencil = createStencil({
10
10
  parts: {
11
11
  background: 'checkbox-background',
12
12
  },
13
- base: { name: "kbbtj", styles: "box-sizing:border-box;align-items:center;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));display:flex;height:var(--cnvs-base-size-225, 1.125rem);justify-content:center;padding:0 0.125rem;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;width:var(--cnvs-base-size-225, 1.125rem);border:0.0625rem solid var(--cnvs-sys-color-border-input-default);" },
13
+ base: { name: "11r6fu", styles: "box-sizing:border-box;align-items:center;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));display:flex;height:var(--cnvs-base-size-225, 1.125rem);justify-content:center;padding:0 0.125rem;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;width:var(--cnvs-base-size-225, 1.125rem);border:0.0625rem solid var(--cnvs-sys-color-border-input-default);" },
14
14
  modifiers: {
15
15
  variant: {
16
- inverse: { name: "npt12", styles: "background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));" }
16
+ inverse: { name: "9vnc", styles: "background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));" }
17
17
  },
18
18
  error: {
19
- error: { name: "2lee86", styles: "--errorRingColorInner-checkbox-background-95b70f:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));--errorRingColorOuter-checkbox-background-95b70f:transparent;background-color:var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));" },
20
- caution: { name: "z5yly", styles: "--errorRingColorInner-checkbox-background-95b70f:var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));--errorRingColorOuter-checkbox-background-95b70f:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));background-color:var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));" }
19
+ error: { name: "1crigb", styles: "--errorRingColorInner-checkbox-background-95b70f:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));--errorRingColorOuter-checkbox-background-95b70f:transparent;background-color:var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));" },
20
+ caution: { name: "26124v", styles: "--errorRingColorInner-checkbox-background-95b70f:var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));--errorRingColorOuter-checkbox-background-95b70f:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));background-color:var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));" }
21
21
  }
22
22
  },
23
23
  compound: [
24
24
  {
25
25
  modifiers: { variant: 'inverse', error: 'error' },
26
- styles: { name: "2phjm9", styles: "background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));" }
26
+ styles: { name: "1ckdxu", styles: "background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));" }
27
27
  },
28
28
  {
29
29
  modifiers: { variant: 'inverse', error: 'caution' },
30
- styles: { name: "35xo38", styles: "background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));" }
30
+ styles: { name: "312aph", styles: "background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));" }
31
31
  }
32
32
  ]
33
33
  }, "checkbox-background-95b70f");
@@ -6,24 +6,24 @@ import { checkSmallIcon } from '@workday/canvas-system-icons-web';
6
6
  import { system } from '@workday/canvas-tokens-web';
7
7
  import { CheckBackground } from './CheckBackground';
8
8
  const checkboxCheckStencil = createStencil({
9
- base: { name: "49jkvl", styles: "box-sizing:border-box;display:flex;flex-direction:column;max-width:100%;pointer-events:none;transition:transform 200ms ease, opacity 200ms ease;span{margin-inline-start:calc(0.375rem * -1);transition:margin 200ms ease;}opacity:var(--cnvs-sys-opacity-zero);transform:scale(0.5);" },
9
+ base: { name: "3trpms", styles: "box-sizing:border-box;display:flex;flex-direction:column;max-width:100%;pointer-events:none;transition:transform 200ms ease, opacity 200ms ease;span{margin-inline-start:calc(0.375rem * -1);transition:margin 200ms ease;}opacity:var(--cnvs-sys-opacity-zero);transform:scale(0.5);" },
10
10
  modifiers: {
11
11
  checked: {
12
- true: { name: "oz2hf", styles: "--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
12
+ true: { name: "3po09w", styles: "--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
13
13
  },
14
14
  indeterminate: {
15
- true: { name: "25ywa9", styles: "opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
15
+ true: { name: "2hjega", styles: "opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
16
16
  },
17
17
  variant: {
18
- inverse: { name: "1d5wuj", styles: "--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));& > div{background-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));}" }
18
+ inverse: { name: "2aagas", styles: "--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));& > div{background-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));}" }
19
19
  }
20
20
  }
21
21
  }, "checkbox-check-ed2489");
22
22
  const indeterminateBoxStencil = createStencil({
23
- base: { name: "1zt9ve", styles: "box-sizing:border-box;width:0.625rem;height:0.125rem;background-color:var(--cnvs-sys-color-fg-inverse);" },
23
+ base: { name: "18mrsm", styles: "box-sizing:border-box;width:0.625rem;height:0.125rem;background-color:var(--cnvs-sys-color-fg-inverse);" },
24
24
  modifiers: {
25
25
  variant: {
26
- inverse: { name: "4eiyqo", styles: "background-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));" }
26
+ inverse: { name: "fchcc", styles: "background-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));" }
27
27
  }
28
28
  }
29
29
  }, "indeterminate-box-a92b15");
@@ -4,7 +4,7 @@ import { LabelText } from '@workday/canvas-kit-react/text';
4
4
  import { createStencil } from '@workday/canvas-kit-styling';
5
5
  import { base, system } from '@workday/canvas-tokens-web';
6
6
  const checkboxContainerStencil = createStencil({
7
- base: { name: "pqilu", styles: "box-sizing:border-box;display:flex;align-items:center;min-height:var(--cnvs-base-size-225, 1.125rem);position:relative;&>div{display:flex;height:var(--cnvs-base-size-225, 1.125rem);min-width:var(--cnvs-base-size-225, 1.125rem);align-self:flex-start;position:relative;}& > label{padding-inline-start:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));}" }
7
+ base: { name: "2ovrvt", styles: "box-sizing:border-box;display:flex;align-items:center;min-height:var(--cnvs-base-size-225, 1.125rem);position:relative;&>div{display:flex;height:var(--cnvs-base-size-225, 1.125rem);min-width:var(--cnvs-base-size-225, 1.125rem);align-self:flex-start;position:relative;}& > label{padding-inline-start:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));}" }
8
8
  }, "checkbox-container-50b9f6");
9
9
  export const CheckboxContainer = createComponent('div')({
10
10
  displayName: 'CheckboxContainer',
@@ -5,22 +5,22 @@ import { base, system } from '@workday/canvas-tokens-web';
5
5
  import { checkboxBackgroundStencil } from './CheckBackground';
6
6
  import { checkboxRippleStencil } from './CheckboxRipple';
7
7
  const checkboxInputStencil = createStencil({
8
- base: { name: "16u5z7", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));width:var(--cnvs-base-size-300, 1.5rem);height:var(--cnvs-base-size-300, 1.5rem);margin:0;margin-top:calc(0.1875rem * -1);margin-inline-start:calc(0.1875rem * -1);position:absolute;opacity:var(--cnvs-sys-opacity-zero);&:not(:disabled){cursor:pointer;}&:where(:hover,.hover) ~ [data-part=\"checkbox-ripple\"]{box-shadow:0 0 0 0.4375rem var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ [data-part=\"checkbox-background\"]{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)));}&:where(:checked, :indeterminate) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));background-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));}&:where(:disabled, .disabled) ~ [data-part=\"checkbox-background\"]{opacity:var(--cnvs-sys-opacity-disabled);}&:where(:focus-visible, :active, .focus, .active){outline:none;}&:where(:focus-visible, .focus) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));border-width:0.125rem;box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 0px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:checked:focus-visible, &:indeterminate:focus-visible, &:checked.focus, &:indeterminate.focus{& ~ [data-part=\"checkbox-background\"]{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));border-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));border-width:0.125rem;}}" },
8
+ base: { name: "1jyc1z", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));width:var(--cnvs-base-size-300, 1.5rem);height:var(--cnvs-base-size-300, 1.5rem);margin:0;margin-block-start:calc(0.1875rem * -1);margin-inline-start:calc(0.1875rem * -1);position:absolute;opacity:var(--cnvs-sys-opacity-zero);&:not(:disabled){cursor:pointer;}&:where(:hover,.hover) ~ [data-part=\"checkbox-ripple\"]{box-shadow:0 0 0 0.4375rem var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ [data-part=\"checkbox-background\"]{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)));}&:where(:checked, :indeterminate) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));background-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));}&:where(:disabled, .disabled) ~ [data-part=\"checkbox-background\"]{opacity:var(--cnvs-sys-opacity-disabled);}&:where(:focus-visible, :active, .focus, .active){outline:none;}&:where(:focus-visible, .focus) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));border-width:0.125rem;box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 0px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:checked:focus-visible, &:indeterminate:focus-visible, &:checked.focus, &:indeterminate.focus{& ~ [data-part=\"checkbox-background\"]{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));border-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));border-width:0.125rem;}}" },
9
9
  modifiers: {
10
10
  variant: {
11
- inverse: { name: "2hwrlj", styles: "& ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:where(:hover,.hover) ~ [data-part=\"checkbox-ripple\"]{box-shadow:0 0 0 0.4375rem var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));}&:where(:checked, :indeterminate):not(:disabled):not(.disabled) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));}&:disabled ~ [data-part=\"checkbox-background\"]{opacity:var(--cnvs-sys-opacity-disabled);}&:where(:checked, :indeterminate):where(:disabled, .disabled) ~ [data-part=\"checkbox-background\"]{background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));}&:where(:focus-visible, .focus) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-border-contrast-default);box-shadow:0 0 0 0rem var(--cnvs-sys-color-border-contrast-default) ,0 0 0 0.125rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ;}&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-border-contrast-default) ,0 0 0 0.25rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ;border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}}" }
11
+ inverse: { name: "fdozl", styles: "& ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:where(:hover,.hover) ~ [data-part=\"checkbox-ripple\"]{box-shadow:0 0 0 0.4375rem var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));}&:where(:checked, :indeterminate):not(:disabled):not(.disabled) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));}&:disabled ~ [data-part=\"checkbox-background\"]{opacity:var(--cnvs-sys-opacity-disabled);}&:where(:checked, :indeterminate):where(:disabled, .disabled) ~ [data-part=\"checkbox-background\"]{background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));}&:where(:focus-visible, .focus) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-border-contrast-default);box-shadow:0 0 0 0rem var(--cnvs-sys-color-border-contrast-default) ,0 0 0 0.125rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ;}&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-border-contrast-default) ,0 0 0 0.25rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ;border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}}" }
12
12
  },
13
13
  disabled: {
14
- true: { name: "3pmm2m", styles: "&:where(:hover, .hover) ~ span:first-of-type{box-shadow:none;}" }
14
+ true: { name: "1r8ze4", styles: "&:where(:hover, .hover) ~ span:first-of-type{box-shadow:none;}" }
15
15
  },
16
16
  error: {
17
- true: { name: "1nasyj", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border-color:var(--errorRingColorInner-checkbox-background-95b70f);box-shadow:\n 0 0 0 0.0625rem var(--errorRingColorInner-checkbox-background-95b70f),\n 0 0 0 0.125rem var(--errorRingColorOuter-checkbox-background-95b70f);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:transparent;box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 0.25rem var(--errorRingColorInner-checkbox-background-95b70f),\n 0 0 0 0.3125rem var(--errorRingColorOuter-checkbox-background-95b70f);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--errorRingColorInner-checkbox-background-95b70f);}" }
17
+ true: { name: "4dmrym", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border-color:var(--errorRingColorInner-checkbox-background-95b70f);box-shadow:\n 0 0 0 0.0625rem var(--errorRingColorInner-checkbox-background-95b70f),\n 0 0 0 0.125rem var(--errorRingColorOuter-checkbox-background-95b70f);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:transparent;box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 0.25rem var(--errorRingColorInner-checkbox-background-95b70f),\n 0 0 0 0.3125rem var(--errorRingColorOuter-checkbox-background-95b70f);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--errorRingColorInner-checkbox-background-95b70f);}" }
18
18
  }
19
19
  },
20
20
  compound: [
21
21
  {
22
22
  modifiers: { variant: 'inverse', error: true },
23
- styles: { name: "35y64m", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border:0.0625rem solid var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}" }
23
+ styles: { name: "2rwbkp", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border:0.0625rem solid var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}" }
24
24
  }
25
25
  ]
26
26
  }, "checkbox-input-e459e9");
@@ -6,7 +6,7 @@ export const checkboxRippleStencil = createStencil({
6
6
  parts: {
7
7
  ripple: 'checkbox-ripple',
8
8
  },
9
- base: { name: "3lo440", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));box-shadow:none;height:var(--cnvs-base-size-225, 1.125rem);width:var(--cnvs-base-size-225, 1.125rem);transition:box-shadow 150ms ease-out;position:absolute;pointer-events:none;" }
9
+ base: { name: "2o11n0", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));box-shadow:none;height:var(--cnvs-base-size-225, 1.125rem);width:var(--cnvs-base-size-225, 1.125rem);transition:box-shadow 150ms ease-out;position:absolute;pointer-events:none;" }
10
10
  }, "checkbox-ripple-a2fff4");
11
11
  export const CheckboxRipple = createComponent('span')({
12
12
  displayName: 'CheckboxRipple',
@@ -24,11 +24,11 @@ const listBoxContainerStencil = createStencil({
24
24
  parts: {
25
25
  listBoxContainer: 'list-box-container',
26
26
  },
27
- base: { name: "37dwyf", styles: "box-sizing:border-box;& :where([data-part=\"list\"]){display:flex;flex-direction:column;margin-block:0;}" },
27
+ base: { name: "17zwv3", styles: "box-sizing:border-box;& :where([data-part=\"list\"]){display:flex;flex-direction:column;margin-block:0;}" },
28
28
  modifiers: {
29
29
  orientation: {
30
- vertical: { name: "2v4mzg", styles: "overflow-y:auto;" },
31
- horizontal: { name: "13vv5g", styles: "overflow-y:undefined;& :where([data-part=\"list\"]){flex-direction:row;}" }
30
+ vertical: { name: "3m5ab", styles: "overflow-y:auto;" },
31
+ horizontal: { name: "1vctzj", styles: "overflow-y:undefined;& :where([data-part=\"list\"]){flex-direction:row;}" }
32
32
  }
33
33
  }
34
34
  }, "list-box-container-77c2bf");
@@ -14,13 +14,13 @@ export const colorPickerHexInputStencil = createStencil({
14
14
  poundSign: 'color-picker-hex-input-pound-sign',
15
15
  swatch: 'color-picker-hex-input-swatch',
16
16
  },
17
- base: { name: "1brahw", styles: "box-sizing:border-box;--width-color-picker-hex-input-9e7717:7.25rem;position:relative;width:var(--width-color-picker-hex-input-9e7717);[data-part=\"color-picker-hex-input\"]{min-width:var(--width-color-picker-hex-input-9e7717);width:var(--width-color-picker-hex-input-9e7717);font-family:var(--cnvs-sys-font-family-mono);padding-inline-start:calc(100% - 5.375rem);&:focus::placeholder{color:transparent;}}[data-part=\"color-picker-hex-input-pound-sign\"]{position:absolute;top:0.625rem;left:5.5rem;font-family:var(--cnvs-sys-font-family-mono);}[data-part=\"color-picker-hex-input-swatch\"]{position:absolute;top:0.625rem;left:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));box-shadow:inset 0 0 0 0.0625rem rgba(0,0,0,0.25);pointer-events:none;}:dir(ltr){[data-part=\"color-picker-hex-input\"]{padding-inline-start:2.875rem;}[data-part=\"color-picker-hex-input-pound-sign\"]{left:2.25rem;}}" },
17
+ base: { name: "11swi5", styles: "box-sizing:border-box;--width-color-picker-hex-input-9e7717:7.25rem;position:relative;width:var(--width-color-picker-hex-input-9e7717);[data-part=\"color-picker-hex-input\"]{min-width:var(--width-color-picker-hex-input-9e7717);width:var(--width-color-picker-hex-input-9e7717);font-family:var(--cnvs-sys-font-family-mono);padding-inline-start:calc(100% - 5.375rem);&:focus::placeholder{color:transparent;}}[data-part=\"color-picker-hex-input-pound-sign\"]{position:absolute;top:0.625rem;left:5.5rem;font-family:var(--cnvs-sys-font-family-mono);}[data-part=\"color-picker-hex-input-swatch\"]{position:absolute;top:0.625rem;left:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));box-shadow:inset 0 0 0 0.0625rem rgba(0,0,0,0.25);pointer-events:none;}:dir(ltr){[data-part=\"color-picker-hex-input\"]{padding-inline-start:2.875rem;}[data-part=\"color-picker-hex-input-pound-sign\"]{left:2.25rem;}}" },
18
18
  modifiers: {
19
19
  grow: {
20
- true: { name: "35u9e2", styles: "--width-color-picker-hex-input-9e7717:100%;" }
20
+ true: { name: "yybq0", styles: "--width-color-picker-hex-input-9e7717:100%;" }
21
21
  },
22
22
  disabled: {
23
- true: { name: "132p7n", styles: "[data-part=\"color-picker-hex-input-pound-sign\"]{opacity:var(--cnvs-sys-opacity-disabled);}" }
23
+ true: { name: "p6kam", styles: "[data-part=\"color-picker-hex-input-pound-sign\"]{opacity:var(--cnvs-sys-opacity-disabled);}" }
24
24
  }
25
25
  }
26
26
  }, "color-picker-hex-input-9e7717");
@@ -4,7 +4,7 @@ import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
4
4
  import { system } from '@workday/canvas-tokens-web';
5
5
  import { ColorInput } from './ColorInput';
6
6
  export const colorPreviewStencil = createStencil({
7
- base: { name: "3pjzbq", styles: "box-sizing:border-box;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));pointer-events:none;" }
7
+ base: { name: "2nr91e", styles: "box-sizing:border-box;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));pointer-events:none;" }
8
8
  }, "color-preview-1326de");
9
9
  export const ColorPreview = createComponent('input')({
10
10
  displayName: 'ColorPreview',
@@ -9,10 +9,10 @@ export const colorPickerColorSwatchStencil = createStencil({
9
9
  color: '',
10
10
  iconColor: '',
11
11
  },
12
- base: { name: "3kyi9o", styles: "box-sizing:border-box;--color-system-icon-c9acc3:var(--iconColor-color-picker-color-swatch-06964b);width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));background-color:var(--color-color-picker-color-swatch-06964b);display:flex;align-items:center;justify-content:center;& > *{margin:calc(0.125rem * -1);}" },
12
+ base: { name: "3fh5rb", styles: "box-sizing:border-box;--color-system-icon-c9acc3:var(--iconColor-color-picker-color-swatch-06964b);width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));background-color:var(--color-color-picker-color-swatch-06964b);display:flex;align-items:center;justify-content:center;& > *{margin:calc(0.125rem * -1);}" },
13
13
  modifiers: {
14
14
  withShadow: {
15
- true: { name: "1t114v", styles: "box-shadow:inset 0px 0px 0px 0.0625rem rgba(0, 0, 0, 0.25);" }
15
+ true: { name: "3ot4li", styles: "box-shadow:inset 0px 0px 0px 0.0625rem rgba(0, 0, 0, 0.25);" }
16
16
  }
17
17
  }
18
18
  }, "color-picker-color-swatch-06964b");
@@ -14,7 +14,7 @@ export const useComboboxCard = createElemPropsHook(useComboboxModel)(model => {
14
14
  };
15
15
  });
16
16
  export const comboboxCardStencil = createStencil({
17
- base: { name: "3kqbv8", styles: "box-sizing:border-box;& :where([data-part=\"list-box-container\"]){border-radius:var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));}" }
17
+ base: { name: "3ojflt", styles: "box-sizing:border-box;& :where([data-part=\"list-box-container\"]){border-radius:var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));}" }
18
18
  }, "combobox-card-97127b");
19
19
  export const ComboboxCard = createSubcomponent('div')({
20
20
  modelHook: useComboboxModel,
@@ -18,7 +18,7 @@ export const useComboboxMenuList = createElemPropsHook(useMenuModel)(model => {
18
18
  };
19
19
  });
20
20
  const comboboxMenuListStencil = createStencil({
21
- base: { name: "12jlo7", styles: "box-sizing:border-box;" },
21
+ base: { name: "2094kq", styles: "box-sizing:border-box;" },
22
22
  extends: menuListStencil
23
23
  }, "combobox-menu-list-6c92ed");
24
24
  export const ComboboxMenuList = createSubcomponent('ul')({
@@ -19,7 +19,7 @@ export const accessibleHide = {
19
19
  padding: 0,
20
20
  border: 0,
21
21
  };
22
- export const accessibleHideStyles = createStyles({ name: "3rcear", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;min-height:1px;width:1px;min-width:1px;margin:-1px;padding:0;border:0;" });
22
+ export const accessibleHideStyles = createStyles({ name: "1fbeov", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;min-height:1px;width:1px;min-width:1px;margin:-1px;padding:0;border:0;" });
23
23
  /**
24
24
  * A convenient component wrapper to visually hide content, while still making it accessible to screen readers
25
25
  */
@@ -98,7 +98,7 @@ const commonTokenMapping = {
98
98
  /**
99
99
  * If you wish to reset the theme to the default, apply this class on the CanvasProvider.
100
100
  */
101
- export const defaultBranding = createStyles({ name: "30qqep", styles: "--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-amber-400);--cnvs-brand-common-alert-outer:var(--cnvs-base-palette-amber-500);--cnvs-brand-common-error-inner:var(--cnvs-base-palette-red-500);--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blue-500);--cnvs-brand-neutral-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-slate-800);--cnvs-brand-neutral-dark:var(--cnvs-base-palette-slate-700);--cnvs-brand-neutral-base:var(--cnvs-base-palette-slate-600);--cnvs-brand-neutral-light:var(--cnvs-base-palette-slate-200);--cnvs-brand-neutral-lighter:var(--cnvs-base-palette-slate-50);--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-slate-25);--cnvs-brand-success-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-800);--cnvs-brand-success-dark:var(--cnvs-base-palette-green-700);--cnvs-brand-success-base:var(--cnvs-base-palette-green-600);--cnvs-brand-success-light:var(--cnvs-base-palette-green-200);--cnvs-brand-success-lighter:var(--cnvs-base-palette-green-50);--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-25);--cnvs-brand-error-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-error-darkest:var(--cnvs-base-palette-red-800);--cnvs-brand-error-dark:var(--cnvs-base-palette-red-700);--cnvs-brand-error-base:var(--cnvs-base-palette-red-600);--cnvs-brand-error-light:var(--cnvs-base-palette-red-200);--cnvs-brand-error-lighter:var(--cnvs-base-palette-red-50);--cnvs-brand-error-lightest:var(--cnvs-base-palette-red-25);--cnvs-brand-alert-accent:var(--cnvs-base-palette-neutral-900);--cnvs-brand-alert-darkest:var(--cnvs-base-palette-amber-600);--cnvs-brand-alert-dark:var(--cnvs-base-palette-amber-500);--cnvs-brand-alert-base:var(--cnvs-base-palette-amber-400);--cnvs-brand-alert-light:var(--cnvs-base-palette-amber-200);--cnvs-brand-alert-lighter:var(--cnvs-base-palette-amber-50);--cnvs-brand-alert-lightest:var(--cnvs-base-palette-amber-25);--cnvs-brand-primary-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blue-800);--cnvs-brand-primary-dark:var(--cnvs-base-palette-blue-700);--cnvs-brand-primary-base:var(--cnvs-base-palette-blue-600);--cnvs-brand-primary-light:var(--cnvs-base-palette-blue-200);--cnvs-brand-primary-lighter:var(--cnvs-base-palette-blue-50);--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blue-25);--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);--cnvs-sys-color-brand-focus-primary:var(--cnvs-brand-common-focus-outline);--cnvs-sys-color-brand-border-primary:var(--cnvs-brand-common-focus-outline);--cnvs-sys-color-brand-accent-primary:var(--cnvs-brand-primary-base);--cnvs-sys-color-brand-accent-action:var(--cnvs-brand-primary-base);--cnvs-sys-color-brand-accent-critical:var(--cnvs-brand-error-base);--cnvs-sys-color-brand-accent-caution:var(--cnvs-brand-alert-base);--cnvs-sys-color-brand-accent-positive:var(--cnvs-brand-success-base);--cnvs-sys-color-brand-fg-primary-default:var(--cnvs-brand-primary-base);--cnvs-sys-color-brand-fg-primary-strong:var(--cnvs-brand-primary-dark);--cnvs-sys-color-brand-fg-critical-default:var(--cnvs-brand-error-base);--cnvs-sys-color-brand-fg-critical-strong:var(--cnvs-brand-error-dark);--cnvs-sys-color-brand-fg-caution-default:var(--cnvs-brand-alert-darkest);--cnvs-sys-color-brand-fg-caution-strong:var(--cnvs-brand-alert-darkest);--cnvs-sys-color-brand-fg-positive-default:var(--cnvs-brand-success-base);--cnvs-sys-color-brand-fg-positive-strong:var(--cnvs-brand-success-dark);--cnvs-sys-color-brand-fg-selected:var(--cnvs-brand-primary-dark);--cnvs-sys-color-brand-focus-critical:var(--cnvs-brand-error-dark);--cnvs-sys-color-brand-border-critical:var(--cnvs-brand-error-base);--cnvs-sys-color-brand-focus-caution-inner:var(--cnvs-brand-common-alert-inner);--cnvs-sys-color-brand-focus-caution-outer:var(--cnvs-brand-alert-dark);--cnvs-sys-color-brand-border-caution:var(--cnvs-brand-alert-dark);--cnvs-sys-color-brand-surface-primary-default:var(--cnvs-brand-primary-lightest);--cnvs-sys-color-brand-surface-primary-strong:var(--cnvs-brand-primary-lighter);--cnvs-sys-color-brand-surface-critical-default:var(--cnvs-brand-error-lightest);--cnvs-sys-color-brand-surface-critical-strong:var(--cnvs-brand-error-lighter);--cnvs-sys-color-brand-surface-caution-default:var(--cnvs-brand-alert-lightest);--cnvs-sys-color-brand-surface-caution-strong:var(--cnvs-brand-alert-lighter);--cnvs-sys-color-brand-surface-positive-default:var(--cnvs-brand-success-lightest);--cnvs-sys-color-brand-surface-positive-strong:var(--cnvs-brand-success-lighter);--cnvs-sys-color-brand-surface-selected:var(--cnvs-brand-primary-lighter);" });
101
+ export const defaultBranding = createStyles({ name: "1nnj2g", styles: "--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-amber-400);--cnvs-brand-common-alert-outer:var(--cnvs-base-palette-amber-500);--cnvs-brand-common-error-inner:var(--cnvs-base-palette-red-500);--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blue-500);--cnvs-brand-neutral-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-slate-800);--cnvs-brand-neutral-dark:var(--cnvs-base-palette-slate-700);--cnvs-brand-neutral-base:var(--cnvs-base-palette-slate-600);--cnvs-brand-neutral-light:var(--cnvs-base-palette-slate-200);--cnvs-brand-neutral-lighter:var(--cnvs-base-palette-slate-50);--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-slate-25);--cnvs-brand-success-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-800);--cnvs-brand-success-dark:var(--cnvs-base-palette-green-700);--cnvs-brand-success-base:var(--cnvs-base-palette-green-600);--cnvs-brand-success-light:var(--cnvs-base-palette-green-200);--cnvs-brand-success-lighter:var(--cnvs-base-palette-green-50);--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-25);--cnvs-brand-error-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-error-darkest:var(--cnvs-base-palette-red-800);--cnvs-brand-error-dark:var(--cnvs-base-palette-red-700);--cnvs-brand-error-base:var(--cnvs-base-palette-red-600);--cnvs-brand-error-light:var(--cnvs-base-palette-red-200);--cnvs-brand-error-lighter:var(--cnvs-base-palette-red-50);--cnvs-brand-error-lightest:var(--cnvs-base-palette-red-25);--cnvs-brand-alert-accent:var(--cnvs-base-palette-neutral-900);--cnvs-brand-alert-darkest:var(--cnvs-base-palette-amber-600);--cnvs-brand-alert-dark:var(--cnvs-base-palette-amber-500);--cnvs-brand-alert-base:var(--cnvs-base-palette-amber-400);--cnvs-brand-alert-light:var(--cnvs-base-palette-amber-200);--cnvs-brand-alert-lighter:var(--cnvs-base-palette-amber-50);--cnvs-brand-alert-lightest:var(--cnvs-base-palette-amber-25);--cnvs-brand-primary-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blue-800);--cnvs-brand-primary-dark:var(--cnvs-base-palette-blue-700);--cnvs-brand-primary-base:var(--cnvs-base-palette-blue-600);--cnvs-brand-primary-light:var(--cnvs-base-palette-blue-200);--cnvs-brand-primary-lighter:var(--cnvs-base-palette-blue-50);--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blue-25);--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);--cnvs-sys-color-brand-focus-primary:var(--cnvs-brand-common-focus-outline);--cnvs-sys-color-brand-border-primary:var(--cnvs-brand-common-focus-outline);--cnvs-sys-color-brand-accent-primary:var(--cnvs-brand-primary-base);--cnvs-sys-color-brand-accent-action:var(--cnvs-brand-primary-base);--cnvs-sys-color-brand-accent-critical:var(--cnvs-brand-error-base);--cnvs-sys-color-brand-accent-caution:var(--cnvs-brand-alert-base);--cnvs-sys-color-brand-accent-positive:var(--cnvs-brand-success-base);--cnvs-sys-color-brand-fg-primary-default:var(--cnvs-brand-primary-base);--cnvs-sys-color-brand-fg-primary-strong:var(--cnvs-brand-primary-dark);--cnvs-sys-color-brand-fg-critical-default:var(--cnvs-brand-error-base);--cnvs-sys-color-brand-fg-critical-strong:var(--cnvs-brand-error-dark);--cnvs-sys-color-brand-fg-caution-default:var(--cnvs-brand-alert-darkest);--cnvs-sys-color-brand-fg-caution-strong:var(--cnvs-brand-alert-darkest);--cnvs-sys-color-brand-fg-positive-default:var(--cnvs-brand-success-base);--cnvs-sys-color-brand-fg-positive-strong:var(--cnvs-brand-success-dark);--cnvs-sys-color-brand-fg-selected:var(--cnvs-brand-primary-dark);--cnvs-sys-color-brand-focus-critical:var(--cnvs-brand-error-dark);--cnvs-sys-color-brand-border-critical:var(--cnvs-brand-error-base);--cnvs-sys-color-brand-focus-caution-inner:var(--cnvs-brand-common-alert-inner);--cnvs-sys-color-brand-focus-caution-outer:var(--cnvs-brand-alert-dark);--cnvs-sys-color-brand-border-caution:var(--cnvs-brand-alert-dark);--cnvs-sys-color-brand-surface-primary-default:var(--cnvs-brand-primary-lightest);--cnvs-sys-color-brand-surface-primary-strong:var(--cnvs-brand-primary-lighter);--cnvs-sys-color-brand-surface-critical-default:var(--cnvs-brand-error-lightest);--cnvs-sys-color-brand-surface-critical-strong:var(--cnvs-brand-error-lighter);--cnvs-sys-color-brand-surface-caution-default:var(--cnvs-brand-alert-lightest);--cnvs-sys-color-brand-surface-caution-strong:var(--cnvs-brand-alert-lighter);--cnvs-sys-color-brand-surface-positive-default:var(--cnvs-brand-success-lightest);--cnvs-sys-color-brand-surface-positive-strong:var(--cnvs-brand-success-lighter);--cnvs-sys-color-brand-surface-selected:var(--cnvs-brand-primary-lighter);" });
102
102
  export const useCanvasThemeToCssVars = (
103
103
  /**
104
104
  * @deprecated ⚠️ `theme` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
@@ -1,4 +1,6 @@
1
- import { CSSObject } from '@emotion/styled';
2
- export declare const ellipsisStyles: CSSObject;
3
- export declare const EllipsisText: import("./utils").ElementComponent<"span", unknown>;
1
+ import { CSProps } from '@workday/canvas-kit-styling';
2
+ export interface EllipsisTextProps extends CSProps {
3
+ children: React.ReactNode;
4
+ }
5
+ export declare const EllipsisText: import("./utils").ElementComponent<"span", EllipsisTextProps>;
4
6
  //# sourceMappingURL=EllipsisText.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"EllipsisText.d.ts","sourceRoot":"","sources":["../../../../common/lib/EllipsisText.tsx"],"names":[],"mappings":"AAAA,OAAe,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAIlD,eAAO,MAAM,cAAc,EAAE,SAI5B,CAAC;AAIF,eAAO,MAAM,YAAY,qDAKvB,CAAC"}
1
+ {"version":3,"file":"EllipsisText.d.ts","sourceRoot":"","sources":["../../../../common/lib/EllipsisText.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAA6B,MAAM,6BAA6B,CAAC;AAUhF,MAAM,WAAW,iBAAkB,SAAQ,OAAO;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY,+DASvB,CAAC"}
@@ -1,15 +1,10 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import styled from '@emotion/styled';
2
+ import { createStyles, handleCsProp } from '@workday/canvas-kit-styling';
3
3
  import { createComponent } from './utils';
4
- export const ellipsisStyles = {
5
- whiteSpace: 'nowrap',
6
- textOverflow: 'ellipsis',
7
- overflow: 'hidden',
8
- };
9
- const StyledEllipsisComponent = styled('span')(ellipsisStyles);
4
+ const ellipsisStyles = createStyles({ name: "1vsone", styles: "white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" });
10
5
  export const EllipsisText = createComponent('span')({
11
6
  displayName: 'EllipsisText',
12
- Component(elemProps = {}, ref, Element) {
13
- return _jsx(StyledEllipsisComponent, { as: Element, ref: ref, ...elemProps });
7
+ Component({ children, ...elemProps }, ref, Element) {
8
+ return (_jsx(Element, { ref: ref, ...handleCsProp(elemProps, ellipsisStyles), children: children }));
14
9
  },
15
10
  });
@@ -10,7 +10,7 @@ import { ExpandableTarget } from './ExpandableTarget';
10
10
  import { ExpandableTitle } from './ExpandableTitle';
11
11
  import { useExpandableModel } from './hooks/useExpandableModel';
12
12
  export const expandableContainerStencil = createStencil({
13
- base: { name: "2xk6co", styles: "box-sizing:border-box;display:flex;flex-direction:column;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
13
+ base: { name: "21uhn9", styles: "box-sizing:border-box;display:flex;flex-direction:column;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
14
14
  }, "expandable-container-f664d5");
15
15
  /**
16
16
  * `Expandable` wraps an `Expandable.Target` and an `Expandable.Content`. By default, it provides a
@@ -5,7 +5,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
5
5
  import { createStencil } from '@workday/canvas-kit-styling';
6
6
  export const expandableAvatarStencil = createStencil({
7
7
  extends: avatarStencil,
8
- base: { name: "2k7n5x", styles: "box-sizing:border-box;flex-shrink:0;" }
8
+ base: { name: "39nv3y", styles: "box-sizing:border-box;flex-shrink:0;" }
9
9
  }, "expandable-avatar-65308e");
10
10
  // When the component is created, it needs to be a button element to match AvatarProps.
11
11
  // Once Avatar becomes a `createComponent` we can default the element type to a `div`
@@ -6,7 +6,7 @@ import { system } from '@workday/canvas-tokens-web';
6
6
  import { useExpandableContent } from './hooks/useExpandableContent';
7
7
  import { useExpandableModel } from './hooks/useExpandableModel';
8
8
  export const expandableContentStencil = createStencil({
9
- base: { name: "18fa87", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
9
+ base: { name: "1kivrx", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
10
10
  }, "expandable-content-25e157");
11
11
  export const ExpandableContent = createSubcomponent('div')({
12
12
  modelHook: useExpandableModel,
@@ -9,34 +9,34 @@ import { useExpandableIcon } from './hooks/useExpandableIcon';
9
9
  import { useExpandableModel } from './hooks/useExpandableModel';
10
10
  export const expandableIconStencil = createStencil({
11
11
  extends: systemIconStencil,
12
- base: { name: "37i4o", styles: "box-sizing:border-box;padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));" },
12
+ base: { name: "16yose", styles: "box-sizing:border-box;padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));" },
13
13
  modifiers: {
14
14
  isExpanded: {
15
- true: { name: "s2ywf", styles: "" },
16
- false: { name: "ag6a1", styles: "" }
15
+ true: { name: "1szvu5", styles: "" },
16
+ false: { name: "2gw3p3", styles: "" }
17
17
  },
18
18
  position: {
19
- start: { name: "3mevga", styles: "" },
20
- end: { name: "199l2c", styles: "" },
21
- only: { name: "2mhtfo", styles: "" }
19
+ start: { name: "1fgsln", styles: "" },
20
+ end: { name: "1ssvl7", styles: "" },
21
+ only: { name: "3ultoh", styles: "" }
22
22
  }
23
23
  },
24
24
  compound: [
25
25
  {
26
26
  modifiers: { position: 'end', isExpanded: false },
27
- styles: { name: "cz49u", styles: "margin-inline-start:auto;transform:rotate(180deg);padding-inline-end:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
27
+ styles: { name: "2jao4y", styles: "margin-inline-start:auto;transform:rotate(180deg);padding-inline-end:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
28
28
  },
29
29
  {
30
30
  modifiers: { position: 'end', isExpanded: true },
31
- styles: { name: "1wye9u", styles: "margin-inline-start:auto;padding-inline-start:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
31
+ styles: { name: "3vxw2w", styles: "margin-inline-start:auto;padding-inline-start:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
32
32
  },
33
33
  {
34
34
  modifiers: { position: 'start', isExpanded: false },
35
- styles: { name: "1c45ve", styles: "margin-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));transform:rotate(90deg);:dir(rtl){transform:rotate(-90deg);}" }
35
+ styles: { name: "1tskdb", styles: "margin-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));transform:rotate(90deg);:dir(rtl){transform:rotate(-90deg);}" }
36
36
  },
37
37
  {
38
38
  modifiers: { position: 'start', isExpanded: true },
39
- styles: { name: "4p9ez", styles: "margin-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));transform:rotate(180deg);" }
39
+ styles: { name: "3yyvfe", styles: "margin-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));transform:rotate(180deg);" }
40
40
  }
41
41
  ]
42
42
  }, "expandable-icon-af0853");
@@ -2,17 +2,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { createSubcomponent } from '@workday/canvas-kit-react/common';
3
3
  import { mergeStyles } from '@workday/canvas-kit-react/layout';
4
4
  import { Heading } from '@workday/canvas-kit-react/text';
5
- import { createStencil, cssVar, px2rem } from '@workday/canvas-kit-styling';
6
- import { brand, system } from '@workday/canvas-tokens-web';
5
+ import { createStencil, px2rem } from '@workday/canvas-kit-styling';
6
+ import { system } from '@workday/canvas-tokens-web';
7
7
  import { useExpandableModel } from './hooks/useExpandableModel';
8
8
  import { useExpandableTarget } from './hooks/useExpandableTarget';
9
9
  export const expandableTargetStencil = createStencil({
10
- base: { name: "1x6su0", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));border-color:var(--cnvs-sys-color-border-transparent);border-radius:var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));border-width:0;display:flex;align-items:center;flex-direction:row;gap:var(--cnvs-sys-gap-none, var(--cnvs-sys-space-zero, 0));justify-content:start;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));cursor:pointer;width:100%;&:hover, &.hover{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:focus-visible, &.focus{outline:var(var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1)), var(--cnvs-brand-common-focus-outline)) solid 0.125rem;}" }
11
- }, "expandable-target-d08386");
10
+ base: { name: "1a4uea", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));border-color:var(--cnvs-sys-color-border-transparent);border-radius:var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));border-width:0;display:flex;align-items:center;flex-direction:row;gap:var(--cnvs-sys-gap-none, var(--cnvs-sys-space-zero, 0));justify-content:start;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));cursor:pointer;width:100%;&:hover, &.hover{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:focus-visible, &.focus{outline:0.125rem solid var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}" }
11
+ }, "expandable-target-2ece26");
12
12
  export const ExpandableTarget = createSubcomponent('button')({
13
13
  modelHook: useExpandableModel,
14
14
  elemPropsHook: useExpandableTarget,
15
15
  })(({ children, headingLevel, ...elementProps }, Element) => {
16
16
  const button = (_jsx(Element, { ...mergeStyles(elementProps, expandableTargetStencil()), children: children }));
17
- return headingLevel ? (_jsx(Heading, { size: "small", as: headingLevel, margin: "0", children: button })) : (button);
17
+ return headingLevel ? (_jsx(Heading, { size: "small", as: headingLevel, cs: { margin: 0 }, children: button })) : (button);
18
18
  });
@@ -4,7 +4,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
4
4
  import { createStencil, px2rem } from '@workday/canvas-kit-styling';
5
5
  import { system } from '@workday/canvas-tokens-web';
6
6
  export const expandableTitleStencil = createStencil({
7
- base: { name: "1q0dfw", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));font-weight:var(--cnvs-sys-font-weight-bold);color:var(--cnvs-sys-color-fg-strong);padding:0.125rem var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));text-align:left;" }
7
+ base: { name: "1n7r8m", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));font-weight:var(--cnvs-sys-font-weight-bold);color:var(--cnvs-sys-color-fg-strong);padding:0.125rem var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));text-align:left;" }
8
8
  }, "expandable-title-afdcf8");
9
9
  export const ExpandableTitle = createComponent('div')({
10
10
  displayName: 'Expandable.Title',
@@ -4,7 +4,7 @@ import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
4
4
  import { system } from '@workday/canvas-tokens-web';
5
5
  import { useFormFieldModel } from './hooks';
6
6
  export const formFieldFieldStencil = createStencil({
7
- base: { name: "r2fcq", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));" }
7
+ base: { name: "1s84qw", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));" }
8
8
  }, "form-field-field-a35e82");
9
9
  export const FormFieldField = createSubcomponent('div')({
10
10
  displayName: 'FormField.Field',
@@ -7,15 +7,15 @@ import { system } from '@workday/canvas-tokens-web';
7
7
  import { useFormFieldModel } from './hooks';
8
8
  export const formFieldGroupLabelStencil = createStencil({
9
9
  extends: textStencil,
10
- base: { name: "3yawew", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-fg-default);padding-inline-start:0;display:flex;align-items:center;min-width:11.25rem;" },
10
+ base: { name: "2obvwl", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-fg-default);padding-inline-start:0;display:flex;align-items:center;min-width:11.25rem;" },
11
11
  modifiers: {
12
12
  isRequired: {
13
- true: { name: "21x0l0", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));text-decoration:unset;margin-inline-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));}" }
13
+ true: { name: "kq70j", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));text-decoration:unset;margin-inline-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));}" }
14
14
  },
15
15
  orientation: {
16
- vertical: { name: "zgc0o", styles: "width:100%;" },
17
- horizontalStart: { name: "wcjhz", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));" },
18
- horizontalEnd: { name: "28zg2i", styles: "max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));float:left;justify-content:flex-end;" }
16
+ vertical: { name: "442kti", styles: "width:100%;" },
17
+ horizontalStart: { name: "27eirs", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));" },
18
+ horizontalEnd: { name: "3gtsz8", styles: "max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));float:left;justify-content:flex-end;" }
19
19
  }
20
20
  },
21
21
  defaultModifiers: {
@@ -4,11 +4,11 @@ import { calc, createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-s
4
4
  import { base, system } from '@workday/canvas-tokens-web';
5
5
  import { useFormFieldModel } from './hooks';
6
6
  const formFieldGroupListStencil = createStencil({
7
- base: { name: "3hm1m7", styles: "box-sizing:border-box;display:flex;flex-direction:column;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:0.625rem var(--cnvs-base-size-150, 0.75rem) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));margin:0 calc(var(--cnvs-base-size-150, 0.75rem) * -1);transition:100ms box-shadow;width:fit-content;" },
7
+ base: { name: "ceyco", styles: "box-sizing:border-box;display:flex;flex-direction:column;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:0.625rem var(--cnvs-base-size-150, 0.75rem) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));margin:0 calc(var(--cnvs-base-size-150, 0.75rem) * -1);transition:100ms box-shadow;width:fit-content;" },
8
8
  modifiers: {
9
9
  error: {
10
- error: { name: "37evev", styles: "background-color:var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));" },
11
- caution: { name: "3qkqa2", styles: "background-color:var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));box-shadow:inset 0 0 0 0.0625rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1))), inset 0 0 0 0.1875rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));" }
10
+ error: { name: "42ia40", styles: "background-color:var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));" },
11
+ caution: { name: "3lw0je", styles: "background-color:var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));box-shadow:inset 0 0 0 0.0625rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1))), inset 0 0 0 0.1875rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));" }
12
12
  }
13
13
  }
14
14
  }, "form-field-group-list-bcc141");
@@ -7,11 +7,11 @@ import { system } from '@workday/canvas-tokens-web';
7
7
  import { useFormFieldHint, useFormFieldModel } from './hooks';
8
8
  export const formFieldHintStencil = createStencil({
9
9
  extends: textStencil,
10
- base: { name: "15zitu", styles: "box-sizing:border-box;margin:0;" },
10
+ base: { name: "wpmgs", styles: "box-sizing:border-box;margin:0;" },
11
11
  modifiers: {
12
12
  error: {
13
- error: { name: "1m3c2q", styles: "color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));" },
14
- caution: { name: "2dicde", styles: "color:var(--cnvs-sys-color-fg-default);" }
13
+ error: { name: "na13r", styles: "color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));" },
14
+ caution: { name: "3mdqy5", styles: "color:var(--cnvs-sys-color-fg-default);" }
15
15
  }
16
16
  },
17
17
  defaultModifiers: {
@@ -7,18 +7,18 @@ import { system } from '@workday/canvas-tokens-web';
7
7
  import { useFormFieldLabel, useFormFieldModel } from './hooks';
8
8
  export const formFieldLabelStencil = createStencil({
9
9
  extends: textStencil,
10
- base: { name: "24vff2", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-fg-default);padding-inline-start:0;display:flex;align-items:center;min-width:11.25rem;" },
10
+ base: { name: "zjndl", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-fg-default);padding-inline-start:0;display:flex;align-items:center;min-width:11.25rem;" },
11
11
  modifiers: {
12
12
  isRequired: {
13
- true: { name: "3s197n", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));text-decoration:unset;margin-inline-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));}" }
13
+ true: { name: "1zc821", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));text-decoration:unset;margin-inline-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));}" }
14
14
  },
15
15
  orientation: {
16
- horizontalStart: { name: "2qlbrs", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));" },
17
- horizontalEnd: { name: "3w8hjx", styles: "max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));float:left;justify-content:flex-end;" },
18
- vertical: { name: "1ncp", styles: "width:100%;" }
16
+ horizontalStart: { name: "bxfi0", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));" },
17
+ horizontalEnd: { name: "456in7", styles: "max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));float:left;justify-content:flex-end;" },
18
+ vertical: { name: "31oroz", styles: "width:100%;" }
19
19
  },
20
20
  isHidden: {
21
- true: { name: "2jl86q", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;min-height:1px;width:1px;min-width:1px;margin:-1px;padding:0;border:0;" }
21
+ true: { name: "nfxu0", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;min-height:1px;width:1px;min-width:1px;margin:-1px;padding:0;border:0;" }
22
22
  }
23
23
  },
24
24
  defaultModifiers: {
@@ -1,22 +1,22 @@
1
1
  import { createStencil } from '@workday/canvas-kit-styling';
2
2
  import { system } from '@workday/canvas-tokens-web';
3
3
  export const formFieldStencil = createStencil({
4
- base: { name: "4bvqi3", styles: "box-sizing:border-box;display:flex;border:none;padding:0;margin:0 0 var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));" },
4
+ base: { name: "13p5qu", styles: "box-sizing:border-box;display:flex;border:none;padding:0;margin:0 0 var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));" },
5
5
  modifiers: {
6
6
  grow: {
7
- true: { name: "1v1tct", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}&:has(div[data-width=\"ck-formfield-width\"]){width:100%;}" }
7
+ true: { name: "1t5odz", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}&:has(div[data-width=\"ck-formfield-width\"]){width:100%;}" }
8
8
  },
9
9
  orientation: {
10
- horizontalStart: { name: "j8dkg", styles: "flex-direction:row;gap:var(--cnvs-sys-gap-xl, var(--cnvs-sys-space-x8, 2rem));width:100%;" },
11
- horizontalEnd: { name: "381ugs", styles: "flex-direction:row;gap:var(--cnvs-sys-gap-xl, var(--cnvs-sys-space-x8, 2rem));width:100%;" },
12
- vertical: { name: "1gdow6", styles: "flex-direction:column;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));align-items:flex-start;" }
10
+ horizontalStart: { name: "2yfjjx", styles: "flex-direction:row;gap:var(--cnvs-sys-gap-xl, var(--cnvs-sys-space-x8, 2rem));width:100%;" },
11
+ horizontalEnd: { name: "3etnbx", styles: "flex-direction:row;gap:var(--cnvs-sys-gap-xl, var(--cnvs-sys-space-x8, 2rem));width:100%;" },
12
+ vertical: { name: "4bqc2p", styles: "flex-direction:column;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));align-items:flex-start;" }
13
13
  },
14
14
  required: {
15
- true: { name: "3glckc", styles: "" }
15
+ true: { name: "1msxaf", styles: "" }
16
16
  },
17
17
  error: {
18
- error: { name: "2hmoli", styles: "" },
19
- caution: { name: "2x2mx7", styles: "" }
18
+ error: { name: "49ral", styles: "" },
19
+ caution: { name: "11zwqd", styles: "" }
20
20
  }
21
21
  },
22
22
  defaultModifiers: {
@@ -24,10 +24,10 @@ export const accentIconStencil = createStencil({
24
24
  vars: {
25
25
  color: '',
26
26
  },
27
- base: { name: "c2e8o", styles: "box-sizing:border-box;--size-svg-bca693:3.5rem;& .color-500{fill:var(--color-accent-icon-1046a0, var(--cnvs-sys-color-bg-primary-strong));}& .french-vanilla-100{fill:var(--cnvs-sys-color-bg-default);}" },
27
+ base: { name: "19gxv4", styles: "box-sizing:border-box;--size-svg-bca693:3.5rem;& .color-500{fill:var(--color-accent-icon-1046a0, var(--cnvs-sys-color-bg-primary-strong));}& .french-vanilla-100{fill:var(--cnvs-sys-color-bg-default);}" },
28
28
  modifiers: {
29
29
  transparent: {
30
- true: { name: "qwxlh", styles: "& .french-vanilla-100{fill:transparent;}" }
30
+ true: { name: "49ap2f", styles: "& .french-vanilla-100{fill:transparent;}" }
31
31
  }
32
32
  }
33
33
  }, "accent-icon-1046a0");
@@ -54,7 +54,7 @@ export const appletIconStencil = createStencil({
54
54
  color400: '',
55
55
  color500: '',
56
56
  },
57
- base: { name: "12m810", styles: "box-sizing:border-box;--size-svg-bca693:5.75rem;& .color-100{fill:var(--cnvs-sys-color-fg-inverse);}& .color-200{fill:var(--color200-applet-icon-02002c, var(--cnvs-base-palette-blue-200, oklch(0.8627 0.0701 250.6 / 1)));}& .color-300{fill:var(--color300-applet-icon-02002c, var(--cnvs-base-palette-blue-400, oklch(0.708 0.1549 255.41 / 1)));}& .color-400{fill:var(--color400-applet-icon-02002c, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));}& .color-400-alpha-20{fill:var(--color400-applet-icon-02002c, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));}& .color-500{fill:var(--color500-applet-icon-02002c, var(--cnvs-base-palette-blue-700, oklch(0.4658 0.1562 255.5 / 1)));}" }
57
+ base: { name: "1zsy36", styles: "box-sizing:border-box;--size-svg-bca693:5.75rem;& .color-100{fill:var(--cnvs-sys-color-fg-inverse);}& .color-200{fill:var(--color200-applet-icon-02002c, var(--cnvs-base-palette-blue-200, oklch(0.8627 0.0701 250.6 / 1)));}& .color-300{fill:var(--color300-applet-icon-02002c, var(--cnvs-base-palette-blue-400, oklch(0.708 0.1549 255.41 / 1)));}& .color-400{fill:var(--color400-applet-icon-02002c, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));}& .color-400-alpha-20{fill:var(--color400-applet-icon-02002c, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));}& .color-500{fill:var(--color500-applet-icon-02002c, var(--cnvs-base-palette-blue-700, oklch(0.4658 0.1562 255.5 / 1)));}" }
58
58
  }, "applet-icon-02002c");
59
59
  /**
60
60
  * @deprecated ⚠️ `AppletIcon` is deprecated and will be removed in a future major version. Deprecated in v15.0.0.