@workday/canvas-kit-react 15.0.0-alpha.1303-next.0 → 15.0.0

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

@@ -0,0 +1,84 @@
+import { CanvasExpressiveIcon } from '@workday/canvas-expressive-icons-web';
+import { SvgProps } from './Svg';
+type ExpressiveSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface ExpressiveIconProps extends Omit<SvgProps, 'src' | 'type'> {
+    /**
+     * The accent color of the ExpressiveIcon.
+     */
+    accent?: string;
+    /**
+     * The outline color of the ExpressiveIcon.
+     */
+    color?: string;
+    /**
+     * The icon to display from `@workday/canvas-expressive-icons-web`.
+     */
+    icon: CanvasExpressiveIcon;
+    /**
+     * The size of the ExpressiveIcon in size variants or string / numeric (px) values.
+     * **Expressive icon sizes**
+     * - `xs`: 40px / 2.5rem
+     * - `sm`: 48px / 3rem
+     * - `md`: 56px / 3.5rem
+     * - `lg`: 64px / 4rem
+     * - `xl`: 96px / 6rem
+     * @default `56px`
+     */
+    size?: ExpressiveSize | string | number;
+}
+export declare const expressiveIconStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+    /**
+     * This will set the icon's outline color for the `.wd-expressive-fill` SVG layer.
+     */
+    color: string;
+    /**
+     * This will set the icon's accent color for the `.wd-expressive-accent` SVG layer.
+     */
+    accentColor: string;
+}, import("@workday/canvas-kit-styling").Stencil<{
+    shouldMirror: {
+        true: {
+            transform: string;
+        };
+    };
+    shouldMirrorInRTL: {
+        true: {
+            '&:dir(rtl)': {
+                transform: string;
+            };
+        };
+    };
+}, {}, {
+    width: string;
+    height: string;
+    size: string;
+}, never, never>>, {}, {
+    /**
+     * This will set the icon's outline color for the `.wd-expressive-fill` SVG layer.
+     */
+    color: string;
+    /**
+     * This will set the icon's accent color for the `.wd-expressive-accent` SVG layer.
+     */
+    accentColor: string;
+}, import("@workday/canvas-kit-styling").Stencil<{
+    shouldMirror: {
+        true: {
+            transform: string;
+        };
+    };
+    shouldMirrorInRTL: {
+        true: {
+            '&:dir(rtl)': {
+                transform: string;
+            };
+        };
+    };
+}, {}, {
+    width: string;
+    height: string;
+    size: string;
+}, never, never>, never>;
+export declare const ExpressiveIcon: import("@workday/canvas-kit-react/common").ElementComponent<"span", ExpressiveIconProps>;
+export {};
+//# sourceMappingURL=ExpressiveIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpressiveIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/ExpressiveIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,oBAAoB,EAAkB,MAAM,sCAAsC,CAAC;AAK3F,OAAO,EAAM,QAAQ,EAA0B,MAAM,OAAO,CAAC;AAE7D,KAAK,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEvD,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,CAAC;IACzE;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,EAAE,oBAAoB,CAAC;IAC3B;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,cAAc,GAAG,MAAM,GAAG,MAAM,CAAC;CACzC;AAED,eAAO,MAAM,qBAAqB;IAG9B;;OAEG;;IAEH;;OAEG;;;;;;;;;;;;;;;;;;;;IANH;;OAEG;;IAEH;;OAEG;;;;;;;;;;;;;;;;;;;wBA0BL,CAAC;AAEH,eAAO,MAAM,cAAc,0FAoBzB,CAAC"}

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpressiveIcon = exports.expressiveIconStencil = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const canvas_expressive_icons_web_1 = require("@workday/canvas-expressive-icons-web");
+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");
+exports.expressiveIconStencil = (0, canvas_kit_styling_1.createStencil)({
+    extends: Svg_1.svgStencil,
+    vars: {
+        /**
+         * This will set the icon's outline color for the `.wd-expressive-fill` SVG layer.
+         */
+        color: '',
+        /**
+         * This will set the icon's accent color for the `.wd-expressive-accent` SVG layer.
+         */
+        accentColor: '',
+    },
+    base: { name: "31m6rr", styles: "box-sizing:border-box;& svg{width:var(--size-svg-bca693, var(--cnvs-component-expressive-icon-size-md, var(--cnvs-sys-space-x14, 3.5rem)));height:var(--size-svg-bca693, var(--cnvs-component-expressive-icon-size-md, var(--cnvs-sys-space-x14, 3.5rem)));}.wd-expressive .wd-expressive-fill{fill:var(--color-expressive-icon-3a9572, var(--cnvs-component-expressive-icon-color-fill, var(--cnvs-sys-color-fg-default, oklch(0.3523 0 0 / 1))));}.wd-expressive .wd-expressive-accent{fill:var(--accentColor-expressive-icon-3a9572, var(--cnvs-component-expressive-icon-color-accent, oklch(0.0847 0 0 / 0.17)));}@media (prefers-contrast: more){.wd-expressive .wd-expressive-fill{color:currentColor;fill:currentColor;}.wd-expressive .wd-expressive-accent{color:transparent;fill:transparent;}}" }
+}, "expressive-icon-3a9572");
+exports.ExpressiveIcon = (0, common_1.createComponent)('span')({
+    displayName: 'ExpressiveIcon',
+    Component: ({ accent, color, icon, size, ...elemProps }, ref, Element) => {
+        return ((0, jsx_runtime_1.jsx)(Svg_1.Svg, { as: Element, src: icon, type: canvas_expressive_icons_web_1.CanvasIconTypes.Expressive, ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.expressiveIconStencil)({
+                size: (0, Svg_1.resolveSize)(size, canvas_tokens_web_1.component.legacy.expressiveIcon.size),
+                color,
+                accentColor: accent,
+            })) }));
+    },
+});

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { CSSObject } from '@emotion/styled';
+import * as React from 'react';
 import { CSProps } from '@workday/canvas-kit-styling';
 /**
  * @deprecated Interface `GraphicStyles` will be removed in a future version. `grow` prop will be moved inside `GraphicProps`.
@@ -65,8 +65,10 @@ 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;
+            };
         };
     };
 }, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
@@ -78,7 +80,9 @@ export declare const graphicStencil: import("@workday/canvas-kit-styling").Stenc
     shouldMirrorInRTL: {
         true: {
             '&:dir(rtl)': {
-                transform: string;
+                transform: string; /**
+                 * The `alt` attribute for the image. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#usage_notes) for more information.
+                 */
             };
         };
     };

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":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAG1C,OAAO,EAAgB,OAAO,EAAuB,MAAM,6BAA6B,CAAC;AAEzF;;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,OAAO;IAC3C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,GAAG,EAAE;QACH,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC7D;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC,KAAK,CAAC,CAAC;IACvD;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC;CAC5D;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,4BAA2B,aAAa,KAAG,SA4BpE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;wBAWzB,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;gBA0B9B,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,aAAa,QAAS,MAAM,WAKxC,CAAC;AAEF,eAAO,MAAM,OAAO,mFA6BlB,CAAC"}
+{"version":3,"file":"Graphic.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Graphic.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AAIzF;;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,OAAO;IAC3C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,GAAG,EAAE;QACH,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC7D;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC,KAAK,CAAC,CAAC;IACvD;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC;CAC5D;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,4BAA2B,aAAa,KAAG,SA4BpE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;mCA9CzB;;mBAEG;;;;;;;;wBAyDH,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;gBA0B9B,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,aAAa,QAAS,MAAM,WAKxC,CAAC;AAEF,eAAO,MAAM,OAAO,mFA6BlB,CAAC"}

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

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Graphic = exports.base64Encoded = exports.graphicImageStencil = exports.graphicStencil = exports.graphicStyles = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const common_1 = require("@workday/canvas-kit-react/common");
-const Svg_1 = require("./Svg");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const Svg_1 = require("./Svg");
 /**
  * @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.
  */
