@aws-amplify/ui 3.11.1 → 3.12.2

package/dist/styles.css

@@ -3,7 +3,7 @@
  */
 /**
  * Do not edit directly
- * Generated on Tue, 21 Jun 2022 22:00:04 GMT
+ * Generated on Tue, 12 Jul 2022 21:32:22 GMT
  */
 :root, [data-amplify-theme] {
   --amplify-transforms-slide-x-large: translateX(2em);
@@ -441,6 +441,8 @@
   --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-disabled-opacity: var(--amplify-opacities-60);
+  --amplify-components-stepperfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
+  --amplify-components-stepperfield-button-background-color: var(--amplify-colors-transparent);
   --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-medium);
   --amplify-components-sliderfield-padding-block: var(--amplify-space-xs);
   --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium);
@@ -683,9 +685,11 @@
   --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-background-primary);
   --amplify-components-sliderfield-range-background-color: var(--amplify-colors-brand-primary-80);
   --amplify-components-sliderfield-track-background-color: var(--amplify-colors-background-quaternary);
+  --amplify-components-select-option-color: var(--amplify-colors-font-primary);
   --amplify-components-select-option-background-color: var(--amplify-colors-background-primary);
   --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary);
   --amplify-components-rating-filled-color: var(--amplify-colors-brand-secondary-80);
+  --amplify-components-radiogroup-radio-border-width: var(--amplify-components-radio-button-border-width);
   --amplify-components-radio-label-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-radio-button-disabled-background-color: var(--amplify-colors-background-primary);
   --amplify-components-radio-button-error-border-color: var(--amplify-colors-border-error);
@@ -820,6 +824,7 @@
   --amplify-components-togglebutton-pressed-border-color: var(--amplify-colors-border-pressed);
   --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-disabled);
   --amplify-components-togglebutton-focus-border-color: var(--amplify-colors-border-focus);
+  --amplify-components-textfield-font-size: var(--amplify-components-fieldcontrol-font-size);
   --amplify-components-textfield-border-color: var(--amplify-components-fieldcontrol-border-color);
   --amplify-components-textfield-color: var(--amplify-components-fieldcontrol-color);
   --amplify-components-textareafield-border-color: var(--amplify-components-fieldcontrol-border-color);
@@ -829,11 +834,23 @@
   --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus);
   --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover);
   --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
+  --amplify-components-stepperfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
+  --amplify-components-stepperfield-button-disabled-color: var(--amplify-components-button-disabled-color);
+  --amplify-components-stepperfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
+  --amplify-components-stepperfield-button-active-background-color: var(--amplify-components-button-active-background-color);
+  --amplify-components-stepperfield-button-color: var(--amplify-components-button-color);
+  --amplify-components-stepperfield-input-font-size: var(--amplify-components-fieldcontrol-font-size);
+  --amplify-components-stepperfield-input-color: var(--amplify-components-fieldcontrol-color);
+  --amplify-components-stepperfield-border-color: var(--amplify-components-fieldcontrol-border-color);
   --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
   --amplify-components-sliderfield-thumb-focus-border-color: var(--amplify-colors-border-focus);
   --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
   --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled);
   --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled);
+  --amplify-components-selectfield-label-color: var(--amplify-components-field-label-color);
+  --amplify-components-selectfield-font-size: var(--amplify-components-fieldcontrol-font-size);
+  --amplify-components-selectfield-color: var(--amplify-components-fieldcontrol-color);
+  --amplify-components-selectfield-border-color: var(--amplify-components-fieldcontrol-border-color);
   --amplify-components-searchfield-button-hover-border-color: var(--amplify-components-button-hover-border-color);
   --amplify-components-searchfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
   --amplify-components-searchfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
@@ -843,10 +860,18 @@
   --amplify-components-searchfield-button-active-background-color: var(--amplify-components-button-active-background-color);
   --amplify-components-searchfield-button-color: var(--amplify-components-button-color);
   --amplify-components-searchfield-color: var(--amplify-components-fieldcontrol-color);
+  --amplify-components-radiogroup-label-color: var(--amplify-components-field-label-color);
+  --amplify-components-radiogroup-radio-checked-color: var(--amplify-components-radio-button-checked-color);
+  --amplify-components-radiogroup-radio-background-color: var(--amplify-components-radio-button-background-color);
+  --amplify-components-radiogroup-radio-border-color: var(--amplify-components-radio-button-border-color);
+  --amplify-components-radio-label-color: var(--amplify-components-text-color);
   --amplify-components-radio-button-disabled-border-color: var(--amplify-colors-border-disabled);
   --amplify-components-radio-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
   --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus);
   --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled);
