@transferwise/components 0.0.0-experimental-13785f5 → 0.0.0-experimental-7a8cfdb

package/build/main.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:03 GMT
+ * Generated on Wed, 27 May 2026 15:50:09 GMT
  */
 
 :root {
@@ -144,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal {
@@ -328,7 +328,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -512,7 +512,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -696,7 +696,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--dark {
@@ -880,7 +880,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-platform {
@@ -1064,7 +1064,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1248,7 +1248,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business {
@@ -1433,7 +1433,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business--dark {
@@ -1618,7 +1618,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1803,7 +1803,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
  */
 
 .np-theme-business--bright-green {
@@ -1990,7 +1990,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
  */
 
 .wds-sentiment-negative-light-base {
@@ -31955,6 +31955,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;
+  --wds-critical-banner-background-base: transparent;
+  --wds-critical-banner-background-surface: var(--color-sentiment-background-surface);
+  --wds-critical-banner-background: linear-gradient(var(--wds-critical-banner-background-surface), var(--wds-critical-banner-background-surface)), var(--wds-critical-banner-background-base);
   container-type: inline-size;
   position: relative;
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
@@ -31963,6 +31966,14 @@ html:not([dir="rtl"]) .np-navigation-option {
      actions only go full-width below mobile-max token (container query) */
 }
 
+.wds-critical-banner.wds-prompt--neutral {
+  --wds-critical-banner-background-base: var(--color-background-elevated);
+}
+
+.wds-critical-banner.wds-prompt--neutral.wds-sentiment-surface--hasBaseStyles {
+  background: var(--wds-critical-banner-background);
+}
+
 .wds-critical-banner--media-image {
   width: 48px;
   width: var(--size-48);
@@ -32113,6 +32124,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;
+    --wds-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 +32145,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(--wds-critical-banner-background);
+    -webkit-mask: var(--wds-critical-banner-overhang-mask);
+    mask: var(--wds-critical-banner-overhang-mask);
   }
 }
 

package/build/styles/css/neptune.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:03 GMT
+ * Generated on Wed, 27 May 2026 15:50:09 GMT
  */
 
 :root {
@@ -144,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal {
@@ -328,7 +328,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -512,7 +512,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -696,7 +696,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--dark {
@@ -880,7 +880,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-platform {
@@ -1064,7 +1064,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1248,7 +1248,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business {
@@ -1433,7 +1433,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business--dark {
@@ -1618,7 +1618,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1803,7 +1803,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
  */
 
 .np-theme-business--bright-green {

package/build/styles/less/legacy-variables.less

@@ -5,7 +5,7 @@
 //== Media queries breakpoints
 
 // Do not edit directly, this file was auto-generated.
-// Generated on Tue, 09 Jun 2026 08:11:03 GMT
+// Generated on Wed, 27 May 2026 15:50:09 GMT
 
 // @deprecated Use @screen-xs-min
 @screen-xs: 320px;

package/build/styles/less/neptune-tokens.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly, this file was auto-generated.
-// Generated on Tue, 09 Jun 2026 08:11:03 GMT
+// Generated on Wed, 27 May 2026 15:50:09 GMT
 
 @color-dark-content-primary: #e2e6e8;
 @color-dark-content-secondary: #c9cbce;
@@ -222,7 +222,7 @@
 @font-family-display: 'Wise Sans', 'Inter', sans-serif;
 
 // Do not edit directly, this file was auto-generated.
-// Generated on Tue, 09 Jun 2026 08:11:03 GMT
+// Generated on Wed, 27 May 2026 15:50:09 GMT
 
 @color-base-blue-light: #00b9ff;
 @color-base-blue-mid: #00a2dd;

package/build/styles/main.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:03 GMT
+ * Generated on Wed, 27 May 2026 15:50:09 GMT
  */
 
 :root {
@@ -144,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal {
@@ -328,7 +328,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -512,7 +512,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -696,7 +696,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--dark {
@@ -880,7 +880,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-platform {
@@ -1064,7 +1064,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1248,7 +1248,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business {
@@ -1433,7 +1433,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business--dark {
@@ -1618,7 +1618,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1803,7 +1803,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
  */
 
 .np-theme-business--bright-green {
@@ -1990,7 +1990,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
  */
 
 .wds-sentiment-negative-light-base {
@@ -31955,6 +31955,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;
+  --wds-critical-banner-background-base: transparent;
+  --wds-critical-banner-background-surface: var(--color-sentiment-background-surface);
+  --wds-critical-banner-background: linear-gradient(var(--wds-critical-banner-background-surface), var(--wds-critical-banner-background-surface)), var(--wds-critical-banner-background-base);
   container-type: inline-size;
   position: relative;
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
@@ -31963,6 +31966,14 @@ html:not([dir="rtl"]) .np-navigation-option {
      actions only go full-width below mobile-max token (container query) */
 }
 
+.wds-critical-banner.wds-prompt--neutral {
+  --wds-critical-banner-background-base: var(--color-background-elevated);
+}
+
+.wds-critical-banner.wds-prompt--neutral.wds-sentiment-surface--hasBaseStyles {
+  background: var(--wds-critical-banner-background);
+}
+
 .wds-critical-banner--media-image {
   width: 48px;
   width: var(--size-48);
@@ -32113,6 +32124,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;
+    --wds-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 +32145,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(--wds-critical-banner-background);
+    -webkit-mask: var(--wds-critical-banner-overhang-mask);
+    mask: var(--wds-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;
+  --wds-critical-banner-background-base: transparent;
+  --wds-critical-banner-background-surface: var(--color-sentiment-background-surface);
+  --wds-critical-banner-background: linear-gradient(var(--wds-critical-banner-background-surface), var(--wds-critical-banner-background-surface)), var(--wds-critical-banner-background-base);
   container-type: inline-size;
   position: relative;
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
@@ -11,6 +14,12 @@
   /* 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 {
+  --wds-critical-banner-background-base: var(--color-background-elevated);
+}
+.wds-critical-banner.wds-prompt--neutral.wds-sentiment-surface--hasBaseStyles {
+  background: var(--wds-critical-banner-background);
+}
 .wds-critical-banner--media-image {
   width: 48px;
   width: var(--size-48);
@@ -140,6 +149,15 @@
 @container critical-banner-overhang (max-width: 600px) {
   .wds-critical-banner__entry-mask {
     --critical-banner-mobile-overhang-size: 32px;
+    --wds-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 +170,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(--wds-critical-banner-background);
+    -webkit-mask: var(--wds-critical-banner-overhang-mask);
+    mask: var(--wds-critical-banner-overhang-mask);
   }
 }
 .wds-critical-banner__entry-track {

package/build/styles/props/custom-media.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:03 GMT
+ * Generated on Wed, 27 May 2026 15:50:09 GMT
  */
 
 @custom-media --screen-400-zoom (width <= 320px);

package/build/styles/props/neptune-tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:03 GMT
+ * Generated on Wed, 27 May 2026 15:50:09 GMT
  */
 
 :root {

package/build/styles/sentimentSurface/SentimentSurface.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
  */
 
 

package/build/styles/styles/less/neptune.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:03 GMT
+ * Generated on Wed, 27 May 2026 15:50:09 GMT
  */
 
 :root {
@@ -144,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal {
@@ -328,7 +328,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -512,7 +512,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -696,7 +696,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--dark {
@@ -880,7 +880,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-platform {
@@ -1064,7 +1064,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1248,7 +1248,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business {
@@ -1433,7 +1433,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business--dark {
@@ -1618,7 +1618,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1803,7 +1803,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
  */
 
 .np-theme-business--bright-green {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-13785f5",
+  "version": "0.0.0-experimental-7a8cfdb",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -75,7 +75,7 @@
     "monaco-editor-webpack-plugin": "^7.1.1",
     "@wise/art": "^2.31.1",
     "@wise/eslint-config": "^14.2.1",
-    "babel-plugin-formatjs": "^11.3.12",
+    "babel-plugin-formatjs": "^10.5.41",
     "eslint": "^9.39.4",
     "eslint-plugin-storybook": "^10.4.2",
     "gulp": "^5.0.1",
@@ -92,13 +92,13 @@
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@wise/components-theming": "0.0.0-experimental-13785f5",
+    "@wise/components-theming": "1.10.2",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",
-    "@wise/art": "^2.31.1",
-    "@wise/components-theming": "0.0.0-experimental-13785f5",
+    "@wise/art": "^2.30.3",
+    "@wise/components-theming": "^1.10.1",
     "framer-motion": "^12.23.26",
     "react": ">=18",
     "react-dom": ">=18",
@@ -111,7 +111,7 @@
     "@react-aria/focus": "^3.22.1",
     "@react-aria/overlays": "^3.32.1",
     "@transferwise/formatting": "^2.14.1",
-    "@transferwise/neptune-tokens": "^8.24.1",
+    "@transferwise/neptune-tokens": "^8.24.0",
     "@transferwise/neptune-validation": "^3.3.4",
     "clsx": "^2.1.1",
     "commonmark": "^0.31.2",

package/src/main.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:03 GMT
+ * Generated on Wed, 27 May 2026 15:50:09 GMT
  */
 
 :root {
@@ -144,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal {
@@ -328,7 +328,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -512,7 +512,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -696,7 +696,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--dark {
@@ -880,7 +880,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-platform {
@@ -1064,7 +1064,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1248,7 +1248,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business {
@@ -1433,7 +1433,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business--dark {
@@ -1618,7 +1618,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1803,7 +1803,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
  */
 
 .np-theme-business--bright-green {
@@ -1990,7 +1990,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
  */
 
 .wds-sentiment-negative-light-base {
@@ -31955,6 +31955,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;
+  --wds-critical-banner-background-base: transparent;
+  --wds-critical-banner-background-surface: var(--color-sentiment-background-surface);
+  --wds-critical-banner-background: linear-gradient(var(--wds-critical-banner-background-surface), var(--wds-critical-banner-background-surface)), var(--wds-critical-banner-background-base);
   container-type: inline-size;
   position: relative;
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
@@ -31963,6 +31966,14 @@ html:not([dir="rtl"]) .np-navigation-option {
      actions only go full-width below mobile-max token (container query) */
 }
 
+.wds-critical-banner.wds-prompt--neutral {
+  --wds-critical-banner-background-base: var(--color-background-elevated);
+}
+
+.wds-critical-banner.wds-prompt--neutral.wds-sentiment-surface--hasBaseStyles {
+  background: var(--wds-critical-banner-background);
+}
+
 .wds-critical-banner--media-image {
   width: 48px;
   width: var(--size-48);
@@ -32113,6 +32124,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;
+    --wds-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 +32145,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(--wds-critical-banner-background);
+    -webkit-mask: var(--wds-critical-banner-overhang-mask);
+    mask: var(--wds-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;
+  --wds-critical-banner-background-base: transparent;
+  --wds-critical-banner-background-surface: var(--color-sentiment-background-surface);
+  --wds-critical-banner-background: linear-gradient(var(--wds-critical-banner-background-surface), var(--wds-critical-banner-background-surface)), var(--wds-critical-banner-background-base);
   container-type: inline-size;
   position: relative;
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
@@ -11,6 +14,12 @@
   /* 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 {
+  --wds-critical-banner-background-base: var(--color-background-elevated);
+}
+.wds-critical-banner.wds-prompt--neutral.wds-sentiment-surface--hasBaseStyles {
+  background: var(--wds-critical-banner-background);
+}
 .wds-critical-banner--media-image {
   width: 48px;
   width: var(--size-48);
@@ -140,6 +149,15 @@
 @container critical-banner-overhang (max-width: 600px) {
   .wds-critical-banner__entry-mask {
     --critical-banner-mobile-overhang-size: 32px;
+    --wds-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 +170,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(--wds-critical-banner-background);
+    -webkit-mask: var(--wds-critical-banner-overhang-mask);
+    mask: var(--wds-critical-banner-overhang-mask);
   }
 }
 .wds-critical-banner__entry-track {

package/src/prompt/CriticalBanner/CriticalBanner.less

@@ -7,6 +7,14 @@
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;
+  --wds-critical-banner-background-base: transparent;
+  --wds-critical-banner-background-surface: var(--color-sentiment-background-surface);
+  --wds-critical-banner-background:
+    linear-gradient(
+      var(--wds-critical-banner-background-surface),
+      var(--wds-critical-banner-background-surface)
+    ),
+    var(--wds-critical-banner-background-base);
   container-type: inline-size;
   position: relative;
 
@@ -14,6 +22,14 @@
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
   --critical-banner-duration: 150ms;
 
+  &.wds-prompt--neutral {
+    --wds-critical-banner-background-base: var(--color-background-elevated);
+
+    &.wds-sentiment-surface--hasBaseStyles {
+      background: var(--wds-critical-banner-background);
+    }
+  }
+
   &--media-image {
     width: var(--size-48);
     height: var(--size-48);
@@ -163,6 +179,21 @@
 
   @container critical-banner-overhang (max-width: @wds-critical-banner-mobile-overhang-max) {
     --critical-banner-mobile-overhang-size: 32px;
+    --wds-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 +206,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(--wds-critical-banner-background);
+        -webkit-mask: var(--wds-critical-banner-overhang-mask);
+        mask: var(--wds-critical-banner-overhang-mask);
       }
     }
   }

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,50 @@ export const MobileVariants: Story = {
   ...withVariantConfig(['mobile']),
 };
 
+/** Neutral background regression test with page content scrolled under the mobile overhang. */
+export const BackgroundIsNotTransparent: Story = {
+  render: function Render() {
+    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="neutral"
+            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']),
+};
+
 /** Mobile entry animation visual regression test. */
 export const AnimatedEntryMobile: Story = {
   render: function Render() {

package/src/sentimentSurface/SentimentSurface.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
  */
 
 

package/src/styles/less/neptune.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:03 GMT
+ * Generated on Wed, 27 May 2026 15:50:09 GMT
  */
 
 :root {
@@ -144,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal {
@@ -328,7 +328,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -512,7 +512,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -696,7 +696,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--dark {
@@ -880,7 +880,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-platform {
@@ -1064,7 +1064,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1248,7 +1248,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business {
@@ -1433,7 +1433,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business--dark {
@@ -1618,7 +1618,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1803,7 +1803,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
  */
 
 .np-theme-business--bright-green {