@cloudscape-design/components 3.0.731 → 3.0.732

package/app-layout/visual-refresh-toolbar/drawer/index.js

@@ -11,17 +11,18 @@ import sharedStyles from '../../resize/styles.css.js';
 import testutilStyles from '../../test-classes/styles.css.js';
 import styles from './styles.css.js';
 export function AppLayoutDrawerImplementation({ appLayoutInternals }) {
-    var _a, _b, _c, _d;
-    const { activeDrawer, minDrawerSize, activeDrawerSize, maxDrawerSize, ariaLabels, drawers, drawersFocusControl, isMobile, placement, onActiveDrawerChange, onActiveDrawerResize, } = appLayoutInternals;
+    var _a, _b, _c, _d, _e;
+    const { activeDrawer, minDrawerSize, activeDrawerSize, maxDrawerSize, ariaLabels, drawers, drawersFocusControl, isMobile, placement, verticalOffsets, onActiveDrawerChange, onActiveDrawerResize, } = appLayoutInternals;
     const drawerRef = useRef(null);
     const activeDrawerId = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id;
     const computedAriaLabels = {
         closeButton: activeDrawer ? (_a = activeDrawer.ariaLabels) === null || _a === void 0 ? void 0 : _a.closeButton : ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsClose,
         content: activeDrawer ? (_b = activeDrawer.ariaLabels) === null || _b === void 0 ? void 0 : _b.drawerName : ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools,
     };
+    const drawersTopOffset = (_c = verticalOffsets.drawers) !== null && _c !== void 0 ? _c : placement.insetBlockStart;
     const isToolsDrawer = (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id) === TOOLS_DRAWER_ID;
     const toolsOnlyMode = drawers.length === 1 && drawers[0].id === TOOLS_DRAWER_ID;
-    const toolsContent = (_c = drawers === null || drawers === void 0 ? void 0 : drawers.find(drawer => drawer.id === TOOLS_DRAWER_ID)) === null || _c === void 0 ? void 0 : _c.content;
+    const toolsContent = (_d = drawers === null || drawers === void 0 ? void 0 : drawers.find(drawer => drawer.id === TOOLS_DRAWER_ID)) === null || _d === void 0 ? void 0 : _d.content;
     const resizeProps = useResize({
         currentWidth: activeDrawerSize,
         minWidth: minDrawerSize,
@@ -30,7 +31,7 @@ export function AppLayoutDrawerImplementation({ appLayoutInternals }) {
         handleRef: drawersFocusControl.refs.slider,
         onResize: size => onActiveDrawerResize({ id: activeDrawerId, size }),
     });
-    return (React.createElement("aside", { id: activeDrawerId, "aria-hidden": !activeDrawer, "aria-label": computedAriaLabels.content, className: clsx(styles.drawer, {
+    return (React.createElement("aside", { id: activeDrawerId, "aria-hidden": !activeDrawer, "aria-label": computedAriaLabels.content, className: clsx(styles.drawer, sharedStyles['with-motion'], {
             [testutilStyles['active-drawer']]: !toolsOnlyMode && activeDrawerId,
             [testutilStyles.tools]: isToolsDrawer,
         }), ref: drawerRef, onBlur: e => {
@@ -38,11 +39,11 @@ export function AppLayoutDrawerImplementation({ appLayoutInternals }) {
                 drawersFocusControl.loseFocus();
             }
         }, style: {
-            blockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,
-            insetBlockStart: placement.insetBlockStart,
+            blockSize: `calc(100vh - ${drawersTopOffset}px - ${placement.insetBlockEnd}px)`,
+            insetBlockStart: drawersTopOffset,
         } },
         !isMobile && (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable) && (React.createElement("div", { className: styles['drawer-slider'] },
-            React.createElement(PanelResizeHandle, { ref: drawersFocusControl.refs.slider, position: "side", className: testutilStyles['drawers-slider'], ariaLabel: (_d = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _d === void 0 ? void 0 : _d.resizeHandle, ariaValuenow: resizeProps.relativeSize, onKeyDown: resizeProps.onKeyDown, onPointerDown: resizeProps.onPointerDown }))),
+            React.createElement(PanelResizeHandle, { ref: drawersFocusControl.refs.slider, position: "side", className: testutilStyles['drawers-slider'], ariaLabel: (_e = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _e === void 0 ? void 0 : _e.resizeHandle, ariaValuenow: resizeProps.relativeSize, onKeyDown: resizeProps.onKeyDown, onPointerDown: resizeProps.onPointerDown }))),
         React.createElement("div", { className: clsx(styles['drawer-content-container'], sharedStyles['with-motion']), style: { width: isMobile ? '100%' : `${activeDrawerSize}px` } },
             React.createElement("div", { className: clsx(styles['drawer-close-button']) },
                 React.createElement(InternalButton, { ariaLabel: computedAriaLabels.closeButton, className: clsx({

package/app-layout/visual-refresh-toolbar/drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/index.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';\n\nimport { InternalButton } from '../../../button/internal';\nimport PanelResizeHandle from '../../../internal/components/panel-resize-handle';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { TOOLS_DRAWER_ID } from '../../utils/use-drawers';\nimport { AppLayoutInternals } from '../interfaces';\nimport { useResize } from './use-resize';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutDrawerImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutDrawerImplementation({ appLayoutInternals }: AppLayoutDrawerImplementationProps) {\n  const {\n    activeDrawer,\n    minDrawerSize,\n    activeDrawerSize,\n    maxDrawerSize,\n    ariaLabels,\n    drawers,\n    drawersFocusControl,\n    isMobile,\n    placement,\n    onActiveDrawerChange,\n    onActiveDrawerResize,\n  } = appLayoutInternals;\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const activeDrawerId = activeDrawer?.id;\n\n  const computedAriaLabels = {\n    closeButton: activeDrawer ? activeDrawer.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n    content: activeDrawer ? activeDrawer.ariaLabels?.drawerName : ariaLabels?.tools,\n  };\n\n  const isToolsDrawer = activeDrawer?.id === TOOLS_DRAWER_ID;\n  const toolsOnlyMode = drawers.length === 1 && drawers[0].id === TOOLS_DRAWER_ID;\n  const toolsContent = drawers?.find(drawer => drawer.id === TOOLS_DRAWER_ID)?.content;\n  const resizeProps = useResize({\n    currentWidth: activeDrawerSize,\n    minWidth: minDrawerSize,\n    maxWidth: maxDrawerSize,\n    panelRef: drawerRef,\n    handleRef: drawersFocusControl.refs.slider,\n    onResize: size => onActiveDrawerResize({ id: activeDrawerId!, size }),\n  });\n\n  return (\n    <aside\n      id={activeDrawerId}\n      aria-hidden={!activeDrawer}\n      aria-label={computedAriaLabels.content}\n      className={clsx(styles.drawer, {\n        [testutilStyles['active-drawer']]: !toolsOnlyMode && activeDrawerId,\n        [testutilStyles.tools]: isToolsDrawer,\n      })}\n      ref={drawerRef}\n      onBlur={e => {\n        if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n          drawersFocusControl.loseFocus();\n        }\n      }}\n      style={{\n        blockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,\n        insetBlockStart: placement.insetBlockStart,\n      }}\n    >\n      {!isMobile && activeDrawer?.resizable && (\n        <div className={styles['drawer-slider']}>\n          <PanelResizeHandle\n            ref={drawersFocusControl.refs.slider}\n            position=\"side\"\n            className={testutilStyles['drawers-slider']}\n            ariaLabel={activeDrawer?.ariaLabels?.resizeHandle}\n            ariaValuenow={resizeProps.relativeSize}\n            onKeyDown={resizeProps.onKeyDown}\n            onPointerDown={resizeProps.onPointerDown}\n          />\n        </div>\n      )}\n      <div\n        className={clsx(styles['drawer-content-container'], sharedStyles['with-motion'])}\n        style={{ width: isMobile ? '100%' : `${activeDrawerSize}px` }}\n      >\n        <div className={clsx(styles['drawer-close-button'])}>\n          <InternalButton\n            ariaLabel={computedAriaLabels.closeButton}\n            className={clsx({\n              [testutilStyles['active-drawer-close-button']]: !isToolsDrawer && activeDrawerId,\n              [testutilStyles['tools-close']]: isToolsDrawer,\n            })}\n            formAction=\"none\"\n            iconName={isMobile ? 'close' : 'angle-right'}\n            onClick={() => onActiveDrawerChange(null)}\n            ref={drawersFocusControl.refs.close}\n            variant=\"icon\"\n          />\n        </div>\n        <div\n          className={clsx(\n            styles['drawer-content'],\n            activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden']\n          )}\n        >\n          {toolsContent}\n        </div>\n        {activeDrawerId !== TOOLS_DRAWER_ID && <div className={styles['drawer-content']}>{activeDrawer?.content}</div>}\n      </div>\n    </aside>\n  );\n}\n\nexport const createWidgetizedAppLayoutDrawer = createWidgetizedComponent(AppLayoutDrawerImplementation);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/index.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';\n\nimport { InternalButton } from '../../../button/internal';\nimport PanelResizeHandle from '../../../internal/components/panel-resize-handle';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { TOOLS_DRAWER_ID } from '../../utils/use-drawers';\nimport { AppLayoutInternals } from '../interfaces';\nimport { useResize } from './use-resize';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutDrawerImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutDrawerImplementation({ appLayoutInternals }: AppLayoutDrawerImplementationProps) {\n  const {\n    activeDrawer,\n    minDrawerSize,\n    activeDrawerSize,\n    maxDrawerSize,\n    ariaLabels,\n    drawers,\n    drawersFocusControl,\n    isMobile,\n    placement,\n    verticalOffsets,\n    onActiveDrawerChange,\n    onActiveDrawerResize,\n  } = appLayoutInternals;\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const activeDrawerId = activeDrawer?.id;\n\n  const computedAriaLabels = {\n    closeButton: activeDrawer ? activeDrawer.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n    content: activeDrawer ? activeDrawer.ariaLabels?.drawerName : ariaLabels?.tools,\n  };\n\n  const drawersTopOffset = verticalOffsets.drawers ?? placement.insetBlockStart;\n  const isToolsDrawer = activeDrawer?.id === TOOLS_DRAWER_ID;\n  const toolsOnlyMode = drawers.length === 1 && drawers[0].id === TOOLS_DRAWER_ID;\n  const toolsContent = drawers?.find(drawer => drawer.id === TOOLS_DRAWER_ID)?.content;\n  const resizeProps = useResize({\n    currentWidth: activeDrawerSize,\n    minWidth: minDrawerSize,\n    maxWidth: maxDrawerSize,\n    panelRef: drawerRef,\n    handleRef: drawersFocusControl.refs.slider,\n    onResize: size => onActiveDrawerResize({ id: activeDrawerId!, size }),\n  });\n\n  return (\n    <aside\n      id={activeDrawerId}\n      aria-hidden={!activeDrawer}\n      aria-label={computedAriaLabels.content}\n      className={clsx(styles.drawer, sharedStyles['with-motion'], {\n        [testutilStyles['active-drawer']]: !toolsOnlyMode && activeDrawerId,\n        [testutilStyles.tools]: isToolsDrawer,\n      })}\n      ref={drawerRef}\n      onBlur={e => {\n        if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n          drawersFocusControl.loseFocus();\n        }\n      }}\n      style={{\n        blockSize: `calc(100vh - ${drawersTopOffset}px - ${placement.insetBlockEnd}px)`,\n        insetBlockStart: drawersTopOffset,\n      }}\n    >\n      {!isMobile && activeDrawer?.resizable && (\n        <div className={styles['drawer-slider']}>\n          <PanelResizeHandle\n            ref={drawersFocusControl.refs.slider}\n            position=\"side\"\n            className={testutilStyles['drawers-slider']}\n            ariaLabel={activeDrawer?.ariaLabels?.resizeHandle}\n            ariaValuenow={resizeProps.relativeSize}\n            onKeyDown={resizeProps.onKeyDown}\n            onPointerDown={resizeProps.onPointerDown}\n          />\n        </div>\n      )}\n      <div\n        className={clsx(styles['drawer-content-container'], sharedStyles['with-motion'])}\n        style={{ width: isMobile ? '100%' : `${activeDrawerSize}px` }}\n      >\n        <div className={clsx(styles['drawer-close-button'])}>\n          <InternalButton\n            ariaLabel={computedAriaLabels.closeButton}\n            className={clsx({\n              [testutilStyles['active-drawer-close-button']]: !isToolsDrawer && activeDrawerId,\n              [testutilStyles['tools-close']]: isToolsDrawer,\n            })}\n            formAction=\"none\"\n            iconName={isMobile ? 'close' : 'angle-right'}\n            onClick={() => onActiveDrawerChange(null)}\n            ref={drawersFocusControl.refs.close}\n            variant=\"icon\"\n          />\n        </div>\n        <div\n          className={clsx(\n            styles['drawer-content'],\n            activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden']\n          )}\n        >\n          {toolsContent}\n        </div>\n        {activeDrawerId !== TOOLS_DRAWER_ID && <div className={styles['drawer-content']}>{activeDrawer?.content}</div>}\n      </div>\n    </aside>\n  );\n}\n\nexport const createWidgetizedAppLayoutDrawer = createWidgetizedComponent(AppLayoutDrawerImplementation);\n"]}

package/app-layout/visual-refresh-toolbar/index.js

@@ -120,7 +120,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef((_a, forwardRef) => {
     const discoveredBreadcrumbs = useGetGlobalBreadcrumbs(hasToolbar);
     const verticalOffsets = computeVerticalLayout({
         topOffset: placement.insetBlockStart,
-        hasVisibleToolbar: hasToolbar && toolbarState !== 'hide',
+        hasVisibleToolbar: hasToolbar && toolbarState !== 'hide' && !isMobile,
         notificationsHeight: notificationsHeight !== null && notificationsHeight !== void 0 ? notificationsHeight : 0,
         toolbarHeight: toolbarHeight !== null && toolbarHeight !== void 0 ? toolbarHeight : 0,
         stickyNotifications: !!stickyNotifications,

package/app-layout/visual-refresh-toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,gBAAgB,MAAM,6CAA6C,CAAC;AAE3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,uDAAuD,CAAC;AAChG,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAC;AAG9E,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,yBAAyB,EAAE,MAAM,wCAAwC,CAAC;AACnF,OAAO,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAElF,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,sBAAsB,EACtB,yBAAyB,EACzB,uBAAuB,EACvB,gBAAgB,GACjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAE5C,MAAM,6BAA6B,GAAG,KAAK,CAAC,UAAU,CACpD,CACE,EA+BC,EACD,UAAU,EACV,EAAE;;QAjCF,EACE,UAAU,EACV,aAAa,EACb,OAAO,EACP,cAAc,EACd,eAAe,EACf,UAAU,EACV,cAAc,EACd,kBAAkB,EAClB,KAAK,EACL,SAAS,EAAE,mBAAmB,EAC9B,aAAa,EACb,SAAS,EACT,UAAU,EACV,WAAW,EACX,aAAa,EACb,WAAW,EACX,aAAa,EACb,mBAAmB,EACnB,qBAAqB,EAAE,+BAA+B,EACtD,cAAc,EAAE,wBAAwB,EACxC,UAAU,EACV,cAAc,EAAE,wBAAwB,EACxC,kBAAkB,EAClB,kBAAkB,EAClB,6BAA6B,EAC7B,sBAAsB,EACtB,eAAe,EACf,eAAe,EACf,SAAS,OAEV,EADI,IAAI,cA9BT,mgBA+BC,CADQ;IAIT,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,MAAM,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,sBAAsB,EAAE,GAAG,IAAW,CAAC;IAC/G,MAAM,mBAAmB,GAAG,WAAW,CAAC,aAAa,CAAC,CAAC;IACvD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAkB,MAAM,CAAC,CAAC;IAC1E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtD,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAElE,MAAM,kBAAkB,GAAG,CAAC,IAAa,EAAE,EAAE;QAC3C,sBAAsB,CAAC,kBAAkB,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;IACvD,CAAC,CAAC;IAEF,MAAM,CAAC,SAAS,GAAG,KAAK,EAAE,YAAY,CAAC,GAAG,eAAe,CAAC,mBAAmB,EAAE,aAAa,EAAE,KAAK,EAAE;QACnG,aAAa,EAAE,WAAW;QAC1B,cAAc,EAAE,WAAW;QAC3B,aAAa,EAAE,eAAe;KAC/B,CAAC,CAAC;IACH,MAAM,aAAa,GAAG,CAAC,IAAa,EAAE,EAAE;QACtC,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,mBAAmB,CAAC,QAAQ,EAAE,CAAC;QAC/B,sBAAsB,CAAC,aAAa,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;IAClD,CAAC,CAAC;IAEF,MAAM,EACJ,OAAO,EACP,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,oBAAoB,EACpB,oBAAoB,GACrB,GAAG,UAAU,CAAC,IAAI,EAAE,UAAU,EAAE;QAC/B,UAAU;QACV,SAAS;QACT,SAAS;QACT,KAAK;QACL,UAAU;QACV,aAAa;KACd,CAAC,CAAC;IAEH,MAAM,CAAC,cAAc,GAAG,KAAK,EAAE,iBAAiB,CAAC,GAAG,eAAe,CACjE,wBAAwB,EACxB,kBAAkB,EAClB,KAAK,EACL;QACE,aAAa,EAAE,WAAW;QAC1B,cAAc,EAAE,gBAAgB;QAChC,aAAa,EAAE,oBAAoB;KACpC,CACF,CAAC;IAEF,MAAM,yBAAyB,GAAG,GAAG,EAAE;QACrC,iBAAiB,CAAC,CAAC,cAAc,CAAC,CAAC;QACnC,sBAAsB,CAAC,kBAAkB,EAAE,EAAE,IAAI,EAAE,CAAC,cAAc,EAAE,CAAC,CAAC;IACxE,CAAC,CAAC;IAEF,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,eAAe,CACvE,+BAA+B,EAC/B,6BAA6B,EAC7B,SAAS,EACT;QACE,aAAa,EAAE,WAAW;QAC1B,cAAc,EAAE,uBAAuB;QACvC,aAAa,EAAE,+BAA+B;KAC/C,CACF,CAAC;IAEF,MAAM,oCAAoC,GAAG,CAAC,MAA4C,EAAE,EAAE;QAC5F,wBAAwB,CAAC,MAAM,CAAC,CAAC;QACjC,sBAAsB,CAAC,kBAAkB,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;QAChE,sBAAsB,CAAC,6BAA6B,EAAE,MAAM,CAAC,CAAC;IAChE,CAAC,CAAC;IAEF,MAAM,CAAC,cAAc,GAAG,CAAC,EAAE,iBAAiB,CAAC,GAAG,eAAe,CAC7D,wBAAwB,EACxB,kBAAkB,EAClB,wBAAwB,CAAC,MAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,QAAQ,mCAAI,QAAQ,CAAC,EACrE,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,gBAAgB,EAAE,aAAa,EAAE,oBAAoB,EAAE,CACtG,CAAC;IAEF,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAExE,MAAM,yBAAyB,GAAG,CAAC,IAAY,EAAE,EAAE;QACjD,iBAAiB,CAAC,IAAI,CAAC,CAAC;QACxB,sBAAsB,CAAC,kBAAkB,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;IACvD,CAAC,CAAC;IAEF,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAA4B;QAC9F,SAAS,EAAE,SAAS;QACpB,SAAS,EAAE,KAAK;KACjB,CAAC,CAAC;IAEH,MAAM,mBAAmB,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,EAAE,CAAA,CAAC,CAAC;IAChE,MAAM,sBAAsB,GAAG,eAAe,CAAC,cAAc,CAAC,CAAC;IAC/D,MAAM,sBAAsB,GAAG,yBAAyB,CAAC,CAAC,qBAAqB,EAAE,cAAc,CAAC,CAAC,CAAC;IAElG,mBAAmB,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC;QACrC,0BAA0B,EAAE,GAAG,EAAE,CAAC,QAAQ,IAAI,kBAAkB,CAAC,KAAK,CAAC;QACvE,SAAS,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC;QACpC,eAAe,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC;QACzD,iBAAiB,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC;QAC3D,eAAe,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA;KAC3E,CAAC,CAAC,CAAC;IAEJ,MAAM,kBAAkB,GAAG,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,yCAAK,CAAC;IACvE,MAAM,EAAE,aAAa,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,kBAAkB,EAAE,GAAG,uBAAuB,CAAC;QACjH,gBAAgB,EAAE,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;QACrD,cAAc;QACd,eAAe;QACf,cAAc,EAAE,CAAC,CAAC,kBAAkB,IAAI,cAAc;QACtD,eAAe;QACf,SAAS;QACT,cAAc;QACd,kBAAkB,EAAE,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,QAAQ;QACnD,QAAQ;KACT,CAAC,CAAC;IAEH,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,iBAAiB,CAAC;QACrD,sBAAsB;QACtB,UAAU,EAAE,qBAAqB;QACjC,UAAU,EAAE,kBAAkB;QAC9B,cAAc;QACd,kBAAkB;QAClB,kBAAkB,EAAE,sBAAsB,CAAC,IAAI,CAAC,MAAM;QACtD,WAAW;QACX,cAAc,EAAE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,EAAE,mCAAI,IAAI;QACxC,4DAA4D;QAC5D,OAAO,EAAE,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,KAAI,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;QAC5D,oBAAoB;QACpB,eAAe,EAAE,mBAAmB,CAAC,IAAI,CAAC,MAAM;QAChD,UAAU;QACV,qBAAqB,kCAChB,sBAAsB,KACzB,MAAM,EAAE,cAAc,EACtB,SAAS,EAAE,mBAAmB,EAC9B,QAAQ,EAAE,kBAAkB,GAC7B;QACD,kBAAkB,EAAE,sBAAsB,CAAC,IAAI,CAAC,MAAM;QACtD,kBAAkB,EAAE,yBAAyB;KAC9C,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,CAAC,gBAAgB,IAAI,CAAC,CAAC,YAAY,CAAC;IACvD,MAAM,qBAAqB,GAAG,uBAAuB,CAAC,UAAU,CAAC,CAAC;IAElE,MAAM,eAAe,GAAG,qBAAqB,CAAC;QAC5C,SAAS,EAAE,SAAS,CAAC,eAAe;QACpC,iBAAiB,EAAE,UAAU,IAAI,YAAY,KAAK,MAAM;QACxD,mBAAmB,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,CAAC;QAC7C,aAAa,EAAE,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,CAAC;QACjC,mBAAmB,EAAE,CAAC,CAAC,mBAAmB;KAC3C,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAuB;QAC7C,UAAU,EAAE,qBAAqB;QACjC,aAAa;QACb,QAAQ;QACR,WAAW;QACX,qBAAqB;QACrB,mBAAmB;QACnB,cAAc;QACd,UAAU,EAAE,kBAAkB;QAC9B,sBAAsB;QACtB,YAAY;QACZ,gBAAgB;QAChB,aAAa;QACb,aAAa;QACb,OAAO,EAAE,OAAQ;QACjB,mBAAmB;QACnB,kBAAkB;QAClB,sBAAsB;QACtB,cAAc;QACd,mBAAmB;QACnB,sBAAsB;QACtB,SAAS;QACT,YAAY;QACZ,eAAe;QACf,eAAe;QACf,gBAAgB;QAChB,sBAAsB;QACtB,kBAAkB,EAAE,yBAAyB;QAC7C,kBAAkB;QAClB,oBAAoB;QACpB,oBAAoB;KACrB,CAAC;IAEF,MAAM,mBAAmB,GAA4B;QACnD,YAAY,EAAE,CAAC;QACf,YAAY,EAAE,GAAG,EAAE;YACjB,MAAM,eAAe,GACnB,QAAQ,CAAC,eAAe,CAAC,YAAY,GAAG,SAAS,CAAC,eAAe,GAAG,SAAS,CAAC,aAAa,CAAC;YAC9F,2FAA2F;YAC3F,OAAO,eAAe,GAAG,GAAG,CAAC,CAAC,CAAC,eAAe,GAAG,EAAE,CAAC,CAAC,CAAC,eAAe,GAAG,GAAG,CAAC;QAC9E,CAAC;QACD,QAAQ,EAAE,iBAAiB;QAC3B,gBAAgB,EAAE,wBAAwB;QAC1C,MAAM,EAAE,cAAc;QACtB,UAAU,EAAE,CAAC;QACb,mBAAmB,EAAE,oCAAoC;QACzD,QAAQ,EAAE,yBAAyB;QACnC,QAAQ,EAAE,yBAAyB;QACnC,QAAQ,EAAE,kBAAkB;QAC5B,UAAU,EAAE,IAAI,CAAC,EAAE,CAAC,yBAAyB,CAAC,IAAI,CAAC;QACnD,kBAAkB,EAAE,GAAG,EAAE;YACvB,yBAAyB;QAC3B,CAAC;QACD,WAAW,EAAE,CAAC;QACd,IAAI,EAAE,cAAc;QACpB,SAAS,EAAE,CAAC;QACZ,mBAAmB,EAAE,yBAAyB;QAC9C,IAAI,EAAE,sBAAsB,CAAC,IAAI;KAClC,CAAC;IAEF,OAAO,CACL;QAEG,CAAC,UAAU,IAAI,WAAW,CAAC,CAAC,CAAC,oBAAC,gBAAgB,QAAE,WAAW,CAAoB,CAAC,CAAC,CAAC,IAAI;QACvF,oBAAC,cAAc,IACb,KAAK,EAAE;gBACL,CAAC,UAAU,CAAC,uBAAuB,CAAC,EAAE,GAAG,eAAe,CAAC,MAAM,IAAI;gBACnE,CAAC,UAAU,CAAC,0BAA0B,CAAC,EAAE,GAAG,SAAS,CAAC,aAAa,IAAI;gBACvE,eAAe,EAAE,cAAc,IAAI,kBAAkB,KAAK,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;aACjG,EACD,OAAO,EACL,UAAU,IAAI,oBAAC,gBAAgB,IAAC,kBAAkB,EAAE,kBAAkB,EAAE,YAAY,EAAE,YAAY,GAAI,EAExG,aAAa,EACX,aAAa,IAAI,CACf,oBAAC,sBAAsB,IAAC,kBAAkB,EAAE,kBAAkB,IAAG,aAAa,CAA0B,CACzG,EAEH,aAAa,EAAE,aAAa;YAC5B,8EAA8E;YAC9E,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EACpC,UAAU,EAAE,kBAAkB,IAAI,oBAAC,mBAAmB,IAAC,kBAAkB,EAAE,kBAAkB,GAAI,EACjG,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,KAAK,EAAE,YAAY,IAAI,oBAAC,eAAe,IAAC,kBAAkB,EAAE,kBAAkB,GAAI,EAClF,SAAS,EAAE,CAAC,CAAC,YAAY,EACzB,UAAU,EAAE,gBAAgB,EAC5B,cAAc,EACZ,kBAAkB,KAAK,MAAM,IAAI,CAC/B,oBAAC,uBAAuB,IACtB,kBAAkB,EAAE,kBAAkB,EACtC,mBAAmB,EAAE,mBAAmB,IAEvC,UAAU,CACa,CAC3B,EAEH,gBAAgB,EACd,kBAAkB,KAAK,QAAQ,IAAI,CACjC,oBAAC,yBAAyB,IACxB,kBAAkB,EAAE,kBAAkB,EACtC,mBAAmB,EAAE,mBAAmB,IAEvC,UAAU,CACe,CAC7B,EAEH,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,eAAe,EAChC,sBAAsB,EAAE,sBAAsB,GAC9C,CACD,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,6BAA6B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useImperativeHandle, useState } from 'react';\n\nimport ScreenreaderOnly from '../../internal/components/screenreader-only';\nimport { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { useMobile } from '../../internal/hooks/use-mobile';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { useGetGlobalBreadcrumbs } from '../../internal/plugins/helpers/use-global-breadcrumbs';\nimport globalVars from '../../internal/styles/global-vars';\nimport { getSplitPanelDefaultSize } from '../../split-panel/utils/size-utils';\nimport { AppLayoutProps, AppLayoutPropsWithDefaults } from '../interfaces';\nimport { SplitPanelProviderProps } from '../split-panel';\nimport { useDrawers } from '../utils/use-drawers';\nimport { useFocusControl } from '../utils/use-focus-control';\nimport { useSplitPanelFocusControl } from '../utils/use-split-panel-focus-control';\nimport { computeHorizontalLayout, computeVerticalLayout } from './compute-layout';\nimport { AppLayoutInternals } from './interfaces';\nimport {\n  AppLayoutDrawer,\n  AppLayoutNavigation,\n  AppLayoutNotifications,\n  AppLayoutSplitPanelBottom,\n  AppLayoutSplitPanelSide,\n  AppLayoutToolbar,\n} from './internal';\nimport { useMultiAppLayout } from './multi-layout';\nimport { SkeletonLayout } from './skeleton';\n\nconst AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLayoutPropsWithDefaults>(\n  (\n    {\n      ariaLabels,\n      contentHeader,\n      content,\n      navigationOpen,\n      navigationWidth,\n      navigation,\n      navigationHide,\n      onNavigationChange,\n      tools,\n      toolsOpen: controlledToolsOpen,\n      onToolsChange,\n      toolsHide,\n      toolsWidth,\n      contentType,\n      headerVariant,\n      breadcrumbs,\n      notifications,\n      stickyNotifications,\n      splitPanelPreferences: controlledSplitPanelPreferences,\n      splitPanelOpen: controlledSplitPanelOpen,\n      splitPanel,\n      splitPanelSize: controlledSplitPanelSize,\n      onSplitPanelToggle,\n      onSplitPanelResize,\n      onSplitPanelPreferencesChange,\n      disableContentPaddings,\n      minContentWidth,\n      maxContentWidth,\n      placement,\n      ...rest\n    },\n    forwardRef\n  ) => {\n    const isMobile = useMobile();\n    const { __embeddedViewMode: embeddedViewMode, __forceDeduplicationType: forceDeduplicationType } = rest as any;\n    const splitPanelControlId = useUniqueId('split-panel');\n    const [toolbarState, setToolbarState] = useState<'show' | 'hide'>('show');\n    const [toolbarHeight, setToolbarHeight] = useState(0);\n    const [notificationsHeight, setNotificationsHeight] = useState(0);\n\n    const onNavigationToggle = (open: boolean) => {\n      fireNonCancelableEvent(onNavigationChange, { open });\n    };\n\n    const [toolsOpen = false, setToolsOpen] = useControllable(controlledToolsOpen, onToolsChange, false, {\n      componentName: 'AppLayout',\n      controlledProp: 'toolsOpen',\n      changeHandler: 'onToolsChange',\n    });\n    const onToolsToggle = (open: boolean) => {\n      setToolsOpen(open);\n      drawersFocusControl.setFocus();\n      fireNonCancelableEvent(onToolsChange, { open });\n    };\n\n    const {\n      drawers,\n      activeDrawer,\n      minDrawerSize,\n      activeDrawerSize,\n      ariaLabelsWithDrawers,\n      onActiveDrawerChange,\n      onActiveDrawerResize,\n    } = useDrawers(rest, ariaLabels, {\n      ariaLabels,\n      toolsHide,\n      toolsOpen,\n      tools,\n      toolsWidth,\n      onToolsToggle,\n    });\n\n    const [splitPanelOpen = false, setSplitPanelOpen] = useControllable(\n      controlledSplitPanelOpen,\n      onSplitPanelToggle,\n      false,\n      {\n        componentName: 'AppLayout',\n        controlledProp: 'splitPanelOpen',\n        changeHandler: 'onSplitPanelToggle',\n      }\n    );\n\n    const onSplitPanelToggleHandler = () => {\n      setSplitPanelOpen(!splitPanelOpen);\n      fireNonCancelableEvent(onSplitPanelToggle, { open: !splitPanelOpen });\n    };\n\n    const [splitPanelPreferences, setSplitPanelPreferences] = useControllable(\n      controlledSplitPanelPreferences,\n      onSplitPanelPreferencesChange,\n      undefined,\n      {\n        componentName: 'AppLayout',\n        controlledProp: 'splitPanelPreferences',\n        changeHandler: 'onSplitPanelPreferencesChange',\n      }\n    );\n\n    const onSplitPanelPreferencesChangeHandler = (detail: AppLayoutProps.SplitPanelPreferences) => {\n      setSplitPanelPreferences(detail);\n      splitPanelFocusControl.setLastInteraction({ type: 'position' });\n      fireNonCancelableEvent(onSplitPanelPreferencesChange, detail);\n    };\n\n    const [splitPanelSize = 0, setSplitPanelSize] = useControllable(\n      controlledSplitPanelSize,\n      onSplitPanelResize,\n      getSplitPanelDefaultSize(splitPanelPreferences?.position ?? 'bottom'),\n      { componentName: 'AppLayout', controlledProp: 'splitPanelSize', changeHandler: 'onSplitPanelResize' }\n    );\n\n    const [splitPanelReportedSize, setSplitPanelReportedSize] = useState(0);\n\n    const onSplitPanelResizeHandler = (size: number) => {\n      setSplitPanelSize(size);\n      fireNonCancelableEvent(onSplitPanelResize, { size });\n    };\n\n    const [splitPanelToggleConfig, setSplitPanelToggleConfig] = useState<SplitPanelSideToggleProps>({\n      ariaLabel: undefined,\n      displayed: false,\n    });\n\n    const drawersFocusControl = useFocusControl(!!activeDrawer?.id);\n    const navigationFocusControl = useFocusControl(navigationOpen);\n    const splitPanelFocusControl = useSplitPanelFocusControl([splitPanelPreferences, splitPanelOpen]);\n\n    useImperativeHandle(forwardRef, () => ({\n      closeNavigationIfNecessary: () => isMobile && onNavigationToggle(false),\n      openTools: () => onToolsToggle(true),\n      focusToolsClose: () => drawersFocusControl.setFocus(true),\n      focusActiveDrawer: () => drawersFocusControl.setFocus(true),\n      focusSplitPanel: () => splitPanelFocusControl.refs.slider.current?.focus(),\n    }));\n\n    const resolvedNavigation = navigationHide ? null : navigation ?? <></>;\n    const { maxDrawerSize, maxSplitPanelSize, splitPanelForcedPosition, splitPanelPosition } = computeHorizontalLayout({\n      activeDrawerSize: activeDrawer ? activeDrawerSize : 0,\n      splitPanelSize,\n      minContentWidth,\n      navigationOpen: !!resolvedNavigation && navigationOpen,\n      navigationWidth,\n      placement,\n      splitPanelOpen,\n      splitPanelPosition: splitPanelPreferences?.position,\n      isMobile,\n    });\n\n    const { registered, toolbarProps } = useMultiAppLayout({\n      forceDeduplicationType,\n      ariaLabels: ariaLabelsWithDrawers,\n      navigation: resolvedNavigation,\n      navigationOpen,\n      onNavigationToggle,\n      navigationFocusRef: navigationFocusControl.refs.toggle,\n      breadcrumbs,\n      activeDrawerId: activeDrawer?.id ?? null,\n      // only pass it down if there are non-empty drawers or tools\n      drawers: drawers?.length || !toolsHide ? drawers : undefined,\n      onActiveDrawerChange,\n      drawersFocusRef: drawersFocusControl.refs.toggle,\n      splitPanel,\n      splitPanelToggleProps: {\n        ...splitPanelToggleConfig,\n        active: splitPanelOpen,\n        controlId: splitPanelControlId,\n        position: splitPanelPosition,\n      },\n      splitPanelFocusRef: splitPanelFocusControl.refs.toggle,\n      onSplitPanelToggle: onSplitPanelToggleHandler,\n    });\n\n    const hasToolbar = !embeddedViewMode && !!toolbarProps;\n    const discoveredBreadcrumbs = useGetGlobalBreadcrumbs(hasToolbar);\n\n    const verticalOffsets = computeVerticalLayout({\n      topOffset: placement.insetBlockStart,\n      hasVisibleToolbar: hasToolbar && toolbarState !== 'hide',\n      notificationsHeight: notificationsHeight ?? 0,\n      toolbarHeight: toolbarHeight ?? 0,\n      stickyNotifications: !!stickyNotifications,\n    });\n\n    const appLayoutInternals: AppLayoutInternals = {\n      ariaLabels: ariaLabelsWithDrawers,\n      headerVariant,\n      isMobile,\n      breadcrumbs,\n      discoveredBreadcrumbs,\n      stickyNotifications,\n      navigationOpen,\n      navigation: resolvedNavigation,\n      navigationFocusControl,\n      activeDrawer,\n      activeDrawerSize,\n      minDrawerSize,\n      maxDrawerSize,\n      drawers: drawers!,\n      drawersFocusControl,\n      splitPanelPosition,\n      splitPanelToggleConfig,\n      splitPanelOpen,\n      splitPanelControlId,\n      splitPanelFocusControl,\n      placement,\n      toolbarState,\n      setToolbarState,\n      verticalOffsets,\n      setToolbarHeight,\n      setNotificationsHeight,\n      onSplitPanelToggle: onSplitPanelToggleHandler,\n      onNavigationToggle,\n      onActiveDrawerChange,\n      onActiveDrawerResize,\n    };\n\n    const splitPanelInternals: SplitPanelProviderProps = {\n      bottomOffset: 0,\n      getMaxHeight: () => {\n        const availableHeight =\n          document.documentElement.clientHeight - placement.insetBlockStart - placement.insetBlockEnd;\n        // If the page is likely zoomed in at 200%, allow the split panel to fill the content area.\n        return availableHeight < 400 ? availableHeight - 40 : availableHeight - 250;\n      },\n      maxWidth: maxSplitPanelSize,\n      isForcedPosition: splitPanelForcedPosition,\n      isOpen: splitPanelOpen,\n      leftOffset: 0,\n      onPreferencesChange: onSplitPanelPreferencesChangeHandler,\n      onResize: onSplitPanelResizeHandler,\n      onToggle: onSplitPanelToggleHandler,\n      position: splitPanelPosition,\n      reportSize: size => setSplitPanelReportedSize(size),\n      reportHeaderHeight: () => {\n        /*unused in this design*/\n      },\n      rightOffset: 0,\n      size: splitPanelSize,\n      topOffset: 0,\n      setSplitPanelToggle: setSplitPanelToggleConfig,\n      refs: splitPanelFocusControl.refs,\n    };\n\n    return (\n      <>\n        {/* Rendering a hidden copy of breadcrumbs to trigger their deduplication */}\n        {!hasToolbar && breadcrumbs ? <ScreenreaderOnly>{breadcrumbs}</ScreenreaderOnly> : null}\n        <SkeletonLayout\n          style={{\n            [globalVars.stickyVerticalTopOffset]: `${verticalOffsets.header}px`,\n            [globalVars.stickyVerticalBottomOffset]: `${placement.insetBlockEnd}px`,\n            paddingBlockEnd: splitPanelOpen && splitPanelPosition === 'bottom' ? splitPanelReportedSize : '',\n          }}\n          toolbar={\n            hasToolbar && <AppLayoutToolbar appLayoutInternals={appLayoutInternals} toolbarProps={toolbarProps} />\n          }\n          notifications={\n            notifications && (\n              <AppLayoutNotifications appLayoutInternals={appLayoutInternals}>{notifications}</AppLayoutNotifications>\n            )\n          }\n          contentHeader={contentHeader}\n          // delay rendering the content until registration of this instance is complete\n          content={registered ? content : null}\n          navigation={resolvedNavigation && <AppLayoutNavigation appLayoutInternals={appLayoutInternals} />}\n          navigationOpen={navigationOpen}\n          navigationWidth={navigationWidth}\n          tools={activeDrawer && <AppLayoutDrawer appLayoutInternals={appLayoutInternals} />}\n          toolsOpen={!!activeDrawer}\n          toolsWidth={activeDrawerSize}\n          sideSplitPanel={\n            splitPanelPosition === 'side' && (\n              <AppLayoutSplitPanelSide\n                appLayoutInternals={appLayoutInternals}\n                splitPanelInternals={splitPanelInternals}\n              >\n                {splitPanel}\n              </AppLayoutSplitPanelSide>\n            )\n          }\n          bottomSplitPanel={\n            splitPanelPosition === 'bottom' && (\n              <AppLayoutSplitPanelBottom\n                appLayoutInternals={appLayoutInternals}\n                splitPanelInternals={splitPanelInternals}\n              >\n                {splitPanel}\n              </AppLayoutSplitPanelBottom>\n            )\n          }\n          splitPanelOpen={splitPanelOpen}\n          placement={placement}\n          contentType={contentType}\n          maxContentWidth={maxContentWidth}\n          disableContentPaddings={disableContentPaddings}\n        />\n      </>\n    );\n  }\n);\n\nexport default AppLayoutVisualRefreshToolbar;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/index.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, { useImperativeHandle, useState } from 'react';\n\nimport ScreenreaderOnly from '../../internal/components/screenreader-only';\nimport { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { useMobile } from '../../internal/hooks/use-mobile';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { useGetGlobalBreadcrumbs } from '../../internal/plugins/helpers/use-global-breadcrumbs';\nimport globalVars from '../../internal/styles/global-vars';\nimport { getSplitPanelDefaultSize } from '../../split-panel/utils/size-utils';\nimport { AppLayoutProps, AppLayoutPropsWithDefaults } from '../interfaces';\nimport { SplitPanelProviderProps } from '../split-panel';\nimport { useDrawers } from '../utils/use-drawers';\nimport { useFocusControl } from '../utils/use-focus-control';\nimport { useSplitPanelFocusControl } from '../utils/use-split-panel-focus-control';\nimport { computeHorizontalLayout, computeVerticalLayout } from './compute-layout';\nimport { AppLayoutInternals } from './interfaces';\nimport {\n  AppLayoutDrawer,\n  AppLayoutNavigation,\n  AppLayoutNotifications,\n  AppLayoutSplitPanelBottom,\n  AppLayoutSplitPanelSide,\n  AppLayoutToolbar,\n} from './internal';\nimport { useMultiAppLayout } from './multi-layout';\nimport { SkeletonLayout } from './skeleton';\n\nconst AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLayoutPropsWithDefaults>(\n  (\n    {\n      ariaLabels,\n      contentHeader,\n      content,\n      navigationOpen,\n      navigationWidth,\n      navigation,\n      navigationHide,\n      onNavigationChange,\n      tools,\n      toolsOpen: controlledToolsOpen,\n      onToolsChange,\n      toolsHide,\n      toolsWidth,\n      contentType,\n      headerVariant,\n      breadcrumbs,\n      notifications,\n      stickyNotifications,\n      splitPanelPreferences: controlledSplitPanelPreferences,\n      splitPanelOpen: controlledSplitPanelOpen,\n      splitPanel,\n      splitPanelSize: controlledSplitPanelSize,\n      onSplitPanelToggle,\n      onSplitPanelResize,\n      onSplitPanelPreferencesChange,\n      disableContentPaddings,\n      minContentWidth,\n      maxContentWidth,\n      placement,\n      ...rest\n    },\n    forwardRef\n  ) => {\n    const isMobile = useMobile();\n    const { __embeddedViewMode: embeddedViewMode, __forceDeduplicationType: forceDeduplicationType } = rest as any;\n    const splitPanelControlId = useUniqueId('split-panel');\n    const [toolbarState, setToolbarState] = useState<'show' | 'hide'>('show');\n    const [toolbarHeight, setToolbarHeight] = useState(0);\n    const [notificationsHeight, setNotificationsHeight] = useState(0);\n\n    const onNavigationToggle = (open: boolean) => {\n      fireNonCancelableEvent(onNavigationChange, { open });\n    };\n\n    const [toolsOpen = false, setToolsOpen] = useControllable(controlledToolsOpen, onToolsChange, false, {\n      componentName: 'AppLayout',\n      controlledProp: 'toolsOpen',\n      changeHandler: 'onToolsChange',\n    });\n    const onToolsToggle = (open: boolean) => {\n      setToolsOpen(open);\n      drawersFocusControl.setFocus();\n      fireNonCancelableEvent(onToolsChange, { open });\n    };\n\n    const {\n      drawers,\n      activeDrawer,\n      minDrawerSize,\n      activeDrawerSize,\n      ariaLabelsWithDrawers,\n      onActiveDrawerChange,\n      onActiveDrawerResize,\n    } = useDrawers(rest, ariaLabels, {\n      ariaLabels,\n      toolsHide,\n      toolsOpen,\n      tools,\n      toolsWidth,\n      onToolsToggle,\n    });\n\n    const [splitPanelOpen = false, setSplitPanelOpen] = useControllable(\n      controlledSplitPanelOpen,\n      onSplitPanelToggle,\n      false,\n      {\n        componentName: 'AppLayout',\n        controlledProp: 'splitPanelOpen',\n        changeHandler: 'onSplitPanelToggle',\n      }\n    );\n\n    const onSplitPanelToggleHandler = () => {\n      setSplitPanelOpen(!splitPanelOpen);\n      fireNonCancelableEvent(onSplitPanelToggle, { open: !splitPanelOpen });\n    };\n\n    const [splitPanelPreferences, setSplitPanelPreferences] = useControllable(\n      controlledSplitPanelPreferences,\n      onSplitPanelPreferencesChange,\n      undefined,\n      {\n        componentName: 'AppLayout',\n        controlledProp: 'splitPanelPreferences',\n        changeHandler: 'onSplitPanelPreferencesChange',\n      }\n    );\n\n    const onSplitPanelPreferencesChangeHandler = (detail: AppLayoutProps.SplitPanelPreferences) => {\n      setSplitPanelPreferences(detail);\n      splitPanelFocusControl.setLastInteraction({ type: 'position' });\n      fireNonCancelableEvent(onSplitPanelPreferencesChange, detail);\n    };\n\n    const [splitPanelSize = 0, setSplitPanelSize] = useControllable(\n      controlledSplitPanelSize,\n      onSplitPanelResize,\n      getSplitPanelDefaultSize(splitPanelPreferences?.position ?? 'bottom'),\n      { componentName: 'AppLayout', controlledProp: 'splitPanelSize', changeHandler: 'onSplitPanelResize' }\n    );\n\n    const [splitPanelReportedSize, setSplitPanelReportedSize] = useState(0);\n\n    const onSplitPanelResizeHandler = (size: number) => {\n      setSplitPanelSize(size);\n      fireNonCancelableEvent(onSplitPanelResize, { size });\n    };\n\n    const [splitPanelToggleConfig, setSplitPanelToggleConfig] = useState<SplitPanelSideToggleProps>({\n      ariaLabel: undefined,\n      displayed: false,\n    });\n\n    const drawersFocusControl = useFocusControl(!!activeDrawer?.id);\n    const navigationFocusControl = useFocusControl(navigationOpen);\n    const splitPanelFocusControl = useSplitPanelFocusControl([splitPanelPreferences, splitPanelOpen]);\n\n    useImperativeHandle(forwardRef, () => ({\n      closeNavigationIfNecessary: () => isMobile && onNavigationToggle(false),\n      openTools: () => onToolsToggle(true),\n      focusToolsClose: () => drawersFocusControl.setFocus(true),\n      focusActiveDrawer: () => drawersFocusControl.setFocus(true),\n      focusSplitPanel: () => splitPanelFocusControl.refs.slider.current?.focus(),\n    }));\n\n    const resolvedNavigation = navigationHide ? null : navigation ?? <></>;\n    const { maxDrawerSize, maxSplitPanelSize, splitPanelForcedPosition, splitPanelPosition } = computeHorizontalLayout({\n      activeDrawerSize: activeDrawer ? activeDrawerSize : 0,\n      splitPanelSize,\n      minContentWidth,\n      navigationOpen: !!resolvedNavigation && navigationOpen,\n      navigationWidth,\n      placement,\n      splitPanelOpen,\n      splitPanelPosition: splitPanelPreferences?.position,\n      isMobile,\n    });\n\n    const { registered, toolbarProps } = useMultiAppLayout({\n      forceDeduplicationType,\n      ariaLabels: ariaLabelsWithDrawers,\n      navigation: resolvedNavigation,\n      navigationOpen,\n      onNavigationToggle,\n      navigationFocusRef: navigationFocusControl.refs.toggle,\n      breadcrumbs,\n      activeDrawerId: activeDrawer?.id ?? null,\n      // only pass it down if there are non-empty drawers or tools\n      drawers: drawers?.length || !toolsHide ? drawers : undefined,\n      onActiveDrawerChange,\n      drawersFocusRef: drawersFocusControl.refs.toggle,\n      splitPanel,\n      splitPanelToggleProps: {\n        ...splitPanelToggleConfig,\n        active: splitPanelOpen,\n        controlId: splitPanelControlId,\n        position: splitPanelPosition,\n      },\n      splitPanelFocusRef: splitPanelFocusControl.refs.toggle,\n      onSplitPanelToggle: onSplitPanelToggleHandler,\n    });\n\n    const hasToolbar = !embeddedViewMode && !!toolbarProps;\n    const discoveredBreadcrumbs = useGetGlobalBreadcrumbs(hasToolbar);\n\n    const verticalOffsets = computeVerticalLayout({\n      topOffset: placement.insetBlockStart,\n      hasVisibleToolbar: hasToolbar && toolbarState !== 'hide' && !isMobile,\n      notificationsHeight: notificationsHeight ?? 0,\n      toolbarHeight: toolbarHeight ?? 0,\n      stickyNotifications: !!stickyNotifications,\n    });\n\n    const appLayoutInternals: AppLayoutInternals = {\n      ariaLabels: ariaLabelsWithDrawers,\n      headerVariant,\n      isMobile,\n      breadcrumbs,\n      discoveredBreadcrumbs,\n      stickyNotifications,\n      navigationOpen,\n      navigation: resolvedNavigation,\n      navigationFocusControl,\n      activeDrawer,\n      activeDrawerSize,\n      minDrawerSize,\n      maxDrawerSize,\n      drawers: drawers!,\n      drawersFocusControl,\n      splitPanelPosition,\n      splitPanelToggleConfig,\n      splitPanelOpen,\n      splitPanelControlId,\n      splitPanelFocusControl,\n      placement,\n      toolbarState,\n      setToolbarState,\n      verticalOffsets,\n      setToolbarHeight,\n      setNotificationsHeight,\n      onSplitPanelToggle: onSplitPanelToggleHandler,\n      onNavigationToggle,\n      onActiveDrawerChange,\n      onActiveDrawerResize,\n    };\n\n    const splitPanelInternals: SplitPanelProviderProps = {\n      bottomOffset: 0,\n      getMaxHeight: () => {\n        const availableHeight =\n          document.documentElement.clientHeight - placement.insetBlockStart - placement.insetBlockEnd;\n        // If the page is likely zoomed in at 200%, allow the split panel to fill the content area.\n        return availableHeight < 400 ? availableHeight - 40 : availableHeight - 250;\n      },\n      maxWidth: maxSplitPanelSize,\n      isForcedPosition: splitPanelForcedPosition,\n      isOpen: splitPanelOpen,\n      leftOffset: 0,\n      onPreferencesChange: onSplitPanelPreferencesChangeHandler,\n      onResize: onSplitPanelResizeHandler,\n      onToggle: onSplitPanelToggleHandler,\n      position: splitPanelPosition,\n      reportSize: size => setSplitPanelReportedSize(size),\n      reportHeaderHeight: () => {\n        /*unused in this design*/\n      },\n      rightOffset: 0,\n      size: splitPanelSize,\n      topOffset: 0,\n      setSplitPanelToggle: setSplitPanelToggleConfig,\n      refs: splitPanelFocusControl.refs,\n    };\n\n    return (\n      <>\n        {/* Rendering a hidden copy of breadcrumbs to trigger their deduplication */}\n        {!hasToolbar && breadcrumbs ? <ScreenreaderOnly>{breadcrumbs}</ScreenreaderOnly> : null}\n        <SkeletonLayout\n          style={{\n            [globalVars.stickyVerticalTopOffset]: `${verticalOffsets.header}px`,\n            [globalVars.stickyVerticalBottomOffset]: `${placement.insetBlockEnd}px`,\n            paddingBlockEnd: splitPanelOpen && splitPanelPosition === 'bottom' ? splitPanelReportedSize : '',\n          }}\n          toolbar={\n            hasToolbar && <AppLayoutToolbar appLayoutInternals={appLayoutInternals} toolbarProps={toolbarProps} />\n          }\n          notifications={\n            notifications && (\n              <AppLayoutNotifications appLayoutInternals={appLayoutInternals}>{notifications}</AppLayoutNotifications>\n            )\n          }\n          contentHeader={contentHeader}\n          // delay rendering the content until registration of this instance is complete\n          content={registered ? content : null}\n          navigation={resolvedNavigation && <AppLayoutNavigation appLayoutInternals={appLayoutInternals} />}\n          navigationOpen={navigationOpen}\n          navigationWidth={navigationWidth}\n          tools={activeDrawer && <AppLayoutDrawer appLayoutInternals={appLayoutInternals} />}\n          toolsOpen={!!activeDrawer}\n          toolsWidth={activeDrawerSize}\n          sideSplitPanel={\n            splitPanelPosition === 'side' && (\n              <AppLayoutSplitPanelSide\n                appLayoutInternals={appLayoutInternals}\n                splitPanelInternals={splitPanelInternals}\n              >\n                {splitPanel}\n              </AppLayoutSplitPanelSide>\n            )\n          }\n          bottomSplitPanel={\n            splitPanelPosition === 'bottom' && (\n              <AppLayoutSplitPanelBottom\n                appLayoutInternals={appLayoutInternals}\n                splitPanelInternals={splitPanelInternals}\n              >\n                {splitPanel}\n              </AppLayoutSplitPanelBottom>\n            )\n          }\n          splitPanelOpen={splitPanelOpen}\n          placement={placement}\n          contentType={contentType}\n          maxContentWidth={maxContentWidth}\n          disableContentPaddings={disableContentPaddings}\n        />\n      </>\n    );\n  }\n);\n\nexport default AppLayoutVisualRefreshToolbar;\n"]}

package/app-layout/visual-refresh-toolbar/navigation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/navigation/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAKnD,UAAU,sCAAsC;IAC9C,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAED,wBAAgB,iCAAiC,CAAC,EAAE,kBAAkB,EAAE,EAAE,sCAAsC,eAiD/G;AAED,eAAO,MAAM,mCAAmC,6GAA+D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/navigation/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAMnD,UAAU,sCAAsC;IAC9C,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAED,wBAAgB,iCAAiC,CAAC,EAAE,kBAAkB,EAAE,EAAE,sCAAsC,eA4D/G;AAED,eAAO,MAAM,mCAAmC,6GAA+D,CAAC"}

package/app-layout/visual-refresh-toolbar/navigation/index.js

@@ -5,11 +5,13 @@ import clsx from 'clsx';
 import { InternalButton } from '../../../button/internal';
 import { findUpUntil } from '../../../internal/utils/dom';
 import { createWidgetizedComponent } from '../../../internal/widgets';
+import sharedStyles from '../../resize/styles.css.js';
 import testutilStyles from '../../test-classes/styles.css.js';
 import styles from './styles.css.js';
 export function AppLayoutNavigationImplementation({ appLayoutInternals }) {
-    var _a, _b;
-    const { ariaLabels, onNavigationToggle, isMobile, navigationOpen, navigation, navigationFocusControl, placement } = appLayoutInternals;
+    var _a, _b, _c;
+    const { ariaLabels, onNavigationToggle, isMobile, navigationOpen, navigation, navigationFocusControl, placement, verticalOffsets, } = appLayoutInternals;
+    const drawersTopOffset = (_a = verticalOffsets.drawers) !== null && _a !== void 0 ? _a : placement.insetBlockStart;
     // Close the Navigation drawer on mobile when a user clicks a link inside.
     const onNavigationClick = (event) => {
         const hasLink = findUpUntil(event.target, node => node.tagName === 'A' && !!node.href);
@@ -17,16 +19,16 @@ export function AppLayoutNavigationImplementation({ appLayoutInternals }) {
             onNavigationToggle(false);
         }
     };
-    return (React.createElement("nav", { "aria-label": (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigation) !== null && _a !== void 0 ? _a : undefined, className: clsx(styles.navigation, {
+    return (React.createElement("nav", { "aria-label": (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigation) !== null && _b !== void 0 ? _b : undefined, className: clsx(styles.navigation, {
             [styles['is-navigation-open']]: navigationOpen,
             [testutilStyles['drawer-closed']]: !navigationOpen,
-        }, testutilStyles.navigation), "aria-hidden": !navigationOpen, onClick: onNavigationClick, style: {
-            blockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,
-            insetBlockStart: placement.insetBlockStart,
+        }, testutilStyles.navigation, sharedStyles['with-motion']), "aria-hidden": !navigationOpen, onClick: onNavigationClick, style: {
+            blockSize: `calc(100vh - ${drawersTopOffset}px - ${placement.insetBlockEnd}px)`,
+            insetBlockStart: drawersTopOffset,
         } },
         React.createElement("div", { className: clsx(styles['animated-content']) },
             React.createElement("div", { className: clsx(styles['hide-navigation']) },
-                React.createElement(InternalButton, { ariaLabel: (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationClose) !== null && _b !== void 0 ? _b : undefined, iconName: isMobile ? 'close' : 'angle-left', onClick: () => onNavigationToggle(false), variant: "icon", formAction: "none", className: testutilStyles['navigation-close'], ref: navigationFocusControl.refs.close })),
+                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: () => onNavigationToggle(false), variant: "icon", formAction: "none", className: testutilStyles['navigation-close'], ref: navigationFocusControl.refs.close })),
             navigation)));
 }
 export const createWidgetizedAppLayoutNavigation = createWidgetizedComponent(AppLayoutNavigationImplementation);

package/app-layout/visual-refresh-toolbar/navigation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/navigation/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAGtE,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAMrC,MAAM,UAAU,iCAAiC,CAAC,EAAE,kBAAkB,EAA0C;;IAC9G,MAAM,EAAE,UAAU,EAAE,kBAAkB,EAAE,QAAQ,EAAE,cAAc,EAAE,UAAU,EAAE,sBAAsB,EAAE,SAAS,EAAE,GAC/G,kBAAkB,CAAC;IAErB,0EAA0E;IAC1E,MAAM,iBAAiB,GAAG,CAAC,KAAuB,EAAE,EAAE;QACpD,MAAM,OAAO,GAAG,WAAW,CACzB,KAAK,CAAC,MAAqB,EAC3B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,GAAG,IAAI,CAAC,CAAE,IAA0B,CAAC,IAAI,CACnE,CAAC;QACF,IAAI,OAAO,IAAI,QAAQ,EAAE;YACvB,kBAAkB,CAAC,KAAK,CAAC,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,2CACc,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,mCAAI,SAAS,EAC/C,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,EACjB;YACE,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,cAAc;YAC9C,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,cAAc;SACnD,EACD,cAAc,CAAC,UAAU,CAC1B,iBACY,CAAC,cAAc,EAC5B,OAAO,EAAE,iBAAiB,EAC1B,KAAK,EAAE;YACL,SAAS,EAAE,gBAAgB,SAAS,CAAC,eAAe,QAAQ,SAAS,CAAC,aAAa,KAAK;YACxF,eAAe,EAAE,SAAS,CAAC,eAAe;SAC3C;QAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;YAC9C,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;gBAC7C,oBAAC,cAAc,IACb,SAAS,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,eAAe,mCAAI,SAAS,EACnD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,EACxC,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,cAAc,CAAC,kBAAkB,CAAC,EAC7C,GAAG,EAAE,sBAAsB,CAAC,IAAI,CAAC,KAAK,GACtC,CACE;YACL,UAAU,CACP,CACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,mCAAmC,GAAG,yBAAyB,CAAC,iCAAiC,CAAC,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';\n\nimport { InternalButton } from '../../../button/internal';\nimport { findUpUntil } from '../../../internal/utils/dom';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutInternals } from '../interfaces';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutNavigationImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutNavigationImplementation({ appLayoutInternals }: AppLayoutNavigationImplementationProps) {\n  const { ariaLabels, onNavigationToggle, isMobile, navigationOpen, navigation, navigationFocusControl, placement } =\n    appLayoutInternals;\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      onNavigationToggle(false);\n    }\n  };\n\n  return (\n    <nav\n      aria-label={ariaLabels?.navigation ?? undefined}\n      className={clsx(\n        styles.navigation,\n        {\n          [styles['is-navigation-open']]: navigationOpen,\n          [testutilStyles['drawer-closed']]: !navigationOpen,\n        },\n        testutilStyles.navigation\n      )}\n      aria-hidden={!navigationOpen}\n      onClick={onNavigationClick}\n      style={{\n        blockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,\n        insetBlockStart: placement.insetBlockStart,\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={() => onNavigationToggle(false)}\n            variant=\"icon\"\n            formAction=\"none\"\n            className={testutilStyles['navigation-close']}\n            ref={navigationFocusControl.refs.close}\n          />\n        </div>\n        {navigation}\n      </div>\n    </nav>\n  );\n}\n\nexport const createWidgetizedAppLayoutNavigation = createWidgetizedComponent(AppLayoutNavigationImplementation);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/navigation/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAGtE,OAAO,YAAY,MAAM,4BAA4B,CAAC;AACtD,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAMrC,MAAM,UAAU,iCAAiC,CAAC,EAAE,kBAAkB,EAA0C;;IAC9G,MAAM,EACJ,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,cAAc,EACd,UAAU,EACV,sBAAsB,EACtB,SAAS,EACT,eAAe,GAChB,GAAG,kBAAkB,CAAC;IAEvB,MAAM,gBAAgB,GAAG,MAAA,eAAe,CAAC,OAAO,mCAAI,SAAS,CAAC,eAAe,CAAC;IAE9E,0EAA0E;IAC1E,MAAM,iBAAiB,GAAG,CAAC,KAAuB,EAAE,EAAE;QACpD,MAAM,OAAO,GAAG,WAAW,CACzB,KAAK,CAAC,MAAqB,EAC3B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,GAAG,IAAI,CAAC,CAAE,IAA0B,CAAC,IAAI,CACnE,CAAC;QACF,IAAI,OAAO,IAAI,QAAQ,EAAE;YACvB,kBAAkB,CAAC,KAAK,CAAC,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,2CACc,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,mCAAI,SAAS,EAC/C,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,EACjB;YACE,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,cAAc;YAC9C,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,cAAc;SACnD,EACD,cAAc,CAAC,UAAU,EACzB,YAAY,CAAC,aAAa,CAAC,CAC5B,iBACY,CAAC,cAAc,EAC5B,OAAO,EAAE,iBAAiB,EAC1B,KAAK,EAAE;YACL,SAAS,EAAE,gBAAgB,gBAAgB,QAAQ,SAAS,CAAC,aAAa,KAAK;YAC/E,eAAe,EAAE,gBAAgB;SAClC;QAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;YAC9C,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;gBAC7C,oBAAC,cAAc,IACb,SAAS,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,eAAe,mCAAI,SAAS,EACnD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,EACxC,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,cAAc,CAAC,kBAAkB,CAAC,EAC7C,GAAG,EAAE,sBAAsB,CAAC,IAAI,CAAC,KAAK,GACtC,CACE;YACL,UAAU,CACP,CACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,mCAAmC,GAAG,yBAAyB,CAAC,iCAAiC,CAAC,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';\n\nimport { InternalButton } from '../../../button/internal';\nimport { findUpUntil } from '../../../internal/utils/dom';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutInternals } from '../interfaces';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutNavigationImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutNavigationImplementation({ appLayoutInternals }: AppLayoutNavigationImplementationProps) {\n  const {\n    ariaLabels,\n    onNavigationToggle,\n    isMobile,\n    navigationOpen,\n    navigation,\n    navigationFocusControl,\n    placement,\n    verticalOffsets,\n  } = appLayoutInternals;\n\n  const drawersTopOffset = verticalOffsets.drawers ?? placement.insetBlockStart;\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      onNavigationToggle(false);\n    }\n  };\n\n  return (\n    <nav\n      aria-label={ariaLabels?.navigation ?? undefined}\n      className={clsx(\n        styles.navigation,\n        {\n          [styles['is-navigation-open']]: navigationOpen,\n          [testutilStyles['drawer-closed']]: !navigationOpen,\n        },\n        testutilStyles.navigation,\n        sharedStyles['with-motion']\n      )}\n      aria-hidden={!navigationOpen}\n      onClick={onNavigationClick}\n      style={{\n        blockSize: `calc(100vh - ${drawersTopOffset}px - ${placement.insetBlockEnd}px)`,\n        insetBlockStart: drawersTopOffset,\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={() => onNavigationToggle(false)}\n            variant=\"icon\"\n            formAction=\"none\"\n            className={testutilStyles['navigation-close']}\n            ref={navigationFocusControl.refs.close}\n          />\n        </div>\n        {navigation}\n      </div>\n    </nav>\n  );\n}\n\nexport const createWidgetizedAppLayoutNavigation = createWidgetizedComponent(AppLayoutNavigationImplementation);\n"]}

package/app-layout/visual-refresh-toolbar/navigation/styles.css.js

@@ -1,9 +1,9 @@
 
     import './styles.scoped.css';
     export default {
-  "navigation": "awsui_navigation_2p2ab_19x0t_149",
-  "is-navigation-open": "awsui_is-navigation-open_2p2ab_19x0t_167",
-  "animated-content": "awsui_animated-content_2p2ab_19x0t_171",
-  "hide-navigation": "awsui_hide-navigation_2p2ab_19x0t_180"
+  "navigation": "awsui_navigation_2p2ab_1hmw6_149",
+  "is-navigation-open": "awsui_is-navigation-open_2p2ab_1hmw6_167",
+  "animated-content": "awsui_animated-content_2p2ab_1hmw6_171",
+  "hide-navigation": "awsui_hide-navigation_2p2ab_1hmw6_181"
 };
   

package/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css

@@ -146,8 +146,9 @@ 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
 */
-.awsui_navigation_2p2ab_19x0t_149:not(#\9) {
+.awsui_navigation_2p2ab_1hmw6_149:not(#\9) {
   position: sticky;
+  z-index: 830;
   background-color: var(--color-background-container-content-4un1ap, #ffffff);
   inset-block-end: 0;
   block-size: 100%;
@@ -157,27 +158,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   overscroll-behavior-y: contain;
   word-wrap: break-word;
   pointer-events: auto;
-  z-index: 1001;
   /*
   A non-semantic node is added with a fixed width equal to the final Navigation
   width. This will create the visual appearance of horizontal movement and
   prevent unwanted text wrapping.
   */
 }
-.awsui_navigation_2p2ab_19x0t_149:not(#\9):not(.awsui_is-navigation-open_2p2ab_19x0t_167) {
+.awsui_navigation_2p2ab_1hmw6_149:not(#\9):not(.awsui_is-navigation-open_2p2ab_1hmw6_167) {
   inline-size: 0px;
   display: none;
 }
-.awsui_navigation_2p2ab_19x0t_149 > .awsui_animated-content_2p2ab_19x0t_171:not(#\9) {
+.awsui_navigation_2p2ab_1hmw6_149 > .awsui_animated-content_2p2ab_1hmw6_171:not(#\9) {
   inline-size: var(--awsui-navigation-width-g964ok);
 }
 @media (max-width: 688px) {
-  .awsui_navigation_2p2ab_19x0t_149:not(#\9) {
+  .awsui_navigation_2p2ab_1hmw6_149:not(#\9) {
     --awsui-navigation-width-g964ok: 100vw;
+    z-index: 1001;
   }
 }
 
-.awsui_hide-navigation_2p2ab_19x0t_180:not(#\9) {
+.awsui_hide-navigation_2p2ab_1hmw6_181:not(#\9) {
   position: absolute;
   inset-inline-end: var(--space-m-udix3p, 16px);
   inset-block-start: 10px;

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

@@ -2,9 +2,9 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "navigation": "awsui_navigation_2p2ab_19x0t_149",
-  "is-navigation-open": "awsui_is-navigation-open_2p2ab_19x0t_167",
-  "animated-content": "awsui_animated-content_2p2ab_19x0t_171",
-  "hide-navigation": "awsui_hide-navigation_2p2ab_19x0t_180"
+  "navigation": "awsui_navigation_2p2ab_1hmw6_149",
+  "is-navigation-open": "awsui_is-navigation-open_2p2ab_1hmw6_167",
+  "animated-content": "awsui_animated-content_2p2ab_1hmw6_171",
+  "hide-navigation": "awsui_hide-navigation_2p2ab_1hmw6_181"
 };
   

package/app-layout/visual-refresh-toolbar/skeleton/index.js

@@ -19,8 +19,8 @@ export function SkeletonLayout({ style, notifications, contentHeader, content, n
             [customCssProps.navigationWidth]: `${navigationWidth}px`,
             [customCssProps.toolsWidth]: `${toolsWidth}px`,
         } },
-        navigation && (React.createElement("div", { className: clsx(styles.navigation, !navigationOpen && styles['panel-hidden'], toolsOpen && styles['unfocusable-mobile'], sharedStyles['with-motion']) }, navigation)),
         toolbar,
+        navigation && (React.createElement("div", { className: clsx(styles.navigation, !navigationOpen && styles['panel-hidden'], toolsOpen && styles['unfocusable-mobile'], sharedStyles['with-motion']) }, navigation)),
         React.createElement("main", { className: clsx(styles['main-landmark'], anyPanelOpen && styles['unfocusable-mobile']) },
             notifications,
             React.createElement("div", { className: clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings }), style: style },

package/app-layout/visual-refresh-toolbar/skeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/index.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';\n\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport { AppLayoutPropsWithDefaults } from '../../interfaces';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nconst contentTypeCustomWidths: Array<string | undefined> = ['dashboard', 'cards', 'table'];\n\ninterface SkeletonLayoutProps\n  extends Pick<\n    AppLayoutPropsWithDefaults,\n    | 'notifications'\n    | 'contentHeader'\n    | 'content'\n    | 'contentType'\n    | 'maxContentWidth'\n    | 'disableContentPaddings'\n    | 'navigation'\n    | 'navigationOpen'\n    | 'navigationWidth'\n    | 'tools'\n    | 'toolsOpen'\n    | 'toolsWidth'\n    | 'placement'\n  > {\n  style?: React.CSSProperties;\n  toolbar?: React.ReactNode;\n  splitPanelOpen?: boolean;\n  sideSplitPanel?: React.ReactNode;\n  bottomSplitPanel?: React.ReactNode;\n}\n\nexport function SkeletonLayout({\n  style,\n  notifications,\n  contentHeader,\n  content,\n  navigation,\n  navigationOpen,\n  navigationWidth,\n  tools,\n  toolsOpen,\n  toolsWidth,\n  toolbar,\n  sideSplitPanel,\n  bottomSplitPanel,\n  splitPanelOpen,\n  placement,\n  contentType,\n  maxContentWidth,\n  disableContentPaddings,\n}: SkeletonLayoutProps) {\n  const isMaxWidth = maxContentWidth === Number.MAX_VALUE || maxContentWidth === Number.MAX_SAFE_INTEGER;\n  const anyPanelOpen = navigationOpen || toolsOpen;\n  return (\n    <div\n      className={clsx(styles.root, testutilStyles.root, {\n        [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),\n        [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',\n      })}\n      style={{\n        minBlockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,\n        [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',\n        [customCssProps.navigationWidth]: `${navigationWidth}px`,\n        [customCssProps.toolsWidth]: `${toolsWidth}px`,\n      }}\n    >\n      {navigation && (\n        <div\n          className={clsx(\n            styles.navigation,\n            !navigationOpen && styles['panel-hidden'],\n            toolsOpen && styles['unfocusable-mobile'],\n            sharedStyles['with-motion']\n          )}\n        >\n          {navigation}\n        </div>\n      )}\n      {toolbar}\n      <main className={clsx(styles['main-landmark'], anyPanelOpen && styles['unfocusable-mobile'])}>\n        {notifications}\n        <div className={clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings })} style={style}>\n          {contentHeader && <div className={styles['content-header']}>{contentHeader}</div>}\n          <div className={clsx(styles.content, testutilStyles.content)}>{content}</div>\n        </div>\n        {bottomSplitPanel && (\n          <div className={clsx(styles['split-panel-bottom'])} style={{ insetBlockEnd: placement.insetBlockEnd }}>\n            {bottomSplitPanel}\n          </div>\n        )}\n      </main>\n      {sideSplitPanel && (\n        <div className={clsx(styles['split-panel-side'], !splitPanelOpen && styles['panel-hidden'])}>\n          {sideSplitPanel}\n        </div>\n      )}\n      <div className={clsx(styles.tools, !toolsOpen && styles['panel-hidden'], sharedStyles['with-motion'])}>\n        {tools}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/index.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';\n\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport { AppLayoutPropsWithDefaults } from '../../interfaces';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nconst contentTypeCustomWidths: Array<string | undefined> = ['dashboard', 'cards', 'table'];\n\ninterface SkeletonLayoutProps\n  extends Pick<\n    AppLayoutPropsWithDefaults,\n    | 'notifications'\n    | 'contentHeader'\n    | 'content'\n    | 'contentType'\n    | 'maxContentWidth'\n    | 'disableContentPaddings'\n    | 'navigation'\n    | 'navigationOpen'\n    | 'navigationWidth'\n    | 'tools'\n    | 'toolsOpen'\n    | 'toolsWidth'\n    | 'placement'\n  > {\n  style?: React.CSSProperties;\n  toolbar?: React.ReactNode;\n  splitPanelOpen?: boolean;\n  sideSplitPanel?: React.ReactNode;\n  bottomSplitPanel?: React.ReactNode;\n}\n\nexport function SkeletonLayout({\n  style,\n  notifications,\n  contentHeader,\n  content,\n  navigation,\n  navigationOpen,\n  navigationWidth,\n  tools,\n  toolsOpen,\n  toolsWidth,\n  toolbar,\n  sideSplitPanel,\n  bottomSplitPanel,\n  splitPanelOpen,\n  placement,\n  contentType,\n  maxContentWidth,\n  disableContentPaddings,\n}: SkeletonLayoutProps) {\n  const isMaxWidth = maxContentWidth === Number.MAX_VALUE || maxContentWidth === Number.MAX_SAFE_INTEGER;\n  const anyPanelOpen = navigationOpen || toolsOpen;\n  return (\n    <div\n      className={clsx(styles.root, testutilStyles.root, {\n        [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),\n        [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',\n      })}\n      style={{\n        minBlockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,\n        [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',\n        [customCssProps.navigationWidth]: `${navigationWidth}px`,\n        [customCssProps.toolsWidth]: `${toolsWidth}px`,\n      }}\n    >\n      {toolbar}\n      {navigation && (\n        <div\n          className={clsx(\n            styles.navigation,\n            !navigationOpen && styles['panel-hidden'],\n            toolsOpen && styles['unfocusable-mobile'],\n            sharedStyles['with-motion']\n          )}\n        >\n          {navigation}\n        </div>\n      )}\n      <main className={clsx(styles['main-landmark'], anyPanelOpen && styles['unfocusable-mobile'])}>\n        {notifications}\n        <div className={clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings })} style={style}>\n          {contentHeader && <div className={styles['content-header']}>{contentHeader}</div>}\n          <div className={clsx(styles.content, testutilStyles.content)}>{content}</div>\n        </div>\n        {bottomSplitPanel && (\n          <div className={clsx(styles['split-panel-bottom'])} style={{ insetBlockEnd: placement.insetBlockEnd }}>\n            {bottomSplitPanel}\n          </div>\n        )}\n      </main>\n      {sideSplitPanel && (\n        <div className={clsx(styles['split-panel-side'], !splitPanelOpen && styles['panel-hidden'])}>\n          {sideSplitPanel}\n        </div>\n      )}\n      <div className={clsx(styles.tools, !toolsOpen && styles['panel-hidden'], sharedStyles['with-motion'])}>\n        {tools}\n      </div>\n    </div>\n  );\n}\n"]}

package/app-layout/visual-refresh-toolbar/skeleton/styles.css.js

@@ -1,21 +1,21 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_7nfqu_1dz4s_149",
-  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_1dz4s_198",
-  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_1dz4s_213",
-  "navigation": "awsui_navigation_7nfqu_1dz4s_228",
-  "tools": "awsui_tools_7nfqu_1dz4s_229",
-  "split-panel-side": "awsui_split-panel-side_7nfqu_1dz4s_260",
-  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_1dz4s_267",
-  "panel-hidden": "awsui_panel-hidden_7nfqu_1dz4s_280",
-  "toolbar-container": "awsui_toolbar-container_7nfqu_1dz4s_290",
-  "notifications-container": "awsui_notifications-container_7nfqu_1dz4s_296",
-  "main-landmark": "awsui_main-landmark_7nfqu_1dz4s_303",
-  "main": "awsui_main_7nfqu_1dz4s_303",
-  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_1dz4s_312",
-  "content-header": "awsui_content-header_7nfqu_1dz4s_322",
-  "content": "awsui_content_7nfqu_1dz4s_322",
-  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_1dz4s_332"
+  "root": "awsui_root_7nfqu_1kxg6_149",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_1kxg6_198",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_1kxg6_213",
+  "navigation": "awsui_navigation_7nfqu_1kxg6_228",
+  "tools": "awsui_tools_7nfqu_1kxg6_229",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_1kxg6_261",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_1kxg6_268",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_1kxg6_281",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_1kxg6_291",
+  "notifications-container": "awsui_notifications-container_7nfqu_1kxg6_297",
+  "main-landmark": "awsui_main-landmark_7nfqu_1kxg6_304",
+  "main": "awsui_main_7nfqu_1kxg6_304",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_1kxg6_313",
+  "content-header": "awsui_content-header_7nfqu_1kxg6_323",
+  "content": "awsui_content_7nfqu_1kxg6_323",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_1kxg6_333"
 };