+  --amplify-components-phonenumberfield-font-size: var(--amplify-components-fieldcontrol-font-size);
+  --amplify-components-phonenumberfield-border-color: var(--amplify-components-fieldcontrol-border-color);
+  --amplify-components-phonenumberfield-color: var(--amplify-components-fieldcontrol-color);
   --amplify-components-passwordfield-button-hover-border-color: var(--amplify-components-button-hover-border-color);
   --amplify-components-passwordfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
   --amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
@@ -893,11 +918,17 @@
   --amplify-components-togglebutton-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
   --amplify-components-textfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
   --amplify-components-textareafield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
+  --amplify-components-stepperfield-button-hover-color: var(--amplify-components-button-hover-color);
+  --amplify-components-stepperfield-button-focus-color: var(--amplify-components-button-focus-color);
+  --amplify-components-stepperfield-button-active-color: var(--amplify-components-button-active-color);
+  --amplify-components-selectfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
   --amplify-components-searchfield-button-hover-color: var(--amplify-components-button-hover-color);
   --amplify-components-searchfield-button-focus-color: var(--amplify-components-button-focus-color);
   --amplify-components-searchfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
   --amplify-components-searchfield-button-active-color: var(--amplify-components-button-active-color);
+  --amplify-components-radiogroup-radio-label-color: var(--amplify-components-radio-label-color);
   --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
+  --amplify-components-phonenumberfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
   --amplify-components-passwordfield-button-hover-color: var(--amplify-components-button-hover-color);
   --amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color);
   --amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
