@cloudscape-design/chat-components 1.0.97 → 1.0.99

package/internal/api-docs/components/support-prompt-group.js

@@ -41,7 +41,7 @@ module.exports = {
       "name": "items",
       "type": "ReadonlyArray<SupportPromptGroupProps.Item>",
       "optional": false,
-      "description": "An array of objects representing support prompts.\nEach item has the following properties:\n  - text: The text of the support prompt.\n  - id: The ID of the support prompt."
+      "description": "An array of objects representing support prompts.\nEach item has the following properties:\n  - text: The text of the support prompt.\n  - id: The ID of the support prompt.\n  - iconName (optional): The name of a built-in icon to display.\n  - iconSvg (optional): A custom SVG icon to display. Takes precedence over iconName.\n  - iconPosition (optional): Position of the icon relative to text. Can be \"left\" (default) or \"right\".\n  - iconVerticalAlignment (optional): Vertical alignment of the icon. Can be \"center\", \"start\" (default), or \"end\".\n  - ariaLabel (optional): Custom accessible label for the prompt."
     }
   ],
   "events": [

package/internal/environment.js

@@ -1,5 +1,5 @@
 export var PACKAGE_SOURCE = "chat-components";
-export var PACKAGE_VERSION = "1.0.0 (8fdd3f37)";
+export var PACKAGE_VERSION = "1.0.0 (ec1bfdd8)";
 export var THEME = "open-source-visual-refresh";
 export var SYSTEM = "core";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/environment.json

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "chat-components",
-  "PACKAGE_VERSION": "1.0.0 (8fdd3f37)",
+  "PACKAGE_VERSION": "1.0.0 (ec1bfdd8)",
   "THEME": "open-source-visual-refresh",
   "SYSTEM": "core",
   "ALWAYS_VISUAL_REFRESH": true

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "8fdd3f37ecee9619ac8806a71b4c86c624461aa9"
+  "commit": "ec1bfdd8c05a14b4789082c18222e86e0bc36c3a"
 }

package/package.json

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

package/support-prompt-group/interfaces.d.ts

@@ -1,3 +1,4 @@
+import { IconProps } from "@cloudscape-design/components/icon";
 import { ClickDetail as _ClickDetail, NonCancelableEventHandler } from "../internal/events";
 export interface SupportPromptGroupProps {
     /**
@@ -9,6 +10,11 @@ export interface SupportPromptGroupProps {
      * Each item has the following properties:
      *   - text: The text of the support prompt.
      *   - id: The ID of the support prompt.
+     *   - iconName (optional): The name of a built-in icon to display.
+     *   - iconSvg (optional): A custom SVG icon to display. Takes precedence over iconName.
+     *   - iconPosition (optional): Position of the icon relative to text. Can be "left" (default) or "right".
+     *   - iconVerticalAlignment (optional): Vertical alignment of the icon. Can be "center", "start" (default), or "end".
+     *   - ariaLabel (optional): Custom accessible label for the prompt.
      **/
     items: ReadonlyArray<SupportPromptGroupProps.Item>;
     /**
@@ -26,6 +32,11 @@ export declare namespace SupportPromptGroupProps {
     interface Item {
         text: string;
         id: string;
+        iconName?: IconProps.Name;
+        iconSvg?: React.ReactNode;
+        iconPosition?: "left" | "right";
+        iconVerticalAlignment?: "center" | "start" | "end";
+        ariaLabel?: string;
     }
     interface ItemClickDetail extends _ClickDetail {
         id: string;

package/support-prompt-group/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/support-prompt-group/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { ClickDetail as _ClickDetail, NonCancelableEventHandler } from \"../internal/events\";\n\nexport interface SupportPromptGroupProps {\n  /**\n   * Alignment of the prompts. Defaults to `vertical`.\n   **/\n  alignment?: SupportPromptGroupProps.Alignment;\n\n  /**\n   * An array of objects representing support prompts.\n   * Each item has the following properties:\n   *   - text: The text of the support prompt.\n   *   - id: The ID of the support prompt.\n   **/\n  items: ReadonlyArray<SupportPromptGroupProps.Item>;\n\n  /**\n   * Called when the user clicks on a support prompt. The event detail object contains the ID of the clicked item.\n   */\n  onItemClick: NonCancelableEventHandler<SupportPromptGroupProps.ItemClickDetail>;\n\n  /**\n   * Adds an aria label to the support prompt group.\n   * Use this to provide a unique accessible name for each support prompt group on the page.\n   */\n  ariaLabel: string;\n}\n\nexport namespace SupportPromptGroupProps {\n  export type Alignment = \"vertical\" | \"horizontal\";\n\n  export interface Item {\n    text: string;\n    id: string;\n  }\n\n  export interface ItemClickDetail extends _ClickDetail {\n    id: string;\n  }\n\n  export interface Ref {\n    /**\n     * Focuses support prompt group item by ID.\n     */\n    focus(itemId: string): void;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/support-prompt-group/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { IconProps } from \"@cloudscape-design/components/icon\";\n\nimport { ClickDetail as _ClickDetail, NonCancelableEventHandler } from \"../internal/events\";\n\nexport interface SupportPromptGroupProps {\n  /**\n   * Alignment of the prompts. Defaults to `vertical`.\n   **/\n  alignment?: SupportPromptGroupProps.Alignment;\n\n  /**\n   * An array of objects representing support prompts.\n   * Each item has the following properties:\n   *   - text: The text of the support prompt.\n   *   - id: The ID of the support prompt.\n   *   - iconName (optional): The name of a built-in icon to display.\n   *   - iconSvg (optional): A custom SVG icon to display. Takes precedence over iconName.\n   *   - iconPosition (optional): Position of the icon relative to text. Can be \"left\" (default) or \"right\".\n   *   - iconVerticalAlignment (optional): Vertical alignment of the icon. Can be \"center\", \"start\" (default), or \"end\".\n   *   - ariaLabel (optional): Custom accessible label for the prompt.\n   **/\n  items: ReadonlyArray<SupportPromptGroupProps.Item>;\n\n  /**\n   * Called when the user clicks on a support prompt. The event detail object contains the ID of the clicked item.\n   */\n  onItemClick: NonCancelableEventHandler<SupportPromptGroupProps.ItemClickDetail>;\n\n  /**\n   * Adds an aria label to the support prompt group.\n   * Use this to provide a unique accessible name for each support prompt group on the page.\n   */\n  ariaLabel: string;\n}\n\nexport namespace SupportPromptGroupProps {\n  export type Alignment = \"vertical\" | \"horizontal\";\n\n  export interface Item {\n    text: string;\n    id: string;\n    iconName?: IconProps.Name;\n    iconSvg?: React.ReactNode;\n    iconPosition?: \"left\" | \"right\";\n    iconVerticalAlignment?: \"center\" | \"start\" | \"end\";\n    ariaLabel?: string;\n  }\n\n  export interface ItemClickDetail extends _ClickDetail {\n    id: string;\n  }\n\n  export interface Ref {\n    /**\n     * Focuses support prompt group item by ID.\n     */\n    focus(itemId: string): void;\n  }\n}\n"]}

