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

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

@@ -50,6 +50,8 @@ export declare const accentIconStencil: import("@workday/canvas-kit-styling").St
         };
     };
 }, {
+    width: string;
+    height: string;
     size: string;
 }, never, never>, never>;
 export declare const AccentIcon: import("@workday/canvas-kit-react/common").ElementComponent<"span", AccentIconProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"AccentIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AccentIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAGlE,OAAO,EAAM,QAAQ,EAAwC,MAAM,OAAO,CAAC;AAE3E;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,CAAC;IACvF;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,4BAG1B,gBAAgB,KAAG,SAOpB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;wBAuB5B,CAAC;AAEH,eAAO,MAAM,UAAU,sFAwBrB,CAAC"}
+{"version":3,"file":"AccentIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AccentIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAGlE,OAAO,EAAM,QAAQ,EAAwC,MAAM,OAAO,CAAC;AAE3E;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,CAAC;IACvF;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,4BAG1B,gBAAgB,KAAG,SAOpB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;wBAuB5B,CAAC;AAEH,eAAO,MAAM,UAAU,sFAwBrB,CAAC"}

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

@@ -44,7 +44,7 @@ exports.accentIconStencil = canvas_kit_styling_1.createStencil({
     vars: {
         color: '',
     },
-    base: { name: "8ab799", styles: "box-sizing:border-box;--size-svg-e2876c:3.5rem;& .color-500{fill:var(--color-accent-icon-f47b2a, var(--cnvs-base-palette-blueberry-500));}& .french-vanilla-100{fill:var(--cnvs-base-palette-french-vanilla-100);}" },
+    base: { name: "8ab799", styles: "box-sizing:border-box;--size-svg-a30d66:3.5rem;& .color-500{fill:var(--color-accent-icon-f47b2a, var(--cnvs-base-palette-blueberry-500));}& .french-vanilla-100{fill:var(--cnvs-base-palette-french-vanilla-100);}" },
     modifiers: {
         transparent: {
             true: { name: "0b6c92", styles: "& .french-vanilla-100{fill:transparent;}" }

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

@@ -44,10 +44,8 @@ export declare const appletIconStencil: import("@workday/canvas-kit-styling").St
         };
     };
 }, {
-    /**
-     * The icon color hue. Must use a member of the `AppletIcon.Colors` static enum.
-     * @default AppletIcon.Colors.Blueberry
-     */
+    width: string;
+    height: string;
     size: string;
 }, never, never>, never>;
 export declare const AppletIcon: import("@workday/canvas-kit-react/common").ElementComponent<"span", AppletIconProps> & {

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

@@ -1 +1 @@
-{"version":3,"file":"AppletIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AppletIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,aAAa,EAAc,MAAM,kCAAkC,CAAC;AACpF,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAM,QAAQ,EAAa,MAAM,OAAO,CAAC;AAKhD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,eAE1B,gBAAgB,KAAG,SAsCrB,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;IAC9F;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;IAhE5B;;;OAGG;;wBA0FH,CAAC;AAEH,eAAO,MAAM,UAAU;;CAyBrB,CAAC"}
+{"version":3,"file":"AppletIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AppletIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,aAAa,EAAc,MAAM,kCAAkC,CAAC;AACpF,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAM,QAAQ,EAAa,MAAM,OAAO,CAAC;AAKhD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,eAE1B,gBAAgB,KAAG,SAsCrB,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;IAC9F;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;wBA6B5B,CAAC;AAEH,eAAO,MAAM,UAAU;;CAyBrB,CAAC"}

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

@@ -74,7 +74,7 @@ exports.appletIconStencil = canvas_kit_styling_1.createStencil({
         color400: '',
         color500: '',
     },
-    base: { name: "ce2e64", styles: "box-sizing:border-box;--size-svg-e2876c:5.75rem;& .color-100{fill:var(--cnvs-base-palette-french-vanilla-100);}& .color-200{fill:var(--color200-applet-icon-757179, var(--cnvs-base-palette-blueberry-200));}& .color-300{fill:var(--color300-applet-icon-757179, var(--cnvs-base-palette-blueberry-300));}& .color-400{fill:var(--color400-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}& .color-400-alpha-20{fill:var(--color400-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}& .color-500{fill:var(--color500-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}" }
+    base: { name: "ce2e64", styles: "box-sizing:border-box;--size-svg-a30d66:5.75rem;& .color-100{fill:var(--cnvs-base-palette-french-vanilla-100);}& .color-200{fill:var(--color200-applet-icon-757179, var(--cnvs-base-palette-blueberry-200));}& .color-300{fill:var(--color300-applet-icon-757179, var(--cnvs-base-palette-blueberry-300));}& .color-400{fill:var(--color400-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}& .color-400-alpha-20{fill:var(--color400-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}& .color-500{fill:var(--color500-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}" }
 }, "applet-icon-757179");
 exports.AppletIcon = common_1.createComponent('span')({
     displayName: 'AppletIcon',

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

@@ -8,13 +8,11 @@ export interface GraphicStyles {
     /**
      * The width of the Graphic in `px`. The Graphic's `width` takes precedence over its `height` in order to preserve its proportions.
      * @default width of graphic
-     * @deprecated Use `cs` to set width, `cs={{"& svg": {width: '1rem'}}}`
      */
     width?: number | string;
     /**
      * The height of the Graphic in `px`. If the Graphic's `height` is set, its `width` will be set to `100%`.
      * @default height of graphic
-     * @deprecated Use `cs` to set height, `cs={{"& svg": {height: '1rem'}}}`
      */
     height?: number | string;
     /**
@@ -36,13 +34,20 @@ export declare const graphicStyles: ({ width, height, grow }: GraphicStyles) =>
 export declare const graphicStencil: import("@workday/canvas-kit-styling").Stencil<{
     grow: {
         true: {
+            [x: string]: string;
             width: string;
-            '& svg': {
-                width: string;
-                height: string;
-            };
         };
     };
-}, {}, never, never>;
+}, {}, import("@workday/canvas-kit-styling").Stencil<{
+    shouldMirror: {
+        true: {
+            transform: "scaleX(-1)";
+        };
+    };
+}, {
+    width: string;
+    height: string;
+    size: string;
+}, never, never>, never>;
 export declare const Graphic: import("@workday/canvas-kit-react/common").ElementComponent<"span", GraphicProps>;
 //# sourceMappingURL=Graphic.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Graphic.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Graphic.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,aAAa,EAAkB,MAAM,8BAA8B,CAAC;AAC5E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAIpC;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,YAAa,SAAQ,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;IACxF;;OAEG;IACH,GAAG,EAAE,aAAa,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,4BAA2B,aAAa,KAAG,SA4BpE,CAAC;AAOF,eAAO,MAAM,cAAc;;;;;;;;;;oBAkBzB,CAAC;AAEH,eAAO,MAAM,OAAO,mFAkBlB,CAAC"}
+{"version":3,"file":"Graphic.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Graphic.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,aAAa,EAAkB,MAAM,8BAA8B,CAAC;AAC5E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAM,QAAQ,EAAa,MAAM,OAAO,CAAC;AAIhD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,YAAa,SAAQ,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;IACxF;;OAEG;IACH,GAAG,EAAE,aAAa,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,4BAA2B,aAAa,KAAG,SA4BpE,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;wBAWzB,CAAC;AAEH,eAAO,MAAM,OAAO,mFAmBlB,CAAC"}

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

@@ -57,27 +57,22 @@ const graphicStyles = ({ width, height, grow }) => {
     return {};
 };
 exports.graphicStyles = graphicStyles;
-/**
- * @deprecated Part of supporting deprecated `height` and `width` props
- */
-const graphicVars = canvas_kit_styling_1.createVars({ id: "32acc9", args: ["height", "width"] });
 exports.graphicStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "a19511", styles: "box-sizing:border-box;& svg{width:var(--width-32acc9, 100%);height:var(--height-32acc9, 100%);}" },
+    extends: Svg_1.svgStencil,
+    base: { name: "61ea39", styles: "box-sizing:border-box;" },
     modifiers: {
         grow: {
-            true: { name: "f2369d", styles: "width:100%;& svg{width:100%;height:100%;}" }
+            true: { name: "fd9f26", styles: "width:100%;--width-svg-a30d66:100%;" }
         }
     }
-}, "graphic-d1ac9a");
+}, "graphic-ee386a");
 exports.Graphic = common_1.createComponent('span')({
     displayName: 'Graphic',
     Component: ({ grow, width, height, ...elemProps }, ref, Element) => {
-        return (React.createElement(Svg_1.Svg, Object.assign({ type: design_assets_types_1.CanvasIconTypes.Graphic, as: Element, ref: ref }, canvas_kit_styling_1.handleCsProp(elemProps, [
-            exports.graphicStencil({ grow }),
-            {
-                [graphicVars.height]: typeof height === 'number' ? canvas_kit_styling_1.px2rem(height) : height,
-                [graphicVars.width]: typeof width === 'number' ? canvas_kit_styling_1.px2rem(width) : width,
-            },
-        ]))));
+        return (React.createElement(Svg_1.Svg, Object.assign({ type: design_assets_types_1.CanvasIconTypes.Graphic, as: Element, ref: ref }, canvas_kit_styling_1.handleCsProp(elemProps, exports.graphicStencil({
+            grow,
+            width: typeof width === 'number' ? canvas_kit_styling_1.px2rem(width) : width,
+            height: typeof height === 'number' ? canvas_kit_styling_1.px2rem(height) : height,
+        })))));
     },
 });

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

