@workday/canvas-kit-react 11.0.0-alpha.726-next.0 → 11.0.0-alpha.760-next.0

package/card/lib/Card.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {mergeStyles, BoxProps} from '@workday/canvas-kit-react/layout';
-import {createStyles} from '@workday/canvas-kit-styling';
-import {base, system} from '@workday/canvas-tokens-web';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 import {CardHeading} from './CardHeading';
 import {CardBody} from './CardBody';
@@ -15,12 +15,15 @@ export interface CardProps extends BoxProps {
   children?: React.ReactNode;
 }
 
-const cardBaseStyles = createStyles({
-  boxShadow: system.depth[1],
-  padding: system.space.x8,
-  backgroundColor: base.frenchVanilla100,
-  border: `0.0625rem solid ${base.soap500}`,
-  borderRadius: system.shape.x2,
+// .cnvs-card
+export const cardStencil = createStencil({
+  base: {
+    boxShadow: system.depth[1],
+    padding: system.space.x8,
+    backgroundColor: system.color.bg.default,
+    border: `${px2rem(1)} solid ${system.color.border.container}`,
+    borderRadius: system.shape.x2,
+  },
 });
 
 /**
@@ -39,7 +42,7 @@ export const Card = createComponent('div')({
   displayName: 'Card',
   Component: ({children, ...elemProps}: CardProps, ref, Element) => {
     return (
-      <Element ref={ref} {...mergeStyles(elemProps, cardBaseStyles)}>
+      <Element ref={ref} {...mergeStyles(elemProps, cardStencil())}>
         {children}
       </Element>
     );

package/card/lib/CardBody.tsx

@@ -1,18 +1,26 @@
 import * as React from 'react';
 
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {BoxProps} from '@workday/canvas-kit-react/layout';
-import {Subtext} from '@workday/canvas-kit-react/text';
+import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {textStencil} from '@workday/canvas-kit-react/text';
+import {createStencil} from '@workday/canvas-kit-styling';
 
 export interface CardBodyProps extends BoxProps {}
 
+// .cnvs-card-body
+export const cardBodyStencil = createStencil({
+  extends: textStencil,
+  base: {},
+  defaultModifiers: {typeLevel: 'subtext.large'},
+});
+
 export const CardBody = createComponent('div')({
   displayName: 'Card.Body',
   Component: ({children, ...elemProps}: CardBodyProps, ref, Element) => {
     return (
-      <Subtext size="large" ref={ref} as={Element} {...elemProps}>
+      <Element ref={ref} {...mergeStyles(elemProps, cardBodyStencil())}>
         {children}
-      </Subtext>
+      </Element>
     );
   },
 });

package/card/lib/CardHeading.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
-import {BodyText} from '@workday/canvas-kit-react/text';
-import {createStyles} from '@workday/canvas-kit-styling';
+import {textStencil} from '@workday/canvas-kit-react/text';
+import {createStencil} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 export interface CardHeadingProps extends BoxProps {
@@ -14,28 +14,25 @@ export interface CardHeadingProps extends BoxProps {
   children?: React.ReactNode;
 }
 
-const cardHeadingBaseStyles = createStyles({
-  fontWeight: system.fontWeight.bold,
-  marginBottom: system.space.x6,
-  marginTop: 0,
+// .cnvs-card-heading
+export const cardHeadingStencil = createStencil({
+  extends: textStencil,
+  base: {
+    color: system.color.text.strong,
+    fontWeight: system.fontWeight.bold,
+    marginBottom: system.space.x6,
+    marginTop: system.space.zero,
+  },
+  defaultModifiers: {typeLevel: 'body.large'},
 });
 
 export const CardHeading = createComponent('h3')({
   displayName: 'Card.Heading',
   Component: ({children, ...elemProps}: CardHeadingProps, ref, Element) => {
     return (
-      <BodyText
-        size="large"
-        color="blackPepper400"
-        fontWeight="bold"
-        marginBottom="m"
-        marginTop={0}
-        ref={ref}
-        as={Element}
-        {...mergeStyles(elemProps, cardHeadingBaseStyles)}
-      >
+      <Element ref={ref} {...mergeStyles(elemProps, cardHeadingStencil())}>
         {children}
-      </BodyText>
+      </Element>
     );
   },
 });

package/collection/lib/ListBox.tsx

@@ -6,7 +6,7 @@ import {
   ExtractProps,
 } from '@workday/canvas-kit-react/common';
 import {Box, Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
-import {createStencil} from '@workday/canvas-kit-styling';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 import {useListModel} from './useListModel';
@@ -102,8 +102,14 @@ export const ListBox = createContainer('ul')({
     return (
       <div
         ref={model.state.containerRef}
-        {...mergeStyles(
-          {maxHeight, marginBottom: marginY, marginTop: marginY},
+        {...handleCsProp(
+          {
+            style: {
+              maxHeight,
+              marginBottom: marginY || marginBottom,
+              marginTop: marginY || marginBottom,
+            },
+          },
           listBoxContainerStencil({orientation: model.state.orientation})
         )}
       >

package/combobox/lib/ComboboxMenuList.tsx

@@ -6,8 +6,7 @@ import {ListBox, ListBoxProps} from '@workday/canvas-kit-react/collection';
 import {system} from '@workday/canvas-tokens-web';
 
 import {useComboboxModel} from './hooks/useComboboxModel';
-import {createStencil, cssVar} from '@workday/canvas-kit-styling';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling';
 
 export interface ComboboxMenuListProps<T = any> extends ListBoxProps<T> {}
 
@@ -24,7 +23,7 @@ export const useComboboxMenuList = createElemPropsHook(useMenuModel)(model => {
   } as const;
 });
 
-const comoboxMenuListStencil = createStencil({
+const comboboxMenuListStencil = createStencil({
   base: {},
   extends: menuListStencil,
 });
@@ -38,7 +37,7 @@ export const ComboboxMenuList = createSubcomponent('ul')({
       as={Element}
       model={model}
       marginY={cssVar(system.space.x2)}
-      {...mergeStyles(elemProps, comoboxMenuListStencil({orientation: model.state.orientation}))}
+      {...handleCsProp(elemProps, comboboxMenuListStencil({orientation: model.state.orientation}))}
     >
       {children}
     </ListBox>

package/dist/commonjs/badge/lib/CountBadge.js

@@ -24,16 +24,16 @@ const React = __importStar(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-const grow = canvas_kit_styling_1.keyframes({ name: "b0dw69", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
+const grow = canvas_kit_styling_1.keyframes({ name: "d9cb82", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
 const countBadgeStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "10yvklm", styles: "align-items:center;animation:animation-b0dw69 0.2s ease;border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));box-sizing:border-box;display:inline-flex;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-size:var(--cnvs-sys-font-size-subtext-medium, 0.75rem);font-weight:var(--cnvs-sys-font-weight-bold, 700);height:1.25rem;justify-content:center;line-height:1.25rem;min-width:1.25rem;padding:0 0.40625rem;" },
+    base: { name: "b5e677", styles: "align-items:center;animation:animation-d9cb82 0.2s ease;border-radius:var(--cnvs-sys-shape-round);box-sizing:border-box;display:inline-flex;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-medium);font-weight:var(--cnvs-sys-font-weight-bold);height:1.25rem;justify-content:center;line-height:1.25rem;min-width:1.25rem;padding:0 0.40625rem;" },
     modifiers: {
-        modifiers: {
-            default: { name: "ls097g", styles: "background:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));text-shadow:0 0 0.0625rem rgba(0,0,0, 0.35);" },
-            inverse: { name: "lr1pbf", styles: "background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));box-shadow:0 0.0625rem 0.125rem rgba(0,0,0, 0.25);color:var(--cnvs-base-palette-blueberry-400, rgba(8,117,225,1));" }
+        variant: {
+            default: { name: "7f4c93", styles: "background:var(--cnvs-base-palette-cinnamon-500);color:var(--cnvs-base-palette-french-vanilla-100);text-shadow:0 0 0.0625rem rgba(0,0,0, 0.35);" },
+            inverse: { name: "ed8e67", styles: "background:var(--cnvs-base-palette-french-vanilla-100);box-shadow:0 0.0625rem 0.125rem rgba(0,0,0, 0.25);color:var(--cnvs-base-palette-blueberry-400);" }
         }
     }
-}, "count-badge");
+}, "cnvs-count-badge");
 /**
  * `CountBadge` provides a quantity-based summary with dynamic values.
  */

package/dist/commonjs/breadcrumbs/lib/BreadcrumbsItem.js

@@ -47,5 +47,5 @@ exports.BreadcrumbsItem = common_1.createSubcomponent('li')({
 })(({ children, ...elemProps }, Element) => {
     return (React.createElement(layout_1.Flex, Object.assign({ as: Element, alignItems: "center", whiteSpace: "nowrap" }, elemProps),
         children,
-        React.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.chevronRightSmallIcon, color: tokens_1.colors.licorice200, colorHover: tokens_1.colors.licorice200, size: 20, height: tokens_1.space.l, width: tokens_1.space.l, shouldMirror: common_1.useIsRTL(), styles: { justifyContent: 'center', alignItems: 'center', display: 'inline-flex' }, "aria-hidden": true })));
+        React.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.chevronRightSmallIcon, color: tokens_1.colors.licorice200, colorHover: tokens_1.colors.licorice200, size: 20, height: tokens_1.space.l, width: tokens_1.space.l, shouldMirror: common_1.useIsRTL(), cs: { justifyContent: 'center', alignItems: 'center', display: 'inline-flex' }, "aria-hidden": true })));
 });

