@cloudscape-design/components-themeable 3.0.199 → 3.0.201

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "112a9cb1382bfe37cea72b72462d5b0140bcb3a3"
+  "commit": "819fa08079aae3660e047b2d6a57653e1f228d16"
 }

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

@@ -4,9 +4,11 @@
 */
 
 @use '../../internal/styles/tokens' as awsui;
+@use '../../internal/generated/custom-css-properties/index' as custom-props;
 
 .notifications-sticky {
   top: 0;
   z-index: 825;
   position: sticky;
+  #{custom-props.$flashbarStickyBottomMargin}: #{awsui.$space-xxl};
 }

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

@@ -28,6 +28,7 @@
     &.sticky-notifications {
       position: sticky;
       top: calc(var(#{custom-props.$offsetTop}) + #{awsui.$space-xs});
+      #{custom-props.$flashbarStickyBottomMargin}: #{awsui.$space-xxl};
     }
 
     &:not(.has-notifications-content) {

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/collapsible.motion.scss

@@ -8,7 +8,7 @@
 .stack {
   > .animation-running > .item,
   > .animation-running > .flash-list-item,
-  > .animation-running.toggle {
+  > .animation-running.notification-bar {
     @include styles.with-motion {
       transition-timing-function: tokens.$motion-easing-refresh-only-a;
       transition-duration: tokens.$motion-duration-refresh-only-fast;

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

@@ -72,8 +72,8 @@ the grid layout will be:
     );
   }
 
-  > .item:not(:last-child) > .flash,
-  > .item.flash {
+  > .item:not(:last-child) > .flash::before,
+  > .item.flash::before {
     box-shadow: awsui.$shadow-flash-collapsed;
   }
 }
@@ -107,7 +107,7 @@ the grid layout will be:
   }
 }
 
-.stack > .toggle {
+.stack > .notification-bar {
   @include styles.text-wrapping;
 
   background: awsui.$color-background-layout-toggle-default;
@@ -226,7 +226,8 @@ the grid layout will be:
   }
 }
 
-// Leave some space below the Flashbar, but only when it reaches the end of the page.
-.stack.spaced-bottom {
-  padding-bottom: awsui.$space-xxl;
+// Prevent the sticky Flashbar from reaching the end of the window by leaving some space below.
+.stack.expanded:not(.floating) {
+  // Default to 0 so that this does not apply to non-sticky Flashbar.
+  padding-bottom: var(#{custom-props.$flashbarStickyBottomMargin}, 0);
 }

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/generated/custom-css-properties/index.scss

@@ -1,29 +1,30 @@
 
-    $offsetTop: --awsui-offset-top-5mks97;
-$offsetTopWithNotifications: --awsui-offset-top-with-notifications-5mks97;
-$contentGapLeft: --awsui-content-gap-left-5mks97;
-$contentGapRight: --awsui-content-gap-right-5mks97;
-$contentHeight: --awsui-content-height-5mks97;
-$defaultMaxContentWidth: --awsui-default-max-content-width-5mks97;
-$defaultMinContentWidth: --awsui-default-min-content-width-5mks97;
-$footerHeight: --awsui-footer-height-5mks97;
-$headerHeight: --awsui-header-height-5mks97;
-$layoutWidth: --awsui-layout-width-5mks97;
-$mainOffsetLeft: --awsui-main-offset-left-5mks97;
-$maxContentWidth: --awsui-max-content-width-5mks97;
-$minContentWidth: --awsui-min-content-width-5mks97;
-$notificationsHeight: --awsui-notifications-height-5mks97;
-$overlapHeight: --awsui-overlap-height-5mks97;
-$navigationWidth: --awsui-navigation-width-5mks97;
-$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-5mks97;
-$splitPanelReportedSize: --awsui-split-panel-reported-size-5mks97;
-$splitPanelHeight: --awsui-split-panel-height-5mks97;
-$splitPanelMinWidth: --awsui-split-panel-min-width-5mks97;
-$splitPanelMaxWidth: --awsui-split-panel-max-width-5mks97;
-$toolsMaxWidth: --awsui-tools-max-width-5mks97;
-$toolsWidth: --awsui-tools-width-5mks97;
-$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-5mks97;
-$contentScrollMargin: --awsui-content-scroll-margin-5mks97;
-$flashbarStackDepth: --awsui-flashbar-stack-depth-5mks97;
-$flashbarStackIndex: --awsui-flashbar-stack-index-5mks97;
+    $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/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);
 }