@transferwise/components 0.0.0-experimental-4a6914a → 0.0.0-experimental-23ee071

package/src/main.css

@@ -29430,66 +29430,54 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   margin-top: -2px;
 }
 
-@container (max-width: 240px) {
+@container (min-width: 309px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
-    align-content: start;
+    height: var(--wds-list-item-control-wrapper-height);
+    align-content: center;
+  }
+  .wds-list-item-gridWrapper .wds-list-item-media-image {
+    -o-object-position: center;
+       object-position: center;
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
-    grid-template-columns: 1fr auto;
+    grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto auto;
-    grid-template-areas: "body control" "info control" "prompt prompt";
-  }
-  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto;
-    grid-template-areas: "body" "info" "prompt" "control";
+    grid-template-areas: "media body control" ". info ." ". prompt prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
-    grid-template-columns: 1fr auto;
+    grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "body control" "info control";
-  }
-  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
-    grid-template-columns: 1fr;
-    grid-template-areas: "body" "info" "control";
+    grid-template-areas: "media body control" ". info .";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
-    grid-template-columns: 1fr auto;
+    grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "body control" "prompt prompt";
-  }
-  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
-    grid-template-columns: 1fr;
-    grid-template-areas: "body" "prompt" "control";
+    grid-template-areas: "media body control" ". prompt prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
-    grid-template-columns: 1fr auto;
+    grid-template-columns: auto 1fr auto;
     grid-template-rows: auto;
-    grid-template-areas: "body control";
-  }
-  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
-    grid-template-columns: 1fr;
-    grid-template-areas: "body" "control";
+    grid-template-areas: "media body control";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto auto auto;
-    grid-template-areas: "body" "info" "prompt";
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "media body" ". info" ". prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto auto;
-    grid-template-areas: "body" "info";
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "media body" ". info";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
-    grid-template-columns: 1fr;
+    grid-template-columns: auto 1fr;
     grid-template-rows: auto auto;
-    grid-template-areas: "body" "prompt";
+    grid-template-areas: "media body" ". prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
-    grid-template-columns: 1fr;
+    grid-template-columns: auto 1fr;
     grid-template-rows: auto;
-    grid-template-areas: "body";
+    grid-template-areas: "media body";
   }
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl .wds-list-item-prompt {
     grid-column: 1 / -1;
@@ -29497,43 +29485,23 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto auto;
-    grid-template-areas: "body control" "info control" "prompt prompt";
-  }
-  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto;
-    grid-template-areas: "body" "info" "prompt" "control";
+    grid-template-areas: "body control" "info ." "prompt prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "body control" "info control";
-  }
-  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto;
-    grid-template-areas: "body" "info" "control";
+    grid-template-areas: "body control" "info .";
   }
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto;
     grid-template-areas: "body control" "prompt prompt";
   }
-  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto;
-    grid-template-areas: "body" "prompt" "control";
-  }
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto;
     grid-template-areas: "body control";
   }
-  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto;
-    grid-template-areas: "body" "control";
-  }
   .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl .wds-list-item-prompt {
     grid-column: 1 / -1;
   }
@@ -29557,27 +29525,9 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     grid-template-rows: auto;
     grid-template-areas: "body";
   }
-  .wds-list-item-gridWrapper .wds-list-item-media {
-    display: none;
-  }
-  .wds-list-item-gridWrapper .wds-list-item-body {
-    grid-area: body;
-    display: grid;
-    grid-template-columns: 1fr;
-    justify-items: start;
-    grid-gap: 0;
-    gap: 0;
-  }
-  .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
-    text-align: left;
-  }
-  .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
-    margin-top: 4px;
-    margin-top: var(--size-4);
-  }
 }
 
-@container (min-width: 240.1px) and (max-width: 308px) {
+@container (min-width: 241px) and (max-width: 308px) {
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: bottom left;
        object-position: bottom left;
@@ -29709,54 +29659,66 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   }
 }
 
