@aws-amplify/ui 3.11.0 → 3.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/esm/i18n/dictionaries/authenticator/de.js +1 -1
  2. package/dist/esm/theme/createTheme.js +1 -1
  3. package/dist/esm/theme/tokens/components/index.js +1 -1
  4. package/dist/esm/theme/tokens/components/phoneNumberField.js +1 -0
  5. package/dist/esm/theme/tokens/components/radio.js +1 -1
  6. package/dist/esm/theme/tokens/components/radioGroup.js +1 -0
  7. package/dist/esm/theme/tokens/components/selectField.js +1 -1
  8. package/dist/esm/theme/tokens/components/stepperField.js +1 -1
  9. package/dist/esm/theme/tokens/components/textField.js +1 -1
  10. package/dist/index.js +1 -1
  11. package/dist/styles.css +140 -1
  12. package/dist/theme.css +31 -1
  13. package/dist/types/helpers/authenticator/facade.d.ts +2 -3
  14. package/dist/types/i18n/dictionaries/authenticator/de.d.ts +5 -0
  15. package/dist/types/i18n/dictionaries/index.d.ts +5 -0
  16. package/dist/types/theme/tokens/components/index.d.ts +4 -0
  17. package/dist/types/theme/tokens/components/phoneNumberField.d.ts +25 -0
  18. package/dist/types/theme/tokens/components/radio.d.ts +1 -0
  19. package/dist/types/theme/tokens/components/radioGroup.d.ts +18 -0
  20. package/dist/types/theme/tokens/components/selectField.d.ts +10 -1
  21. package/dist/types/theme/tokens/components/stepperField.d.ts +16 -1
  22. package/dist/types/theme/tokens/components/textField.d.ts +2 -1
  23. package/dist/types/types/authenticator/stateMachine/context.d.ts +3 -1
  24. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
  /**
5
5
  * Do not edit directly
6
- * Generated on Fri, 17 Jun 2022 21:04:04 GMT
6
+ * Generated on Wed, 29 Jun 2022 22:47:24 GMT
7
7
  */
8
8
  :root, [data-amplify-theme] {
9
9
  --amplify-transforms-slide-x-large: translateX(2em);
@@ -441,6 +441,8 @@
441
441
  --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
442
442
  --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
443
443
  --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
444
+ --amplify-components-stepperfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
445
+ --amplify-components-stepperfield-button-background-color: var(--amplify-colors-transparent);
444
446
  --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-medium);
445
447
  --amplify-components-sliderfield-padding-block: var(--amplify-space-xs);
446
448
  --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium);
@@ -686,6 +688,7 @@
686
688
  --amplify-components-select-option-background-color: var(--amplify-colors-background-primary);
687
689
  --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary);
688
690
  --amplify-components-rating-filled-color: var(--amplify-colors-brand-secondary-80);
691
+ --amplify-components-radiogroup-radio-border-width: var(--amplify-components-radio-button-border-width);
689
692
  --amplify-components-radio-label-disabled-color: var(--amplify-colors-font-disabled);
690
693
  --amplify-components-radio-button-disabled-background-color: var(--amplify-colors-background-primary);
691
694
  --amplify-components-radio-button-error-border-color: var(--amplify-colors-border-error);
@@ -820,6 +823,7 @@
820
823
  --amplify-components-togglebutton-pressed-border-color: var(--amplify-colors-border-pressed);
821
824
  --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-disabled);
822
825
  --amplify-components-togglebutton-focus-border-color: var(--amplify-colors-border-focus);
826
+ --amplify-components-textfield-font-size: var(--amplify-components-fieldcontrol-font-size);
823
827
  --amplify-components-textfield-border-color: var(--amplify-components-fieldcontrol-border-color);
824
828
  --amplify-components-textfield-color: var(--amplify-components-fieldcontrol-color);
825
829
  --amplify-components-textareafield-border-color: var(--amplify-components-fieldcontrol-border-color);
@@ -829,11 +833,23 @@
829
833
  --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus);
830
834
  --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover);
831
835
  --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
