@transferwise/components 0.0.0-experimental-08d336e → 0.0.0-experimental-b069e0c

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';
@@ -1847,36 +1847,43 @@ const useHasIntersected = ({
   return [hasIntersected];
 };
 
-function useMedia(query) {
-  return useSyncExternalStore(onStoreChange => {
-    const mediaQueryList = window.matchMedia(query);
-    mediaQueryList.addEventListener('change', onStoreChange);
-    return () => {
-      mediaQueryList.removeEventListener('change', onStoreChange);
-    };
-  }, () => typeof window !== 'undefined' ? window.matchMedia(query).matches : undefined, () => undefined);
-}
-
-function useScreenSize(size) {
-  return useMedia(`(min-width: ${size}px)`);
-}
-
-/**
- * @deprecated Prefer `useScreenSize` instead.
- */
 const useLayout = () => {
-  const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);
-  const screenSm = useScreenSize(Breakpoint.SMALL);
-  const screenMd = useScreenSize(Breakpoint.MEDIUM);
-  const screenLg = useScreenSize(Breakpoint.LARGE);
-  const screenXl = useScreenSize(Breakpoint.EXTRA_LARGE);
+  const windowReference = typeof window === 'undefined' ? undefined : window;
+  const [breakpoint, setBreakpoint] = useState();
+  const [clientWidth] = useClientWidth({
+    ref: windowReference
+  });
+  useEffect(() => {
+    if (!clientWidth) {
+      return;
+    }
+    if (clientWidth <= Breakpoint.EXTRA_SMALL) {
+      setBreakpoint(Breakpoint.EXTRA_SMALL);
+      return;
+    }
+    if (Breakpoint.EXTRA_SMALL < clientWidth && clientWidth <= Breakpoint.SMALL) {
+      setBreakpoint(Breakpoint.SMALL);
+      return;
+    }
+    if (Breakpoint.SMALL < clientWidth && clientWidth <= Breakpoint.MEDIUM) {
+      setBreakpoint(Breakpoint.MEDIUM);
+      return;
+    }
+    if (Breakpoint.MEDIUM < clientWidth && clientWidth <= Breakpoint.LARGE) {
+      setBreakpoint(Breakpoint.LARGE);
+      return;
+    }
+    if (Breakpoint.LARGE < clientWidth) {
+      setBreakpoint(Breakpoint.EXTRA_LARGE);
+    }
+  }, [clientWidth]);
   return {
-    isMobile: screenSm != null ? !screenSm : undefined,
-    isExtraSmall: screenXs,
-    isSmall: screenSm,
-    isMedium: screenMd,
-    isLarge: screenLg,
-    isExtraLarge: screenXl
+    isMobile: !!breakpoint && [Breakpoint.EXTRA_SMALL, Breakpoint.SMALL].includes(breakpoint),
+    isExtraSmall: breakpoint === Breakpoint.EXTRA_SMALL,
+    isSmall: breakpoint === Breakpoint.SMALL,
+    isMedium: breakpoint === Breakpoint.MEDIUM,
+    isLarge: breakpoint === Breakpoint.LARGE,
+    isExtraLarge: breakpoint === Breakpoint.EXTRA_LARGE
   };
 };
 
@@ -2001,6 +2008,16 @@ Drawer.defaultProps = {
 };
 var Drawer$1 = Drawer;
 
+function useMedia(query) {
+  return useSyncExternalStore(onStoreChange => {
+    const mediaQueryList = window.matchMedia(query);
+    mediaQueryList.addEventListener('change', onStoreChange);
+    return () => {
+      mediaQueryList.removeEventListener('change', onStoreChange);
+    };
+  }, () => typeof window !== 'undefined' ? window.matchMedia(query).matches : undefined, () => undefined);
+}
+
 const INITIAL_Y_POSITION = 0;
 const CONTENT_SCROLL_THRESHOLD = 1;
 const MOVE_OFFSET_THRESHOLD = 50;