package/support-prompt-group/internal.js

@@ -96,7 +96,7 @@ export const InternalSupportPromptGroup = forwardRef(({ alignment = "vertical",
         return _jsx("div", {});
     }
     return (_jsx("div", { ...getDataAttributes(rest), role: "menubar", className: clsx(styles.root, { [styles.vertical]: alignment !== "horizontal" }), "aria-label": ariaLabel, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, ref: mergedRef, children: _jsx(SingleTabStopNavigationProvider, { ref: navigationAPI, navigationActive: true, getNextFocusTarget: () => getNextFocusTarget(containerObjectRef, focusedIdRef), onUnregisterActive: (element) => onUnregisterActive(element, navigationAPI), children: items.map((item, index) => {
-                return (_jsx(Prompt, { onClick: (event) => handleClick(event, item.id), id: item.id, ref: (element) => (itemsRef.current[item.id] = element), children: item.text }, index));
+                return (_jsx(Prompt, { onClick: (event) => handleClick(event, item.id), id: item.id, ref: (element) => (itemsRef.current[item.id] = element), iconName: item.iconName, iconSvg: item.iconSvg, iconPosition: item.iconPosition, iconVerticalAlignment: item.iconVerticalAlignment, ariaLabel: item.ariaLabel, children: item.text }, index));
             }) }) }));
 });
 //# sourceMappingURL=internal.js.map

