@cloudscape-design/components-themeable 3.0.651 → 3.0.653

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

@@ -0,0 +1,16 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_1uxbz_1e1zw_103",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_1uxbz_1e1zw_111",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_1uxbz_1e1zw_126",
+  "main-landmark": "awsui_main-landmark_1uxbz_1e1zw_141",
+  "navigation": "awsui_navigation_1uxbz_1e1zw_145",
+  "tools": "awsui_tools_1uxbz_1e1zw_150",
+  "top-bar": "awsui_top-bar_1uxbz_1e1zw_155",
+  "notifications": "awsui_notifications_1uxbz_1e1zw_161",
+  "main": "awsui_main_1uxbz_1e1zw_141",
+  "main-disable-paddings": "awsui_main-disable-paddings_1uxbz_1e1zw_173",
+  "content-header": "awsui_content-header_1uxbz_1e1zw_178"
+};
+  

package/lib/internal/template/app-layout/skeleton/styles.scoped.css

@@ -0,0 +1,180 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable plugin/no-unsupported-browser-features */
+/* stylelint-enable plugin/no-unsupported-browser-features */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_root_1uxbz_1e1zw_103:not(#\9) {
+  --awsui-max-content-width-epuq3n: 100%;
+  display: grid;
+  grid-template-areas: "navigation topBar       topBar        topBar    tools" "navigation .         notifications    .         tools" "navigation .             main         .         tools";
+  grid-template-columns: min-content minmax(var(--space-layout-content-horizontal-sin989, 40px), 1fr) minmax(var(--awsui-min-content-width-epuq3n), var(--awsui-max-content-width-epuq3n)) minmax(var(--space-layout-content-horizontal-sin989, 40px), 1fr) min-content;
+  grid-template-rows: min-content min-content 1fr min-content;
+}
+@media (min-width: 1401px) {
+  .awsui_root_1uxbz_1e1zw_103.awsui_has-adaptive-widths-default_1uxbz_1e1zw_111:not(#\9) {
+    --awsui-max-content-width-epuq3n: 1280px;
+  }
+}
+@media (min-width: 1921px) {
+  .awsui_root_1uxbz_1e1zw_103.awsui_has-adaptive-widths-default_1uxbz_1e1zw_111:not(#\9) {
+    --awsui-max-content-width-epuq3n: 1440px;
+  }
+}
+@media (min-width: 2541px) {
+  .awsui_root_1uxbz_1e1zw_103.awsui_has-adaptive-widths-default_1uxbz_1e1zw_111:not(#\9) {
+    --awsui-max-content-width-epuq3n: 1620px;
+  }
+}
+@media (min-width: 1401px) {
+  .awsui_root_1uxbz_1e1zw_103.awsui_has-adaptive-widths-dashboard_1uxbz_1e1zw_126:not(#\9) {
+    --awsui-max-content-width-epuq3n: 1280px;
+  }
+}
+@media (min-width: 1921px) {
+  .awsui_root_1uxbz_1e1zw_103.awsui_has-adaptive-widths-dashboard_1uxbz_1e1zw_126:not(#\9) {
+    --awsui-max-content-width-epuq3n: 1620px;
+  }
+}
+@media (min-width: 2541px) {
+  .awsui_root_1uxbz_1e1zw_103.awsui_has-adaptive-widths-dashboard_1uxbz_1e1zw_126:not(#\9) {
+    --awsui-max-content-width-epuq3n: 2160px;
+  }
+}
+
+.awsui_main-landmark_1uxbz_1e1zw_141:not(#\9) {
+  display: contents;
+}
+
+.awsui_navigation_1uxbz_1e1zw_145:not(#\9) {
+  grid-area: navigation;
+  border-inline-end: 1px solid var(--color-border-divider-panel-side-btgups, transparent);
+}
+
+.awsui_tools_1uxbz_1e1zw_150:not(#\9) {
+  grid-area: tools;
+  border-inline-start: 1px solid var(--color-border-divider-panel-side-btgups, transparent);
+}
+
+.awsui_top-bar_1uxbz_1e1zw_155:not(#\9) {
+  grid-area: topBar;
+  block-size: 48px;
+  border-block-end: 1px solid var(--color-border-divider-panel-bottom-sc2k0v, rgba(0, 28, 36, 0.15));
+}
+
+.awsui_notifications_1uxbz_1e1zw_161:not(#\9) {
+  grid-area: notifications;
+}
+.awsui_notifications_1uxbz_1e1zw_161:not(#\9):not(:empty) {
+  padding-block-start: var(--space-scaled-xs-x91h81, 8px);
+}
+
+.awsui_main_1uxbz_1e1zw_141:not(#\9) {
+  grid-area: main;
+  margin-block-start: var(--space-scaled-s-9q8n2q, 12px);
+  margin-block-end: var(--space-layout-content-bottom-ve4osc, 20px);
+}
+.awsui_main-disable-paddings_1uxbz_1e1zw_173:not(#\9) {
+  grid-column: 2/span 3;
+  margin-block: 0;
+}
+
+.awsui_content-header_1uxbz_1e1zw_178:not(#\9) {
+  margin-block-end: var(--space-content-header-padding-bottom-d3iv03, 16px);
+}

