@cloudscape-design/components 3.0.950 → 3.0.951

package/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_lgv7x_149",
-  "scrolling-background": "awsui_scrolling-background_hyvsj_lgv7x_152",
-  "breadcrumbs": "awsui_breadcrumbs_hyvsj_lgv7x_163",
-  "drawers-container": "awsui_drawers-container_hyvsj_lgv7x_176",
-  "has-open-drawer": "awsui_has-open-drawer_hyvsj_lgv7x_187",
-  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_lgv7x_208",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_lgv7x_213",
-  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_lgv7x_251",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_lgv7x_261",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_lgv7x_266",
-  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_lgv7x_280",
-  "drawers-trigger": "awsui_drawers-trigger_hyvsj_lgv7x_266",
-  "drawer": "awsui_drawer_hyvsj_lgv7x_176",
-  "drawer-content-container": "awsui_drawer-content-container_hyvsj_lgv7x_311",
-  "drawer-close-button": "awsui_drawer-close-button_hyvsj_lgv7x_320",
-  "drawer-content": "awsui_drawer-content_hyvsj_lgv7x_311",
-  "drawer-content-hidden": "awsui_drawer-content-hidden_hyvsj_lgv7x_329",
-  "drawer-slider": "awsui_drawer-slider_hyvsj_lgv7x_332",
-  "is-drawer-open": "awsui_is-drawer-open_hyvsj_lgv7x_339",
-  "content": "awsui_content_hyvsj_lgv7x_365",
-  "layout": "awsui_layout_hyvsj_lgv7x_390",
-  "has-max-content-width": "awsui_has-max-content-width_hyvsj_lgv7x_462",
-  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_lgv7x_477",
-  "content-type-table": "awsui_content-type-table_hyvsj_lgv7x_491",
-  "content-type-cards": "awsui_content-type-cards_hyvsj_lgv7x_491",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_lgv7x_497",
-  "is-hide-mobile-toolbar": "awsui_is-hide-mobile-toolbar_hyvsj_lgv7x_500",
-  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_lgv7x_514",
-  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_lgv7x_517",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_lgv7x_527",
-  "content-first-child-header": "awsui_content-first-child-header_hyvsj_lgv7x_530",
-  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_lgv7x_530",
-  "has-header": "awsui_has-header_hyvsj_lgv7x_530",
-  "content-first-child-main": "awsui_content-first-child-main_hyvsj_lgv7x_545",
-  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_lgv7x_545",
-  "has-left-toggles-gutter": "awsui_has-left-toggles-gutter_hyvsj_lgv7x_565",
-  "has-right-toggles-gutter": "awsui_has-right-toggles-gutter_hyvsj_lgv7x_568",
-  "has-split-panel": "awsui_has-split-panel_hyvsj_lgv7x_588",
-  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_lgv7x_588",
-  "block-body-scroll": "awsui_block-body-scroll_hyvsj_lgv7x_596",
-  "unfocusable": "awsui_unfocusable_hyvsj_lgv7x_601",
-  "container": "awsui_container_hyvsj_lgv7x_611",
-  "is-navigation-open": "awsui_is-navigation-open_hyvsj_lgv7x_637",
-  "is-tools-open": "awsui_is-tools-open_hyvsj_lgv7x_640",
-  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_lgv7x_640",
-  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_lgv7x_640",
-  "has-active-drawer": "awsui_has-active-drawer_hyvsj_lgv7x_640",
-  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_lgv7x_653",
-  "remove-high-contrast-header": "awsui_remove-high-contrast-header_hyvsj_lgv7x_670",
-  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_lgv7x_674",
-  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_lgv7x_678",
-  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_lgv7x_682",
-  "navigation-container": "awsui_navigation-container_hyvsj_lgv7x_691",
-  "show-navigation": "awsui_show-navigation_hyvsj_lgv7x_729",
-  "animating": "awsui_animating_hyvsj_lgv7x_752",
-  "showButtons": "awsui_showButtons_hyvsj_lgv7x_1",
-  "navigation": "awsui_navigation_hyvsj_lgv7x_691",
-  "openNavigation": "awsui_openNavigation_hyvsj_lgv7x_1",
-  "animated-content": "awsui_animated-content_hyvsj_lgv7x_816",
-  "content-container": "awsui_content-container_hyvsj_lgv7x_819",
-  "hide-navigation": "awsui_hide-navigation_hyvsj_lgv7x_828",
-  "notifications": "awsui_notifications_hyvsj_lgv7x_838",
-  "has-notification-content": "awsui_has-notification-content_hyvsj_lgv7x_843",
-  "sticky-notifications": "awsui_sticky-notifications_hyvsj_lgv7x_847",
-  "high-contrast": "awsui_high-contrast_hyvsj_lgv7x_852",
-  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_lgv7x_870",
-  "position-bottom": "awsui_position-bottom_hyvsj_lgv7x_917",
-  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_lgv7x_1",
-  "split-panel-side": "awsui_split-panel-side_hyvsj_lgv7x_946",
-  "position-side": "awsui_position-side_hyvsj_lgv7x_959",
-  "tools-container": "awsui_tools-container_hyvsj_lgv7x_981",
-  "tools": "awsui_tools_hyvsj_lgv7x_981",
-  "openTools": "awsui_openTools_hyvsj_lgv7x_1",
-  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_lgv7x_1070",
-  "hide-tools": "awsui_hide-tools_hyvsj_lgv7x_1080",
-  "show-tools": "awsui_show-tools_hyvsj_lgv7x_1092",
-  "has-tools-form": "awsui_has-tools-form_hyvsj_lgv7x_1070",
-  "trigger-button-styles": "awsui_trigger-button-styles_hyvsj_lgv7x_1172",
-  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_lgv7x_1188",
-  "trigger": "awsui_trigger_hyvsj_lgv7x_1172",
-  "selected": "awsui_selected_hyvsj_lgv7x_1240",
-  "badge": "awsui_badge_hyvsj_lgv7x_1260",
-  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_lgv7x_1264",
-  "trigger-wrapper-tooltip-visible": "awsui_trigger-wrapper-tooltip-visible_hyvsj_lgv7x_1275",
-  "dot": "awsui_dot_hyvsj_lgv7x_1279",
-  "trigger-tooltip": "awsui_trigger-tooltip_hyvsj_lgv7x_1292"
+  "background": "awsui_background_hyvsj_1u3br_149",
+  "scrolling-background": "awsui_scrolling-background_hyvsj_1u3br_152",
+  "breadcrumbs": "awsui_breadcrumbs_hyvsj_1u3br_163",
+  "drawers-container": "awsui_drawers-container_hyvsj_1u3br_176",
+  "has-open-drawer": "awsui_has-open-drawer_hyvsj_1u3br_187",
+  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_1u3br_208",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_1u3br_213",
+  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_1u3br_251",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_1u3br_261",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_1u3br_266",
+  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_1u3br_280",
+  "drawers-trigger": "awsui_drawers-trigger_hyvsj_1u3br_266",
+  "drawer": "awsui_drawer_hyvsj_1u3br_176",
+  "drawer-content-container": "awsui_drawer-content-container_hyvsj_1u3br_311",
+  "drawer-close-button": "awsui_drawer-close-button_hyvsj_1u3br_320",
+  "drawer-content": "awsui_drawer-content_hyvsj_1u3br_311",
+  "drawer-content-hidden": "awsui_drawer-content-hidden_hyvsj_1u3br_329",
+  "drawer-slider": "awsui_drawer-slider_hyvsj_1u3br_332",
+  "is-drawer-open": "awsui_is-drawer-open_hyvsj_1u3br_339",
+  "content": "awsui_content_hyvsj_1u3br_365",
+  "layout": "awsui_layout_hyvsj_1u3br_390",
+  "has-max-content-width": "awsui_has-max-content-width_hyvsj_1u3br_462",
+  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_1u3br_477",
+  "content-type-table": "awsui_content-type-table_hyvsj_1u3br_491",
+  "content-type-cards": "awsui_content-type-cards_hyvsj_1u3br_491",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_1u3br_497",
+  "is-hide-mobile-toolbar": "awsui_is-hide-mobile-toolbar_hyvsj_1u3br_500",
+  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_1u3br_514",
+  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_1u3br_517",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_1u3br_527",
+  "content-first-child-header": "awsui_content-first-child-header_hyvsj_1u3br_530",
+  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_1u3br_530",
+  "has-header": "awsui_has-header_hyvsj_1u3br_530",
+  "content-first-child-main": "awsui_content-first-child-main_hyvsj_1u3br_545",
+  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_1u3br_545",
+  "has-left-toggles-gutter": "awsui_has-left-toggles-gutter_hyvsj_1u3br_565",
+  "has-right-toggles-gutter": "awsui_has-right-toggles-gutter_hyvsj_1u3br_568",
+  "has-split-panel": "awsui_has-split-panel_hyvsj_1u3br_588",
+  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_1u3br_588",
+  "block-body-scroll": "awsui_block-body-scroll_hyvsj_1u3br_596",
+  "unfocusable": "awsui_unfocusable_hyvsj_1u3br_601",
+  "container": "awsui_container_hyvsj_1u3br_611",
+  "is-navigation-open": "awsui_is-navigation-open_hyvsj_1u3br_637",
+  "is-tools-open": "awsui_is-tools-open_hyvsj_1u3br_640",
+  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_1u3br_640",
+  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_1u3br_640",
+  "has-active-drawer": "awsui_has-active-drawer_hyvsj_1u3br_640",
+  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_1u3br_653",
+  "remove-high-contrast-header": "awsui_remove-high-contrast-header_hyvsj_1u3br_670",
+  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_1u3br_674",
+  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_1u3br_678",
+  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_1u3br_682",
+  "navigation-container": "awsui_navigation-container_hyvsj_1u3br_691",
+  "show-navigation": "awsui_show-navigation_hyvsj_1u3br_729",
+  "animating": "awsui_animating_hyvsj_1u3br_752",
+  "showButtons": "awsui_showButtons_hyvsj_1u3br_1",
+  "navigation": "awsui_navigation_hyvsj_1u3br_691",
+  "openNavigation": "awsui_openNavigation_hyvsj_1u3br_1",
+  "animated-content": "awsui_animated-content_hyvsj_1u3br_816",
+  "content-container": "awsui_content-container_hyvsj_1u3br_819",
+  "hide-navigation": "awsui_hide-navigation_hyvsj_1u3br_828",
+  "notifications": "awsui_notifications_hyvsj_1u3br_838",
+  "has-notification-content": "awsui_has-notification-content_hyvsj_1u3br_843",
+  "sticky-notifications": "awsui_sticky-notifications_hyvsj_1u3br_847",
+  "high-contrast": "awsui_high-contrast_hyvsj_1u3br_852",
+  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_1u3br_870",
+  "position-bottom": "awsui_position-bottom_hyvsj_1u3br_917",
+  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_1u3br_1",
+  "split-panel-side": "awsui_split-panel-side_hyvsj_1u3br_946",
+  "position-side": "awsui_position-side_hyvsj_1u3br_959",
+  "tools-container": "awsui_tools-container_hyvsj_1u3br_981",
+  "tools": "awsui_tools_hyvsj_1u3br_981",
+  "openTools": "awsui_openTools_hyvsj_1u3br_1",
+  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_1u3br_1070",
+  "hide-tools": "awsui_hide-tools_hyvsj_1u3br_1080",
+  "show-tools": "awsui_show-tools_hyvsj_1u3br_1092",
+  "has-tools-form": "awsui_has-tools-form_hyvsj_1u3br_1070",
+  "trigger-button-styles": "awsui_trigger-button-styles_hyvsj_1u3br_1172",
+  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_1u3br_1188",
+  "trigger": "awsui_trigger_hyvsj_1u3br_1172",
+  "selected": "awsui_selected_hyvsj_1u3br_1240",
+  "badge": "awsui_badge_hyvsj_1u3br_1260",
+  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_1u3br_1264",
+  "trigger-wrapper-tooltip-visible": "awsui_trigger-wrapper-tooltip-visible_hyvsj_1u3br_1275",
+  "dot": "awsui_dot_hyvsj_1u3br_1279",
+  "trigger-tooltip": "awsui_trigger-tooltip_hyvsj_1u3br_1292"
 };
   

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

