@cloudscape-design/components-themeable 3.0.663 → 3.0.665

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

@@ -6,8 +6,6 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-/* stylelint-disable plugin/no-unsupported-browser-features */
-/* stylelint-enable plugin/no-unsupported-browser-features */
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
@@ -100,7 +98,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_evm42_103:not(#\9) {
+.awsui_root_14iqq_1abie_101:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -137,15 +135,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-wrap: break-word;
   position: relative;
 }
-.awsui_root_14iqq_evm42_103.awsui_fit-height_14iqq_evm42_139:not(#\9) {
+.awsui_root_14iqq_1abie_101.awsui_fit-height_14iqq_1abie_137:not(#\9) {
   display: flex;
   flex-direction: column;
   block-size: 100%;
 }
-.awsui_root_14iqq_evm42_103.awsui_fit-height_14iqq_evm42_139.awsui_with-side-media_14iqq_evm42_144:not(#\9) {
+.awsui_root_14iqq_1abie_101.awsui_fit-height_14iqq_1abie_137.awsui_with-side-media_14iqq_1abie_142:not(#\9) {
   flex-direction: row;
 }
-.awsui_root_14iqq_evm42_103.awsui_variant-default_14iqq_evm42_147:not(#\9), .awsui_root_14iqq_evm42_103.awsui_variant-stacked_14iqq_evm42_147:not(#\9) {
+.awsui_root_14iqq_1abie_101.awsui_variant-default_14iqq_1abie_145:not(#\9), .awsui_root_14iqq_1abie_101.awsui_variant-stacked_14iqq_1abie_145:not(#\9) {
   background-color: var(--color-background-container-content-il2pe5, #ffffff);
   border-start-start-radius: var(--border-radius-container-jm6teg, 0px);
   border-start-end-radius: var(--border-radius-container-jm6teg, 0px);
@@ -153,11 +151,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-jm6teg, 0px);
   box-sizing: border-box;
 }
-.awsui_root_14iqq_evm42_103.awsui_variant-default_14iqq_evm42_147.awsui_refresh_14iqq_evm42_155:not(#\9), .awsui_root_14iqq_evm42_103.awsui_variant-stacked_14iqq_evm42_147.awsui_refresh_14iqq_evm42_155:not(#\9) {
+.awsui_root_14iqq_1abie_101.awsui_variant-default_14iqq_1abie_145.awsui_refresh_14iqq_1abie_153:not(#\9), .awsui_root_14iqq_1abie_101.awsui_variant-stacked_14iqq_1abie_145.awsui_refresh_14iqq_1abie_153:not(#\9) {
   border-block: solid var(--border-divider-section-width-wl9k66, 1px) var(--color-border-divider-default-in8dkg, #eaeded);
   border-inline: solid var(--border-divider-section-width-wl9k66, 1px) var(--color-border-divider-default-in8dkg, #eaeded);
 }
-.awsui_root_14iqq_evm42_103.awsui_variant-default_14iqq_evm42_147:not(#\9):not(.awsui_refresh_14iqq_evm42_155)::before, .awsui_root_14iqq_evm42_103.awsui_variant-stacked_14iqq_evm42_147:not(#\9):not(.awsui_refresh_14iqq_evm42_155)::before {
+.awsui_root_14iqq_1abie_101.awsui_variant-default_14iqq_1abie_145:not(#\9):not(.awsui_refresh_14iqq_1abie_153)::before, .awsui_root_14iqq_1abie_101.awsui_variant-stacked_14iqq_1abie_145:not(#\9):not(.awsui_refresh_14iqq_1abie_153)::before {
   content: "";
   position: absolute;
   inset-inline-start: 0px;
@@ -175,7 +173,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-jm6teg, 0px);
   z-index: 1;
 }
-.awsui_root_14iqq_evm42_103.awsui_variant-default_14iqq_evm42_147:not(#\9):not(.awsui_refresh_14iqq_evm42_155)::after, .awsui_root_14iqq_evm42_103.awsui_variant-stacked_14iqq_evm42_147:not(#\9):not(.awsui_refresh_14iqq_evm42_155)::after {
+.awsui_root_14iqq_1abie_101.awsui_variant-default_14iqq_1abie_145:not(#\9):not(.awsui_refresh_14iqq_1abie_153)::after, .awsui_root_14iqq_1abie_101.awsui_variant-stacked_14iqq_1abie_145:not(#\9):not(.awsui_refresh_14iqq_1abie_153)::after {
   content: "";
   position: absolute;
   inset-inline-start: 0px;
@@ -191,141 +189,141 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-jm6teg, 0px);
   box-shadow: var(--shadow-container-5104ec, 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_evm42_103.awsui_variant-stacked_14iqq_evm42_147:not(#\9):not(:last-child), .awsui_root_14iqq_evm42_103.awsui_variant-stacked_14iqq_evm42_147:not(#\9):not(:last-child)::before, .awsui_root_14iqq_evm42_103.awsui_variant-stacked_14iqq_evm42_147:not(#\9):not(:last-child)::after {
+.awsui_root_14iqq_1abie_101.awsui_variant-stacked_14iqq_1abie_145:not(#\9):not(:last-child), .awsui_root_14iqq_1abie_101.awsui_variant-stacked_14iqq_1abie_145:not(#\9):not(:last-child)::before, .awsui_root_14iqq_1abie_101.awsui_variant-stacked_14iqq_1abie_145:not(#\9):not(:last-child)::after {
   border-end-end-radius: 0;
   border-end-start-radius: 0;
   border-block-end-width: 0;
 }
-.awsui_root_14iqq_evm42_103.awsui_variant-stacked_14iqq_evm42_147 + .awsui_root_14iqq_evm42_103.awsui_variant-stacked_14iqq_evm42_147:not(#\9), .awsui_root_14iqq_evm42_103.awsui_variant-stacked_14iqq_evm42_147 + .awsui_root_14iqq_evm42_103.awsui_variant-stacked_14iqq_evm42_147:not(#\9)::before, .awsui_root_14iqq_evm42_103.awsui_variant-stacked_14iqq_evm42_147 + .awsui_root_14iqq_evm42_103.awsui_variant-stacked_14iqq_evm42_147:not(#\9)::after {
+.awsui_root_14iqq_1abie_101.awsui_variant-stacked_14iqq_1abie_145 + .awsui_root_14iqq_1abie_101.awsui_variant-stacked_14iqq_1abie_145:not(#\9), .awsui_root_14iqq_1abie_101.awsui_variant-stacked_14iqq_1abie_145 + .awsui_root_14iqq_1abie_101.awsui_variant-stacked_14iqq_1abie_145:not(#\9)::before, .awsui_root_14iqq_1abie_101.awsui_variant-stacked_14iqq_1abie_145 + .awsui_root_14iqq_1abie_101.awsui_variant-stacked_14iqq_1abie_145:not(#\9)::after {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
-.awsui_root_14iqq_evm42_103.awsui_variant-stacked_14iqq_evm42_147 + .awsui_root_14iqq_evm42_103.awsui_variant-stacked_14iqq_evm42_147:not(#\9):not(.awsui_refresh_14iqq_evm42_155)::before {
+.awsui_root_14iqq_1abie_101.awsui_variant-stacked_14iqq_1abie_145 + .awsui_root_14iqq_1abie_101.awsui_variant-stacked_14iqq_1abie_145:not(#\9):not(.awsui_refresh_14iqq_1abie_153)::before {
   border-block-start: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-divider-default-in8dkg, #eaeded);
 }
-.awsui_root_14iqq_evm42_103.awsui_sticky-enabled_14iqq_evm42_205:not(#\9):not(.awsui_refresh_14iqq_evm42_155)::before {
+.awsui_root_14iqq_1abie_101.awsui_sticky-enabled_14iqq_1abie_203:not(#\9):not(.awsui_refresh_14iqq_1abie_153)::before {
   inset-block-start: calc(-1 * var(--border-container-top-width-s1x6t0, 1px));
 }
-.awsui_root_14iqq_evm42_103.awsui_sticky-enabled_14iqq_evm42_205:not(#\9):not(.awsui_refresh_14iqq_evm42_155).awsui_variant-stacked_14iqq_evm42_147::before {
+.awsui_root_14iqq_1abie_101.awsui_sticky-enabled_14iqq_1abie_203:not(#\9):not(.awsui_refresh_14iqq_1abie_153).awsui_variant-stacked_14iqq_1abie_145::before {
   inset-block-start: calc(-1 * var(--border-divider-section-width-wl9k66, 1px));
 }
 
-.awsui_with-side-media_14iqq_evm42_144:not(#\9) {
+.awsui_with-side-media_14iqq_1abie_142:not(#\9) {
   display: flex;
   flex-direction: row;
 }
 
-.awsui_with-top-media_14iqq_evm42_217:not(#\9) {
+.awsui_with-top-media_14iqq_1abie_215:not(#\9) {
   display: flex;
   flex-direction: column;
 }
 
-.awsui_content-wrapper_14iqq_evm42_222:not(#\9) {
+.awsui_content-wrapper_14iqq_1abie_220:not(#\9) {
   display: flex;
   flex-direction: column;
   inline-size: 100%;
 }
-.awsui_content-wrapper-fit-height_14iqq_evm42_227:not(#\9) {
+.awsui_content-wrapper-fit-height_14iqq_1abie_225:not(#\9) {
   block-size: 100%;
   overflow: hidden;
   border-end-start-radius: var(--border-radius-container-jm6teg, 0px);
   border-end-end-radius: var(--border-radius-container-jm6teg, 0px);
 }
 
-.awsui_media_14iqq_evm42_234:not(#\9) {
+.awsui_media_14iqq_1abie_232:not(#\9) {
   overflow: hidden;
   flex-shrink: 0;
 }
-.awsui_media_14iqq_evm42_234 img:not(#\9),
-.awsui_media_14iqq_evm42_234 video:not(#\9),
-.awsui_media_14iqq_evm42_234 picture:not(#\9) {
+.awsui_media_14iqq_1abie_232 img:not(#\9),
+.awsui_media_14iqq_1abie_232 video:not(#\9),
+.awsui_media_14iqq_1abie_232 picture:not(#\9) {
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
   object-position: center;
 }
-.awsui_media_14iqq_evm42_234 iframe:not(#\9) {
+.awsui_media_14iqq_1abie_232 iframe:not(#\9) {
   inline-size: 100%;
   block-size: 100%;
   border-block: 0;
   border-inline: 0;
 }
-.awsui_media-top_14iqq_evm42_252:not(#\9) {
+.awsui_media-top_14iqq_1abie_250:not(#\9) {
   max-block-size: 66%;
   border-start-start-radius: calc(var(--border-radius-container-jm6teg, 0px) - 1px);
   border-start-end-radius: calc(var(--border-radius-container-jm6teg, 0px) - 1px);
 }
-.awsui_media-side_14iqq_evm42_257:not(#\9) {
+.awsui_media-side_14iqq_1abie_255:not(#\9) {
   max-inline-size: 66%;
   border-start-start-radius: calc(var(--border-radius-container-jm6teg, 0px) - 1px);
   border-end-start-radius: calc(var(--border-radius-container-jm6teg, 0px) - 1px);
 }
 
-.awsui_header_14iqq_evm42_263:not(#\9) {
+.awsui_header_14iqq_1abie_261:not(#\9) {
   background-color: var(--color-background-container-header-ni4jv3, #fafafa);
   border-start-start-radius: var(--border-radius-container-jm6teg, 0px);
   border-start-end-radius: var(--border-radius-container-jm6teg, 0px);
 }
-.awsui_header_14iqq_evm42_263.awsui_header-with-media_14iqq_evm42_268:not(#\9) {
+.awsui_header_14iqq_1abie_261.awsui_header-with-media_14iqq_1abie_266:not(#\9) {
   background: none;
 }
-.awsui_header_14iqq_evm42_263.awsui_header-with-media_14iqq_evm42_268:not(#\9):not(:empty) {
+.awsui_header_14iqq_1abie_261.awsui_header-with-media_14iqq_1abie_266:not(#\9):not(:empty) {
   border-block-end: none;
 }
-.awsui_header-sticky-disabled_14iqq_evm42_274:not(#\9) {
+.awsui_header-sticky-disabled_14iqq_1abie_272:not(#\9) {
   position: relative;
   z-index: 1;
 }
-.awsui_header-sticky-enabled_14iqq_evm42_278:not(#\9) {
+.awsui_header-sticky-enabled_14iqq_1abie_276:not(#\9) {
   inset-block-start: 0;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   position: sticky;
   z-index: 800;
 }
-.awsui_header-stuck_14iqq_evm42_284:not(#\9) {
+.awsui_header-stuck_14iqq_1abie_282:not(#\9) {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
   border-end-start-radius: 0;
   border-end-end-radius: 0;
 }
-.awsui_header-stuck_14iqq_evm42_284:not(#\9)::before {
+.awsui_header-stuck_14iqq_1abie_282:not(#\9)::before {
   border-block: 0;
   border-inline: 0;
 }
-.awsui_header-stuck_14iqq_evm42_284:not(#\9):not(.awsui_header-variant-cards_14iqq_evm42_294) {
+.awsui_header-stuck_14iqq_1abie_282:not(#\9):not(.awsui_header-variant-cards_14iqq_1abie_292) {
   box-shadow: var(--shadow-sticky-embedded-f9wivk, 0px 1px 4px -2px rgba(0, 28, 36, 0.5));
 }
-.awsui_header-dynamic-height_14iqq_evm42_297.awsui_header-stuck_14iqq_evm42_284:not(#\9) {
+.awsui_header-dynamic-height_14iqq_1abie_295.awsui_header-stuck_14iqq_1abie_282:not(#\9) {
   margin-block-end: calc(var(--line-height-heading-xl-v9hsvt, 36px) - var(--line-height-heading-l-vog8w7, 22px));
 }
-.awsui_header_14iqq_evm42_263:not(#\9):not(:empty) {
+.awsui_header_14iqq_1abie_261:not(#\9):not(:empty) {
   border-block-end: var(--border-container-sticky-width-xo3q2l, 1px) solid var(--color-border-container-divider-gl15p9, #eaeded);
 }
-.awsui_header_14iqq_evm42_263.awsui_with-paddings_14iqq_evm42_303:not(#\9) {
+.awsui_header_14iqq_1abie_261.awsui_with-paddings_14iqq_1abie_301:not(#\9) {
   padding-block-start: var(--space-container-header-top-bomjbu, 12px);
   padding-block-end: var(--space-container-header-bottom-qqnwwz, 12px);
   padding-inline: var(--space-container-horizontal-oebwqe, 20px);
 }
-.awsui_header_14iqq_evm42_263.awsui_with-paddings_14iqq_evm42_303.awsui_header-variant-cards_14iqq_evm42_294:not(#\9) {
+.awsui_header_14iqq_1abie_261.awsui_with-paddings_14iqq_1abie_301.awsui_header-variant-cards_14iqq_1abie_292:not(#\9) {
   padding-block: var(--space-container-header-top-bomjbu, 12px);
   padding-inline: var(--space-container-horizontal-oebwqe, 20px);
 }
-.awsui_header_14iqq_evm42_263.awsui_with-hidden-content_14iqq_evm42_312:not(#\9) {
+.awsui_header_14iqq_1abie_261.awsui_with-hidden-content_14iqq_1abie_310:not(#\9) {
   border-end-start-radius: var(--border-radius-container-jm6teg, 0px);
   border-end-end-radius: var(--border-radius-container-jm6teg, 0px);
 }
-.awsui_header-variant-cards_14iqq_evm42_294:not(#\9) {
+.awsui_header-variant-cards_14iqq_1abie_292:not(#\9) {
   border-start-start-radius: var(--border-radius-container-jm6teg, 0px);
   border-start-end-radius: var(--border-radius-container-jm6teg, 0px);
   border-end-start-radius: var(--border-radius-container-jm6teg, 0px);
   border-end-end-radius: var(--border-radius-container-jm6teg, 0px);
   box-sizing: border-box;
 }
-.awsui_header-variant-cards_14iqq_evm42_294.awsui_refresh_14iqq_evm42_155:not(#\9) {
+.awsui_header-variant-cards_14iqq_1abie_292.awsui_refresh_14iqq_1abie_153:not(#\9) {
   border-block: solid var(--border-divider-section-width-wl9k66, 1px) var(--color-border-divider-default-in8dkg, #eaeded);
   border-inline: solid var(--border-divider-section-width-wl9k66, 1px) var(--color-border-divider-default-in8dkg, #eaeded);
 }
-.awsui_header-variant-cards_14iqq_evm42_294:not(#\9):not(.awsui_refresh_14iqq_evm42_155)::before {
+.awsui_header-variant-cards_14iqq_1abie_292:not(#\9):not(.awsui_refresh_14iqq_1abie_153)::before {
   content: "";
   position: absolute;
   inset-inline-start: 0px;
@@ -343,7 +341,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-jm6teg, 0px);
   z-index: 1;
 }
-.awsui_header-variant-cards_14iqq_evm42_294:not(#\9):not(.awsui_refresh_14iqq_evm42_155)::after {
+.awsui_header-variant-cards_14iqq_1abie_292:not(#\9):not(.awsui_refresh_14iqq_1abie_153)::after {
   content: "";
   position: absolute;
   inset-inline-start: 0px;
@@ -359,22 +357,29 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-jm6teg, 0px);
   box-shadow: var(--shadow-container-5104ec, 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_evm42_294:not(#\9):not(.awsui_header-sticky-enabled_14iqq_evm42_278) {
+.awsui_header-variant-cards_14iqq_1abie_292:not(#\9):not(.awsui_header-sticky-enabled_14iqq_1abie_276) {
   position: relative;
 }
-.awsui_header-variant-cards_14iqq_evm42_294.awsui_header-stuck_14iqq_evm42_284:not(#\9)::after, .awsui_header-variant-cards_14iqq_evm42_294.awsui_header-stuck_14iqq_evm42_284:not(#\9)::before {
+.awsui_header-variant-cards_14iqq_1abie_292.awsui_header-stuck_14iqq_1abie_282:not(#\9)::after, .awsui_header-variant-cards_14iqq_1abie_292.awsui_header-stuck_14iqq_1abie_282:not(#\9)::before {
   border-block: 0;
   border-inline: 0;
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
-.awsui_header-variant-full-page_14iqq_evm42_370.awsui_with-toolbar_14iqq_evm42_370:not(#\9) {
+.awsui_header-variant-full-page_14iqq_1abie_368.awsui_with-toolbar_14iqq_1abie_368:not(#\9) {
   padding-block-start: var(--space-scaled-s-9q8n2q, 12px);
 }
-.awsui_header-variant-full-page_14iqq_evm42_370.awsui_header-stuck_14iqq_evm42_284:not(#\9) {
+.awsui_header-variant-full-page_14iqq_1abie_368.awsui_header-stuck_14iqq_1abie_282:not(#\9) {
   box-shadow: none;
 }
-.awsui_header-variant-full-page_14iqq_evm42_370.awsui_header-stuck_14iqq_evm42_284:not(#\9)::before {
+.awsui_header-variant-full-page_14iqq_1abie_368.awsui_header-stuck_14iqq_1abie_282 > .awsui_header-cover_14iqq_1abie_374:not(#\9) {
+  background-color: var(--color-background-layout-main-td853a, #f2f3f3);
+  inline-size: 100%;
+  position: absolute;
+  block-size: var(--space-scaled-s-9q8n2q, 12px);
+  inset-block-start: calc(-1 * var(--space-scaled-s-9q8n2q, 12px));
+}
+.awsui_header-variant-full-page_14iqq_1abie_368.awsui_header-stuck_14iqq_1abie_282:not(#\9)::before {
   content: "";
   position: absolute;
   pointer-events: none;
@@ -384,7 +389,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-block-start: 0;
   border-block-end: solid var(--border-divider-section-width-wl9k66, 1px) var(--color-border-divider-default-in8dkg, #eaeded);
 }
-.awsui_header-variant-full-page_14iqq_evm42_370.awsui_header-stuck_14iqq_evm42_284:not(#\9)::after {
+.awsui_header-variant-full-page_14iqq_1abie_368.awsui_header-stuck_14iqq_1abie_282:not(#\9)::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -392,27 +397,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   clip-path: polygon(-999% 100%, 999% 100%, 999% 999%, -999% 999%);
 }
 
-.awsui_content_14iqq_evm42_222:not(#\9) {
+.awsui_content_14iqq_1abie_220:not(#\9) {
   flex: 1;
 }
-.awsui_content-fit-height_14iqq_evm42_397:not(#\9) {
+.awsui_content-fit-height_14iqq_1abie_402:not(#\9) {
   overflow: auto;
 }
-.awsui_content_14iqq_evm42_222.awsui_with-paddings_14iqq_evm42_303:not(#\9) {
+.awsui_content_14iqq_1abie_220.awsui_with-paddings_14iqq_1abie_301:not(#\9) {
   padding-block: var(--space-scaled-l-08jb88, 20px);
   padding-inline: var(--space-container-horizontal-oebwqe, 20px);
 }
-.awsui_header_14iqq_evm42_263 + .awsui_content_14iqq_evm42_222.awsui_with-paddings_14iqq_evm42_303:not(#\9) {
+.awsui_header_14iqq_1abie_261 + .awsui_content_14iqq_1abie_220.awsui_with-paddings_14iqq_1abie_301:not(#\9) {
   padding-block-start: var(--space-container-content-top-dkluz9, 16px);
 }
-.awsui_header_14iqq_evm42_263 + .awsui_content_14iqq_evm42_222.awsui_with-paddings_14iqq_evm42_303.awsui_content-with-media_14iqq_evm42_407:not(#\9) {
+.awsui_header_14iqq_1abie_261 + .awsui_content_14iqq_1abie_220.awsui_with-paddings_14iqq_1abie_301.awsui_content-with-media_14iqq_1abie_412:not(#\9) {
   padding-block-start: 0;
 }
 
-.awsui_footer_14iqq_evm42_411.awsui_with-paddings_14iqq_evm42_303:not(#\9) {
+.awsui_footer_14iqq_1abie_416.awsui_with-paddings_14iqq_1abie_301:not(#\9) {
   padding-block: var(--space-scaled-s-9q8n2q, 12px);
   padding-inline: var(--space-container-horizontal-oebwqe, 20px);
 }
-.awsui_footer_14iqq_evm42_411.awsui_with-divider_14iqq_evm42_415:not(#\9) {
+.awsui_footer_14iqq_1abie_416.awsui_with-divider_14iqq_1abie_420:not(#\9) {
   border-block-start: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-divider-default-in8dkg, #eaeded);
 }

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

@@ -2,34 +2,35 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_14iqq_evm42_103",
-  "fit-height": "awsui_fit-height_14iqq_evm42_139",
-  "with-side-media": "awsui_with-side-media_14iqq_evm42_144",
-  "variant-default": "awsui_variant-default_14iqq_evm42_147",
-  "variant-stacked": "awsui_variant-stacked_14iqq_evm42_147",
-  "refresh": "awsui_refresh_14iqq_evm42_155",
-  "sticky-enabled": "awsui_sticky-enabled_14iqq_evm42_205",
-  "with-top-media": "awsui_with-top-media_14iqq_evm42_217",
-  "content-wrapper": "awsui_content-wrapper_14iqq_evm42_222",
-  "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_evm42_227",
-  "media": "awsui_media_14iqq_evm42_234",
-  "media-top": "awsui_media-top_14iqq_evm42_252",
-  "media-side": "awsui_media-side_14iqq_evm42_257",
-  "header": "awsui_header_14iqq_evm42_263",
-  "header-with-media": "awsui_header-with-media_14iqq_evm42_268",
-  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_evm42_274",
-  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_evm42_278",
-  "header-stuck": "awsui_header-stuck_14iqq_evm42_284",
-  "header-variant-cards": "awsui_header-variant-cards_14iqq_evm42_294",
-  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_evm42_297",
-  "with-paddings": "awsui_with-paddings_14iqq_evm42_303",
-  "with-hidden-content": "awsui_with-hidden-content_14iqq_evm42_312",
-  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_evm42_370",
-  "with-toolbar": "awsui_with-toolbar_14iqq_evm42_370",
-  "content": "awsui_content_14iqq_evm42_222",
-  "content-fit-height": "awsui_content-fit-height_14iqq_evm42_397",
-  "content-with-media": "awsui_content-with-media_14iqq_evm42_407",
-  "footer": "awsui_footer_14iqq_evm42_411",
-  "with-divider": "awsui_with-divider_14iqq_evm42_415"
+  "root": "awsui_root_14iqq_1abie_101",
+  "fit-height": "awsui_fit-height_14iqq_1abie_137",
+  "with-side-media": "awsui_with-side-media_14iqq_1abie_142",
+  "variant-default": "awsui_variant-default_14iqq_1abie_145",
+  "variant-stacked": "awsui_variant-stacked_14iqq_1abie_145",
+  "refresh": "awsui_refresh_14iqq_1abie_153",
+  "sticky-enabled": "awsui_sticky-enabled_14iqq_1abie_203",
+  "with-top-media": "awsui_with-top-media_14iqq_1abie_215",
+  "content-wrapper": "awsui_content-wrapper_14iqq_1abie_220",
+  "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_1abie_225",
+  "media": "awsui_media_14iqq_1abie_232",
+  "media-top": "awsui_media-top_14iqq_1abie_250",
+  "media-side": "awsui_media-side_14iqq_1abie_255",
+  "header": "awsui_header_14iqq_1abie_261",
+  "header-with-media": "awsui_header-with-media_14iqq_1abie_266",
+  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_1abie_272",
+  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_1abie_276",
+  "header-stuck": "awsui_header-stuck_14iqq_1abie_282",
+  "header-variant-cards": "awsui_header-variant-cards_14iqq_1abie_292",
+  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_1abie_295",
+  "with-paddings": "awsui_with-paddings_14iqq_1abie_301",
+  "with-hidden-content": "awsui_with-hidden-content_14iqq_1abie_310",
+  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_1abie_368",
+  "with-toolbar": "awsui_with-toolbar_14iqq_1abie_368",
+  "header-cover": "awsui_header-cover_14iqq_1abie_374",
+  "content": "awsui_content_14iqq_1abie_220",
+  "content-fit-height": "awsui_content-fit-height_14iqq_1abie_402",
+  "content-with-media": "awsui_content-with-media_14iqq_1abie_412",
+  "footer": "awsui_footer_14iqq_1abie_416",
+  "with-divider": "awsui_with-divider_14iqq_1abie_420"
 };
   

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

@@ -7,10 +7,11 @@ interface ComputeOffsetProps {
     __stickyOffset?: number;
     __mobileStickyOffset?: number;
     hasInnerOverflowParents: boolean;
+    __additionalOffset?: boolean;
 }
-export declare function computeOffset({ isMobile, __stickyOffset, __mobileStickyOffset, hasInnerOverflowParents, }: ComputeOffsetProps): string;
+export declare function computeOffset({ isMobile, __stickyOffset, __mobileStickyOffset, hasInnerOverflowParents, __additionalOffset, }: ComputeOffsetProps): string;
 export declare const StickyHeaderContext: import("react").Context<StickyHeaderContextProps>;
-export declare const useStickyHeader: (rootRef: RefObject<HTMLDivElement>, headerRef: RefObject<HTMLDivElement>, __stickyHeader?: boolean, __stickyOffset?: number, __mobileStickyOffset?: number, __disableMobile?: boolean) => {
+export declare const useStickyHeader: (rootRef: RefObject<HTMLDivElement>, headerRef: RefObject<HTMLDivElement>, __stickyHeader?: boolean, __stickyOffset?: number, __mobileStickyOffset?: number, __disableMobile?: boolean, __additionalOffset?: boolean) => {
     isSticky: boolean;
     isStuck: boolean;
     stickyStyles: {

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,EAAoE,MAAM,OAAO,CAAC;AAMpG,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,EAAE,OAAO,CAAC;CAClC;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,cAAc,EACd,oBAAoB,EACpB,uBAAuB,GACxB,EAAE,kBAAkB,GAAG,MAAM,CAQ7B;AAED,eAAO,MAAM,mBAAmB,mDAE9B,CAAC;AAEH,eAAO,MAAM,eAAe,YACjB,UAAU,cAAc,CAAC,aACvB,UAAU,cAAc,CAAC,mBACnB,OAAO,mBACP,MAAM,yBACA,MAAM;;;;;;;;;;CAmE9B,CAAC"}
+{"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;AAOpG,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,EAAE,OAAO,CAAC;IACjC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,cAAc,EACd,oBAAoB,EACpB,uBAAuB,EACvB,kBAAkB,GACnB,EAAE,kBAAkB,GAAG,MAAM,CAQ7B;AAED,eAAO,MAAM,mBAAmB,mDAE9B,CAAC;AAEH,eAAO,MAAM,eAAe,YACjB,UAAU,cAAc,CAAC,aACvB,UAAU,cAAc,CAAC,mBACnB,OAAO,mBACP,MAAM,yBACA,MAAM,oBACX,OAAO;;;;;;;;;;CAoE1B,CAAC"}

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

@@ -5,18 +5,19 @@ import { findUpUntil } from '../internal/utils/dom';
 import { getOverflowParents } from '../internal/utils/scrollable-containers';
 import { useMobile } from '../internal/hooks/use-mobile';
 import globalVars from '../internal/styles/global-vars';
-export function computeOffset({ isMobile, __stickyOffset, __mobileStickyOffset, hasInnerOverflowParents, }) {
+import * as tokens from '../internal/generated/styles/tokens';
+export function computeOffset({ isMobile, __stickyOffset, __mobileStickyOffset, hasInnerOverflowParents, __additionalOffset, }) {
     const localOffset = isMobile ? (__stickyOffset !== null && __stickyOffset !== void 0 ? __stickyOffset : 0) - (__mobileStickyOffset !== null && __mobileStickyOffset !== void 0 ? __mobileStickyOffset : 0) : __stickyOffset !== null && __stickyOffset !== void 0 ? __stickyOffset : 0;
     if (hasInnerOverflowParents || __stickyOffset !== undefined) {
         return `${localOffset}px`;
     }
     const globalOffset = `var(${globalVars.stickyVerticalTopOffset}, 0px)`;
-    return `calc(${globalOffset} + ${localOffset}px)`;
+    return `calc(${globalOffset} + ${localOffset}px + ${__additionalOffset ? tokens.spaceScaledS : '0px'})`;
 }
 export const StickyHeaderContext = createContext({
     isStuck: false,
 });
-export const useStickyHeader = (rootRef, headerRef, __stickyHeader, __stickyOffset, __mobileStickyOffset, __disableMobile = true) => {
+export const useStickyHeader = (rootRef, headerRef, __stickyHeader, __stickyOffset, __mobileStickyOffset, __disableMobile, __additionalOffset = false) => {
     const isMobile = useMobile();
     const disableSticky = isMobile && __disableMobile;
     const isSticky = !disableSticky && !!__stickyHeader;
@@ -39,6 +40,7 @@ export const useStickyHeader = (rootRef, headerRef, __stickyHeader, __stickyOffs
         __stickyOffset,
         __mobileStickyOffset,
         hasInnerOverflowParents,
+        __additionalOffset,
     });
     const stickyStyles = isSticky
         ? {

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 } from 'react';\nimport { findUpUntil } from '../internal/utils/dom';\nimport { getOverflowParents } from '../internal/utils/scrollable-containers';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport globalVars from '../internal/styles/global-vars';\n\ninterface StickyHeaderContextProps {\n  isStuck: boolean;\n}\n\ninterface ComputeOffsetProps {\n  isMobile: boolean;\n  __stickyOffset?: number;\n  __mobileStickyOffset?: number;\n  hasInnerOverflowParents: boolean;\n}\n\nexport function computeOffset({\n  isMobile,\n  __stickyOffset,\n  __mobileStickyOffset,\n  hasInnerOverflowParents,\n}: ComputeOffsetProps): string {\n  const localOffset = isMobile ? (__stickyOffset ?? 0) - (__mobileStickyOffset ?? 0) : __stickyOffset ?? 0;\n  if (hasInnerOverflowParents || __stickyOffset !== undefined) {\n    return `${localOffset}px`;\n  }\n  const globalOffset = `var(${globalVars.stickyVerticalTopOffset}, 0px)`;\n\n  return `calc(${globalOffset} + ${localOffset}px)`;\n}\n\nexport const StickyHeaderContext = createContext<StickyHeaderContextProps>({\n  isStuck: false,\n});\n\nexport const useStickyHeader = (\n  rootRef: RefObject<HTMLDivElement>,\n  headerRef: RefObject<HTMLDivElement>,\n  __stickyHeader?: boolean,\n  __stickyOffset?: number,\n  __mobileStickyOffset?: number,\n  __disableMobile = true\n) => {\n  const isMobile = useMobile();\n  const disableSticky = isMobile && __disableMobile;\n  const isSticky = !disableSticky && !!__stickyHeader;\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 computedOffset = computeOffset({\n    isMobile,\n    __stickyOffset,\n    __mobileStickyOffset,\n    hasInnerOverflowParents,\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 rootTopBorderWidth = parseFloat(getComputedStyle(rootRef.current).borderTopWidth) || 0;\n      const rootTop = rootRef.current.getBoundingClientRect().top + rootTopBorderWidth;\n      const headerTop = headerRef.current.getBoundingClientRect().top;\n\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"]}
+{"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 { findUpUntil } from '../internal/utils/dom';\nimport { getOverflowParents } from '../internal/utils/scrollable-containers';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport globalVars from '../internal/styles/global-vars';\nimport * as tokens from '../internal/generated/styles/tokens';\n\ninterface StickyHeaderContextProps {\n  isStuck: boolean;\n}\n\ninterface ComputeOffsetProps {\n  isMobile: boolean;\n  __stickyOffset?: number;\n  __mobileStickyOffset?: number;\n  hasInnerOverflowParents: boolean;\n  __additionalOffset?: boolean;\n}\n\nexport function computeOffset({\n  isMobile,\n  __stickyOffset,\n  __mobileStickyOffset,\n  hasInnerOverflowParents,\n  __additionalOffset,\n}: ComputeOffsetProps): string {\n  const localOffset = isMobile ? (__stickyOffset ?? 0) - (__mobileStickyOffset ?? 0) : __stickyOffset ?? 0;\n  if (hasInnerOverflowParents || __stickyOffset !== undefined) {\n    return `${localOffset}px`;\n  }\n  const globalOffset = `var(${globalVars.stickyVerticalTopOffset}, 0px)`;\n\n  return `calc(${globalOffset} + ${localOffset}px + ${__additionalOffset ? tokens.spaceScaledS : '0px'})`;\n}\n\nexport const StickyHeaderContext = createContext<StickyHeaderContextProps>({\n  isStuck: false,\n});\n\nexport const useStickyHeader = (\n  rootRef: RefObject<HTMLDivElement>,\n  headerRef: RefObject<HTMLDivElement>,\n  __stickyHeader?: boolean,\n  __stickyOffset?: number,\n  __mobileStickyOffset?: number,\n  __disableMobile?: boolean,\n  __additionalOffset = false\n) => {\n  const isMobile = useMobile();\n  const disableSticky = isMobile && __disableMobile;\n  const isSticky = !disableSticky && !!__stickyHeader;\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 computedOffset = computeOffset({\n    isMobile,\n    __stickyOffset,\n    __mobileStickyOffset,\n    hasInnerOverflowParents,\n    __additionalOffset,\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 rootTopBorderWidth = parseFloat(getComputedStyle(rootRef.current).borderTopWidth) || 0;\n      const rootTop = rootRef.current.getBoundingClientRect().top + rootTopBorderWidth;\n      const headerTop = headerRef.current.getBoundingClientRect().top;\n\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"]}

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

@@ -35,7 +35,7 @@ export default function InternalContentLayout(_a) {
         }), style: {
             [customCssProps.contentLayoutMaxContentWidth]: maxContentWidth < Number.MAX_VALUE ? `${maxContentWidth}px` : `${halfGeckoMaxCssLength}px`,
         }, ref: mergedRef }),
-        React.createElement("div", { className: clsx(styles.background, { [styles['has-default-background']]: !headerBackgroundStyle }, contentHeaderClassName), ref: overlapElement }, headerBackgroundStyle && (React.createElement("div", { className: clsx(styles['header-background']), style: {
+        React.createElement("div", { className: clsx(styles.background, { [styles['has-default-background']]: !headerBackgroundStyle }, contentHeaderClassName), ref: overlapElement }, headerBackgroundStyle && (React.createElement("div", { className: styles['header-background'], style: {
                 background: typeof headerBackgroundStyle === 'function' ? headerBackgroundStyle(mode) : headerBackgroundStyle,
             } }))),
         notifications && (React.createElement("div", { className: clsx(styles.notifications, testutilStyles.notifications, contentHeaderClassName) }, notifications)),
@@ -48,7 +48,7 @@ export default function InternalContentLayout(_a) {
             }) },
             React.createElement(InternalGrid, { gridDefinition: [{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }] },
                 React.createElement("div", { className: clsx(testutilStyles.header, contentHeaderClassName) }, header),
-                React.createElement("div", { className: clsx(testutilStyles['secondary-header']) }, secondaryHeader)))),
+                React.createElement("div", { className: testutilStyles['secondary-header'] }, secondaryHeader)))),
         React.createElement("div", { className: clsx(styles.content, {
                 [styles['with-divider']]: headerVariant === 'divider',
             }) }, children)));

package/lib/internal/template/content-layout/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/content-layout/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { ContentLayoutProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { highContrastHeaderClassName } from '../internal/utils/content-header-utils';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';\nimport { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport styles from './styles.css.js';\nimport testutilStyles from './test-classes/styles.css.js';\nimport InternalGrid from '../grid/internal';\n\ntype InternalContentLayoutProps = ContentLayoutProps & InternalBaseComponentProps;\n\nconst halfGeckoMaxCssLength = ((1 << 30) - 1) / 120;\n// CSS lengths in Gecko are limited to at most (1<<30)-1 app units (Gecko uses 60 as app unit).\n// Limit the maxContentWidth to the half of the upper boundary (≈4230^2) to be on the safe side.\n\nexport default function InternalContentLayout({\n  children,\n  disableOverlap,\n  header,\n  headerVariant = 'default',\n  headerBackgroundStyle,\n  __internalRootRef,\n  maxContentWidth = Number.MAX_VALUE,\n  breadcrumbs,\n  notifications,\n  defaultPadding,\n  secondaryHeader,\n  ...rest\n}: InternalContentLayoutProps) {\n  const mainRef = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs(mainRef, __internalRootRef);\n\n  const baseProps = getBaseProps(rest);\n\n  const isVisualRefresh = useVisualRefresh();\n  const mode = useCurrentMode(mainRef);\n\n  const overlapElement = useDynamicOverlap();\n\n  const isOverlapDisabled = !children || disableOverlap;\n\n  const contentHeaderClassName =\n    headerVariant === 'high-contrast' && isVisualRefresh ? highContrastHeaderClassName : '';\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        [styles['default-padding']]: !!defaultPadding,\n        [styles['has-notifications']]: !!notifications,\n      })}\n      style={{\n        [customCssProps.contentLayoutMaxContentWidth]:\n          maxContentWidth < Number.MAX_VALUE ? `${maxContentWidth}px` : `${halfGeckoMaxCssLength}px`,\n      }}\n      ref={mergedRef}\n    >\n      <div\n        className={clsx(\n          styles.background,\n          { [styles['has-default-background']]: !headerBackgroundStyle },\n          contentHeaderClassName\n        )}\n        ref={overlapElement}\n      >\n        {headerBackgroundStyle && (\n          <div\n            className={clsx(styles['header-background'])}\n            style={{\n              background:\n                typeof headerBackgroundStyle === 'function' ? headerBackgroundStyle(mode) : headerBackgroundStyle,\n            }}\n          />\n        )}\n      </div>\n      {notifications && (\n        <div className={clsx(styles.notifications, testutilStyles.notifications, contentHeaderClassName)}>\n          {notifications}\n        </div>\n      )}\n      {breadcrumbs && (\n        <div className={clsx(styles.breadcrumbs, testutilStyles.breadcrumbs, contentHeaderClassName)}>\n          {breadcrumbs}\n        </div>\n      )}\n      {header && !secondaryHeader && (\n        <div\n          className={clsx(styles['header-wrapper'], testutilStyles.header, contentHeaderClassName, {\n            [styles['with-divider']]: headerVariant === 'divider',\n          })}\n        >\n          {header}\n        </div>\n      )}\n      {header && secondaryHeader && (\n        <div\n          className={clsx(styles['header-wrapper'], {\n            [styles['with-divider']]: headerVariant === 'divider',\n          })}\n        >\n          <InternalGrid gridDefinition={[{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }]}>\n            <div className={clsx(testutilStyles.header, contentHeaderClassName)}>{header}</div>\n            <div className={clsx(testutilStyles['secondary-header'])}>{secondaryHeader}</div>\n          </InternalGrid>\n        </div>\n      )}\n\n      <div\n        className={clsx(styles.content, {\n          [styles['with-divider']]: headerVariant === 'divider',\n        })}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/content-layout/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { ContentLayoutProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { highContrastHeaderClassName } from '../internal/utils/content-header-utils';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';\nimport { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport styles from './styles.css.js';\nimport testutilStyles from './test-classes/styles.css.js';\nimport InternalGrid from '../grid/internal';\n\ntype InternalContentLayoutProps = ContentLayoutProps & InternalBaseComponentProps;\n\nconst halfGeckoMaxCssLength = ((1 << 30) - 1) / 120;\n// CSS lengths in Gecko are limited to at most (1<<30)-1 app units (Gecko uses 60 as app unit).\n// Limit the maxContentWidth to the half of the upper boundary (≈4230^2) to be on the safe side.\n\nexport default function InternalContentLayout({\n  children,\n  disableOverlap,\n  header,\n  headerVariant = 'default',\n  headerBackgroundStyle,\n  __internalRootRef,\n  maxContentWidth = Number.MAX_VALUE,\n  breadcrumbs,\n  notifications,\n  defaultPadding,\n  secondaryHeader,\n  ...rest\n}: InternalContentLayoutProps) {\n  const mainRef = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs(mainRef, __internalRootRef);\n\n  const baseProps = getBaseProps(rest);\n\n  const isVisualRefresh = useVisualRefresh();\n  const mode = useCurrentMode(mainRef);\n\n  const overlapElement = useDynamicOverlap();\n\n  const isOverlapDisabled = !children || disableOverlap;\n\n  const contentHeaderClassName =\n    headerVariant === 'high-contrast' && isVisualRefresh ? highContrastHeaderClassName : '';\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        [styles['default-padding']]: !!defaultPadding,\n        [styles['has-notifications']]: !!notifications,\n      })}\n      style={{\n        [customCssProps.contentLayoutMaxContentWidth]:\n          maxContentWidth < Number.MAX_VALUE ? `${maxContentWidth}px` : `${halfGeckoMaxCssLength}px`,\n      }}\n      ref={mergedRef}\n    >\n      <div\n        className={clsx(\n          styles.background,\n          { [styles['has-default-background']]: !headerBackgroundStyle },\n          contentHeaderClassName\n        )}\n        ref={overlapElement}\n      >\n        {headerBackgroundStyle && (\n          <div\n            className={styles['header-background']}\n            style={{\n              background:\n                typeof headerBackgroundStyle === 'function' ? headerBackgroundStyle(mode) : headerBackgroundStyle,\n            }}\n          />\n        )}\n      </div>\n      {notifications && (\n        <div className={clsx(styles.notifications, testutilStyles.notifications, contentHeaderClassName)}>\n          {notifications}\n        </div>\n      )}\n      {breadcrumbs && (\n        <div className={clsx(styles.breadcrumbs, testutilStyles.breadcrumbs, contentHeaderClassName)}>\n          {breadcrumbs}\n        </div>\n      )}\n      {header && !secondaryHeader && (\n        <div\n          className={clsx(styles['header-wrapper'], testutilStyles.header, contentHeaderClassName, {\n            [styles['with-divider']]: headerVariant === 'divider',\n          })}\n        >\n          {header}\n        </div>\n      )}\n      {header && secondaryHeader && (\n        <div\n          className={clsx(styles['header-wrapper'], {\n            [styles['with-divider']]: headerVariant === 'divider',\n          })}\n        >\n          <InternalGrid gridDefinition={[{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }]}>\n            <div className={clsx(testutilStyles.header, contentHeaderClassName)}>{header}</div>\n            <div className={testutilStyles['secondary-header']}>{secondaryHeader}</div>\n          </InternalGrid>\n        </div>\n      )}\n\n      <div\n        className={clsx(styles.content, {\n          [styles['with-divider']]: headerVariant === 'divider',\n        })}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n"]}

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

@@ -1,19 +1,19 @@
 
     import './styles.scoped.css';
     export default {
-  "layout": "awsui_layout_5gtk3_idqux_99",
-  "background": "awsui_background_5gtk3_idqux_113",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_5gtk3_idqux_118",
-  "header-background": "awsui_header-background_5gtk3_idqux_121",
-  "notifications": "awsui_notifications_5gtk3_idqux_125",
-  "breadcrumbs": "awsui_breadcrumbs_5gtk3_idqux_130",
-  "default-padding": "awsui_default-padding_5gtk3_idqux_135",
-  "header-wrapper": "awsui_header-wrapper_5gtk3_idqux_139",
-  "with-divider": "awsui_with-divider_5gtk3_idqux_144",
-  "content": "awsui_content_5gtk3_idqux_147",
-  "has-header": "awsui_has-header_5gtk3_idqux_151",
-  "is-visual-refresh": "awsui_is-visual-refresh_5gtk3_idqux_158",
-  "has-default-background": "awsui_has-default-background_5gtk3_idqux_158",
-  "has-notifications": "awsui_has-notifications_5gtk3_idqux_162"
+  "layout": "awsui_layout_5gtk3_bozzp_97",
+  "background": "awsui_background_5gtk3_bozzp_111",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_5gtk3_bozzp_116",
+  "header-background": "awsui_header-background_5gtk3_bozzp_119",
+  "notifications": "awsui_notifications_5gtk3_bozzp_123",
+  "breadcrumbs": "awsui_breadcrumbs_5gtk3_bozzp_128",
+  "default-padding": "awsui_default-padding_5gtk3_bozzp_133",
+  "header-wrapper": "awsui_header-wrapper_5gtk3_bozzp_137",
+  "with-divider": "awsui_with-divider_5gtk3_bozzp_142",
+  "content": "awsui_content_5gtk3_bozzp_145",
+  "has-header": "awsui_has-header_5gtk3_bozzp_149",
+  "is-visual-refresh": "awsui_is-visual-refresh_5gtk3_bozzp_156",
+  "has-default-background": "awsui_has-default-background_5gtk3_bozzp_156",
+  "has-notifications": "awsui_has-notifications_5gtk3_bozzp_160"
 };