@aws-amplify/ui-react 5.2.0 → 5.3.0

package/dist/styles.css

@@ -531,6 +531,40 @@
   --amplify-components-divider-small-border-width: var(--amplify-border-widths-small);
   --amplify-components-divider-large-border-width: var(--amplify-border-widths-large);
   --amplify-components-divider-opacity: var(--amplify-opacities-60);
+  --amplify-components-dropzone-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-dropzone-border-radius: var(--amplify-radii-small);
+  --amplify-components-dropzone-border-color: var(--amplify-colors-border-primary);
+  --amplify-components-dropzone-border-style: dashed;
+  --amplify-components-dropzone-border-width: var(--amplify-border-widths-small);
+  --amplify-components-dropzone-color: var(--amplify-colors-font-primary);
+  --amplify-components-dropzone-gap: var(--amplify-space-small);
+  --amplify-components-dropzone-padding-block: var(--amplify-space-xl);
+  --amplify-components-dropzone-padding-inline: var(--amplify-space-large);
+  --amplify-components-dropzone-text-align: center;
+  --amplify-components-dropzone-active-background-color: var(--amplify-colors-brand-primary-10);
+  --amplify-components-dropzone-active-border-radius: var(--amplify-components-dropzone-border-radius);
+  --amplify-components-dropzone-active-border-color: var(--amplify-colors-border-pressed);
+  --amplify-components-dropzone-active-border-style: var(--amplify-components-dropzone-border-style);
+  --amplify-components-dropzone-active-border-width: var(--amplify-components-dropzone-border-width);
+  --amplify-components-dropzone-active-color: var(--amplify-colors-font-primary);
+  --amplify-components-dropzone-disabled-background-color: var(--amplify-colors-background-disabled);
+  --amplify-components-dropzone-disabled-border-radius: var(--amplify-components-dropzone-border-radius);
+  --amplify-components-dropzone-disabled-border-color: var(--amplify-colors-border-disabled);
+  --amplify-components-dropzone-disabled-border-style: var(--amplify-components-dropzone-border-style);
+  --amplify-components-dropzone-disabled-border-width: var(--amplify-components-dropzone-border-width);
+  --amplify-components-dropzone-disabled-color: var(--amplify-colors-font-disabled);
+  --amplify-components-dropzone-accepted-background-color: var(--amplify-colors-background-success);
+  --amplify-components-dropzone-accepted-border-radius: var(--amplify-components-dropzone-border-radius);
+  --amplify-components-dropzone-accepted-border-color: var(--amplify-colors-border-success);
+  --amplify-components-dropzone-accepted-border-style: var(--amplify-components-dropzone-border-style);
+  --amplify-components-dropzone-accepted-border-width: var(--amplify-components-dropzone-border-width);
+  --amplify-components-dropzone-accepted-color: var(--amplify-colors-font-success);
+  --amplify-components-dropzone-rejected-background-color: var(--amplify-colors-background-error);
+  --amplify-components-dropzone-rejected-border-radius: var(--amplify-components-dropzone-border-radius);
+  --amplify-components-dropzone-rejected-border-color: var(--amplify-colors-border-pressed);
+  --amplify-components-dropzone-rejected-border-style: var(--amplify-components-dropzone-border-style);
+  --amplify-components-dropzone-rejected-border-width: var(--amplify-components-dropzone-border-width);
+  --amplify-components-dropzone-rejected-color: var(--amplify-colors-font-error);
   --amplify-components-expander-display: block;
   --amplify-components-expander-background-color: var(--amplify-colors-background-primary);
   --amplify-components-expander-border-radius: var(--amplify-radii-medium);
@@ -625,6 +659,24 @@
   --amplify-components-fieldmessages-description-color: var(--amplify-colors-font-secondary);
   --amplify-components-fieldmessages-description-font-style: italic;
   --amplify-components-fieldmessages-description-font-size: var(--amplify-font-sizes-small);
