@aws-amplify/ui 6.4.0 → 6.4.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 (14) hide show
  1. package/dist/esm/theme/tokens/components/fileuploader.mjs +97 -0
  2. package/dist/esm/theme/tokens/components/index.mjs +2 -0
  3. package/dist/index.js +97 -0
  4. package/dist/styles/FileUploader.css +138 -0
  5. package/dist/styles/FileUploader.layer.css +140 -0
  6. package/dist/styles/base.css +61 -0
  7. package/dist/styles/base.layer.css +61 -0
  8. package/dist/styles.css +200 -0
  9. package/dist/styles.layer.css +200 -0
  10. package/dist/theme.css +61 -0
  11. package/dist/types/theme/components/index.d.ts +3 -1
  12. package/dist/types/theme/tokens/components/fileuploader.d.ts +24 -0
  13. package/dist/types/theme/tokens/components/index.d.ts +2 -0
  14. package/package.json +1 -1
package/dist/esm/theme/tokens/components/fileuploader.mjs ADDED
@@ -0,0 +1,97 @@
1
+ const fileuploader = {
2
+ dropzone: {
3
+ backgroundColor: { value: '{colors.background.primary}' },
4
+ borderRadius: { value: '{radii.small}' },
5
+ borderColor: { value: '{colors.border.primary}' },
6
+ borderStyle: { value: 'dashed' },
7
+ borderWidth: { value: '{borderWidths.small}' },
8
+ gap: { value: '{space.small}' },
9
+ paddingBlock: { value: '{space.xl}' },
10
+ paddingInline: { value: '{space.large}' },
11
+ textAlign: { value: 'center' },
12
+ _active: {
13
+ backgroundColor: { value: '{colors.primary.10}' },
14
+ borderRadius: {
15
+ value: '{components.fileuploader.dropzone.borderRadius}',
16
+ },
17
+ borderColor: { value: '{colors.border.pressed}' },
18
+ borderStyle: {
19
+ value: '{components.fileuploader.dropzone.borderStyle}',
20
+ },
21
+ borderWidth: { value: '{borderWidths.medium}' },
22
+ },
23
+ icon: {
24
+ color: { value: '{colors.border.primary}' },
25
+ fontSize: { value: '{fontSizes.xxl}' },
26
+ },
27
+ text: {
28
+ color: { value: '{colors.font.tertiary}' },
29
+ fontSize: { value: '{fontSizes.medium}' },
30
+ fontWeight: { value: '{fontWeights.bold}' },
31
+ },
32
+ },
33
+ file: {
34
+ backgroundColor: { value: '{colors.background.primary}' },
35
+ borderRadius: { value: '{radii.small}' },
36
+ borderColor: { value: '{colors.border.primary}' },
37
+ borderStyle: { value: 'solid' },
38
+ borderWidth: { value: '{borderWidths.small}' },
39
+ paddingBlock: { value: '{space.xs}' },
40
+ paddingInline: { value: '{space.small}' },
41
+ gap: { value: '{space.small}' },
42
+ alignItems: { value: 'baseline' },
43
+ name: {
44
+ fontSize: { value: '{fontSizes.medium}' },
45
+ fontWeight: { value: '{fontWeights.bold}' },
46
+ color: { value: '{colors.font.primary}' },
47
+ },
48
+ size: {
49
+ fontSize: { value: '{fontSizes.small}' },
50
+ fontWeight: { value: '{fontWeights.normal}' },
51
+ color: { value: '{colors.font.tertiary}' },
52
+ },
53
+ image: {
54
+ width: { value: '{space.xxl}' },
55
+ height: { value: '{space.xxl}' },
56
+ backgroundColor: { value: '{colors.background.secondary}' },
57
+ color: { value: '{colors.font.tertiary}' },
58
+ borderRadius: { value: '{radii.small}' },
59
+ },
60
+ },
61
+ filelist: {
62
+ flexDirection: { value: 'column' },
63
+ gap: { value: '{space.small}' },
64
+ },
65
+ loader: {
66
+ strokeLinecap: { value: 'round' },
67
+ strokeEmpty: { value: '{colors.border.secondary}' },
68
+ strokeFilled: { value: '{components.loader.strokeFilled}' },
69
+ strokeWidth: { value: '{borderWidths.large}' },
70
+ },
71
+ previewer: {
72
+ backgroundColor: { value: '{colors.background.primary}' },
73
+ borderColor: { value: '{colors.border.primary}' },
74
+ borderStyle: { value: 'solid' },
75
+ borderWidth: { value: '{borderWidths.small}' },
76
+ borderRadius: { value: '{radii.small}' },
77
+ paddingBlock: { value: '{space.zero}' },
78
+ paddingInline: { value: '{space.zero}' },
79
+ maxHeight: { value: '40rem' },
80
+ maxWidth: { value: 'auto' },
81
+ text: {
82
+ fontSize: { value: '{fontSizes.medium}' },
83
+ fontWeight: { value: '{fontWeights.bold}' },
84
+ color: { value: '{colors.font.primary}' },
85
+ },
86
+ body: {
87
+ paddingBlock: { value: '{space.medium}' },
88
+ paddingInline: { value: '{space.medium}' },
89
+ gap: { value: '{space.small}' },
90
+ },
91
+ footer: {
92
+ justifyContent: { value: 'flex-end' },
93
+ },
94
+ },
95
+ };
96
+
97
+ export { fileuploader };
package/dist/esm/theme/tokens/components/index.mjs CHANGED
@@ -19,6 +19,7 @@ import { fieldcontrol } from './fieldControl.mjs';
19
19
  import { fieldgroup } from './fieldGroup.mjs';
20
20
  import { fieldset } from './fieldset.mjs';
21
21
  import { fieldmessages } from './fieldMessages.mjs';
22
+ import { fileuploader } from './fileuploader.mjs';
22
23
  import { flex } from './flex.mjs';
23
24
  import { heading } from './heading.mjs';
24
25
  import { highlightmatch } from './highlightMatch.mjs';
@@ -75,6 +76,7 @@ const components = {
75
76
  fieldgroup,
76
77
  fieldmessages,
77
78
  fieldset,
79
+ fileuploader,
78
80
  flex,
79
81
  heading,
80
82
  icon,
package/dist/index.js CHANGED
@@ -6873,6 +6873,102 @@ const fieldmessages = {
6873
6873
  },
6874
6874
  };
6875
6875
 
