@transferwise/components 46.139.0 → 46.140.0

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/modal/Modal.test.story.tsx

@@ -1,5 +1,6 @@
 import { action } from 'storybook/actions';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { expect, userEvent, within } from 'storybook/test';
 import { ScreenMode, ThemeProvider } from '@wise/components-theming';
 import { useState } from 'react';
 import { Button, Modal, ModalProps } from '..';
@@ -123,3 +124,63 @@ export const WithThemeProviderInContentMobile: Story = {
   ),
   ...withVariantConfig(['mobile']),
 };
+
+const wait = async (duration = 500) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, duration);
+  });
+
+/**
+ * This test insures that there's no unintended page scroll after the modal
+ * is closed without selecting an option (e.g. clicking outside).
+ */
+export const NoScrollAfterClose: Story = {
+  args: {
+    title: 'Modal Title',
+    body: lorem100,
+    scroll: Scroll.VIEWPORT,
+  },
+  render: function Render(args) {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <div>
+        <style>
+          {`
+            .storybook-container{
+              min-height: unset;
+              height: unset;
+            }
+          `}
+        </style>
+        <p style={{ height: '70vh', background: 'blanchedalmond' }} />
+
+        <Button v2 onClick={() => setOpen(true)}>
+          Open Modal
+        </Button>
+        <Modal {...args} open={open} onClose={() => setOpen(false)} />
+
+        <p style={{ margin: '1rem 0', height: '150vh', background: 'blanchedalmond' }} />
+      </div>
+    );
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole('button', { name: /Open Modal/i });
+
+    await step('Open the modal', async () => {
+      await userEvent.click(trigger);
+      await wait();
+    });
+
+    await step('Close the modal with Escape', async () => {
+      await userEvent.keyboard('{Escape}');
+      await wait();
+    });
+
+    await step('Verify the page has not scrolled', async () => {
+      const scrollParent = canvasElement.ownerDocument.documentElement;
+      await expect(scrollParent.scrollTop).toBe(0);
+    });
+  },
+};

package/src/popover/Popover.story.tsx

@@ -71,3 +71,48 @@ 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

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { expect, userEvent, within } from 'storybook/test';
+
+import { withVariantConfig } from '../../.storybook/helpers';
+import { Button } from '..';
+import { Position } from '../common';
+
+import Popover, { PopoverPreferredPlacement } from './Popover';
+
+const meta = {
+  title: 'Dialogs/Popover/Tests',
+  component: Popover,
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Popover>;
+export default meta;
+
+type Story = StoryObj<typeof Popover>;
+
+const wait = async (duration = 500) =>
+  new Promise<void>((resolve) => {
+    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).
+ * It tests 2 scenarios:
+ * 1. when the popover fits naturally on the screen below the trigger
+ * 2. when there's not enough space below the trigger and it renders above it
+ */
+const generateNoScrollTest = (inverted?: boolean): Story => ({
+  render: function Render() {
+    return (
+      <div>
+        <style>
+          {`
+            .storybook-container{
+              min-height: unset;
+              height: unset;
+            }
+          `}
+        </style>
+        {inverted ? <p style={{ height: '70vh', background: 'blanchedalmond' }} /> : null}
+
+        <Popover
+          content="Popover content for testing"
+          title="Popover Title"
+          preferredPlacement="top"
+        >
+          <Button v2>Open Popover</Button>
+        </Popover>
+
+        <p style={{ margin: '1rem 0', height: '150vh', background: 'blanchedalmond' }} />
+      </div>
+    );
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole('button', { name: /Open Popover/i });
+
+    await step('Open the popover', async () => {
+      await userEvent.click(trigger);
+      await wait();
+    });
+
+    await step('Close the popover with Escape', async () => {
+      await userEvent.keyboard('{Escape}');
+      await wait();
+    });
+
+    await step('Verify the page has not scrolled', async () => {
+      const scrollParent = canvasElement.ownerDocument.documentElement;
+      await expect(scrollParent.scrollTop).toBe(0);
+    });
+  },
+});
+
+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']),
+};
+
+export const NoScrollAfterCloseBottom: Story = {
+  ...generateNoScrollTest(true),
+  ...withVariantConfig(['default']),
+};