@aws-amplify/ui-react 5.1.1 → 5.3.0

package/dist/styles.css

@@ -113,6 +113,7 @@
   --amplify-components-button-padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
   --amplify-components-button-padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
   --amplify-components-button-padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
+  --amplify-components-button-background-color: transparent;
   --amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color);
   --amplify-components-button-border-width: var(--amplify-components-fieldcontrol-border-width);
   --amplify-components-button-border-style: var(--amplify-components-fieldcontrol-border-style);
@@ -530,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);
@@ -624,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);
@@ -725,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);
@@ -774,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);
@@ -1013,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);
@@ -1278,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);
@@ -1289,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);
@@ -1528,7 +1643,9 @@ strong.amplify-text {
  * Button base styles
  */
 .amplify-button {
-  --amplify-internal-button-background-color: transparent;
+  --amplify-internal-button-background-color: var(
+    --amplify-components-button-background-color
+  );
   --amplify-internal-button-border-color: var(
     --amplify-components-button-border-color
   );
@@ -2656,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);
@@ -2754,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);
@@ -3132,6 +3307,7 @@ strong.amplify-text {
 
 .amplify-alert__icon {
   font-size: var(--amplify-components-alert-icon-size);
+  line-height: 1;
 }
 
 .amplify-alert__heading {
@@ -3460,6 +3636,9 @@ strong.amplify-text {
 }
 
 .amplify-checkbox__icon {
+  line-height: 1;
+  width: 1em;
+  height: 1em;
   background-color: var(--amplify-components-checkbox-icon-background-color);
   opacity: var(--amplify-components-checkbox-icon-opacity);
   transform: var(--amplify-components-checkbox-icon-transform);
@@ -3721,6 +3900,7 @@ strong.amplify-text {
 .amplify-field-group__outer-start,
 .amplify-field-group__outer-end {
   display: flex;
+  flex-shrink: 0;
   align-items: var(--amplify-components-fieldgroup-outer-align-items);
 }
 .amplify-field-group__outer-start .amplify-field-group__control,
@@ -3819,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;
@@ -4398,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);
@@ -4575,6 +4906,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-rating-icon {
   width: 1em;
   height: 1em;
+  display: block;
 }
 
 .amplify-rating-icon-filled {
@@ -6186,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/components/Authenticator/hooks/useCustomComponents/index.d.ts

@@ -1,7 +1 @@
-import * as React from 'react';
-import { DefaultComponents } from './defaultComponents';
-export interface ComponentsProviderProps {
-    components?: DefaultComponents;
-}
-export declare const CustomComponentsContext: React.Context<ComponentsProviderProps>;
-export declare const useCustomComponents: () => ComponentsProviderProps;
+export { ComponentsProviderProps, CustomComponentsContext, useCustomComponents, } from './useCustomComponents';

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { DefaultComponents } from './defaultComponents';
+export interface ComponentsProviderProps {
+    components?: DefaultComponents;
+}
+export declare const CustomComponentsContext: React.Context<ComponentsProviderProps>;
+export declare const useCustomComponents: () => ComponentsProviderProps;

package/dist/types/components/Storage/FileUploader/UploadDropZone/UploadDropZone.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { UploadDropZoneProps } from '../types';
+export declare function UploadDropZone({ children, inDropZone, onDragStart, onDragEnter, onDragLeave, onDrop, onDragOver, }: UploadDropZoneProps): JSX.Element;

package/dist/types/components/Storage/FileUploader/UploadDropZone/index.d.ts

@@ -1,3 +1 @@
-/// <reference types="react" />
-import { UploadDropZoneProps } from '../types';
-export declare function UploadDropZone({ children, inDropZone, onDragStart, onDragEnter, onDragLeave, onDrop, onDragOver, }: UploadDropZoneProps): JSX.Element;
+export { UploadDropZone } from './UploadDropZone';

package/dist/types/components/Storage/FileUploader/UploadPreviewer/UploadPreviewer.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PreviewerProps } from '../types';
+export declare function UploadPreviewer({ aggregatePercentage, children, dropZone, fileStatuses, isLoading, isSuccessful, hasMaxFilesError, maxFileCount, onClear, onFileClick, }: PreviewerProps): JSX.Element;

package/dist/types/components/Storage/FileUploader/UploadPreviewer/index.d.ts

@@ -1,3 +1 @@
-/// <reference types="react" />
-import { PreviewerProps } from '../types';
-export declare function UploadPreviewer({ aggregatePercentage, children, dropZone, fileStatuses, isLoading, isSuccessful, hasMaxFilesError, maxFileCount, onClear, onFileClick, }: PreviewerProps): JSX.Element;
+export { UploadPreviewer } from './UploadPreviewer';

package/dist/types/components/Storage/FileUploader/UploadTracker/UploadTracker.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TrackerProps } from '../types';
+export declare function UploadTracker({ errorMessage, file, fileState, hasImage, name, onCancel, onCancelEdit, onPause, onResume, onSaveEdit, onStartEdit, percentage, isResumable, showImage, }: TrackerProps): JSX.Element | null;

package/dist/types/components/Storage/FileUploader/UploadTracker/index.d.ts

@@ -1,3 +1 @@
-/// <reference types="react" />
-import { TrackerProps } from '../types';
-export declare function UploadTracker({ errorMessage, file, fileState, hasImage, name, onCancel, onCancelEdit, onPause, onResume, onSaveEdit, onStartEdit, percentage, isResumable, showImage, }: TrackerProps): JSX.Element | null;
+export { UploadTracker } from './UploadTracker';

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Theme, WebTheme } from '@aws-amplify/ui';
+export type ColorMode = 'system' | 'light' | 'dark';
+export type Direction = 'ltr' | 'rtl';
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    /**
+     * Changes the color mode applied to the theme
+     */
+    colorMode?: ColorMode;
+    /**
+     * Controls the language direction in the app
+     * @default: 'ltr'
+     */
+    direction?: Direction;
+    /**
+     * Provide a server generated nonce which matches your CSP `style-src` rule.
+     * This will be attached to the generated <style> tag.
+     * @see: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src
+     */
+    nonce?: string;
+    /**
+     * Custom theme
+     */
+    theme?: Theme | WebTheme;
+}
+export declare function AmplifyProvider({ children, colorMode, direction, nonce, theme, }: ThemeProviderProps): JSX.Element;
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/theming)
+ */
+export declare const ThemeProvider: typeof AmplifyProvider;
+export {};

