@transferwise/components 46.97.4 → 46.98.0

package/src/i18n/de.json

@@ -21,8 +21,11 @@
   "neptune.Label.optional": "(Optional)",
   "neptune.Link.opensInNewTab": "(wird in einem neuen Tab geöffnet)",
   "neptune.MoneyInput.Select.placeholder": "Wähle eine der Möglichkeiten aus...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Gib eine Währung oder ein Land ein",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Wähle eine Währung",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Wähle eine Option...",
+  "neptune.PhoneNumberInput.countryCodeLabel": "Ländercode",
+  "neptune.PhoneNumberInput.phoneNumberLabel": "Telefonnummer",
   "neptune.Select.searchPlaceholder": "Wird gesucht...",
   "neptune.SelectInput.noResultsFound": "Keine Ergebnisse gefunden",
   "neptune.SelectOption.action.label": "Auswählen",

package/src/i18n/en.json

@@ -21,8 +21,11 @@
   "neptune.Label.optional": "(Optional)",
   "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "Select an option...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Type a currency or country",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Select currency",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
+  "neptune.PhoneNumberInput.countryCodeLabel": "Country code",
+  "neptune.PhoneNumberInput.phoneNumberLabel": "Phone number",
   "neptune.Select.searchPlaceholder": "Search...",
   "neptune.SelectInput.noResultsFound": "No results found",
   "neptune.SelectOption.action.label": "Choose",

package/src/i18n/es.json

@@ -21,8 +21,11 @@
   "neptune.Label.optional": "(Opcional)",
   "neptune.Link.opensInNewTab": "(se abre en una pestaña nueva)",
   "neptune.MoneyInput.Select.placeholder": "Selecciona una opción...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Indica una divisa o país",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Selecciona una divisa",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Selecciona una opción...",
+  "neptune.PhoneNumberInput.countryCodeLabel": "Código de país",
+  "neptune.PhoneNumberInput.phoneNumberLabel": "Número de teléfono",
   "neptune.Select.searchPlaceholder": "Buscar...",
   "neptune.SelectInput.noResultsFound": "No se han encontrado resultados",
   "neptune.SelectOption.action.label": "Elegir",

package/src/i18n/fr.json

@@ -21,8 +21,11 @@
   "neptune.Label.optional": "(facultatif)",
   "neptune.Link.opensInNewTab": "(ouvre dans un nouvel onglet)",
   "neptune.MoneyInput.Select.placeholder": "Sélectionner une option...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Saisissez une devise ou un pays",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Sélectionnez une devise",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Sélectionnez une option…",
+  "neptune.PhoneNumberInput.countryCodeLabel": "Code pays",
+  "neptune.PhoneNumberInput.phoneNumberLabel": "Numéro de téléphone",
   "neptune.Select.searchPlaceholder": "Recherche...",
   "neptune.SelectInput.noResultsFound": "Aucun résultat trouvé",
   "neptune.SelectOption.action.label": "Sélectionner",

package/src/i18n/hu.json

@@ -21,8 +21,11 @@
   "neptune.Label.optional": "(Válaszható)",
   "neptune.Link.opensInNewTab": "(új lapon nyílik meg)",
   "neptune.MoneyInput.Select.placeholder": "Válassz ki egy lehetőséget...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Írj be egy pénznemet vagy országot",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Pénznem kiválasztása",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Válassz ki egy lehetőséget...",
+  "neptune.PhoneNumberInput.countryCodeLabel": "Országazonosító",
+  "neptune.PhoneNumberInput.phoneNumberLabel": "Telefonszám",
   "neptune.Select.searchPlaceholder": "Keresés...",
   "neptune.SelectInput.noResultsFound": "Nincs találat",
   "neptune.SelectOption.action.label": "Kiválasztás",

package/src/i18n/id.json

@@ -21,8 +21,11 @@
   "neptune.Label.optional": "(Opsional)",
   "neptune.Link.opensInNewTab": "(terbuka di tab baru)",
   "neptune.MoneyInput.Select.placeholder": "Pilih opsi...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Ketik nama mata uang atau negara",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Pilih mata uang",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Pilih opsi...",