+  --amplify-components-fieldset-background-color: transparent;
+  --amplify-components-fieldset-border-radius: var(--amplify-radii-xs);
+  --amplify-components-fieldset-flex-direction: column;
+  --amplify-components-fieldset-gap: var(--amplify-components-field-gap);
+  --amplify-components-fieldset-legend-color: var(--amplify-colors-font-primary);
+  --amplify-components-fieldset-legend-font-size: var(--amplify-components-field-font-size);
+  --amplify-components-fieldset-legend-font-weight: var(--amplify-font-weights-bold);
+  --amplify-components-fieldset-legend-line-height: var(--amplify-line-heights-medium);
+  --amplify-components-fieldset-legend-small-font-size: var(--amplify-components-field-small-font-size);
+  --amplify-components-fieldset-legend-large-font-size: var(--amplify-components-field-large-font-size);
+  --amplify-components-fieldset-outlined-padding: var(--amplify-space-medium);
+  --amplify-components-fieldset-outlined-border-color: var(--amplify-colors-neutral-40);
+  --amplify-components-fieldset-outlined-border-width: var(--amplify-border-widths-small);
+  --amplify-components-fieldset-outlined-border-style: solid;
+  --amplify-components-fieldset-outlined-small-padding: var(--amplify-space-small);
+  --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large);
+  --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap);
+  --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap);
   --amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary);
   --amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small);
   --amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary);
@@ -726,6 +778,10 @@
   --amplify-components-inappmessaging-dialog-width: 30vw;
   --amplify-components-inappmessaging-header-font-size: var(--amplify-font-sizes-medium);
   --amplify-components-inappmessaging-header-font-weight: var(--amplify-font-weights-extrabold);
+  --amplify-components-input-color: var(--amplify-components-fieldcontrol-color);
+  --amplify-components-input-border-color: var(--amplify-components-fieldcontrol-border-color);
+  --amplify-components-input-font-size: var(--amplify-components-fieldcontrol-font-size);
+  --amplify-components-input-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
   --amplify-components-link-active-color: var(--amplify-colors-font-active);
   --amplify-components-link-color: var(--amplify-colors-font-interactive);
   --amplify-components-link-focus-color: var(--amplify-colors-font-focus);
@@ -775,6 +831,66 @@
   --amplify-components-menu-item-min-height: 2.5rem;
   --amplify-components-menu-item-padding-inline-start: var(--amplify-space-medium);
   --amplify-components-menu-item-padding-inline-end: var(--amplify-space-medium);
+  --amplify-components-message-align-items: center;
+  --amplify-components-message-background-color: var(--amplify-colors-background-tertiary);
+  --amplify-components-message-border-color: transparent;
+  --amplify-components-message-border-style: solid;
+  --amplify-components-message-border-width: var(--amplify-border-widths-small);
+  --amplify-components-message-border-radius: var(--amplify-radii-xs);
+  --amplify-components-message-color: var(--amplify-colors-font-primary);
+  --amplify-components-message-justify-content: flex-start;
+  --amplify-components-message-padding-block: var(--amplify-space-small);
+  --amplify-components-message-padding-inline: var(--amplify-space-medium);
+  --amplify-components-message-line-height: var(--amplify-line-heights-small);
+  --amplify-components-message-icon-size: var(--amplify-font-sizes-xl);
+  --amplify-components-message-heading-font-size: var(--amplify-font-sizes-medium);
+  --amplify-components-message-heading-font-weight: var(--amplify-font-weights-bold);
+  --amplify-components-message-dismiss-gap: var(--amplify-space-xxs);
+  --amplify-components-message-plain-color: var(--amplify-colors-font-primary);
+  --amplify-components-message-plain-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-message-plain-border-color: transparent;
+  --amplify-components-message-plain-info-color: var(--amplify-colors-font-info);
+  --amplify-components-message-plain-info-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-message-plain-info-border-color: transparent;
+  --amplify-components-message-plain-error-color: var(--amplify-colors-font-error);
+  --amplify-components-message-plain-error-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-message-plain-error-border-color: transparent;
+  --amplify-components-message-plain-success-color: var(--amplify-colors-font-success);
+  --amplify-components-message-plain-success-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-message-plain-success-border-color: transparent;
+  --amplify-components-message-plain-warning-color: var(--amplify-colors-font-warning);
+  --amplify-components-message-plain-warning-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-message-plain-warning-border-color: transparent;
+  --amplify-components-message-outlined-color: var(--amplify-colors-font-primary);
+  --amplify-components-message-outlined-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-message-outlined-border-color: var(--amplify-colors-border-primary);
+  --amplify-components-message-outlined-info-color: var(--amplify-colors-font-info);
+  --amplify-components-message-outlined-info-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-message-outlined-info-border-color: var(--amplify-colors-border-info);
+  --amplify-components-message-outlined-error-color: var(--amplify-colors-font-error);
+  --amplify-components-message-outlined-error-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-message-outlined-error-border-color: var(--amplify-colors-border-error);
+  --amplify-components-message-outlined-success-color: var(--amplify-colors-font-success);
+  --amplify-components-message-outlined-success-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-message-outlined-success-border-color: var(--amplify-colors-border-success);
+  --amplify-components-message-outlined-warning-color: var(--amplify-colors-font-warning);
+  --amplify-components-message-outlined-warning-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-message-outlined-warning-border-color: var(--amplify-colors-border-warning);
+  --amplify-components-message-filled-color: var(--amplify-colors-font-primary);
+  --amplify-components-message-filled-background-color: var(--amplify-colors-background-secondary);
+  --amplify-components-message-filled-border-color: transparent;
+  --amplify-components-message-filled-info-color: var(--amplify-colors-font-info);
+  --amplify-components-message-filled-info-background-color: var(--amplify-colors-background-info);
+  --amplify-components-message-filled-info-border-color: transparent;
+  --amplify-components-message-filled-error-color: var(--amplify-colors-font-error);
+  --amplify-components-message-filled-error-background-color: var(--amplify-colors-background-error);
+  --amplify-components-message-filled-error-border-color: transparent;
+  --amplify-components-message-filled-success-color: var(--amplify-colors-font-success);
+  --amplify-components-message-filled-success-background-color: var(--amplify-colors-background-success);
+  --amplify-components-message-filled-success-border-color: transparent;
+  --amplify-components-message-filled-warning-color: var(--amplify-colors-font-warning);
+  --amplify-components-message-filled-warning-background-color: var(--amplify-colors-background-warning);
+  --amplify-components-message-filled-warning-border-color: transparent;
   --amplify-components-pagination-current-align-items: center;
   --amplify-components-pagination-current-justify-content: center;
   --amplify-components-pagination-current-color: var(--amplify-colors-font-inverse);
