@aws-amplify/ui-react-storage 0.0.0-studio-console-80bb2e2-20230921222703 → 0.0.0-theming-v2-c5d1f72-20240709163904

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 (51) hide show
  1. package/dist/esm/components/StorageImage/StorageImage.mjs +57 -1
  2. package/dist/esm/components/StorageManager/StorageManager.mjs +181 -1
  3. package/dist/esm/components/StorageManager/hooks/useStorageManager/actions.mjs +35 -1
  4. package/dist/esm/components/StorageManager/hooks/useStorageManager/reducer.mjs +132 -1
  5. package/dist/esm/components/StorageManager/hooks/useStorageManager/types.mjs +12 -1
  6. package/dist/esm/components/StorageManager/hooks/useStorageManager/useStorageManager.mjs +58 -1
  7. package/dist/esm/components/StorageManager/hooks/useUploadFiles/useUploadFiles.mjs +74 -1
  8. package/dist/esm/components/StorageManager/types.mjs +11 -1
  9. package/dist/esm/components/StorageManager/ui/Container/Container.mjs +8 -1
  10. package/dist/esm/components/StorageManager/ui/DropZone/DropZone.mjs +16 -1
  11. package/dist/esm/components/StorageManager/ui/FileList/FileControl.mjs +23 -1
  12. package/dist/esm/components/StorageManager/ui/FileList/FileDetails.mjs +15 -1
  13. package/dist/esm/components/StorageManager/ui/FileList/FileList.mjs +44 -1
  14. package/dist/esm/components/StorageManager/ui/FileList/FileRemoveButton.mjs +12 -1
  15. package/dist/esm/components/StorageManager/ui/FileList/FileStatusMessage.mjs +28 -1
  16. package/dist/esm/components/StorageManager/ui/FileList/FileThumbnail.mjs +12 -1
  17. package/dist/esm/components/StorageManager/ui/FileListFooter/FileListFooter.mjs +13 -1
  18. package/dist/esm/components/StorageManager/ui/FileListHeader/FileListHeader.mjs +14 -1
  19. package/dist/esm/components/StorageManager/ui/FilePicker/FilePicker.mjs +9 -1
  20. package/dist/esm/components/StorageManager/utils/checkMaxFileSize.mjs +12 -1
  21. package/dist/esm/components/StorageManager/utils/displayText.mjs +39 -1
  22. package/dist/esm/components/StorageManager/utils/filterAllowedFiles.mjs +27 -1
  23. package/dist/esm/components/StorageManager/utils/getInput.mjs +25 -0
  24. package/dist/esm/components/StorageManager/utils/humanFileSize.mjs +29 -1
  25. package/dist/esm/components/StorageManager/utils/resolveFile.mjs +20 -0
  26. package/dist/esm/components/StorageManager/utils/uploadFile.mjs +26 -1
  27. package/dist/esm/index.mjs +2 -1
  28. package/dist/esm/version.mjs +3 -0
  29. package/dist/index.js +832 -1
  30. package/dist/styles.css +462 -370
  31. package/dist/types/components/StorageImage/StorageImage.d.ts +6 -2
  32. package/dist/types/components/StorageImage/types.d.ts +33 -2
  33. package/dist/types/components/StorageManager/StorageManager.d.ts +5 -2
  34. package/dist/types/components/StorageManager/hooks/useStorageManager/actions.d.ts +2 -5
  35. package/dist/types/components/StorageManager/hooks/useStorageManager/types.d.ts +1 -1
  36. package/dist/types/components/StorageManager/hooks/useStorageManager/useStorageManager.d.ts +2 -5
  37. package/dist/types/components/StorageManager/hooks/useUploadFiles/useUploadFiles.d.ts +5 -2
  38. package/dist/types/components/StorageManager/types.d.ts +17 -11
  39. package/dist/types/components/StorageManager/ui/FileList/types.d.ts +7 -17
  40. package/dist/types/components/StorageManager/ui/FileListFooter/FileListFooter.d.ts +2 -2
  41. package/dist/types/components/StorageManager/ui/FileListHeader/FileListHeader.d.ts +2 -2
  42. package/dist/types/components/StorageManager/utils/displayText.d.ts +22 -20
  43. package/dist/types/components/StorageManager/utils/getInput.d.ts +13 -0
  44. package/dist/types/components/StorageManager/utils/index.d.ts +3 -2
  45. package/dist/types/components/StorageManager/utils/resolveFile.d.ts +9 -0
  46. package/dist/types/components/StorageManager/utils/uploadFile.d.ts +30 -17
  47. package/dist/types/version.d.ts +1 -0
  48. package/package.json +9 -40
  49. package/dist/esm/components/StorageManager/hooks/useUploadFiles/resolveFile.mjs +0 -1
  50. package/dist/types/components/StorageImage/_tests_/StorageImage.test.d.ts +0 -1
  51. package/dist/types/components/StorageManager/hooks/useUploadFiles/resolveFile.d.ts +0 -10
package/dist/styles.css CHANGED
@@ -2,6 +2,29 @@
2
2
  * Amplify UI Basic Theme
3
3
  */
4
4
  :root, [data-amplify-theme] {
5
+ --amplify-components-accordion-background-color: var(--amplify-colors-background-primary);
6
+ --amplify-components-accordion-item-border-color: var(--amplify-colors-border-secondary);
7
+ --amplify-components-accordion-item-border-width: var(--amplify-border-widths-small);
8
+ --amplify-components-accordion-item-border-style: solid;
9
+ --amplify-components-accordion-item-border-radius: var(--amplify-radii-small);
10
+ --amplify-components-accordion-item-trigger-align-items: center;
11
+ --amplify-components-accordion-item-trigger-background-color: var(--amplify-colors-background-primary);
12
+ --amplify-components-accordion-item-trigger-color: inherit;
13
+ --amplify-components-accordion-item-trigger-gap: var(--amplify-space-small);
14
+ --amplify-components-accordion-item-trigger-justify-content: space-between;
15
+ --amplify-components-accordion-item-trigger-padding-block: var(--amplify-space-xs);
16
+ --amplify-components-accordion-item-trigger-padding-inline: var(--amplify-space-small);
17
+ --amplify-components-accordion-item-trigger-hover-color: inherit;
18
+ --amplify-components-accordion-item-trigger-hover-background-color: var(--amplify-colors-overlay-5);
19
+ --amplify-components-accordion-item-trigger-focus-border-color: var(--amplify-colors-border-focus);
20
+ --amplify-components-accordion-item-trigger-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
21
+ --amplify-components-accordion-item-content-color: inherit;
22
+ --amplify-components-accordion-item-content-padding-inline: var(--amplify-space-small);
23
+ --amplify-components-accordion-item-content-padding-block-end: var(--amplify-space-small);
24
+ --amplify-components-accordion-item-content-padding-block-start: var(--amplify-space-xxxs);
25
+ --amplify-components-accordion-item-icon-color: var(--amplify-colors-font-tertiary);
26
+ --amplify-components-accordion-item-icon-transition-duration: var(--amplify-time-medium);
27
+ --amplify-components-accordion-item-icon-transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
5
28
  --amplify-components-alert-align-items: center;
6
29
  --amplify-components-alert-justify-content: space-between;
7
30
  --amplify-components-alert-color: var(--amplify-colors-font-primary);
@@ -52,7 +75,7 @@
52
75
  --amplify-components-autocomplete-menu-option-transition-duration: var(--amplify-time-short);
53
76
  --amplify-components-autocomplete-menu-option-transition-property: background-color, color;
54
77
  --amplify-components-autocomplete-menu-option-transition-timing-function: ease;
55
- --amplify-components-autocomplete-menu-option-active-background-color: var(--amplify-colors-brand-primary-80);
78
+ --amplify-components-autocomplete-menu-option-active-background-color: var(--amplify-colors-primary-80);
56
79
  --amplify-components-autocomplete-menu-option-active-color: var(--amplify-colors-white);
57
80
  --amplify-components-autocomplete-menu-empty-display: flex;
58
81
  --amplify-components-autocomplete-menu-loading-align-items: center;
@@ -120,15 +143,15 @@
120
143
  --amplify-components-button-border-radius: var(--amplify-components-fieldcontrol-border-radius);
121
144
  --amplify-components-button-color: var(--amplify-colors-font-primary);
122
145
  --amplify-components-button-hover-color: var(--amplify-colors-font-focus);
123
- --amplify-components-button-hover-background-color: var(--amplify-colors-brand-primary-10);
124
- --amplify-components-button-hover-border-color: var(--amplify-colors-brand-primary-60);
146
+ --amplify-components-button-hover-background-color: var(--amplify-colors-primary-10);
147
+ --amplify-components-button-hover-border-color: var(--amplify-colors-primary-60);
125
148
  --amplify-components-button-focus-color: var(--amplify-colors-font-focus);
126
- --amplify-components-button-focus-background-color: var(--amplify-colors-brand-primary-10);
149
+ --amplify-components-button-focus-background-color: var(--amplify-colors-primary-10);
127
150
  --amplify-components-button-focus-border-color: var(--amplify-colors-border-focus);
128
151
  --amplify-components-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
129
152
  --amplify-components-button-active-color: var(--amplify-colors-font-active);
130
- --amplify-components-button-active-background-color: var(--amplify-colors-brand-primary-20);
131
- --amplify-components-button-active-border-color: var(--amplify-colors-brand-primary-100);
153
+ --amplify-components-button-active-background-color: var(--amplify-colors-primary-20);
154
+ --amplify-components-button-active-border-color: var(--amplify-colors-primary-100);
132
155
  --amplify-components-button-loading-color: var(--amplify-colors-font-disabled);
133
156
  --amplify-components-button-loading-background-color: transparent;
134
157
  --amplify-components-button-loading-border-color: var(--amplify-colors-border-tertiary);
@@ -144,7 +167,7 @@
144
167
  --amplify-components-button-outlined-info-focus-border-color: var(--amplify-colors-blue-100);
145
168
  --amplify-components-button-outlined-info-focus-background-color: var(--amplify-colors-blue-10);
146
169
  --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);
170
+ --amplify-components-button-outlined-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
148
171
  --amplify-components-button-outlined-info-active-border-color: var(--amplify-colors-blue-100);
149
172
  --amplify-components-button-outlined-info-active-background-color: var(--amplify-colors-blue-20);
150
173
  --amplify-components-button-outlined-info-active-color: var(--amplify-colors-blue-100);
@@ -157,7 +180,7 @@
157
180
  --amplify-components-button-outlined-warning-focus-border-color: var(--amplify-colors-orange-100);
158
181
  --amplify-components-button-outlined-warning-focus-background-color: var(--amplify-colors-orange-10);
159
182
  --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);
183
+ --amplify-components-button-outlined-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow);
161
184
  --amplify-components-button-outlined-warning-active-border-color: var(--amplify-colors-orange-100);
162
185
  --amplify-components-button-outlined-warning-active-background-color: var(--amplify-colors-orange-20);
163
186
  --amplify-components-button-outlined-warning-active-color: var(--amplify-colors-orange-100);
@@ -170,20 +193,20 @@
170
193
  --amplify-components-button-outlined-success-focus-border-color: var(--amplify-colors-green-100);
171
194
  --amplify-components-button-outlined-success-focus-background-color: var(--amplify-colors-green-10);
172
195
  --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);
196
+ --amplify-components-button-outlined-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
174
197
  --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100);
175
198
  --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20);
176
199
  --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);
200
+ --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-80);
178
201
  --amplify-components-button-outlined-error-background-color: transparent;
179
202
  --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);
203
+ --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-80);
181
204
  --amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10);
182
205
  --amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100);
183
206
  --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100);
184
207
  --amplify-components-button-outlined-error-focus-background-color: var(--amplify-colors-red-10);
185
208
  --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);
209
+ --amplify-components-button-outlined-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
187
210
  --amplify-components-button-outlined-error-active-border-color: var(--amplify-colors-red-100);
188
211
  --amplify-components-button-outlined-error-active-background-color: var(--amplify-colors-red-20);
189
212
  --amplify-components-button-outlined-error-active-color: var(--amplify-colors-red-100);
@@ -196,14 +219,14 @@
196
219
  --amplify-components-button-outlined-overlay-focus-border-color: var(--amplify-colors-overlay-90);
197
220
  --amplify-components-button-outlined-overlay-focus-background-color: var(--amplify-colors-overlay-5);
