@aws-amplify/ui-react-notifications 0.0.0-studio-41bd6b8-20230725225637 → 0.0.0-studio-console-80bb2e2-20230921222703

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 (38) hide show
  1. package/dist/esm/components/InAppMessaging/Backdrop/Backdrop.mjs +1 -0
  2. package/dist/esm/components/InAppMessaging/Backdrop/withBackdrop.mjs +1 -0
  3. package/dist/esm/components/InAppMessaging/BannerMessage/BannerMessage.mjs +1 -0
  4. package/dist/esm/components/InAppMessaging/CloseIconButton/CloseIconButton.mjs +1 -0
  5. package/dist/esm/components/InAppMessaging/FullScreenMessage/FullScreenMessage.mjs +1 -0
  6. package/dist/esm/components/InAppMessaging/InAppMessageDisplay/InAppMessageDisplay.mjs +1 -0
  7. package/dist/esm/components/InAppMessaging/InAppMessageDisplay/handleMessageLinkAction.mjs +1 -0
  8. package/dist/esm/components/InAppMessaging/MessageLayout/MessageLayout.mjs +1 -0
  9. package/dist/esm/components/InAppMessaging/MessageLayout/utils.mjs +1 -0
  10. package/dist/esm/components/InAppMessaging/ModalMessage/ModalMessage.mjs +1 -0
  11. package/dist/esm/components/InAppMessaging/hooks/useMessageImage/useMessageImage.mjs +1 -0
  12. package/dist/esm/components/InAppMessaging/hooks/useMessageProps/useMessageProps.mjs +1 -0
  13. package/dist/esm/components/InAppMessaging/hooks/useMessageProps/utils.mjs +1 -0
  14. package/dist/esm/components/InAppMessaging/withInAppMessaging/withInAppMessaging.mjs +1 -0
  15. package/dist/esm/{index.js → index.mjs} +1 -1
  16. package/dist/index.js +1 -1
  17. package/dist/styles.css +1603 -616
  18. package/package.json +9 -10
  19. package/dist/esm/components/InAppMessaging/Backdrop/Backdrop.js +0 -1
  20. package/dist/esm/components/InAppMessaging/Backdrop/withBackdrop.js +0 -1
  21. package/dist/esm/components/InAppMessaging/BannerMessage/BannerMessage.js +0 -1
  22. package/dist/esm/components/InAppMessaging/CloseIconButton/CloseIconButton.js +0 -1
  23. package/dist/esm/components/InAppMessaging/FullScreenMessage/FullScreenMessage.js +0 -1
  24. package/dist/esm/components/InAppMessaging/InAppMessageDisplay/InAppMessageDisplay.js +0 -1
  25. package/dist/esm/components/InAppMessaging/InAppMessageDisplay/handleMessageLinkAction.js +0 -1
  26. package/dist/esm/components/InAppMessaging/MessageLayout/MessageLayout.js +0 -1
  27. package/dist/esm/components/InAppMessaging/MessageLayout/utils.js +0 -1
  28. package/dist/esm/components/InAppMessaging/ModalMessage/ModalMessage.js +0 -1
  29. package/dist/esm/components/InAppMessaging/hooks/useMessageImage/useMessageImage.js +0 -1
  30. package/dist/esm/components/InAppMessaging/hooks/useMessageProps/useMessageProps.js +0 -1
  31. package/dist/esm/components/InAppMessaging/hooks/useMessageProps/utils.js +0 -1
  32. package/dist/esm/components/InAppMessaging/withInAppMessaging/withInAppMessaging.js +0 -1
  33. package/dist/esm/node_modules/tslib/tslib.es6.js +0 -1
  34. /package/dist/esm/components/InAppMessaging/BannerMessage/{constants.js → constants.mjs} +0 -0
  35. /package/dist/esm/components/InAppMessaging/FullScreenMessage/{constants.js → constants.mjs} +0 -0
  36. /package/dist/esm/components/InAppMessaging/MessageLayout/{constants.js → constants.mjs} +0 -0
  37. /package/dist/esm/components/InAppMessaging/ModalMessage/{constants.js → constants.mjs} +0 -0
  38. /package/dist/esm/components/InAppMessaging/hooks/useMessageImage/{types.js → types.mjs} +0 -0
package/dist/styles.css CHANGED
@@ -83,6 +83,28 @@
83
83
  --amplify-components-badge-large-font-size: var(--amplify-font-sizes-medium);
84
84
  --amplify-components-badge-large-padding-vertical: var(--amplify-space-small);
85
85
  --amplify-components-badge-large-padding-horizontal: var(--amplify-space-medium);
86
+ --amplify-components-breadcrumbs-flex-direction: row;
87
+ --amplify-components-breadcrumbs-flex-wrap: wrap;
88
+ --amplify-components-breadcrumbs-gap: 0;
89
+ --amplify-components-breadcrumbs-color: var(--amplify-colors-font-tertiary);
90
+ --amplify-components-breadcrumbs-item-flex-direction: row;
91
+ --amplify-components-breadcrumbs-item-color: inherit;
92
+ --amplify-components-breadcrumbs-item-font-size: inherit;
93
+ --amplify-components-breadcrumbs-item-align-items: center;
94
+ --amplify-components-breadcrumbs-item-line-height: 1;
95
+ --amplify-components-breadcrumbs-separator-color: inherit;
96
+ --amplify-components-breadcrumbs-separator-font-size: inherit;
97
+ --amplify-components-breadcrumbs-separator-padding-inline: var(--amplify-space-xxs);
98
+ --amplify-components-breadcrumbs-link-color: var(--amplify-components-link-color);
99
+ --amplify-components-breadcrumbs-link-font-size: inherit;
100
+ --amplify-components-breadcrumbs-link-font-weight: normal;
101
+ --amplify-components-breadcrumbs-link-text-decoration: none;
102
+ --amplify-components-breadcrumbs-link-padding-inline: var(--amplify-space-xs);
103
+ --amplify-components-breadcrumbs-link-padding-block: var(--amplify-space-xxs);
104
+ --amplify-components-breadcrumbs-link-current-color: inherit;
105
+ --amplify-components-breadcrumbs-link-current-font-size: inherit;
106
+ --amplify-components-breadcrumbs-link-current-font-weight: normal;
107
+ --amplify-components-breadcrumbs-link-current-text-decoration: none;
86
108
  --amplify-components-button-font-weight: var(--amplify-font-weights-bold);
87
109
  --amplify-components-button-transition-duration: var(--amplify-components-fieldcontrol-transition-duration);
88
110
  --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size);
@@ -91,6 +113,7 @@
91
113
  --amplify-components-button-padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
92
114
  --amplify-components-button-padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
93
115
  --amplify-components-button-padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
116
+ --amplify-components-button-background-color: transparent;
94
117
  --amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color);
95
118
  --amplify-components-button-border-width: var(--amplify-components-fieldcontrol-border-width);
96
119
  --amplify-components-button-border-style: var(--amplify-components-fieldcontrol-border-style);
@@ -112,6 +135,71 @@
112
135
  --amplify-components-button-disabled-color: var(--amplify-colors-font-disabled);
113
136
  --amplify-components-button-disabled-background-color: transparent;
114
137
  --amplify-components-button-disabled-border-color: var(--amplify-colors-border-tertiary);
138
+ --amplify-components-button-outlined-info-border-color: var(--amplify-colors-blue-60);
139
+ --amplify-components-button-outlined-info-background-color: transparent;
140
+ --amplify-components-button-outlined-info-color: var(--amplify-colors-blue-100);
141
+ --amplify-components-button-outlined-info-hover-border-color: var(--amplify-colors-blue-60);
142
+ --amplify-components-button-outlined-info-hover-background-color: var(--amplify-colors-blue-10);
143
+ --amplify-components-button-outlined-info-hover-color: var(--amplify-colors-blue-100);
144
+ --amplify-components-button-outlined-info-focus-border-color: var(--amplify-colors-blue-100);
145
+ --amplify-components-button-outlined-info-focus-background-color: var(--amplify-colors-blue-10);
146
+ --amplify-components-button-outlined-info-focus-color: var(--amplify-colors-blue-100);
147
+ --amplify-components-button-outlined-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
148
+ --amplify-components-button-outlined-info-active-border-color: var(--amplify-colors-blue-100);
149
+ --amplify-components-button-outlined-info-active-background-color: var(--amplify-colors-blue-20);
150
+ --amplify-components-button-outlined-info-active-color: var(--amplify-colors-blue-100);
151
+ --amplify-components-button-outlined-warning-border-color: var(--amplify-colors-orange-60);
152
+ --amplify-components-button-outlined-warning-background-color: transparent;
153
+ --amplify-components-button-outlined-warning-color: var(--amplify-colors-orange-100);
154
+ --amplify-components-button-outlined-warning-hover-border-color: var(--amplify-colors-orange-60);
155
+ --amplify-components-button-outlined-warning-hover-background-color: var(--amplify-colors-orange-10);
156
+ --amplify-components-button-outlined-warning-hover-color: var(--amplify-colors-orange-100);
157
+ --amplify-components-button-outlined-warning-focus-border-color: var(--amplify-colors-orange-100);
158
+ --amplify-components-button-outlined-warning-focus-background-color: var(--amplify-colors-orange-10);
159
+ --amplify-components-button-outlined-warning-focus-color: var(--amplify-colors-orange-100);
160
+ --amplify-components-button-outlined-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
161
+ --amplify-components-button-outlined-warning-active-border-color: var(--amplify-colors-orange-100);
162
+ --amplify-components-button-outlined-warning-active-background-color: var(--amplify-colors-orange-20);
163
+ --amplify-components-button-outlined-warning-active-color: var(--amplify-colors-orange-100);
164
+ --amplify-components-button-outlined-success-border-color: var(--amplify-colors-green-60);
165
+ --amplify-components-button-outlined-success-background-color: transparent;
166
+ --amplify-components-button-outlined-success-color: var(--amplify-colors-green-100);
167
+ --amplify-components-button-outlined-success-hover-border-color: var(--amplify-colors-green-60);
168
+ --amplify-components-button-outlined-success-hover-background-color: var(--amplify-colors-green-10);
169
+ --amplify-components-button-outlined-success-hover-color: var(--amplify-colors-green-100);
170
+ --amplify-components-button-outlined-success-focus-border-color: var(--amplify-colors-green-100);
171
+ --amplify-components-button-outlined-success-focus-background-color: var(--amplify-colors-green-10);
172
+ --amplify-components-button-outlined-success-focus-color: var(--amplify-colors-green-100);
173
+ --amplify-components-button-outlined-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
174
+ --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100);
175
+ --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20);
176
+ --amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100);
177
+ --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-60);
178
+ --amplify-components-button-outlined-error-background-color: transparent;
179
+ --amplify-components-button-outlined-error-color: var(--amplify-colors-red-100);
180
+ --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-60);
181
+ --amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10);
182
+ --amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100);
183
+ --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100);
184
+ --amplify-components-button-outlined-error-focus-background-color: var(--amplify-colors-red-10);
185
+ --amplify-components-button-outlined-error-focus-color: var(--amplify-colors-red-100);
186
+ --amplify-components-button-outlined-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
187
+ --amplify-components-button-outlined-error-active-border-color: var(--amplify-colors-red-100);
188
+ --amplify-components-button-outlined-error-active-background-color: var(--amplify-colors-red-20);
189
+ --amplify-components-button-outlined-error-active-color: var(--amplify-colors-red-100);
190
+ --amplify-components-button-outlined-overlay-border-color: var(--amplify-colors-overlay-60);
191
+ --amplify-components-button-outlined-overlay-background-color: transparent;
192
+ --amplify-components-button-outlined-overlay-color: var(--amplify-colors-font-primary);
193
+ --amplify-components-button-outlined-overlay-hover-border-color: var(--amplify-colors-overlay-60);
194
+ --amplify-components-button-outlined-overlay-hover-background-color: var(--amplify-colors-overlay-5);
195
+ --amplify-components-button-outlined-overlay-hover-color: var(--amplify-colors-neutral-90);
196
+ --amplify-components-button-outlined-overlay-focus-border-color: var(--amplify-colors-overlay-90);
197
+ --amplify-components-button-outlined-overlay-focus-background-color: var(--amplify-colors-overlay-5);
198
+ --amplify-components-button-outlined-overlay-focus-color: var(--amplify-colors-neutral-90);
199
+ --amplify-components-button-outlined-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
200
+ --amplify-components-button-outlined-overlay-active-border-color: var(--amplify-colors-overlay-90);
201
+ --amplify-components-button-outlined-overlay-active-background-color: var(--amplify-colors-overlay-10);
202
+ --amplify-components-button-outlined-overlay-active-color: var(--amplify-colors-neutral-100);
115
203
  --amplify-components-button-primary-border-color: transparent;
116
204
  --amplify-components-button-primary-border-width: var(--amplify-border-widths-small);
117
205
  --amplify-components-button-primary-border-style: solid;
@@ -133,6 +221,71 @@
133
221
  --amplify-components-button-primary-active-border-color: transparent;
134
222
  --amplify-components-button-primary-active-background-color: var(--amplify-colors-brand-primary-100);
135
223
  --amplify-components-button-primary-active-color: var(--amplify-colors-font-inverse);
224
+ --amplify-components-button-primary-info-border-color: transparent;
225
+ --amplify-components-button-primary-info-background-color: var(--amplify-colors-blue-80);
226
+ --amplify-components-button-primary-info-color: var(--amplify-colors-font-inverse);
227
+ --amplify-components-button-primary-info-hover-border-color: transparent;
228
+ --amplify-components-button-primary-info-hover-background-color: var(--amplify-colors-blue-90);
229
+ --amplify-components-button-primary-info-hover-color: var(--amplify-colors-font-inverse);
230
+ --amplify-components-button-primary-info-focus-border-color: transparent;
231
+ --amplify-components-button-primary-info-focus-background-color: var(--amplify-colors-blue-90);
232
+ --amplify-components-button-primary-info-focus-color: var(--amplify-colors-font-inverse);
233
+ --amplify-components-button-primary-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
234
+ --amplify-components-button-primary-info-active-border-color: transparent;
235
+ --amplify-components-button-primary-info-active-background-color: var(--amplify-colors-blue-100);
236
+ --amplify-components-button-primary-info-active-color: var(--amplify-colors-font-inverse);
237
+ --amplify-components-button-primary-warning-border-color: transparent;
238
+ --amplify-components-button-primary-warning-background-color: var(--amplify-colors-orange-80);
239
+ --amplify-components-button-primary-warning-color: var(--amplify-colors-font-inverse);
240
+ --amplify-components-button-primary-warning-hover-border-color: transparent;
241
+ --amplify-components-button-primary-warning-hover-background-color: var(--amplify-colors-orange-90);
242
+ --amplify-components-button-primary-warning-hover-color: var(--amplify-colors-font-inverse);
243
+ --amplify-components-button-primary-warning-focus-border-color: transparent;
244
+ --amplify-components-button-primary-warning-focus-background-color: var(--amplify-colors-orange-90);
245
+ --amplify-components-button-primary-warning-focus-color: var(--amplify-colors-font-inverse);
246
+ --amplify-components-button-primary-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
247
+ --amplify-components-button-primary-warning-active-border-color: transparent;
248
+ --amplify-components-button-primary-warning-active-background-color: var(--amplify-colors-orange-100);
249
+ --amplify-components-button-primary-warning-active-color: var(--amplify-colors-font-inverse);
250
+ --amplify-components-button-primary-error-border-color: transparent;
251
+ --amplify-components-button-primary-error-background-color: var(--amplify-colors-red-80);
252
+ --amplify-components-button-primary-error-color: var(--amplify-colors-font-inverse);
253
+ --amplify-components-button-primary-error-hover-border-color: transparent;
254
+ --amplify-components-button-primary-error-hover-background-color: var(--amplify-colors-red-90);
255
+ --amplify-components-button-primary-error-hover-color: var(--amplify-colors-font-inverse);
256
+ --amplify-components-button-primary-error-focus-border-color: transparent;
257
+ --amplify-components-button-primary-error-focus-background-color: var(--amplify-colors-red-90);
258
+ --amplify-components-button-primary-error-focus-color: var(--amplify-colors-font-inverse);
259
+ --amplify-components-button-primary-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
260
+ --amplify-components-button-primary-error-active-border-color: transparent;
261
+ --amplify-components-button-primary-error-active-background-color: var(--amplify-colors-red-100);
262
+ --amplify-components-button-primary-error-active-color: var(--amplify-colors-font-inverse);
263
+ --amplify-components-button-primary-success-border-color: transparent;
264
+ --amplify-components-button-primary-success-background-color: var(--amplify-colors-green-80);
265
+ --amplify-components-button-primary-success-color: var(--amplify-colors-font-inverse);
266
+ --amplify-components-button-primary-success-hover-border-color: transparent;
267
+ --amplify-components-button-primary-success-hover-background-color: var(--amplify-colors-green-90);
268
+ --amplify-components-button-primary-success-hover-color: var(--amplify-colors-font-inverse);
269
+ --amplify-components-button-primary-success-focus-border-color: transparent;
270
+ --amplify-components-button-primary-success-focus-background-color: var(--amplify-colors-green-90);
271
+ --amplify-components-button-primary-success-focus-color: var(--amplify-colors-font-inverse);
272
+ --amplify-components-button-primary-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
273
+ --amplify-components-button-primary-success-active-border-color: transparent;
274
+ --amplify-components-button-primary-success-active-background-color: var(--amplify-colors-green-100);
275
+ --amplify-components-button-primary-success-active-color: var(--amplify-colors-font-inverse);
276
+ --amplify-components-button-primary-overlay-border-color: transparent;
277
+ --amplify-components-button-primary-overlay-background-color: var(--amplify-colors-overlay-70);
278
+ --amplify-components-button-primary-overlay-color: var(--amplify-colors-font-inverse);
279
+ --amplify-components-button-primary-overlay-hover-border-color: transparent;
280
+ --amplify-components-button-primary-overlay-hover-background-color: var(--amplify-colors-overlay-90);
281
+ --amplify-components-button-primary-overlay-hover-color: var(--amplify-colors-font-inverse);
282
+ --amplify-components-button-primary-overlay-focus-border-color: transparent;
283
+ --amplify-components-button-primary-overlay-focus-background-color: var(--amplify-colors-overlay-90);
284
+ --amplify-components-button-primary-overlay-focus-color: var(--amplify-colors-font-inverse);
285
+ --amplify-components-button-primary-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
286
+ --amplify-components-button-primary-overlay-active-border-color: transparent;
287
+ --amplify-components-button-primary-overlay-active-background-color: var(--amplify-colors-overlay-90);
288
+ --amplify-components-button-primary-overlay-active-color: var(--amplify-colors-font-inverse);
136
289
  --amplify-components-button-menu-border-width: var(--amplify-space-zero);
137
290
  --amplify-components-button-menu-background-color: transparent;