836
+ --amplify-components-stepperfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
837
+ --amplify-components-stepperfield-button-disabled-color: var(--amplify-components-button-disabled-color);
838
+ --amplify-components-stepperfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
839
+ --amplify-components-stepperfield-button-active-background-color: var(--amplify-components-button-active-background-color);
840
+ --amplify-components-stepperfield-button-color: var(--amplify-components-button-color);
841
+ --amplify-components-stepperfield-input-font-size: var(--amplify-components-fieldcontrol-font-size);
842
+ --amplify-components-stepperfield-input-color: var(--amplify-components-fieldcontrol-color);
843
+ --amplify-components-stepperfield-border-color: var(--amplify-components-fieldcontrol-border-color);
832
844
  --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
833
845
  --amplify-components-sliderfield-thumb-focus-border-color: var(--amplify-colors-border-focus);
834
846
  --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
835
847
  --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled);
836
848
  --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled);
849
+ --amplify-components-selectfield-label-color: var(--amplify-components-field-label-color);
850
+ --amplify-components-selectfield-font-size: var(--amplify-components-fieldcontrol-font-size);
851
+ --amplify-components-selectfield-color: var(--amplify-components-fieldcontrol-color);
852
+ --amplify-components-selectfield-border-color: var(--amplify-components-fieldcontrol-border-color);
837
853
  --amplify-components-searchfield-button-hover-border-color: var(--amplify-components-button-hover-border-color);
838
854
  --amplify-components-searchfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
839
855
  --amplify-components-searchfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
@@ -843,10 +859,18 @@
843
859
  --amplify-components-searchfield-button-active-background-color: var(--amplify-components-button-active-background-color);
844
860
  --amplify-components-searchfield-button-color: var(--amplify-components-button-color);
845
861
  --amplify-components-searchfield-color: var(--amplify-components-fieldcontrol-color);
862
+ --amplify-components-radiogroup-label-color: var(--amplify-components-field-label-color);
863
+ --amplify-components-radiogroup-radio-checked-color: var(--amplify-components-radio-button-checked-color);
864
+ --amplify-components-radiogroup-radio-background-color: var(--amplify-components-radio-button-background-color);
865
+ --amplify-components-radiogroup-radio-border-color: var(--amplify-components-radio-button-border-color);
866
+ --amplify-components-radio-label-color: var(--amplify-components-text-color);
846
867
  --amplify-components-radio-button-disabled-border-color: var(--amplify-colors-border-disabled);
847
868
  --amplify-components-radio-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
848
869
  --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus);
849
870
  --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled);
871
+ --amplify-components-phonenumberfield-font-size: var(--amplify-components-fieldcontrol-font-size);
872
+ --amplify-components-phonenumberfield-border-color: var(--amplify-components-fieldcontrol-border-color);
873
+ --amplify-components-phonenumberfield-color: var(--amplify-components-fieldcontrol-color);
850
874
  --amplify-components-passwordfield-button-hover-border-color: var(--amplify-components-button-hover-border-color);
851
875
  --amplify-components-passwordfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
852
876
  --amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
@@ -893,11 +917,17 @@
893
917
  --amplify-components-togglebutton-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
894
918
  --amplify-components-textfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
895
919
  --amplify-components-textareafield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
920
+ --amplify-components-stepperfield-button-hover-color: var(--amplify-components-button-hover-color);
921
+ --amplify-components-stepperfield-button-focus-color: var(--amplify-components-button-focus-color);
922
+ --amplify-components-stepperfield-button-active-color: var(--amplify-components-button-active-color);
923
+ --amplify-components-selectfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
896
924
  --amplify-components-searchfield-button-hover-color: var(--amplify-components-button-hover-color);
897
925
  --amplify-components-searchfield-button-focus-color: var(--amplify-components-button-focus-color);
898
926
  --amplify-components-searchfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
899
927
  --amplify-components-searchfield-button-active-color: var(--amplify-components-button-active-color);
928
+ --amplify-components-radiogroup-radio-label-color: var(--amplify-components-radio-label-color);
900
929
  --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
930
+ --amplify-components-phonenumberfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
901
931
  --amplify-components-passwordfield-button-hover-color: var(--amplify-components-button-hover-color);
902
932
  --amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color);
903
933
  --amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
