@cloudscape-design/components 3.0.221 → 3.0.223

package/app-layout/mobile-toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/mobile-toolbar/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAU3D,IAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CACnC,UAAC,EAAqE,EAAE,GAA+B;QAApG,SAAS,eAAA,EAAE,UAAU,gBAAA,EAAE,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,OAAO,aAAA;IACzC,IAAA,KAAmC,aAAa,CAAC,IAAI,CAAC,EAApD,OAAO,aAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAwB,CAAC;IACvD,IAAA,KAA2B,SAAS,CAAC,UAAU,CAAC,EAA9C,SAAS,eAAA,EAAE,SAAS,eAA0B,CAAC;IACvD,OAAO,CACL,oBAAC,OAAO,IACN,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,iBAC3B,QAAQ,gBACT,SAAS,EACrB,OAAO,EAAE,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa,IAAI,OAAO,EAAE,EAAzC,CAAyC;QAEvD,oBAAC,eAAe,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,QAAQ,GACtB,CACM,CACX,CAAC;AACJ,CAAC,CACF,CAAC;AAkBF,MAAM,UAAU,aAAa,CAAC,EAWT;QAVnB,kBAAe,EAAf,UAAU,mBAAG,EAAE,KAAA,EACf,UAAU,gBAAA,EACV,SAAS,eAAA,EACT,cAAc,oBAAA,EACd,SAAS,eAAA,EACT,oBAAoB,EAApB,YAAY,mBAAG,KAAK,KAAA,EACpB,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,gBAAgB,sBAAA,EAChB,WAAW,iBAAA;IAEX,SAAS,CAAC;QACR,IAAI,YAAY,EAAE;YAChB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC;YACzD,OAAO;gBACL,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC;YAC9D,CAAC,CAAC;SACH;aAAM;YACL,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC;SAC7D;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,WAAW,IAAI,YAAY,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE;QAC3G,CAAC,cAAc,IAAI,CAClB,oBAAC,YAAY,IACX,GAAG,EAAE,UAAU,CAAC,UAAU,EAC1B,IAAI,EAAC,YAAY,EACjB,SAAS,EAAE,cAAc,CAAC,mBAAmB,CAAC,EAC9C,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,gBAAgB,GACzB,CACH;QACD,6BAAK,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC,IAC7C,QAAQ,IAAI,6BAAK,SAAS,EAAE,cAAc,CAAC,WAAW,IAAG,QAAQ,CAAO,CACrE;QACL,CAAC,SAAS,IAAI,CACb,oBAAC,YAAY,IACX,GAAG,EAAE,UAAU,CAAC,KAAK,EACrB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC,EACzC,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,WAAW,GACpB,CACH,CACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useEffect } from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { AppLayoutProps } from '../interfaces';\nimport { AppLayoutButton, togglesConfig } from '../toggles';\nimport styles from './styles.css.js';\nimport sharedStyles from '../styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\ninterface MobileToggleProps {\n  className?: string;\n  ariaLabels?: AppLayoutProps.Labels;\n  type: keyof typeof togglesConfig;\n  disabled?: boolean;\n  onClick: () => void;\n}\n\nconst MobileToggle = React.forwardRef(\n  ({ className, ariaLabels, type, disabled, onClick }: MobileToggleProps, ref: React.Ref<ButtonProps.Ref>) => {\n    const { TagName, iconName, getLabels } = togglesConfig[type];\n    const { mainLabel, openLabel } = getLabels(ariaLabels);\n    return (\n      <TagName\n        className={clsx(styles['mobile-toggle'])}\n        aria-hidden={disabled}\n        aria-label={mainLabel}\n        onClick={e => e.target === e.currentTarget && onClick()}\n      >\n        <AppLayoutButton\n          ref={ref}\n          className={className}\n          iconName={iconName}\n          onClick={onClick}\n          ariaLabel={openLabel}\n          disabled={disabled}\n          ariaExpanded={disabled}\n        />\n      </TagName>\n    );\n  }\n);\n\ninterface MobileToolbarProps {\n  anyPanelOpen: boolean | undefined;\n  unfocusable: boolean | undefined;\n  toggleRefs: {\n    navigation: React.Ref<ButtonProps.Ref>;\n    tools: React.Ref<ButtonProps.Ref>;\n  };\n  navigationHide: boolean | undefined;\n  toolsHide: boolean | undefined;\n  topOffset?: number;\n  ariaLabels?: AppLayoutProps.Labels;\n  children: React.ReactNode;\n  onNavigationOpen: () => void;\n  onToolsOpen: () => void;\n}\n\nexport function MobileToolbar({\n  ariaLabels = {},\n  toggleRefs,\n  topOffset,\n  navigationHide,\n  toolsHide,\n  anyPanelOpen = false,\n  unfocusable,\n  children,\n  onNavigationOpen,\n  onToolsOpen,\n}: MobileToolbarProps) {\n  useEffect(() => {\n    if (anyPanelOpen) {\n      document.body.classList.add(styles['block-body-scroll']);\n      return () => {\n        document.body.classList.remove(styles['block-body-scroll']);\n      };\n    } else {\n      document.body.classList.remove(styles['block-body-scroll']);\n    }\n  }, [anyPanelOpen]);\n\n  return (\n    <div className={clsx(styles['mobile-bar'], unfocusable && sharedStyles.unfocusable)} style={{ top: topOffset }}>\n      {!navigationHide && (\n        <MobileToggle\n          ref={toggleRefs.navigation}\n          type=\"navigation\"\n          className={testutilStyles['navigation-toggle']}\n          ariaLabels={ariaLabels}\n          disabled={anyPanelOpen}\n          onClick={onNavigationOpen}\n        />\n      )}\n      <div className={styles['mobile-bar-breadcrumbs']}>\n        {children && <div className={testutilStyles.breadcrumbs}>{children}</div>}\n      </div>\n      {!toolsHide && (\n        <MobileToggle\n          ref={toggleRefs.tools}\n          type=\"tools\"\n          className={testutilStyles['tools-toggle']}\n          ariaLabels={ariaLabels}\n          disabled={anyPanelOpen}\n          onClick={onToolsOpen}\n        />\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/mobile-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 clsx from 'clsx';\nimport React, { useEffect } from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { AppLayoutProps } from '../interfaces';\nimport { AppLayoutButton, togglesConfig } from '../toggles';\nimport styles from './styles.css.js';\nimport sharedStyles from '../styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\ninterface MobileToggleProps {\n  className?: string;\n  ariaLabels?: AppLayoutProps.Labels;\n  type: keyof typeof togglesConfig;\n  disabled?: boolean;\n  onClick: () => void;\n}\n\nconst MobileToggle = React.forwardRef(\n  ({ className, ariaLabels, type, disabled, onClick }: MobileToggleProps, ref: React.Ref<ButtonProps.Ref>) => {\n    const { TagName, iconName, getLabels } = togglesConfig[type];\n    const { mainLabel, openLabel } = getLabels(ariaLabels);\n    return (\n      <TagName\n        className={clsx(styles['mobile-toggle'])}\n        aria-hidden={disabled}\n        aria-label={mainLabel}\n        onClick={e => e.target === e.currentTarget && onClick()}\n      >\n        <AppLayoutButton\n          ref={ref}\n          className={className}\n          iconName={iconName}\n          onClick={onClick}\n          ariaLabel={openLabel}\n          disabled={disabled}\n          ariaExpanded={disabled}\n        />\n      </TagName>\n    );\n  }\n);\n\ninterface MobileToolbarProps {\n  anyPanelOpen: boolean | undefined;\n  unfocusable: boolean | undefined;\n  toggleRefs: {\n    navigation: React.Ref<ButtonProps.Ref>;\n    tools: React.Ref<ButtonProps.Ref>;\n  };\n  navigationHide: boolean | undefined;\n  toolsHide: boolean | undefined;\n  topOffset?: number;\n  ariaLabels?: AppLayoutProps.Labels;\n  children: React.ReactNode;\n  onNavigationOpen: () => void;\n  onToolsOpen: () => void;\n}\n\nexport function MobileToolbar({\n  ariaLabels = {},\n  toggleRefs,\n  topOffset,\n  navigationHide,\n  toolsHide,\n  anyPanelOpen = false,\n  unfocusable,\n  children,\n  onNavigationOpen,\n  onToolsOpen,\n}: MobileToolbarProps) {\n  useEffect(() => {\n    if (anyPanelOpen) {\n      document.body.classList.add(styles['block-body-scroll']);\n      return () => {\n        document.body.classList.remove(styles['block-body-scroll']);\n      };\n    } else {\n      document.body.classList.remove(styles['block-body-scroll']);\n    }\n  }, [anyPanelOpen]);\n\n  return (\n    <div className={clsx(styles['mobile-bar'], unfocusable && sharedStyles.unfocusable)} style={{ top: topOffset }}>\n      {!navigationHide && (\n        <MobileToggle\n          ref={toggleRefs.navigation}\n          type=\"navigation\"\n          className={testutilStyles['navigation-toggle']}\n          ariaLabels={ariaLabels}\n          disabled={anyPanelOpen}\n          onClick={onNavigationOpen}\n        />\n      )}\n      <div className={styles['mobile-bar-breadcrumbs']}>\n        {children && <div className={testutilStyles.breadcrumbs}>{children}</div>}\n      </div>\n      {!toolsHide && (\n        <MobileToggle\n          ref={toggleRefs.tools}\n          type=\"tools\"\n          className={testutilStyles['tools-toggle']}\n          ariaLabels={ariaLabels}\n          disabled={anyPanelOpen}\n          onClick={onToolsOpen}\n        />\n      )}\n    </div>\n  );\n}\n"]}

package/app-layout/navigation-panel.js

@@ -1,4 +1,3 @@
-import { __assign } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import clsx from 'clsx';
@@ -6,14 +5,12 @@ import React from 'react';
 import { Drawer } from './drawer';
 import styles from './styles.css.js';
 import testutilStyles from './test-classes/styles.css.js';
-export function NavigationPanel(_a) {
-    var _b;
-    var ariaLabels = _a.ariaLabels, footerHeight = _a.footerHeight, headerHeight = _a.headerHeight, isMobile = _a.isMobile, navigation = _a.navigation, navigationDrawerWidth = _a.navigationDrawerWidth, navigationWidth = _a.navigationWidth, navigationOpen = _a.navigationOpen, onClick = _a.onClick, onNavigationToggle = _a.onNavigationToggle, panelHeightStyle = _a.panelHeightStyle, toggleRefs = _a.toggleRefs;
+export function NavigationPanel({ ariaLabels, footerHeight, headerHeight, isMobile, navigation, navigationDrawerWidth, navigationWidth, navigationOpen, onClick, onNavigationToggle, panelHeightStyle, toggleRefs, }) {
     return (React.createElement("div", { className: styles['navigation-panel'], style: { width: navigationDrawerWidth } },
-        React.createElement("div", { className: clsx(styles['panel-wrapper-outer'], (_b = {},
-                _b[styles.mobile] = isMobile,
-                _b[styles.open] = navigationOpen,
-                _b)), style: __assign({}, (isMobile ? { top: headerHeight, bottom: footerHeight } : panelHeightStyle)) },
+        React.createElement("div", { className: clsx(styles['panel-wrapper-outer'], {
+                [styles.mobile]: isMobile,
+                [styles.open]: navigationOpen,
+            }), style: Object.assign({}, (isMobile ? { top: headerHeight, bottom: footerHeight } : panelHeightStyle)) },
             React.createElement(Drawer, { type: "navigation", isMobile: isMobile, width: navigationWidth, isOpen: navigationOpen, onToggle: onNavigationToggle, toggleRefs: toggleRefs, onClick: onClick, contentClassName: testutilStyles.navigation, closeClassName: testutilStyles['navigation-close'], toggleClassName: testutilStyles['navigation-toggle'], topOffset: headerHeight, bottomOffset: footerHeight, ariaLabels: ariaLabels }, navigation))));
 }
 //# sourceMappingURL=navigation-panel.js.map

package/app-layout/navigation-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-panel.js","sourceRoot":"","sources":["../../../src/app-layout/navigation-panel.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAsB,MAAM,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAwB1D,MAAM,UAAU,eAAe,CAAC,EAaT;;QAZrB,UAAU,gBAAA,EACV,YAAY,kBAAA,EACZ,YAAY,kBAAA,EACZ,QAAQ,cAAA,EACR,UAAU,gBAAA,EACV,qBAAqB,2BAAA,EACrB,eAAe,qBAAA,EACf,cAAc,oBAAA,EACd,OAAO,aAAA,EACP,kBAAkB,wBAAA,EAClB,gBAAgB,sBAAA,EAChB,UAAU,gBAAA;IAEV,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,qBAAqB,EAAE;QACjF,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC;gBAC3C,GAAC,MAAM,CAAC,MAAM,IAAG,QAAQ;gBACzB,GAAC,MAAM,CAAC,IAAI,IAAG,cAAc;oBAC7B,EACF,KAAK,eACA,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC;YAGhF,oBAAC,MAAM,IACL,IAAI,EAAC,YAAY,EACjB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,eAAe,EACtB,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,kBAAkB,EAC5B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,cAAc,CAAC,UAAU,EAC3C,cAAc,EAAE,cAAc,CAAC,kBAAkB,CAAC,EAClD,eAAe,EAAE,cAAc,CAAC,mBAAmB,CAAC,EACpD,SAAS,EAAE,YAAY,EACvB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,IAErB,UAAU,CACJ,CACL,CACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { AppLayoutProps } from './interfaces';\nimport { DesktopDrawerProps, Drawer } from './drawer';\nimport styles from './styles.css.js';\nimport testutilStyles from './test-classes/styles.css.js';\nimport useContentHeight from './utils/use-content-height';\n\ninterface NavigationPanelProps {\n  navigationOpen: boolean;\n\n  navigationDrawerWidth: number;\n  navigationWidth: number;\n  headerHeight: DesktopDrawerProps['topOffset'];\n  footerHeight: DesktopDrawerProps['bottomOffset'];\n  panelHeightStyle: ReturnType<typeof useContentHeight>['panelHeightStyle'];\n\n  navigation: React.ReactNode;\n\n  ariaLabels: AppLayoutProps['ariaLabels'];\n\n  isMobile: boolean;\n\n  onNavigationToggle: DesktopDrawerProps['onToggle'];\n  onClick: DesktopDrawerProps['onClick'];\n\n  toggleRefs: DesktopDrawerProps['toggleRefs'];\n}\n\nexport function NavigationPanel({\n  ariaLabels,\n  footerHeight,\n  headerHeight,\n  isMobile,\n  navigation,\n  navigationDrawerWidth,\n  navigationWidth,\n  navigationOpen,\n  onClick,\n  onNavigationToggle,\n  panelHeightStyle,\n  toggleRefs,\n}: NavigationPanelProps) {\n  return (\n    <div className={styles['navigation-panel']} style={{ width: navigationDrawerWidth }}>\n      <div\n        className={clsx(styles['panel-wrapper-outer'], {\n          [styles.mobile]: isMobile,\n          [styles.open]: navigationOpen,\n        })}\n        style={{\n          ...(isMobile ? { top: headerHeight, bottom: footerHeight } : panelHeightStyle),\n        }}\n      >\n        <Drawer\n          type=\"navigation\"\n          isMobile={isMobile}\n          width={navigationWidth}\n          isOpen={navigationOpen}\n          onToggle={onNavigationToggle}\n          toggleRefs={toggleRefs}\n          onClick={onClick}\n          contentClassName={testutilStyles.navigation}\n          closeClassName={testutilStyles['navigation-close']}\n          toggleClassName={testutilStyles['navigation-toggle']}\n          topOffset={headerHeight}\n          bottomOffset={footerHeight}\n          ariaLabels={ariaLabels}\n        >\n          {navigation}\n        </Drawer>\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"navigation-panel.js","sourceRoot":"","sources":["../../../src/app-layout/navigation-panel.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAsB,MAAM,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAwB1D,MAAM,UAAU,eAAe,CAAC,EAC9B,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,qBAAqB,EACrB,eAAe,EACf,cAAc,EACd,OAAO,EACP,kBAAkB,EAClB,gBAAgB,EAChB,UAAU,GACW;IACrB,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,qBAAqB,EAAE;QACjF,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,EAAE;gBAC7C,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,QAAQ;gBACzB,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,cAAc;aAC9B,CAAC,EACF,KAAK,oBACA,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC;YAGhF,oBAAC,MAAM,IACL,IAAI,EAAC,YAAY,EACjB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,eAAe,EACtB,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,kBAAkB,EAC5B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,cAAc,CAAC,UAAU,EAC3C,cAAc,EAAE,cAAc,CAAC,kBAAkB,CAAC,EAClD,eAAe,EAAE,cAAc,CAAC,mBAAmB,CAAC,EACpD,SAAS,EAAE,YAAY,EACvB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,IAErB,UAAU,CACJ,CACL,CACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { AppLayoutProps } from './interfaces';\nimport { DesktopDrawerProps, Drawer } from './drawer';\nimport styles from './styles.css.js';\nimport testutilStyles from './test-classes/styles.css.js';\nimport useContentHeight from './utils/use-content-height';\n\ninterface NavigationPanelProps {\n  navigationOpen: boolean;\n\n  navigationDrawerWidth: number;\n  navigationWidth: number;\n  headerHeight: DesktopDrawerProps['topOffset'];\n  footerHeight: DesktopDrawerProps['bottomOffset'];\n  panelHeightStyle: ReturnType<typeof useContentHeight>['panelHeightStyle'];\n\n  navigation: React.ReactNode;\n\n  ariaLabels: AppLayoutProps['ariaLabels'];\n\n  isMobile: boolean;\n\n  onNavigationToggle: DesktopDrawerProps['onToggle'];\n  onClick: DesktopDrawerProps['onClick'];\n\n  toggleRefs: DesktopDrawerProps['toggleRefs'];\n}\n\nexport function NavigationPanel({\n  ariaLabels,\n  footerHeight,\n  headerHeight,\n  isMobile,\n  navigation,\n  navigationDrawerWidth,\n  navigationWidth,\n  navigationOpen,\n  onClick,\n  onNavigationToggle,\n  panelHeightStyle,\n  toggleRefs,\n}: NavigationPanelProps) {\n  return (\n    <div className={styles['navigation-panel']} style={{ width: navigationDrawerWidth }}>\n      <div\n        className={clsx(styles['panel-wrapper-outer'], {\n          [styles.mobile]: isMobile,\n          [styles.open]: navigationOpen,\n        })}\n        style={{\n          ...(isMobile ? { top: headerHeight, bottom: footerHeight } : panelHeightStyle),\n        }}\n      >\n        <Drawer\n          type=\"navigation\"\n          isMobile={isMobile}\n          width={navigationWidth}\n          isOpen={navigationOpen}\n          onToggle={onNavigationToggle}\n          toggleRefs={toggleRefs}\n          onClick={onClick}\n          contentClassName={testutilStyles.navigation}\n          closeClassName={testutilStyles['navigation-close']}\n          toggleClassName={testutilStyles['navigation-toggle']}\n          topOffset={headerHeight}\n          bottomOffset={footerHeight}\n          ariaLabels={ariaLabels}\n        >\n          {navigation}\n        </Drawer>\n      </div>\n    </div>\n  );\n}\n"]}

package/app-layout/notifications/index.js

@@ -4,9 +4,9 @@ import { __rest } from "tslib";
 import React from 'react';
 import styles from './styles.css.js';
 import clsx from 'clsx';
-export var Notifications = React.forwardRef(function (_a, ref) {
+export const Notifications = React.forwardRef((_a, ref) => {
     var _b, _c;
-    var sticky = _a.sticky, disableContentPaddings = _a.disableContentPaddings, props = __rest(_a, ["sticky", "disableContentPaddings"]);
+    var { sticky, disableContentPaddings } = _a, props = __rest(_a, ["sticky", "disableContentPaddings"]);
     return sticky ? (React.createElement("div", { ref: ref, className: styles['notifications-sticky'], style: { top: props.topOffset } },
         React.createElement("div", { role: "region", className: clsx(props.testUtilsClassName, disableContentPaddings && styles['no-content-paddings']), "aria-label": (_b = props.labels) === null || _b === void 0 ? void 0 : _b.notifications }, props.children))) : (React.createElement("div", { role: "region", ref: ref, className: clsx(props.testUtilsClassName, styles.notifications, disableContentPaddings && styles['no-content-paddings']), "aria-label": (_c = props.labels) === null || _c === void 0 ? void 0 : _c.notifications }, props.children));
 });

package/app-layout/notifications/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/notifications/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,IAAI,MAAM,MAAM,CAAC;AAaxB,MAAM,CAAC,IAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAC3C,UAAC,EAAsE,EAAE,GAA8B;;IAApG,IAAA,MAAM,YAAA,EAAE,sBAAsB,4BAAA,EAAK,KAAK,cAA1C,oCAA4C,CAAF;IACzC,OAAO,MAAM,CAAC,CAAC,CAAC,CACd,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC,SAAS,EAAE;QACvF,6BACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,kBAAkB,EAAE,sBAAsB,IAAI,MAAM,CAAC,qBAAqB,CAAC,CAAC,gBACtF,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,IAEtC,KAAK,CAAC,QAAQ,CACX,CACF,CACP,CAAC,CAAC,CAAC,CACF,6BACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CACb,KAAK,CAAC,kBAAkB,EACxB,MAAM,CAAC,aAAa,EACpB,sBAAsB,IAAI,MAAM,CAAC,qBAAqB,CAAC,CACxD,gBACW,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,IAEtC,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport styles from './styles.css.js';\nimport { AppLayoutProps } from '../interfaces';\nimport clsx from 'clsx';\n\ninterface NotificationsProps {\n  testUtilsClassName: string;\n  children?: React.ReactNode;\n  labels: AppLayoutProps.Labels | undefined;\n  topOffset: number | undefined;\n  disableContentPaddings?: boolean;\n}\ninterface NotificationWrapperProps extends NotificationsProps {\n  sticky: boolean | undefined;\n}\n\nexport const Notifications = React.forwardRef(\n  ({ sticky, disableContentPaddings, ...props }: NotificationWrapperProps, ref: React.Ref<HTMLDivElement>) => {\n    return sticky ? (\n      <div ref={ref} className={styles['notifications-sticky']} style={{ top: props.topOffset }}>\n        <div\n          role=\"region\"\n          className={clsx(props.testUtilsClassName, disableContentPaddings && styles['no-content-paddings'])}\n          aria-label={props.labels?.notifications}\n        >\n          {props.children}\n        </div>\n      </div>\n    ) : (\n      <div\n        role=\"region\"\n        ref={ref}\n        className={clsx(\n          props.testUtilsClassName,\n          styles.notifications,\n          disableContentPaddings && styles['no-content-paddings']\n        )}\n        aria-label={props.labels?.notifications}\n      >\n        {props.children}\n      </div>\n    );\n  }\n);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/notifications/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,IAAI,MAAM,MAAM,CAAC;AAaxB,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAC3C,CAAC,EAAsE,EAAE,GAA8B,EAAE,EAAE;;QAA1G,EAAE,MAAM,EAAE,sBAAsB,OAAsC,EAAjC,KAAK,cAA1C,oCAA4C,CAAF;IACzC,OAAO,MAAM,CAAC,CAAC,CAAC,CACd,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC,SAAS,EAAE;QACvF,6BACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,kBAAkB,EAAE,sBAAsB,IAAI,MAAM,CAAC,qBAAqB,CAAC,CAAC,gBACtF,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,IAEtC,KAAK,CAAC,QAAQ,CACX,CACF,CACP,CAAC,CAAC,CAAC,CACF,6BACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CACb,KAAK,CAAC,kBAAkB,EACxB,MAAM,CAAC,aAAa,EACpB,sBAAsB,IAAI,MAAM,CAAC,qBAAqB,CAAC,CACxD,gBACW,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,IAEtC,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport styles from './styles.css.js';\nimport { AppLayoutProps } from '../interfaces';\nimport clsx from 'clsx';\n\ninterface NotificationsProps {\n  testUtilsClassName: string;\n  children?: React.ReactNode;\n  labels: AppLayoutProps.Labels | undefined;\n  topOffset: number | undefined;\n  disableContentPaddings?: boolean;\n}\ninterface NotificationWrapperProps extends NotificationsProps {\n  sticky: boolean | undefined;\n}\n\nexport const Notifications = React.forwardRef(\n  ({ sticky, disableContentPaddings, ...props }: NotificationWrapperProps, ref: React.Ref<HTMLDivElement>) => {\n    return sticky ? (\n      <div ref={ref} className={styles['notifications-sticky']} style={{ top: props.topOffset }}>\n        <div\n          role=\"region\"\n          className={clsx(props.testUtilsClassName, disableContentPaddings && styles['no-content-paddings'])}\n          aria-label={props.labels?.notifications}\n        >\n          {props.children}\n        </div>\n      </div>\n    ) : (\n      <div\n        role=\"region\"\n        ref={ref}\n        className={clsx(\n          props.testUtilsClassName,\n          styles.notifications,\n          disableContentPaddings && styles['no-content-paddings']\n        )}\n        aria-label={props.labels?.notifications}\n      >\n        {props.children}\n      </div>\n    );\n  }\n);\n"]}

package/app-layout/toggles/index.js

@@ -3,38 +3,30 @@
 import React from 'react';
 import { InternalButton } from '../../button/internal';
 import styles from './styles.css.js';
-export var togglesConfig = {
+export const togglesConfig = {
     navigation: {
         TagName: 'nav',
         iconName: 'menu',
-        getLabels: function (labels) {
-            if (labels === void 0) { labels = {}; }
-            return ({
-                mainLabel: labels.navigation,
-                openLabel: labels.navigationToggle,
-                closeLabel: labels.navigationClose
-            });
-        }
+        getLabels: (labels = {}) => ({
+            mainLabel: labels.navigation,
+            openLabel: labels.navigationToggle,
+            closeLabel: labels.navigationClose,
+        }),
     },
     tools: {
         TagName: 'aside',
         iconName: 'status-info',
-        getLabels: function (labels) {
-            if (labels === void 0) { labels = {}; }
-            return ({
-                mainLabel: labels.tools,
-                openLabel: labels.toolsToggle,
-                closeLabel: labels.toolsClose
-            });
-        }
-    }
+        getLabels: (labels = {}) => ({
+            mainLabel: labels.tools,
+            openLabel: labels.toolsToggle,
+            closeLabel: labels.toolsClose,
+        }),
+    },
 };
-export var AppLayoutButton = React.forwardRef(function (_a, ref) {
-    var className = _a.className, ariaLabel = _a.ariaLabel, ariaExpanded = _a.ariaExpanded, iconName = _a.iconName, disabled = _a.disabled, onClick = _a.onClick;
+export const AppLayoutButton = React.forwardRef(({ className, ariaLabel, ariaExpanded, iconName, disabled, onClick }, ref) => {
     return (React.createElement(InternalButton, { ref: ref, className: className, ariaLabel: ariaLabel, variant: "icon", formAction: "none", onClick: onClick, iconName: iconName, disabled: disabled, ariaExpanded: ariaExpanded ? undefined : false, __nativeAttributes: { 'aria-haspopup': ariaExpanded ? undefined : true } }));
 });
-export var CloseButton = React.forwardRef(function (_a, ref) {
-    var className = _a.className, ariaLabel = _a.ariaLabel, onClick = _a.onClick, iconName = _a.iconName;
+export const CloseButton = React.forwardRef(({ className, ariaLabel, onClick, iconName }, ref) => {
     return (React.createElement("span", { className: styles['close-button'] },
         React.createElement(AppLayoutButton, { ref: ref, className: className, ariaExpanded: true, ariaLabel: ariaLabel, iconName: iconName, onClick: onClick })));
 });

package/app-layout/toggles/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/toggles/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,IAAM,aAAa,GAAG;IAC3B,UAAU,EAAE;QACV,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,UAAC,MAAkC;YAAlC,uBAAA,EAAA,WAAkC;YAAK,OAAA,CAAC;gBAClD,SAAS,EAAE,MAAM,CAAC,UAAU;gBAC5B,SAAS,EAAE,MAAM,CAAC,gBAAgB;gBAClC,UAAU,EAAE,MAAM,CAAC,eAAe;aACnC,CAAC;QAJiD,CAIjD;KACH;IACD,KAAK,EAAE;QACL,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,aAAa;QACvB,SAAS,EAAE,UAAC,MAAkC;YAAlC,uBAAA,EAAA,WAAkC;YAAK,OAAA,CAAC;gBAClD,SAAS,EAAE,MAAM,CAAC,KAAK;gBACvB,SAAS,EAAE,MAAM,CAAC,WAAW;gBAC7B,UAAU,EAAE,MAAM,CAAC,UAAU;aAC9B,CAAC;QAJiD,CAIjD;KACH;CACO,CAAC;AAEX,MAAM,CAAC,IAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAC7C,UACE,EAAyF,EACzF,GAA+B;QAD7B,SAAS,eAAA,EAAE,SAAS,eAAA,EAAE,YAAY,kBAAA,EAAE,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,OAAO,aAAA;IAGjE,OAAO,CACL,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAC9C,kBAAkB,EAAE,EAAE,eAAe,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAAE,GACxE,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AASF,MAAM,CAAC,IAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,UAAC,EAA6D,EAAE,GAA+B;QAA5F,SAAS,eAAA,EAAE,SAAS,eAAA,EAAE,OAAO,aAAA,EAAE,QAAQ,cAAA;IACxC,OAAO,CACL,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC;QACrC,oBAAC,eAAe,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,IAAI,EAClB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,GAChB,CACG,CACR,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { IconProps } from '../../icon/interfaces';\nimport { InternalButton } from '../../button/internal';\nimport { AppLayoutProps } from '../interfaces';\nimport { AppLayoutButtonProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport const togglesConfig = {\n  navigation: {\n    TagName: 'nav',\n    iconName: 'menu',\n    getLabels: (labels: AppLayoutProps.Labels = {}) => ({\n      mainLabel: labels.navigation,\n      openLabel: labels.navigationToggle,\n      closeLabel: labels.navigationClose,\n    }),\n  },\n  tools: {\n    TagName: 'aside',\n    iconName: 'status-info',\n    getLabels: (labels: AppLayoutProps.Labels = {}) => ({\n      mainLabel: labels.tools,\n      openLabel: labels.toolsToggle,\n      closeLabel: labels.toolsClose,\n    }),\n  },\n} as const;\n\nexport const AppLayoutButton = React.forwardRef(\n  (\n    { className, ariaLabel, ariaExpanded, iconName, disabled, onClick }: AppLayoutButtonProps,\n    ref: React.Ref<ButtonProps.Ref>\n  ) => {\n    return (\n      <InternalButton\n        ref={ref}\n        className={className}\n        ariaLabel={ariaLabel}\n        variant=\"icon\"\n        formAction=\"none\"\n        onClick={onClick}\n        iconName={iconName}\n        disabled={disabled}\n        ariaExpanded={ariaExpanded ? undefined : false}\n        __nativeAttributes={{ 'aria-haspopup': ariaExpanded ? undefined : true }}\n      />\n    );\n  }\n);\n\ninterface CloseButtonProps {\n  className?: string;\n  ariaLabel: string | undefined;\n  onClick: () => void;\n  iconName: IconProps.Name;\n}\n\nexport const CloseButton = React.forwardRef(\n  ({ className, ariaLabel, onClick, iconName }: CloseButtonProps, ref: React.Ref<ButtonProps.Ref>) => {\n    return (\n      <span className={styles['close-button']}>\n        <AppLayoutButton\n          ref={ref}\n          className={className}\n          ariaExpanded={true}\n          ariaLabel={ariaLabel}\n          iconName={iconName}\n          onClick={onClick}\n        />\n      </span>\n    );\n  }\n);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/toggles/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,UAAU,EAAE;QACV,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,CAAC,SAAgC,EAAE,EAAE,EAAE,CAAC,CAAC;YAClD,SAAS,EAAE,MAAM,CAAC,UAAU;YAC5B,SAAS,EAAE,MAAM,CAAC,gBAAgB;YAClC,UAAU,EAAE,MAAM,CAAC,eAAe;SACnC,CAAC;KACH;IACD,KAAK,EAAE;QACL,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,aAAa;QACvB,SAAS,EAAE,CAAC,SAAgC,EAAE,EAAE,EAAE,CAAC,CAAC;YAClD,SAAS,EAAE,MAAM,CAAC,KAAK;YACvB,SAAS,EAAE,MAAM,CAAC,WAAW;YAC7B,UAAU,EAAE,MAAM,CAAC,UAAU;SAC9B,CAAC;KACH;CACO,CAAC;AAEX,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAC7C,CACE,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAwB,EACzF,GAA+B,EAC/B,EAAE;IACF,OAAO,CACL,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAC9C,kBAAkB,EAAE,EAAE,eAAe,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAAE,GACxE,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AASF,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAoB,EAAE,GAA+B,EAAE,EAAE;IACjG,OAAO,CACL,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC;QACrC,oBAAC,eAAe,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,IAAI,EAClB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,GAChB,CACG,CACR,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { IconProps } from '../../icon/interfaces';\nimport { InternalButton } from '../../button/internal';\nimport { AppLayoutProps } from '../interfaces';\nimport { AppLayoutButtonProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport const togglesConfig = {\n  navigation: {\n    TagName: 'nav',\n    iconName: 'menu',\n    getLabels: (labels: AppLayoutProps.Labels = {}) => ({\n      mainLabel: labels.navigation,\n      openLabel: labels.navigationToggle,\n      closeLabel: labels.navigationClose,\n    }),\n  },\n  tools: {\n    TagName: 'aside',\n    iconName: 'status-info',\n    getLabels: (labels: AppLayoutProps.Labels = {}) => ({\n      mainLabel: labels.tools,\n      openLabel: labels.toolsToggle,\n      closeLabel: labels.toolsClose,\n    }),\n  },\n} as const;\n\nexport const AppLayoutButton = React.forwardRef(\n  (\n    { className, ariaLabel, ariaExpanded, iconName, disabled, onClick }: AppLayoutButtonProps,\n    ref: React.Ref<ButtonProps.Ref>\n  ) => {\n    return (\n      <InternalButton\n        ref={ref}\n        className={className}\n        ariaLabel={ariaLabel}\n        variant=\"icon\"\n        formAction=\"none\"\n        onClick={onClick}\n        iconName={iconName}\n        disabled={disabled}\n        ariaExpanded={ariaExpanded ? undefined : false}\n        __nativeAttributes={{ 'aria-haspopup': ariaExpanded ? undefined : true }}\n      />\n    );\n  }\n);\n\ninterface CloseButtonProps {\n  className?: string;\n  ariaLabel: string | undefined;\n  onClick: () => void;\n  iconName: IconProps.Name;\n}\n\nexport const CloseButton = React.forwardRef(\n  ({ className, ariaLabel, onClick, iconName }: CloseButtonProps, ref: React.Ref<ButtonProps.Ref>) => {\n    return (\n      <span className={styles['close-button']}>\n        <AppLayoutButton\n          ref={ref}\n          className={className}\n          ariaExpanded={true}\n          ariaLabel={ariaLabel}\n          iconName={iconName}\n          onClick={onClick}\n        />\n      </span>\n    );\n  }\n);\n"]}

package/app-layout/tools-and-split-panel.js

@@ -1,4 +1,3 @@
-import { __assign } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import clsx from 'clsx';
@@ -6,17 +5,15 @@ import React from 'react';
 import { Drawer } from './drawer';
 import styles from './styles.css.js';
 import testutilStyles from './test-classes/styles.css.js';
-export function ToolsAndSplitPanel(_a) {
-    var _b;
-    var ariaLabels = _a.ariaLabels, drawerWidth = _a.drawerWidth, footerHeight = _a.footerHeight, headerHeight = _a.headerHeight, isMobile = _a.isMobile, onToolsToggle = _a.onToolsToggle, panelHeightStyle = _a.panelHeightStyle, splitPanel = _a.splitPanel, toggleRefs = _a.toggleRefs, onLoseToolsFocus = _a.onLoseToolsFocus, tools = _a.tools, toolsHide = _a.toolsHide, toolsOpen = _a.toolsOpen, toolsWidth = _a.toolsWidth;
+export function ToolsAndSplitPanel({ ariaLabels, drawerWidth, footerHeight, headerHeight, isMobile, onToolsToggle, panelHeightStyle, splitPanel, toggleRefs, onLoseToolsFocus, tools, toolsHide, toolsOpen, toolsWidth, }) {
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { style: {
-                width: drawerWidth
+                width: drawerWidth,
             } },
-            React.createElement("div", { className: clsx(styles['panel-wrapper-outer'], (_b = {},
-                    _b[styles.mobile] = isMobile,
-                    _b[styles.open] = toolsOpen,
-                    _b)), style: __assign({}, (isMobile ? { top: headerHeight, bottom: footerHeight } : panelHeightStyle)) },
+            React.createElement("div", { className: clsx(styles['panel-wrapper-outer'], {
+                    [styles.mobile]: isMobile,
+                    [styles.open]: toolsOpen,
+                }), style: Object.assign({}, (isMobile ? { top: headerHeight, bottom: footerHeight } : panelHeightStyle)) },
                 splitPanel,
                 !toolsHide && (React.createElement(Drawer, { type: "tools", isMobile: isMobile, width: toolsWidth, isOpen: toolsOpen, onToggle: onToolsToggle, toggleRefs: toggleRefs, onLoseFocus: onLoseToolsFocus, contentClassName: testutilStyles.tools, closeClassName: testutilStyles['tools-close'], toggleClassName: testutilStyles['tools-toggle'], topOffset: headerHeight, bottomOffset: footerHeight, ariaLabels: ariaLabels }, tools))))));
 }

package/app-layout/tools-and-split-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"tools-and-split-panel.js","sourceRoot":"","sources":["../../../src/app-layout/tools-and-split-panel.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,MAAM,EAAE,MAAM,UAAU,CAAC;AAGtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAmB1D,MAAM,UAAU,kBAAkB,CAAC,EAeT;;QAdxB,UAAU,gBAAA,EACV,WAAW,iBAAA,EACX,YAAY,kBAAA,EACZ,YAAY,kBAAA,EACZ,QAAQ,cAAA,EACR,aAAa,mBAAA,EACb,gBAAgB,sBAAA,EAChB,UAAU,gBAAA,EACV,UAAU,gBAAA,EACV,gBAAgB,sBAAA,EAChB,KAAK,WAAA,EACL,SAAS,eAAA,EACT,SAAS,eAAA,EACT,UAAU,gBAAA;IAEV,OAAO,CACL;QACE,6BACE,KAAK,EAAE;gBACL,KAAK,EAAE,WAAW;aACnB;YAED,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC;oBAC3C,GAAC,MAAM,CAAC,MAAM,IAAG,QAAQ;oBACzB,GAAC,MAAM,CAAC,IAAI,IAAG,SAAS;wBACxB,EACF,KAAK,eACA,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC;gBAG/E,UAAU;gBACV,CAAC,SAAS,IAAI,CACb,oBAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,UAAU,EACjB,MAAM,EAAE,SAAS,EACjB,QAAQ,EAAE,aAAa,EACvB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,gBAAgB,EAC7B,gBAAgB,EAAE,cAAc,CAAC,KAAK,EACtC,cAAc,EAAE,cAAc,CAAC,aAAa,CAAC,EAC7C,eAAe,EAAE,cAAc,CAAC,cAAc,CAAC,EAC/C,SAAS,EAAE,YAAY,EACvB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,IAErB,KAAK,CACC,CACV,CACG,CACF,CACL,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { DesktopDrawerProps, Drawer } from './drawer';\nimport { AppLayoutProps } from './interfaces';\nimport useContentHeight from './utils/use-content-height';\nimport styles from './styles.css.js';\nimport testutilStyles from './test-classes/styles.css.js';\n\ninterface ToolsAndSplitPanelProps {\n  toolsHide: boolean;\n  toolsOpen: boolean;\n  drawerWidth: number;\n  toolsWidth: number;\n  headerHeight: DesktopDrawerProps['topOffset'];\n  footerHeight: DesktopDrawerProps['bottomOffset'];\n  panelHeightStyle: ReturnType<typeof useContentHeight>['panelHeightStyle'];\n  tools: React.ReactNode;\n  splitPanel: React.ReactNode;\n  ariaLabels: AppLayoutProps['ariaLabels'];\n  isMobile: boolean;\n  onToolsToggle: DesktopDrawerProps['onToggle'];\n  toggleRefs: DesktopDrawerProps['toggleRefs'];\n  onLoseToolsFocus: (event: React.FocusEvent) => void;\n}\n\nexport function ToolsAndSplitPanel({\n  ariaLabels,\n  drawerWidth,\n  footerHeight,\n  headerHeight,\n  isMobile,\n  onToolsToggle,\n  panelHeightStyle,\n  splitPanel,\n  toggleRefs,\n  onLoseToolsFocus,\n  tools,\n  toolsHide,\n  toolsOpen,\n  toolsWidth,\n}: ToolsAndSplitPanelProps) {\n  return (\n    <>\n      <div\n        style={{\n          width: drawerWidth,\n        }}\n      >\n        <div\n          className={clsx(styles['panel-wrapper-outer'], {\n            [styles.mobile]: isMobile,\n            [styles.open]: toolsOpen,\n          })}\n          style={{\n            ...(isMobile ? { top: headerHeight, bottom: footerHeight } : panelHeightStyle),\n          }}\n        >\n          {splitPanel}\n          {!toolsHide && (\n            <Drawer\n              type=\"tools\"\n              isMobile={isMobile}\n              width={toolsWidth}\n              isOpen={toolsOpen}\n              onToggle={onToolsToggle}\n              toggleRefs={toggleRefs}\n              onLoseFocus={onLoseToolsFocus}\n              contentClassName={testutilStyles.tools}\n              closeClassName={testutilStyles['tools-close']}\n              toggleClassName={testutilStyles['tools-toggle']}\n              topOffset={headerHeight}\n              bottomOffset={footerHeight}\n              ariaLabels={ariaLabels}\n            >\n              {tools}\n            </Drawer>\n          )}\n        </div>\n      </div>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"tools-and-split-panel.js","sourceRoot":"","sources":["../../../src/app-layout/tools-and-split-panel.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,MAAM,EAAE,MAAM,UAAU,CAAC;AAGtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAmB1D,MAAM,UAAU,kBAAkB,CAAC,EACjC,UAAU,EACV,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAU,GACc;IACxB,OAAO,CACL;QACE,6BACE,KAAK,EAAE;gBACL,KAAK,EAAE,WAAW;aACnB;YAED,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,EAAE;oBAC7C,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,QAAQ;oBACzB,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,SAAS;iBACzB,CAAC,EACF,KAAK,oBACA,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC;gBAG/E,UAAU;gBACV,CAAC,SAAS,IAAI,CACb,oBAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,UAAU,EACjB,MAAM,EAAE,SAAS,EACjB,QAAQ,EAAE,aAAa,EACvB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,gBAAgB,EAC7B,gBAAgB,EAAE,cAAc,CAAC,KAAK,EACtC,cAAc,EAAE,cAAc,CAAC,aAAa,CAAC,EAC7C,eAAe,EAAE,cAAc,CAAC,cAAc,CAAC,EAC/C,SAAS,EAAE,YAAY,EACvB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,IAErB,KAAK,CACC,CACV,CACG,CACF,CACL,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { DesktopDrawerProps, Drawer } from './drawer';\nimport { AppLayoutProps } from './interfaces';\nimport useContentHeight from './utils/use-content-height';\nimport styles from './styles.css.js';\nimport testutilStyles from './test-classes/styles.css.js';\n\ninterface ToolsAndSplitPanelProps {\n  toolsHide: boolean;\n  toolsOpen: boolean;\n  drawerWidth: number;\n  toolsWidth: number;\n  headerHeight: DesktopDrawerProps['topOffset'];\n  footerHeight: DesktopDrawerProps['bottomOffset'];\n  panelHeightStyle: ReturnType<typeof useContentHeight>['panelHeightStyle'];\n  tools: React.ReactNode;\n  splitPanel: React.ReactNode;\n  ariaLabels: AppLayoutProps['ariaLabels'];\n  isMobile: boolean;\n  onToolsToggle: DesktopDrawerProps['onToggle'];\n  toggleRefs: DesktopDrawerProps['toggleRefs'];\n  onLoseToolsFocus: (event: React.FocusEvent) => void;\n}\n\nexport function ToolsAndSplitPanel({\n  ariaLabels,\n  drawerWidth,\n  footerHeight,\n  headerHeight,\n  isMobile,\n  onToolsToggle,\n  panelHeightStyle,\n  splitPanel,\n  toggleRefs,\n  onLoseToolsFocus,\n  tools,\n  toolsHide,\n  toolsOpen,\n  toolsWidth,\n}: ToolsAndSplitPanelProps) {\n  return (\n    <>\n      <div\n        style={{\n          width: drawerWidth,\n        }}\n      >\n        <div\n          className={clsx(styles['panel-wrapper-outer'], {\n            [styles.mobile]: isMobile,\n            [styles.open]: toolsOpen,\n          })}\n          style={{\n            ...(isMobile ? { top: headerHeight, bottom: footerHeight } : panelHeightStyle),\n          }}\n        >\n          {splitPanel}\n          {!toolsHide && (\n            <Drawer\n              type=\"tools\"\n              isMobile={isMobile}\n              width={toolsWidth}\n              isOpen={toolsOpen}\n              onToggle={onToolsToggle}\n              toggleRefs={toggleRefs}\n              onLoseFocus={onLoseToolsFocus}\n              contentClassName={testutilStyles.tools}\n              closeClassName={testutilStyles['tools-close']}\n              toggleClassName={testutilStyles['tools-toggle']}\n              topOffset={headerHeight}\n              bottomOffset={footerHeight}\n              ariaLabels={ariaLabels}\n            >\n              {tools}\n            </Drawer>\n          )}\n        </div>\n      </div>\n    </>\n  );\n}\n"]}

package/app-layout/utils/use-content-height.js

@@ -3,27 +3,26 @@
 import { useEffect, useState } from 'react';
 import { useObservedElement } from './use-observed-element';
 export default function useContentHeight(headerSelector, footerSelector, disableBodyScroll) {
-    var _a;
-    var headerHeight = useObservedElement(headerSelector);
-    var footerHeight = useObservedElement(footerSelector);
-    var _b = useState(0), headerFooterHeight = _b[0], setHeaderFooterHeight = _b[1];
+    const headerHeight = useObservedElement(headerSelector);
+    const footerHeight = useObservedElement(footerSelector);
+    const [headerFooterHeight, setHeaderFooterHeight] = useState(0);
     // Delay applying changes in header/footer height, as applying them immediately can cause
     // ResizeOberver warnings due to the algorithm thinking that the change might have side-effects
     // further up the tree, therefore blocking notifications to prevent loops
-    useEffect(function () {
-        var id = requestAnimationFrame(function () { return setHeaderFooterHeight(headerHeight + footerHeight); });
-        return function () { return cancelAnimationFrame(id); };
+    useEffect(() => {
+        const id = requestAnimationFrame(() => setHeaderFooterHeight(headerHeight + footerHeight));
+        return () => cancelAnimationFrame(id);
     }, [headerHeight, footerHeight]);
-    var heightStyleValue = "calc(100vh - ".concat(headerFooterHeight, "px)");
+    const heightStyleValue = `calc(100vh - ${headerFooterHeight}px)`;
     return {
-        headerHeight: headerHeight,
-        footerHeight: footerHeight,
-        contentHeightStyle: (_a = {},
-            _a[disableBodyScroll ? 'height' : 'minHeight'] = heightStyleValue,
-            _a),
+        headerHeight,
+        footerHeight,
+        contentHeightStyle: {
+            [disableBodyScroll ? 'height' : 'minHeight']: heightStyleValue,
+        },
         panelHeightStyle: {
-            height: heightStyleValue
-        }
+            height: heightStyleValue,
+        },
     };
 }
 //# sourceMappingURL=use-content-height.js.map

package/app-layout/utils/use-content-height.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-content-height.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-content-height.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,cAAsB,EAAE,cAAsB,EAAE,iBAA2B;;IAClH,IAAM,YAAY,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACxD,IAAM,YAAY,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,IAAA,KAA8C,QAAQ,CAAC,CAAC,CAAC,EAAxD,kBAAkB,QAAA,EAAE,qBAAqB,QAAe,CAAC;IAEhE,yFAAyF;IACzF,+FAA+F;IAC/F,yEAAyE;IACzE,SAAS,CAAC;QACR,IAAM,EAAE,GAAG,qBAAqB,CAAC,cAAM,OAAA,qBAAqB,CAAC,YAAY,GAAG,YAAY,CAAC,EAAlD,CAAkD,CAAC,CAAC;QAC3F,OAAO,cAAM,OAAA,oBAAoB,CAAC,EAAE,CAAC,EAAxB,CAAwB,CAAC;IACxC,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC;IAEjC,IAAM,gBAAgB,GAAG,uBAAgB,kBAAkB,QAAK,CAAC;IAEjE,OAAO;QACL,YAAY,cAAA;QACZ,YAAY,cAAA;QACZ,kBAAkB;YAChB,GAAC,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,IAAG,gBAAgB;eAC/D;QACD,gBAAgB,EAAE;YAChB,MAAM,EAAE,gBAAgB;SACzB;KACF,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useEffect, useState } from 'react';\nimport { useObservedElement } from './use-observed-element';\n\nexport default function useContentHeight(headerSelector: string, footerSelector: string, disableBodyScroll?: boolean) {\n  const headerHeight = useObservedElement(headerSelector);\n  const footerHeight = useObservedElement(footerSelector);\n  const [headerFooterHeight, setHeaderFooterHeight] = useState(0);\n\n  // Delay applying changes in header/footer height, as applying them immediately can cause\n  // ResizeOberver warnings due to the algorithm thinking that the change might have side-effects\n  // further up the tree, therefore blocking notifications to prevent loops\n  useEffect(() => {\n    const id = requestAnimationFrame(() => setHeaderFooterHeight(headerHeight + footerHeight));\n    return () => cancelAnimationFrame(id);\n  }, [headerHeight, footerHeight]);\n\n  const heightStyleValue = `calc(100vh - ${headerFooterHeight}px)`;\n\n  return {\n    headerHeight,\n    footerHeight,\n    contentHeightStyle: {\n      [disableBodyScroll ? 'height' : 'minHeight']: heightStyleValue,\n    },\n    panelHeightStyle: {\n      height: heightStyleValue,\n    },\n  };\n}\n"]}
+{"version":3,"file":"use-content-height.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-content-height.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,cAAsB,EAAE,cAAsB,EAAE,iBAA2B;IAClH,MAAM,YAAY,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACxD,MAAM,YAAY,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACxD,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEhE,yFAAyF;IACzF,+FAA+F;IAC/F,yEAAyE;IACzE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,qBAAqB,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC;QAC3F,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,EAAE,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC;IAEjC,MAAM,gBAAgB,GAAG,gBAAgB,kBAAkB,KAAK,CAAC;IAEjE,OAAO;QACL,YAAY;QACZ,YAAY;QACZ,kBAAkB,EAAE;YAClB,CAAC,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,gBAAgB;SAC/D;QACD,gBAAgB,EAAE;YAChB,MAAM,EAAE,gBAAgB;SACzB;KACF,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useEffect, useState } from 'react';\nimport { useObservedElement } from './use-observed-element';\n\nexport default function useContentHeight(headerSelector: string, footerSelector: string, disableBodyScroll?: boolean) {\n  const headerHeight = useObservedElement(headerSelector);\n  const footerHeight = useObservedElement(footerSelector);\n  const [headerFooterHeight, setHeaderFooterHeight] = useState(0);\n\n  // Delay applying changes in header/footer height, as applying them immediately can cause\n  // ResizeOberver warnings due to the algorithm thinking that the change might have side-effects\n  // further up the tree, therefore blocking notifications to prevent loops\n  useEffect(() => {\n    const id = requestAnimationFrame(() => setHeaderFooterHeight(headerHeight + footerHeight));\n    return () => cancelAnimationFrame(id);\n  }, [headerHeight, footerHeight]);\n\n  const heightStyleValue = `calc(100vh - ${headerFooterHeight}px)`;\n\n  return {\n    headerHeight,\n    footerHeight,\n    contentHeightStyle: {\n      [disableBodyScroll ? 'height' : 'minHeight']: heightStyleValue,\n    },\n    panelHeightStyle: {\n      height: heightStyleValue,\n    },\n  };\n}\n"]}

package/app-layout/utils/use-content-width.js

@@ -3,20 +3,20 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useResizeObserver } from '../../internal/hooks/container-queries';
 export default function useAppLayoutOffsets(element) {
-    var _a = useState({ left: 0, right: 0 }), offsets = _a[0], setOffsets = _a[1];
-    var updatePosition = useCallback(function () {
+    const [offsets, setOffsets] = useState({ left: 0, right: 0 });
+    const updatePosition = useCallback(() => {
         if (!element) {
             return;
         }
-        var _a = element.getBoundingClientRect(), left = _a.left, right = _a.right;
-        var bodyWidth = document.body.clientWidth;
-        setOffsets({ left: left, right: bodyWidth - right });
+        const { left, right } = element.getBoundingClientRect();
+        const bodyWidth = document.body.clientWidth;
+        setOffsets({ left, right: bodyWidth - right });
     }, [element]);
-    useEffect(function () {
+    useEffect(() => {
         window.addEventListener('resize', updatePosition);
-        return function () { return window.removeEventListener('resize', updatePosition); };
+        return () => window.removeEventListener('resize', updatePosition);
     }, [updatePosition]);
-    var getElement = useCallback(function () { return element; }, [element]);
+    const getElement = useCallback(() => element, [element]);
     useResizeObserver(getElement, updatePosition);
     return offsets;
 }

package/app-layout/utils/use-content-width.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-content-width.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-content-width.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAE3E,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,OAA8B;IAClE,IAAA,KAAwB,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAtD,OAAO,QAAA,EAAE,UAAU,QAAmC,CAAC;IAE9D,IAAM,cAAc,GAAG,WAAW,CAAC;QACjC,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO;SACR;QACK,IAAA,KAAkB,OAAO,CAAC,qBAAqB,EAAE,EAA/C,IAAI,UAAA,EAAE,KAAK,WAAoC,CAAC;QACxD,IAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC;QAE5C,UAAU,CAAC,EAAE,IAAI,MAAA,EAAE,KAAK,EAAE,SAAS,GAAG,KAAK,EAAE,CAAC,CAAC;IACjD,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,SAAS,CAAC;QACR,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QAClD,OAAO,cAAM,OAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,EAApD,CAAoD,CAAC;IACpE,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,IAAM,UAAU,GAAG,WAAW,CAAC,cAAM,OAAA,OAAO,EAAP,CAAO,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IACzD,iBAAiB,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;IAE9C,OAAO,OAAO,CAAC;AACjB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useCallback, useEffect, useState } from 'react';\nimport { useResizeObserver } from '../../internal/hooks/container-queries';\n\nexport default function useAppLayoutOffsets(element: HTMLDivElement | null): { left: number; right: number } {\n  const [offsets, setOffsets] = useState({ left: 0, right: 0 });\n\n  const updatePosition = useCallback(() => {\n    if (!element) {\n      return;\n    }\n    const { left, right } = element.getBoundingClientRect();\n    const bodyWidth = document.body.clientWidth;\n\n    setOffsets({ left, right: bodyWidth - right });\n  }, [element]);\n\n  useEffect(() => {\n    window.addEventListener('resize', updatePosition);\n    return () => window.removeEventListener('resize', updatePosition);\n  }, [updatePosition]);\n\n  const getElement = useCallback(() => element, [element]);\n  useResizeObserver(getElement, updatePosition);\n\n  return offsets;\n}\n"]}
+{"version":3,"file":"use-content-width.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-content-width.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAE3E,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,OAA8B;IACxE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAE9D,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO;SACR;QACD,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;QACxD,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC;QAE5C,UAAU,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,GAAG,KAAK,EAAE,CAAC,CAAC;IACjD,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QAClD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;IACpE,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IACzD,iBAAiB,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;IAE9C,OAAO,OAAO,CAAC;AACjB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useCallback, useEffect, useState } from 'react';\nimport { useResizeObserver } from '../../internal/hooks/container-queries';\n\nexport default function useAppLayoutOffsets(element: HTMLDivElement | null): { left: number; right: number } {\n  const [offsets, setOffsets] = useState({ left: 0, right: 0 });\n\n  const updatePosition = useCallback(() => {\n    if (!element) {\n      return;\n    }\n    const { left, right } = element.getBoundingClientRect();\n    const bodyWidth = document.body.clientWidth;\n\n    setOffsets({ left, right: bodyWidth - right });\n  }, [element]);\n\n  useEffect(() => {\n    window.addEventListener('resize', updatePosition);\n    return () => window.removeEventListener('resize', updatePosition);\n  }, [updatePosition]);\n\n  const getElement = useCallback(() => element, [element]);\n  useResizeObserver(getElement, updatePosition);\n\n  return offsets;\n}\n"]}

package/app-layout/utils/use-focus-control.js

@@ -1,14 +1,13 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { useCallback, useLayoutEffect, useRef } from 'react';
-export function useFocusControl(isOpen, restoreFocus) {
-    if (restoreFocus === void 0) { restoreFocus = false; }
-    var refs = {
+export function useFocusControl(isOpen, restoreFocus = false) {
+    const refs = {
         toggle: useRef(null),
-        close: useRef(null)
+        close: useRef(null),
     };
-    var previousFocusedElement = useRef();
-    var setFocus = useCallback(function () {
+    const previousFocusedElement = useRef();
+    const setFocus = useCallback(() => {
         var _a, _b;
         // due to mounting/remounting, this hook gets called multiple times for a single change,
         // so we ignore any calls where the refs are undefined
@@ -29,11 +28,11 @@ export function useFocusControl(isOpen, restoreFocus) {
             }
         }
     }, [isOpen, restoreFocus, refs.close, refs.toggle]);
-    var loseFocus = useCallback(function () {
+    const loseFocus = useCallback(() => {
         previousFocusedElement.current = undefined;
     }, []);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     useLayoutEffect(setFocus, [isOpen, restoreFocus]);
-    return { refs: refs, setFocus: setFocus, loseFocus: loseFocus };
+    return { refs, setFocus, loseFocus };
 }
 //# sourceMappingURL=use-focus-control.js.map

package/app-layout/utils/use-focus-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-focus-control.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-focus-control.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAa,WAAW,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAYxE,MAAM,UAAU,eAAe,CAAC,MAAe,EAAE,YAAoB;IAApB,6BAAA,EAAA,oBAAoB;IACnE,IAAM,IAAI,GAAG;QACX,MAAM,EAAE,MAAM,CAAkB,IAAI,CAAC;QACrC,KAAK,EAAE,MAAM,CAAkB,IAAI,CAAC;KACrC,CAAC;IACF,IAAM,sBAAsB,GAAG,MAAM,EAAe,CAAC;IAErD,IAAM,QAAQ,GAAG,WAAW,CAAC;;QAC3B,wFAAwF;QACxF,sDAAsD;QACtD,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;YAChD,OAAO;SACR;QACD,IAAI,MAAM,EAAE;YACV,sBAAsB,CAAC,OAAO,GAAG,QAAQ,CAAC,aAA4B,CAAC;YACvE,MAAA,IAAI,CAAC,KAAK,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SAC7B;aAAM;YACL,IAAI,YAAY,IAAI,sBAAsB,CAAC,OAAO,IAAI,QAAQ,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE;gBACvG,sBAAsB,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBACvC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;aAC5C;iBAAM;gBACL,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC9B;SACF;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;IAEpD,IAAM,SAAS,GAAG,WAAW,CAAC;QAC5B,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;IAC7C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,uDAAuD;IACvD,eAAe,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IAElD,OAAO,EAAE,IAAI,MAAA,EAAE,QAAQ,UAAA,EAAE,SAAS,WAAA,EAAE,CAAC;AACvC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { RefObject, useCallback, useLayoutEffect, useRef } from 'react';\nimport { ButtonProps } from '../../button/interfaces';\n\nexport interface FocusControlState {\n  refs: {\n    toggle: RefObject<ButtonProps.Ref>;\n    close: RefObject<ButtonProps.Ref>;\n  };\n  setFocus: () => void;\n  loseFocus: () => void;\n}\n\nexport function useFocusControl(isOpen: boolean, restoreFocus = false): FocusControlState {\n  const refs = {\n    toggle: useRef<ButtonProps.Ref>(null),\n    close: useRef<ButtonProps.Ref>(null),\n  };\n  const previousFocusedElement = useRef<HTMLElement>();\n\n  const setFocus = useCallback(() => {\n    // due to mounting/remounting, this hook gets called multiple times for a single change,\n    // so we ignore any calls where the refs are undefined\n    if (!(refs.toggle.current || refs.close.current)) {\n      return;\n    }\n    if (isOpen) {\n      previousFocusedElement.current = document.activeElement as HTMLElement;\n      refs.close.current?.focus();\n    } else {\n      if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n        previousFocusedElement.current.focus();\n        previousFocusedElement.current = undefined;\n      } else {\n        refs.toggle.current?.focus();\n      }\n    }\n  }, [isOpen, restoreFocus, refs.close, refs.toggle]);\n\n  const loseFocus = useCallback(() => {\n    previousFocusedElement.current = undefined;\n  }, []);\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useLayoutEffect(setFocus, [isOpen, restoreFocus]);\n\n  return { refs, setFocus, loseFocus };\n}\n"]}
+{"version":3,"file":"use-focus-control.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-focus-control.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAa,WAAW,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAYxE,MAAM,UAAU,eAAe,CAAC,MAAe,EAAE,YAAY,GAAG,KAAK;IACnE,MAAM,IAAI,GAAG;QACX,MAAM,EAAE,MAAM,CAAkB,IAAI,CAAC;QACrC,KAAK,EAAE,MAAM,CAAkB,IAAI,CAAC;KACrC,CAAC;IACF,MAAM,sBAAsB,GAAG,MAAM,EAAe,CAAC;IAErD,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;;QAChC,wFAAwF;QACxF,sDAAsD;QACtD,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;YAChD,OAAO;SACR;QACD,IAAI,MAAM,EAAE;YACV,sBAAsB,CAAC,OAAO,GAAG,QAAQ,CAAC,aAA4B,CAAC;YACvE,MAAA,IAAI,CAAC,KAAK,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SAC7B;aAAM;YACL,IAAI,YAAY,IAAI,sBAAsB,CAAC,OAAO,IAAI,QAAQ,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE;gBACvG,sBAAsB,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBACvC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;aAC5C;iBAAM;gBACL,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC9B;SACF;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;IAEpD,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;IAC7C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,uDAAuD;IACvD,eAAe,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IAElD,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;AACvC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { RefObject, useCallback, useLayoutEffect, useRef } from 'react';\nimport { ButtonProps } from '../../button/interfaces';\n\nexport interface FocusControlState {\n  refs: {\n    toggle: RefObject<ButtonProps.Ref>;\n    close: RefObject<ButtonProps.Ref>;\n  };\n  setFocus: () => void;\n  loseFocus: () => void;\n}\n\nexport function useFocusControl(isOpen: boolean, restoreFocus = false): FocusControlState {\n  const refs = {\n    toggle: useRef<ButtonProps.Ref>(null),\n    close: useRef<ButtonProps.Ref>(null),\n  };\n  const previousFocusedElement = useRef<HTMLElement>();\n\n  const setFocus = useCallback(() => {\n    // due to mounting/remounting, this hook gets called multiple times for a single change,\n    // so we ignore any calls where the refs are undefined\n    if (!(refs.toggle.current || refs.close.current)) {\n      return;\n    }\n    if (isOpen) {\n      previousFocusedElement.current = document.activeElement as HTMLElement;\n      refs.close.current?.focus();\n    } else {\n      if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n        previousFocusedElement.current.focus();\n        previousFocusedElement.current = undefined;\n      } else {\n        refs.toggle.current?.focus();\n      }\n    }\n  }, [isOpen, restoreFocus, refs.close, refs.toggle]);\n\n  const loseFocus = useCallback(() => {\n    previousFocusedElement.current = undefined;\n  }, []);\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useLayoutEffect(setFocus, [isOpen, restoreFocus]);\n\n  return { refs, setFocus, loseFocus };\n}\n"]}

package/app-layout/utils/use-observed-element.js

@@ -3,11 +3,11 @@
 import { useResizeObserver } from '../../internal/hooks/container-queries';
 import { useCallback, useState } from 'react';
 export function useObservedElement(selector) {
-    var getElement = useCallback(function () {
+    const getElement = useCallback(() => {
         return document.querySelector(selector);
     }, [selector]);
-    var _a = useState(0), height = _a[0], setHeight = _a[1];
-    useResizeObserver(getElement, function (entry) { return setHeight(entry.borderBoxHeight); });
+    const [height, setHeight] = useState(0);
+    useResizeObserver(getElement, entry => setHeight(entry.borderBoxHeight));
     return height;
 }
 //# sourceMappingURL=use-observed-element.js.map

package/app-layout/utils/use-observed-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-observed-element.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-observed-element.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE9C,MAAM,UAAU,kBAAkB,CAAC,QAAgB;IACjD,IAAM,UAAU,GAAG,WAAW,CAAC;QAC7B,OAAO,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC1C,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAET,IAAA,KAAsB,QAAQ,CAAC,CAAC,CAAC,EAAhC,MAAM,QAAA,EAAE,SAAS,QAAe,CAAC;IAExC,iBAAiB,CAAC,UAAU,EAAE,UAAA,KAAK,IAAI,OAAA,SAAS,CAAC,KAAK,CAAC,eAAe,CAAC,EAAhC,CAAgC,CAAC,CAAC;IAEzE,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useResizeObserver } from '../../internal/hooks/container-queries';\nimport { useCallback, useState } from 'react';\n\nexport function useObservedElement(selector: string) {\n  const getElement = useCallback(() => {\n    return document.querySelector(selector);\n  }, [selector]);\n\n  const [height, setHeight] = useState(0);\n\n  useResizeObserver(getElement, entry => setHeight(entry.borderBoxHeight));\n\n  return height;\n}\n"]}
+{"version":3,"file":"use-observed-element.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-observed-element.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE9C,MAAM,UAAU,kBAAkB,CAAC,QAAgB;IACjD,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,OAAO,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC1C,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAExC,iBAAiB,CAAC,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC;IAEzE,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useResizeObserver } from '../../internal/hooks/container-queries';\nimport { useCallback, useState } from 'react';\n\nexport function useObservedElement(selector: string) {\n  const getElement = useCallback(() => {\n    return document.querySelector(selector);\n  }, [selector]);\n\n  const [height, setHeight] = useState(0);\n\n  useResizeObserver(getElement, entry => setHeight(entry.borderBoxHeight));\n\n  return height;\n}\n"]}

package/app-layout/utils/use-window-width.js

@@ -2,11 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 import { useEffect, useState } from 'react';
 export default function useWindowWidth() {
-    var _a = useState(function () { return (typeof window !== 'undefined' ? window.innerWidth : 0); }), width = _a[0], setWidth = _a[1];
-    useEffect(function () {
-        var handler = function () { return setWidth(window.innerWidth); };
+    const [width, setWidth] = useState(() => (typeof window !== 'undefined' ? window.innerWidth : 0));
+    useEffect(() => {
+        const handler = () => setWidth(window.innerWidth);
         window.addEventListener('resize', handler);
-        return function () { return window.removeEventListener('resize', handler); };
+        return () => window.removeEventListener('resize', handler);
     }, []);
     return width;
 }

package/app-layout/utils/use-window-width.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-window-width.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-window-width.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,CAAC,OAAO,UAAU,cAAc;IAC9B,IAAA,KAAoB,QAAQ,CAAC,cAAM,OAAA,CAAC,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,EAAvD,CAAuD,CAAC,EAA1F,KAAK,QAAA,EAAE,QAAQ,QAA2E,CAAC;IAClG,SAAS,CAAC;QACR,IAAM,OAAO,GAAG,cAAM,OAAA,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,EAA3B,CAA2B,CAAC;QAClD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QAC3C,OAAO,cAAM,OAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,EAA7C,CAA6C,CAAC;IAC7D,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useEffect, useState } from 'react';\n\nexport default function useWindowWidth() {\n  const [width, setWidth] = useState(() => (typeof window !== 'undefined' ? window.innerWidth : 0));\n  useEffect(() => {\n    const handler = () => setWidth(window.innerWidth);\n    window.addEventListener('resize', handler);\n    return () => window.removeEventListener('resize', handler);\n  }, []);\n  return width;\n}\n"]}
+{"version":3,"file":"use-window-width.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-window-width.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,CAAC,OAAO,UAAU,cAAc;IACpC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAClG,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QAClD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QAC3C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IAC7D,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useEffect, useState } from 'react';\n\nexport default function useWindowWidth() {\n  const [width, setWidth] = useState(() => (typeof window !== 'undefined' ? window.innerWidth : 0));\n  useEffect(() => {\n    const handler = () => setWidth(window.innerWidth);\n    window.addEventListener('resize', handler);\n    return () => window.removeEventListener('resize', handler);\n  }, []);\n  return width;\n}\n"]}

package/app-layout/visual-refresh/app-bar.js

@@ -12,28 +12,27 @@ import { useFocusControl } from '../utils/use-focus-control';
  * that the design tokens used are overridden with the appropriate values.
  */
 export default function AppBar() {
-    var _a, _b, _c, _d;
-    var _e, _f, _g;
-    var _h = useAppLayoutInternals(), ariaLabels = _h.ariaLabels, breadcrumbs = _h.breadcrumbs, contentHeader = _h.contentHeader, contentType = _h.contentType, dynamicOverlapHeight = _h.dynamicOverlapHeight, handleNavigationClick = _h.handleNavigationClick, handleToolsClick = _h.handleToolsClick, hasNotificationsContent = _h.hasNotificationsContent, hasStickyBackground = _h.hasStickyBackground, isMobile = _h.isMobile, navigationHide = _h.navigationHide, isNavigationOpen = _h.isNavigationOpen, isToolsOpen = _h.isToolsOpen, toolsHide = _h.toolsHide, isAnyPanelOpen = _h.isAnyPanelOpen;
-    var focusRefsNav = useFocusControl(isNavigationOpen).refs;
-    var focusRefsTools = useFocusControl(isToolsOpen, true).refs;
+    var _a, _b, _c;
+    const { ariaLabels, breadcrumbs, contentHeader, contentType, dynamicOverlapHeight, handleNavigationClick, handleToolsClick, hasNotificationsContent, hasStickyBackground, isMobile, navigationHide, isNavigationOpen, isToolsOpen, toolsHide, isAnyPanelOpen, } = useAppLayoutInternals();
+    const { refs: focusRefsNav } = useFocusControl(isNavigationOpen);
+    const { refs: focusRefsTools } = useFocusControl(isToolsOpen, true);
     if (navigationHide && !breadcrumbs && toolsHide) {
         return null;
     }
-    return (React.createElement("section", { "aria-hidden": !isMobile && !breadcrumbs ? true : undefined, className: clsx(styles.appbar, (_a = {},
-            _a[styles['has-breadcrumbs']] = breadcrumbs,
-            _a[styles.unfocusable] = isMobile && isAnyPanelOpen,
-            _a[testutilStyles['mobile-bar']] = isMobile,
-            _a), 'awsui-context-content-header') },
-        !navigationHide && isMobile && (React.createElement("nav", { className: clsx(styles['appbar-nav'], (_b = {}, _b[testutilStyles['drawer-closed']] = !isNavigationOpen, _b)), "aria-hidden": isNavigationOpen },
-            React.createElement(InternalButton, { ariaLabel: (_e = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationToggle) !== null && _e !== void 0 ? _e : undefined, ariaExpanded: isNavigationOpen ? undefined : false, iconName: "menu", formAction: "none", onClick: function () { return handleNavigationClick(true); }, variant: "icon", className: testutilStyles['navigation-toggle'], ref: focusRefsNav.toggle, disabled: isAnyPanelOpen, __nativeAttributes: { 'aria-haspopup': isNavigationOpen ? undefined : true } }))),
-        breadcrumbs && (React.createElement("div", { className: clsx(styles.breadcrumbs, styles["content-type-".concat(contentType)], testutilStyles.breadcrumbs, (_c = {},
-                _c[styles['has-dynamic-overlap-height']] = dynamicOverlapHeight > 0,
-                _c[styles['has-header']] = contentHeader,
-                _c[styles['has-notifications-content']] = hasNotificationsContent,
-                _c[styles['has-sticky-background']] = hasStickyBackground,
-                _c)) }, breadcrumbs)),
-        !toolsHide && isMobile && (React.createElement("aside", { className: clsx(styles['appbar-tools'], (_d = {}, _d[testutilStyles['drawer-closed']] = !isToolsOpen, _d)), "aria-hidden": isToolsOpen, "aria-label": (_f = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools) !== null && _f !== void 0 ? _f : undefined },
-            React.createElement(InternalButton, { className: testutilStyles['tools-toggle'], ariaExpanded: isToolsOpen, disabled: isAnyPanelOpen, ariaLabel: (_g = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsToggle) !== null && _g !== void 0 ? _g : undefined, iconName: "status-info", formAction: "none", onClick: function () { return handleToolsClick(true); }, variant: "icon", ref: focusRefsTools.toggle, __nativeAttributes: { 'aria-haspopup': true } })))));
+    return (React.createElement("section", { "aria-hidden": !isMobile && !breadcrumbs ? true : undefined, className: clsx(styles.appbar, {
+            [styles['has-breadcrumbs']]: breadcrumbs,
+            [styles.unfocusable]: isMobile && isAnyPanelOpen,
+            [testutilStyles['mobile-bar']]: isMobile,
+        }, 'awsui-context-content-header') },
+        !navigationHide && isMobile && (React.createElement("nav", { className: clsx(styles['appbar-nav'], { [testutilStyles['drawer-closed']]: !isNavigationOpen }), "aria-hidden": isNavigationOpen },
+            React.createElement(InternalButton, { ariaLabel: (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationToggle) !== null && _a !== void 0 ? _a : undefined, ariaExpanded: isNavigationOpen ? undefined : false, iconName: "menu", formAction: "none", onClick: () => handleNavigationClick(true), variant: "icon", className: testutilStyles['navigation-toggle'], ref: focusRefsNav.toggle, disabled: isAnyPanelOpen, __nativeAttributes: { 'aria-haspopup': isNavigationOpen ? undefined : true } }))),
+        breadcrumbs && (React.createElement("div", { className: clsx(styles.breadcrumbs, styles[`content-type-${contentType}`], testutilStyles.breadcrumbs, {
+                [styles['has-dynamic-overlap-height']]: dynamicOverlapHeight > 0,
+                [styles['has-header']]: contentHeader,
+                [styles['has-notifications-content']]: hasNotificationsContent,
+                [styles['has-sticky-background']]: hasStickyBackground,
+            }) }, breadcrumbs)),
+        !toolsHide && isMobile && (React.createElement("aside", { className: clsx(styles['appbar-tools'], { [testutilStyles['drawer-closed']]: !isToolsOpen }), "aria-hidden": isToolsOpen, "aria-label": (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools) !== null && _b !== void 0 ? _b : undefined },
+            React.createElement(InternalButton, { className: testutilStyles['tools-toggle'], ariaExpanded: isToolsOpen, disabled: isAnyPanelOpen, ariaLabel: (_c = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsToggle) !== null && _c !== void 0 ? _c : undefined, iconName: "status-info", formAction: "none", onClick: () => handleToolsClick(true), variant: "icon", ref: focusRefsTools.toggle, __nativeAttributes: { 'aria-haspopup': true } })))));
 }
 //# sourceMappingURL=app-bar.js.map

package/app-layout/visual-refresh/app-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-bar.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/app-bar.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,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM;;;IACtB,IAAA,KAgBF,qBAAqB,EAAE,EAfzB,UAAU,gBAAA,EACV,WAAW,iBAAA,EACX,aAAa,mBAAA,EACb,WAAW,iBAAA,EACX,oBAAoB,0BAAA,EACpB,qBAAqB,2BAAA,EACrB,gBAAgB,sBAAA,EAChB,uBAAuB,6BAAA,EACvB,mBAAmB,yBAAA,EACnB,QAAQ,cAAA,EACR,cAAc,oBAAA,EACd,gBAAgB,sBAAA,EAChB,WAAW,iBAAA,EACX,SAAS,eAAA,EACT,cAAc,oBACW,CAAC;IACpB,IAAM,YAAY,GAAK,eAAe,CAAC,gBAAgB,CAAC,KAAtC,CAAuC;IACzD,IAAM,cAAc,GAAK,eAAe,CAAC,WAAW,EAAE,IAAI,CAAC,KAAvC,CAAwC;IAEpE,IAAI,cAAc,IAAI,CAAC,WAAW,IAAI,SAAS,EAAE;QAC/C,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,gDACe,CAAC,QAAQ,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACzD,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,MAAM;YAEX,GAAC,MAAM,CAAC,iBAAiB,CAAC,IAAG,WAAW;YACxC,GAAC,MAAM,CAAC,WAAW,IAAG,QAAQ,IAAI,cAAc;YAChD,GAAC,cAAc,CAAC,YAAY,CAAC,IAAG,QAAQ;iBAE1C,8BAA8B,CAC/B;QAEA,CAAC,cAAc,IAAI,QAAQ,IAAI,CAC9B,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,YAAI,GAAC,cAAc,CAAC,eAAe,CAAC,IAAG,CAAC,gBAAgB,MAAG,iBAClF,gBAAgB;YAE7B,oBAAC,cAAc,IACb,SAAS,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,gBAAgB,mCAAI,SAAS,EACpD,YAAY,EAAE,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAClD,QAAQ,EAAC,MAAM,EACf,UAAU,EAAC,MAAM,EACjB,OAAO,EAAE,cAAM,OAAA,qBAAqB,CAAC,IAAI,CAAC,EAA3B,CAA2B,EAC1C,OAAO,EAAC,MAAM,EACd,SAAS,EAAE,cAAc,CAAC,mBAAmB,CAAC,EAC9C,GAAG,EAAE,YAAY,CAAC,MAAM,EACxB,QAAQ,EAAE,cAAc,EACxB,kBAAkB,EAAE,EAAE,eAAe,EAAE,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAAE,GAC5E,CACE,CACP;QAEA,WAAW,IAAI,CACd,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,uBAAgB,WAAW,CAAE,CAAC,EAAE,cAAc,CAAC,WAAW;gBACnG,GAAC,MAAM,CAAC,4BAA4B,CAAC,IAAG,oBAAoB,GAAG,CAAC;gBAChE,GAAC,MAAM,CAAC,YAAY,CAAC,IAAG,aAAa;gBACrC,GAAC,MAAM,CAAC,2BAA2B,CAAC,IAAG,uBAAuB;gBAC9D,GAAC,MAAM,CAAC,uBAAuB,CAAC,IAAG,mBAAmB;oBACtD,IAED,WAAW,CACR,CACP;QAEA,CAAC,SAAS,IAAI,QAAQ,IAAI,CACzB,+BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,YAAI,GAAC,cAAc,CAAC,eAAe,CAAC,IAAG,CAAC,WAAW,MAAG,iBAC/E,WAAW,gBACZ,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,mCAAI,SAAS;YAE1C,oBAAC,cAAc,IACb,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC,EACzC,YAAY,EAAE,WAAW,EACzB,QAAQ,EAAE,cAAc,EACxB,SAAS,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,WAAW,mCAAI,SAAS,EAC/C,QAAQ,EAAC,aAAa,EACtB,UAAU,EAAC,MAAM,EACjB,OAAO,EAAE,cAAM,OAAA,gBAAgB,CAAC,IAAI,CAAC,EAAtB,CAAsB,EACrC,OAAO,EAAC,MAAM,EACd,GAAG,EAAE,cAAc,CAAC,MAAM,EAC1B,kBAAkB,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,GAC7C,CACI,CACT,CACO,CACX,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 { InternalButton } from '../../button/internal';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { useFocusControl } from '../utils/use-focus-control';\n\n/**\n * The CSS class 'awsui-context-content-header' needs to be added to the root element so\n * that the design tokens used are overridden with the appropriate values.\n */\nexport default function AppBar() {\n  const {\n    ariaLabels,\n    breadcrumbs,\n    contentHeader,\n    contentType,\n    dynamicOverlapHeight,\n    handleNavigationClick,\n    handleToolsClick,\n    hasNotificationsContent,\n    hasStickyBackground,\n    isMobile,\n    navigationHide,\n    isNavigationOpen,\n    isToolsOpen,\n    toolsHide,\n    isAnyPanelOpen,\n  } = useAppLayoutInternals();\n  const { refs: focusRefsNav } = useFocusControl(isNavigationOpen);\n  const { refs: focusRefsTools } = useFocusControl(isToolsOpen, true);\n\n  if (navigationHide && !breadcrumbs && toolsHide) {\n    return null;\n  }\n\n  return (\n    <section\n      aria-hidden={!isMobile && !breadcrumbs ? true : undefined}\n      className={clsx(\n        styles.appbar,\n        {\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles.unfocusable]: isMobile && isAnyPanelOpen,\n          [testutilStyles['mobile-bar']]: isMobile,\n        },\n        'awsui-context-content-header'\n      )}\n    >\n      {!navigationHide && isMobile && (\n        <nav\n          className={clsx(styles['appbar-nav'], { [testutilStyles['drawer-closed']]: !isNavigationOpen })}\n          aria-hidden={isNavigationOpen}\n        >\n          <InternalButton\n            ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n            ariaExpanded={isNavigationOpen ? undefined : false}\n            iconName=\"menu\"\n            formAction=\"none\"\n            onClick={() => handleNavigationClick(true)}\n            variant=\"icon\"\n            className={testutilStyles['navigation-toggle']}\n            ref={focusRefsNav.toggle}\n            disabled={isAnyPanelOpen}\n            __nativeAttributes={{ 'aria-haspopup': isNavigationOpen ? undefined : true }}\n          />\n        </nav>\n      )}\n\n      {breadcrumbs && (\n        <div\n          className={clsx(styles.breadcrumbs, styles[`content-type-${contentType}`], testutilStyles.breadcrumbs, {\n            [styles['has-dynamic-overlap-height']]: dynamicOverlapHeight > 0,\n            [styles['has-header']]: contentHeader,\n            [styles['has-notifications-content']]: hasNotificationsContent,\n            [styles['has-sticky-background']]: hasStickyBackground,\n          })}\n        >\n          {breadcrumbs}\n        </div>\n      )}\n\n      {!toolsHide && isMobile && (\n        <aside\n          className={clsx(styles['appbar-tools'], { [testutilStyles['drawer-closed']]: !isToolsOpen })}\n          aria-hidden={isToolsOpen}\n          aria-label={ariaLabels?.tools ?? undefined}\n        >\n          <InternalButton\n            className={testutilStyles['tools-toggle']}\n            ariaExpanded={isToolsOpen}\n            disabled={isAnyPanelOpen}\n            ariaLabel={ariaLabels?.toolsToggle ?? undefined}\n            iconName=\"status-info\"\n            formAction=\"none\"\n            onClick={() => handleToolsClick(true)}\n            variant=\"icon\"\n            ref={focusRefsTools.toggle}\n            __nativeAttributes={{ 'aria-haspopup': true }}\n          />\n        </aside>\n      )}\n    </section>\n  );\n}\n"]}
+{"version":3,"file":"app-bar.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/app-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { useAppLayoutInternals } from './context';\nimport { InternalButton } from '../../button/internal';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { useFocusControl } from '../utils/use-focus-control';\n\n/**\n * The CSS class 'awsui-context-content-header' needs to be added to the root element so\n * that the design tokens used are overridden with the appropriate values.\n */\nexport default function AppBar() {\n  const {\n    ariaLabels,\n    breadcrumbs,\n    contentHeader,\n    contentType,\n    dynamicOverlapHeight,\n    handleNavigationClick,\n    handleToolsClick,\n    hasNotificationsContent,\n    hasStickyBackground,\n    isMobile,\n    navigationHide,\n    isNavigationOpen,\n    isToolsOpen,\n    toolsHide,\n    isAnyPanelOpen,\n  } = useAppLayoutInternals();\n  const { refs: focusRefsNav } = useFocusControl(isNavigationOpen);\n  const { refs: focusRefsTools } = useFocusControl(isToolsOpen, true);\n\n  if (navigationHide && !breadcrumbs && toolsHide) {\n    return null;\n  }\n\n  return (\n    <section\n      aria-hidden={!isMobile && !breadcrumbs ? true : undefined}\n      className={clsx(\n        styles.appbar,\n        {\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles.unfocusable]: isMobile && isAnyPanelOpen,\n          [testutilStyles['mobile-bar']]: isMobile,\n        },\n        'awsui-context-content-header'\n      )}\n    >\n      {!navigationHide && isMobile && (\n        <nav\n          className={clsx(styles['appbar-nav'], { [testutilStyles['drawer-closed']]: !isNavigationOpen })}\n          aria-hidden={isNavigationOpen}\n        >\n          <InternalButton\n            ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n            ariaExpanded={isNavigationOpen ? undefined : false}\n            iconName=\"menu\"\n            formAction=\"none\"\n            onClick={() => handleNavigationClick(true)}\n            variant=\"icon\"\n            className={testutilStyles['navigation-toggle']}\n            ref={focusRefsNav.toggle}\n            disabled={isAnyPanelOpen}\n            __nativeAttributes={{ 'aria-haspopup': isNavigationOpen ? undefined : true }}\n          />\n        </nav>\n      )}\n\n      {breadcrumbs && (\n        <div\n          className={clsx(styles.breadcrumbs, styles[`content-type-${contentType}`], testutilStyles.breadcrumbs, {\n            [styles['has-dynamic-overlap-height']]: dynamicOverlapHeight > 0,\n            [styles['has-header']]: contentHeader,\n            [styles['has-notifications-content']]: hasNotificationsContent,\n            [styles['has-sticky-background']]: hasStickyBackground,\n          })}\n        >\n          {breadcrumbs}\n        </div>\n      )}\n\n      {!toolsHide && isMobile && (\n        <aside\n          className={clsx(styles['appbar-tools'], { [testutilStyles['drawer-closed']]: !isToolsOpen })}\n          aria-hidden={isToolsOpen}\n          aria-label={ariaLabels?.tools ?? undefined}\n        >\n          <InternalButton\n            className={testutilStyles['tools-toggle']}\n            ariaExpanded={isToolsOpen}\n            disabled={isAnyPanelOpen}\n            ariaLabel={ariaLabels?.toolsToggle ?? undefined}\n            iconName=\"status-info\"\n            formAction=\"none\"\n            onClick={() => handleToolsClick(true)}\n            variant=\"icon\"\n            ref={focusRefsTools.toggle}\n            __nativeAttributes={{ 'aria-haspopup': true }}\n          />\n        </aside>\n      )}\n    </section>\n  );\n}\n"]}

package/app-layout/visual-refresh/background.js

@@ -9,16 +9,15 @@ import styles from './styles.css.js';
  * that the design tokens used are overridden with the appropriate values.
  */
 export default function Background() {
-    var _a, _b;
-    var _c = useAppLayoutInternals(), hasNotificationsContent = _c.hasNotificationsContent, hasStickyBackground = _c.hasStickyBackground, stickyNotifications = _c.stickyNotifications;
+    const { hasNotificationsContent, hasStickyBackground, stickyNotifications } = useAppLayoutInternals();
     return (React.createElement("div", { className: clsx(styles.background, 'awsui-context-content-header') },
-        React.createElement("div", { className: clsx(styles['notifications-appbar-header'], (_a = {},
-                _a[styles['has-notifications-content']] = hasNotificationsContent,
-                _a[styles['has-sticky-background']] = hasStickyBackground,
-                _a[styles['sticky-notifications']] = stickyNotifications,
-                _a)) }),
-        React.createElement("div", { className: clsx(styles.overlap, (_b = {},
-                _b[styles['has-sticky-background']] = hasStickyBackground,
-                _b)) })));
+        React.createElement("div", { className: clsx(styles['notifications-appbar-header'], {
+                [styles['has-notifications-content']]: hasNotificationsContent,
+                [styles['has-sticky-background']]: hasStickyBackground,
+                [styles['sticky-notifications']]: stickyNotifications,
+            }) }),
+        React.createElement("div", { className: clsx(styles.overlap, {
+                [styles['has-sticky-background']]: hasStickyBackground,
+            }) })));
 }
 //# sourceMappingURL=background.js.map