@transferwise/components 45.27.0 → 45.28.0

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);
@@ -6930,7 +6931,8 @@ function SelectInput({
         filterable: filterable,
         filterPlaceholder: filterPlaceholder,
         searchInputRef: searchInputRef,
-        listboxRef: listboxRef
+        listboxRef: listboxRef,
+        onSearchChange: onSearchChange
       })
     })
   });
@@ -6998,7 +7000,8 @@ function SelectInputOptions({
   filterable = false,
   filterPlaceholder,
   searchInputRef,
-  listboxRef
+  listboxRef,
+  onSearchChange
 }) {
   const intl = useIntl();
   const controllerRef = filterable ? searchInputRef : listboxRef;
@@ -7050,6 +7053,9 @@ function SelectInputOptions({
         },
         onChange: event => {
           setQuery(event.currentTarget.value);
+          if (onSearchChange) {
+            onSearchChange(event.currentTarget.value);
+          }
         }
       })
     }) : null, /*#__PURE__*/jsxs("section", {
@@ -7779,1139 +7785,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;
+      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();
     }
-  }, [open, searchValue, isSearchEnabled, isMobile, keyboardFocusedOptionIndex]);
-  const handleCloseOptions = () => {
-    setOpen(false);
-    setKeyboardFocusedOptionIndex(null);
-    if (dropdownButtonReference.current) {
-      dropdownButtonReference.current.focus();
+  };
+  handleSearchChange = searchQuery => {
+    this.setState({
+      searchQuery
+    });
+    if (this.props.onSearchChange) {
+      this.props.onSearchChange({
+        searchQuery,
+        filteredOptions: filterOptionsForQuery(this.props.currencies, searchQuery)
+      });
     }
   };
-  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, {})]
-    });
-  }
-  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
+  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 +10417,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;