@aws-amplify/ui-react-storage 0.0.0-studio-e5b8195-20230912200241 → 0.0.0-theming-v2-f8422a3-20240627193426

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 (76) hide show
  1. package/dist/esm/components/StorageImage/StorageImage.mjs +57 -0
  2. package/dist/esm/components/StorageManager/StorageManager.mjs +181 -0
  3. package/dist/esm/components/StorageManager/hooks/useStorageManager/actions.mjs +35 -0
  4. package/dist/esm/components/StorageManager/hooks/useStorageManager/reducer.mjs +132 -0
  5. package/dist/esm/components/StorageManager/hooks/useStorageManager/types.mjs +12 -0
  6. package/dist/esm/components/StorageManager/hooks/useStorageManager/useStorageManager.mjs +58 -0
  7. package/dist/esm/components/StorageManager/hooks/useUploadFiles/useUploadFiles.mjs +74 -0
  8. package/dist/esm/components/StorageManager/types.mjs +11 -0
  9. package/dist/esm/components/StorageManager/ui/Container/Container.mjs +8 -0
  10. package/dist/esm/components/StorageManager/ui/DropZone/DropZone.mjs +16 -0
  11. package/dist/esm/components/StorageManager/ui/FileList/FileControl.mjs +23 -0
  12. package/dist/esm/components/StorageManager/ui/FileList/FileDetails.mjs +15 -0
  13. package/dist/esm/components/StorageManager/ui/FileList/FileList.mjs +44 -0
  14. package/dist/esm/components/StorageManager/ui/FileList/FileRemoveButton.mjs +12 -0
  15. package/dist/esm/components/StorageManager/ui/FileList/FileStatusMessage.mjs +28 -0
  16. package/dist/esm/components/StorageManager/ui/FileList/FileThumbnail.mjs +12 -0
  17. package/dist/esm/components/StorageManager/ui/FileListFooter/FileListFooter.mjs +13 -0
  18. package/dist/esm/components/StorageManager/ui/FileListHeader/FileListHeader.mjs +14 -0
  19. package/dist/esm/components/StorageManager/ui/FilePicker/FilePicker.mjs +9 -0
  20. package/dist/esm/components/StorageManager/utils/checkMaxFileSize.mjs +12 -0
  21. package/dist/esm/components/StorageManager/utils/displayText.mjs +39 -0
  22. package/dist/esm/components/StorageManager/utils/filterAllowedFiles.mjs +27 -0
  23. package/dist/esm/components/StorageManager/utils/getInput.mjs +25 -0
  24. package/dist/esm/components/StorageManager/utils/humanFileSize.mjs +29 -0
  25. package/dist/esm/components/StorageManager/utils/resolveFile.mjs +20 -0
  26. package/dist/esm/components/StorageManager/utils/uploadFile.mjs +26 -0
  27. package/dist/esm/index.mjs +2 -0
  28. package/dist/esm/version.mjs +3 -0
  29. package/dist/index.js +832 -1
  30. package/dist/styles.css +503 -746
  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 +13 -44
  49. package/dist/esm/components/StorageImage/StorageImage.js +0 -1
  50. package/dist/esm/components/StorageManager/StorageManager.js +0 -1
  51. package/dist/esm/components/StorageManager/hooks/useStorageManager/actions.js +0 -1
  52. package/dist/esm/components/StorageManager/hooks/useStorageManager/reducer.js +0 -1
  53. package/dist/esm/components/StorageManager/hooks/useStorageManager/types.js +0 -1
  54. package/dist/esm/components/StorageManager/hooks/useStorageManager/useStorageManager.js +0 -1
  55. package/dist/esm/components/StorageManager/hooks/useUploadFiles/resolveFile.js +0 -1
  56. package/dist/esm/components/StorageManager/hooks/useUploadFiles/useUploadFiles.js +0 -1
  57. package/dist/esm/components/StorageManager/types.js +0 -1
  58. package/dist/esm/components/StorageManager/ui/Container/Container.js +0 -1
  59. package/dist/esm/components/StorageManager/ui/DropZone/DropZone.js +0 -1
  60. package/dist/esm/components/StorageManager/ui/FileList/FileControl.js +0 -1
  61. package/dist/esm/components/StorageManager/ui/FileList/FileDetails.js +0 -1
  62. package/dist/esm/components/StorageManager/ui/FileList/FileList.js +0 -1
  63. package/dist/esm/components/StorageManager/ui/FileList/FileRemoveButton.js +0 -1
  64. package/dist/esm/components/StorageManager/ui/FileList/FileStatusMessage.js +0 -1
  65. package/dist/esm/components/StorageManager/ui/FileList/FileThumbnail.js +0 -1
  66. package/dist/esm/components/StorageManager/ui/FileListFooter/FileListFooter.js +0 -1
  67. package/dist/esm/components/StorageManager/ui/FileListHeader/FileListHeader.js +0 -1
  68. package/dist/esm/components/StorageManager/ui/FilePicker/FilePicker.js +0 -1
  69. package/dist/esm/components/StorageManager/utils/checkMaxFileSize.js +0 -1
  70. package/dist/esm/components/StorageManager/utils/displayText.js +0 -1
  71. package/dist/esm/components/StorageManager/utils/filterAllowedFiles.js +0 -1
  72. package/dist/esm/components/StorageManager/utils/humanFileSize.js +0 -1
  73. package/dist/esm/components/StorageManager/utils/uploadFile.js +0 -1
  74. package/dist/esm/index.js +0 -1
  75. package/dist/types/components/StorageImage/_tests_/StorageImage.test.d.ts +0 -1
  76. 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;
@@ -677,70 +672,6 @@
677
672
  --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large);
678
673
  --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap);
679
674
  --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap);
680
- --amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary);
681
- --amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small);
682
- --amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary);
683
- --amplify-components-fileuploader-dropzone-border-style: dashed;
684
- --amplify-components-fileuploader-dropzone-border-width: var(--amplify-border-widths-small);
685
- --amplify-components-fileuploader-dropzone-gap: var(--amplify-space-small);
686
- --amplify-components-fileuploader-dropzone-padding-block: var(--amplify-space-xl);
687
- --amplify-components-fileuploader-dropzone-padding-inline: var(--amplify-space-large);
688
- --amplify-components-fileuploader-dropzone-text-align: center;
689
- --amplify-components-fileuploader-dropzone-active-background-color: var(--amplify-colors-brand-primary-10);
690
- --amplify-components-fileuploader-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
691
- --amplify-components-fileuploader-dropzone-active-border-color: var(--amplify-colors-border-pressed);
692
- --amplify-components-fileuploader-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
693
- --amplify-components-fileuploader-dropzone-active-border-width: var(--amplify-border-widths-medium);
694
- --amplify-components-fileuploader-dropzone-icon-color: var(--amplify-colors-border-primary);
695
- --amplify-components-fileuploader-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
696
- --amplify-components-fileuploader-dropzone-text-color: var(--amplify-colors-font-tertiary);
697
- --amplify-components-fileuploader-dropzone-text-font-size: var(--amplify-font-sizes-medium);
698
- --amplify-components-fileuploader-dropzone-text-font-weight: var(--amplify-font-weights-bold);
699
- --amplify-components-fileuploader-file-background-color: var(--amplify-colors-background-primary);
700
- --amplify-components-fileuploader-file-border-radius: var(--amplify-radii-small);
701
- --amplify-components-fileuploader-file-border-color: var(--amplify-colors-border-primary);
702
- --amplify-components-fileuploader-file-border-style: solid;
703
- --amplify-components-fileuploader-file-border-width: var(--amplify-border-widths-small);
704
- --amplify-components-fileuploader-file-padding-block: var(--amplify-space-xs);
705
- --amplify-components-fileuploader-file-padding-inline: var(--amplify-space-small);
706
- --amplify-components-fileuploader-file-gap: var(--amplify-space-small);
707
- --amplify-components-fileuploader-file-align-items: baseline;
708
- --amplify-components-fileuploader-file-name-font-size: var(--amplify-font-sizes-medium);
709
- --amplify-components-fileuploader-file-name-font-weight: var(--amplify-font-weights-bold);
710
- --amplify-components-fileuploader-file-name-color: var(--amplify-colors-font-primary);
711
- --amplify-components-fileuploader-file-size-font-size: var(--amplify-font-sizes-small);
712
- --amplify-components-fileuploader-file-size-font-weight: var(--amplify-font-weights-normal);
713
- --amplify-components-fileuploader-file-size-color: var(--amplify-colors-font-tertiary);
714
- --amplify-components-fileuploader-file-image-width: var(--amplify-space-xxl);
715
- --amplify-components-fileuploader-file-image-height: var(--amplify-space-xxl);
716
- --amplify-components-fileuploader-file-image-background-color: var(--amplify-colors-background-secondary);
717
- --amplify-components-fileuploader-file-image-color: var(--amplify-colors-font-tertiary);
718
- --amplify-components-fileuploader-file-image-border-radius: var(--amplify-radii-small);
719
- --amplify-components-fileuploader-loader-stroke-linecap: round;
720
- --amplify-components-fileuploader-loader-stroke-empty: var(--amplify-colors-border-secondary);
721
- --amplify-components-fileuploader-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
722
- --amplify-components-fileuploader-loader-stroke-width: var(--amplify-border-widths-large);
723
- --amplify-components-fileuploader-previewer-background-color: var(--amplify-colors-background-primary);
724
- --amplify-components-fileuploader-previewer-border-color: var(--amplify-colors-border-primary);
725
- --amplify-components-fileuploader-previewer-border-style: solid;
726
- --amplify-components-fileuploader-previewer-border-width: var(--amplify-border-widths-small);
727
- --amplify-components-fileuploader-previewer-border-radius: var(--amplify-radii-small);
728
- --amplify-components-fileuploader-previewer-padding-block: var(--amplify-space-zero);
729
- --amplify-components-fileuploader-previewer-padding-inline: var(--amplify-space-zero);
730
- --amplify-components-fileuploader-previewer-max-height: 40rem;
731
- --amplify-components-fileuploader-previewer-max-width: auto;
732
- --amplify-components-fileuploader-previewer-text-font-size: var(--amplify-font-sizes-medium);
733
- --amplify-components-fileuploader-previewer-text-font-weight: var(--amplify-font-weights-bold);
734
- --amplify-components-fileuploader-previewer-text-color: var(--amplify-colors-font-primary);
735
- --amplify-components-fileuploader-previewer-body-padding-block: var(--amplify-space-medium);
736
- --amplify-components-fileuploader-previewer-body-padding-inline: var(--amplify-space-medium);
737
- --amplify-components-fileuploader-previewer-body-gap: var(--amplify-space-small);
738
- --amplify-components-fileuploader-previewer-footer-border-color: var(--amplify-colors-border-secondary);
739
- --amplify-components-fileuploader-previewer-footer-border-style: solid;
740
- --amplify-components-fileuploader-previewer-footer-border-width: var(--amplify-border-widths-small);
741
- --amplify-components-fileuploader-previewer-footer-padding-block: var(--amplify-space-medium);
742
- --amplify-components-fileuploader-previewer-footer-padding-inline: var(--amplify-space-medium);
743
- --amplify-components-fileuploader-previewer-footer-justify-content: space-between;
744
675
  --amplify-components-flex-gap: var(--amplify-space-medium);