@@ -16,7 +16,11 @@ export declare const svgStencil: import("@workday/canvas-kit-styling").Stencil<{
         };
     };
 }, {
-    /** set width and height of svg element */
+    /** sets width of svg element */
+    width: string;
+    /** sets height of svg element */
+    height: string;
+    /** sets width and height of svg element */
     size: string;
 }, never, never>;
 /** @deprecated */

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

@@ -1 +1 @@
-{"version":3,"file":"Svg.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Svg.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAGzE,OAAO,EAAC,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAIvE,MAAM,WAAW,QAAS,SAAQ,QAAQ;IACxC,GAAG,EAAE,UAAU,CAAC;IAChB,IAAI,EAAE,eAAe,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,UAAU;;;;;;;IAEnB,0CAA0C;;gBAkB5C,CAAC;AAEH,kBAAkB;AAClB,eAAO,MAAM,yBAAyB,oDAKrC,CAAC;AAEF,eAAO,MAAM,GAAG,+EAkBd,CAAC"}
+{"version":3,"file":"Svg.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Svg.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAGzE,OAAO,EAAC,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAIvE,MAAM,WAAW,QAAS,SAAQ,QAAQ;IACxC,GAAG,EAAE,UAAU,CAAC;IAChB,IAAI,EAAE,eAAe,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,UAAU;;;;;;;IAEnB,gCAAgC;;IAEhC,iCAAiC;;IAEjC,2CAA2C;;gBAkB7C,CAAC;AAEH,kBAAkB;AAClB,eAAO,MAAM,yBAAyB,oDAKrC,CAAC;AAEF,eAAO,MAAM,GAAG,+EAkBd,CAAC"}

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

