@aws-amplify/ui-react-storage 2.3.2 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/dist/esm/components/StorageImage/StorageImage.mjs +31 -1
  2. package/dist/esm/components/StorageManager/StorageManager.mjs +168 -1
  3. package/dist/esm/components/StorageManager/hooks/useStorageManager/actions.mjs +49 -1
  4. package/dist/esm/components/StorageManager/hooks/useStorageManager/reducer.mjs +130 -1
  5. package/dist/esm/components/StorageManager/hooks/useStorageManager/types.mjs +12 -1
  6. package/dist/esm/components/StorageManager/hooks/useStorageManager/useStorageManager.mjs +58 -1
  7. package/dist/esm/components/StorageManager/hooks/useUploadFiles/resolveFile.mjs +22 -1
  8. package/dist/esm/components/StorageManager/hooks/useUploadFiles/useUploadFiles.mjs +64 -1
  9. package/dist/esm/components/StorageManager/types.mjs +11 -1
  10. package/dist/esm/components/StorageManager/ui/Container/Container.mjs +8 -1
  11. package/dist/esm/components/StorageManager/ui/DropZone/DropZone.mjs +16 -1
  12. package/dist/esm/components/StorageManager/ui/FileList/FileControl.mjs +23 -1
  13. package/dist/esm/components/StorageManager/ui/FileList/FileDetails.mjs +14 -1
  14. package/dist/esm/components/StorageManager/ui/FileList/FileList.mjs +44 -1
  15. package/dist/esm/components/StorageManager/ui/FileList/FileRemoveButton.mjs +12 -1
  16. package/dist/esm/components/StorageManager/ui/FileList/FileStatusMessage.mjs +28 -1
  17. package/dist/esm/components/StorageManager/ui/FileList/FileThumbnail.mjs +12 -1
  18. package/dist/esm/components/StorageManager/ui/FileListFooter/FileListFooter.mjs +13 -1
  19. package/dist/esm/components/StorageManager/ui/FileListHeader/FileListHeader.mjs +14 -1
  20. package/dist/esm/components/StorageManager/ui/FilePicker/FilePicker.mjs +9 -1
  21. package/dist/esm/components/StorageManager/utils/checkMaxFileSize.mjs +12 -1
  22. package/dist/esm/components/StorageManager/utils/displayText.mjs +39 -1
  23. package/dist/esm/components/StorageManager/utils/filterAllowedFiles.mjs +27 -1
  24. package/dist/esm/components/StorageManager/utils/humanFileSize.mjs +29 -1
  25. package/dist/esm/components/StorageManager/utils/uploadFile.mjs +29 -1
  26. package/dist/esm/index.mjs +2 -1
  27. package/dist/esm/version.mjs +3 -0
  28. package/dist/index.js +782 -1
  29. package/dist/styles.css +298 -684
  30. package/dist/types/components/StorageImage/StorageImage.d.ts +1 -1
  31. package/dist/types/components/StorageImage/types.d.ts +3 -2
  32. package/dist/types/components/StorageManager/hooks/useStorageManager/actions.d.ts +2 -2
  33. package/dist/types/components/StorageManager/hooks/useStorageManager/types.d.ts +2 -2
  34. package/dist/types/components/StorageManager/hooks/useStorageManager/useStorageManager.d.ts +2 -2
  35. package/dist/types/components/StorageManager/hooks/useUploadFiles/useUploadFiles.d.ts +2 -2
  36. package/dist/types/components/StorageManager/types.d.ts +4 -8
  37. package/dist/types/components/StorageManager/ui/FileList/types.d.ts +8 -8
  38. package/dist/types/components/StorageManager/ui/FileListFooter/FileListFooter.d.ts +2 -2
  39. package/dist/types/components/StorageManager/ui/FileListHeader/FileListHeader.d.ts +2 -2
  40. package/dist/types/components/StorageManager/utils/displayText.d.ts +22 -20
  41. package/dist/types/components/StorageManager/utils/index.d.ts +1 -1
  42. package/dist/types/components/StorageManager/utils/uploadFile.d.ts +4 -10
  43. package/dist/types/version.d.ts +1 -0
  44. package/package.json +8 -39
  45. package/dist/types/components/StorageImage/_tests_/StorageImage.test.d.ts +0 -1
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);
@@ -203,7 +226,7 @@
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);
@@ -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;
@@ -476,7 +499,7 @@
476
499
  --amplify-components-checkbox-button-error-border-color: var(--amplify-colors-border-error);
477
500
  --amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-transparent);
478
501
  --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);
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);
@@ -541,7 +564,7 @@
541
564
  --amplify-components-dropzone-padding-block: var(--amplify-space-xl);
542
565
  --amplify-components-dropzone-padding-inline: var(--amplify-space-large);
543
566
  --amplify-components-dropzone-text-align: center;
544
- --amplify-components-dropzone-active-background-color: var(--amplify-colors-brand-primary-10);
567
+ --amplify-components-dropzone-active-background-color: var(--amplify-colors-primary-10);
545
568
  --amplify-components-dropzone-active-border-radius: var(--amplify-components-dropzone-border-radius);
546
569
  --amplify-components-dropzone-active-border-color: var(--amplify-colors-border-pressed);
547
570
  --amplify-components-dropzone-active-border-style: var(--amplify-components-dropzone-border-style);
@@ -565,40 +588,6 @@
565
588
  --amplify-components-dropzone-rejected-border-style: var(--amplify-components-dropzone-border-style);
566
589
  --amplify-components-dropzone-rejected-border-width: var(--amplify-components-dropzone-border-width);
567
590
  --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
591
  --amplify-components-field-gap: var(--amplify-space-xs);
603
592
  --amplify-components-field-font-size: var(--amplify-font-sizes-medium);
604
593
  --amplify-components-field-flex-direction: column;
@@ -677,70 +666,6 @@
677
666
  --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large);
678
667
  --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap);
679
668
  --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
669
  --amplify-components-flex-gap: var(--amplify-space-medium);
745
670
  --amplify-components-flex-justify-content: normal;
746
671
  --amplify-components-flex-align-items: stretch;
@@ -792,7 +717,7 @@
792
717
  --amplify-components-loader-height: var(--amplify-font-sizes-medium);
793
718
  --amplify-components-loader-font-size: var(--amplify-font-sizes-xs);
794
719
  --amplify-components-loader-stroke-empty: var(--amplify-colors-neutral-20);
795
- --amplify-components-loader-stroke-filled: var(--amplify-colors-brand-primary-80);
720
+ --amplify-components-loader-stroke-filled: var(--amplify-colors-primary-80);
796
721
  --amplify-components-loader-stroke-linecap: round;
797
722
  --amplify-components-loader-animation-duration: 1s;
798
723
  --amplify-components-loader-small-width: var(--amplify-font-sizes-small);
@@ -805,7 +730,7 @@
805
730
  --amplify-components-loader-linear-min-width: 5rem;
806
731
  --amplify-components-loader-linear-font-size: var(--amplify-font-sizes-xxs);
807
732
  --amplify-components-loader-linear-stroke-width: var(--amplify-font-sizes-xxs);
808
- --amplify-components-loader-linear-stroke-filled: var(--amplify-colors-brand-primary-80);
733
+ --amplify-components-loader-linear-stroke-filled: var(--amplify-colors-primary-80);
809
734
  --amplify-components-loader-linear-stroke-empty: var(--amplify-colors-neutral-20);
810
735
  --amplify-components-loader-linear-stroke-linecap: round;
811
736
  --amplify-components-loader-linear-animation-duration: 1s;
@@ -964,7 +889,7 @@
964
889
  --amplify-components-radio-button-small-height: var(--amplify-font-sizes-small);
965
890
  --amplify-components-radio-button-large-width: var(--amplify-font-sizes-large);
966
891
  --amplify-components-radio-button-large-height: var(--amplify-font-sizes-large);
967
- --amplify-components-radio-button-checked-color: var(--amplify-colors-brand-primary-80);
892
+ --amplify-components-radio-button-checked-color: var(--amplify-colors-primary-80);
968
893
  --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled);
969
894
  --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus);
970
895
  --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
@@ -979,11 +904,12 @@
979
904
  --amplify-components-radiogroup-radio-background-color: var(--amplify-components-radio-button-background-color);
980
905
  --amplify-components-radiogroup-radio-checked-color: var(--amplify-components-radio-button-checked-color);
981
906
  --amplify-components-radiogroup-radio-label-color: var(--amplify-components-radio-label-color);
982
- --amplify-components-radiogroup-label-color: var(--amplify-components-field-label-color);
907
+ --amplify-components-radiogroup-legend-color: var(--amplify-components-fieldset-legend-color);
908
+ --amplify-components-radiogroup-legend-font-weight: var(--amplify-font-weights-normal);
983
909
  --amplify-components-rating-large-size: var(--amplify-font-sizes-xxxl);
984
910
  --amplify-components-rating-default-size: var(--amplify-font-sizes-xl);
985
911
  --amplify-components-rating-small-size: var(--amplify-font-sizes-small);
986
- --amplify-components-rating-filled-color: var(--amplify-colors-brand-secondary-80);
912
+ --amplify-components-rating-filled-color: var(--amplify-colors-secondary-80);
987
913
  --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary);