138
291
  --amplify-components-button-menu-justify-content: start;
@@ -145,7 +298,7 @@
145
298
  --amplify-components-button-menu-disabled-color: var(--amplify-colors-font-disabled);
146
299
  --amplify-components-button-link-background-color: transparent;
147
300
  --amplify-components-button-link-border-color: transparent;
148
- --amplify-components-button-link-border-width: var(--amplify-space-zero);
301
+ --amplify-components-button-link-border-width: var(--amplify-border-widths-small);
149
302
  --amplify-components-button-link-color: var(--amplify-colors-font-interactive);
150
303
  --amplify-components-button-link-hover-border-color: transparent;
151
304
  --amplify-components-button-link-hover-background-color: var(--amplify-colors-brand-primary-10);
@@ -163,6 +316,71 @@
163
316
  --amplify-components-button-link-loading-border-color: transparent;
164
317
  --amplify-components-button-link-loading-background-color: transparent;
165
318
  --amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled);
319
+ --amplify-components-button-link-info-border-color: transparent;
320
+ --amplify-components-button-link-info-background-color: transparent;
321
+ --amplify-components-button-link-info-color: var(--amplify-colors-blue-100);
322
+ --amplify-components-button-link-info-hover-border-color: transparent;
323
+ --amplify-components-button-link-info-hover-background-color: var(--amplify-colors-blue-10);
324
+ --amplify-components-button-link-info-hover-color: var(--amplify-colors-blue-90);
325
+ --amplify-components-button-link-info-focus-border-color: transparent;
326
+ --amplify-components-button-link-info-focus-background-color: var(--amplify-colors-blue-10);
327
+ --amplify-components-button-link-info-focus-color: var(--amplify-colors-blue-100);
328
+ --amplify-components-button-link-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
329
+ --amplify-components-button-link-info-active-border-color: transparent;
330
+ --amplify-components-button-link-info-active-background-color: var(--amplify-colors-blue-20);
331
+ --amplify-components-button-link-info-active-color: var(--amplify-colors-blue-100);
332
+ --amplify-components-button-link-warning-border-color: transparent;
333
+ --amplify-components-button-link-warning-background-color: transparent;
334
+ --amplify-components-button-link-warning-color: var(--amplify-colors-orange-100);
335
+ --amplify-components-button-link-warning-hover-border-color: transparent;
336
+ --amplify-components-button-link-warning-hover-background-color: var(--amplify-colors-orange-10);
337
+ --amplify-components-button-link-warning-hover-color: var(--amplify-colors-orange-90);
338
+ --amplify-components-button-link-warning-focus-border-color: transparent;
339
+ --amplify-components-button-link-warning-focus-background-color: var(--amplify-colors-orange-10);
340
+ --amplify-components-button-link-warning-focus-color: var(--amplify-colors-orange-100);
341
+ --amplify-components-button-link-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
342
+ --amplify-components-button-link-warning-active-border-color: transparent;
343
+ --amplify-components-button-link-warning-active-background-color: var(--amplify-colors-orange-20);
344
+ --amplify-components-button-link-warning-active-color: var(--amplify-colors-orange-100);
345
+ --amplify-components-button-link-success-border-color: transparent;
346
+ --amplify-components-button-link-success-background-color: transparent;
347
+ --amplify-components-button-link-success-color: var(--amplify-colors-green-100);
348
+ --amplify-components-button-link-success-hover-border-color: transparent;
349
+ --amplify-components-button-link-success-hover-background-color: var(--amplify-colors-green-10);
350
+ --amplify-components-button-link-success-hover-color: var(--amplify-colors-green-90);
351
+ --amplify-components-button-link-success-focus-border-color: transparent;
352
+ --amplify-components-button-link-success-focus-background-color: var(--amplify-colors-green-10);
353
+ --amplify-components-button-link-success-focus-color: var(--amplify-colors-green-100);
354
+ --amplify-components-button-link-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
355
+ --amplify-components-button-link-success-active-border-color: transparent;
356
+ --amplify-components-button-link-success-active-background-color: var(--amplify-colors-green-20);
357
+ --amplify-components-button-link-success-active-color: var(--amplify-colors-green-100);
358
+ --amplify-components-button-link-error-border-color: transparent;
359
+ --amplify-components-button-link-error-background-color: transparent;
360
+ --amplify-components-button-link-error-color: var(--amplify-colors-red-100);
361
+ --amplify-components-button-link-error-hover-border-color: transparent;
362
+ --amplify-components-button-link-error-hover-background-color: var(--amplify-colors-red-10);
363
+ --amplify-components-button-link-error-hover-color: var(--amplify-colors-red-90);
364
+ --amplify-components-button-link-error-focus-border-color: transparent;
365
+ --amplify-components-button-link-error-focus-background-color: var(--amplify-colors-red-10);
366
+ --amplify-components-button-link-error-focus-color: var(--amplify-colors-red-100);
367
+ --amplify-components-button-link-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
368
+ --amplify-components-button-link-error-active-border-color: transparent;
369
+ --amplify-components-button-link-error-active-background-color: var(--amplify-colors-red-20);
370
+ --amplify-components-button-link-error-active-color: var(--amplify-colors-red-100);
371
+ --amplify-components-button-link-overlay-border-color: transparent;
372
+ --amplify-components-button-link-overlay-background-color: transparent;
373
+ --amplify-components-button-link-overlay-color: var(--amplify-colors-neutral-100);
374
+ --amplify-components-button-link-overlay-hover-border-color: transparent;
375
+ --amplify-components-button-link-overlay-hover-background-color: var(--amplify-colors-overlay-5);
376
+ --amplify-components-button-link-overlay-hover-color: var(--amplify-colors-overlay-80);
377
+ --amplify-components-button-link-overlay-focus-border-color: transparent;
378
+ --amplify-components-button-link-overlay-focus-background-color: var(--amplify-colors-overlay-5);
379
+ --amplify-components-button-link-overlay-focus-color: var(--amplify-colors-overlay-90);
380
+ --amplify-components-button-link-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
381
+ --amplify-components-button-link-overlay-active-border-color: transparent;
382
+ --amplify-components-button-link-overlay-active-background-color: var(--amplify-colors-overlay-10);
383
+ --amplify-components-button-link-overlay-active-color: var(--amplify-colors-overlay-90);
166
384
  --amplify-components-button-warning-background-color: transparent;
167
385
  --amplify-components-button-warning-border-color: var(--amplify-colors-red-60);
168
386
  --amplify-components-button-warning-border-width: var(--amplify-border-widths-small);
@@ -313,6 +531,40 @@
313
531
  --amplify-components-divider-small-border-width: var(--amplify-border-widths-small);
314
532
  --amplify-components-divider-large-border-width: var(--amplify-border-widths-large);
315
533
  --amplify-components-divider-opacity: var(--amplify-opacities-60);
534
+ --amplify-components-dropzone-background-color: var(--amplify-colors-background-primary);
535
+ --amplify-components-dropzone-border-radius: var(--amplify-radii-small);
536
+ --amplify-components-dropzone-border-color: var(--amplify-colors-border-primary);
537
+ --amplify-components-dropzone-border-style: dashed;
538
+ --amplify-components-dropzone-border-width: var(--amplify-border-widths-small);
539
+ --amplify-components-dropzone-color: var(--amplify-colors-font-primary);
540
+ --amplify-components-dropzone-gap: var(--amplify-space-small);
541
+ --amplify-components-dropzone-padding-block: var(--amplify-space-xl);
542
+ --amplify-components-dropzone-padding-inline: var(--amplify-space-large);
543
+ --amplify-components-dropzone-text-align: center;
544
+ --amplify-components-dropzone-active-background-color: var(--amplify-colors-brand-primary-10);
545
+ --amplify-components-dropzone-active-border-radius: var(--amplify-components-dropzone-border-radius);
546
+ --amplify-components-dropzone-active-border-color: var(--amplify-colors-border-pressed);
547
+ --amplify-components-dropzone-active-border-style: var(--amplify-components-dropzone-border-style);
548
+ --amplify-components-dropzone-active-border-width: var(--amplify-components-dropzone-border-width);
549
+ --amplify-components-dropzone-active-color: var(--amplify-colors-font-primary);
550
+ --amplify-components-dropzone-disabled-background-color: var(--amplify-colors-background-disabled);
551
+ --amplify-components-dropzone-disabled-border-radius: var(--amplify-components-dropzone-border-radius);
552
+ --amplify-components-dropzone-disabled-border-color: var(--amplify-colors-border-disabled);
553
+ --amplify-components-dropzone-disabled-border-style: var(--amplify-components-dropzone-border-style);
554
+ --amplify-components-dropzone-disabled-border-width: var(--amplify-components-dropzone-border-width);
555
+ --amplify-components-dropzone-disabled-color: var(--amplify-colors-font-disabled);
556
+ --amplify-components-dropzone-accepted-background-color: var(--amplify-colors-background-success);
557
+ --amplify-components-dropzone-accepted-border-radius: var(--amplify-components-dropzone-border-radius);
558
+ --amplify-components-dropzone-accepted-border-color: var(--amplify-colors-border-success);
559
+ --amplify-components-dropzone-accepted-border-style: var(--amplify-components-dropzone-border-style);
560
+ --amplify-components-dropzone-accepted-border-width: var(--amplify-components-dropzone-border-width);
561
+ --amplify-components-dropzone-accepted-color: var(--amplify-colors-font-success);
562
+ --amplify-components-dropzone-rejected-background-color: var(--amplify-colors-background-error);
563
+ --amplify-components-dropzone-rejected-border-radius: var(--amplify-components-dropzone-border-radius);
564
+ --amplify-components-dropzone-rejected-border-color: var(--amplify-colors-border-pressed);
565
+ --amplify-components-dropzone-rejected-border-style: var(--amplify-components-dropzone-border-style);
566
+ --amplify-components-dropzone-rejected-border-width: var(--amplify-components-dropzone-border-width);
567
+ --amplify-components-dropzone-rejected-color: var(--amplify-colors-font-error);
316
568
  --amplify-components-expander-display: block;
317
569
  --amplify-components-expander-background-color: var(--amplify-colors-background-primary);
318
570
  --amplify-components-expander-border-radius: var(--amplify-radii-medium);
@@ -407,70 +659,24 @@
407
659
  --amplify-components-fieldmessages-description-color: var(--amplify-colors-font-secondary);
408
660
  --amplify-components-fieldmessages-description-font-style: italic;
409
661
  --amplify-components-fieldmessages-description-font-size: var(--amplify-font-sizes-small);
410
- --amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary);
411
- --amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small);
412
- --amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary);
413
- --amplify-components-fileuploader-dropzone-border-style: dashed;
414
- --amplify-components-fileuploader-dropzone-border-width: var(--amplify-border-widths-small);
415
- --amplify-components-fileuploader-dropzone-gap: var(--amplify-space-small);
416
- --amplify-components-fileuploader-dropzone-padding-block: var(--amplify-space-xl);
417
- --amplify-components-fileuploader-dropzone-padding-inline: var(--amplify-space-large);
418
- --amplify-components-fileuploader-dropzone-text-align: center;
419
- --amplify-components-fileuploader-dropzone-active-background-color: var(--amplify-colors-brand-primary-10);
420
- --amplify-components-fileuploader-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
421
- --amplify-components-fileuploader-dropzone-active-border-color: var(--amplify-colors-border-pressed);
422
- --amplify-components-fileuploader-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
423
- --amplify-components-fileuploader-dropzone-active-border-width: var(--amplify-border-widths-medium);
424
- --amplify-components-fileuploader-dropzone-icon-color: var(--amplify-colors-border-primary);
425
- --amplify-components-fileuploader-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
426
- --amplify-components-fileuploader-dropzone-text-color: var(--amplify-colors-font-tertiary);
427
- --amplify-components-fileuploader-dropzone-text-font-size: var(--amplify-font-sizes-medium);
428
- --amplify-components-fileuploader-dropzone-text-font-weight: var(--amplify-font-weights-bold);
429
- --amplify-components-fileuploader-file-background-color: var(--amplify-colors-background-primary);
430
- --amplify-components-fileuploader-file-border-radius: var(--amplify-radii-small);
431
- --amplify-components-fileuploader-file-border-color: var(--amplify-colors-border-primary);
432
- --amplify-components-fileuploader-file-border-style: solid;
433
- --amplify-components-fileuploader-file-border-width: var(--amplify-border-widths-small);
434
- --amplify-components-fileuploader-file-padding-block: var(--amplify-space-xs);
435
- --amplify-components-fileuploader-file-padding-inline: var(--amplify-space-small);
436
- --amplify-components-fileuploader-file-gap: var(--amplify-space-small);
437
- --amplify-components-fileuploader-file-align-items: baseline;
438
- --amplify-components-fileuploader-file-name-font-size: var(--amplify-font-sizes-medium);
439
- --amplify-components-fileuploader-file-name-font-weight: var(--amplify-font-weights-bold);
440
- --amplify-components-fileuploader-file-name-color: var(--amplify-colors-font-primary);
441
- --amplify-components-fileuploader-file-size-font-size: var(--amplify-font-sizes-small);
442
- --amplify-components-fileuploader-file-size-font-weight: var(--amplify-font-weights-normal);
443
- --amplify-components-fileuploader-file-size-color: var(--amplify-colors-font-tertiary);
444
- --amplify-components-fileuploader-file-image-width: var(--amplify-space-xxl);
445
- --amplify-components-fileuploader-file-image-height: var(--amplify-space-xxl);
446
- --amplify-components-fileuploader-file-image-background-color: var(--amplify-colors-background-secondary);
447
- --amplify-components-fileuploader-file-image-color: var(--amplify-colors-font-tertiary);
448
- --amplify-components-fileuploader-file-image-border-radius: var(--amplify-radii-small);
449
- --amplify-components-fileuploader-loader-stroke-linecap: round;
450
- --amplify-components-fileuploader-loader-stroke-empty: var(--amplify-colors-border-secondary);
451
- --amplify-components-fileuploader-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
452
- --amplify-components-fileuploader-loader-stroke-width: var(--amplify-border-widths-large);
453
- --amplify-components-fileuploader-previewer-background-color: var(--amplify-colors-background-primary);
454
- --amplify-components-fileuploader-previewer-border-color: var(--amplify-colors-border-primary);
455
- --amplify-components-fileuploader-previewer-border-style: solid;
456
- --amplify-components-fileuploader-previewer-border-width: var(--amplify-border-widths-small);
457
- --amplify-components-fileuploader-previewer-border-radius: var(--amplify-radii-small);
458
- --amplify-components-fileuploader-previewer-padding-block: var(--amplify-space-zero);
459
- --amplify-components-fileuploader-previewer-padding-inline: var(--amplify-space-zero);
460
- --amplify-components-fileuploader-previewer-max-height: 40rem;
461
- --amplify-components-fileuploader-previewer-max-width: auto;
462
- --amplify-components-fileuploader-previewer-text-font-size: var(--amplify-font-sizes-medium);
463
- --amplify-components-fileuploader-previewer-text-font-weight: var(--amplify-font-weights-bold);
464
- --amplify-components-fileuploader-previewer-text-color: var(--amplify-colors-font-primary);
465
- --amplify-components-fileuploader-previewer-body-padding-block: var(--amplify-space-medium);
466
- --amplify-components-fileuploader-previewer-body-padding-inline: var(--amplify-space-medium);
467
- --amplify-components-fileuploader-previewer-body-gap: var(--amplify-space-small);
468
- --amplify-components-fileuploader-previewer-footer-border-color: var(--amplify-colors-border-secondary);
469
- --amplify-components-fileuploader-previewer-footer-border-style: solid;
470
- --amplify-components-fileuploader-previewer-footer-border-width: var(--amplify-border-widths-small);
471
- --amplify-components-fileuploader-previewer-footer-padding-block: var(--amplify-space-medium);
472
- --amplify-components-fileuploader-previewer-footer-padding-inline: var(--amplify-space-medium);
473
- --amplify-components-fileuploader-previewer-footer-justify-content: space-between;
662
+ --amplify-components-fieldset-background-color: transparent;
663
+ --amplify-components-fieldset-border-radius: var(--amplify-radii-xs);
664
+ --amplify-components-fieldset-flex-direction: column;
665
+ --amplify-components-fieldset-gap: var(--amplify-components-field-gap);
666
+ --amplify-components-fieldset-legend-color: var(--amplify-colors-font-primary);
667
+ --amplify-components-fieldset-legend-font-size: var(--amplify-components-field-font-size);
668
+ --amplify-components-fieldset-legend-font-weight: var(--amplify-font-weights-bold);
669
+ --amplify-components-fieldset-legend-line-height: var(--amplify-line-heights-medium);
670
+ --amplify-components-fieldset-legend-small-font-size: var(--amplify-components-field-small-font-size);
671
+ --amplify-components-fieldset-legend-large-font-size: var(--amplify-components-field-large-font-size);
672
+ --amplify-components-fieldset-outlined-padding: var(--amplify-space-medium);
673
+ --amplify-components-fieldset-outlined-border-color: var(--amplify-colors-neutral-40);
674
+ --amplify-components-fieldset-outlined-border-width: var(--amplify-border-widths-small);
675
+ --amplify-components-fieldset-outlined-border-style: solid;
676
+ --amplify-components-fieldset-outlined-small-padding: var(--amplify-space-small);
677
+ --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large);
678
+ --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap);
679
+ --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap);
474
680
  --amplify-components-flex-gap: var(--amplify-space-medium);
475
681
  --amplify-components-flex-justify-content: normal;
476
682
  --amplify-components-flex-align-items: stretch;
@@ -508,6 +714,10 @@
508
714
  --amplify-components-inappmessaging-dialog-width: 30vw;
509
715
  --amplify-components-inappmessaging-header-font-size: var(--amplify-font-sizes-medium);
510
716
  --amplify-components-inappmessaging-header-font-weight: var(--amplify-font-weights-extrabold);
717
+ --amplify-components-input-color: var(--amplify-components-fieldcontrol-color);
718
+ --amplify-components-input-border-color: var(--amplify-components-fieldcontrol-border-color);
719
+ --amplify-components-input-font-size: var(--amplify-components-fieldcontrol-font-size);
720
+ --amplify-components-input-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
511
721
  --amplify-components-link-active-color: var(--amplify-colors-font-active);
512
722
  --amplify-components-link-color: var(--amplify-colors-font-interactive);
513
723
  --amplify-components-link-focus-color: var(--amplify-colors-font-focus);
@@ -557,6 +767,66 @@
557
767
  --amplify-components-menu-item-min-height: 2.5rem;
558
768
  --amplify-components-menu-item-padding-inline-start: var(--amplify-space-medium);
559
769
  --amplify-components-menu-item-padding-inline-end: var(--amplify-space-medium);
