@cloudscape-design/components-themeable 3.0.853 → 3.0.855

package/lib/internal/template/file-input/internal.js

@@ -8,17 +8,21 @@ import InternalButton from '../button/internal';
 import { useFormFieldContext } from '../contexts/form-field';
 import { getBaseProps } from '../internal/base-component/index.js';
 import ScreenreaderOnly from '../internal/components/screenreader-only';
+import { useSingleTabStopNavigation } from '../internal/context/single-tab-stop-navigation-context';
 import { fireNonCancelableEvent } from '../internal/events';
 import checkControlled from '../internal/hooks/check-controlled';
 import useForwardFocus from '../internal/hooks/forward-focus';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { joinStrings } from '../internal/utils/strings';
 import styles from './styles.css.js';
 const InternalFileInput = React.forwardRef((_a, ref) => {
     var _b;
-    var { accept, ariaRequired, ariaLabel, multiple = false, value, onChange, variant = 'button', children, __internalRootRef = null } = _a, restProps = __rest(_a, ["accept", "ariaRequired", "ariaLabel", "multiple", "value", "onChange", "variant", "children", "__internalRootRef"]);
+    var { accept, ariaRequired, ariaLabel, multiple = false, value, onChange, variant = 'button', children, __internalRootRef = null, __inputClassName, __inputNativeAttributes } = _a, restProps = __rest(_a, ["accept", "ariaRequired", "ariaLabel", "multiple", "value", "onChange", "variant", "children", "__internalRootRef", "__inputClassName", "__inputNativeAttributes"]);
     const baseProps = getBaseProps(restProps);
     const uploadInputRef = useRef(null);
+    const containerRef = useRef(null);
+    const mergedRef = useMergeRefs(__internalRootRef, containerRef);
     const uploadButtonLabelId = useUniqueId('upload-button-label');
     const formFieldContext = useFormFieldContext(restProps);
     const selfControlId = useUniqueId('upload-input');
@@ -26,17 +30,17 @@ const InternalFileInput = React.forwardRef((_a, ref) => {
     useForwardFocus(ref, uploadInputRef);
     const [isFocused, setIsFocused] = useState(false);
     const onUploadButtonClick = () => { var _a; return (_a = uploadInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); };
-    const onUploadInputFocus = () => setIsFocused(true);
+    const onUploadInputFocus = () => {
+        var _a, _b;
+        setIsFocused(true);
+        (_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a);
+    };
     const onUploadInputBlur = () => setIsFocused(false);
     const onUploadInputChange = ({ target }) => {
         fireNonCancelableEvent(onChange, { value: target.files ? Array.from(target.files) : [] });
     };
     checkControlled('FileInput', 'value', value, 'onChange', onChange);
-    const nativeAttributes = {
-        'aria-label': ariaLabel || children,
-        'aria-labelledby': joinStrings(formFieldContext.ariaLabelledby, uploadButtonLabelId),
-        'aria-describedby': formFieldContext.ariaDescribedby,
-    };
+    const nativeAttributes = Object.assign({ 'aria-label': ariaLabel || children, 'aria-labelledby': joinStrings(formFieldContext.ariaLabelledby, uploadButtonLabelId), 'aria-describedby': formFieldContext.ariaDescribedby }, __inputNativeAttributes);
     if (formFieldContext.invalid) {
         nativeAttributes['aria-invalid'] = true;
     }
@@ -60,9 +64,13 @@ const InternalFileInput = React.forwardRef((_a, ref) => {
             uploadInputRef.current.value = ''; // reset value to allow calling onChange when the same file is uploaded again
         }
     }, [value]);
-    return (React.createElement("div", Object.assign({}, baseProps, { ref: __internalRootRef, className: clsx(baseProps.className, styles.root) }),
-        React.createElement("input", Object.assign({ id: controlId, ref: uploadInputRef, type: "file", hidden: false, multiple: multiple, accept: accept, onChange: onUploadInputChange, onFocus: onUploadInputFocus, onBlur: onUploadInputBlur, className: clsx(styles['file-input'], styles.hidden) }, nativeAttributes)),
-        React.createElement(InternalButton, { iconName: "upload", variant: variant === 'icon' ? 'icon' : undefined, formAction: "none", onClick: onUploadButtonClick, className: clsx(styles['file-input-button'], isFocused && styles['force-focus-outline']), __nativeAttributes: { tabIndex: -1, 'aria-hidden': true } }, variant === 'button' && children),
+    const { tabIndex } = useSingleTabStopNavigation(uploadInputRef);
+    return (React.createElement("div", Object.assign({}, baseProps, { ref: mergedRef, className: clsx(baseProps.className, styles.root) }),
+        React.createElement("input", Object.assign({ id: controlId, ref: uploadInputRef, type: "file", hidden: false, multiple: multiple, accept: accept, onChange: onUploadInputChange, onFocus: onUploadInputFocus, onBlur: onUploadInputBlur, className: clsx(styles['file-input'], styles.hidden, __inputClassName), tabIndex: tabIndex }, nativeAttributes)),
+        React.createElement(InternalButton, { iconName: "upload", variant: variant === 'icon' ? 'icon' : undefined, formAction: "none", onClick: onUploadButtonClick, className: clsx(styles['file-input-button'], {
+                [styles['force-focus-outline-button']]: isFocused && variant === 'button',
+                [styles['force-focus-outline-icon']]: isFocused && variant === 'icon',
+            }), __nativeAttributes: { tabIndex: -1, 'aria-hidden': true } }, variant === 'button' && children),
         React.createElement(ScreenreaderOnly, { id: uploadButtonLabelId }, ariaLabel || children)));
 });
 export default InternalFileInput;

package/lib/internal/template/file-input/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/file-input/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\n\nimport React, { ChangeEvent, Ref, useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalButton from '../button/internal';\nimport { useFormFieldContext } from '../contexts/form-field';\nimport { getBaseProps } from '../internal/base-component/index.js';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { joinStrings } from '../internal/utils/strings';\nimport { FileInputProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nconst InternalFileInput = React.forwardRef(\n  (\n    {\n      accept,\n      ariaRequired,\n      ariaLabel,\n      multiple = false,\n      value,\n      onChange,\n      variant = 'button',\n      children,\n      __internalRootRef = null,\n      ...restProps\n    }: FileInputProps & InternalBaseComponentProps,\n    ref: Ref<FileInputProps.Ref>\n  ) => {\n    const baseProps = getBaseProps(restProps);\n    const uploadInputRef = useRef<HTMLInputElement>(null);\n    const uploadButtonLabelId = useUniqueId('upload-button-label');\n    const formFieldContext = useFormFieldContext(restProps);\n    const selfControlId = useUniqueId('upload-input');\n    const controlId = formFieldContext.controlId ?? selfControlId;\n\n    useForwardFocus(ref, uploadInputRef);\n\n    const [isFocused, setIsFocused] = useState(false);\n    const onUploadButtonClick = () => uploadInputRef.current?.click();\n    const onUploadInputFocus = () => setIsFocused(true);\n    const onUploadInputBlur = () => setIsFocused(false);\n\n    const onUploadInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {\n      fireNonCancelableEvent(onChange, { value: target.files ? Array.from(target.files) : [] });\n    };\n\n    checkControlled('FileInput', 'value', value, 'onChange', onChange);\n\n    const nativeAttributes: React.HTMLAttributes<HTMLInputElement> = {\n      'aria-label': ariaLabel || children,\n      'aria-labelledby': joinStrings(formFieldContext.ariaLabelledby, uploadButtonLabelId),\n      'aria-describedby': formFieldContext.ariaDescribedby,\n    };\n    if (formFieldContext.invalid) {\n      nativeAttributes['aria-invalid'] = true;\n    }\n    if (ariaRequired) {\n      nativeAttributes['aria-required'] = true;\n    }\n\n    if (variant === 'icon' && !ariaLabel) {\n      warnOnce('FileInput', 'Aria label is required with icon variant.');\n    }\n\n    // Synchronizing component's value with the native file input state.\n    useEffect(() => {\n      /* istanbul ignore next: The DataTransfer is not available in jsdom. */\n      if (window.DataTransfer) {\n        const dataTransfer = new DataTransfer();\n        for (const file of value) {\n          dataTransfer.items.add(file);\n        }\n        uploadInputRef.current!.files = dataTransfer.files;\n      }\n      if (uploadInputRef.current) {\n        uploadInputRef.current.value = ''; // reset value to allow calling onChange when the same file is uploaded again\n      }\n    }, [value]);\n\n    return (\n      <div {...baseProps} ref={__internalRootRef} className={clsx(baseProps.className, styles.root)}>\n        {/* This is the actual interactive and accessible file-upload element. */}\n        {/* It is visually hidden to achieve the desired UX design. */}\n        <input\n          id={controlId}\n          ref={uploadInputRef}\n          type=\"file\"\n          hidden={false}\n          multiple={multiple}\n          accept={accept}\n          onChange={onUploadInputChange}\n          onFocus={onUploadInputFocus}\n          onBlur={onUploadInputBlur}\n          className={clsx(styles['file-input'], styles.hidden)}\n          {...nativeAttributes}\n        />\n\n        {/* The button is decorative. It dispatches clicks to the file input and is ARIA-hidden. */}\n        {/* When the input is focused the focus outline is forced on the button. */}\n        <InternalButton\n          iconName=\"upload\"\n          variant={variant === 'icon' ? 'icon' : undefined}\n          formAction=\"none\"\n          onClick={onUploadButtonClick}\n          className={clsx(styles['file-input-button'], isFocused && styles['force-focus-outline'])}\n          __nativeAttributes={{ tabIndex: -1, 'aria-hidden': true }}\n        >\n          {variant === 'button' && children}\n        </InternalButton>\n\n        {/* The file input needs to be labelled with provided content. Can't use the button because it is ARIA-hidden. */}\n        <ScreenreaderOnly id={uploadButtonLabelId}>{ariaLabel || children}</ScreenreaderOnly>\n      </div>\n    );\n  }\n);\n\nexport default InternalFileInput;\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/file-input/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\n\nimport React, { ChangeEvent, Ref, useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalButton from '../button/internal';\nimport { useFormFieldContext } from '../contexts/form-field';\nimport { getBaseProps } from '../internal/base-component/index.js';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { useSingleTabStopNavigation } from '../internal/context/single-tab-stop-navigation-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { joinStrings } from '../internal/utils/strings';\nimport { FileInputProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface InternalFileInputProps {\n  __inputClassName?: string;\n  __inputNativeAttributes?: React.InputHTMLAttributes<HTMLInputElement> | Record<`data-${string}`, string>;\n}\n\nconst InternalFileInput = React.forwardRef(\n  (\n    {\n      accept,\n      ariaRequired,\n      ariaLabel,\n      multiple = false,\n      value,\n      onChange,\n      variant = 'button',\n      children,\n      __internalRootRef = null,\n      __inputClassName,\n      __inputNativeAttributes,\n      ...restProps\n    }: FileInputProps & InternalBaseComponentProps & InternalFileInputProps,\n    ref: Ref<FileInputProps.Ref>\n  ) => {\n    const baseProps = getBaseProps(restProps);\n    const uploadInputRef = useRef<HTMLInputElement>(null);\n    const containerRef = useRef<HTMLButtonElement>(null);\n    const mergedRef = useMergeRefs(__internalRootRef, containerRef);\n\n    const uploadButtonLabelId = useUniqueId('upload-button-label');\n    const formFieldContext = useFormFieldContext(restProps);\n    const selfControlId = useUniqueId('upload-input');\n    const controlId = formFieldContext.controlId ?? selfControlId;\n\n    useForwardFocus(ref, uploadInputRef);\n\n    const [isFocused, setIsFocused] = useState(false);\n    const onUploadButtonClick = () => uploadInputRef.current?.click();\n    const onUploadInputFocus = () => {\n      setIsFocused(true);\n      containerRef.current?.scrollIntoView?.();\n    };\n    const onUploadInputBlur = () => setIsFocused(false);\n\n    const onUploadInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {\n      fireNonCancelableEvent(onChange, { value: target.files ? Array.from(target.files) : [] });\n    };\n\n    checkControlled('FileInput', 'value', value, 'onChange', onChange);\n\n    const nativeAttributes: React.HTMLAttributes<HTMLInputElement> = {\n      'aria-label': ariaLabel || children,\n      'aria-labelledby': joinStrings(formFieldContext.ariaLabelledby, uploadButtonLabelId),\n      'aria-describedby': formFieldContext.ariaDescribedby,\n      ...__inputNativeAttributes,\n    };\n    if (formFieldContext.invalid) {\n      nativeAttributes['aria-invalid'] = true;\n    }\n    if (ariaRequired) {\n      nativeAttributes['aria-required'] = true;\n    }\n\n    if (variant === 'icon' && !ariaLabel) {\n      warnOnce('FileInput', 'Aria label is required with icon variant.');\n    }\n\n    // Synchronizing component's value with the native file input state.\n    useEffect(() => {\n      /* istanbul ignore next: The DataTransfer is not available in jsdom. */\n      if (window.DataTransfer) {\n        const dataTransfer = new DataTransfer();\n        for (const file of value) {\n          dataTransfer.items.add(file);\n        }\n        uploadInputRef.current!.files = dataTransfer.files;\n      }\n      if (uploadInputRef.current) {\n        uploadInputRef.current.value = ''; // reset value to allow calling onChange when the same file is uploaded again\n      }\n    }, [value]);\n\n    const { tabIndex } = useSingleTabStopNavigation(uploadInputRef);\n\n    return (\n      <div {...baseProps} ref={mergedRef} className={clsx(baseProps.className, styles.root)}>\n        {/* This is the actual interactive and accessible file-upload element. */}\n        {/* It is visually hidden to achieve the desired UX design. */}\n        <input\n          id={controlId}\n          ref={uploadInputRef}\n          type=\"file\"\n          hidden={false}\n          multiple={multiple}\n          accept={accept}\n          onChange={onUploadInputChange}\n          onFocus={onUploadInputFocus}\n          onBlur={onUploadInputBlur}\n          className={clsx(styles['file-input'], styles.hidden, __inputClassName)}\n          tabIndex={tabIndex}\n          {...nativeAttributes}\n        />\n\n        {/* The button is decorative. It dispatches clicks to the file input and is ARIA-hidden. */}\n        {/* When the input is focused the focus outline is forced on the button. */}\n        <InternalButton\n          iconName=\"upload\"\n          variant={variant === 'icon' ? 'icon' : undefined}\n          formAction=\"none\"\n          onClick={onUploadButtonClick}\n          className={clsx(styles['file-input-button'], {\n            [styles['force-focus-outline-button']]: isFocused && variant === 'button',\n            [styles['force-focus-outline-icon']]: isFocused && variant === 'icon',\n          })}\n          __nativeAttributes={{ tabIndex: -1, 'aria-hidden': true }}\n        >\n          {variant === 'button' && children}\n        </InternalButton>\n\n        {/* The file input needs to be labelled with provided content. Can't use the button because it is ARIA-hidden. */}\n        <ScreenreaderOnly id={uploadButtonLabelId}>{ariaLabel || children}</ScreenreaderOnly>\n      </div>\n    );\n  }\n);\n\nexport default InternalFileInput;\n"]}

package/lib/internal/template/file-input/styles.css.js

@@ -1,10 +1,11 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_1wp4s_tjfs1_181",
-  "file-input": "awsui_file-input_1wp4s_tjfs1_182",
-  "hidden": "awsui_hidden_1wp4s_tjfs1_186",
-  "file-input-button": "awsui_file-input-button_1wp4s_tjfs1_192",
-  "force-focus-outline": "awsui_force-focus-outline_1wp4s_tjfs1_192"
+  "root": "awsui_root_1wp4s_1d730_185",
+  "file-input": "awsui_file-input_1wp4s_1d730_186",
+  "hidden": "awsui_hidden_1wp4s_1d730_190",
+  "file-input-button": "awsui_file-input-button_1wp4s_1d730_196",
+  "force-focus-outline-icon": "awsui_force-focus-outline-icon_1wp4s_1d730_196",
+  "force-focus-outline-button": "awsui_force-focus-outline-button_1wp4s_1d730_217"
 };
   

package/lib/internal/template/file-input/styles.scoped.css

@@ -134,12 +134,16 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
+/* 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 */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-/* 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 */
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
@@ -178,25 +182,46 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_1wp4s_tjfs1_181:not(#\9),
-.awsui_file-input_1wp4s_tjfs1_182:not(#\9) {
+.awsui_root_1wp4s_1d730_185:not(#\9),
+.awsui_file-input_1wp4s_1d730_186:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_hidden_1wp4s_tjfs1_186:not(#\9) {
+.awsui_hidden_1wp4s_1d730_190:not(#\9) {
   position: absolute !important;
   inset-block-start: -9999px !important;
   inset-inline-start: -9999px !important;
 }
 
-body[data-awsui-focus-visible=true] .awsui_file-input-button_1wp4s_tjfs1_192.awsui_force-focus-outline_1wp4s_tjfs1_192:not(#\9) {
+body[data-awsui-focus-visible=true] .awsui_file-input-button_1wp4s_1d730_196.awsui_force-focus-outline-icon_1wp4s_1d730_196:not(#\9) {
+  position: relative;
+}
+body[data-awsui-focus-visible=true] .awsui_file-input-button_1wp4s_1d730_196.awsui_force-focus-outline-icon_1wp4s_1d730_196:not(#\9) {
+  outline: 2px dotted transparent;
+  outline-offset: calc(var(--space-button-focus-outline-gutter-90p0io, 3px) - 1px);
+}
+body[data-awsui-focus-visible=true] .awsui_file-input-button_1wp4s_1d730_196.awsui_force-focus-outline-icon_1wp4s_1d730_196:not(#\9)::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * var(--space-button-focus-outline-gutter-90p0io, 3px));
+  inset-block-start: calc(-1 * var(--space-button-icon-focus-outline-gutter-vertical-sxe0wn, 3px));
+  inline-size: calc(100% + var(--space-button-focus-outline-gutter-90p0io, 3px) + var(--space-button-focus-outline-gutter-90p0io, 3px));
+  block-size: calc(100% + var(--space-button-icon-focus-outline-gutter-vertical-sxe0wn, 3px) + var(--space-button-icon-focus-outline-gutter-vertical-sxe0wn, 3px));
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-vy2hlh, 2px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-vy2hlh, 2px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-vy2hlh, 2px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-vy2hlh, 2px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-q68bgg, #0073bb);
+}
+body[data-awsui-focus-visible=true] .awsui_file-input-button_1wp4s_1d730_196.awsui_force-focus-outline-button_1wp4s_1d730_217:not(#\9) {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_file-input-button_1wp4s_tjfs1_192.awsui_force-focus-outline_1wp4s_tjfs1_192:not(#\9) {
+body[data-awsui-focus-visible=true] .awsui_file-input-button_1wp4s_1d730_196.awsui_force-focus-outline-button_1wp4s_1d730_217:not(#\9) {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-button-focus-outline-gutter-90p0io, 3px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_file-input-button_1wp4s_tjfs1_192.awsui_force-focus-outline_1wp4s_tjfs1_192:not(#\9)::before {
+body[data-awsui-focus-visible=true] .awsui_file-input-button_1wp4s_1d730_196.awsui_force-focus-outline-button_1wp4s_1d730_217:not(#\9)::before {
   content: " ";
   display: block;
   position: absolute;

package/lib/internal/template/file-input/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_1wp4s_tjfs1_181",
-  "file-input": "awsui_file-input_1wp4s_tjfs1_182",
-  "hidden": "awsui_hidden_1wp4s_tjfs1_186",
-  "file-input-button": "awsui_file-input-button_1wp4s_tjfs1_192",
-  "force-focus-outline": "awsui_force-focus-outline_1wp4s_tjfs1_192"
+  "root": "awsui_root_1wp4s_1d730_185",
+  "file-input": "awsui_file-input_1wp4s_1d730_186",
+  "hidden": "awsui_hidden_1wp4s_1d730_190",
+  "file-input-button": "awsui_file-input-button_1wp4s_1d730_196",
+  "force-focus-outline-icon": "awsui_force-focus-outline-icon_1wp4s_1d730_196",
+  "force-focus-outline-button": "awsui_force-focus-outline-button_1wp4s_1d730_217"
 };
   

package/lib/internal/template/file-token-group/styles.css.js

@@ -1,27 +1,27 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_39ths_9leme_205",
-  "file-loading-overlay": "awsui_file-loading-overlay_39ths_9leme_237",
-  "file-loading-overlay-single-row": "awsui_file-loading-overlay-single-row_39ths_9leme_242",
-  "file-option-name": "awsui_file-option-name_39ths_9leme_246",
-  "file-option-size": "awsui_file-option-size_39ths_9leme_247",
-  "file-option-last-modified": "awsui_file-option-last-modified_39ths_9leme_248",
-  "file-option": "awsui_file-option_39ths_9leme_246",
-  "file-option-thumbnail": "awsui_file-option-thumbnail_39ths_9leme_261",
-  "file-option-thumbnail-image": "awsui_file-option-thumbnail-image_39ths_9leme_265",
-  "file-option-metadata": "awsui_file-option-metadata_39ths_9leme_278",
-  "with-image": "awsui_with-image_39ths_9leme_281",
-  "single-row-loading": "awsui_single-row-loading_39ths_9leme_284",
-  "token": "awsui_token_39ths_9leme_288",
-  "token-grid": "awsui_token-grid_39ths_9leme_295",
-  "token-contains-image": "awsui_token-contains-image_39ths_9leme_304",
-  "token-box": "awsui_token-box_39ths_9leme_308",
-  "horizontal": "awsui_horizontal_39ths_9leme_327",
-  "error": "awsui_error_39ths_9leme_335",
-  "dismiss-button": "awsui_dismiss-button_39ths_9leme_339",
-  "warning": "awsui_warning_39ths_9leme_345",
-  "read-only": "awsui_read-only_39ths_9leme_355",
-  "loading": "awsui_loading_39ths_9leme_368"
+  "root": "awsui_root_39ths_1seya_209",
+  "file-loading-overlay": "awsui_file-loading-overlay_39ths_1seya_241",
+  "file-loading-overlay-single-row": "awsui_file-loading-overlay-single-row_39ths_1seya_246",
+  "file-option-name": "awsui_file-option-name_39ths_1seya_250",
+  "file-option-size": "awsui_file-option-size_39ths_1seya_251",
+  "file-option-last-modified": "awsui_file-option-last-modified_39ths_1seya_252",
+  "file-option": "awsui_file-option_39ths_1seya_250",
+  "file-option-thumbnail": "awsui_file-option-thumbnail_39ths_1seya_265",
+  "file-option-thumbnail-image": "awsui_file-option-thumbnail-image_39ths_1seya_269",
+  "file-option-metadata": "awsui_file-option-metadata_39ths_1seya_282",
+  "with-image": "awsui_with-image_39ths_1seya_285",
+  "single-row-loading": "awsui_single-row-loading_39ths_1seya_288",
+  "token": "awsui_token_39ths_1seya_292",
+  "token-grid": "awsui_token-grid_39ths_1seya_299",
+  "token-contains-image": "awsui_token-contains-image_39ths_1seya_308",
+  "token-box": "awsui_token-box_39ths_1seya_312",
+  "horizontal": "awsui_horizontal_39ths_1seya_331",
+  "error": "awsui_error_39ths_1seya_339",
+  "dismiss-button": "awsui_dismiss-button_39ths_1seya_343",
+  "warning": "awsui_warning_39ths_1seya_349",
+  "read-only": "awsui_read-only_39ths_1seya_359",
+  "loading": "awsui_loading_39ths_1seya_372"
 };
   

package/lib/internal/template/file-token-group/styles.scoped.css

@@ -134,12 +134,16 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
+/* 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 */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-/* 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 */
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
@@ -202,7 +206,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_39ths_9leme_205:not(#\9) {
+.awsui_root_39ths_1seya_209:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -235,35 +239,35 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -moz-osx-font-smoothing: auto;
 }
 
-.awsui_file-loading-overlay_39ths_9leme_237:not(#\9) {
+.awsui_file-loading-overlay_39ths_1seya_241:not(#\9) {
   position: absolute;
   inset-inline-end: var(--space-static-xs-fwcjew, 8px);
   inset-block-end: var(--space-static-xxs-9qxzo2, 4px);
 }
-.awsui_file-loading-overlay-single-row_39ths_9leme_242:not(#\9) {
+.awsui_file-loading-overlay-single-row_39ths_1seya_246:not(#\9) {
   inset-inline-end: var(--space-static-xxl-ybu58c, 32px);
 }
 
-.awsui_file-option-name_39ths_9leme_246:not(#\9),
-.awsui_file-option-size_39ths_9leme_247:not(#\9),
-.awsui_file-option-last-modified_39ths_9leme_248:not(#\9) {
+.awsui_file-option-name_39ths_1seya_250:not(#\9),
+.awsui_file-option-size_39ths_1seya_251:not(#\9),
+.awsui_file-option-last-modified_39ths_1seya_252:not(#\9) {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 }
 
-.awsui_file-option_39ths_9leme_246:not(#\9) {
+.awsui_file-option_39ths_1seya_250:not(#\9) {
   inline-size: 100%;
   min-inline-size: 0;
   display: flex;
   gap: var(--space-scaled-xs-t3am3w, 8px);
 }
 
-.awsui_file-option-thumbnail_39ths_9leme_261:not(#\9) {
+.awsui_file-option-thumbnail_39ths_1seya_265:not(#\9) {
   margin-block-start: var(--space-static-xxs-9qxzo2, 4px);
 }
 
-.awsui_file-option-thumbnail-image_39ths_9leme_265:not(#\9) {
+.awsui_file-option-thumbnail-image_39ths_1seya_269:not(#\9) {
   font-size: var(--font-size-body-s-4dzx5q, 12px);
   line-height: var(--line-height-body-s-egzl4q, 16px);
   letter-spacing: var(--letter-spacing-body-s-cbaxyl, normal);
@@ -276,37 +280,37 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   overflow: hidden;
 }
 
-.awsui_file-option-metadata_39ths_9leme_278:not(#\9) {
+.awsui_file-option-metadata_39ths_1seya_282:not(#\9) {
   inline-size: 100%;
 }
-.awsui_file-option-metadata_39ths_9leme_278.awsui_with-image_39ths_9leme_281:not(#\9) {
+.awsui_file-option-metadata_39ths_1seya_282.awsui_with-image_39ths_1seya_285:not(#\9) {
   inline-size: calc(100% - 48px);
 }
-.awsui_file-option-metadata_39ths_9leme_278.awsui_single-row-loading_39ths_9leme_284:not(#\9) {
+.awsui_file-option-metadata_39ths_1seya_282.awsui_single-row-loading_39ths_1seya_288:not(#\9) {
   inline-size: calc(100% - var(--size-icon-normal-19036g, 16px));
 }
 
-.awsui_token_39ths_9leme_288:not(#\9) {
+.awsui_token_39ths_1seya_292:not(#\9) {
   position: relative;
   block-size: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--space-xxs-y2432o, 4px);
 }
-.awsui_token-grid_39ths_9leme_295:not(#\9) {
+.awsui_token-grid_39ths_1seya_299:not(#\9) {
   display: grid;
   grid-template-rows: max-content auto;
 }
 @media (max-width: 688px) {
-  .awsui_token-grid_39ths_9leme_295:not(#\9) {
+  .awsui_token-grid_39ths_1seya_299:not(#\9) {
     display: flex;
   }
 }
-.awsui_token-contains-image_39ths_9leme_304:not(#\9) {
+.awsui_token-contains-image_39ths_1seya_308:not(#\9) {
   grid-template-rows: 68px auto;
 }
 
-.awsui_token-box_39ths_9leme_308:not(#\9) {
+.awsui_token-box_39ths_1seya_312:not(#\9) {
   position: relative;
   block-size: 100%;
   border-block: var(--border-width-field-9kmoac, 1px) solid var(--color-border-item-selected-aam4fo, #0073bb);
@@ -325,48 +329,48 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   color: var(--color-text-body-default-agk00h, #16191f);
   box-sizing: border-box;
 }
-.awsui_token-box_39ths_9leme_308.awsui_horizontal_39ths_9leme_327:not(#\9) {
+.awsui_token-box_39ths_1seya_312.awsui_horizontal_39ths_1seya_331:not(#\9) {
   max-inline-size: 230px;
 }
 @media (max-width: 688px) {
-  .awsui_token-box_39ths_9leme_308.awsui_horizontal_39ths_9leme_327:not(#\9) {
+  .awsui_token-box_39ths_1seya_312.awsui_horizontal_39ths_1seya_331:not(#\9) {
     max-inline-size: 100%;
   }
 }
-.awsui_token-box_39ths_9leme_308.awsui_error_39ths_9leme_335:not(#\9) {
+.awsui_token-box_39ths_1seya_312.awsui_error_39ths_1seya_339:not(#\9) {
   border-color: var(--color-border-status-error-5n723o, #d13212);
   border-inline-start-width: var(--border-invalid-width-bkxihb, 4px);
 }
-.awsui_token-box_39ths_9leme_308.awsui_error_39ths_9leme_335 > .awsui_dismiss-button_39ths_9leme_339:not(#\9) {
+.awsui_token-box_39ths_1seya_312.awsui_error_39ths_1seya_339 > .awsui_dismiss-button_39ths_1seya_343:not(#\9) {
   color: var(--color-text-interactive-default-t1snbz, #545b64);
 }
-.awsui_token-box_39ths_9leme_308.awsui_error_39ths_9leme_335 > .awsui_dismiss-button_39ths_9leme_339:not(#\9):hover {
+.awsui_token-box_39ths_1seya_312.awsui_error_39ths_1seya_339 > .awsui_dismiss-button_39ths_1seya_343:not(#\9):hover {
   color: var(--color-text-interactive-hover-kxltdh, #16191f);
 }
-.awsui_token-box_39ths_9leme_308.awsui_warning_39ths_9leme_345:not(#\9) {
+.awsui_token-box_39ths_1seya_312.awsui_warning_39ths_1seya_349:not(#\9) {
   border-color: var(--color-border-status-warning-wkps52, #906806);
   border-inline-start-width: var(--border-invalid-width-bkxihb, 4px);
 }
-.awsui_token-box_39ths_9leme_308.awsui_warning_39ths_9leme_345 > .awsui_dismiss-button_39ths_9leme_339:not(#\9) {
+.awsui_token-box_39ths_1seya_312.awsui_warning_39ths_1seya_349 > .awsui_dismiss-button_39ths_1seya_343:not(#\9) {
   color: var(--color-text-interactive-default-t1snbz, #545b64);
 }
-.awsui_token-box_39ths_9leme_308.awsui_warning_39ths_9leme_345 > .awsui_dismiss-button_39ths_9leme_339:not(#\9):hover {
+.awsui_token-box_39ths_1seya_312.awsui_warning_39ths_1seya_349 > .awsui_dismiss-button_39ths_1seya_343:not(#\9):hover {
   color: var(--color-text-interactive-hover-kxltdh, #16191f);
 }
-.awsui_token-box_39ths_9leme_308.awsui_read-only_39ths_9leme_355:not(#\9) {
+.awsui_token-box_39ths_1seya_312.awsui_read-only_39ths_1seya_359:not(#\9) {
   border-color: var(--color-border-input-disabled-vjmitr, #eaeded);
   background-color: var(--color-background-container-content-myy7cn, #ffffff);
   pointer-events: none;
 }
-.awsui_token-box_39ths_9leme_308.awsui_read-only_39ths_9leme_355 > .awsui_dismiss-button_39ths_9leme_339:not(#\9) {
+.awsui_token-box_39ths_1seya_312.awsui_read-only_39ths_1seya_359 > .awsui_dismiss-button_39ths_1seya_343:not(#\9) {
   color: var(--color-text-button-inline-icon-disabled-pdpnjk, #aab7b8);
 }
-.awsui_token-box_39ths_9leme_308.awsui_read-only_39ths_9leme_355 > .awsui_dismiss-button_39ths_9leme_339:not(#\9):hover {
+.awsui_token-box_39ths_1seya_312.awsui_read-only_39ths_1seya_359 > .awsui_dismiss-button_39ths_1seya_343:not(#\9):hover {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   cursor: initial;
   color: var(--color-text-button-inline-icon-disabled-pdpnjk, #aab7b8);
 }
-.awsui_token-box_39ths_9leme_308.awsui_loading_39ths_9leme_368:not(#\9) {
+.awsui_token-box_39ths_1seya_312.awsui_loading_39ths_1seya_372:not(#\9) {
   border-color: var(--color-border-control-disabled-7jgofv, #d5dbdb);
   background-color: var(--color-background-container-content-myy7cn, #ffffff);
 }

package/lib/internal/template/file-token-group/styles.selectors.js

@@ -2,27 +2,27 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_39ths_9leme_205",
-  "file-loading-overlay": "awsui_file-loading-overlay_39ths_9leme_237",
-  "file-loading-overlay-single-row": "awsui_file-loading-overlay-single-row_39ths_9leme_242",
-  "file-option-name": "awsui_file-option-name_39ths_9leme_246",
-  "file-option-size": "awsui_file-option-size_39ths_9leme_247",
-  "file-option-last-modified": "awsui_file-option-last-modified_39ths_9leme_248",
-  "file-option": "awsui_file-option_39ths_9leme_246",
-  "file-option-thumbnail": "awsui_file-option-thumbnail_39ths_9leme_261",
-  "file-option-thumbnail-image": "awsui_file-option-thumbnail-image_39ths_9leme_265",
-  "file-option-metadata": "awsui_file-option-metadata_39ths_9leme_278",
-  "with-image": "awsui_with-image_39ths_9leme_281",
-  "single-row-loading": "awsui_single-row-loading_39ths_9leme_284",
-  "token": "awsui_token_39ths_9leme_288",
-  "token-grid": "awsui_token-grid_39ths_9leme_295",
-  "token-contains-image": "awsui_token-contains-image_39ths_9leme_304",
-  "token-box": "awsui_token-box_39ths_9leme_308",
-  "horizontal": "awsui_horizontal_39ths_9leme_327",
-  "error": "awsui_error_39ths_9leme_335",
-  "dismiss-button": "awsui_dismiss-button_39ths_9leme_339",
-  "warning": "awsui_warning_39ths_9leme_345",
-  "read-only": "awsui_read-only_39ths_9leme_355",
-  "loading": "awsui_loading_39ths_9leme_368"
+  "root": "awsui_root_39ths_1seya_209",
+  "file-loading-overlay": "awsui_file-loading-overlay_39ths_1seya_241",
+  "file-loading-overlay-single-row": "awsui_file-loading-overlay-single-row_39ths_1seya_246",
+  "file-option-name": "awsui_file-option-name_39ths_1seya_250",
+  "file-option-size": "awsui_file-option-size_39ths_1seya_251",
+  "file-option-last-modified": "awsui_file-option-last-modified_39ths_1seya_252",
+  "file-option": "awsui_file-option_39ths_1seya_250",
+  "file-option-thumbnail": "awsui_file-option-thumbnail_39ths_1seya_265",
+  "file-option-thumbnail-image": "awsui_file-option-thumbnail-image_39ths_1seya_269",
+  "file-option-metadata": "awsui_file-option-metadata_39ths_1seya_282",
+  "with-image": "awsui_with-image_39ths_1seya_285",
+  "single-row-loading": "awsui_single-row-loading_39ths_1seya_288",
+  "token": "awsui_token_39ths_1seya_292",
+  "token-grid": "awsui_token-grid_39ths_1seya_299",
+  "token-contains-image": "awsui_token-contains-image_39ths_1seya_308",
+  "token-box": "awsui_token-box_39ths_1seya_312",
+  "horizontal": "awsui_horizontal_39ths_1seya_331",
+  "error": "awsui_error_39ths_1seya_339",
+  "dismiss-button": "awsui_dismiss-button_39ths_1seya_343",
+  "warning": "awsui_warning_39ths_1seya_349",
+  "read-only": "awsui_read-only_39ths_1seya_359",
+  "loading": "awsui_loading_39ths_1seya_372"
 };
   

package/lib/internal/template/flashbar/styles.css.js

@@ -1,55 +1,55 @@
 
     import './styles.scoped.css';
     export default {
-  "flash-with-motion": "awsui_flash-with-motion_1q84n_yosmc_153",
-  "enter": "awsui_enter_1q84n_yosmc_153",
-  "flash-body": "awsui_flash-body_1q84n_yosmc_167",
-  "flash-message": "awsui_flash-message_1q84n_yosmc_167",
-  "flash-header": "awsui_flash-header_1q84n_yosmc_167",
-  "flash-content": "awsui_flash-content_1q84n_yosmc_168",
-  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_yosmc_169",
-  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_yosmc_170",
-  "flash-icon": "awsui_flash-icon_1q84n_yosmc_193",
-  "entering": "awsui_entering_1q84n_yosmc_206",
-  "entered": "awsui_entered_1q84n_yosmc_227",
-  "exiting": "awsui_exiting_1q84n_yosmc_332",
-  "stack": "awsui_stack_1q84n_yosmc_366",
-  "animation-running": "awsui_animation-running_1q84n_yosmc_366",
-  "item": "awsui_item_1q84n_yosmc_366",
-  "flash-list-item": "awsui_flash-list-item_1q84n_yosmc_367",
-  "notification-bar": "awsui_notification-bar_1q84n_yosmc_368",
-  "collapsed": "awsui_collapsed_1q84n_yosmc_388",
-  "animation-ready": "awsui_animation-ready_1q84n_yosmc_388",
-  "expanded-only": "awsui_expanded-only_1q84n_yosmc_388",
-  "expanded": "awsui_expanded_1q84n_yosmc_388",
-  "flash": "awsui_flash_1q84n_yosmc_153",
-  "collapsible": "awsui_collapsible_1q84n_yosmc_444",
-  "short-list": "awsui_short-list_1q84n_yosmc_450",
-  "visual-refresh": "awsui_visual-refresh_1q84n_yosmc_450",
-  "status": "awsui_status_1q84n_yosmc_597",
-  "header": "awsui_header_1q84n_yosmc_597",
-  "item-count": "awsui_item-count_1q84n_yosmc_598",
-  "button": "awsui_button_1q84n_yosmc_599",
-  "type-count": "awsui_type-count_1q84n_yosmc_632",
-  "count-number": "awsui_count-number_1q84n_yosmc_632",
-  "icon": "awsui_icon_1q84n_yosmc_666",
-  "floating": "awsui_floating_1q84n_yosmc_707",
-  "flashbar": "awsui_flashbar_1q84n_yosmc_711",
-  "initial-hidden": "awsui_initial-hidden_1q84n_yosmc_769",
-  "flash-list": "awsui_flash-list_1q84n_yosmc_367",
-  "flash-focus-container": "awsui_flash-focus-container_1q84n_yosmc_791",
-  "flash-text": "awsui_flash-text_1q84n_yosmc_821",
-  "hidden": "awsui_hidden_1q84n_yosmc_840",
-  "header-replacement": "awsui_header-replacement_1q84n_yosmc_845",
-  "content-replacement": "awsui_content-replacement_1q84n_yosmc_850",
-  "dismiss-button": "awsui_dismiss-button_1q84n_yosmc_170",
-  "breakpoint-default": "awsui_breakpoint-default_1q84n_yosmc_869",
-  "action-button": "awsui_action-button_1q84n_yosmc_169",
-  "action-slot": "awsui_action-slot_1q84n_yosmc_879",
-  "flash-type-success": "awsui_flash-type-success_1q84n_yosmc_883",
-  "flash-type-error": "awsui_flash-type-error_1q84n_yosmc_887",
-  "flash-type-info": "awsui_flash-type-info_1q84n_yosmc_891",
-  "flash-type-in-progress": "awsui_flash-type-in-progress_1q84n_yosmc_892",
-  "flash-type-warning": "awsui_flash-type-warning_1q84n_yosmc_896"
+  "flash-with-motion": "awsui_flash-with-motion_1q84n_lf2ag_157",
+  "enter": "awsui_enter_1q84n_lf2ag_157",
+  "flash-body": "awsui_flash-body_1q84n_lf2ag_171",
+  "flash-message": "awsui_flash-message_1q84n_lf2ag_171",
+  "flash-header": "awsui_flash-header_1q84n_lf2ag_171",
+  "flash-content": "awsui_flash-content_1q84n_lf2ag_172",
+  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_lf2ag_173",
+  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_lf2ag_174",
+  "flash-icon": "awsui_flash-icon_1q84n_lf2ag_197",
+  "entering": "awsui_entering_1q84n_lf2ag_210",
+  "entered": "awsui_entered_1q84n_lf2ag_231",
+  "exiting": "awsui_exiting_1q84n_lf2ag_336",
+  "stack": "awsui_stack_1q84n_lf2ag_370",
+  "animation-running": "awsui_animation-running_1q84n_lf2ag_370",
+  "item": "awsui_item_1q84n_lf2ag_370",
+  "flash-list-item": "awsui_flash-list-item_1q84n_lf2ag_371",
+  "notification-bar": "awsui_notification-bar_1q84n_lf2ag_372",
+  "collapsed": "awsui_collapsed_1q84n_lf2ag_392",
+  "animation-ready": "awsui_animation-ready_1q84n_lf2ag_392",
+  "expanded-only": "awsui_expanded-only_1q84n_lf2ag_392",
+  "expanded": "awsui_expanded_1q84n_lf2ag_392",
+  "flash": "awsui_flash_1q84n_lf2ag_157",
+  "collapsible": "awsui_collapsible_1q84n_lf2ag_448",
+  "short-list": "awsui_short-list_1q84n_lf2ag_454",
+  "visual-refresh": "awsui_visual-refresh_1q84n_lf2ag_454",
+  "status": "awsui_status_1q84n_lf2ag_601",
+  "header": "awsui_header_1q84n_lf2ag_601",
+  "item-count": "awsui_item-count_1q84n_lf2ag_602",
+  "button": "awsui_button_1q84n_lf2ag_603",
+  "type-count": "awsui_type-count_1q84n_lf2ag_636",
+  "count-number": "awsui_count-number_1q84n_lf2ag_636",
+  "icon": "awsui_icon_1q84n_lf2ag_670",
+  "floating": "awsui_floating_1q84n_lf2ag_711",
+  "flashbar": "awsui_flashbar_1q84n_lf2ag_715",
+  "initial-hidden": "awsui_initial-hidden_1q84n_lf2ag_773",
+  "flash-list": "awsui_flash-list_1q84n_lf2ag_371",
+  "flash-focus-container": "awsui_flash-focus-container_1q84n_lf2ag_795",
+  "flash-text": "awsui_flash-text_1q84n_lf2ag_825",
+  "hidden": "awsui_hidden_1q84n_lf2ag_844",
+  "header-replacement": "awsui_header-replacement_1q84n_lf2ag_849",
+  "content-replacement": "awsui_content-replacement_1q84n_lf2ag_854",
+  "dismiss-button": "awsui_dismiss-button_1q84n_lf2ag_174",
+  "breakpoint-default": "awsui_breakpoint-default_1q84n_lf2ag_873",
+  "action-button": "awsui_action-button_1q84n_lf2ag_173",
+  "action-slot": "awsui_action-slot_1q84n_lf2ag_883",
+  "flash-type-success": "awsui_flash-type-success_1q84n_lf2ag_887",
+  "flash-type-error": "awsui_flash-type-error_1q84n_lf2ag_891",
+  "flash-type-info": "awsui_flash-type-info_1q84n_lf2ag_895",
+  "flash-type-in-progress": "awsui_flash-type-in-progress_1q84n_lf2ag_896",
+  "flash-type-warning": "awsui_flash-type-warning_1q84n_lf2ag_900"
 };