@@ -42,25 +42,25 @@ exports.graphicStyles = graphicStyles;
  */
 exports.graphicStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: Svg_1.svgStencil,
-    base: { name: "1vnyfk", styles: "box-sizing:border-box;" },
+    base: { name: "1jshg3", styles: "box-sizing:border-box;" },
     modifiers: {
         grow: {
-            true: { name: "3k8ple", styles: "width:100%;--width-svg-8fcab8:100%;" }
+            true: { name: "18b0iv", styles: "width:100%;& svg{width:100%;}" }
         }
     }
-}, "graphic-385fe4");
+}, "graphic-62e4cd");
 exports.graphicImageStencil = (0, canvas_kit_styling_1.createStencil)({
     vars: {
         width: '',
         height: '',
     },
-    base: { name: "2t8kqp", styles: "box-sizing:border-box;width:var(--width-graphic-image-8fedc2);height:var(--height-graphic-image-8fedc2);display:inline-block;& [data-part=\"graphic-img\"]{width:var(--width-graphic-image-8fedc2);height:var(--height-graphic-image-8fedc2);max-width:100%;max-height:100%;}" },
+    base: { name: "336hji", styles: "box-sizing:border-box;width:var(--width-graphic-image-d8fecc);height:var(--height-graphic-image-d8fecc);display:inline-block;& [data-part=\"graphic-img\"]{width:var(--width-graphic-image-d8fecc);height:var(--height-graphic-image-d8fecc);max-width:100%;max-height:100%;}" },
     modifiers: {
         grow: {
-            true: { name: "1m8fwa", styles: "width:100%;& [data-part=\"graphic-img\"]{width:100%;}" }
+            true: { name: "1o1z83", styles: "width:100%;& [data-part=\"graphic-img\"]{width:100%;}" }
         }
     }
-}, "graphic-image-8fedc2");
+}, "graphic-image-d8fecc");
 /**
  * Account for nodejs environments. We use `btoa` which is a web api for encoding data and `Buffer` for nodejs environments.
  * [`btoa` docs](https://developer.mozilla.org/en-US/docs/Web/API/Window/btoa)

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

@@ -1,8 +1,11 @@
-import { CanvasIcon, CanvasIconTypes } from '@workday/design-assets-types';
-import { BoxProps } from '@workday/canvas-kit-react/layout';
-export interface SvgProps extends BoxProps {
-    src: CanvasIcon;
-    type: CanvasIconTypes;
+import { HTMLAttributes } from 'react';
+import { CanvasExpressiveIcon } from '@workday/canvas-expressive-icons-web';
+import { CSProps } from '@workday/canvas-kit-styling';
+import { CanvasIconTypes, CanvasSystemIcon } from '@workday/canvas-system-icons-web';
+import { CanvasIcon as LegacyCanvasIcon, CanvasIconTypes as LegacyIconTypes } from '@workday/design-assets-types';
+export interface SvgProps extends CSProps, HTMLAttributes<HTMLSpanElement> {
+    src: CanvasSystemIcon | CanvasExpressiveIcon | LegacyCanvasIcon;
+    type: CanvasIconTypes | LegacyIconTypes;
     /**
      * If set to `true`, transform the SVG's x-axis to mirror the graphic. Use this if you want to
      * always mirror the icon regardless of the content direction. If the SVG should mirror only when
@@ -32,14 +35,23 @@ export declare const svgStencil: import("@workday/canvas-kit-styling").Stencil<{
         };
     };
 }, {}, {
-    /** sets width of svg element */
+    /** sets width of svg element
+     * @deprecated use size instead or svg selector
+     */
     width: string;
