@workday/canvas-kit-react 15.0.0-alpha.0076-next.0 → 15.0.0-alpha.0090-next.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
+{"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

@@ -1 +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

@@ -1,37 +1,7 @@
 import { Property } from 'csstype';
-import { CSProps } from '@workday/canvas-kit-styling';
-import { SystemIconCircleSize } from '@workday/canvas-kit-react/icon';
-/**
- * @deprecated ⚠️ `AvatarVariant` is deprecated and will be removed in a future major version. Update your types and values to use the string literal of either `light` or `dark`.
- */
-export declare enum AvatarVariant {
-    Light = 0,
-    Dark = 1
-}
-/**
- * @deprecated ⚠️ `AvatarProps` is deprecated and will be removed in a future major version. Please use the `Avatar` component from the Preview package instead (@workday/canvas-kit-preview-react/avatar).
- */
-export interface AvatarProps extends CSProps {
-    /**
-     * The variant of the avatar. Use `light` on dark backgrounds and `dark` on light backgrounds.
-     * @default "light"
-     */
-    variant?: 'light' | 'dark' | AvatarVariant;
-    /**
-     * The size of the Avatar.
-     * - `extraExtraLarge`: 7.5rem x 7.5rem (120px  x 120px)
-     * - `extraLarge`: 4.5rem x 4.5rem (64px x 64px)
-     * - `large`: 2.5rem x 2.5rem (40px x 40px)
-     * - `medium`: 2rem x 2rem (32px x 32px)
-     * - `small`: 1.5rem x 1.5rem (24px x 24px)
-     * - `small`: 1rem x 1rem (16px x 16px)
-     * @default "medium"
-     */
-    size?: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' | 'extraExtraLarge' | (string & {}) | SystemIconCircleSize | number;
-    /**
-     * The alt text of the Avatar image. This prop is also used for the aria-label.
-     */
-    altText?: string;
+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.
      */
@@ -41,243 +11,271 @@ export interface AvatarProps extends CSProps {
      * @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;
 }
-/**
- * @deprecated `avatarStencil` is deprecated and will be removed in a future major version. Please use `Avatar` from the Preview package instead (@workday/canvas-kit-preview-react/avatar).
- */
 export declare const avatarStencil: 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";
-        }>) => {
-            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 }: {
+    imageLoaded: {
+        false: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
             size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
         }>) => {
-            width: "--cnvs-sys-space-x16";
-            height: "--cnvs-sys-space-x16";
-            "[data-part=\"avatar-icon\"]": {
-                [x: string]: string;
+            "[data-part=\"avatar-image\"]": {
+                display: 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;
-            };
+        true: {
+            backgroundColor: "--cnvs-sys-color-bg-default";
         };
     };
     objectFit: {
-        contain: ({ imagePart }: {
+        contain: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
             size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
                 objectFit: string;
             };
         };
-        fill: ({ imagePart }: {
+        cover: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
             size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
                 objectFit: string;
             };
         };
-        cover: ({ imagePart }: {
+        fill: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
             size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
                 objectFit: string;
             };
         };
-        "scale-down": ({ imagePart }: {
+        none: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
             size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
                 objectFit: string;
             };
         };
-        none: ({ imagePart }: {
+        "scale-down": ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
             size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
                 objectFit: string;
             };
         };
-        "-moz-initial": ({ imagePart }: {
+        initial: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
             size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
                 objectFit: string;
             };
         };
-        initial: ({ imagePart }: {
+        inherit: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
             size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
                 objectFit: string;
             };
         };
-        inherit: ({ imagePart }: {
+        unset: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
             size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
                 objectFit: string;
             };
         };
-        revert: ({ imagePart }: {
+        "-moz-initial": ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
             size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
                 objectFit: string;
             };
         };
-        unset: ({ imagePart }: {
+        revert: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
             size: `--${string}`;
         } & import("@workday/canvas-kit-styling").StencilVarsParts<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
         }>) => {
             "[data-part=\"avatar-image\"]": {
                 objectFit: string;
             };
         };
     };
