@aws-amplify/ui 3.10.1 → 3.12.0

package/dist/styles.css

@@ -3,7 +3,7 @@
  */
 /**
  * Do not edit directly
- * Generated on Tue, 14 Jun 2022 23:36:33 GMT
+ * Generated on Thu, 23 Jun 2022 22:01:45 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);
@@ -466,6 +468,7 @@
   --amplify-components-placeholder-small-height: var(--amplify-space-small);
   --amplify-components-placeholder-transition-duration: var(--amplify-time-long);
   --amplify-components-placeholder-border-radius: var(--amplify-radii-small);
+  --amplify-components-passwordfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
   --amplify-components-pagination-item-shared-border-radius: var(--amplify-font-sizes-medium);
   --amplify-components-pagination-item-shared-min-width: var(--amplify-font-sizes-xxl);
   --amplify-components-pagination-item-shared-height: var(--amplify-font-sizes-xxl);
@@ -685,6 +688,7 @@
   --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);
@@ -819,16 +823,33 @@
   --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);
+  --amplify-components-textareafield-color: var(--amplify-components-fieldcontrol-color);
   --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive);
   --amplify-components-tabs-item-active-color: var(--amplify-colors-font-interactive);
   --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);
@@ -838,10 +859,27 @@
   --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);
+  --amplify-components-passwordfield-button-disabled-color: var(--amplify-components-button-disabled-color);
+  --amplify-components-passwordfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color);
+  --amplify-components-passwordfield-button-active-border-color: var(--amplify-components-button-active-border-color);
+  --amplify-components-passwordfield-button-active-background-color: var(--amplify-components-button-active-background-color);
+  --amplify-components-passwordfield-button-color: var(--amplify-components-button-color);
+  --amplify-components-passwordfield-color: var(--amplify-components-fieldcontrol-color);
   --amplify-components-link-visited-color: var(--amplify-colors-font-interactive);
   --amplify-components-link-hover-color: var(--amplify-colors-font-hover);
   --amplify-components-link-focus-color: var(--amplify-colors-font-focus);
@@ -877,11 +915,23 @@
   --amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color);
   --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size);
   --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);
+  --amplify-components-passwordfield-button-active-color: var(--amplify-components-button-active-color);
   --amplify-components-collection-search-button-hover-border-color: var(--amplify-components-searchfield-button-hover-border-color);
   --amplify-components-collection-search-button-hover-background-color: var(--amplify-components-searchfield-button-hover-background-color);
   --amplify-components-collection-search-button-focus-background-color: var(--amplify-components-searchfield-button-focus-background-color);
@@ -2421,6 +2471,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
   height: 100%;
 }
 
+[data-radix-popper-content-wrapper] {
+  z-index: 999999;
+}
+
 .amplify-menu-trigger {
   display: flex;
   justify-content: center;
@@ -2525,10 +2579,82 @@ html[dir=rtl] .amplify-field-group__inner-start {
           padding-inline-end: var(--amplify-components-pagination-ellipsis-padding-inline-end);
 }
 
+.amplify-passwordfield {
+  --amplify-components-fieldcontrol-color: var(
+    --amplify-components-passwordfield-color
+  );
+  --amplify-components-button-color: var(
+    --amplify-components-passwordfield-button-color
+  );
+  --amplify-components-button-active-background-color: var(
+    --amplify-components-passwordfield-button-active-background-color
+  );
+  --amplify-components-button-active-border-color: var(
+    --amplify-components-passwordfield-button-active-border-color
+  );
+  --amplify-components-button-active-color: var(
+    --amplify-components-passwordfield-button-active-color
+  );
+  --amplify-components-button-disabled-background-color: var(
+    --amplify-components-passwordfield-button-disabled-background-color
+  );
+  --amplify-components-button-disabled-border-color: var(
+    --amplify-components-passwordfield-button-disabled-border-color
+  );
+  --amplify-components-button-disabled-color: var(
+    --amplify-components-passwordfield-button-disabled-color
+  );
+  --amplify-components-button-focus-background-color: var(
+    --amplify-components-passwordfield-button-focus-background-color
+  );
+  --amplify-components-button-focus-border-color: var(
+    --amplify-components-passwordfield-button-focus-border-color
+  );
+  --amplify-components-button-focus-color: var(
+    --amplify-components-passwordfield-button-focus-color
+  );
+  --amplify-components-button-hover-background-color: var(
+    --amplify-components-passwordfield-button-hover-background-color
+  );
+  --amplify-components-button-hover-border-color: var(
+    --amplify-components-passwordfield-button-hover-border-color
+  );
+  --amplify-components-button-hover-color: var(
+    --amplify-components-passwordfield-button-hover-color
+  );
+}
+
 .amplify-phonenumberfield select:not(:focus) {
   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;
@@ -2589,6 +2715,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);
@@ -2671,6 +2798,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 {
@@ -2821,6 +2966,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 {
@@ -2970,8 +3130,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;
@@ -2981,6 +3183,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;
@@ -3286,10 +3491,31 @@ html[dir=rtl] .amplify-field-group__inner-start {
 
 .amplify-textareafield {
   flex-direction: column;
+  --amplify-components-fieldcontrol-color: var(
+    --amplify-components-textareafield-color
+  );
+  --amplify-components-fieldcontrol-border-color: var(
+    --amplify-components-textareafield-border-color
+  );
+  --amplify-components-fieldcontrol-focus-border-color: var(
+    --amplify-components-textareafield-focus-border-color
+  );
 }
 
 .amplify-textfield {
   flex-direction: column;
+  --amplify-components-fieldcontrol-color: var(
+    --amplify-components-textfield-color
+  );
+  --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
+  );
 }
 
 .amplify-togglebutton {

package/dist/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 14 Jun 2022 23:36:33 GMT
+ * Generated on Thu, 23 Jun 2022 22:01:45 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);
@@ -464,6 +466,7 @@
   --amplify-components-placeholder-small-height: var(--amplify-space-small);
   --amplify-components-placeholder-transition-duration: var(--amplify-time-long);
   --amplify-components-placeholder-border-radius: var(--amplify-radii-small);
+  --amplify-components-passwordfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
   --amplify-components-pagination-item-shared-border-radius: var(--amplify-font-sizes-medium);
   --amplify-components-pagination-item-shared-min-width: var(--amplify-font-sizes-xxl);
   --amplify-components-pagination-item-shared-height: var(--amplify-font-sizes-xxl);
@@ -683,6 +686,7 @@
   --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);
@@ -817,16 +821,33 @@
   --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);
+  --amplify-components-textareafield-color: var(--amplify-components-fieldcontrol-color);
   --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive);
   --amplify-components-tabs-item-active-color: var(--amplify-colors-font-interactive);
   --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);
@@ -836,10 +857,27 @@
   --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);
+  --amplify-components-passwordfield-button-disabled-color: var(--amplify-components-button-disabled-color);
+  --amplify-components-passwordfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color);
+  --amplify-components-passwordfield-button-active-border-color: var(--amplify-components-button-active-border-color);
+  --amplify-components-passwordfield-button-active-background-color: var(--amplify-components-button-active-background-color);
+  --amplify-components-passwordfield-button-color: var(--amplify-components-button-color);
+  --amplify-components-passwordfield-color: var(--amplify-components-fieldcontrol-color);
   --amplify-components-link-visited-color: var(--amplify-colors-font-interactive);
   --amplify-components-link-hover-color: var(--amplify-colors-font-hover);
   --amplify-components-link-focus-color: var(--amplify-colors-font-focus);
@@ -875,11 +913,23 @@
   --amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color);
   --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size);
   --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);
+  --amplify-components-passwordfield-button-active-color: var(--amplify-components-button-active-color);
   --amplify-components-collection-search-button-hover-border-color: var(--amplify-components-searchfield-button-hover-border-color);
   --amplify-components-collection-search-button-hover-background-color: var(--amplify-components-searchfield-button-hover-background-color);
   --amplify-components-collection-search-button-focus-background-color: var(--amplify-components-searchfield-button-focus-background-color);

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

@@ -3,3 +3,9 @@
  */
 import { DefaultFormFieldOptions } from '../../types';
 export declare const defaultFormFieldOptions: DefaultFormFieldOptions;
