@aws-amplify/ui 3.0.10 → 3.0.14

package/dist/styles.css

@@ -3,7 +3,7 @@
  */
 /**
  * Do not edit directly
- * Generated on Thu, 27 Jan 2022 23:18:54 GMT
+ * Generated on Thu, 17 Feb 2022 23:14:37 GMT
  */
 :root, [data-amplify-theme] {
   --amplify-transforms-slide-x-large: translateX(2em);
@@ -58,8 +58,8 @@
   --amplify-opacities-10: 0.1;
   --amplify-opacities-0: 0;
   --amplify-line-heights-large: 2;
-  --amplify-line-heights-medium: 1.75;
-  --amplify-line-heights-small: 1.5;
+  --amplify-line-heights-medium: 1.5;
+  --amplify-line-heights-small: 1.25;
   --amplify-font-weights-black: 900;
   --amplify-font-weights-extrabold: 800;
   --amplify-font-weights-bold: 700;
@@ -69,8 +69,8 @@
   --amplify-font-weights-light: 300;
   --amplify-font-weights-thin: 200;
   --amplify-font-weights-hairline: 100;
-  --amplify-font-sizes-xxxxl: 5rem;
-  --amplify-font-sizes-xxxl: 3rem;
+  --amplify-font-sizes-xxxxl: 3rem;
+  --amplify-font-sizes-xxxl: 2.5rem;
   --amplify-font-sizes-xxl: 2rem;
   --amplify-font-sizes-xl: 1.5rem;
   --amplify-font-sizes-large: 1.25rem;
@@ -237,7 +237,7 @@
   --amplify-components-togglebutton-primary-background-color: var(--amplify-colors-transparent);
   --amplify-components-togglebutton-pressed-hover-background-color: var(--amplify-colors-overlay-30);
   --amplify-components-togglebutton-pressed-background-color: var(--amplify-colors-overlay-20);
-  --amplify-components-togglebutton-pressed-color: var(--amplify-colors-overlay-90);
+  --amplify-components-togglebutton-pressed-color: var(--amplify-colors-font-primary);
   --amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-secondary);
   --amplify-components-togglebutton-disabled-background-color: var(--amplify-colors-transparent);
@@ -339,9 +339,9 @@
   --amplify-components-switchfield-thumb-border-radius: var(--amplify-radii-xxxl);
   --amplify-components-switchfield-thumb-border-color: var(--amplify-colors-border-tertiary);
   --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-switchfield-label-padding: var(--amplify-space-xs);
   --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
   --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
-  --amplify-components-switchfield-label-padding: var(--amplify-space-xs);
   --amplify-components-switchfield-focused-shadow: var(--amplify-shadows-small);
   --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
   --amplify-components-stepperfield-input-text-align: center;
@@ -362,7 +362,7 @@
   --amplify-components-sliderfield-thumb-border-color: var(--amplify-colors-border-primary);
   --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-small);
   --amplify-components-sliderfield-thumb-border-radius: 50%;
-  --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-medium);
+  --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-small);
   --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-background-primary);
   --amplify-components-sliderfield-thumb-height: 1.25rem;
   --amplify-components-sliderfield-thumb-width: 1.25rem;
@@ -474,28 +474,28 @@
   --amplify-components-menu-box-shadow: var(--amplify-shadows-large);
   --amplify-components-menu-border-radius: var(--amplify-radii-medium);
   --amplify-components-menu-background-color: var(--amplify-colors-white);
-  --amplify-components-loader-linear-large-stroke-width: var(--amplify-font-sizes-xs);
-  --amplify-components-loader-linear-large-height: var(--amplify-font-sizes-xs);
-  --amplify-components-loader-linear-small-stroke-width: var(--amplify-font-sizes-xxxs);
-  --amplify-components-loader-linear-small-height: var(--amplify-font-sizes-xxxs);
+  --amplify-components-loader-linear-large-stroke-width: var(--amplify-font-sizes-large);
+  --amplify-components-loader-linear-large-height: var(--amplify-font-sizes-large);
+  --amplify-components-loader-linear-small-stroke-width: var(--amplify-font-sizes-small);
+  --amplify-components-loader-linear-small-height: var(--amplify-font-sizes-small);
   --amplify-components-loader-linear-animation-duration: 1s;
   --amplify-components-loader-linear-stroke-linecap: round;
   --amplify-components-loader-linear-stroke-empty: var(--amplify-colors-neutral-20);
   --amplify-components-loader-linear-stroke-filled: var(--amplify-colors-brand-primary-80);
