@transferwise/components 45.19.6 → 45.21.0

package/src/i18n/pl.json

@@ -1,14 +1,22 @@
 {
+  "neptune.Button.loadingAriaLabel": "ładowanie",
   "neptune.Chips.ariaLabel": "Wyczyść {choice}",
   "neptune.ClearButton.ariaLabel": "Wyczyść",
   "neptune.CloseButton.ariaLabel": "Zamknij",
   "neptune.DateInput.day.label": "Dzień",
   "neptune.DateInput.month.label": "Miesiąc",
   "neptune.DateInput.year.label": "Rok",
+  "neptune.DateLookup.day": "dzień",
+  "neptune.DateLookup.goTo20YearView": "Przejdź do widoku 20-letniego",
+  "neptune.DateLookup.month": "miesiąc",
+  "neptune.DateLookup.next": "następny",
+  "neptune.DateLookup.previous": "poprzedni",
+  "neptune.DateLookup.selected": "wybrano",
+  "neptune.DateLookup.twentyYears": "20 lat",
+  "neptune.DateLookup.year": "rok",
+  "neptune.FlowNavigation.back": "wróć do poprzedniego kroku",
+  "neptune.Link.opensInNewTab": "(otworzy się w nowej zakładce)",
   "neptune.MoneyInput.Select.placeholder": "Wybierz opcję...",
-  "neptune.Pagination.ariaLabel": "Nawigacja w paginacji",
-  "neptune.PaginationLink.ariaLabel.active": "Przejdź do strony {pageNumber}",
-  "neptune.PaginationLink.ariaLabel.inactive": "Obecna strona, strona {pageNumber}",
   "neptune.Select.searchPlaceholder": "Wyszukaj...",
   "neptune.Summary.statusDone": "Czynność wykonana",
   "neptune.Summary.statusNotDone": "Czynność do wykonania",

package/src/i18n/pt.json

@@ -1,14 +1,22 @@
 {
+  "neptune.Button.loadingAriaLabel": "carregando",
   "neptune.Chips.ariaLabel": "Remover {choice}",
   "neptune.ClearButton.ariaLabel": "Remover",
   "neptune.CloseButton.ariaLabel": "Fechar",
   "neptune.DateInput.day.label": "Dia",
   "neptune.DateInput.month.label": "Mês",
   "neptune.DateInput.year.label": "Ano",
+  "neptune.DateLookup.day": "dia",
+  "neptune.DateLookup.goTo20YearView": "Go to 20 year view",
+  "neptune.DateLookup.month": "mês",
+  "neptune.DateLookup.next": "próximo",
+  "neptune.DateLookup.previous": "anterior",
+  "neptune.DateLookup.selected": "selecionada",
+  "neptune.DateLookup.twentyYears": "20 anos",
+  "neptune.DateLookup.year": "ano",
+  "neptune.FlowNavigation.back": "back to previous step",
+  "neptune.Link.opensInNewTab": "(abrir a página em uma nova aba)",
   "neptune.MoneyInput.Select.placeholder": "Escolha uma opção...",
-  "neptune.Pagination.ariaLabel": "Navegação pelas páginas",
-  "neptune.PaginationLink.ariaLabel.active": "Ir para a página {pageNumber}",
-  "neptune.PaginationLink.ariaLabel.inactive": "Página atual, página {pageNumber}",
   "neptune.Select.searchPlaceholder": "Buscar...",
   "neptune.Summary.statusDone": "Pronto",
   "neptune.Summary.statusNotDone": "Não iniciado",

package/src/i18n/ro.json

@@ -1,14 +1,22 @@
 {
+  "neptune.Button.loadingAriaLabel": "se încarcă",
   "neptune.Chips.ariaLabel": "Șterge {choice}",
   "neptune.ClearButton.ariaLabel": "Elimină",
   "neptune.CloseButton.ariaLabel": "Închide",
   "neptune.DateInput.day.label": "Zi",
   "neptune.DateInput.month.label": "Lună",
   "neptune.DateInput.year.label": "An",
+  "neptune.DateLookup.day": "zi",
+  "neptune.DateLookup.goTo20YearView": "Accesează vizualizarea pe 20 de ani",
+  "neptune.DateLookup.month": "luna",
+  "neptune.DateLookup.next": "înainte",
+  "neptune.DateLookup.previous": "precedenta",
+  "neptune.DateLookup.selected": "selectată",
+  "neptune.DateLookup.twentyYears": "20 de ani",
+  "neptune.DateLookup.year": "anul",
+  "neptune.FlowNavigation.back": "înapoi la pasul anterior",
+  "neptune.Link.opensInNewTab": "(se deschide într-o filă nouă)",
   "neptune.MoneyInput.Select.placeholder": "Selectează o opţiune...",
-  "neptune.Pagination.ariaLabel": "Navigare prin pagină",
-  "neptune.PaginationLink.ariaLabel.active": "Du-te la pagina {pageNumber}",
-  "neptune.PaginationLink.ariaLabel.inactive": "Pagina curentă, pagina {pageNumber}",
   "neptune.Select.searchPlaceholder": "Caută...",
   "neptune.Summary.statusDone": "Finalizat",
   "neptune.Summary.statusNotDone": "De făcut",

package/src/i18n/ru.json

@@ -1,14 +1,22 @@
 {
+  "neptune.Button.loadingAriaLabel": "загрузка",
   "neptune.Chips.ariaLabel": "Очистить {choice}",
   "neptune.ClearButton.ariaLabel": "Очистить",
   "neptune.CloseButton.ariaLabel": "Закрыть",
   "neptune.DateInput.day.label": "День",
   "neptune.DateInput.month.label": "Месяц",
   "neptune.DateInput.year.label": "Год",
+  "neptune.DateLookup.day": "день",
+  "neptune.DateLookup.goTo20YearView": "Перейти к обзору 20 лет",
+  "neptune.DateLookup.month": "месяц",
+  "neptune.DateLookup.next": "далее",
+  "neptune.DateLookup.previous": "предыдущий",
+  "neptune.DateLookup.selected": "выбрано",
+  "neptune.DateLookup.twentyYears": "20 лет",
+  "neptune.DateLookup.year": "год",
+  "neptune.FlowNavigation.back": "вернуться к предыдущему шагу",
+  "neptune.Link.opensInNewTab": "(откроется в новой вкладке)",
   "neptune.MoneyInput.Select.placeholder": "Выберите вариант...",
-  "neptune.Pagination.ariaLabel": "Постраничная навигация",
-  "neptune.PaginationLink.ariaLabel.active": "Перейти на страницу {pageNumber}",
-  "neptune.PaginationLink.ariaLabel.inactive": "Текущая страница, страница {pageNumber}",
   "neptune.Select.searchPlaceholder": "Поиск...",
   "neptune.Summary.statusDone": "Этап завершен",
   "neptune.Summary.statusNotDone": "Этап к выполнению",

package/src/i18n/th.json

@@ -1,14 +1,22 @@
 {
+  "neptune.Button.loadingAriaLabel": "กำลังโหลด",
   "neptune.Chips.ariaLabel": "เคลียร์ {choice}",
   "neptune.ClearButton.ariaLabel": "ชัดเจน",
   "neptune.CloseButton.ariaLabel": "ปิด",
   "neptune.DateInput.day.label": "วัน",
   "neptune.DateInput.month.label": "เดือน",
   "neptune.DateInput.year.label": "ปี",
+  "neptune.DateLookup.day": "วัน",
+  "neptune.DateLookup.goTo20YearView": "Go to 20 year view",
+  "neptune.DateLookup.month": "เดือน",
+  "neptune.DateLookup.next": "ถัดไป",
+  "neptune.DateLookup.previous": "ก่อนหน้า",
+  "neptune.DateLookup.selected": "เลือกแล้ว",
+  "neptune.DateLookup.twentyYears": "20 ปี",
+  "neptune.DateLookup.year": "ปี",
+  "neptune.FlowNavigation.back": "back to previous step",
+  "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "เลือกตัวเลือก...",
-  "neptune.Pagination.ariaLabel": "การนำทางเลขหน้า",
-  "neptune.PaginationLink.ariaLabel.active": "ไปที่หน้า {pageNumber}",
-  "neptune.PaginationLink.ariaLabel.inactive": "หน้าปัจจุบัน หน้า {pageNumber}",
   "neptune.Select.searchPlaceholder": "ค้นหา...",
   "neptune.Summary.statusDone": "รายการที่ทำแล้ว",
   "neptune.Summary.statusNotDone": "รายการที่ต้องทำ",

package/src/i18n/tr.json

@@ -1,14 +1,22 @@
 {
+  "neptune.Button.loadingAriaLabel": "yükleniyor",
   "neptune.Chips.ariaLabel": "{choice} temizle",
   "neptune.ClearButton.ariaLabel": "Sil",
   "neptune.CloseButton.ariaLabel": "Kapat",
   "neptune.DateInput.day.label": "Gün",
   "neptune.DateInput.month.label": "Ay",
   "neptune.DateInput.year.label": "Yıl",
+  "neptune.DateLookup.day": "gün",
+  "neptune.DateLookup.goTo20YearView": "20 yıl görünümüne git",
+  "neptune.DateLookup.month": "ay",
+  "neptune.DateLookup.next": "devam et",
+  "neptune.DateLookup.previous": "önceki",
+  "neptune.DateLookup.selected": "seçili",
+  "neptune.DateLookup.twentyYears": "20 yıl",
+  "neptune.DateLookup.year": "yıl",
+  "neptune.FlowNavigation.back": "önceki adıma dön",
+  "neptune.Link.opensInNewTab": "(yeni sekmede açılır)",
   "neptune.MoneyInput.Select.placeholder": "Bir seçenek seçin...",
-  "neptune.Pagination.ariaLabel": "Sayfalandırma gezintisi",
-  "neptune.PaginationLink.ariaLabel.active": "{pageNumber} numaralı sayfaya git",
-  "neptune.PaginationLink.ariaLabel.inactive": "Mevcut sayfa, sayfa {pageNumber}",
   "neptune.Select.searchPlaceholder": "Ara...",
   "neptune.Summary.statusDone": "Tamamlanan aşama",
   "neptune.Summary.statusNotDone": "Yapılacak",

package/src/i18n/uk.json

@@ -1,14 +1,22 @@
 {
+  "neptune.Button.loadingAriaLabel": "завантаження",
   "neptune.Chips.ariaLabel": "Очистити {choice}",
   "neptune.ClearButton.ariaLabel": "Очистити",
   "neptune.CloseButton.ariaLabel": "Закрити",
   "neptune.DateInput.day.label": "День",
   "neptune.DateInput.month.label": "Місяць",
   "neptune.DateInput.year.label": "Рік",
+  "neptune.DateLookup.day": "дня",
+  "neptune.DateLookup.goTo20YearView": "Go to 20 year view",
+  "neptune.DateLookup.month": "місяць",
+  "neptune.DateLookup.next": "уперед",
+  "neptune.DateLookup.previous": "назад",
+  "neptune.DateLookup.selected": "вибрано",
+  "neptune.DateLookup.twentyYears": "20 років",
+  "neptune.DateLookup.year": "рік",
+  "neptune.FlowNavigation.back": "back to previous step",
+  "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "Виберіть варіант…",
-  "neptune.Pagination.ariaLabel": "Перехід за сторінками",
-  "neptune.PaginationLink.ariaLabel.active": "Перейти на сторінку {pageNumber}",
-  "neptune.PaginationLink.ariaLabel.inactive": "Ця сторінка, сторінка {pageNumber}",
   "neptune.Select.searchPlaceholder": "Пошук…",
   "neptune.Summary.statusDone": "Виконано",
   "neptune.Summary.statusNotDone": "Не виконано",

package/src/i18n/zh-CN.json

@@ -1,14 +1,22 @@
 {
+  "neptune.Button.loadingAriaLabel": "正在加载",
   "neptune.Chips.ariaLabel": "清除 {choice}",
   "neptune.ClearButton.ariaLabel": "清晰",
   "neptune.CloseButton.ariaLabel": "关闭",
   "neptune.DateInput.day.label": "日",
   "neptune.DateInput.month.label": "月",
   "neptune.DateInput.year.label": "年",
+  "neptune.DateLookup.day": "日",
+  "neptune.DateLookup.goTo20YearView": "Go to 20 year view",
+  "neptune.DateLookup.month": "月",
+  "neptune.DateLookup.next": "下一页",
+  "neptune.DateLookup.previous": "上一页",
+  "neptune.DateLookup.selected": "已选",
+  "neptune.DateLookup.twentyYears": "20年",
+  "neptune.DateLookup.year": "年",
+  "neptune.FlowNavigation.back": "back to previous step",
+  "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "请选择...",
-  "neptune.Pagination.ariaLabel": "分页导航",
-  "neptune.PaginationLink.ariaLabel.active": "转到第 {pageNumber} 页",
-  "neptune.PaginationLink.ariaLabel.inactive": "当前页面，第 {pageNumber} 页",
   "neptune.Select.searchPlaceholder": "搜索",
   "neptune.Summary.statusDone": "已完成",
   "neptune.Summary.statusNotDone": "未完成",

package/src/i18n/{zh.json → zh-HK.json}

@@ -1,14 +1,22 @@
 {
+  "neptune.Button.loadingAriaLabel": "載入中",
   "neptune.Chips.ariaLabel": "清除{choice}",
   "neptune.ClearButton.ariaLabel": "清除",
   "neptune.CloseButton.ariaLabel": "關閉",
   "neptune.DateInput.day.label": "日",
   "neptune.DateInput.month.label": "月",
   "neptune.DateInput.year.label": "年",
+  "neptune.DateLookup.day": "日",
+  "neptune.DateLookup.goTo20YearView": "切換至20年視圖",
+  "neptune.DateLookup.month": "月",
+  "neptune.DateLookup.next": "下一個",
+  "neptune.DateLookup.previous": "上一個",
+  "neptune.DateLookup.selected": "已選",
+  "neptune.DateLookup.twentyYears": "20年",
+  "neptune.DateLookup.year": "年",
+  "neptune.FlowNavigation.back": "返回上一個步驟",
+  "neptune.Link.opensInNewTab": "（在新分頁中開啟）",
   "neptune.MoneyInput.Select.placeholder": "選擇一個選項…",
-  "neptune.Pagination.ariaLabel": "分頁導航",
-  "neptune.PaginationLink.ariaLabel.active": "前往第{pageNumber}頁",
-  "neptune.PaginationLink.ariaLabel.inactive": "目前在第{pageNumber}頁",
   "neptune.Select.searchPlaceholder": "搜尋…",
   "neptune.Summary.statusDone": "已完成事項",
   "neptune.Summary.statusNotDone": "未完成事項",

package/src/inputs/SelectInput.css

@@ -1 +1 @@
-.np-bottom-sheet-v2-container{position:relative;z-index:1060}.np-bottom-sheet-v2-backdrop-container--enter,.np-bottom-sheet-v2-backdrop-container--leave{transition-duration:.15s;transition-property:opacity;transition-timing-function:ease-out}.np-bottom-sheet-v2-backdrop-container--enter-from,.np-bottom-sheet-v2-backdrop-container--leave-to{opacity:0}.np-bottom-sheet-v2-backdrop{background-color:#37517e;background-color:var(--color-content-primary);inset:0;opacity:.4;position:fixed}.np-bottom-sheet-v2{display:flex;flex-direction:column;inset:0;justify-content:flex-end;padding-left:8px;padding-left:var(--size-8);padding-right:8px;padding-right:var(--size-8);padding-top:64px;padding-top:var(--size-64);position:fixed}.np-bottom-sheet-v2-content{max-height:100%}.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-duration:.3s;transition-property:transform;transition-timing-function:ease-out}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-property:opacity}}@media (prefers-reduced-motion:no-preference){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{transform:translateY(100%)}}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{opacity:0}}.np-bottom-sheet-v2-content-inner-container{background-color:#fff;background-color:var(--color-background-elevated);border-top-left-radius:32px;border-top-right-radius:32px;box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;height:100%}.np-bottom-sheet-v2-content-inner-container:focus{outline:none}.np-bottom-sheet-v2-header{align-self:flex-end;padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-content-inner{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;padding-top:0;row-gap:8px;row-gap:var(--size-8)}.np-bottom-sheet-v2-content-inner--has-title{grid-template-rows:auto 1fr}.np-bottom-sheet-v2-content-inner--padding-md{padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-title{color:#37517e;color:var(--color-content-primary)}.np-bottom-sheet-v2-body{color:#5d7079;color:var(--color-content-secondary)}.np-button-input{align-content:center;border-radius:10px;border-radius:var(--size-10);display:inline-grid;grid-auto-columns:minmax(0,1fr);text-align:start}.np-popover-v2-container{background-color:#fff;background-color:var(--color-background-elevated);border-radius:10px;border-radius:var(--radius-small);box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;max-height:var(--max-height);min-width:20rem;width:var(--width);z-index:1060}.np-popover-v2-container:focus{outline:none}.np-popover-v2{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;row-gap:8px;row-gap:var(--size-8)}.np-popover-v2--has-title{grid-template-rows:auto 1fr}.np-popover-v2--padding-md{padding:16px;padding:var(--size-16)}.np-popover-v2-title{color:#37517e;color:var(--color-content-primary)}.np-popover-v2-content{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-placeholder{color:#768e9c;color:var(--color-content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-options-container{display:flex;flex-direction:column;height:100%}.np-select-input-options-container:focus{outline:none}@media (min-width:576px){.np-select-input-options-container{max-height:28rem}}.np-select-input-query-container{display:flex;flex-direction:column;padding:8px;padding:var(--size-8);padding-top:0}@media (min-width:576px){.np-select-input-query-container{padding-top:8px;padding-top:var(--size-8)}}.np-select-input-listbox-container{height:var(--initial-height);overflow-y:auto;position:relative;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}@media (min-width:576px){.np-select-input-listbox-container{height:auto}}.np-select-input-listbox-container--has-group{scroll-padding-top:32px;scroll-padding-top:var(--size-32)}.np-select-input-listbox{padding:8px;padding:var(--size-8)}.np-select-input-listbox:focus{outline:none}.np-select-input-separator-item{border-top-width:1px;margin:8px;margin:var(--size-8)}.np-select-input-group-item--without-needle:first-child{margin-top:-8px;margin-top:calc(var(--size-8)*-1)}.np-select-input-group-item-header{background-color:#fff;background-color:var(--color-background-elevated);color:#5d7079;color:var(--color-content-secondary);padding:8px 16px 4px;padding:var(--size-8) var(--size-16) var(--size-4);position:sticky;top:0;z-index:10}.np-select-input-option-container{align-items:center;border-radius:10px;border-radius:var(--radius-small);color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);cursor:default;display:flex;padding:12px 16px;padding:var(--size-12) var(--size-16);-webkit-user-select:none;-moz-user-select:none;user-select:none}.np-select-input-option-container--selected{box-shadow:inset 0 0 0 1px #c9cbce;box-shadow:inset 0 0 0 1px var(--color-interactive-secondary)}.np-select-input-option-container--active{background-color:var(--color-background-screen-hover)}.np-select-input-option-container--disabled{opacity:.45}.np-select-input-option-check{color:var(--color-interactive-primary)}.np-select-input-option{flex:1}.np-select-input-option-content-container{align-items:center;color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex}.np-select-input-option-content-icon{display:flex}.np-select-input-option-content-icon--not-within-trigger{align-self:flex-start}.np-select-input-option-content-text{display:flex;flex:1;flex-direction:column;overflow:hidden}.np-select-input-option-content-text-primary{font:inherit}.np-select-input-option-content-text-secondary{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-option-content-text-within-trigger{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-option-content-text-line-1>:not([hidden])~:not([hidden]){margin-left:8px;margin-left:var(--size-8);margin-right:8px;margin-right:var(--size-8)}.np-select-input-addon-container{align-items:center;display:inline-flex;pointer-events:none}.np-select-input-addon-container,.np-select-input-addon-container>:not([hidden])~:not([hidden]){margin-inline-start:4px;margin-inline-start:var(--size-4)}.np-select-input-addon{align-items:center;background:none;border-radius:.125rem;border-width:0;display:inline-flex;height:24px;height:var(--size-24);justify-content:center;width:24px;width:var(--size-24)}.np-select-input-addon--interactive{color:#c9cbce;color:var(--color-interactive-secondary);pointer-events:auto}.np-select-input-addon--interactive:hover{color:#b5b7ba;color:var(--color-interactive-secondary-hover)}.np-select-input-addon--interactive:focus{outline:none}.np-select-input-addon--interactive:focus-visible{outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-select-input-addon-separator{border-inline-start:1px solid #0000001a;border-inline-start:1px solid var(--color-border-neutral);height:24px;height:var(--size-24)}
+.np-bottom-sheet-v2-container{position:relative;z-index:1060}.np-bottom-sheet-v2-backdrop-container--enter,.np-bottom-sheet-v2-backdrop-container--leave{transition-duration:.15s;transition-property:opacity;transition-timing-function:ease-out}.np-bottom-sheet-v2-backdrop-container--enter-from,.np-bottom-sheet-v2-backdrop-container--leave-to{opacity:0}.np-bottom-sheet-v2-backdrop{background-color:#37517e;background-color:var(--color-content-primary);inset:0;opacity:.4;position:fixed}.np-bottom-sheet-v2{display:flex;flex-direction:column;inset:0;justify-content:flex-end;padding-left:8px;padding-left:var(--size-8);padding-right:8px;padding-right:var(--size-8);padding-top:64px;padding-top:var(--size-64);position:fixed}.np-bottom-sheet-v2-content{max-height:100%}.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-duration:.3s;transition-property:transform;transition-timing-function:ease-out}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-property:opacity}}@media (prefers-reduced-motion:no-preference){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{transform:translateY(100%)}}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{opacity:0}}.np-bottom-sheet-v2-content-inner-container{background-color:#fff;background-color:var(--color-background-elevated);border-top-left-radius:32px;border-top-right-radius:32px;box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;height:100%}.np-bottom-sheet-v2-content-inner-container:focus{outline:none}.np-bottom-sheet-v2-header{align-self:flex-end;padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-content-inner{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;padding-top:0;row-gap:8px;row-gap:var(--size-8)}.np-bottom-sheet-v2-content-inner--has-title{grid-template-rows:auto 1fr}.np-bottom-sheet-v2-content-inner--padding-md{padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-title{color:#37517e;color:var(--color-content-primary)}.np-bottom-sheet-v2-body{color:#5d7079;color:var(--color-content-secondary)}.np-button-input{align-content:center;border-radius:10px;border-radius:var(--size-10);display:inline-grid;grid-auto-columns:minmax(0,1fr);text-align:start}.np-popover-v2-container{background-color:#fff;background-color:var(--color-background-elevated);border-radius:10px;border-radius:var(--radius-small);box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;max-height:var(--max-height);min-width:20rem;width:var(--width);z-index:1060}.np-popover-v2-container:focus{outline:none}.np-popover-v2{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;row-gap:8px;row-gap:var(--size-8)}.np-popover-v2--has-title{grid-template-rows:auto 1fr}.np-popover-v2--padding-md{padding:16px;padding:var(--size-16)}.np-popover-v2-title{color:#37517e;color:var(--color-content-primary)}.np-popover-v2-content{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-placeholder{color:#768e9c;color:var(--color-content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-options-container{display:flex;flex-direction:column;height:100%}.np-select-input-options-container:focus{outline:none}@media (min-width:576px){.np-select-input-options-container{max-height:28rem}}.np-select-input-options-status{align-items:center;-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex;padding:8px 24px 0;padding:var(--size-8) var(--size-24) 0}.np-select-input-options-status-icon{color:#768e9c;color:var(--color-content-tertiary);padding:0 4px;padding:0 var(--size-4)}.np-select-input-query-container{display:flex;flex-direction:column;padding:8px;padding:var(--size-8);padding-top:0}@media (min-width:576px){.np-select-input-query-container{padding-top:8px;padding-top:var(--size-8)}}.np-select-input-listbox-container{height:var(--initial-height);overflow-y:auto;position:relative;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}@media (min-width:576px){.np-select-input-listbox-container{height:auto}}.np-select-input-listbox-container--has-group{scroll-padding-top:32px;scroll-padding-top:var(--size-32)}.np-select-input-listbox{padding:8px;padding:var(--size-8)}.np-select-input-listbox:focus{outline:none}.np-select-input-separator-item{border-top-width:1px;margin:8px;margin:var(--size-8)}.np-select-input-group-item--without-needle:first-child{margin-top:-8px;margin-top:calc(var(--size-8)*-1)}.np-select-input-group-item-header{background-color:#fff;background-color:var(--color-background-elevated);color:#5d7079;color:var(--color-content-secondary);padding:8px 16px 4px;padding:var(--size-8) var(--size-16) var(--size-4);position:sticky;top:0;z-index:10}.np-select-input-option-container{align-items:center;border-radius:10px;border-radius:var(--radius-small);color:var(--color-interactive-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);cursor:default;display:flex;padding:12px 16px;padding:var(--size-12) var(--size-16);-webkit-user-select:none;-moz-user-select:none;user-select:none}.np-select-input-option-container--active{background-color:var(--color-interactive-primary)}.np-select-input-option-container--active.np-select-input-option-container--active *{color:var(--color-interactive-contrast)}.np-select-input-option-container--disabled{opacity:.45}.np-select-input-option-check{padding:0 4px;padding:0 var(--size-4)}.np-select-input-option-check--not-selected{visibility:hidden}.np-select-input-option-check-placeholder{display:inline-block;margin-inline-start:16px;margin-inline-start:var(--size-16);width:16px;width:var(--size-16)}.np-select-input-option{flex:1}.np-select-input-option-content-container{align-items:center;color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex}.np-select-input-option-content-icon{display:flex}.np-select-input-option-content-icon--not-within-trigger{align-self:flex-start}.np-select-input-option-content-text{display:flex;flex:1;flex-direction:column;overflow:hidden}.np-select-input-option-content-text-primary{font:inherit}.np-select-input-option-content-text-secondary{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-option-content-text-within-trigger{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-option-content-text-line-1>:not([hidden])~:not([hidden]){margin-left:8px;margin-left:var(--size-8);margin-right:8px;margin-right:var(--size-8)}.np-select-input-addon-container{align-items:center;display:inline-flex;pointer-events:none}.np-select-input-addon-container,.np-select-input-addon-container>:not([hidden])~:not([hidden]){margin-inline-start:4px;margin-inline-start:var(--size-4)}.np-select-input-addon{align-items:center;background:none;border-radius:.125rem;border-width:0;display:inline-flex;height:24px;height:var(--size-24);justify-content:center;width:24px;width:var(--size-24)}.np-select-input-addon--interactive{color:#c9cbce;color:var(--color-interactive-secondary);pointer-events:auto}.np-select-input-addon--interactive:hover{color:#b5b7ba;color:var(--color-interactive-secondary-hover)}.np-select-input-addon--interactive:focus{outline:none}.np-select-input-addon--interactive:focus-visible{outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-select-input-addon-separator{border-inline-start:1px solid #0000001a;border-inline-start:1px solid var(--color-border-neutral);height:24px;height:var(--size-24)}

package/src/inputs/SelectInput.less

@@ -26,6 +26,18 @@
   }
 }
 
+.np-select-input-options-status {
+  display: flex;
+  align-items: center;
+  column-gap: var(--size-8);
+  padding: var(--size-8) var(--size-24) 0px;
+}
+
+.np-select-input-options-status-icon {
+  padding: 0 var(--size-4);
+  color: var(--color-content-tertiary);
+}
+
 .np-select-input-query-container {
   display: flex;
   flex-direction: column;
@@ -93,14 +105,14 @@
   column-gap: var(--size-8);
   border-radius: var(--radius-small);
   padding: var(--size-12) var(--size-16);
-  color: var(--color-content-primary);
-
-  &--selected {
-    box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
-  }
+  color: var(--color-interactive-primary);
 
   &--active {
-    background-color: var(--color-background-screen-hover);
+    background-color: var(--color-interactive-primary);
+
+    && * {
+      color: var(--color-interactive-contrast);
+    }
   }
 
   &--disabled {
@@ -109,7 +121,17 @@
 }
 
 .np-select-input-option-check {
-  color: var(--color-interactive-primary);
+  padding: 0 var(--size-4);
+
+  &--not-selected {
+    visibility: hidden;
+  }
+}
+
+.np-select-input-option-check-placeholder {
+  margin-inline-start: var(--size-16);
+  display: inline-block;
+  width: var(--size-16);
 }
 
 .np-select-input-option {

package/src/inputs/SelectInput.messages.ts

@@ -0,0 +1,9 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  noResultsFound: {
+    id: 'neptune.SelectInput.noResultsFound',
+    defaultMessage: 'No results found',
+    description: 'When a user-initiated search produces no results.',
+  },
+});

package/src/inputs/SelectInput.story.tsx

@@ -131,6 +131,10 @@ export const Basic: StoryObj<{
       action: 'cleared',
     },
   },
+  play: ({ canvasElement }) => {
+    const triggerButton = within(canvasElement).getByRole('button');
+    userEvent.click(triggerButton);
+  },
 };
 
 interface Month {
@@ -180,11 +184,10 @@ export const Months: StoryObj<{
       action: 'cleared',
     },
   },
-};
-
-Months.play = ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  userEvent.click(canvas.getByText('January'));
+  play: ({ canvasElement }) => {
+    const triggerButton = within(canvasElement).getByText('January');
+    userEvent.click(triggerButton);
+  },
 };
 
 interface Currency {

package/src/inputs/SelectInput.tsx

@@ -1,6 +1,6 @@
 import { Listbox as ListboxBase } from '@headlessui/react';
 import { useId } from '@radix-ui/react-id';
-import { Check, ChevronDown, Cross } from '@transferwise/icons';
+import { Check, ChevronDown, Cross, CrossCircle } from '@transferwise/icons';
 import classNames from 'classnames';
 import mergeProps from 'merge-props';
 import { createContext, forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react';
@@ -11,11 +11,13 @@ import { useEffectEvent } from '../common/hooks/useEffectEvent';
 import { useScreenSize } from '../common/hooks/useScreenSize';
 import { PolymorphicWithOverrides } from '../common/polymorphicWithOverrides/PolymorphicWithOverrides';
 import { Breakpoint } from '../common/propsValues/breakpoint';
-import messages from '../dateLookup/dateTrigger/DateTrigger.messages';
+import dateTriggerMessages from '../dateLookup/dateTrigger/DateTrigger.messages';
 import { wrapInFragment } from '../utilities/wrapInFragment';
+import { Merge } from '../utils';
 
 import { InputGroup } from './InputGroup';
 import { SearchInput } from './SearchInput';
+import messages from './SelectInput.messages';
 import { BottomSheet } from './_BottomSheet';
 import { ButtonInput } from './_ButtonInput';
 import { Popover } from './_Popover';
@@ -38,7 +40,17 @@ function inferSearchableStrings(value: unknown) {
   return [];
 }
 
-const SelectInputHasValueContext = createContext(false);
+const SelectInputItemCheckPaddingContext = createContext(false);
+
+function useSelectInputItemCheckPadding() {
+  const checkPadding = useContext(SelectInputItemCheckPaddingContext);
+
+  // Avoid layout shifts during transitions via caching
+  const [initialCheckPadding] = useState(checkPadding);
+
+  return initialCheckPadding;
+}
+
 const SelectInputTriggerButtonPropsContext = createContext<{
   ref?: React.ForwardedRef<HTMLButtonElement>;
   onClick?: () => void;
@@ -72,14 +84,11 @@ function dedupeSelectInputOptionItem<T>(
   item: SelectInputOptionItem<T>,
   existingValues: Set<T>,
 ): SelectInputOptionItem<T | undefined> {
-  if (existingValues.has(item.value)) {
-    return {
-      ...item,
-      value: undefined,
-    };
+  if (!existingValues.has(item.value)) {
+    existingValues.add(item.value);
+    return item;
   }
-  existingValues.add(item.value);
-  return item;
+  return { ...item, value: undefined };
 }
 
 function dedupeSelectInputItems<T>(
@@ -105,6 +114,27 @@ function dedupeSelectInputItems<T>(
   });
 }
 
+function filterSelectInputOptionItem<T>(item: SelectInputOptionItem<T>, needle: string) {
+  return inferSearchableStrings(item.filterMatchers ?? item.value).some((haystack) =>
+    haystack.includes(needle),
+  );
+}
+
+function filterSelectInputItems<T>(items: readonly SelectInputItem<T>[], needle: string) {
+  return items.filter((item) => {
+    switch (item.type) {
+      case 'option': {
+        return filterSelectInputOptionItem(item, needle);
+      }
+      case 'group': {
+        return item.options.some((option) => filterSelectInputOptionItem(option, needle));
+      }
+      default:
+    }
+    return false;
+  });
+}
+
 export interface SelectInputProps<T = string> {
   name?: string;
   placeholder?: string;
@@ -175,7 +205,7 @@ function SelectInputClearButton({ className, onClick }: SelectInputClearButtonPr
   return (
     <button
       type="button"
-      aria-label={intl.formatMessage(messages.ariaLabel)}
+      aria-label={intl.formatMessage(dateTriggerMessages.ariaLabel)}
       className={classNames(className, 'np-select-input-addon np-select-input-addon--interactive')}
       onClick={onClick}
     >
@@ -227,8 +257,9 @@ export function SelectInput<T = string>({
       }}
     >
       {({ disabled: uiDisabled, value }) => (
-        <SelectInputHasValueContext.Provider value={value != null}>
+        <SelectInputItemCheckPaddingContext.Provider value={Boolean(filterable) || value != null}>
           <OptionsOverlay
+            placement="bottom-start"
             open={open}
             renderTrigger={({ ref, getInteractionProps }) => (
               <SelectInputTriggerButtonPropsContext.Provider
@@ -283,17 +314,19 @@ export function SelectInput<T = string>({
               listboxRef={listboxRef}
             />
           </OptionsOverlay>
-        </SelectInputHasValueContext.Provider>
+        </SelectInputItemCheckPaddingContext.Provider>
       )}
     </ListboxBase>
   );
 }
 
-export type SelectInputTriggerButtonProps<T extends React.ComponentType | 'button' = 'button'> = {
-  as?: T;
-} & React.ComponentPropsWithoutRef<T>;
+type SelectInputTriggerButtonElementType = 'button' | React.ComponentType;
+
+export type SelectInputTriggerButtonProps<
+  T extends SelectInputTriggerButtonElementType = 'button',
+> = Merge<React.ComponentPropsWithoutRef<T>, { as?: T }>;
 
-export function SelectInputTriggerButton<T extends React.ComponentType | 'button' = 'button'>({
+export function SelectInputTriggerButton<T extends SelectInputTriggerButtonElementType = 'button'>({
   as = 'button' as T,
   ...restProps
 }: SelectInputTriggerButtonProps<T>) {
@@ -336,9 +369,16 @@ const SelectInputOptionsContainer = forwardRef(function SelectInputOptionsContai
       ref={ref}
       onKeyDown={(event) => {
         // Prevent absorbing dismissal requests too early
-        if (event.key !== 'Escape') {
-          onKeyDown?.(event);
+        if (event.key === 'Escape') {
+          return;
         }
+
+        // Prevent confirmation close without an active item
+        if (event.key === 'Enter' && ariaActiveDescendant == null) {
+          return;
+        }
+
+        onKeyDown?.(event);
       }}
       {...restProps}
     />
@@ -354,11 +394,15 @@ interface SelectInputOptionsProps<T = string>
 function SelectInputOptions<T = string>({
   items,
   renderValue = wrapInFragment,
-  filterable,
+  filterable = false,
   filterPlaceholder,
   searchInputRef,
   listboxRef,
 }: SelectInputOptionsProps<T>) {
+  const intl = useIntl();
+
+  const controllerRef = filterable ? searchInputRef : listboxRef;
+
   const [query, setQuery] = useState('');
   const needle = useMemo(() => {
     if (filterable) {
@@ -366,6 +410,7 @@ function SelectInputOptions<T = string>({
     }
     return undefined;
   }, [filterable, query]);
+  const empty = needle != null && filterSelectInputItems(items, needle).length === 0;
 
   const listboxContainerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -377,10 +422,10 @@ function SelectInputOptions<T = string>({
     }
   }, []);
 
+  const showStatus = empty;
+  const statusId = useId();
   const listboxId = useId();
 
-  const controllerRef = filterable ? searchInputRef : listboxRef;
-
   return (
     <ListboxBase.Options
       as={SelectInputOptionsContainer}
@@ -404,6 +449,7 @@ function SelectInputOptions<T = string>({
             placeholder={filterPlaceholder}
             value={query}
             aria-controls={listboxId}
+            aria-describedby={showStatus ? statusId : undefined}
             onKeyDown={(event) => {
               // Prevent interfering with the matcher of Headless UI
               // https://mathiasbynens.be/notes/javascript-unicode#regex
@@ -426,6 +472,13 @@ function SelectInputOptions<T = string>({
             'np-select-input-listbox-container--has-group',
         )}
       >
+        {empty ? (
+          <div id={statusId} className="np-select-input-options-status">
+            <CrossCircle size={16} className="np-select-input-options-status-icon" />
+            {intl.formatMessage(messages.noResultsFound)}
+          </div>
+        ) : null}
+
         <div
           ref={listboxRef}
           id={listboxId}
@@ -434,7 +487,7 @@ function SelectInputOptions<T = string>({
           tabIndex={0}
           className="np-select-input-listbox"
         >
-          {(needle == null ? items : dedupeSelectInputItems(items)).map((item, index) => (
+          {(needle != null ? dedupeSelectInputItems(items) : items).map((item, index) => (
             <SelectInputItemView
               // eslint-disable-next-line react/no-array-index-key
               key={index}
@@ -464,13 +517,7 @@ function SelectInputItemView<T = string>({
 }: SelectInputItemViewProps<T>) {
   switch (item.type) {
     case 'option': {
-      if (
-        item.value != null &&
-        (!needle ||
-          inferSearchableStrings(item.filterMatchers ?? item.value).some((haystack) =>
-            haystack.includes(needle),
-          ))
-      ) {
+      if (item.value != null && (needle == null || filterSelectInputOptionItem(item, needle))) {
         return (
           <SelectInputOption value={item.value} disabled={item.disabled}>
             {renderValue(item.value, false)}
@@ -501,6 +548,7 @@ function SelectInputGroupItemView<T = string>({
   needle,
 }: SelectInputGroupItemViewProps<T>) {
   const headerId = useId();
+  const checkPadding = useSelectInputItemCheckPadding();
 
   return (
     // An empty container may be rendered when no options match `needle`
@@ -516,6 +564,7 @@ function SelectInputGroupItemView<T = string>({
           role="presentation"
           className="np-select-input-group-item-header np-text-title-group"
         >
+          {checkPadding ? <span className="np-select-input-option-check-placeholder" /> : null}
           {item.label}
         </header>
       ) : null}
@@ -539,24 +588,33 @@ interface SelectInputOptionProps<T = string> {
 }
 
 function SelectInputOption<T = string>({ value, disabled, children }: SelectInputOptionProps<T>) {
+  const checkPadding = useSelectInputItemCheckPadding();
+
   return (
     <ListboxBase.Option
       as="div"
       value={value}
       disabled={disabled}
-      className={({ active, selected, disabled: uiDisabled }) =>
+      className={({ active, disabled: uiDisabled }) =>
         classNames(
           'np-select-input-option-container np-text-body-large',
           active && 'np-select-input-option-container--active',
-          selected && 'np-select-input-option-container--selected',
           uiDisabled && 'np-select-input-option-container--disabled',
         )
       }
     >
       {({ selected }) => (
         <>
+          {checkPadding ? (
+            <Check
+              size={16}
+              className={classNames(
+                'np-select-input-option-check',
+                !selected && 'np-select-input-option-check--not-selected',
+              )}
+            />
+          ) : null}
           <div className="np-select-input-option">{children}</div>
-          {selected && <Check size={24} className={classNames('np-select-input-option-check')} />}
         </>
       )}
     </ListboxBase.Option>