988
914
  --amplify-components-searchfield-color: var(--amplify-components-fieldcontrol-color);
989
915
  --amplify-components-searchfield-button-color: var(--amplify-components-button-color);
@@ -1042,7 +968,7 @@
1042
968
  --amplify-components-sliderfield-track-border-radius: 9999px;
1043
969
  --amplify-components-sliderfield-track-height: 0.375rem;
1044
970
  --amplify-components-sliderfield-track-min-width: 10rem;
1045
- --amplify-components-sliderfield-range-background-color: var(--amplify-colors-brand-primary-80);
971
+ --amplify-components-sliderfield-range-background-color: var(--amplify-colors-primary-80);
1046
972
  --amplify-components-sliderfield-range-border-radius: 9999px;
1047
973
  --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled);
1048
974
  --amplify-components-sliderfield-thumb-width: 1.25rem;
@@ -1090,10 +1016,10 @@
1090
1016
  --amplify-components-storagemanager-dropzone-padding-block: var(--amplify-space-xl);
1091
1017
  --amplify-components-storagemanager-dropzone-padding-inline: var(--amplify-space-large);
1092
1018
  --amplify-components-storagemanager-dropzone-text-align: center;
1093
- --amplify-components-storagemanager-dropzone-active-background-color: var(--amplify-colors-brand-primary-10);
1094
- --amplify-components-storagemanager-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
1019
+ --amplify-components-storagemanager-dropzone-active-background-color: var(--amplify-colors-primary-10);
1020
+ --amplify-components-storagemanager-dropzone-active-border-radius: var(--amplify-components-storagemanager-dropzone-border-radius);
1095
1021
  --amplify-components-storagemanager-dropzone-active-border-color: var(--amplify-colors-border-pressed);
1096
- --amplify-components-storagemanager-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
1022
+ --amplify-components-storagemanager-dropzone-active-border-style: var(--amplify-components-storagemanager-dropzone-border-style);
1097
1023
  --amplify-components-storagemanager-dropzone-active-border-width: var(--amplify-border-widths-medium);
1098
1024
  --amplify-components-storagemanager-dropzone-icon-color: var(--amplify-colors-border-primary);
1099
1025
  --amplify-components-storagemanager-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
@@ -1120,6 +1046,8 @@
1120
1046
  --amplify-components-storagemanager-file-image-background-color: var(--amplify-colors-background-secondary);
1121
1047
  --amplify-components-storagemanager-file-image-color: var(--amplify-colors-font-tertiary);
1122
1048
  --amplify-components-storagemanager-file-image-border-radius: var(--amplify-radii-small);
1049
+ --amplify-components-storagemanager-filelist-flex-direction: column;
1050
+ --amplify-components-storagemanager-filelist-gap: var(--amplify-space-small);
1123
1051
  --amplify-components-storagemanager-loader-stroke-linecap: round;
1124
1052
  --amplify-components-storagemanager-loader-stroke-empty: var(--amplify-colors-border-secondary);
1125
1053
  --amplify-components-storagemanager-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
@@ -1140,8 +1068,6 @@
1140
1068
  --amplify-components-storagemanager-previewer-body-padding-inline: var(--amplify-space-medium);
1141
1069
  --amplify-components-storagemanager-previewer-body-gap: var(--amplify-space-small);
1142
1070
  --amplify-components-storagemanager-previewer-footer-justify-content: flex-end;
1143
- --amplify-components-storagemanager-filelist-flex-direction: column;
1144
- --amplify-components-storagemanager-filelist-gap: var(--amplify-space-small);
1145
1071
  --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
1146
1072
  --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
1147
1073
  --amplify-components-switchfield-font-size: var(--amplify-font-sizes-medium);
@@ -1158,7 +1084,7 @@
1158
1084
  --amplify-components-switchfield-thumb-width: var(--amplify-space-relative-medium);
1159
1085
  --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-quaternary);
1160
1086
  --amplify-components-switchfield-track-border-radius: var(--amplify-radii-xxxl);
1161
- --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-brand-primary-80);
1087
+ --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-primary-80);
1162
1088
  --amplify-components-switchfield-track-height: var(--amplify-space-relative-medium);
1163
1089
  --amplify-components-switchfield-track-padding: var(--amplify-outline-widths-medium);
1164
1090
  --amplify-components-switchfield-track-transition-duration: var(--amplify-time-short);
@@ -1227,14 +1153,25 @@
1227
1153
  --amplify-components-tabs-item-padding-horizontal: var(--amplify-space-medium);
1228
1154
  --amplify-components-tabs-item-text-align: center;
1229
1155
  --amplify-components-tabs-item-transition-duration: var(--amplify-time-medium);
1156
+ --amplify-components-tabs-item-hover-background-color: transparent;
1157
+ --amplify-components-tabs-item-hover-border-color: var(--amplify-colors-border-focus);
1158
+ --amplify-components-tabs-item-hover-box-shadow: none;
1230
1159
  --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover);
1160
+ --amplify-components-tabs-item-focus-background-color: transparent;
1161
+ --amplify-components-tabs-item-focus-border-color: var(--amplify-colors-border-focus);
1162
+ --amplify-components-tabs-item-focus-box-shadow: 0px 0px 0px var(--amplify-border-widths-medium) var(--amplify-colors-border-focus);
1231
1163
  --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus);
1232
- --amplify-components-tabs-item-active-color: var(--amplify-colors-font-interactive);
1233
- --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive);
1234
1164
  --amplify-components-tabs-item-active-background-color: transparent;
1235
- --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled);
1165
+ --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive);
1166
+ --amplify-components-tabs-item-active-box-shadow: none;
1167
+ --amplify-components-tabs-item-active-color: var(--amplify-colors-font-interactive);
1236
1168
  --amplify-components-tabs-item-disabled-background-color: transparent;
1237
1169
  --amplify-components-tabs-item-disabled-border-color: var(--amplify-colors-border-tertiary);
1170
+ --amplify-components-tabs-item-disabled-box-shadow: none;
1171
+ --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled);
1172
+ --amplify-components-tabs-panel-background-color: transparent;
1173
+ --amplify-components-tabs-panel-padding-inline: 0;
1174
+ --amplify-components-tabs-panel-padding-block: var(--amplify-space-small);
1238
1175
  --amplify-components-text-color: var(--amplify-colors-font-primary);
1239
1176
  --amplify-components-text-primary-color: var(--amplify-colors-font-primary);
1240
1177
  --amplify-components-text-secondary-color: var(--amplify-colors-font-secondary);
@@ -1274,15 +1211,15 @@
1274
1211
  --amplify-components-togglebutton-primary-disabled-border-color: var(--amplify-colors-border-disabled);
1275
1212
  --amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-disabled);
1276
1213
  --amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled);
1277
- --amplify-components-togglebutton-primary-pressed-background-color: var(--amplify-colors-brand-primary-80);
1278
- --amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-brand-primary-80);
1214
+ --amplify-components-togglebutton-primary-pressed-background-color: var(--amplify-colors-primary-80);
1215
+ --amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-primary-80);
1279
1216
  --amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-background-primary);
1280
1217
  --amplify-components-togglebutton-primary-pressed-focus-background-color: var(--amplify-colors-border-focus);
1281
1218
  --amplify-components-togglebutton-primary-pressed-focus-border-color: var(--amplify-colors-border-focus);
1282
1219
  --amplify-components-togglebutton-primary-pressed-focus-color: var(--amplify-colors-background-primary);
1283
- --amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-brand-primary-60);
1284
- --amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-brand-primary-60);
1285
- --amplify-components-togglebutton-primary-pressed-hover-box-shadow: var(--amplify-colors-brand-primary-60);
1220
+ --amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-primary-60);
1221
+ --amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-primary-60);
1222
+ --amplify-components-togglebutton-primary-pressed-hover-box-shadow: var(--amplify-colors-primary-60);
1286
1223
  --amplify-components-togglebutton-primary-pressed-hover-color: var(--amplify-colors-background-primary);
1287
1224
  --amplify-components-togglebutton-link-background-color: var(--amplify-colors-transparent);
1288
1225
  --amplify-components-togglebutton-link-color: var(--amplify-colors-overlay-50);
@@ -1367,29 +1304,29 @@
1367
1304
  --amplify-colors-neutral-80: hsl(210, 10%, 40%);
1368
1305
  --amplify-colors-neutral-90: hsl(210, 25%, 25%);
1369
1306
  --amplify-colors-neutral-100: hsl(210, 50%, 10%);
