@aws-amplify/ui 5.5.8 → 5.5.10

package/dist/styles.css

@@ -731,6 +731,72 @@
   --amplify-components-stepperfield-button-disabled-background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
   --amplify-components-stepperfield-button-hover-color: var(--amplify-components-button-hover-color);
   --amplify-components-stepperfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
+  --amplify-components-storagemanager-dropzone-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-storagemanager-dropzone-border-radius: var(--amplify-radii-small);
+  --amplify-components-storagemanager-dropzone-border-color: var(--amplify-colors-border-primary);
+  --amplify-components-storagemanager-dropzone-border-style: dashed;
+  --amplify-components-storagemanager-dropzone-border-width: var(--amplify-border-widths-small);
+  --amplify-components-storagemanager-dropzone-gap: var(--amplify-space-small);
+  --amplify-components-storagemanager-dropzone-padding-block: var(--amplify-space-xl);
+  --amplify-components-storagemanager-dropzone-padding-inline: var(--amplify-space-large);
+  --amplify-components-storagemanager-dropzone-text-align: center;
+  --amplify-components-storagemanager-dropzone-active-background-color: var(--amplify-colors-brand-primary-10);
+  --amplify-components-storagemanager-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
+  --amplify-components-storagemanager-dropzone-active-border-color: var(--amplify-colors-border-pressed);
+  --amplify-components-storagemanager-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
+  --amplify-components-storagemanager-dropzone-active-border-width: var(--amplify-border-widths-medium);
+  --amplify-components-storagemanager-dropzone-icon-color: var(--amplify-colors-border-primary);
+  --amplify-components-storagemanager-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
+  --amplify-components-storagemanager-dropzone-text-color: var(--amplify-colors-font-tertiary);
+  --amplify-components-storagemanager-dropzone-text-font-size: var(--amplify-font-sizes-medium);
+  --amplify-components-storagemanager-dropzone-text-font-weight: var(--amplify-font-weights-bold);
+  --amplify-components-storagemanager-file-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-storagemanager-file-border-radius: var(--amplify-radii-small);
+  --amplify-components-storagemanager-file-border-color: var(--amplify-colors-border-primary);
+  --amplify-components-storagemanager-file-border-style: solid;
+  --amplify-components-storagemanager-file-border-width: var(--amplify-border-widths-small);
+  --amplify-components-storagemanager-file-padding-block: var(--amplify-space-xs);
+  --amplify-components-storagemanager-file-padding-inline: var(--amplify-space-small);
+  --amplify-components-storagemanager-file-gap: var(--amplify-space-small);
+  --amplify-components-storagemanager-file-align-items: baseline;
+  --amplify-components-storagemanager-file-name-font-size: var(--amplify-font-sizes-medium);
+  --amplify-components-storagemanager-file-name-font-weight: var(--amplify-font-weights-bold);
+  --amplify-components-storagemanager-file-name-color: var(--amplify-colors-font-primary);
+  --amplify-components-storagemanager-file-size-font-size: var(--amplify-font-sizes-small);
+  --amplify-components-storagemanager-file-size-font-weight: var(--amplify-font-weights-normal);
+  --amplify-components-storagemanager-file-size-color: var(--amplify-colors-font-tertiary);
+  --amplify-components-storagemanager-file-image-width: var(--amplify-space-xxl);
+  --amplify-components-storagemanager-file-image-height: var(--amplify-space-xxl);
+  --amplify-components-storagemanager-file-image-background-color: var(--amplify-colors-background-secondary);
+  --amplify-components-storagemanager-file-image-color: var(--amplify-colors-font-tertiary);
+  --amplify-components-storagemanager-file-image-border-radius: var(--amplify-radii-small);
+  --amplify-components-storagemanager-loader-stroke-linecap: round;
+  --amplify-components-storagemanager-loader-stroke-empty: var(--amplify-colors-border-secondary);
+  --amplify-components-storagemanager-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
+  --amplify-components-storagemanager-loader-stroke-width: var(--amplify-border-widths-large);
+  --amplify-components-storagemanager-previewer-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-storagemanager-previewer-border-color: var(--amplify-colors-border-primary);
+  --amplify-components-storagemanager-previewer-border-style: solid;
+  --amplify-components-storagemanager-previewer-border-width: var(--amplify-border-widths-small);
+  --amplify-components-storagemanager-previewer-border-radius: var(--amplify-radii-small);
+  --amplify-components-storagemanager-previewer-padding-block: var(--amplify-space-zero);
+  --amplify-components-storagemanager-previewer-padding-inline: var(--amplify-space-zero);
+  --amplify-components-storagemanager-previewer-max-height: 40rem;
+  --amplify-components-storagemanager-previewer-max-width: auto;
+  --amplify-components-storagemanager-previewer-text-font-size: var(--amplify-font-sizes-medium);
+  --amplify-components-storagemanager-previewer-text-font-weight: var(--amplify-font-weights-bold);
+  --amplify-components-storagemanager-previewer-text-color: var(--amplify-colors-font-primary);
+  --amplify-components-storagemanager-previewer-body-padding-block: var(--amplify-space-medium);
+  --amplify-components-storagemanager-previewer-body-padding-inline: var(--amplify-space-medium);
+  --amplify-components-storagemanager-previewer-body-gap: var(--amplify-space-small);
+  --amplify-components-storagemanager-previewer-footer-border-color: var(--amplify-colors-border-secondary);
+  --amplify-components-storagemanager-previewer-footer-border-style: solid;
+  --amplify-components-storagemanager-previewer-footer-border-width: var(--amplify-border-widths-small);
+  --amplify-components-storagemanager-previewer-footer-padding-block: var(--amplify-space-medium);
+  --amplify-components-storagemanager-previewer-footer-padding-inline: var(--amplify-space-medium);
+  --amplify-components-storagemanager-previewer-footer-justify-content: space-between;
+  --amplify-components-storagemanager-filelist-flex-direction: column;
+  --amplify-components-storagemanager-filelist-gap: var(--amplify-space-small);
   --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
   --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
   --amplify-components-switchfield-font-size: var(--amplify-font-sizes-medium);
