@cloudscape-design/components-themeable 3.0.961 → 3.0.963

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

@@ -2,91 +2,91 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "background": "awsui_background_hyvsj_r2qgm_149",
-  "scrolling-background": "awsui_scrolling-background_hyvsj_r2qgm_152",
-  "breadcrumbs": "awsui_breadcrumbs_hyvsj_r2qgm_163",
-  "drawers-container": "awsui_drawers-container_hyvsj_r2qgm_176",
-  "has-open-drawer": "awsui_has-open-drawer_hyvsj_r2qgm_187",
-  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_r2qgm_208",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_r2qgm_213",
-  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_r2qgm_251",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_r2qgm_261",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_r2qgm_266",
-  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_r2qgm_280",
-  "drawers-trigger": "awsui_drawers-trigger_hyvsj_r2qgm_266",
-  "drawer": "awsui_drawer_hyvsj_r2qgm_176",
-  "drawer-content-container": "awsui_drawer-content-container_hyvsj_r2qgm_311",
-  "drawer-close-button": "awsui_drawer-close-button_hyvsj_r2qgm_320",
-  "drawer-content": "awsui_drawer-content_hyvsj_r2qgm_311",
-  "drawer-content-hidden": "awsui_drawer-content-hidden_hyvsj_r2qgm_329",
-  "drawer-slider": "awsui_drawer-slider_hyvsj_r2qgm_332",
-  "is-drawer-open": "awsui_is-drawer-open_hyvsj_r2qgm_339",
-  "content": "awsui_content_hyvsj_r2qgm_365",
-  "layout": "awsui_layout_hyvsj_r2qgm_390",
-  "has-max-content-width": "awsui_has-max-content-width_hyvsj_r2qgm_462",
-  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_r2qgm_477",
-  "content-type-table": "awsui_content-type-table_hyvsj_r2qgm_491",
-  "content-type-cards": "awsui_content-type-cards_hyvsj_r2qgm_491",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_r2qgm_497",
-  "is-hide-mobile-toolbar": "awsui_is-hide-mobile-toolbar_hyvsj_r2qgm_500",
-  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_r2qgm_514",
-  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_r2qgm_517",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_r2qgm_527",
-  "content-first-child-header": "awsui_content-first-child-header_hyvsj_r2qgm_530",
-  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_r2qgm_530",
-  "has-header": "awsui_has-header_hyvsj_r2qgm_530",
-  "content-first-child-main": "awsui_content-first-child-main_hyvsj_r2qgm_545",
-  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_r2qgm_545",
-  "has-left-toggles-gutter": "awsui_has-left-toggles-gutter_hyvsj_r2qgm_565",
-  "has-right-toggles-gutter": "awsui_has-right-toggles-gutter_hyvsj_r2qgm_568",
-  "has-split-panel": "awsui_has-split-panel_hyvsj_r2qgm_588",
-  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_r2qgm_588",
-  "block-body-scroll": "awsui_block-body-scroll_hyvsj_r2qgm_596",
-  "unfocusable": "awsui_unfocusable_hyvsj_r2qgm_601",
-  "container": "awsui_container_hyvsj_r2qgm_611",
-  "is-navigation-open": "awsui_is-navigation-open_hyvsj_r2qgm_637",
-  "is-tools-open": "awsui_is-tools-open_hyvsj_r2qgm_640",
-  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_r2qgm_640",
-  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_r2qgm_640",
-  "has-active-drawer": "awsui_has-active-drawer_hyvsj_r2qgm_640",
-  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_r2qgm_653",
-  "remove-high-contrast-header": "awsui_remove-high-contrast-header_hyvsj_r2qgm_670",
-  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_r2qgm_674",
-  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_r2qgm_678",
-  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_r2qgm_682",
-  "navigation-container": "awsui_navigation-container_hyvsj_r2qgm_691",
-  "show-navigation": "awsui_show-navigation_hyvsj_r2qgm_729",
-  "animating": "awsui_animating_hyvsj_r2qgm_752",
-  "showButtons": "awsui_showButtons_hyvsj_r2qgm_1",
-  "navigation": "awsui_navigation_hyvsj_r2qgm_691",
-  "openNavigation": "awsui_openNavigation_hyvsj_r2qgm_1",
-  "animated-content": "awsui_animated-content_hyvsj_r2qgm_816",
-  "content-container": "awsui_content-container_hyvsj_r2qgm_819",
-  "hide-navigation": "awsui_hide-navigation_hyvsj_r2qgm_828",
-  "notifications": "awsui_notifications_hyvsj_r2qgm_838",
-  "has-notification-content": "awsui_has-notification-content_hyvsj_r2qgm_843",
-  "sticky-notifications": "awsui_sticky-notifications_hyvsj_r2qgm_847",
-  "high-contrast": "awsui_high-contrast_hyvsj_r2qgm_852",
-  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_r2qgm_870",
-  "position-bottom": "awsui_position-bottom_hyvsj_r2qgm_917",
-  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_r2qgm_1",
-  "split-panel-side": "awsui_split-panel-side_hyvsj_r2qgm_946",
-  "position-side": "awsui_position-side_hyvsj_r2qgm_959",
-  "tools-container": "awsui_tools-container_hyvsj_r2qgm_981",
-  "tools": "awsui_tools_hyvsj_r2qgm_981",
-  "openTools": "awsui_openTools_hyvsj_r2qgm_1",
-  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_r2qgm_1070",
-  "hide-tools": "awsui_hide-tools_hyvsj_r2qgm_1080",
-  "show-tools": "awsui_show-tools_hyvsj_r2qgm_1092",
-  "has-tools-form": "awsui_has-tools-form_hyvsj_r2qgm_1070",
-  "trigger-button-styles": "awsui_trigger-button-styles_hyvsj_r2qgm_1172",
-  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_r2qgm_1188",
-  "trigger": "awsui_trigger_hyvsj_r2qgm_1172",
-  "selected": "awsui_selected_hyvsj_r2qgm_1240",
-  "badge": "awsui_badge_hyvsj_r2qgm_1260",
-  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_r2qgm_1264",
-  "trigger-wrapper-tooltip-visible": "awsui_trigger-wrapper-tooltip-visible_hyvsj_r2qgm_1275",
-  "dot": "awsui_dot_hyvsj_r2qgm_1279",
-  "trigger-tooltip": "awsui_trigger-tooltip_hyvsj_r2qgm_1292"
+  "background": "awsui_background_hyvsj_1we6f_149",
+  "scrolling-background": "awsui_scrolling-background_hyvsj_1we6f_152",
+  "breadcrumbs": "awsui_breadcrumbs_hyvsj_1we6f_163",
+  "drawers-container": "awsui_drawers-container_hyvsj_1we6f_176",
+  "has-open-drawer": "awsui_has-open-drawer_hyvsj_1we6f_187",
+  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_1we6f_208",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_1we6f_213",
+  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_1we6f_251",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_1we6f_261",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_1we6f_266",
+  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_1we6f_280",
+  "drawers-trigger": "awsui_drawers-trigger_hyvsj_1we6f_266",
+  "drawer": "awsui_drawer_hyvsj_1we6f_176",
+  "drawer-content-container": "awsui_drawer-content-container_hyvsj_1we6f_311",
+  "drawer-close-button": "awsui_drawer-close-button_hyvsj_1we6f_320",
+  "drawer-content": "awsui_drawer-content_hyvsj_1we6f_311",
+  "drawer-content-hidden": "awsui_drawer-content-hidden_hyvsj_1we6f_329",
+  "drawer-slider": "awsui_drawer-slider_hyvsj_1we6f_332",
+  "is-drawer-open": "awsui_is-drawer-open_hyvsj_1we6f_339",
+  "content": "awsui_content_hyvsj_1we6f_365",
+  "layout": "awsui_layout_hyvsj_1we6f_390",
+  "has-max-content-width": "awsui_has-max-content-width_hyvsj_1we6f_462",
+  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_1we6f_477",
+  "content-type-table": "awsui_content-type-table_hyvsj_1we6f_491",
+  "content-type-cards": "awsui_content-type-cards_hyvsj_1we6f_491",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_1we6f_497",
+  "is-hide-mobile-toolbar": "awsui_is-hide-mobile-toolbar_hyvsj_1we6f_500",
+  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_1we6f_514",
+  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_1we6f_517",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_1we6f_527",
+  "content-first-child-header": "awsui_content-first-child-header_hyvsj_1we6f_530",
+  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_1we6f_530",
+  "has-header": "awsui_has-header_hyvsj_1we6f_530",
+  "content-first-child-main": "awsui_content-first-child-main_hyvsj_1we6f_545",
+  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_1we6f_545",
+  "has-left-toggles-gutter": "awsui_has-left-toggles-gutter_hyvsj_1we6f_565",
+  "has-right-toggles-gutter": "awsui_has-right-toggles-gutter_hyvsj_1we6f_568",
+  "has-split-panel": "awsui_has-split-panel_hyvsj_1we6f_588",
+  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_1we6f_588",
+  "block-body-scroll": "awsui_block-body-scroll_hyvsj_1we6f_596",
+  "unfocusable": "awsui_unfocusable_hyvsj_1we6f_601",
+  "container": "awsui_container_hyvsj_1we6f_611",
+  "is-navigation-open": "awsui_is-navigation-open_hyvsj_1we6f_637",
+  "is-tools-open": "awsui_is-tools-open_hyvsj_1we6f_640",
+  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_1we6f_640",
+  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_1we6f_640",
+  "has-active-drawer": "awsui_has-active-drawer_hyvsj_1we6f_640",
+  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_1we6f_653",
+  "remove-high-contrast-header": "awsui_remove-high-contrast-header_hyvsj_1we6f_670",
+  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_1we6f_674",
+  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_1we6f_678",
+  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_1we6f_682",
+  "navigation-container": "awsui_navigation-container_hyvsj_1we6f_691",
+  "show-navigation": "awsui_show-navigation_hyvsj_1we6f_729",
+  "animating": "awsui_animating_hyvsj_1we6f_752",
+  "showButtons": "awsui_showButtons_hyvsj_1we6f_1",
+  "navigation": "awsui_navigation_hyvsj_1we6f_691",
+  "openNavigation": "awsui_openNavigation_hyvsj_1we6f_1",
+  "animated-content": "awsui_animated-content_hyvsj_1we6f_816",
+  "content-container": "awsui_content-container_hyvsj_1we6f_819",
+  "hide-navigation": "awsui_hide-navigation_hyvsj_1we6f_828",
+  "notifications": "awsui_notifications_hyvsj_1we6f_838",
+  "has-notification-content": "awsui_has-notification-content_hyvsj_1we6f_843",
+  "sticky-notifications": "awsui_sticky-notifications_hyvsj_1we6f_847",
+  "high-contrast": "awsui_high-contrast_hyvsj_1we6f_852",
+  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_1we6f_870",
+  "position-bottom": "awsui_position-bottom_hyvsj_1we6f_917",
+  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_1we6f_1",
+  "split-panel-side": "awsui_split-panel-side_hyvsj_1we6f_946",
+  "position-side": "awsui_position-side_hyvsj_1we6f_959",
+  "tools-container": "awsui_tools-container_hyvsj_1we6f_981",
+  "tools": "awsui_tools_hyvsj_1we6f_981",
+  "openTools": "awsui_openTools_hyvsj_1we6f_1",
+  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_1we6f_1070",
+  "hide-tools": "awsui_hide-tools_hyvsj_1we6f_1080",
+  "show-tools": "awsui_show-tools_hyvsj_1we6f_1092",
+  "has-tools-form": "awsui_has-tools-form_hyvsj_1we6f_1070",
+  "trigger-button-styles": "awsui_trigger-button-styles_hyvsj_1we6f_1172",
+  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_1we6f_1188",
+  "trigger": "awsui_trigger_hyvsj_1we6f_1172",
+  "selected": "awsui_selected_hyvsj_1we6f_1240",
+  "badge": "awsui_badge_hyvsj_1we6f_1260",
+  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_1we6f_1264",
+  "trigger-wrapper-tooltip-visible": "awsui_trigger-wrapper-tooltip-visible_hyvsj_1we6f_1275",
+  "dot": "awsui_dot_hyvsj_1we6f_1279",
+  "trigger-tooltip": "awsui_trigger-tooltip_hyvsj_1we6f_1292"
 };
   

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