+/**
+ * List of special characters that Cognito allows.
+ *
+ * Adapted from https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-settings-policies.html
+ */
+export declare const ALLOWED_SPECIAL_CHARACTERS: string[];

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/helpers/authenticator/utils.d.ts

@@ -15,3 +15,4 @@ export declare const defaultAuthHubHandler: HubHandler;
  * @returns function that unsubscribes to the hub evenmt
  */
 export declare const listenToAuthHub: (service: AuthInterpreter, handler?: HubHandler) => () => void;
+export declare const hasSpecialChars: (password: string) => boolean;

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

@@ -22,8 +22,11 @@ import { LinkTokens } from './link';
 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';
@@ -34,6 +37,8 @@ import { SwitchFieldTokens } from './switchField';
 import { TableTokens } from './table';
 import { TabsTokens } from './tabs';
 import { TextTokens } from './text';
+import { TextAreaFieldTokens } from './textAreaField';
+import { TextFieldTokens } from './textField';
 import { ToggleButtonTokens } from './toggleButton';
 import { ToggleButtonGroupTokens } from './toggleButtonGroup';
 export interface ComponentTokens {
@@ -61,8 +66,11 @@ export interface ComponentTokens {
     loader: LoaderTokens;
     menu: MenuTokens;
     pagination: PaginationTokens;
+    passwordfield: PasswordFieldTokens;
+    phonenumberfield: PhoneNumberFieldTokens;
     placeholder: PlaceholderTokens;
     radio: RadioTokens;
+    radiogroup: RadioGroupTokens;
     rating: RatingTokens;
     searchfield: SearchFieldTokens;
     select: SelectTokens;
@@ -73,6 +81,8 @@ export interface ComponentTokens {
     table: TableTokens;
     tabs: TabsTokens;
     text: TextTokens;
+    textareafield: TextAreaFieldTokens;
+    textfield: TextFieldTokens;
     togglebutton: ToggleButtonTokens;
     togglebuttongroup: ToggleButtonGroupTokens;
 }

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

@@ -0,0 +1,15 @@
+import { ColorValue, DesignToken } from '../types/designToken';
+import { StateTokens } from './button';
+interface ButtonTokens {
+    color: DesignToken<ColorValue>;
+    _active: StateTokens;
+    _disabled: StateTokens;
+    _focus: StateTokens;
+    _hover: StateTokens;
+}
+export interface PasswordFieldTokens {
+    color: DesignToken<ColorValue>;
+    button: ButtonTokens;
+}
+export declare const passwordfield: PasswordFieldTokens;
+export {};

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