@transferwise/components 46.148.0 → 46.149.0

package/src/main.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:09 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:03 GMT
  */
 
 :root {
@@ -144,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-personal {
@@ -328,7 +328,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -512,7 +512,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -696,7 +696,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-personal--dark {
@@ -880,7 +880,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-platform {
@@ -1064,7 +1064,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1248,7 +1248,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-business {
@@ -1433,7 +1433,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-business--dark {
@@ -1618,7 +1618,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1803,7 +1803,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:11 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-business--bright-green {
@@ -1990,7 +1990,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:11 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .wds-sentiment-negative-light-base {
@@ -28754,12 +28754,15 @@ button.np-option {
 }
 
 .np-flow-navigation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
-  min-height: 97px;
+  box-sizing: border-box;
+  min-height: 96px;
 }
 
 .np-flow-navigation--border-bottom {
-  min-height: 96px;
   border-bottom: 1px solid rgba(0,0,0,0.10196);
   border-bottom: 1px solid var(--color-border-neutral);
 }
@@ -28844,6 +28847,20 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   visibility: hidden;
 }
 
+.np-flow-navigation--composable {
+  min-height: 80px;
+}
+
+@media (min-width: 320.02px) {
+  .np-flow-navigation--composable {
+    min-height: 128px;
+  }
+}
+
+.np-flow-navigation--composable .np-flow-navigation__content {
+  max-width: none;
+}
+
 .np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--dark .np-flow-navigation .np-flow-header__left path {
@@ -31706,8 +31723,8 @@ html:not([dir="rtl"]) .np-navigation-option {
   gap: 16px;
   gap: var(--Prompt-gap, var(--size-16));
   word-wrap: break-word;
-  padding: 8px;
-  padding: var(--Prompt-padding, var(--padding-x-small));
+  padding: 8px 8px;
+  padding: var(--Prompt-padding-y, var(--padding-x-small)) var(--Prompt-padding-x, var(--padding-x-small));
   text-align: left;
   word-break: break-word;
   width: 100%;
@@ -31759,7 +31776,8 @@ html:not([dir="rtl"]) .np-navigation-option {
 
 .wds-inline-prompt {
   --Prompt-gap: calc(var(--size-12) / 2);
-  --Prompt-padding: calc(var(--padding-x-small) / 2) var(--padding-x-small);
+  --Prompt-padding-x: var(--padding-x-small);
+  --Prompt-padding-y: calc(var(--padding-x-small) / 2);
   display: inline-flex;
   border-radius: 10px;
   border-radius: var(--radius-small);
@@ -31829,7 +31847,8 @@ html:not([dir="rtl"]) .np-navigation-option {
 .wds-info-prompt {
   --Prompt-border-radius: var(--radius-medium);
   --Prompt-gap: var(--size-8);
-  --Prompt-padding: var(--size-12);
+  --Prompt-padding-x: var(--size-12);
+  --Prompt-padding-y: var(--size-12);
 }
 
 .wds-info-prompt__content {
@@ -31895,7 +31914,8 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 
 .wds-action-prompt {
-  --Prompt-padding: var(--size-16);
+  --Prompt-padding-x: var(--size-16);
+  --Prompt-padding-y: var(--size-16);
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: var(--radius-large);
@@ -31930,7 +31950,8 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 
 .wds-critical-banner {
-  --Prompt-padding: var(--size-16);
+  --Prompt-padding-x: var(--wds-container-padding-inline);
+  --Prompt-padding-y: var(--size-16);
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;

package/src/markdown/Markdown.story.tsx

@@ -1,10 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Markdown from './Markdown';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: Markdown,
@@ -34,4 +31,3 @@ export const Basic: Story = {
      - sublist`,
   },
 };
-

package/src/money/Money.story.tsx

@@ -21,4 +21,3 @@ export const Basic: Story = {
     currency: 'GBP',
   },
 };
-

package/src/moneyInput/MoneyInput.story.tsx

@@ -3,10 +3,7 @@ import { within, userEvent, expect } from 'storybook/test';
 import { Padlock } from '@transferwise/icons';
 import { useState } from 'react';
 
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import MoneyInput, { CurrencyOptionItem } from '.';
 import { Field } from '../field/Field';
 import translations from '../i18n/en.json';

package/src/overlayHeader/OverlayHeader.story.tsx

@@ -15,9 +15,13 @@ interface CustomControls {
 }
 export type StoryArgs = OverlayHeaderProps & CustomControls;
 
+/**
+ * @deprecated Use `FlowNavigation` component instead
+ */
 const meta: Meta<StoryArgs> = {
   component: OverlayHeader,
   title: 'Navigation/OverlayHeader',
+  tags: ['deprecated'],
   argTypes: {
     avatarType: { control: 'select', options: ['', 'Business', 'Profile'] },
     avatarURL: { control: 'text' },

package/src/overlayHeader/OverlayHeader.tsx

@@ -5,6 +5,9 @@ import { CloseButton } from '../common/closeButton';
 import FlowHeader from '../common/flowHeader';
 import Logo from '../logo';
 
+/**
+ * @deprecated Use `FlowNavigation` component instead, with `steps={[]}`
+ */
 export interface OverlayHeaderProps {
   /** An Avatar */
   avatar?: React.ReactNode;
@@ -15,6 +18,9 @@ export interface OverlayHeaderProps {
 
 const defaultLogo = <Logo />;
 
+/**
+ * @deprecated Use `FlowNavigation` component instead
+ */
 export default function OverlayHeader({ avatar, onClose, logo = defaultLogo }: OverlayHeaderProps) {
   const closeButton = onClose && <CloseButton size={Size.LARGE} onClick={onClose} />;
   return (

package/src/phoneNumberInput/PhoneNumberInput.story.tsx

@@ -1,9 +1,6 @@
 import type { Meta, StoryObj } 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 PhoneNumberInput from './PhoneNumberInput';
 

package/src/promoCard/PromoCard.story.tsx

@@ -2,10 +2,7 @@ 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,10 +2,7 @@ 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/ActionPrompt/ActionPrompt.css

@@ -1,5 +1,6 @@
 .wds-action-prompt {
-  --Prompt-padding: var(--size-16);
+  --Prompt-padding-x: var(--size-16);
+  --Prompt-padding-y: var(--size-16);
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: var(--radius-large);

package/src/prompt/ActionPrompt/ActionPrompt.less

@@ -1,5 +1,6 @@
 .wds-action-prompt {
-  --Prompt-padding: var(--size-16);
+  --Prompt-padding-x: var(--size-16);
+  --Prompt-padding-y: var(--size-16);
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: var(--radius-large);

package/src/prompt/CriticalBanner/CriticalBanner.css

@@ -1,5 +1,6 @@
 .wds-critical-banner {
-  --Prompt-padding: var(--size-16);
+  --Prompt-padding-x: var(--wds-container-padding-inline);
+  --Prompt-padding-y: var(--size-16);
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;

package/src/prompt/CriticalBanner/CriticalBanner.less

@@ -2,7 +2,8 @@
 @import (reference) "./CriticalBanner.vars.less";
 
 .wds-critical-banner {
-  --Prompt-padding: var(--size-16);
+  --Prompt-padding-x: var(--wds-container-padding-inline);
+  --Prompt-padding-y: var(--size-16);
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;

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

@@ -19,7 +19,7 @@ const meta = {
   component: CriticalBanner,
   title: 'Prompts/CriticalBanner',
   tags: ['new'],
-  parameters: { docs: { toc: true } },
+  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.tsx

@@ -1,8 +1,9 @@
-import { ReactNode, useId, useState } from 'react';
+import { ElementType, ReactNode, useId, useState } from 'react';
 import { clsx } from 'clsx';
 
 import Body from '../../body';
 import Button from '../../button';
+import Container from '../../container';
 import { Breakpoint, LiveRegion, Typography } from '../../common';
 import { ButtonProps } from '../../button/Button.types';
 import { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';
@@ -78,8 +79,10 @@ export const CriticalBanner = ({
     .join(' ');
 
   const bannerSurface = (
-    <PrimitivePrompt
+    <Container
       ref={containerRef}
+      size="fluid"
+      as={PrimitivePrompt as ElementType}
       id={id}
       sentiment={sentiment}
       emphasis={sentiment === 'neutral' ? 'base' : 'elevated'}
@@ -162,7 +165,7 @@ export const CriticalBanner = ({
         className="wds-critical-banner__toggle"
         onToggle={handleToggle}
       />
-    </PrimitivePrompt>
+    </Container>
   );
 
   return (

package/src/prompt/InfoPrompt/InfoPrompt.css

@@ -1,7 +1,8 @@
 .wds-info-prompt {
   --Prompt-border-radius: var(--radius-medium);
   --Prompt-gap: var(--size-8);
-  --Prompt-padding: var(--size-12);
+  --Prompt-padding-x: var(--size-12);
+  --Prompt-padding-y: var(--size-12);
 }
 .wds-info-prompt__content {
   display: flex;

package/src/prompt/InfoPrompt/InfoPrompt.less

@@ -1,7 +1,8 @@
 .wds-info-prompt {
   --Prompt-border-radius: var(--radius-medium);
   --Prompt-gap: var(--size-8);
-  --Prompt-padding: var(--size-12);
+  --Prompt-padding-x: var(--size-12);
+  --Prompt-padding-y: var(--size-12);
 
   &__content {
     display: flex;

package/src/prompt/InlinePrompt/InlinePrompt.css

@@ -1,6 +1,7 @@
 .wds-inline-prompt {
   --Prompt-gap: calc(var(--size-12) / 2);
-  --Prompt-padding: calc(var(--padding-x-small) / 2) var(--padding-x-small);
+  --Prompt-padding-x: var(--padding-x-small);
+  --Prompt-padding-y: calc(var(--padding-x-small) / 2);
   display: inline-flex;
   border-radius: 10px;
   border-radius: var(--radius-small);

package/src/prompt/InlinePrompt/InlinePrompt.less

@@ -1,6 +1,7 @@
 .wds-inline-prompt {
   --Prompt-gap: calc(var(--size-12) / 2);
-  --Prompt-padding: calc(var(--padding-x-small) / 2) var(--padding-x-small);
+  --Prompt-padding-x: var(--padding-x-small);
+  --Prompt-padding-y: calc(var(--padding-x-small) / 2);
 
   display: inline-flex;
   border-radius: var(--radius-small);

package/src/prompt/PrimitivePrompt/PrimitivePrompt.css

@@ -5,8 +5,8 @@
   gap: 16px;
   gap: var(--Prompt-gap, var(--size-16));
   word-wrap: break-word;
-  padding: 8px;
-  padding: var(--Prompt-padding, var(--padding-x-small));
+  padding: 8px 8px;
+  padding: var(--Prompt-padding-y, var(--padding-x-small)) var(--Prompt-padding-x, var(--padding-x-small));
   text-align: left;
   word-break: break-word;
   width: 100%;

package/src/prompt/PrimitivePrompt/PrimitivePrompt.less

@@ -3,7 +3,7 @@
   display: flex;
   gap: var(--Prompt-gap, var(--size-16));
   overflow-wrap: break-word;
-  padding: var(--Prompt-padding, var(--padding-x-small));
+  padding: var(--Prompt-padding-y, var(--padding-x-small)) var(--Prompt-padding-x, var(--padding-x-small));
   text-align: left;
   word-break: break-word;
   width: 100%;

package/src/prompt/PrimitivePrompt/PrimitivePrompt.tsx

@@ -37,7 +37,7 @@ export type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {
 
 /**
  * PrimitivePrompt is a low-level component that provides the structure, sentiment support and styling for various prompts.
- * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding. */
+ * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding-x. */
 export const PrimitivePrompt = forwardRef<HTMLDivElement, PrimitivePromptProps>(
   (
     {

package/src/radio/Radio.story.tsx

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

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx

@@ -1,10 +1,7 @@
 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,10 +1,7 @@
 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,
@@ -37,4 +34,3 @@ export const Basic = () => {
     </>
   );
 };
-

package/src/typeahead/Typeahead.story.tsx

@@ -3,10 +3,7 @@ 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';