package/lib/internal/template/app-layout/skeleton/styles.selectors.js

@@ -0,0 +1,17 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_1uxbz_1e1zw_103",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_1uxbz_1e1zw_111",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_1uxbz_1e1zw_126",
+  "main-landmark": "awsui_main-landmark_1uxbz_1e1zw_141",
+  "navigation": "awsui_navigation_1uxbz_1e1zw_145",
+  "tools": "awsui_tools_1uxbz_1e1zw_150",
+  "top-bar": "awsui_top-bar_1uxbz_1e1zw_155",
+  "notifications": "awsui_notifications_1uxbz_1e1zw_161",
+  "main": "awsui_main_1uxbz_1e1zw_141",
+  "main-disable-paddings": "awsui_main-disable-paddings_1uxbz_1e1zw_173",
+  "content-header": "awsui_content-header_1uxbz_1e1zw_178"
+};
+  

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,gBA2D3B"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/main.tsx"],"names":[],"mappings":";AAWA,MAAM,CAAC,OAAO,UAAU,IAAI,gBA4D3B"}

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, } = useAppLayoutInternals();
+    const { content, disableBodyScroll, disableContentPaddings, footerHeight, hasDrawerViewportOverlay, navigationOpen, placement, hasBackgroundOverlap, isMobile, isSplitPanelOpen, isToolsOpen, mainElement, notificationsHeight, stickyNotifications, offsetBottom, splitPanelDisplayed, splitPanelPosition, activeDrawerId, hasStickyBackground, } = 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,
@@ -21,6 +21,6 @@ export default function Main() {
             [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 && !isMobile ? tokens.spaceScaledS : '0px')) }, content));
+            : '0px', `var(${customCssProps.mobileBarHeight})`, !!disableBodyScroll, isMobile, hasBackgroundOverlap && hasStickyBackground && !isMobile ? tokens.spaceScaledS : '0px')) }, 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,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;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,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAChE,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  } = 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 && !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,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"]}

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

