@transferwise/components 46.149.0 → 46.149.1

package/build/main.css

@@ -26549,6 +26549,7 @@ a[data-toggle="tooltip"] {
 }
 
 .np-avatar-view .np-avatar-view-content {
+  --circle-border-color: var(--color-sentiment-border-overlay, var(--color-border-neutral));
   color: #37517e;
   color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
@@ -31955,6 +31956,9 @@ html:not([dir="rtl"]) .np-navigation-option {
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;
+  --critical-banner-background-base: transparent;
+  --critical-banner-background-surface: var(--color-sentiment-background-surface);
+  --critical-banner-background: linear-gradient(var(--critical-banner-background-surface), var(--critical-banner-background-surface)), var(--critical-banner-background-base);
   container-type: inline-size;
   position: relative;
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
@@ -31963,6 +31967,11 @@ html:not([dir="rtl"]) .np-navigation-option {
      actions only go full-width below mobile-max token (container query) */
 }
 
+.wds-critical-banner.wds-prompt--neutral {
+  --critical-banner-background-base: var(--color-background-elevated);
+  background: var(--critical-banner-background);
+}
+
 .wds-critical-banner--media-image {
   width: 48px;
   width: var(--size-48);
@@ -32028,19 +32037,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   min-width: 0;
   max-width: 480px;
   height: 100%;
-  padding-top: 3px;
-}
-
-@media (max-width: 320px) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0;
-  }
-}
-
-@container (width < 320px) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0;
-  }
 }
 
 .wds-critical-banner--collapsed .wds-critical-banner__title,
@@ -32113,6 +32109,15 @@ html:not([dir="rtl"]) .np-navigation-option {
 @container critical-banner-overhang (max-width: 600px) {
   .wds-critical-banner__entry-mask {
     --critical-banner-mobile-overhang-size: 32px;
+    --critical-banner-overhang-mask: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), #000 var(--critical-banner-mobile-overhang-size)) 0 0 / var(--critical-banner-mobile-overhang-size)
+        var(--critical-banner-mobile-overhang-size) no-repeat,
+      radial-gradient(
+          circle at 0% 100%,
+          transparent var(--critical-banner-mobile-overhang-size),
+          #000 var(--critical-banner-mobile-overhang-size)
+        )
+        100% 0 / var(--critical-banner-mobile-overhang-size)
+        var(--critical-banner-mobile-overhang-size) no-repeat;
   }
   .wds-critical-banner__entry-mask .wds-critical-banner-overhang {
     margin-bottom: var(--critical-banner-mobile-overhang-size);
@@ -32125,7 +32130,9 @@ html:not([dir="rtl"]) .np-navigation-option {
     left: 0;
     height: var(--critical-banner-mobile-overhang-size);
     pointer-events: none;
-    background: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)) 0 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat, radial-gradient(circle at 0% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)) 100% 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat;
+    background: var(--critical-banner-background);
+    -webkit-mask: var(--critical-banner-overhang-mask);
+    mask: var(--critical-banner-overhang-mask);
   }
 }
 

package/build/styles/avatarView/AvatarView.css

@@ -25,6 +25,7 @@
   background-color: var(--color-interactive-accent);
 }
 .np-avatar-view .np-avatar-view-content {
+  --circle-border-color: var(--color-sentiment-border-overlay, var(--color-border-neutral));
   color: #37517e;
   color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }

package/build/styles/main.css

@@ -26549,6 +26549,7 @@ a[data-toggle="tooltip"] {
 }
 
 .np-avatar-view .np-avatar-view-content {
+  --circle-border-color: var(--color-sentiment-border-overlay, var(--color-border-neutral));
   color: #37517e;
   color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
@@ -31955,6 +31956,9 @@ html:not([dir="rtl"]) .np-navigation-option {
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;
+  --critical-banner-background-base: transparent;
+  --critical-banner-background-surface: var(--color-sentiment-background-surface);
+  --critical-banner-background: linear-gradient(var(--critical-banner-background-surface), var(--critical-banner-background-surface)), var(--critical-banner-background-base);
   container-type: inline-size;
   position: relative;
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
@@ -31963,6 +31967,11 @@ html:not([dir="rtl"]) .np-navigation-option {
      actions only go full-width below mobile-max token (container query) */
 }
 
+.wds-critical-banner.wds-prompt--neutral {
+  --critical-banner-background-base: var(--color-background-elevated);
+  background: var(--critical-banner-background);
+}
+
 .wds-critical-banner--media-image {
   width: 48px;
   width: var(--size-48);
@@ -32028,19 +32037,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   min-width: 0;
   max-width: 480px;
   height: 100%;
-  padding-top: 3px;
-}
-
-@media (max-width: 320px) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0;
-  }
-}
-
-@container (width < 320px) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0;
-  }
 }
 
 .wds-critical-banner--collapsed .wds-critical-banner__title,