198
221
  --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);
222
+ --amplify-components-button-outlined-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
200
223
  --amplify-components-button-outlined-overlay-active-border-color: var(--amplify-colors-overlay-90);
201
224
  --amplify-components-button-outlined-overlay-active-background-color: var(--amplify-colors-overlay-10);
202
225
  --amplify-components-button-outlined-overlay-active-color: var(--amplify-colors-neutral-100);
203
226
  --amplify-components-button-primary-border-color: transparent;
204
227
  --amplify-components-button-primary-border-width: var(--amplify-border-widths-small);
205
228
  --amplify-components-button-primary-border-style: solid;
206
- --amplify-components-button-primary-background-color: var(--amplify-colors-brand-primary-80);
229
+ --amplify-components-button-primary-background-color: var(--amplify-colors-primary-80);
207
230
  --amplify-components-button-primary-color: var(--amplify-colors-font-inverse);
208
231
  --amplify-components-button-primary-disabled-border-color: transparent;
209
232
  --amplify-components-button-primary-disabled-background-color: var(--amplify-colors-background-disabled);
@@ -212,14 +235,14 @@
212
235
  --amplify-components-button-primary-loading-background-color: var(--amplify-colors-background-disabled);
213
236
  --amplify-components-button-primary-loading-color: var(--amplify-colors-font-disabled);
214
237
  --amplify-components-button-primary-hover-border-color: transparent;
215
- --amplify-components-button-primary-hover-background-color: var(--amplify-colors-brand-primary-90);
238
+ --amplify-components-button-primary-hover-background-color: var(--amplify-colors-primary-90);
216
239
  --amplify-components-button-primary-hover-color: var(--amplify-colors-font-inverse);
217
240
  --amplify-components-button-primary-focus-border-color: transparent;
218
- --amplify-components-button-primary-focus-background-color: var(--amplify-colors-brand-primary-90);
241
+ --amplify-components-button-primary-focus-background-color: var(--amplify-colors-primary-90);
219
242
  --amplify-components-button-primary-focus-color: var(--amplify-colors-font-inverse);
220
243
  --amplify-components-button-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
221
244
  --amplify-components-button-primary-active-border-color: transparent;
222
- --amplify-components-button-primary-active-background-color: var(--amplify-colors-brand-primary-100);
245
+ --amplify-components-button-primary-active-background-color: var(--amplify-colors-primary-100);
223
246
  --amplify-components-button-primary-active-color: var(--amplify-colors-font-inverse);
224
247
  --amplify-components-button-primary-info-border-color: transparent;
225
248
  --amplify-components-button-primary-info-background-color: var(--amplify-colors-blue-80);
@@ -230,7 +253,7 @@
230
253
  --amplify-components-button-primary-info-focus-border-color: transparent;
231
254
  --amplify-components-button-primary-info-focus-background-color: var(--amplify-colors-blue-90);
232
255
  --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);
256
+ --amplify-components-button-primary-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
234
257
  --amplify-components-button-primary-info-active-border-color: transparent;
235
258
  --amplify-components-button-primary-info-active-background-color: var(--amplify-colors-blue-100);
236
259
  --amplify-components-button-primary-info-active-color: var(--amplify-colors-font-inverse);
@@ -243,7 +266,7 @@
243
266
  --amplify-components-button-primary-warning-focus-border-color: transparent;
244
267
  --amplify-components-button-primary-warning-focus-background-color: var(--amplify-colors-orange-90);
245
268
  --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);
269
+ --amplify-components-button-primary-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
247
270
  --amplify-components-button-primary-warning-active-border-color: transparent;
248
271
  --amplify-components-button-primary-warning-active-background-color: var(--amplify-colors-orange-100);
249
272
  --amplify-components-button-primary-warning-active-color: var(--amplify-colors-font-inverse);
@@ -256,7 +279,7 @@
256
279
  --amplify-components-button-primary-error-focus-border-color: transparent;
257
280
  --amplify-components-button-primary-error-focus-background-color: var(--amplify-colors-red-90);
258
281
  --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);
282
+ --amplify-components-button-primary-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
260
283
  --amplify-components-button-primary-error-active-border-color: transparent;
261
284
  --amplify-components-button-primary-error-active-background-color: var(--amplify-colors-red-100);
262
285
  --amplify-components-button-primary-error-active-color: var(--amplify-colors-font-inverse);
@@ -269,7 +292,7 @@
269
292
  --amplify-components-button-primary-success-focus-border-color: transparent;
270
293
  --amplify-components-button-primary-success-focus-background-color: var(--amplify-colors-green-90);
271
294
  --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);
295
+ --amplify-components-button-primary-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
273
296
  --amplify-components-button-primary-success-active-border-color: transparent;
274
297
  --amplify-components-button-primary-success-active-background-color: var(--amplify-colors-green-100);
275
298
  --amplify-components-button-primary-success-active-color: var(--amplify-colors-font-inverse);
@@ -282,7 +305,7 @@
282
305
  --amplify-components-button-primary-overlay-focus-border-color: transparent;
283
306
  --amplify-components-button-primary-overlay-focus-background-color: var(--amplify-colors-overlay-90);
284
307
  --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);
308
+ --amplify-components-button-primary-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
286
309
  --amplify-components-button-primary-overlay-active-border-color: transparent;
287
310
  --amplify-components-button-primary-overlay-active-background-color: var(--amplify-colors-overlay-90);
288
311
  --amplify-components-button-primary-overlay-active-color: var(--amplify-colors-font-inverse);
@@ -290,25 +313,25 @@
290
313
  --amplify-components-button-menu-background-color: transparent;
291
314
  --amplify-components-button-menu-justify-content: start;
292
315
  --amplify-components-button-menu-hover-color: var(--amplify-colors-font-inverse);
293
- --amplify-components-button-menu-hover-background-color: var(--amplify-colors-brand-primary-80);
316
+ --amplify-components-button-menu-hover-background-color: var(--amplify-colors-primary-80);
294
317
  --amplify-components-button-menu-focus-color: var(--amplify-colors-font-inverse);
295
- --amplify-components-button-menu-focus-background-color: var(--amplify-colors-brand-primary-80);
318
+ --amplify-components-button-menu-focus-background-color: var(--amplify-colors-primary-80);
296
319
  --amplify-components-button-menu-active-color: var(--amplify-colors-font-inverse);
297
- --amplify-components-button-menu-active-background-color: var(--amplify-colors-brand-primary-90);
320
+ --amplify-components-button-menu-active-background-color: var(--amplify-colors-primary-90);
298
321
  --amplify-components-button-menu-disabled-color: var(--amplify-colors-font-disabled);
299
322
  --amplify-components-button-link-background-color: transparent;
300
323
  --amplify-components-button-link-border-color: transparent;
301
324
  --amplify-components-button-link-border-width: var(--amplify-border-widths-small);
302
325
  --amplify-components-button-link-color: var(--amplify-colors-font-interactive);
303
326
  --amplify-components-button-link-hover-border-color: transparent;
304
- --amplify-components-button-link-hover-background-color: var(--amplify-colors-brand-primary-10);
327
+ --amplify-components-button-link-hover-background-color: var(--amplify-colors-primary-10);
305
328
  --amplify-components-button-link-hover-color: var(--amplify-colors-font-hover);
306
329
  --amplify-components-button-link-focus-border-color: transparent;
307
- --amplify-components-button-link-focus-background-color: var(--amplify-colors-brand-primary-10);
330
+ --amplify-components-button-link-focus-background-color: var(--amplify-colors-primary-10);
308
331
  --amplify-components-button-link-focus-color: var(--amplify-colors-font-focus);
309
332
  --amplify-components-button-link-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
310
333
  --amplify-components-button-link-active-border-color: transparent;
311
- --amplify-components-button-link-active-background-color: var(--amplify-colors-brand-primary-20);
334
+ --amplify-components-button-link-active-background-color: var(--amplify-colors-primary-20);
312
335
  --amplify-components-button-link-active-color: var(--amplify-colors-font-active);
313
336
  --amplify-components-button-link-disabled-border-color: transparent;
314
337
  --amplify-components-button-link-disabled-background-color: transparent;
@@ -325,7 +348,7 @@
325
348
  --amplify-components-button-link-info-focus-border-color: transparent;
326
349
  --amplify-components-button-link-info-focus-background-color: var(--amplify-colors-blue-10);
327
350
  --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);
351
+ --amplify-components-button-link-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
329
352
  --amplify-components-button-link-info-active-border-color: transparent;
330
353
  --amplify-components-button-link-info-active-background-color: var(--amplify-colors-blue-20);
331
354
  --amplify-components-button-link-info-active-color: var(--amplify-colors-blue-100);
@@ -338,7 +361,7 @@
338
361
  --amplify-components-button-link-warning-focus-border-color: transparent;
339
362
  --amplify-components-button-link-warning-focus-background-color: var(--amplify-colors-orange-10);
340
363
  --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);
364
+ --amplify-components-button-link-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow);
342
365
  --amplify-components-button-link-warning-active-border-color: transparent;
343
366
  --amplify-components-button-link-warning-active-background-color: var(--amplify-colors-orange-20);
344
367
  --amplify-components-button-link-warning-active-color: var(--amplify-colors-orange-100);
@@ -351,7 +374,7 @@
351
374
  --amplify-components-button-link-success-focus-border-color: transparent;
352
375
  --amplify-components-button-link-success-focus-background-color: var(--amplify-colors-green-10);
353
376
  --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);
377
+ --amplify-components-button-link-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
355
378
  --amplify-components-button-link-success-active-border-color: transparent;
356
379
  --amplify-components-button-link-success-active-background-color: var(--amplify-colors-green-20);
357
380
  --amplify-components-button-link-success-active-color: var(--amplify-colors-green-100);
@@ -364,7 +387,7 @@
364
387
  --amplify-components-button-link-error-focus-border-color: transparent;
365
388
  --amplify-components-button-link-error-focus-background-color: var(--amplify-colors-red-10);
366
389
  --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);
390
+ --amplify-components-button-link-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
368
391
  --amplify-components-button-link-error-active-border-color: transparent;
369
392
  --amplify-components-button-link-error-active-background-color: var(--amplify-colors-red-20);
370
393
  --amplify-components-button-link-error-active-color: var(--amplify-colors-red-100);
@@ -377,7 +400,7 @@
377
400
  --amplify-components-button-link-overlay-focus-border-color: transparent;
378
401
  --amplify-components-button-link-overlay-focus-background-color: var(--amplify-colors-overlay-5);
379
402
  --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);
403
+ --amplify-components-button-link-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
381
404
  --amplify-components-button-link-overlay-active-border-color: transparent;
382
405
  --amplify-components-button-link-overlay-active-background-color: var(--amplify-colors-overlay-10);
383
406
  --amplify-components-button-link-overlay-active-color: var(--amplify-colors-overlay-90);
@@ -470,13 +493,13 @@
470
493
  --amplify-components-checkbox-button-focus-outline-style: solid;
471
494
  --amplify-components-checkbox-button-focus-outline-width: var(--amplify-outline-widths-medium);
472
495
  --amplify-components-checkbox-button-focus-outline-offset: var(--amplify-outline-offsets-medium);
473
- --amplify-components-checkbox-button-focus-border-color: var(--amplify-colors-transparent);
474
- --amplify-components-checkbox-button-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
496
+ --amplify-components-checkbox-button-focus-border-color: var(--amplify-colors-border-focus);
497
+ --amplify-components-checkbox-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
475
498
  --amplify-components-checkbox-button-disabled-border-color: var(--amplify-colors-border-disabled);
476
499
  --amplify-components-checkbox-button-error-border-color: var(--amplify-colors-border-error);
477
- --amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-transparent);
478
- --amplify-components-checkbox-button-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error);
479
- --amplify-components-checkbox-icon-background-color: var(--amplify-colors-brand-primary-80);
500
+ --amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-border-error);
501
+ --amplify-components-checkbox-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
502
+ --amplify-components-checkbox-icon-background-color: var(--amplify-colors-primary-80);
480
503
  --amplify-components-checkbox-icon-border-radius: 20%;
481
504
  --amplify-components-checkbox-icon-opacity: var(--amplify-opacities-0);
482
505
  --amplify-components-checkbox-icon-transform: scale(0);
@@ -489,6 +512,7 @@
489
512
  --amplify-components-checkbox-icon-indeterminate-opacity: var(--amplify-opacities-100);