6876
+ const fileuploader = {
6877
+ dropzone: {
6878
+ backgroundColor: { value: '{colors.background.primary}' },
6879
+ borderRadius: { value: '{radii.small}' },
6880
+ borderColor: { value: '{colors.border.primary}' },
6881
+ borderStyle: { value: 'dashed' },
6882
+ borderWidth: { value: '{borderWidths.small}' },
6883
+ gap: { value: '{space.small}' },
6884
+ paddingBlock: { value: '{space.xl}' },
6885
+ paddingInline: { value: '{space.large}' },
6886
+ textAlign: { value: 'center' },
6887
+ _active: {
6888
+ backgroundColor: { value: '{colors.primary.10}' },
6889
+ borderRadius: {
6890
+ value: '{components.fileuploader.dropzone.borderRadius}',
6891
+ },
6892
+ borderColor: { value: '{colors.border.pressed}' },
6893
+ borderStyle: {
6894
+ value: '{components.fileuploader.dropzone.borderStyle}',
6895
+ },
6896
+ borderWidth: { value: '{borderWidths.medium}' },
6897
+ },
6898
+ icon: {
6899
+ color: { value: '{colors.border.primary}' },
6900
+ fontSize: { value: '{fontSizes.xxl}' },
6901
+ },
6902
+ text: {
6903
+ color: { value: '{colors.font.tertiary}' },
6904
+ fontSize: { value: '{fontSizes.medium}' },
6905
+ fontWeight: { value: '{fontWeights.bold}' },
6906
+ },
6907
+ },
6908
+ file: {
6909
+ backgroundColor: { value: '{colors.background.primary}' },
6910
+ borderRadius: { value: '{radii.small}' },
6911
+ borderColor: { value: '{colors.border.primary}' },
6912
+ borderStyle: { value: 'solid' },
6913
+ borderWidth: { value: '{borderWidths.small}' },
6914
+ paddingBlock: { value: '{space.xs}' },
6915
+ paddingInline: { value: '{space.small}' },
6916
+ gap: { value: '{space.small}' },
6917
+ alignItems: { value: 'baseline' },
6918
+ name: {
6919
+ fontSize: { value: '{fontSizes.medium}' },
6920
+ fontWeight: { value: '{fontWeights.bold}' },
6921
+ color: { value: '{colors.font.primary}' },
6922
+ },
6923
+ size: {
6924
+ fontSize: { value: '{fontSizes.small}' },
6925
+ fontWeight: { value: '{fontWeights.normal}' },
6926
+ color: { value: '{colors.font.tertiary}' },
6927
+ },
6928
+ image: {
6929
+ width: { value: '{space.xxl}' },
6930
+ height: { value: '{space.xxl}' },
6931
+ backgroundColor: { value: '{colors.background.secondary}' },
6932
+ color: { value: '{colors.font.tertiary}' },
6933
+ borderRadius: { value: '{radii.small}' },
6934
+ },
6935
+ },
6936
+ filelist: {
6937
+ flexDirection: { value: 'column' },
6938
+ gap: { value: '{space.small}' },
6939
+ },
6940
+ loader: {
6941
+ strokeLinecap: { value: 'round' },
6942
+ strokeEmpty: { value: '{colors.border.secondary}' },
6943
+ strokeFilled: { value: '{components.loader.strokeFilled}' },
6944
+ strokeWidth: { value: '{borderWidths.large}' },
6945
+ },
6946
+ previewer: {
6947
+ backgroundColor: { value: '{colors.background.primary}' },
6948
+ borderColor: { value: '{colors.border.primary}' },
6949
+ borderStyle: { value: 'solid' },
6950
+ borderWidth: { value: '{borderWidths.small}' },
6951
+ borderRadius: { value: '{radii.small}' },
6952
+ paddingBlock: { value: '{space.zero}' },
6953
+ paddingInline: { value: '{space.zero}' },
6954
+ maxHeight: { value: '40rem' },
6955
+ maxWidth: { value: 'auto' },
6956
+ text: {
6957
+ fontSize: { value: '{fontSizes.medium}' },
6958
+ fontWeight: { value: '{fontWeights.bold}' },
6959
+ color: { value: '{colors.font.primary}' },
6960
+ },
6961
+ body: {
6962
+ paddingBlock: { value: '{space.medium}' },
6963
+ paddingInline: { value: '{space.medium}' },
6964
+ gap: { value: '{space.small}' },
6965
+ },
6966
+ footer: {
6967
+ justifyContent: { value: 'flex-end' },
6968
+ },
6969
+ },
6970
+ };
6971
+
6876
6972
  const flex = {
6877
6973
  gap: { value: '{space.medium.value}' },
6878
6974
  justifyContent: { value: 'normal' },
@@ -8073,6 +8169,7 @@ const components = {
8073
8169
  fieldgroup,
8074
8170
  fieldmessages,
8075
8171
  fieldset,
8172
+ fileuploader,
8076
8173
  flex,
8077
8174
  heading,
8078
8175
  icon,
package/dist/styles/FileUploader.css ADDED
@@ -0,0 +1,138 @@
1
+ .amplify-fileuploader__dropzone {
2
+ background-color: var(--amplify-components-fileuploader-dropzone-background-color);
3
+ border-color: var(--amplify-components-fileuploader-dropzone-border-color);
4
+ border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
5
+ border-style: var(--amplify-components-fileuploader-dropzone-border-style);
6
+ border-width: var(--amplify-components-fileuploader-dropzone-border-width);
7
+ text-align: var(--amplify-components-fileuploader-dropzone-text-align);
8
+ padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
9
+ padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
10
+ display: flex;
11
+ flex-direction: column;
12
+ align-items: center;
13
+ gap: var(--amplify-components-fileuploader-dropzone-gap);
14
+ }
15
+ .amplify-fileuploader__dropzone--small {
16
+ flex-direction: row;
17
+ justify-content: center;
18
+ }
19
+ .amplify-fileuploader__dropzone--active {
20
+ border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
21
+ border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
22
+ background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
23
+ }
24
+ .amplify-fileuploader__dropzone__icon {
25
+ font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
26
+ color: var(--amplify-components-fileuploader-dropzone-icon-color);
27
+ }
28
+ .amplify-fileuploader__dropzone__text {
29
+ color: var(--amplify-components-fileuploader-dropzone-text-color);
30
+ font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
31
+ font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
32
+ }
33
+ .amplify-fileuploader__file__list {
34
+ display: flex;
35
+ flex-direction: var(--amplify-components-fileuploader-filelist-flex-direction);
36
+ gap: var(--amplify-components-fileuploader-filelist-gap);
37
+ }
38
+ .amplify-fileuploader__file {
39
+ position: relative;
40
+ border-width: var(--amplify-components-fileuploader-file-border-width);
41
+ border-style: var(--amplify-components-fileuploader-file-border-style);
42
+ border-color: var(--amplify-components-fileuploader-file-border-color);
43
+ border-radius: var(--amplify-components-fileuploader-file-border-radius);
44
+ display: flex;
45
+ flex-direction: column;
46
+ padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
47
+ padding-block: var(--amplify-components-fileuploader-file-padding-block);
48
+ align-items: var(--amplify-components-fileuploader-file-align-items);
49
+ }
50
+ .amplify-fileuploader__file__wrapper {
51
+ width: 100%;
52
+ display: flex;
53
+ flex-direction: row;
54
+ align-items: center;
55
+ gap: var(--amplify-components-fileuploader-file-gap);
56
+ }
57
+ .amplify-fileuploader__file__name {
58
+ text-overflow: ellipsis;
59
+ overflow: hidden;
60
+ font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
61
+ font-size: var(--amplify-components-fileuploader-file-name-font-size);
62
+ color: var(--amplify-components-fileuploader-file-name-color);
63
+ }
64
+ .amplify-fileuploader__file__size {
65
+ font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
66
+ font-size: var(--amplify-components-fileuploader-file-size-font-size);
67
+ color: var(--amplify-components-fileuploader-file-size-color);
68
+ }
69
+ .amplify-fileuploader__file__main {
70
+ flex: 1;
71
+ white-space: nowrap;
72
+ overflow: hidden;
73
+ }
74
+ .amplify-fileuploader__file__image {
75
+ position: relative;
76
+ display: flex;
77
+ align-items: center;
78
+ justify-content: center;
79
+ width: var(--amplify-components-fileuploader-file-image-width);
80
+ height: var(--amplify-components-fileuploader-file-image-height);
81
+ background-color: var(--amplify-components-fileuploader-file-image-background-color);
82
+ border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
83
+ color: var(--amplify-components-fileuploader-file-image-color);
84
+ }
85
+ .amplify-fileuploader__file__image img {
86
+ max-height: 100%;
87
+ }
88
+ .amplify-fileuploader__file__status--error {
89
+ color: var(--amplify-colors-font-error);
90
+ font-size: var(--amplify-components-fileuploader-file-size-font-size);
91
+ }
92
+ .amplify-fileuploader__file__status--success {
93
+ color: var(--amplify-colors-font-success);
94
+ }
95
+ .amplify-fileuploader__loader {
96
+ stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
97
+ stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
98
+ stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
99
+ height: var(--amplify-components-fileuploader-loader-stroke-width);
100
+ --amplify-components-loader-linear-stroke-filled: var(
101
+ --amplify-components-fileuploader-loader-stroke-filled
102
+ );
103
+ overflow: hidden;
104
+ position: absolute;
105
+ bottom: 0;
106
+ left: 0;
107
+ width: 100%;
108
+ }
109
+ .amplify-fileuploader__previewer {
110
+ display: flex;
111
+ flex-direction: column;
112
+ max-width: var(--amplify-components-fileuploader-previewer-max-width);
113
+ max-height: var(--amplify-components-fileuploader-previewer-max-height);
114
+ overflow: auto;
115
+ gap: var(--amplify-components-fileuploader-previewer-body-gap);
116
+ padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
117
+ padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
118
+ background-color: var(--amplify-components-fileuploader-previewer-background-color);
119
+ border-width: var(--amplify-components-fileuploader-previewer-border-width);
120
+ border-style: var(--amplify-components-fileuploader-previewer-border-style);
121
+ border-color: var(--amplify-components-fileuploader-previewer-border-color);
122
+ border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
123
+ }
124
+ .amplify-fileuploader__previewer__text {
125
+ font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
126
+ font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
127
+ color: var(--amplify-components-fileuploader-previewer-text-color);
128
+ }
129
+ .amplify-fileuploader__previewer__footer {
130
+ display: flex;
131
+ flex-direction: row;
132
+ justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
133
+ }
134
+ .amplify-fileuploader__previewer__actions {
135
+ display: flex;
136
+ flex-direction: row;
137
+ gap: var(--amplify-space-small);
138
+ }
package/dist/styles/FileUploader.layer.css ADDED
@@ -0,0 +1,140 @@
1
+ @layer amplify.components {
2
+ .amplify-fileuploader__dropzone {
3
+ background-color: var(--amplify-components-fileuploader-dropzone-background-color);
4
+ border-color: var(--amplify-components-fileuploader-dropzone-border-color);
5
+ border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
6
+ border-style: var(--amplify-components-fileuploader-dropzone-border-style);
7
+ border-width: var(--amplify-components-fileuploader-dropzone-border-width);
8
+ text-align: var(--amplify-components-fileuploader-dropzone-text-align);
9
+ padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
10
+ padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
11
+ display: flex;
12
+ flex-direction: column;
13
+ align-items: center;
14
+ gap: var(--amplify-components-fileuploader-dropzone-gap);
15
+ }
16
+ .amplify-fileuploader__dropzone--small {
17
+ flex-direction: row;
18
+ justify-content: center;
19
+ }
20
+ .amplify-fileuploader__dropzone--active {
21
+ border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
22
+ border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
23
+ background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
24
+ }
25
+ .amplify-fileuploader__dropzone__icon {
26
+ font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
27
+ color: var(--amplify-components-fileuploader-dropzone-icon-color);
28
+ }
29
+ .amplify-fileuploader__dropzone__text {
30
+ color: var(--amplify-components-fileuploader-dropzone-text-color);
31
+ font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
32
+ font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
33
+ }
34
+ .amplify-fileuploader__file__list {
35
+ display: flex;
36
+ flex-direction: var(--amplify-components-fileuploader-filelist-flex-direction);
37
+ gap: var(--amplify-components-fileuploader-filelist-gap);
38
+ }
39
+ .amplify-fileuploader__file {
40
+ position: relative;
41
+ border-width: var(--amplify-components-fileuploader-file-border-width);
42
+ border-style: var(--amplify-components-fileuploader-file-border-style);
43
+ border-color: var(--amplify-components-fileuploader-file-border-color);
44
+ border-radius: var(--amplify-components-fileuploader-file-border-radius);
45
+ display: flex;
46
+ flex-direction: column;
47
+ padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
48
+ padding-block: var(--amplify-components-fileuploader-file-padding-block);
49
+ align-items: var(--amplify-components-fileuploader-file-align-items);
50
+ }
51
+ .amplify-fileuploader__file__wrapper {
52
+ width: 100%;
53
+ display: flex;
54
+ flex-direction: row;
55
+ align-items: center;
56
+ gap: var(--amplify-components-fileuploader-file-gap);
57
+ }
58
+ .amplify-fileuploader__file__name {
59
+ text-overflow: ellipsis;
60
+ overflow: hidden;
61
+ font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
62
+ font-size: var(--amplify-components-fileuploader-file-name-font-size);
63
+ color: var(--amplify-components-fileuploader-file-name-color);
64
+ }
65
+ .amplify-fileuploader__file__size {
66
+ font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
67
+ font-size: var(--amplify-components-fileuploader-file-size-font-size);
68
+ color: var(--amplify-components-fileuploader-file-size-color);
69
+ }
70
+ .amplify-fileuploader__file__main {
71
+ flex: 1;
72
+ white-space: nowrap;
73
+ overflow: hidden;
74
+ }
75
+ .amplify-fileuploader__file__image {
76
+ position: relative;
77
+ display: flex;
78
+ align-items: center;
79
+ justify-content: center;
80
+ width: var(--amplify-components-fileuploader-file-image-width);
81
+ height: var(--amplify-components-fileuploader-file-image-height);
82
+ background-color: var(--amplify-components-fileuploader-file-image-background-color);
83
+ border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
84
+ color: var(--amplify-components-fileuploader-file-image-color);
85
+ }
86
+ .amplify-fileuploader__file__image img {
87
+ max-height: 100%;
88
+ }
89
+ .amplify-fileuploader__file__status--error {
90
+ color: var(--amplify-colors-font-error);
91
+ font-size: var(--amplify-components-fileuploader-file-size-font-size);
92
+ }
93
+ .amplify-fileuploader__file__status--success {
94
+ color: var(--amplify-colors-font-success);
95
+ }
96
+ .amplify-fileuploader__loader {
97
+ stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
98
+ stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
99
+ stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
100
+ height: var(--amplify-components-fileuploader-loader-stroke-width);
101
+ --amplify-components-loader-linear-stroke-filled: var(
102
+ --amplify-components-fileuploader-loader-stroke-filled
103
+ );
104
+ overflow: hidden;
105
+ position: absolute;
106
+ bottom: 0;
107
+ left: 0;
108
+ width: 100%;
109
+ }
110
+ .amplify-fileuploader__previewer {
111
+ display: flex;
112
+ flex-direction: column;
113
+ max-width: var(--amplify-components-fileuploader-previewer-max-width);
114
+ max-height: var(--amplify-components-fileuploader-previewer-max-height);
115
+ overflow: auto;
116
+ gap: var(--amplify-components-fileuploader-previewer-body-gap);
117
+ padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
118
+ padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
119
+ background-color: var(--amplify-components-fileuploader-previewer-background-color);
120
+ border-width: var(--amplify-components-fileuploader-previewer-border-width);
121
+ border-style: var(--amplify-components-fileuploader-previewer-border-style);
122
+ border-color: var(--amplify-components-fileuploader-previewer-border-color);
123
+ border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
124
+ }
125
+ .amplify-fileuploader__previewer__text {
126
+ font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
127
+ font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
128
+ color: var(--amplify-components-fileuploader-previewer-text-color);
129
+ }
130
+ .amplify-fileuploader__previewer__footer {
131
+ display: flex;
132
+ flex-direction: row;
133
+ justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
134
+ }
135
+ .amplify-fileuploader__previewer__actions {
136
+ display: flex;
137
+ flex-direction: row;
138
+ gap: var(--amplify-space-small);
139
+ }
140
+ }
package/dist/styles/base.css CHANGED
@@ -701,6 +701,67 @@
701
701
  --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large);
702
702
  --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap);
