@aws-amplify/ui-react-storage 2.3.0 → 2.3.2

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 (2) hide show
  1. package/dist/styles.css +131 -191
  2. package/package.json +4 -4
package/dist/styles.css CHANGED
@@ -1000,7 +1000,11 @@
1000
1000
  --amplify-components-searchfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
1001
1001
  --amplify-components-searchfield-button-hover-border-color: var(--amplify-components-button-hover-border-color);
1002
1002
  --amplify-components-searchfield-button-hover-color: var(--amplify-components-button-hover-color);
1003
+ --amplify-components-select-color: var(--amplify-components-fieldcontrol-color);
1004
+ --amplify-components-select-background-color: var(--amplify-colors-background-primary);
1003
1005
  --amplify-components-select-padding-inline-end: var(--amplify-space-xxl);
1006
+ --amplify-components-select-disabled-color: var(--amplify-colors-font-disabled);
1007
+ --amplify-components-select-disabled-background-color: var(--amplify-colors-background-disabled);
1004
1008
  --amplify-components-select-wrapper-flex: 1;
1005
1009
  --amplify-components-select-wrapper-display: block;
1006
1010
  --amplify-components-select-wrapper-position: relative;
@@ -1013,15 +1017,20 @@
1013
1017
  --amplify-components-select-icon-wrapper-pointer-events: none;
1014
1018
  --amplify-components-select-icon-wrapper-small-right: var(--amplify-space-xs);
1015
1019
  --amplify-components-select-icon-wrapper-large-right: var(--amplify-space-medium);
1016
- --amplify-components-select-option-background-color: var(--amplify-colors-background-primary);
1020
+ --amplify-components-select-option-background-color: transparent;
1017
1021
  --amplify-components-select-option-color: var(--amplify-colors-font-primary);
1018
1022
  --amplify-components-select-option-disabled-color: var(--amplify-colors-font-disabled);
1023
+ --amplify-components-select-option-disabled-background-color: transparent;
1019
1024
  --amplify-components-select-white-space: nowrap;
1020
1025
  --amplify-components-select-min-width: 6.5rem;
1021
1026
  --amplify-components-select-small-min-width: 5.5rem;
1022
1027
  --amplify-components-select-small-padding-inline-end: var(--amplify-space-xl);
1023
1028
  --amplify-components-select-large-min-width: 7.5rem;
1024
1029
  --amplify-components-select-large-padding-inline-end: var(--amplify-space-xxl);
1030
+ --amplify-components-select-expanded-padding-block: var(--amplify-space-xs);
1031
+ --amplify-components-select-expanded-padding-inline: var(--amplify-space-small);
1032
+ --amplify-components-select-expanded-option-padding-block: var(--amplify-space-xs);
1033
+ --amplify-components-select-expanded-option-padding-inline: var(--amplify-space-small);
1025
1034
  --amplify-components-selectfield-border-color: var(--amplify-components-fieldcontrol-border-color);
1026
1035
  --amplify-components-selectfield-color: var(--amplify-components-fieldcontrol-color);
1027
1036
  --amplify-components-selectfield-flex-direction: column;
