@cloudscape-design/components 3.0.638 → 3.0.640

package/content-layout/internal.js

@@ -1,26 +1,56 @@
 import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useRef } from 'react';
 import clsx from 'clsx';
 import { getBaseProps } from '../internal/base-component';
-import { getContentHeaderClassName } from '../internal/utils/content-header-utils';
+import { highContrastHeaderClassName } from '../internal/utils/content-header-utils';
 import { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';
+import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
+import customCssProps from '../internal/generated/custom-css-properties';
 import styles from './styles.css.js';
+import testutilStyles from './test-classes/styles.css.js';
+import InternalGrid from '../grid/internal';
+const halfGeckoMaxCssLength = ((1 << 30) - 1) / 120;
+// CSS lengths in Gecko are limited to at most (1<<30)-1 app units (Gecko uses 60 as app unit).
+// Limit the maxContentWidth to the half of the upper boundary (≈4230^2) to be on the safe side.
 export default function InternalContentLayout(_a) {
-    var { children, disableOverlap, header, __internalRootRef } = _a, rest = __rest(_a, ["children", "disableOverlap", "header", "__internalRootRef"]);
+    var { children, disableOverlap, header, headerVariant = 'default', headerBackgroundStyle, __internalRootRef, maxContentWidth = Number.MAX_VALUE, breadcrumbs, notifications, defaultPadding, secondaryHeader } = _a, rest = __rest(_a, ["children", "disableOverlap", "header", "headerVariant", "headerBackgroundStyle", "__internalRootRef", "maxContentWidth", "breadcrumbs", "notifications", "defaultPadding", "secondaryHeader"]);
+    const mainRef = useRef(null);
+    const mergedRef = useMergeRefs(mainRef, __internalRootRef);
     const baseProps = getBaseProps(rest);
     const isVisualRefresh = useVisualRefresh();
+    const mode = useCurrentMode(mainRef);
     const overlapElement = useDynamicOverlap();
     const isOverlapDisabled = !children || disableOverlap;
+    const contentHeaderClassName = headerVariant === 'high-contrast' && isVisualRefresh ? highContrastHeaderClassName : '';
     return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.layout, {
             [styles['is-overlap-disabled']]: isOverlapDisabled,
             [styles['is-visual-refresh']]: isVisualRefresh,
             [styles['has-header']]: !!header,
-        }), ref: __internalRootRef }),
-        React.createElement("div", { className: clsx(styles.background, { [styles['is-overlap-disabled']]: isOverlapDisabled }, getContentHeaderClassName()), ref: overlapElement }),
-        header && React.createElement("div", { className: clsx(styles.header, getContentHeaderClassName()) }, header),
-        React.createElement("div", { className: styles.content }, children)));
+            [styles['default-padding']]: !!defaultPadding,
+            [styles['has-notifications']]: !!notifications,
+        }), style: {
+            [customCssProps.contentLayoutMaxContentWidth]: maxContentWidth < Number.MAX_VALUE ? `${maxContentWidth}px` : `${halfGeckoMaxCssLength}px`,
+        }, ref: mergedRef }),
+        React.createElement("div", { className: clsx(styles.background, { [styles['has-default-background']]: !headerBackgroundStyle }, contentHeaderClassName), ref: overlapElement }, headerBackgroundStyle && (React.createElement("div", { className: clsx(styles['header-background']), style: {
+                background: typeof headerBackgroundStyle === 'function' ? headerBackgroundStyle(mode) : headerBackgroundStyle,
+            } }))),
+        notifications && (React.createElement("div", { className: clsx(styles.notifications, testutilStyles.notifications, contentHeaderClassName) }, notifications)),
+        breadcrumbs && (React.createElement("div", { className: clsx(styles.breadcrumbs, testutilStyles.breadcrumbs, contentHeaderClassName) }, breadcrumbs)),
+        header && !secondaryHeader && (React.createElement("div", { className: clsx(styles['header-wrapper'], testutilStyles.header, contentHeaderClassName, {
+                [styles['with-divider']]: headerVariant === 'divider',
+            }) }, header)),
+        header && secondaryHeader && (React.createElement("div", { className: clsx(styles['header-wrapper'], {
+                [styles['with-divider']]: headerVariant === 'divider',
+            }) },
+            React.createElement(InternalGrid, { gridDefinition: [{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }] },
+                React.createElement("div", { className: clsx(testutilStyles.header, contentHeaderClassName) }, header),
+                React.createElement("div", { className: clsx(testutilStyles['secondary-header']) }, secondaryHeader)))),
+        React.createElement("div", { className: clsx(styles.content, {
+                [styles['with-divider']]: headerVariant === 'divider',
+            }) }, children)));
 }
 //# sourceMappingURL=internal.js.map