-    /** sets height of svg element */
+    /** sets height of svg element
+     * @deprecated use size instead or svg selector
+     */
     height: string;
     /** sets width and height of svg element */
     size: string;
 }, never, never>;
-/** @deprecated */
-export declare const transformColorNameToToken: (color?: string) => string | undefined;
+/**
+ * Resolves the size of the SVG based on the size token or string / numeric (px) value.
+ * @param size - The size variant or string / numeric (px) value.
+ * @param tokens - The tokens to use to resolve the size.
+ * @returns The resolved size.
+ */
+export declare const resolveSize: <T extends string>(size: string | number | T | undefined, tokens: Record<T, string>) => string;
 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,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;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,UAAU;;;;;;;;;;;;;;IAEnB,gCAAgC;;IAEhC,iCAAiC;;IAEjC,2CAA2C;;gBAyB7C,CAAC;AAEH,kBAAkB;AAClB,eAAO,MAAM,yBAAyB,WAAY,MAAM,uBAUvD,CAAC;AAEF,eAAO,MAAM,GAAG,+EAsBd,CAAC"}
+{"version":3,"file":"Svg.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Svg.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,EAAC,oBAAoB,EAAC,MAAM,sCAAsC,CAAC;AAE1E,OAAO,EAAC,OAAO,EAA8C,MAAM,6BAA6B,CAAC;AACjG,OAAO,EAAC,eAAe,EAAE,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AACnF,OAAO,EACL,UAAU,IAAI,gBAAgB,EAC9B,eAAe,IAAI,eAAe,EACnC,MAAM,8BAA8B,CAAC;AAEtC,MAAM,WAAW,QAAS,SAAQ,OAAO,EAAE,cAAc,CAAC,eAAe,CAAC;IACxE,GAAG,EAAE,gBAAgB,GAAG,oBAAoB,GAAG,gBAAgB,CAAC;IAChE,IAAI,EAAE,eAAe,GAAG,eAAe,CAAC;IACxC;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,UAAU;;;;;;;;;;;;;;IAEnB;;OAEG;;IAEH;;OAEG;;IAEH,2CAA2C;;gBAyB7C,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,WAAW,0FAGrB,MAUF,CAAC;AAEF,eAAO,MAAM,GAAG,+EAoBd,CAAC"}

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

