@cloudscape-design/components 3.0.638 → 3.0.640

package/container/styles.css.js

@@ -1,35 +1,33 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_14iqq_v4tpg_103",
-  "fit-height": "awsui_fit-height_14iqq_v4tpg_139",
-  "with-side-media": "awsui_with-side-media_14iqq_v4tpg_144",
-  "variant-default": "awsui_variant-default_14iqq_v4tpg_147",
-  "variant-stacked": "awsui_variant-stacked_14iqq_v4tpg_147",
-  "refresh": "awsui_refresh_14iqq_v4tpg_155",
-  "sticky-enabled": "awsui_sticky-enabled_14iqq_v4tpg_205",
-  "with-top-media": "awsui_with-top-media_14iqq_v4tpg_217",
-  "content-wrapper": "awsui_content-wrapper_14iqq_v4tpg_222",
-  "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_v4tpg_227",
-  "media": "awsui_media_14iqq_v4tpg_234",
-  "media-top": "awsui_media-top_14iqq_v4tpg_252",
-  "media-side": "awsui_media-side_14iqq_v4tpg_257",
-  "header": "awsui_header_14iqq_v4tpg_263",
-  "header-with-media": "awsui_header-with-media_14iqq_v4tpg_268",
-  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_v4tpg_274",
-  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_v4tpg_278",
-  "header-stuck": "awsui_header-stuck_14iqq_v4tpg_284",
-  "header-variant-cards": "awsui_header-variant-cards_14iqq_v4tpg_294",
-  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_v4tpg_297",
-  "with-paddings": "awsui_with-paddings_14iqq_v4tpg_303",
-  "with-hidden-content": "awsui_with-hidden-content_14iqq_v4tpg_312",
-  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_v4tpg_370",
-  "remove-high-contrast-header": "awsui_remove-high-contrast-header_14iqq_v4tpg_390",
-  "dark-header": "awsui_dark-header_14iqq_v4tpg_399",
-  "content": "awsui_content_14iqq_v4tpg_222",
-  "content-fit-height": "awsui_content-fit-height_14iqq_v4tpg_407",
-  "content-with-media": "awsui_content-with-media_14iqq_v4tpg_417",
-  "footer": "awsui_footer_14iqq_v4tpg_421",
-  "with-divider": "awsui_with-divider_14iqq_v4tpg_425"
+  "root": "awsui_root_14iqq_1letd_103",
+  "fit-height": "awsui_fit-height_14iqq_1letd_139",
+  "with-side-media": "awsui_with-side-media_14iqq_1letd_144",
+  "variant-default": "awsui_variant-default_14iqq_1letd_147",
+  "variant-stacked": "awsui_variant-stacked_14iqq_1letd_147",
+  "refresh": "awsui_refresh_14iqq_1letd_155",
+  "sticky-enabled": "awsui_sticky-enabled_14iqq_1letd_205",
+  "with-top-media": "awsui_with-top-media_14iqq_1letd_217",
+  "content-wrapper": "awsui_content-wrapper_14iqq_1letd_222",
+  "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_1letd_227",
+  "media": "awsui_media_14iqq_1letd_234",
+  "media-top": "awsui_media-top_14iqq_1letd_252",
+  "media-side": "awsui_media-side_14iqq_1letd_257",
+  "header": "awsui_header_14iqq_1letd_263",
+  "header-with-media": "awsui_header-with-media_14iqq_1letd_268",
+  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_1letd_274",
+  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_1letd_278",
+  "header-stuck": "awsui_header-stuck_14iqq_1letd_284",
+  "header-variant-cards": "awsui_header-variant-cards_14iqq_1letd_294",
+  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_1letd_297",
+  "with-paddings": "awsui_with-paddings_14iqq_1letd_303",
+  "with-hidden-content": "awsui_with-hidden-content_14iqq_1letd_312",
+  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_1letd_370",
+  "content": "awsui_content_14iqq_1letd_222",
+  "content-fit-height": "awsui_content-fit-height_14iqq_1letd_394",
+  "content-with-media": "awsui_content-with-media_14iqq_1letd_404",
+  "footer": "awsui_footer_14iqq_1letd_408",
+  "with-divider": "awsui_with-divider_14iqq_1letd_412"
 };
   

package/container/styles.scoped.css

@@ -100,7 +100,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_v4tpg_103:not(#\9) {
+.awsui_root_14iqq_1letd_103:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -137,15 +137,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-wrap: break-word;
   position: relative;
 }
