@cloudscape-design/chat-components 1.0.58 → 1.0.60

package/avatar/index.d.ts

@@ -1,3 +1,7 @@
 import { AvatarProps } from "./interfaces";
 export type { AvatarProps };
-export default function Avatar({ color, iconName, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export default function Avatar({
+  color,
+  iconName,
+  ...props
+}: AvatarProps): import("react/jsx-runtime").JSX.Element;

package/avatar/index.js

@@ -1,12 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import useBaseComponent from "../internal/base-component/use-base-component";
-import { applyDisplayName } from "../internal/utils/apply-display-name";
-import InternalAvatar from "./internal";
-export default function Avatar({ color = "default", iconName = "user-profile", ...props }) {
-    const baseComponentProps = useBaseComponent("Avatar", { props: { color, iconName } });
-    return _jsx(InternalAvatar, { color: color, iconName: iconName, ...props, ...baseComponentProps });
-}
-applyDisplayName(Avatar, "Avatar");
-//# sourceMappingURL=index.js.map
+import React from 'react';
+
+import CoreComponent from './internal-do-not-use-core';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import { validateProps } from '@cloudscape-design/component-toolkit/internal';
+
+
+
+const Avatar = (props) => {
+    validateProps('Avatar', props, ["style"], {}, 'console');
+    return React.createElement(CoreComponent, props);
+};
+
+
+applyDisplayName(Avatar, 'Avatar');
+export default Avatar;

package/avatar/interfaces.d.ts

@@ -1,63 +1,93 @@
 /// <reference types="react" />
 import { IconProps } from "@cloudscape-design/components/icon";
 export interface AvatarProps {
-    /**
-     * Determines the color of the avatar.
-     * Use `gen-ai` for AI assistants and `default` otherwise.
-     */
-    color?: AvatarProps.Color;
-    /**
-     * The text content shown in the avatar's tooltip.
-     *
-     * When you use this property, make sure to include it in the `ariaLabel`.
-     */
-    tooltipText?: string;
-    /**
-     * The text content shown directly in the avatar's body.
-     * Can be 1 or 2 symbols long, every subsequent symbol is ignored.
-     * Use it to define initials that uniquely identify the avatar's owner.
-     */
-    initials?: string;
-    /**
-     * When set to true, a loading indicator is shown in avatar.
-     */
-    loading?: boolean;
-    /**
-     * Text to describe the avatar for assistive technology.
-     * When more than one avatar is used, provide a unique label for each.
-     * For example, "Avatar of John Doe" or "Avatar of generative AI assistant".
-     *
-     * If `tooltipText` is used make sure to include it in the `ariaLabel`.
-     */
-    ariaLabel: string;
-    /**
-     * Specifies the icon to be displayed as Avatar.
-     * Use `gen-ai` icon for AI assistants. By default `user-profile` icon is used.
-     *
-     * If you set both `iconName` and `initials`, `initials` will take precedence.
-     */
-    iconName?: IconProps.Name;
-    /**
-     * Specifies the URL of a custom icon. Use this property if the icon you want isn't available, and your custom icon can't be an SVG.
-     * @deprecated Use `iconSvg` or `imgUrl` instead.
-     */
-    iconUrl?: string;
-    /**
-     * Specifies the SVG of a custom icon.
-     * Use this property if the icon you want isn't available.
-     */
-    iconSvg?: React.ReactNode;
-    /**
-     * Specifies the URL of a custom image. If you set both `iconUrl` and `imgUrl`, `imgUrl` will take precedence.
-     */
-    imgUrl?: string;
-    /**
-     * Defines the width and height of the avatar.
-     * This value corresponds to the `width` CSS-property and will center and crop images using `object-fit: cover`.
-     * The default and minimum width value is 28px.
-     */
-    width?: number;
+  /**
+   * Determines the color of the avatar.
+   * Use `gen-ai` for AI assistants and `default` otherwise.
+   */
+  color?: AvatarProps.Color;
+  /**
+   * The text content shown in the avatar's tooltip.
+   *
+   * When you use this property, make sure to include it in the `ariaLabel`.
+   */
+  tooltipText?: string;
+  /**
+   * The text content shown directly in the avatar's body.
+   * Can be 1 or 2 symbols long, every subsequent symbol is ignored.
+   * Use it to define initials that uniquely identify the avatar's owner.
+   */
+  initials?: string;
+  /**
+   * When set to true, a loading indicator is shown in avatar.
+   */
+  loading?: boolean;
+  /**
+   * Text to describe the avatar for assistive technology.
+   * When more than one avatar is used, provide a unique label for each.
+   * For example, "Avatar of John Doe" or "Avatar of generative AI assistant".
+   *
+   * If `tooltipText` is used make sure to include it in the `ariaLabel`.
+   */
+  ariaLabel: string;
+  /**
+   * Specifies the icon to be displayed as Avatar.
+   * Use `gen-ai` icon for AI assistants. By default `user-profile` icon is used.
+   *
+   * If you set both `iconName` and `initials`, `initials` will take precedence.
+   */
+  iconName?: IconProps.Name;
+  /**
+   * Specifies the URL of a custom icon. Use this property if the icon you want isn't available, and your custom icon can't be an SVG.
+   * @deprecated Use `iconSvg` or `imgUrl` instead.
+   */
+  iconUrl?: string;
+  /**
+   * Specifies the SVG of a custom icon.
+   * Use this property if the icon you want isn't available.
+   */
+  iconSvg?: React.ReactNode;
+  /**
+   * Specifies the URL of a custom image. If you set both `iconUrl` and `imgUrl`, `imgUrl` will take precedence.
+   */
+  imgUrl?: string;
+  /**
+   * Specifies an object of selectors and properties that are used to apply custom styles.
+   *
+   * - `root.background` (string) - (Optional) Background of the avatar.
+   * - `root.borderColor` (string) - (Optional) Border color of the avatar.
+   * - `root.borderRadius` (string) - (Optional) Border radius of the avatar.
+   * - `root.borderWidth` (string) - (Optional) Border width of the avatar.
+   * - `root.boxShadow` (string) - (Optional) Box shadow of the avatar.
+   * - `root.color` (string) - (Optional) Text color of the avatar.
+   * - `root.focusRing.borderColor` (string) - (Optional) Focus ring border color.
+   * - `root.focusRing.borderRadius` (string) - (Optional) Focus ring border radius.
+   * - `root.focusRing.borderWidth` (string) - (Optional) Focus ring border width.
+   * @awsuiSystem core
+   */
+
+  /**
+   * Defines the width and height of the avatar.
+   * This value corresponds to the `width` CSS-property and will center and crop images using `object-fit: cover`.
+   * The default and minimum width value is 28px.
+   */
+  width?: number;
 }
 export declare namespace AvatarProps {
-    type Color = "default" | "gen-ai";
-}
+  type Color = "default" | "gen-ai";
+  interface Style {
+    root?: {
+      background?: string;
+      borderColor?: string;
+      borderRadius?: string;
+      borderWidth?: string;
+      boxShadow?: string;
+      color?: string;
+      focusRing?: {
+        borderColor?: string;
+        borderRadius?: string;
+        borderWidth?: string;
+      };
+    };
+  }
+}

package/avatar/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/avatar/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { IconProps } from \"@cloudscape-design/components/icon\";\n\nexport interface AvatarProps {\n  /**\n   * Determines the color of the avatar.\n   * Use `gen-ai` for AI assistants and `default` otherwise.\n   */\n  color?: AvatarProps.Color;\n\n  /**\n   * The text content shown in the avatar's tooltip.\n   *\n   * When you use this property, make sure to include it in the `ariaLabel`.\n   */\n  tooltipText?: string;\n\n  /**\n   * The text content shown directly in the avatar's body.\n   * Can be 1 or 2 symbols long, every subsequent symbol is ignored.\n   * Use it to define initials that uniquely identify the avatar's owner.\n   */\n  initials?: string;\n\n  /**\n   * When set to true, a loading indicator is shown in avatar.\n   */\n  loading?: boolean;\n\n  /**\n   * Text to describe the avatar for assistive technology.\n   * When more than one avatar is used, provide a unique label for each.\n   * For example, \"Avatar of John Doe\" or \"Avatar of generative AI assistant\".\n   *\n   * If `tooltipText` is used make sure to include it in the `ariaLabel`.\n   */\n  ariaLabel: string;\n\n  /**\n   * Specifies the icon to be displayed as Avatar.\n   * Use `gen-ai` icon for AI assistants. By default `user-profile` icon is used.\n   *\n   * If you set both `iconName` and `initials`, `initials` will take precedence.\n   */\n  iconName?: IconProps.Name;\n\n  /**\n   * Specifies the URL of a custom icon. Use this property if the icon you want isn't available, and your custom icon can't be an SVG.\n   * @deprecated Use `iconSvg` or `imgUrl` instead.\n   */\n  iconUrl?: string;\n\n  /**\n   * Specifies the SVG of a custom icon.\n   * Use this property if the icon you want isn't available.\n   */\n  iconSvg?: React.ReactNode;\n\n  /**\n   * Specifies the URL of a custom image. If you set both `iconUrl` and `imgUrl`, `imgUrl` will take precedence.\n   */\n  imgUrl?: string;\n\n  /**\n   * Defines the width and height of the avatar.\n   * This value corresponds to the `width` CSS-property and will center and crop images using `object-fit: cover`.\n   * The default and minimum width value is 28px.\n   */\n  width?: number;\n}\n\nexport namespace AvatarProps {\n  export type Color = \"default\" | \"gen-ai\";\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/avatar/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { IconProps } from \"@cloudscape-design/components/icon\";\n\nexport interface AvatarProps {\n  /**\n   * Determines the color of the avatar.\n   * Use `gen-ai` for AI assistants and `default` otherwise.\n   */\n  color?: AvatarProps.Color;\n\n  /**\n   * The text content shown in the avatar's tooltip.\n   *\n   * When you use this property, make sure to include it in the `ariaLabel`.\n   */\n  tooltipText?: string;\n\n  /**\n   * The text content shown directly in the avatar's body.\n   * Can be 1 or 2 symbols long, every subsequent symbol is ignored.\n   * Use it to define initials that uniquely identify the avatar's owner.\n   */\n  initials?: string;\n\n  /**\n   * When set to true, a loading indicator is shown in avatar.\n   */\n  loading?: boolean;\n\n  /**\n   * Text to describe the avatar for assistive technology.\n   * When more than one avatar is used, provide a unique label for each.\n   * For example, \"Avatar of John Doe\" or \"Avatar of generative AI assistant\".\n   *\n   * If `tooltipText` is used make sure to include it in the `ariaLabel`.\n   */\n  ariaLabel: string;\n\n  /**\n   * Specifies the icon to be displayed as Avatar.\n   * Use `gen-ai` icon for AI assistants. By default `user-profile` icon is used.\n   *\n   * If you set both `iconName` and `initials`, `initials` will take precedence.\n   */\n  iconName?: IconProps.Name;\n\n  /**\n   * Specifies the URL of a custom icon. Use this property if the icon you want isn't available, and your custom icon can't be an SVG.\n   * @deprecated Use `iconSvg` or `imgUrl` instead.\n   */\n  iconUrl?: string;\n\n  /**\n   * Specifies the SVG of a custom icon.\n   * Use this property if the icon you want isn't available.\n   */\n  iconSvg?: React.ReactNode;\n\n  /**\n   * Specifies the URL of a custom image. If you set both `iconUrl` and `imgUrl`, `imgUrl` will take precedence.\n   */\n  imgUrl?: string;\n\n  /**\n   * Specifies an object of selectors and properties that are used to apply custom styles.\n   *\n   * - `root.background` (string) - (Optional) Background of the avatar.\n   * - `root.borderColor` (string) - (Optional) Border color of the avatar.\n   * - `root.borderRadius` (string) - (Optional) Border radius of the avatar.\n   * - `root.borderWidth` (string) - (Optional) Border width of the avatar.\n   * - `root.boxShadow` (string) - (Optional) Box shadow of the avatar.\n   * - `root.color` (string) - (Optional) Text color of the avatar.\n   * - `root.focusRing.borderColor` (string) - (Optional) Focus ring border color.\n   * - `root.focusRing.borderRadius` (string) - (Optional) Focus ring border radius.\n   * - `root.focusRing.borderWidth` (string) - (Optional) Focus ring border width.\n   * @awsuiSystem core\n   */\n  style?: AvatarProps.Style;\n\n  /**\n   * Defines the width and height of the avatar.\n   * This value corresponds to the `width` CSS-property and will center and crop images using `object-fit: cover`.\n   * The default and minimum width value is 28px.\n   */\n  width?: number;\n}\n\nexport namespace AvatarProps {\n  export type Color = \"default\" | \"gen-ai\";\n\n  export interface Style {\n    root?: {\n      background?: string;\n      borderColor?: string;\n      borderRadius?: string;\n      borderWidth?: string;\n      boxShadow?: string;\n      color?: string;\n      focusRing?: {\n        borderColor?: string;\n        borderRadius?: string;\n        borderWidth?: string;\n      };\n    };\n  }\n}\n"]}