745
676
  --amplify-components-flex-justify-content: normal;
746
677
  --amplify-components-flex-align-items: stretch;
@@ -787,12 +718,12 @@
787
718
  --amplify-components-link-focus-color: var(--amplify-colors-font-focus);
788
719
  --amplify-components-link-hover-color: var(--amplify-colors-font-hover);
789
720
  --amplify-components-link-visited-color: var(--amplify-colors-font-interactive);
790
- --amplify-components-liveness-camera-module-background-color: var(--amplify-colors-black);
721
+ --amplify-components-liveness-camera-module-background-color: var(--amplify-colors-background-primary);
791
722
  --amplify-components-loader-width: var(--amplify-font-sizes-medium);
792
723
  --amplify-components-loader-height: var(--amplify-font-sizes-medium);
793
724
  --amplify-components-loader-font-size: var(--amplify-font-sizes-xs);
794
725
  --amplify-components-loader-stroke-empty: var(--amplify-colors-neutral-20);
795
- --amplify-components-loader-stroke-filled: var(--amplify-colors-brand-primary-80);
726
+ --amplify-components-loader-stroke-filled: var(--amplify-colors-primary-80);
796
727
  --amplify-components-loader-stroke-linecap: round;
797
728
  --amplify-components-loader-animation-duration: 1s;
798
729
  --amplify-components-loader-small-width: var(--amplify-font-sizes-small);
@@ -805,7 +736,7 @@
805
736
  --amplify-components-loader-linear-min-width: 5rem;
806
737
  --amplify-components-loader-linear-font-size: var(--amplify-font-sizes-xxs);
807
738
  --amplify-components-loader-linear-stroke-width: var(--amplify-font-sizes-xxs);
808
- --amplify-components-loader-linear-stroke-filled: var(--amplify-colors-brand-primary-80);
739
+ --amplify-components-loader-linear-stroke-filled: var(--amplify-colors-primary-80);
809
740
  --amplify-components-loader-linear-stroke-empty: var(--amplify-colors-neutral-20);
810
741
  --amplify-components-loader-linear-stroke-linecap: round;
811
742
  --amplify-components-loader-linear-animation-duration: 1s;
@@ -921,6 +852,19 @@
921
852
  --amplify-components-passwordfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
922
853
  --amplify-components-passwordfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color);
923
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);
924
868
  --amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
925
869
  --amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
926
870
  --amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color);
@@ -964,7 +908,7 @@
964
908
  --amplify-components-radio-button-small-height: var(--amplify-font-sizes-small);
965
909
  --amplify-components-radio-button-large-width: var(--amplify-font-sizes-large);
966
910
  --amplify-components-radio-button-large-height: var(--amplify-font-sizes-large);
967
- --amplify-components-radio-button-checked-color: var(--amplify-colors-brand-primary-80);
911
+ --amplify-components-radio-button-checked-color: var(--amplify-colors-primary-80);
968
912
  --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled);
969
913
  --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus);
970
914
  --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
@@ -979,11 +923,12 @@
979
923
  --amplify-components-radiogroup-radio-background-color: var(--amplify-components-radio-button-background-color);
980
924
  --amplify-components-radiogroup-radio-checked-color: var(--amplify-components-radio-button-checked-color);
981
925
  --amplify-components-radiogroup-radio-label-color: var(--amplify-components-radio-label-color);
982
- --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);
983
928
  --amplify-components-rating-large-size: var(--amplify-font-sizes-xxxl);
984
929
  --amplify-components-rating-default-size: var(--amplify-font-sizes-xl);
985
930
  --amplify-components-rating-small-size: var(--amplify-font-sizes-small);
986
- --amplify-components-rating-filled-color: var(--amplify-colors-brand-secondary-80);
931
+ --amplify-components-rating-filled-color: var(--amplify-colors-secondary-80);
987
932
  --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary);
988
933
  --amplify-components-searchfield-color: var(--amplify-components-fieldcontrol-color);
989
934
  --amplify-components-searchfield-button-color: var(--amplify-components-button-color);
@@ -1000,7 +945,11 @@
1000
945
  --amplify-components-searchfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
1001
946
  --amplify-components-searchfield-button-hover-border-color: var(--amplify-components-button-hover-border-color);
1002
947
  --amplify-components-searchfield-button-hover-color: var(--amplify-components-button-hover-color);
948
+ --amplify-components-select-color: var(--amplify-components-fieldcontrol-color);
949
+ --amplify-components-select-background-color: var(--amplify-colors-background-primary);
1003
950
  --amplify-components-select-padding-inline-end: var(--amplify-space-xxl);
951
+ --amplify-components-select-disabled-color: var(--amplify-colors-font-disabled);
952
+ --amplify-components-select-disabled-background-color: var(--amplify-colors-background-disabled);
1004
953
  --amplify-components-select-wrapper-flex: 1;
1005
954
  --amplify-components-select-wrapper-display: block;
1006
955
  --amplify-components-select-wrapper-position: relative;
@@ -1013,15 +962,20 @@
1013
962
  --amplify-components-select-icon-wrapper-pointer-events: none;
1014
963
  --amplify-components-select-icon-wrapper-small-right: var(--amplify-space-xs);
1015
964
  --amplify-components-select-icon-wrapper-large-right: var(--amplify-space-medium);
1016
- --amplify-components-select-option-background-color: var(--amplify-colors-background-primary);
965
+ --amplify-components-select-option-background-color: transparent;
1017
966
  --amplify-components-select-option-color: var(--amplify-colors-font-primary);
1018
967
  --amplify-components-select-option-disabled-color: var(--amplify-colors-font-disabled);
968
+ --amplify-components-select-option-disabled-background-color: transparent;
1019
969
  --amplify-components-select-white-space: nowrap;
1020
970
  --amplify-components-select-min-width: 6.5rem;
1021
971
  --amplify-components-select-small-min-width: 5.5rem;
1022
972
  --amplify-components-select-small-padding-inline-end: var(--amplify-space-xl);
1023
973
  --amplify-components-select-large-min-width: 7.5rem;
1024
974
  --amplify-components-select-large-padding-inline-end: var(--amplify-space-xxl);
975
+ --amplify-components-select-expanded-padding-block: var(--amplify-space-xs);
976
+ --amplify-components-select-expanded-padding-inline: var(--amplify-space-small);
977
+ --amplify-components-select-expanded-option-padding-block: var(--amplify-space-xs);
978
+ --amplify-components-select-expanded-option-padding-inline: var(--amplify-space-small);
1025
979
  --amplify-components-selectfield-border-color: var(--amplify-components-fieldcontrol-border-color);
1026
980
  --amplify-components-selectfield-color: var(--amplify-components-fieldcontrol-color);
1027
981
  --amplify-components-selectfield-flex-direction: column;
@@ -1033,7 +987,7 @@
1033
987
  --amplify-components-sliderfield-track-border-radius: 9999px;
1034
988
  --amplify-components-sliderfield-track-height: 0.375rem;
1035
989
  --amplify-components-sliderfield-track-min-width: 10rem;
1036
- --amplify-components-sliderfield-range-background-color: var(--amplify-colors-brand-primary-80);
990
+ --amplify-components-sliderfield-range-background-color: var(--amplify-colors-primary-80);
1037
991
  --amplify-components-sliderfield-range-border-radius: 9999px;
1038
992
  --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled);
1039
993
  --amplify-components-sliderfield-thumb-width: 1.25rem;
@@ -1050,7 +1004,7 @@
1050
1004
  --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary);
1051
1005
  --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
1052
1006
  --amplify-components-sliderfield-thumb-focus-border-color: var(--amplify-colors-border-focus);
1053
- --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);
1054
1008
  --amplify-components-sliderfield-small-track-height: 0.25rem;
1055
1009
  --amplify-components-sliderfield-small-thumb-width: 1rem;
1056
1010
  --amplify-components-sliderfield-small-thumb-height: 1rem;
@@ -1081,10 +1035,10 @@
1081
1035
  --amplify-components-storagemanager-dropzone-padding-block: var(--amplify-space-xl);
1082
1036
  --amplify-components-storagemanager-dropzone-padding-inline: var(--amplify-space-large);
1083
1037
  --amplify-components-storagemanager-dropzone-text-align: center;
1084
- --amplify-components-storagemanager-dropzone-active-background-color: var(--amplify-colors-brand-primary-10);
1085
- --amplify-components-storagemanager-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
1038
+ --amplify-components-storagemanager-dropzone-active-background-color: var(--amplify-colors-primary-10);
1039
+ --amplify-components-storagemanager-dropzone-active-border-radius: var(--amplify-components-storagemanager-dropzone-border-radius);
1086
1040
  --amplify-components-storagemanager-dropzone-active-border-color: var(--amplify-colors-border-pressed);
1087
- --amplify-components-storagemanager-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
1041
+ --amplify-components-storagemanager-dropzone-active-border-style: var(--amplify-components-storagemanager-dropzone-border-style);
1088
1042
  --amplify-components-storagemanager-dropzone-active-border-width: var(--amplify-border-widths-medium);
1089
1043
  --amplify-components-storagemanager-dropzone-icon-color: var(--amplify-colors-border-primary);
1090
1044
  --amplify-components-storagemanager-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
@@ -1111,6 +1065,8 @@
1111
1065
  --amplify-components-storagemanager-file-image-background-color: var(--amplify-colors-background-secondary);
1112
1066
  --amplify-components-storagemanager-file-image-color: var(--amplify-colors-font-tertiary);
1113
1067
  --amplify-components-storagemanager-file-image-border-radius: var(--amplify-radii-small);
1068
+ --amplify-components-storagemanager-filelist-flex-direction: column;
1069
+ --amplify-components-storagemanager-filelist-gap: var(--amplify-space-small);
1114
1070
  --amplify-components-storagemanager-loader-stroke-linecap: round;