@@ -1,52 +1,56 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Svg = exports.transformColorNameToToken = exports.svgStencil = void 0;
+exports.Svg = exports.resolveSize = exports.svgStencil = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("./utils");
 const common_1 = require("@workday/canvas-kit-react/common");
-const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
-const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 exports.svgStencil = (0, canvas_kit_styling_1.createStencil)({
     vars: {
-        /** sets width of svg element */
+        /** sets width of svg element
+         * @deprecated use size instead or svg selector
+         */
         width: '',
-        /** sets height of svg element */
+        /** sets height of svg element
+         * @deprecated use size instead or svg selector
+         */
         height: '',
         /** sets width and height of svg element */
         size: '',
     },
-    base: { name: "z6w75", styles: "box-sizing:border-box;display:inline-block;> svg{display:block;width:var(--width-svg-8fcab8, var(--size-svg-8fcab8));height:var(--height-svg-8fcab8, var(--size-svg-8fcab8));}" },
+    base: { name: "2tyj31", styles: "box-sizing:border-box;display:inline-block;> svg{display:block;width:var(--width-svg-bca693, var(--size-svg-bca693));height:var(--height-svg-bca693, var(--size-svg-bca693));}" },
     modifiers: {
         shouldMirror: {
-            true: { name: "3nxhfu", styles: "transform:scaleX(-1);" }
+            true: { name: "1hguf5", styles: "transform:scaleX(-1);" }
         },
         shouldMirrorInRTL: {
-            true: { name: "x15e9", styles: "&:dir(rtl){transform:scaleX(-1);}" }
+            true: { name: "28f46m", styles: "&:dir(rtl){transform:scaleX(-1);}" }
         }
     }
-}, "svg-8fcab8");
-/** @deprecated */
-const transformColorNameToToken = (color) => {
-    if (color && color in canvas_tokens_web_1.base) {
-        return (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base[color]);
+}, "svg-bca693");
+/**
+ * Resolves the size of the SVG based on the size token or string / numeric (px) value.
+ * @param size - The size variant or string / numeric (px) value.
+ * @param tokens - The tokens to use to resolve the size.
+ * @returns The resolved size.
+ */
+const resolveSize = (size, tokens) => {
+    if (size) {
+        return size in tokens
+            ? tokens[size]
+            : typeof size === 'number'
+                ? (0, canvas_kit_styling_1.px2rem)(size)
+                : size;
     }
-    if (color === null || color === void 0 ? void 0 : color.startsWith('--')) {
-        return (0, canvas_kit_styling_1.cssVar)(color);
-    }
-    return color;
+    return '';
 };