@@ -1670,14 +1679,10 @@ strong.amplify-text {
1670
1679
  font-weight: var(--amplify-components-button-font-weight);
1671
1680
  justify-content: center;
1672
1681
  line-height: var(--amplify-components-button-line-height);
1673
- -webkit-padding-before: var(--amplify-components-button-padding-block-start);
1674
- padding-block-start: var(--amplify-components-button-padding-block-start);
1675
- -webkit-padding-after: var(--amplify-components-button-padding-block-end);
1676
- padding-block-end: var(--amplify-components-button-padding-block-end);
1677
- -webkit-padding-start: var(--amplify-components-button-padding-inline-start);
1678
- padding-inline-start: var(--amplify-components-button-padding-inline-start);
1679
- -webkit-padding-end: var(--amplify-components-button-padding-inline-end);
1680
- padding-inline-end: var(--amplify-components-button-padding-inline-end);
1682
+ padding-block-start: var(--amplify-components-button-padding-block-start);
1683
+ padding-block-end: var(--amplify-components-button-padding-block-end);
1684
+ padding-inline-start: var(--amplify-components-button-padding-inline-start);
1685
+ padding-inline-end: var(--amplify-components-button-padding-inline-end);
1681
1686
  transition: all var(--amplify-components-button-transition-duration);
1682
1687
  -webkit-user-select: none;
1683
1688
  -moz-user-select: none;
@@ -2686,25 +2691,17 @@ strong.amplify-text {
2686
2691
  }
2687
2692
  .amplify-button--small {
2688
2693
  font-size: var(--amplify-components-button-small-font-size);
2689
- -webkit-padding-before: var(--amplify-components-button-small-padding-block-start);
2690
- padding-block-start: var(--amplify-components-button-small-padding-block-start);
2691
- -webkit-padding-after: var(--amplify-components-button-small-padding-block-end);
2692
- padding-block-end: var(--amplify-components-button-small-padding-block-end);
2693
- -webkit-padding-start: var(--amplify-components-button-small-padding-inline-start);
2694
- padding-inline-start: var(--amplify-components-button-small-padding-inline-start);
2695
- -webkit-padding-end: var(--amplify-components-button-small-padding-inline-end);
2696
- padding-inline-end: var(--amplify-components-button-small-padding-inline-end);
2694
+ padding-block-start: var(--amplify-components-button-small-padding-block-start);
2695
+ padding-block-end: var(--amplify-components-button-small-padding-block-end);
2696
+ padding-inline-start: var(--amplify-components-button-small-padding-inline-start);
2697
+ padding-inline-end: var(--amplify-components-button-small-padding-inline-end);
2697
2698
  }
2698
2699
  .amplify-button--large {
2699
2700
  font-size: var(--amplify-components-button-large-font-size);
2700
- -webkit-padding-before: var(--amplify-components-button-large-padding-block-start);
2701
- padding-block-start: var(--amplify-components-button-large-padding-block-start);
2702
- -webkit-padding-after: var(--amplify-components-button-large-padding-block-end);
2703
- padding-block-end: var(--amplify-components-button-large-padding-block-end);
2704
- -webkit-padding-start: var(--amplify-components-button-large-padding-inline-start);
2705
- padding-inline-start: var(--amplify-components-button-large-padding-inline-start);
2706
- -webkit-padding-end: var(--amplify-components-button-large-padding-inline-end);
2707
- padding-inline-end: var(--amplify-components-button-large-padding-inline-end);
2701
+ padding-block-start: var(--amplify-components-button-large-padding-block-start);
2702
+ padding-block-end: var(--amplify-components-button-large-padding-block-end);
2703
+ padding-inline-start: var(--amplify-components-button-large-padding-inline-start);
2704
+ padding-inline-end: var(--amplify-components-button-large-padding-inline-end);
2708
2705
  }
2709
2706
  .amplify-button--disabled {
2710
2707
  background-color: var(--amplify-internal-button-disabled-background-color);
@@ -2895,14 +2892,10 @@ strong.amplify-text {
2895
2892
  color: var(--amplify-components-fieldcontrol-color);
2896
2893
  font-size: var(--amplify-components-fieldcontrol-font-size);
2897
2894
  line-height: var(--amplify-components-fieldcontrol-line-height);
2898
- -webkit-padding-before: var(--amplify-components-fieldcontrol-padding-block-start);
2899
- padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
2900
- -webkit-padding-after: var(--amplify-components-fieldcontrol-padding-block-end);
2901
- padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
2902
- -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
2903
- padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
2904
- -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-end);
2905
- padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
2895
+ padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
2896
+ padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
2897
+ padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
2898
+ padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
2906
2899
  transition: all var(--amplify-components-fieldcontrol-transition-duration);
2907
2900
  width: 100%;
2908
2901
  border-color: var(--amplify-components-fieldcontrol-border-color);
@@ -2936,25 +2929,17 @@ strong.amplify-text {
2936
2929
  }
2937
2930
  .amplify-input--small {
2938
2931
  font-size: var(--amplify-components-fieldcontrol-small-font-size);
2939
- -webkit-padding-before: var(--amplify-components-fieldcontrol-small-padding-block-start);
2940
- padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
2941
- -webkit-padding-after: var(--amplify-components-fieldcontrol-small-padding-block-end);
2942
- padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
2943
- -webkit-padding-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
2944
- padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
2945
- -webkit-padding-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
2946
- padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
2932
+ padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
2933
+ padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
2934
+ padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
2935
+ padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
2947
2936
  }
2948
2937
  .amplify-input--large {
2949
2938
  font-size: var(--amplify-components-fieldcontrol-large-font-size);
2950
- -webkit-padding-before: var(--amplify-components-fieldcontrol-large-padding-block-start);
2951
- padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
2952
- -webkit-padding-after: var(--amplify-components-fieldcontrol-large-padding-block-end);
2953
- padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
2954
- -webkit-padding-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
2955
- padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
2956
- -webkit-padding-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
2957
- padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
2939
+ padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
2940
+ padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
2941
+ padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
2942
+ padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
2958
2943
  }
2959
2944
  .amplify-input--error {
2960
2945
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
@@ -2963,19 +2948,10 @@ strong.amplify-text {
2963
2948
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
2964
2949
  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
2965
2950
  }
2966
- .amplify-input[disabled] {
2967
- color: var(--amplify-components-fieldcontrol-disabled-color);
2968
- cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
2969
- border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
2970
- background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
2971
- }
2972
2951
  .amplify-input--quiet {
2973
- -webkit-border-before: var(--amplify-components-fieldcontrol-quiet-border-block-start);
2974
- border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
2975
- -webkit-border-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
2976
- border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
2977
- -webkit-border-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
2978
- border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
2952
+ border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
2953
+ border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
2954
+ border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
2979
2955
  border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
2980
2956
  }
2981
2957
  .amplify-input--quiet:focus {
@@ -2988,20 +2964,22 @@ strong.amplify-text {
2988
2964
  .amplify-input--quiet[aria-invalid=true]:focus {
2989
2965
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
2990
2966
  }
2967
+ .amplify-input[disabled] {
2968
+ color: var(--amplify-components-fieldcontrol-disabled-color);
2969
+ cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
2970
+ border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
2971
+ background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
2972
+ }
2991
2973
 
2992
2974
  .amplify-textarea {
2993
2975
  box-sizing: border-box;
2994
2976
  color: var(--amplify-components-fieldcontrol-color);
2995
2977
  font-size: var(--amplify-components-fieldcontrol-font-size);
2996
2978
  line-height: var(--amplify-components-fieldcontrol-line-height);
2997
- -webkit-padding-before: var(--amplify-components-fieldcontrol-padding-block-start);
2998
- padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
2999
- -webkit-padding-after: var(--amplify-components-fieldcontrol-padding-block-end);
3000
- padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
3001
- -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
3002
- padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
3003
- -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-end);
3004
- padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
2979
+ padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
2980
+ padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
2981
+ padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
2982
+ padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
3005
2983
  transition: all var(--amplify-components-fieldcontrol-transition-duration);
3006
2984
  width: 100%;
3007
2985
  border-color: var(--amplify-components-fieldcontrol-border-color);
@@ -3023,25 +3001,17 @@ strong.amplify-text {
3023
3001
  }
3024
3002
  .amplify-textarea--small {
3025
3003
  font-size: var(--amplify-components-fieldcontrol-small-font-size);
3026
- -webkit-padding-before: var(--amplify-components-fieldcontrol-small-padding-block-start);
3027
- padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
3028
- -webkit-padding-after: var(--amplify-components-fieldcontrol-small-padding-block-end);
3029
- padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
3030
- -webkit-padding-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
3031
- padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
3032
- -webkit-padding-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
3033
- padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
3004
+ padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
3005
+ padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
3006
+ padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
3007
+ padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
3034
3008
  }
3035
3009
  .amplify-textarea--large {
3036
3010
  font-size: var(--amplify-components-fieldcontrol-large-font-size);
3037
- -webkit-padding-before: var(--amplify-components-fieldcontrol-large-padding-block-start);
3038
- padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
3039
- -webkit-padding-after: var(--amplify-components-fieldcontrol-large-padding-block-end);
3040
- padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
3041
- -webkit-padding-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
3042
- padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
3043
- -webkit-padding-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
3044
- padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
3011
+ padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
3012
+ padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
3013
+ padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
3014
+ padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
3045
3015
  }
3046
3016
  .amplify-textarea--error {
3047
3017
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
@@ -3050,19 +3020,10 @@ strong.amplify-text {
3050
3020
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
3051
3021
  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
3052
3022
  }
3053
- .amplify-textarea[disabled] {
3054
- color: var(--amplify-components-fieldcontrol-disabled-color);
3055
- cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
3056
- border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
3057
- background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
3058
- }
3059
3023
  .amplify-textarea--quiet {
3060
- -webkit-border-before: var(--amplify-components-fieldcontrol-quiet-border-block-start);
3061
- border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
3062
- -webkit-border-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
3063
- border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
3064
- -webkit-border-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
3065
- border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
3024
+ border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
3025
+ border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
3026
+ border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
3066
3027
  border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
3067
3028
  }
3068
3029
  .amplify-textarea--quiet:focus {
@@ -3075,6 +3036,12 @@ strong.amplify-text {
3075
3036
  .amplify-textarea--quiet[aria-invalid=true]:focus {
3076
3037
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
3077
3038
  }
3039
+ .amplify-textarea[disabled] {
3040
+ color: var(--amplify-components-fieldcontrol-disabled-color);
3041
+ cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
3042
+ border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
3043
+ background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
3044
+ }
3078
3045
 
3079
3046
  .amplify-image {
3080
3047
  height: var(--amplify-components-image-height);
@@ -3339,8 +3306,7 @@ strong.amplify-text {
3339
3306
  position: absolute;
3340
3307
  z-index: 999999;
3341
3308
  width: var(--amplify-components-autocomplete-menu-width);
3342
- -webkit-margin-before: var(--amplify-components-autocomplete-menu-margin-block-start);
3343
- margin-block-start: var(--amplify-components-autocomplete-menu-margin-block-start);
3309
+ margin-block-start: var(--amplify-components-autocomplete-menu-margin-block-start);
3344
3310
  background-color: var(--amplify-components-autocomplete-menu-background-color);
3345
3311
  border-color: var(--amplify-components-autocomplete-menu-border-color);
3346
3312
  border-width: var(--amplify-components-autocomplete-menu-border-width);
@@ -3783,10 +3749,8 @@ strong.amplify-text {
3783
3749
  flex: 1;
3784
3750
  display: flex;
3785
3751
  min-height: var(--amplify-components-expander-trigger-min-height);
3786
- -webkit-padding-start: var(--amplify-components-expander-trigger-padding-inline-start);
3787
- padding-inline-start: var(--amplify-components-expander-trigger-padding-inline-start);
3788
- -webkit-padding-end: var(--amplify-components-expander-trigger-padding-inline-end);
3789
- padding-inline-end: var(--amplify-components-expander-trigger-padding-inline-end);
3752
+ padding-inline-start: var(--amplify-components-expander-trigger-padding-inline-start);
3753
+ padding-inline-end: var(--amplify-components-expander-trigger-padding-inline-end);
3790
3754
  align-items: var(--amplify-components-expander-trigger-align-items);
3791
3755
  justify-content: var(--amplify-components-expander-trigger-justify-content);
3792
3756
  }
@@ -3796,10 +3760,8 @@ strong.amplify-text {
3796
3760
 
3797
3761
  .amplify-expander__content {
3798
3762
  display: block;
3799
- -webkit-padding-start: var(--amplify-components-expander-content-padding-inline-start);
3800
- padding-inline-start: var(--amplify-components-expander-content-padding-inline-start);
3801
- -webkit-padding-end: var(--amplify-components-expander-content-padding-inline-end);
3802
- padding-inline-end: var(--amplify-components-expander-content-padding-inline-end);
3763
+ padding-inline-start: var(--amplify-components-expander-content-padding-inline-start);
3764
+ padding-inline-end: var(--amplify-components-expander-content-padding-inline-end);
3803
3765
  }
3804
3766
  .amplify-expander__content[data-state=open] {
3805
3767
  animation-name: amplify-expander-slide-down;
@@ -3815,10 +3777,8 @@ strong.amplify-text {
3815
3777
  .amplify-expander__content__text {
3816
3778
  display: block;
3817
3779
  color: var(--amplify-components-expander-content-text-color);
3818
- -webkit-padding-before: var(--amplify-components-expander-content-text-padding-block-start);
3819
- padding-block-start: var(--amplify-components-expander-content-text-padding-block-start);
3820
- -webkit-padding-after: var(--amplify-components-expander-content-text-padding-block-end);
3821
- padding-block-end: var(--amplify-components-expander-content-text-padding-block-end);
3780
+ padding-block-start: var(--amplify-components-expander-content-text-padding-block-start);
3781
+ padding-block-end: var(--amplify-components-expander-content-text-padding-block-end);
3822
3782
  }
3823
3783
 
3824
3784
  .amplify-expander__icon {
@@ -3976,13 +3936,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
3976
3936
  }
3977
3937
 
3978
3938
  .amplify-field-group--has-inner-end .amplify-input {
3979
- -webkit-padding-end: calc(var(--amplify-components-fieldcontrol-padding-inline-end) * 3);
3980
- padding-inline-end: calc(var(--amplify-components-fieldcontrol-padding-inline-end) * 3);
3939
+ padding-inline-end: calc(var(--amplify-components-fieldcontrol-padding-inline-end) * 3);
3981
3940
  }
3982
3941
 
3983
3942
  .amplify-field-group--has-inner-start .amplify-input {
3984
- -webkit-padding-start: calc(var(--amplify-components-fieldcontrol-padding-inline-start) * 3);
3985
- padding-inline-start: calc(var(--amplify-components-fieldcontrol-padding-inline-start) * 3);
3943
+ padding-inline-start: calc(var(--amplify-components-fieldcontrol-padding-inline-start) * 3);
3986
3944
  }
3987
3945
 
3988
3946
  /**
@@ -3990,10 +3948,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
3990
3948
  */
3991
3949
  .amplify-field-group__icon:not(.amplify-field-group__icon-button) {
3992
3950
  display: flex;
3993
- -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
3994
- padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
3995
- -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-start);
3996
- padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-start);
3951
+ padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
3952
+ padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-start);
3997
3953
  flex-direction: column;
3998
3954
  justify-content: center;
3999
3955
  height: 100%;
@@ -4584,10 +4540,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
4584
4540
 
4585
4541
  .amplify-menu-content__item {
4586
4542
  min-height: var(--amplify-components-menu-item-min-height);
4587
- -webkit-padding-start: var(--amplify-components-menu-item-padding-inline-start);
4588
- padding-inline-start: var(--amplify-components-menu-item-padding-inline-start);
4589
- -webkit-padding-end: var(--amplify-components-menu-item-padding-inline-end);
4590
- padding-inline-end: var(--amplify-components-menu-item-padding-inline-end);
4543
+ padding-inline-start: var(--amplify-components-menu-item-padding-inline-start);
4544
+ padding-inline-end: var(--amplify-components-menu-item-padding-inline-end);
4591
4545
  }
4592
4546
 
4593
4547
  .amplify-menu-content__item:not(:first-child):not(:last-child) {
@@ -4724,8 +4678,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4724
4678
  }
4725
4679
 
4726
4680
  .amplify-message__dismiss {
4727
- -webkit-margin-start: auto;
4728
- margin-inline-start: auto;
4681
+ margin-inline-start: auto;
4729
4682
  gap: var(--amplify-components-message-dismiss-gap);
4730
4683
  }
4731
4684
 
@@ -4748,10 +4701,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
4748
4701
  justify-content: center;
4749
4702
  font-weight: initial;
4750
4703
  color: var(--amplify-components-pagination-button-color);
4751
- -webkit-padding-start: var(--amplify-components-pagination-button-padding-inline-start);
4752
- padding-inline-start: var(--amplify-components-pagination-button-padding-inline-start);
4753
- -webkit-padding-end: var(--amplify-components-pagination-button-padding-inline-end);
4754
- padding-inline-end: var(--amplify-components-pagination-button-padding-inline-end);
4704
+ padding-inline-start: var(--amplify-components-pagination-button-padding-inline-start);
4705
+ padding-inline-end: var(--amplify-components-pagination-button-padding-inline-end);
4755
4706
  transition-property: var(--amplify-components-pagination-button-transition-property);
4756
4707
  transition-duration: var(--amplify-components-pagination-button-transition-duration);
4757
4708
  }
@@ -4774,10 +4725,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
4774
4725
  .amplify-pagination__item-ellipsis {
4775
4726
  align-items: var(--amplify-components-pagination-ellipsis-align-items);
4776
4727
  justify-content: var(--amplify-components-pagination-ellipsis-justify-content);
4777
- -webkit-padding-start: var(--amplify-components-pagination-ellipsis-padding-inline-start);
4778
- padding-inline-start: var(--amplify-components-pagination-ellipsis-padding-inline-start);
4779
- -webkit-padding-end: var(--amplify-components-pagination-ellipsis-padding-inline-end);
4780
- padding-inline-end: var(--amplify-components-pagination-ellipsis-padding-inline-end);
4728
+ padding-inline-start: var(--amplify-components-pagination-ellipsis-padding-inline-start);
4729
+ padding-inline-end: var(--amplify-components-pagination-ellipsis-padding-inline-end);
4781
4730
  }
4782
4731
 
4783
4732
  .amplify-passwordfield {
@@ -5086,14 +5035,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
5086
5035
  color: var(--amplify-components-fieldcontrol-color);
5087
5036
  font-size: var(--amplify-components-fieldcontrol-font-size);
5088
5037
  line-height: var(--amplify-components-fieldcontrol-line-height);
5089
- -webkit-padding-before: var(--amplify-components-fieldcontrol-padding-block-start);
5090
- padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
5091
- -webkit-padding-after: var(--amplify-components-fieldcontrol-padding-block-end);
5092
- padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
5093
- -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
5094
- padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
5095
- -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-end);
5096
- padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
5038
+ padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
5039
+ padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
5040
+ padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
5041
+ padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
5097
5042
  transition: all var(--amplify-components-fieldcontrol-transition-duration);
5098
5043
  width: 100%;
5099
5044
  border-color: var(--amplify-components-fieldcontrol-border-color);
@@ -5104,9 +5049,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
5104
5049
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
5105
5050
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
5106
5051
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
5052
+ background-color: var(--amplify-components-select-background-color);
5053
+ color: var(--amplify-components-select-color);
5107
5054
  min-width: var(--amplify-components-select-min-width);
5108
- -webkit-padding-end: var(--amplify-components-select-padding-inline-end);
5109
- padding-inline-end: var(--amplify-components-select-padding-inline-end);
5055
+ padding-inline-end: var(--amplify-components-select-padding-inline-end);
5110
5056
  white-space: var(--amplify-components-select-white-space);
5111
5057
  }
5112
5058
  .amplify-select:focus {
@@ -5115,25 +5061,17 @@ html[dir=rtl] .amplify-field-group__inner-start {
5115
5061
  }
5116
5062
  .amplify-select--small {
5117
5063
  font-size: var(--amplify-components-fieldcontrol-small-font-size);
5118
- -webkit-padding-before: var(--amplify-components-fieldcontrol-small-padding-block-start);
5119
- padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
5120
- -webkit-padding-after: var(--amplify-components-fieldcontrol-small-padding-block-end);
5121
- padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
5122
- -webkit-padding-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
5123
- padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
5124
- -webkit-padding-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
5125
- padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
5064
+ padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
5065
+ padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
5066
+ padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
5067
+ padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
5126
5068
  }
5127
5069
  .amplify-select--large {
5128
5070
  font-size: var(--amplify-components-fieldcontrol-large-font-size);
5129
- -webkit-padding-before: var(--amplify-components-fieldcontrol-large-padding-block-start);
5130
- padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
5131
- -webkit-padding-after: var(--amplify-components-fieldcontrol-large-padding-block-end);
5132
- padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
5133
- -webkit-padding-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
5134
- padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
5135
- -webkit-padding-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
5136
- padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
5071
+ padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
5072
+ padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
5073
+ padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
5074
+ padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
5137
5075
  }
5138
5076
  .amplify-select--error {
5139
5077
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
@@ -5142,19 +5080,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
5142
5080
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
5143
5081
  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
5144
5082
  }
5145
- .amplify-select[disabled] {
5146
- color: var(--amplify-components-fieldcontrol-disabled-color);
5147
- cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
5148
- border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
5149
- background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
5150
- }
5151
5083
  .amplify-select--quiet {
5152
- -webkit-border-before: var(--amplify-components-fieldcontrol-quiet-border-block-start);
5153
- border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
5154
- -webkit-border-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
5155
- border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
5156
- -webkit-border-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
5157
- border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
5084
+ border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
5085
+ border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
5086
+ border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
5158
5087
  border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
5159
5088
  }
5160
5089
  .amplify-select--quiet:focus {
@@ -5167,27 +5096,43 @@ html[dir=rtl] .amplify-field-group__inner-start {
5167
5096
  .amplify-select--quiet[aria-invalid=true]:focus {
5168
5097
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
5169
5098
  }
5099
+ .amplify-select[disabled] {
5100
+ color: var(--amplify-components-fieldcontrol-disabled-color);
5101
+ cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
5102
+ border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
5103
+ background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
5104
+ }
5170
5105
  .amplify-select option {
5171
- color: initial;
5106
+ background-color: var(--amplify-components-select-option-background-color);
5107
+ color: var(--amplify-components-select-option-color);
5172
5108
  }
5173
5109
  .amplify-select option[disabled=""] {
5110
+ background-color: var(--amplify-components-select-option-disabled-background-color);
5174
5111
  color: var(--amplify-components-select-option-disabled-color);
5112
+ cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
5175
5113
  }
5176
- @-moz-document url-prefix() {
5177
- .amplify-select option {
5178
- background-color: var(--amplify-components-select-option-background-color);
5179
- color: var(--amplify-components-select-option-color);
5180
- }
5114
+ .amplify-select[disabled] {
5115
+ background-color: var(--amplify-components-select-disabled-background-color);
5116
+ color: var(--amplify-components-select-disabled-color);
5117
+ }
5118
+ .amplify-select[disabled] option {
5119
+ color: inherit;
5120
+ background-color: inherit;
5181
5121
  }
5182
5122
  .amplify-select--small {
5183
5123
  min-width: var(--amplify-components-select-small-min-width);
5184
- -webkit-padding-end: var(--amplify-components-select-small-padding-inline-end);
5185
- padding-inline-end: var(--amplify-components-select-small-padding-inline-end);
5124
+ padding-inline-end: var(--amplify-components-select-small-padding-inline-end);
5186
5125
  }
5187
5126
  .amplify-select--large {
5188
5127
  min-width: var(--amplify-components-select-large-min-width);
5189
- -webkit-padding-end: var(--amplify-components-select-large-padding-inline-end);
5190
- padding-inline-end: var(--amplify-components-select-large-padding-inline-end);
5128
+ padding-inline-end: var(--amplify-components-select-large-padding-inline-end);
5129
+ }
5130
+ .amplify-select--expanded {
5131
+ overflow: auto;
5132
+ padding: var(--amplify-components-select-expanded-padding-block) var(--amplify-components-select-expanded-padding-inline);
5133
+ }
5134
+ .amplify-select--expanded option {
5135
+ padding: var(--amplify-components-select-expanded-option-padding-block) var(--amplify-components-select-expanded-option-padding-inline);
5191
5136
  }
5192
5137
 
5193
5138
  .amplify-selectfield {
@@ -5411,13 +5356,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
5411
5356
  }
5412
5357
 
5413
5358
  .amplify-stepperfield__button--decrease[data-invalid=true] {
5414
- -webkit-border-end: none;
5415
- border-inline-end: none;
5359
+ border-inline-end: none;
5416
5360
  }
5417
5361
 
5418
5362
  .amplify-stepperfield__button--increase[data-invalid=true] {
5419
- -webkit-border-start: none;
5420
- border-inline-start: none;
5363
+ border-inline-start: none;
5421
5364
  }
5422
5365
 
5423
5366
  .amplify-stepperfield__input {
@@ -5429,10 +5372,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
5429
5372
  margin: 0;
5430
5373
  }
5431
5374
  .amplify-stepperfield__input:not(:focus, [aria-invalid=true]) {
5432
- -webkit-border-start: none;
5433
- border-inline-start: none;
5434
- -webkit-border-end: none;
5435
- border-inline-end: none;
5375
+ border-inline-start: none;
5376
+ border-inline-end: none;
5436
5377
  }
5437
5378
 
5438
5379
  .amplify-switchfield {
@@ -6041,8 +5982,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
6041
5982
  z-index: 2;
6042
5983
  }
6043
5984
  .amplify-togglebuttongroup .amplify-togglebutton:not(:first-of-type) {
6044
- -webkit-margin-start: calc(-1 * var(--amplify-components-button-border-width));
6045
- margin-inline-start: calc(-1 * var(--amplify-components-button-border-width));
5985
+ margin-inline-start: calc(-1 * var(--amplify-components-button-border-width));
6046
5986
  border-start-start-radius: 0;
6047
5987
  border-end-start-radius: 0;
6048
5988
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui-react-storage",
3
- "version": "2.3.0",
3
+ "version": "2.3.2",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {
@@ -40,9 +40,9 @@
40
40
  "typecheck": "tsc --noEmit"
41
41
  },
42
42
  "dependencies": {
43
- "@aws-amplify/ui": "5.8.0",
44
- "@aws-amplify/ui-react": "5.3.0",
45
- "@aws-amplify/ui-react-core": "2.1.32",
43
+ "@aws-amplify/ui": "5.8.1",
44
+ "@aws-amplify/ui-react": "5.3.2",
45
+ "@aws-amplify/ui-react-core": "2.1.33",
46
46
  "classnames": "2.3.1",
47
47
  "lodash": "4.17.21",
48
48
  "tslib": "2.4.1"