package/content-layout/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/content-layout/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,wCAAwC,CAAC;AAEnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAMjB;QANiB,EAC5C,QAAQ,EACR,cAAc,EACd,MAAM,EACN,iBAAiB,OAEU,EADxB,IAAI,cALqC,6DAM7C,CADQ;IAEP,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAErC,MAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAC3C,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAE3C,MAAM,iBAAiB,GAAG,CAAC,QAAQ,IAAI,cAAc,CAAC;IAEtD,OAAO,CACL,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE;YAClD,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,iBAAiB;YAClD,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE,eAAe;YAC9C,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM;SACjC,CAAC,EACF,GAAG,EAAE,iBAAiB;QAEtB,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,EACjB,EAAE,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,iBAAiB,EAAE,EACtD,yBAAyB,EAAE,CAC5B,EACD,GAAG,EAAE,cAAc,GACnB;QAED,MAAM,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,yBAAyB,EAAE,CAAC,IAAG,MAAM,CAAO;QAE3F,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO,CAC5C,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 { ContentLayoutProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { getContentHeaderClassName } from '../internal/utils/content-header-utils';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\n\ntype InternalContentLayoutProps = ContentLayoutProps & InternalBaseComponentProps;\n\nexport default function InternalContentLayout({\n  children,\n  disableOverlap,\n  header,\n  __internalRootRef,\n  ...rest\n}: InternalContentLayoutProps) {\n  const baseProps = getBaseProps(rest);\n\n  const isVisualRefresh = useVisualRefresh();\n  const overlapElement = useDynamicOverlap();\n\n  const isOverlapDisabled = !children || disableOverlap;\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.layout, {\n        [styles['is-overlap-disabled']]: isOverlapDisabled,\n        [styles['is-visual-refresh']]: isVisualRefresh,\n        [styles['has-header']]: !!header,\n      })}\n      ref={__internalRootRef}\n    >\n      <div\n        className={clsx(\n          styles.background,\n          { [styles['is-overlap-disabled']]: isOverlapDisabled },\n          getContentHeaderClassName()\n        )}\n        ref={overlapElement}\n      />\n\n      {header && <div className={clsx(styles.header, getContentHeaderClassName())}>{header}</div>}\n\n      <div className={styles.content}>{children}</div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/content-layout/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { ContentLayoutProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { highContrastHeaderClassName } from '../internal/utils/content-header-utils';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';\nimport { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport styles from './styles.css.js';\nimport testutilStyles from './test-classes/styles.css.js';\nimport InternalGrid from '../grid/internal';\n\ntype InternalContentLayoutProps = ContentLayoutProps & InternalBaseComponentProps;\n\nconst halfGeckoMaxCssLength = ((1 << 30) - 1) / 120;\n// CSS lengths in Gecko are limited to at most (1<<30)-1 app units (Gecko uses 60 as app unit).\n// Limit the maxContentWidth to the half of the upper boundary (≈4230^2) to be on the safe side.\n\nexport default function InternalContentLayout({\n  children,\n  disableOverlap,\n  header,\n  headerVariant = 'default',\n  headerBackgroundStyle,\n  __internalRootRef,\n  maxContentWidth = Number.MAX_VALUE,\n  breadcrumbs,\n  notifications,\n  defaultPadding,\n  secondaryHeader,\n  ...rest\n}: InternalContentLayoutProps) {\n  const mainRef = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs(mainRef, __internalRootRef);\n\n  const baseProps = getBaseProps(rest);\n\n  const isVisualRefresh = useVisualRefresh();\n  const mode = useCurrentMode(mainRef);\n\n  const overlapElement = useDynamicOverlap();\n\n  const isOverlapDisabled = !children || disableOverlap;\n\n  const contentHeaderClassName =\n    headerVariant === 'high-contrast' && isVisualRefresh ? highContrastHeaderClassName : '';\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.layout, {\n        [styles['is-overlap-disabled']]: isOverlapDisabled,\n        [styles['is-visual-refresh']]: isVisualRefresh,\n        [styles['has-header']]: !!header,\n        [styles['default-padding']]: !!defaultPadding,\n        [styles['has-notifications']]: !!notifications,\n      })}\n      style={{\n        [customCssProps.contentLayoutMaxContentWidth]:\n          maxContentWidth < Number.MAX_VALUE ? `${maxContentWidth}px` : `${halfGeckoMaxCssLength}px`,\n      }}\n      ref={mergedRef}\n    >\n      <div\n        className={clsx(\n          styles.background,\n          { [styles['has-default-background']]: !headerBackgroundStyle },\n          contentHeaderClassName\n        )}\n        ref={overlapElement}\n      >\n        {headerBackgroundStyle && (\n          <div\n            className={clsx(styles['header-background'])}\n            style={{\n              background:\n                typeof headerBackgroundStyle === 'function' ? headerBackgroundStyle(mode) : headerBackgroundStyle,\n            }}\n          />\n        )}\n      </div>\n      {notifications && (\n        <div className={clsx(styles.notifications, testutilStyles.notifications, contentHeaderClassName)}>\n          {notifications}\n        </div>\n      )}\n      {breadcrumbs && (\n        <div className={clsx(styles.breadcrumbs, testutilStyles.breadcrumbs, contentHeaderClassName)}>\n          {breadcrumbs}\n        </div>\n      )}\n      {header && !secondaryHeader && (\n        <div\n          className={clsx(styles['header-wrapper'], testutilStyles.header, contentHeaderClassName, {\n            [styles['with-divider']]: headerVariant === 'divider',\n          })}\n        >\n          {header}\n        </div>\n      )}\n      {header && secondaryHeader && (\n        <div\n          className={clsx(styles['header-wrapper'], {\n            [styles['with-divider']]: headerVariant === 'divider',\n          })}\n        >\n          <InternalGrid gridDefinition={[{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }]}>\n            <div className={clsx(testutilStyles.header, contentHeaderClassName)}>{header}</div>\n            <div className={clsx(testutilStyles['secondary-header'])}>{secondaryHeader}</div>\n          </InternalGrid>\n        </div>\n      )}\n\n      <div\n        className={clsx(styles.content, {\n          [styles['with-divider']]: headerVariant === 'divider',\n        })}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n"]}

package/content-layout/styles.css.js

@@ -1,12 +1,19 @@
 
     import './styles.scoped.css';
     export default {
-  "layout": "awsui_layout_5gtk3_set91_105",
-  "is-visual-refresh": "awsui_is-visual-refresh_5gtk3_set91_105",
-  "background": "awsui_background_5gtk3_set91_108",
-  "header": "awsui_header_5gtk3_set91_111",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_5gtk3_set91_127",
-  "content": "awsui_content_5gtk3_set91_135",
-  "has-header": "awsui_has-header_5gtk3_set91_139"
+  "layout": "awsui_layout_5gtk3_183jp_99",
+  "background": "awsui_background_5gtk3_183jp_113",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_5gtk3_183jp_118",
+  "header-background": "awsui_header-background_5gtk3_183jp_121",
+  "notifications": "awsui_notifications_5gtk3_183jp_125",
+  "breadcrumbs": "awsui_breadcrumbs_5gtk3_183jp_130",
+  "default-padding": "awsui_default-padding_5gtk3_183jp_135",
+  "header-wrapper": "awsui_header-wrapper_5gtk3_183jp_139",
+  "with-divider": "awsui_with-divider_5gtk3_183jp_144",
+  "content": "awsui_content_5gtk3_183jp_147",
+  "has-header": "awsui_has-header_5gtk3_183jp_151",
+  "is-visual-refresh": "awsui_is-visual-refresh_5gtk3_183jp_158",
+  "has-default-background": "awsui_has-default-background_5gtk3_183jp_158",
+  "has-notifications": "awsui_has-notifications_5gtk3_183jp_162"
 };
   

package/content-layout/styles.scoped.css

@@ -96,52 +96,72 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-/*
-Pass through the header and child content if not rendering in 
-visual refresh mode. The padding is still added to the header 
-in this scenario because otherwise the header and child 
-nodes will directly touch with no gap between them.
-*/
-.awsui_layout_5gtk3_set91_105:not(#\9):not(.awsui_is-visual-refresh_5gtk3_set91_105) {
-  display: contents;
-}
-.awsui_layout_5gtk3_set91_105:not(#\9):not(.awsui_is-visual-refresh_5gtk3_set91_105) > .awsui_background_5gtk3_set91_108 {
-  display: none;
-}
-.awsui_layout_5gtk3_set91_105:not(#\9):not(.awsui_is-visual-refresh_5gtk3_set91_105) > .awsui_header_5gtk3_set91_111 {
-  padding-block-end: var(--space-content-header-padding-bottom-y2enua, 16px);
-}
-
-.awsui_layout_5gtk3_set91_105.awsui_is-visual-refresh_5gtk3_set91_105:not(#\9) {
+.awsui_layout_5gtk3_183jp_99:not(#\9) {
+  --awsui-content-layout-default-horizontal-padding-7t5ed6: var(--space-layout-content-horizontal-7l52k3, 24px);
+  --awsui-content-layout-max-content-width-7t5ed6: 0px;
+  --awsui-content-layout-main-gap-7t5ed6: 0px;
   display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  grid-template-rows: auto var(--space-dark-header-overlap-distance-lxpp0s, 36px) 1fr;
+  grid-template-columns: 0 0 1fr minmax(0, var(--awsui-content-layout-max-content-width-7t5ed6)) 1fr 0 0;
+  grid-template-rows: var(--awsui-content-layout-main-gap-7t5ed6) min-content min-content auto var(--space-dark-header-overlap-distance-lxpp0s, 36px) 1fr;
   min-block-size: 100%;
 }
-.awsui_layout_5gtk3_set91_105.awsui_is-visual-refresh_5gtk3_set91_105 > .awsui_background_5gtk3_set91_108:not(#\9) {
-  background-color: var(--color-background-layout-main-nx09lr, #ffffff);
-  grid-column: 1;
-  grid-row: 1/3;
+@media (max-width: 688px) {
+  .awsui_layout_5gtk3_183jp_99:not(#\9) {
+    --awsui-content-layout-default-horizontal-padding-7t5ed6: var(--space-l-t419sm, 20px);
+  }
+}
+.awsui_layout_5gtk3_183jp_99 > .awsui_background_5gtk3_183jp_113:not(#\9) {
+  grid-column: 1/8;
+  grid-row: 1/6;
   color: var(--color-text-body-default-at06ol, #000716);
 }
-.awsui_layout_5gtk3_set91_105.awsui_is-visual-refresh_5gtk3_set91_105 > .awsui_background_5gtk3_set91_108.awsui_is-overlap-disabled_5gtk3_set91_127:not(#\9) {
-  grid-row: 1/2;
+.awsui_layout_5gtk3_183jp_99 > .awsui_background_5gtk3_183jp_113.awsui_is-overlap-disabled_5gtk3_183jp_118:not(#\9) {
+  grid-row: 1/5;
+}
+.awsui_layout_5gtk3_183jp_99 > .awsui_background_5gtk3_183jp_113 > .awsui_header-background_5gtk3_183jp_121:not(#\9) {
+  inline-size: 100%;
+  block-size: 100%;
 }
-.awsui_layout_5gtk3_set91_105.awsui_is-visual-refresh_5gtk3_set91_105 > .awsui_header_5gtk3_set91_111:not(#\9) {
-  grid-column: 1;
-  grid-row: 1;
+.awsui_layout_5gtk3_183jp_99 > .awsui_notifications_5gtk3_183jp_125:not(#\9) {
+  grid-column: 4;
+  grid-row: 2;
+  padding-block-end: var(--space-xs-zb16t3, 8px);
+}
+.awsui_layout_5gtk3_183jp_99 > .awsui_breadcrumbs_5gtk3_183jp_130:not(#\9) {
+  grid-column: 4;
+  grid-row: 3;
+  padding-block-end: var(--space-xs-zb16t3, 8px);
+}
+.awsui_layout_5gtk3_183jp_99.awsui_default-padding_5gtk3_183jp_135:not(#\9) {
+  --awsui-content-layout-main-gap-7t5ed6: var(--space-scaled-m-mo5yse, 16px);
+  grid-template-columns: var(--awsui-toggles-left-width-7t5ed6, 0) var(--awsui-content-layout-default-horizontal-padding-7t5ed6, 0) 1fr minmax(0, var(--awsui-content-layout-max-content-width-7t5ed6)) 1fr var(--awsui-content-layout-default-horizontal-padding-7t5ed6, 0) var(--awsui-toggles-right-width-7t5ed6, 0);
+}
+.awsui_layout_5gtk3_183jp_99 > .awsui_header-wrapper_5gtk3_183jp_139:not(#\9) {
+  grid-column: 4;
+  grid-row: 4;
   padding-block-end: var(--space-content-header-padding-bottom-y2enua, 16px);
 }
-.awsui_layout_5gtk3_set91_105.awsui_is-visual-refresh_5gtk3_set91_105 > .awsui_content_5gtk3_set91_135:not(#\9) {
-  grid-column: 1;
-  grid-row: 2/4;
+.awsui_layout_5gtk3_183jp_99 > .awsui_header-wrapper_5gtk3_183jp_139.awsui_with-divider_5gtk3_183jp_144:not(#\9) {
+  border-block-end: 1px solid var(--color-border-divider-default-j74lyz, #b6bec9);
+}
+.awsui_layout_5gtk3_183jp_99 > .awsui_content_5gtk3_183jp_147:not(#\9) {
+  grid-column: 4;
+  grid-row: 5/8;
+}
+.awsui_layout_5gtk3_183jp_99:not(#\9):not(.awsui_has-header_5gtk3_183jp_151) {
+  grid-template-rows: var(--awsui-content-layout-main-gap-7t5ed6) min-content min-content 0 calc(var(--space-dark-header-overlap-distance-lxpp0s, 36px)) 1fr;
 }
-.awsui_layout_5gtk3_set91_105.awsui_is-visual-refresh_5gtk3_set91_105:not(#\9):not(.awsui_has-header_5gtk3_set91_139) {
-  grid-template-rows: auto calc(var(--space-dark-header-overlap-distance-lxpp0s, 36px) + var(--space-xs-zb16t3, 8px) + var(--space-scaled-xxs-7597g1, 4px)) 1fr;
+.awsui_layout_5gtk3_183jp_99.awsui_is-overlap-disabled_5gtk3_183jp_118:not(#\9) {
+  grid-template-rows: var(--awsui-content-layout-main-gap-7t5ed6) min-content min-content auto 0 1fr;
 }
-.awsui_layout_5gtk3_set91_105.awsui_is-visual-refresh_5gtk3_set91_105:not(#\9):not(.awsui_has-header_5gtk3_set91_139) > .awsui_content_5gtk3_set91_135 {
-  padding-block-start: calc(var(--space-xs-zb16t3, 8px) + var(--space-scaled-xxs-7597g1, 4px));
+
+.awsui_layout_5gtk3_183jp_99.awsui_is-visual-refresh_5gtk3_183jp_158 > .awsui_background_5gtk3_183jp_113.awsui_has-default-background_5gtk3_183jp_158:not(#\9) {
+  background-color: var(--color-background-layout-main-nx09lr, #ffffff);
+}
+
+.awsui_layout_5gtk3_183jp_99:not(#\9):not(.awsui_is-visual-refresh_5gtk3_183jp_158).awsui_has-notifications_5gtk3_183jp_162 {
+  --awsui-content-layout-main-gap-7t5ed6: 0px;
 }
-.awsui_layout_5gtk3_set91_105.awsui_is-visual-refresh_5gtk3_set91_105.awsui_is-overlap-disabled_5gtk3_set91_127:not(#\9) {
-  grid-template-rows: auto 0 1fr;
+.awsui_layout_5gtk3_183jp_99:not(#\9):not(.awsui_is-visual-refresh_5gtk3_183jp_158) > .awsui_notifications_5gtk3_183jp_125 {
+  grid-column: 1/8;
 }

package/content-layout/styles.selectors.js

@@ -2,12 +2,19 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "layout": "awsui_layout_5gtk3_set91_105",
-  "is-visual-refresh": "awsui_is-visual-refresh_5gtk3_set91_105",
-  "background": "awsui_background_5gtk3_set91_108",
-  "header": "awsui_header_5gtk3_set91_111",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_5gtk3_set91_127",
-  "content": "awsui_content_5gtk3_set91_135",
-  "has-header": "awsui_has-header_5gtk3_set91_139"
+  "layout": "awsui_layout_5gtk3_183jp_99",
+  "background": "awsui_background_5gtk3_183jp_113",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_5gtk3_183jp_118",
+  "header-background": "awsui_header-background_5gtk3_183jp_121",
+  "notifications": "awsui_notifications_5gtk3_183jp_125",
+  "breadcrumbs": "awsui_breadcrumbs_5gtk3_183jp_130",
+  "default-padding": "awsui_default-padding_5gtk3_183jp_135",
+  "header-wrapper": "awsui_header-wrapper_5gtk3_183jp_139",
+  "with-divider": "awsui_with-divider_5gtk3_183jp_144",
+  "content": "awsui_content_5gtk3_183jp_147",
+  "has-header": "awsui_has-header_5gtk3_183jp_151",
+  "is-visual-refresh": "awsui_is-visual-refresh_5gtk3_183jp_158",
+  "has-default-background": "awsui_has-default-background_5gtk3_183jp_158",
+  "has-notifications": "awsui_has-notifications_5gtk3_183jp_162"
 };
   

package/content-layout/test-classes/styles.css.js

@@ -0,0 +1,9 @@
+
+    import './styles.scoped.css';
+    export default {
+  "header": "awsui_header_64tge_1scxg_5",
+  "secondary-header": "awsui_secondary-header_64tge_1scxg_9",
+  "notifications": "awsui_notifications_64tge_1scxg_13",
+  "breadcrumbs": "awsui_breadcrumbs_64tge_1scxg_17"
+};
+  

package/content-layout/test-classes/styles.scoped.css

@@ -0,0 +1,19 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_header_64tge_1scxg_5:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_secondary-header_64tge_1scxg_9:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_notifications_64tge_1scxg_13:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_breadcrumbs_64tge_1scxg_17:not(#\9) {
+  /* used in test-utils */
+}

package/content-layout/test-classes/styles.selectors.js

@@ -0,0 +1,10 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "header": "awsui_header_64tge_1scxg_5",
+  "secondary-header": "awsui_secondary-header_64tge_1scxg_9",
+  "notifications": "awsui_notifications_64tge_1scxg_13",
+  "breadcrumbs": "awsui_breadcrumbs_64tge_1scxg_17"
+};
+  

package/flashbar/styles.css.js

@@ -1,52 +1,52 @@
 
     import './styles.scoped.css';
     export default {
-  "flash-with-motion": "awsui_flash-with-motion_1q84n_kwvxa_99",
-  "enter": "awsui_enter_1q84n_kwvxa_99",
-  "flash-body": "awsui_flash-body_1q84n_kwvxa_113",
-  "flash-message": "awsui_flash-message_1q84n_kwvxa_113",
-  "flash-header": "awsui_flash-header_1q84n_kwvxa_113",
-  "flash-content": "awsui_flash-content_1q84n_kwvxa_114",
-  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_kwvxa_115",
-  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_kwvxa_116",
-  "flash-icon": "awsui_flash-icon_1q84n_kwvxa_139",
-  "entering": "awsui_entering_1q84n_kwvxa_152",
-  "entered": "awsui_entered_1q84n_kwvxa_173",
-  "exiting": "awsui_exiting_1q84n_kwvxa_278",
-  "stack": "awsui_stack_1q84n_kwvxa_300",
-  "animation-running": "awsui_animation-running_1q84n_kwvxa_300",
-  "item": "awsui_item_1q84n_kwvxa_300",
-  "flash-list-item": "awsui_flash-list-item_1q84n_kwvxa_301",
-  "notification-bar": "awsui_notification-bar_1q84n_kwvxa_302",
-  "collapsed": "awsui_collapsed_1q84n_kwvxa_322",
-  "animation-ready": "awsui_animation-ready_1q84n_kwvxa_322",
-  "expanded-only": "awsui_expanded-only_1q84n_kwvxa_322",
-  "expanded": "awsui_expanded_1q84n_kwvxa_322",
-  "flash": "awsui_flash_1q84n_kwvxa_99",
-  "collapsible": "awsui_collapsible_1q84n_kwvxa_386",
-  "short-list": "awsui_short-list_1q84n_kwvxa_392",
-  "visual-refresh": "awsui_visual-refresh_1q84n_kwvxa_392",
-  "status": "awsui_status_1q84n_kwvxa_605",
-  "header": "awsui_header_1q84n_kwvxa_605",
-  "item-count": "awsui_item-count_1q84n_kwvxa_606",
-  "button": "awsui_button_1q84n_kwvxa_607",
-  "type-count": "awsui_type-count_1q84n_kwvxa_640",
-  "count-number": "awsui_count-number_1q84n_kwvxa_640",
-  "icon": "awsui_icon_1q84n_kwvxa_674",
-  "floating": "awsui_floating_1q84n_kwvxa_715",
-  "flashbar": "awsui_flashbar_1q84n_kwvxa_723",
-  "flash-refresh": "awsui_flash-refresh_1q84n_kwvxa_798",
-  "flash-list": "awsui_flash-list_1q84n_kwvxa_301",
-  "flash-focus-container": "awsui_flash-focus-container_1q84n_kwvxa_819",
-  "flash-text": "awsui_flash-text_1q84n_kwvxa_849",
-  "dismiss-button": "awsui_dismiss-button_1q84n_kwvxa_116",
-  "breakpoint-default": "awsui_breakpoint-default_1q84n_kwvxa_891",
-  "action-button": "awsui_action-button_1q84n_kwvxa_115",
-  "action-slot": "awsui_action-slot_1q84n_kwvxa_901",
-  "flash-type-success": "awsui_flash-type-success_1q84n_kwvxa_905",
-  "flash-type-error": "awsui_flash-type-error_1q84n_kwvxa_909",
-  "flash-type-info": "awsui_flash-type-info_1q84n_kwvxa_913",
-  "flash-type-in-progress": "awsui_flash-type-in-progress_1q84n_kwvxa_914",
-  "flash-type-warning": "awsui_flash-type-warning_1q84n_kwvxa_918"
+  "flash-with-motion": "awsui_flash-with-motion_1q84n_pqayr_99",
+  "enter": "awsui_enter_1q84n_pqayr_99",
+  "flash-body": "awsui_flash-body_1q84n_pqayr_113",
+  "flash-message": "awsui_flash-message_1q84n_pqayr_113",
+  "flash-header": "awsui_flash-header_1q84n_pqayr_113",
+  "flash-content": "awsui_flash-content_1q84n_pqayr_114",
+  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_pqayr_115",
+  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_pqayr_116",
+  "flash-icon": "awsui_flash-icon_1q84n_pqayr_139",
+  "entering": "awsui_entering_1q84n_pqayr_152",
+  "entered": "awsui_entered_1q84n_pqayr_173",
+  "exiting": "awsui_exiting_1q84n_pqayr_278",
+  "stack": "awsui_stack_1q84n_pqayr_300",
+  "animation-running": "awsui_animation-running_1q84n_pqayr_300",
+  "item": "awsui_item_1q84n_pqayr_300",
+  "flash-list-item": "awsui_flash-list-item_1q84n_pqayr_301",
+  "notification-bar": "awsui_notification-bar_1q84n_pqayr_302",
+  "collapsed": "awsui_collapsed_1q84n_pqayr_322",
+  "animation-ready": "awsui_animation-ready_1q84n_pqayr_322",
+  "expanded-only": "awsui_expanded-only_1q84n_pqayr_322",
+  "expanded": "awsui_expanded_1q84n_pqayr_322",
+  "flash": "awsui_flash_1q84n_pqayr_99",
+  "collapsible": "awsui_collapsible_1q84n_pqayr_386",
+  "short-list": "awsui_short-list_1q84n_pqayr_392",
+  "visual-refresh": "awsui_visual-refresh_1q84n_pqayr_392",
+  "status": "awsui_status_1q84n_pqayr_605",
+  "header": "awsui_header_1q84n_pqayr_605",
+  "item-count": "awsui_item-count_1q84n_pqayr_606",
+  "button": "awsui_button_1q84n_pqayr_607",
+  "type-count": "awsui_type-count_1q84n_pqayr_640",
+  "count-number": "awsui_count-number_1q84n_pqayr_640",
+  "icon": "awsui_icon_1q84n_pqayr_674",
+  "floating": "awsui_floating_1q84n_pqayr_715",
+  "flashbar": "awsui_flashbar_1q84n_pqayr_723",
+  "flash-refresh": "awsui_flash-refresh_1q84n_pqayr_798",
+  "flash-list": "awsui_flash-list_1q84n_pqayr_301",
+  "flash-focus-container": "awsui_flash-focus-container_1q84n_pqayr_819",
+  "flash-text": "awsui_flash-text_1q84n_pqayr_849",
+  "dismiss-button": "awsui_dismiss-button_1q84n_pqayr_116",
+  "breakpoint-default": "awsui_breakpoint-default_1q84n_pqayr_891",
+  "action-button": "awsui_action-button_1q84n_pqayr_115",
+  "action-slot": "awsui_action-slot_1q84n_pqayr_901",
+  "flash-type-success": "awsui_flash-type-success_1q84n_pqayr_905",
+  "flash-type-error": "awsui_flash-type-error_1q84n_pqayr_909",
+  "flash-type-info": "awsui_flash-type-info_1q84n_pqayr_913",
+  "flash-type-in-progress": "awsui_flash-type-in-progress_1q84n_pqayr_914",
+  "flash-type-warning": "awsui_flash-type-warning_1q84n_pqayr_918"
 };