@aws-amplify/ui-react-notifications 1.0.11 → 1.0.13

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);
@@ -884,7 +1000,11 @@
   --amplify-components-searchfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
   --amplify-components-searchfield-button-hover-border-color: var(--amplify-components-button-hover-border-color);
   --amplify-components-searchfield-button-hover-color: var(--amplify-components-button-hover-color);
+  --amplify-components-select-color: var(--amplify-components-fieldcontrol-color);
+  --amplify-components-select-background-color: var(--amplify-colors-background-primary);
   --amplify-components-select-padding-inline-end: var(--amplify-space-xxl);
+  --amplify-components-select-disabled-color: var(--amplify-colors-font-disabled);
+  --amplify-components-select-disabled-background-color: var(--amplify-colors-background-disabled);
   --amplify-components-select-wrapper-flex: 1;
   --amplify-components-select-wrapper-display: block;
   --amplify-components-select-wrapper-position: relative;
@@ -897,15 +1017,20 @@
   --amplify-components-select-icon-wrapper-pointer-events: none;
   --amplify-components-select-icon-wrapper-small-right: var(--amplify-space-xs);
   --amplify-components-select-icon-wrapper-large-right: var(--amplify-space-medium);
-  --amplify-components-select-option-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-select-option-background-color: transparent;
   --amplify-components-select-option-color: var(--amplify-colors-font-primary);
   --amplify-components-select-option-disabled-color: var(--amplify-colors-font-disabled);
+  --amplify-components-select-option-disabled-background-color: transparent;
   --amplify-components-select-white-space: nowrap;
   --amplify-components-select-min-width: 6.5rem;
   --amplify-components-select-small-min-width: 5.5rem;
   --amplify-components-select-small-padding-inline-end: var(--amplify-space-xl);
   --amplify-components-select-large-min-width: 7.5rem;
   --amplify-components-select-large-padding-inline-end: var(--amplify-space-xxl);
+  --amplify-components-select-expanded-padding-block: var(--amplify-space-xs);
+  --amplify-components-select-expanded-padding-inline: var(--amplify-space-small);
+  --amplify-components-select-expanded-option-padding-block: var(--amplify-space-xs);
+  --amplify-components-select-expanded-option-padding-inline: var(--amplify-space-small);
   --amplify-components-selectfield-border-color: var(--amplify-components-fieldcontrol-border-color);
   --amplify-components-selectfield-color: var(--amplify-components-fieldcontrol-color);
   --amplify-components-selectfield-flex-direction: column;