@@ -1411,6 +1442,10 @@ strong.amplify-text {
   outline-style: var(--amplify-components-fieldcontrol-outline-style);
   outline-width: var(--amplify-components-fieldcontrol-outline-width);
   outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
+  -webkit-user-select: text;
+     -moz-user-select: text;
+      -ms-user-select: text;
+          user-select: text;
 }
 .amplify-input:focus {
   border-color: var(--amplify-components-fieldcontrol-focus-border-color);
@@ -1494,6 +1529,10 @@ strong.amplify-text {
   outline-style: var(--amplify-components-fieldcontrol-outline-style);
   outline-width: var(--amplify-components-fieldcontrol-outline-width);
   outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
+  -webkit-user-select: text;
+     -moz-user-select: text;
+      -ms-user-select: text;
+          user-select: text;
 }
 .amplify-textarea:focus {
   border-color: var(--amplify-components-fieldcontrol-focus-border-color);
@@ -2598,6 +2637,33 @@ html[dir=rtl] .amplify-field-group__inner-start {
   border-right: none;
 }
 
+.amplify-phonenumberfield {
+  --amplify-components-selectfield-color: var(
+    --amplify-components-phonenumberfield-color
+  );
+  --amplify-components-selectfield-border-color: var(
+    --amplify-components-phonenumberfield-border-color
+  );
+  --amplify-components-selectfield-font-size: var(
+    --amplify-components-phonenumberfield-font-size
+  );
+  --amplify-components-selectfield-focus-border-color: var(
+    --amplify-components-phonenumberfield-focus-border-color
+  );
+  --amplify-components-textfield-color: var(
+    --amplify-components-phonenumberfield-color
+  );
+  --amplify-components-textfield-border-color: var(
+    --amplify-components-phonenumberfield-border-color
+  );
+  --amplify-components-textfield-font-size: var(
+    --amplify-components-phonenumberfield-font-size
+  );
+  --amplify-components-textfield-focus-border-color: var(
+    --amplify-components-phonenumberfield-focus-border-color
+  );
+}
+
 .amplify-rating {
   display: inline-flex;
   position: relative;
@@ -2658,6 +2724,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   justify-content: var(--amplify-components-radio-justify-content);
   gap: inherit;
   flex-direction: row-reverse;
+  --amplify-components-text-color: var(--amplify-components-radio-label-color);
 }
 .amplify-radio--disabled {
   cursor: var(--amplify-components-radio-disabled-cursor);
@@ -2740,6 +2807,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-radiogroupfield {
   flex-direction: column;
   align-items: flex-start;
+  --amplify-components-field-label-color: var(
+    --amplify-components-radiogroup-label-color
+  );
+  --amplify-components-radio-button-border-width: var(
+    --amplify-components-radiogroup-radio-border-width
+  );
+  --amplify-components-radio-button-border-color: var(
+    --amplify-components-radiogroup-radio-border-color
+  );
+  --amplify-components-radio-button-background-color: var(
+    --amplify-components-radiogroup-radio-background-color
+  );
+  --amplify-components-radio-label-color: var(
+    --amplify-components-radiogroup-radio-label-color
+  );
+  --amplify-components-radio-button-checked-color: var(
+    --amplify-components-radiogroup-radio-checked-color
+  );
 }
 
 .amplify-searchfield {
@@ -2873,14 +2958,15 @@ 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 option {
+  color: initial;
+}
 @-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 option {
-  color: initial;
-}
 .amplify-select--small {
   min-width: var(--amplify-components-select-small-min-width);
 }
@@ -2890,6 +2976,21 @@ html[dir=rtl] .amplify-field-group__inner-start {
 
 .amplify-selectfield {
   flex-direction: var(--amplify-components-selectfield-flex-direction);
+  --amplify-components-fieldcontrol-border-color: var(
+    --amplify-components-selectfield-border-color
+  );
+  --amplify-components-fieldcontrol-color: var(
+    --amplify-components-selectfield-color
+  );
+  --amplify-components-fieldcontrol-font-size: var(
+    --amplify-components-selectfield-font-size
+  );
+  --amplify-components-fieldcontrol-focus-border-color: var(
+    --amplify-components-selectfield-focus-border-color
+  );
+  --amplify-components-field-label-color: var(
+    --amplify-components-selectfield-label-color
+  );
 }
 
 .amplify-sliderfield {
@@ -3039,8 +3140,50 @@ html[dir=rtl] .amplify-field-group__inner-start {
 
 .amplify-stepperfield {
   flex-direction: var(--amplify-components-stepperfield-flex-direction);
+  --amplify-components-fieldcontrol-border-color: var(
+    --amplify-components-stepperfield-border-color
+  );
+  --amplify-components-button-border-color: var(
+    --amplify-components-stepperfield-border-color
+  );
+  --amplify-components-fieldcontrol-color: var(
+    --amplify-components-stepperfield-input-color
+  );
+  --amplify-components-fieldcontrol-font-size: var(
+    --amplify-components-stepperfield-input-font-size
+  );
+  --amplify-components-button-color: var(
+    --amplify-components-stepperfield-button-color
+  );
+  --amplify-components-button-active-color: var(
+    --amplify-components-stepperfield-button-active-color
+  );
+  --amplify-components-button-active-background-color: var(
+    --amplify-components-stepperfield-button-active-background-color
+  );
+  --amplify-components-button-focus-color: var(
+    --amplify-components-stepperfield-button-focus-color
+  );
+  --amplify-components-button-focus-background-color: var(
+    --amplify-components-stepperfield-button-focus-background-color
+  );
+  --amplify-components-button-disabled-color: var(
+    --amplify-components-stepperfield-button-disabled-color
+  );
+  --amplify-components-button-disabled-background-color: var(
+    --amplify-components-stepperfield-button-disabled-background-color
+  );
+  --amplify-components-button-hover-color: var(
+    --amplify-components-stepperfield-button-hover-color
+  );
+  --amplify-components-button-hover-background-color: var(
+    --amplify-components-stepperfield-button-hover-background-color
+  );
 }
 
+.amplify-stepperfield__button--decrease {
+  background-color: var(--amplify-components-stepperfield-button-background-color);
+}
 .amplify-stepperfield__button--decrease[data-invalid=true] {
   -webkit-border-end: none;
           border-inline-end: none;
@@ -3050,6 +3193,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
   border-radius: 0;
 }
 
+.amplify-stepperfield__button--increase {
+  background-color: var(--amplify-components-stepperfield-button-background-color);
+}
 .amplify-stepperfield__button--increase[data-invalid=true] {
   -webkit-border-start: none;
           border-inline-start: none;
@@ -3374,6 +3520,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
   --amplify-components-fieldcontrol-border-color: var(
     --amplify-components-textfield-border-color
   );
+  --amplify-components-fieldcontrol-font-size: var(
+    --amplify-components-textfield-font-size
+  );
   --amplify-components-fieldcontrol-focus-border-color: var(
     --amplify-components-textfield-focus-border-color
   );
@@ -3667,7 +3816,12 @@ html[dir=rtl] .amplify-field-group__inner-start {
   gap: 0;
 }
 
+.amplify-togglebuttongroup .amplify-togglebutton:focus, .amplify-togglebuttongroup .amplify-togglebutton.amplify-togglebutton--pressed {
+  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));
   border-start-start-radius: 0;
   border-end-start-radius: 0;
 }
@@ -3677,10 +3831,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
     border-bottom-left-radius: 0;
   }
 }
-.amplify-togglebuttongroup .amplify-togglebutton:not(:first-of-type):not(:focus) {
-  -webkit-border-start: 1px solid transparent;
-          border-inline-start: 1px solid transparent;
-}
 .amplify-togglebuttongroup .amplify-togglebutton:not(:last-of-type) {
   border-start-end-radius: 0;
   border-end-end-radius: 0;

package/dist/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 21 Jun 2022 22:00:04 GMT
+ * Generated on Tue, 12 Jul 2022 21:32:22 GMT
  */
 
 :root, [data-amplify-theme] {
@@ -439,6 +439,8 @@
   --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-disabled-opacity: var(--amplify-opacities-60);
+  --amplify-components-stepperfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
+  --amplify-components-stepperfield-button-background-color: var(--amplify-colors-transparent);
   --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-medium);
   --amplify-components-sliderfield-padding-block: var(--amplify-space-xs);
   --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium);
@@ -681,9 +683,11 @@
   --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-background-primary);
   --amplify-components-sliderfield-range-background-color: var(--amplify-colors-brand-primary-80);
   --amplify-components-sliderfield-track-background-color: var(--amplify-colors-background-quaternary);
+  --amplify-components-select-option-color: var(--amplify-colors-font-primary);
   --amplify-components-select-option-background-color: var(--amplify-colors-background-primary);
   --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary);
   --amplify-components-rating-filled-color: var(--amplify-colors-brand-secondary-80);
+  --amplify-components-radiogroup-radio-border-width: var(--amplify-components-radio-button-border-width);
   --amplify-components-radio-label-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-radio-button-disabled-background-color: var(--amplify-colors-background-primary);
   --amplify-components-radio-button-error-border-color: var(--amplify-colors-border-error);
@@ -818,6 +822,7 @@
   --amplify-components-togglebutton-pressed-border-color: var(--amplify-colors-border-pressed);
   --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-disabled);
   --amplify-components-togglebutton-focus-border-color: var(--amplify-colors-border-focus);
+  --amplify-components-textfield-font-size: var(--amplify-components-fieldcontrol-font-size);
   --amplify-components-textfield-border-color: var(--amplify-components-fieldcontrol-border-color);
   --amplify-components-textfield-color: var(--amplify-components-fieldcontrol-color);
   --amplify-components-textareafield-border-color: var(--amplify-components-fieldcontrol-border-color);
@@ -827,11 +832,23 @@
   --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus);
   --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover);
   --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