@@ -1,15 +1,15 @@
 
     import './styles.scoped.css';
     export default {
-  "drawer": "awsui_drawer_12i0j_1gz80_189",
-  "legacy": "awsui_legacy_12i0j_1gz80_204",
-  "last-opened": "awsui_last-opened_12i0j_1gz80_212",
-  "drawer-global": "awsui_drawer-global_12i0j_1gz80_217",
-  "drawer-hidden": "awsui_drawer-hidden_12i0j_1gz80_221",
-  "drawer-content-container": "awsui_drawer-content-container_12i0j_1gz80_224",
-  "drawer-close-button": "awsui_drawer-close-button_12i0j_1gz80_232",
-  "drawer-content": "awsui_drawer-content_12i0j_1gz80_224",
-  "drawer-content-hidden": "awsui_drawer-content-hidden_12i0j_1gz80_242",
-  "drawer-slider": "awsui_drawer-slider_12i0j_1gz80_245"
+  "drawer": "awsui_drawer_12i0j_y0jhw_189",
+  "legacy": "awsui_legacy_12i0j_y0jhw_204",
+  "last-opened": "awsui_last-opened_12i0j_y0jhw_212",
+  "drawer-global": "awsui_drawer-global_12i0j_y0jhw_217",
+  "drawer-hidden": "awsui_drawer-hidden_12i0j_y0jhw_221",
+  "drawer-content-container": "awsui_drawer-content-container_12i0j_y0jhw_224",
+  "drawer-close-button": "awsui_drawer-close-button_12i0j_y0jhw_232",
+  "drawer-content": "awsui_drawer-content_12i0j_y0jhw_224",
+  "drawer-content-hidden": "awsui_drawer-content-hidden_12i0j_y0jhw_242",
+  "drawer-slider": "awsui_drawer-slider_12i0j_y0jhw_245"
 };
   

