@workday/canvas-kit-react 12.0.0-alpha.841-next.0 → 12.0.0-alpha.852-next.0

package/avatar/lib/Avatar.tsx

@@ -184,6 +184,7 @@ export const Avatar: AvatarOverload = React.forwardRef(
               onLoad={loadImage}
               isLoaded={imageLoaded}
               objectFit={objectFit}
+              loading="lazy"
             />
           </StyledStack>
         )}

package/common/lib/utils/getTranslateFromOrigin.ts

@@ -1,5 +1,6 @@
 import {CanvasSpaceValues} from '@workday/canvas-kit-react/tokens';
 import {TransformOrigin} from '../types';
+import {calc} from '@workday/canvas-kit-styling';
 
 type translateMapType = {
   x: {[key in TransformOrigin['horizontal']]: number};
@@ -24,13 +25,32 @@ const translateMap: translateMapType = {
  * @param {Object} transformOrigin The origin of the transform (i.e. top left)
  * @param {string} distance The distance to translate (as a canvas spacing value).
  * @returns {Object} An object with the x and y distance values needed to translate.
+ * @deprecated
  */
+
 export const getTranslateFromOrigin = (
   transformOrigin: TransformOrigin,
   distance: CanvasSpaceValues
+) => {
+  const calculatedDistance = parseFloat(distance) * 16;
+  return {
+    x: translateMap.x[transformOrigin.horizontal] * calculatedDistance,
+    y: translateMap.y[transformOrigin.vertical] * calculatedDistance,
+  };
+};
+
+/**
+ * Gets the x and y distance values needed to translate from a given transform origin to 0,0
+ * @param {Object} transformOrigin The origin of the transform (i.e. top left)
+ * @param {string} distance The distance to translate (as a canvas spacing value).
+ * @returns {Object} An object with the x and y distance string values needed to translate.
+ */
+export const getTransformOrigin = (
+  transformOrigin: TransformOrigin,
+  distance: CanvasSpaceValues | (string & {})
 ) => {
   return {
-    x: translateMap.x[transformOrigin.horizontal] * parseInt(distance, 10),
-    y: translateMap.y[transformOrigin.vertical] * parseInt(distance, 10),
+    x: calc.multiply(distance, translateMap.x[transformOrigin.horizontal]),
+    y: calc.multiply(distance, translateMap.y[transformOrigin.vertical]),
   };
 };

package/dist/commonjs/avatar/lib/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAIjC,OAAO,EAAmB,oBAAoB,EAAC,MAAM,gCAAgC,CAAC;AAGtF,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,IAAI,IAAA;CACL;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC;IACX;;;;;OAKG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC;AAED;;GAEG;AACH,aAAK,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,GAC1F,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvC;;GAEG;AACH,aAAK,cAAc,GAAG;IACpB,CAAC,KAAK,EAAE;QAAC,EAAE,EAAE,KAAK,CAAA;KAAC,GAAG,cAAc,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC3F,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC5F,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,oBAAoB,CAAC;CACnC,CAAC;AAyEF,eAAO,MAAM,MAAM,EAAE,cA0Db,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAIjC,OAAO,EAAmB,oBAAoB,EAAC,MAAM,gCAAgC,CAAC;AAGtF,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,IAAI,IAAA;CACL;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC;IACX;;;;;OAKG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC;AAED;;GAEG;AACH,aAAK,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,GAC1F,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvC;;GAEG;AACH,aAAK,cAAc,GAAG;IACpB,CAAC,KAAK,EAAE;QAAC,EAAE,EAAE,KAAK,CAAA;KAAC,GAAG,cAAc,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC3F,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC5F,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,oBAAoB,CAAC;CACnC,CAAC;AAyEF,eAAO,MAAM,MAAM,EAAE,cA2Db,CAAC"}

package/dist/commonjs/avatar/lib/Avatar.js

@@ -102,7 +102,7 @@ exports.Avatar = react_1.default.forwardRef(({ variant = AvatarVariant.Light, si
         react_1.default.createElement(StyledStack, { size: size },
             react_1.default.createElement(StyledIcon, { icon: canvas_system_icons_web_1.userIcon, background: background, size: size, isImageLoaded: imageLoaded })),
         url && (react_1.default.createElement(StyledStack, { size: size },
-            react_1.default.createElement(StyledImage, { src: url, alt: altText, onLoad: loadImage, isLoaded: imageLoaded, objectFit: objectFit })))));
+            react_1.default.createElement(StyledImage, { src: url, alt: altText, onLoad: loadImage, isLoaded: imageLoaded, objectFit: objectFit, loading: "lazy" })))));
 }); // AvatarProps and forwardRef signatures are incompatible, so we must force cast
 exports.Avatar.Variant = AvatarVariant;
 exports.Avatar.Size = icon_1.SystemIconCircleSize;

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

