@cloudscape-design/components 3.0.74 → 3.0.75

package/flashbar/index.js

@@ -2,52 +2,123 @@ import { __assign, __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import clsx from 'clsx';
-import React from 'react';
-import { useMergeRefs } from '../internal/hooks/use-merge-refs';
-import { getBaseProps } from '../internal/base-component';
-import styles from './styles.css.js';
-import { Flash } from './flash';
-import { useContainerBreakpoints } from '../internal/hooks/container-queries';
+import React, { useState } from 'react';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
-import VisualContext from '../internal/components/visual-context';
-import useBaseComponent from '../internal/hooks/use-base-component';
-import { useReducedMotion, useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import customCssProps from '../internal/generated/custom-css-properties';
+import { Flash } from './flash';
+import { getBaseProps } from '../internal/base-component';
+import InternalIcon from '../icon/internal';
+import { TIMEOUT_FOR_ENTERING_ANIMATION } from './constant';
 import { TransitionGroup } from 'react-transition-group';
 import { Transition } from '../internal/components/transition';
-import { TIMEOUT_FOR_ENTERING_ANIMATION } from './constant';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { useContainerBreakpoints } from '../internal/hooks/container-queries';
+import useFocusVisible from '../internal/hooks/focus-visible';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
+import { useReducedMotion, useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import { getVisualContextClassname } from '../internal/components/visual-context';
+import styles from './styles.css.js';
 export default function Flashbar(_a) {
     var items = _a.items, restProps = __rest(_a, ["items"]);
     var __internalRootRef = useBaseComponent('Flashbar').__internalRootRef;
     var _b = useContainerBreakpoints(['xs']), breakpoint = _b[0], ref = _b[1];
-    var isRefresh = useVisualRefresh();
     var baseProps = getBaseProps(restProps);
     var mergedRef = useMergeRefs(ref, __internalRootRef);
-    // All the flash items should have ids so we can identify which DOM element is being removed from the DOM to animate it.
-    var motionDisabled = useReducedMotion(ref) || !isRefresh || (items && !items.every(function (item) { return 'id' in item; }));
-    // Motion will be disabled if any of the provided flash messages does not contain an `id`
-    var renderFlashItem = function (item, index) {
+    var isFocusVisible = useFocusVisible();
+    var isVisualRefresh = useVisualRefresh();
+    /**
+     * All the flash items should have ids so we can identify which DOM element is being
+     * removed from the DOM to animate it. Motion will be disabled if any of the provided
+     * flash messages does not contain an `id`.
+     */
+    var motionDisabled = useReducedMotion(ref) || !isVisualRefresh || (items && !items.every(function (item) { return 'id' in item; }));
+    /**
+     * The `stackItems` property is a hidden boolean that allows for teams
+     * to beta test the flashbar stacking feature.
+     */
+    var stackItems = restProps.stackItems;
+    var ariaLabels = restProps.ariaLabels;
+    var isFlashbarStacked = stackItems && (items === null || items === void 0 ? void 0 : items.length) > 3;
+    var _c = useState(false), isFlashbarStackExpanded = _c[0], setIsFlashbarStackExpanded = _c[1];
+    /**
+     * Compute the appropriate aria label for the stacked notifications toggle button
+     * based on the expanded/collapsed state of the stack and the presence of
+     * corresponding aria label properties.
+     */
+    function getStackButtonAriaLabel() {
+        var _a, _b;
+        var stackButtonAriaLabel;
+        if (isFlashbarStackExpanded) {
+            stackButtonAriaLabel = (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.stackCollapseLabel) !== null && _a !== void 0 ? _a : 'Collapse stacked notifications';
+        }
+        else {
+            stackButtonAriaLabel = (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.stackExpandLabel) !== null && _b !== void 0 ? _b : 'Expand stacked notifications';
+        }
+        return stackButtonAriaLabel;
+    }
+    /**
+     * If the `isFlashbarStacked` is true (which is only possible if `stackItems` is true)
+     * then the first item should be rendered followed by two dummy items that visually indicate
+     * two, three, or more items exist in the stack.
+     */
+    function renderStackedItems() {
         var _a;
-        return (React.createElement(Flash, __assign({ key: (_a = item.id) !== null && _a !== void 0 ? _a : index, 
+        if (!isFlashbarStacked) {
+            return;
+        }
+        var stackDepth = Math.min(3, items.length);
+        var stackedItems = items.slice(0, stackDepth);
+        return (React.createElement("div", { className: styles.stack, style: (_a = {}, _a[customCssProps.flashbarStackDepth] = stackDepth, _a) },
+            !isFlashbarStackExpanded && (React.createElement("div", { className: clsx(styles.collapsed, isVisualRefresh && styles['visual-refresh']) }, stackedItems.map(function (item, index) {
+                var _a;
+                var _b, _c;
+                return (React.createElement("div", { className: styles.item, style: (_a = {}, _a[customCssProps.flashbarStackIndex] = index, _a), key: index },
+                    index === 0 && renderItem(item, (_b = item.id) !== null && _b !== void 0 ? _b : index),
+                    index > 0 && React.createElement("div", { className: clsx(styles.flash, styles["flash-type-".concat((_c = item.type) !== null && _c !== void 0 ? _c : 'info')]) })));
+            }))),
+            isFlashbarStackExpanded && (React.createElement("div", { className: styles.expanded }, items.map(function (item, index) { var _a; return renderItem(item, (_a = item.id) !== null && _a !== void 0 ? _a : index); }))),
+            React.createElement("button", __assign({ "aria-label": getStackButtonAriaLabel(), className: clsx(styles.toggle, isVisualRefresh && styles['visual-refresh']), onClick: function () { return setIsFlashbarStackExpanded(!isFlashbarStackExpanded); } }, isFocusVisible),
+                React.createElement(InternalIcon, { className: clsx(styles.icon, isFlashbarStackExpanded && styles.expanded), size: "small", name: "angle-down" }))));
+    }
+    /**
+     * If the flashbar is flat and motion is `enabled` then the adding and removing of items
+     * from the flashbar will render with visual transitions.
+     */
+    function renderFlatItemsWithTransitions() {
+        if (isFlashbarStacked || motionDisabled || !items) {
+            return;
+        }
+        return (React.createElement(TransitionGroup, { component: null }, items &&
+            items.map(function (item, index) {
+                var _a;
+                return (React.createElement(Transition, { transitionChangeDelay: { entering: TIMEOUT_FOR_ENTERING_ANIMATION }, key: (_a = item.id) !== null && _a !== void 0 ? _a : index, "in": true }, function (state, transitionRootElement) { var _a; return renderItem(item, (_a = item.id) !== null && _a !== void 0 ? _a : index, transitionRootElement, state); }));
+            })));
+    }
+    /**
+     * If the flashbar is flat and motion is `disabled` then the adding and removing of items
+     * from the flashbar will render without visual transitions.
+     */
+    function renderFlatItemsWithoutTransitions() {
+        if (isFlashbarStacked || !motionDisabled || !items) {
+            return;
+        }
+        return React.createElement(React.Fragment, null, items.map(function (item, index) { var _a; return renderItem(item, (_a = item.id) !== null && _a !== void 0 ? _a : index); }));
+    }
+    /**
+     * This is a shared render function for a single flashbar item to be used
+     * by the stacking, motion, and non-motion item group render functions.
+     */
+    function renderItem(item, key, transitionRootElement, transitionState) {
+        return (React.createElement(Flash
+        // eslint-disable-next-line react/forbid-component-props
+        , __assign({ 
             // eslint-disable-next-line react/forbid-component-props
-            className: clsx(isRefresh ? styles['flash-refresh'] : '') }, item)));
-    };
-    var renderFlashItemsWithTransitions = function (items) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(TransitionGroup, { component: null }, items &&
-                items.map(function (item, index) {
-                    var _a;
-                    return (React.createElement(Transition, { transitionChangeDelay: { entering: TIMEOUT_FOR_ENTERING_ANIMATION }, key: (_a = item.id) !== null && _a !== void 0 ? _a : index, "in": true }, function (state, transitionRootElement) {
-                        var _a;
-                        return (React.createElement(Flash, __assign({ ref: transitionRootElement, key: (_a = item.id) !== null && _a !== void 0 ? _a : index, transitionState: state, 
-                            // eslint-disable-next-line react/forbid-component-props
-                            className: clsx(isRefresh ? styles['flash-refresh'] : '') }, item)));
-                    }));
-                }))));
-    };
+            className: clsx(getVisualContextClassname('flashbar'), isVisualRefresh ? styles['flash-refresh'] : ''), key: key, ref: transitionRootElement, transitionState: transitionState }, item)));
+    }
     return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.flashbar, styles["breakpoint-".concat(breakpoint)]), ref: mergedRef }),
