@cloudscape-design/components-themeable 3.0.199 → 3.0.200

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "112a9cb1382bfe37cea72b72462d5b0140bcb3a3"
+  "commit": "222b99ff1eab212a62dcf7a5154055623e6d38da"
 }

package/lib/internal/scss/cards/motion.scss

@@ -8,7 +8,15 @@
 
 .card-inner {
   @include styles.with-motion {
-    transition-property: background-color, border-top-color, border-bottom-color, border-left-color, border-right-color;
+    transition-property: background-color;
+    transition-duration: awsui.$motion-duration-transition-show-paced;
+    transition-timing-function: awsui.$motion-easing-transition-show-paced;
+  }
+}
+
+.card-inner::before {
+  @include styles.with-motion {
+    transition-property: border-top-color, border-right-color, border-bottom-color, border-left-color;
     transition-duration: awsui.$motion-duration-transition-show-paced;
     transition-timing-function: awsui.$motion-easing-transition-show-paced;
   }

package/lib/internal/scss/cards/styles.scss

@@ -84,14 +84,9 @@
         calc(#{awsui.$space-card-horizontal} - #{awsui.$border-item-width})
         calc(#{awsui.$space-scaled-l} - #{awsui.$border-item-width});
     }
-    // reset border color to prevent it from flashing black during selection animation
-    border-color: transparent;
     @include styles.container-shadow;
-    // container shadow comes with a top border, need to make it the same as the selection width
-    border-width: awsui.$border-item-width;
     width: 100%;
     min-width: 0;
-    box-sizing: border-box;
   }
   &-header {
     @include styles.font-heading-m;
@@ -107,12 +102,9 @@
   }
   &-selected {
     > .card-inner {
-      border: awsui.$border-item-width solid awsui.$color-border-item-selected;
       background-color: awsui.$color-background-item-selected;
-      padding: awsui.$space-scaled-l calc(#{awsui.$space-card-horizontal} - #{awsui.$border-item-width})
-        calc(#{awsui.$space-scaled-l} - #{awsui.$border-item-width});
-      > .card-header > .selection-control {
-        margin-right: calc(-1 * #{awsui.$border-item-width});
+      &::before {
+        border: awsui.$border-item-width solid awsui.$color-border-item-selected;
       }
     }
   }

package/lib/internal/scss/container/styles.scss

@@ -10,33 +10,55 @@
 .root {
   @include styles.styles-reset;
   word-wrap: break-word;
+  position: relative;
 
-  &-fit-height {
+  &.fit-height {
     display: flex;
     flex-direction: column;
-    overflow: hidden;
     height: 100%;
   }
 
   &.variant {
     &-default,
     &-stacked {
+      // Border and shadows are applied with ::before and ::after elements (respectively)
       @include shared.borders-and-shadows;
       background-color: awsui.$color-background-container-content;
     }
 
-    &-stacked:not(:last-child) {
+    // Meld container bottom corners into next adjoining container
+    &-stacked:not(:last-child),
+    &-stacked:not(:last-child)::before,
+    &-stacked:not(:last-child)::after {
       border-bottom-right-radius: 0;
       border-bottom-left-radius: 0;
     }
-
-    &-stacked + &-stacked {
-      @include shared.divider;
+    // Meld container top corners into preceding container
+    &-stacked + &-stacked,
+    &-stacked + &-stacked::before,
+    &-stacked + &-stacked::after {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
+    }
+    // Replace container border with a divider
+    &-stacked + &-stacked::before {
+      @include shared.divider;
+    }
+    // Reset container shadow to prevent unwanted overflow
+    &-stacked + &-stacked::after {
       box-shadow: awsui.$shadow-container-stacked;
     }
   }
+
+  // To ensure the top border/divider is visible on sticky elements which have a higher z-index
+  &.sticky-enabled {
+    &::before {
+      top: calc(-1 * #{awsui.$border-container-top-width});
+    }
+    &.variant-stacked::before {
+      top: calc(-1 * #{awsui.$border-divider-section-width});
+    }
+  }
 }
 
 .header {
@@ -59,9 +81,13 @@
   }
 
   &-stuck {
-    box-shadow: awsui.$shadow-sticky-embedded;
-    border: 0;
     border-radius: 0;
+    &::before {
+      border: 0;
+    }
+    &:not(.header-variant-cards) {
+      box-shadow: awsui.$shadow-sticky-embedded;
+    }
   }
 
   &-dynamic-height.header-stuck {
@@ -83,20 +109,14 @@
   }
 
   &-variant-cards {
-    @include shared.borders-and-shadows;
-
-    &:not(:empty) {
-      // bottom shadow does not appear in IE11 due to the presence of background color
-      // Adding a bottom border
-      border-bottom: 1px solid #d5dbdb;
-
-      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-      @supports (--css-variable-support-check: #000) {
-        border-bottom: 0;
-      }
+    &:not(.header-sticky-enabled) {
+      position: relative;
     }
+    @include shared.borders-and-shadows;
 
-    &.header-stuck {
+    &.header-stuck::after,
+    &.header-stuck::before {
+      border: 0;
       border-top-left-radius: 0;
       border-top-right-radius: 0;
     }
@@ -130,7 +150,7 @@ the default white background of the container component.
 }
 
 .content {
-  .root-fit-height > & {
+  .fit-height > & {
     flex: 1;
     overflow: auto;
   }

package/lib/internal/scss/flashbar/styles.scss

@@ -25,29 +25,19 @@
   justify-content: flex-start;
   align-items: flex-start;
   padding: awsui.$space-scaled-xs awsui.$space-flashbar-horizontal;
-  @include styles.container-shadow;
-  border-top: none;
   border-radius: awsui.$border-radius-flashbar;
   color: awsui.$color-text-notification-default;
   overflow-wrap: break-word;
   word-wrap: break-word;
-}
 
-.flash-refresh {
-  box-shadow: none;
   &::before {
-    content: '';
-    position: absolute;
-    z-index: -1;
-    top: 0px;
-    left: 0px;
-    bottom: 0px;
-    right: 0px;
-    background-color: transparent;
+    @include styles.base-pseudo-element;
     border-radius: awsui.$border-radius-flashbar;
-    pointer-events: none;
     box-shadow: awsui.$shadow-flash-sticky;
   }
+  &-refresh::before {
+    z-index: -1;
+  }
 }
 
 .flash-list {

package/lib/internal/scss/internal/styles/forms/mixins.scss

@@ -7,7 +7,7 @@
 @use '../tokens' as awsui;
 @use '../typography' as typography;
 @use '../foundation' as foundation;
-@use '../utils/theming' as theming;
+@use '../utils' as utils;
 @use './constants' as constants;
 
 @mixin link-focus {
@@ -131,11 +131,25 @@
 }
 
 @mixin container-shadow {
-  box-shadow: awsui.$shadow-container;
-  border-top: awsui.$border-container-top-width solid awsui.$color-border-container-top;
   border-radius: awsui.$border-radius-container;
   box-sizing: border-box;
 
+  &::before {
+    @include utils.base-pseudo-element;
+    // Reset border color to prevent it from flashing black during card selection animation
+    border-color: transparent;
+    border-top: awsui.$border-container-top-width solid awsui.$color-border-container-top;
+    border-radius: awsui.$border-radius-container;
+    z-index: 1;
+  }
+
+  &::after {
+    @include utils.base-pseudo-element;
+    box-shadow: awsui.$shadow-container;
+    border-radius: awsui.$border-radius-container;
+    mix-blend-mode: multiply;
+  }
+
   // HACK: because of the issues with IE's box shadow rendering we draw
   // a border and don't mind the pixel fitting
   @media screen and (-ms-high-contrast: active) {

package/lib/internal/scss/internal/styles/utils/mixins.scss

@@ -48,3 +48,15 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+@mixin base-pseudo-element {
+  content: '';
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  background: transparent;
+  box-sizing: border-box;
+}

package/lib/internal/scss/modal/styles.scss

@@ -79,9 +79,10 @@ $modal-z-index: 5000;
   @include styles.styles-reset;
   display: block;
   background-color: awsui.$color-background-container-content;
-  @include styles.container-shadow;
-  box-shadow: awsui.$shadow-modal;
   word-wrap: break-word;
+  border-top: awsui.$border-container-top-width solid awsui.$color-border-container-top;
+  border-radius: awsui.$border-radius-container;
+  box-shadow: awsui.$shadow-modal;
 }
 
 .content {

package/lib/internal/scss/wizard/styles.scss

@@ -33,12 +33,11 @@
   grid-column: 1;
   grid-row: 1 / span 2;
   padding-top: awsui.$space-scaled-xxs;
-  z-index: 1;
 
   > ul {
     background: awsui.$color-background-container-content;
-    border-radius: awsui.$border-radius-container;
-    box-shadow: awsui.$shadow-container;
+    position: relative;
+    @include styles.container-shadow;
     margin: 0;
     padding: awsui.$space-scaled-l awsui.$space-l;
     width: 280px;

package/lib/internal/template/alert/styles.css.js

@@ -1,24 +1,24 @@
 
     import './styles.scoped.css';
     export default {
-  "alert": "awsui_alert_mx3cw_1tvf1_93",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_1tvf1_1",
-  "root": "awsui_root_mx3cw_1tvf1_119",
-  "hidden": "awsui_hidden_mx3cw_1tvf1_135",
-  "body": "awsui_body_mx3cw_1tvf1_160",
-  "header": "awsui_header_mx3cw_1tvf1_166",
-  "action": "awsui_action_mx3cw_1tvf1_170",
-  "action-button": "awsui_action-button_mx3cw_1tvf1_175",
-  "text": "awsui_text_mx3cw_1tvf1_179",
-  "icon": "awsui_icon_mx3cw_1tvf1_183",
-  "message": "awsui_message_mx3cw_1tvf1_186",
-  "breakpoint-default": "awsui_breakpoint-default_mx3cw_1tvf1_194",
-  "content": "awsui_content_mx3cw_1tvf1_208",
-  "dismiss": "awsui_dismiss_mx3cw_1tvf1_212",
-  "dismiss-button": "awsui_dismiss-button_mx3cw_1tvf1_218",
-  "type-error": "awsui_type-error_mx3cw_1tvf1_226",
-  "type-warning": "awsui_type-warning_mx3cw_1tvf1_234",
-  "type-success": "awsui_type-success_mx3cw_1tvf1_242",
-  "type-info": "awsui_type-info_mx3cw_1tvf1_250"
+  "alert": "awsui_alert_mx3cw_wwhdd_93",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_wwhdd_1",
+  "root": "awsui_root_mx3cw_wwhdd_119",
+  "hidden": "awsui_hidden_mx3cw_wwhdd_135",
+  "body": "awsui_body_mx3cw_wwhdd_160",
+  "header": "awsui_header_mx3cw_wwhdd_166",
+  "action": "awsui_action_mx3cw_wwhdd_170",
+  "action-button": "awsui_action-button_mx3cw_wwhdd_175",
+  "text": "awsui_text_mx3cw_wwhdd_179",
+  "icon": "awsui_icon_mx3cw_wwhdd_183",
+  "message": "awsui_message_mx3cw_wwhdd_186",
+  "breakpoint-default": "awsui_breakpoint-default_mx3cw_wwhdd_194",
+  "content": "awsui_content_mx3cw_wwhdd_208",
+  "dismiss": "awsui_dismiss_mx3cw_wwhdd_212",
+  "dismiss-button": "awsui_dismiss-button_mx3cw_wwhdd_218",
+  "type-error": "awsui_type-error_mx3cw_wwhdd_226",
+  "type-warning": "awsui_type-warning_mx3cw_wwhdd_234",
+  "type-success": "awsui_type-success_mx3cw_wwhdd_242",
+  "type-info": "awsui_type-info_mx3cw_wwhdd_250"
 };
   

package/lib/internal/template/alert/styles.scoped.css

@@ -50,8 +50,6 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
-/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
@@ -64,6 +62,8 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
@@ -90,10 +90,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_alert_mx3cw_1tvf1_93:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_mx3cw_1tvf1_1 var(--motion-duration-show-paced-7wspqf, 180ms) var(--motion-easing-show-paced-wj4ybn, ease-out);
+.awsui_alert_mx3cw_wwhdd_93:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_mx3cw_wwhdd_1 var(--motion-duration-show-paced-7wspqf, 180ms) var(--motion-easing-show-paced-wj4ybn, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in_mx3cw_1tvf1_1 {
+@keyframes awsui_awsui-motion-fade-in_mx3cw_wwhdd_1 {
   from {
     opacity: 0.2;
   }
@@ -102,12 +102,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_alert_mx3cw_1tvf1_93:not(#\9) {
+  .awsui_alert_mx3cw_wwhdd_93:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_alert_mx3cw_1tvf1_93:not(#\9), .awsui-mode-entering .awsui_alert_mx3cw_1tvf1_93:not(#\9) {
+.awsui-motion-disabled .awsui_alert_mx3cw_wwhdd_93:not(#\9), .awsui-mode-entering .awsui_alert_mx3cw_wwhdd_93:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -116,7 +116,7 @@ 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_root_mx3cw_1tvf1_119:not(#\9) {
+.awsui_root_mx3cw_wwhdd_119:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -158,11 +158,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   overflow: hidden;
   display: block;
 }
-.awsui_root_mx3cw_1tvf1_119.awsui_hidden_mx3cw_1tvf1_135:not(#\9) {
+.awsui_root_mx3cw_wwhdd_119.awsui_hidden_mx3cw_wwhdd_135:not(#\9) {
   display: none;
 }
 
-.awsui_alert_mx3cw_1tvf1_93:not(#\9) {
+.awsui_alert_mx3cw_wwhdd_93:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -209,100 +209,100 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   background-color: var(--color-background-container-content-o88wxm, #ffffff);
 }
 
-.awsui_body_mx3cw_1tvf1_160:not(#\9) {
+.awsui_body_mx3cw_wwhdd_160:not(#\9) {
   display: flex;
   flex: 1 1 0%;
   min-width: 0;
 }
 
-.awsui_header_mx3cw_1tvf1_166:not(#\9) {
+.awsui_header_mx3cw_wwhdd_166:not(#\9) {
   font-weight: 700;
 }
 
-.awsui_action_mx3cw_1tvf1_170:not(#\9) {
+.awsui_action_mx3cw_wwhdd_170:not(#\9) {
   white-space: nowrap;
   margin-left: var(--space-s-hv8c1d, 12px);
 }
 
-.awsui_action-button_mx3cw_1tvf1_175:not(#\9) {
+.awsui_action-button_mx3cw_wwhdd_175:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_text_mx3cw_1tvf1_179:not(#\9) {
+.awsui_text_mx3cw_wwhdd_179:not(#\9) {
   padding: var(--border-field-width-y6x4sn, 1px) 0;
   margin: var(--space-scaled-xxs-95dhkm, 4px) var(--space-xxs-ynfts5, 4px);
 }
-.awsui_text_mx3cw_1tvf1_179.awsui_icon_mx3cw_1tvf1_183:not(#\9) {
+.awsui_text_mx3cw_wwhdd_179.awsui_icon_mx3cw_wwhdd_183:not(#\9) {
   margin-left: 0;
 }
-.awsui_text_mx3cw_1tvf1_179.awsui_message_mx3cw_1tvf1_186:not(#\9) {
+.awsui_text_mx3cw_wwhdd_179.awsui_message_mx3cw_wwhdd_186:not(#\9) {
   margin-right: var(--space-alert-message-right-tj2fce, 0px);
 }
-.awsui_text_mx3cw_1tvf1_179.awsui_message_mx3cw_1tvf1_186 + .awsui_action_mx3cw_1tvf1_170:not(#\9) {
+.awsui_text_mx3cw_wwhdd_179.awsui_message_mx3cw_wwhdd_186 + .awsui_action_mx3cw_wwhdd_170:not(#\9) {
   margin-left: var(--space-alert-action-left-ovi85g, 20px);
 }
 
 /* stylelint-disable selector-max-type */
-.awsui_root_mx3cw_1tvf1_119.awsui_breakpoint-default_mx3cw_1tvf1_194 > div > .awsui_alert_mx3cw_1tvf1_93 > .awsui_body_mx3cw_1tvf1_160:not(#\9) {
+.awsui_root_mx3cw_wwhdd_119.awsui_breakpoint-default_mx3cw_wwhdd_194 > div > .awsui_alert_mx3cw_wwhdd_93 > .awsui_body_mx3cw_wwhdd_160:not(#\9) {
   display: block;
 }
-.awsui_root_mx3cw_1tvf1_119.awsui_breakpoint-default_mx3cw_1tvf1_194 > div > .awsui_alert_mx3cw_1tvf1_93 > .awsui_body_mx3cw_1tvf1_160 > .awsui_action_mx3cw_1tvf1_170:not(#\9) {
+.awsui_root_mx3cw_wwhdd_119.awsui_breakpoint-default_mx3cw_wwhdd_194 > div > .awsui_alert_mx3cw_wwhdd_93 > .awsui_body_mx3cw_wwhdd_160 > .awsui_action_mx3cw_wwhdd_170:not(#\9) {
   margin-left: var(--space-xxs-ynfts5, 4px);
   margin-bottom: var(--space-xxs-ynfts5, 4px);
 }
 
 /* stylelint-enable selector-max-type */
-.awsui_message_mx3cw_1tvf1_186:not(#\9) {
+.awsui_message_mx3cw_wwhdd_186:not(#\9) {
   flex: 1 1 0%;
   min-width: 0;
 }
 
-.awsui_content_mx3cw_1tvf1_208:not(#\9) {
+.awsui_content_mx3cw_wwhdd_208:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_dismiss_mx3cw_1tvf1_212:not(#\9) {
+.awsui_dismiss_mx3cw_wwhdd_212:not(#\9) {
   flex: 0 0 auto;
   margin-right: calc(-1 * var(--space-xxs-ynfts5, 4px));
   margin-left: var(--space-s-hv8c1d, 12px);
 }
 
-.awsui_dismiss-button_mx3cw_1tvf1_218:not(#\9) {
+.awsui_dismiss-button_mx3cw_wwhdd_218:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_icon_mx3cw_1tvf1_183:not(#\9) {
+.awsui_icon_mx3cw_wwhdd_183:not(#\9) {
   flex: 0 0 auto;
 }
 
-.awsui_type-error_mx3cw_1tvf1_226:not(#\9) {
+.awsui_type-error_mx3cw_wwhdd_226:not(#\9) {
   border-color: var(--color-border-status-error-fybu9w, #d13212);
   background-color: var(--color-background-status-error-h1a0iq, #fdf3f1);
 }
-.awsui_type-error_mx3cw_1tvf1_226 > .awsui_icon_mx3cw_1tvf1_183:not(#\9) {
+.awsui_type-error_mx3cw_wwhdd_226 > .awsui_icon_mx3cw_wwhdd_183:not(#\9) {
   color: var(--color-text-status-error-jer77f, #d13212);
 }
 
-.awsui_type-warning_mx3cw_1tvf1_234:not(#\9) {
+.awsui_type-warning_mx3cw_wwhdd_234:not(#\9) {
   border-color: var(--color-border-status-warning-2otrg9, #aab7b8);
   background-color: var(--color-background-status-warning-1213z1, #ffffff);
 }
-.awsui_type-warning_mx3cw_1tvf1_234 > .awsui_icon_mx3cw_1tvf1_183:not(#\9) {
+.awsui_type-warning_mx3cw_wwhdd_234 > .awsui_icon_mx3cw_wwhdd_183:not(#\9) {
   color: var(--color-text-status-warning-94ezyx, #d13212);
 }
 
-.awsui_type-success_mx3cw_1tvf1_242:not(#\9) {
+.awsui_type-success_mx3cw_wwhdd_242:not(#\9) {
   border-color: var(--color-border-status-success-lb896w, #1d8102);
   background-color: var(--color-background-status-success-cvmksn, #f2f8f0);
 }
-.awsui_type-success_mx3cw_1tvf1_242 > .awsui_icon_mx3cw_1tvf1_183:not(#\9) {
+.awsui_type-success_mx3cw_wwhdd_242 > .awsui_icon_mx3cw_wwhdd_183:not(#\9) {
   color: var(--color-text-status-success-hb5hdl, #1d8102);
 }
 
-.awsui_type-info_mx3cw_1tvf1_250:not(#\9) {
+.awsui_type-info_mx3cw_wwhdd_250:not(#\9) {
   border-color: var(--color-border-status-info-0iedcr, #0073bb);
   background-color: var(--color-background-status-info-yq3r41, #f1faff);
 }
-.awsui_type-info_mx3cw_1tvf1_250 > .awsui_icon_mx3cw_1tvf1_183:not(#\9) {
+.awsui_type-info_mx3cw_wwhdd_250 > .awsui_icon_mx3cw_wwhdd_183:not(#\9) {
   color: var(--color-text-status-info-09r23g, #0073bb);
 }

package/lib/internal/template/alert/styles.selectors.js

@@ -2,24 +2,24 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "alert": "awsui_alert_mx3cw_1tvf1_93",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_1tvf1_1",
-  "root": "awsui_root_mx3cw_1tvf1_119",
-  "hidden": "awsui_hidden_mx3cw_1tvf1_135",
-  "body": "awsui_body_mx3cw_1tvf1_160",
-  "header": "awsui_header_mx3cw_1tvf1_166",
-  "action": "awsui_action_mx3cw_1tvf1_170",
-  "action-button": "awsui_action-button_mx3cw_1tvf1_175",
-  "text": "awsui_text_mx3cw_1tvf1_179",
-  "icon": "awsui_icon_mx3cw_1tvf1_183",
-  "message": "awsui_message_mx3cw_1tvf1_186",
-  "breakpoint-default": "awsui_breakpoint-default_mx3cw_1tvf1_194",
-  "content": "awsui_content_mx3cw_1tvf1_208",
-  "dismiss": "awsui_dismiss_mx3cw_1tvf1_212",
-  "dismiss-button": "awsui_dismiss-button_mx3cw_1tvf1_218",
-  "type-error": "awsui_type-error_mx3cw_1tvf1_226",
-  "type-warning": "awsui_type-warning_mx3cw_1tvf1_234",
-  "type-success": "awsui_type-success_mx3cw_1tvf1_242",
-  "type-info": "awsui_type-info_mx3cw_1tvf1_250"
+  "alert": "awsui_alert_mx3cw_wwhdd_93",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_wwhdd_1",
+  "root": "awsui_root_mx3cw_wwhdd_119",
+  "hidden": "awsui_hidden_mx3cw_wwhdd_135",
+  "body": "awsui_body_mx3cw_wwhdd_160",
+  "header": "awsui_header_mx3cw_wwhdd_166",
+  "action": "awsui_action_mx3cw_wwhdd_170",
+  "action-button": "awsui_action-button_mx3cw_wwhdd_175",
+  "text": "awsui_text_mx3cw_wwhdd_179",
+  "icon": "awsui_icon_mx3cw_wwhdd_183",
+  "message": "awsui_message_mx3cw_wwhdd_186",
+  "breakpoint-default": "awsui_breakpoint-default_mx3cw_wwhdd_194",
+  "content": "awsui_content_mx3cw_wwhdd_208",
+  "dismiss": "awsui_dismiss_mx3cw_wwhdd_212",
+  "dismiss-button": "awsui_dismiss-button_mx3cw_wwhdd_218",
+  "type-error": "awsui_type-error_mx3cw_wwhdd_226",
+  "type-warning": "awsui_type-warning_mx3cw_wwhdd_234",
+  "type-success": "awsui_type-success_mx3cw_wwhdd_242",
+  "type-info": "awsui_type-info_mx3cw_wwhdd_250"
 };
   

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

@@ -1,29 +1,29 @@
 
     import './styles.scoped.css';
     export default {
-  "arrow": "awsui_arrow_1hpp3_ilqxm_93",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_ilqxm_97",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_ilqxm_97",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_ilqxm_128",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_ilqxm_128",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_ilqxm_131",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_ilqxm_131",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_ilqxm_134",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_ilqxm_134",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_ilqxm_137",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_ilqxm_137",
-  "annotation": "awsui_annotation_1hpp3_ilqxm_145",
-  "next-button": "awsui_next-button_1hpp3_ilqxm_146",
-  "previous-button": "awsui_previous-button_1hpp3_ilqxm_147",
-  "finish-button": "awsui_finish-button_1hpp3_ilqxm_148",
-  "header": "awsui_header_1hpp3_ilqxm_149",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_ilqxm_150",
-  "content": "awsui_content_1hpp3_ilqxm_151",
-  "description": "awsui_description_1hpp3_ilqxm_155",
-  "actionBar": "awsui_actionBar_1hpp3_ilqxm_160",
-  "stepCounter": "awsui_stepCounter_1hpp3_ilqxm_167",
-  "divider": "awsui_divider_1hpp3_ilqxm_171",
-  "hotspot": "awsui_hotspot_1hpp3_ilqxm_175",
-  "icon": "awsui_icon_1hpp3_ilqxm_215"
+  "arrow": "awsui_arrow_1hpp3_1pw0t_93",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_1pw0t_97",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_1pw0t_97",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1pw0t_128",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1pw0t_128",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1pw0t_131",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1pw0t_131",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1pw0t_134",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1pw0t_134",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1pw0t_137",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1pw0t_137",
+  "annotation": "awsui_annotation_1hpp3_1pw0t_145",
+  "next-button": "awsui_next-button_1hpp3_1pw0t_146",
+  "previous-button": "awsui_previous-button_1hpp3_1pw0t_147",
+  "finish-button": "awsui_finish-button_1hpp3_1pw0t_148",
+  "header": "awsui_header_1hpp3_1pw0t_149",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_1pw0t_150",
+  "content": "awsui_content_1hpp3_1pw0t_151",
+  "description": "awsui_description_1hpp3_1pw0t_155",
+  "actionBar": "awsui_actionBar_1hpp3_1pw0t_160",
+  "stepCounter": "awsui_stepCounter_1hpp3_1pw0t_167",
+  "divider": "awsui_divider_1hpp3_1pw0t_171",
+  "hotspot": "awsui_hotspot_1hpp3_1pw0t_175",
+  "icon": "awsui_icon_1hpp3_1pw0t_215"
 };