-.awsui_root_14iqq_v4tpg_103.awsui_fit-height_14iqq_v4tpg_139:not(#\9) {
+.awsui_root_14iqq_1letd_103.awsui_fit-height_14iqq_1letd_139:not(#\9) {
   display: flex;
   flex-direction: column;
   block-size: 100%;
 }
-.awsui_root_14iqq_v4tpg_103.awsui_fit-height_14iqq_v4tpg_139.awsui_with-side-media_14iqq_v4tpg_144:not(#\9) {
+.awsui_root_14iqq_1letd_103.awsui_fit-height_14iqq_1letd_139.awsui_with-side-media_14iqq_1letd_144:not(#\9) {
   flex-direction: row;
 }
-.awsui_root_14iqq_v4tpg_103.awsui_variant-default_14iqq_v4tpg_147:not(#\9), .awsui_root_14iqq_v4tpg_103.awsui_variant-stacked_14iqq_v4tpg_147:not(#\9) {
+.awsui_root_14iqq_1letd_103.awsui_variant-default_14iqq_1letd_147:not(#\9), .awsui_root_14iqq_1letd_103.awsui_variant-stacked_14iqq_1letd_147:not(#\9) {
   background-color: var(--color-background-container-content-4un1ap, #ffffff);
   border-start-start-radius: var(--border-radius-container-wqv1zi, 16px);
   border-start-end-radius: var(--border-radius-container-wqv1zi, 16px);
@@ -153,11 +153,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
   box-sizing: border-box;
 }
-.awsui_root_14iqq_v4tpg_103.awsui_variant-default_14iqq_v4tpg_147.awsui_refresh_14iqq_v4tpg_155:not(#\9), .awsui_root_14iqq_v4tpg_103.awsui_variant-stacked_14iqq_v4tpg_147.awsui_refresh_14iqq_v4tpg_155:not(#\9) {
+.awsui_root_14iqq_1letd_103.awsui_variant-default_14iqq_1letd_147.awsui_refresh_14iqq_1letd_155:not(#\9), .awsui_root_14iqq_1letd_103.awsui_variant-stacked_14iqq_1letd_147.awsui_refresh_14iqq_1letd_155:not(#\9) {
   border-block: solid var(--border-divider-section-width-1061zr, 1px) var(--color-border-divider-default-j74lyz, #b6bec9);
   border-inline: solid var(--border-divider-section-width-1061zr, 1px) var(--color-border-divider-default-j74lyz, #b6bec9);
 }
-.awsui_root_14iqq_v4tpg_103.awsui_variant-default_14iqq_v4tpg_147:not(#\9):not(.awsui_refresh_14iqq_v4tpg_155)::before, .awsui_root_14iqq_v4tpg_103.awsui_variant-stacked_14iqq_v4tpg_147:not(#\9):not(.awsui_refresh_14iqq_v4tpg_155)::before {
+.awsui_root_14iqq_1letd_103.awsui_variant-default_14iqq_1letd_147:not(#\9):not(.awsui_refresh_14iqq_1letd_155)::before, .awsui_root_14iqq_1letd_103.awsui_variant-stacked_14iqq_1letd_147:not(#\9):not(.awsui_refresh_14iqq_1letd_155)::before {
   content: "";
   position: absolute;
   inset-inline-start: 0px;
@@ -175,7 +175,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
   z-index: 1;
 }
-.awsui_root_14iqq_v4tpg_103.awsui_variant-default_14iqq_v4tpg_147:not(#\9):not(.awsui_refresh_14iqq_v4tpg_155)::after, .awsui_root_14iqq_v4tpg_103.awsui_variant-stacked_14iqq_v4tpg_147:not(#\9):not(.awsui_refresh_14iqq_v4tpg_155)::after {
+.awsui_root_14iqq_1letd_103.awsui_variant-default_14iqq_1letd_147:not(#\9):not(.awsui_refresh_14iqq_1letd_155)::after, .awsui_root_14iqq_1letd_103.awsui_variant-stacked_14iqq_1letd_147:not(#\9):not(.awsui_refresh_14iqq_1letd_155)::after {
   content: "";
   position: absolute;
   inset-inline-start: 0px;
@@ -191,141 +191,141 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
   box-shadow: var(--shadow-container-fxmdn3, 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12));
 }
-.awsui_root_14iqq_v4tpg_103.awsui_variant-stacked_14iqq_v4tpg_147:not(#\9):not(:last-child), .awsui_root_14iqq_v4tpg_103.awsui_variant-stacked_14iqq_v4tpg_147:not(#\9):not(:last-child)::before, .awsui_root_14iqq_v4tpg_103.awsui_variant-stacked_14iqq_v4tpg_147:not(#\9):not(:last-child)::after {
+.awsui_root_14iqq_1letd_103.awsui_variant-stacked_14iqq_1letd_147:not(#\9):not(:last-child), .awsui_root_14iqq_1letd_103.awsui_variant-stacked_14iqq_1letd_147:not(#\9):not(:last-child)::before, .awsui_root_14iqq_1letd_103.awsui_variant-stacked_14iqq_1letd_147:not(#\9):not(:last-child)::after {
   border-end-end-radius: 0;
   border-end-start-radius: 0;
   border-block-end-width: 0;
 }
-.awsui_root_14iqq_v4tpg_103.awsui_variant-stacked_14iqq_v4tpg_147 + .awsui_root_14iqq_v4tpg_103.awsui_variant-stacked_14iqq_v4tpg_147:not(#\9), .awsui_root_14iqq_v4tpg_103.awsui_variant-stacked_14iqq_v4tpg_147 + .awsui_root_14iqq_v4tpg_103.awsui_variant-stacked_14iqq_v4tpg_147:not(#\9)::before, .awsui_root_14iqq_v4tpg_103.awsui_variant-stacked_14iqq_v4tpg_147 + .awsui_root_14iqq_v4tpg_103.awsui_variant-stacked_14iqq_v4tpg_147:not(#\9)::after {
+.awsui_root_14iqq_1letd_103.awsui_variant-stacked_14iqq_1letd_147 + .awsui_root_14iqq_1letd_103.awsui_variant-stacked_14iqq_1letd_147:not(#\9), .awsui_root_14iqq_1letd_103.awsui_variant-stacked_14iqq_1letd_147 + .awsui_root_14iqq_1letd_103.awsui_variant-stacked_14iqq_1letd_147:not(#\9)::before, .awsui_root_14iqq_1letd_103.awsui_variant-stacked_14iqq_1letd_147 + .awsui_root_14iqq_1letd_103.awsui_variant-stacked_14iqq_1letd_147:not(#\9)::after {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
-.awsui_root_14iqq_v4tpg_103.awsui_variant-stacked_14iqq_v4tpg_147 + .awsui_root_14iqq_v4tpg_103.awsui_variant-stacked_14iqq_v4tpg_147:not(#\9):not(.awsui_refresh_14iqq_v4tpg_155)::before {
+.awsui_root_14iqq_1letd_103.awsui_variant-stacked_14iqq_1letd_147 + .awsui_root_14iqq_1letd_103.awsui_variant-stacked_14iqq_1letd_147:not(#\9):not(.awsui_refresh_14iqq_1letd_155)::before {
   border-block-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
 }
-.awsui_root_14iqq_v4tpg_103.awsui_sticky-enabled_14iqq_v4tpg_205:not(#\9):not(.awsui_refresh_14iqq_v4tpg_155)::before {
+.awsui_root_14iqq_1letd_103.awsui_sticky-enabled_14iqq_1letd_205:not(#\9):not(.awsui_refresh_14iqq_1letd_155)::before {
   inset-block-start: calc(-1 * var(--border-container-top-width-uugwwl, 0px));
 }
-.awsui_root_14iqq_v4tpg_103.awsui_sticky-enabled_14iqq_v4tpg_205:not(#\9):not(.awsui_refresh_14iqq_v4tpg_155).awsui_variant-stacked_14iqq_v4tpg_147::before {
+.awsui_root_14iqq_1letd_103.awsui_sticky-enabled_14iqq_1letd_205:not(#\9):not(.awsui_refresh_14iqq_1letd_155).awsui_variant-stacked_14iqq_1letd_147::before {
   inset-block-start: calc(-1 * var(--border-divider-section-width-1061zr, 1px));
 }
 
-.awsui_with-side-media_14iqq_v4tpg_144:not(#\9) {
+.awsui_with-side-media_14iqq_1letd_144:not(#\9) {
   display: flex;
   flex-direction: row;
 }
 
-.awsui_with-top-media_14iqq_v4tpg_217:not(#\9) {
+.awsui_with-top-media_14iqq_1letd_217:not(#\9) {
   display: flex;
   flex-direction: column;
 }
 
-.awsui_content-wrapper_14iqq_v4tpg_222:not(#\9) {
+.awsui_content-wrapper_14iqq_1letd_222:not(#\9) {
   display: flex;
   flex-direction: column;
   inline-size: 100%;
 }
-.awsui_content-wrapper-fit-height_14iqq_v4tpg_227:not(#\9) {
+.awsui_content-wrapper-fit-height_14iqq_1letd_227:not(#\9) {
   block-size: 100%;
   overflow: hidden;
   border-end-start-radius: var(--border-radius-container-wqv1zi, 16px);
   border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
 }
 
-.awsui_media_14iqq_v4tpg_234:not(#\9) {
+.awsui_media_14iqq_1letd_234:not(#\9) {
   overflow: hidden;
   flex-shrink: 0;
 }
-.awsui_media_14iqq_v4tpg_234 img:not(#\9),
-.awsui_media_14iqq_v4tpg_234 video:not(#\9),
-.awsui_media_14iqq_v4tpg_234 picture:not(#\9) {
+.awsui_media_14iqq_1letd_234 img:not(#\9),
+.awsui_media_14iqq_1letd_234 video:not(#\9),
+.awsui_media_14iqq_1letd_234 picture:not(#\9) {
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
   object-position: center;
 }
-.awsui_media_14iqq_v4tpg_234 iframe:not(#\9) {
+.awsui_media_14iqq_1letd_234 iframe:not(#\9) {
   inline-size: 100%;
   block-size: 100%;
   border-block: 0;
   border-inline: 0;
 }
-.awsui_media-top_14iqq_v4tpg_252:not(#\9) {
+.awsui_media-top_14iqq_1letd_252:not(#\9) {
   max-block-size: 66%;
   border-start-start-radius: calc(var(--border-radius-container-wqv1zi, 16px) - 1px);
   border-start-end-radius: calc(var(--border-radius-container-wqv1zi, 16px) - 1px);
 }
-.awsui_media-side_14iqq_v4tpg_257:not(#\9) {
+.awsui_media-side_14iqq_1letd_257:not(#\9) {
   max-inline-size: 66%;
   border-start-start-radius: calc(var(--border-radius-container-wqv1zi, 16px) - 1px);
   border-end-start-radius: calc(var(--border-radius-container-wqv1zi, 16px) - 1px);
 }
 
-.awsui_header_14iqq_v4tpg_263:not(#\9) {
+.awsui_header_14iqq_1letd_263:not(#\9) {
   background-color: var(--color-background-container-header-8b9fgi, #ffffff);
   border-start-start-radius: var(--border-radius-container-wqv1zi, 16px);
   border-start-end-radius: var(--border-radius-container-wqv1zi, 16px);
 }
-.awsui_header_14iqq_v4tpg_263.awsui_header-with-media_14iqq_v4tpg_268:not(#\9) {
+.awsui_header_14iqq_1letd_263.awsui_header-with-media_14iqq_1letd_268:not(#\9) {
   background: none;
 }
-.awsui_header_14iqq_v4tpg_263.awsui_header-with-media_14iqq_v4tpg_268:not(#\9):not(:empty) {
+.awsui_header_14iqq_1letd_263.awsui_header-with-media_14iqq_1letd_268:not(#\9):not(:empty) {
   border-block-end: none;
 }
-.awsui_header-sticky-disabled_14iqq_v4tpg_274:not(#\9) {
+.awsui_header-sticky-disabled_14iqq_1letd_274:not(#\9) {
   position: relative;
   z-index: 1;
 }
-.awsui_header-sticky-enabled_14iqq_v4tpg_278:not(#\9) {
+.awsui_header-sticky-enabled_14iqq_1letd_278:not(#\9) {
   inset-block-start: 0;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   position: sticky;
   z-index: 800;
 }
-.awsui_header-stuck_14iqq_v4tpg_284:not(#\9) {
+.awsui_header-stuck_14iqq_1letd_284: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_v4tpg_284:not(#\9)::before {
+.awsui_header-stuck_14iqq_1letd_284:not(#\9)::before {
   border-block: 0;
   border-inline: 0;
 }
-.awsui_header-stuck_14iqq_v4tpg_284:not(#\9):not(.awsui_header-variant-cards_14iqq_v4tpg_294) {
+.awsui_header-stuck_14iqq_1letd_284:not(#\9):not(.awsui_header-variant-cards_14iqq_1letd_294) {
   box-shadow: var(--shadow-sticky-embedded-uvh5ry, 0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px rgba(0, 7, 22, 0.1));
 }
-.awsui_header-dynamic-height_14iqq_v4tpg_297.awsui_header-stuck_14iqq_v4tpg_284:not(#\9) {
+.awsui_header-dynamic-height_14iqq_1letd_297.awsui_header-stuck_14iqq_1letd_284:not(#\9) {
   margin-block-end: calc(var(--line-height-heading-xl-avbttk, 30px) - var(--line-height-heading-l-mmm3my, 24px));
 }
-.awsui_header_14iqq_v4tpg_263:not(#\9):not(:empty) {
+.awsui_header_14iqq_1letd_263:not(#\9):not(:empty) {
   border-block-end: var(--border-container-sticky-width-6asz33, 0px) solid var(--color-border-container-divider-p2uygo, transparent);
 }
-.awsui_header_14iqq_v4tpg_263.awsui_with-paddings_14iqq_v4tpg_303:not(#\9) {
+.awsui_header_14iqq_1letd_263.awsui_with-paddings_14iqq_1letd_303:not(#\9) {
   padding-block-start: var(--space-container-header-top-5qav00, 12px);
   padding-block-end: var(--space-container-header-bottom-vj01hn, 8px);
   padding-inline: var(--space-container-horizontal-wfukh3, 20px);
 }
-.awsui_header_14iqq_v4tpg_263.awsui_with-paddings_14iqq_v4tpg_303.awsui_header-variant-cards_14iqq_v4tpg_294:not(#\9) {
+.awsui_header_14iqq_1letd_263.awsui_with-paddings_14iqq_1letd_303.awsui_header-variant-cards_14iqq_1letd_294:not(#\9) {
   padding-block: var(--space-container-header-top-5qav00, 12px);
   padding-inline: var(--space-container-horizontal-wfukh3, 20px);
 }
-.awsui_header_14iqq_v4tpg_263.awsui_with-hidden-content_14iqq_v4tpg_312:not(#\9) {
+.awsui_header_14iqq_1letd_263.awsui_with-hidden-content_14iqq_1letd_312:not(#\9) {
   border-end-start-radius: var(--border-radius-container-wqv1zi, 16px);
   border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
 }
-.awsui_header-variant-cards_14iqq_v4tpg_294:not(#\9) {
+.awsui_header-variant-cards_14iqq_1letd_294:not(#\9) {
   border-start-start-radius: var(--border-radius-container-wqv1zi, 16px);
   border-start-end-radius: var(--border-radius-container-wqv1zi, 16px);
   border-end-start-radius: var(--border-radius-container-wqv1zi, 16px);
   border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
   box-sizing: border-box;
 }
-.awsui_header-variant-cards_14iqq_v4tpg_294.awsui_refresh_14iqq_v4tpg_155:not(#\9) {
+.awsui_header-variant-cards_14iqq_1letd_294.awsui_refresh_14iqq_1letd_155:not(#\9) {
   border-block: solid var(--border-divider-section-width-1061zr, 1px) var(--color-border-divider-default-j74lyz, #b6bec9);
   border-inline: solid var(--border-divider-section-width-1061zr, 1px) var(--color-border-divider-default-j74lyz, #b6bec9);
 }
-.awsui_header-variant-cards_14iqq_v4tpg_294:not(#\9):not(.awsui_refresh_14iqq_v4tpg_155)::before {
+.awsui_header-variant-cards_14iqq_1letd_294:not(#\9):not(.awsui_refresh_14iqq_1letd_155)::before {
   content: "";
   position: absolute;
   inset-inline-start: 0px;
@@ -343,7 +343,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
   z-index: 1;
 }
-.awsui_header-variant-cards_14iqq_v4tpg_294:not(#\9):not(.awsui_refresh_14iqq_v4tpg_155)::after {
+.awsui_header-variant-cards_14iqq_1letd_294:not(#\9):not(.awsui_refresh_14iqq_1letd_155)::after {
   content: "";
   position: absolute;
   inset-inline-start: 0px;
@@ -359,19 +359,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
   box-shadow: var(--shadow-container-fxmdn3, 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12));
 }
-.awsui_header-variant-cards_14iqq_v4tpg_294:not(#\9):not(.awsui_header-sticky-enabled_14iqq_v4tpg_278) {
+.awsui_header-variant-cards_14iqq_1letd_294:not(#\9):not(.awsui_header-sticky-enabled_14iqq_1letd_278) {
   position: relative;
 }
-.awsui_header-variant-cards_14iqq_v4tpg_294.awsui_header-stuck_14iqq_v4tpg_284:not(#\9)::after, .awsui_header-variant-cards_14iqq_v4tpg_294.awsui_header-stuck_14iqq_v4tpg_284:not(#\9)::before {
+.awsui_header-variant-cards_14iqq_1letd_294.awsui_header-stuck_14iqq_1letd_284:not(#\9)::after, .awsui_header-variant-cards_14iqq_1letd_294.awsui_header-stuck_14iqq_1letd_284: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_v4tpg_370.awsui_header-stuck_14iqq_v4tpg_284:not(#\9) {
+.awsui_header-variant-full-page_14iqq_1letd_370.awsui_header-stuck_14iqq_1letd_284:not(#\9) {
   box-shadow: none;
 }
-.awsui_header-variant-full-page_14iqq_v4tpg_370.awsui_header-stuck_14iqq_v4tpg_284:not(#\9)::before {
+.awsui_header-variant-full-page_14iqq_1letd_370.awsui_header-stuck_14iqq_1letd_284:not(#\9)::before {
   content: "";
   position: absolute;
   pointer-events: none;
@@ -381,48 +381,35 @@ 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-1061zr, 1px) var(--color-border-divider-default-j74lyz, #b6bec9);
 }
-.awsui_header-variant-full-page_14iqq_v4tpg_370.awsui_header-stuck_14iqq_v4tpg_284:not(#\9)::after {
+.awsui_header-variant-full-page_14iqq_1letd_370.awsui_header-stuck_14iqq_1letd_284:not(#\9)::after {
   content: "";
   position: absolute;
   inset: 0;
   box-shadow: var(--shadow-sticky-blixp9, 0px 4px 8px 1px rgba(0, 7, 22, 0.1));
   clip-path: polygon(-999% 100%, 999% 100%, 999% 999%, -999% 999%);
 }
-.awsui_header-variant-full-page_14iqq_v4tpg_370.awsui_header-stuck_14iqq_v4tpg_284:not(#\9):not(.awsui_remove-high-contrast-header_14iqq_v4tpg_390)::before {
-  content: "";
-  border-block-end: none;
-}
-
-/*
-The dynamic height dark header needs a background that will cover
-the default white background of the container component.
-*/
-.awsui_dark-header_14iqq_v4tpg_399:not(#\9) {
-  background-color: var(--color-background-layout-main-nx09lr, #ffffff);
-  color: var(--color-text-body-default-at06ol, #000716);
-}
 
-.awsui_content_14iqq_v4tpg_222:not(#\9) {
+.awsui_content_14iqq_1letd_222:not(#\9) {
   flex: 1;
 }
-.awsui_content-fit-height_14iqq_v4tpg_407:not(#\9) {
+.awsui_content-fit-height_14iqq_1letd_394:not(#\9) {
   overflow: auto;
 }
-.awsui_content_14iqq_v4tpg_222.awsui_with-paddings_14iqq_v4tpg_303:not(#\9) {
+.awsui_content_14iqq_1letd_222.awsui_with-paddings_14iqq_1letd_303:not(#\9) {
   padding-block: var(--space-scaled-l-0hpmd7, 20px);
   padding-inline: var(--space-container-horizontal-wfukh3, 20px);
 }
-.awsui_header_14iqq_v4tpg_263 + .awsui_content_14iqq_v4tpg_222.awsui_with-paddings_14iqq_v4tpg_303:not(#\9) {
+.awsui_header_14iqq_1letd_263 + .awsui_content_14iqq_1letd_222.awsui_with-paddings_14iqq_1letd_303:not(#\9) {
   padding-block-start: var(--space-container-content-top-1ae0r3, 4px);
 }
-.awsui_header_14iqq_v4tpg_263 + .awsui_content_14iqq_v4tpg_222.awsui_with-paddings_14iqq_v4tpg_303.awsui_content-with-media_14iqq_v4tpg_417:not(#\9) {
+.awsui_header_14iqq_1letd_263 + .awsui_content_14iqq_1letd_222.awsui_with-paddings_14iqq_1letd_303.awsui_content-with-media_14iqq_1letd_404:not(#\9) {
   padding-block-start: 0;
 }
 
-.awsui_footer_14iqq_v4tpg_421.awsui_with-paddings_14iqq_v4tpg_303:not(#\9) {
+.awsui_footer_14iqq_1letd_408.awsui_with-paddings_14iqq_1letd_303:not(#\9) {
   padding-block: var(--space-scaled-s-aqzyko, 12px);
   padding-inline: var(--space-container-horizontal-wfukh3, 20px);
 }
-.awsui_footer_14iqq_v4tpg_421.awsui_with-divider_14iqq_v4tpg_425:not(#\9) {
+.awsui_footer_14iqq_1letd_408.awsui_with-divider_14iqq_1letd_412:not(#\9) {
   border-block-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
 }

package/container/styles.selectors.js

@@ -2,35 +2,33 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_14iqq_v4tpg_103",
-  "fit-height": "awsui_fit-height_14iqq_v4tpg_139",
-  "with-side-media": "awsui_with-side-media_14iqq_v4tpg_144",
-  "variant-default": "awsui_variant-default_14iqq_v4tpg_147",
-  "variant-stacked": "awsui_variant-stacked_14iqq_v4tpg_147",
-  "refresh": "awsui_refresh_14iqq_v4tpg_155",
-  "sticky-enabled": "awsui_sticky-enabled_14iqq_v4tpg_205",
-  "with-top-media": "awsui_with-top-media_14iqq_v4tpg_217",
-  "content-wrapper": "awsui_content-wrapper_14iqq_v4tpg_222",
-  "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_v4tpg_227",
-  "media": "awsui_media_14iqq_v4tpg_234",
-  "media-top": "awsui_media-top_14iqq_v4tpg_252",
-  "media-side": "awsui_media-side_14iqq_v4tpg_257",
-  "header": "awsui_header_14iqq_v4tpg_263",
-  "header-with-media": "awsui_header-with-media_14iqq_v4tpg_268",
-  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_v4tpg_274",
-  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_v4tpg_278",
-  "header-stuck": "awsui_header-stuck_14iqq_v4tpg_284",
-  "header-variant-cards": "awsui_header-variant-cards_14iqq_v4tpg_294",
-  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_v4tpg_297",
-  "with-paddings": "awsui_with-paddings_14iqq_v4tpg_303",
-  "with-hidden-content": "awsui_with-hidden-content_14iqq_v4tpg_312",
-  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_v4tpg_370",
-  "remove-high-contrast-header": "awsui_remove-high-contrast-header_14iqq_v4tpg_390",
-  "dark-header": "awsui_dark-header_14iqq_v4tpg_399",
-  "content": "awsui_content_14iqq_v4tpg_222",
-  "content-fit-height": "awsui_content-fit-height_14iqq_v4tpg_407",
-  "content-with-media": "awsui_content-with-media_14iqq_v4tpg_417",
-  "footer": "awsui_footer_14iqq_v4tpg_421",
-  "with-divider": "awsui_with-divider_14iqq_v4tpg_425"
+  "root": "awsui_root_14iqq_1letd_103",
+  "fit-height": "awsui_fit-height_14iqq_1letd_139",
+  "with-side-media": "awsui_with-side-media_14iqq_1letd_144",
+  "variant-default": "awsui_variant-default_14iqq_1letd_147",
+  "variant-stacked": "awsui_variant-stacked_14iqq_1letd_147",
+  "refresh": "awsui_refresh_14iqq_1letd_155",
+  "sticky-enabled": "awsui_sticky-enabled_14iqq_1letd_205",
+  "with-top-media": "awsui_with-top-media_14iqq_1letd_217",
+  "content-wrapper": "awsui_content-wrapper_14iqq_1letd_222",
+  "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_1letd_227",
+  "media": "awsui_media_14iqq_1letd_234",
+  "media-top": "awsui_media-top_14iqq_1letd_252",
+  "media-side": "awsui_media-side_14iqq_1letd_257",
+  "header": "awsui_header_14iqq_1letd_263",
+  "header-with-media": "awsui_header-with-media_14iqq_1letd_268",
+  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_1letd_274",
+  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_1letd_278",
+  "header-stuck": "awsui_header-stuck_14iqq_1letd_284",
+  "header-variant-cards": "awsui_header-variant-cards_14iqq_1letd_294",
+  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_1letd_297",
+  "with-paddings": "awsui_with-paddings_14iqq_1letd_303",
+  "with-hidden-content": "awsui_with-hidden-content_14iqq_1letd_312",
+  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_1letd_370",
+  "content": "awsui_content_14iqq_1letd_222",
+  "content-fit-height": "awsui_content-fit-height_14iqq_1letd_394",
+  "content-with-media": "awsui_content-with-media_14iqq_1letd_404",
+  "footer": "awsui_footer_14iqq_1letd_408",
+  "with-divider": "awsui_with-divider_14iqq_1letd_412"
 };
   

package/container/use-sticky-header.js

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { useState, useLayoutEffect, useCallback, useEffect, createContext } from 'react';
-import { findUpUntil, supportsStickyPosition } from '../internal/utils/dom';
+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';
@@ -19,7 +19,7 @@ export const StickyHeaderContext = createContext({
 export const useStickyHeader = (rootRef, headerRef, __stickyHeader, __stickyOffset, __mobileStickyOffset, __disableMobile = true) => {
     const isMobile = useMobile();
     const disableSticky = isMobile && __disableMobile;
-    const isSticky = supportsStickyPosition() && !disableSticky && !!__stickyHeader;
+    const isSticky = !disableSticky && !!__stickyHeader;
     // If it has overflow parents inside the app layout, we shouldn't apply a sticky offset.
     const [hasInnerOverflowParents, setHasInnerOverflowParents] = useState(false);
     const [isStuck, setIsStuck] = useState(false);

package/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, supportsStickyPosition } 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 = supportsStickyPosition() && !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":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAa,QAAQ,EAAE,eAAe,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACpG,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,UAAU,MAAM,gCAAgC,CAAC;AAaxD,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,cAAc,EACd,oBAAoB,EACpB,uBAAuB,GACJ;IACnB,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,CAAC,GAAG,CAAC,oBAAoB,aAApB,oBAAoB,cAApB,oBAAoB,GAAI,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,CAAC;IACzG,IAAI,uBAAuB,IAAI,cAAc,KAAK,SAAS,EAAE;QAC3D,OAAO,GAAG,WAAW,IAAI,CAAC;KAC3B;IACD,MAAM,YAAY,GAAG,OAAO,UAAU,CAAC,uBAAuB,QAAQ,CAAC;IAEvE,OAAO,QAAQ,YAAY,MAAM,WAAW,KAAK,CAAC;AACpD,CAAC;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG,aAAa,CAA2B;IACzE,OAAO,EAAE,KAAK;CACf,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,OAAkC,EAClC,SAAoC,EACpC,cAAwB,EACxB,cAAuB,EACvB,oBAA6B,EAC7B,eAAe,GAAG,IAAI,EACtB,EAAE;IACF,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,MAAM,aAAa,GAAG,QAAQ,IAAI,eAAe,CAAC;IAClD,MAAM,QAAQ,GAAG,CAAC,aAAa,IAAI,CAAC,CAAC,cAAc,CAAC;IAEpD,wFAAwF;IACxF,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,OAAO,CAAC,OAAO,EAAE;YACnB,MAAM,eAAe,GAAG,kBAAkB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YAC5D,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC;YAClF,kFAAkF;YAClF,uFAAuF;YACvF,iFAAiF;YACjF,qBAAqB;YACrB,0BAA0B,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC;SAC9F;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,cAAc,GAAG,aAAa,CAAC;QACnC,QAAQ;QACR,cAAc;QACd,oBAAoB;QACpB,uBAAuB;KACxB,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,QAAQ;QAC3B,CAAC,CAAC;YACE,KAAK,EAAE;gBACL,GAAG,EAAE,cAAc;aACpB;SACF;QACH,CAAC,CAAC,EAAE,CAAC;IAEP,6EAA6E;IAC7E,yDAAyD;IACzD,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,IAAI,OAAO,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;YACxC,MAAM,kBAAkB,GAAG,UAAU,CAAC,gBAAgB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;YAC7F,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG,GAAG,kBAAkB,CAAC;YACjF,MAAM,SAAS,GAAG,SAAS,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;YAEhE,IAAI,OAAO,GAAG,SAAS,EAAE;gBACvB,UAAU,CAAC,IAAI,CAAC,CAAC;aAClB;iBAAM;gBACL,UAAU,CAAC,KAAK,CAAC,CAAC;aACnB;SACF;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IACzB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,EAAE;YACZ,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;YACtD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YAChD,OAAO,GAAG,EAAE;gBACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;gBACzD,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YACrD,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;IAC7B,OAAO;QACL,QAAQ;QACR,OAAO;QACP,YAAY;KACb,CAAC;AACJ,CAAC,CAAC","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"]}

package/content-layout/interfaces.d.ts

@@ -16,5 +16,57 @@ export interface ContentLayoutProps extends BaseComponentProps {
      * Use this slot to render the header content for the layout.
      */
     header?: React.ReactNode;
+    /**
+     * Determines the visual treatment for the header. Specifically:
+     * * `default` - Does not apply any visual treatment.
+     * * `high-contrast` - Applies high-contrast to the background of the header and the elements contained within it.
+     *     If you are using the AppLayout component, set `headerVariant="high-contrast"` to apply the same treatment to the breadcrumbs and notifications slots.
+     * * `divider` - Adds a horizontal separator between the header and the content.
+     * @visualrefresh `high-contrast` headerVariant
+     */
+    headerVariant?: 'default' | 'high-contrast' | 'divider';
+    /**
+     * Maximum width for the content.
+     * If set, all elements of the content layout (header, content, notifications, breadcrumbs) will be center-aligned and have the desired maximum width.
+     * If not set, all elements will occupy the full available width.
+     */
+    maxContentWidth?: number;
+    /**
+     * Set it to `true` if your page uses the [app layout component](/components/app-layout/) with `disableContentPaddings=true`.
+     * In that case, the content layout will become sensitive to the state of drawers in app layout and leave the necessary padding to avoid visual overlap with those elements.
+     */
+    defaultPadding?: boolean;
+    /**
+     * Use this slot to display [notifications](/components/flashbar/) to the content layout:
+     * * If your page does not use the [app layout component](/components/app-layout/), which already offers a `notifications` slot.
+     * * If your page uses the [app layout component](/components/app-layout/) with `disableContentPaddings=true`.
+     *
+     * Do not use in conjunction with the `notifications` slot in the [app layout component](/components/app-layout/).
+     */
+    notifications?: React.ReactNode;
+    /**
+     * Use this slot to add the [breadcrumb group component](/components/breadcrumb-group/) to the content layout:
+     * * if your application does not use the [app layout component](/components/app-layout/), which already offers a `breadcrumbs` slot.
+     * * If your page uses the [app layout component](/components/app-layout/) with `disableContentPaddings=true`.
+     *
+     * Do not use in conjunction with the `breadcrumbs` slot in the [app layout component](/components/app-layout/).
+     */
+    breadcrumbs?: React.ReactNode;
+    /**
+     * Use this property to style the background of the header.
+     *
+     * It can be:
+     * * a string representing the CSS `background` value for the header element.
+     * * a function that receives the mode ("light" or "dark") as a parameter and returns a string.
+     *
+     *  The header background spans across the full available width, independent of the specified `maxContentWidth`.
+     *  If set, the component will not add the default background color to the header.
+     */
+    headerBackgroundStyle?: string | ((mode: 'light' | 'dark') => string);
+    /**
+     * Use this slot to add a secondary element inside the header. The secondary element will be displayed next to main header and occupy 25% of the available space.
+     * Note that the secondary header will not have a high-contrast treatement, even if you set `headerVariant` to `high-contrast`.
+     */
+    secondaryHeader?: React.ReactNode;
 }
 //# sourceMappingURL=interfaces.d.ts.map

package/content-layout/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/content-layout/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/content-layout/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,SAAS,GAAG,eAAe,GAAG,SAAS,CAAC;IAExD;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEhC;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;;;;;;;OASG;IACH,qBAAqB,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,KAAK,MAAM,CAAC,CAAC;IAEtE;;;OAGG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACnC"}

package/content-layout/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/content-layout/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface ContentLayoutProps extends BaseComponentProps {\n  /**\n   * Use this slot to render the main content of the layout below the header.\n   * @displayname content\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Determines whether the layout has an overlap between the header and content.\n   * If true, the overlap will be removed.\n   * @visualrefresh\n   */\n  disableOverlap?: boolean;\n\n  /**\n   * Use this slot to render the header content for the layout.\n   */\n  header?: React.ReactNode;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/content-layout/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface ContentLayoutProps extends BaseComponentProps {\n  /**\n   * Use this slot to render the main content of the layout below the header.\n   * @displayname content\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Determines whether the layout has an overlap between the header and content.\n   * If true, the overlap will be removed.\n   * @visualrefresh\n   */\n  disableOverlap?: boolean;\n\n  /**\n   * Use this slot to render the header content for the layout.\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Determines the visual treatment for the header. Specifically:\n   * * `default` - Does not apply any visual treatment.\n   * * `high-contrast` - Applies high-contrast to the background of the header and the elements contained within it.\n   *     If you are using the AppLayout component, set `headerVariant=\"high-contrast\"` to apply the same treatment to the breadcrumbs and notifications slots.\n   * * `divider` - Adds a horizontal separator between the header and the content.\n   * @visualrefresh `high-contrast` headerVariant\n   */\n  headerVariant?: 'default' | 'high-contrast' | 'divider';\n\n  /**\n   * Maximum width for the content.\n   * If set, all elements of the content layout (header, content, notifications, breadcrumbs) will be center-aligned and have the desired maximum width.\n   * If not set, all elements will occupy the full available width.\n   */\n  maxContentWidth?: number;\n\n  /**\n   * Set it to `true` if your page uses the [app layout component](/components/app-layout/) with `disableContentPaddings=true`.\n   * In that case, the content layout will become sensitive to the state of drawers in app layout and leave the necessary padding to avoid visual overlap with those elements.\n   */\n  defaultPadding?: boolean;\n\n  /**\n   * Use this slot to display [notifications](/components/flashbar/) to the content layout:\n   * * If your page does not use the [app layout component](/components/app-layout/), which already offers a `notifications` slot.\n   * * If your page uses the [app layout component](/components/app-layout/) with `disableContentPaddings=true`.\n   *\n   * Do not use in conjunction with the `notifications` slot in the [app layout component](/components/app-layout/).\n   */\n  notifications?: React.ReactNode;\n\n  /**\n   * Use this slot to add the [breadcrumb group component](/components/breadcrumb-group/) to the content layout:\n   * * if your application does not use the [app layout component](/components/app-layout/), which already offers a `breadcrumbs` slot.\n   * * If your page uses the [app layout component](/components/app-layout/) with `disableContentPaddings=true`.\n   *\n   * Do not use in conjunction with the `breadcrumbs` slot in the [app layout component](/components/app-layout/).\n   */\n  breadcrumbs?: React.ReactNode;\n\n  /**\n   * Use this property to style the background of the header.\n   *\n   * It can be:\n   * * a string representing the CSS `background` value for the header element.\n   * * a function that receives the mode (\"light\" or \"dark\") as a parameter and returns a string.\n   *\n   *  The header background spans across the full available width, independent of the specified `maxContentWidth`.\n   *  If set, the component will not add the default background color to the header.\n   */\n  headerBackgroundStyle?: string | ((mode: 'light' | 'dark') => string);\n\n  /**\n   * Use this slot to add a secondary element inside the header. The secondary element will be displayed next to main header and occupy 25% of the available space.\n   * Note that the secondary header will not have a high-contrast treatement, even if you set `headerVariant` to `high-contrast`.\n   */\n  secondaryHeader?: React.ReactNode;\n}\n"]}

package/content-layout/internal.d.ts

@@ -2,6 +2,6 @@
 import { ContentLayoutProps } from './interfaces';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 type InternalContentLayoutProps = ContentLayoutProps & InternalBaseComponentProps;
-export default function InternalContentLayout({ children, disableOverlap, header, __internalRootRef, ...rest }: InternalContentLayoutProps): JSX.Element;
+export default function InternalContentLayout({ children, disableOverlap, header, headerVariant, headerBackgroundStyle, __internalRootRef, maxContentWidth, breadcrumbs, notifications, defaultPadding, secondaryHeader, ...rest }: InternalContentLayoutProps): JSX.Element;
 export {};
 //# sourceMappingURL=internal.d.ts.map

package/content-layout/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/content-layout/internal.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGlD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAKlF,KAAK,0BAA0B,GAAG,kBAAkB,GAAG,0BAA0B,CAAC;AAElF,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,QAAQ,EACR,cAAc,EACd,MAAM,EACN,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,0BAA0B,eAgC5B"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/content-layout/internal.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGlD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAUlF,KAAK,0BAA0B,GAAG,kBAAkB,GAAG,0BAA0B,CAAC;AAMlF,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,QAAQ,EACR,cAAc,EACd,MAAM,EACN,aAAyB,EACzB,qBAAqB,EACrB,iBAAiB,EACjB,eAAkC,EAClC,WAAW,EACX,aAAa,EACb,cAAc,EACd,eAAe,EACf,GAAG,IAAI,EACR,EAAE,0BAA0B,eA2F5B"}