@transferwise/components 46.97.5 → 46.98.1

package/src/i18n/ja.json

@@ -21,12 +21,13 @@
   "neptune.Label.optional": "（任意）",
   "neptune.Link.opensInNewTab": "（新しいタブで開きます）",
   "neptune.MoneyInput.Select.placeholder": "選択してください...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "通貨または国をご入力ください",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "通貨を選択してください",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "選択してください…",
+  "neptune.PhoneNumberInput.countryCodeLabel": "国コード",
+  "neptune.PhoneNumberInput.phoneNumberLabel": "電話番号",
   "neptune.Select.searchPlaceholder": "検索する... ",
   "neptune.SelectInput.noResultsFound": "結果が見つかりませんでした",
-  "neptune.SelectOption.action.label": "選択してください",
-  "neptune.SelectOption.selected.action.label": "選択したオプションを変更する",
   "neptune.StatusIcon.iconLabel.error": "エラー：",
   "neptune.StatusIcon.iconLabel.information": "情報：",
   "neptune.StatusIcon.iconLabel.pending": "保留中：",

package/src/i18n/nl.json

@@ -21,19 +21,20 @@
   "neptune.Label.optional": "(Optioneel)",
   "neptune.Link.opensInNewTab": "(wordt geopend in een nieuw tabblad)",
   "neptune.MoneyInput.Select.placeholder": "Selecteer een optie...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Typ een valuta of land",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Selecteer valuta",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Selecteer een optie...",
+  "neptune.PhoneNumberInput.countryCodeLabel": "Landcode",
+  "neptune.PhoneNumberInput.phoneNumberLabel": "Telefoonnummer",
   "neptune.Select.searchPlaceholder": "Zoeken...",
   "neptune.SelectInput.noResultsFound": "Geen resultaten gevonden",
-  "neptune.SelectOption.action.label": "Kiezen",
-  "neptune.SelectOption.selected.action.label": "Gekozen optie wijzigen",
   "neptune.StatusIcon.iconLabel.error": "Fout:",
   "neptune.StatusIcon.iconLabel.information": "Informatie:",
   "neptune.StatusIcon.iconLabel.pending": "In behandeling:",
   "neptune.StatusIcon.iconLabel.success": "Gelukt:",
   "neptune.StatusIcon.iconLabel.warning": "Waarschuwing:",
   "neptune.Summary.statusDone": "Item klaar",
-  "neptune.Summary.statusNotDone": "Item te doen",
+  "neptune.Summary.statusNotDone": "Te doen-item",
   "neptune.Summary.statusPending": "Item in behandeling",
   "neptune.Table.actionHeader": "Actie",
   "neptune.Table.emptyData": "Geen resultaten gevonden",
@@ -44,7 +45,7 @@
   "neptune.Upload.csFailureText": "Uploaden mislukt. Probeer het opnieuw",
   "neptune.Upload.csSuccessText": "Uploaden voltooid!",
   "neptune.Upload.csTooLargeMessage": "Upload een bestand kleiner dan {maxSize} MB",
-  "neptune.Upload.csWrongTypeMessage": "Het bestandstype wordt niet ondersteund. Probeer het opnieuw met een ander bestand.",
+  "neptune.Upload.csWrongTypeMessage": "Het bestandstype wordt niet ondersteund. Probeer het opnieuw met een ander bestand",
   "neptune.Upload.psButtonText": "Annuleren",
   "neptune.Upload.psProcessingText": "Uploaden...",
   "neptune.Upload.retry": "Opnieuw proberen",
@@ -57,7 +58,7 @@
   "neptune.UploadButton.maximumFiles": "Maximaal {maxFiles} bestanden.",
   "neptune.UploadButton.uploadFile": "Bestand uploaden",
   "neptune.UploadButton.uploadFiles": "Bestanden uploaden",