@@ -32113,6 +32109,15 @@ html:not([dir="rtl"]) .np-navigation-option {
 @container critical-banner-overhang (max-width: 600px) {
   .wds-critical-banner__entry-mask {
     --critical-banner-mobile-overhang-size: 32px;
+    --critical-banner-overhang-mask: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), #000 var(--critical-banner-mobile-overhang-size)) 0 0 / var(--critical-banner-mobile-overhang-size)
+        var(--critical-banner-mobile-overhang-size) no-repeat,
+      radial-gradient(
+          circle at 0% 100%,
+          transparent var(--critical-banner-mobile-overhang-size),
+          #000 var(--critical-banner-mobile-overhang-size)
+        )
+        100% 0 / var(--critical-banner-mobile-overhang-size)
+        var(--critical-banner-mobile-overhang-size) no-repeat;
   }
   .wds-critical-banner__entry-mask .wds-critical-banner-overhang {
     margin-bottom: var(--critical-banner-mobile-overhang-size);
@@ -32125,7 +32130,9 @@ html:not([dir="rtl"]) .np-navigation-option {
     left: 0;
     height: var(--critical-banner-mobile-overhang-size);
     pointer-events: none;
-    background: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)) 0 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat, radial-gradient(circle at 0% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)) 100% 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat;
+    background: var(--critical-banner-background);
+    -webkit-mask: var(--critical-banner-overhang-mask);
+    mask: var(--critical-banner-overhang-mask);
   }
 }
 

package/build/styles/prompt/CriticalBanner/CriticalBanner.css

@@ -4,6 +4,9 @@
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;
+  --critical-banner-background-base: transparent;
+  --critical-banner-background-surface: var(--color-sentiment-background-surface);
+  --critical-banner-background: linear-gradient(var(--critical-banner-background-surface), var(--critical-banner-background-surface)), var(--critical-banner-background-base);
   container-type: inline-size;
   position: relative;
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
@@ -11,6 +14,10 @@
   /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
      actions only go full-width below mobile-max token (container query) */
 }
+.wds-critical-banner.wds-prompt--neutral {
+  --critical-banner-background-base: var(--color-background-elevated);
+  background: var(--critical-banner-background);
+}
 .wds-critical-banner--media-image {
   width: 48px;
   width: var(--size-48);
@@ -68,17 +75,6 @@
   min-width: 0;
   max-width: 480px;
   height: 100%;
-  padding-top: 3px;
-}
-@media (max-width: 320px) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0;
-  }
-}
-@container (width < 320px) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0;
-  }
 }
 .wds-critical-banner--collapsed .wds-critical-banner__title,
 .wds-critical-banner--collapsed .wds-critical-banner__description {
@@ -140,6 +136,15 @@
 @container critical-banner-overhang (max-width: 600px) {
   .wds-critical-banner__entry-mask {
     --critical-banner-mobile-overhang-size: 32px;
+    --critical-banner-overhang-mask: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), #000 var(--critical-banner-mobile-overhang-size)) 0 0 / var(--critical-banner-mobile-overhang-size)
+        var(--critical-banner-mobile-overhang-size) no-repeat,
+      radial-gradient(
+          circle at 0% 100%,
+          transparent var(--critical-banner-mobile-overhang-size),
+          #000 var(--critical-banner-mobile-overhang-size)
+        )
+        100% 0 / var(--critical-banner-mobile-overhang-size)
+        var(--critical-banner-mobile-overhang-size) no-repeat;
   }
   .wds-critical-banner__entry-mask .wds-critical-banner-overhang {
     margin-bottom: var(--critical-banner-mobile-overhang-size);
@@ -152,7 +157,9 @@
     left: 0;
     height: var(--critical-banner-mobile-overhang-size);
     pointer-events: none;
-    background: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)) 0 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat, radial-gradient(circle at 0% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)) 100% 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat;
+    background: var(--critical-banner-background);
+    -webkit-mask: var(--critical-banner-overhang-mask);
+    mask: var(--critical-banner-overhang-mask);
   }
 }
 .wds-critical-banner__entry-track {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.149.0",
+  "version": "46.149.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/avatarView/AvatarView.css

@@ -25,6 +25,7 @@
   background-color: var(--color-interactive-accent);
 }
 .np-avatar-view .np-avatar-view-content {
+  --circle-border-color: var(--color-sentiment-border-overlay, var(--color-border-neutral));
   color: #37517e;
   color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }

package/src/avatarView/AvatarView.less

@@ -1,7 +1,9 @@
-@import './Dot.less';
+@import "./Dot.less";
 
 .np-avatar-view {
   .np-avatar-view-content {
+    --circle-border-color: var(--color-sentiment-border-overlay, var(--color-border-neutral));
+
     color: var(--color-sentiment-content-primary, var(--color-content-primary));
   }
 

package/src/main.css

@@ -26549,6 +26549,7 @@ a[data-toggle="tooltip"] {
 }
 
 .np-avatar-view .np-avatar-view-content {
+  --circle-border-color: var(--color-sentiment-border-overlay, var(--color-border-neutral));
   color: #37517e;
   color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
@@ -31955,6 +31956,9 @@ html:not([dir="rtl"]) .np-navigation-option {
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;
+  --critical-banner-background-base: transparent;
+  --critical-banner-background-surface: var(--color-sentiment-background-surface);
+  --critical-banner-background: linear-gradient(var(--critical-banner-background-surface), var(--critical-banner-background-surface)), var(--critical-banner-background-base);
   container-type: inline-size;
   position: relative;
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
@@ -31963,6 +31967,11 @@ html:not([dir="rtl"]) .np-navigation-option {
      actions only go full-width below mobile-max token (container query) */
 }
 
+.wds-critical-banner.wds-prompt--neutral {
+  --critical-banner-background-base: var(--color-background-elevated);
+  background: var(--critical-banner-background);
+}
+
 .wds-critical-banner--media-image {
   width: 48px;
   width: var(--size-48);
@@ -32028,19 +32037,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   min-width: 0;
   max-width: 480px;
   height: 100%;
-  padding-top: 3px;
-}
-
-@media (max-width: 320px) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0;
-  }
-}
-
-@container (width < 320px) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0;
-  }
 }
 
 .wds-critical-banner--collapsed .wds-critical-banner__title,
@@ -32113,6 +32109,15 @@ html:not([dir="rtl"]) .np-navigation-option {
 @container critical-banner-overhang (max-width: 600px) {
   .wds-critical-banner__entry-mask {
     --critical-banner-mobile-overhang-size: 32px;
+    --critical-banner-overhang-mask: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), #000 var(--critical-banner-mobile-overhang-size)) 0 0 / var(--critical-banner-mobile-overhang-size)
+        var(--critical-banner-mobile-overhang-size) no-repeat,
+      radial-gradient(
+          circle at 0% 100%,
+          transparent var(--critical-banner-mobile-overhang-size),
+          #000 var(--critical-banner-mobile-overhang-size)
+        )
+        100% 0 / var(--critical-banner-mobile-overhang-size)
+        var(--critical-banner-mobile-overhang-size) no-repeat;
   }
   .wds-critical-banner__entry-mask .wds-critical-banner-overhang {
     margin-bottom: var(--critical-banner-mobile-overhang-size);
@@ -32125,7 +32130,9 @@ html:not([dir="rtl"]) .np-navigation-option {
     left: 0;
     height: var(--critical-banner-mobile-overhang-size);
     pointer-events: none;
-    background: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)) 0 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat, radial-gradient(circle at 0% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)) 100% 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat;
+    background: var(--critical-banner-background);
+    -webkit-mask: var(--critical-banner-overhang-mask);
+    mask: var(--critical-banner-overhang-mask);
   }
 }
 

package/src/prompt/CriticalBanner/CriticalBanner.css

