@workday/canvas-kit-preview-react 14.0.0-alpha.1212-next.0 → 14.0.0-alpha.1214-next.0

package/dist/commonjs/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/commonjs/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/commonjs/pill/lib/PillAvatar.js

@@ -3,18 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PillAvatar = exports.pillAvatarStencil = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const common_1 = require("@workday/canvas-kit-react/common");
-const avatar_1 = require("@workday/canvas-kit-react/avatar");
+const avatar_1 = require("@workday/canvas-kit-preview-react/avatar");
 const usePillModel_1 = require("./usePillModel");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const layout_1 = require("@workday/canvas-kit-react/layout");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 exports.pillAvatarStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: avatar_1.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");
 exports.PillAvatar = (0, common_1.createSubcomponent)('div')({
     modelHook: usePillModel_1.usePillModel,
 })(({ size, ...elemProps }, Element, _model) => {
-    return ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { "aria-hidden": true, as: Element, size: (0, canvas_kit_styling_1.px2rem)(18), ...(0, layout_1.mergeStyles)(elemProps, [
+    return ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { isDecorative: true, as: Element, size: (0, canvas_kit_styling_1.px2rem)(18), ...(0, layout_1.mergeStyles)(elemProps, [
             (0, exports.pillAvatarStencil)(),
             _model.state.disabled ? 'disabled' : undefined,
         ]) }));

package/dist/es6/avatar/index.d.ts

@@ -0,0 +1,6 @@
+export * from './lib/Avatar';
+export * from './lib/AvatarImage';
+export * from './lib/AvatarName';
+export * from './lib/BaseAvatar';
+export * from './lib/getInitialsFromName';
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC"}

package/dist/es6/avatar/index.js

@@ -0,0 +1,5 @@
+export * from './lib/Avatar';
+export * from './lib/AvatarImage';
+export * from './lib/AvatarName';
+export * from './lib/BaseAvatar';
+export * from './lib/getInitialsFromName';

package/dist/es6/avatar/lib/Avatar.d.ts

@@ -0,0 +1,234 @@
+import { Property } from 'csstype';
+import { BaseAvatarProps } from './BaseAvatar';
+import { AvatarNameProps } from './AvatarName';
+export interface AvatarProps extends BaseAvatarProps, AvatarNameProps {
+    /**
+     * The URL of the user's photo. For best fit, use square images.
+     */
+    url?: string;
+    /**
+     * An objectFit property that can customize how to resize your image to fit its container.
+     * @default "contain"
+     */
+    objectFit?: Property.ObjectFit;
+    /**
+     * If true, the Avatar won't forward the `name` prop to the `alt` attribute of the image. This is useful when the Avatar is purely decorative and is rendered next to a name or text.
+     */
+    isDecorative?: boolean;
+}
+export declare const avatarStencil: import("@workday/canvas-kit-styling").Stencil<{
+    imageLoaded: {
+        false: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                display: "none";
+            };
+        };
+    };
+    objectFit: {
+        contain: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "contain";
+            };
+        };
+        cover: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "cover";
+            };
+        };
+        fill: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "fill";
+            };
+        };
+        none: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "none";
+            };
+        };
+        "scale-down": ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "scale-down";
+            };
+        };
+        initial: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "initial";
+            };
+        };
+        inherit: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "inherit";
+            };
+        };
+        unset: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "unset";
+            };
+        };
+        "-moz-initial": ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "-moz-initial";
+            };
+        };
+        revert: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "revert";
+            };
+        };
+    };
+}, {
+    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>;
+/**
+ * JSDoc for Avatar. Will be part of the Component API docs
+ */
+export declare const Avatar: import("@workday/canvas-kit-react/common").ElementComponent<"div", AvatarProps>;
+//# sourceMappingURL=Avatar.d.ts.map