@workday/canvas-kit-preview-react 14.0.0-alpha.1211-next.0 → 14.0.0-alpha.1213-next.0

package/dist/es6/pill/lib/PillAvatar.d.ts

@@ -1,228 +1,217 @@
-import { AvatarProps } from '@workday/canvas-kit-react/avatar';
+import { AvatarProps } from '@workday/canvas-kit-preview-react/avatar';
 export interface PillAvatarProps extends AvatarProps {
 }
 export declare const pillAvatarStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
-    variant: {
-        light: ({ iconPart }: {
-            size: string;
-        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
-        }>) => {
-            backgroundColor: "--cnvs-sys-color-bg-alt-default";
-            "[data-part=\"avatar-icon\"]": {
-                [x: string]: "--cnvs-sys-color-fg-default";
-            };
-        };
-        dark: ({ iconPart }: {
-            size: string;
-        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
+    imageLoaded: {
+        false: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
         }>) => {
-            backgroundColor: "--cnvs-sys-color-bg-primary-default";
-            "[data-part=\"avatar-icon\"]": {
-                [x: string]: "--cnvs-sys-color-fg-inverse";
-            };
-        };
-    };
-    size: {
-        extraSmall: ({ iconPart }: {
-            size: string;
-        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
-        }>) => {
-            width: "--cnvs-sys-space-x4";
-            height: "--cnvs-sys-space-x4";
-            "[data-part=\"avatar-icon\"]": {
-                [x: string]: string;
-            };
-        };
-        small: ({ iconPart }: {
-            size: string;
-        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
-        }>) => {
-            width: "--cnvs-sys-space-x6";
-            height: "--cnvs-sys-space-x6";
-            "[data-part=\"avatar-icon\"]": {
-                [x: string]: string;
-            };
-        };
-        medium: ({ iconPart }: {
-            size: string;
-        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
-        }>) => {
-            width: "--cnvs-sys-space-x8";
-            height: "--cnvs-sys-space-x8";
-            "[data-part=\"avatar-icon\"]": {
-                [x: string]: string;
-            };
-        };
-        large: ({ iconPart }: {
-            size: string;
-        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
-        }>) => {
-            width: "--cnvs-sys-space-x10";
-            height: "--cnvs-sys-space-x10";
-            "[data-part=\"avatar-icon\"]": {
-                [x: string]: string;
-            };
-        };
-        extraLarge: ({ iconPart }: {
-            size: string;
-        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
-        }>) => {
-            width: "--cnvs-sys-space-x16";
-            height: "--cnvs-sys-space-x16";
-            "[data-part=\"avatar-icon\"]": {
-                [x: string]: string;
-            };
-        };
-        extraExtraLarge: ({ iconPart }: {
-            size: string;
-        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
-        }>) => {
-            width: string;
-            height: string;
-            "[data-part=\"avatar-icon\"]": {
-                [x: string]: string;
+            "[data-part=\"avatar-image\"]": {
+                display: "none";
             };
         };
     };
     objectFit: {
-        contain: ({ imagePart }: {
-            size: string;
-        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
+        contain: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
                 objectFit: "contain";
             };
         };
-        fill: ({ imagePart }: {
-            size: string;
-        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
-        }>) => {
-            "[data-part=\"avatar-image\"]": {
-                objectFit: "fill";
-            };
-        };
-        cover: ({ imagePart }: {
-            size: string;
-        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
+        cover: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
                 objectFit: "cover";
             };
         };
-        "scale-down": ({ imagePart }: {
-            size: string;
-        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
+        fill: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
-                objectFit: "scale-down";
+                objectFit: "fill";
             };
         };
-        none: ({ imagePart }: {
-            size: string;
-        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
+        none: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
                 objectFit: "none";
             };
         };
-        "-moz-initial": ({ imagePart }: {
-            size: string;
-        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
+        "scale-down": ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
-                objectFit: "-moz-initial";
+                objectFit: "scale-down";
             };
         };
-        initial: ({ imagePart }: {
-            size: string;
-        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
+        initial: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
                 objectFit: "initial";
             };
         };
-        inherit: ({ imagePart }: {
-            size: string;
-        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
+        inherit: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
                 objectFit: "inherit";
             };
         };
-        revert: ({ imagePart }: {
-            size: string;
-        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
+        unset: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
-                objectFit: "revert";
+                objectFit: "unset";
             };
         };
-        unset: ({ imagePart }: {
-            size: string;
-        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
+        "-moz-initial": ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
-                objectFit: "unset";
+                objectFit: "-moz-initial";
             };
         };
-    };
-    isImageLoaded: {
-        true: ({ iconPart, imagePart }: {
-            size: string;
-        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
+        revert: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
         }>) => {
-            "[data-part=\"avatar-icon\"]": {
-                opacity: number;
-            };
             "[data-part=\"avatar-image\"]": {
-                opacity: number;
+                objectFit: "revert";
             };
         };
     };
 }, {
-    readonly icon: "avatar-icon";
-    readonly image: "avatar-image";
-}, {
+    readonly avatarImage: "avatar-image";
+    readonly avatarName: "avatar-name";
+}, {}, import("@workday/canvas-kit-styling").Stencil<{
+    variant: {
+        blue: ({ backgroundColor, color }: {
+            backgroundColor: string;
+            color: string;
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: string;
+            color: string;
+        };
+        amber: ({ backgroundColor, color }: {
+            backgroundColor: string;
+            color: string;
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: string;
+            color: string;
+        };
+        teal: ({ backgroundColor, color }: {
+            backgroundColor: string;
+            color: string;
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: string;
+            color: string;
+        };
+        purple: ({ backgroundColor, color }: {
+            backgroundColor: string;
+            color: string;
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: string;
+            color: string;
+        };
+    };
+    size: {
+        extraExtraSmall: ({ size }: {
+            backgroundColor: string;
+            color: string;
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            lineHeight: "--cnvs-sys-line-height-subtext-small";
+            fontSize: "--cnvs-sys-font-size-subtext-small";
+            letterSpacing: "--cnvs-base-letter-spacing-50";
+        };
+        extraSmall: ({ size }: {
+            backgroundColor: string;
+            color: string;
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            lineHeight: "--cnvs-sys-line-height-subtext-medium";
+            fontSize: "--cnvs-sys-font-size-subtext-medium";
+            letterSpacing: "--cnvs-base-letter-spacing-100";
+        };
+        small: ({ size }: {
+            backgroundColor: string;
+            color: string;
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            lineHeight: "--cnvs-sys-line-height-body-small";
+            fontSize: "--cnvs-sys-font-size-body-small";
+            letterSpacing: "--cnvs-base-letter-spacing-200";
+        };
+        medium: ({ size }: {
+            backgroundColor: string;
+            color: string;
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            lineHeight: "--cnvs-sys-line-height-body-medium";
+            fontSize: "--cnvs-sys-font-size-body-medium";
+        };
+        large: ({ size }: {
+            backgroundColor: string;
+            color: string;
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            lineHeight: "--cnvs-sys-line-height-heading-medium";
+            fontSize: "--cnvs-sys-font-size-heading-medium";
+        };
+        extraLarge: ({ size }: {
+            backgroundColor: string;
+            color: string;
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            lineHeight: "--cnvs-sys-line-height-title-small";
+            fontSize: "--cnvs-sys-font-size-title-small";
+        };
+        extraExtraLarge: ({ size }: {
+            backgroundColor: string;
+            color: string;
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            lineHeight: "--cnvs-sys-line-height-title-medium";
+            fontSize: "--cnvs-sys-font-size-title-medium";
+        };
+    };
+}, {}, {
+    backgroundColor: string;
+    color: string;
     size: string;
-}, never, never>, never>;
+}, never, never>, never>, never>;
 export declare const PillAvatar: import("@workday/canvas-kit-react/common").ElementComponentM<"div", PillAvatarProps, {
     state: {
         id: string;

package/dist/es6/pill/lib/PillAvatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PillAvatar.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,WAAW,EAAgB,MAAM,kCAAkC,CAAC;AAKpF,MAAM,WAAW,eAAgB,SAAQ,WAAW;CAAG;AAEvD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAM5B,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;EAcrB,CAAC"}
+{"version":3,"file":"PillAvatar.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,WAAW,EAAgB,MAAM,0CAA0C,CAAC;AAM5F,MAAM,WAAW,eAAgB,SAAQ,WAAW;CAAG;AAEvD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAS5B,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;EAcrB,CAAC"}

package/dist/es6/pill/lib/PillAvatar.js

@@ -1,17 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createSubcomponent } from '@workday/canvas-kit-react/common';
-import { Avatar, avatarStencil } from '@workday/canvas-kit-react/avatar';
+import { Avatar, avatarStencil } from '@workday/canvas-kit-preview-react/avatar';
 import { usePillModel } from './usePillModel';
 import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { system } from '@workday/canvas-tokens-web';
 export const pillAvatarStencil = createStencil({
     extends: avatarStencil,
-    base: { name: "3fki6", styles: "box-sizing:border-box;cursor:pointer;flex:0 0 auto;" }
-}, "pill-avatar-348a6f");
+    base: { name: "3ejspb", styles: "box-sizing:border-box;flex:0 0 auto;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-small);letter-spacing:var(--cnvs-base-letter-spacing-50);&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}" }
+}, "pill-avatar-947fab");
 export const PillAvatar = createSubcomponent('div')({
     modelHook: usePillModel,
 })(({ size, ...elemProps }, Element, _model) => {
-    return (_jsx(Avatar, { "aria-hidden": true, as: Element, size: px2rem(18), ...mergeStyles(elemProps, [
+    return (_jsx(Avatar, { isDecorative: true, as: Element, size: px2rem(18), ...mergeStyles(elemProps, [
             pillAvatarStencil(),
             _model.state.disabled ? 'disabled' : undefined,
         ]) }));

package/index.ts

@@ -1,5 +1,7 @@
+export * from './avatar';
 export * from './color-picker';
 export * from './divider';
+export * from './information-highlight';
 export * from './loading-sparkles';
 export * from './pill';
 export * from './radio';
@@ -9,4 +11,3 @@ export * from './side-panel';
 export * from './status-indicator';
 export * from './text-area';
 export * from './text-input';
-export * from './information-highlight';

package/information-highlight/lib/InformationHighlight.tsx

@@ -1,5 +1,5 @@
 import {createContainer} from '@workday/canvas-kit-react/common';
-import {cssVar, createStencil, handleCsProp, CSProps, px2rem} from '@workday/canvas-kit-styling';
+import {createStencil, handleCsProp, CSProps, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 import {InformationHighlightHeading} from './parts/Heading';
@@ -20,77 +20,66 @@ export const informationHighlightStencil = createStencil({
     padding: system.space.x4,
     borderRadius: system.shape.x1,
     outline: `${px2rem(1)} solid transparent`,
+    borderInlineStart: `${system.space.x1} solid transparent`,
   },
   modifiers: {
     informational: {
       low: {
-        borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(
-          system.color.bg.primary.default
-        )}`,
+        borderInlineStartColor: system.color.border.info.default,
         backgroundColor: system.color.bg.alt.soft,
         '& [data-part="information-highlight-icon"]': {
-          [systemIconStencil.vars.accentColor]: system.color.bg.primary.default,
-          [systemIconStencil.vars.color]: system.color.bg.primary.default,
-          [systemIconStencil.vars.backgroundColor]: 'none',
+          [systemIconStencil.vars.accentColor]: system.color.icon.info.default,
+          [systemIconStencil.vars.color]: system.color.icon.info.default,
+          [systemIconStencil.vars.backgroundColor]: 'transparent',
         },
       },
       high: {
-        borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(
-          system.color.bg.primary.default
-        )}`,
-        backgroundColor: system.color.bg.primary.softer,
+        borderInlineStartColor: system.color.border.info.default,
+        backgroundColor: system.color.bg.info.softest,
         '& [data-part="information-highlight-icon"]': {
           [systemIconStencil.vars.accentColor]: system.color.icon.inverse,
-          [systemIconStencil.vars.color]: system.color.bg.primary.default,
-          [systemIconStencil.vars.backgroundColor]: system.color.bg.primary.default,
+          [systemIconStencil.vars.color]: system.color.icon.info.default,
+          [systemIconStencil.vars.backgroundColor]: system.color.icon.info.default,
         },
       },
     },
     caution: {
       low: {
-        borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(
-          system.color.border.caution.default
-        )}`,
+        borderInlineStartColor: system.color.border.caution.default,
         backgroundColor: system.color.bg.alt.soft,
         '& [data-part="information-highlight-icon"]': {
-          [systemIconStencil.vars.accentColor]: system.color.fg.contrast.default,
-          [systemIconStencil.vars.color]: system.color.fg.contrast.default,
-          [systemIconStencil.vars.backgroundColor]: 'none',
+          [systemIconStencil.vars.accentColor]: system.color.icon.strong,
+          [systemIconStencil.vars.color]: system.color.icon.strong,
+          [systemIconStencil.vars.backgroundColor]: 'transparent',
         },
       },
       high: {
-        borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(
-          system.color.border.caution.default
-        )}`,
+        borderInlineStartColor: system.color.border.caution.default,
         backgroundColor: system.color.bg.caution.softest,
         '& [data-part="information-highlight-icon"]': {
           [systemIconStencil.vars.accentColor]: system.color.icon.inverse,
-          [systemIconStencil.vars.color]: system.color.fg.contrast.default,
-          [systemIconStencil.vars.backgroundColor]: system.color.fg.contrast.default,
+          [systemIconStencil.vars.color]: system.color.icon.caution.softer,
+          [systemIconStencil.vars.backgroundColor]: system.color.icon.caution.softer,
         },
       },
     },
     critical: {
       low: {
-        borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(
-          system.color.border.critical.default
-        )}`,
+        borderInlineStartColor: system.color.border.critical.default,
         backgroundColor: system.color.bg.alt.soft,
         '& [data-part="information-highlight-icon"]': {
-          [systemIconStencil.vars.accentColor]: system.color.bg.critical.default,
-          [systemIconStencil.vars.color]: system.color.bg.critical.default,
-          [systemIconStencil.vars.backgroundColor]: 'none',
+          [systemIconStencil.vars.accentColor]: system.color.icon.critical.default,
+          [systemIconStencil.vars.color]: system.color.icon.critical.default,
+          [systemIconStencil.vars.backgroundColor]: 'transparent',
         },
       },
       high: {
-        borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(
-          system.color.border.critical.default
-        )}`,
+        borderInlineStartColor: system.color.border.critical.default,
         backgroundColor: system.color.bg.critical.softest,
         '& [data-part="information-highlight-icon"]': {
           [systemIconStencil.vars.accentColor]: system.color.icon.inverse,
-          [systemIconStencil.vars.color]: system.color.bg.critical.default,
-          [systemIconStencil.vars.backgroundColor]: system.color.fg.critical.default,
+          [systemIconStencil.vars.color]: system.color.icon.critical.default,
+          [systemIconStencil.vars.backgroundColor]: system.color.icon.critical.default,
         },
       },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "14.0.0-alpha.1211-next.0",
+  "version": "14.0.0-alpha.1213-next.0",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -46,8 +46,8 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^14.0.0-alpha.1211-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1211-next.0",
+    "@workday/canvas-kit-react": "^14.0.0-alpha.1213-next.0",
+    "@workday/canvas-kit-styling": "^14.0.0-alpha.1213-next.0",
     "@workday/canvas-system-icons-web": "^3.0.35",
     "@workday/canvas-tokens-web": "3.0.0-alpha.12",
     "@workday/design-assets-types": "^0.2.10"
@@ -58,5 +58,5 @@
     "react-hook-form": "7.36.1",
     "yup": "^0.32.11"
   },
-  "gitHead": "ea68386b221f4e06e84726aad21c22687919d139"
+  "gitHead": "b5997d670fcef518d13ff761d9a15d54e1d60a21"
 }

package/pill/lib/PillAvatar.tsx

@@ -1,16 +1,20 @@
 import {createSubcomponent} from '@workday/canvas-kit-react/common';
-import {Avatar, AvatarProps, avatarStencil} from '@workday/canvas-kit-react/avatar';
+import {Avatar, AvatarProps, avatarStencil} from '@workday/canvas-kit-preview-react/avatar';
 import {usePillModel} from './usePillModel';
 import {createStencil, px2rem} from '@workday/canvas-kit-styling';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface PillAvatarProps extends AvatarProps {}
 
 export const pillAvatarStencil = createStencil({
   extends: avatarStencil,
   base: {
-    cursor: 'pointer',
     flex: '0 0 auto',
+    ...system.type.subtext.small,
+    '&:disabled, &.disabled': {
+      opacity: system.opacity.disabled,
+    },
   },
 });
 
@@ -19,7 +23,7 @@ export const PillAvatar = createSubcomponent('div')({
 })<PillAvatarProps>(({size, ...elemProps}: PillAvatarProps, Element, _model) => {
   return (
     <Avatar
-      aria-hidden={true}
+      isDecorative
       as={Element}
       size={px2rem(18)}
       {...mergeStyles(elemProps, [