-exports.transformColorNameToToken = transformColorNameToToken;
+exports.resolveSize = resolveSize;
 exports.Svg = (0, common_1.createComponent)('span')({
     displayName: 'Svg',
     Component: ({ shouldMirror, shouldMirrorInRTL, src, type, ...elemProps }, ref, Element) => {
-        try {
-            (0, utils_1.validateIconType)(src, type);
-        }
-        catch (e) {
-            console.error(e);
+        if ((src === null || src === void 0 ? void 0 : src.type) !== type) {
+            console.error(`Icon type "${src.type}" does not match expected type "${type}"`);
             return null;
         }
-        return ((0, jsx_runtime_1.jsx)(Element, { ref: ref, dangerouslySetInnerHTML: { __html: src.svg }, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.svgStencil)({ shouldMirror, shouldMirrorInRTL })) }));
+        return ((0, jsx_runtime_1.jsx)(Element, { ref: ref, dangerouslySetInnerHTML: { __html: src.svg }, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.svgStencil)({ shouldMirror, shouldMirrorInRTL })) }));
     },
 });

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

@@ -1,93 +1,37 @@
-import { CanvasSystemIcon } from '@workday/design-assets-types';
-import { CSSObject } from '@emotion/styled';
+import { CanvasSystemIcon } from '@workday/canvas-system-icons-web';
+import { CanvasSystemIcon as LegacyCanvasSystemIcon } from '@workday/design-assets-types';
 import { SvgProps } from './Svg';
