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

package/dist/commonjs/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 { AvatarNameProps } from './AvatarName';
+import { BaseAvatarProps } from './BaseAvatar';
+export interface AvatarProps extends BaseAvatarProps, AvatarNameProps {
     /**
      * The URL of the user's photo. For best fit, use square images.
      */
@@ -41,243 +11,267 @@ 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, oklch(0.7933 0.1076 252.08 / 1)))`;
+            color: `var(--${string}, var(--cnvs-base-palette-blue-800, oklch(0.3908 0.128 256 / 1)))`;
+        };
+        amber: ({ backgroundColor, color }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-amber-200, oklch(0.9191 0.1547 99.7 / 1)))`;
+            color: `var(--${string}, var(--cnvs-base-palette-amber-700, oklch(0.4824 0.1353 46.11 / 1)))`;
+        };
+        teal: ({ backgroundColor, color }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-teal-300, oklch(0.7836 0.0874 204.93 / 1)))`;
+            color: `var(--${string}, var(--cnvs-base-palette-teal-800, oklch(0.3982 0.0687 209.08 / 1)))`;
+        };
+        purple: ({ backgroundColor, color }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-purple-300, oklch(0.8108 0.1412 315.48 / 1)))`;
+            color: `var(--${string}, var(--cnvs-base-palette-purple-800, oklch(0.422 0.136 315.49 / 1)))`;
         };
     };