-  "neptune.UploadInput.deleteModalBody": "Door dit bestand te verwijderen, wordt het uit ons systeem verwijderd.",
+  "neptune.UploadInput.deleteModalBody": "Als je dit bestand verwijdert, wordt het van ons systeem gewist.",
   "neptune.UploadInput.deleteModalCancelButtonText": "Annuleren",
   "neptune.UploadInput.deleteModalConfirmButtonText": "Verwijderen",
   "neptune.UploadInput.deleteModalTitle": "Weet je zeker dat je dit bestand wilt verwijderen?",

package/src/i18n/pl.json

@@ -21,12 +21,13 @@
   "neptune.Label.optional": "(opcjonalne)",
   "neptune.Link.opensInNewTab": "(otworzy się w nowej zakładce)",
   "neptune.MoneyInput.Select.placeholder": "Wybierz opcję...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Wpisz walutę lub kraj",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Wybierz walutę",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Wybierz opcję...",
+  "neptune.PhoneNumberInput.countryCodeLabel": "Numer kierunkowy",
+  "neptune.PhoneNumberInput.phoneNumberLabel": "Numer telefonu",
   "neptune.Select.searchPlaceholder": "Wyszukaj...",
   "neptune.SelectInput.noResultsFound": "Nie znaleziono wyników",
-  "neptune.SelectOption.action.label": "Wybierz",
-  "neptune.SelectOption.selected.action.label": "Zmień wybraną opcję",
   "neptune.StatusIcon.iconLabel.error": "Błąd:",
   "neptune.StatusIcon.iconLabel.information": "Informacje:",
   "neptune.StatusIcon.iconLabel.pending": "W toku:",

package/src/i18n/pt.json

@@ -21,12 +21,13 @@
   "neptune.Label.optional": "(Opcional)",
   "neptune.Link.opensInNewTab": "(abre em uma nova aba)",
   "neptune.MoneyInput.Select.placeholder": "Escolha uma opção...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Digite uma moeda ou país",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Selecione a moeda",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Escolha uma opção...",
+  "neptune.PhoneNumberInput.countryCodeLabel": "Código do país",
+  "neptune.PhoneNumberInput.phoneNumberLabel": "Número de telefone",
   "neptune.Select.searchPlaceholder": "Buscar...",
   "neptune.SelectInput.noResultsFound": "Nenhum resultado encontrado",
-  "neptune.SelectOption.action.label": "Selecionar",
-  "neptune.SelectOption.selected.action.label": "Altere a opção escolhida",
   "neptune.StatusIcon.iconLabel.error": "Erro:",
   "neptune.StatusIcon.iconLabel.information": "Informação:",
   "neptune.StatusIcon.iconLabel.pending": "Pendente:",

package/src/i18n/ro.json

@@ -21,12 +21,13 @@
   "neptune.Label.optional": "(Opțional)",
   "neptune.Link.opensInNewTab": "(se deschide într-o filă nouă)",
   "neptune.MoneyInput.Select.placeholder": "Selectează o opţiune...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Tastează o monedă sau țară",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Selectează moneda",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Selectează o opțiune...",
+  "neptune.PhoneNumberInput.countryCodeLabel": "Codul țării",
+  "neptune.PhoneNumberInput.phoneNumberLabel": "Număr de telefon",
   "neptune.Select.searchPlaceholder": "Caută...",
   "neptune.SelectInput.noResultsFound": "Nu s-a găsit niciun rezultat",
-  "neptune.SelectOption.action.label": "Alege",
-  "neptune.SelectOption.selected.action.label": "Schimbă opțiunea aleasă",
   "neptune.StatusIcon.iconLabel.error": "Eroare:",
   "neptune.StatusIcon.iconLabel.information": "Informații:",
   "neptune.StatusIcon.iconLabel.pending": "În așteptare:",

package/src/i18n/ru.json

@@ -21,12 +21,13 @@
   "neptune.Label.optional": "(необязательно)",
   "neptune.Link.opensInNewTab": "(откроется в новой вкладке)",
   "neptune.MoneyInput.Select.placeholder": "Выберите вариант...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Введите валюту или страну",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Выберите валюту",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Выберите вариант...",