-/**
- * @deprecated Interface `SystemIconStyles` will be removed in a future version. `accent`, `color`, background props will be moved inside `GraphicProps`.
- */
-export interface SystemIconStyles {
+type SystemSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface SystemIconProps extends Omit<SvgProps, 'src' | 'type'> {
     /**
      * The accent color of the SystemIcon. This overrides `color`.
      */
     accent?: string;
-    /**
-     * The accent color of the SystemIcon on hover. This overrides `colorHover`.
-     * @deprecated `accentHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
-     * ```tsx
-     * '&:hover': {
-     *   [systemIconStencil.vars.accent]: desiredAccentHoverColor
-     * }
-     * ```
-     */
-    accentHover?: string;
     /**
      * The background color of the SystemIcon.
-     * @default transparent
      */
     background?: string;
-    /**
-     * The background color of the SystemIcon on hover.
-     * @default transparent
-     * @deprecated `backgroundHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
-     * ```tsx
-     * '&:hover': {
-     *   [systemIconStencil.vars.background]: desiredBackgroundHoverColor
-     * }
-     * ```
-     */
-    backgroundHover?: string;
     /**
      * The color of the SystemIcon. This defines `accent` and `fill`. `color` may be overwritten by `accent` and `fill`.
-     * @default base.licorice200
      */
     color?: string;
-    /**
-     * The hover color of the SystemIcon. This defines `accentHover` and `fillHover`. `colorHover` may be overwritten by `accentHover` and `fillHover`.
-     * @default base.licorice200
-     * @deprecated `colorHover` is deprecated and will be removed in a future version. We have removed the default hover styles on SystemIcon. Please
-     * use the following instead in your style overrides:
-     * ```tsx
-     * '&:hover': {
-     *   [systemIconStencil.vars.color]: desiredColorHoverColor
-     * }
-     * ```
-     */
-    colorHover?: string;
-    /**
-     * The fill color of the SystemIcon. This overrides `color`.
-     * @deprecated `fill` is deprecated and will be removed in a future version. Please use `color` and specify `accent` color if you want `accent` to be different from `color`.
-     */
-    fill?: string;
-    /**
-     * The fill color of the SystemIcon on hover. This overrides `colorHover`.
-     * @deprecated `fillHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
-     * ```tsx
-     * '&:hover': {
-     *   [systemIconStencil.vars.fill]: desiredFillHoverColor
-     * }
-     * ```
-     */
-    fillHover?: string;
-}
-export interface SystemIconProps extends SystemIconStyles, Omit<SvgProps, 'src' | 'type' | 'fill' | 'background' | 'color'> {
     /**
      * The icon to display from `@workday/canvas-system-icons-web`.
      */
-    icon: CanvasSystemIcon;
+    icon: CanvasSystemIcon | LegacyCanvasSystemIcon;
     /**
-     * The size of the SystemIcon in `px`.
+     * The size of the SystemIcon in size variants or string / numeric (px) values.
+     * **System icon sizes**
+     * - `xxs`: 14px / 0.875rem
+     * - `xs`: 16px / 1rem
+     * - `sm`: 18px / 1.125rem
+     * - `md`: 20px / 1.25rem
+     * - `lg`: 24px / 1.5rem
+     * - `xl`: 32px / 2rem
+     * @default `24px`
      */
-    size?: number | string;
+    size?: SystemSize | string | number;
 }
-/**
- * @deprecated This style utility function is deprecated and will be removed in a future version. We'll track usage over time to prevent unnecessary burden on upgrading. Most of the time, this function is used in conjunction with styling `SystemIcon`. There are a few ways to override the colors used in `SystemIcon`.
- * - Pass props directly to the `SystemIcon` component: `<SystemIcon color={color} {...etc} />
- * - Style overrides using the `systemIconStencil`:
- *   ```tsx
- *   // styling container
- *
- *   ```
- */
-export declare const systemIconStyles: ({ accent, accentHover, background, backgroundHover, color, colorHover, fill, fillHover, }: SystemIconStyles) => CSSObject;
 export declare const systemIconStencil: import("@workday/canvas-kit-styling").Stencil<{}, {}, {
     /**
      * This will set the icon's color (both `.wd-icon-fill` and `.wd-icon-accent` SVG layers). Most
@@ -95,7 +39,13 @@ export declare const systemIconStencil: import("@workday/canvas-kit-styling").St
      * wish to change the accent layer independently, also set the `accentColor` variable
      */
     color: string;
+    /**
+     * This will set the icon's accent color for the `.wd-icon-accent` SVG layer.
+     */
     accentColor: string;
+    /**
+     * This will set the icon's background color for the `.wd-icon-background` SVG layer.
+     */
     backgroundColor: string;
 }, import("@workday/canvas-kit-styling").Stencil<{
     shouldMirror: {
@@ -116,4 +66,5 @@ export declare const systemIconStencil: import("@workday/canvas-kit-styling").St
     size: string;
 }, never, never>, never>;
 export declare const SystemIcon: import("@workday/canvas-kit-react/common").ElementComponent<"span", SystemIconProps>;
+export {};
 //# sourceMappingURL=SystemIcon.d.ts.map

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":"AACA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAI1C,OAAO,EAAM,QAAQ,EAAwC,MAAM,OAAO,CAAC;AAE3E;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;OAUG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,OAAO,CAAC;IAClE;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,8FAS1B,gBAAgB,KAAG,SAmBpB,CAAC;AAiBH,eAAO,MAAM,iBAAiB;IAG1B;;;;OAIG;;;;;;;;;;;;;;;;;;;;;wBAkDL,CAAC;AAEH,eAAO,MAAM,UAAU,sFA6CrB,CAAC"}
+{"version":3,"file":"SystemIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkB,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAEnF,OAAO,EAAC,gBAAgB,IAAI,sBAAsB,EAAC,MAAM,8BAA8B,CAAC;AAExF,OAAO,EAAM,QAAQ,EAA0B,MAAM,OAAO,CAAC;AAE7D,KAAK,UAAU,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,CAAC;IACrE;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,EAAE,gBAAgB,GAAG,sBAAsB,CAAC;IAChD;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;CACrC;AAED,eAAO,MAAM,iBAAiB;IAG1B;;;;OAIG;;IAEH;;OAEG;;IAEH;;OAEG;;;;;;;;;;;;;;;;;;;wBA2BL,CAAC;AAEH,eAAO,MAAM,UAAU,sFAyBrB,CAAC"}

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

@@ -1,52 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SystemIcon = exports.systemIconStencil = exports.systemIconStyles = void 0;
+exports.SystemIcon = exports.systemIconStencil = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
-const design_assets_types_1 = require("@workday/design-assets-types");
 const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const Svg_1 = require("./Svg");
-/**
- * @deprecated This style utility function is deprecated and will be removed in a future version. We'll track usage over time to prevent unnecessary burden on upgrading. Most of the time, this function is used in conjunction with styling `SystemIcon`. There are a few ways to override the colors used in `SystemIcon`.
- * - Pass props directly to the `SystemIcon` component: `<SystemIcon color={color} {...etc} />
- * - Style overrides using the `systemIconStencil`:
- *   ```tsx
- *   // styling container
- *
- *   ```
- */
-const systemIconStyles = ({ accent, accentHover, background = 'transparent', backgroundHover = 'transparent', color = tokens_1.iconColors.standard, colorHover = tokens_1.iconColors.hover, fill, fillHover, }) => ({
-    '& .wd-icon-fill': {
-        fill: (0, common_1.getColor)(fill) || (0, common_1.getColor)(color),
-    },
-    ':hover .wd-icon-fill': {
-        fill: (0, common_1.getColor)(fillHover) || (0, common_1.getColor)(colorHover),
-    },
-    '& .wd-icon-accent, & .wd-icon-accent2': {
-        fill: (0, common_1.getColor)(accent) || (0, common_1.getColor)(color),
-    },
-    ':hover .wd-icon-accent, :hover .wd-icon-accent2': {
-        fill: (0, common_1.getColor)(accentHover) || (0, common_1.getColor)(colorHover),
-    },
-    '& .wd-icon-background': {
-        fill: (0, common_1.getColor)(background),
-    },
-    ':hover .wd-icon-background': {
-        fill: (0, common_1.getColor)(backgroundHover),
-    },
-});
-exports.systemIconStyles = systemIconStyles;
-/**
- * @deprecated These variables are being used for backward compatibility with existing hover props. Please use the following instead:
- * ```tsx
- * '&:hover': {
- *   [systemIconStencil.vars.color]: desiredHoverColor
- * }
- * ```
- */
-const deprecatedSystemIconVars = (0, canvas_kit_styling_1.createVars)({ id: "02493f", args: ["colorHover", "fillHover", "accentHover", "backgroundHover"] });
 exports.systemIconStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: Svg_1.svgStencil,
     vars: {
@@ -56,28 +16,27 @@ exports.systemIconStencil = (0, canvas_kit_styling_1.createStencil)({
          * wish to change the accent layer independently, also set the `accentColor` variable
          */
         color: '',
+        /**
+         * This will set the icon's accent color for the `.wd-icon-accent` SVG layer.
+         */
         accentColor: '',
+        /**
+         * This will set the icon's background color for the `.wd-icon-background` SVG layer.
+         */
         backgroundColor: '',
     },
-    base: { name: "4aqq2i", styles: "box-sizing:border-box;& svg{width:var(--width-svg-8fcab8, var(--size-svg-8fcab8, var(--cnvs-sys-space-x6)));height:var(--height-svg-8fcab8, var(--size-svg-8fcab8, var(--cnvs-sys-space-x6)));}& .wd-icon-fill{fill:var(--color-system-icon-3a4847, var(--cnvs-sys-color-icon-default));}& .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentColor-system-icon-3a4847, var(--color-system-icon-3a4847, var(--cnvs-sys-color-fg-default)));}& .wd-icon-background{fill:var(--backgroundColor-system-icon-3a4847, transparent);}&:where(:hover, .hover) .wd-icon-fill{fill:var(--fillHover-02493f, var(--colorHover-02493f, var(--color-system-icon-3a4847, var(--cnvs-sys-color-fg-default))));}&:where(:hover, .hover) .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentHover-02493f, var(--colorHover-02493f, var(--accentColor-system-icon-3a4847, var(--color-system-icon-3a4847, var(--cnvs-sys-color-fg-default)))));}&:where(:hover, .hover) .wd-icon-background{fill:var(--backgroundHover-02493f, var(--backgroundColor-system-icon-3a4847, transparent));}@media (prefers-contrast: more){.wd-icon-fill, .wd-icon-accent{color:currentColor;fill:currentColor;}}" },
+    base: { name: "37fbs0", styles: "box-sizing:border-box;& svg{width:var(--size-svg-bca693, var(--cnvs-component-system-icon-size-lg, var(--cnvs-sys-space-x6, 1.5rem)));height:var(--size-svg-bca693, var(--cnvs-component-system-icon-size-lg, var(--cnvs-sys-space-x6, 1.5rem)));}.wd-icon .wd-icon-fill{fill:var(--color-system-icon-c9acc3, var(--cnvs-component-system-icon-color-fill, var(--cnvs-sys-color-fg-default, oklch(0.3523 0 0 / 1))));}.wd-icon .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentColor-system-icon-c9acc3, var(--color-system-icon-c9acc3, var(--cnvs-component-system-icon-color-accent, var(--cnvs-sys-color-fg-default, oklch(0.3523 0 0 / 1)))));}.wd-icon .wd-icon-background{fill:var(--backgroundColor-system-icon-c9acc3, transparent);}@media (prefers-contrast: more){.wd-icon .wd-icon-fill, .wd-icon .wd-icon-accent{color:currentColor;fill:currentColor;}}" },
+    // Keeps parent stencil `ME` inferred as `{}` so extending stencils keep correct boolean modifier typings.
     modifiers: {}
-}, "system-icon-3a4847");
+}, "system-icon-c9acc3");
 exports.SystemIcon = (0, common_1.createComponent)('span')({
     displayName: 'SystemIcon',
-    Component: ({ size, background, backgroundHover, color, colorHover, icon, accent, accentHover, fill, fillHover, ...elemProps }, ref, Element) => {
-        return ((0, jsx_runtime_1.jsx)(Svg_1.Svg, { as: Element, src: icon, type: design_assets_types_1.CanvasIconTypes.System, ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, [
-                (0, exports.systemIconStencil)({
-                    size: typeof size === 'number' ? (0, canvas_kit_styling_1.px2rem)(size) : size,
-                    color: (0, Svg_1.transformColorNameToToken)(fill || color),
-                    accentColor: (0, Svg_1.transformColorNameToToken)(accent || color),
-                    backgroundColor: (0, Svg_1.transformColorNameToToken)(background),
-                }),
-                {
-                    [deprecatedSystemIconVars.colorHover]: colorHover && (0, Svg_1.transformColorNameToToken)(colorHover),
-                    [deprecatedSystemIconVars.fillHover]: fillHover && (0, Svg_1.transformColorNameToToken)(fillHover),
-                    [deprecatedSystemIconVars.accentHover]: accentHover && (0, Svg_1.transformColorNameToToken)(accentHover),
-                    [deprecatedSystemIconVars.backgroundHover]: backgroundHover && (0, Svg_1.transformColorNameToToken)(backgroundHover),
-                },
-            ]) }));
+    Component: ({ accent, background, color, icon, size, ...elemProps }, ref, Element) => {
+        return ((0, jsx_runtime_1.jsx)(Svg_1.Svg, { as: Element, src: icon, type: canvas_system_icons_web_1.CanvasIconTypes.System, ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.systemIconStencil)({
+                size: (0, Svg_1.resolveSize)(size, canvas_tokens_web_1.component.legacy.systemIcon.size),
+                color,
+                accentColor: accent,
+                backgroundColor: background,
+            })) }));
     },
 });