@cloudscape-design/chat-components 1.0.24 → 1.0.26

package/avatar/interfaces.d.ts

@@ -39,18 +39,24 @@ export interface AvatarProps {
     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.
-     * For SVG icons, use the `iconSvg` slot instead.
-     *
-     * If you set both `iconUrl` and `iconSvg`, `iconSvg` will take precedence.
+     * @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.
-     * If you set both `iconUrl` and `iconSvg`, `iconSvg` will take precedence.
      */
     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;
 }
 export declare namespace AvatarProps {
     type Color = "default" | "gen-ai";

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   * For SVG icons, use the `iconSvg` slot instead.\n   *\n   * If you set both `iconUrl` and `iconSvg`, `iconSvg` will take precedence.\n   */\n  iconUrl?: string;\n\n  /**\n   * Specifies the SVG of a custom icon.\n   *\n   * Use this property if the icon you want isn't available.\n   * If you set both `iconUrl` and `iconSvg`, `iconSvg` will take precedence.\n   */\n  iconSvg?: React.ReactNode;\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   * 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"]}

package/avatar/internal.d.ts

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

package/avatar/internal.js

@@ -6,27 +6,32 @@ import clsx from "clsx";
 import { warnOnce } from "@cloudscape-design/component-toolkit/internal";
 import Icon from "@cloudscape-design/components/icon";
 import Tooltip from "@cloudscape-design/components/internal/tooltip-do-not-use";
+import * as awsui from "@cloudscape-design/design-tokens";
 import { getDataAttributes } from "../internal/base-component/get-data-attributes";
 import { useMergeRefs } from "../internal/utils/use-merge-refs";
 import LoadingDots from "./loading-dots";
 import styles from "./styles.css.js";
-const AvatarContent = ({ color, loading, initials, iconName, iconSvg, iconUrl, ariaLabel }) => {
+const AvatarContent = ({ color, loading, initials, iconName, iconSvg, iconUrl, ariaLabel, width, imgUrl, }) => {
     if (loading) {
-        return _jsx(LoadingDots, { color: color });
+        return _jsx(LoadingDots, { color: color, width: width });
+    }
+    if (imgUrl) {
+        return _jsx("img", { className: styles.image, src: imgUrl, style: { height: width, width: width } });
     }
     if (initials) {
         const letters = initials.length > 2 ? initials.slice(0, 2) : initials;
         if (initials.length > 2) {
             warnOnce("Avatar", `"initials" is longer than 2 characters. Only the first two characters are shown.`);
         }
-        return _jsx("span", { children: letters });
+        return (_jsx("span", { style: { fontSize: `clamp(${awsui.fontSizeBodyS}, calc(0.4px * ${width}), calc(0.4px * ${width}))` }, children: letters }));
     }
-    return _jsx(Icon, { name: iconName, svg: iconSvg, url: iconUrl, alt: ariaLabel });
+    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, __internalRootRef = null, ...rest }) {
+export default function InternalAvatar({ color, tooltipText, initials, loading = false, ariaLabel, iconName, iconSvg, iconUrl, imgUrl, width = 28, __internalRootRef = null, ...rest }) {
     const handleRef = useRef(null);
     const [showTooltip, setShowTooltip] = useState(false);
     const mergedRef = useMergeRefs(handleRef, __internalRootRef);
+    const computedSize = width < 28 ? 28 : width;
     const tooltipAttributes = {
         onFocus: () => {
             setShowTooltip(true);
@@ -49,8 +54,8 @@ export default function InternalAvatar({ color, tooltipText, initials, loading =
     };
     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, children: [showTooltip && tooltipText && (_jsx(Tooltip, { value: tooltipText, trackRef: handleRef, 
+        }), role: "img", "aria-label": ariaLabel, ...tooltipAttributes, style: { height: computedSize, width: computedSize }, 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 }) })] }));
+                contentAttributes: { onPointerDown: () => setShowTooltip(false) } })), _jsx("div", { className: styles.content, "aria-hidden": "true", style: { lineHeight: `calc(.8px * ${computedSize})` }, children: _jsx(AvatarContent, { color: color, ariaLabel: ariaLabel, initials: initials, loading: loading, iconName: iconName, iconSvg: iconSvg, iconUrl: iconUrl, imgUrl: imgUrl, 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 { 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 { useMergeRefs } from \"../internal/utils/use-merge-refs\";\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 = ({ color, loading, initials, iconName, iconSvg, iconUrl, ariaLabel }: AvatarProps) => {\n  if (loading) {\n    return <LoadingDots color={color} />;\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>{letters}</span>;\n  }\n\n  return <Icon name={iconName} svg={iconSvg} url={iconUrl} alt={ariaLabel} />;\n};\n\nexport default function InternalAvatar({\n  color,\n  tooltipText,\n  initials,\n  loading = false,\n  ariaLabel,\n  iconName,\n  iconSvg,\n  iconUrl,\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\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}`], {\n        [styles.initials]: initials,\n      })}\n      role=\"img\"\n      aria-label={ariaLabel}\n      {...tooltipAttributes}\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        />\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 { 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\";\nimport * as awsui from \"@cloudscape-design/design-tokens\";\n\nimport { getDataAttributes } from \"../internal/base-component/get-data-attributes\";\nimport { InternalBaseComponentProps } from \"../internal/base-component/use-base-component\";\nimport { useMergeRefs } from \"../internal/utils/use-merge-refs\";\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} style={{ height: width, width: width }} />;\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 (\n      <span style={{ fontSize: `clamp(${awsui.fontSizeBodyS}, calc(0.4px * ${width}), calc(0.4px * ${width}))` }}>\n        {letters}\n      </span>\n    );\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}`], {\n        [styles.initials]: initials,\n      })}\n      role=\"img\"\n      aria-label={ariaLabel}\n      {...tooltipAttributes}\n      style={{ height: computedSize, width: computedSize }}\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={{ lineHeight: `calc(.8px * ${computedSize})` }}>\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"]}

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

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

package/avatar/loading-dots/index.js

@@ -3,9 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: Apache-2.0
 import clsx from "clsx";
 import styles from "./styles.css.js";
-export default function LoadingDots({ color }) {
+export default function LoadingDots({ color, width }) {
+    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 }), _jsx("div", { className: styles.dot }), _jsx("div", { className: styles.dot })] }) }));
+    _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 } })] }) }));
 }
 //# 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;AAMrC,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,KAAK,EAAoB;IAC7D,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,GAAQ,EAClC,cAAK,SAAS,EAAE,MAAM,CAAC,GAAG,GAAQ,EAClC,cAAK,SAAS,EAAE,MAAM,CAAC,GAAG,GAAQ,IAC9B,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}\n\nexport default function LoadingDots({ color }: LoadingDotsProps) {\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}></div>\n        <div className={styles.dot}></div>\n        <div className={styles.dot}></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;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"]}

package/avatar/loading-dots/styles.css.js

@@ -1,12 +1,12 @@
 
     import './styles.scoped.css';
     export default {
-  "gen-ai": "awsui_gen-ai_12y5i_lygyv_19",
-  "gradientMove": "awsui_gradientMove_12y5i_lygyv_1",
-  "gradientMoveReverse": "awsui_gradientMoveReverse_12y5i_lygyv_1",
-  "dot": "awsui_dot_12y5i_lygyv_81",
-  "dotsDancing": "awsui_dotsDancing_12y5i_lygyv_1",
-  "root": "awsui_root_12y5i_lygyv_162",
-  "typing": "awsui_typing_12y5i_lygyv_176"
+  "gen-ai": "awsui_gen-ai_12y5i_7q8l3_19",
+  "gradientMove": "awsui_gradientMove_12y5i_7q8l3_1",
+  "gradientMoveReverse": "awsui_gradientMoveReverse_12y5i_7q8l3_1",
+  "dot": "awsui_dot_12y5i_7q8l3_81",
+  "dotsDancing": "awsui_dotsDancing_12y5i_7q8l3_1",
+  "root": "awsui_root_12y5i_7q8l3_162",
+  "typing": "awsui_typing_12y5i_7q8l3_176"
 };
   

package/avatar/loading-dots/styles.scoped.css

@@ -16,7 +16,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_gen-ai_12y5i_lygyv_19:not(#\9)::before {
+.awsui_gen-ai_12y5i_7q8l3_19:not(#\9)::before {
   content: "";
   position: absolute;
   inline-size: inherit;
@@ -25,52 +25,52 @@
   inset-inline-start: 50%;
   transform: translate(-50%, -50%);
   background: var(--color-background-avatar-gen-ai-i9hcw6, radial-gradient(circle farthest-corner at top left, rgb(0, 150, 250) -25%, rgba(0, 150, 250, 0) 55%), radial-gradient(circle farthest-corner at top right, rgb(216, 178, 255) -10%, rgb(115, 0, 229) 50%));
-  animation: awsui_gradientMove_12y5i_lygyv_1 var(--motion-duration-avatar-gen-ai-gradient-xetl2o, 3600ms) infinite var(--motion-easing-avatar-gen-ai-gradient-tjyrpp, cubic-bezier(0.7, 0, 0.3, 1));
+  animation: awsui_gradientMove_12y5i_7q8l3_1 var(--motion-duration-avatar-gen-ai-gradient-xetl2o, 3600ms) infinite var(--motion-easing-avatar-gen-ai-gradient-tjyrpp, cubic-bezier(0.7, 0, 0.3, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_gen-ai_12y5i_lygyv_19:not(#\9)::before {
+  .awsui_gen-ai_12y5i_7q8l3_19:not(#\9)::before {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_gen-ai_12y5i_lygyv_19:not(#\9)::before, .awsui-mode-entering .awsui_gen-ai_12y5i_lygyv_19:not(#\9)::before {
+.awsui-motion-disabled .awsui_gen-ai_12y5i_7q8l3_19:not(#\9)::before, .awsui-mode-entering .awsui_gen-ai_12y5i_7q8l3_19:not(#\9)::before {
   animation: none;
   transition: none;
 }
-.awsui_gen-ai_12y5i_lygyv_19:not(#\9):dir(rtl)::before {
-  animation: awsui_gradientMoveReverse_12y5i_lygyv_1 var(--motion-duration-avatar-gen-ai-gradient-xetl2o, 3600ms) infinite var(--motion-easing-avatar-gen-ai-gradient-tjyrpp, cubic-bezier(0.7, 0, 0.3, 1));
+.awsui_gen-ai_12y5i_7q8l3_19:not(#\9):dir(rtl)::before {
+  animation: awsui_gradientMoveReverse_12y5i_7q8l3_1 var(--motion-duration-avatar-gen-ai-gradient-xetl2o, 3600ms) infinite var(--motion-easing-avatar-gen-ai-gradient-tjyrpp, cubic-bezier(0.7, 0, 0.3, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_gen-ai_12y5i_lygyv_19:not(#\9):dir(rtl)::before {
+  .awsui_gen-ai_12y5i_7q8l3_19:not(#\9):dir(rtl)::before {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_gen-ai_12y5i_lygyv_19:not(#\9):dir(rtl)::before, .awsui-mode-entering .awsui_gen-ai_12y5i_lygyv_19:not(#\9):dir(rtl)::before {
+.awsui-motion-disabled .awsui_gen-ai_12y5i_7q8l3_19:not(#\9):dir(rtl)::before, .awsui-mode-entering .awsui_gen-ai_12y5i_7q8l3_19:not(#\9):dir(rtl)::before {
   animation: none;
   transition: none;
 }
 
-@keyframes awsui_gradientMove_12y5i_lygyv_1 {
+@keyframes awsui_gradientMove_12y5i_7q8l3_1 {
   0% {
     transform: translate(-50%, -50%) rotate(0deg);
   }
   50% {
-    block-size: 44px;
-    inline-size: 44px;
+    block-size: 150%;
+    inline-size: 150%;
   }
   100% {
     transform: translate(-50%, -50%) rotate(360deg);
   }
 }
-@keyframes awsui_gradientMoveReverse_12y5i_lygyv_1 {
+@keyframes awsui_gradientMoveReverse_12y5i_7q8l3_1 {
   0% {
     transform: translate(-50%, -50%) rotate(360deg);
     inset-inline-start: -50%;
   }
   50% {
-    block-size: 44px;
-    inline-size: 44px;
+    block-size: 150%;
+    inline-size: 150%;
     inset-inline-start: -100%;
   }
   100% {
@@ -78,88 +78,88 @@
     inset-inline-start: -50%;
   }
 }
-.awsui_dot_12y5i_lygyv_81:not(#\9) {
-  animation: awsui_dotsDancing_12y5i_lygyv_1 var(--motion-duration-avatar-loading-dots-pe8a3q, 1200ms) infinite ease-in-out;
+.awsui_dot_12y5i_7q8l3_81:not(#\9) {
+  animation: awsui_dotsDancing_12y5i_7q8l3_1 var(--motion-duration-avatar-loading-dots-pe8a3q, 1200ms) infinite ease-in-out;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_dot_12y5i_lygyv_81:not(#\9) {
+  .awsui_dot_12y5i_7q8l3_81:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_dot_12y5i_lygyv_81:not(#\9), .awsui-mode-entering .awsui_dot_12y5i_lygyv_81:not(#\9) {
+.awsui-motion-disabled .awsui_dot_12y5i_7q8l3_81:not(#\9), .awsui-mode-entering .awsui_dot_12y5i_7q8l3_81:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_dot_12y5i_lygyv_81:not(#\9):nth-child(1) {
+.awsui_dot_12y5i_7q8l3_81:not(#\9):nth-child(1) {
   animation-delay: 100ms;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_dot_12y5i_lygyv_81:not(#\9):nth-child(1) {
+  .awsui_dot_12y5i_7q8l3_81:not(#\9):nth-child(1) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_dot_12y5i_lygyv_81:not(#\9):nth-child(1), .awsui-mode-entering .awsui_dot_12y5i_lygyv_81:not(#\9):nth-child(1) {
+.awsui-motion-disabled .awsui_dot_12y5i_7q8l3_81:not(#\9):nth-child(1), .awsui-mode-entering .awsui_dot_12y5i_7q8l3_81:not(#\9):nth-child(1) {
   animation: none;
   transition: none;
 }
 
-.awsui_dot_12y5i_lygyv_81:not(#\9):nth-child(2) {
+.awsui_dot_12y5i_7q8l3_81:not(#\9):nth-child(2) {
   animation-delay: 200ms;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_dot_12y5i_lygyv_81:not(#\9):nth-child(2) {
+  .awsui_dot_12y5i_7q8l3_81:not(#\9):nth-child(2) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_dot_12y5i_lygyv_81:not(#\9):nth-child(2), .awsui-mode-entering .awsui_dot_12y5i_lygyv_81:not(#\9):nth-child(2) {
+.awsui-motion-disabled .awsui_dot_12y5i_7q8l3_81:not(#\9):nth-child(2), .awsui-mode-entering .awsui_dot_12y5i_7q8l3_81:not(#\9):nth-child(2) {
   animation: none;
   transition: none;
 }
 
-.awsui_dot_12y5i_lygyv_81:not(#\9):nth-child(3) {
+.awsui_dot_12y5i_7q8l3_81:not(#\9):nth-child(3) {
   animation-delay: 300ms;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_dot_12y5i_lygyv_81:not(#\9):nth-child(3) {
+  .awsui_dot_12y5i_7q8l3_81:not(#\9):nth-child(3) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_dot_12y5i_lygyv_81:not(#\9):nth-child(3), .awsui-mode-entering .awsui_dot_12y5i_lygyv_81:not(#\9):nth-child(3) {
+.awsui-motion-disabled .awsui_dot_12y5i_7q8l3_81:not(#\9):nth-child(3), .awsui-mode-entering .awsui_dot_12y5i_7q8l3_81:not(#\9):nth-child(3) {
   animation: none;
   transition: none;
 }
 
-.awsui_dot_12y5i_lygyv_81:not(#\9):last-child {
+.awsui_dot_12y5i_7q8l3_81:not(#\9):last-child {
   margin-inline-end: 0;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_dot_12y5i_lygyv_81:not(#\9):last-child {
+  .awsui_dot_12y5i_7q8l3_81:not(#\9):last-child {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_dot_12y5i_lygyv_81:not(#\9):last-child, .awsui-mode-entering .awsui_dot_12y5i_lygyv_81:not(#\9):last-child {
+.awsui-motion-disabled .awsui_dot_12y5i_7q8l3_81:not(#\9):last-child, .awsui-mode-entering .awsui_dot_12y5i_7q8l3_81:not(#\9):last-child {
   animation: none;
   transition: none;
 }
 
-@keyframes awsui_dotsDancing_12y5i_lygyv_1 {
+@keyframes awsui_dotsDancing_12y5i_7q8l3_1 {
   0% {
     transform: translateY(0px);
   }
   28% {
-    transform: translateY(-4px);
+    transform: translateY(-100%);
   }
   44% {
     transform: translateY(0px);
   }
 }
-.awsui_root_12y5i_lygyv_162:not(#\9) {
+.awsui_root_12y5i_7q8l3_162:not(#\9) {
   inline-size: inherit;
   block-size: inherit;
   border-start-start-radius: 50%;
@@ -173,14 +173,14 @@
   overflow: hidden;
 }
 
-.awsui_typing_12y5i_lygyv_176:not(#\9) {
+.awsui_typing_12y5i_7q8l3_176:not(#\9) {
   align-items: center;
   justify-content: space-between;
   display: flex;
-  inline-size: 18px;
+  inline-size: 64%;
 }
 
-.awsui_dot_12y5i_lygyv_81:not(#\9) {
+.awsui_dot_12y5i_7q8l3_81:not(#\9) {
   background-color: var(--color-text-avatar-jddpvm, #ffffff);
   border-start-start-radius: 50%;
   border-start-end-radius: 50%;

package/avatar/loading-dots/styles.selectors.js

@@ -2,12 +2,12 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "gen-ai": "awsui_gen-ai_12y5i_lygyv_19",
-  "gradientMove": "awsui_gradientMove_12y5i_lygyv_1",
-  "gradientMoveReverse": "awsui_gradientMoveReverse_12y5i_lygyv_1",
-  "dot": "awsui_dot_12y5i_lygyv_81",
-  "dotsDancing": "awsui_dotsDancing_12y5i_lygyv_1",
-  "root": "awsui_root_12y5i_lygyv_162",
-  "typing": "awsui_typing_12y5i_lygyv_176"
+  "gen-ai": "awsui_gen-ai_12y5i_7q8l3_19",
+  "gradientMove": "awsui_gradientMove_12y5i_7q8l3_1",
+  "gradientMoveReverse": "awsui_gradientMoveReverse_12y5i_7q8l3_1",
+  "dot": "awsui_dot_12y5i_7q8l3_81",
+  "dotsDancing": "awsui_dotsDancing_12y5i_7q8l3_1",
+  "root": "awsui_root_12y5i_7q8l3_162",
+  "typing": "awsui_typing_12y5i_7q8l3_176"
 };
   

package/avatar/styles.css.js

@@ -1,10 +1,11 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_1qkal_gzyqx_15",
-  "avatar-color-default": "awsui_avatar-color-default_1qkal_gzyqx_50",
-  "avatar-color-gen-ai": "awsui_avatar-color-gen-ai_1qkal_gzyqx_53",
-  "initials": "awsui_initials_1qkal_gzyqx_56",
-  "content": "awsui_content_1qkal_gzyqx_84"
+  "root": "awsui_root_1qkal_155wn_15",
+  "avatar-color-default": "awsui_avatar-color-default_1qkal_155wn_50",
+  "avatar-color-gen-ai": "awsui_avatar-color-gen-ai_1qkal_155wn_53",
+  "initials": "awsui_initials_1qkal_155wn_56",
+  "image": "awsui_image_1qkal_155wn_83",
+  "content": "awsui_content_1qkal_155wn_87"
 };
   

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_gzyqx_15:not(#\9) {
+.awsui_root_1qkal_155wn_15:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -48,28 +48,28 @@
   border-end-start-radius: 50%;
   border-end-end-radius: 50%;
 }
-.awsui_root_1qkal_gzyqx_15.awsui_avatar-color-default_1qkal_gzyqx_50:not(#\9) {
+.awsui_root_1qkal_155wn_15.awsui_avatar-color-default_1qkal_155wn_50:not(#\9) {
   background-color: var(--color-background-avatar-default-rci9zy, #424650);
 }
-.awsui_root_1qkal_gzyqx_15.awsui_avatar-color-gen-ai_1qkal_gzyqx_53:not(#\9) {
+.awsui_root_1qkal_155wn_15.awsui_avatar-color-gen-ai_1qkal_155wn_53:not(#\9) {
   background: var(--color-background-avatar-gen-ai-i9hcw6, radial-gradient(circle farthest-corner at top left, rgb(0, 150, 250) -25%, rgba(0, 150, 250, 0) 55%), radial-gradient(circle farthest-corner at top right, rgb(216, 178, 255) -10%, rgb(115, 0, 229) 50%));
 }
-.awsui_root_1qkal_gzyqx_15.awsui_initials_1qkal_gzyqx_56:not(#\9) {
+.awsui_root_1qkal_155wn_15.awsui_initials_1qkal_155wn_56:not(#\9) {
   font-family: var(--font-family-base-dnvic8, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
   font-size: var(--font-size-body-s-asqx2i, 12px);
   line-height: var(--line-height-body-s-7zv1j5, 16px);
   font-weight: var(--font-weight-heading-l-f8711v, 700);
 }
-.awsui_root_1qkal_gzyqx_15:not(#\9):focus {
+.awsui_root_1qkal_155wn_15:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_root_1qkal_gzyqx_15:not(#\9):focus:focus {
+body[data-awsui-focus-visible=true] .awsui_root_1qkal_155wn_15:not(#\9):focus:focus {
   position: relative;
   box-sizing: border-box;
   outline: 2px dotted transparent;
   outline-offset: 0px;
 }
-body[data-awsui-focus-visible=true] .awsui_root_1qkal_gzyqx_15:not(#\9):focus:focus::before {
+body[data-awsui-focus-visible=true] .awsui_root_1qkal_155wn_15:not(#\9):focus:focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -81,12 +81,24 @@ body[data-awsui-focus-visible=true] .awsui_root_1qkal_gzyqx_15:not(#\9):focus:fo
   border-radius: 50%;
   border: 2px solid var(--color-border-item-focused-nv6mhz, #006ce0);
 }
+.awsui_root_1qkal_155wn_15:not(#\9):has(.awsui_image_1qkal_155wn_83) {
+  background: transparent;
+}
 
-.awsui_content_1qkal_gzyqx_84:not(#\9) {
+.awsui_content_1qkal_155wn_87:not(#\9) {
   display: flex;
   align-items: center;
   justify-content: center;
   block-size: inherit;
   inline-size: inherit;
   overflow: hidden;
+}
+.awsui_content_1qkal_155wn_87 .awsui_image_1qkal_155wn_83:not(#\9) {
+  border-start-start-radius: 50%;
+  border-start-end-radius: 50%;
+  border-end-start-radius: 50%;
+  border-end-end-radius: 50%;
+  block-size: 28px;
+  inline-size: 28px;
+  object-fit: cover;
 }

package/avatar/styles.selectors.js

@@ -2,10 +2,11 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_1qkal_gzyqx_15",
-  "avatar-color-default": "awsui_avatar-color-default_1qkal_gzyqx_50",
-  "avatar-color-gen-ai": "awsui_avatar-color-gen-ai_1qkal_gzyqx_53",
-  "initials": "awsui_initials_1qkal_gzyqx_56",
-  "content": "awsui_content_1qkal_gzyqx_84"
+  "root": "awsui_root_1qkal_155wn_15",
+  "avatar-color-default": "awsui_avatar-color-default_1qkal_155wn_50",
+  "avatar-color-gen-ai": "awsui_avatar-color-gen-ai_1qkal_155wn_53",
+  "initials": "awsui_initials_1qkal_155wn_56",
+  "image": "awsui_image_1qkal_155wn_83",
+  "content": "awsui_content_1qkal_155wn_87"
 };
   

package/internal/api-docs/components/avatar.js

@@ -4,7 +4,7 @@ module.exports = {
   "regions": [
     {
       "name": "iconSvg",
-      "description": "Specifies the SVG of a custom icon.\nUse this property if the icon you want isn't available.\nIf you set both `iconUrl` and `iconSvg`, `iconSvg` will take precedence.\n",
+      "description": "Specifies the SVG of a custom icon.\nUse this property if the icon you want isn't available.",
       "isDefault": false
     }
   ],
@@ -48,6 +48,8 @@ module.exports = {
           "angle-down",
           "arrow-left",
           "arrow-right",
+          "arrow-up",
+          "arrow-down",
           "audio-full",
           "audio-half",
           "audio-off",
@@ -173,7 +175,14 @@ module.exports = {
       "name": "iconUrl",
       "type": "string",
       "optional": true,
-      "description": "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.\nFor SVG icons, use the `iconSvg` slot instead.\nIf you set both `iconUrl` and `iconSvg`, `iconSvg` will take precedence.\n"
+      "description": "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.",
+      "deprecatedTag": "Use `iconSvg` or `imgUrl` instead."
+    },
+    {
+      "name": "imgUrl",
+      "type": "string",
+      "optional": true,
+      "description": "Specifies the URL of a custom image. If you set both `iconUrl` and `imgUrl`, `imgUrl` will take precedence."
     },
     {
       "name": "initials",
@@ -192,6 +201,12 @@ module.exports = {
       "type": "string",
       "optional": true,
       "description": "The text content shown in the avatar's tooltip.\nWhen you use this property, make sure to include it in the `ariaLabel`.\n"
+    },
+    {
+      "name": "width",
+      "type": "number",
+      "optional": true,
+      "description": "Defines the width and height of the avatar.\nThis value corresponds to the `width` CSS-property and will center and crop images using `object-fit: cover`.\nThe default and minimum width value is 28px."
     }
   ],
   "events": []

package/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "chat-components";
-export var PACKAGE_VERSION = "1.0.0 (b5b61a97)";
+export var PACKAGE_VERSION = "1.0.0 (59410f45)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/environment.json

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "chat-components",
-  "PACKAGE_VERSION": "1.0.0 (b5b61a97)",
+  "PACKAGE_VERSION": "1.0.0 (59410f45)",
   "THEME": "open-source-visual-refresh",
   "ALWAYS_VISUAL_REFRESH": true
 }

package/internal/events/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/internal/events/index.ts"],"names":[],"mappings":"AAiBA,MAAM,OAAO,eAAe;IAG1B,YACS,aAAsB,KAAK,EAC3B,SAAmB,IAAI;QADvB,eAAU,GAAV,UAAU,CAAiB;QAC3B,WAAM,GAAN,MAAM,CAAiB;QAJhC,qBAAgB,GAAG,KAAK,CAAC;QACzB,iBAAY,GAAG,KAAK,CAAC;IAIlB,CAAC;IAEJ,cAAc;QACZ,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;IAC/B,CAAC;IAED,eAAe;QACb,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;IAC3B,CAAC;CACF;AAED,MAAM,UAAU,iBAAiB,CAAI,EAAE,UAAU,EAAE,MAAM,EAAsB;IAC7E,OAAO,IAAI,eAAe,CAAC,UAAU,EAAE,MAAM,CAAgB,CAAC;AAChE,CAAC;AAED,MAAM,UAAU,mBAAmB,CACjC,OAA8C,EAC9C,MAAS,EACT,WAA0C;IAE1C,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,KAAK,CAAC;KACd;IACD,MAAM,KAAK,GAAG,iBAAiB,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IAC9D,OAAO,CAAC,KAAK,CAAC,CAAC;IACf,IAAI,KAAK,CAAC,gBAAgB,IAAI,WAAW,EAAE;QACzC,WAAW,CAAC,cAAc,EAAE,CAAC;KAC9B;IACD,IAAI,KAAK,CAAC,YAAY,IAAI,WAAW,EAAE;QACrC,WAAW,CAAC,eAAe,EAAE,CAAC;KAC/B;IACD,OAAO,KAAK,CAAC,gBAAgB,CAAC;AAChC,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAW,OAAiD,EAAE,MAAU;IAC5G,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO;KACR;IACD,MAAM,KAAK,GAAG,iBAAiB,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;IAC/D,OAAO,CAAC,KAAK,CAAC,CAAC;AACjB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport type CancelableEventHandler<Detail = object> = (event: CustomEvent<Detail>) => void;\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type NonCancelableEventHandler<Detail = {}> = (event: NonCancelableCustomEvent<Detail>) => void;\n\nexport type NonCancelableCustomEvent<DetailType> = Omit<CustomEvent<DetailType>, \"preventDefault\">;\n\nexport interface ClickDetail {\n  button: number;\n  ctrlKey: boolean;\n  shiftKey: boolean;\n  altKey: boolean;\n  metaKey: boolean;\n}\n\nexport class CustomEventStub<T> {\n  defaultPrevented = false;\n  cancelBubble = false;\n  constructor(\n    public cancelable: boolean = false,\n    public detail: T | null = null,\n  ) {}\n\n  preventDefault() {\n    this.defaultPrevented = true;\n  }\n\n  stopPropagation() {\n    this.cancelBubble = true;\n  }\n}\n\nexport function createCustomEvent<T>({ cancelable, detail }: CustomEventInit<T>): CustomEvent<T> {\n  return new CustomEventStub(cancelable, detail) as CustomEvent;\n}\n\nexport function fireCancelableEvent<T>(\n  handler: CancelableEventHandler<T> | undefined,\n  detail: T,\n  sourceEvent?: React.SyntheticEvent | Event,\n) {\n  if (!handler) {\n    return false;\n  }\n  const event = createCustomEvent({ cancelable: true, detail });\n  handler(event);\n  if (event.defaultPrevented && sourceEvent) {\n    sourceEvent.preventDefault();\n  }\n  if (event.cancelBubble && sourceEvent) {\n    sourceEvent.stopPropagation();\n  }\n  return event.defaultPrevented;\n}\n\nexport function fireNonCancelableEvent<T = null>(handler: NonCancelableEventHandler<T> | undefined, detail?: T) {\n  if (!handler) {\n    return;\n  }\n  const event = createCustomEvent({ cancelable: false, detail });\n  handler(event);\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/internal/events/index.ts"],"names":[],"mappings":"AAiBA,MAAM,OAAO,eAAe;IAG1B,YACS,aAAsB,KAAK,EAC3B,SAAmB,IAAI;QADvB,eAAU,GAAV,UAAU,CAAiB;QAC3B,WAAM,GAAN,MAAM,CAAiB;QAJhC,qBAAgB,GAAG,KAAK,CAAC;QACzB,iBAAY,GAAG,KAAK,CAAC;IAIlB,CAAC;IAEJ,cAAc;QACZ,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;IAC/B,CAAC;IAED,eAAe;QACb,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;IAC3B,CAAC;CACF;AAED,MAAM,UAAU,iBAAiB,CAAI,EAAE,UAAU,EAAE,MAAM,EAAsB;IAC7E,OAAO,IAAI,eAAe,CAAC,UAAU,EAAE,MAAM,CAAgB,CAAC;AAChE,CAAC;AAED,MAAM,UAAU,mBAAmB,CACjC,OAA8C,EAC9C,MAAS,EACT,WAA0C;IAE1C,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,KAAK,CAAC;KACd;IACD,MAAM,KAAK,GAAG,iBAAiB,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IAC9D,OAAO,CAAC,KAAK,CAAC,CAAC;IACf,IAAI,KAAK,CAAC,gBAAgB,IAAI,WAAW,EAAE;QACzC,WAAW,CAAC,cAAc,EAAE,CAAC;KAC9B;IACD,IAAI,KAAK,CAAC,YAAY,IAAI,WAAW,EAAE;QACrC,WAAW,CAAC,eAAe,EAAE,CAAC;KAC/B;IACD,OAAO,KAAK,CAAC,gBAAgB,CAAC;AAChC,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAW,OAAiD,EAAE,MAAU;IAC5G,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO;KACR;IACD,MAAM,KAAK,GAAG,iBAAiB,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;IAC/D,OAAO,CAAC,KAAK,CAAC,CAAC;AACjB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport type CancelableEventHandler<Detail = object> = (event: CustomEvent<Detail>) => void;\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport type NonCancelableEventHandler<Detail = {}> = (event: NonCancelableCustomEvent<Detail>) => void;\n\nexport type NonCancelableCustomEvent<DetailType> = Omit<CustomEvent<DetailType>, \"preventDefault\">;\n\nexport interface ClickDetail {\n  button: number;\n  ctrlKey: boolean;\n  shiftKey: boolean;\n  altKey: boolean;\n  metaKey: boolean;\n}\n\nexport class CustomEventStub<T> {\n  defaultPrevented = false;\n  cancelBubble = false;\n  constructor(\n    public cancelable: boolean = false,\n    public detail: T | null = null,\n  ) {}\n\n  preventDefault() {\n    this.defaultPrevented = true;\n  }\n\n  stopPropagation() {\n    this.cancelBubble = true;\n  }\n}\n\nexport function createCustomEvent<T>({ cancelable, detail }: CustomEventInit<T>): CustomEvent<T> {\n  return new CustomEventStub(cancelable, detail) as CustomEvent;\n}\n\nexport function fireCancelableEvent<T>(\n  handler: CancelableEventHandler<T> | undefined,\n  detail: T,\n  sourceEvent?: React.SyntheticEvent | Event,\n) {\n  if (!handler) {\n    return false;\n  }\n  const event = createCustomEvent({ cancelable: true, detail });\n  handler(event);\n  if (event.defaultPrevented && sourceEvent) {\n    sourceEvent.preventDefault();\n  }\n  if (event.cancelBubble && sourceEvent) {\n    sourceEvent.stopPropagation();\n  }\n  return event.defaultPrevented;\n}\n\nexport function fireNonCancelableEvent<T = null>(handler: NonCancelableEventHandler<T> | undefined, detail?: T) {\n  if (!handler) {\n    return;\n  }\n  const event = createCustomEvent({ cancelable: false, detail });\n  handler(event);\n}\n"]}

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "b5b61a970da9142bf2f3bb8907f4c79e8c26ccf9"
+  "commit": "59410f45954e668b8b74feaeddd807a3c288f7eb"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudscape-design/chat-components",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cloudscape-design/chat-components.git"