1115
1071
  --amplify-components-storagemanager-loader-stroke-empty: var(--amplify-colors-border-secondary);
1116
1072
  --amplify-components-storagemanager-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
@@ -1131,10 +1087,8 @@
1131
1087
  --amplify-components-storagemanager-previewer-body-padding-inline: var(--amplify-space-medium);
1132
1088
  --amplify-components-storagemanager-previewer-body-gap: var(--amplify-space-small);
1133
1089
  --amplify-components-storagemanager-previewer-footer-justify-content: flex-end;
1134
- --amplify-components-storagemanager-filelist-flex-direction: column;
1135
- --amplify-components-storagemanager-filelist-gap: var(--amplify-space-small);
1136
1090
  --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
1137
- --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);
1138
1092
  --amplify-components-switchfield-font-size: var(--amplify-font-sizes-medium);
1139
1093
  --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
1140
1094
  --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
@@ -1149,7 +1103,7 @@
1149
1103
  --amplify-components-switchfield-thumb-width: var(--amplify-space-relative-medium);
1150
1104
  --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-quaternary);
1151
1105
  --amplify-components-switchfield-track-border-radius: var(--amplify-radii-xxxl);
1152
- --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);
1153
1107
  --amplify-components-switchfield-track-height: var(--amplify-space-relative-medium);
1154
1108
  --amplify-components-switchfield-track-padding: var(--amplify-outline-widths-medium);
1155
1109
  --amplify-components-switchfield-track-transition-duration: var(--amplify-time-short);
@@ -1218,14 +1172,25 @@
1218
1172
  --amplify-components-tabs-item-padding-horizontal: var(--amplify-space-medium);
1219
1173
  --amplify-components-tabs-item-text-align: center;
1220
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;
1221
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);
1222
1182
  --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus);
1223
- --amplify-components-tabs-item-active-color: var(--amplify-colors-font-interactive);
1224
- --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive);
1225
1183
  --amplify-components-tabs-item-active-background-color: transparent;
1226
- --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);
1227
1187
  --amplify-components-tabs-item-disabled-background-color: transparent;
1228
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);
1229
1194
  --amplify-components-text-color: var(--amplify-colors-font-primary);
1230
1195
  --amplify-components-text-primary-color: var(--amplify-colors-font-primary);
1231
1196
  --amplify-components-text-secondary-color: var(--amplify-colors-font-secondary);
@@ -1265,15 +1230,15 @@
1265
1230
  --amplify-components-togglebutton-primary-disabled-border-color: var(--amplify-colors-border-disabled);
1266
1231
  --amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-disabled);
1267
1232
  --amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled);
1268
- --amplify-components-togglebutton-primary-pressed-background-color: var(--amplify-colors-brand-primary-80);
1269
- --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);
1270
1235
  --amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-background-primary);
1271
1236
  --amplify-components-togglebutton-primary-pressed-focus-background-color: var(--amplify-colors-border-focus);
1272
1237
  --amplify-components-togglebutton-primary-pressed-focus-border-color: var(--amplify-colors-border-focus);
1273
1238
  --amplify-components-togglebutton-primary-pressed-focus-color: var(--amplify-colors-background-primary);
1274
- --amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-brand-primary-60);
1275
- --amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-brand-primary-60);
1276
- --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);
1277
1242
  --amplify-components-togglebutton-primary-pressed-hover-color: var(--amplify-colors-background-primary);
1278
1243
  --amplify-components-togglebutton-link-background-color: var(--amplify-colors-transparent);
1279
1244
  --amplify-components-togglebutton-link-color: var(--amplify-colors-overlay-50);
@@ -1358,29 +1323,29 @@
1358
1323
  --amplify-colors-neutral-80: hsl(210, 10%, 40%);
1359
1324
  --amplify-colors-neutral-90: hsl(210, 25%, 25%);
1360
1325
  --amplify-colors-neutral-100: hsl(210, 50%, 10%);
1361
- --amplify-colors-brand-primary-10: var(--amplify-colors-teal-10);
1362
- --amplify-colors-brand-primary-20: var(--amplify-colors-teal-20);
1363
- --amplify-colors-brand-primary-40: var(--amplify-colors-teal-40);
1364
- --amplify-colors-brand-primary-60: var(--amplify-colors-teal-60);
1365
- --amplify-colors-brand-primary-80: var(--amplify-colors-teal-80);
1366
- --amplify-colors-brand-primary-90: var(--amplify-colors-teal-90);
1367
- --amplify-colors-brand-primary-100: var(--amplify-colors-teal-100);
1368
- --amplify-colors-brand-secondary-10: var(--amplify-colors-purple-10);
1369
- --amplify-colors-brand-secondary-20: var(--amplify-colors-purple-20);
1370
- --amplify-colors-brand-secondary-40: var(--amplify-colors-purple-40);
1371
- --amplify-colors-brand-secondary-60: var(--amplify-colors-purple-60);
1372
- --amplify-colors-brand-secondary-80: var(--amplify-colors-purple-80);
1373
- --amplify-colors-brand-secondary-90: var(--amplify-colors-purple-90);
1374
- --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);
1375
1340
  --amplify-colors-font-primary: var(--amplify-colors-neutral-100);
1376
1341
  --amplify-colors-font-secondary: var(--amplify-colors-neutral-90);
1377
1342
  --amplify-colors-font-tertiary: var(--amplify-colors-neutral-80);
1378
1343
  --amplify-colors-font-disabled: var(--amplify-colors-neutral-60);
1379
1344
  --amplify-colors-font-inverse: var(--amplify-colors-white);
1380
- --amplify-colors-font-interactive: var(--amplify-colors-brand-primary-80);
1381
- --amplify-colors-font-hover: var(--amplify-colors-brand-primary-90);
1382
- --amplify-colors-font-focus: var(--amplify-colors-brand-primary-100);
1383
- --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);
1384
1349
  --amplify-colors-font-info: var(--amplify-colors-blue-90);
1385
1350
  --amplify-colors-font-warning: var(--amplify-colors-orange-90);
1386
1351
  --amplify-colors-font-error: var(--amplify-colors-red-90);
@@ -1398,8 +1363,8 @@
1398
1363
  --amplify-colors-border-secondary: var(--amplify-colors-neutral-40);
1399
1364
  --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20);
1400
1365
  --amplify-colors-border-disabled: var(--amplify-colors-border-tertiary);
1401
- --amplify-colors-border-pressed: var(--amplify-colors-brand-primary-100);
1402
- --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);
1403
1368
  --amplify-colors-border-error: var(--amplify-colors-red-80);
1404
1369
  --amplify-colors-border-info: var(--amplify-colors-blue-80);
1405
1370
  --amplify-colors-border-success: var(--amplify-colors-green-80);
@@ -2939,12 +2904,6 @@ strong.amplify-text {
2939
2904
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
2940
2905
  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
2941
2906
  }
2942
- .amplify-input[disabled] {
2943
- color: var(--amplify-components-fieldcontrol-disabled-color);
2944
- cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
2945
- border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
2946
- background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
2947
- }
2948
2907
  .amplify-input--quiet {
2949
2908
  border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
2950
2909
  border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
@@ -2959,8 +2918,15 @@ strong.amplify-text {
2959
2918
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
2960
2919
  }
2961
2920
  .amplify-input--quiet[aria-invalid=true]:focus {
2921
+ border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color);
2962
2922
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
2963
2923
  }
2924
+ .amplify-input[disabled] {
2925
+ color: var(--amplify-components-fieldcontrol-disabled-color);
2926
+ cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
2927
+ border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
2928
+ background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
2929
+ }
2964
2930
 