-    isImageLoaded: {
-        true: ({ iconPart, imagePart }: {
+}, {
+    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<{
-            readonly icon: "avatar-icon";
-            readonly image: "avatar-image";
-        }>) => {
-            "[data-part=\"avatar-icon\"]": {
-                opacity: number;
-            };
-            "[data-part=\"avatar-image\"]": {
-                opacity: number;
-            };
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-blue-300))`;
+            color: `var(--${string}, var(--cnvs-base-palette-blue-800))`;
+        };
+        amber: ({ backgroundColor, color }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-amber-200))`;
+            color: `var(--${string}, var(--cnvs-base-palette-amber-700))`;
+        };
+        teal: ({ backgroundColor, color }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-teal-300))`;
+            color: `var(--${string}, var(--cnvs-base-palette-teal-800))`;
+        };
+        purple: ({ backgroundColor, color }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-purple-300))`;
+            color: `var(--${string}, var(--cnvs-base-palette-purple-800))`;
         };
     };
-}, {
-    readonly icon: "avatar-icon";
-    readonly image: "avatar-image";
-}, {
+    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>;
 /**
- * @deprecated ⚠️ `Avatar` is deprecated and will be removed in a future major version. Please use `Avatar` from the Preview package instead (@workday/canvas-kit-preview-react/avatar).
+ * JSDoc for Avatar. Will be part of the Component API docs
  */
-export declare const Avatar: import("@workday/canvas-kit-react/common").ElementComponent<"button", AvatarProps> & {
-    /**
-     * @deprecated ⚠️ `Avatar.Variant` is deprecated and will be removed in a future major version. Use the string literal of `light` or `dark`.
-     */
-    Variant: typeof AvatarVariant;
-    /**
-     * @deprecated ⚠️ `Avatar.Size` is deprecated and will be removed in a future major version. Use the string literal values for size: 'extraSmall' | 'small | 'medium' | 'large' | 'extraLarge | 'extraExtraLarge' | (string & {})
-     */
-    Size: typeof SystemIconCircleSize;
-};
+export declare const Avatar: import("@workday/canvas-kit-react/common").ElementComponent<"div", AvatarProps>;
 //# sourceMappingURL=Avatar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAsB,OAAO,EAAS,MAAM,6BAA6B,CAAC;AAGjF,OAAO,EAAa,oBAAoB,EAAoB,MAAM,gCAAgC,CAAC;AAKnG;;GAEG;AACH,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,IAAI,IAAA;CACL;AAED;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,OAAO;IAC1C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,aAAa,CAAC;IAC3C;;;;;;;;;OASG;IACH,IAAI,CAAC,EACH,YAAY,GACV,OAAO,GACP,QAAQ,GACR,OAAO,GACP,YAAY,GACZ,iBAAiB,GACjB,CAAC,MAAM,GAAG,EAAE,CAAC,GACb,oBAAoB,GACpB,MAAM,CAAC;IACX;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC;AAED;;GAEG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAgLxB,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,MAAM;IAyDf;;OAEG;;IAEH;;OAEG;;CAGL,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAIjC,OAAO,EAAC,eAAe,EAAgC,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,eAAe;IACnE;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAwExB,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,MAAM,iFAoDjB,CAAC"}

package/dist/es6/avatar/lib/Avatar.js

@@ -1,111 +1,47 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from 'react';
-import { createComponent, focusRing } from '@workday/canvas-kit-react/common';
-import { createStencil, calc, px2rem } from '@workday/canvas-kit-styling';
-import { mergeStyles } from '@workday/canvas-kit-react/layout';
-import { borderRadius } from '@workday/canvas-kit-react/tokens';
-import { SystemIcon, SystemIconCircleSize, systemIconStencil } from '@workday/canvas-kit-react/icon';
-import { userIcon } from '@workday/canvas-system-icons-web';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
-/**
- * @deprecated ⚠️ `AvatarVariant` is deprecated and will be removed in a future major version. Update your types and values to use the string literal of either `light` or `dark`.
- */
-export var AvatarVariant;
-(function (AvatarVariant) {
-    AvatarVariant[AvatarVariant["Light"] = 0] = "Light";
-    AvatarVariant[AvatarVariant["Dark"] = 1] = "Dark";
-})(AvatarVariant || (AvatarVariant = {}));
-/**
- * @deprecated `avatarStencil` is deprecated and will be removed in a future major version. Please use `Avatar` from the Preview package instead (@workday/canvas-kit-preview-react/avatar).
- */
+import { BaseAvatar, baseAvatarStencil } from './BaseAvatar';
 export const avatarStencil = createStencil({
-    vars: {
-        size: '',
-    },
+    extends: baseAvatarStencil,
     parts: {
-        icon: 'avatar-icon',
-        image: 'avatar-image',
+        avatarImage: 'avatar-image',
+        avatarName: 'avatar-name',
     },
-    base: { name: "chaek", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-caution-default);position:relative;display:flex;align-items:center;justify-content:center;padding:0;border:0;overflow:hidden;cursor:default;pointer-events:none;border-radius:var(--cnvs-sys-shape-round);width:var(--size-avatar-a7d274);height:var(--size-avatar-a7d274);&:focus-visible, &.focus{outline:none;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}:is(button){cursor:pointer;pointer-events:auto;}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}[data-part=\"avatar-icon\"]{transition:opacity 150ms linear;display:flex;align-items:center;justify-content:center;--size-svg-8fcab8:calc(var(--size-avatar-a7d274) * 0.625);opacity:1;}[data-part=\"avatar-image\"]{position:absolute;width:100%;height:100%;border-radius:999px;transition:opacity 150ms linear;opacity:0;}" },
+    base: { name: "2ijsr6", styles: "box-sizing:border-box;" },
     modifiers: {
-        variant: {
-            light: { name: "2f85z8", styles: "background-color:var(--cnvs-sys-color-bg-alt-default);[data-part=\"avatar-icon\"]{--color-system-icon-3a4847:var(--cnvs-sys-color-fg-default);}" },
-            dark: { name: "1c26fv", styles: "background-color:var(--cnvs-sys-color-bg-primary-default);[data-part=\"avatar-icon\"]{--color-system-icon-3a4847:var(--cnvs-sys-color-fg-inverse);}" }
-        },
-        size: {
-            extraSmall: { name: "21a6yo", styles: "width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(var(--cnvs-sys-space-x4) * 0.625);}" },
-            small: { name: "19cias", styles: "width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(var(--cnvs-sys-space-x6) * 0.625);}" },
-            medium: { name: "4a5ysu", styles: "width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x8);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(var(--cnvs-sys-space-x8) * 0.625);}" },
-            large: { name: "3vmicl", styles: "width:var(--cnvs-sys-space-x10);height:var(--cnvs-sys-space-x10);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(var(--cnvs-sys-space-x10) * 0.625);}" },
-            extraLarge: { name: "2zt095", styles: "width:var(--cnvs-sys-space-x16);height:var(--cnvs-sys-space-x16);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(var(--cnvs-sys-space-x16) * 0.625);}" },
-            extraExtraLarge: { name: "1rg78q", styles: "width:calc(var(--cnvs-sys-space-x10) * 3);height:calc(var(--cnvs-sys-space-x10) * 3);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(calc(var(--cnvs-sys-space-x10) * 3) * 0.625);}" }
+        imageLoaded: {
+            false: { name: "2lmefx", styles: "[data-part=\"avatar-image\"]{display:none;}" },
+            true: { name: "444xec", styles: "background-color:var(--cnvs-sys-color-bg-default);" }
         },
         objectFit: {
-            contain: { name: "2nl5qn", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
-            fill: { name: "38am1v", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
-            cover: { name: "wfw7t", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
-            ['scale-down']: { name: "2kbvtj", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
-            none: { name: "4bl6d9", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
-            ['-moz-initial']: { name: "52ea0", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
-            ['initial']: { name: "25z0t3", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
-            ['inherit']: { name: "38zr6q", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
-            ['revert']: { name: "3ev0cn", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" },
-            ['unset']: { name: "2q2xaj", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" }
-        },
-        isImageLoaded: {
-            true: { name: "3f2fox", styles: "[data-part=\"avatar-icon\"]{opacity:0;}[data-part=\"avatar-image\"]{opacity:1;}" }
+            contain: { name: "1svkdv", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
+            cover: { name: "18hxed", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
+            fill: { name: "4d40xl", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
+            none: { name: "1bxc9g", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
+            ['scale-down']: { name: "2dcdpu", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
+            initial: { name: "3vn6zn", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
+            inherit: { name: "p5xbk", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
+            unset: { name: "3l3cyp", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" },
+            ['-moz-initial']: { name: "2yxgso", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
+            ['revert']: { name: "5u7ng", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" }
         }
-    },
-    defaultModifiers: {
-        variant: 'light',
-        objectFit: 'contain',
     }
-}, "avatar-a7d274");
+}, "avatar-620ed0");
 /**
- * @deprecated ⚠️ `Avatar` is deprecated and will be removed in a future major version. Please use `Avatar` from the Preview package instead (@workday/canvas-kit-preview-react/avatar).
+ * JSDoc for Avatar. Will be part of the Component API docs
  */
-export const Avatar = createComponent('button')({
+export const Avatar = createComponent('div')({
     displayName: 'Avatar',
-    Component: ({ variant, size = 'medium', altText, url, objectFit, ...elemProps }, ref, Element) => {
-        const [imageLoaded, setImageLoaded] = useState(false);
-        const loadImage = () => {
+    Component: ({ url, name, variant, objectFit = 'contain', preferredInitials, isDecorative, size, ...elemProps }, ref, Element) => {
+        const [imageLoaded, setImageLoaded] = React.useState(false);
+        const handleImageLoad = () => {
             if (!imageLoaded) {
                 setImageLoaded(true);
             }
         };
-        React.useLayoutEffect(() => {
-            setImageLoaded(false);
-        }, [url]);
-        // TODO: Remove this warning for a hard breaking change in v13
-        if (process.env.NODE_ENV === 'development') {
-            if (typeof variant === 'number') {
-                console.warn('Avatar: Avatar.Variant is deprecated and will be removed in v13. Please use a string literal of "light"  or "dark"');
-            }
-            if (typeof size === 'number') {
-                console.warn("Avatar: Avatar.Size is deprecated and will be removed in v13. Use the string literal values for size: 'extraSmall' | 'small | 'medium' | 'large' | 'extraLarge | 'extraExtraLarge' | (string & {})");
-            }
-        }
-        return (_jsxs(Element, { ref: ref, "aria-label": Element === 'button' ? altText : undefined, ...mergeStyles(elemProps, [
-                avatarStencil({
-                    variant: variant === AvatarVariant.Light
-                        ? 'light'
-                        : variant === AvatarVariant.Dark
-                            ? 'dark'
-                            : variant,
-                    size: typeof size === 'number' ? px2rem(size) : size,
-                    objectFit,
-                    isImageLoaded: imageLoaded,
-                }),
-            ]), children: [_jsx(SystemIcon, { ...avatarStencil.parts.icon, icon: userIcon }), url && _jsx("img", { ...avatarStencil.parts.image, src: url, alt: altText, onLoad: loadImage })] }));
-    },
-    subComponents: {
-        /**
-         * @deprecated ⚠️ `Avatar.Variant` is deprecated and will be removed in a future major version. Use the string literal of `light` or `dark`.
-         */
-        Variant: AvatarVariant,
-        /**
-         * @deprecated ⚠️ `Avatar.Size` is deprecated and will be removed in a future major version. Use the string literal values for size: 'extraSmall' | 'small | 'medium' | 'large' | 'extraLarge | 'extraExtraLarge' | (string & {})
-         */
-        Size: SystemIconCircleSize,
+        return (_jsxs(BaseAvatar, { as: Element, ref: ref, ...handleCsProp(elemProps, avatarStencil({ variant, size, imageLoaded, objectFit })), children: [url && (_jsx(_Fragment, { children: _jsx(BaseAvatar.Image, { onLoad: handleImageLoad, src: url, alt: isDecorative ? undefined : name, "aria-hidden": isDecorative, ...avatarStencil.parts.avatarImage }) })), name && (!url || !imageLoaded) && (_jsx(BaseAvatar.Name, { name: name, preferredInitials: preferredInitials, ...avatarStencil.parts.avatarName }))] }));
     },
 });

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

@@ -0,0 +1,6 @@
+import { CSProps } from '@workday/canvas-kit-styling';
+export interface AvatarImageProps extends CSProps {
+}
+export declare const avatarImageStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
+export declare const AvatarImage: import("@workday/canvas-kit-react/common").ElementComponent<"img", AvatarImageProps>;
+//# sourceMappingURL=AvatarImage.d.ts.map

package/dist/es6/avatar/lib/AvatarImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarImage.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/AvatarImage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA8B,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAEjF,MAAM,WAAW,gBAAiB,SAAQ,OAAO;CAAG;AAEpD,eAAO,MAAM,kBAAkB,iJAM7B,CAAC;AAEH,eAAO,MAAM,WAAW,sFAKtB,CAAC"}