@workday/canvas-kit-react 16.0.0-alpha.0484-next.0 → 16.0.0-alpha.0486-next.0

package/dist/commonjs/information-highlight/lib/parts/Heading.d.ts

@@ -2,5 +2,12 @@ import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { Heading } from '@workday/canvas-kit-react/text';
 export interface InformationHighlightHeadingProps extends Partial<ExtractProps<typeof Heading, never>> {
 }
-export declare const InformationHighlightHeading: import("@workday/canvas-kit-react/common").ElementComponent<"h3", InformationHighlightHeadingProps>;
+export declare const InformationHighlightHeading: import("@workday/canvas-kit-react/common").ElementComponentM<"h3", InformationHighlightHeadingProps, {
+    state: {
+        variant: "caution" | "default" | "critical" | "informational";
+        emphasis: "high" | "low";
+        actionPlacement: "bottom" | "end";
+    };
+    events: {};
+}>;
 //# sourceMappingURL=Heading.d.ts.map

package/dist/commonjs/information-highlight/lib/parts/Heading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,OAAO,EAAC,MAAM,gCAAgC,CAAC;AAmBvD,MAAM,WAAW,gCACf,SAAQ,OAAO,CAAC,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC,CAAC;CAAG;AAEzD,eAAO,MAAM,2BAA2B,qGAYtC,CAAC"}
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,OAAO,EAAC,MAAM,gCAAgC,CAAC;AA6BvD,MAAM,WAAW,gCACf,SAAQ,OAAO,CAAC,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC,CAAC;CAAG;AAEzD,eAAO,MAAM,2BAA2B;;;;;;;EAetC,CAAC"}

package/dist/commonjs/information-highlight/lib/parts/Heading.js

@@ -6,12 +6,22 @@ const common_1 = require("@workday/canvas-kit-react/common");
 const text_1 = require("@workday/canvas-kit-react/text");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const useInformationHighlightModel_1 = require("../hooks/useInformationHighlightModel");
 const informationHighlightHeadingStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "o4lat", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem));font-size:var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small));color:var(--cnvs-sys-color-fg-default);grid-column:2;margin:0;" }
-}, "information-highlight-heading-578aaa");
-exports.InformationHighlightHeading = (0, common_1.createComponent)('h3')({
-    displayName: 'Heading',
-    Component: ({ size = 'small', ...elemProps }, ref, Element) => {
-        return ((0, jsx_runtime_1.jsx)(text_1.Heading, { as: Element, ref: ref, size: size, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, informationHighlightHeadingStencil()) }));
+    parts: {
+        heading: 'information-highlight-heading',
     },
+    base: { name: "44cies", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);color:var(--cnvs-sys-color-fg-strong);margin:0;margin-block-end:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));" },
+    modifiers: {
+        actionPlacement: {
+            bottom: { name: "1n5jqu", styles: "grid-column:2;" },
+            end: { name: "2ajbn3", styles: "" }
+        }
+    }
+}, "information-highlight-heading-109fd6");
+exports.InformationHighlightHeading = (0, common_1.createSubcomponent)('h3')({
+    displayName: 'Heading',
+    modelHook: useInformationHighlightModel_1.useInformationHighlightModel,
+})(({ size = 'small', ...elemProps }, Element, model) => {
+    return ((0, jsx_runtime_1.jsx)(text_1.Heading, { as: Element, size: size, ...informationHighlightHeadingStencil.parts.heading, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, informationHighlightHeadingStencil({ actionPlacement: model.state.actionPlacement })) }));
 });

package/dist/commonjs/information-highlight/lib/parts/Icon.d.ts

@@ -4,8 +4,9 @@ export interface IconProps extends Partial<ExtractProps<typeof SystemIcon, never
 }
 export declare const Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", IconProps, {
     state: {
-        variant: "caution" | "critical" | "informational";
+        variant: "caution" | "default" | "critical" | "informational";
         emphasis: "high" | "low";
+        actionPlacement: "bottom" | "end";
     };
     events: {};
 }>;

package/dist/commonjs/information-highlight/lib/parts/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAS1D,MAAM,WAAW,SAAU,SAAQ,OAAO,CAAC,YAAY,CAAC,OAAO,UAAU,EAAE,KAAK,CAAC,CAAC;CAAG;AAOrF,eAAO,MAAM,IAAI;;;;;;EAYf,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAU1D,MAAM,WAAW,SAAU,SAAQ,OAAO,CAAC,YAAY,CAAC,OAAO,UAAU,EAAE,KAAK,CAAC,CAAC;CAAG;AAQrF,eAAO,MAAM,IAAI;;;;;;;EAaf,CAAC"}

package/dist/commonjs/information-highlight/lib/parts/Icon.js