@@ -2598,6 +2628,33 @@ html[dir=rtl] .amplify-field-group__inner-start {
2598
2628
  border-right: none;
2599
2629
  }
2600
2630
 
2631
+ .amplify-phonenumberfield {
2632
+ --amplify-components-selectfield-color: var(
2633
+ --amplify-components-phonenumberfield-color
2634
+ );
2635
+ --amplify-components-selectfield-border-color: var(
2636
+ --amplify-components-phonenumberfield-border-color
2637
+ );
2638
+ --amplify-components-selectfield-font-size: var(
2639
+ --amplify-components-phonenumberfield-font-size
2640
+ );
2641
+ --amplify-components-selectfield-focus-border-color: var(
2642
+ --amplify-components-phonenumberfield-focus-border-color
2643
+ );
2644
+ --amplify-components-textfield-color: var(
2645
+ --amplify-components-phonenumberfield-color
2646
+ );
2647
+ --amplify-components-textfield-border-color: var(
2648
+ --amplify-components-phonenumberfield-border-color
2649
+ );
2650
+ --amplify-components-textfield-font-size: var(
2651
+ --amplify-components-phonenumberfield-font-size
2652
+ );
2653
+ --amplify-components-textfield-focus-border-color: var(
2654
+ --amplify-components-phonenumberfield-focus-border-color
2655
+ );
2656
+ }
2657
+
2601
2658
  .amplify-rating {
2602
2659
  display: inline-flex;
2603
2660
  position: relative;
@@ -2658,6 +2715,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
2658
2715
  justify-content: var(--amplify-components-radio-justify-content);
2659
2716
  gap: inherit;
2660
2717
  flex-direction: row-reverse;
2718
+ --amplify-components-text-color: var(--amplify-components-radio-label-color);
2661
2719
  }