490
513
  --amplify-components-checkbox-icon-indeterminate-transform: scale(1);
491
514
  --amplify-components-checkbox-icon-indeterminate-disabled-background-color: var(--amplify-colors-background-disabled);
515
+ --amplify-components-checkbox-label-color: var(--amplify-components-text-color);
492
516
  --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled);
493
517
  --amplify-components-checkboxfield-align-items: flex-start;
494
518
  --amplify-components-checkboxfield-align-content: center;
@@ -541,7 +565,7 @@
541
565
  --amplify-components-dropzone-padding-block: var(--amplify-space-xl);
542
566
  --amplify-components-dropzone-padding-inline: var(--amplify-space-large);
543
567
  --amplify-components-dropzone-text-align: center;
544
- --amplify-components-dropzone-active-background-color: var(--amplify-colors-brand-primary-10);
568
+ --amplify-components-dropzone-active-background-color: var(--amplify-colors-primary-10);
545
569
  --amplify-components-dropzone-active-border-radius: var(--amplify-components-dropzone-border-radius);
546
570
  --amplify-components-dropzone-active-border-color: var(--amplify-colors-border-pressed);
547
571
  --amplify-components-dropzone-active-border-style: var(--amplify-components-dropzone-border-style);
@@ -565,40 +589,6 @@
565
589
  --amplify-components-dropzone-rejected-border-style: var(--amplify-components-dropzone-border-style);
566
590
  --amplify-components-dropzone-rejected-border-width: var(--amplify-components-dropzone-border-width);
567
591
  --amplify-components-dropzone-rejected-color: var(--amplify-colors-font-error);
568
- --amplify-components-expander-display: block;
569
- --amplify-components-expander-background-color: var(--amplify-colors-background-primary);
570
- --amplify-components-expander-border-radius: var(--amplify-radii-medium);
571
- --amplify-components-expander-box-shadow: var(--amplify-shadows-large);
572
- --amplify-components-expander-width: 100%;
573
- --amplify-components-expander-item-margin-top: 1px;
574
- --amplify-components-expander-item-box-shadow: var(--amplify-shadows-small);
575
- --amplify-components-expander-item-border-bottom-left-radius: var(--amplify-radii-medium);
576
- --amplify-components-expander-item-border-bottom-right-radius: var(--amplify-radii-medium);
577
- --amplify-components-expander-item-border-top-left-radius: var(--amplify-radii-medium);
578
- --amplify-components-expander-item-border-top-right-radius: var(--amplify-radii-medium);
579
- --amplify-components-expander-item-border-start-start-radius: var(--amplify-radii-medium);
580
- --amplify-components-expander-item-border-start-end-radius: var(--amplify-radii-medium);
581
- --amplify-components-expander-item-border-end-start-radius: var(--amplify-radii-medium);
582
- --amplify-components-expander-item-border-end-end-radius: var(--amplify-radii-medium);
583
- --amplify-components-expander-item-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
584
- --amplify-components-expander-header-box-shadow: 0 1px 0 var(--amplify-colors-overlay-20);
585
- --amplify-components-expander-trigger-min-height: 3rem;
586
- --amplify-components-expander-trigger-padding-inline-start: var(--amplify-space-large);
587
- --amplify-components-expander-trigger-padding-inline-end: var(--amplify-space-large);
588
- --amplify-components-expander-trigger-align-items: center;
589
- --amplify-components-expander-trigger-justify-content: space-between;
590
- --amplify-components-expander-trigger-hover-background-color: var(--amplify-colors-overlay-10);
591
- --amplify-components-expander-content-padding-inline-start: var(--amplify-space-large);
592
- --amplify-components-expander-content-padding-inline-end: var(--amplify-space-large);
593
- --amplify-components-expander-content-text-color: var(--amplify-colors-font-secondary);
594
- --amplify-components-expander-content-text-padding-block-start: var(--amplify-space-medium);
595
- --amplify-components-expander-content-text-padding-block-end: var(--amplify-space-medium);
596
- --amplify-components-expander-content-open-animation-duration: var(--amplify-time-medium);
597
- --amplify-components-expander-content-open-animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
598
- --amplify-components-expander-content-closed-animation-duration: var(--amplify-time-medium);
599
- --amplify-components-expander-content-closed-animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
600
- --amplify-components-expander-icon-transition-duration: var(--amplify-time-medium);
601
- --amplify-components-expander-icon-transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
602
592
  --amplify-components-field-gap: var(--amplify-space-xs);
603
593
  --amplify-components-field-font-size: var(--amplify-font-sizes-medium);
604
594
  --amplify-components-field-flex-direction: column;
@@ -638,19 +628,24 @@
638
628
  --amplify-components-fieldcontrol-quiet-border-inline-end: none;
639
629
  --amplify-components-fieldcontrol-quiet-border-block-start: none;
640
630
  --amplify-components-fieldcontrol-quiet-border-radius: 0;
641
- --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: var(--amplify-colors-border-focus);
642
- --amplify-components-fieldcontrol-quiet-focus-box-shadow: 0px 1px 0px var(--amplify-colors-border-focus);
631
+ --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: transparent;
632
+ --amplify-components-fieldcontrol-quiet-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
643
633
  --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-border-error);
644
- --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: 0px 1px 0px var(--amplify-colors-border-error);
634
+ --amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color: transparent;
635
+ --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
645
636
  --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-border-focus);
646
- --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-focus);
637
+ --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
647
638
  --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled);
648
639
  --amplify-components-fieldcontrol-disabled-cursor: not-allowed;
649
640
  --amplify-components-fieldcontrol-disabled-border-color: var(--amplify-colors-transparent);
650
641
  --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled);
651
642
  --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error);
652
643
  --amplify-components-fieldcontrol-error-color: var(--amplify-colors-font-error);
653
- --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-error);
644
+ --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error);
645
+ --amplify-components-fieldcontrol-info-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-blue-100);
646
+ --amplify-components-fieldcontrol-warning-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-orange-100);
647
+ --amplify-components-fieldcontrol-success-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-green-100);
648
+ --amplify-components-fieldcontrol-overlay-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-overlay-90);
654
649
  --amplify-components-fieldgroup-gap: var(--amplify-space-zero);
655
650
  --amplify-components-fieldgroup-vertical-align-items: center;
656
651
  --amplify-components-fieldgroup-outer-align-items: center;
@@ -723,12 +718,12 @@
723
718
  --amplify-components-link-focus-color: var(--amplify-colors-font-focus);
724
719
  --amplify-components-link-hover-color: var(--amplify-colors-font-hover);
725
720
  --amplify-components-link-visited-color: var(--amplify-colors-font-interactive);
726
- --amplify-components-liveness-camera-module-background-color: var(--amplify-colors-black);
721
+ --amplify-components-liveness-camera-module-background-color: var(--amplify-colors-background-primary);
727
722
  --amplify-components-loader-width: var(--amplify-font-sizes-medium);
728
723
  --amplify-components-loader-height: var(--amplify-font-sizes-medium);
729
724
  --amplify-components-loader-font-size: var(--amplify-font-sizes-xs);
730
725
  --amplify-components-loader-stroke-empty: var(--amplify-colors-neutral-20);
731
- --amplify-components-loader-stroke-filled: var(--amplify-colors-brand-primary-80);
726
+ --amplify-components-loader-stroke-filled: var(--amplify-colors-primary-80);
732
727
  --amplify-components-loader-stroke-linecap: round;
733
728
  --amplify-components-loader-animation-duration: 1s;
734
729
  --amplify-components-loader-small-width: var(--amplify-font-sizes-small);
@@ -741,7 +736,7 @@
741
736
  --amplify-components-loader-linear-min-width: 5rem;
742
737
  --amplify-components-loader-linear-font-size: var(--amplify-font-sizes-xxs);
743
738
  --amplify-components-loader-linear-stroke-width: var(--amplify-font-sizes-xxs);
744
- --amplify-components-loader-linear-stroke-filled: var(--amplify-colors-brand-primary-80);
739
+ --amplify-components-loader-linear-stroke-filled: var(--amplify-colors-primary-80);
745
740
  --amplify-components-loader-linear-stroke-empty: var(--amplify-colors-neutral-20);
746
741
  --amplify-components-loader-linear-stroke-linecap: round;
747
742
  --amplify-components-loader-linear-animation-duration: 1s;
@@ -857,6 +852,19 @@
857
852
  --amplify-components-passwordfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
858
853
  --amplify-components-passwordfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color);
859
854
  --amplify-components-passwordfield-button-disabled-color: var(--amplify-components-button-disabled-color);
855
+ --amplify-components-passwordfield-button-error-color: var(--amplify-components-button-outlined-error-color);
856
+ --amplify-components-passwordfield-button-error-background-color: var(--amplify-components-button-outlined-error-background-color);
857
+ --amplify-components-passwordfield-button-error-border-color: var(--amplify-components-button-outlined-error-border-color);
858
+ --amplify-components-passwordfield-button-error-active-border-color: var(--amplify-components-button-outlined-error-active-border-color);
859
+ --amplify-components-passwordfield-button-error-active-background-color: var(--amplify-components-button-outlined-error-active-background-color);
860
+ --amplify-components-passwordfield-button-error-active-color: var(--amplify-components-button-outlined-error-active-color);
861
+ --amplify-components-passwordfield-button-error-focus-border-color: var(--amplify-components-button-outlined-error-focus-border-color);
862
+ --amplify-components-passwordfield-button-error-focus-background-color: var(--amplify-components-button-outlined-error-focus-background-color);
863
+ --amplify-components-passwordfield-button-error-focus-color: var(--amplify-components-button-outlined-error-focus-color);
864
+ --amplify-components-passwordfield-button-error-focus-box-shadow: var(--amplify-components-button-outlined-error-focus-box-shadow);
865
+ --amplify-components-passwordfield-button-error-hover-border-color: var(--amplify-components-button-outlined-error-hover-border-color);
866
+ --amplify-components-passwordfield-button-error-hover-background-color: var(--amplify-components-button-outlined-error-hover-background-color);
867
+ --amplify-components-passwordfield-button-error-hover-color: var(--amplify-components-button-outlined-error-hover-color);
860
868
  --amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
861
869
  --amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
862
870
  --amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color);
@@ -900,7 +908,7 @@
900
908
  --amplify-components-radio-button-small-height: var(--amplify-font-sizes-small);
901
909
  --amplify-components-radio-button-large-width: var(--amplify-font-sizes-large);
902
910
  --amplify-components-radio-button-large-height: var(--amplify-font-sizes-large);
903
- --amplify-components-radio-button-checked-color: var(--amplify-colors-brand-primary-80);
911
+ --amplify-components-radio-button-checked-color: var(--amplify-colors-primary-80);
904
912
  --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled);
905
913
  --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus);
906
914
  --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
@@ -915,11 +923,12 @@
915
923
  --amplify-components-radiogroup-radio-background-color: var(--amplify-components-radio-button-background-color);
916
924
  --amplify-components-radiogroup-radio-checked-color: var(--amplify-components-radio-button-checked-color);
917
925
  --amplify-components-radiogroup-radio-label-color: var(--amplify-components-radio-label-color);
918
- --amplify-components-radiogroup-label-color: var(--amplify-components-field-label-color);
926
+ --amplify-components-radiogroup-legend-color: var(--amplify-components-fieldset-legend-color);
927
+ --amplify-components-radiogroup-legend-font-weight: var(--amplify-font-weights-normal);
919
928
  --amplify-components-rating-large-size: var(--amplify-font-sizes-xxxl);
920
929
  --amplify-components-rating-default-size: var(--amplify-font-sizes-xl);
921
930
  --amplify-components-rating-small-size: var(--amplify-font-sizes-small);
922
- --amplify-components-rating-filled-color: var(--amplify-colors-brand-secondary-80);
931
+ --amplify-components-rating-filled-color: var(--amplify-colors-secondary-80);
923
932
  --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary);
924
933
  --amplify-components-searchfield-color: var(--amplify-components-fieldcontrol-color);
925
934
  --amplify-components-searchfield-button-color: var(--amplify-components-button-color);
@@ -978,7 +987,7 @@
978
987
  --amplify-components-sliderfield-track-border-radius: 9999px;
979
988
  --amplify-components-sliderfield-track-height: 0.375rem;
980
989
  --amplify-components-sliderfield-track-min-width: 10rem;