@@ -28,16 +28,20 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 exports.svgStencil = canvas_kit_styling_1.createStencil({
     vars: {
-        /** set width and height of svg element */
+        /** sets width of svg element */
+        width: '',
+        /** sets height of svg element */
+        height: '',
+        /** sets width and height of svg element */
         size: '',
     },
-    base: { name: "1ea8e4", styles: "box-sizing:border-box;display:inline-block;> svg{display:block;width:var(--size-svg-e2876c);height:var(--size-svg-e2876c);}" },
+    base: { name: "003268", styles: "box-sizing:border-box;display:inline-block;> svg{display:block;width:var(--width-svg-a30d66, var(--size-svg-a30d66));height:var(--height-svg-a30d66, var(--size-svg-a30d66));}" },
     modifiers: {
         shouldMirror: {
-            true: { name: "12aa4b", styles: "transform:scaleX(-1);" }
+            true: { name: "d9e55d", styles: "transform:scaleX(-1);" }
         }
     }
-}, "svg-e2876c");
+}, "svg-a30d66");
 /** @deprecated */
 const transformColorNameToToken = (color) => {
     if (color && color in canvas_tokens_web_1.base) {

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

@@ -112,6 +112,8 @@ export declare const systemIconStencil: import("@workday/canvas-kit-styling").St
         };
     };
 }, {
+    width: string;
+    height: string;
     size: string;
 }, never, never>, never>;
 export declare const SystemIcon: import("@workday/canvas-kit-react/common").ElementComponent<"span", SystemIconProps>;

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,sFA0CrB,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;;;;;;;;;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,sFA0CrB,CAAC"}

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-e2876c: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-53c273: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/text/lib/TypeLevelComponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypeLevelComponents.d.ts","sourceRoot":"","sources":["../../../../text/lib/TypeLevelComponents.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAGvC,aAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzC;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC;IAClE;;OAEG;IACH,IAAI,EAAE,IAAI,CAAC;CACZ;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,OAAO,kFAMlB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,QAAQ,kFAMnB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,OAAO,mFAMlB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,KAAK,mFAMhB,CAAC"}
+{"version":3,"file":"TypeLevelComponents.d.ts","sourceRoot":"","sources":["../../../../text/lib/TypeLevelComponents.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAc,MAAM,QAAQ,CAAC;AAI9C,aAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzC;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC;IAClE;;OAEG;IACH,IAAI,EAAE,IAAI,CAAC;CACZ;AAOD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,OAAO,kFAMlB,CAAC;AAOH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,QAAQ,kFAMnB,CAAC;AAOH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,OAAO,mFAMlB,CAAC;AAOH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,KAAK,mFAMhB,CAAC"}

package/dist/commonjs/text/lib/TypeLevelComponents.js

@@ -24,6 +24,11 @@ const React = __importStar(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const Text_1 = require("./Text");
 const layout_1 = require("@workday/canvas-kit-react/layout");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const subtextStencil = canvas_kit_styling_1.createStencil({
+    extends: Text_1.textStencil,
+    base: { name: "26be9a", styles: "box-sizing:border-box;" }
+}, "subtext-4e8604");
 /**
  * This component is intended to be used for small subtext content or in tight spaces.
  * By default, it renders a semantic `p` element, but you can adjust this as needed with the `as` prop.
@@ -50,11 +55,15 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
  */
 exports.Subtext = common_1.createComponent('p')({
     displayName: 'Subtext',
-    Component: ({ size, ...elemProps }, ref, Element) => {
+    Component: ({ size, variant, ...elemProps }, ref, Element) => {
         const typeLevel = `subtext.${size}`;
-        return React.createElement(Text_1.Text, Object.assign({ ref: ref, as: Element, typeLevel: typeLevel }, layout_1.mergeStyles(elemProps)));
+        return React.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, subtextStencil({ typeLevel, variant }))));
     },
 });
+const bodyTextStencil = canvas_kit_styling_1.createStencil({
+    extends: Text_1.textStencil,
+    base: { name: "b117dc", styles: "box-sizing:border-box;" }
+}, "body-text-44de3e");
 /**
  * This component is intended to be used for standard body text.
  * By default, it renders a semantic `p` element, but you can adjust this as needed with the `as` prop.
@@ -81,11 +90,15 @@ exports.Subtext = common_1.createComponent('p')({
  */
 exports.BodyText = common_1.createComponent('p')({
     displayName: 'BodyText',
-    Component: ({ size, ...elemProps }, ref, Element) => {
+    Component: ({ size, variant, ...elemProps }, ref, Element) => {
         const typeLevel = `body.${size}`;
-        return React.createElement(Text_1.Text, Object.assign({ ref: ref, as: Element, typeLevel: typeLevel }, layout_1.mergeStyles(elemProps)));
+        return React.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, bodyTextStencil({ typeLevel, variant }))));
     },
 });
+const headingStencil = canvas_kit_styling_1.createStencil({
+    extends: Text_1.textStencil,
+    base: { name: "7ba7e1", styles: "box-sizing:border-box;" }
+}, "heading-5a3efc");
 /**
  * This component is intended to be used for headings and large text.
  * By default, it renders a semantic `h2` element, but you can adjust this as needed with the `as` prop.
@@ -112,11 +125,15 @@ exports.BodyText = common_1.createComponent('p')({
  */
 exports.Heading = common_1.createComponent('h2')({
     displayName: 'Heading',
-    Component: ({ size, ...elemProps }, ref, Element) => {
+    Component: ({ size, variant, ...elemProps }, ref, Element) => {
         const typeLevel = `heading.${size}`;
-        return React.createElement(Text_1.Text, Object.assign({ ref: ref, as: Element, typeLevel: typeLevel }, layout_1.mergeStyles(elemProps)));
+        return React.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, headingStencil({ typeLevel, variant }))));
     },
 });