1370
- --amplify-colors-brand-primary-10: var(--amplify-colors-teal-10);
1371
- --amplify-colors-brand-primary-20: var(--amplify-colors-teal-20);
1372
- --amplify-colors-brand-primary-40: var(--amplify-colors-teal-40);
1373
- --amplify-colors-brand-primary-60: var(--amplify-colors-teal-60);
1374
- --amplify-colors-brand-primary-80: var(--amplify-colors-teal-80);
1375
- --amplify-colors-brand-primary-90: var(--amplify-colors-teal-90);
1376
- --amplify-colors-brand-primary-100: var(--amplify-colors-teal-100);
1377
- --amplify-colors-brand-secondary-10: var(--amplify-colors-purple-10);
1378
- --amplify-colors-brand-secondary-20: var(--amplify-colors-purple-20);
1379
- --amplify-colors-brand-secondary-40: var(--amplify-colors-purple-40);
1380
- --amplify-colors-brand-secondary-60: var(--amplify-colors-purple-60);
1381
- --amplify-colors-brand-secondary-80: var(--amplify-colors-purple-80);
1382
- --amplify-colors-brand-secondary-90: var(--amplify-colors-purple-90);
1383
- --amplify-colors-brand-secondary-100: var(--amplify-colors-purple-100);
1307
+ --amplify-colors-primary-10: var(--amplify-colors-teal-10);
1308
+ --amplify-colors-primary-20: var(--amplify-colors-teal-20);
1309
+ --amplify-colors-primary-40: var(--amplify-colors-teal-40);
1310
+ --amplify-colors-primary-60: var(--amplify-colors-teal-60);
1311
+ --amplify-colors-primary-80: var(--amplify-colors-teal-80);
1312
+ --amplify-colors-primary-90: var(--amplify-colors-teal-90);
1313
+ --amplify-colors-primary-100: var(--amplify-colors-teal-100);
1314
+ --amplify-colors-secondary-10: var(--amplify-colors-purple-10);
1315
+ --amplify-colors-secondary-20: var(--amplify-colors-purple-20);
1316
+ --amplify-colors-secondary-40: var(--amplify-colors-purple-40);
1317
+ --amplify-colors-secondary-60: var(--amplify-colors-purple-60);
1318
+ --amplify-colors-secondary-80: var(--amplify-colors-purple-80);
1319
+ --amplify-colors-secondary-90: var(--amplify-colors-purple-90);
1320
+ --amplify-colors-secondary-100: var(--amplify-colors-purple-100);
1384
1321
  --amplify-colors-font-primary: var(--amplify-colors-neutral-100);
1385
1322
  --amplify-colors-font-secondary: var(--amplify-colors-neutral-90);
1386
1323
  --amplify-colors-font-tertiary: var(--amplify-colors-neutral-80);
1387
1324
  --amplify-colors-font-disabled: var(--amplify-colors-neutral-60);
1388
1325
  --amplify-colors-font-inverse: var(--amplify-colors-white);
1389
- --amplify-colors-font-interactive: var(--amplify-colors-brand-primary-80);
1390
- --amplify-colors-font-hover: var(--amplify-colors-brand-primary-90);
1391
- --amplify-colors-font-focus: var(--amplify-colors-brand-primary-100);
1392
- --amplify-colors-font-active: var(--amplify-colors-brand-primary-100);
1326
+ --amplify-colors-font-interactive: var(--amplify-colors-primary-80);
1327
+ --amplify-colors-font-hover: var(--amplify-colors-primary-90);
1328
+ --amplify-colors-font-focus: var(--amplify-colors-primary-100);
1329
+ --amplify-colors-font-active: var(--amplify-colors-primary-100);
1393
1330
  --amplify-colors-font-info: var(--amplify-colors-blue-90);
1394
1331
  --amplify-colors-font-warning: var(--amplify-colors-orange-90);
1395
1332
  --amplify-colors-font-error: var(--amplify-colors-red-90);
@@ -1407,8 +1344,8 @@
1407
1344
  --amplify-colors-border-secondary: var(--amplify-colors-neutral-40);
1408
1345
  --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20);
1409
1346
  --amplify-colors-border-disabled: var(--amplify-colors-border-tertiary);
1410
- --amplify-colors-border-pressed: var(--amplify-colors-brand-primary-100);
1411
- --amplify-colors-border-focus: var(--amplify-colors-brand-primary-100);
1347
+ --amplify-colors-border-pressed: var(--amplify-colors-primary-100);
1348
+ --amplify-colors-border-focus: var(--amplify-colors-primary-100);
1412
1349
  --amplify-colors-border-error: var(--amplify-colors-red-80);
1413
1350
  --amplify-colors-border-info: var(--amplify-colors-blue-80);
1414
1351
  --amplify-colors-border-success: var(--amplify-colors-green-80);
@@ -3162,7 +3099,7 @@ strong.amplify-text {
3162
3099
  stroke-dashoffset: 0%;
3163
3100
  stroke-dasharray: none;
3164
3101
  }