703
703
  --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap);
704
+ --amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary);
705
+ --amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small);
706
+ --amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary);
707
+ --amplify-components-fileuploader-dropzone-border-style: dashed;
708
+ --amplify-components-fileuploader-dropzone-border-width: var(--amplify-border-widths-small);
709
+ --amplify-components-fileuploader-dropzone-gap: var(--amplify-space-small);
710
+ --amplify-components-fileuploader-dropzone-padding-block: var(--amplify-space-xl);
711
+ --amplify-components-fileuploader-dropzone-padding-inline: var(--amplify-space-large);
712
+ --amplify-components-fileuploader-dropzone-text-align: center;
713
+ --amplify-components-fileuploader-dropzone-active-background-color: var(--amplify-colors-primary-10);
714
+ --amplify-components-fileuploader-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
715
+ --amplify-components-fileuploader-dropzone-active-border-color: var(--amplify-colors-border-pressed);
716
+ --amplify-components-fileuploader-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
717
+ --amplify-components-fileuploader-dropzone-active-border-width: var(--amplify-border-widths-medium);
718
+ --amplify-components-fileuploader-dropzone-icon-color: var(--amplify-colors-border-primary);
719
+ --amplify-components-fileuploader-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
720
+ --amplify-components-fileuploader-dropzone-text-color: var(--amplify-colors-font-tertiary);
721
+ --amplify-components-fileuploader-dropzone-text-font-size: var(--amplify-font-sizes-medium);
722
+ --amplify-components-fileuploader-dropzone-text-font-weight: var(--amplify-font-weights-bold);
723
+ --amplify-components-fileuploader-file-background-color: var(--amplify-colors-background-primary);
724
+ --amplify-components-fileuploader-file-border-radius: var(--amplify-radii-small);
725
+ --amplify-components-fileuploader-file-border-color: var(--amplify-colors-border-primary);
726
+ --amplify-components-fileuploader-file-border-style: solid;
727
+ --amplify-components-fileuploader-file-border-width: var(--amplify-border-widths-small);
728
+ --amplify-components-fileuploader-file-padding-block: var(--amplify-space-xs);
729
+ --amplify-components-fileuploader-file-padding-inline: var(--amplify-space-small);
730
+ --amplify-components-fileuploader-file-gap: var(--amplify-space-small);
731
+ --amplify-components-fileuploader-file-align-items: baseline;
732
+ --amplify-components-fileuploader-file-name-font-size: var(--amplify-font-sizes-medium);
733
+ --amplify-components-fileuploader-file-name-font-weight: var(--amplify-font-weights-bold);
734
+ --amplify-components-fileuploader-file-name-color: var(--amplify-colors-font-primary);
735
+ --amplify-components-fileuploader-file-size-font-size: var(--amplify-font-sizes-small);
736
+ --amplify-components-fileuploader-file-size-font-weight: var(--amplify-font-weights-normal);
737
+ --amplify-components-fileuploader-file-size-color: var(--amplify-colors-font-tertiary);
738
+ --amplify-components-fileuploader-file-image-width: var(--amplify-space-xxl);
739
+ --amplify-components-fileuploader-file-image-height: var(--amplify-space-xxl);
740
+ --amplify-components-fileuploader-file-image-background-color: var(--amplify-colors-background-secondary);
741
+ --amplify-components-fileuploader-file-image-color: var(--amplify-colors-font-tertiary);
742
+ --amplify-components-fileuploader-file-image-border-radius: var(--amplify-radii-small);
743
+ --amplify-components-fileuploader-filelist-flex-direction: column;
744
+ --amplify-components-fileuploader-filelist-gap: var(--amplify-space-small);
745
+ --amplify-components-fileuploader-loader-stroke-linecap: round;
746
+ --amplify-components-fileuploader-loader-stroke-empty: var(--amplify-colors-border-secondary);
747
+ --amplify-components-fileuploader-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
748
+ --amplify-components-fileuploader-loader-stroke-width: var(--amplify-border-widths-large);
749
+ --amplify-components-fileuploader-previewer-background-color: var(--amplify-colors-background-primary);
750
+ --amplify-components-fileuploader-previewer-border-color: var(--amplify-colors-border-primary);
751
+ --amplify-components-fileuploader-previewer-border-style: solid;
752
+ --amplify-components-fileuploader-previewer-border-width: var(--amplify-border-widths-small);
753
+ --amplify-components-fileuploader-previewer-border-radius: var(--amplify-radii-small);
754
+ --amplify-components-fileuploader-previewer-padding-block: var(--amplify-space-zero);
755
+ --amplify-components-fileuploader-previewer-padding-inline: var(--amplify-space-zero);
756
+ --amplify-components-fileuploader-previewer-max-height: 40rem;
757
+ --amplify-components-fileuploader-previewer-max-width: auto;
758
+ --amplify-components-fileuploader-previewer-text-font-size: var(--amplify-font-sizes-medium);
759
+ --amplify-components-fileuploader-previewer-text-font-weight: var(--amplify-font-weights-bold);
760
+ --amplify-components-fileuploader-previewer-text-color: var(--amplify-colors-font-primary);
761
+ --amplify-components-fileuploader-previewer-body-padding-block: var(--amplify-space-medium);
762
+ --amplify-components-fileuploader-previewer-body-padding-inline: var(--amplify-space-medium);
763
+ --amplify-components-fileuploader-previewer-body-gap: var(--amplify-space-small);
764
+ --amplify-components-fileuploader-previewer-footer-justify-content: flex-end;
704
765
  --amplify-components-flex-gap: var(--amplify-space-medium);
705
766
  --amplify-components-flex-justify-content: normal;
706
767
  --amplify-components-flex-align-items: stretch;