770
+ --amplify-components-message-align-items: center;
771
+ --amplify-components-message-background-color: var(--amplify-colors-background-tertiary);
772
+ --amplify-components-message-border-color: transparent;
773
+ --amplify-components-message-border-style: solid;
774
+ --amplify-components-message-border-width: var(--amplify-border-widths-small);
775
+ --amplify-components-message-border-radius: var(--amplify-radii-xs);
776
+ --amplify-components-message-color: var(--amplify-colors-font-primary);
777
+ --amplify-components-message-justify-content: flex-start;
778
+ --amplify-components-message-padding-block: var(--amplify-space-small);
779
+ --amplify-components-message-padding-inline: var(--amplify-space-medium);
780
+ --amplify-components-message-line-height: var(--amplify-line-heights-small);
781
+ --amplify-components-message-icon-size: var(--amplify-font-sizes-xl);
782
+ --amplify-components-message-heading-font-size: var(--amplify-font-sizes-medium);
783
+ --amplify-components-message-heading-font-weight: var(--amplify-font-weights-bold);
784
+ --amplify-components-message-dismiss-gap: var(--amplify-space-xxs);
785
+ --amplify-components-message-plain-color: var(--amplify-colors-font-primary);
786
+ --amplify-components-message-plain-background-color: var(--amplify-colors-background-primary);
787
+ --amplify-components-message-plain-border-color: transparent;
788
+ --amplify-components-message-plain-info-color: var(--amplify-colors-font-info);
789
+ --amplify-components-message-plain-info-background-color: var(--amplify-colors-background-primary);
790
+ --amplify-components-message-plain-info-border-color: transparent;
791
+ --amplify-components-message-plain-error-color: var(--amplify-colors-font-error);
792
+ --amplify-components-message-plain-error-background-color: var(--amplify-colors-background-primary);
793
+ --amplify-components-message-plain-error-border-color: transparent;
794
+ --amplify-components-message-plain-success-color: var(--amplify-colors-font-success);
795
+ --amplify-components-message-plain-success-background-color: var(--amplify-colors-background-primary);
796
+ --amplify-components-message-plain-success-border-color: transparent;
797
+ --amplify-components-message-plain-warning-color: var(--amplify-colors-font-warning);
798
+ --amplify-components-message-plain-warning-background-color: var(--amplify-colors-background-primary);
799
+ --amplify-components-message-plain-warning-border-color: transparent;
800
+ --amplify-components-message-outlined-color: var(--amplify-colors-font-primary);
801
+ --amplify-components-message-outlined-background-color: var(--amplify-colors-background-primary);
802
+ --amplify-components-message-outlined-border-color: var(--amplify-colors-border-primary);
803
+ --amplify-components-message-outlined-info-color: var(--amplify-colors-font-info);
804
+ --amplify-components-message-outlined-info-background-color: var(--amplify-colors-background-primary);
805
+ --amplify-components-message-outlined-info-border-color: var(--amplify-colors-border-info);
806
+ --amplify-components-message-outlined-error-color: var(--amplify-colors-font-error);
807
+ --amplify-components-message-outlined-error-background-color: var(--amplify-colors-background-primary);
808
+ --amplify-components-message-outlined-error-border-color: var(--amplify-colors-border-error);
809
+ --amplify-components-message-outlined-success-color: var(--amplify-colors-font-success);
810
+ --amplify-components-message-outlined-success-background-color: var(--amplify-colors-background-primary);
811
+ --amplify-components-message-outlined-success-border-color: var(--amplify-colors-border-success);
812
+ --amplify-components-message-outlined-warning-color: var(--amplify-colors-font-warning);
813
+ --amplify-components-message-outlined-warning-background-color: var(--amplify-colors-background-primary);
814
+ --amplify-components-message-outlined-warning-border-color: var(--amplify-colors-border-warning);
815
+ --amplify-components-message-filled-color: var(--amplify-colors-font-primary);
816
+ --amplify-components-message-filled-background-color: var(--amplify-colors-background-secondary);
817
+ --amplify-components-message-filled-border-color: transparent;
818
+ --amplify-components-message-filled-info-color: var(--amplify-colors-font-info);
819
+ --amplify-components-message-filled-info-background-color: var(--amplify-colors-background-info);
820
+ --amplify-components-message-filled-info-border-color: transparent;
821
+ --amplify-components-message-filled-error-color: var(--amplify-colors-font-error);
822
+ --amplify-components-message-filled-error-background-color: var(--amplify-colors-background-error);
823
+ --amplify-components-message-filled-error-border-color: transparent;
824
+ --amplify-components-message-filled-success-color: var(--amplify-colors-font-success);
825
+ --amplify-components-message-filled-success-background-color: var(--amplify-colors-background-success);
826
+ --amplify-components-message-filled-success-border-color: transparent;
827
+ --amplify-components-message-filled-warning-color: var(--amplify-colors-font-warning);
828
+ --amplify-components-message-filled-warning-background-color: var(--amplify-colors-background-warning);
829
+ --amplify-components-message-filled-warning-border-color: transparent;
560
830
  --amplify-components-pagination-current-align-items: center;
561
831
  --amplify-components-pagination-current-justify-content: center;
562
832
  --amplify-components-pagination-current-color: var(--amplify-colors-font-inverse);
@@ -666,7 +936,11 @@
666
936
  --amplify-components-searchfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
667
937
  --amplify-components-searchfield-button-hover-border-color: var(--amplify-components-button-hover-border-color);
668
938
  --amplify-components-searchfield-button-hover-color: var(--amplify-components-button-hover-color);
939
+ --amplify-components-select-color: var(--amplify-components-fieldcontrol-color);
940
+ --amplify-components-select-background-color: var(--amplify-colors-background-primary);
669
941
  --amplify-components-select-padding-inline-end: var(--amplify-space-xxl);
942
+ --amplify-components-select-disabled-color: var(--amplify-colors-font-disabled);
943
+ --amplify-components-select-disabled-background-color: var(--amplify-colors-background-disabled);
670
944
  --amplify-components-select-wrapper-flex: 1;
671
945
  --amplify-components-select-wrapper-display: block;
672
946
  --amplify-components-select-wrapper-position: relative;
@@ -677,13 +951,22 @@
677
951
  --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium);
678
952
  --amplify-components-select-icon-wrapper-transform: translateY(-50%);
679
953
  --amplify-components-select-icon-wrapper-pointer-events: none;
680
- --amplify-components-select-option-background-color: var(--amplify-colors-background-primary);
954
+ --amplify-components-select-icon-wrapper-small-right: var(--amplify-space-xs);
955
+ --amplify-components-select-icon-wrapper-large-right: var(--amplify-space-medium);
956
+ --amplify-components-select-option-background-color: transparent;
681
957
  --amplify-components-select-option-color: var(--amplify-colors-font-primary);
682
958
  --amplify-components-select-option-disabled-color: var(--amplify-colors-font-disabled);
959
+ --amplify-components-select-option-disabled-background-color: transparent;
683
960
  --amplify-components-select-white-space: nowrap;
684
961
  --amplify-components-select-min-width: 6.5rem;
685
962
  --amplify-components-select-small-min-width: 5.5rem;
963
+ --amplify-components-select-small-padding-inline-end: var(--amplify-space-xl);
686
964
  --amplify-components-select-large-min-width: 7.5rem;
965
+ --amplify-components-select-large-padding-inline-end: var(--amplify-space-xxl);
966
+ --amplify-components-select-expanded-padding-block: var(--amplify-space-xs);
967
+ --amplify-components-select-expanded-padding-inline: var(--amplify-space-small);
968
+ --amplify-components-select-expanded-option-padding-block: var(--amplify-space-xs);
969
+ --amplify-components-select-expanded-option-padding-inline: var(--amplify-space-small);
687
970
  --amplify-components-selectfield-border-color: var(--amplify-components-fieldcontrol-border-color);
688
971
  --amplify-components-selectfield-color: var(--amplify-components-fieldcontrol-color);
689
972
  --amplify-components-selectfield-flex-direction: column;
@@ -744,9 +1027,9 @@
744
1027
  --amplify-components-storagemanager-dropzone-padding-inline: var(--amplify-space-large);
745
1028
  --amplify-components-storagemanager-dropzone-text-align: center;
746
1029
  --amplify-components-storagemanager-dropzone-active-background-color: var(--amplify-colors-brand-primary-10);
747
- --amplify-components-storagemanager-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
1030
+ --amplify-components-storagemanager-dropzone-active-border-radius: var(--amplify-components-storagemanager-dropzone-border-radius);
748
1031
  --amplify-components-storagemanager-dropzone-active-border-color: var(--amplify-colors-border-pressed);
749
- --amplify-components-storagemanager-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
1032
+ --amplify-components-storagemanager-dropzone-active-border-style: var(--amplify-components-storagemanager-dropzone-border-style);
750
1033
  --amplify-components-storagemanager-dropzone-active-border-width: var(--amplify-border-widths-medium);
751
1034
  --amplify-components-storagemanager-dropzone-icon-color: var(--amplify-colors-border-primary);
752
1035
  --amplify-components-storagemanager-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
@@ -773,6 +1056,8 @@
773
1056
  --amplify-components-storagemanager-file-image-background-color: var(--amplify-colors-background-secondary);
774
1057
  --amplify-components-storagemanager-file-image-color: var(--amplify-colors-font-tertiary);
775
1058
  --amplify-components-storagemanager-file-image-border-radius: var(--amplify-radii-small);
1059
+ --amplify-components-storagemanager-filelist-flex-direction: column;
1060
+ --amplify-components-storagemanager-filelist-gap: var(--amplify-space-small);
776
1061
  --amplify-components-storagemanager-loader-stroke-linecap: round;
777
1062
  --amplify-components-storagemanager-loader-stroke-empty: var(--amplify-colors-border-secondary);
778
1063
  --amplify-components-storagemanager-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
@@ -792,14 +1077,7 @@
792
1077
  --amplify-components-storagemanager-previewer-body-padding-block: var(--amplify-space-medium);
793
1078
  --amplify-components-storagemanager-previewer-body-padding-inline: var(--amplify-space-medium);
794
1079
  --amplify-components-storagemanager-previewer-body-gap: var(--amplify-space-small);
795
- --amplify-components-storagemanager-previewer-footer-border-color: var(--amplify-colors-border-secondary);
796
- --amplify-components-storagemanager-previewer-footer-border-style: solid;
797
- --amplify-components-storagemanager-previewer-footer-border-width: var(--amplify-border-widths-small);
798
- --amplify-components-storagemanager-previewer-footer-padding-block: var(--amplify-space-medium);
799
- --amplify-components-storagemanager-previewer-footer-padding-inline: var(--amplify-space-medium);
800
- --amplify-components-storagemanager-previewer-footer-justify-content: space-between;
801
- --amplify-components-storagemanager-filelist-flex-direction: column;
802
- --amplify-components-storagemanager-filelist-gap: var(--amplify-space-small);
1080
+ --amplify-components-storagemanager-previewer-footer-justify-content: flex-end;
803
1081
  --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
804
1082
  --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
805
1083
  --amplify-components-switchfield-font-size: var(--amplify-font-sizes-medium);
@@ -1057,10 +1335,10 @@
1057
1335
  --amplify-colors-background-tertiary: var(--amplify-colors-neutral-20);
1058
1336
  --amplify-colors-background-quaternary: var(--amplify-colors-neutral-60);
1059
1337
  --amplify-colors-background-disabled: var(--amplify-colors-background-tertiary);
1060
- --amplify-colors-background-info: var(--amplify-colors-blue-20);
1061
- --amplify-colors-background-warning: var(--amplify-colors-orange-20);
1062
- --amplify-colors-background-error: var(--amplify-colors-red-20);
1063
- --amplify-colors-background-success: var(--amplify-colors-green-20);
1338
+ --amplify-colors-background-info: var(--amplify-colors-blue-10);
1339
+ --amplify-colors-background-warning: var(--amplify-colors-orange-10);
1340
+ --amplify-colors-background-error: var(--amplify-colors-red-10);
1341
+ --amplify-colors-background-success: var(--amplify-colors-green-10);
1064
1342
  --amplify-colors-border-primary: var(--amplify-colors-neutral-60);
1065
1343
  --amplify-colors-border-secondary: var(--amplify-colors-neutral-40);
1066
1344
  --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20);
@@ -1068,9 +1346,13 @@
1068
1346
  --amplify-colors-border-pressed: var(--amplify-colors-brand-primary-100);
1069
1347
  --amplify-colors-border-focus: var(--amplify-colors-brand-primary-100);
1070
1348
  --amplify-colors-border-error: var(--amplify-colors-red-80);
1349
+ --amplify-colors-border-info: var(--amplify-colors-blue-80);
1350
+ --amplify-colors-border-success: var(--amplify-colors-green-80);
1351
+ --amplify-colors-border-warning: var(--amplify-colors-orange-80);
1071
1352
  --amplify-colors-shadow-primary: hsla(210, 50%, 10%, 0.25);
1072
1353
  --amplify-colors-shadow-secondary: hsla(210, 50%, 10%, 0.15);
1073
1354
  --amplify-colors-shadow-tertiary: hsla(210, 50%, 10%, 0.05);
1355
+ --amplify-colors-overlay-5: hsla(0, 0%, 0%, 0.05);
1074
1356
  --amplify-colors-overlay-10: hsla(0, 0%, 0%, 0.1);
1075
1357
  --amplify-colors-overlay-20: hsla(0, 0%, 0%, 0.2);
1076
1358
  --amplify-colors-overlay-30: hsla(0, 0%, 0%, 0.3);