+  "neptune.PhoneNumberInput.countryCodeLabel": "Код страны",
+  "neptune.PhoneNumberInput.phoneNumberLabel": "Номер телефона",
   "neptune.Select.searchPlaceholder": "Поиск...",
   "neptune.SelectInput.noResultsFound": "Ничего не найдено",
-  "neptune.SelectOption.action.label": "Выбрать",
-  "neptune.SelectOption.selected.action.label": "Изменить выбранный вариант",
   "neptune.StatusIcon.iconLabel.error": "Ошибка:",
   "neptune.StatusIcon.iconLabel.information": "Информация:",
   "neptune.StatusIcon.iconLabel.pending": "В ожидании:",

package/src/i18n/th.json

@@ -21,12 +21,13 @@
   "neptune.Label.optional": "(ไม่บังคับ)",
   "neptune.Link.opensInNewTab": "(เปิดในแท็บใหม่)",
   "neptune.MoneyInput.Select.placeholder": "เลือกตัวเลือก...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "ป้อนสกุลเงินหรือประเทศ",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "เลือกสกุลเงิน",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "เลือกตัวเลือก...",
+  "neptune.PhoneNumberInput.countryCodeLabel": "รหัสประเทศ",
+  "neptune.PhoneNumberInput.phoneNumberLabel": "หมายเลขโทรศัพท์",
   "neptune.Select.searchPlaceholder": "ค้นหา...",
   "neptune.SelectInput.noResultsFound": "ไม่พบผลลัพธ์",
-  "neptune.SelectOption.action.label": "เลือก",
-  "neptune.SelectOption.selected.action.label": "เปลี่ยนตัวเลือกที่เลือกไว้",
   "neptune.StatusIcon.iconLabel.error": "ข้อผิดพลาด:",
   "neptune.StatusIcon.iconLabel.information": "ข้อมูล:",
   "neptune.StatusIcon.iconLabel.pending": "รอดำเนินการ:",

package/src/i18n/tr.json

@@ -21,12 +21,13 @@
   "neptune.Label.optional": "(İsteğe bağlı)",
   "neptune.Link.opensInNewTab": "(yeni sekmede açılır)",
   "neptune.MoneyInput.Select.placeholder": "Bir seçenek seçin...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Bir para birimi veya ülke girin",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Para birimi seçin",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Bir seçenek seçin...",
+  "neptune.PhoneNumberInput.countryCodeLabel": "Ülke kodu",
+  "neptune.PhoneNumberInput.phoneNumberLabel": "Telefon numarası",
   "neptune.Select.searchPlaceholder": "Ara...",
   "neptune.SelectInput.noResultsFound": "Sonuç bulunamadı",
-  "neptune.SelectOption.action.label": "Seç",
-  "neptune.SelectOption.selected.action.label": "Seçilen opsiyonu değiştir",
   "neptune.StatusIcon.iconLabel.error": "Hata:",
   "neptune.StatusIcon.iconLabel.information": "Bilgi:",
   "neptune.StatusIcon.iconLabel.pending": "Bekliyor:",

package/src/i18n/zh-CN.json

@@ -21,12 +21,13 @@
   "neptune.Label.optional": "（可选）",
   "neptune.Link.opensInNewTab": "（在新标签页中打开）",
   "neptune.MoneyInput.Select.placeholder": "请选择...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "输入货币或国家/地区",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "选择货币",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "选择其中一项...",
+  "neptune.PhoneNumberInput.countryCodeLabel": "国家/地区代码",
+  "neptune.PhoneNumberInput.phoneNumberLabel": "电话号码",
   "neptune.Select.searchPlaceholder": "搜索",
   "neptune.SelectInput.noResultsFound": "找不到结果",
-  "neptune.SelectOption.action.label": "选择",
-  "neptune.SelectOption.selected.action.label": "更改所选选项",
   "neptune.StatusIcon.iconLabel.error": "错误:",
   "neptune.StatusIcon.iconLabel.information": "信息:",
   "neptune.StatusIcon.iconLabel.pending": "待处理:",