@@ -1014,12 +1130,7 @@
   --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-previewer-footer-justify-content: flex-end;
   --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);
@@ -1279,10 +1390,10 @@
   --amplify-colors-background-tertiary: var(--amplify-colors-neutral-20);
   --amplify-colors-background-quaternary: var(--amplify-colors-neutral-60);
   --amplify-colors-background-disabled: var(--amplify-colors-background-tertiary);
-  --amplify-colors-background-info: var(--amplify-colors-blue-20);
-  --amplify-colors-background-warning: var(--amplify-colors-orange-20);
-  --amplify-colors-background-error: var(--amplify-colors-red-20);
-  --amplify-colors-background-success: var(--amplify-colors-green-20);
+  --amplify-colors-background-info: var(--amplify-colors-blue-10);
+  --amplify-colors-background-warning: var(--amplify-colors-orange-10);
+  --amplify-colors-background-error: var(--amplify-colors-red-10);
+  --amplify-colors-background-success: var(--amplify-colors-green-10);
   --amplify-colors-border-primary: var(--amplify-colors-neutral-60);
   --amplify-colors-border-secondary: var(--amplify-colors-neutral-40);
   --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20);
@@ -1290,6 +1401,9 @@
   --amplify-colors-border-pressed: var(--amplify-colors-brand-primary-100);
   --amplify-colors-border-focus: var(--amplify-colors-brand-primary-100);
   --amplify-colors-border-error: var(--amplify-colors-red-80);
+  --amplify-colors-border-info: var(--amplify-colors-blue-80);
+  --amplify-colors-border-success: var(--amplify-colors-green-80);
+  --amplify-colors-border-warning: var(--amplify-colors-orange-80);
   --amplify-colors-shadow-primary: hsla(210, 50%, 10%, 0.25);
   --amplify-colors-shadow-secondary: hsla(210, 50%, 10%, 0.15);
   --amplify-colors-shadow-tertiary: hsla(210, 50%, 10%, 0.05);
@@ -2659,6 +2773,52 @@ strong.amplify-text {
     transition: none;
   }
 }
