@aws-amplify/ui-react 6.3.0 → 6.4.0

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 (16) hide show
  1. package/dist/esm/PrimitiveCatalog.mjs +3 -0
  2. package/dist/esm/primitives/Avatar/Avatar.mjs +5 -2
  3. package/dist/esm/version.mjs +1 -1
  4. package/dist/index.js +5 -3
  5. package/dist/internal.js +3 -0
  6. package/dist/styles/FileUploader.css +138 -0
  7. package/dist/styles/FileUploader.layer.css +140 -0
  8. package/dist/styles/avatar.css +20 -0
  9. package/dist/styles/avatar.layer.css +20 -0
  10. package/dist/styles/base.css +61 -0
  11. package/dist/styles/base.layer.css +61 -0
  12. package/dist/styles.css +220 -0
  13. package/dist/styles.layer.css +220 -0
  14. package/dist/types/primitives/Avatar/types.d.ts +5 -0
  15. package/dist/types/version.d.ts +1 -1
  16. package/package.json +5 -5
package/dist/esm/PrimitiveCatalog.mjs CHANGED
@@ -658,6 +658,9 @@ const PrimitiveCatalog = {
658
658
  "size": {
659
659
  "type": "string"
660
660
  },
661
+ "isLoading": {
662
+ "type": "boolean"
663
+ },
661
664
  "isDisabled": {
662
665
  "type": "boolean"
663
666
  },
package/dist/esm/primitives/Avatar/Avatar.mjs CHANGED
@@ -7,12 +7,15 @@ import '../Icon/context/IconsContext.mjs';
7
7
  import { useIcons } from '../Icon/context/useIcons.mjs';
8
8
  import { IconUser } from '../Icon/icons/IconUser.mjs';
9
9
  import { Image } from '../Image/Image.mjs';
10
+ import { Loader } from '../Loader/Loader.mjs';
10
11
 
11
- const AvatarPrimitive = ({ className, children, variation, colorTheme, size, src, alt, ...rest }, ref) => {
12
+ const AvatarPrimitive = ({ className, children, variation, colorTheme, size, src, alt, isLoading, ...rest }, ref) => {
12
13
  const icons = useIcons('avatar');
13
14
  const icon = icons?.user ?? React.createElement(IconUser, null);
14
15
  const componentClasses = classNames(ComponentClassName.Avatar, className, classNameModifier(ComponentClassName.Avatar, variation), classNameModifier(ComponentClassName.Avatar, size), classNameModifier(ComponentClassName.Avatar, colorTheme));
15
- return (React.createElement(View, { as: "span", className: componentClasses, ref: ref, ...rest }, src ? (React.createElement(Image, { className: ComponentClassName.AvatarImage, src: src, alt: alt })) : (children ?? (React.createElement(View, { as: "span", className: ComponentClassName.AvatarIcon, "aria-hidden": "true" }, icon)))));
16
+ return (React.createElement(View, { as: "span", className: componentClasses, ref: ref, ...rest },
17
+ src ? (React.createElement(Image, { className: ComponentClassName.AvatarImage, src: src, alt: alt })) : (children ?? (React.createElement(View, { as: "span", className: ComponentClassName.AvatarIcon, "aria-hidden": "true" }, icon))),
18
+ isLoading ? (React.createElement(Loader, { className: ComponentClassName.AvatarLoader })) : null));
16
19
  };
17
20
  /**
18
21
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/avatar)
package/dist/esm/version.mjs CHANGED
@@ -1,3 +1,3 @@
1
- const VERSION = '6.3.0';
1
+ const VERSION = '6.4.0';
2
2
 
3
3
  export { VERSION };
package/dist/index.js CHANGED
@@ -669,11 +669,13 @@ const ImagePrimitive = ({ className, ...rest }, ref) => (React__namespace.create
669
669
  const Image = primitiveWithForwardRef.primitiveWithForwardRef(ImagePrimitive);
670
670
  Image.displayName = 'Image';
671
671
 
672
- const AvatarPrimitive = ({ className, children, variation, colorTheme, size, src, alt, ...rest }, ref) => {
672
+ const AvatarPrimitive = ({ className, children, variation, colorTheme, size, src, alt, isLoading, ...rest }, ref) => {
673
673
  const icons = Field.useIcons('avatar');
674
674
  const icon = icons?.user ?? React__namespace.createElement(Field.IconUser, null);
675
675
  const componentClasses = ui.classNames(ui.ComponentClassName.Avatar, className, ui.classNameModifier(ui.ComponentClassName.Avatar, variation), ui.classNameModifier(ui.ComponentClassName.Avatar, size), ui.classNameModifier(ui.ComponentClassName.Avatar, colorTheme));
676
- return (React__namespace.createElement(Field.View, { as: "span", className: componentClasses, ref: ref, ...rest }, src ? (React__namespace.createElement(Image, { className: ui.ComponentClassName.AvatarImage, src: src, alt: alt })) : (children ?? (React__namespace.createElement(Field.View, { as: "span", className: ui.ComponentClassName.AvatarIcon, "aria-hidden": "true" }, icon)))));
676
+ return (React__namespace.createElement(Field.View, { as: "span", className: componentClasses, ref: ref, ...rest },
677
+ src ? (React__namespace.createElement(Image, { className: ui.ComponentClassName.AvatarImage, src: src, alt: alt })) : (children ?? (React__namespace.createElement(Field.View, { as: "span", className: ui.ComponentClassName.AvatarIcon, "aria-hidden": "true" }, icon))),
678
+ isLoading ? (React__namespace.createElement(Field.Loader, { className: ui.ComponentClassName.AvatarLoader })) : null));
677
679
  };
678
680
  /**
679
681
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/avatar)
@@ -2521,7 +2523,7 @@ const defaultDeleteUserDisplayText = {
2521
2523
  warningText: 'Deleting your account is not reversible. You will lose access to your account and all data associated with it.',
2522
2524
  };
2523
2525
 
2524
- const VERSION = '6.3.0';
2526
+ const VERSION = '6.4.0';
2525
2527
 
2526
2528
  const logger$2 = ui.getLogger('AccountSettings');
2527
2529
  const getIsDisabled = (formValues, validationError) => {
package/dist/internal.js CHANGED
@@ -818,6 +818,9 @@ const PrimitiveCatalog = {
818
818
  "size": {
819
819
  "type": "string"
820
820
  },
821
+ "isLoading": {
822
+ "type": "boolean"
823
+ },
821
824
  "isDisabled": {
822
825
  "type": "boolean"
823
826
  },
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/avatar.css CHANGED
@@ -6,6 +6,7 @@
6
6
  --avatar-border-color: var(--amplify-components-avatar-border-color);
7
7
  --avatar-size: var(--amplify-components-avatar-width);
8
8
  --amplify-components-icon-height: 100%;
9
+ position: relative;
9
10
  display: inline-flex;
10
11
  align-items: center;
11
12
  justify-content: center;
@@ -56,6 +57,9 @@
56
57
  --avatar-filled-color: var(
57
58
  --amplify-components-avatar-warning-background-color
58
59
  );
60
+ --amplify-components-loader-stroke-filled: var(
61
+ --amplify-components-avatar-warning-color
62
+ );
59
63
  }
60
64
  .amplify-avatar--error {
61
65
  --avatar-border-color: var(--amplify-components-avatar-error-border-color);
@@ -69,6 +73,9 @@
69
73
  --avatar-filled-color: var(
70
74
  --amplify-components-avatar-error-background-color
71
75
  );
76
+ --amplify-components-loader-stroke-filled: var(
77
+ --amplify-components-avatar-error-color
78
+ );
72
79
  }
73
80
  .amplify-avatar--info {
74
81
  --avatar-border-color: var(--amplify-components-avatar-info-border-color);
@@ -82,6 +89,9 @@
82
89
  --avatar-filled-color: var(
83
90
  --amplify-components-avatar-info-background-color
84
91
  );
92
+ --amplify-components-loader-stroke-filled: var(
93
+ --amplify-components-avatar-info-color
94
+ );
85
95
  }
86
96
  .amplify-avatar--success {
87
97
  --avatar-border-color: var(
@@ -97,6 +107,9 @@
97
107
  --avatar-filled-color: var(
98
108
  --amplify-components-avatar-success-background-color
99
109
  );
110
+ --amplify-components-loader-stroke-filled: var(
111
+ --amplify-components-avatar-success-color
112
+ );
100
113
  }
101
114
  .amplify-avatar__icon {
102
115
  display: flex;
@@ -108,4 +121,11 @@
108
121
  -o-object-fit: cover;
109
122
  object-fit: cover;
110
123
  display: block;
124
+ }
125
+ .amplify-avatar__loader {
126
+ position: absolute;
127
+ inset: 0;
128
+ width: 100%;
129
+ height: 100%;
130
+ stroke: transparent;
111
131
  }
package/dist/styles/avatar.layer.css CHANGED
@@ -7,6 +7,7 @@
7
7
  --avatar-border-color: var(--amplify-components-avatar-border-color);
8
8
  --avatar-size: var(--amplify-components-avatar-width);
9
9
  --amplify-components-icon-height: 100%;
10
+ position: relative;
10
11
  display: inline-flex;
11
12
  align-items: center;
12
13
  justify-content: center;
@@ -57,6 +58,9 @@
57
58
  --avatar-filled-color: var(
58
59
  --amplify-components-avatar-warning-background-color
59
60
  );
61
+ --amplify-components-loader-stroke-filled: var(
62
+ --amplify-components-avatar-warning-color
63
+ );
60
64
  }
61
65
  .amplify-avatar--error {
62
66
  --avatar-border-color: var(--amplify-components-avatar-error-border-color);
@@ -70,6 +74,9 @@
70
74
  --avatar-filled-color: var(
71
75
  --amplify-components-avatar-error-background-color
72
76
  );
77
+ --amplify-components-loader-stroke-filled: var(
78
+ --amplify-components-avatar-error-color
79
+ );
73
80
  }
74
81
  .amplify-avatar--info {
75
82
  --avatar-border-color: var(--amplify-components-avatar-info-border-color);
@@ -83,6 +90,9 @@
83
90
  --avatar-filled-color: var(
84
91
  --amplify-components-avatar-info-background-color
85
92
  );
93
+ --amplify-components-loader-stroke-filled: var(
94
+ --amplify-components-avatar-info-color
95
+ );
86
96
  }
87
97
  .amplify-avatar--success {
88
98
  --avatar-border-color: var(
@@ -98,6 +108,9 @@
98
108
  --avatar-filled-color: var(
99
109
  --amplify-components-avatar-success-background-color
100
110
  );
111
+ --amplify-components-loader-stroke-filled: var(
112
+ --amplify-components-avatar-success-color
113
+ );
101
114
  }
102
115
  .amplify-avatar__icon {
103
116
  display: flex;
@@ -110,4 +123,11 @@
110
123
  object-fit: cover;
111
124
  display: block;
112
125
  }
126
+ .amplify-avatar__loader {
127
+ position: absolute;
128
+ inset: 0;
129
+ width: 100%;
130
+ height: 100%;
131
+ stroke: transparent;
132
+ }
113
133
  }
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;
@@ -3458,6 +3519,7 @@ strong.amplify-text {
3458
3519
  --avatar-border-color: var(--amplify-components-avatar-border-color);
3459
3520
  --avatar-size: var(--amplify-components-avatar-width);
3460
3521
  --amplify-components-icon-height: 100%;
3522
+ position: relative;
3461
3523
  display: inline-flex;
3462
3524
  align-items: center;
3463
3525
  justify-content: center;
@@ -3508,6 +3570,9 @@ strong.amplify-text {
3508
3570
  --avatar-filled-color: var(
3509
3571
  --amplify-components-avatar-warning-background-color
3510
3572
  );
3573
+ --amplify-components-loader-stroke-filled: var(
3574
+ --amplify-components-avatar-warning-color
3575
+ );
3511
3576
  }
3512
3577
  .amplify-avatar--error {
3513
3578
  --avatar-border-color: var(--amplify-components-avatar-error-border-color);
@@ -3521,6 +3586,9 @@ strong.amplify-text {
3521
3586
  --avatar-filled-color: var(
3522
3587
  --amplify-components-avatar-error-background-color
3523
3588
  );
3589
+ --amplify-components-loader-stroke-filled: var(
3590
+ --amplify-components-avatar-error-color
3591
+ );
3524
3592
  }
3525
3593
  .amplify-avatar--info {
3526
3594
  --avatar-border-color: var(--amplify-components-avatar-info-border-color);
@@ -3534,6 +3602,9 @@ strong.amplify-text {
3534
3602
  --avatar-filled-color: var(
3535
3603
  --amplify-components-avatar-info-background-color
3536
3604
  );
3605
+ --amplify-components-loader-stroke-filled: var(
3606
+ --amplify-components-avatar-info-color
3607
+ );
3537
3608
  }
3538
3609
  .amplify-avatar--success {
3539
3610
  --avatar-border-color: var(
@@ -3549,6 +3620,9 @@ strong.amplify-text {
3549
3620
  --avatar-filled-color: var(
3550
3621
  --amplify-components-avatar-success-background-color
3551
3622
  );
3623
+ --amplify-components-loader-stroke-filled: var(
3624
+ --amplify-components-avatar-success-color
3625
+ );
3552
3626
  }
3553
3627
  .amplify-avatar__icon {
3554
3628
  display: flex;
@@ -3561,6 +3635,13 @@ strong.amplify-text {
3561
3635
  object-fit: cover;
3562
3636
  display: block;
3563
3637
  }
3638
+ .amplify-avatar__loader {
3639
+ position: absolute;
3640
+ inset: 0;
3641
+ width: 100%;
3642
+ height: 100%;
3643
+ stroke: transparent;
3644
+ }
3564
3645
 
3565
3646
  .amplify-breadcrumbs__list {
3566
3647
  display: flex;
@@ -6006,6 +6087,145 @@ html[dir=rtl] .amplify-field-group__inner-start {
6006
6087
  }
6007
6088
  }
6008
6089
 
6090
+ .amplify-fileuploader__dropzone {
6091
+ background-color: var(--amplify-components-fileuploader-dropzone-background-color);
6092
+ border-color: var(--amplify-components-fileuploader-dropzone-border-color);
6093
+ border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
6094
+ border-style: var(--amplify-components-fileuploader-dropzone-border-style);
6095
+ border-width: var(--amplify-components-fileuploader-dropzone-border-width);
6096
+ text-align: var(--amplify-components-fileuploader-dropzone-text-align);
6097
+ padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
6098
+ padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
6099
+ display: flex;
6100
+ flex-direction: column;
6101
+ align-items: center;
6102
+ gap: var(--amplify-components-fileuploader-dropzone-gap);
6103
+ }
6104
+ .amplify-fileuploader__dropzone--small {
6105
+ flex-direction: row;
6106
+ justify-content: center;
6107
+ }
6108
+ .amplify-fileuploader__dropzone--active {
6109
+ border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
6110
+ border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
6111
+ background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
6112
+ }
6113
+ .amplify-fileuploader__dropzone__icon {
6114
+ font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
6115
+ color: var(--amplify-components-fileuploader-dropzone-icon-color);
6116
+ }
6117
+ .amplify-fileuploader__dropzone__text {
6118
+ color: var(--amplify-components-fileuploader-dropzone-text-color);
6119
+ font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
6120
+ font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
6121
+ }
6122
+ .amplify-fileuploader__file__list {
6123
+ display: flex;
6124
+ flex-direction: var(--amplify-components-fileuploader-filelist-flex-direction);
6125
+ gap: var(--amplify-components-fileuploader-filelist-gap);
6126
+ }
6127
+ .amplify-fileuploader__file {
6128
+ position: relative;
6129
+ border-width: var(--amplify-components-fileuploader-file-border-width);
6130
+ border-style: var(--amplify-components-fileuploader-file-border-style);
6131
+ border-color: var(--amplify-components-fileuploader-file-border-color);
6132
+ border-radius: var(--amplify-components-fileuploader-file-border-radius);
6133
+ display: flex;
6134
+ flex-direction: column;
6135
+ padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
6136
+ padding-block: var(--amplify-components-fileuploader-file-padding-block);
6137
+ align-items: var(--amplify-components-fileuploader-file-align-items);
6138
+ }
6139
+ .amplify-fileuploader__file__wrapper {
6140
+ width: 100%;
6141
+ display: flex;
6142
+ flex-direction: row;
6143
+ align-items: center;
6144
+ gap: var(--amplify-components-fileuploader-file-gap);
6145
+ }
6146
+ .amplify-fileuploader__file__name {
6147
+ text-overflow: ellipsis;
6148
+ overflow: hidden;
6149
+ font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
6150
+ font-size: var(--amplify-components-fileuploader-file-name-font-size);
6151
+ color: var(--amplify-components-fileuploader-file-name-color);
6152
+ }
6153
+ .amplify-fileuploader__file__size {
6154
+ font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
6155
+ font-size: var(--amplify-components-fileuploader-file-size-font-size);
6156
+ color: var(--amplify-components-fileuploader-file-size-color);
6157
+ }
6158
+ .amplify-fileuploader__file__main {
6159
+ flex: 1;
6160
+ white-space: nowrap;
6161
+ overflow: hidden;
6162
+ }
6163
+ .amplify-fileuploader__file__image {
6164
+ position: relative;
6165
+ display: flex;
6166
+ align-items: center;
6167
+ justify-content: center;
6168
+ width: var(--amplify-components-fileuploader-file-image-width);
6169
+ height: var(--amplify-components-fileuploader-file-image-height);
6170
+ background-color: var(--amplify-components-fileuploader-file-image-background-color);
6171
+ border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
6172
+ color: var(--amplify-components-fileuploader-file-image-color);
6173
+ }
6174
+ .amplify-fileuploader__file__image img {
6175
+ max-height: 100%;
6176
+ }
6177
+ .amplify-fileuploader__file__status--error {
6178
+ color: var(--amplify-colors-font-error);
6179
+ font-size: var(--amplify-components-fileuploader-file-size-font-size);
6180
+ }
6181
+ .amplify-fileuploader__file__status--success {
6182
+ color: var(--amplify-colors-font-success);
6183
+ }
6184
+ .amplify-fileuploader__loader {
6185
+ stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
6186
+ stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
6187
+ stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
6188
+ height: var(--amplify-components-fileuploader-loader-stroke-width);
6189
+ --amplify-components-loader-linear-stroke-filled: var(
6190
+ --amplify-components-fileuploader-loader-stroke-filled
6191
+ );
6192
+ overflow: hidden;
6193
+ position: absolute;
6194
+ bottom: 0;
6195
+ left: 0;
6196
+ width: 100%;
6197
+ }
6198
+ .amplify-fileuploader__previewer {
6199
+ display: flex;
6200
+ flex-direction: column;
6201
+ max-width: var(--amplify-components-fileuploader-previewer-max-width);
6202
+ max-height: var(--amplify-components-fileuploader-previewer-max-height);
6203
+ overflow: auto;
6204
+ gap: var(--amplify-components-fileuploader-previewer-body-gap);
6205
+ padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
6206
+ padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
6207
+ background-color: var(--amplify-components-fileuploader-previewer-background-color);
6208
+ border-width: var(--amplify-components-fileuploader-previewer-border-width);
6209
+ border-style: var(--amplify-components-fileuploader-previewer-border-style);
6210
+ border-color: var(--amplify-components-fileuploader-previewer-border-color);
6211
+ border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
6212
+ }
6213
+ .amplify-fileuploader__previewer__text {
6214
+ font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
6215
+ font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
6216
+ color: var(--amplify-components-fileuploader-previewer-text-color);
6217
+ }
6218
+ .amplify-fileuploader__previewer__footer {
6219
+ display: flex;
6220
+ flex-direction: row;
6221
+ justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
6222
+ }
6223
+ .amplify-fileuploader__previewer__actions {
6224
+ display: flex;
6225
+ flex-direction: row;
6226
+ gap: var(--amplify-space-small);
6227
+ }
6228
+
6009
6229
  .amplify-inappmessaging-backdrop {
6010
6230
  background-color: var(--amplify-colors-overlay-50);
6011
6231
  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;
@@ -3459,6 +3520,7 @@ strong.amplify-text {
3459
3520
  --avatar-border-color: var(--amplify-components-avatar-border-color);
3460
3521
  --avatar-size: var(--amplify-components-avatar-width);
3461
3522
  --amplify-components-icon-height: 100%;
3523
+ position: relative;
3462
3524
  display: inline-flex;
3463
3525
  align-items: center;
3464
3526
  justify-content: center;
@@ -3509,6 +3571,9 @@ strong.amplify-text {
3509
3571
  --avatar-filled-color: var(
3510
3572
  --amplify-components-avatar-warning-background-color
3511
3573
  );
3574
+ --amplify-components-loader-stroke-filled: var(
3575
+ --amplify-components-avatar-warning-color
3576
+ );
3512
3577
  }
3513
3578
  .amplify-avatar--error {
3514
3579
  --avatar-border-color: var(--amplify-components-avatar-error-border-color);
@@ -3522,6 +3587,9 @@ strong.amplify-text {
3522
3587
  --avatar-filled-color: var(
3523
3588
  --amplify-components-avatar-error-background-color
3524
3589
  );
3590
+ --amplify-components-loader-stroke-filled: var(
3591
+ --amplify-components-avatar-error-color
3592
+ );
3525
3593
  }
3526
3594
  .amplify-avatar--info {
3527
3595
  --avatar-border-color: var(--amplify-components-avatar-info-border-color);
@@ -3535,6 +3603,9 @@ strong.amplify-text {
3535
3603
  --avatar-filled-color: var(
3536
3604
  --amplify-components-avatar-info-background-color
3537
3605
  );
3606
+ --amplify-components-loader-stroke-filled: var(
3607
+ --amplify-components-avatar-info-color
3608
+ );
3538
3609
  }
3539
3610
  .amplify-avatar--success {
3540
3611
  --avatar-border-color: var(
@@ -3550,6 +3621,9 @@ strong.amplify-text {
3550
3621
  --avatar-filled-color: var(
3551
3622
  --amplify-components-avatar-success-background-color
3552
3623
  );
3624
+ --amplify-components-loader-stroke-filled: var(
3625
+ --amplify-components-avatar-success-color
3626
+ );
3553
3627
  }
3554
3628
  .amplify-avatar__icon {
3555
3629
  display: flex;
@@ -3562,6 +3636,13 @@ strong.amplify-text {
3562
3636
  object-fit: cover;
3563
3637
  display: block;
3564
3638
  }
3639
+ .amplify-avatar__loader {
3640
+ position: absolute;
3641
+ inset: 0;
3642
+ width: 100%;
3643
+ height: 100%;
3644
+ stroke: transparent;
3645
+ }
3565
3646
 
3566
3647
  .amplify-breadcrumbs__list {
3567
3648
  display: flex;
@@ -6007,6 +6088,145 @@ html[dir=rtl] .amplify-field-group__inner-start {
6007
6088
  }
6008
6089
  }
6009
6090
 
6091
+ .amplify-fileuploader__dropzone {
6092
+ background-color: var(--amplify-components-fileuploader-dropzone-background-color);
6093
+ border-color: var(--amplify-components-fileuploader-dropzone-border-color);
6094
+ border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
6095
+ border-style: var(--amplify-components-fileuploader-dropzone-border-style);
6096
+ border-width: var(--amplify-components-fileuploader-dropzone-border-width);
6097
+ text-align: var(--amplify-components-fileuploader-dropzone-text-align);
6098
+ padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
6099
+ padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
6100
+ display: flex;
6101
+ flex-direction: column;
6102
+ align-items: center;
6103
+ gap: var(--amplify-components-fileuploader-dropzone-gap);
6104
+ }
6105
+ .amplify-fileuploader__dropzone--small {
6106
+ flex-direction: row;
6107
+ justify-content: center;
6108
+ }
6109
+ .amplify-fileuploader__dropzone--active {
6110
+ border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
6111
+ border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
6112
+ background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
6113
+ }
6114
+ .amplify-fileuploader__dropzone__icon {
6115
+ font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
6116
+ color: var(--amplify-components-fileuploader-dropzone-icon-color);
6117
+ }
6118
+ .amplify-fileuploader__dropzone__text {
6119
+ color: var(--amplify-components-fileuploader-dropzone-text-color);
6120
+ font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
6121
+ font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
6122
+ }
6123
+ .amplify-fileuploader__file__list {
6124
+ display: flex;
6125
+ flex-direction: var(--amplify-components-fileuploader-filelist-flex-direction);
6126
+ gap: var(--amplify-components-fileuploader-filelist-gap);
6127
+ }
6128
+ .amplify-fileuploader__file {
6129
+ position: relative;
6130
+ border-width: var(--amplify-components-fileuploader-file-border-width);
6131
+ border-style: var(--amplify-components-fileuploader-file-border-style);
6132
+ border-color: var(--amplify-components-fileuploader-file-border-color);
6133
+ border-radius: var(--amplify-components-fileuploader-file-border-radius);
6134
+ display: flex;
6135
+ flex-direction: column;
6136
+ padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
6137
+ padding-block: var(--amplify-components-fileuploader-file-padding-block);
6138
+ align-items: var(--amplify-components-fileuploader-file-align-items);
6139
+ }
6140
+ .amplify-fileuploader__file__wrapper {
6141
+ width: 100%;
6142
+ display: flex;
6143
+ flex-direction: row;
6144
+ align-items: center;
6145
+ gap: var(--amplify-components-fileuploader-file-gap);
6146
+ }
6147
+ .amplify-fileuploader__file__name {
6148
+ text-overflow: ellipsis;
6149
+ overflow: hidden;
6150
+ font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
6151
+ font-size: var(--amplify-components-fileuploader-file-name-font-size);
6152
+ color: var(--amplify-components-fileuploader-file-name-color);
6153
+ }
6154
+ .amplify-fileuploader__file__size {
6155
+ font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
6156
+ font-size: var(--amplify-components-fileuploader-file-size-font-size);
6157
+ color: var(--amplify-components-fileuploader-file-size-color);
6158
+ }
6159
+ .amplify-fileuploader__file__main {
6160
+ flex: 1;
6161
+ white-space: nowrap;
6162
+ overflow: hidden;
6163
+ }
6164
+ .amplify-fileuploader__file__image {
6165
+ position: relative;
6166
+ display: flex;
6167
+ align-items: center;
6168
+ justify-content: center;
6169
+ width: var(--amplify-components-fileuploader-file-image-width);
6170
+ height: var(--amplify-components-fileuploader-file-image-height);
6171
+ background-color: var(--amplify-components-fileuploader-file-image-background-color);
6172
+ border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
6173
+ color: var(--amplify-components-fileuploader-file-image-color);
6174
+ }
6175
+ .amplify-fileuploader__file__image img {
6176
+ max-height: 100%;
6177
+ }
6178
+ .amplify-fileuploader__file__status--error {
6179
+ color: var(--amplify-colors-font-error);
6180
+ font-size: var(--amplify-components-fileuploader-file-size-font-size);
6181
+ }
6182
+ .amplify-fileuploader__file__status--success {
6183
+ color: var(--amplify-colors-font-success);
6184
+ }
6185
+ .amplify-fileuploader__loader {
6186
+ stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
6187
+ stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
6188
+ stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
6189
+ height: var(--amplify-components-fileuploader-loader-stroke-width);
6190
+ --amplify-components-loader-linear-stroke-filled: var(
6191
+ --amplify-components-fileuploader-loader-stroke-filled
6192
+ );
6193
+ overflow: hidden;
6194
+ position: absolute;
6195
+ bottom: 0;
6196
+ left: 0;
6197
+ width: 100%;
6198
+ }
6199
+ .amplify-fileuploader__previewer {
6200
+ display: flex;
6201
+ flex-direction: column;
6202
+ max-width: var(--amplify-components-fileuploader-previewer-max-width);
6203
+ max-height: var(--amplify-components-fileuploader-previewer-max-height);
6204
+ overflow: auto;
6205
+ gap: var(--amplify-components-fileuploader-previewer-body-gap);
6206
+ padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
6207
+ padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
6208
+ background-color: var(--amplify-components-fileuploader-previewer-background-color);
6209
+ border-width: var(--amplify-components-fileuploader-previewer-border-width);
6210
+ border-style: var(--amplify-components-fileuploader-previewer-border-style);
6211
+ border-color: var(--amplify-components-fileuploader-previewer-border-color);
6212
+ border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
6213
+ }
6214
+ .amplify-fileuploader__previewer__text {
6215
+ font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
6216
+ font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
6217
+ color: var(--amplify-components-fileuploader-previewer-text-color);
6218
+ }
6219
+ .amplify-fileuploader__previewer__footer {
6220
+ display: flex;
6221
+ flex-direction: row;
6222
+ justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
6223
+ }
6224
+ .amplify-fileuploader__previewer__actions {
6225
+ display: flex;
6226
+ flex-direction: row;
6227
+ gap: var(--amplify-space-small);
6228
+ }
6229
+
6010
6230
  .amplify-inappmessaging-backdrop {
6011
6231
  background-color: var(--amplify-colors-overlay-50);
6012
6232
  inset: 0;
package/dist/types/primitives/Avatar/types.d.ts CHANGED
@@ -31,6 +31,11 @@ export interface BaseAvatarProps extends BaseViewProps {
31
31
  * The size property will affect the size of the avatar.
32
32
  */
33
33
  size?: AvatarSizes;
34
+ /**
35
+ * @description
36
+ * The isLoading property will display a loader around the avatar
37
+ */
38
+ isLoading?: boolean;
34
39
  }
35
40
  export type AvatarProps<Element extends ElementType = 'span'> = PrimitiveProps<BaseAvatarProps, Element>;
36
41
  export {};
package/dist/types/version.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const VERSION = "6.3.0";
1
+ export declare const VERSION = "6.4.0";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui-react",
3
- "version": "6.3.0",
3
+ "version": "6.4.0",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {
@@ -55,8 +55,8 @@
55
55
  "typecheck": "tsc --noEmit"
56
56
  },
57
57
  "dependencies": {
58
- "@aws-amplify/ui": "6.4.0",
59
- "@aws-amplify/ui-react-core": "3.0.21",
58
+ "@aws-amplify/ui": "6.5.0",
59
+ "@aws-amplify/ui-react-core": "3.0.23",
60
60
  "@radix-ui/react-direction": "1.0.0",
61
61
  "@radix-ui/react-dropdown-menu": "1.0.0",
62
62
  "@radix-ui/react-slider": "1.0.0",
@@ -89,13 +89,13 @@
89
89
  "name": "Authenticator",
90
90
  "path": "dist/esm/index.mjs",
91
91
  "import": "{ Authenticator }",
92
- "limit": "77 kB"
92
+ "limit": "65 kB"
93
93
  },
94
94
  {
95
95
  "name": "AccountSettings",
96
96
  "path": "dist/esm/index.mjs",
97
97
  "import": "{ AccountSettings }",
98
- "limit": "30 kB"
98
+ "limit": "25 kB"
99
99
  }
100
100
  ]
101
101
  }