@transferwise/components 45.27.0 → 45.28.1

package/build/index.esm.js

@@ -20,7 +20,7 @@ import { usePopper } from 'react-popper';
 import throttle from 'lodash.throttle';
 import { createPortal } from 'react-dom';
 import { isUndefined, isKey, isNumber, isEmpty, isNull, isArray } from '@transferwise/neptune-validation';
-import { Illustration } from '@wise/art';
+import { Flag, Illustration } from '@wise/art';
 import clamp$2 from 'lodash.clamp';
 import debounce from 'lodash.debounce';
 import requiredIf from 'react-required-if';
@@ -6860,6 +6860,7 @@ function SelectInput({
   size = 'md',
   className,
   onChange,
+  onSearchChange,
   onClear
 }) {
   const [open, setOpen] = useState(false);
@@ -6898,6 +6899,11 @@ function SelectInput({
           ...mergeProps({
             onClick: () => {
               setOpen(prev => !prev);
+            },
+            onKeyDown: event => {
+              if (event.key === ' ' || event.key === 'Enter' || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                setOpen(prev => !prev);
+              }
             }
           }, getInteractionProps())
         },
@@ -6930,7 +6936,8 @@ function SelectInput({
         filterable: filterable,
         filterPlaceholder: filterPlaceholder,
         searchInputRef: searchInputRef,
-        listboxRef: listboxRef
+        listboxRef: listboxRef,
+        onSearchChange: onSearchChange
       })
     })
   });
