@cloudscape-design/components-themeable 3.0.214 → 3.0.215

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "f67771fcaa78942fefea35c24a4f2f24ae263cbd"
+  "commit": "40f40f570f7befecb6fc77087a9b6341d9773055"
 }

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

@@ -21,11 +21,3 @@
   position: sticky;
   #{custom-props.$flashbarStickyBottomMargin}: #{awsui.$space-xxl};
 }
-
-.no-content-paddings {
-  /*
-  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.
-   */
-  #{custom-props.$stackedNotificationsBottomMargin}: #{awsui.$space-scaled-l};
-}

package/lib/internal/scss/flashbar/collapsible.scss

@@ -2,7 +2,6 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-@use 'sass:map';
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use '../internal/hooks/focus-visible' as focus-visible;
 @use '../internal/styles/tokens' as awsui;
@@ -10,23 +9,10 @@
 @use '../internal/styles/typography' as typography;
 @use './collapsible.motion';
 
-$notification-bar-top-overlap: (
-  'collapsed': calc(#{awsui.$space-scaled-xl} + 3px),
-  'expanded': awsui.$space-scaled-s,
-);
-$notification-bar-line-height: awsui.$font-body-m-line-height;
-$notification-bar-padding-vertical: styles.$control-padding-vertical;
-$notification-bar-collapsed-item-overflow: (
-  'x': 10px,
-  'y': 8px,
-);
-$notification-bar-border-width: (
-  'classic': 1px,
-  'visual-refresh': 2px,
-);
+$collapsed-item-overflow: 10px;
 
 .stack {
-  $notification-bar-horizontal-margin: 3 * map.get($notification-bar-collapsed-item-overflow, 'x');
+  $notification-bar-horizontal-margin: 3 * $collapsed-item-overflow;
   display: grid;
   grid-template-columns: $notification-bar-horizontal-margin 1fr $notification-bar-horizontal-margin;
 }
@@ -55,10 +41,10 @@ the grid layout will be:
   display: grid;
   grid-column: 1 / 4;
   grid-template-columns:
-    repeat(var(#{custom-props.$flashbarStackDepth}), map.get($notification-bar-collapsed-item-overflow, 'x'))
+    repeat(var(#{custom-props.$flashbarStackDepth}), $collapsed-item-overflow)
     1fr
-    repeat(var(#{custom-props.$flashbarStackDepth}), map.get($notification-bar-collapsed-item-overflow, 'x'));
-  row-gap: map.get($notification-bar-collapsed-item-overflow, 'y');
+    repeat(var(#{custom-props.$flashbarStackDepth}), $collapsed-item-overflow);
+  row-gap: 8px;
   z-index: 0;
 
   > .item {
@@ -101,88 +87,27 @@ the grid layout will be:
   @include stacked-flash-z-index;
 }
 
-@mixin vertical-spacing($top-overlap, $border-width, $buffer-bottom: 0px, $offset-bottom: 0px) {
-  $notification-bar-full-height: calc(
-    #{$notification-bar-line-height} + 2 * (#{$notification-bar-padding-vertical} + #{$border-width})
-  );
-
-  /*
- The default bottom margin ($default-margin-bottom) is just enough to prevent the notification bar from overlapping the
- elements below. But if using disableContentPaddings, $stackedNotificationsBottomMargin will be set at the App Layout
- level so that this distance is increased to prevent the main area from touching the notifications area.
- */
-  $default-margin-bottom: calc(#{$notification-bar-full-height} - #{$top-overlap});
-  margin-bottom: calc(
-    var(#{custom-props.$stackedNotificationsBottomMargin}, #{$default-margin-bottom}) + #{$buffer-bottom} + #{$offset-bottom}
-  );
-
-  > .notification-bar {
-    margin-top: calc(-1 * #{$top-overlap} + #{$offset-bottom});
-    margin-bottom: calc(#{$top-overlap} - #{$notification-bar-full-height} - #{$offset-bottom});
-    padding-top: $notification-bar-padding-vertical;
-    padding-bottom: $notification-bar-padding-vertical;
-  }
-}
+@mixin toggle-button-layout($top-overlap-collapsed, $border-width) {
+  $margin-top-when-collapsed: -$top-overlap-collapsed;
+  $line-height: awsui.$font-body-m-line-height;
+  $padding-vertical: styles.$control-padding-vertical;
+  $margin-top-when-expanded: -12px;
 
-.stack.collapsible {
-  &:not(.expanded) {
-    &:not(.short-list) {
-      &:not(.visual-refresh) {
-        @include vertical-spacing(
-          map.get($notification-bar-top-overlap, 'collapsed'),
-          map.get($notification-bar-border-width, 'classic')
-        );
-      }
-      &.visual-refresh {
-        @include vertical-spacing(
-          map.get($notification-bar-top-overlap, 'collapsed'),
-          map.get($notification-bar-border-width, 'visual-refresh')
-        );
-      }
-    }
+  padding-top: $padding-vertical;
+  padding-bottom: $padding-vertical;
 
-    /*
-    Since the notification bar is anchored to the bottom of the Flashbar, we need to push it up to account for the
-    missing third item when there are only 2 items in the stack.
-     */
-    &.short-list {
-      &:not(.visual-refresh) {
-        @include vertical-spacing(
-          map.get($notification-bar-top-overlap, 'collapsed'),
-          map.get($notification-bar-border-width, 'classic'),
-          0px,
-          map.get($notification-bar-collapsed-item-overflow, 'y')
-        );
-      }
-      &.visual-refresh {
-        @include vertical-spacing(
-          map.get($notification-bar-top-overlap, 'collapsed'),
-          map.get($notification-bar-border-width, 'visual-refresh'),
-          0px,
-          map.get($notification-bar-collapsed-item-overflow, 'y')
-        );
-      }
-    }
+  &:not(.expanded) {
+    margin-top: #{$margin-top-when-collapsed};
+    margin-bottom: calc(
+      #{-$margin-top-when-collapsed} - (#{$line-height} + 2 * (#{$padding-vertical} + #{$border-width}))
+    );
   }
 
   &.expanded {
-    &:not(.visual-refresh) {
-      /*
-      Give a bit more bottom margin when expanded, but only in Classic because in Visual Refresh the margin around the
-      notifications slot already gives it enough space.
-       */
-      @include vertical-spacing(
-        map.get($notification-bar-top-overlap, 'expanded'),
-        map.get($notification-bar-border-width, 'classic'),
-        awsui.$space-scaled-m
-      );
-    }
-    &.visual-refresh {
-      @include vertical-spacing(
-        map.get($notification-bar-top-overlap, 'expanded'),
-        map.get($notification-bar-border-width, 'visual-refresh')
-      );
-    }
+    margin-top: #{$margin-top-when-expanded};
+    margin-bottom: calc(
+      #{-$margin-top-when-expanded} - (#{$line-height} + 2 * (#{$padding-vertical} + #{$border-width}))
+    );
   }
 }
 
@@ -260,14 +185,20 @@ the grid layout will be:
   }
 
   &.visual-refresh {
-    $border-width: map.get($notification-bar-border-width, 'visual-refresh');
+    $border-width: 2px;
+    // Amount of pixels that the element is pushed up to overlap the Flashbar (when collapsed)
+    $top-overlap-collapsed: 27px;
+    @include toggle-button-layout($top-overlap-collapsed, $border-width);
     border-width: $border-width;
     padding-left: awsui.$space-l;
     padding-right: awsui.$space-l;
   }
 
   &:not(.visual-refresh) {
-    $border-width: map.get($notification-bar-border-width, 'classic');
+    $border-width: 1px;
+    // Amount of pixels that the element is pushed up to overlap the Flashbar (when collapsed)
+    $top-overlap-collapsed: 24px;
+    @include toggle-button-layout($top-overlap-collapsed, $border-width);
     border-width: $border-width;
     padding-left: awsui.$space-s;
     padding-right: awsui.$space-s;
@@ -286,8 +217,6 @@ the grid layout will be:
     flex-grow: 1;
     background: none;
     border: 0 none;
-    padding-top: 0;
-    padding-bottom: 0;
 
     > .icon {
       @include styles.with-motion {

package/lib/internal/scss/form/styles.scss

@@ -10,7 +10,7 @@
   @include styles.styles-reset;
 }
 
-.header {
+.header:not(.full-page) {
   margin-bottom: awsui.$space-scaled-m;
 }
 

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

@@ -1,31 +1,30 @@
 
-    $offsetTop: --awsui-offset-top-k2tw0m;
-$offsetTopWithNotifications: --awsui-offset-top-with-notifications-k2tw0m;
-$contentGapLeft: --awsui-content-gap-left-k2tw0m;
-$contentGapRight: --awsui-content-gap-right-k2tw0m;
-$contentHeight: --awsui-content-height-k2tw0m;
-$defaultMaxContentWidth: --awsui-default-max-content-width-k2tw0m;
-$defaultMinContentWidth: --awsui-default-min-content-width-k2tw0m;
-$footerHeight: --awsui-footer-height-k2tw0m;
-$headerHeight: --awsui-header-height-k2tw0m;
-$layoutWidth: --awsui-layout-width-k2tw0m;
-$mainOffsetLeft: --awsui-main-offset-left-k2tw0m;
-$maxContentWidth: --awsui-max-content-width-k2tw0m;
-$minContentWidth: --awsui-min-content-width-k2tw0m;
-$notificationsHeight: --awsui-notifications-height-k2tw0m;
-$overlapHeight: --awsui-overlap-height-k2tw0m;
-$navigationWidth: --awsui-navigation-width-k2tw0m;
-$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-k2tw0m;
-$splitPanelReportedSize: --awsui-split-panel-reported-size-k2tw0m;
-$splitPanelHeight: --awsui-split-panel-height-k2tw0m;
-$splitPanelMinWidth: --awsui-split-panel-min-width-k2tw0m;
-$splitPanelMaxWidth: --awsui-split-panel-max-width-k2tw0m;
-$toolsMaxWidth: --awsui-tools-max-width-k2tw0m;
-$toolsWidth: --awsui-tools-width-k2tw0m;
-$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-k2tw0m;
-$contentScrollMargin: --awsui-content-scroll-margin-k2tw0m;
-$flashbarStackDepth: --awsui-flashbar-stack-depth-k2tw0m;
-$flashbarStackIndex: --awsui-flashbar-stack-index-k2tw0m;
-$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-k2tw0m;
-$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-k2tw0m;
+    $offsetTop: --awsui-offset-top-20d8jh;
+$offsetTopWithNotifications: --awsui-offset-top-with-notifications-20d8jh;
+$contentGapLeft: --awsui-content-gap-left-20d8jh;
+$contentGapRight: --awsui-content-gap-right-20d8jh;
+$contentHeight: --awsui-content-height-20d8jh;
+$defaultMaxContentWidth: --awsui-default-max-content-width-20d8jh;
+$defaultMinContentWidth: --awsui-default-min-content-width-20d8jh;
+$footerHeight: --awsui-footer-height-20d8jh;
+$headerHeight: --awsui-header-height-20d8jh;
+$layoutWidth: --awsui-layout-width-20d8jh;
+$mainOffsetLeft: --awsui-main-offset-left-20d8jh;
+$maxContentWidth: --awsui-max-content-width-20d8jh;
+$minContentWidth: --awsui-min-content-width-20d8jh;
+$notificationsHeight: --awsui-notifications-height-20d8jh;
+$overlapHeight: --awsui-overlap-height-20d8jh;
+$navigationWidth: --awsui-navigation-width-20d8jh;
+$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-20d8jh;
+$splitPanelReportedSize: --awsui-split-panel-reported-size-20d8jh;
+$splitPanelHeight: --awsui-split-panel-height-20d8jh;
+$splitPanelMinWidth: --awsui-split-panel-min-width-20d8jh;
+$splitPanelMaxWidth: --awsui-split-panel-max-width-20d8jh;
+$toolsMaxWidth: --awsui-tools-max-width-20d8jh;
+$toolsWidth: --awsui-tools-width-20d8jh;
+$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-20d8jh;
+$contentScrollMargin: --awsui-content-scroll-margin-20d8jh;
+$flashbarStackDepth: --awsui-flashbar-stack-depth-20d8jh;
+$flashbarStackIndex: --awsui-flashbar-stack-index-20d8jh;
+$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-20d8jh;
     

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

@@ -1,29 +1,29 @@
 
     import './styles.scoped.css';
     export default {
-  "arrow": "awsui_arrow_1hpp3_16fbp_93",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_16fbp_97",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_16fbp_97",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_16fbp_128",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_16fbp_128",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_16fbp_131",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_16fbp_131",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_16fbp_134",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_16fbp_134",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_16fbp_137",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_16fbp_137",
-  "annotation": "awsui_annotation_1hpp3_16fbp_145",
-  "next-button": "awsui_next-button_1hpp3_16fbp_146",
-  "previous-button": "awsui_previous-button_1hpp3_16fbp_147",
-  "finish-button": "awsui_finish-button_1hpp3_16fbp_148",
-  "header": "awsui_header_1hpp3_16fbp_149",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_16fbp_150",
-  "content": "awsui_content_1hpp3_16fbp_151",
-  "description": "awsui_description_1hpp3_16fbp_155",
-  "actionBar": "awsui_actionBar_1hpp3_16fbp_160",
-  "stepCounter": "awsui_stepCounter_1hpp3_16fbp_167",
-  "divider": "awsui_divider_1hpp3_16fbp_171",
-  "hotspot": "awsui_hotspot_1hpp3_16fbp_175",
-  "icon": "awsui_icon_1hpp3_16fbp_215"
+  "arrow": "awsui_arrow_1hpp3_1pskf_93",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_1pskf_97",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_1pskf_97",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1pskf_128",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1pskf_128",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1pskf_131",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1pskf_131",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1pskf_134",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1pskf_134",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1pskf_137",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1pskf_137",
+  "annotation": "awsui_annotation_1hpp3_1pskf_145",
+  "next-button": "awsui_next-button_1hpp3_1pskf_146",
+  "previous-button": "awsui_previous-button_1hpp3_1pskf_147",
+  "finish-button": "awsui_finish-button_1hpp3_1pskf_148",
+  "header": "awsui_header_1hpp3_1pskf_149",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_1pskf_150",
+  "content": "awsui_content_1hpp3_1pskf_151",
+  "description": "awsui_description_1hpp3_1pskf_155",
+  "actionBar": "awsui_actionBar_1hpp3_1pskf_160",
+  "stepCounter": "awsui_stepCounter_1hpp3_1pskf_167",
+  "divider": "awsui_divider_1hpp3_1pskf_171",
+  "hotspot": "awsui_hotspot_1hpp3_1pskf_175",
+  "icon": "awsui_icon_1hpp3_1pskf_215"
 };
   

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

@@ -90,11 +90,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_16fbp_93:not(#\9) {
+.awsui_arrow_1hpp3_1pskf_93:not(#\9) {
   width: 20px;
   height: 10px;
 }
-.awsui_arrow-outer_1hpp3_16fbp_97:not(#\9), .awsui_arrow-inner_1hpp3_16fbp_97:not(#\9) {
+.awsui_arrow-outer_1hpp3_1pskf_97:not(#\9), .awsui_arrow-inner_1hpp3_1pskf_97:not(#\9) {
   position: absolute;
   overflow: hidden;
   width: 20px;
@@ -102,7 +102,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   top: 0;
   left: 0;
 }
-.awsui_arrow-outer_1hpp3_16fbp_97:not(#\9)::after, .awsui_arrow-inner_1hpp3_16fbp_97:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_1pskf_97:not(#\9)::after, .awsui_arrow-inner_1hpp3_1pskf_97:not(#\9)::after {
   content: "";
   box-sizing: border-box;
   display: inline-block;
@@ -115,26 +115,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transform: rotate(45deg);
   transform-origin: 0 100%;
 }
-.awsui_arrow-outer_1hpp3_16fbp_97:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_1pskf_97:not(#\9)::after {
   background-color: var(--color-border-status-info-0iedcr, #0073bb);
 }
-.awsui_arrow-inner_1hpp3_16fbp_97:not(#\9) {
+.awsui_arrow-inner_1hpp3_1pskf_97:not(#\9) {
   top: 2px;
 }
-.awsui_arrow-inner_1hpp3_16fbp_97:not(#\9)::after {
+.awsui_arrow-inner_1hpp3_1pskf_97:not(#\9)::after {
   border-radius: 1px 0 0 0;
   background-color: var(--color-background-status-info-yq3r41, #f1faff);
 }
-.awsui_arrow-position-right-top_1hpp3_16fbp_128 > .awsui_arrow-outer_1hpp3_16fbp_97:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_16fbp_128 > .awsui_arrow-outer_1hpp3_16fbp_97:not(#\9)::after {
+.awsui_arrow-position-right-top_1hpp3_1pskf_128 > .awsui_arrow-outer_1hpp3_1pskf_97:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_1pskf_128 > .awsui_arrow-outer_1hpp3_1pskf_97:not(#\9)::after {
   box-shadow: -0.71px 0.71px 4px -2px var(--color-shadow-default-94w2kz, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-left-top_1hpp3_16fbp_131 > .awsui_arrow-outer_1hpp3_16fbp_97:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_16fbp_131 > .awsui_arrow-outer_1hpp3_16fbp_97:not(#\9)::after {
+.awsui_arrow-position-left-top_1hpp3_1pskf_131 > .awsui_arrow-outer_1hpp3_1pskf_97:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_1pskf_131 > .awsui_arrow-outer_1hpp3_1pskf_97:not(#\9)::after {
   box-shadow: 0.71px -0.71px 4px -2px var(--color-shadow-default-94w2kz, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-top-center_1hpp3_16fbp_134 > .awsui_arrow-outer_1hpp3_16fbp_97:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_16fbp_134 > .awsui_arrow-outer_1hpp3_16fbp_97:not(#\9)::after {
+.awsui_arrow-position-top-center_1hpp3_1pskf_134 > .awsui_arrow-outer_1hpp3_1pskf_97:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_1pskf_134 > .awsui_arrow-outer_1hpp3_1pskf_97:not(#\9)::after {
   box-shadow: -0.71px -0.71px 4px -2px var(--color-shadow-default-94w2kz, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-bottom-center_1hpp3_16fbp_137 > .awsui_arrow-outer_1hpp3_16fbp_97:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_16fbp_137 > .awsui_arrow-outer_1hpp3_16fbp_97:not(#\9)::after {
+.awsui_arrow-position-bottom-center_1hpp3_1pskf_137 > .awsui_arrow-outer_1hpp3_1pskf_97:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_1pskf_137 > .awsui_arrow-outer_1hpp3_1pskf_97:not(#\9)::after {
   box-shadow: 0.71px 0.71px 4px -2px var(--color-shadow-default-94w2kz, rgba(0, 28, 36, 0.5));
 }
 
@@ -142,37 +142,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_16fbp_145:not(#\9),
-.awsui_next-button_1hpp3_16fbp_146:not(#\9),
-.awsui_previous-button_1hpp3_16fbp_147:not(#\9),
-.awsui_finish-button_1hpp3_16fbp_148:not(#\9),
-.awsui_header_1hpp3_16fbp_149:not(#\9),
-.awsui_step-counter-content_1hpp3_16fbp_150:not(#\9),
-.awsui_content_1hpp3_16fbp_151:not(#\9) {
+.awsui_annotation_1hpp3_1pskf_145:not(#\9),
+.awsui_next-button_1hpp3_1pskf_146:not(#\9),
+.awsui_previous-button_1hpp3_1pskf_147:not(#\9),
+.awsui_finish-button_1hpp3_1pskf_148:not(#\9),
+.awsui_header_1hpp3_1pskf_149:not(#\9),
+.awsui_step-counter-content_1hpp3_1pskf_150:not(#\9),
+.awsui_content_1hpp3_1pskf_151:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_description_1hpp3_16fbp_155:not(#\9) {
+.awsui_description_1hpp3_1pskf_155:not(#\9) {
   overflow: hidden;
   margin-top: var(--space-xxs-ynfts5, 4px);
 }
 
-.awsui_actionBar_1hpp3_16fbp_160:not(#\9) {
+.awsui_actionBar_1hpp3_1pskf_160:not(#\9) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
 }
 
-.awsui_stepCounter_1hpp3_16fbp_167:not(#\9) {
+.awsui_stepCounter_1hpp3_1pskf_167:not(#\9) {
   margin-right: 20px;
 }
 
-.awsui_divider_1hpp3_16fbp_171:not(#\9) {
+.awsui_divider_1hpp3_1pskf_171:not(#\9) {
   border-bottom: var(--border-divider-section-width-5a4cv1, 1px) solid var(--color-border-divider-default-k96bks, #eaeded);
 }
 
-.awsui_hotspot_1hpp3_16fbp_175:not(#\9) {
+.awsui_hotspot_1hpp3_1pskf_175:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -213,21 +213,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border: none;
   padding: 0;
   cursor: pointer;
-  scroll-margin: var(--awsui-content-scroll-margin-k2tw0m, 40px 0 0 0);
+  scroll-margin: var(--awsui-content-scroll-margin-20d8jh, 40px 0 0 0);
   width: 16px;
   height: 16px;
 }
-.awsui_hotspot_1hpp3_16fbp_175:not(#\9):focus {
+.awsui_hotspot_1hpp3_1pskf_175:not(#\9):focus {
   outline: none;
 }
-.awsui_hotspot_1hpp3_16fbp_175[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_hotspot_1hpp3_1pskf_175[data-awsui-focus-visible=true]:not(#\9):focus {
   position: relative;
 }
-.awsui_hotspot_1hpp3_16fbp_175[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_hotspot_1hpp3_1pskf_175[data-awsui-focus-visible=true]:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-.awsui_hotspot_1hpp3_16fbp_175[data-awsui-focus-visible=true]:not(#\9):focus::before {
+.awsui_hotspot_1hpp3_1pskf_175[data-awsui-focus-visible=true]:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -238,13 +238,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-radius: var(--border-radius-control-circular-focus-ring-l88ib6, 50%);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-n5kd8g, #0073bb);
 }
-.awsui_hotspot_1hpp3_16fbp_175 > .awsui_icon_1hpp3_16fbp_215:not(#\9) {
+.awsui_hotspot_1hpp3_1pskf_175 > .awsui_icon_1hpp3_1pskf_215:not(#\9) {
   position: relative;
   stroke: var(--color-text-link-default-753y4e, #0073bb);
 }
-.awsui_hotspot_1hpp3_16fbp_175:not(#\9):hover > .awsui_icon_1hpp3_16fbp_215 {
+.awsui_hotspot_1hpp3_1pskf_175:not(#\9):hover > .awsui_icon_1hpp3_1pskf_215 {
   stroke: var(--color-text-link-hover-ok01xk, #0073bb);
 }
-.awsui_hotspot_1hpp3_16fbp_175:not(#\9):active > .awsui_icon_1hpp3_16fbp_215 {
+.awsui_hotspot_1hpp3_1pskf_175:not(#\9):active > .awsui_icon_1hpp3_1pskf_215 {
   stroke: var(--color-text-link-default-753y4e, #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_16fbp_93",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_16fbp_97",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_16fbp_97",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_16fbp_128",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_16fbp_128",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_16fbp_131",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_16fbp_131",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_16fbp_134",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_16fbp_134",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_16fbp_137",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_16fbp_137",
-  "annotation": "awsui_annotation_1hpp3_16fbp_145",
-  "next-button": "awsui_next-button_1hpp3_16fbp_146",
-  "previous-button": "awsui_previous-button_1hpp3_16fbp_147",
-  "finish-button": "awsui_finish-button_1hpp3_16fbp_148",
-  "header": "awsui_header_1hpp3_16fbp_149",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_16fbp_150",
-  "content": "awsui_content_1hpp3_16fbp_151",
-  "description": "awsui_description_1hpp3_16fbp_155",
-  "actionBar": "awsui_actionBar_1hpp3_16fbp_160",
-  "stepCounter": "awsui_stepCounter_1hpp3_16fbp_167",
-  "divider": "awsui_divider_1hpp3_16fbp_171",
-  "hotspot": "awsui_hotspot_1hpp3_16fbp_175",
-  "icon": "awsui_icon_1hpp3_16fbp_215"
+  "arrow": "awsui_arrow_1hpp3_1pskf_93",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_1pskf_97",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_1pskf_97",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1pskf_128",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1pskf_128",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1pskf_131",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1pskf_131",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1pskf_134",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1pskf_134",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1pskf_137",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1pskf_137",
+  "annotation": "awsui_annotation_1hpp3_1pskf_145",
+  "next-button": "awsui_next-button_1hpp3_1pskf_146",
+  "previous-button": "awsui_previous-button_1hpp3_1pskf_147",
+  "finish-button": "awsui_finish-button_1hpp3_1pskf_148",
+  "header": "awsui_header_1hpp3_1pskf_149",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_1pskf_150",
+  "content": "awsui_content_1hpp3_1pskf_151",
+  "description": "awsui_description_1hpp3_1pskf_155",
+  "actionBar": "awsui_actionBar_1hpp3_1pskf_160",
+  "stepCounter": "awsui_stepCounter_1hpp3_1pskf_167",
+  "divider": "awsui_divider_1hpp3_1pskf_171",
+  "hotspot": "awsui_hotspot_1hpp3_1pskf_175",
+  "icon": "awsui_icon_1hpp3_1pskf_215"
 };
   

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAqC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FAmBd,CAAC;AA0eF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAqC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FAmBd,CAAC;AAyeF,eAAe,SAAS,CAAC"}

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

@@ -260,7 +260,7 @@ var OldAppLayout = React.forwardRef(function (_a, ref) {
                     React.createElement("div", { style: {
                             marginBottom: splitPanelBottomOffset
                         } },
-                        notifications && (React.createElement(Notifications, { disableContentPaddings: disableContentPaddings, testUtilsClassName: testutilStyles.notifications, labels: ariaLabels, topOffset: disableBodyScroll ? 0 : headerHeight, sticky: !isMobile && stickyNotifications, ref: notificationsRef }, notifications)),
+                        notifications && (React.createElement(Notifications, { testUtilsClassName: testutilStyles.notifications, labels: ariaLabels, topOffset: disableBodyScroll ? 0 : headerHeight, sticky: !isMobile && stickyNotifications, ref: notificationsRef }, notifications)),
                         ((!isMobile && breadcrumbs) || contentHeader) && (React.createElement(ContentWrapper, __assign({}, contentWrapperProps, { contentWidthStyles: contentWidthStyles }),
                             !isMobile && breadcrumbs && (React.createElement("div", { className: clsx(styles.breadcrumbs, testutilStyles.breadcrumbs, styles['breadcrumbs-desktop']) }, breadcrumbs)),
                             contentHeader && (React.createElement("div", { className: clsx(styles['content-header-wrapper'], !hasRenderedNotifications &&