package/dist/commonjs/breadcrumbs/lib/BreadcrumbsOverflowButton.js

@@ -41,5 +41,5 @@ exports.BreadcrumbsOverflowButton = common_1.createSubcomponent('button')({
 })(({ style, ...elemProps }, Element) => {
     return (React.createElement(layout_1.Flex, Object.assign({ alignItems: "center" }, style),
         React.createElement(button_1.TertiaryButton, Object.assign({ as: Element, icon: canvas_system_icons_web_1.relatedActionsIcon }, elemProps)),
-        React.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.chevronRightSmallIcon, color: tokens_1.colors.licorice200, colorHover: tokens_1.colors.licorice200, size: 20, height: tokens_1.space.l, width: tokens_1.space.l, shouldMirror: common_1.useIsRTL(), styles: { justifyContent: 'center', alignItems: 'center', display: 'inline-flex' }, "aria-hidden": true })));
+        React.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.chevronRightSmallIcon, color: tokens_1.colors.licorice200, colorHover: tokens_1.colors.licorice200, size: 20, height: tokens_1.space.l, width: tokens_1.space.l, shouldMirror: common_1.useIsRTL(), cs: { justifyContent: 'center', alignItems: 'center', display: 'inline-flex' }, "aria-hidden": true })));
 });

package/dist/commonjs/button/lib/BaseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;AAG5F,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE/D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;CAmDtB,CAAC;AAsFF;;;;;GAKG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;EA4E1B,CAAC;AAEH,wBAAgB,UAAU,CAAC,MAAM,GAAE,MAAW,UAE7C;AAED,wBAAgB,eAAe,CAC7B,IAAI,CAAC,EAAE,MAAM,OAAO,eAAe,CAAC,IAAI,EACxC,YAAY,CAAC,EAAE,aAAa,EAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GACzB,MAAM,OAAO,eAAe,CAAC,YAAY,CAE3C;AAED;;GAEG;AACH,eAAO,MAAM,UAAU;;;CAyCrB,CAAC"}
+{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;AAG5F,OAAO,EAAC,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAElF,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;CAmDtB,CAAC;AAqGF;;;;;GAKG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;EA4E1B,CAAC;AAEH,wBAAgB,UAAU,CAAC,MAAM,GAAE,MAAW,UAE7C;AAED,wBAAgB,eAAe,CAC7B,IAAI,CAAC,EAAE,MAAM,OAAO,eAAe,CAAC,IAAI,EACxC,YAAY,CAAC,EAAE,aAAa,EAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GACzB,MAAM,OAAO,eAAe,CAAC,YAAY,CAE3C;AAED;;GAEG;AACH,eAAO,MAAM,UAAU;;;CAyCrB,CAAC"}

package/dist/commonjs/button/lib/BaseButton.js

@@ -26,6 +26,7 @@ const ButtonLabel_1 = require("../lib/parts/ButtonLabel");
 const common_1 = require("@workday/canvas-kit-react/common");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const icon_1 = require("@workday/canvas-kit-react/icon");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 /**
  * Temporary css variables to be used across all Buttons.
@@ -40,7 +41,7 @@ exports.buttonVars = {
 /**
  * Base styles for Buttons.
  */
-const baseButtonStyles = canvas_kit_styling_1.createStyles({ name: "s5s586", styles: "font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:bold;background-color:var(--cnvs-button-default-background, transparent);color:var(--cnvs-button-default-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));border-color:var(--cnvs-button-default-border, transparent);cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;box-sizing:border-box;outline:2px transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--cnvs-button-default-borderRadius, var(--cnvs-sys-shape-round, calc(0.25rem * 250)));position:relative;vertical-align:middle;overflow:hidden;transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active, &.disabled{cursor:default;box-shadow:none;opacity:var(--cnvs-button-disabled-opacity, 1);}& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2{transition-duration:40ms;fill:var(--cnvs-button-default-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-default-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}&:focus-visible, &.focus{background-color:var(--cnvs-button-focus-background, transparent);border-color:var(--cnvs-button-focus-border, transparent);color:var(--cnvs-button-focus-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2{fill:var(--cnvs-button-focus-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}box-shadow:0 0 0 2px var(--cnvs-button-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1))), 0 0 0 4px var(--cnvs-button-focus-boxShadowOuter, var(--cnvs-brand-primary-base, rgba(8,117,225,1)));}&:hover, &.hover{background-color:var(--cnvs-button-hover-background, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));border-color:var(--cnvs-button-hover-border, transparent);color:var(--cnvs-button-hover-label-emotion-safe, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2{fill:var(--cnvs-button-hover-icon, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));}}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--cnvs-button-active-background, transparent);border-color:var(--cnvs-button-active-border, transparent);color:var(--cnvs-button-active-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2{fill:var(--cnvs-button-active-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}}&:disabled, &.disabled{background-color:var(--cnvs-button-disabled-background, transparent);border-color:var(--cnvs-button-disabled-border, transparent);color:var(--cnvs-button-disabled-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2{fill:var(--cnvs-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}}" });
+const baseButtonStyles = canvas_kit_styling_1.createStyles({ name: "b837cf", styles: "font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:bold;background-color:var(--cnvs-button-default-background, transparent);color:var(--cnvs-button-default-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2);border-color:var(--cnvs-button-default-border, transparent);cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;box-sizing:border-box;outline:2px transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--cnvs-button-default-borderRadius, var(--cnvs-sys-shape-round));position:relative;vertical-align:middle;overflow:hidden;--cnvs-system-icon-color:var(--cnvs-button-default-icon, var(--cnvs-base-palette-black-pepper-400));transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active, &.disabled{cursor:default;box-shadow:none;opacity:var(--cnvs-button-disabled-opacity, 1);}&:focus-visible, &.focus{background-color:var(--cnvs-button-focus-background, transparent);border-color:var(--cnvs-button-focus-border, transparent);color:var(--cnvs-button-focus-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));--cnvs-system-icon-color:var(--cnvs-button-focus-icon, var(--cnvs-base-palette-black-pepper-400));box-shadow:0 0 0 2px var(--cnvs-button-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100)), 0 0 0 4px var(--cnvs-button-focus-boxShadowOuter, var(--cnvs-brand-primary-base));}&:hover, &.hover{background-color:var(--cnvs-button-hover-background, var(--cnvs-base-palette-black-pepper-500));border-color:var(--cnvs-button-hover-border, transparent);color:var(--cnvs-button-hover-label-emotion-safe, var(--cnvs-base-palette-black-pepper-500));--cnvs-system-icon-color:var(--cnvs-button-hover-icon, var(--cnvs-base-palette-black-pepper-500));}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--cnvs-button-active-background, transparent);border-color:var(--cnvs-button-active-border, transparent);color:var(--cnvs-button-active-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));--cnvs-system-icon-color:var(--cnvs-button-active-icon, var(--cnvs-base-palette-black-pepper-400));}&:disabled, &.disabled{background-color:var(--cnvs-button-disabled-background, transparent);border-color:var(--cnvs-button-disabled-border, transparent);color:var(--cnvs-button-disabled-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));--cnvs-system-icon-color:var(--cnvs-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400));}" });
 /**
  * Button modifiers that will overwrite the base styles of Buttons.
  * - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
@@ -49,24 +50,24 @@ const baseButtonStyles = canvas_kit_styling_1.createStyles({ name: "s5s586", sty
  */
 exports.buttonModifiers = canvas_kit_styling_1.createModifiers({
     size: {
-        large: canvas_kit_styling_1.createStyles({ name: "1vuu82a", styles: "font-size:var(--cnvs-sys-space-x4, calc(0.25rem * 4));line-height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));letter-spacing:0.01rem;height:48px;padding-inline:var(--cnvs-sys-space-x8, calc(0.25rem * 8));min-width:112px;" }),
-        medium: canvas_kit_styling_1.createStyles({ name: "1tv5kp2", styles: "font-size:0.875rem;letter-spacing:0.015rem;min-width:96px;padding-inline:var(--cnvs-sys-space-x6, calc(0.25rem * 6));height:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }),
-        small: canvas_kit_styling_1.createStyles({ name: "1bibd9a", styles: "font-size:0.875rem;letter-spacing:0.015rem;height:var(--cnvs-sys-space-x8, calc(0.25rem * 8));min-width:var(--cnvs-sys-space-x20, calc(0.25rem * 20));padding-inline:var(--cnvs-sys-space-x4, calc(0.25rem * 4));gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
-        extraSmall: canvas_kit_styling_1.createStyles({ name: "jxl8ry", styles: "font-size:0.75rem;line-height:var(--cnvs-sys-space-x4, calc(0.25rem * 4));letter-spacing:0.02rem;height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));min-width:auto;padding-inline:var(--cnvs-sys-space-x3, calc(0.25rem * 3));gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
+        large: canvas_kit_styling_1.createStyles({ name: "bac76a", styles: "font-size:var(--cnvs-sys-space-x4);line-height:var(--cnvs-sys-space-x6);letter-spacing:0.01rem;height:48px;padding-inline:var(--cnvs-sys-space-x8);min-width:112px;" }),
+        medium: canvas_kit_styling_1.createStyles({ name: "384911", styles: "font-size:0.875rem;letter-spacing:0.015rem;min-width:96px;padding-inline:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x10);" }),
+        small: canvas_kit_styling_1.createStyles({ name: "d66a85", styles: "font-size:0.875rem;letter-spacing:0.015rem;height:var(--cnvs-sys-space-x8);min-width:var(--cnvs-sys-space-x20);padding-inline:var(--cnvs-sys-space-x4);gap:var(--cnvs-sys-space-x1);" }),
+        extraSmall: canvas_kit_styling_1.createStyles({ name: "6f327c", styles: "font-size:0.75rem;line-height:var(--cnvs-sys-space-x4);letter-spacing:0.02rem;height:var(--cnvs-sys-space-x6);min-width:auto;padding-inline:var(--cnvs-sys-space-x3);gap:var(--cnvs-sys-space-x1);" }),
     },
     iconPosition: {
-        largeOnly: canvas_kit_styling_1.createStyles({ name: "17x7zv9", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) * 3);" }),
-        largeStart: canvas_kit_styling_1.createStyles({ name: "6nuy87", styles: "padding-inline-start:var(--cnvs-sys-space-x6, calc(0.25rem * 6));padding-inline-end:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }),
-        largeEnd: canvas_kit_styling_1.createStyles({ name: "sco5n0", styles: "padding-inline-start:var(--cnvs-sys-space-x8, calc(0.25rem * 8));padding-inline-end:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
-        mediumOnly: canvas_kit_styling_1.createStyles({ name: "184b2d3", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }),
-        mediumStart: canvas_kit_styling_1.createStyles({ name: "1spsu3s", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);padding-inline-end:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
-        mediumEnd: canvas_kit_styling_1.createStyles({ name: "aawort", styles: "padding-inline-start:var(--cnvs-sys-space-x6, calc(0.25rem * 6));padding-inline-end:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);" }),
-        smallOnly: canvas_kit_styling_1.createStyles({ name: "4un8za", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }),
-        smallStart: canvas_kit_styling_1.createStyles({ name: "996eys", styles: "padding-inline-start:var(--cnvs-sys-space-x3, calc(0.25rem * 3));padding-inline-end:var(--cnvs-sys-space-x4, calc(0.25rem * 4));" }),
-        smallEnd: canvas_kit_styling_1.createStyles({ name: "1khaens", styles: "padding-inline-start:var(--cnvs-sys-space-x4, calc(0.25rem * 4));padding-inline-end:var(--cnvs-sys-space-x3, calc(0.25rem * 3));" }),
-        extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "uyhf8a", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
-        extraSmallStart: canvas_kit_styling_1.createStyles({ name: "1m2nnkm", styles: "padding-inline-start:var(--cnvs-sys-space-x2, calc(0.25rem * 2));padding-inline-end:var(--cnvs-sys-space-x3, calc(0.25rem * 3));" }),
-        extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "11knxyn", styles: "padding-inline-start:var(--cnvs-sys-space-x3, calc(0.25rem * 3));padding-inline-end:var(--cnvs-sys-space-x2, calc(0.25rem * 2));" }),
+        largeOnly: canvas_kit_styling_1.createStyles({ name: "3bae83", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4) * 3);" }),
+        largeStart: canvas_kit_styling_1.createStyles({ name: "7a1e10", styles: "padding-inline-start:var(--cnvs-sys-space-x6);padding-inline-end:var(--cnvs-sys-space-x8);" }),
+        largeEnd: canvas_kit_styling_1.createStyles({ name: "9d8168", styles: "padding-inline-start:var(--cnvs-sys-space-x8);padding-inline-end:var(--cnvs-sys-space-x6);" }),
+        mediumOnly: canvas_kit_styling_1.createStyles({ name: "c32cda", styles: "padding:0;min-width:var(--cnvs-sys-space-x10);" }),
+        mediumStart: canvas_kit_styling_1.createStyles({ name: "7464e4", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1) * 5);padding-inline-end:var(--cnvs-sys-space-x6);" }),
+        mediumEnd: canvas_kit_styling_1.createStyles({ name: "9a9708", styles: "padding-inline-start:var(--cnvs-sys-space-x6);padding-inline-end:calc(var(--cnvs-sys-space-x1) * 5);" }),
+        smallOnly: canvas_kit_styling_1.createStyles({ name: "3224de", styles: "padding:0;min-width:var(--cnvs-sys-space-x8);" }),
+        smallStart: canvas_kit_styling_1.createStyles({ name: "0b192b", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x4);" }),
+        smallEnd: canvas_kit_styling_1.createStyles({ name: "84037d", styles: "padding-inline-start:var(--cnvs-sys-space-x4);padding-inline-end:var(--cnvs-sys-space-x3);" }),
+        extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "2a4f9f", styles: "padding:0;min-width:var(--cnvs-sys-space-x6);" }),
+        extraSmallStart: canvas_kit_styling_1.createStyles({ name: "5ef1d1", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }),
+        extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "e26189", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }),
     },
 });
 function capitalize(string = '') {

package/dist/commonjs/button/lib/DeleteButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeleteButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/DeleteButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAE7C;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;CAAG;AAoCzD;;;;GAIG;AACH,eAAO,MAAM,YAAY,0FASvB,CAAC"}
+{"version":3,"file":"DeleteButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/DeleteButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAG7C;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;CAAG;AAoCzD;;;;GAIG;AACH,eAAO,MAAM,YAAY,0FASvB,CAAC"}

package/dist/commonjs/button/lib/DeleteButton.js

@@ -27,7 +27,8 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const Button_1 = require("./Button");
-const deleteStyles = canvas_kit_styling_1.createStyles({ name: "1qtsx01", styles: "--cnvs-button-default-background:var(--cnvs-brand-error-base, rgba(222,46,33,1));--cnvs-button-default-border:transparent;--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--cnvs-button-default-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-default-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));&:hover, &.hover{--cnvs-button-hover-background:var(--cnvs-brand-error-dark, rgba(163,27,18,1));--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-hover-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));}&:focus-visible, &.focus{--cnvs-button-focus-background:var(--cnvs-brand-error-base, rgba(222,46,33,1));--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-focus-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:active, &.active{--cnvs-button-active-background:var(--cnvs-brand-error-darkest, rgba(128,22,14,1));--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-active-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));}&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled{--cnvs-button-disabled-background:var(--cnvs-brand-error-base, rgba(222,46,33,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-disabled-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-disabled-opacity:0.4;}" });
+const icon_1 = require("../../icon");
+const deleteStyles = canvas_kit_styling_1.createStyles({ name: "16dcc7", styles: "--cnvs-button-default-background:var(--cnvs-brand-error-base);--cnvs-button-default-border:transparent;--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-default-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);&:focus-visible, &.focus{--cnvs-button-focus-background:var(--cnvs-brand-error-base);--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100);--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--cnvs-button-hover-background:var(--cnvs-brand-error-dark);--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);}&:active, &.active{--cnvs-button-active-background:var(--cnvs-brand-error-darkest);--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);}&:disabled, &.disabled{--cnvs-button-disabled-background:var(--cnvs-brand-error-base);--cnvs-button-disabled-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);--cnvs-button-disabled-opacity:0.4;}" });
 /**
  * Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
  * have significant consequences. They commonly appear in confirmation dialogs as the final

package/dist/commonjs/button/lib/ExternalHyperlink.js

@@ -34,5 +34,5 @@ exports.ExternalHyperlink = common_1.createComponent('a')({
     displayName: 'ExternalHyperlink',
     Component: ({ children, iconLabel = 'Opens link in new window', ...elemProps }, ref) => (react_1.default.createElement(Anchor, Object.assign({ ref: ref, target: "_blank", rel: "noreferrer" }, elemProps),
         react_1.default.createElement("span", null, children),
-        react_1.default.createElement(StyledSystemIcon, { icon: canvas_system_icons_web_1.extLinkIcon, role: "img", "aria-label": iconLabel, size: iconSize, styles: { ['& svg']: { minWidth: minIconSize, minHeight: minIconSize } } }))),
+        react_1.default.createElement(StyledSystemIcon, { icon: canvas_system_icons_web_1.extLinkIcon, role: "img", "aria-label": iconLabel, size: iconSize, cs: { '& svg': { minWidth: minIconSize, minHeight: minIconSize } } }))),
 });

package/dist/commonjs/button/lib/PrimaryButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAE7C;;;;GAIG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAkCD,eAAO,MAAM,sBAAsB;;;;EA4BjC,CAAC;AAEH,eAAO,MAAM,aAAa,2FAaxB,CAAC"}
+{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAE7C;;;;GAIG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAqCD,eAAO,MAAM,sBAAsB;;;;EA+BjC,CAAC;AAEH,eAAO,MAAM,aAAa,2FAaxB,CAAC"}

package/dist/commonjs/button/lib/PrimaryButton.js

@@ -24,13 +24,14 @@ const React = __importStar(require("react"));
 const BaseButton_1 = require("./BaseButton");
 const common_1 = require("@workday/canvas-kit-react/common");
 const layout_1 = require("@workday/canvas-kit-react/layout");
+const icon_1 = require("@workday/canvas-kit-react/icon");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const Button_1 = require("./Button");
-const primaryStyles = canvas_kit_styling_1.createStyles({ name: "1pt3ej4", styles: "--cnvs-button-default-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-default-border:transparent;--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--cnvs-button-default-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-default-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-hover-background:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-focus-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-focus-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-active-background:var(--cnvs-brand-primary-darkest, rgba(0,67,135,1));--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-disabled-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-disabled-border:transparent;--cnvs-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-disabled-opacity:0.4;--cnvs-button-disabled-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));" });
+const primaryStyles = canvas_kit_styling_1.createStyles({ name: "879de3", styles: "--cnvs-button-default-background:var(--cnvs-brand-primary-base);--cnvs-button-default-border:transparent;--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-default-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);&:focus-visible, &.focus{--cnvs-button-focus-background:var(--cnvs-brand-primary-base);--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100);--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}&:hover, &.hover{--cnvs-button-hover-background:var(--cnvs-brand-primary-dark);--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}&:active, &.active{--cnvs-button-active-background:var(--cnvs-brand-primary-darkest);--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}&:disabled, &.disabled{--cnvs-button-disabled-background:var(--cnvs-brand-primary-base);--cnvs-button-disabled-border:transparent;--cnvs-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-button-disabled-opacity:0.4;--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}" });
 exports.primaryButtonModifiers = canvas_kit_styling_1.createModifiers({
     variant: {
-        inverse: canvas_kit_styling_1.createStyles({ name: "a2rvr", styles: "--cnvs-button-default-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--cnvs-button-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--cnvs-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-disabled-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
+        inverse: canvas_kit_styling_1.createStyles({ name: "d047e0", styles: "--cnvs-button-default-background:var(--cnvs-base-palette-french-vanilla-100);--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400);--cnvs-system-icon-color:var(--cnvs-base-palette-black-pepper-400);&:focus-visible, &.focus{--cnvs-button-focus-background:var(--cnvs-base-palette-french-vanilla-100);--cnvs-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400);--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-400);--cnvs-button-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100);--cnvs-system-icon-color:var(--cnvs-base-palette-black-pepper-400);}&:hover, &.hover{--cnvs-button-hover-background:var(--cnvs-base-palette-soap-300);--cnvs-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500);--cnvs-system-icon-color:var(--cnvs-base-palette-black-pepper-500);}&:active, &.active{--cnvs-button-active-background:var(--cnvs-base-palette-soap-400);--cnvs-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500);--cnvs-system-icon-color:var(--cnvs-base-palette-black-pepper-500);}&:disabled, &.disabled{--cnvs-button-disabled-background:var(--cnvs-base-palette-french-vanilla-100);--cnvs-button-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400);--cnvs-system-icon-color:var(--cnvs-base-palette-black-pepper-400);}" }),
     },
 });
 exports.PrimaryButton = common_1.createComponent('button')({

package/dist/commonjs/button/lib/SecondaryButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAE7C;;;;GAIG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAsDD,eAAO,MAAM,wBAAwB;;;;EA8CnC,CAAC;AAEH,eAAO,MAAM,eAAe,6FAa1B,CAAC"}
+{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAG7C;;;;GAIG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA0CD,eAAO,MAAM,wBAAwB;;;;EAwCnC,CAAC;AAEH,eAAO,MAAM,eAAe,6FAa1B,CAAC"}

package/dist/commonjs/button/lib/SecondaryButton.js

@@ -27,10 +27,11 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const Button_1 = require("./Button");
-const secondaryStyles = canvas_kit_styling_1.createStyles({ name: "193160q", styles: "--cnvs-button-default-background:transparent;--cnvs-button-default-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--cnvs-button-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-background:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-focus-background:transparent;--cnvs-button-focus-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-active-background:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-active-border:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-opacity:0.4;--cnvs-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" });
+const icon_1 = require("../../icon");
+const secondaryStyles = canvas_kit_styling_1.createStyles({ name: "536aff", styles: "--cnvs-button-default-background:transparent;--cnvs-button-default-border:var(--cnvs-base-palette-black-pepper-400);--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400);--cnvs-system-icon-color:var(--cnvs-base-palette-black-pepper-400);&:focus-visible, &.focus{--cnvs-button-focus-background:transparent;--cnvs-button-focus-border:var(--cnvs-base-palette-black-pepper-400);--cnvs-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400);--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100);--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline);--cnvs-system-icon-color:var(--cnvs-base-palette-black-pepper-400);}&:hover, &.hover{--cnvs-button-hover-background:var(--cnvs-base-palette-black-pepper-400);--cnvs-button-hover-border:var(--cnvs-base-palette-black-pepper-400);--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}&:active, &.active{--cnvs-button-active-background:var(--cnvs-base-palette-black-pepper-500);--cnvs-button-active-border:var(--cnvs-base-palette-black-pepper-500);--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}&:disabled, &.disabled{--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:var(--cnvs-base-palette-black-pepper-400);--cnvs-button-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400);--cnvs-button-disabled-opacity:0.4;--cnvs-system-icon-color:var(--cnvs-base-palette-black-pepper-400);}" });
 exports.secondaryButtonModifiers = canvas_kit_styling_1.createModifiers({
     variant: {
-        inverse: canvas_kit_styling_1.createStyles({ name: "1ukv7d0", styles: "--cnvs-button-default-background:transparent;--cnvs-button-default-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-button-hover-border:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--cnvs-button-active-border:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--cnvs-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }),
+        inverse: canvas_kit_styling_1.createStyles({ name: "672601", styles: "--cnvs-button-default-background:transparent;--cnvs-button-default-border:var(--cnvs-base-palette-french-vanilla-100);--cnvs-button-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100);--cnvs-system-icon-color:var(--cnvs-base-palette-french-vanilla-100);&:focus-visible, &.focus{--cnvs-button-focus-background:var(--cnvs-base-palette-french-vanilla-100);--cnvs-button-focus-border:var(--cnvs-base-palette-french-vanilla-100);--cnvs-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400);--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-400);--cnvs-button-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100);--cnvs-system-icon-color:var(--cnvs-base-palette-black-pepper-400);}&:hover, &.hover{--cnvs-button-hover-background:var(--cnvs-base-palette-soap-300);--cnvs-button-hover-border:var(--cnvs-base-palette-soap-300);--cnvs-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500);--cnvs-system-icon-color:var(--cnvs-base-palette-black-pepper-500);}&:active, &.active{--cnvs-button-active-background:var(--cnvs-base-palette-soap-400);--cnvs-button-active-border:var(--cnvs-base-palette-soap-400);--cnvs-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500);--cnvs-system-icon-color:var(--cnvs-base-palette-black-pepper-500);}&:disabled, &.disabled{--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100);--cnvs-button-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100);--cnvs-system-icon-color:var(--cnvs-base-palette-french-vanilla-100);}" }),
     },
 });
 exports.SecondaryButton = common_1.createComponent('button')({

package/dist/commonjs/button/lib/TertiaryButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAE7C;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA+CD,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;EA0ElC,CAAC;AAEH,eAAO,MAAM,cAAc,4FA2CzB,CAAC"}
+{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAG7C;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA8CD,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;EAmFlC,CAAC;AAEH,eAAO,MAAM,cAAc,4FA2CzB,CAAC"}

package/dist/commonjs/button/lib/TertiaryButton.js

@@ -28,27 +28,28 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const Button_1 = require("./Button");
-const tertiaryStyles = canvas_kit_styling_1.createStyles({ name: "140m1mb", styles: "padding-inline:var(--cnvs-sys-space-x2, calc(0.25rem * 2));min-width:auto;text-decoration:underline;border:0;--cnvs-button-default-background:transparent;--cnvs-button-default-border:transparent;--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-x1, 0.25rem);--cnvs-button-default-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--cnvs-button-hover-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-background:transparent;--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-primary-darkest, rgba(0,67,135,1));--cnvs-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:transparent;--cnvs-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-opacity:0.4;&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" });
+const icon_1 = require("../../icon");
+const tertiaryStyles = canvas_kit_styling_1.createStyles({ name: "4e035a", styles: "padding-inline:var(--cnvs-sys-space-x2);min-width:auto;text-decoration:underline;border:0;--cnvs-button-default-background:transparent;--cnvs-button-default-border:transparent;--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-x1);--cnvs-button-default-label-emotion-safe:var(--cnvs-brand-primary-base);--cnvs-system-icon-color:var(--cnvs-base-palette-black-pepper-400);&:focus-visible, &.focus{--cnvs-button-focus-background:transparent;--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-brand-primary-base);--cnvs-button-focus-boxShadowInner:var(--cnvs-brand-common-focus-outline);--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline);--cnvs-system-icon-color:var(--cnvs-base-palette-black-pepper-400);box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--cnvs-button-hover-background:var(--cnvs-base-palette-soap-300);--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-primary-dark);--cnvs-system-icon-color:var(--cnvs-base-palette-black-pepper-400);}&:active, &.active{--cnvs-button-active-background:var(--cnvs-base-palette-soap-400);--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-primary-darkest);--cnvs-system-icon-color:var(--cnvs-base-palette-black-pepper-500);}&:disabled, &.disabled{--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:transparent;--cnvs-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-base);--cnvs-button-disabled-opacity:0.4;}" });
 exports.tertiaryButtonModifiers = canvas_kit_styling_1.createModifiers({
     isThemeable: {
-        true: canvas_kit_styling_1.createStyles({ name: "1t7d7ry", styles: "--cnvs-button-default-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-hover-icon:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--cnvs-button-focus-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-active-icon:var(--cnvs-brand-primary-darkest, rgba(0,67,135,1));--cnvs-button-disabled-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));" }),
+        true: canvas_kit_styling_1.createStyles({ name: "4874c5", styles: "--cnvs-system-icon-color:var(--cnvs-brand-primary-base);&:focus-visible, &.focus{--cnvs-system-icon-color:var(--cnvs-brand-primary-base);}&:hover, &.hover{--cnvs-system-icon-color:var(--cnvs-brand-primary-dark);}&:active, &.active{--cnvs-system-icon-color:var(--cnvs-brand-primary-darkest);}&:disabled, &.disabled{--cnvs-system-icon-color:var(--cnvs-brand-primary-base);}" }),
     },
     variant: {
-        inverse: canvas_kit_styling_1.createStyles({ name: "eb23n9", styles: "--cnvs-button-default-background:transparent;--cnvs-button-default-border:transparent;--cnvs-button-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-hover-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-active-background:var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-active-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));&:focus-visible, &.focus{box-shadow:inset 0 0 0 2px var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));}" }),
+        inverse: canvas_kit_styling_1.createStyles({ name: "375434", styles: "--cnvs-button-default-background:transparent;--cnvs-button-default-border:transparent;--cnvs-button-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100);--cnvs-system-icon-color:var(--cnvs-base-palette-french-vanilla-100);&:focus-visible, &.focus{--cnvs-button-focus-background:var(--cnvs-base-palette-french-vanilla-100);--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400);--cnvs-system-icon-color:var(--cnvs-base-palette-black-pepper-400);box-shadow:inset 0 0 0 2px var(--cnvs-base-palette-black-pepper-400), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100);}&:hover, &.hover{--cnvs-button-hover-background:var(--cnvs-base-palette-french-vanilla-100);--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400);--cnvs-system-icon-color:var(--cnvs-base-palette-black-pepper-400);}&:active, &.active{--cnvs-button-active-background:var(--cnvs-base-palette-soap-200);--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400);--cnvs-system-icon-color:var(--cnvs-base-palette-black-pepper-400);}&:disabled, &.disabled{--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100);--cnvs-button-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100);--cnvs-system-icon-color:var(--cnvs-base-palette-french-vanilla-100);}" }),
     },
     iconPosition: {
-        largeOnly: canvas_kit_styling_1.createStyles({ name: "xih0j4", styles: "border-radius:999px;padding:0;min-width:calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) * 3);" }),
-        largeStart: canvas_kit_styling_1.createStyles({ name: "13w6ubi", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
-        largeEnd: canvas_kit_styling_1.createStyles({ name: "1g2rd08", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
-        mediumOnly: canvas_kit_styling_1.createStyles({ name: "10i0ly8", styles: "padding:0;min-width:2.5rem;border-radius:999px;" }),
-        mediumStart: canvas_kit_styling_1.createStyles({ name: "13w6ubi", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
-        mediumEnd: canvas_kit_styling_1.createStyles({ name: "1g2rd08", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
-        smallOnly: canvas_kit_styling_1.createStyles({ name: "18m1kdv", styles: "padding:0;min-width:2rem;border-radius:999px;" }),
-        smallStart: canvas_kit_styling_1.createStyles({ name: "13w6ubi", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
-        smallEnd: canvas_kit_styling_1.createStyles({ name: "1g2rd08", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
-        extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "1pnzsxn", styles: "padding:0;min-width:1.5rem;border-radius:999px;" }),
-        extraSmallStart: canvas_kit_styling_1.createStyles({ name: "1ixecau", styles: "padding-inline-start:0.25rem;padding-inline-end:0.5rem;" }),
-        extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "f1t4k2", styles: "padding-inline-start:0.5rem;padding-inline-end:0.25rem;" }),
+        largeOnly: canvas_kit_styling_1.createStyles({ name: "e29f7e", styles: "border-radius:999px;padding:0;min-width:calc(var(--cnvs-sys-space-x4) * 3);" }),
+        largeStart: canvas_kit_styling_1.createStyles({ name: "61470b", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
+        largeEnd: canvas_kit_styling_1.createStyles({ name: "909121", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
+        mediumOnly: canvas_kit_styling_1.createStyles({ name: "eb1770", styles: "padding:0;min-width:2.5rem;border-radius:999px;" }),
+        mediumStart: canvas_kit_styling_1.createStyles({ name: "620c69", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
+        mediumEnd: canvas_kit_styling_1.createStyles({ name: "e0639b", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
+        smallOnly: canvas_kit_styling_1.createStyles({ name: "ffd7ba", styles: "padding:0;min-width:2rem;border-radius:999px;" }),
+        smallStart: canvas_kit_styling_1.createStyles({ name: "778c36", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
+        smallEnd: canvas_kit_styling_1.createStyles({ name: "3d3437", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
+        extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "312d52", styles: "padding:0;min-width:1.5rem;border-radius:999px;" }),
+        extraSmallStart: canvas_kit_styling_1.createStyles({ name: "9b7fcd", styles: "padding-inline-start:0.25rem;padding-inline-end:0.5rem;" }),
+        extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "d37c78", styles: "padding-inline-start:0.5rem;padding-inline-end:0.25rem;" }),
     },
 });
 exports.TertiaryButton = common_1.createComponent('button')({

package/dist/commonjs/card/index.d.ts

@@ -1,2 +1,4 @@
-export { Card } from './lib/Card';
+export { Card, cardStencil } from './lib/Card';
+export { cardHeadingStencil } from './lib/CardHeading';
+export { cardBodyStencil } from './lib/CardBody';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAE,WAAW,EAAC,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAC,kBAAkB,EAAC,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC"}

package/dist/commonjs/card/index.js

@@ -1,5 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Card = void 0;
+exports.cardBodyStencil = exports.cardHeadingStencil = exports.cardStencil = exports.Card = void 0;
 var Card_1 = require("./lib/Card");
 Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });
+Object.defineProperty(exports, "cardStencil", { enumerable: true, get: function () { return Card_1.cardStencil; } });
+var CardHeading_1 = require("./lib/CardHeading");
+Object.defineProperty(exports, "cardHeadingStencil", { enumerable: true, get: function () { return CardHeading_1.cardHeadingStencil; } });
+var CardBody_1 = require("./lib/CardBody");
+Object.defineProperty(exports, "cardBodyStencil", { enumerable: true, get: function () { return CardBody_1.cardBodyStencil; } });

package/dist/commonjs/card/lib/Card.d.ts

@@ -6,6 +6,7 @@ export interface CardProps extends BoxProps {
      */
     children?: React.ReactNode;
 }
+export declare const cardStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, never, never>;
 /**
  * `Card` is a container component that holds a {@link CardBody Card.Body} and an optional
  * {@link CardHeading Card.Heading}. `Card` wraps a non-semantic `div` element. The element can be

package/dist/commonjs/card/lib/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../card/lib/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAc,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAOvE,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAUD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,IAAI;IAUb;;;;;;;;;;;;;;;;;OAiBG;;IAEH;;;;;OAKG;;CAGL,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../card/lib/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAc,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAOvE,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,eAAO,MAAM,WAAW,yIAQtB,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,IAAI;IAUb;;;;;;;;;;;;;;;;;OAiBG;;IAEH;;;;;OAKG;;CAGL,CAAC"}

package/dist/commonjs/card/lib/Card.js

@@ -19,7 +19,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Card = void 0;
+exports.Card = exports.cardStencil = void 0;
 const React = __importStar(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const layout_1 = require("@workday/canvas-kit-react/layout");
@@ -27,7 +27,10 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const CardHeading_1 = require("./CardHeading");
 const CardBody_1 = require("./CardBody");
-const cardBaseStyles = canvas_kit_styling_1.createStyles({ name: "1t9ablw", styles: "box-shadow:var(--cnvs-sys-depth-1, 0 0.0625rem 0.25rem 0 rgba(31,38,46,0.12),0 0.125rem 0.5rem 0 rgba(31,38,46,0.08));padding:var(--cnvs-sys-space-x8, calc(0.25rem * 8));background-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));border:0.0625rem solid var(--cnvs-base-palette-soap-500, rgba(206,211,217,1));border-radius:var(--cnvs-sys-shape-x2, calc(0.25rem * 2));" });
+// .cnvs-card
+exports.cardStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "2a6e2f", styles: "box-shadow:var(--cnvs-sys-depth-1);padding:var(--cnvs-sys-space-x8);background-color:var(--cnvs-sys-color-bg-default);border:0.0625rem solid var(--cnvs-sys-color-border-container);border-radius:var(--cnvs-sys-shape-x2);" }
+}, "cnvs-card");
 /**
  * `Card` is a container component that holds a {@link CardBody Card.Body} and an optional
  * {@link CardHeading Card.Heading}. `Card` wraps a non-semantic `div` element. The element can be
@@ -43,7 +46,7 @@ const cardBaseStyles = canvas_kit_styling_1.createStyles({ name: "1t9ablw", styl
 exports.Card = common_1.createComponent('div')({
     displayName: 'Card',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (React.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, cardBaseStyles)), children));
+        return (React.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, exports.cardStencil())), children));
     },
     subComponents: {
         /**