-  --amplify-components-loader-linear-stroke-width: var(--amplify-font-sizes-xxs);
-  --amplify-components-loader-linear-height: var(--amplify-font-sizes-xxs);
+  --amplify-components-loader-linear-stroke-width: var(--amplify-font-sizes-medium);
+  --amplify-components-loader-linear-height: var(--amplify-font-sizes-medium);
   --amplify-components-loader-linear-min-width: 5rem;
   --amplify-components-loader-linear-width: 100%;
-  --amplify-components-loader-large-height: var(--amplify-font-sizes-xxxl);
-  --amplify-components-loader-large-width: var(--amplify-font-sizes-xxxl);
-  --amplify-components-loader-small-height: var(--amplify-font-sizes-medium);
-  --amplify-components-loader-small-width: var(--amplify-font-sizes-medium);
+  --amplify-components-loader-large-height: var(--amplify-font-sizes-large);
+  --amplify-components-loader-large-width: var(--amplify-font-sizes-large);
+  --amplify-components-loader-small-height: var(--amplify-font-sizes-small);
+  --amplify-components-loader-small-width: var(--amplify-font-sizes-small);
   --amplify-components-loader-animation-duration: 1s;
   --amplify-components-loader-stroke-linecap: round;
   --amplify-components-loader-stroke-filled: var(--amplify-colors-brand-primary-80);
   --amplify-components-loader-stroke-empty: var(--amplify-colors-neutral-20);
-  --amplify-components-loader-height: var(--amplify-font-sizes-xxl);
-  --amplify-components-loader-width: var(--amplify-font-sizes-xxl);
+  --amplify-components-loader-height: var(--amplify-font-sizes-medium);
+  --amplify-components-loader-width: var(--amplify-font-sizes-medium);
   --amplify-components-link-visited-color: var(--amplify-colors-font-interactive);
   --amplify-components-link-small-font-size: var(--amplify-font-sizes-small);
   --amplify-components-link-large-font-size: var(--amplify-font-sizes-large);
@@ -509,17 +509,17 @@
   --amplify-components-image-max-width: 100%;
   --amplify-components-icon-height: 1em;
   --amplify-components-icon-line-height: 1;
-  --amplify-components-heading-line-height: 1.25;
+  --amplify-components-heading-line-height: var(--amplify-line-heights-small);
   --amplify-components-heading-color: var(--amplify-colors-font-primary);
-  --amplify-components-heading-6-font-weight: var(--amplify-font-weights-bold);
+  --amplify-components-heading-6-font-weight: var(--amplify-font-weights-extrabold);
   --amplify-components-heading-6-font-size: var(--amplify-font-sizes-medium);
-  --amplify-components-heading-5-font-weight: var(--amplify-font-weights-semibold);
+  --amplify-components-heading-5-font-weight: var(--amplify-font-weights-bold);
   --amplify-components-heading-5-font-size: var(--amplify-font-sizes-large);
-  --amplify-components-heading-4-font-weight: var(--amplify-font-weights-medium);
+  --amplify-components-heading-4-font-weight: var(--amplify-font-weights-semibold);
   --amplify-components-heading-4-font-size: var(--amplify-font-sizes-xl);
-  --amplify-components-heading-3-font-weight: var(--amplify-font-weights-normal);
+  --amplify-components-heading-3-font-weight: var(--amplify-font-weights-medium);
   --amplify-components-heading-3-font-size: var(--amplify-font-sizes-xxl);
-  --amplify-components-heading-2-font-weight: var(--amplify-font-weights-light);
+  --amplify-components-heading-2-font-weight: var(--amplify-font-weights-normal);
   --amplify-components-heading-2-font-size: var(--amplify-font-sizes-xxxl);
   --amplify-components-heading-1-font-weight: var(--amplify-font-weights-light);
   --amplify-components-heading-1-font-size: var(--amplify-font-sizes-xxxxl);
@@ -561,8 +561,8 @@
   --amplify-components-fieldcontrol-large-font-size: var(--amplify-components-field-large-font-size);
   --amplify-components-fieldcontrol-small-padding-inline-end: var(--amplify-space-small);
   --amplify-components-fieldcontrol-small-padding-inline-start: var(--amplify-space-small);