-@container (min-width: 308.1px) {
+@container (max-width: 240px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
-    height: var(--wds-list-item-control-wrapper-height);
-    align-content: center;
-  }
-  .wds-list-item-gridWrapper .wds-list-item-media-image {
-    -o-object-position: center;
-       object-position: center;
+    align-content: start;
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: 1fr auto;
     grid-template-rows: auto auto auto;
-    grid-template-areas: "media body control" ". info ." ". prompt prompt";
+    grid-template-areas: "body control" "info control" "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "body" "info" "prompt" "control";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body control" ". info .";
+    grid-template-areas: "body control" "info control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-areas: "body" "info" "control";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body control" ". prompt prompt";
+    grid-template-areas: "body control" "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-areas: "body" "prompt" "control";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: 1fr auto;
     grid-template-rows: auto;
-    grid-template-areas: "media body control";
+    grid-template-areas: "body control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-areas: "body" "control";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
-    grid-template-columns: auto 1fr;
-    grid-template-rows: auto auto;
-    grid-template-areas: "media body" ". info" ". prompt";
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "body" "info" "prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
-    grid-template-columns: auto 1fr;
-    grid-template-rows: auto auto auto;
-    grid-template-areas: "media body" ". info";
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body" "info";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 1fr;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body" ". prompt";
+    grid-template-areas: "body" "prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 1fr;
     grid-template-rows: auto;
-    grid-template-areas: "media body";
+    grid-template-areas: "body";
   }
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl .wds-list-item-prompt {
     grid-column: 1 / -1;
@@ -29764,23 +29726,43 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto auto;
-    grid-template-areas: "body control" "info ." "prompt prompt";
+    grid-template-areas: "body control" "info control" "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "body" "info" "prompt" "control";
   }
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "body control" "info .";
+    grid-template-areas: "body control" "info control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "body" "info" "control";
   }
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto;
     grid-template-areas: "body control" "prompt prompt";
   }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "body" "prompt" "control";
+  }
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto;
     grid-template-areas: "body control";
   }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "body" "control";
+  }
   .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl .wds-list-item-prompt {
     grid-column: 1 / -1;
   }
@@ -29804,6 +29786,24 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     grid-template-rows: auto;
     grid-template-areas: "body";
   }
+  .wds-list-item-gridWrapper .wds-list-item-media {
+    display: none;
+  }
+  .wds-list-item-gridWrapper .wds-list-item-body {
+    grid-area: body;
+    display: grid;
+    grid-template-columns: 1fr;
+    justify-items: start;
+    grid-gap: 0;
+    gap: 0;
+  }
+  .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
+    text-align: left;
+  }
+  .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
+    margin-top: 4px;
+    margin-top: var(--size-4);
+  }
 }
 
 .wds-list-item-prompt {

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,23 @@ export const BalanceCurrencies: Story = {
   },
 };
 
+export const WithDecimals: Story = {
+  args: {
+    currencies: [],
+    selectedCurrency: exampleCurrency.eur,
+    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');
+  },
+};
+
 export const OpenedInput: Story = {
   ...MultipleCurrencies,
   play: async ({ canvasElement }) => {

package/src/moneyInput/MoneyInput.test.tsx

@@ -253,6 +253,24 @@ 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('calls onAmountChange with parsed and formatted value', async () => {
@@ -263,6 +281,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());

package/src/moneyInput/MoneyInput.tsx

@@ -24,7 +24,7 @@ import {
 import Title from '../title';
 
 import messages from './MoneyInput.messages';
-import { formatAmount, parseAmount } from './currencyFormatting';
+import { formatAmount, formatNumber, parseAmount } from './currencyFormatting';
 import withId from '../withId';
 
 export interface CurrencyOptionItem {
@@ -48,24 +48,34 @@ const formatAmountIfSet = ({
   amount,
   currency,
   locale,
+  decimals,
 }: {
   amount: number | null | undefined;
   currency: string;
   locale: string;
+  decimals?: number;
 }) => {
-  return typeof amount === 'number' ? formatAmount(amount, currency, locale) : '';
+  if (typeof amount !== 'number') {
+    return '';
+  }
+  if (decimals != null) {
+    return formatNumber(amount, locale, decimals);
+  }
+  return formatAmount(amount, currency, locale);
 };
 
 const parseNumber = ({
   amount,
   currency,
   locale,
+  decimals,
 }: {
   amount: string;
   currency: string;
   locale: string;
+  decimals?: number;
 }) => {
-  return parseAmount(amount, currency, locale);
+  return parseAmount(amount, currency, locale, decimals);
 };
 
 const allowedInputKeys = new Set([
@@ -102,6 +112,11 @@ export interface MoneyInputProps extends WrappedComponentProps {
   onCustomAction?: () => void;
   classNames?: Record<string, string>;
   selectProps?: Partial<SelectInputProps<CurrencyOptionItem>>;
+  /**
+   * Specify the number of decimal places to format the amount. When not specified, the number of
+   * decimals is determined by the selected currency (e.g. 2 for EUR, 0 for JPY, 3 for BHD).
+   */
+  decimals?: number;
 }
 
 export type MoneyInputPropsWithInputAttributes = MoneyInputProps &
@@ -133,6 +148,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
         amount: props.amount,
         currency: props.selectedCurrency.currency,
         locale: props.intl.locale,
+        decimals: props.decimals,
       }),
       locale: props.intl.locale,
     };
@@ -147,6 +163,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: nextProps.amount,
           currency: nextProps.selectedCurrency.currency,
           locale: nextProps.intl.locale,
+          decimals: nextProps.decimals,
         }),
       });
     }