package/dist/styles/base.layer.css CHANGED
@@ -702,6 +702,67 @@
702
702
  --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large);
703
703
  --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap);
704
704
  --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap);
705
+ --amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary);
706
+ --amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small);
707
+ --amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary);
708
+ --amplify-components-fileuploader-dropzone-border-style: dashed;
709
+ --amplify-components-fileuploader-dropzone-border-width: var(--amplify-border-widths-small);
710
+ --amplify-components-fileuploader-dropzone-gap: var(--amplify-space-small);
711
+ --amplify-components-fileuploader-dropzone-padding-block: var(--amplify-space-xl);
712
+ --amplify-components-fileuploader-dropzone-padding-inline: var(--amplify-space-large);
713
+ --amplify-components-fileuploader-dropzone-text-align: center;
714
+ --amplify-components-fileuploader-dropzone-active-background-color: var(--amplify-colors-primary-10);
715
+ --amplify-components-fileuploader-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
716
+ --amplify-components-fileuploader-dropzone-active-border-color: var(--amplify-colors-border-pressed);
717
+ --amplify-components-fileuploader-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
718
+ --amplify-components-fileuploader-dropzone-active-border-width: var(--amplify-border-widths-medium);
719
+ --amplify-components-fileuploader-dropzone-icon-color: var(--amplify-colors-border-primary);
720
+ --amplify-components-fileuploader-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
721
+ --amplify-components-fileuploader-dropzone-text-color: var(--amplify-colors-font-tertiary);
722
+ --amplify-components-fileuploader-dropzone-text-font-size: var(--amplify-font-sizes-medium);
723
+ --amplify-components-fileuploader-dropzone-text-font-weight: var(--amplify-font-weights-bold);
724
+ --amplify-components-fileuploader-file-background-color: var(--amplify-colors-background-primary);
725
+ --amplify-components-fileuploader-file-border-radius: var(--amplify-radii-small);
726
+ --amplify-components-fileuploader-file-border-color: var(--amplify-colors-border-primary);
727
+ --amplify-components-fileuploader-file-border-style: solid;
728
+ --amplify-components-fileuploader-file-border-width: var(--amplify-border-widths-small);
729
+ --amplify-components-fileuploader-file-padding-block: var(--amplify-space-xs);
730
+ --amplify-components-fileuploader-file-padding-inline: var(--amplify-space-small);
731
+ --amplify-components-fileuploader-file-gap: var(--amplify-space-small);
732
+ --amplify-components-fileuploader-file-align-items: baseline;
733
+ --amplify-components-fileuploader-file-name-font-size: var(--amplify-font-sizes-medium);
734
+ --amplify-components-fileuploader-file-name-font-weight: var(--amplify-font-weights-bold);
735
+ --amplify-components-fileuploader-file-name-color: var(--amplify-colors-font-primary);
736
+ --amplify-components-fileuploader-file-size-font-size: var(--amplify-font-sizes-small);
737
+ --amplify-components-fileuploader-file-size-font-weight: var(--amplify-font-weights-normal);
738
+ --amplify-components-fileuploader-file-size-color: var(--amplify-colors-font-tertiary);
739
+ --amplify-components-fileuploader-file-image-width: var(--amplify-space-xxl);
740
+ --amplify-components-fileuploader-file-image-height: var(--amplify-space-xxl);
741
+ --amplify-components-fileuploader-file-image-background-color: var(--amplify-colors-background-secondary);
742
+ --amplify-components-fileuploader-file-image-color: var(--amplify-colors-font-tertiary);
743
+ --amplify-components-fileuploader-file-image-border-radius: var(--amplify-radii-small);
744
+ --amplify-components-fileuploader-filelist-flex-direction: column;
745
+ --amplify-components-fileuploader-filelist-gap: var(--amplify-space-small);
746
+ --amplify-components-fileuploader-loader-stroke-linecap: round;
747
+ --amplify-components-fileuploader-loader-stroke-empty: var(--amplify-colors-border-secondary);
748
+ --amplify-components-fileuploader-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
749
+ --amplify-components-fileuploader-loader-stroke-width: var(--amplify-border-widths-large);
750
+ --amplify-components-fileuploader-previewer-background-color: var(--amplify-colors-background-primary);
751
+ --amplify-components-fileuploader-previewer-border-color: var(--amplify-colors-border-primary);
752
+ --amplify-components-fileuploader-previewer-border-style: solid;
753
+ --amplify-components-fileuploader-previewer-border-width: var(--amplify-border-widths-small);
754
+ --amplify-components-fileuploader-previewer-border-radius: var(--amplify-radii-small);
755
+ --amplify-components-fileuploader-previewer-padding-block: var(--amplify-space-zero);
756
+ --amplify-components-fileuploader-previewer-padding-inline: var(--amplify-space-zero);
757
+ --amplify-components-fileuploader-previewer-max-height: 40rem;
758
+ --amplify-components-fileuploader-previewer-max-width: auto;
759
+ --amplify-components-fileuploader-previewer-text-font-size: var(--amplify-font-sizes-medium);
760
+ --amplify-components-fileuploader-previewer-text-font-weight: var(--amplify-font-weights-bold);
761
+ --amplify-components-fileuploader-previewer-text-color: var(--amplify-colors-font-primary);
762
+ --amplify-components-fileuploader-previewer-body-padding-block: var(--amplify-space-medium);
763
+ --amplify-components-fileuploader-previewer-body-padding-inline: var(--amplify-space-medium);
764
+ --amplify-components-fileuploader-previewer-body-gap: var(--amplify-space-small);
765
+ --amplify-components-fileuploader-previewer-footer-justify-content: flex-end;
705
766
  --amplify-components-flex-gap: var(--amplify-space-medium);
706
767
  --amplify-components-flex-justify-content: normal;
707
768
  --amplify-components-flex-align-items: stretch;
package/dist/styles.css CHANGED
@@ -701,6 +701,67 @@
701
701
  --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large);
702
702
  --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap);
703
703
  --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap);
704
+ --amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary);
705
+ --amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small);
706
+ --amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary);
707
+ --amplify-components-fileuploader-dropzone-border-style: dashed;
708
+ --amplify-components-fileuploader-dropzone-border-width: var(--amplify-border-widths-small);
709
+ --amplify-components-fileuploader-dropzone-gap: var(--amplify-space-small);
710
+ --amplify-components-fileuploader-dropzone-padding-block: var(--amplify-space-xl);
711
+ --amplify-components-fileuploader-dropzone-padding-inline: var(--amplify-space-large);
712
+ --amplify-components-fileuploader-dropzone-text-align: center;
713
+ --amplify-components-fileuploader-dropzone-active-background-color: var(--amplify-colors-primary-10);
714
+ --amplify-components-fileuploader-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
715
+ --amplify-components-fileuploader-dropzone-active-border-color: var(--amplify-colors-border-pressed);
716
+ --amplify-components-fileuploader-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
717
+ --amplify-components-fileuploader-dropzone-active-border-width: var(--amplify-border-widths-medium);
718
+ --amplify-components-fileuploader-dropzone-icon-color: var(--amplify-colors-border-primary);
719
+ --amplify-components-fileuploader-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
720
+ --amplify-components-fileuploader-dropzone-text-color: var(--amplify-colors-font-tertiary);
721
+ --amplify-components-fileuploader-dropzone-text-font-size: var(--amplify-font-sizes-medium);
722
+ --amplify-components-fileuploader-dropzone-text-font-weight: var(--amplify-font-weights-bold);
723
+ --amplify-components-fileuploader-file-background-color: var(--amplify-colors-background-primary);
724
+ --amplify-components-fileuploader-file-border-radius: var(--amplify-radii-small);
725
+ --amplify-components-fileuploader-file-border-color: var(--amplify-colors-border-primary);
726
+ --amplify-components-fileuploader-file-border-style: solid;
727
+ --amplify-components-fileuploader-file-border-width: var(--amplify-border-widths-small);
728
+ --amplify-components-fileuploader-file-padding-block: var(--amplify-space-xs);
729
+ --amplify-components-fileuploader-file-padding-inline: var(--amplify-space-small);
730
+ --amplify-components-fileuploader-file-gap: var(--amplify-space-small);
731
+ --amplify-components-fileuploader-file-align-items: baseline;
732
+ --amplify-components-fileuploader-file-name-font-size: var(--amplify-font-sizes-medium);
733
+ --amplify-components-fileuploader-file-name-font-weight: var(--amplify-font-weights-bold);
734
+ --amplify-components-fileuploader-file-name-color: var(--amplify-colors-font-primary);
735
+ --amplify-components-fileuploader-file-size-font-size: var(--amplify-font-sizes-small);
736
+ --amplify-components-fileuploader-file-size-font-weight: var(--amplify-font-weights-normal);
737
+ --amplify-components-fileuploader-file-size-color: var(--amplify-colors-font-tertiary);
738
+ --amplify-components-fileuploader-file-image-width: var(--amplify-space-xxl);
739
+ --amplify-components-fileuploader-file-image-height: var(--amplify-space-xxl);
740
+ --amplify-components-fileuploader-file-image-background-color: var(--amplify-colors-background-secondary);
741
+ --amplify-components-fileuploader-file-image-color: var(--amplify-colors-font-tertiary);
742
+ --amplify-components-fileuploader-file-image-border-radius: var(--amplify-radii-small);
743
+ --amplify-components-fileuploader-filelist-flex-direction: column;
744
+ --amplify-components-fileuploader-filelist-gap: var(--amplify-space-small);
745
+ --amplify-components-fileuploader-loader-stroke-linecap: round;
746
+ --amplify-components-fileuploader-loader-stroke-empty: var(--amplify-colors-border-secondary);
747
+ --amplify-components-fileuploader-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
748
+ --amplify-components-fileuploader-loader-stroke-width: var(--amplify-border-widths-large);
749
+ --amplify-components-fileuploader-previewer-background-color: var(--amplify-colors-background-primary);
750
+ --amplify-components-fileuploader-previewer-border-color: var(--amplify-colors-border-primary);
751
+ --amplify-components-fileuploader-previewer-border-style: solid;
752
+ --amplify-components-fileuploader-previewer-border-width: var(--amplify-border-widths-small);
753
+ --amplify-components-fileuploader-previewer-border-radius: var(--amplify-radii-small);
754
+ --amplify-components-fileuploader-previewer-padding-block: var(--amplify-space-zero);
755
+ --amplify-components-fileuploader-previewer-padding-inline: var(--amplify-space-zero);
756
+ --amplify-components-fileuploader-previewer-max-height: 40rem;
757
+ --amplify-components-fileuploader-previewer-max-width: auto;
758
+ --amplify-components-fileuploader-previewer-text-font-size: var(--amplify-font-sizes-medium);
759
+ --amplify-components-fileuploader-previewer-text-font-weight: var(--amplify-font-weights-bold);
760
+ --amplify-components-fileuploader-previewer-text-color: var(--amplify-colors-font-primary);
761
+ --amplify-components-fileuploader-previewer-body-padding-block: var(--amplify-space-medium);
762
+ --amplify-components-fileuploader-previewer-body-padding-inline: var(--amplify-space-medium);
763
+ --amplify-components-fileuploader-previewer-body-gap: var(--amplify-space-small);
764
+ --amplify-components-fileuploader-previewer-footer-justify-content: flex-end;
704
765
  --amplify-components-flex-gap: var(--amplify-space-medium);