package/avatar/internal-do-not-use-core.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import useBaseComponent from "../internal/base-component/use-base-component";
+import { applyDisplayName } from "../internal/utils/apply-display-name";
+import InternalAvatar from "./internal";
+export default function Avatar({ color = "default", iconName = "user-profile", ...props }) {
+    const baseComponentProps = useBaseComponent("Avatar", { props: { color, iconName } });
+    return _jsx(InternalAvatar, { color: color, iconName: iconName, ...props, ...baseComponentProps });
+}
+applyDisplayName(Avatar, "Avatar");
+//# sourceMappingURL=internal-do-not-use-core.js.map

package/avatar/internal.d.ts

@@ -1,5 +1,18 @@
 import { InternalBaseComponentProps } from "../internal/base-component/use-base-component";
 import { AvatarProps } from "./interfaces.js";
-export interface InternalAvatarProps extends AvatarProps, InternalBaseComponentProps {
-}
-export default function InternalAvatar({ color, tooltipText, initials, loading, ariaLabel, iconName, iconSvg, iconUrl, imgUrl, width, __internalRootRef, ...rest }: InternalAvatarProps): import("react/jsx-runtime").JSX.Element;
+export interface InternalAvatarProps extends AvatarProps, InternalBaseComponentProps {}
+export default function InternalAvatar({
+  color,
+  tooltipText,
+  initials,
+  loading,
+  ariaLabel,
+  iconName,
+  iconSvg,
+  iconUrl,
+  imgUrl,
+  style,
+  width,
+  __internalRootRef,
+  ...rest
+}: InternalAvatarProps): import("react/jsx-runtime").JSX.Element;