3165
- .amplify-loader__percentage-text {
3102
+ .amplify-loader__label {
3166
3103
  fill: var(--amplify-components-loader-text-fill);
3167
3104
  stroke: none;
3168
3105
  }
@@ -3247,6 +3184,71 @@ strong.amplify-text {
3247
3184
  color: var(--amplify-components-copy-tool-tip-color);
3248
3185
  }
3249
3186
 
3187
+ .amplify-accordion {
3188
+ display: block;
3189
+ background-color: var(--amplify-components-accordion-background-color);
3190
+ border-radius: var(--amplify-components-accordion-item-border-radius);
3191
+ }
3192
+
3193
+ .amplify-accordion__item {
3194
+ display: block;
3195
+ position: relative;
3196
+ border-width: var(--amplify-components-accordion-item-border-width);
3197
+ border-style: var(--amplify-components-accordion-item-border-style);
3198
+ border-color: var(--amplify-components-accordion-item-border-color);
3199
+ }
3200
+ .amplify-accordion__item + .amplify-accordion__item {
3201
+ margin-block-start: calc(-1 * var(--amplify-components-accordion-item-border-width));
3202
+ }
3203
+ .amplify-accordion__item:where(:first-of-type) {
3204
+ border-start-end-radius: var(--amplify-components-accordion-item-border-radius);
3205
+ border-start-start-radius: var(--amplify-components-accordion-item-border-radius);
3206
+ }
3207
+ .amplify-accordion__item:where(:last-of-type) {
3208
+ border-end-end-radius: var(--amplify-components-accordion-item-border-radius);
3209
+ border-end-start-radius: var(--amplify-components-accordion-item-border-radius);
3210
+ }
3211
+ .amplify-accordion__item__trigger {
3212
+ cursor: pointer;
3213
+ display: flex;
3214
+ position: relative;
3215
+ color: var(--amplify-components-accordion-item-trigger-color);
3216
+ border-radius: var(--amplify-components-accordion-item-border-radius);
3217
+ padding-inline: var(--amplify-components-accordion-item-trigger-padding-inline);
3218
+ padding-block: var(--amplify-components-accordion-item-trigger-padding-block);
3219
+ gap: var(--amplify-components-accordion-item-trigger-gap);
3220
+ align-items: var(--amplify-components-accordion-item-trigger-align-items);
3221
+ justify-content: var(--amplify-components-accordion-item-trigger-justify-content);
3222
+ }
3223
+ .amplify-accordion__item__trigger:hover {
3224
+ background-color: var(--amplify-components-accordion-item-trigger-hover-background-color);
3225
+ color: var(--amplify-components-accordion-item-trigger-hover-color);
3226
+ }
3227
+ .amplify-accordion__item__trigger:focus {
3228
+ box-shadow: var(--amplify-components-accordion-item-trigger-focus-box-shadow);
3229
+ border-color: var(--amplify-components-accordion-item-trigger-focus-border-color);
3230
+ z-index: 2;
3231
+ }
3232
+ .amplify-accordion__item__trigger::-webkit-details-marker {
3233
+ display: none;
3234
+ }
3235
+ .amplify-accordion__item__content {
3236
+ display: block;
3237
+ color: var(--amplify-components-accordion-item-content-color);
3238
+ padding-block-end: var(--amplify-components-accordion-item-content-padding-block-end);
3239
+ padding-block-start: var(--amplify-components-accordion-item-content-padding-block-start);
3240
+ padding-inline: var(--amplify-components-accordion-item-content-padding-inline);
3241
+ }
3242
+ .amplify-accordion__item__icon {
3243
+ color: var(--amplify-components-accordion-item-icon-color);
3244
+ transition-property: transform;
3245
+ transition-duration: var(--amplify-components-accordion-item-icon-transition-duration);
3246
+ transition-timing-function: var(--amplify-components-accordion-item-icon-transition-timing-function);
3247
+ }
3248
+ [open] .amplify-accordion__item__icon {
3249
+ transform: rotate(180deg);
3250
+ }
3251
+
3250
3252
  .amplify-alert {
3251
3253
  align-items: var(--amplify-components-alert-align-items);
3252
3254
  background-color: var(--amplify-components-alert-background-color);
@@ -3404,6 +3406,16 @@ strong.amplify-text {
3404
3406
  align-self: center;
3405
3407
  }
3406
3408
 
3409
+ .amplify-authenticator__federated-buttons {
3410
+ flex-direction: column;
3411
+ padding-block-end: var(--amplify-space-medium);
3412
+ }
3413
+
3414
+ .amplify-authenticator__federated-button {
3415
+ font-weight: normal;
3416
+ gap: var(--amplify-space-medium);
3417
+ }
3418
+
3407
3419
  .amplify-breadcrumbs__list {
3408
3420
  display: flex;
3409
3421
  flex-wrap: var(--amplify-components-breadcrumbs-flex-wrap);
@@ -3475,7 +3487,7 @@ strong.amplify-text {
3475
3487
  .amplify-collection {
3476
3488
  flex-direction: column;
3477
3489
  }
3478
- .amplify-collection-pagination {
3490
+ .amplify-collection__pagination {
3479
3491
  justify-content: center;
3480
3492
  --amplify-components-pagination-current-color: var(
3481
3493
  --amplify-components-collection-pagination-current-color
@@ -3496,7 +3508,7 @@ strong.amplify-text {
3496
3508
  --amplify-components-collection-pagination-button-disabled-color
3497
3509
  );
3498
3510
  }
3499
- .amplify-collection-search {
3511
+ .amplify-collection__search {
3500
3512
  flex-direction: row;
3501
3513
  justify-content: center;
3502
3514
  --amplify-components-searchfield-input-color: var(
@@ -3552,6 +3564,7 @@ strong.amplify-text {
3552
3564
  }
3553
3565
  .amplify-checkbox--disabled {
3554
3566
  cursor: var(--amplify-components-checkbox-disabled-cursor);
3567
+ color: var(--amplify-components-checkbox-label-disabled-color);
3555
3568
  }
3556
3569
 
3557
3570
  .amplify-checkbox__button {
@@ -3634,8 +3647,8 @@ strong.amplify-text {
3634
3647
  background-color: var(--amplify-internal-checkbox-icon-disabled-background-color);
3635
3648
  }
3636
3649
 
3637
- .amplify-checkbox__label[data-disabled=true] {
3638
- color: var(--amplify-components-checkbox-label-disabled-color);
3650
+ .amplify-checkbox__label {
3651
+ color: inherit;
3639
3652
  }
3640
3653
 
3641
3654
  .amplify-checkboxfield {
@@ -3650,17 +3663,27 @@ strong.amplify-text {
3650
3663
  }
3651
3664
 
3652
3665
  .amplify-divider {
3666
+ --amplify-internal-divider-size: var(
3667
+ --amplify-components-divider-border-width
3668
+ );
3653
3669
  border-color: var(--amplify-components-divider-border-color);
3654
3670
  border-style: var(--amplify-components-divider-border-style);
3655
3671
  border-width: 0;
3656
3672
  opacity: var(--amplify-components-divider-opacity);
3657
3673
  padding: 0;
3658
- display: block;
3659
- --amplify-internal-divider-size: var(
3660
- --amplify-components-divider-border-width
3661
- );
3674
+ display: flex;
3662
3675
  position: relative;
3663
3676
  text-align: center;
3677
+ justify-content: center;
3678
+ }
3679
+ .amplify-divider::after {
3680
+ content: attr(data-label);
3681
+ position: absolute;
3682
+ transform: translateY(-50%);
3683
+ font-size: var(--amplify-components-divider-label-font-size);
3684
+ padding-inline: var(--amplify-components-divider-label-padding-inline);
3685
+ background-color: var(--amplify-components-divider-label-background-color);
3686
+ color: var(--amplify-components-divider-label-color);
3664
3687
  }
3665
3688
  .amplify-divider--small {
3666
3689
  --amplify-internal-divider-size: var(
@@ -3678,134 +3701,15 @@ strong.amplify-text {
3678
3701
  }
3679
3702
  .amplify-divider--vertical {
3680
3703
  border-left-width: var(--amplify-internal-divider-size);
3681
- }
3682
- .amplify-divider--label {
3683
- display: flex;
3684
- justify-content: center;
3685
- }
3686
- .amplify-divider--label::after {
3687
- content: attr(data-label);
3688
- position: absolute;
3689
- transform: translateY(-50%);
3690
- font-size: var(--amplify-components-divider-label-font-size);
3691
- padding-inline: var(--amplify-components-divider-label-padding-inline);
3692
- background-color: var(--amplify-components-divider-label-background-color);
3693
- color: var(--amplify-components-divider-label-color);
3694
- }
3695
- .amplify-divider--label[aria-orientation=vertical] {
3696
3704
  flex-direction: column;
3697
3705
  }
3698
- .amplify-divider--label[aria-orientation=vertical]::after {
3706
+ .amplify-divider--vertical::after {
3699
3707
  top: auto;
3700
3708
  transform: translateX(-50%);
3701
3709
  padding-block: 0;
3702
3710
  padding-inline: 0;
3703
3711
  }
3704
3712
 
3705
- .amplify-expander {
3706
- display: block;
3707
- background-color: var(--amplify-components-expander-background-color);
3708
- border-radius: var(--amplify-components-expander-border-radius);
3709
- box-shadow: var(--amplify-components-expander-box-shadow);
3710
- width: var(--amplify-components-expander-width);
3711
- }
3712
-
3713
- .amplify-expander__item {
3714
- display: block;
3715
- overflow: hidden;
3716
- box-shadow: var(--amplify-components-expander-item-box-shadow);
3717
- }
3718
- .amplify-expander__item:first-of-type {
3719
- border-start-start-radius: var(--amplify-components-expander-item-border-start-start-radius);
3720
- border-start-end-radius: var(--amplify-components-expander-item-border-start-end-radius);
3721
- }
3722
- @supports not (border-start-start-radius: var(--amplify-components-expander-item-border-start-start-radius)) {
3723
- .amplify-expander__item:first-of-type {
3724
- border-top-left-radius: var(--amplify-components-expander-item-border-top-left-radius);
3725
- border-top-right-radius: var(--amplify-components-expander-item-border-top-right-radius);
3726
- }
3727
- }
3728
- .amplify-expander__item:last-of-type {
3729
- box-shadow: none;
3730
- border-end-start-radius: var(--amplify-components-expander-item-border-end-start-radius);
3731
- border-end-end-radius: var(--amplify-components-expander-item-border-end-end-radius);
3732
- }
3733
- @supports not (border-end-start-radius: var(--amplify-components-expander-item-border-end-start-radius)) {
3734
- .amplify-expander__item:last-of-type {
3735
- border-bottom-left-radius: var(--amplify-components-expander-item-border-bottom-left-radius);
3736
- border-bottom-right-radius: var(--amplify-components-expander-item-border-bottom-right-radius);
3737
- }
3738
- }
3739
- .amplify-expander__item:focus-within {
3740
- box-shadow: var(--amplify-components-expander-item-focus-box-shadow);
3741
- }
3742
-
3743
- .amplify-expander__header {
3744
- display: flex;
3745
- box-shadow: var(--amplify-components-expander-header-box-shadow);
3746
- }
3747
-
3748
- .amplify-expander__trigger {
3749
- flex: 1;
3750
- display: flex;
3751
- min-height: var(--amplify-components-expander-trigger-min-height);
3752
- padding-inline-start: var(--amplify-components-expander-trigger-padding-inline-start);
3753
- padding-inline-end: var(--amplify-components-expander-trigger-padding-inline-end);
3754
- align-items: var(--amplify-components-expander-trigger-align-items);
3755
- justify-content: var(--amplify-components-expander-trigger-justify-content);
3756
- }
3757
- .amplify-expander__trigger:hover {
3758
- background-color: var(--amplify-components-expander-trigger-hover-background-color);
3759
- }
3760
-
3761
- .amplify-expander__content {
3762
- display: block;
3763
- padding-inline-start: var(--amplify-components-expander-content-padding-inline-start);
3764
- padding-inline-end: var(--amplify-components-expander-content-padding-inline-end);
3765
- }
3766
- .amplify-expander__content[data-state=open] {
3767
- animation-name: amplify-expander-slide-down;
3768
- animation-duration: var(--amplify-components-expander-content-open-animation-duration);
3769
- animation-timing-function: var(--amplify-components-expander-content-open-animation-timing-function);
3770
- }
3771
- .amplify-expander__content[data-state=closed] {
3772
- animation-name: amplify-expander-slide-up;
3773
- animation-duration: var(--amplify-components-expander-content-closed-animation-duration);
3774
- animation-timing-function: var(--amplify-components-expander-content-closed-animation-timing-function);
3775
- }
3776
-
3777
- .amplify-expander__content__text {
3778
- display: block;
3779
- color: var(--amplify-components-expander-content-text-color);
3780
- padding-block-start: var(--amplify-components-expander-content-text-padding-block-start);
3781
- padding-block-end: var(--amplify-components-expander-content-text-padding-block-end);
3782
- }
3783
-
3784
- .amplify-expander__icon {
3785
- transition-property: transform;
3786
- transition-duration: var(--amplify-components-expander-icon-transition-duration);
3787
- transition-timing-function: var(--amplify-components-expander-icon-transition-timing-function);
3788
- }
3789
- [data-state=open] .amplify-expander__icon {
3790
- transform: rotate(180deg);
3791
- }
3792
-
3793
- @keyframes amplify-expander-slide-down {
3794
- from {
3795
- height: 0;
3796
- }
3797
- to {
3798
- height: auto;
3799
- }
3800
- }
3801
- @keyframes amplify-expander-slide-up {
3802
- from {
3803
- height: auto;
3804
- }
3805
- to {
3806
- height: 0;
3807
- }
3808
- }
3809
3713
  .amplify-field {
3810
3714
  font-size: var(--amplify-components-field-font-size);
3811
3715
  gap: var(--amplify-components-field-gap);
@@ -4130,7 +4034,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4130
4034
  }
4131
4035
 
4132
4036
  .amplify-liveness-toast--primary {
4133
- background-color: var(--amplify-colors-brand-primary-80);
4037
+ background-color: var(--amplify-colors-primary-80);
4134
4038
  }
4135
4039
  .amplify-liveness-toast--primary .amplify-liveness-toast__message {
4136
4040
  color: var(--amplify-colors-font-inverse);
@@ -4190,7 +4094,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4190
4094
  content: "";
4191
4095
  width: 100%;
4192
4096
  height: 100%;
4193
- background: var(--amplify-colors-brand-primary-40);
4097
+ background: var(--amplify-colors-primary-40);
4194
4098
  left: -100%;
4195
4099
  transform: translate(var(--percentage), 0);
4196
4100
  transition: var(--amplify-liveness-match-indicator-transition);
@@ -4203,7 +4107,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4203
4107
  width: var(--amplify-space-small);
4204
4108
  height: var(--height);
4205
4109
  border-radius: var(--amplify-radii-medium);
4206
- background: var(--amplify-colors-brand-primary-80);
4110
+ background: var(--amplify-colors-primary-80);
4207
4111
  left: 0;
4208
4112
  top: 0;
4209
4113
  transform: translate(-50%, calc(var(--height) / 2 * -1));
@@ -4368,164 +4272,17 @@ html[dir=rtl] .amplify-field-group__inner-start {
4368
4272
  border-radius: 2px;
4369
4273
  }
4370
4274
 
4371
- .amplify-fileuploader__dropzone {
4372
- background-color: var(--amplify-components-fileuploader-dropzone-background-color);
4373
- border-color: var(--amplify-components-fileuploader-dropzone-border-color);
4374
- border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
4375
- border-style: var(--amplify-components-fileuploader-dropzone-border-style);
4376
- border-width: var(--amplify-components-fileuploader-dropzone-border-width);
4377
- text-align: var(--amplify-components-fileuploader-dropzone-text-align);
4378
- padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
4379
- padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
4380
- display: flex;
4381
- flex-direction: column;
4382
- align-items: center;
4383
- gap: var(--amplify-components-fileuploader-dropzone-gap);
4384
- }
4385
- .amplify-fileuploader__dropzone--small {
4386
- flex-direction: row;
4387
- justify-content: center;
4388
- }
4389
- .amplify-fileuploader__dropzone--active {
4390
- border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
4391
- border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
4392
- background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
4393
- }
4394
- .amplify-fileuploader__dropzone__icon {
4395
- font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
4396
- color: var(--amplify-components-fileuploader-dropzone-icon-color);
4397
- }
4398
- .amplify-fileuploader__dropzone__text {
4399
- color: var(--amplify-components-fileuploader-dropzone-text-color);
4400
- font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
4401
- font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
4402
- }
4403
- .amplify-fileuploader__file {
4404
- position: relative;
4405
- border-width: var(--amplify-components-fileuploader-file-border-width);
4406
- border-style: var(--amplify-components-fileuploader-file-border-style);
4407
- border-color: var(--amplify-components-fileuploader-file-border-color);
4408
- border-radius: var(--amplify-components-fileuploader-file-border-radius);
4409
- display: flex;
4410
- flex-direction: column;
4411
- padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
4412
- padding-block: var(--amplify-components-fileuploader-file-padding-block);
4413
- align-items: var(--amplify-components-fileuploader-file-align-items);
4414
- }
4415
- .amplify-fileuploader__file__wrapper {
4416
- width: 100%;
4417
- display: flex;
4418
- flex-direction: row;
4419
- align-items: center;
4420
- gap: var(--amplify-components-fileuploader-file-gap);
4421
- }
4422
- .amplify-fileuploader__file__name {
4423
- text-overflow: ellipsis;
4424
- overflow: hidden;
4425
- font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
4426
- font-size: var(--amplify-components-fileuploader-file-name-font-size);
4427
- color: var(--amplify-components-fileuploader-file-name-color);
4428
- }
4429
- .amplify-fileuploader__file__size {
4430
- font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
4431
- font-size: var(--amplify-components-fileuploader-file-size-font-size);
4432
- color: var(--amplify-components-fileuploader-file-size-color);
4433
- }
4434
- .amplify-fileuploader__file__main {
4435
- flex: 1;
4436
- white-space: nowrap;
4437
- overflow: hidden;
4438
- }
4439
- .amplify-fileuploader__file__image {
4440
- position: relative;
4441
- display: flex;
4442
- align-items: center;
4443
- justify-content: center;
4444
- width: var(--amplify-components-fileuploader-file-image-width);
4445
- height: var(--amplify-components-fileuploader-file-image-height);
4446
- background-color: var(--amplify-components-fileuploader-file-image-background-color);
4447
- border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
4448
- color: var(--amplify-components-fileuploader-file-image-color);
4449
- }
4450
- .amplify-fileuploader__file__image img {
4451
- max-height: 100%;
4452
- }
4453
- .amplify-fileuploader__file__status--error {
4454
- color: var(--amplify-colors-font-error);
4455
- font-size: var(--amplify-components-fileuploader-file-size-font-size);
4456
- }
4457
- .amplify-fileuploader__file__status--success {
4458
- color: var(--amplify-colors-font-success);
4459
- }
4460
- .amplify-fileuploader__loader {
4461
- stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
4462
- stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
4463
- stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
4464
- height: var(--amplify-components-fileuploader-loader-stroke-width);
4465
- --amplify-components-loader-linear-stroke-filled: var(
4466
- --amplify-components-fileuploader-loader-stroke-filled
4467
- );
4468
- overflow: hidden;
4469
- position: absolute;
4470
- bottom: 0;
4471
- left: 0;
4472
- width: 100%;
4473
- }
4474
- .amplify-fileuploader__previewer {
4475
- display: block;
4476
- max-width: var(--amplify-components-fileuploader-previewer-max-width);
4477
- background-color: var(--amplify-components-fileuploader-previewer-background-color);
4478
- border-width: var(--amplify-components-fileuploader-previewer-border-width);
4479
- border-style: var(--amplify-components-fileuploader-previewer-border-style);
4480
- border-color: var(--amplify-components-fileuploader-previewer-border-color);
4481
- border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
4482
- padding-inline: var(--amplify-components-fileuploader-previewer-padding-inline);
4483
- padding-block: var(--amplify-components-fileuploader-previewer-padding-block);
4484
- }
4485
- .amplify-fileuploader__previewer__text {
4486
- font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
4487
- font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
4488
- color: var(--amplify-components-fileuploader-previewer-text-color);
4489
- }
4490
- .amplify-fileuploader__previewer__body {
4491
- display: flex;
4492
- flex-direction: column;
4493
- max-height: var(--amplify-components-fileuploader-previewer-max-height);
4494
- max-width: var(--amplify-components-fileuploader-previewer-max-width);
4495
- overflow: auto;
4496
- gap: var(--amplify-components-fileuploader-previewer-body-gap);
4497
- padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
4498
- padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
4499
- }
4500
- .amplify-fileuploader__previewer__footer {
4501
- max-width: var(--amplify-components-fileuploader-previewer-max-width);
4502
- border-top-width: var(--amplify-components-fileuploader-previewer-footer-border-width);
4503
- border-top-style: var(--amplify-components-fileuploader-previewer-footer-border-style);
4504
- border-top-color: var(--amplify-components-fileuploader-previewer-footer-border-color);
4505
- padding-inline: var(--amplify-components-fileuploader-previewer-footer-padding-inline);
4506
- padding-block: var(--amplify-components-fileuploader-previewer-footer-padding-block);
4507
- position: relative;
4508
- display: flex;
4509
- flex-direction: row;
4510
- justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
4511
- }
4512
- .amplify-fileuploader__previewer__footer__actions {
4513
- display: flex;
4514
- flex-direction: row;
4515
- gap: var(--amplify-space-small);
4516
- }
4517
-
4518
- .amplify-menu-content-wrapper {
4275
+ .amplify-menu__wrapper {
4519
4276
  z-index: 999999;
4520
4277
  }
4521
4278
 
4522
- .amplify-menu-trigger {
4279
+ .amplify-menu__trigger {
4523
4280
  display: flex;
4524
4281
  justify-content: center;
4525
4282
  align-items: center;
4526
4283
  }
4527
4284
 
4528
- .amplify-menu-content {
4285
+ .amplify-menu__content {
4529
4286
  background-color: var(--amplify-components-menu-background-color);
4530
4287
  border-radius: var(--amplify-components-menu-border-radius);
4531
4288
  box-shadow: var(--amplify-components-menu-box-shadow);
@@ -4538,33 +4295,33 @@ html[dir=rtl] .amplify-field-group__inner-start {
4538
4295
  border-style: var(--amplify-components-menu-border-style);
4539
4296
  }
4540
4297
 
4541
- .amplify-menu-content__item {
4298
+ .amplify-menu__content__item {
4542
4299
  min-height: var(--amplify-components-menu-item-min-height);
4543
4300
  padding-inline-start: var(--amplify-components-menu-item-padding-inline-start);
4544
4301
  padding-inline-end: var(--amplify-components-menu-item-padding-inline-end);
4545
4302
  }
4546
4303
 
4547
- .amplify-menu-content__item:not(:first-child):not(:last-child) {
4304
+ .amplify-menu__content__item:not(:first-child):not(:last-child) {
4548
4305
  border-radius: 0;
4549
4306
  }
4550
4307
 
4551
- .amplify-menu-content__item:first-child {
4308
+ .amplify-menu__content__item:first-child {
4552
4309
  border-end-end-radius: 0;
4553
4310
  border-end-start-radius: 0;
4554
4311
  }
4555
4312
  @supports not (border-end-end-radius: 0) {
4556
- .amplify-menu-content__item:first-child {
4313
+ .amplify-menu__content__item:first-child {
4557
4314
  border-bottom-right-radius: 0;
4558
4315
  border-bottom-left-radius: 0;
4559
4316
  }
4560
4317
  }
4561
4318
 
4562
- .amplify-menu-content__item:last-child {
4319
+ .amplify-menu__content__item:last-child {
4563
4320
  border-start-end-radius: 0;
4564
4321
  border-start-start-radius: 0;
4565
4322
  }
4566
4323
  @supports not (border-end-end-radius: 0) {
4567
- .amplify-menu-content__item:last-child {
4324
+ .amplify-menu__content__item:last-child {
4568
4325
  border-top-right-radius: 0;
4569
4326
  border-top-left-radius: 0;
4570
4327
  }
@@ -4682,47 +4439,42 @@ html[dir=rtl] .amplify-field-group__inner-start {
4682
4439
  gap: var(--amplify-components-message-dismiss-gap);
4683
4440
  }
4684
4441
 
4685
- .amplify-pagination__item-current, .amplify-pagination__item-button {
4686
- height: var(--amplify-components-pagination-item-shared-height);
4687
- min-width: var(--amplify-components-pagination-item-shared-min-width);
4688
- border-radius: var(--amplify-components-pagination-item-shared-border-radius);
4689
- }
4690
-
4691
4442
  .amplify-pagination {
4692
4443
  list-style-type: none;
4693
4444
  }
4694
- .amplify-pagination li {
4695
- margin-left: var(--amplify-components-pagination-item-container-margin-left);
4696
- margin-right: var(--amplify-components-pagination-item-container-margin-right);
4697
- }
4698
- .amplify-pagination__item-button {
4445
+ .amplify-pagination__item {
4446
+ height: var(--amplify-components-pagination-item-shared-height);
4447
+ min-width: var(--amplify-components-pagination-item-shared-min-width);
4448
+ border-radius: var(--amplify-components-pagination-item-shared-border-radius);
4699
4449
  display: flex;
4700
4450
  align-items: center;
4701
4451
  justify-content: center;
4702
4452
  font-weight: initial;
4703
4453
  color: var(--amplify-components-pagination-button-color);
4454
+ margin-inline-start: var(--amplify-components-pagination-item-container-margin-left);
4455
+ margin-inline-end: var(--amplify-components-pagination-item-container-margin-right);
4704
4456
  padding-inline-start: var(--amplify-components-pagination-button-padding-inline-start);
4705
4457
  padding-inline-end: var(--amplify-components-pagination-button-padding-inline-end);
4706
4458
  transition-property: var(--amplify-components-pagination-button-transition-property);
4707
4459
  transition-duration: var(--amplify-components-pagination-button-transition-duration);
4708
4460
  }
4709
- .amplify-pagination__item-button:hover {
4461
+ .amplify-pagination__item:hover {
4710
4462
  text-decoration: none;
4711
4463
  color: var(--amplify-components-pagination-button-hover-color);
4712
4464
  background-color: var(--amplify-components-pagination-button-hover-background-color);
4713
4465
  }
4714
- .amplify-pagination__item-button--disabled {
4466
+ .amplify-pagination__item--disabled {
4715
4467
  color: var(--amplify-components-pagination-button-disabled-color);
4716
4468
  pointer-events: none;
4717
4469
  }
4718
- .amplify-pagination__item-current {
4470
+ .amplify-pagination__item--current {
4719
4471
  align-items: var(--amplify-components-pagination-current-align-items);
4720
4472
  justify-content: var(--amplify-components-pagination-current-justify-content);
4721
4473
  color: var(--amplify-components-pagination-current-color);
4722
4474
  font-size: var(--amplify-components-pagination-current-font-size);
4723
4475
  background-color: var(--amplify-components-pagination-current-background-color);
4724
4476
  }
4725
- .amplify-pagination__item-ellipsis {
4477
+ .amplify-pagination__item--ellipsis {
4726
4478
  align-items: var(--amplify-components-pagination-ellipsis-align-items);
4727
4479
  justify-content: var(--amplify-components-pagination-ellipsis-justify-content);
4728
4480
  padding-inline-start: var(--amplify-components-pagination-ellipsis-padding-inline-start);
@@ -4817,11 +4569,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
4817
4569
  font-size: var(--amplify-components-rating-default-size);
4818
4570
  line-height: var(--amplify-components-rating-default-size);
4819
4571
  }
4820
- .amplify-rating .amplify-icon {
4821
- font-size: unset;
4822
- line-height: unset;
4823
- height: 1em;
4824
- }
4825
4572
  .amplify-rating--small {
4826
4573
  font-size: var(--amplify-components-rating-small-size);
4827
4574
  line-height: var(--amplify-components-rating-small-size);
@@ -4830,39 +4577,22 @@ html[dir=rtl] .amplify-field-group__inner-start {
4830
4577
  font-size: var(--amplify-components-rating-large-size);
4831
4578
  line-height: var(--amplify-components-rating-large-size);
4832
4579
  }
4833
-
4834
- .amplify-rating-filled {
4835
- fill: currentColor;
4836
- display: inline-block;
4837
- flex-shrink: 0;
4838
- width: 1em;
4839
- height: 1em;
4840
- }
4841
-
4842
- .amplify-rating-icon-container {
4580
+ .amplify-rating__item {
4843
4581
  position: relative;
4844
4582
  height: 1em;
4845
4583
  width: 1em;
4846
4584
  }
4847
-
4848
- .amplify-rating-label {
4849
- position: absolute;
4850
- overflow: hidden;
4851
- height: 1em;
4852
- width: 1em;
4853
- }
4854
-
4855
- .amplify-rating-icon {
4585
+ .amplify-rating__icon {
4856
4586
  width: 1em;
4857
4587
  height: 1em;
4858
4588
  display: block;
4589
+ position: absolute;
4590
+ overflow: hidden;
4859
4591
  }
4860
-
4861
- .amplify-rating-icon-filled {
4592
+ .amplify-rating__icon--filled {
4862
4593
  color: var(--amplify-components-rating-filled-color);
4863
4594
  }
4864
-
4865
- .amplify-rating-icon-empty {
4595
+ .amplify-rating__icon--empty {
4866
4596
  color: var(--amplify-components-rating-empty-color);
4867
4597
  }
4868
4598
 
@@ -4872,7 +4602,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
4872
4602
  gap: inherit;
4873
4603
  flex-direction: row-reverse;
4874
4604
  position: relative;
4875
- --amplify-components-text-color: var(--amplify-components-radio-label-color);
4876
4605
  }
4877
4606
  .amplify-radio--disabled {
4878
4607
  cursor: var(--amplify-components-radio-disabled-cursor);
@@ -4943,7 +4672,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
4943
4672
  background-color: var(--amplify-components-radio-button-disabled-background-color);
4944
4673
  }
4945
4674
 
4946
- .amplify-radio__label[data-disabled=true] {
4675
+ .amplify-radio__label {
4676
+ color: var(--amplify-components-radio-label-color);
4677
+ }
4678
+ .amplify-radio__label--disabled {
4947
4679
  color: var(--amplify-components-radio-label-disabled-color);
4948
4680
  }
4949
4681
 
@@ -4956,8 +4688,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
4956
4688
  .amplify-radiogroupfield {
4957
4689
  flex-direction: column;
4958
4690
  align-items: flex-start;
4959
- --amplify-components-field-label-color: var(
4960
- --amplify-components-radiogroup-label-color
4691
+ --amplify-components-fieldset-legend-color: var(
4692
+ --amplify-components-radiogroup-legend-color
4693
+ );
4694
+ --amplify-components-fieldset-legend-font-weight: var(
4695
+ --amplify-components-radiogroup-legend-font-weight
4961
4696
  );
4962
4697
  --amplify-components-radio-button-border-width: var(
4963
4698
  --amplify-components-radiogroup-radio-border-width
@@ -5014,7 +4749,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
5014
4749
  align-self: stretch;
5015
4750
  }
5016
4751
 
5017
- .amplify-select__icon-wrapper {
4752
+ .amplify-select__icon {
5018
4753
  color: var(--amplify-components-fieldcontrol-color);
5019
4754
  align-items: var(--amplify-components-select-icon-wrapper-align-items);
5020
4755
  position: var(--amplify-components-select-icon-wrapper-position);
@@ -5023,10 +4758,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
5023
4758
  transform: var(--amplify-components-select-icon-wrapper-transform);
5024
4759
  pointer-events: var(--amplify-components-select-icon-wrapper-pointer-events);
5025
4760
  }
5026
- .amplify-select__icon-wrapper--small {
4761
+ .amplify-select__icon--small {
5027
4762
  right: var(--amplify-components-select-icon-wrapper-small-right);
5028
4763
  }
5029
- .amplify-select__icon-wrapper--large {
4764
+ .amplify-select__icon--large {
5030
4765
  right: var(--amplify-components-select-icon-wrapper-large-right);
5031
4766
  }
5032
4767
 
@@ -5180,7 +4915,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
5180
4915
  --amplify-components-sliderfield-thumb-height
5181
4916
  );
5182
4917
  }
5183
- .amplify-sliderfield__root[data-disabled] {
4918
+ .amplify-sliderfield__root--disabled {
5184
4919
  cursor: not-allowed;
5185
4920
  }
5186
4921
  .amplify-sliderfield__root--horizontal {
@@ -5255,7 +4990,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
5255
4990
  border-radius: var(--amplify-components-sliderfield-range-border-radius);
5256
4991
  background-color: var(--amplify-components-sliderfield-range-background-color);
5257
4992
  }
5258
- .amplify-sliderfield__range[data-disabled] {
4993
+ .amplify-sliderfield__range--disabled {
5259
4994
  background-color: var(--amplify-components-sliderfield-range-disabled-background-color);
5260
4995
  }
5261
4996
  .amplify-sliderfield__range--horizontal {
@@ -5284,7 +5019,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
5284
5019
  border-color: var(--amplify-components-sliderfield-thumb-focus-border-color);
5285
5020
  box-shadow: var(--amplify-components-sliderfield-thumb-focus-box-shadow);
5286
5021
  }
5287
- .amplify-sliderfield__thumb[data-disabled] {
5022
+ .amplify-sliderfield__thumb--disabled {
5288
5023
  background-color: var(--amplify-components-sliderfield-thumb-disabled-background-color);
5289
5024
  border-color: var(--amplify-components-sliderfield-thumb-disabled-border-color);
5290
5025
  box-shadow: var(--amplify-components-sliderfield-thumb-disabled-box-shadow);
@@ -5405,7 +5140,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
5405
5140
  flex-direction: column-reverse;
5406
5141
  }
5407
5142
 
5408
- .amplify-switch-track {
5143
+ .amplify-switch__track {
5409
5144
  display: inline-flex;
5410
5145
  justify-content: flex-start;
5411
5146
  box-sizing: content-box;
@@ -5416,21 +5151,21 @@ html[dir=rtl] .amplify-field-group__inner-start {
5416
5151
  transition-duration: var(--amplify-components-switchfield-track-transition-duration);
5417
5152
  background-color: var(--amplify-components-switchfield-track-background-color);
5418
5153
  }
5419
- .amplify-switch-track--checked {
5154
+ .amplify-switch__track--checked {
5420
5155
  background-color: var(--amplify-components-switchfield-track-checked-background-color);
5421
5156
  }
5422
- .amplify-switch-track--disabled {
5157
+ .amplify-switch__track--disabled {
5423
5158
  opacity: var(--amplify-components-switchfield-disabled-opacity);
5424
5159
  cursor: not-allowed;
5425
5160
  }
5426
- .amplify-switch-track--focused {
5161
+ .amplify-switch__track--focused {
5427
5162
  box-shadow: var(--amplify-components-switchfield-focused-shadow);
5428
5163
  }
5429
- .amplify-switch-track--error {
5164
+ .amplify-switch__track--error {
5430
5165
  background-color: var(--amplify-components-switchfield-track-error-background-color);
5431
5166
  }
5432
5167
 
5433
- .amplify-switch-thumb {
5168
+ .amplify-switch__thumb {
5434
5169
  background-color: var(--amplify-components-switchfield-thumb-background-color);
5435
5170
  transition-duration: var(--amplify-components-switchfield-thumb-transition-duration);
5436
5171
  border-radius: var(--amplify-components-switchfield-thumb-border-radius);
@@ -5441,14 +5176,14 @@ html[dir=rtl] .amplify-field-group__inner-start {
5441
5176
  border-color: var(--amplify-components-switchfield-thumb-border-color);
5442
5177
  overflow-wrap: break-word;
5443
5178
  }
5444
- .amplify-switch-thumb--checked {
5179
+ .amplify-switch__thumb--checked {
5445
5180
  transform: var(--amplify-components-switchfield-thumb-checked-transform);
5446
5181
  }
5447
- .amplify-switch-thumb--disabled {
5182
+ .amplify-switch__thumb--disabled {
5448
5183
  cursor: not-allowed;
5449
5184
  }
5450
5185
 
5451
- .amplify-switch-label {
5186
+ .amplify-switch__label {
5452
5187
  padding: var(--amplify-components-switchfield-label-padding);
5453
5188
  cursor: pointer;
5454
5189
  }
@@ -5600,19 +5335,48 @@ html[dir=rtl] .amplify-field-group__inner-start {
5600
5335
  background-color: var(--amplify-components-table-row-hover-background-color);
5601
5336
  }
5602
5337
 
5603
- .amplify-tabs {
5338
+ .amplify-tabs__list {
5339
+ --internal-item-margin-start: 0;
5340
+ --internal-item-margin-end: calc(
5341
+ -1 * var(--amplify-components-tabs-item-border-width)
5342
+ );
5343
+ --internal-item-border-width: 0 0
5344
+ var(--amplify-components-tabs-border-width) 0;
5345
+ --internal-item-flex: initial;
5346
+ display: flex;
5347
+ flex-direction: row;
5604
5348
  background-color: var(--amplify-components-tabs-background-color);
5605
5349
  box-shadow: var(--amplify-components-tabs-box-shadow);
5606
- border-width: 0 0 var(--amplify-components-tabs-border-width) 0;
5350
+ border-width: var(--internal-item-border-width);
5607
5351
  border-style: var(--amplify-components-tabs-border-style);
5608
5352
  border-color: var(--amplify-components-tabs-border-color);
5609
5353
  gap: var(--amplify-components-tabs-gap);
5610
5354
  }
5611
- .amplify-tabs[data-indicator-position=top] {
5612
- border-width: var(--amplify-components-tabs-border-width) 0 0 0;
5355
+ .amplify-tabs__list--top {
5356
+ --internal-item-border-width: var(--amplify-components-tabs-border-width)
5357
+ 0 0 0;
5358
+ --internal-item-margin-start: calc(
5359
+ -1 * var(--amplify-components-tabs-item-border-width)
5360
+ );
5361
+ --internal-item-margin-end: 0;
5613
5362
  }
5614
-
5615
- .amplify-tabs-item {
5363
+ .amplify-tabs__list--equal {
5364
+ --internal-item-flex: 1 1 0;
5365
+ }
5366
+ .amplify-tabs__list--relative {
5367
+ --internal-item-flex: 1 1 auto;
5368
+ }
5369
+ .amplify-tabs__panel {
5370
+ display: none;
5371
+ background-color: var(--amplify-components-tabs-panel-background-color);
5372
+ padding-inline: var(--amplify-components-tabs-panel-padding-inline);
5373
+ padding-block: var(--amplify-components-tabs-panel-padding-block);
5374
+ }
5375
+ .amplify-tabs__panel--active {
5376
+ display: block;
5377
+ }
5378
+ .amplify-tabs__item {
5379
+ position: relative;
5616
5380
  background-color: var(--amplify-components-tabs-item-background-color);
5617
5381
  box-sizing: border-box;
5618
5382
  color: var(--amplify-components-tabs-item-color);
@@ -5621,46 +5385,43 @@ html[dir=rtl] .amplify-field-group__inner-start {
5621
5385
  padding: var(--amplify-components-tabs-item-padding-vertical) var(--amplify-components-tabs-item-padding-horizontal);
5622
5386
  text-align: var(--amplify-components-tabs-item-text-align);
5623
5387
  transition: all var(--amplify-components-tabs-item-transition-duration);
5624
- border-width: 0 0 var(--amplify-components-tabs-item-border-width) 0;
5388
+ border-width: var(--internal-item-border-width);
5625
5389
  border-style: var(--amplify-components-tabs-item-border-style);
5626
5390
  border-color: var(--amplify-components-tabs-item-border-color);
5627
- margin-bottom: calc(-1 * var(--amplify-components-tabs-item-border-width));
5628
- }
5629
- [data-indicator-position=top] > .amplify-tabs-item {
5630
- border-width: var(--amplify-components-tabs-border-width) 0 0 0;
5631
- margin-top: calc(-1 * var(--amplify-components-tabs-item-border-width));
5632
- margin-bottom: 0;
5391
+ flex: var(--internal-item-flex);
5392
+ margin-block-start: var(--internal-item-margin-start);
5393
+ margin-block-end: var(--internal-item-margin-end);
5633
5394
  }
5634
- .amplify-tabs-item[data-state=active] {
5395
+ .amplify-tabs__item--active {
5635
5396
  color: var(--amplify-components-tabs-item-active-color);
5636
5397
  border-color: var(--amplify-components-tabs-item-active-border-color);
5637
5398
  background-color: var(--amplify-components-tabs-item-active-background-color);
5638
5399
  transition-property: none;
5639
5400
  }
5640
- .amplify-tabs-item:hover {
5401
+ .amplify-tabs__item:hover {
5641
5402
  color: var(--amplify-components-tabs-item-hover-color);
5642
5403
  cursor: pointer;
5643
5404
  }
5644
- .amplify-tabs-item:focus {
5405
+ .amplify-tabs__item:focus-visible {
5406
+ z-index: 2;
5645
5407
  color: var(--amplify-components-tabs-item-focus-color);
5408
+ background-color: var(--amplify-components-tabs-item-focus-background-color);
5409
+ border-color: var(--amplify-components-tabs-item-focus-border-color);
5410
+ box-shadow: var(--amplify-components-tabs-item-focus-box-shadow);
5646
5411
  }
5647
- .amplify-tabs-item:focus-visible {
5648
- outline: var(--amplify-components-tabs-item-border-width) var(--amplify-components-tabs-item-border-style) var(--amplify-components-tabs-item-border-color);
5649
- }
5650
- .amplify-tabs-item:active {
5412
+ .amplify-tabs__item:active {
5413
+ background-color: var(--amplify-components-tabs-item-active-background-color);
5414
+ border-color: var(--amplify-components-tabs-item-active-border-color);
5415
+ box-shadow: var(--amplify-components-tabs-item-active-box-shadow);
5651
5416
  color: var(--amplify-components-tabs-item-active-color);
5652
5417
  }
5653
- .amplify-tabs-item[data-disabled] {
5418
+ .amplify-tabs__item[disabled] {
5654
5419
  background-color: var(--amplify-components-tabs-item-disabled-background-color);
5420
+ border-color: var(--amplify-components-tabs-item-disabled-border-color);
5421
+ box-shadow: var(--amplify-components-tabs-item-disabled-box-shadow);
5655
5422
  color: var(--amplify-components-tabs-item-disabled-color);
5656
5423
  cursor: not-allowed;
5657
5424
  }
5658
- .amplify-tabs-item[data-spacing=equal] {
5659
- flex: 1 1 0;
5660
- }
5661
- .amplify-tabs-item[data-spacing=relative] {
5662
- flex-grow: 1;
5663
- }
5664
5425
 
5665
5426
  .amplify-textareafield {
5666
5427
  flex-direction: column;
@@ -6183,153 +5944,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
6183
5944
  margin: var(--amplify-space-small);
6184
5945
  }
6185
5946
 
6186
- .amplify-fileuploader__dropzone {
6187
- background-color: var(--amplify-components-fileuploader-dropzone-background-color);
6188
- border-color: var(--amplify-components-fileuploader-dropzone-border-color);
6189
- border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
6190
- border-style: var(--amplify-components-fileuploader-dropzone-border-style);
6191
- border-width: var(--amplify-components-fileuploader-dropzone-border-width);
6192
- text-align: var(--amplify-components-fileuploader-dropzone-text-align);
6193
- padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
6194
- padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
6195
- display: flex;
6196
- flex-direction: column;
6197
- align-items: center;
6198
- gap: var(--amplify-components-fileuploader-dropzone-gap);
6199
- }
6200
- .amplify-fileuploader__dropzone--small {
6201
- flex-direction: row;
6202
- justify-content: center;
6203
- }
6204
- .amplify-fileuploader__dropzone--active {
6205
- border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
6206
- border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
6207
- background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
6208
- }
6209
- .amplify-fileuploader__dropzone__icon {
6210
- font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
6211
- color: var(--amplify-components-fileuploader-dropzone-icon-color);
6212
- }
6213
- .amplify-fileuploader__dropzone__text {
6214
- color: var(--amplify-components-fileuploader-dropzone-text-color);
6215
- font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
6216
- font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
6217
- }
6218
- .amplify-fileuploader__file {
6219
- position: relative;
6220
- border-width: var(--amplify-components-fileuploader-file-border-width);
6221
- border-style: var(--amplify-components-fileuploader-file-border-style);
6222
- border-color: var(--amplify-components-fileuploader-file-border-color);
6223
- border-radius: var(--amplify-components-fileuploader-file-border-radius);
6224
- display: flex;
6225
- flex-direction: column;
6226
- padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
6227
- padding-block: var(--amplify-components-fileuploader-file-padding-block);
6228
- align-items: var(--amplify-components-fileuploader-file-align-items);
6229
- }
6230
- .amplify-fileuploader__file__wrapper {
6231
- width: 100%;
6232
- display: flex;
6233
- flex-direction: row;
6234
- align-items: center;
6235
- gap: var(--amplify-components-fileuploader-file-gap);
6236
- }
6237
- .amplify-fileuploader__file__name {
6238
- text-overflow: ellipsis;
6239
- overflow: hidden;
6240
- font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
6241
- font-size: var(--amplify-components-fileuploader-file-name-font-size);
6242
- color: var(--amplify-components-fileuploader-file-name-color);
6243
- }
6244
- .amplify-fileuploader__file__size {
6245
- font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
6246
- font-size: var(--amplify-components-fileuploader-file-size-font-size);
6247
- color: var(--amplify-components-fileuploader-file-size-color);
6248
- }
6249
- .amplify-fileuploader__file__main {
6250
- flex: 1;
6251
- white-space: nowrap;
6252
- overflow: hidden;
6253
- }
6254
- .amplify-fileuploader__file__image {
6255
- position: relative;
6256
- display: flex;
6257
- align-items: center;
6258
- justify-content: center;
6259
- width: var(--amplify-components-fileuploader-file-image-width);
6260
- height: var(--amplify-components-fileuploader-file-image-height);
6261
- background-color: var(--amplify-components-fileuploader-file-image-background-color);
6262
- border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
6263
- color: var(--amplify-components-fileuploader-file-image-color);
6264
- }
6265
- .amplify-fileuploader__file__image img {
6266
- max-height: 100%;
6267
- }
6268
- .amplify-fileuploader__file__status--error {
6269
- color: var(--amplify-colors-font-error);
6270
- font-size: var(--amplify-components-fileuploader-file-size-font-size);
6271
- }
6272
- .amplify-fileuploader__file__status--success {
6273
- color: var(--amplify-colors-font-success);
6274
- }
6275
- .amplify-fileuploader__loader {
6276
- stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
6277
- stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
6278
- stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
6279
- height: var(--amplify-components-fileuploader-loader-stroke-width);
6280
- --amplify-components-loader-linear-stroke-filled: var(
6281
- --amplify-components-fileuploader-loader-stroke-filled
6282
- );
6283
- overflow: hidden;
6284
- position: absolute;
6285
- bottom: 0;
6286
- left: 0;
6287
- width: 100%;
6288
- }
6289
- .amplify-fileuploader__previewer {
6290
- display: block;
6291
- max-width: var(--amplify-components-fileuploader-previewer-max-width);
6292
- background-color: var(--amplify-components-fileuploader-previewer-background-color);
6293
- border-width: var(--amplify-components-fileuploader-previewer-border-width);
6294
- border-style: var(--amplify-components-fileuploader-previewer-border-style);
6295
- border-color: var(--amplify-components-fileuploader-previewer-border-color);
6296
- border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
6297
- padding-inline: var(--amplify-components-fileuploader-previewer-padding-inline);
6298
- padding-block: var(--amplify-components-fileuploader-previewer-padding-block);
6299
- }
6300
- .amplify-fileuploader__previewer__text {
6301
- font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
6302
- font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
6303
- color: var(--amplify-components-fileuploader-previewer-text-color);
6304
- }
6305
- .amplify-fileuploader__previewer__body {
6306
- display: flex;
6307
- flex-direction: column;
6308
- max-height: var(--amplify-components-fileuploader-previewer-max-height);
6309
- max-width: var(--amplify-components-fileuploader-previewer-max-width);
6310
- overflow: auto;
6311
- gap: var(--amplify-components-fileuploader-previewer-body-gap);
6312
- padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
6313
- padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
6314
- }
6315
- .amplify-fileuploader__previewer__footer {
6316
- max-width: var(--amplify-components-fileuploader-previewer-max-width);
6317
- border-top-width: var(--amplify-components-fileuploader-previewer-footer-border-width);
6318
- border-top-style: var(--amplify-components-fileuploader-previewer-footer-border-style);
6319
- border-top-color: var(--amplify-components-fileuploader-previewer-footer-border-color);
6320
- padding-inline: var(--amplify-components-fileuploader-previewer-footer-padding-inline);
6321
- padding-block: var(--amplify-components-fileuploader-previewer-footer-padding-block);
6322
- position: relative;
6323
- display: flex;
6324
- flex-direction: row;
6325
- justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
6326
- }
6327
- .amplify-fileuploader__previewer__footer__actions {
6328
- display: flex;
6329
- flex-direction: row;
6330
- gap: var(--amplify-space-small);
6331
- }
6332
-
6333
5947
  .amplify-storagemanager__dropzone {
6334
5948
  background-color: var(--amplify-components-storagemanager-dropzone-background-color);
6335
5949
  border-color: var(--amplify-components-storagemanager-dropzone-border-color);
@@ -6469,19 +6083,19 @@ html[dir=rtl] .amplify-field-group__inner-start {
6469
6083
  gap: var(--amplify-space-small);
6470
6084
  }
6471
6085
 
6472
- [data-label-position=start] {
6086
+ .amplify-label-start {
6473
6087
  flex-direction: row;
6474
6088
  }
6475
6089
 
6476
- [data-label-position=end] {
6090
+ .amplify-label-end {
6477
6091
  flex-direction: row-reverse;
6478
6092
  }
6479
6093
 
6480
- [data-label-position=top] {
6094
+ .amplify-label-top {
6481
6095
  flex-direction: column;
6482
6096
  }
6483
6097
 
6484
- [data-label-position=bottom] {
6098
+ .amplify-label-bottom {
6485
6099
  flex-direction: column-reverse;
6486
6100
  }
6487
6101