+.amplify-dropzone {
+  display: block;
+  background-color: var(--amplify-components-dropzone-background-color);
+  border-color: var(--amplify-components-dropzone-border-color);
+  border-width: var(--amplify-components-dropzone-border-width);
+  border-style: var(--amplify-components-dropzone-border-style);
+  border-radius: var(--amplify-components-dropzone-border-radius);
+  color: var(--amplify-components-dropzone-color);
+  padding-block: var(--amplify-components-dropzone-padding-block);
+  padding-inline: var(--amplify-components-dropzone-padding-inline);
+  text-align: var(--amplify-components-dropzone-text-align);
+}
+.amplify-dropzone--disabled {
+  cursor: not-allowed;
+  background-color: var(--amplify-components-dropzone-disabled-background-color);
+  border-color: var(--amplify-components-dropzone-disabled-border-color);
+  border-width: var(--amplify-components-dropzone-disabled-border-width);
+  border-style: var(--amplify-components-dropzone-disabled-border-style);
+  border-radius: var(--amplify-components-dropzone-disabled-border-radius);
+  color: var(--amplify-components-dropzone-disabled-color);
+}
+.amplify-dropzone--active {
+  background-color: var(--amplify-components-dropzone-active-background-color);
+  border-color: var(--amplify-components-dropzone-active-border-color);
+  border-width: var(--amplify-components-dropzone-active-border-width);
+  border-style: var(--amplify-components-dropzone-active-border-style);
+  border-radius: var(--amplify-components-dropzone-active-border-radius);
+  color: var(--amplify-components-dropzone-active-color);
+}
+.amplify-dropzone--rejected {
+  background-color: var(--amplify-components-dropzone-rejected-background-color);
+  border-color: var(--amplify-components-dropzone-rejected-border-color);
+  border-width: var(--amplify-components-dropzone-rejected-border-width);
+  border-style: var(--amplify-components-dropzone-rejected-border-style);
+  border-radius: var(--amplify-components-dropzone-rejected-border-radius);
+  color: var(--amplify-components-dropzone-rejected-color);
+}
+.amplify-dropzone--accepted {
+  background-color: var(--amplify-components-dropzone-accepted-background-color);
+  border-color: var(--amplify-components-dropzone-accepted-border-color);
+  border-width: var(--amplify-components-dropzone-accepted-border-width);
+  border-style: var(--amplify-components-dropzone-accepted-border-style);
+  border-radius: var(--amplify-components-dropzone-accepted-border-radius);
+  color: var(--amplify-components-dropzone-accepted-color);
+}
+
 .amplify-field__description {
   color: var(--amplify-components-fieldmessages-description-color);
   font-style: var(--amplify-components-fieldmessages-description-font-style);
@@ -2757,6 +2917,18 @@ strong.amplify-text {
      -moz-user-select: text;
           user-select: text;
   display: inline-block;
+  --amplify-components-fieldcontrol-color: var(
+    --amplify-components-input-color
+  );
+  --amplify-components-fieldcontrol-border-color: var(
+    --amplify-components-input-border-color
+  );
+  --amplify-components-fieldcontrol-font-size: var(
+    --amplify-components-input-font-size
+  );
+  --amplify-components-fieldcontrol-focus-border-color: var(
+    --amplify-components-input-focus-border-color
+  );
 }
 .amplify-input:focus {
   border-color: var(--amplify-components-fieldcontrol-focus-border-color);
@@ -3827,6 +3999,44 @@ html[dir=rtl] .amplify-field-group__inner-start {
   height: 100%;
 }
 
+.amplify-fieldset {
+  background-color: var(--amplify-components-fieldset-background-color);
+  border-radius: var(--amplify-components-fieldset-border-radius);
+  flex-direction: var(--amplify-components-fieldset-flex-direction);
+  gap: var(--amplify-components-fieldset-gap);
+  /* Sizes */
+  /* Variations */
+}
+.amplify-fieldset--small {
+  gap: var(--amplify-components-fieldset-small-gap);
+}
+.amplify-fieldset--large {
+  gap: var(--amplify-components-fieldset-large-gap);
+}
+.amplify-fieldset--outlined {
+  border: var(--amplify-components-fieldset-outlined-border-width) var(--amplify-components-fieldset-outlined-border-style) var(--amplify-components-fieldset-outlined-border-color);
+  padding: var(--amplify-components-fieldset-outlined-padding);
+}
+.amplify-fieldset--outlined.amplify-fieldset--small {
+  padding: var(--amplify-components-fieldset-outlined-small-padding);
+}
+.amplify-fieldset--outlined.amplify-fieldset--large {
+  padding: var(--amplify-components-fieldset-outlined-large-padding);
+}
+
+.amplify-fieldset__legend {
+  color: var(--amplify-components-fieldset-legend-color);
+  font-weight: var(--amplify-components-fieldset-legend-font-weight);
+  line-height: var(--amplify-components-fieldset-legend-line-height);
+  font-size: var(--amplify-components-fieldset-legend-font-size);
+}
+.amplify-fieldset__legend--small {
+  font-size: var(--amplify-components-fieldset-legend-small-font-size);
+}
+.amplify-fieldset__legend--large {
+  font-size: var(--amplify-components-fieldset-legend-large-font-size);
+}
+
 .amplify-liveness-cancel-container {
   z-index: 2;
   position: absolute;
@@ -4406,6 +4616,119 @@ html[dir=rtl] .amplify-field-group__inner-start {
   }
 }
 
+.amplify-message {
+  align-items: var(--amplify-components-message-align-items);
+  background-color: var(--amplify-components-message-background-color);
+  color: var(--amplify-components-message-color);
+  justify-content: var(--amplify-components-message-justify-content);
+  padding-block: var(--amplify-components-message-padding-block);
+  padding-inline: var(--amplify-components-message-padding-inline);
+  border-color: var(--amplify-components-message-border-color);
+  border-radius: var(--amplify-components-message-border-radius);
+  border-style: var(--amplify-components-message-border-style);
+  border-width: var(--amplify-components-message-border-width);
+  line-height: var(--amplify-components-message-line-height);
+}
+.amplify-message--plain {
+  background-color: var(--amplify-components-message-plain-background-color);
+  border-color: var(--amplify-components-message-plain-border-color);
+  color: var(--amplify-components-message-plain-color);
+}
+.amplify-message--plain.amplify-message--info {
+  background-color: var(--amplify-components-message-plain-info-background-color);
+  border-color: var(--amplify-components-message-plain-info-border-color);
+  color: var(--amplify-components-message-plain-info-color);
+}
+.amplify-message--plain.amplify-message--error {
+  background-color: var(--amplify-components-message-plain-error-background-color);
+  border-color: var(--amplify-components-message-plain-error-border-color);
+  color: var(--amplify-components-message-plain-error-color);
+}
+.amplify-message--plain.amplify-message--warning {
+  background-color: var(--amplify-components-message-plain-warning-background-color);
+  border-color: var(--amplify-components-message-plain-warning-border-color);
+  color: var(--amplify-components-message-plain-warning-color);
+}
+.amplify-message--plain.amplify-message--success {
+  background-color: var(--amplify-components-message-plain-success-background-color);
+  border-color: var(--amplify-components-message-plain-success-border-color);
+  color: var(--amplify-components-message-plain-success-color);
+}
+.amplify-message--outlined {
+  background-color: var(--amplify-components-message-outlined-background-color);
+  border-color: var(--amplify-components-message-outlined-border-color);
+  color: var(--amplify-components-message-outlined-color);
+}
+.amplify-message--outlined.amplify-message--info {
+  background-color: var(--amplify-components-message-outlined-info-background-color);
+  border-color: var(--amplify-components-message-outlined-info-border-color);
+  color: var(--amplify-components-message-outlined-info-color);
+}
+.amplify-message--outlined.amplify-message--error {
+  background-color: var(--amplify-components-message-outlined-error-background-color);
+  border-color: var(--amplify-components-message-outlined-error-border-color);
+  color: var(--amplify-components-message-outlined-error-color);
+}
+.amplify-message--outlined.amplify-message--warning {
+  background-color: var(--amplify-components-message-outlined-warning-background-color);
+  border-color: var(--amplify-components-message-outlined-warning-border-color);
+  color: var(--amplify-components-message-outlined-warning-color);
+}
+.amplify-message--outlined.amplify-message--success {
+  background-color: var(--amplify-components-message-outlined-success-background-color);
+  border-color: var(--amplify-components-message-outlined-success-border-color);
+  color: var(--amplify-components-message-outlined-success-color);
+}
+.amplify-message--filled {
+  background-color: var(--amplify-components-message-filled-background-color);
+  border-color: var(--amplify-components-message-filled-border-color);
+  color: var(--amplify-components-message-filled-color);
+}
+.amplify-message--filled.amplify-message--info {
+  background-color: var(--amplify-components-message-filled-info-background-color);
+  border-color: var(--amplify-components-message-filled-info-border-color);
+  color: var(--amplify-components-message-filled-info-color);
+}
+.amplify-message--filled.amplify-message--error {
+  background-color: var(--amplify-components-message-filled-error-background-color);
+  border-color: var(--amplify-components-message-filled-error-border-color);
+  color: var(--amplify-components-message-filled-error-color);
+}
+.amplify-message--filled.amplify-message--warning {
+  background-color: var(--amplify-components-message-filled-warning-background-color);
+  border-color: var(--amplify-components-message-filled-warning-border-color);
+  color: var(--amplify-components-message-filled-warning-color);
+}
+.amplify-message--filled.amplify-message--success {
+  background-color: var(--amplify-components-message-filled-success-background-color);
+  border-color: var(--amplify-components-message-filled-success-border-color);
+  color: var(--amplify-components-message-filled-success-color);
+}
+
+.amplify-message__icon {
+  font-size: var(--amplify-components-message-icon-size);
+}
+.amplify-message__icon > * {
+  display: block;
+}
+
+.amplify-message__heading {
+  font-weight: var(--amplify-components-message-heading-font-weight);
+  font-size: var(--amplify-components-message-heading-font-size);
+}
+
+.amplify-message__content {
+  flex: 1;
+  flex-direction: column;
+  gap: var(--amplify-space-xxxs);
+}
+
+.amplify-message__dismiss {
+  -webkit-margin-start: auto;
+          margin-inline-start: auto;
+  gap: var(--amplify-components-message-dismiss-gap);
+}
+
 .amplify-pagination__item-current, .amplify-pagination__item-button {
   height: var(--amplify-components-pagination-item-shared-height);
   min-width: var(--amplify-components-pagination-item-shared-min-width);
@@ -6195,6 +6518,16 @@ html[dir=rtl] .amplify-field-group__inner-start {
   font-size: var(--amplify-components-storagemanager-previewer-text-font-size);
   color: var(--amplify-components-storagemanager-previewer-text-color);
 }
+.amplify-storagemanager__previewer__footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: var(--amplify-components-storagemanager-previewer-footer-justify-content);
+}
+.amplify-storagemanager__previewer__actions {
+  display: flex;
+  flex-direction: row;
+  gap: var(--amplify-space-small);
+}
 
 [data-label-position=start] {
   flex-direction: row;

package/dist/types/components/Authenticator/Authenticator.d.ts

@@ -1,15 +1,32 @@
 import * as React from 'react';
-import { AuthenticatorMachineOptions, AmplifyUser } from '@aws-amplify/ui';
+import { AuthenticatorMachineOptions, AmplifyUser, FormFieldComponents, FormFieldOptions } from '@aws-amplify/ui';
 import { UseAuthenticator } from '@aws-amplify/ui-react-core';
 import { ComponentsProviderProps } from './hooks/useCustomComponents';
 import { RouterProps } from './Router';
 export type SignOut = UseAuthenticator['signOut'];
-export type AuthenticatorProps = Partial<AuthenticatorMachineOptions & ComponentsProviderProps & RouterProps & {
+export type AuthenticatorProps = Partial<Omit<AuthenticatorMachineOptions, 'formFields'> & ComponentsProviderProps & RouterProps & {
     children: React.ReactNode | ((props: {
         signOut?: SignOut;
         user?: AmplifyUser;
     }) => JSX.Element);
+    formFields: {
+        [key in FormFieldComponents]?: {
+            [field_name: string]: ReactFormFieldOptions;
+        };
+    };
 }>;
+interface ReactFormFieldOptions extends FormFieldOptions {
+    /** Desired HTML defaultValue type */
+    defaultValue?: string;
+    /** isReadOnly maps to readonly HTML type */
+    isReadOnly?: boolean;
+    /** Desired HTML pattern type */
+    pattern?: string | undefined;
+    /** Desired HTML minLength type */
+    minLength?: number;
+    /** Desired HTML maxLength type */
+    maxLength?: number;
+}
 export declare function AuthenticatorInternal({ children, className, components: customComponents, formFields, hideSignUp, initialState, loginMechanisms, passwordSettings, signUpAttributes, services, socialProviders, variation, }: AuthenticatorProps): JSX.Element;
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/connected-components/authenticator)
@@ -36,3 +53,4 @@ export declare namespace Authenticator {
         Footer(): JSX.Element | null;
     };
 }
+export {};

package/dist/types/internal.d.ts

@@ -14,6 +14,7 @@ export type { UseDataStoreUpdateActionOptions } from './hooks/actions/useDataSto
 export { AlertIcon } from './primitives/Alert/AlertIcon';
 export * from './primitives/Icon/internal';
 export * from './primitives/shared/datastore';
+export { useDropZone } from './primitives/DropZone/useDropZone';
 export { EscapeHatchProps, Variant, findChildOverrides, getOverridesFromVariants, getOverrideProps, mergeVariantsAndOverrides, } from './studio';
 export { Field } from './primitives/Field';
 export { PrimitiveCatalog } from './PrimitiveCatalog';

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

@@ -0,0 +1,13 @@
+import { ForwardRefPrimitive } from '../types';
+import { BaseDropZoneProps } from './types';
+import { Accepted, Default, Rejected } from './DropZoneChildren';
+type DropZoneType = ForwardRefPrimitive<BaseDropZoneProps, 'div'> & {
+    Accepted: typeof Accepted;
+    Rejected: typeof Rejected;
+    Default: typeof Default;
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/dropzone)
+ */
+declare const DropZone: DropZoneType;
+export { DropZone };

package/dist/types/primitives/DropZone/DropZoneChildren.d.ts

@@ -0,0 +1,18 @@
+import { Primitive } from '../types';
+/**
+ * These are syntactic sugar components that make it easy to compose children
+ * in DropZone without having to expose the DropZoneContext.
+ */
+/**
+ * This component renders when the user is dragging ONLY accepted files on the DropZone.
+ */
+declare const Accepted: Primitive<{}, 'div'>;
+/**
+ * This component renders when the user is dragging ANY rejected files on the DropZone.
+ */
+declare const Rejected: Primitive<{}, 'div'>;
+/**
+ * This component renders by default when the user is not dragging.
+ */
+declare const Default: Primitive<{}, 'div'>;
+export { Accepted, Rejected, Default };

package/dist/types/primitives/DropZone/DropZoneContainer.d.ts

@@ -0,0 +1,4 @@
+import { BaseDropZoneContainerProps } from './types';
+import { ForwardRefPrimitive } from '../types';
+declare const DropZoneContainer: ForwardRefPrimitive<BaseDropZoneContainerProps, 'div'>;
+export { DropZoneContainer };

package/dist/types/primitives/DropZone/DropZoneProvider.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { DragState } from './types';
+declare const DropZoneContext: React.Context<DragState>;
+declare const DropZoneProvider: ({ value, children, }: {
+    value: DragState;
+    children?: React.ReactNode;
+}) => JSX.Element;
+export { DropZoneProvider, DropZoneContext };

package/dist/types/primitives/DropZone/index.d.ts

@@ -0,0 +1,2 @@
+export { DropZone } from './DropZone';
+export { DropZoneProps } from './types';

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { ElementType, PrimitiveProps, BaseViewProps } from '../types';
+interface DropProps {
+    acceptedFiles: File[];
+    rejectedFiles: File[];
+}
+export interface UseDropZoneProps extends Partial<DragEvents> {
+    onDropComplete?: (props: DropProps) => void;
+    /**
+     * List of accepted File types, values of `['*']` or undefined allow any files
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
+     */
+    acceptedFileTypes?: string[];
+}
+export interface BaseDropZoneProps extends BaseViewProps, UseDropZoneProps {
+}
+export type DropZoneProps<Element extends ElementType = 'div'> = PrimitiveProps<BaseDropZoneProps, Element>;
+interface DragEvents {
+    onDragStart: (event: React.DragEvent<HTMLDivElement>) => void;
+    onDragEnter: (event: React.DragEvent<HTMLDivElement>) => void;
+    onDragLeave: (event: React.DragEvent<HTMLDivElement>) => void;
+    onDragOver: (event: React.DragEvent<HTMLDivElement>) => void;
+    onDrop: (event: React.DragEvent<HTMLDivElement>) => void;
+}
+export type DragState = 'accept' | 'reject' | 'inactive';
+export interface UseDropZoneReturn extends DragEvents {
+    dragState: DragState;
+}
+export interface BaseDropZoneContainerProps extends BaseViewProps, DragEvents {
+}
+export type DropZoneContainerProps<Element extends ElementType = 'div'> = PrimitiveProps<BaseDropZoneContainerProps, Element>;
+export {};

package/dist/types/primitives/DropZone/useDropZone.d.ts

@@ -0,0 +1,2 @@
+import { UseDropZoneProps, UseDropZoneReturn } from './types';
+export declare function useDropZone({ onDropComplete, onDragEnter: _onDragEnter, onDragLeave: _onDragLeave, onDragOver: _onDragOver, onDragStart: _onDragStart, onDrop: _onDrop, acceptedFileTypes, }: UseDropZoneProps): UseDropZoneReturn;

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

@@ -0,0 +1,5 @@
+import { BaseFieldsetProps, ForwardRefPrimitive } from '../types';
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/fieldset)
+ */
+export declare const Fieldset: ForwardRefPrimitive<BaseFieldsetProps, 'fieldset'>;

package/dist/types/primitives/Fieldset/index.d.ts

@@ -0,0 +1,2 @@
+export { Fieldset } from './Fieldset';
+export { useFieldset } from './useFieldset';

package/dist/types/primitives/Fieldset/useFieldset.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+interface FieldsetContextType {
+    isFieldsetDisabled?: boolean;
+}
+export declare const FieldsetContext: React.Context<FieldsetContextType>;
+/**
+ * @description Fieldsets in HTML can be disabled, which disables all child
+ * fieldsets and input controls. `useFieldset` passes the disabled state down
+ * via context.
+ */
+export declare const useFieldset: () => FieldsetContextType;
+export {};

package/dist/types/primitives/Icon/context/IconsContext.d.ts

@@ -8,6 +8,7 @@ export type IconsContextInterface = {
     expander?: ComponentIcons<'more'>;
     field?: ComponentIcons<'clear'>;
     menu?: ComponentIcons<'menu'>;
+    message?: ComponentIcons<'close' | 'info' | 'error' | 'success' | 'warning'>;
     pagination?: ComponentIcons<'previous' | 'next'>;
     passwordField?: ComponentIcons<'visibility' | 'visibilityOff'>;
     rating?: ComponentIcons<'filled' | 'empty'>;

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

@@ -0,0 +1,5 @@
+import { BaseMessageProps, ForwardRefPrimitive } from '../types';
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/message)
+ */
+export declare const Message: ForwardRefPrimitive<BaseMessageProps, 'div'>;

package/dist/types/primitives/Message/MessageContainer.d.ts

@@ -0,0 +1,2 @@
+import { BaseMessageContainerProps, ForwardRefPrimitive } from '../types';
+export declare const MessageContainer: ForwardRefPrimitive<BaseMessageContainerProps, 'div'>;

package/dist/types/primitives/Message/MessageContent.d.ts

@@ -0,0 +1,2 @@
+import { BaseMessageContentProps, ForwardRefPrimitive } from '../types';
+export declare const MessageContent: ForwardRefPrimitive<BaseMessageContentProps, 'div'>;

package/dist/types/primitives/Message/MessageDismiss.d.ts

@@ -0,0 +1,2 @@
+import { BaseMessageDismissProps, ForwardRefPrimitive } from '../types';
+export declare const MessageDismiss: ForwardRefPrimitive<BaseMessageDismissProps, 'button'>;

package/dist/types/primitives/Message/MessageHeading.d.ts

@@ -0,0 +1,2 @@
+import { BaseMessageHeadingProps, ForwardRefPrimitive } from '../types';
+export declare const MessageHeading: ForwardRefPrimitive<BaseMessageHeadingProps, 'div'>;

package/dist/types/primitives/Message/MessageIcon.d.ts

@@ -0,0 +1,2 @@
+import { BaseMessageIconProps, ForwardRefPrimitive } from '../types';
+export declare const MessageIcon: ForwardRefPrimitive<BaseMessageIconProps, 'div'>;

package/dist/types/primitives/Message/index.d.ts

@@ -0,0 +1 @@
+export { Message } from './Message';

package/dist/types/primitives/Message/useMessage.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { MessageColorTheme } from '../types';
+export interface MessageContextType {
+    colorTheme?: MessageColorTheme;
+    dismissed?: boolean;
+    setDismissed: (dismissed: boolean) => void;
+}
+export declare const MessageContext: React.Context<MessageContextType>;
+export declare const useMessage: () => MessageContextType;