npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.252 → 3.0.253 - Mend

@cloudscape-design/components-themeable 3.0.252 → 3.0.253

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (118) hide show

package/lib/internal/template/app-layout/mobile-toolbar/styles.scoped.css CHANGED Viewed

@@ -94,11 +94,11 @@ 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_block-body-scroll_19d8l_1jj8i_97:not(#\9) {
+.awsui_block-body-scroll_19d8l_1oc1l_97:not(#\9) {
   overflow: hidden;
 }
-.awsui_mobile-bar_19d8l_1jj8i_101:not(#\9) {
+.awsui_mobile-bar_19d8l_1oc1l_101:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   position: sticky;
   display: flex;
@@ -112,26 +112,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   height: calc(2 * var(--space-m-17eucw, 16px) + var(--space-scaled-xs-6859qs, 8px));
 }
-.awsui_mobile-bar-breadcrumbs_19d8l_1jj8i_115:not(#\9) {
+.awsui_mobile-bar-breadcrumbs_19d8l_1oc1l_115:not(#\9) {
   min-width: 0;
   flex: 1;
   margin-left: var(--space-m-17eucw, 16px);
   margin-right: var(--space-m-17eucw, 16px);
 }
-.awsui_mobile-toggle_19d8l_1jj8i_122:not(#\9) {
+.awsui_mobile-toggle_19d8l_1oc1l_122:not(#\9) {
   box-sizing: border-box;
   cursor: pointer;
   z-index: 1;
   padding: var(--space-xxs-ynfts5, 4px) 7px;
   width: 40px;
 }
-.awsui_mobile-toggle_19d8l_1jj8i_122:not(#\9):first-child {
+.awsui_mobile-toggle_19d8l_1oc1l_122:not(#\9):first-child {
   border-right: 1px solid var(--color-border-layout-ifju5o, #d5dbdb);
 }
-.awsui_mobile-toggle_19d8l_1jj8i_122:not(#\9):last-child {
+.awsui_mobile-toggle_19d8l_1oc1l_122:not(#\9):last-child {
   border-left: 1px solid var(--color-border-layout-ifju5o, #d5dbdb);
 }
-.awsui_mobile-toggle_19d8l_1jj8i_122:not(#\9):hover {
+.awsui_mobile-toggle_19d8l_1oc1l_122:not(#\9):hover:not(.awsui_mobile-toggle-with-drawers_19d8l_1oc1l_135) {
   background: var(--color-background-layout-panel-hover-thdv3z, #eaeded);
+}
+.awsui_mobile-toggle-with-drawers_19d8l_1oc1l_135:not(#\9) {
+  display: flex;
+  width: auto;
 }

package/lib/internal/template/app-layout/mobile-toolbar/styles.selectors.js CHANGED Viewed

@@ -2,9 +2,10 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "block-body-scroll": "awsui_block-body-scroll_19d8l_1jj8i_97",
-  "mobile-bar": "awsui_mobile-bar_19d8l_1jj8i_101",
-  "mobile-bar-breadcrumbs": "awsui_mobile-bar-breadcrumbs_19d8l_1jj8i_115",
-  "mobile-toggle": "awsui_mobile-toggle_19d8l_1jj8i_122"
+  "block-body-scroll": "awsui_block-body-scroll_19d8l_1oc1l_97",
+  "mobile-bar": "awsui_mobile-bar_19d8l_1oc1l_101",
+  "mobile-bar-breadcrumbs": "awsui_mobile-bar-breadcrumbs_19d8l_1oc1l_115",
+  "mobile-toggle": "awsui_mobile-toggle_19d8l_1oc1l_122",
+  "mobile-toggle-with-drawers": "awsui_mobile-toggle-with-drawers_19d8l_1oc1l_135"
 };

package/lib/internal/template/app-layout/notifications/styles.css.js CHANGED Viewed

@@ -1,8 +1,8 @@
     import './styles.scoped.css';
     export default {
-  "notifications": "awsui_notifications_1hmm4_e0954_9",
-  "notifications-sticky": "awsui_notifications-sticky_1hmm4_e0954_10",
-  "no-content-paddings": "awsui_no-content-paddings_1hmm4_e0954_25"
+  "notifications": "awsui_notifications_1hmm4_1tp3h_9",
+  "notifications-sticky": "awsui_notifications-sticky_1hmm4_1tp3h_10",
+  "no-content-paddings": "awsui_no-content-paddings_1hmm4_1tp3h_25"
 };

package/lib/internal/template/app-layout/notifications/styles.scoped.css CHANGED Viewed

@@ -6,26 +6,26 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_notifications_1hmm4_e0954_9:not(#\9),
-.awsui_notifications-sticky_1hmm4_e0954_10:not(#\9) {
+.awsui_notifications_1hmm4_1tp3h_9:not(#\9),
+.awsui_notifications-sticky_1hmm4_1tp3h_10:not(#\9) {
   z-index: 850;
 }
-.awsui_notifications_1hmm4_e0954_9:not(#\9) {
+.awsui_notifications_1hmm4_1tp3h_9:not(#\9) {
   /* This is necessary for the z-index to have effect */
   position: relative;
 }
-.awsui_notifications-sticky_1hmm4_e0954_10:not(#\9) {
+.awsui_notifications-sticky_1hmm4_1tp3h_10:not(#\9) {
   top: 0;
   position: sticky;
-  --awsui-flashbar-sticky-bottom-margin-lgrg0d: var(--space-xxl-2nvmf1, 32px);
+  --awsui-flashbar-sticky-bottom-margin-3j0evk: var(--space-xxl-2nvmf1, 32px);
 }
-.awsui_no-content-paddings_1hmm4_e0954_25:not(#\9) {
+.awsui_no-content-paddings_1hmm4_1tp3h_25:not(#\9) {
   /*
   When using the disableContentPaddings option, the Flashbar will use this custom property to add additional space
   when the notification bar is rendered, to prevent it from overlapping the content.
    */
-  --awsui-stacked-notifications-bottom-margin-lgrg0d: var(--space-scaled-l-t03y3z, 20px);
+  --awsui-stacked-notifications-bottom-margin-3j0evk: var(--space-scaled-l-t03y3z, 20px);
 }

package/lib/internal/template/app-layout/notifications/styles.selectors.js CHANGED Viewed

@@ -2,8 +2,8 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "notifications": "awsui_notifications_1hmm4_e0954_9",
-  "notifications-sticky": "awsui_notifications-sticky_1hmm4_e0954_10",
-  "no-content-paddings": "awsui_no-content-paddings_1hmm4_e0954_25"
+  "notifications": "awsui_notifications_1hmm4_1tp3h_9",
+  "notifications-sticky": "awsui_notifications-sticky_1hmm4_1tp3h_10",
+  "no-content-paddings": "awsui_no-content-paddings_1hmm4_1tp3h_25"
 };

package/lib/internal/template/app-layout/test-classes/styles.css.js CHANGED Viewed

@@ -1,18 +1,23 @@
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_1fj9k_avnjw_5",
-  "navigation": "awsui_navigation_1fj9k_avnjw_9",
-  "navigation-toggle": "awsui_navigation-toggle_1fj9k_avnjw_13",
-  "navigation-close": "awsui_navigation-close_1fj9k_avnjw_17",
-  "content": "awsui_content_1fj9k_avnjw_21",
-  "notifications": "awsui_notifications_1fj9k_avnjw_25",
-  "breadcrumbs": "awsui_breadcrumbs_1fj9k_avnjw_29",
-  "tools": "awsui_tools_1fj9k_avnjw_33",
-  "tools-close": "awsui_tools-close_1fj9k_avnjw_37",
-  "tools-toggle": "awsui_tools-toggle_1fj9k_avnjw_41",
-  "drawer-closed": "awsui_drawer-closed_1fj9k_avnjw_45",
-  "mobile-bar": "awsui_mobile-bar_1fj9k_avnjw_49",
-  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_avnjw_53"
+  "root": "awsui_root_1fj9k_tjzk8_5",
+  "navigation": "awsui_navigation_1fj9k_tjzk8_9",
+  "navigation-toggle": "awsui_navigation-toggle_1fj9k_tjzk8_13",
+  "navigation-close": "awsui_navigation-close_1fj9k_tjzk8_17",
+  "content": "awsui_content_1fj9k_tjzk8_21",
+  "notifications": "awsui_notifications_1fj9k_tjzk8_25",
+  "breadcrumbs": "awsui_breadcrumbs_1fj9k_tjzk8_29",
+  "tools": "awsui_tools_1fj9k_tjzk8_33",
+  "tools-close": "awsui_tools-close_1fj9k_tjzk8_37",
+  "tools-toggle": "awsui_tools-toggle_1fj9k_tjzk8_41",
+  "drawer-closed": "awsui_drawer-closed_1fj9k_tjzk8_45",
+  "mobile-bar": "awsui_mobile-bar_1fj9k_tjzk8_49",
+  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_tjzk8_53",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1fj9k_tjzk8_57",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1fj9k_tjzk8_61",
+  "drawers-trigger": "awsui_drawers-trigger_1fj9k_tjzk8_65",
+  "active-drawer": "awsui_active-drawer_1fj9k_tjzk8_69",
+  "active-drawer-close-button": "awsui_active-drawer-close-button_1fj9k_tjzk8_73"
 };

package/lib/internal/template/app-layout/test-classes/styles.scoped.css CHANGED Viewed

@@ -2,54 +2,74 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_1fj9k_avnjw_5:not(#\9) {
+.awsui_root_1fj9k_tjzk8_5:not(#\9) {
   /* used in test-utils */
 }
-.awsui_navigation_1fj9k_avnjw_9:not(#\9) {
+.awsui_navigation_1fj9k_tjzk8_9:not(#\9) {
   /* used in test-utils */
 }
-.awsui_navigation-toggle_1fj9k_avnjw_13:not(#\9) {
+.awsui_navigation-toggle_1fj9k_tjzk8_13:not(#\9) {
   /* used in test-utils */
 }
-.awsui_navigation-close_1fj9k_avnjw_17:not(#\9) {
+.awsui_navigation-close_1fj9k_tjzk8_17:not(#\9) {
   /* used in test-utils */
 }
-.awsui_content_1fj9k_avnjw_21:not(#\9) {
+.awsui_content_1fj9k_tjzk8_21:not(#\9) {
   /* used in test-utils */
 }
-.awsui_notifications_1fj9k_avnjw_25:not(#\9) {
+.awsui_notifications_1fj9k_tjzk8_25:not(#\9) {
   /* used in test-utils */
 }
-.awsui_breadcrumbs_1fj9k_avnjw_29:not(#\9) {
+.awsui_breadcrumbs_1fj9k_tjzk8_29:not(#\9) {
   /* used in test-utils */
 }
-.awsui_tools_1fj9k_avnjw_33:not(#\9) {
+.awsui_tools_1fj9k_tjzk8_33:not(#\9) {
   /* used in test-utils */
 }
-.awsui_tools-close_1fj9k_avnjw_37:not(#\9) {
+.awsui_tools-close_1fj9k_tjzk8_37:not(#\9) {
   /* used in test-utils */
 }
-.awsui_tools-toggle_1fj9k_avnjw_41:not(#\9) {
+.awsui_tools-toggle_1fj9k_tjzk8_41:not(#\9) {
   /* used in test-utils */
 }
-.awsui_drawer-closed_1fj9k_avnjw_45:not(#\9) {
+.awsui_drawer-closed_1fj9k_tjzk8_45:not(#\9) {
   /* used in test-utils */
 }
-.awsui_mobile-bar_1fj9k_avnjw_49:not(#\9) {
+.awsui_mobile-bar_1fj9k_tjzk8_49:not(#\9) {
   /* used in tests */
 }
-.awsui_disable-body-scroll-root_1fj9k_avnjw_53:not(#\9) {
+.awsui_disable-body-scroll-root_1fj9k_tjzk8_53:not(#\9) {
+  /* used in tests */
+}
+.awsui_drawers-desktop-triggers-container_1fj9k_tjzk8_57:not(#\9) {
+  /* used in tests */
+}
+.awsui_drawers-mobile-triggers-container_1fj9k_tjzk8_61:not(#\9) {
+  /* used in tests */
+}
+.awsui_drawers-trigger_1fj9k_tjzk8_65:not(#\9) {
+  /* used in tests */
+}
+.awsui_active-drawer_1fj9k_tjzk8_69:not(#\9) {
+  /* used in tests */
+}
+.awsui_active-drawer-close-button_1fj9k_tjzk8_73:not(#\9) {
   /* used in tests */
 }

package/lib/internal/template/app-layout/test-classes/styles.selectors.js CHANGED Viewed

@@ -2,18 +2,23 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_1fj9k_avnjw_5",
-  "navigation": "awsui_navigation_1fj9k_avnjw_9",
-  "navigation-toggle": "awsui_navigation-toggle_1fj9k_avnjw_13",
-  "navigation-close": "awsui_navigation-close_1fj9k_avnjw_17",
-  "content": "awsui_content_1fj9k_avnjw_21",
-  "notifications": "awsui_notifications_1fj9k_avnjw_25",
-  "breadcrumbs": "awsui_breadcrumbs_1fj9k_avnjw_29",
-  "tools": "awsui_tools_1fj9k_avnjw_33",
-  "tools-close": "awsui_tools-close_1fj9k_avnjw_37",
-  "tools-toggle": "awsui_tools-toggle_1fj9k_avnjw_41",
-  "drawer-closed": "awsui_drawer-closed_1fj9k_avnjw_45",
-  "mobile-bar": "awsui_mobile-bar_1fj9k_avnjw_49",
-  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_avnjw_53"
+  "root": "awsui_root_1fj9k_tjzk8_5",
+  "navigation": "awsui_navigation_1fj9k_tjzk8_9",
+  "navigation-toggle": "awsui_navigation-toggle_1fj9k_tjzk8_13",
+  "navigation-close": "awsui_navigation-close_1fj9k_tjzk8_17",
+  "content": "awsui_content_1fj9k_tjzk8_21",
+  "notifications": "awsui_notifications_1fj9k_tjzk8_25",
+  "breadcrumbs": "awsui_breadcrumbs_1fj9k_tjzk8_29",
+  "tools": "awsui_tools_1fj9k_tjzk8_33",
+  "tools-close": "awsui_tools-close_1fj9k_tjzk8_37",
+  "tools-toggle": "awsui_tools-toggle_1fj9k_tjzk8_41",
+  "drawer-closed": "awsui_drawer-closed_1fj9k_tjzk8_45",
+  "mobile-bar": "awsui_mobile-bar_1fj9k_tjzk8_49",
+  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_tjzk8_53",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1fj9k_tjzk8_57",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1fj9k_tjzk8_61",
+  "drawers-trigger": "awsui_drawers-trigger_1fj9k_tjzk8_65",
+  "active-drawer": "awsui_active-drawer_1fj9k_tjzk8_69",
+  "active-drawer-close-button": "awsui_active-drawer-close-button_1fj9k_tjzk8_73"
 };

package/lib/internal/template/app-layout/toggles/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/toggles/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGpD,eAAO,MAAM,aAAa;;;;sCAIF,eAAe,MAAM;;;;;;;;;sCASrB,eAAe,MAAM;;;;;;CAMnC,CAAC;AAEX,eAAO,MAAM,eAAe,~~8FAoB3B~~,CAAC;AAEF,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,0FAevB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/toggles/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGpD,eAAO,MAAM,aAAa;;;;sCAIF,eAAe,MAAM;;;;;;;;;sCASrB,eAAe,MAAM;;;;;;CAMnC,CAAC;AAEX,eAAO,MAAM,eAAe,8FAqB3B,CAAC;AAEF,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,0FAevB,CAAC"}

package/lib/internal/template/app-layout/toggles/index.js CHANGED Viewed

@@ -23,8 +23,8 @@ export const togglesConfig = {
         }),
     },
 };
-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 const AppLayoutButton = React.forwardRef(({ className, ariaLabel, ariaExpanded, iconName, iconSvg, disabled, onClick }, ref) => {
+    return (React.createElement(InternalButton, { ref: ref, className: className, ariaLabel: ariaLabel, variant: "icon", formAction: "none", onClick: onClick, iconName: iconName, iconSvg: iconSvg, disabled: disabled, ariaExpanded: ariaExpanded ? undefined : false, __nativeAttributes: { 'aria-haspopup': ariaExpanded ? undefined : true } }));
 });
 export const CloseButton = React.forwardRef(({ className, ariaLabel, onClick }, ref) => {
     return (React.createElement("span", { className: styles['close-button'] },

package/lib/internal/template/app-layout/toggles/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/toggles/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,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;AAQF,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAoB,EAAE,GAA+B,EAAE,EAAE;IACvF,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,EAAC,OAAO,EAChB,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 { 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}\n\nexport const CloseButton = React.forwardRef(\n ({ className, ariaLabel, onClick }: 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=\"close\"\n onClick={onClick}\n />\n </span>\n );\n }\n);\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/toggles/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,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,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAwB,EAClG,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,OAAO,EAAE,OAAO,EAChB,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;AAQF,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAoB,EAAE,GAA+B,EAAE,EAAE;IACvF,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,EAAC,OAAO,EAChB,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 { 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, iconSvg, 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 iconSvg={iconSvg}\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}\n\nexport const CloseButton = React.forwardRef(\n ({ className, ariaLabel, onClick }: 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=\"close\"\n onClick={onClick}\n />\n </span>\n );\n }\n);\n"]}

package/lib/internal/template/app-layout/toggles/interfaces.d.ts CHANGED Viewed

@@ -1,9 +1,11 @@
+/// <reference types="react" />
 import { IconProps } from '../../icon/interfaces';
 export interface AppLayoutButtonProps {
     className?: string;
     ariaLabel: string | undefined;
     ariaExpanded?: boolean;
-    iconName: IconProps.Name;
+    iconName?: IconProps.Name;
+    iconSvg?: React.ReactNode;
     onClick: () => void;
     disabled?: boolean;
 }

package/lib/internal/template/app-layout/toggles/interfaces.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/toggles/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC;~~IACzB~~,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}
1	+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/toggles/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/lib/internal/template/app-layout/toggles/interfaces.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/toggles/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { IconProps } from '../../icon/interfaces';\n\nexport interface AppLayoutButtonProps {\n className?: string;\n ariaLabel: string \| undefined;\n ariaExpanded?: boolean;\n iconName: IconProps.Name;\n onClick: () => void;\n disabled?: boolean;\n}\n"]}
1	+ {"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/toggles/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { IconProps } from '../../icon/interfaces';\n\nexport interface AppLayoutButtonProps {\n className?: string;\n ariaLabel: string \| undefined;\n ariaExpanded?: boolean;\n iconName?: IconProps.Name;\n iconSvg?: React.ReactNode;\n onClick: () => void;\n disabled?: boolean;\n}\n"]}

package/lib/internal/template/app-layout/utils/use-drawer-focus-control.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import { DependencyList, RefObject } from 'react';
+import { ButtonProps } from '../../button/interfaces';
+export type DrawerLastInteraction = {
+    type: 'open';
+} | {
+    type: 'close';
+};
+export interface DrawerFocusControlRefs {
+    toggle: RefObject<ButtonProps.Ref>;
+    close: RefObject<ButtonProps.Ref>;
+    slider: RefObject<HTMLDivElement>;
+}
+interface FocusControlState {
+    refs: DrawerFocusControlRefs;
+    setFocus: (force?: boolean) => void;
+    loseFocus: () => void;
+    setLastInteraction: (interaction: DrawerLastInteraction) => void;
+}
+export declare function useDrawerFocusControl(dependencies: DependencyList, isOpen: boolean, restoreFocus?: boolean): FocusControlState;
+export {};
+//# sourceMappingURL=use-drawer-focus-control.d.ts.map

package/lib/internal/template/app-layout/utils/use-drawer-focus-control.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"use-drawer-focus-control.d.ts","sourceRoot":"lib/default/","sources":["app-layout/utils/use-drawer-focus-control.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,MAAM,MAAM,qBAAqB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAEzE,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IACnC,KAAK,EAAE,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAClC,MAAM,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACnC;AAED,UAAU,iBAAiB;IACzB,IAAI,EAAE,sBAAsB,CAAC;IAC7B,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,kBAAkB,EAAE,CAAC,WAAW,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAClE;AAED,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAC5B,MAAM,EAAE,OAAO,EACf,YAAY,UAAQ,GACnB,iBAAiB,CA6DnB"}

package/lib/internal/template/app-layout/utils/use-drawer-focus-control.js ADDED Viewed

@@ -0,0 +1,65 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect, useRef, useCallback } from 'react';
+export function useDrawerFocusControl(dependencies, isOpen, restoreFocus = false) {
+    const refs = {
+        toggle: useRef(null),
+        close: useRef(null),
+        slider: useRef(null),
+    };
+    const previousFocusedElement = useRef();
+    const shouldFocus = useRef(false);
+    const lastInteraction = useRef(null);
+    useEffect(() => {
+        var _a, _b, _c;
+        switch ((_a = lastInteraction.current) === null || _a === void 0 ? void 0 : _a.type) {
+            case 'open':
+                (_b = refs.slider.current) === null || _b === void 0 ? void 0 : _b.focus();
+                break;
+            case 'close':
+                (_c = refs.toggle.current) === null || _c === void 0 ? void 0 : _c.focus();
+                break;
+        }
+        lastInteraction.current = null;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, dependencies);
+    const doFocus = () => {
+        var _a, _b;
+        if (!shouldFocus.current) {
+            return;
+        }
+        if (isOpen) {
+            previousFocusedElement.current =
+                document.activeElement !== document.body ? document.activeElement : undefined;
+            (_a = refs.close.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {
+                previousFocusedElement.current.focus();
+                previousFocusedElement.current = undefined;
+            }
+            else {
+                (_b = refs.toggle.current) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+        }
+        shouldFocus.current = false;
+    };
+    // We explictly want this effect to run when only `isOpen` changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(doFocus, [isOpen]);
+    const loseFocus = useCallback(() => {
+        previousFocusedElement.current = undefined;
+    }, []);
+    return {
+        refs,
+        setFocus: force => {
+            shouldFocus.current = true;
+            if (force && isOpen) {
+                doFocus();
+            }
+        },
+        loseFocus,
+        setLastInteraction: (interaction) => (lastInteraction.current = interaction),
+    };
+}
+//# sourceMappingURL=use-drawer-focus-control.js.map

package/lib/internal/template/app-layout/utils/use-drawer-focus-control.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"use-drawer-focus-control.js","sourceRoot":"lib/default/","sources":["app-layout/utils/use-drawer-focus-control.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAA6B,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAkBlF,MAAM,UAAU,qBAAqB,CACnC,YAA4B,EAC5B,MAAe,EACf,YAAY,GAAG,KAAK;IAEpB,MAAM,IAAI,GAAG;QACX,MAAM,EAAE,MAAM,CAAkB,IAAI,CAAC;QACrC,KAAK,EAAE,MAAM,CAAkB,IAAI,CAAC;QACpC,MAAM,EAAE,MAAM,CAAiB,IAAI,CAAC;KACrC,CAAC;IACF,MAAM,sBAAsB,GAAG,MAAM,EAAe,CAAC;IACrD,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAClC,MAAM,eAAe,GAAG,MAAM,CAA+B,IAAI,CAAC,CAAC;IAEnE,SAAS,CAAC,GAAG,EAAE;;QACb,QAAQ,MAAA,eAAe,CAAC,OAAO,0CAAE,IAAI,EAAE;YACrC,KAAK,MAAM;gBACT,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAC7B,MAAM;YACR,KAAK,OAAO;gBACV,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAC7B,MAAM;SACT;QACD,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,uDAAuD;IACzD,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,MAAM,OAAO,GAAG,GAAG,EAAE;;QACnB,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;YACxB,OAAO;SACR;QACD,IAAI,MAAM,EAAE;YACV,sBAAsB,CAAC,OAAO;gBAC5B,QAAQ,CAAC,aAAa,KAAK,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAE,QAAQ,CAAC,aAA6B,CAAC,CAAC,CAAC,SAAS,CAAC;YACjG,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;QACD,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;IAC9B,CAAC,CAAC;IAEF,kEAAkE;IAClE,uDAAuD;IACvD,SAAS,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAE7B,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;IAC7C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,IAAI;QACJ,QAAQ,EAAE,KAAK,CAAC,EAAE;YAChB,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;YAC3B,IAAI,KAAK,IAAI,MAAM,EAAE;gBACnB,OAAO,EAAE,CAAC;aACX;QACH,CAAC;QACD,SAAS;QACT,kBAAkB,EAAE,CAAC,WAAkC,EAAE,EAAE,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,WAAW,CAAC;KACpG,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { DependencyList, RefObject, useEffect, useRef, useCallback } from 'react';\nimport { ButtonProps } from '../../button/interfaces';\n\nexport type DrawerLastInteraction = { type: 'open' } | { type: 'close' };\n\nexport interface DrawerFocusControlRefs {\n toggle: RefObject<ButtonProps.Ref>;\n close: RefObject<ButtonProps.Ref>;\n slider: RefObject<HTMLDivElement>;\n}\n\ninterface FocusControlState {\n refs: DrawerFocusControlRefs;\n setFocus: (force?: boolean) => void;\n loseFocus: () => void;\n setLastInteraction: (interaction: DrawerLastInteraction) => void;\n}\n\nexport function useDrawerFocusControl(\n dependencies: DependencyList,\n isOpen: boolean,\n restoreFocus = false\n): FocusControlState {\n const refs = {\n toggle: useRef<ButtonProps.Ref>(null),\n close: useRef<ButtonProps.Ref>(null),\n slider: useRef<HTMLDivElement>(null),\n };\n const previousFocusedElement = useRef<HTMLElement>();\n const shouldFocus = useRef(false);\n const lastInteraction = useRef<DrawerLastInteraction | null>(null);\n\n useEffect(() => {\n switch (lastInteraction.current?.type) {\n case 'open':\n refs.slider.current?.focus();\n break;\n case 'close':\n refs.toggle.current?.focus();\n break;\n }\n lastInteraction.current = null;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, dependencies);\n\n const doFocus = () => {\n if (!shouldFocus.current) {\n return;\n }\n if (isOpen) {\n previousFocusedElement.current =\n document.activeElement !== document.body ? (document.activeElement as HTMLElement) : undefined;\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 shouldFocus.current = false;\n };\n\n // We explictly want this effect to run when only `isOpen` changes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useEffect(doFocus, [isOpen]);\n\n const loseFocus = useCallback(() => {\n previousFocusedElement.current = undefined;\n }, []);\n\n return {\n refs,\n setFocus: force => {\n shouldFocus.current = true;\n if (force && isOpen) {\n doFocus();\n }\n },\n loseFocus,\n setLastInteraction: (interaction: DrawerLastInteraction) => (lastInteraction.current = interaction),\n };\n}\n"]}

package/lib/internal/template/app-layout/visual-refresh/app-bar.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"app-bar.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/app-bar.tsx"],"names":[],"mappings":";~~AASA~~;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,~~uBA6F7B~~"}
1	+ {"version":3,"file":"app-bar.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/app-bar.tsx"],"names":[],"mappings":";AAUA;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,uBAgG7B"}

package/lib/internal/template/app-layout/visual-refresh/app-bar.js CHANGED Viewed

@@ -2,8 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import clsx from 'clsx';
-import { useAppLayoutInternals } from './context';
 import { InternalButton } from '../../button/internal';
+import { MobileTriggers as DrawersMobileTriggers } from './drawers';
+import { useAppLayoutInternals } from './context';
 import styles from './styles.css.js';
 import testutilStyles from '../test-classes/styles.css.js';
 /**
@@ -12,24 +13,25 @@ import testutilStyles from '../test-classes/styles.css.js';
  */
 export default function AppBar() {
     var _a, _b, _c;
-    const { ariaLabels, breadcrumbs, contentHeader, contentType, dynamicOverlapHeight, handleNavigationClick, handleToolsClick, hasNotificationsContent, hasStickyBackground, isMobile, navigationHide, isNavigationOpen, isToolsOpen, toolsHide, isAnyPanelOpen, navigationRefs, toolsRefs, } = useAppLayoutInternals();
+    const { ariaLabels, breadcrumbs, contentHeader, contentType, drawers, dynamicOverlapHeight, handleNavigationClick, handleToolsClick, hasDrawerViewportOverlay, hasNotificationsContent, hasStickyBackground, isMobile, navigationHide, isNavigationOpen, isToolsOpen, toolsHide, navigationRefs, toolsRefs, } = useAppLayoutInternals();
     if (navigationHide && !breadcrumbs && toolsHide) {
         return null;
     }
     return (React.createElement("section", { "aria-hidden": !isMobile && !breadcrumbs ? true : undefined, className: clsx(styles.appbar, {
             [styles['has-breadcrumbs']]: breadcrumbs,
-            [styles.unfocusable]: isMobile && isAnyPanelOpen,
+            [styles.unfocusable]: hasDrawerViewportOverlay,
             [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: navigationRefs.toggle, disabled: isAnyPanelOpen, __nativeAttributes: { 'aria-haspopup': isNavigationOpen ? undefined : true } }))),
+            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: navigationRefs.toggle, disabled: hasDrawerViewportOverlay, __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: toolsRefs.toggle, __nativeAttributes: { 'aria-haspopup': true } })))));
+        isMobile && !toolsHide && !drawers && (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: hasDrawerViewportOverlay, 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: toolsRefs.toggle, __nativeAttributes: { 'aria-haspopup': true } }))),
+        React.createElement(DrawersMobileTriggers, null)));
 }
 //# sourceMappingURL=app-bar.js.map

package/lib/internal/template/app-layout/visual-refresh/app-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"app-bar.js","sourceRoot":"lib/default/","sources":["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;AAE3D;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM;;IAC5B,MAAM,EACJ,UAAU,EACV,WAAW,EACX,aAAa,EACb,WAAW,EACX,oBAAoB,EACpB,qBAAqB,EACrB,gBAAgB,EAChB,uBAAuB,EACvB,mBAAmB,EACnB,QAAQ,EACR,cAAc,EACd,gBAAgB,EAChB,WAAW,EACX,SAAS,EACT,cAAc,EACd,~~cAAc,EACd,~~SAAS,GACV,GAAG,qBAAqB,EAAE,CAAC;IAE5B,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,EACb;YACE,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,WAAW;YACxC,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,~~QAAQ,IAAI,cAAc~~;~~YAChD~~,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,EAAE,QAAQ;SACzC,EACD,8BAA8B,CAC/B;QAEA,CAAC,cAAc,IAAI,QAAQ,IAAI,CAC9B,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,gBAAgB,EAAE,CAAC,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,GAAG,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAC1C,OAAO,EAAC,MAAM,EACd,SAAS,EAAE,cAAc,CAAC,mBAAmB,CAAC,EAC9C,GAAG,EAAE,cAAc,CAAC,MAAM,EAC1B,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,gBAAgB,WAAW,EAAE,CAAC,EAAE,cAAc,CAAC,WAAW,EAAE;gBACrG,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC,EAAE,oBAAoB,GAAG,CAAC;gBAChE,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,aAAa;gBACrC,CAAC,MAAM,CAAC,2BAA2B,CAAC,CAAC,EAAE,uBAAuB;gBAC9D,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,mBAAmB;aACvD,CAAC,IAED,WAAW,CACR,CACP;QAEA,CAAC,SAAS,IAAI,~~QAAQ~~,IAAI,~~CACzB~~,+BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC,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,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,EACrC,OAAO,EAAC,MAAM,EACd,GAAG,EAAE,SAAS,CAAC,MAAM,EACrB,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';\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~~ navigationRefs,\n toolsRefs,\n } = useAppLayoutInternals();\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={navigationRefs.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={toolsRefs.toggle}\n __nativeAttributes={{ 'aria-haspopup': true }}\n />\n </aside>\n )}\n </section>\n );\n}\n"]}
1	+ {"version":3,"file":"app-bar.js","sourceRoot":"lib/default/","sources":["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 { InternalButton } from '../../button/internal';\nimport { MobileTriggers as DrawersMobileTriggers } from './drawers';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\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 drawers,\n dynamicOverlapHeight,\n handleNavigationClick,\n handleToolsClick,\n hasDrawerViewportOverlay,\n hasNotificationsContent,\n hasStickyBackground,\n isMobile,\n navigationHide,\n isNavigationOpen,\n isToolsOpen,\n toolsHide,\n navigationRefs,\n toolsRefs,\n } = useAppLayoutInternals();\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]: hasDrawerViewportOverlay,\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={navigationRefs.toggle}\n disabled={hasDrawerViewportOverlay}\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 {isMobile && !toolsHide && !drawers && (\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={hasDrawerViewportOverlay}\n ariaLabel={ariaLabels?.toolsToggle ?? undefined}\n iconName=\"status-info\"\n formAction=\"none\"\n onClick={() => handleToolsClick(true)}\n variant=\"icon\"\n ref={toolsRefs.toggle}\n __nativeAttributes={{ 'aria-haspopup': true }}\n />\n </aside>\n )}\n\n <DrawersMobileTriggers />\n </section>\n );\n}\n"]}

package/lib/internal/template/app-layout/visual-refresh/context.d.ts CHANGED Viewed

@@ -1,21 +1,29 @@
 import React from 'react';
 import { AppLayoutProps } from '../interfaces';
+import { DrawersProps } from './drawers';
 import { FocusControlRefs } from '../utils/use-focus-control';
-import { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';
 import { SplitPanelFocusControlRefs } from '../utils/use-split-panel-focus-control';
+import { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';
 interface AppLayoutInternals extends AppLayoutProps {
+    activeDrawerId: string | null;
+    activeDrawerWidth: number;
+    drawers: DrawersProps;
+    drawersRefs: FocusControlRefs;
+    drawersTriggerCount: number;
     dynamicOverlapHeight: number;
+    handleDrawersClick: (activeDrawerId: string | null, skipFocusControl?: boolean) => void;
     handleSplitPanelClick: () => void;
     handleNavigationClick: (isOpen: boolean) => void;
     handleSplitPanelPreferencesChange: (detail: AppLayoutProps.SplitPanelPreferences) => void;
     handleSplitPanelResize: (detail: {
         size: number;
     }) => void;
-    handleToolsClick: (value: boolean) => void;
+    handleToolsClick: (value: boolean, skipFocusControl?: boolean) => void;
     hasDefaultToolsWidth: boolean;
+    hasDrawerViewportOverlay: boolean;
     hasNotificationsContent: boolean;
+    hasOpenDrawer: boolean;
     hasStickyBackground: boolean;
-    isAnyPanelOpen: boolean;
     isMobile: boolean;
     isNavigationOpen: boolean;
     isSplitPanelForcedPosition: boolean;
@@ -23,8 +31,10 @@ interface AppLayoutInternals extends AppLayoutProps {
     isToolsOpen: boolean;
     layoutElement: React.Ref<HTMLElement>;
     layoutWidth: number;
+    loseToolsFocus: () => void;
     mainElement: React.Ref<HTMLDivElement>;
     mainOffsetLeft: number;
+    navigationRefs: FocusControlRefs;
     notificationsElement: React.Ref<HTMLDivElement>;
     notificationsHeight: number;
     offsetBottom: number;
@@ -43,9 +53,7 @@ interface AppLayoutInternals extends AppLayoutProps {
     setSplitPanelToggle: (toggle: SplitPanelSideToggleProps) => void;
     splitPanelDisplayed: boolean;
     splitPanelRefs: SplitPanelFocusControlRefs;
-    navigationRefs: FocusControlRefs;
     toolsRefs: FocusControlRefs;
-    loseToolsFocus: () => void;
 }
 interface AppLayoutProviderInternalsProps extends AppLayoutProps {
     children: React.ReactNode;

package/lib/internal/template/app-layout/visual-refresh/context.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"context.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/context.tsx"],"names":[],"mappings":"AAEA,OAAO,KASN,MAAM,OAAO,CAAC;~~AACf~~,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;~~AAW~~/C,OAAO,EAAE,~~gBAAgB~~,~~EAAmB~~,MAAM,~~4BAA4B~~,CAAC;~~AAG/E~~,OAAO,EAAE,~~yBAAyB~~,~~EAAE~~,MAAM,~~4CAA4C~~,CAAC;~~AACvF~~,OAAO,EAAE,0BAA0B,EAA6B,MAAM,wCAAwC,CAAC;~~AAE~~/G,UAAU,kBAAmB,SAAQ,cAAc;IACjD,oBAAoB,EAAE,MAAM,CAAC;IAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,qBAAqB,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,iCAAiC,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,qBAAqB,KAAK,IAAI,CAAC;IAC1F,sBAAsB,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3D,gBAAgB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;~~IAC3C~~,oBAAoB,EAAE,OAAO,CAAC;IAC9B,uBAAuB,EAAE,OAAO,CAAC;IACjC,~~mBAAmB~~,EAAE,OAAO,CAAC;~~IAC7B~~,~~cAAc~~,EAAE,OAAO,CAAC;~~IACxB~~,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,0BAA0B,EAAE,OAAO,CAAC;IACpC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACvC,cAAc,EAAE,MAAM,CAAC;IACvB,oBAAoB,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,uBAAuB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,sBAAsB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,yBAAyB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,iCAAiC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,cAAc,CAAC,kBAAkB,CAAC;IACtD,sBAAsB,EAAE,MAAM,CAAC;IAC/B,8BAA8B,EAAE,MAAM,CAAC;IACvC,gBAAgB,EAAE,yBAAyB,CAAC;IAC5C,mBAAmB,EAAE,CAAC,MAAM,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACjE,mBAAmB,EAAE,OAAO,CAAC;IAC7B,cAAc,EAAE,0BAA0B,CAAC;IAC3C,~~cAAc,EAAE,gBAAgB,CAAC;IACjC,~~SAAS,EAAE,gBAAgB,CAAC;~~IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC~~;~~CAC5B;~~AASD,UAAU,+BAAgC,SAAQ,cAAc;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,qBAAqB,uBAMpC;AAED,eAAO,MAAM,0BAA0B,~~4GAwdtC~~,CAAC"}
1	+ {"version":3,"file":"context.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/context.tsx"],"names":[],"mappings":"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"}