2965
2931
  .amplify-textarea {
2966
2932
  box-sizing: border-box;
@@ -3011,12 +2977,6 @@ strong.amplify-text {
3011
2977
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
3012
2978
  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
3013
2979
  }
3014
- .amplify-textarea[disabled] {
3015
- color: var(--amplify-components-fieldcontrol-disabled-color);
3016
- cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
3017
- border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
3018
- background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
3019
- }
3020
2980
  .amplify-textarea--quiet {
3021
2981
  border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
3022
2982
  border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
@@ -3031,8 +2991,15 @@ strong.amplify-text {
3031
2991
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
3032
2992
  }
3033
2993
  .amplify-textarea--quiet[aria-invalid=true]:focus {
2994
+ border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color);
3034
2995
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
3035
2996
  }
2997
+ .amplify-textarea[disabled] {
2998
+ color: var(--amplify-components-fieldcontrol-disabled-color);
2999
+ cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
3000
+ border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
3001
+ background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
3002
+ }
3036
3003
 
3037
3004
  .amplify-image {
3038
3005
  height: var(--amplify-components-image-height);
@@ -3153,7 +3120,7 @@ strong.amplify-text {
3153
3120
  stroke-dashoffset: 0%;
3154
3121
  stroke-dasharray: none;
3155
3122
  }
3156
- .amplify-loader__percentage-text {
3123
+ .amplify-loader__label {
3157
3124
  fill: var(--amplify-components-loader-text-fill);
3158
3125
  stroke: none;
3159
3126
  }
@@ -3238,6 +3205,71 @@ strong.amplify-text {
3238
3205
  color: var(--amplify-components-copy-tool-tip-color);
3239
3206
  }
3240
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
+
3241
3273
  .amplify-alert {
3242
3274
  align-items: var(--amplify-components-alert-align-items);
3243
3275
  background-color: var(--amplify-components-alert-background-color);
@@ -3395,6 +3427,16 @@ strong.amplify-text {
3395
3427
  align-self: center;
3396
3428
  }
3397
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
+
3398
3440
  .amplify-breadcrumbs__list {
3399
3441
  display: flex;
3400
3442
  flex-wrap: var(--amplify-components-breadcrumbs-flex-wrap);
@@ -3466,7 +3508,7 @@ strong.amplify-text {
3466
3508
  .amplify-collection {
3467
3509
  flex-direction: column;
3468
3510
  }
3469
- .amplify-collection-pagination {
3511
+ .amplify-collection__pagination {
3470
3512
  justify-content: center;
3471
3513
  --amplify-components-pagination-current-color: var(
3472
3514
  --amplify-components-collection-pagination-current-color
@@ -3487,7 +3529,7 @@ strong.amplify-text {
3487
3529
  --amplify-components-collection-pagination-button-disabled-color
3488
3530
  );
3489
3531
  }
3490
- .amplify-collection-search {
3532
+ .amplify-collection__search {
3491
3533
  flex-direction: row;
3492
3534
  justify-content: center;
3493
3535
  --amplify-components-searchfield-input-color: var(
@@ -3543,6 +3585,7 @@ strong.amplify-text {
3543
3585
  }
3544
3586
  .amplify-checkbox--disabled {
3545
3587
  cursor: var(--amplify-components-checkbox-disabled-cursor);
3588
+ color: var(--amplify-components-checkbox-label-disabled-color);
3546
3589
  }
3547
3590
 
3548
3591
  .amplify-checkbox__button {
@@ -3625,7 +3668,10 @@ strong.amplify-text {
3625
3668
  background-color: var(--amplify-internal-checkbox-icon-disabled-background-color);
3626
3669
  }
3627
3670
 
3628
- .amplify-checkbox__label[data-disabled=true] {
3671
+ .amplify-checkbox__label {
3672
+ color: var(--amplify-components-checkbox-label-color);
3673
+ }
3674
+ .amplify-checkbox__label--disabled {
3629
3675
  color: var(--amplify-components-checkbox-label-disabled-color);
3630
3676
  }
3631
3677
 
@@ -3641,17 +3687,27 @@ strong.amplify-text {
3641
3687
  }
3642
3688
 
3643
3689
  .amplify-divider {
3690
+ --amplify-internal-divider-size: var(
3691
+ --amplify-components-divider-border-width
3692
+ );
3644
3693
  border-color: var(--amplify-components-divider-border-color);
3645
3694
  border-style: var(--amplify-components-divider-border-style);
3646
3695
  border-width: 0;
3647
3696
  opacity: var(--amplify-components-divider-opacity);
3648
3697
  padding: 0;
3649
- display: block;
3650
- --amplify-internal-divider-size: var(
3651
- --amplify-components-divider-border-width
3652
- );
3698
+ display: flex;
3653
3699
  position: relative;
3654
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);
3655
3711
  }
3656
3712
  .amplify-divider--small {
3657
3713
  --amplify-internal-divider-size: var(
@@ -3669,134 +3725,15 @@ strong.amplify-text {
3669
3725
  }
3670
3726
  .amplify-divider--vertical {
3671
3727
  border-left-width: var(--amplify-internal-divider-size);
3672
- }
3673
- .amplify-divider--label {
3674
- display: flex;
3675
- justify-content: center;
3676
- }
3677
- .amplify-divider--label::after {
3678
- content: attr(data-label);
3679
- position: absolute;
3680
- transform: translateY(-50%);
3681
- font-size: var(--amplify-components-divider-label-font-size);
3682
- padding-inline: var(--amplify-components-divider-label-padding-inline);
3683
- background-color: var(--amplify-components-divider-label-background-color);
3684
- color: var(--amplify-components-divider-label-color);
3685
- }
3686
- .amplify-divider--label[aria-orientation=vertical] {
3687
3728
  flex-direction: column;
3688
3729
  }
3689
- .amplify-divider--label[aria-orientation=vertical]::after {
3730
+ .amplify-divider--vertical::after {
3690
3731
  top: auto;
3691
3732
  transform: translateX(-50%);
3692
3733
  padding-block: 0;
3693
3734
  padding-inline: 0;
3694
3735
  }
3695
3736
 
3696
- .amplify-expander {
3697
- display: block;
3698
- background-color: var(--amplify-components-expander-background-color);
3699
- border-radius: var(--amplify-components-expander-border-radius);
3700
- box-shadow: var(--amplify-components-expander-box-shadow);
3701
- width: var(--amplify-components-expander-width);
3702
- }
3703
-
3704
- .amplify-expander__item {
3705
- display: block;
3706
- overflow: hidden;
3707
- box-shadow: var(--amplify-components-expander-item-box-shadow);
3708
- }
3709
- .amplify-expander__item:first-of-type {
3710
- border-start-start-radius: var(--amplify-components-expander-item-border-start-start-radius);
3711
- border-start-end-radius: var(--amplify-components-expander-item-border-start-end-radius);
3712
- }
3713
- @supports not (border-start-start-radius: var(--amplify-components-expander-item-border-start-start-radius)) {
3714
- .amplify-expander__item:first-of-type {
3715
- border-top-left-radius: var(--amplify-components-expander-item-border-top-left-radius);
3716
- border-top-right-radius: var(--amplify-components-expander-item-border-top-right-radius);
3717
- }
3718
- }
3719
- .amplify-expander__item:last-of-type {
3720
- box-shadow: none;
3721
- border-end-start-radius: var(--amplify-components-expander-item-border-end-start-radius);
3722
- border-end-end-radius: var(--amplify-components-expander-item-border-end-end-radius);
3723
- }
3724
- @supports not (border-end-start-radius: var(--amplify-components-expander-item-border-end-start-radius)) {
3725
- .amplify-expander__item:last-of-type {
3726
- border-bottom-left-radius: var(--amplify-components-expander-item-border-bottom-left-radius);
3727
- border-bottom-right-radius: var(--amplify-components-expander-item-border-bottom-right-radius);
3728
- }
3729
- }
3730
- .amplify-expander__item:focus-within {
3731
- box-shadow: var(--amplify-components-expander-item-focus-box-shadow);
3732
- }
3733
-
3734
- .amplify-expander__header {
3735
- display: flex;
3736
- box-shadow: var(--amplify-components-expander-header-box-shadow);
3737
- }
3738
-
3739
- .amplify-expander__trigger {
3740
- flex: 1;
3741
- display: flex;
3742
- min-height: var(--amplify-components-expander-trigger-min-height);
3743
- padding-inline-start: var(--amplify-components-expander-trigger-padding-inline-start);
3744
- padding-inline-end: var(--amplify-components-expander-trigger-padding-inline-end);
3745
- align-items: var(--amplify-components-expander-trigger-align-items);
3746
- justify-content: var(--amplify-components-expander-trigger-justify-content);
3747
- }
3748
- .amplify-expander__trigger:hover {
3749
- background-color: var(--amplify-components-expander-trigger-hover-background-color);
3750
- }
3751
-
3752
- .amplify-expander__content {
3753
- display: block;
3754
- padding-inline-start: var(--amplify-components-expander-content-padding-inline-start);
3755
- padding-inline-end: var(--amplify-components-expander-content-padding-inline-end);
3756
- }
3757
- .amplify-expander__content[data-state=open] {
3758
- animation-name: amplify-expander-slide-down;
3759
- animation-duration: var(--amplify-components-expander-content-open-animation-duration);
3760
- animation-timing-function: var(--amplify-components-expander-content-open-animation-timing-function);
3761
- }
3762
- .amplify-expander__content[data-state=closed] {
3763
- animation-name: amplify-expander-slide-up;
3764
- animation-duration: var(--amplify-components-expander-content-closed-animation-duration);
3765
- animation-timing-function: var(--amplify-components-expander-content-closed-animation-timing-function);
3766
- }
3767
-
3768
- .amplify-expander__content__text {
3769
- display: block;
3770
- color: var(--amplify-components-expander-content-text-color);
3771
- padding-block-start: var(--amplify-components-expander-content-text-padding-block-start);
3772
- padding-block-end: var(--amplify-components-expander-content-text-padding-block-end);
3773
- }
3774
-
3775
- .amplify-expander__icon {
3776
- transition-property: transform;
3777
- transition-duration: var(--amplify-components-expander-icon-transition-duration);
3778
- transition-timing-function: var(--amplify-components-expander-icon-transition-timing-function);
3779
- }
3780
- [data-state=open] .amplify-expander__icon {
3781
- transform: rotate(180deg);
3782
- }
3783
-
3784
- @keyframes amplify-expander-slide-down {
3785
- from {
3786
- height: 0;
3787
- }
3788
- to {
3789
- height: auto;
3790
- }
3791
- }
3792
- @keyframes amplify-expander-slide-up {
3793
- from {
3794
- height: auto;
3795
- }
3796
- to {
3797
- height: 0;
3798
- }
3799
- }
3800
3737
  .amplify-field {
3801
3738
  font-size: var(--amplify-components-field-font-size);
3802
3739
  gap: var(--amplify-components-field-gap);
@@ -3991,8 +3928,15 @@ html[dir=rtl] .amplify-field-group__inner-start {
3991
3928
  right: var(--amplify-space-medium);
3992
3929
  }
3993
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
+
3994
3937
  .amplify-liveness-cancel-button {
3995
- background-color: var(--amplify-colors-background-primary);
3938
+ background-color: #fff;
3939
+ color: hsl(190, 95%, 30%);
3996
3940
  }
3997
3941
 
3998
3942
  .amplify-liveness-fade-out {
@@ -4024,6 +3968,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4024
3968
  left: 0;
4025
3969
  height: 100%;
4026
3970
  width: 100%;
3971
+ z-index: 2;
4027
3972
  }
4028
3973
 
4029
3974
  .amplify-liveness-video {
@@ -4032,6 +3977,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4032
3977
  left: 0;
4033
3978
  width: 100%;
4034
3979
  height: 100%;
3980
+ transform: scaleX(-1);
4035
3981
  }
4036
3982
 
4037
3983
  .amplify-liveness-freshness-canvas {
@@ -4081,14 +4027,18 @@ html[dir=rtl] .amplify-field-group__inner-start {
4081
4027
  .amplify-liveness-recording-icon {
4082
4028
  flex-direction: column;
4083
4029
  align-items: center;
4084
- background-color: var(--amplify-colors-background-primary);
4030
+ background-color: #fff;
4085
4031
  padding: var(--amplify-space-xxs);
4086
4032
  gap: var(--amplify-space-xxs);
4087
4033
  border-radius: var(--amplify-radii-small);
4088
4034
  }
4089
4035
 
4036
+ .amplify-liveness-recording-icon .amplify-text {
4037
+ color: var(--amplify-colors-black);
4038
+ }
4039
+
4090
4040
  .amplify-liveness-instruction-overlay {
4091
- z-index: 1;
4041
+ z-index: 2;
4092
4042
  }
4093
4043
 
4094
4044
  .amplify-liveness-countdown-container {
@@ -4107,7 +4057,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4107
4057
  .amplify-liveness-toast {
4108
4058
  background-color: var(--amplify-colors-background-primary);
4109
4059
  padding: var(--amplify-space-small);
4110
- border-radius: var(--amplify-radii-medium);
4060
+ max-width: 100%;
4111
4061
  }
4112
4062
 
4113
4063
  .amplify-liveness-toast__message {
@@ -4116,12 +4066,17 @@ html[dir=rtl] .amplify-field-group__inner-start {
4116
4066
  flex-direction: column;
4117
4067
  }
4118
4068
 
4069
+ .amplify-liveness-toast--medium {
4070
+ border-radius: var(--amplify-radii-medium);
4071
+ }
4072
+
4119
4073
  .amplify-liveness-toast--large {
4120
- font-size: var(--amplify-font-sizes-xl);
4074
+ font-size: var(--amplify-font-sizes-xxl);
4075
+ padding: 0 var(--amplify-space-xs);
4121
4076
  }
4122
4077
 
4123
4078
  .amplify-liveness-toast--primary {
4124
- background-color: var(--amplify-colors-brand-primary-80);
4079
+ background-color: var(--amplify-colors-primary-80);
4125
4080
  }
4126
4081
  .amplify-liveness-toast--primary .amplify-liveness-toast__message {
4127
4082
  color: var(--amplify-colors-font-inverse);
@@ -4181,7 +4136,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4181
4136
  content: "";
4182
4137
  width: 100%;
4183
4138
  height: 100%;
4184
- background: var(--amplify-colors-brand-primary-40);
4139
+ background: var(--amplify-colors-primary-80);
4185
4140
  left: -100%;
4186
4141
  transform: translate(var(--percentage), 0);
4187
4142
  transition: var(--amplify-liveness-match-indicator-transition);
@@ -4194,7 +4149,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4194
4149
  width: var(--amplify-space-small);
4195
4150
  height: var(--height);
4196
4151
  border-radius: var(--amplify-radii-medium);
4197
- background: var(--amplify-colors-brand-primary-80);
4152
+ background: var(--amplify-colors-primary-80);
4198
4153
  left: 0;
4199
4154
  top: 0;
4200
4155
  transform: translate(-50%, calc(var(--height) / 2 * -1));
@@ -4250,7 +4205,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4250
4205
 
4251
4206
  .amplify-liveness-landscape-error-modal {
4252
4207
  background-color: var(--amplify-colors-background-primary);
4253
- direction: column;
4208
+ flex-direction: column;
4254
4209
  text-align: center;
4255
4210
  align-items: center;
4256
4211
  justify-content: center;
@@ -4281,9 +4236,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
4281
4236
  }
4282
4237
 
4283
4238
  .amplify-liveness-start-screen-warning {
4284
- color: var(--amplify-colors-orange-80);
4285
- background-color: var(--amplify-colors-orange-20);
4239
+ color: var(--amplify-colors-blue-90);
4240
+ background-color: var(--amplify-colors-blue-10);
4286
4241
  align-items: center;
4242
+ z-index: 3;
4287
4243
  }
4288
4244
 
4289
4245
  .amplify-liveness-start-screen-instructions__heading {
@@ -4302,7 +4258,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4302
4258
  top: 0;
4303
4259
  width: 100%;
4304
4260
  height: 100%;
4305
- padding: var(--amplify-space-xl);
4261
+ padding: var(--amplify-space-large);
4306
4262
  }
4307
4263
 
4308
4264
  .amplify-liveness-error-modal {
@@ -4316,6 +4272,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
4316
4272
  font-weight: var(--amplify-font-weights-bold);
4317
4273
  }
4318
4274
 
4275
+ .amplify-liveness-hint--mobile {
4276
+ margin-top: var(--amplify-space-xxxl);
4277
+ }
4278
+
4319
4279
  .amplify-liveness-hint__text {
4320
4280
  align-items: center;
4321
4281
  gap: var(--amplify-space-xs);
@@ -4323,13 +4283,12 @@ html[dir=rtl] .amplify-field-group__inner-start {
4323
4283
 
4324
4284
  .amplify-liveness-popover {
4325
4285
  position: relative;
4326
- cursor: pointer;
4327
4286
  }
4328
4287
 
4329
4288
  .amplify-liveness-popover__anchor {
4330
4289
  position: absolute;
4331
4290
  top: 26px;
4332
- left: 3px;
4291
+ left: 20px;
4333
4292
  z-index: 3;
4334
4293
  border-style: solid;
4335
4294
  border-width: 0 9px 9px 9px;
@@ -4339,7 +4298,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4339
4298
  .amplify-liveness-popover__anchor-secondary {
4340
4299
  position: absolute;
4341
4300
  top: 24px;
4342
- left: 2px;
4301
+ left: 19px;
4343
4302
  z-index: 2;
4344
4303
  border-style: solid;
4345
4304
  border-width: 0 10px 10px 10px;
@@ -4352,171 +4311,63 @@ html[dir=rtl] .amplify-field-group__inner-start {
4352
4311
  color: var(--amplify-colors-font-primary);
4353
4312
  flex-direction: row;
4354
4313
  font-size: var(--amplify-font-sizes-xs);
4314
+ font-weight: var(--amplify-font-weights-normal);
4355
4315
  padding: var(--amplify-space-small);
4356
4316
  top: 33px;
4357
4317
  width: 240px;
4358
4318
  border: 1px solid var(--amplify-colors-border-secondary);
4359
4319
  border-radius: 2px;
4320
+ z-index: 4;
4360
4321
  }
4361
4322
 
4362
- .amplify-fileuploader__dropzone {
4363
- background-color: var(--amplify-components-fileuploader-dropzone-background-color);
4364
- border-color: var(--amplify-components-fileuploader-dropzone-border-color);
4365
- border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
4366
- border-style: var(--amplify-components-fileuploader-dropzone-border-style);
4367
- border-width: var(--amplify-components-fileuploader-dropzone-border-width);
4368
- text-align: var(--amplify-components-fileuploader-dropzone-text-align);
4369
- padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
4370
- padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
4371
- display: flex;
4323
+ .amplify-liveness-start-screen-camera-select {
4372
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);
4373
4331
  align-items: center;
4374
- gap: var(--amplify-components-fileuploader-dropzone-gap);
4375
- }
4376
- .amplify-fileuploader__dropzone--small {
4377
- flex-direction: row;
4378
- justify-content: center;
4379
- }
4380
- .amplify-fileuploader__dropzone--active {
4381
- border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
4382
- border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
4383
- background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
4384
- }
4385
- .amplify-fileuploader__dropzone__icon {
4386
- font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
4387
- color: var(--amplify-components-fileuploader-dropzone-icon-color);
4388
- }
4389
- .amplify-fileuploader__dropzone__text {
4390
- color: var(--amplify-components-fileuploader-dropzone-text-color);
4391
- font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
4392
- font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
4393
- }
4394
- .amplify-fileuploader__file {
4395
- position: relative;
4396
- border-width: var(--amplify-components-fileuploader-file-border-width);
4397
- border-style: var(--amplify-components-fileuploader-file-border-style);
4398
- border-color: var(--amplify-components-fileuploader-file-border-color);
4399
- border-radius: var(--amplify-components-fileuploader-file-border-radius);
4332
+ justify-content: flex-end;
4400
4333
  display: flex;
4401
- flex-direction: column;
4402
- padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
4403
- padding-block: var(--amplify-components-fileuploader-file-padding-block);
4404
- align-items: var(--amplify-components-fileuploader-file-align-items);
4334
+ z-index: 2;
4405
4335
  }
4406
- .amplify-fileuploader__file__wrapper {
4407
- width: 100%;
4336
+
4337
+ .amplify-liveness-start-screen-camera-select__container {
4408
4338
  display: flex;
4409
- flex-direction: row;
4410
- align-items: center;
4411
- gap: var(--amplify-components-fileuploader-file-gap);
4412
- }
4413
- .amplify-fileuploader__file__name {
4414
- text-overflow: ellipsis;
4415
- overflow: hidden;
4416
- font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
4417
- font-size: var(--amplify-components-fileuploader-file-name-font-size);
4418
- color: var(--amplify-components-fileuploader-file-name-color);
4419
- }
4420
- .amplify-fileuploader__file__size {
4421
- font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
4422
- font-size: var(--amplify-components-fileuploader-file-size-font-size);
4423
- color: var(--amplify-components-fileuploader-file-size-color);
4339
+ justify-content: space-between;
4340
+ align-items: inherit;
4341
+ gap: var(--amplify-space-xs);
4424
4342
  }
4425
- .amplify-fileuploader__file__main {
4426
- flex: 1;
4427
- white-space: nowrap;
4428
- overflow: hidden;
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);
4429
4350
  }
4430
- .amplify-fileuploader__file__image {
4431
- position: relative;
4432
- display: flex;
4351
+
4352
+ .amplify-liveness-start-screen-camera-waiting {
4353
+ flex-direction: column;
4433
4354
  align-items: center;
4434
4355
  justify-content: center;
4435
- width: var(--amplify-components-fileuploader-file-image-width);
4436
- height: var(--amplify-components-fileuploader-file-image-height);
4437
- background-color: var(--amplify-components-fileuploader-file-image-background-color);
4438
- border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
4439
- color: var(--amplify-components-fileuploader-file-image-color);
4440
- }
4441
- .amplify-fileuploader__file__image img {
4442
- max-height: 100%;
4443
- }
4444
- .amplify-fileuploader__file__status--error {
4445
- color: var(--amplify-colors-font-error);
4446
- font-size: var(--amplify-components-fileuploader-file-size-font-size);
4447
- }
4448
- .amplify-fileuploader__file__status--success {
4449
- color: var(--amplify-colors-font-success);
4450
- }
4451
- .amplify-fileuploader__loader {
4452
- stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
4453
- stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
4454
- stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
4455
- height: var(--amplify-components-fileuploader-loader-stroke-width);
4456
- --amplify-components-loader-linear-stroke-filled: var(
4457
- --amplify-components-fileuploader-loader-stroke-filled
4458
- );
4459
- overflow: hidden;
4460
- position: absolute;
4461
- bottom: 0;
4462
- left: 0;
4463
- width: 100%;
4464
- }
4465
- .amplify-fileuploader__previewer {
4466
- display: block;
4467
- max-width: var(--amplify-components-fileuploader-previewer-max-width);
4468
- background-color: var(--amplify-components-fileuploader-previewer-background-color);
4469
- border-width: var(--amplify-components-fileuploader-previewer-border-width);
4470
- border-style: var(--amplify-components-fileuploader-previewer-border-style);
4471
- border-color: var(--amplify-components-fileuploader-previewer-border-color);
4472
- border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
4473
- padding-inline: var(--amplify-components-fileuploader-previewer-padding-inline);
4474
- padding-block: var(--amplify-components-fileuploader-previewer-padding-block);
4475
- }
4476
- .amplify-fileuploader__previewer__text {
4477
- font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
4478
- font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
4479
- color: var(--amplify-components-fileuploader-previewer-text-color);
4480
- }
4481
- .amplify-fileuploader__previewer__body {
4482
- display: flex;
4483
- flex-direction: column;
4484
- max-height: var(--amplify-components-fileuploader-previewer-max-height);
4485
- max-width: var(--amplify-components-fileuploader-previewer-max-width);
4486
- overflow: auto;
4487
- gap: var(--amplify-components-fileuploader-previewer-body-gap);
4488
- padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
4489
- padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
4490
- }
4491
- .amplify-fileuploader__previewer__footer {
4492
- max-width: var(--amplify-components-fileuploader-previewer-max-width);
4493
- border-top-width: var(--amplify-components-fileuploader-previewer-footer-border-width);
4494
- border-top-style: var(--amplify-components-fileuploader-previewer-footer-border-style);
4495
- border-top-color: var(--amplify-components-fileuploader-previewer-footer-border-color);
4496
- padding-inline: var(--amplify-components-fileuploader-previewer-footer-padding-inline);
4497
- padding-block: var(--amplify-components-fileuploader-previewer-footer-padding-block);
4498
- position: relative;
4499
- display: flex;
4500
- flex-direction: row;
4501
- justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
4502
- }
4503
- .amplify-fileuploader__previewer__footer__actions {
4504
- display: flex;
4505
- flex-direction: row;
4506
- gap: var(--amplify-space-small);
4356
+ text-align: center;
4357
+ height: 480px;
4507
4358
  }
4508
4359
 
4509
- .amplify-menu-content-wrapper {
4360
+ .amplify-menu__wrapper {
4510
4361
  z-index: 999999;
4511
4362
  }
4512
4363
 
4513
- .amplify-menu-trigger {
4364
+ .amplify-menu__trigger {
4514
4365
  display: flex;
4515
4366
  justify-content: center;
4516
4367
  align-items: center;
4517
4368
  }
4518
4369
 
4519
- .amplify-menu-content {
4370
+ .amplify-menu__content {
4520
4371
  background-color: var(--amplify-components-menu-background-color);
4521
4372
  border-radius: var(--amplify-components-menu-border-radius);
4522
4373
  box-shadow: var(--amplify-components-menu-box-shadow);
@@ -4529,33 +4380,33 @@ html[dir=rtl] .amplify-field-group__inner-start {
4529
4380
  border-style: var(--amplify-components-menu-border-style);
4530
4381
  }
4531
4382
 
4532
- .amplify-menu-content__item {
4383
+ .amplify-menu__content__item {
4533
4384
  min-height: var(--amplify-components-menu-item-min-height);
4534
4385
  padding-inline-start: var(--amplify-components-menu-item-padding-inline-start);
4535
4386
  padding-inline-end: var(--amplify-components-menu-item-padding-inline-end);
4536
4387
  }
4537
4388
 
4538
- .amplify-menu-content__item:not(:first-child):not(:last-child) {
4389
+ .amplify-menu__content__item:not(:first-child):not(:last-child) {
4539
4390
  border-radius: 0;
4540
4391
  }
4541
4392
 
4542
- .amplify-menu-content__item:first-child {
4393
+ .amplify-menu__content__item:first-child {
4543
4394
  border-end-end-radius: 0;
4544
4395
  border-end-start-radius: 0;
4545
4396
  }
4546
4397
  @supports not (border-end-end-radius: 0) {
4547
- .amplify-menu-content__item:first-child {
4398
+ .amplify-menu__content__item:first-child {
4548
4399
  border-bottom-right-radius: 0;
4549
4400
  border-bottom-left-radius: 0;
4550
4401
  }
4551
4402
  }
4552
4403
 
4553
- .amplify-menu-content__item:last-child {
4404
+ .amplify-menu__content__item:last-child {
4554
4405
  border-start-end-radius: 0;
4555
4406
  border-start-start-radius: 0;
4556
4407
  }
4557
4408
  @supports not (border-end-end-radius: 0) {
4558
- .amplify-menu-content__item:last-child {
4409
+ .amplify-menu__content__item:last-child {
4559
4410
  border-top-right-radius: 0;
4560
4411
  border-top-left-radius: 0;
4561
4412
  }
@@ -4673,47 +4524,42 @@ html[dir=rtl] .amplify-field-group__inner-start {
4673
4524
  gap: var(--amplify-components-message-dismiss-gap);
4674
4525
  }
4675
4526
 
4676
- .amplify-pagination__item-current, .amplify-pagination__item-button {
4677
- height: var(--amplify-components-pagination-item-shared-height);
4678
- min-width: var(--amplify-components-pagination-item-shared-min-width);
4679
- border-radius: var(--amplify-components-pagination-item-shared-border-radius);
4680
- }
4681
-
4682
4527
  .amplify-pagination {
4683
4528
  list-style-type: none;
4684
4529
  }
4685
- .amplify-pagination li {
4686
- margin-left: var(--amplify-components-pagination-item-container-margin-left);
4687
- margin-right: var(--amplify-components-pagination-item-container-margin-right);
4688
- }
4689
- .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);
4690
4534
  display: flex;
4691
4535
  align-items: center;
4692
4536
  justify-content: center;
4693
4537
  font-weight: initial;
4694
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);
4695
4541
  padding-inline-start: var(--amplify-components-pagination-button-padding-inline-start);
4696
4542
  padding-inline-end: var(--amplify-components-pagination-button-padding-inline-end);
4697
4543
  transition-property: var(--amplify-components-pagination-button-transition-property);
4698
4544
  transition-duration: var(--amplify-components-pagination-button-transition-duration);
4699
4545
  }
4700
- .amplify-pagination__item-button:hover {
4546
+ .amplify-pagination__item:hover {
4701
4547
  text-decoration: none;
4702
4548
  color: var(--amplify-components-pagination-button-hover-color);
4703
4549
  background-color: var(--amplify-components-pagination-button-hover-background-color);
4704
4550
  }
4705
- .amplify-pagination__item-button--disabled {
4551
+ .amplify-pagination__item--disabled {
4706
4552
  color: var(--amplify-components-pagination-button-disabled-color);
4707
4553
  pointer-events: none;
4708
4554
  }
4709
- .amplify-pagination__item-current {
4555
+ .amplify-pagination__item--current {
4710
4556
  align-items: var(--amplify-components-pagination-current-align-items);
4711
4557
  justify-content: var(--amplify-components-pagination-current-justify-content);
4712
4558
  color: var(--amplify-components-pagination-current-color);
4713
4559
  font-size: var(--amplify-components-pagination-current-font-size);
4714
4560
  background-color: var(--amplify-components-pagination-current-background-color);
4715
4561
  }
4716
- .amplify-pagination__item-ellipsis {
4562
+ .amplify-pagination__item--ellipsis {
4717
4563
  align-items: var(--amplify-components-pagination-ellipsis-align-items);
4718
4564
  justify-content: var(--amplify-components-pagination-ellipsis-justify-content);
4719
4565
  padding-inline-start: var(--amplify-components-pagination-ellipsis-padding-inline-start);
@@ -4763,11 +4609,45 @@ html[dir=rtl] .amplify-field-group__inner-start {
4763
4609
  --amplify-components-button-hover-color: var(
4764
4610
  --amplify-components-passwordfield-button-hover-color
4765
4611
  );
4766
- }
4767
-
4768
- .amplify-field__show-password--error {
4769
- color: var(--amplify-components-fieldcontrol-error-color);
4770
- 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
+ );
4771
4651
  }
4772
4652
 
4773
4653
  .amplify-phonenumberfield select:not(:focus) {
@@ -4808,11 +4688,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
4808
4688
  font-size: var(--amplify-components-rating-default-size);
4809
4689
  line-height: var(--amplify-components-rating-default-size);
4810
4690
  }
4811
- .amplify-rating .amplify-icon {
4812
- font-size: unset;
4813
- line-height: unset;
4814
- height: 1em;
4815
- }
4816
4691
  .amplify-rating--small {
4817
4692
  font-size: var(--amplify-components-rating-small-size);
4818
4693
  line-height: var(--amplify-components-rating-small-size);
@@ -4821,39 +4696,22 @@ html[dir=rtl] .amplify-field-group__inner-start {
4821
4696
  font-size: var(--amplify-components-rating-large-size);
4822
4697
  line-height: var(--amplify-components-rating-large-size);
4823
4698
  }
4824
-
4825
- .amplify-rating-filled {
4826
- fill: currentColor;
4827
- display: inline-block;
4828
- flex-shrink: 0;
4829
- width: 1em;
4830
- height: 1em;
4831
- }
4832
-
4833
- .amplify-rating-icon-container {
4699
+ .amplify-rating__item {
4834
4700
  position: relative;
4835
4701
  height: 1em;
4836
4702
  width: 1em;
4837
4703
  }
4838
-
4839
- .amplify-rating-label {
4840
- position: absolute;
4841
- overflow: hidden;
4842
- height: 1em;
4843
- width: 1em;
4844
- }
4845
-
4846
- .amplify-rating-icon {
4704
+ .amplify-rating__icon {
4847
4705
  width: 1em;
4848
4706
  height: 1em;
4849
4707
  display: block;
4708
+ position: absolute;
4709
+ overflow: hidden;
4850
4710
  }
4851
-
4852
- .amplify-rating-icon-filled {
4711
+ .amplify-rating__icon--filled {
4853
4712
  color: var(--amplify-components-rating-filled-color);
4854
4713
  }
4855
-
4856
- .amplify-rating-icon-empty {
4714
+ .amplify-rating__icon--empty {
4857
4715
  color: var(--amplify-components-rating-empty-color);
4858
4716
  }
4859
4717
 
@@ -4863,7 +4721,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
4863
4721
  gap: inherit;
4864
4722
  flex-direction: row-reverse;
4865
4723
  position: relative;
4866
- --amplify-components-text-color: var(--amplify-components-radio-label-color);
4867
4724
  }
4868
4725
  .amplify-radio--disabled {
4869
4726
  cursor: var(--amplify-components-radio-disabled-cursor);
@@ -4934,7 +4791,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
4934
4791
  background-color: var(--amplify-components-radio-button-disabled-background-color);
4935
4792
  }
4936
4793
 
4937
- .amplify-radio__label[data-disabled=true] {
4794
+ .amplify-radio__label {
4795
+ color: var(--amplify-components-radio-label-color);
4796
+ }
4797
+ .amplify-radio__label--disabled {
4938
4798
  color: var(--amplify-components-radio-label-disabled-color);
4939
4799
  }
4940
4800
 
@@ -4947,8 +4807,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
4947
4807
  .amplify-radiogroupfield {
4948
4808
  flex-direction: column;
4949
4809
  align-items: flex-start;
4950
- --amplify-components-field-label-color: var(
4951
- --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
4952
4815
  );
4953
4816
  --amplify-components-radio-button-border-width: var(
4954
4817
  --amplify-components-radiogroup-radio-border-width
@@ -5005,7 +4868,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
5005
4868
  align-self: stretch;
5006
4869
  }
5007
4870
 
5008
- .amplify-select__icon-wrapper {
4871
+ .amplify-select__icon {
5009
4872
  color: var(--amplify-components-fieldcontrol-color);
5010
4873
  align-items: var(--amplify-components-select-icon-wrapper-align-items);
5011
4874
  position: var(--amplify-components-select-icon-wrapper-position);
@@ -5014,10 +4877,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
5014
4877
  transform: var(--amplify-components-select-icon-wrapper-transform);
5015
4878
  pointer-events: var(--amplify-components-select-icon-wrapper-pointer-events);
5016
4879
  }
5017
- .amplify-select__icon-wrapper--small {
4880
+ .amplify-select__icon--small {
5018
4881
  right: var(--amplify-components-select-icon-wrapper-small-right);
5019
4882
  }
5020
- .amplify-select__icon-wrapper--large {
4883
+ .amplify-select__icon--large {
5021
4884
  right: var(--amplify-components-select-icon-wrapper-large-right);
5022
4885
  }
5023
4886
 
@@ -5040,6 +4903,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
5040
4903
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
5041
4904
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
5042
4905
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
4906
+ background-color: var(--amplify-components-select-background-color);
4907
+ color: var(--amplify-components-select-color);
5043
4908
  min-width: var(--amplify-components-select-min-width);
5044
4909
  padding-inline-end: var(--amplify-components-select-padding-inline-end);
5045
4910
  white-space: var(--amplify-components-select-white-space);
@@ -5069,12 +4934,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
5069
4934
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
5070
4935
  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
5071
4936
  }
5072
- .amplify-select[disabled] {
5073
- color: var(--amplify-components-fieldcontrol-disabled-color);
5074
- cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
5075
- border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
5076
- background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
5077
- }
5078
4937
  .amplify-select--quiet {
5079
4938
  border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
5080
4939
  border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
@@ -5089,19 +4948,31 @@ html[dir=rtl] .amplify-field-group__inner-start {
5089
4948
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
5090
4949
  }
5091
4950
  .amplify-select--quiet[aria-invalid=true]:focus {
4951
+ border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color);
5092
4952
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
5093
4953
  }
4954
+ .amplify-select[disabled] {
4955
+ color: var(--amplify-components-fieldcontrol-disabled-color);
4956
+ cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
4957
+ border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
4958
+ background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
4959
+ }
5094
4960
  .amplify-select option {
5095
- color: initial;
4961
+ background-color: var(--amplify-components-select-option-background-color);
4962
+ color: var(--amplify-components-select-option-color);
5096
4963
  }
5097
4964
  .amplify-select option[disabled=""] {
4965
+ background-color: var(--amplify-components-select-option-disabled-background-color);
5098
4966
  color: var(--amplify-components-select-option-disabled-color);
4967
+ cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
5099
4968
  }
5100
- @-moz-document url-prefix() {
5101
- .amplify-select option {
5102
- background-color: var(--amplify-components-select-option-background-color);
5103
- color: var(--amplify-components-select-option-color);
5104
- }
4969
+ .amplify-select[disabled] {
4970
+ background-color: var(--amplify-components-select-disabled-background-color);
4971
+ color: var(--amplify-components-select-disabled-color);
4972
+ }
4973
+ .amplify-select[disabled] option {
4974
+ color: inherit;
4975
+ background-color: inherit;
5105
4976
  }
5106
4977
  .amplify-select--small {
5107
4978
  min-width: var(--amplify-components-select-small-min-width);
@@ -5111,6 +4982,13 @@ html[dir=rtl] .amplify-field-group__inner-start {
5111
4982
  min-width: var(--amplify-components-select-large-min-width);
5112
4983
  padding-inline-end: var(--amplify-components-select-large-padding-inline-end);
5113
4984
  }
4985
+ .amplify-select--expanded {
4986
+ overflow: auto;
4987
+ padding: var(--amplify-components-select-expanded-padding-block) var(--amplify-components-select-expanded-padding-inline);
4988
+ }
4989
+ .amplify-select--expanded option {
4990
+ padding: var(--amplify-components-select-expanded-option-padding-block) var(--amplify-components-select-expanded-option-padding-inline);
4991
+ }
5114
4992
 
5115
4993
  .amplify-selectfield {
5116
4994
  flex-direction: var(--amplify-components-selectfield-flex-direction);
@@ -5157,7 +5035,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
5157
5035
  --amplify-components-sliderfield-thumb-height
5158
5036
  );
5159
5037
  }
5160
- .amplify-sliderfield__root[data-disabled] {
5038
+ .amplify-sliderfield__root--disabled {
5161
5039
  cursor: not-allowed;
5162
5040
  }
5163
5041
  .amplify-sliderfield__root--horizontal {
@@ -5232,7 +5110,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
5232
5110
  border-radius: var(--amplify-components-sliderfield-range-border-radius);
5233
5111
  background-color: var(--amplify-components-sliderfield-range-background-color);
5234
5112
  }
5235
- .amplify-sliderfield__range[data-disabled] {
5113
+ .amplify-sliderfield__range--disabled {
5236
5114
  background-color: var(--amplify-components-sliderfield-range-disabled-background-color);
5237
5115
  }
5238
5116
  .amplify-sliderfield__range--horizontal {
@@ -5261,7 +5139,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
5261
5139
  border-color: var(--amplify-components-sliderfield-thumb-focus-border-color);
5262
5140
  box-shadow: var(--amplify-components-sliderfield-thumb-focus-box-shadow);
5263
5141
  }
5264
- .amplify-sliderfield__thumb[data-disabled] {
5142
+ .amplify-sliderfield__thumb--disabled {
5265
5143
  background-color: var(--amplify-components-sliderfield-thumb-disabled-background-color);
5266
5144
  border-color: var(--amplify-components-sliderfield-thumb-disabled-border-color);
5267
5145
  box-shadow: var(--amplify-components-sliderfield-thumb-disabled-box-shadow);
@@ -5382,7 +5260,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
5382
5260
  flex-direction: column-reverse;
5383
5261
  }
5384
5262
 
5385
- .amplify-switch-track {
5263
+ .amplify-switch__track {
5386
5264
  display: inline-flex;
5387
5265
  justify-content: flex-start;
5388
5266
  box-sizing: content-box;
@@ -5393,21 +5271,21 @@ html[dir=rtl] .amplify-field-group__inner-start {
5393
5271
  transition-duration: var(--amplify-components-switchfield-track-transition-duration);
5394
5272
  background-color: var(--amplify-components-switchfield-track-background-color);
5395
5273
  }
5396
- .amplify-switch-track--checked {
5274
+ .amplify-switch__track--checked {
5397
5275
  background-color: var(--amplify-components-switchfield-track-checked-background-color);
5398
5276
  }
5399
- .amplify-switch-track--disabled {
5277
+ .amplify-switch__track--disabled {
5400
5278
  opacity: var(--amplify-components-switchfield-disabled-opacity);
5401
5279
  cursor: not-allowed;
5402
5280
  }
5403
- .amplify-switch-track--focused {
5281
+ .amplify-switch__track--focused {
5404
5282
  box-shadow: var(--amplify-components-switchfield-focused-shadow);
5405
5283
  }
5406
- .amplify-switch-track--error {
5284
+ .amplify-switch__track--error {
5407
5285
  background-color: var(--amplify-components-switchfield-track-error-background-color);
5408
5286
  }
5409
5287
 
5410
- .amplify-switch-thumb {
5288
+ .amplify-switch__thumb {
5411
5289
  background-color: var(--amplify-components-switchfield-thumb-background-color);
5412
5290
  transition-duration: var(--amplify-components-switchfield-thumb-transition-duration);
5413
5291
  border-radius: var(--amplify-components-switchfield-thumb-border-radius);
@@ -5418,14 +5296,14 @@ html[dir=rtl] .amplify-field-group__inner-start {
5418
5296
  border-color: var(--amplify-components-switchfield-thumb-border-color);
5419
5297
  overflow-wrap: break-word;
5420
5298
  }
5421
- .amplify-switch-thumb--checked {
5299
+ .amplify-switch__thumb--checked {
5422
5300
  transform: var(--amplify-components-switchfield-thumb-checked-transform);
5423
5301
  }
5424
- .amplify-switch-thumb--disabled {
5302
+ .amplify-switch__thumb--disabled {
5425
5303
  cursor: not-allowed;
5426
5304
  }
5427
5305
 
5428
- .amplify-switch-label {
5306
+ .amplify-switch__label {
5429
5307
  padding: var(--amplify-components-switchfield-label-padding);
5430
5308
  cursor: pointer;
5431
5309
  }
@@ -5512,6 +5390,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
5512
5390
  var(--amplify-components-table-header-border-width)
5513
5391
  var(--amplify-components-table-header-border-width);
5514
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
+ }
5515
5396
  .amplify-table__caption {
5516
5397
  caption-side: var(--amplify-components-table-caption-caption-side);
5517
5398
  color: var(--amplify-components-table-caption-color);
@@ -5570,26 +5451,52 @@ html[dir=rtl] .amplify-field-group__inner-start {
5570
5451
  .amplify-table__td:last-child {
5571
5452
  border-right-width: var(--amplify-components-table-data-border-width);
5572
5453
  }
5573
- .amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
5574
- background-color: var(--amplify-components-table-row-striped-background-color);
5575
- }
5576
5454
  .amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
5577
5455
  background-color: var(--amplify-components-table-row-hover-background-color);
5578
5456
  }
5579
5457
 
5580
- .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;
5581
5468
  background-color: var(--amplify-components-tabs-background-color);
5582
5469
  box-shadow: var(--amplify-components-tabs-box-shadow);
5583
- border-width: 0 0 var(--amplify-components-tabs-border-width) 0;
5470
+ border-width: var(--internal-item-border-width);
5584
5471
  border-style: var(--amplify-components-tabs-border-style);
5585
5472
  border-color: var(--amplify-components-tabs-border-color);
5586
5473
  gap: var(--amplify-components-tabs-gap);
5587
5474
  }
5588
- .amplify-tabs[data-indicator-position=top] {
5589
- 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;
5590
5482
  }
5591
-
5592
- .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;
5593
5500
  background-color: var(--amplify-components-tabs-item-background-color);
5594
5501
  box-sizing: border-box;
5595
5502
  color: var(--amplify-components-tabs-item-color);
@@ -5598,46 +5505,43 @@ html[dir=rtl] .amplify-field-group__inner-start {
5598
5505
  padding: var(--amplify-components-tabs-item-padding-vertical) var(--amplify-components-tabs-item-padding-horizontal);
5599
5506
  text-align: var(--amplify-components-tabs-item-text-align);
5600
5507
  transition: all var(--amplify-components-tabs-item-transition-duration);
5601
- border-width: 0 0 var(--amplify-components-tabs-item-border-width) 0;
5508
+ border-width: var(--internal-item-border-width);
5602
5509
  border-style: var(--amplify-components-tabs-item-border-style);
5603
5510
  border-color: var(--amplify-components-tabs-item-border-color);
5604
- margin-bottom: calc(-1 * var(--amplify-components-tabs-item-border-width));
5511
+ flex: var(--internal-item-flex);
5512
+ margin-block-start: var(--internal-item-margin-start);
5513
+ margin-block-end: var(--internal-item-margin-end);
5605
5514
  }
5606
- [data-indicator-position=top] > .amplify-tabs-item {
5607
- border-width: var(--amplify-components-tabs-border-width) 0 0 0;
5608
- margin-top: calc(-1 * var(--amplify-components-tabs-item-border-width));
5609
- margin-bottom: 0;
5610
- }
5611
- .amplify-tabs-item[data-state=active] {
5515
+ .amplify-tabs__item--active {
5612
5516
  color: var(--amplify-components-tabs-item-active-color);
5613
5517
  border-color: var(--amplify-components-tabs-item-active-border-color);
5614
5518
  background-color: var(--amplify-components-tabs-item-active-background-color);
5615
5519
  transition-property: none;
5616
5520
  }
5617
- .amplify-tabs-item:hover {
5521
+ .amplify-tabs__item:hover {
5618
5522
  color: var(--amplify-components-tabs-item-hover-color);
5619
5523
  cursor: pointer;
5620
5524
  }
5621
- .amplify-tabs-item:focus {
5525
+ .amplify-tabs__item:focus-visible {
5526
+ z-index: 2;
5622
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);
5623
5531
  }
5624
- .amplify-tabs-item:focus-visible {
5625
- outline: var(--amplify-components-tabs-item-border-width) var(--amplify-components-tabs-item-border-style) var(--amplify-components-tabs-item-border-color);
5626
- }
5627
- .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);
5628
5536
  color: var(--amplify-components-tabs-item-active-color);
5629
5537
  }
5630
- .amplify-tabs-item[data-disabled] {
5538
+ .amplify-tabs__item[disabled] {
5631
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);
5632
5542
  color: var(--amplify-components-tabs-item-disabled-color);
5633
5543
  cursor: not-allowed;
5634
5544
  }
5635
- .amplify-tabs-item[data-spacing=equal] {
5636
- flex: 1 1 0;
5637
- }
5638
- .amplify-tabs-item[data-spacing=relative] {
5639
- flex-grow: 1;
5640
- }
5641
5545
 
5642
5546
  .amplify-textareafield {
5643
5547
  flex-direction: column;
@@ -6160,153 +6064,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
6160
6064
  margin: var(--amplify-space-small);
6161
6065
  }
6162
6066
 
6163
- .amplify-fileuploader__dropzone {
6164
- background-color: var(--amplify-components-fileuploader-dropzone-background-color);
6165
- border-color: var(--amplify-components-fileuploader-dropzone-border-color);
6166
- border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
6167
- border-style: var(--amplify-components-fileuploader-dropzone-border-style);
6168
- border-width: var(--amplify-components-fileuploader-dropzone-border-width);
6169
- text-align: var(--amplify-components-fileuploader-dropzone-text-align);
6170
- padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
6171
- padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
6172
- display: flex;
6173
- flex-direction: column;
6174
- align-items: center;
6175
- gap: var(--amplify-components-fileuploader-dropzone-gap);
6176
- }
6177
- .amplify-fileuploader__dropzone--small {
6178
- flex-direction: row;
6179
- justify-content: center;
6180
- }
6181
- .amplify-fileuploader__dropzone--active {
6182
- border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
6183
- border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
6184
- background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
6185
- }
6186
- .amplify-fileuploader__dropzone__icon {
6187
- font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
6188
- color: var(--amplify-components-fileuploader-dropzone-icon-color);
6189
- }
6190
- .amplify-fileuploader__dropzone__text {
6191
- color: var(--amplify-components-fileuploader-dropzone-text-color);
6192
- font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
6193
- font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
6194
- }
6195
- .amplify-fileuploader__file {
6196
- position: relative;
6197
- border-width: var(--amplify-components-fileuploader-file-border-width);
6198
- border-style: var(--amplify-components-fileuploader-file-border-style);
6199
- border-color: var(--amplify-components-fileuploader-file-border-color);
6200
- border-radius: var(--amplify-components-fileuploader-file-border-radius);
6201
- display: flex;
6202
- flex-direction: column;
6203
- padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
6204
- padding-block: var(--amplify-components-fileuploader-file-padding-block);
6205
- align-items: var(--amplify-components-fileuploader-file-align-items);
6206
- }
6207
- .amplify-fileuploader__file__wrapper {
6208
- width: 100%;
6209
- display: flex;
6210
- flex-direction: row;
6211
- align-items: center;
6212
- gap: var(--amplify-components-fileuploader-file-gap);
6213
- }
6214
- .amplify-fileuploader__file__name {
6215
- text-overflow: ellipsis;
6216
- overflow: hidden;
6217
- font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
6218
- font-size: var(--amplify-components-fileuploader-file-name-font-size);
6219
- color: var(--amplify-components-fileuploader-file-name-color);
6220
- }
6221
- .amplify-fileuploader__file__size {
6222
- font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
6223
- font-size: var(--amplify-components-fileuploader-file-size-font-size);
6224
- color: var(--amplify-components-fileuploader-file-size-color);
6225
- }
6226
- .amplify-fileuploader__file__main {
6227
- flex: 1;
6228
- white-space: nowrap;
6229
- overflow: hidden;
6230
- }
6231
- .amplify-fileuploader__file__image {
6232
- position: relative;
6233
- display: flex;
6234
- align-items: center;
6235
- justify-content: center;
6236
- width: var(--amplify-components-fileuploader-file-image-width);
6237
- height: var(--amplify-components-fileuploader-file-image-height);
6238
- background-color: var(--amplify-components-fileuploader-file-image-background-color);
6239
- border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
6240
- color: var(--amplify-components-fileuploader-file-image-color);
6241
- }
6242
- .amplify-fileuploader__file__image img {
6243
- max-height: 100%;
6244
- }
6245
- .amplify-fileuploader__file__status--error {
6246
- color: var(--amplify-colors-font-error);
6247
- font-size: var(--amplify-components-fileuploader-file-size-font-size);
6248
- }
6249
- .amplify-fileuploader__file__status--success {
6250
- color: var(--amplify-colors-font-success);
6251
- }
6252
- .amplify-fileuploader__loader {
6253
- stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
6254
- stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
6255
- stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
6256
- height: var(--amplify-components-fileuploader-loader-stroke-width);
6257
- --amplify-components-loader-linear-stroke-filled: var(
6258
- --amplify-components-fileuploader-loader-stroke-filled
6259
- );
6260
- overflow: hidden;
6261
- position: absolute;
6262
- bottom: 0;
6263
- left: 0;
6264
- width: 100%;
6265
- }
6266
- .amplify-fileuploader__previewer {
6267
- display: block;
6268
- max-width: var(--amplify-components-fileuploader-previewer-max-width);
6269
- background-color: var(--amplify-components-fileuploader-previewer-background-color);
6270
- border-width: var(--amplify-components-fileuploader-previewer-border-width);
6271
- border-style: var(--amplify-components-fileuploader-previewer-border-style);
6272
- border-color: var(--amplify-components-fileuploader-previewer-border-color);
6273
- border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
6274
- padding-inline: var(--amplify-components-fileuploader-previewer-padding-inline);
6275
- padding-block: var(--amplify-components-fileuploader-previewer-padding-block);
6276
- }
6277
- .amplify-fileuploader__previewer__text {
6278
- font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
6279
- font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
6280
- color: var(--amplify-components-fileuploader-previewer-text-color);
6281
- }
6282
- .amplify-fileuploader__previewer__body {
6283
- display: flex;
6284
- flex-direction: column;
6285
- max-height: var(--amplify-components-fileuploader-previewer-max-height);
6286
- max-width: var(--amplify-components-fileuploader-previewer-max-width);
6287
- overflow: auto;
6288
- gap: var(--amplify-components-fileuploader-previewer-body-gap);
6289
- padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
6290
- padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
6291
- }
6292
- .amplify-fileuploader__previewer__footer {
6293
- max-width: var(--amplify-components-fileuploader-previewer-max-width);
6294
- border-top-width: var(--amplify-components-fileuploader-previewer-footer-border-width);
6295
- border-top-style: var(--amplify-components-fileuploader-previewer-footer-border-style);
6296
- border-top-color: var(--amplify-components-fileuploader-previewer-footer-border-color);
6297
- padding-inline: var(--amplify-components-fileuploader-previewer-footer-padding-inline);
6298
- padding-block: var(--amplify-components-fileuploader-previewer-footer-padding-block);
6299
- position: relative;
6300
- display: flex;
6301
- flex-direction: row;
6302
- justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
6303
- }
6304
- .amplify-fileuploader__previewer__footer__actions {
6305
- display: flex;
6306
- flex-direction: row;
6307
- gap: var(--amplify-space-small);
6308
- }
6309
-
6310
6067
  .amplify-storagemanager__dropzone {
6311
6068
  background-color: var(--amplify-components-storagemanager-dropzone-background-color);
6312
6069
  border-color: var(--amplify-components-storagemanager-dropzone-border-color);
@@ -6446,19 +6203,19 @@ html[dir=rtl] .amplify-field-group__inner-start {
6446
6203
  gap: var(--amplify-space-small);
6447
6204
  }
6448
6205
 
6449
- [data-label-position=start] {
6206
+ .amplify-label-start {
6450
6207
  flex-direction: row;
6451
6208
  }
6452
6209
 
6453
- [data-label-position=end] {
6210
+ .amplify-label-end {
6454
6211
  flex-direction: row-reverse;
6455
6212
  }
6456
6213
 
6457
- [data-label-position=top] {
6214
+ .amplify-label-top {
6458
6215
  flex-direction: column;
6459
6216
  }
6460
6217
 
6461
- [data-label-position=bottom] {
6218
+ .amplify-label-bottom {
6462
6219
  flex-direction: column-reverse;
6463
6220
  }
6464
6221