@@ -174,6 +191,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: paste,
           currency: this.props.selectedCurrency.currency,
           locale,
+          decimals: this.props.decimals,
         });
 
     if (isNumberOrNull(parsed)) {
@@ -182,6 +200,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: parsed,
           currency: this.props.selectedCurrency.currency,
           locale,
+          decimals: this.props.decimals,
         }),
       });
       this.props.onAmountChange?.(parsed);
@@ -201,6 +220,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: value,
           currency: this.props.selectedCurrency.currency,
           locale: this.state.locale,
+          decimals: this.props.decimals,
         });
     if (isNumberOrNull(parsed)) {
       this.props.onAmountChange?.(parsed);
@@ -248,6 +268,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
         amount: previousState.formattedAmount,
         currency: this.props.selectedCurrency.currency,
         locale: previousState.locale,
+        decimals: this.props.decimals,
       });
       if (!isNumberOrNull(parsed)) {
         return {
@@ -259,6 +280,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: parsed,
           currency: this.props.selectedCurrency.currency,
           locale: previousState.locale,
+          decimals: this.props.decimals,
         }),
       };
     });
@@ -340,6 +362,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
             amount: this.props.placeholder,
             currency: this.props.selectedCurrency.currency,
             locale: this.state.locale,
+            decimals: this.props.decimals,
           })}
           autoComplete="off"
           aria-describedby={selectedCurrencyElementId}

package/src/moneyInput/currencyFormatting.ts

@@ -1,8 +1,8 @@
-import { formatAmount } from '@transferwise/formatting';
+import { formatAmount, formatNumber } from '@transferwise/formatting';
 
 import { DEFAULT_LOCALE } from '../common/locale';
 
-export { formatAmount };
+export { formatAmount, formatNumber };
 
 // TODO: do not duplicate this between formatting and components
 const currencyDecimals: Record<string, number> = {
@@ -61,10 +61,15 @@ function getDecimalSeparator(locale: string) {
   return isNumberLocaleSupported() ? (1.1).toLocaleString(locale)[1] : '.';
 }
 
-export function parseAmount(number: string, currency: string, locale = DEFAULT_LOCALE) {
+export function parseAmount(
+  number: string,
+  currency: string,
+  locale = DEFAULT_LOCALE,
+  decimals?: number,
+) {
   const validLocale = getValidLocale(locale);
 
-  const precision = getCurrencyDecimals(currency);
+  const precision = decimals ?? getCurrencyDecimals(currency);
   const groupSeparator = isNumberLocaleSupported() ? (10000).toLocaleString(validLocale)[2] : ',';
   const decimalSeparator = getDecimalSeparator(validLocale);
   const numberWithStandardDecimalSeparator = (number || '')

package/src/listItem/_stories/ListItemTest.story.tsx

@@ -1,67 +0,0 @@
-import List from '../../list';
-
-import { ListItem, type ListItemProps } from '../ListItem';
-import {
-  InfoCircle,
-  Documents,
-  Warning,
-  Home,
-  Globe,
-  People,
-  Link as LinkIcon,
-} from '@transferwise/icons';
-
-export default {
-  title: 'Aidan',
-};
-
-export const Testing = {
-  render: () => {
-    return (
-      <div
-        style={{
-          display: 'flex',
-          gap: 'var(--size-4)',
-          flexDirection: 'row',
-          width: '689px',
-          //   border: '1px solid black',
-        }}
-      >
-        <div
-          style={{
-            flex: 1,
-          }}
-        >
-          <div
-            style={{
-              border: '1px solid var(--color-border-neutral)',
-              borderRadius: 'var(--radius-medium)',
-              padding: 'var(--size-16)',
-              display: 'flex',
-              justifyContent: 'center',
-            }}
-          >
-            <ListItem
-              title="System maintenance"
-              subtitle="Scheduled downtime"
-              inverted
-              control={
-                <ListItem.IconButton partiallyInteractive>
-                  <InfoCircle />
-                </ListItem.IconButton>
-              }
-            />
-          </div>
-        </div>
-
-        <div
-          style={{
-            flex: 1,
-          }}
-        >
-          <span>a</span>
-        </div>
-      </div>
-    );
-  },
-};