+  --amplify-components-stepperfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
+  --amplify-components-stepperfield-button-disabled-color: var(--amplify-components-button-disabled-color);
+  --amplify-components-stepperfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
+  --amplify-components-stepperfield-button-active-background-color: var(--amplify-components-button-active-background-color);
+  --amplify-components-stepperfield-button-color: var(--amplify-components-button-color);
+  --amplify-components-stepperfield-input-font-size: var(--amplify-components-fieldcontrol-font-size);
+  --amplify-components-stepperfield-input-color: var(--amplify-components-fieldcontrol-color);
+  --amplify-components-stepperfield-border-color: var(--amplify-components-fieldcontrol-border-color);
   --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
   --amplify-components-sliderfield-thumb-focus-border-color: var(--amplify-colors-border-focus);
   --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
   --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled);
   --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled);
+  --amplify-components-selectfield-label-color: var(--amplify-components-field-label-color);
+  --amplify-components-selectfield-font-size: var(--amplify-components-fieldcontrol-font-size);
+  --amplify-components-selectfield-color: var(--amplify-components-fieldcontrol-color);
+  --amplify-components-selectfield-border-color: var(--amplify-components-fieldcontrol-border-color);
   --amplify-components-searchfield-button-hover-border-color: var(--amplify-components-button-hover-border-color);
   --amplify-components-searchfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
   --amplify-components-searchfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
