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

package/button/lib/ExternalHyperlink.tsx

@@ -1,7 +1,7 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {calc, createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
-import {extLinkIcon} from '@workday/canvas-system-icons-web';
+import {externalLinkIcon} from '@workday/canvas-system-icons-web';
 import {system} from '@workday/canvas-tokens-web';
 
 import {HyperlinkProps, hyperlinkStencil} from './Hyperlink';
@@ -62,7 +62,7 @@ export const ExternalHyperlink = createComponent('a')({
     >
       <span data-part="external-hyperlink-children">{children}</span>
       <SystemIcon
-        icon={extLinkIcon}
+        icon={externalLinkIcon}
         role="img"
         aria-label={iconLabel}
         {...externalHyperlinkStencil.parts.externalHyperlinkIcon}

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

@@ -32,7 +32,7 @@ exports.buttonStencil = (0, canvas_kit_styling_1.createStencil)({
         opacity: '',
         borderRadius: '',
     },
-    base: { name: "wfp2r", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-150));font-weight:var(--cnvs-sys-font-weight-bold);background-color:var(--background-5bdf1f, var(--background-button-b66707, transparent));color:var(--label-5bdf1f, var(--label-button-b66707, var(--cnvs-sys-color-fg-strong)));border-width:0.0625rem;border-style:solid;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2));border-color:var(--border-5bdf1f, var(--border-button-b66707, transparent));cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;outline:0.125rem transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--borderRadius-5bdf1f, var(--borderRadius-button-b66707, var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round))));position:relative;vertical-align:middle;overflow:hidden;--color-system-icon-f4b83b:var(--icon-5bdf1f, var(--cnvs-sys-color-fg-strong));transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active, &.disabled{cursor:default;box-shadow:none;opacity:var(--opacity-5bdf1f, var(--opacity-button-b66707, var(--cnvs-sys-opacity-full)));}&:focus-visible, &.focus{background-color:var(--background-692b2b, var(--background-button-b66707, transparent));border-color:var(--border-692b2b, var(--border-button-b66707, transparent));color:var(--label-692b2b, var(--label-button-b66707, var(--cnvs-sys-color-fg-strong)));--color-system-icon-f4b83b:var(--icon-692b2b, var(--cnvs-sys-color-fg-strong));outline:0.125rem solid transparent;outline-offset:0.125rem;box-shadow:0 0 0 0.125rem var(--boxShadowInner-692b2b, var(--boxShadowInner-button-b66707, var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)))),0 0 0 0.25rem var(--boxShadowOuter-692b2b, var(--boxShadowOuter-button-b66707, var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline))));}&:hover, &.hover{background-color:var(--background-36ab3e, var(--background-button-b66707, var(--cnvs-sys-color-bg-contrast-strong)));border-color:var(--border-36ab3e, var(--border-button-b66707, transparent));color:var(--label-36ab3e, var(--label-button-b66707, var(--cnvs-sys-color-fg-stronger)));--color-system-icon-f4b83b:var(--icon-36ab3e, var(--cnvs-sys-color-fg-stronger));}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--background-cbad69, var(--background-button-b66707, transparent));border-color:var(--border-cbad69, var(--border-button-b66707, transparent));color:var(--label-cbad69, var(--label-button-b66707, var(--cnvs-sys-color-fg-strong)));--color-system-icon-f4b83b:var(--icon-cbad69, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{background-color:var(--background-d559f9, var(--background-button-b66707, transparent));border-color:var(--border-d559f9, var(--border-button-b66707, transparent));color:var(--label-d559f9, var(--label-button-b66707, var(--cnvs-sys-color-fg-strong)));--color-system-icon-f4b83b:var(--icon-d559f9, currentColor);}@media (prefers-contrast: more){&[aria-pressed=\"true\"]{outline:0.125rem solid transparent;outline-offset:-0.0625rem;}&[aria-pressed=\"true\"]:focus-visible, &[aria-pressed=\"true\"].focus{outline:0.25rem double transparent;outline-offset:0;}}svg{pointer-events:none;}" },
+    base: { name: "wfp2r", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-150));font-weight:var(--cnvs-sys-font-weight-bold);background-color:var(--background-5bdf1f, var(--background-button-b66707, transparent));color:var(--label-5bdf1f, var(--label-button-b66707, var(--cnvs-sys-color-fg-strong)));border-width:0.0625rem;border-style:solid;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2));border-color:var(--border-5bdf1f, var(--border-button-b66707, transparent));cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;outline:0.125rem transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--borderRadius-5bdf1f, var(--borderRadius-button-b66707, var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round))));position:relative;vertical-align:middle;overflow:hidden;--color-system-icon-2a31cf:var(--icon-5bdf1f, var(--cnvs-sys-color-fg-strong));transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active, &.disabled{cursor:default;box-shadow:none;opacity:var(--opacity-5bdf1f, var(--opacity-button-b66707, var(--cnvs-sys-opacity-full)));}&:focus-visible, &.focus{background-color:var(--background-692b2b, var(--background-button-b66707, transparent));border-color:var(--border-692b2b, var(--border-button-b66707, transparent));color:var(--label-692b2b, var(--label-button-b66707, var(--cnvs-sys-color-fg-strong)));--color-system-icon-2a31cf:var(--icon-692b2b, var(--cnvs-sys-color-fg-strong));outline:0.125rem solid transparent;outline-offset:0.125rem;box-shadow:0 0 0 0.125rem var(--boxShadowInner-692b2b, var(--boxShadowInner-button-b66707, var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)))),0 0 0 0.25rem var(--boxShadowOuter-692b2b, var(--boxShadowOuter-button-b66707, var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline))));}&:hover, &.hover{background-color:var(--background-36ab3e, var(--background-button-b66707, var(--cnvs-sys-color-bg-contrast-strong)));border-color:var(--border-36ab3e, var(--border-button-b66707, transparent));color:var(--label-36ab3e, var(--label-button-b66707, var(--cnvs-sys-color-fg-stronger)));--color-system-icon-2a31cf:var(--icon-36ab3e, var(--cnvs-sys-color-fg-stronger));}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--background-cbad69, var(--background-button-b66707, transparent));border-color:var(--border-cbad69, var(--border-button-b66707, transparent));color:var(--label-cbad69, var(--label-button-b66707, var(--cnvs-sys-color-fg-strong)));--color-system-icon-2a31cf:var(--icon-cbad69, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{background-color:var(--background-d559f9, var(--background-button-b66707, transparent));border-color:var(--border-d559f9, var(--border-button-b66707, transparent));color:var(--label-d559f9, var(--label-button-b66707, var(--cnvs-sys-color-fg-strong)));--color-system-icon-2a31cf:var(--icon-d559f9, currentColor);}@media (prefers-contrast: more){&[aria-pressed=\"true\"]{outline:0.125rem solid transparent;outline-offset:-0.0625rem;}&[aria-pressed=\"true\"]:focus-visible, &[aria-pressed=\"true\"].focus{outline:0.25rem double transparent;outline-offset:0;}}svg{pointer-events:none;}" },
     modifiers: {
         /**
          * Button modifiers that will overwrite the base styles of Buttons.

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

@@ -13,13 +13,13 @@ exports.externalHyperlinkStencil = (0, canvas_kit_styling_1.createStencil)({
     parts: {
         externalHyperlinkIcon: 'external-hyperlink-icon',
     },
-    base: { name: "bbmxl", styles: "box-sizing:border-box;[data-part=\"external-hyperlink-icon\"]{vertical-align:text-top;--color-system-icon-5c23c4:currentColor;--size-v14-svg-d754ad:1em;width:calc(1em - 0.0625rem);min-width:calc(var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4)) - 0.0625rem);margin-inline-start:calc(var(--cnvs-sys-space-x1) - 0.125rem);& > svg{min-width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4));min-height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4));}:dir(rtl){transform:rotate(270deg);}}" }
-}, "external-hyperlink-a82b92");
+    base: { name: "18p31j", styles: "box-sizing:border-box;[data-part=\"external-hyperlink-icon\"]{vertical-align:text-top;--color-system-icon-5c23c4:currentColor;--size-v14-svg-d754ad:1em;width:calc(1em - 0.0625rem);min-width:calc(var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4)) - 0.0625rem);margin-inline-start:calc(var(--cnvs-sys-space-x1) - 0.125rem);& > svg{min-width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4));min-height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4));}:dir(rtl){transform:rotate(270deg);}}" }
+}, "external-hyperlink-b3d163");
 /**
  * `ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the
  * link on a dark or colorful background such as `blueberry400`.
  */
 exports.ExternalHyperlink = (0, common_1.createComponent)('a')({
     displayName: 'ExternalHyperlink',
-    Component: ({ children, iconLabel, variant, ...elemProps }, ref, Element) => ((0, jsx_runtime_1.jsxs)(Element, { ref: ref, target: "_blank", rel: "noreferrer", ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.externalHyperlinkStencil)({ variant })), children: [(0, jsx_runtime_1.jsx)("span", { "data-part": "external-hyperlink-children", children: children }), (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.extLinkIcon, role: "img", "aria-label": iconLabel, ...exports.externalHyperlinkStencil.parts.externalHyperlinkIcon })] })),
+    Component: ({ children, iconLabel, variant, ...elemProps }, ref, Element) => ((0, jsx_runtime_1.jsxs)(Element, { ref: ref, target: "_blank", rel: "noreferrer", ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.externalHyperlinkStencil)({ variant })), children: [(0, jsx_runtime_1.jsx)("span", { "data-part": "external-hyperlink-children", children: children }), (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.externalLinkIcon, role: "img", "aria-label": iconLabel, ...exports.externalHyperlinkStencil.parts.externalHyperlinkIcon })] })),
 });