981
- --amplify-components-sliderfield-range-background-color: var(--amplify-colors-brand-primary-80);
990
+ --amplify-components-sliderfield-range-background-color: var(--amplify-colors-primary-80);
982
991
  --amplify-components-sliderfield-range-border-radius: 9999px;
983
992
  --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled);
984
993
  --amplify-components-sliderfield-thumb-width: 1.25rem;
@@ -995,7 +1004,7 @@
995
1004
  --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary);
996
1005
  --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
997
1006
  --amplify-components-sliderfield-thumb-focus-border-color: var(--amplify-colors-border-focus);
998
- --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
1007
+ --amplify-components-sliderfield-thumb-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
999
1008
  --amplify-components-sliderfield-small-track-height: 0.25rem;
1000
1009
  --amplify-components-sliderfield-small-thumb-width: 1rem;
1001
1010
  --amplify-components-sliderfield-small-thumb-height: 1rem;
@@ -1026,7 +1035,7 @@
1026
1035
  --amplify-components-storagemanager-dropzone-padding-block: var(--amplify-space-xl);
1027
1036
  --amplify-components-storagemanager-dropzone-padding-inline: var(--amplify-space-large);
1028
1037
  --amplify-components-storagemanager-dropzone-text-align: center;
1029
- --amplify-components-storagemanager-dropzone-active-background-color: var(--amplify-colors-brand-primary-10);
1038
+ --amplify-components-storagemanager-dropzone-active-background-color: var(--amplify-colors-primary-10);
1030
1039
  --amplify-components-storagemanager-dropzone-active-border-radius: var(--amplify-components-storagemanager-dropzone-border-radius);
1031
1040
  --amplify-components-storagemanager-dropzone-active-border-color: var(--amplify-colors-border-pressed);
1032
1041
  --amplify-components-storagemanager-dropzone-active-border-style: var(--amplify-components-storagemanager-dropzone-border-style);
@@ -1079,7 +1088,7 @@
1079
1088
  --amplify-components-storagemanager-previewer-body-gap: var(--amplify-space-small);
1080
1089
  --amplify-components-storagemanager-previewer-footer-justify-content: flex-end;
1081
1090
  --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
1082
- --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
1091
+ --amplify-components-switchfield-focused-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
1083
1092
  --amplify-components-switchfield-font-size: var(--amplify-font-sizes-medium);
1084
1093
  --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
1085
1094
  --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
@@ -1094,7 +1103,7 @@
1094
1103
  --amplify-components-switchfield-thumb-width: var(--amplify-space-relative-medium);
1095
1104
  --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-quaternary);
1096
1105
  --amplify-components-switchfield-track-border-radius: var(--amplify-radii-xxxl);
1097
- --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-brand-primary-80);
1106
+ --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-primary-80);
1098
1107
  --amplify-components-switchfield-track-height: var(--amplify-space-relative-medium);
1099
1108
  --amplify-components-switchfield-track-padding: var(--amplify-outline-widths-medium);
1100
1109
  --amplify-components-switchfield-track-transition-duration: var(--amplify-time-short);
@@ -1163,14 +1172,25 @@
1163
1172
  --amplify-components-tabs-item-padding-horizontal: var(--amplify-space-medium);
1164
1173
  --amplify-components-tabs-item-text-align: center;
1165
1174
  --amplify-components-tabs-item-transition-duration: var(--amplify-time-medium);
1175
+ --amplify-components-tabs-item-hover-background-color: transparent;
1176
+ --amplify-components-tabs-item-hover-border-color: var(--amplify-colors-border-focus);
1177
+ --amplify-components-tabs-item-hover-box-shadow: none;
1166
1178
  --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover);
1179
+ --amplify-components-tabs-item-focus-background-color: transparent;
1180
+ --amplify-components-tabs-item-focus-border-color: var(--amplify-colors-border-focus);
1181
+ --amplify-components-tabs-item-focus-box-shadow: 0px 0px 0px var(--amplify-border-widths-medium) var(--amplify-colors-border-focus);
1167
1182
  --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus);
1168
- --amplify-components-tabs-item-active-color: var(--amplify-colors-font-interactive);
1169
- --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive);
1170
1183
  --amplify-components-tabs-item-active-background-color: transparent;
1171
- --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled);
1184
+ --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive);
1185
+ --amplify-components-tabs-item-active-box-shadow: none;
1186
+ --amplify-components-tabs-item-active-color: var(--amplify-colors-font-interactive);
1172
1187
  --amplify-components-tabs-item-disabled-background-color: transparent;
1173
1188
  --amplify-components-tabs-item-disabled-border-color: var(--amplify-colors-border-tertiary);
1189
+ --amplify-components-tabs-item-disabled-box-shadow: none;
1190
+ --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled);
1191
+ --amplify-components-tabs-panel-background-color: transparent;
1192
+ --amplify-components-tabs-panel-padding-inline: 0;
1193
+ --amplify-components-tabs-panel-padding-block: var(--amplify-space-small);
1174
1194
  --amplify-components-text-color: var(--amplify-colors-font-primary);
1175
1195
  --amplify-components-text-primary-color: var(--amplify-colors-font-primary);
1176
1196
  --amplify-components-text-secondary-color: var(--amplify-colors-font-secondary);
@@ -1210,15 +1230,15 @@
1210
1230
  --amplify-components-togglebutton-primary-disabled-border-color: var(--amplify-colors-border-disabled);
1211
1231
  --amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-disabled);
1212
1232
  --amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled);
1213
- --amplify-components-togglebutton-primary-pressed-background-color: var(--amplify-colors-brand-primary-80);
1214
- --amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-brand-primary-80);
1233
+ --amplify-components-togglebutton-primary-pressed-background-color: var(--amplify-colors-primary-80);
1234
+ --amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-primary-80);
1215
1235
  --amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-background-primary);
1216
1236
  --amplify-components-togglebutton-primary-pressed-focus-background-color: var(--amplify-colors-border-focus);
1217
1237
  --amplify-components-togglebutton-primary-pressed-focus-border-color: var(--amplify-colors-border-focus);
1218
1238
  --amplify-components-togglebutton-primary-pressed-focus-color: var(--amplify-colors-background-primary);
1219
- --amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-brand-primary-60);
1220
- --amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-brand-primary-60);
1221
- --amplify-components-togglebutton-primary-pressed-hover-box-shadow: var(--amplify-colors-brand-primary-60);
1239
+ --amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-primary-60);
1240
+ --amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-primary-60);
1241
+ --amplify-components-togglebutton-primary-pressed-hover-box-shadow: var(--amplify-colors-primary-60);
1222
1242
  --amplify-components-togglebutton-primary-pressed-hover-color: var(--amplify-colors-background-primary);
1223
1243
  --amplify-components-togglebutton-link-background-color: var(--amplify-colors-transparent);
1224
1244
  --amplify-components-togglebutton-link-color: var(--amplify-colors-overlay-50);
@@ -1303,29 +1323,29 @@
1303
1323
  --amplify-colors-neutral-80: hsl(210, 10%, 40%);
1304
1324
  --amplify-colors-neutral-90: hsl(210, 25%, 25%);
1305
1325
  --amplify-colors-neutral-100: hsl(210, 50%, 10%);
1306
- --amplify-colors-brand-primary-10: var(--amplify-colors-teal-10);
1307
- --amplify-colors-brand-primary-20: var(--amplify-colors-teal-20);
1308
- --amplify-colors-brand-primary-40: var(--amplify-colors-teal-40);
1309
- --amplify-colors-brand-primary-60: var(--amplify-colors-teal-60);
1310
- --amplify-colors-brand-primary-80: var(--amplify-colors-teal-80);
1311
- --amplify-colors-brand-primary-90: var(--amplify-colors-teal-90);
1312
- --amplify-colors-brand-primary-100: var(--amplify-colors-teal-100);
1313
- --amplify-colors-brand-secondary-10: var(--amplify-colors-purple-10);
1314
- --amplify-colors-brand-secondary-20: var(--amplify-colors-purple-20);
1315
- --amplify-colors-brand-secondary-40: var(--amplify-colors-purple-40);
1316
- --amplify-colors-brand-secondary-60: var(--amplify-colors-purple-60);
1317
- --amplify-colors-brand-secondary-80: var(--amplify-colors-purple-80);
1318
- --amplify-colors-brand-secondary-90: var(--amplify-colors-purple-90);
1319
- --amplify-colors-brand-secondary-100: var(--amplify-colors-purple-100);
1326
+ --amplify-colors-primary-10: var(--amplify-colors-teal-10);
1327
+ --amplify-colors-primary-20: var(--amplify-colors-teal-20);
1328
+ --amplify-colors-primary-40: var(--amplify-colors-teal-40);
1329
+ --amplify-colors-primary-60: var(--amplify-colors-teal-60);
1330
+ --amplify-colors-primary-80: var(--amplify-colors-teal-80);
1331
+ --amplify-colors-primary-90: var(--amplify-colors-teal-90);
1332
+ --amplify-colors-primary-100: var(--amplify-colors-teal-100);
1333
+ --amplify-colors-secondary-10: var(--amplify-colors-purple-10);
1334
+ --amplify-colors-secondary-20: var(--amplify-colors-purple-20);
1335
+ --amplify-colors-secondary-40: var(--amplify-colors-purple-40);
1336
+ --amplify-colors-secondary-60: var(--amplify-colors-purple-60);
1337
+ --amplify-colors-secondary-80: var(--amplify-colors-purple-80);
1338
+ --amplify-colors-secondary-90: var(--amplify-colors-purple-90);
1339
+ --amplify-colors-secondary-100: var(--amplify-colors-purple-100);
1320
1340
  --amplify-colors-font-primary: var(--amplify-colors-neutral-100);
1321
1341
  --amplify-colors-font-secondary: var(--amplify-colors-neutral-90);
1322
1342
  --amplify-colors-font-tertiary: var(--amplify-colors-neutral-80);
1323
1343
  --amplify-colors-font-disabled: var(--amplify-colors-neutral-60);
1324
1344
  --amplify-colors-font-inverse: var(--amplify-colors-white);
1325
- --amplify-colors-font-interactive: var(--amplify-colors-brand-primary-80);
1326
- --amplify-colors-font-hover: var(--amplify-colors-brand-primary-90);
1327
- --amplify-colors-font-focus: var(--amplify-colors-brand-primary-100);
1328
- --amplify-colors-font-active: var(--amplify-colors-brand-primary-100);
1345
+ --amplify-colors-font-interactive: var(--amplify-colors-primary-80);
1346
+ --amplify-colors-font-hover: var(--amplify-colors-primary-90);
1347
+ --amplify-colors-font-focus: var(--amplify-colors-primary-100);
1348
+ --amplify-colors-font-active: var(--amplify-colors-primary-100);
1329
1349
  --amplify-colors-font-info: var(--amplify-colors-blue-90);
1330
1350
  --amplify-colors-font-warning: var(--amplify-colors-orange-90);
1331
1351
  --amplify-colors-font-error: var(--amplify-colors-red-90);
@@ -1343,8 +1363,8 @@
1343
1363
  --amplify-colors-border-secondary: var(--amplify-colors-neutral-40);
1344
1364
  --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20);
1345
1365
  --amplify-colors-border-disabled: var(--amplify-colors-border-tertiary);
1346
- --amplify-colors-border-pressed: var(--amplify-colors-brand-primary-100);
1347
- --amplify-colors-border-focus: var(--amplify-colors-brand-primary-100);
1366
+ --amplify-colors-border-pressed: var(--amplify-colors-primary-100);
1367
+ --amplify-colors-border-focus: var(--amplify-colors-primary-100);
1348
1368
  --amplify-colors-border-error: var(--amplify-colors-red-80);
1349
1369
  --amplify-colors-border-info: var(--amplify-colors-blue-80);
1350
1370
  --amplify-colors-border-success: var(--amplify-colors-green-80);
@@ -2898,6 +2918,7 @@ strong.amplify-text {
2898
2918
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
2899
2919
  }
2900
2920
  .amplify-input--quiet[aria-invalid=true]:focus {
2921
+ border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color);
2901
2922
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
2902
2923
  }
2903
2924
  .amplify-input[disabled] {
@@ -2970,6 +2991,7 @@ strong.amplify-text {
2970
2991
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
2971
2992
  }
2972
2993
  .amplify-textarea--quiet[aria-invalid=true]:focus {
2994
+ border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color);
2973
2995
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
2974
2996
  }
