@cloudscape-design/components-themeable 3.0.1344 → 3.0.1346

package/lib/internal/template/expandable-section/internal.js

@@ -1,21 +1,23 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useCallback, useRef } from 'react';
-import { CSSTransition } from 'react-transition-group';
+import React, { useCallback, useEffect, useRef } from 'react';
 import clsx from 'clsx';
 import { useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 import { getBaseProps } from '../internal/base-component';
 import { screenReaderTextClass } from '../internal/components/chart-series-details/series-details-text';
+import { Transition } from '../internal/components/transition';
 import { fireNonCancelableEvent } from '../internal/events';
 import { useControllable } from '../internal/hooks/use-controllable';
+import { useOneTheme } from '../internal/hooks/use-visual-mode';
 import { KeyCode } from '../internal/keycode';
 import { ExpandableSectionContainer } from './expandable-section-container';
 import { ExpandableSectionHeader } from './expandable-section-header';
 import { variantSupportsDescription } from './utils';
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
-export default function InternalExpandableSection({ expanded: controlledExpanded, defaultExpanded, onChange, variant = 'default', children, header, headerText, headerCounter, headerDescription, headerInfo, headerActions, headingTagOverride, disableContentPaddings, headerAriaLabel, __internalRootRef, __injectAnalyticsComponentMetadata, __expandIconPosition = 'start', __disableHeaderPaddings = false, ...props }) {
-    const ref = useRef(null);
+export default function InternalExpandableSection({ expanded: controlledExpanded, defaultExpanded, onChange, variant = 'default', children, header, headerText, headerCounter, headerDescription, headerInfo, headerActions, headingTagOverride, disableContentPaddings, headerAriaLabel, __internalRootRef, __injectAnalyticsComponentMetadata, __expandIconPosition = 'start', __disableHeaderPaddings = false, __hideExpandIcon = false, ...props }) {
+    const contentInnerRef = useRef(null);
+    const isOneTheme = useOneTheme();
     const controlId = useUniqueId();
     const triggerControlId = `${controlId}-trigger`;
     const descriptionId = `${controlId}-description`;
@@ -25,9 +27,9 @@ export default function InternalExpandableSection({ expanded: controlledExpanded
         controlledProp: 'expanded',
         changeHandler: 'onChange',
     });
-    const onExpandChange = useCallback((expanded) => {
-        setExpanded(expanded);
-        fireNonCancelableEvent(onChange, { expanded });
+    const onExpandChange = useCallback((newExpanded) => {
+        setExpanded(newExpanded);
+        fireNonCancelableEvent(onChange, { expanded: newExpanded });
     }, [onChange, setExpanded]);
     const onClick = useCallback(() => {
         onExpandChange(!expanded);
@@ -44,6 +46,14 @@ export default function InternalExpandableSection({ expanded: controlledExpanded
             event.preventDefault();
         }
     }, []);
+    // Set inert on collapsed content to block pointer/focus events and hide from
+    // assistive technology. Direct DOM manipulation needed until React supports
+    // the inert attribute natively. https://github.com/facebook/react/issues/17157
+    useEffect(() => {
+        if (contentInnerRef.current) {
+            contentInnerRef.current.inert = !expanded;
+        }
+    }, [expanded]);
     const triggerProps = {
         ariaControls: controlId,
         ariaLabel: headerAriaLabel,
@@ -54,8 +64,12 @@ export default function InternalExpandableSection({ expanded: controlledExpanded
     };
     // Map stacked variant to container to avoid code duplication
     const baseVariant = variant === 'stacked' ? 'container' : variant;
-    return (React.createElement(ExpandableSectionContainer, { ...props, expanded: expanded, className: clsx(baseProps.className, styles.root, analyticsSelectors.root), variant: variant, disableContentPaddings: disableContentPaddings, __injectAnalyticsComponentMetadata: __injectAnalyticsComponentMetadata, header: React.createElement(ExpandableSectionHeader, { id: triggerControlId, descriptionId: descriptionId, className: clsx(styles.header, styles[`header-${baseVariant}`], screenReaderTextClass, __disableHeaderPaddings && styles['disable-header-paddings']), variant: baseVariant, expanded: !!expanded, header: header, headerText: headerText, headerDescription: headerDescription, headerCounter: headerCounter, headerInfo: headerInfo, headerActions: headerActions, headingTagOverride: headingTagOverride, expandIconPosition: __expandIconPosition, ...triggerProps }), __internalRootRef: __internalRootRef },
-        React.createElement(CSSTransition, { in: expanded, timeout: 30, classNames: { enter: styles['content-enter'] }, nodeRef: ref },
-            React.createElement("div", { id: controlId, ref: ref, className: clsx(styles.content, styles[`content-${baseVariant}`], expanded && styles['content-expanded'], disableContentPaddings && styles['disable-content-paddings']), role: "group", "aria-label": triggerProps.ariaLabel, "aria-labelledby": triggerProps.ariaLabelledBy, "aria-describedby": variantSupportsDescription(baseVariant) && headerDescription ? descriptionId : undefined }, children))));
+    return (React.createElement(ExpandableSectionContainer, { ...props, expanded: expanded, className: clsx(baseProps.className, styles.root, analyticsSelectors.root), variant: variant, __injectAnalyticsComponentMetadata: __injectAnalyticsComponentMetadata, header: React.createElement(ExpandableSectionHeader, { id: triggerControlId, descriptionId: descriptionId, className: clsx(styles.header, styles[`header-${baseVariant}`], screenReaderTextClass, __disableHeaderPaddings && styles['disable-header-paddings']), variant: baseVariant, expanded: !!expanded, header: header, headerText: headerText, headerDescription: headerDescription, headerCounter: headerCounter, headerInfo: headerInfo, headerActions: headerActions, headingTagOverride: headingTagOverride, expandIconPosition: __expandIconPosition, hideExpandIcon: __hideExpandIcon, ...triggerProps }), __internalRootRef: __internalRootRef },
+        React.createElement(Transition, { in: !!expanded, disabled: !isOneTheme }, (transitionState, transitionEventsRef, motionDisabled) => {
+            const contentSettled = !!expanded && (motionDisabled || transitionState === 'entered');
+            return (React.createElement("div", { ref: transitionEventsRef, id: controlId, className: clsx(styles.content, styles[`content-${baseVariant}`], expanded && styles['content-expanded'], disableContentPaddings && styles['disable-content-paddings']), role: "group", "aria-label": triggerProps.ariaLabel, "aria-labelledby": triggerProps.ariaLabelledBy, "aria-describedby": variantSupportsDescription(baseVariant) && headerDescription ? descriptionId : undefined },
+                React.createElement("div", { ref: contentInnerRef, className: clsx(styles['content-inner'], expanded && styles['content-inner-expanded'], contentSettled && styles['content-inner-settled']) },
+                    React.createElement("div", { className: clsx(styles['content-inner-body'], styles[`content-inner-body-${baseVariant}`], disableContentPaddings && styles['disable-content-paddings']) }, children))));
+        })));
 }
 //# sourceMappingURL=internal.js.map

package/lib/internal/template/expandable-section/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/expandable-section/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 React, { KeyboardEvent, useCallback, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { screenReaderTextClass } from '../internal/components/chart-series-details/series-details-text';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { KeyCode } from '../internal/keycode';\nimport { ExpandableSectionContainer } from './expandable-section-container';\nimport { ExpandableSectionHeader } from './expandable-section-header';\nimport { ExpandableSectionProps } from './interfaces';\nimport { InternalVariant } from './internal-interfaces';\nimport { variantSupportsDescription } from './utils';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport type InternalExpandableSectionProps = Omit<ExpandableSectionProps, 'variant'> &\n  InternalBaseComponentProps & {\n    variant?: InternalVariant;\n    __injectAnalyticsComponentMetadata?: boolean;\n    /**\n     * Controls placement of the expand/collapse icon relative to the header content.\n     * Defaults to 'start'. When set to 'end', the icon is rendered after the header\n     * content and pushed to the inline-end of a full-width header.\n     */\n    __expandIconPosition?: 'start' | 'end';\n    /**\n     * Removes default padding from the header wrapper and content wrapper.\n     * Used by side-navigation to zero out expandable-section's own padding so the\n     * parent can control spacing directly, eliminating brittle cross-component\n     * positional selectors.\n     */\n    __disableHeaderPaddings?: boolean;\n  };\n\nexport default function InternalExpandableSection({\n  expanded: controlledExpanded,\n  defaultExpanded,\n  onChange,\n  variant = 'default',\n  children,\n  header,\n  headerText,\n  headerCounter,\n  headerDescription,\n  headerInfo,\n  headerActions,\n  headingTagOverride,\n  disableContentPaddings,\n  headerAriaLabel,\n  __internalRootRef,\n  __injectAnalyticsComponentMetadata,\n  __expandIconPosition = 'start',\n  __disableHeaderPaddings = false,\n  ...props\n}: InternalExpandableSectionProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const controlId = useUniqueId();\n  const triggerControlId = `${controlId}-trigger`;\n  const descriptionId = `${controlId}-description`;\n\n  const baseProps = getBaseProps(props);\n  const [expanded, setExpanded] = useControllable(controlledExpanded, onChange, defaultExpanded, {\n    componentName: 'ExpandableSection',\n    controlledProp: 'expanded',\n    changeHandler: 'onChange',\n  });\n\n  const onExpandChange = useCallback(\n    (expanded: boolean) => {\n      setExpanded(expanded);\n      fireNonCancelableEvent(onChange, { expanded });\n    },\n    [onChange, setExpanded]\n  );\n\n  const onClick = useCallback(() => {\n    onExpandChange(!expanded);\n  }, [onExpandChange, expanded]);\n\n  const onKeyUp = useCallback(\n    (event: KeyboardEvent<Element>) => {\n      const interactionKeys = [KeyCode.enter, KeyCode.space];\n\n      if (interactionKeys.indexOf(event.keyCode) !== -1) {\n        onExpandChange(!expanded);\n      }\n    },\n    [onExpandChange, expanded]\n  );\n\n  const onKeyDown = useCallback((event: KeyboardEvent<Element>) => {\n    if (event.keyCode === KeyCode.space) {\n      // Prevent the page from scrolling when toggling the component with the space bar.\n      event.preventDefault();\n    }\n  }, []);\n\n  const triggerProps = {\n    ariaControls: controlId,\n    ariaLabel: headerAriaLabel,\n    ariaLabelledBy: headerAriaLabel ? undefined : triggerControlId,\n    onKeyUp,\n    onKeyDown,\n    onClick,\n  };\n\n  // Map stacked variant to container to avoid code duplication\n  const baseVariant: InternalVariant = variant === 'stacked' ? 'container' : variant;\n\n  return (\n    <ExpandableSectionContainer\n      {...props}\n      expanded={expanded}\n      className={clsx(baseProps.className, styles.root, analyticsSelectors.root)}\n      variant={variant}\n      disableContentPaddings={disableContentPaddings}\n      __injectAnalyticsComponentMetadata={__injectAnalyticsComponentMetadata}\n      header={\n        <ExpandableSectionHeader\n          id={triggerControlId}\n          descriptionId={descriptionId}\n          className={clsx(\n            styles.header,\n            styles[`header-${baseVariant}`],\n            screenReaderTextClass,\n            __disableHeaderPaddings && styles['disable-header-paddings']\n          )}\n          variant={baseVariant}\n          expanded={!!expanded}\n          header={header}\n          headerText={headerText}\n          headerDescription={headerDescription}\n          headerCounter={headerCounter}\n          headerInfo={headerInfo}\n          headerActions={headerActions}\n          headingTagOverride={headingTagOverride}\n          expandIconPosition={__expandIconPosition}\n          {...triggerProps}\n        />\n      }\n      __internalRootRef={__internalRootRef}\n    >\n      <CSSTransition in={expanded} timeout={30} classNames={{ enter: styles['content-enter'] }} nodeRef={ref}>\n        <div\n          id={controlId}\n          ref={ref}\n          className={clsx(\n            styles.content,\n            styles[`content-${baseVariant}`],\n            expanded && styles['content-expanded'],\n            disableContentPaddings && styles['disable-content-paddings']\n          )}\n          role=\"group\"\n          aria-label={triggerProps.ariaLabel}\n          aria-labelledby={triggerProps.ariaLabelledBy}\n          aria-describedby={variantSupportsDescription(baseVariant) && headerDescription ? descriptionId : undefined}\n        >\n          {children}\n        </div>\n      </CSSTransition>\n    </ExpandableSectionContainer>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/expandable-section/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 React, { KeyboardEvent, useCallback, useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { screenReaderTextClass } from '../internal/components/chart-series-details/series-details-text';\nimport { Transition } from '../internal/components/transition';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { useOneTheme } from '../internal/hooks/use-visual-mode';\nimport { KeyCode } from '../internal/keycode';\nimport { ExpandableSectionContainer } from './expandable-section-container';\nimport { ExpandableSectionHeader } from './expandable-section-header';\nimport { ExpandableSectionProps } from './interfaces';\nimport { InternalVariant } from './internal-interfaces';\nimport { variantSupportsDescription } from './utils';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport type InternalExpandableSectionProps = Omit<ExpandableSectionProps, 'variant'> &\n  InternalBaseComponentProps & {\n    variant?: InternalVariant;\n    __injectAnalyticsComponentMetadata?: boolean;\n    /**\n     * Controls placement of the expand/collapse icon relative to the header content.\n     * Defaults to 'start'. When set to 'end', the icon is rendered after the header\n     * content and pushed to the inline-end of a full-width header.\n     */\n    __expandIconPosition?: 'start' | 'end';\n    /**\n     * Removes default padding from the header wrapper and content wrapper.\n     * Used by side-navigation to zero out expandable-section's own padding so the\n     * parent can control spacing directly.\n     */\n    __disableHeaderPaddings?: boolean;\n    /**\n     * When true, the expand/collapse icon button is hidden from assistive technology\n     * and removed from the tab order. Used by side-navigation when the nav is collapsed\n     * and the caret is visually clipped but still present in the DOM.\n     */\n    __hideExpandIcon?: boolean;\n  };\n\nexport default function InternalExpandableSection({\n  expanded: controlledExpanded,\n  defaultExpanded,\n  onChange,\n  variant = 'default',\n  children,\n  header,\n  headerText,\n  headerCounter,\n  headerDescription,\n  headerInfo,\n  headerActions,\n  headingTagOverride,\n  disableContentPaddings,\n  headerAriaLabel,\n  __internalRootRef,\n  __injectAnalyticsComponentMetadata,\n  __expandIconPosition = 'start',\n  __disableHeaderPaddings = false,\n  __hideExpandIcon = false,\n  ...props\n}: InternalExpandableSectionProps) {\n  const contentInnerRef = useRef<HTMLDivElement>(null);\n  const isOneTheme = useOneTheme();\n  const controlId = useUniqueId();\n  const triggerControlId = `${controlId}-trigger`;\n  const descriptionId = `${controlId}-description`;\n\n  const baseProps = getBaseProps(props);\n  const [expanded, setExpanded] = useControllable(controlledExpanded, onChange, defaultExpanded, {\n    componentName: 'ExpandableSection',\n    controlledProp: 'expanded',\n    changeHandler: 'onChange',\n  });\n\n  const onExpandChange = useCallback(\n    (newExpanded: boolean) => {\n      setExpanded(newExpanded);\n      fireNonCancelableEvent(onChange, { expanded: newExpanded });\n    },\n    [onChange, setExpanded]\n  );\n\n  const onClick = useCallback(() => {\n    onExpandChange(!expanded);\n  }, [onExpandChange, expanded]);\n\n  const onKeyUp = useCallback(\n    (event: KeyboardEvent<Element>) => {\n      const interactionKeys = [KeyCode.enter, KeyCode.space];\n\n      if (interactionKeys.indexOf(event.keyCode) !== -1) {\n        onExpandChange(!expanded);\n      }\n    },\n    [onExpandChange, expanded]\n  );\n\n  const onKeyDown = useCallback((event: KeyboardEvent<Element>) => {\n    if (event.keyCode === KeyCode.space) {\n      // Prevent the page from scrolling when toggling the component with the space bar.\n      event.preventDefault();\n    }\n  }, []);\n\n  // Set inert on collapsed content to block pointer/focus events and hide from\n  // assistive technology. Direct DOM manipulation needed until React supports\n  // the inert attribute natively. https://github.com/facebook/react/issues/17157\n  useEffect(() => {\n    if (contentInnerRef.current) {\n      contentInnerRef.current.inert = !expanded;\n    }\n  }, [expanded]);\n\n  const triggerProps = {\n    ariaControls: controlId,\n    ariaLabel: headerAriaLabel,\n    ariaLabelledBy: headerAriaLabel ? undefined : triggerControlId,\n    onKeyUp,\n    onKeyDown,\n    onClick,\n  };\n\n  // Map stacked variant to container to avoid code duplication\n  const baseVariant: InternalVariant = variant === 'stacked' ? 'container' : variant;\n\n  return (\n    <ExpandableSectionContainer\n      {...props}\n      expanded={expanded}\n      className={clsx(baseProps.className, styles.root, analyticsSelectors.root)}\n      variant={variant}\n      __injectAnalyticsComponentMetadata={__injectAnalyticsComponentMetadata}\n      header={\n        <ExpandableSectionHeader\n          id={triggerControlId}\n          descriptionId={descriptionId}\n          className={clsx(\n            styles.header,\n            styles[`header-${baseVariant}`],\n            screenReaderTextClass,\n            __disableHeaderPaddings && styles['disable-header-paddings']\n          )}\n          variant={baseVariant}\n          expanded={!!expanded}\n          header={header}\n          headerText={headerText}\n          headerDescription={headerDescription}\n          headerCounter={headerCounter}\n          headerInfo={headerInfo}\n          headerActions={headerActions}\n          headingTagOverride={headingTagOverride}\n          expandIconPosition={__expandIconPosition}\n          hideExpandIcon={__hideExpandIcon}\n          {...triggerProps}\n        />\n      }\n      __internalRootRef={__internalRootRef}\n    >\n      <Transition<HTMLDivElement> in={!!expanded} disabled={!isOneTheme}>\n        {(transitionState, transitionEventsRef, motionDisabled) => {\n          const contentSettled = !!expanded && (motionDisabled || transitionState === 'entered');\n\n          return (\n            <div\n              ref={transitionEventsRef}\n              id={controlId}\n              className={clsx(\n                styles.content,\n                styles[`content-${baseVariant}`],\n                expanded && styles['content-expanded'],\n                disableContentPaddings && styles['disable-content-paddings']\n              )}\n              role=\"group\"\n              aria-label={triggerProps.ariaLabel}\n              aria-labelledby={triggerProps.ariaLabelledBy}\n              aria-describedby={\n                variantSupportsDescription(baseVariant) && headerDescription ? descriptionId : undefined\n              }\n            >\n              <div\n                ref={contentInnerRef}\n                className={clsx(\n                  styles['content-inner'],\n                  expanded && styles['content-inner-expanded'],\n                  contentSettled && styles['content-inner-settled']\n                )}\n              >\n                <div\n                  className={clsx(\n                    styles['content-inner-body'],\n                    styles[`content-inner-body-${baseVariant}`],\n                    disableContentPaddings && styles['disable-content-paddings']\n                  )}\n                >\n                  {children}\n                </div>\n              </div>\n            </div>\n          );\n        }}\n      </Transition>\n    </ExpandableSectionContainer>\n  );\n}\n"]}

package/lib/internal/template/expandable-section/styles.css.js

@@ -1,47 +1,48 @@
 
     import './styles.scoped.css';
     export default {
-  "content-enter": "awsui_content-enter_gwq0h_1vbo0_161",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_1vbo0_1",
-  "trigger-expanded": "awsui_trigger-expanded_gwq0h_1vbo0_183",
-  "icon": "awsui_icon_gwq0h_1vbo0_197",
-  "root": "awsui_root_gwq0h_1vbo0_211",
-  "expand-button": "awsui_expand-button_gwq0h_1vbo0_246",
-  "expanded": "awsui_expanded_gwq0h_1vbo0_254",
-  "icon-container": "awsui_icon-container_gwq0h_1vbo0_264",
-  "icon-container-container": "awsui_icon-container-container_gwq0h_1vbo0_268",
-  "wrapper": "awsui_wrapper_gwq0h_1vbo0_284",
-  "wrapper-default": "awsui_wrapper-default_gwq0h_1vbo0_292",
-  "wrapper-inline": "awsui_wrapper-inline_gwq0h_1vbo0_292",
-  "wrapper-footer": "awsui_wrapper-footer_gwq0h_1vbo0_292",
-  "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_1vbo0_296",
-  "wrapper-container": "awsui_wrapper-container_gwq0h_1vbo0_299",
-  "wrapper-compact": "awsui_wrapper-compact_gwq0h_1vbo0_303",
-  "header-deprecated": "awsui_header-deprecated_gwq0h_1vbo0_316",
-  "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_1vbo0_322",
-  "wrapper-not-expanded-without-actions": "awsui_wrapper-not-expanded-without-actions_gwq0h_1vbo0_345",
-  "header": "awsui_header_gwq0h_1vbo0_316",
-  "header-wrapper": "awsui_header-wrapper_gwq0h_1vbo0_362",
-  "header-actions-wrapper": "awsui_header-actions-wrapper_gwq0h_1vbo0_374",
-  "header-button": "awsui_header-button_gwq0h_1vbo0_382",
-  "header-container-button": "awsui_header-container-button_gwq0h_1vbo0_382",
-  "header-container": "awsui_header-container_gwq0h_1vbo0_382",
-  "header-navigation": "awsui_header-navigation_gwq0h_1vbo0_417",
-  "header-text": "awsui_header-text_gwq0h_1vbo0_454",
-  "content": "awsui_content_gwq0h_1vbo0_161",
-  "content-default": "awsui_content-default_gwq0h_1vbo0_467",
-  "content-inline": "awsui_content-inline_gwq0h_1vbo0_467",
-  "content-footer": "awsui_content-footer_gwq0h_1vbo0_471",
-  "content-expanded": "awsui_content-expanded_gwq0h_1vbo0_475",
-  "content-compact": "awsui_content-compact_gwq0h_1vbo0_478",
-  "disable-header-paddings": "awsui_disable-header-paddings_gwq0h_1vbo0_482",
-  "disable-content-paddings": "awsui_disable-content-paddings_gwq0h_1vbo0_487",
-  "focusable": "awsui_focusable_gwq0h_1vbo0_492",
-  "click-target": "awsui_click-target_gwq0h_1vbo0_507",
-  "header-icon-end": "awsui_header-icon-end_gwq0h_1vbo0_514",
-  "header-button-icon-end": "awsui_header-button-icon-end_gwq0h_1vbo0_531",
-  "icon-container-end": "awsui_icon-container-end_gwq0h_1vbo0_545",
-  "header-content": "awsui_header-content_gwq0h_1vbo0_594",
-  "header-navigation-content": "awsui_header-navigation-content_gwq0h_1vbo0_599"
+  "root": "awsui_root_gwq0h_1qnzk_153",
+  "expand-button": "awsui_expand-button_gwq0h_1qnzk_188",
+  "icon": "awsui_icon_gwq0h_1qnzk_192",
+  "expanded": "awsui_expanded_gwq0h_1qnzk_207",
+  "icon-container": "awsui_icon-container_gwq0h_1qnzk_217",
+  "icon-container-container": "awsui_icon-container-container_gwq0h_1qnzk_221",
+  "wrapper": "awsui_wrapper_gwq0h_1qnzk_237",
+  "wrapper-default": "awsui_wrapper-default_gwq0h_1qnzk_245",
+  "wrapper-inline": "awsui_wrapper-inline_gwq0h_1qnzk_245",
+  "wrapper-footer": "awsui_wrapper-footer_gwq0h_1qnzk_245",
+  "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_1qnzk_249",
+  "wrapper-container": "awsui_wrapper-container_gwq0h_1qnzk_252",
+  "wrapper-compact": "awsui_wrapper-compact_gwq0h_1qnzk_256",
+  "header-deprecated": "awsui_header-deprecated_gwq0h_1qnzk_269",
+  "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_1qnzk_288",
+  "wrapper-not-expanded-without-actions": "awsui_wrapper-not-expanded-without-actions_gwq0h_1qnzk_333",
+  "header": "awsui_header_gwq0h_1qnzk_269",
+  "header-wrapper": "awsui_header-wrapper_gwq0h_1qnzk_350",
+  "header-actions-wrapper": "awsui_header-actions-wrapper_gwq0h_1qnzk_362",
+  "header-button": "awsui_header-button_gwq0h_1qnzk_370",
+  "header-container-button": "awsui_header-container-button_gwq0h_1qnzk_370",
+  "header-container": "awsui_header-container_gwq0h_1qnzk_370",
+  "header-navigation": "awsui_header-navigation_gwq0h_1qnzk_405",
+  "header-text": "awsui_header-text_gwq0h_1qnzk_442",
+  "content": "awsui_content_gwq0h_1qnzk_452",
+  "content-expanded": "awsui_content-expanded_gwq0h_1qnzk_455",
+  "content-compact": "awsui_content-compact_gwq0h_1qnzk_458",
+  "content-inner": "awsui_content-inner_gwq0h_1qnzk_491",
+  "content-inner-expanded": "awsui_content-inner-expanded_gwq0h_1qnzk_508",
+  "content-inner-settled": "awsui_content-inner-settled_gwq0h_1qnzk_522",
+  "content-inner-body-default": "awsui_content-inner-body-default_gwq0h_1qnzk_526",
+  "content-inner-body-inline": "awsui_content-inner-body-inline_gwq0h_1qnzk_526",
+  "content-inner-body-footer": "awsui_content-inner-body-footer_gwq0h_1qnzk_529",
+  "content-inner-body-container": "awsui_content-inner-body-container_gwq0h_1qnzk_532",
+  "disable-header-paddings": "awsui_disable-header-paddings_gwq0h_1qnzk_537",
+  "disable-content-paddings": "awsui_disable-content-paddings_gwq0h_1qnzk_542",
+  "focusable": "awsui_focusable_gwq0h_1qnzk_547",
+  "click-target": "awsui_click-target_gwq0h_1qnzk_562",
+  "header-icon-end": "awsui_header-icon-end_gwq0h_1qnzk_569",
+  "header-button-icon-end": "awsui_header-button-icon-end_gwq0h_1qnzk_586",
+  "icon-container-end": "awsui_icon-container-end_gwq0h_1qnzk_600",
+  "header-content": "awsui_header-content_gwq0h_1qnzk_649",
+  "header-navigation-content": "awsui_header-navigation-content_gwq0h_1qnzk_654"
 };