@@ -2702,153 +2768,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
   height: 100%;
 }
 
-.amplify-fileuploader__dropzone {
-  background-color: var(--amplify-components-fileuploader-dropzone-background-color);
-  border-color: var(--amplify-components-fileuploader-dropzone-border-color);
-  border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
-  border-style: var(--amplify-components-fileuploader-dropzone-border-style);
-  border-width: var(--amplify-components-fileuploader-dropzone-border-width);
-  text-align: var(--amplify-components-fileuploader-dropzone-text-align);
-  padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
-  padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--amplify-components-fileuploader-dropzone-gap);
-}
-.amplify-fileuploader__dropzone--small {
-  flex-direction: row;
-  justify-content: center;
-}
-.amplify-fileuploader__dropzone--active {
-  border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
-  border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
-  background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
-}
-.amplify-fileuploader__dropzone__icon {
-  font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
-  color: var(--amplify-components-fileuploader-dropzone-icon-color);
-}
-.amplify-fileuploader__dropzone__text {
-  color: var(--amplify-components-fileuploader-dropzone-text-color);
-  font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
-  font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
-}
-.amplify-fileuploader__file {
-  position: relative;
-  border-width: var(--amplify-components-fileuploader-file-border-width);
-  border-style: var(--amplify-components-fileuploader-file-border-style);
-  border-color: var(--amplify-components-fileuploader-file-border-color);
-  border-radius: var(--amplify-components-fileuploader-file-border-radius);
-  display: flex;
-  flex-direction: column;
-  padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
-  padding-block: var(--amplify-components-fileuploader-file-padding-block);
-  align-items: var(--amplify-components-fileuploader-file-align-items);
-}
-.amplify-fileuploader__file__wrapper {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--amplify-components-fileuploader-file-gap);
-}
-.amplify-fileuploader__file__name {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
-  font-size: var(--amplify-components-fileuploader-file-name-font-size);
-  color: var(--amplify-components-fileuploader-file-name-color);
-}
-.amplify-fileuploader__file__size {
-  font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
-  font-size: var(--amplify-components-fileuploader-file-size-font-size);
-  color: var(--amplify-components-fileuploader-file-size-color);
-}
-.amplify-fileuploader__file__main {
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.amplify-fileuploader__file__image {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--amplify-components-fileuploader-file-image-width);
-  height: var(--amplify-components-fileuploader-file-image-height);
-  background-color: var(--amplify-components-fileuploader-file-image-background-color);
-  border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
-  color: var(--amplify-components-fileuploader-file-image-color);
-}
-.amplify-fileuploader__file__image img {
-  max-height: 100%;
-}
-.amplify-fileuploader__file__status--error {
-  color: var(--amplify-colors-font-error);
-  font-size: var(--amplify-components-fileuploader-file-size-font-size);
-}
-.amplify-fileuploader__file__status--success {
-  color: var(--amplify-colors-font-success);
-}
-.amplify-fileuploader__loader {
-  stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
-  stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
-  stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
-  height: var(--amplify-components-fileuploader-loader-stroke-width);
-  --amplify-components-loader-linear-stroke-filled: var(
-    --amplify-components-fileuploader-loader-stroke-filled
-  );
-  overflow: hidden;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-}
-.amplify-fileuploader__previewer {
-  display: block;
-  max-width: var(--amplify-components-fileuploader-previewer-max-width);
-  background-color: var(--amplify-components-fileuploader-previewer-background-color);
-  border-width: var(--amplify-components-fileuploader-previewer-border-width);
-  border-style: var(--amplify-components-fileuploader-previewer-border-style);
-  border-color: var(--amplify-components-fileuploader-previewer-border-color);
-  border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
-  padding-inline: var(--amplify-components-fileuploader-previewer-padding-inline);
-  padding-block: var(--amplify-components-fileuploader-previewer-padding-block);
-}
-.amplify-fileuploader__previewer__text {
-  font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
-  font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
-  color: var(--amplify-components-fileuploader-previewer-text-color);
-}
-.amplify-fileuploader__previewer__body {
-  display: flex;
-  flex-direction: column;
-  max-height: var(--amplify-components-fileuploader-previewer-max-height);
-  max-width: var(--amplify-components-fileuploader-previewer-max-width);
-  overflow: auto;
-  gap: var(--amplify-components-fileuploader-previewer-body-gap);
-  padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
-  padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
-}
-.amplify-fileuploader__previewer__footer {
-  max-width: var(--amplify-components-fileuploader-previewer-max-width);
-  border-top-width: var(--amplify-components-fileuploader-previewer-footer-border-width);
-  border-top-style: var(--amplify-components-fileuploader-previewer-footer-border-style);
-  border-top-color: var(--amplify-components-fileuploader-previewer-footer-border-color);
-  padding-inline: var(--amplify-components-fileuploader-previewer-footer-padding-inline);
-  padding-block: var(--amplify-components-fileuploader-previewer-footer-padding-block);
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
-}
-.amplify-fileuploader__previewer__footer__actions {
-  display: flex;
-  flex-direction: row;
-  gap: var(--amplify-space-small);
-}
-
 .amplify-menu-content-wrapper {
   z-index: 999999;
 }
