@aws-amplify/ui-react 4.4.3 → 4.5.0

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;
 }
@@ -4402,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/types/components/Authenticator/VerifyUser/ConfirmVerifyUser.d.ts

@@ -3,5 +3,5 @@ import { RouteProps } from '../RouteContainer';
 export declare const ConfirmVerifyUser: {
     ({ className, variation, }: RouteProps): JSX.Element;
     Header(): JSX.Element;
-    Footer(): JSX.Element;
+    Footer(): JSX.Element | null;
 };

package/dist/types/components/InAppMessaging/InAppMessageDisplay/InAppMessageDisplay.d.ts

@@ -3,7 +3,7 @@ import { InAppMessageDisplayProps } from './types';
 declare function InAppMessageDisplay({ components: overrideComponents, }: InAppMessageDisplayProps): JSX.Element;
 declare namespace InAppMessageDisplay {
     var BannerMessage: typeof import("../BannerMessage").BannerMessage;
-    var CarouselMessage: <P>(_: P) => any;
+    var CarouselMessage: <P>(_: P) => null;
     var FullScreenMessage: typeof import("../FullScreenMessage").FullScreenMessage;
     var ModalMessage: typeof import("../ModalMessage").ModalMessage;
 }

package/dist/types/hooks/actions/shared/useTypeCastFields.d.ts

@@ -5,11 +5,11 @@ interface UseTypeCastFieldsProps<Model extends PersistentModel> {
     modelName: string;
     schema?: Schema;
 }
-declare type UseTypeCastFieldsReturn<Model> = ModelInit<Model, PersistentModelMetaData<Model>> | undefined;
+declare type UseTypeCastFieldsReturn<Model extends PersistentModel> = ModelInit<Model, PersistentModelMetaData<Model>>;
 /**
  * Optimistically casts field string values to types required by
  * datastore based on the schema type
  * @see: See https://docs.aws.amazon.com/appsync/latest/devguide/scalars.html
  */
-export declare const useTypeCastFields: <Model extends Readonly<Record<string, any>>>({ fields, modelName, schema, }: UseTypeCastFieldsProps<Model>) => ModelInit<Model, PersistentModelMetaData<Model>>;
+export declare const useTypeCastFields: <Model extends Readonly<Record<string, any>>>({ fields, modelName, schema, }: UseTypeCastFieldsProps<Model>) => UseTypeCastFieldsReturn<Model>;
 export {};

package/dist/types/primitives/Menu/MenuButton.d.ts

@@ -4,5 +4,5 @@ import { ButtonProps } from '../types';
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/menu)
  */
 export declare const MenuButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "as"> & {
-    as?: import("../types").ElementType;
+    as?: import("../types").ElementType | undefined;
 } & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "area" | "isDisabled" | "id" | "className" | "testId" | "inert" | "alignSelf" | "backgroundColor" | "backgroundImage" | "border" | "borderRadius" | "bottom" | "boxShadow" | "color" | "display" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "height" | "left" | "letterSpacing" | "lineHeight" | "margin" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "overflow" | "padding" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "textDecoration" | "textTransform" | "top" | "transform" | "transformOrigin" | "width" | "whiteSpace" | "flex" | "order" | "grow" | "shrink" | "basis" | "column" | "columnEnd" | "columnSpan" | "columnStart" | "row" | "rowEnd" | "rowSpan" | "rowStart" | "ariaLabel" | "ariaValuetext" | "role" | "direction" | "wrap" | "alignItems" | "alignContent" | "justifyContent" | "gap" | "columnGap" | "rowGap" | "variation" | "size" | "type" | "isLoading" | "isFullWidth" | "loadingText" | "as" | "style" | "onClick"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/primitives/StepperField/useStepper.d.ts

@@ -17,6 +17,6 @@ interface UseStepper extends Required<Pick<StepperFieldProps, 'step' | 'value'>>
     shouldDisableIncreaseButton: boolean;
 }
 export declare const useStepper: ({ defaultValue, value: controlledValue, step, max, min, isDisabled, isReadOnly, onChange, onDecrease, onIncrease, onStepChange, }: StepperFieldProps & {
-    onChange?: ChangeHandler;
+    onChange?: ChangeHandler | undefined;
 }) => UseStepper;
 export {};

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