@@ -7,6 +7,7 @@ const icon_1 = require("@workday/canvas-kit-react/icon");
 const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 const useInformationHighlightModel_1 = require("../hooks/useInformationHighlightModel");
 const defaultIcons = {
+    default: canvas_system_icons_web_1.layersIcon,
     informational: canvas_system_icons_web_1.infoIcon,
     caution: canvas_system_icons_web_1.exclamationTriangleIcon,
     critical: canvas_system_icons_web_1.exclamationCircleIcon,
@@ -14,6 +15,6 @@ const defaultIcons = {
 exports.Icon = (0, common_1.createSubcomponent)('span')({
     displayName: 'Icon',
     modelHook: useInformationHighlightModel_1.useInformationHighlightModel,
-})(({ icon, ...props }, Element, model) => {
-    return ((0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { as: Element, icon: icon ? icon : defaultIcons[model.state.variant], "data-part": "information-highlight-icon", ...props }));
+})(({ icon, size = 'md', ...props }, Element, model) => {
+    return ((0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { as: Element, icon: icon ? icon : defaultIcons[model.state.variant], size: size, "data-part": "information-highlight-icon", ...props }));
 });

package/dist/commonjs/information-highlight/lib/parts/Link.d.ts

@@ -1,2 +1,9 @@
-export declare const Link: import("@workday/canvas-kit-react/common").ElementComponent<"a", import("@workday/canvas-kit-react/button").HyperlinkProps>;
+export declare const Link: import("@workday/canvas-kit-react/common").ElementComponentM<"a", import("@workday/canvas-kit-react/button").HyperlinkProps, {
+    state: {
+        variant: "caution" | "default" | "critical" | "informational";
+        emphasis: "high" | "low";
+        actionPlacement: "bottom" | "end";
+    };
+    events: {};
+}>;
 //# sourceMappingURL=Link.d.ts.map

package/dist/commonjs/information-highlight/lib/parts/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Link.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,IAAI,6HAWf,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Link.tsx"],"names":[],"mappings":"AA+BA,eAAO,MAAM,IAAI;;;;;;;EAef,CAAC"}

package/dist/commonjs/information-highlight/lib/parts/Link.js

@@ -6,12 +6,22 @@ const button_1 = require("@workday/canvas-kit-react/button");
 const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const useInformationHighlightModel_1 = require("../hooks/useInformationHighlightModel");
 const informationHighlightLinkStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "8yuf1", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));grid-column:2;justify-self:start;color:var(--cnvs-sys-color-fg-default);" }
-}, "information-highlight-link-654856");
-exports.Link = (0, common_1.createComponent)('a')({
-    displayName: 'Link',
-    Component: ({ ...elemProps }, ref, Element) => {
-        return ((0, jsx_runtime_1.jsx)(button_1.Hyperlink, { as: Element, ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, informationHighlightLinkStencil()) }));
+    parts: {
+        link: 'information-highlight-link',
     },
+    base: { name: "3n3dpi", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-normal, 400);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);color:var(--cnvs-sys-color-fg-default);" },
+    modifiers: {
+        actionPlacement: {
+            bottom: { name: "46odf0", styles: "grid-column:2;justify-self:start;" },
+            end: { name: "188vb8", styles: "margin:0;max-width:100%;" }
+        }
+    }
+}, "information-highlight-link-56e571");
+exports.Link = (0, common_1.createSubcomponent)('a')({
+    displayName: 'Link',
+    modelHook: useInformationHighlightModel_1.useInformationHighlightModel,
+})(({ ...elemProps }, Element, model) => {
+    return ((0, jsx_runtime_1.jsx)(button_1.Hyperlink, { as: Element, ...informationHighlightLinkStencil.parts.link, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, informationHighlightLinkStencil({ actionPlacement: model.state.actionPlacement })), variant: "secondary" }));
 });

package/dist/commonjs/pill/lib/Pill.d.ts

@@ -71,17 +71,7 @@ export declare const pillStencil: import("@workday/canvas-kit-styling").Stencil<
         medium: {
             fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
             lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
-            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))"; /**
-             * This component renders an `icon`. By default it renders a `plusIcon` but it can be overridden by
-             * providing an icon to the `icon` prop. You must provide an `aria-label` for the icon.
-             *
-             * ```tsx
-             * <Pill onClick={() => console.warn('clicked')}>
-             *   <Pill.Icon aria-label='Add user' />
-             *   <Pill.Label>Regina Skeltor</Pill.Label>
-             * </Pill>
-             * ```
-             */
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
             paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem))";
             height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
             gap: "var(--cnvs-base-size-75, 0.375rem)";