2662
2720
  .amplify-radio--disabled {
2663
2721
  cursor: var(--amplify-components-radio-disabled-cursor);
@@ -2740,6 +2798,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
2740
2798
  .amplify-radiogroupfield {
2741
2799
  flex-direction: column;
2742
2800
  align-items: flex-start;
2801
+ --amplify-components-field-label-color: var(
2802
+ --amplify-components-radiogroup-label-color
2803
+ );
2804
+ --amplify-components-radio-button-border-width: var(
2805
+ --amplify-components-radiogroup-radio-border-width
2806
+ );
2807
+ --amplify-components-radio-button-border-color: var(
2808
+ --amplify-components-radiogroup-radio-border-color
2809
+ );
2810
+ --amplify-components-radio-button-background-color: var(
2811
+ --amplify-components-radiogroup-radio-background-color
2812
+ );
2813
+ --amplify-components-radio-label-color: var(
2814
+ --amplify-components-radiogroup-radio-label-color
2815
+ );
2816
+ --amplify-components-radio-button-checked-color: var(
2817
+ --amplify-components-radiogroup-radio-checked-color
2818
+ );
2743
2819
  }
2744
2820
 
2745
2821
  .amplify-searchfield {
@@ -2890,6 +2966,21 @@ html[dir=rtl] .amplify-field-group__inner-start {
2890
2966
 
2891
2967
  .amplify-selectfield {
2892
2968
  flex-direction: var(--amplify-components-selectfield-flex-direction);
2969
+ --amplify-components-fieldcontrol-border-color: var(
2970
+ --amplify-components-selectfield-border-color
2971
+ );
2972
+ --amplify-components-fieldcontrol-color: var(
2973
+ --amplify-components-selectfield-color
2974
+ );
2975
+ --amplify-components-fieldcontrol-font-size: var(
2976
+ --amplify-components-selectfield-font-size
2977
+ );
2978
+ --amplify-components-fieldcontrol-focus-border-color: var(
2979
+ --amplify-components-selectfield-focus-border-color
2980
+ );
2981
+ --amplify-components-field-label-color: var(
2982
+ --amplify-components-selectfield-label-color
2983
+ );
2893
2984
  }
2894
2985
 
2895
2986
  .amplify-sliderfield {
@@ -3039,8 +3130,50 @@ html[dir=rtl] .amplify-field-group__inner-start {
3039
3130
 
3040
3131
  .amplify-stepperfield {
3041
3132
  flex-direction: var(--amplify-components-stepperfield-flex-direction);
3133
+ --amplify-components-fieldcontrol-border-color: var(
3134
+ --amplify-components-stepperfield-border-color
3135
+ );
3136
+ --amplify-components-button-border-color: var(
3137
+ --amplify-components-stepperfield-border-color
3138
+ );
3139
+ --amplify-components-fieldcontrol-color: var(
3140
+ --amplify-components-stepperfield-input-color
3141
+ );
3142
+ --amplify-components-fieldcontrol-font-size: var(
3143
+ --amplify-components-stepperfield-input-font-size
3144
+ );
3145
+ --amplify-components-button-color: var(
3146
+ --amplify-components-stepperfield-button-color
3147
+ );
3148
+ --amplify-components-button-active-color: var(
3149
+ --amplify-components-stepperfield-button-active-color
3150
+ );
3151
+ --amplify-components-button-active-background-color: var(
3152
+ --amplify-components-stepperfield-button-active-background-color
3153
+ );
3154
+ --amplify-components-button-focus-color: var(
3155
+ --amplify-components-stepperfield-button-focus-color
3156
+ );
3157
+ --amplify-components-button-focus-background-color: var(
3158
+ --amplify-components-stepperfield-button-focus-background-color
3159
+ );
3160
+ --amplify-components-button-disabled-color: var(
3161
+ --amplify-components-stepperfield-button-disabled-color
3162
+ );
3163
+ --amplify-components-button-disabled-background-color: var(
3164
+ --amplify-components-stepperfield-button-disabled-background-color
3165
+ );
3166
+ --amplify-components-button-hover-color: var(
3167
+ --amplify-components-stepperfield-button-hover-color
3168
+ );
3169
+ --amplify-components-button-hover-background-color: var(
3170
+ --amplify-components-stepperfield-button-hover-background-color
3171
+ );
3042
3172
  }
3043
3173
 
3174
+ .amplify-stepperfield__button--decrease {
3175
+ background-color: var(--amplify-components-stepperfield-button-background-color);
3176
+ }
3044
3177
  .amplify-stepperfield__button--decrease[data-invalid=true] {
3045
3178
  -webkit-border-end: none;
3046
3179
  border-inline-end: none;
@@ -3050,6 +3183,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
3050
3183
  border-radius: 0;
3051
3184
  }
3052
3185
 
3186
+ .amplify-stepperfield__button--increase {
3187
+ background-color: var(--amplify-components-stepperfield-button-background-color);
3188
+ }
3053
3189
  .amplify-stepperfield__button--increase[data-invalid=true] {
3054
3190
  -webkit-border-start: none;
3055
3191
  border-inline-start: none;
@@ -3374,6 +3510,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
3374
3510
  --amplify-components-fieldcontrol-border-color: var(
3375
3511
  --amplify-components-textfield-border-color
3376
3512
  );
3513
+ --amplify-components-fieldcontrol-font-size: var(
3514
+ --amplify-components-textfield-font-size
3515
+ );
3377
3516
  --amplify-components-fieldcontrol-focus-border-color: var(
3378
3517
  --amplify-components-textfield-focus-border-color
3379
3518
  );
package/dist/theme.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 17 Jun 2022 21:04:04 GMT
3
+ * Generated on Wed, 29 Jun 2022 22:47:24 GMT
4
4
  */
5
5
 
6
6
  :root, [data-amplify-theme] {
@@ -439,6 +439,8 @@
439
439
  --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
440
440
  --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
441
441
  --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
442
+ --amplify-components-stepperfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
443
+ --amplify-components-stepperfield-button-background-color: var(--amplify-colors-transparent);
442
444
  --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-medium);
443
445
  --amplify-components-sliderfield-padding-block: var(--amplify-space-xs);
444
446
  --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium);
@@ -684,6 +686,7 @@
684
686
  --amplify-components-select-option-background-color: var(--amplify-colors-background-primary);
685
687
  --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary);
686
688
  --amplify-components-rating-filled-color: var(--amplify-colors-brand-secondary-80);
689
+ --amplify-components-radiogroup-radio-border-width: var(--amplify-components-radio-button-border-width);
687
690
  --amplify-components-radio-label-disabled-color: var(--amplify-colors-font-disabled);
688
691
  --amplify-components-radio-button-disabled-background-color: var(--amplify-colors-background-primary);
689
692
  --amplify-components-radio-button-error-border-color: var(--amplify-colors-border-error);
@@ -818,6 +821,7 @@
818
821
  --amplify-components-togglebutton-pressed-border-color: var(--amplify-colors-border-pressed);
819
822
  --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-disabled);
820
823
  --amplify-components-togglebutton-focus-border-color: var(--amplify-colors-border-focus);
824
+ --amplify-components-textfield-font-size: var(--amplify-components-fieldcontrol-font-size);
821
825
  --amplify-components-textfield-border-color: var(--amplify-components-fieldcontrol-border-color);
822
826
  --amplify-components-textfield-color: var(--amplify-components-fieldcontrol-color);
823
827
  --amplify-components-textareafield-border-color: var(--amplify-components-fieldcontrol-border-color);
@@ -827,11 +831,23 @@
827
831
  --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus);
828
832
  --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover);
829
833
  --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
834
+ --amplify-components-stepperfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
835
+ --amplify-components-stepperfield-button-disabled-color: var(--amplify-components-button-disabled-color);
836
+ --amplify-components-stepperfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
837
+ --amplify-components-stepperfield-button-active-background-color: var(--amplify-components-button-active-background-color);
838
+ --amplify-components-stepperfield-button-color: var(--amplify-components-button-color);
839
+ --amplify-components-stepperfield-input-font-size: var(--amplify-components-fieldcontrol-font-size);
840
+ --amplify-components-stepperfield-input-color: var(--amplify-components-fieldcontrol-color);
841
+ --amplify-components-stepperfield-border-color: var(--amplify-components-fieldcontrol-border-color);
830
842
  --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
831
843
  --amplify-components-sliderfield-thumb-focus-border-color: var(--amplify-colors-border-focus);
832
844
  --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
833
845
  --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled);