705
766
  --amplify-components-flex-justify-content: normal;
706
767
  --amplify-components-flex-align-items: stretch;
@@ -6006,6 +6067,145 @@ html[dir=rtl] .amplify-field-group__inner-start {
6006
6067
  }
6007
6068
  }
6008
6069
 
6070
+ .amplify-fileuploader__dropzone {
6071
+ background-color: var(--amplify-components-fileuploader-dropzone-background-color);
6072
+ border-color: var(--amplify-components-fileuploader-dropzone-border-color);
6073
+ border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
6074
+ border-style: var(--amplify-components-fileuploader-dropzone-border-style);
6075
+ border-width: var(--amplify-components-fileuploader-dropzone-border-width);
6076
+ text-align: var(--amplify-components-fileuploader-dropzone-text-align);
6077
+ padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
6078
+ padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
6079
+ display: flex;
6080
+ flex-direction: column;
6081
+ align-items: center;
6082
+ gap: var(--amplify-components-fileuploader-dropzone-gap);
6083
+ }
6084
+ .amplify-fileuploader__dropzone--small {
6085
+ flex-direction: row;
6086
+ justify-content: center;
6087
+ }
6088
+ .amplify-fileuploader__dropzone--active {
6089
+ border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
6090
+ border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
6091
+ background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
6092
+ }
6093
+ .amplify-fileuploader__dropzone__icon {
6094
+ font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
6095
+ color: var(--amplify-components-fileuploader-dropzone-icon-color);
6096
+ }
6097
+ .amplify-fileuploader__dropzone__text {
6098
+ color: var(--amplify-components-fileuploader-dropzone-text-color);
6099
+ font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
6100
+ font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
6101
+ }
6102
+ .amplify-fileuploader__file__list {
6103
+ display: flex;
6104
+ flex-direction: var(--amplify-components-fileuploader-filelist-flex-direction);
6105
+ gap: var(--amplify-components-fileuploader-filelist-gap);
6106
+ }
6107
+ .amplify-fileuploader__file {
6108
+ position: relative;
6109
+ border-width: var(--amplify-components-fileuploader-file-border-width);
6110
+ border-style: var(--amplify-components-fileuploader-file-border-style);
6111
+ border-color: var(--amplify-components-fileuploader-file-border-color);
6112
+ border-radius: var(--amplify-components-fileuploader-file-border-radius);
6113
+ display: flex;
6114
+ flex-direction: column;
6115
+ padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
6116
+ padding-block: var(--amplify-components-fileuploader-file-padding-block);
6117
+ align-items: var(--amplify-components-fileuploader-file-align-items);
6118
+ }
6119
+ .amplify-fileuploader__file__wrapper {
6120
+ width: 100%;
6121
+ display: flex;
6122
+ flex-direction: row;
6123
+ align-items: center;
6124
+ gap: var(--amplify-components-fileuploader-file-gap);
6125
+ }
6126
+ .amplify-fileuploader__file__name {
6127
+ text-overflow: ellipsis;
6128
+ overflow: hidden;
6129
+ font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
6130
+ font-size: var(--amplify-components-fileuploader-file-name-font-size);
6131
+ color: var(--amplify-components-fileuploader-file-name-color);
6132
+ }
6133
+ .amplify-fileuploader__file__size {
6134
+ font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
6135
+ font-size: var(--amplify-components-fileuploader-file-size-font-size);
6136
+ color: var(--amplify-components-fileuploader-file-size-color);
6137
+ }
6138
+ .amplify-fileuploader__file__main {
6139
+ flex: 1;
6140
+ white-space: nowrap;
6141
+ overflow: hidden;
6142
+ }
6143
+ .amplify-fileuploader__file__image {
6144
+ position: relative;
6145
+ display: flex;
6146
+ align-items: center;
6147
+ justify-content: center;
6148
+ width: var(--amplify-components-fileuploader-file-image-width);
6149
+ height: var(--amplify-components-fileuploader-file-image-height);
6150
+ background-color: var(--amplify-components-fileuploader-file-image-background-color);
6151
+ border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
6152
+ color: var(--amplify-components-fileuploader-file-image-color);
6153
+ }
6154
+ .amplify-fileuploader__file__image img {
6155
+ max-height: 100%;
6156
+ }
6157
+ .amplify-fileuploader__file__status--error {
6158
+ color: var(--amplify-colors-font-error);
6159
+ font-size: var(--amplify-components-fileuploader-file-size-font-size);
6160
+ }
6161
+ .amplify-fileuploader__file__status--success {
6162
+ color: var(--amplify-colors-font-success);
6163
+ }
6164
+ .amplify-fileuploader__loader {
6165
+ stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
6166
+ stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
6167
+ stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
6168
+ height: var(--amplify-components-fileuploader-loader-stroke-width);
6169
+ --amplify-components-loader-linear-stroke-filled: var(
6170
+ --amplify-components-fileuploader-loader-stroke-filled
6171
+ );
6172
+ overflow: hidden;
6173
+ position: absolute;
6174
+ bottom: 0;
6175
+ left: 0;
6176
+ width: 100%;
6177
+ }
6178
+ .amplify-fileuploader__previewer {
6179
+ display: flex;
6180
+ flex-direction: column;
6181
+ max-width: var(--amplify-components-fileuploader-previewer-max-width);
6182
+ max-height: var(--amplify-components-fileuploader-previewer-max-height);
6183
+ overflow: auto;
6184
+ gap: var(--amplify-components-fileuploader-previewer-body-gap);
6185
+ padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
6186
+ padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
6187
+ background-color: var(--amplify-components-fileuploader-previewer-background-color);
6188
+ border-width: var(--amplify-components-fileuploader-previewer-border-width);
6189
+ border-style: var(--amplify-components-fileuploader-previewer-border-style);
6190
+ border-color: var(--amplify-components-fileuploader-previewer-border-color);
6191
+ border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
6192
+ }
6193
+ .amplify-fileuploader__previewer__text {
6194
+ font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
6195
+ font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
6196
+ color: var(--amplify-components-fileuploader-previewer-text-color);
6197
+ }
6198
+ .amplify-fileuploader__previewer__footer {
6199
+ display: flex;
6200
+ flex-direction: row;
6201
+ justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
6202
+ }
6203
+ .amplify-fileuploader__previewer__actions {
6204
+ display: flex;
6205
+ flex-direction: row;
6206
+ gap: var(--amplify-space-small);
6207
+ }
6208
+
6009
6209
  .amplify-inappmessaging-backdrop {
6010
6210
  background-color: var(--amplify-colors-overlay-50);
6011
6211
  inset: 0;
package/dist/styles.layer.css CHANGED
@@ -702,6 +702,67 @@
702
702
  --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large);
703
703
  --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap);
704
704
  --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap);