package/dist/commonjs/button/lib/parts/ButtonLabelIcon.js

@@ -10,10 +10,10 @@ const buttonIconStencil = (0, canvas_kit_styling_1.createStencil)({
     base: { name: "g4xvt", styles: "box-sizing:border-box;display:inline-block;" },
     modifiers: {
         size: {
-            extraSmall: { name: "216oag", styles: "--size-svg-2af90b:var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4));" },
-            small: { name: "4itlb", styles: "--size-svg-2af90b:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5));" },
-            medium: { name: "2rzjzg", styles: "--size-svg-2af90b:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5));" },
-            large: { name: "45e321", styles: "--size-svg-2af90b:var(--cnvs-component-system-icon-size-lg, var(--cnvs-sys-space-x6));" }
+            extraSmall: { name: "216oag", styles: "--size-svg-bca693:var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4));" },
+            small: { name: "4itlb", styles: "--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5));" },
+            medium: { name: "2rzjzg", styles: "--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5));" },
+            large: { name: "45e321", styles: "--size-svg-bca693:var(--cnvs-component-system-icon-size-lg, var(--cnvs-sys-space-x6));" }
         }
     }
 }, "button-icon-e1f69e");

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

@@ -74,7 +74,11 @@ export declare const accentIconStencil: import("@workday/canvas-kit-styling").St
         };
     };
 }, {}, {
-    width: string;
+    width: string; /**
+     * If true, set the background fill of the AccentIcon to `transparent`.
+     * If false, set the background fill of the AccentIcon to `system.color.bg.alt.soft`.
+     * @default false
+     */
     height: string;
     size: string;
 }, never, never>, never>;

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":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAG1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAIlE,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAE/E,OAAO,EAAM,QAAQ,EAAa,MAAM,OAAO,CAAC;AAEhD;;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;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,CAAC;IACrE;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;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;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAuB5B,CAAC;AAeH;;GAEG;AACH,eAAO,MAAM,UAAU,sFAiCrB,CAAC"}
+{"version":3,"file":"AccentIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AccentIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAG1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAIlE,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAE/E,OAAO,EAAM,QAAQ,EAAa,MAAM,OAAO,CAAC;AAEhD;;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;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,CAAC;IACrE;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;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;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;mBAnC5B;;;;OAIG;;;wBAsDH,CAAC;AAgBH;;GAEG;AACH,eAAO,MAAM,UAAU,sFAiCrB,CAAC"}

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

@@ -28,7 +28,7 @@ exports.accentIconStencil = (0, canvas_kit_styling_1.createStencil)({
     vars: {
         color: '',
     },
-    base: { name: "3q6zwf", styles: "box-sizing:border-box;--size-svg-2af90b:3.5rem;& .color-500{fill:var(--color-accent-icon-66e130, var(--cnvs-sys-color-bg-primary-strong));}& .french-vanilla-100{fill:var(--cnvs-sys-color-bg-default);}" },
+    base: { name: "3q6zwf", styles: "box-sizing:border-box;--size-svg-bca693:3.5rem;& .color-500{fill:var(--color-accent-icon-66e130, var(--cnvs-sys-color-bg-primary-strong));}& .french-vanilla-100{fill:var(--cnvs-sys-color-bg-default);}" },
     modifiers: {
         transparent: {
             true: { name: "1sq2ty", styles: "& .french-vanilla-100{fill:transparent;}" }
@@ -37,8 +37,9 @@ exports.accentIconStencil = (0, canvas_kit_styling_1.createStencil)({
 }, "accent-icon-66e130");
 /** @deprecated Deprecated in v11 */
 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]);
+    const { legacy, ...baseTokens } = canvas_tokens_web_1.base;
+    if (color && color in baseTokens) {
+        return (0, canvas_kit_styling_1.cssVar)(baseTokens[color]);
     }
     if (color === null || color === void 0 ? void 0 : color.startsWith('--')) {
         return (0, canvas_kit_styling_1.cssVar)(color);

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":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAG1C,OAAO,EAAC,aAAa,EAAsB,MAAM,kCAAkC,CAAC;AAGpF,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAE/E,OAAO,EAAM,QAAQ,EAAa,MAAM,OAAO,CAAC;AAEhD;;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;;GAEG;AACH,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,QAAQ,EAAE,cAAc,GAAG,mBAAmB,GAAG,IAAI,CAAC;IAC7D;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA6B5B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,UAAU;;CA4BrB,CAAC"}
+{"version":3,"file":"AppletIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AppletIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAG1C,OAAO,EAAC,aAAa,EAAsB,MAAM,kCAAkC,CAAC;AAGpF,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAE/E,OAAO,EAAM,QAAQ,EAAa,MAAM,OAAO,CAAC;AAIhD;;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;;GAEG;AACH,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,QAAQ,EAAE,cAAc,GAAG,mBAAmB,GAAG,IAAI,CAAC;IAC7D;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA6B5B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,UAAU;;CA4BrB,CAAC"}

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

@@ -8,6 +8,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const design_assets_types_1 = require("@workday/design-assets-types");
 const Svg_1 = require("./Svg");
+const { legacy, ...base } = canvas_tokens_web_1.base;
 /**
  * @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.
  */
@@ -58,8 +59,8 @@ exports.appletIconStencil = (0, canvas_kit_styling_1.createStencil)({
         color400: '',
         color500: '',
     },
-    base: { name: "22jqnb", styles: "box-sizing:border-box;--size-svg-2af90b:5.75rem;& .color-100{fill:var(--cnvs-sys-color-fg-inverse);}& .color-200{fill:var(--color200-applet-icon-52344d, var(--cnvs-base-palette-blue-200));}& .color-300{fill:var(--color300-applet-icon-52344d, var(--cnvs-base-palette-blue-400));}& .color-400{fill:var(--color400-applet-icon-52344d, var(--cnvs-base-palette-blue-600));}& .color-400-alpha-20{fill:var(--color400-applet-icon-52344d, var(--cnvs-base-palette-blue-600));}& .color-500{fill:var(--color500-applet-icon-52344d, var(--cnvs-base-palette-blue-700));}" }
-}, "applet-icon-52344d");
+    base: { name: "y6pw8", styles: "box-sizing:border-box;--size-svg-bca693:5.75rem;& .color-100{fill:var(--cnvs-sys-color-fg-inverse);}& .color-200{fill:var(--color200-applet-icon-e065f0, var(--cnvs-base-palette-blue-200));}& .color-300{fill:var(--color300-applet-icon-e065f0, var(--cnvs-base-palette-blue-400));}& .color-400{fill:var(--color400-applet-icon-e065f0, var(--cnvs-base-palette-blue-600));}& .color-400-alpha-20{fill:var(--color400-applet-icon-e065f0, var(--cnvs-base-palette-blue-600));}& .color-500{fill:var(--color500-applet-icon-e065f0, var(--cnvs-base-palette-blue-700));}" }
+}, "applet-icon-e065f0");
 /**
  *  @deprecated ⚠️ `AppletIcon` is deprecated and will be removed in a future major version. Deprecated in v15.0.0.
  */