834
846
  --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled);
847
+ --amplify-components-selectfield-label-color: var(--amplify-components-field-label-color);
848
+ --amplify-components-selectfield-font-size: var(--amplify-components-fieldcontrol-font-size);
849
+ --amplify-components-selectfield-color: var(--amplify-components-fieldcontrol-color);
850
+ --amplify-components-selectfield-border-color: var(--amplify-components-fieldcontrol-border-color);
835
851
  --amplify-components-searchfield-button-hover-border-color: var(--amplify-components-button-hover-border-color);
836
852
  --amplify-components-searchfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
837
853
  --amplify-components-searchfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
@@ -841,10 +857,18 @@
841
857
  --amplify-components-searchfield-button-active-background-color: var(--amplify-components-button-active-background-color);
842
858
  --amplify-components-searchfield-button-color: var(--amplify-components-button-color);
843
859
  --amplify-components-searchfield-color: var(--amplify-components-fieldcontrol-color);
860
+ --amplify-components-radiogroup-label-color: var(--amplify-components-field-label-color);
861
+ --amplify-components-radiogroup-radio-checked-color: var(--amplify-components-radio-button-checked-color);
862
+ --amplify-components-radiogroup-radio-background-color: var(--amplify-components-radio-button-background-color);
863
+ --amplify-components-radiogroup-radio-border-color: var(--amplify-components-radio-button-border-color);
864
+ --amplify-components-radio-label-color: var(--amplify-components-text-color);
844
865
  --amplify-components-radio-button-disabled-border-color: var(--amplify-colors-border-disabled);
845
866
  --amplify-components-radio-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
846
867
  --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus);
847
868
  --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled);
869
+ --amplify-components-phonenumberfield-font-size: var(--amplify-components-fieldcontrol-font-size);
870
+ --amplify-components-phonenumberfield-border-color: var(--amplify-components-fieldcontrol-border-color);
871
+ --amplify-components-phonenumberfield-color: var(--amplify-components-fieldcontrol-color);
848
872
  --amplify-components-passwordfield-button-hover-border-color: var(--amplify-components-button-hover-border-color);