@@ -50,11 +50,11 @@ export interface BaseButtonProps extends Omit<ButtonContainerProps, 'ref'> {
  * The purpose of this object is for the `colors` prop - to provide backwards compatibility with how we allowed color overrides in Emotion.
  */
 export declare const buttonColorPropVars: {
-    default: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
-    focus: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
-    hover: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
-    active: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
-    disabled: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
+    default: import("@workday/canvas-kit-styling").CsVars<"opacity" | "background" | "border" | "borderRadius" | "icon" | "label" | "boxShadowInner" | "boxShadowOuter", never>;
+    focus: import("@workday/canvas-kit-styling").CsVars<"opacity" | "background" | "border" | "borderRadius" | "icon" | "label" | "boxShadowInner" | "boxShadowOuter", never>;
+    hover: import("@workday/canvas-kit-styling").CsVars<"opacity" | "background" | "border" | "borderRadius" | "icon" | "label" | "boxShadowInner" | "boxShadowOuter", never>;
+    active: import("@workday/canvas-kit-styling").CsVars<"opacity" | "background" | "border" | "borderRadius" | "icon" | "label" | "boxShadowInner" | "boxShadowOuter", never>;
+    disabled: import("@workday/canvas-kit-styling").CsVars<"opacity" | "background" | "border" | "borderRadius" | "icon" | "label" | "boxShadowInner" | "boxShadowOuter", never>;
 };
 /**
  * Base styles for Buttons.

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

@@ -51,7 +51,7 @@ exports.buttonStencil = canvas_kit_styling_1.createStencil({
         opacity: '',
         borderRadius: '',
     },
-    base: { name: "6cffa3", styles: "box-sizing:border-box;font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:var(--cnvs-sys-font-weight-bold);background-color:var(--background-b5fb58, var(--background-button-65cb05, transparent));color:var(--label-b5fb58, var(--label-button-65cb05, var(--cnvs-sys-color-fg-strong)));border-width:0.0625rem;border-style:solid;gap:var(--cnvs-sys-space-x2);border-color:var(--border-b5fb58, var(--border-button-65cb05, transparent));cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;outline:0.125rem transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--borderRadius-b5fb58, var(--borderRadius-button-65cb05, var(--cnvs-sys-shape-round)));position:relative;vertical-align:middle;overflow:hidden;--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));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(--opacity-b5fb58, var(--opacity-button-65cb05, var(--cnvs-sys-opacity-full)));}&:focus-visible, &.focus{background-color:var(--background-2ae7b1, var(--background-button-65cb05, transparent));border-color:var(--border-2ae7b1, var(--border-button-65cb05, transparent));color:var(--label-2ae7b1, var(--label-button-65cb05, var(--cnvs-sys-color-fg-strong)));--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));box-shadow:0 0 0 2px var(--boxShadowInner-2ae7b1, var(--boxShadowInner-button-65cb05, var(--cnvs-sys-color-border-inverse))), 0 0 0 4px var(--boxShadowOuter-2ae7b1, var(--boxShadowOuter-button-65cb05, var(--cnvs-brand-primary-base)));}&:hover, &.hover{background-color:var(--background-c4b8f8, var(--background-button-65cb05, var(--cnvs-sys-color-bg-contrast-strong)));border-color:var(--border-c4b8f8, var(--border-button-65cb05, transparent));color:var(--label-c4b8f8, var(--label-button-65cb05, var(--cnvs-sys-color-fg-stronger)));--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--background-93b1ce, var(--background-button-65cb05, transparent));border-color:var(--border-93b1ce, var(--border-button-65cb05, transparent));color:var(--label-93b1ce, var(--label-button-65cb05, var(--cnvs-sys-color-fg-strong)));--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{background-color:var(--background-c34400, var(--background-button-65cb05, transparent));border-color:var(--border-c34400, var(--border-button-65cb05, transparent));color:var(--label-c34400, var(--label-button-65cb05, var(--cnvs-sys-color-fg-strong)));--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
+    base: { name: "6cffa3", styles: "box-sizing:border-box;font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:var(--cnvs-sys-font-weight-bold);background-color:var(--background-b5fb58, var(--background-button-65cb05, transparent));color:var(--label-b5fb58, var(--label-button-65cb05, var(--cnvs-sys-color-fg-strong)));border-width:0.0625rem;border-style:solid;gap:var(--cnvs-sys-space-x2);border-color:var(--border-b5fb58, var(--border-button-65cb05, transparent));cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;outline:0.125rem transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--borderRadius-b5fb58, var(--borderRadius-button-65cb05, var(--cnvs-sys-shape-round)));position:relative;vertical-align:middle;overflow:hidden;--color-system-icon-583fae:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));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(--opacity-b5fb58, var(--opacity-button-65cb05, var(--cnvs-sys-opacity-full)));}&:focus-visible, &.focus{background-color:var(--background-2ae7b1, var(--background-button-65cb05, transparent));border-color:var(--border-2ae7b1, var(--border-button-65cb05, transparent));color:var(--label-2ae7b1, var(--label-button-65cb05, var(--cnvs-sys-color-fg-strong)));--color-system-icon-583fae:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));box-shadow:0 0 0 2px var(--boxShadowInner-2ae7b1, var(--boxShadowInner-button-65cb05, var(--cnvs-sys-color-border-inverse))), 0 0 0 4px var(--boxShadowOuter-2ae7b1, var(--boxShadowOuter-button-65cb05, var(--cnvs-brand-primary-base)));}&:hover, &.hover{background-color:var(--background-c4b8f8, var(--background-button-65cb05, var(--cnvs-sys-color-bg-contrast-strong)));border-color:var(--border-c4b8f8, var(--border-button-65cb05, transparent));color:var(--label-c4b8f8, var(--label-button-65cb05, var(--cnvs-sys-color-fg-stronger)));--color-system-icon-583fae:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--background-93b1ce, var(--background-button-65cb05, transparent));border-color:var(--border-93b1ce, var(--border-button-65cb05, transparent));color:var(--label-93b1ce, var(--label-button-65cb05, var(--cnvs-sys-color-fg-strong)));--color-system-icon-583fae:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{background-color:var(--background-c34400, var(--background-button-65cb05, transparent));border-color:var(--border-c34400, var(--border-button-65cb05, transparent));color:var(--label-c34400, var(--label-button-65cb05, var(--cnvs-sys-color-fg-strong)));--color-system-icon-583fae:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
     modifiers: {
         /**
          * Button modifiers that will overwrite the base styles of Buttons.

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

@@ -30,7 +30,7 @@ const icon_1 = require("@workday/canvas-kit-react/icon");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const deleteButtonStencil = canvas_kit_styling_1.createStencil({
     extends: BaseButton_1.buttonStencil,
-    base: { name: "b70e28", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-error-base);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-error-accent));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-error-accent));--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-error-dark);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-error-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-error-darkest);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-error-accent));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-error-accent));--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);}" }
+    base: { name: "b70e28", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-error-base);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-583fae:var(--icon-b5fb58, var(--cnvs-brand-error-accent));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-583fae:var(--icon-2ae7b1, var(--cnvs-brand-error-accent));--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-error-dark);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-583fae:var(--icon-c4b8f8, var(--cnvs-brand-error-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-error-darkest);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-583fae:var(--icon-93b1ce, var(--cnvs-brand-error-accent));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-583fae:var(--icon-c34400, var(--cnvs-brand-error-accent));--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);}" }
 }, "delete-button-d069ff");
 /**
  * Use sparingly for destructive actions that will result in data loss, can’t be undone, or will

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

@@ -30,11 +30,11 @@ const Button_1 = require("./Button");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const primaryButtonStencil = canvas_kit_styling_1.createStencil({
     extends: BaseButton_1.buttonStencil,
-    base: { name: "3662fa", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-primary-base);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-accent));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-brand-primary-accent);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-primary-accent));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-primary-dark);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-primary-darkest);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-accent));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-brand-primary-accent);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-primary-accent));}" },
+    base: { name: "3662fa", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-primary-base);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-583fae:var(--icon-b5fb58, var(--cnvs-brand-primary-accent));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-brand-primary-accent);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-583fae:var(--icon-2ae7b1, var(--cnvs-brand-primary-accent));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-primary-dark);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-583fae:var(--icon-c4b8f8, var(--cnvs-brand-primary-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-primary-darkest);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-583fae:var(--icon-93b1ce, var(--cnvs-brand-primary-accent));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-brand-primary-accent);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-583fae:var(--icon-c34400, var(--cnvs-brand-primary-accent));}" },
     modifiers: {
         variant: {
             // Inverse Styles
-            inverse: { name: "9c04ef", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-stronger));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" }
+            inverse: { name: "9c04ef", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-583fae:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-583fae:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-583fae:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-583fae:var(--icon-93b1ce, var(--cnvs-sys-color-fg-stronger));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-583fae:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" }
         }
     }
 }, "primary-button-a56ed8");

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

@@ -30,10 +30,10 @@ const icon_1 = require("@workday/canvas-kit-react/icon");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const secondaryButtonStencil = canvas_kit_styling_1.createStencil({
     extends: BaseButton_1.buttonStencil,
-    base: { name: "67b9b8", styles: "box-sizing:border-box;--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-contrast-default);--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-contrast-strong);--border-button-65cb05:var(--cnvs-sys-color-border-contrast-strong);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-accent));}&:disabled, &.disabled{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
+    base: { name: "67b9b8", styles: "box-sizing:border-box;--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-583fae:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-583fae:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-contrast-default);--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-583fae:var(--icon-c4b8f8, var(--cnvs-brand-primary-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-contrast-strong);--border-button-65cb05:var(--cnvs-sys-color-border-contrast-strong);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-583fae:var(--icon-93b1ce, var(--cnvs-brand-primary-accent));}&:disabled, &.disabled{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-583fae:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
     modifiers: {
         variant: {
-            inverse: { name: "3e1152", styles: "--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-inverse);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-stronger));}&:disabled, &.disabled{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-inverse);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
+            inverse: { name: "3e1152", styles: "--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-inverse);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-583fae:var(--icon-b5fb58, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-583fae:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-583fae:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-583fae:var(--icon-93b1ce, var(--cnvs-sys-color-fg-stronger));}&:disabled, &.disabled{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-inverse);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-583fae:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
         }
     }
 }, "secondary-button-c33259");

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

@@ -31,20 +31,20 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const tertiaryButtonStencil = canvas_kit_styling_1.createStencil({
     extends: BaseButton_1.buttonStencil,
     // Base Styles
-    base: { name: "ffe654", styles: "box-sizing:border-box;padding-inline:var(--cnvs-sys-space-x2);min-width:auto;text-decoration:underline;border:var(--cnvs-sys-space-zero);--background-button-65cb05:transparent;--borderRadius-button-65cb05:var(--cnvs-sys-shape-x1);--label-button-65cb05:var(--cnvs-brand-primary-base);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--boxShadowInner-button-65cb05:var(--cnvs-brand-common-focus-outline);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-brand-primary-dark);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-brand-primary-darkest);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-base));}" },
+    base: { name: "ffe654", styles: "box-sizing:border-box;padding-inline:var(--cnvs-sys-space-x2);min-width:auto;text-decoration:underline;border:var(--cnvs-sys-space-zero);--background-button-65cb05:transparent;--borderRadius-button-65cb05:var(--cnvs-sys-shape-x1);--label-button-65cb05:var(--cnvs-brand-primary-base);--color-system-icon-583fae:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--boxShadowInner-button-65cb05:var(--cnvs-brand-common-focus-outline);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-583fae:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-brand-primary-dark);--color-system-icon-583fae:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-brand-primary-darkest);--color-system-icon-583fae:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-583fae:var(--icon-93b1ce, var(--cnvs-brand-primary-base));}" },
     modifiers: {
         // IconPosition Styles
         iconPosition: {
-            only: { name: "83cdfe", styles: "padding:0;border-radius:var(--cnvs-sys-shape-round);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
+            only: { name: "83cdfe", styles: "padding:0;border-radius:var(--cnvs-sys-shape-round);--color-system-icon-583fae:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--color-system-icon-583fae:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--color-system-icon-583fae:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--color-system-icon-583fae:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--color-system-icon-583fae:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
             start: { name: "74ae7d", styles: "" },
             end: { name: "526d6e", styles: "" }
         },
         isThemeable: {
-            true: { name: "a82202", styles: "--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));}&:hover, &.hover{--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-primary-base));}" }
+            true: { name: "a82202", styles: "--color-system-icon-583fae:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--color-system-icon-583fae:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));}&:hover, &.hover{--color-system-icon-583fae:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--color-system-icon-583fae:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--color-system-icon-583fae:var(--icon-c34400, var(--cnvs-brand-primary-base));}" }
         },
         variant: {
             // Inverse Styles
-            inverse: { name: "1f333b", styles: "--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));box-shadow:inset 0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
+            inverse: { name: "1f333b", styles: "--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-583fae:var(--icon-b5fb58, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-583fae:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));box-shadow:inset 0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-583fae:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-583fae:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-583fae:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
         }
     },
     // Compound Modifier Styles

package/dist/commonjs/checkbox/lib/CheckboxCheck.js

@@ -31,13 +31,13 @@ const checkboxCheckStencil = canvas_kit_styling_1.createStencil({
     base: { name: "2673c1", 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);" },
     modifiers: {
         checked: {
-            true: { name: "b7568b", styles: "--color-system-icon-53c273:var(--cnvs-brand-primary-accent);opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
+            true: { name: "b7568b", styles: "--color-system-icon-583fae:var(--cnvs-brand-primary-accent);opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
         },
         indeterminate: {
             true: { name: "7ccfda", styles: "opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
         },
         variant: {
-            inverse: { name: "1dac33", styles: "--color-system-icon-53c273:var(--cnvs-brand-primary-base);& > div{background-color:var(--cnvs-brand-primary-base);}" }
+            inverse: { name: "1dac33", styles: "--color-system-icon-583fae:var(--cnvs-brand-primary-base);& > div{background-color:var(--cnvs-brand-primary-base);}" }
         }
     }
 }, "checkbox-check-1e6620");

package/dist/commonjs/combobox/lib/hooks/useComboboxInput.d.ts

@@ -88,7 +88,7 @@ export declare const useComboboxInput: import("@workday/canvas-kit-react/common"
     readonly onClick: (event: React.MouseEvent) => void;
     readonly value: string | undefined;
     readonly role: "combobox";
-    readonly 'aria-haspopup': boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+    readonly 'aria-haspopup': boolean | "grid" | "true" | "listbox" | "menu" | "false" | "dialog" | "tree" | undefined;
     readonly 'aria-expanded': boolean;
     readonly 'aria-autocomplete': "list";
     readonly 'aria-controls': `${string}-list`;

package/dist/commonjs/common/lib/CanvasProvider.d.ts

@@ -50,14 +50,14 @@ export declare const useCanvasThemeToCssVars: (theme: PartialEmotionCanvasTheme
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
-    'aria-autocomplete'?: "none" | "list" | "both" | "inline" | undefined;
+    'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
     'aria-busy'?: (boolean | "true" | "false") | undefined;
-    'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-checked'?: boolean | "true" | "mixed" | "false" | undefined;
     'aria-colcount'?: number | undefined;
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "date" | "true" | "false" | "page" | "step" | "location" | undefined;
+    'aria-current'?: boolean | "true" | "page" | "false" | "time" | "date" | "step" | "location" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -66,7 +66,7 @@ export declare const useCanvasThemeToCssVars: (theme: PartialEmotionCanvasTheme
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+    'aria-haspopup'?: boolean | "grid" | "true" | "listbox" | "menu" | "false" | "dialog" | "tree" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -81,9 +81,9 @@ export declare const useCanvasThemeToCssVars: (theme: PartialEmotionCanvasTheme
     'aria-owns'?: string | undefined;
     'aria-placeholder'?: string | undefined;
     'aria-posinset'?: number | undefined;
-    'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-pressed'?: boolean | "true" | "mixed" | "false" | undefined;
     'aria-readonly'?: (boolean | "true" | "false") | undefined;
-    'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
     'aria-required'?: (boolean | "true" | "false") | undefined;
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;

package/dist/commonjs/common/lib/utils/getTranslateFromOrigin.d.ts

@@ -5,9 +5,20 @@ import { TransformOrigin } from '../types';
  * @param {Object} transformOrigin The origin of the transform (i.e. top left)
  * @param {string} distance The distance to translate (as a canvas spacing value).
  * @returns {Object} An object with the x and y distance values needed to translate.
+ * @deprecated
  */
 export declare const getTranslateFromOrigin: (transformOrigin: TransformOrigin, distance: CanvasSpaceValues) => {
     x: number;
     y: number;
 };
+/**
+ * Gets the x and y distance values needed to translate from a given transform origin to 0,0
+ * @param {Object} transformOrigin The origin of the transform (i.e. top left)
+ * @param {string} distance The distance to translate (as a canvas spacing value).
+ * @returns {Object} An object with the x and y distance string values needed to translate.
+ */
+export declare const getTransformOrigin: (transformOrigin: TransformOrigin, distance: CanvasSpaceValues | (string & {})) => {
+    x: string;
+    y: string;
+};
 //# sourceMappingURL=getTranslateFromOrigin.d.ts.map

package/dist/commonjs/common/lib/utils/getTranslateFromOrigin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getTranslateFromOrigin.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/getTranslateFromOrigin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAC,MAAM,kCAAkC,CAAC;AACnE,OAAO,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAoBzC;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,oBAChB,eAAe,YACtB,iBAAiB;;;CAM5B,CAAC"}
+{"version":3,"file":"getTranslateFromOrigin.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/getTranslateFromOrigin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAC,MAAM,kCAAkC,CAAC;AACnE,OAAO,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAqBzC;;;;;;GAMG;AAEH,eAAO,MAAM,sBAAsB,oBAChB,eAAe,YACtB,iBAAiB;;;CAO5B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,oBACZ,eAAe,YACtB,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC;;;CAM5C,CAAC"}

package/dist/commonjs/common/lib/utils/getTranslateFromOrigin.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTranslateFromOrigin = void 0;
+exports.getTransformOrigin = exports.getTranslateFromOrigin = void 0;
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const translateMap = {
     y: {
         top: -1,
@@ -18,11 +19,26 @@ const translateMap = {
  * @param {Object} transformOrigin The origin of the transform (i.e. top left)
  * @param {string} distance The distance to translate (as a canvas spacing value).
  * @returns {Object} An object with the x and y distance values needed to translate.
+ * @deprecated
  */
 const getTranslateFromOrigin = (transformOrigin, distance) => {
+    const calculatedDistance = parseFloat(distance) * 16;
     return {
-        x: translateMap.x[transformOrigin.horizontal] * parseInt(distance, 10),
-        y: translateMap.y[transformOrigin.vertical] * parseInt(distance, 10),
+        x: translateMap.x[transformOrigin.horizontal] * calculatedDistance,
+        y: translateMap.y[transformOrigin.vertical] * calculatedDistance,
     };
 };
 exports.getTranslateFromOrigin = getTranslateFromOrigin;
+/**
+ * Gets the x and y distance values needed to translate from a given transform origin to 0,0
+ * @param {Object} transformOrigin The origin of the transform (i.e. top left)
+ * @param {string} distance The distance to translate (as a canvas spacing value).
+ * @returns {Object} An object with the x and y distance string values needed to translate.
+ */
+const getTransformOrigin = (transformOrigin, distance) => {
+    return {
+        x: canvas_kit_styling_1.calc.multiply(distance, translateMap.x[transformOrigin.horizontal]),
+        y: canvas_kit_styling_1.calc.multiply(distance, translateMap.y[transformOrigin.vertical]),
+    };
+};
+exports.getTransformOrigin = getTransformOrigin;

package/dist/commonjs/icon/lib/SystemIcon.d.ts

@@ -43,7 +43,8 @@ export interface SystemIconStyles {
     /**
      * The hover color of the SystemIcon. This defines `accentHover` and `fillHover`. `colorHover` may be overwritten by `accentHover` and `fillHover`.
      * @default base.licorice200
-     * @deprecated `colorHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
+     * @deprecated `colorHover` is deprecated and will be removed in a future version. We have removed the default hover styles on SystemIcon. Please
+     * use the following instead in your style overrides:
      * ```tsx
      * '&:hover': {
      *   [systemIconStencil.vars.color]: desiredColorHoverColor

package/dist/commonjs/icon/lib/SystemIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SystemIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAI1C,OAAO,EAAM,QAAQ,EAAwC,MAAM,OAAO,CAAC;AAE3E;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,OAAO,CAAC;IAClE;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,8FAS1B,gBAAgB,KAAG,SAmBpB,CAAC;AAiBH,eAAO,MAAM,iBAAiB;IAG1B;;;;OAIG;;;;;IAJH;;;;OAIG;;;;;;;;;;;;;;wBAoCL,CAAC;AAEH,eAAO,MAAM,UAAU,sFA6CrB,CAAC"}
+{"version":3,"file":"SystemIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAI1C,OAAO,EAAM,QAAQ,EAAwC,MAAM,OAAO,CAAC;AAE3E;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;OAUG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,OAAO,CAAC;IAClE;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,8FAS1B,gBAAgB,KAAG,SAmBpB,CAAC;AAiBH,eAAO,MAAM,iBAAiB;IAG1B;;;;OAIG;;;;;IAJH;;;;OAIG;;;;;;;;;;;;;;wBAoCL,CAAC;AAEH,eAAO,MAAM,UAAU,sFA6CrB,CAAC"}

package/dist/commonjs/icon/lib/SystemIcon.js

@@ -65,7 +65,7 @@ exports.systemIconStyles = systemIconStyles;
  * }
  * ```
  */
-const deprecatedSystemIconVars = canvas_kit_styling_1.createVars({ id: "8bc037", args: ["colorHover", "fillHover", "accentHover", "backgroundHover"] });
+const deprecatedSystemIconVars = canvas_kit_styling_1.createVars({ id: "193ff4", args: ["colorHover", "fillHover", "accentHover", "backgroundHover"] });
 exports.systemIconStencil = canvas_kit_styling_1.createStencil({
     extends: Svg_1.svgStencil,
     vars: {
@@ -78,8 +78,8 @@ exports.systemIconStencil = canvas_kit_styling_1.createStencil({
         accentColor: '',
         backgroundColor: 'transparent',
     },
-    base: { name: "67a1c3", styles: "--backgroundColor-system-icon-53c273:transparent;box-sizing:border-box;& .wd-icon-fill{fill:var(--color-system-icon-53c273, var(--cnvs-base-palette-licorice-200));}& .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentColor-system-icon-53c273, var(--color-system-icon-53c273, var(--cnvs-base-palette-licorice-200)));}& .wd-icon-background{fill:var(--backgroundColor-system-icon-53c273);}&:where(:hover, .hover) .wd-icon-fill{fill:var(--fillHover-8bc037, var(--colorHover-8bc037, var(--color-system-icon-53c273, var(--cnvs-base-palette-licorice-200))));}&:where(:hover, .hover) .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentHover-8bc037, var(--colorHover-8bc037, var(--accentColor-system-icon-53c273, var(--color-system-icon-53c273, var(--cnvs-base-palette-licorice-200)))));}&:where(:hover, .hover) .wd-icon-background{fill:var(--backgroundHover-8bc037, var(--backgroundColor-system-icon-53c273));}" }
-}, "system-icon-53c273");
+    base: { name: "421413", styles: "--backgroundColor-system-icon-583fae:transparent;box-sizing:border-box;& .wd-icon-fill{fill:var(--color-system-icon-583fae, var(--cnvs-base-palette-licorice-200));}& .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentColor-system-icon-583fae, var(--color-system-icon-583fae, var(--cnvs-base-palette-licorice-200)));}& .wd-icon-background{fill:var(--backgroundColor-system-icon-583fae);}&:where(:hover, .hover) .wd-icon-fill{fill:var(--fillHover-193ff4, var(--colorHover-193ff4, var(--color-system-icon-583fae, var(--cnvs-base-palette-licorice-200))));}&:where(:hover, .hover) .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentHover-193ff4, var(--colorHover-193ff4, var(--accentColor-system-icon-583fae, var(--color-system-icon-583fae, var(--cnvs-base-palette-licorice-200)))));}&:where(:hover, .hover) .wd-icon-background{fill:var(--backgroundHover-193ff4, var(--backgroundColor-system-icon-583fae));}" }
+}, "system-icon-583fae");
 exports.SystemIcon = common_1.createComponent('span')({
     displayName: 'SystemIcon',
     Component: ({ size, background, backgroundHover, color, colorHover, icon, accent, accentHover, fill, fillHover, ...elemProps }, ref, Element) => {

package/dist/commonjs/icon/lib/SystemIconCircle.js

@@ -42,7 +42,7 @@ const systemIconCircleStencil = canvas_kit_styling_1.createStencil({
         backgroundColor: '',
         iconColor: '',
     },
-    base: { name: "8a694b", styles: "box-sizing:border-box;background:var(--backgroundColor-system-icon-circle-554859, var(--cnvs-base-palette-soap-200));display:flex;align-items:center;justify-content:center;padding:var(--cnvs-sys-space-zero);border:none;border-radius:var(--cnvs-sys-shape-round);overflow:hidden;width:var(--containerSize-system-icon-circle-554859, var(--cnvs-sys-space-x10));height:var(--containerSize-system-icon-circle-554859, var(--cnvs-sys-space-x10));--size-svg-a30d66:calc(var(--containerSize-system-icon-circle-554859, var(--cnvs-sys-space-x10)) * 0.625);--color-system-icon-53c273:var(--iconColor-system-icon-circle-554859);& img{width:100%;height:100%;}" }
+    base: { name: "8a694b", styles: "box-sizing:border-box;background:var(--backgroundColor-system-icon-circle-554859, var(--cnvs-base-palette-soap-200));display:flex;align-items:center;justify-content:center;padding:var(--cnvs-sys-space-zero);border:none;border-radius:var(--cnvs-sys-shape-round);overflow:hidden;width:var(--containerSize-system-icon-circle-554859, var(--cnvs-sys-space-x10));height:var(--containerSize-system-icon-circle-554859, var(--cnvs-sys-space-x10));--size-svg-a30d66:calc(var(--containerSize-system-icon-circle-554859, var(--cnvs-sys-space-x10)) * 0.625);--color-system-icon-583fae:var(--iconColor-system-icon-circle-554859);& img{width:100%;height:100%;}" }
 }, "system-icon-circle-554859");
 exports.SystemIconCircle = common_1.createComponent('span')({
     displayName: 'SystemIconCircle',

package/dist/commonjs/menu/lib/MenuItem.d.ts

@@ -26,7 +26,7 @@ interface StyledMenuProps {
      */
     isDisabled?: boolean;
 }
-export declare const StyledMenuItem: import("@emotion/styled").StyledComponent<import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "left" | "right" | "top" | "bottom" | "fill" | "as" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "inset" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "scrollMargin" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "cs" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY"> & {
+export declare const StyledMenuItem: import("@emotion/styled").StyledComponent<import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "left" | "right" | "top" | "bottom" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "color" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "height" | "inset" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "resize" | "scrollMargin" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "width" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "fill" | "stroke" | "cs" | "as" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY"> & {
     ref?: React.Ref<HTMLButtonElement> | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;

package/dist/commonjs/modal/lib/ModalBody.d.ts

@@ -3,6 +3,7 @@ import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { Popup } from '@workday/canvas-kit-react/popup';
 export interface ModalBodyProps extends ExtractProps<typeof Popup.Body, never> {
 }
+export declare const modalBodyStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, never, never>;
 export declare const ModalBody: import("@workday/canvas-kit-react/common").ElementComponentM<"div", ModalBodyProps, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;

package/dist/commonjs/modal/lib/ModalBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalBody.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAKtD,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;CAAG;AAYjF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAKpB,CAAC"}
+{"version":3,"file":"ModalBody.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAOtD,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;CAAG;AAEjF,eAAO,MAAM,gBAAgB,yIAO3B,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAKpB,CAAC"}

package/dist/commonjs/modal/lib/ModalBody.js

@@ -19,24 +19,20 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalBody = void 0;
+exports.ModalBody = exports.modalBodyStencil = void 0;
 const React = __importStar(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const popup_1 = require("@workday/canvas-kit-react/popup");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const hooks_1 = require("./hooks");
-const ResponsiveModalBody = common_1.styled(popup_1.Popup.Body)(({ theme }) => {
-    const { canvas: canvasTheme } = common_1.getTheme(theme);
-    return {
-        [canvasTheme.breakpoints.down('s')]: {
-            marginBottom: tokens_1.space.zero,
-            padding: `${tokens_1.space.xxxs} ${tokens_1.space.xxs} ${tokens_1.space.xxs} ${tokens_1.space.xxs}`,
-        },
-    };
-});
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+exports.modalBodyStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "085ad9", styles: "box-sizing:border-box;@media screen and (max-width: 768px){margin-block-end:var(--cnvs-sys-space-zero);padding:var(--cnvs-sys-space-x1) var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2);}" }
+}, "modal-body-d624fe");
 exports.ModalBody = common_1.createSubcomponent('div')({
     displayName: 'Modal.Body',
     modelHook: hooks_1.useModalModel,
 })((elemProps, Element) => {
-    return React.createElement(ResponsiveModalBody, Object.assign({ as: Element }, elemProps));
+    return React.createElement(popup_1.Popup.Body, Object.assign({ as: Element }, layout_1.mergeStyles(elemProps, exports.modalBodyStencil())));
 });

package/dist/commonjs/modal/lib/ModalCard.d.ts

@@ -3,6 +3,7 @@ import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { Popup } from '@workday/canvas-kit-react/popup';
 export interface ModalCardProps extends ExtractProps<typeof Popup.Card, never> {
 }
+export declare const modalCardStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, never, never>;
 export declare const ModalCard: import("@workday/canvas-kit-react/common").ElementComponentM<"div", ModalCardProps, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;

package/dist/commonjs/modal/lib/ModalCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalCard.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAItD,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;CAAG;AAcjF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAMpB,CAAC"}
+{"version":3,"file":"ModalCard.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAOtD,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;CAAG;AAEjF,eAAO,MAAM,gBAAgB,yIAY3B,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAMpB,CAAC"}

package/dist/commonjs/modal/lib/ModalCard.js

@@ -19,27 +19,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalCard = void 0;
+exports.ModalCard = exports.modalCardStencil = void 0;
 const React = __importStar(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const popup_1 = require("@workday/canvas-kit-react/popup");
 const hooks_1 = require("./hooks");
-const ResponsiveModalCard = common_1.styled(popup_1.Popup.Card)(({ theme }) => {
-    const { canvas: canvasTheme } = common_1.getTheme(theme);
-    return {
-        margin: tokens_1.space.xl,
-        [canvasTheme.breakpoints.down('s')]: {
-            margin: tokens_1.space.s,
-            padding: tokens_1.space.s,
-            borderRadius: tokens_1.space.m, // 24px border radius on smaller devices.
-        },
-    };
-});
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+exports.modalCardStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "456211", styles: "box-sizing:border-box;margin:var(--cnvs-sys-space-x10);width:calc(calc(var(--cnvs-sys-space-x20) * 5) + var(--cnvs-sys-space-x10));border-width:var(--cnvs-sys-space-zero);box-shadow:var(--cnvs-sys-depth-6);@media screen and (max-width: 768px){margin:var(--cnvs-sys-space-x4);padding:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-space-x6);}" }
+}, "modal-card-9eebe8");
 exports.ModalCard = common_1.createSubcomponent('div')({
     displayName: 'Modal.Card',
     modelHook: hooks_1.useModalModel,
     elemPropsHook: hooks_1.useModalCard,
 })((elemProps, Element) => {
-    return React.createElement(ResponsiveModalCard, Object.assign({ as: Element, width: 440, borderWidth: 0, depth: 6 }, elemProps));
+    return React.createElement(popup_1.Popup.Card, Object.assign({ as: Element }, layout_1.mergeStyles(elemProps, exports.modalCardStencil())));
 });

package/dist/commonjs/modal/lib/ModalHeading.d.ts

@@ -3,6 +3,7 @@ import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { Popup } from '@workday/canvas-kit-react/popup';
 export interface ModalHeadingProps extends ExtractProps<typeof Popup.Heading, never> {
 }
+export declare const modalHeadingStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, never, never>;
 export declare const ModalHeading: import("@workday/canvas-kit-react/common").ElementComponentM<"h2", ModalHeadingProps, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;

package/dist/commonjs/modal/lib/ModalHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeading.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAKtD,MAAM,WAAW,iBAAkB,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC;CAAG;AAYvF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAMvB,CAAC"}
+{"version":3,"file":"ModalHeading.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAOtD,MAAM,WAAW,iBAAkB,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC;CAAG;AAEvF,eAAO,MAAM,mBAAmB,yIAO9B,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAMvB,CAAC"}