+const titleStencil = canvas_kit_styling_1.createStencil({
+    extends: Text_1.textStencil,
+    base: { name: "23b801", styles: "box-sizing:border-box;" }
+}, "title-2c12c2");
 /**
  * This component is intended to be used large page titles.
  * By default, it renders a semantic `h1` element, but you can adjust this as needed with the `as` prop.
@@ -143,8 +160,8 @@ exports.Heading = common_1.createComponent('h2')({
  */
 exports.Title = common_1.createComponent('h1')({
     displayName: 'Title',
-    Component: ({ size, ...elemProps }, ref, Element) => {
+    Component: ({ size, variant, ...elemProps }, ref, Element) => {
         const typeLevel = `title.${size}`;
-        return React.createElement(Text_1.Text, Object.assign({ ref: ref, as: Element, typeLevel: typeLevel }, layout_1.mergeStyles(elemProps)));
+        return React.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, titleStencil({ typeLevel, variant }))));
     },
 });

package/dist/es6/icon/lib/AccentIcon.d.ts

@@ -50,6 +50,8 @@ export declare const accentIconStencil: import("@workday/canvas-kit-styling").St
         };
     };
 }, {
+    width: string;
+    height: string;
     size: string;
 }, never, never>, never>;
 export declare const AccentIcon: import("@workday/canvas-kit-react/common").ElementComponent<"span", AccentIconProps>;

package/dist/es6/icon/lib/AccentIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccentIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AccentIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAGlE,OAAO,EAAM,QAAQ,EAAwC,MAAM,OAAO,CAAC;AAE3E;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,CAAC;IACvF;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,4BAG1B,gBAAgB,KAAG,SAOpB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;wBAuB5B,CAAC;AAEH,eAAO,MAAM,UAAU,sFAwBrB,CAAC"}
+{"version":3,"file":"AccentIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AccentIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAGlE,OAAO,EAAM,QAAQ,EAAwC,MAAM,OAAO,CAAC;AAE3E;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,CAAC;IACvF;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,4BAG1B,gBAAgB,KAAG,SAOpB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;wBAuB5B,CAAC;AAEH,eAAO,MAAM,UAAU,sFAwBrB,CAAC"}

package/dist/es6/icon/lib/AccentIcon.js