@@ -3237,6 +3156,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
 }
 
 .amplify-select__icon-wrapper {
+  color: var(--amplify-components-fieldcontrol-color);
   align-items: var(--amplify-components-select-icon-wrapper-align-items);
   position: var(--amplify-components-select-icon-wrapper-position);
   top: var(--amplify-components-select-icon-wrapper-top);
@@ -4401,6 +4321,282 @@ html[dir=rtl] .amplify-field-group__inner-start {
   margin: var(--amplify-space-small);
 }
 
+.amplify-fileuploader__dropzone {
+  background-color: var(--amplify-components-fileuploader-dropzone-background-color);
+  border-color: var(--amplify-components-fileuploader-dropzone-border-color);
+  border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
+  border-style: var(--amplify-components-fileuploader-dropzone-border-style);
+  border-width: var(--amplify-components-fileuploader-dropzone-border-width);
+  text-align: var(--amplify-components-fileuploader-dropzone-text-align);
+  padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
+  padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--amplify-components-fileuploader-dropzone-gap);
+}
+.amplify-fileuploader__dropzone--small {
+  flex-direction: row;
+  justify-content: center;
+}
+.amplify-fileuploader__dropzone--active {
+  border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
+  border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
+  background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
+}
+.amplify-fileuploader__dropzone__icon {
+  font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
+  color: var(--amplify-components-fileuploader-dropzone-icon-color);
+}
+.amplify-fileuploader__dropzone__text {
+  color: var(--amplify-components-fileuploader-dropzone-text-color);
+  font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
+  font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
+}
+.amplify-fileuploader__file {
+  position: relative;
+  border-width: var(--amplify-components-fileuploader-file-border-width);
+  border-style: var(--amplify-components-fileuploader-file-border-style);
+  border-color: var(--amplify-components-fileuploader-file-border-color);
+  border-radius: var(--amplify-components-fileuploader-file-border-radius);
+  display: flex;
+  flex-direction: column;
+  padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
+  padding-block: var(--amplify-components-fileuploader-file-padding-block);
+  align-items: var(--amplify-components-fileuploader-file-align-items);
+}
+.amplify-fileuploader__file__wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--amplify-components-fileuploader-file-gap);
+}
+.amplify-fileuploader__file__name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
+  font-size: var(--amplify-components-fileuploader-file-name-font-size);
+  color: var(--amplify-components-fileuploader-file-name-color);
+}
+.amplify-fileuploader__file__size {
+  font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
+  font-size: var(--amplify-components-fileuploader-file-size-font-size);
+  color: var(--amplify-components-fileuploader-file-size-color);
+}
+.amplify-fileuploader__file__main {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.amplify-fileuploader__file__image {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--amplify-components-fileuploader-file-image-width);
+  height: var(--amplify-components-fileuploader-file-image-height);
+  background-color: var(--amplify-components-fileuploader-file-image-background-color);
+  border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
+  color: var(--amplify-components-fileuploader-file-image-color);
+}
+.amplify-fileuploader__file__image img {
+  max-height: 100%;
+}
+.amplify-fileuploader__file__status--error {
+  color: var(--amplify-colors-font-error);
+  font-size: var(--amplify-components-fileuploader-file-size-font-size);
+}
+.amplify-fileuploader__file__status--success {
+  color: var(--amplify-colors-font-success);
+}
+.amplify-fileuploader__loader {
+  stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
+  stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
+  stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
+  height: var(--amplify-components-fileuploader-loader-stroke-width);
+  --amplify-components-loader-linear-stroke-filled: var(
+    --amplify-components-fileuploader-loader-stroke-filled
+  );
+  overflow: hidden;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+.amplify-fileuploader__previewer {
+  display: block;
+  max-width: var(--amplify-components-fileuploader-previewer-max-width);
+  background-color: var(--amplify-components-fileuploader-previewer-background-color);
+  border-width: var(--amplify-components-fileuploader-previewer-border-width);
+  border-style: var(--amplify-components-fileuploader-previewer-border-style);
+  border-color: var(--amplify-components-fileuploader-previewer-border-color);
+  border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
+  padding-inline: var(--amplify-components-fileuploader-previewer-padding-inline);
+  padding-block: var(--amplify-components-fileuploader-previewer-padding-block);
+}
+.amplify-fileuploader__previewer__text {
+  font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
+  font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
+  color: var(--amplify-components-fileuploader-previewer-text-color);
+}
+.amplify-fileuploader__previewer__body {
+  display: flex;
+  flex-direction: column;
+  max-height: var(--amplify-components-fileuploader-previewer-max-height);
+  max-width: var(--amplify-components-fileuploader-previewer-max-width);
+  overflow: auto;
+  gap: var(--amplify-components-fileuploader-previewer-body-gap);
+  padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
+  padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
+}
+.amplify-fileuploader__previewer__footer {
+  max-width: var(--amplify-components-fileuploader-previewer-max-width);
+  border-top-width: var(--amplify-components-fileuploader-previewer-footer-border-width);
+  border-top-style: var(--amplify-components-fileuploader-previewer-footer-border-style);
+  border-top-color: var(--amplify-components-fileuploader-previewer-footer-border-color);
+  padding-inline: var(--amplify-components-fileuploader-previewer-footer-padding-inline);
+  padding-block: var(--amplify-components-fileuploader-previewer-footer-padding-block);
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
+}
+.amplify-fileuploader__previewer__footer__actions {
+  display: flex;
+  flex-direction: row;
+  gap: var(--amplify-space-small);
+}
+
+.amplify-storagemanager__dropzone {
+  background-color: var(--amplify-components-storagemanager-dropzone-background-color);
+  border-color: var(--amplify-components-storagemanager-dropzone-border-color);
+  border-radius: var(--amplify-components-storagemanager-dropzone-border-radius);
+  border-style: var(--amplify-components-storagemanager-dropzone-border-style);
+  border-width: var(--amplify-components-storagemanager-dropzone-border-width);
+  text-align: var(--amplify-components-storagemanager-dropzone-text-align);
+  padding-block: var(--amplify-components-storagemanager-dropzone-padding-block);
+  padding-inline: var(--amplify-components-storagemanager-dropzone-padding-inline);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--amplify-components-storagemanager-dropzone-gap);
+}
+.amplify-storagemanager__dropzone--small {
+  flex-direction: row;
+  justify-content: center;
+}
+.amplify-storagemanager__dropzone--active {
+  border-color: var(--amplify-components-storagemanager-dropzone-active-border-color);
+  border-width: var(--amplify-components-storagemanager-dropzone-active-border-width);
+  background-color: var(--amplify-components-storagemanager-dropzone-active-background-color);
+}
+.amplify-storagemanager__dropzone__icon {
+  font-size: var(--amplify-components-storagemanager-dropzone-icon-font-size);
+  color: var(--amplify-components-storagemanager-dropzone-icon-color);
+}
+.amplify-storagemanager__dropzone__text {
+  color: var(--amplify-components-storagemanager-dropzone-text-color);
+  font-size: var(--amplify-components-storagemanager-dropzone-text-font-size);
+  font-weight: var(--amplify-components-storagemanager-dropzone-text-font-weight);
+}
+.amplify-storagemanager__file__list {
+  display: flex;
+  flex-direction: var(--amplify-components-storagemanager-filelist-flex-direction);
+  gap: var(--amplify-components-storagemanager-filelist-gap);
+}
+.amplify-storagemanager__file {
+  position: relative;
+  border-width: var(--amplify-components-storagemanager-file-border-width);
+  border-style: var(--amplify-components-storagemanager-file-border-style);
+  border-color: var(--amplify-components-storagemanager-file-border-color);
+  border-radius: var(--amplify-components-storagemanager-file-border-radius);
+  display: flex;
+  flex-direction: column;
+  padding-inline: var(--amplify-components-storagemanager-file-padding-inline);
+  padding-block: var(--amplify-components-storagemanager-file-padding-block);
+  align-items: var(--amplify-components-storagemanager-file-align-items);
+}
+.amplify-storagemanager__file__wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--amplify-components-storagemanager-file-gap);
+}
+.amplify-storagemanager__file__name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-weight: var(--amplify-components-storagemanager-file-name-font-weight);
+  font-size: var(--amplify-components-storagemanager-file-name-font-size);
+  color: var(--amplify-components-storagemanager-file-name-color);
+}
+.amplify-storagemanager__file__size {
+  font-weight: var(--amplify-components-storagemanager-file-size-font-weight);
+  font-size: var(--amplify-components-storagemanager-file-size-font-size);
+  color: var(--amplify-components-storagemanager-file-size-color);
+}
+.amplify-storagemanager__file__main {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.amplify-storagemanager__file__image {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--amplify-components-storagemanager-file-image-width);
+  height: var(--amplify-components-storagemanager-file-image-height);
+  background-color: var(--amplify-components-storagemanager-file-image-background-color);
+  border-radius: var(--amplify-components-storagemanager-file-image-border-radius);
+  color: var(--amplify-components-storagemanager-file-image-color);
+}
+.amplify-storagemanager__file__image img {
+  max-height: 100%;
+}
+.amplify-storagemanager__file__status--error {
+  color: var(--amplify-colors-font-error);
+  font-size: var(--amplify-components-storagemanager-file-size-font-size);
+}
+.amplify-storagemanager__file__status--success {
+  color: var(--amplify-colors-font-success);
+}
+.amplify-storagemanager__loader {
+  stroke-linecap: var(--amplify-components-storagemanager-loader-stroke-linecap);
+  stroke: var(--amplify-components-storagemanager-loader-stroke-empty);
+  stroke-width: var(--amplify-components-storagemanager-loader-stroke-width);
+  height: var(--amplify-components-storagemanager-loader-stroke-width);
+  --amplify-components-loader-linear-stroke-filled: var(
+    --amplify-components-storagemanager-loader-stroke-filled
+  );
+  overflow: hidden;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+.amplify-storagemanager__previewer {
+  display: flex;
+  flex-direction: column;
+  max-width: var(--amplify-components-storagemanager-previewer-max-width);
+  max-height: var(--amplify-components-storagemanager-previewer-max-height);
+  overflow: auto;
+  gap: var(--amplify-components-storagemanager-previewer-body-gap);
+  padding-inline: var(--amplify-components-storagemanager-previewer-body-padding-inline);
+  padding-block: var(--amplify-components-storagemanager-previewer-body-padding-block);
+  background-color: var(--amplify-components-storagemanager-previewer-background-color);
+  border-width: var(--amplify-components-storagemanager-previewer-border-width);
+  border-style: var(--amplify-components-storagemanager-previewer-border-style);
+  border-color: var(--amplify-components-storagemanager-previewer-border-color);
+  border-radius: var(--amplify-components-storagemanager-previewer-border-radius);
+}
+.amplify-storagemanager__previewer__text {
+  font-weight: var(--amplify-components-storagemanager-previewer-text-font-weight);
+  font-size: var(--amplify-components-storagemanager-previewer-text-font-size);
+  color: var(--amplify-components-storagemanager-previewer-text-color);
+}
+
 [data-label-position=start] {
   flex-direction: row;
 }

package/dist/theme.css

@@ -728,6 +728,72 @@
 --amplify-components-stepperfield-button-disabled-background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
 --amplify-components-stepperfield-button-hover-color: var(--amplify-components-button-hover-color);
 --amplify-components-stepperfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
+--amplify-components-storagemanager-dropzone-background-color: var(--amplify-colors-background-primary);
+--amplify-components-storagemanager-dropzone-border-radius: var(--amplify-radii-small);
+--amplify-components-storagemanager-dropzone-border-color: var(--amplify-colors-border-primary);
+--amplify-components-storagemanager-dropzone-border-style: dashed;
+--amplify-components-storagemanager-dropzone-border-width: var(--amplify-border-widths-small);
+--amplify-components-storagemanager-dropzone-gap: var(--amplify-space-small);
+--amplify-components-storagemanager-dropzone-padding-block: var(--amplify-space-xl);
+--amplify-components-storagemanager-dropzone-padding-inline: var(--amplify-space-large);
+--amplify-components-storagemanager-dropzone-text-align: center;
+--amplify-components-storagemanager-dropzone-active-background-color: var(--amplify-colors-brand-primary-10);
+--amplify-components-storagemanager-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
+--amplify-components-storagemanager-dropzone-active-border-color: var(--amplify-colors-border-pressed);
+--amplify-components-storagemanager-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
+--amplify-components-storagemanager-dropzone-active-border-width: var(--amplify-border-widths-medium);
+--amplify-components-storagemanager-dropzone-icon-color: var(--amplify-colors-border-primary);
+--amplify-components-storagemanager-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
+--amplify-components-storagemanager-dropzone-text-color: var(--amplify-colors-font-tertiary);
+--amplify-components-storagemanager-dropzone-text-font-size: var(--amplify-font-sizes-medium);
+--amplify-components-storagemanager-dropzone-text-font-weight: var(--amplify-font-weights-bold);
+--amplify-components-storagemanager-file-background-color: var(--amplify-colors-background-primary);
+--amplify-components-storagemanager-file-border-radius: var(--amplify-radii-small);
+--amplify-components-storagemanager-file-border-color: var(--amplify-colors-border-primary);
+--amplify-components-storagemanager-file-border-style: solid;
+--amplify-components-storagemanager-file-border-width: var(--amplify-border-widths-small);
+--amplify-components-storagemanager-file-padding-block: var(--amplify-space-xs);
+--amplify-components-storagemanager-file-padding-inline: var(--amplify-space-small);
+--amplify-components-storagemanager-file-gap: var(--amplify-space-small);
+--amplify-components-storagemanager-file-align-items: baseline;
+--amplify-components-storagemanager-file-name-font-size: var(--amplify-font-sizes-medium);
+--amplify-components-storagemanager-file-name-font-weight: var(--amplify-font-weights-bold);
+--amplify-components-storagemanager-file-name-color: var(--amplify-colors-font-primary);
+--amplify-components-storagemanager-file-size-font-size: var(--amplify-font-sizes-small);
+--amplify-components-storagemanager-file-size-font-weight: var(--amplify-font-weights-normal);
+--amplify-components-storagemanager-file-size-color: var(--amplify-colors-font-tertiary);
+--amplify-components-storagemanager-file-image-width: var(--amplify-space-xxl);
+--amplify-components-storagemanager-file-image-height: var(--amplify-space-xxl);
+--amplify-components-storagemanager-file-image-background-color: var(--amplify-colors-background-secondary);
+--amplify-components-storagemanager-file-image-color: var(--amplify-colors-font-tertiary);
+--amplify-components-storagemanager-file-image-border-radius: var(--amplify-radii-small);
+--amplify-components-storagemanager-loader-stroke-linecap: round;
+--amplify-components-storagemanager-loader-stroke-empty: var(--amplify-colors-border-secondary);
+--amplify-components-storagemanager-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
+--amplify-components-storagemanager-loader-stroke-width: var(--amplify-border-widths-large);
+--amplify-components-storagemanager-previewer-background-color: var(--amplify-colors-background-primary);
+--amplify-components-storagemanager-previewer-border-color: var(--amplify-colors-border-primary);
+--amplify-components-storagemanager-previewer-border-style: solid;
+--amplify-components-storagemanager-previewer-border-width: var(--amplify-border-widths-small);
+--amplify-components-storagemanager-previewer-border-radius: var(--amplify-radii-small);
+--amplify-components-storagemanager-previewer-padding-block: var(--amplify-space-zero);
+--amplify-components-storagemanager-previewer-padding-inline: var(--amplify-space-zero);
+--amplify-components-storagemanager-previewer-max-height: 40rem;
+--amplify-components-storagemanager-previewer-max-width: auto;
+--amplify-components-storagemanager-previewer-text-font-size: var(--amplify-font-sizes-medium);
+--amplify-components-storagemanager-previewer-text-font-weight: var(--amplify-font-weights-bold);
+--amplify-components-storagemanager-previewer-text-color: var(--amplify-colors-font-primary);
+--amplify-components-storagemanager-previewer-body-padding-block: var(--amplify-space-medium);
+--amplify-components-storagemanager-previewer-body-padding-inline: var(--amplify-space-medium);
+--amplify-components-storagemanager-previewer-body-gap: var(--amplify-space-small);
+--amplify-components-storagemanager-previewer-footer-border-color: var(--amplify-colors-border-secondary);
+--amplify-components-storagemanager-previewer-footer-border-style: solid;
+--amplify-components-storagemanager-previewer-footer-border-width: var(--amplify-border-widths-small);
+--amplify-components-storagemanager-previewer-footer-padding-block: var(--amplify-space-medium);
+--amplify-components-storagemanager-previewer-footer-padding-inline: var(--amplify-space-medium);
+--amplify-components-storagemanager-previewer-footer-justify-content: space-between;
+--amplify-components-storagemanager-filelist-flex-direction: column;
+--amplify-components-storagemanager-filelist-gap: var(--amplify-space-small);
 --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
 --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
 --amplify-components-switchfield-font-size: var(--amplify-font-sizes-medium);

package/dist/types/helpers/storage/fileUploader/utils/uploader.d.ts

@@ -1,5 +1,5 @@
-import { StorageAccessLevel } from '@aws-amplify/storage';
-export declare function uploadFile({ file, fileName, level, progressCallback, errorCallback, completeCallback, isResumable, ...rest }: {
+import { StorageAccessLevel, PutResult } from '@aws-amplify/storage';
+export declare function uploadFile({ file, fileName, level, progressCallback, errorCallback, completeCallback, isResumable, provider, ...rest }: {
     file: File;
     fileName: string;
     level: StorageAccessLevel;
@@ -8,11 +8,10 @@ export declare function uploadFile({ file, fileName, level, progressCallback, er
         loaded: number;
         total: number;
     }) => void;
-    errorCallback: (err: string) => void;
-    completeCallback: (event: {
-        key?: string;
-    }) => void;
-}): Promise<void> | import("@aws-amplify/storage").UploadTask;
+    errorCallback: (error: string) => void;
+    completeCallback: (event: PutResult) => void;
+    provider?: string;
+}): Promise<any>;
 /**
  * Format bytes as human-readable text.
  *

package/dist/types/theme/tokens/components/index.d.ts

@@ -37,6 +37,7 @@ import { SelectTokens } from './select';
 import { SelectFieldTokens } from './selectField';
 import { SliderFieldTokens } from './sliderField';
 import { StepperFieldTokens } from './stepperField';
+import { StorageManagerTokens } from './storagemanager';
 import { SwitchFieldTokens } from './switchField';
 import { TableTokens } from './table';
 import { TabsTokens } from './tabs';
@@ -86,6 +87,7 @@ declare type BaseComponentTokens<Output extends OutputVariantKey> = {
     selectfield?: SelectFieldTokens<Output>;
     sliderfield?: SliderFieldTokens<Output>;
     stepperfield?: StepperFieldTokens<Output>;
+    storagemanager?: StorageManagerTokens<Output>;
     switchfield?: SwitchFieldTokens<Output>;
     table?: TableTokens<Output>;
     tabs?: TabsTokens<Output>;

package/dist/types/theme/tokens/components/storagemanager.d.ts

@@ -0,0 +1,6 @@
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+import { FileUploaderTokens } from './fileUploader';
+export interface StorageManagerTokens<OutputType extends OutputVariantKey> extends Omit<FileUploaderTokens<OutputType>, 'body' | 'footer'> {
+    filelist?: DesignTokenProperties<'flexDirection' | 'gap'>;
+}
+export declare const storagemanager: Required<StorageManagerTokens<'default'>>;

package/dist/types/types/primitives/componentClassName.d.ts

@@ -121,6 +121,23 @@ export declare enum ComponentClassName {
     StepperFieldButtonDecrease = "amplify-stepperfield__button--decrease",
     StepperFieldButtonIncrease = "amplify-stepperfield__button--increase",
     StepperFieldInput = "amplify-stepperfield__input",
+    StorageManager = "amplify-storagemanager",
+    StorageManagerDropZone = "amplify-storagemanager__dropzone",
+    StorageManagerDropZoneIcon = "amplify-storagemanager__dropzone__icon",
+    StorageManagerDropZoneText = "amplify-storagemanager__dropzone__text",
+    StorageManagerFilePicker = "amplify-storagemanager__file__picker",
+    StorageManagerFile = "amplify-storagemanager__file",
+    StorageManagerFileWrapper = "amplify-storagemanager__file__wrapper",
+    StorageManagerFileList = "amplify-storagemanager__file__list",
+    StorageManagerFileName = "amplify-storagemanager__file__name",
+    StorageManagerFileSize = "amplify-storagemanager__file__size",
+    StorageManagerFileInfo = "amplify-storagemanager__file__info",
+    StorageManagerFileImage = "amplify-storagemanager__file__image",
+    StorageManagerFileMain = "amplify-storagemanager__file__main",
+    StorageManagerFileStatus = "amplify-storagemanager__file__status",
+    StorageManagerLoader = "amplify-storagemanager__loader",
+    StorageManagerPreviewer = "amplify-storagemanager__previewer",
+    StorageManagerPreviewerText = "amplify-storagemanager__previewer__text",
     SwitchField = "amplify-switchfield",
     SwitchLabel = "amplify-switch-label",
     SwitchThumb = "amplify-switch-thumb",