-}, {
-    readonly icon: "avatar-icon";
-    readonly image: "avatar-image";
-}, {
+    size: {
+        extraExtraSmall: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            [x: string]: "var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem))" | "var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem))" | "var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small))" | "var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem))";
+            fontSize: "var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small))";
+        };
+        extraSmall: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            [x: string]: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))" | "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))" | "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))" | "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
+            fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
+        };
+        small: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            [x: string]: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))" | "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))" | "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))" | "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
+            lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))";
+            fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))";
+        };
+        medium: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            [x: string]: "var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem))" | "var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem))" | `var(var(--cnvs-base-size-600, 3rem), ${string})`;
+            lineHeight: "var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem))";
+            fontSize: "var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem))";
+        };
+        large: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            [x: string]: "--cnvs-sys-font-weight-bold" | "var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem))" | "var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem))" | `var(var(--cnvs-base-size-900, 4.5rem), ${string})`;
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            lineHeight: "var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem))";
+            fontSize: "var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem))";
+        };
+        extraLarge: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            [x: string]: "--cnvs-sys-font-weight-bold" | "var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem))" | "var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem))" | `var(var(--cnvs-base-size-1200, 6rem), ${string})`;
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            lineHeight: "var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem))";
+            fontSize: "var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem))";
+        };
+        extraExtraLarge: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            [x: string]: string;
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            lineHeight: "var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem))";
+            fontSize: "var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem))";
+        };
+    };
+}, {}, {
+    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/commonjs/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":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAOjC,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAa,eAAe,EAAoB,MAAM,cAAc,CAAC;AAE5E,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/commonjs/avatar/lib/Avatar.js

@@ -1,137 +1,53 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = exports.avatarStencil = exports.AvatarVariant = void 0;
+exports.Avatar = exports.avatarStencil = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
-const layout_1 = require("@workday/canvas-kit-react/layout");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
-const icon_1 = require("@workday/canvas-kit-react/icon");
-const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 const canvas_tokens_web_1 = require("@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`.
- */
-var AvatarVariant;
-(function (AvatarVariant) {
-    AvatarVariant[AvatarVariant["Light"] = 0] = "Light";
-    AvatarVariant[AvatarVariant["Dark"] = 1] = "Dark";
-})(AvatarVariant = exports.AvatarVariant || (exports.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).
- */
+const BaseAvatar_1 = require("./BaseAvatar");
 exports.avatarStencil = (0, canvas_kit_styling_1.createStencil)({
-    vars: {
-        size: '',
-    },
+    extends: BaseAvatar_1.baseAvatarStencil,
     parts: {
-        icon: 'avatar-icon',
-        image: 'avatar-image',
+        avatarImage: 'avatar-image',
+        avatarName: 'avatar-name',
     },
-    base: { name: "fxcxu", 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: "29yfqf", styles: "box-sizing:border-box;" },
     modifiers: {
-        variant: {
-            light: { name: "5l0g8", 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: "21eywb", 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: "3xcfuz", 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: "35p7vt", 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: "qidvo", 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: "3kqqmf", 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: "36ql1g", 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: "3qt0p7", 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: "3fcp8h", styles: "[data-part=\"avatar-image\"]{display:none;}" },
+            true: { name: "19xfto", styles: "background-color:var(--cnvs-sys-color-bg-default);" }
         },
         objectFit: {
-            contain: { name: "1qgqkx", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
-            fill: { name: "48se74", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
-            cover: { name: "1sr0a6", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
-            ['scale-down']: { name: "1j6wd4", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
-            none: { name: "4e0gfp", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
-            ['-moz-initial']: { name: "3qpmve", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
-            ['initial']: { name: "3yn4pb", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
-            ['inherit']: { name: "47d3x0", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
-            ['revert']: { name: "7y0dl", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" },
-            ['unset']: { name: "2wqaj9", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" }
-        },
-        isImageLoaded: {
-            true: { name: "1e3s7m", styles: "[data-part=\"avatar-icon\"]{opacity:0;}[data-part=\"avatar-image\"]{opacity:1;}" }
+            contain: { name: "3koyp", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
+            cover: { name: "60ssl", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
+            fill: { name: "1ciq1t", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
+            none: { name: "1h5lc9", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
+            ['scale-down']: { name: "346uhx", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
+            initial: { name: "3048ww", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
+            inherit: { name: "2esvy3", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
+            unset: { name: "3jmlus", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" },
+            ['-moz-initial']: { name: "2uxl87", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
+            ['revert']: { name: "2629ra", 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
  */
-exports.Avatar = (0, common_1.createComponent)('button')({
+exports.Avatar = (0, common_1.createComponent)('div')({
     displayName: 'Avatar',
-    Component: ({ variant, size = 'medium', altText, url, objectFit, ...elemProps }, ref, Element) => {
-        const [imageLoaded, setImageLoaded] = (0, react_1.useState)(false);
-        const loadImage = () => {
+    Component: ({ url, name, variant, objectFit = 'contain', preferredInitials, isDecorative, size, ...elemProps }, ref, Element) => {
+        const [imageLoaded, setImageLoaded] = react_1.default.useState(false);
+        const handleImageLoad = () => {
             if (!imageLoaded) {
                 setImageLoaded(true);
             }
         };
-        react_1.default.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 ((0, jsx_runtime_1.jsxs)(Element, { ref: ref, "aria-label": Element === 'button' ? altText : undefined, ...(0, layout_1.mergeStyles)(elemProps, [
-                (0, exports.avatarStencil)({
-                    variant: variant === AvatarVariant.Light
-                        ? 'light'
-                        : variant === AvatarVariant.Dark
-                            ? 'dark'
-                            : variant,
-                    size: typeof size === 'number' ? (0, canvas_kit_styling_1.px2rem)(size) : size,
-                    objectFit,
-                    isImageLoaded: imageLoaded,
-                }),
-            ]), children: [(0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { ...exports.avatarStencil.parts.icon, icon: canvas_system_icons_web_1.userIcon }), url && (0, jsx_runtime_1.jsx)("img", { ...exports.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: icon_1.SystemIconCircleSize,
+        return ((0, jsx_runtime_1.jsxs)(BaseAvatar_1.BaseAvatar, { as: Element, ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.avatarStencil)({ variant, size, imageLoaded, objectFit })), children: [url && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(BaseAvatar_1.BaseAvatar.Image, { onLoad: handleImageLoad, src: url, alt: isDecorative ? undefined : name, "aria-hidden": isDecorative, ...exports.avatarStencil.parts.avatarImage }) })), name && (!url || !imageLoaded) && ((0, jsx_runtime_1.jsx)(BaseAvatar_1.BaseAvatar.Name, { name: name, preferredInitials: preferredInitials, ...exports.avatarStencil.parts.avatarName }))] }));
     },
 });