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

package/dist/commonjs/combobox/lib/ComboboxMenuItem.js

@@ -42,16 +42,16 @@ exports.useComboboxMenuItem = common_1.composeHooks(common_1.createElemPropsHook
     };
 }), collection_1.useListItemRegister, collection_1.useListItemAllowChildStrings);
 const comboboxMenuItemIconStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "1hcehcy", styles: "align-self:start;" }
-}, "combobox-menu-item-icon");
+    base: { name: "0631bc", styles: "align-self:start;" }
+}, "cnvs-combobox-menu-item-icon");
 exports.ComboboxMenuItemIcon = common_1.createSubcomponent('span')({
     modelHook: useComboboxModel_1.useComboboxModel,
 })((elemProps, Element) => {
     return react_1.default.createElement(icon_1.SystemIcon, Object.assign({ as: Element }, layout_1.mergeStyles(elemProps, comboboxMenuItemIconStencil())));
 });
 const comboboxMenuItemStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "4xv1tq", styles: "min-height:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }
-}, "combobox-menu-item");
+    base: { name: "1963d4", styles: "min-height:var(--cnvs-sys-space-x10);" }
+}, "cnvs-combobox-menu-item");
 exports.ComboboxMenuItem = common_1.createSubcomponent('li')({
     modelHook: useComboboxModel_1.useComboboxModel,
     elemPropsHook: exports.useComboboxMenuItem,

package/dist/commonjs/combobox/lib/ComboboxMenuList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxMenuList.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxMenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAU,YAAY,EAAC,MAAM,sCAAsC,CAAC;AAO3E,MAAM,WAAW,qBAAqB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,YAAY,CAAC,CAAC,CAAC;CAAG;AAE1E;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAM9B,CAAC;AAOH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAc3B,CAAC"}
+{"version":3,"file":"ComboboxMenuList.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxMenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAU,YAAY,EAAC,MAAM,sCAAsC,CAAC;AAM3E,MAAM,WAAW,qBAAqB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,YAAY,CAAC,CAAC,CAAC;CAAG;AAE1E;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAM9B,CAAC;AAOH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAc3B,CAAC"}

package/dist/commonjs/combobox/lib/ComboboxMenuList.js

@@ -11,7 +11,6 @@ const collection_1 = require("@workday/canvas-kit-react/collection");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const useComboboxModel_1 = require("./hooks/useComboboxModel");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
-const layout_1 = require("@workday/canvas-kit-react/layout");
 /**
  * The `listbox` uses `aria-labelledby` pointing to the {@link ComboboxInput Combobox.Input}. This
  * input should be labelled by a form field label for proper accessibility. Use {@link FormField} to
@@ -24,13 +23,13 @@ exports.useComboboxMenuList = common_1.createElemPropsHook(menu_1.useMenuModel)(
         id: `${model.state.id}-list`,
     };
 });
-const comoboxMenuListStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "0", styles: "" },
+const comboboxMenuListStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "030ac8", styles: "" },
     extends: menu_1.menuListStencil
-}, "comobox-menu-list");
+}, "cnvs-combobox-menu-list");
 exports.ComboboxMenuList = common_1.createSubcomponent('ul')({
     modelHook: useComboboxModel_1.useComboboxModel,
     elemPropsHook: exports.useComboboxMenuList,
 })(({ children, ...elemProps }, Element, model) => {
-    return (react_1.default.createElement(collection_1.ListBox, Object.assign({ as: Element, model: model, marginY: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x2) }, layout_1.mergeStyles(elemProps, comoboxMenuListStencil({ orientation: model.state.orientation }))), children));
+    return (react_1.default.createElement(collection_1.ListBox, Object.assign({ as: Element, model: model, marginY: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x2) }, canvas_kit_styling_1.handleCsProp(elemProps, comboboxMenuListStencil({ orientation: model.state.orientation }))), children));
 });

package/dist/commonjs/common/lib/AccessibleHide.js

@@ -39,7 +39,7 @@ exports.accessibleHide = {
     padding: 0,
     border: 0,
 };
-const accessibleHideStyles = canvas_kit_styling_1.createStyles({ name: "i19yjz", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;width:1px;margin:-1px;padding:0;border:0;" });
+const accessibleHideStyles = canvas_kit_styling_1.createStyles({ name: "ad6b80", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;width:1px;margin:-1px;padding:0;border:0;" });
 /**
  * A convenient component wrapper to visually hide content, while still making it accessible to screen readers
  */

package/dist/commonjs/common/lib/CanvasProvider.js

@@ -27,7 +27,7 @@ const theming_1 = require("./theming");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 // copied from brand/_variables.css
-const defaultBranding = canvas_kit_styling_1.createStyles({ name: "fijyj9", styles: "--cnvs-brand-error-darkest:rgba(128,22,14,1);--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-cantaloupe-400, rgba(255,161,38,1));--cnvs-brand-common-error-inner:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blueberry-400, rgba(8,117,225,1));--cnvs-brand-neutral-accent:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-licorice-400, rgba(74,85,97,1));--cnvs-brand-neutral-dark:var(--cnvs-base-palette-licorice-300, rgba(94,106,117,1));--cnvs-brand-neutral-base:var(--cnvs-base-palette-soap-600, rgba(185,192,199,1));--cnvs-brand-neutral-light:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));--cnvs-brand-success-accent:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-apple-600, rgba(33,122,55,1));--cnvs-brand-success-dark:var(--cnvs-base-palette-green-apple-500, rgba(49,156,76,1));--cnvs-brand-success-base:var(--cnvs-base-palette-green-apple-400, rgba(67,196,99,1));--cnvs-brand-success-light:var(--cnvs-base-palette-green-apple-300, rgba(95,227,128,1));--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-apple-100, rgba(235,255,240,1));--cnvs-brand-error-accent:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-brand-error-dark:var(--cnvs-base-palette-cinnamon-600, rgba(163,27,18,1));--cnvs-brand-error-base:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));--cnvs-brand-error-light:var(--cnvs-base-palette-cinnamon-200, rgba(252,201,197,1));--cnvs-brand-error-lightest:var(--cnvs-base-palette-cinnamon-100, rgba(255,239,238,1));--cnvs-brand-alert-accent:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-brand-alert-darkest:var(--cnvs-base-palette-cantaloupe-600, rgba(192,108,0,1));--cnvs-brand-alert-dark:var(--cnvs-base-palette-cantaloupe-500, rgba(243,139,0,1));--cnvs-brand-alert-base:var(--cnvs-base-palette-cantaloupe-400, rgba(255,161,38,1));--cnvs-brand-alert-light:var(--cnvs-base-palette-cantaloupe-200, rgba(252,212,159,1));--cnvs-brand-alert-lightest:var(--cnvs-base-palette-cantaloupe-100, rgba(255,238,217,1));--cnvs-brand-primary-accent:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blueberry-600, rgba(0,67,135,1));--cnvs-brand-primary-dark:var(--cnvs-base-palette-blueberry-500, rgba(0,92,185,1));--cnvs-brand-primary-base:var(--cnvs-base-palette-blueberry-400, rgba(8,117,225,1));--cnvs-brand-primary-light:var(--cnvs-base-palette-blueberry-200, rgba(166,210,255,1));--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blueberry-100, rgba(215,234,252,1));--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base, rgba(8,117,225,1)) 0%, var(--cnvs-brand-primary-dark, rgba(0,92,185,1)) 100%);" });
+const defaultBranding = canvas_kit_styling_1.createStyles({ name: "2fed25", styles: "--cnvs-brand-error-darkest:rgba(128,22,14,1);--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-common-error-inner:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-neutral-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-licorice-400);--cnvs-brand-neutral-dark:var(--cnvs-base-palette-licorice-300);--cnvs-brand-neutral-base:var(--cnvs-base-palette-soap-600);--cnvs-brand-neutral-light:var(--cnvs-base-palette-soap-300);--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-soap-200);--cnvs-brand-success-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-apple-600);--cnvs-brand-success-dark:var(--cnvs-base-palette-green-apple-500);--cnvs-brand-success-base:var(--cnvs-base-palette-green-apple-400);--cnvs-brand-success-light:var(--cnvs-base-palette-green-apple-300);--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-apple-100);--cnvs-brand-error-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-error-dark:var(--cnvs-base-palette-cinnamon-600);--cnvs-brand-error-base:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-error-light:var(--cnvs-base-palette-cinnamon-200);--cnvs-brand-error-lightest:var(--cnvs-base-palette-cinnamon-100);--cnvs-brand-alert-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-alert-darkest:var(--cnvs-base-palette-cantaloupe-600);--cnvs-brand-alert-dark:var(--cnvs-base-palette-cantaloupe-500);--cnvs-brand-alert-base:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-alert-light:var(--cnvs-base-palette-cantaloupe-200);--cnvs-brand-alert-lightest:var(--cnvs-base-palette-cantaloupe-100);--cnvs-brand-primary-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blueberry-600);--cnvs-brand-primary-dark:var(--cnvs-base-palette-blueberry-500);--cnvs-brand-primary-base:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-primary-light:var(--cnvs-base-palette-blueberry-200);--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blueberry-100);--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);" });
 const mappedKeys = {
     lightest: 'lightest',
     light: 'light',

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

@@ -3,5 +3,5 @@ export * from './lib/AppletIcon';
 export * from './lib/SystemIcon';
 export * from './lib/SystemIconCircle';
 export * from './lib/Graphic';
-export * from './lib/Svg';
+export { Svg, SvgProps, svgStencil } from './lib/Svg';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../icon/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../icon/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAC,GAAG,EAAE,QAAQ,EAAE,UAAU,EAAC,MAAM,WAAW,CAAC"}

package/dist/commonjs/icon/index.js

@@ -10,9 +10,12 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.svgStencil = exports.Svg = void 0;
 __exportStar(require("./lib/AccentIcon"), exports);
 __exportStar(require("./lib/AppletIcon"), exports);
 __exportStar(require("./lib/SystemIcon"), exports);
 __exportStar(require("./lib/SystemIconCircle"), exports);
 __exportStar(require("./lib/Graphic"), exports);
-__exportStar(require("./lib/Svg"), exports);
+var Svg_1 = require("./lib/Svg");
+Object.defineProperty(exports, "Svg", { enumerable: true, get: function () { return Svg_1.Svg; } });
+Object.defineProperty(exports, "svgStencil", { enumerable: true, get: function () { return Svg_1.svgStencil; } });

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

@@ -1,20 +1,24 @@
 import { CanvasAccentIcon } from '@workday/design-assets-types';
 import { CSSObject } from '@emotion/styled';
-import { IconProps } from './Icon';
 import { SystemPropValues } from '@workday/canvas-kit-react/layout';
+import { SvgProps } from './Svg';
+/**
+ * @deprecated Interface `AccentIconStyles` will be removed in a future version. All props will be moved inside `AccentIconProps`. Consider to use the new tokens set to set `color` prop: `color={base.blueberry500}`.
+ */
 export interface AccentIconStyles {
     /**
      * The fill color of the AccentIcon.
-     * @default colors.blueberry500
+     * @default base.blueberry500
      */
     color?: SystemPropValues['color'];
     /**
-     * If true, set the background fill of the AccentIcon to `transparent`. If false, set the background fill of the AccentIcon to `colors.frenchVanilla100`.
+     * If true, set the background fill of the AccentIcon to `transparent`.
+     * If false, set the background fill of the AccentIcon to `base.frenchVanilla100`.
      * @default false
      */
     transparent?: boolean;
 }
-export interface AccentIconProps extends AccentIconStyles, Omit<IconProps, 'src' | 'type'> {
+export interface AccentIconProps extends AccentIconStyles, Omit<SvgProps, 'src' | 'type'> {
     /**
      *  The icon to display from `@workday/canvas-accent-icons-web`.
      */
@@ -25,6 +29,28 @@ export interface AccentIconProps extends AccentIconStyles, Omit<IconProps, 'src'
      */
     size?: number;
 }
+/**
+ * @deprecated `accentIconStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `accentIconStencil` instead.
+ */
 export declare const accentIconStyles: ({ color, transparent, }: AccentIconStyles) => CSSObject;
+export declare const accentIconStencil: import("@workday/canvas-kit-styling").Stencil<{
+    transparent: {
+        true: {
+            '& .french-vanilla-100': {
+                fill: "transparent";
+            };
+        };
+    };
+}, {
+    color: string;
+}, import("@workday/canvas-kit-styling").Stencil<{
+    shouldMirror: {
+        true: {
+            transform: "scaleX(-1)";
+        };
+    };
+}, {
+    size: string;
+}, never, never>, never>;
 export declare const AccentIcon: import("@workday/canvas-kit-react/common").ElementComponent<"span", AccentIconProps>;
 //# sourceMappingURL=AccentIcon.d.ts.map

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;AAC1C,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAElE,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;IACxF;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,gBAAgB,4BAG1B,gBAAgB,KAAG,SAOpB,CAAC;AAEH,eAAO,MAAM,UAAU,sFAoBrB,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

@@ -19,12 +19,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AccentIcon = exports.accentIconStyles = void 0;
+exports.AccentIcon = exports.accentIconStencil = exports.accentIconStyles = void 0;
 const React = __importStar(require("react"));
 const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const design_assets_types_1 = require("@workday/design-assets-types");
-const Icon_1 = require("./Icon");
 const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const Svg_1 = require("./Svg");
+/**
+ * @deprecated `accentIconStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `accentIconStencil` instead.
+ */
 const accentIconStyles = ({ color = tokens_1.colors.blueberry500, transparent = false, }) => ({
     '& .color-500': {
         fill: common_1.getColor(color),
@@ -34,9 +39,28 @@ const accentIconStyles = ({ color = tokens_1.colors.blueberry500, transparent =
     },
 });
 exports.accentIconStyles = accentIconStyles;
+exports.accentIconStencil = canvas_kit_styling_1.createStencil({
+    extends: Svg_1.svgStencil,
+    vars: {
+        color: '',
+    },
+    base: { name: "8ab799", styles: "--cnvs-svg-size:3.5rem;& .color-500{fill:var(--cnvs-accent-icon-color, 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;}" }
+        }
+    }
+}, "cnvs-accent-icon");
 exports.AccentIcon = common_1.createComponent('span')({
     displayName: 'AccentIcon',
-    Component: ({ transparent = false, size = 56, icon, color, shouldMirror, ...elemProps }, ref, Element) => {
-        return (React.createElement(Icon_1.Icon, Object.assign({ src: icon, type: design_assets_types_1.CanvasIconTypes.Accent, styles: exports.accentIconStyles({ color, transparent }), size: size, as: Element, ref: ref, shouldMirror: shouldMirror }, elemProps)));
+    Component: ({ transparent, size, icon, color, shouldMirror, ...elemProps }, ref, Element) => {
+        return (React.createElement(Svg_1.Svg, Object.assign({ src: icon, type: design_assets_types_1.CanvasIconTypes.Accent, as: Element, ref: ref }, canvas_kit_styling_1.handleCsProp(elemProps, [
+            exports.accentIconStencil({
+                color: Svg_1.transformColorNameToToken(color),
+                size: typeof size === 'number' ? canvas_kit_styling_1.px2rem(size) : undefined,
+                shouldMirror,
+                transparent,
+            }),
+        ]))));
     },
 });

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

@@ -1,7 +1,10 @@
 import { BrandingColor } from '@workday/canvas-kit-react/tokens';
 import { CanvasAppletIcon } from '@workday/design-assets-types';
 import { CSSObject } from '@emotion/styled';
-import { IconProps } from './Icon';
+import { SvgProps } from './Svg';
+/**
+ * @deprecated Interface `AppletIconStyles` will be removed in a future version. All props will be moved inside `AppletIconProps`.
+ */
 export interface AppletIconStyles {
     /**
      * The icon color hue. Must use a member of the `AppletIcon.Colors` static enum.
@@ -9,8 +12,11 @@ export interface AppletIconStyles {
      */
     color?: BrandingColor;
 }
+/**
+ * @deprecated `appletIconStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `appletIconStencil` instead.
+ */
 export declare const appletIconStyles: ({ color, }: AppletIconStyles) => CSSObject;
-export interface AppletIconProps extends AppletIconStyles, Pick<IconProps, 'shouldMirror'> {
+export interface AppletIconProps extends AppletIconStyles, Pick<SvgProps, 'shouldMirror' | 'cs'> {
     /**
      * The icon to display from `@workday/canvas-applet-icons-web`.
      */
@@ -21,6 +27,29 @@ export interface AppletIconProps extends AppletIconStyles, Pick<IconProps, 'shou
      */
     size?: number;
 }
+export declare const appletIconStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{
+    color200: string;
+    color300: string;
+    color400: string;
+    color500: string;
+}, never>, {
+    color200: string;
+    color300: string;
+    color400: string;
+    color500: string;
+}, import("@workday/canvas-kit-styling").Stencil<{
+    shouldMirror: {
+        true: {
+            transform: "scaleX(-1)";
+        };
+    };
+}, {
+    /**
+     * The icon color hue. Must use a member of the `AppletIcon.Colors` static enum.
+     * @default AppletIcon.Colors.Blueberry
+     */
+    size: string;
+}, never, never>, never>;
 export declare const AppletIcon: import("@workday/canvas-kit-react/common").ElementComponent<"span", AppletIconProps> & {
     Colors: typeof BrandingColor;
 };

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,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAGvC,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,eAE1B,gBAAgB,KAAG,SAsCrB,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,SAAS,EAAE,cAAc,CAAC;IACxF;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,UAAU;;CAuBrB,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;;;;;;;;;;;;;;;;;IAhE5B;;;OAGG;;wBA0FH,CAAC;AAEH,eAAO,MAAM,UAAU;;CAyBrB,CAAC"}

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

@@ -19,12 +19,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppletIcon = exports.appletIconStyles = void 0;
+exports.AppletIcon = exports.appletIconStencil = exports.appletIconStyles = void 0;
 const React = __importStar(require("react"));
 const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const design_assets_types_1 = require("@workday/design-assets-types");
-const Icon_1 = require("./Icon");
+const Svg_1 = require("./Svg");
 const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+/**
+ * @deprecated `appletIconStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `appletIconStencil` instead.
+ */
 const appletIconStyles = ({ color = tokens_1.BrandingColor.Blueberry, }) => {
     // Check if valid color
     if (!Object.keys(tokens_1.BrandingColor)
@@ -61,10 +66,28 @@ const appletIconStyles = ({ color = tokens_1.BrandingColor.Blueberry, }) => {
     };
 };
 exports.appletIconStyles = appletIconStyles;
+exports.appletIconStencil = canvas_kit_styling_1.createStencil({
+    extends: Svg_1.svgStencil,
+    vars: {
+        color200: '',
+        color300: '',
+        color400: '',
+        color500: '',
+    },
+    base: { name: "ce2e64", styles: "--cnvs-svg-size:5.75rem;& .color-100{fill:var(--cnvs-base-palette-french-vanilla-100);}& .color-200{fill:var(--cnvs-applet-icon-color200, var(--cnvs-base-palette-blueberry-200));}& .color-300{fill:var(--cnvs-applet-icon-color300, var(--cnvs-base-palette-blueberry-300));}& .color-400{fill:var(--cnvs-applet-icon-color400, var(--cnvs-base-palette-blueberry-400));}& .color-400-alpha-20{fill:var(--cnvs-applet-icon-color400, var(--cnvs-base-palette-blueberry-400));}& .color-500{fill:var(--cnvs-applet-icon-color500, var(--cnvs-base-palette-blueberry-400));}" }
+}, "cnvs-applet-icon");
 exports.AppletIcon = common_1.createComponent('span')({
     displayName: 'AppletIcon',
-    Component: ({ size = 92, icon, color, shouldMirror, ...elemProps }, ref, Element) => {
-        return (React.createElement(Icon_1.Icon, Object.assign({ src: icon, type: design_assets_types_1.CanvasIconTypes.Applet, styles: exports.appletIconStyles({ color }), as: Element, size: size, ref: ref, shouldMirror: shouldMirror }, elemProps)));
+    Component: ({ size, icon, color, ...elemProps }, ref, Element) => {
+        const colors = color && {
+            color200: canvas_tokens_web_1.base[`${color}200`],
+            color300: canvas_tokens_web_1.base[`${color}300`],
+            color400: canvas_tokens_web_1.base[`${color}400`],
+            color500: canvas_tokens_web_1.base[`${color}500`],
+        };
+        return (React.createElement(Svg_1.Svg, Object.assign({ src: icon, type: design_assets_types_1.CanvasIconTypes.Applet, as: Element, ref: ref }, canvas_kit_styling_1.handleCsProp(elemProps, [
+            exports.appletIconStencil({ ...colors, size: size ? canvas_kit_styling_1.px2rem(size) : undefined }),
+        ]))));
     },
     subComponents: {
         Colors: tokens_1.BrandingColor,

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

@@ -1,15 +1,20 @@
 import { CanvasGraphic } from '@workday/design-assets-types';
 import { CSSObject } from '@emotion/styled';
 import { SvgProps } from './Svg';
+/**
+ * @deprecated Interface `GraphicStyles` will be removed in a future version. `grow` prop will be moved inside `GraphicProps`.
+ */
 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;
     /**
@@ -18,12 +23,26 @@ export interface GraphicStyles {
      */
     grow?: boolean;
 }
-export interface GraphicProps extends GraphicStyles, Pick<SvgProps, 'shouldMirror'> {
+export interface GraphicProps extends GraphicStyles, Pick<SvgProps, 'shouldMirror' | 'cs'> {
     /**
      * The graphic to display from `@workday/canvas-graphics-web`.
      */
     src: CanvasGraphic;
 }
+/**
+ * @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.
+ */
 export declare const graphicStyles: ({ width, height, grow }: GraphicStyles) => CSSObject;
+export declare const graphicStencil: import("@workday/canvas-kit-styling").Stencil<{
+    grow: {
+        true: {
+            width: string;
+            '& svg': {
+                width: string;
+                height: string;
+            };
+        };
+    };
+}, {}, 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;AAGpC,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,CAAC;IACjF;;OAEG;IACH,GAAG,EAAE,aAAa,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,4BAA2B,aAAa,KAAG,SA4BpE,CAAC;AAEF,eAAO,MAAM,OAAO,mFAmBlB,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,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"}

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

@@ -19,11 +19,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Graphic = exports.graphicStyles = void 0;
+exports.Graphic = exports.graphicStencil = exports.graphicStyles = void 0;
 const React = __importStar(require("react"));
 const design_assets_types_1 = require("@workday/design-assets-types");
 const Svg_1 = require("./Svg");
 const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_kit_styling_1 = require("@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.
+ */
 const graphicStyles = ({ width, height, grow }) => {
     if (grow) {
         return {
@@ -53,9 +57,27 @@ 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: "cnvs-graphic", args: ["height", "width"] });
+exports.graphicStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "a19511", styles: "& svg{width:var(--cnvs-graphic-width, 100%);height:var(--cnvs-graphic-height, 100%);}" },
+    modifiers: {
+        grow: {
+            true: { name: "f2369d", styles: "width:100%;& svg{width:100%;height:100%;}" }
+        }
+    }
+}, "cnvs-graphic");
 exports.Graphic = common_1.createComponent('span')({
     displayName: 'Graphic',
-    Component: ({ grow = false, src, width, height, shouldMirror, ...elemProps }, ref, Element) => {
-        return (React.createElement(Svg_1.Svg, Object.assign({ src: src, styles: exports.graphicStyles({ width, height, grow }), type: design_assets_types_1.CanvasIconTypes.Graphic, as: Element, ref: ref, shouldMirror: shouldMirror }, elemProps)));
+    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,
+            },
+        ]))));
     },
 });

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

@@ -1,9 +1,7 @@
-import { CSSObject } from '@emotion/styled';
 import { CanvasIcon, CanvasIconTypes } from '@workday/design-assets-types';
 import { BoxProps } from '@workday/canvas-kit-react/layout';
 export interface SvgProps extends BoxProps {
     src: CanvasIcon;
-    styles?: CSSObject;
     type: CanvasIconTypes;
     /**
      * If set to `true`, transform the SVG's x-axis to mirror the graphic
@@ -11,5 +9,17 @@ export interface SvgProps extends BoxProps {
      */
     shouldMirror?: boolean;
 }
+export declare const svgStencil: import("@workday/canvas-kit-styling").Stencil<{
+    shouldMirror: {
+        true: {
+            transform: "scaleX(-1)";
+        };
+    };
+}, {
+    /** set width and height of svg element */
+    size: string;
+}, never, never>;
+/** @deprecated */
+export declare const transformColorNameToToken: (color?: string | undefined) => string | undefined;
 export declare const Svg: import("@workday/canvas-kit-react/common").ElementComponent<"span", SvgProps>;
 //# sourceMappingURL=Svg.d.ts.map

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":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAGzE,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAE/D,MAAM,WAAW,QAAS,SAAQ,QAAQ;IACxC,GAAG,EAAE,UAAU,CAAC;IAChB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,EAAE,eAAe,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAeD,eAAO,MAAM,GAAG,+EAmBd,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,0CAA0C;;gBAmB5C,CAAC;AAEH,kBAAkB;AAClB,eAAO,MAAM,yBAAyB,oDAKrC,CAAC;AAEF,eAAO,MAAM,GAAG,+EAkBd,CAAC"}

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

@@ -19,21 +19,36 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Svg = void 0;
+exports.Svg = exports.transformColorNameToToken = exports.svgStencil = void 0;
 const React = __importStar(require("react"));
 const utils_1 = require("./utils");
 const common_1 = require("@workday/canvas-kit-react/common");
 const layout_1 = require("@workday/canvas-kit-react/layout");
-const StyledIconSpan = common_1.styled(layout_1.Box.as('span'))({
-    display: 'inline-block',
-    '> svg': { display: 'block' },
-}, ({ shouldMirror, styles }) => ({
-    ...styles,
-    transform: shouldMirror ? 'scaleX(-1)' : undefined,
-}));
+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 */
+        size: '',
+    },
+    base: { name: "1ea8e4", styles: "box-sizing:border-box;display:inline-block;> svg{display:block;width:var(--cnvs-svg-size);height:var(--cnvs-svg-size);}" },
+    modifiers: {
+        shouldMirror: {
+            true: { name: "4302e3", styles: "transform:scaleX(-1);" }
+        }
+    }
+}, "cnvs-svg");
+/** @deprecated */
+const transformColorNameToToken = (color) => {
+    if (color && color in canvas_tokens_web_1.base) {
+        return canvas_tokens_web_1.base[color];
+    }
+    return color;
+};
+exports.transformColorNameToToken = transformColorNameToToken;
 exports.Svg = common_1.createComponent('span')({
     displayName: 'Svg',
-    Component: ({ src, type, ...elemProps }, ref, Element) => {
+    Component: ({ shouldMirror, src, type, ...elemProps }, ref, Element) => {
         try {
             utils_1.validateIconType(src, type);
         }
@@ -41,6 +56,6 @@ exports.Svg = common_1.createComponent('span')({
             console.error(e);
             return null;
         }
-        return (React.createElement(StyledIconSpan, Object.assign({ as: Element, dangerouslySetInnerHTML: { __html: src.svg } }, elemProps, { ref: ref })));
+        return (React.createElement(Element, Object.assign({ ref: ref, dangerouslySetInnerHTML: { __html: src.svg } }, layout_1.mergeStyles(elemProps, exports.svgStencil({ shouldMirror })))));
     },
 });