package/support-prompt-group/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/support-prompt-group/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAO,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,SAAS,EACT,OAAO,EAEP,+BAA+B,EAC/B,YAAY,EACZ,QAAQ,GACT,MAAM,+CAA+C,CAAC;AAEvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAEnF,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEzE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,MAAM,0BAA0B,GAAG,UAAU,CAClD,CACE,EACE,SAAS,GAAG,UAAU,EACtB,WAAW,EACX,KAAK,EACL,iBAAiB,EACjB,SAAS,EACT,GAAG,IAAI,EAC8C,EACvD,GAAqC,EACrC,EAAE;IACF,MAAM,YAAY,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IACjD,MAAM,aAAa,GAAG,MAAM,CAA6B,IAAI,CAAC,CAAC;IAC/D,MAAM,kBAAkB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,MAAM,CAA6B,EAAE,CAAC,CAAC;IAExD,MAAM,SAAS,GAAG,YAAY,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAAC;IAEtE,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE;;YACZ,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;gBACzB,QAAQ,CAAC,oBAAoB,EAAE,gCAAgC,CAAC,CAAC;aAClE;YACD,MAAA,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,0CAAE,KAAK,EAAE,CAAC;QAChC,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAU,EAAE,EAAE;QAC1D,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;QAE7D,sBAAsB,CAAC,WAAW,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC1F,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;;QACb,MAAA,aAAa,CAAC,OAAO,0CAAE,iBAAiB,EAAE,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,SAAS,OAAO,CAAC,KAAuB;;QACtC,IAAI,KAAK,CAAC,MAAM,YAAY,WAAW,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE;YACtE,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC;SACpD;QAED,MAAA,aAAa,CAAC,OAAO,0CAAE,iBAAiB,EAAE,CAAC;IAC7C,CAAC;IAED,SAAS,MAAM;;QACb,MAAA,aAAa,CAAC,OAAO,0CAAE,iBAAiB,EAAE,CAAC;IAC7C,CAAC;IAED,SAAS,SAAS,CAAC,KAA0B;;QAC3C,MAAM,WAAW,GAAG,MAAA,aAAa,CAAC,OAAO,0CAAE,cAAc,EAAE,CAAC;QAC5D,MAAM,WAAW,GAAG;YAClB,OAAO,CAAC,KAAK;YACb,OAAO,CAAC,IAAI;YACZ,OAAO,CAAC,EAAE;YACV,OAAO,CAAC,IAAI;YACZ,OAAO,CAAC,GAAG;YACX,OAAO,CAAC,IAAI;YACZ,OAAO,CAAC,MAAM;YACd,OAAO,CAAC,QAAQ;SACjB,CAAC;QAEF,MAAM,eAAe,GAAG,CAAC,KAA6C,EAAE,EAAE;YACxE,OAAO,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC;QAC1E,CAAC,CAAC;QAEF,IAAI,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;YAClE,OAAO;SACR;QACD,IAAI,CAAC,kBAAkB,CAAC,OAAO,IAAI,CAAC,WAAW,EAAE;YAC/C,OAAO;SACR;QACD,6DAA6D;QAC7D,IAAI,QAAQ,CAAC,aAAa,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC,EAAE;YAC7F,OAAO;SACR;QACD,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,MAAM,UAAU,GAAG,iBAAiB,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;QACjE,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QACpD,SAAS,CAAC,KAAY,EAAE;YACtB,MAAM,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;YACzC,KAAK,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAC5D,aAAa,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,WAAW,CAAC,WAAW,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;YACvG,WAAW,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,WAAW,CAAC,WAAW,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;YACrG,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,WAAW,CAAC,WAAW,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;YACtG,UAAU,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,WAAW,CAAC,WAAW,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;SACrG,CAAC,CAAC;IACL,CAAC;IAED,SAAS,YAAY,CAAC,OAAoB;QACxC,OAAO,CAAC,KAAK,EAAE,CAAC;IAClB,CAAC;IAED,+FAA+F;IAC/F,SAAS,iBAAiB,CAAC,MAAmB;QAC5C,SAAS,mBAAmB,CAAC,OAAoB;;YAC/C,OAAO,MAAA,MAAA,aAAa,CAAC,OAAO,0CAAE,YAAY,CAAC,OAAO,CAAC,mCAAI,KAAK,CAAC;QAC/D,CAAC;QAED,OAAO,gBAAgB,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC,CAAC;IAC1E,CAAC;IAED,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QAChC,OAAO,eAAO,CAAC;KAChB;IAED,OAAO,CACL,iBACM,iBAAiB,CAAC,IAAI,CAAC,EAC3B,IAAI,EAAC,SAAS,EACd,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,SAAS,KAAK,YAAY,EAAE,CAAC,gBACnE,SAAS,EACrB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,SAAS,YAEd,KAAC,+BAA+B,IAC9B,GAAG,EAAE,aAAa,EAClB,gBAAgB,EAAE,IAAI,EACtB,kBAAkB,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,kBAAkB,EAAE,YAAY,CAAC,EAC9E,kBAAkB,EAAE,CAAC,OAAoB,EAAE,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE,aAAa,CAAC,YAEvF,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBACzB,OAAO,CACL,KAAC,MAAM,IAEL,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,EAC/C,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,YAEtD,IAAI,CAAC,IAAI,IALL,KAAK,CAMH,CACV,CAAC;YACJ,CAAC,CAAC,GAC8B,GAC9B,CACP,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { forwardRef, Ref, useEffect, useImperativeHandle, useRef } from \"react\";\nimport clsx from \"clsx\";\n\nimport {\n  circleIndex,\n  getAllFocusables,\n  handleKey,\n  KeyCode,\n  SingleTabStopNavigationAPI,\n  SingleTabStopNavigationProvider,\n  useMergeRefs,\n  warnOnce,\n} from \"@cloudscape-design/component-toolkit/internal\";\n\nimport { getDataAttributes } from \"../internal/base-component/get-data-attributes\";\nimport { InternalBaseComponentProps } from \"../internal/base-component/use-base-component\";\nimport { fireNonCancelableEvent } from \"../internal/events\";\nimport { getNextFocusTarget, onUnregisterActive } from \"./focus-helpers\";\nimport { SupportPromptGroupProps } from \"./interfaces\";\nimport { Prompt } from \"./prompt\";\n\nimport styles from \"./styles.css.js\";\n\nexport const InternalSupportPromptGroup = forwardRef(\n  (\n    {\n      alignment = \"vertical\",\n      onItemClick,\n      items,\n      __internalRootRef,\n      ariaLabel,\n      ...rest\n    }: SupportPromptGroupProps & InternalBaseComponentProps,\n    ref: Ref<SupportPromptGroupProps.Ref>,\n  ) => {\n    const focusedIdRef = useRef<null | string>(null);\n    const navigationAPI = useRef<SingleTabStopNavigationAPI>(null);\n    const containerObjectRef = useRef<HTMLDivElement>(null);\n    const itemsRef = useRef<Record<string, any | null>>({});\n\n    const mergedRef = useMergeRefs(containerObjectRef, __internalRootRef);\n\n    useImperativeHandle(ref, () => ({\n      focus: (id) => {\n        if (!itemsRef.current[id]) {\n          warnOnce(\"SupportPromptGroup\", \"No matching ID found to focus.\");\n        }\n        itemsRef.current[id]?.focus();\n      },\n    }));\n\n    const handleClick = (event: React.MouseEvent, id: string) => {\n      const { altKey, button, ctrlKey, metaKey, shiftKey } = event;\n\n      fireNonCancelableEvent(onItemClick, { id, altKey, button, ctrlKey, metaKey, shiftKey });\n    };\n\n    useEffect(() => {\n      navigationAPI.current?.updateFocusTarget();\n    });\n\n    function onFocus(event: React.FocusEvent) {\n      if (event.target instanceof HTMLElement && event.target.dataset.itemid) {\n        focusedIdRef.current = event.target.dataset.itemid;\n      }\n\n      navigationAPI.current?.updateFocusTarget();\n    }\n\n    function onBlur() {\n      navigationAPI.current?.updateFocusTarget();\n    }\n\n    function onKeyDown(event: React.KeyboardEvent) {\n      const focusTarget = navigationAPI.current?.getFocusTarget();\n      const specialKeys = [\n        KeyCode.right,\n        KeyCode.left,\n        KeyCode.up,\n        KeyCode.down,\n        KeyCode.end,\n        KeyCode.home,\n        KeyCode.pageUp,\n        KeyCode.pageDown,\n      ];\n\n      const hasModifierKeys = (event: React.MouseEvent | React.KeyboardEvent) => {\n        return event.ctrlKey || event.altKey || event.shiftKey || event.metaKey;\n      };\n\n      if (hasModifierKeys(event) || !specialKeys.includes(event.keyCode)) {\n        return;\n      }\n      if (!containerObjectRef.current || !focusTarget) {\n        return;\n      }\n      // Ignore navigation when the focused element is not an item.\n      if (document.activeElement && !document.activeElement.matches(`.${styles[\"support-prompt\"]}`)) {\n        return;\n      }\n      event.preventDefault();\n\n      const focusables = getFocusablesFrom(containerObjectRef.current);\n      const activeIndex = focusables.indexOf(focusTarget);\n      handleKey(event as any, {\n        onHome: () => focusElement(focusables[0]),\n        onEnd: () => focusElement(focusables[focusables.length - 1]),\n        onInlineStart: () => focusElement(focusables[circleIndex(activeIndex - 1, [0, focusables.length - 1])]),\n        onInlineEnd: () => focusElement(focusables[circleIndex(activeIndex + 1, [0, focusables.length - 1])]),\n        onBlockStart: () => focusElement(focusables[circleIndex(activeIndex - 1, [0, focusables.length - 1])]),\n        onBlockEnd: () => focusElement(focusables[circleIndex(activeIndex + 1, [0, focusables.length - 1])]),\n      });\n    }\n\n    function focusElement(element: HTMLElement) {\n      element.focus();\n    }\n\n    // List all non-disabled and registered focusables: those are eligible for keyboard navigation.\n    function getFocusablesFrom(target: HTMLElement) {\n      function isElementRegistered(element: HTMLElement) {\n        return navigationAPI.current?.isRegistered(element) ?? false;\n      }\n\n      return getAllFocusables(target).filter((el) => isElementRegistered(el));\n    }\n\n    if (!items || items.length === 0) {\n      return <div />;\n    }\n\n    return (\n      <div\n        {...getDataAttributes(rest)}\n        role=\"menubar\"\n        className={clsx(styles.root, { [styles.vertical]: alignment !== \"horizontal\" })}\n        aria-label={ariaLabel}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onKeyDown={onKeyDown}\n        ref={mergedRef}\n      >\n        <SingleTabStopNavigationProvider\n          ref={navigationAPI}\n          navigationActive={true}\n          getNextFocusTarget={() => getNextFocusTarget(containerObjectRef, focusedIdRef)}\n          onUnregisterActive={(element: HTMLElement) => onUnregisterActive(element, navigationAPI)}\n        >\n          {items.map((item, index) => {\n            return (\n              <Prompt\n                key={index}\n                onClick={(event) => handleClick(event, item.id)}\n                id={item.id}\n                ref={(element) => (itemsRef.current[item.id] = element)}\n              >\n                {item.text}\n              </Prompt>\n            );\n          })}\n        </SingleTabStopNavigationProvider>\n      </div>\n    );\n  },\n);\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/support-prompt-group/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 { forwardRef, Ref, useEffect, useImperativeHandle, useRef } from \"react\";\nimport clsx from \"clsx\";\n\nimport {\n  circleIndex,\n  getAllFocusables,\n  handleKey,\n  KeyCode,\n  SingleTabStopNavigationAPI,\n  SingleTabStopNavigationProvider,\n  useMergeRefs,\n  warnOnce,\n} from \"@cloudscape-design/component-toolkit/internal\";\n\nimport { getDataAttributes } from \"../internal/base-component/get-data-attributes\";\nimport { InternalBaseComponentProps } from \"../internal/base-component/use-base-component\";\nimport { fireNonCancelableEvent } from \"../internal/events\";\nimport { getNextFocusTarget, onUnregisterActive } from \"./focus-helpers\";\nimport { SupportPromptGroupProps } from \"./interfaces\";\nimport { Prompt } from \"./prompt\";\n\nimport styles from \"./styles.css.js\";\n\nexport const InternalSupportPromptGroup = forwardRef(\n  (\n    {\n      alignment = \"vertical\",\n      onItemClick,\n      items,\n      __internalRootRef,\n      ariaLabel,\n      ...rest\n    }: SupportPromptGroupProps & InternalBaseComponentProps,\n    ref: Ref<SupportPromptGroupProps.Ref>,\n  ) => {\n    const focusedIdRef = useRef<null | string>(null);\n    const navigationAPI = useRef<SingleTabStopNavigationAPI>(null);\n    const containerObjectRef = useRef<HTMLDivElement>(null);\n    const itemsRef = useRef<Record<string, any | null>>({});\n\n    const mergedRef = useMergeRefs(containerObjectRef, __internalRootRef);\n\n    useImperativeHandle(ref, () => ({\n      focus: (id) => {\n        if (!itemsRef.current[id]) {\n          warnOnce(\"SupportPromptGroup\", \"No matching ID found to focus.\");\n        }\n        itemsRef.current[id]?.focus();\n      },\n    }));\n\n    const handleClick = (event: React.MouseEvent, id: string) => {\n      const { altKey, button, ctrlKey, metaKey, shiftKey } = event;\n\n      fireNonCancelableEvent(onItemClick, { id, altKey, button, ctrlKey, metaKey, shiftKey });\n    };\n\n    useEffect(() => {\n      navigationAPI.current?.updateFocusTarget();\n    });\n\n    function onFocus(event: React.FocusEvent) {\n      if (event.target instanceof HTMLElement && event.target.dataset.itemid) {\n        focusedIdRef.current = event.target.dataset.itemid;\n      }\n\n      navigationAPI.current?.updateFocusTarget();\n    }\n\n    function onBlur() {\n      navigationAPI.current?.updateFocusTarget();\n    }\n\n    function onKeyDown(event: React.KeyboardEvent) {\n      const focusTarget = navigationAPI.current?.getFocusTarget();\n      const specialKeys = [\n        KeyCode.right,\n        KeyCode.left,\n        KeyCode.up,\n        KeyCode.down,\n        KeyCode.end,\n        KeyCode.home,\n        KeyCode.pageUp,\n        KeyCode.pageDown,\n      ];\n\n      const hasModifierKeys = (event: React.MouseEvent | React.KeyboardEvent) => {\n        return event.ctrlKey || event.altKey || event.shiftKey || event.metaKey;\n      };\n\n      if (hasModifierKeys(event) || !specialKeys.includes(event.keyCode)) {\n        return;\n      }\n      if (!containerObjectRef.current || !focusTarget) {\n        return;\n      }\n      // Ignore navigation when the focused element is not an item.\n      if (document.activeElement && !document.activeElement.matches(`.${styles[\"support-prompt\"]}`)) {\n        return;\n      }\n      event.preventDefault();\n\n      const focusables = getFocusablesFrom(containerObjectRef.current);\n      const activeIndex = focusables.indexOf(focusTarget);\n      handleKey(event as any, {\n        onHome: () => focusElement(focusables[0]),\n        onEnd: () => focusElement(focusables[focusables.length - 1]),\n        onInlineStart: () => focusElement(focusables[circleIndex(activeIndex - 1, [0, focusables.length - 1])]),\n        onInlineEnd: () => focusElement(focusables[circleIndex(activeIndex + 1, [0, focusables.length - 1])]),\n        onBlockStart: () => focusElement(focusables[circleIndex(activeIndex - 1, [0, focusables.length - 1])]),\n        onBlockEnd: () => focusElement(focusables[circleIndex(activeIndex + 1, [0, focusables.length - 1])]),\n      });\n    }\n\n    function focusElement(element: HTMLElement) {\n      element.focus();\n    }\n\n    // List all non-disabled and registered focusables: those are eligible for keyboard navigation.\n    function getFocusablesFrom(target: HTMLElement) {\n      function isElementRegistered(element: HTMLElement) {\n        return navigationAPI.current?.isRegistered(element) ?? false;\n      }\n\n      return getAllFocusables(target).filter((el) => isElementRegistered(el));\n    }\n\n    if (!items || items.length === 0) {\n      return <div />;\n    }\n\n    return (\n      <div\n        {...getDataAttributes(rest)}\n        role=\"menubar\"\n        className={clsx(styles.root, { [styles.vertical]: alignment !== \"horizontal\" })}\n        aria-label={ariaLabel}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onKeyDown={onKeyDown}\n        ref={mergedRef}\n      >\n        <SingleTabStopNavigationProvider\n          ref={navigationAPI}\n          navigationActive={true}\n          getNextFocusTarget={() => getNextFocusTarget(containerObjectRef, focusedIdRef)}\n          onUnregisterActive={(element: HTMLElement) => onUnregisterActive(element, navigationAPI)}\n        >\n          {items.map((item, index) => {\n            return (\n              <Prompt\n                key={index}\n                onClick={(event) => handleClick(event, item.id)}\n                id={item.id}\n                ref={(element) => (itemsRef.current[item.id] = element)}\n                iconName={item.iconName}\n                iconSvg={item.iconSvg}\n                iconPosition={item.iconPosition}\n                iconVerticalAlignment={item.iconVerticalAlignment}\n                ariaLabel={item.ariaLabel}\n              >\n                {item.text}\n              </Prompt>\n            );\n          })}\n        </SingleTabStopNavigationProvider>\n      </div>\n    );\n  },\n);\n"]}

