@transferwise/components 0.0.0-experimental-4c97d70 → 0.0.0-experimental-862fadc

package/src/main.css

@@ -1,6 +1,6 @@
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 :root {
@@ -53,6 +53,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -142,8 +143,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-personal {
@@ -236,6 +237,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -391,8 +393,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -485,6 +487,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -640,8 +643,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -734,6 +737,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -889,8 +893,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-personal--dark {
@@ -983,6 +987,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1138,8 +1143,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-platform {
@@ -1232,6 +1237,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1321,8 +1327,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1415,6 +1421,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1504,8 +1511,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-business {
@@ -1599,6 +1606,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1688,8 +1696,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-business--dark {
@@ -1783,6 +1791,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1872,8 +1881,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1967,6 +1976,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -2056,8 +2066,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 10 Apr 2026 14:46:01 GMT
  */
 
 .np-theme-business--bright-green {
@@ -2151,6 +2161,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -31053,8 +31064,8 @@ button.np-link {
   box-shadow: none;
   background: #ffffff;
   background: var(--color-background-elevated);
-  border-radius: 24px;
-  border-radius: var(--radius-large);
+  border-radius: 32px;
+  border-radius: var(--radius-xlarge);
 }
 
 .tw-modal.in .tw-modal-dialog {
@@ -32176,114 +32187,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   padding: 0;
 }
 
-.wds-action-prompt {
-  --Prompt-padding: var(--size-16);
-  --Prompt-actions-gap: var(--size-8);
-  --Prompt-gap: var(--size-10) var(--size-16);
-  --Prompt-border-radius: var(--radius-large);
-}
-
-.wds-action-prompt--media-image {
-  width: 48px;
-  width: var(--size-48);
-  height: 48px;
-  height: var(--size-48);
-  -o-object-fit: contain;
-     object-fit: contain;
-}
-
-@media (max-width: 767px) {
-  .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
-    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
-    min-width: -moz-fit-content;
-    min-width: fit-content;
-  }
-}
-
-.wds-action-prompt__content {
-  max-width: calc(48px * 10);
-  max-width: calc(var(--size-48) * 10);
-}
-
-.wds-critical-banner {
-  --Prompt-padding: var(--size-16);
-  --Prompt-actions-gap: var(--size-8);
-  --Prompt-gap: var(--size-10) var(--size-16);
-  --Prompt-border-radius: 0;
-  /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
-     actions only go full-width below 480px (--screen-xs) */
-}
-
-.wds-critical-banner__mobile--collapsed {
-  max-height: 30vh;
-}
-
-.wds-critical-banner--media-image {
-  width: 48px;
-  width: var(--size-48);
-  height: 48px;
-  height: var(--size-48);
-  -o-object-fit: contain;
-     object-fit: contain;
-}
-
-.wds-critical-banner__title--collapsed {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.wds-critical-banner__description--collapsed {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.wds-critical-banner .wds-prompt__content-wrapper {
-  grid-template-columns: auto 1fr auto;
-  align-items: flex-start;
-}
-
-.wds-critical-banner__text-wrapper {
-  min-width: 0;
-  max-width: 480px;
-  height: 100%;
-}
-
-.wds-critical-banner .wds-prompt__actions-wrapper {
-  grid-column-start: 2;
-  grid-column-end: 3;
-}
-
-@media not (min-width: 480px) {
-  .wds-critical-banner .wds-prompt__actions-wrapper {
-    grid-column: span 3;
-    width: 100%;
-  }
-}
-
-@media not (min-width: 480px) {
-  .wds-critical-banner--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
-    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
-    min-width: -moz-fit-content;
-    min-width: fit-content;
-  }
-}
-
-.wds-expander-toggle {
-  align-self: flex-start;
-  flex-shrink: 0;
-  transition: transform 0.2s ease-in-out;
-}
-
-.wds-expander-toggle--collapsed {
-  transform: rotate(180deg);
-}
-
 .wds-radio-group .np-radio:last-child label {
   margin-bottom: 0;
 }
@@ -32825,8 +32728,8 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 
 .np-dropdown-menu-desktop {
-  max-height: 70vh;
   max-height: 70svh;
+  max-height: var(--np-panel-available-height, 70svh);
   min-width: 160px;
   max-width: calc(100vw - 32px);
 }
@@ -32834,6 +32737,7 @@ html:not([dir="rtl"]) .np-navigation-option {
 @media (min-height: 592px) {
   .np-dropdown-menu-desktop {
     max-height: 592px;
+    max-height: var(--np-panel-available-height, 592px);
   }
 }
 
@@ -34708,3 +34612,32 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-list-item__action {
   flex-shrink: 0;
 }
+
+.wds-action-prompt {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+  --Prompt-border-radius: var(--radius-large);
+}
+
+.wds-action-prompt--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+@media (max-width: 767px) {
+  .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
+    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+}
+
+.wds-action-prompt__content {
+  max-width: calc(48px * 10);
+  max-width: calc(var(--size-48) * 10);
+}

package/src/main.less

@@ -66,9 +66,6 @@
 @import "./prompt/PrimitivePrompt/PrimitivePrompt.less";
 @import "./prompt/InlinePrompt/InlinePrompt.less";
 @import "./prompt/InfoPrompt/InfoPrompt.less";
-@import "./prompt/ActionPrompt/ActionPrompt.less";
-@import "./prompt/CriticalBanner/CriticalBanner.less";
-@import "./prompt/common/Expander/Expander.less";
 @import "./radioGroup/RadioGroup.less";
 @import "./section/Section.less";
 @import "./slidingPanel/SlidingPanel.less";
@@ -93,6 +90,7 @@
 @import "./progress/Progress.less";
 @import "./progressBar/ProgressBar.less";
 @import "./legacylistItem/LegacyListItem.less";
+@import "./prompt/ActionPrompt/ActionPrompt.less";
 
 // List all less files in src in alphabetical order: find -s src -type f -name '*.less' ! -name 'main.less'
 // Make sure you are not referencing main.less itself in this file!

package/src/modal/Modal.css

@@ -9,8 +9,8 @@
   box-shadow: none;
   background: #ffffff;
   background: var(--color-background-elevated);
-  border-radius: 24px;
-  border-radius: var(--radius-large);
+  border-radius: 32px;
+  border-radius: var(--radius-xlarge);
 }
 .tw-modal.in .tw-modal-dialog {
   transform: translate(0);

package/src/modal/Modal.less

@@ -12,7 +12,7 @@
     transform: translateY(-25%);
     box-shadow: none;
     background: var(--color-background-elevated);
-    border-radius: var(--radius-large);
+    border-radius: var(--radius-xlarge);
   }
 
   &.in {

package/src/moneyInput/MoneyInput.story.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { within, userEvent } from 'storybook/test';
+import { within, userEvent, expect } from 'storybook/test';
 import { Lock } from '@transferwise/icons';
 import { useState } from 'react';
 
@@ -155,6 +155,15 @@ export const BalanceCurrencies: Story = {
   },
 };
 
+export const WithDecimals: Story = {
+  args: {
+    currencies: [],
+    selectedCurrency: exampleCurrency.eur,
+    decimals: 4,
+    amount: 1234.1412,
+  },
+};
+
 export const OpenedInput: Story = {
   ...MultipleCurrencies,
   play: async ({ canvasElement }) => {

package/src/moneyInput/MoneyInput.test.story.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { within, fireEvent } from 'storybook/test';
+import { within, userEvent, fireEvent, expect } from 'storybook/test';
 import { allModes } from '../../.storybook/modes';
 import { lorem500 } from '../test-utils';
 import { Field } from '../field/Field';
@@ -102,3 +102,143 @@ export const SmoothScrollReset: Story = {
     },
   },
 };
+
+export const WithDecimals: Story = {
+  args: {
+    currencies: [],
+    decimals: 4,
+    amount: 1234.5678,
+  },
+  play: async ({ canvas }) => {
+    const input = canvas.getByRole('textbox');
+    await expect(input).toHaveValue('1,234.5678');
+    await userEvent.clear(input);
+    await userEvent.type(input, '99.123456789');
+    await userEvent.tab();
+    await expect(input).toHaveValue('99.1235');
+  },
+};
+
+const eur = {
+  value: 'EUR',
+  label: 'EUR',
+  note: 'Euro',
+  currency: 'eur',
+} as const;
+
+const bhd = {
+  value: 'BHD',
+  label: 'BHD',
+  note: 'Bahraini dinar',
+  currency: 'bhd',
+} as const;
+
+const jpy = {
+  value: 'JPY',
+  label: 'JPY',
+  note: 'Japanese yen',
+  currency: 'jpy',
+} as const;
+
+const sharedProps = {
+  currencies: [],
+  onAmountChange: () => {},
+  onCurrencyChange: () => {},
+} as const;
+
+function Row({
+  label,
+  amount,
+  currency,
+  decimals,
+}: {
+  label: string;
+  amount: number;
+  currency: { value: string; label: string; note: string; currency: string };
+  decimals: number;
+}) {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '240px 1fr 1fr',
+        gap: 12,
+        alignItems: 'center',
+      }}
+    >
+      <Body as="span" style={{ fontSize: 13, color: '#6b7280' }}>
+        {label}
+      </Body>
+      <Field label={`No decimals prop (${currency.value})`}>
+        <MoneyInput {...sharedProps} selectedCurrency={currency} amount={amount} />
+      </Field>
+      <Field label={`decimals={${decimals}} (${currency.value})`}>
+        <MoneyInput
+          {...sharedProps}
+          selectedCurrency={currency}
+          amount={amount}
+          decimals={decimals}
+        />
+      </Field>
+    </div>
+  );
+}
+
+/**
+ * Side-by-side comparison of formatAmount (no decimals prop) vs formatNumber (with decimals prop)
+ * when decimals matches the currency default. Differences indicate a formatting parity issue.
+ *
+ * Problem 1: Trailing zero stripping — formatAmount strips ".00" for whole numbers,
+ * formatNumber always pads to the requested precision.
+ *
+ * Problem 2: BHD decimal count — formatAmount renders 2 fractional digits for BHD,
+ * but the currencyDecimals map says BHD has 3. formatNumber with decimals=3 shows 3.
+ */
+export const DecimalsFormatParity: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <Body as="p" style={{ fontWeight: 600, marginTop: 8 }}>
+        EUR — whole numbers (trailing zero stripping)
+      </Body>
+      <Row label="amount=0" amount={0} currency={eur} decimals={2} />
+      <Row label="amount=1" amount={1} currency={eur} decimals={2} />
+      <Row label="amount=42" amount={42} currency={eur} decimals={2} />
+      <Row label="amount=100" amount={100} currency={eur} decimals={2} />
+      <Row label="amount=1000" amount={1000} currency={eur} decimals={2} />
+      <Row label="amount=9999999" amount={9999999} currency={eur} decimals={2} />
+
+      <Body as="p" style={{ fontWeight: 600, marginTop: 8 }}>
+        EUR — fractional amounts (should match)
+      </Body>
+      <Row label="amount=0.01" amount={0.01} currency={eur} decimals={2} />
+      <Row label="amount=0.1" amount={0.1} currency={eur} decimals={2} />
+      <Row label="amount=99.9" amount={99.9} currency={eur} decimals={2} />
+      <Row label="amount=1234567.89" amount={1234567.89} currency={eur} decimals={2} />
+
+      <Body as="p" style={{ fontWeight: 600, marginTop: 8 }}>
+        BHD — all amounts (formatAmount uses 2 digits, formatNumber uses 3)
+      </Body>
+      <Row label="amount=0" amount={0} currency={bhd} decimals={3} />
+      <Row label="amount=0.001" amount={0.001} currency={bhd} decimals={3} />
+      <Row label="amount=0.01" amount={0.01} currency={bhd} decimals={3} />
+      <Row label="amount=0.1" amount={0.1} currency={bhd} decimals={3} />
+      <Row label="amount=42" amount={42} currency={bhd} decimals={3} />
+      <Row label="amount=99.9" amount={99.9} currency={bhd} decimals={3} />
+      <Row label="amount=999.99" amount={999.99} currency={bhd} decimals={3} />
+      <Row label="amount=1234567.89" amount={1234567.89} currency={bhd} decimals={3} />
+
+      <Body as="p" style={{ fontWeight: 600, marginTop: 8 }}>
+        JPY — zero-decimal currency (should always match)
+      </Body>
+      <Row label="amount=0" amount={0} currency={jpy} decimals={0} />
+      <Row label="amount=1" amount={1} currency={jpy} decimals={0} />
+      <Row label="amount=1000" amount={1000} currency={jpy} decimals={0} />
+      <Row label="amount=1234567" amount={1234567} currency={jpy} decimals={0} />
+    </div>
+  ),
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+};

package/src/moneyInput/MoneyInput.test.tsx

@@ -253,6 +253,45 @@ describe('Money Input', () => {
       await userEvent.tab();
       expect(input).toHaveValue('1,234,567.65');
     });
+
+    it('uses custom decimals when specified', async () => {
+      customRender({ decimals: 4 });
+      const input = getInput();
+      await userEvent.clear(input);
+      await userEvent.type(input, '1234.56789');
+      await userEvent.tab();
+      expect(input).toHaveValue('1,234.5679');
+    });
+
+    it('uses custom decimals of 0', async () => {
+      customRender({ decimals: 0 });
+      const input = getInput();
+      await userEvent.clear(input);
+      await userEvent.type(input, '1234.56');
+      await userEvent.tab();
+      expect(input).toHaveValue('1,235');
+    });
+
+    it('ignores custom decimals override for zero-decimal currencies like JPY', async () => {
+      const jpyCurrency: CurrencyOptionItem = {
+        value: 'JPY',
+        label: 'JPY',
+        note: 'Japanese yen',
+        currency: 'jpy',
+      };
+      customRender({
+        decimals: 4,
+        selectedCurrency: jpyCurrency,
+        currencies: [jpyCurrency],
+        amount: 1234,
+      });
+      const input = getInput();
+      expect(input).toHaveValue('1,234');
+      await userEvent.clear(input);
+      await userEvent.type(input, '5678.9999');
+      await userEvent.tab();
+      expect(input).toHaveValue('5,679');
+    });
   });
 
   it('calls onAmountChange with parsed and formatted value', async () => {
@@ -263,6 +302,12 @@ describe('Money Input', () => {
     expect(initialProps.onAmountChange).toHaveBeenCalledWith(1000.65);
   });
 
+  it('calls onAmountChange with value rounded to custom decimals', async () => {
+    customRender({ decimals: 4, amount: null });
+    await userEvent.type(getInput(), '12.34567');
+    expect(initialProps.onAmountChange).toHaveBeenCalledWith(12.3457);
+  });
+
   it('calls onAmountChange when input value is empty', async () => {
     customRender();
     await userEvent.clear(getInput());