@@ -1,15 +1,15 @@
 
     import './styles.scoped.css';
     export default {
-  "drawer": "awsui_drawer_12i0j_6o9m9_189",
-  "legacy": "awsui_legacy_12i0j_6o9m9_204",
-  "last-opened": "awsui_last-opened_12i0j_6o9m9_212",
-  "drawer-global": "awsui_drawer-global_12i0j_6o9m9_217",
-  "drawer-hidden": "awsui_drawer-hidden_12i0j_6o9m9_221",
-  "drawer-content-container": "awsui_drawer-content-container_12i0j_6o9m9_224",
-  "drawer-close-button": "awsui_drawer-close-button_12i0j_6o9m9_232",
-  "drawer-content": "awsui_drawer-content_12i0j_6o9m9_224",
-  "drawer-content-hidden": "awsui_drawer-content-hidden_12i0j_6o9m9_242",
-  "drawer-slider": "awsui_drawer-slider_12i0j_6o9m9_245"
+  "drawer": "awsui_drawer_12i0j_gzw0r_189",
+  "legacy": "awsui_legacy_12i0j_gzw0r_204",
+  "last-opened": "awsui_last-opened_12i0j_gzw0r_212",
+  "drawer-global": "awsui_drawer-global_12i0j_gzw0r_217",
+  "drawer-hidden": "awsui_drawer-hidden_12i0j_gzw0r_221",
+  "drawer-content-container": "awsui_drawer-content-container_12i0j_gzw0r_224",
+  "drawer-close-button": "awsui_drawer-close-button_12i0j_gzw0r_232",
+  "drawer-content": "awsui_drawer-content_12i0j_gzw0r_224",
+  "drawer-content-hidden": "awsui_drawer-content-hidden_12i0j_gzw0r_242",
+  "drawer-slider": "awsui_drawer-slider_12i0j_gzw0r_245"
 };
   

