@cloudscape-design/components-themeable 3.0.663 → 3.0.665

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

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/layout.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 customCssProps from '../../internal/generated/custom-css-properties';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\ninterface LayoutProps {\n  children: React.ReactNode;\n}\n\n/**\n * The layoutElement ref will be used by the resize observers to calculate the offset from\n * the top and bottom of the viewport based on the header and footer elements. This is to\n * ensure the Layout component minimum height will fill 100% of the viewport less those\n * cumulative heights.\n */\nexport default function Layout({ children }: LayoutProps) {\n  const {\n    breadcrumbs,\n    contentHeader,\n    contentType,\n    disableBodyScroll,\n    disableContentPaddings,\n    drawersTriggerCount,\n    footerHeight,\n    hasNotificationsContent,\n    hasStickyBackground,\n    hasOpenDrawer,\n    headerHeight,\n    isBackgroundOverlapDisabled,\n    isMobile,\n    navigationOpen,\n    layoutElement,\n    layoutWidth,\n    mainOffsetLeft,\n    maxContentWidth,\n    minContentWidth,\n    navigationHide,\n    notificationsHeight,\n    __embeddedViewMode,\n    splitPanelPosition,\n    stickyNotifications,\n    splitPanelDisplayed,\n  } = useAppLayoutInternals();\n\n  // Determine the first content child so the gap will vertically align with the trigger buttons\n  const contentFirstChild = getContentFirstChild(breadcrumbs, contentHeader, hasNotificationsContent, isMobile);\n\n  // Content gaps on the left and right are used with the minmax function in the CSS grid column definition\n  const hasContentGapLeft = navigationOpen || navigationHide;\n  const hasContentGapRight = drawersTriggerCount === 0 || hasOpenDrawer;\n\n  return (\n    <main\n      className={clsx(\n        styles.layout,\n        styles[`content-first-child-${contentFirstChild}`],\n        styles[`content-type-${contentType}`],\n        styles[`split-panel-position-${splitPanelPosition ?? 'bottom'}`],\n        {\n          [styles['disable-body-scroll']]: disableBodyScroll,\n          [testutilStyles['disable-body-scroll-root']]: disableBodyScroll,\n          [styles['disable-content-paddings']]: disableContentPaddings,\n          [styles['has-breadcrumbs']]: breadcrumbs && !isMobile,\n          [styles['has-content-gap-left']]: hasContentGapLeft,\n          [styles['has-content-gap-right']]: hasContentGapRight,\n          [styles['has-header']]: contentHeader,\n          [styles['has-max-content-width']]: maxContentWidth && maxContentWidth > 0,\n          [styles['has-split-panel']]: splitPanelDisplayed,\n          [styles['has-sticky-background']]: hasStickyBackground,\n          [styles['has-sticky-notifications']]: stickyNotifications && hasNotificationsContent,\n          [styles['is-overlap-disabled']]: isBackgroundOverlapDisabled,\n          [styles['is-hide-mobile-toolbar']]: __embeddedViewMode,\n          [styles['has-left-toggles-gutter']]: !(isMobile || navigationHide || navigationOpen),\n          [styles['has-right-toggles-gutter']]: !isMobile && !hasContentGapRight,\n        },\n        testutilStyles.root\n      )}\n      ref={layoutElement}\n      style={{\n        [customCssProps.headerHeight]: `${headerHeight}px`,\n        [customCssProps.footerHeight]: `${footerHeight}px`,\n        [customCssProps.layoutWidth]: `${layoutWidth}px`,\n        [customCssProps.mainOffsetLeft]: `${mainOffsetLeft}px`,\n        ...(maxContentWidth && { [customCssProps.maxContentWidth]: `${maxContentWidth}px` }),\n        ...(minContentWidth && { [customCssProps.minContentWidth]: `${minContentWidth}px` }),\n        [customCssProps.notificationsHeight]: `${notificationsHeight}px`,\n      }}\n    >\n      {children}\n    </main>\n  );\n}\n\n/*\nThe Notifications, Breadcrumbs, Header, and Main are all rendered in the center\ncolumn of the grid layout. Any of these could be the first child to render in the\ncontent area if the previous siblings do not exist. The grid gap before the first\nchild will be different to ensure vertical alignment with the trigger buttons.\n*/\nfunction getContentFirstChild(\n  breadcrumbs: React.ReactNode,\n  contentHeader: React.ReactNode,\n  hasNotificationsContent: boolean,\n  isMobile: boolean\n) {\n  let contentFirstChild = 'main';\n\n  if (hasNotificationsContent) {\n    contentFirstChild = 'notifications';\n  } else if (breadcrumbs && !isMobile) {\n    contentFirstChild = 'breadcrumbs';\n  } else if (contentHeader) {\n    contentFirstChild = 'header';\n  }\n\n  return contentFirstChild;\n}\n"]}
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/layout.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 customCssProps from '../../internal/generated/custom-css-properties';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\ninterface LayoutProps {\n  children: React.ReactNode;\n}\n\n/**\n * The layoutElement ref will be used by the resize observers to calculate the offset from\n * the top and bottom of the viewport based on the header and footer elements. This is to\n * ensure the Layout component minimum height will fill 100% of the viewport less those\n * cumulative heights.\n */\nexport default function Layout({ children }: LayoutProps) {\n  const {\n    breadcrumbs,\n    contentHeader,\n    contentType,\n    disableBodyScroll,\n    disableContentPaddings,\n    drawersTriggerCount,\n    footerHeight,\n    hasNotificationsContent,\n    hasOpenDrawer,\n    headerHeight,\n    isBackgroundOverlapDisabled,\n    isMobile,\n    navigationOpen,\n    layoutElement,\n    layoutWidth,\n    mainOffsetLeft,\n    maxContentWidth,\n    minContentWidth,\n    navigationHide,\n    notificationsHeight,\n    __embeddedViewMode,\n    splitPanelPosition,\n    splitPanelDisplayed,\n  } = useAppLayoutInternals();\n\n  // Determine the first content child so the gap will vertically align with the trigger buttons\n  const contentFirstChild = getContentFirstChild(breadcrumbs, contentHeader, hasNotificationsContent, isMobile);\n\n  // Content gaps on the left and right are used with the minmax function in the CSS grid column definition\n  const hasContentGapLeft = navigationOpen || navigationHide;\n  const hasContentGapRight = drawersTriggerCount === 0 || hasOpenDrawer;\n\n  return (\n    <main\n      className={clsx(\n        styles.layout,\n        styles[`content-first-child-${contentFirstChild}`],\n        styles[`content-type-${contentType}`],\n        styles[`split-panel-position-${splitPanelPosition ?? 'bottom'}`],\n        {\n          [styles['disable-body-scroll']]: disableBodyScroll,\n          [testutilStyles['disable-body-scroll-root']]: disableBodyScroll,\n          [styles['disable-content-paddings']]: disableContentPaddings,\n          [styles['has-breadcrumbs']]: breadcrumbs && !isMobile,\n          [styles['has-content-gap-left']]: hasContentGapLeft,\n          [styles['has-content-gap-right']]: hasContentGapRight,\n          [styles['has-header']]: contentHeader,\n          [styles['has-max-content-width']]: maxContentWidth && maxContentWidth > 0,\n          [styles['has-split-panel']]: splitPanelDisplayed,\n          [styles['is-overlap-disabled']]: isBackgroundOverlapDisabled,\n          [styles['is-hide-mobile-toolbar']]: __embeddedViewMode,\n          [styles['has-left-toggles-gutter']]: !(isMobile || navigationHide || navigationOpen),\n          [styles['has-right-toggles-gutter']]: !isMobile && !hasContentGapRight,\n        },\n        testutilStyles.root\n      )}\n      ref={layoutElement}\n      style={{\n        [customCssProps.headerHeight]: `${headerHeight}px`,\n        [customCssProps.footerHeight]: `${footerHeight}px`,\n        [customCssProps.layoutWidth]: `${layoutWidth}px`,\n        [customCssProps.mainOffsetLeft]: `${mainOffsetLeft}px`,\n        ...(maxContentWidth && { [customCssProps.maxContentWidth]: `${maxContentWidth}px` }),\n        ...(minContentWidth && { [customCssProps.minContentWidth]: `${minContentWidth}px` }),\n        [customCssProps.notificationsHeight]: `${notificationsHeight}px`,\n      }}\n    >\n      {children}\n    </main>\n  );\n}\n\n/*\nThe Notifications, Breadcrumbs, Header, and Main are all rendered in the center\ncolumn of the grid layout. Any of these could be the first child to render in the\ncontent area if the previous siblings do not exist. The grid gap before the first\nchild will be different to ensure vertical alignment with the trigger buttons.\n*/\nfunction getContentFirstChild(\n  breadcrumbs: React.ReactNode,\n  contentHeader: React.ReactNode,\n  hasNotificationsContent: boolean,\n  isMobile: boolean\n) {\n  let contentFirstChild = 'main';\n\n  if (hasNotificationsContent) {\n    contentFirstChild = 'notifications';\n  } else if (breadcrumbs && !isMobile) {\n    contentFirstChild = 'breadcrumbs';\n  } else if (contentHeader) {\n    contentFirstChild = 'header';\n  }\n\n  return contentFirstChild;\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/main.tsx"],"names":[],"mappings":";AAWA,MAAM,CAAC,OAAO,UAAU,IAAI,gBA4D3B"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/main.tsx"],"names":[],"mappings":";AAWA,MAAM,CAAC,OAAO,UAAU,IAAI,gBAuD3B"}

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

@@ -9,7 +9,7 @@ import styles from './styles.css.js';
 import testutilStyles from '../test-classes/styles.css.js';
 import * as tokens from '../../internal/generated/styles/tokens';
 export default function Main() {
-    const { content, disableBodyScroll, disableContentPaddings, footerHeight, hasDrawerViewportOverlay, navigationOpen, placement, hasBackgroundOverlap, isMobile, isSplitPanelOpen, isToolsOpen, mainElement, notificationsHeight, stickyNotifications, offsetBottom, splitPanelDisplayed, splitPanelPosition, activeDrawerId, hasStickyBackground, } = useAppLayoutInternals();
+    const { content, disableBodyScroll, disableContentPaddings, footerHeight, hasDrawerViewportOverlay, navigationOpen, placement, isMobile, isSplitPanelOpen, isToolsOpen, mainElement, notificationsHeight, stickyNotifications, offsetBottom, splitPanelDisplayed, splitPanelPosition, activeDrawerId, } = useAppLayoutInternals();
     const splitPanelHeight = offsetBottom - footerHeight;
     return (React.createElement("div", { className: clsx(styles.container, styles[`split-panel-position-${splitPanelPosition !== null && splitPanelPosition !== void 0 ? splitPanelPosition : 'bottom'}`], {
             [styles['disable-content-paddings']]: disableContentPaddings,
@@ -19,8 +19,6 @@ export default function Main() {
             [styles['has-active-drawer']]: !!activeDrawerId,
             [styles['is-split-panel-open']]: isSplitPanelOpen,
             [styles.unfocusable]: hasDrawerViewportOverlay,
-        }, testutilStyles.content), ref: mainElement, style: Object.assign({ [customCssProps.splitPanelHeight]: `${splitPanelHeight}px` }, getStickyOffsetVars(placement.insetBlockStart, offsetBottom, stickyNotifications && notificationsHeight > 0
-            ? `${tokens.spaceXs} + ${notificationsHeight}px + ${!hasBackgroundOverlap ? tokens.spaceXxxs : '0px'}`
-            : '0px', `var(${customCssProps.mobileBarHeight})`, !!disableBodyScroll, isMobile, hasBackgroundOverlap && hasStickyBackground && !isMobile ? tokens.spaceScaledS : '0px')) }, content));
+        }, testutilStyles.content), ref: mainElement, style: Object.assign({ [customCssProps.splitPanelHeight]: `${splitPanelHeight}px` }, getStickyOffsetVars(placement.insetBlockStart, offsetBottom, stickyNotifications && notificationsHeight > 0 ? `${tokens.spaceXs} + ${notificationsHeight}px` : '0px', `var(${customCssProps.mobileBarHeight})`, !!disableBodyScroll, isMobile)) }, content));
 }
 //# sourceMappingURL=main.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"main.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/main.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,cAAc,MAAM,gDAAgD,CAAC;AAC5E,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAC3D,OAAO,KAAK,MAAM,MAAM,wCAAwC,CAAC;AAEjE,MAAM,CAAC,OAAO,UAAU,IAAI;IAC1B,MAAM,EACJ,OAAO,EACP,iBAAiB,EACjB,sBAAsB,EACtB,YAAY,EACZ,wBAAwB,EACxB,cAAc,EACd,SAAS,EACT,oBAAoB,EACpB,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,WAAW,EACX,mBAAmB,EACnB,mBAAmB,EACnB,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,EACd,mBAAmB,GACpB,GAAG,qBAAqB,EAAE,CAAC;IAE5B,MAAM,gBAAgB,GAAG,YAAY,GAAG,YAAY,CAAC;IAErD,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,SAAS,EAChB,MAAM,CAAC,wBAAwB,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,QAAQ,EAAE,CAAC,EAChE;YACE,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,EAAE,sBAAsB;YAC5D,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,mBAAmB;YAChD,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,cAAc;YAC9C,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,WAAW;YACtC,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,cAAc;YAC/C,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,gBAAgB;YACjD,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,wBAAwB;SAC/C,EACD,cAAc,CAAC,OAAO,CACvB,EACD,GAAG,EAAE,WAAW,EAChB,KAAK,kBACH,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,GAAG,gBAAgB,IAAI,IACvD,mBAAmB,CACpB,SAAS,CAAC,eAAe,EACzB,YAAY,EACZ,mBAAmB,IAAI,mBAAmB,GAAG,CAAC;YAC5C,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,MAAM,mBAAmB,QAAQ,CAAC,oBAAoB,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAAE;YACtG,CAAC,CAAC,KAAK,EACT,OAAO,cAAc,CAAC,eAAe,GAAG,EACxC,CAAC,CAAC,iBAAiB,EACnB,QAAQ,EACR,oBAAoB,IAAI,mBAAmB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CACvF,KAGF,OAAO,CACJ,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 customCssProps from '../../internal/generated/custom-css-properties';\nimport { getStickyOffsetVars } from '../utils/sticky-offsets';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport * as tokens from '../../internal/generated/styles/tokens';\n\nexport default function Main() {\n  const {\n    content,\n    disableBodyScroll,\n    disableContentPaddings,\n    footerHeight,\n    hasDrawerViewportOverlay,\n    navigationOpen,\n    placement,\n    hasBackgroundOverlap,\n    isMobile,\n    isSplitPanelOpen,\n    isToolsOpen,\n    mainElement,\n    notificationsHeight,\n    stickyNotifications,\n    offsetBottom,\n    splitPanelDisplayed,\n    splitPanelPosition,\n    activeDrawerId,\n    hasStickyBackground,\n  } = useAppLayoutInternals();\n\n  const splitPanelHeight = offsetBottom - footerHeight;\n\n  return (\n    <div\n      className={clsx(\n        styles.container,\n        styles[`split-panel-position-${splitPanelPosition ?? 'bottom'}`],\n        {\n          [styles['disable-content-paddings']]: disableContentPaddings,\n          [styles['has-split-panel']]: splitPanelDisplayed,\n          [styles['is-navigation-open']]: navigationOpen,\n          [styles['is-tools-open']]: isToolsOpen,\n          [styles['has-active-drawer']]: !!activeDrawerId,\n          [styles['is-split-panel-open']]: isSplitPanelOpen,\n          [styles.unfocusable]: hasDrawerViewportOverlay,\n        },\n        testutilStyles.content\n      )}\n      ref={mainElement}\n      style={{\n        [customCssProps.splitPanelHeight]: `${splitPanelHeight}px`,\n        ...getStickyOffsetVars(\n          placement.insetBlockStart,\n          offsetBottom,\n          stickyNotifications && notificationsHeight > 0\n            ? `${tokens.spaceXs} + ${notificationsHeight}px + ${!hasBackgroundOverlap ? tokens.spaceXxxs : '0px'}`\n            : '0px',\n          `var(${customCssProps.mobileBarHeight})`,\n          !!disableBodyScroll,\n          isMobile,\n          hasBackgroundOverlap && hasStickyBackground && !isMobile ? tokens.spaceScaledS : '0px'\n        ),\n      }}\n    >\n      {content}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/main.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,cAAc,MAAM,gDAAgD,CAAC;AAC5E,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAC3D,OAAO,KAAK,MAAM,MAAM,wCAAwC,CAAC;AAEjE,MAAM,CAAC,OAAO,UAAU,IAAI;IAC1B,MAAM,EACJ,OAAO,EACP,iBAAiB,EACjB,sBAAsB,EACtB,YAAY,EACZ,wBAAwB,EACxB,cAAc,EACd,SAAS,EACT,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,WAAW,EACX,mBAAmB,EACnB,mBAAmB,EACnB,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,GACf,GAAG,qBAAqB,EAAE,CAAC;IAE5B,MAAM,gBAAgB,GAAG,YAAY,GAAG,YAAY,CAAC;IAErD,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,SAAS,EAChB,MAAM,CAAC,wBAAwB,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,QAAQ,EAAE,CAAC,EAChE;YACE,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,EAAE,sBAAsB;YAC5D,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,mBAAmB;YAChD,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,cAAc;YAC9C,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,WAAW;YACtC,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,cAAc;YAC/C,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,gBAAgB;YACjD,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,wBAAwB;SAC/C,EACD,cAAc,CAAC,OAAO,CACvB,EACD,GAAG,EAAE,WAAW,EAChB,KAAK,kBACH,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,GAAG,gBAAgB,IAAI,IACvD,mBAAmB,CACpB,SAAS,CAAC,eAAe,EACzB,YAAY,EACZ,mBAAmB,IAAI,mBAAmB,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,MAAM,mBAAmB,IAAI,CAAC,CAAC,CAAC,KAAK,EACvG,OAAO,cAAc,CAAC,eAAe,GAAG,EACxC,CAAC,CAAC,iBAAiB,EACnB,QAAQ,CACT,KAGF,OAAO,CACJ,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 customCssProps from '../../internal/generated/custom-css-properties';\nimport { getStickyOffsetVars } from '../utils/sticky-offsets';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport * as tokens from '../../internal/generated/styles/tokens';\n\nexport default function Main() {\n  const {\n    content,\n    disableBodyScroll,\n    disableContentPaddings,\n    footerHeight,\n    hasDrawerViewportOverlay,\n    navigationOpen,\n    placement,\n    isMobile,\n    isSplitPanelOpen,\n    isToolsOpen,\n    mainElement,\n    notificationsHeight,\n    stickyNotifications,\n    offsetBottom,\n    splitPanelDisplayed,\n    splitPanelPosition,\n    activeDrawerId,\n  } = useAppLayoutInternals();\n\n  const splitPanelHeight = offsetBottom - footerHeight;\n\n  return (\n    <div\n      className={clsx(\n        styles.container,\n        styles[`split-panel-position-${splitPanelPosition ?? 'bottom'}`],\n        {\n          [styles['disable-content-paddings']]: disableContentPaddings,\n          [styles['has-split-panel']]: splitPanelDisplayed,\n          [styles['is-navigation-open']]: navigationOpen,\n          [styles['is-tools-open']]: isToolsOpen,\n          [styles['has-active-drawer']]: !!activeDrawerId,\n          [styles['is-split-panel-open']]: isSplitPanelOpen,\n          [styles.unfocusable]: hasDrawerViewportOverlay,\n        },\n        testutilStyles.content\n      )}\n      ref={mainElement}\n      style={{\n        [customCssProps.splitPanelHeight]: `${splitPanelHeight}px`,\n        ...getStickyOffsetVars(\n          placement.insetBlockStart,\n          offsetBottom,\n          stickyNotifications && notificationsHeight > 0 ? `${tokens.spaceXs} + ${notificationsHeight}px` : '0px',\n          `var(${customCssProps.mobileBarHeight})`,\n          !!disableBodyScroll,\n          isMobile\n        ),\n      }}\n    >\n      {content}\n    </div>\n  );\n}\n"]}

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