@@ -67,10 +68,10 @@ exports.AppletIcon = (0, common_1.createComponent)('span')({
     displayName: 'AppletIcon',
     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`],
+            color200: base[`${color}200`],
+            color300: base[`${color}300`],
+            color400: base[`${color}400`],
+            color500: base[`${color}500`],
         };
         return ((0, jsx_runtime_1.jsx)(Svg_1.Svg, { src: icon, type: design_assets_types_1.CanvasIconTypes.Applet, as: Element, ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, [
                 (0, exports.appletIconStencil)({

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

@@ -19,7 +19,7 @@ exports.expressiveIconStencil = (0, canvas_kit_styling_1.createStencil)({
          */
         accentColor: '',
     },
-    base: { name: "qomoy", styles: "box-sizing:border-box;& svg{width:var(--size-svg-2af90b, var(--cnvs-component-expressive-icon-size-md, 3.5rem));height:var(--size-svg-2af90b, var(--cnvs-component-expressive-icon-size-md, 3.5rem));}.wd-expressive .wd-expressive-fill{fill:var(--color-expressive-icon-4db5e5, var(--cnvs-component-expressive-icon-color-fill));}.wd-expressive .wd-expressive-accent{fill:var(--accentColor-expressive-icon-4db5e5, var(--cnvs-component-expressive-icon-color-accent));}@media (prefers-contrast: more){.wd-expressive .wd-expressive-fill{color:currentColor;fill:currentColor;}.wd-expressive .wd-expressive-accent{color:transparent;fill:transparent;}}" }
+    base: { name: "qomoy", styles: "box-sizing:border-box;& svg{width:var(--size-svg-bca693, var(--cnvs-component-expressive-icon-size-md, 3.5rem));height:var(--size-svg-bca693, var(--cnvs-component-expressive-icon-size-md, 3.5rem));}.wd-expressive .wd-expressive-fill{fill:var(--color-expressive-icon-4db5e5, var(--cnvs-component-expressive-icon-color-fill));}.wd-expressive .wd-expressive-accent{fill:var(--accentColor-expressive-icon-4db5e5, var(--cnvs-component-expressive-icon-color-accent));}@media (prefers-contrast: more){.wd-expressive .wd-expressive-fill{color:currentColor;fill:currentColor;}.wd-expressive .wd-expressive-accent{color:transparent;fill:transparent;}}" }
 }, "expressive-icon-4db5e5");
 exports.ExpressiveIcon = (0, common_1.createComponent)('span')({
     displayName: 'ExpressiveIcon',

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

@@ -80,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,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;;;;;;;;;;;;;;;;;;;;;;;;;;wBAazB,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/Svg.d.ts

@@ -2,10 +2,10 @@ 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 } from '@workday/design-assets-types';
+import { CanvasIcon as LegacyCanvasIcon, CanvasIconTypes as LegacyIconTypes } from '@workday/design-assets-types';
 export interface SvgProps extends CSProps, HTMLAttributes<HTMLSpanElement> {
-    src: CanvasSystemIcon | CanvasExpressiveIcon | CanvasIcon;
-    type: CanvasIconTypes;
+    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

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,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,EAAC,UAAU,EAAC,MAAM,8BAA8B,CAAC;AAExD,MAAM,WAAW,QAAS,SAAQ,OAAO,EAAE,cAAc,CAAC,eAAe,CAAC;IACxE,GAAG,EAAE,gBAAgB,GAAG,oBAAoB,GAAG,UAAU,CAAC;IAC1D,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;;OAEG;;IAEH;;OAEG;;IAEH,2CAA2C;;gBAyB7C,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,WAAW,0FAGrB,MAUF,CAAC;AAEF,eAAO,MAAM,GAAG,+EAoBd,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

@@ -17,16 +17,16 @@ exports.svgStencil = (0, canvas_kit_styling_1.createStencil)({
         /** sets width and height of svg element */
         size: '',
     },
-    base: { name: "29ffbs", styles: "box-sizing:border-box;display:inline-block;> svg{display:block;width:var(--width-svg-2af90b, var(--size-svg-2af90b));height:var(--height-svg-2af90b, var(--size-svg-2af90b));}" },
+    base: { name: "39le0l", 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: "34necu", styles: "transform:scaleX(-1);" }
+            true: { name: "wfmwu", styles: "transform:scaleX(-1);" }
         },
         shouldMirrorInRTL: {
-            true: { name: "2g4so", styles: "&:dir(rtl){transform:scaleX(-1);}" }
+            true: { name: "1rrkpt", styles: "&:dir(rtl){transform:scaleX(-1);}" }
         }
     }
-}, "svg-2af90b");
+}, "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.

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

@@ -1,4 +1,5 @@
 import { CanvasSystemIcon } from '@workday/canvas-system-icons-web';
+import { CanvasSystemIcon as LegacyCanvasSystemIcon } from '@workday/design-assets-types';
 import { SvgProps } from './Svg';
 type SystemSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface SystemIconProps extends Omit<SvgProps, 'src' | 'type'> {
@@ -17,7 +18,7 @@ export interface SystemIconProps extends Omit<SvgProps, 'src' | 'type'> {
     /**
      * The icon to display from `@workday/canvas-system-icons-web`.
      */
-    icon: CanvasSystemIcon;
+    icon: CanvasSystemIcon | LegacyCanvasSystemIcon;
     /**
      * The size of the SystemIcon in size variants or string / numeric (px) values.
      * **System icon sizes**

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,EAAkB,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAGnF,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,CAAC;IACvB;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;CACrC;AAED,eAAO,MAAM,iBAAiB;IAG1B;;;;OAIG;;IAEH;;OAEG;;IAEH;;OAEG;;;;;;;;;;;;;;;;;;;wBA+BL,CAAC;AAEH,eAAO,MAAM,UAAU,sFAyBrB,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;;;;;;;;;;;;;;;;;;;wBA+BL,CAAC;AAEH,eAAO,MAAM,UAAU,sFAyBrB,CAAC"}

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

@@ -25,10 +25,10 @@ exports.systemIconStencil = (0, canvas_kit_styling_1.createStencil)({
          */
         backgroundColor: '',
     },
-    base: { name: "1j633o", styles: "box-sizing:border-box;& svg{width:var(--size-svg-2af90b, var(--cnvs-component-system-icon-size-lg, 1.5rem));height:var(--size-svg-2af90b, var(--cnvs-component-system-icon-size-lg, 1.5rem));}.wd-icon .wd-icon-fill{fill:var(--color-system-icon-f4b83b, var(--cnvs-component-system-icon-color-fill));}.wd-icon .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentColor-system-icon-f4b83b, var(--color-system-icon-f4b83b, var(--cnvs-component-system-icon-color-accent)));}.wd-icon .wd-icon-background{fill:var(--backgroundColor-system-icon-f4b83b, transparent);}@media (prefers-contrast: more){.wd-icon .wd-icon-fill, .wd-icon .wd-icon-accent{color:currentColor;fill:currentColor;}}" },
+    base: { name: "2fw5zg", styles: "box-sizing:border-box;& svg{width:var(--size-svg-bca693, var(--cnvs-component-system-icon-size-lg, 1.5rem));height:var(--size-svg-bca693, var(--cnvs-component-system-icon-size-lg, 1.5rem));}.wd-icon .wd-icon-fill{fill:var(--color-system-icon-2a31cf, var(--cnvs-component-system-icon-color-fill));}.wd-icon .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentColor-system-icon-2a31cf, var(--color-system-icon-2a31cf, var(--cnvs-component-system-icon-color-accent)));}.wd-icon .wd-icon-background{fill:var(--backgroundColor-system-icon-2a31cf, 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-f4b83b");
+}, "system-icon-2a31cf");
 exports.SystemIcon = (0, common_1.createComponent)('span')({
     displayName: 'SystemIcon',
     Component: ({ accent, background, color, icon, size, ...elemProps }, ref, Element) => {

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

@@ -1,5 +1,6 @@
 import { CSProps } from '@workday/canvas-kit-styling';
 import { CanvasSystemIcon } from '@workday/canvas-system-icons-web';
+import { CanvasSystemIcon as LegacyCanvasSystemIcon } from '@workday/design-assets-types';
 export declare enum SystemIconCircleSize {
     xs = 16,
     s = 24,
@@ -10,9 +11,9 @@ export declare enum SystemIconCircleSize {
 }
 type SystemIconCircleCommonProps = {
     /**
-     * The icon to display from `@workday/canvas-accent-icons-web`.
+     * The icon to display from `@workday/canvas-system-icons-web`.
      */
-    icon: CanvasSystemIcon;
+    icon: CanvasSystemIcon | LegacyCanvasSystemIcon;
     /**
      * The size token of the SystemIconCircle.
      * @default SystemIconCircleSize.l

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

@@ -1 +1 @@
-{"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,OAAO,EAMR,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAOlE,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAcD,KAAK,2BAA2B,GAAG;IACjC;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC9C;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,OAAO,CAAC;AAEZ;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAC7B,CAAC,2BAA2B,GAAG;IAAC,UAAU,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAC,CAAC,GACnE,CAAC,2BAA2B,GAAG;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAExE,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;gBAgDlC,CAAC;AAEH,eAAO,MAAM,gBAAgB,4FAsC3B,CAAC"}
+{"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,OAAO,EAMR,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAElE,OAAO,EAAC,gBAAgB,IAAI,sBAAsB,EAAC,MAAM,8BAA8B,CAAC;AAMxF,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAcD,KAAK,2BAA2B,GAAG;IACjC;;OAEG;IACH,IAAI,EAAE,gBAAgB,GAAG,sBAAsB,CAAC;IAChD;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC9C;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,OAAO,CAAC;AAEZ;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAC7B,CAAC,2BAA2B,GAAG;IAAC,UAAU,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAC,CAAC,GACnE,CAAC,2BAA2B,GAAG;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAExE,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;gBAgDlC,CAAC;AAEH,eAAO,MAAM,gBAAgB,4FAsC3B,CAAC"}

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

@@ -34,13 +34,13 @@ exports.systemIconCircleStencil = (0, canvas_kit_styling_1.createStencil)({
         color: '',
         size: '',
     },
-    base: { name: "3i8g98", styles: "box-sizing:border-box;background:var(--background-system-icon-circle-20bf5c, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft)));display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round));overflow:hidden;width:var(--size-system-icon-circle-20bf5c, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10)));height:var(--size-system-icon-circle-20bf5c, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10)));--size-svg-2af90b:calc(var(--size-system-icon-circle-20bf5c, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10))) * 0.625);--color-system-icon-f4b83b:var(--color-system-icon-circle-20bf5c);& img{width:100%;height:100%;}" },
+    base: { name: "16tjc7", styles: "box-sizing:border-box;background:var(--background-system-icon-circle-ca476e, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft)));display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round));overflow:hidden;width:var(--size-system-icon-circle-ca476e, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10)));height:var(--size-system-icon-circle-ca476e, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10)));--size-svg-bca693:calc(var(--size-system-icon-circle-ca476e, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10))) * 0.625);--color-system-icon-2a31cf:var(--color-system-icon-circle-ca476e);& img{width:100%;height:100%;}" },
     modifiers: {
         inverse: {
-            true: { name: "360jpw", styles: "background:var(--background-system-icon-circle-20bf5c, var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-primary-default)));--color-system-icon-f4b83b:var(--color-system-icon-circle-20bf5c, var(--cnvs-sys-color-fg-inverse));" }
+            true: { name: "4d7llj", styles: "background:var(--background-system-icon-circle-ca476e, var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-primary-default)));--color-system-icon-2a31cf:var(--color-system-icon-circle-ca476e, var(--cnvs-sys-color-fg-inverse));" }
         }
     }
-}, "system-icon-circle-20bf5c");
+}, "system-icon-circle-ca476e");
 exports.SystemIconCircle = (0, common_1.createComponent)('span')({
     displayName: 'SystemIconCircle',
     Component: ({ background, color, size, icon, shouldMirror, shouldMirrorInRTL, inverse, ...elemProps }, ref, Element) => {

package/dist/commonjs/side-panel/lib/SidePanelToggleButton.d.ts

@@ -64,7 +64,9 @@ export declare const useSidePanelToggleButton: import("@workday/canvas-kit-react
         panelId: string;
         labelId: string;
         transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
-        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates; /**
+         * Provides an accessible label to the button. This text **should not** convey visual state but rather what it does like "control data panel."
+         */
         origin: "end" | "start";
         onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
     };
@@ -84,7 +86,9 @@ export declare const SidePanelToggleButton: import("@workday/canvas-kit-react/co
         panelId: string;
         labelId: string;
         transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
-        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates; /**
+         * Provides an accessible label to the button. This text **should not** convey visual state but rather what it does like "control data panel."
+         */
         origin: "end" | "start";
         onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
     };

package/dist/commonjs/side-panel/lib/SidePanelToggleButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelToggleButton.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanelToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAChE,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAU,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAOxE,MAAM,WAAW,0BAA2B,SAAQ,YAAY,CAAC,OAAO,cAAc,CAAC;IACrF;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAsGvC,CAAC;AAEH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;EAMnC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;EA+CjC,CAAC"}
+{"version":3,"file":"SidePanelToggleButton.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanelToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAChE,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAU,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAOxE,MAAM,WAAW,0BAA2B,SAAQ,YAAY,CAAC,OAAO,cAAc,CAAC;IACrF;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAsGvC,CAAC;AAEH,eAAO,MAAM,wBAAwB;;;;;yFAnHnC;;WAEG;;;;;;;;;;;;;;EAuHH,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;yFA3HhC;;WAEG;;;;;;;;;;EAwKJ,CAAC"}

package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js

@@ -10,38 +10,38 @@ const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const useSidePanelModel_1 = require("./useSidePanelModel");
 exports.sidePanelToggleButtonStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "hlh4f", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6));width:var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x8));inset-inline-end:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));" },
+    base: { name: "3a8or0", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6));width:var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x8));inset-inline-end:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));" },
     modifiers: {
         state: {
-            collapsing: { name: "11e02h", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
-            collapsed: { name: "21myyu", styles: "margin:auto;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
-            expanded: { name: "3bc4ff", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
-            expanding: { name: "3jdzk3", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
+            collapsing: { name: "3t06d", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            collapsed: { name: "3olm9d", styles: "margin:auto;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            expanded: { name: "1vyxp8", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
+            expanding: { name: "mzm9w", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
         },
         origin: {
-            start: { name: "45375r", styles: "" },
-            end: { name: "4bbju", styles: "transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" }
+            start: { name: "b910p", styles: "" },
+            end: { name: "48gumm", styles: "transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" }
         }
     },
     compound: [
         {
             modifiers: { state: 'collapsed', origin: 'end' },
-            styles: { name: "2gssqq", styles: "transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
+            styles: { name: "2xv750", styles: "transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
         },
         {
             modifiers: { state: 'collapsing', origin: 'end' },
-            styles: { name: "8bwyj", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));:dir(rtl){transform:scaleX(1);inset-inline-end:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));}" }
+            styles: { name: "17ywis", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));:dir(rtl){transform:scaleX(1);inset-inline-end:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));}" }
         },
         {
             modifiers: { state: 'expanded', origin: 'end' },
-            styles: { name: "1bd77z", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));}" }
+            styles: { name: "36emce", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));}" }
         },
         {
             modifiers: { state: 'expanding', origin: 'end' },
-            styles: { name: "2nygsg", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));}" }
+            styles: { name: "13en60", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));}" }
         }
     ]
-}, "side-panel-toggle-button-355ace");
+}, "side-panel-toggle-button-1db1a4");
 exports.useSidePanelToggleButton = (0, common_1.createElemPropsHook)(useSidePanelModel_1.useSidePanelModel)(({ state }) => {
     return {
         'aria-controls': state.panelId,
@@ -53,7 +53,7 @@ exports.SidePanelToggleButton = (0, common_1.createSubcomponent)('button')({
     displayName: 'SidePanel.ToggleButton',
     modelHook: useSidePanelModel_1.useSidePanelModel,
     elemPropsHook: exports.useSidePanelToggleButton,
-})(({ variant = undefined, icon = canvas_system_icons_web_1.transformationImportIcon, tooltipTextExpand = 'Expand View', tooltipTextCollapse = 'Collapse View', tooltipProps, tooltipText, ...elemProps }, Element, model) => {
+})(({ variant = undefined, icon = canvas_system_icons_web_1.extendIcon, tooltipTextExpand = 'Expand View', tooltipTextCollapse = 'Collapse View', tooltipProps, tooltipText, ...elemProps }, Element, model) => {
     return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { type: "muted", ...tooltipProps, title: tooltipText ||
             (model.state.transitionState === 'expanded' ? tooltipTextCollapse : tooltipTextExpand), children: (0, jsx_runtime_1.jsx)(button_1.TertiaryButton, { icon: icon, as: Element, variant: variant, "aria-label": tooltipText, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.sidePanelToggleButtonStencil)({
                 state: model.state.transitionState,

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

@@ -29,7 +29,7 @@ export const buttonStencil = createStencil({
         opacity: '',
         borderRadius: '',
     },
-    base: { name: "wfp2r", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-150));font-weight:var(--cnvs-sys-font-weight-bold);background-color:var(--background-5bdf1f, var(--background-button-b66707, transparent));color:var(--label-5bdf1f, var(--label-button-b66707, var(--cnvs-sys-color-fg-strong)));border-width:0.0625rem;border-style:solid;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2));border-color:var(--border-5bdf1f, var(--border-button-b66707, transparent));cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;outline:0.125rem transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--borderRadius-5bdf1f, var(--borderRadius-button-b66707, var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round))));position:relative;vertical-align:middle;overflow:hidden;--color-system-icon-f4b83b:var(--icon-5bdf1f, var(--cnvs-sys-color-fg-strong));transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active, &.disabled{cursor:default;box-shadow:none;opacity:var(--opacity-5bdf1f, var(--opacity-button-b66707, var(--cnvs-sys-opacity-full)));}&:focus-visible, &.focus{background-color:var(--background-692b2b, var(--background-button-b66707, transparent));border-color:var(--border-692b2b, var(--border-button-b66707, transparent));color:var(--label-692b2b, var(--label-button-b66707, var(--cnvs-sys-color-fg-strong)));--color-system-icon-f4b83b:var(--icon-692b2b, var(--cnvs-sys-color-fg-strong));outline:0.125rem solid transparent;outline-offset:0.125rem;box-shadow:0 0 0 0.125rem var(--boxShadowInner-692b2b, var(--boxShadowInner-button-b66707, var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)))),0 0 0 0.25rem var(--boxShadowOuter-692b2b, var(--boxShadowOuter-button-b66707, var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline))));}&:hover, &.hover{background-color:var(--background-36ab3e, var(--background-button-b66707, var(--cnvs-sys-color-bg-contrast-strong)));border-color:var(--border-36ab3e, var(--border-button-b66707, transparent));color:var(--label-36ab3e, var(--label-button-b66707, var(--cnvs-sys-color-fg-stronger)));--color-system-icon-f4b83b:var(--icon-36ab3e, var(--cnvs-sys-color-fg-stronger));}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--background-cbad69, var(--background-button-b66707, transparent));border-color:var(--border-cbad69, var(--border-button-b66707, transparent));color:var(--label-cbad69, var(--label-button-b66707, var(--cnvs-sys-color-fg-strong)));--color-system-icon-f4b83b:var(--icon-cbad69, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{background-color:var(--background-d559f9, var(--background-button-b66707, transparent));border-color:var(--border-d559f9, var(--border-button-b66707, transparent));color:var(--label-d559f9, var(--label-button-b66707, var(--cnvs-sys-color-fg-strong)));--color-system-icon-f4b83b:var(--icon-d559f9, currentColor);}@media (prefers-contrast: more){&[aria-pressed=\"true\"]{outline:0.125rem solid transparent;outline-offset:-0.0625rem;}&[aria-pressed=\"true\"]:focus-visible, &[aria-pressed=\"true\"].focus{outline:0.25rem double transparent;outline-offset:0;}}svg{pointer-events:none;}" },
+    base: { name: "wfp2r", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-150));font-weight:var(--cnvs-sys-font-weight-bold);background-color:var(--background-5bdf1f, var(--background-button-b66707, transparent));color:var(--label-5bdf1f, var(--label-button-b66707, var(--cnvs-sys-color-fg-strong)));border-width:0.0625rem;border-style:solid;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2));border-color:var(--border-5bdf1f, var(--border-button-b66707, transparent));cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;outline:0.125rem transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--borderRadius-5bdf1f, var(--borderRadius-button-b66707, var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round))));position:relative;vertical-align:middle;overflow:hidden;--color-system-icon-2a31cf:var(--icon-5bdf1f, var(--cnvs-sys-color-fg-strong));transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active, &.disabled{cursor:default;box-shadow:none;opacity:var(--opacity-5bdf1f, var(--opacity-button-b66707, var(--cnvs-sys-opacity-full)));}&:focus-visible, &.focus{background-color:var(--background-692b2b, var(--background-button-b66707, transparent));border-color:var(--border-692b2b, var(--border-button-b66707, transparent));color:var(--label-692b2b, var(--label-button-b66707, var(--cnvs-sys-color-fg-strong)));--color-system-icon-2a31cf:var(--icon-692b2b, var(--cnvs-sys-color-fg-strong));outline:0.125rem solid transparent;outline-offset:0.125rem;box-shadow:0 0 0 0.125rem var(--boxShadowInner-692b2b, var(--boxShadowInner-button-b66707, var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)))),0 0 0 0.25rem var(--boxShadowOuter-692b2b, var(--boxShadowOuter-button-b66707, var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline))));}&:hover, &.hover{background-color:var(--background-36ab3e, var(--background-button-b66707, var(--cnvs-sys-color-bg-contrast-strong)));border-color:var(--border-36ab3e, var(--border-button-b66707, transparent));color:var(--label-36ab3e, var(--label-button-b66707, var(--cnvs-sys-color-fg-stronger)));--color-system-icon-2a31cf:var(--icon-36ab3e, var(--cnvs-sys-color-fg-stronger));}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--background-cbad69, var(--background-button-b66707, transparent));border-color:var(--border-cbad69, var(--border-button-b66707, transparent));color:var(--label-cbad69, var(--label-button-b66707, var(--cnvs-sys-color-fg-strong)));--color-system-icon-2a31cf:var(--icon-cbad69, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{background-color:var(--background-d559f9, var(--background-button-b66707, transparent));border-color:var(--border-d559f9, var(--border-button-b66707, transparent));color:var(--label-d559f9, var(--label-button-b66707, var(--cnvs-sys-color-fg-strong)));--color-system-icon-2a31cf:var(--icon-d559f9, currentColor);}@media (prefers-contrast: more){&[aria-pressed=\"true\"]{outline:0.125rem solid transparent;outline-offset:-0.0625rem;}&[aria-pressed=\"true\"]:focus-visible, &[aria-pressed=\"true\"].focus{outline:0.25rem double transparent;outline-offset:0;}}svg{pointer-events:none;}" },
     modifiers: {
         /**
          * Button modifiers that will overwrite the base styles of Buttons.

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
 import { calc, createStencil, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
-import { extLinkIcon } from '@workday/canvas-system-icons-web';
+import { externalLinkIcon } from '@workday/canvas-system-icons-web';
 import { system } from '@workday/canvas-tokens-web';
 import { hyperlinkStencil } from './Hyperlink';
 export const externalHyperlinkStencil = createStencil({
@@ -10,13 +10,13 @@ export const externalHyperlinkStencil = createStencil({
     parts: {
         externalHyperlinkIcon: 'external-hyperlink-icon',
     },
-    base: { name: "bbmxl", styles: "box-sizing:border-box;[data-part=\"external-hyperlink-icon\"]{vertical-align:text-top;--color-system-icon-5c23c4:currentColor;--size-v14-svg-d754ad:1em;width:calc(1em - 0.0625rem);min-width:calc(var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4)) - 0.0625rem);margin-inline-start:calc(var(--cnvs-sys-space-x1) - 0.125rem);& > svg{min-width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4));min-height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4));}:dir(rtl){transform:rotate(270deg);}}" }
-}, "external-hyperlink-a82b92");
+    base: { name: "18p31j", styles: "box-sizing:border-box;[data-part=\"external-hyperlink-icon\"]{vertical-align:text-top;--color-system-icon-5c23c4:currentColor;--size-v14-svg-d754ad:1em;width:calc(1em - 0.0625rem);min-width:calc(var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4)) - 0.0625rem);margin-inline-start:calc(var(--cnvs-sys-space-x1) - 0.125rem);& > svg{min-width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4));min-height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4));}:dir(rtl){transform:rotate(270deg);}}" }
+}, "external-hyperlink-b3d163");
 /**
  * `ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the
  * link on a dark or colorful background such as `blueberry400`.
  */
 export const ExternalHyperlink = createComponent('a')({
     displayName: 'ExternalHyperlink',
-    Component: ({ children, iconLabel, variant, ...elemProps }, ref, Element) => (_jsxs(Element, { ref: ref, target: "_blank", rel: "noreferrer", ...handleCsProp(elemProps, externalHyperlinkStencil({ variant })), children: [_jsx("span", { "data-part": "external-hyperlink-children", children: children }), _jsx(SystemIcon, { icon: extLinkIcon, role: "img", "aria-label": iconLabel, ...externalHyperlinkStencil.parts.externalHyperlinkIcon })] })),
+    Component: ({ children, iconLabel, variant, ...elemProps }, ref, Element) => (_jsxs(Element, { ref: ref, target: "_blank", rel: "noreferrer", ...handleCsProp(elemProps, externalHyperlinkStencil({ variant })), children: [_jsx("span", { "data-part": "external-hyperlink-children", children: children }), _jsx(SystemIcon, { icon: externalLinkIcon, role: "img", "aria-label": iconLabel, ...externalHyperlinkStencil.parts.externalHyperlinkIcon })] })),
 });

package/dist/es6/button/lib/parts/ButtonLabelIcon.js

@@ -7,10 +7,10 @@ const buttonIconStencil = createStencil({
     base: { name: "g4xvt", styles: "box-sizing:border-box;display:inline-block;" },
     modifiers: {
         size: {
-            extraSmall: { name: "216oag", styles: "--size-svg-2af90b:var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4));" },
-            small: { name: "4itlb", styles: "--size-svg-2af90b:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5));" },
-            medium: { name: "2rzjzg", styles: "--size-svg-2af90b:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5));" },
-            large: { name: "45e321", styles: "--size-svg-2af90b:var(--cnvs-component-system-icon-size-lg, var(--cnvs-sys-space-x6));" }
+            extraSmall: { name: "216oag", styles: "--size-svg-bca693:var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4));" },
+            small: { name: "4itlb", styles: "--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5));" },
+            medium: { name: "2rzjzg", styles: "--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5));" },
+            large: { name: "45e321", styles: "--size-svg-bca693:var(--cnvs-component-system-icon-size-lg, var(--cnvs-sys-space-x6));" }
         }
     }
 }, "button-icon-e1f69e");

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

@@ -74,7 +74,11 @@ export declare const accentIconStencil: import("@workday/canvas-kit-styling").St
         };
     };
 }, {}, {
-    width: string;
+    width: string; /**
+     * If true, set the background fill of the AccentIcon to `transparent`.
+     * If false, set the background fill of the AccentIcon to `system.color.bg.alt.soft`.
+     * @default false
+     */
     height: string;
     size: string;
 }, never, never>, never>;

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":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAG1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAIlE,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAE/E,OAAO,EAAM,QAAQ,EAAa,MAAM,OAAO,CAAC;AAEhD;;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;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,CAAC;IACrE;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;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;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAuB5B,CAAC;AAeH;;GAEG;AACH,eAAO,MAAM,UAAU,sFAiCrB,CAAC"}
+{"version":3,"file":"AccentIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AccentIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAG1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAIlE,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAE/E,OAAO,EAAM,QAAQ,EAAa,MAAM,OAAO,CAAC;AAEhD;;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;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,CAAC;IACrE;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;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;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;mBAnC5B;;;;OAIG;;;wBAsDH,CAAC;AAgBH;;GAEG;AACH,eAAO,MAAM,UAAU,sFAiCrB,CAAC"}

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

