@transferwise/components 46.138.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;
@@ -30086,6 +29822,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item-navigation .tw-icon-chevron-right {
   color: #c9cbce;
   color: var(--color-interactive-secondary);
+  display: block;
 }
 
 .wds-list-item-control {
@@ -30838,6 +30575,17 @@ button.np-link {
 }
 
 .tw-loader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  gap: var(--size-16);
+  width: 190px;
+  text-align: center;
+  word-break: break-word;
+}
+
+.tw-loader-asset {
   overflow: hidden;
   border-radius: 50%;
   backface-visibility: hidden;
@@ -30854,11 +30602,11 @@ button.np-link {
   transition: opacity 300ms cubic-bezier(0.24, 0, 0.3, 1);
 }
 
-.tw-loader--visible {
+.tw-loader-asset--visible {
   opacity: 1;
 }
 
-.tw-loader::before {
+.tw-loader-asset::before {
   content: "";
   display: block;
   width: 4.5rem;
@@ -30878,7 +30626,7 @@ button.np-link {
   animation-iteration-count: infinite;
 }
 
-.tw-loader--sm {
+.tw-loader-asset--sm {
   --coin-size: 3rem;
   --coin-edge-width-offset: translateX(0.275rem);
   --coin-edge-width-negative-offset: translateX(-0.275rem);
@@ -30886,7 +30634,7 @@ button.np-link {
   --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour), -0.05rem 0 0 var(--coin-colour), -0.075rem 0 0 var(--coin-colour), -0.1rem 0 0 var(--coin-colour), -0.125rem 0 0 var(--coin-colour), -0.15rem 0 0 var(--coin-colour), -0.175rem 0 0 var(--coin-colour), -0.2rem 0 0 var(--coin-colour), -0.225rem 0 0 var(--coin-colour), -0.25rem 0 0 var(--coin-colour), -0.275rem 0 0 var(--coin-colour), -0.3rem 0 0 var(--coin-colour), -0.325rem 0 0 var(--coin-colour), -0.35rem 0 0 var(--coin-colour), -0.375rem 0 0 var(--coin-colour), -0.4rem 0 0 var(--coin-colour), -0.425rem 0 0 var(--coin-colour), -0.45rem 0 0 var(--coin-colour), -0.475rem 0 0 var(--coin-colour);
 }
 
-.tw-loader--md {
+.tw-loader-asset--md {
   --coin-size: 4.5rem;
   --coin-edge-width-offset: translateX(0.375rem);
   --coin-edge-width-negative-offset: translateX(-0.375rem);
@@ -31468,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);
@@ -34666,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/moneyInput/MoneyInput.story.tsx

@@ -164,6 +164,26 @@ export const WithDecimals: Story = {
   },
 };
 
+export const DisabledOptions: Story = {
+  args: {
+    currencies: [
+      { header: 'Popular currencies' },
+      exampleCurrency.eur,
+      exampleCurrency.gbp,
+      { ...exampleCurrency.usd, disabled: true },
+      { header: 'All currencies' },
+      exampleCurrency.aud,
+      { ...exampleCurrency.cny, disabled: true },
+      exampleCurrency.jpy,
+    ],
+    selectedCurrency: exampleCurrency.eur,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('combobox'));
+  },
+};
+
 export const OpenedInput: Story = {
   ...MultipleCurrencies,
   play: async ({ canvasElement }) => {

package/src/moneyInput/MoneyInput.test.tsx

@@ -566,6 +566,55 @@ describe('Money Input', () => {
     expect(screen.getByRole('listbox', { name: triggerLabel ?? '' })).toBeInTheDocument();
   });
 
+  describe('disabled options', () => {
+    const disabledCurrency: CurrencyOptionItem = {
+      value: 'CNY',
+      label: 'CNY',
+      note: 'Chinese yuan',
+      currency: 'cny',
+      disabled: true,
+    };
+
+    it('renders disabled currency option with aria-disabled', async () => {
+      customRender({
+        currencies: [{ header: 'Popular currencies' }, ...popularCurrencies, disabledCurrency],
+      });
+      await openDropdown();
+      const cnyOption = screen.getByRole('option', { name: /CNY/ });
+      expect(cnyOption).toHaveAttribute('aria-disabled', 'true');
+    });
+
+    it('does not call onCurrencyChange when a disabled option is clicked', async () => {
+      customRender({
+        currencies: [{ header: 'Popular currencies' }, ...popularCurrencies, disabledCurrency],
+      });
+      await openDropdown();
+      const cnyOption = screen.getByRole('option', { name: /CNY/ });
+      await userEvent.click(cnyOption);
+      expect(initialProps.onCurrencyChange).not.toHaveBeenCalled();
+    });
+
+    it('skips disabled option during keyboard navigation', async () => {
+      customRender({
+        currencies: [popularCurrencies[0], disabledCurrency, popularCurrencies[2]],
+      });
+      await openDropdown();
+      // Navigate down from first option — should skip disabled CNY and land on GBP
+      await userEvent.keyboard('{ArrowDown}{ArrowDown}');
+      await userEvent.keyboard('{Enter}');
+      await waitFor(() => {
+        expect(initialProps.onCurrencyChange).toHaveBeenCalledWith(popularCurrencies[2]);
+      });
+    });
+
+    it('does not mark options without disabled property as disabled', async () => {
+      customRender();
+      await openDropdown();
+      const eurOption = screen.getByRole('option', { name: /EUR/ });
+      expect(eurOption).not.toHaveAttribute('aria-disabled', 'true');
+    });
+  });
+
   it('renders custom action button in dropdown footer and calls onCustomAction', async () => {
     const onCustomAction = jest.fn();
     render(

package/src/moneyInput/MoneyInput.tsx

@@ -34,6 +34,7 @@ export interface CurrencyOptionItem {
   currency: string;
   note?: string;
   searchable?: string;
+  disabled?: boolean;
 }
 
 export interface CurrencyHeaderItem {
@@ -256,6 +257,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           type: 'option',
           value: item,
           filterMatchers: [item.value, item.label, item.note ?? '', item.searchable ?? ''],
+          disabled: item.disabled,
         });
       }
     });

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>
+  ),
+};