@@ -1014,12 +1139,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 +1399,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 +1410,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);
@@ -1556,14 +1679,10 @@ strong.amplify-text {
   font-weight: var(--amplify-components-button-font-weight);
   justify-content: center;
   line-height: var(--amplify-components-button-line-height);
-  -webkit-padding-before: var(--amplify-components-button-padding-block-start);
-          padding-block-start: var(--amplify-components-button-padding-block-start);
-  -webkit-padding-after: var(--amplify-components-button-padding-block-end);
-          padding-block-end: var(--amplify-components-button-padding-block-end);
-  -webkit-padding-start: var(--amplify-components-button-padding-inline-start);
-          padding-inline-start: var(--amplify-components-button-padding-inline-start);
-  -webkit-padding-end: var(--amplify-components-button-padding-inline-end);
-          padding-inline-end: var(--amplify-components-button-padding-inline-end);
+  padding-block-start: var(--amplify-components-button-padding-block-start);
+  padding-block-end: var(--amplify-components-button-padding-block-end);
+  padding-inline-start: var(--amplify-components-button-padding-inline-start);
+  padding-inline-end: var(--amplify-components-button-padding-inline-end);
   transition: all var(--amplify-components-button-transition-duration);
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -2572,25 +2691,17 @@ strong.amplify-text {
 }
 .amplify-button--small {
   font-size: var(--amplify-components-button-small-font-size);
-  -webkit-padding-before: var(--amplify-components-button-small-padding-block-start);
-          padding-block-start: var(--amplify-components-button-small-padding-block-start);
-  -webkit-padding-after: var(--amplify-components-button-small-padding-block-end);
-          padding-block-end: var(--amplify-components-button-small-padding-block-end);
-  -webkit-padding-start: var(--amplify-components-button-small-padding-inline-start);
-          padding-inline-start: var(--amplify-components-button-small-padding-inline-start);
-  -webkit-padding-end: var(--amplify-components-button-small-padding-inline-end);
-          padding-inline-end: var(--amplify-components-button-small-padding-inline-end);
+  padding-block-start: var(--amplify-components-button-small-padding-block-start);
+  padding-block-end: var(--amplify-components-button-small-padding-block-end);
+  padding-inline-start: var(--amplify-components-button-small-padding-inline-start);
+  padding-inline-end: var(--amplify-components-button-small-padding-inline-end);
 }
 .amplify-button--large {
   font-size: var(--amplify-components-button-large-font-size);
-  -webkit-padding-before: var(--amplify-components-button-large-padding-block-start);
-          padding-block-start: var(--amplify-components-button-large-padding-block-start);
-  -webkit-padding-after: var(--amplify-components-button-large-padding-block-end);
-          padding-block-end: var(--amplify-components-button-large-padding-block-end);
-  -webkit-padding-start: var(--amplify-components-button-large-padding-inline-start);
-          padding-inline-start: var(--amplify-components-button-large-padding-inline-start);
-  -webkit-padding-end: var(--amplify-components-button-large-padding-inline-end);
-          padding-inline-end: var(--amplify-components-button-large-padding-inline-end);
+  padding-block-start: var(--amplify-components-button-large-padding-block-start);
+  padding-block-end: var(--amplify-components-button-large-padding-block-end);
+  padding-inline-start: var(--amplify-components-button-large-padding-inline-start);
+  padding-inline-end: var(--amplify-components-button-large-padding-inline-end);
 }
 .amplify-button--disabled {
   background-color: var(--amplify-internal-button-disabled-background-color);
@@ -2659,6 +2770,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);
@@ -2735,14 +2892,10 @@ strong.amplify-text {
   color: var(--amplify-components-fieldcontrol-color);
   font-size: var(--amplify-components-fieldcontrol-font-size);
   line-height: var(--amplify-components-fieldcontrol-line-height);
-  -webkit-padding-before: var(--amplify-components-fieldcontrol-padding-block-start);
-          padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
-  -webkit-padding-after: var(--amplify-components-fieldcontrol-padding-block-end);
-          padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
-  -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
-          padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
-  -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-end);
-          padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
+  padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
+  padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
+  padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
+  padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
   transition: all var(--amplify-components-fieldcontrol-transition-duration);
   width: 100%;
   border-color: var(--amplify-components-fieldcontrol-border-color);
@@ -2757,6 +2910,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);
@@ -2764,25 +2929,17 @@ strong.amplify-text {
 }
 .amplify-input--small {
   font-size: var(--amplify-components-fieldcontrol-small-font-size);
-  -webkit-padding-before: var(--amplify-components-fieldcontrol-small-padding-block-start);
-          padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
-  -webkit-padding-after: var(--amplify-components-fieldcontrol-small-padding-block-end);
-          padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
-  -webkit-padding-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
-          padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
-  -webkit-padding-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
-          padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
+  padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
+  padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
+  padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
+  padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
 }
 .amplify-input--large {
   font-size: var(--amplify-components-fieldcontrol-large-font-size);
-  -webkit-padding-before: var(--amplify-components-fieldcontrol-large-padding-block-start);
-          padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
-  -webkit-padding-after: var(--amplify-components-fieldcontrol-large-padding-block-end);
-          padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
-  -webkit-padding-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
-          padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
-  -webkit-padding-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
-          padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
+  padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
+  padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
+  padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
+  padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
 }
 .amplify-input--error {
   border-color: var(--amplify-components-fieldcontrol-error-border-color);
@@ -2791,19 +2948,10 @@ strong.amplify-text {
   border-color: var(--amplify-components-fieldcontrol-error-border-color);
   box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
 }
-.amplify-input[disabled] {
-  color: var(--amplify-components-fieldcontrol-disabled-color);
-  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
-  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
-  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
-}
 .amplify-input--quiet {
-  -webkit-border-before: var(--amplify-components-fieldcontrol-quiet-border-block-start);
-          border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
-  -webkit-border-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
-          border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
-  -webkit-border-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
-          border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
+  border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
+  border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
+  border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
   border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
 }
 .amplify-input--quiet:focus {
@@ -2816,20 +2964,22 @@ strong.amplify-text {
 .amplify-input--quiet[aria-invalid=true]:focus {
   box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
 }
+.amplify-input[disabled] {
+  color: var(--amplify-components-fieldcontrol-disabled-color);
+  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
+  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
+  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
+}
 
 .amplify-textarea {
   box-sizing: border-box;
   color: var(--amplify-components-fieldcontrol-color);
   font-size: var(--amplify-components-fieldcontrol-font-size);
   line-height: var(--amplify-components-fieldcontrol-line-height);
-  -webkit-padding-before: var(--amplify-components-fieldcontrol-padding-block-start);
-          padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
-  -webkit-padding-after: var(--amplify-components-fieldcontrol-padding-block-end);
-          padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
-  -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
-          padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
-  -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-end);
-          padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
+  padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
+  padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
+  padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
+  padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
   transition: all var(--amplify-components-fieldcontrol-transition-duration);
   width: 100%;
   border-color: var(--amplify-components-fieldcontrol-border-color);
@@ -2851,25 +3001,17 @@ strong.amplify-text {
 }
 .amplify-textarea--small {
   font-size: var(--amplify-components-fieldcontrol-small-font-size);
-  -webkit-padding-before: var(--amplify-components-fieldcontrol-small-padding-block-start);
-          padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
-  -webkit-padding-after: var(--amplify-components-fieldcontrol-small-padding-block-end);
-          padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
-  -webkit-padding-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
-          padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
-  -webkit-padding-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
-          padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
+  padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
+  padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
+  padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
+  padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
 }
 .amplify-textarea--large {
   font-size: var(--amplify-components-fieldcontrol-large-font-size);
-  -webkit-padding-before: var(--amplify-components-fieldcontrol-large-padding-block-start);
-          padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
-  -webkit-padding-after: var(--amplify-components-fieldcontrol-large-padding-block-end);
-          padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
-  -webkit-padding-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
-          padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
-  -webkit-padding-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
-          padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
+  padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
+  padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
+  padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
+  padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
 }
 .amplify-textarea--error {
   border-color: var(--amplify-components-fieldcontrol-error-border-color);
@@ -2878,19 +3020,10 @@ strong.amplify-text {
   border-color: var(--amplify-components-fieldcontrol-error-border-color);
   box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
 }
-.amplify-textarea[disabled] {
-  color: var(--amplify-components-fieldcontrol-disabled-color);
-  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
-  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
-  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
-}
 .amplify-textarea--quiet {
-  -webkit-border-before: var(--amplify-components-fieldcontrol-quiet-border-block-start);
-          border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
-  -webkit-border-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
-          border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
-  -webkit-border-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
-          border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
+  border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
+  border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
+  border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
   border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
 }
 .amplify-textarea--quiet:focus {
@@ -2903,6 +3036,12 @@ strong.amplify-text {
 .amplify-textarea--quiet[aria-invalid=true]:focus {
   box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
 }
+.amplify-textarea[disabled] {
+  color: var(--amplify-components-fieldcontrol-disabled-color);
+  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
+  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
+  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
+}
 
 .amplify-image {
   height: var(--amplify-components-image-height);
@@ -3167,8 +3306,7 @@ strong.amplify-text {
   position: absolute;
   z-index: 999999;
   width: var(--amplify-components-autocomplete-menu-width);
-  -webkit-margin-before: var(--amplify-components-autocomplete-menu-margin-block-start);
-          margin-block-start: var(--amplify-components-autocomplete-menu-margin-block-start);
+  margin-block-start: var(--amplify-components-autocomplete-menu-margin-block-start);
   background-color: var(--amplify-components-autocomplete-menu-background-color);
   border-color: var(--amplify-components-autocomplete-menu-border-color);
   border-width: var(--amplify-components-autocomplete-menu-border-width);
@@ -3611,10 +3749,8 @@ strong.amplify-text {
   flex: 1;
   display: flex;
   min-height: var(--amplify-components-expander-trigger-min-height);
-  -webkit-padding-start: var(--amplify-components-expander-trigger-padding-inline-start);
-          padding-inline-start: var(--amplify-components-expander-trigger-padding-inline-start);
-  -webkit-padding-end: var(--amplify-components-expander-trigger-padding-inline-end);
-          padding-inline-end: var(--amplify-components-expander-trigger-padding-inline-end);
+  padding-inline-start: var(--amplify-components-expander-trigger-padding-inline-start);
+  padding-inline-end: var(--amplify-components-expander-trigger-padding-inline-end);
   align-items: var(--amplify-components-expander-trigger-align-items);
   justify-content: var(--amplify-components-expander-trigger-justify-content);
 }
@@ -3624,10 +3760,8 @@ strong.amplify-text {
 
 .amplify-expander__content {
   display: block;
-  -webkit-padding-start: var(--amplify-components-expander-content-padding-inline-start);
-          padding-inline-start: var(--amplify-components-expander-content-padding-inline-start);
-  -webkit-padding-end: var(--amplify-components-expander-content-padding-inline-end);
-          padding-inline-end: var(--amplify-components-expander-content-padding-inline-end);
+  padding-inline-start: var(--amplify-components-expander-content-padding-inline-start);
+  padding-inline-end: var(--amplify-components-expander-content-padding-inline-end);
 }
 .amplify-expander__content[data-state=open] {
   animation-name: amplify-expander-slide-down;
@@ -3643,10 +3777,8 @@ strong.amplify-text {
 .amplify-expander__content__text {
   display: block;
   color: var(--amplify-components-expander-content-text-color);
-  -webkit-padding-before: var(--amplify-components-expander-content-text-padding-block-start);
-          padding-block-start: var(--amplify-components-expander-content-text-padding-block-start);
-  -webkit-padding-after: var(--amplify-components-expander-content-text-padding-block-end);
-          padding-block-end: var(--amplify-components-expander-content-text-padding-block-end);
+  padding-block-start: var(--amplify-components-expander-content-text-padding-block-start);
+  padding-block-end: var(--amplify-components-expander-content-text-padding-block-end);
 }
 
 .amplify-expander__icon {
@@ -3804,13 +3936,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
 }
 
 .amplify-field-group--has-inner-end .amplify-input {
-  -webkit-padding-end: calc(var(--amplify-components-fieldcontrol-padding-inline-end) * 3);
-          padding-inline-end: calc(var(--amplify-components-fieldcontrol-padding-inline-end) * 3);
+  padding-inline-end: calc(var(--amplify-components-fieldcontrol-padding-inline-end) * 3);
 }
 
 .amplify-field-group--has-inner-start .amplify-input {
-  -webkit-padding-start: calc(var(--amplify-components-fieldcontrol-padding-inline-start) * 3);
-          padding-inline-start: calc(var(--amplify-components-fieldcontrol-padding-inline-start) * 3);
+  padding-inline-start: calc(var(--amplify-components-fieldcontrol-padding-inline-start) * 3);
 }
 
 /**
@@ -3818,15 +3948,51 @@ html[dir=rtl] .amplify-field-group__inner-start {
  */
 .amplify-field-group__icon:not(.amplify-field-group__icon-button) {
   display: flex;
-  -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
-          padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
-  -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-start);
-          padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-start);
+  padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
+  padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-start);
   flex-direction: column;
   justify-content: center;
   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;
@@ -4374,10 +4540,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
 
 .amplify-menu-content__item {
   min-height: var(--amplify-components-menu-item-min-height);
-  -webkit-padding-start: var(--amplify-components-menu-item-padding-inline-start);
-          padding-inline-start: var(--amplify-components-menu-item-padding-inline-start);
-  -webkit-padding-end: var(--amplify-components-menu-item-padding-inline-end);
-          padding-inline-end: var(--amplify-components-menu-item-padding-inline-end);
+  padding-inline-start: var(--amplify-components-menu-item-padding-inline-start);
+  padding-inline-end: var(--amplify-components-menu-item-padding-inline-end);
 }
 
 .amplify-menu-content__item:not(:first-child):not(:last-child) {
@@ -4406,6 +4570,118 @@ 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 {
+  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);
@@ -4425,10 +4701,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
   justify-content: center;
   font-weight: initial;
   color: var(--amplify-components-pagination-button-color);
-  -webkit-padding-start: var(--amplify-components-pagination-button-padding-inline-start);
-          padding-inline-start: var(--amplify-components-pagination-button-padding-inline-start);
-  -webkit-padding-end: var(--amplify-components-pagination-button-padding-inline-end);
-          padding-inline-end: var(--amplify-components-pagination-button-padding-inline-end);
+  padding-inline-start: var(--amplify-components-pagination-button-padding-inline-start);
+  padding-inline-end: var(--amplify-components-pagination-button-padding-inline-end);
   transition-property: var(--amplify-components-pagination-button-transition-property);
   transition-duration: var(--amplify-components-pagination-button-transition-duration);
 }
@@ -4451,10 +4725,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-pagination__item-ellipsis {
   align-items: var(--amplify-components-pagination-ellipsis-align-items);
   justify-content: var(--amplify-components-pagination-ellipsis-justify-content);
-  -webkit-padding-start: var(--amplify-components-pagination-ellipsis-padding-inline-start);
-          padding-inline-start: var(--amplify-components-pagination-ellipsis-padding-inline-start);
-  -webkit-padding-end: var(--amplify-components-pagination-ellipsis-padding-inline-end);
-          padding-inline-end: var(--amplify-components-pagination-ellipsis-padding-inline-end);
+  padding-inline-start: var(--amplify-components-pagination-ellipsis-padding-inline-start);
+  padding-inline-end: var(--amplify-components-pagination-ellipsis-padding-inline-end);
 }
 
 .amplify-passwordfield {
@@ -4763,14 +5035,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
   color: var(--amplify-components-fieldcontrol-color);
   font-size: var(--amplify-components-fieldcontrol-font-size);
   line-height: var(--amplify-components-fieldcontrol-line-height);
-  -webkit-padding-before: var(--amplify-components-fieldcontrol-padding-block-start);
-          padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
-  -webkit-padding-after: var(--amplify-components-fieldcontrol-padding-block-end);
-          padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
-  -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
-          padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
-  -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-end);
-          padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
+  padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
+  padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
+  padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
+  padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
   transition: all var(--amplify-components-fieldcontrol-transition-duration);
   width: 100%;
   border-color: var(--amplify-components-fieldcontrol-border-color);
@@ -4781,9 +5049,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
   outline-style: var(--amplify-components-fieldcontrol-outline-style);
   outline-width: var(--amplify-components-fieldcontrol-outline-width);
   outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
+  background-color: var(--amplify-components-select-background-color);
+  color: var(--amplify-components-select-color);
   min-width: var(--amplify-components-select-min-width);
-  -webkit-padding-end: var(--amplify-components-select-padding-inline-end);
-          padding-inline-end: var(--amplify-components-select-padding-inline-end);
+  padding-inline-end: var(--amplify-components-select-padding-inline-end);
   white-space: var(--amplify-components-select-white-space);
 }
 .amplify-select:focus {
@@ -4792,25 +5061,17 @@ html[dir=rtl] .amplify-field-group__inner-start {
 }
 .amplify-select--small {
   font-size: var(--amplify-components-fieldcontrol-small-font-size);
-  -webkit-padding-before: var(--amplify-components-fieldcontrol-small-padding-block-start);
-          padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
-  -webkit-padding-after: var(--amplify-components-fieldcontrol-small-padding-block-end);
-          padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
-  -webkit-padding-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
-          padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
-  -webkit-padding-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
-          padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
+  padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
+  padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
+  padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
+  padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
 }
 .amplify-select--large {
   font-size: var(--amplify-components-fieldcontrol-large-font-size);
-  -webkit-padding-before: var(--amplify-components-fieldcontrol-large-padding-block-start);
-          padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
-  -webkit-padding-after: var(--amplify-components-fieldcontrol-large-padding-block-end);
-          padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
-  -webkit-padding-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
-          padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
-  -webkit-padding-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
-          padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
+  padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
+  padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
+  padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
+  padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
 }
 .amplify-select--error {
   border-color: var(--amplify-components-fieldcontrol-error-border-color);
@@ -4819,19 +5080,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
   border-color: var(--amplify-components-fieldcontrol-error-border-color);
   box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
 }
-.amplify-select[disabled] {
-  color: var(--amplify-components-fieldcontrol-disabled-color);
-  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
-  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
-  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
-}
 .amplify-select--quiet {
-  -webkit-border-before: var(--amplify-components-fieldcontrol-quiet-border-block-start);
-          border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
-  -webkit-border-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
-          border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
-  -webkit-border-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
-          border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
+  border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
+  border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
+  border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
   border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
 }
 .amplify-select--quiet:focus {
@@ -4844,27 +5096,43 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-select--quiet[aria-invalid=true]:focus {
   box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
 }
+.amplify-select[disabled] {
+  color: var(--amplify-components-fieldcontrol-disabled-color);
+  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
+  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
+  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
+}
 .amplify-select option {
-  color: initial;
+  background-color: var(--amplify-components-select-option-background-color);
+  color: var(--amplify-components-select-option-color);
 }
 .amplify-select option[disabled=""] {
+  background-color: var(--amplify-components-select-option-disabled-background-color);
   color: var(--amplify-components-select-option-disabled-color);
+  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
 }
-@-moz-document url-prefix() {
-  .amplify-select option {
-    background-color: var(--amplify-components-select-option-background-color);
-    color: var(--amplify-components-select-option-color);
-  }
+.amplify-select[disabled] {
+  background-color: var(--amplify-components-select-disabled-background-color);
+  color: var(--amplify-components-select-disabled-color);
+}
+.amplify-select[disabled] option {
+  color: inherit;
+  background-color: inherit;
 }
 .amplify-select--small {
   min-width: var(--amplify-components-select-small-min-width);
-  -webkit-padding-end: var(--amplify-components-select-small-padding-inline-end);
-          padding-inline-end: var(--amplify-components-select-small-padding-inline-end);
+  padding-inline-end: var(--amplify-components-select-small-padding-inline-end);
 }
 .amplify-select--large {
   min-width: var(--amplify-components-select-large-min-width);
-  -webkit-padding-end: var(--amplify-components-select-large-padding-inline-end);
-          padding-inline-end: var(--amplify-components-select-large-padding-inline-end);
+  padding-inline-end: var(--amplify-components-select-large-padding-inline-end);
+}
+.amplify-select--expanded {
+  overflow: auto;
+  padding: var(--amplify-components-select-expanded-padding-block) var(--amplify-components-select-expanded-padding-inline);
+}
+.amplify-select--expanded option {
+  padding: var(--amplify-components-select-expanded-option-padding-block) var(--amplify-components-select-expanded-option-padding-inline);
 }
 
 .amplify-selectfield {
@@ -5088,13 +5356,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
 }
 
 .amplify-stepperfield__button--decrease[data-invalid=true] {
-  -webkit-border-end: none;
-          border-inline-end: none;
+  border-inline-end: none;
 }
 
 .amplify-stepperfield__button--increase[data-invalid=true] {
-  -webkit-border-start: none;
-          border-inline-start: none;
+  border-inline-start: none;
 }
 
 .amplify-stepperfield__input {
@@ -5106,10 +5372,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
   margin: 0;
 }
 .amplify-stepperfield__input:not(:focus, [aria-invalid=true]) {
-  -webkit-border-start: none;
-          border-inline-start: none;
-  -webkit-border-end: none;
-          border-inline-end: none;
+  border-inline-start: none;
+  border-inline-end: none;
 }
 
 .amplify-switchfield {
@@ -5718,8 +5982,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   z-index: 2;
 }
 .amplify-togglebuttongroup .amplify-togglebutton:not(:first-of-type) {
-  -webkit-margin-start: calc(-1 * var(--amplify-components-button-border-width));
-          margin-inline-start: calc(-1 * var(--amplify-components-button-border-width));
+  margin-inline-start: calc(-1 * var(--amplify-components-button-border-width));
   border-start-start-radius: 0;
   border-end-start-radius: 0;
 }
@@ -6195,6 +6458,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-notifications",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -40,9 +40,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.7.2",
-    "@aws-amplify/ui-react": "5.2.0",
-    "@aws-amplify/ui-react-core-notifications": "1.0.8",
+    "@aws-amplify/ui": "5.8.1",
+    "@aws-amplify/ui-react": "5.3.1",
+    "@aws-amplify/ui-react-core-notifications": "1.0.10",
     "classnames": "2.3.1",
     "tinycolor2": "1.4.2"
   },