@@ -24,7 +24,7 @@ export const accentIconStencil = createStencil({
     vars: {
         color: '',
     },
-    base: { name: "3q6zwf", styles: "box-sizing:border-box;--size-svg-2af90b:3.5rem;& .color-500{fill:var(--color-accent-icon-66e130, var(--cnvs-sys-color-bg-primary-strong));}& .french-vanilla-100{fill:var(--cnvs-sys-color-bg-default);}" },
+    base: { name: "3q6zwf", styles: "box-sizing:border-box;--size-svg-bca693:3.5rem;& .color-500{fill:var(--color-accent-icon-66e130, var(--cnvs-sys-color-bg-primary-strong));}& .french-vanilla-100{fill:var(--cnvs-sys-color-bg-default);}" },
     modifiers: {
         transparent: {
             true: { name: "1sq2ty", styles: "& .french-vanilla-100{fill:transparent;}" }
@@ -33,8 +33,9 @@ export const accentIconStencil = createStencil({
 }, "accent-icon-66e130");
 /** @deprecated Deprecated in v11 */
 const transformColorNameToToken = (color) => {
-    if (color && color in base) {
-        return cssVar(base[color]);
+    const { legacy, ...baseTokens } = base;
+    if (color && color in baseTokens) {
+        return cssVar(baseTokens[color]);
     }
     if (color === null || color === void 0 ? void 0 : color.startsWith('--')) {
         return cssVar(color);

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":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAG1C,OAAO,EAAC,aAAa,EAAsB,MAAM,kCAAkC,CAAC;AAGpF,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAE/E,OAAO,EAAM,QAAQ,EAAa,MAAM,OAAO,CAAC;AAEhD;;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;;GAEG;AACH,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,QAAQ,EAAE,cAAc,GAAG,mBAAmB,GAAG,IAAI,CAAC;IAC7D;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA6B5B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,UAAU;;CA4BrB,CAAC"}
+{"version":3,"file":"AppletIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AppletIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAG1C,OAAO,EAAC,aAAa,EAAsB,MAAM,kCAAkC,CAAC;AAGpF,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAE/E,OAAO,EAAM,QAAQ,EAAa,MAAM,OAAO,CAAC;AAIhD;;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;;GAEG;AACH,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,QAAQ,EAAE,cAAc,GAAG,mBAAmB,GAAG,IAAI,CAAC;IAC7D;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA6B5B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,UAAU;;CA4BrB,CAAC"}

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

@@ -2,9 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { BrandingColor, colors } from '@workday/canvas-kit-react/tokens';
 import { createStencil, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
-import { base, system } from '@workday/canvas-tokens-web';
+import { base as baseTokens, system } from '@workday/canvas-tokens-web';
 import { CanvasIconTypes } from '@workday/design-assets-types';
 import { Svg, svgStencil } from './Svg';
+const { legacy, ...base } = baseTokens;
 /**
  * @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.
  */
@@ -54,8 +55,8 @@ export const appletIconStencil = createStencil({
         color400: '',
         color500: '',
     },
-    base: { name: "22jqnb", styles: "box-sizing:border-box;--size-svg-2af90b:5.75rem;& .color-100{fill:var(--cnvs-sys-color-fg-inverse);}& .color-200{fill:var(--color200-applet-icon-52344d, var(--cnvs-base-palette-blue-200));}& .color-300{fill:var(--color300-applet-icon-52344d, var(--cnvs-base-palette-blue-400));}& .color-400{fill:var(--color400-applet-icon-52344d, var(--cnvs-base-palette-blue-600));}& .color-400-alpha-20{fill:var(--color400-applet-icon-52344d, var(--cnvs-base-palette-blue-600));}& .color-500{fill:var(--color500-applet-icon-52344d, var(--cnvs-base-palette-blue-700));}" }
-}, "applet-icon-52344d");
+    base: { name: "y6pw8", styles: "box-sizing:border-box;--size-svg-bca693:5.75rem;& .color-100{fill:var(--cnvs-sys-color-fg-inverse);}& .color-200{fill:var(--color200-applet-icon-e065f0, var(--cnvs-base-palette-blue-200));}& .color-300{fill:var(--color300-applet-icon-e065f0, var(--cnvs-base-palette-blue-400));}& .color-400{fill:var(--color400-applet-icon-e065f0, var(--cnvs-base-palette-blue-600));}& .color-400-alpha-20{fill:var(--color400-applet-icon-e065f0, var(--cnvs-base-palette-blue-600));}& .color-500{fill:var(--color500-applet-icon-e065f0, var(--cnvs-base-palette-blue-700));}" }
+}, "applet-icon-e065f0");
 /**
  *  @deprecated ⚠️ `AppletIcon` is deprecated and will be removed in a future major version. Deprecated in v15.0.0.
  */

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

@@ -16,7 +16,7 @@ export const expressiveIconStencil = createStencil({
          */
         accentColor: '',
     },
-    base: { name: "qomoy", styles: "box-sizing:border-box;& svg{width:var(--size-svg-2af90b, var(--cnvs-component-expressive-icon-size-md, 3.5rem));height:var(--size-svg-2af90b, var(--cnvs-component-expressive-icon-size-md, 3.5rem));}.wd-expressive .wd-expressive-fill{fill:var(--color-expressive-icon-4db5e5, var(--cnvs-component-expressive-icon-color-fill));}.wd-expressive .wd-expressive-accent{fill:var(--accentColor-expressive-icon-4db5e5, var(--cnvs-component-expressive-icon-color-accent));}@media (prefers-contrast: more){.wd-expressive .wd-expressive-fill{color:currentColor;fill:currentColor;}.wd-expressive .wd-expressive-accent{color:transparent;fill:transparent;}}" }
+    base: { name: "qomoy", styles: "box-sizing:border-box;& svg{width:var(--size-svg-bca693, var(--cnvs-component-expressive-icon-size-md, 3.5rem));height:var(--size-svg-bca693, var(--cnvs-component-expressive-icon-size-md, 3.5rem));}.wd-expressive .wd-expressive-fill{fill:var(--color-expressive-icon-4db5e5, var(--cnvs-component-expressive-icon-color-fill));}.wd-expressive .wd-expressive-accent{fill:var(--accentColor-expressive-icon-4db5e5, var(--cnvs-component-expressive-icon-color-accent));}@media (prefers-contrast: more){.wd-expressive .wd-expressive-fill{color:currentColor;fill:currentColor;}.wd-expressive .wd-expressive-accent{color:transparent;fill:transparent;}}" }
 }, "expressive-icon-4db5e5");
 export const ExpressiveIcon = createComponent('span')({
     displayName: 'ExpressiveIcon',

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

@@ -80,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/es6/icon/lib/Graphic.d.ts.map

@@ -1 +1 @@
-{"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;;;;;;;;;;;;;;;;;;;;;;;;;;wBAazB,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/es6/icon/lib/Svg.d.ts

@@ -2,10 +2,10 @@ 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 } from '@workday/design-assets-types';
+import { CanvasIcon as LegacyCanvasIcon, CanvasIconTypes as LegacyIconTypes } from '@workday/design-assets-types';
 export interface SvgProps extends CSProps, HTMLAttributes<HTMLSpanElement> {
-    src: CanvasSystemIcon | CanvasExpressiveIcon | CanvasIcon;
-    type: CanvasIconTypes;
+    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

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":"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,EAAC,UAAU,EAAC,MAAM,8BAA8B,CAAC;AAExD,MAAM,WAAW,QAAS,SAAQ,OAAO,EAAE,cAAc,CAAC,eAAe,CAAC;IACxE,GAAG,EAAE,gBAAgB,GAAG,oBAAoB,GAAG,UAAU,CAAC;IAC1D,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;;OAEG;;IAEH;;OAEG;;IAEH,2CAA2C;;gBAyB7C,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,WAAW,0FAGrB,MAUF,CAAC;AAEF,eAAO,MAAM,GAAG,+EAoBd,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/es6/icon/lib/Svg.js

@@ -14,16 +14,16 @@ export const svgStencil = createStencil({
         /** sets width and height of svg element */
         size: '',
     },
-    base: { name: "29ffbs", styles: "box-sizing:border-box;display:inline-block;> svg{display:block;width:var(--width-svg-2af90b, var(--size-svg-2af90b));height:var(--height-svg-2af90b, var(--size-svg-2af90b));}" },
+    base: { name: "39le0l", 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: "34necu", styles: "transform:scaleX(-1);" }
+            true: { name: "wfmwu", styles: "transform:scaleX(-1);" }
         },
         shouldMirrorInRTL: {
-            true: { name: "2g4so", styles: "&:dir(rtl){transform:scaleX(-1);}" }
+            true: { name: "1rrkpt", styles: "&:dir(rtl){transform:scaleX(-1);}" }
         }
     }
-}, "svg-2af90b");
+}, "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.

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

@@ -1,4 +1,5 @@
 import { CanvasSystemIcon } from '@workday/canvas-system-icons-web';
+import { CanvasSystemIcon as LegacyCanvasSystemIcon } from '@workday/design-assets-types';
 import { SvgProps } from './Svg';
 type SystemSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface SystemIconProps extends Omit<SvgProps, 'src' | 'type'> {
@@ -17,7 +18,7 @@ export interface SystemIconProps extends Omit<SvgProps, 'src' | 'type'> {
     /**
      * The icon to display from `@workday/canvas-system-icons-web`.
      */
-    icon: CanvasSystemIcon;
+    icon: CanvasSystemIcon | LegacyCanvasSystemIcon;
     /**
      * The size of the SystemIcon in size variants or string / numeric (px) values.
      * **System icon sizes**

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,EAAkB,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAGnF,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,CAAC;IACvB;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;CACrC;AAED,eAAO,MAAM,iBAAiB;IAG1B;;;;OAIG;;IAEH;;OAEG;;IAEH;;OAEG;;;;;;;;;;;;;;;;;;;wBA+BL,CAAC;AAEH,eAAO,MAAM,UAAU,sFAyBrB,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;;;;;;;;;;;;;;;;;;;wBA+BL,CAAC;AAEH,eAAO,MAAM,UAAU,sFAyBrB,CAAC"}

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

@@ -22,10 +22,10 @@ export const systemIconStencil = createStencil({
          */
         backgroundColor: '',
     },
-    base: { name: "1j633o", styles: "box-sizing:border-box;& svg{width:var(--size-svg-2af90b, var(--cnvs-component-system-icon-size-lg, 1.5rem));height:var(--size-svg-2af90b, var(--cnvs-component-system-icon-size-lg, 1.5rem));}.wd-icon .wd-icon-fill{fill:var(--color-system-icon-f4b83b, var(--cnvs-component-system-icon-color-fill));}.wd-icon .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentColor-system-icon-f4b83b, var(--color-system-icon-f4b83b, var(--cnvs-component-system-icon-color-accent)));}.wd-icon .wd-icon-background{fill:var(--backgroundColor-system-icon-f4b83b, transparent);}@media (prefers-contrast: more){.wd-icon .wd-icon-fill, .wd-icon .wd-icon-accent{color:currentColor;fill:currentColor;}}" },
+    base: { name: "2fw5zg", styles: "box-sizing:border-box;& svg{width:var(--size-svg-bca693, var(--cnvs-component-system-icon-size-lg, 1.5rem));height:var(--size-svg-bca693, var(--cnvs-component-system-icon-size-lg, 1.5rem));}.wd-icon .wd-icon-fill{fill:var(--color-system-icon-2a31cf, var(--cnvs-component-system-icon-color-fill));}.wd-icon .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentColor-system-icon-2a31cf, var(--color-system-icon-2a31cf, var(--cnvs-component-system-icon-color-accent)));}.wd-icon .wd-icon-background{fill:var(--backgroundColor-system-icon-2a31cf, 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-f4b83b");
+}, "system-icon-2a31cf");
 export const SystemIcon = createComponent('span')({
     displayName: 'SystemIcon',
     Component: ({ accent, background, color, icon, size, ...elemProps }, ref, Element) => {

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

@@ -1,5 +1,6 @@
 import { CSProps } from '@workday/canvas-kit-styling';
 import { CanvasSystemIcon } from '@workday/canvas-system-icons-web';
+import { CanvasSystemIcon as LegacyCanvasSystemIcon } from '@workday/design-assets-types';
 export declare enum SystemIconCircleSize {
     xs = 16,
     s = 24,
@@ -10,9 +11,9 @@ export declare enum SystemIconCircleSize {
 }
 type SystemIconCircleCommonProps = {
     /**
-     * The icon to display from `@workday/canvas-accent-icons-web`.
+     * The icon to display from `@workday/canvas-system-icons-web`.
      */
-    icon: CanvasSystemIcon;
+    icon: CanvasSystemIcon | LegacyCanvasSystemIcon;
     /**
      * The size token of the SystemIconCircle.
      * @default SystemIconCircleSize.l

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

@@ -1 +1 @@
-{"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,OAAO,EAMR,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAOlE,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAcD,KAAK,2BAA2B,GAAG;IACjC;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC9C;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,OAAO,CAAC;AAEZ;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAC7B,CAAC,2BAA2B,GAAG;IAAC,UAAU,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAC,CAAC,GACnE,CAAC,2BAA2B,GAAG;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAExE,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;gBAgDlC,CAAC;AAEH,eAAO,MAAM,gBAAgB,4FAsC3B,CAAC"}
+{"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,OAAO,EAMR,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAElE,OAAO,EAAC,gBAAgB,IAAI,sBAAsB,EAAC,MAAM,8BAA8B,CAAC;AAMxF,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAcD,KAAK,2BAA2B,GAAG;IACjC;;OAEG;IACH,IAAI,EAAE,gBAAgB,GAAG,sBAAsB,CAAC;IAChD;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC9C;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,OAAO,CAAC;AAEZ;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAC7B,CAAC,2BAA2B,GAAG;IAAC,UAAU,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAC,CAAC,GACnE,CAAC,2BAA2B,GAAG;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAExE,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;gBAgDlC,CAAC;AAEH,eAAO,MAAM,gBAAgB,4FAsC3B,CAAC"}

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

@@ -31,13 +31,13 @@ export const systemIconCircleStencil = createStencil({
         color: '',
         size: '',
     },
-    base: { name: "3i8g98", styles: "box-sizing:border-box;background:var(--background-system-icon-circle-20bf5c, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft)));display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round));overflow:hidden;width:var(--size-system-icon-circle-20bf5c, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10)));height:var(--size-system-icon-circle-20bf5c, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10)));--size-svg-2af90b:calc(var(--size-system-icon-circle-20bf5c, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10))) * 0.625);--color-system-icon-f4b83b:var(--color-system-icon-circle-20bf5c);& img{width:100%;height:100%;}" },
+    base: { name: "16tjc7", styles: "box-sizing:border-box;background:var(--background-system-icon-circle-ca476e, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft)));display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round));overflow:hidden;width:var(--size-system-icon-circle-ca476e, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10)));height:var(--size-system-icon-circle-ca476e, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10)));--size-svg-bca693:calc(var(--size-system-icon-circle-ca476e, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10))) * 0.625);--color-system-icon-2a31cf:var(--color-system-icon-circle-ca476e);& img{width:100%;height:100%;}" },
     modifiers: {
         inverse: {
-            true: { name: "360jpw", styles: "background:var(--background-system-icon-circle-20bf5c, var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-primary-default)));--color-system-icon-f4b83b:var(--color-system-icon-circle-20bf5c, var(--cnvs-sys-color-fg-inverse));" }
+            true: { name: "4d7llj", styles: "background:var(--background-system-icon-circle-ca476e, var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-primary-default)));--color-system-icon-2a31cf:var(--color-system-icon-circle-ca476e, var(--cnvs-sys-color-fg-inverse));" }
         }
     }
-}, "system-icon-circle-20bf5c");
+}, "system-icon-circle-ca476e");
 export const SystemIconCircle = createComponent('span')({
     displayName: 'SystemIconCircle',
     Component: ({ background, color, size, icon, shouldMirror, shouldMirrorInRTL, inverse, ...elemProps }, ref, Element) => {

package/dist/es6/side-panel/lib/SidePanelToggleButton.d.ts

@@ -64,7 +64,9 @@ export declare const useSidePanelToggleButton: import("@workday/canvas-kit-react
         panelId: string;
         labelId: string;
         transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
-        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates; /**
+         * Provides an accessible label to the button. This text **should not** convey visual state but rather what it does like "control data panel."
+         */
         origin: "end" | "start";
         onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
     };
@@ -84,7 +86,9 @@ export declare const SidePanelToggleButton: import("@workday/canvas-kit-react/co
         panelId: string;
         labelId: string;
         transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
-        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates; /**
+         * Provides an accessible label to the button. This text **should not** convey visual state but rather what it does like "control data panel."
+         */
         origin: "end" | "start";
         onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
     };

package/dist/es6/side-panel/lib/SidePanelToggleButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelToggleButton.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanelToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAChE,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAU,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAOxE,MAAM,WAAW,0BAA2B,SAAQ,YAAY,CAAC,OAAO,cAAc,CAAC;IACrF;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAsGvC,CAAC;AAEH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;EAMnC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;EA+CjC,CAAC"}
+{"version":3,"file":"SidePanelToggleButton.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanelToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAChE,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAU,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAOxE,MAAM,WAAW,0BAA2B,SAAQ,YAAY,CAAC,OAAO,cAAc,CAAC;IACrF;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAsGvC,CAAC;AAEH,eAAO,MAAM,wBAAwB;;;;;yFAnHnC;;WAEG;;;;;;;;;;;;;;EAuHH,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;yFA3HhC;;WAEG;;;;;;;;;;EAwKJ,CAAC"}

package/dist/es6/side-panel/lib/SidePanelToggleButton.js

@@ -3,42 +3,42 @@ import { TertiaryButton } from '@workday/canvas-kit-react/button';
 import { createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
 import { Tooltip } from '@workday/canvas-kit-react/tooltip';
 import { createStencil, cssVar, handleCsProp } from '@workday/canvas-kit-styling';
-import { transformationImportIcon } from '@workday/canvas-system-icons-web';
+import { extendIcon } from '@workday/canvas-system-icons-web';
 import { base, system } from '@workday/canvas-tokens-web';
 import { useSidePanelModel } from './useSidePanelModel';
 export const sidePanelToggleButtonStencil = createStencil({
-    base: { name: "hlh4f", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6));width:var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x8));inset-inline-end:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));" },
+    base: { name: "3a8or0", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6));width:var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x8));inset-inline-end:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));" },
     modifiers: {
         state: {
-            collapsing: { name: "11e02h", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
-            collapsed: { name: "21myyu", styles: "margin:auto;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
-            expanded: { name: "3bc4ff", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
-            expanding: { name: "3jdzk3", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
+            collapsing: { name: "3t06d", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            collapsed: { name: "3olm9d", styles: "margin:auto;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            expanded: { name: "1vyxp8", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
+            expanding: { name: "mzm9w", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
         },
         origin: {
-            start: { name: "45375r", styles: "" },
-            end: { name: "4bbju", styles: "transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" }
+            start: { name: "b910p", styles: "" },
+            end: { name: "48gumm", styles: "transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" }
         }
     },
     compound: [
         {
             modifiers: { state: 'collapsed', origin: 'end' },
-            styles: { name: "2gssqq", styles: "transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
+            styles: { name: "2xv750", styles: "transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
         },
         {
             modifiers: { state: 'collapsing', origin: 'end' },
-            styles: { name: "8bwyj", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));:dir(rtl){transform:scaleX(1);inset-inline-end:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));}" }
+            styles: { name: "17ywis", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));:dir(rtl){transform:scaleX(1);inset-inline-end:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));}" }
         },
         {
             modifiers: { state: 'expanded', origin: 'end' },
-            styles: { name: "1bd77z", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));}" }
+            styles: { name: "36emce", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));}" }
         },
         {
             modifiers: { state: 'expanding', origin: 'end' },
-            styles: { name: "2nygsg", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));}" }
+            styles: { name: "13en60", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-base-size-150, var(--cnvs-sys-space-x3));}" }
         }
     ]