849
873
  --amplify-components-passwordfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
850
874
  --amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
@@ -891,11 +915,17 @@
891
915
  --amplify-components-togglebutton-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
892
916
  --amplify-components-textfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
893
917
  --amplify-components-textareafield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
918
+ --amplify-components-stepperfield-button-hover-color: var(--amplify-components-button-hover-color);
919
+ --amplify-components-stepperfield-button-focus-color: var(--amplify-components-button-focus-color);
920
+ --amplify-components-stepperfield-button-active-color: var(--amplify-components-button-active-color);
921
+ --amplify-components-selectfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
894
922
  --amplify-components-searchfield-button-hover-color: var(--amplify-components-button-hover-color);
895
923
  --amplify-components-searchfield-button-focus-color: var(--amplify-components-button-focus-color);
896
924
  --amplify-components-searchfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
897
925
  --amplify-components-searchfield-button-active-color: var(--amplify-components-button-active-color);
926
+ --amplify-components-radiogroup-radio-label-color: var(--amplify-components-radio-label-color);
898
927
  --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
928
+ --amplify-components-phonenumberfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
899
929
  --amplify-components-passwordfield-button-hover-color: var(--amplify-components-button-hover-color);
900
930
  --amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color);
901
931
  --amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
package/dist/types/helpers/authenticator/facade.d.ts CHANGED
@@ -3,7 +3,6 @@
3
3
  * understandable authenticator contexts. We provide these contexts with
4
4
  * `useAuthenticator` hook/composable/service.
5
5
  */
6
- /// <reference types="amazon-cognito-identity-js" />
7
6
  import { Sender } from 'xstate';
8
7
  import { AuthEvent, AuthEventData, AuthMachineState } from '../../types';