@@ -841,10 +858,18 @@
   --amplify-components-searchfield-button-active-background-color: var(--amplify-components-button-active-background-color);
   --amplify-components-searchfield-button-color: var(--amplify-components-button-color);
   --amplify-components-searchfield-color: var(--amplify-components-fieldcontrol-color);
+  --amplify-components-radiogroup-label-color: var(--amplify-components-field-label-color);
+  --amplify-components-radiogroup-radio-checked-color: var(--amplify-components-radio-button-checked-color);
+  --amplify-components-radiogroup-radio-background-color: var(--amplify-components-radio-button-background-color);
+  --amplify-components-radiogroup-radio-border-color: var(--amplify-components-radio-button-border-color);
+  --amplify-components-radio-label-color: var(--amplify-components-text-color);
   --amplify-components-radio-button-disabled-border-color: var(--amplify-colors-border-disabled);
   --amplify-components-radio-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
   --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus);
   --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled);
+  --amplify-components-phonenumberfield-font-size: var(--amplify-components-fieldcontrol-font-size);
+  --amplify-components-phonenumberfield-border-color: var(--amplify-components-fieldcontrol-border-color);
+  --amplify-components-phonenumberfield-color: var(--amplify-components-fieldcontrol-color);
   --amplify-components-passwordfield-button-hover-border-color: var(--amplify-components-button-hover-border-color);
   --amplify-components-passwordfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
   --amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
@@ -891,11 +916,17 @@
   --amplify-components-togglebutton-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
   --amplify-components-textfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
   --amplify-components-textareafield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
+  --amplify-components-stepperfield-button-hover-color: var(--amplify-components-button-hover-color);
+  --amplify-components-stepperfield-button-focus-color: var(--amplify-components-button-focus-color);
+  --amplify-components-stepperfield-button-active-color: var(--amplify-components-button-active-color);
+  --amplify-components-selectfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
   --amplify-components-searchfield-button-hover-color: var(--amplify-components-button-hover-color);
   --amplify-components-searchfield-button-focus-color: var(--amplify-components-button-focus-color);
   --amplify-components-searchfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
   --amplify-components-searchfield-button-active-color: var(--amplify-components-button-active-color);
+  --amplify-components-radiogroup-radio-label-color: var(--amplify-components-radio-label-color);
   --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
+  --amplify-components-phonenumberfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
   --amplify-components-passwordfield-button-hover-color: var(--amplify-components-button-hover-color);
   --amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color);
   --amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);

package/dist/types/helpers/authenticator/facade.d.ts

@@ -3,7 +3,6 @@
  * understandable authenticator contexts. We provide these contexts with
  * `useAuthenticator` hook/composable/service.
  */
