@aws-amplify/ui-react-notifications 2.3.3 → 2.3.5

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '2.3.3';
+const VERSION = '2.3.5';
 
 export { VERSION };

package/dist/index.js

@@ -332,7 +332,7 @@ const handleMessageLinkAction = (input) => {
     window.open(input);
 };
 
-const VERSION = '2.3.3';
+const VERSION = '2.3.5';
 
 // TODO: replace below components incrementally as they become available
 function CarouselMessage(_) {

package/dist/styles.css

@@ -1512,11 +1512,11 @@
   --amplify-colors-black: hsl(0, 0%, 0%);
   --amplify-colors-white: hsl(0, 0%, 100%);
   --amplify-colors-transparent: transparent;
-  --amplify-fonts-default-variable: "InterVariable", "Inter var", "Inter", -apple-system, BlinkMacSystemFont,
-          "Helvetica Neue", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans",
+  --amplify-fonts-default-variable: 'InterVariable', 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont,
+          'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans',
           sans-serif;
-  --amplify-fonts-default-static: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
-          "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
+  --amplify-fonts-default-static: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
+          'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
   --amplify-font-sizes-xxxs: 0.375rem;
   --amplify-font-sizes-xxs: 0.5rem;
   --amplify-font-sizes-xs: 0.75rem;
@@ -2067,9 +2067,6 @@ strong.amplify-text {
   border-width: var(--amplify-components-button-menu-border-width);
   background-color: var(--amplify-components-button-menu-background-color);
   justify-content: var(--amplify-components-button-menu-justify-content);
-  --amplify-internal-button-disabled-color: var(
-    --amplify-components-button-menu-disabled-color
-  );
 }
 .amplify-button--menu:hover {
   color: var(--amplify-components-button-menu-hover-color);
@@ -2084,6 +2081,11 @@ strong.amplify-text {
   color: var(--amplify-components-button-menu-active-color);
   background-color: var(--amplify-components-button-menu-active-background-color);
 }
+.amplify-button--menu {
+  --amplify-internal-button-disabled-color: var(
+    --amplify-components-button-menu-disabled-color
+  );
+}
 .amplify-button--primary {
   --amplify-internal-button-border-width: var(
     --amplify-components-button-primary-border-width
@@ -2097,24 +2099,6 @@ strong.amplify-text {
   --amplify-internal-button-color: var(
     --amplify-components-button-primary-color
   );
-  --amplify-internal-button-disabled-border-color: var(
-    --amplify-components-button-primary-disabled-border-color
-  );
-  --amplify-internal-button-disabled-background-color: var(
-    --amplify-components-button-primary-disabled-background-color
-  );
-  --amplify-internal-button-disabled-color: var(
-    --amplify-components-button-primary-disabled-color
-  );
-  --amplify-internal-button-loading-background-color: var(
-    --amplify-components-button-primary-loading-background-color
-  );
-  --amplify-internal-button-loading-border-color: var(
-    --amplify-components-button-primary-loading-border-color
-  );
-  --amplify-internal-button-loading-color: var(
-    --amplify-components-button-primary-loading-color
-  );
 }
 .amplify-button--primary:hover {
   --amplify-internal-button-background-color: var(
@@ -2387,6 +2371,26 @@ strong.amplify-text {
     --amplify-components-button-primary-overlay-active-color
   );
 }
+.amplify-button--primary {
+  --amplify-internal-button-disabled-border-color: var(
+    --amplify-components-button-primary-disabled-border-color
+  );
+  --amplify-internal-button-disabled-background-color: var(
+    --amplify-components-button-primary-disabled-background-color
+  );
+  --amplify-internal-button-disabled-color: var(
+    --amplify-components-button-primary-disabled-color
+  );
+  --amplify-internal-button-loading-background-color: var(
+    --amplify-components-button-primary-loading-background-color
+  );
+  --amplify-internal-button-loading-border-color: var(
+    --amplify-components-button-primary-loading-border-color
+  );
+  --amplify-internal-button-loading-color: var(
+    --amplify-components-button-primary-loading-color
+  );
+}
 .amplify-button--link {
   --amplify-internal-button-border-width: var(
     --amplify-components-button-link-border-width
@@ -2400,24 +2404,6 @@ strong.amplify-text {
   --amplify-internal-button-color: var(
     --amplify-components-button-link-color
   );
-  --amplify-internal-button-disabled-border-color: var(
-    --amplify-components-button-link-disabled-border-color
-  );
-  --amplify-internal-button-disabled-background-color: var(
-    --amplify-components-button-link-disabled-background-color
-  );
-  --amplify-internal-button-disabled-color: var(
-    --amplify-components-button-link-disabled-color
-  );
-  --amplify-internal-button-loading-background-color: var(
-    --amplify-components-button-link-loading-background-color
-  );
-  --amplify-internal-button-loading-border-color: var(
-    --amplify-components-button-link-loading-border-color
-  );
-  --amplify-internal-button-loading-color: var(
-    --amplify-components-button-link-loading-color
-  );
 }
 .amplify-button--link:hover {
   --amplify-internal-button-background-color: var(
@@ -2690,30 +2676,32 @@ strong.amplify-text {
     --amplify-components-button-link-overlay-active-color
   );
 }
-.amplify-button--destructive {
-  border-width: var(--amplify-components-button-destructive-border-width);
-  background-color: var(--amplify-components-button-destructive-background-color);
-  border-color: var(--amplify-components-button-destructive-border-color);
-  color: var(--amplify-components-button-destructive-color);
+.amplify-button--link {
   --amplify-internal-button-disabled-border-color: var(
-    --amplify-components-button-destructive-disabled-border-color
+    --amplify-components-button-link-disabled-border-color
   );
   --amplify-internal-button-disabled-background-color: var(
-    --amplify-components-button-destructive-disabled-background-color
+    --amplify-components-button-link-disabled-background-color
   );
   --amplify-internal-button-disabled-color: var(
-    --amplify-components-button-destructive-disabled-color
+    --amplify-components-button-link-disabled-color
   );
   --amplify-internal-button-loading-background-color: var(
-    --amplify-components-button-destructive-loading-background-color
+    --amplify-components-button-link-loading-background-color
   );
   --amplify-internal-button-loading-border-color: var(
-    --amplify-components-button-destructive-loading-border-color
+    --amplify-components-button-link-loading-border-color
   );
   --amplify-internal-button-loading-color: var(
-    --amplify-components-button-destructive-loading-color
+    --amplify-components-button-link-loading-color
   );
 }
+.amplify-button--destructive {
+  border-width: var(--amplify-components-button-destructive-border-width);
+  background-color: var(--amplify-components-button-destructive-background-color);
+  border-color: var(--amplify-components-button-destructive-border-color);
+  color: var(--amplify-components-button-destructive-color);
+}
 .amplify-button--destructive:hover {
   background-color: var(--amplify-components-button-destructive-hover-background-color);
   border-color: var(--amplify-components-button-destructive-hover-border-color);
@@ -2730,6 +2718,26 @@ strong.amplify-text {
   border-color: var(--amplify-components-button-destructive-active-border-color);
   color: var(--amplify-components-button-destructive-active-color);
 }
+.amplify-button--destructive {
+  --amplify-internal-button-disabled-border-color: var(
+    --amplify-components-button-destructive-disabled-border-color
+  );
+  --amplify-internal-button-disabled-background-color: var(
+    --amplify-components-button-destructive-disabled-background-color
+  );
+  --amplify-internal-button-disabled-color: var(
+    --amplify-components-button-destructive-disabled-color
+  );
+  --amplify-internal-button-loading-background-color: var(
+    --amplify-components-button-destructive-loading-background-color
+  );
+  --amplify-internal-button-loading-border-color: var(
+    --amplify-components-button-destructive-loading-border-color
+  );
+  --amplify-internal-button-loading-color: var(
+    --amplify-components-button-destructive-loading-color
+  );
+}
 .amplify-button--warning {
   background-color: var(--amplify-components-button-warning-background-color);
   border-color: var(--amplify-components-button-warning-border-color);
@@ -2989,22 +2997,6 @@ strong.amplify-text {
   outline-style: var(--amplify-components-fieldcontrol-outline-style);
   outline-width: var(--amplify-components-fieldcontrol-outline-width);
   outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
-  -webkit-user-select: text;
-     -moz-user-select: text;
-          user-select: text;
-  display: inline-block;
-  --amplify-components-fieldcontrol-color: var(
-    --amplify-components-input-color
-  );
-  --amplify-components-fieldcontrol-border-color: var(
-    --amplify-components-input-border-color
-  );
-  --amplify-components-fieldcontrol-font-size: var(
-    --amplify-components-input-font-size
-  );
-  --amplify-components-fieldcontrol-focus-border-color: var(
-    --amplify-components-input-focus-border-color
-  );
 }
 .amplify-input:focus {
   border-color: var(--amplify-components-fieldcontrol-focus-border-color);
@@ -3054,6 +3046,24 @@ strong.amplify-text {
   border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
   background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
 }
+.amplify-input {
+  -webkit-user-select: text;
+     -moz-user-select: text;
+          user-select: text;
+  display: inline-block;
+  --amplify-components-fieldcontrol-color: var(
+    --amplify-components-input-color
+  );
+  --amplify-components-fieldcontrol-border-color: var(
+    --amplify-components-input-border-color
+  );
+  --amplify-components-fieldcontrol-font-size: var(
+    --amplify-components-input-font-size
+  );
+  --amplify-components-fieldcontrol-focus-border-color: var(
+    --amplify-components-input-focus-border-color
+  );
+}
 
 .amplify-textarea {
   box-sizing: border-box;
@@ -3074,11 +3084,6 @@ strong.amplify-text {
   outline-style: var(--amplify-components-fieldcontrol-outline-style);
   outline-width: var(--amplify-components-fieldcontrol-outline-width);
   outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
-  -webkit-user-select: text;
-     -moz-user-select: text;
-          user-select: text;
-  white-space: pre-wrap;
-  max-height: 100%;
 }
 .amplify-textarea:focus {
   border-color: var(--amplify-components-fieldcontrol-focus-border-color);
@@ -3128,6 +3133,13 @@ strong.amplify-text {
   border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
   background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
 }
+.amplify-textarea {
+  -webkit-user-select: text;
+     -moz-user-select: text;
+          user-select: text;
+  white-space: pre-wrap;
+  max-height: 100%;
+}
 
 .amplify-image {
   height: var(--amplify-components-image-height);
@@ -3185,8 +3197,6 @@ strong.amplify-text {
   animation-timing-function: linear;
   animation-iteration-count: infinite;
   animation-duration: var(--amplify-components-loader-animation-duration);
-  stroke: var(--amplify-components-loader-stroke-filled);
-  stroke-linecap: var(--amplify-components-loader-stroke-linecap);
 }
 @media (prefers-reduced-motion) {
   .amplify-loader circle:last-of-type {
@@ -3195,6 +3205,10 @@ strong.amplify-text {
     stroke-dashoffset: 50%;
   }
 }
+.amplify-loader circle:last-of-type {
+  stroke: var(--amplify-components-loader-stroke-filled);
+  stroke-linecap: var(--amplify-components-loader-stroke-linecap);
+}
 .amplify-loader line:last-of-type {
   stroke: var(--amplify-components-loader-linear-stroke-filled);
   stroke-dasharray: 50% 200%;
@@ -3897,6 +3911,9 @@ strong.amplify-text {
   border-color: var(--amplify-internal-checkbox_button-focused-before-border-color);
   box-shadow: var(--amplify-internal-checkbox_button-focused-before-box-shadow);
 }
+.amplify-checkbox__button--error::before {
+  border-color: var(--amplify-components-checkbox-button-error-border-color);
+}
 .amplify-checkbox__button--error {
   --amplify-internal-checkbox_button-focused-before-border-color: var(
     --amplify-components-checkbox-button-error-focus-border-color
@@ -3905,9 +3922,6 @@ strong.amplify-text {
     --amplify-components-checkbox-button-error-focus-box-shadow
   );
 }
-.amplify-checkbox__button--error::before {
-  border-color: var(--amplify-components-checkbox-button-error-border-color);
-}
 .amplify-checkbox__button--disabled::before {
   border-color: var(--amplify-components-checkbox-button-disabled-border-color);
 }
@@ -4166,7 +4180,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
   flex-direction: var(--amplify-components-fieldset-flex-direction);
   gap: var(--amplify-components-fieldset-gap);
   /* Sizes */
-  /* Variations */
 }
 .amplify-fieldset--small {
   gap: var(--amplify-components-fieldset-small-gap);
@@ -4174,6 +4187,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-fieldset--large {
   gap: var(--amplify-components-fieldset-large-gap);
 }
+.amplify-fieldset {
+  /* Variations */
+}
 .amplify-fieldset--outlined {
   border: var(--amplify-components-fieldset-outlined-border-width) var(--amplify-components-fieldset-outlined-border-style) var(--amplify-components-fieldset-outlined-border-color);
   padding: var(--amplify-components-fieldset-outlined-padding);
@@ -5280,11 +5296,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
   outline-style: var(--amplify-components-fieldcontrol-outline-style);
   outline-width: var(--amplify-components-fieldcontrol-outline-width);
   outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
-  background-color: var(--amplify-components-select-background-color);
-  color: var(--amplify-components-select-color);
-  min-width: var(--amplify-components-select-min-width);
-  padding-inline-end: var(--amplify-components-select-padding-inline-end);
-  white-space: var(--amplify-components-select-white-space);
 }
 .amplify-select:focus {
   border-color: var(--amplify-components-fieldcontrol-focus-border-color);
@@ -5334,6 +5345,13 @@ html[dir=rtl] .amplify-field-group__inner-start {
   border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
   background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
 }
+.amplify-select {
+  background-color: var(--amplify-components-select-background-color);
+  color: var(--amplify-components-select-color);
+  min-width: var(--amplify-components-select-min-width);
+  padding-inline-end: var(--amplify-components-select-padding-inline-end);
+  white-space: var(--amplify-components-select-white-space);
+}
 .amplify-select option {
   background-color: var(--amplify-components-select-option-background-color);
   color: var(--amplify-components-select-option-color);
@@ -5595,14 +5613,14 @@ html[dir=rtl] .amplify-field-group__inner-start {
   border-inline-start: none;
 }
 
-.amplify-stepperfield__input {
-  -moz-appearance: textfield;
-  text-align: var(--amplify-components-stepperfield-input-text-align);
-}
 .amplify-stepperfield__input::-webkit-outer-spin-button, .amplify-stepperfield__input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
+.amplify-stepperfield__input {
+  -moz-appearance: textfield;
+  text-align: var(--amplify-components-stepperfield-input-text-align);
+}
 .amplify-stepperfield__input:not(:focus, [aria-invalid=true]) {
   border-inline-start: none;
   border-inline-end: none;
@@ -5715,9 +5733,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
       --amplify-components-table-header-border-width
     )
     0px var(--amplify-components-table-header-border-width) 0px;
-  /**
-   * Data attribute stylings
-   */
 }
 .amplify-table--small {
   --amplify-internal-table-caption-font-size: var(
@@ -5831,6 +5846,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-table__td:last-child {
   border-right-width: var(--amplify-components-table-data-border-width);
 }
+.amplify-table {
+  /**
+   * Data attribute stylings
+   */
+}
 .amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
   background-color: var(--amplify-components-table-row-hover-background-color);
 }
@@ -5972,6 +5992,13 @@ html[dir=rtl] .amplify-field-group__inner-start {
   --amplify-internal-togglebutton-focus-color: var(
     --amplify-components-togglebutton-focus-color
   );
+}
+.amplify-togglebutton:focus {
+  background-color: var(--amplify-internal-togglebutton-focus-background-color);
+  border-color: var(--amplify-internal-togglebutton-focus-border-color);
+  color: var(--amplify-internal-togglebutton-focus-color);
+}
+.amplify-togglebutton {
   --amplify-internal-togglebutton-hover-background-color: var(
     --amplify-components-togglebutton-hover-background-color
   );
@@ -5981,9 +6008,21 @@ html[dir=rtl] .amplify-field-group__inner-start {
   --amplify-internal-togglebutton-hover-color: var(
     --amplify-internal-togglebutton-color
   );
+}
+.amplify-togglebutton:hover {
+  background-color: var(--amplify-internal-togglebutton-hover-background-color);
+  border-color: var(--amplify-internal-togglebutton-hover-border-color);
+  color: var(--amplify-internal-togglebutton-hover-color);
+}
+.amplify-togglebutton {
   --amplify-internal-togglebutton-active-background-color: var(
     --amplify-components-togglebutton-active-background-color
   );
+}
+.amplify-togglebutton:active {
+  background-color: var(--amplify-internal-togglebutton-active-background-color);
+}
+.amplify-togglebutton {
   --amplify-internal-togglebutton-disabled-background-color: var(
     --amplify-components-togglebutton-disabled-background-color
   );
@@ -5994,19 +6033,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
     --amplify-components-togglebutton-disabled-color
   );
 }
-.amplify-togglebutton:focus {
-  background-color: var(--amplify-internal-togglebutton-focus-background-color);
-  border-color: var(--amplify-internal-togglebutton-focus-border-color);
-  color: var(--amplify-internal-togglebutton-focus-color);
-}
-.amplify-togglebutton:hover {
-  background-color: var(--amplify-internal-togglebutton-hover-background-color);
-  border-color: var(--amplify-internal-togglebutton-hover-border-color);
-  color: var(--amplify-internal-togglebutton-hover-color);
-}
-.amplify-togglebutton:active {
-  background-color: var(--amplify-internal-togglebutton-active-background-color);
-}
 .amplify-togglebutton:disabled {
   background-color: var(--amplify-internal-togglebutton-disabled-background-color);
   border-color: var(--amplify-internal-togglebutton-disabled-border-color);
@@ -6076,6 +6102,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
   --amplify-internal-togglebutton-focus-color: var(
     --amplify-internal-togglebutton-primary-focus-color
   );
+}
+.amplify-togglebutton--primary:focus {
+  box-shadow: var(--amplify-internal-togglebutton-primary-focus-box-shadow);
+}
+.amplify-togglebutton--primary {
   --amplify-internal-togglebutton-primary-hover-background-color: var(
     --amplify-components-togglebutton-primary-hover-background-color
   );
@@ -6113,9 +6144,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
     --amplify-internal-togglebutton-primary-disabled-color
   );
 }
-.amplify-togglebutton--primary:focus {
-  box-shadow: var(--amplify-internal-togglebutton-primary-focus-box-shadow);
-}
 .amplify-togglebutton--pressed {
   --amplify-internal-togglebutton-primary-background-color: var(
     --amplify-components-togglebutton-primary-pressed-background-color
@@ -6144,6 +6172,13 @@ html[dir=rtl] .amplify-field-group__inner-start {
   --amplify-internal-togglebutton-primary-hover-color: var(
     --amplify-components-togglebutton-primary-pressed-hover-color
   );
+}
+.amplify-togglebutton--pressed:hover {
+  --amplify-internal-togglebutton-primary-focus-box-shadow: var(
+    --amplify-components-togglebutton-primary-pressed-hover-box-shadow
+  );
+}
+.amplify-togglebutton--pressed {
   --amplify-internal-togglebutton-primary-disabled-background-color: var(
     --amplify-components-togglebutton-primary-pressed-background-color
   );
@@ -6154,11 +6189,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
     --amplify-components-togglebutton-primary-pressed-color
   );
 }
-.amplify-togglebutton--pressed:hover {
-  --amplify-internal-togglebutton-primary-focus-box-shadow: var(
-    --amplify-components-togglebutton-primary-pressed-hover-box-shadow
-  );
-}
 .amplify-togglebutton--link {
   --amplify-internal-togglebutton-link-background-color: var(
     --amplify-components-togglebutton-link-background-color

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "2.3.3";
+export declare const VERSION = "2.3.5";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-notifications",
-  "version": "2.3.3",
+  "version": "2.3.5",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -39,10 +39,10 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.15.3",
-    "@aws-amplify/ui-react": "6.15.3",
-    "@aws-amplify/ui-react-core": "3.6.3",
-    "@aws-amplify/ui-react-core-notifications": "2.3.3",
+    "@aws-amplify/ui": "6.15.5",
+    "@aws-amplify/ui-react": "6.15.5",
+    "@aws-amplify/ui-react-core": "3.6.5",
+    "@aws-amplify/ui-react-core-notifications": "2.3.5",
     "tinycolor2": "1.4.2"
   },
   "peerDependencies": {