@@ -21,7 +21,7 @@ export const accentIconStencil = createStencil({
     vars: {
         color: '',
     },
-    base: { name: "8ab799", styles: "box-sizing:border-box;--size-svg-e2876c:3.5rem;& .color-500{fill:var(--color-accent-icon-f47b2a, var(--cnvs-base-palette-blueberry-500));}& .french-vanilla-100{fill:var(--cnvs-base-palette-french-vanilla-100);}" },
+    base: { name: "8ab799", styles: "box-sizing:border-box;--size-svg-a30d66:3.5rem;& .color-500{fill:var(--color-accent-icon-f47b2a, var(--cnvs-base-palette-blueberry-500));}& .french-vanilla-100{fill:var(--cnvs-base-palette-french-vanilla-100);}" },
     modifiers: {
         transparent: {
             true: { name: "0b6c92", styles: "& .french-vanilla-100{fill:transparent;}" }

package/dist/es6/icon/lib/AppletIcon.d.ts

@@ -44,10 +44,8 @@ export declare const appletIconStencil: import("@workday/canvas-kit-styling").St
         };
     };
 }, {
-    /**
-     * The icon color hue. Must use a member of the `AppletIcon.Colors` static enum.
-     * @default AppletIcon.Colors.Blueberry
-     */
+    width: string;
+    height: string;
     size: string;
 }, never, never>, never>;
 export declare const AppletIcon: import("@workday/canvas-kit-react/common").ElementComponent<"span", AppletIconProps> & {

package/dist/es6/icon/lib/AppletIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppletIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AppletIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,aAAa,EAAc,MAAM,kCAAkC,CAAC;AACpF,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAM,QAAQ,EAAa,MAAM,OAAO,CAAC;AAKhD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,eAE1B,gBAAgB,KAAG,SAsCrB,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;IAC9F;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;IAhE5B;;;OAGG;;wBA0FH,CAAC;AAEH,eAAO,MAAM,UAAU;;CAyBrB,CAAC"}
+{"version":3,"file":"AppletIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AppletIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,aAAa,EAAc,MAAM,kCAAkC,CAAC;AACpF,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAM,QAAQ,EAAa,MAAM,OAAO,CAAC;AAKhD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,eAE1B,gBAAgB,KAAG,SAsCrB,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;IAC9F;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;wBA6B5B,CAAC;AAEH,eAAO,MAAM,UAAU;;CAyBrB,CAAC"}

package/dist/es6/icon/lib/AppletIcon.js

@@ -51,7 +51,7 @@ export const appletIconStencil = createStencil({
         color400: '',
         color500: '',
     },
-    base: { name: "ce2e64", styles: "box-sizing:border-box;--size-svg-e2876c:5.75rem;& .color-100{fill:var(--cnvs-base-palette-french-vanilla-100);}& .color-200{fill:var(--color200-applet-icon-757179, var(--cnvs-base-palette-blueberry-200));}& .color-300{fill:var(--color300-applet-icon-757179, var(--cnvs-base-palette-blueberry-300));}& .color-400{fill:var(--color400-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}& .color-400-alpha-20{fill:var(--color400-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}& .color-500{fill:var(--color500-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}" }
+    base: { name: "ce2e64", styles: "box-sizing:border-box;--size-svg-a30d66:5.75rem;& .color-100{fill:var(--cnvs-base-palette-french-vanilla-100);}& .color-200{fill:var(--color200-applet-icon-757179, var(--cnvs-base-palette-blueberry-200));}& .color-300{fill:var(--color300-applet-icon-757179, var(--cnvs-base-palette-blueberry-300));}& .color-400{fill:var(--color400-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}& .color-400-alpha-20{fill:var(--color400-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}& .color-500{fill:var(--color500-applet-icon-757179, var(--cnvs-base-palette-blueberry-400));}" }
 }, "applet-icon-757179");
 export const AppletIcon = createComponent('span')({
     displayName: 'AppletIcon',

package/dist/es6/icon/lib/Graphic.d.ts

@@ -8,13 +8,11 @@ export interface GraphicStyles {
     /**
      * The width of the Graphic in `px`. The Graphic's `width` takes precedence over its `height` in order to preserve its proportions.
      * @default width of graphic
-     * @deprecated Use `cs` to set width, `cs={{"& svg": {width: '1rem'}}}`
      */
     width?: number | string;
     /**
      * The height of the Graphic in `px`. If the Graphic's `height` is set, its `width` will be set to `100%`.
      * @default height of graphic
-     * @deprecated Use `cs` to set height, `cs={{"& svg": {height: '1rem'}}}`
      */
     height?: number | string;
     /**
@@ -36,13 +34,20 @@ export declare const graphicStyles: ({ width, height, grow }: GraphicStyles) =>
 export declare const graphicStencil: import("@workday/canvas-kit-styling").Stencil<{
     grow: {
         true: {
+            [x: string]: string;
             width: string;
-            '& svg': {
-                width: string;
-                height: string;
-            };
         };
     };
-}, {}, never, never>;
+}, {}, import("@workday/canvas-kit-styling").Stencil<{
+    shouldMirror: {
+        true: {
+            transform: "scaleX(-1)";
+        };
+    };
+}, {
+    width: string;
+    height: string;
+    size: string;
+}, never, never>, never>;
 export declare const Graphic: import("@workday/canvas-kit-react/common").ElementComponent<"span", GraphicProps>;
 //# sourceMappingURL=Graphic.d.ts.map

package/dist/es6/icon/lib/Graphic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Graphic.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Graphic.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,aAAa,EAAkB,MAAM,8BAA8B,CAAC;AAC5E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAIpC;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,YAAa,SAAQ,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;IACxF;;OAEG;IACH,GAAG,EAAE,aAAa,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,4BAA2B,aAAa,KAAG,SA4BpE,CAAC;AAOF,eAAO,MAAM,cAAc;;;;;;;;;;oBAkBzB,CAAC;AAEH,eAAO,MAAM,OAAO,mFAkBlB,CAAC"}
+{"version":3,"file":"Graphic.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Graphic.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,aAAa,EAAkB,MAAM,8BAA8B,CAAC;AAC5E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAM,QAAQ,EAAa,MAAM,OAAO,CAAC;AAIhD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,YAAa,SAAQ,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;IACxF;;OAEG;IACH,GAAG,EAAE,aAAa,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,4BAA2B,aAAa,KAAG,SA4BpE,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;wBAWzB,CAAC;AAEH,eAAO,MAAM,OAAO,mFAmBlB,CAAC"}

package/dist/es6/icon/lib/Graphic.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { CanvasIconTypes } from '@workday/design-assets-types';
-import { Svg } from './Svg';
+import { Svg, svgStencil } from './Svg';
 import { createComponent } from '@workday/canvas-kit-react/common';
-import { createStencil, createVars, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
+import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
 /**
  * @deprecated `graphicStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `graphicStencil` instead.
  */
@@ -34,27 +34,22 @@ export const graphicStyles = ({ width, height, grow }) => {
     }
     return {};
 };
-/**
- * @deprecated Part of supporting deprecated `height` and `width` props
- */
-const graphicVars = createVars({ id: "32acc9", args: ["height", "width"] });
 export const graphicStencil = createStencil({
-    base: { name: "a19511", styles: "box-sizing:border-box;& svg{width:var(--width-32acc9, 100%);height:var(--height-32acc9, 100%);}" },
+    extends: svgStencil,
+    base: { name: "61ea39", styles: "box-sizing:border-box;" },
     modifiers: {
         grow: {
-            true: { name: "f2369d", styles: "width:100%;& svg{width:100%;height:100%;}" }
+            true: { name: "fd9f26", styles: "width:100%;--width-svg-a30d66:100%;" }
         }
     }
-}, "graphic-d1ac9a");
+}, "graphic-ee386a");
 export const Graphic = createComponent('span')({
     displayName: 'Graphic',
     Component: ({ grow, width, height, ...elemProps }, ref, Element) => {
-        return (React.createElement(Svg, Object.assign({ type: CanvasIconTypes.Graphic, as: Element, ref: ref }, handleCsProp(elemProps, [
-            graphicStencil({ grow }),
-            {
-                [graphicVars.height]: typeof height === 'number' ? px2rem(height) : height,
-                [graphicVars.width]: typeof width === 'number' ? px2rem(width) : width,
-            },
-        ]))));
+        return (React.createElement(Svg, Object.assign({ type: CanvasIconTypes.Graphic, as: Element, ref: ref }, handleCsProp(elemProps, graphicStencil({
+            grow,
+            width: typeof width === 'number' ? px2rem(width) : width,
+            height: typeof height === 'number' ? px2rem(height) : height,
+        })))));
     },
 });

package/dist/es6/icon/lib/Svg.d.ts

@@ -16,7 +16,11 @@ export declare const svgStencil: import("@workday/canvas-kit-styling").Stencil<{
         };
     };
 }, {
-    /** set width and height of svg element */
+    /** sets width of svg element */
+    width: string;
+    /** sets height of svg element */
+    height: string;
+    /** sets width and height of svg element */
     size: string;
 }, never, never>;
 /** @deprecated */