package/dist/types/components/ThemeProvider/index.d.ts

@@ -1,32 +1 @@
-import * as React from 'react';
-import { Theme, WebTheme } from '@aws-amplify/ui';
-export type ColorMode = 'system' | 'light' | 'dark';
-export type Direction = 'ltr' | 'rtl';
-interface ThemeProviderProps {
-    children: React.ReactNode;
-    /**
-     * Changes the color mode applied to the theme
-     */
-    colorMode?: ColorMode;
-    /**
-     * Controls the language direction in the app
-     * @default: 'ltr'
-     */
-    direction?: Direction;
-    /**
-     * Provide a server generated nonce which matches your CSP `style-src` rule.
-     * This will be attached to the generated <style> tag.
-     * @see: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src
-     */
-    nonce?: string;
-    /**
-     * Custom theme
-     */
-    theme?: Theme | WebTheme;
-}
-export declare function AmplifyProvider({ children, colorMode, direction, nonce, theme, }: ThemeProviderProps): JSX.Element;
-/**
- * [📖 Docs](https://ui.docs.amplify.aws/react/theming)
- */
-export declare const ThemeProvider: typeof AmplifyProvider;
-export {};
+export { ColorMode, Direction, AmplifyProvider, ThemeProvider, } from './ThemeProvider';

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';