@@ -4,7 +4,7 @@ import { ElementType, ViewProps } from '../types';
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/view)
  */
 export declare const View: React.ForwardRefExoticComponent<Pick<Omit<ViewProps, "as"> & {
-    as?: ElementType;
+    as?: ElementType | undefined;
 } & Omit<Omit<any, "ref">, "area" | "isDisabled" | "id" | "className" | "testId" | "inert" | "alignSelf" | "backgroundColor" | "backgroundImage" | "border" | "borderRadius" | "bottom" | "boxShadow" | "color" | "display" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "height" | "left" | "letterSpacing" | "lineHeight" | "margin" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "overflow" | "padding" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "textDecoration" | "textTransform" | "top" | "transform" | "transformOrigin" | "width" | "whiteSpace" | "flex" | "order" | "grow" | "shrink" | "basis" | "column" | "columnEnd" | "columnSpan" | "columnStart" | "row" | "rowEnd" | "rowSpan" | "rowStart" | "ariaLabel" | "ariaValuetext" | "role" | "as" | "style"> & {
-    ref?: React.Ref<HTMLImageElement | HTMLElement | HTMLButtonElement | HTMLInputElement | SVGPathElement | SVGElement | HTMLSelectElement | SVGSymbolElement | HTMLObjectElement | HTMLAreaElement | HTMLSlotElement | HTMLTitleElement | HTMLFormElement | HTMLLabelElement | SVGPatternElement | SVGClipPathElement | SVGFilterElement | SVGMaskElement | HTMLLinkElement | HTMLTrackElement | HTMLMapElement | HTMLTimeElement | HTMLDialogElement | HTMLOptionElement | SVGSwitchElement | HTMLTableElement | HTMLStyleElement | SVGTextElement | SVGImageElement | HTMLAnchorElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLLegendElement | HTMLLIElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOutputElement | HTMLParagraphElement | HTMLParamElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSourceElement | HTMLSpanElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableDataCellElement | HTMLTextAreaElement | HTMLTableHeaderCellElement | HTMLTableRowElement | HTMLUListElement | HTMLVideoElement | HTMLWebViewElement | SVGSVGElement | SVGCircleElement | SVGDefsElement | SVGDescElement | SVGEllipseElement | SVGFEBlendElement | SVGFEColorMatrixElement | SVGFEComponentTransferElement | SVGFECompositeElement | SVGFEConvolveMatrixElement | SVGFEDiffuseLightingElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEDropShadowElement | SVGFEFloodElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGFEGaussianBlurElement | SVGFEImageElement | SVGFEMergeElement | SVGFEMergeNodeElement | SVGFEMorphologyElement | SVGFEOffsetElement | SVGFEPointLightElement | SVGFESpecularLightingElement | SVGFESpotLightElement | SVGFETileElement | SVGFETurbulenceElement | SVGForeignObjectElement | SVGGElement | SVGLineElement | SVGLinearGradientElement | SVGMarkerElement | SVGMetadataElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGStopElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement | SVGViewElement>;
+    ref?: React.Ref<HTMLImageElement | HTMLElement | HTMLButtonElement | HTMLInputElement | SVGPathElement | SVGElement | HTMLSelectElement | SVGSymbolElement | HTMLObjectElement | HTMLAreaElement | HTMLSlotElement | HTMLTitleElement | HTMLFormElement | HTMLLabelElement | SVGPatternElement | SVGClipPathElement | SVGFilterElement | SVGMaskElement | HTMLLinkElement | HTMLTrackElement | HTMLMapElement | HTMLTimeElement | HTMLDialogElement | HTMLOptionElement | SVGSwitchElement | HTMLTableElement | HTMLStyleElement | SVGTextElement | SVGImageElement | HTMLAnchorElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLLegendElement | HTMLLIElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOutputElement | HTMLParagraphElement | HTMLParamElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSourceElement | HTMLSpanElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableDataCellElement | HTMLTextAreaElement | HTMLTableHeaderCellElement | HTMLTableRowElement | HTMLUListElement | HTMLVideoElement | HTMLWebViewElement | SVGSVGElement | SVGCircleElement | SVGDefsElement | SVGDescElement | SVGEllipseElement | SVGFEBlendElement | SVGFEColorMatrixElement | SVGFEComponentTransferElement | SVGFECompositeElement | SVGFEConvolveMatrixElement | SVGFEDiffuseLightingElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEDropShadowElement | SVGFEFloodElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGFEGaussianBlurElement | SVGFEImageElement | SVGFEMergeElement | SVGFEMergeNodeElement | SVGFEMorphologyElement | SVGFEOffsetElement | SVGFEPointLightElement | SVGFESpecularLightingElement | SVGFESpotLightElement | SVGFETileElement | SVGFETurbulenceElement | SVGForeignObjectElement | SVGGElement | SVGLineElement | SVGLinearGradientElement | SVGMarkerElement | SVGMetadataElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGStopElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement | SVGViewElement> | undefined;
 }, string | number | symbol> & React.RefAttributes<HTMLImageElement | HTMLElement | HTMLButtonElement | HTMLInputElement | SVGPathElement | SVGElement | HTMLSelectElement | SVGSymbolElement | HTMLObjectElement | HTMLAreaElement | HTMLSlotElement | HTMLTitleElement | HTMLFormElement | HTMLLabelElement | SVGPatternElement | SVGClipPathElement | SVGFilterElement | SVGMaskElement | HTMLLinkElement | HTMLTrackElement | HTMLMapElement | HTMLTimeElement | HTMLDialogElement | HTMLOptionElement | SVGSwitchElement | HTMLTableElement | HTMLStyleElement | SVGTextElement | SVGImageElement | HTMLAnchorElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLLegendElement | HTMLLIElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOutputElement | HTMLParagraphElement | HTMLParamElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSourceElement | HTMLSpanElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableDataCellElement | HTMLTextAreaElement | HTMLTableHeaderCellElement | HTMLTableRowElement | HTMLUListElement | HTMLVideoElement | HTMLWebViewElement | SVGSVGElement | SVGCircleElement | SVGDefsElement | SVGDescElement | SVGEllipseElement | SVGFEBlendElement | SVGFEColorMatrixElement | SVGFEComponentTransferElement | SVGFECompositeElement | SVGFEConvolveMatrixElement | SVGFEDiffuseLightingElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEDropShadowElement | SVGFEFloodElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGFEGaussianBlurElement | SVGFEImageElement | SVGFEMergeElement | SVGFEMergeNodeElement | SVGFEMorphologyElement | SVGFEOffsetElement | SVGFEPointLightElement | SVGFESpecularLightingElement | SVGFESpotLightElement | SVGFETileElement | SVGFETurbulenceElement | SVGForeignObjectElement | SVGGElement | SVGLineElement | SVGLinearGradientElement | SVGMarkerElement | SVGMetadataElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGStopElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement | SVGViewElement>>;