@@ -4,6 +4,9 @@
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;
+  --critical-banner-background-base: transparent;
+  --critical-banner-background-surface: var(--color-sentiment-background-surface);
+  --critical-banner-background: linear-gradient(var(--critical-banner-background-surface), var(--critical-banner-background-surface)), var(--critical-banner-background-base);
   container-type: inline-size;
   position: relative;
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
@@ -11,6 +14,10 @@
   /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
      actions only go full-width below mobile-max token (container query) */
 }
+.wds-critical-banner.wds-prompt--neutral {
+  --critical-banner-background-base: var(--color-background-elevated);
+  background: var(--critical-banner-background);
+}
 .wds-critical-banner--media-image {
   width: 48px;
   width: var(--size-48);
@@ -68,17 +75,6 @@
   min-width: 0;
   max-width: 480px;
   height: 100%;
-  padding-top: 3px;
-}
-@media (max-width: 320px) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0;
-  }
-}
-@container (width < 320px) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0;
-  }
 }
 .wds-critical-banner--collapsed .wds-critical-banner__title,
 .wds-critical-banner--collapsed .wds-critical-banner__description {
@@ -140,6 +136,15 @@
 @container critical-banner-overhang (max-width: 600px) {
   .wds-critical-banner__entry-mask {
     --critical-banner-mobile-overhang-size: 32px;
+    --critical-banner-overhang-mask: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), #000 var(--critical-banner-mobile-overhang-size)) 0 0 / var(--critical-banner-mobile-overhang-size)
+        var(--critical-banner-mobile-overhang-size) no-repeat,
+      radial-gradient(
+          circle at 0% 100%,
+          transparent var(--critical-banner-mobile-overhang-size),
+          #000 var(--critical-banner-mobile-overhang-size)
+        )
+        100% 0 / var(--critical-banner-mobile-overhang-size)
+        var(--critical-banner-mobile-overhang-size) no-repeat;
   }
   .wds-critical-banner__entry-mask .wds-critical-banner-overhang {
     margin-bottom: var(--critical-banner-mobile-overhang-size);
@@ -152,7 +157,9 @@
     left: 0;
     height: var(--critical-banner-mobile-overhang-size);
     pointer-events: none;
-    background: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)) 0 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat, radial-gradient(circle at 0% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)) 100% 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat;
+    background: var(--critical-banner-background);
+    -webkit-mask: var(--critical-banner-overhang-mask);
+    mask: var(--critical-banner-overhang-mask);
   }
 }
 .wds-critical-banner__entry-track {

package/src/prompt/CriticalBanner/CriticalBanner.less

@@ -7,6 +7,16 @@
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;
+  --critical-banner-background-base: transparent;
+  --critical-banner-background-surface: var(--color-sentiment-background-surface);
+  // The sentiment surface can be translucent, so layer it over an opaque base
+  // for neutral banners and their mobile overhang.
+  --critical-banner-background:
+    linear-gradient(
+      var(--critical-banner-background-surface),
+      var(--critical-banner-background-surface)
+    ),
+    var(--critical-banner-background-base);
   container-type: inline-size;
   position: relative;
 
@@ -14,6 +24,11 @@
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
   --critical-banner-duration: 150ms;
 
+  &.wds-prompt--neutral {
+    --critical-banner-background-base: var(--color-background-elevated);
+    background: var(--critical-banner-background);
+  }
+
   &--media-image {
     width: var(--size-48);
     height: var(--size-48);
@@ -79,16 +94,6 @@
     min-width: 0;
     max-width: 480px;
     height: 100%;
-
-    // Padding prevents text shifting when collapsing/expanding layout shift
-    padding-top: 3px;
-
-    @media (--screen-400-zoom) {
-      padding-top: 0;
-    }
-    @container (width < @screen-xs-min) {
-      padding-top: 0;
-    }
   }
 
   &--collapsed &__title,
@@ -163,6 +168,21 @@
 
   @container critical-banner-overhang (max-width: @wds-critical-banner-mobile-overhang-max) {
     --critical-banner-mobile-overhang-size: 32px;
+    --critical-banner-overhang-mask:
+      radial-gradient(
+          circle at 100% 100%,
+          transparent var(--critical-banner-mobile-overhang-size),
+          #000 var(--critical-banner-mobile-overhang-size)
+        )
+        0 0 / var(--critical-banner-mobile-overhang-size)
+        var(--critical-banner-mobile-overhang-size) no-repeat,
+      radial-gradient(
+          circle at 0% 100%,
+          transparent var(--critical-banner-mobile-overhang-size),
+          #000 var(--critical-banner-mobile-overhang-size)
+        )
+        100% 0 / var(--critical-banner-mobile-overhang-size)
+        var(--critical-banner-mobile-overhang-size) no-repeat;
 
     .wds-critical-banner-overhang {
       margin-bottom: var(--critical-banner-mobile-overhang-size);
@@ -175,21 +195,9 @@
         left: 0;
         height: var(--critical-banner-mobile-overhang-size);
         pointer-events: none;
-        background:
-          radial-gradient(
-              circle at 100% 100%,
-              transparent var(--critical-banner-mobile-overhang-size),
-              var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)
-            )
-            0 0 / var(--critical-banner-mobile-overhang-size)
-            var(--critical-banner-mobile-overhang-size) no-repeat,
-          radial-gradient(
-              circle at 0% 100%,
-              transparent var(--critical-banner-mobile-overhang-size),
-              var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)
-            )
-            100% 0 / var(--critical-banner-mobile-overhang-size)
-            var(--critical-banner-mobile-overhang-size) no-repeat;
+        background: var(--critical-banner-background);
+        -webkit-mask: var(--critical-banner-overhang-mask);
+        mask: var(--critical-banner-overhang-mask);
       }
     }
   }