package/avatar/internal.js

@@ -9,13 +9,14 @@ import Tooltip from "@cloudscape-design/components/internal/tooltip-do-not-use";
 import { getDataAttributes } from "../internal/base-component/get-data-attributes";
 import customCssProps from "../internal/generated/custom-css-properties";
 import LoadingDots from "./loading-dots";
+import { getContentStyles, getImageStyles, getRootStyles } from "./style";
 import styles from "./styles.css.js";
-const AvatarContent = ({ color, loading, initials, iconName, iconSvg, iconUrl, ariaLabel, width, imgUrl, }) => {
+const AvatarContent = ({ color, loading, initials, iconName, iconSvg, iconUrl, ariaLabel, width, imgUrl, style, }) => {
     if (loading) {
-        return _jsx(LoadingDots, { color: color, width: width });
+        return _jsx(LoadingDots, { color: color, width: width, style: style });
     }
     if (imgUrl) {
-        return _jsx("img", { className: styles.image, src: imgUrl });
+        return _jsx("img", { className: styles.image, src: imgUrl, style: getImageStyles(style) });
     }
     if (initials) {
         const letters = initials.length > 2 ? initials.slice(0, 2) : initials;
@@ -26,7 +27,7 @@ const AvatarContent = ({ color, loading, initials, iconName, iconSvg, iconUrl, a
     }
     return _jsx(Icon, { name: iconName, svg: iconSvg, url: iconUrl, alt: ariaLabel, size: "inherit" });
 };
-export default function InternalAvatar({ color, tooltipText, initials, loading = false, ariaLabel, iconName, iconSvg, iconUrl, imgUrl, width = 28, __internalRootRef = null, ...rest }) {
+export default function InternalAvatar({ color, tooltipText, initials, loading = false, ariaLabel, iconName, iconSvg, iconUrl, imgUrl, style, width = 28, __internalRootRef = null, ...rest }) {
     const handleRef = useRef(null);
     const [showTooltip, setShowTooltip] = useState(false);
     const mergedRef = useMergeRefs(handleRef, __internalRootRef);
@@ -51,8 +52,8 @@ export default function InternalAvatar({ color, tooltipText, initials, loading =
             setShowTooltip(false);
         },
     };
-    return (_jsxs("div", { ...getDataAttributes(rest), ref: mergedRef, tabIndex: 0, className: clsx(styles.root, styles[`avatar-color-${color}`], { [styles.initials]: initials }), role: "img", "aria-label": ariaLabel, ...tooltipAttributes, style: { [customCssProps.avatarSize]: `${computedSize}px` }, children: [showTooltip && tooltipText && (_jsx(Tooltip, { value: tooltipText, trackRef: handleRef, 
+    return (_jsxs("div", { ...getDataAttributes(rest), ref: mergedRef, tabIndex: 0, className: clsx(styles.root, styles[`avatar-color-${color}`], { [styles.initials]: initials }), role: "img", "aria-label": ariaLabel, ...tooltipAttributes, style: { [customCssProps.avatarSize]: `${computedSize}px`, ...getRootStyles(style) }, children: [showTooltip && tooltipText && (_jsx(Tooltip, { value: tooltipText, trackRef: handleRef, 
                 // This is added to ensure tooltip is closed when clicked for consistency with other tooltip usages
-                contentAttributes: { onPointerDown: () => setShowTooltip(false) } })), _jsx("div", { className: styles.content, "aria-hidden": "true", children: _jsx(AvatarContent, { color: color, ariaLabel: ariaLabel, initials: initials, loading: loading, iconName: iconName, iconSvg: iconSvg, iconUrl: iconUrl, imgUrl: imgUrl, width: computedSize }) })] }));
+                contentAttributes: { onPointerDown: () => setShowTooltip(false) } })), _jsx("div", { className: styles.content, "aria-hidden": "true", style: getContentStyles(style), children: _jsx(AvatarContent, { color: color, ariaLabel: ariaLabel, initials: initials, loading: loading, iconName: iconName, iconSvg: iconSvg, iconUrl: iconUrl, imgUrl: imgUrl, style: style, width: computedSize }) })] }));
 }
 //# sourceMappingURL=internal.js.map

package/avatar/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/avatar/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useRef, useState } from \"react\";\nimport clsx from \"clsx\";\n\nimport { useMergeRefs, warnOnce } from \"@cloudscape-design/component-toolkit/internal\";\nimport Icon from \"@cloudscape-design/components/icon\";\nimport Tooltip from \"@cloudscape-design/components/internal/tooltip-do-not-use\";\n\nimport { getDataAttributes } from \"../internal/base-component/get-data-attributes\";\nimport { InternalBaseComponentProps } from \"../internal/base-component/use-base-component\";\nimport customCssProps from \"../internal/generated/custom-css-properties\";\nimport { AvatarProps } from \"./interfaces.js\";\nimport LoadingDots from \"./loading-dots\";\n\nimport styles from \"./styles.css.js\";\n\nexport interface InternalAvatarProps extends AvatarProps, InternalBaseComponentProps {}\n\nconst AvatarContent = ({\n  color,\n  loading,\n  initials,\n  iconName,\n  iconSvg,\n  iconUrl,\n  ariaLabel,\n  width,\n  imgUrl,\n}: AvatarProps) => {\n  if (loading) {\n    return <LoadingDots color={color} width={width} />;\n  }\n\n  if (imgUrl) {\n    return <img className={styles.image} src={imgUrl} />;\n  }\n\n  if (initials) {\n    const letters = initials.length > 2 ? initials.slice(0, 2) : initials;\n\n    if (initials.length > 2) {\n      warnOnce(\"Avatar\", `\"initials\" is longer than 2 characters. Only the first two characters are shown.`);\n    }\n\n    return <span className={styles.initials}>{letters}</span>;\n  }\n\n  return <Icon name={iconName} svg={iconSvg} url={iconUrl} alt={ariaLabel} size=\"inherit\" />;\n};\n\nexport default function InternalAvatar({\n  color,\n  tooltipText,\n  initials,\n  loading = false,\n  ariaLabel,\n  iconName,\n  iconSvg,\n  iconUrl,\n  imgUrl,\n  width = 28,\n  __internalRootRef = null,\n  ...rest\n}: InternalAvatarProps) {\n  const handleRef = useRef<HTMLDivElement>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const mergedRef = useMergeRefs(handleRef, __internalRootRef);\n  const computedSize = width < 28 ? 28 : width;\n\n  const tooltipAttributes = {\n    onFocus: () => {\n      setShowTooltip(true);\n    },\n    onBlur: () => {\n      setShowTooltip(false);\n    },\n    onMouseEnter: () => {\n      setShowTooltip(true);\n    },\n    onMouseLeave: () => {\n      setShowTooltip(false);\n    },\n    onTouchStart: () => {\n      setShowTooltip(true);\n    },\n    onTouchEnd: () => {\n      setShowTooltip(false);\n    },\n  };\n\n  return (\n    <div\n      {...getDataAttributes(rest)}\n      ref={mergedRef}\n      tabIndex={0}\n      className={clsx(styles.root, styles[`avatar-color-${color}`], { [styles.initials]: initials })}\n      role=\"img\"\n      aria-label={ariaLabel}\n      {...tooltipAttributes}\n      style={{ [customCssProps.avatarSize]: `${computedSize}px` }}\n    >\n      {showTooltip && tooltipText && (\n        <Tooltip\n          value={tooltipText}\n          trackRef={handleRef}\n          // This is added to ensure tooltip is closed when clicked for consistency with other tooltip usages\n          contentAttributes={{ onPointerDown: () => setShowTooltip(false) }}\n        />\n      )}\n\n      {/* aria-hidden is added so that screen readers focus only the parent div */}\n      {/* when it is not hidden, it becomes unstable in JAWS */}\n      <div className={styles.content} aria-hidden=\"true\">\n        <AvatarContent\n          color={color}\n          ariaLabel={ariaLabel}\n          initials={initials}\n          loading={loading}\n          iconName={iconName}\n          iconSvg={iconSvg}\n          iconUrl={iconUrl}\n          imgUrl={imgUrl}\n          width={computedSize}\n        />\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/avatar/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useRef, useState } from \"react\";\nimport clsx from \"clsx\";\n\nimport { useMergeRefs, warnOnce } from \"@cloudscape-design/component-toolkit/internal\";\nimport Icon from \"@cloudscape-design/components/icon\";\nimport Tooltip from \"@cloudscape-design/components/internal/tooltip-do-not-use\";\n\nimport { getDataAttributes } from \"../internal/base-component/get-data-attributes\";\nimport { InternalBaseComponentProps } from \"../internal/base-component/use-base-component\";\nimport customCssProps from \"../internal/generated/custom-css-properties\";\nimport { AvatarProps } from \"./interfaces.js\";\nimport LoadingDots from \"./loading-dots\";\nimport { getContentStyles, getImageStyles, getRootStyles } from \"./style\";\n\nimport styles from \"./styles.css.js\";\n\nexport interface InternalAvatarProps extends AvatarProps, InternalBaseComponentProps {}\n\nconst AvatarContent = ({\n  color,\n  loading,\n  initials,\n  iconName,\n  iconSvg,\n  iconUrl,\n  ariaLabel,\n  width,\n  imgUrl,\n  style,\n}: AvatarProps) => {\n  if (loading) {\n    return <LoadingDots color={color} width={width} style={style} />;\n  }\n\n  if (imgUrl) {\n    return <img className={styles.image} src={imgUrl} style={getImageStyles(style)} />;\n  }\n\n  if (initials) {\n    const letters = initials.length > 2 ? initials.slice(0, 2) : initials;\n\n    if (initials.length > 2) {\n      warnOnce(\"Avatar\", `\"initials\" is longer than 2 characters. Only the first two characters are shown.`);\n    }\n\n    return <span className={styles.initials}>{letters}</span>;\n  }\n\n  return <Icon name={iconName} svg={iconSvg} url={iconUrl} alt={ariaLabel} size=\"inherit\" />;\n};\n\nexport default function InternalAvatar({\n  color,\n  tooltipText,\n  initials,\n  loading = false,\n  ariaLabel,\n  iconName,\n  iconSvg,\n  iconUrl,\n  imgUrl,\n  style,\n  width = 28,\n  __internalRootRef = null,\n  ...rest\n}: InternalAvatarProps) {\n  const handleRef = useRef<HTMLDivElement>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const mergedRef = useMergeRefs(handleRef, __internalRootRef);\n  const computedSize = width < 28 ? 28 : width;\n\n  const tooltipAttributes = {\n    onFocus: () => {\n      setShowTooltip(true);\n    },\n    onBlur: () => {\n      setShowTooltip(false);\n    },\n    onMouseEnter: () => {\n      setShowTooltip(true);\n    },\n    onMouseLeave: () => {\n      setShowTooltip(false);\n    },\n    onTouchStart: () => {\n      setShowTooltip(true);\n    },\n    onTouchEnd: () => {\n      setShowTooltip(false);\n    },\n  };\n\n  return (\n    <div\n      {...getDataAttributes(rest)}\n      ref={mergedRef}\n      tabIndex={0}\n      className={clsx(styles.root, styles[`avatar-color-${color}`], { [styles.initials]: initials })}\n      role=\"img\"\n      aria-label={ariaLabel}\n      {...tooltipAttributes}\n      style={{ [customCssProps.avatarSize]: `${computedSize}px`, ...getRootStyles(style) }}\n    >\n      {showTooltip && tooltipText && (\n        <Tooltip\n          value={tooltipText}\n          trackRef={handleRef}\n          // This is added to ensure tooltip is closed when clicked for consistency with other tooltip usages\n          contentAttributes={{ onPointerDown: () => setShowTooltip(false) }}\n        />\n      )}\n\n      {/* aria-hidden is added so that screen readers focus only the parent div */}\n      {/* when it is not hidden, it becomes unstable in JAWS */}\n      <div className={styles.content} aria-hidden=\"true\" style={getContentStyles(style)}>\n        <AvatarContent\n          color={color}\n          ariaLabel={ariaLabel}\n          initials={initials}\n          loading={loading}\n          iconName={iconName}\n          iconSvg={iconSvg}\n          iconUrl={iconUrl}\n          imgUrl={imgUrl}\n          style={style}\n          width={computedSize}\n        />\n      </div>\n    </div>\n  );\n}\n"]}

package/avatar/loading-dots/index.d.ts

@@ -1,6 +1,12 @@
+import { AvatarProps } from "../interfaces.js";
 interface LoadingDotsProps {
-    color?: string;
-    width?: number;
+  color?: string;
+  style?: AvatarProps.Style;
+  width?: number;
 }
-export default function LoadingDots({ color, width }: LoadingDotsProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export default function LoadingDots({
+  color,
+  width,
+  style
+}: LoadingDotsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/avatar/loading-dots/index.js

@@ -2,11 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import clsx from "clsx";
+import { getLoadingDotsStyle } from "../style";
 import styles from "./styles.css.js";
-export default function LoadingDots({ color, width }) {
+export default function LoadingDots({ color, width, style }) {
     const dotSize = `calc(.14px * ${width})`;
     return (
     // "gen-ai" class is added so that the gradient background animates.
-    _jsx("div", { className: clsx(styles.root, { [styles["gen-ai"]]: color === "gen-ai" }), children: _jsxs("div", { className: styles.typing, children: [_jsx("div", { className: styles.dot, style: { blockSize: dotSize, inlineSize: dotSize } }), _jsx("div", { className: styles.dot, style: { blockSize: dotSize, inlineSize: dotSize } }), _jsx("div", { className: styles.dot, style: { blockSize: dotSize, inlineSize: dotSize } })] }) }));
+    _jsx("div", { className: clsx(styles.root, { [styles["gen-ai"]]: color === "gen-ai" }), style: getLoadingDotsStyle(style), children: _jsxs("div", { className: styles.typing, children: [_jsx("div", { className: styles.dot, style: { blockSize: dotSize, inlineSize: dotSize } }), _jsx("div", { className: styles.dot, style: { blockSize: dotSize, inlineSize: dotSize } }), _jsx("div", { className: styles.dot, style: { blockSize: dotSize, inlineSize: dotSize } })] }) }));
 }
 //# sourceMappingURL=index.js.map

package/avatar/loading-dots/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/avatar/loading-dots/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAOrC,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,EAAoB;IACpE,MAAM,OAAO,GAAG,gBAAgB,KAAK,GAAG,CAAC;IAEzC,OAAO;IACL,oEAAoE;IACpE,cAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,KAAK,KAAK,QAAQ,EAAE,CAAC,YAC3E,eAAK,SAAS,EAAE,MAAM,CAAC,MAAM,aAC3B,cAAK,SAAS,EAAE,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,GAAQ,EACtF,cAAK,SAAS,EAAE,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,GAAQ,EACtF,cAAK,SAAS,EAAE,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,GAAQ,IAClF,GACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from \"clsx\";\n\nimport styles from \"./styles.css.js\";\n\ninterface LoadingDotsProps {\n  color?: string;\n  width?: number;\n}\n\nexport default function LoadingDots({ color, width }: LoadingDotsProps) {\n  const dotSize = `calc(.14px * ${width})`;\n\n  return (\n    // \"gen-ai\" class is added so that the gradient background animates.\n    <div className={clsx(styles.root, { [styles[\"gen-ai\"]]: color === \"gen-ai\" })}>\n      <div className={styles.typing}>\n        <div className={styles.dot} style={{ blockSize: dotSize, inlineSize: dotSize }}></div>\n        <div className={styles.dot} style={{ blockSize: dotSize, inlineSize: dotSize }}></div>\n        <div className={styles.dot} style={{ blockSize: dotSize, inlineSize: dotSize }}></div>\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/avatar/loading-dots/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE/C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAoB;IAC3E,MAAM,OAAO,GAAG,gBAAgB,KAAK,GAAG,CAAC;IAEzC,OAAO;IACL,oEAAoE;IACpE,cAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,KAAK,KAAK,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,mBAAmB,CAAC,KAAK,CAAC,YAC9G,eAAK,SAAS,EAAE,MAAM,CAAC,MAAM,aAC3B,cAAK,SAAS,EAAE,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,GAAQ,EACtF,cAAK,SAAS,EAAE,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,GAAQ,EACtF,cAAK,SAAS,EAAE,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,GAAQ,IAClF,GACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from \"clsx\";\n\nimport { AvatarProps } from \"../interfaces.js\";\nimport { getLoadingDotsStyle } from \"../style\";\n\nimport styles from \"./styles.css.js\";\n\ninterface LoadingDotsProps {\n  color?: string;\n  style?: AvatarProps.Style;\n  width?: number;\n}\n\nexport default function LoadingDots({ color, width, style }: LoadingDotsProps) {\n  const dotSize = `calc(.14px * ${width})`;\n\n  return (\n    // \"gen-ai\" class is added so that the gradient background animates.\n    <div className={clsx(styles.root, { [styles[\"gen-ai\"]]: color === \"gen-ai\" })} style={getLoadingDotsStyle(style)}>\n      <div className={styles.typing}>\n        <div className={styles.dot} style={{ blockSize: dotSize, inlineSize: dotSize }}></div>\n        <div className={styles.dot} style={{ blockSize: dotSize, inlineSize: dotSize }}></div>\n        <div className={styles.dot} style={{ blockSize: dotSize, inlineSize: dotSize }}></div>\n      </div>\n    </div>\n  );\n}\n"]}

package/avatar/style.d.ts

@@ -0,0 +1,5 @@
+import { AvatarProps } from "./interfaces";
+export declare function getRootStyles(style: AvatarProps.Style | undefined): {};
+export declare function getContentStyles(style: AvatarProps.Style | undefined): {};
+export declare function getImageStyles(style: AvatarProps.Style | undefined): {};
+export declare function getLoadingDotsStyle(style: AvatarProps.Style | undefined): {};

package/avatar/style.js

@@ -0,0 +1,55 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { SYSTEM } from "../internal/environment";
+import customCssProps from "../internal/generated/custom-css-properties";
+export function getRootStyles(style) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    let properties = {};
+    if (SYSTEM === "core" && (style === null || style === void 0 ? void 0 : style.root)) {
+        properties = {
+            background: (_a = style.root) === null || _a === void 0 ? void 0 : _a.background,
+            borderRadius: (_b = style.root) === null || _b === void 0 ? void 0 : _b.borderRadius,
+            boxShadow: (_c = style.root) === null || _c === void 0 ? void 0 : _c.boxShadow,
+            color: (_d = style.root) === null || _d === void 0 ? void 0 : _d.color,
+            [customCssProps.avatarRootBorderWidth]: (_e = style.root) === null || _e === void 0 ? void 0 : _e.borderWidth,
+            [customCssProps.avatarFocusRingBorderColor]: (_g = (_f = style.root) === null || _f === void 0 ? void 0 : _f.focusRing) === null || _g === void 0 ? void 0 : _g.borderColor,
+            [customCssProps.avatarFocusRingBorderRadius]: (_j = (_h = style.root) === null || _h === void 0 ? void 0 : _h.focusRing) === null || _j === void 0 ? void 0 : _j.borderRadius,
+            [customCssProps.avatarFocusRingBorderWidth]: (_l = (_k = style.root) === null || _k === void 0 ? void 0 : _k.focusRing) === null || _l === void 0 ? void 0 : _l.borderWidth,
+        };
+    }
+    return properties;
+}
+export function getContentStyles(style) {
+    var _a, _b, _c, _d;
+    let properties = {};
+    if (SYSTEM === "core" && (style === null || style === void 0 ? void 0 : style.root)) {
+        properties = {
+            borderColor: (_a = style.root) === null || _a === void 0 ? void 0 : _a.borderColor,
+            borderRadius: (_b = style.root) === null || _b === void 0 ? void 0 : _b.borderRadius,
+            borderStyle: ((_c = style.root) === null || _c === void 0 ? void 0 : _c.borderWidth) && "solid",
+            borderWidth: (_d = style.root) === null || _d === void 0 ? void 0 : _d.borderWidth,
+        };
+    }
+    return properties;
+}
+export function getImageStyles(style) {
+    var _a;
+    let properties = {};
+    if (SYSTEM === "core" && (style === null || style === void 0 ? void 0 : style.root)) {
+        properties = {
+            borderRadius: (_a = style.root) === null || _a === void 0 ? void 0 : _a.borderRadius,
+        };
+    }
+    return properties;
+}
+export function getLoadingDotsStyle(style) {
+    var _a;
+    let properties = {};
+    if (SYSTEM === "core" && (style === null || style === void 0 ? void 0 : style.root)) {
+        properties = {
+            borderRadius: (_a = style.root) === null || _a === void 0 ? void 0 : _a.borderRadius,
+        };
+    }
+    return properties;
+}
+//# sourceMappingURL=style.js.map