@@ -1306,27 +1588,37 @@ strong.amplify-text {
1306
1588
  * Button base styles
1307
1589
  */
1308
1590
  .amplify-button {
1591
+ --amplify-internal-button-background-color: var(
1592
+ --amplify-components-button-background-color
1593
+ );
1594
+ --amplify-internal-button-border-color: var(
1595
+ --amplify-components-button-border-color
1596
+ );
1597
+ --amplify-internal-button-color: var(--amplify-components-button-color);
1598
+ --amplify-internal-button-focus-box-shadow: var(
1599
+ --amplify-components-button-focus-box-shadow
1600
+ );
1601
+ --amplify-internal-button-border-width: var(
1602
+ --amplify-components-button-border-width
1603
+ );
1309
1604
  align-items: center;
1310
- border-color: var(--amplify-components-button-border-color);
1605
+ background-color: var(--amplify-internal-button-background-color);
1606
+ border-color: var(--amplify-internal-button-border-color);
1311
1607
  border-radius: var(--amplify-components-button-border-radius);
1312
1608
  border-style: var(--amplify-components-button-border-style);
1313
- border-width: var(--amplify-components-button-border-width);
1609
+ border-width: var(--amplify-internal-button-border-width);
1314
1610
  box-sizing: border-box;
1315
- color: var(--amplify-components-button-color);
1611
+ color: var(--amplify-internal-button-color);
1316
1612
  cursor: pointer;
1317
1613
  display: inline-flex;
1318
1614
  font-size: var(--amplify-components-button-font-size);
1319
1615
  font-weight: var(--amplify-components-button-font-weight);
1320
1616
  justify-content: center;
1321
1617
  line-height: var(--amplify-components-button-line-height);
1322
- -webkit-padding-before: var(--amplify-components-button-padding-block-start);
1323
- padding-block-start: var(--amplify-components-button-padding-block-start);
1324
- -webkit-padding-after: var(--amplify-components-button-padding-block-end);
1325
- padding-block-end: var(--amplify-components-button-padding-block-end);
1326
- -webkit-padding-start: var(--amplify-components-button-padding-inline-start);
1327
- padding-inline-start: var(--amplify-components-button-padding-inline-start);
1328
- -webkit-padding-end: var(--amplify-components-button-padding-inline-end);
1329
- padding-inline-end: var(--amplify-components-button-padding-inline-end);
1618
+ padding-block-start: var(--amplify-components-button-padding-block-start);
1619
+ padding-block-end: var(--amplify-components-button-padding-block-end);
1620
+ padding-inline-start: var(--amplify-components-button-padding-inline-start);
1621
+ padding-inline-end: var(--amplify-components-button-padding-inline-end);
1330
1622
  transition: all var(--amplify-components-button-transition-duration);
1331
1623
  -webkit-user-select: none;
1332
1624
  -moz-user-select: none;
@@ -1353,24 +1645,277 @@ strong.amplify-text {
1353
1645
  --amplify-internal-button-loading-text-decoration: initial;
1354
1646
  }
1355
1647
  .amplify-button:hover {
1356
- background-color: var(--amplify-components-button-hover-background-color);
1357
- border-color: var(--amplify-components-button-hover-border-color);
1358
- color: var(--amplify-components-button-hover-color);
1648
+ --amplify-internal-button-background-color: var(
1649
+ --amplify-components-button-hover-background-color
1650
+ );
1651
+ --amplify-internal-button-border-color: var(
1652
+ --amplify-components-button-hover-border-color
1653
+ );
1654
+ --amplify-internal-button-color: var(
1655
+ --amplify-components-button-hover-color
1656
+ );
1359
1657
  }
1360
1658
  .amplify-button:focus {
1361
- background-color: var(--amplify-components-button-hover-background-color);
1362
- border-color: var(--amplify-components-button-focus-border-color);
1363
- color: var(--amplify-components-button-focus-color);
1364
- box-shadow: var(--amplify-components-button-focus-box-shadow);
1659
+ --amplify-internal-button-background-color: var(
1660
+ --amplify-components-button-hover-background-color
1661
+ );
1662
+ --amplify-internal-button-border-color: var(
1663
+ --amplify-components-button-focus-border-color
1664
+ );
1665
+ --amplify-internal-button-color: var(
1666
+ --amplify-components-button-focus-color
1667
+ );
1668
+ box-shadow: var(--amplify-internal-button-focus-box-shadow);
1365
1669
  }
1366
1670
  .amplify-button:active {
1367
- background-color: var(--amplify-components-button-active-background-color);
1368
- border-color: var(--amplify-components-button-active-border-color);
1369
- color: var(--amplify-components-button-active-color);
1671
+ --amplify-internal-button-background-color: var(
1672
+ --amplify-components-button-active-background-color
1673
+ );
1674
+ --amplify-internal-button-border-color: var(
1675
+ --amplify-components-button-active-border-color
1676
+ );
1677
+ --amplify-internal-button-color: var(
1678
+ --amplify-components-button-active-color
1679
+ );
1370
1680
  }
1371
1681
  .amplify-button--fullwidth {
1372
1682
  width: 100%;
1373
1683
  }
1684
+ .amplify-button--outlined--info {
1685
+ --amplify-internal-button-background-color: var(
1686
+ --amplify-components-button-outlined-info-background-color
1687
+ );
1688
+ --amplify-internal-button-border-color: var(
1689
+ --amplify-components-button-outlined-info-border-color
1690
+ );
1691
+ --amplify-internal-button-color: var(
1692
+ --amplify-components-button-outlined-info-color
1693
+ );
1694
+ }
1695
+ .amplify-button--outlined--info:hover {
1696
+ --amplify-internal-button-background-color: var(
1697
+ --amplify-components-button-outlined-info-hover-background-color
1698
+ );
1699
+ --amplify-internal-button-border-color: var(
1700
+ --amplify-components-button-outlined-info-hover-border-color
1701
+ );
1702
+ --amplify-internal-button-color: var(
1703
+ --amplify-components-button-outlined-info-hover-color
1704
+ );
1705
+ }
1706
+ .amplify-button--outlined--info:focus {
1707
+ --amplify-internal-button-background-color: var(
1708
+ --amplify-components-button-outlined-info-focus-background-color
1709
+ );
1710
+ --amplify-internal-button-border-color: var(
1711
+ --amplify-components-button-outlined-info-focus-border-color
1712
+ );
1713
+ --amplify-internal-button-color: var(
1714
+ --amplify-components-button-outlined-info-focus-color
1715
+ );
1716
+ --amplify-internal-button-focus-box-shadow: var(
1717
+ --amplify-components-button-outlined-info-focus-box-shadow
1718
+ );
1719
+ }
1720
+ .amplify-button--outlined--info:active {
1721
+ --amplify-internal-button-background-color: var(
1722
+ --amplify-components-button-outlined-info-active-background-color
1723
+ );
1724
+ --amplify-internal-button-border-color: var(
1725
+ --amplify-components-button-outlined-info-active-border-color
1726
+ );
1727
+ --amplify-internal-button-color: var(
1728
+ --amplify-components-button-outlined-info-active-color
1729
+ );
1730
+ }
1731
+ .amplify-button--outlined--warning {
1732
+ --amplify-internal-button-background-color: var(
1733
+ --amplify-components-button-outlined-warning-background-color
1734
+ );
1735
+ --amplify-internal-button-border-color: var(
1736
+ --amplify-components-button-outlined-warning-border-color
1737
+ );
1738
+ --amplify-internal-button-color: var(
1739
+ --amplify-components-button-outlined-warning-color
1740
+ );
1741
+ }
1742
+ .amplify-button--outlined--warning:hover {
1743
+ --amplify-internal-button-background-color: var(
1744
+ --amplify-components-button-outlined-warning-hover-background-color
1745
+ );
1746
+ --amplify-internal-button-border-color: var(
1747
+ --amplify-components-button-outlined-warning-hover-border-color
1748
+ );
1749
+ --amplify-internal-button-color: var(
1750
+ --amplify-components-button-outlined-warning-hover-color
1751
+ );
1752
+ }
1753
+ .amplify-button--outlined--warning:focus {
1754
+ --amplify-internal-button-background-color: var(
1755
+ --amplify-components-button-outlined-warning-focus-background-color
1756
+ );
1757
+ --amplify-internal-button-border-color: var(
1758
+ --amplify-components-button-outlined-warning-focus-border-color
1759
+ );
1760
+ --amplify-internal-button-color: var(
1761
+ --amplify-components-button-outlined-warning-focus-color
1762
+ );
1763
+ --amplify-internal-button-focus-box-shadow: var(
1764
+ --amplify-components-button-outlined-warning-focus-box-shadow
1765
+ );
1766
+ }
1767
+ .amplify-button--outlined--warning:active {
1768
+ --amplify-internal-button-background-color: var(
1769
+ --amplify-components-button-outlined-warning-active-background-color
1770
+ );
1771
+ --amplify-internal-button-border-color: var(
1772
+ --amplify-components-button-outlined-warning-active-border-color
1773
+ );
1774
+ --amplify-internal-button-color: var(
1775
+ --amplify-components-button-outlined-warning-active-color
1776
+ );
1777
+ }
1778
+ .amplify-button--outlined--error {
1779
+ --amplify-internal-button-background-color: var(
1780
+ --amplify-components-button-outlined-error-background-color
1781
+ );
1782
+ --amplify-internal-button-border-color: var(
1783
+ --amplify-components-button-outlined-error-border-color
1784
+ );
1785
+ --amplify-internal-button-color: var(
1786
+ --amplify-components-button-outlined-error-color
1787
+ );
1788
+ }
1789
+ .amplify-button--outlined--error:hover {
1790
+ --amplify-internal-button-background-color: var(
1791
+ --amplify-components-button-outlined-error-hover-background-color
1792
+ );
1793
+ --amplify-internal-button-border-color: var(
1794
+ --amplify-components-button-outlined-error-hover-border-color
1795
+ );
1796
+ --amplify-internal-button-color: var(
1797
+ --amplify-components-button-outlined-error-hover-color
1798
+ );
1799
+ }
1800
+ .amplify-button--outlined--error:focus {
1801
+ --amplify-internal-button-background-color: var(
1802
+ --amplify-components-button-outlined-error-focus-background-color
1803
+ );
1804
+ --amplify-internal-button-border-color: var(
1805
+ --amplify-components-button-outlined-error-focus-border-color
1806
+ );
1807
+ --amplify-internal-button-color: var(
1808
+ --amplify-components-button-outlined-error-focus-color
1809
+ );
1810
+ --amplify-internal-button-focus-box-shadow: var(
1811
+ --amplify-components-button-outlined-error-focus-box-shadow
1812
+ );
1813
+ }
1814
+ .amplify-button--outlined--error:active {
1815
+ --amplify-internal-button-background-color: var(
1816
+ --amplify-components-button-outlined-error-active-background-color
1817
+ );
1818
+ --amplify-internal-button-border-color: var(
1819
+ --amplify-components-button-outlined-error-active-border-color
1820
+ );
1821
+ --amplify-internal-button-color: var(
1822
+ --amplify-components-button-outlined-error-active-color
1823
+ );
1824
+ }
1825
+ .amplify-button--outlined--success {
1826
+ --amplify-internal-button-background-color: var(
1827
+ --amplify-components-button-outlined-success-background-color
1828
+ );
1829
+ --amplify-internal-button-border-color: var(
1830
+ --amplify-components-button-outlined-success-border-color
1831
+ );
1832
+ --amplify-internal-button-color: var(
1833
+ --amplify-components-button-outlined-success-color
1834
+ );
1835
+ }
1836
+ .amplify-button--outlined--success:hover {
1837
+ --amplify-internal-button-background-color: var(
1838
+ --amplify-components-button-outlined-success-hover-background-color
1839
+ );
1840
+ --amplify-internal-button-border-color: var(
1841
+ --amplify-components-button-outlined-success-hover-border-color
1842
+ );
1843
+ --amplify-internal-button-color: var(
1844
+ --amplify-components-button-outlined-success-hover-color
1845
+ );
1846
+ }
1847
+ .amplify-button--outlined--success:focus {
1848
+ --amplify-internal-button-background-color: var(
1849
+ --amplify-components-button-outlined-success-focus-background-color
1850
+ );
1851
+ --amplify-internal-button-border-color: var(
1852
+ --amplify-components-button-outlined-success-focus-border-color
1853
+ );
1854
+ --amplify-internal-button-color: var(
1855
+ --amplify-components-button-outlined-success-focus-color
1856
+ );
1857
+ --amplify-internal-button-focus-box-shadow: var(
1858
+ --amplify-components-button-outlined-success-focus-box-shadow
1859
+ );
1860
+ }
1861
+ .amplify-button--outlined--success:active {
1862
+ --amplify-internal-button-background-color: var(
1863
+ --amplify-components-button-outlined-success-active-background-color
1864
+ );
1865
+ --amplify-internal-button-border-color: var(
1866
+ --amplify-components-button-outlined-success-active-border-color
1867
+ );
1868
+ --amplify-internal-button-color: var(
1869
+ --amplify-components-button-outlined-success-active-color
1870
+ );
1871
+ }
1872
+ .amplify-button--outlined--overlay {
1873
+ --amplify-internal-button-background-color: var(
1874
+ --amplify-components-button-outlined-overlay-background-color
1875
+ );
1876
+ --amplify-internal-button-border-color: var(
1877
+ --amplify-components-button-outlined-overlay-border-color
1878
+ );
1879
+ --amplify-internal-button-color: var(
1880
+ --amplify-components-button-outlined-overlay-color
1881
+ );
1882
+ }
1883
+ .amplify-button--outlined--overlay:hover {
1884
+ --amplify-internal-button-background-color: var(
1885
+ --amplify-components-button-outlined-overlay-hover-background-color
1886
+ );
1887
+ --amplify-internal-button-border-color: var(
1888
+ --amplify-components-button-outlined-overlay-hover-border-color
1889
+ );
1890
+ --amplify-internal-button-color: var(
1891
+ --amplify-components-button-outlined-overlay-hover-color
1892
+ );
1893
+ }
1894
+ .amplify-button--outlined--overlay:focus {
1895
+ --amplify-internal-button-background-color: var(
1896
+ --amplify-components-button-outlined-overlay-focus-background-color
1897
+ );
1898
+ --amplify-internal-button-border-color: var(
1899
+ --amplify-components-button-outlined-overlay-focus-border-color
1900
+ );
1901
+ --amplify-internal-button-color: var(
1902
+ --amplify-components-button-outlined-overlay-focus-color
1903
+ );
1904
+ --amplify-internal-button-focus-box-shadow: var(
1905
+ --amplify-components-button-outlined-overlay-focus-box-shadow
1906
+ );
1907
+ }
1908
+ .amplify-button--outlined--overlay:active {
1909
+ --amplify-internal-button-background-color: var(
1910
+ --amplify-components-button-outlined-overlay-active-background-color
1911
+ );
1912
+ --amplify-internal-button-border-color: var(
1913
+ --amplify-components-button-outlined-overlay-active-border-color
1914
+ );
1915
+ --amplify-internal-button-color: var(
1916
+ --amplify-components-button-outlined-overlay-active-color
1917
+ );
1918
+ }
1374
1919
  .amplify-button--menu {
1375
1920
  border-width: var(--amplify-components-button-menu-border-width);
1376
1921
  background-color: var(--amplify-components-button-menu-background-color);
@@ -1393,10 +1938,18 @@ strong.amplify-text {
1393
1938
  background-color: var(--amplify-components-button-menu-active-background-color);
1394
1939
  }
1395
1940
  .amplify-button--primary {
1396
- border-width: var(--amplify-components-button-primary-border-width);
1397
- background-color: var(--amplify-components-button-primary-background-color);
1398
- border-color: var(--amplify-components-button-primary-border-color);
1399
- color: var(--amplify-components-button-primary-color);
1941
+ --amplify-internal-button-border-width: var(
1942
+ --amplify-components-button-primary-border-width
1943
+ );
1944
+ --amplify-internal-button-background-color: var(
1945
+ --amplify-components-button-primary-background-color
1946
+ );
1947
+ --amplify-internal-button-border-color: var(
1948
+ --amplify-components-button-primary-border-color
1949
+ );
1950
+ --amplify-internal-button-color: var(
1951
+ --amplify-components-button-primary-color
1952
+ );
1400
1953
  --amplify-internal-button-disabled-border-color: var(
1401
1954
  --amplify-components-button-primary-disabled-border-color
1402
1955
  );
@@ -1417,61 +1970,578 @@ strong.amplify-text {
1417
1970
  );
1418
1971
  }
1419
1972
  .amplify-button--primary:hover {
1420
- background-color: var(--amplify-components-button-primary-hover-background-color);
1421
- border-color: var(--amplify-components-button-primary-hover-border-color);
1422
- color: var(--amplify-components-button-primary-hover-color);
1973
+ --amplify-internal-button-background-color: var(
1974
+ --amplify-components-button-primary-hover-background-color
1975
+ );
1976
+ --amplify-internal-button-border-color: var(
1977
+ --amplify-components-button-primary-hover-border-color
1978
+ );
1979
+ --amplify-internal-button-color: var(
1980
+ --amplify-components-button-primary-hover-color
1981
+ );
1423
1982
  }
1424
1983
  .amplify-button--primary:focus {
1425
- background-color: var(--amplify-components-button-primary-focus-background-color);
1426
- border-color: var(--amplify-components-button-primary-focus-border-color);
1427
- color: var(--amplify-components-button-primary-focus-color);
1428
- box-shadow: var(--amplify-components-button-primary-focus-box-shadow);
1984
+ --amplify-internal-button-background-color: var(
1985
+ --amplify-components-button-primary-focus-background-color
1986
+ );
1987
+ --amplify-internal-button-border-color: var(
1988
+ --amplify-components-button-primary-focus-border-color
1989
+ );
1990
+ --amplify-internal-button-color: var(
1991
+ --amplify-components-button-primary-focus-color
1992
+ );
1993
+ --amplify-internal-button-focus-box-shadow: var(
1994
+ --amplify-components-button-primary-focus-box-shadow
1995
+ );
1429
1996
  }
1430
1997
  .amplify-button--primary:active {
1431
- background-color: var(--amplify-components-button-primary-active-background-color);
1432
- border-color: var(--amplify-components-button-primary-active-border-color);
1433
- color: var(--amplify-components-button-primary-active-color);
1998
+ --amplify-internal-button-background-color: var(
1999
+ --amplify-components-button-primary-active-background-color
2000
+ );
2001
+ --amplify-internal-button-border-color: var(
2002
+ --amplify-components-button-primary-active-border-color
2003
+ );
2004
+ --amplify-internal-button-color: var(
2005
+ --amplify-components-button-primary-active-color
2006
+ );
2007
+ }
2008
+ .amplify-button--primary--info {
2009
+ --amplify-internal-button-background-color: var(
2010
+ --amplify-components-button-primary-info-background-color
2011
+ );
2012
+ --amplify-internal-button-border-color: var(
2013
+ --amplify-components-button-primary-info-border-color
2014
+ );
2015
+ --amplify-internal-button-color: var(
2016
+ --amplify-components-button-primary-info-color
2017
+ );
2018
+ }
2019
+ .amplify-button--primary--info:hover {
2020
+ --amplify-internal-button-background-color: var(
2021
+ --amplify-components-button-primary-info-hover-background-color
2022
+ );
2023
+ --amplify-internal-button-border-color: var(
2024
+ --amplify-components-button-primary-info-hover-border-color
2025
+ );
2026
+ --amplify-internal-button-color: var(
2027
+ --amplify-components-button-primary-info-hover-color
2028
+ );
2029
+ }
2030
+ .amplify-button--primary--info:focus {
2031
+ --amplify-internal-button-background-color: var(
2032
+ --amplify-components-button-primary-info-focus-background-color
2033
+ );
2034
+ --amplify-internal-button-border-color: var(
2035
+ --amplify-components-button-primary-info-focus-border-color
2036
+ );
2037
+ --amplify-internal-button-color: var(
2038
+ --amplify-components-button-primary-info-focus-color
2039
+ );
2040
+ --amplify-internal-button-focus-box-shadow: var(
2041
+ --amplify-components-button-primary-info-focus-box-shadow
2042
+ );
2043
+ }
2044
+ .amplify-button--primary--info:active {
2045
+ --amplify-internal-button-background-color: var(
2046
+ --amplify-components-button-primary-info-active-background-color
2047
+ );
2048
+ --amplify-internal-button-border-color: var(
2049
+ --amplify-components-button-primary-info-active-border-color
2050
+ );
2051
+ --amplify-internal-button-color: var(
2052
+ --amplify-components-button-primary-info-active-color
2053
+ );
2054
+ }
2055
+ .amplify-button--primary--warning {
2056
+ --amplify-internal-button-background-color: var(
2057
+ --amplify-components-button-primary-warning-background-color
2058
+ );
2059
+ --amplify-internal-button-border-color: var(
2060
+ --amplify-components-button-primary-warning-border-color
2061
+ );
2062
+ --amplify-internal-button-color: var(
2063
+ --amplify-components-button-primary-warning-color
2064
+ );
2065
+ }
2066
+ .amplify-button--primary--warning:hover {
2067
+ --amplify-internal-button-background-color: var(
2068
+ --amplify-components-button-primary-warning-hover-background-color
2069
+ );
2070
+ --amplify-internal-button-border-color: var(
2071
+ --amplify-components-button-primary-warning-hover-border-color
2072
+ );
2073
+ --amplify-internal-button-color: var(
2074
+ --amplify-components-button-primary-warning-hover-color
2075
+ );
2076
+ }
2077
+ .amplify-button--primary--warning:focus {
2078
+ --amplify-internal-button-background-color: var(
2079
+ --amplify-components-button-primary-warning-focus-background-color
2080
+ );
2081
+ --amplify-internal-button-border-color: var(
2082
+ --amplify-components-button-primary-warning-focus-border-color
2083
+ );
2084
+ --amplify-internal-button-color: var(
2085
+ --amplify-components-button-primary-warning-focus-color
2086
+ );
2087
+ --amplify-internal-button-focus-box-shadow: var(
2088
+ --amplify-components-button-primary-warning-focus-box-shadow
2089
+ );
2090
+ }
2091
+ .amplify-button--primary--warning:active {
2092
+ --amplify-internal-button-background-color: var(
2093
+ --amplify-components-button-primary-warning-active-background-color
2094
+ );
2095
+ --amplify-internal-button-border-color: var(
2096
+ --amplify-components-button-primary-warning-active-border-color
2097
+ );
2098
+ --amplify-internal-button-color: var(
2099
+ --amplify-components-button-primary-warning-active-color
2100
+ );
2101
+ }
2102
+ .amplify-button--primary--error {
2103
+ --amplify-internal-button-background-color: var(
2104
+ --amplify-components-button-primary-error-background-color
2105
+ );
2106
+ --amplify-internal-button-border-color: var(
2107
+ --amplify-components-button-primary-error-border-color
2108
+ );
2109
+ --amplify-internal-button-color: var(
2110
+ --amplify-components-button-primary-error-color
2111
+ );
2112
+ }
2113
+ .amplify-button--primary--error:hover {
2114
+ --amplify-internal-button-background-color: var(
2115
+ --amplify-components-button-primary-error-hover-background-color
2116
+ );
2117
+ --amplify-internal-button-border-color: var(
2118
+ --amplify-components-button-primary-error-hover-border-color
2119
+ );
2120
+ --amplify-internal-button-color: var(
2121
+ --amplify-components-button-primary-error-hover-color
2122
+ );
2123
+ }
2124
+ .amplify-button--primary--error:focus {
2125
+ --amplify-internal-button-background-color: var(
2126
+ --amplify-components-button-primary-error-focus-background-color
2127
+ );
2128
+ --amplify-internal-button-border-color: var(
2129
+ --amplify-components-button-primary-error-focus-border-color
2130
+ );
2131
+ --amplify-internal-button-color: var(
2132
+ --amplify-components-button-primary-error-focus-color
2133
+ );
2134
+ --amplify-internal-button-focus-box-shadow: var(
2135
+ --amplify-components-button-primary-error-focus-box-shadow
2136
+ );
2137
+ }
2138
+ .amplify-button--primary--error:active {
2139
+ --amplify-internal-button-background-color: var(
2140
+ --amplify-components-button-primary-error-active-background-color
2141
+ );
2142
+ --amplify-internal-button-border-color: var(
2143
+ --amplify-components-button-primary-error-active-border-color
2144
+ );
2145
+ --amplify-internal-button-color: var(
2146
+ --amplify-components-button-primary-error-active-color
2147
+ );
2148
+ }
2149
+ .amplify-button--primary--success {
2150
+ --amplify-internal-button-background-color: var(
2151
+ --amplify-components-button-primary-success-background-color
2152
+ );
2153
+ --amplify-internal-button-border-color: var(
2154
+ --amplify-components-button-primary-success-border-color
2155
+ );
2156
+ --amplify-internal-button-color: var(
2157
+ --amplify-components-button-primary-success-color
2158
+ );
2159
+ }
2160
+ .amplify-button--primary--success:hover {
2161
+ --amplify-internal-button-background-color: var(
2162
+ --amplify-components-button-primary-success-hover-background-color
2163
+ );
2164
+ --amplify-internal-button-border-color: var(
2165
+ --amplify-components-button-primary-success-hover-border-color
2166
+ );
2167
+ --amplify-internal-button-color: var(
2168
+ --amplify-components-button-primary-success-hover-color
2169
+ );
2170
+ }
2171
+ .amplify-button--primary--success:focus {
2172
+ --amplify-internal-button-background-color: var(
2173
+ --amplify-components-button-primary-success-focus-background-color
2174
+ );
2175
+ --amplify-internal-button-border-color: var(
2176
+ --amplify-components-button-primary-success-focus-border-color
2177
+ );
2178
+ --amplify-internal-button-color: var(
2179
+ --amplify-components-button-primary-success-focus-color
2180
+ );
2181
+ --amplify-internal-button-focus-box-shadow: var(
2182
+ --amplify-components-button-primary-success-focus-box-shadow
2183
+ );
2184
+ }
2185
+ .amplify-button--primary--success:active {
2186
+ --amplify-internal-button-background-color: var(
2187
+ --amplify-components-button-primary-success-active-background-color
2188
+ );
2189
+ --amplify-internal-button-border-color: var(
2190
+ --amplify-components-button-primary-success-active-border-color
2191
+ );
2192
+ --amplify-internal-button-color: var(
2193
+ --amplify-components-button-primary-success-active-color
2194
+ );
2195
+ }
2196
+ .amplify-button--primary--overlay {
2197
+ --amplify-internal-button-background-color: var(
2198
+ --amplify-components-button-primary-overlay-background-color
2199
+ );
2200
+ --amplify-internal-button-border-color: var(
2201
+ --amplify-components-button-primary-overlay-border-color
2202
+ );
2203
+ --amplify-internal-button-color: var(
2204
+ --amplify-components-button-primary-overlay-color
2205
+ );
2206
+ }
2207
+ .amplify-button--primary--overlay:hover {
2208
+ --amplify-internal-button-background-color: var(
2209
+ --amplify-components-button-primary-overlay-hover-background-color
2210
+ );
2211
+ --amplify-internal-button-border-color: var(
2212
+ --amplify-components-button-primary-overlay-hover-border-color
2213
+ );
2214
+ --amplify-internal-button-color: var(
2215
+ --amplify-components-button-primary-overlay-hover-color
2216
+ );
2217
+ }
2218
+ .amplify-button--primary--overlay:focus {
2219
+ --amplify-internal-button-background-color: var(
2220
+ --amplify-components-button-primary-overlay-focus-background-color
2221
+ );
2222
+ --amplify-internal-button-border-color: var(
2223
+ --amplify-components-button-primary-overlay-focus-border-color
2224
+ );
2225
+ --amplify-internal-button-color: var(
2226
+ --amplify-components-button-primary-overlay-focus-color
2227
+ );
2228
+ --amplify-internal-button-focus-box-shadow: var(
2229
+ --amplify-components-button-primary-overlay-focus-box-shadow
2230
+ );
2231
+ }
2232
+ .amplify-button--primary--overlay:active {
2233
+ --amplify-internal-button-background-color: var(
2234
+ --amplify-components-button-primary-overlay-active-background-color
2235
+ );
2236
+ --amplify-internal-button-border-color: var(
2237
+ --amplify-components-button-primary-overlay-active-border-color
2238
+ );
2239
+ --amplify-internal-button-color: var(
2240
+ --amplify-components-button-primary-overlay-active-color
2241
+ );
1434
2242
  }
1435
2243
  .amplify-button--link {
1436
- border-width: var(--amplify-components-button-link-border-width);
1437
- background-color: var(--amplify-components-button-link-background-color);
1438
- color: var(--amplify-components-button-link-color);
1439
- --amplify-internal-button-disabled-text-decoration: none;
2244
+ --amplify-internal-button-border-width: var(
2245
+ --amplify-components-button-link-border-width
2246
+ );
2247
+ --amplify-internal-button-background-color: var(
2248
+ --amplify-components-button-link-background-color
2249
+ );
2250
+ --amplify-internal-button-border-color: var(
2251
+ --amplify-components-button-link-border-color
2252
+ );
2253
+ --amplify-internal-button-color: var(
2254
+ --amplify-components-button-link-color
2255
+ );
1440
2256
  --amplify-internal-button-disabled-border-color: var(
1441
2257
  --amplify-components-button-link-disabled-border-color
1442
2258
  );
1443
2259
  --amplify-internal-button-disabled-background-color: var(
1444
2260
  --amplify-components-button-link-disabled-background-color
1445
2261
  );
1446
- --amplify-internal-button-disabled-color: var(
1447
- --amplify-components-button-link-disabled-color
2262
+ --amplify-internal-button-disabled-color: var(
2263
+ --amplify-components-button-link-disabled-color
2264
+ );
2265
+ --amplify-internal-button-loading-background-color: var(
2266
+ --amplify-components-button-link-loading-background-color
2267
+ );
2268
+ --amplify-internal-button-loading-border-color: var(
2269
+ --amplify-components-button-link-loading-border-color
2270
+ );
2271
+ --amplify-internal-button-loading-color: var(
2272
+ --amplify-components-button-link-loading-color
2273
+ );
2274
+ }
2275
+ .amplify-button--link:hover {
2276
+ --amplify-internal-button-background-color: var(
2277
+ --amplify-components-button-link-hover-background-color
2278
+ );
2279
+ --amplify-internal-button-border-color: var(
2280
+ --amplify-components-button-link-hover-border-color
2281
+ );
2282
+ --amplify-internal-button-color: var(
2283
+ --amplify-components-button-link-hover-color
2284
+ );
2285
+ }
2286
+ .amplify-button--link:focus {
2287
+ --amplify-internal-button-background-color: var(
2288
+ --amplify-components-button-link-focus-background-color
2289
+ );
2290
+ --amplify-internal-button-border-color: var(
2291
+ --amplify-components-button-link-focus-border-color
2292
+ );
2293
+ --amplify-internal-button-color: var(
2294
+ --amplify-components-button-link-focus-color
2295
+ );
2296
+ --amplify-internal-button-focus-box-shadow: var(
2297
+ --amplify-components-button-link-focus-box-shadow
2298
+ );
2299
+ }
2300
+ .amplify-button--link:active {
2301
+ --amplify-internal-button-background-color: var(
2302
+ --amplify-components-button-link-active-background-color
2303
+ );
2304
+ --amplify-internal-button-border-color: var(
2305
+ --amplify-components-button-link-active-border-color
2306
+ );
2307
+ --amplify-internal-button-color: var(
2308
+ --amplify-components-button-link-active-color
2309
+ );
2310
+ }
2311
+ .amplify-button--link--info {
2312
+ --amplify-internal-button-background-color: var(
2313
+ --amplify-components-button-link-info-background-color
2314
+ );
2315
+ --amplify-internal-button-border-color: var(
2316
+ --amplify-components-button-link-info-border-color
2317
+ );
2318
+ --amplify-internal-button-color: var(
2319
+ --amplify-components-button-link-info-color
2320
+ );
2321
+ }
2322
+ .amplify-button--link--info:hover {
2323
+ --amplify-internal-button-background-color: var(
2324
+ --amplify-components-button-link-info-hover-background-color
2325
+ );
2326
+ --amplify-internal-button-border-color: var(
2327
+ --amplify-components-button-link-info-hover-border-color
2328
+ );
2329
+ --amplify-internal-button-color: var(
2330
+ --amplify-components-button-link-info-hover-color
2331
+ );
2332
+ }
2333
+ .amplify-button--link--info:focus {
2334
+ --amplify-internal-button-background-color: var(
2335
+ --amplify-components-button-link-info-focus-background-color
2336
+ );
2337
+ --amplify-internal-button-border-color: var(
2338
+ --amplify-components-button-link-info-focus-border-color
2339
+ );
2340
+ --amplify-internal-button-color: var(
2341
+ --amplify-components-button-link-info-focus-color
2342
+ );
2343
+ --amplify-internal-button-focus-box-shadow: var(
2344
+ --amplify-components-button-link-info-focus-box-shadow
2345
+ );
2346
+ }
2347
+ .amplify-button--link--info:active {
2348
+ --amplify-internal-button-background-color: var(
2349
+ --amplify-components-button-link-info-active-background-color
2350
+ );
2351
+ --amplify-internal-button-border-color: var(
2352
+ --amplify-components-button-link-info-active-border-color
2353
+ );
2354
+ --amplify-internal-button-color: var(
2355
+ --amplify-components-button-link-info-active-color
2356
+ );
2357
+ }
2358
+ .amplify-button--link--warning {
2359
+ --amplify-internal-button-background-color: var(
2360
+ --amplify-components-button-link-warning-background-color
2361
+ );
2362
+ --amplify-internal-button-border-color: var(
2363
+ --amplify-components-button-link-warning-border-color
2364
+ );
2365
+ --amplify-internal-button-color: var(
2366
+ --amplify-components-button-link-warning-color
2367
+ );
2368
+ }
2369
+ .amplify-button--link--warning:hover {
2370
+ --amplify-internal-button-background-color: var(
2371
+ --amplify-components-button-link-warning-hover-background-color
2372
+ );
2373
+ --amplify-internal-button-border-color: var(
2374
+ --amplify-components-button-link-warning-hover-border-color
2375
+ );
2376
+ --amplify-internal-button-color: var(
2377
+ --amplify-components-button-link-warning-hover-color
2378
+ );
2379
+ }
2380
+ .amplify-button--link--warning:focus {
2381
+ --amplify-internal-button-background-color: var(
2382
+ --amplify-components-button-link-warning-focus-background-color
2383
+ );
2384
+ --amplify-internal-button-border-color: var(
2385
+ --amplify-components-button-link-warning-focus-border-color
2386
+ );
2387
+ --amplify-internal-button-color: var(
2388
+ --amplify-components-button-link-warning-focus-color
2389
+ );
2390
+ --amplify-internal-button-focus-box-shadow: var(
2391
+ --amplify-components-button-link-warning-focus-box-shadow
2392
+ );
2393
+ }
2394
+ .amplify-button--link--warning:active {
2395
+ --amplify-internal-button-background-color: var(
2396
+ --amplify-components-button-link-warning-active-background-color
2397
+ );
2398
+ --amplify-internal-button-border-color: var(
2399
+ --amplify-components-button-link-warning-active-border-color
2400
+ );
2401
+ --amplify-internal-button-color: var(
2402
+ --amplify-components-button-link-warning-active-color
2403
+ );
2404
+ }
2405
+ .amplify-button--link--error {
2406
+ --amplify-internal-button-background-color: var(
2407
+ --amplify-components-button-link-error-background-color
2408
+ );
2409
+ --amplify-internal-button-border-color: var(
2410
+ --amplify-components-button-link-error-border-color
2411
+ );
2412
+ --amplify-internal-button-color: var(
2413
+ --amplify-components-button-link-error-color
2414
+ );
2415
+ }
2416
+ .amplify-button--link--error:hover {
2417
+ --amplify-internal-button-background-color: var(
2418
+ --amplify-components-button-link-error-hover-background-color
2419
+ );
2420
+ --amplify-internal-button-border-color: var(
2421
+ --amplify-components-button-link-error-hover-border-color
2422
+ );
2423
+ --amplify-internal-button-color: var(
2424
+ --amplify-components-button-link-error-hover-color
2425
+ );
2426
+ }
2427
+ .amplify-button--link--error:focus {
2428
+ --amplify-internal-button-background-color: var(
2429
+ --amplify-components-button-link-error-focus-background-color
2430
+ );
2431
+ --amplify-internal-button-border-color: var(
2432
+ --amplify-components-button-link-error-focus-border-color
2433
+ );
2434
+ --amplify-internal-button-color: var(
2435
+ --amplify-components-button-link-error-focus-color
2436
+ );
2437
+ --amplify-internal-button-focus-box-shadow: var(
2438
+ --amplify-components-button-link-error-focus-box-shadow
2439
+ );
2440
+ }
2441
+ .amplify-button--link--error:active {
2442
+ --amplify-internal-button-background-color: var(
2443
+ --amplify-components-button-link-error-active-background-color
2444
+ );
2445
+ --amplify-internal-button-border-color: var(
2446
+ --amplify-components-button-link-error-active-border-color
2447
+ );
2448
+ --amplify-internal-button-color: var(
2449
+ --amplify-components-button-link-error-active-color
2450
+ );
2451
+ }
2452
+ .amplify-button--link--success {
2453
+ --amplify-internal-button-background-color: var(
2454
+ --amplify-components-button-link-success-background-color
2455
+ );
2456
+ --amplify-internal-button-border-color: var(
2457
+ --amplify-components-button-link-success-border-color
2458
+ );
2459
+ --amplify-internal-button-color: var(
2460
+ --amplify-components-button-link-success-color
2461
+ );
2462
+ }
2463
+ .amplify-button--link--success:hover {
2464
+ --amplify-internal-button-background-color: var(
2465
+ --amplify-components-button-link-success-hover-background-color
2466
+ );
2467
+ --amplify-internal-button-border-color: var(
2468
+ --amplify-components-button-link-success-hover-border-color
2469
+ );
2470
+ --amplify-internal-button-color: var(
2471
+ --amplify-components-button-link-success-hover-color
2472
+ );
2473
+ }
2474
+ .amplify-button--link--success:focus {
2475
+ --amplify-internal-button-background-color: var(
2476
+ --amplify-components-button-link-success-focus-background-color
2477
+ );
2478
+ --amplify-internal-button-border-color: var(
2479
+ --amplify-components-button-link-success-focus-border-color
2480
+ );
2481
+ --amplify-internal-button-color: var(
2482
+ --amplify-components-button-link-success-focus-color
2483
+ );
2484
+ --amplify-internal-button-focus-box-shadow: var(
2485
+ --amplify-components-button-link-success-focus-box-shadow
2486
+ );
2487
+ }
2488
+ .amplify-button--link--success:active {
2489
+ --amplify-internal-button-background-color: var(
2490
+ --amplify-components-button-link-success-active-background-color
2491
+ );
2492
+ --amplify-internal-button-border-color: var(
2493
+ --amplify-components-button-link-success-active-border-color
1448
2494
  );
1449
- --amplify-internal-button-loading-background-color: var(
1450
- --amplify-components-button-link-loading-background-color
2495
+ --amplify-internal-button-color: var(
2496
+ --amplify-components-button-link-success-active-color
1451
2497
  );
1452
- --amplify-internal-button-loading-border-color: var(
1453
- --amplify-components-button-link-loading-border-color
2498
+ }
2499
+ .amplify-button--link--overlay {
2500
+ --amplify-internal-button-background-color: var(
2501
+ --amplify-components-button-link-overlay-background-color
1454
2502
  );
1455
- --amplify-internal-button-loading-color: var(
1456
- --amplify-components-button-link-loading-color
2503
+ --amplify-internal-button-border-color: var(
2504
+ --amplify-components-button-link-overlay-border-color
2505
+ );
2506
+ --amplify-internal-button-color: var(
2507
+ --amplify-components-button-link-overlay-color
1457
2508
  );
1458
- --amplify-internal-button-loading-text-decoration: none;
1459
2509
  }
1460
- .amplify-button--link:hover {
1461
- background-color: var(--amplify-components-button-link-hover-background-color);
1462
- border-color: var(--amplify-components-button-link-hover-border-color);
1463
- color: var(--amplify-components-button-link-hover-color);
2510
+ .amplify-button--link--overlay:hover {
2511
+ --amplify-internal-button-background-color: var(
2512
+ --amplify-components-button-link-overlay-hover-background-color
2513
+ );
2514
+ --amplify-internal-button-border-color: var(
2515
+ --amplify-components-button-link-overlay-hover-border-color
2516
+ );
2517
+ --amplify-internal-button-color: var(
2518
+ --amplify-components-button-link-overlay-hover-color
2519
+ );
1464
2520
  }
1465
- .amplify-button--link:focus {
1466
- background-color: var(--amplify-components-button-link-focus-background-color);
1467
- border-color: var(--amplify-components-button-link-focus-border-color);
1468
- color: var(--amplify-components-button-link-focus-color);
1469
- box-shadow: var(--amplify-components-button-link-focus-box-shadow);
2521
+ .amplify-button--link--overlay:focus {
2522
+ --amplify-internal-button-background-color: var(
2523
+ --amplify-components-button-link-overlay-focus-background-color
2524
+ );
2525
+ --amplify-internal-button-border-color: var(
2526
+ --amplify-components-button-link-overlay-focus-border-color
2527
+ );
2528
+ --amplify-internal-button-color: var(
2529
+ --amplify-components-button-link-overlay-focus-color
2530
+ );
2531
+ --amplify-internal-button-focus-box-shadow: var(
2532
+ --amplify-components-button-link-overlay-focus-box-shadow
2533
+ );
1470
2534
  }
1471
- .amplify-button--link:active {
1472
- background-color: var(--amplify-components-button-link-active-background-color);
1473
- border-color: var(--amplify-components-button-link-active-border-color);
1474
- color: var(--amplify-components-button-link-active-color);
2535
+ .amplify-button--link--overlay:active {
2536
+ --amplify-internal-button-background-color: var(
2537
+ --amplify-components-button-link-overlay-active-background-color
2538
+ );
2539
+ --amplify-internal-button-border-color: var(
2540
+ --amplify-components-button-link-overlay-active-border-color
2541
+ );
2542
+ --amplify-internal-button-color: var(
2543
+ --amplify-components-button-link-overlay-active-color
2544
+ );
1475
2545
  }
1476
2546
  .amplify-button--destructive {
1477
2547
  border-width: var(--amplify-components-button-destructive-border-width);
@@ -1557,25 +2627,17 @@ strong.amplify-text {
1557
2627
  }
1558
2628
  .amplify-button--small {
1559
2629
  font-size: var(--amplify-components-button-small-font-size);
1560
- -webkit-padding-before: var(--amplify-components-button-small-padding-block-start);
1561
- padding-block-start: var(--amplify-components-button-small-padding-block-start);
1562
- -webkit-padding-after: var(--amplify-components-button-small-padding-block-end);
1563
- padding-block-end: var(--amplify-components-button-small-padding-block-end);
1564
- -webkit-padding-start: var(--amplify-components-button-small-padding-inline-start);
1565
- padding-inline-start: var(--amplify-components-button-small-padding-inline-start);
1566
- -webkit-padding-end: var(--amplify-components-button-small-padding-inline-end);
1567
- padding-inline-end: var(--amplify-components-button-small-padding-inline-end);
2630
+ padding-block-start: var(--amplify-components-button-small-padding-block-start);
2631
+ padding-block-end: var(--amplify-components-button-small-padding-block-end);
2632
+ padding-inline-start: var(--amplify-components-button-small-padding-inline-start);
2633
+ padding-inline-end: var(--amplify-components-button-small-padding-inline-end);
1568
2634
  }
1569
2635
  .amplify-button--large {
1570
2636
  font-size: var(--amplify-components-button-large-font-size);
1571
- -webkit-padding-before: var(--amplify-components-button-large-padding-block-start);
1572
- padding-block-start: var(--amplify-components-button-large-padding-block-start);
1573
- -webkit-padding-after: var(--amplify-components-button-large-padding-block-end);
1574
- padding-block-end: var(--amplify-components-button-large-padding-block-end);
1575
- -webkit-padding-start: var(--amplify-components-button-large-padding-inline-start);
1576
- padding-inline-start: var(--amplify-components-button-large-padding-inline-start);
1577
- -webkit-padding-end: var(--amplify-components-button-large-padding-inline-end);
1578
- padding-inline-end: var(--amplify-components-button-large-padding-inline-end);
2637
+ padding-block-start: var(--amplify-components-button-large-padding-block-start);
2638
+ padding-block-end: var(--amplify-components-button-large-padding-block-end);
2639
+ padding-inline-start: var(--amplify-components-button-large-padding-inline-start);
2640
+ padding-inline-end: var(--amplify-components-button-large-padding-inline-end);
1579
2641
  }
1580
2642
  .amplify-button--disabled {
1581
2643
  background-color: var(--amplify-internal-button-disabled-background-color);
@@ -1644,6 +2706,52 @@ strong.amplify-text {
1644
2706
  transition: none;
1645
2707
  }
1646
2708
  }
2709
+ .amplify-dropzone {
2710
+ display: block;
2711
+ background-color: var(--amplify-components-dropzone-background-color);
2712
+ border-color: var(--amplify-components-dropzone-border-color);
2713
+ border-width: var(--amplify-components-dropzone-border-width);
2714
+ border-style: var(--amplify-components-dropzone-border-style);
2715
+ border-radius: var(--amplify-components-dropzone-border-radius);
2716
+ color: var(--amplify-components-dropzone-color);
2717
+ padding-block: var(--amplify-components-dropzone-padding-block);
2718
+ padding-inline: var(--amplify-components-dropzone-padding-inline);
2719
+ text-align: var(--amplify-components-dropzone-text-align);
2720
+ }
2721
+ .amplify-dropzone--disabled {
2722
+ cursor: not-allowed;
2723
+ background-color: var(--amplify-components-dropzone-disabled-background-color);
2724
+ border-color: var(--amplify-components-dropzone-disabled-border-color);
2725
+ border-width: var(--amplify-components-dropzone-disabled-border-width);
2726
+ border-style: var(--amplify-components-dropzone-disabled-border-style);
2727
+ border-radius: var(--amplify-components-dropzone-disabled-border-radius);
2728
+ color: var(--amplify-components-dropzone-disabled-color);
2729
+ }
2730
+ .amplify-dropzone--active {
2731
+ background-color: var(--amplify-components-dropzone-active-background-color);
2732
+ border-color: var(--amplify-components-dropzone-active-border-color);
2733
+ border-width: var(--amplify-components-dropzone-active-border-width);
2734
+ border-style: var(--amplify-components-dropzone-active-border-style);
2735
+ border-radius: var(--amplify-components-dropzone-active-border-radius);
2736
+ color: var(--amplify-components-dropzone-active-color);
2737
+ }
2738
+ .amplify-dropzone--rejected {
2739
+ background-color: var(--amplify-components-dropzone-rejected-background-color);
2740
+ border-color: var(--amplify-components-dropzone-rejected-border-color);
2741
+ border-width: var(--amplify-components-dropzone-rejected-border-width);
2742
+ border-style: var(--amplify-components-dropzone-rejected-border-style);
2743
+ border-radius: var(--amplify-components-dropzone-rejected-border-radius);
2744
+ color: var(--amplify-components-dropzone-rejected-color);
2745
+ }
2746
+ .amplify-dropzone--accepted {
2747
+ background-color: var(--amplify-components-dropzone-accepted-background-color);
2748
+ border-color: var(--amplify-components-dropzone-accepted-border-color);
2749
+ border-width: var(--amplify-components-dropzone-accepted-border-width);
2750
+ border-style: var(--amplify-components-dropzone-accepted-border-style);
2751
+ border-radius: var(--amplify-components-dropzone-accepted-border-radius);
2752
+ color: var(--amplify-components-dropzone-accepted-color);
2753
+ }
2754
+
1647
2755
  .amplify-field__description {
1648
2756
  color: var(--amplify-components-fieldmessages-description-color);
1649
2757
  font-style: var(--amplify-components-fieldmessages-description-font-style);
@@ -1720,14 +2828,10 @@ strong.amplify-text {
1720
2828
  color: var(--amplify-components-fieldcontrol-color);
1721
2829
  font-size: var(--amplify-components-fieldcontrol-font-size);
1722
2830
  line-height: var(--amplify-components-fieldcontrol-line-height);
1723
- -webkit-padding-before: var(--amplify-components-fieldcontrol-padding-block-start);
1724
- padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
1725
- -webkit-padding-after: var(--amplify-components-fieldcontrol-padding-block-end);
1726
- padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
1727
- -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
1728
- padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
1729
- -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-end);
1730
- padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
2831
+ padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
2832
+ padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
2833
+ padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
2834
+ padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
1731
2835
  transition: all var(--amplify-components-fieldcontrol-transition-duration);
1732
2836
  width: 100%;
1733
2837
  border-color: var(--amplify-components-fieldcontrol-border-color);
@@ -1742,6 +2846,18 @@ strong.amplify-text {
1742
2846
  -moz-user-select: text;
1743
2847
  user-select: text;
1744
2848
  display: inline-block;
2849
+ --amplify-components-fieldcontrol-color: var(
2850
+ --amplify-components-input-color
2851
+ );
2852
+ --amplify-components-fieldcontrol-border-color: var(
2853
+ --amplify-components-input-border-color
2854
+ );
2855
+ --amplify-components-fieldcontrol-font-size: var(
2856
+ --amplify-components-input-font-size
2857
+ );
2858
+ --amplify-components-fieldcontrol-focus-border-color: var(
2859
+ --amplify-components-input-focus-border-color
2860
+ );
1745
2861
  }
1746
2862
  .amplify-input:focus {
1747
2863
  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
@@ -1749,25 +2865,17 @@ strong.amplify-text {
1749
2865
  }
1750
2866
  .amplify-input--small {
1751
2867
  font-size: var(--amplify-components-fieldcontrol-small-font-size);
1752
- -webkit-padding-before: var(--amplify-components-fieldcontrol-small-padding-block-start);
1753
- padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
1754
- -webkit-padding-after: var(--amplify-components-fieldcontrol-small-padding-block-end);
1755
- padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
1756
- -webkit-padding-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
1757
- padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
1758
- -webkit-padding-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
1759
- padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
2868
+ padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
2869
+ padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
2870
+ padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
2871
+ padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
1760
2872
  }
1761
2873
  .amplify-input--large {
1762
2874
  font-size: var(--amplify-components-fieldcontrol-large-font-size);
1763
- -webkit-padding-before: var(--amplify-components-fieldcontrol-large-padding-block-start);
1764
- padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
1765
- -webkit-padding-after: var(--amplify-components-fieldcontrol-large-padding-block-end);
1766
- padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
1767
- -webkit-padding-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
1768
- padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
1769
- -webkit-padding-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
1770
- padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
2875
+ padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
2876
+ padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
2877
+ padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
2878
+ padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
1771
2879
  }
1772
2880
  .amplify-input--error {
1773
2881
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
@@ -1776,19 +2884,10 @@ strong.amplify-text {
1776
2884
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
1777
2885
  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
1778
2886
  }
1779
- .amplify-input[disabled] {
1780
- color: var(--amplify-components-fieldcontrol-disabled-color);
1781
- cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
1782
- border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
1783
- background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
1784
- }
1785
2887
  .amplify-input--quiet {
1786
- -webkit-border-before: var(--amplify-components-fieldcontrol-quiet-border-block-start);
1787
- border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
1788
- -webkit-border-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
1789
- border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
1790
- -webkit-border-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
1791
- border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
2888
+ border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
2889
+ border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
2890
+ border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
1792
2891
  border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
1793
2892
  }
1794
2893
  .amplify-input--quiet:focus {
@@ -1801,20 +2900,22 @@ strong.amplify-text {
1801
2900
  .amplify-input--quiet[aria-invalid=true]:focus {
1802
2901
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
1803
2902
  }
2903
+ .amplify-input[disabled] {
2904
+ color: var(--amplify-components-fieldcontrol-disabled-color);
2905
+ cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
2906
+ border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
2907
+ background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
2908
+ }
1804
2909
 
1805
2910
  .amplify-textarea {
1806
2911
  box-sizing: border-box;
1807
2912
  color: var(--amplify-components-fieldcontrol-color);
1808
2913
  font-size: var(--amplify-components-fieldcontrol-font-size);
1809
2914
  line-height: var(--amplify-components-fieldcontrol-line-height);
1810
- -webkit-padding-before: var(--amplify-components-fieldcontrol-padding-block-start);
1811
- padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
1812
- -webkit-padding-after: var(--amplify-components-fieldcontrol-padding-block-end);
1813
- padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
1814
- -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
1815
- padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
1816
- -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-end);
1817
- padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
2915
+ padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
2916
+ padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
2917
+ padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
2918
+ padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
1818
2919
  transition: all var(--amplify-components-fieldcontrol-transition-duration);
1819
2920
  width: 100%;
1820
2921
  border-color: var(--amplify-components-fieldcontrol-border-color);
@@ -1836,25 +2937,17 @@ strong.amplify-text {
1836
2937
  }
1837
2938
  .amplify-textarea--small {
1838
2939
  font-size: var(--amplify-components-fieldcontrol-small-font-size);
1839
- -webkit-padding-before: var(--amplify-components-fieldcontrol-small-padding-block-start);
1840
- padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
1841
- -webkit-padding-after: var(--amplify-components-fieldcontrol-small-padding-block-end);
1842
- padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
1843
- -webkit-padding-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
1844
- padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
1845
- -webkit-padding-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
1846
- padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
2940
+ padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
2941
+ padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
2942
+ padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
2943
+ padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
1847
2944
  }
1848
2945
  .amplify-textarea--large {
1849
2946
  font-size: var(--amplify-components-fieldcontrol-large-font-size);
1850
- -webkit-padding-before: var(--amplify-components-fieldcontrol-large-padding-block-start);
1851
- padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
1852
- -webkit-padding-after: var(--amplify-components-fieldcontrol-large-padding-block-end);
1853
- padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
1854
- -webkit-padding-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
1855
- padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
1856
- -webkit-padding-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
1857
- padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
2947
+ padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
2948
+ padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
2949
+ padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
2950
+ padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
1858
2951
  }
1859
2952
  .amplify-textarea--error {
1860
2953
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
@@ -1863,19 +2956,10 @@ strong.amplify-text {
1863
2956
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
1864
2957
  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
1865
2958
  }
1866
- .amplify-textarea[disabled] {
1867
- color: var(--amplify-components-fieldcontrol-disabled-color);
1868
- cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
1869
- border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
1870
- background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
1871
- }
1872
2959
  .amplify-textarea--quiet {
1873
- -webkit-border-before: var(--amplify-components-fieldcontrol-quiet-border-block-start);
1874
- border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
1875
- -webkit-border-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
1876
- border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
1877
- -webkit-border-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
1878
- border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
2960
+ border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
2961
+ border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
2962
+ border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
1879
2963
  border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
1880
2964
  }
1881
2965
  .amplify-textarea--quiet:focus {
@@ -1888,6 +2972,12 @@ strong.amplify-text {
1888
2972
  .amplify-textarea--quiet[aria-invalid=true]:focus {
1889
2973
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
1890
2974
  }
2975
+ .amplify-textarea[disabled] {
2976
+ color: var(--amplify-components-fieldcontrol-disabled-color);
2977
+ cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
2978
+ border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
2979
+ background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
2980
+ }
1891
2981
 
1892
2982
  .amplify-image {
1893
2983
  height: var(--amplify-components-image-height);
@@ -2120,6 +3210,7 @@ strong.amplify-text {
2120
3210
 
2121
3211
  .amplify-alert__icon {
2122
3212
  font-size: var(--amplify-components-alert-icon-size);
3213
+ line-height: 1;
2123
3214
  }
2124
3215
 
2125
3216
  .amplify-alert__heading {
@@ -2151,8 +3242,7 @@ strong.amplify-text {
2151
3242
  position: absolute;
2152
3243
  z-index: 999999;
2153
3244
  width: var(--amplify-components-autocomplete-menu-width);
2154
- -webkit-margin-before: var(--amplify-components-autocomplete-menu-margin-block-start);
2155
- margin-block-start: var(--amplify-components-autocomplete-menu-margin-block-start);
3245
+ margin-block-start: var(--amplify-components-autocomplete-menu-margin-block-start);
2156
3246
  background-color: var(--amplify-components-autocomplete-menu-background-color);
2157
3247
  border-color: var(--amplify-components-autocomplete-menu-border-color);
2158
3248
  border-width: var(--amplify-components-autocomplete-menu-border-width);
@@ -2250,6 +3340,47 @@ strong.amplify-text {
2250
3340
  align-self: center;
2251
3341
  }
2252
3342
 
3343
+ .amplify-breadcrumbs__list {
3344
+ display: flex;
3345
+ flex-wrap: var(--amplify-components-breadcrumbs-flex-wrap);
3346
+ flex-direction: var(--amplify-components-breadcrumbs-flex-direction);
3347
+ gap: var(--amplify-components-breadcrumbs-gap);
3348
+ color: var(--amplify-components-breadcrumbs-color);
3349
+ }
3350
+
3351
+ .amplify-breadcrumbs__item {
3352
+ display: inline-flex;
3353
+ flex-direction: var(--amplify-components-breadcrumbs-item-flex-direction);
3354
+ align-items: var(--amplify-components-breadcrumbs-item-align-items);
3355
+ line-height: var(--amplify-components-breadcrumbs-item-line-height);
3356
+ color: var(--amplify-components-breadcrumbs-item-color);
3357
+ font-size: var(--amplify-components-breadcrumbs-item-font-size);
3358
+ }
3359
+
3360
+ .amplify-breadcrumbs__separator {
3361
+ color: var(--amplify-components-breadcrumbs-separator-color);
3362
+ font-size: var(--amplify-components-breadcrumbs-separator-font-size);
3363
+ padding-inline: var(--amplify-components-breadcrumbs-separator-padding-inline);
3364
+ }
3365
+
3366
+ .amplify-breadcrumbs__link {
3367
+ color: var(--amplify-components-breadcrumbs-link-color);
3368
+ font-size: var(--amplify-components-breadcrumbs-link-font-size);
3369
+ font-weight: var(--amplify-components-breadcrumbs-link-font-weight);
3370
+ padding-inline: var(--amplify-components-breadcrumbs-link-padding-inline);
3371
+ padding-block: var(--amplify-components-breadcrumbs-link-padding-block);
3372
+ -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
3373
+ text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
3374
+ }
3375
+
3376
+ .amplify-breadcrumbs__link--current {
3377
+ color: var(--amplify-components-breadcrumbs-link-current-color);
3378
+ font-size: var(--amplify-components-breadcrumbs-link-current-font-size);
3379
+ font-weight: var(--amplify-components-breadcrumbs-link-current-font-weight);
3380
+ -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
3381
+ text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
3382
+ }
3383
+
2253
3384
  .amplify-card {
2254
3385
  background-color: var(--amplify-components-card-background-color);
2255
3386
  border-radius: var(--amplify-components-card-border-radius);
@@ -2407,6 +3538,9 @@ strong.amplify-text {
2407
3538
  }
2408
3539
 
2409
3540
  .amplify-checkbox__icon {
3541
+ line-height: 1;
3542
+ width: 1em;
3543
+ height: 1em;
2410
3544
  background-color: var(--amplify-components-checkbox-icon-background-color);
2411
3545
  opacity: var(--amplify-components-checkbox-icon-opacity);
2412
3546
  transform: var(--amplify-components-checkbox-icon-transform);
@@ -2551,10 +3685,8 @@ strong.amplify-text {
2551
3685
  flex: 1;
2552
3686
  display: flex;
2553
3687
  min-height: var(--amplify-components-expander-trigger-min-height);
2554
- -webkit-padding-start: var(--amplify-components-expander-trigger-padding-inline-start);
2555
- padding-inline-start: var(--amplify-components-expander-trigger-padding-inline-start);
2556
- -webkit-padding-end: var(--amplify-components-expander-trigger-padding-inline-end);
2557
- padding-inline-end: var(--amplify-components-expander-trigger-padding-inline-end);
3688
+ padding-inline-start: var(--amplify-components-expander-trigger-padding-inline-start);
3689
+ padding-inline-end: var(--amplify-components-expander-trigger-padding-inline-end);
2558
3690
  align-items: var(--amplify-components-expander-trigger-align-items);
2559
3691
  justify-content: var(--amplify-components-expander-trigger-justify-content);
2560
3692
  }
@@ -2564,10 +3696,8 @@ strong.amplify-text {
2564
3696
 
2565
3697
  .amplify-expander__content {
2566
3698
  display: block;
2567
- -webkit-padding-start: var(--amplify-components-expander-content-padding-inline-start);
2568
- padding-inline-start: var(--amplify-components-expander-content-padding-inline-start);
2569
- -webkit-padding-end: var(--amplify-components-expander-content-padding-inline-end);
2570
- padding-inline-end: var(--amplify-components-expander-content-padding-inline-end);
3699
+ padding-inline-start: var(--amplify-components-expander-content-padding-inline-start);
3700
+ padding-inline-end: var(--amplify-components-expander-content-padding-inline-end);
2571
3701
  }
2572
3702
  .amplify-expander__content[data-state=open] {
2573
3703
  animation-name: amplify-expander-slide-down;
@@ -2583,10 +3713,8 @@ strong.amplify-text {
2583
3713
  .amplify-expander__content__text {
2584
3714
  display: block;
2585
3715
  color: var(--amplify-components-expander-content-text-color);
2586
- -webkit-padding-before: var(--amplify-components-expander-content-text-padding-block-start);
2587
- padding-block-start: var(--amplify-components-expander-content-text-padding-block-start);
2588
- -webkit-padding-after: var(--amplify-components-expander-content-text-padding-block-end);
2589
- padding-block-end: var(--amplify-components-expander-content-text-padding-block-end);
3716
+ padding-block-start: var(--amplify-components-expander-content-text-padding-block-start);
3717
+ padding-block-end: var(--amplify-components-expander-content-text-padding-block-end);
2590
3718
  }
2591
3719
 
2592
3720
  .amplify-expander__icon {
@@ -2668,6 +3796,7 @@ strong.amplify-text {
2668
3796
  .amplify-field-group__outer-start,
2669
3797
  .amplify-field-group__outer-end {
2670
3798
  display: flex;
3799
+ flex-shrink: 0;
2671
3800
  align-items: var(--amplify-components-fieldgroup-outer-align-items);
2672
3801
  }
2673
3802
  .amplify-field-group__outer-start .amplify-field-group__control,
@@ -2743,13 +3872,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
2743
3872
  }
2744
3873
 
2745
3874
  .amplify-field-group--has-inner-end .amplify-input {
2746
- -webkit-padding-end: calc(var(--amplify-components-fieldcontrol-padding-inline-end) * 3);
2747
- padding-inline-end: calc(var(--amplify-components-fieldcontrol-padding-inline-end) * 3);
3875
+ padding-inline-end: calc(var(--amplify-components-fieldcontrol-padding-inline-end) * 3);
2748
3876
  }
2749
3877
 
2750
3878
  .amplify-field-group--has-inner-start .amplify-input {
2751
- -webkit-padding-start: calc(var(--amplify-components-fieldcontrol-padding-inline-start) * 3);
2752
- padding-inline-start: calc(var(--amplify-components-fieldcontrol-padding-inline-start) * 3);
3879
+ padding-inline-start: calc(var(--amplify-components-fieldcontrol-padding-inline-start) * 3);
2753
3880
  }
2754
3881
 
2755
3882
  /**
@@ -2757,15 +3884,51 @@ html[dir=rtl] .amplify-field-group__inner-start {
2757
3884
  */
2758
3885
  .amplify-field-group__icon:not(.amplify-field-group__icon-button) {
2759
3886
  display: flex;
2760
- -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
2761
- padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
2762
- -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-start);
2763
- padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-start);
3887
+ padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
3888
+ padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-start);
2764
3889
  flex-direction: column;
2765
3890
  justify-content: center;
2766
3891
  height: 100%;
2767
3892
  }
2768
3893
 
3894
+ .amplify-fieldset {
3895
+ background-color: var(--amplify-components-fieldset-background-color);
3896
+ border-radius: var(--amplify-components-fieldset-border-radius);
3897
+ flex-direction: var(--amplify-components-fieldset-flex-direction);
3898
+ gap: var(--amplify-components-fieldset-gap);
3899
+ /* Sizes */
3900
+ /* Variations */
3901
+ }
3902
+ .amplify-fieldset--small {
3903
+ gap: var(--amplify-components-fieldset-small-gap);
3904
+ }
3905
+ .amplify-fieldset--large {
3906
+ gap: var(--amplify-components-fieldset-large-gap);
3907
+ }
3908
+ .amplify-fieldset--outlined {
3909
+ border: var(--amplify-components-fieldset-outlined-border-width) var(--amplify-components-fieldset-outlined-border-style) var(--amplify-components-fieldset-outlined-border-color);
3910
+ padding: var(--amplify-components-fieldset-outlined-padding);
3911
+ }
3912
+ .amplify-fieldset--outlined.amplify-fieldset--small {
3913
+ padding: var(--amplify-components-fieldset-outlined-small-padding);
3914
+ }
3915
+ .amplify-fieldset--outlined.amplify-fieldset--large {
3916
+ padding: var(--amplify-components-fieldset-outlined-large-padding);
3917
+ }
3918
+
3919
+ .amplify-fieldset__legend {
3920
+ color: var(--amplify-components-fieldset-legend-color);
3921
+ font-weight: var(--amplify-components-fieldset-legend-font-weight);
3922
+ line-height: var(--amplify-components-fieldset-legend-line-height);
3923
+ font-size: var(--amplify-components-fieldset-legend-font-size);
3924
+ }
3925
+ .amplify-fieldset__legend--small {
3926
+ font-size: var(--amplify-components-fieldset-legend-small-font-size);
3927
+ }
3928
+ .amplify-fieldset__legend--large {
3929
+ font-size: var(--amplify-components-fieldset-legend-large-font-size);
3930
+ }
3931
+
2769
3932
  .amplify-liveness-cancel-container {
2770
3933
  z-index: 2;
2771
3934
  position: absolute;
@@ -3141,153 +4304,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
3141
4304
  border-radius: 2px;
3142
4305
  }
3143
4306
 
3144
- .amplify-fileuploader__dropzone {
3145
- background-color: var(--amplify-components-fileuploader-dropzone-background-color);
3146
- border-color: var(--amplify-components-fileuploader-dropzone-border-color);
3147
- border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
3148
- border-style: var(--amplify-components-fileuploader-dropzone-border-style);
3149
- border-width: var(--amplify-components-fileuploader-dropzone-border-width);
3150
- text-align: var(--amplify-components-fileuploader-dropzone-text-align);
3151
- padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
3152
- padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
3153
- display: flex;
3154
- flex-direction: column;
3155
- align-items: center;
3156
- gap: var(--amplify-components-fileuploader-dropzone-gap);
3157
- }
3158
- .amplify-fileuploader__dropzone--small {
3159
- flex-direction: row;
3160
- justify-content: center;
3161
- }
3162
- .amplify-fileuploader__dropzone--active {
3163
- border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
3164
- border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
3165
- background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
3166
- }
3167
- .amplify-fileuploader__dropzone__icon {
3168
- font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
3169
- color: var(--amplify-components-fileuploader-dropzone-icon-color);
3170
- }
3171
- .amplify-fileuploader__dropzone__text {
3172
- color: var(--amplify-components-fileuploader-dropzone-text-color);
3173
- font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
3174
- font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
3175
- }
3176
- .amplify-fileuploader__file {
3177
- position: relative;
3178
- border-width: var(--amplify-components-fileuploader-file-border-width);
3179
- border-style: var(--amplify-components-fileuploader-file-border-style);
3180
- border-color: var(--amplify-components-fileuploader-file-border-color);
3181
- border-radius: var(--amplify-components-fileuploader-file-border-radius);
3182
- display: flex;
3183
- flex-direction: column;
3184
- padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
3185
- padding-block: var(--amplify-components-fileuploader-file-padding-block);
3186
- align-items: var(--amplify-components-fileuploader-file-align-items);
3187
- }
3188
- .amplify-fileuploader__file__wrapper {
3189
- width: 100%;
3190
- display: flex;
3191
- flex-direction: row;
3192
- align-items: center;
3193
- gap: var(--amplify-components-fileuploader-file-gap);
3194
- }
3195
- .amplify-fileuploader__file__name {
3196
- text-overflow: ellipsis;
3197
- overflow: hidden;
3198
- font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
3199
- font-size: var(--amplify-components-fileuploader-file-name-font-size);
3200
- color: var(--amplify-components-fileuploader-file-name-color);
3201
- }
3202
- .amplify-fileuploader__file__size {
3203
- font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
3204
- font-size: var(--amplify-components-fileuploader-file-size-font-size);
3205
- color: var(--amplify-components-fileuploader-file-size-color);
3206
- }
3207
- .amplify-fileuploader__file__main {
3208
- flex: 1;
3209
- white-space: nowrap;
3210
- overflow: hidden;
3211
- }
3212
- .amplify-fileuploader__file__image {
3213
- position: relative;
3214
- display: flex;
3215
- align-items: center;
3216
- justify-content: center;
3217
- width: var(--amplify-components-fileuploader-file-image-width);
3218
- height: var(--amplify-components-fileuploader-file-image-height);
3219
- background-color: var(--amplify-components-fileuploader-file-image-background-color);
3220
- border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
3221
- color: var(--amplify-components-fileuploader-file-image-color);
3222
- }
3223
- .amplify-fileuploader__file__image img {
3224
- max-height: 100%;
3225
- }
3226
- .amplify-fileuploader__file__status--error {
3227
- color: var(--amplify-colors-font-error);
3228
- font-size: var(--amplify-components-fileuploader-file-size-font-size);
3229
- }
3230
- .amplify-fileuploader__file__status--success {
3231
- color: var(--amplify-colors-font-success);
3232
- }
3233
- .amplify-fileuploader__loader {
3234
- stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
3235
- stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
3236
- stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
3237
- height: var(--amplify-components-fileuploader-loader-stroke-width);
3238
- --amplify-components-loader-linear-stroke-filled: var(
3239
- --amplify-components-fileuploader-loader-stroke-filled
3240
- );
3241
- overflow: hidden;
3242
- position: absolute;
3243
- bottom: 0;
3244
- left: 0;
3245
- width: 100%;
3246
- }
3247
- .amplify-fileuploader__previewer {
3248
- display: block;
3249
- max-width: var(--amplify-components-fileuploader-previewer-max-width);
3250
- background-color: var(--amplify-components-fileuploader-previewer-background-color);
3251
- border-width: var(--amplify-components-fileuploader-previewer-border-width);
3252
- border-style: var(--amplify-components-fileuploader-previewer-border-style);
3253
- border-color: var(--amplify-components-fileuploader-previewer-border-color);
3254
- border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
3255
- padding-inline: var(--amplify-components-fileuploader-previewer-padding-inline);
3256
- padding-block: var(--amplify-components-fileuploader-previewer-padding-block);
3257
- }
3258
- .amplify-fileuploader__previewer__text {
3259
- font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
3260
- font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
3261
- color: var(--amplify-components-fileuploader-previewer-text-color);
3262
- }
3263
- .amplify-fileuploader__previewer__body {
3264
- display: flex;
3265
- flex-direction: column;
3266
- max-height: var(--amplify-components-fileuploader-previewer-max-height);
3267
- max-width: var(--amplify-components-fileuploader-previewer-max-width);
3268
- overflow: auto;
3269
- gap: var(--amplify-components-fileuploader-previewer-body-gap);
3270
- padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
3271
- padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
3272
- }
3273
- .amplify-fileuploader__previewer__footer {
3274
- max-width: var(--amplify-components-fileuploader-previewer-max-width);
3275
- border-top-width: var(--amplify-components-fileuploader-previewer-footer-border-width);
3276
- border-top-style: var(--amplify-components-fileuploader-previewer-footer-border-style);
3277
- border-top-color: var(--amplify-components-fileuploader-previewer-footer-border-color);
3278
- padding-inline: var(--amplify-components-fileuploader-previewer-footer-padding-inline);
3279
- padding-block: var(--amplify-components-fileuploader-previewer-footer-padding-block);
3280
- position: relative;
3281
- display: flex;
3282
- flex-direction: row;
3283
- justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
3284
- }
3285
- .amplify-fileuploader__previewer__footer__actions {
3286
- display: flex;
3287
- flex-direction: row;
3288
- gap: var(--amplify-space-small);
3289
- }
3290
-
3291
4307
  .amplify-menu-content-wrapper {
3292
4308
  z-index: 999999;
3293
4309
  }
@@ -3313,10 +4329,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
3313
4329
 
3314
4330
  .amplify-menu-content__item {
3315
4331
  min-height: var(--amplify-components-menu-item-min-height);
3316
- -webkit-padding-start: var(--amplify-components-menu-item-padding-inline-start);
3317
- padding-inline-start: var(--amplify-components-menu-item-padding-inline-start);
3318
- -webkit-padding-end: var(--amplify-components-menu-item-padding-inline-end);
3319
- padding-inline-end: var(--amplify-components-menu-item-padding-inline-end);
4332
+ padding-inline-start: var(--amplify-components-menu-item-padding-inline-start);
4333
+ padding-inline-end: var(--amplify-components-menu-item-padding-inline-end);
3320
4334
  }
3321
4335
 
3322
4336
  .amplify-menu-content__item:not(:first-child):not(:last-child) {
@@ -3345,6 +4359,118 @@ html[dir=rtl] .amplify-field-group__inner-start {
3345
4359
  }
3346
4360
  }
3347
4361
 
4362
+ .amplify-message {
4363
+ align-items: var(--amplify-components-message-align-items);
4364
+ background-color: var(--amplify-components-message-background-color);
4365
+ color: var(--amplify-components-message-color);
4366
+ justify-content: var(--amplify-components-message-justify-content);
4367
+ padding-block: var(--amplify-components-message-padding-block);
4368
+ padding-inline: var(--amplify-components-message-padding-inline);
4369
+ border-color: var(--amplify-components-message-border-color);
4370
+ border-radius: var(--amplify-components-message-border-radius);
4371
+ border-style: var(--amplify-components-message-border-style);
4372
+ border-width: var(--amplify-components-message-border-width);
4373
+ line-height: var(--amplify-components-message-line-height);
4374
+ }
4375
+ .amplify-message--plain {
4376
+ background-color: var(--amplify-components-message-plain-background-color);
4377
+ border-color: var(--amplify-components-message-plain-border-color);
4378
+ color: var(--amplify-components-message-plain-color);
4379
+ }
4380
+ .amplify-message--plain.amplify-message--info {
4381
+ background-color: var(--amplify-components-message-plain-info-background-color);
4382
+ border-color: var(--amplify-components-message-plain-info-border-color);
4383
+ color: var(--amplify-components-message-plain-info-color);
4384
+ }
4385
+ .amplify-message--plain.amplify-message--error {
4386
+ background-color: var(--amplify-components-message-plain-error-background-color);
4387
+ border-color: var(--amplify-components-message-plain-error-border-color);
4388
+ color: var(--amplify-components-message-plain-error-color);
4389
+ }
4390
+ .amplify-message--plain.amplify-message--warning {
4391
+ background-color: var(--amplify-components-message-plain-warning-background-color);
4392
+ border-color: var(--amplify-components-message-plain-warning-border-color);
4393
+ color: var(--amplify-components-message-plain-warning-color);
4394
+ }
4395
+ .amplify-message--plain.amplify-message--success {
4396
+ background-color: var(--amplify-components-message-plain-success-background-color);
4397
+ border-color: var(--amplify-components-message-plain-success-border-color);
4398
+ color: var(--amplify-components-message-plain-success-color);
4399
+ }
4400
+ .amplify-message--outlined {
4401
+ background-color: var(--amplify-components-message-outlined-background-color);
4402
+ border-color: var(--amplify-components-message-outlined-border-color);
4403
+ color: var(--amplify-components-message-outlined-color);
4404
+ }
4405
+ .amplify-message--outlined.amplify-message--info {
4406
+ background-color: var(--amplify-components-message-outlined-info-background-color);
4407
+ border-color: var(--amplify-components-message-outlined-info-border-color);
4408
+ color: var(--amplify-components-message-outlined-info-color);
4409
+ }
4410
+ .amplify-message--outlined.amplify-message--error {
4411
+ background-color: var(--amplify-components-message-outlined-error-background-color);
4412
+ border-color: var(--amplify-components-message-outlined-error-border-color);
4413
+ color: var(--amplify-components-message-outlined-error-color);
4414
+ }
4415
+ .amplify-message--outlined.amplify-message--warning {
4416
+ background-color: var(--amplify-components-message-outlined-warning-background-color);
4417
+ border-color: var(--amplify-components-message-outlined-warning-border-color);
4418
+ color: var(--amplify-components-message-outlined-warning-color);
4419
+ }
4420
+ .amplify-message--outlined.amplify-message--success {
4421
+ background-color: var(--amplify-components-message-outlined-success-background-color);
4422
+ border-color: var(--amplify-components-message-outlined-success-border-color);
4423
+ color: var(--amplify-components-message-outlined-success-color);
4424
+ }
4425
+ .amplify-message--filled {
4426
+ background-color: var(--amplify-components-message-filled-background-color);
4427
+ border-color: var(--amplify-components-message-filled-border-color);
4428
+ color: var(--amplify-components-message-filled-color);
4429
+ }
4430
+ .amplify-message--filled.amplify-message--info {
4431
+ background-color: var(--amplify-components-message-filled-info-background-color);
4432
+ border-color: var(--amplify-components-message-filled-info-border-color);
4433
+ color: var(--amplify-components-message-filled-info-color);
4434
+ }
4435
+ .amplify-message--filled.amplify-message--error {
4436
+ background-color: var(--amplify-components-message-filled-error-background-color);
4437
+ border-color: var(--amplify-components-message-filled-error-border-color);
4438
+ color: var(--amplify-components-message-filled-error-color);
4439
+ }
4440
+ .amplify-message--filled.amplify-message--warning {
4441
+ background-color: var(--amplify-components-message-filled-warning-background-color);
4442
+ border-color: var(--amplify-components-message-filled-warning-border-color);
4443
+ color: var(--amplify-components-message-filled-warning-color);
4444
+ }
4445
+ .amplify-message--filled.amplify-message--success {
4446
+ background-color: var(--amplify-components-message-filled-success-background-color);
4447
+ border-color: var(--amplify-components-message-filled-success-border-color);
4448
+ color: var(--amplify-components-message-filled-success-color);
4449
+ }
4450
+
4451
+ .amplify-message__icon {
4452
+ font-size: var(--amplify-components-message-icon-size);
4453
+ }
4454
+ .amplify-message__icon > * {
4455
+ display: block;
4456
+ }
4457
+
4458
+ .amplify-message__heading {
4459
+ font-weight: var(--amplify-components-message-heading-font-weight);
4460
+ font-size: var(--amplify-components-message-heading-font-size);
4461
+ }
4462
+
4463
+ .amplify-message__content {
4464
+ flex: 1;
4465
+ flex-direction: column;
4466
+ gap: var(--amplify-space-xxxs);
4467
+ }
4468
+
4469
+ .amplify-message__dismiss {
4470
+ margin-inline-start: auto;
4471
+ gap: var(--amplify-components-message-dismiss-gap);
4472
+ }
4473
+
3348
4474
  .amplify-pagination__item-current, .amplify-pagination__item-button {
3349
4475
  height: var(--amplify-components-pagination-item-shared-height);
3350
4476
  min-width: var(--amplify-components-pagination-item-shared-min-width);
@@ -3364,10 +4490,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
3364
4490
  justify-content: center;
3365
4491
  font-weight: initial;
3366
4492
  color: var(--amplify-components-pagination-button-color);
3367
- -webkit-padding-start: var(--amplify-components-pagination-button-padding-inline-start);
3368
- padding-inline-start: var(--amplify-components-pagination-button-padding-inline-start);
3369
- -webkit-padding-end: var(--amplify-components-pagination-button-padding-inline-end);
3370
- padding-inline-end: var(--amplify-components-pagination-button-padding-inline-end);
4493
+ padding-inline-start: var(--amplify-components-pagination-button-padding-inline-start);
4494
+ padding-inline-end: var(--amplify-components-pagination-button-padding-inline-end);
3371
4495
  transition-property: var(--amplify-components-pagination-button-transition-property);
3372
4496
  transition-duration: var(--amplify-components-pagination-button-transition-duration);
3373
4497
  }
@@ -3390,10 +4514,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
3390
4514
  .amplify-pagination__item-ellipsis {
3391
4515
  align-items: var(--amplify-components-pagination-ellipsis-align-items);
3392
4516
  justify-content: var(--amplify-components-pagination-ellipsis-justify-content);
3393
- -webkit-padding-start: var(--amplify-components-pagination-ellipsis-padding-inline-start);
3394
- padding-inline-start: var(--amplify-components-pagination-ellipsis-padding-inline-start);
3395
- -webkit-padding-end: var(--amplify-components-pagination-ellipsis-padding-inline-end);
3396
- padding-inline-end: var(--amplify-components-pagination-ellipsis-padding-inline-end);
4517
+ padding-inline-start: var(--amplify-components-pagination-ellipsis-padding-inline-start);
4518
+ padding-inline-end: var(--amplify-components-pagination-ellipsis-padding-inline-end);
3397
4519
  }
3398
4520
 
3399
4521
  .amplify-passwordfield {
@@ -3522,6 +4644,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
3522
4644
  .amplify-rating-icon {
3523
4645
  width: 1em;
3524
4646
  height: 1em;
4647
+ display: block;
3525
4648
  }
3526
4649
 
3527
4650
  .amplify-rating-icon-filled {
@@ -3656,11 +4779,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
3656
4779
  border-color: var(--amplify-components-button-active-border-color);
3657
4780
  color: var(--amplify-components-button-active-color);
3658
4781
  }
3659
- .amplify-searchfield__search:disabled {
3660
- background-color: var(--amplify-components-searchfield-button-disabled-background-color);
3661
- border-color: var(--amplify-components-searchfield-button-disabled-border-color);
3662
- color: var(--amplify-components-searchfield-button-disabled-color);
3663
- }
3664
4782
  .amplify-searchfield__search:focus {
3665
4783
  background-color: var(--amplify-components-searchfield-button-focus-background-color);
3666
4784
  border-color: var(--amplify-components-searchfield-button-focus-border-color);
@@ -3671,6 +4789,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
3671
4789
  border-color: var(--amplify-components-searchfield-button-hover-border-color);
3672
4790
  color: var(--amplify-components-searchfield-button-hover-color);
3673
4791
  }
4792
+ .amplify-searchfield__search:disabled {
4793
+ background-color: var(--amplify-components-searchfield-button-disabled-background-color);
4794
+ border-color: var(--amplify-components-searchfield-button-disabled-border-color);
4795
+ color: var(--amplify-components-searchfield-button-disabled-color);
4796
+ }
3674
4797
 
3675
4798
  .amplify-select__wrapper {
3676
4799
  flex: var(--amplify-components-select-wrapper-flex);
@@ -3689,20 +4812,22 @@ html[dir=rtl] .amplify-field-group__inner-start {
3689
4812
  transform: var(--amplify-components-select-icon-wrapper-transform);
3690
4813
  pointer-events: var(--amplify-components-select-icon-wrapper-pointer-events);
3691
4814
  }
4815
+ .amplify-select__icon-wrapper--small {
4816
+ right: var(--amplify-components-select-icon-wrapper-small-right);
4817
+ }
4818
+ .amplify-select__icon-wrapper--large {
4819
+ right: var(--amplify-components-select-icon-wrapper-large-right);
4820
+ }
3692
4821
 
3693
4822
  .amplify-select {
3694
4823
  box-sizing: border-box;
3695
4824
  color: var(--amplify-components-fieldcontrol-color);
3696
4825
  font-size: var(--amplify-components-fieldcontrol-font-size);
3697
4826
  line-height: var(--amplify-components-fieldcontrol-line-height);
3698
- -webkit-padding-before: var(--amplify-components-fieldcontrol-padding-block-start);
3699
- padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
3700
- -webkit-padding-after: var(--amplify-components-fieldcontrol-padding-block-end);
3701
- padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
3702
- -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
3703
- padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
3704
- -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-end);
3705
- padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
4827
+ padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
4828
+ padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
4829
+ padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
4830
+ padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
3706
4831
  transition: all var(--amplify-components-fieldcontrol-transition-duration);
3707
4832
  width: 100%;
3708
4833
  border-color: var(--amplify-components-fieldcontrol-border-color);
@@ -3713,9 +4838,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
3713
4838
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
3714
4839
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
3715
4840
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
4841
+ background-color: var(--amplify-components-select-background-color);
4842
+ color: var(--amplify-components-select-color);
3716
4843
  min-width: var(--amplify-components-select-min-width);
3717
- -webkit-padding-end: var(--amplify-components-select-padding-inline-end);
3718
- padding-inline-end: var(--amplify-components-select-padding-inline-end);
4844
+ padding-inline-end: var(--amplify-components-select-padding-inline-end);
3719
4845
  white-space: var(--amplify-components-select-white-space);
3720
4846
  }
3721
4847
  .amplify-select:focus {
@@ -3724,25 +4850,17 @@ html[dir=rtl] .amplify-field-group__inner-start {
3724
4850
  }
3725
4851
  .amplify-select--small {
3726
4852
  font-size: var(--amplify-components-fieldcontrol-small-font-size);
3727
- -webkit-padding-before: var(--amplify-components-fieldcontrol-small-padding-block-start);
3728
- padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
3729
- -webkit-padding-after: var(--amplify-components-fieldcontrol-small-padding-block-end);
3730
- padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
3731
- -webkit-padding-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
3732
- padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
3733
- -webkit-padding-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
3734
- padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
4853
+ padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
4854
+ padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
4855
+ padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
4856
+ padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
3735
4857
  }
3736
4858
  .amplify-select--large {
3737
4859
  font-size: var(--amplify-components-fieldcontrol-large-font-size);
3738
- -webkit-padding-before: var(--amplify-components-fieldcontrol-large-padding-block-start);
3739
- padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
3740
- -webkit-padding-after: var(--amplify-components-fieldcontrol-large-padding-block-end);
3741
- padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
3742
- -webkit-padding-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
3743
- padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
3744
- -webkit-padding-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
3745
- padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
4860
+ padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
4861
+ padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
4862
+ padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
4863
+ padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
3746
4864
  }
3747
4865
  .amplify-select--error {
3748
4866
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
@@ -3751,19 +4869,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
3751
4869
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
3752
4870
  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
3753
4871
  }
3754
- .amplify-select[disabled] {
3755
- color: var(--amplify-components-fieldcontrol-disabled-color);
3756
- cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
3757
- border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
3758
- background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
3759
- }
3760
4872
  .amplify-select--quiet {
3761
- -webkit-border-before: var(--amplify-components-fieldcontrol-quiet-border-block-start);
3762
- border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
3763
- -webkit-border-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
3764
- border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
3765
- -webkit-border-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
3766
- border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
4873
+ border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
4874
+ border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
4875
+ border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
3767
4876
  border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
3768
4877
  }
3769
4878
  .amplify-select--quiet:focus {
@@ -3776,23 +4885,43 @@ html[dir=rtl] .amplify-field-group__inner-start {
3776
4885
  .amplify-select--quiet[aria-invalid=true]:focus {
3777
4886
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
3778
4887
  }
4888
+ .amplify-select[disabled] {
4889
+ color: var(--amplify-components-fieldcontrol-disabled-color);
4890
+ cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
4891
+ border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
4892
+ background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
4893
+ }
3779
4894
  .amplify-select option {
3780
- color: initial;
4895
+ background-color: var(--amplify-components-select-option-background-color);
4896
+ color: var(--amplify-components-select-option-color);
3781
4897
  }
3782
4898
  .amplify-select option[disabled=""] {
4899
+ background-color: var(--amplify-components-select-option-disabled-background-color);
3783
4900
  color: var(--amplify-components-select-option-disabled-color);
4901
+ cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
3784
4902
  }
3785
- @-moz-document url-prefix() {
3786
- .amplify-select option {
3787
- background-color: var(--amplify-components-select-option-background-color);
3788
- color: var(--amplify-components-select-option-color);
3789
- }
4903
+ .amplify-select[disabled] {
4904
+ background-color: var(--amplify-components-select-disabled-background-color);
4905
+ color: var(--amplify-components-select-disabled-color);
4906
+ }
4907
+ .amplify-select[disabled] option {
4908
+ color: inherit;
4909
+ background-color: inherit;
3790
4910
  }
3791
4911
  .amplify-select--small {
3792
4912
  min-width: var(--amplify-components-select-small-min-width);
4913
+ padding-inline-end: var(--amplify-components-select-small-padding-inline-end);
3793
4914
  }
3794
4915
  .amplify-select--large {
3795
4916
  min-width: var(--amplify-components-select-large-min-width);
4917
+ padding-inline-end: var(--amplify-components-select-large-padding-inline-end);
4918
+ }
4919
+ .amplify-select--expanded {
4920
+ overflow: auto;
4921
+ padding: var(--amplify-components-select-expanded-padding-block) var(--amplify-components-select-expanded-padding-inline);
4922
+ }
4923
+ .amplify-select--expanded option {
4924
+ padding: var(--amplify-components-select-expanded-option-padding-block) var(--amplify-components-select-expanded-option-padding-inline);
3796
4925
  }
3797
4926
 
3798
4927
  .amplify-selectfield {
@@ -4016,13 +5145,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
4016
5145
  }
4017
5146
 
4018
5147
  .amplify-stepperfield__button--decrease[data-invalid=true] {
4019
- -webkit-border-end: none;
4020
- border-inline-end: none;
5148
+ border-inline-end: none;
4021
5149
  }
4022
5150
 
4023
5151
  .amplify-stepperfield__button--increase[data-invalid=true] {
4024
- -webkit-border-start: none;
4025
- border-inline-start: none;
5152
+ border-inline-start: none;
4026
5153
  }
4027
5154
 
4028
5155
  .amplify-stepperfield__input {
@@ -4034,10 +5161,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
4034
5161
  margin: 0;
4035
5162
  }
4036
5163
  .amplify-stepperfield__input:not(:focus, [aria-invalid=true]) {
4037
- -webkit-border-start: none;
4038
- border-inline-start: none;
4039
- -webkit-border-end: none;
4040
- border-inline-end: none;
5164
+ border-inline-start: none;
5165
+ border-inline-end: none;
4041
5166
  }
4042
5167
 
4043
5168
  .amplify-switchfield {
@@ -4646,8 +5771,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4646
5771
  z-index: 2;
4647
5772
  }
4648
5773
  .amplify-togglebuttongroup .amplify-togglebutton:not(:first-of-type) {
4649
- -webkit-margin-start: calc(-1 * var(--amplify-components-button-border-width));
4650
- margin-inline-start: calc(-1 * var(--amplify-components-button-border-width));
5774
+ margin-inline-start: calc(-1 * var(--amplify-components-button-border-width));
4651
5775
  border-start-start-radius: 0;
4652
5776
  border-end-start-radius: 0;
4653
5777
  }
@@ -4848,153 +5972,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
4848
5972
  margin: var(--amplify-space-small);
4849
5973
  }
4850
5974
 
4851
- .amplify-fileuploader__dropzone {
4852
- background-color: var(--amplify-components-fileuploader-dropzone-background-color);
4853
- border-color: var(--amplify-components-fileuploader-dropzone-border-color);
4854
- border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
4855
- border-style: var(--amplify-components-fileuploader-dropzone-border-style);
4856
- border-width: var(--amplify-components-fileuploader-dropzone-border-width);
4857
- text-align: var(--amplify-components-fileuploader-dropzone-text-align);
4858
- padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
4859
- padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
4860
- display: flex;
4861
- flex-direction: column;
4862
- align-items: center;
4863
- gap: var(--amplify-components-fileuploader-dropzone-gap);
4864
- }
4865
- .amplify-fileuploader__dropzone--small {
4866
- flex-direction: row;
4867
- justify-content: center;
4868
- }
4869
- .amplify-fileuploader__dropzone--active {
4870
- border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
4871
- border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
4872
- background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
4873
- }
4874
- .amplify-fileuploader__dropzone__icon {
4875
- font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
4876
- color: var(--amplify-components-fileuploader-dropzone-icon-color);
4877
- }
4878
- .amplify-fileuploader__dropzone__text {
4879
- color: var(--amplify-components-fileuploader-dropzone-text-color);
4880
- font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
4881
- font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
4882
- }
4883
- .amplify-fileuploader__file {
4884
- position: relative;
4885
- border-width: var(--amplify-components-fileuploader-file-border-width);
4886
- border-style: var(--amplify-components-fileuploader-file-border-style);
4887
- border-color: var(--amplify-components-fileuploader-file-border-color);
4888
- border-radius: var(--amplify-components-fileuploader-file-border-radius);
4889
- display: flex;
4890
- flex-direction: column;
4891
- padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
4892
- padding-block: var(--amplify-components-fileuploader-file-padding-block);
4893
- align-items: var(--amplify-components-fileuploader-file-align-items);
4894
- }
4895
- .amplify-fileuploader__file__wrapper {
4896
- width: 100%;
4897
- display: flex;
4898
- flex-direction: row;
4899
- align-items: center;
4900
- gap: var(--amplify-components-fileuploader-file-gap);
4901
- }
4902
- .amplify-fileuploader__file__name {
4903
- text-overflow: ellipsis;
4904
- overflow: hidden;
4905
- font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
4906
- font-size: var(--amplify-components-fileuploader-file-name-font-size);
4907
- color: var(--amplify-components-fileuploader-file-name-color);
4908
- }
4909
- .amplify-fileuploader__file__size {
4910
- font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
4911
- font-size: var(--amplify-components-fileuploader-file-size-font-size);
4912
- color: var(--amplify-components-fileuploader-file-size-color);
4913
- }
4914
- .amplify-fileuploader__file__main {
4915
- flex: 1;
4916
- white-space: nowrap;
4917
- overflow: hidden;
4918
- }
4919
- .amplify-fileuploader__file__image {
4920
- position: relative;
4921
- display: flex;
4922
- align-items: center;
4923
- justify-content: center;
4924
- width: var(--amplify-components-fileuploader-file-image-width);
4925
- height: var(--amplify-components-fileuploader-file-image-height);
4926
- background-color: var(--amplify-components-fileuploader-file-image-background-color);
4927
- border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
4928
- color: var(--amplify-components-fileuploader-file-image-color);
4929
- }
4930
- .amplify-fileuploader__file__image img {
4931
- max-height: 100%;
4932
- }
4933
- .amplify-fileuploader__file__status--error {
4934
- color: var(--amplify-colors-font-error);
4935
- font-size: var(--amplify-components-fileuploader-file-size-font-size);
4936
- }
4937
- .amplify-fileuploader__file__status--success {
4938
- color: var(--amplify-colors-font-success);
4939
- }
4940
- .amplify-fileuploader__loader {
4941
- stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
4942
- stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
4943
- stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
4944
- height: var(--amplify-components-fileuploader-loader-stroke-width);
4945
- --amplify-components-loader-linear-stroke-filled: var(
4946
- --amplify-components-fileuploader-loader-stroke-filled
4947
- );
4948
- overflow: hidden;
4949
- position: absolute;
4950
- bottom: 0;
4951
- left: 0;
4952
- width: 100%;
4953
- }
4954
- .amplify-fileuploader__previewer {
4955
- display: block;
4956
- max-width: var(--amplify-components-fileuploader-previewer-max-width);
4957
- background-color: var(--amplify-components-fileuploader-previewer-background-color);
4958
- border-width: var(--amplify-components-fileuploader-previewer-border-width);
4959
- border-style: var(--amplify-components-fileuploader-previewer-border-style);
4960
- border-color: var(--amplify-components-fileuploader-previewer-border-color);
4961
- border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
4962
- padding-inline: var(--amplify-components-fileuploader-previewer-padding-inline);
4963
- padding-block: var(--amplify-components-fileuploader-previewer-padding-block);
4964
- }
4965
- .amplify-fileuploader__previewer__text {
4966
- font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
4967
- font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
4968
- color: var(--amplify-components-fileuploader-previewer-text-color);
4969
- }
4970
- .amplify-fileuploader__previewer__body {
4971
- display: flex;
4972
- flex-direction: column;
4973
- max-height: var(--amplify-components-fileuploader-previewer-max-height);
4974
- max-width: var(--amplify-components-fileuploader-previewer-max-width);
4975
- overflow: auto;
4976
- gap: var(--amplify-components-fileuploader-previewer-body-gap);
4977
- padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
4978
- padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
4979
- }
4980
- .amplify-fileuploader__previewer__footer {
4981
- max-width: var(--amplify-components-fileuploader-previewer-max-width);
4982
- border-top-width: var(--amplify-components-fileuploader-previewer-footer-border-width);
4983
- border-top-style: var(--amplify-components-fileuploader-previewer-footer-border-style);
4984
- border-top-color: var(--amplify-components-fileuploader-previewer-footer-border-color);
4985
- padding-inline: var(--amplify-components-fileuploader-previewer-footer-padding-inline);
4986
- padding-block: var(--amplify-components-fileuploader-previewer-footer-padding-block);
4987
- position: relative;
4988
- display: flex;
4989
- flex-direction: row;
4990
- justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
4991
- }
4992
- .amplify-fileuploader__previewer__footer__actions {
4993
- display: flex;
4994
- flex-direction: row;
4995
- gap: var(--amplify-space-small);
4996
- }
4997
-
4998
5975
  .amplify-storagemanager__dropzone {
4999
5976
  background-color: var(--amplify-components-storagemanager-dropzone-background-color);
5000
5977
  border-color: var(--amplify-components-storagemanager-dropzone-border-color);
@@ -5123,6 +6100,16 @@ html[dir=rtl] .amplify-field-group__inner-start {
5123
6100
  font-size: var(--amplify-components-storagemanager-previewer-text-font-size);
5124
6101
  color: var(--amplify-components-storagemanager-previewer-text-color);
5125
6102
  }
6103
+ .amplify-storagemanager__previewer__footer {
6104
+ display: flex;
6105
+ flex-direction: row;
6106
+ justify-content: var(--amplify-components-storagemanager-previewer-footer-justify-content);
6107
+ }
6108
+ .amplify-storagemanager__previewer__actions {
6109
+ display: flex;
6110
+ flex-direction: row;
6111
+ gap: var(--amplify-space-small);
6112
+ }
5126
6113
 
5127
6114
  [data-label-position=start] {
5128
6115
  flex-direction: row;