package/dist/es6/icon/lib/Svg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Svg.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Svg.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAGzE,OAAO,EAAC,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAIvE,MAAM,WAAW,QAAS,SAAQ,QAAQ;IACxC,GAAG,EAAE,UAAU,CAAC;IAChB,IAAI,EAAE,eAAe,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,UAAU;;;;;;;IAEnB,0CAA0C;;gBAkB5C,CAAC;AAEH,kBAAkB;AAClB,eAAO,MAAM,yBAAyB,oDAKrC,CAAC;AAEF,eAAO,MAAM,GAAG,+EAkBd,CAAC"}
+{"version":3,"file":"Svg.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Svg.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAGzE,OAAO,EAAC,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAIvE,MAAM,WAAW,QAAS,SAAQ,QAAQ;IACxC,GAAG,EAAE,UAAU,CAAC;IAChB,IAAI,EAAE,eAAe,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,UAAU;;;;;;;IAEnB,gCAAgC;;IAEhC,iCAAiC;;IAEjC,2CAA2C;;gBAkB7C,CAAC;AAEH,kBAAkB;AAClB,eAAO,MAAM,yBAAyB,oDAKrC,CAAC;AAEF,eAAO,MAAM,GAAG,+EAkBd,CAAC"}

package/dist/es6/icon/lib/Svg.js

@@ -2,20 +2,24 @@ import * as React from 'react';
 import { validateIconType } from './utils';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
-import { createStencil } from '@workday/canvas-kit-styling';
+import { createStencil, cssVar } from '@workday/canvas-kit-styling';
 import { base } from '@workday/canvas-tokens-web';
 export const svgStencil = createStencil({
     vars: {
-        /** set width and height of svg element */
+        /** sets width of svg element */
+        width: '',
+        /** sets height of svg element */
+        height: '',
+        /** sets width and height of svg element */
         size: '',
     },
-    base: { name: "1ea8e4", styles: "box-sizing:border-box;display:inline-block;> svg{display:block;width:var(--size-svg-e2876c);height:var(--size-svg-e2876c);}" },
+    base: { name: "003268", styles: "box-sizing:border-box;display:inline-block;> svg{display:block;width:var(--width-svg-a30d66, var(--size-svg-a30d66));height:var(--height-svg-a30d66, var(--size-svg-a30d66));}" },
     modifiers: {
         shouldMirror: {
-            true: { name: "12aa4b", styles: "transform:scaleX(-1);" }
+            true: { name: "d9e55d", styles: "transform:scaleX(-1);" }
         }
     }
-}, "svg-e2876c");
+}, "svg-a30d66");
 /** @deprecated */
 export const transformColorNameToToken = (color) => {
     if (color && color in base) {

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

@@ -112,6 +112,8 @@ export declare const systemIconStencil: import("@workday/canvas-kit-styling").St
         };
     };
 }, {
+    width: string;
+    height: string;
     size: string;
 }, never, never>, never>;
 export declare const SystemIcon: import("@workday/canvas-kit-react/common").ElementComponent<"span", SystemIconProps>;

package/dist/es6/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,sFA0CrB,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;;;;;;;;;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,sFA0CrB,CAAC"}

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

@@ -20,7 +20,7 @@ const systemIconCircleStencil = 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-e2876c: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-53c273:var(--iconColor-system-icon-circle-554859);& img{width:100%;height:100%;}" }
 }, "system-icon-circle-554859");
 export const SystemIconCircle = createComponent('span')({
     displayName: 'SystemIconCircle',

package/dist/es6/text/lib/TypeLevelComponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypeLevelComponents.d.ts","sourceRoot":"","sources":["../../../../text/lib/TypeLevelComponents.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAGvC,aAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzC;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC;IAClE;;OAEG;IACH,IAAI,EAAE,IAAI,CAAC;CACZ;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,OAAO,kFAMlB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,QAAQ,kFAMnB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,OAAO,mFAMlB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,KAAK,mFAMhB,CAAC"}
+{"version":3,"file":"TypeLevelComponents.d.ts","sourceRoot":"","sources":["../../../../text/lib/TypeLevelComponents.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAc,MAAM,QAAQ,CAAC;AAI9C,aAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzC;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC;IAClE;;OAEG;IACH,IAAI,EAAE,IAAI,CAAC;CACZ;AAOD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,OAAO,kFAMlB,CAAC;AAOH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,QAAQ,kFAMnB,CAAC;AAOH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,OAAO,mFAMlB,CAAC;AAOH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,KAAK,mFAMhB,CAAC"}

package/dist/es6/text/lib/TypeLevelComponents.js

@@ -1,7 +1,12 @@
 import * as React from 'react';
 import { createComponent } from '@workday/canvas-kit-react/common';
-import { Text } from './Text';
+import { textStencil } from './Text';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { createStencil } from '@workday/canvas-kit-styling';
+const subtextStencil = createStencil({
+    extends: textStencil,
+    base: { name: "26be9a", styles: "box-sizing:border-box;" }
+}, "subtext-4e8604");
 /**
  * This component is intended to be used for small subtext content or in tight spaces.
  * By default, it renders a semantic `p` element, but you can adjust this as needed with the `as` prop.
@@ -28,11 +33,15 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
  */
 export const Subtext = createComponent('p')({
     displayName: 'Subtext',
-    Component: ({ size, ...elemProps }, ref, Element) => {
+    Component: ({ size, variant, ...elemProps }, ref, Element) => {
         const typeLevel = `subtext.${size}`;
-        return React.createElement(Text, Object.assign({ ref: ref, as: Element, typeLevel: typeLevel }, mergeStyles(elemProps)));
+        return React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, subtextStencil({ typeLevel, variant }))));
     },
 });
+const bodyTextStencil = createStencil({
+    extends: textStencil,
+    base: { name: "b117dc", styles: "box-sizing:border-box;" }
+}, "body-text-44de3e");
 /**
  * This component is intended to be used for standard body text.
  * By default, it renders a semantic `p` element, but you can adjust this as needed with the `as` prop.
@@ -59,11 +68,15 @@ export const Subtext = createComponent('p')({
  */
 export const BodyText = createComponent('p')({
     displayName: 'BodyText',
-    Component: ({ size, ...elemProps }, ref, Element) => {
+    Component: ({ size, variant, ...elemProps }, ref, Element) => {
         const typeLevel = `body.${size}`;
-        return React.createElement(Text, Object.assign({ ref: ref, as: Element, typeLevel: typeLevel }, mergeStyles(elemProps)));
+        return React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, bodyTextStencil({ typeLevel, variant }))));
     },
 });