@@ -6942,6 +6949,7 @@ function SelectInputTriggerButton({
   const {
     ref,
     onClick,
+    onKeyDown,
     ...interactionProps
   } = useContext(SelectInputTriggerButtonPropsContext);
   return /*#__PURE__*/jsx(Listbox.Button, {
@@ -6952,7 +6960,8 @@ function SelectInputTriggerButton({
       ...interactionProps
     },
     ...mergeProps({
-      onClick
+      onClick,
+      onKeyDown
     }, restProps)
   });
 }
@@ -6998,7 +7007,8 @@ function SelectInputOptions({
   filterable = false,
   filterPlaceholder,
   searchInputRef,
-  listboxRef
+  listboxRef,
+  onSearchChange
 }) {
   const intl = useIntl();
   const controllerRef = filterable ? searchInputRef : listboxRef;
@@ -7050,6 +7060,9 @@ function SelectInputOptions({
         },
         onChange: event => {
           setQuery(event.currentTarget.value);
+          if (onSearchChange) {
+            onSearchChange(event.currentTarget.value);
+          }
         }
       })
     }) : null, /*#__PURE__*/jsxs("section", {
@@ -7779,1139 +7792,526 @@ Money.propTypes = {
 var Money$1 = Money;
 
 var messages$3 = defineMessages({
-  searchPlaceholder: {
-    id: "neptune.Select.searchPlaceholder"
+  selectPlaceholder: {
+    id: "neptune.MoneyInput.Select.placeholder"
   }
 });
 
-// Option.tsx NEW
-function Option$1({
-  label,
-  currency = '',
-  note = '',
-  secondary = '',
-  icon,
-  classNames = {},
-  selected = false
-}) {
-  const {
-    isModern
-  } = useTheme();
-  const style = classes => classes.map(className => classNames[className] || className).join(' ');
-  const currencyClassNames = currency ? style(['currency-flag', `currency-flag-${currency.toLowerCase()}`]) : undefined;
-  const iconElement = icon ? /*#__PURE__*/cloneElement(icon, {
-    size: 24,
-    className: 'tw-icon'
-  }) : currency && /*#__PURE__*/jsx("i", {
-    className: currencyClassNames
-  });
-  const titleAndNoteElement = /*#__PURE__*/jsxs(Body, {
-    as: "span",
-    type: Typography.BODY_LARGE,
-    className: selected ? 'text-ellipsis' : undefined,
-    children: [label, note && /*#__PURE__*/jsx(Body, {
-      as: "span",
-      className: isModern ? 'm-l-1' : 'm-l-1 body-2',
-      children: note
-    })]
-  });
-  const secondaryElementClassNames = () => {
-    let classes = undefined;
-    if (selected) {
-      classes = 'text-ellipsis';
-    }
-    if (isModern) {
-      return classes;
-    }
-    return `${classes ? classes + ' ' : ''}body-2`;
-  };
-  const secondaryElement = secondary && /*#__PURE__*/jsx(Body, {
-    className: secondaryElementClassNames(),
-    children: secondary
-  });
-  return iconElement ? /*#__PURE__*/jsxs("div", {
-    className: "d-flex np-option-content",
-    children: [/*#__PURE__*/jsx("div", {
-      className: `d-flex flex-column${selected ? ' justify-content-center' : ''}`,
-      children: iconElement
-    }), /*#__PURE__*/jsxs("div", {
-      className: "d-flex flex-column justify-content-center",
-      children: [titleAndNoteElement, secondaryElement]
-    })]
-  }) : /*#__PURE__*/jsxs(Fragment, {
-    children: [iconElement, titleAndNoteElement, secondaryElement]
-  });
+// TODO: do not duplicate this between formatting and components
+const currencyDecimals = {
+  BIF: 0,
+  BYR: 0,
+  CLP: 0,
+  DJF: 0,
+  GNF: 0,
+  JPY: 0,
+  KMF: 0,
+  KRW: 0,
+  MGA: 0,
+  PYG: 0,
+  RWF: 0,
+  VND: 0,
+  VUV: 0,
+  XAF: 0,
+  XOF: 0,
+  XPF: 0,
+  // technically HUF does have decimals, but due to the exchange rate banks
+  // do not accept decimal amounts
+  HUF: 0,
+  BHD: 3,
+  JOD: 3,
+  KWD: 3,
+  OMR: 3,
+  TND: 3
+};
+const DEFAULT_CURRENCY_DECIMALS = 2;
+function isNumberLocaleSupported() {
+  const number = 1234;
+  const numberString = number.toLocaleString && number.toLocaleString(DEFAULT_LOCALE);
+  return numberString === '1,234';
 }
-
-const SearchBox = /*#__PURE__*/forwardRef(({
-  id,
-  classNames: classNames$1 = {},
-  focusedOptionId,
-  onChange,
-  onClick,
-  placeholder = undefined,
-  value = ''
-}, reference) => {
-  const style = className => classNames$1[className] || className;
-  return /*#__PURE__*/jsx("li", {
-    className: style('border-bottom'),
-    children: /*#__PURE__*/jsx("a", {
-      className: `${style('np-select-filter-link')} ${style('p-a-0')}`,
-      children: /*#__PURE__*/jsxs("div", {
-        className: style('input-group'),
-        children: [/*#__PURE__*/jsx("span", {
-          className: classNames('input-group-addon', 'input-group-addon--search'),
-          children: /*#__PURE__*/jsx(Search, {
-            className: classNames(style('tw-icon'), style('tw-icon-search')),
-            size: 24
-          })
-        }), /*#__PURE__*/jsx(Input, {
-          ref: reference,
-          id: id,
-          role: "searchbox",
-          inputMode: "search",
-          className: classNames(style('np-select-filter')),
-          placeholder: placeholder,
-          value: value,
-          spellCheck: "false",
-          "aria-activedescendant": focusedOptionId,
-          onChange: onChange,
-          onClick: onClick
-        })]
-      })
-    })
-  });
-});
-var SearchBox$1 = SearchBox;
-
-const DEFAULT_SEARCH_VALUE = '';
-const DEFAULT_OPTIONS_PAGE_SIZE = 1000;
-const includesString = (string1, string2) => string1.toLowerCase().includes(string2.toLowerCase());
-function defaultFilterFunction(option, searchValue) {
-  if (isPlaceholderOption(option)) {
-    return true;
+function getValidLocale(locale) {
+  try {
+    const noUnderscoreLocale = locale.replace(/_/, '-');
+    Intl.NumberFormat(noUnderscoreLocale);
+    return noUnderscoreLocale;
+  } catch {
+    return 'en-GB';
   }
-  const {
-    label,
-    note,
-    secondary,
-    currency,
-    searchStrings
-  } = option;
-  return !!label && includesString(label, searchValue) || !!note && includesString(note, searchValue) || !!secondary && includesString(secondary, searchValue) || !!currency && includesString(currency, searchValue) || !!searchStrings && searchStrings.some(string => includesString(string, searchValue));
-}
-function isActionableOption(option) {
-  return !option.header && !option.separator && !option.disabled;
 }
-function isHeaderOption(option) {
-  return option != null && 'header' in option;
+function getCurrencyDecimals(currency = '') {
+  const upperCaseCurrency = currency.toUpperCase();
+  if (Object.prototype.hasOwnProperty.call(currencyDecimals, upperCaseCurrency)) {
+    return currencyDecimals[upperCaseCurrency];
+  }
+  return DEFAULT_CURRENCY_DECIMALS;
 }
-function isSeparatorOption(option) {
-  return option != null && 'separator' in option;
+function getDecimalSeparator(locale) {
+  return isNumberLocaleSupported() ? 1.1.toLocaleString(locale)[1] : '.';
 }
-function clamp(from, to, value) {
-  return Math.max(Math.min(to, value), from);
+function parseAmount(number, currency, locale) {
+  const validLocale = getValidLocale(locale);
+  const precision = getCurrencyDecimals(currency);
+  const groupSeparator = isNumberLocaleSupported() ? 10000 .toLocaleString(validLocale)[2] : ',';
+  const decimalSeparator = getDecimalSeparator(validLocale);
+  const numberWithStandardDecimalSeparator = (number ? `${number}` : '').replace(new RegExp(`\\${groupSeparator}`, 'g'), '').replace(new RegExp(`\\${decimalSeparator}`, 'g'), '.').replace(/[^0-9.]/g, '');
+  const parsedAmount = parseFloat(parseFloat(numberWithStandardDecimalSeparator).toFixed(precision));
+  return Math.abs(parsedAmount);
 }
 
-/**
- * No option or placeholder option is selected
- */
-const DEFAULT_SELECTED_OPTION = null;
-function isPlaceholderOption(option) {
-  return option === DEFAULT_SELECTED_OPTION || 'placeholder' in option;
-}
-function isSearchableOption(option) {
-  return !isHeaderOption(option) && !isSeparatorOption(option) && !isPlaceholderOption(option);
-}
-const getUniqueIdForOption = (parentId = '', option) => {
-  if (option == null) {
-    return undefined;
+const Currency = PropTypes.shape({
+  header: PropTypes.string,
+  value: PropTypes.string,
+  label: PropTypes.string,
+  currency: PropTypes.string,
+  note: PropTypes.string,
+  searchable: PropTypes.string
+});
+const isNumberOrNull = v => isNumber(v) || isNull(v);
+const formatAmountIfSet = (amount, currency, locale, maxLengthOverride) => {
+  if (maxLengthOverride) {
+    return amount || '';
+  } else {
+    return typeof amount === 'number' ? formatAmount(amount, currency, locale) : '';
   }
-  const uniqueOptionId = option.value || (option.label?.replace(/\s/g, '') ?? '');
-  return `option-${parentId}-${uniqueOptionId}`;
 };
-
-/**
- * @deprecated Use `SelectInput` instead (https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput)
- */
-function Select({
-  placeholder,
-  id,
-  required,
-  disabled,
-  inverse,
-  dropdownWidth,
-  size,
-  block,
-  selected,
-  search,
-  onChange,
-  onFocus,
-  onBlur,
-  options: defaultOptions,
-  onSearchChange,
-  searchValue: initSearchValue,
-  searchPlaceholder,
-  // eslint-disable-next-line unicorn/prevent-abbreviations
-  classNames: classNamesProp,
-  dropdownUp,
-  dropdownProps,
-  buttonProps
-}) {
-  const {
-    formatMessage
-  } = useIntl();
-  const {
-    isModern
-  } = useTheme();
-  const s = className => classNamesProp[className] || className;
-  const [open, setOpen] = useState(false);
-  const [searchValue, setSearchValue] = useState(DEFAULT_SEARCH_VALUE);
-  const [keyboardFocusedOptionIndex, setKeyboardFocusedOptionIndex] = useState(null);
-  const keyboardFocusedReference = useRef();
-  const previousKeyboardFocusedOptionIndex = useRef();
-  const [numberOfOptionsShown, setNumberOfOptionsShown] = useState(DEFAULT_OPTIONS_PAGE_SIZE);
-  const searchBoxReference = useRef(null);
-  const selectReference = useRef(null);
-  const dropdownButtonReference = useRef(null);
-  const optionsListReference = useRef(null);
-  const isSearchEnabled = !!onSearchChange || !!search;
-  const isDropdownAutoWidth = dropdownWidth == null;
-  const fallbackButtonId = useMemo(() => getSimpleRandomId('np-select-'), []);
-  const options = useMemo(() => {
-    if (!search || !searchValue) {
-      return defaultOptions;
-    }
-    return defaultOptions.filter(isSearchableOption).filter(option => {
-      if (typeof search === 'function') {
-        return search(option, searchValue);
-      } else {
-        return defaultFilterFunction(option, searchValue);
-      }
+const parseNumber = (amount, currency, locale, maxLengthOverride) => {
+  if (!maxLengthOverride) {
+    return parseAmount(amount, currency, locale);
+  }
+  if (maxLengthOverride && amount.length > maxLengthOverride) {
+    return 0;
+  }
+  return +amount;
+};
+const inputKeyCodeAllowlist = new Set([KeyCodes.BACKSPACE, KeyCodes.DELETE, KeyCodes.COMMA, KeyCodes.PERIOD, KeyCodes.DOWN, KeyCodes.UP, KeyCodes.LEFT, KeyCodes.RIGHT, KeyCodes.ENTER, KeyCodes.ESCAPE, KeyCodes.TAB]);
+const inputKeyAllowlist = new Set([Key.PERIOD, Key.COMMA]);
+class MoneyInput extends Component {
+  constructor(props) {
+    super(props);
+    const {
+      locale
+    } = this.props.intl;
+    this.formatMessage = this.props.intl.formatMessage;
+    this.state = {
+      searchQuery: '',
+      selectedOption: this.props.selectedCurrency,
+      formattedAmount: formatAmountIfSet(props.amount, props.selectedCurrency.currency, locale, props.maxLengthOverride),
+      locale
+    };
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({
+      locale: nextProps?.intl?.locale
     });
-  }, [defaultOptions, search, searchValue]);
-  const selectableOptions = useMemo(() => options.filter(isActionableOption), [options]);
-  const focusedOption = selectableOptions[keyboardFocusedOptionIndex];
-  const computedId = id || fallbackButtonId;
-  const listboxId = `${computedId}-listbox`;
-  const searchBoxId = `${computedId}-searchbox`;
-  const {
-    isMobile
-  } = useLayout();
-  useEffect(() => {
-    let cancelled;
-    if (keyboardFocusedOptionIndex >= 0) {
-      requestAnimationFrame(() => {
-        if (!cancelled) {
-          if (isSearchEnabled) {
-            keyboardFocusedReference.current?.scrollIntoView?.({
-              block: 'center'
-            });
-          } else {
-            keyboardFocusedReference.current?.focus();
-          }
-        }
+    if (!this.amountFocused) {
+      this.setState({
+        formattedAmount: formatAmountIfSet(nextProps.amount, nextProps.selectedCurrency.currency, nextProps?.intl?.locale, nextProps.maxLengthOverride)
       });
-      return () => {
-        cancelled = true;
-      };
     }
-  }, [keyboardFocusedOptionIndex, isSearchEnabled]);
-  const handleOnClick = () => {
-    setOpen(true);
+  }
+  isInputAllowedForKeyEvent = event => {
+    const {
+      keyCode,
+      metaKey,
+      key,
+      ctrlKey
+    } = event;
+    const isNumberKey = isNumber(parseInt(key, 10));
+    return isNumberKey || metaKey || ctrlKey || inputKeyCodeAllowlist.has(keyCode) || inputKeyAllowlist.has(key);
   };
-  const handleTouchStart = event => {
-    if (event.currentTarget === event.target && open) {
-      handleCloseOptions();
+  handleKeyDown = event => {
+    if (!this.isInputAllowedForKeyEvent(event)) {
+      event.preventDefault();
     }
   };
-  const handleOnFocus = event => {
-    if (onFocus) {
-      onFocus(event);
+  handlePaste = event => {
+    const paste = (event.clipboardData || window.clipboardData).getData('text');
+    const {
+      locale
+    } = this.state;
+    const parsed = isEmpty(paste) ? null : parseNumber(paste, this.props.selectedCurrency.currency, locale, this.props.maxLengthOverride);
+    if (isNumberOrNull(parsed)) {
+      this.setState({
+        formattedAmount: formatAmountIfSet(parsed, this.props.selectedCurrency.currency, locale, this.props.maxLengthOverride)
+      });
+      this.props.onAmountChange(parsed);
     }
+    event.preventDefault();
   };
-  const handleOnBlur = event => {
+  onAmountChange = event => {
     const {
-      nativeEvent
-    } = event;
-    if (nativeEvent) {
-      const elementReceivingFocus = nativeEvent.relatedTarget;
-      const select = event.currentTarget;
-      if (select && elementReceivingFocus && select.contains(elementReceivingFocus)) {
-        return;
-      }
-    }
-    if (onBlur) {
-      onBlur(event);
+      value
+    } = event.target;
+    this.setState({
+      formattedAmount: value
+    });
+    const parsed = isEmpty(value) ? null : parseNumber(value, this.props.selectedCurrency.currency, this.state.locale, this.props.maxLengthOverride);
+    if (isNumberOrNull(parsed)) {
+      this.props.onAmountChange(parsed);
     }
   };
-  const handleSearchChange = event => {
-    setNumberOfOptionsShown(DEFAULT_OPTIONS_PAGE_SIZE);
-    setSearchValue(event.target.value);
-    if (onSearchChange) {
-      onSearchChange(event.target.value);
-    }
+  onAmountBlur = () => {
+    this.amountFocused = false;
+    this.setAmount();
   };
-  const handleKeyDown = event => {
-    switch (event.keyCode) {
-      case KeyCodes.UP:
-      case KeyCodes.DOWN:
-        if (open) {
-          moveFocusWithDifference(event.keyCode === KeyCodes.UP ? -1 : 1);
-        } else {
-          setOpen(true);
-        }
-        stopPropagation$1(event);
-        break;
-      case KeyCodes.SPACE:
-        if (event.target !== searchBoxReference.current) {
-          if (open) {
-            selectKeyboardFocusedOption();
-          } else {
-            setOpen(true);
-          }
-          stopPropagation$1(event);
-        }
-        break;
-      case KeyCodes.ENTER:
-        if (open) {
-          selectKeyboardFocusedOption();
-        } else {
-          setOpen(true);
-        }
-        stopPropagation$1(event);
-        break;
-      case KeyCodes.ESCAPE:
-        handleCloseOptions();
-        stopPropagation$1(event);
-        break;
-      case KeyCodes.TAB:
-        if (open) {
-          selectKeyboardFocusedOption();
-        }
-        break;
-    }
+  onAmountFocus = () => {
+    this.amountFocused = true;
   };
-  function selectKeyboardFocusedOption() {
-    if (keyboardFocusedOptionIndex != null) {
-      selectableOptions.length > 0 && selectOption(selectableOptions[keyboardFocusedOptionIndex]);
-    }
-  }
-  function moveFocusWithDifference(difference) {
-    const selectedOptionIndex = selectableOptions.reduce((optionIndex, current, index) => {
-      if (optionIndex != null) {
-        return optionIndex;
-      }
-      if (isOptionSelected(selected, current)) {
-        return index;
-      }
-      return null;
-    }, null);
-    const previousFocusedIndex = previousKeyboardFocusedOptionIndex.current ?? -1;
-    let indexToStartMovingFrom = previousFocusedIndex;
-    if (previousFocusedIndex === -1) {
-      if (selectedOptionIndex == null) {
-        setKeyboardFocusedOptionIndex(0);
+  mapOption = item => {
+    return {
+      type: 'option',
+      value: item,
+      filterMatchers: [item.value, item.label, item.note, item.searchable]
+    };
+  };
+  getSelectOptions() {
+    const selectOptions = [...filterOptionsForQuery(this.props.currencies, this.state.searchQuery)];
+    let formattedOptions = [];
+    let groupIndex = null;
+    selectOptions.forEach(item => {
+      if (item.header) {
+        formattedOptions.push({
+          type: 'group',
+          label: item.header,
+          options: []
+        });
+        groupIndex = formattedOptions.length - 1;
       } else {
-        indexToStartMovingFrom = selectedOptionIndex;
+        if (groupIndex === null) {
+          formattedOptions.push(this.mapOption(item));
+        } else {
+          formattedOptions[groupIndex]?.options.push(this.mapOption(item));
+        }
       }
-    }
-    const unClampedNewIndex = indexToStartMovingFrom + difference;
-    const newIndex = clamp(0, selectableOptions.length - 1, unClampedNewIndex);
-    setKeyboardFocusedOptionIndex(newIndex);
+    });
+    return formattedOptions;
   }
-  useEffect(() => {
-    if (open) {
-      if (!isMobile || searchValue) {
-        if (isSearchEnabled && !!searchBoxReference.current) {
-          searchBoxReference.current.focus();
-        }
-        if (!isSearchEnabled && optionsListReference.current && (previousKeyboardFocusedOptionIndex.current == null || Number.isNaN(previousKeyboardFocusedOptionIndex.current))) {
-          optionsListReference.current.focus();
-        }
+  setAmount() {
+    this.setState(previousState => {
+      const parsed = parseNumber(previousState.formattedAmount, this.props.selectedCurrency.currency, previousState.locale, this.props.maxLengthOverride);
+      if (!isNumberOrNull(parsed)) {
+        return {
+          formattedAmount: previousState.formattedAmount
+        };
       }
-      previousKeyboardFocusedOptionIndex.current = keyboardFocusedOptionIndex;
-    } else {
-      previousKeyboardFocusedOptionIndex.current = null;
-    }
-  }, [open, searchValue, isSearchEnabled, isMobile, keyboardFocusedOptionIndex]);
-  const handleCloseOptions = () => {
-    setOpen(false);
-    setKeyboardFocusedOptionIndex(null);
-    if (dropdownButtonReference.current) {
-      dropdownButtonReference.current.focus();
+      return {
+        formattedAmount: formatAmountIfSet(parsed, this.props.selectedCurrency.currency, previousState.locale, this.props.maxLengthOverride)
+      };
+    });
+  }
+  handleSelectChange = value => {
+    this.handleSearchChange('');
+    this.setState({
+      selectedOption: value
+    });
+    this.props.onCurrencyChange(value);
+  };
+  handleCustomAction = () => {
+    this.handleSearchChange('');
+    if (this.props.onCustomAction) {
+      this.props.onCustomAction();
     }
   };
-  function createSelectHandlerForOption(option) {
-    return event => {
-      stopPropagation$1(event);
-      selectOption(option);
-    };
-  }
-  function selectOption(option) {
-    onChange(isPlaceholderOption(option) ? DEFAULT_SELECTED_OPTION : option);
-    handleCloseOptions();
-  }
-  function renderOptionsList({
-    className
-  } = {}) {
-    const dropdownClass = classNames(s('np-dropdown-menu'), {
-      [s('np-dropdown-menu-desktop')]: !isMobile,
-      [s(`np-dropdown-menu-${dropdownWidth}`)]: !isMobile && !isDropdownAutoWidth
-    }, s(className));
-    const showPlaceholder = !required && !isSearchEnabled && Boolean(placeholder);
-    return /*#__PURE__*/jsxs("ul", {
-      ref: optionsListReference,
-      id: listboxId,
-      role: "listbox",
-      "aria-orientation": "vertical",
-      "aria-activedescendant": getUniqueIdForOption(id, selected),
-      tabIndex: "-1",
-      className: dropdownClass,
-      ...dropdownProps,
-      children: [showPlaceholder && /*#__PURE__*/jsx(PlaceHolderOption, {}), isSearchEnabled && /*#__PURE__*/jsx(SearchBox$1, {
-        ref: searchBoxReference,
-        id: searchBoxId,
-        classNames: classNamesProp,
-        value: initSearchValue || searchValue,
-        placeholder: searchPlaceholder || formatMessage(messages$3.searchPlaceholder),
-        focusedOptionId: getUniqueIdForOption(id, focusedOption),
-        onChange: handleSearchChange,
-        onClick: stopPropagation$1
-      }), options.slice(0, numberOfOptionsShown).map(renderOption), numberOfOptionsShown < options.length && /*#__PURE__*/jsx(ShowMoreOption, {})]
+  handleSearchChange = searchQuery => {
+    this.setState({
+      searchQuery
     });
-  }
-  function ShowMoreOption() {
-    function handleOnClick(event) {
-      stopPropagation$1(event);
-      setNumberOfOptionsShown(numberOfOptionsShown + DEFAULT_OPTIONS_PAGE_SIZE);
+    if (this.props.onSearchChange) {
+      this.props.onSearchChange({
+        searchQuery,
+        filteredOptions: filterOptionsForQuery(this.props.currencies, searchQuery)
+      });
     }
-    return (
-      /*#__PURE__*/
-      /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
-      jsx("li", {
-        className: classNames(s('clickable'), s('border-bottom'), s('show-more')),
-        onClick: handleOnClick,
-        onKeyPress: handleOnClick,
-        children: /*#__PURE__*/jsx("a", {
-          children: "..."
-        })
-      })
-    );
-  }
-  function PlaceHolderOption() {
-    const placeholderOption = {
-      placeholder
+  };
+  style = className => this.props.classNames[className] || className;
+  render() {
+    const {
+      selectedCurrency,
+      onCurrencyChange,
+      size,
+      addon,
+      id,
+      selectProps,
+      maxLengthOverride
+    } = this.props;
+    const selectOptions = this.getSelectOptions();
+    const getFirstOption = () => {
+      if (selectOptions.length !== 0) {
+        const firstOption = selectOptions[0];
+        if (firstOption.type === 'option') {
+          return firstOption.value;
+        }
+        if (firstOption.type === 'group' && firstOption.options.length !== 0) {
+          return firstOption.options[0].value;
+        }
+      }
+      return null;
     };
-    return (
-      /*#__PURE__*/
-      /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
-      jsx("li", {
-        className: classNames(s('clickable'), s('border-bottom')),
-        onClick: createSelectHandlerForOption(placeholderOption),
-        onKeyPress: createSelectHandlerForOption(placeholderOption),
-        children: /*#__PURE__*/jsx("a", {
-          children: placeholder
+    const firstOption = getFirstOption();
+    const isFixedCurrency = !this.state.searchQuery && (selectOptions.length === 1 && firstOption.currency === selectedCurrency.currency || !onCurrencyChange);
+    const disabled = !this.props.onAmountChange;
+    return /*#__PURE__*/jsxs("div", {
+      className: classNames(this.style('tw-money-input'), this.style('input-group'), this.style(`input-group-${size}`)),
+      children: [/*#__PURE__*/jsx(Input, {
+        id: id,
+        value: this.state.formattedAmount,
+        inputMode: "decimal",
+        disabled: disabled,
+        maxLength: maxLengthOverride,
+        placeholder: formatAmountIfSet(this.props.placeholder, this.props.selectedCurrency.currency, this.state.locale, this.props.maxLengthOverride),
+        autoComplete: "off",
+        onKeyDown: this.handleKeyDown,
+        onChange: this.onAmountChange,
+        onFocus: this.onAmountFocus,
+        onBlur: this.onAmountBlur,
+        onPaste: this.handlePaste
+      }), addon && /*#__PURE__*/jsx("span", {
+        className: classNames(this.style('input-group-addon'), this.style(`input-${size}`), disabled ? this.style('disabled') : ''),
+        children: addon
+      }), isFixedCurrency ? /*#__PURE__*/jsxs("div", {
+        className: classNames(this.style('input-group-addon'), this.style(`input-${size}`), this.style('tw-money-input__fixed-currency'), disabled ? this.style('disabled') : ''),
+        children: [(size === 'lg' || size === 'md') && /*#__PURE__*/jsx("span", {
+          className: classNames(this.style('money-input-currency-flag'), this.style('m-r-2')),
+          children: /*#__PURE__*/jsx(Flag, {
+            code: selectedCurrency.currency.toLowerCase(),
+            intrinsicSize: 24
+          })
+        }), /*#__PURE__*/jsx(Title, {
+          as: "span",
+          type: Typography.TITLE_SUBSECTION,
+          className: size === 'lg' ? this.style('m-r-1') : '',
+          children: selectedCurrency.currency.toUpperCase()
+        })]
+      }) : /*#__PURE__*/jsx("div", {
+        className: classNames(this.style('input-group-btn'), this.style('amount-currency-select-btn')),
+        children: /*#__PURE__*/jsx(SelectInput, {
+          items: selectOptions,
+          value: this.state.selectedOption,
+          compareValues: "currency",
+          renderValue: (currency, withinTrigger) => {
+            return /*#__PURE__*/jsx(SelectInputOptionContent, {
+              title: currency.label,
+              note: withinTrigger ? undefined : currency.note,
+              icon: /*#__PURE__*/jsx(Flag, {
+                code: currency.currency,
+                intrinsicSize: 24
+              })
+            });
+          },
+          renderFooter: this.props.onCustomAction ? () =>
+          /*#__PURE__*/
+          // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+          jsx("div", {
+            role: "button",
+            tabIndex: "0",
+            onClick: this.handleCustomAction,
+            children: this.props.customActionLabel
+          }) : null,
+          placeholder: this.formatMessage(messages$3.selectPlaceholder),
+          filterable: true,
+          filterPlaceholder: this.props.searchPlaceholder,
+          disabled: disabled,
+          size: size,
+          onChange: this.handleSelectChange,
+          onSearchChange: this.handleSearchChange,
+          ...selectProps
         })
-      })
-    );
-  }
-
-  // eslint-disable-next-line react/prop-types
-  function SeparatorOption() {
-    return /*#__PURE__*/jsx("li", {
-      className: s('np-separator'),
-      "aria-hidden": true
-    });
-  }
-
-  // eslint-disable-next-line react/prop-types
-  function HeaderOption({
-    children
-  }) {
-    return /*#__PURE__*/jsx("li", {
-      // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
-      className: classNames(s('np-dropdown-header'), s('np-text-title-group')),
-      onClick: stopPropagation$1,
-      onKeyPress: stopPropagation$1,
-      children: children
+      })]
     });
   }
-  function isOptionSelected(selected, option) {
-    return selected?.value === option?.value;
+}
+function filterOptionsForQuery(options, query) {
+  if (!query) {
+    return options;
   }
-  const renderOption = (option, index) => {
-    const separatorOption = option;
-    if (isSeparatorOption(separatorOption) && separatorOption?.separator) {
-      return /*#__PURE__*/jsx(SeparatorOption, {}, index);
-    }
-    const headerOption = option;
-    if (isHeaderOption(headerOption) && headerOption.header) {
-      return /*#__PURE__*/jsx(HeaderOption, {
-        children: headerOption.header
-      }, index);
+  const filteredOptions = removeDuplicateValueOptions(options).filter(option => isCurrencyOptionAndFitsQuery(option, query));
+  return sortOptionsLabelsToFirst(filteredOptions, query);
+}
+function removeDuplicateValueOptions(options) {
+  const result = [];
+  const resultValues = [];
+  options.forEach(option => {
+    if (option.value && !resultValues.includes(option.value)) {
+      result.push(option);
+      resultValues.push(option.value);
     }
-    const isActive = isOptionSelected(selected, option);
-    const selectOption = option;
-    const isFocusedWithKeyboard = !selectOption.disabled && keyboardFocusedOptionIndex === getIndexWithoutHeadersForIndexWithHeaders(index);
-    const className = classNames(s('np-dropdown-item'), selectOption.disabled ? [s('disabled')] : s('clickable'), {
-      [s('active')]: isActive,
-      [s('np-dropdown-item--focused')]: isFocusedWithKeyboard
-    });
-    const handleOnClick = selectOption.disabled ? stopPropagation$1 : createSelectHandlerForOption(selectOption);
-    return (
-      /*#__PURE__*/
-      /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
-      jsx("li", {
-        ref: isFocusedWithKeyboard ? keyboardFocusedReference : undefined,
-        id: getUniqueIdForOption(id, option),
-        "aria-selected": isActive,
-        "aria-disabled": option.disabled,
-        role: "option",
-        tabIndex: "-1",
-        className: className,
-        onClick: handleOnClick,
-        onKeyPress: handleOnClick,
-        children: /*#__PURE__*/jsx("a", {
-          disabled: selectOption.disabled,
-          children: /*#__PURE__*/jsx(Option$1, {
-            ...selectOption,
-            classNames: classNamesProp
-          })
-        })
-      }, index)
-    );
-  };
-  function getIndexWithoutHeadersForIndexWithHeaders(index) {
-    return options.reduce((sum, option, currentIndex) => {
-      if (currentIndex < index && isActionableOption(option)) {
-        return sum + 1;
-      }
-      return sum;
-    }, 0);
+  });
+  return result;
+}
+function isCurrencyOptionAndFitsQuery(option, query) {
+  if (!option.value) {
+    return false;
   }
-  const hasActiveOptions = !!defaultOptions.length;
-  if (open && (initSearchValue || searchValue)) {
-    if (hasActiveOptions && keyboardFocusedOptionIndex == null) {
-      setKeyboardFocusedOptionIndex(0);
+  return contains(option.label, query) || contains(option.searchable, query) || contains(option.note, query);
+}
+function contains(property, query) {
+  return property && property.toLowerCase().includes(query.toLowerCase());
+}
+function sortOptionsLabelsToFirst(options, query) {
+  return options.sort((first, second) => {
+    const firstContains = contains(first.label, query);
+    const secondContains = contains(second.label, query);
+    if (firstContains && secondContains) {
+      return 0;
     }
-    if (!hasActiveOptions && keyboardFocusedOptionIndex != null) {
-      setKeyboardFocusedOptionIndex(null);
+    if (firstContains) {
+      return -1;
     }
-  }
-  return /*#__PURE__*/jsxs("div", {
-    // eslint-disable-line jsx-a11y/no-static-element-interactions
-    ref: selectReference,
-    className: classNames(s('np-select'), block ? s('btn-block') : null, s('btn-group')),
-    onKeyDown: handleKeyDown,
-    onTouchMove: handleTouchStart,
-    onFocus: handleOnFocus,
-    onBlur: handleOnBlur,
-    children: [/*#__PURE__*/jsxs(Button, {
-      ref: dropdownButtonReference,
-      id: computedId,
-      block: block,
-      size: size,
-      htmlType: "button",
-      className: classNames(s('np-dropdown-toggle'), s('np-text-body-large'), inverse ? s('np-dropdown-toggle-navy') : null)
-      // reset Button's styles
-      ,
-      type: null,
-      priority: null,
-      disabled: disabled,
-      "aria-controls": listboxId,
-      "aria-expanded": open,
-      "aria-autocomplete": "none",
-      onClick: handleOnClick,
-      ...buttonProps,
-      children: [selected ? /*#__PURE__*/jsx(Option$1, {
-        ...selected,
-        classNames: classNamesProp,
-        selected: true
-      }) : /*#__PURE__*/jsx("span", {
-        className: s('form-control-placeholder'),
-        children: placeholder
-      }), /*#__PURE__*/jsx(Chevron$1
-      // disabled={disabled}
-      , {
-        className: classNames(s('tw-icon'), s('tw-chevron-up-icon'), s('tw-chevron'), s('bottom'), s('np-select-chevron'))
-      })]
-    }), isMobile ? isSearchEnabled ? /*#__PURE__*/jsx(Drawer$1, {
-      open: open,
-      headerTitle: searchPlaceholder || formatMessage(messages$3.searchPlaceholder),
-      onClose: handleCloseOptions,
-      children: renderOptionsList()
-    }) : /*#__PURE__*/jsx(BottomSheet$2, {
-      open: open,
-      onClose: handleCloseOptions,
-      children: renderOptionsList({
-        className: isModern ? '' : 'p-a-1'
-      })
-    }) : /*#__PURE__*/jsx(Panel$1, {
-      open: open,
-      flip: false,
-      altAxis: true,
-      anchorRef: selectReference,
-      anchorWidth: isDropdownAutoWidth,
-      position: dropdownUp ? Position.TOP : Position.BOTTOM,
-      onClose: handleCloseOptions,
-      children: renderOptionsList({
-        className: 'p-a-1'
-      })
-    })]
+    if (secondContains) {
+      return 1;
+    }
+    return 0;
   });
 }
-Select.propTypes = {
-  placeholder: PropTypes.string,
+MoneyInput.propTypes = {
   id: PropTypes.string,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  inverse: PropTypes.bool,
-  dropdownRight: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  dropdownWidth: PropTypes.oneOf(['sm', 'md', 'lg']),
+  currencies: PropTypes.arrayOf(Currency).isRequired,
+  selectedCurrency: Currency.isRequired,
+  onCurrencyChange: PropTypes.func,
+  placeholder: PropTypes.number,
+  amount: PropTypes.number,
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  block: PropTypes.bool,
-  selected: PropTypes.shape({
-    value: PropTypes.any.isRequired,
-    label: PropTypes.node,
-    icon: PropTypes.node,
-    currency: PropTypes.string,
-    note: PropTypes.node,
-    secondary: PropTypes.node
-  }),
-  /**
-   * Search toggle
-   * if `true` default search functionality being enabled (not case sensitive search in option labels & currency props)
-   * if `function` you can define your own search function to implement custom search experience. This search function used while filtering the options array. The custom search function takes two parameters. First is the option the second is the keyword.
-   */
-  search: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
-  onChange: PropTypes.func.isRequired,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  options: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.any,
-    label: PropTypes.node,
-    header: PropTypes.node,
-    icon: PropTypes.node,
-    currency: PropTypes.string,
-    note: PropTypes.node,
-    secondary: PropTypes.node,
-    separator: PropTypes.bool,
-    disabled: PropTypes.bool,
-    searchStrings: PropTypes.arrayOf(PropTypes.string)
-  })).isRequired,
+  onAmountChange: PropTypes.func,
+  addon: PropTypes.node,
+  searchPlaceholder: PropTypes.string,
   /**
-   * To have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array.
-   * DO NOT USE TOGETHER WITH `search` PROPERTY
+   * Allows the consumer to react to searching, while the search itself is handled internally. Called with `{ searchQuery: string, filteredOptions: Currency[]  }`
    */
   onSearchChange: PropTypes.func,
-  searchValue: PropTypes.string,
-  searchPlaceholder: PropTypes.string,
+  customActionLabel: PropTypes.node,
+  onCustomAction: PropTypes.func,
   classNames: PropTypes.objectOf(PropTypes.string),
-  dropdownUp: PropTypes.bool,
-  buttonProps: PropTypes.object,
-  dropdownProps: PropTypes.object
+  selectProps: PropTypes.object,
+  maxLengthOverride: PropTypes.number
 };
-Select.defaultProps = {
-  id: undefined,
-  placeholder: undefined,
-  size: 'md',
-  dropdownRight: null,
-  dropdownWidth: null,
-  inverse: false,
-  required: false,
-  disabled: false,
-  block: true,
-  selected: null,
-  onFocus: null,
-  onBlur: null,
+MoneyInput.defaultProps = {
+  id: null,
+  size: Size.LARGE,
+  addon: null,
+  searchPlaceholder: '',
   onSearchChange: undefined,
-  search: false,
-  searchValue: '',
-  searchPlaceholder: undefined,
+  onCurrencyChange: null,
+  placeholder: null,
+  amount: null,
+  onAmountChange: null,
+  customActionLabel: '',
+  onCustomAction: null,
   classNames: {},
-  dropdownUp: false,
-  buttonProps: {},
-  dropdownProps: {}
+  selectProps: {},
+  maxLengthOverride: null
 };
+var MoneyInput$1 = injectIntl(MoneyInput);
 
-var messages$2 = defineMessages({
-  selectPlaceholder: {
-    id: "neptune.MoneyInput.Select.placeholder"
-  }
-});
-
-// TODO: do not duplicate this between formatting and components
-const currencyDecimals = {
-  BIF: 0,
-  BYR: 0,
-  CLP: 0,
-  DJF: 0,
-  GNF: 0,
-  JPY: 0,
-  KMF: 0,
-  KRW: 0,
-  MGA: 0,
-  PYG: 0,
-  RWF: 0,
-  VND: 0,
-  VUV: 0,
-  XAF: 0,
-  XOF: 0,
-  XPF: 0,
-  // technically HUF does have decimals, but due to the exchange rate banks
-  // do not accept decimal amounts
-  HUF: 0,
-  BHD: 3,
-  JOD: 3,
-  KWD: 3,
-  OMR: 3,
-  TND: 3
+const NavigationOptionList = ({
+  children
+}) => {
+  return /*#__PURE__*/jsx("ul", {
+    className: "np-navigation-options-list",
+    children: Children.map(children, child => /*#__PURE__*/jsx("li", {
+      className: "np-navigation-options-list__item",
+      children: child
+    }, child.key))
+  });
 };
-const DEFAULT_CURRENCY_DECIMALS = 2;
-function isNumberLocaleSupported() {
-  const number = 1234;
-  const numberString = number.toLocaleString && number.toLocaleString(DEFAULT_LOCALE);
-  return numberString === '1,234';
-}
-function getValidLocale(locale) {
-  try {
-    const noUnderscoreLocale = locale.replace(/_/, '-');
-    Intl.NumberFormat(noUnderscoreLocale);
-    return noUnderscoreLocale;
-  } catch {
-    return 'en-GB';
-  }
-}
-function getCurrencyDecimals(currency = '') {
-  const upperCaseCurrency = currency.toUpperCase();
-  if (Object.prototype.hasOwnProperty.call(currencyDecimals, upperCaseCurrency)) {
-    return currencyDecimals[upperCaseCurrency];
-  }
-  return DEFAULT_CURRENCY_DECIMALS;
-}
-function getDecimalSeparator(locale) {
-  return isNumberLocaleSupported() ? 1.1.toLocaleString(locale)[1] : '.';
-}
-function parseAmount(number, currency, locale) {
-  const validLocale = getValidLocale(locale);
-  const precision = getCurrencyDecimals(currency);
-  const groupSeparator = isNumberLocaleSupported() ? 10000 .toLocaleString(validLocale)[2] : ',';
-  const decimalSeparator = getDecimalSeparator(validLocale);
-  const numberWithStandardDecimalSeparator = (number ? `${number}` : '').replace(new RegExp(`\\${groupSeparator}`, 'g'), '').replace(new RegExp(`\\${decimalSeparator}`, 'g'), '.').replace(/[^0-9.]/g, '');
-  const parsedAmount = parseFloat(parseFloat(numberWithStandardDecimalSeparator).toFixed(precision));
-  return Math.abs(parsedAmount);
-}
-
-const Currency = PropTypes.shape({
-  header: PropTypes.string,
-  value: PropTypes.string,
-  label: PropTypes.string,
-  currency: PropTypes.string,
-  note: PropTypes.string,
-  searchable: PropTypes.string
-});
-const CUSTOM_ACTION = 'CUSTOM_ACTION';
-const isNumberOrNull = v => isNumber(v) || isNull(v);
-const formatAmountIfSet = (amount, currency, locale, maxLengthOverride) => {
-  if (maxLengthOverride) {
-    return amount || '';
-  } else {
-    return typeof amount === 'number' ? formatAmount(amount, currency, locale) : '';
-  }
+NavigationOptionList.propTypes = {
+  children: PropTypes.node.isRequired
 };
-const parseNumber = (amount, currency, locale, maxLengthOverride) => {
-  if (!maxLengthOverride) {
-    return parseAmount(amount, currency, locale);
-  }
-  if (maxLengthOverride && amount.length > maxLengthOverride) {
-    return 0;
-  }
-  return +amount;
+var NavigationOptionList$1 = NavigationOptionList;
+
+const STORAGE_NAME = 'dismissedNudges';
+const getLocalStorage = () => {
+  try {
+    const storageItem = localStorage.getItem(STORAGE_NAME);
+    if (storageItem) {
+      const storage = JSON.parse(storageItem);
+      if (Array.isArray(storage)) {
+        return storage;
+      }
+    }
+    // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty
+  } catch (error) {}
+  return [];
 };
-const inputKeyCodeAllowlist = new Set([KeyCodes.BACKSPACE, KeyCodes.DELETE, KeyCodes.COMMA, KeyCodes.PERIOD, KeyCodes.DOWN, KeyCodes.UP, KeyCodes.LEFT, KeyCodes.RIGHT, KeyCodes.ENTER, KeyCodes.ESCAPE, KeyCodes.TAB]);
-const inputKeyAllowlist = new Set([Key.PERIOD, Key.COMMA]);
-class MoneyInput extends Component {
-  constructor(props) {
-    super(props);
-    const {
-      locale
-    } = this.props.intl;
-    this.formatMessage = this.props.intl.formatMessage;
-    this.state = {
-      searchQuery: '',
-      formattedAmount: formatAmountIfSet(props.amount, props.selectedCurrency.currency, locale, props.maxLengthOverride),
-      locale
-    };
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      locale: nextProps?.intl?.locale
-    });
-    if (!this.amountFocused) {
-      this.setState({
-        formattedAmount: formatAmountIfSet(nextProps.amount, nextProps.selectedCurrency.currency, nextProps?.intl?.locale, nextProps.maxLengthOverride)
-      });
-    }
-  }
-  isInputAllowedForKeyEvent = event => {
-    const {
-      keyCode,
-      metaKey,
-      key,
-      ctrlKey
-    } = event;
-    const isNumberKey = isNumber(parseInt(key, 10));
-    return isNumberKey || metaKey || ctrlKey || inputKeyCodeAllowlist.has(keyCode) || inputKeyAllowlist.has(key);
-  };
-  handleKeyDown = event => {
-    if (!this.isInputAllowedForKeyEvent(event)) {
-      event.preventDefault();
-    }
-  };
-  handlePaste = event => {
-    const paste = (event.clipboardData || window.clipboardData).getData('text');
-    const {
-      locale
-    } = this.state;
-    const parsed = isEmpty(paste) ? null : parseNumber(paste, this.props.selectedCurrency.currency, locale, this.props.maxLengthOverride);
-    if (isNumberOrNull(parsed)) {
-      this.setState({
-        formattedAmount: formatAmountIfSet(parsed, this.props.selectedCurrency.currency, locale, this.props.maxLengthOverride)
-      });
-      this.props.onAmountChange(parsed);
+const Nudge = ({
+  media,
+  mediaName,
+  title,
+  link,
+  href,
+  onClick,
+  onDismiss,
+  persistDismissal,
+  isPreviouslyDismissed,
+  id,
+  className
+}) => {
+  const [isDismissed, setIsDismissed] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+  const handleOnDismiss = () => {
+    const dismissedNudgesStorage = getLocalStorage();
+    if (persistDismissal && id) {
+      try {
+        localStorage.setItem(STORAGE_NAME, JSON.stringify([...(dismissedNudgesStorage ? dismissedNudgesStorage : []), id]));
+        // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty
+      } catch (error) {}
+      setIsDismissed(true);
     }
-    event.preventDefault();
-  };
-  onAmountChange = event => {
-    const {
-      value
-    } = event.target;
-    this.setState({
-      formattedAmount: value
-    });
-    const parsed = isEmpty(value) ? null : parseNumber(value, this.props.selectedCurrency.currency, this.state.locale, this.props.maxLengthOverride);
-    if (isNumberOrNull(parsed)) {
-      this.props.onAmountChange(parsed);
+    if (onDismiss) {
+      onDismiss();
     }
   };
-  onAmountBlur = () => {
-    this.amountFocused = false;
-    this.setAmount();
-  };
-  onAmountFocus = () => {
-    this.amountFocused = true;
-  };
-  getSelectOptions() {
-    const selectOptions = [...filterOptionsForQuery(this.props.currencies, this.state.searchQuery)];
-    if (this.props.onCustomAction) {
-      selectOptions.push({
-        value: CUSTOM_ACTION,
-        label: this.props.customActionLabel
-      });
-    }
-    return selectOptions;
-  }
-  setAmount() {
-    this.setState(previousState => {
-      const parsed = parseNumber(previousState.formattedAmount, this.props.selectedCurrency.currency, previousState.locale, this.props.maxLengthOverride);
-      if (!isNumberOrNull(parsed)) {
-        return {
-          formattedAmount: previousState.formattedAmount
-        };
+  useEffect(() => {
+    if (persistDismissal && id) {
+      const dismissedNudgesStorage = getLocalStorage();
+      let isDismissed = false;
+      if (dismissedNudgesStorage && dismissedNudgesStorage.find(item => item === id)) {
+        setIsDismissed(true);
+        isDismissed = true;
+      }
+      if (isPreviouslyDismissed) {
+        isPreviouslyDismissed(isDismissed);
       }
-      return {
-        formattedAmount: formatAmountIfSet(parsed, this.props.selectedCurrency.currency, previousState.locale, this.props.maxLengthOverride)
-      };
-    });
-  }
-  handleSelectChange = value => {
-    this.handleSearchChange('');
-    if (this.props.onCustomAction && value.value === CUSTOM_ACTION) {
-      this.props.onCustomAction();
-    } else {
-      this.props.onCurrencyChange(value);
-    }
-  };
-  handleSearchChange = searchQuery => {
-    this.setState({
-      searchQuery
-    });
-    if (this.props.onSearchChange) {
-      this.props.onSearchChange({
-        searchQuery,
-        filteredOptions: filterOptionsForQuery(this.props.currencies, searchQuery)
-      });
     }
-  };
-  style = className => this.props.classNames[className] || className;
-  render() {
-    const {
-      selectedCurrency,
-      onCurrencyChange,
-      size,
-      addon,
-      id,
-      selectProps,
-      maxLengthOverride
-    } = this.props;
-    const selectOptions = this.getSelectOptions();
-    const isFixedCurrency = !this.state.searchQuery && (selectOptions.length === 1 && selectOptions[0].currency === selectedCurrency.currency || !onCurrencyChange);
-    const disabled = !this.props.onAmountChange;
-    return /*#__PURE__*/jsxs("div", {
-      className: classNames(this.style('tw-money-input'), this.style('input-group'), this.style(`input-group-${size}`)),
-      children: [/*#__PURE__*/jsx(Input, {
-        id: id,
-        value: this.state.formattedAmount,
-        inputMode: "decimal",
-        disabled: disabled,
-        maxLength: maxLengthOverride,
-        placeholder: formatAmountIfSet(this.props.placeholder, this.props.selectedCurrency.currency, this.state.locale, this.props.maxLengthOverride),
-        autoComplete: "off",
-        onKeyDown: this.handleKeyDown,
-        onChange: this.onAmountChange,
-        onFocus: this.onAmountFocus,
-        onBlur: this.onAmountBlur,
-        onPaste: this.handlePaste
-      }), addon && /*#__PURE__*/jsx("span", {
-        className: classNames(this.style('input-group-addon'), this.style(`input-${size}`), disabled ? this.style('disabled') : ''),
-        children: addon
-      }), isFixedCurrency ? /*#__PURE__*/jsxs("div", {
-        className: classNames(this.style('input-group-addon'), this.style(`input-${size}`), this.style('tw-money-input__fixed-currency'), disabled ? this.style('disabled') : ''),
-        children: [(size === 'lg' || size === 'md') && /*#__PURE__*/jsxs(Fragment, {
-          children: [/*#__PURE__*/jsx("i", {
-            className: classNames(this.style('tw-money-input__keyline'))
-          }), /*#__PURE__*/jsx("i", {
-            className: classNames(this.style('currency-flag'), this.style(`currency-flag-${selectedCurrency.currency.toLowerCase()}`), this.style('m-r-2'))
-          })]
-        }), /*#__PURE__*/jsx(Title, {
-          as: "span",
-          type: Typography.TITLE_SUBSECTION,
-          className: size === 'lg' ? this.style('m-r-1') : '',
-          children: selectedCurrency.currency.toUpperCase()
-        })]
-      }) : /*#__PURE__*/jsx("div", {
-        className: classNames(this.style('input-group-btn'), this.style('amount-currency-select-btn')),
-        children: /*#__PURE__*/jsx(Select, {
-          id: id ? `${id}-select` : undefined,
-          classNames: this.props.classNames,
-          options: selectOptions,
-          selected: {
-            ...selectedCurrency,
-            label: /*#__PURE__*/jsx(Title, {
-              as: "span",
-              type: Typography.TITLE_SUBSECTION,
-              className: "tw-money-input__text",
-              children: selectedCurrency.label
-            }),
-            note: null
-          },
-          placeholder: this.formatMessage(messages$2.selectPlaceholder),
-          searchPlaceholder: this.props.searchPlaceholder,
-          searchValue: this.state.searchQuery,
-          size: size,
-          required: true,
-          dropdownWidth: Size.LARGE,
-          inverse: true,
-          onChange: this.handleSelectChange,
-          onSearchChange: this.handleSearchChange,
-          ...selectProps
-        })
-      })]
-    });
-  }
-}
-function filterOptionsForQuery(options, query) {
-  if (!query) {
-    return options;
+    setIsMounted(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id, persistDismissal]);
+  if (persistDismissal && (isDismissed || !isMounted)) {
+    return null;
   }
-  const filteredOptions = removeDuplicateValueOptions(options).filter(option => isCurrencyOptionAndFitsQuery(option, query));
-  return sortOptionsLabelsToFirst(filteredOptions, query);
-}
-function removeDuplicateValueOptions(options) {
-  const result = [];
-  const resultValues = [];
-  options.forEach(option => {
-    if (option.value && !resultValues.includes(option.value)) {
-      result.push(option);
-      resultValues.push(option.value);
-    }
-  });
-  return result;
-}
-function isCurrencyOptionAndFitsQuery(option, query) {
-  if (!option.value) {
-    return false;
-  }
-  return contains(option.label, query) || contains(option.searchable, query) || contains(option.note, query);
-}
-function contains(property, query) {
-  return property && property.toLowerCase().includes(query.toLowerCase());
-}
-function sortOptionsLabelsToFirst(options, query) {
-  return options.sort((first, second) => {
-    const firstContains = contains(first.label, query);
-    const secondContains = contains(second.label, query);
-    if (firstContains && secondContains) {
-      return 0;
-    }
-    if (firstContains) {
-      return -1;
-    }
-    if (secondContains) {
-      return 1;
-    }
-    return 0;
-  });
-}
-MoneyInput.propTypes = {
-  id: PropTypes.string,
-  currencies: PropTypes.arrayOf(Currency).isRequired,
-  selectedCurrency: Currency.isRequired,
-  onCurrencyChange: PropTypes.func,
-  placeholder: PropTypes.number,
-  amount: PropTypes.number,
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  onAmountChange: PropTypes.func,
-  addon: PropTypes.node,
-  searchPlaceholder: PropTypes.string,
-  /**
-   * Allows the consumer to react to searching, while the search itself is handled internally. Called with `{ searchQuery: string, filteredOptions: Currency[]  }`
-   */
-  onSearchChange: PropTypes.func,
-  customActionLabel: PropTypes.node,
-  onCustomAction: PropTypes.func,
-  classNames: PropTypes.objectOf(PropTypes.string),
-  selectProps: PropTypes.object,
-  maxLengthOverride: PropTypes.number
-};
-MoneyInput.defaultProps = {
-  id: null,
-  size: Size.LARGE,
-  addon: null,
-  searchPlaceholder: '',
-  onSearchChange: undefined,
-  onCurrencyChange: null,
-  placeholder: null,
-  amount: null,
-  onAmountChange: null,
-  customActionLabel: '',
-  onCustomAction: null,
-  classNames: {},
-  selectProps: {},
-  maxLengthOverride: null
-};
-var MoneyInput$1 = injectIntl(MoneyInput);
-
-const NavigationOptionList = ({
-  children
-}) => {
-  return /*#__PURE__*/jsx("ul", {
-    className: "np-navigation-options-list",
-    children: Children.map(children, child => /*#__PURE__*/jsx("li", {
-      className: "np-navigation-options-list__item",
-      children: child
-    }, child.key))
-  });
-};
-NavigationOptionList.propTypes = {
-  children: PropTypes.node.isRequired
-};
-var NavigationOptionList$1 = NavigationOptionList;
-
-const STORAGE_NAME = 'dismissedNudges';
-const getLocalStorage = () => {
-  try {
-    const storageItem = localStorage.getItem(STORAGE_NAME);
-    if (storageItem) {
-      const storage = JSON.parse(storageItem);
-      if (Array.isArray(storage)) {
-        return storage;
-      }
-    }
-    // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty
-  } catch (error) {}
-  return [];
-};
-const Nudge = ({
-  media,
-  mediaName,
-  title,
-  link,
-  href,
-  onClick,
-  onDismiss,
-  persistDismissal,
-  isPreviouslyDismissed,
-  id,
-  className
-}) => {
-  const [isDismissed, setIsDismissed] = useState(false);
-  const [isMounted, setIsMounted] = useState(false);
-  const handleOnDismiss = () => {
-    const dismissedNudgesStorage = getLocalStorage();
-    if (persistDismissal && id) {
-      try {
-        localStorage.setItem(STORAGE_NAME, JSON.stringify([...(dismissedNudgesStorage ? dismissedNudgesStorage : []), id]));
-        // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty
-      } catch (error) {}
-      setIsDismissed(true);
-    }
-    if (onDismiss) {
-      onDismiss();
-    }
-  };
-  useEffect(() => {
-    if (persistDismissal && id) {
-      const dismissedNudgesStorage = getLocalStorage();
-      let isDismissed = false;
-      if (dismissedNudgesStorage && dismissedNudgesStorage.find(item => item === id)) {
-        setIsDismissed(true);
-        isDismissed = true;
-      }
-      if (isPreviouslyDismissed) {
-        isPreviouslyDismissed(isDismissed);
-      }
-    }
-    setIsMounted(true);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [id, persistDismissal]);
-  if (persistDismissal && (isDismissed || !isMounted)) {
-    return null;
-  }
-  return /*#__PURE__*/jsxs("div", {
-    className: classNames('wds-nudge', className),
-    id: id,
-    children: [!!mediaName && /*#__PURE__*/jsx("div", {
-      className: "wds-nudge-media",
-      children: /*#__PURE__*/jsx(Illustration, {
-        name: mediaName,
-        className: classNames(`wds-nudge-media-${mediaName}`),
-        size: "small",
-        disablePadding: true,
-        alt: ""
-      })
-    }), /*#__PURE__*/jsxs("div", {
-      className: "wds-nudge-container",
-      children: [/*#__PURE__*/jsxs("div", {
-        className: "wds-nudge-content",
-        children: [/*#__PURE__*/jsx(Body, {
-          type: Typography.BODY_LARGE,
-          className: classNames('wds-nudge-body'),
-          children: title
-        }), link && /*#__PURE__*/jsx(Link, {
-          href: href,
-          type: Typography.LINK_LARGE,
-          className: "wds-nudge-link",
-          onClick: onClick,
-          children: link
-        })]
-      }), onDismiss || persistDismissal ? /*#__PURE__*/jsx(CloseButton, {
-        className: "wds-nudge-control",
-        size: "sm",
-        onClick: handleOnDismiss
-      }) : null]
-    })]
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames('wds-nudge', className),
+    id: id,
+    children: [!!mediaName && /*#__PURE__*/jsx("div", {
+      className: "wds-nudge-media",
+      children: /*#__PURE__*/jsx(Illustration, {
+        name: mediaName,
+        className: classNames(`wds-nudge-media-${mediaName}`),
+        size: "small",
+        disablePadding: true,
+        alt: ""
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: "wds-nudge-container",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "wds-nudge-content",
+        children: [/*#__PURE__*/jsx(Body, {
+          type: Typography.BODY_LARGE,
+          className: classNames('wds-nudge-body'),
+          children: title
+        }), link && /*#__PURE__*/jsx(Link, {
+          href: href,
+          type: Typography.LINK_LARGE,
+          className: "wds-nudge-link",
+          onClick: onClick,
+          children: link
+        })]
+      }), onDismiss || persistDismissal ? /*#__PURE__*/jsx(CloseButton, {
+        className: "wds-nudge-control",
+        size: "sm",
+        onClick: handleOnDismiss
+      }) : null]
+    })]
   });
 };
 
@@ -11024,179 +10424,836 @@ const Radio = ({
       })]
     })
   });
-};
-Radio.propTypes = {
-  avatar: PropTypes.element,
-  checked: PropTypes.bool,
-  disabled: PropTypes.bool,
+};
+Radio.propTypes = {
+  avatar: PropTypes.element,
+  checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  secondary: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string
+};
+Radio.defaultProps = {
+  avatar: undefined,
+  checked: false,
+  disabled: false,
+  id: null,
+  secondary: null,
+  value: '',
+  className: undefined
+};
+var Radio$1 = Radio;
+
+class RadioGroup extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedValue: props.selectedValue
+    };
+  }
+  handleOnChange = selectedValue => {
+    const {
+      onChange
+    } = this.props;
+    this.setState({
+      selectedValue
+    }, onChange && onChange(selectedValue));
+  };
+  render() {
+    const {
+      radios,
+      name
+    } = this.props;
+    const {
+      selectedValue
+    } = this.state;
+    return radios && radios.length > 0 ? /*#__PURE__*/jsx(Fragment, {
+      children: radios.map(({
+        id,
+        avatar,
+        value,
+        label,
+        disabled,
+        secondary,
+        readOnly
+      }, index) => /*#__PURE__*/jsx(Radio$1
+      // eslint-disable-next-line react/no-array-index-key
+      , {
+        id: id,
+        value: value,
+        label: label,
+        name: name,
+        disabled: disabled,
+        checked: selectedValue === value,
+        secondary: secondary,
+        readOnly: readOnly,
+        avatar: avatar,
+        onChange: value_ => this.handleOnChange(value_)
+      }, index))
+    }) : null;
+  }
+}
+RadioGroup.propTypes = {
+  radios: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    avatar: PropTypes.element,
+    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    secondary: PropTypes.string,
+    label: PropTypes.string.isRequired,
+    disabled: PropTypes.bool,
+    readOnly: PropTypes.bool
+  })).isRequired,
+  onChange: PropTypes.func.isRequired,
+  selectedValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  name: PropTypes.string.isRequired
+};
+RadioGroup.defaultProps = {
+  selectedValue: null
+};
+var RadioGroup$1 = RadioGroup;
+
+const RadioOption = ({
+  'aria-label': ariaLabel,
+  media,
+  title,
+  content,
+  id,
+  name,
+  checked,
+  onChange,
+  complex,
+  disabled,
+  value,
+  showMediaCircle,
+  showMediaAtAllSizes,
+  isContainerAligned
+}) => {
+  const sharedProps = {
+    'aria-label': ariaLabel,
+    media,
+    title,
+    content,
+    name,
+    complex,
+    disabled,
+    showMediaCircle,
+    showMediaAtAllSizes,
+    isContainerAligned
+  };
+  return /*#__PURE__*/jsx(Option$2, {
+    ...sharedProps,
+    button: /*#__PURE__*/jsx(RadioButton$1, {
+      id: id,
+      name: name,
+      checked: checked,
+      disabled: disabled,
+      value: value,
+      onChange: onChange
+    })
+  });
+};
+RadioOption.propTypes = {
+  'aria-label': PropTypes.string,
+  media: PropTypes.node,
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  title: PropTypes.node.isRequired,
+  content: PropTypes.node,
+  checked: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  complex: PropTypes.bool,
+  disabled: PropTypes.bool,
+  value: PropTypes.string,
+  showMediaCircle: PropTypes.bool,
+  showMediaAtAllSizes: PropTypes.bool,
+  isContainerAligned: PropTypes.bool
+};
+RadioOption.defaultProps = {
+  'aria-label': undefined,
+  media: null,
+  content: null,
+  checked: false,
+  complex: false,
+  disabled: false,
+  showMediaCircle: true,
+  showMediaAtAllSizes: false,
+  isContainerAligned: false,
+  value: ''
+};
+var RadioOption$1 = RadioOption;
+
+const Section = ({
+  children,
+  className,
+  withHorizontalPadding = false
+}) => {
+  return /*#__PURE__*/jsx("div", {
+    className: classNames('np-section', className, {
+      'np-section--with-horizontal-padding': withHorizontalPadding
+    }),
+    children: children
+  });
+};
+
+var messages$2 = defineMessages({
+  searchPlaceholder: {
+    id: "neptune.Select.searchPlaceholder"
+  }
+});
+
+// Option.tsx NEW
+function Option$1({
+  label,
+  currency = '',
+  note = '',
+  secondary = '',
+  icon,
+  classNames = {},
+  selected = false
+}) {
+  const {
+    isModern
+  } = useTheme();
+  const style = classes => classes.map(className => classNames[className] || className).join(' ');
+  const currencyClassNames = currency ? style(['currency-flag', `currency-flag-${currency.toLowerCase()}`]) : undefined;
+  const iconElement = icon ? /*#__PURE__*/cloneElement(icon, {
+    size: 24,
+    className: 'tw-icon'
+  }) : currency && /*#__PURE__*/jsx("i", {
+    className: currencyClassNames
+  });
+  const titleAndNoteElement = /*#__PURE__*/jsxs(Body, {
+    as: "span",
+    type: Typography.BODY_LARGE,
+    className: selected ? 'text-ellipsis' : undefined,
+    children: [label, note && /*#__PURE__*/jsx(Body, {
+      as: "span",
+      className: isModern ? 'm-l-1' : 'm-l-1 body-2',
+      children: note
+    })]
+  });
+  const secondaryElementClassNames = () => {
+    let classes = undefined;
+    if (selected) {
+      classes = 'text-ellipsis';
+    }
+    if (isModern) {
+      return classes;
+    }
+    return `${classes ? classes + ' ' : ''}body-2`;
+  };
+  const secondaryElement = secondary && /*#__PURE__*/jsx(Body, {
+    className: secondaryElementClassNames(),
+    children: secondary
+  });
+  return iconElement ? /*#__PURE__*/jsxs("div", {
+    className: "d-flex np-option-content",
+    children: [/*#__PURE__*/jsx("div", {
+      className: `d-flex flex-column${selected ? ' justify-content-center' : ''}`,
+      children: iconElement
+    }), /*#__PURE__*/jsxs("div", {
+      className: "d-flex flex-column justify-content-center",
+      children: [titleAndNoteElement, secondaryElement]
+    })]
+  }) : /*#__PURE__*/jsxs(Fragment, {
+    children: [iconElement, titleAndNoteElement, secondaryElement]
+  });
+}
+
+const SearchBox = /*#__PURE__*/forwardRef(({
+  id,
+  classNames: classNames$1 = {},
+  focusedOptionId,
+  onChange,
+  onClick,
+  placeholder = undefined,
+  value = ''
+}, reference) => {
+  const style = className => classNames$1[className] || className;
+  return /*#__PURE__*/jsx("li", {
+    className: style('border-bottom'),
+    children: /*#__PURE__*/jsx("a", {
+      className: `${style('np-select-filter-link')} ${style('p-a-0')}`,
+      children: /*#__PURE__*/jsxs("div", {
+        className: style('input-group'),
+        children: [/*#__PURE__*/jsx("span", {
+          className: classNames('input-group-addon', 'input-group-addon--search'),
+          children: /*#__PURE__*/jsx(Search, {
+            className: classNames(style('tw-icon'), style('tw-icon-search')),
+            size: 24
+          })
+        }), /*#__PURE__*/jsx(Input, {
+          ref: reference,
+          id: id,
+          role: "searchbox",
+          inputMode: "search",
+          className: classNames(style('np-select-filter')),
+          placeholder: placeholder,
+          value: value,
+          spellCheck: "false",
+          "aria-activedescendant": focusedOptionId,
+          onChange: onChange,
+          onClick: onClick
+        })]
+      })
+    })
+  });
+});
+var SearchBox$1 = SearchBox;
+
+const DEFAULT_SEARCH_VALUE = '';
+const DEFAULT_OPTIONS_PAGE_SIZE = 1000;
+const includesString = (string1, string2) => string1.toLowerCase().includes(string2.toLowerCase());
+function defaultFilterFunction(option, searchValue) {
+  if (isPlaceholderOption(option)) {
+    return true;
+  }
+  const {
+    label,
+    note,
+    secondary,
+    currency,
+    searchStrings
+  } = option;
+  return !!label && includesString(label, searchValue) || !!note && includesString(note, searchValue) || !!secondary && includesString(secondary, searchValue) || !!currency && includesString(currency, searchValue) || !!searchStrings && searchStrings.some(string => includesString(string, searchValue));
+}
+function isActionableOption(option) {
+  return !option.header && !option.separator && !option.disabled;
+}
+function isHeaderOption(option) {
+  return option != null && 'header' in option;
+}
+function isSeparatorOption(option) {
+  return option != null && 'separator' in option;
+}
+function clamp(from, to, value) {
+  return Math.max(Math.min(to, value), from);
+}
+
+/**
+ * No option or placeholder option is selected
+ */
+const DEFAULT_SELECTED_OPTION = null;
+function isPlaceholderOption(option) {
+  return option === DEFAULT_SELECTED_OPTION || 'placeholder' in option;
+}
+function isSearchableOption(option) {
+  return !isHeaderOption(option) && !isSeparatorOption(option) && !isPlaceholderOption(option);
+}
+const getUniqueIdForOption = (parentId = '', option) => {
+  if (option == null) {
+    return undefined;
+  }
+  const uniqueOptionId = option.value || (option.label?.replace(/\s/g, '') ?? '');
+  return `option-${parentId}-${uniqueOptionId}`;
+};
+
+/**
+ * @deprecated Use `SelectInput` instead (https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput)
+ */
+function Select({
+  placeholder,
+  id,
+  required,
+  disabled,
+  inverse,
+  dropdownWidth,
+  size,
+  block,
+  selected,
+  search,
+  onChange,
+  onFocus,
+  onBlur,
+  options: defaultOptions,
+  onSearchChange,
+  searchValue: initSearchValue,
+  searchPlaceholder,
+  // eslint-disable-next-line unicorn/prevent-abbreviations
+  classNames: classNamesProp,
+  dropdownUp,
+  dropdownProps,
+  buttonProps
+}) {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    isModern
+  } = useTheme();
+  const s = className => classNamesProp[className] || className;
+  const [open, setOpen] = useState(false);
+  const [searchValue, setSearchValue] = useState(DEFAULT_SEARCH_VALUE);
+  const [keyboardFocusedOptionIndex, setKeyboardFocusedOptionIndex] = useState(null);
+  const keyboardFocusedReference = useRef();
+  const previousKeyboardFocusedOptionIndex = useRef();
+  const [numberOfOptionsShown, setNumberOfOptionsShown] = useState(DEFAULT_OPTIONS_PAGE_SIZE);
+  const searchBoxReference = useRef(null);
+  const selectReference = useRef(null);
+  const dropdownButtonReference = useRef(null);
+  const optionsListReference = useRef(null);
+  const isSearchEnabled = !!onSearchChange || !!search;
+  const isDropdownAutoWidth = dropdownWidth == null;
+  const fallbackButtonId = useMemo(() => getSimpleRandomId('np-select-'), []);
+  const options = useMemo(() => {
+    if (!search || !searchValue) {
+      return defaultOptions;
+    }
+    return defaultOptions.filter(isSearchableOption).filter(option => {
+      if (typeof search === 'function') {
+        return search(option, searchValue);
+      } else {
+        return defaultFilterFunction(option, searchValue);
+      }
+    });
+  }, [defaultOptions, search, searchValue]);
+  const selectableOptions = useMemo(() => options.filter(isActionableOption), [options]);
+  const focusedOption = selectableOptions[keyboardFocusedOptionIndex];
+  const computedId = id || fallbackButtonId;
+  const listboxId = `${computedId}-listbox`;
+  const searchBoxId = `${computedId}-searchbox`;
+  const {
+    isMobile
+  } = useLayout();
+  useEffect(() => {
+    let cancelled;
+    if (keyboardFocusedOptionIndex >= 0) {
+      requestAnimationFrame(() => {
+        if (!cancelled) {
+          if (isSearchEnabled) {
+            keyboardFocusedReference.current?.scrollIntoView?.({
+              block: 'center'
+            });
+          } else {
+            keyboardFocusedReference.current?.focus();
+          }
+        }
+      });
+      return () => {
+        cancelled = true;
+      };
+    }
+  }, [keyboardFocusedOptionIndex, isSearchEnabled]);
+  const handleOnClick = () => {
+    setOpen(true);
+  };
+  const handleTouchStart = event => {
+    if (event.currentTarget === event.target && open) {
+      handleCloseOptions();
+    }
+  };
+  const handleOnFocus = event => {
+    if (onFocus) {
+      onFocus(event);
+    }
+  };
+  const handleOnBlur = event => {
+    const {
+      nativeEvent
+    } = event;
+    if (nativeEvent) {
+      const elementReceivingFocus = nativeEvent.relatedTarget;
+      const select = event.currentTarget;
+      if (select && elementReceivingFocus && select.contains(elementReceivingFocus)) {
+        return;
+      }
+    }
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+  const handleSearchChange = event => {
+    setNumberOfOptionsShown(DEFAULT_OPTIONS_PAGE_SIZE);
+    setSearchValue(event.target.value);
+    if (onSearchChange) {
+      onSearchChange(event.target.value);
+    }
+  };
+  const handleKeyDown = event => {
+    switch (event.keyCode) {
+      case KeyCodes.UP:
+      case KeyCodes.DOWN:
+        if (open) {
+          moveFocusWithDifference(event.keyCode === KeyCodes.UP ? -1 : 1);
+        } else {
+          setOpen(true);
+        }
+        stopPropagation$1(event);
+        break;
+      case KeyCodes.SPACE:
+        if (event.target !== searchBoxReference.current) {
+          if (open) {
+            selectKeyboardFocusedOption();
+          } else {
+            setOpen(true);
+          }
+          stopPropagation$1(event);
+        }
+        break;
+      case KeyCodes.ENTER:
+        if (open) {
+          selectKeyboardFocusedOption();
+        } else {
+          setOpen(true);
+        }
+        stopPropagation$1(event);
+        break;
+      case KeyCodes.ESCAPE:
+        handleCloseOptions();
+        stopPropagation$1(event);
+        break;
+      case KeyCodes.TAB:
+        if (open) {
+          selectKeyboardFocusedOption();
+        }
+        break;
+    }
+  };
+  function selectKeyboardFocusedOption() {
+    if (keyboardFocusedOptionIndex != null) {
+      selectableOptions.length > 0 && selectOption(selectableOptions[keyboardFocusedOptionIndex]);
+    }
+  }
+  function moveFocusWithDifference(difference) {
+    const selectedOptionIndex = selectableOptions.reduce((optionIndex, current, index) => {
+      if (optionIndex != null) {
+        return optionIndex;
+      }
+      if (isOptionSelected(selected, current)) {
+        return index;
+      }
+      return null;
+    }, null);
+    const previousFocusedIndex = previousKeyboardFocusedOptionIndex.current ?? -1;
+    let indexToStartMovingFrom = previousFocusedIndex;
+    if (previousFocusedIndex === -1) {
+      if (selectedOptionIndex == null) {
+        setKeyboardFocusedOptionIndex(0);
+      } else {
+        indexToStartMovingFrom = selectedOptionIndex;
+      }
+    }
+    const unClampedNewIndex = indexToStartMovingFrom + difference;
+    const newIndex = clamp(0, selectableOptions.length - 1, unClampedNewIndex);
+    setKeyboardFocusedOptionIndex(newIndex);
+  }
+  useEffect(() => {
+    if (open) {
+      if (!isMobile || searchValue) {
+        if (isSearchEnabled && !!searchBoxReference.current) {
+          searchBoxReference.current.focus();
+        }
+        if (!isSearchEnabled && optionsListReference.current && (previousKeyboardFocusedOptionIndex.current == null || Number.isNaN(previousKeyboardFocusedOptionIndex.current))) {
+          optionsListReference.current.focus();
+        }
+      }
+      previousKeyboardFocusedOptionIndex.current = keyboardFocusedOptionIndex;
+    } else {
+      previousKeyboardFocusedOptionIndex.current = null;
+    }
+  }, [open, searchValue, isSearchEnabled, isMobile, keyboardFocusedOptionIndex]);
+  const handleCloseOptions = () => {
+    setOpen(false);
+    setKeyboardFocusedOptionIndex(null);
+    if (dropdownButtonReference.current) {
+      dropdownButtonReference.current.focus();
+    }
+  };
+  function createSelectHandlerForOption(option) {
+    return event => {
+      stopPropagation$1(event);
+      selectOption(option);
+    };
+  }
+  function selectOption(option) {
+    onChange(isPlaceholderOption(option) ? DEFAULT_SELECTED_OPTION : option);
+    handleCloseOptions();
+  }
+  function renderOptionsList({
+    className
+  } = {}) {
+    const dropdownClass = classNames(s('np-dropdown-menu'), {
+      [s('np-dropdown-menu-desktop')]: !isMobile,
+      [s(`np-dropdown-menu-${dropdownWidth}`)]: !isMobile && !isDropdownAutoWidth
+    }, s(className));
+    const showPlaceholder = !required && !isSearchEnabled && Boolean(placeholder);
+    return /*#__PURE__*/jsxs("ul", {
+      ref: optionsListReference,
+      id: listboxId,
+      role: "listbox",
+      "aria-orientation": "vertical",
+      "aria-activedescendant": getUniqueIdForOption(id, selected),
+      tabIndex: "-1",
+      className: dropdownClass,
+      ...dropdownProps,
+      children: [showPlaceholder && /*#__PURE__*/jsx(PlaceHolderOption, {}), isSearchEnabled && /*#__PURE__*/jsx(SearchBox$1, {
+        ref: searchBoxReference,
+        id: searchBoxId,
+        classNames: classNamesProp,
+        value: initSearchValue || searchValue,
+        placeholder: searchPlaceholder || formatMessage(messages$2.searchPlaceholder),
+        focusedOptionId: getUniqueIdForOption(id, focusedOption),
+        onChange: handleSearchChange,
+        onClick: stopPropagation$1
+      }), options.slice(0, numberOfOptionsShown).map(renderOption), numberOfOptionsShown < options.length && /*#__PURE__*/jsx(ShowMoreOption, {})]
+    });
+  }
+  function ShowMoreOption() {
+    function handleOnClick(event) {
+      stopPropagation$1(event);
+      setNumberOfOptionsShown(numberOfOptionsShown + DEFAULT_OPTIONS_PAGE_SIZE);
+    }
+    return (
+      /*#__PURE__*/
+      /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
+      jsx("li", {
+        className: classNames(s('clickable'), s('border-bottom'), s('show-more')),
+        onClick: handleOnClick,
+        onKeyPress: handleOnClick,
+        children: /*#__PURE__*/jsx("a", {
+          children: "..."
+        })
+      })
+    );
+  }
+  function PlaceHolderOption() {
+    const placeholderOption = {
+      placeholder
+    };
+    return (
+      /*#__PURE__*/
+      /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
+      jsx("li", {
+        className: classNames(s('clickable'), s('border-bottom')),
+        onClick: createSelectHandlerForOption(placeholderOption),
+        onKeyPress: createSelectHandlerForOption(placeholderOption),
+        children: /*#__PURE__*/jsx("a", {
+          children: placeholder
+        })
+      })
+    );
+  }
+
+  // eslint-disable-next-line react/prop-types
+  function SeparatorOption() {
+    return /*#__PURE__*/jsx("li", {
+      className: s('np-separator'),
+      "aria-hidden": true
+    });
+  }
+
+  // eslint-disable-next-line react/prop-types
+  function HeaderOption({
+    children
+  }) {
+    return /*#__PURE__*/jsx("li", {
+      // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
+      className: classNames(s('np-dropdown-header'), s('np-text-title-group')),
+      onClick: stopPropagation$1,
+      onKeyPress: stopPropagation$1,
+      children: children
+    });
+  }
+  function isOptionSelected(selected, option) {
+    return selected?.value === option?.value;
+  }
+  const renderOption = (option, index) => {
+    const separatorOption = option;
+    if (isSeparatorOption(separatorOption) && separatorOption?.separator) {
+      return /*#__PURE__*/jsx(SeparatorOption, {}, index);
+    }
+    const headerOption = option;
+    if (isHeaderOption(headerOption) && headerOption.header) {
+      return /*#__PURE__*/jsx(HeaderOption, {
+        children: headerOption.header
+      }, index);
+    }
+    const isActive = isOptionSelected(selected, option);
+    const selectOption = option;
+    const isFocusedWithKeyboard = !selectOption.disabled && keyboardFocusedOptionIndex === getIndexWithoutHeadersForIndexWithHeaders(index);
+    const className = classNames(s('np-dropdown-item'), selectOption.disabled ? [s('disabled')] : s('clickable'), {
+      [s('active')]: isActive,
+      [s('np-dropdown-item--focused')]: isFocusedWithKeyboard
+    });
+    const handleOnClick = selectOption.disabled ? stopPropagation$1 : createSelectHandlerForOption(selectOption);
+    return (
+      /*#__PURE__*/
+      /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
+      jsx("li", {
+        ref: isFocusedWithKeyboard ? keyboardFocusedReference : undefined,
+        id: getUniqueIdForOption(id, option),
+        "aria-selected": isActive,
+        "aria-disabled": option.disabled,
+        role: "option",
+        tabIndex: "-1",
+        className: className,
+        onClick: handleOnClick,
+        onKeyPress: handleOnClick,
+        children: /*#__PURE__*/jsx("a", {
+          disabled: selectOption.disabled,
+          children: /*#__PURE__*/jsx(Option$1, {
+            ...selectOption,
+            classNames: classNamesProp
+          })
+        })
+      }, index)
+    );
+  };
+  function getIndexWithoutHeadersForIndexWithHeaders(index) {
+    return options.reduce((sum, option, currentIndex) => {
+      if (currentIndex < index && isActionableOption(option)) {
+        return sum + 1;
+      }
+      return sum;
+    }, 0);
+  }
+  const hasActiveOptions = !!defaultOptions.length;
+  if (open && (initSearchValue || searchValue)) {
+    if (hasActiveOptions && keyboardFocusedOptionIndex == null) {
+      setKeyboardFocusedOptionIndex(0);
+    }
+    if (!hasActiveOptions && keyboardFocusedOptionIndex != null) {
+      setKeyboardFocusedOptionIndex(null);
+    }
+  }
+  return /*#__PURE__*/jsxs("div", {
+    // eslint-disable-line jsx-a11y/no-static-element-interactions
+    ref: selectReference,
+    className: classNames(s('np-select'), block ? s('btn-block') : null, s('btn-group')),
+    onKeyDown: handleKeyDown,
+    onTouchMove: handleTouchStart,
+    onFocus: handleOnFocus,
+    onBlur: handleOnBlur,
+    children: [/*#__PURE__*/jsxs(Button, {
+      ref: dropdownButtonReference,
+      id: computedId,
+      block: block,
+      size: size,
+      htmlType: "button",
+      className: classNames(s('np-dropdown-toggle'), s('np-text-body-large'), inverse ? s('np-dropdown-toggle-navy') : null)
+      // reset Button's styles
+      ,
+      type: null,
+      priority: null,
+      disabled: disabled,
+      "aria-controls": listboxId,
+      "aria-expanded": open,
+      "aria-autocomplete": "none",
+      onClick: handleOnClick,
+      ...buttonProps,
+      children: [selected ? /*#__PURE__*/jsx(Option$1, {
+        ...selected,
+        classNames: classNamesProp,
+        selected: true
+      }) : /*#__PURE__*/jsx("span", {
+        className: s('form-control-placeholder'),
+        children: placeholder
+      }), /*#__PURE__*/jsx(Chevron$1
+      // disabled={disabled}
+      , {
+        className: classNames(s('tw-icon'), s('tw-chevron-up-icon'), s('tw-chevron'), s('bottom'), s('np-select-chevron'))
+      })]
+    }), isMobile ? isSearchEnabled ? /*#__PURE__*/jsx(Drawer$1, {
+      open: open,
+      headerTitle: searchPlaceholder || formatMessage(messages$2.searchPlaceholder),
+      onClose: handleCloseOptions,
+      children: renderOptionsList()
+    }) : /*#__PURE__*/jsx(BottomSheet$2, {
+      open: open,
+      onClose: handleCloseOptions,
+      children: renderOptionsList({
+        className: isModern ? '' : 'p-a-1'
+      })
+    }) : /*#__PURE__*/jsx(Panel$1, {
+      open: open,
+      flip: false,
+      altAxis: true,
+      anchorRef: selectReference,
+      anchorWidth: isDropdownAutoWidth,
+      position: dropdownUp ? Position.TOP : Position.BOTTOM,
+      onClose: handleCloseOptions,
+      children: renderOptionsList({
+        className: 'p-a-1'
+      })
+    })]
+  });
+}
+Select.propTypes = {
+  placeholder: PropTypes.string,
   id: PropTypes.string,
-  label: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  inverse: PropTypes.bool,
+  dropdownRight: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  dropdownWidth: PropTypes.oneOf(['sm', 'md', 'lg']),
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  block: PropTypes.bool,
+  selected: PropTypes.shape({
+    value: PropTypes.any.isRequired,
+    label: PropTypes.node,
+    icon: PropTypes.node,
+    currency: PropTypes.string,
+    note: PropTypes.node,
+    secondary: PropTypes.node
+  }),
+  /**
+   * Search toggle
+   * if `true` default search functionality being enabled (not case sensitive search in option labels & currency props)
+   * if `function` you can define your own search function to implement custom search experience. This search function used while filtering the options array. The custom search function takes two parameters. First is the option the second is the keyword.
+   */
+  search: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   onChange: PropTypes.func.isRequired,
-  secondary: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  className: PropTypes.string
-};
-Radio.defaultProps = {
-  avatar: undefined,
-  checked: false,
-  disabled: false,
-  id: null,
-  secondary: null,
-  value: '',
-  className: undefined
-};
-var Radio$1 = Radio;
-
-class RadioGroup extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedValue: props.selectedValue
-    };
-  }
-  handleOnChange = selectedValue => {
-    const {
-      onChange
-    } = this.props;
-    this.setState({
-      selectedValue
-    }, onChange && onChange(selectedValue));
-  };
-  render() {
-    const {
-      radios,
-      name
-    } = this.props;
-    const {
-      selectedValue
-    } = this.state;
-    return radios && radios.length > 0 ? /*#__PURE__*/jsx(Fragment, {
-      children: radios.map(({
-        id,
-        avatar,
-        value,
-        label,
-        disabled,
-        secondary,
-        readOnly
-      }, index) => /*#__PURE__*/jsx(Radio$1
-      // eslint-disable-next-line react/no-array-index-key
-      , {
-        id: id,
-        value: value,
-        label: label,
-        name: name,
-        disabled: disabled,
-        checked: selectedValue === value,
-        secondary: secondary,
-        readOnly: readOnly,
-        avatar: avatar,
-        onChange: value_ => this.handleOnChange(value_)
-      }, index))
-    }) : null;
-  }
-}
-RadioGroup.propTypes = {
-  radios: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    avatar: PropTypes.element,
-    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    secondary: PropTypes.string,
-    label: PropTypes.string.isRequired,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.any,
+    label: PropTypes.node,
+    header: PropTypes.node,
+    icon: PropTypes.node,
+    currency: PropTypes.string,
+    note: PropTypes.node,
+    secondary: PropTypes.node,
+    separator: PropTypes.bool,
     disabled: PropTypes.bool,
-    readOnly: PropTypes.bool
+    searchStrings: PropTypes.arrayOf(PropTypes.string)
   })).isRequired,
-  onChange: PropTypes.func.isRequired,
-  selectedValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  name: PropTypes.string.isRequired
-};
-RadioGroup.defaultProps = {
-  selectedValue: null
-};
-var RadioGroup$1 = RadioGroup;
-
-const RadioOption = ({
-  'aria-label': ariaLabel,
-  media,
-  title,
-  content,
-  id,
-  name,
-  checked,
-  onChange,
-  complex,
-  disabled,
-  value,
-  showMediaCircle,
-  showMediaAtAllSizes,
-  isContainerAligned
-}) => {
-  const sharedProps = {
-    'aria-label': ariaLabel,
-    media,
-    title,
-    content,
-    name,
-    complex,
-    disabled,
-    showMediaCircle,
-    showMediaAtAllSizes,
-    isContainerAligned
-  };
-  return /*#__PURE__*/jsx(Option$2, {
-    ...sharedProps,
-    button: /*#__PURE__*/jsx(RadioButton$1, {
-      id: id,
-      name: name,
-      checked: checked,
-      disabled: disabled,
-      value: value,
-      onChange: onChange
-    })
-  });
-};
-RadioOption.propTypes = {
-  'aria-label': PropTypes.string,
-  media: PropTypes.node,
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  title: PropTypes.node.isRequired,
-  content: PropTypes.node,
-  checked: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  complex: PropTypes.bool,
-  disabled: PropTypes.bool,
-  value: PropTypes.string,
-  showMediaCircle: PropTypes.bool,
-  showMediaAtAllSizes: PropTypes.bool,
-  isContainerAligned: PropTypes.bool
+  /**
+   * To have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array.
+   * DO NOT USE TOGETHER WITH `search` PROPERTY
+   */
+  onSearchChange: PropTypes.func,
+  searchValue: PropTypes.string,
+  searchPlaceholder: PropTypes.string,
+  classNames: PropTypes.objectOf(PropTypes.string),
+  dropdownUp: PropTypes.bool,
+  buttonProps: PropTypes.object,
+  dropdownProps: PropTypes.object
 };
-RadioOption.defaultProps = {
-  'aria-label': undefined,
-  media: null,
-  content: null,
-  checked: false,
-  complex: false,
+Select.defaultProps = {
+  id: undefined,
+  placeholder: undefined,
+  size: 'md',
+  dropdownRight: null,
+  dropdownWidth: null,
+  inverse: false,
+  required: false,
   disabled: false,
-  showMediaCircle: true,
-  showMediaAtAllSizes: false,
-  isContainerAligned: false,
-  value: ''
-};
-var RadioOption$1 = RadioOption;
-
-const Section = ({
-  children,
-  className,
-  withHorizontalPadding = false
-}) => {
-  return /*#__PURE__*/jsx("div", {
-    className: classNames('np-section', className, {
-      'np-section--with-horizontal-padding': withHorizontalPadding
-    }),
-    children: children
-  });
+  block: true,
+  selected: null,
+  onFocus: null,
+  onBlur: null,
+  onSearchChange: undefined,
+  search: false,
+  searchValue: '',
+  searchPlaceholder: undefined,
+  classNames: {},
+  dropdownUp: false,
+  buttonProps: {},
+  dropdownProps: {}
 };
 
 const CSS_TRANSITION_DURATION = 400;
@@ -14629,9 +14686,11 @@ var cs = {
 	"neptune.DateLookup.twentyYears": "20 let",
 	"neptune.DateLookup.year": "rok",
 	"neptune.FlowNavigation.back": "back to previous step",
+	"neptune.Info.ariaLabel": "Více informací",
 	"neptune.Link.opensInNewTab": "(opens in new tab)",
 	"neptune.MoneyInput.Select.placeholder": "Vybrat možnost...",
 	"neptune.Select.searchPlaceholder": "Hledat...",
+	"neptune.SelectInput.noResultsFound": "Nebyly nalezeny žádné výsledky",
 	"neptune.Summary.statusDone": "Položka dokončena",
 	"neptune.Summary.statusNotDone": "Položka k dokončení",
 	"neptune.Summary.statusPending": "Čekající položka",
@@ -14682,9 +14741,11 @@ var de = {
 	"neptune.DateLookup.twentyYears": "20 Jahre",
 	"neptune.DateLookup.year": "Jahr",
 	"neptune.FlowNavigation.back": "zurück zum vorherigen Schritt",
+	"neptune.Info.ariaLabel": "Weitere Informationen",
 	"neptune.Link.opensInNewTab": "(wird in einem neuen Tab geöffnet)",
 	"neptune.MoneyInput.Select.placeholder": "Wähle eine der Möglichkeiten aus...",
 	"neptune.Select.searchPlaceholder": "Wird gesucht...",
+	"neptune.SelectInput.noResultsFound": "Keine Ergebnisse gefunden",
 	"neptune.Summary.statusDone": "Schritt erledigt",
 	"neptune.Summary.statusNotDone": "Schritt noch zu erledigen",
 	"neptune.Summary.statusPending": "Schritt ausstehend",
@@ -14735,9 +14796,11 @@ var es = {
 	"neptune.DateLookup.twentyYears": "20 años",
 	"neptune.DateLookup.year": "año",
 	"neptune.FlowNavigation.back": "volver al paso anterior",
+	"neptune.Info.ariaLabel": "Más información",
 	"neptune.Link.opensInNewTab": "(se abre en una pestaña nueva)",
 	"neptune.MoneyInput.Select.placeholder": "Selecciona una opción...",
 	"neptune.Select.searchPlaceholder": "Buscar...",
+	"neptune.SelectInput.noResultsFound": "No se han encontrado resultados",
 	"neptune.Summary.statusDone": "Apartado listo",
 	"neptune.Summary.statusNotDone": "Apartado a completar",
 	"neptune.Summary.statusPending": "Apartado pendiente",
@@ -14788,9 +14851,11 @@ var fr = {
 	"neptune.DateLookup.twentyYears": "20 ans",
 	"neptune.DateLookup.year": "année",
 	"neptune.FlowNavigation.back": "revenir à l'étape précédente",
+	"neptune.Info.ariaLabel": "Plus d'informations",
 	"neptune.Link.opensInNewTab": "(ouvre dans un nouvel onglet)",
 	"neptune.MoneyInput.Select.placeholder": "Sélectionner une option...",
 	"neptune.Select.searchPlaceholder": "Recherche...",
+	"neptune.SelectInput.noResultsFound": "Aucun résultat trouvé",
 	"neptune.Summary.statusDone": "Validé",
 	"neptune.Summary.statusNotDone": "À compléter",
 	"neptune.Summary.statusPending": "En attente",
@@ -14841,9 +14906,11 @@ var hu = {
 	"neptune.DateLookup.twentyYears": "20 év",
 	"neptune.DateLookup.year": "év",
 	"neptune.FlowNavigation.back": "vissza az előző lépéshez",
+	"neptune.Info.ariaLabel": "További információ",
 	"neptune.Link.opensInNewTab": "(új lapon nyílik meg)",
 	"neptune.MoneyInput.Select.placeholder": "Válassz ki egy lehetőséget...",
 	"neptune.Select.searchPlaceholder": "Keresés...",
+	"neptune.SelectInput.noResultsFound": "Nincs találat",
 	"neptune.Summary.statusDone": "Kész",
 	"neptune.Summary.statusNotDone": "Hátravan",
 	"neptune.Summary.statusPending": "Függőben",
@@ -14894,9 +14961,11 @@ var id = {
 	"neptune.DateLookup.twentyYears": "20 tahun",
 	"neptune.DateLookup.year": "tahun",
 	"neptune.FlowNavigation.back": "kembali ke langkah sebelumnya",
+	"neptune.Info.ariaLabel": "Informasi lebih lanjut",
 	"neptune.Link.opensInNewTab": "(terbuka di tab baru)",
 	"neptune.MoneyInput.Select.placeholder": "Pilih opsi...",
 	"neptune.Select.searchPlaceholder": "Cari...",
+	"neptune.SelectInput.noResultsFound": "Hasil tidak ditemukan",
 	"neptune.Summary.statusDone": "Item selesai",
 	"neptune.Summary.statusNotDone": "Item yang harus dilakukan",
 	"neptune.Summary.statusPending": "Item tertunda",
@@ -14947,9 +15016,11 @@ var it = {
 	"neptune.DateLookup.twentyYears": "20 anni",
 	"neptune.DateLookup.year": "anno",
 	"neptune.FlowNavigation.back": "torna al passaggio precedente",
+	"neptune.Info.ariaLabel": "Maggiori informazioni",
 	"neptune.Link.opensInNewTab": "(si apre in una nuova scheda)",
 	"neptune.MoneyInput.Select.placeholder": "Seleziona un'opzione...",
 	"neptune.Select.searchPlaceholder": "Cerca...",
+	"neptune.SelectInput.noResultsFound": "Nessun risultato trovato",
 	"neptune.Summary.statusDone": "Completato",
 	"neptune.Summary.statusNotDone": "Da completare",
 	"neptune.Summary.statusPending": "In corso",
@@ -15000,9 +15071,11 @@ var ja = {
 	"neptune.DateLookup.twentyYears": "20年",
 	"neptune.DateLookup.year": "年",
 	"neptune.FlowNavigation.back": "前のステップに戻る",
+	"neptune.Info.ariaLabel": "詳細",
 	"neptune.Link.opensInNewTab": "（新しいタブで開きます）",
 	"neptune.MoneyInput.Select.placeholder": "選択してください...",
 	"neptune.Select.searchPlaceholder": "検索... ",
+	"neptune.SelectInput.noResultsFound": "結果が見つかりませんでした",
 	"neptune.Summary.statusDone": "完了",
 	"neptune.Summary.statusNotDone": "未対応",
 	"neptune.Summary.statusPending": "保留中",
@@ -15053,9 +15126,11 @@ var pl = {
 	"neptune.DateLookup.twentyYears": "20 lat",
 	"neptune.DateLookup.year": "rok",
 	"neptune.FlowNavigation.back": "wróć do poprzedniego kroku",
+	"neptune.Info.ariaLabel": "Więcej informacji",
 	"neptune.Link.opensInNewTab": "(otworzy się w nowej zakładce)",
 	"neptune.MoneyInput.Select.placeholder": "Wybierz opcję...",
 	"neptune.Select.searchPlaceholder": "Wyszukaj...",
+	"neptune.SelectInput.noResultsFound": "Nie znaleziono wyników",
 	"neptune.Summary.statusDone": "Czynność wykonana",
 	"neptune.Summary.statusNotDone": "Czynność do wykonania",
 	"neptune.Summary.statusPending": "Czynność oczekująca",
@@ -15098,17 +15173,19 @@ var pt = {
 	"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.goTo20YearView": "Acessar a visualização de 20 anos",
 	"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.FlowNavigation.back": "voltar à etapa anterior",
+	"neptune.Info.ariaLabel": "Mais informações",
+	"neptune.Link.opensInNewTab": "(abre em uma nova aba)",
 	"neptune.MoneyInput.Select.placeholder": "Escolha uma opção...",
 	"neptune.Select.searchPlaceholder": "Buscar...",
+	"neptune.SelectInput.noResultsFound": "Nenhum resultado encontrado",
 	"neptune.Summary.statusDone": "Pronto",
 	"neptune.Summary.statusNotDone": "Não iniciado",
 	"neptune.Summary.statusPending": "Pendente",
@@ -15152,16 +15229,18 @@ var ro = {
 	"neptune.DateInput.year.label": "An",
 	"neptune.DateLookup.day": "zi",
 	"neptune.DateLookup.goTo20YearView": "Accesează vizualizarea pe 20 de ani",
-	"neptune.DateLookup.month": "luna",
+	"neptune.DateLookup.month": "lună",
 	"neptune.DateLookup.next": "înainte",
-	"neptune.DateLookup.previous": "precedenta",
+	"neptune.DateLookup.previous": "înapoi",
 	"neptune.DateLookup.selected": "selectată",
 	"neptune.DateLookup.twentyYears": "20 de ani",
-	"neptune.DateLookup.year": "anul",
+	"neptune.DateLookup.year": "an",
 	"neptune.FlowNavigation.back": "înapoi la pasul anterior",
+	"neptune.Info.ariaLabel": "Mai multe informații",
 	"neptune.Link.opensInNewTab": "(se deschide într-o filă nouă)",
 	"neptune.MoneyInput.Select.placeholder": "Selectează o opţiune...",
 	"neptune.Select.searchPlaceholder": "Caută...",
+	"neptune.SelectInput.noResultsFound": "Nu s-a găsit niciun rezultat",
 	"neptune.Summary.statusDone": "Finalizat",
 	"neptune.Summary.statusNotDone": "De făcut",
 	"neptune.Summary.statusPending": "În așteptare",
@@ -15207,14 +15286,16 @@ var ru = {
 	"neptune.DateLookup.goTo20YearView": "Перейти к обзору 20 лет",
 	"neptune.DateLookup.month": "месяц",
 	"neptune.DateLookup.next": "далее",
-	"neptune.DateLookup.previous": "предыдущий",
+	"neptune.DateLookup.previous": "назад",
 	"neptune.DateLookup.selected": "выбрано",
 	"neptune.DateLookup.twentyYears": "20 лет",
 	"neptune.DateLookup.year": "год",
 	"neptune.FlowNavigation.back": "вернуться к предыдущему шагу",
+	"neptune.Info.ariaLabel": "Подробнее",
 	"neptune.Link.opensInNewTab": "(откроется в новой вкладке)",
 	"neptune.MoneyInput.Select.placeholder": "Выберите вариант...",
 	"neptune.Select.searchPlaceholder": "Поиск...",
+	"neptune.SelectInput.noResultsFound": "Ничего не найдено",
 	"neptune.Summary.statusDone": "Этап завершен",
 	"neptune.Summary.statusNotDone": "Этап к выполнению",
 	"neptune.Summary.statusPending": "Этап в процессе",
@@ -15265,9 +15346,11 @@ var th = {
 	"neptune.DateLookup.twentyYears": "20 ปี",
 	"neptune.DateLookup.year": "ปี",
 	"neptune.FlowNavigation.back": "back to previous step",
+	"neptune.Info.ariaLabel": "ข้อมูลเพิ่มเติม",
 	"neptune.Link.opensInNewTab": "(opens in new tab)",
 	"neptune.MoneyInput.Select.placeholder": "เลือกตัวเลือก...",
 	"neptune.Select.searchPlaceholder": "ค้นหา...",
+	"neptune.SelectInput.noResultsFound": "ไม่พบผลลัพธ์",
 	"neptune.Summary.statusDone": "รายการที่ทำแล้ว",
 	"neptune.Summary.statusNotDone": "รายการที่ต้องทำ",
 	"neptune.Summary.statusPending": "รายการที่รอดำเนินการ",
@@ -15318,9 +15401,11 @@ var tr = {
 	"neptune.DateLookup.twentyYears": "20 yıl",
 	"neptune.DateLookup.year": "yıl",
 	"neptune.FlowNavigation.back": "önceki adıma dön",
+	"neptune.Info.ariaLabel": "Daha fazla bilgi",
 	"neptune.Link.opensInNewTab": "(yeni sekmede açılır)",
 	"neptune.MoneyInput.Select.placeholder": "Bir seçenek seçin...",
 	"neptune.Select.searchPlaceholder": "Ara...",
+	"neptune.SelectInput.noResultsFound": "Sonuç bulunamadı",
 	"neptune.Summary.statusDone": "Tamamlanan aşama",
 	"neptune.Summary.statusNotDone": "Yapılacak",
 	"neptune.Summary.statusPending": "Bekliyor",
@@ -15371,9 +15456,11 @@ var uk = {
 	"neptune.DateLookup.twentyYears": "20 років",
 	"neptune.DateLookup.year": "рік",
 	"neptune.FlowNavigation.back": "back to previous step",
+	"neptune.Info.ariaLabel": "Більше відомостей",
 	"neptune.Link.opensInNewTab": "(opens in new tab)",
 	"neptune.MoneyInput.Select.placeholder": "Виберіть варіант…",
 	"neptune.Select.searchPlaceholder": "Пошук…",
+	"neptune.SelectInput.noResultsFound": "Нічого не знайдено",
 	"neptune.Summary.statusDone": "Виконано",
 	"neptune.Summary.statusNotDone": "Не виконано",
 	"neptune.Summary.statusPending": "Виконується",
@@ -15410,23 +15497,25 @@ var uk = {
 var zhCN = {
 	"neptune.Button.loadingAriaLabel": "正在加载",
 	"neptune.Chips.ariaLabel": "清除 {choice}",
-	"neptune.ClearButton.ariaLabel": "清晰",
+	"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.goTo20YearView": "转到 20 年视图",
 	"neptune.DateLookup.month": "月",
 	"neptune.DateLookup.next": "下一页",
 	"neptune.DateLookup.previous": "上一页",
 	"neptune.DateLookup.selected": "已选",
-	"neptune.DateLookup.twentyYears": "20年",
+	"neptune.DateLookup.twentyYears": "20 年",
 	"neptune.DateLookup.year": "年",
-	"neptune.FlowNavigation.back": "back to previous step",
-	"neptune.Link.opensInNewTab": "(opens in new tab)",
+	"neptune.FlowNavigation.back": "返回上一步",
+	"neptune.Info.ariaLabel": "更多信息",
+	"neptune.Link.opensInNewTab": "（在新标签页中打开）",
 	"neptune.MoneyInput.Select.placeholder": "请选择...",
 	"neptune.Select.searchPlaceholder": "搜索",
+	"neptune.SelectInput.noResultsFound": "找不到结果",
 	"neptune.Summary.statusDone": "已完成",
 	"neptune.Summary.statusNotDone": "未完成",
 	"neptune.Summary.statusPending": "待处理",
@@ -15442,7 +15531,7 @@ var zhCN = {
 	"neptune.Upload.usPlaceholder": "拖放小于 5MB 的文件",
 	"neptune.UploadButton.allFileTypes": "所有文件类型",
 	"neptune.UploadButton.dropFiles": "拖放文件开始上传",
-	"neptune.UploadButton.instructions": "{fileTypes}，小于 {size}MB",
+	"neptune.UploadButton.instructions": "{fileTypes}，小于 {size} MB",
 	"neptune.UploadButton.uploadFile": "上传文件",
 	"neptune.UploadButton.uploadFiles": "上传文件",
 	"neptune.UploadInput.deleteModalBody": "删除此文件会将其从我们的系统中删除",
@@ -15477,9 +15566,11 @@ var zhHK = {
 	"neptune.DateLookup.twentyYears": "20年",
 	"neptune.DateLookup.year": "年",
 	"neptune.FlowNavigation.back": "返回上一個步驟",
+	"neptune.Info.ariaLabel": "更多資訊",
 	"neptune.Link.opensInNewTab": "（在新分頁中開啟）",
 	"neptune.MoneyInput.Select.placeholder": "選擇一個選項…",
 	"neptune.Select.searchPlaceholder": "搜尋…",
+	"neptune.SelectInput.noResultsFound": "找不到任何結果",
 	"neptune.Summary.statusDone": "已完成事項",
 	"neptune.Summary.statusNotDone": "未完成事項",
 	"neptune.Summary.statusPending": "待處理事項",