@cloudscape-design/components 3.0.73 → 3.0.75

package/date-range-picker/styles.scoped.css

@@ -90,15 +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
 */
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-.awsui_calendar_mgja0_194kz_97:not(#\9) {
-  animation: awsui_awsui-motion-fade-in-0_mgja0_194kz_1 var(--motion-duration-show-quick-tyaalm, 135ms) var(--motion-easing-show-quick-1fcgbv, ease-out);
+.awsui_calendar_mgja0_1vo3v_93:not(#\9) {
+  animation: awsui_awsui-motion-fade-in-0_mgja0_1vo3v_1 var(--motion-duration-show-quick-tyaalm, 135ms) var(--motion-easing-show-quick-1fcgbv, ease-out);
   animation-fill-mode: both;
 }
-@keyframes awsui_awsui-motion-fade-in-0_mgja0_194kz_1 {
+@keyframes awsui_awsui-motion-fade-in-0_mgja0_1vo3v_1 {
   from {
     opacity: 0;
   }
@@ -107,12 +103,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_calendar_mgja0_194kz_97:not(#\9) {
+  .awsui_calendar_mgja0_1vo3v_93:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_calendar_mgja0_194kz_97:not(#\9), .awsui-mode-entering .awsui_calendar_mgja0_194kz_97:not(#\9) {
+.awsui-motion-disabled .awsui_calendar_mgja0_1vo3v_93:not(#\9), .awsui-mode-entering .awsui_calendar_mgja0_1vo3v_93:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -121,7 +117,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_mgja0_194kz_124:not(#\9) {
+.awsui_root_mgja0_1vo3v_120:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -159,28 +155,28 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   max-width: 32em;
 }
 
-.awsui_trigger-wrapper_mgja0_194kz_136:not(#\9) {
+.awsui_trigger-wrapper_mgja0_1vo3v_132:not(#\9) {
   min-width: calc(var(--size-calendar-grid-width-lxsx0p, 238px) + 2 * var(--space-l-4vl6xu, 20px));
 }
 
-.awsui_trigger-flexbox_mgja0_194kz_140:not(#\9) {
+.awsui_trigger-flexbox_mgja0_1vo3v_136:not(#\9) {
   display: flex;
 }
 
-.awsui_calendar_mgja0_194kz_97:not(#\9) {
+.awsui_calendar_mgja0_1vo3v_93:not(#\9) {
   display: block;
   width: calc(2 * var(--size-calendar-grid-width-lxsx0p, 238px) + var(--space-xs-rsr2qu, 8px));
 }
-.awsui_calendar_mgja0_194kz_97.awsui_one-grid_mgja0_194kz_148:not(#\9) {
+.awsui_calendar_mgja0_1vo3v_93.awsui_one-grid_mgja0_1vo3v_144:not(#\9) {
   width: var(--size-calendar-grid-width-lxsx0p, 238px);
 }
-.awsui_calendar-header_mgja0_194kz_151:not(#\9) {
+.awsui_calendar-header_mgja0_1vo3v_147:not(#\9) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
 }
-.awsui_calendar-header-months-wrapper_mgja0_194kz_157:not(#\9) {
+.awsui_calendar-header-months-wrapper_mgja0_1vo3v_153:not(#\9) {
   position: absolute;
   right: 0;
   left: 0;
@@ -192,7 +188,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   flex: 1;
   pointer-events: none;
 }
-.awsui_calendar-header-month_mgja0_194kz_157:not(#\9) {
+.awsui_calendar-header-month_mgja0_1vo3v_153:not(#\9) {
   font-size: var(--font-body-m-size-sregvd, 14px);
   line-height: var(--font-body-m-line-height-i7xxvv, 22px);
   font-weight: 700;
@@ -200,157 +196,134 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: flex;
   pointer-events: auto;
 }
-.awsui_calendar-next-month-btn_mgja0_194kz_177:not(#\9) {
+.awsui_calendar-next-month-btn_mgja0_1vo3v_173:not(#\9) {
   /* used for identifying element */
 }
-.awsui_calendar-prev-month-btn_mgja0_194kz_180:not(#\9) {
+.awsui_calendar-prev-month-btn_mgja0_1vo3v_176:not(#\9) {
   /* used for identifying element */
 }
-.awsui_calendar-day-names_mgja0_194kz_183:not(#\9) {
-  display: flex;
-  justify-content: stretch;
-}
-.awsui_calendar-day-name_mgja0_194kz_183:not(#\9) {
-  flex: 1 1 0%;
-  width: 0;
-  word-break: break-word;
-  text-align: center;
-  padding: var(--space-s-hv8c1d, 12px) 0 var(--space-xxs-ynfts5, 4px);
-  color: var(--color-text-calendar-month-elf7e9, #5f6b7a);
-  font-size: var(--font-body-s-size-ukw2p9, 12px);
-  line-height: var(--font-body-s-line-height-kdsbrl, 16px);
-  letter-spacing: var(--font-body-s-letter-spacing-cy0oxj, 0.005em);
-}
-.awsui_calendar-week_mgja0_194kz_198:not(#\9) {
-  display: flex;
-  justify-content: stretch;
-}
 
-.awsui_first-grid_mgja0_194kz_203:not(#\9),
-.awsui_second-grid_mgja0_194kz_204:not(#\9) {
+.awsui_first-grid_mgja0_1vo3v_180:not(#\9),
+.awsui_second-grid_mgja0_1vo3v_181:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_grid_mgja0_194kz_208:not(#\9) {
-  width: var(--size-calendar-grid-width-lxsx0p, 238px);
-}
-
-.awsui_date-and-time-wrapper_mgja0_194kz_212:not(#\9) {
+.awsui_date-and-time-wrapper_mgja0_1vo3v_185:not(#\9) {
   width: var(--size-calendar-grid-width-lxsx0p, 238px);
 }
 
-.awsui_date-and-time-wrapper_mgja0_194kz_212:not(#\9):not(.awsui_date-only_mgja0_194kz_216) {
+.awsui_date-and-time-wrapper_mgja0_1vo3v_185:not(#\9):not(.awsui_date-only_mgja0_1vo3v_189) {
   display: grid;
   column-gap: var(--space-xs-rsr2qu, 8px);
   grid-template-columns: 1fr 1fr;
 }
 
-.awsui_date-and-time-constrainttext_mgja0_194kz_222:not(#\9) {
+.awsui_date-and-time-constrainttext_mgja0_1vo3v_195:not(#\9) {
   color: var(--color-text-form-secondary-ih9x7l, #5f6b7a);
   font-size: var(--font-body-s-size-ukw2p9, 12px);
   line-height: var(--font-body-s-line-height-kdsbrl, 16px);
   letter-spacing: var(--font-body-s-letter-spacing-cy0oxj, 0.005em);
 }
 
-.awsui_footer_mgja0_194kz_229:not(#\9) {
+.awsui_footer_mgja0_1vo3v_202:not(#\9) {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   border-top: 1px solid var(--color-border-dropdown-item-default-faosd8, #e9ebed);
   padding: 0 var(--space-l-4vl6xu, 20px) var(--space-s-hv8c1d, 12px);
 }
-.awsui_footer_mgja0_194kz_229.awsui_has-clear-button_mgja0_194kz_236:not(#\9) {
+.awsui_footer_mgja0_1vo3v_202.awsui_has-clear-button_mgja0_1vo3v_209:not(#\9) {
   justify-content: space-between;
 }
-.awsui_footer_mgja0_194kz_229.awsui_one-grid_mgja0_194kz_148:not(#\9) {
+.awsui_footer_mgja0_1vo3v_202.awsui_one-grid_mgja0_1vo3v_144:not(#\9) {
   padding: 0 var(--space-xs-rsr2qu, 8px) var(--space-s-hv8c1d, 12px);
 }
 
-.awsui_footer-button-wrapper_mgja0_194kz_243:not(#\9) {
+.awsui_footer-button-wrapper_mgja0_1vo3v_216:not(#\9) {
   padding-top: var(--space-s-hv8c1d, 12px);
 }
 
-.awsui_icon-wrapper_mgja0_194kz_247:not(#\9) {
+.awsui_icon-wrapper_mgja0_1vo3v_220:not(#\9) {
   color: var(--color-text-interactive-default-eg5fsa, #414d5c);
   margin-right: var(--space-xs-rsr2qu, 8px);
 }
 
-.awsui_label_mgja0_194kz_252:not(#\9) {
+.awsui_label_mgja0_1vo3v_225:not(#\9) {
   -webkit-user-select: text;
           user-select: text;
   cursor: default;
 }
 
-.awsui_label_mgja0_194kz_252.awsui_label-enabled_mgja0_194kz_257:not(#\9):hover > .awsui_trigger-flexbox_mgja0_194kz_140 > .awsui_icon-wrapper_mgja0_194kz_247 {
+.awsui_label_mgja0_1vo3v_225.awsui_label-enabled_mgja0_1vo3v_230:not(#\9):hover > .awsui_trigger-flexbox_mgja0_1vo3v_136 > .awsui_icon-wrapper_mgja0_1vo3v_220 {
   color: var(--color-text-interactive-hover-v3lasm, #000716);
 }
 
-.awsui_label-text_mgja0_194kz_261:not(#\9) {
+.awsui_label-text_mgja0_1vo3v_234:not(#\9) {
   color: var(--color-text-input-placeholder-j53j3c, #5f6b7a);
   font-style: italic;
 }
 
-.awsui_label-token-nowrap_mgja0_194kz_266:not(#\9) {
+.awsui_label-token-nowrap_mgja0_1vo3v_239:not(#\9) {
   white-space: nowrap;
 }
 
-.awsui_mode-switch_mgja0_194kz_270:not(#\9) {
+.awsui_mode-switch_mgja0_1vo3v_243:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_dropdown_mgja0_194kz_274:not(#\9) {
+.awsui_dropdown_mgja0_1vo3v_247:not(#\9) {
   overflow: auto;
   border-top: 1px solid var(--color-border-container-top-srcvx4, transparent);
   border-bottom: 1px solid var(--color-border-container-top-srcvx4, transparent);
   border-radius: var(--border-radius-dropdown-ujknaf, 8px);
 }
-.awsui_dropdown_mgja0_194kz_274:not(#\9):focus {
+.awsui_dropdown_mgja0_1vo3v_247:not(#\9):focus {
   outline: none;
 }
-.awsui_dropdown_mgja0_194kz_274[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_dropdown_mgja0_1vo3v_247[data-awsui-focus-visible=true]:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: 2px;
   border-radius: var(--border-radius-dropdown-ujknaf, 8px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
 }
 
-.awsui_dropdown-content_mgja0_194kz_290:not(#\9) {
+.awsui_dropdown-content_mgja0_1vo3v_263:not(#\9) {
   -webkit-user-select: text;
           user-select: text;
   background-color: var(--color-background-container-content-i8i4a0, #ffffff);
   width: calc(2 * var(--size-calendar-grid-width-lxsx0p, 238px) + var(--space-xs-rsr2qu, 8px) + 2 * var(--space-l-4vl6xu, 20px));
 }
-.awsui_dropdown-content_mgja0_194kz_290.awsui_one-grid_mgja0_194kz_148:not(#\9) {
+.awsui_dropdown-content_mgja0_1vo3v_263.awsui_one-grid_mgja0_1vo3v_144:not(#\9) {
   width: calc(var(--size-calendar-grid-width-lxsx0p, 238px) + 2 * var(--space-l-4vl6xu, 20px));
 }
 
-.awsui_start-date-input_mgja0_194kz_299:not(#\9),
-.awsui_start-time-input_mgja0_194kz_300:not(#\9),
-.awsui_end-date-input_mgja0_194kz_301:not(#\9),
-.awsui_end-time-input_mgja0_194kz_302:not(#\9) {
+.awsui_start-date-input_mgja0_1vo3v_272:not(#\9),
+.awsui_start-time-input_mgja0_1vo3v_273:not(#\9),
+.awsui_end-date-input_mgja0_1vo3v_274:not(#\9),
+.awsui_end-time-input_mgja0_1vo3v_275:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_validation-section_mgja0_194kz_306:not(#\9) {
+.awsui_validation-section_mgja0_1vo3v_279:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_validation-error_mgja0_194kz_310:not(#\9) {
+.awsui_validation-error_mgja0_1vo3v_283:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_clear-button_mgja0_194kz_314:not(#\9) {
+.awsui_clear-button_mgja0_1vo3v_287:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_apply-button_mgja0_194kz_318:not(#\9) {
+.awsui_apply-button_mgja0_1vo3v_291:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_cancel-button_mgja0_194kz_322:not(#\9) {
+.awsui_cancel-button_mgja0_1vo3v_295:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_calendar-aria-live_mgja0_194kz_326:not(#\9) {
+.awsui_calendar-aria-live_mgja0_1vo3v_299:not(#\9) {
   /* used in test-utils */
 }

package/date-range-picker/styles.selectors.js

@@ -2,46 +2,42 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "calendar": "awsui_calendar_mgja0_194kz_97",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_mgja0_194kz_1",
-  "root": "awsui_root_mgja0_194kz_124",
-  "trigger-wrapper": "awsui_trigger-wrapper_mgja0_194kz_136",
-  "trigger-flexbox": "awsui_trigger-flexbox_mgja0_194kz_140",
-  "one-grid": "awsui_one-grid_mgja0_194kz_148",
-  "calendar-header": "awsui_calendar-header_mgja0_194kz_151",
-  "calendar-header-months-wrapper": "awsui_calendar-header-months-wrapper_mgja0_194kz_157",
-  "calendar-header-month": "awsui_calendar-header-month_mgja0_194kz_157",
-  "calendar-next-month-btn": "awsui_calendar-next-month-btn_mgja0_194kz_177",
-  "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_mgja0_194kz_180",
-  "calendar-day-names": "awsui_calendar-day-names_mgja0_194kz_183",
-  "calendar-day-name": "awsui_calendar-day-name_mgja0_194kz_183",
-  "calendar-week": "awsui_calendar-week_mgja0_194kz_198",
-  "first-grid": "awsui_first-grid_mgja0_194kz_203",
-  "second-grid": "awsui_second-grid_mgja0_194kz_204",
-  "grid": "awsui_grid_mgja0_194kz_208",
-  "date-and-time-wrapper": "awsui_date-and-time-wrapper_mgja0_194kz_212",
-  "date-only": "awsui_date-only_mgja0_194kz_216",
-  "date-and-time-constrainttext": "awsui_date-and-time-constrainttext_mgja0_194kz_222",
-  "footer": "awsui_footer_mgja0_194kz_229",
-  "has-clear-button": "awsui_has-clear-button_mgja0_194kz_236",
-  "footer-button-wrapper": "awsui_footer-button-wrapper_mgja0_194kz_243",
-  "icon-wrapper": "awsui_icon-wrapper_mgja0_194kz_247",
-  "label": "awsui_label_mgja0_194kz_252",
-  "label-enabled": "awsui_label-enabled_mgja0_194kz_257",
-  "label-text": "awsui_label-text_mgja0_194kz_261",
-  "label-token-nowrap": "awsui_label-token-nowrap_mgja0_194kz_266",
-  "mode-switch": "awsui_mode-switch_mgja0_194kz_270",
-  "dropdown": "awsui_dropdown_mgja0_194kz_274",
-  "dropdown-content": "awsui_dropdown-content_mgja0_194kz_290",
-  "start-date-input": "awsui_start-date-input_mgja0_194kz_299",
-  "start-time-input": "awsui_start-time-input_mgja0_194kz_300",
-  "end-date-input": "awsui_end-date-input_mgja0_194kz_301",
-  "end-time-input": "awsui_end-time-input_mgja0_194kz_302",
-  "validation-section": "awsui_validation-section_mgja0_194kz_306",
-  "validation-error": "awsui_validation-error_mgja0_194kz_310",
-  "clear-button": "awsui_clear-button_mgja0_194kz_314",
-  "apply-button": "awsui_apply-button_mgja0_194kz_318",
-  "cancel-button": "awsui_cancel-button_mgja0_194kz_322",
-  "calendar-aria-live": "awsui_calendar-aria-live_mgja0_194kz_326"
+  "calendar": "awsui_calendar_mgja0_1vo3v_93",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_mgja0_1vo3v_1",
+  "root": "awsui_root_mgja0_1vo3v_120",
+  "trigger-wrapper": "awsui_trigger-wrapper_mgja0_1vo3v_132",
+  "trigger-flexbox": "awsui_trigger-flexbox_mgja0_1vo3v_136",
+  "one-grid": "awsui_one-grid_mgja0_1vo3v_144",
+  "calendar-header": "awsui_calendar-header_mgja0_1vo3v_147",
+  "calendar-header-months-wrapper": "awsui_calendar-header-months-wrapper_mgja0_1vo3v_153",
+  "calendar-header-month": "awsui_calendar-header-month_mgja0_1vo3v_153",
+  "calendar-next-month-btn": "awsui_calendar-next-month-btn_mgja0_1vo3v_173",
+  "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_mgja0_1vo3v_176",
+  "first-grid": "awsui_first-grid_mgja0_1vo3v_180",
+  "second-grid": "awsui_second-grid_mgja0_1vo3v_181",
+  "date-and-time-wrapper": "awsui_date-and-time-wrapper_mgja0_1vo3v_185",
+  "date-only": "awsui_date-only_mgja0_1vo3v_189",
+  "date-and-time-constrainttext": "awsui_date-and-time-constrainttext_mgja0_1vo3v_195",
+  "footer": "awsui_footer_mgja0_1vo3v_202",
+  "has-clear-button": "awsui_has-clear-button_mgja0_1vo3v_209",
+  "footer-button-wrapper": "awsui_footer-button-wrapper_mgja0_1vo3v_216",
+  "icon-wrapper": "awsui_icon-wrapper_mgja0_1vo3v_220",
+  "label": "awsui_label_mgja0_1vo3v_225",
+  "label-enabled": "awsui_label-enabled_mgja0_1vo3v_230",
+  "label-text": "awsui_label-text_mgja0_1vo3v_234",
+  "label-token-nowrap": "awsui_label-token-nowrap_mgja0_1vo3v_239",
+  "mode-switch": "awsui_mode-switch_mgja0_1vo3v_243",
+  "dropdown": "awsui_dropdown_mgja0_1vo3v_247",
+  "dropdown-content": "awsui_dropdown-content_mgja0_1vo3v_263",
+  "start-date-input": "awsui_start-date-input_mgja0_1vo3v_272",
+  "start-time-input": "awsui_start-time-input_mgja0_1vo3v_273",
+  "end-date-input": "awsui_end-date-input_mgja0_1vo3v_274",
+  "end-time-input": "awsui_end-time-input_mgja0_1vo3v_275",
+  "validation-section": "awsui_validation-section_mgja0_1vo3v_279",
+  "validation-error": "awsui_validation-error_mgja0_1vo3v_283",
+  "clear-button": "awsui_clear-button_mgja0_1vo3v_287",
+  "apply-button": "awsui_apply-button_mgja0_1vo3v_291",
+  "cancel-button": "awsui_cancel-button_mgja0_1vo3v_295",
+  "calendar-aria-live": "awsui_calendar-aria-live_mgja0_1vo3v_299"
 };
   

package/flashbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/flashbar/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAK7C,OAAO,EAAE,aAAa,EAAE,CAAC;AAEzB,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,eAgEtE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/flashbar/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAc7C,OAAO,EAAE,aAAa,EAAE,CAAC;AAEzB,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,eAgKtE"}

package/flashbar/index.js

@@ -2,52 +2,123 @@ import { __assign, __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import clsx from 'clsx';
-import React from 'react';
-import { useMergeRefs } from '../internal/hooks/use-merge-refs';
-import { getBaseProps } from '../internal/base-component';
-import styles from './styles.css.js';
-import { Flash } from './flash';
-import { useContainerBreakpoints } from '../internal/hooks/container-queries';
+import React, { useState } from 'react';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
-import VisualContext from '../internal/components/visual-context';
-import useBaseComponent from '../internal/hooks/use-base-component';
-import { useReducedMotion, useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import customCssProps from '../internal/generated/custom-css-properties';
+import { Flash } from './flash';
+import { getBaseProps } from '../internal/base-component';
+import InternalIcon from '../icon/internal';
+import { TIMEOUT_FOR_ENTERING_ANIMATION } from './constant';
 import { TransitionGroup } from 'react-transition-group';
 import { Transition } from '../internal/components/transition';
-import { TIMEOUT_FOR_ENTERING_ANIMATION } from './constant';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { useContainerBreakpoints } from '../internal/hooks/container-queries';
+import useFocusVisible from '../internal/hooks/focus-visible';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
+import { useReducedMotion, useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import { getVisualContextClassname } from '../internal/components/visual-context';
+import styles from './styles.css.js';
 export default function Flashbar(_a) {
     var items = _a.items, restProps = __rest(_a, ["items"]);
     var __internalRootRef = useBaseComponent('Flashbar').__internalRootRef;
     var _b = useContainerBreakpoints(['xs']), breakpoint = _b[0], ref = _b[1];
-    var isRefresh = useVisualRefresh();
     var baseProps = getBaseProps(restProps);
     var mergedRef = useMergeRefs(ref, __internalRootRef);
-    // All the flash items should have ids so we can identify which DOM element is being removed from the DOM to animate it.
-    var motionDisabled = useReducedMotion(ref) || !isRefresh || (items && !items.every(function (item) { return 'id' in item; }));
-    // Motion will be disabled if any of the provided flash messages does not contain an `id`
-    var renderFlashItem = function (item, index) {
+    var isFocusVisible = useFocusVisible();
+    var isVisualRefresh = useVisualRefresh();
+    /**
+     * All the flash items should have ids so we can identify which DOM element is being
+     * removed from the DOM to animate it. Motion will be disabled if any of the provided
+     * flash messages does not contain an `id`.
+     */
+    var motionDisabled = useReducedMotion(ref) || !isVisualRefresh || (items && !items.every(function (item) { return 'id' in item; }));
+    /**
+     * The `stackItems` property is a hidden boolean that allows for teams
+     * to beta test the flashbar stacking feature.
+     */
+    var stackItems = restProps.stackItems;
+    var ariaLabels = restProps.ariaLabels;
+    var isFlashbarStacked = stackItems && (items === null || items === void 0 ? void 0 : items.length) > 3;
+    var _c = useState(false), isFlashbarStackExpanded = _c[0], setIsFlashbarStackExpanded = _c[1];
+    /**
+     * Compute the appropriate aria label for the stacked notifications toggle button
+     * based on the expanded/collapsed state of the stack and the presence of
+     * corresponding aria label properties.
+     */
+    function getStackButtonAriaLabel() {
+        var _a, _b;
+        var stackButtonAriaLabel;
+        if (isFlashbarStackExpanded) {
+            stackButtonAriaLabel = (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.stackCollapseLabel) !== null && _a !== void 0 ? _a : 'Collapse stacked notifications';
+        }
+        else {
+            stackButtonAriaLabel = (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.stackExpandLabel) !== null && _b !== void 0 ? _b : 'Expand stacked notifications';
+        }
+        return stackButtonAriaLabel;
+    }
+    /**
+     * If the `isFlashbarStacked` is true (which is only possible if `stackItems` is true)
+     * then the first item should be rendered followed by two dummy items that visually indicate
+     * two, three, or more items exist in the stack.
+     */
+    function renderStackedItems() {
         var _a;
-        return (React.createElement(Flash, __assign({ key: (_a = item.id) !== null && _a !== void 0 ? _a : index, 
+        if (!isFlashbarStacked) {
+            return;
+        }
+        var stackDepth = Math.min(3, items.length);
+        var stackedItems = items.slice(0, stackDepth);
+        return (React.createElement("div", { className: styles.stack, style: (_a = {}, _a[customCssProps.flashbarStackDepth] = stackDepth, _a) },
+            !isFlashbarStackExpanded && (React.createElement("div", { className: clsx(styles.collapsed, isVisualRefresh && styles['visual-refresh']) }, stackedItems.map(function (item, index) {
+                var _a;
+                var _b, _c;
+                return (React.createElement("div", { className: styles.item, style: (_a = {}, _a[customCssProps.flashbarStackIndex] = index, _a), key: index },
+                    index === 0 && renderItem(item, (_b = item.id) !== null && _b !== void 0 ? _b : index),
+                    index > 0 && React.createElement("div", { className: clsx(styles.flash, styles["flash-type-".concat((_c = item.type) !== null && _c !== void 0 ? _c : 'info')]) })));
+            }))),
+            isFlashbarStackExpanded && (React.createElement("div", { className: styles.expanded }, items.map(function (item, index) { var _a; return renderItem(item, (_a = item.id) !== null && _a !== void 0 ? _a : index); }))),
+            React.createElement("button", __assign({ "aria-label": getStackButtonAriaLabel(), className: clsx(styles.toggle, isVisualRefresh && styles['visual-refresh']), onClick: function () { return setIsFlashbarStackExpanded(!isFlashbarStackExpanded); } }, isFocusVisible),
+                React.createElement(InternalIcon, { className: clsx(styles.icon, isFlashbarStackExpanded && styles.expanded), size: "small", name: "angle-down" }))));
+    }
+    /**
+     * If the flashbar is flat and motion is `enabled` then the adding and removing of items
+     * from the flashbar will render with visual transitions.
+     */
+    function renderFlatItemsWithTransitions() {
+        if (isFlashbarStacked || motionDisabled || !items) {
+            return;
+        }
+        return (React.createElement(TransitionGroup, { component: null }, items &&
+            items.map(function (item, index) {
+                var _a;
+                return (React.createElement(Transition, { transitionChangeDelay: { entering: TIMEOUT_FOR_ENTERING_ANIMATION }, key: (_a = item.id) !== null && _a !== void 0 ? _a : index, "in": true }, function (state, transitionRootElement) { var _a; return renderItem(item, (_a = item.id) !== null && _a !== void 0 ? _a : index, transitionRootElement, state); }));
+            })));
+    }
+    /**
+     * If the flashbar is flat and motion is `disabled` then the adding and removing of items
+     * from the flashbar will render without visual transitions.
+     */
+    function renderFlatItemsWithoutTransitions() {
+        if (isFlashbarStacked || !motionDisabled || !items) {
+            return;
+        }
+        return React.createElement(React.Fragment, null, items.map(function (item, index) { var _a; return renderItem(item, (_a = item.id) !== null && _a !== void 0 ? _a : index); }));
+    }
+    /**
+     * This is a shared render function for a single flashbar item to be used
+     * by the stacking, motion, and non-motion item group render functions.
+     */
+    function renderItem(item, key, transitionRootElement, transitionState) {
+        return (React.createElement(Flash
+        // eslint-disable-next-line react/forbid-component-props
+        , __assign({ 
             // eslint-disable-next-line react/forbid-component-props
-            className: clsx(isRefresh ? styles['flash-refresh'] : '') }, item)));
-    };
-    var renderFlashItemsWithTransitions = function (items) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(TransitionGroup, { component: null }, items &&
-                items.map(function (item, index) {
-                    var _a;
-                    return (React.createElement(Transition, { transitionChangeDelay: { entering: TIMEOUT_FOR_ENTERING_ANIMATION }, key: (_a = item.id) !== null && _a !== void 0 ? _a : index, "in": true }, function (state, transitionRootElement) {
-                        var _a;
-                        return (React.createElement(Flash, __assign({ ref: transitionRootElement, key: (_a = item.id) !== null && _a !== void 0 ? _a : index, transitionState: state, 
-                            // eslint-disable-next-line react/forbid-component-props
-                            className: clsx(isRefresh ? styles['flash-refresh'] : '') }, item)));
-                    }));
-                }))));
-    };
+            className: clsx(getVisualContextClassname('flashbar'), isVisualRefresh ? styles['flash-refresh'] : ''), key: key, ref: transitionRootElement, transitionState: transitionState }, item)));
+    }
     return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.flashbar, styles["breakpoint-".concat(breakpoint)]), ref: mergedRef }),
-        React.createElement(VisualContext, { contextName: "flashbar" }, items && (React.createElement(React.Fragment, null, motionDisabled
-            ? items.map(function (item, index) { return renderFlashItem(item, index); })
-            : renderFlashItemsWithTransitions(items))))));
+        renderStackedItems(),
+        renderFlatItemsWithTransitions(),
+        renderFlatItemsWithoutTransitions()));
 }
 applyDisplayName(Flashbar, 'Flashbar');
 //# sourceMappingURL=index.js.map

package/flashbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/flashbar/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,aAAa,MAAM,uCAAuC,CAAC;AAClE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAEvF,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,8BAA8B,EAAE,MAAM,YAAY,CAAC;AAI5D,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAsC;IAApC,IAAA,KAAK,WAAA,EAAK,SAAS,cAArB,SAAuB,CAAF;IAC5C,IAAA,iBAAiB,GAAK,gBAAgB,CAAC,UAAU,CAAC,kBAAjC,CAAkC;IACrD,IAAA,KAAoB,uBAAuB,CAAC,CAAC,IAAI,CAAC,CAAC,EAAlD,UAAU,QAAA,EAAE,GAAG,QAAmC,CAAC;IAC1D,IAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IACrC,IAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAE1C,IAAM,SAAS,GAAG,YAAY,CAAC,GAAG,EAAE,iBAAiB,CAAC,CAAC;IAEvD,wHAAwH;IACxH,IAAM,cAAc,GAAG,gBAAgB,CAAC,GAAU,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,IAAI,IAAI,EAAZ,CAAY,CAAC,CAAC,CAAC;IACnH,yFAAyF;IAEzF,IAAM,eAAe,GAAG,UAAC,IAAqC,EAAE,KAAa;;QAAK,OAAA,CAChF,oBAAC,KAAK,aACJ,GAAG,EAAE,MAAA,IAAI,CAAC,EAAE,mCAAI,KAAK;YACrB,wDAAwD;YACxD,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,IACrD,IAAI,EACR,CACH,CAAA;KAAA,CAAC;IACF,IAAM,+BAA+B,GAAG,UAAC,KAAiD;QACxF,OAAO,CACL;YACE,oBAAC,eAAe,IAAC,SAAS,EAAE,IAAI,IAC7B,KAAK;gBACJ,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK;;oBAAK,OAAA,CACzB,oBAAC,UAAU,IACT,qBAAqB,EAAE,EAAE,QAAQ,EAAE,8BAA8B,EAAE,EACnE,GAAG,EAAE,MAAA,IAAI,CAAC,EAAE,mCAAI,KAAK,EACrB,IAAE,EAAE,IAAI,IAEP,UAAC,KAAa,EAAE,qBAA4D;;wBAAK,OAAA,CAChF,oBAAC,KAAK,aACJ,GAAG,EAAE,qBAAqB,EAC1B,GAAG,EAAE,MAAA,IAAI,CAAC,EAAE,mCAAI,KAAK,EACrB,eAAe,EAAE,KAAK;4BACtB,wDAAwD;4BACxD,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,IACrD,IAAI,EACR,CACH,CAAA;qBAAA,CACU,CACd,CAAA;iBAAA,CAAC,CACY,CACjB,CACJ,CAAC;IACJ,CAAC,CAAC;IACF,OAAO,CACL,wCACM,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,qBAAc,UAAU,CAAE,CAAC,CAAC,EACzF,GAAG,EAAE,SAAS;QAEd,oBAAC,aAAa,IAAC,WAAW,EAAC,UAAU,IAClC,KAAK,IAAI,CACR,0CACG,cAAc;YACb,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK,IAAK,OAAA,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,EAA5B,CAA4B,CAAC;YAC1D,CAAC,CAAC,+BAA+B,CAAC,KAAK,CAAC,CACzC,CACJ,CACa,CACZ,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { getBaseProps } from '../internal/base-component';\nimport styles from './styles.css.js';\nimport { Flash } from './flash';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport VisualContext from '../internal/components/visual-context';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useReducedMotion, useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { FlashbarProps } from './interfaces';\nimport { TransitionGroup } from 'react-transition-group';\nimport { Transition } from '../internal/components/transition';\nimport { TIMEOUT_FOR_ENTERING_ANIMATION } from './constant';\n\nexport { FlashbarProps };\n\nexport default function Flashbar({ items, ...restProps }: FlashbarProps) {\n  const { __internalRootRef } = useBaseComponent('Flashbar');\n  const [breakpoint, ref] = useContainerBreakpoints(['xs']);\n  const isRefresh = useVisualRefresh();\n  const baseProps = getBaseProps(restProps);\n\n  const mergedRef = useMergeRefs(ref, __internalRootRef);\n\n  // All the flash items should have ids so we can identify which DOM element is being removed from the DOM to animate it.\n  const motionDisabled = useReducedMotion(ref as any) || !isRefresh || (items && !items.every(item => 'id' in item));\n  // Motion will be disabled if any of the provided flash messages does not contain an `id`\n\n  const renderFlashItem = (item: FlashbarProps.MessageDefinition, index: number) => (\n    <Flash\n      key={item.id ?? index}\n      // eslint-disable-next-line react/forbid-component-props\n      className={clsx(isRefresh ? styles['flash-refresh'] : '')}\n      {...item}\n    />\n  );\n  const renderFlashItemsWithTransitions = (items: readonly FlashbarProps.MessageDefinition[]) => {\n    return (\n      <>\n        <TransitionGroup component={null}>\n          {items &&\n            items.map((item, index) => (\n              <Transition\n                transitionChangeDelay={{ entering: TIMEOUT_FOR_ENTERING_ANIMATION }}\n                key={item.id ?? index}\n                in={true}\n              >\n                {(state: string, transitionRootElement: React.Ref<HTMLDivElement> | undefined) => (\n                  <Flash\n                    ref={transitionRootElement}\n                    key={item.id ?? index}\n                    transitionState={state}\n                    // eslint-disable-next-line react/forbid-component-props\n                    className={clsx(isRefresh ? styles['flash-refresh'] : '')}\n                    {...item}\n                  />\n                )}\n              </Transition>\n            ))}\n        </TransitionGroup>\n      </>\n    );\n  };\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.flashbar, styles[`breakpoint-${breakpoint}`])}\n      ref={mergedRef}\n    >\n      <VisualContext contextName=\"flashbar\">\n        {items && (\n          <>\n            {motionDisabled\n              ? items.map((item, index) => renderFlashItem(item, index))\n              : renderFlashItemsWithTransitions(items)}\n          </>\n        )}\n      </VisualContext>\n    </div>\n  );\n}\n\napplyDisplayName(Flashbar, 'Flashbar');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/flashbar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useState } from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { Flash } from './flash';\nimport { FlashbarProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalIcon from '../icon/internal';\nimport { TIMEOUT_FOR_ENTERING_ANIMATION } from './constant';\nimport { TransitionGroup } from 'react-transition-group';\nimport { Transition } from '../internal/components/transition';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useReducedMotion, useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { getVisualContextClassname } from '../internal/components/visual-context';\nimport styles from './styles.css.js';\n\nexport { FlashbarProps };\n\nexport default function Flashbar({ items, ...restProps }: FlashbarProps) {\n  const { __internalRootRef } = useBaseComponent('Flashbar');\n  const [breakpoint, ref] = useContainerBreakpoints(['xs']);\n  const baseProps = getBaseProps(restProps);\n  const mergedRef = useMergeRefs(ref, __internalRootRef);\n  const isFocusVisible = useFocusVisible();\n  const isVisualRefresh = useVisualRefresh();\n\n  /**\n   * All the flash items should have ids so we can identify which DOM element is being\n   * removed from the DOM to animate it. Motion will be disabled if any of the provided\n   * flash messages does not contain an `id`.\n   */\n  const motionDisabled =\n    useReducedMotion(ref as any) || !isVisualRefresh || (items && !items.every(item => 'id' in item));\n\n  /**\n   * The `stackItems` property is a hidden boolean that allows for teams\n   * to beta test the flashbar stacking feature.\n   */\n  const stackItems = (restProps as any).stackItems;\n  const ariaLabels = (restProps as any).ariaLabels;\n  const isFlashbarStacked = stackItems && items?.length > 3;\n  const [isFlashbarStackExpanded, setIsFlashbarStackExpanded] = useState(false);\n\n  /**\n   * Compute the appropriate aria label for the stacked notifications toggle button\n   * based on the expanded/collapsed state of the stack and the presence of\n   * corresponding aria label properties.\n   */\n  function getStackButtonAriaLabel() {\n    let stackButtonAriaLabel;\n\n    if (isFlashbarStackExpanded) {\n      stackButtonAriaLabel = ariaLabels?.stackCollapseLabel ?? 'Collapse stacked notifications';\n    } else {\n      stackButtonAriaLabel = ariaLabels?.stackExpandLabel ?? 'Expand stacked notifications';\n    }\n\n    return stackButtonAriaLabel;\n  }\n\n  /**\n   * If the `isFlashbarStacked` is true (which is only possible if `stackItems` is true)\n   * then the first item should be rendered followed by two dummy items that visually indicate\n   * two, three, or more items exist in the stack.\n   */\n  function renderStackedItems() {\n    if (!isFlashbarStacked) {\n      return;\n    }\n\n    const stackDepth = Math.min(3, items.length);\n    const stackedItems = items.slice(0, stackDepth);\n\n    return (\n      <div className={styles.stack} style={{ [customCssProps.flashbarStackDepth]: stackDepth }}>\n        {!isFlashbarStackExpanded && (\n          <div className={clsx(styles.collapsed, isVisualRefresh && styles['visual-refresh'])}>\n            {stackedItems.map((item, index) => (\n              <div className={styles.item} style={{ [customCssProps.flashbarStackIndex]: index }} key={index}>\n                {index === 0 && renderItem(item, item.id ?? index)}\n                {index > 0 && <div className={clsx(styles.flash, styles[`flash-type-${item.type ?? 'info'}`])} />}\n              </div>\n            ))}\n          </div>\n        )}\n\n        {isFlashbarStackExpanded && (\n          <div className={styles.expanded}>{items.map((item, index) => renderItem(item, item.id ?? index))}</div>\n        )}\n\n        <button\n          aria-label={getStackButtonAriaLabel()}\n          className={clsx(styles.toggle, isVisualRefresh && styles['visual-refresh'])}\n          onClick={() => setIsFlashbarStackExpanded(!isFlashbarStackExpanded)}\n          {...isFocusVisible}\n        >\n          <InternalIcon\n            className={clsx(styles.icon, isFlashbarStackExpanded && styles.expanded)}\n            size=\"small\"\n            name=\"angle-down\"\n          />\n        </button>\n      </div>\n    );\n  }\n\n  /**\n   * If the flashbar is flat and motion is `enabled` then the adding and removing of items\n   * from the flashbar will render with visual transitions.\n   */\n  function renderFlatItemsWithTransitions() {\n    if (isFlashbarStacked || motionDisabled || !items) {\n      return;\n    }\n\n    return (\n      <TransitionGroup component={null}>\n        {items &&\n          items.map((item, index) => (\n            <Transition\n              transitionChangeDelay={{ entering: TIMEOUT_FOR_ENTERING_ANIMATION }}\n              key={item.id ?? index}\n              in={true}\n            >\n              {(state: string, transitionRootElement: React.Ref<HTMLDivElement> | undefined) =>\n                renderItem(item, item.id ?? index, transitionRootElement, state)\n              }\n            </Transition>\n          ))}\n      </TransitionGroup>\n    );\n  }\n\n  /**\n   * If the flashbar is flat and motion is `disabled` then the adding and removing of items\n   * from the flashbar will render without visual transitions.\n   */\n  function renderFlatItemsWithoutTransitions() {\n    if (isFlashbarStacked || !motionDisabled || !items) {\n      return;\n    }\n\n    return <>{items.map((item, index) => renderItem(item, item.id ?? index))}</>;\n  }\n\n  /**\n   * This is a shared render function for a single flashbar item to be used\n   * by the stacking, motion, and non-motion item group render functions.\n   */\n  function renderItem(\n    item: FlashbarProps.MessageDefinition,\n    key: string | number,\n    transitionRootElement?: React.Ref<HTMLDivElement> | undefined,\n    transitionState?: string | undefined\n  ) {\n    return (\n      <Flash\n        // eslint-disable-next-line react/forbid-component-props\n        className={clsx(getVisualContextClassname('flashbar'), isVisualRefresh ? styles['flash-refresh'] : '')}\n        key={key}\n        ref={transitionRootElement}\n        transitionState={transitionState}\n        {...item}\n      />\n    );\n  }\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.flashbar, styles[`breakpoint-${breakpoint}`])}\n      ref={mergedRef}\n    >\n      {renderStackedItems()}\n      {renderFlatItemsWithTransitions()}\n      {renderFlatItemsWithoutTransitions()}\n    </div>\n  );\n}\n\napplyDisplayName(Flashbar, 'Flashbar');\n"]}

package/flashbar/styles.css.js

@@ -1,27 +1,34 @@
 
     import './styles.scoped.css';
     export default {
-  "flash-refresh": "awsui_flash-refresh_1q84n_zqvy6_93",
-  "enter": "awsui_enter_1q84n_zqvy6_93",
-  "flash-body": "awsui_flash-body_1q84n_zqvy6_108",
-  "flash-message": "awsui_flash-message_1q84n_zqvy6_108",
-  "flash-header": "awsui_flash-header_1q84n_zqvy6_108",
-  "flash-content": "awsui_flash-content_1q84n_zqvy6_109",
-  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_zqvy6_110",
-  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_zqvy6_111",
-  "flash-icon": "awsui_flash-icon_1q84n_zqvy6_134",
-  "entering": "awsui_entering_1q84n_zqvy6_147",
-  "entered": "awsui_entered_1q84n_zqvy6_168",
-  "exiting": "awsui_exiting_1q84n_zqvy6_273",
-  "flashbar": "awsui_flashbar_1q84n_zqvy6_295",
-  "flash": "awsui_flash_1q84n_zqvy6_93",
-  "flash-text": "awsui_flash-text_1q84n_zqvy6_359",
-  "dismiss-button": "awsui_dismiss-button_1q84n_zqvy6_111",
-  "breakpoint-default": "awsui_breakpoint-default_1q84n_zqvy6_401",
-  "action-button": "awsui_action-button_1q84n_zqvy6_110",
-  "flash-type-success": "awsui_flash-type-success_1q84n_zqvy6_414",
-  "flash-type-error": "awsui_flash-type-error_1q84n_zqvy6_418",
-  "flash-type-warning": "awsui_flash-type-warning_1q84n_zqvy6_422",
-  "flash-type-info": "awsui_flash-type-info_1q84n_zqvy6_426"
+  "flash-refresh": "awsui_flash-refresh_1q84n_14a50_93",
+  "enter": "awsui_enter_1q84n_14a50_93",
+  "flash-body": "awsui_flash-body_1q84n_14a50_108",
+  "flash-message": "awsui_flash-message_1q84n_14a50_108",
+  "flash-header": "awsui_flash-header_1q84n_14a50_108",
+  "flash-content": "awsui_flash-content_1q84n_14a50_109",
+  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_14a50_110",
+  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_14a50_111",
+  "flash-icon": "awsui_flash-icon_1q84n_14a50_134",
+  "entering": "awsui_entering_1q84n_14a50_147",
+  "entered": "awsui_entered_1q84n_14a50_168",
+  "exiting": "awsui_exiting_1q84n_14a50_273",
+  "flashbar": "awsui_flashbar_1q84n_14a50_295",
+  "flash": "awsui_flash_1q84n_14a50_93",
+  "flash-text": "awsui_flash-text_1q84n_14a50_359",
+  "dismiss-button": "awsui_dismiss-button_1q84n_14a50_111",
+  "breakpoint-default": "awsui_breakpoint-default_1q84n_14a50_401",
+  "action-button": "awsui_action-button_1q84n_14a50_110",
+  "flash-type-success": "awsui_flash-type-success_1q84n_14a50_414",
+  "flash-type-error": "awsui_flash-type-error_1q84n_14a50_418",
+  "flash-type-warning": "awsui_flash-type-warning_1q84n_14a50_422",
+  "flash-type-info": "awsui_flash-type-info_1q84n_14a50_426",
+  "stack": "awsui_stack_1q84n_14a50_430",
+  "expanded": "awsui_expanded_1q84n_14a50_435",
+  "collapsed": "awsui_collapsed_1q84n_14a50_449",
+  "item": "awsui_item_1q84n_14a50_455",
+  "visual-refresh": "awsui_visual-refresh_1q84n_14a50_465",
+  "toggle": "awsui_toggle_1q84n_14a50_472",
+  "icon": "awsui_icon_1q84n_14a50_535"
 };