package/src/prompt/CriticalBanner/CriticalBanner.story.tsx

@@ -351,12 +351,17 @@ export const Actions: Story = {
  * Each sentiment has a default status icon. Override it with a custom image or an AvatarView.
  */
 export const MediaTypes: Story = {
+  args: {
+    sentiment: 'neutral',
+  },
   decorators: [ContainerDecorator('2rem')],
   parameters: {
     docs: {
       source: {
-        code: `{/* Default — sentiment icon */}
-<CriticalBanner sentiment="neutral" />
+        code: `{/* Change sentiment using the story controls */}
+
+{/* Default — sentiment icon */}
+<CriticalBanner sentiment={sentiment} />
 
 {/* Custom image */}
 <CriticalBanner media={{ imgSrc: '/card.svg', 'aria-label': 'Wise card' }} ... />
@@ -375,8 +380,14 @@ export const MediaTypes: Story = {
       },
     },
   },
-  argTypes: hiddenArgTypes,
-  render: function Render() {
+  argTypes: {
+    ...hiddenArgTypes,
+    sentiment: {
+      control: 'radio',
+      options: ['negative', 'warning', 'neutral', 'success'],
+    },
+  },
+  render: function Render({ sentiment }) {
     const [expandedStates, setExpandedStates] = useState<Record<string, boolean>>({
       default: true,
       image: true,
@@ -392,7 +403,7 @@ export const MediaTypes: Story = {
     return (
       <>
         <CriticalBanner
-          sentiment="neutral"
+          sentiment={sentiment}
           title="Default status icon"
           description="When no media is provided, the sentiment's default icon is displayed."
           action={{ label: 'Continue', onClick: fn() }}
@@ -400,7 +411,7 @@ export const MediaTypes: Story = {
           onToggle={() => toggle('default')}
         />
         <CriticalBanner
-          sentiment="neutral"
+          sentiment={sentiment}
           title="Custom image"
           description="Your card has been blocked for security reasons."
           media={{ imgSrc: '../../wise-card.svg', 'aria-label': 'Wise debit card' }}
@@ -409,7 +420,7 @@ export const MediaTypes: Story = {
           onToggle={() => toggle('image')}
         />
         <CriticalBanner
-          sentiment="neutral"
+          sentiment={sentiment}
           title="Avatar with photo"
           description="The default badge is the status icon for the sentiment."
           media={{ avatar: { imgSrc: '../../avatar-rectangle-fox.webp' } }}
@@ -418,7 +429,7 @@ export const MediaTypes: Story = {
           onToggle={() => toggle('avatarPhoto')}
         />
         <CriticalBanner
-          sentiment="neutral"
+          sentiment={sentiment}
           title="Avatar with initials"
           description="The default badge is the status icon for the sentiment."
           media={{ avatar: { profileName: 'John Doe' } }}
@@ -427,7 +438,7 @@ export const MediaTypes: Story = {
           onToggle={() => toggle('avatarInitials')}
         />
         <CriticalBanner
-          sentiment="neutral"
+          sentiment={sentiment}
           title="Avatar with custom icon"
           description="The default badge is the status icon for the sentiment."
           media={{ avatar: { asset: <Bank title="Bank account" /> } }}
@@ -436,7 +447,7 @@ export const MediaTypes: Story = {
           onToggle={() => toggle('avatarIcon')}
         />
         <CriticalBanner
-          sentiment="neutral"
+          sentiment={sentiment}
           title="Business profile with badge"
           description="Your business account requires additional documentation."
           media={{ avatar: { profileType: 'BUSINESS', badge: { flagCode: 'GB' } } }}

package/src/prompt/CriticalBanner/CriticalBanner.test.story.tsx

@@ -21,10 +21,24 @@ const wait = async (ms: number) =>
   });
 
 const ANIMATION_DURATION = 200; // 150ms animation + 50ms buffer
+const ENTRY_ANIMATION_DURATION = 950; // 500ms delay + 400ms animation + 50ms buffer
 
 const longDescription =
   'We have detected unusual activity on your account that does not match your typical usage patterns. To protect your funds and personal information, we have temporarily restricted access. Please verify your identity to restore full access to your account.';
 
+const BACKGROUND_SCROLL_CONTENT = [
+  'Manage your card settings, limits, and delivery details from this page.',
+  'Your recent payments, subscriptions, and cash withdrawals will appear here.',
+  'Freeze your card any time if it is lost, stolen, or somewhere unexpected.',
+  'Set spending limits for online, in-store, and contactless payments.',
+  'Add your card to a digital wallet for quicker checkout in supported stores.',
+  'Choose the currency balance you want to spend from before you travel.',
+  'Review fees before using an ATM or paying in a currency you do not hold.',
+  'Order a replacement card if yours is damaged or about to expire.',
+  'Keep your delivery address up to date so new cards arrive in the right place.',
+  'Contact support if a card payment looks unfamiliar or incorrect.',
+];
+
 function AllVariants({ gap = '1rem' }: { gap?: string }) {
   const [states, setStates] = useState({
     negativeExpanded: true,
@@ -137,6 +151,63 @@ export const MobileVariants: Story = {
   ...withVariantConfig(['mobile']),
 };
 
+/** Neutral background regression test with page content scrolled under the mobile overhang. */
+export const BackgroundIsNotTransparent: Story = {
+  args: {
+    sentiment: 'neutral',
+  },
+  argTypes: {
+    sentiment: {
+      control: 'radio',
+      options: ['negative', 'warning', 'neutral', 'success'],
+    },
+  },
+  render: function Render({ sentiment }) {
+    return (
+      <div
+        data-testid="background-scroll-container"
+        style={{
+          width: 350,
+          height: 640,
+          overflowY: 'auto',
+          border: '1px solid var(--color-border-neutral)',
+        }}
+      >
+        <div style={{ position: 'sticky', top: 0, zIndex: 1 }}>
+          <CriticalBanner
+            sentiment={sentiment}
+            title="Your account requires verification"
+            description="Please verify your identity to continue using all features."
+            action={{ label: 'Verify now', onClick: fn() }}
+          />
+        </div>
+        <main style={{ padding: 'var(--size-24) var(--size-16) var(--size-48)' }}>
+          <h1 style={{ margin: '0 0 var(--size-8)', fontSize: 32, lineHeight: 1.1 }}>Debit card</h1>
+          <p style={{ margin: '0 0 var(--size-24)' }}>Spend in 150+ currencies</p>
+          {BACKGROUND_SCROLL_CONTENT.map((paragraph) => (
+            <p key={paragraph}>{paragraph}</p>
+          ))}
+        </main>
+      </div>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const scrollContainer = canvasElement.querySelector(
+      '[data-testid="background-scroll-container"]',
+    );
+
+    if (scrollContainer) {
+      scrollContainer.scrollTop = 250;
+      await wait(ENTRY_ANIMATION_DURATION);
+    }
+  },
+  ...withVariantConfig(['mobile'], {
+    parameters: {
+      controls: { include: ['sentiment'] },
+    },
+  }),
+};
+
 /** Mobile entry animation visual regression test. */
 export const AnimatedEntryMobile: Story = {
   render: function Render() {