@@ -1,86 +1,86 @@
 
     import './styles.scoped.css';
     export default {
-  "background": "awsui_background_hyvsj_1r1ro_99",
-  "scrolling-background": "awsui_scrolling-background_hyvsj_1r1ro_102",
-  "sticky-background": "awsui_sticky-background_hyvsj_1r1ro_108",
-  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_1r1ro_116",
-  "breadcrumbs": "awsui_breadcrumbs_hyvsj_1r1ro_129",
-  "has-sticky-background": "awsui_has-sticky-background_hyvsj_1r1ro_139",
-  "drawers-container": "awsui_drawers-container_hyvsj_1r1ro_151",
-  "has-open-drawer": "awsui_has-open-drawer_hyvsj_1r1ro_162",
-  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_1r1ro_185",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_1r1ro_190",
-  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_1r1ro_231",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_1r1ro_241",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_1r1ro_245",
-  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_1r1ro_259",
-  "drawers-trigger": "awsui_drawers-trigger_hyvsj_1r1ro_245",
-  "drawer": "awsui_drawer_hyvsj_1r1ro_151",
-  "drawer-content-container": "awsui_drawer-content-container_hyvsj_1r1ro_290",
-  "drawer-close-button": "awsui_drawer-close-button_hyvsj_1r1ro_299",
-  "drawer-content": "awsui_drawer-content_hyvsj_1r1ro_290",
-  "drawer-content-hidden": "awsui_drawer-content-hidden_hyvsj_1r1ro_307",
-  "drawer-slider": "awsui_drawer-slider_hyvsj_1r1ro_310",
-  "is-drawer-open": "awsui_is-drawer-open_hyvsj_1r1ro_317",
-  "content": "awsui_content_hyvsj_1r1ro_343",
-  "layout": "awsui_layout_hyvsj_1r1ro_364",
-  "has-max-content-width": "awsui_has-max-content-width_hyvsj_1r1ro_435",
-  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_1r1ro_450",
-  "content-type-table": "awsui_content-type-table_hyvsj_1r1ro_464",
-  "content-type-cards": "awsui_content-type-cards_hyvsj_1r1ro_464",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_1r1ro_470",
-  "is-hide-mobile-toolbar": "awsui_is-hide-mobile-toolbar_hyvsj_1r1ro_473",
-  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_1r1ro_487",
-  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_1r1ro_490",
-  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_1r1ro_500",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_1r1ro_503",
-  "content-first-child-header": "awsui_content-first-child-header_hyvsj_1r1ro_506",
-  "has-header": "awsui_has-header_hyvsj_1r1ro_506",
-  "content-first-child-main": "awsui_content-first-child-main_hyvsj_1r1ro_524",
-  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_1r1ro_524",
-  "has-split-panel": "awsui_has-split-panel_hyvsj_1r1ro_561",
-  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_1r1ro_561",
-  "block-body-scroll": "awsui_block-body-scroll_hyvsj_1r1ro_569",
-  "unfocusable": "awsui_unfocusable_hyvsj_1r1ro_574",
-  "container": "awsui_container_hyvsj_1r1ro_584",
-  "is-navigation-open": "awsui_is-navigation-open_hyvsj_1r1ro_610",
-  "is-tools-open": "awsui_is-tools-open_hyvsj_1r1ro_613",
-  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_1r1ro_613",
-  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_1r1ro_613",
-  "has-active-drawer": "awsui_has-active-drawer_hyvsj_1r1ro_613",
-  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_1r1ro_622",
-  "remove-high-contrast-header": "awsui_remove-high-contrast-header_hyvsj_1r1ro_639",
-  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_1r1ro_643",
-  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_1r1ro_647",
-  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_1r1ro_651",
-  "navigation-container": "awsui_navigation-container_hyvsj_1r1ro_660",
-  "show-navigation": "awsui_show-navigation_hyvsj_1r1ro_698",
-  "animating": "awsui_animating_hyvsj_1r1ro_721",
-  "showButtons": "awsui_showButtons_hyvsj_1r1ro_1",
-  "navigation": "awsui_navigation_hyvsj_1r1ro_660",
-  "openNavigation": "awsui_openNavigation_hyvsj_1r1ro_1",
-  "animated-content": "awsui_animated-content_hyvsj_1r1ro_783",
-  "hide-navigation": "awsui_hide-navigation_hyvsj_1r1ro_792",
-  "notifications": "awsui_notifications_hyvsj_1r1ro_802",
-  "sticky-notifications": "awsui_sticky-notifications_hyvsj_1r1ro_808",
-  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_1r1ro_825",
-  "position-bottom": "awsui_position-bottom_hyvsj_1r1ro_872",
-  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_1r1ro_1",
-  "split-panel-side": "awsui_split-panel-side_hyvsj_1r1ro_901",
-  "position-side": "awsui_position-side_hyvsj_1r1ro_914",
-  "tools-container": "awsui_tools-container_hyvsj_1r1ro_936",
-  "tools": "awsui_tools_hyvsj_1r1ro_936",
-  "openTools": "awsui_openTools_hyvsj_1r1ro_1",
-  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_1r1ro_1027",
-  "hide-tools": "awsui_hide-tools_hyvsj_1r1ro_1037",
-  "show-tools": "awsui_show-tools_hyvsj_1r1ro_1049",
-  "has-tools-form": "awsui_has-tools-form_hyvsj_1r1ro_1027",
-  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_1r1ro_1134",
-  "trigger": "awsui_trigger_hyvsj_1r1ro_1134",
-  "selected": "awsui_selected_hyvsj_1r1ro_1211",
-  "badge": "awsui_badge_hyvsj_1r1ro_1231",
-  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_1r1ro_1235",
-  "dot": "awsui_dot_hyvsj_1r1ro_1246"
+  "background": "awsui_background_hyvsj_1s3d6_99",
+  "scrolling-background": "awsui_scrolling-background_hyvsj_1s3d6_102",
+  "sticky-background": "awsui_sticky-background_hyvsj_1s3d6_108",
+  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_1s3d6_116",
+  "breadcrumbs": "awsui_breadcrumbs_hyvsj_1s3d6_129",
+  "has-sticky-background": "awsui_has-sticky-background_hyvsj_1s3d6_139",
+  "drawers-container": "awsui_drawers-container_hyvsj_1s3d6_151",
+  "has-open-drawer": "awsui_has-open-drawer_hyvsj_1s3d6_162",
+  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_1s3d6_185",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_1s3d6_190",
+  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_1s3d6_231",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_1s3d6_241",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_1s3d6_245",
+  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_1s3d6_259",
+  "drawers-trigger": "awsui_drawers-trigger_hyvsj_1s3d6_245",
+  "drawer": "awsui_drawer_hyvsj_1s3d6_151",
+  "drawer-content-container": "awsui_drawer-content-container_hyvsj_1s3d6_290",
+  "drawer-close-button": "awsui_drawer-close-button_hyvsj_1s3d6_299",
+  "drawer-content": "awsui_drawer-content_hyvsj_1s3d6_290",
+  "drawer-content-hidden": "awsui_drawer-content-hidden_hyvsj_1s3d6_307",
+  "drawer-slider": "awsui_drawer-slider_hyvsj_1s3d6_310",
+  "is-drawer-open": "awsui_is-drawer-open_hyvsj_1s3d6_317",
+  "content": "awsui_content_hyvsj_1s3d6_343",
+  "layout": "awsui_layout_hyvsj_1s3d6_364",
+  "has-max-content-width": "awsui_has-max-content-width_hyvsj_1s3d6_435",
+  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_1s3d6_450",
+  "content-type-table": "awsui_content-type-table_hyvsj_1s3d6_464",
+  "content-type-cards": "awsui_content-type-cards_hyvsj_1s3d6_464",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_1s3d6_470",
+  "is-hide-mobile-toolbar": "awsui_is-hide-mobile-toolbar_hyvsj_1s3d6_473",
+  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_1s3d6_487",
+  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_1s3d6_490",
+  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_1s3d6_500",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_1s3d6_503",
+  "content-first-child-header": "awsui_content-first-child-header_hyvsj_1s3d6_506",
+  "has-header": "awsui_has-header_hyvsj_1s3d6_506",
+  "content-first-child-main": "awsui_content-first-child-main_hyvsj_1s3d6_524",
+  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_1s3d6_524",
+  "has-split-panel": "awsui_has-split-panel_hyvsj_1s3d6_561",
+  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_1s3d6_561",
+  "block-body-scroll": "awsui_block-body-scroll_hyvsj_1s3d6_569",
+  "unfocusable": "awsui_unfocusable_hyvsj_1s3d6_574",
+  "container": "awsui_container_hyvsj_1s3d6_584",
+  "is-navigation-open": "awsui_is-navigation-open_hyvsj_1s3d6_610",
+  "is-tools-open": "awsui_is-tools-open_hyvsj_1s3d6_613",
+  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_1s3d6_613",
+  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_1s3d6_613",
+  "has-active-drawer": "awsui_has-active-drawer_hyvsj_1s3d6_613",
+  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_1s3d6_622",
+  "remove-high-contrast-header": "awsui_remove-high-contrast-header_hyvsj_1s3d6_639",
+  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_1s3d6_643",
+  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_1s3d6_647",
+  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_1s3d6_651",
+  "navigation-container": "awsui_navigation-container_hyvsj_1s3d6_660",
+  "show-navigation": "awsui_show-navigation_hyvsj_1s3d6_698",
+  "animating": "awsui_animating_hyvsj_1s3d6_721",
+  "showButtons": "awsui_showButtons_hyvsj_1s3d6_1",
+  "navigation": "awsui_navigation_hyvsj_1s3d6_660",
+  "openNavigation": "awsui_openNavigation_hyvsj_1s3d6_1",
+  "animated-content": "awsui_animated-content_hyvsj_1s3d6_783",
+  "hide-navigation": "awsui_hide-navigation_hyvsj_1s3d6_792",
+  "notifications": "awsui_notifications_hyvsj_1s3d6_802",
+  "sticky-notifications": "awsui_sticky-notifications_hyvsj_1s3d6_808",
+  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_1s3d6_825",
+  "position-bottom": "awsui_position-bottom_hyvsj_1s3d6_872",
+  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_1s3d6_1",
+  "split-panel-side": "awsui_split-panel-side_hyvsj_1s3d6_901",
+  "position-side": "awsui_position-side_hyvsj_1s3d6_914",
+  "tools-container": "awsui_tools-container_hyvsj_1s3d6_936",
+  "tools": "awsui_tools_hyvsj_1s3d6_936",
+  "openTools": "awsui_openTools_hyvsj_1s3d6_1",
+  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_1s3d6_1027",
+  "hide-tools": "awsui_hide-tools_hyvsj_1s3d6_1037",
+  "show-tools": "awsui_show-tools_hyvsj_1s3d6_1049",
+  "has-tools-form": "awsui_has-tools-form_hyvsj_1s3d6_1027",
+  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_1s3d6_1134",
+  "trigger": "awsui_trigger_hyvsj_1s3d6_1134",
+  "selected": "awsui_selected_hyvsj_1s3d6_1211",
+  "badge": "awsui_badge_hyvsj_1s3d6_1231",
+  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_1s3d6_1235",
+  "dot": "awsui_dot_hyvsj_1s3d6_1246"
 };