package/dist/commonjs/pill/lib/Pill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAW5E,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2HAiNpB;;;;;;;;;;eAUG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAlFL,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;IAIb;;;;;;;;;;OAUG;;;;;;;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;;OAUG;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;CA8BL,CAAC"}
+{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAW5E,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAuItB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;IAIb;;;;;;;;;;OAUG;;;;;;;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;;OAUG;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;CA8BL,CAAC"}

package/dist/commonjs/pill/lib/Pill.js

@@ -19,11 +19,11 @@ exports.pillStencil = (0, canvas_kit_styling_1.createStencil)({
     vars: {
         maxWidth: '',
     },
-    base: { name: "wap3y", styles: "box-sizing:border-box;display:initial;flex-direction:row;align-items:center;border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));line-height:var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem));box-shadow:none;outline:none;font-weight:var(--cnvs-sys-font-weight-medium);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:fit-content;padding:0.125rem var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));position:relative;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));max-width:var(--maxWidth-pill-4e10dd);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--background-button-a19f67:var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)));--border-button-a19f67:var(--cnvs-sys-color-border-transparent);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:currentColor;--borderColor-pill-count-d41635:transparent;&:has(span){display:flex;line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));}&:hover, &.hover{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%));--border-button-a19f67:var(--cnvs-sys-color-border-transparent);--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:currentColor;--borderColor-pill-count-d41635:transparent;}&:active, &.active{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:currentColor;--borderColor-pill-count-d41635:transparent;}&:focus-visible, &.focus{--border-button-a19f67:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));--color-system-icon-c9acc3:currentColor;box-shadow:0 0 0 1px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1)), 0 0 0 1px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}&:disabled, &.disabled{--background-button-a19f67:var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)));--label-button-a19f67:var(--cnvs-sys-color-fg-disabled);--color-system-icon-c9acc3:currentColor;--backgroundColor-pill-count-d41635:var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)));--borderColor-pill-count-d41635:transparent;}" },
+    base: { name: "32jtf8", styles: "box-sizing:border-box;display:initial;flex-direction:row;align-items:center;border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-normal, 400);line-height:var(--cnvs-sys-line-height-subtext-md, 1rem);font-size:var(--cnvs-sys-font-size-subtext-md, 0.75rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, 0.02rem);box-shadow:none;outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:fit-content;padding:0.125rem var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));position:relative;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));max-width:var(--maxWidth-pill-4e10dd);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--background-button-a19f67:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));--border-button-a19f67:var(--cnvs-sys-color-border-transparent);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:currentColor;--borderColor-pill-count-d41635:transparent;&:has(span){display:flex;line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));}&:hover, &.hover{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(0.0392 * 100%));--border-button-a19f67:var(--cnvs-sys-color-border-transparent);--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:currentColor;--borderColor-pill-count-d41635:transparent;}&:active, &.active{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(0.0745 * 100%));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:currentColor;--borderColor-pill-count-d41635:transparent;}&:focus-visible, &.focus{--border-button-a19f67:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));--color-system-icon-c9acc3:currentColor;box-shadow:0 0 0 1px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1)), 0 0 0 1px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:currentColor;--backgroundColor-pill-count-d41635:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));--borderColor-pill-count-d41635:transparent;}" },
     modifiers: {
         variant: {
-            readOnly: { name: "2aj54y", styles: "border:0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));cursor:default;--background-button-a19f67:var(--cnvs-sys-color-bg-default);&:hover, &.hover{border-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));--background-button-a19f67:var(--cnvs-sys-color-bg-default);}&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-bg-default);}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-bg-default);}&:disabled, &.disabled{--background-button-a19f67:var(--cnvs-sys-color-bg-default);}" },
-            removable: { name: "1nvefh", styles: "&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-bg-alt-default);--border-button-a19f67:var(--cnvs-sys-color-border-input-default);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);box-shadow:none;}&:hover, &.hover{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%));--backgroundColor-pill-count-d41635:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));}&:active, &.active{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%));--backgroundColor-pill-count-d41635:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));}&:disabled, &.disabled{--background-button-a19f67:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-c9acc3:currentColor;}cursor:default;overflow:revert;position:relative;" }
+            readOnly: { name: "3lsndq", styles: "border:0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));cursor:default;--background-button-a19f67:var(--cnvs-sys-color-bg-default);--label-button-a19f67:var(--cnvs-sys-color-fg-default);&:hover, &.hover{border-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));--background-button-a19f67:var(--cnvs-sys-color-bg-default);}&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-bg-default);}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-bg-default);}&:disabled, &.disabled{--background-button-a19f67:var(--cnvs-sys-color-bg-default);}" },
+            removable: { name: "1ldmjv", styles: "&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-bg-alt-default);--border-button-a19f67:var(--cnvs-sys-color-border-input-default);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);box-shadow:none;}&:hover, &.hover{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(0.0392 * 100%));--backgroundColor-pill-count-d41635:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));}&:active, &.active{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(0.0745 * 100%));--backgroundColor-pill-count-d41635:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));}&:disabled, &.disabled{--background-button-a19f67:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-c9acc3:currentColor;}cursor:default;overflow:revert;position:relative;" }
         }
     }
 }, "pill-4e10dd");

package/dist/commonjs/pill/lib/PillIcon.js

@@ -11,7 +11,7 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const usePillModel_1 = require("./usePillModel");
 exports.pillIconStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: icon_1.systemIconStencil,
-    base: { name: "81wkb", styles: "box-sizing:border-box;margin-inline-start:calc(var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) * -1);--size-svg-bca693:var(--cnvs-component-system-icon-size-sm, 1.125rem);flex:0 0 auto;" }
+    base: { name: "81wkb", styles: "box-sizing:border-box;margin-inline-start:calc(var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) * -1);--size-svg-bca693:var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4, 1rem));flex:0 0 auto;" }
 }, "pill-icon-ded2a2");
 exports.PillIcon = (0, common_1.createSubcomponent)('span')({
     modelHook: usePillModel_1.usePillModel,

package/dist/commonjs/pill/lib/PillIconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAQ9F,MAAM,WAAW,mBAAoB,SAAQ,OAAO,CAAC,eAAe,CAAC;IACnE;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA4ChC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;EAoB1B,CAAC"}
+{"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAQ9F,MAAM,WAAW,mBAAoB,SAAQ,OAAO,CAAC,eAAe,CAAC;IACnE;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAkDhC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;EAoB1B,CAAC"}

package/dist/commonjs/pill/lib/PillIconButton.js

@@ -12,8 +12,8 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const usePillModel_1 = require("./usePillModel");
 exports.pillIconButtonStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: button_1.buttonStencil,
-    base: { name: "1zp375", styles: "box-sizing:border-box;margin-inline-end:calc(0.4375rem * -1);margin-inline-start:calc(0.125rem * -1);border-radius:0.125rem;height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));padding:0;overflow:visible;flex:0 0 auto;--border-button-a19f67:var(--cnvs-sys-color-border-transparent);--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);--size-svg-bca693:var(--cnvs-component-system-icon-size-sm, 1.125rem);::after{content:\"\";height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));position:absolute;left:calc(0.4375rem * -1);bottom:calc(0.4375rem * -1);margin:0;pointer-events:all;}&:focus-visible, &.focus{--border-button-a19f67:var(--cnvs-sys-color-border-transparent);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-transparent), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:hover, &.hover{--border-button-a19f67:var(--cnvs-sys-color-border-transparent);}&:active, &.active{--border-button-a19f67:var(--cnvs-sys-color-border-transparent);}&:disabled, &.disabled{--border-button-a19f67:var(--cnvs-sys-color-border-transparent);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}" }
-}, "pill-icon-button-e12468");
+    base: { name: "21irrl", styles: "box-sizing:border-box;margin-inline-end:calc(0.4375rem * -1);margin-inline-start:0;--borderRadius-button-a19f67:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));padding:0;overflow:visible;flex:0 0 auto;--border-button-a19f67:var(--cnvs-sys-color-border-transparent);--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);--size-svg-bca693:var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4, 1rem));::after{content:\"\";box-sizing:border-box;position:absolute;top:calc(0.3125rem * -1);right:calc(0.3125rem * -1);bottom:calc(0.3125rem * -1);left:calc(0.3125rem * -1);margin:0;pointer-events:all;border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));border-style:solid;border-width:0.125rem;border-color:transparent;}&:focus-visible, &.focus{--border-button-a19f67:var(--cnvs-sys-color-border-transparent);box-shadow:none;::after{border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}}&:hover, &.hover{--border-button-a19f67:var(--cnvs-sys-color-border-transparent);}&:active, &.active{--border-button-a19f67:var(--cnvs-sys-color-border-transparent);}&:disabled, &.disabled{--border-button-a19f67:var(--cnvs-sys-color-border-transparent);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}" }
+}, "pill-icon-button-81e81c");
 exports.PillIconButton = (0, common_1.createSubcomponent)('button')({
     modelHook: usePillModel_1.usePillModel,
 })(({ size, icon, children, 'aria-label': ariaLabel = '', ...elemProps }, Element, model) => {

package/dist/commonjs/skeleton/lib/parts/SkeletonHeader.d.ts

@@ -2,7 +2,7 @@ import { CSProps } from '@workday/canvas-kit-styling';
 export interface SkeletonHeaderProps extends CSProps {
     /**
      * The background color of the skeleton
-     * @default `system.color.bg.alt.strong`
+     * @default Surface shimmer gradient (`surface.alt.strong` → `surface.loading`); override with a solid color
      */
     backgroundColor?: string;
     /**
@@ -20,10 +20,18 @@ export declare const skeletonHeaderStencil: import("@workday/canvas-kit-styling"
     width: string;
     height: string;
     backgroundColor: string;
+}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+    backgroundColor: string;
 }, never>, {}, {
+    backgroundColor: string;
+}, never, never>>, {}, {
     width: string;
     height: string;
     backgroundColor: string;
-}, never, never>;
+}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+    backgroundColor: string;
+}, never>, {}, {
+    backgroundColor: string;
+}, never, never>, never>;
 export declare const SkeletonHeader: import("@workday/canvas-kit-react/common").ElementComponent<"div", SkeletonHeaderProps>;
 //# sourceMappingURL=SkeletonHeader.d.ts.map

package/dist/commonjs/skeleton/lib/parts/SkeletonHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonHeader.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/SkeletonHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAA8C,MAAM,6BAA6B,CAAC;AAKjG,MAAM,WAAW,mBAAoB,SAAQ,OAAO;IAClD;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,qBAAqB;;;;;;;;gBAahC,CAAC;AAEH,eAAO,MAAM,cAAc,yFAoBzB,CAAC"}
+{"version":3,"file":"SkeletonHeader.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/SkeletonHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAA8C,MAAM,6BAA6B,CAAC;AAKjG,MAAM,WAAW,mBAAoB,SAAQ,OAAO;IAClD;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;wBAahC,CAAC;AAEH,eAAO,MAAM,cAAc,yFAoBzB,CAAC"}

package/dist/commonjs/skeleton/lib/parts/SkeletonHeader.js

@@ -7,13 +7,14 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const SkeletonShape_1 = require("./SkeletonShape");
 exports.skeletonHeaderStencil = (0, canvas_kit_styling_1.createStencil)({
+    extends: SkeletonShape_1.skeletonSurfaceFillStencil,
     vars: {
         width: '',
         height: '',
         backgroundColor: '',
     },
-    base: { name: "15s9jw", styles: "box-sizing:border-box;background-color:var(--backgroundColor-skeleton-header-919591, var(--cnvs-sys-color-surface-loading, oklch(0.3057 0.079 256.22 / 0.13)));border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));height:var(--height-skeleton-header-919591, var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem)));width:var(--width-skeleton-header-919591);margin-block-end:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));" }
-}, "skeleton-header-919591");
+    base: { name: "3kkoto", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));height:var(--height-skeleton-header-5b02f8, var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem)));width:var(--width-skeleton-header-5b02f8);margin-block-end:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));" }
+}, "skeleton-header-5b02f8");
 exports.SkeletonHeader = (0, common_1.createComponent)('div')({
     displayName: 'Skeleton.Header',
     Component: ({ width = '100%', backgroundColor, height, ...elemProps }, ref, Element) => ((0, jsx_runtime_1.jsx)(SkeletonShape_1.SkeletonShape, { ref: ref, as: Element, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.skeletonHeaderStencil)({

package/dist/commonjs/skeleton/lib/parts/SkeletonShape.d.ts

@@ -1,4 +1,10 @@
 import { CSProps } from '@workday/canvas-kit-styling';
+/** Default Surface/Shimmer fill for skeleton placeholders (Shape, Header, Text lines). */
+export declare const skeletonSurfaceFillStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+    backgroundColor: string;
+}, never>, {}, {
+    backgroundColor: string;
+}, never, never>;
 export interface SkeletonShapeProps extends CSProps {
     /**
      *  The width of the shape in `px` or `%`.
@@ -17,7 +23,7 @@ export interface SkeletonShapeProps extends CSProps {
     borderRadius?: number | string;
     /**
      * The background color of the skeleton
-     * @default `system.color.bg.alt.strong`
+     * @default Surface shimmer gradient (`surface.alt.strong` → `surface.loading`); override with a solid color
      */
     backgroundColor?: string;
 }
@@ -26,11 +32,19 @@ export declare const skeletonShapeStencil: import("@workday/canvas-kit-styling")
     height: string;
     borderRadius: string;
     backgroundColor: string;
+}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+    backgroundColor: string;
 }, never>, {}, {
+    backgroundColor: string;
+}, never, never>>, {}, {
     width: string;
     height: string;
     borderRadius: string;
     backgroundColor: string;
-}, never, never>;
+}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+    backgroundColor: string;
+}, never>, {}, {
+    backgroundColor: string;
+}, never, never>, never>;
 export declare const SkeletonShape: import("@workday/canvas-kit-react/common").ElementComponent<"div", SkeletonShapeProps>;
 //# sourceMappingURL=SkeletonShape.d.ts.map

