@aws-amplify/ui-react-notifications 1.0.10 → 1.0.12

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 (2) hide show
  1. package/dist/styles.css +353 -11
  2. package/package.json +4 -4
package/dist/styles.css CHANGED
@@ -113,6 +113,7 @@
113
113
  --amplify-components-button-padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
114
114
  --amplify-components-button-padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
115
115
  --amplify-components-button-padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
116
+ --amplify-components-button-background-color: transparent;
116
117
  --amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color);
117
118
  --amplify-components-button-border-width: var(--amplify-components-fieldcontrol-border-width);
118
119
  --amplify-components-button-border-style: var(--amplify-components-fieldcontrol-border-style);
@@ -530,6 +531,40 @@
530
531
  --amplify-components-divider-small-border-width: var(--amplify-border-widths-small);
531
532
  --amplify-components-divider-large-border-width: var(--amplify-border-widths-large);
532
533
  --amplify-components-divider-opacity: var(--amplify-opacities-60);
534
+ --amplify-components-dropzone-background-color: var(--amplify-colors-background-primary);
535
+ --amplify-components-dropzone-border-radius: var(--amplify-radii-small);
536
+ --amplify-components-dropzone-border-color: var(--amplify-colors-border-primary);
537
+ --amplify-components-dropzone-border-style: dashed;
538
+ --amplify-components-dropzone-border-width: var(--amplify-border-widths-small);
539
+ --amplify-components-dropzone-color: var(--amplify-colors-font-primary);
540
+ --amplify-components-dropzone-gap: var(--amplify-space-small);
541
+ --amplify-components-dropzone-padding-block: var(--amplify-space-xl);
542
+ --amplify-components-dropzone-padding-inline: var(--amplify-space-large);
543
+ --amplify-components-dropzone-text-align: center;
544
+ --amplify-components-dropzone-active-background-color: var(--amplify-colors-brand-primary-10);
545
+ --amplify-components-dropzone-active-border-radius: var(--amplify-components-dropzone-border-radius);
546
+ --amplify-components-dropzone-active-border-color: var(--amplify-colors-border-pressed);
547
+ --amplify-components-dropzone-active-border-style: var(--amplify-components-dropzone-border-style);
548
+ --amplify-components-dropzone-active-border-width: var(--amplify-components-dropzone-border-width);
549
+ --amplify-components-dropzone-active-color: var(--amplify-colors-font-primary);
550
+ --amplify-components-dropzone-disabled-background-color: var(--amplify-colors-background-disabled);
551
+ --amplify-components-dropzone-disabled-border-radius: var(--amplify-components-dropzone-border-radius);
552
+ --amplify-components-dropzone-disabled-border-color: var(--amplify-colors-border-disabled);
553
+ --amplify-components-dropzone-disabled-border-style: var(--amplify-components-dropzone-border-style);
554
+ --amplify-components-dropzone-disabled-border-width: var(--amplify-components-dropzone-border-width);
555
+ --amplify-components-dropzone-disabled-color: var(--amplify-colors-font-disabled);
556
+ --amplify-components-dropzone-accepted-background-color: var(--amplify-colors-background-success);
557
+ --amplify-components-dropzone-accepted-border-radius: var(--amplify-components-dropzone-border-radius);
558
+ --amplify-components-dropzone-accepted-border-color: var(--amplify-colors-border-success);
559
+ --amplify-components-dropzone-accepted-border-style: var(--amplify-components-dropzone-border-style);
560
+ --amplify-components-dropzone-accepted-border-width: var(--amplify-components-dropzone-border-width);
561
+ --amplify-components-dropzone-accepted-color: var(--amplify-colors-font-success);
562
+ --amplify-components-dropzone-rejected-background-color: var(--amplify-colors-background-error);
563
+ --amplify-components-dropzone-rejected-border-radius: var(--amplify-components-dropzone-border-radius);
564
+ --amplify-components-dropzone-rejected-border-color: var(--amplify-colors-border-pressed);
565
+ --amplify-components-dropzone-rejected-border-style: var(--amplify-components-dropzone-border-style);
566
+ --amplify-components-dropzone-rejected-border-width: var(--amplify-components-dropzone-border-width);
567
+ --amplify-components-dropzone-rejected-color: var(--amplify-colors-font-error);
533
568
  --amplify-components-expander-display: block;