+  "neptune.PhoneNumberInput.countryCodeLabel": "Kode negara",
+  "neptune.PhoneNumberInput.phoneNumberLabel": "Nomor telepon",
   "neptune.Select.searchPlaceholder": "Cari...",
   "neptune.SelectInput.noResultsFound": "Hasil tidak ditemukan",
   "neptune.SelectOption.action.label": "Pilih",

package/src/i18n/it.json

@@ -21,8 +21,11 @@
   "neptune.Label.optional": "(Facoltativo)",
   "neptune.Link.opensInNewTab": "(si apre in una nuova scheda)",
   "neptune.MoneyInput.Select.placeholder": "Seleziona un'opzione...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Inserisci una valuta o un paese",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Scegli la valuta",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Seleziona un'opzione...",
+  "neptune.PhoneNumberInput.countryCodeLabel": "Prefisso",
+  "neptune.PhoneNumberInput.phoneNumberLabel": "Numero di telefono",
   "neptune.Select.searchPlaceholder": "Cerca...",
   "neptune.SelectInput.noResultsFound": "Nessun risultato trovato",
   "neptune.SelectOption.action.label": "Scegli",

package/src/i18n/ja.json

@@ -21,8 +21,11 @@
   "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": "選択してください",

package/src/i18n/nl.json

@@ -21,8 +21,11 @@
   "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",
@@ -33,7 +36,7 @@
   "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 +47,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 +60,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,8 +21,11 @@
   "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",

package/src/i18n/pt.json

@@ -21,8 +21,11 @@
   "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",

package/src/i18n/ro.json

@@ -21,8 +21,11 @@
   "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",

package/src/i18n/ru.json

@@ -21,8 +21,11 @@
   "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": "Выбрать",

package/src/i18n/th.json

@@ -21,8 +21,11 @@
   "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": "เลือก",

package/src/i18n/tr.json

@@ -21,8 +21,11 @@
   "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ç",

package/src/i18n/zh-CN.json

@@ -21,8 +21,11 @@
   "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": "选择",

package/src/i18n/zh-HK.json

@@ -21,8 +21,11 @@
   "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": "選擇",

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/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx

@@ -6,7 +6,7 @@ import { Meta, type StoryObj } from '@storybook/react';
 
 type Story = StoryObj<InputWithDisplayFormatProps & { label: string }>;
 