package/dist/commonjs/skeleton/lib/parts/SkeletonShape.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonShape.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/SkeletonShape.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAA8C,MAAM,6BAA6B,CAAC;AAGjG,MAAM,WAAW,kBAAmB,SAAQ,OAAO;IACjD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,oBAAoB;;;;;;;;;;gBAc/B,CAAC;AAEH,eAAO,MAAM,aAAa,wFAsBxB,CAAC"}
+{"version":3,"file":"SkeletonShape.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/SkeletonShape.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAA8C,MAAM,6BAA6B,CAAC;AAGjG,0FAA0F;AAC1F,eAAO,MAAM,0BAA0B;;;;gBAcrC,CAAC;AAEH,MAAM,WAAW,kBAAmB,SAAQ,OAAO;IACjD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;wBAc/B,CAAC;AAEH,eAAO,MAAM,aAAa,wFAsBxB,CAAC"}

package/dist/commonjs/skeleton/lib/parts/SkeletonShape.js

@@ -1,19 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SkeletonShape = exports.skeletonShapeStencil = void 0;
+exports.SkeletonShape = exports.skeletonShapeStencil = exports.skeletonSurfaceFillStencil = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+/** Default Surface/Shimmer fill for skeleton placeholders (Shape, Header, Text lines). */
+exports.skeletonSurfaceFillStencil = (0, canvas_kit_styling_1.createStencil)({
+    vars: {
+        backgroundColor: '',
+    },
+    base: { name: "4aw72", styles: "box-sizing:border-box;background:var(--backgroundColor-skeleton-surface-fill-2acf91, linear-gradient(to left, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))), var(--cnvs-sys-color-surface-loading, oklch(0.3057 0.079 256.22 / 0.13))));border:0.0625rem solid transparent;@media (forced-colors: active){border-color:CanvasText;}" }
+}, "skeleton-surface-fill-2acf91");
 exports.skeletonShapeStencil = (0, canvas_kit_styling_1.createStencil)({
+    extends: exports.skeletonSurfaceFillStencil,
     vars: {
         width: '',
         height: '',
         borderRadius: '',
         backgroundColor: '',
     },
-    base: { name: "37nwjn", styles: "box-sizing:border-box;background-color:var(--backgroundColor-skeleton-shape-5b810e, var(--cnvs-sys-color-surface-loading, oklch(0.3057 0.079 256.22 / 0.13)));border-radius:var(--borderRadius-skeleton-shape-5b810e, 0);height:var(--height-skeleton-shape-5b810e, 100%);width:var(--width-skeleton-shape-5b810e);margin-block-end:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));" }
-}, "skeleton-shape-5b810e");
+    base: { name: "39irtf", styles: "box-sizing:border-box;border-radius:var(--borderRadius-skeleton-shape-068fb0, 0);height:var(--height-skeleton-shape-068fb0, 100%);width:var(--width-skeleton-shape-068fb0);margin-block-end:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));" }
+}, "skeleton-shape-068fb0");
 exports.SkeletonShape = (0, common_1.createComponent)('div')({
     displayName: 'Skeleton.Shape',
     Component: ({ width = '100%', height, backgroundColor, borderRadius, ...elemProps }, ref, Element) => {

package/dist/commonjs/skeleton/lib/parts/SkeletonText.d.ts

@@ -7,14 +7,23 @@ export interface SkeletonTextProps extends CSProps {
     lineCount?: number;
     /**
      * The background color of the skeleton
-     * @default `system.color.bg.alt.strong`
+     * @default Surface shimmer gradient (`surface.alt.strong` → `surface.loading`); override with a solid color
      */
     backgroundColor?: string;
 }
-export declare const skeletonTextStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+export declare const skeletonTextLineStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+    backgroundColor: string;
+}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+    backgroundColor: string;
+}, never>, {}, {
+    backgroundColor: string;
+}, never, never>>, {}, {
+    backgroundColor: string;
+}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
     backgroundColor: string;
 }, never>, {}, {
     backgroundColor: string;
-}, never, never>;
+}, never, never>, never>;
+export declare const skeletonTextStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
 export declare const SkeletonText: import("@workday/canvas-kit-react/common").ElementComponent<"div", SkeletonTextProps>;
 //# sourceMappingURL=SkeletonText.d.ts.map

