@transferwise/components 46.148.1 → 46.149.0

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';

package/src/upload/Upload.story.tsx

@@ -1,10 +1,7 @@
 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,9 +1,6 @@
 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';

package/src/flowNavigation/FlowNavigation.test.js

@@ -1,190 +0,0 @@
-import { Breakpoint } from '@transferwise/neptune-tokens';
-import AvatarView from '../avatarView';
-import { mockMatchMedia, render, screen } from '../test-utils';
-
-import FlowNavigation from './FlowNavigation';
-
-mockMatchMedia();
-
-jest.mock('./animatedLabel', () => {
-  return function ({ className, activeLabel }) {
-    return (
-      <div className={className} data-testid={`activeLabel-${activeLabel}`}>
-        AnimatedLabel
-      </div>
-    );
-  };
-});
-
-describe('FlowNavigation', () => {
-  beforeEach(() => {
-    window.innerWidth = Breakpoint.LARGE + 1;
-  });
-
-  const props = {
-    avatar: <AvatarView profileName="Tim Mike" />,
-    logo: <img alt="logo" src="logo.svg" width="138" height="24" />,
-    onClose: jest.fn(),
-    steps: [
-      {
-        label: 'label-0',
-      },
-      { label: 'label-1' },
-      { label: 'label-2' },
-    ],
-    activeStep: 0,
-  };
-
-  it(`renders full Logo`, () => {
-    render(<FlowNavigation {...props} />);
-    expect(logoFull()).toBeInTheDocument();
-  });
-
-  it(`renders separator if avatar and onClose are provided`, () => {
-    const { container } = render(<FlowNavigation {...props} />);
-
-    expect(container.querySelector('span.m-x-1')).toBeInTheDocument();
-  });
-
-  it(`doesn't render separator if avatar or onClose are not provided`, () => {
-    const { container, rerender } = render(<FlowNavigation {...props} onClose={null} />);
-
-    expect(container.querySelector('.separator')).not.toBeInTheDocument();
-
-    rerender(<FlowNavigation {...props} avatar={null} />);
-
-    expect(container.querySelector('.separator')).not.toBeInTheDocument();
-  });
-
-  it(`doesn't render separator if done is true`, () => {
-    const { container, rerender } = render(<FlowNavigation {...props} onClose={null} />);
-
-    expect(container.querySelector('.separator')).not.toBeInTheDocument();
-
-    rerender(<FlowNavigation {...props} avatar={null} done />);
-
-    expect(container.querySelector('.separator')).not.toBeInTheDocument();
-  });
-
-  it(`renders border based on done`, () => {
-    const { container, rerender } = render(<FlowNavigation {...props} onClose={null} />);
-
-    expect(container.querySelector('.np-flow-navigation--border-bottom')).toBeInTheDocument();
-
-    rerender(<FlowNavigation {...props} avatar={null} done />);
-
-    expect(container.querySelector('.np-flow-navigation--border-bottom')).not.toBeInTheDocument();
-  });
-
-  it(`hides stepper when done is true`, () => {
-    const { container, rerender } = render(<FlowNavigation {...props} onClose={null} />);
-
-    expect(container.querySelector('.np-flow-navigation__stepper')).toBeInTheDocument();
-
-    rerender(<FlowNavigation {...props} avatar={null} done />);
-
-    expect(container.querySelector('.np-flow-navigation__stepper')).not.toBeInTheDocument();
-  });
-
-  it(`does not render stepper when steps is empty`, () => {
-    const { container } = render(<FlowNavigation {...props} steps={[]} />);
-
-    expect(container.querySelector('.np-flow-navigation__stepper')).not.toBeInTheDocument();
-    expect(container.querySelector('.tw-stepper')).not.toBeInTheDocument();
-  });
-
-  it(`hides label when done is true`, () => {
-    const { rerender } = render(<FlowNavigation {...props} done={false} />);
-
-    expect(screen.getByText('label-0')).toBeInTheDocument();
-
-    rerender(<FlowNavigation {...props} done />);
-
-    expect(screen.queryByText('label-0')).not.toBeInTheDocument();
-  });
-
-  it(`renders xs-max class`, () => {
-    window.innerWidth = Breakpoint.SMALL - 1;
-    const { container } = render(<FlowNavigation {...props} onClose={null} />);
-
-    expect(container.querySelector('.np-flow-navigation--xs-max')).toBeInTheDocument();
-  });
-
-  it(`renders sm class`, () => {
-    window.innerWidth = Breakpoint.SMALL;
-    const { container } = render(<FlowNavigation {...props} onClose={null} />);
-
-    expect(container.querySelector('.np-flow-navigation--sm')).toBeInTheDocument();
-  });
-
-  it(`renders lg class`, () => {
-    window.innerWidth = Breakpoint.LARGE;
-    const { container } = render(<FlowNavigation {...props} onClose={null} />);
-
-    expect(container.querySelector('.np-flow-navigation--lg')).toBeInTheDocument();
-  });
-
-  describe('on mobile', () => {
-    beforeEach(() => {
-      window.innerWidth = Breakpoint.SMALL - 1;
-    });
-
-    it('renders Logo', () => {
-      render(<FlowNavigation {...props} />);
-      expect(screen.getByAltText('logo')).toBeInTheDocument();
-    });
-
-    it('renders flag if activeStep <= 0 onGoBack or is not provided', () => {
-      const { rerender } = render(
-        <FlowNavigation {...props} activeStep={0} onGoBack={undefined} />,
-      );
-
-      const flag = screen.queryByAltText('logo');
-
-      expect(flag).toBeInTheDocument();
-
-      rerender(<FlowNavigation {...props} activeStep={1} onGoBack={undefined} />);
-
-      expect(flag).toBeInTheDocument();
-
-      rerender(<FlowNavigation {...props} activeStep={0} onGoBack={jest.fn()} />);
-
-      expect(flag).toBeInTheDocument();
-
-      rerender(<FlowNavigation {...props} activeStep={1} onGoBack={jest.fn()} />);
-
-      expect(flag).not.toBeInTheDocument();
-    });
-
-    it('renders BackButton with AnimatedLabel if onGoBack is provided and activeStep > 0', () => {
-      const { rerender } = render(<FlowNavigation {...props} onGoBack={jest.fn()} />);
-
-      expect(
-        screen.queryByRole('button', { name: /back to previous step/i }),
-      ).not.toBeInTheDocument();
-
-      rerender(<FlowNavigation {...props} activeStep={1} />);
-      expect(
-        screen.queryByRole('button', { name: /back to previous step/i }),
-      ).not.toBeInTheDocument();
-
-      rerender(<FlowNavigation {...props} activeStep={1} onGoBack={jest.fn()} />);
-
-      expect(screen.getByRole('button', { name: /back to previous step/i })).toBeInTheDocument();
-      expect(screen.getByText('AnimatedLabel')).toBeInTheDocument();
-    });
-
-    it('renders correct AnimatedLabel', () => {
-      const { rerender } = render(
-        <FlowNavigation {...props} activeStep={1} onGoBack={jest.fn()} />,
-      );
-
-      expect(screen.getByTestId('activeLabel-1')).toBeInTheDocument();
-
-      rerender(<FlowNavigation {...props} activeStep={2} onGoBack={jest.fn()} />);
-
-      expect(screen.getByTestId('activeLabel-2')).toBeInTheDocument();
-    });
-  });
-  const logoFull = () => screen.getByAltText(`logo`);
-});