-        React.createElement(VisualContext, { contextName: "flashbar" }, items && (React.createElement(React.Fragment, null, motionDisabled
-            ? items.map(function (item, index) { return renderFlashItem(item, index); })
-            : renderFlashItemsWithTransitions(items))))));
+        renderStackedItems(),
+        renderFlatItemsWithTransitions(),
+        renderFlatItemsWithoutTransitions()));
 }
 applyDisplayName(Flashbar, 'Flashbar');
 //# sourceMappingURL=index.js.map

package/flashbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/flashbar/index.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 clsx from 'clsx';\nimport React from 'react';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { getBaseProps } from '../internal/base-component';\nimport styles from './styles.css.js';\nimport { Flash } from './flash';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport VisualContext from '../internal/components/visual-context';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useReducedMotion, useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { FlashbarProps } from './interfaces';\nimport { TransitionGroup } from 'react-transition-group';\nimport { Transition } from '../internal/components/transition';\nimport { TIMEOUT_FOR_ENTERING_ANIMATION } from './constant';\n\nexport { FlashbarProps };\n\nexport default function Flashbar({ items, ...restProps }: FlashbarProps) {\n  const { __internalRootRef } = useBaseComponent('Flashbar');\n  const [breakpoint, ref] = useContainerBreakpoints(['xs']);\n  const isRefresh = useVisualRefresh();\n  const baseProps = getBaseProps(restProps);\n\n  const mergedRef = useMergeRefs(ref, __internalRootRef);\n\n  // All the flash items should have ids so we can identify which DOM element is being removed from the DOM to animate it.\n  const motionDisabled = useReducedMotion(ref as any) || !isRefresh || (items && !items.every(item => 'id' in item));\n  // Motion will be disabled if any of the provided flash messages does not contain an `id`\n\n  const renderFlashItem = (item: FlashbarProps.MessageDefinition, index: number) => (\n    <Flash\n      key={item.id ?? index}\n      // eslint-disable-next-line react/forbid-component-props\n      className={clsx(isRefresh ? styles['flash-refresh'] : '')}\n      {...item}\n    />\n  );\n  const renderFlashItemsWithTransitions = (items: readonly FlashbarProps.MessageDefinition[]) => {\n    return (\n      <>\n        <TransitionGroup component={null}>\n          {items &&\n            items.map((item, index) => (\n              <Transition\n                transitionChangeDelay={{ entering: TIMEOUT_FOR_ENTERING_ANIMATION }}\n                key={item.id ?? index}\n                in={true}\n              >\n                {(state: string, transitionRootElement: React.Ref<HTMLDivElement> | undefined) => (\n                  <Flash\n                    ref={transitionRootElement}\n                    key={item.id ?? index}\n                    transitionState={state}\n                    // eslint-disable-next-line react/forbid-component-props\n                    className={clsx(isRefresh ? styles['flash-refresh'] : '')}\n                    {...item}\n                  />\n                )}\n              </Transition>\n            ))}\n        </TransitionGroup>\n      </>\n    );\n  };\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.flashbar, styles[`breakpoint-${breakpoint}`])}\n      ref={mergedRef}\n    >\n      <VisualContext contextName=\"flashbar\">\n        {items && (\n          <>\n            {motionDisabled\n              ? items.map((item, index) => renderFlashItem(item, index))\n              : renderFlashItemsWithTransitions(items)}\n          </>\n        )}\n      </VisualContext>\n    </div>\n  );\n}\n\napplyDisplayName(Flashbar, 'Flashbar');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/flashbar/index.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 clsx from 'clsx';\nimport React, { useState } from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { Flash } from './flash';\nimport { FlashbarProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalIcon from '../icon/internal';\nimport { TIMEOUT_FOR_ENTERING_ANIMATION } from './constant';\nimport { TransitionGroup } from 'react-transition-group';\nimport { Transition } from '../internal/components/transition';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useReducedMotion, useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { getVisualContextClassname } from '../internal/components/visual-context';\nimport styles from './styles.css.js';\n\nexport { FlashbarProps };\n\nexport default function Flashbar({ items, ...restProps }: FlashbarProps) {\n  const { __internalRootRef } = useBaseComponent('Flashbar');\n  const [breakpoint, ref] = useContainerBreakpoints(['xs']);\n  const baseProps = getBaseProps(restProps);\n  const mergedRef = useMergeRefs(ref, __internalRootRef);\n  const isFocusVisible = useFocusVisible();\n  const isVisualRefresh = useVisualRefresh();\n\n  /**\n   * All the flash items should have ids so we can identify which DOM element is being\n   * removed from the DOM to animate it. Motion will be disabled if any of the provided\n   * flash messages does not contain an `id`.\n   */\n  const motionDisabled =\n    useReducedMotion(ref as any) || !isVisualRefresh || (items && !items.every(item => 'id' in item));\n\n  /**\n   * The `stackItems` property is a hidden boolean that allows for teams\n   * to beta test the flashbar stacking feature.\n   */\n  const stackItems = (restProps as any).stackItems;\n  const ariaLabels = (restProps as any).ariaLabels;\n  const isFlashbarStacked = stackItems && items?.length > 3;\n  const [isFlashbarStackExpanded, setIsFlashbarStackExpanded] = useState(false);\n\n  /**\n   * Compute the appropriate aria label for the stacked notifications toggle button\n   * based on the expanded/collapsed state of the stack and the presence of\n   * corresponding aria label properties.\n   */\n  function getStackButtonAriaLabel() {\n    let stackButtonAriaLabel;\n\n    if (isFlashbarStackExpanded) {\n      stackButtonAriaLabel = ariaLabels?.stackCollapseLabel ?? 'Collapse stacked notifications';\n    } else {\n      stackButtonAriaLabel = ariaLabels?.stackExpandLabel ?? 'Expand stacked notifications';\n    }\n\n    return stackButtonAriaLabel;\n  }\n\n  /**\n   * If the `isFlashbarStacked` is true (which is only possible if `stackItems` is true)\n   * then the first item should be rendered followed by two dummy items that visually indicate\n   * two, three, or more items exist in the stack.\n   */\n  function renderStackedItems() {\n    if (!isFlashbarStacked) {\n      return;\n    }\n\n    const stackDepth = Math.min(3, items.length);\n    const stackedItems = items.slice(0, stackDepth);\n\n    return (\n      <div className={styles.stack} style={{ [customCssProps.flashbarStackDepth]: stackDepth }}>\n        {!isFlashbarStackExpanded && (\n          <div className={clsx(styles.collapsed, isVisualRefresh && styles['visual-refresh'])}>\n            {stackedItems.map((item, index) => (\n              <div className={styles.item} style={{ [customCssProps.flashbarStackIndex]: index }} key={index}>\n                {index === 0 && renderItem(item, item.id ?? index)}\n                {index > 0 && <div className={clsx(styles.flash, styles[`flash-type-${item.type ?? 'info'}`])} />}\n              </div>\n            ))}\n          </div>\n        )}\n\n        {isFlashbarStackExpanded && (\n          <div className={styles.expanded}>{items.map((item, index) => renderItem(item, item.id ?? index))}</div>\n        )}\n\n        <button\n          aria-label={getStackButtonAriaLabel()}\n          className={clsx(styles.toggle, isVisualRefresh && styles['visual-refresh'])}\n          onClick={() => setIsFlashbarStackExpanded(!isFlashbarStackExpanded)}\n          {...isFocusVisible}\n        >\n          <InternalIcon\n            className={clsx(styles.icon, isFlashbarStackExpanded && styles.expanded)}\n            size=\"small\"\n            name=\"angle-down\"\n          />\n        </button>\n      </div>\n    );\n  }\n\n  /**\n   * If the flashbar is flat and motion is `enabled` then the adding and removing of items\n   * from the flashbar will render with visual transitions.\n   */\n  function renderFlatItemsWithTransitions() {\n    if (isFlashbarStacked || motionDisabled || !items) {\n      return;\n    }\n\n    return (\n      <TransitionGroup component={null}>\n        {items &&\n          items.map((item, index) => (\n            <Transition\n              transitionChangeDelay={{ entering: TIMEOUT_FOR_ENTERING_ANIMATION }}\n              key={item.id ?? index}\n              in={true}\n            >\n              {(state: string, transitionRootElement: React.Ref<HTMLDivElement> | undefined) =>\n                renderItem(item, item.id ?? index, transitionRootElement, state)\n              }\n            </Transition>\n          ))}\n      </TransitionGroup>\n    );\n  }\n\n  /**\n   * If the flashbar is flat and motion is `disabled` then the adding and removing of items\n   * from the flashbar will render without visual transitions.\n   */\n  function renderFlatItemsWithoutTransitions() {\n    if (isFlashbarStacked || !motionDisabled || !items) {\n      return;\n    }\n\n    return <>{items.map((item, index) => renderItem(item, item.id ?? index))}</>;\n  }\n\n  /**\n   * This is a shared render function for a single flashbar item to be used\n   * by the stacking, motion, and non-motion item group render functions.\n   */\n  function renderItem(\n    item: FlashbarProps.MessageDefinition,\n    key: string | number,\n    transitionRootElement?: React.Ref<HTMLDivElement> | undefined,\n    transitionState?: string | undefined\n  ) {\n    return (\n      <Flash\n        // eslint-disable-next-line react/forbid-component-props\n        className={clsx(getVisualContextClassname('flashbar'), isVisualRefresh ? styles['flash-refresh'] : '')}\n        key={key}\n        ref={transitionRootElement}\n        transitionState={transitionState}\n        {...item}\n      />\n    );\n  }\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.flashbar, styles[`breakpoint-${breakpoint}`])}\n      ref={mergedRef}\n    >\n      {renderStackedItems()}\n      {renderFlatItemsWithTransitions()}\n      {renderFlatItemsWithoutTransitions()}\n    </div>\n  );\n}\n\napplyDisplayName(Flashbar, 'Flashbar');\n"]}

package/flashbar/styles.css.js

@@ -1,27 +1,34 @@
 
     import './styles.scoped.css';
     export default {
-  "flash-refresh": "awsui_flash-refresh_1q84n_zqvy6_93",
-  "enter": "awsui_enter_1q84n_zqvy6_93",
-  "flash-body": "awsui_flash-body_1q84n_zqvy6_108",
-  "flash-message": "awsui_flash-message_1q84n_zqvy6_108",
-  "flash-header": "awsui_flash-header_1q84n_zqvy6_108",
-  "flash-content": "awsui_flash-content_1q84n_zqvy6_109",
-  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_zqvy6_110",
-  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_zqvy6_111",
-  "flash-icon": "awsui_flash-icon_1q84n_zqvy6_134",
-  "entering": "awsui_entering_1q84n_zqvy6_147",
-  "entered": "awsui_entered_1q84n_zqvy6_168",
-  "exiting": "awsui_exiting_1q84n_zqvy6_273",
-  "flashbar": "awsui_flashbar_1q84n_zqvy6_295",
-  "flash": "awsui_flash_1q84n_zqvy6_93",
-  "flash-text": "awsui_flash-text_1q84n_zqvy6_359",
-  "dismiss-button": "awsui_dismiss-button_1q84n_zqvy6_111",
-  "breakpoint-default": "awsui_breakpoint-default_1q84n_zqvy6_401",
-  "action-button": "awsui_action-button_1q84n_zqvy6_110",
-  "flash-type-success": "awsui_flash-type-success_1q84n_zqvy6_414",
-  "flash-type-error": "awsui_flash-type-error_1q84n_zqvy6_418",
-  "flash-type-warning": "awsui_flash-type-warning_1q84n_zqvy6_422",
-  "flash-type-info": "awsui_flash-type-info_1q84n_zqvy6_426"
+  "flash-refresh": "awsui_flash-refresh_1q84n_14a50_93",
+  "enter": "awsui_enter_1q84n_14a50_93",
+  "flash-body": "awsui_flash-body_1q84n_14a50_108",
+  "flash-message": "awsui_flash-message_1q84n_14a50_108",
+  "flash-header": "awsui_flash-header_1q84n_14a50_108",
+  "flash-content": "awsui_flash-content_1q84n_14a50_109",
+  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_14a50_110",
+  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_14a50_111",
+  "flash-icon": "awsui_flash-icon_1q84n_14a50_134",
+  "entering": "awsui_entering_1q84n_14a50_147",
+  "entered": "awsui_entered_1q84n_14a50_168",
+  "exiting": "awsui_exiting_1q84n_14a50_273",
+  "flashbar": "awsui_flashbar_1q84n_14a50_295",
+  "flash": "awsui_flash_1q84n_14a50_93",
+  "flash-text": "awsui_flash-text_1q84n_14a50_359",
+  "dismiss-button": "awsui_dismiss-button_1q84n_14a50_111",
+  "breakpoint-default": "awsui_breakpoint-default_1q84n_14a50_401",
+  "action-button": "awsui_action-button_1q84n_14a50_110",
+  "flash-type-success": "awsui_flash-type-success_1q84n_14a50_414",
+  "flash-type-error": "awsui_flash-type-error_1q84n_14a50_418",
+  "flash-type-warning": "awsui_flash-type-warning_1q84n_14a50_422",
+  "flash-type-info": "awsui_flash-type-info_1q84n_14a50_426",
+  "stack": "awsui_stack_1q84n_14a50_430",
+  "expanded": "awsui_expanded_1q84n_14a50_435",
+  "collapsed": "awsui_collapsed_1q84n_14a50_449",
+  "item": "awsui_item_1q84n_14a50_455",
+  "visual-refresh": "awsui_visual-refresh_1q84n_14a50_465",
+  "toggle": "awsui_toggle_1q84n_14a50_472",
+  "icon": "awsui_icon_1q84n_14a50_535"
 };