@cloudscape-design/components-themeable 3.0.513 → 3.0.515

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "16dc073ad946ac5273a488f9bd4de2bd30ef8229"
+  "commit": "43d19872b1abe3348f59ead968d1b22aa38cb9d9"
 }

package/lib/internal/scss/app-layout/visual-refresh/mobile-toolbar.scss

@@ -9,9 +9,9 @@
 
 section.mobile-toolbar {
   align-items: center;
-  background-color: awsui.$color-background-home-header;
+  background-color: awsui.$color-background-layout-main;
   border-bottom: 1px solid awsui.$color-border-divider-default;
-  box-shadow: awsui.$shadow-panel-toggle;
+  box-shadow: awsui.$shadow-sticky;
   box-sizing: border-box;
   height: var(#{custom-props.$mobileBarHeight});
   display: grid;
@@ -22,6 +22,10 @@ section.mobile-toolbar {
   position: sticky;
   top: var(#{custom-props.$offsetTop});
   z-index: 1000;
+  &:not(.remove-high-contrast-header) {
+    background-color: awsui.$color-background-home-header;
+    box-shadow: awsui.$shadow-panel-toggle;
+  }
 
   > .mobile-toolbar-nav {
     grid-column: 1;

package/lib/internal/scss/app-layout/visual-refresh/trigger-button.scss

@@ -88,8 +88,11 @@ handleSplitPanelMaxWidth function in the context.
 
 .trigger-wrapper {
   position: relative;
-  box-shadow: awsui.$shadow-panel-toggle;
   border-radius: 50%;
+
+  &:not(.remove-high-contrast-header) {
+    box-shadow: awsui.$shadow-panel-toggle;
+  }
 }
 
 .dot {

package/lib/internal/scss/cards/styles.scss

@@ -88,6 +88,13 @@
   // Unfortunately, we don't have access to the header of InternalContainer
   // in order to use margin-bottom instead.
   margin-top: awsui.$space-grid-gutter;
+  &.refresh {
+    &.header-variant-full-page {
+      &.remove-high-contrast-header {
+        margin-top: awsui.$space-scaled-s;
+      }
+    }
+  }
 }
 
 .card {

package/lib/internal/scss/container/styles.scss

@@ -189,6 +189,17 @@
   &-variant-full-page.header-stuck {
     box-shadow: none;
 
+    &::before {
+      content: '';
+
+      position: absolute;
+      right: 0;
+      left: 0;
+      bottom: 0;
+      top: 0;
+      border-bottom: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+    }
+
     &::after {
       content: '';
 
@@ -202,6 +213,13 @@
       // This polygon only shows the part of the shadow that is lower than the element itself.
       clip-path: polygon(-999% 100%, 999% 100%, 999% 999%, -999% 999%);
     }
+
+    &:not(.remove-high-contrast-header) {
+      &::before {
+        content: '';
+        border-bottom: none;
+      }
+    }
   }
 }
 

package/lib/internal/scss/wizard/styles.scss

@@ -18,12 +18,15 @@
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   grid-template-rows: auto 1fr;
-  row-gap: awsui.$space-scaled-xl;
+  row-gap: awsui.$space-scaled-xxs;
 
   &.small-container {
     grid-template-columns: minmax(0, 1fr) 0;
     row-gap: awsui.$space-scaled-l;
   }
+  &:not(.remove-high-contrast-header) {
+    row-gap: awsui.$space-scaled-xl;
+  }
 }
 
 .wizard:not(.refresh) {
@@ -35,14 +38,18 @@
   grid-row: 1 / span 2;
   padding-top: var(#{custom-props.$containerFirstGap}, 0px);
 
-  > ul {
+  > ul.refresh {
     background: awsui.$color-background-container-content;
     position: relative;
-    @include styles.container-style;
     margin: 0;
-    padding: awsui.$space-scaled-m awsui.$space-l awsui.$space-scaled-l awsui.$space-m;
-    width: 280px;
+    padding: awsui.$space-scaled-xxs 0 0 0;
+    width: 260px;
     box-sizing: border-box;
+    &:not(.remove-high-contrast-header) {
+      @include styles.container-style;
+      padding: awsui.$space-scaled-m awsui.$space-l awsui.$space-scaled-l awsui.$space-m;
+      width: 280px;
+    }
 
     > li {
       display: grid;
@@ -172,7 +179,7 @@
   padding-top: awsui.$space-xxs;
   width: 20 * styles.$base-size;
 
-  > ul {
+  > ul:not(.refresh) {
     list-style: none;
     padding: 0;
     margin: 0;
@@ -222,8 +229,15 @@
   }
 
   > .form-header > .form-header-content {
-    padding-top: calc(var(#{custom-props.$containerFirstGap}, 0px) + awsui.$space-s);
-    padding-bottom: awsui.$space-scaled-m;
+    padding-top: calc(var(#{custom-props.$containerFirstGap}, 0px) + awsui.$space-m - awsui.$space-xxxs);
+    padding-bottom: awsui.$space-scaled-s;
+  }
+
+  &:not(.remove-high-contrast-header) {
+    > .form-header > .form-header-content {
+      padding-top: calc(var(#{custom-props.$containerFirstGap}, 0px) + awsui.$space-s);
+      padding-bottom: awsui.$space-scaled-m;
+    }
   }
 
   > .form-component {

package/lib/internal/template/app-layout/visual-refresh/background.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"background.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/background.tsx"],"names":[],"mappings":";AAOA,MAAM,CAAC,OAAO,UAAU,UAAU,uBA2BjC"}
+{"version":3,"file":"background.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/background.tsx"],"names":[],"mappings":";AAQA,MAAM,CAAC,OAAO,UAAU,UAAU,uBA2BjC"}

package/lib/internal/template/app-layout/visual-refresh/background.js

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import clsx from 'clsx';
+import { contentHeaderClassName } from '../../internal/utils/content-header-utils';
 import { useAppLayoutInternals } from './context';
 import styles from './styles.css.js';
 export default function Background() {
@@ -9,7 +10,7 @@ export default function Background() {
     if (!hasNotificationsContent && (!breadcrumbs || isMobile) && !hasBackgroundOverlap) {
         return null;
     }
-    return (React.createElement("div", { className: clsx(styles.background, 'awsui-context-content-header') },
+    return (React.createElement("div", { className: clsx(styles.background, contentHeaderClassName) },
         React.createElement("div", { className: styles['scrolling-background'] }),
         !isMobile && hasStickyBackground && (React.createElement("div", { className: clsx(styles['sticky-background'], {
                 [styles['has-sticky-notifications']]: stickyNotifications,

package/lib/internal/template/app-layout/visual-refresh/background.js.map

@@ -1 +1 @@
-{"version":3,"file":"background.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/background.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,OAAO,UAAU,UAAU;IAChC,MAAM,EACJ,WAAW,EACX,oBAAoB,EACpB,uBAAuB,EACvB,mBAAmB,EACnB,QAAQ,EACR,mBAAmB,GACpB,GAAG,qBAAqB,EAAE,CAAC;IAE5B,IAAI,CAAC,uBAAuB,IAAI,CAAC,CAAC,WAAW,IAAI,QAAQ,CAAC,IAAI,CAAC,oBAAoB,EAAE;QACnF,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,8BAA8B,CAAC;QACrE,6BAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,GAAI;QAEjD,CAAC,QAAQ,IAAI,mBAAmB,IAAI,CACnC,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,EAAE;gBAC3C,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,EAAE,mBAAmB;aAC1D,CAAC,GACF,CACH,CACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\n\nexport default function Background() {\n  const {\n    breadcrumbs,\n    hasBackgroundOverlap,\n    hasNotificationsContent,\n    hasStickyBackground,\n    isMobile,\n    stickyNotifications,\n  } = useAppLayoutInternals();\n\n  if (!hasNotificationsContent && (!breadcrumbs || isMobile) && !hasBackgroundOverlap) {\n    return null;\n  }\n\n  return (\n    <div className={clsx(styles.background, 'awsui-context-content-header')}>\n      <div className={styles['scrolling-background']} />\n\n      {!isMobile && hasStickyBackground && (\n        <div\n          className={clsx(styles['sticky-background'], {\n            [styles['has-sticky-notifications']]: stickyNotifications,\n          })}\n        />\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"background.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/background.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,sBAAsB,EAAE,MAAM,2CAA2C,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,OAAO,UAAU,UAAU;IAChC,MAAM,EACJ,WAAW,EACX,oBAAoB,EACpB,uBAAuB,EACvB,mBAAmB,EACnB,QAAQ,EACR,mBAAmB,GACpB,GAAG,qBAAqB,EAAE,CAAC;IAE5B,IAAI,CAAC,uBAAuB,IAAI,CAAC,CAAC,WAAW,IAAI,QAAQ,CAAC,IAAI,CAAC,oBAAoB,EAAE;QACnF,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,sBAAsB,CAAC;QAC7D,6BAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,GAAI;QAEjD,CAAC,QAAQ,IAAI,mBAAmB,IAAI,CACnC,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,EAAE;gBAC3C,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,EAAE,mBAAmB;aAC1D,CAAC,GACF,CACH,CACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { contentHeaderClassName } from '../../internal/utils/content-header-utils';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\n\nexport default function Background() {\n  const {\n    breadcrumbs,\n    hasBackgroundOverlap,\n    hasNotificationsContent,\n    hasStickyBackground,\n    isMobile,\n    stickyNotifications,\n  } = useAppLayoutInternals();\n\n  if (!hasNotificationsContent && (!breadcrumbs || isMobile) && !hasBackgroundOverlap) {\n    return null;\n  }\n\n  return (\n    <div className={clsx(styles.background, contentHeaderClassName)}>\n      <div className={styles['scrolling-background']} />\n\n      {!isMobile && hasStickyBackground && (\n        <div\n          className={clsx(styles['sticky-background'], {\n            [styles['has-sticky-notifications']]: stickyNotifications,\n          })}\n        />\n      )}\n    </div>\n  );\n}\n"]}

package/lib/internal/template/app-layout/visual-refresh/breadcrumbs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/breadcrumbs.tsx"],"names":[],"mappings":";AAQA,MAAM,CAAC,OAAO,UAAU,WAAW,uBAqBlC"}
+{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/breadcrumbs.tsx"],"names":[],"mappings":";AASA,MAAM,CAAC,OAAO,UAAU,WAAW,uBAqBlC"}

package/lib/internal/template/app-layout/visual-refresh/breadcrumbs.js

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import clsx from 'clsx';
+import { contentHeaderClassName } from '../../internal/utils/content-header-utils';
 import { useAppLayoutInternals } from './context';
 import styles from './styles.css.js';
 import testutilStyles from '../test-classes/styles.css.js';
@@ -12,6 +13,6 @@ export default function Breadcrumbs() {
     }
     return (React.createElement("div", { className: clsx(styles.breadcrumbs, testutilStyles.breadcrumbs, {
             [styles['has-sticky-background']]: hasStickyBackground,
-        }, 'awsui-context-content-header') }, breadcrumbs));
+        }, contentHeaderClassName) }, breadcrumbs));
 }
 //# sourceMappingURL=breadcrumbs.js.map

package/lib/internal/template/app-layout/visual-refresh/breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/breadcrumbs.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAE3D,MAAM,CAAC,OAAO,UAAU,WAAW;IACjC,MAAM,EAAE,WAAW,EAAE,mBAAmB,EAAE,QAAQ,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAE/E,IAAI,QAAQ,IAAI,CAAC,WAAW,EAAE;QAC5B,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,WAAW,EAClB,cAAc,CAAC,WAAW,EAC1B;YACE,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,mBAAmB;SACvD,EACD,8BAA8B,CAC/B,IAEA,WAAW,CACR,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport default function Breadcrumbs() {\n  const { breadcrumbs, hasStickyBackground, isMobile } = useAppLayoutInternals();\n\n  if (isMobile || !breadcrumbs) {\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx(\n        styles.breadcrumbs,\n        testutilStyles.breadcrumbs,\n        {\n          [styles['has-sticky-background']]: hasStickyBackground,\n        },\n        'awsui-context-content-header'\n      )}\n    >\n      {breadcrumbs}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"breadcrumbs.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/breadcrumbs.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,sBAAsB,EAAE,MAAM,2CAA2C,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAE3D,MAAM,CAAC,OAAO,UAAU,WAAW;IACjC,MAAM,EAAE,WAAW,EAAE,mBAAmB,EAAE,QAAQ,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAE/E,IAAI,QAAQ,IAAI,CAAC,WAAW,EAAE;QAC5B,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,WAAW,EAClB,cAAc,CAAC,WAAW,EAC1B;YACE,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,mBAAmB;SACvD,EACD,sBAAsB,CACvB,IAEA,WAAW,CACR,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { contentHeaderClassName } from '../../internal/utils/content-header-utils';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport default function Breadcrumbs() {\n  const { breadcrumbs, hasStickyBackground, isMobile } = useAppLayoutInternals();\n\n  if (isMobile || !breadcrumbs) {\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx(\n        styles.breadcrumbs,\n        testutilStyles.breadcrumbs,\n        {\n          [styles['has-sticky-background']]: hasStickyBackground,\n        },\n        contentHeaderClassName\n      )}\n    >\n      {breadcrumbs}\n    </div>\n  );\n}\n"]}

package/lib/internal/template/app-layout/visual-refresh/header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/header.tsx"],"names":[],"mappings":";AAOA,MAAM,CAAC,OAAO,UAAU,MAAM,uBAsB7B"}
+{"version":3,"file":"header.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/header.tsx"],"names":[],"mappings":";AAQA,MAAM,CAAC,OAAO,UAAU,MAAM,uBAsB7B"}

package/lib/internal/template/app-layout/visual-refresh/header.js

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import clsx from 'clsx';
+import { contentHeaderClassName } from '../../internal/utils/content-header-utils';
 import { useAppLayoutInternals } from './context';
 import styles from './styles.css.js';
 export default function Header() {
@@ -13,6 +14,6 @@ export default function Header() {
             [styles['has-breadcrumbs']]: breadcrumbs,
             [styles['has-notifications-content']]: hasNotificationsContent,
             [styles.unfocusable]: hasDrawerViewportOverlay,
-        }, 'awsui-context-content-header') }, contentHeader));
+        }, contentHeaderClassName) }, contentHeader));
 }
 //# sourceMappingURL=header.js.map

package/lib/internal/template/app-layout/visual-refresh/header.js.map

@@ -1 +1 @@
-{"version":3,"file":"header.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/header.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,OAAO,UAAU,MAAM;IAC5B,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAElH,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,gCACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO,EACd;YACE,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,WAAW;YACxC,CAAC,MAAM,CAAC,2BAA2B,CAAC,CAAC,EAAE,uBAAuB;YAC9D,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,wBAAwB;SAC/C,EACD,8BAA8B,CAC/B,IAEA,aAAa,CACP,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\n\nexport default function Header() {\n  const { breadcrumbs, contentHeader, hasDrawerViewportOverlay, hasNotificationsContent } = useAppLayoutInternals();\n\n  if (!contentHeader) {\n    return null;\n  }\n\n  return (\n    <header\n      className={clsx(\n        styles.content,\n        {\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles['has-notifications-content']]: hasNotificationsContent,\n          [styles.unfocusable]: hasDrawerViewportOverlay,\n        },\n        'awsui-context-content-header'\n      )}\n    >\n      {contentHeader}\n    </header>\n  );\n}\n"]}
+{"version":3,"file":"header.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/header.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,sBAAsB,EAAE,MAAM,2CAA2C,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,OAAO,UAAU,MAAM;IAC5B,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAElH,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,gCACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO,EACd;YACE,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,WAAW;YACxC,CAAC,MAAM,CAAC,2BAA2B,CAAC,CAAC,EAAE,uBAAuB;YAC9D,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,wBAAwB;SAC/C,EACD,sBAAsB,CACvB,IAEA,aAAa,CACP,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { contentHeaderClassName } from '../../internal/utils/content-header-utils';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\n\nexport default function Header() {\n  const { breadcrumbs, contentHeader, hasDrawerViewportOverlay, hasNotificationsContent } = useAppLayoutInternals();\n\n  if (!contentHeader) {\n    return null;\n  }\n\n  return (\n    <header\n      className={clsx(\n        styles.content,\n        {\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles['has-notifications-content']]: hasNotificationsContent,\n          [styles.unfocusable]: hasDrawerViewportOverlay,\n        },\n        contentHeaderClassName\n      )}\n    >\n      {contentHeader}\n    </header>\n  );\n}\n"]}

package/lib/internal/template/app-layout/visual-refresh/mobile-toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-toolbar.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/mobile-toolbar.tsx"],"names":[],"mappings":";AAUA,MAAM,CAAC,OAAO,UAAU,aAAa,uBAyFpC"}
+{"version":3,"file":"mobile-toolbar.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/mobile-toolbar.tsx"],"names":[],"mappings":";AAYA,MAAM,CAAC,OAAO,UAAU,aAAa,uBA0FpC"}

package/lib/internal/template/app-layout/visual-refresh/mobile-toolbar.js

@@ -2,11 +2,13 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import clsx from 'clsx';
+import { contentHeaderClassName } from '../../internal/utils/content-header-utils';
 import { InternalButton } from '../../button/internal';
 import { MobileTriggers as DrawersMobileTriggers } from './drawers';
 import { useAppLayoutInternals } from './context';
 import styles from './styles.css.js';
 import testutilStyles from '../test-classes/styles.css.js';
+import { shouldRemoveHighContrastHeader } from '../../internal/utils/content-header-utils';
 export default function MobileToolbar() {
     var _a, _b, _c;
     const { ariaLabels, breadcrumbs, drawers, handleNavigationClick, handleToolsClick, hasDrawerViewportOverlay, isMobile, isNavigationOpen, __embeddedViewMode, isToolsOpen, navigationHide, navigationRefs, toolsHide, toolsRefs, } = useAppLayoutInternals();
@@ -18,7 +20,7 @@ export default function MobileToolbar() {
     return (React.createElement("section", { className: clsx(styles['mobile-toolbar'], [testutilStyles['mobile-bar']], {
             [styles['has-breadcrumbs']]: breadcrumbs,
             [styles.unfocusable]: hasDrawerViewportOverlay,
-        }, testutilStyles['mobile-bar'], 'awsui-context-content-header') },
+        }, testutilStyles['mobile-bar'], contentHeaderClassName, shouldRemoveHighContrastHeader && styles['remove-high-contrast-header']) },
         !navigationHide && (React.createElement("nav", { "aria-hidden": isNavigationOpen, className: clsx(styles['mobile-toolbar-nav'], { [testutilStyles['drawer-closed']]: !isNavigationOpen }) },
             React.createElement(InternalButton, { ariaLabel: (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationToggle) !== null && _a !== void 0 ? _a : undefined, ariaExpanded: isNavigationOpen ? undefined : false, iconName: "menu", formAction: "none", onClick: () => handleNavigationClick(true), variant: "icon", className: testutilStyles['navigation-toggle'], ref: navigationRefs.toggle, disabled: hasDrawerViewportOverlay, __nativeAttributes: { 'aria-haspopup': isNavigationOpen ? undefined : true } }))),
         breadcrumbs && (React.createElement("div", { className: clsx(styles['mobile-toolbar-breadcrumbs'], testutilStyles.breadcrumbs) }, breadcrumbs)),

package/lib/internal/template/app-layout/visual-refresh/mobile-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-toolbar.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/mobile-toolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { InternalButton } from '../../button/internal';\nimport { MobileTriggers as DrawersMobileTriggers } from './drawers';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport default function MobileToolbar() {\n  const {\n    ariaLabels,\n    breadcrumbs,\n    drawers,\n    handleNavigationClick,\n    handleToolsClick,\n    hasDrawerViewportOverlay,\n    isMobile,\n    isNavigationOpen,\n    __embeddedViewMode,\n    isToolsOpen,\n    navigationHide,\n    navigationRefs,\n    toolsHide,\n    toolsRefs,\n  } = useAppLayoutInternals();\n\n  if (\n    !isMobile ||\n    __embeddedViewMode ||\n    (navigationHide && !breadcrumbs && toolsHide && (!drawers || drawers.length === 0))\n  ) {\n    return null;\n  }\n\n  return (\n    <section\n      className={clsx(\n        styles['mobile-toolbar'],\n        [testutilStyles['mobile-bar']],\n        {\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles.unfocusable]: hasDrawerViewportOverlay,\n        },\n        testutilStyles['mobile-bar'],\n        'awsui-context-content-header'\n      )}\n    >\n      {!navigationHide && (\n        <nav\n          aria-hidden={isNavigationOpen}\n          className={clsx(styles['mobile-toolbar-nav'], { [testutilStyles['drawer-closed']]: !isNavigationOpen })}\n        >\n          <InternalButton\n            ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n            ariaExpanded={isNavigationOpen ? undefined : false}\n            iconName=\"menu\"\n            formAction=\"none\"\n            onClick={() => handleNavigationClick(true)}\n            variant=\"icon\"\n            className={testutilStyles['navigation-toggle']}\n            ref={navigationRefs.toggle}\n            disabled={hasDrawerViewportOverlay}\n            __nativeAttributes={{ 'aria-haspopup': isNavigationOpen ? undefined : true }}\n          />\n        </nav>\n      )}\n\n      {breadcrumbs && (\n        <div className={clsx(styles['mobile-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>{breadcrumbs}</div>\n      )}\n\n      {drawers ? (\n        <DrawersMobileTriggers />\n      ) : (\n        !toolsHide && (\n          <aside\n            aria-hidden={isToolsOpen}\n            aria-label={ariaLabels?.tools ?? undefined}\n            className={clsx(styles['mobile-toolbar-tools'], { [testutilStyles['drawer-closed']]: !isToolsOpen })}\n          >\n            <InternalButton\n              className={testutilStyles['tools-toggle']}\n              ariaExpanded={isToolsOpen}\n              disabled={hasDrawerViewportOverlay}\n              ariaLabel={ariaLabels?.toolsToggle ?? undefined}\n              iconName=\"status-info\"\n              formAction=\"none\"\n              onClick={() => handleToolsClick(true)}\n              variant=\"icon\"\n              ref={toolsRefs.toggle}\n              __nativeAttributes={{ 'aria-haspopup': true }}\n            />\n          </aside>\n        )\n      )}\n    </section>\n  );\n}\n"]}
+{"version":3,"file":"mobile-toolbar.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/mobile-toolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { contentHeaderClassName } from '../../internal/utils/content-header-utils';\nimport { InternalButton } from '../../button/internal';\nimport { MobileTriggers as DrawersMobileTriggers } from './drawers';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { shouldRemoveHighContrastHeader } from '../../internal/utils/content-header-utils';\n\nexport default function MobileToolbar() {\n  const {\n    ariaLabels,\n    breadcrumbs,\n    drawers,\n    handleNavigationClick,\n    handleToolsClick,\n    hasDrawerViewportOverlay,\n    isMobile,\n    isNavigationOpen,\n    __embeddedViewMode,\n    isToolsOpen,\n    navigationHide,\n    navigationRefs,\n    toolsHide,\n    toolsRefs,\n  } = useAppLayoutInternals();\n\n  if (\n    !isMobile ||\n    __embeddedViewMode ||\n    (navigationHide && !breadcrumbs && toolsHide && (!drawers || drawers.length === 0))\n  ) {\n    return null;\n  }\n\n  return (\n    <section\n      className={clsx(\n        styles['mobile-toolbar'],\n        [testutilStyles['mobile-bar']],\n        {\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles.unfocusable]: hasDrawerViewportOverlay,\n        },\n        testutilStyles['mobile-bar'],\n        contentHeaderClassName,\n        shouldRemoveHighContrastHeader && styles['remove-high-contrast-header']\n      )}\n    >\n      {!navigationHide && (\n        <nav\n          aria-hidden={isNavigationOpen}\n          className={clsx(styles['mobile-toolbar-nav'], { [testutilStyles['drawer-closed']]: !isNavigationOpen })}\n        >\n          <InternalButton\n            ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n            ariaExpanded={isNavigationOpen ? undefined : false}\n            iconName=\"menu\"\n            formAction=\"none\"\n            onClick={() => handleNavigationClick(true)}\n            variant=\"icon\"\n            className={testutilStyles['navigation-toggle']}\n            ref={navigationRefs.toggle}\n            disabled={hasDrawerViewportOverlay}\n            __nativeAttributes={{ 'aria-haspopup': isNavigationOpen ? undefined : true }}\n          />\n        </nav>\n      )}\n\n      {breadcrumbs && (\n        <div className={clsx(styles['mobile-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>{breadcrumbs}</div>\n      )}\n\n      {drawers ? (\n        <DrawersMobileTriggers />\n      ) : (\n        !toolsHide && (\n          <aside\n            aria-hidden={isToolsOpen}\n            aria-label={ariaLabels?.tools ?? undefined}\n            className={clsx(styles['mobile-toolbar-tools'], { [testutilStyles['drawer-closed']]: !isToolsOpen })}\n          >\n            <InternalButton\n              className={testutilStyles['tools-toggle']}\n              ariaExpanded={isToolsOpen}\n              disabled={hasDrawerViewportOverlay}\n              ariaLabel={ariaLabels?.toolsToggle ?? undefined}\n              iconName=\"status-info\"\n              formAction=\"none\"\n              onClick={() => handleToolsClick(true)}\n              variant=\"icon\"\n              ref={toolsRefs.toggle}\n              __nativeAttributes={{ 'aria-haspopup': true }}\n            />\n          </aside>\n        )\n      )}\n    </section>\n  );\n}\n"]}

package/lib/internal/template/app-layout/visual-refresh/notifications.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notifications.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/notifications.tsx"],"names":[],"mappings":";AAQA,MAAM,CAAC,OAAO,UAAU,aAAa,uBA6BpC"}
+{"version":3,"file":"notifications.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/notifications.tsx"],"names":[],"mappings":";AASA,MAAM,CAAC,OAAO,UAAU,aAAa,uBA6BpC"}

package/lib/internal/template/app-layout/visual-refresh/notifications.js

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import clsx from 'clsx';
+import { contentHeaderClassName } from '../../internal/utils/content-header-utils';
 import { useAppLayoutInternals } from './context';
 import styles from './styles.css.js';
 import testutilStyles from '../test-classes/styles.css.js';
@@ -18,7 +19,7 @@ export default function Notifications() {
     return (React.createElement("div", { role: "region", "aria-label": (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.notifications) !== null && _a !== void 0 ? _a : undefined, className: clsx(styles.notifications, {
             [styles['sticky-notifications']]: stickyNotifications,
             [styles.unfocusable]: hasDrawerViewportOverlay,
-        }, testutilStyles.notifications, 'awsui-context-content-header') },
+        }, testutilStyles.notifications, contentHeaderClassName) },
         React.createElement("div", { ref: notificationsElement }, notifications)));
 }
 //# sourceMappingURL=notifications.js.map

package/lib/internal/template/app-layout/visual-refresh/notifications.js.map

@@ -1 +1 @@
-{"version":3,"file":"notifications.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/notifications.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAE3D,MAAM,CAAC,OAAO,UAAU,aAAa;;IACnC,MAAM,EAAE,UAAU,EAAE,wBAAwB,EAAE,aAAa,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,GACtG,qBAAqB,EAAE,CAAC;IAE1B,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED;;;OAGG;IACH,OAAO,CACL,6BACE,IAAI,EAAC,QAAQ,gBACD,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,mCAAI,SAAS,EAClD,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,aAAa,EACpB;YACE,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,mBAAmB;YACrD,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,wBAAwB;SAC/C,EACD,cAAc,CAAC,aAAa,EAC5B,8BAA8B,CAC/B;QAED,6BAAK,GAAG,EAAE,oBAAoB,IAAG,aAAa,CAAO,CACjD,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport default function Notifications() {\n  const { ariaLabels, hasDrawerViewportOverlay, notifications, notificationsElement, stickyNotifications } =\n    useAppLayoutInternals();\n\n  if (!notifications) {\n    return null;\n  }\n\n  /**\n   * The notificationsElement ref is assigned to an inner div to prevent internal bottom margin\n   * from affecting the calculated height, which is used for sticky elements below.\n   */\n  return (\n    <div\n      role=\"region\"\n      aria-label={ariaLabels?.notifications ?? undefined}\n      className={clsx(\n        styles.notifications,\n        {\n          [styles['sticky-notifications']]: stickyNotifications,\n          [styles.unfocusable]: hasDrawerViewportOverlay,\n        },\n        testutilStyles.notifications,\n        'awsui-context-content-header'\n      )}\n    >\n      <div ref={notificationsElement}>{notifications}</div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"notifications.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/notifications.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,sBAAsB,EAAE,MAAM,2CAA2C,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAE3D,MAAM,CAAC,OAAO,UAAU,aAAa;;IACnC,MAAM,EAAE,UAAU,EAAE,wBAAwB,EAAE,aAAa,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,GACtG,qBAAqB,EAAE,CAAC;IAE1B,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED;;;OAGG;IACH,OAAO,CACL,6BACE,IAAI,EAAC,QAAQ,gBACD,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,mCAAI,SAAS,EAClD,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,aAAa,EACpB;YACE,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,mBAAmB;YACrD,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,wBAAwB;SAC/C,EACD,cAAc,CAAC,aAAa,EAC5B,sBAAsB,CACvB;QAED,6BAAK,GAAG,EAAE,oBAAoB,IAAG,aAAa,CAAO,CACjD,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { contentHeaderClassName } from '../../internal/utils/content-header-utils';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport default function Notifications() {\n  const { ariaLabels, hasDrawerViewportOverlay, notifications, notificationsElement, stickyNotifications } =\n    useAppLayoutInternals();\n\n  if (!notifications) {\n    return null;\n  }\n\n  /**\n   * The notificationsElement ref is assigned to an inner div to prevent internal bottom margin\n   * from affecting the calculated height, which is used for sticky elements below.\n   */\n  return (\n    <div\n      role=\"region\"\n      aria-label={ariaLabels?.notifications ?? undefined}\n      className={clsx(\n        styles.notifications,\n        {\n          [styles['sticky-notifications']]: stickyNotifications,\n          [styles.unfocusable]: hasDrawerViewportOverlay,\n        },\n        testutilStyles.notifications,\n        contentHeaderClassName\n      )}\n    >\n      <div ref={notificationsElement}>{notifications}</div>\n    </div>\n  );\n}\n"]}

package/lib/internal/template/app-layout/visual-refresh/styles.css.js

@@ -1,85 +1,86 @@
 
     import './styles.scoped.css';
     export default {
-  "background": "awsui_background_hyvsj_1w7yt_93",
-  "scrolling-background": "awsui_scrolling-background_hyvsj_1w7yt_96",
-  "sticky-background": "awsui_sticky-background_hyvsj_1w7yt_102",
-  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_1w7yt_110",
-  "breadcrumbs": "awsui_breadcrumbs_hyvsj_1w7yt_123",
-  "has-sticky-background": "awsui_has-sticky-background_hyvsj_1w7yt_133",
-  "drawers-container": "awsui_drawers-container_hyvsj_1w7yt_145",
-  "has-open-drawer": "awsui_has-open-drawer_hyvsj_1w7yt_156",
-  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_1w7yt_179",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_1w7yt_184",
-  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_1w7yt_225",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_1w7yt_235",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_1w7yt_239",
-  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_1w7yt_253",
-  "drawers-trigger": "awsui_drawers-trigger_hyvsj_1w7yt_239",
-  "drawer": "awsui_drawer_hyvsj_1w7yt_145",
-  "drawer-content-container": "awsui_drawer-content-container_hyvsj_1w7yt_283",
-  "drawer-close-button": "awsui_drawer-close-button_hyvsj_1w7yt_292",
-  "drawer-content": "awsui_drawer-content_hyvsj_1w7yt_283",
-  "drawer-content-hidden": "awsui_drawer-content-hidden_hyvsj_1w7yt_300",
-  "drawer-slider": "awsui_drawer-slider_hyvsj_1w7yt_303",
-  "is-drawer-open": "awsui_is-drawer-open_hyvsj_1w7yt_310",
-  "content": "awsui_content_hyvsj_1w7yt_336",
-  "layout": "awsui_layout_hyvsj_1w7yt_357",
-  "has-max-content-width": "awsui_has-max-content-width_hyvsj_1w7yt_440",
-  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_1w7yt_455",
-  "content-type-table": "awsui_content-type-table_hyvsj_1w7yt_469",
-  "content-type-cards": "awsui_content-type-cards_hyvsj_1w7yt_469",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_1w7yt_475",
-  "is-hide-mobile-toolbar": "awsui_is-hide-mobile-toolbar_hyvsj_1w7yt_478",
-  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_1w7yt_510",
-  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_1w7yt_513",
-  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_1w7yt_523",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_1w7yt_526",
-  "content-first-child-header": "awsui_content-first-child-header_hyvsj_1w7yt_529",
-  "has-header": "awsui_has-header_hyvsj_1w7yt_529",
-  "content-first-child-main": "awsui_content-first-child-main_hyvsj_1w7yt_550",
-  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_1w7yt_550",
-  "has-split-panel": "awsui_has-split-panel_hyvsj_1w7yt_593",
-  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_1w7yt_593",
-  "block-body-scroll": "awsui_block-body-scroll_hyvsj_1w7yt_609",
-  "unfocusable": "awsui_unfocusable_hyvsj_1w7yt_614",
-  "container": "awsui_container_hyvsj_1w7yt_624",
-  "is-navigation-open": "awsui_is-navigation-open_hyvsj_1w7yt_649",
-  "is-tools-open": "awsui_is-tools-open_hyvsj_1w7yt_652",
-  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_1w7yt_652",
-  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_1w7yt_652",
-  "has-active-drawer": "awsui_has-active-drawer_hyvsj_1w7yt_652",
-  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_1w7yt_661",
-  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_1w7yt_677",
-  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_1w7yt_681",
-  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_1w7yt_685",
-  "navigation-container": "awsui_navigation-container_hyvsj_1w7yt_694",
-  "show-navigation": "awsui_show-navigation_hyvsj_1w7yt_738",
-  "animating": "awsui_animating_hyvsj_1w7yt_760",
-  "showButtons": "awsui_showButtons_hyvsj_1w7yt_1",
-  "navigation": "awsui_navigation_hyvsj_1w7yt_694",
-  "openNavigation": "awsui_openNavigation_hyvsj_1w7yt_1",
-  "animated-content": "awsui_animated-content_hyvsj_1w7yt_822",
-  "hide-navigation": "awsui_hide-navigation_hyvsj_1w7yt_831",
-  "notifications": "awsui_notifications_hyvsj_1w7yt_841",
-  "sticky-notifications": "awsui_sticky-notifications_hyvsj_1w7yt_847",
-  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_1w7yt_864",
-  "position-bottom": "awsui_position-bottom_hyvsj_1w7yt_911",
-  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_1w7yt_1",
-  "split-panel-side": "awsui_split-panel-side_hyvsj_1w7yt_940",
-  "position-side": "awsui_position-side_hyvsj_1w7yt_953",
-  "tools-container": "awsui_tools-container_hyvsj_1w7yt_975",
-  "tools": "awsui_tools_hyvsj_1w7yt_975",
-  "openTools": "awsui_openTools_hyvsj_1w7yt_1",
-  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_1w7yt_1072",
-  "hide-tools": "awsui_hide-tools_hyvsj_1w7yt_1082",
-  "show-tools": "awsui_show-tools_hyvsj_1w7yt_1094",
-  "has-tools-form": "awsui_has-tools-form_hyvsj_1w7yt_1072",
-  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_1w7yt_1178",
-  "trigger": "awsui_trigger_hyvsj_1w7yt_1178",
-  "selected": "awsui_selected_hyvsj_1w7yt_1241",
-  "badge": "awsui_badge_hyvsj_1w7yt_1261",
-  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_1w7yt_1265",
-  "dot": "awsui_dot_hyvsj_1w7yt_1271"
+  "background": "awsui_background_hyvsj_61vii_93",
+  "scrolling-background": "awsui_scrolling-background_hyvsj_61vii_96",
+  "sticky-background": "awsui_sticky-background_hyvsj_61vii_102",
+  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_61vii_110",
+  "breadcrumbs": "awsui_breadcrumbs_hyvsj_61vii_123",
+  "has-sticky-background": "awsui_has-sticky-background_hyvsj_61vii_133",
+  "drawers-container": "awsui_drawers-container_hyvsj_61vii_145",
+  "has-open-drawer": "awsui_has-open-drawer_hyvsj_61vii_156",
+  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_61vii_179",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_61vii_184",
+  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_61vii_225",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_61vii_235",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_61vii_239",
+  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_61vii_253",
+  "drawers-trigger": "awsui_drawers-trigger_hyvsj_61vii_239",
+  "drawer": "awsui_drawer_hyvsj_61vii_145",
+  "drawer-content-container": "awsui_drawer-content-container_hyvsj_61vii_283",
+  "drawer-close-button": "awsui_drawer-close-button_hyvsj_61vii_292",
+  "drawer-content": "awsui_drawer-content_hyvsj_61vii_283",
+  "drawer-content-hidden": "awsui_drawer-content-hidden_hyvsj_61vii_300",
+  "drawer-slider": "awsui_drawer-slider_hyvsj_61vii_303",
+  "is-drawer-open": "awsui_is-drawer-open_hyvsj_61vii_310",
+  "content": "awsui_content_hyvsj_61vii_336",
+  "layout": "awsui_layout_hyvsj_61vii_357",
+  "has-max-content-width": "awsui_has-max-content-width_hyvsj_61vii_440",
+  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_61vii_455",
+  "content-type-table": "awsui_content-type-table_hyvsj_61vii_469",
+  "content-type-cards": "awsui_content-type-cards_hyvsj_61vii_469",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_61vii_475",
+  "is-hide-mobile-toolbar": "awsui_is-hide-mobile-toolbar_hyvsj_61vii_478",
+  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_61vii_510",
+  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_61vii_513",
+  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_61vii_523",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_61vii_526",
+  "content-first-child-header": "awsui_content-first-child-header_hyvsj_61vii_529",
+  "has-header": "awsui_has-header_hyvsj_61vii_529",
+  "content-first-child-main": "awsui_content-first-child-main_hyvsj_61vii_550",
+  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_61vii_550",
+  "has-split-panel": "awsui_has-split-panel_hyvsj_61vii_593",
+  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_61vii_593",
+  "block-body-scroll": "awsui_block-body-scroll_hyvsj_61vii_609",
+  "unfocusable": "awsui_unfocusable_hyvsj_61vii_614",
+  "container": "awsui_container_hyvsj_61vii_624",
+  "is-navigation-open": "awsui_is-navigation-open_hyvsj_61vii_649",
+  "is-tools-open": "awsui_is-tools-open_hyvsj_61vii_652",
+  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_61vii_652",
+  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_61vii_652",
+  "has-active-drawer": "awsui_has-active-drawer_hyvsj_61vii_652",
+  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_61vii_661",
+  "remove-high-contrast-header": "awsui_remove-high-contrast-header_hyvsj_61vii_677",
+  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_61vii_681",
+  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_61vii_685",
+  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_61vii_689",
+  "navigation-container": "awsui_navigation-container_hyvsj_61vii_698",
+  "show-navigation": "awsui_show-navigation_hyvsj_61vii_742",
+  "animating": "awsui_animating_hyvsj_61vii_764",
+  "showButtons": "awsui_showButtons_hyvsj_61vii_1",
+  "navigation": "awsui_navigation_hyvsj_61vii_698",
+  "openNavigation": "awsui_openNavigation_hyvsj_61vii_1",
+  "animated-content": "awsui_animated-content_hyvsj_61vii_826",
+  "hide-navigation": "awsui_hide-navigation_hyvsj_61vii_835",
+  "notifications": "awsui_notifications_hyvsj_61vii_845",
+  "sticky-notifications": "awsui_sticky-notifications_hyvsj_61vii_851",
+  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_61vii_868",
+  "position-bottom": "awsui_position-bottom_hyvsj_61vii_915",
+  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_61vii_1",
+  "split-panel-side": "awsui_split-panel-side_hyvsj_61vii_944",
+  "position-side": "awsui_position-side_hyvsj_61vii_957",
+  "tools-container": "awsui_tools-container_hyvsj_61vii_979",
+  "tools": "awsui_tools_hyvsj_61vii_979",
+  "openTools": "awsui_openTools_hyvsj_61vii_1",
+  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_61vii_1076",
+  "hide-tools": "awsui_hide-tools_hyvsj_61vii_1086",
+  "show-tools": "awsui_show-tools_hyvsj_61vii_1098",
+  "has-tools-form": "awsui_has-tools-form_hyvsj_61vii_1076",
+  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_61vii_1182",
+  "trigger": "awsui_trigger_hyvsj_61vii_1182",
+  "selected": "awsui_selected_hyvsj_61vii_1245",
+  "badge": "awsui_badge_hyvsj_61vii_1265",
+  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_61vii_1269",
+  "dot": "awsui_dot_hyvsj_61vii_1277"
 };