-  --amplify-components-fieldcontrol-small-padding-block-end: var(--amplify-space-xs);
-  --amplify-components-fieldcontrol-small-padding-block-start: var(--amplify-space-xs);
+  --amplify-components-fieldcontrol-small-padding-block-end: var(--amplify-space-xxs);
+  --amplify-components-fieldcontrol-small-padding-block-start: var(--amplify-space-xxs);
   --amplify-components-fieldcontrol-small-font-size: var(--amplify-components-field-small-font-size);
   --amplify-components-fieldcontrol-outline-offset: var(--amplify-outline-offsets-medium);
   --amplify-components-fieldcontrol-outline-width: var(--amplify-outline-widths-medium);
@@ -672,6 +672,7 @@
   --amplify-components-card-elevated-border-width: 0;
   --amplify-components-card-elevated-border-radius: var(--amplify-radii-xs);
   --amplify-components-card-elevated-background-color: var(--amplify-components-card-background-color);
+  --amplify-components-card-outlined-box-shadow: var(--amplify-components-card-box-shadow);
   --amplify-components-card-outlined-border-color: var(--amplify-colors-border-primary);
   --amplify-components-card-outlined-border-style: solid;
   --amplify-components-card-outlined-border-width: var(--amplify-border-widths-small);
@@ -684,6 +685,8 @@
   --amplify-components-card-border-width: 0;
   --amplify-components-card-border-radius: var(--amplify-radii-xs);
   --amplify-components-card-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-button-loader-wrapper-gap: var(--amplify-space-xs);
+  --amplify-components-button-loader-wrapper-align-items: center;
   --amplify-components-button-large-padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
   --amplify-components-button-large-padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
   --amplify-components-button-large-padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
@@ -734,8 +737,8 @@
   --amplify-components-button-primary-hover-color: var(--amplify-colors-font-inverse);
   --amplify-components-button-primary-hover-background-color: var(--amplify-colors-brand-primary-90);
   --amplify-components-button-primary-hover-border-color: transparent;
-  --amplify-components-button-primary-loading-color: var(--amplify-colors-font-inverse);
-  --amplify-components-button-primary-loading-background-color: var(--amplify-colors-background-tertiary);
+  --amplify-components-button-primary-loading-color: var(--amplify-colors-font-disabled);
+  --amplify-components-button-primary-loading-background-color: var(--amplify-colors-background-disabled);
   --amplify-components-button-primary-loading-border-color: transparent;
   --amplify-components-button-primary-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-button-primary-disabled-background-color: var(--amplify-colors-background-disabled);
@@ -750,7 +753,7 @@
   --amplify-components-button-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-button-loading-border-color: var(--amplify-colors-border-tertiary);
   --amplify-components-button-loading-background-color: transparent;
-  --amplify-components-button-loading-color: var(--amplify-colors-font-tertiary);
+  --amplify-components-button-loading-color: var(--amplify-colors-font-disabled);
   --amplify-components-button-active-border-color: var(--amplify-colors-brand-primary-100);
   --amplify-components-button-active-background-color: var(--amplify-colors-brand-primary-20);
   --amplify-components-button-active-color: var(--amplify-colors-font-active);
@@ -816,22 +819,46 @@
   --amplify-components-alert-align-items: center;
 }
 