534
569
  --amplify-components-expander-background-color: var(--amplify-colors-background-primary);
535
570
  --amplify-components-expander-border-radius: var(--amplify-radii-medium);
@@ -624,6 +659,24 @@
624
659
  --amplify-components-fieldmessages-description-color: var(--amplify-colors-font-secondary);
625
660
  --amplify-components-fieldmessages-description-font-style: italic;
626
661
  --amplify-components-fieldmessages-description-font-size: var(--amplify-font-sizes-small);
662
+ --amplify-components-fieldset-background-color: transparent;
663
+ --amplify-components-fieldset-border-radius: var(--amplify-radii-xs);
664
+ --amplify-components-fieldset-flex-direction: column;
665
+ --amplify-components-fieldset-gap: var(--amplify-components-field-gap);
666
+ --amplify-components-fieldset-legend-color: var(--amplify-colors-font-primary);
667
+ --amplify-components-fieldset-legend-font-size: var(--amplify-components-field-font-size);
668
+ --amplify-components-fieldset-legend-font-weight: var(--amplify-font-weights-bold);
669
+ --amplify-components-fieldset-legend-line-height: var(--amplify-line-heights-medium);
670
+ --amplify-components-fieldset-legend-small-font-size: var(--amplify-components-field-small-font-size);
671
+ --amplify-components-fieldset-legend-large-font-size: var(--amplify-components-field-large-font-size);
672
+ --amplify-components-fieldset-outlined-padding: var(--amplify-space-medium);
673
+ --amplify-components-fieldset-outlined-border-color: var(--amplify-colors-neutral-40);
674
+ --amplify-components-fieldset-outlined-border-width: var(--amplify-border-widths-small);
675
+ --amplify-components-fieldset-outlined-border-style: solid;
676
+ --amplify-components-fieldset-outlined-small-padding: var(--amplify-space-small);
677
+ --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large);
678
+ --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap);
679
+ --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap);
627
680
  --amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary);
628
681
  --amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small);
629
682
  --amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary);
@@ -725,6 +778,10 @@
725
778
  --amplify-components-inappmessaging-dialog-width: 30vw;
726
779
  --amplify-components-inappmessaging-header-font-size: var(--amplify-font-sizes-medium);
727
780
  --amplify-components-inappmessaging-header-font-weight: var(--amplify-font-weights-extrabold);
781
+ --amplify-components-input-color: var(--amplify-components-fieldcontrol-color);
782
+ --amplify-components-input-border-color: var(--amplify-components-fieldcontrol-border-color);
783
+ --amplify-components-input-font-size: var(--amplify-components-fieldcontrol-font-size);
784
+ --amplify-components-input-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
728
785
  --amplify-components-link-active-color: var(--amplify-colors-font-active);
729
786
  --amplify-components-link-color: var(--amplify-colors-font-interactive);
730
787
  --amplify-components-link-focus-color: var(--amplify-colors-font-focus);
@@ -774,6 +831,66 @@
774
831
  --amplify-components-menu-item-min-height: 2.5rem;
775
832
  --amplify-components-menu-item-padding-inline-start: var(--amplify-space-medium);
776
833
  --amplify-components-menu-item-padding-inline-end: var(--amplify-space-medium);
