@cloudscape-design/components 3.0.303 → 3.0.304

package/app-layout/visual-refresh/styles.selectors.js

@@ -2,73 +2,73 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "background": "awsui_background_hyvsj_dt7gs_93",
-  "scrolling-background": "awsui_scrolling-background_hyvsj_dt7gs_96",
-  "sticky-background": "awsui_sticky-background_hyvsj_dt7gs_102",
-  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_dt7gs_110",
-  "breadcrumbs": "awsui_breadcrumbs_hyvsj_dt7gs_123",
-  "has-sticky-background": "awsui_has-sticky-background_hyvsj_dt7gs_133",
-  "drawers-container": "awsui_drawers-container_hyvsj_dt7gs_145",
-  "has-open-drawer": "awsui_has-open-drawer_hyvsj_dt7gs_157",
-  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_dt7gs_191",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_dt7gs_196",
-  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_dt7gs_214",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_dt7gs_246",
-  "drawers-trigger": "awsui_drawers-trigger_hyvsj_dt7gs_246",
-  "drawer": "awsui_drawer_hyvsj_dt7gs_145",
-  "drawer-close-button": "awsui_drawer-close-button_hyvsj_dt7gs_297",
-  "drawer-content": "awsui_drawer-content_hyvsj_dt7gs_302",
-  "is-drawer-open": "awsui_is-drawer-open_hyvsj_dt7gs_307",
-  "content": "awsui_content_hyvsj_dt7gs_341",
-  "layout": "awsui_layout_hyvsj_dt7gs_362",
-  "has-max-content-width": "awsui_has-max-content-width_hyvsj_dt7gs_443",
-  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_dt7gs_458",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_dt7gs_475",
-  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_dt7gs_507",
-  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_dt7gs_510",
-  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_dt7gs_520",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_dt7gs_523",
-  "content-first-child-header": "awsui_content-first-child-header_hyvsj_dt7gs_526",
-  "has-header": "awsui_has-header_hyvsj_dt7gs_526",
-  "content-first-child-main": "awsui_content-first-child-main_hyvsj_dt7gs_544",
-  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_dt7gs_544",
-  "has-split-panel": "awsui_has-split-panel_hyvsj_dt7gs_581",
-  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_dt7gs_581",
-  "block-body-scroll": "awsui_block-body-scroll_hyvsj_dt7gs_597",
-  "unfocusable": "awsui_unfocusable_hyvsj_dt7gs_602",
-  "container": "awsui_container_hyvsj_dt7gs_612",
-  "is-navigation-open": "awsui_is-navigation-open_hyvsj_dt7gs_637",
-  "is-tools-open": "awsui_is-tools-open_hyvsj_dt7gs_640",
-  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_dt7gs_640",
-  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_dt7gs_640",
-  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_dt7gs_649",
-  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_dt7gs_665",
-  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_dt7gs_669",
-  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_dt7gs_673",
-  "navigation-container": "awsui_navigation-container_hyvsj_dt7gs_682",
-  "show-navigation": "awsui_show-navigation_hyvsj_dt7gs_726",
-  "animating": "awsui_animating_hyvsj_dt7gs_748",
-  "showButtons": "awsui_showButtons_hyvsj_dt7gs_1",
-  "navigation": "awsui_navigation_hyvsj_dt7gs_682",
-  "openNavigation": "awsui_openNavigation_hyvsj_dt7gs_1",
-  "animated-content": "awsui_animated-content_hyvsj_dt7gs_809",
-  "hide-navigation": "awsui_hide-navigation_hyvsj_dt7gs_818",
-  "notifications": "awsui_notifications_hyvsj_dt7gs_828",
-  "sticky-notifications": "awsui_sticky-notifications_hyvsj_dt7gs_834",
-  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_dt7gs_851",
-  "position-bottom": "awsui_position-bottom_hyvsj_dt7gs_897",
-  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_dt7gs_1",
-  "split-panel-side": "awsui_split-panel-side_hyvsj_dt7gs_926",
-  "position-side": "awsui_position-side_hyvsj_dt7gs_954",
-  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_dt7gs_1",
-  "tools-container": "awsui_tools-container_hyvsj_dt7gs_991",
-  "tools": "awsui_tools_hyvsj_dt7gs_991",
-  "openTools": "awsui_openTools_hyvsj_dt7gs_1",
-  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_dt7gs_1085",
-  "hide-tools": "awsui_hide-tools_hyvsj_dt7gs_1095",
-  "show-tools": "awsui_show-tools_hyvsj_dt7gs_1107",
-  "has-tools-form": "awsui_has-tools-form_hyvsj_dt7gs_1085",
-  "trigger": "awsui_trigger_hyvsj_dt7gs_1174",
-  "selected": "awsui_selected_hyvsj_dt7gs_1213"
+  "background": "awsui_background_hyvsj_kjwsu_93",
+  "scrolling-background": "awsui_scrolling-background_hyvsj_kjwsu_96",
+  "sticky-background": "awsui_sticky-background_hyvsj_kjwsu_102",
+  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_kjwsu_110",
+  "breadcrumbs": "awsui_breadcrumbs_hyvsj_kjwsu_123",
+  "has-sticky-background": "awsui_has-sticky-background_hyvsj_kjwsu_133",
+  "drawers-container": "awsui_drawers-container_hyvsj_kjwsu_145",
+  "has-open-drawer": "awsui_has-open-drawer_hyvsj_kjwsu_157",
+  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_kjwsu_191",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_kjwsu_196",
+  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_kjwsu_214",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_kjwsu_246",
+  "drawers-trigger": "awsui_drawers-trigger_hyvsj_kjwsu_246",
+  "drawer": "awsui_drawer_hyvsj_kjwsu_145",
+  "drawer-close-button": "awsui_drawer-close-button_hyvsj_kjwsu_297",
+  "drawer-content": "awsui_drawer-content_hyvsj_kjwsu_302",
+  "is-drawer-open": "awsui_is-drawer-open_hyvsj_kjwsu_307",
+  "content": "awsui_content_hyvsj_kjwsu_341",
+  "layout": "awsui_layout_hyvsj_kjwsu_362",
+  "has-max-content-width": "awsui_has-max-content-width_hyvsj_kjwsu_445",
+  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_kjwsu_460",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_kjwsu_477",
+  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_kjwsu_509",
+  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_kjwsu_512",
+  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_kjwsu_522",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_kjwsu_525",
+  "content-first-child-header": "awsui_content-first-child-header_hyvsj_kjwsu_528",
+  "has-header": "awsui_has-header_hyvsj_kjwsu_528",
+  "content-first-child-main": "awsui_content-first-child-main_hyvsj_kjwsu_549",
+  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_kjwsu_549",
+  "has-split-panel": "awsui_has-split-panel_hyvsj_kjwsu_592",
+  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_kjwsu_592",
+  "block-body-scroll": "awsui_block-body-scroll_hyvsj_kjwsu_608",
+  "unfocusable": "awsui_unfocusable_hyvsj_kjwsu_613",
+  "container": "awsui_container_hyvsj_kjwsu_623",
+  "is-navigation-open": "awsui_is-navigation-open_hyvsj_kjwsu_648",
+  "is-tools-open": "awsui_is-tools-open_hyvsj_kjwsu_651",
+  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_kjwsu_651",
+  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_kjwsu_651",
+  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_kjwsu_660",
+  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_kjwsu_676",
+  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_kjwsu_680",
+  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_kjwsu_684",
+  "navigation-container": "awsui_navigation-container_hyvsj_kjwsu_693",
+  "show-navigation": "awsui_show-navigation_hyvsj_kjwsu_737",
+  "animating": "awsui_animating_hyvsj_kjwsu_759",
+  "showButtons": "awsui_showButtons_hyvsj_kjwsu_1",
+  "navigation": "awsui_navigation_hyvsj_kjwsu_693",
+  "openNavigation": "awsui_openNavigation_hyvsj_kjwsu_1",
+  "animated-content": "awsui_animated-content_hyvsj_kjwsu_820",
+  "hide-navigation": "awsui_hide-navigation_hyvsj_kjwsu_829",
+  "notifications": "awsui_notifications_hyvsj_kjwsu_839",
+  "sticky-notifications": "awsui_sticky-notifications_hyvsj_kjwsu_845",
+  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_kjwsu_862",
+  "position-bottom": "awsui_position-bottom_hyvsj_kjwsu_908",
+  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_kjwsu_1",
+  "split-panel-side": "awsui_split-panel-side_hyvsj_kjwsu_937",
+  "position-side": "awsui_position-side_hyvsj_kjwsu_965",
+  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_kjwsu_1",
+  "tools-container": "awsui_tools-container_hyvsj_kjwsu_1002",
+  "tools": "awsui_tools_hyvsj_kjwsu_1002",
+  "openTools": "awsui_openTools_hyvsj_kjwsu_1",
+  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_kjwsu_1096",
+  "hide-tools": "awsui_hide-tools_hyvsj_kjwsu_1106",
+  "show-tools": "awsui_show-tools_hyvsj_kjwsu_1118",
+  "has-tools-form": "awsui_has-tools-form_hyvsj_kjwsu_1096",
+  "trigger": "awsui_trigger_hyvsj_kjwsu_1185",
+  "selected": "awsui_selected_hyvsj_kjwsu_1224"
 };
   

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

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["content-layout/internal.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAMlF,KAAK,0BAA0B,GAAG,kBAAkB,GAAG,0BAA0B,CAAC;AAElF,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,QAAQ,EACR,cAAc,EACd,MAAM,EACN,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,0BAA0B,eAsC5B"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["content-layout/internal.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAMlF,KAAK,0BAA0B,GAAG,kBAAkB,GAAG,0BAA0B,CAAC;AAElF,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,QAAQ,EACR,cAAc,EACd,MAAM,EACN,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,0BAA0B,eAkC5B"}

package/content-layout/internal.js

@@ -15,15 +15,11 @@ export default function InternalContentLayout(_a) {
     const mergedRef = useMergeRefs(rootElement, __internalRootRef);
     const isVisualRefresh = useVisualRefresh();
     const overlapElement = useDynamicOverlap();
-    /**
-     * Disable the overlap if the component is missing either a header or child
-     * content. If the component is not using visual refresh then the overlap
-     * will not be displayed at all. This is handled in the CSS not the JavaScript.
-     */
-    const isOverlapDisabled = !children || !header || disableOverlap;
+    const isOverlapDisabled = !children || disableOverlap;
     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: mergedRef }),
         React.createElement("div", { className: clsx(styles.background, { [styles['is-overlap-disabled']]: isOverlapDisabled }, 'awsui-context-content-header'), ref: overlapElement }),
         header && React.createElement("div", { className: clsx(styles.header, 'awsui-context-content-header') }, header),

