@transferwise/components 46.6.0 → 46.8.0

package/build/index.esm.js

@@ -19,7 +19,7 @@ import { CSSTransition } from 'react-transition-group';
 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 { isUndefined, isKey, isNumber, isEmpty, isNull } from '@transferwise/neptune-validation';
 import { Flag, Illustration } from '@wise/art';
 import clamp$2 from 'lodash.clamp';
 import debounce from 'lodash.debounce';
@@ -342,131 +342,76 @@ const Key = {
   COMMA: ','
 };
 
-/**
- * Default language
- *
- * @type {string}
- */
 const DEFAULT_LANG = 'en';
-
-/**
- * Default locale
- *
- * @type {string}
- */
 const DEFAULT_LOCALE = 'en-GB';
-
 /**
- * Array of languages that are written from the right to the left
- *
- * @type {string[]}
+ * Languages written right-to-left.
  */
 const RTL_LANGUAGES = ['ar', 'he'];
-
 /**
  * @deprecated The source of truth for supported languages lives in Crab.
- * @type {string[]}
  */
 const SUPPORTED_LANGUAGES = [DEFAULT_LANG, 'de', 'es', 'fr', 'hu', 'id', 'it', 'ja', 'pl', 'pt', 'ro', 'ru', 'th', 'tr', 'uk', 'zh'];
-
 /**
- * Verifies and adjusts locale (replace `_` with `-`)
- * Returns null if locale is unrecognized by {Intl.Locale}
+ * Verifies and adjusts locale, replacing `_` with `-`.
  *
- * @param {string} locale (`es`, `es_ES`, `en-GB`, `en`, `ja`, `ja-JP` etc)
- * @returns {string|null}
+ * @param locale `es`, `es_ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.
+ * @returns `null` if locale is unrecognized by `Intl.Locale`.
  */
 function adjustLocale(locale) {
-  if (!locale || locale.trim().length === 0) {
-    return null;
-  }
-  try {
-    const {
-      baseName
-    } = new Intl.Locale(locale.trim().replace('_', '-'));
-    return baseName;
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error);
-    return null;
+  const localeTrimmed = locale?.trim();
+  if (localeTrimmed) {
+    try {
+      return new Intl.Locale(localeTrimmed.replace('_', '-')).baseName;
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    }
   }
+  return null;
 }
-
 /**
- * Provides corresponding lang (iso2) for provided locale
- * if locale is invalid or language is unsupported returns null
+ * Provides corresponding lang (iso2) for provided locale.
  *
  * @deprecated The use of this function almost always breaks language variants
  * e.g. Simplified and Traditional Chinese.
  * There should be no use case for this function.
  * To select the correct translations from a translations object, pass the
  * locale directly into Crab's getLocalisedMessages.
- * @param {string} locale (`es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP` etc)
- * @returns {string|null} two-letter ISO639-1 language
+ * @param locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.
+ * @returns Two-letter ISO 639-1 language code, falling back to `null` if locale is invalid or language is unsupported.
  */
 function getLangFromLocale(locale) {
   const adjustedLocale = adjustLocale(locale);
-  if (adjustedLocale === null) {
-    return null;
-  }
-  try {
+  if (adjustedLocale != null) {
     const {
       language
     } = new Intl.Locale(adjustedLocale);
     if (SUPPORTED_LANGUAGES.includes(language)) {
       return language;
     }
-    return null;
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error);
-    return null;
   }
+  return null;
 }
-
 /**
- * Provides corresponding country code (iso2) for locales code with explicit region value (`es-ES`, `en-GB`, `ja-JP` etc.)
- * if the value is invalid or missing region it returns null
+ * Provides corresponding country code (iso2) for locales code with explicit region value.
  *
- * @param {string} locale
- * @returns {string|null}
+ * @param locale `es-ES`, `en-GB`, `ja-JP`, etc.
+ * @returns `null` if the locale is invalid or the region can‘t be identified.
  */
 function getCountryFromLocale(locale) {
   const adjustedLocale = adjustLocale(locale);
-  if (adjustedLocale === null) {
-    return null;
-  }
-  try {
-    const {
-      region
-    } = new Intl.Locale(adjustedLocale);
-    return region ?? null;
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error);
-    return null;
-  }
+  return adjustedLocale != null ? new Intl.Locale(adjustedLocale).region ?? null : null;
 }
