@cloudscape-design/components-themeable 3.0.774 → 3.0.776

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

@@ -182,7 +182,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_sg3ro_185:not(#\9) {
+.awsui_root_14iqq_1qss1_185:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -211,7 +211,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-spacing: normal;
   font-size: var(--font-size-body-m-pa3mqb, 14px);
   line-height: var(--line-height-body-m-2zx78l, 22px);
-  color: var(--color-text-body-default-ffdwgg, #16191f);
+  color: var(--color-text-body-default-bvmavx, #16191f);
   font-weight: 400;
   font-family: var(--font-family-base-0nmw8v, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
   -webkit-font-smoothing: auto;
@@ -219,27 +219,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-wrap: break-word;
   position: relative;
 }
-.awsui_root_14iqq_sg3ro_185.awsui_fit-height_14iqq_sg3ro_221:not(#\9) {
+.awsui_root_14iqq_1qss1_185.awsui_fit-height_14iqq_1qss1_221:not(#\9) {
   display: flex;
   flex-direction: column;
   block-size: 100%;
 }
-.awsui_root_14iqq_sg3ro_185.awsui_fit-height_14iqq_sg3ro_221.awsui_with-side-media_14iqq_sg3ro_226:not(#\9) {
+.awsui_root_14iqq_1qss1_185.awsui_fit-height_14iqq_1qss1_221.awsui_with-side-media_14iqq_1qss1_226:not(#\9) {
   flex-direction: row;
 }
-.awsui_root_14iqq_sg3ro_185.awsui_variant-default_14iqq_sg3ro_229:not(#\9), .awsui_root_14iqq_sg3ro_185.awsui_variant-stacked_14iqq_sg3ro_229:not(#\9) {
-  background-color: var(--color-background-container-content-il2pe5, #ffffff);
+.awsui_root_14iqq_1qss1_185.awsui_variant-default_14iqq_1qss1_229:not(#\9), .awsui_root_14iqq_1qss1_185.awsui_variant-stacked_14iqq_1qss1_229:not(#\9) {
+  background-color: var(--color-background-container-content-0j55iz, #ffffff);
   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_root_14iqq_sg3ro_185.awsui_variant-default_14iqq_sg3ro_229.awsui_refresh_14iqq_sg3ro_237:not(#\9), .awsui_root_14iqq_sg3ro_185.awsui_variant-stacked_14iqq_sg3ro_229.awsui_refresh_14iqq_sg3ro_237: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_1qss1_185.awsui_variant-default_14iqq_1qss1_229.awsui_refresh_14iqq_1qss1_237:not(#\9), .awsui_root_14iqq_1qss1_185.awsui_variant-stacked_14iqq_1qss1_229.awsui_refresh_14iqq_1qss1_237:not(#\9) {
+  border-block: solid var(--border-divider-section-width-wl9k66, 1px) var(--color-border-divider-default-qn9pru, #eaeded);
+  border-inline: solid var(--border-divider-section-width-wl9k66, 1px) var(--color-border-divider-default-qn9pru, #eaeded);
 }
-.awsui_root_14iqq_sg3ro_185.awsui_variant-default_14iqq_sg3ro_229:not(#\9):not(.awsui_refresh_14iqq_sg3ro_237)::before, .awsui_root_14iqq_sg3ro_185.awsui_variant-stacked_14iqq_sg3ro_229:not(#\9):not(.awsui_refresh_14iqq_sg3ro_237)::before {
+.awsui_root_14iqq_1qss1_185.awsui_variant-default_14iqq_1qss1_229:not(#\9):not(.awsui_refresh_14iqq_1qss1_237)::before, .awsui_root_14iqq_1qss1_185.awsui_variant-stacked_14iqq_1qss1_229:not(#\9):not(.awsui_refresh_14iqq_1qss1_237)::before {
   content: "";
   position: absolute;
   inset-inline-start: 0px;
@@ -257,7 +257,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_sg3ro_185.awsui_variant-default_14iqq_sg3ro_229:not(#\9):not(.awsui_refresh_14iqq_sg3ro_237)::after, .awsui_root_14iqq_sg3ro_185.awsui_variant-stacked_14iqq_sg3ro_229:not(#\9):not(.awsui_refresh_14iqq_sg3ro_237)::after {
+.awsui_root_14iqq_1qss1_185.awsui_variant-default_14iqq_1qss1_229:not(#\9):not(.awsui_refresh_14iqq_1qss1_237)::after, .awsui_root_14iqq_1qss1_185.awsui_variant-stacked_14iqq_1qss1_229:not(#\9):not(.awsui_refresh_14iqq_1qss1_237)::after {
   content: "";
   position: absolute;
   inset-inline-start: 0px;
@@ -273,144 +273,144 @@ 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_sg3ro_185.awsui_variant-stacked_14iqq_sg3ro_229:not(#\9):not(:last-child), .awsui_root_14iqq_sg3ro_185.awsui_variant-stacked_14iqq_sg3ro_229:not(#\9):not(:last-child)::before, .awsui_root_14iqq_sg3ro_185.awsui_variant-stacked_14iqq_sg3ro_229:not(#\9):not(:last-child)::after {
+.awsui_root_14iqq_1qss1_185.awsui_variant-stacked_14iqq_1qss1_229:not(#\9):not(:last-child), .awsui_root_14iqq_1qss1_185.awsui_variant-stacked_14iqq_1qss1_229:not(#\9):not(:last-child)::before, .awsui_root_14iqq_1qss1_185.awsui_variant-stacked_14iqq_1qss1_229:not(#\9):not(:last-child)::after {
   border-end-end-radius: 0;
   border-end-start-radius: 0;
   border-block-end-width: 0;
 }
-.awsui_root_14iqq_sg3ro_185.awsui_variant-stacked_14iqq_sg3ro_229 + .awsui_root_14iqq_sg3ro_185.awsui_variant-stacked_14iqq_sg3ro_229:not(#\9), .awsui_root_14iqq_sg3ro_185.awsui_variant-stacked_14iqq_sg3ro_229 + .awsui_root_14iqq_sg3ro_185.awsui_variant-stacked_14iqq_sg3ro_229:not(#\9)::before, .awsui_root_14iqq_sg3ro_185.awsui_variant-stacked_14iqq_sg3ro_229 + .awsui_root_14iqq_sg3ro_185.awsui_variant-stacked_14iqq_sg3ro_229:not(#\9)::after {
+.awsui_root_14iqq_1qss1_185.awsui_variant-stacked_14iqq_1qss1_229 + .awsui_root_14iqq_1qss1_185.awsui_variant-stacked_14iqq_1qss1_229:not(#\9), .awsui_root_14iqq_1qss1_185.awsui_variant-stacked_14iqq_1qss1_229 + .awsui_root_14iqq_1qss1_185.awsui_variant-stacked_14iqq_1qss1_229:not(#\9)::before, .awsui_root_14iqq_1qss1_185.awsui_variant-stacked_14iqq_1qss1_229 + .awsui_root_14iqq_1qss1_185.awsui_variant-stacked_14iqq_1qss1_229:not(#\9)::after {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
-.awsui_root_14iqq_sg3ro_185.awsui_variant-stacked_14iqq_sg3ro_229 + .awsui_root_14iqq_sg3ro_185.awsui_variant-stacked_14iqq_sg3ro_229:not(#\9):not(.awsui_refresh_14iqq_sg3ro_237)::before {
-  border-block-start: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-divider-default-in8dkg, #eaeded);
+.awsui_root_14iqq_1qss1_185.awsui_variant-stacked_14iqq_1qss1_229 + .awsui_root_14iqq_1qss1_185.awsui_variant-stacked_14iqq_1qss1_229:not(#\9):not(.awsui_refresh_14iqq_1qss1_237)::before {
+  border-block-start: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-divider-default-qn9pru, #eaeded);
 }
-.awsui_root_14iqq_sg3ro_185.awsui_sticky-enabled_14iqq_sg3ro_287:not(#\9):not(.awsui_refresh_14iqq_sg3ro_237)::before {
+.awsui_root_14iqq_1qss1_185.awsui_sticky-enabled_14iqq_1qss1_287:not(#\9):not(.awsui_refresh_14iqq_1qss1_237)::before {
   inset-block-start: calc(-1 * var(--border-container-top-width-s1x6t0, 1px));
 }
-.awsui_root_14iqq_sg3ro_185.awsui_sticky-enabled_14iqq_sg3ro_287:not(#\9):not(.awsui_refresh_14iqq_sg3ro_237).awsui_variant-stacked_14iqq_sg3ro_229::before {
+.awsui_root_14iqq_1qss1_185.awsui_sticky-enabled_14iqq_1qss1_287:not(#\9):not(.awsui_refresh_14iqq_1qss1_237).awsui_variant-stacked_14iqq_1qss1_229::before {
   inset-block-start: calc(-1 * var(--border-divider-section-width-wl9k66, 1px));
 }
 
-.awsui_with-side-media_14iqq_sg3ro_226:not(#\9) {
+.awsui_with-side-media_14iqq_1qss1_226:not(#\9) {
   display: flex;
   flex-direction: row;
 }
 
-.awsui_with-top-media_14iqq_sg3ro_299:not(#\9) {
+.awsui_with-top-media_14iqq_1qss1_299:not(#\9) {
   display: flex;
   flex-direction: column;
 }
 
-.awsui_content-wrapper_14iqq_sg3ro_304:not(#\9) {
+.awsui_content-wrapper_14iqq_1qss1_304:not(#\9) {
   display: flex;
   flex-direction: column;
   inline-size: 100%;
 }
-.awsui_content-wrapper-fit-height_14iqq_sg3ro_309:not(#\9) {
+.awsui_content-wrapper-fit-height_14iqq_1qss1_309: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_sg3ro_316:not(#\9) {
+.awsui_media_14iqq_1qss1_316:not(#\9) {
   overflow: hidden;
   flex-shrink: 0;
 }
-.awsui_media_14iqq_sg3ro_316 img:not(#\9),
-.awsui_media_14iqq_sg3ro_316 video:not(#\9),
-.awsui_media_14iqq_sg3ro_316 picture:not(#\9) {
+.awsui_media_14iqq_1qss1_316 img:not(#\9),
+.awsui_media_14iqq_1qss1_316 video:not(#\9),
+.awsui_media_14iqq_1qss1_316 picture:not(#\9) {
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
   object-position: center;
 }
-.awsui_media_14iqq_sg3ro_316 iframe:not(#\9) {
+.awsui_media_14iqq_1qss1_316 iframe:not(#\9) {
   inline-size: 100%;
   block-size: 100%;
   border-block: 0;
   border-inline: 0;
 }
-.awsui_media-top_14iqq_sg3ro_334:not(#\9) {
+.awsui_media-top_14iqq_1qss1_334: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_sg3ro_339:not(#\9) {
+.awsui_media-side_14iqq_1qss1_339: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_sg3ro_345:not(#\9) {
-  background-color: var(--color-background-container-header-ni4jv3, #fafafa);
+.awsui_header_14iqq_1qss1_345:not(#\9) {
+  background-color: var(--color-background-container-header-9ekpze, #fafafa);
   border-start-start-radius: var(--border-radius-container-jm6teg, 0px);
   border-start-end-radius: var(--border-radius-container-jm6teg, 0px);
 }
-.awsui_header_14iqq_sg3ro_345.awsui_header-full-page_14iqq_sg3ro_350:not(#\9) {
-  background-color: var(--color-background-layout-main-td853a, #f2f3f3);
+.awsui_header_14iqq_1qss1_345.awsui_header-full-page_14iqq_1qss1_350:not(#\9) {
+  background-color: var(--color-background-layout-main-84obzs, #f2f3f3);
 }
-.awsui_header_14iqq_sg3ro_345.awsui_header-with-media_14iqq_sg3ro_353:not(#\9) {
+.awsui_header_14iqq_1qss1_345.awsui_header-with-media_14iqq_1qss1_353:not(#\9) {
   background: none;
 }
-.awsui_header_14iqq_sg3ro_345.awsui_header-with-media_14iqq_sg3ro_353:not(#\9):not(:empty) {
+.awsui_header_14iqq_1qss1_345.awsui_header-with-media_14iqq_1qss1_353:not(#\9):not(:empty) {
   border-block-end: none;
 }
-.awsui_header-sticky-disabled_14iqq_sg3ro_359:not(#\9) {
+.awsui_header-sticky-disabled_14iqq_1qss1_359:not(#\9) {
   position: relative;
   z-index: 1;
 }
-.awsui_header-sticky-enabled_14iqq_sg3ro_363:not(#\9) {
+.awsui_header-sticky-enabled_14iqq_1qss1_363:not(#\9) {
   inset-block-start: 0;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   position: sticky;
   z-index: 800;
 }
-.awsui_header-stuck_14iqq_sg3ro_369:not(#\9) {
+.awsui_header-stuck_14iqq_1qss1_369: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_sg3ro_369:not(#\9)::before {
+.awsui_header-stuck_14iqq_1qss1_369:not(#\9)::before {
   border-block: 0;
   border-inline: 0;
 }
-.awsui_header-stuck_14iqq_sg3ro_369:not(#\9):not(.awsui_header-variant-cards_14iqq_sg3ro_379) {
+.awsui_header-stuck_14iqq_1qss1_369:not(#\9):not(.awsui_header-variant-cards_14iqq_1qss1_379) {
   box-shadow: var(--shadow-sticky-embedded-f9wivk, 0px 1px 4px -2px rgba(0, 28, 36, 0.5));
 }
-.awsui_header-dynamic-height_14iqq_sg3ro_382.awsui_header-stuck_14iqq_sg3ro_369:not(#\9) {
+.awsui_header-dynamic-height_14iqq_1qss1_382.awsui_header-stuck_14iqq_1qss1_369:not(#\9) {
   margin-block-end: calc(var(--line-height-heading-xl-v9hsvt, 36px) - var(--line-height-heading-l-vog8w7, 22px));
 }
-.awsui_header_14iqq_sg3ro_345:not(#\9):not(:empty) {
+.awsui_header_14iqq_1qss1_345: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_sg3ro_345.awsui_with-paddings_14iqq_sg3ro_388:not(#\9) {
+.awsui_header_14iqq_1qss1_345.awsui_with-paddings_14iqq_1qss1_388: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_sg3ro_345.awsui_with-paddings_14iqq_sg3ro_388.awsui_header-variant-cards_14iqq_sg3ro_379:not(#\9) {
+.awsui_header_14iqq_1qss1_345.awsui_with-paddings_14iqq_1qss1_388.awsui_header-variant-cards_14iqq_1qss1_379:not(#\9) {
   padding-block: var(--space-container-header-top-bomjbu, 12px);
   padding-inline: var(--space-container-horizontal-oebwqe, 20px);
 }
-.awsui_header_14iqq_sg3ro_345.awsui_with-hidden-content_14iqq_sg3ro_397:not(#\9) {
+.awsui_header_14iqq_1qss1_345.awsui_with-hidden-content_14iqq_1qss1_397: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_sg3ro_379:not(#\9) {
+.awsui_header-variant-cards_14iqq_1qss1_379: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_sg3ro_379.awsui_refresh_14iqq_sg3ro_237: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_1qss1_379.awsui_refresh_14iqq_1qss1_237:not(#\9) {
+  border-block: solid var(--border-divider-section-width-wl9k66, 1px) var(--color-border-divider-default-qn9pru, #eaeded);
+  border-inline: solid var(--border-divider-section-width-wl9k66, 1px) var(--color-border-divider-default-qn9pru, #eaeded);
 }
-.awsui_header-variant-cards_14iqq_sg3ro_379:not(#\9):not(.awsui_refresh_14iqq_sg3ro_237)::before {
+.awsui_header-variant-cards_14iqq_1qss1_379:not(#\9):not(.awsui_refresh_14iqq_1qss1_237)::before {
   content: "";
   position: absolute;
   inset-inline-start: 0px;
@@ -428,7 +428,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_sg3ro_379:not(#\9):not(.awsui_refresh_14iqq_sg3ro_237)::after {
+.awsui_header-variant-cards_14iqq_1qss1_379:not(#\9):not(.awsui_refresh_14iqq_1qss1_237)::after {
   content: "";
   position: absolute;
   inset-inline-start: 0px;
@@ -444,26 +444,26 @@ 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_sg3ro_379:not(#\9):not(.awsui_header-sticky-enabled_14iqq_sg3ro_363) {
+.awsui_header-variant-cards_14iqq_1qss1_379:not(#\9):not(.awsui_header-sticky-enabled_14iqq_1qss1_363) {
   position: relative;
 }
-.awsui_header-variant-cards_14iqq_sg3ro_379.awsui_header-stuck_14iqq_sg3ro_369:not(#\9)::after, .awsui_header-variant-cards_14iqq_sg3ro_379.awsui_header-stuck_14iqq_sg3ro_369:not(#\9)::before {
+.awsui_header-variant-cards_14iqq_1qss1_379.awsui_header-stuck_14iqq_1qss1_369:not(#\9)::after, .awsui_header-variant-cards_14iqq_1qss1_379.awsui_header-stuck_14iqq_1qss1_369: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_sg3ro_455.awsui_header-stuck_14iqq_sg3ro_369:not(#\9) {
+.awsui_header-variant-full-page_14iqq_1qss1_455.awsui_header-stuck_14iqq_1qss1_369:not(#\9) {
   box-shadow: none;
 }
-.awsui_header-variant-full-page_14iqq_sg3ro_455.awsui_header-stuck_14iqq_sg3ro_369 > .awsui_header-cover_14iqq_sg3ro_458:not(#\9) {
-  background-color: var(--color-background-layout-main-td853a, #f2f3f3);
+.awsui_header-variant-full-page_14iqq_1qss1_455.awsui_header-stuck_14iqq_1qss1_369 > .awsui_header-cover_14iqq_1qss1_458:not(#\9) {
+  background-color: var(--color-background-layout-main-84obzs, #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_sg3ro_455.awsui_header-stuck_14iqq_sg3ro_369:not(#\9)::before {
+.awsui_header-variant-full-page_14iqq_1qss1_455.awsui_header-stuck_14iqq_1qss1_369:not(#\9)::before {
   content: "";
   position: absolute;
   pointer-events: none;
@@ -471,9 +471,9 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-inline-start: 0;
   inset-block-end: 0;
   inset-block-start: 0;
-  border-block-end: solid var(--border-divider-section-width-wl9k66, 1px) var(--color-border-divider-default-in8dkg, #eaeded);
+  border-block-end: solid var(--border-divider-section-width-wl9k66, 1px) var(--color-border-divider-default-qn9pru, #eaeded);
 }
-.awsui_header-variant-full-page_14iqq_sg3ro_455.awsui_header-stuck_14iqq_sg3ro_369:not(#\9)::after {
+.awsui_header-variant-full-page_14iqq_1qss1_455.awsui_header-stuck_14iqq_1qss1_369:not(#\9)::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -481,27 +481,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_sg3ro_304:not(#\9) {
+.awsui_content_14iqq_1qss1_304:not(#\9) {
   flex: 1;
 }
-.awsui_content-fit-height_14iqq_sg3ro_486:not(#\9) {
+.awsui_content-fit-height_14iqq_1qss1_486:not(#\9) {
   overflow: auto;
 }
-.awsui_content_14iqq_sg3ro_304.awsui_with-paddings_14iqq_sg3ro_388:not(#\9) {
+.awsui_content_14iqq_1qss1_304.awsui_with-paddings_14iqq_1qss1_388:not(#\9) {
   padding-block: var(--space-scaled-l-08jb88, 20px);
   padding-inline: var(--space-container-horizontal-oebwqe, 20px);
 }
-.awsui_header_14iqq_sg3ro_345 + .awsui_content_14iqq_sg3ro_304.awsui_with-paddings_14iqq_sg3ro_388:not(#\9) {
+.awsui_header_14iqq_1qss1_345 + .awsui_content_14iqq_1qss1_304.awsui_with-paddings_14iqq_1qss1_388:not(#\9) {
   padding-block-start: var(--space-container-content-top-dkluz9, 16px);
 }
-.awsui_header_14iqq_sg3ro_345 + .awsui_content_14iqq_sg3ro_304.awsui_with-paddings_14iqq_sg3ro_388.awsui_content-with-media_14iqq_sg3ro_496:not(#\9) {
+.awsui_header_14iqq_1qss1_345 + .awsui_content_14iqq_1qss1_304.awsui_with-paddings_14iqq_1qss1_388.awsui_content-with-media_14iqq_1qss1_496:not(#\9) {
   padding-block-start: 0;
 }
 
-.awsui_footer_14iqq_sg3ro_500.awsui_with-paddings_14iqq_sg3ro_388:not(#\9) {
+.awsui_footer_14iqq_1qss1_500.awsui_with-paddings_14iqq_1qss1_388:not(#\9) {
   padding-block: var(--space-scaled-s-9q8n2q, 12px);
   padding-inline: var(--space-container-horizontal-oebwqe, 20px);
 }
-.awsui_footer_14iqq_sg3ro_500.awsui_with-divider_14iqq_sg3ro_504:not(#\9) {
-  border-block-start: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-divider-default-in8dkg, #eaeded);
+.awsui_footer_14iqq_1qss1_500.awsui_with-divider_14iqq_1qss1_504:not(#\9) {
+  border-block-start: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-divider-default-qn9pru, #eaeded);
 }

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

@@ -2,35 +2,35 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_14iqq_sg3ro_185",
-  "fit-height": "awsui_fit-height_14iqq_sg3ro_221",
-  "with-side-media": "awsui_with-side-media_14iqq_sg3ro_226",
-  "variant-default": "awsui_variant-default_14iqq_sg3ro_229",
-  "variant-stacked": "awsui_variant-stacked_14iqq_sg3ro_229",
-  "refresh": "awsui_refresh_14iqq_sg3ro_237",
-  "sticky-enabled": "awsui_sticky-enabled_14iqq_sg3ro_287",
-  "with-top-media": "awsui_with-top-media_14iqq_sg3ro_299",
-  "content-wrapper": "awsui_content-wrapper_14iqq_sg3ro_304",
-  "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_sg3ro_309",
-  "media": "awsui_media_14iqq_sg3ro_316",
-  "media-top": "awsui_media-top_14iqq_sg3ro_334",
-  "media-side": "awsui_media-side_14iqq_sg3ro_339",
-  "header": "awsui_header_14iqq_sg3ro_345",
-  "header-full-page": "awsui_header-full-page_14iqq_sg3ro_350",
-  "header-with-media": "awsui_header-with-media_14iqq_sg3ro_353",
-  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_sg3ro_359",
-  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_sg3ro_363",
-  "header-stuck": "awsui_header-stuck_14iqq_sg3ro_369",
-  "header-variant-cards": "awsui_header-variant-cards_14iqq_sg3ro_379",
-  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_sg3ro_382",
-  "with-paddings": "awsui_with-paddings_14iqq_sg3ro_388",
-  "with-hidden-content": "awsui_with-hidden-content_14iqq_sg3ro_397",
-  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_sg3ro_455",
-  "header-cover": "awsui_header-cover_14iqq_sg3ro_458",
-  "content": "awsui_content_14iqq_sg3ro_304",
-  "content-fit-height": "awsui_content-fit-height_14iqq_sg3ro_486",
-  "content-with-media": "awsui_content-with-media_14iqq_sg3ro_496",
-  "footer": "awsui_footer_14iqq_sg3ro_500",
-  "with-divider": "awsui_with-divider_14iqq_sg3ro_504"
+  "root": "awsui_root_14iqq_1qss1_185",
+  "fit-height": "awsui_fit-height_14iqq_1qss1_221",
+  "with-side-media": "awsui_with-side-media_14iqq_1qss1_226",
+  "variant-default": "awsui_variant-default_14iqq_1qss1_229",
+  "variant-stacked": "awsui_variant-stacked_14iqq_1qss1_229",
+  "refresh": "awsui_refresh_14iqq_1qss1_237",
+  "sticky-enabled": "awsui_sticky-enabled_14iqq_1qss1_287",
+  "with-top-media": "awsui_with-top-media_14iqq_1qss1_299",
+  "content-wrapper": "awsui_content-wrapper_14iqq_1qss1_304",
+  "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_1qss1_309",
+  "media": "awsui_media_14iqq_1qss1_316",
+  "media-top": "awsui_media-top_14iqq_1qss1_334",
+  "media-side": "awsui_media-side_14iqq_1qss1_339",
+  "header": "awsui_header_14iqq_1qss1_345",
+  "header-full-page": "awsui_header-full-page_14iqq_1qss1_350",
+  "header-with-media": "awsui_header-with-media_14iqq_1qss1_353",
+  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_1qss1_359",
+  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_1qss1_363",
+  "header-stuck": "awsui_header-stuck_14iqq_1qss1_369",
+  "header-variant-cards": "awsui_header-variant-cards_14iqq_1qss1_379",
+  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_1qss1_382",
+  "with-paddings": "awsui_with-paddings_14iqq_1qss1_388",
+  "with-hidden-content": "awsui_with-hidden-content_14iqq_1qss1_397",
+  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_1qss1_455",
+  "header-cover": "awsui_header-cover_14iqq_1qss1_458",
+  "content": "awsui_content_14iqq_1qss1_304",
+  "content-fit-height": "awsui_content-fit-height_14iqq_1qss1_486",
+  "content-with-media": "awsui_content-with-media_14iqq_1qss1_496",
+  "footer": "awsui_footer_14iqq_1qss1_500",
+  "with-divider": "awsui_with-divider_14iqq_1qss1_504"
 };
   

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,EAAiB,SAAS,EAAqD,MAAM,OAAO,CAAC;AAQpG,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"}
+{"version":3,"file":"use-sticky-header.d.ts","sourceRoot":"","sources":["../../../src/container/use-sticky-header.ts"],"names":[],"mappings":"AAEA,OAAO,EAAiB,SAAS,EAAqD,MAAM,OAAO,CAAC;AASpG,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

@@ -1,10 +1,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { createContext, useCallback, useEffect, useLayoutEffect, useState } from 'react';
+import { findUpUntil } from '@cloudscape-design/component-toolkit/dom';
 import * as tokens from '../internal/generated/styles/tokens';
 import { useMobile } from '../internal/hooks/use-mobile';
 import globalVars from '../internal/styles/global-vars';
-import { findUpUntil } from '../internal/utils/dom';
 import { getOverflowParents } from '../internal/utils/scrollable-containers';
 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;

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 { createContext, RefObject, useCallback, useEffect, useLayoutEffect, useState } from 'react';\n\nimport * as tokens from '../internal/generated/styles/tokens';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport globalVars from '../internal/styles/global-vars';\nimport { findUpUntil } from '../internal/utils/dom';\nimport { getOverflowParents } from '../internal/utils/scrollable-containers';\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"]}
+{"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 { createContext, RefObject, useCallback, useEffect, useLayoutEffect, useState } from 'react';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\n\nimport * as tokens from '../internal/generated/styles/tokens';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport globalVars from '../internal/styles/global-vars';\nimport { getOverflowParents } from '../internal/utils/scrollable-containers';\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/styles.css.js

@@ -1,19 +1,19 @@
 
     import './styles.scoped.css';
     export default {
-  "layout": "awsui_layout_5gtk3_1lwj9_141",
-  "background": "awsui_background_5gtk3_1lwj9_155",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_5gtk3_1lwj9_160",
-  "header-background": "awsui_header-background_5gtk3_1lwj9_163",
-  "notifications": "awsui_notifications_5gtk3_1lwj9_167",
-  "breadcrumbs": "awsui_breadcrumbs_5gtk3_1lwj9_172",
-  "default-padding": "awsui_default-padding_5gtk3_1lwj9_177",
-  "header-wrapper": "awsui_header-wrapper_5gtk3_1lwj9_181",
-  "with-divider": "awsui_with-divider_5gtk3_1lwj9_186",
-  "content": "awsui_content_5gtk3_1lwj9_189",
-  "has-header": "awsui_has-header_5gtk3_1lwj9_193",
-  "is-visual-refresh": "awsui_is-visual-refresh_5gtk3_1lwj9_200",
-  "has-default-background": "awsui_has-default-background_5gtk3_1lwj9_200",
-  "has-notifications": "awsui_has-notifications_5gtk3_1lwj9_204"
+  "layout": "awsui_layout_5gtk3_2vkgm_141",
+  "background": "awsui_background_5gtk3_2vkgm_155",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_5gtk3_2vkgm_160",
+  "header-background": "awsui_header-background_5gtk3_2vkgm_163",
+  "notifications": "awsui_notifications_5gtk3_2vkgm_167",
+  "breadcrumbs": "awsui_breadcrumbs_5gtk3_2vkgm_172",
+  "default-padding": "awsui_default-padding_5gtk3_2vkgm_177",
+  "header-wrapper": "awsui_header-wrapper_5gtk3_2vkgm_181",
+  "with-divider": "awsui_with-divider_5gtk3_2vkgm_186",
+  "content": "awsui_content_5gtk3_2vkgm_189",
+  "has-header": "awsui_has-header_5gtk3_2vkgm_193",
+  "is-visual-refresh": "awsui_is-visual-refresh_5gtk3_2vkgm_200",
+  "has-default-background": "awsui_has-default-background_5gtk3_2vkgm_200",
+  "has-notifications": "awsui_has-notifications_5gtk3_2vkgm_204"
 };
   

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

@@ -138,7 +138,7 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_layout_5gtk3_1lwj9_141:not(#\9) {
+.awsui_layout_5gtk3_2vkgm_141:not(#\9) {
   --awsui-content-layout-default-horizontal-padding-g964ok: var(--space-layout-content-horizontal-sin989, 40px);
   --awsui-content-layout-max-content-width-g964ok: 0px;
   --awsui-content-layout-main-gap-g964ok: 0px;
@@ -148,62 +148,62 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   min-block-size: 100%;
 }
 @media (max-width: 688px) {
-  .awsui_layout_5gtk3_1lwj9_141:not(#\9) {
+  .awsui_layout_5gtk3_2vkgm_141:not(#\9) {
     --awsui-content-layout-default-horizontal-padding-g964ok: var(--space-l-xu1x80, 20px);
   }
 }
-.awsui_layout_5gtk3_1lwj9_141 > .awsui_background_5gtk3_1lwj9_155:not(#\9) {
+.awsui_layout_5gtk3_2vkgm_141 > .awsui_background_5gtk3_2vkgm_155:not(#\9) {
   grid-column: 1/8;
   grid-row: 1/6;
-  color: var(--color-text-body-default-ffdwgg, #16191f);
+  color: var(--color-text-body-default-bvmavx, #16191f);
 }
-.awsui_layout_5gtk3_1lwj9_141 > .awsui_background_5gtk3_1lwj9_155.awsui_is-overlap-disabled_5gtk3_1lwj9_160:not(#\9) {
+.awsui_layout_5gtk3_2vkgm_141 > .awsui_background_5gtk3_2vkgm_155.awsui_is-overlap-disabled_5gtk3_2vkgm_160:not(#\9) {
   grid-row: 1/5;
 }
-.awsui_layout_5gtk3_1lwj9_141 > .awsui_background_5gtk3_1lwj9_155 > .awsui_header-background_5gtk3_1lwj9_163:not(#\9) {
+.awsui_layout_5gtk3_2vkgm_141 > .awsui_background_5gtk3_2vkgm_155 > .awsui_header-background_5gtk3_2vkgm_163:not(#\9) {
   inline-size: 100%;
   block-size: 100%;
 }
-.awsui_layout_5gtk3_1lwj9_141 > .awsui_notifications_5gtk3_1lwj9_167:not(#\9) {
+.awsui_layout_5gtk3_2vkgm_141 > .awsui_notifications_5gtk3_2vkgm_167:not(#\9) {
   grid-column: 4;
   grid-row: 2;
   padding-block-end: var(--space-xs-xf5ch3, 8px);
 }
-.awsui_layout_5gtk3_1lwj9_141 > .awsui_breadcrumbs_5gtk3_1lwj9_172:not(#\9) {
+.awsui_layout_5gtk3_2vkgm_141 > .awsui_breadcrumbs_5gtk3_2vkgm_172:not(#\9) {
   grid-column: 4;
   grid-row: 3;
   padding-block-end: var(--space-xs-xf5ch3, 8px);
 }
-.awsui_layout_5gtk3_1lwj9_141.awsui_default-padding_5gtk3_1lwj9_177:not(#\9) {
+.awsui_layout_5gtk3_2vkgm_141.awsui_default-padding_5gtk3_2vkgm_177:not(#\9) {
   --awsui-content-layout-main-gap-g964ok: var(--space-scaled-m-er48cl, 16px);
   grid-template-columns: var(--awsui-toggles-left-width-g964ok, 0) var(--awsui-content-layout-default-horizontal-padding-g964ok, 0) 1fr minmax(0, var(--awsui-content-layout-max-content-width-g964ok)) 1fr var(--awsui-content-layout-default-horizontal-padding-g964ok, 0) var(--awsui-toggles-right-width-g964ok, 0);
 }
-.awsui_layout_5gtk3_1lwj9_141 > .awsui_header-wrapper_5gtk3_1lwj9_181:not(#\9) {
+.awsui_layout_5gtk3_2vkgm_141 > .awsui_header-wrapper_5gtk3_2vkgm_181:not(#\9) {
   grid-column: 4;
   grid-row: 4;
   padding-block-end: var(--space-content-header-padding-bottom-d3iv03, 16px);
 }
-.awsui_layout_5gtk3_1lwj9_141 > .awsui_header-wrapper_5gtk3_1lwj9_181.awsui_with-divider_5gtk3_1lwj9_186:not(#\9) {
-  border-block-end: 1px solid var(--color-border-divider-default-in8dkg, #eaeded);
+.awsui_layout_5gtk3_2vkgm_141 > .awsui_header-wrapper_5gtk3_2vkgm_181.awsui_with-divider_5gtk3_2vkgm_186:not(#\9) {
+  border-block-end: 1px solid var(--color-border-divider-default-qn9pru, #eaeded);
 }
-.awsui_layout_5gtk3_1lwj9_141 > .awsui_content_5gtk3_1lwj9_189:not(#\9) {
+.awsui_layout_5gtk3_2vkgm_141 > .awsui_content_5gtk3_2vkgm_189:not(#\9) {
   grid-column: 4;
   grid-row: 5/8;
 }
-.awsui_layout_5gtk3_1lwj9_141:not(#\9):not(.awsui_has-header_5gtk3_1lwj9_193) {
+.awsui_layout_5gtk3_2vkgm_141:not(#\9):not(.awsui_has-header_5gtk3_2vkgm_193) {
   grid-template-rows: var(--awsui-content-layout-main-gap-g964ok) min-content min-content 0 calc(var(--space-dark-header-overlap-distance-f6oo6u, 0px)) 1fr;
 }
-.awsui_layout_5gtk3_1lwj9_141.awsui_is-overlap-disabled_5gtk3_1lwj9_160:not(#\9) {
+.awsui_layout_5gtk3_2vkgm_141.awsui_is-overlap-disabled_5gtk3_2vkgm_160:not(#\9) {
   grid-template-rows: var(--awsui-content-layout-main-gap-g964ok) min-content min-content auto 0 1fr;
 }
 
-.awsui_layout_5gtk3_1lwj9_141.awsui_is-visual-refresh_5gtk3_1lwj9_200 > .awsui_background_5gtk3_1lwj9_155.awsui_has-default-background_5gtk3_1lwj9_200:not(#\9) {
-  background-color: var(--color-background-layout-main-td853a, #f2f3f3);
+.awsui_layout_5gtk3_2vkgm_141.awsui_is-visual-refresh_5gtk3_2vkgm_200 > .awsui_background_5gtk3_2vkgm_155.awsui_has-default-background_5gtk3_2vkgm_200:not(#\9) {
+  background-color: var(--color-background-layout-main-84obzs, #f2f3f3);
 }
 
-.awsui_layout_5gtk3_1lwj9_141:not(#\9):not(.awsui_is-visual-refresh_5gtk3_1lwj9_200).awsui_has-notifications_5gtk3_1lwj9_204 {
+.awsui_layout_5gtk3_2vkgm_141:not(#\9):not(.awsui_is-visual-refresh_5gtk3_2vkgm_200).awsui_has-notifications_5gtk3_2vkgm_204 {
   --awsui-content-layout-main-gap-g964ok: 0px;
 }
-.awsui_layout_5gtk3_1lwj9_141:not(#\9):not(.awsui_is-visual-refresh_5gtk3_1lwj9_200) > .awsui_notifications_5gtk3_1lwj9_167 {
+.awsui_layout_5gtk3_2vkgm_141:not(#\9):not(.awsui_is-visual-refresh_5gtk3_2vkgm_200) > .awsui_notifications_5gtk3_2vkgm_167 {
   grid-column: 1/8;
 }