705
+ --amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary);
706
+ --amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small);
707
+ --amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary);
708
+ --amplify-components-fileuploader-dropzone-border-style: dashed;
709
+ --amplify-components-fileuploader-dropzone-border-width: var(--amplify-border-widths-small);
710
+ --amplify-components-fileuploader-dropzone-gap: var(--amplify-space-small);
711
+ --amplify-components-fileuploader-dropzone-padding-block: var(--amplify-space-xl);
712
+ --amplify-components-fileuploader-dropzone-padding-inline: var(--amplify-space-large);
713
+ --amplify-components-fileuploader-dropzone-text-align: center;
714
+ --amplify-components-fileuploader-dropzone-active-background-color: var(--amplify-colors-primary-10);
715
+ --amplify-components-fileuploader-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
716
+ --amplify-components-fileuploader-dropzone-active-border-color: var(--amplify-colors-border-pressed);
717
+ --amplify-components-fileuploader-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
718
+ --amplify-components-fileuploader-dropzone-active-border-width: var(--amplify-border-widths-medium);
719
+ --amplify-components-fileuploader-dropzone-icon-color: var(--amplify-colors-border-primary);
720
+ --amplify-components-fileuploader-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
721
+ --amplify-components-fileuploader-dropzone-text-color: var(--amplify-colors-font-tertiary);
722
+ --amplify-components-fileuploader-dropzone-text-font-size: var(--amplify-font-sizes-medium);
723
+ --amplify-components-fileuploader-dropzone-text-font-weight: var(--amplify-font-weights-bold);
724
+ --amplify-components-fileuploader-file-background-color: var(--amplify-colors-background-primary);
725
+ --amplify-components-fileuploader-file-border-radius: var(--amplify-radii-small);
726
+ --amplify-components-fileuploader-file-border-color: var(--amplify-colors-border-primary);
727
+ --amplify-components-fileuploader-file-border-style: solid;
728
+ --amplify-components-fileuploader-file-border-width: var(--amplify-border-widths-small);
729
+ --amplify-components-fileuploader-file-padding-block: var(--amplify-space-xs);
730
+ --amplify-components-fileuploader-file-padding-inline: var(--amplify-space-small);
731
+ --amplify-components-fileuploader-file-gap: var(--amplify-space-small);
732
+ --amplify-components-fileuploader-file-align-items: baseline;
733
+ --amplify-components-fileuploader-file-name-font-size: var(--amplify-font-sizes-medium);
734
+ --amplify-components-fileuploader-file-name-font-weight: var(--amplify-font-weights-bold);
735
+ --amplify-components-fileuploader-file-name-color: var(--amplify-colors-font-primary);
736
+ --amplify-components-fileuploader-file-size-font-size: var(--amplify-font-sizes-small);
737
+ --amplify-components-fileuploader-file-size-font-weight: var(--amplify-font-weights-normal);
738
+ --amplify-components-fileuploader-file-size-color: var(--amplify-colors-font-tertiary);
739
+ --amplify-components-fileuploader-file-image-width: var(--amplify-space-xxl);
740
+ --amplify-components-fileuploader-file-image-height: var(--amplify-space-xxl);
741
+ --amplify-components-fileuploader-file-image-background-color: var(--amplify-colors-background-secondary);
742
+ --amplify-components-fileuploader-file-image-color: var(--amplify-colors-font-tertiary);
743
+ --amplify-components-fileuploader-file-image-border-radius: var(--amplify-radii-small);
744
+ --amplify-components-fileuploader-filelist-flex-direction: column;
745
+ --amplify-components-fileuploader-filelist-gap: var(--amplify-space-small);
746
+ --amplify-components-fileuploader-loader-stroke-linecap: round;
747
+ --amplify-components-fileuploader-loader-stroke-empty: var(--amplify-colors-border-secondary);
748
+ --amplify-components-fileuploader-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
749
+ --amplify-components-fileuploader-loader-stroke-width: var(--amplify-border-widths-large);
750
+ --amplify-components-fileuploader-previewer-background-color: var(--amplify-colors-background-primary);
751
+ --amplify-components-fileuploader-previewer-border-color: var(--amplify-colors-border-primary);
752
+ --amplify-components-fileuploader-previewer-border-style: solid;
753
+ --amplify-components-fileuploader-previewer-border-width: var(--amplify-border-widths-small);
754
+ --amplify-components-fileuploader-previewer-border-radius: var(--amplify-radii-small);
755
+ --amplify-components-fileuploader-previewer-padding-block: var(--amplify-space-zero);
756
+ --amplify-components-fileuploader-previewer-padding-inline: var(--amplify-space-zero);
757
+ --amplify-components-fileuploader-previewer-max-height: 40rem;
758
+ --amplify-components-fileuploader-previewer-max-width: auto;
759
+ --amplify-components-fileuploader-previewer-text-font-size: var(--amplify-font-sizes-medium);
760
+ --amplify-components-fileuploader-previewer-text-font-weight: var(--amplify-font-weights-bold);
761
+ --amplify-components-fileuploader-previewer-text-color: var(--amplify-colors-font-primary);
762
+ --amplify-components-fileuploader-previewer-body-padding-block: var(--amplify-space-medium);
763
+ --amplify-components-fileuploader-previewer-body-padding-inline: var(--amplify-space-medium);
764
+ --amplify-components-fileuploader-previewer-body-gap: var(--amplify-space-small);
765
+ --amplify-components-fileuploader-previewer-footer-justify-content: flex-end;
705
766
  --amplify-components-flex-gap: var(--amplify-space-medium);
706
767
  --amplify-components-flex-justify-content: normal;
707
768
  --amplify-components-flex-align-items: stretch;
@@ -6007,6 +6068,145 @@ html[dir=rtl] .amplify-field-group__inner-start {
6007
6068
  }
6008
6069
  }
6009
6070
 
6071
+ .amplify-fileuploader__dropzone {
6072
+ background-color: var(--amplify-components-fileuploader-dropzone-background-color);
6073
+ border-color: var(--amplify-components-fileuploader-dropzone-border-color);
6074
+ border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
6075
+ border-style: var(--amplify-components-fileuploader-dropzone-border-style);
6076
+ border-width: var(--amplify-components-fileuploader-dropzone-border-width);
6077
+ text-align: var(--amplify-components-fileuploader-dropzone-text-align);
6078
+ padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
6079
+ padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
6080
+ display: flex;
6081
+ flex-direction: column;
6082
+ align-items: center;
6083
+ gap: var(--amplify-components-fileuploader-dropzone-gap);
6084
+ }
6085
+ .amplify-fileuploader__dropzone--small {
6086
+ flex-direction: row;
6087
+ justify-content: center;
6088
+ }
6089
+ .amplify-fileuploader__dropzone--active {
6090
+ border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
6091
+ border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
6092
+ background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
6093
+ }
6094
+ .amplify-fileuploader__dropzone__icon {
6095
+ font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
6096
+ color: var(--amplify-components-fileuploader-dropzone-icon-color);
6097
+ }
6098
+ .amplify-fileuploader__dropzone__text {
6099
+ color: var(--amplify-components-fileuploader-dropzone-text-color);
6100
+ font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
6101
+ font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
6102
+ }
6103
+ .amplify-fileuploader__file__list {
6104
+ display: flex;
6105
+ flex-direction: var(--amplify-components-fileuploader-filelist-flex-direction);
6106
+ gap: var(--amplify-components-fileuploader-filelist-gap);
6107
+ }
6108
+ .amplify-fileuploader__file {
6109
+ position: relative;
6110
+ border-width: var(--amplify-components-fileuploader-file-border-width);
6111
+ border-style: var(--amplify-components-fileuploader-file-border-style);
6112
+ border-color: var(--amplify-components-fileuploader-file-border-color);
6113
+ border-radius: var(--amplify-components-fileuploader-file-border-radius);
6114
+ display: flex;
6115
+ flex-direction: column;
6116
+ padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
6117
+ padding-block: var(--amplify-components-fileuploader-file-padding-block);
6118
+ align-items: var(--amplify-components-fileuploader-file-align-items);
6119
+ }
6120
+ .amplify-fileuploader__file__wrapper {
6121
+ width: 100%;
6122
+ display: flex;
6123
+ flex-direction: row;
6124
+ align-items: center;
6125
+ gap: var(--amplify-components-fileuploader-file-gap);
6126
+ }
6127
+ .amplify-fileuploader__file__name {
6128
+ text-overflow: ellipsis;
6129
+ overflow: hidden;
6130
+ font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
6131
+ font-size: var(--amplify-components-fileuploader-file-name-font-size);
6132
+ color: var(--amplify-components-fileuploader-file-name-color);
6133
+ }
6134
+ .amplify-fileuploader__file__size {
6135
+ font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
6136
+ font-size: var(--amplify-components-fileuploader-file-size-font-size);
6137
+ color: var(--amplify-components-fileuploader-file-size-color);
6138
+ }
6139
+ .amplify-fileuploader__file__main {
6140
+ flex: 1;
6141
+ white-space: nowrap;
6142
+ overflow: hidden;
6143
+ }
6144
+ .amplify-fileuploader__file__image {
6145
+ position: relative;
6146
+ display: flex;
6147
+ align-items: center;
6148
+ justify-content: center;
6149
+ width: var(--amplify-components-fileuploader-file-image-width);
6150
+ height: var(--amplify-components-fileuploader-file-image-height);
6151
+ background-color: var(--amplify-components-fileuploader-file-image-background-color);
6152
+ border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
6153
+ color: var(--amplify-components-fileuploader-file-image-color);
6154
+ }
6155
+ .amplify-fileuploader__file__image img {
6156
+ max-height: 100%;
6157
+ }
6158
+ .amplify-fileuploader__file__status--error {
6159
+ color: var(--amplify-colors-font-error);
6160
+ font-size: var(--amplify-components-fileuploader-file-size-font-size);
6161
+ }
6162
+ .amplify-fileuploader__file__status--success {
6163
+ color: var(--amplify-colors-font-success);
6164
+ }
6165
+ .amplify-fileuploader__loader {
6166
+ stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
6167
+ stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
6168
+ stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
6169
+ height: var(--amplify-components-fileuploader-loader-stroke-width);
6170
+ --amplify-components-loader-linear-stroke-filled: var(
6171
+ --amplify-components-fileuploader-loader-stroke-filled
6172
+ );
6173
+ overflow: hidden;
6174
+ position: absolute;
6175
+ bottom: 0;
6176
+ left: 0;
6177
+ width: 100%;
6178
+ }
6179
+ .amplify-fileuploader__previewer {
6180
+ display: flex;
6181
+ flex-direction: column;
6182
+ max-width: var(--amplify-components-fileuploader-previewer-max-width);
6183
+ max-height: var(--amplify-components-fileuploader-previewer-max-height);
6184
+ overflow: auto;
6185
+ gap: var(--amplify-components-fileuploader-previewer-body-gap);
6186
+ padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
6187
+ padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
6188
+ background-color: var(--amplify-components-fileuploader-previewer-background-color);
6189
+ border-width: var(--amplify-components-fileuploader-previewer-border-width);
6190
+ border-style: var(--amplify-components-fileuploader-previewer-border-style);
6191
+ border-color: var(--amplify-components-fileuploader-previewer-border-color);
6192
+ border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
6193
+ }
6194
+ .amplify-fileuploader__previewer__text {
6195
+ font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
6196
+ font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
6197
+ color: var(--amplify-components-fileuploader-previewer-text-color);
6198
+ }
6199
+ .amplify-fileuploader__previewer__footer {
6200
+ display: flex;
6201
+ flex-direction: row;
6202
+ justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
6203
+ }
6204
+ .amplify-fileuploader__previewer__actions {
6205
+ display: flex;
6206
+ flex-direction: row;
6207
+ gap: var(--amplify-space-small);
6208
+ }
6209
+
6010
6210
  .amplify-inappmessaging-backdrop {
6011
6211
  background-color: var(--amplify-colors-overlay-50);
6012
6212
  inset: 0;
package/dist/theme.css CHANGED
@@ -698,6 +698,67 @@
698
698
  --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large);