package/dist/commonjs/skeleton/lib/parts/SkeletonText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonText.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/SkeletonText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AAGzF,MAAM,WAAW,iBAAkB,SAAQ,OAAO;IAChD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,mBAAmB;;;;gBAkB9B,CAAC;AAEH,eAAO,MAAM,YAAY,uFAYvB,CAAC"}
+{"version":3,"file":"SkeletonText.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/SkeletonText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAA8B,MAAM,6BAA6B,CAAC;AAKjF,MAAM,WAAW,iBAAkB,SAAQ,OAAO;IAChD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,uBAAuB;;;;;;;;;;;;wBAalC,CAAC;AAEH,eAAO,MAAM,mBAAmB,iJAO9B,CAAC;AAEH,eAAO,MAAM,YAAY,uFAgBvB,CAAC"}

package/dist/commonjs/skeleton/lib/parts/SkeletonText.js

@@ -1,20 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SkeletonText = exports.skeletonTextStencil = void 0;
+exports.SkeletonText = exports.skeletonTextStencil = exports.skeletonTextLineStencil = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-exports.skeletonTextStencil = (0, canvas_kit_styling_1.createStencil)({
+const SkeletonShape_1 = require("./SkeletonShape");
+exports.skeletonTextLineStencil = (0, canvas_kit_styling_1.createStencil)({
+    extends: SkeletonShape_1.skeletonSurfaceFillStencil,
     vars: {
         backgroundColor: '',
     },
-    base: { name: "452cl4", styles: "box-sizing:border-box;margin-block-end:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));& [data-part=\"skeleton-text-lines\"]{background-color:var(--backgroundColor-skeleton-text-4b1ca5, var(--cnvs-sys-color-surface-loading, oklch(0.3057 0.079 256.22 / 0.13)));height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));margin-block-end:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));width:100%;}& [data-part=\"skeleton-text-lines\"]:last-child{width:60%;}" }
-}, "skeleton-text-4b1ca5");
+    base: { name: "7qscx", styles: "box-sizing:border-box;height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));margin-block-end:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));border-radius:var(--cnvs-sys-shape-xxxl, 2rem);width:100%;display:block;" }
+}, "skeleton-text-line-318cd1");
+exports.skeletonTextStencil = (0, canvas_kit_styling_1.createStencil)({
+    base: { name: "1az8g", styles: "box-sizing:border-box;margin-block-end:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));& [data-part=\"skeleton-text-lines\"]:last-child{width:60%;}" }
+}, "skeleton-text-175643");
 exports.SkeletonText = (0, common_1.createComponent)('div')({
     displayName: 'Skeleton.Text',
     Component: ({ backgroundColor, lineCount = 2, ...elemProps }, ref, Element) => {
         const lines = new Array(lineCount).fill(null);
-        return lineCount > 0 ? ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.skeletonTextStencil)({ backgroundColor })), children: lines.map((_value, index) => ((0, jsx_runtime_1.jsx)("div", { "data-part": 'skeleton-text-lines' }, index))) })) : null;
+        return lineCount > 0 ? ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.skeletonTextStencil)()), children: lines.map((_value, index) => ((0, jsx_runtime_1.jsx)("div", { "data-part": "skeleton-text-lines", ...(0, canvas_kit_styling_1.handleCsProp)({}, (0, exports.skeletonTextLineStencil)({ backgroundColor })) }, index))) })) : null;
     },
 });