-/// <reference types="amazon-cognito-identity-js" />
 import { Sender } from 'xstate';
 import { AuthEvent, AuthEventData, AuthMachineState } from '../../types';
 /**
@@ -39,7 +38,7 @@ export declare const getServiceContextFacade: (state: AuthMachineState) => {
     validationErrors: {
         [x: string]: string | string[];
     };
-    codeDeliveryDetails: import("amazon-cognito-identity-js").CodeDeliveryDetails;
+    codeDeliveryDetails: import("../../types").CodeDeliveryDetails;
 };
 export declare const getServiceFacade: ({ send, state }: {
     send: any;
@@ -54,7 +53,7 @@ export declare const getServiceFacade: ({ send, state }: {
     validationErrors: {
         [x: string]: string | string[];
     };
-    codeDeliveryDetails: import("amazon-cognito-identity-js").CodeDeliveryDetails;
+    codeDeliveryDetails: import("../../types").CodeDeliveryDetails;
     resendCode: (data?: AuthEventData) => void;
     signOut: (data?: AuthEventData) => void;
     submitForm: (data?: AuthEventData) => void;

package/dist/types/i18n/dictionaries/authenticator/de.d.ts

@@ -40,6 +40,7 @@ export declare const deDict: {
     'Reset password': string;
     'Reset your password': string;
     'Send Code': string;
+    'Send code': string;
     'Sign in': string;
     'Sign In': string;
     'Sign in to your account': string;
@@ -53,4 +54,8 @@ export declare const deDict: {
     'Username cannot be empty': string;
     Verify: string;
     'Verify Contact': string;
+    'We Emailed You': string;
+    'Your code is on the way. To log in, enter the code we emailed to': string;
+    'Your code is on the way. To log in, enter the code we texted to': string;
+    'It may take a minute to arrive.': string;
 };

package/dist/types/i18n/dictionaries/index.d.ts

@@ -40,6 +40,7 @@ export declare const deDict: {
     'Reset password': string;
     'Reset your password': string;
     'Send Code': string;
+    'Send code': string;
     'Sign in': string;
     'Sign In': string;
     'Sign in to your account': string;
@@ -53,6 +54,10 @@ export declare const deDict: {
     'Username cannot be empty': string;
     Verify: string;
     'Verify Contact': string;
+    'We Emailed You': string;
+    'Your code is on the way. To log in, enter the code we emailed to': string;
+    'Your code is on the way. To log in, enter the code we texted to': string;
+    'It may take a minute to arrive.': string;
 };
 export declare const enDict: {
     'Account recovery requires verified contact information': string;

package/dist/types/theme/tokens/components/index.d.ts

@@ -23,8 +23,10 @@ import { LoaderTokens } from './loader';
 import { MenuTokens } from './menu';
 import { PaginationTokens } from './pagination';
 import { PasswordFieldTokens } from './passwordField';
+import { PhoneNumberFieldTokens } from './phoneNumberField';
 import { PlaceholderTokens } from './placeholder';
 import { RadioTokens } from './radio';
+import { RadioGroupTokens } from './radioGroup';
 import { RatingTokens } from './rating';
 import { SearchFieldTokens } from './searchField';
 import { SelectTokens } from './select';
@@ -65,8 +67,10 @@ export interface ComponentTokens {
     menu: MenuTokens;
     pagination: PaginationTokens;
     passwordfield: PasswordFieldTokens;
+    phonenumberfield: PhoneNumberFieldTokens;
     placeholder: PlaceholderTokens;
     radio: RadioTokens;
+    radiogroup: RadioGroupTokens;
     rating: RatingTokens;
     searchfield: SearchFieldTokens;
     select: SelectTokens;

package/dist/types/theme/tokens/components/phoneNumberField.d.ts

@@ -0,0 +1,25 @@
+import { ColorValue, DesignToken, BorderColorValue, FontSizeValue } from '../types/designToken';
+export interface PhoneNumberFieldTokens {
+    color: DesignToken<ColorValue>;
+    borderColor: DesignToken<BorderColorValue>;
+    fontSize: DesignToken<FontSizeValue>;
+    _focus: {
+        borderColor: DesignToken<BorderColorValue>;
+    };
+}
+export declare const phonenumberfield: {
+    color: {
+        value: string;
+    };
+    borderColor: {
+        value: string;
+    };
+    fontSize: {
+        value: string;
+    };
+    _focus: {
+        borderColor: {
+            value: string;
+        };
+    };
+};

package/dist/types/theme/tokens/components/radio.d.ts

@@ -55,6 +55,7 @@ interface RadioButtonDisabledTokens {
     backgroundColor: DesignToken<BackgroundColorValue>;
 }
 interface RadioLabelTokens {
+    color: DesignToken<ColorValue>;
     _disabled: RadioLabelDisabledTokens;
 }
 interface RadioLabelDisabledTokens {

package/dist/types/theme/tokens/components/radioGroup.d.ts

@@ -0,0 +1,18 @@
+import { BackgroundColorValue, BorderColorValue, BorderWidthValue, ColorValue, DesignToken } from '../types/designToken';
+export interface RadioGroupTokens {
+    radio: {
+        borderWidth: DesignToken<BorderWidthValue>;
+        borderColor: DesignToken<BorderColorValue>;
+        backgroundColor: DesignToken<BackgroundColorValue>;
+        _checked: {
+            color: DesignToken<ColorValue>;
+        };
+        label: {
+            color: DesignToken<ColorValue>;
+        };
+    };
+    label: {
+        color: DesignToken<ColorValue>;
+    };
+}
+export declare const radiogroup: RadioGroupTokens;

package/dist/types/theme/tokens/components/select.d.ts

@@ -1,4 +1,4 @@
-import { AlignItemsValue, BackgroundColorValue, CursorValue, DesignToken, DisplayValue, FlexValue, PointerEventsValue, PositionValue, SpaceValue, TransformValue, WhiteSpaceValue } from '../types/designToken';
+import { AlignItemsValue, BackgroundColorValue, ColorValue, CursorValue, DesignToken, DisplayValue, FlexValue, PointerEventsValue, PositionValue, SpaceValue, TransformValue, WhiteSpaceValue } from '../types/designToken';
 interface SelectWrapperTokens {
     flex: DesignToken<FlexValue>;
     display: DesignToken<DisplayValue>;
@@ -15,6 +15,7 @@ interface SelectIconWrapperTokens {
 }
 interface SelectOptionTokens {
     backgroundColor: DesignToken<BackgroundColorValue>;
+    color: DesignToken<ColorValue>;
 }
 interface SelectSizeTokens {
     minWidth: DesignToken<SpaceValue>;

package/dist/types/theme/tokens/components/selectField.d.ts

@@ -1,5 +1,14 @@
-import { DesignToken, FlexDirectionValue } from '../types/designToken';
+import { DesignToken, FlexDirectionValue, ColorValue, BorderColorValue, FontSizeValue } from '../types/designToken';
 export interface SelectFieldTokens {
     flexDirection: DesignToken<FlexDirectionValue>;
+    color: DesignToken<ColorValue>;
+    borderColor: DesignToken<BorderColorValue>;
+    fontSize: DesignToken<FontSizeValue>;
+    _focus: {
+        borderColor: DesignToken<BorderColorValue>;
+    };
+    label: {
+        color: DesignToken<ColorValue>;
+    };
 }
 export declare const selectfield: SelectFieldTokens;

package/dist/types/theme/tokens/components/stepperField.d.ts

@@ -1,10 +1,25 @@
-import { DesignToken, FlexDirectionValue, TextAlignValue } from '../types/designToken';
+import { ColorValue, DesignToken, FontSizeValue, FlexDirectionValue, TextAlignValue, BorderColorValue } from '../types/designToken';
 interface StepperFieldInputTokens {
     textAlign: DesignToken<TextAlignValue>;
+    color: DesignToken<ColorValue>;
+    fontSize: DesignToken<FontSizeValue>;
+}
+interface ButtonStateColorTokens {
+    color: DesignToken<ColorValue>;
+    backgroundColor: DesignToken<ColorValue>;
 }
 export interface StepperFieldTokens {
+    borderColor: DesignToken<BorderColorValue>;
     flexDirection: DesignToken<FlexDirectionValue>;
     input: StepperFieldInputTokens;
+    button: {
+        color: DesignToken<ColorValue>;
+        backgroundColor: DesignToken<ColorValue>;
+        _active: ButtonStateColorTokens;
+        _focus: ButtonStateColorTokens;
+        _disabled: ButtonStateColorTokens;
+        _hover: ButtonStateColorTokens;
+    };
 }
 export declare const stepperfield: StepperFieldTokens;
 export {};

package/dist/types/theme/tokens/components/textField.d.ts

@@ -1,10 +1,11 @@
-import { ColorValue, DesignToken, BorderColorValue } from '../types/designToken';
+import { ColorValue, DesignToken, BorderColorValue, FontSizeValue } from '../types/designToken';
 interface TextFieldStateToken {
     borderColor: DesignToken<BorderColorValue>;
 }
 export interface TextFieldTokens {
     color: DesignToken<ColorValue>;
     borderColor: DesignToken<BorderColorValue>;
+    fontSize: DesignToken<FontSizeValue>;
     _focus: TextFieldStateToken;
 }
 export declare const textfield: TextFieldTokens;

package/dist/types/types/authenticator/stateMachine/context.d.ts

@@ -1,7 +1,7 @@
 import { ValidationError } from '../validator';
 import { AuthFormData, AuthFormFields } from '../form';
 import { AuthChallengeNames, CognitoUserAmplify } from '../user';
-import { CodeDeliveryDetails } from 'amazon-cognito-identity-js';
+import { CodeDeliveryDetails as CognitoCodeDeliveryDetails } from 'amazon-cognito-identity-js';
 import { LoginMechanism, SignUpAttribute, SocialProvider } from '../attributes';
 import { defaultServices } from '../../../machines/authenticator/defaultServices';
 import { PasswordSettings } from '..';
@@ -39,6 +39,8 @@ export interface AuthContext {
     actorDoneData?: Omit<ActorDoneData, 'user'>;
     hasSetup?: boolean;
 }
+export interface CodeDeliveryDetails extends CognitoCodeDeliveryDetails {
+}
 /**
  * Base context for all actors that have auth forms associated
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui",
-  "version": "3.11.1",
+  "version": "3.12.2",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "exports": {