package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.scoped.css

@@ -186,12 +186,12 @@ 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_drawer_12i0j_1gz80_189:not(#\9) {
+.awsui_drawer_12i0j_y0jhw_189:not(#\9) {
   position: sticky;
   z-index: 830;
-  background-color: var(--color-background-container-content-myy7cn, #ffffff);
+  background-color: var(--color-background-container-content-mvmryi, #ffffff);
   display: grid;
-  grid-template-columns: var(--space-m-u91ipm, 16px) 1fr;
+  grid-template-columns: var(--space-m-n2lypl, 16px) 1fr;
   inline-size: var(--awsui-drawer-size-g964ok);
   block-size: 100%;
   overflow: hidden;
@@ -201,48 +201,48 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-wrap: break-word;
 }
 @media (min-width: 689px) {
-  .awsui_drawer_12i0j_1gz80_189:not(#\9):not(.awsui_legacy_12i0j_1gz80_204) {
-    border-inline-start: var(--border-divider-section-width-iueskx, 1px) solid var(--color-border-layout-5gml03, #d5dbdb);
+  .awsui_drawer_12i0j_y0jhw_189:not(#\9):not(.awsui_legacy_12i0j_y0jhw_204) {
+    border-inline-start: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-gb61sp, #d5dbdb);
   }
 }
 @media (max-width: 688px) {
-  .awsui_drawer_12i0j_1gz80_189:not(#\9) {
+  .awsui_drawer_12i0j_y0jhw_189:not(#\9) {
     inline-size: 100%;
   }
-  .awsui_drawer_12i0j_1gz80_189.awsui_last-opened_12i0j_1gz80_212:not(#\9) {
+  .awsui_drawer_12i0j_y0jhw_189.awsui_last-opened_12i0j_y0jhw_212:not(#\9) {
     z-index: 1001;
   }
 }
 @media (max-width: 688px) {
-  .awsui_drawer_12i0j_1gz80_189.awsui_drawer-global_12i0j_1gz80_217:not(#\9):not(.awsui_last-opened_12i0j_1gz80_212) {
+  .awsui_drawer_12i0j_y0jhw_189.awsui_drawer-global_12i0j_y0jhw_217:not(#\9):not(.awsui_last-opened_12i0j_y0jhw_212) {
     display: none;
   }
 }
-.awsui_drawer_12i0j_1gz80_189.awsui_drawer-hidden_12i0j_1gz80_221:not(#\9) {
+.awsui_drawer_12i0j_y0jhw_189.awsui_drawer-hidden_12i0j_y0jhw_221:not(#\9) {
   display: none;
 }
-.awsui_drawer_12i0j_1gz80_189 > .awsui_drawer-content-container_12i0j_1gz80_224:not(#\9) {
+.awsui_drawer_12i0j_y0jhw_189 > .awsui_drawer-content-container_12i0j_y0jhw_224:not(#\9) {
   grid-column: 1/span 2;
   grid-row: 1;
   display: grid;
-  grid-template-columns: var(--space-m-u91ipm, 16px) 1fr auto var(--space-m-u91ipm, 16px);
+  grid-template-columns: var(--space-m-n2lypl, 16px) 1fr auto var(--space-m-n2lypl, 16px);
   grid-template-rows: 14px auto 1fr;
   overflow-y: auto;
 }
-.awsui_drawer_12i0j_1gz80_189 > .awsui_drawer-content-container_12i0j_1gz80_224 > .awsui_drawer-close-button_12i0j_1gz80_232:not(#\9) {
+.awsui_drawer_12i0j_y0jhw_189 > .awsui_drawer-content-container_12i0j_y0jhw_224 > .awsui_drawer-close-button_12i0j_y0jhw_232:not(#\9) {
   grid-column: 3;
   grid-row: 2;
   z-index: 1;
   align-self: start;
 }
-.awsui_drawer_12i0j_1gz80_189 > .awsui_drawer-content-container_12i0j_1gz80_224 > .awsui_drawer-content_12i0j_1gz80_224:not(#\9) {
+.awsui_drawer_12i0j_y0jhw_189 > .awsui_drawer-content-container_12i0j_y0jhw_224 > .awsui_drawer-content_12i0j_y0jhw_224:not(#\9) {
   grid-column: 1/span 4;
   grid-row: 1/span 2;
 }
-.awsui_drawer_12i0j_1gz80_189 > .awsui_drawer-content-container_12i0j_1gz80_224 > .awsui_drawer-content_12i0j_1gz80_224.awsui_drawer-content-hidden_12i0j_1gz80_242:not(#\9) {
+.awsui_drawer_12i0j_y0jhw_189 > .awsui_drawer-content-container_12i0j_y0jhw_224 > .awsui_drawer-content_12i0j_y0jhw_224.awsui_drawer-content-hidden_12i0j_y0jhw_242:not(#\9) {
   display: none;
 }
-.awsui_drawer_12i0j_1gz80_189 > .awsui_drawer-slider_12i0j_1gz80_245:not(#\9) {
+.awsui_drawer_12i0j_y0jhw_189 > .awsui_drawer-slider_12i0j_y0jhw_245:not(#\9) {
   grid-column: 1;
   grid-row: 1;
   block-size: 100%;

package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js

@@ -2,15 +2,15 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "drawer": "awsui_drawer_12i0j_1gz80_189",
-  "legacy": "awsui_legacy_12i0j_1gz80_204",
-  "last-opened": "awsui_last-opened_12i0j_1gz80_212",
-  "drawer-global": "awsui_drawer-global_12i0j_1gz80_217",
-  "drawer-hidden": "awsui_drawer-hidden_12i0j_1gz80_221",
-  "drawer-content-container": "awsui_drawer-content-container_12i0j_1gz80_224",
-  "drawer-close-button": "awsui_drawer-close-button_12i0j_1gz80_232",
-  "drawer-content": "awsui_drawer-content_12i0j_1gz80_224",
-  "drawer-content-hidden": "awsui_drawer-content-hidden_12i0j_1gz80_242",
-  "drawer-slider": "awsui_drawer-slider_12i0j_1gz80_245"
+  "drawer": "awsui_drawer_12i0j_y0jhw_189",
+  "legacy": "awsui_legacy_12i0j_y0jhw_204",
+  "last-opened": "awsui_last-opened_12i0j_y0jhw_212",
+  "drawer-global": "awsui_drawer-global_12i0j_y0jhw_217",
+  "drawer-hidden": "awsui_drawer-hidden_12i0j_y0jhw_221",
+  "drawer-content-container": "awsui_drawer-content-container_12i0j_y0jhw_224",
+  "drawer-close-button": "awsui_drawer-close-button_12i0j_y0jhw_232",
+  "drawer-content": "awsui_drawer-content_12i0j_y0jhw_224",
+  "drawer-content-hidden": "awsui_drawer-content-hidden_12i0j_y0jhw_242",
+  "drawer-slider": "awsui_drawer-slider_12i0j_y0jhw_245"
 };
   

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

@@ -1,9 +1,9 @@
 
     import './styles.scoped.css';
     export default {
-  "navigation-container": "awsui_navigation-container_2p2ab_k6an6_153",
-  "is-navigation-open": "awsui_is-navigation-open_2p2ab_k6an6_164",
-  "navigation": "awsui_navigation_2p2ab_k6an6_153",
-  "hide-navigation": "awsui_hide-navigation_2p2ab_k6an6_184"
+  "navigation-container": "awsui_navigation-container_2p2ab_16d7t_153",
+  "is-navigation-open": "awsui_is-navigation-open_2p2ab_16d7t_164",
+  "navigation": "awsui_navigation_2p2ab_16d7t_153",
+  "hide-navigation": "awsui_hide-navigation_2p2ab_16d7t_184"
 };
   

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

@@ -150,10 +150,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_navigation-container_2p2ab_k6an6_153:not(#\9) {
+.awsui_navigation-container_2p2ab_16d7t_153:not(#\9) {
   position: sticky;
   z-index: 830;
-  background-color: var(--color-background-container-content-myy7cn, #ffffff);
+  background-color: var(--color-background-container-content-mvmryi, #ffffff);
   inset-block-end: 0;
   overflow-x: hidden;
   word-wrap: break-word;
@@ -161,11 +161,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: flex;
   flex-direction: column;
 }
-.awsui_navigation-container_2p2ab_k6an6_153:not(#\9):not(.awsui_is-navigation-open_2p2ab_k6an6_164) {
+.awsui_navigation-container_2p2ab_16d7t_153:not(#\9):not(.awsui_is-navigation-open_2p2ab_16d7t_164) {
   inline-size: 0px;
   display: none;
 }
-.awsui_navigation-container_2p2ab_k6an6_153 > .awsui_navigation_2p2ab_k6an6_153:not(#\9) {
+.awsui_navigation-container_2p2ab_16d7t_153 > .awsui_navigation_2p2ab_16d7t_153:not(#\9) {
   flex-grow: 1;
   block-size: 100%;
   overflow-y: auto;
@@ -175,14 +175,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   position: relative;
 }
 @media (max-width: 688px) {
-  .awsui_navigation-container_2p2ab_k6an6_153:not(#\9) {
+  .awsui_navigation-container_2p2ab_16d7t_153:not(#\9) {
     --awsui-navigation-width-g964ok: 100vw;
     z-index: 1001;
   }
 }
 
-.awsui_hide-navigation_2p2ab_k6an6_184:not(#\9) {
+.awsui_hide-navigation_2p2ab_16d7t_184:not(#\9) {
   position: absolute;
-  inset-inline-end: var(--space-m-u91ipm, 16px);
+  inset-inline-end: var(--space-m-n2lypl, 16px);
   inset-block-start: 14px;
 }

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

@@ -2,9 +2,9 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "navigation-container": "awsui_navigation-container_2p2ab_k6an6_153",
-  "is-navigation-open": "awsui_is-navigation-open_2p2ab_k6an6_164",
-  "navigation": "awsui_navigation_2p2ab_k6an6_153",
-  "hide-navigation": "awsui_hide-navigation_2p2ab_k6an6_184"
+  "navigation-container": "awsui_navigation-container_2p2ab_16d7t_153",
+  "is-navigation-open": "awsui_is-navigation-open_2p2ab_16d7t_164",
+  "navigation": "awsui_navigation_2p2ab_16d7t_153",
+  "hide-navigation": "awsui_hide-navigation_2p2ab_16d7t_184"
 };
   

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

@@ -1,8 +1,8 @@
 
     import './styles.scoped.css';
     export default {
-  "sticky-notifications": "awsui_sticky-notifications_154bi_1lp8i_9",
-  "sticky-notifications-with-background": "awsui_sticky-notifications-with-background_154bi_1lp8i_13",
-  "has-notifications-content": "awsui_has-notifications-content_154bi_1lp8i_17"
+  "sticky-notifications": "awsui_sticky-notifications_154bi_mwwxa_9",
+  "sticky-notifications-with-background": "awsui_sticky-notifications-with-background_154bi_mwwxa_13",
+  "has-notifications-content": "awsui_has-notifications-content_154bi_mwwxa_17"
 };
   

package/lib/internal/template/app-layout/visual-refresh-toolbar/notifications/styles.scoped.css

@@ -6,14 +6,14 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_sticky-notifications_154bi_1lp8i_9:not(#\9) {
+.awsui_sticky-notifications_154bi_mwwxa_9:not(#\9) {
   position: sticky;
   z-index: 850;
 }
-.awsui_sticky-notifications-with-background_154bi_1lp8i_13:not(#\9) {
-  background-color: var(--color-background-layout-main-f96353, #f2f3f3);
+.awsui_sticky-notifications-with-background_154bi_mwwxa_13:not(#\9) {
+  background-color: var(--color-background-layout-main-nu5m0g, #f2f3f3);
 }
 
-.awsui_has-notifications-content_154bi_1lp8i_17:not(#\9) {
-  padding-block-start: var(--space-scaled-xs-t3am3w, 8px);
+.awsui_has-notifications-content_154bi_mwwxa_17:not(#\9) {
+  padding-block-start: var(--space-scaled-xs-sppte9, 8px);
 }

package/lib/internal/template/app-layout/visual-refresh-toolbar/notifications/styles.selectors.js

@@ -2,8 +2,8 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "sticky-notifications": "awsui_sticky-notifications_154bi_1lp8i_9",
-  "sticky-notifications-with-background": "awsui_sticky-notifications-with-background_154bi_1lp8i_13",
-  "has-notifications-content": "awsui_has-notifications-content_154bi_1lp8i_17"
+  "sticky-notifications": "awsui_sticky-notifications_154bi_mwwxa_9",
+  "sticky-notifications-with-background": "awsui_sticky-notifications-with-background_154bi_mwwxa_13",
+  "has-notifications-content": "awsui_has-notifications-content_154bi_mwwxa_17"
 };
   

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAQ9D,UAAU,mBACR,SAAQ,IAAI,CACV,0BAA0B,EACxB,eAAe,GACf,eAAe,GACf,eAAe,GACf,SAAS,GACT,aAAa,GACb,iBAAiB,GACjB,wBAAwB,GACxB,YAAY,GACZ,gBAAgB,GAChB,iBAAiB,GACjB,OAAO,GACP,WAAW,GACX,YAAY,GACZ,WAAW,CACd;IACD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,4FAsG1B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAQ9D,UAAU,mBACR,SAAQ,IAAI,CACV,0BAA0B,EACxB,eAAe,GACf,eAAe,GACf,eAAe,GACf,SAAS,GACT,aAAa,GACb,iBAAiB,GACjB,wBAAwB,GACxB,YAAY,GACZ,gBAAgB,GAChB,iBAAiB,GACjB,OAAO,GACP,WAAW,GACX,YAAY,GACZ,WAAW,CACd;IACD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,4FAwG1B,CAAC"}

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

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import clsx from 'clsx';
+import VisualContext from '../../../internal/components/visual-context';
 import customCssProps from '../../../internal/generated/custom-css-properties';
 import { useMobile } from '../../../internal/hooks/use-mobile';
 import { highContrastHeaderClassName } from '../../../internal/utils/content-header-utils';
@@ -13,26 +14,27 @@ export const SkeletonLayout = React.forwardRef(({ style, notifications, headerVa
     const isMobile = useMobile();
     const isMaxWidth = maxContentWidth === Number.MAX_VALUE || maxContentWidth === Number.MAX_SAFE_INTEGER;
     const anyPanelOpen = navigationOpen || toolsOpen;
-    return (React.createElement("div", { ref: ref, className: clsx(styles.root, testutilStyles.root, {
-            [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),
-            [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',
-        }), style: {
-            minBlockSize: isNested ? '100%' : `calc(100vh - ${placement.insetBlockStart + placement.insetBlockEnd}px)`,
-            [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',
-            [customCssProps.navigationWidth]: `${navigationWidth}px`,
-            [customCssProps.toolsWidth]: `${toolsWidth}px`,
-        } },
-        toolbar,
-        navigation && (React.createElement("div", { className: clsx(styles.navigation, !navigationOpen && styles['panel-hidden'], toolsOpen && styles['unfocusable-mobile'], !navigationAnimationDisabled && sharedStyles['with-motion-horizontal']) }, navigation)),
-        React.createElement("main", { className: clsx(styles['main-landmark'], isMobile && anyPanelOpen && styles['unfocusable-mobile']) },
-            notifications && (React.createElement("div", { className: clsx(styles['notifications-background'], headerVariant === 'high-contrast' && highContrastHeaderClassName) })),
-            notifications,
-            React.createElement("div", { className: clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings }), style: style },
-                contentHeader && React.createElement("div", { className: styles['content-header'] }, contentHeader),
-                React.createElement("div", { className: clsx(styles.content, testutilStyles.content) }, content)),
-            bottomSplitPanel && (React.createElement("div", { className: clsx(styles['split-panel-bottom']), style: { insetBlockEnd: placement.insetBlockEnd } }, bottomSplitPanel))),
-        sideSplitPanel && (React.createElement("div", { className: clsx(styles['split-panel-side'], !splitPanelOpen && styles['panel-hidden']) }, sideSplitPanel)),
-        React.createElement("div", { className: clsx(styles.tools, !toolsOpen && styles['panel-hidden'], sharedStyles['with-motion-horizontal'], navigationOpen && !toolsOpen && styles['unfocusable-mobile'], toolsOpen && styles['tools-open']) }, tools),
-        React.createElement("div", { className: clsx(styles['global-tools'], !globalToolsOpen && styles['panel-hidden']) }, globalTools)));
+    return (React.createElement(VisualContext, { contextName: "app-layout-toolbar" },
+        React.createElement("div", { ref: ref, className: clsx(styles.root, testutilStyles.root, {
+                [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),
+                [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',
+            }), style: {
+                minBlockSize: isNested ? '100%' : `calc(100vh - ${placement.insetBlockStart + placement.insetBlockEnd}px)`,
+                [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',
+                [customCssProps.navigationWidth]: `${navigationWidth}px`,
+                [customCssProps.toolsWidth]: `${toolsWidth}px`,
+            } },
+            toolbar,
+            navigation && (React.createElement("div", { className: clsx(styles.navigation, !navigationOpen && styles['panel-hidden'], toolsOpen && styles['unfocusable-mobile'], !navigationAnimationDisabled && sharedStyles['with-motion-horizontal']) }, navigation)),
+            React.createElement("main", { className: clsx(styles['main-landmark'], isMobile && anyPanelOpen && styles['unfocusable-mobile']) },
+                notifications && (React.createElement("div", { className: clsx(styles['notifications-background'], headerVariant === 'high-contrast' && highContrastHeaderClassName) })),
+                notifications,
+                React.createElement("div", { className: clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings }), style: style },
+                    contentHeader && React.createElement("div", { className: styles['content-header'] }, contentHeader),
+                    React.createElement("div", { className: clsx(styles.content, testutilStyles.content) }, content)),
+                bottomSplitPanel && (React.createElement("div", { className: clsx(styles['split-panel-bottom']), style: { insetBlockEnd: placement.insetBlockEnd } }, bottomSplitPanel))),
+            sideSplitPanel && (React.createElement("div", { className: clsx(styles['split-panel-side'], !splitPanelOpen && styles['panel-hidden']) }, sideSplitPanel)),
+            React.createElement("div", { className: clsx(styles.tools, !toolsOpen && styles['panel-hidden'], sharedStyles['with-motion-horizontal'], navigationOpen && !toolsOpen && styles['unfocusable-mobile'], toolsOpen && styles['tools-open']) }, tools),
+            React.createElement("div", { className: clsx(styles['global-tools'], !globalToolsOpen && styles['panel-hidden']) }, globalTools))));
 });
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport { useMobile } from '../../../internal/hooks/use-mobile';\nimport { highContrastHeaderClassName } from '../../../internal/utils/content-header-utils';\nimport { AppLayoutPropsWithDefaults } from '../../interfaces';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nconst contentTypeCustomWidths: Array<string | undefined> = ['dashboard', 'cards', 'table'];\n\ninterface SkeletonLayoutProps\n  extends Pick<\n    AppLayoutPropsWithDefaults,\n    | 'notifications'\n    | 'headerVariant'\n    | 'contentHeader'\n    | 'content'\n    | 'contentType'\n    | 'maxContentWidth'\n    | 'disableContentPaddings'\n    | 'navigation'\n    | 'navigationOpen'\n    | 'navigationWidth'\n    | 'tools'\n    | 'toolsOpen'\n    | 'toolsWidth'\n    | 'placement'\n  > {\n  style?: React.CSSProperties;\n  toolbar?: React.ReactNode;\n  splitPanelOpen?: boolean;\n  sideSplitPanel?: React.ReactNode;\n  bottomSplitPanel?: React.ReactNode;\n  globalTools?: React.ReactNode;\n  globalToolsOpen?: boolean;\n  navigationAnimationDisabled?: boolean;\n  isNested?: boolean;\n}\n\nexport const SkeletonLayout = React.forwardRef<HTMLDivElement, SkeletonLayoutProps>(\n  (\n    {\n      style,\n      notifications,\n      headerVariant,\n      contentHeader,\n      content,\n      navigation,\n      navigationOpen,\n      navigationWidth,\n      tools,\n      globalTools,\n      toolsOpen,\n      toolsWidth,\n      toolbar,\n      sideSplitPanel,\n      bottomSplitPanel,\n      splitPanelOpen,\n      placement,\n      contentType,\n      maxContentWidth,\n      disableContentPaddings,\n      globalToolsOpen,\n      navigationAnimationDisabled,\n      isNested,\n    },\n    ref\n  ) => {\n    const isMobile = useMobile();\n    const isMaxWidth = maxContentWidth === Number.MAX_VALUE || maxContentWidth === Number.MAX_SAFE_INTEGER;\n    const anyPanelOpen = navigationOpen || toolsOpen;\n    return (\n      <div\n        ref={ref}\n        className={clsx(styles.root, testutilStyles.root, {\n          [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),\n          [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',\n        })}\n        style={{\n          minBlockSize: isNested ? '100%' : `calc(100vh - ${placement.insetBlockStart + placement.insetBlockEnd}px)`,\n          [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',\n          [customCssProps.navigationWidth]: `${navigationWidth}px`,\n          [customCssProps.toolsWidth]: `${toolsWidth}px`,\n        }}\n      >\n        {toolbar}\n        {navigation && (\n          <div\n            className={clsx(\n              styles.navigation,\n              !navigationOpen && styles['panel-hidden'],\n              toolsOpen && styles['unfocusable-mobile'],\n              !navigationAnimationDisabled && sharedStyles['with-motion-horizontal']\n            )}\n          >\n            {navigation}\n          </div>\n        )}\n        <main className={clsx(styles['main-landmark'], isMobile && anyPanelOpen && styles['unfocusable-mobile'])}>\n          {notifications && (\n            <div\n              className={clsx(\n                styles['notifications-background'],\n                headerVariant === 'high-contrast' && highContrastHeaderClassName\n              )}\n            ></div>\n          )}\n          {notifications}\n          <div\n            className={clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings })}\n            style={style}\n          >\n            {contentHeader && <div className={styles['content-header']}>{contentHeader}</div>}\n            <div className={clsx(styles.content, testutilStyles.content)}>{content}</div>\n          </div>\n          {bottomSplitPanel && (\n            <div className={clsx(styles['split-panel-bottom'])} style={{ insetBlockEnd: placement.insetBlockEnd }}>\n              {bottomSplitPanel}\n            </div>\n          )}\n        </main>\n        {sideSplitPanel && (\n          <div className={clsx(styles['split-panel-side'], !splitPanelOpen && styles['panel-hidden'])}>\n            {sideSplitPanel}\n          </div>\n        )}\n        <div\n          className={clsx(\n            styles.tools,\n            !toolsOpen && styles['panel-hidden'],\n            sharedStyles['with-motion-horizontal'],\n            navigationOpen && !toolsOpen && styles['unfocusable-mobile'],\n            toolsOpen && styles['tools-open']\n          )}\n        >\n          {tools}\n        </div>\n        <div className={clsx(styles['global-tools'], !globalToolsOpen && styles['panel-hidden'])}>{globalTools}</div>\n      </div>\n    );\n  }\n);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport VisualContext from '../../../internal/components/visual-context';\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport { useMobile } from '../../../internal/hooks/use-mobile';\nimport { highContrastHeaderClassName } from '../../../internal/utils/content-header-utils';\nimport { AppLayoutPropsWithDefaults } from '../../interfaces';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nconst contentTypeCustomWidths: Array<string | undefined> = ['dashboard', 'cards', 'table'];\n\ninterface SkeletonLayoutProps\n  extends Pick<\n    AppLayoutPropsWithDefaults,\n    | 'notifications'\n    | 'headerVariant'\n    | 'contentHeader'\n    | 'content'\n    | 'contentType'\n    | 'maxContentWidth'\n    | 'disableContentPaddings'\n    | 'navigation'\n    | 'navigationOpen'\n    | 'navigationWidth'\n    | 'tools'\n    | 'toolsOpen'\n    | 'toolsWidth'\n    | 'placement'\n  > {\n  style?: React.CSSProperties;\n  toolbar?: React.ReactNode;\n  splitPanelOpen?: boolean;\n  sideSplitPanel?: React.ReactNode;\n  bottomSplitPanel?: React.ReactNode;\n  globalTools?: React.ReactNode;\n  globalToolsOpen?: boolean;\n  navigationAnimationDisabled?: boolean;\n  isNested?: boolean;\n}\n\nexport const SkeletonLayout = React.forwardRef<HTMLDivElement, SkeletonLayoutProps>(\n  (\n    {\n      style,\n      notifications,\n      headerVariant,\n      contentHeader,\n      content,\n      navigation,\n      navigationOpen,\n      navigationWidth,\n      tools,\n      globalTools,\n      toolsOpen,\n      toolsWidth,\n      toolbar,\n      sideSplitPanel,\n      bottomSplitPanel,\n      splitPanelOpen,\n      placement,\n      contentType,\n      maxContentWidth,\n      disableContentPaddings,\n      globalToolsOpen,\n      navigationAnimationDisabled,\n      isNested,\n    },\n    ref\n  ) => {\n    const isMobile = useMobile();\n    const isMaxWidth = maxContentWidth === Number.MAX_VALUE || maxContentWidth === Number.MAX_SAFE_INTEGER;\n    const anyPanelOpen = navigationOpen || toolsOpen;\n    return (\n      <VisualContext contextName=\"app-layout-toolbar\">\n        <div\n          ref={ref}\n          className={clsx(styles.root, testutilStyles.root, {\n            [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),\n            [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',\n          })}\n          style={{\n            minBlockSize: isNested ? '100%' : `calc(100vh - ${placement.insetBlockStart + placement.insetBlockEnd}px)`,\n            [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',\n            [customCssProps.navigationWidth]: `${navigationWidth}px`,\n            [customCssProps.toolsWidth]: `${toolsWidth}px`,\n          }}\n        >\n          {toolbar}\n          {navigation && (\n            <div\n              className={clsx(\n                styles.navigation,\n                !navigationOpen && styles['panel-hidden'],\n                toolsOpen && styles['unfocusable-mobile'],\n                !navigationAnimationDisabled && sharedStyles['with-motion-horizontal']\n              )}\n            >\n              {navigation}\n            </div>\n          )}\n          <main className={clsx(styles['main-landmark'], isMobile && anyPanelOpen && styles['unfocusable-mobile'])}>\n            {notifications && (\n              <div\n                className={clsx(\n                  styles['notifications-background'],\n                  headerVariant === 'high-contrast' && highContrastHeaderClassName\n                )}\n              ></div>\n            )}\n            {notifications}\n            <div\n              className={clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings })}\n              style={style}\n            >\n              {contentHeader && <div className={styles['content-header']}>{contentHeader}</div>}\n              <div className={clsx(styles.content, testutilStyles.content)}>{content}</div>\n            </div>\n            {bottomSplitPanel && (\n              <div className={clsx(styles['split-panel-bottom'])} style={{ insetBlockEnd: placement.insetBlockEnd }}>\n                {bottomSplitPanel}\n              </div>\n            )}\n          </main>\n          {sideSplitPanel && (\n            <div className={clsx(styles['split-panel-side'], !splitPanelOpen && styles['panel-hidden'])}>\n              {sideSplitPanel}\n            </div>\n          )}\n          <div\n            className={clsx(\n              styles.tools,\n              !toolsOpen && styles['panel-hidden'],\n              sharedStyles['with-motion-horizontal'],\n              navigationOpen && !toolsOpen && styles['unfocusable-mobile'],\n              toolsOpen && styles['tools-open']\n            )}\n          >\n            {tools}\n          </div>\n          <div className={clsx(styles['global-tools'], !globalToolsOpen && styles['panel-hidden'])}>{globalTools}</div>\n        </div>\n      </VisualContext>\n    );\n  }\n);\n"]}

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

@@ -1,24 +1,24 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_7nfqu_uf4vt_153",
-  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_uf4vt_197",
-  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_uf4vt_202",
-  "navigation": "awsui_navigation_7nfqu_uf4vt_217",
-  "tools": "awsui_tools_7nfqu_uf4vt_218",
-  "global-tools": "awsui_global-tools_7nfqu_uf4vt_219",
-  "tools-open": "awsui_tools-open_7nfqu_uf4vt_257",
-  "split-panel-side": "awsui_split-panel-side_7nfqu_uf4vt_270",
-  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_uf4vt_277",
-  "panel-hidden": "awsui_panel-hidden_7nfqu_uf4vt_290",
-  "toolbar-container": "awsui_toolbar-container_7nfqu_uf4vt_300",
-  "notifications-container": "awsui_notifications-container_7nfqu_uf4vt_306",
-  "notifications-background": "awsui_notifications-background_7nfqu_uf4vt_310",
-  "main-landmark": "awsui_main-landmark_7nfqu_uf4vt_321",
-  "main": "awsui_main_7nfqu_uf4vt_321",
-  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_uf4vt_330",
-  "content-header": "awsui_content-header_7nfqu_uf4vt_340",
-  "content": "awsui_content_7nfqu_uf4vt_340",
-  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_uf4vt_350"
+  "root": "awsui_root_7nfqu_jksfw_153",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_jksfw_197",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_jksfw_202",
+  "navigation": "awsui_navigation_7nfqu_jksfw_217",
+  "tools": "awsui_tools_7nfqu_jksfw_218",
+  "global-tools": "awsui_global-tools_7nfqu_jksfw_219",
+  "tools-open": "awsui_tools-open_7nfqu_jksfw_257",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_jksfw_270",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_jksfw_277",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_jksfw_290",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_jksfw_300",
+  "notifications-container": "awsui_notifications-container_7nfqu_jksfw_306",
+  "notifications-background": "awsui_notifications-background_7nfqu_jksfw_310",
+  "main-landmark": "awsui_main-landmark_7nfqu_jksfw_321",
+  "main": "awsui_main_7nfqu_jksfw_321",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_jksfw_330",
+  "content-header": "awsui_content-header_7nfqu_jksfw_340",
+  "content": "awsui_content_7nfqu_jksfw_340",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_jksfw_350"
 };