package/dist/types/primitives/shared/responsive/utils.d.ts

@@ -3,4 +3,4 @@ export declare const getValueAtCurrentBreakpoint: <Value = string | number>({ br
     values: Partial<Record<"small" | "medium" | "large" | "xl" | "xxl" | "base", Value>> | Value[];
     breakpoint: Breakpoint;
     breakpoints: Breakpoints;
-}) => string | number | Value;
+}) => string | number | Value | null;

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

@@ -1,6 +1,6 @@
 import { ComponentClassName } from '@aws-amplify/ui';
-declare type ComponentNameKey = 'Alert' | 'Autocomplete' | 'Badge' | 'Button' | 'Button' | 'Card' | 'Checkbox' | 'CheckboxField' | 'Collection' | 'PhoneNumberField' | 'Divider' | 'Expander' | 'FileUploader' | 'Flex' | 'Grid' | 'Heading' | 'HighlightMatch' | 'Icon' | 'Image' | 'Link' | 'Loader' | 'Menu' | 'Pagination' | 'PasswordField' | 'PhoneNumberField' | 'Placeholder' | 'Radio' | 'RadioGroupField' | 'Rating' | 'ScrollView' | 'SearchField' | 'Select' | 'SliderField' | 'SelectField' | 'StepperField' | 'SwitchField' | 'Table' | 'Tabs' | 'Text' | 'TextAreaField' | 'TextField' | 'ToggleButton' | 'ToggleButtonGroup' | 'VisuallyHidden';
-declare type ComponentClassNameKey = 'Alert' | 'AlertIcon' | 'AlertHeading' | 'AlertBody' | 'AlertDismiss' | 'Autocomplete' | 'AutocompleteMenu' | 'AutocompleteMenuEmpty' | 'AutocompleteMenuFooter' | 'AutocompleteMenuHeader' | 'AutocompleteMenuLoading' | 'AutocompleteMenuOption' | 'AutocompleteMenuOptions' | 'Badge' | 'Button' | 'ButtonGroup' | 'ButtonLoaderWrapper' | 'Card' | 'Checkbox' | 'CheckboxButton' | 'CheckboxIcon' | 'CheckboxInput' | 'CheckboxLabel' | 'CheckboxField' | 'Collection' | 'CollectionItems' | 'CollectionSearch' | 'CollectionPagination' | 'CountryCodeSelect' | 'DialCodeSelect' | 'Divider' | 'DividerLabel' | 'Expander' | 'ExpanderContent' | 'ExpanderContentText' | 'ExpanderHeader' | 'ExpanderIcon' | 'ExpanderItem' | 'ExpanderTrigger' | 'Field' | 'FieldDescription' | 'FieldErrorMessage' | 'FieldGroup' | 'FieldGroupControl' | 'FieldGroupOuterEnd' | 'FieldGroupOuterStart' | 'FieldGroupInnerEnd' | 'FieldGroupInnerStart' | 'FieldGroupIcon' | 'FieldGroupIconButton' | 'FieldGroupHasInnerEnd' | 'FieldGroupHasInnerStart' | 'FieldShowPassword' | 'FieldGroupFieldWrapper' | 'FileUploaderDropZone' | 'FileUploaderDropZoneIcon' | 'FileUploaderDropZoneText' | 'FileUploaderDropZoneButton' | 'FileUploaderFile' | 'FileUploaderFileWrapper' | 'FileUploaderFileName' | 'FileUploaderFileSize' | 'FileUploaderFileInfo' | 'FileUploaderFileStatus' | 'FileUploaderFileImage' | 'FileUploaderFileMain' | 'FileUploaderLoader' | 'FileUploaderPreviewer' | 'FileUploaderPreviewerText' | 'FileUploaderPreviewerBody' | 'FileUploaderPreviewerFooter' | 'FileUploaderPreviewerFooterActions' | 'Flex' | 'Grid' | 'Heading' | 'HighlightMatch' | 'HighlightMatchHighlighted' | 'Icon' | 'Image' | 'Input' | 'Label' | 'Link' | 'Loader' | 'LoaderDeterminate' | 'LoaderPercentageText' | 'MenuContent' | 'MenuContentWrapper' | 'MenuItem' | 'MenuTrigger' | 'Pagination' | 'PaginationItemButton' | 'PaginationItemCurrent' | 'PaginationItemEllipsis' | 'PasswordField' | 'PhoneNumberField' | 'Placeholder' | 'Radio' | 'RadioButton' | 'RadioInput' | 'RadioLabel' | 'RadioGroupField' | 'RadioGroup' | 'Rating' | 'ScrollView' | 'SearchField' | 'SearchFieldClear' | 'SearchFieldSearch' | 'Select' | 'SelectField' | 'SelectWrapper' | 'SelectIconWrapper' | 'SliderField' | 'SliderFieldGroup' | 'SliderFieldLabel' | 'SliderFieldRange' | 'SliderFieldRoot' | 'SliderFieldThumb' | 'SliderFieldTrack' | 'StepperField' | 'StepperFieldButtonDecrease' | 'StepperFieldButtonIncrease' | 'StepperFieldInput' | 'SwitchField' | 'SwitchLabel' | 'SwitchThumb' | 'SwitchTrack' | 'SwitchWrapper' | 'Table' | 'TableCaption' | 'TableBody' | 'TableTd' | 'TableTh' | 'TableFoot' | 'TableHead' | 'TableRow' | 'Tabs' | 'TabItems' | 'Text' | 'Textarea' | 'TextAreaField' | 'TextField' | 'ToggleButton' | 'ToggleButtonGroup' | 'VisuallyHidden';
+declare type ComponentNameKey = 'Alert' | 'Autocomplete' | 'Badge' | 'Button' | 'Button' | 'Card' | 'Checkbox' | 'CheckboxField' | 'Collection' | 'PhoneNumberField' | 'Divider' | 'Expander' | 'FileUploader' | 'Flex' | 'Grid' | 'Heading' | 'HighlightMatch' | 'Icon' | 'Image' | 'Link' | 'Loader' | 'Menu' | 'Pagination' | 'PasswordField' | 'PhoneNumberField' | 'Placeholder' | 'Radio' | 'RadioGroupField' | 'Rating' | 'ScrollView' | 'SearchField' | 'Select' | 'SliderField' | 'SelectField' | 'StepperField' | 'StorageManager' | 'SwitchField' | 'Table' | 'Tabs' | 'Text' | 'TextAreaField' | 'TextField' | 'ToggleButton' | 'ToggleButtonGroup' | 'VisuallyHidden';
+declare type ComponentClassNameKey = 'Alert' | 'AlertIcon' | 'AlertHeading' | 'AlertBody' | 'AlertDismiss' | 'Autocomplete' | 'AutocompleteMenu' | 'AutocompleteMenuEmpty' | 'AutocompleteMenuFooter' | 'AutocompleteMenuHeader' | 'AutocompleteMenuLoading' | 'AutocompleteMenuOption' | 'AutocompleteMenuOptions' | 'Badge' | 'Button' | 'ButtonGroup' | 'ButtonLoaderWrapper' | 'Card' | 'Checkbox' | 'CheckboxButton' | 'CheckboxIcon' | 'CheckboxInput' | 'CheckboxLabel' | 'CheckboxField' | 'Collection' | 'CollectionItems' | 'CollectionSearch' | 'CollectionPagination' | 'CountryCodeSelect' | 'DialCodeSelect' | 'Divider' | 'DividerLabel' | 'Expander' | 'ExpanderContent' | 'ExpanderContentText' | 'ExpanderHeader' | 'ExpanderIcon' | 'ExpanderItem' | 'ExpanderTrigger' | 'Field' | 'FieldDescription' | 'FieldErrorMessage' | 'FieldGroup' | 'FieldGroupControl' | 'FieldGroupOuterEnd' | 'FieldGroupOuterStart' | 'FieldGroupInnerEnd' | 'FieldGroupInnerStart' | 'FieldGroupIcon' | 'FieldGroupIconButton' | 'FieldGroupHasInnerEnd' | 'FieldGroupHasInnerStart' | 'FieldShowPassword' | 'FieldGroupFieldWrapper' | 'FileUploaderDropZone' | 'FileUploaderDropZoneIcon' | 'FileUploaderDropZoneText' | 'FileUploaderDropZoneButton' | 'FileUploaderFile' | 'FileUploaderFileWrapper' | 'FileUploaderFileName' | 'FileUploaderFileSize' | 'FileUploaderFileInfo' | 'FileUploaderFileStatus' | 'FileUploaderFileImage' | 'FileUploaderFileMain' | 'FileUploaderLoader' | 'FileUploaderPreviewer' | 'FileUploaderPreviewerText' | 'FileUploaderPreviewerBody' | 'FileUploaderPreviewerFooter' | 'FileUploaderPreviewerFooterActions' | 'Flex' | 'Grid' | 'Heading' | 'HighlightMatch' | 'HighlightMatchHighlighted' | 'Icon' | 'Image' | 'Input' | 'Label' | 'Link' | 'Loader' | 'LoaderDeterminate' | 'LoaderPercentageText' | 'MenuContent' | 'MenuContentWrapper' | 'MenuItem' | 'MenuTrigger' | 'Pagination' | 'PaginationItemButton' | 'PaginationItemCurrent' | 'PaginationItemEllipsis' | 'PasswordField' | 'PhoneNumberField' | 'Placeholder' | 'Radio' | 'RadioButton' | 'RadioInput' | 'RadioLabel' | 'RadioGroupField' | 'RadioGroup' | 'Rating' | 'ScrollView' | 'SearchField' | 'SearchFieldClear' | 'SearchFieldSearch' | 'Select' | 'SelectField' | 'SelectWrapper' | 'SelectIconWrapper' | 'SliderField' | 'SliderFieldGroup' | 'SliderFieldLabel' | 'SliderFieldRange' | 'SliderFieldRoot' | 'SliderFieldThumb' | 'SliderFieldTrack' | 'StepperField' | 'StepperFieldButtonDecrease' | 'StepperFieldButtonIncrease' | 'StepperFieldInput' | 'StorageManager' | 'StorageManagerDropZone' | 'StorageManagerDropZoneIcon' | 'StorageManagerDropZoneText' | 'StorageManagerFilePicker' | 'StorageManagerFile' | 'StorageManagerFileWrapper' | 'StorageManagerFileList' | 'StorageManagerFileName' | 'StorageManagerFileSize' | 'StorageManagerFileInfo' | 'StorageManagerFileStatus' | 'StorageManagerFileImage' | 'StorageManagerFileMain' | 'StorageManagerLoader' | 'StorageManagerPreviewer' | 'StorageManagerPreviewerText' | 'SwitchField' | 'SwitchLabel' | 'SwitchThumb' | 'SwitchTrack' | 'SwitchWrapper' | 'Table' | 'TableCaption' | 'TableBody' | 'TableTd' | 'TableTh' | 'TableFoot' | 'TableHead' | 'TableRow' | 'Tabs' | 'TabItems' | 'Text' | 'Textarea' | 'TextAreaField' | 'TextField' | 'ToggleButton' | 'ToggleButtonGroup' | 'VisuallyHidden';
 interface ComponentClassNameMetadata {
     className: ComponentClassName;
     components?: ComponentNameKey[];