package/avatar/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/avatar/style.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAGzE,MAAM,UAAU,aAAa,CAAC,KAAoC;;IAChE,IAAI,UAAU,GAAG,EAAE,CAAC;IAEpB,IAAI,MAAM,KAAK,MAAM,KAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAA,EAAE;QACpC,UAAU,GAAG;YACX,UAAU,EAAE,MAAA,KAAK,CAAC,IAAI,0CAAE,UAAU;YAClC,YAAY,EAAE,MAAA,KAAK,CAAC,IAAI,0CAAE,YAAY;YACtC,SAAS,EAAE,MAAA,KAAK,CAAC,IAAI,0CAAE,SAAS;YAChC,KAAK,EAAE,MAAA,KAAK,CAAC,IAAI,0CAAE,KAAK;YACxB,CAAC,cAAc,CAAC,qBAAqB,CAAC,EAAE,MAAA,KAAK,CAAC,IAAI,0CAAE,WAAW;YAC/D,CAAC,cAAc,CAAC,0BAA0B,CAAC,EAAE,MAAA,MAAA,KAAK,CAAC,IAAI,0CAAE,SAAS,0CAAE,WAAW;YAC/E,CAAC,cAAc,CAAC,2BAA2B,CAAC,EAAE,MAAA,MAAA,KAAK,CAAC,IAAI,0CAAE,SAAS,0CAAE,YAAY;YACjF,CAAC,cAAc,CAAC,0BAA0B,CAAC,EAAE,MAAA,MAAA,KAAK,CAAC,IAAI,0CAAE,SAAS,0CAAE,WAAW;SAChF,CAAC;KACH;IAED,OAAO,UAAU,CAAC;AACpB,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,KAAoC;;IACnE,IAAI,UAAU,GAAG,EAAE,CAAC;IAEpB,IAAI,MAAM,KAAK,MAAM,KAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAA,EAAE;QACpC,UAAU,GAAG;YACX,WAAW,EAAE,MAAA,KAAK,CAAC,IAAI,0CAAE,WAAW;YACpC,YAAY,EAAE,MAAA,KAAK,CAAC,IAAI,0CAAE,YAAY;YACtC,WAAW,EAAE,CAAA,MAAA,KAAK,CAAC,IAAI,0CAAE,WAAW,KAAI,OAAO;YAC/C,WAAW,EAAE,MAAA,KAAK,CAAC,IAAI,0CAAE,WAAW;SACrC,CAAC;KACH;IAED,OAAO,UAAU,CAAC;AACpB,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,KAAoC;;IACjE,IAAI,UAAU,GAAG,EAAE,CAAC;IAEpB,IAAI,MAAM,KAAK,MAAM,KAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAA,EAAE;QACpC,UAAU,GAAG;YACX,YAAY,EAAE,MAAA,KAAK,CAAC,IAAI,0CAAE,YAAY;SACvC,CAAC;KACH;IAED,OAAO,UAAU,CAAC;AACpB,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,KAAoC;;IACtE,IAAI,UAAU,GAAG,EAAE,CAAC;IAEpB,IAAI,MAAM,KAAK,MAAM,KAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAA,EAAE;QACpC,UAAU,GAAG;YACX,YAAY,EAAE,MAAA,KAAK,CAAC,IAAI,0CAAE,YAAY;SACvC,CAAC;KACH;IAED,OAAO,UAAU,CAAC;AACpB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { SYSTEM } from \"../internal/environment\";\nimport customCssProps from \"../internal/generated/custom-css-properties\";\nimport { AvatarProps } from \"./interfaces\";\n\nexport function getRootStyles(style: AvatarProps.Style | undefined) {\n  let properties = {};\n\n  if (SYSTEM === \"core\" && style?.root) {\n    properties = {\n      background: style.root?.background,\n      borderRadius: style.root?.borderRadius,\n      boxShadow: style.root?.boxShadow,\n      color: style.root?.color,\n      [customCssProps.avatarRootBorderWidth]: style.root?.borderWidth,\n      [customCssProps.avatarFocusRingBorderColor]: style.root?.focusRing?.borderColor,\n      [customCssProps.avatarFocusRingBorderRadius]: style.root?.focusRing?.borderRadius,\n      [customCssProps.avatarFocusRingBorderWidth]: style.root?.focusRing?.borderWidth,\n    };\n  }\n\n  return properties;\n}\n\nexport function getContentStyles(style: AvatarProps.Style | undefined) {\n  let properties = {};\n\n  if (SYSTEM === \"core\" && style?.root) {\n    properties = {\n      borderColor: style.root?.borderColor,\n      borderRadius: style.root?.borderRadius,\n      borderStyle: style.root?.borderWidth && \"solid\",\n      borderWidth: style.root?.borderWidth,\n    };\n  }\n\n  return properties;\n}\n\nexport function getImageStyles(style: AvatarProps.Style | undefined) {\n  let properties = {};\n\n  if (SYSTEM === \"core\" && style?.root) {\n    properties = {\n      borderRadius: style.root?.borderRadius,\n    };\n  }\n\n  return properties;\n}\n\nexport function getLoadingDotsStyle(style: AvatarProps.Style | undefined) {\n  let properties = {};\n\n  if (SYSTEM === \"core\" && style?.root) {\n    properties = {\n      borderRadius: style.root?.borderRadius,\n    };\n  }\n\n  return properties;\n}\n"]}