-}, "side-panel-toggle-button-355ace");
+}, "side-panel-toggle-button-1db1a4");
 export const useSidePanelToggleButton = createElemPropsHook(useSidePanelModel)(({ state }) => {
     return {
         'aria-controls': state.panelId,
@@ -50,7 +50,7 @@ export const SidePanelToggleButton = createSubcomponent('button')({
     displayName: 'SidePanel.ToggleButton',
     modelHook: useSidePanelModel,
     elemPropsHook: useSidePanelToggleButton,
-})(({ variant = undefined, icon = transformationImportIcon, tooltipTextExpand = 'Expand View', tooltipTextCollapse = 'Collapse View', tooltipProps, tooltipText, ...elemProps }, Element, model) => {
+})(({ variant = undefined, icon = extendIcon, tooltipTextExpand = 'Expand View', tooltipTextCollapse = 'Collapse View', tooltipProps, tooltipText, ...elemProps }, Element, model) => {
     return (_jsx(Tooltip, { type: "muted", ...tooltipProps, title: tooltipText ||
             (model.state.transitionState === 'expanded' ? tooltipTextCollapse : tooltipTextExpand), children: _jsx(TertiaryButton, { icon: icon, as: Element, variant: variant, "aria-label": tooltipText, ...handleCsProp(elemProps, sidePanelToggleButtonStencil({
                 state: model.state.transitionState,

package/icon/lib/AccentIcon.tsx

@@ -97,8 +97,9 @@ export const accentIconStencil = createStencil({
 
 /** @deprecated Deprecated in v11 */
 const transformColorNameToToken = (color?: string) => {
-  if (color && color in base) {
-    return cssVar(base[color as keyof typeof base]);
+  const {legacy, ...baseTokens} = base;
+  if (color && color in baseTokens) {
+    return cssVar(baseTokens[color as keyof typeof baseTokens]);
   }
 
   if (color?.startsWith('--')) {

package/icon/lib/AppletIcon.tsx

@@ -3,11 +3,13 @@ import {CSSObject} from '@emotion/styled';
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {BrandingColor, CanvasColor, colors} from '@workday/canvas-kit-react/tokens';
 import {createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
-import {base, system} from '@workday/canvas-tokens-web';
+import {base as baseTokens, system} from '@workday/canvas-tokens-web';
 import {CanvasAppletIcon, CanvasIconTypes} from '@workday/design-assets-types';
 
 import {Svg, SvgProps, svgStencil} from './Svg';
 
+const {legacy, ...base} = baseTokens;
+
 /**
  * @deprecated Interface `AppletIconStyles` will be removed in a future version. All props will be moved inside `AppletIconProps`.
  */

package/icon/lib/Svg.tsx

@@ -4,11 +4,14 @@ import {CanvasExpressiveIcon} from '@workday/canvas-expressive-icons-web';
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {CSProps, createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 import {CanvasIconTypes, CanvasSystemIcon} from '@workday/canvas-system-icons-web';
-import {CanvasIcon} from '@workday/design-assets-types';
+import {
+  CanvasIcon as LegacyCanvasIcon,
+  CanvasIconTypes as LegacyIconTypes,
+} from '@workday/design-assets-types';
 
 export interface SvgProps extends CSProps, HTMLAttributes<HTMLSpanElement> {
-  src: CanvasSystemIcon | CanvasExpressiveIcon | CanvasIcon;
-  type: CanvasIconTypes;
+  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

package/icon/lib/SystemIcon.tsx

@@ -2,6 +2,7 @@ import {createComponent} from '@workday/canvas-kit-react/common';
 import {createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 import {CanvasIconTypes, CanvasSystemIcon} from '@workday/canvas-system-icons-web';
 import {component} from '@workday/canvas-tokens-web';
+import {CanvasSystemIcon as LegacyCanvasSystemIcon} from '@workday/design-assets-types';
 
 import {Svg, SvgProps, resolveSize, svgStencil} from './Svg';
 
@@ -23,7 +24,7 @@ export interface SystemIconProps extends Omit<SvgProps, 'src' | 'type'> {
   /**
    * The icon to display from `@workday/canvas-system-icons-web`.
    */
-  icon: CanvasSystemIcon;
+  icon: CanvasSystemIcon | LegacyCanvasSystemIcon;
   /**
    * The size of the SystemIcon in size variants or string / numeric (px) values.
    * **System icon sizes**

package/icon/lib/SystemIconCircle.tsx

@@ -9,6 +9,7 @@ import {
 } from '@workday/canvas-kit-styling';
 import {CanvasSystemIcon} from '@workday/canvas-system-icons-web';
 import {system} from '@workday/canvas-tokens-web';
+import {CanvasSystemIcon as LegacyCanvasSystemIcon} from '@workday/design-assets-types';
 
 import {resolveSize} from './Svg';
 import {SystemIcon, systemIconStencil} from './SystemIcon';
@@ -37,9 +38,9 @@ const sizes = {
 
 type SystemIconCircleCommonProps = {
   /**
-   * The icon to display from `@workday/canvas-accent-icons-web`.
+   * The icon to display from `@workday/canvas-system-icons-web`.
    */
-  icon: CanvasSystemIcon;
+  icon: CanvasSystemIcon | LegacyCanvasSystemIcon;
   /**
    * The size token of the SystemIconCircle.
    * @default SystemIconCircleSize.l

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "15.0.0-alpha.0314-next.0",
+  "version": "15.0.0-alpha.0316-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -53,11 +53,11 @@
     "@tanstack/react-virtual": "^3.13.9",
     "@workday/canvas-colors-web": "^2.0.0",
     "@workday/canvas-expressive-icons-web": "1.0.1",
-    "@workday/canvas-kit-popup-stack": "^15.0.0-alpha.0314-next.0",
-    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0314-next.0",
-    "@workday/canvas-kit-styling": "^15.0.0-alpha.0314-next.0",
+    "@workday/canvas-kit-popup-stack": "^15.0.0-alpha.0316-next.0",
+    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0316-next.0",
+    "@workday/canvas-kit-styling": "^15.0.0-alpha.0316-next.0",
     "@workday/canvas-system-icons-web": "4.0.2",
-    "@workday/canvas-tokens-web": "4.2.0",
+    "@workday/canvas-tokens-web": "4.3.0",
     "@workday/design-assets-types": "^0.3.0",
     "chroma-js": "^2.2.0",
     "csstype": "^3.0.2",
@@ -70,5 +70,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "a9acd08c80db85f9a2f1e022fe18a4261cafec80"
+  "gitHead": "f4f62be1980c79e999f82678036ed1573e1a6afd"
 }

package/side-panel/lib/SidePanelToggleButton.tsx

@@ -8,7 +8,7 @@ import {
 } from '@workday/canvas-kit-react/common';
 import {Tooltip, TooltipProps} from '@workday/canvas-kit-react/tooltip';
 import {createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling';
-import {transformationImportIcon} from '@workday/canvas-system-icons-web';
+import {extendIcon} from '@workday/canvas-system-icons-web';
 import {base, system} from '@workday/canvas-tokens-web';
 
 import {useSidePanelModel} from './useSidePanelModel';
@@ -150,7 +150,7 @@ export const SidePanelToggleButton = createSubcomponent('button')({
   (
     {
       variant = undefined,
-      icon = transformationImportIcon,
+      icon = extendIcon,
       tooltipTextExpand = 'Expand View',
       tooltipTextCollapse = 'Collapse View',
       tooltipProps,