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

package/dist/es6/information-highlight/lib/InformationHighlight.d.ts

@@ -1,17 +1,30 @@
 import { CSProps } from '@workday/canvas-kit-styling';
 interface InformationHighlightProps extends CSProps {
+    children?: React.ReactNode;
 }
 export declare const informationHighlightStencil: import("@workday/canvas-kit-styling").Stencil<{
+    default: {
+        low: {
+            backgroundColor: "var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)))";
+            '& [data-part="information-highlight-icon"]': {
+                [x: string]: "--cnvs-sys-color-fg-default";
+            };
+        };
+        high: {
+            backgroundColor: "var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)))";
+            '& [data-part="information-highlight-icon"]': {
+                [x: string]: "--cnvs-sys-color-fg-default";
+            };
+        };
+    };
     informational: {
         low: {
-            borderInlineStartColor: "var(--cnvs-sys-color-border-info-default, var(--cnvs-sys-color-border-primary-default, oklch(0.6023 0.2032 255.68 / 1)))";
             backgroundColor: "var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)))";
             '& [data-part="information-highlight-icon"]': {
                 [x: string]: "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)))";
             };
         };
         high: {
-            borderInlineStartColor: "var(--cnvs-sys-color-border-info-default, var(--cnvs-sys-color-border-primary-default, oklch(0.6023 0.2032 255.68 / 1)))";
             backgroundColor: "var(--cnvs-sys-color-surface-info-default, var(--cnvs-sys-color-bg-info-softest, oklch(0.6499 0.1912 253.52 / 0.08)))";
             '& [data-part="information-highlight-icon"]': {
                 [x: string]: "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)))";
@@ -20,14 +33,12 @@ export declare const informationHighlightStencil: import("@workday/canvas-kit-st
     };
     caution: {
         low: {
-            borderInlineStartColor: "var(--cnvs-sys-color-border-warning, var(--cnvs-sys-color-border-caution-default, oklch(0.7909 0.1711 70.15 / 1)))";
             backgroundColor: "var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)))";
             '& [data-part="information-highlight-icon"]': {
                 [x: string]: "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1))";
             };
         };
         high: {
-            borderInlineStartColor: "var(--cnvs-sys-color-border-warning, var(--cnvs-sys-color-border-caution-default, oklch(0.7909 0.1711 70.15 / 1)))";
             backgroundColor: "var(--cnvs-sys-color-surface-warning-default, var(--cnvs-sys-color-static-amber-softest, oklch(0.7982 0.159 92.57 / 0.1)))";
             '& [data-part="information-highlight-icon"]': {
                 [x: string]: "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1))";
@@ -36,41 +47,100 @@ export declare const informationHighlightStencil: import("@workday/canvas-kit-st
     };
     critical: {
         low: {
-            borderInlineStartColor: "var(--cnvs-sys-color-border-danger, var(--cnvs-sys-color-border-critical-default, oklch(0.6495 0.2369 30.04 / 1)))";
             backgroundColor: "var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)))";
             '& [data-part="information-highlight-icon"]': {
                 [x: string]: "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)))";
             };
         };
         high: {
-            borderInlineStartColor: "var(--cnvs-sys-color-border-danger, var(--cnvs-sys-color-border-critical-default, oklch(0.6495 0.2369 30.04 / 1)))";
             backgroundColor: "var(--cnvs-sys-color-surface-danger-default, oklch(0.6289 0.2567 29.11 / 0.04))";
             '& [data-part="information-highlight-icon"]': {
                 [x: string]: "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)))";
             };
         };
     };
-}, {}, {}, never, never>;
+    actionPlacement: {
+        bottom: {};
+        end: {
+            width: string;
+            minWidth: number;
+            containerType: string;
+            gridTemplateColumns: string;
+            gridTemplateAreas: string;
+            '& [data-part="information-highlight-icon"]': {
+                gridArea: string;
+                alignSelf: string;
+            };
+            '& [data-part="information-highlight-heading"]': {
+                gridArea: string;
+            };
+            '& [data-part="information-highlight-body"]': {
+                gridArea: string;
+            };
+            '& [data-part="information-highlight-link"]': {
+                gridArea: string;
+                justifySelf: string;
+                marginBlockStart: "var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem))";
+            };
+            '@container (min-width: 28rem)': {
+                gridTemplateColumns: string;
+                gridTemplateAreas: string;
+                '& [data-part="information-highlight-link"]': {
+                    alignSelf: string;
+                    marginBlockStart: number;
+                };
+            };
+        };
+    };
+}, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+    shape: string;
+}, never>, {}, {
+    shape: string;
+}, never, never>, never>;
 export declare const InformationHighlight: import("@workday/canvas-kit-react/common").ElementComponentM<"section", InformationHighlightProps & Partial<{
-    variant: "caution" | "critical" | "informational";
+    variant: "caution" | "default" | "critical" | "informational";
     emphasis: "high" | "low";
+    actionPlacement: "bottom" | "end";
 }> & {} & {}, {
     state: {
-        variant: "caution" | "critical" | "informational";
+        variant: "caution" | "default" | "critical" | "informational";
         emphasis: "high" | "low";
+        actionPlacement: "bottom" | "end";
     };
     events: {};
 }> & {
     Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./parts/Icon").IconProps, {
         state: {
-            variant: "caution" | "critical" | "informational";
+            variant: "caution" | "default" | "critical" | "informational";
+            emphasis: "high" | "low";
+            actionPlacement: "bottom" | "end";
+        };
+        events: {};
+    }>;
+    Heading: import("@workday/canvas-kit-react/common").ElementComponentM<"h3", import("./parts/Heading").InformationHighlightHeadingProps, {
+        state: {
+            variant: "caution" | "default" | "critical" | "informational";
+            emphasis: "high" | "low";
+            actionPlacement: "bottom" | "end";
+        };
+        events: {};
+    }>;
+    Body: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../..").TextProps, {
+        state: {
+            variant: "caution" | "default" | "critical" | "informational";
+            emphasis: "high" | "low";
+            actionPlacement: "bottom" | "end";
+        };
+        events: {};
+    }>;
+    Link: import("@workday/canvas-kit-react/common").ElementComponentM<"a", import("../..").HyperlinkProps, {
+        state: {
+            variant: "caution" | "default" | "critical" | "informational";
             emphasis: "high" | "low";
+            actionPlacement: "bottom" | "end";
         };
         events: {};
     }>;
-    Heading: import("@workday/canvas-kit-react/common").ElementComponent<"h3", import("./parts/Heading").InformationHighlightHeadingProps>;
-    Body: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../..").TextProps>;
-    Link: import("@workday/canvas-kit-react/common").ElementComponent<"a", import("../..").HyperlinkProps>;
 };
 export {};
 //# sourceMappingURL=InformationHighlight.d.ts.map

package/dist/es6/information-highlight/lib/InformationHighlight.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InformationHighlight.d.ts","sourceRoot":"","sources":["../../../../information-highlight/lib/InformationHighlight.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AASzF,UAAU,yBAA0B,SAAQ,OAAO;CAAG;AAEtD,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAyEtC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;CAkB/B,CAAC"}
+{"version":3,"file":"InformationHighlight.d.ts","sourceRoot":"","sources":["../../../../information-highlight/lib/InformationHighlight.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AASzF,UAAU,yBAA0B,SAAQ,OAAO;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AASD,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAgHtC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuB/B,CAAC"}

package/dist/es6/information-highlight/lib/InformationHighlight.js

@@ -1,30 +1,45 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContainer } from '@workday/canvas-kit-react/common';
+import { cornerShapeStencil, createContainer } from '@workday/canvas-kit-react/common';
 import { systemIconStencil } from '@workday/canvas-kit-react/icon';
 import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
-import { base, system } from '@workday/canvas-tokens-web';
+import { system } from '@workday/canvas-tokens-web';
 import { useInformationHighlightModel } from './hooks/useInformationHighlightModel';
 import { Body } from './parts/Body';
 import { InformationHighlightHeading } from './parts/Heading';
 import { Icon } from './parts/Icon';
 import { Link } from './parts/Link';
+const defaultVariantStyles = {
+    backgroundColor: system.legacy.color.surface.alt.default,
+    '& [data-part="information-highlight-icon"]': {
+        [systemIconStencil.vars.color]: system.color.fg.default,
+    },
+};
 export const informationHighlightStencil = createStencil({
-    base: { name: "2ly4x1", styles: "box-sizing:border-box;display:grid;grid-template-columns:min-content;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));outline:0.0625rem solid transparent;border-inline-start:var(--cnvs-base-size-50, 0.25rem) solid transparent;" },
+    extends: cornerShapeStencil,
+    base: { name: "397viu", styles: "box-sizing:border-box;display:grid;grid-template-columns:min-content;gap:0 0.75rem;padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));outline:0.0625rem solid transparent;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));" },
     modifiers: {
+        default: {
+            low: defaultVariantStyles,
+            high: defaultVariantStyles
+        },
         informational: {
-            low: { name: "3mlrml", styles: "border-inline-start-color:var(--cnvs-sys-color-border-info-default, var(--cnvs-sys-color-border-primary-default, oklch(0.6023 0.2032 255.68 / 1)));background-color:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));}" },
-            high: { name: "3zd15a", styles: "border-inline-start-color:var(--cnvs-sys-color-border-info-default, var(--cnvs-sys-color-border-primary-default, oklch(0.6023 0.2032 255.68 / 1)));background-color:var(--cnvs-sys-color-surface-info-default, var(--cnvs-sys-color-bg-info-softest, oklch(0.6499 0.1912 253.52 / 0.08)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));}" }
+            low: { name: "1ic6ql", styles: "background-color:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));}" },
+            high: { name: "1ai682", styles: "background-color:var(--cnvs-sys-color-surface-info-default, var(--cnvs-sys-color-bg-info-softest, oklch(0.6499 0.1912 253.52 / 0.08)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));}" }
         },
         caution: {
-            low: { name: "490z9y", styles: "border-inline-start-color:var(--cnvs-sys-color-border-warning, var(--cnvs-sys-color-border-caution-default, oklch(0.7909 0.1711 70.15 / 1)));background-color:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1));}" },
-            high: { name: "2bqtk", styles: "border-inline-start-color:var(--cnvs-sys-color-border-warning, var(--cnvs-sys-color-border-caution-default, oklch(0.7909 0.1711 70.15 / 1)));background-color:var(--cnvs-sys-color-surface-warning-default, var(--cnvs-sys-color-static-amber-softest, oklch(0.7982 0.159 92.57 / 0.1)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1));}" }
+            low: { name: "432crp", styles: "background-color:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1));}" },
+            high: { name: "qaivq", styles: "background-color:var(--cnvs-sys-color-surface-warning-default, var(--cnvs-sys-color-static-amber-softest, oklch(0.7982 0.159 92.57 / 0.1)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1));}" }
         },
         critical: {
-            low: { name: "13aq42", styles: "border-inline-start-color:var(--cnvs-sys-color-border-danger, var(--cnvs-sys-color-border-critical-default, oklch(0.6495 0.2369 30.04 / 1)));background-color:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));}" },
-            high: { name: "4ahmsw", styles: "border-inline-start-color:var(--cnvs-sys-color-border-danger, var(--cnvs-sys-color-border-critical-default, oklch(0.6495 0.2369 30.04 / 1)));background-color:var(--cnvs-sys-color-surface-danger-default, oklch(0.6289 0.2567 29.11 / 0.04));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));}" }
+            low: { name: "228ks8", styles: "background-color:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));}" },
+            high: { name: "1qmpm8", styles: "background-color:var(--cnvs-sys-color-surface-danger-default, oklch(0.6289 0.2567 29.11 / 0.04));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));}" }
+        },
+        actionPlacement: {
+            bottom: { name: "qfe7l", styles: "" },
+            end: { name: "u9iuc", styles: "width:100%;min-width:0;container-type:inline-size;grid-template-columns:min-content minmax(0, 1fr);grid-template-areas:\n          \"icon heading\"\n          \"icon body\"\n          \"icon link\"\n        ;& [data-part=\"information-highlight-icon\"]{grid-area:icon;align-self:start;}& [data-part=\"information-highlight-heading\"]{grid-area:heading;}& [data-part=\"information-highlight-body\"]{grid-area:body;}& [data-part=\"information-highlight-link\"]{grid-area:link;justify-self:end;margin-block-start:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));}@container (min-width: 28rem){grid-template-columns:min-content minmax(0, 1fr) minmax(0, max-content);grid-template-areas:\n            \"icon heading link\"\n            \"icon body link\"\n          ;& [data-part=\"information-highlight-link\"]{align-self:center;margin-block-start:0;}}" }
         }
     }
-}, "information-highlight-689af3");
+}, "information-highlight-ad98bb");
 export const InformationHighlight = createContainer('section')({
     displayName: 'InformationHighlight',
     modelHook: useInformationHighlightModel,
@@ -34,6 +49,9 @@ export const InformationHighlight = createContainer('section')({
         Body: Body,
         Link: Link,
     },
-})(({ ...elemProps }, Element, model) => {
-    return (_jsx(Element, { ...handleCsProp(elemProps, informationHighlightStencil({ [model.state.variant]: model.state.emphasis })) }));
+})(({ children, ...elemProps }, Element, model) => {
+    return (_jsx(Element, { ...handleCsProp(elemProps, informationHighlightStencil({
+            [model.state.variant]: model.state.emphasis,
+            actionPlacement: model.state.actionPlacement,
+        })), children: children }));
 });

package/dist/es6/information-highlight/lib/hooks/useInformationHighlightModel.d.ts

@@ -1,22 +1,43 @@
 export declare const useInformationHighlightModel: (<TT_Special_Generic>(config?: (Partial<{
-    variant: "caution" | "critical" | "informational";
+    variant: "caution" | "default" | "critical" | "informational";
     emphasis: "high" | "low";
+    /**
+     * Controls where `InformationHighlight.Link` is placed relative to heading and body.
+     * - `bottom` (default): link stacks below heading and body.
+     * - `end`: link is visually placed at the inline end beside content when the container is wide
+     *   enough; in narrower containers it stacks below the body. Placement uses CSS Grid
+     *   only—DOM, keyboard tab order, and screen reader order remain heading, body, then link.
+     * @default 'bottom'
+     */
+    actionPlacement: "bottom" | "end";
 }> & {} & {}) | undefined) => {
     state: {
-        variant: "caution" | "critical" | "informational";
+        variant: "caution" | "default" | "critical" | "informational";
         emphasis: "high" | "low";
+        actionPlacement: "bottom" | "end";
     };
     events: {};
 }) & import("@workday/canvas-kit-react/common").ModelExtras<{
-    variant: "caution" | "critical" | "informational";
+    variant: "caution" | "default" | "critical" | "informational";
     emphasis: "high" | "low";
+    /**
+     * Controls where `InformationHighlight.Link` is placed relative to heading and body.
+     * - `bottom` (default): link stacks below heading and body.
+     * - `end`: link is visually placed at the inline end beside content when the container is wide
+     *   enough; in narrower containers it stacks below the body. Placement uses CSS Grid
+     *   only—DOM, keyboard tab order, and screen reader order remain heading, body, then link.
+     * @default 'bottom'
+     */
+    actionPlacement: "bottom" | "end";
 }, {}, {
-    variant: "caution" | "critical" | "informational";
+    variant: "caution" | "default" | "critical" | "informational";
     emphasis: "high" | "low";
+    actionPlacement: "bottom" | "end";
 }, {}, {
     state: {
-        variant: "caution" | "critical" | "informational";
+        variant: "caution" | "default" | "critical" | "informational";
         emphasis: "high" | "low";
+        actionPlacement: "bottom" | "end";
     };
     events: {};
 }>;

package/dist/es6/information-highlight/lib/hooks/useInformationHighlightModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useInformationHighlightModel.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/hooks/useInformationHighlightModel.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;EAavC,CAAC"}
+{"version":3,"file":"useInformationHighlightModel.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/hooks/useInformationHighlightModel.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,4BAA4B;;;IAIrC;;;;;;;OAOG;;;;;;;;;;;;IAPH;;;;;;;OAOG;;;;;;;;;;;;;EAYL,CAAC"}

package/dist/es6/information-highlight/lib/hooks/useInformationHighlightModel.js

@@ -1,14 +1,24 @@
 import { createModelHook } from '@workday/canvas-kit-react/common';
 export const useInformationHighlightModel = createModelHook({
     defaultConfig: {
-        variant: 'informational',
+        variant: 'default',
         emphasis: 'low',
+        /**
+         * Controls where `InformationHighlight.Link` is placed relative to heading and body.
+         * - `bottom` (default): link stacks below heading and body.
+         * - `end`: link is visually placed at the inline end beside content when the container is wide
+         *   enough; in narrower containers it stacks below the body. Placement uses CSS Grid
+         *   only—DOM, keyboard tab order, and screen reader order remain heading, body, then link.
+         * @default 'bottom'
+         */
+        actionPlacement: 'bottom',
     },
 })(config => {
     return {
         state: {
             variant: config.variant,
             emphasis: config.emphasis,
+            actionPlacement: config.actionPlacement,
         },
         events: {},
     };

package/dist/es6/information-highlight/lib/parts/Body.d.ts

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

package/dist/es6/information-highlight/lib/parts/Body.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Body.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,IAAI,wHAWf,CAAC"}
+{"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Body.tsx"],"names":[],"mappings":"AA8BA,eAAO,MAAM,IAAI;;;;;;;EAcf,CAAC"}

package/dist/es6/information-highlight/lib/parts/Body.js

@@ -1,14 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createComponent } from '@workday/canvas-kit-react/common';
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
 import { Text } from '@workday/canvas-kit-react/text';
 import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
+import { useInformationHighlightModel } from '../hooks/useInformationHighlightModel';
 const informationHighlightBodyStencil = createStencil({
-    base: { name: "3d0l76", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);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));color:var(--cnvs-sys-color-fg-default);grid-column:2;margin-block-end:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));" }
-}, "information-highlight-body-86f4c5");
-export const Body = createComponent('div')({
-    displayName: 'Body',
-    Component: ({ ...elemProps }, ref, Element) => {
-        return (_jsx(Text, { as: Element, ref: ref, ...handleCsProp(elemProps, informationHighlightBodyStencil()) }));
+    parts: {
+        body: 'information-highlight-body',
     },
+    base: { name: "3p0bg5", 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-muted-default);margin-block-end:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));" },
+    modifiers: {
+        actionPlacement: {
+            bottom: { name: "27df9y", styles: "grid-column:2;" },
+            end: { name: "42blca", styles: "margin-block-end:0;" }
+        }
+    }
+}, "information-highlight-body-41e02e");
+export const Body = createSubcomponent('div')({
+    displayName: 'Body',
+    modelHook: useInformationHighlightModel,
+})(({ ...elemProps }, Element, model) => {
+    return (_jsx(Text, { as: Element, ...informationHighlightBodyStencil.parts.body, ...handleCsProp(elemProps, informationHighlightBodyStencil({ actionPlacement: model.state.actionPlacement })) }));
 });