package/content-layout/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["content-layout/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,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;IACrC,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,YAAY,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC;IAE/D,MAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAC3C,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAE3C;;;;OAIG;IACH,MAAM,iBAAiB,GAAG,CAAC,QAAQ,IAAI,CAAC,MAAM,IAAI,cAAc,CAAC;IAEjE,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;SAC/C,CAAC,EACF,GAAG,EAAE,SAAS;QAEd,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,EACjB,EAAE,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,iBAAiB,EAAE,EACtD,8BAA8B,CAC/B,EACD,GAAG,EAAE,cAAc,GACnB;QAED,MAAM,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,8BAA8B,CAAC,IAAG,MAAM,CAAO;QAE9F,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, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { ContentLayoutProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\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  const rootElement = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs(rootElement, __internalRootRef);\n\n  const isVisualRefresh = useVisualRefresh();\n  const overlapElement = useDynamicOverlap();\n\n  /**\n   * Disable the overlap if the component is missing either a header or child\n   * content. If the component is not using visual refresh then the overlap\n   * will not be displayed at all. This is handled in the CSS not the JavaScript.\n   */\n  const isOverlapDisabled = !children || !header || 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      })}\n      ref={mergedRef}\n    >\n      <div\n        className={clsx(\n          styles.background,\n          { [styles['is-overlap-disabled']]: isOverlapDisabled },\n          'awsui-context-content-header'\n        )}\n        ref={overlapElement}\n      />\n\n      {header && <div className={clsx(styles.header, 'awsui-context-content-header')}>{header}</div>}\n\n      <div className={styles.content}>{children}</div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["content-layout/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,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;IACrC,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,YAAY,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC;IAE/D,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,SAAS;QAEd,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,EACjB,EAAE,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,iBAAiB,EAAE,EACtD,8BAA8B,CAC/B,EACD,GAAG,EAAE,cAAc,GACnB;QAED,MAAM,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,8BAA8B,CAAC,IAAG,MAAM,CAAO;QAE9F,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, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { ContentLayoutProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\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  const rootElement = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs(rootElement, __internalRootRef);\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={mergedRef}\n    >\n      <div\n        className={clsx(\n          styles.background,\n          { [styles['is-overlap-disabled']]: isOverlapDisabled },\n          'awsui-context-content-header'\n        )}\n        ref={overlapElement}\n      />\n\n      {header && <div className={clsx(styles.header, 'awsui-context-content-header')}>{header}</div>}\n\n      <div className={styles.content}>{children}</div>\n    </div>\n  );\n}\n"]}