699
699
  --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap);
700
700
  --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap);
701
+ --amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary);
702
+ --amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small);
703
+ --amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary);
704
+ --amplify-components-fileuploader-dropzone-border-style: dashed;
705
+ --amplify-components-fileuploader-dropzone-border-width: var(--amplify-border-widths-small);
706
+ --amplify-components-fileuploader-dropzone-gap: var(--amplify-space-small);
707
+ --amplify-components-fileuploader-dropzone-padding-block: var(--amplify-space-xl);
708
+ --amplify-components-fileuploader-dropzone-padding-inline: var(--amplify-space-large);
709
+ --amplify-components-fileuploader-dropzone-text-align: center;
710
+ --amplify-components-fileuploader-dropzone-active-background-color: var(--amplify-colors-primary-10);
711
+ --amplify-components-fileuploader-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
712
+ --amplify-components-fileuploader-dropzone-active-border-color: var(--amplify-colors-border-pressed);
713
+ --amplify-components-fileuploader-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
714
+ --amplify-components-fileuploader-dropzone-active-border-width: var(--amplify-border-widths-medium);
715
+ --amplify-components-fileuploader-dropzone-icon-color: var(--amplify-colors-border-primary);
716
+ --amplify-components-fileuploader-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
717
+ --amplify-components-fileuploader-dropzone-text-color: var(--amplify-colors-font-tertiary);
718
+ --amplify-components-fileuploader-dropzone-text-font-size: var(--amplify-font-sizes-medium);
719
+ --amplify-components-fileuploader-dropzone-text-font-weight: var(--amplify-font-weights-bold);
720
+ --amplify-components-fileuploader-file-background-color: var(--amplify-colors-background-primary);
721
+ --amplify-components-fileuploader-file-border-radius: var(--amplify-radii-small);
722
+ --amplify-components-fileuploader-file-border-color: var(--amplify-colors-border-primary);
723
+ --amplify-components-fileuploader-file-border-style: solid;
724
+ --amplify-components-fileuploader-file-border-width: var(--amplify-border-widths-small);
725
+ --amplify-components-fileuploader-file-padding-block: var(--amplify-space-xs);
726
+ --amplify-components-fileuploader-file-padding-inline: var(--amplify-space-small);
727
+ --amplify-components-fileuploader-file-gap: var(--amplify-space-small);
728
+ --amplify-components-fileuploader-file-align-items: baseline;
729
+ --amplify-components-fileuploader-file-name-font-size: var(--amplify-font-sizes-medium);
730
+ --amplify-components-fileuploader-file-name-font-weight: var(--amplify-font-weights-bold);
731
+ --amplify-components-fileuploader-file-name-color: var(--amplify-colors-font-primary);
732
+ --amplify-components-fileuploader-file-size-font-size: var(--amplify-font-sizes-small);
733
+ --amplify-components-fileuploader-file-size-font-weight: var(--amplify-font-weights-normal);
734
+ --amplify-components-fileuploader-file-size-color: var(--amplify-colors-font-tertiary);
735
+ --amplify-components-fileuploader-file-image-width: var(--amplify-space-xxl);
736
+ --amplify-components-fileuploader-file-image-height: var(--amplify-space-xxl);
737
+ --amplify-components-fileuploader-file-image-background-color: var(--amplify-colors-background-secondary);
738
+ --amplify-components-fileuploader-file-image-color: var(--amplify-colors-font-tertiary);
739
+ --amplify-components-fileuploader-file-image-border-radius: var(--amplify-radii-small);
740
+ --amplify-components-fileuploader-filelist-flex-direction: column;
741
+ --amplify-components-fileuploader-filelist-gap: var(--amplify-space-small);
742
+ --amplify-components-fileuploader-loader-stroke-linecap: round;
743
+ --amplify-components-fileuploader-loader-stroke-empty: var(--amplify-colors-border-secondary);
744
+ --amplify-components-fileuploader-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
745
+ --amplify-components-fileuploader-loader-stroke-width: var(--amplify-border-widths-large);
746
+ --amplify-components-fileuploader-previewer-background-color: var(--amplify-colors-background-primary);
747
+ --amplify-components-fileuploader-previewer-border-color: var(--amplify-colors-border-primary);
748
+ --amplify-components-fileuploader-previewer-border-style: solid;
749
+ --amplify-components-fileuploader-previewer-border-width: var(--amplify-border-widths-small);
750
+ --amplify-components-fileuploader-previewer-border-radius: var(--amplify-radii-small);
751
+ --amplify-components-fileuploader-previewer-padding-block: var(--amplify-space-zero);
752
+ --amplify-components-fileuploader-previewer-padding-inline: var(--amplify-space-zero);
753
+ --amplify-components-fileuploader-previewer-max-height: 40rem;
754
+ --amplify-components-fileuploader-previewer-max-width: auto;
755
+ --amplify-components-fileuploader-previewer-text-font-size: var(--amplify-font-sizes-medium);
756
+ --amplify-components-fileuploader-previewer-text-font-weight: var(--amplify-font-weights-bold);
757
+ --amplify-components-fileuploader-previewer-text-color: var(--amplify-colors-font-primary);
758
+ --amplify-components-fileuploader-previewer-body-padding-block: var(--amplify-space-medium);
759
+ --amplify-components-fileuploader-previewer-body-padding-inline: var(--amplify-space-medium);
760
+ --amplify-components-fileuploader-previewer-body-gap: var(--amplify-space-small);
761
+ --amplify-components-fileuploader-previewer-footer-justify-content: flex-end;
701
762
  --amplify-components-flex-gap: var(--amplify-space-medium);
702
763
  --amplify-components-flex-justify-content: normal;
703
764
  --amplify-components-flex-align-items: stretch;
package/dist/types/theme/components/index.d.ts CHANGED
@@ -16,6 +16,7 @@ import { DropZoneTheme } from './dropZone';
16
16
  import { FieldTheme } from './field';
17
17
  import { FieldGroupTheme } from './fieldGroup';
18
18
  import { FieldsetTheme } from './fieldset';
19
+ import { FileUploaderTheme } from './fileUploader';
19
20
  import { HeadingTheme } from './heading';
20
21
  import { HighlightMatchTheme } from './highlightMatch';
21
22
  import { InputTheme } from './input';
@@ -44,7 +45,7 @@ import { ToggleButtonTheme, ToggleButtonGroupTheme } from './toggleButton';
44
45
  import { ComponentTheme, BaseComponentTheme, BaseTheme } from './utils';
45
46
  export { ClassNameFunction } from '../createTheme/createComponentClasses';
46
47
  export type { ComponentTheme, BaseComponentTheme, BaseTheme };