package/support-prompt-group/prompt.d.ts

@@ -1,6 +1,12 @@
+import { IconProps } from "@cloudscape-design/components/icon";
 export interface PromptProps {
     children: string;
     id: string;
     onClick: (event: React.MouseEvent, id: string) => void;
+    iconName?: IconProps.Name;
+    iconSvg?: React.ReactNode;
+    iconPosition?: "left" | "right";
+    iconVerticalAlignment?: "center" | "start" | "end";
+    ariaLabel?: string;
 }
 export declare const Prompt: import("react").ForwardRefExoticComponent<PromptProps & import("react").RefAttributes<HTMLButtonElement>>;

package/support-prompt-group/prompt.js

@@ -1,17 +1,26 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+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 { forwardRef, useRef } from "react";
 import clsx from "clsx";
 import { useSingleTabStopNavigation } from "@cloudscape-design/component-toolkit/internal";
+import Icon from "@cloudscape-design/components/icon";
 import useForwardFocus from "../internal/utils/use-forward-focus";
 import styles from "./styles.css.js";
-export const Prompt = forwardRef(({ children, id, onClick }, ref) => {
+export const Prompt = forwardRef(({ children, id, onClick, iconName, iconSvg, iconPosition = "left", iconVerticalAlignment = "start", ariaLabel, }, ref) => {
     const buttonRef = useRef(null);
     useForwardFocus(ref, buttonRef);
     const { tabIndex } = useSingleTabStopNavigation(buttonRef);
-    return (_jsx("button", { role: "menuitem", tabIndex: tabIndex, ref: buttonRef, onClick: (event) => {
+    // Helper function to conditionally render the icon
+    // iconSvg takes precedence over iconName
+    const renderIcon = () => {
+        if (!iconSvg && !iconName) {
+            return null;
+        }
+        return (_jsx("span", { className: clsx(styles["support-prompt-icon"], styles[`icon-align-${iconVerticalAlignment}`]), children: _jsx(Icon, { name: iconName, svg: iconSvg, size: "inherit" }) }));
+    };
+    return (_jsxs("button", { role: "menuitem", tabIndex: tabIndex, ref: buttonRef, onClick: (event) => {
             onClick(event, id);
-        }, id: id, "data-testid": id, "data-itemid": id, className: clsx(styles["support-prompt"]), children: children }));
+        }, id: id, "data-testid": id, "data-itemid": id, className: clsx(styles["support-prompt"]), "aria-label": ariaLabel, children: [iconPosition !== "right" && renderIcon(), _jsx("span", { className: styles["support-prompt-text"], children: children }), iconPosition === "right" && renderIcon()] }));
 });
 //# sourceMappingURL=prompt.js.map

package/support-prompt-group/prompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"prompt.js","sourceRoot":"","sources":["../../../src/support-prompt-group/prompt.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAO,MAAM,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAE3F,OAAO,eAAe,MAAM,qCAAqC,CAAC;AAElE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAe,EAAE,GAAkC,EAAE,EAAE;IAC9G,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,eAAe,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;IAEhC,MAAM,EAAE,QAAQ,EAAE,GAAG,0BAA0B,CAAC,SAAS,CAAC,CAAC;IAE3D,OAAO,CACL,iBACE,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACrB,CAAC,EACD,EAAE,EAAE,EAAE,iBACO,EAAE,iBACF,EAAE,EACf,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,YAExC,QAAQ,GACF,CACV,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { forwardRef, Ref, useRef } from \"react\";\nimport clsx from \"clsx\";\n\nimport { useSingleTabStopNavigation } from \"@cloudscape-design/component-toolkit/internal\";\n\nimport useForwardFocus from \"../internal/utils/use-forward-focus\";\n\nimport styles from \"./styles.css.js\";\n\nexport interface PromptProps {\n  children: string;\n  id: string;\n  onClick: (event: React.MouseEvent, id: string) => void;\n}\n\nexport const Prompt = forwardRef(({ children, id, onClick }: PromptProps, ref: Ref<HTMLButtonElement | null>) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  useForwardFocus(ref, buttonRef);\n\n  const { tabIndex } = useSingleTabStopNavigation(buttonRef);\n\n  return (\n    <button\n      role=\"menuitem\"\n      tabIndex={tabIndex}\n      ref={buttonRef}\n      onClick={(event) => {\n        onClick(event, id);\n      }}\n      id={id}\n      data-testid={id}\n      data-itemid={id}\n      className={clsx(styles[\"support-prompt\"])}\n    >\n      {children}\n    </button>\n  );\n});\n"]}
+{"version":3,"file":"prompt.js","sourceRoot":"","sources":["../../../src/support-prompt-group/prompt.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAO,MAAM,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAC3F,OAAO,IAAmB,MAAM,oCAAoC,CAAC;AAErE,OAAO,eAAe,MAAM,qCAAqC,CAAC;AAElE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAarC,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,QAAQ,EACR,EAAE,EACF,OAAO,EACP,QAAQ,EACR,OAAO,EACP,YAAY,GAAG,MAAM,EACrB,qBAAqB,GAAG,OAAO,EAC/B,SAAS,GACG,EACd,GAAkC,EAClC,EAAE;IACF,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,eAAe,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;IAEhC,MAAM,EAAE,QAAQ,EAAE,GAAG,0BAA0B,CAAC,SAAS,CAAC,CAAC;IAE3D,mDAAmD;IACnD,yCAAyC;IACzC,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE;YACzB,OAAO,IAAI,CAAC;SACb;QAED,OAAO,CACL,eAAM,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,EAAE,MAAM,CAAC,cAAc,qBAAqB,EAAE,CAAC,CAAC,YACjG,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAC,SAAS,GAAG,GAChD,CACR,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,kBACE,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACrB,CAAC,EACD,EAAE,EAAE,EAAE,iBACO,EAAE,iBACF,EAAE,EACf,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,gBAC7B,SAAS,aAEpB,YAAY,KAAK,OAAO,IAAI,UAAU,EAAE,EACzC,eAAM,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC,YAAG,QAAQ,GAAQ,EAChE,YAAY,KAAK,OAAO,IAAI,UAAU,EAAE,IAClC,CACV,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { forwardRef, Ref, useRef } from \"react\";\nimport clsx from \"clsx\";\n\nimport { useSingleTabStopNavigation } from \"@cloudscape-design/component-toolkit/internal\";\nimport Icon, { IconProps } from \"@cloudscape-design/components/icon\";\n\nimport useForwardFocus from \"../internal/utils/use-forward-focus\";\n\nimport styles from \"./styles.css.js\";\n\nexport interface PromptProps {\n  children: string;\n  id: string;\n  onClick: (event: React.MouseEvent, id: string) => void;\n  iconName?: IconProps.Name;\n  iconSvg?: React.ReactNode;\n  iconPosition?: \"left\" | \"right\";\n  iconVerticalAlignment?: \"center\" | \"start\" | \"end\";\n  ariaLabel?: string;\n}\n\nexport const Prompt = forwardRef(\n  (\n    {\n      children,\n      id,\n      onClick,\n      iconName,\n      iconSvg,\n      iconPosition = \"left\",\n      iconVerticalAlignment = \"start\",\n      ariaLabel,\n    }: PromptProps,\n    ref: Ref<HTMLButtonElement | null>,\n  ) => {\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    useForwardFocus(ref, buttonRef);\n\n    const { tabIndex } = useSingleTabStopNavigation(buttonRef);\n\n    // Helper function to conditionally render the icon\n    // iconSvg takes precedence over iconName\n    const renderIcon = () => {\n      if (!iconSvg && !iconName) {\n        return null;\n      }\n\n      return (\n        <span className={clsx(styles[\"support-prompt-icon\"], styles[`icon-align-${iconVerticalAlignment}`])}>\n          <Icon name={iconName} svg={iconSvg} size=\"inherit\" />\n        </span>\n      );\n    };\n\n    return (\n      <button\n        role=\"menuitem\"\n        tabIndex={tabIndex}\n        ref={buttonRef}\n        onClick={(event) => {\n          onClick(event, id);\n        }}\n        id={id}\n        data-testid={id}\n        data-itemid={id}\n        className={clsx(styles[\"support-prompt\"])}\n        aria-label={ariaLabel}\n      >\n        {iconPosition !== \"right\" && renderIcon()}\n        <span className={styles[\"support-prompt-text\"]}>{children}</span>\n        {iconPosition === \"right\" && renderIcon()}\n      </button>\n    );\n  },\n);\n"]}

package/support-prompt-group/styles.css.js

@@ -1,8 +1,13 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_1wevk_mhx5q_11",
-  "vertical": "awsui_vertical_1wevk_mhx5q_41",
-  "support-prompt": "awsui_support-prompt_1wevk_mhx5q_45"
+  "root": "awsui_root_1wevk_fboqd_11",
+  "vertical": "awsui_vertical_1wevk_fboqd_41",
+  "support-prompt": "awsui_support-prompt_1wevk_fboqd_45",
+  "support-prompt-icon": "awsui_support-prompt-icon_1wevk_fboqd_102",
+  "icon-align-center": "awsui_icon-align-center_1wevk_fboqd_106",
+  "icon-align-start": "awsui_icon-align-start_1wevk_fboqd_109",
+  "icon-align-end": "awsui_icon-align-end_1wevk_fboqd_112",
+  "support-prompt-text": "awsui_support-prompt-text_1wevk_fboqd_116"
 };
   