package/avatar/styles.css.js

@@ -1,11 +1,11 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_1qkal_1krd6_15",
-  "avatar-color-default": "awsui_avatar-color-default_1qkal_1krd6_50",
-  "avatar-color-gen-ai": "awsui_avatar-color-gen-ai_1qkal_1krd6_53",
-  "initials": "awsui_initials_1qkal_1krd6_56",
-  "image": "awsui_image_1qkal_1krd6_83",
-  "content": "awsui_content_1qkal_1krd6_87"
+  "root": "awsui_root_1qkal_qb5ol_15",
+  "avatar-color-default": "awsui_avatar-color-default_1qkal_qb5ol_53",
+  "avatar-color-gen-ai": "awsui_avatar-color-gen-ai_1qkal_qb5ol_56",
+  "initials": "awsui_initials_1qkal_qb5ol_59",
+  "image": "awsui_image_1qkal_qb5ol_86",
+  "content": "awsui_content_1qkal_qb5ol_90"
 };
   

package/avatar/styles.scoped.css

@@ -12,7 +12,7 @@
 */
 /* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
 /* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
-.awsui_root_1qkal_1krd6_15:not(#\9) {
+.awsui_root_1qkal_qb5ol_15:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -38,70 +38,73 @@
   visibility: visible;
   white-space: normal;
   word-spacing: normal;
+  align-items: center;
+  display: flex;
   color: var(--color-text-avatar-kuhkoa, #ffffff);
-  block-size: var(--awsui-avatar-size-n0cxze);
-  inline-size: var(--awsui-avatar-size-n0cxze);
+  block-size: var(--awsui-avatar-size-qkxefc);
+  inline-size: var(--awsui-avatar-size-qkxefc);
+  justify-content: center;
   position: relative;
   border-start-start-radius: 50%;
   border-start-end-radius: 50%;
   border-end-start-radius: 50%;
   border-end-end-radius: 50%;
 }
-.awsui_root_1qkal_1krd6_15.awsui_avatar-color-default_1qkal_1krd6_50:not(#\9) {
+.awsui_root_1qkal_qb5ol_15.awsui_avatar-color-default_1qkal_qb5ol_53:not(#\9) {
   background-color: var(--color-background-avatar-default-t427xm, #424650);
 }
-.awsui_root_1qkal_1krd6_15.awsui_avatar-color-gen-ai_1qkal_1krd6_53:not(#\9) {
+.awsui_root_1qkal_qb5ol_15.awsui_avatar-color-gen-ai_1qkal_qb5ol_56:not(#\9) {
   background: var(--color-background-avatar-gen-ai-oxp2v6, radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40%, #8575ff 60%, #962eff 80%));
 }
-.awsui_root_1qkal_1krd6_15.awsui_initials_1qkal_1krd6_56:not(#\9) {
+.awsui_root_1qkal_qb5ol_15.awsui_initials_1qkal_qb5ol_59:not(#\9) {
   font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
   font-size: var(--font-size-body-s-smc8cv, 12px);
   line-height: var(--line-height-body-s-nu5hx1, 16px);
   font-weight: var(--font-weight-heading-l-0t6dwc, 700);
 }
-.awsui_root_1qkal_1krd6_15:not(#\9):focus {
+.awsui_root_1qkal_qb5ol_15:not(#\9):focus {
   outline: none;
 }
-.awsui_root_1qkal_1krd6_15:not(#\9):focus-visible {
+.awsui_root_1qkal_qb5ol_15:not(#\9):focus-visible {
   position: relative;
   box-sizing: border-box;
   outline: 2px dotted transparent;
-  outline-offset: 3px;
+  outline-offset: calc(4px + var(--awsui-avatar-root-border-width-qkxefc, 0px) + var(--awsui-avatar-focus-ring-border-width-qkxefc, 0px) - 1px);
 }
-.awsui_root_1qkal_1krd6_15:not(#\9):focus-visible::before {
+.awsui_root_1qkal_qb5ol_15:not(#\9):focus-visible::before {
   content: " ";
   display: block;
   position: absolute;
   box-sizing: border-box;
-  inset-inline-start: calc(-1 * 4px);
-  inset-block-start: calc(-1 * 4px);
-  inline-size: calc(100% + 2 * 4px);
-  block-size: calc(100% + 2 * 4px);
-  border-radius: 50%;
-  border: 2px solid var(--color-border-item-focused-uk47pl, #006ce0);
+  inset-inline-start: calc(-1 * calc(4px + var(--awsui-avatar-root-border-width-qkxefc, 0px) + var(--awsui-avatar-focus-ring-border-width-qkxefc, 0px)));
+  inset-block-start: calc(-1 * calc(4px + var(--awsui-avatar-root-border-width-qkxefc, 0px) + var(--awsui-avatar-focus-ring-border-width-qkxefc, 0px)));
+  inline-size: calc(100% + 2 * calc(4px + var(--awsui-avatar-root-border-width-qkxefc, 0px) + var(--awsui-avatar-focus-ring-border-width-qkxefc, 0px)));
+  block-size: calc(100% + 2 * calc(4px + var(--awsui-avatar-root-border-width-qkxefc, 0px) + var(--awsui-avatar-focus-ring-border-width-qkxefc, 0px)));
+  border-radius: var(--awsui-avatar-focus-ring-border-radius-qkxefc, 50%);
+  border: var(--awsui-avatar-focus-ring-border-width-qkxefc, 2px) solid var(--awsui-avatar-focus-ring-border-color-qkxefc, var(--color-border-item-focused-uk47pl, #006ce0));
 }
-.awsui_root_1qkal_1krd6_15:not(#\9):has(.awsui_image_1qkal_1krd6_83) {
+.awsui_root_1qkal_qb5ol_15:not(#\9):has(.awsui_image_1qkal_qb5ol_86) {
   background: transparent;
 }
 
-.awsui_content_1qkal_1krd6_87:not(#\9) {
+.awsui_content_1qkal_qb5ol_90:not(#\9) {
   display: flex;
   align-items: center;
   justify-content: center;
   block-size: inherit;
   inline-size: inherit;
   overflow: hidden;
-  line-height: calc(0.8 * var(--awsui-avatar-size-n0cxze));
+  line-height: calc(0.8 * var(--awsui-avatar-size-qkxefc));
 }
-.awsui_content_1qkal_1krd6_87 .awsui_image_1qkal_1krd6_83:not(#\9) {
+.awsui_content_1qkal_qb5ol_90 .awsui_image_1qkal_qb5ol_86:not(#\9) {
   border-start-start-radius: 50%;
   border-start-end-radius: 50%;
   border-end-start-radius: 50%;
   border-end-end-radius: 50%;
-  block-size: var(--awsui-avatar-size-n0cxze);
-  inline-size: var(--awsui-avatar-size-n0cxze);
+  block-size: var(--awsui-avatar-size-qkxefc);
+  inline-size: var(--awsui-avatar-size-qkxefc);
   object-fit: cover;
 }
-.awsui_content_1qkal_1krd6_87 .awsui_initials_1qkal_1krd6_56:not(#\9) {
-  font-size: clamp(var(--font-size-body-s-smc8cv, 12px), 0.4 * var(--awsui-avatar-size-n0cxze), 0.4 * var(--awsui-avatar-size-n0cxze));
+.awsui_content_1qkal_qb5ol_90 .awsui_initials_1qkal_qb5ol_59:not(#\9) {
+  font-size: clamp(var(--font-size-body-s-smc8cv, 12px), 0.4 * var(--awsui-avatar-size-qkxefc), 0.4 * var(--awsui-avatar-size-qkxefc));
 }

package/avatar/styles.selectors.js

@@ -2,11 +2,11 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_1qkal_1krd6_15",
-  "avatar-color-default": "awsui_avatar-color-default_1qkal_1krd6_50",
-  "avatar-color-gen-ai": "awsui_avatar-color-gen-ai_1qkal_1krd6_53",
-  "initials": "awsui_initials_1qkal_1krd6_56",
-  "image": "awsui_image_1qkal_1krd6_83",
-  "content": "awsui_content_1qkal_1krd6_87"
+  "root": "awsui_root_1qkal_qb5ol_15",
+  "avatar-color-default": "awsui_avatar-color-default_1qkal_qb5ol_53",
+  "avatar-color-gen-ai": "awsui_avatar-color-gen-ai_1qkal_qb5ol_56",
+  "initials": "awsui_initials_1qkal_qb5ol_59",
+  "image": "awsui_image_1qkal_qb5ol_86",
+  "content": "awsui_content_1qkal_qb5ol_90"
 };
   

package/chat-bubble/index.d.ts

@@ -1,3 +1,8 @@
 import { ChatBubbleProps } from "./interfaces";
 export type { ChatBubbleProps };
-export default function ChatBubble({ type, hideAvatar, showLoadingBar, ...props }: ChatBubbleProps): import("react/jsx-runtime").JSX.Element;
+export default function ChatBubble({
+  type,
+  hideAvatar,
+  showLoadingBar,
+  ...props
+}: ChatBubbleProps): import("react/jsx-runtime").JSX.Element;