-
 /**
  * Provides the layout direction for a given locale.
- * If locale is invalid or language is unsupported returns Direction.LTR
  *
- * @param {string} locale (`es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP` etc)
- * @returns {Direction} The layout direction based on the locale
+ * @param locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.
+ * @returns The layout direction based on the locale, falling back to `Direction.LTR` if the locale is invalid or unsupported.
  */
 function getDirectionFromLocale(locale) {
-  try {
-    const adjustedLocale = adjustLocale(locale);
-    const {
-      language
-    } = new Intl.Locale(adjustedLocale);
-    return RTL_LANGUAGES.includes(language) ? Direction.RTL : Direction.LTR;
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error);
-    return Direction.LTR;
-  }
+  const adjustedLocale = adjustLocale(locale);
+  return adjustedLocale != null && RTL_LANGUAGES.includes(new Intl.Locale(adjustedLocale).language) ? Direction.RTL : Direction.LTR;
 }
 
 /**
@@ -6454,12 +6399,6 @@ const PolymorphicWithOverrides = /*#__PURE__*/forwardRef(function PolymorphicWit
   });
 });
 
-function wrapInFragment(value) {
-  return /*#__PURE__*/jsx(Fragment, {
-    children: value
-  });
-}
-
 var messages$4 = defineMessages({
   noResultsFound: {
     id: "neptune.SelectInput.noResultsFound"
@@ -6800,10 +6739,10 @@ const defaultRenderTrigger = ({
   children: /*#__PURE__*/jsx(SelectInputTriggerButton, {
     as: ButtonInput,
     size: size,
-    children: placeholderShown ? /*#__PURE__*/jsxs("span", {
-      className: "np-select-input-placeholder",
-      children: [" ", content]
-    }) : content
+    children: /*#__PURE__*/jsx("span", {
+      className: classNames('np-select-input-content', placeholderShown && 'np-select-input-placeholder'),
+      children: content
+    })
   })
 });
 function SelectInputClearButton({
@@ -6824,12 +6763,13 @@ function SelectInputClearButton({
 const noop = () => {};
 function SelectInput({
   name,
+  multiple,
   placeholder,
   items,
   defaultValue,
   value: controlledValue,
   compareValues,
-  renderValue = wrapInFragment,
+  renderValue = String,
   renderFooter,
   renderTrigger = defaultRenderTrigger,
   filterable,
@@ -6858,6 +6798,7 @@ function SelectInput({
   const controllerRef = filterable ? searchInputRef : listboxRef;
   return /*#__PURE__*/jsx(Listbox, {
     name: name,
+    multiple: multiple,
     defaultValue: defaultValue,
     value: controlledValue
     // TODO: Remove assertion when upgrading TypeScript to v5
@@ -6866,73 +6807,78 @@ function SelectInput({
     by: compareValues,
     disabled: disabled,
     onChange: value => {
-      setOpen(false);
+      if (!multiple) {
+        setOpen(false);
+      }
       onChange?.(value);
     },
     children: ({
       disabled: uiDisabled,
       value
-    }) => /*#__PURE__*/jsx(OptionsOverlay, {
-      placement: "bottom-start",
-      open: open,
-      renderTrigger: ({
-        ref,
-        getInteractionProps
-      }) => /*#__PURE__*/jsx(SelectInputTriggerButtonPropsContext.Provider, {
-        // eslint-disable-next-line react/jsx-no-constructed-context-values
-        value: {
-          ref: mergeRefs([ref, triggerRef]),
-          ...mergeProps({
-            onClick: () => {
-              setOpen(prev => !prev);
-            },
-            onKeyDown: event => {
-              if (event.key === ' ' || event.key === 'Enter' || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+    }) => {
+      const placeholderShown = multiple && Array.isArray(value) ? value.length === 0 : value == null;
+      return /*#__PURE__*/jsx(OptionsOverlay, {
+        placement: "bottom-start",
+        open: open,
+        renderTrigger: ({
+          ref,
+          getInteractionProps
+        }) => /*#__PURE__*/jsx(SelectInputTriggerButtonPropsContext.Provider, {
+          // eslint-disable-next-line react/jsx-no-constructed-context-values
+          value: {
+            ref: mergeRefs([ref, triggerRef]),
+            ...mergeProps({
+              onClick: () => {
                 setOpen(prev => !prev);
+              },
+              onKeyDown: event => {
+                if (event.key === ' ' || event.key === 'Enter' || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                  setOpen(prev => !prev);
+                }
               }
-            }
-          }, getInteractionProps())
+            }, getInteractionProps())
+          },
+          children: renderTrigger({
+            content: !placeholderShown ? /*#__PURE__*/jsx(SelectInputOptionContentWithinTriggerContext.Provider, {
+              value: true,
+              children: multiple && Array.isArray(value) ? value.map(option => renderValue(option, true)).join(', ') : renderValue(value, true)
+            }) : placeholder,
+            placeholderShown,
+            clear: onClear != null ? () => {
+              onClear();
+              triggerRef.current?.focus({
+                preventScroll: true
+              });
+            } : undefined,
+            disabled: uiDisabled,
+            size,
+            className
+          })
+        }),
+        initialFocusRef: controllerRef,
+        size: filterable ? 'lg' : 'md',
+        padding: "none",
+        onClose: () => {
+          setOpen(false);
         },
-        children: renderTrigger({
-          content: value != null ? /*#__PURE__*/jsx(SelectInputOptionContentWithinTriggerContext.Provider, {
-            value: true,
-            children: renderValue(value, true)
-          }) : placeholder,
-          placeholderShown: value == null,
-          clear: onClear != null ? () => {
-            onClear();
-            triggerRef.current?.focus({
-              preventScroll: true
-            });
-          } : undefined,
-          disabled: uiDisabled,
-          size,
-          className
+        onCloseEnd: () => {
+          if (filterQuery !== '') {
+            setFilterQuery('');
+          }
+        },
+        children: /*#__PURE__*/jsx(SelectInputOptions, {
+          items: items,
+          renderValue: renderValue,
+          renderFooter: renderFooter,
+          filterable: filterable,
+          filterPlaceholder: filterPlaceholder,
+          searchInputRef: searchInputRef,
+          listboxRef: listboxRef,
+          filterQuery: filterQuery,
+          onFilterChange: setFilterQuery
         })
-      }),
-      initialFocusRef: controllerRef,
-      size: filterable ? 'lg' : 'md',
-      padding: "none",
-      onClose: () => {
-        setOpen(false);
-      },
-      onCloseEnd: () => {
-        if (filterQuery !== '') {
-          setFilterQuery('');
-        }
-      },
-      children: /*#__PURE__*/jsx(SelectInputOptions, {
-        items: items,
-        renderValue: renderValue,
-        renderFooter: renderFooter,
-        filterable: filterable,
-        filterPlaceholder: filterPlaceholder,
-        searchInputRef: searchInputRef,
-        listboxRef: listboxRef,
-        filterQuery: filterQuery,
-        onFilterChange: setFilterQuery
-      })
-    })
+      });
+    }
   });
 }
 function SelectInputTriggerButton({
@@ -6995,7 +6941,7 @@ const SelectInputOptionsContainer = /*#__PURE__*/forwardRef(function SelectInput
 });
 function SelectInputOptions({
   items,
-  renderValue = wrapInFragment,
+  renderValue = String,
   renderFooter,
   filterable = false,
   filterPlaceholder,
@@ -7564,7 +7510,7 @@ class WithDisplayFormat extends Component {
     const cursorPosition = getCursorPositionAfterKeystroke(action, selectionStart, selectionEnd, displayPattern, pastedLength);
     setTimeout(() => {
       if (triggerEvent) {
-        triggerEvent.currentTarget.setSelectionRange(cursorPosition, cursorPosition);
+        triggerEvent.target.setSelectionRange(cursorPosition, cursorPosition);
       }
       this.setState({
         selectionStart: cursorPosition,
@@ -9567,111 +9513,79 @@ const countries = [{
   iso3: 'ZWE',
   phone: '+263'
 }];
-var countries$1 = countries;
 
 const longestMatchingPrefix = matchingCodes => matchingCodes.reduce((a, b) => a.phone.length > b.phone.length ? a : b);
 
 const findCountryByCode = code => {
-  let matchingCodes;
-  if (code && code.length === 2) {
-    matchingCodes = countries$1.filter(country => code.toUpperCase() === country.iso2);
+  if (code.length === 2) {
+    const matchingCodes = countries.filter(country => code.toUpperCase() === country.iso2);
+    if (matchingCodes.length > 0) {
+      return longestMatchingPrefix(matchingCodes);
+    }
   }
-  return matchingCodes && matchingCodes.length > 0 ? longestMatchingPrefix(matchingCodes) : null;
+  return null;
 };
 
 /**
  * Default phone code, the UK one `+44`
  */
 const DEFAULT_PHONE_CODE = '+44';
-
 /**
  * Given a valid locale it returns the correspondent prefix if found or +44 otherwise.
  *
- * @param {string} locale - a string that represent the locale ex:'es-ES'
- * @param countryCode
- * @returns {string}
+ * @param locale BCP 47 language tag of locale, e.g. `"es-ES"`.
+ * @param countryCode Two-letter country code (ISO 3166-1 alpha-2).
  */
 const setDefaultPrefix = (locale, countryCode) => {
-  const country = findCountryByCode(countryCode) ||
-  // when `locale` code has explicit region: `en-GB`, `en-US`, `ar-AE`
-  findCountryByCode(getCountryFromLocale(locale)) ||
-  // when `locale` code is only two chars value: `fr`, `es`
-  findCountryByCode(locale);
-  return country?.phone || DEFAULT_PHONE_CODE;
+  const country = (countryCode != null ? findCountryByCode(countryCode) : null) ?? findCountryByCode(getCountryFromLocale(locale) ?? locale);
+  return country?.phone ?? DEFAULT_PHONE_CODE;
 };
 
 /**
  *
  * @param phoneNumber
- * @returns {boolean} - returns true for number that starts with '+' and contains a mix of digits and spaces with
- * at least 4 digits.
+ * @returns True if number that starts with "+" and contains a mix of digits and spaces with at least 4 digits.
  */
-const isValidPhoneNumber = phoneNumber => /^\+[\d-\s]+$/.test(phoneNumber) && phoneNumber.match(/\d+/g) && phoneNumber.match(/\d+/g).join('').length >= 4;
+const isValidPhoneNumber = phoneNumber => /^\+[\d-\s]+$/.test(phoneNumber) && (phoneNumber.match(/\d+/g)?.join('').length ?? 0) >= 4;
 
 const findCountryByPrefix = number => {
-  let matchingCodes = null;
-  if (number && number.length > 1) {
-    matchingCodes = countries$1.filter(country => number.indexOf(country.phone) === 0);
+  if (number.length > 1) {
+    const matchingCodes = countries.filter(country => number.startsWith(country.phone));
+    if (matchingCodes.length > 0) {
+      return longestMatchingPrefix(matchingCodes);
+    }
   }
-  return matchingCodes && matchingCodes.length > 0 ? longestMatchingPrefix(matchingCodes) : null;
+  return null;
 };
 
 /**
- * Given a sting in a valid format ex:'+447573135343' it returns an object of shape
- * {prefix=+44 ,suffix=7573135343}
- *
- * @param {string} number - a string that defines a phone number.
- * @returns {{prefix: (string|*), suffix: string, format: string}}
+ * @param number Phone number in a format like "+447573135343"
  */
 const explodeNumberModel = number => {
-  let prefix = '';
-  let suffix = '';
-  let format = '';
   const country = findCountryByPrefix(number);
-  if (country) {
-    prefix = country.phone;
-    suffix = number.slice(country.phone.length);
-    format = country.phoneFormat || '';
-  } else {
-    prefix = '';
-    suffix = number.slice(1);
-    format = '';
-  }
-  return {
-    prefix,
-    suffix,
-    format
+  return country ? {
+    prefix: country.phone,
+    suffix: number.slice(country.phone.length),
+    format: country.phoneFormat
+  } : {
+    prefix: null,
+    suffix: number.slice(1)
   };
 };
 
 const DIGITS_MATCH = /^$|^(\+)|([\d]+)/g;
-const cleanNumber = number => number.match(DIGITS_MATCH) && number.match(DIGITS_MATCH).join('') || '';
+const cleanNumber = number => number.match(DIGITS_MATCH)?.join('') ?? '';
 
-// Reference fro localeCompare : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
-const sortArrayByProperty = (arrayToSort, property) => [...arrayToSort].sort((a, b) => a[property].localeCompare(b[property]));
+function sortArrayByProperty(arrayToSort, property) {
+  return [...arrayToSort].sort((a, b) => a[property].localeCompare(b[property]));
+}
 
 const groupCountriesByPrefix = countries => {
-  const groupedArray = countries.reduce((accumulator, country) => {
-    const {
-      name,
-      iso2,
-      iso3,
-      phone
-    } = country;
-    if (accumulator[phone]) {
-      const previousValue = accumulator[phone];
-      accumulator[phone] = {
-        ...previousValue,
-        name: isArray(previousValue.name) ? [...previousValue.name, name] : [previousValue.name, name],
-        iso2: isArray(previousValue.iso2) ? [...previousValue.iso2, iso2] : [previousValue.iso2, iso2],
-        iso3: isArray(previousValue.iso3) ? [...previousValue.iso3, iso3] : [previousValue.iso3, iso3]
-      };
-    } else {
-      accumulator[phone] = country;
-    }
-    return accumulator;
-  }, {});
-  return Object.values(groupedArray);
+  const countriesByPrefix = new Map();
+  countries.forEach(country => {
+    countriesByPrefix.set(country.phone, [...(countriesByPrefix.get(country.phone) ?? []), country]);
+  });
+  return countriesByPrefix;
 };
 
 // Reference fro localeCompare : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
@@ -9679,41 +9593,38 @@ const filterCountriesByIso3 = (countries, iso3Codes) => {
   const iso3CodesSet = new Set(iso3Codes);
   return countries.filter(country => !iso3CodesSet.has(country.iso3));
 };
-
 /**
  * Removes the countries sepecified in the second param
  *
- * @param {Array} countries: list of country metadata objects
- * @param {Array} disabledCountries: list of iso3 country codes to remove from the list
- * @returns
+ * @param countries list of country metadata objects
+ * @param disabledCountries list of iso3 country codes to remove from the list
  */
 const excludeCountries = (countries, disabledCountries) => {
   return disabledCountries.length > 0 ? filterCountriesByIso3(countries, disabledCountries) : countries;
 };
 
 const ALLOWED_PHONE_CHARS = /^$|^[\d-\s]+$/;
-const PhoneNumberInput = props => {
-  const {
-    id,
-    onChange,
-    searchPlaceholder,
-    disabled,
-    required,
-    size,
-    placeholder,
-    onFocus,
-    onBlur,
-    countryCode,
-    selectProps,
-    disabledCountries
-  } = props;
+const defaultSelectProps = {};
+const defaultDisabledCountries = [];
+const PhoneNumberInput = ({
+  id,
+  required,
+  disabled,
+  initialValue,
+  onChange,
+  onFocus,
+  onBlur,
+  countryCode,
+  searchPlaceholder = 'Prefix',
+  size = Size.MEDIUM,
+  placeholder,
+  selectProps = defaultSelectProps,
+  disabledCountries = defaultDisabledCountries
+}) => {
   const {
     locale
   } = useIntl();
-  const getInitialValue = () => {
-    const {
-      initialValue
-    } = props;
+  const [internalValue, setInternalValue] = useState(() => {
     const cleanValue = initialValue ? cleanNumber(initialValue) : null;
     if (!cleanValue || !isValidPhoneNumber(cleanValue)) {
       return {
@@ -9722,54 +9633,16 @@ const PhoneNumberInput = props => {
       };
     }
     return explodeNumberModel(cleanValue);
-  };
-  const [internalValue, setInternalValue] = useState(getInitialValue());
+  });
   const [broadcastedValue, setBroadcastedValue] = useState(null);
-  const getSelectOptions = () => {
-    const countriesList = excludeCountries(countries$1, disabledCountries);
-    const listSortedByISO3 = groupCountriesByPrefix(sortArrayByProperty(countriesList, 'iso3'));
-    return listSortedByISO3.map(option => {
-      const {
-        phone,
-        iso3,
-        iso2,
-        name
-      } = option;
-      let note = '';
-      if (iso3) {
-        note = isArray(iso3) ? iso3.join(', ') : iso3;
-      } else if (iso2) {
-        note = isArray(iso2) ? iso2.join(', ') : iso2;
-      }
-      return {
-        type: 'option',
-        value: {
-          value: phone,
-          label: phone,
-          note: note
-        },
-        filterMatchers: [phone, note, name]
-      };
-    });
-  };
-  const options = getSelectOptions();
-  const onPrefixChange = ({
-    value
-  }) => {
-    setInternalValue({
-      prefix: value,
-      suffix: internalValue.suffix
-    });
-  };
+  const countriesByPrefix = useMemo(() => groupCountriesByPrefix(sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3')), [disabledCountries]);
   const onSuffixChange = event => {
-    const {
-      value = ''
-    } = event.target;
-    if (ALLOWED_PHONE_CHARS.test(value)) {
-      setInternalValue({
-        prefix: internalValue.prefix,
-        suffix: value
-      });
+    const suffix = event.target.value;
+    if (ALLOWED_PHONE_CHARS.test(suffix)) {
+      setInternalValue(prev => ({
+        ...prev,
+        suffix
+      }));
     }
   };
   const onPaste = event => {
@@ -9777,31 +9650,22 @@ const PhoneNumberInput = props => {
       return;
     }
     const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(/(\s|-)+/g, '');
-    const {
-      prefix: pastedPrefix,
-      suffix: pastedSuffix
-    } = explodeNumberModel(pastedValue);
-    const selectedPrefix = options.find(({
-      value
-    }) => value.value === pastedPrefix);
-    if (selectedPrefix && ALLOWED_PHONE_CHARS.test(pastedSuffix)) {
-      setInternalValue({
-        prefix: pastedPrefix,
-        suffix: pastedSuffix
-      });
+    const pastedNumber = explodeNumberModel(pastedValue);
+    if (pastedNumber.prefix != null && countriesByPrefix.has(pastedNumber.prefix) && ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)) {
+      setInternalValue(pastedNumber);
     }
   };
   useEffect(() => {
     if (broadcastedValue === null) {
       return setBroadcastedValue(internalValue);
     }
-    const internalPhoneNumber = internalValue.prefix + internalValue.suffix;
-    const broadcastedPhoneNumber = broadcastedValue.prefix + broadcastedValue.suffix;
+    const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;
+    const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;
     if (internalPhoneNumber === broadcastedPhoneNumber) {
       return;
     }
     const newValue = isValidPhoneNumber(internalPhoneNumber) ? cleanNumber(internalPhoneNumber) : null;
-    onChange(newValue, internalValue.prefix);
+    onChange(newValue, internalValue.prefix ?? '');
     setBroadcastedValue(internalValue);
   }, [onChange, broadcastedValue, internalValue]);
   return /*#__PURE__*/jsxs("div", {
@@ -9809,18 +9673,29 @@ const PhoneNumberInput = props => {
     children: [/*#__PURE__*/jsx("div", {
       className: "tw-telephone__country-select",
       children: /*#__PURE__*/jsx(SelectInput, {
-        placeholder: "Select an option...",
-        items: options,
-        value: options.find(item => item.value.value === internalValue.prefix)?.value,
-        renderValue: (option, withinTrigger) => /*#__PURE__*/jsx(SelectInputOptionContent, {
-          title: option.label,
-          note: withinTrigger ? undefined : option.note
+        placeholder: "Select an option\u2026",
+        items: [...countriesByPrefix].map(([prefix, countries]) => ({
+          type: 'option',
+          value: prefix,
+          filterMatchers: [prefix, ...countries.map(country => country.name), ...countries.map(country => country.iso3)]
+        })),
+        value: internalValue.prefix,
+        renderValue: (prefix, withinTrigger) => /*#__PURE__*/jsx(SelectInputOptionContent, {
+          title: prefix,
+          note: withinTrigger ? undefined : countriesByPrefix.get(prefix)?.map(country => country.iso3).join(', ')
         }),
         filterable: true,
         filterPlaceholder: searchPlaceholder,
         disabled: disabled,
         size: size,
-        onChange: onPrefixChange,
+        onChange: prefix => {
+          const country = prefix != null ? findCountryByPrefix(prefix) : null;
+          setInternalValue(prev => ({
+            ...prev,
+            prefix,
+            format: country?.phoneFormat
+          }));
+        },
         ...selectProps
       })
     }), /*#__PURE__*/jsx("div", {
@@ -9846,37 +9721,6 @@ const PhoneNumberInput = props => {
     })]
   });
 };
-PhoneNumberInput.propTypes = {
-  id: PropTypes.string,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  initialValue: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  countryCode: PropTypes.string,
-  searchPlaceholder: PropTypes.string,
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  placeholder: PropTypes.string,
-  selectProps: PropTypes.object,
-  /** List of iso3 codes of countries to remove from the list */
-  disabledCountries: PropTypes.arrayOf(PropTypes.string)
-};
-PhoneNumberInput.defaultProps = {
-  id: null,
-  required: false,
-  disabled: false,
-  initialValue: null,
-  onFocus() {},
-  onBlur() {},
-  countryCode: null,
-  searchPlaceholder: 'Prefix',
-  size: Size.MEDIUM,
-  placeholder: '',
-  selectProps: {},
-  disabledCountries: []
-};
-var PhoneNumberInput$1 = PhoneNumberInput;
 
 const Progress = ({
   className,
@@ -10035,7 +9879,6 @@ const PromoCard = /*#__PURE__*/forwardRef(({
       setChecked(!checked); // Update local state for checkbox
     }
   };
-
   const componentId = `${id || generateRandomId()}`;
   // Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or
   // `'download'` if `download` is truthy. If neither condition is true, set
@@ -11199,6 +11042,109 @@ Select.defaultProps = {
   dropdownProps: {}
 };
 
+const SegmentedControl = ({
+  name,
+  defaultValue,
+  mode = 'input',
+  segments,
+  onChange
+}) => {
+  const [selectedValue, setSelectedValue] = useState(defaultValue || segments[0].value);
+  const [animate, setAnimate] = useState(false);
+  const segmentsRef = useRef(null);
+  if (segments.length > 3) {
+    throw new Error('SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control');
+  }
+  const segmentsWithRefs = segments.map(segment => ({
+    ...segment,
+    ref: /*#__PURE__*/createRef()
+  }));
+  const updateSegmentPosition = () => {
+    const selectedSegmentRef = segmentsWithRefs.find(segment => segment.value === selectedValue)?.ref;
+    // We grab the active segments style object from the ref
+    // and set the css variables to the selected segments width and x position.
+    // This is so we can animate the highlight to the selected segment
+    if (selectedSegmentRef?.current && segmentsRef.current) {
+      const {
+        style
+      } = segmentsRef.current;
+      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);
+      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);
+    }
+  };
+  useEffect(() => {
+    updateSegmentPosition();
+    const handleWindowSizeChange = () => {
+      setAnimate(false);
+      updateSegmentPosition();
+    };
+    window.addEventListener('resize', handleWindowSizeChange);
+    return () => {
+      window.removeEventListener('resize', handleWindowSizeChange);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [segmentsWithRefs, selectedValue]);
+  useEffect(() => {
+    onChange(selectedValue);
+  }, [onChange, selectedValue]);
+  return /*#__PURE__*/jsx("div", {
+    ref: segmentsRef,
+    "data-testid": "segmented-control",
+    className: classNames('segmented-control', {
+      'segmented-control--input': mode === 'input'
+    }),
+    children: /*#__PURE__*/jsx("div", {
+      className: classNames('segmented-control__segments', {
+        'segmented-control__segments--no-animate': !animate
+      }),
+      children: segmentsWithRefs.map(segment => mode === 'input' ? /*#__PURE__*/jsxs("label", {
+        ref: segment.ref,
+        htmlFor: segment.id,
+        className: classNames('segmented-control__segment', {
+          'segmented-control__selected-segment': selectedValue === segment.value
+        }),
+        children: [/*#__PURE__*/jsx("input", {
+          type: "radio",
+          className: "segmented-control__radio-input",
+          id: segment.id,
+          name: name,
+          value: segment.value,
+          checked: selectedValue === segment.value,
+          onChange: () => {
+            setAnimate(true);
+            setSelectedValue(segment.value);
+          }
+        }), /*#__PURE__*/jsx(Body, {
+          className: "segmented-control__text",
+          as: "span",
+          type: selectedValue === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT,
+          children: segment.label
+        })]
+      }, segment.id) : /*#__PURE__*/jsx("button", {
+        ref: segment.ref,
+        type: "button",
+        role: "tab",
+        id: segment.id,
+        "aria-controls": segment.controls,
+        "aria-selected": selectedValue === segment.value,
+        className: classNames('segmented-control__segment', 'segmented-control__button', {
+          'segmented-control__selected-segment': selectedValue === segment.value
+        }),
+        onClick: () => {
+          setAnimate(true);
+          setSelectedValue(segment.value);
+        },
+        children: /*#__PURE__*/jsx(Body, {
+          as: "span",
+          className: "segmented-control__text",
+          type: selectedValue === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT,
+          children: segment.label
+        })
+      }, segment.id))
+    })
+  });
+};
+
 const CSS_TRANSITION_DURATION = 400;
 class Snackbar extends Component {
   /** @type {RefObject<HTMLSpanElement>} */
@@ -13983,7 +13929,6 @@ const UploadButton = ({
     if (areAllFilesAllowed) {
       return null; //file input by default allows all files
     }
-
     if (Array.isArray(fileTypes)) {
       return {
         accept: fileTypes.join(',')
@@ -14181,7 +14126,6 @@ const UploadItem = ({
       children: processIndicator
     }); // Scale down ProcessIndicator to be 20px*20px to match `icons`
   };
-
   const getErrorMessage = () => typeof error === 'object' && error.message || error || formatMessage(MESSAGES.uploadingFailed);
   const getDescription = () => {
     if (error || status === Status.FAILED) {
@@ -15597,5 +15541,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, 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, 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, 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, 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, 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, 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, SegmentedControl, 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, 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 };
 //# sourceMappingURL=index.esm.js.map