package/dist/es6/badge/lib/CountBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CountBadge.d.ts","sourceRoot":"","sources":["../../../../badge/lib/CountBadge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAiD,MAAM,6BAA6B,CAAC;AAYpG,MAAM,WAAW,eAAgB,SAAQ,OAAO;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAgDD;;GAEG;AACH,eAAO,MAAM,UAAU,sFAerB,CAAC"}
+{"version":3,"file":"CountBadge.d.ts","sourceRoot":"","sources":["../../../../badge/lib/CountBadge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAiD,MAAM,6BAA6B,CAAC;AAYpG,MAAM,WAAW,eAAgB,SAAQ,OAAO;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA6CD;;GAEG;AACH,eAAO,MAAM,UAAU,sFAerB,CAAC"}

package/dist/es6/badge/lib/CountBadge.js

@@ -5,21 +5,21 @@ import { system } from '@workday/canvas-tokens-web';
 const grow = keyframes({ name: "2wns1w", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
 // .cnvs-count-badge
 const countBadgeStencil = createStencil({
-    base: { name: "397246", styles: "box-sizing:border-box;align-items:center;animation:animation-2wns1w 0.2s ease;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));display:inline-flex;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));font-weight:var(--cnvs-sys-font-weight-bold);height:1.25rem;justify-content:center;line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));min-width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));padding:0 0.40625rem;background:var(--cnvs-sys-color-accent-danger, var(--cnvs-sys-color-bg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);" },
+    base: { name: "43syuc", styles: "box-sizing:border-box;align-items:center;animation:animation-2wns1w 0.2s ease;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));display:inline-flex;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-md, 1rem);font-size:var(--cnvs-sys-font-size-subtext-md, 0.75rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, 0.02rem);height:1.25rem;justify-content:center;min-width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));padding:0 var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));background:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));color:var(--cnvs-sys-color-fg-inverse);" },
     modifiers: {
         variant: {
             // .cnvs-count-badge--variant-inverse
-            inverse: { name: "49jrld", styles: "background:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));color:var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));" }
+            inverse: { name: "2y791n", styles: "background:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));color:var(--cnvs-sys-color-fg-strong);" }
         },
         emphasis: {
-            high: { name: "4cpkxf", styles: "" },
-            low: { name: "1csyfk", styles: "background:var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11)));color:var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));" }
+            high: { name: "405v33", styles: "" },
+            low: { name: "1bgy87", styles: "background:var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11)));color:var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));" }
         }
     },
     compound: [
         {
             modifiers: { variant: 'inverse', emphasis: 'low' },
-            styles: { name: "1k5xsi", styles: "background:var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));color:var(--cnvs-sys-color-fg-inverse);" }
+            styles: { name: "13bf4h", styles: "background:var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));color:var(--cnvs-sys-color-fg-inverse);" }
         }
     ]
 }, "count-badge-524876");

package/dist/es6/banner/lib/Banner.d.ts

@@ -40,7 +40,11 @@ export declare const bannerStencil: import("@workday/canvas-kit-styling").Stenci
             width: string;
         };
     };
-}, {}, {}, never, never>;
+}, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+    shape: string;
+}, never>, {}, {
+    shape: string;
+}, never, never>, never>;
 /**
  * `Banner` is a container component rendered as a `<button>` element that is responsible for creating
  * a `BannerModel` and sharing it with its subcomponents using React context.

package/dist/es6/banner/lib/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../banner/lib/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,YAAY,EAA6B,MAAM,kCAAkC,CAAC;AAE1F,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AASnE,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACnE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAyExB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;IAIf;;;;;;;OAOG;;;;;;;;;IAEH;;;;;;;OAOG;;;;;;;;;IAEH;;;;;;;;OAQG;;;;;;;;;CAcL,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../banner/lib/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AASnE,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACnE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAwExB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;IAIf;;;;;;;OAOG;;;;;;;;;IAEH;;;;;;;OAOG;;;;;;;;;IAEH;;;;;;;;OAQG;;;;;;;;;CAiBL,CAAC"}

package/dist/es6/banner/lib/Banner.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContainer, focusRing } from '@workday/canvas-kit-react/common';
+import { cornerShapeStencil, createContainer, focusRing, } from '@workday/canvas-kit-react/common';
 import { systemIconStencil } from '@workday/canvas-kit-react/icon';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { colorSpace, createStencil, cssVar, px2rem } from '@workday/canvas-kit-styling';
@@ -9,18 +9,19 @@ import { BannerIcon } from './BannerIcon';
 import { BannerLabel } from './BannerLabel';
 import { useBannerModel } from './hooks';
 export const bannerStencil = createStencil({
-    base: { name: "1ooz34", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default), Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));border:0;display:flex;align-items:center;text-align:left;border-start-start-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));border-start-end-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));border-end-start-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));border-end-end-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));box-shadow:var(--cnvs-sys-depth-5);gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));cursor:pointer;transition:background-color 120ms linear;outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) solid transparent;&:focus-visible, &.focus{outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) double transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
+    extends: cornerShapeStencil,
+    base: { name: "2md52q", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default), Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));padding-inline:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));padding-block:0.625rem;border:0;display:flex;align-items:center;text-align:left;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));cursor:pointer;transition:background-color 120ms linear;outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) solid transparent;box-shadow:var(--cnvs-sys-depth-5);&:focus-visible, &.focus{outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) double transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}" },
     modifiers: {
         hasErrors: {
-            true: { name: "1yy13f", styles: "background-color:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));}& [data-part=\"exclamation-circle-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);}" },
-            false: { name: "31cnpr", styles: "background-color:var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1));color:var(--cnvs-sys-color-fg-contrast-default);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1)) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));}& [data-part=\"exclamation-triangle-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse, currentColor);--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1));}" }
+            true: { name: "17py5t", styles: "background-color:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-hover, oklch(0.0847 0 0 / 0.17)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));}& [data-part=\"exclamation-circle-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);}" },
+            false: { name: "3cdi5a", styles: "background-color:var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1));color:var(--cnvs-sys-color-fg-contrast-default);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1)) , var(--cnvs-sys-color-accent-overlay-hover, oklch(0.0847 0 0 / 0.17)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));}& [data-part=\"exclamation-triangle-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse, currentColor);--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1));}" }
         },
         isSticky: {
-            true: { name: "2hgqx3", styles: "width:13.875rem;border-start-end-radius:0;border-end-end-radius:0;" },
-            false: { name: "4be9bg", styles: "width:20.5rem;" }
+            true: { name: "3wgdf7", styles: "width:13.875rem;border-start-end-radius:0;border-end-end-radius:0;" },
+            false: { name: "1bd139", styles: "width:20.5rem;" }
         }
     }
-}, "banner-1de0cd");
+}, "banner-5b2eb3");
 /**
  * `Banner` is a container component rendered as a `<button>` element that is responsible for creating
  * a `BannerModel` and sharing it with its subcomponents using React context.
@@ -86,5 +87,8 @@ export const Banner = createContainer('button')({
         ActionText: BannerActionText,
     },
 })(({ children, ...elemProps }, Element, model) => {
-    return (_jsx(Element, { ...mergeStyles(elemProps, bannerStencil({ hasErrors: model.state.hasError, isSticky: model.state.isSticky })), children: children }));
+    return (_jsx(Element, { ...mergeStyles(elemProps, bannerStencil({
+            hasErrors: model.state.hasError ? 'true' : 'false',
+            isSticky: model.state.isSticky ? 'true' : 'false',
+        })), children: children }));
 });

package/dist/es6/banner/lib/hooks/useBannerIcon.d.ts

@@ -12,6 +12,6 @@ export declare const useBannerIcon: import("@workday/canvas-kit-react/common").B
     events: {};
 }, {
     readonly icon: CanvasSystemIcon;
-    readonly size: 24;
+    readonly size: 20;
 }>;
 //# sourceMappingURL=useBannerIcon.d.ts.map

package/dist/es6/banner/lib/hooks/useBannerIcon.js

@@ -9,6 +9,6 @@ export const useBannerIcon = createElemPropsHook(useBannerModel)(({ state }) =>
     const icon = state.hasError ? exclamationCircleIcon : exclamationTriangleIcon;
     return {
         icon: icon,
-        size: 24,
+        size: 20,
     };
 });