@cloudscape-design/components-themeable 3.0.211 → 3.0.213

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "fc49ae884ccfbb8632240c6b82cbd323ce29fddf"
+  "commit": "d5de5982718ba1b1d1c7ec3b00ae205a732ab0c7"
 }

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

@@ -8,7 +8,7 @@
 
 .notifications,
 .notifications-sticky {
-  z-index: 825;
+  z-index: 850;
 }
 
 .notifications {
@@ -21,3 +21,11 @@
   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/app-layout/styles.scss

@@ -7,8 +7,7 @@
 @use '../internal/styles/tokens' as awsui;
 @use './constants' as constants;
 
-// should be above sticky notifications
-$drawer-z-index: 850;
+$drawer-z-index: 830;
 // should be above mobile toolbar
 $drawer-z-index-mobile: 1001;
 

package/lib/internal/scss/app-layout/visual-refresh/navigation.scss

@@ -15,13 +15,13 @@
   height: var(#{custom-props.$contentHeight});
   position: sticky;
   top: var(#{custom-props.$offsetTop});
-  z-index: 850;
+  z-index: 830;
 
   /*
   The navigation and tools containers (that contain the toggle buttons)
   stretch the full height of the app layout. Normally, this wouldn't be an
   issue because they sit above the app layout's content padding.
-  
+
   But if disableContentPaddings is set to true and there are buttons on the
   left/right edges of the screen, they will be covered by the containers. So
   we need to disable pointer events in the container and re-enable them in
@@ -60,7 +60,7 @@ nav.show-navigation {
   }
 
   /*
-  Apply the animation only in desktop viewports because the AppBar will 
+  Apply the animation only in desktop viewports because the AppBar will
   take control in responsive viewports.
   */
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
@@ -117,8 +117,8 @@ nav.navigation {
   }
 
   /*
-  A non-semantic node is added with a fixed width equal to the final Navigation 
-  width. This will create the visual appearance of horizontal movement and 
+  A non-semantic node is added with a fixed width equal to the final Navigation
+  width. This will create the visual appearance of horizontal movement and
   prevent unwanted text wrapping.
   */
   > .animated-content {

package/lib/internal/scss/app-layout/visual-refresh/notifications.scss

@@ -10,11 +10,11 @@
 .notifications {
   grid-column: 3;
   grid-row: 1;
-  z-index: 825;
+  z-index: 850;
 
   /*
-  In desktop viewports the notifications will always be the first 
-  slot rendered in the center column. The padding should create 
+  In desktop viewports the notifications will always be the first
+  slot rendered in the center column. The padding should create
   a centered vertical alignment with the circular buttons for the
   navigation and tools drawers.
   */
@@ -22,8 +22,8 @@
     margin: awsui.$space-xs 0;
 
     /*
-    #{awsui.$space-xs} token needs to align with the $offsetTopWithNotifications 
-    calculation in the layout CSS. 
+    #{awsui.$space-xs} token needs to align with the $offsetTopWithNotifications
+    calculation in the layout CSS.
     */
     &.sticky-notifications {
       position: sticky;
@@ -37,8 +37,8 @@
   }
 
   /*
-  In mobile viewports the notifications should never be sticky even 
-  if the property is set. Padding is added to give adequate 
+  In mobile viewports the notifications should never be sticky even
+  if the property is set. Padding is added to give adequate
   vertical space from the sticky AppBar the subsequent adjacent sibling.
   */
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {

package/lib/internal/scss/app-layout/visual-refresh/split-panel.scss

@@ -8,9 +8,9 @@
 @use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
 
 /*
-When the Split Panel is in the bottom position it was share the same row 
-as the content area. This row is defined as 1 fractional unit which will 
-consume the remaining vertical space in the grid after the notifications 
+When the Split Panel is in the bottom position it was share the same row
+as the content area. This row is defined as 1 fractional unit which will
+consume the remaining vertical space in the grid after the notifications
 and breadcrumbs.
 */
 section.split-panel-bottom {
@@ -24,13 +24,13 @@ section.split-panel-bottom {
   grid-column: 1 / 6;
   grid-row: 5;
   height: auto;
-  /* 
+  /*
   The position sticky will work in conjunction with the align self: end; property.
-  If the grid row scrolls beyond the viewport, the sticky bottom position 
+  If the grid row scrolls beyond the viewport, the sticky bottom position
   will lift it up above the footer so it is always visible.
   */
   position: sticky;
-  z-index: 851;
+  z-index: 840;
 
   // Animation for the height when opening the split panel
   @keyframes openSplitPanelBottom {
@@ -57,7 +57,7 @@ section.split-panel-bottom {
   }
 
   /*
-  Unlike the side position the Split Panel is persistent in the DOM 
+  Unlike the side position the Split Panel is persistent in the DOM
   when in the bottom position.
   */
   &.position-bottom {
@@ -65,11 +65,11 @@ section.split-panel-bottom {
   }
 
   /*
-  Warning! This is a hack! The existing design token for the split panel 
+  Warning! This is a hack! The existing design token for the split panel
   shadow in the bottom position does not render in the refactored code.
-  It appears to be related to the fact that the legacy split panel element 
-  has a height equal to the expanded height and a corresponding translation 
-  of the Y position so it is moved off the screen. This will need to be 
+  It appears to be related to the fact that the legacy split panel element
+  has a height equal to the expanded height and a corresponding translation
+  of the Y position so it is moved off the screen. This will need to be
   refactored with an adjustment to the split panel design token.
   */
   &:not(.is-split-panel-open).position-bottom {
@@ -114,8 +114,8 @@ section.split-panel-side {
   }
 
   /*
-  The min and max widths are applied when the Split Panel is opened otherwise 
-  it would not be possible to animate the width and the box shadow would 
+  The min and max widths are applied when the Split Panel is opened otherwise
+  it would not be possible to animate the width and the box shadow would
   be persistent in the DOM when closed.
   */
   &.is-split-panel-open.position-side {
@@ -130,8 +130,8 @@ section.split-panel-side {
   }
 
   /*
-  A non-semantic node is added with a fixed width equal to the final Split Panel 
-  width. This will create the visual appearance of horizontal movement and 
+  A non-semantic node is added with a fixed width equal to the final Split Panel
+  width. This will create the visual appearance of horizontal movement and
   prevent unwanted text wrapping.
   */
   > .animated-content {

package/lib/internal/scss/app-layout/visual-refresh/tools.scss

@@ -8,12 +8,12 @@
 @use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
 
 /*
-The Tools component container has a max width calculation that depends on the 
+The Tools component container has a max width calculation that depends on the
 state of the other siblings within the Layout grid definition. The layout width
-is set in the resize observer in the Layout component. The main offset left 
-will calculate the distance from the start of the Layout component. The minimum 
+is set in the resize observer in the Layout component. The main offset left
+will calculate the distance from the start of the Layout component. The minimum
 content width has a default value that can be set directly with the minContentWidth
-property. The content gap right is computed in the Layout styles based on the 
+property. The content gap right is computed in the Layout styles based on the
 viewport size and state of the Tools drawer.
 */
 .tools-container {
@@ -31,7 +31,7 @@ viewport size and state of the Tools drawer.
   max-width: var(#{custom-props.$toolsMaxWidth});
   position: sticky;
   top: var(#{custom-props.$offsetTop});
-  z-index: 850;
+  z-index: 830;
 
   pointer-events: none;
 
@@ -91,8 +91,8 @@ viewport size and state of the Tools drawer.
   }
 
   /*
-  A non-semantic node is added with a fixed width equal to the final Tools 
-  width. This will create the visual appearance of horizontal movement and 
+  A non-semantic node is added with a fixed width equal to the final Tools
+  width. This will create the visual appearance of horizontal movement and
   prevent unwanted text wrapping.
   */
   > .animated-content {
@@ -101,7 +101,7 @@ viewport size and state of the Tools drawer.
 
   /*
   A right border is needed if the Tools is open and the buttons are persistent in
-  the DOM. This creates a visual vertical boundary between the Tools and the Buttons 
+  the DOM. This creates a visual vertical boundary between the Tools and the Buttons
   only when they are both present. This is the circumstance when there is a Split Panel
   in the side position.
   */
@@ -125,8 +125,8 @@ viewport size and state of the Tools drawer.
 }
 
 /*
-Warning! If these design tokens for padding change it will adversely impact 
-the calculation used to determine the Split Panel maximum width in the 
+Warning! If these design tokens for padding change it will adversely impact
+the calculation used to determine the Split Panel maximum width in the
 handleSplitPanelMaxWidth function in the context.
 */
 .show-tools {
@@ -149,7 +149,7 @@ handleSplitPanelMaxWidth function in the context.
   }
 
   /*
-  Apply the animation only in desktop viewports because the AppBar will 
+  Apply the animation only in desktop viewports because the AppBar will
   take control in responsive viewports.
   */
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {

package/lib/internal/scss/collection-preferences/styles.scss

@@ -22,6 +22,7 @@
 
 .wrap-lines,
 .striped-rows,
+.content-density,
 .page-size,
 .page-size-form-field,
 .page-size-radio-group {

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

@@ -2,6 +2,7 @@
  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;
@@ -9,9 +10,25 @@
 @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': 3px,
+);
+
 .stack {
+  $notification-bar-horizontal-margin: 3 * map.get($notification-bar-collapsed-item-overflow, 'x');
   display: grid;
-  grid-template-columns: 1fr minmax(70px, auto) 1fr;
+  grid-template-columns: $notification-bar-horizontal-margin 1fr $notification-bar-horizontal-margin;
 }
 
 .stack > .expanded {
@@ -33,14 +50,15 @@ the grid layout will be:
 [10px] [item 2 start] [10px] [fractional unit] [10px] [item 2 end] [10px]
 [10px] [10px] [item 3 start] [fractional unit] [item 3 end] [10px] [10px]
 */
+
 .stack > .collapsed {
   display: grid;
   grid-column: 1 / 4;
   grid-template-columns:
-    repeat(var(#{custom-props.$flashbarStackDepth}), 10px)
+    repeat(var(#{custom-props.$flashbarStackDepth}), map.get($notification-bar-collapsed-item-overflow, 'x'))
     1fr
-    repeat(var(#{custom-props.$flashbarStackDepth}), 10px);
-  row-gap: 8px;
+    repeat(var(#{custom-props.$flashbarStackDepth}), map.get($notification-bar-collapsed-item-overflow, 'x'));
+  row-gap: map.get($notification-bar-collapsed-item-overflow, 'y');
   z-index: 0;
 
   > .item {
@@ -83,27 +101,88 @@ the grid layout will be:
   @include stacked-flash-z-index;
 }
 
-@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;
-
-  padding-top: $padding-vertical;
-  padding-bottom: $padding-vertical;
+@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;
+  }
+}
 
+.stack.collapsible {
   &:not(.expanded) {
-    margin-top: #{$margin-top-when-collapsed};
-    margin-bottom: calc(
-      #{-$margin-top-when-collapsed} - (#{$line-height} + 2 * (#{$padding-vertical} + #{$border-width}))
-    );
+    &: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')
+        );
+      }
+    }
+
+    /*
+    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')
+        );
+      }
+    }
   }
 
   &.expanded {
-    margin-top: #{$margin-top-when-expanded};
-    margin-bottom: calc(
-      #{-$margin-top-when-expanded} - (#{$line-height} + 2 * (#{$padding-vertical} + #{$border-width}))
-    );
+    &: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')
+      );
+    }
   }
 }
 
@@ -118,13 +197,16 @@ the grid layout will be:
   color: awsui.$color-text-layout-toggle;
   cursor: pointer;
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   grid-column: 2;
   grid-row: 2;
-  gap: awsui.$space-xxs;
+  column-gap: calc(#{awsui.$space-m} + #{awsui.$space-xxs});
+  justify-content: center;
   letter-spacing: awsui.$font-button-letter-spacing;
   margin-left: auto;
   margin-right: auto;
+  row-gap: 0;
   text-align: center;
   text-decoration: none;
   z-index: 1;
@@ -142,7 +224,12 @@ the grid layout will be:
   }
 
   > .status {
-    display: inline-block;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: awsui.$space-m;
+    justify-content: center;
+    row-gap: 0;
 
     > .header {
       font-weight: awsui.$font-button-weight;
@@ -150,18 +237,15 @@ the grid layout will be:
     }
 
     > .item-count {
-      margin-left: awsui.$space-m;
-      margin-right: awsui.$space-m;
-      white-space: nowrap;
-
-      > .type-count {
-        > .count-number {
-          margin-left: awsui.$space-xxs;
-        }
-
-        &:not(:last-child) {
-          margin-right: awsui.$space-s;
-        }
+      column-gap: awsui.$space-s;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: center;
+      row-gap: 0;
+
+      > .type-count > .count-number {
+        margin-left: awsui.$space-xxs;
       }
     }
   }
@@ -176,20 +260,14 @@ the grid layout will be:
   }
 
   &.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: map.get($notification-bar-border-width, 'visual-refresh');
     border-width: $border-width;
     padding-left: awsui.$space-l;
     padding-right: awsui.$space-l;
   }
 
   &:not(.visual-refresh) {
-    $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: map.get($notification-bar-border-width, 'classic');
     border-width: $border-width;
     padding-left: awsui.$space-s;
     padding-right: awsui.$space-s;
@@ -208,6 +286,8 @@ 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/internal/generated/custom-css-properties/index.scss

@@ -1,30 +1,31 @@
 
-    $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;
+    $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;
     

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

@@ -52,7 +52,7 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
   word-wrap: break-word;
   background-color: awsui.$color-background-layout-panel-content;
   // should be above tools and navigation panels to avoid their shadows
-  z-index: 851;
+  z-index: 840;
   &-closed {
     cursor: pointer;
     min-width: constants.$sidebar-size-closed;
@@ -114,7 +114,7 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
   }
 
   /*
-  Removed the position fixed with the AppLayout refactor because the 
+  Removed the position fixed with the AppLayout refactor because the
   SplitPanel is no longer in fixed position in the DOM.
   */
   &.refresh {

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

@@ -1,29 +1,29 @@
 
     import './styles.scoped.css';
     export default {
-  "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"
+  "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"
 };