-const meta = {
+const meta: Meta<typeof InputWithDisplayFormat> = {
   title: 'Forms/InputWithDisplayFormat',
   component: InputWithDisplayFormat,
   render: function Render({ label, ...args }: InputWithDisplayFormatProps & FieldProps) {

package/src/inputs/Input.css

@@ -55,6 +55,11 @@
   font-weight: var(--font-weight-regular);
   height: 32px !important;
   height: var(--size-32) !important;
+}@media (max-width: 320px) {
+  .np-form-control--size-sm {
+    height: 64px !important;
+    height: var(--size-64) !important;
+  }
 }.np-form-control--size-md {
   font-weight: 400;
   font-weight: var(--font-weight-regular);
@@ -64,6 +69,11 @@
   letter-spacing: -0.011em;
   height: 48px !important;
   height: var(--size-48) !important;
+}@media (max-width: 320px) {
+  .np-form-control--size-md {
+    height: 72px !important;
+    height: var(--size-72) !important;
+  }
 }.np-form-control--size-lg {
   margin: 0;
   color: #37517e;

package/src/inputs/SelectInput.tsx

@@ -14,7 +14,7 @@ import {
   useState,
 } from 'react';
 import { useIntl } from 'react-intl';
-import { Virtualizer } from 'virtua';
+import { Virtualizer, type VirtualizerHandle } from 'virtua';
 
 import { useEffectEvent } from '../common/hooks/useEffectEvent';
 import { useScreenSize } from '../common/hooks/useScreenSize';
@@ -553,6 +553,7 @@ function SelectInputOptions<T = string>({
   listBoxLabelledBy,
 }: SelectInputOptionsProps<T>) {
   const intl = useIntl();
+  const virtualiserHandlerRef = useRef<VirtualizerHandle>(null);
   const controllerRef = filterable ? searchInputRef : listboxRef;
   const [initialRender, setInitialRender] = useState(true);
 
@@ -711,16 +712,24 @@ function SelectInputOptions<T = string>({
             filteredItems.map((_, index) => getItemNode(index))
           ) : (
             <Virtualizer
+              ref={virtualiserHandlerRef}
               key={needle}
               count={filteredItems.length}
               keepMounted={mountedIndexes}
               scrollRef={listboxRef} // `VList` doesn't expose this
-              onRangeChange={(startIndex, endIndex) => {
+              onScroll={async () => {
+                if (!virtualiserHandlerRef.current) return;
+
+                const startIndex = virtualiserHandlerRef.current.findStartIndex();
+                const endIndex = virtualiserHandlerRef.current.findStartIndex();
+
                 setMountedIndexes((prevMountedIndexes) => {
                   const indexes = new Set(prevMountedIndexes);
+
                   for (let index = startIndex; index <= endIndex; index += 1) {
                     indexes.add(index);
                   }
+
                   return [...indexes].sort((a, b) => a - b);
                 });
               }}

package/src/inputs/TextArea.css

@@ -55,6 +55,11 @@
   font-weight: var(--font-weight-regular);
   height: 32px !important;
   height: var(--size-32) !important;
+}@media (max-width: 320px) {
+  .np-form-control--size-sm {
+    height: 64px !important;
+    height: var(--size-64) !important;
+  }
 }.np-form-control--size-md {
   font-weight: 400;
   font-weight: var(--font-weight-regular);
@@ -64,6 +69,11 @@
   letter-spacing: -0.011em;
   height: 48px !important;
   height: var(--size-48) !important;
+}@media (max-width: 320px) {
+  .np-form-control--size-md {
+    height: 72px !important;
+    height: var(--size-72) !important;
+  }
 }.np-form-control--size-lg {
   margin: 0;
   color: #37517e;

package/src/inputs/_common.less

@@ -51,11 +51,17 @@
   &--size-sm {
     .np-text-body-default;
     height: var(--size-32) !important;
+    @media (--screen-400-zoom) {
+      height: var(--size-64) !important;
+    }
   }
 
   &--size-md {
     .np-text-body-large;
     height: var(--size-48) !important;
+    @media (--screen-400-zoom) {
+      height: var(--size-72) !important;
+    }
   }
 
   &--size-lg {

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,
@@ -1909,8 +1910,9 @@ button.np-option {
   border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }
-.tw-date label {
+.np-theme-personal .tw-date label {
   width: 100%;
+  margin-bottom: 0;
 }
 .tw-date-lookup-menu {
   width: 400px;
@@ -2568,6 +2570,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   height: 32px !important;
   height: var(--size-32) !important;
 }
+@media (max-width: 320px) {
+  .np-form-control--size-sm {
+    height: 64px !important;
+    height: var(--size-64) !important;
+  }
+}
 .np-form-control--size-md {
   font-weight: 400;
   font-weight: var(--font-weight-regular);
@@ -2578,6 +2586,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   height: 48px !important;
   height: var(--size-48) !important;
 }
+@media (max-width: 320px) {
+  .np-form-control--size-md {
+    height: 72px !important;
+    height: var(--size-72) !important;
+  }
+}
 .np-form-control--size-lg {
   margin: 0;
   color: #37517e;
@@ -5966,6 +5980,9 @@ html:not([dir="rtl"]) .np-navigation-option {
 .upload-error-message .alert {
   min-width: 100px;
 }
+.np-theme-personal .droppable-dropping .droppable-complete-card {
+  display: none;
+}
 .np-upload-input__upload-button {
   position: relative;
   padding: 16px;
@@ -6228,7 +6245,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/markdown/Markdown.tsx

@@ -1,4 +1,5 @@
-import commonmark, { Node as MarkdownNode } from 'commonmark';
+import * as commonmark from 'commonmark';
+import type { Node as MarkdownNode } from 'commonmark';
 
 import { MarkdownNodeType } from '../common';
 import { logActionRequired } from '../utilities';

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',
   },
 };