9
8
  /**
@@ -39,7 +38,7 @@ export declare const getServiceContextFacade: (state: AuthMachineState) => {
39
38
  validationErrors: {
40
39
  [x: string]: string | string[];
41
40
  };
42
- codeDeliveryDetails: import("amazon-cognito-identity-js").CodeDeliveryDetails;
41
+ codeDeliveryDetails: import("../../types").CodeDeliveryDetails;
43
42
  };
44
43
  export declare const getServiceFacade: ({ send, state }: {
45
44
  send: any;
@@ -54,7 +53,7 @@ export declare const getServiceFacade: ({ send, state }: {
54
53
  validationErrors: {
55
54
  [x: string]: string | string[];
56
55
  };
57
- codeDeliveryDetails: import("amazon-cognito-identity-js").CodeDeliveryDetails;
56
+ codeDeliveryDetails: import("../../types").CodeDeliveryDetails;
58
57
  resendCode: (data?: AuthEventData) => void;
59
58
  signOut: (data?: AuthEventData) => void;
60
59
  submitForm: (data?: AuthEventData) => void;
package/dist/types/i18n/dictionaries/authenticator/de.d.ts CHANGED
@@ -40,6 +40,7 @@ export declare const deDict: {
40
40
  'Reset password': string;
41
41
  'Reset your password': string;
42
42
  'Send Code': string;
43
+ 'Send code': string;
43
44
  'Sign in': string;
44
45
  'Sign In': string;
45
46
  'Sign in to your account': string;
@@ -53,4 +54,8 @@ export declare const deDict: {
53
54
  'Username cannot be empty': string;
54
55
  Verify: string;
55
56
  'Verify Contact': string;
57
+ 'We Emailed You': string;
58
+ 'Your code is on the way. To log in, enter the code we emailed to': string;
59
+ 'Your code is on the way. To log in, enter the code we texted to': string;
60
+ 'It may take a minute to arrive.': string;
56
61
  };
package/dist/types/i18n/dictionaries/index.d.ts CHANGED
@@ -40,6 +40,7 @@ export declare const deDict: {
40
40
  'Reset password': string;
41
41
  'Reset your password': string;
42
42
  'Send Code': string;
43
+ 'Send code': string;
43
44
  'Sign in': string;
44
45
  'Sign In': string;
45
46
  'Sign in to your account': string;
@@ -53,6 +54,10 @@ export declare const deDict: {
53
54
  'Username cannot be empty': string;
54
55
  Verify: string;
55
56
  'Verify Contact': string;
57
+ 'We Emailed You': string;
58
+ 'Your code is on the way. To log in, enter the code we emailed to': string;
59
+ 'Your code is on the way. To log in, enter the code we texted to': string;
60
+ 'It may take a minute to arrive.': string;
56
61
  };
57
62
  export declare const enDict: {
58
63
  'Account recovery requires verified contact information': string;
package/dist/types/theme/tokens/components/index.d.ts CHANGED
@@ -23,8 +23,10 @@ import { LoaderTokens } from './loader';
23
23
  import { MenuTokens } from './menu';
24
24
  import { PaginationTokens } from './pagination';
25
25
  import { PasswordFieldTokens } from './passwordField';
26
+ import { PhoneNumberFieldTokens } from './phoneNumberField';
26
27
  import { PlaceholderTokens } from './placeholder';
27
28
  import { RadioTokens } from './radio';
29
+ import { RadioGroupTokens } from './radioGroup';
28
30
  import { RatingTokens } from './rating';
29
31
  import { SearchFieldTokens } from './searchField';
30
32
  import { SelectTokens } from './select';
@@ -65,8 +67,10 @@ export interface ComponentTokens {
65
67
  menu: MenuTokens;
66
68
  pagination: PaginationTokens;
67
69
  passwordfield: PasswordFieldTokens;
70
+ phonenumberfield: PhoneNumberFieldTokens;
68
71
  placeholder: PlaceholderTokens;
69
72
  radio: RadioTokens;
73
+ radiogroup: RadioGroupTokens;
70
74
  rating: RatingTokens;
71
75
  searchfield: SearchFieldTokens;
72
76
  select: SelectTokens;
package/dist/types/theme/tokens/components/phoneNumberField.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import { ColorValue, DesignToken, BorderColorValue, FontSizeValue } from '../types/designToken';
2
+ export interface PhoneNumberFieldTokens {
3
+ color: DesignToken<ColorValue>;
4
+ borderColor: DesignToken<BorderColorValue>;
5
+ fontSize: DesignToken<FontSizeValue>;
6
+ _focus: {
7
+ borderColor: DesignToken<BorderColorValue>;
8
+ };
9
+ }
10
+ export declare const phonenumberfield: {
11
+ color: {
12
+ value: string;
13
+ };
14
+ borderColor: {
15
+ value: string;
16
+ };
17
+ fontSize: {
18
+ value: string;
19
+ };
20
+ _focus: {
21
+ borderColor: {
22
+ value: string;
23
+ };
24
+ };
25
+ };
package/dist/types/theme/tokens/components/radio.d.ts CHANGED
@@ -55,6 +55,7 @@ interface RadioButtonDisabledTokens {
55
55
  backgroundColor: DesignToken<BackgroundColorValue>;
56
56
  }
57
57
  interface RadioLabelTokens {
58
+ color: DesignToken<ColorValue>;
58
59
  _disabled: RadioLabelDisabledTokens;
59
60
  }
60
61
  interface RadioLabelDisabledTokens {
package/dist/types/theme/tokens/components/radioGroup.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ import { BackgroundColorValue, BorderColorValue, BorderWidthValue, ColorValue, DesignToken } from '../types/designToken';
2
+ export interface RadioGroupTokens {
3
+ radio: {
4
+ borderWidth: DesignToken<BorderWidthValue>;
5
+ borderColor: DesignToken<BorderColorValue>;
6
+ backgroundColor: DesignToken<BackgroundColorValue>;
7
+ _checked: {
8
+ color: DesignToken<ColorValue>;
9
+ };
10
+ label: {
11
+ color: DesignToken<ColorValue>;
12
+ };
13
+ };
14
+ label: {
15
+ color: DesignToken<ColorValue>;
16
+ };
17
+ }
18
+ export declare const radiogroup: RadioGroupTokens;
package/dist/types/theme/tokens/components/selectField.d.ts CHANGED
@@ -1,5 +1,14 @@
1
- import { DesignToken, FlexDirectionValue } from '../types/designToken';
1
+ import { DesignToken, FlexDirectionValue, ColorValue, BorderColorValue, FontSizeValue } from '../types/designToken';
2
2
  export interface SelectFieldTokens {
3
3
  flexDirection: DesignToken<FlexDirectionValue>;
4
+ color: DesignToken<ColorValue>;
5
+ borderColor: DesignToken<BorderColorValue>;
6
+ fontSize: DesignToken<FontSizeValue>;
7
+ _focus: {
8
+ borderColor: DesignToken<BorderColorValue>;
9
+ };
10
+ label: {
11
+ color: DesignToken<ColorValue>;
12
+ };
4
13
  }
5
14
  export declare const selectfield: SelectFieldTokens;
package/dist/types/theme/tokens/components/stepperField.d.ts CHANGED
@@ -1,10 +1,25 @@
1
- import { DesignToken, FlexDirectionValue, TextAlignValue } from '../types/designToken';
1
+ import { ColorValue, DesignToken, FontSizeValue, FlexDirectionValue, TextAlignValue, BorderColorValue } from '../types/designToken';
2
2
  interface StepperFieldInputTokens {
3
3
  textAlign: DesignToken<TextAlignValue>;
4
+ color: DesignToken<ColorValue>;
5
+ fontSize: DesignToken<FontSizeValue>;
6
+ }
7
+ interface ButtonStateColorTokens {
8
+ color: DesignToken<ColorValue>;
9
+ backgroundColor: DesignToken<ColorValue>;
4
10
  }
5
11
  export interface StepperFieldTokens {
12
+ borderColor: DesignToken<BorderColorValue>;
6
13
  flexDirection: DesignToken<FlexDirectionValue>;
7
14
  input: StepperFieldInputTokens;
15
+ button: {
16
+ color: DesignToken<ColorValue>;
17
+ backgroundColor: DesignToken<ColorValue>;
18
+ _active: ButtonStateColorTokens;
19
+ _focus: ButtonStateColorTokens;
20
+ _disabled: ButtonStateColorTokens;
21
+ _hover: ButtonStateColorTokens;
22
+ };
8
23
  }
9
24
  export declare const stepperfield: StepperFieldTokens;
10
25
  export {};
package/dist/types/theme/tokens/components/textField.d.ts CHANGED
@@ -1,10 +1,11 @@
1
- import { ColorValue, DesignToken, BorderColorValue } from '../types/designToken';
1
+ import { ColorValue, DesignToken, BorderColorValue, FontSizeValue } from '../types/designToken';
2
2
  interface TextFieldStateToken {
3
3
  borderColor: DesignToken<BorderColorValue>;
4
4
  }
5
5
  export interface TextFieldTokens {
6
6
  color: DesignToken<ColorValue>;
7
7
  borderColor: DesignToken<BorderColorValue>;
8
+ fontSize: DesignToken<FontSizeValue>;
8
9
  _focus: TextFieldStateToken;
9
10
  }
10
11
  export declare const textfield: TextFieldTokens;
package/dist/types/types/authenticator/stateMachine/context.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ValidationError } from '../validator';
2
2
  import { AuthFormData, AuthFormFields } from '../form';
3
3
  import { AuthChallengeNames, CognitoUserAmplify } from '../user';
4
- import { CodeDeliveryDetails } from 'amazon-cognito-identity-js';
4
+ import { CodeDeliveryDetails as CognitoCodeDeliveryDetails } from 'amazon-cognito-identity-js';
5
5
  import { LoginMechanism, SignUpAttribute, SocialProvider } from '../attributes';
6
6
  import { defaultServices } from '../../../machines/authenticator/defaultServices';
7
7
  import { PasswordSettings } from '..';
@@ -39,6 +39,8 @@ export interface AuthContext {
39
39
  actorDoneData?: Omit<ActorDoneData, 'user'>;
40
40
  hasSetup?: boolean;
41
41
  }
42
+ export interface CodeDeliveryDetails extends CognitoCodeDeliveryDetails {
43
+ }
42
44
  /**
43
45
  * Base context for all actors that have auth forms associated
44
46
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui",
3
- "version": "3.11.0",
3
+ "version": "3.12.1",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "exports": {