@transferwise/components 0.0.0-experimental-9be13be → 0.0.0-experimental-e1f0340

package/src/main.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
+ * Generated on Wed, 13 May 2026 12:45:11 GMT
  */
 
 :root {
@@ -144,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-personal {
@@ -326,75 +326,9 @@
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
 
-/**
- * We added new shape theme into tokens to prevent breaking changes. This is a temporary measure.
- *
- * We delete this hack once all consumers no longer import tokens in their projects (e.g Next.js app.tsx or Storybook's preivew.tsx)
- */
-
-@media (max-width: 320px) {
-  .np-theme-personal {
-    --delta: 2;
-    --size-4: calc(4px / var(--delta));
-    --size-5: calc(5px / var(--delta));
-    --size-8: calc(8px / var(--delta));
-    --size-10: calc(10px / var(--delta));
-    --size-12: calc(12px / var(--delta));
-    --size-14: calc(14px / var(--delta));
-    --size-16: calc(16px / var(--delta));
-    --size-24: calc(24px / var(--delta));
-    --size-32: calc(32px / var(--delta));
-    --size-40: calc(40px / var(--delta));
-    --size-48: calc(48px / var(--delta));
-    --size-52: calc(52px / var(--delta));
-    --size-56: calc(56px / var(--delta));
-    --size-60: calc(60px / var(--delta));
-    --size-64: calc(64px / var(--delta));
-    --size-72: calc(72px / var(--delta));
-    --size-80: calc(80px / var(--delta));
-    --size-88: calc(88px / var(--delta));
-    --size-96: calc(96px / var(--delta));
-    --size-104: calc(104px / var(--delta));
-    --size-112: calc(112px / var(--delta));
-    --size-120: calc(120px / var(--delta));
-    --size-126: calc(126px / var(--delta));
-    --size-128: calc(128px / var(--delta));
-    --size-146: calc(146px / var(--delta));
-    --size-154: calc(154px / var(--delta));
-    --size-x-small: calc(24px / var(--delta));
-    --size-small: calc(32px / var(--delta));
-    --size-medium: calc(40px / var(--delta));
-    --size-large: calc(48px / var(--delta));
-    --size-x-large: calc(56px / var(--delta));
-    --size-2x-large: calc(72px / var(--delta));
-    --space-content-horizontal: calc(16px / var(--delta));
-    --space-small: calc(16px / var(--delta));
-    --space-medium: calc(32px / var(--delta));
-    --space-large: calc(40px / var(--delta));
-    --space-x-large: calc(56px / var(--delta));
-    --padding-x-small: var(--size-8);
-    --padding-small: var(--size-16);
-    --padding-medium: var(--size-24);
-    --padding-large: var(--size-32);
-    --input-height-base: var(--size-32);
-    --input-height-large: var(--input-height-small);
-    --input-padding: var(--input-padding-small);
-    --input-padding-large: var(--input-padding-small);
-    --input-group-addon-padding: var(--input-group-addon-sm-padding);
-    --input-group-addon-lg-padding: var(--input-group-addon-sm-padding);
-    --btn-height: var(--input-height-base);
-    --btn-lg-height: var(--btn-height);
-    --btn-sm-height: var(--btn-height);
-    --btn-padding: var(--input-padding);
-    --btn-sm-padding: var(--btn-padding);
-    --btn-lg-padding: var(--btn-padding);
-    --dropdown-link-padding: var(--size-12) var(--size-16);
-  }
-}
-
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -576,75 +510,9 @@
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
 
-/**
- * We added new shape theme into tokens to prevent breaking changes. This is a temporary measure.
- *
- * We delete this hack once all consumers no longer import tokens in their projects (e.g Next.js app.tsx or Storybook's preivew.tsx)
- */
-
-@media (max-width: 320px) {
-  .np-theme-personal {
-    --delta: 2;
-    --size-4: calc(4px / var(--delta));
-    --size-5: calc(5px / var(--delta));
-    --size-8: calc(8px / var(--delta));
-    --size-10: calc(10px / var(--delta));
-    --size-12: calc(12px / var(--delta));
-    --size-14: calc(14px / var(--delta));
-    --size-16: calc(16px / var(--delta));
-    --size-24: calc(24px / var(--delta));
-    --size-32: calc(32px / var(--delta));
-    --size-40: calc(40px / var(--delta));
-    --size-48: calc(48px / var(--delta));
-    --size-52: calc(52px / var(--delta));
-    --size-56: calc(56px / var(--delta));
-    --size-60: calc(60px / var(--delta));
-    --size-64: calc(64px / var(--delta));
-    --size-72: calc(72px / var(--delta));
-    --size-80: calc(80px / var(--delta));
-    --size-88: calc(88px / var(--delta));
-    --size-96: calc(96px / var(--delta));
-    --size-104: calc(104px / var(--delta));
-    --size-112: calc(112px / var(--delta));
-    --size-120: calc(120px / var(--delta));
-    --size-126: calc(126px / var(--delta));
-    --size-128: calc(128px / var(--delta));
-    --size-146: calc(146px / var(--delta));
-    --size-154: calc(154px / var(--delta));
-    --size-x-small: calc(24px / var(--delta));
-    --size-small: calc(32px / var(--delta));
-    --size-medium: calc(40px / var(--delta));
-    --size-large: calc(48px / var(--delta));
-    --size-x-large: calc(56px / var(--delta));
-    --size-2x-large: calc(72px / var(--delta));
-    --space-content-horizontal: calc(16px / var(--delta));
-    --space-small: calc(16px / var(--delta));
-    --space-medium: calc(32px / var(--delta));
-    --space-large: calc(40px / var(--delta));
-    --space-x-large: calc(56px / var(--delta));
-    --padding-x-small: var(--size-8);
-    --padding-small: var(--size-16);
-    --padding-medium: var(--size-24);
-    --padding-large: var(--size-32);
-    --input-height-base: var(--size-32);
-    --input-height-large: var(--input-height-small);
-    --input-padding: var(--input-padding-small);
-    --input-padding-large: var(--input-padding-small);
-    --input-group-addon-padding: var(--input-group-addon-sm-padding);
-    --input-group-addon-lg-padding: var(--input-group-addon-sm-padding);
-    --btn-height: var(--input-height-base);
-    --btn-lg-height: var(--btn-height);
-    --btn-sm-height: var(--btn-height);
-    --btn-padding: var(--input-padding);
-    --btn-sm-padding: var(--btn-padding);
-    --btn-lg-padding: var(--btn-padding);
-    --dropdown-link-padding: var(--size-12) var(--size-16);
-  }
-}
-
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -826,75 +694,9 @@
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
 
-/**
- * We added new shape theme into tokens to prevent breaking changes. This is a temporary measure.
- *
- * We delete this hack once all consumers no longer import tokens in their projects (e.g Next.js app.tsx or Storybook's preivew.tsx)
- */
-
-@media (max-width: 320px) {
-  .np-theme-personal {
-    --delta: 2;
-    --size-4: calc(4px / var(--delta));
-    --size-5: calc(5px / var(--delta));
-    --size-8: calc(8px / var(--delta));
-    --size-10: calc(10px / var(--delta));
-    --size-12: calc(12px / var(--delta));
-    --size-14: calc(14px / var(--delta));
-    --size-16: calc(16px / var(--delta));
-    --size-24: calc(24px / var(--delta));
-    --size-32: calc(32px / var(--delta));
-    --size-40: calc(40px / var(--delta));
-    --size-48: calc(48px / var(--delta));
-    --size-52: calc(52px / var(--delta));
-    --size-56: calc(56px / var(--delta));
-    --size-60: calc(60px / var(--delta));
-    --size-64: calc(64px / var(--delta));
-    --size-72: calc(72px / var(--delta));
-    --size-80: calc(80px / var(--delta));
-    --size-88: calc(88px / var(--delta));
-    --size-96: calc(96px / var(--delta));
-    --size-104: calc(104px / var(--delta));
-    --size-112: calc(112px / var(--delta));
-    --size-120: calc(120px / var(--delta));
-    --size-126: calc(126px / var(--delta));
-    --size-128: calc(128px / var(--delta));
-    --size-146: calc(146px / var(--delta));
-    --size-154: calc(154px / var(--delta));
-    --size-x-small: calc(24px / var(--delta));
-    --size-small: calc(32px / var(--delta));
-    --size-medium: calc(40px / var(--delta));
-    --size-large: calc(48px / var(--delta));
-    --size-x-large: calc(56px / var(--delta));
-    --size-2x-large: calc(72px / var(--delta));
-    --space-content-horizontal: calc(16px / var(--delta));
-    --space-small: calc(16px / var(--delta));
-    --space-medium: calc(32px / var(--delta));
-    --space-large: calc(40px / var(--delta));
-    --space-x-large: calc(56px / var(--delta));
-    --padding-x-small: var(--size-8);
-    --padding-small: var(--size-16);
-    --padding-medium: var(--size-24);
-    --padding-large: var(--size-32);
-    --input-height-base: var(--size-32);
-    --input-height-large: var(--input-height-small);
-    --input-padding: var(--input-padding-small);
-    --input-padding-large: var(--input-padding-small);
-    --input-group-addon-padding: var(--input-group-addon-sm-padding);
-    --input-group-addon-lg-padding: var(--input-group-addon-sm-padding);
-    --btn-height: var(--input-height-base);
-    --btn-lg-height: var(--btn-height);
-    --btn-sm-height: var(--btn-height);
-    --btn-padding: var(--input-padding);
-    --btn-sm-padding: var(--btn-padding);
-    --btn-lg-padding: var(--btn-padding);
-    --dropdown-link-padding: var(--size-12) var(--size-16);
-  }
-}
-
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-personal--dark {
@@ -1076,75 +878,9 @@
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
 
-/**
- * We added new shape theme into tokens to prevent breaking changes. This is a temporary measure.
- *
- * We delete this hack once all consumers no longer import tokens in their projects (e.g Next.js app.tsx or Storybook's preivew.tsx)
- */
-
-@media (max-width: 320px) {
-  .np-theme-personal {
-    --delta: 2;
-    --size-4: calc(4px / var(--delta));
-    --size-5: calc(5px / var(--delta));
-    --size-8: calc(8px / var(--delta));
-    --size-10: calc(10px / var(--delta));
-    --size-12: calc(12px / var(--delta));
-    --size-14: calc(14px / var(--delta));
-    --size-16: calc(16px / var(--delta));
-    --size-24: calc(24px / var(--delta));
-    --size-32: calc(32px / var(--delta));
-    --size-40: calc(40px / var(--delta));
-    --size-48: calc(48px / var(--delta));
-    --size-52: calc(52px / var(--delta));
-    --size-56: calc(56px / var(--delta));
-    --size-60: calc(60px / var(--delta));
-    --size-64: calc(64px / var(--delta));
-    --size-72: calc(72px / var(--delta));
-    --size-80: calc(80px / var(--delta));
-    --size-88: calc(88px / var(--delta));
-    --size-96: calc(96px / var(--delta));
-    --size-104: calc(104px / var(--delta));
-    --size-112: calc(112px / var(--delta));
-    --size-120: calc(120px / var(--delta));
-    --size-126: calc(126px / var(--delta));
-    --size-128: calc(128px / var(--delta));
-    --size-146: calc(146px / var(--delta));
-    --size-154: calc(154px / var(--delta));
-    --size-x-small: calc(24px / var(--delta));
-    --size-small: calc(32px / var(--delta));
-    --size-medium: calc(40px / var(--delta));
-    --size-large: calc(48px / var(--delta));
-    --size-x-large: calc(56px / var(--delta));
-    --size-2x-large: calc(72px / var(--delta));
-    --space-content-horizontal: calc(16px / var(--delta));
-    --space-small: calc(16px / var(--delta));
-    --space-medium: calc(32px / var(--delta));
-    --space-large: calc(40px / var(--delta));
-    --space-x-large: calc(56px / var(--delta));
-    --padding-x-small: var(--size-8);
-    --padding-small: var(--size-16);
-    --padding-medium: var(--size-24);
-    --padding-large: var(--size-32);
-    --input-height-base: var(--size-32);
-    --input-height-large: var(--input-height-small);
-    --input-padding: var(--input-padding-small);
-    --input-padding-large: var(--input-padding-small);
-    --input-group-addon-padding: var(--input-group-addon-sm-padding);
-    --input-group-addon-lg-padding: var(--input-group-addon-sm-padding);
-    --btn-height: var(--input-height-base);
-    --btn-lg-height: var(--btn-height);
-    --btn-sm-height: var(--btn-height);
-    --btn-padding: var(--input-padding);
-    --btn-sm-padding: var(--btn-padding);
-    --btn-lg-padding: var(--btn-padding);
-    --dropdown-link-padding: var(--size-12) var(--size-16);
-  }
-}
-
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-platform {
@@ -1328,7 +1064,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1512,7 +1248,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-business {
@@ -1697,7 +1433,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-business--dark {
@@ -1882,7 +1618,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-business--forest-green {
@@ -2067,7 +1803,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Fri, 10 Apr 2026 14:46:01 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-business--bright-green {
@@ -28156,11 +27892,11 @@ a[data-toggle="tooltip"] {
   align-items: stretch;
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--Card-background-color);
-  border-radius: calc(32px / 2);
+  border-radius: 32px;
   border-radius: var(--Card-border-radius);
-  gap: calc(16px / 2);
+  gap: 16px;
   gap: var(--Card-flex-gap);
-  padding: calc(24px / 2);
+  padding: 24px;
   padding: var(--Card-padding);
   position: relative;
   box-sizing: border-box;
@@ -31480,7 +31216,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   border-radius: var(--nudge-border-radius);
   display: flex;
   flex: 1;
-  gap: calc(16px / 2);
+  gap: 16px;
   gap: var(--nudge-flex-gap);
   min-height: 106px;
   min-height: var(--nudge-min-height);
@@ -34678,9 +34414,9 @@ html:not([dir="rtl"]) .np-navigation-option {
   --buttonTopRightOffset: var(--size-16);
   --clickAreaTopRightOffset: calc((var(--clickAreaSize) - var(--iconSize)) * -0.5);
   position: absolute;
-  right: calc(16px / 2);
+  right: 16px;
   right: var(--buttonTopRightOffset);
-  top: calc(16px / 2);
+  top: 16px;
   top: var(--buttonTopRightOffset);
 }
 

package/src/popover/Popover.story.tsx

@@ -71,48 +71,3 @@ export const WithoutVisibleTitle: Story = {
     ),
   },
 } satisfies Meta<typeof Popover>;
-
-/**
- * The `preferredPlacement` prop indicates where the Popover should appear
- * relative to its trigger element. However, it is a preference, not a guarantee.
- *
- * If there isn't enough viewport space in the preferred direction, the Popover
- * automatically flips to an alternative placement. The fallback order is:
- * - `top` → tries `bottom`, then `right`, then `left`
- * - `bottom` → tries `top`, then `right`, then `left`
- * - `left` → tries `right`, then `top`, then `bottom`
- * - `right` → tries `left`, then `top`, then `bottom`
- *
- * For example, if you set `preferredPlacement="top"` but the trigger is near
- * the top of the viewport, the Popover will flip to `bottom` instead.
- *
- * Try scrolling this story so triggers are near viewport edges to see the
- * flip behaviour in action.
- */
-export const PreferredPlacement: Story = {
-  render: () => (
-    <div
-      style={{
-        display: 'flex',
-        flexWrap: 'wrap',
-        gap: '48px',
-        justifyContent: 'center',
-        alignItems: 'center',
-        padding: '120px 80px',
-      }}
-    >
-      {([Position.TOP, Position.RIGHT, Position.BOTTOM, Position.LEFT] as const).map(
-        (placement) => (
-          <Popover
-            key={placement}
-            preferredPlacement={placement}
-            title="Guaranteed rate"
-            content={<Content />}
-          >
-            <Button v2>{placement}</Button>
-          </Popover>
-        ),
-      )}
-    </div>
-  ),
-};

package/src/popover/Popover.test.story.tsx

@@ -3,9 +3,7 @@ import { expect, userEvent, within } from 'storybook/test';
 
 import { withVariantConfig } from '../../.storybook/helpers';
 import { Button } from '..';
-import { Position } from '../common';
-
-import Popover, { PopoverPreferredPlacement } from './Popover';
+import Popover from './Popover';
 
 const meta = {
   title: 'Dialogs/Popover/Tests',
@@ -21,34 +19,6 @@ const wait = async (duration = 500) =>
     setTimeout(resolve, duration);
   });
 
-const createPlacementStory = (
-  placement: PopoverPreferredPlacement,
-  containerStyle?: React.CSSProperties,
-): Story => ({
-  parameters: {
-    chromatic: {
-      delay: 1000,
-    },
-  },
-  render: () => (
-    <div
-      style={
-        containerStyle
-          ? { position: 'absolute', ...containerStyle }
-          : { display: 'flex', justifyContent: 'center', padding: '150px' }
-      }
-    >
-      <Popover preferredPlacement={placement} title="Info" content="Details">
-        <Button v2>{placement}</Button>
-      </Popover>
-    </div>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button'));
-  },
-});
-
 /**
  * This test insures that there's no unintended page scroll after the popover
  * is closed without selecting an option (e.g. clicking outside).
@@ -103,16 +73,6 @@ const generateNoScrollTest = (inverted?: boolean): Story => ({
   },
 });
 
-export const PlacementTop: Story = createPlacementStory(Position.TOP);
-export const PlacementRight: Story = createPlacementStory(Position.RIGHT);
-export const PlacementBottom: Story = createPlacementStory(Position.BOTTOM);
-export const PlacementLeft: Story = createPlacementStory(Position.LEFT);
-
-export const FlipTop: Story = createPlacementStory(Position.TOP, { top: 0, left: '50%' });
-export const FlipRight: Story = createPlacementStory(Position.RIGHT, { top: '50%', right: 0 });
-export const FlipBottom: Story = createPlacementStory(Position.BOTTOM, { bottom: 0, left: '50%' });
-export const FlipLeft: Story = createPlacementStory(Position.LEFT, { top: '50%', left: 0 });
-
 export const NoScrollAfterCloseTop: Story = {
   ...generateNoScrollTest(),
   ...withVariantConfig(['default']),

package/src/popover/Popover.test.tsx

@@ -142,61 +142,6 @@ describe('Popover', () => {
     expect(handleOnClose).toHaveBeenCalledTimes(1);
   });
 
-  describe('className', () => {
-    describe('on desktop', () => {
-      beforeEach(() => {
-        global.innerWidth = Breakpoint.SMALL;
-      });
-
-      it('applies className to the panel container', async () => {
-        render(
-          <Popover {...props} className="custom-popover-class">
-            <button type="button">Open</button>
-          </Popover>,
-        );
-
-        await userEvent.click(screen.getByText('Open'));
-        await waitForPanel();
-
-        const panel = getPanel();
-        expect(panel).toHaveClass('np-popover__container');
-        expect(panel).toHaveClass('custom-popover-class');
-      });
-    });
-
-    describe('on mobile', () => {
-      beforeEach(() => {
-        global.innerWidth = Breakpoint.SMALL - 1;
-      });
-
-      it('applies className to the bottom sheet container', async () => {
-        render(
-          <Popover {...props} className="custom-popover-class">
-            <button type="button">Open</button>
-          </Popover>,
-        );
-
-        await userEvent.click(screen.getByText('Open'));
-
-        const bottomSheet = getBottomSheet();
-        expect(bottomSheet).toHaveClass('np-popover__container');
-        expect(bottomSheet).toHaveClass('custom-popover-class');
-      });
-    });
-
-    it('does not apply className to the trigger wrapper', () => {
-      const { container } = render(
-        <Popover {...props} className="custom-popover-class">
-          <button type="button">Open</button>
-        </Popover>,
-      );
-
-      const wrapper = container.firstChild;
-      expect(wrapper).toHaveClass('np-popover');
-      expect(wrapper).not.toHaveClass('custom-popover-class');
-    });
-  });
-
   const waitForPanel = async () => screen.findByText('content');
   const getDimmer = () => document.querySelector('.dimmer');
   const getPanel = () => document.querySelector('.np-panel');

package/src/popover/Popover.tsx

@@ -75,7 +75,7 @@ export default function Popover({
   };
 
   return (
-    <span className="np-popover">
+    <span className={clsx('np-popover', className)}>
       <span ref={anchorReference} className="d-inline-block">
         {isValidElement<{ onClick?: () => void }>(children)
           ? cloneElement(children, {
@@ -93,7 +93,7 @@ export default function Popover({
         anchorRef={anchorReference}
         position={resolvedPlacement}
         arrow
-        className={clsx('np-popover__container', className)}
+        className="np-popover__container"
         onClose={handleOnClose}
       >
         <div className="np-popover__content np-text-default-body">