@transferwise/components 0.0.0-experimental-70cb6d1 → 0.0.0-experimental-8bfed24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-70cb6d1",
+  "version": "0.0.0-experimental-8bfed24",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -40,20 +40,20 @@
   "devDependencies": {
     "@babel/core": "^7.29.0",
     "@babel/plugin-transform-runtime": "^7.29.0",
-    "@babel/preset-env": "^7.29.2",
+    "@babel/preset-env": "^7.29.0",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "@formatjs/cli": "^6.14.1",
+    "@formatjs/cli": "^6.13.1",
     "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-a11y": "^10.3.4",
-    "@storybook/addon-docs": "^10.3.4",
+    "@storybook/addon-a11y": "^10.3.3",
+    "@storybook/addon-docs": "^10.3.3",
     "@storybook/addon-mcp": "^0.4.1",
-    "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
-    "@storybook/react-webpack5": "^10.3.4",
+    "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
+    "@storybook/react-webpack5": "^10.3.3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -73,7 +73,7 @@
     "@wise/eslint-config": "^13.3.0",
     "babel-plugin-formatjs": "^10.5.41",
     "eslint": "^9.39.4",
-    "eslint-plugin-storybook": "^10.3.4",
+    "eslint-plugin-storybook": "^10.3.3",
     "gulp": "^5.0.1",
     "jest": "^30.3.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -81,15 +81,15 @@
     "jsdom-testing-mocks": "^1.16.0",
     "lodash.times": "^4.3.2",
     "react-intl": "^7.1.14",
-    "rollup": "^4.60.1",
+    "rollup": "^4.57.1",
     "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^10.3.4",
+    "storybook": "^10.3.3",
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
     "@transferwise/neptune-css": "14.27.1",
-    "@wise/wds-configs": "0.0.0",
-    "@wise/components-theming": "1.10.1"
+    "@wise/components-theming": "1.10.1",
+    "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",
@@ -101,18 +101,18 @@
     "react-intl": "^5.10.0 || ^6 || ^7"
   },
   "dependencies": {
-    "@babel/runtime": "^7.29.2",
+    "@babel/runtime": "^7.28.6",
     "@floating-ui/react": "^0.27.19",
     "@headlessui/react": "^2.2.9",
     "@popperjs/core": "^2.11.8",
     "@react-aria/focus": "^3.21.5",
     "@react-aria/overlays": "^3.31.2",
-    "@transferwise/formatting": "^2.14.0",
+    "@transferwise/formatting": "^2.13.7",
     "@transferwise/neptune-validation": "^3.3.3",
     "clsx": "^2.1.1",
     "commonmark": "^0.31.2",
-    "core-js": "^3.49.0",
-    "framer-motion": "^12.38.0",
+    "core-js": "^3.48.0",
+    "framer-motion": "^12.36.0",
     "lodash.clamp": "^4.0.3",
     "lodash.debounce": "^4.0.8",
     "merge-props": "^6.0.0",

package/src/i18n/en.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "selected",
   "neptune.DateLookup.twentyYears": "20 years",
   "neptune.DateLookup.year": "year",
+  "neptune.Expander.collapseAriaLabel": "Collapse",
+  "neptune.Expander.expandAriaLabel": "Expand",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
   "neptune.FlowNavigation.back": "back to previous step",

package/src/index.ts

@@ -35,7 +35,7 @@ export type { HeaderProps } from './header';
 export type { EmphasisProps } from './emphasis';
 export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';
-export type { InlinePromptProps, ActionPromptProps } from './prompt';
+export type { InlinePromptProps, ActionPromptProps, CriticalBannerProps } from './prompt';
 export type { InfoPromptProps, InfoPromptAction, InfoPromptMedia } from './prompt';
 export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
 export type { InputProps } from './inputs/Input';
@@ -173,7 +173,7 @@ export { default as Header } from './header';
 export { default as Image } from './image';
 export { default as Info } from './info';
 export { default as InlineAlert } from './inlineAlert';
-export { InfoPrompt, InlinePrompt, ActionPrompt } from './prompt';
+export { InfoPrompt, InlinePrompt, ActionPrompt, CriticalBanner } from './prompt';
 export { default as InputWithDisplayFormat } from './inputWithDisplayFormat';
 export { Input } from './inputs/Input';
 export { InputGroup } from './inputs/InputGroup';

package/src/main.css

@@ -1,6 +1,6 @@
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:10 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 :root {
@@ -142,8 +142,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-personal {
@@ -391,8 +391,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -640,8 +640,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -889,8 +889,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-personal--dark {
@@ -1138,8 +1138,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-platform {
@@ -1321,8 +1321,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1504,8 +1504,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-business {
@@ -1688,8 +1688,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-business--dark {
@@ -1872,8 +1872,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-business--forest-green {
@@ -2056,8 +2056,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-business--bright-green {
@@ -32176,6 +32176,91 @@ 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;
+}
+
+.wds-critical-banner--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-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-critical-banner__description--collapsed {
+  display: -webkit-box;
+  -webkit-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;
+}
+
+@media (max-width: 767px) {
+  .wds-critical-banner .wds-prompt__actions-wrapper {
+    grid-column: span 3;
+  }
+}
+
+.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;
 }
@@ -34600,32 +34685,3 @@ 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,6 +66,9 @@
 @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";
@@ -90,7 +93,6 @@
 @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/moneyInput/MoneyInput.story.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { within, userEvent, expect } from 'storybook/test';
+import { within, userEvent } from 'storybook/test';
 import { Lock } from '@transferwise/icons';
 import { useState } from 'react';
 
@@ -155,15 +155,6 @@ 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, userEvent, fireEvent, expect } from 'storybook/test';
+import { within, fireEvent } from 'storybook/test';
 import { allModes } from '../../.storybook/modes';
 import { lorem500 } from '../test-utils';
 import { Field } from '../field/Field';
@@ -102,143 +102,3 @@ 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,45 +253,6 @@ 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 () => {
@@ -302,12 +263,6 @@ 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());