834
+ --amplify-components-message-align-items: center;
835
+ --amplify-components-message-background-color: var(--amplify-colors-background-tertiary);
836
+ --amplify-components-message-border-color: transparent;
837
+ --amplify-components-message-border-style: solid;
838
+ --amplify-components-message-border-width: var(--amplify-border-widths-small);
839
+ --amplify-components-message-border-radius: var(--amplify-radii-xs);
840
+ --amplify-components-message-color: var(--amplify-colors-font-primary);
841
+ --amplify-components-message-justify-content: flex-start;
842
+ --amplify-components-message-padding-block: var(--amplify-space-small);
843
+ --amplify-components-message-padding-inline: var(--amplify-space-medium);
844
+ --amplify-components-message-line-height: var(--amplify-line-heights-small);
845
+ --amplify-components-message-icon-size: var(--amplify-font-sizes-xl);
846
+ --amplify-components-message-heading-font-size: var(--amplify-font-sizes-medium);
847
+ --amplify-components-message-heading-font-weight: var(--amplify-font-weights-bold);
848
+ --amplify-components-message-dismiss-gap: var(--amplify-space-xxs);
849
+ --amplify-components-message-plain-color: var(--amplify-colors-font-primary);
850
+ --amplify-components-message-plain-background-color: var(--amplify-colors-background-primary);
851
+ --amplify-components-message-plain-border-color: transparent;
852
+ --amplify-components-message-plain-info-color: var(--amplify-colors-font-info);
853
+ --amplify-components-message-plain-info-background-color: var(--amplify-colors-background-primary);
854
+ --amplify-components-message-plain-info-border-color: transparent;
855
+ --amplify-components-message-plain-error-color: var(--amplify-colors-font-error);
856
+ --amplify-components-message-plain-error-background-color: var(--amplify-colors-background-primary);
857
+ --amplify-components-message-plain-error-border-color: transparent;
858
+ --amplify-components-message-plain-success-color: var(--amplify-colors-font-success);
859
+ --amplify-components-message-plain-success-background-color: var(--amplify-colors-background-primary);
860
+ --amplify-components-message-plain-success-border-color: transparent;
861
+ --amplify-components-message-plain-warning-color: var(--amplify-colors-font-warning);
862
+ --amplify-components-message-plain-warning-background-color: var(--amplify-colors-background-primary);
863
+ --amplify-components-message-plain-warning-border-color: transparent;
864
+ --amplify-components-message-outlined-color: var(--amplify-colors-font-primary);
865
+ --amplify-components-message-outlined-background-color: var(--amplify-colors-background-primary);
866
+ --amplify-components-message-outlined-border-color: var(--amplify-colors-border-primary);
867
+ --amplify-components-message-outlined-info-color: var(--amplify-colors-font-info);
868
+ --amplify-components-message-outlined-info-background-color: var(--amplify-colors-background-primary);
869
+ --amplify-components-message-outlined-info-border-color: var(--amplify-colors-border-info);
870
+ --amplify-components-message-outlined-error-color: var(--amplify-colors-font-error);
871
+ --amplify-components-message-outlined-error-background-color: var(--amplify-colors-background-primary);
872
+ --amplify-components-message-outlined-error-border-color: var(--amplify-colors-border-error);
873
+ --amplify-components-message-outlined-success-color: var(--amplify-colors-font-success);
874
+ --amplify-components-message-outlined-success-background-color: var(--amplify-colors-background-primary);
875
+ --amplify-components-message-outlined-success-border-color: var(--amplify-colors-border-success);
876
+ --amplify-components-message-outlined-warning-color: var(--amplify-colors-font-warning);
877
+ --amplify-components-message-outlined-warning-background-color: var(--amplify-colors-background-primary);
878
+ --amplify-components-message-outlined-warning-border-color: var(--amplify-colors-border-warning);
879
+ --amplify-components-message-filled-color: var(--amplify-colors-font-primary);
880
+ --amplify-components-message-filled-background-color: var(--amplify-colors-background-secondary);
881
+ --amplify-components-message-filled-border-color: transparent;
882
+ --amplify-components-message-filled-info-color: var(--amplify-colors-font-info);
883
+ --amplify-components-message-filled-info-background-color: var(--amplify-colors-background-info);
884
+ --amplify-components-message-filled-info-border-color: transparent;
885
+ --amplify-components-message-filled-error-color: var(--amplify-colors-font-error);
886
+ --amplify-components-message-filled-error-background-color: var(--amplify-colors-background-error);
887
+ --amplify-components-message-filled-error-border-color: transparent;
888
+ --amplify-components-message-filled-success-color: var(--amplify-colors-font-success);
889
+ --amplify-components-message-filled-success-background-color: var(--amplify-colors-background-success);
890
+ --amplify-components-message-filled-success-border-color: transparent;
891
+ --amplify-components-message-filled-warning-color: var(--amplify-colors-font-warning);
892
+ --amplify-components-message-filled-warning-background-color: var(--amplify-colors-background-warning);
893
+ --amplify-components-message-filled-warning-border-color: transparent;
777
894
  --amplify-components-pagination-current-align-items: center;