+const headingStencil = createStencil({
+    extends: textStencil,
+    base: { name: "7ba7e1", styles: "box-sizing:border-box;" }
+}, "heading-5a3efc");
 /**
  * This component is intended to be used for headings and large text.
  * By default, it renders a semantic `h2` element, but you can adjust this as needed with the `as` prop.
@@ -90,11 +103,15 @@ export const BodyText = createComponent('p')({
  */
 export const Heading = createComponent('h2')({
     displayName: 'Heading',
-    Component: ({ size, ...elemProps }, ref, Element) => {
+    Component: ({ size, variant, ...elemProps }, ref, Element) => {
         const typeLevel = `heading.${size}`;
-        return React.createElement(Text, Object.assign({ ref: ref, as: Element, typeLevel: typeLevel }, mergeStyles(elemProps)));
+        return React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, headingStencil({ typeLevel, variant }))));
     },
 });
+const titleStencil = createStencil({
+    extends: textStencil,
+    base: { name: "23b801", styles: "box-sizing:border-box;" }
+}, "title-2c12c2");
 /**
  * This component is intended to be used large page titles.
  * By default, it renders a semantic `h1` element, but you can adjust this as needed with the `as` prop.
@@ -121,8 +138,8 @@ export const Heading = createComponent('h2')({
  */
 export const Title = createComponent('h1')({
     displayName: 'Title',
-    Component: ({ size, ...elemProps }, ref, Element) => {
+    Component: ({ size, variant, ...elemProps }, ref, Element) => {
         const typeLevel = `title.${size}`;
-        return React.createElement(Text, Object.assign({ ref: ref, as: Element, typeLevel: typeLevel }, mergeStyles(elemProps)));
+        return React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, titleStencil({ typeLevel, variant }))));
     },
 });

package/icon/lib/Graphic.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import {CanvasGraphic, CanvasIconTypes} from '@workday/design-assets-types';
 import {CSSObject} from '@emotion/styled';