package/content-layout/styles.css.js

@@ -1,11 +1,12 @@
 
     import './styles.scoped.css';
     export default {
-  "layout": "awsui_layout_5gtk3_1kdsa_99",
-  "is-visual-refresh": "awsui_is-visual-refresh_5gtk3_1kdsa_99",
-  "background": "awsui_background_5gtk3_1kdsa_102",
-  "header": "awsui_header_5gtk3_1kdsa_105",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_5gtk3_1kdsa_115",
-  "content": "awsui_content_5gtk3_1kdsa_132"
+  "layout": "awsui_layout_5gtk3_1q3c5_99",
+  "is-visual-refresh": "awsui_is-visual-refresh_5gtk3_1q3c5_99",
+  "background": "awsui_background_5gtk3_1q3c5_102",
+  "header": "awsui_header_5gtk3_1q3c5_105",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_5gtk3_1q3c5_121",
+  "content": "awsui_content_5gtk3_1q3c5_129",
+  "has-header": "awsui_has-header_5gtk3_1q3c5_133"
 };
   

package/content-layout/styles.scoped.css

@@ -96,40 +96,48 @@ 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_1kdsa_99:not(#\9):not(.awsui_is-visual-refresh_5gtk3_1kdsa_99) {
+.awsui_layout_5gtk3_1q3c5_99:not(#\9):not(.awsui_is-visual-refresh_5gtk3_1q3c5_99) {
   display: contents;
 }
-.awsui_layout_5gtk3_1kdsa_99:not(#\9):not(.awsui_is-visual-refresh_5gtk3_1kdsa_99) > .awsui_background_5gtk3_1kdsa_102 {
+.awsui_layout_5gtk3_1q3c5_99:not(#\9):not(.awsui_is-visual-refresh_5gtk3_1q3c5_99) > .awsui_background_5gtk3_1q3c5_102 {
   display: none;
 }
-.awsui_layout_5gtk3_1kdsa_99:not(#\9):not(.awsui_is-visual-refresh_5gtk3_1kdsa_99) > .awsui_header_5gtk3_1kdsa_105 {
+.awsui_layout_5gtk3_1q3c5_99:not(#\9):not(.awsui_is-visual-refresh_5gtk3_1q3c5_99) > .awsui_header_5gtk3_1q3c5_105 {
   padding-bottom: var(--space-content-header-padding-bottom-2cx87f, 24px);
 }
 
-.awsui_layout_5gtk3_1kdsa_99.awsui_is-visual-refresh_5gtk3_1kdsa_99:not(#\9) {
+.awsui_layout_5gtk3_1q3c5_99.awsui_is-visual-refresh_5gtk3_1q3c5_99:not(#\9) {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   grid-template-rows: auto var(--space-dark-header-overlap-distance-l9lxfl, 36px) 1fr;
   min-height: 100%;
 }
-.awsui_layout_5gtk3_1kdsa_99.awsui_is-visual-refresh_5gtk3_1kdsa_99.awsui_is-overlap-disabled_5gtk3_1kdsa_115:not(#\9) {
-  grid-template-rows: auto 0 1fr;
-}
-.awsui_layout_5gtk3_1kdsa_99.awsui_is-visual-refresh_5gtk3_1kdsa_99 > .awsui_background_5gtk3_1kdsa_102:not(#\9) {
+.awsui_layout_5gtk3_1q3c5_99.awsui_is-visual-refresh_5gtk3_1q3c5_99 > .awsui_background_5gtk3_1q3c5_102:not(#\9) {
   background-color: var(--color-background-layout-main-m49752, #ffffff);
   grid-column: 1;
   grid-row: 1/3;
   color: var(--color-text-body-default-mmvcvg, #000716);
 }
-.awsui_layout_5gtk3_1kdsa_99.awsui_is-visual-refresh_5gtk3_1kdsa_99 > .awsui_background_5gtk3_1kdsa_102.awsui_is-overlap-disabled_5gtk3_1kdsa_115:not(#\9) {
+.awsui_layout_5gtk3_1q3c5_99.awsui_is-visual-refresh_5gtk3_1q3c5_99 > .awsui_background_5gtk3_1q3c5_102.awsui_is-overlap-disabled_5gtk3_1q3c5_121:not(#\9) {
   grid-row: 1/2;
 }
-.awsui_layout_5gtk3_1kdsa_99.awsui_is-visual-refresh_5gtk3_1kdsa_99 > .awsui_header_5gtk3_1kdsa_105:not(#\9) {
+.awsui_layout_5gtk3_1q3c5_99.awsui_is-visual-refresh_5gtk3_1q3c5_99 > .awsui_header_5gtk3_1q3c5_105:not(#\9) {
   grid-column: 1;
   grid-row: 1;
   padding-bottom: var(--space-content-header-padding-bottom-2cx87f, 24px);
 }
-.awsui_layout_5gtk3_1kdsa_99.awsui_is-visual-refresh_5gtk3_1kdsa_99 > .awsui_content_5gtk3_1kdsa_132:not(#\9) {
+.awsui_layout_5gtk3_1q3c5_99.awsui_is-visual-refresh_5gtk3_1q3c5_99 > .awsui_content_5gtk3_1q3c5_129:not(#\9) {
   grid-column: 1;
   grid-row: 2/4;
+}
+.awsui_layout_5gtk3_1q3c5_99.awsui_is-visual-refresh_5gtk3_1q3c5_99:not(#\9):not(.awsui_has-header_5gtk3_1q3c5_133) {
+  grid-template-rows: auto calc(
+        var(--space-dark-header-overlap-distance-l9lxfl, 36px) + var(--awsui-container-first-overlap-extension-8nglyc, 0px) + var(--awsui-container-first-gap-8nglyc, 0px)
+      ) 1fr;
+}
+.awsui_layout_5gtk3_1q3c5_99.awsui_is-visual-refresh_5gtk3_1q3c5_99:not(#\9):not(.awsui_has-header_5gtk3_1q3c5_133) > .awsui_content_5gtk3_1q3c5_129 {
+  padding-top: var(--awsui-container-first-gap-8nglyc, 0px);
+}
+.awsui_layout_5gtk3_1q3c5_99.awsui_is-visual-refresh_5gtk3_1q3c5_99.awsui_is-overlap-disabled_5gtk3_1q3c5_121:not(#\9) {
+  grid-template-rows: auto 0 1fr;
 }

package/content-layout/styles.selectors.js

@@ -2,11 +2,12 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "layout": "awsui_layout_5gtk3_1kdsa_99",
-  "is-visual-refresh": "awsui_is-visual-refresh_5gtk3_1kdsa_99",
-  "background": "awsui_background_5gtk3_1kdsa_102",
-  "header": "awsui_header_5gtk3_1kdsa_105",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_5gtk3_1kdsa_115",
-  "content": "awsui_content_5gtk3_1kdsa_132"
+  "layout": "awsui_layout_5gtk3_1q3c5_99",
+  "is-visual-refresh": "awsui_is-visual-refresh_5gtk3_1q3c5_99",
+  "background": "awsui_background_5gtk3_1q3c5_102",
+  "header": "awsui_header_5gtk3_1q3c5_105",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_5gtk3_1q3c5_121",
+  "content": "awsui_content_5gtk3_1q3c5_129",
+  "has-header": "awsui_has-header_5gtk3_1q3c5_133"
 };
   

package/flashbar/styles.css.js

@@ -1,50 +1,50 @@
 
     import './styles.scoped.css';
     export default {
-  "flash-with-motion": "awsui_flash-with-motion_1q84n_iihyk_93",
-  "enter": "awsui_enter_1q84n_iihyk_93",
-  "flash-body": "awsui_flash-body_1q84n_iihyk_107",
-  "flash-message": "awsui_flash-message_1q84n_iihyk_107",
-  "flash-header": "awsui_flash-header_1q84n_iihyk_107",
-  "flash-content": "awsui_flash-content_1q84n_iihyk_108",
-  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_iihyk_109",
-  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_iihyk_110",
-  "flash-icon": "awsui_flash-icon_1q84n_iihyk_133",
-  "entering": "awsui_entering_1q84n_iihyk_146",
-  "entered": "awsui_entered_1q84n_iihyk_167",
-  "exiting": "awsui_exiting_1q84n_iihyk_272",
-  "stack": "awsui_stack_1q84n_iihyk_294",
-  "animation-running": "awsui_animation-running_1q84n_iihyk_294",
-  "item": "awsui_item_1q84n_iihyk_294",
-  "flash-list-item": "awsui_flash-list-item_1q84n_iihyk_295",
-  "notification-bar": "awsui_notification-bar_1q84n_iihyk_296",
-  "collapsed": "awsui_collapsed_1q84n_iihyk_316",
-  "animation-ready": "awsui_animation-ready_1q84n_iihyk_316",
-  "expanded-only": "awsui_expanded-only_1q84n_iihyk_316",
-  "expanded": "awsui_expanded_1q84n_iihyk_316",
-  "flash": "awsui_flash_1q84n_iihyk_93",
-  "collapsible": "awsui_collapsible_1q84n_iihyk_380",
-  "short-list": "awsui_short-list_1q84n_iihyk_386",
-  "visual-refresh": "awsui_visual-refresh_1q84n_iihyk_386",
-  "status": "awsui_status_1q84n_iihyk_603",
-  "header": "awsui_header_1q84n_iihyk_603",
-  "item-count": "awsui_item-count_1q84n_iihyk_604",
-  "button": "awsui_button_1q84n_iihyk_605",
-  "type-count": "awsui_type-count_1q84n_iihyk_640",
-  "count-number": "awsui_count-number_1q84n_iihyk_640",
-  "icon": "awsui_icon_1q84n_iihyk_674",
-  "floating": "awsui_floating_1q84n_iihyk_712",
-  "flashbar": "awsui_flashbar_1q84n_iihyk_720",
-  "flash-refresh": "awsui_flash-refresh_1q84n_iihyk_766",
-  "flash-list": "awsui_flash-list_1q84n_iihyk_295",
-  "flash-focus-container": "awsui_flash-focus-container_1q84n_iihyk_785",
-  "flash-text": "awsui_flash-text_1q84n_iihyk_812",
-  "dismiss-button": "awsui_dismiss-button_1q84n_iihyk_110",
-  "breakpoint-default": "awsui_breakpoint-default_1q84n_iihyk_853",
-  "action-button": "awsui_action-button_1q84n_iihyk_109",
-  "flash-type-success": "awsui_flash-type-success_1q84n_iihyk_866",
-  "flash-type-error": "awsui_flash-type-error_1q84n_iihyk_870",
-  "flash-type-warning": "awsui_flash-type-warning_1q84n_iihyk_874",
-  "flash-type-info": "awsui_flash-type-info_1q84n_iihyk_878"
+  "flash-with-motion": "awsui_flash-with-motion_1q84n_3wtis_93",
+  "enter": "awsui_enter_1q84n_3wtis_93",
+  "flash-body": "awsui_flash-body_1q84n_3wtis_107",
+  "flash-message": "awsui_flash-message_1q84n_3wtis_107",
+  "flash-header": "awsui_flash-header_1q84n_3wtis_107",
+  "flash-content": "awsui_flash-content_1q84n_3wtis_108",
+  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_3wtis_109",
+  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_3wtis_110",
+  "flash-icon": "awsui_flash-icon_1q84n_3wtis_133",
+  "entering": "awsui_entering_1q84n_3wtis_146",
+  "entered": "awsui_entered_1q84n_3wtis_167",
+  "exiting": "awsui_exiting_1q84n_3wtis_272",
+  "stack": "awsui_stack_1q84n_3wtis_294",
+  "animation-running": "awsui_animation-running_1q84n_3wtis_294",
+  "item": "awsui_item_1q84n_3wtis_294",
+  "flash-list-item": "awsui_flash-list-item_1q84n_3wtis_295",
+  "notification-bar": "awsui_notification-bar_1q84n_3wtis_296",
+  "collapsed": "awsui_collapsed_1q84n_3wtis_316",
+  "animation-ready": "awsui_animation-ready_1q84n_3wtis_316",
+  "expanded-only": "awsui_expanded-only_1q84n_3wtis_316",
+  "expanded": "awsui_expanded_1q84n_3wtis_316",
+  "flash": "awsui_flash_1q84n_3wtis_93",
+  "collapsible": "awsui_collapsible_1q84n_3wtis_380",
+  "short-list": "awsui_short-list_1q84n_3wtis_386",
+  "visual-refresh": "awsui_visual-refresh_1q84n_3wtis_386",
+  "status": "awsui_status_1q84n_3wtis_603",
+  "header": "awsui_header_1q84n_3wtis_603",
+  "item-count": "awsui_item-count_1q84n_3wtis_604",
+  "button": "awsui_button_1q84n_3wtis_605",
+  "type-count": "awsui_type-count_1q84n_3wtis_640",
+  "count-number": "awsui_count-number_1q84n_3wtis_640",
+  "icon": "awsui_icon_1q84n_3wtis_674",
+  "floating": "awsui_floating_1q84n_3wtis_712",
+  "flashbar": "awsui_flashbar_1q84n_3wtis_720",
+  "flash-refresh": "awsui_flash-refresh_1q84n_3wtis_766",
+  "flash-list": "awsui_flash-list_1q84n_3wtis_295",
+  "flash-focus-container": "awsui_flash-focus-container_1q84n_3wtis_785",
+  "flash-text": "awsui_flash-text_1q84n_3wtis_812",
+  "dismiss-button": "awsui_dismiss-button_1q84n_3wtis_110",
+  "breakpoint-default": "awsui_breakpoint-default_1q84n_3wtis_853",
+  "action-button": "awsui_action-button_1q84n_3wtis_109",
+  "flash-type-success": "awsui_flash-type-success_1q84n_3wtis_866",
+  "flash-type-error": "awsui_flash-type-error_1q84n_3wtis_870",
+  "flash-type-warning": "awsui_flash-type-warning_1q84n_3wtis_874",
+  "flash-type-info": "awsui_flash-type-info_1q84n_3wtis_878"
 };