@cloudscape-design/components 3.0.505 → 3.0.506

package/container/internal.js

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import React, { useEffect, useRef } from 'react';
 import { getBaseProps } from '../internal/base-component';
 import { useAppLayoutContext } from '../internal/context/app-layout-context';
-import { contentHeaderClassName } from '../internal/utils/content-header-utils';
+import { getContentHeaderClassName } from '../internal/utils/content-header-utils';
 import { StickyHeaderContext, useStickyHeader } from './use-sticky-header';
 import { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
@@ -61,7 +61,7 @@ export default function InternalContainer(_a) {
         hasMedia && (React.createElement("div", { className: clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media), style: mediaPosition === 'top' ? { height: (media === null || media === void 0 ? void 0 : media.height) || '' } : { width: (media === null || media === void 0 ? void 0 : media.width) || '' } }, media.content)),
         React.createElement("div", { id: contentId, ref: __subStepRef, className: clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height']) },
             header && (React.createElement(StickyHeaderContext.Provider, { value: { isStuck } },
-                React.createElement("div", Object.assign({ className: clsx(isRefresh && styles.refresh, styles.header, styles[`header-variant-${variant}`], shouldRemoveHighContrastHeader && styles['remove-high-contrast-header'], {
+                React.createElement("div", Object.assign({ className: clsx(isRefresh && styles.refresh, styles.header, styles[`header-variant-${variant}`], shouldRemoveHighContrastHeader() && styles['remove-high-contrast-header'], {
                         [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,
                         [styles['header-sticky-enabled']]: isSticky,
                         [styles['header-dynamic-height']]: hasDynamicHeight,
@@ -69,8 +69,8 @@ export default function InternalContainer(_a) {
                         [styles['with-paddings']]: !disableHeaderPaddings,
                         [styles['with-hidden-content']]: !children || __hiddenContent,
                         [styles['header-with-media']]: hasMedia,
-                    }) }, stickyStyles, { ref: headerMergedRef }), __darkHeader ? (React.createElement("div", { className: clsx(styles['dark-header'], contentHeaderClassName) }, header)) : (header)))),
-            React.createElement("div", { className: clsx(styles.content, fitHeight && styles['content-fit-height'], shouldRemoveHighContrastHeader && styles['remove-high-contrast-header'], {
+                    }) }, stickyStyles, { ref: headerMergedRef }), __darkHeader ? (React.createElement("div", { className: clsx(styles['dark-header'], getContentHeaderClassName()) }, header)) : (header)))),
+            React.createElement("div", { className: clsx(styles.content, fitHeight && styles['content-fit-height'], shouldRemoveHighContrastHeader() && styles['remove-high-contrast-header'], {
                     [styles['with-paddings']]: !disableContentPaddings,
                 }) }, children),
             footer && (React.createElement("div", { className: clsx(styles.footer, {

package/container/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["container/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 clsx from 'clsx';\nimport React, { useEffect, useRef } from 'react';\nimport { ContainerProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { useAppLayoutContext } from '../internal/context/app-layout-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { contentHeaderClassName } from '../internal/utils/content-header-utils';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\nimport { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\nimport { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { useModalContext } from '../internal/context/modal-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { shouldRemoveHighContrastHeader } from '../internal/utils/content-header-utils';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n  __stickyHeader?: boolean;\n  __stickyOffset?: number;\n  __mobileStickyOffset?: number;\n  __disableFooterDivider?: boolean;\n  __disableFooterPaddings?: boolean;\n  __hiddenContent?: boolean;\n  __headerRef?: React.RefObject<HTMLDivElement>;\n  __darkHeader?: boolean;\n  __disableStickyMobile?: boolean;\n  /**\n   * Additional internal variant:\n   * * `embedded` - Use this variant within a parent container (such as a modal,\n   *                expandable section, container or split panel).\n   * * `full-page` – Only for internal use in table, cards and other components\n   */\n  variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';\n\n  __funnelSubStepProps?: ReturnType<typeof useFunnelSubStep>['funnelSubStepProps'];\n  __subStepRef?: ReturnType<typeof useFunnelSubStep>['subStepRef'];\n}\n\nexport function InternalContainerAsSubstep(props: InternalContainerProps) {\n  const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n  const modalContext = useModalContext();\n\n  return (\n    <InternalContainer\n      {...props}\n      __subStepRef={modalContext?.isInModal ? { current: null } : subStepRef}\n      __funnelSubStepProps={modalContext?.isInModal ? {} : funnelSubStepProps}\n    />\n  );\n}\n\nexport default function InternalContainer({\n  header,\n  footer,\n  children,\n  variant = 'default',\n  disableHeaderPaddings = false,\n  disableContentPaddings = false,\n  fitHeight,\n  media,\n  __stickyOffset,\n  __mobileStickyOffset,\n  __stickyHeader = false,\n  __internalRootRef = null,\n  __disableFooterDivider = false,\n  __disableFooterPaddings = false,\n  __hiddenContent = false,\n  __headerRef,\n  __darkHeader = false,\n  __disableStickyMobile = true,\n  __funnelSubStepProps,\n  __subStepRef,\n  ...restProps\n}: InternalContainerProps) {\n  const isMobile = useMobile();\n  const baseProps = getBaseProps(restProps);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const { isSticky, isStuck, stickyStyles } = useStickyHeader(\n    rootRef,\n    headerRef,\n    __stickyHeader,\n    __stickyOffset,\n    __mobileStickyOffset,\n    __disableStickyMobile\n  );\n  const contentId = useUniqueId();\n  const { setHasStickyBackground } = useAppLayoutContext();\n  const isRefresh = useVisualRefresh();\n\n  const hasDynamicHeight = isRefresh && variant === 'full-page';\n  const overlapElement = useDynamicOverlap({ disabled: !hasDynamicHeight || !__darkHeader });\n\n  const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n  const headerMergedRef = useMergeRefs(headerRef, overlapElement, __headerRef);\n\n  /**\n   * The visual refresh AppLayout component needs to know if a child component\n   * has a high contrast sticky header. This is to make sure the background element\n   * stays in the same vertical position as the header content.\n   */\n  useEffect(() => {\n    const shouldUpdateStickyBackground = isSticky && variant === 'full-page' && setHasStickyBackground;\n    if (shouldUpdateStickyBackground) {\n      setHasStickyBackground(true);\n    }\n\n    return () => {\n      if (shouldUpdateStickyBackground) {\n        setHasStickyBackground(false);\n      }\n    };\n  }, [isSticky, setHasStickyBackground, variant]);\n\n  // The container is only sticky on mobile if it is the header for the table.\n  // In this case we don't want the container to have sticky styles, as only the table header row will show as stuck on scroll.\n  const shouldHaveStickyStyles = isSticky && !isMobile;\n\n  const hasMedia = !!media?.content;\n  const mediaPosition = media?.position ?? 'top';\n  return (\n    <div\n      {...baseProps}\n      {...__funnelSubStepProps}\n      className={clsx(\n        baseProps.className,\n        styles.root,\n        styles[`variant-${variant}`],\n        fitHeight && styles['fit-height'],\n        hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']),\n        shouldHaveStickyStyles && [styles['sticky-enabled']],\n        isRefresh && styles.refresh\n      )}\n      ref={mergedRef}\n    >\n      {hasMedia && (\n        <div\n          className={clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media)}\n          style={mediaPosition === 'top' ? { height: media?.height || '' } : { width: media?.width || '' }}\n        >\n          {media.content}\n        </div>\n      )}\n      <div\n        id={contentId}\n        ref={__subStepRef}\n        className={clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height'])}\n      >\n        {header && (\n          <StickyHeaderContext.Provider value={{ isStuck }}>\n            <div\n              className={clsx(\n                isRefresh && styles.refresh,\n                styles.header,\n                styles[`header-variant-${variant}`],\n                shouldRemoveHighContrastHeader && styles['remove-high-contrast-header'],\n                {\n                  [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,\n                  [styles['header-sticky-enabled']]: isSticky,\n                  [styles['header-dynamic-height']]: hasDynamicHeight,\n                  [styles['header-stuck']]: isStuck,\n                  [styles['with-paddings']]: !disableHeaderPaddings,\n                  [styles['with-hidden-content']]: !children || __hiddenContent,\n                  [styles['header-with-media']]: hasMedia,\n                }\n              )}\n              {...stickyStyles}\n              ref={headerMergedRef}\n            >\n              {__darkHeader ? (\n                <div className={clsx(styles['dark-header'], contentHeaderClassName)}>{header}</div>\n              ) : (\n                header\n              )}\n            </div>\n          </StickyHeaderContext.Provider>\n        )}\n        <div\n          className={clsx(\n            styles.content,\n            fitHeight && styles['content-fit-height'],\n            shouldRemoveHighContrastHeader && styles['remove-high-contrast-header'],\n            {\n              [styles['with-paddings']]: !disableContentPaddings,\n            }\n          )}\n        >\n          {children}\n        </div>\n        {footer && (\n          <div\n            className={clsx(styles.footer, {\n              [styles['with-divider']]: !__disableFooterDivider,\n              [styles['with-paddings']]: !__disableFooterPaddings,\n            })}\n          >\n            {footer}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["container/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 clsx from 'clsx';\nimport React, { useEffect, useRef } from 'react';\nimport { ContainerProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { useAppLayoutContext } from '../internal/context/app-layout-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { getContentHeaderClassName } from '../internal/utils/content-header-utils';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\nimport { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\nimport { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { useModalContext } from '../internal/context/modal-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { shouldRemoveHighContrastHeader } from '../internal/utils/content-header-utils';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n  __stickyHeader?: boolean;\n  __stickyOffset?: number;\n  __mobileStickyOffset?: number;\n  __disableFooterDivider?: boolean;\n  __disableFooterPaddings?: boolean;\n  __hiddenContent?: boolean;\n  __headerRef?: React.RefObject<HTMLDivElement>;\n  __darkHeader?: boolean;\n  __disableStickyMobile?: boolean;\n  /**\n   * Additional internal variant:\n   * * `embedded` - Use this variant within a parent container (such as a modal,\n   *                expandable section, container or split panel).\n   * * `full-page` – Only for internal use in table, cards and other components\n   */\n  variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';\n\n  __funnelSubStepProps?: ReturnType<typeof useFunnelSubStep>['funnelSubStepProps'];\n  __subStepRef?: ReturnType<typeof useFunnelSubStep>['subStepRef'];\n}\n\nexport function InternalContainerAsSubstep(props: InternalContainerProps) {\n  const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n  const modalContext = useModalContext();\n\n  return (\n    <InternalContainer\n      {...props}\n      __subStepRef={modalContext?.isInModal ? { current: null } : subStepRef}\n      __funnelSubStepProps={modalContext?.isInModal ? {} : funnelSubStepProps}\n    />\n  );\n}\n\nexport default function InternalContainer({\n  header,\n  footer,\n  children,\n  variant = 'default',\n  disableHeaderPaddings = false,\n  disableContentPaddings = false,\n  fitHeight,\n  media,\n  __stickyOffset,\n  __mobileStickyOffset,\n  __stickyHeader = false,\n  __internalRootRef = null,\n  __disableFooterDivider = false,\n  __disableFooterPaddings = false,\n  __hiddenContent = false,\n  __headerRef,\n  __darkHeader = false,\n  __disableStickyMobile = true,\n  __funnelSubStepProps,\n  __subStepRef,\n  ...restProps\n}: InternalContainerProps) {\n  const isMobile = useMobile();\n  const baseProps = getBaseProps(restProps);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const { isSticky, isStuck, stickyStyles } = useStickyHeader(\n    rootRef,\n    headerRef,\n    __stickyHeader,\n    __stickyOffset,\n    __mobileStickyOffset,\n    __disableStickyMobile\n  );\n  const contentId = useUniqueId();\n  const { setHasStickyBackground } = useAppLayoutContext();\n  const isRefresh = useVisualRefresh();\n\n  const hasDynamicHeight = isRefresh && variant === 'full-page';\n  const overlapElement = useDynamicOverlap({ disabled: !hasDynamicHeight || !__darkHeader });\n\n  const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n  const headerMergedRef = useMergeRefs(headerRef, overlapElement, __headerRef);\n\n  /**\n   * The visual refresh AppLayout component needs to know if a child component\n   * has a high contrast sticky header. This is to make sure the background element\n   * stays in the same vertical position as the header content.\n   */\n  useEffect(() => {\n    const shouldUpdateStickyBackground = isSticky && variant === 'full-page' && setHasStickyBackground;\n    if (shouldUpdateStickyBackground) {\n      setHasStickyBackground(true);\n    }\n\n    return () => {\n      if (shouldUpdateStickyBackground) {\n        setHasStickyBackground(false);\n      }\n    };\n  }, [isSticky, setHasStickyBackground, variant]);\n\n  // The container is only sticky on mobile if it is the header for the table.\n  // In this case we don't want the container to have sticky styles, as only the table header row will show as stuck on scroll.\n  const shouldHaveStickyStyles = isSticky && !isMobile;\n\n  const hasMedia = !!media?.content;\n  const mediaPosition = media?.position ?? 'top';\n  return (\n    <div\n      {...baseProps}\n      {...__funnelSubStepProps}\n      className={clsx(\n        baseProps.className,\n        styles.root,\n        styles[`variant-${variant}`],\n        fitHeight && styles['fit-height'],\n        hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']),\n        shouldHaveStickyStyles && [styles['sticky-enabled']],\n        isRefresh && styles.refresh\n      )}\n      ref={mergedRef}\n    >\n      {hasMedia && (\n        <div\n          className={clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media)}\n          style={mediaPosition === 'top' ? { height: media?.height || '' } : { width: media?.width || '' }}\n        >\n          {media.content}\n        </div>\n      )}\n      <div\n        id={contentId}\n        ref={__subStepRef}\n        className={clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height'])}\n      >\n        {header && (\n          <StickyHeaderContext.Provider value={{ isStuck }}>\n            <div\n              className={clsx(\n                isRefresh && styles.refresh,\n                styles.header,\n                styles[`header-variant-${variant}`],\n                shouldRemoveHighContrastHeader() && styles['remove-high-contrast-header'],\n                {\n                  [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,\n                  [styles['header-sticky-enabled']]: isSticky,\n                  [styles['header-dynamic-height']]: hasDynamicHeight,\n                  [styles['header-stuck']]: isStuck,\n                  [styles['with-paddings']]: !disableHeaderPaddings,\n                  [styles['with-hidden-content']]: !children || __hiddenContent,\n                  [styles['header-with-media']]: hasMedia,\n                }\n              )}\n              {...stickyStyles}\n              ref={headerMergedRef}\n            >\n              {__darkHeader ? (\n                <div className={clsx(styles['dark-header'], getContentHeaderClassName())}>{header}</div>\n              ) : (\n                header\n              )}\n            </div>\n          </StickyHeaderContext.Provider>\n        )}\n        <div\n          className={clsx(\n            styles.content,\n            fitHeight && styles['content-fit-height'],\n            shouldRemoveHighContrastHeader() && styles['remove-high-contrast-header'],\n            {\n              [styles['with-paddings']]: !disableContentPaddings,\n            }\n          )}\n        >\n          {children}\n        </div>\n        {footer && (\n          <div\n            className={clsx(styles.footer, {\n              [styles['with-divider']]: !__disableFooterDivider,\n              [styles['with-paddings']]: !__disableFooterPaddings,\n            })}\n          >\n            {footer}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"]}

package/content-layout/internal.js

@@ -4,7 +4,7 @@ import { __rest } from "tslib";
 import React, { useRef } from 'react';
 import clsx from 'clsx';
 import { getBaseProps } from '../internal/base-component';
-import { contentHeaderClassName } from '../internal/utils/content-header-utils';
+import { getContentHeaderClassName } from '../internal/utils/content-header-utils';
 import { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
@@ -22,8 +22,8 @@ export default function InternalContentLayout(_a) {
             [styles['is-visual-refresh']]: isVisualRefresh,
             [styles['has-header']]: !!header,
         }), ref: mergedRef }),
-        React.createElement("div", { className: clsx(styles.background, { [styles['is-overlap-disabled']]: isOverlapDisabled }, contentHeaderClassName), ref: overlapElement }),
-        header && React.createElement("div", { className: clsx(styles.header, contentHeaderClassName) }, header),
+        React.createElement("div", { className: clsx(styles.background, { [styles['is-overlap-disabled']]: isOverlapDisabled }, getContentHeaderClassName()), ref: overlapElement }),
+        header && React.createElement("div", { className: clsx(styles.header, getContentHeaderClassName()) }, header),
         React.createElement("div", { className: styles.content }, children)));
 }
 //# sourceMappingURL=internal.js.map

package/content-layout/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["content-layout/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAEhF,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAMjB;QANiB,EAC5C,QAAQ,EACR,cAAc,EACd,MAAM,EACN,iBAAiB,OAEU,EADxB,IAAI,cALqC,6DAM7C,CADQ;IAEP,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,YAAY,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC;IAE/D,MAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAC3C,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAE3C,MAAM,iBAAiB,GAAG,CAAC,QAAQ,IAAI,cAAc,CAAC;IAEtD,OAAO,CACL,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE;YAClD,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,iBAAiB;YAClD,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE,eAAe;YAC9C,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM;SACjC,CAAC,EACF,GAAG,EAAE,SAAS;QAEd,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,EACjB,EAAE,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,iBAAiB,EAAE,EACtD,sBAAsB,CACvB,EACD,GAAG,EAAE,cAAc,GACnB;QAED,MAAM,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,sBAAsB,CAAC,IAAG,MAAM,CAAO;QAEtF,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO,CAC5C,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { ContentLayoutProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { contentHeaderClassName } from '../internal/utils/content-header-utils';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\n\ntype InternalContentLayoutProps = ContentLayoutProps & InternalBaseComponentProps;\n\nexport default function InternalContentLayout({\n  children,\n  disableOverlap,\n  header,\n  __internalRootRef,\n  ...rest\n}: InternalContentLayoutProps) {\n  const baseProps = getBaseProps(rest);\n  const rootElement = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs(rootElement, __internalRootRef);\n\n  const isVisualRefresh = useVisualRefresh();\n  const overlapElement = useDynamicOverlap();\n\n  const isOverlapDisabled = !children || disableOverlap;\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.layout, {\n        [styles['is-overlap-disabled']]: isOverlapDisabled,\n        [styles['is-visual-refresh']]: isVisualRefresh,\n        [styles['has-header']]: !!header,\n      })}\n      ref={mergedRef}\n    >\n      <div\n        className={clsx(\n          styles.background,\n          { [styles['is-overlap-disabled']]: isOverlapDisabled },\n          contentHeaderClassName\n        )}\n        ref={overlapElement}\n      />\n\n      {header && <div className={clsx(styles.header, contentHeaderClassName)}>{header}</div>}\n\n      <div className={styles.content}>{children}</div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["content-layout/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,wCAAwC,CAAC;AAEnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAMjB;QANiB,EAC5C,QAAQ,EACR,cAAc,EACd,MAAM,EACN,iBAAiB,OAEU,EADxB,IAAI,cALqC,6DAM7C,CADQ;IAEP,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,YAAY,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC;IAE/D,MAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAC3C,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAE3C,MAAM,iBAAiB,GAAG,CAAC,QAAQ,IAAI,cAAc,CAAC;IAEtD,OAAO,CACL,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE;YAClD,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,iBAAiB;YAClD,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE,eAAe;YAC9C,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM;SACjC,CAAC,EACF,GAAG,EAAE,SAAS;QAEd,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,EACjB,EAAE,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,iBAAiB,EAAE,EACtD,yBAAyB,EAAE,CAC5B,EACD,GAAG,EAAE,cAAc,GACnB;QAED,MAAM,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,yBAAyB,EAAE,CAAC,IAAG,MAAM,CAAO;QAE3F,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO,CAC5C,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { ContentLayoutProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { getContentHeaderClassName } from '../internal/utils/content-header-utils';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\n\ntype InternalContentLayoutProps = ContentLayoutProps & InternalBaseComponentProps;\n\nexport default function InternalContentLayout({\n  children,\n  disableOverlap,\n  header,\n  __internalRootRef,\n  ...rest\n}: InternalContentLayoutProps) {\n  const baseProps = getBaseProps(rest);\n  const rootElement = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs(rootElement, __internalRootRef);\n\n  const isVisualRefresh = useVisualRefresh();\n  const overlapElement = useDynamicOverlap();\n\n  const isOverlapDisabled = !children || disableOverlap;\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.layout, {\n        [styles['is-overlap-disabled']]: isOverlapDisabled,\n        [styles['is-visual-refresh']]: isVisualRefresh,\n        [styles['has-header']]: !!header,\n      })}\n      ref={mergedRef}\n    >\n      <div\n        className={clsx(\n          styles.background,\n          { [styles['is-overlap-disabled']]: isOverlapDisabled },\n          getContentHeaderClassName()\n        )}\n        ref={overlapElement}\n      />\n\n      {header && <div className={clsx(styles.header, getContentHeaderClassName())}>{header}</div>}\n\n      <div className={styles.content}>{children}</div>\n    </div>\n  );\n}\n"]}

package/expandable-section/styles.css.js

@@ -1,37 +1,37 @@
 
     import './styles.scoped.css';
     export default {
-  "content-enter": "awsui_content-enter_gwq0h_g3frk_97",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_g3frk_1",
-  "trigger-expanded": "awsui_trigger-expanded_gwq0h_g3frk_119",
-  "icon": "awsui_icon_gwq0h_g3frk_133",
-  "root": "awsui_root_gwq0h_g3frk_151",
-  "expand-button": "awsui_expand-button_gwq0h_g3frk_189",
-  "expanded": "awsui_expanded_gwq0h_g3frk_196",
-  "icon-container": "awsui_icon-container_gwq0h_g3frk_200",
-  "icon-container-container": "awsui_icon-container-container_gwq0h_g3frk_205",
-  "wrapper": "awsui_wrapper_gwq0h_g3frk_209",
-  "wrapper-default": "awsui_wrapper-default_gwq0h_g3frk_216",
-  "wrapper-footer": "awsui_wrapper-footer_gwq0h_g3frk_216",
-  "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_g3frk_219",
-  "wrapper-container": "awsui_wrapper-container_gwq0h_g3frk_222",
-  "wrapper-compact": "awsui_wrapper-compact_gwq0h_g3frk_226",
-  "header-deprecated": "awsui_header-deprecated_gwq0h_g3frk_240",
-  "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_g3frk_264",
-  "header": "awsui_header_gwq0h_g3frk_240",
-  "header-wrapper": "awsui_header-wrapper_gwq0h_g3frk_283",
-  "header-actions-wrapper": "awsui_header-actions-wrapper_gwq0h_g3frk_293",
-  "header-button": "awsui_header-button_gwq0h_g3frk_298",
-  "header-container-button": "awsui_header-container-button_gwq0h_g3frk_298",
-  "header-container": "awsui_header-container_gwq0h_g3frk_298",
-  "header-navigation": "awsui_header-navigation_gwq0h_g3frk_330",
-  "header-text": "awsui_header-text_gwq0h_g3frk_362",
-  "content": "awsui_content_gwq0h_g3frk_97",
-  "content-default": "awsui_content-default_gwq0h_g3frk_369",
-  "content-footer": "awsui_content-footer_gwq0h_g3frk_372",
-  "content-expanded": "awsui_content-expanded_gwq0h_g3frk_375",
-  "content-compact": "awsui_content-compact_gwq0h_g3frk_378",
-  "focusable": "awsui_focusable_gwq0h_g3frk_382",
-  "click-target": "awsui_click-target_gwq0h_g3frk_393"
+  "content-enter": "awsui_content-enter_gwq0h_11fqg_97",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_11fqg_1",
+  "trigger-expanded": "awsui_trigger-expanded_gwq0h_11fqg_119",
+  "icon": "awsui_icon_gwq0h_11fqg_133",
+  "root": "awsui_root_gwq0h_11fqg_151",
+  "expand-button": "awsui_expand-button_gwq0h_11fqg_189",
+  "expanded": "awsui_expanded_gwq0h_11fqg_196",
+  "icon-container": "awsui_icon-container_gwq0h_11fqg_200",
+  "icon-container-container": "awsui_icon-container-container_gwq0h_11fqg_205",
+  "wrapper": "awsui_wrapper_gwq0h_11fqg_209",
+  "wrapper-default": "awsui_wrapper-default_gwq0h_11fqg_216",
+  "wrapper-footer": "awsui_wrapper-footer_gwq0h_11fqg_216",
+  "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_11fqg_219",
+  "wrapper-container": "awsui_wrapper-container_gwq0h_11fqg_222",
+  "wrapper-compact": "awsui_wrapper-compact_gwq0h_11fqg_226",
+  "header-deprecated": "awsui_header-deprecated_gwq0h_11fqg_240",
+  "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_11fqg_264",
+  "header": "awsui_header_gwq0h_11fqg_240",
+  "header-wrapper": "awsui_header-wrapper_gwq0h_11fqg_283",
+  "header-actions-wrapper": "awsui_header-actions-wrapper_gwq0h_11fqg_293",
+  "header-button": "awsui_header-button_gwq0h_11fqg_298",
+  "header-container-button": "awsui_header-container-button_gwq0h_11fqg_298",
+  "header-container": "awsui_header-container_gwq0h_11fqg_298",
+  "header-navigation": "awsui_header-navigation_gwq0h_11fqg_330",
+  "header-text": "awsui_header-text_gwq0h_11fqg_362",
+  "content": "awsui_content_gwq0h_11fqg_97",
+  "content-default": "awsui_content-default_gwq0h_11fqg_369",
+  "content-footer": "awsui_content-footer_gwq0h_11fqg_372",
+  "content-expanded": "awsui_content-expanded_gwq0h_11fqg_375",
+  "content-compact": "awsui_content-compact_gwq0h_11fqg_378",
+  "focusable": "awsui_focusable_gwq0h_11fqg_382",
+  "click-target": "awsui_click-target_gwq0h_11fqg_393"
 };
   

package/expandable-section/styles.scoped.css

@@ -94,10 +94,10 @@ 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_content-enter_gwq0h_g3frk_97:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_gwq0h_g3frk_1 var(--motion-duration-show-paced-q2lo2h, 180ms) var(--motion-easing-show-paced-ne2o0s, ease-out);
+.awsui_content-enter_gwq0h_11fqg_97:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_gwq0h_11fqg_1 var(--motion-duration-show-paced-q2lo2h, 180ms) var(--motion-easing-show-paced-ne2o0s, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in_gwq0h_g3frk_1 {
+@keyframes awsui_awsui-motion-fade-in_gwq0h_11fqg_1 {
   from {
     opacity: 0.2;
   }
@@ -106,40 +106,40 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_content-enter_gwq0h_g3frk_97:not(#\9) {
+  .awsui_content-enter_gwq0h_11fqg_97:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_content-enter_gwq0h_g3frk_97:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_g3frk_97:not(#\9) {
+.awsui-motion-disabled .awsui_content-enter_gwq0h_11fqg_97:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_11fqg_97:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_trigger-expanded_gwq0h_g3frk_119:not(#\9) {
+.awsui_trigger-expanded_gwq0h_11fqg_119:not(#\9) {
   transition: border-bottom-color var(--motion-duration-show-paced-q2lo2h, 180ms) var(--motion-easing-show-paced-ne2o0s, ease-out);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_trigger-expanded_gwq0h_g3frk_119:not(#\9) {
+  .awsui_trigger-expanded_gwq0h_11fqg_119:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_trigger-expanded_gwq0h_g3frk_119:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_g3frk_119:not(#\9) {
+.awsui-motion-disabled .awsui_trigger-expanded_gwq0h_11fqg_119:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_11fqg_119:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_icon_gwq0h_g3frk_133:not(#\9) {
+.awsui_icon_gwq0h_11fqg_133:not(#\9) {
   transition: transform var(--motion-duration-rotate-90-4ry26y, 135ms) var(--motion-easing-rotate-90-sb4dk7, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_icon_gwq0h_g3frk_133:not(#\9) {
+  .awsui_icon_gwq0h_11fqg_133:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_icon_gwq0h_g3frk_133:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_g3frk_133:not(#\9) {
+.awsui-motion-disabled .awsui_icon_gwq0h_11fqg_133:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_11fqg_133:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -148,7 +148,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_gwq0h_g3frk_151:not(#\9) {
+.awsui_root_gwq0h_11fqg_151:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -187,123 +187,123 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: block;
 }
 
-.awsui_expand-button_gwq0h_g3frk_189:not(#\9) {
-  /* used in test-utils */
+.awsui_expand-button_gwq0h_11fqg_189:not(#\9) {
+  outline: none;
 }
 
-.awsui_icon_gwq0h_g3frk_133:not(#\9) {
+.awsui_icon_gwq0h_11fqg_133:not(#\9) {
   transform: rotate(-90deg);
 }
-.awsui_icon_gwq0h_g3frk_133.awsui_expanded_gwq0h_g3frk_196:not(#\9) {
+.awsui_icon_gwq0h_11fqg_133.awsui_expanded_gwq0h_11fqg_196:not(#\9) {
   transform: rotate(0deg);
 }
 
-.awsui_icon-container_gwq0h_g3frk_200:not(#\9) {
+.awsui_icon-container_gwq0h_11fqg_200:not(#\9) {
   position: relative;
   margin-left: calc((var(--line-height-body-m-30ar75, 20px) - var(--size-icon-normal-0m1722, 16px)) / -2);
   margin-right: calc(var(--space-xxs-p8yyaw, 4px) + var(--border-divider-list-width-27y3k5, 1px));
 }
-.awsui_icon-container-container_gwq0h_g3frk_205:not(#\9) {
+.awsui_icon-container-container_gwq0h_11fqg_205:not(#\9) {
   margin-right: var(--space-xs-zb16t3, 8px);
 }
 
-.awsui_wrapper_gwq0h_g3frk_209:not(#\9) {
+.awsui_wrapper_gwq0h_11fqg_209:not(#\9) {
   box-sizing: border-box;
   border: none;
   width: 100%;
   line-height: var(--line-height-body-m-30ar75, 20px);
   text-align: left;
 }
-.awsui_wrapper-default_gwq0h_g3frk_216:not(#\9), .awsui_wrapper-footer_gwq0h_g3frk_216:not(#\9) {
+.awsui_wrapper-default_gwq0h_11fqg_216:not(#\9), .awsui_wrapper-footer_gwq0h_11fqg_216:not(#\9) {
   border: var(--border-divider-section-width-1061zr, 1px) solid transparent;
 }
-.awsui_wrapper-navigation_gwq0h_g3frk_219:not(#\9) {
+.awsui_wrapper-navigation_gwq0h_11fqg_219:not(#\9) {
   border-left: var(--border-divider-section-width-1061zr, 1px) solid transparent;
 }
-.awsui_wrapper-navigation_gwq0h_g3frk_219:not(#\9), .awsui_wrapper-container_gwq0h_g3frk_222:not(#\9) {
+.awsui_wrapper-navigation_gwq0h_11fqg_219:not(#\9), .awsui_wrapper-container_gwq0h_11fqg_222:not(#\9) {
   display: flex;
   font-weight: var(--font-weight-heading-s-cwn6wc, 700);
 }
-.awsui_wrapper-default_gwq0h_g3frk_216:not(#\9), .awsui_wrapper-navigation_gwq0h_g3frk_219:not(#\9), .awsui_wrapper-footer_gwq0h_g3frk_216:not(#\9), .awsui_wrapper-compact_gwq0h_g3frk_226:not(#\9) {
+.awsui_wrapper-default_gwq0h_11fqg_216:not(#\9), .awsui_wrapper-navigation_gwq0h_11fqg_219:not(#\9), .awsui_wrapper-footer_gwq0h_11fqg_216:not(#\9), .awsui_wrapper-compact_gwq0h_11fqg_226:not(#\9) {
   color: var(--color-text-expandable-section-default-djhi83, #000716);
   -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
 }
-.awsui_wrapper-default_gwq0h_g3frk_216:not(#\9), .awsui_wrapper-navigation_gwq0h_g3frk_219:not(#\9), .awsui_wrapper-footer_gwq0h_g3frk_216:not(#\9) {
+.awsui_wrapper-default_gwq0h_11fqg_216:not(#\9), .awsui_wrapper-navigation_gwq0h_11fqg_219:not(#\9), .awsui_wrapper-footer_gwq0h_11fqg_216:not(#\9) {
   font-size: var(--font-expandable-heading-size-smdiul, 16px);
   letter-spacing: var(--letter-spacing-heading-s-jr3mor, -0.005em);
 }
-.awsui_wrapper-default_gwq0h_g3frk_216:not(#\9) {
+.awsui_wrapper-default_gwq0h_11fqg_216:not(#\9) {
   padding-top: var(--space-scaled-xxs-7597g1, 4px);
   padding-bottom: var(--space-scaled-xxs-7597g1, 4px);
   padding-right: var(--space-xxs-p8yyaw, 4px);
 }
-.awsui_wrapper-default_gwq0h_g3frk_216.awsui_header-deprecated_gwq0h_g3frk_240:not(#\9) {
+.awsui_wrapper-default_gwq0h_11fqg_216.awsui_header-deprecated_gwq0h_11fqg_240:not(#\9) {
   padding-left: var(--space-xxs-p8yyaw, 4px);
 }
-.awsui_wrapper-default_gwq0h_g3frk_216:not(#\9):not(.awsui_header-deprecated_gwq0h_g3frk_240) {
+.awsui_wrapper-default_gwq0h_11fqg_216:not(#\9):not(.awsui_header-deprecated_gwq0h_11fqg_240) {
   padding-left: calc(var(--space-xxs-p8yyaw, 4px) + calc(var(--size-icon-normal-0m1722, 16px) + (var(--line-height-body-m-30ar75, 20px) - var(--size-icon-normal-0m1722, 16px)) / -2 + var(--space-xxs-p8yyaw, 4px) + var(--border-divider-list-width-27y3k5, 1px)));
 }
-.awsui_wrapper-footer_gwq0h_g3frk_216:not(#\9) {
+.awsui_wrapper-footer_gwq0h_11fqg_216:not(#\9) {
   padding-top: var(--space-scaled-xxs-7597g1, 4px);
   padding-bottom: var(--space-scaled-xxs-7597g1, 4px);
 }
-.awsui_wrapper-footer_gwq0h_g3frk_216:not(#\9), .awsui_wrapper-compact_gwq0h_g3frk_226:not(#\9) {
+.awsui_wrapper-footer_gwq0h_11fqg_216:not(#\9), .awsui_wrapper-compact_gwq0h_11fqg_226:not(#\9) {
   padding-right: 0;
 }
-.awsui_wrapper-footer_gwq0h_g3frk_216.awsui_header-deprecated_gwq0h_g3frk_240:not(#\9), .awsui_wrapper-compact_gwq0h_g3frk_226.awsui_header-deprecated_gwq0h_g3frk_240:not(#\9) {
+.awsui_wrapper-footer_gwq0h_11fqg_216.awsui_header-deprecated_gwq0h_11fqg_240:not(#\9), .awsui_wrapper-compact_gwq0h_11fqg_226.awsui_header-deprecated_gwq0h_11fqg_240:not(#\9) {
   padding-left: 0;
 }
-.awsui_wrapper-footer_gwq0h_g3frk_216:not(#\9):not(.awsui_header-deprecated_gwq0h_g3frk_240), .awsui_wrapper-compact_gwq0h_g3frk_226:not(#\9):not(.awsui_header-deprecated_gwq0h_g3frk_240) {
+.awsui_wrapper-footer_gwq0h_11fqg_216:not(#\9):not(.awsui_header-deprecated_gwq0h_11fqg_240), .awsui_wrapper-compact_gwq0h_11fqg_226:not(#\9):not(.awsui_header-deprecated_gwq0h_11fqg_240) {
   padding-left: calc(var(--size-icon-normal-0m1722, 16px) + (var(--line-height-body-m-30ar75, 20px) - var(--size-icon-normal-0m1722, 16px)) / -2 + var(--space-xxs-p8yyaw, 4px) + var(--border-divider-list-width-27y3k5, 1px));
 }
-.awsui_wrapper-container_gwq0h_g3frk_222:not(#\9) {
+.awsui_wrapper-container_gwq0h_11fqg_222:not(#\9) {
   padding-top: var(--space-container-header-top-5qav00, 12px);
   padding-bottom: var(--space-container-header-bottom-vj01hn, 8px);
   padding-right: var(--space-container-horizontal-wfukh3, 20px);
 }
-.awsui_wrapper-container_gwq0h_g3frk_222:not(#\9):not(.awsui_wrapper-expanded_gwq0h_g3frk_264) {
+.awsui_wrapper-container_gwq0h_11fqg_222:not(#\9):not(.awsui_wrapper-expanded_gwq0h_11fqg_264) {
   padding-bottom: var(--space-container-header-top-5qav00, 12px);
 }
-.awsui_wrapper-container_gwq0h_g3frk_222.awsui_header-deprecated_gwq0h_g3frk_240:not(#\9) {
+.awsui_wrapper-container_gwq0h_11fqg_222.awsui_header-deprecated_gwq0h_11fqg_240:not(#\9) {
   padding-left: var(--space-container-horizontal-wfukh3, 20px);
 }
-.awsui_wrapper-container_gwq0h_g3frk_222:not(#\9):not(.awsui_header-deprecated_gwq0h_g3frk_240) {
+.awsui_wrapper-container_gwq0h_11fqg_222:not(#\9):not(.awsui_header-deprecated_gwq0h_11fqg_240) {
   padding-left: calc(var(--space-container-horizontal-wfukh3, 20px) + calc(var(--size-icon-medium-y9xuoq, 20px) + (var(--line-height-body-m-30ar75, 20px) - var(--size-icon-normal-0m1722, 16px)) / -2 + var(--space-xs-zb16t3, 8px)));
 }
-body[data-awsui-focus-visible=true] .awsui_wrapper-container_gwq0h_g3frk_222:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_wrapper-container_gwq0h_11fqg_222:not(#\9):focus {
   padding: calc(var(--space-scaled-s-aqzyko, 12px) - var(--border-divider-section-width-1061zr, 1px)) calc(var(--space-l-t419sm, 20px) - var(--border-divider-section-width-1061zr, 1px));
 }
-.awsui_wrapper-default_gwq0h_g3frk_216.awsui_wrapper-expanded_gwq0h_g3frk_264:not(#\9) {
+.awsui_wrapper-default_gwq0h_11fqg_216.awsui_wrapper-expanded_gwq0h_11fqg_264:not(#\9) {
   border-bottom-color: var(--color-border-divider-default-j74lyz, #b6bec9);
 }
 
-.awsui_header_gwq0h_g3frk_240:not(#\9) {
+.awsui_header_gwq0h_11fqg_240:not(#\9) {
   /* used in test-utils */
 }
-.awsui_header-wrapper_gwq0h_g3frk_283:not(#\9), .awsui_header-deprecated_gwq0h_g3frk_240:not(#\9) {
+.awsui_header-wrapper_gwq0h_11fqg_283:not(#\9), .awsui_header-deprecated_gwq0h_11fqg_240:not(#\9) {
   display: flex;
   font-weight: var(--font-weight-heading-s-cwn6wc, 700);
 }
-.awsui_header-wrapper_gwq0h_g3frk_283:not(#\9) {
+.awsui_header-wrapper_gwq0h_11fqg_283:not(#\9) {
   font-size: inherit;
   letter-spacing: inherit;
   margin: 0;
   padding: 0;
 }
-.awsui_header-actions-wrapper_gwq0h_g3frk_293:not(#\9) {
+.awsui_header-actions-wrapper_gwq0h_11fqg_293:not(#\9) {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
-body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_g3frk_298:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_g3frk_298:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_11fqg_298:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_11fqg_298:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_g3frk_298:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_g3frk_298:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_11fqg_298:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_11fqg_298:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_g3frk_298:not(#\9):focus::before, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_g3frk_298:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_11fqg_298:not(#\9):focus::before, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_11fqg_298:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -314,21 +314,21 @@ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_g3frk_298:not(#\9
   border-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
 }
-.awsui_header-button_gwq0h_g3frk_298:not(#\9) {
+.awsui_header-button_gwq0h_11fqg_298:not(#\9) {
   box-sizing: border-box;
   display: flex;
   margin-left: calc(-1 * calc(var(--size-icon-normal-0m1722, 16px) + (var(--line-height-body-m-30ar75, 20px) - var(--size-icon-normal-0m1722, 16px)) / -2 + var(--space-xxs-p8yyaw, 4px) + var(--border-divider-list-width-27y3k5, 1px)));
 }
-.awsui_header-container-button_gwq0h_g3frk_298:not(#\9) {
+.awsui_header-container-button_gwq0h_11fqg_298:not(#\9) {
   margin-left: calc(-1 * calc(var(--size-icon-medium-y9xuoq, 20px) + (var(--line-height-body-m-30ar75, 20px) - var(--size-icon-normal-0m1722, 16px)) / -2 + var(--space-xs-zb16t3, 8px)));
 }
-.awsui_header-container_gwq0h_g3frk_298:not(#\9) {
+.awsui_header-container_gwq0h_11fqg_298:not(#\9) {
   width: 100%;
 }
-.awsui_header-container_gwq0h_g3frk_298 > .awsui_icon-container_gwq0h_g3frk_200:not(#\9) {
+.awsui_header-container_gwq0h_11fqg_298 > .awsui_icon-container_gwq0h_11fqg_200:not(#\9) {
   margin-top: var(--space-expandable-section-icon-offset-top-ekk5vc, 4px);
 }
-.awsui_header-navigation_gwq0h_g3frk_330 > .awsui_icon-container_gwq0h_g3frk_200:not(#\9) {
+.awsui_header-navigation_gwq0h_11fqg_330 > .awsui_icon-container_gwq0h_11fqg_200:not(#\9) {
   display: inline-flex;
   cursor: pointer;
   color: var(--color-text-expandable-section-navigation-icon-default-htcovl, #414d5c);
@@ -339,17 +339,17 @@ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_g3frk_298:not(#\9
   text-decoration: none;
   flex-direction: column;
 }
-.awsui_header-navigation_gwq0h_g3frk_330 > .awsui_icon-container_gwq0h_g3frk_200:not(#\9):hover {
+.awsui_header-navigation_gwq0h_11fqg_330 > .awsui_icon-container_gwq0h_11fqg_200:not(#\9):hover {
   color: var(--color-text-expandable-section-hover-2d1zpj, #0972d3);
 }
-body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_g3frk_330 > .awsui_icon-container_gwq0h_g3frk_200:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_11fqg_330 > .awsui_icon-container_gwq0h_11fqg_200:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_g3frk_330 > .awsui_icon-container_gwq0h_g3frk_200:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_11fqg_330 > .awsui_icon-container_gwq0h_11fqg_200:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_g3frk_330 > .awsui_icon-container_gwq0h_g3frk_200:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_11fqg_330 > .awsui_icon-container_gwq0h_11fqg_200:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -360,40 +360,40 @@ body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_g3frk_330 > .
   border-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
 }
-.awsui_header-text_gwq0h_g3frk_362:not(#\9) {
+.awsui_header-text_gwq0h_11fqg_362:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_content_gwq0h_g3frk_97:not(#\9) {
+.awsui_content_gwq0h_11fqg_97:not(#\9) {
   display: none;
 }
-.awsui_content-default_gwq0h_g3frk_369:not(#\9) {
+.awsui_content-default_gwq0h_11fqg_369:not(#\9) {
   padding: var(--space-scaled-xs-26e2du, 8px) 0;
 }
-.awsui_content-footer_gwq0h_g3frk_372:not(#\9) {
+.awsui_content-footer_gwq0h_11fqg_372:not(#\9) {
   padding: var(--space-xs-zb16t3, 8px) 0;
 }
-.awsui_content-expanded_gwq0h_g3frk_375:not(#\9) {
+.awsui_content-expanded_gwq0h_11fqg_375:not(#\9) {
   display: block;
 }
-.awsui_content-compact_gwq0h_g3frk_378:not(#\9) {
+.awsui_content-compact_gwq0h_11fqg_378:not(#\9) {
   padding-inline-start: calc(var(--size-icon-normal-0m1722, 16px) + (var(--line-height-body-m-30ar75, 20px) - var(--size-icon-normal-0m1722, 16px)) / -2 + var(--space-xxs-p8yyaw, 4px) + var(--border-divider-list-width-27y3k5, 1px));
 }
 
-.awsui_focusable_gwq0h_g3frk_382:not(#\9):focus {
+.awsui_focusable_gwq0h_11fqg_382:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_g3frk_382:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_11fqg_382:not(#\9):focus {
   outline: 2px dotted transparent;
   border: var(--border-field-width-09w7vk, 2px) solid var(--color-border-item-focused-b2ntyl, #0972d3);
   border-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-0ctpjf, 0px) var(--color-border-item-focused-b2ntyl, #0972d3);
 }
 
-.awsui_click-target_gwq0h_g3frk_393:not(#\9) {
+.awsui_click-target_gwq0h_11fqg_393:not(#\9) {
   cursor: pointer;
 }
-.awsui_click-target_gwq0h_g3frk_393:not(#\9):not(.awsui_wrapper-container_gwq0h_g3frk_222):not(.awsui_header-container-button_gwq0h_g3frk_298):hover {
+.awsui_click-target_gwq0h_11fqg_393:not(#\9):not(.awsui_wrapper-container_gwq0h_11fqg_222):not(.awsui_header-container-button_gwq0h_11fqg_298):hover {
   color: var(--color-text-expandable-section-hover-2d1zpj, #0972d3);
 }

package/expandable-section/styles.selectors.js

@@ -2,37 +2,37 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "content-enter": "awsui_content-enter_gwq0h_g3frk_97",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_g3frk_1",
-  "trigger-expanded": "awsui_trigger-expanded_gwq0h_g3frk_119",
-  "icon": "awsui_icon_gwq0h_g3frk_133",
-  "root": "awsui_root_gwq0h_g3frk_151",
-  "expand-button": "awsui_expand-button_gwq0h_g3frk_189",
-  "expanded": "awsui_expanded_gwq0h_g3frk_196",
-  "icon-container": "awsui_icon-container_gwq0h_g3frk_200",
-  "icon-container-container": "awsui_icon-container-container_gwq0h_g3frk_205",
-  "wrapper": "awsui_wrapper_gwq0h_g3frk_209",
-  "wrapper-default": "awsui_wrapper-default_gwq0h_g3frk_216",
-  "wrapper-footer": "awsui_wrapper-footer_gwq0h_g3frk_216",
-  "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_g3frk_219",
-  "wrapper-container": "awsui_wrapper-container_gwq0h_g3frk_222",
-  "wrapper-compact": "awsui_wrapper-compact_gwq0h_g3frk_226",
-  "header-deprecated": "awsui_header-deprecated_gwq0h_g3frk_240",
-  "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_g3frk_264",
-  "header": "awsui_header_gwq0h_g3frk_240",
-  "header-wrapper": "awsui_header-wrapper_gwq0h_g3frk_283",
-  "header-actions-wrapper": "awsui_header-actions-wrapper_gwq0h_g3frk_293",
-  "header-button": "awsui_header-button_gwq0h_g3frk_298",
-  "header-container-button": "awsui_header-container-button_gwq0h_g3frk_298",
-  "header-container": "awsui_header-container_gwq0h_g3frk_298",
-  "header-navigation": "awsui_header-navigation_gwq0h_g3frk_330",
-  "header-text": "awsui_header-text_gwq0h_g3frk_362",
-  "content": "awsui_content_gwq0h_g3frk_97",
-  "content-default": "awsui_content-default_gwq0h_g3frk_369",
-  "content-footer": "awsui_content-footer_gwq0h_g3frk_372",
-  "content-expanded": "awsui_content-expanded_gwq0h_g3frk_375",
-  "content-compact": "awsui_content-compact_gwq0h_g3frk_378",
-  "focusable": "awsui_focusable_gwq0h_g3frk_382",
-  "click-target": "awsui_click-target_gwq0h_g3frk_393"
+  "content-enter": "awsui_content-enter_gwq0h_11fqg_97",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_11fqg_1",
+  "trigger-expanded": "awsui_trigger-expanded_gwq0h_11fqg_119",
+  "icon": "awsui_icon_gwq0h_11fqg_133",
+  "root": "awsui_root_gwq0h_11fqg_151",
+  "expand-button": "awsui_expand-button_gwq0h_11fqg_189",
+  "expanded": "awsui_expanded_gwq0h_11fqg_196",
+  "icon-container": "awsui_icon-container_gwq0h_11fqg_200",
+  "icon-container-container": "awsui_icon-container-container_gwq0h_11fqg_205",
+  "wrapper": "awsui_wrapper_gwq0h_11fqg_209",
+  "wrapper-default": "awsui_wrapper-default_gwq0h_11fqg_216",
+  "wrapper-footer": "awsui_wrapper-footer_gwq0h_11fqg_216",
+  "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_11fqg_219",
+  "wrapper-container": "awsui_wrapper-container_gwq0h_11fqg_222",
+  "wrapper-compact": "awsui_wrapper-compact_gwq0h_11fqg_226",
+  "header-deprecated": "awsui_header-deprecated_gwq0h_11fqg_240",
+  "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_11fqg_264",
+  "header": "awsui_header_gwq0h_11fqg_240",
+  "header-wrapper": "awsui_header-wrapper_gwq0h_11fqg_283",
+  "header-actions-wrapper": "awsui_header-actions-wrapper_gwq0h_11fqg_293",
+  "header-button": "awsui_header-button_gwq0h_11fqg_298",
+  "header-container-button": "awsui_header-container-button_gwq0h_11fqg_298",
+  "header-container": "awsui_header-container_gwq0h_11fqg_298",
+  "header-navigation": "awsui_header-navigation_gwq0h_11fqg_330",
+  "header-text": "awsui_header-text_gwq0h_11fqg_362",
+  "content": "awsui_content_gwq0h_11fqg_97",
+  "content-default": "awsui_content-default_gwq0h_11fqg_369",
+  "content-footer": "awsui_content-footer_gwq0h_11fqg_372",
+  "content-expanded": "awsui_content-expanded_gwq0h_11fqg_375",
+  "content-compact": "awsui_content-compact_gwq0h_11fqg_378",
+  "focusable": "awsui_focusable_gwq0h_11fqg_382",
+  "click-target": "awsui_click-target_gwq0h_11fqg_393"
 };