package/src/i18n/zh-HK.json

@@ -21,12 +21,13 @@
   "neptune.Label.optional": "（可選）",
   "neptune.Link.opensInNewTab": "（在新分頁中開啟）",
   "neptune.MoneyInput.Select.placeholder": "選擇一個選項…",
+  "neptune.MoneyInput.Select.searchPlaceholder": "輸入貨幣或國家/地區",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "選擇貨幣",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "選擇其中一項…",
+  "neptune.PhoneNumberInput.countryCodeLabel": "國家/地區代碼",
+  "neptune.PhoneNumberInput.phoneNumberLabel": "電話號碼",
   "neptune.Select.searchPlaceholder": "搜尋…",
   "neptune.SelectInput.noResultsFound": "找不到任何結果",
-  "neptune.SelectOption.action.label": "選擇",
-  "neptune.SelectOption.selected.action.label": "更改已選選項",
   "neptune.StatusIcon.iconLabel.error": "錯誤:",
   "neptune.StatusIcon.iconLabel.information": "資訊:",
   "neptune.StatusIcon.iconLabel.pending": "處理中:",

package/src/image/Image.spec.tsx

@@ -1,7 +1,7 @@
 import * as useHasIntersectedUtils from '../common/hooks/useHasIntersected/useHasIntersected';
 import { render, fireEvent, screen } from '../test-utils';
 
-import { EmptyTransparentImage, ImageProps } from './Image';
+import { ImageProps } from './Image';
 
 import Image from '.';
 