package/support-prompt-group/styles.scoped.css

@@ -8,7 +8,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_1wevk_mhx5q_11:not(#\9) {
+.awsui_root_1wevk_fboqd_11:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -38,12 +38,15 @@
   flex-wrap: wrap;
   gap: var(--space-scaled-xs-xwoogq, 8px);
 }
-.awsui_root_1wevk_mhx5q_11.awsui_vertical_1wevk_mhx5q_41:not(#\9) {
+.awsui_root_1wevk_fboqd_11.awsui_vertical_1wevk_fboqd_41:not(#\9) {
   flex-direction: column;
 }
 
-.awsui_support-prompt_1wevk_mhx5q_45:not(#\9) {
+.awsui_support-prompt_1wevk_fboqd_45:not(#\9) {
   cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-scaled-xs-xwoogq, 8px);
   font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
   font-size: var(--font-size-body-m-a7nh2n, 14px);
   line-height: var(--line-height-heading-m-uoaqdh, 22px);
@@ -60,26 +63,26 @@
   border-end-end-radius: var(--space-static-xs-gnm0mz, 8px);
   inline-size: fit-content;
 }
-.awsui_support-prompt_1wevk_mhx5q_45:not(#\9):hover {
+.awsui_support-prompt_1wevk_fboqd_45:not(#\9):hover {
   color: var(--color-text-button-normal-hover-gusgyv, #002b66);
   background: var(--color-background-button-normal-hover-53op9s, #f0fbff);
   border-color: var(--color-border-button-normal-hover-6a2tdq, #002b66);
 }
-.awsui_support-prompt_1wevk_mhx5q_45:not(#\9):active {
+.awsui_support-prompt_1wevk_fboqd_45:not(#\9):active {
   color: var(--color-text-button-normal-active-vihsxh, #002b66);
   background: var(--color-background-button-normal-active-5imwxd, #d1f1ff);
   border-color: var(--color-border-button-normal-active-ru7yhb, #002b66);
 }
-.awsui_support-prompt_1wevk_mhx5q_45:not(#\9):focus {
+.awsui_support-prompt_1wevk_fboqd_45:not(#\9):focus {
   outline: none;
 }
-.awsui_support-prompt_1wevk_mhx5q_45:not(#\9):focus-visible {
+.awsui_support-prompt_1wevk_fboqd_45:not(#\9):focus-visible {
   position: relative;
   box-sizing: border-box;
   outline: 2px dotted transparent;
   outline-offset: 5px;
 }
-.awsui_support-prompt_1wevk_mhx5q_45:not(#\9):focus-visible::before {
+.awsui_support-prompt_1wevk_fboqd_45:not(#\9):focus-visible::before {
   content: " ";
   display: block;
   position: absolute;
@@ -94,4 +97,22 @@
   border-end-end-radius: 6px;
   border-block: 2px solid var(--color-border-item-focused-uk47pl, #006ce0);
   border-inline: 2px solid var(--color-border-item-focused-uk47pl, #006ce0);
+}
+
+.awsui_support-prompt-icon_1wevk_fboqd_102:not(#\9) {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+.awsui_support-prompt-icon_1wevk_fboqd_102.awsui_icon-align-center_1wevk_fboqd_106:not(#\9) {
+  align-self: center;
+}
+.awsui_support-prompt-icon_1wevk_fboqd_102.awsui_icon-align-start_1wevk_fboqd_109:not(#\9) {
+  align-self: flex-start;
+}
+.awsui_support-prompt-icon_1wevk_fboqd_102.awsui_icon-align-end_1wevk_fboqd_112:not(#\9) {
+  align-self: flex-end;
+}
+
+.awsui_support-prompt-text_1wevk_fboqd_116:not(#\9) {
+  display: inline-flex;
 }

package/support-prompt-group/styles.selectors.js

@@ -2,8 +2,13 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_1wevk_mhx5q_11",
-  "vertical": "awsui_vertical_1wevk_mhx5q_41",
-  "support-prompt": "awsui_support-prompt_1wevk_mhx5q_45"
+  "root": "awsui_root_1wevk_fboqd_11",
+  "vertical": "awsui_vertical_1wevk_fboqd_41",
+  "support-prompt": "awsui_support-prompt_1wevk_fboqd_45",
+  "support-prompt-icon": "awsui_support-prompt-icon_1wevk_fboqd_102",
+  "icon-align-center": "awsui_icon-align-center_1wevk_fboqd_106",
+  "icon-align-start": "awsui_icon-align-start_1wevk_fboqd_109",
+  "icon-align-end": "awsui_icon-align-end_1wevk_fboqd_112",
+  "support-prompt-text": "awsui_support-prompt-text_1wevk_fboqd_116"
 };