@transferwise/components 46.134.0 → 46.135.1

package/src/expressiveMoneyInput/currencySelector/CurrencySelector.test.tsx

@@ -1,4 +1,11 @@
-import { mockMatchMedia, mockResizeObserver, render, screen, userEvent } from '../../test-utils';
+import {
+  mockMatchMedia,
+  mockResizeObserver,
+  render,
+  screen,
+  userEvent,
+  waitFor,
+} from '../../test-utils';
 
 import { CurrencySelector } from './CurrencySelector';
 
@@ -92,6 +99,112 @@ describe('CurrencySelector', () => {
     expect(screen.getByRole('combobox')).toBeDisabled();
   });
 
+  it('displays formatted currency code when the currency is selected', () => {
+    render(<CurrencySelector options={mockCurrencies} id="id" currency="USC" labelId="labelId" />);
+
+    expect(screen.getByRole('combobox', { name: 'Select currency' })).toHaveTextContent('USDC');
+  });
+
+  it('displays formatted currency code in the selected option content', async () => {
+    render(
+      <CurrencySelector
+        options={[
+          {
+            title: 'All',
+            currencies: [
+              { code: 'USC', label: 'USDC', keywords: ['USDC'] },
+              { code: 'EUR', label: 'Euro', keywords: ['EUR'] },
+            ],
+          },
+        ]}
+        id="id"
+        currency="USC"
+        labelId="labelId"
+        onChange={jest.fn()}
+      />,
+    );
+
+    await userEvent.click(screen.getByRole('combobox'));
+
+    expect(screen.getByRole('option', { name: /^usdc/iu })).toHaveTextContent('USDC');
+  });
+
+  it('fires onChange with the raw currency code when selecting a formatted currency', async () => {
+    const onChange = jest.fn();
+    render(
+      <CurrencySelector
+        options={[
+          {
+            title: 'All',
+            currencies: [
+              { code: 'USC', label: 'USDC', keywords: ['USC'] },
+              { code: 'EUR', label: 'Euro', keywords: ['EUR'] },
+            ],
+          },
+        ]}
+        id="id"
+        currency="EUR"
+        labelId="labelId"
+        onChange={onChange}
+      />,
+    );
+
+    await userEvent.click(screen.getByRole('combobox'));
+    await userEvent.click(screen.getByRole('option', { name: /^usdc/iu }));
+
+    expect(onChange).toHaveBeenCalledWith('USC');
+  });
+
+  it('returns USC option when searching by the formatted code USDC', async () => {
+    render(
+      <CurrencySelector
+        options={mockCurrencies}
+        id="id"
+        currency="USD"
+        labelId="labelId"
+        onChange={jest.fn()}
+      />,
+    );
+
+    await userEvent.click(screen.getByRole('combobox', { name: 'Select currency' }));
+
+    await userEvent.type(
+      screen.getByRole('combobox', {
+        name: /type a currency \/ country/iu,
+      }),
+      'USDC',
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('option', { name: /usdc/iu })).toBeInTheDocument();
+    });
+  });
+
+  it('does not return USDC option when searching by the raw code USC', async () => {
+    render(
+      <CurrencySelector
+        options={mockCurrencies}
+        id="id"
+        currency="USD"
+        labelId="labelId"
+        onChange={jest.fn()}
+      />,
+    );
+
+    await userEvent.click(screen.getByRole('combobox', { name: 'Select currency' }));
+
+    await userEvent.type(
+      screen.getByRole('combobox', {
+        name: /type a currency \/ country/iu,
+      }),
+      'USC',
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByRole('option')).not.toBeInTheDocument();
+    });
+  });
+
   it('deduplicates currencies while searching', async () => {
     render(
       <CurrencySelector
@@ -155,6 +268,11 @@ const mockCurrencies = [
         label: 'Australian Dollar',
         keywords: ['AUD', 'australia'],
       },
+      {
+        code: 'USC',
+        label: 'Digital Dollar',
+        keywords: ['USDC', 'Digital Dollar'],
+      },
     ],
   },
 ];

package/src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx

@@ -19,6 +19,7 @@ import { useIntl } from 'react-intl';
 
 import messages from '../ExpressiveMoneyInput.messages';
 import { getLocaleCurrencyName } from '../../common';
+import { formatCurrencyCode } from '@transferwise/formatting';
 
 export interface CurrencyOption {
   label?: string;
@@ -99,7 +100,7 @@ export const CurrencySelector = ({
       renderValue={({ code, label }) => {
         return (
           <SelectInputOptionContent
-            title={code}
+            title={formatCurrencyCode(code)}
             note={label}
             icon={<Flag code={code} intrinsicSize={24} />}
           />
@@ -128,7 +129,7 @@ export const CurrencySelector = ({
           onClick={(event) => handleTriggerClick(event)}
         >
           <>
-            <span aria-hidden>{currency}</span>
+            <span aria-hidden>{formatCurrencyCode(currency)}</span>
             <span className="sr-only">{getLocaleCurrencyName(intl, currency)}</span>
           </>
         </SelectInputTriggerButton>
@@ -203,7 +204,7 @@ const filterAndSortCurrenciesForQuery = (
     currencies
       .filter((currency) => {
         return (
-          currency.code.toLowerCase().includes(query) ||
+          formatCurrencyCode(currency.code).toLowerCase().includes(query) ||
           (currency.label ?? '').toLowerCase().includes(query) ||
           currency.keywords?.some((keyword) => keyword.toLowerCase().includes(query))
         );

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;

package/src/styles/less/neptune.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;