package/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_6o9m9_189:not(#\9) {
+.awsui_drawer_12i0j_gzw0r_189:not(#\9) {
   position: sticky;
   z-index: 830;
-  background-color: var(--color-background-container-content-z79u4u, #ffffff);
+  background-color: var(--color-background-container-content-78ljyf, #ffffff);
   display: grid;
-  grid-template-columns: var(--space-m-udix3p, 16px) 1fr;
+  grid-template-columns: var(--space-m-dsumyt, 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_6o9m9_189:not(#\9):not(.awsui_legacy_12i0j_6o9m9_204) {
-    border-inline-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-layout-hrw5xj, #b4b4bb);
+  .awsui_drawer_12i0j_gzw0r_189:not(#\9):not(.awsui_legacy_12i0j_gzw0r_204) {
+    border-inline-start: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-layout-px1i24, #c6c6cd);
   }
 }
 @media (max-width: 688px) {
-  .awsui_drawer_12i0j_6o9m9_189:not(#\9) {
+  .awsui_drawer_12i0j_gzw0r_189:not(#\9) {
     inline-size: 100%;
   }
-  .awsui_drawer_12i0j_6o9m9_189.awsui_last-opened_12i0j_6o9m9_212:not(#\9) {
+  .awsui_drawer_12i0j_gzw0r_189.awsui_last-opened_12i0j_gzw0r_212:not(#\9) {
     z-index: 1001;
   }
 }
 @media (max-width: 688px) {
-  .awsui_drawer_12i0j_6o9m9_189.awsui_drawer-global_12i0j_6o9m9_217:not(#\9):not(.awsui_last-opened_12i0j_6o9m9_212) {
+  .awsui_drawer_12i0j_gzw0r_189.awsui_drawer-global_12i0j_gzw0r_217:not(#\9):not(.awsui_last-opened_12i0j_gzw0r_212) {
     display: none;
   }
 }
-.awsui_drawer_12i0j_6o9m9_189.awsui_drawer-hidden_12i0j_6o9m9_221:not(#\9) {
+.awsui_drawer_12i0j_gzw0r_189.awsui_drawer-hidden_12i0j_gzw0r_221:not(#\9) {
   display: none;
 }
-.awsui_drawer_12i0j_6o9m9_189 > .awsui_drawer-content-container_12i0j_6o9m9_224:not(#\9) {
+.awsui_drawer_12i0j_gzw0r_189 > .awsui_drawer-content-container_12i0j_gzw0r_224:not(#\9) {
   grid-column: 1/span 2;
   grid-row: 1;
   display: grid;
-  grid-template-columns: var(--space-m-udix3p, 16px) 1fr auto var(--space-m-udix3p, 16px);
+  grid-template-columns: var(--space-m-dsumyt, 16px) 1fr auto var(--space-m-dsumyt, 16px);
   grid-template-rows: 14px auto 1fr;
   overflow-y: auto;
 }
-.awsui_drawer_12i0j_6o9m9_189 > .awsui_drawer-content-container_12i0j_6o9m9_224 > .awsui_drawer-close-button_12i0j_6o9m9_232:not(#\9) {
+.awsui_drawer_12i0j_gzw0r_189 > .awsui_drawer-content-container_12i0j_gzw0r_224 > .awsui_drawer-close-button_12i0j_gzw0r_232:not(#\9) {
   grid-column: 3;
   grid-row: 2;
   z-index: 1;
   align-self: start;
 }
-.awsui_drawer_12i0j_6o9m9_189 > .awsui_drawer-content-container_12i0j_6o9m9_224 > .awsui_drawer-content_12i0j_6o9m9_224:not(#\9) {
+.awsui_drawer_12i0j_gzw0r_189 > .awsui_drawer-content-container_12i0j_gzw0r_224 > .awsui_drawer-content_12i0j_gzw0r_224:not(#\9) {
   grid-column: 1/span 4;
   grid-row: 1/span 2;
 }
-.awsui_drawer_12i0j_6o9m9_189 > .awsui_drawer-content-container_12i0j_6o9m9_224 > .awsui_drawer-content_12i0j_6o9m9_224.awsui_drawer-content-hidden_12i0j_6o9m9_242:not(#\9) {
+.awsui_drawer_12i0j_gzw0r_189 > .awsui_drawer-content-container_12i0j_gzw0r_224 > .awsui_drawer-content_12i0j_gzw0r_224.awsui_drawer-content-hidden_12i0j_gzw0r_242:not(#\9) {
   display: none;
 }
-.awsui_drawer_12i0j_6o9m9_189 > .awsui_drawer-slider_12i0j_6o9m9_245:not(#\9) {
+.awsui_drawer_12i0j_gzw0r_189 > .awsui_drawer-slider_12i0j_gzw0r_245:not(#\9) {
   grid-column: 1;
   grid-row: 1;
   block-size: 100%;

package/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_6o9m9_189",
-  "legacy": "awsui_legacy_12i0j_6o9m9_204",
-  "last-opened": "awsui_last-opened_12i0j_6o9m9_212",
-  "drawer-global": "awsui_drawer-global_12i0j_6o9m9_217",
-  "drawer-hidden": "awsui_drawer-hidden_12i0j_6o9m9_221",
-  "drawer-content-container": "awsui_drawer-content-container_12i0j_6o9m9_224",
-  "drawer-close-button": "awsui_drawer-close-button_12i0j_6o9m9_232",
-  "drawer-content": "awsui_drawer-content_12i0j_6o9m9_224",
-  "drawer-content-hidden": "awsui_drawer-content-hidden_12i0j_6o9m9_242",
-  "drawer-slider": "awsui_drawer-slider_12i0j_6o9m9_245"
+  "drawer": "awsui_drawer_12i0j_gzw0r_189",
+  "legacy": "awsui_legacy_12i0j_gzw0r_204",
+  "last-opened": "awsui_last-opened_12i0j_gzw0r_212",
+  "drawer-global": "awsui_drawer-global_12i0j_gzw0r_217",
+  "drawer-hidden": "awsui_drawer-hidden_12i0j_gzw0r_221",
+  "drawer-content-container": "awsui_drawer-content-container_12i0j_gzw0r_224",
+  "drawer-close-button": "awsui_drawer-close-button_12i0j_gzw0r_232",
+  "drawer-content": "awsui_drawer-content_12i0j_gzw0r_224",
+  "drawer-content-hidden": "awsui_drawer-content-hidden_12i0j_gzw0r_242",
+  "drawer-slider": "awsui_drawer-slider_12i0j_gzw0r_245"
 };
   

package/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_1l7b5_153",
-  "is-navigation-open": "awsui_is-navigation-open_2p2ab_1l7b5_164",
-  "navigation": "awsui_navigation_2p2ab_1l7b5_153",
-  "hide-navigation": "awsui_hide-navigation_2p2ab_1l7b5_184"
+  "navigation-container": "awsui_navigation-container_2p2ab_hnr2t_153",
+  "is-navigation-open": "awsui_is-navigation-open_2p2ab_hnr2t_164",
+  "navigation": "awsui_navigation_2p2ab_hnr2t_153",
+  "hide-navigation": "awsui_hide-navigation_2p2ab_hnr2t_184"
 };
   

package/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_1l7b5_153:not(#\9) {
+.awsui_navigation-container_2p2ab_hnr2t_153:not(#\9) {
   position: sticky;
   z-index: 830;
-  background-color: var(--color-background-container-content-z79u4u, #ffffff);
+  background-color: var(--color-background-container-content-78ljyf, #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_1l7b5_153:not(#\9):not(.awsui_is-navigation-open_2p2ab_1l7b5_164) {
+.awsui_navigation-container_2p2ab_hnr2t_153:not(#\9):not(.awsui_is-navigation-open_2p2ab_hnr2t_164) {
   inline-size: 0px;
   display: none;
 }
-.awsui_navigation-container_2p2ab_1l7b5_153 > .awsui_navigation_2p2ab_1l7b5_153:not(#\9) {
+.awsui_navigation-container_2p2ab_hnr2t_153 > .awsui_navigation_2p2ab_hnr2t_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_1l7b5_153:not(#\9) {
+  .awsui_navigation-container_2p2ab_hnr2t_153:not(#\9) {
     --awsui-navigation-width-g964ok: 100vw;
     z-index: 1001;
   }
 }
 
-.awsui_hide-navigation_2p2ab_1l7b5_184:not(#\9) {
+.awsui_hide-navigation_2p2ab_hnr2t_184:not(#\9) {
   position: absolute;
-  inset-inline-end: var(--space-m-udix3p, 16px);
+  inset-inline-end: var(--space-m-dsumyt, 16px);
   inset-block-start: 14px;
 }

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

@@ -2,9 +2,9 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "navigation-container": "awsui_navigation-container_2p2ab_1l7b5_153",
-  "is-navigation-open": "awsui_is-navigation-open_2p2ab_1l7b5_164",
-  "navigation": "awsui_navigation_2p2ab_1l7b5_153",
-  "hide-navigation": "awsui_hide-navigation_2p2ab_1l7b5_184"
+  "navigation-container": "awsui_navigation-container_2p2ab_hnr2t_153",
+  "is-navigation-open": "awsui_is-navigation-open_2p2ab_hnr2t_164",
+  "navigation": "awsui_navigation_2p2ab_hnr2t_153",
+  "hide-navigation": "awsui_hide-navigation_2p2ab_hnr2t_184"
 };
   

package/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_4ef3v_9",
-  "sticky-notifications-with-background": "awsui_sticky-notifications-with-background_154bi_4ef3v_13",
-  "has-notifications-content": "awsui_has-notifications-content_154bi_4ef3v_17"
+  "sticky-notifications": "awsui_sticky-notifications_154bi_1mvpx_9",
+  "sticky-notifications-with-background": "awsui_sticky-notifications-with-background_154bi_1mvpx_13",
+  "has-notifications-content": "awsui_has-notifications-content_154bi_1mvpx_17"
 };
   

package/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_4ef3v_9:not(#\9) {
+.awsui_sticky-notifications_154bi_1mvpx_9:not(#\9) {
   position: sticky;
   z-index: 850;
 }
-.awsui_sticky-notifications-with-background_154bi_4ef3v_13:not(#\9) {
-  background-color: var(--color-background-layout-main-nqw91u, #ffffff);
+.awsui_sticky-notifications-with-background_154bi_1mvpx_13:not(#\9) {
+  background-color: var(--color-background-layout-main-uncvr6, #ffffff);
 }
 
-.awsui_has-notifications-content_154bi_4ef3v_17:not(#\9) {
-  padding-block-start: var(--space-scaled-xs-26e2du, 8px);
+.awsui_has-notifications-content_154bi_1mvpx_17:not(#\9) {
+  padding-block-start: var(--space-scaled-xs-xwoogq, 8px);
 }

package/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_4ef3v_9",
-  "sticky-notifications-with-background": "awsui_sticky-notifications-with-background_154bi_4ef3v_13",
-  "has-notifications-content": "awsui_has-notifications-content_154bi_4ef3v_17"
+  "sticky-notifications": "awsui_sticky-notifications_154bi_1mvpx_9",
+  "sticky-notifications-with-background": "awsui_sticky-notifications-with-background_154bi_1mvpx_13",
+  "has-notifications-content": "awsui_has-notifications-content_154bi_1mvpx_17"
 };
   

package/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/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/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/app-layout/visual-refresh-toolbar/skeleton/styles.css.js

@@ -1,24 +1,24 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_7nfqu_1686l_153",
-  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_1686l_197",
-  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_1686l_202",
-  "navigation": "awsui_navigation_7nfqu_1686l_217",
-  "tools": "awsui_tools_7nfqu_1686l_218",
-  "global-tools": "awsui_global-tools_7nfqu_1686l_219",
-  "tools-open": "awsui_tools-open_7nfqu_1686l_257",
-  "split-panel-side": "awsui_split-panel-side_7nfqu_1686l_270",
-  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_1686l_277",
-  "panel-hidden": "awsui_panel-hidden_7nfqu_1686l_290",
-  "toolbar-container": "awsui_toolbar-container_7nfqu_1686l_300",
-  "notifications-container": "awsui_notifications-container_7nfqu_1686l_306",
-  "notifications-background": "awsui_notifications-background_7nfqu_1686l_310",
-  "main-landmark": "awsui_main-landmark_7nfqu_1686l_321",
-  "main": "awsui_main_7nfqu_1686l_321",
-  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_1686l_330",
-  "content-header": "awsui_content-header_7nfqu_1686l_340",
-  "content": "awsui_content_7nfqu_1686l_340",
-  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_1686l_350"
+  "root": "awsui_root_7nfqu_1sgnw_153",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_1sgnw_197",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_1sgnw_202",
+  "navigation": "awsui_navigation_7nfqu_1sgnw_217",
+  "tools": "awsui_tools_7nfqu_1sgnw_218",
+  "global-tools": "awsui_global-tools_7nfqu_1sgnw_219",
+  "tools-open": "awsui_tools-open_7nfqu_1sgnw_257",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_1sgnw_270",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_1sgnw_277",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_1sgnw_290",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_1sgnw_300",
+  "notifications-container": "awsui_notifications-container_7nfqu_1sgnw_306",
+  "notifications-background": "awsui_notifications-background_7nfqu_1sgnw_310",
+  "main-landmark": "awsui_main-landmark_7nfqu_1sgnw_321",
+  "main": "awsui_main_7nfqu_1sgnw_321",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_1sgnw_330",
+  "content-header": "awsui_content-header_7nfqu_1sgnw_340",
+  "content": "awsui_content_7nfqu_1sgnw_340",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_1sgnw_350"
 };