@transferwise/components 0.0.0-experimental-6d53d3c → 0.0.0-experimental-7a8cfdb

package/src/promoCard/PromoCard.story.tsx

@@ -2,7 +2,10 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { StarFill } from '@transferwise/icons';
 
 import PromoCard, { type PromoCardCheckedProps, type PromoCardLinkProps } from './PromoCard';
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 
 const meta: Meta<typeof PromoCard> = {
   component: PromoCard,

package/src/promoCard/PromoCardGroup.story.tsx

@@ -2,7 +2,10 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import PromoCard from './PromoCard';
 import PromoCardGroup from './PromoCardGroup';
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 
 const PromoCards = () => {
   return (

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.story.tsx

@@ -19,7 +19,7 @@ const meta = {
   component: CriticalBanner,
   title: 'Prompts/CriticalBanner',
   tags: ['new'],
-  parameters: { docs: { toc: true }, padding: '0' },
+  parameters: { docs: { toc: true }, padding: '0', },
   args: {
     title: 'Your account requires verification',
     description: 'Please verify your identity to continue using all features.',

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/prompt/CriticalBanner/CriticalBanner.tsx

@@ -80,9 +80,9 @@ export const CriticalBanner = ({
 
   const bannerSurface = (
     <Container
-      ref={containerRef}
       size="fluid"
       as={PrimitivePrompt as ElementType}
+      ref={containerRef}
       id={id}
       sentiment={sentiment}
       emphasis={sentiment === 'neutral' ? 'base' : 'elevated'}

package/src/radio/Radio.story.tsx

@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { useState } from 'react';
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import Radio, { type RadioProps } from './Radio';
 import AvatarView from '../avatarView';
 import { Flag } from '@wise/art';

package/src/radioGroup/RadioGroup.story.tsx

@@ -1,5 +1,8 @@
 import { Flag } from '@wise/art';
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import RadioGroup, { RadioGroupProps, RadioGroupRadio } from './RadioGroup';
 import { Field } from '../field/Field';
 import { Meta, StoryObj } from '@storybook/react-webpack5';

package/src/segmentedControl/SegmentedControl.story.tsx

@@ -1,7 +1,10 @@
 import { StoryFn, StoryObj } from '@storybook/react-webpack5';
 import React from 'react';
 
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import Button from '../button';
 
 import SegmentedControl from './SegmentedControl';

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/statusIcon/StatusIcon.story.tsx

@@ -39,7 +39,7 @@ export const Playground: Story = {
 
 export const Sandbox = createSandboxStory({
   code: `<StatusIcon sentiment="positive" size={48} />`,
-  scope: { StatusIcon },
+  scope: {  StatusIcon },
 });
 
 /**

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 {

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx

@@ -1,7 +1,10 @@
 import { StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within } from 'storybook/test';
 
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import TextareaWithDisplayFormat from './TextareaWithDisplayFormat';
 import { Field } from '../field/Field';
 

package/src/title/Title.story.tsx

@@ -1,7 +1,10 @@
 import { Typography } from '../common/propsValues/typography';
 
 import Title from './Title';
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: Title,
@@ -34,3 +37,4 @@ export const Basic = () => {
     </>
   );
 };
+

package/src/typeahead/Typeahead.story.tsx

@@ -3,7 +3,10 @@ import { Search as SearchIcon } from '@transferwise/icons';
 import { userEvent, within, fn } from 'storybook/test';
 import { useState } from 'react';
 
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import { Sentiment, Size } from '../common';
 import { Input } from '../inputs/Input';
 import { Field } from '../field/Field';

package/src/upload/Upload.story.tsx

@@ -1,7 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import Upload from '.';
 import { MAX_SIZE_DEFAULT } from './Upload';
 

package/src/uploadInput/UploadInput.story.tsx

@@ -1,6 +1,9 @@
 import { StoryFn, Meta } from '@storybook/react-webpack5';
 
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import { Field } from '../field/Field';
 
 import UploadInput, { UploadInputProps } from './UploadInput';