@@ -48,8 +48,8 @@ export default function Navigation() {
                 }, testutilStyles.navigation), ref: state !== 'exiting' ? transitionEventsRef : undefined, "aria-hidden": !navigationOpen, onClick: event => {
                     onNavigationClick && onNavigationClick(event);
                 } },
-                React.createElement("div", { className: clsx(styles['animated-content']) },
-                    React.createElement("div", { className: clsx(styles['hide-navigation']) },
+                React.createElement("div", { className: styles['animated-content'] },
+                    React.createElement("div", { className: styles['hide-navigation'] },
                         React.createElement(InternalButton, { ariaLabel: (_c = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationClose) !== null && _c !== void 0 ? _c : undefined, iconName: isMobile ? 'close' : 'angle-left', onClick: () => handleNavigationClick(false), variant: "icon", formAction: "none", className: testutilStyles['navigation-close'], ref: navigationRefs.close })),
                     navigation))));
     }));

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

@@ -1 +1 @@
-{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/navigation.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 { useAppLayoutInternals } from './context';\nimport { InternalButton } from '../../button/internal';\nimport TriggerButton from './trigger-button';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { Transition } from '../../internal/components/transition';\nimport { findUpUntil } from '../../internal/utils/dom';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\n/**\n * The Navigation component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the show navigation form that contains the trigger for the drawer in large viewports;\n * the navigation, or drawer, that contains the hide navigation form and the children\n * passed through the API;\n */\nexport default function Navigation() {\n  const {\n    ariaLabels,\n    disableBodyScroll,\n    handleNavigationClick,\n    hasDrawerViewportOverlay,\n    isMobile,\n    navigationOpen,\n    isToolsOpen,\n    navigation,\n    navigationHide,\n    navigationRefs,\n    navigationWidth,\n    toolsHide,\n    headerVariant,\n  } = useAppLayoutInternals();\n\n  if (navigationHide) {\n    return null;\n  }\n\n  // Close the Navigation drawer on mobile when a user clicks a link inside.\n  const onNavigationClick = (event: React.MouseEvent) => {\n    const hasLink = findUpUntil(\n      event.target as HTMLElement,\n      node => node.tagName === 'A' && !!(node as HTMLAnchorElement).href\n    );\n    if (hasLink && isMobile) {\n      handleNavigationClick(false);\n    }\n  };\n\n  const isUnfocusable = hasDrawerViewportOverlay && (!navigationOpen || (isToolsOpen && !toolsHide));\n\n  return (\n    <Transition in={navigationOpen}>\n      {(state, transitionEventsRef) => (\n        <div\n          className={clsx(styles['navigation-container'], {\n            [styles['disable-body-scroll']]: disableBodyScroll,\n            [styles.unfocusable]: isUnfocusable,\n            [testutilStyles['drawer-closed']]: !navigationOpen,\n          })}\n          style={{ [customCssProps.navigationWidth]: `${navigationWidth}px` }}\n        >\n          {!isMobile && (\n            <nav\n              aria-hidden={isMobile || navigationOpen}\n              aria-label={ariaLabels?.navigation ?? undefined}\n              className={clsx(styles['show-navigation'], {\n                [styles.animating]: state === 'exiting',\n                [styles['is-navigation-open']]: navigationOpen,\n              })}\n              ref={state === 'exiting' ? transitionEventsRef : undefined}\n            >\n              <TriggerButton\n                ariaLabel={ariaLabels?.navigationToggle}\n                ariaExpanded={navigationOpen ? undefined : false}\n                iconName=\"menu\"\n                className={testutilStyles['navigation-toggle']}\n                onClick={() => handleNavigationClick(true)}\n                ref={navigationRefs.toggle}\n                highContrastHeader={headerVariant === 'high-contrast'}\n              />\n            </nav>\n          )}\n\n          <nav\n            aria-label={ariaLabels?.navigation ?? undefined}\n            className={clsx(\n              styles.navigation,\n              {\n                [styles.animating]: state === 'entering',\n                [styles['is-navigation-open']]: navigationOpen,\n              },\n              testutilStyles.navigation\n            )}\n            ref={state !== 'exiting' ? transitionEventsRef : undefined}\n            aria-hidden={!navigationOpen}\n            onClick={event => {\n              onNavigationClick && onNavigationClick(event);\n            }}\n          >\n            <div className={clsx(styles['animated-content'])}>\n              <div className={clsx(styles['hide-navigation'])}>\n                <InternalButton\n                  ariaLabel={ariaLabels?.navigationClose ?? undefined}\n                  iconName={isMobile ? 'close' : 'angle-left'}\n                  onClick={() => handleNavigationClick(false)}\n                  variant=\"icon\"\n                  formAction=\"none\"\n                  className={testutilStyles['navigation-close']}\n                  ref={navigationRefs.close}\n                />\n              </div>\n              {navigation}\n            </div>\n          </nav>\n        </div>\n      )}\n    </Transition>\n  );\n}\n"]}
+{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/navigation.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 { useAppLayoutInternals } from './context';\nimport { InternalButton } from '../../button/internal';\nimport TriggerButton from './trigger-button';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { Transition } from '../../internal/components/transition';\nimport { findUpUntil } from '../../internal/utils/dom';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\n/**\n * The Navigation component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the show navigation form that contains the trigger for the drawer in large viewports;\n * the navigation, or drawer, that contains the hide navigation form and the children\n * passed through the API;\n */\nexport default function Navigation() {\n  const {\n    ariaLabels,\n    disableBodyScroll,\n    handleNavigationClick,\n    hasDrawerViewportOverlay,\n    isMobile,\n    navigationOpen,\n    isToolsOpen,\n    navigation,\n    navigationHide,\n    navigationRefs,\n    navigationWidth,\n    toolsHide,\n    headerVariant,\n  } = useAppLayoutInternals();\n\n  if (navigationHide) {\n    return null;\n  }\n\n  // Close the Navigation drawer on mobile when a user clicks a link inside.\n  const onNavigationClick = (event: React.MouseEvent) => {\n    const hasLink = findUpUntil(\n      event.target as HTMLElement,\n      node => node.tagName === 'A' && !!(node as HTMLAnchorElement).href\n    );\n    if (hasLink && isMobile) {\n      handleNavigationClick(false);\n    }\n  };\n\n  const isUnfocusable = hasDrawerViewportOverlay && (!navigationOpen || (isToolsOpen && !toolsHide));\n\n  return (\n    <Transition in={navigationOpen}>\n      {(state, transitionEventsRef) => (\n        <div\n          className={clsx(styles['navigation-container'], {\n            [styles['disable-body-scroll']]: disableBodyScroll,\n            [styles.unfocusable]: isUnfocusable,\n            [testutilStyles['drawer-closed']]: !navigationOpen,\n          })}\n          style={{ [customCssProps.navigationWidth]: `${navigationWidth}px` }}\n        >\n          {!isMobile && (\n            <nav\n              aria-hidden={isMobile || navigationOpen}\n              aria-label={ariaLabels?.navigation ?? undefined}\n              className={clsx(styles['show-navigation'], {\n                [styles.animating]: state === 'exiting',\n                [styles['is-navigation-open']]: navigationOpen,\n              })}\n              ref={state === 'exiting' ? transitionEventsRef : undefined}\n            >\n              <TriggerButton\n                ariaLabel={ariaLabels?.navigationToggle}\n                ariaExpanded={navigationOpen ? undefined : false}\n                iconName=\"menu\"\n                className={testutilStyles['navigation-toggle']}\n                onClick={() => handleNavigationClick(true)}\n                ref={navigationRefs.toggle}\n                highContrastHeader={headerVariant === 'high-contrast'}\n              />\n            </nav>\n          )}\n\n          <nav\n            aria-label={ariaLabels?.navigation ?? undefined}\n            className={clsx(\n              styles.navigation,\n              {\n                [styles.animating]: state === 'entering',\n                [styles['is-navigation-open']]: navigationOpen,\n              },\n              testutilStyles.navigation\n            )}\n            ref={state !== 'exiting' ? transitionEventsRef : undefined}\n            aria-hidden={!navigationOpen}\n            onClick={event => {\n              onNavigationClick && onNavigationClick(event);\n            }}\n          >\n            <div className={styles['animated-content']}>\n              <div className={styles['hide-navigation']}>\n                <InternalButton\n                  ariaLabel={ariaLabels?.navigationClose ?? undefined}\n                  iconName={isMobile ? 'close' : 'angle-left'}\n                  onClick={() => handleNavigationClick(false)}\n                  variant=\"icon\"\n                  formAction=\"none\"\n                  className={testutilStyles['navigation-close']}\n                  ref={navigationRefs.close}\n                />\n              </div>\n              {navigation}\n            </div>\n          </nav>\n        </div>\n      )}\n    </Transition>\n  );\n}\n"]}

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

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

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

@@ -8,7 +8,7 @@ import styles from './styles.css.js';
 import testutilStyles from '../test-classes/styles.css.js';
 export default function Notifications() {
     var _a;
-    const { ariaLabels, hasDrawerViewportOverlay, notifications, notificationsElement, stickyNotifications, headerVariant, } = useAppLayoutInternals();
+    const { ariaLabels, hasDrawerViewportOverlay, notifications, notificationsElement, stickyNotifications, headerVariant, hasNotificationsContent, } = useAppLayoutInternals();
     if (!notifications) {
         return null;
     }
@@ -18,8 +18,10 @@ 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['has-notification-content']]: hasNotificationsContent,
             [styles.unfocusable]: hasDrawerViewportOverlay,
             [highContrastHeaderClassName]: headerVariant === 'high-contrast',
+            [styles['high-contrast']]: headerVariant === 'high-contrast',
         }, testutilStyles.notifications) },
         React.createElement("div", { ref: notificationsElement }, notifications)));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"notifications.js","sourceRoot":"","sources":["../../../../src/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,2BAA2B,EAAE,MAAM,2CAA2C,CAAC;AACxF,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,EACJ,UAAU,EACV,wBAAwB,EACxB,aAAa,EACb,oBAAoB,EACpB,mBAAmB,EACnB,aAAa,GACd,GAAG,qBAAqB,EAAE,CAAC;IAE5B,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;YAC9C,CAAC,2BAA2B,CAAC,EAAE,aAAa,KAAK,eAAe;SACjE,EACD,cAAc,CAAC,aAAa,CAC7B;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 { highContrastHeaderClassName } 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 {\n    ariaLabels,\n    hasDrawerViewportOverlay,\n    notifications,\n    notificationsElement,\n    stickyNotifications,\n    headerVariant,\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          [highContrastHeaderClassName]: headerVariant === 'high-contrast',\n        },\n        testutilStyles.notifications\n      )}\n    >\n      <div ref={notificationsElement}>{notifications}</div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"notifications.js","sourceRoot":"","sources":["../../../../src/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,2BAA2B,EAAE,MAAM,2CAA2C,CAAC;AACxF,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,EACJ,UAAU,EACV,wBAAwB,EACxB,aAAa,EACb,oBAAoB,EACpB,mBAAmB,EACnB,aAAa,EACb,uBAAuB,GACxB,GAAG,qBAAqB,EAAE,CAAC;IAE5B,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,0BAA0B,CAAC,CAAC,EAAE,uBAAuB;YAC7D,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,wBAAwB;YAC9C,CAAC,2BAA2B,CAAC,EAAE,aAAa,KAAK,eAAe;YAChE,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,aAAa,KAAK,eAAe;SAC7D,EACD,cAAc,CAAC,aAAa,CAC7B;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 { highContrastHeaderClassName } 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 {\n    ariaLabels,\n    hasDrawerViewportOverlay,\n    notifications,\n    notificationsElement,\n    stickyNotifications,\n    headerVariant,\n    hasNotificationsContent,\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['has-notification-content']]: hasNotificationsContent,\n          [styles.unfocusable]: hasDrawerViewportOverlay,\n          [highContrastHeaderClassName]: headerVariant === 'high-contrast',\n          [styles['high-contrast']]: headerVariant === 'high-contrast',\n        },\n        testutilStyles.notifications\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,88 +1,87 @@
 
     import './styles.scoped.css';
     export default {
-  "background": "awsui_background_hyvsj_1kr2z_99",
-  "scrolling-background": "awsui_scrolling-background_hyvsj_1kr2z_102",
-  "sticky-background": "awsui_sticky-background_hyvsj_1kr2z_108",
-  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_1kr2z_116",
-  "breadcrumbs": "awsui_breadcrumbs_hyvsj_1kr2z_129",
-  "has-sticky-background": "awsui_has-sticky-background_hyvsj_1kr2z_139",
-  "drawers-container": "awsui_drawers-container_hyvsj_1kr2z_151",
-  "has-open-drawer": "awsui_has-open-drawer_hyvsj_1kr2z_162",
-  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_1kr2z_185",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_1kr2z_190",
-  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_1kr2z_231",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_1kr2z_241",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_1kr2z_245",
-  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_1kr2z_259",
-  "drawers-trigger": "awsui_drawers-trigger_hyvsj_1kr2z_245",
-  "drawer": "awsui_drawer_hyvsj_1kr2z_151",
-  "drawer-content-container": "awsui_drawer-content-container_hyvsj_1kr2z_290",
-  "drawer-close-button": "awsui_drawer-close-button_hyvsj_1kr2z_299",
-  "drawer-content": "awsui_drawer-content_hyvsj_1kr2z_290",
-  "drawer-content-hidden": "awsui_drawer-content-hidden_hyvsj_1kr2z_307",
-  "drawer-slider": "awsui_drawer-slider_hyvsj_1kr2z_310",
-  "is-drawer-open": "awsui_is-drawer-open_hyvsj_1kr2z_317",
-  "content": "awsui_content_hyvsj_1kr2z_343",
-  "layout": "awsui_layout_hyvsj_1kr2z_364",
-  "has-max-content-width": "awsui_has-max-content-width_hyvsj_1kr2z_437",
-  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_1kr2z_452",
-  "content-type-table": "awsui_content-type-table_hyvsj_1kr2z_466",
-  "content-type-cards": "awsui_content-type-cards_hyvsj_1kr2z_466",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_1kr2z_472",
-  "is-hide-mobile-toolbar": "awsui_is-hide-mobile-toolbar_hyvsj_1kr2z_475",
-  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_1kr2z_489",
-  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_1kr2z_492",
-  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_1kr2z_502",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_1kr2z_505",
-  "content-first-child-header": "awsui_content-first-child-header_hyvsj_1kr2z_508",
-  "has-header": "awsui_has-header_hyvsj_1kr2z_508",
-  "content-first-child-main": "awsui_content-first-child-main_hyvsj_1kr2z_523",
-  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_1kr2z_523",
-  "has-left-toggles-gutter": "awsui_has-left-toggles-gutter_hyvsj_1kr2z_546",
-  "has-right-toggles-gutter": "awsui_has-right-toggles-gutter_hyvsj_1kr2z_549",
-  "has-split-panel": "awsui_has-split-panel_hyvsj_1kr2z_569",
-  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_1kr2z_569",
-  "block-body-scroll": "awsui_block-body-scroll_hyvsj_1kr2z_577",
-  "unfocusable": "awsui_unfocusable_hyvsj_1kr2z_582",
-  "container": "awsui_container_hyvsj_1kr2z_592",
-  "is-navigation-open": "awsui_is-navigation-open_hyvsj_1kr2z_618",
-  "is-tools-open": "awsui_is-tools-open_hyvsj_1kr2z_621",
-  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_1kr2z_621",
-  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_1kr2z_621",
-  "has-active-drawer": "awsui_has-active-drawer_hyvsj_1kr2z_621",
-  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_1kr2z_630",
-  "remove-high-contrast-header": "awsui_remove-high-contrast-header_hyvsj_1kr2z_647",
-  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_1kr2z_651",
-  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_1kr2z_655",
-  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_1kr2z_659",
-  "navigation-container": "awsui_navigation-container_hyvsj_1kr2z_668",
-  "show-navigation": "awsui_show-navigation_hyvsj_1kr2z_706",
-  "animating": "awsui_animating_hyvsj_1kr2z_729",
-  "showButtons": "awsui_showButtons_hyvsj_1kr2z_1",
-  "navigation": "awsui_navigation_hyvsj_1kr2z_668",
-  "openNavigation": "awsui_openNavigation_hyvsj_1kr2z_1",
-  "animated-content": "awsui_animated-content_hyvsj_1kr2z_791",
-  "hide-navigation": "awsui_hide-navigation_hyvsj_1kr2z_800",
-  "notifications": "awsui_notifications_hyvsj_1kr2z_810",
-  "sticky-notifications": "awsui_sticky-notifications_hyvsj_1kr2z_816",
-  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_1kr2z_833",
-  "position-bottom": "awsui_position-bottom_hyvsj_1kr2z_880",
-  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_1kr2z_1",
-  "split-panel-side": "awsui_split-panel-side_hyvsj_1kr2z_909",
-  "position-side": "awsui_position-side_hyvsj_1kr2z_922",
-  "tools-container": "awsui_tools-container_hyvsj_1kr2z_944",
-  "tools": "awsui_tools_hyvsj_1kr2z_944",
-  "openTools": "awsui_openTools_hyvsj_1kr2z_1",
-  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_1kr2z_1035",
-  "hide-tools": "awsui_hide-tools_hyvsj_1kr2z_1045",
-  "show-tools": "awsui_show-tools_hyvsj_1kr2z_1057",
-  "has-tools-form": "awsui_has-tools-form_hyvsj_1kr2z_1035",
-  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_1kr2z_1142",
-  "trigger": "awsui_trigger_hyvsj_1kr2z_1142",
-  "selected": "awsui_selected_hyvsj_1kr2z_1219",
-  "badge": "awsui_badge_hyvsj_1kr2z_1239",
-  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_1kr2z_1243",
-  "dot": "awsui_dot_hyvsj_1kr2z_1254"
+  "background": "awsui_background_hyvsj_ithvb_97",
+  "scrolling-background": "awsui_scrolling-background_hyvsj_ithvb_100",
+  "breadcrumbs": "awsui_breadcrumbs_hyvsj_ithvb_111",
+  "drawers-container": "awsui_drawers-container_hyvsj_ithvb_124",
+  "has-open-drawer": "awsui_has-open-drawer_hyvsj_ithvb_135",
+  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_ithvb_156",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_ithvb_161",
+  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_ithvb_202",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_ithvb_212",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_ithvb_216",
+  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_ithvb_230",
+  "drawers-trigger": "awsui_drawers-trigger_hyvsj_ithvb_216",
+  "drawer": "awsui_drawer_hyvsj_ithvb_124",
+  "drawer-content-container": "awsui_drawer-content-container_hyvsj_ithvb_261",
+  "drawer-close-button": "awsui_drawer-close-button_hyvsj_ithvb_270",
+  "drawer-content": "awsui_drawer-content_hyvsj_ithvb_261",
+  "drawer-content-hidden": "awsui_drawer-content-hidden_hyvsj_ithvb_278",
+  "drawer-slider": "awsui_drawer-slider_hyvsj_ithvb_281",
+  "is-drawer-open": "awsui_is-drawer-open_hyvsj_ithvb_288",
+  "content": "awsui_content_hyvsj_ithvb_314",
+  "layout": "awsui_layout_hyvsj_ithvb_335",
+  "has-max-content-width": "awsui_has-max-content-width_hyvsj_ithvb_408",
+  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_ithvb_423",
+  "content-type-table": "awsui_content-type-table_hyvsj_ithvb_437",
+  "content-type-cards": "awsui_content-type-cards_hyvsj_ithvb_437",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_ithvb_443",
+  "is-hide-mobile-toolbar": "awsui_is-hide-mobile-toolbar_hyvsj_ithvb_446",
+  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_ithvb_460",
+  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_ithvb_463",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_ithvb_473",
+  "content-first-child-header": "awsui_content-first-child-header_hyvsj_ithvb_476",
+  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_ithvb_476",
+  "has-header": "awsui_has-header_hyvsj_ithvb_476",
+  "content-first-child-main": "awsui_content-first-child-main_hyvsj_ithvb_491",
+  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_ithvb_491",
+  "has-left-toggles-gutter": "awsui_has-left-toggles-gutter_hyvsj_ithvb_511",
+  "has-right-toggles-gutter": "awsui_has-right-toggles-gutter_hyvsj_ithvb_514",
+  "has-split-panel": "awsui_has-split-panel_hyvsj_ithvb_534",
+  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_ithvb_534",
+  "block-body-scroll": "awsui_block-body-scroll_hyvsj_ithvb_542",
+  "unfocusable": "awsui_unfocusable_hyvsj_ithvb_547",
+  "container": "awsui_container_hyvsj_ithvb_557",
+  "is-navigation-open": "awsui_is-navigation-open_hyvsj_ithvb_583",
+  "is-tools-open": "awsui_is-tools-open_hyvsj_ithvb_586",
+  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_ithvb_586",
+  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_ithvb_586",
+  "has-active-drawer": "awsui_has-active-drawer_hyvsj_ithvb_586",
+  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_ithvb_595",
+  "remove-high-contrast-header": "awsui_remove-high-contrast-header_hyvsj_ithvb_612",
+  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_ithvb_616",
+  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_ithvb_620",
+  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_ithvb_624",
+  "navigation-container": "awsui_navigation-container_hyvsj_ithvb_633",
+  "show-navigation": "awsui_show-navigation_hyvsj_ithvb_671",
+  "animating": "awsui_animating_hyvsj_ithvb_694",
+  "showButtons": "awsui_showButtons_hyvsj_ithvb_1",
+  "navigation": "awsui_navigation_hyvsj_ithvb_633",
+  "openNavigation": "awsui_openNavigation_hyvsj_ithvb_1",
+  "animated-content": "awsui_animated-content_hyvsj_ithvb_756",
+  "hide-navigation": "awsui_hide-navigation_hyvsj_ithvb_765",
+  "notifications": "awsui_notifications_hyvsj_ithvb_775",
+  "has-notification-content": "awsui_has-notification-content_hyvsj_ithvb_780",
+  "sticky-notifications": "awsui_sticky-notifications_hyvsj_ithvb_784",
+  "high-contrast": "awsui_high-contrast_hyvsj_ithvb_789",
+  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_ithvb_807",
+  "position-bottom": "awsui_position-bottom_hyvsj_ithvb_854",
+  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_ithvb_1",
+  "split-panel-side": "awsui_split-panel-side_hyvsj_ithvb_883",
+  "position-side": "awsui_position-side_hyvsj_ithvb_896",
+  "tools-container": "awsui_tools-container_hyvsj_ithvb_918",
+  "tools": "awsui_tools_hyvsj_ithvb_918",
+  "openTools": "awsui_openTools_hyvsj_ithvb_1",
+  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_ithvb_1007",
+  "hide-tools": "awsui_hide-tools_hyvsj_ithvb_1017",
+  "show-tools": "awsui_show-tools_hyvsj_ithvb_1029",
+  "has-tools-form": "awsui_has-tools-form_hyvsj_ithvb_1007",
+  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_ithvb_1114",
+  "trigger": "awsui_trigger_hyvsj_ithvb_1114",
+  "selected": "awsui_selected_hyvsj_ithvb_1192",
+  "badge": "awsui_badge_hyvsj_ithvb_1212",
+  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_ithvb_1216",
+  "dot": "awsui_dot_hyvsj_ithvb_1227"
 };