778
895
  --amplify-components-pagination-current-justify-content: center;
779
896
  --amplify-components-pagination-current-color: var(--amplify-colors-font-inverse);
@@ -1013,12 +1130,7 @@
1013
1130
  --amplify-components-storagemanager-previewer-body-padding-block: var(--amplify-space-medium);
1014
1131
  --amplify-components-storagemanager-previewer-body-padding-inline: var(--amplify-space-medium);
1015
1132
  --amplify-components-storagemanager-previewer-body-gap: var(--amplify-space-small);
1016
- --amplify-components-storagemanager-previewer-footer-border-color: var(--amplify-colors-border-secondary);
1017
- --amplify-components-storagemanager-previewer-footer-border-style: solid;
1018
- --amplify-components-storagemanager-previewer-footer-border-width: var(--amplify-border-widths-small);
1019
- --amplify-components-storagemanager-previewer-footer-padding-block: var(--amplify-space-medium);
1020
- --amplify-components-storagemanager-previewer-footer-padding-inline: var(--amplify-space-medium);
1021
- --amplify-components-storagemanager-previewer-footer-justify-content: space-between;
1133
+ --amplify-components-storagemanager-previewer-footer-justify-content: flex-end;
1022
1134
  --amplify-components-storagemanager-filelist-flex-direction: column;
1023
1135
  --amplify-components-storagemanager-filelist-gap: var(--amplify-space-small);
1024
1136
  --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
@@ -1278,10 +1390,10 @@
1278
1390
  --amplify-colors-background-tertiary: var(--amplify-colors-neutral-20);
1279
1391
  --amplify-colors-background-quaternary: var(--amplify-colors-neutral-60);
1280
1392
  --amplify-colors-background-disabled: var(--amplify-colors-background-tertiary);
1281
- --amplify-colors-background-info: var(--amplify-colors-blue-20);
1282
- --amplify-colors-background-warning: var(--amplify-colors-orange-20);
1283
- --amplify-colors-background-error: var(--amplify-colors-red-20);
1284
- --amplify-colors-background-success: var(--amplify-colors-green-20);
1393
+ --amplify-colors-background-info: var(--amplify-colors-blue-10);
1394
+ --amplify-colors-background-warning: var(--amplify-colors-orange-10);
1395
+ --amplify-colors-background-error: var(--amplify-colors-red-10);
1396
+ --amplify-colors-background-success: var(--amplify-colors-green-10);
1285
1397
  --amplify-colors-border-primary: var(--amplify-colors-neutral-60);
1286
1398
  --amplify-colors-border-secondary: var(--amplify-colors-neutral-40);
1287
1399
  --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20);
@@ -1289,6 +1401,9 @@
1289
1401
  --amplify-colors-border-pressed: var(--amplify-colors-brand-primary-100);
1290
1402
  --amplify-colors-border-focus: var(--amplify-colors-brand-primary-100);
1291
1403
  --amplify-colors-border-error: var(--amplify-colors-red-80);
1404
+ --amplify-colors-border-info: var(--amplify-colors-blue-80);
1405
+ --amplify-colors-border-success: var(--amplify-colors-green-80);
1406
+ --amplify-colors-border-warning: var(--amplify-colors-orange-80);
1292
1407
  --amplify-colors-shadow-primary: hsla(210, 50%, 10%, 0.25);
1293
1408
  --amplify-colors-shadow-secondary: hsla(210, 50%, 10%, 0.15);
1294
1409
  --amplify-colors-shadow-tertiary: hsla(210, 50%, 10%, 0.05);
