@cloudscape-design/components-themeable 3.0.652 → 3.0.653

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "9bc6032bbd39139f58508164f6e4659c3a7a2f32"
+  "commit": "0968bb6fcef93e54e3b891fa984fa5c13ab68216"
 }

package/lib/internal/scss/app-layout/skeleton/styles.scss

@@ -0,0 +1,82 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@use '../../internal/styles' as styles;
+@use '../../internal/styles/tokens' as awsui;
+@use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
+@use '../constants' as constants;
+
+.root {
+  #{custom-props.$maxContentWidth}: 100%;
+  display: grid;
+  grid-template-areas:
+    'navigation topBar       topBar        topBar    tools'
+    'navigation .         notifications    .         tools'
+    'navigation .             main         .         tools';
+  grid-template-columns:
+    min-content
+    minmax(#{awsui.$space-layout-content-horizontal}, 1fr)
+    minmax(var(#{custom-props.$minContentWidth}), var(#{custom-props.$maxContentWidth}))
+    minmax(#{awsui.$space-layout-content-horizontal}, 1fr)
+    min-content;
+  grid-template-rows: min-content min-content 1fr min-content;
+
+  &.has-adaptive-widths-default {
+    @each $breakpoint, $width in constants.$adaptive-content-widths {
+      @include styles.media-breakpoint-up($breakpoint) {
+        #{custom-props.$maxContentWidth}: $width;
+      }
+    }
+  }
+
+  &.has-adaptive-widths-dashboard {
+    @each $breakpoint, $width in constants.$dashboard-content-widths {
+      @include styles.media-breakpoint-up($breakpoint) {
+        #{custom-props.$maxContentWidth}: $width;
+      }
+    }
+  }
+}
+
+.main-landmark {
+  // does not participate in the layout, rendered for accessibility grouping
+  display: contents;
+}
+
+.navigation {
+  grid-area: navigation;
+  border-inline-end: 1px solid awsui.$color-border-divider-panel-side;
+}
+
+.tools {
+  grid-area: tools;
+  border-inline-start: 1px solid awsui.$color-border-divider-panel-side;
+}
+
+.top-bar {
+  grid-area: topBar;
+  block-size: 48px;
+  border-block-end: 1px solid awsui.$color-border-divider-panel-bottom;
+}
+
+.notifications {
+  grid-area: notifications;
+  &:not(:empty) {
+    padding-block-start: awsui.$space-scaled-xs;
+  }
+}
+
+.main {
+  grid-area: main;
+  margin-block-start: awsui.$space-scaled-s;
+  margin-block-end: awsui.$space-layout-content-bottom;
+  &-disable-paddings {
+    grid-column: 2 / span 3;
+    margin-block: 0;
+  }
+}
+
+.content-header {
+  margin-block-end: awsui.$space-content-header-padding-bottom;
+}

package/lib/internal/scss/internal/generated/custom-css-properties/index.scss

@@ -1,53 +1,53 @@
 
-    $breadcrumbsGap: --awsui-breadcrumbs-gap-tkr9yl;
-$contentGapLeft: --awsui-content-gap-left-tkr9yl;
-$contentGapRight: --awsui-content-gap-right-tkr9yl;
-$contentHeight: --awsui-content-height-tkr9yl;
-$defaultMaxContentWidth: --awsui-default-max-content-width-tkr9yl;
-$defaultMinContentWidth: --awsui-default-min-content-width-tkr9yl;
-$drawerSize: --awsui-drawer-size-tkr9yl;
-$footerHeight: --awsui-footer-height-tkr9yl;
-$headerGap: --awsui-header-gap-tkr9yl;
-$headerHeight: --awsui-header-height-tkr9yl;
-$layoutWidth: --awsui-layout-width-tkr9yl;
-$mainGap: --awsui-main-gap-tkr9yl;
-$mainOffsetLeft: --awsui-main-offset-left-tkr9yl;
-$mainTemplateRows: --awsui-main-template-rows-tkr9yl;
-$maxContentWidth: --awsui-max-content-width-tkr9yl;
-$minContentWidth: --awsui-min-content-width-tkr9yl;
-$mobileBarHeight: --awsui-mobile-bar-height-tkr9yl;
-$notificationsGap: --awsui-notifications-gap-tkr9yl;
-$notificationsHeight: --awsui-notifications-height-tkr9yl;
-$offsetTop: --awsui-offset-top-tkr9yl;
-$overlapHeight: --awsui-overlap-height-tkr9yl;
-$navigationWidth: --awsui-navigation-width-tkr9yl;
-$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-tkr9yl;
-$splitPanelReportedSize: --awsui-split-panel-reported-size-tkr9yl;
-$splitPanelHeight: --awsui-split-panel-height-tkr9yl;
-$splitPanelMinWidth: --awsui-split-panel-min-width-tkr9yl;
-$splitPanelMaxWidth: --awsui-split-panel-max-width-tkr9yl;
-$toolsMaxWidth: --awsui-tools-max-width-tkr9yl;
-$toolsWidth: --awsui-tools-width-tkr9yl;
-$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-tkr9yl;
-$contentScrollMargin: --awsui-content-scroll-margin-tkr9yl;
-$flashbarStackDepth: --awsui-flashbar-stack-depth-tkr9yl;
-$flashbarStackIndex: --awsui-flashbar-stack-index-tkr9yl;
-$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-tkr9yl;
-$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-tkr9yl;
-$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-tkr9yl;
-$dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-tkr9yl;
-$spinnerRotatorFrom: --awsui-spinner-rotator-from-tkr9yl;
-$spinnerRotatorTo: --awsui-spinner-rotator-to-tkr9yl;
-$spinnerLineLeftFrom: --awsui-spinner-line-left-from-tkr9yl;
-$spinnerLineLeftTo: --awsui-spinner-line-left-to-tkr9yl;
-$spinnerLineRightFrom: --awsui-spinner-line-right-from-tkr9yl;
-$spinnerLineRightTo: --awsui-spinner-line-right-to-tkr9yl;
-$sliderLabelCount: --awsui-slider-label-count-tkr9yl;
-$sliderTickCount: --awsui-slider-tick-count-tkr9yl;
-$sliderReferenceColumn: --awsui-slider-reference-column-tkr9yl;
-$sliderNextReferenceColumn: --awsui-slider-next-reference-column-tkr9yl;
-$sliderMaxStart: --awsui-slider-max-start-tkr9yl;
-$sliderMinEnd: --awsui-slider-min-end-tkr9yl;
-$sliderRangeInlineSize: --awsui-slider-range-inline-size-tkr9yl;
-$sliderTooltipPosition: --awsui-slider-tooltip-position-tkr9yl;
+    $maxContentWidth: --awsui-max-content-width-epuq3n;
+$minContentWidth: --awsui-min-content-width-epuq3n;
+$breadcrumbsGap: --awsui-breadcrumbs-gap-epuq3n;
+$contentGapLeft: --awsui-content-gap-left-epuq3n;
+$contentGapRight: --awsui-content-gap-right-epuq3n;
+$contentHeight: --awsui-content-height-epuq3n;
+$defaultMaxContentWidth: --awsui-default-max-content-width-epuq3n;
+$defaultMinContentWidth: --awsui-default-min-content-width-epuq3n;
+$drawerSize: --awsui-drawer-size-epuq3n;
+$footerHeight: --awsui-footer-height-epuq3n;
+$headerGap: --awsui-header-gap-epuq3n;
+$headerHeight: --awsui-header-height-epuq3n;
+$layoutWidth: --awsui-layout-width-epuq3n;
+$mainGap: --awsui-main-gap-epuq3n;
+$mainOffsetLeft: --awsui-main-offset-left-epuq3n;
+$mainTemplateRows: --awsui-main-template-rows-epuq3n;
+$mobileBarHeight: --awsui-mobile-bar-height-epuq3n;
+$notificationsGap: --awsui-notifications-gap-epuq3n;
+$notificationsHeight: --awsui-notifications-height-epuq3n;
+$offsetTop: --awsui-offset-top-epuq3n;
+$overlapHeight: --awsui-overlap-height-epuq3n;
+$navigationWidth: --awsui-navigation-width-epuq3n;
+$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-epuq3n;
+$splitPanelReportedSize: --awsui-split-panel-reported-size-epuq3n;
+$splitPanelHeight: --awsui-split-panel-height-epuq3n;
+$splitPanelMinWidth: --awsui-split-panel-min-width-epuq3n;
+$splitPanelMaxWidth: --awsui-split-panel-max-width-epuq3n;
+$toolsMaxWidth: --awsui-tools-max-width-epuq3n;
+$toolsWidth: --awsui-tools-width-epuq3n;
+$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-epuq3n;
+$contentScrollMargin: --awsui-content-scroll-margin-epuq3n;
+$flashbarStackDepth: --awsui-flashbar-stack-depth-epuq3n;
+$flashbarStackIndex: --awsui-flashbar-stack-index-epuq3n;
+$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-epuq3n;
+$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-epuq3n;
+$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-epuq3n;
+$dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-epuq3n;
+$spinnerRotatorFrom: --awsui-spinner-rotator-from-epuq3n;
+$spinnerRotatorTo: --awsui-spinner-rotator-to-epuq3n;
+$spinnerLineLeftFrom: --awsui-spinner-line-left-from-epuq3n;
+$spinnerLineLeftTo: --awsui-spinner-line-left-to-epuq3n;
+$spinnerLineRightFrom: --awsui-spinner-line-right-from-epuq3n;
+$spinnerLineRightTo: --awsui-spinner-line-right-to-epuq3n;
+$sliderLabelCount: --awsui-slider-label-count-epuq3n;
+$sliderTickCount: --awsui-slider-tick-count-epuq3n;
+$sliderReferenceColumn: --awsui-slider-reference-column-epuq3n;
+$sliderNextReferenceColumn: --awsui-slider-next-reference-column-epuq3n;
+$sliderMaxStart: --awsui-slider-max-start-epuq3n;
+$sliderMinEnd: --awsui-slider-min-end-epuq3n;
+$sliderRangeInlineSize: --awsui-slider-range-inline-size-epuq3n;
+$sliderTooltipPosition: --awsui-slider-tooltip-position-epuq3n;
     

package/lib/internal/scss/split-panel/styles.scss

@@ -260,6 +260,7 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
     padding-inline-start: awsui.$space-panel-side-left;
     padding-inline-end: awsui.$space-panel-side-right;
     margin-block-start: awsui.$space-panel-split-top;
+    margin-block-end: awsui.$space-panel-split-bottom;
   }
 }
 

package/lib/internal/template/annotation-context/annotation/styles.css.js

@@ -1,29 +1,29 @@
 
     import './styles.scoped.css';
     export default {
-  "arrow": "awsui_arrow_1hpp3_1i3yr_99",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_1i3yr_103",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_1i3yr_103",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1i3yr_144",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1i3yr_144",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1i3yr_147",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1i3yr_147",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1i3yr_150",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1i3yr_150",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1i3yr_153",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1i3yr_153",
-  "annotation": "awsui_annotation_1hpp3_1i3yr_161",
-  "next-button": "awsui_next-button_1hpp3_1i3yr_162",
-  "previous-button": "awsui_previous-button_1hpp3_1i3yr_163",
-  "finish-button": "awsui_finish-button_1hpp3_1i3yr_164",
-  "header": "awsui_header_1hpp3_1i3yr_165",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_1i3yr_166",
-  "content": "awsui_content_1hpp3_1i3yr_167",
-  "description": "awsui_description_1hpp3_1i3yr_171",
-  "actionBar": "awsui_actionBar_1hpp3_1i3yr_176",
-  "stepCounter": "awsui_stepCounter_1hpp3_1i3yr_183",
-  "divider": "awsui_divider_1hpp3_1i3yr_187",
-  "hotspot": "awsui_hotspot_1hpp3_1i3yr_191",
-  "icon": "awsui_icon_1hpp3_1i3yr_258"
+  "arrow": "awsui_arrow_1hpp3_10j5l_99",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_10j5l_103",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_10j5l_103",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_10j5l_144",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_10j5l_144",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_10j5l_147",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_10j5l_147",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_10j5l_150",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_10j5l_150",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_10j5l_153",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_10j5l_153",
+  "annotation": "awsui_annotation_1hpp3_10j5l_161",
+  "next-button": "awsui_next-button_1hpp3_10j5l_162",
+  "previous-button": "awsui_previous-button_1hpp3_10j5l_163",
+  "finish-button": "awsui_finish-button_1hpp3_10j5l_164",
+  "header": "awsui_header_1hpp3_10j5l_165",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_10j5l_166",
+  "content": "awsui_content_1hpp3_10j5l_167",
+  "description": "awsui_description_1hpp3_10j5l_171",
+  "actionBar": "awsui_actionBar_1hpp3_10j5l_176",
+  "stepCounter": "awsui_stepCounter_1hpp3_10j5l_183",
+  "divider": "awsui_divider_1hpp3_10j5l_187",
+  "hotspot": "awsui_hotspot_1hpp3_10j5l_191",
+  "icon": "awsui_icon_1hpp3_10j5l_258"
 };
   

package/lib/internal/template/annotation-context/annotation/styles.scoped.css

@@ -96,11 +96,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_arrow_1hpp3_1i3yr_99:not(#\9) {
+.awsui_arrow_1hpp3_10j5l_99:not(#\9) {
   inline-size: 20px;
   block-size: 10px;
 }
-.awsui_arrow-outer_1hpp3_1i3yr_103:not(#\9), .awsui_arrow-inner_1hpp3_1i3yr_103:not(#\9) {
+.awsui_arrow-outer_1hpp3_10j5l_103:not(#\9), .awsui_arrow-inner_1hpp3_10j5l_103:not(#\9) {
   position: absolute;
   overflow: hidden;
   inline-size: 20px;
@@ -108,7 +108,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-block-start: 0;
   inset-inline-start: 0;
 }
-.awsui_arrow-outer_1hpp3_1i3yr_103:not(#\9)::after, .awsui_arrow-inner_1hpp3_1i3yr_103:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_10j5l_103:not(#\9)::after, .awsui_arrow-inner_1hpp3_10j5l_103:not(#\9)::after {
   content: "";
   box-sizing: border-box;
   display: inline-block;
@@ -124,33 +124,33 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transform: rotate(45deg);
   transform-origin: 0 100%;
 }
-.awsui_arrow-outer_1hpp3_1i3yr_103:not(#\9):dir(rtl)::after, .awsui_arrow-inner_1hpp3_1i3yr_103:not(#\9):dir(rtl)::after {
+.awsui_arrow-outer_1hpp3_10j5l_103:not(#\9):dir(rtl)::after, .awsui_arrow-inner_1hpp3_10j5l_103:not(#\9):dir(rtl)::after {
   transform: rotate(-45deg);
   transform-origin: 100% 100%;
 }
-.awsui_arrow-outer_1hpp3_1i3yr_103:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_10j5l_103:not(#\9)::after {
   background-color: var(--color-border-status-info-q9np44, #0073bb);
 }
-.awsui_arrow-inner_1hpp3_1i3yr_103:not(#\9) {
+.awsui_arrow-inner_1hpp3_10j5l_103:not(#\9) {
   inset-block-start: 2px;
 }
-.awsui_arrow-inner_1hpp3_1i3yr_103:not(#\9)::after {
+.awsui_arrow-inner_1hpp3_10j5l_103:not(#\9)::after {
   border-start-start-radius: 1px;
   border-start-end-radius: 0;
   border-end-start-radius: 0;
   border-end-end-radius: 0;
   background-color: var(--color-background-status-info-pgxhez, #f1faff);
 }
-.awsui_arrow-position-right-top_1hpp3_1i3yr_144 > .awsui_arrow-outer_1hpp3_1i3yr_103:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_1i3yr_144 > .awsui_arrow-outer_1hpp3_1i3yr_103:not(#\9)::after {
+.awsui_arrow-position-right-top_1hpp3_10j5l_144 > .awsui_arrow-outer_1hpp3_10j5l_103:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_10j5l_144 > .awsui_arrow-outer_1hpp3_10j5l_103:not(#\9)::after {
   box-shadow: -0.71px 0.71px 4px -2px var(--color-shadow-default-9hs6xx, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-left-top_1hpp3_1i3yr_147 > .awsui_arrow-outer_1hpp3_1i3yr_103:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_1i3yr_147 > .awsui_arrow-outer_1hpp3_1i3yr_103:not(#\9)::after {
+.awsui_arrow-position-left-top_1hpp3_10j5l_147 > .awsui_arrow-outer_1hpp3_10j5l_103:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_10j5l_147 > .awsui_arrow-outer_1hpp3_10j5l_103:not(#\9)::after {
   box-shadow: 0.71px -0.71px 4px -2px var(--color-shadow-default-9hs6xx, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-top-center_1hpp3_1i3yr_150 > .awsui_arrow-outer_1hpp3_1i3yr_103:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_1i3yr_150 > .awsui_arrow-outer_1hpp3_1i3yr_103:not(#\9)::after {
+.awsui_arrow-position-top-center_1hpp3_10j5l_150 > .awsui_arrow-outer_1hpp3_10j5l_103:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_10j5l_150 > .awsui_arrow-outer_1hpp3_10j5l_103:not(#\9)::after {
   box-shadow: -0.71px -0.71px 4px -2px var(--color-shadow-default-9hs6xx, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-bottom-center_1hpp3_1i3yr_153 > .awsui_arrow-outer_1hpp3_1i3yr_103:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_1i3yr_153 > .awsui_arrow-outer_1hpp3_1i3yr_103:not(#\9)::after {
+.awsui_arrow-position-bottom-center_1hpp3_10j5l_153 > .awsui_arrow-outer_1hpp3_10j5l_103:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_10j5l_153 > .awsui_arrow-outer_1hpp3_10j5l_103:not(#\9)::after {
   box-shadow: 0.71px 0.71px 4px -2px var(--color-shadow-default-9hs6xx, rgba(0, 28, 36, 0.5));
 }
 
@@ -158,37 +158,37 @@ 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_annotation_1hpp3_1i3yr_161:not(#\9),
-.awsui_next-button_1hpp3_1i3yr_162:not(#\9),
-.awsui_previous-button_1hpp3_1i3yr_163:not(#\9),
-.awsui_finish-button_1hpp3_1i3yr_164:not(#\9),
-.awsui_header_1hpp3_1i3yr_165:not(#\9),
-.awsui_step-counter-content_1hpp3_1i3yr_166:not(#\9),
-.awsui_content_1hpp3_1i3yr_167:not(#\9) {
+.awsui_annotation_1hpp3_10j5l_161:not(#\9),
+.awsui_next-button_1hpp3_10j5l_162:not(#\9),
+.awsui_previous-button_1hpp3_10j5l_163:not(#\9),
+.awsui_finish-button_1hpp3_10j5l_164:not(#\9),
+.awsui_header_1hpp3_10j5l_165:not(#\9),
+.awsui_step-counter-content_1hpp3_10j5l_166:not(#\9),
+.awsui_content_1hpp3_10j5l_167:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_description_1hpp3_1i3yr_171:not(#\9) {
+.awsui_description_1hpp3_10j5l_171:not(#\9) {
   overflow: hidden;
   margin-block-start: var(--space-xxs-9rrxti, 4px);
 }
 
-.awsui_actionBar_1hpp3_1i3yr_176:not(#\9) {
+.awsui_actionBar_1hpp3_10j5l_176:not(#\9) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
 }
 
-.awsui_stepCounter_1hpp3_1i3yr_183:not(#\9) {
+.awsui_stepCounter_1hpp3_10j5l_183:not(#\9) {
   margin-inline-end: 20px;
 }
 
-.awsui_divider_1hpp3_1i3yr_187:not(#\9) {
+.awsui_divider_1hpp3_10j5l_187:not(#\9) {
   border-block-end: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-divider-default-in8dkg, #eaeded);
 }
 
-.awsui_hotspot_1hpp3_1i3yr_191:not(#\9) {
+.awsui_hotspot_1hpp3_10j5l_191:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -228,21 +228,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-block: 0;
   padding-inline: 0;
   cursor: pointer;
-  scroll-margin: var(--awsui-content-scroll-margin-tkr9yl, 40px 0 0 0);
+  scroll-margin: var(--awsui-content-scroll-margin-epuq3n, 40px 0 0 0);
   inline-size: 16px;
   block-size: 16px;
 }
-.awsui_hotspot_1hpp3_1i3yr_191:not(#\9):focus {
+.awsui_hotspot_1hpp3_10j5l_191:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1i3yr_191:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_10j5l_191:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1i3yr_191:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_10j5l_191:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1i3yr_191:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_10j5l_191:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -256,13 +256,13 @@ body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1i3yr_191:not(#\9):focu
   border-end-end-radius: var(--border-radius-control-circular-focus-ring-mxepal, 50%);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-.awsui_hotspot_1hpp3_1i3yr_191 > .awsui_icon_1hpp3_1i3yr_258:not(#\9) {
+.awsui_hotspot_1hpp3_10j5l_191 > .awsui_icon_1hpp3_10j5l_258:not(#\9) {
   position: relative;
   stroke: var(--color-text-link-default-hop3gv, #0073bb);
 }
-.awsui_hotspot_1hpp3_1i3yr_191:not(#\9):hover > .awsui_icon_1hpp3_1i3yr_258 {
+.awsui_hotspot_1hpp3_10j5l_191:not(#\9):hover > .awsui_icon_1hpp3_10j5l_258 {
   stroke: var(--color-text-link-hover-8s5z9d, #0a4a74);
 }
-.awsui_hotspot_1hpp3_1i3yr_191:not(#\9):active > .awsui_icon_1hpp3_1i3yr_258 {
+.awsui_hotspot_1hpp3_10j5l_191:not(#\9):active > .awsui_icon_1hpp3_10j5l_258 {
   stroke: var(--color-text-link-default-hop3gv, #0073bb);
 }

package/lib/internal/template/annotation-context/annotation/styles.selectors.js

@@ -2,29 +2,29 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "arrow": "awsui_arrow_1hpp3_1i3yr_99",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_1i3yr_103",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_1i3yr_103",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1i3yr_144",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1i3yr_144",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1i3yr_147",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1i3yr_147",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1i3yr_150",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1i3yr_150",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1i3yr_153",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1i3yr_153",
-  "annotation": "awsui_annotation_1hpp3_1i3yr_161",
-  "next-button": "awsui_next-button_1hpp3_1i3yr_162",
-  "previous-button": "awsui_previous-button_1hpp3_1i3yr_163",
-  "finish-button": "awsui_finish-button_1hpp3_1i3yr_164",
-  "header": "awsui_header_1hpp3_1i3yr_165",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_1i3yr_166",
-  "content": "awsui_content_1hpp3_1i3yr_167",
-  "description": "awsui_description_1hpp3_1i3yr_171",
-  "actionBar": "awsui_actionBar_1hpp3_1i3yr_176",
-  "stepCounter": "awsui_stepCounter_1hpp3_1i3yr_183",
-  "divider": "awsui_divider_1hpp3_1i3yr_187",
-  "hotspot": "awsui_hotspot_1hpp3_1i3yr_191",
-  "icon": "awsui_icon_1hpp3_1i3yr_258"
+  "arrow": "awsui_arrow_1hpp3_10j5l_99",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_10j5l_103",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_10j5l_103",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_10j5l_144",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_10j5l_144",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_10j5l_147",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_10j5l_147",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_10j5l_150",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_10j5l_150",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_10j5l_153",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_10j5l_153",
+  "annotation": "awsui_annotation_1hpp3_10j5l_161",
+  "next-button": "awsui_next-button_1hpp3_10j5l_162",
+  "previous-button": "awsui_previous-button_1hpp3_10j5l_163",
+  "finish-button": "awsui_finish-button_1hpp3_10j5l_164",
+  "header": "awsui_header_1hpp3_10j5l_165",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_10j5l_166",
+  "content": "awsui_content_1hpp3_10j5l_167",
+  "description": "awsui_description_1hpp3_10j5l_171",
+  "actionBar": "awsui_actionBar_1hpp3_10j5l_176",
+  "stepCounter": "awsui_stepCounter_1hpp3_10j5l_183",
+  "divider": "awsui_divider_1hpp3_10j5l_187",
+  "hotspot": "awsui_hotspot_1hpp3_10j5l_191",
+  "icon": "awsui_icon_1hpp3_10j5l_258"
 };
   

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

@@ -1,8 +1,8 @@
 
     import './styles.scoped.css';
     export default {
-  "notifications": "awsui_notifications_1hmm4_1jlfr_9",
-  "notifications-sticky": "awsui_notifications-sticky_1hmm4_1jlfr_10",
-  "no-content-paddings": "awsui_no-content-paddings_1hmm4_1jlfr_25"
+  "notifications": "awsui_notifications_1hmm4_x4f5k_9",
+  "notifications-sticky": "awsui_notifications-sticky_1hmm4_x4f5k_10",
+  "no-content-paddings": "awsui_no-content-paddings_1hmm4_x4f5k_25"
 };
   

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

@@ -6,26 +6,26 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_notifications_1hmm4_1jlfr_9:not(#\9),
-.awsui_notifications-sticky_1hmm4_1jlfr_10:not(#\9) {
+.awsui_notifications_1hmm4_x4f5k_9:not(#\9),
+.awsui_notifications-sticky_1hmm4_x4f5k_10:not(#\9) {
   z-index: 850;
 }
 
-.awsui_notifications_1hmm4_1jlfr_9:not(#\9) {
+.awsui_notifications_1hmm4_x4f5k_9:not(#\9) {
   /* This is necessary for the z-index to have effect */
   position: relative;
 }
 
-.awsui_notifications-sticky_1hmm4_1jlfr_10:not(#\9) {
+.awsui_notifications-sticky_1hmm4_x4f5k_10:not(#\9) {
   inset-block-start: 0;
   position: sticky;
-  --awsui-flashbar-sticky-bottom-margin-tkr9yl: var(--space-xxl-pd3205, 32px);
+  --awsui-flashbar-sticky-bottom-margin-epuq3n: var(--space-xxl-pd3205, 32px);
 }
 
-.awsui_no-content-paddings_1hmm4_1jlfr_25:not(#\9) {
+.awsui_no-content-paddings_1hmm4_x4f5k_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-tkr9yl: var(--space-scaled-l-08jb88, 20px);
+  --awsui-stacked-notifications-bottom-margin-epuq3n: var(--space-scaled-l-08jb88, 20px);
 }

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

@@ -2,8 +2,8 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "notifications": "awsui_notifications_1hmm4_1jlfr_9",
-  "notifications-sticky": "awsui_notifications-sticky_1hmm4_1jlfr_10",
-  "no-content-paddings": "awsui_no-content-paddings_1hmm4_1jlfr_25"
+  "notifications": "awsui_notifications_1hmm4_x4f5k_9",
+  "notifications-sticky": "awsui_notifications-sticky_1hmm4_x4f5k_10",
+  "no-content-paddings": "awsui_no-content-paddings_1hmm4_x4f5k_25"
 };
   

package/lib/internal/template/app-layout/skeleton/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { AppLayoutPropsWithDefaults } from '../interfaces';
+export declare function AppLayoutSkeleton({ notifications, contentHeader, content, navigation, navigationHide, navigationOpen, navigationWidth, tools, toolsHide, toolsOpen, toolsWidth, placement, contentType, maxContentWidth, minContentWidth, disableContentPaddings, }: AppLayoutPropsWithDefaults): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/skeleton/index.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAG3D,wBAAgB,iBAAiB,CAAC,EAChC,aAAa,EACb,aAAa,EACb,OAAO,EAEP,UAAU,EACV,cAAc,EACd,cAAc,EACd,eAAe,EACf,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAU,EAEV,SAAS,EACT,WAAW,EACX,eAAe,EACf,eAAe,EACf,sBAAsB,GACvB,EAAE,0BAA0B,eAoB5B"}

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

@@ -0,0 +1,10 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { SkeletonLayout } from './layout';
+export function AppLayoutSkeleton({ notifications, contentHeader, content, navigation, navigationHide, navigationOpen, navigationWidth, tools, toolsHide, toolsOpen, toolsWidth, placement, contentType, maxContentWidth, minContentWidth, disableContentPaddings, }) {
+    // render nothing in the skeleton state
+    const placeholder = React.createElement(React.Fragment, null);
+    return (React.createElement(SkeletonLayout, { topBar: placeholder, notifications: notifications, contentHeader: contentHeader, content: content, navigation: !navigationHide && navigationOpen && navigation && placeholder, navigationWidth: navigationWidth, tools: !toolsHide && toolsOpen && tools && placeholder, toolsWidth: toolsWidth, placement: placement, contentType: contentType, maxContentWidth: maxContentWidth, minContentWidth: minContentWidth, disableContentPaddings: disableContentPaddings }));
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/skeleton/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,MAAM,UAAU,iBAAiB,CAAC,EAChC,aAAa,EACb,aAAa,EACb,OAAO,EAEP,UAAU,EACV,cAAc,EACd,cAAc,EACd,eAAe,EACf,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAU,EAEV,SAAS,EACT,WAAW,EACX,eAAe,EACf,eAAe,EACf,sBAAsB,GACK;IAC3B,uCAAuC;IACvC,MAAM,WAAW,GAAG,yCAAK,CAAC;IAC1B,OAAO,CACL,oBAAC,cAAc,IACb,MAAM,EAAE,WAAW,EACnB,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,CAAC,cAAc,IAAI,cAAc,IAAI,UAAU,IAAI,WAAW,EAC1E,eAAe,EAAE,eAAe,EAChC,KAAK,EAAE,CAAC,SAAS,IAAI,SAAS,IAAI,KAAK,IAAI,WAAW,EACtD,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,eAAe,EAChC,eAAe,EAAE,eAAe,EAChC,sBAAsB,EAAE,sBAAsB,GAC9C,CACH,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 { AppLayoutPropsWithDefaults } from '../interfaces';\nimport { SkeletonLayout } from './layout';\n\nexport function AppLayoutSkeleton({\n  notifications,\n  contentHeader,\n  content,\n\n  navigation,\n  navigationHide,\n  navigationOpen,\n  navigationWidth,\n  tools,\n  toolsHide,\n  toolsOpen,\n  toolsWidth,\n\n  placement,\n  contentType,\n  maxContentWidth,\n  minContentWidth,\n  disableContentPaddings,\n}: AppLayoutPropsWithDefaults) {\n  // render nothing in the skeleton state\n  const placeholder = <></>;\n  return (\n    <SkeletonLayout\n      topBar={placeholder}\n      notifications={notifications}\n      contentHeader={contentHeader}\n      content={content}\n      navigation={!navigationHide && navigationOpen && navigation && placeholder}\n      navigationWidth={navigationWidth}\n      tools={!toolsHide && toolsOpen && tools && placeholder}\n      toolsWidth={toolsWidth}\n      placement={placement}\n      contentType={contentType}\n      maxContentWidth={maxContentWidth}\n      minContentWidth={minContentWidth}\n      disableContentPaddings={disableContentPaddings}\n    />\n  );\n}\n"]}

package/lib/internal/template/app-layout/skeleton/layout.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { AppLayoutPropsWithDefaults } from '../interfaces';
+interface SkeletonLayoutProps extends Pick<AppLayoutPropsWithDefaults, 'notifications' | 'contentHeader' | 'content' | 'contentType' | 'minContentWidth' | 'maxContentWidth' | 'disableContentPaddings' | 'navigation' | 'navigationWidth' | 'tools' | 'toolsWidth' | 'placement'> {
+    topBar?: React.ReactNode;
+}
+export declare function SkeletonLayout({ notifications, contentHeader, content, navigation, navigationWidth, tools, toolsWidth, topBar, placement, contentType, maxContentWidth, minContentWidth, disableContentPaddings, }: SkeletonLayoutProps): JSX.Element;
+export {};
+//# sourceMappingURL=layout.d.ts.map

package/lib/internal/template/app-layout/skeleton/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/skeleton/layout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAO3D,UAAU,mBACR,SAAQ,IAAI,CACV,0BAA0B,EACxB,eAAe,GACf,eAAe,GACf,SAAS,GACT,aAAa,GACb,iBAAiB,GACjB,iBAAiB,GACjB,wBAAwB,GACxB,YAAY,GACZ,iBAAiB,GACjB,OAAO,GACP,YAAY,GACZ,WAAW,CACd;IACD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,wBAAgB,cAAc,CAAC,EAC7B,aAAa,EACb,aAAa,EACb,OAAO,EACP,UAAU,EACV,eAAe,EACf,KAAK,EACL,UAAU,EACV,MAAM,EACN,SAAS,EACT,WAAW,EACX,eAAe,EACf,eAAe,EACf,sBAAsB,GACvB,EAAE,mBAAmB,eAkCrB"}

package/lib/internal/template/app-layout/skeleton/layout.js

@@ -0,0 +1,27 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import styles from './styles.css.js';
+import customCssProps from '../../internal/generated/custom-css-properties';
+import clsx from 'clsx';
+const contentTypeCustomWidths = ['dashboard', 'cards', 'table'];
+export function SkeletonLayout({ notifications, contentHeader, content, navigation, navigationWidth, tools, toolsWidth, topBar, placement, contentType, maxContentWidth, minContentWidth, disableContentPaddings, }) {
+    const isMaxWidth = maxContentWidth === Number.MAX_VALUE || maxContentWidth === Number.MAX_SAFE_INTEGER;
+    return (React.createElement("div", { className: clsx(styles.root, {
+            [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),
+            [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',
+        }), style: {
+            minBlockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,
+            [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',
+            [customCssProps.minContentWidth]: `${minContentWidth}px`,
+        } },
+        React.createElement("section", { className: styles['top-bar'] }, topBar),
+        navigation && (React.createElement("div", { className: styles.navigation, style: { inlineSize: navigationWidth } }, navigation)),
+        React.createElement("main", { className: styles['main-landmark'] },
+            notifications && React.createElement("div", { className: styles.notifications }, notifications),
+            React.createElement("div", { className: clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings }) },
+                contentHeader && React.createElement("div", { className: styles['content-header'] }, contentHeader),
+                React.createElement("div", null, content))),
+        tools && (React.createElement("div", { className: styles.tools, style: { inlineSize: toolsWidth } }, tools))));
+}
+//# sourceMappingURL=layout.js.map

package/lib/internal/template/app-layout/skeleton/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../../src/app-layout/skeleton/layout.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,gDAAgD,CAAC;AAC5E,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,MAAM,uBAAuB,GAA8B,CAAC,WAAW,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;AAqB3F,MAAM,UAAU,cAAc,CAAC,EAC7B,aAAa,EACb,aAAa,EACb,OAAO,EACP,UAAU,EACV,eAAe,EACf,KAAK,EACL,UAAU,EACV,MAAM,EACN,SAAS,EACT,WAAW,EACX,eAAe,EACf,eAAe,EACf,sBAAsB,GACF;IACpB,MAAM,UAAU,GAAG,eAAe,KAAK,MAAM,CAAC,SAAS,IAAI,eAAe,KAAK,MAAM,CAAC,gBAAgB,CAAC;IACvG,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YAC3B,CAAC,MAAM,CAAC,6BAA6B,CAAC,CAAC,EAAE,CAAC,uBAAuB,CAAC,QAAQ,CAAC,WAAW,CAAC;YACvF,CAAC,MAAM,CAAC,+BAA+B,CAAC,CAAC,EAAE,WAAW,KAAK,WAAW;SACvE,CAAC,EACF,KAAK,EAAE;YACL,YAAY,EAAE,gBAAgB,SAAS,CAAC,eAAe,QAAQ,SAAS,CAAC,aAAa,KAAK;YAC3F,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,eAAe,IAAI,CAAC,CAAC,CAAC,EAAE;YACrG,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,GAAG,eAAe,IAAI;SACzD;QAED,iCAAS,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,IAAG,MAAM,CAAW;QACxD,UAAU,IAAI,CACb,6BAAK,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,eAAe,EAAE,IACtE,UAAU,CACP,CACP;QACD,8BAAM,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC;YACrC,aAAa,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,aAAa,IAAG,aAAa,CAAO;YAC7E,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,sBAAsB,EAAE,CAAC;gBAC7F,aAAa,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAAG,aAAa,CAAO;gBACjF,iCAAM,OAAO,CAAO,CAChB,CACD;QACN,KAAK,IAAI,CACR,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,IAC5D,KAAK,CACF,CACP,CACG,CACP,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 { AppLayoutPropsWithDefaults } from '../interfaces';\nimport styles from './styles.css.js';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport clsx from 'clsx';\n\nconst contentTypeCustomWidths: Array<string | undefined> = ['dashboard', 'cards', 'table'];\n\ninterface SkeletonLayoutProps\n  extends Pick<\n    AppLayoutPropsWithDefaults,\n    | 'notifications'\n    | 'contentHeader'\n    | 'content'\n    | 'contentType'\n    | 'minContentWidth'\n    | 'maxContentWidth'\n    | 'disableContentPaddings'\n    | 'navigation'\n    | 'navigationWidth'\n    | 'tools'\n    | 'toolsWidth'\n    | 'placement'\n  > {\n  topBar?: React.ReactNode;\n}\n\nexport function SkeletonLayout({\n  notifications,\n  contentHeader,\n  content,\n  navigation,\n  navigationWidth,\n  tools,\n  toolsWidth,\n  topBar,\n  placement,\n  contentType,\n  maxContentWidth,\n  minContentWidth,\n  disableContentPaddings,\n}: SkeletonLayoutProps) {\n  const isMaxWidth = maxContentWidth === Number.MAX_VALUE || maxContentWidth === Number.MAX_SAFE_INTEGER;\n  return (\n    <div\n      className={clsx(styles.root, {\n        [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),\n        [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',\n      })}\n      style={{\n        minBlockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,\n        [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',\n        [customCssProps.minContentWidth]: `${minContentWidth}px`,\n      }}\n    >\n      <section className={styles['top-bar']}>{topBar}</section>\n      {navigation && (\n        <div className={styles.navigation} style={{ inlineSize: navigationWidth }}>\n          {navigation}\n        </div>\n      )}\n      <main className={styles['main-landmark']}>\n        {notifications && <div className={styles.notifications}>{notifications}</div>}\n        <div className={clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings })}>\n          {contentHeader && <div className={styles['content-header']}>{contentHeader}</div>}\n          <div>{content}</div>\n        </div>\n      </main>\n      {tools && (\n        <div className={styles.tools} style={{ inlineSize: toolsWidth }}>\n          {tools}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}