-[data-amplify-theme] {
+html {
   font-family: var(--amplify-fonts-default-static);
 }
 
 @supports (font-variation-settings: normal) {
-  [data-amplify-theme] {
+  html {
     font-family: var(--amplify-fonts-default-variable);
   }
 }
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: var(--amplify-line-heights-medium);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+}
 [class*=amplify] {
   all: unset;
   /* protect against external styles */
-}
-
-[data-amplify-theme] * {
   box-sizing: border-box;
+  /* set box-sizing after unset above */
 }
 
 .sr-only {
@@ -846,6 +873,32 @@
   border-width: 0 !important;
 }
 
+.amplify-flex {
+  align-content: var(--amplify-components-flex-align-content);
+  align-items: var(--amplify-components-flex-align-items);
+  display: flex;
+  flex-wrap: var(--amplify-components-flex-flex-wrap);
+  gap: var(--amplify-components-flex-gap);
+  justify-content: var(--amplify-components-flex-justify-content);
+}
+
+.amplify-grid {
+  display: grid;
+}
+
+.amplify-scrollview {
+  display: block;
+  overflow: scroll;
+}
+.amplify-scrollview[data-orientation=horizontal] {
+  overflow-x: scroll;
+  overflow-y: initial;
+}
+.amplify-scrollview[data-orientation=vertical] {
+  overflow-x: initial;
+  overflow-y: scroll;
+}
+
 .amplify-text {
   color: var(--amplify-components-text-color);
   display: block;
@@ -1028,16 +1081,16 @@ strong.amplify-text {
   border-color: var(--amplify-components-button-primary-active-border-color);
   color: var(--amplify-components-button-primary-active-color);
 }
-.amplify-button[data-variation=primary][data-loading=true] {
-  background-color: var(--amplify-components-button-primary-loading-background-color);
-  border-color: var(--amplify-components-button-primary-loading-border-color);
-  color: var(--amplify-components-button-primary-loading-color);
-}
 .amplify-button[data-variation=primary][disabled] {
   background-color: var(--amplify-components-button-primary-disabled-background-color);
   border-color: var(--amplify-components-button-primary-disabled-border-color);
   color: var(--amplify-components-button-primary-disabled-color);
 }
+.amplify-button[data-variation=primary][data-loading=true] {
+  background-color: var(--amplify-components-button-primary-loading-background-color);
+  border-color: var(--amplify-components-button-primary-loading-border-color);
+  color: var(--amplify-components-button-primary-loading-color);
+}
 .amplify-button[data-variation=link] {
   border-width: var(--amplify-components-button-link-border-width);
   background-color: var(--amplify-components-button-link-background-color);
@@ -1094,6 +1147,11 @@ strong.amplify-text {
           padding-inline-end: var(--amplify-components-button-large-padding-inline-end);
 }
 
+.amplify-button__loader-wrapper {
+  align-items: var(--amplify-components-button-loader-wrapper-align-items);
+  gap: var(--amplify-components-button-loader-wrapper-gap);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .amplify-button {
     transition: none;
@@ -1176,6 +1234,11 @@ h6.amplify-heading {
           text-decoration: var(--amplify-components-link-text-decoration);
   cursor: pointer;
 }
+.amplify-link:visited {
+  color: var(--amplify-components-link-visited-color);
+  -webkit-text-decoration: var(--amplify-components-link-visited-text-decoration);
+          text-decoration: var(--amplify-components-link-visited-text-decoration);
+}
 .amplify-link:active {
   color: var(--amplify-components-link-active-color);
   -webkit-text-decoration: var(--amplify-components-link-active-text-decoration);
@@ -1191,11 +1254,6 @@ h6.amplify-heading {
   -webkit-text-decoration: var(--amplify-components-link-hover-text-decoration);
           text-decoration: var(--amplify-components-link-hover-text-decoration);
 }
-.amplify-link:visited {
-  color: var(--amplify-components-link-visited-color);
-  -webkit-text-decoration: var(--amplify-components-link-visited-text-decoration);
-          text-decoration: var(--amplify-components-link-visited-text-decoration);
-}
 .amplify-link[data-size=small] {
   font-size: var(--amplify-components-link-small-font-size);
 }
@@ -1362,32 +1420,6 @@ h6.amplify-heading {
     background-color: var(--amplify-components-placeholder-end-color);
   }
 }
-.amplify-flex {
-  align-content: var(--amplify-components-flex-align-content);
-  align-items: var(--amplify-components-flex-align-items);
-  display: flex;
-  flex-wrap: var(--amplify-components-flex-flex-wrap);
-  gap: var(--amplify-components-flex-gap);
-  justify-content: var(--amplify-components-flex-justify-content);
-}
-
-.amplify-grid {
-  display: grid;
-}
-
-.amplify-scrollview {
-  display: block;
-  overflow: scroll;
-}
-.amplify-scrollview[data-orientation=horizontal] {
-  overflow-x: scroll;
-  overflow-y: initial;
-}
-.amplify-scrollview[data-orientation=vertical] {
-  overflow-x: initial;
-  overflow-y: scroll;
-}
-
 .amplify-alert {
   align-items: var(--amplify-components-alert-align-items);
   justify-content: var(--amplify-components-alert-justify-content);
@@ -1958,6 +1990,22 @@ h6.amplify-heading {
   color: var(--amplify-components-field-label-color);
 }
 
+[data-label-position=start] {
+  flex-direction: row;
+}
+
+[data-label-position=end] {
+  flex-direction: row-reverse;
+}
+
+[data-label-position=top] {
+  flex-direction: column;
+}
+
+[data-label-position=bottom] {
+  flex-direction: column-reverse;
+}
+
 .amplify-field-group__outer-end .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select:not(:first-child), .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input {
   border-start-start-radius: 0;
   border-end-start-radius: 0;

package/dist/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Jan 2022 23:18:54 GMT
+ * Generated on Thu, 17 Feb 2022 23:14:37 GMT
  */
 
 :root, [data-amplify-theme] {
@@ -56,8 +56,8 @@
   --amplify-opacities-10: 0.1;
   --amplify-opacities-0: 0;
   --amplify-line-heights-large: 2;
-  --amplify-line-heights-medium: 1.75;
-  --amplify-line-heights-small: 1.5;
+  --amplify-line-heights-medium: 1.5;
+  --amplify-line-heights-small: 1.25;
   --amplify-font-weights-black: 900;
   --amplify-font-weights-extrabold: 800;
   --amplify-font-weights-bold: 700;
@@ -67,8 +67,8 @@
   --amplify-font-weights-light: 300;
   --amplify-font-weights-thin: 200;
   --amplify-font-weights-hairline: 100;
-  --amplify-font-sizes-xxxxl: 5rem;
-  --amplify-font-sizes-xxxl: 3rem;
+  --amplify-font-sizes-xxxxl: 3rem;
+  --amplify-font-sizes-xxxl: 2.5rem;
   --amplify-font-sizes-xxl: 2rem;
   --amplify-font-sizes-xl: 1.5rem;
   --amplify-font-sizes-large: 1.25rem;
@@ -235,7 +235,7 @@
   --amplify-components-togglebutton-primary-background-color: var(--amplify-colors-transparent);
   --amplify-components-togglebutton-pressed-hover-background-color: var(--amplify-colors-overlay-30);
   --amplify-components-togglebutton-pressed-background-color: var(--amplify-colors-overlay-20);
-  --amplify-components-togglebutton-pressed-color: var(--amplify-colors-overlay-90);
+  --amplify-components-togglebutton-pressed-color: var(--amplify-colors-font-primary);
   --amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-secondary);
   --amplify-components-togglebutton-disabled-background-color: var(--amplify-colors-transparent);
@@ -337,9 +337,9 @@
   --amplify-components-switchfield-thumb-border-radius: var(--amplify-radii-xxxl);
   --amplify-components-switchfield-thumb-border-color: var(--amplify-colors-border-tertiary);
   --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-switchfield-label-padding: var(--amplify-space-xs);
   --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
   --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
-  --amplify-components-switchfield-label-padding: var(--amplify-space-xs);
   --amplify-components-switchfield-focused-shadow: var(--amplify-shadows-small);
   --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
   --amplify-components-stepperfield-input-text-align: center;
@@ -360,7 +360,7 @@
   --amplify-components-sliderfield-thumb-border-color: var(--amplify-colors-border-primary);
   --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-small);
   --amplify-components-sliderfield-thumb-border-radius: 50%;
-  --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-medium);
+  --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-small);
   --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-background-primary);
   --amplify-components-sliderfield-thumb-height: 1.25rem;
   --amplify-components-sliderfield-thumb-width: 1.25rem;
@@ -472,28 +472,28 @@
   --amplify-components-menu-box-shadow: var(--amplify-shadows-large);
   --amplify-components-menu-border-radius: var(--amplify-radii-medium);
   --amplify-components-menu-background-color: var(--amplify-colors-white);
-  --amplify-components-loader-linear-large-stroke-width: var(--amplify-font-sizes-xs);
-  --amplify-components-loader-linear-large-height: var(--amplify-font-sizes-xs);
-  --amplify-components-loader-linear-small-stroke-width: var(--amplify-font-sizes-xxxs);
-  --amplify-components-loader-linear-small-height: var(--amplify-font-sizes-xxxs);
+  --amplify-components-loader-linear-large-stroke-width: var(--amplify-font-sizes-large);
+  --amplify-components-loader-linear-large-height: var(--amplify-font-sizes-large);
+  --amplify-components-loader-linear-small-stroke-width: var(--amplify-font-sizes-small);
+  --amplify-components-loader-linear-small-height: var(--amplify-font-sizes-small);
   --amplify-components-loader-linear-animation-duration: 1s;
   --amplify-components-loader-linear-stroke-linecap: round;
   --amplify-components-loader-linear-stroke-empty: var(--amplify-colors-neutral-20);
   --amplify-components-loader-linear-stroke-filled: var(--amplify-colors-brand-primary-80);
-  --amplify-components-loader-linear-stroke-width: var(--amplify-font-sizes-xxs);
-  --amplify-components-loader-linear-height: var(--amplify-font-sizes-xxs);
+  --amplify-components-loader-linear-stroke-width: var(--amplify-font-sizes-medium);
+  --amplify-components-loader-linear-height: var(--amplify-font-sizes-medium);
   --amplify-components-loader-linear-min-width: 5rem;
   --amplify-components-loader-linear-width: 100%;
-  --amplify-components-loader-large-height: var(--amplify-font-sizes-xxxl);
-  --amplify-components-loader-large-width: var(--amplify-font-sizes-xxxl);
-  --amplify-components-loader-small-height: var(--amplify-font-sizes-medium);
-  --amplify-components-loader-small-width: var(--amplify-font-sizes-medium);
+  --amplify-components-loader-large-height: var(--amplify-font-sizes-large);
+  --amplify-components-loader-large-width: var(--amplify-font-sizes-large);
+  --amplify-components-loader-small-height: var(--amplify-font-sizes-small);
+  --amplify-components-loader-small-width: var(--amplify-font-sizes-small);
   --amplify-components-loader-animation-duration: 1s;
   --amplify-components-loader-stroke-linecap: round;
   --amplify-components-loader-stroke-filled: var(--amplify-colors-brand-primary-80);
   --amplify-components-loader-stroke-empty: var(--amplify-colors-neutral-20);
-  --amplify-components-loader-height: var(--amplify-font-sizes-xxl);
-  --amplify-components-loader-width: var(--amplify-font-sizes-xxl);
+  --amplify-components-loader-height: var(--amplify-font-sizes-medium);
+  --amplify-components-loader-width: var(--amplify-font-sizes-medium);
   --amplify-components-link-visited-color: var(--amplify-colors-font-interactive);
   --amplify-components-link-small-font-size: var(--amplify-font-sizes-small);
   --amplify-components-link-large-font-size: var(--amplify-font-sizes-large);
@@ -507,17 +507,17 @@
   --amplify-components-image-max-width: 100%;
   --amplify-components-icon-height: 1em;
   --amplify-components-icon-line-height: 1;
-  --amplify-components-heading-line-height: 1.25;
+  --amplify-components-heading-line-height: var(--amplify-line-heights-small);
   --amplify-components-heading-color: var(--amplify-colors-font-primary);
-  --amplify-components-heading-6-font-weight: var(--amplify-font-weights-bold);
+  --amplify-components-heading-6-font-weight: var(--amplify-font-weights-extrabold);
   --amplify-components-heading-6-font-size: var(--amplify-font-sizes-medium);
-  --amplify-components-heading-5-font-weight: var(--amplify-font-weights-semibold);
+  --amplify-components-heading-5-font-weight: var(--amplify-font-weights-bold);
   --amplify-components-heading-5-font-size: var(--amplify-font-sizes-large);
-  --amplify-components-heading-4-font-weight: var(--amplify-font-weights-medium);
+  --amplify-components-heading-4-font-weight: var(--amplify-font-weights-semibold);
   --amplify-components-heading-4-font-size: var(--amplify-font-sizes-xl);
-  --amplify-components-heading-3-font-weight: var(--amplify-font-weights-normal);
+  --amplify-components-heading-3-font-weight: var(--amplify-font-weights-medium);
   --amplify-components-heading-3-font-size: var(--amplify-font-sizes-xxl);
-  --amplify-components-heading-2-font-weight: var(--amplify-font-weights-light);
+  --amplify-components-heading-2-font-weight: var(--amplify-font-weights-normal);
   --amplify-components-heading-2-font-size: var(--amplify-font-sizes-xxxl);
   --amplify-components-heading-1-font-weight: var(--amplify-font-weights-light);
   --amplify-components-heading-1-font-size: var(--amplify-font-sizes-xxxxl);
@@ -559,8 +559,8 @@
   --amplify-components-fieldcontrol-large-font-size: var(--amplify-components-field-large-font-size);
   --amplify-components-fieldcontrol-small-padding-inline-end: var(--amplify-space-small);
   --amplify-components-fieldcontrol-small-padding-inline-start: var(--amplify-space-small);
-  --amplify-components-fieldcontrol-small-padding-block-end: var(--amplify-space-xs);
-  --amplify-components-fieldcontrol-small-padding-block-start: var(--amplify-space-xs);
+  --amplify-components-fieldcontrol-small-padding-block-end: var(--amplify-space-xxs);
+  --amplify-components-fieldcontrol-small-padding-block-start: var(--amplify-space-xxs);
   --amplify-components-fieldcontrol-small-font-size: var(--amplify-components-field-small-font-size);
   --amplify-components-fieldcontrol-outline-offset: var(--amplify-outline-offsets-medium);
   --amplify-components-fieldcontrol-outline-width: var(--amplify-outline-widths-medium);
@@ -670,6 +670,7 @@
   --amplify-components-card-elevated-border-width: 0;
   --amplify-components-card-elevated-border-radius: var(--amplify-radii-xs);
   --amplify-components-card-elevated-background-color: var(--amplify-components-card-background-color);
+  --amplify-components-card-outlined-box-shadow: var(--amplify-components-card-box-shadow);
   --amplify-components-card-outlined-border-color: var(--amplify-colors-border-primary);
   --amplify-components-card-outlined-border-style: solid;
   --amplify-components-card-outlined-border-width: var(--amplify-border-widths-small);
@@ -682,6 +683,8 @@
   --amplify-components-card-border-width: 0;
   --amplify-components-card-border-radius: var(--amplify-radii-xs);
   --amplify-components-card-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-button-loader-wrapper-gap: var(--amplify-space-xs);
+  --amplify-components-button-loader-wrapper-align-items: center;
   --amplify-components-button-large-padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
   --amplify-components-button-large-padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
   --amplify-components-button-large-padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
@@ -732,8 +735,8 @@
   --amplify-components-button-primary-hover-color: var(--amplify-colors-font-inverse);
   --amplify-components-button-primary-hover-background-color: var(--amplify-colors-brand-primary-90);
   --amplify-components-button-primary-hover-border-color: transparent;
-  --amplify-components-button-primary-loading-color: var(--amplify-colors-font-inverse);
-  --amplify-components-button-primary-loading-background-color: var(--amplify-colors-background-tertiary);
+  --amplify-components-button-primary-loading-color: var(--amplify-colors-font-disabled);
+  --amplify-components-button-primary-loading-background-color: var(--amplify-colors-background-disabled);
   --amplify-components-button-primary-loading-border-color: transparent;
   --amplify-components-button-primary-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-button-primary-disabled-background-color: var(--amplify-colors-background-disabled);
@@ -748,7 +751,7 @@
   --amplify-components-button-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-button-loading-border-color: var(--amplify-colors-border-tertiary);
   --amplify-components-button-loading-background-color: transparent;
-  --amplify-components-button-loading-color: var(--amplify-colors-font-tertiary);
+  --amplify-components-button-loading-color: var(--amplify-colors-font-disabled);
   --amplify-components-button-active-border-color: var(--amplify-colors-brand-primary-100);
   --amplify-components-button-active-background-color: var(--amplify-colors-brand-primary-20);
   --amplify-components-button-active-color: var(--amplify-colors-font-active);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui",
-  "version": "3.0.10",
+  "version": "3.0.14",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "exports": {
@@ -27,14 +27,15 @@
     "build:css": "./scripts/generateCSS.js",
     "build:js": "tsup --minify",
     "build:sd": "ts-node --transpile-only sd.config.ts",
+    "clean": "rimraf dist node_modules",
     "dev": "tsup --watch src",
     "lint": "tsc --noEmit",
     "test": "jest"
   },
   "dependencies": {
-    "lodash": "^4.17.21",
-    "style-dictionary": "^3.0.1",
-    "xstate": "^4.20.1"
+    "lodash": "4.17.21",
+    "style-dictionary": "3.0.3",
+    "xstate": "4.28.0"
   },
   "devDependencies": {
     "@types/jest": "^26.0.23",