47
- export type ComponentsTheme<TokensType extends WebTokens = WebTokens> = BaseComponentTheme<BaseTheme, string, TokensType> | BaseComponentTheme<AccordionTheme, 'accordion', TokensType> | BaseComponentTheme<AlertTheme, 'alert', TokensType> | BaseComponentTheme<AutoCompleteTheme, 'autocomplete', TokensType> | BaseComponentTheme<AvatarTheme, 'avatar', TokensType> | BaseComponentTheme<BadgeTheme, 'badge', TokensType> | BaseComponentTheme<BreadcrumbsTheme, 'breadcrumbs', TokensType> | BaseComponentTheme<ButtonTheme, 'button', TokensType> | BaseComponentTheme<ButtonGroupTheme, 'buttongroup', TokensType> | BaseComponentTheme<CardTheme, 'card', TokensType> | BaseComponentTheme<CheckboxTheme, 'checkbox', TokensType> | BaseComponentTheme<CheckboxFieldTheme, 'checkboxfield', TokensType> | BaseComponentTheme<CollectionTheme, 'collection', TokensType> | BaseComponentTheme<DividerTheme, 'divider', TokensType> | BaseComponentTheme<DropZoneTheme, 'dropzone', TokensType> | BaseComponentTheme<FieldTheme, 'field', TokensType> | BaseComponentTheme<FieldGroupTheme, 'field-group', TokensType> | BaseComponentTheme<FieldsetTheme, 'fieldset', TokensType> | BaseComponentTheme<HeadingTheme, 'heading', TokensType> | BaseComponentTheme<HighlightMatchTheme, 'highlightmatch', TokensType> | BaseComponentTheme<InputTheme, 'input', TokensType> | BaseComponentTheme<LoaderTheme, 'loader', TokensType> | BaseComponentTheme<MenuTheme, 'menu', TokensType> | BaseComponentTheme<MessageTheme, 'message', TokensType> | BaseComponentTheme<PaginationTheme, 'pagination', TokensType> | BaseComponentTheme<PlaceholderTheme, 'placeholder', TokensType> | BaseComponentTheme<RatingTheme, 'rating', TokensType> | BaseComponentTheme<RadioTheme, 'radio', TokensType> | BaseComponentTheme<ScrollViewTheme, 'scrollview', TokensType> | BaseComponentTheme<SearchFieldTheme, 'searchfield', TokensType> | BaseComponentTheme<SelectTheme, 'select', TokensType> | BaseComponentTheme<SelectFieldTheme, 'selectfield', TokensType> | BaseComponentTheme<SliderFieldTheme, 'sliderfield', TokensType> | BaseComponentTheme<StepperFieldTheme, 'stepperfield', TokensType> | BaseComponentTheme<StorageManagerTheme, 'storagemanager', TokensType> | BaseComponentTheme<SwitchTheme, 'switch', TokensType> | BaseComponentTheme<SwitchFieldTheme, 'switchfield', TokensType> | BaseComponentTheme<TabsTheme, 'tabs', TokensType> | BaseComponentTheme<TableTheme, 'table', TokensType> | BaseComponentTheme<TextTheme, 'text', TokensType> | BaseComponentTheme<TextareaTheme, 'textarea', TokensType> | BaseComponentTheme<TextareaFieldTheme, 'textareafield', TokensType> | BaseComponentTheme<TextFieldTheme, 'textfield', TokensType> | BaseComponentTheme<ToggleButtonTheme, 'togglebutton', TokensType> | BaseComponentTheme<ToggleButtonGroupTheme, 'togglebuttongroup', TokensType>;
48
+ export type ComponentsTheme<TokensType extends WebTokens = WebTokens> = BaseComponentTheme<BaseTheme, string, TokensType> | BaseComponentTheme<AccordionTheme, 'accordion', TokensType> | BaseComponentTheme<AlertTheme, 'alert', TokensType> | BaseComponentTheme<AutoCompleteTheme, 'autocomplete', TokensType> | BaseComponentTheme<AvatarTheme, 'avatar', TokensType> | BaseComponentTheme<BadgeTheme, 'badge', TokensType> | BaseComponentTheme<BreadcrumbsTheme, 'breadcrumbs', TokensType> | BaseComponentTheme<ButtonTheme, 'button', TokensType> | BaseComponentTheme<ButtonGroupTheme, 'buttongroup', TokensType> | BaseComponentTheme<CardTheme, 'card', TokensType> | BaseComponentTheme<CheckboxTheme, 'checkbox', TokensType> | BaseComponentTheme<CheckboxFieldTheme, 'checkboxfield', TokensType> | BaseComponentTheme<CollectionTheme, 'collection', TokensType> | BaseComponentTheme<DividerTheme, 'divider', TokensType> | BaseComponentTheme<DropZoneTheme, 'dropzone', TokensType> | BaseComponentTheme<FieldTheme, 'field', TokensType> | BaseComponentTheme<FieldGroupTheme, 'field-group', TokensType> | BaseComponentTheme<FieldsetTheme, 'fieldset', TokensType> | BaseComponentTheme<FileUploaderTheme, 'fileuploader', TokensType> | BaseComponentTheme<HeadingTheme, 'heading', TokensType> | BaseComponentTheme<HighlightMatchTheme, 'highlightmatch', TokensType> | BaseComponentTheme<InputTheme, 'input', TokensType> | BaseComponentTheme<LoaderTheme, 'loader', TokensType> | BaseComponentTheme<MenuTheme, 'menu', TokensType> | BaseComponentTheme<MessageTheme, 'message', TokensType> | BaseComponentTheme<PaginationTheme, 'pagination', TokensType> | BaseComponentTheme<PlaceholderTheme, 'placeholder', TokensType> | BaseComponentTheme<RatingTheme, 'rating', TokensType> | BaseComponentTheme<RadioTheme, 'radio', TokensType> | BaseComponentTheme<ScrollViewTheme, 'scrollview', TokensType> | BaseComponentTheme<SearchFieldTheme, 'searchfield', TokensType> | BaseComponentTheme<SelectTheme, 'select', TokensType> | BaseComponentTheme<SelectFieldTheme, 'selectfield', TokensType> | BaseComponentTheme<SliderFieldTheme, 'sliderfield', TokensType> | BaseComponentTheme<StepperFieldTheme, 'stepperfield', TokensType> | BaseComponentTheme<StorageManagerTheme, 'storagemanager', TokensType> | BaseComponentTheme<SwitchTheme, 'switch', TokensType> | BaseComponentTheme<SwitchFieldTheme, 'switchfield', TokensType> | BaseComponentTheme<TabsTheme, 'tabs', TokensType> | BaseComponentTheme<TableTheme, 'table', TokensType> | BaseComponentTheme<TextTheme, 'text', TokensType> | BaseComponentTheme<TextareaTheme, 'textarea', TokensType> | BaseComponentTheme<TextareaFieldTheme, 'textareafield', TokensType> | BaseComponentTheme<TextFieldTheme, 'textfield', TokensType> | BaseComponentTheme<ToggleButtonTheme, 'togglebutton', TokensType> | BaseComponentTheme<ToggleButtonGroupTheme, 'togglebuttongroup', TokensType>;
48
49
  export type AllComponentThemes = {
49
50
  accordion: AccordionTheme;
50
51
  alert: AlertTheme;
@@ -63,6 +64,7 @@ export type AllComponentThemes = {
63
64
  field: FieldTheme;
64
65
  'field-group': FieldGroupTheme;
65
66
  fieldset: FieldsetTheme;
67
+ fileuploader: FileUploaderTheme;
66
68
  heading: HeadingTheme;
67
69
  highlightmatch: HighlightMatchTheme;
68
70
  input: InputTheme;
package/dist/types/theme/tokens/components/fileuploader.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
2
+ import { TypographyTokens } from '../types/typography';
3
+ type BaseDropZoneTokens<OutputType> = DesignTokenProperties<'backgroundColor' | 'borderWidth' | 'borderStyle' | 'borderColor' | 'borderRadius', OutputType>;
4
+ export interface FileUploaderTokens<OutputType extends OutputVariantKey> {
5
+ dropzone?: DesignTokenProperties<'gap' | 'paddingBlock' | 'paddingInline' | 'textAlign', OutputType> & BaseDropZoneTokens<OutputType> & {
6
+ _active?: BaseDropZoneTokens<OutputType>;
7
+ icon?: DesignTokenProperties<'fontSize' | 'color', OutputType>;
8
+ text?: TypographyTokens<OutputType>;
9
+ };
10
+ file?: DesignTokenProperties<'alignItems' | 'backgroundColor' | 'borderColor' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'gap' | 'paddingBlock' | 'paddingInline', OutputType> & {
11
+ name?: TypographyTokens<OutputType>;
12
+ size?: TypographyTokens<OutputType>;
13
+ image?: DesignTokenProperties<'backgroundColor' | 'borderRadius' | 'color' | 'height' | 'width', OutputType>;
14
+ };
15
+ filelist?: DesignTokenProperties<'flexDirection' | 'gap'>;
16
+ loader?: DesignTokenProperties<'strokeWidth' | 'strokeFilled' | 'strokeEmpty' | 'strokeLinecap', OutputType>;
17
+ previewer?: DesignTokenProperties<'backgroundColor' | 'borderColor' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'maxHeight' | 'maxWidth' | 'paddingBlock' | 'paddingInline', OutputType> & {
18
+ text?: TypographyTokens<OutputType>;
19
+ body?: DesignTokenProperties<'gap' | 'paddingInline' | 'paddingBlock', OutputType>;
20
+ footer?: DesignTokenProperties<'justifyContent', OutputType>;
21
+ };
22
+ }
23
+ export declare const fileuploader: Required<FileUploaderTokens<'default'>>;
24
+ export {};
package/dist/types/theme/tokens/components/index.d.ts CHANGED
@@ -19,6 +19,7 @@ import { FieldControlTokens } from './fieldControl';
19
19
  import { FieldGroupTokens } from './fieldGroup';
20
20
  import { FieldsetTokens } from './fieldset';
21
21
  import { FieldMessagesTokens } from './fieldMessages';
22
+ import { FileUploaderTokens } from './fileuploader';
22
23
  import { FlexTokens } from './flex';
23
24
  import { HeadingTokens } from './heading';
24
25
  import { HighlightMatchTokens } from './highlightMatch';
@@ -75,6 +76,7 @@ type BaseComponentTokens<Output extends OutputVariantKey> = {
75
76
  fieldcontrol?: FieldControlTokens<Output>;
76
77
  fieldgroup?: FieldGroupTokens<Output>;
77
78
  fieldmessages?: FieldMessagesTokens<Output>;
79
+ fileuploader?: FileUploaderTokens<Output>;
78
80
  flex?: FlexTokens<Output>;
79
81
  heading?: HeadingTokens<Output>;
80
82
  highlightmatch?: HighlightMatchTokens<Output>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui",
3
- "version": "6.4.0",
3
+ "version": "6.4.1",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {