@aws-amplify/ui 5.1.1 → 5.3.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 (44) hide show
  1. package/dist/esm/helpers/accountSettings/utils.js +1 -0
  2. package/dist/esm/helpers/accountSettings/validator.js +1 -0
  3. package/dist/esm/helpers/storage/fileUploader/utils/uploader.js +1 -0
  4. package/dist/esm/helpers/utils.js +1 -0
  5. package/dist/esm/index.js +1 -1
  6. package/dist/esm/machines/authenticator/defaultServices.js +1 -1
  7. package/dist/esm/theme/tokens/colors.js +1 -1
  8. package/dist/esm/theme/tokens/components/button.js +1 -1
  9. package/dist/esm/theme/tokens/components/fileUploader.js +1 -0
  10. package/dist/esm/theme/tokens/components/index.js +1 -1
  11. package/dist/esm/types/primitives/componentClassName.js +1 -1
  12. package/dist/index.js +1 -1
  13. package/dist/styles.css +332 -1
  14. package/dist/theme.css +106 -1
  15. package/dist/types/helpers/accountSettings/index.d.ts +2 -0
  16. package/dist/types/helpers/accountSettings/utils.d.ts +9 -0
  17. package/dist/types/helpers/accountSettings/validator.d.ts +21 -0
  18. package/dist/types/helpers/authenticator/textUtil.d.ts +1 -1
  19. package/dist/types/helpers/index.d.ts +3 -0
  20. package/dist/types/helpers/storage/fileUploader/index.d.ts +1 -0
  21. package/dist/types/helpers/storage/fileUploader/utils/index.d.ts +1 -0
  22. package/dist/types/helpers/storage/fileUploader/utils/uploader.d.ts +27 -0
  23. package/dist/types/helpers/storage/index.d.ts +1 -0
  24. package/dist/types/helpers/utils.d.ts +4 -0
  25. package/dist/types/theme/tokens/components/button.d.ts +4 -2
  26. package/dist/types/theme/tokens/components/collection.d.ts +8 -8
  27. package/dist/types/theme/tokens/components/fileUploader.d.ts +23 -0
  28. package/dist/types/theme/tokens/components/heading.d.ts +1 -1
  29. package/dist/types/theme/tokens/components/index.d.ts +2 -0
  30. package/dist/types/theme/tokens/components/link.d.ts +1 -1
  31. package/dist/types/theme/tokens/components/rating.d.ts +3 -3
  32. package/dist/types/theme/tokens/components/select.d.ts +5 -5
  33. package/dist/types/theme/tokens/components/stepperField.d.ts +1 -1
  34. package/dist/types/theme/tokens/components/switchField.d.ts +6 -6
  35. package/dist/types/theme/tokens/components/table.d.ts +2 -2
  36. package/dist/types/theme/tokens/components/text.d.ts +1 -1
  37. package/dist/types/theme/tokens/components/textAreaField.d.ts +1 -1
  38. package/dist/types/theme/tokens/components/textField.d.ts +1 -1
  39. package/dist/types/theme/tokens/types/typography.d.ts +2 -0
  40. package/dist/types/types/accountSettings/index.d.ts +1 -0
  41. package/dist/types/types/accountSettings/validator.d.ts +14 -0
  42. package/dist/types/types/index.d.ts +1 -0
  43. package/dist/types/types/primitives/componentClassName.d.ts +17 -0
  44. package/package.json +3 -1
package/dist/styles.css CHANGED
@@ -163,6 +163,47 @@
163
163
  --amplify-components-button-link-loading-border-color: transparent;
164
164
  --amplify-components-button-link-loading-background-color: transparent;
165
165
  --amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled);
166
+ --amplify-components-button-warning-background-color: transparent;
167
+ --amplify-components-button-warning-border-color: var(--amplify-colors-red-60);
168
+ --amplify-components-button-warning-border-width: var(--amplify-border-widths-small);
169
+ --amplify-components-button-warning-color: var(--amplify-colors-red-60);
170
+ --amplify-components-button-warning-hover-border-color: var(--amplify-colors-red-80);
171
+ --amplify-components-button-warning-hover-background-color: var(--amplify-colors-red-10);
172
+ --amplify-components-button-warning-hover-color: var(--amplify-colors-font-error);
173
+ --amplify-components-button-warning-focus-border-color: var(--amplify-colors-red-80);
174
+ --amplify-components-button-warning-focus-background-color: var(--amplify-colors-red-10);
175
+ --amplify-components-button-warning-focus-color: var(--amplify-colors-red-80);
176
+ --amplify-components-button-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
177
+ --amplify-components-button-warning-active-border-color: var(--amplify-colors-red-100);
178
+ --amplify-components-button-warning-active-background-color: var(--amplify-colors-red-20);
179
+ --amplify-components-button-warning-active-color: var(--amplify-colors-red-100);
180
+ --amplify-components-button-warning-disabled-border-color: var(--amplify-colors-border-tertiary);
181
+ --amplify-components-button-warning-disabled-background-color: transparent;
182
+ --amplify-components-button-warning-disabled-color: var(--amplify-colors-font-disabled);
183
+ --amplify-components-button-warning-loading-border-color: var(--amplify-colors-border-tertiary);
184
+ --amplify-components-button-warning-loading-background-color: transparent;
185
+ --amplify-components-button-warning-loading-color: var(--amplify-colors-font-disabled);
186
+ --amplify-components-button-destructive-border-color: transparent;
187
+ --amplify-components-button-destructive-border-width: var(--amplify-border-widths-small);
188
+ --amplify-components-button-destructive-border-style: solid;
189
+ --amplify-components-button-destructive-background-color: var(--amplify-colors-red-60);
190
+ --amplify-components-button-destructive-color: var(--amplify-colors-font-inverse);
191
+ --amplify-components-button-destructive-disabled-border-color: transparent;
192
+ --amplify-components-button-destructive-disabled-background-color: var(--amplify-colors-background-disabled);
193
+ --amplify-components-button-destructive-disabled-color: var(--amplify-colors-font-disabled);
194
+ --amplify-components-button-destructive-loading-border-color: transparent;
195
+ --amplify-components-button-destructive-loading-background-color: var(--amplify-colors-background-disabled);
196
+ --amplify-components-button-destructive-loading-color: var(--amplify-colors-font-disabled);
197
+ --amplify-components-button-destructive-hover-border-color: transparent;
198
+ --amplify-components-button-destructive-hover-background-color: var(--amplify-colors-red-80);
199
+ --amplify-components-button-destructive-hover-color: var(--amplify-colors-font-inverse);
200
+ --amplify-components-button-destructive-focus-border-color: transparent;
201
+ --amplify-components-button-destructive-focus-background-color: var(--amplify-colors-red-80);
202
+ --amplify-components-button-destructive-focus-color: var(--amplify-colors-font-inverse);
203
+ --amplify-components-button-destructive-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
204
+ --amplify-components-button-destructive-active-border-color: transparent;
205
+ --amplify-components-button-destructive-active-background-color: var(--amplify-colors-red-100);
206
+ --amplify-components-button-destructive-active-color: var(--amplify-colors-font-inverse);
166
207
  --amplify-components-button-small-font-size: var(--amplify-components-fieldcontrol-small-font-size);
167
208
  --amplify-components-button-small-padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
168
209
  --amplify-components-button-small-padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
@@ -364,6 +405,70 @@
364
405
  --amplify-components-fieldmessages-description-color: var(--amplify-colors-font-secondary);
365
406
  --amplify-components-fieldmessages-description-font-style: italic;
366
407
  --amplify-components-fieldmessages-description-font-size: var(--amplify-font-sizes-small);
408
+ --amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary);
409
+ --amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small);
410
+ --amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary);
411
+ --amplify-components-fileuploader-dropzone-border-style: dashed;
412
+ --amplify-components-fileuploader-dropzone-border-width: var(--amplify-border-widths-small);
413
+ --amplify-components-fileuploader-dropzone-gap: var(--amplify-space-small);
414
+ --amplify-components-fileuploader-dropzone-padding-block: var(--amplify-space-xl);
415
+ --amplify-components-fileuploader-dropzone-padding-inline: var(--amplify-space-large);
416
+ --amplify-components-fileuploader-dropzone-text-align: center;
417
+ --amplify-components-fileuploader-dropzone-active-background-color: var(--amplify-colors-brand-primary-10);
418
+ --amplify-components-fileuploader-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
419
+ --amplify-components-fileuploader-dropzone-active-border-color: var(--amplify-colors-border-pressed);
420
+ --amplify-components-fileuploader-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
421
+ --amplify-components-fileuploader-dropzone-active-border-width: var(--amplify-border-widths-medium);
422
+ --amplify-components-fileuploader-dropzone-icon-color: var(--amplify-colors-border-primary);
423
+ --amplify-components-fileuploader-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
424
+ --amplify-components-fileuploader-dropzone-text-color: var(--amplify-colors-font-tertiary);
425
+ --amplify-components-fileuploader-dropzone-text-font-size: var(--amplify-font-sizes-medium);
426
+ --amplify-components-fileuploader-dropzone-text-font-weight: var(--amplify-font-weights-bold);
427
+ --amplify-components-fileuploader-file-background-color: var(--amplify-colors-background-primary);
428
+ --amplify-components-fileuploader-file-border-radius: var(--amplify-radii-small);
429
+ --amplify-components-fileuploader-file-border-color: var(--amplify-colors-border-primary);
430
+ --amplify-components-fileuploader-file-border-style: solid;
431
+ --amplify-components-fileuploader-file-border-width: var(--amplify-border-widths-small);
432
+ --amplify-components-fileuploader-file-padding-block: var(--amplify-space-xs);
433
+ --amplify-components-fileuploader-file-padding-inline: var(--amplify-space-small);
434
+ --amplify-components-fileuploader-file-gap: var(--amplify-space-small);
435
+ --amplify-components-fileuploader-file-align-items: center;
436
+ --amplify-components-fileuploader-file-name-font-size: var(--amplify-font-sizes-medium);
437
+ --amplify-components-fileuploader-file-name-font-weight: var(--amplify-font-weights-bold);
438
+ --amplify-components-fileuploader-file-name-color: var(--amplify-colors-font-primary);
439
+ --amplify-components-fileuploader-file-size-font-size: var(--amplify-font-sizes-small);
440
+ --amplify-components-fileuploader-file-size-font-weight: var(--amplify-font-weights-normal);
441
+ --amplify-components-fileuploader-file-size-color: var(--amplify-colors-font-tertiary);
442
+ --amplify-components-fileuploader-file-image-width: var(--amplify-space-xxl);
443
+ --amplify-components-fileuploader-file-image-height: var(--amplify-space-xxl);
444
+ --amplify-components-fileuploader-file-image-background-color: var(--amplify-colors-background-secondary);
445
+ --amplify-components-fileuploader-file-image-color: var(--amplify-colors-font-tertiary);
446
+ --amplify-components-fileuploader-file-image-border-radius: var(--amplify-radii-small);
447
+ --amplify-components-fileuploader-loader-stroke-linecap: round;
448
+ --amplify-components-fileuploader-loader-stroke-empty: var(--amplify-colors-border-secondary);
449
+ --amplify-components-fileuploader-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
450
+ --amplify-components-fileuploader-loader-stroke-width: var(--amplify-border-widths-large);
451
+ --amplify-components-fileuploader-previewer-background-color: var(--amplify-colors-background-primary);
452
+ --amplify-components-fileuploader-previewer-border-color: var(--amplify-colors-border-primary);
453
+ --amplify-components-fileuploader-previewer-border-style: solid;
454
+ --amplify-components-fileuploader-previewer-border-width: var(--amplify-border-widths-small);
455
+ --amplify-components-fileuploader-previewer-border-radius: var(--amplify-radii-small);
456
+ --amplify-components-fileuploader-previewer-padding-block: var(--amplify-space-zero);
457
+ --amplify-components-fileuploader-previewer-padding-inline: var(--amplify-space-zero);
458
+ --amplify-components-fileuploader-previewer-max-height: 40rem;
459
+ --amplify-components-fileuploader-previewer-max-width: auto;
460
+ --amplify-components-fileuploader-previewer-text-font-size: var(--amplify-font-sizes-medium);
461
+ --amplify-components-fileuploader-previewer-text-font-weight: var(--amplify-font-weights-bold);
462
+ --amplify-components-fileuploader-previewer-text-color: var(--amplify-colors-font-primary);
463
+ --amplify-components-fileuploader-previewer-body-padding-block: var(--amplify-space-medium);
464
+ --amplify-components-fileuploader-previewer-body-padding-inline: var(--amplify-space-medium);
465
+ --amplify-components-fileuploader-previewer-body-gap: var(--amplify-space-small);
466
+ --amplify-components-fileuploader-previewer-footer-border-color: var(--amplify-colors-border-secondary);
467
+ --amplify-components-fileuploader-previewer-footer-border-style: solid;
468
+ --amplify-components-fileuploader-previewer-footer-border-width: var(--amplify-border-widths-small);
469
+ --amplify-components-fileuploader-previewer-footer-padding-block: var(--amplify-space-medium);
470
+ --amplify-components-fileuploader-previewer-footer-padding-inline: var(--amplify-space-medium);
471
+ --amplify-components-fileuploader-previewer-footer-justify-content: space-between;
367
472
  --amplify-components-flex-gap: var(--amplify-space-medium);
368
473
  --amplify-components-flex-justify-content: normal;
369
474
  --amplify-components-flex-align-items: stretch;
@@ -845,7 +950,7 @@
845
950
  --amplify-colors-neutral-10: hsl(210, 5%, 98%);
846
951
  --amplify-colors-neutral-20: hsl(210, 5%, 94%);
847
952
  --amplify-colors-neutral-40: hsl(210, 5%, 87%);
848
- --amplify-colors-neutral-60: hsl(210, 8%, 55%);
953
+ --amplify-colors-neutral-60: hsl(210, 10%, 58%);
849
954
  --amplify-colors-neutral-80: hsl(210, 10%, 40%);
850
955
  --amplify-colors-neutral-90: hsl(210, 25%, 25%);
851
956
  --amplify-colors-neutral-100: hsl(210, 50%, 10%);
@@ -1305,6 +1410,88 @@ strong.amplify-text {
1305
1410
  border-color: var(--amplify-components-button-link-active-border-color);
1306
1411
  color: var(--amplify-components-button-link-active-color);
1307
1412
  }
1413
+ .amplify-button--destructive {
1414
+ border-width: var(--amplify-components-button-destructive-border-width);
1415
+ background-color: var(--amplify-components-button-destructive-background-color);
1416
+ border-color: var(--amplify-components-button-destructive-border-color);
1417
+ color: var(--amplify-components-button-destructive-color);
1418
+ --amplify-internal-button-disabled-border-color: var(
1419
+ --amplify-components-button-destructive-disabled-border-color
1420
+ );
1421
+ --amplify-internal-button-disabled-background-color: var(
1422
+ --amplify-components-button-destructive-disabled-background-color
1423
+ );
1424
+ --amplify-internal-button-disabled-color: var(
1425
+ --amplify-components-button-destructive-disabled-color
1426
+ );
1427
+ --amplify-internal-button-loading-background-color: var(
1428
+ --amplify-components-button-destructive-loading-background-color
1429
+ );
1430
+ --amplify-internal-button-loading-border-color: var(
1431
+ --amplify-components-button-destructive-loading-border-color
1432
+ );
1433
+ --amplify-internal-button-loading-color: var(
1434
+ --amplify-components-button-destructive-loading-color
1435
+ );
1436
+ }
1437
+ .amplify-button--destructive:hover {
1438
+ background-color: var(--amplify-components-button-destructive-hover-background-color);
1439
+ border-color: var(--amplify-components-button-destructive-hover-border-color);
1440
+ color: var(--amplify-components-button-destructive-hover-color);
1441
+ }
1442
+ .amplify-button--destructive:focus {
1443
+ background-color: var(--amplify-components-button-destructive-focus-background-color);
1444
+ border-color: var(--amplify-components-button-destructive-focus-border-color);
1445
+ color: var(--amplify-components-button-destructive-focus-color);
1446
+ box-shadow: var(--amplify-components-button-destructive-focus-box-shadow);
1447
+ }
1448
+ .amplify-button--destructive:active {
1449
+ background-color: var(--amplify-components-button-destructive-active-background-color);
1450
+ border-color: var(--amplify-components-button-destructive-active-border-color);
1451
+ color: var(--amplify-components-button-destructive-active-color);
1452
+ }
1453
+ .amplify-button--warning {
1454
+ background-color: var(--amplify-components-button-warning-background-color);
1455
+ border-color: var(--amplify-components-button-warning-border-color);
1456
+ border-width: var(--amplify-components-button-warning-border-width);
1457
+ color: var(--amplify-components-button-warning-color);
1458
+ --amplify-internal-button-disabled-text-decoration: none;
1459
+ --amplify-internal-button-disabled-border-color: var(
1460
+ --amplify-components-button-warning-disabled-border-color
1461
+ );
1462
+ --amplify-internal-button-disabled-background-color: var(
1463
+ --amplify-components-button-warning-disabled-background-color
1464
+ );
1465
+ --amplify-internal-button-disabled-color: var(
1466
+ --amplify-components-button-warning-disabled-color
1467
+ );
1468
+ --amplify-internal-button-loading-background-color: var(
1469
+ --amplify-components-button-warning-loading-background-color
1470
+ );
1471
+ --amplify-internal-button-loading-border-color: var(
1472
+ --amplify-components-button-warning-loading-border-color
1473
+ );
1474
+ --amplify-internal-button-loading-color: var(
1475
+ --amplify-components-button-warning-loading-color
1476
+ );
1477
+ --amplify-internal-button-loading-text-decoration: none;
1478
+ }
1479
+ .amplify-button--warning:hover {
1480
+ background-color: var(--amplify-components-button-warning-hover-background-color);
1481
+ border-color: var(--amplify-components-button-warning-hover-border-color);
1482
+ color: var(--amplify-components-button-warning-hover-color);
1483
+ }
1484
+ .amplify-button--warning:focus {
1485
+ background-color: var(--amplify-components-button-warning-focus-background-color);
1486
+ border-color: var(--amplify-components-button-warning-focus-border-color);
1487
+ color: var(--amplify-components-button-warning-focus-color);
1488
+ box-shadow: var(--amplify-components-button-warning-focus-box-shadow);
1489
+ }
1490
+ .amplify-button--warning:active {
1491
+ background-color: var(--amplify-components-button-warning-active-background-color);
1492
+ border-color: var(--amplify-components-button-warning-active-border-color);
1493
+ color: var(--amplify-components-button-warning-active-color);
1494
+ }
1308
1495
  .amplify-button--small {
1309
1496
  font-size: var(--amplify-components-button-small-font-size);
1310
1497
  -webkit-padding-before: var(--amplify-components-button-small-padding-block-start);
@@ -1844,6 +2031,7 @@ strong.amplify-text {
1844
2031
  .amplify-alert {
1845
2032
  align-items: var(--amplify-components-alert-align-items);
1846
2033
  background-color: var(--amplify-components-alert-background-color);
2034
+ color: var(--amplify-components-alert-color);
1847
2035
  justify-content: var(--amplify-components-alert-justify-content);
1848
2036
  padding-block: var(--amplify-components-alert-padding-block);
1849
2037
  padding-inline: var(--amplify-components-alert-padding-inline);
@@ -1916,6 +2104,7 @@ strong.amplify-text {
1916
2104
  }
1917
2105
  .amplify-autocomplete__menu__options {
1918
2106
  position: relative;
2107
+ overscroll-behavior: contain;
1919
2108
  display: var(--amplify-components-autocomplete-menu-options-display);
1920
2109
  flex-direction: var(--amplify-components-autocomplete-menu-options-flex-direction);
1921
2110
  max-height: var(--amplify-components-autocomplete-menu-options-max-height);
@@ -2510,6 +2699,147 @@ html[dir=rtl] .amplify-field-group__inner-start {
2510
2699
  height: 100%;
2511
2700
  }
2512
2701
 
2702
+ .amplify-fileuploader__dropzone {
2703
+ background-color: var(--amplify-components-fileuploader-dropzone-background-color);
2704
+ border-color: var(--amplify-components-fileuploader-dropzone-border-color);
2705
+ border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
2706
+ border-style: var(--amplify-components-fileuploader-dropzone-border-style);
2707
+ border-width: var(--amplify-components-fileuploader-dropzone-border-width);
2708
+ text-align: var(--amplify-components-fileuploader-dropzone-text-align);
2709
+ padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
2710
+ padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
2711
+ display: flex;
2712
+ flex-direction: column;
2713
+ align-items: center;
2714
+ gap: var(--amplify-components-fileuploader-dropzone-gap);
2715
+ }
2716
+ .amplify-fileuploader__dropzone--small {
2717
+ flex-direction: row;
2718
+ justify-content: center;
2719
+ }
2720
+ .amplify-fileuploader__dropzone--active {
2721
+ border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
2722
+ border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
2723
+ background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
2724
+ }
2725
+ .amplify-fileuploader__dropzone__icon {
2726
+ font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
2727
+ color: var(--amplify-components-fileuploader-dropzone-icon-color);
2728
+ }
2729
+ .amplify-fileuploader__dropzone__text {
2730
+ color: var(--amplify-components-fileuploader-dropzone-text-color);
2731
+ font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
2732
+ font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
2733
+ }
2734
+ .amplify-fileuploader__file {
2735
+ position: relative;
2736
+ border-width: var(--amplify-components-fileuploader-file-border-width);
2737
+ border-style: var(--amplify-components-fileuploader-file-border-style);
2738
+ border-color: var(--amplify-components-fileuploader-file-border-color);
2739
+ border-radius: var(--amplify-components-fileuploader-file-border-radius);
2740
+ display: flex;
2741
+ flex-direction: row;
2742
+ padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
2743
+ padding-block: var(--amplify-components-fileuploader-file-padding-block);
2744
+ align-items: var(--amplify-components-fileuploader-file-align-items);
2745
+ gap: var(--amplify-components-fileuploader-file-gap);
2746
+ }
2747
+ .amplify-fileuploader__file__name {
2748
+ text-overflow: ellipsis;
2749
+ overflow: hidden;
2750
+ font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
2751
+ font-size: var(--amplify-components-fileuploader-file-name-font-size);
2752
+ color: var(--amplify-components-fileuploader-file-name-color);
2753
+ }
2754
+ .amplify-fileuploader__file__size {
2755
+ font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
2756
+ font-size: var(--amplify-components-fileuploader-file-size-font-size);
2757
+ color: var(--amplify-components-fileuploader-file-size-color);
2758
+ }
2759
+ .amplify-fileuploader__file__main {
2760
+ flex: 1;
2761
+ white-space: nowrap;
2762
+ overflow: hidden;
2763
+ }
2764
+ .amplify-fileuploader__file__image {
2765
+ position: relative;
2766
+ display: flex;
2767
+ align-items: center;
2768
+ justify-content: center;
2769
+ width: var(--amplify-components-fileuploader-file-image-width);
2770
+ height: var(--amplify-components-fileuploader-file-image-height);
2771
+ background-color: var(--amplify-components-fileuploader-file-image-background-color);
2772
+ border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
2773
+ color: var(--amplify-components-fileuploader-file-image-color);
2774
+ }
2775
+ .amplify-fileuploader__file__image img {
2776
+ max-height: 100%;
2777
+ }
2778
+ .amplify-fileuploader__file__status--error {
2779
+ color: var(--amplify-colors-font-error);
2780
+ font-size: var(--amplify-components-fileuploader-file-size-font-size);
2781
+ }
2782
+ .amplify-fileuploader__file__status--success {
2783
+ color: var(--amplify-colors-font-success);
2784
+ }
2785
+ .amplify-fileuploader__loader {
2786
+ stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
2787
+ stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
2788
+ stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
2789
+ height: var(--amplify-components-fileuploader-loader-stroke-width);
2790
+ --amplify-components-loader-linear-stroke-filled: var(
2791
+ --amplify-components-fileuploader-loader-stroke-filled
2792
+ );
2793
+ overflow: hidden;
2794
+ position: absolute;
2795
+ bottom: 0;
2796
+ left: 0;
2797
+ width: 100%;
2798
+ }
2799
+ .amplify-fileuploader__previewer {
2800
+ display: block;
2801
+ max-width: var(--amplify-components-fileuploader-previewer-max-width);
2802
+ background-color: var(--amplify-components-fileuploader-previewer-background-color);
2803
+ border-width: var(--amplify-components-fileuploader-previewer-border-width);
2804
+ border-style: var(--amplify-components-fileuploader-previewer-border-style);
2805
+ border-color: var(--amplify-components-fileuploader-previewer-border-color);
2806
+ border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
2807
+ padding-inline: var(--amplify-components-fileuploader-previewer-padding-inline);
2808
+ padding-block: var(--amplify-components-fileuploader-previewer-padding-block);
2809
+ }
2810
+ .amplify-fileuploader__previewer__text {
2811
+ font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
2812
+ font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
2813
+ color: var(--amplify-components-fileuploader-previewer-text-color);
2814
+ }
2815
+ .amplify-fileuploader__previewer__body {
2816
+ display: flex;
2817
+ flex-direction: column;
2818
+ max-height: var(--amplify-components-fileuploader-previewer-max-height);
2819
+ max-width: var(--amplify-components-fileuploader-previewer-max-width);
2820
+ overflow: auto;
2821
+ gap: var(--amplify-components-fileuploader-previewer-body-gap);
2822
+ padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
2823
+ padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
2824
+ }
2825
+ .amplify-fileuploader__previewer__footer {
2826
+ max-width: var(--amplify-components-fileuploader-previewer-max-width);
2827
+ border-top-width: var(--amplify-components-fileuploader-previewer-footer-border-width);
2828
+ border-top-style: var(--amplify-components-fileuploader-previewer-footer-border-style);
2829
+ border-top-color: var(--amplify-components-fileuploader-previewer-footer-border-color);
2830
+ padding-inline: var(--amplify-components-fileuploader-previewer-footer-padding-inline);
2831
+ padding-block: var(--amplify-components-fileuploader-previewer-footer-padding-block);
2832
+ position: relative;
2833
+ display: flex;
2834
+ flex-direction: row;
2835
+ justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
2836
+ }
2837
+ .amplify-fileuploader__previewer__footer__actions {
2838
+ display: flex;
2839
+ flex-direction: row;
2840
+ gap: var(--amplify-space-small);
2841
+ }
2842
+
2513
2843
  .amplify-menu-content-wrapper {
2514
2844
  z-index: 999999;
2515
2845
  }
@@ -2761,6 +3091,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
2761
3091
  }
2762
3092
 
2763
3093
  .amplify-radio__button {
3094
+ flex-shrink: 0;
2764
3095
  align-items: var(--amplify-components-radio-button-align-items);
2765
3096
  justify-content: var(--amplify-components-radio-button-justify-content);
2766
3097
  padding: var(--amplify-components-radio-button-padding);
package/dist/theme.css CHANGED
@@ -160,6 +160,47 @@
160
160
  --amplify-components-button-link-loading-border-color: transparent;
161
161
  --amplify-components-button-link-loading-background-color: transparent;
162
162
  --amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled);
163
+ --amplify-components-button-warning-background-color: transparent;
164
+ --amplify-components-button-warning-border-color: var(--amplify-colors-red-60);
165
+ --amplify-components-button-warning-border-width: var(--amplify-border-widths-small);
166
+ --amplify-components-button-warning-color: var(--amplify-colors-red-60);
167
+ --amplify-components-button-warning-hover-border-color: var(--amplify-colors-red-80);
168
+ --amplify-components-button-warning-hover-background-color: var(--amplify-colors-red-10);
169
+ --amplify-components-button-warning-hover-color: var(--amplify-colors-font-error);
170
+ --amplify-components-button-warning-focus-border-color: var(--amplify-colors-red-80);
171
+ --amplify-components-button-warning-focus-background-color: var(--amplify-colors-red-10);
172
+ --amplify-components-button-warning-focus-color: var(--amplify-colors-red-80);
173
+ --amplify-components-button-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
174
+ --amplify-components-button-warning-active-border-color: var(--amplify-colors-red-100);
175
+ --amplify-components-button-warning-active-background-color: var(--amplify-colors-red-20);
176
+ --amplify-components-button-warning-active-color: var(--amplify-colors-red-100);
177
+ --amplify-components-button-warning-disabled-border-color: var(--amplify-colors-border-tertiary);
178
+ --amplify-components-button-warning-disabled-background-color: transparent;
179
+ --amplify-components-button-warning-disabled-color: var(--amplify-colors-font-disabled);
180
+ --amplify-components-button-warning-loading-border-color: var(--amplify-colors-border-tertiary);
181
+ --amplify-components-button-warning-loading-background-color: transparent;
182
+ --amplify-components-button-warning-loading-color: var(--amplify-colors-font-disabled);
183
+ --amplify-components-button-destructive-border-color: transparent;
184
+ --amplify-components-button-destructive-border-width: var(--amplify-border-widths-small);
185
+ --amplify-components-button-destructive-border-style: solid;
186
+ --amplify-components-button-destructive-background-color: var(--amplify-colors-red-60);
187
+ --amplify-components-button-destructive-color: var(--amplify-colors-font-inverse);
188
+ --amplify-components-button-destructive-disabled-border-color: transparent;
189
+ --amplify-components-button-destructive-disabled-background-color: var(--amplify-colors-background-disabled);
190
+ --amplify-components-button-destructive-disabled-color: var(--amplify-colors-font-disabled);
191
+ --amplify-components-button-destructive-loading-border-color: transparent;
192
+ --amplify-components-button-destructive-loading-background-color: var(--amplify-colors-background-disabled);
193
+ --amplify-components-button-destructive-loading-color: var(--amplify-colors-font-disabled);
194
+ --amplify-components-button-destructive-hover-border-color: transparent;
195
+ --amplify-components-button-destructive-hover-background-color: var(--amplify-colors-red-80);
196
+ --amplify-components-button-destructive-hover-color: var(--amplify-colors-font-inverse);
197
+ --amplify-components-button-destructive-focus-border-color: transparent;
198
+ --amplify-components-button-destructive-focus-background-color: var(--amplify-colors-red-80);
199
+ --amplify-components-button-destructive-focus-color: var(--amplify-colors-font-inverse);
200
+ --amplify-components-button-destructive-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
201
+ --amplify-components-button-destructive-active-border-color: transparent;
202
+ --amplify-components-button-destructive-active-background-color: var(--amplify-colors-red-100);
203
+ --amplify-components-button-destructive-active-color: var(--amplify-colors-font-inverse);
163
204
  --amplify-components-button-small-font-size: var(--amplify-components-fieldcontrol-small-font-size);
164
205
  --amplify-components-button-small-padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
165
206
  --amplify-components-button-small-padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
@@ -361,6 +402,70 @@
361
402
  --amplify-components-fieldmessages-description-color: var(--amplify-colors-font-secondary);
362
403
  --amplify-components-fieldmessages-description-font-style: italic;
363
404
  --amplify-components-fieldmessages-description-font-size: var(--amplify-font-sizes-small);
405
+ --amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary);
406
+ --amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small);
407
+ --amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary);
408
+ --amplify-components-fileuploader-dropzone-border-style: dashed;
409
+ --amplify-components-fileuploader-dropzone-border-width: var(--amplify-border-widths-small);
410
+ --amplify-components-fileuploader-dropzone-gap: var(--amplify-space-small);
411
+ --amplify-components-fileuploader-dropzone-padding-block: var(--amplify-space-xl);
412
+ --amplify-components-fileuploader-dropzone-padding-inline: var(--amplify-space-large);
413
+ --amplify-components-fileuploader-dropzone-text-align: center;
414
+ --amplify-components-fileuploader-dropzone-active-background-color: var(--amplify-colors-brand-primary-10);
415
+ --amplify-components-fileuploader-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
416
+ --amplify-components-fileuploader-dropzone-active-border-color: var(--amplify-colors-border-pressed);
417
+ --amplify-components-fileuploader-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
418
+ --amplify-components-fileuploader-dropzone-active-border-width: var(--amplify-border-widths-medium);
419
+ --amplify-components-fileuploader-dropzone-icon-color: var(--amplify-colors-border-primary);
420
+ --amplify-components-fileuploader-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
421
+ --amplify-components-fileuploader-dropzone-text-color: var(--amplify-colors-font-tertiary);
422
+ --amplify-components-fileuploader-dropzone-text-font-size: var(--amplify-font-sizes-medium);
423
+ --amplify-components-fileuploader-dropzone-text-font-weight: var(--amplify-font-weights-bold);
424
+ --amplify-components-fileuploader-file-background-color: var(--amplify-colors-background-primary);
425
+ --amplify-components-fileuploader-file-border-radius: var(--amplify-radii-small);
426
+ --amplify-components-fileuploader-file-border-color: var(--amplify-colors-border-primary);
427
+ --amplify-components-fileuploader-file-border-style: solid;
428
+ --amplify-components-fileuploader-file-border-width: var(--amplify-border-widths-small);
429
+ --amplify-components-fileuploader-file-padding-block: var(--amplify-space-xs);
430
+ --amplify-components-fileuploader-file-padding-inline: var(--amplify-space-small);
431
+ --amplify-components-fileuploader-file-gap: var(--amplify-space-small);
432
+ --amplify-components-fileuploader-file-align-items: center;
433
+ --amplify-components-fileuploader-file-name-font-size: var(--amplify-font-sizes-medium);
434
+ --amplify-components-fileuploader-file-name-font-weight: var(--amplify-font-weights-bold);
435
+ --amplify-components-fileuploader-file-name-color: var(--amplify-colors-font-primary);
436
+ --amplify-components-fileuploader-file-size-font-size: var(--amplify-font-sizes-small);
437
+ --amplify-components-fileuploader-file-size-font-weight: var(--amplify-font-weights-normal);
438
+ --amplify-components-fileuploader-file-size-color: var(--amplify-colors-font-tertiary);
439
+ --amplify-components-fileuploader-file-image-width: var(--amplify-space-xxl);
440
+ --amplify-components-fileuploader-file-image-height: var(--amplify-space-xxl);
441
+ --amplify-components-fileuploader-file-image-background-color: var(--amplify-colors-background-secondary);
442
+ --amplify-components-fileuploader-file-image-color: var(--amplify-colors-font-tertiary);
443
+ --amplify-components-fileuploader-file-image-border-radius: var(--amplify-radii-small);
444
+ --amplify-components-fileuploader-loader-stroke-linecap: round;
445
+ --amplify-components-fileuploader-loader-stroke-empty: var(--amplify-colors-border-secondary);
446
+ --amplify-components-fileuploader-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
447
+ --amplify-components-fileuploader-loader-stroke-width: var(--amplify-border-widths-large);
448
+ --amplify-components-fileuploader-previewer-background-color: var(--amplify-colors-background-primary);
449
+ --amplify-components-fileuploader-previewer-border-color: var(--amplify-colors-border-primary);
450
+ --amplify-components-fileuploader-previewer-border-style: solid;
451
+ --amplify-components-fileuploader-previewer-border-width: var(--amplify-border-widths-small);
452
+ --amplify-components-fileuploader-previewer-border-radius: var(--amplify-radii-small);
453
+ --amplify-components-fileuploader-previewer-padding-block: var(--amplify-space-zero);
454
+ --amplify-components-fileuploader-previewer-padding-inline: var(--amplify-space-zero);
455
+ --amplify-components-fileuploader-previewer-max-height: 40rem;
456
+ --amplify-components-fileuploader-previewer-max-width: auto;
457
+ --amplify-components-fileuploader-previewer-text-font-size: var(--amplify-font-sizes-medium);
458
+ --amplify-components-fileuploader-previewer-text-font-weight: var(--amplify-font-weights-bold);
459
+ --amplify-components-fileuploader-previewer-text-color: var(--amplify-colors-font-primary);
460
+ --amplify-components-fileuploader-previewer-body-padding-block: var(--amplify-space-medium);
461
+ --amplify-components-fileuploader-previewer-body-padding-inline: var(--amplify-space-medium);
462
+ --amplify-components-fileuploader-previewer-body-gap: var(--amplify-space-small);
463
+ --amplify-components-fileuploader-previewer-footer-border-color: var(--amplify-colors-border-secondary);
464
+ --amplify-components-fileuploader-previewer-footer-border-style: solid;
465
+ --amplify-components-fileuploader-previewer-footer-border-width: var(--amplify-border-widths-small);
466
+ --amplify-components-fileuploader-previewer-footer-padding-block: var(--amplify-space-medium);
467
+ --amplify-components-fileuploader-previewer-footer-padding-inline: var(--amplify-space-medium);
468
+ --amplify-components-fileuploader-previewer-footer-justify-content: space-between;
364
469
  --amplify-components-flex-gap: var(--amplify-space-medium);
365
470
  --amplify-components-flex-justify-content: normal;
366
471
  --amplify-components-flex-align-items: stretch;
@@ -842,7 +947,7 @@
842
947
  --amplify-colors-neutral-10: hsl(210, 5%, 98%);
843
948
  --amplify-colors-neutral-20: hsl(210, 5%, 94%);
844
949
  --amplify-colors-neutral-40: hsl(210, 5%, 87%);
845
- --amplify-colors-neutral-60: hsl(210, 8%, 55%);
950
+ --amplify-colors-neutral-60: hsl(210, 10%, 58%);
846
951
  --amplify-colors-neutral-80: hsl(210, 10%, 40%);
847
952
  --amplify-colors-neutral-90: hsl(210, 25%, 25%);
848
953
  --amplify-colors-neutral-100: hsl(210, 50%, 10%);
package/dist/types/helpers/accountSettings/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './utils';
2
+ export { getDefaultConfirmPasswordValidators, getDefaultPasswordValidators, runFieldValidators, } from './validator';
package/dist/types/helpers/accountSettings/utils.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { AmplifyUser } from '../../types';
2
+ declare type ChangePasswordInput = {
3
+ user: AmplifyUser;
4
+ currentPassword: string;
5
+ newPassword: string;
6
+ };
7
+ export declare const changePassword: ({ user, currentPassword, newPassword, }: ChangePasswordInput) => Promise<void>;
8
+ export declare const deleteUser: () => Promise<void>;
9
+ export {};
package/dist/types/helpers/accountSettings/validator.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import { ValidatorOptions, PasswordRequirement, ValidationMode, InputEventType } from '../../types';
2
+ export declare const getPasswordRequirement: () => PasswordRequirement;
3
+ export declare const getHasMinLength: (minLength: number) => ValidatorOptions;
4
+ export declare const hasLowerCase: ValidatorOptions;
5
+ export declare const hasUpperCase: ValidatorOptions;
6
+ export declare const hasNumber: ValidatorOptions;
7
+ export declare const hasSpecialChar: ValidatorOptions;
8
+ export declare const getMatchesConfirmPassword: (password: string) => ValidatorOptions;
9
+ export declare const getDefaultPasswordValidators: () => ValidatorOptions[];
10
+ export declare const getDefaultConfirmPasswordValidators: (password: string) => ValidatorOptions[];
11
+ export declare const shouldValidate: ({ validationMode, eventType, hasBlurred, }: {
12
+ validationMode: ValidationMode;
13
+ eventType: InputEventType;
14
+ hasBlurred: boolean;
15
+ }) => boolean;
16
+ export declare const runFieldValidators: ({ value, validators, eventType, hasBlurred, }: {
17
+ value: string;
18
+ validators: ValidatorOptions[];
19
+ eventType: InputEventType;
20
+ hasBlurred: boolean;
21
+ }) => string[];
package/dist/types/helpers/authenticator/textUtil.d.ts CHANGED
@@ -30,7 +30,7 @@ export declare const authenticatorTextUtil: {
30
30
  readonly getDeliveryMessageText: (codeDeliveryDetails: CodeDeliveryDetails) => string;
31
31
  readonly getDeliveryMethodText: (codeDeliveryDetails: CodeDeliveryDetails) => string;
32
32
  /** ConfirmSignIn */
33
- readonly getChallengeText: (challengeName: AuthChallengeName) => string;
33
+ readonly getChallengeText: (challengeName?: AuthChallengeName) => string;
34
34
  /** ResetPassword */
35
35
  readonly getResetYourPasswordText: () => string;
36
36
  /** SetupTOTP */
package/dist/types/helpers/index.d.ts CHANGED
@@ -1 +1,4 @@
1
1
  export * from './authenticator';
2
+ export * from './accountSettings';
3
+ export * from './storage';
4
+ export { getLogger } from './utils';
package/dist/types/helpers/storage/fileUploader/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './utils';
package/dist/types/helpers/storage/fileUploader/utils/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { uploadFile, humanFileSize, checkMaxSize, returnAcceptedFiles, isValidExtension, } from './uploader';
package/dist/types/helpers/storage/fileUploader/utils/uploader.d.ts ADDED
@@ -0,0 +1,27 @@
1
+ import { StorageAccessLevel } from '@aws-amplify/storage';
2
+ export declare function uploadFile({ file, fileName, level, progressCallback, errorCallback, completeCallback, isResumable, ...rest }: {
3
+ file: File;
4
+ fileName: string;
5
+ level: StorageAccessLevel;
6
+ isResumable?: boolean;
7
+ progressCallback: (progress: {
8
+ loaded: number;
9
+ total: number;
10
+ }) => void;
11
+ errorCallback: (err: string) => void;
12
+ completeCallback: (event: any) => void;
13
+ }): Promise<void> | import("@aws-amplify/storage").UploadTask;
14
+ /**
15
+ * Format bytes as human-readable text.
16
+ *
17
+ * @param bytes Number of bytes.
18
+ * @param si True to use metric (SI) units, aka powers of 1000. False to use
19
+ * binary (IEC), aka powers of 1024.
20
+ * @param dp Number of decimal places to display.
21
+ *
22
+ * @return Formatted string.
23
+ */
24
+ export declare function humanFileSize(bytes: any, si?: boolean, dp?: number): string;
25
+ export declare const checkMaxSize: (maxSize: number, file: File) => string | null;
26
+ export declare const returnAcceptedFiles: (files: File[], acceptedFileTypes: string[]) => File[];
27
+ export declare const isValidExtension: (fileName: string, fileName2: string) => boolean;
package/dist/types/helpers/storage/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './fileUploader';
package/dist/types/helpers/utils.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { Logger } from 'aws-amplify';
2
+ declare type LoggerCategory = 'Auth' | 'Geo' | 'Notifications' | 'Storage';
3
+ export declare const getLogger: (category: LoggerCategory) => Logger;
4
+ export {};
package/dist/types/theme/tokens/components/button.d.ts CHANGED
@@ -23,18 +23,20 @@ declare type LinkVariationTokens<Output> = DesignTokenProperties<'backgroundColo
23
23
  _loading?: StateTokens<Output>;
24
24
  };
25
25
  declare type ButtonSizeTokens<Output> = DesignTokenProperties<'fontSize' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInlineStart' | 'paddingInlineEnd', Output>;
26
- export declare type ButtonTokens<Output extends OutputVariantKey> = DesignTokenProperties<'fontWeight' | 'transitionDuration' | 'fontSize' | 'lineHeight' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInlineStart' | 'paddingInlineEnd' | 'borderColor' | 'borderWidth' | 'borderStyle' | 'borderRadius' | 'color'> & {
26
+ export declare type ButtonTokens<Output extends OutputVariantKey> = DesignTokenProperties<'fontWeight' | 'transitionDuration' | 'fontSize' | 'lineHeight' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInlineStart' | 'paddingInlineEnd' | 'borderColor' | 'borderWidth' | 'borderStyle' | 'borderRadius' | 'color', Output> & {
27
27
  _hover?: StateTokens<Output>;
28
28
  _focus?: StateWithShadowTokens<Output>;
29
29
  _active?: StateTokens<Output>;
30
30
  _loading?: StateTokens<Output>;
31
31
  _disabled?: StateTokens<Output>;
32
32
  primary?: PrimaryVariationTokens<Output>;
33
+ warning?: LinkVariationTokens<Output>;
34
+ destructive?: PrimaryVariationTokens<Output>;
33
35
  menu?: MenuVariationTokens<Output>;
34
36
  link?: LinkVariationTokens<Output>;
35
37
  small?: ButtonSizeTokens<Output>;
36
38
  large?: ButtonSizeTokens<Output>;
37
- loaderWrapper: DesignTokenProperties<'alignItems' | 'gap', Output>;
39
+ loaderWrapper?: DesignTokenProperties<'alignItems' | 'gap', Output>;
38
40
  };
39
41
  export declare const button: Required<ButtonTokens<'default'>>;
40
42
  export {};