@@ -6009,13 +6026,14 @@ const Modal = ({
 }) => {
   const checkSpecialClasses = classToCheck => className?.split(' ').includes(classToCheck);
   const {
-    isMedium
+    isMobile,
+    isMedium: isTablet
   } = useLayout();
   // These should be replaced with props in breaking change.
   const isCompact = checkSpecialClasses('compact');
   const noDivider = checkSpecialClasses('no-divider');
   const contentReference = useRef(null);
-  return !isMedium ? /*#__PURE__*/jsx(Drawer$1, {
+  return isMobile || isTablet ? /*#__PURE__*/jsx(Drawer$1, {
     open: open,
     headerTitle: title,
     footerContent: footer,
@@ -6449,6 +6467,10 @@ const SearchInput = /*#__PURE__*/forwardRef(function SearchInput({
   });
 });
 
+function useScreenSize(size) {
+  return useMedia(`(min-width: ${size}px)`);
+}
+
 const PolymorphicWithOverrides = /*#__PURE__*/forwardRef(function PolymorphicWithOverrides({
   __overrides: {
     as: Element,
@@ -6838,6 +6860,7 @@ function SelectInput({
   size = 'md',
   className,
   onChange,
+  onSearchChange,
   onClear
 }) {
   const [open, setOpen] = useState(false);
@@ -6908,7 +6931,8 @@ function SelectInput({
         filterable: filterable,
         filterPlaceholder: filterPlaceholder,
         searchInputRef: searchInputRef,
-        listboxRef: listboxRef
+        listboxRef: listboxRef,
+        onSearchChange: onSearchChange
       })
     })
   });
@@ -6976,7 +7000,8 @@ function SelectInputOptions({
   filterable = false,
   filterPlaceholder,
   searchInputRef,
-  listboxRef
+  listboxRef,
+  onSearchChange
 }) {
   const intl = useIntl();
   const controllerRef = filterable ? searchInputRef : listboxRef;
@@ -7028,6 +7053,9 @@ function SelectInputOptions({
         },
         onChange: event => {
           setQuery(event.currentTarget.value);
+          if (onSearchChange) {
+            onSearchChange(event.currentTarget.value);
+          }
         }
       })
     }) : null, /*#__PURE__*/jsxs("section", {
@@ -7757,1105 +7785,491 @@ 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 firstOptionValue = () => {
+      if (selectOptions.length !== 0) {
+        const firstOption = selectOptions[0];
+        if (firstOption.type === 'option') {
+          return firstOption.value.value;
+        }
+        if (firstOption.type === 'group' && firstOption.options.length !== 0) {
+          return firstOption.options[0].value.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 = firstOptionValue();
+    const isFixedCurrency = selectOptions.length === 1 && firstOption === 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,
+          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 filterOptionsForQuery(options, query) {
+  if (!query) {
+    return options;
   }
-  function isOptionSelected(selected, option) {
-    return selected?.value === option?.value;
+  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;
   }
-  const renderOption = (option, index) => {
-    const separatorOption = option;
-    if (isSeparatorOption(separatorOption) && separatorOption?.separator) {
-      return /*#__PURE__*/jsx(SeparatorOption, {}, index);
+  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;
     }
-    const headerOption = option;
-    if (isHeaderOption(headerOption) && headerOption.header) {
-      return /*#__PURE__*/jsx(HeaderOption, {
-        children: headerOption.header
-      }, index);
+    if (firstContains) {
+      return -1;
     }
-    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);
+    if (secondContains) {
+      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'
-      })
-    })]
+    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);
-}
+NavigationOptionList.propTypes = {
+  children: PropTypes.node.isRequired
+};
+var NavigationOptionList$1 = NavigationOptionList;
 
-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) : '';
-  }
-};
-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: '',
-      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();
+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;
+      }
     }
-  };
-  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);
+    // 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);
     }
-    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;
-  }
-  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;
+    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),
@@ -11002,179 +10416,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;
@@ -15512,5 +15583,5 @@ const translations = {
   'zh-HK': zhHK
 };
 
-export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron$1 as Chevron, Chip, Chips, CircularButton$1 as CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput$1 as DateInput, DateLookup$1 as DateLookup, DateMode, Decision$1 as Decision, Presentation as DecisionPresentation, Type as DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat$1 as InputWithDisplayFormat, InstructionsList$1 as InstructionsList, LanguageProvider, Layout$1 as Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown$1 as Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput$1 as PhoneNumberInput, Popover$2 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioOption$1 as RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider$1 as SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat$1 as TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type$1 as Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
+export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron$1 as Chevron, Chip, Chips, CircularButton$1 as CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput$1 as DateInput, DateLookup$1 as DateLookup, DateMode, Decision$1 as Decision, Presentation as DecisionPresentation, Type as DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat$1 as InputWithDisplayFormat, InstructionsList$1 as InstructionsList, LanguageProvider, Layout$1 as Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown$1 as Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput$1 as PhoneNumberInput, Popover$2 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioOption$1 as RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider$1 as SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat$1 as TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type$1 as Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useSnackbar };
 //# sourceMappingURL=index.esm.js.map