2975
2997
  .amplify-textarea[disabled] {
@@ -3098,7 +3120,7 @@ strong.amplify-text {
3098
3120
  stroke-dashoffset: 0%;
3099
3121
  stroke-dasharray: none;
3100
3122
  }
3101
- .amplify-loader__percentage-text {
3123
+ .amplify-loader__label {
3102
3124
  fill: var(--amplify-components-loader-text-fill);
3103
3125
  stroke: none;
3104
3126
  }
@@ -3183,6 +3205,71 @@ strong.amplify-text {
3183
3205
  color: var(--amplify-components-copy-tool-tip-color);
3184
3206
  }
3185
3207
 
3208
+ .amplify-accordion {
3209
+ display: block;
3210
+ background-color: var(--amplify-components-accordion-background-color);
3211
+ border-radius: var(--amplify-components-accordion-item-border-radius);
3212
+ }
3213
+
3214
+ .amplify-accordion__item {
3215
+ display: block;
3216
+ position: relative;
3217
+ border-width: var(--amplify-components-accordion-item-border-width);
3218
+ border-style: var(--amplify-components-accordion-item-border-style);
3219
+ border-color: var(--amplify-components-accordion-item-border-color);
3220
+ }
3221
+ .amplify-accordion__item + .amplify-accordion__item {
3222
+ margin-block-start: calc(-1 * var(--amplify-components-accordion-item-border-width));
3223
+ }
3224
+ .amplify-accordion__item:where(:first-of-type) {
3225
+ border-start-end-radius: var(--amplify-components-accordion-item-border-radius);
3226
+ border-start-start-radius: var(--amplify-components-accordion-item-border-radius);
3227
+ }
3228
+ .amplify-accordion__item:where(:last-of-type) {
3229
+ border-end-end-radius: var(--amplify-components-accordion-item-border-radius);
3230
+ border-end-start-radius: var(--amplify-components-accordion-item-border-radius);
3231
+ }
3232
+ .amplify-accordion__item__trigger {
3233
+ cursor: pointer;
3234
+ display: flex;
3235
+ position: relative;
3236
+ color: var(--amplify-components-accordion-item-trigger-color);
3237
+ border-radius: var(--amplify-components-accordion-item-border-radius);
3238
+ padding-inline: var(--amplify-components-accordion-item-trigger-padding-inline);
3239
+ padding-block: var(--amplify-components-accordion-item-trigger-padding-block);
3240
+ gap: var(--amplify-components-accordion-item-trigger-gap);
3241
+ align-items: var(--amplify-components-accordion-item-trigger-align-items);
3242
+ justify-content: var(--amplify-components-accordion-item-trigger-justify-content);
3243
+ }
3244
+ .amplify-accordion__item__trigger:hover {
3245
+ background-color: var(--amplify-components-accordion-item-trigger-hover-background-color);
3246
+ color: var(--amplify-components-accordion-item-trigger-hover-color);
3247
+ }
3248
+ .amplify-accordion__item__trigger:focus {
3249
+ box-shadow: var(--amplify-components-accordion-item-trigger-focus-box-shadow);
3250
+ border-color: var(--amplify-components-accordion-item-trigger-focus-border-color);
3251
+ z-index: 2;
3252
+ }
3253
+ .amplify-accordion__item__trigger::-webkit-details-marker {
3254
+ display: none;
3255
+ }
3256
+ .amplify-accordion__item__content {
3257
+ display: block;
3258
+ color: var(--amplify-components-accordion-item-content-color);
3259
+ padding-block-end: var(--amplify-components-accordion-item-content-padding-block-end);
3260
+ padding-block-start: var(--amplify-components-accordion-item-content-padding-block-start);
3261
+ padding-inline: var(--amplify-components-accordion-item-content-padding-inline);
3262
+ }
3263
+ .amplify-accordion__item__icon {
3264
+ color: var(--amplify-components-accordion-item-icon-color);
3265
+ transition-property: transform;
3266
+ transition-duration: var(--amplify-components-accordion-item-icon-transition-duration);
3267
+ transition-timing-function: var(--amplify-components-accordion-item-icon-transition-timing-function);
3268
+ }
3269
+ [open] .amplify-accordion__item__icon {
3270
+ transform: rotate(180deg);
3271
+ }
3272
+
3186
3273
  .amplify-alert {
3187
3274
  align-items: var(--amplify-components-alert-align-items);
3188
3275
  background-color: var(--amplify-components-alert-background-color);
@@ -3340,6 +3427,16 @@ strong.amplify-text {
3340
3427
  align-self: center;
3341
3428
  }
3342
3429
 
3430
+ .amplify-authenticator__federated-buttons {
3431
+ flex-direction: column;
3432
+ padding-block-end: var(--amplify-space-medium);
3433
+ }
3434
+
3435
+ .amplify-authenticator__federated-button {
3436
+ font-weight: normal;
3437
+ gap: var(--amplify-space-medium);
3438
+ }
3439
+
3343
3440
  .amplify-breadcrumbs__list {
3344
3441
  display: flex;
3345
3442
  flex-wrap: var(--amplify-components-breadcrumbs-flex-wrap);
@@ -3411,7 +3508,7 @@ strong.amplify-text {
3411
3508
  .amplify-collection {
3412
3509
  flex-direction: column;
3413
3510
  }
3414
- .amplify-collection-pagination {
3511
+ .amplify-collection__pagination {
3415
3512
  justify-content: center;
3416
3513
  --amplify-components-pagination-current-color: var(
3417
3514
  --amplify-components-collection-pagination-current-color
@@ -3432,7 +3529,7 @@ strong.amplify-text {
3432
3529
  --amplify-components-collection-pagination-button-disabled-color
3433
3530
  );
3434
3531
  }
3435
- .amplify-collection-search {
3532
+ .amplify-collection__search {
3436
3533
  flex-direction: row;
3437
3534
  justify-content: center;
3438
3535
  --amplify-components-searchfield-input-color: var(
@@ -3488,6 +3585,7 @@ strong.amplify-text {
3488
3585
  }
3489
3586
  .amplify-checkbox--disabled {
3490
3587
  cursor: var(--amplify-components-checkbox-disabled-cursor);
3588
+ color: var(--amplify-components-checkbox-label-disabled-color);
3491
3589
  }
3492
3590
 
3493
3591
  .amplify-checkbox__button {
@@ -3570,7 +3668,10 @@ strong.amplify-text {
3570
3668
  background-color: var(--amplify-internal-checkbox-icon-disabled-background-color);
3571
3669
  }
3572
3670
 
3573
- .amplify-checkbox__label[data-disabled=true] {
3671
+ .amplify-checkbox__label {
3672
+ color: var(--amplify-components-checkbox-label-color);
3673
+ }
3674
+ .amplify-checkbox__label--disabled {
3574
3675
  color: var(--amplify-components-checkbox-label-disabled-color);
3575
3676
  }
3576
3677
 
@@ -3586,17 +3687,27 @@ strong.amplify-text {
3586
3687
  }
3587
3688
 
3588
3689
  .amplify-divider {
3690
+ --amplify-internal-divider-size: var(
3691
+ --amplify-components-divider-border-width
3692
+ );
3589
3693
  border-color: var(--amplify-components-divider-border-color);
3590
3694
  border-style: var(--amplify-components-divider-border-style);
3591
3695
  border-width: 0;
3592
3696
  opacity: var(--amplify-components-divider-opacity);
3593
3697
  padding: 0;
3594
- display: block;
3595
- --amplify-internal-divider-size: var(
3596
- --amplify-components-divider-border-width
3597
- );
3698
+ display: flex;
3598
3699
  position: relative;
3599
3700
  text-align: center;
3701
+ justify-content: center;
3702
+ }
3703
+ .amplify-divider::after {
3704
+ content: attr(data-label);
3705
+ position: absolute;
3706
+ transform: translateY(-50%);
3707
+ font-size: var(--amplify-components-divider-label-font-size);
3708
+ padding-inline: var(--amplify-components-divider-label-padding-inline);
3709
+ background-color: var(--amplify-components-divider-label-background-color);
3710
+ color: var(--amplify-components-divider-label-color);
3600
3711
  }
3601
3712
  .amplify-divider--small {
3602
3713
  --amplify-internal-divider-size: var(
@@ -3614,134 +3725,15 @@ strong.amplify-text {
3614
3725
  }
3615
3726
  .amplify-divider--vertical {
3616
3727
  border-left-width: var(--amplify-internal-divider-size);
3617
- }
3618
- .amplify-divider--label {
3619
- display: flex;
3620
- justify-content: center;
3621
- }
3622
- .amplify-divider--label::after {
3623
- content: attr(data-label);
3624
- position: absolute;
3625
- transform: translateY(-50%);
3626
- font-size: var(--amplify-components-divider-label-font-size);
3627
- padding-inline: var(--amplify-components-divider-label-padding-inline);
3628
- background-color: var(--amplify-components-divider-label-background-color);
3629
- color: var(--amplify-components-divider-label-color);
3630
- }
3631
- .amplify-divider--label[aria-orientation=vertical] {
3632
3728
  flex-direction: column;
3633
3729
  }
3634
- .amplify-divider--label[aria-orientation=vertical]::after {
3730
+ .amplify-divider--vertical::after {
3635
3731
  top: auto;
3636
3732
  transform: translateX(-50%);
3637
3733
  padding-block: 0;
3638
3734
  padding-inline: 0;
3639
3735
  }
3640
3736
 
3641
- .amplify-expander {
3642
- display: block;
3643
- background-color: var(--amplify-components-expander-background-color);
3644
- border-radius: var(--amplify-components-expander-border-radius);
3645
- box-shadow: var(--amplify-components-expander-box-shadow);
3646
- width: var(--amplify-components-expander-width);
3647
- }
3648
-
3649
- .amplify-expander__item {
3650
- display: block;
3651
- overflow: hidden;
3652
- box-shadow: var(--amplify-components-expander-item-box-shadow);
3653
- }
3654
- .amplify-expander__item:first-of-type {
3655
- border-start-start-radius: var(--amplify-components-expander-item-border-start-start-radius);
3656
- border-start-end-radius: var(--amplify-components-expander-item-border-start-end-radius);
3657
- }
3658
- @supports not (border-start-start-radius: var(--amplify-components-expander-item-border-start-start-radius)) {
3659
- .amplify-expander__item:first-of-type {
3660
- border-top-left-radius: var(--amplify-components-expander-item-border-top-left-radius);
3661
- border-top-right-radius: var(--amplify-components-expander-item-border-top-right-radius);
3662
- }
3663
- }
3664
- .amplify-expander__item:last-of-type {
3665
- box-shadow: none;
3666
- border-end-start-radius: var(--amplify-components-expander-item-border-end-start-radius);
3667
- border-end-end-radius: var(--amplify-components-expander-item-border-end-end-radius);
3668
- }
3669
- @supports not (border-end-start-radius: var(--amplify-components-expander-item-border-end-start-radius)) {
3670
- .amplify-expander__item:last-of-type {
3671
- border-bottom-left-radius: var(--amplify-components-expander-item-border-bottom-left-radius);
3672
- border-bottom-right-radius: var(--amplify-components-expander-item-border-bottom-right-radius);
3673
- }
3674
- }
3675
- .amplify-expander__item:focus-within {
3676
- box-shadow: var(--amplify-components-expander-item-focus-box-shadow);
3677
- }
3678
-
3679
- .amplify-expander__header {
3680
- display: flex;
3681
- box-shadow: var(--amplify-components-expander-header-box-shadow);
3682
- }
3683
-
3684
- .amplify-expander__trigger {
3685
- flex: 1;
3686
- display: flex;
3687
- min-height: var(--amplify-components-expander-trigger-min-height);
3688
- padding-inline-start: var(--amplify-components-expander-trigger-padding-inline-start);
3689
- padding-inline-end: var(--amplify-components-expander-trigger-padding-inline-end);
3690
- align-items: var(--amplify-components-expander-trigger-align-items);
3691
- justify-content: var(--amplify-components-expander-trigger-justify-content);
3692
- }
3693
- .amplify-expander__trigger:hover {
3694
- background-color: var(--amplify-components-expander-trigger-hover-background-color);
3695
- }
3696
-
3697
- .amplify-expander__content {
3698
- display: block;
3699
- padding-inline-start: var(--amplify-components-expander-content-padding-inline-start);
3700
- padding-inline-end: var(--amplify-components-expander-content-padding-inline-end);
3701
- }
3702
- .amplify-expander__content[data-state=open] {
3703
- animation-name: amplify-expander-slide-down;
3704
- animation-duration: var(--amplify-components-expander-content-open-animation-duration);
3705
- animation-timing-function: var(--amplify-components-expander-content-open-animation-timing-function);
3706
- }
3707
- .amplify-expander__content[data-state=closed] {
3708
- animation-name: amplify-expander-slide-up;
3709
- animation-duration: var(--amplify-components-expander-content-closed-animation-duration);
3710
- animation-timing-function: var(--amplify-components-expander-content-closed-animation-timing-function);
3711
- }
3712
-
3713
- .amplify-expander__content__text {
3714
- display: block;
3715
- color: var(--amplify-components-expander-content-text-color);
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);
3718
- }
3719
-
3720
- .amplify-expander__icon {
3721
- transition-property: transform;
3722
- transition-duration: var(--amplify-components-expander-icon-transition-duration);
3723
- transition-timing-function: var(--amplify-components-expander-icon-transition-timing-function);
3724
- }
3725
- [data-state=open] .amplify-expander__icon {
3726
- transform: rotate(180deg);
3727
- }
3728
-
3729
- @keyframes amplify-expander-slide-down {
3730
- from {
3731
- height: 0;
3732
- }
3733
- to {
3734
- height: auto;
3735
- }
3736
- }
3737
- @keyframes amplify-expander-slide-up {
3738
- from {
3739
- height: auto;
3740
- }
3741
- to {
3742
- height: 0;
3743
- }
3744
- }
3745
3737
  .amplify-field {
3746
3738
  font-size: var(--amplify-components-field-font-size);
3747
3739
  gap: var(--amplify-components-field-gap);
@@ -3936,8 +3928,15 @@ html[dir=rtl] .amplify-field-group__inner-start {
3936
3928
  right: var(--amplify-space-medium);
3937
3929
  }
3938
3930
 
3931
+ .liveness-detector .amplify-button--primary:focus {
3932
+ box-shadow: unset;
3933
+ outline: var(--amplify-components-button-focus-color) solid 2px;
3934
+ outline-offset: 2px;
3935
+ }
3936
+
3939
3937
  .amplify-liveness-cancel-button {
3940
- background-color: var(--amplify-colors-background-primary);
3938
+ background-color: #fff;
3939
+ color: hsl(190, 95%, 30%);
3941
3940
  }
3942
3941
 
3943
3942
  .amplify-liveness-fade-out {
@@ -3969,6 +3968,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
3969
3968
  left: 0;
3970
3969
  height: 100%;
3971
3970
  width: 100%;
3971
+ z-index: 2;
3972
3972
  }
3973
3973
 
3974
3974
  .amplify-liveness-video {
@@ -3977,6 +3977,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
3977
3977
  left: 0;
3978
3978
  width: 100%;
3979
3979
  height: 100%;
3980
+ transform: scaleX(-1);
3980
3981
  }
3981
3982
 
3982
3983
  .amplify-liveness-freshness-canvas {
@@ -4026,14 +4027,18 @@ html[dir=rtl] .amplify-field-group__inner-start {
4026
4027
  .amplify-liveness-recording-icon {
4027
4028
  flex-direction: column;
4028
4029
  align-items: center;
4029
- background-color: var(--amplify-colors-background-primary);
4030
+ background-color: #fff;
4030
4031
  padding: var(--amplify-space-xxs);
4031
4032
  gap: var(--amplify-space-xxs);
4032
4033
  border-radius: var(--amplify-radii-small);
4033
4034
  }
4034
4035
 
4036
+ .amplify-liveness-recording-icon .amplify-text {
4037
+ color: var(--amplify-colors-black);
4038
+ }
4039
+
4035
4040
  .amplify-liveness-instruction-overlay {
4036
- z-index: 1;
4041
+ z-index: 2;
4037
4042
  }
4038
4043
 
4039
4044
  .amplify-liveness-countdown-container {
@@ -4052,7 +4057,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4052
4057
  .amplify-liveness-toast {
4053
4058
  background-color: var(--amplify-colors-background-primary);
4054
4059
  padding: var(--amplify-space-small);
4055
- border-radius: var(--amplify-radii-medium);
4060
+ max-width: 100%;
4056
4061
  }
4057
4062
 
4058
4063
  .amplify-liveness-toast__message {
@@ -4061,12 +4066,17 @@ html[dir=rtl] .amplify-field-group__inner-start {
4061
4066
  flex-direction: column;
4062
4067
  }
4063
4068
 
4069
+ .amplify-liveness-toast--medium {
4070
+ border-radius: var(--amplify-radii-medium);
4071
+ }
4072
+
4064
4073
  .amplify-liveness-toast--large {
4065
- font-size: var(--amplify-font-sizes-xl);
4074
+ font-size: var(--amplify-font-sizes-xxl);
4075
+ padding: 0 var(--amplify-space-xs);
4066
4076
  }
4067
4077
 
4068
4078
  .amplify-liveness-toast--primary {
4069
- background-color: var(--amplify-colors-brand-primary-80);
4079
+ background-color: var(--amplify-colors-primary-80);
4070
4080
  }
4071
4081
  .amplify-liveness-toast--primary .amplify-liveness-toast__message {
4072
4082
  color: var(--amplify-colors-font-inverse);
@@ -4126,7 +4136,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4126
4136
  content: "";
4127
4137
  width: 100%;
4128
4138
  height: 100%;
4129
- background: var(--amplify-colors-brand-primary-40);
4139
+ background: var(--amplify-colors-primary-80);
4130
4140
  left: -100%;
4131
4141
  transform: translate(var(--percentage), 0);
4132
4142
  transition: var(--amplify-liveness-match-indicator-transition);
@@ -4139,7 +4149,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4139
4149
  width: var(--amplify-space-small);
4140
4150
  height: var(--height);
4141
4151
  border-radius: var(--amplify-radii-medium);
4142
- background: var(--amplify-colors-brand-primary-80);
4152
+ background: var(--amplify-colors-primary-80);
4143
4153
  left: 0;
4144
4154
  top: 0;
4145
4155
  transform: translate(-50%, calc(var(--height) / 2 * -1));
@@ -4195,7 +4205,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4195
4205
 
4196
4206
  .amplify-liveness-landscape-error-modal {
4197
4207
  background-color: var(--amplify-colors-background-primary);
4198
- direction: column;
4208
+ flex-direction: column;
4199
4209
  text-align: center;
4200
4210
  align-items: center;
4201
4211
  justify-content: center;
@@ -4226,9 +4236,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
4226
4236
  }
4227
4237
 
4228
4238
  .amplify-liveness-start-screen-warning {
4229
- color: var(--amplify-colors-orange-80);
4230
- background-color: var(--amplify-colors-orange-20);
4239
+ color: var(--amplify-colors-blue-90);
4240
+ background-color: var(--amplify-colors-blue-10);
4231
4241
  align-items: center;
4242
+ z-index: 3;
4232
4243
  }
4233
4244
 
4234
4245
  .amplify-liveness-start-screen-instructions__heading {
@@ -4247,7 +4258,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4247
4258
  top: 0;
4248
4259
  width: 100%;
4249
4260
  height: 100%;
4250
- padding: var(--amplify-space-xl);
4261
+ padding: var(--amplify-space-large);
4251
4262
  }
4252
4263
 
4253
4264
  .amplify-liveness-error-modal {
@@ -4261,6 +4272,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
4261
4272
  font-weight: var(--amplify-font-weights-bold);
4262
4273
  }
4263
4274
 
4275
+ .amplify-liveness-hint--mobile {
4276
+ margin-top: var(--amplify-space-xxxl);
4277
+ }
4278
+
4264
4279
  .amplify-liveness-hint__text {
4265
4280
  align-items: center;
4266
4281
  gap: var(--amplify-space-xs);
@@ -4268,13 +4283,12 @@ html[dir=rtl] .amplify-field-group__inner-start {
4268
4283
 
4269
4284
  .amplify-liveness-popover {
4270
4285
  position: relative;
4271
- cursor: pointer;
4272
4286
  }
4273
4287
 
4274
4288
  .amplify-liveness-popover__anchor {
4275
4289
  position: absolute;
4276
4290
  top: 26px;
4277
- left: 3px;
4291
+ left: 20px;
4278
4292
  z-index: 3;
4279
4293
  border-style: solid;
4280
4294
  border-width: 0 9px 9px 9px;
@@ -4284,7 +4298,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4284
4298
  .amplify-liveness-popover__anchor-secondary {
4285
4299
  position: absolute;
4286
4300
  top: 24px;
4287
- left: 2px;
4301
+ left: 19px;
4288
4302
  z-index: 2;
4289
4303
  border-style: solid;
4290
4304
  border-width: 0 10px 10px 10px;
@@ -4297,24 +4311,63 @@ html[dir=rtl] .amplify-field-group__inner-start {
4297
4311
  color: var(--amplify-colors-font-primary);
4298
4312
  flex-direction: row;
4299
4313
  font-size: var(--amplify-font-sizes-xs);
4314
+ font-weight: var(--amplify-font-weights-normal);
4300
4315
  padding: var(--amplify-space-small);
4301
4316
  top: 33px;
4302
4317
  width: 240px;
4303
4318
  border: 1px solid var(--amplify-colors-border-secondary);
4304
4319
  border-radius: 2px;
4320
+ z-index: 4;
4321
+ }
4322
+
4323
+ .amplify-liveness-start-screen-camera-select {
4324
+ flex-direction: column;
4325
+ position: absolute;
4326
+ left: 0;
4327
+ top: 0;
4328
+ width: 100%;
4329
+ height: 100%;
4330
+ padding: var(--amplify-space-xl);
4331
+ align-items: center;
4332
+ justify-content: flex-end;
4333
+ display: flex;
4334
+ z-index: 2;
4335
+ }
4336
+
4337
+ .amplify-liveness-start-screen-camera-select__container {
4338
+ display: flex;
4339
+ justify-content: space-between;
4340
+ align-items: inherit;
4341
+ gap: var(--amplify-space-xs);
4342
+ }
4343
+
4344
+ .amplify-liveness-start-screen-camera-select__label,
4345
+ .amplify-liveness-start-screen-camera-select .amplify-select,
4346
+ .amplify-liveness-start-screen-camera-select .amplify-select__wrapper,
4347
+ .amplify-liveness-start-screen-camera-select .amplify-select__icon-wrapper {
4348
+ background-color: var(--amplify-colors-background-primary);
4349
+ color: var(--amplify-colors-font-primary);
4350
+ }
4351
+
4352
+ .amplify-liveness-start-screen-camera-waiting {
4353
+ flex-direction: column;
4354
+ align-items: center;
4355
+ justify-content: center;
4356
+ text-align: center;
4357
+ height: 480px;
4305
4358
  }
4306
4359
 
4307
- .amplify-menu-content-wrapper {
4360
+ .amplify-menu__wrapper {
4308
4361
  z-index: 999999;
4309
4362
  }
4310
4363
 
4311
- .amplify-menu-trigger {
4364
+ .amplify-menu__trigger {
4312
4365
  display: flex;
4313
4366
  justify-content: center;
4314
4367
  align-items: center;
4315
4368
  }
4316
4369
 
4317
- .amplify-menu-content {
4370
+ .amplify-menu__content {
4318
4371
  background-color: var(--amplify-components-menu-background-color);
4319
4372
  border-radius: var(--amplify-components-menu-border-radius);
4320
4373
  box-shadow: var(--amplify-components-menu-box-shadow);
@@ -4327,33 +4380,33 @@ html[dir=rtl] .amplify-field-group__inner-start {
4327
4380
  border-style: var(--amplify-components-menu-border-style);
4328
4381
  }
4329
4382
 
4330
- .amplify-menu-content__item {
4383
+ .amplify-menu__content__item {
4331
4384
  min-height: var(--amplify-components-menu-item-min-height);
4332
4385
  padding-inline-start: var(--amplify-components-menu-item-padding-inline-start);
4333
4386
  padding-inline-end: var(--amplify-components-menu-item-padding-inline-end);
4334
4387
  }
4335
4388
 
4336
- .amplify-menu-content__item:not(:first-child):not(:last-child) {
4389
+ .amplify-menu__content__item:not(:first-child):not(:last-child) {
4337
4390
  border-radius: 0;
4338
4391
  }
4339
4392
 
4340
- .amplify-menu-content__item:first-child {
4393
+ .amplify-menu__content__item:first-child {
4341
4394
  border-end-end-radius: 0;
4342
4395
  border-end-start-radius: 0;
4343
4396
  }
4344
4397
  @supports not (border-end-end-radius: 0) {
4345
- .amplify-menu-content__item:first-child {
4398
+ .amplify-menu__content__item:first-child {
4346
4399
  border-bottom-right-radius: 0;
4347
4400
  border-bottom-left-radius: 0;
4348
4401
  }
4349
4402
  }
4350
4403
 
4351
- .amplify-menu-content__item:last-child {
4404
+ .amplify-menu__content__item:last-child {
4352
4405
  border-start-end-radius: 0;
4353
4406
  border-start-start-radius: 0;
4354
4407
  }
4355
4408
  @supports not (border-end-end-radius: 0) {
4356
- .amplify-menu-content__item:last-child {
4409
+ .amplify-menu__content__item:last-child {
4357
4410
  border-top-right-radius: 0;
4358
4411
  border-top-left-radius: 0;
4359
4412
  }
@@ -4471,47 +4524,42 @@ html[dir=rtl] .amplify-field-group__inner-start {
4471
4524
  gap: var(--amplify-components-message-dismiss-gap);
4472
4525
  }
4473
4526
 
4474
- .amplify-pagination__item-current, .amplify-pagination__item-button {
4475
- height: var(--amplify-components-pagination-item-shared-height);
4476
- min-width: var(--amplify-components-pagination-item-shared-min-width);
4477
- border-radius: var(--amplify-components-pagination-item-shared-border-radius);
4478
- }
4479
-
4480
4527
  .amplify-pagination {
4481
4528
  list-style-type: none;
4482
4529
  }
4483
- .amplify-pagination li {
4484
- margin-left: var(--amplify-components-pagination-item-container-margin-left);
4485
- margin-right: var(--amplify-components-pagination-item-container-margin-right);
4486
- }
4487
- .amplify-pagination__item-button {
4530
+ .amplify-pagination__item {
4531
+ height: var(--amplify-components-pagination-item-shared-height);
4532
+ min-width: var(--amplify-components-pagination-item-shared-min-width);
4533
+ border-radius: var(--amplify-components-pagination-item-shared-border-radius);
4488
4534
  display: flex;
4489
4535
  align-items: center;
4490
4536
  justify-content: center;
4491
4537
  font-weight: initial;
4492
4538
  color: var(--amplify-components-pagination-button-color);
4539
+ margin-inline-start: var(--amplify-components-pagination-item-container-margin-left);
4540
+ margin-inline-end: var(--amplify-components-pagination-item-container-margin-right);
4493
4541
  padding-inline-start: var(--amplify-components-pagination-button-padding-inline-start);
4494
4542
  padding-inline-end: var(--amplify-components-pagination-button-padding-inline-end);
4495
4543
  transition-property: var(--amplify-components-pagination-button-transition-property);
4496
4544
  transition-duration: var(--amplify-components-pagination-button-transition-duration);
4497
4545
  }
4498
- .amplify-pagination__item-button:hover {
4546
+ .amplify-pagination__item:hover {
4499
4547
  text-decoration: none;
4500
4548
  color: var(--amplify-components-pagination-button-hover-color);
4501
4549
  background-color: var(--amplify-components-pagination-button-hover-background-color);
4502
4550
  }
4503
- .amplify-pagination__item-button--disabled {
4551
+ .amplify-pagination__item--disabled {
4504
4552
  color: var(--amplify-components-pagination-button-disabled-color);
4505
4553
  pointer-events: none;
4506
4554
  }
4507
- .amplify-pagination__item-current {
4555
+ .amplify-pagination__item--current {
4508
4556
  align-items: var(--amplify-components-pagination-current-align-items);
4509
4557
  justify-content: var(--amplify-components-pagination-current-justify-content);
4510
4558
  color: var(--amplify-components-pagination-current-color);
4511
4559
  font-size: var(--amplify-components-pagination-current-font-size);
4512
4560
  background-color: var(--amplify-components-pagination-current-background-color);
4513
4561
  }
4514
- .amplify-pagination__item-ellipsis {
4562
+ .amplify-pagination__item--ellipsis {
4515
4563
  align-items: var(--amplify-components-pagination-ellipsis-align-items);
4516
4564
  justify-content: var(--amplify-components-pagination-ellipsis-justify-content);
4517
4565
  padding-inline-start: var(--amplify-components-pagination-ellipsis-padding-inline-start);
@@ -4561,11 +4609,45 @@ html[dir=rtl] .amplify-field-group__inner-start {
4561
4609
  --amplify-components-button-hover-color: var(
4562
4610
  --amplify-components-passwordfield-button-hover-color
4563
4611
  );
4564
- }
4565
-
4566
- .amplify-field__show-password--error {
4567
- color: var(--amplify-components-fieldcontrol-error-color);
4568
- border-color: var(--amplify-components-fieldcontrol-error-border-color);
4612
+ --amplify-components-button-outlined-error-color: var(
4613
+ --amplify-components-passwordfield-button-error-color
4614
+ );
4615
+ --amplify-components-button-outlined-error-border-color: var(
4616
+ --amplify-components-passwordfield-button-error-border-color
4617
+ );
4618
+ --amplify-components-button-outlined-error-background-color: var(
4619
+ --amplify-components-passwordfield-button-error-background-color
4620
+ );
4621
+ --amplify-components-button-outlined-error-active-color: var(
4622
+ --amplify-components-passwordfield-button-error-active-color
4623
+ );
4624
+ --amplify-components-button-outlined-error-active-border-color: var(
4625
+ --amplify-components-passwordfield-button-error-active-border-color
4626
+ );
4627
+ --amplify-components-button-outlined-error-active-background-color: var(
4628
+ --amplify-components-passwordfield-button-error-active-background-color
4629
+ );
4630
+ --amplify-components-button-outlined-error-hover-color: var(
4631
+ --amplify-components-passwordfield-button-error-hover-color
4632
+ );
4633
+ --amplify-components-button-outlined-error-hover-border-color: var(
4634
+ --amplify-components-passwordfield-button-error-hover-border-color
4635
+ );
4636
+ --amplify-components-button-outlined-error-hover-background-color: var(
4637
+ --amplify-components-passwordfield-button-error-hover-background-color
4638
+ );
4639
+ --amplify-components-button-outlined-error-focus-color: var(
4640
+ --amplify-components-passwordfield-button-error-focus-color
4641
+ );
4642
+ --amplify-components-button-outlined-error-focus-box-shadow: var(
4643
+ --amplify-components-passwordfield-button-error-focus-box-shadow
4644
+ );
4645
+ --amplify-components-button-outlined-error-focus-border-color: var(
4646
+ --amplify-components-passwordfield-button-error-focus-border-color
4647
+ );
4648
+ --amplify-components-button-outlined-error-focus-background-color: var(
4649
+ --amplify-components-passwordfield-button-error-focus-background-color
4650
+ );
4569
4651
  }
4570
4652
 
4571
4653
  .amplify-phonenumberfield select:not(:focus) {
@@ -4606,11 +4688,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
4606
4688
  font-size: var(--amplify-components-rating-default-size);
4607
4689
  line-height: var(--amplify-components-rating-default-size);
4608
4690
  }
4609
- .amplify-rating .amplify-icon {
4610
- font-size: unset;
4611
- line-height: unset;
4612
- height: 1em;
4613
- }
4614
4691
  .amplify-rating--small {
4615
4692
  font-size: var(--amplify-components-rating-small-size);
4616
4693
  line-height: var(--amplify-components-rating-small-size);
@@ -4619,39 +4696,22 @@ html[dir=rtl] .amplify-field-group__inner-start {
4619
4696
  font-size: var(--amplify-components-rating-large-size);
4620
4697
  line-height: var(--amplify-components-rating-large-size);
4621
4698
  }
4622
-
4623
- .amplify-rating-filled {
4624
- fill: currentColor;
4625
- display: inline-block;
4626
- flex-shrink: 0;
4627
- width: 1em;
4628
- height: 1em;
4629
- }
4630
-
4631
- .amplify-rating-icon-container {
4699
+ .amplify-rating__item {
4632
4700
  position: relative;
4633
4701
  height: 1em;
4634
4702
  width: 1em;
4635
4703
  }
4636
-
4637
- .amplify-rating-label {
4638
- position: absolute;
4639
- overflow: hidden;
4640
- height: 1em;
4641
- width: 1em;
4642
- }
4643
-
4644
- .amplify-rating-icon {
4704
+ .amplify-rating__icon {
4645
4705
  width: 1em;
4646
4706
  height: 1em;
4647
4707
  display: block;
4708
+ position: absolute;
4709
+ overflow: hidden;
4648
4710
  }
4649
-
4650
- .amplify-rating-icon-filled {
4711
+ .amplify-rating__icon--filled {
4651
4712
  color: var(--amplify-components-rating-filled-color);
4652
4713
  }
4653
-
4654
- .amplify-rating-icon-empty {
4714
+ .amplify-rating__icon--empty {
4655
4715
  color: var(--amplify-components-rating-empty-color);
4656
4716
  }
4657
4717
 
@@ -4661,7 +4721,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
4661
4721
  gap: inherit;
4662
4722
  flex-direction: row-reverse;
4663
4723
  position: relative;
4664
- --amplify-components-text-color: var(--amplify-components-radio-label-color);
4665
4724
  }
4666
4725
  .amplify-radio--disabled {
4667
4726
  cursor: var(--amplify-components-radio-disabled-cursor);
@@ -4732,7 +4791,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
4732
4791
  background-color: var(--amplify-components-radio-button-disabled-background-color);
4733
4792
  }
4734
4793
 
4735
- .amplify-radio__label[data-disabled=true] {
4794
+ .amplify-radio__label {
4795
+ color: var(--amplify-components-radio-label-color);
4796
+ }
4797
+ .amplify-radio__label--disabled {
4736
4798
  color: var(--amplify-components-radio-label-disabled-color);
4737
4799
  }
4738
4800
 
@@ -4745,8 +4807,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
4745
4807
  .amplify-radiogroupfield {
4746
4808
  flex-direction: column;
4747
4809
  align-items: flex-start;
4748
- --amplify-components-field-label-color: var(
4749
- --amplify-components-radiogroup-label-color
4810
+ --amplify-components-fieldset-legend-color: var(
4811
+ --amplify-components-radiogroup-legend-color
4812
+ );
4813
+ --amplify-components-fieldset-legend-font-weight: var(
4814
+ --amplify-components-radiogroup-legend-font-weight
4750
4815
  );
4751
4816
  --amplify-components-radio-button-border-width: var(
4752
4817
  --amplify-components-radiogroup-radio-border-width
@@ -4803,7 +4868,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4803
4868
  align-self: stretch;
4804
4869
  }
4805
4870
 
4806
- .amplify-select__icon-wrapper {
4871
+ .amplify-select__icon {
4807
4872
  color: var(--amplify-components-fieldcontrol-color);
4808
4873
  align-items: var(--amplify-components-select-icon-wrapper-align-items);
4809
4874
  position: var(--amplify-components-select-icon-wrapper-position);
@@ -4812,10 +4877,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
4812
4877
  transform: var(--amplify-components-select-icon-wrapper-transform);
4813
4878
  pointer-events: var(--amplify-components-select-icon-wrapper-pointer-events);
4814
4879
  }
4815
- .amplify-select__icon-wrapper--small {
4880
+ .amplify-select__icon--small {
4816
4881
  right: var(--amplify-components-select-icon-wrapper-small-right);
4817
4882
  }
4818
- .amplify-select__icon-wrapper--large {
4883
+ .amplify-select__icon--large {
4819
4884
  right: var(--amplify-components-select-icon-wrapper-large-right);
4820
4885
  }
4821
4886
 
@@ -4883,6 +4948,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4883
4948
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
4884
4949
  }
4885
4950
  .amplify-select--quiet[aria-invalid=true]:focus {
4951
+ border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color);
4886
4952
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
4887
4953
  }
4888
4954
  .amplify-select[disabled] {
@@ -4969,7 +5035,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4969
5035
  --amplify-components-sliderfield-thumb-height
4970
5036
  );
4971
5037
  }
4972
- .amplify-sliderfield__root[data-disabled] {
5038
+ .amplify-sliderfield__root--disabled {
4973
5039
  cursor: not-allowed;
4974
5040
  }
4975
5041
  .amplify-sliderfield__root--horizontal {
@@ -5044,7 +5110,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
5044
5110
  border-radius: var(--amplify-components-sliderfield-range-border-radius);
5045
5111
  background-color: var(--amplify-components-sliderfield-range-background-color);
5046
5112
  }
5047
- .amplify-sliderfield__range[data-disabled] {
5113
+ .amplify-sliderfield__range--disabled {
5048
5114
  background-color: var(--amplify-components-sliderfield-range-disabled-background-color);
5049
5115
  }
5050
5116
  .amplify-sliderfield__range--horizontal {
@@ -5073,7 +5139,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
5073
5139
  border-color: var(--amplify-components-sliderfield-thumb-focus-border-color);
5074
5140
  box-shadow: var(--amplify-components-sliderfield-thumb-focus-box-shadow);
5075
5141
  }
5076
- .amplify-sliderfield__thumb[data-disabled] {
5142
+ .amplify-sliderfield__thumb--disabled {
5077
5143
  background-color: var(--amplify-components-sliderfield-thumb-disabled-background-color);
5078
5144
  border-color: var(--amplify-components-sliderfield-thumb-disabled-border-color);
5079
5145
  box-shadow: var(--amplify-components-sliderfield-thumb-disabled-box-shadow);
@@ -5194,7 +5260,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
5194
5260
  flex-direction: column-reverse;
5195
5261
  }
5196
5262
 
5197
- .amplify-switch-track {
5263
+ .amplify-switch__track {
5198
5264
  display: inline-flex;
5199
5265
  justify-content: flex-start;
5200
5266
  box-sizing: content-box;
@@ -5205,21 +5271,21 @@ html[dir=rtl] .amplify-field-group__inner-start {
5205
5271
  transition-duration: var(--amplify-components-switchfield-track-transition-duration);
5206
5272
  background-color: var(--amplify-components-switchfield-track-background-color);
5207
5273
  }
5208
- .amplify-switch-track--checked {
5274
+ .amplify-switch__track--checked {
5209
5275
  background-color: var(--amplify-components-switchfield-track-checked-background-color);
5210
5276
  }
5211
- .amplify-switch-track--disabled {
5277
+ .amplify-switch__track--disabled {
5212
5278
  opacity: var(--amplify-components-switchfield-disabled-opacity);
5213
5279
  cursor: not-allowed;
5214
5280
  }
5215
- .amplify-switch-track--focused {
5281
+ .amplify-switch__track--focused {
5216
5282
  box-shadow: var(--amplify-components-switchfield-focused-shadow);
5217
5283
  }
5218
- .amplify-switch-track--error {
5284
+ .amplify-switch__track--error {
5219
5285
  background-color: var(--amplify-components-switchfield-track-error-background-color);
5220
5286
  }
5221
5287
 
5222
- .amplify-switch-thumb {
5288
+ .amplify-switch__thumb {
5223
5289
  background-color: var(--amplify-components-switchfield-thumb-background-color);
5224
5290
  transition-duration: var(--amplify-components-switchfield-thumb-transition-duration);
5225
5291
  border-radius: var(--amplify-components-switchfield-thumb-border-radius);
@@ -5230,14 +5296,14 @@ html[dir=rtl] .amplify-field-group__inner-start {
5230
5296
  border-color: var(--amplify-components-switchfield-thumb-border-color);
5231
5297
  overflow-wrap: break-word;
5232
5298
  }
5233
- .amplify-switch-thumb--checked {
5299
+ .amplify-switch__thumb--checked {
5234
5300
  transform: var(--amplify-components-switchfield-thumb-checked-transform);
5235
5301
  }
5236
- .amplify-switch-thumb--disabled {
5302
+ .amplify-switch__thumb--disabled {
5237
5303
  cursor: not-allowed;
5238
5304
  }
5239
5305
 
5240
- .amplify-switch-label {
5306
+ .amplify-switch__label {
5241
5307
  padding: var(--amplify-components-switchfield-label-padding);
5242
5308
  cursor: pointer;
5243
5309
  }
@@ -5324,6 +5390,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
5324
5390
  var(--amplify-components-table-header-border-width)
5325
5391
  var(--amplify-components-table-header-border-width);
5326
5392
  }
5393
+ .amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
5394
+ background-color: var(--amplify-components-table-row-striped-background-color);
5395
+ }
5327
5396
  .amplify-table__caption {
5328
5397
  caption-side: var(--amplify-components-table-caption-caption-side);
5329
5398
  color: var(--amplify-components-table-caption-color);
@@ -5382,26 +5451,52 @@ html[dir=rtl] .amplify-field-group__inner-start {
5382
5451
  .amplify-table__td:last-child {
5383
5452
  border-right-width: var(--amplify-components-table-data-border-width);
5384
5453
  }
5385
- .amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
5386
- background-color: var(--amplify-components-table-row-striped-background-color);
5387
- }
5388
5454
  .amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
5389
5455
  background-color: var(--amplify-components-table-row-hover-background-color);
5390
5456
  }
5391
5457
 
5392
- .amplify-tabs {
5458
+ .amplify-tabs__list {
5459
+ --internal-item-margin-start: 0;
5460
+ --internal-item-margin-end: calc(
5461
+ -1 * var(--amplify-components-tabs-item-border-width)
5462
+ );
5463
+ --internal-item-border-width: 0 0
5464
+ var(--amplify-components-tabs-border-width) 0;
5465
+ --internal-item-flex: initial;
5466
+ display: flex;
5467
+ flex-direction: row;
5393
5468
  background-color: var(--amplify-components-tabs-background-color);
5394
5469
  box-shadow: var(--amplify-components-tabs-box-shadow);
5395
- border-width: 0 0 var(--amplify-components-tabs-border-width) 0;
5470
+ border-width: var(--internal-item-border-width);
5396
5471
  border-style: var(--amplify-components-tabs-border-style);
5397
5472
  border-color: var(--amplify-components-tabs-border-color);
5398
5473
  gap: var(--amplify-components-tabs-gap);
5399
5474
  }
5400
- .amplify-tabs[data-indicator-position=top] {
5401
- border-width: var(--amplify-components-tabs-border-width) 0 0 0;
5475
+ .amplify-tabs__list--top {
5476
+ --internal-item-border-width: var(--amplify-components-tabs-border-width)
5477
+ 0 0 0;
5478
+ --internal-item-margin-start: calc(
5479
+ -1 * var(--amplify-components-tabs-item-border-width)
5480
+ );
5481
+ --internal-item-margin-end: 0;
5402
5482
  }
5403
-
5404
- .amplify-tabs-item {
5483
+ .amplify-tabs__list--equal {
5484
+ --internal-item-flex: 1 1 0;
5485
+ }
5486
+ .amplify-tabs__list--relative {
5487
+ --internal-item-flex: 1 1 auto;
5488
+ }
5489
+ .amplify-tabs__panel {
5490
+ display: none;
5491
+ background-color: var(--amplify-components-tabs-panel-background-color);
5492
+ padding-inline: var(--amplify-components-tabs-panel-padding-inline);
5493
+ padding-block: var(--amplify-components-tabs-panel-padding-block);
5494
+ }
5495
+ .amplify-tabs__panel--active {
5496
+ display: block;
5497
+ }
5498
+ .amplify-tabs__item {
5499
+ position: relative;
5405
5500
  background-color: var(--amplify-components-tabs-item-background-color);
5406
5501
  box-sizing: border-box;
5407
5502
  color: var(--amplify-components-tabs-item-color);
@@ -5410,46 +5505,43 @@ html[dir=rtl] .amplify-field-group__inner-start {
5410
5505
  padding: var(--amplify-components-tabs-item-padding-vertical) var(--amplify-components-tabs-item-padding-horizontal);
5411
5506
  text-align: var(--amplify-components-tabs-item-text-align);
5412
5507
  transition: all var(--amplify-components-tabs-item-transition-duration);
5413
- border-width: 0 0 var(--amplify-components-tabs-item-border-width) 0;
5508
+ border-width: var(--internal-item-border-width);
5414
5509
  border-style: var(--amplify-components-tabs-item-border-style);
5415
5510
  border-color: var(--amplify-components-tabs-item-border-color);
5416
- margin-bottom: calc(-1 * var(--amplify-components-tabs-item-border-width));
5417
- }
5418
- [data-indicator-position=top] > .amplify-tabs-item {
5419
- border-width: var(--amplify-components-tabs-border-width) 0 0 0;
5420
- margin-top: calc(-1 * var(--amplify-components-tabs-item-border-width));
5421
- margin-bottom: 0;
5511
+ flex: var(--internal-item-flex);
5512
+ margin-block-start: var(--internal-item-margin-start);
5513
+ margin-block-end: var(--internal-item-margin-end);
5422
5514
  }
5423
- .amplify-tabs-item[data-state=active] {
5515
+ .amplify-tabs__item--active {
5424
5516
  color: var(--amplify-components-tabs-item-active-color);
5425
5517
  border-color: var(--amplify-components-tabs-item-active-border-color);
5426
5518
  background-color: var(--amplify-components-tabs-item-active-background-color);
5427
5519
  transition-property: none;
5428
5520
  }
5429
- .amplify-tabs-item:hover {
5521
+ .amplify-tabs__item:hover {
5430
5522
  color: var(--amplify-components-tabs-item-hover-color);
5431
5523
  cursor: pointer;
5432
5524
  }
5433
- .amplify-tabs-item:focus {
5525
+ .amplify-tabs__item:focus-visible {
5526
+ z-index: 2;
5434
5527
  color: var(--amplify-components-tabs-item-focus-color);
5528
+ background-color: var(--amplify-components-tabs-item-focus-background-color);
5529
+ border-color: var(--amplify-components-tabs-item-focus-border-color);
5530
+ box-shadow: var(--amplify-components-tabs-item-focus-box-shadow);
5435
5531
  }
5436
- .amplify-tabs-item:focus-visible {
5437
- outline: var(--amplify-components-tabs-item-border-width) var(--amplify-components-tabs-item-border-style) var(--amplify-components-tabs-item-border-color);
5438
- }
5439
- .amplify-tabs-item:active {
5532
+ .amplify-tabs__item:active {
5533
+ background-color: var(--amplify-components-tabs-item-active-background-color);
5534
+ border-color: var(--amplify-components-tabs-item-active-border-color);
5535
+ box-shadow: var(--amplify-components-tabs-item-active-box-shadow);
5440
5536
  color: var(--amplify-components-tabs-item-active-color);
5441
5537
  }
5442
- .amplify-tabs-item[data-disabled] {
5538
+ .amplify-tabs__item[disabled] {
5443
5539
  background-color: var(--amplify-components-tabs-item-disabled-background-color);
5540
+ border-color: var(--amplify-components-tabs-item-disabled-border-color);
5541
+ box-shadow: var(--amplify-components-tabs-item-disabled-box-shadow);
5444
5542
  color: var(--amplify-components-tabs-item-disabled-color);
5445
5543
  cursor: not-allowed;
5446
5544
  }
5447
- .amplify-tabs-item[data-spacing=equal] {
5448
- flex: 1 1 0;
5449
- }
5450
- .amplify-tabs-item[data-spacing=relative] {
5451
- flex-grow: 1;
5452
- }
5453
5545
 
5454
5546
  .amplify-textareafield {
5455
5547
  flex-direction: column;
@@ -6111,19 +6203,19 @@ html[dir=rtl] .amplify-field-group__inner-start {
6111
6203
  gap: var(--amplify-space-small);
6112
6204
  }
6113
6205
 
6114
- [data-label-position=start] {
6206
+ .amplify-label-start {
6115
6207
  flex-direction: row;
6116
6208
  }
6117
6209
 
6118
- [data-label-position=end] {
6210
+ .amplify-label-end {
6119
6211
  flex-direction: row-reverse;
6120
6212
  }
6121
6213
 
6122
- [data-label-position=top] {
6214
+ .amplify-label-top {
6123
6215
  flex-direction: column;
6124
6216
  }
6125
6217
 
6126
- [data-label-position=bottom] {
6218
+ .amplify-label-bottom {
6127
6219
  flex-direction: column-reverse;
6128
6220
  }
6129
6221