@@ -32,14 +32,14 @@ describe('Image', () => {
   });
 
   describe('when lazy loading is enabled', () => {
-    it('renders the image with EmptyTransparentImage if element is not visible', () => {
+    it('renders the image with actual src even if element is not visible', () => {
       jest.spyOn(useHasIntersectedUtils, 'useHasIntersected').mockReturnValue([false]);
       render(<Image {...props} />);
 
       const image: HTMLImageElement = screen.getByRole('img');
 
       expect(image).toBeInTheDocument();
-      expect(image.src).toStrictEqual(EmptyTransparentImage);
+      expect(image.src).toStrictEqual(props.src);
     });
 
     it('renders the image with src if element is visible', () => {

package/src/image/Image.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { useRef } from 'react';
+import { useRef, useCallback } from 'react';
 
 import { useHasIntersected } from '../common/hooks';
 
@@ -16,9 +16,6 @@ export interface ImageProps {
   shrink?: boolean;
 }
 
-export const EmptyTransparentImage =
-  'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
-
 const Image = ({
   id,
   src,
@@ -33,20 +30,21 @@ const Image = ({
 }: ImageProps) => {
   const elementReference = useRef<HTMLImageElement>(null);
   const [hasIntersected] = useHasIntersected({ elRef: elementReference, loading });
-  let imageSource = src;
-  let imageOnLoad = onLoad;
 
-  if (loading === 'lazy' && !hasIntersected) {
-    imageSource = EmptyTransparentImage;
-    imageOnLoad = undefined;
-  }
+  // Internal onLoad handler that calls user onLoad only if hasIntersected is true
+  const handleLoad = useCallback(() => {
+    if (hasIntersected && onLoad) {
+      onLoad();
+    }
+  }, [hasIntersected, onLoad]);
 
   return (
     <img
       ref={elementReference}
       id={id}
       alt={alt}
-      src={imageSource}
+      src={src}
+      loading={loading}
       className={clsx([
         'tw-image',
         {
@@ -56,7 +54,7 @@ const Image = ({
         className,
       ])}
       role={role}
-      onLoad={imageOnLoad}
+      onLoad={handleLoad}
       onError={onError}
     />
   );

package/src/index.ts

@@ -5,7 +5,6 @@
  */
 export type { AccordionItem, AccordionProps } from './accordion';
 export type { ActionOptionProps } from './actionOption';
-export type { SelectOptionProps, SelectOptionValue, SelectOptiopsSection } from './selectOption';
 export type { AlertAction, AlertProps, AlertType } from './alert';
 export type { AvatarProps } from './avatar';
 export type { AvatarViewProps } from './avatarView';
@@ -116,7 +115,6 @@ export type {
 export { default as Accordion } from './accordion';
 export { default as ActionButton } from './actionButton';
 export { default as ActionOption } from './actionOption';
-export { default as SelectOption } from './selectOption';
 export { default as Alert } from './alert';
 export { default as Avatar } from './avatar';
 export { default as AvatarView } from './avatarView';

package/src/legacylistItem/LegacyListItem.story.tsx

@@ -6,11 +6,11 @@ import { Button, IconButton } from '..';
 import AvatarView from '../avatarView';
 import Info from '../info';
 import Title from '../title/Title';
-import ListItem, { List } from '.';
+import LegacyListItem, { List } from '.';
 
 export default {
-  component: ListItem,
-  title: 'Other/ListItem',
+  component: LegacyListItem,
+  title: 'Other/LegacyListItem',
   tags: ['autodocs'],
 };
 
@@ -18,8 +18,8 @@ const Template = ({
   title = 'Wise',
   value = 'We’re building the world’s most international account',
   ...props
-}: Partial<ComponentProps<typeof ListItem>>) => {
-  return <ListItem title={title} value={value} {...props} />;
+}: Partial<ComponentProps<typeof LegacyListItem>>) => {
+  return <LegacyListItem title={title} value={value} {...props} />;
 };
 
 export const Basic = () => {

package/src/legacylistItem/LegacyListItem.tests.story.tsx

@@ -1,11 +1,11 @@
 import { FastFlag } from '@transferwise/icons';
 import Button from '../button';
 import AvatarView from '../avatarView';
-import ListItem, { List, type LegacyListItemProps } from '.';
+import LegacyListItem, { List, type LegacyListItemProps } from '.';
 
 export default {
-  component: ListItem,
-  title: 'Other/ListItem/tests',
+  component: LegacyListItem,
+  title: 'Other/LegacyListItem/tests',
 };
 
 export const LongText = () => {
@@ -21,13 +21,13 @@ export const LongText = () => {
   return (
     <div style={{ width: '35rem' }}>
       <List>
-        <ListItem
+        <LegacyListItem
           {...sharedProps}
           title="Default behaviour"
           value="This is a test of a long word dontbreakme dontbreakme dontbreakme breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme word."
         />
 
-        <ListItem
+        <LegacyListItem
           {...sharedProps}
           title="Wrapping the long word with a 'span.text-word-break'"
           value={
@@ -41,7 +41,7 @@ export const LongText = () => {
           }
         />
 
-        <ListItem
+        <LegacyListItem
           {...sharedProps}
           title="Using '&amp;shy;' HTML entitty"
           value="This is a test of a a very long word dontbreakme dontbreakme dontbreakme break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me word."

package/src/main.css

@@ -1402,6 +1402,7 @@
 }
 .np-circular-btn-primary-default .np-circular-btn-label,
 .np-circular-btn-secondary-default .np-circular-btn-label {
+  text-align: center;
   color: var(--color-interactive-primary);
 }
 .np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover,
@@ -1788,50 +1789,6 @@ button.np-option {
     margin-top: -3px;
   }
 }
-.np-select-option {
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  padding: 16px;
-  padding: var(--size-16);
-}
-.np-select-option-placeholder {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-select-option-placeholder:not(.disabled):hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.np-select-option-placeholder:not(.disabled):focus,
-.np-select-option-placeholder:not(.disabled):active {
-  background-color: var(--color-background-neutral-active);
-}
-.np-select-option-selected {
-  border: 1px solid #c9cbce;
-  border: 1px solid var(--color-interactive-secondary);
-}
-.np-select-option-list {
-  max-height: 350px;
-  overflow-y: auto;
-}
-.np-select-option-list > .np-section {
-  margin-top: 0;
-}
-.has-error * .np-select-option {
-  --ring-outline-color: var(--color-sentiment-negative);
-  --ring-outline-width: 3px;
-  --ring-outline-offset: calc(-1 * var(--ring-outline-width));
-  outline: var(--ring-outline-color) solid 3px;
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: calc(-1 * 3px);
-  outline-offset: var(--ring-outline-offset);
-}
-.has-error * .np-select-option:focus {
-  outline: none;
-}
-.has-error * .np-select-option:focus-visible {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-}
 .np-panel__content {
   opacity: 0;
   visibility: hidden;
@@ -1912,6 +1869,19 @@ button.np-option {
 .tw-date label {
   width: 100%;
 }
+.tw-date .tw-date--year label {
+  margin-bottom: 0;
+}
+.tw-date .tw-date--year,
+.tw-date .tw-date--month,
+.tw-date .tw-date--day {
+  margin-bottom: 0;
+}
+@media (min-width: 576px) {
+  .np-theme-personal .tw-date label {
+    margin-bottom: 0;
+  }
+}
 .tw-date-lookup-menu {
   width: 400px;
 }
@@ -6243,7 +6213,8 @@ html:not([dir="rtl"]) .np-navigation-option {
   padding-left: var(--size-16);
 }
 .np-upload-input__item .np-upload-input-errors > li::before {
-  content: '•';
+  content: '•' ;
+  content: '•' / '';
   position: absolute;
   display: block;
   left: 0;

package/src/main.less

@@ -20,7 +20,6 @@
 @import "./common/card/Card.less";
 @import "./common/closeButton/CloseButton.less";
 @import "./common/Option/Option.less";
-@import "./selectOption/SelectOption.less";
 @import "./common/panel/Panel.less";
 @import "./common/RadioButton/RadioButton.less";
 @import "./dateInput/DateInput.less";

package/src/moneyInput/MoneyInput.messages.ts

@@ -5,6 +5,11 @@ export default defineMessages({
     id: 'neptune.MoneyInput.Select.placeholder',
     defaultMessage: 'Select an option...',
   },
+  searchPlaceholder: {
+    id: 'neptune.MoneyInput.Select.searchPlaceholder',
+    defaultMessage: 'Type a currency or country',
+    description: 'Default placeholder text for the search input in the currency selector.',
+  },
   selectCurrencyLabel: {
     id: 'neptune.MoneyInput.Select.selectCurrencyLabel',
     defaultMessage: 'Select currency',

package/src/moneyInput/MoneyInput.spec.tsx

@@ -316,11 +316,21 @@ describe('Money Input', () => {
     });
   });
 
-  it('uses the search placeholder', async () => {
-    const searchPlaceholder = 'custom placeholder';
-    customRender({ searchPlaceholder });
-    await openDropdown();
-    expect(screen.getByRole('combobox', { name: searchPlaceholder })).toBeInTheDocument();
+  describe('search placeholder', () => {
+    it('uses default value', async () => {
+      customRender();
+      await openDropdown();
+      expect(
+        screen.getByRole('combobox', { name: messages.searchPlaceholder.defaultMessage }),
+      ).toBeInTheDocument();
+    });
+
+    it('allows for custom values', async () => {
+      const searchPlaceholder = 'custom placeholder';
+      customRender({ searchPlaceholder });
+      await openDropdown();
+      expect(screen.getByRole('combobox', { name: searchPlaceholder })).toBeInTheDocument();
+    });
   });
 
   it('calls onSearchChange', async () => {
@@ -465,4 +475,31 @@ describe('Money Input', () => {
     expect(triggerLabel).toBeTruthy();
     expect(screen.getByRole('listbox', { name: triggerLabel ?? '' })).toBeInTheDocument();
   });
+
+  it('renders custom action button in dropdown footer and calls onCustomAction', async () => {
+    const onCustomAction = jest.fn();
+    render(
+      <MoneyInput
+        currencies={[
+          { value: 'USD', label: 'US Dollar', currency: 'usd' },
+          { value: 'EUR', label: 'Euro', currency: 'eur' },
+        ]}
+        selectedCurrency={{ value: 'USD', label: 'US Dollar', currency: 'usd' }}
+        amount={100}
+        customActionLabel="Go to Wishes"
+        onCurrencyChange={jest.fn()}
+        onAmountChange={jest.fn()}
+        onCustomAction={onCustomAction}
+      />,
+    );
+
+    const trigger = screen.getByRole('combobox', { name: /select currency/i });
+    await userEvent.click(trigger);
+
+    const customActionBtn = await screen.findByRole('button', { name: /go to wishes/i });
+    expect(customActionBtn).toBeInTheDocument();
+
+    await userEvent.click(customActionBtn);
+    expect(onCustomAction).toHaveBeenCalled();
+  });
 });

package/src/moneyInput/MoneyInput.story.tsx

@@ -5,6 +5,7 @@ import { useState } from 'react';
 
 import MoneyInput, { CurrencyOptionItem } from '.';
 import { Field } from '../field/Field';
+import translations from '../i18n/en.json';
 
 export default {
   component: MoneyInput,
@@ -27,9 +28,19 @@ export default {
   args: {
     amount: 1000,
     id: 'moneyInput',
+    searchPlaceholder: '',
     onAmountChange: () => {},
     onCurrencyChange: () => {},
   },
+  argTypes: {
+    searchPlaceholder: {
+      table: {
+        defaultValue: {
+          summary: `"${translations['neptune.MoneyInput.Select.searchPlaceholder']}"`,
+        },
+      },
+    },
+  },
   tags: ['autodocs'],
 } satisfies Meta<typeof MoneyInput>;
 
@@ -128,7 +139,6 @@ export const MultipleCurrencies: Story = {
       console.log('Custom action');
     },
     selectedCurrency: exampleCurrency.usd,
-    searchPlaceholder: 'Type a currency / country',
     id: 'moneyInput',
   },
 };
@@ -143,7 +153,6 @@ export const BalanceCurrencies: Story = {
       exampleBalanceCurrency.gbp,
     ],
     selectedCurrency: exampleBalanceCurrency.eur,
-    searchPlaceholder: 'Type a currency / country',
   },
 };
 

package/src/moneyInput/MoneyInput.tsx

@@ -262,11 +262,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
     this.props.onCurrencyChange?.(value);
   };
 
-  handleCustomAction = () => {
-    this.handleSearchChange('');
-    this.props.onCustomAction?.();
-  };
-
   handleSearchChange = (searchQuery: string) => {
     this.setState({ searchQuery });
     this.props.onSearchChange?.({
@@ -413,7 +408,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
                 this.props.onCustomAction
                   ? () => (
                       // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-                      <div role="button" tabIndex={0} onClick={this.handleCustomAction}>
+                      <div role="button" tabIndex={0} onClick={this.props.onCustomAction}>
                         {this.props.customActionLabel}
                       </div>
                     )
@@ -421,7 +416,10 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
               }
               placeholder={this.props.intl.formatMessage(messages.selectPlaceholder)}
               filterable
-              filterPlaceholder={this.props.searchPlaceholder}
+              filterPlaceholder={
+                this.props.searchPlaceholder ||
+                this.props.intl.formatMessage(messages.searchPlaceholder)
+              }
               disabled={disabled}
               size={size}
               onChange={this.handleSelectChange}

package/src/phoneNumberInput/PhoneNumberInput.messages.ts

@@ -5,4 +5,12 @@ export default defineMessages({
     id: 'neptune.PhoneNumberInput.SelectInput.placeholder',
     defaultMessage: 'Select an option...',
   },
+  countryCodeLabel: {
+    id: 'neptune.PhoneNumberInput.countryCodeLabel',
+    defaultMessage: 'Country code',
+  },
+  phoneNumberLabel: {
+    id: 'neptune.PhoneNumberInput.phoneNumberLabel',
+    defaultMessage: 'Phone number',
+  },
 });