@@ -1528,7 +1643,9 @@ strong.amplify-text {
1528
1643
  * Button base styles
1529
1644
  */
1530
1645
  .amplify-button {
1531
- --amplify-internal-button-background-color: transparent;
1646
+ --amplify-internal-button-background-color: var(
1647
+ --amplify-components-button-background-color
1648
+ );
1532
1649
  --amplify-internal-button-border-color: var(
1533
1650
  --amplify-components-button-border-color
1534
1651
  );
@@ -2656,6 +2773,52 @@ strong.amplify-text {
2656
2773
  transition: none;
2657
2774
  }
2658
2775
  }
2776
+ .amplify-dropzone {
2777
+ display: block;
2778
+ background-color: var(--amplify-components-dropzone-background-color);
2779
+ border-color: var(--amplify-components-dropzone-border-color);
2780
+ border-width: var(--amplify-components-dropzone-border-width);
2781
+ border-style: var(--amplify-components-dropzone-border-style);
2782
+ border-radius: var(--amplify-components-dropzone-border-radius);
2783
+ color: var(--amplify-components-dropzone-color);
2784
+ padding-block: var(--amplify-components-dropzone-padding-block);
2785
+ padding-inline: var(--amplify-components-dropzone-padding-inline);
2786
+ text-align: var(--amplify-components-dropzone-text-align);
2787
+ }
2788
+ .amplify-dropzone--disabled {
2789
+ cursor: not-allowed;
2790
+ background-color: var(--amplify-components-dropzone-disabled-background-color);
2791
+ border-color: var(--amplify-components-dropzone-disabled-border-color);
2792
+ border-width: var(--amplify-components-dropzone-disabled-border-width);
2793
+ border-style: var(--amplify-components-dropzone-disabled-border-style);
2794
+ border-radius: var(--amplify-components-dropzone-disabled-border-radius);
2795
+ color: var(--amplify-components-dropzone-disabled-color);
2796
+ }
2797
+ .amplify-dropzone--active {
2798
+ background-color: var(--amplify-components-dropzone-active-background-color);
2799
+ border-color: var(--amplify-components-dropzone-active-border-color);
2800
+ border-width: var(--amplify-components-dropzone-active-border-width);
2801
+ border-style: var(--amplify-components-dropzone-active-border-style);
2802
+ border-radius: var(--amplify-components-dropzone-active-border-radius);
2803
+ color: var(--amplify-components-dropzone-active-color);
2804
+ }
2805
+ .amplify-dropzone--rejected {
2806
+ background-color: var(--amplify-components-dropzone-rejected-background-color);
2807
+ border-color: var(--amplify-components-dropzone-rejected-border-color);
2808
+ border-width: var(--amplify-components-dropzone-rejected-border-width);
2809
+ border-style: var(--amplify-components-dropzone-rejected-border-style);
2810
+ border-radius: var(--amplify-components-dropzone-rejected-border-radius);
2811
+ color: var(--amplify-components-dropzone-rejected-color);
2812
+ }
2813
+ .amplify-dropzone--accepted {
2814
+ background-color: var(--amplify-components-dropzone-accepted-background-color);
2815
+ border-color: var(--amplify-components-dropzone-accepted-border-color);
2816
+ border-width: var(--amplify-components-dropzone-accepted-border-width);
2817
+ border-style: var(--amplify-components-dropzone-accepted-border-style);
2818
+ border-radius: var(--amplify-components-dropzone-accepted-border-radius);
2819
+ color: var(--amplify-components-dropzone-accepted-color);
2820
+ }
2821
+
2659
2822
  .amplify-field__description {
2660
2823
  color: var(--amplify-components-fieldmessages-description-color);
2661
2824
  font-style: var(--amplify-components-fieldmessages-description-font-style);
@@ -2754,6 +2917,18 @@ strong.amplify-text {
2754
2917
  -moz-user-select: text;
2755
2918
  user-select: text;
2756
2919
  display: inline-block;
2920
+ --amplify-components-fieldcontrol-color: var(
2921
+ --amplify-components-input-color
2922
+ );
2923
+ --amplify-components-fieldcontrol-border-color: var(
2924
+ --amplify-components-input-border-color
2925
+ );
2926
+ --amplify-components-fieldcontrol-font-size: var(
2927
+ --amplify-components-input-font-size
2928
+ );
2929
+ --amplify-components-fieldcontrol-focus-border-color: var(
2930
+ --amplify-components-input-focus-border-color
2931
+ );
2757
2932
  }
2758
2933
  .amplify-input:focus {
2759
2934
  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
@@ -3132,6 +3307,7 @@ strong.amplify-text {
3132
3307
 
3133
3308
  .amplify-alert__icon {
3134
3309
  font-size: var(--amplify-components-alert-icon-size);
3310
+ line-height: 1;
3135
3311
  }
3136
3312
 
3137
3313
  .amplify-alert__heading {
@@ -3460,6 +3636,9 @@ strong.amplify-text {
3460
3636
  }
3461
3637
 
3462
3638
  .amplify-checkbox__icon {
3639
+ line-height: 1;
3640
+ width: 1em;
3641
+ height: 1em;
3463
3642
  background-color: var(--amplify-components-checkbox-icon-background-color);
3464
3643
  opacity: var(--amplify-components-checkbox-icon-opacity);
3465
3644
  transform: var(--amplify-components-checkbox-icon-transform);
@@ -3721,6 +3900,7 @@ strong.amplify-text {
3721
3900
  .amplify-field-group__outer-start,
3722
3901
  .amplify-field-group__outer-end {
3723
3902
  display: flex;
3903
+ flex-shrink: 0;
3724
3904
  align-items: var(--amplify-components-fieldgroup-outer-align-items);
3725
3905
  }
3726
3906
  .amplify-field-group__outer-start .amplify-field-group__control,
@@ -3819,6 +3999,44 @@ html[dir=rtl] .amplify-field-group__inner-start {
3819
3999
  height: 100%;
3820
4000
  }
3821
4001
 
4002
+ .amplify-fieldset {
4003
+ background-color: var(--amplify-components-fieldset-background-color);
4004
+ border-radius: var(--amplify-components-fieldset-border-radius);
4005
+ flex-direction: var(--amplify-components-fieldset-flex-direction);
4006
+ gap: var(--amplify-components-fieldset-gap);
4007
+ /* Sizes */
4008
+ /* Variations */
4009
+ }
4010
+ .amplify-fieldset--small {
4011
+ gap: var(--amplify-components-fieldset-small-gap);
4012
+ }
4013
+ .amplify-fieldset--large {
4014
+ gap: var(--amplify-components-fieldset-large-gap);
4015
+ }
4016
+ .amplify-fieldset--outlined {
4017
+ border: var(--amplify-components-fieldset-outlined-border-width) var(--amplify-components-fieldset-outlined-border-style) var(--amplify-components-fieldset-outlined-border-color);
4018
+ padding: var(--amplify-components-fieldset-outlined-padding);
4019
+ }
4020
+ .amplify-fieldset--outlined.amplify-fieldset--small {
4021
+ padding: var(--amplify-components-fieldset-outlined-small-padding);
4022
+ }
4023
+ .amplify-fieldset--outlined.amplify-fieldset--large {
4024
+ padding: var(--amplify-components-fieldset-outlined-large-padding);
4025
+ }
4026
+
4027
+ .amplify-fieldset__legend {
4028
+ color: var(--amplify-components-fieldset-legend-color);
4029
+ font-weight: var(--amplify-components-fieldset-legend-font-weight);
4030
+ line-height: var(--amplify-components-fieldset-legend-line-height);
4031
+ font-size: var(--amplify-components-fieldset-legend-font-size);
4032
+ }
4033
+ .amplify-fieldset__legend--small {
4034
+ font-size: var(--amplify-components-fieldset-legend-small-font-size);
4035
+ }
4036
+ .amplify-fieldset__legend--large {
4037
+ font-size: var(--amplify-components-fieldset-legend-large-font-size);
4038
+ }
4039
+
3822
4040
  .amplify-liveness-cancel-container {
3823
4041
  z-index: 2;
3824
4042
  position: absolute;
@@ -4398,6 +4616,119 @@ html[dir=rtl] .amplify-field-group__inner-start {
4398
4616
  }
4399
4617
  }
4400
4618
 
4619
+ .amplify-message {
4620
+ align-items: var(--amplify-components-message-align-items);
4621
+ background-color: var(--amplify-components-message-background-color);
4622
+ color: var(--amplify-components-message-color);
4623
+ justify-content: var(--amplify-components-message-justify-content);
4624
+ padding-block: var(--amplify-components-message-padding-block);
4625
+ padding-inline: var(--amplify-components-message-padding-inline);
4626
+ border-color: var(--amplify-components-message-border-color);
4627
+ border-radius: var(--amplify-components-message-border-radius);
4628
+ border-style: var(--amplify-components-message-border-style);
4629
+ border-width: var(--amplify-components-message-border-width);
4630
+ line-height: var(--amplify-components-message-line-height);
4631
+ }
4632
+ .amplify-message--plain {
4633
+ background-color: var(--amplify-components-message-plain-background-color);
4634
+ border-color: var(--amplify-components-message-plain-border-color);
4635
+ color: var(--amplify-components-message-plain-color);
4636
+ }
4637
+ .amplify-message--plain.amplify-message--info {
4638
+ background-color: var(--amplify-components-message-plain-info-background-color);
4639
+ border-color: var(--amplify-components-message-plain-info-border-color);
4640
+ color: var(--amplify-components-message-plain-info-color);
4641
+ }
4642
+ .amplify-message--plain.amplify-message--error {
4643
+ background-color: var(--amplify-components-message-plain-error-background-color);
4644
+ border-color: var(--amplify-components-message-plain-error-border-color);
4645
+ color: var(--amplify-components-message-plain-error-color);
4646
+ }
4647
+ .amplify-message--plain.amplify-message--warning {
4648
+ background-color: var(--amplify-components-message-plain-warning-background-color);
4649
+ border-color: var(--amplify-components-message-plain-warning-border-color);
4650
+ color: var(--amplify-components-message-plain-warning-color);
4651
+ }
4652
+ .amplify-message--plain.amplify-message--success {
4653
+ background-color: var(--amplify-components-message-plain-success-background-color);
4654
+ border-color: var(--amplify-components-message-plain-success-border-color);
4655
+ color: var(--amplify-components-message-plain-success-color);
4656
+ }
4657
+ .amplify-message--outlined {
4658
+ background-color: var(--amplify-components-message-outlined-background-color);
4659
+ border-color: var(--amplify-components-message-outlined-border-color);
4660
+ color: var(--amplify-components-message-outlined-color);
4661
+ }
4662
+ .amplify-message--outlined.amplify-message--info {
4663
+ background-color: var(--amplify-components-message-outlined-info-background-color);
4664
+ border-color: var(--amplify-components-message-outlined-info-border-color);
4665
+ color: var(--amplify-components-message-outlined-info-color);
4666
+ }
4667
+ .amplify-message--outlined.amplify-message--error {
4668
+ background-color: var(--amplify-components-message-outlined-error-background-color);
4669
+ border-color: var(--amplify-components-message-outlined-error-border-color);
4670
+ color: var(--amplify-components-message-outlined-error-color);
4671
+ }
4672
+ .amplify-message--outlined.amplify-message--warning {
4673
+ background-color: var(--amplify-components-message-outlined-warning-background-color);
4674
+ border-color: var(--amplify-components-message-outlined-warning-border-color);
4675
+ color: var(--amplify-components-message-outlined-warning-color);
4676
+ }
4677
+ .amplify-message--outlined.amplify-message--success {
4678
+ background-color: var(--amplify-components-message-outlined-success-background-color);
4679
+ border-color: var(--amplify-components-message-outlined-success-border-color);
4680
+ color: var(--amplify-components-message-outlined-success-color);
4681
+ }
4682
+ .amplify-message--filled {
4683
+ background-color: var(--amplify-components-message-filled-background-color);
4684
+ border-color: var(--amplify-components-message-filled-border-color);
4685
+ color: var(--amplify-components-message-filled-color);
4686
+ }
4687
+ .amplify-message--filled.amplify-message--info {
4688
+ background-color: var(--amplify-components-message-filled-info-background-color);
4689
+ border-color: var(--amplify-components-message-filled-info-border-color);
4690
+ color: var(--amplify-components-message-filled-info-color);
4691
+ }
4692
+ .amplify-message--filled.amplify-message--error {
4693
+ background-color: var(--amplify-components-message-filled-error-background-color);
4694
+ border-color: var(--amplify-components-message-filled-error-border-color);
4695
+ color: var(--amplify-components-message-filled-error-color);
4696
+ }
4697
+ .amplify-message--filled.amplify-message--warning {
4698
+ background-color: var(--amplify-components-message-filled-warning-background-color);
4699
+ border-color: var(--amplify-components-message-filled-warning-border-color);
4700
+ color: var(--amplify-components-message-filled-warning-color);
4701
+ }
4702
+ .amplify-message--filled.amplify-message--success {
4703
+ background-color: var(--amplify-components-message-filled-success-background-color);
4704
+ border-color: var(--amplify-components-message-filled-success-border-color);
4705
+ color: var(--amplify-components-message-filled-success-color);
4706
+ }
4707
+
4708
+ .amplify-message__icon {
4709
+ font-size: var(--amplify-components-message-icon-size);
4710
+ }
4711
+ .amplify-message__icon > * {
4712
+ display: block;
4713
+ }
4714
+
4715
+ .amplify-message__heading {
4716
+ font-weight: var(--amplify-components-message-heading-font-weight);
4717
+ font-size: var(--amplify-components-message-heading-font-size);
4718
+ }
4719
+
4720
+ .amplify-message__content {
4721
+ flex: 1;
4722
+ flex-direction: column;
4723
+ gap: var(--amplify-space-xxxs);
4724
+ }
4725
+
4726
+ .amplify-message__dismiss {
4727
+ -webkit-margin-start: auto;
4728
+ margin-inline-start: auto;
4729
+ gap: var(--amplify-components-message-dismiss-gap);
4730
+ }
4731
+
4401
4732
  .amplify-pagination__item-current, .amplify-pagination__item-button {
4402
4733
  height: var(--amplify-components-pagination-item-shared-height);
4403
4734
  min-width: var(--amplify-components-pagination-item-shared-min-width);
@@ -4575,6 +4906,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4575
4906
  .amplify-rating-icon {
4576
4907
  width: 1em;
4577
4908
  height: 1em;
4909
+ display: block;
4578
4910
  }
4579
4911
 
4580
4912
  .amplify-rating-icon-filled {
@@ -6186,6 +6518,16 @@ html[dir=rtl] .amplify-field-group__inner-start {
6186
6518
  font-size: var(--amplify-components-storagemanager-previewer-text-font-size);
6187
6519
  color: var(--amplify-components-storagemanager-previewer-text-color);
6188
6520
  }
6521
+ .amplify-storagemanager__previewer__footer {
6522
+ display: flex;
6523
+ flex-direction: row;
6524
+ justify-content: var(--amplify-components-storagemanager-previewer-footer-justify-content);
6525
+ }
6526
+ .amplify-storagemanager__previewer__actions {
6527
+ display: flex;
6528
+ flex-direction: row;
6529
+ gap: var(--amplify-space-small);
6530
+ }
6189
6531
 
6190
6532
  [data-label-position=start] {
6191
6533
  flex-direction: row;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui-react-notifications",
3
- "version": "1.0.10",
3
+ "version": "1.0.12",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {
@@ -40,9 +40,9 @@
40
40
  "typecheck": "tsc --noEmit"
41
41
  },
42
42
  "dependencies": {
43
- "@aws-amplify/ui": "5.7.1",
44
- "@aws-amplify/ui-react": "5.1.1",
45
- "@aws-amplify/ui-react-core-notifications": "1.0.7",
43
+ "@aws-amplify/ui": "5.8.0",
44
+ "@aws-amplify/ui-react": "5.3.0",
45
+ "@aws-amplify/ui-react-core-notifications": "1.0.9",
46
46
  "classnames": "2.3.1",
47
47
  "tinycolor2": "1.4.2"
48
48
  },