@cloudscape-design/components-themeable 3.0.199 → 3.0.200

package/lib/internal/template/container/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/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 { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\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\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n  __stickyHeader?: boolean;\n  __stickyOffset?: number;\n  __disableFooterDivider?: boolean;\n  __disableFooterPaddings?: boolean;\n  __hiddenContent?: boolean;\n  __headerRef?: React.RefObject<HTMLDivElement>;\n  __headerId?: string;\n  __darkHeader?: 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\nexport default function InternalContainer({\n  header,\n  footer,\n  children,\n  variant = 'default',\n  disableHeaderPaddings = false,\n  disableContentPaddings = false,\n  fitHeight,\n  __stickyOffset,\n  __stickyHeader = false,\n  __internalRootRef = null,\n  __disableFooterDivider = false,\n  __disableFooterPaddings = false,\n  __hiddenContent = false,\n  __headerRef,\n  __headerId,\n  __darkHeader = false,\n  ...restProps\n}: InternalContainerProps) {\n  const baseProps = getBaseProps(restProps);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const { isSticky, isStuck, stickyStyles } = useStickyHeader(rootRef, headerRef, __stickyHeader, __stickyOffset);\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  const headerIdProp = __headerId ? { id: __headerId } : {};\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  return (\n    <div\n      {...baseProps}\n      className={clsx(\n        baseProps.className,\n        styles.root,\n        styles[`variant-${variant}`],\n        fitHeight && styles['root-fit-height']\n      )}\n      ref={mergedRef}\n    >\n      {header && (\n        <StickyHeaderContext.Provider value={{ isStuck }}>\n          <div\n            className={clsx(styles.header, styles[`header-variant-${variant}`], {\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            })}\n            {...headerIdProp}\n            {...stickyStyles}\n            ref={headerMergedRef}\n          >\n            {__darkHeader ? (\n              <div className={clsx(styles['dark-header'], 'awsui-context-content-header')}>{header}</div>\n            ) : (\n              header\n            )}\n          </div>\n        </StickyHeaderContext.Provider>\n      )}\n      <div\n        className={clsx(styles.content, {\n          [styles['with-paddings']]: !disableContentPaddings,\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  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/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 { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\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\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n  __stickyHeader?: boolean;\n  __stickyOffset?: number;\n  __disableFooterDivider?: boolean;\n  __disableFooterPaddings?: boolean;\n  __hiddenContent?: boolean;\n  __headerRef?: React.RefObject<HTMLDivElement>;\n  __headerId?: string;\n  __darkHeader?: 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\nexport default function InternalContainer({\n  header,\n  footer,\n  children,\n  variant = 'default',\n  disableHeaderPaddings = false,\n  disableContentPaddings = false,\n  fitHeight,\n  __stickyOffset,\n  __stickyHeader = false,\n  __internalRootRef = null,\n  __disableFooterDivider = false,\n  __disableFooterPaddings = false,\n  __hiddenContent = false,\n  __headerRef,\n  __headerId,\n  __darkHeader = false,\n  ...restProps\n}: InternalContainerProps) {\n  const baseProps = getBaseProps(restProps);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const { isSticky, isStuck, stickyStyles } = useStickyHeader(rootRef, headerRef, __stickyHeader, __stickyOffset);\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  const headerIdProp = __headerId ? { id: __headerId } : {};\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  return (\n    <div\n      {...baseProps}\n      className={clsx(\n        baseProps.className,\n        styles.root,\n        styles[`variant-${variant}`],\n        fitHeight && styles['fit-height'],\n        isSticky && [styles['sticky-enabled']]\n      )}\n      ref={mergedRef}\n    >\n      {header && (\n        <StickyHeaderContext.Provider value={{ isStuck }}>\n          <div\n            className={clsx(styles.header, styles[`header-variant-${variant}`], {\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            })}\n            {...headerIdProp}\n            {...stickyStyles}\n            ref={headerMergedRef}\n          >\n            {__darkHeader ? (\n              <div className={clsx(styles['dark-header'], 'awsui-context-content-header')}>{header}</div>\n            ) : (\n              header\n            )}\n          </div>\n        </StickyHeaderContext.Provider>\n      )}\n      <div\n        className={clsx(styles.content, {\n          [styles['with-paddings']]: !disableContentPaddings,\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  );\n}\n"]}

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

@@ -1,22 +1,23 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_14iqq_45n65_97",
-  "root-fit-height": "awsui_root-fit-height_14iqq_45n65_110",
-  "variant-default": "awsui_variant-default_14iqq_45n65_116",
-  "variant-stacked": "awsui_variant-stacked_14iqq_45n65_116",
-  "header": "awsui_header_14iqq_45n65_139",
-  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_45n65_144",
-  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_45n65_148",
-  "header-stuck": "awsui_header-stuck_14iqq_45n65_154",
-  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_45n65_159",
-  "with-paddings": "awsui_with-paddings_14iqq_45n65_165",
-  "with-hidden-content": "awsui_with-hidden-content_14iqq_45n65_168",
-  "header-variant-cards": "awsui_header-variant-cards_14iqq_45n65_172",
-  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_45n65_196",
-  "dark-header": "awsui_dark-header_14iqq_45n65_214",
-  "content": "awsui_content_14iqq_45n65_218",
-  "footer": "awsui_footer_14iqq_45n65_229",
-  "with-divider": "awsui_with-divider_14iqq_45n65_232"
+  "root": "awsui_root_14iqq_291o8_97",
+  "fit-height": "awsui_fit-height_14iqq_291o8_111",
+  "variant-default": "awsui_variant-default_14iqq_291o8_116",
+  "variant-stacked": "awsui_variant-stacked_14iqq_291o8_116",
+  "sticky-enabled": "awsui_sticky-enabled_14iqq_291o8_169",
+  "header": "awsui_header_14iqq_291o8_176",
+  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_291o8_181",
+  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_291o8_185",
+  "header-stuck": "awsui_header-stuck_14iqq_291o8_191",
+  "header-variant-cards": "awsui_header-variant-cards_14iqq_291o8_197",
+  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_291o8_200",
+  "with-paddings": "awsui_with-paddings_14iqq_291o8_206",
+  "with-hidden-content": "awsui_with-hidden-content_14iqq_291o8_209",
+  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_291o8_259",
+  "dark-header": "awsui_dark-header_14iqq_291o8_277",
+  "content": "awsui_content_14iqq_291o8_281",
+  "footer": "awsui_footer_14iqq_291o8_292",
+  "with-divider": "awsui_with-divider_14iqq_291o8_295"
 };
   

package/lib/internal/template/container/styles.scoped.css

@@ -50,8 +50,6 @@
  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
@@ -64,6 +62,8 @@
  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
@@ -94,7 +94,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_14iqq_45n65_97:not(#\9) {
+.awsui_root_14iqq_291o8_97:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -132,97 +132,160 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
   word-wrap: break-word;
+  position: relative;
 }
-.awsui_root-fit-height_14iqq_45n65_110:not(#\9) {
+.awsui_root_14iqq_291o8_97.awsui_fit-height_14iqq_291o8_111:not(#\9) {
   display: flex;
   flex-direction: column;
-  overflow: hidden;
   height: 100%;
 }
-.awsui_root_14iqq_45n65_97.awsui_variant-default_14iqq_45n65_116:not(#\9), .awsui_root_14iqq_45n65_97.awsui_variant-stacked_14iqq_45n65_116:not(#\9) {
-  box-shadow: var(--shadow-container-0bkp96, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
-  border-top: var(--border-container-top-width-fs2udu, 1px) solid var(--color-border-container-top-1itxac, #eaeded);
+.awsui_root_14iqq_291o8_97.awsui_variant-default_14iqq_291o8_116:not(#\9), .awsui_root_14iqq_291o8_97.awsui_variant-stacked_14iqq_291o8_116:not(#\9) {
   border-radius: var(--border-radius-container-1aveko, 0px);
   box-sizing: border-box;
   background-color: var(--color-background-container-content-o88wxm, #ffffff);
 }
+.awsui_root_14iqq_291o8_97.awsui_variant-default_14iqq_291o8_116:not(#\9)::before, .awsui_root_14iqq_291o8_97.awsui_variant-stacked_14iqq_291o8_116:not(#\9)::before {
+  content: "";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  background: transparent;
+  box-sizing: border-box;
+  border-color: transparent;
+  border-top: var(--border-container-top-width-fs2udu, 1px) solid var(--color-border-container-top-1itxac, #eaeded);
+  border-radius: var(--border-radius-container-1aveko, 0px);
+  z-index: 1;
+}
+.awsui_root_14iqq_291o8_97.awsui_variant-default_14iqq_291o8_116:not(#\9)::after, .awsui_root_14iqq_291o8_97.awsui_variant-stacked_14iqq_291o8_116:not(#\9)::after {
+  content: "";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  background: transparent;
+  box-sizing: border-box;
+  box-shadow: var(--shadow-container-0bkp96, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
+  border-radius: var(--border-radius-container-1aveko, 0px);
+  mix-blend-mode: multiply;
+}
 @media screen and (-ms-high-contrast: active) {
-  .awsui_root_14iqq_45n65_97.awsui_variant-default_14iqq_45n65_116:not(#\9), .awsui_root_14iqq_45n65_97.awsui_variant-stacked_14iqq_45n65_116:not(#\9) {
+  .awsui_root_14iqq_291o8_97.awsui_variant-default_14iqq_291o8_116:not(#\9), .awsui_root_14iqq_291o8_97.awsui_variant-stacked_14iqq_291o8_116:not(#\9) {
     border: var(--border-field-width-y6x4sn, 1px) solid var(--color-border-container-top-1itxac, #eaeded);
   }
 }
-.awsui_root_14iqq_45n65_97.awsui_variant-stacked_14iqq_45n65_116:not(#\9):not(:last-child) {
+.awsui_root_14iqq_291o8_97.awsui_variant-stacked_14iqq_291o8_116:not(#\9):not(:last-child), .awsui_root_14iqq_291o8_97.awsui_variant-stacked_14iqq_291o8_116:not(#\9):not(:last-child)::before, .awsui_root_14iqq_291o8_97.awsui_variant-stacked_14iqq_291o8_116:not(#\9):not(:last-child)::after {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
-.awsui_root_14iqq_45n65_97.awsui_variant-stacked_14iqq_45n65_116 + .awsui_root_14iqq_45n65_97.awsui_variant-stacked_14iqq_45n65_116:not(#\9) {
-  border-top: var(--border-divider-section-width-5a4cv1, 1px) solid var(--color-border-divider-default-k96bks, #eaeded);
+.awsui_root_14iqq_291o8_97.awsui_variant-stacked_14iqq_291o8_116 + .awsui_root_14iqq_291o8_97.awsui_variant-stacked_14iqq_291o8_116:not(#\9), .awsui_root_14iqq_291o8_97.awsui_variant-stacked_14iqq_291o8_116 + .awsui_root_14iqq_291o8_97.awsui_variant-stacked_14iqq_291o8_116:not(#\9)::before, .awsui_root_14iqq_291o8_97.awsui_variant-stacked_14iqq_291o8_116 + .awsui_root_14iqq_291o8_97.awsui_variant-stacked_14iqq_291o8_116:not(#\9)::after {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
+}
+.awsui_root_14iqq_291o8_97.awsui_variant-stacked_14iqq_291o8_116 + .awsui_root_14iqq_291o8_97.awsui_variant-stacked_14iqq_291o8_116:not(#\9)::before {
+  border-top: var(--border-divider-section-width-5a4cv1, 1px) solid var(--color-border-divider-default-k96bks, #eaeded);
+}
+.awsui_root_14iqq_291o8_97.awsui_variant-stacked_14iqq_291o8_116 + .awsui_root_14iqq_291o8_97.awsui_variant-stacked_14iqq_291o8_116:not(#\9)::after {
   box-shadow: var(--shadow-container-stacked-j8j87i, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
 }
+.awsui_root_14iqq_291o8_97.awsui_sticky-enabled_14iqq_291o8_169:not(#\9)::before {
+  top: calc(-1 * var(--border-container-top-width-fs2udu, 1px));
+}
+.awsui_root_14iqq_291o8_97.awsui_sticky-enabled_14iqq_291o8_169.awsui_variant-stacked_14iqq_291o8_116:not(#\9)::before {
+  top: calc(-1 * var(--border-divider-section-width-5a4cv1, 1px));
+}
 
-.awsui_header_14iqq_45n65_139:not(#\9) {
+.awsui_header_14iqq_291o8_176:not(#\9) {
   background-color: var(--color-background-container-header-g9rg0j, #fafafa);
   border-top-left-radius: var(--border-radius-container-1aveko, 0px);
   border-top-right-radius: var(--border-radius-container-1aveko, 0px);
 }
-.awsui_header-sticky-disabled_14iqq_45n65_144:not(#\9) {
+.awsui_header-sticky-disabled_14iqq_291o8_181:not(#\9) {
   position: relative;
   z-index: 1;
 }
-.awsui_header-sticky-enabled_14iqq_45n65_148:not(#\9) {
+.awsui_header-sticky-enabled_14iqq_291o8_185:not(#\9) {
   top: 0;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   position: sticky;
   z-index: 800;
 }
-.awsui_header-stuck_14iqq_45n65_154:not(#\9) {
-  box-shadow: var(--shadow-sticky-embedded-5acv0s, 0px 1px 4px -2px rgba(0, 28, 36, 0.5));
-  border: 0;
+.awsui_header-stuck_14iqq_291o8_191:not(#\9) {
   border-radius: 0;
 }
-.awsui_header-dynamic-height_14iqq_45n65_159.awsui_header-stuck_14iqq_45n65_154:not(#\9) {
+.awsui_header-stuck_14iqq_291o8_191:not(#\9)::before {
+  border: 0;
+}
+.awsui_header-stuck_14iqq_291o8_191:not(#\9):not(.awsui_header-variant-cards_14iqq_291o8_197) {
+  box-shadow: var(--shadow-sticky-embedded-5acv0s, 0px 1px 4px -2px rgba(0, 28, 36, 0.5));
+}
+.awsui_header-dynamic-height_14iqq_291o8_200.awsui_header-stuck_14iqq_291o8_191:not(#\9) {
   margin-bottom: calc(var(--font-heading-xl-line-height-qeciux, 36px) - var(--font-heading-l-line-height-oujdab, 22px));
 }
-.awsui_header_14iqq_45n65_139:not(#\9):not(:empty) {
+.awsui_header_14iqq_291o8_176:not(#\9):not(:empty) {
   border-bottom: var(--border-container-sticky-width-pybmba, 1px) solid var(--color-border-container-divider-z203b8, #eaeded);
 }
-.awsui_header_14iqq_45n65_139.awsui_with-paddings_14iqq_45n65_165:not(#\9) {
+.awsui_header_14iqq_291o8_176.awsui_with-paddings_14iqq_291o8_206:not(#\9) {
   padding: var(--space-container-header-vertical-0bd19u, 12px) var(--space-container-horizontal-tlw03i, 20px);
 }
-.awsui_header_14iqq_45n65_139.awsui_with-hidden-content_14iqq_45n65_168:not(#\9) {
+.awsui_header_14iqq_291o8_176.awsui_with-hidden-content_14iqq_291o8_209:not(#\9) {
   border-bottom-left-radius: var(--border-radius-container-1aveko, 0px);
   border-bottom-right-radius: var(--border-radius-container-1aveko, 0px);
 }
-.awsui_header-variant-cards_14iqq_45n65_172:not(#\9) {
-  box-shadow: var(--shadow-container-0bkp96, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
+.awsui_header-variant-cards_14iqq_291o8_197:not(#\9) {
+  border-radius: var(--border-radius-container-1aveko, 0px);
+  box-sizing: border-box;
+}
+.awsui_header-variant-cards_14iqq_291o8_197:not(#\9):not(.awsui_header-sticky-enabled_14iqq_291o8_185) {
+  position: relative;
+}
+.awsui_header-variant-cards_14iqq_291o8_197:not(#\9)::before {
+  content: "";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  background: transparent;
+  box-sizing: border-box;
+  border-color: transparent;
   border-top: var(--border-container-top-width-fs2udu, 1px) solid var(--color-border-container-top-1itxac, #eaeded);
   border-radius: var(--border-radius-container-1aveko, 0px);
+  z-index: 1;
+}
+.awsui_header-variant-cards_14iqq_291o8_197:not(#\9)::after {
+  content: "";
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  background: transparent;
   box-sizing: border-box;
+  box-shadow: var(--shadow-container-0bkp96, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
+  border-radius: var(--border-radius-container-1aveko, 0px);
+  mix-blend-mode: multiply;
 }
 @media screen and (-ms-high-contrast: active) {
-  .awsui_header-variant-cards_14iqq_45n65_172:not(#\9) {
+  .awsui_header-variant-cards_14iqq_291o8_197:not(#\9) {
     border: var(--border-field-width-y6x4sn, 1px) solid var(--color-border-container-top-1itxac, #eaeded);
   }
 }
-.awsui_header-variant-cards_14iqq_45n65_172:not(#\9):not(:empty) {
-  border-bottom: 1px solid #d5dbdb;
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-}
-@supports (--css-variable-support-check: #000) {
-  .awsui_header-variant-cards_14iqq_45n65_172:not(#\9):not(:empty) {
-    border-bottom: 0;
-  }
-}
-.awsui_header-variant-cards_14iqq_45n65_172.awsui_header-stuck_14iqq_45n65_154:not(#\9) {
+.awsui_header-variant-cards_14iqq_291o8_197.awsui_header-stuck_14iqq_291o8_191:not(#\9)::after, .awsui_header-variant-cards_14iqq_291o8_197.awsui_header-stuck_14iqq_291o8_191:not(#\9)::before {
+  border: 0;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
-.awsui_header-variant-full-page_14iqq_45n65_196.awsui_header-stuck_14iqq_45n65_154:not(#\9) {
+.awsui_header-variant-full-page_14iqq_291o8_259.awsui_header-stuck_14iqq_291o8_191:not(#\9) {
   box-shadow: none;
 }
-.awsui_header-variant-full-page_14iqq_45n65_196.awsui_header-stuck_14iqq_45n65_154:not(#\9)::after {
+.awsui_header-variant-full-page_14iqq_291o8_259.awsui_header-stuck_14iqq_291o8_191:not(#\9)::after {
   content: "";
   position: absolute;
   right: 0;
@@ -237,24 +300,24 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 The dynamic height dark header needs a background that will cover
 the default white background of the container component.
 */
-.awsui_dark-header_14iqq_45n65_214:not(#\9) {
+.awsui_dark-header_14iqq_291o8_277:not(#\9) {
   background-color: var(--color-background-layout-main-q0tbxx, #f2f3f3);
 }
 
-.awsui_root-fit-height_14iqq_45n65_110 > .awsui_content_14iqq_45n65_218:not(#\9) {
+.awsui_fit-height_14iqq_291o8_111 > .awsui_content_14iqq_291o8_281:not(#\9) {
   flex: 1;
   overflow: auto;
 }
-.awsui_content_14iqq_45n65_218.awsui_with-paddings_14iqq_45n65_165:not(#\9) {
+.awsui_content_14iqq_291o8_281.awsui_with-paddings_14iqq_291o8_206:not(#\9) {
   padding: var(--space-scaled-l-t03y3z, 20px) var(--space-container-horizontal-tlw03i, 20px);
 }
-.awsui_header_14iqq_45n65_139 + .awsui_content_14iqq_45n65_218.awsui_with-paddings_14iqq_45n65_165:not(#\9) {
+.awsui_header_14iqq_291o8_176 + .awsui_content_14iqq_291o8_281.awsui_with-paddings_14iqq_291o8_206:not(#\9) {
   padding-top: var(--space-container-content-top-u412x3, 16px);
 }
 
-.awsui_footer_14iqq_45n65_229.awsui_with-paddings_14iqq_45n65_165:not(#\9) {
+.awsui_footer_14iqq_291o8_292.awsui_with-paddings_14iqq_291o8_206:not(#\9) {
   padding: var(--space-scaled-s-cu1hzn, 12px) var(--space-container-horizontal-tlw03i, 20px);
 }
-.awsui_footer_14iqq_45n65_229.awsui_with-divider_14iqq_45n65_232:not(#\9) {
+.awsui_footer_14iqq_291o8_292.awsui_with-divider_14iqq_291o8_295:not(#\9) {
   border-top: var(--border-divider-section-width-5a4cv1, 1px) solid var(--color-border-divider-default-k96bks, #eaeded);
 }

package/lib/internal/template/container/styles.selectors.js

@@ -2,22 +2,23 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_14iqq_45n65_97",
-  "root-fit-height": "awsui_root-fit-height_14iqq_45n65_110",
-  "variant-default": "awsui_variant-default_14iqq_45n65_116",
-  "variant-stacked": "awsui_variant-stacked_14iqq_45n65_116",
-  "header": "awsui_header_14iqq_45n65_139",
-  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_45n65_144",
-  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_45n65_148",
-  "header-stuck": "awsui_header-stuck_14iqq_45n65_154",
-  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_45n65_159",
-  "with-paddings": "awsui_with-paddings_14iqq_45n65_165",
-  "with-hidden-content": "awsui_with-hidden-content_14iqq_45n65_168",
-  "header-variant-cards": "awsui_header-variant-cards_14iqq_45n65_172",
-  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_45n65_196",
-  "dark-header": "awsui_dark-header_14iqq_45n65_214",
-  "content": "awsui_content_14iqq_45n65_218",
-  "footer": "awsui_footer_14iqq_45n65_229",
-  "with-divider": "awsui_with-divider_14iqq_45n65_232"
+  "root": "awsui_root_14iqq_291o8_97",
+  "fit-height": "awsui_fit-height_14iqq_291o8_111",
+  "variant-default": "awsui_variant-default_14iqq_291o8_116",
+  "variant-stacked": "awsui_variant-stacked_14iqq_291o8_116",
+  "sticky-enabled": "awsui_sticky-enabled_14iqq_291o8_169",
+  "header": "awsui_header_14iqq_291o8_176",
+  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_291o8_181",
+  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_291o8_185",
+  "header-stuck": "awsui_header-stuck_14iqq_291o8_191",
+  "header-variant-cards": "awsui_header-variant-cards_14iqq_291o8_197",
+  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_291o8_200",
+  "with-paddings": "awsui_with-paddings_14iqq_291o8_206",
+  "with-hidden-content": "awsui_with-hidden-content_14iqq_291o8_209",
+  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_291o8_259",
+  "dark-header": "awsui_dark-header_14iqq_291o8_277",
+  "content": "awsui_content_14iqq_291o8_281",
+  "footer": "awsui_footer_14iqq_291o8_292",
+  "with-divider": "awsui_with-divider_14iqq_291o8_295"
 };
   

package/lib/internal/template/container/use-sticky-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-sticky-header.d.ts","sourceRoot":"","sources":["../../../src/container/use-sticky-header.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAA6E,MAAM,OAAO,CAAC;AAQ7G,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,mDAA8D,CAAC;AAE/F,eAAO,MAAM,eAAe,YACjB,UAAU,cAAc,CAAC,aACvB,UAAU,cAAc,CAAC,mBACnB,OAAO,mBACP,MAAM;;;;;;;;;;CAqFxB,CAAC;AAEF,wBAAgB,uBAAuB,YAGtC"}
+{"version":3,"file":"use-sticky-header.d.ts","sourceRoot":"","sources":["../../../src/container/use-sticky-header.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAoE,MAAM,OAAO,CAAC;AAQpG,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,mDAA8D,CAAC;AAE/F,eAAO,MAAM,eAAe,YACjB,UAAU,cAAc,CAAC,aACvB,UAAU,cAAc,CAAC,mBACnB,OAAO,mBACP,MAAM;;;;;;;;;;CAyExB,CAAC;AAEF,wBAAgB,uBAAuB,YAGtC"}

package/lib/internal/template/container/use-sticky-header.js

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { useState, useLayoutEffect, useCallback, useEffect, createContext, useMemo } from 'react';
+import { useState, useLayoutEffect, useCallback, useEffect, createContext } from 'react';
 import { useAppLayoutContext } from '../internal/context/app-layout-context';
 import { useMobile } from '../internal/hooks/use-mobile';
 import { findUpUntil, supportsStickyPosition } from '../internal/utils/dom';
@@ -9,17 +9,6 @@ import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import customCssProps from '../internal/generated/custom-css-properties';
 export var StickyHeaderContext = createContext({ isStuck: false });
 export var useStickyHeader = function (rootRef, headerRef, __stickyHeader, __stickyOffset) {
-    var currentRootRef = rootRef.current;
-    var currentHeaderRef = headerRef.current;
-    var totalBorder = useMemo(function () {
-        var containerRootBorder = currentRootRef
-            ? parseInt(getComputedStyle(currentRootRef).getPropertyValue('border-top-width'), 10)
-            : 0;
-        var headerBorder = currentHeaderRef
-            ? parseInt(getComputedStyle(currentHeaderRef).getPropertyValue('border-top-width'), 10)
-            : 0;
-        return containerRootBorder + headerBorder;
-    }, [currentRootRef, currentHeaderRef]);
     // We reach into AppLayoutContext in case sticky header needs to be offset down by the height
     // of other sticky elements positioned on top of the view.
     var stickyOffsetTop = useAppLayoutContext().stickyOffsetTop;
@@ -47,7 +36,7 @@ export var useStickyHeader = function (rootRef, headerRef, __stickyHeader, __sti
      * body scroll then we will use that property. When a component is used outside AppLayout, we fall back
      * to the default offset calculated in AppLayoutDomContext.
      */
-    var computedOffset = "".concat(effectiveStickyOffset - totalBorder, "px");
+    var computedOffset = "".concat(effectiveStickyOffset, "px");
     if (isRefresh && !hasInnerOverflowParents) {
         computedOffset = "var(".concat(customCssProps.offsetTopWithNotifications, ", ").concat(computedOffset, ")");
     }
@@ -64,14 +53,14 @@ export var useStickyHeader = function (rootRef, headerRef, __stickyHeader, __sti
         if (rootRef.current && headerRef.current) {
             var rootTop = rootRef.current.getBoundingClientRect().top;
             var headerTop = headerRef.current.getBoundingClientRect().top;
-            if (rootTop + totalBorder < headerTop) {
+            if (rootTop < headerTop) {
                 setIsStuck(true);
             }
             else {
                 setIsStuck(false);
             }
         }
-    }, [rootRef, headerRef, totalBorder]);
+    }, [rootRef, headerRef]);
     useEffect(function () {
         if (isSticky) {
             window.addEventListener('scroll', checkIfStuck, true);

package/lib/internal/template/container/use-sticky-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-sticky-header.js","sourceRoot":"","sources":["../../../src/container/use-sticky-header.ts"],"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 { RefObject, useState, useLayoutEffect, useCallback, useEffect, createContext, useMemo } from 'react';\nimport { useAppLayoutContext } from '../internal/context/app-layout-context';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { findUpUntil, supportsStickyPosition } from '../internal/utils/dom';\nimport { getOverflowParents } from '../internal/utils/scrollable-containers';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport customCssProps from '../internal/generated/custom-css-properties';\n\ninterface StickyHeaderContextProps {\n  isStuck: boolean;\n}\n\nexport const StickyHeaderContext = createContext<StickyHeaderContextProps>({ isStuck: false });\n\nexport const useStickyHeader = (\n  rootRef: RefObject<HTMLDivElement>,\n  headerRef: RefObject<HTMLDivElement>,\n  __stickyHeader?: boolean,\n  __stickyOffset?: number\n) => {\n  const currentRootRef = rootRef.current;\n  const currentHeaderRef = headerRef.current;\n  const totalBorder = useMemo(() => {\n    const containerRootBorder = currentRootRef\n      ? parseInt(getComputedStyle(currentRootRef).getPropertyValue('border-top-width'), 10)\n      : 0;\n    const headerBorder = currentHeaderRef\n      ? parseInt(getComputedStyle(currentHeaderRef).getPropertyValue('border-top-width'), 10)\n      : 0;\n    return containerRootBorder + headerBorder;\n  }, [currentRootRef, currentHeaderRef]);\n\n  // We reach into AppLayoutContext in case sticky header needs to be offset down by the height\n  // of other sticky elements positioned on top of the view.\n  const { stickyOffsetTop } = useAppLayoutContext();\n  const isSticky = useSupportsStickyHeader() && !!__stickyHeader;\n  const isRefresh = useVisualRefresh();\n\n  // If it has overflow parents inside the app layout, we shouldn't apply a sticky offset.\n  const [hasInnerOverflowParents, setHasInnerOverflowParents] = useState(false);\n  const [isStuck, setIsStuck] = useState(false);\n  useLayoutEffect(() => {\n    if (rootRef.current) {\n      const overflowParents = getOverflowParents(rootRef.current);\n      const mainElement = findUpUntil(rootRef.current, elem => elem.tagName === 'MAIN');\n      // In both versions of the app layout, the scrolling element for disableBodyScroll\n      // is the <main>. If the closest overflow parent is also the closest <main> and we have\n      // offset values, it's safe to assume that it's the app layout scroll root and we\n      // should stop there.\n      setHasInnerOverflowParents(overflowParents.length > 0 && overflowParents[0] !== mainElement);\n    }\n  }, [rootRef]);\n\n  const effectiveStickyOffset = __stickyOffset ?? (hasInnerOverflowParents ? 0 : stickyOffsetTop);\n\n  /**\n   * The AppLayout refactor removed the need for passing the sticky offset in px all the time through the\n   * AppLayoutDomContext provider because that information already exists on the DOM in a custom property\n   * on the Layout subcomponent. Thus, if the Container header is sticky, we are in Visual Refresh and use\n   * body scroll then we will use that property. When a component is used outside AppLayout, we fall back\n   * to the default offset calculated in AppLayoutDomContext.\n   */\n  let computedOffset = `${effectiveStickyOffset - totalBorder}px`;\n  if (isRefresh && !hasInnerOverflowParents) {\n    computedOffset = `var(${customCssProps.offsetTopWithNotifications}, ${computedOffset})`;\n  }\n\n  const stickyStyles = isSticky\n    ? {\n        style: {\n          top: computedOffset,\n        },\n      }\n    : {};\n\n  // \"stuck\" state, when the header has moved from its original posititon has a\n  // box-shadow, applied here by a \"header-stuck\" className\n  const checkIfStuck = useCallback(() => {\n    if (rootRef.current && headerRef.current) {\n      const rootTop = rootRef.current.getBoundingClientRect().top;\n      const headerTop = headerRef.current.getBoundingClientRect().top;\n      if (rootTop + totalBorder < headerTop) {\n        setIsStuck(true);\n      } else {\n        setIsStuck(false);\n      }\n    }\n  }, [rootRef, headerRef, totalBorder]);\n  useEffect(() => {\n    if (isSticky) {\n      window.addEventListener('scroll', checkIfStuck, true);\n      window.addEventListener('resize', checkIfStuck);\n      return () => {\n        window.removeEventListener('scroll', checkIfStuck, true);\n        window.removeEventListener('resize', checkIfStuck);\n      };\n    }\n  }, [isSticky, checkIfStuck]);\n  return {\n    isSticky,\n    isStuck,\n    stickyStyles,\n  };\n};\n\nexport function useSupportsStickyHeader() {\n  const isMobile = useMobile();\n  return supportsStickyPosition() && !isMobile;\n}\n"]}
+{"version":3,"file":"use-sticky-header.js","sourceRoot":"","sources":["../../../src/container/use-sticky-header.ts"],"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 { RefObject, useState, useLayoutEffect, useCallback, useEffect, createContext } from 'react';\nimport { useAppLayoutContext } from '../internal/context/app-layout-context';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { findUpUntil, supportsStickyPosition } from '../internal/utils/dom';\nimport { getOverflowParents } from '../internal/utils/scrollable-containers';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport customCssProps from '../internal/generated/custom-css-properties';\n\ninterface StickyHeaderContextProps {\n  isStuck: boolean;\n}\n\nexport const StickyHeaderContext = createContext<StickyHeaderContextProps>({ isStuck: false });\n\nexport const useStickyHeader = (\n  rootRef: RefObject<HTMLDivElement>,\n  headerRef: RefObject<HTMLDivElement>,\n  __stickyHeader?: boolean,\n  __stickyOffset?: number\n) => {\n  // We reach into AppLayoutContext in case sticky header needs to be offset down by the height\n  // of other sticky elements positioned on top of the view.\n  const { stickyOffsetTop } = useAppLayoutContext();\n  const isSticky = useSupportsStickyHeader() && !!__stickyHeader;\n  const isRefresh = useVisualRefresh();\n\n  // If it has overflow parents inside the app layout, we shouldn't apply a sticky offset.\n  const [hasInnerOverflowParents, setHasInnerOverflowParents] = useState(false);\n  const [isStuck, setIsStuck] = useState(false);\n  useLayoutEffect(() => {\n    if (rootRef.current) {\n      const overflowParents = getOverflowParents(rootRef.current);\n      const mainElement = findUpUntil(rootRef.current, elem => elem.tagName === 'MAIN');\n      // In both versions of the app layout, the scrolling element for disableBodyScroll\n      // is the <main>. If the closest overflow parent is also the closest <main> and we have\n      // offset values, it's safe to assume that it's the app layout scroll root and we\n      // should stop there.\n      setHasInnerOverflowParents(overflowParents.length > 0 && overflowParents[0] !== mainElement);\n    }\n  }, [rootRef]);\n\n  const effectiveStickyOffset = __stickyOffset ?? (hasInnerOverflowParents ? 0 : stickyOffsetTop);\n\n  /**\n   * The AppLayout refactor removed the need for passing the sticky offset in px all the time through the\n   * AppLayoutDomContext provider because that information already exists on the DOM in a custom property\n   * on the Layout subcomponent. Thus, if the Container header is sticky, we are in Visual Refresh and use\n   * body scroll then we will use that property. When a component is used outside AppLayout, we fall back\n   * to the default offset calculated in AppLayoutDomContext.\n   */\n  let computedOffset = `${effectiveStickyOffset}px`;\n  if (isRefresh && !hasInnerOverflowParents) {\n    computedOffset = `var(${customCssProps.offsetTopWithNotifications}, ${computedOffset})`;\n  }\n\n  const stickyStyles = isSticky\n    ? {\n        style: {\n          top: computedOffset,\n        },\n      }\n    : {};\n\n  // \"stuck\" state, when the header has moved from its original posititon has a\n  // box-shadow, applied here by a \"header-stuck\" className\n  const checkIfStuck = useCallback(() => {\n    if (rootRef.current && headerRef.current) {\n      const rootTop = rootRef.current.getBoundingClientRect().top;\n      const headerTop = headerRef.current.getBoundingClientRect().top;\n      if (rootTop < headerTop) {\n        setIsStuck(true);\n      } else {\n        setIsStuck(false);\n      }\n    }\n  }, [rootRef, headerRef]);\n  useEffect(() => {\n    if (isSticky) {\n      window.addEventListener('scroll', checkIfStuck, true);\n      window.addEventListener('resize', checkIfStuck);\n      return () => {\n        window.removeEventListener('scroll', checkIfStuck, true);\n        window.removeEventListener('resize', checkIfStuck);\n      };\n    }\n  }, [isSticky, checkIfStuck]);\n  return {\n    isSticky,\n    isStuck,\n    stickyStyles,\n  };\n};\n\nexport function useSupportsStickyHeader() {\n  const isMobile = useMobile();\n  return supportsStickyPosition() && !isMobile;\n}\n"]}

package/lib/internal/template/content-layout/styles.css.js

@@ -1,12 +1,12 @@
 
     import './styles.scoped.css';
     export default {
-  "layout": "awsui_layout_5gtk3_i11cy_99",
-  "is-visual-refresh": "awsui_is-visual-refresh_5gtk3_i11cy_99",
-  "background": "awsui_background_5gtk3_i11cy_102",
-  "header": "awsui_header_5gtk3_i11cy_105",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_5gtk3_i11cy_115",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_5gtk3_i11cy_132",
-  "content": "awsui_content_5gtk3_i11cy_141"
+  "layout": "awsui_layout_5gtk3_1uu2a_99",
+  "is-visual-refresh": "awsui_is-visual-refresh_5gtk3_1uu2a_99",
+  "background": "awsui_background_5gtk3_1uu2a_102",
+  "header": "awsui_header_5gtk3_1uu2a_105",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_5gtk3_1uu2a_115",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_5gtk3_1uu2a_132",
+  "content": "awsui_content_5gtk3_1uu2a_141"
 };
   

package/lib/internal/template/content-layout/styles.scoped.css

@@ -50,8 +50,6 @@
  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
@@ -64,6 +62,8 @@
  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
@@ -96,49 +96,49 @@ visual refresh mode. The padding is still added to the header
 in this scenario because otherwise the header and child 
 nodes will directly touch with no gap between them.
 */
-.awsui_layout_5gtk3_i11cy_99:not(#\9):not(.awsui_is-visual-refresh_5gtk3_i11cy_99) {
+.awsui_layout_5gtk3_1uu2a_99:not(#\9):not(.awsui_is-visual-refresh_5gtk3_1uu2a_99) {
   display: contents;
 }
-.awsui_layout_5gtk3_i11cy_99:not(#\9):not(.awsui_is-visual-refresh_5gtk3_i11cy_99) > .awsui_background_5gtk3_i11cy_102 {
+.awsui_layout_5gtk3_1uu2a_99:not(#\9):not(.awsui_is-visual-refresh_5gtk3_1uu2a_99) > .awsui_background_5gtk3_1uu2a_102 {
   display: none;
 }
-.awsui_layout_5gtk3_i11cy_99:not(#\9):not(.awsui_is-visual-refresh_5gtk3_i11cy_99) > .awsui_header_5gtk3_i11cy_105 {
+.awsui_layout_5gtk3_1uu2a_99:not(#\9):not(.awsui_is-visual-refresh_5gtk3_1uu2a_99) > .awsui_header_5gtk3_1uu2a_105 {
   padding-bottom: var(--space-content-header-padding-bottom-m7tdoi, 16px);
 }
 
-.awsui_layout_5gtk3_i11cy_99.awsui_is-visual-refresh_5gtk3_i11cy_99:not(#\9) {
+.awsui_layout_5gtk3_1uu2a_99.awsui_is-visual-refresh_5gtk3_1uu2a_99:not(#\9) {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   grid-template-rows: auto var(--space-dark-header-overlap-distance-ync2s3, 0px) 1fr;
   min-height: 100%;
 }
-.awsui_layout_5gtk3_i11cy_99.awsui_is-visual-refresh_5gtk3_i11cy_99.awsui_is-overlap-disabled_5gtk3_i11cy_115:not(#\9) {
+.awsui_layout_5gtk3_1uu2a_99.awsui_is-visual-refresh_5gtk3_1uu2a_99.awsui_is-overlap-disabled_5gtk3_1uu2a_115:not(#\9) {
   grid-template-rows: auto 0 1fr;
 }
-.awsui_layout_5gtk3_i11cy_99.awsui_is-visual-refresh_5gtk3_i11cy_99 > .awsui_background_5gtk3_i11cy_102:not(#\9) {
+.awsui_layout_5gtk3_1uu2a_99.awsui_is-visual-refresh_5gtk3_1uu2a_99 > .awsui_background_5gtk3_1uu2a_102:not(#\9) {
   background-color: var(--color-background-layout-main-q0tbxx, #f2f3f3);
   grid-column: 1;
   grid-row: 1/3;
 }
-.awsui_layout_5gtk3_i11cy_99.awsui_is-visual-refresh_5gtk3_i11cy_99 > .awsui_background_5gtk3_i11cy_102.awsui_is-overlap-disabled_5gtk3_i11cy_115:not(#\9) {
+.awsui_layout_5gtk3_1uu2a_99.awsui_is-visual-refresh_5gtk3_1uu2a_99 > .awsui_background_5gtk3_1uu2a_102.awsui_is-overlap-disabled_5gtk3_1uu2a_115:not(#\9) {
   grid-row: 1/2;
 }
-.awsui_layout_5gtk3_i11cy_99.awsui_is-visual-refresh_5gtk3_i11cy_99 > .awsui_header_5gtk3_i11cy_105:not(#\9) {
+.awsui_layout_5gtk3_1uu2a_99.awsui_is-visual-refresh_5gtk3_1uu2a_99 > .awsui_header_5gtk3_1uu2a_105:not(#\9) {
   grid-column: 1;
   grid-row: 1;
   padding-bottom: var(--space-content-header-padding-bottom-m7tdoi, 16px);
 }
 @media (min-width: 689px) {
-  .awsui_layout_5gtk3_i11cy_99.awsui_is-visual-refresh_5gtk3_i11cy_99 > .awsui_header_5gtk3_i11cy_105.awsui_has-breadcrumbs_5gtk3_i11cy_132:not(#\9) {
+  .awsui_layout_5gtk3_1uu2a_99.awsui_is-visual-refresh_5gtk3_1uu2a_99 > .awsui_header_5gtk3_1uu2a_105.awsui_has-breadcrumbs_5gtk3_1uu2a_132:not(#\9) {
     padding-top: var(--space-xxs-ynfts5, 4px);
   }
 }
 @media (max-width: 688px) {
-  .awsui_layout_5gtk3_i11cy_99.awsui_is-visual-refresh_5gtk3_i11cy_99 > .awsui_header_5gtk3_i11cy_105:not(#\9) {
+  .awsui_layout_5gtk3_1uu2a_99.awsui_is-visual-refresh_5gtk3_1uu2a_99 > .awsui_header_5gtk3_1uu2a_105:not(#\9) {
     padding: var(--space-m-17eucw, 16px) 0 var(--space-content-header-padding-bottom-m7tdoi, 16px);
   }
 }
-.awsui_layout_5gtk3_i11cy_99.awsui_is-visual-refresh_5gtk3_i11cy_99 > .awsui_content_5gtk3_i11cy_141:not(#\9) {
+.awsui_layout_5gtk3_1uu2a_99.awsui_is-visual-refresh_5gtk3_1uu2a_99 > .awsui_content_5gtk3_1uu2a_141:not(#\9) {
   grid-column: 1;
   grid-row: 2/4;
 }

package/lib/internal/template/content-layout/styles.selectors.js

@@ -2,12 +2,12 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "layout": "awsui_layout_5gtk3_i11cy_99",
-  "is-visual-refresh": "awsui_is-visual-refresh_5gtk3_i11cy_99",
-  "background": "awsui_background_5gtk3_i11cy_102",
-  "header": "awsui_header_5gtk3_i11cy_105",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_5gtk3_i11cy_115",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_5gtk3_i11cy_132",
-  "content": "awsui_content_5gtk3_i11cy_141"
+  "layout": "awsui_layout_5gtk3_1uu2a_99",
+  "is-visual-refresh": "awsui_is-visual-refresh_5gtk3_1uu2a_99",
+  "background": "awsui_background_5gtk3_1uu2a_102",
+  "header": "awsui_header_5gtk3_1uu2a_105",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_5gtk3_1uu2a_115",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_5gtk3_1uu2a_132",
+  "content": "awsui_content_5gtk3_1uu2a_141"
 };
   

package/lib/internal/template/date-picker/styles.css.js

@@ -1,12 +1,12 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_145pa_1txbx_93",
-  "focus-lock": "awsui_focus-lock_145pa_1txbx_106",
-  "calendar": "awsui_calendar_145pa_1txbx_110",
-  "date-picker-container": "awsui_date-picker-container_145pa_1txbx_123",
-  "date-picker-trigger": "awsui_date-picker-trigger_145pa_1txbx_128",
-  "date-picker-input": "awsui_date-picker-input_145pa_1txbx_132",
-  "open-calendar-button": "awsui_open-calendar-button_145pa_1txbx_137"
+  "root": "awsui_root_145pa_125bf_93",
+  "focus-lock": "awsui_focus-lock_145pa_125bf_106",
+  "calendar": "awsui_calendar_145pa_125bf_110",
+  "date-picker-container": "awsui_date-picker-container_145pa_125bf_123",
+  "date-picker-trigger": "awsui_date-picker-trigger_145pa_125bf_128",
+  "date-picker-input": "awsui_date-picker-input_145pa_125bf_132",
+  "open-calendar-button": "awsui_open-calendar-button_145pa_125bf_137"
 };