package/dist/es6/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/es6/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/es6/information-highlight/lib/parts/Heading.js

@@ -1,14 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createComponent } from '@workday/canvas-kit-react/common';
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
 import { Heading } from '@workday/canvas-kit-react/text';
 import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
+import { useInformationHighlightModel } from '../hooks/useInformationHighlightModel';
 const informationHighlightHeadingStencil = 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");
-export const InformationHighlightHeading = createComponent('h3')({
-    displayName: 'Heading',
-    Component: ({ size = 'small', ...elemProps }, ref, Element) => {
-        return (_jsx(Heading, { as: Element, ref: ref, size: size, ...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");
+export const InformationHighlightHeading = createSubcomponent('h3')({
+    displayName: 'Heading',
+    modelHook: useInformationHighlightModel,
+})(({ size = 'small', ...elemProps }, Element, model) => {
+    return (_jsx(Heading, { as: Element, size: size, ...informationHighlightHeadingStencil.parts.heading, ...handleCsProp(elemProps, informationHighlightHeadingStencil({ actionPlacement: model.state.actionPlacement })) }));
 });

package/dist/es6/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/es6/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/es6/information-highlight/lib/parts/Icon.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createSubcomponent } from '@workday/canvas-kit-react/common';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
-import { exclamationCircleIcon, exclamationTriangleIcon, infoIcon, } from '@workday/canvas-system-icons-web';
+import { exclamationCircleIcon, exclamationTriangleIcon, infoIcon, layersIcon, } from '@workday/canvas-system-icons-web';
 import { useInformationHighlightModel } from '../hooks/useInformationHighlightModel';
 const defaultIcons = {
+    default: layersIcon,
     informational: infoIcon,
     caution: exclamationTriangleIcon,
     critical: exclamationCircleIcon,
@@ -11,6 +12,6 @@ const defaultIcons = {
 export const Icon = createSubcomponent('span')({
     displayName: 'Icon',
     modelHook: useInformationHighlightModel,
-})(({ icon, ...props }, Element, model) => {
-    return (_jsx(SystemIcon, { as: Element, icon: icon ? icon : defaultIcons[model.state.variant], "data-part": "information-highlight-icon", ...props }));
+})(({ icon, size = 'md', ...props }, Element, model) => {
+    return (_jsx(SystemIcon, { as: Element, icon: icon ? icon : defaultIcons[model.state.variant], size: size, "data-part": "information-highlight-icon", ...props }));
 });

package/dist/es6/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/es6/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/es6/information-highlight/lib/parts/Link.js

@@ -1,14 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Hyperlink } from '@workday/canvas-kit-react/button';
-import { createComponent } from '@workday/canvas-kit-react/common';
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
 import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
+import { useInformationHighlightModel } from '../hooks/useInformationHighlightModel';
 const informationHighlightLinkStencil = 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");
-export const Link = createComponent('a')({
-    displayName: 'Link',
-    Component: ({ ...elemProps }, ref, Element) => {
-        return (_jsx(Hyperlink, { as: Element, ref: ref, ...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");
+export const Link = createSubcomponent('a')({
+    displayName: 'Link',
+    modelHook: useInformationHighlightModel,
+})(({ ...elemProps }, Element, model) => {
+    return (_jsx(Hyperlink, { as: Element, ...informationHighlightLinkStencil.parts.link, ...handleCsProp(elemProps, informationHighlightLinkStencil({ actionPlacement: model.state.actionPlacement })), variant: "secondary" }));
 });

package/dist/es6/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/es6/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/es6/pill/lib/Pill.js

@@ -16,11 +16,11 @@ export const pillStencil = 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/es6/pill/lib/PillIcon.js

@@ -8,7 +8,7 @@ import { component, system } from '@workday/canvas-tokens-web';
 import { usePillModel } from './usePillModel';
 export const pillIconStencil = createStencil({
     extends: 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");
 export const PillIcon = createSubcomponent('span')({
     modelHook: usePillModel,

package/dist/es6/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"}