@workday/canvas-kit-react 15.0.0-alpha.0313-next.0 → 15.0.0-alpha.0315-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/form-field/index.d.ts

@@ -5,7 +5,6 @@ export * from './lib/FormFieldGroupLabel';
 export * from './lib/FormFieldGroupInput';
 export * from './lib/FormFieldGroupList';
 export * from './lib/formFieldStencil';
-export * from './lib/FormFieldContainer';
 export * from './lib/FormFieldHint';
 export * from './lib/FormFieldLabel';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/form-field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../form-field/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../form-field/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}

package/dist/commonjs/form-field/index.js

@@ -21,6 +21,5 @@ __exportStar(require("./lib/FormFieldGroupLabel"), exports);
 __exportStar(require("./lib/FormFieldGroupInput"), exports);
 __exportStar(require("./lib/FormFieldGroupList"), exports);
 __exportStar(require("./lib/formFieldStencil"), exports);
-__exportStar(require("./lib/FormFieldContainer"), exports);
 __exportStar(require("./lib/FormFieldHint"), exports);
 __exportStar(require("./lib/FormFieldLabel"), exports);

package/dist/commonjs/form-field/lib/FormField.d.ts

@@ -102,31 +102,6 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
         };
         events: {};
     }>;
-    /**
-     * `FormField.Field` allows you to properly center `FormField.Label` when the `orientation` is set to `horizontal` and there is hint text..
-     *
-     * ```tsx
-     * <FormField orientation="horizontalStart">
-     *    <FormField.Label>First Name</FormField.Label>
-     *    <FormField.Container>
-     *      <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
-     *      <FormField.Hint>This is your hint text</FormField.Hint>
-     *    </FormField.Container>
-     *  </FormField>
-     * ```
-     *
-     * @stencil formFieldContainerStencil
-     * @deprecated `FormField.Container` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment.
-     */
-    Container: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("@workday/canvas-kit-styling").CSProps, {
-        state: {
-            id: string;
-            error: "error" | "caution" | undefined;
-            isRequired: boolean;
-            orientation: "vertical" | "horizontalEnd" | "horizontalStart";
-        };
-        events: {};
-    }>;
     /**
      * `FormField.Field` allows you to customize container alignment and styles when wrapping your input and hint text.
      * ```tsx

package/dist/commonjs/form-field/lib/FormField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,cAAc,EAAkB,MAAM,kCAAkC,CAAC;AACjF,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAUxE,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,iBAAiB,GAAG,eAAe,CAAC;IAC/D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;IAIlB;;;;;;;;;;;;OAYG;;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;;IAEH;;;;;;;;;;;;;;;OAeG;;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;;CAmBL,CAAC"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,cAAc,EAAkB,MAAM,kCAAkC,CAAC;AACjF,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AASxE,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,iBAAiB,GAAG,eAAe,CAAC;IAC/D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;IAIlB;;;;;;;;;;;;OAYG;;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;;CAmBL,CAAC"}

package/dist/commonjs/form-field/lib/FormField.js

@@ -4,7 +4,6 @@ exports.FormField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const common_1 = require("@workday/canvas-kit-react/common");
 const layout_1 = require("@workday/canvas-kit-react/layout");
-const FormFieldContainer_1 = require("./FormFieldContainer");
 const FormFieldField_1 = require("./FormFieldField");
 const FormFieldHint_1 = require("./FormFieldHint");
 const FormFieldInput_1 = require("./FormFieldInput");
@@ -70,23 +69,6 @@ exports.FormField = (0, common_1.createContainer)('div')({
          * @stencil formFieldHintStencil
          */
         Hint: FormFieldHint_1.FormFieldHint,
-        /**
-         * `FormField.Field` allows you to properly center `FormField.Label` when the `orientation` is set to `horizontal` and there is hint text..
-         *
-         * ```tsx
-         * <FormField orientation="horizontalStart">
-         *    <FormField.Label>First Name</FormField.Label>
-         *    <FormField.Container>
-         *      <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
-         *      <FormField.Hint>This is your hint text</FormField.Hint>
-         *    </FormField.Container>
-         *  </FormField>
-         * ```
-         *
-         * @stencil formFieldContainerStencil
-         * @deprecated `FormField.Container` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment.
-         */
-        Container: FormFieldContainer_1.FormFieldContainer,
         /**
          * `FormField.Field` allows you to customize container alignment and styles when wrapping your input and hint text.
          * ```tsx

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;AAeH;;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;}" }

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

@@ -58,7 +58,7 @@ 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));}" }
+    base: { name: "22jqnb", 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-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");
 /**
  *  @deprecated ⚠️ `AppletIcon` is deprecated and will be removed in a future major version. Deprecated in v15.0.0.

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/form-field/index.d.ts

@@ -5,7 +5,6 @@ export * from './lib/FormFieldGroupLabel';
 export * from './lib/FormFieldGroupInput';
 export * from './lib/FormFieldGroupList';
 export * from './lib/formFieldStencil';
-export * from './lib/FormFieldContainer';
 export * from './lib/FormFieldHint';
 export * from './lib/FormFieldLabel';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/form-field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../form-field/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../form-field/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}

package/dist/es6/form-field/index.js

@@ -5,6 +5,5 @@ export * from './lib/FormFieldGroupLabel';
 export * from './lib/FormFieldGroupInput';
 export * from './lib/FormFieldGroupList';
 export * from './lib/formFieldStencil';
-export * from './lib/FormFieldContainer';
 export * from './lib/FormFieldHint';
 export * from './lib/FormFieldLabel';