-import {Svg, SvgProps} from './Svg';
+import {Svg, SvgProps, svgStencil} from './Svg';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {createStencil, createVars, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 
 /**
  * @deprecated Interface `GraphicStyles` will be removed in a future version. `grow` prop will be moved inside `GraphicProps`.
@@ -12,13 +12,11 @@ export interface GraphicStyles {
   /**
    * The width of the Graphic in `px`. The Graphic's `width` takes precedence over its `height` in order to preserve its proportions.
    * @default width of graphic
-   * @deprecated Use `cs` to set width, `cs={{"& svg": {width: '1rem'}}}`
    */
   width?: number | string;
   /**
    * The height of the Graphic in `px`. If the Graphic's `height` is set, its `width` will be set to `100%`.
    * @default height of graphic
-   * @deprecated Use `cs` to set height, `cs={{"& svg": {height: '1rem'}}}`
    */
   height?: number | string;
   /**
@@ -68,26 +66,14 @@ export const graphicStyles = ({width, height, grow}: GraphicStyles): CSSObject =
   return {};
 };
 
-/**
- * @deprecated Part of supporting deprecated `height` and `width` props
- */
-const graphicVars = createVars('height', 'width');
-
 export const graphicStencil = createStencil({
-  base: {
-    '& svg': {
-      width: cssVar(graphicVars.width, '100%'),
-      height: cssVar(graphicVars.height, '100%'),
-    },
-  },
+  extends: svgStencil,
+  base: {},
   modifiers: {
     grow: {
       true: {
         width: '100%',
-        '& svg': {
-          width: '100%',
-          height: '100%',
-        },
+        [svgStencil.vars.width]: '100%',
       },
     },
   },
@@ -101,13 +87,14 @@ export const Graphic = createComponent('span')({
         type={CanvasIconTypes.Graphic}
         as={Element}
         ref={ref}
-        {...handleCsProp(elemProps, [
-          graphicStencil({grow}),
-          {
-            [graphicVars.height]: typeof height === 'number' ? px2rem(height) : height,
-            [graphicVars.width]: typeof width === 'number' ? px2rem(width) : width,
-          },
-        ])}
+        {...handleCsProp(
+          elemProps,
+          graphicStencil({
+            grow,
+            width: typeof width === 'number' ? px2rem(width) : width,
+            height: typeof height === 'number' ? px2rem(height) : height,
+          })
+        )}
       />
     );
   },

package/icon/lib/Svg.tsx

@@ -3,7 +3,7 @@ import {CanvasIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {validateIconType} from './utils';
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
-import {createStencil} from '@workday/canvas-kit-styling';
+import {createStencil, cssVar} from '@workday/canvas-kit-styling';
 import {base} from '@workday/canvas-tokens-web';
 
 export interface SvgProps extends BoxProps {
@@ -18,15 +18,19 @@ export interface SvgProps extends BoxProps {
 
 export const svgStencil = createStencil({
   vars: {
-    /** set width and height of svg element */
+    /** sets width of svg element */
+    width: '',
+    /** sets height of svg element */
+    height: '',
+    /** sets width and height of svg element */
     size: '',
   },
-  base: ({size}) => ({
+  base: ({width, height, size}) => ({
     display: 'inline-block',
     '> svg': {
       display: 'block',
-      width: size,
-      height: size,
+      width: cssVar(width, size),
+      height: cssVar(height, size),
     },
   }),
   modifiers: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "11.0.0-alpha.805-next.0",
+  "version": "11.0.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,8 +49,8 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^11.0.0-alpha.805-next.0",
-    "@workday/canvas-kit-styling": "^11.0.0-alpha.805-next.0",
+    "@workday/canvas-kit-popup-stack": "^11.0.0",
+    "@workday/canvas-kit-styling": "^11.0.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.3.1",
     "@workday/design-assets-types": "^0.2.8",
@@ -67,5 +67,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "48f9234cb2c6eaa82b57201ea15bd852b12c7d4c"
+  "gitHead": "60ab75c33942c15bb1fd116ca19bdebeb005a99d"
 }

package/text/lib/TypeLevelComponents.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {Text, TextProps} from './Text';
+import {TextProps, textStencil} from './Text';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createStencil} from '@workday/canvas-kit-styling';
 
 type Size = 'large' | 'medium' | 'small';
 
@@ -16,6 +17,11 @@ export interface TypeLevelProps extends Omit<TextProps, 'typeLevel'> {
   size: Size;
 }
 
+const subtextStencil = createStencil({
+  extends: textStencil,
+  base: {},
+});
+
 /**
  * This component is intended to be used for small subtext content or in tight spaces.
  * By default, it renders a semantic `p` element, but you can adjust this as needed with the `as` prop.
@@ -42,12 +48,17 @@ export interface TypeLevelProps extends Omit<TextProps, 'typeLevel'> {
  */
 export const Subtext = createComponent('p')({
   displayName: 'Subtext',
-  Component: ({size, ...elemProps}: TypeLevelProps, ref, Element) => {
+  Component: ({size, variant, ...elemProps}: TypeLevelProps, ref, Element) => {
     const typeLevel = `subtext.${size}` as TextProps['typeLevel'];
-    return <Text ref={ref} as={Element} typeLevel={typeLevel} {...mergeStyles(elemProps)} />;
+    return <Element ref={ref} {...mergeStyles(elemProps, subtextStencil({typeLevel, variant}))} />;
   },
 });
 
+const bodyTextStencil = createStencil({
+  extends: textStencil,
+  base: {},
+});
+
 /**
  * This component is intended to be used for standard body text.
  * By default, it renders a semantic `p` element, but you can adjust this as needed with the `as` prop.
@@ -74,12 +85,17 @@ export const Subtext = createComponent('p')({
  */
 export const BodyText = createComponent('p')({
   displayName: 'BodyText',
-  Component: ({size, ...elemProps}: TypeLevelProps, ref, Element) => {
+  Component: ({size, variant, ...elemProps}: TypeLevelProps, ref, Element) => {
     const typeLevel = `body.${size}` as TextProps['typeLevel'];
-    return <Text ref={ref} as={Element} typeLevel={typeLevel} {...mergeStyles(elemProps)} />;
+    return <Element ref={ref} {...mergeStyles(elemProps, bodyTextStencil({typeLevel, variant}))} />;
   },
 });
 
+const headingStencil = createStencil({
+  extends: textStencil,
+  base: {},
+});
+
 /**
  * This component is intended to be used for headings and large text.
  * By default, it renders a semantic `h2` element, but you can adjust this as needed with the `as` prop.
@@ -106,12 +122,17 @@ export const BodyText = createComponent('p')({
  */
 export const Heading = createComponent('h2')({
   displayName: 'Heading',
-  Component: ({size, ...elemProps}: TypeLevelProps, ref, Element) => {
+  Component: ({size, variant, ...elemProps}: TypeLevelProps, ref, Element) => {
     const typeLevel = `heading.${size}` as TextProps['typeLevel'];
-    return <Text ref={ref} as={Element} typeLevel={typeLevel} {...mergeStyles(elemProps)} />;
+    return <Element ref={ref} {...mergeStyles(elemProps, headingStencil({typeLevel, variant}))} />;
   },
 });
 
+const titleStencil = createStencil({
+  extends: textStencil,
+  base: {},
+});
+
 /**
  * This component is intended to be used large page titles.
  * By default, it renders a semantic `h1` element, but you can adjust this as needed with the `as` prop.
@@ -138,8 +159,8 @@ export const Heading = createComponent('h2')({
  */
 export const Title = createComponent('h1')({
   displayName: 'Title',
-  Component: ({size, ...elemProps}: TypeLevelProps, ref, Element) => {
+  Component: ({size, variant, ...elemProps}: TypeLevelProps, ref, Element) => {
     const typeLevel = `title.${size}` as TextProps['typeLevel'];
-    return <Text ref={ref} as={Element} typeLevel={typeLevel} {...mergeStyles(elemProps)} />;
+    return <Element ref={ref} {...mergeStyles(elemProps, titleStencil({typeLevel, variant}))} />;
   },
 });