@transferwise/components 46.4.0 → 46.6.0

package/build/index.esm.js

@@ -1523,7 +1523,7 @@ class DimmerManager {
   /**
    * Dimmer refs
    */
-
+  dimmers;
   constructor() {
     this.dimmers = [];
   }
@@ -5399,6 +5399,7 @@ var DynamicFieldDefinitionList$1 = DynamicFieldDefinitionList;
 const ESCAPED_OPENING_CHEVRON = '<';
 const ESCAPED_CLOSING_CHEVRON = '>';
 class EmphasisHtmlTransformer {
+  tags;
   constructor(whitelistedTags) {
     this.tags = (whitelistedTags || []).map(tag => {
       return {
@@ -7262,10 +7263,13 @@ const formatWithPattern = (value, pattern) => {
   let patternSymbol = [];
   // valueArray.length increments during the cycle cause we are adding new elements.
   for (let index = 0; index < valueArray.length; index += 1) {
-    patternSymbol = patternWithSymbolsPosition.filter(symbol => symbol.index === index);
+    patternSymbol = patternWithSymbolsPosition.filter(pattern => pattern.index === index);
     // Add pattern's symbol at n position
     if (patternSymbol.length === 1) {
-      valueArray.splice(index, 0, patternSymbol.pop().symbol);
+      const last = patternSymbol.pop();
+      if (last) {
+        valueArray.splice(index, 0, last.symbol);
+      }
     }
   }
   return valueArray.join('');
@@ -7311,7 +7315,7 @@ const countConsecutiveSymbols = (selectionStart, applicablePattern, direction) =
   return groupSize;
 };
 
-const getCursorPositionAfteractionstroke = (action, selectionStart, selectionEnd, pattern, pastedLength) => {
+const getCursorPositionAfterActionStroke = (action, selectionStart, selectionEnd, pattern, pastedLength) => {
   let cursorPosition = selectionStart;
   switch (action) {
     case 'Backspace':
@@ -7333,36 +7337,36 @@ const getCursorPositionAfteractionstroke = (action, selectionStart, selectionEnd
   }
   return cursorPosition;
 };
-var getCursorPositionAfterKeystroke = getCursorPositionAfteractionstroke;
+var getCursorPositionAfterKeystroke = getCursorPositionAfterActionStroke;
 
 class WithDisplayFormat extends Component {
+  static defaultProps = {
+    autoComplete: 'off',
+    displayPattern: '',
+    value: ''
+  };
   constructor(props) {
     super(props);
-    const {
-      value,
-      displayPattern
-    } = props;
-    const unformattedValue = unformatWithPattern$1(value, displayPattern);
+    const unformattedValue = unformatWithPattern$1(props.value ?? '', props.displayPattern);
     this.state = {
-      value: formatWithPattern$1(unformattedValue, displayPattern),
+      value: formatWithPattern$1(unformattedValue, props.displayPattern),
       historyNavigator: new HistoryNavigator$1(),
       prevDisplayPattern: props.displayPattern,
-      triggerType: null,
-      triggerEvent: null
+      triggerType: 'Initial',
+      triggerEvent: null,
+      selectionStart: 0,
+      selectionEnd: 0,
+      pastedLength: 0
     };
   }
-  static getDerivedStateFromProps(nextProps, previousState) {
-    const {
-      displayPattern
-    } = nextProps;
-    const {
-      prevDisplayPattern
-    } = previousState;
-    if (previousState.prevDisplayPattern !== displayPattern) {
-      const {
-        value,
-        historyNavigator
-      } = previousState;
+  static getDerivedStateFromProps({
+    displayPattern
+  }, {
+    prevDisplayPattern = displayPattern,
+    value,
+    historyNavigator
+  }) {
+    if (prevDisplayPattern !== displayPattern) {
       const unFormattedValue = unformatWithPattern$1(value, prevDisplayPattern);
       historyNavigator.reset();
       return {
@@ -7384,29 +7388,31 @@ class WithDisplayFormat extends Component {
     const {
       displayPattern
     } = this.props;
-    const charCode = String.fromCharCode(triggerEvent.which).toLowerCase();
-    if (triggerType === 'Paste' || triggerType === 'Cut') {
-      return triggerType;
-    }
-    if ((triggerEvent.ctrlKey || triggerEvent.metaKey) && charCode === 'z') {
-      return triggerEvent.shiftKey ? 'Redo' : 'Undo';
-    }
-    // Detect mouse event redo
-    if (triggerEvent.ctrlKey && charCode === 'd') {
-      return 'Delete';
-    }
-
-    // Android Fix.
-    if (typeof triggerEvent.key === 'undefined') {
-      if (unformattedValue.length <= unformatWithPattern$1(value, displayPattern).length) {
+    if (triggerEvent) {
+      const charCode = String.fromCharCode(triggerEvent.which).toLowerCase();
+      if (triggerType === 'Paste' || triggerType === 'Cut') {
+        return triggerType;
+      }
+      if ((triggerEvent.ctrlKey || triggerEvent.metaKey) && charCode === 'z') {
+        return triggerEvent.shiftKey ? 'Redo' : 'Undo';
+      }
+      // Detect mouse event redo
+      if (triggerEvent.ctrlKey && charCode === 'd') {
+        return 'Delete';
+      }
+      // Android Fix.
+      if (typeof triggerEvent.key === 'undefined' && unformattedValue.length <= unformatWithPattern$1(value, displayPattern).length) {
         return 'Backspace';
       }
+      return triggerEvent.key;
+    } else {
+      // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
+      return 'Paste';
     }
-    return triggerEvent.key;
   };
   resetEvent = () => {
     this.setState({
-      triggerType: null,
+      triggerType: 'Initial',
       triggerEvent: null,
       pastedLength: 0
     });
@@ -7423,14 +7429,13 @@ class WithDisplayFormat extends Component {
     const {
       selectionStart,
       selectionEnd
-    } = event.target;
+    } = event.currentTarget;
     const {
       historyNavigator
     } = this.state;
     const {
       displayPattern
     } = this.props;
-
     // Unfortunately Undo and Redo don't trigger OnChange event so we need to handle some value logic here.
     let newFormattedValue = '';
     if (this.detectUndoRedo(event) === 'Undo') {
@@ -7449,8 +7454,8 @@ class WithDisplayFormat extends Component {
       this.setState({
         triggerEvent: event,
         triggerType: 'KeyDown',
-        selectionStart,
-        selectionEnd
+        selectionStart: selectionStart ?? 0,
+        selectionEnd: selectionEnd ?? 0
       });
     }
   };
@@ -7479,7 +7484,6 @@ class WithDisplayFormat extends Component {
   handleOnChange = event => {
     const {
       historyNavigator,
-      triggerEvent,
       triggerType
     } = this.state;
     const {
@@ -7490,9 +7494,7 @@ class WithDisplayFormat extends Component {
       value
     } = event.target;
     let unformattedValue = unformatWithPattern$1(value, displayPattern);
-    const action = triggerEvent === null ?
-    // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
-    'Paste' : this.getUserAction(unformattedValue);
+    const action = this.getUserAction(unformattedValue);
     if (!this.isKeyAllowed(action) || triggerType === 'Undo' || triggerType === 'Redo') {
       return;
     }
@@ -7502,19 +7504,18 @@ class WithDisplayFormat extends Component {
     const newFormattedValue = formatWithPattern$1(unformattedValue, displayPattern);
     historyNavigator.add(unformattedValue);
     this.handleCursorPositioning(action);
-    const broadcastValue = unformatWithPattern$1(newFormattedValue, displayPattern);
     this.setState({
       value: newFormattedValue
-    }, this.resetEvent(), onChange(broadcastValue));
+    }, () => {
+      this.resetEvent();
+      if (onChange) {
+        const broadcastValue = unformatWithPattern$1(newFormattedValue, displayPattern);
+        onChange(broadcastValue);
+      }
+    });
   };
   handleOnBlur = event => {
-    const {
-      displayPattern,
-      onBlur
-    } = this.props;
-    if (onBlur) {
-      onBlur(unformatWithPattern$1(event.target.value, displayPattern));
-    }
+    this.props.onBlur?.(unformatWithPattern$1(event.target.value, this.props.displayPattern));
   };
   handleOnFocus = event => {
     const {
@@ -7563,7 +7564,7 @@ class WithDisplayFormat extends Component {
     const cursorPosition = getCursorPositionAfterKeystroke(action, selectionStart, selectionEnd, displayPattern, pastedLength);
     setTimeout(() => {
       if (triggerEvent) {
-        triggerEvent.target.setSelectionRange(cursorPosition, cursorPosition);
+        triggerEvent.currentTarget.setSelectionRange(cursorPosition, cursorPosition);
       }
       this.setState({
         selectionStart: cursorPosition,
@@ -7573,7 +7574,6 @@ class WithDisplayFormat extends Component {
   };
   render() {
     const {
-      type,
       inputMode,
       className,
       id,
@@ -7590,7 +7590,6 @@ class WithDisplayFormat extends Component {
       value
     } = this.state;
     const renderProps = {
-      type,
       inputMode,
       className,
       id,
@@ -7613,62 +7612,13 @@ class WithDisplayFormat extends Component {
     return this.props.render(renderProps);
   }
 }
-WithDisplayFormat.propTypes = {
-  /**
-   * autocomplete hides our form help so we need to disable it when help text
-   * is present. Chrome ignores autocomplete=off, the only way to disable it is
-   * to provide an 'invalid' value, for which 'disabled' serves.
-   */
-  autoComplete: PropTypes.oneOf(['on', 'off', 'disabled']),
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  id: PropTypes.string,
-  maxLength: PropTypes.number,
-  minLength: PropTypes.number,
-  name: PropTypes.string,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onChange: PropTypes.func.isRequired,
-  placeholder: PropTypes.string,
-  readOnly: PropTypes.bool,
-  render: PropTypes.func.isRequired,
-  required: PropTypes.bool,
-  displayPattern: PropTypes.string,
-  type: PropTypes.string,
-  inputMode: PropTypes.string,
-  value: PropTypes.string
-};
-WithDisplayFormat.defaultProps = {
-  autoComplete: 'off',
-  className: null,
-  disabled: false,
-  id: null,
-  maxLength: null,
-  minLength: null,
-  name: null,
-  placeholder: null,
-  readOnly: false,
-  required: false,
-  displayPattern: '',
-  type: 'text',
-  inputMode: null,
-  value: '',
-  onFocus: null,
-  onBlur: null
-};
-var WithDisplayFormat$1 = WithDisplayFormat;
 
-const InputWithDisplayFormat = props => /*#__PURE__*/jsx(WithDisplayFormat$1, {
+const InputWithDisplayFormat = props => /*#__PURE__*/jsx(WithDisplayFormat, {
   ...props,
-  render: renderProps => /*#__PURE__*/jsx("input", {
+  render: renderProps => /*#__PURE__*/jsx(Input, {
     ...renderProps
   })
 });
-InputWithDisplayFormat.propTypes = {
-  displayPattern: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired
-};
-var InputWithDisplayFormat$1 = InputWithDisplayFormat;
 
 const InstructionsList = ({
   dos,
@@ -7832,20 +7782,17 @@ function getValidLocale(locale) {
     Intl.NumberFormat(noUnderscoreLocale);
     return noUnderscoreLocale;
   } catch {
-    return 'en-GB';
+    return DEFAULT_LOCALE;
   }
 }
-function getCurrencyDecimals(currency = '') {
+function getCurrencyDecimals(currency) {
   const upperCaseCurrency = currency.toUpperCase();
-  if (Object.prototype.hasOwnProperty.call(currencyDecimals, upperCaseCurrency)) {
-    return currencyDecimals[upperCaseCurrency];
-  }
-  return DEFAULT_CURRENCY_DECIMALS;
+  return currencyDecimals[upperCaseCurrency] ?? DEFAULT_CURRENCY_DECIMALS;
 }
 function getDecimalSeparator(locale) {
   return isNumberLocaleSupported() ? 1.1.toLocaleString(locale)[1] : '.';
 }
-function parseAmount(number, currency, locale) {
+function parseAmount(number, currency, locale = DEFAULT_LOCALE) {
   const validLocale = getValidLocale(locale);
   const precision = getCurrencyDecimals(currency);
   const groupSeparator = isNumberLocaleSupported() ? 10000 .toLocaleString(validLocale)[2] : ',';
@@ -7855,53 +7802,67 @@ function parseAmount(number, currency, locale) {
   return Math.abs(parsedAmount);
 }
 
-const Currency = PropTypes.shape({
-  header: PropTypes.string,
-  value: PropTypes.string,
-  label: PropTypes.string,
-  currency: PropTypes.string,
-  note: PropTypes.string,
-  searchable: PropTypes.string
-});
 const isNumberOrNull = v => isNumber(v) || isNull(v);
-const formatAmountIfSet = (amount, currency, locale, maxLengthOverride) => {
+const formatAmountIfSet = ({
+  amount,
+  currency,
+  locale,
+  maxLengthOverride
+}) => {
   if (maxLengthOverride) {
-    return amount || '';
+    return amount != null ? String(amount) : '';
   } else {
     return typeof amount === 'number' ? formatAmount(amount, currency, locale) : '';
   }
 };
-const parseNumber = (amount, currency, locale, maxLengthOverride) => {
+const parseNumber = ({
+  amount,
+  currency,
+  locale,
+  maxLengthOverride
+}) => {
   if (!maxLengthOverride) {
     return parseAmount(amount, currency, locale);
   }
   if (maxLengthOverride && amount.length > maxLengthOverride) {
     return 0;
   }
-  return +amount;
+  return Number(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 {
+  static defaultProps = {
+    size: Size.LARGE,
+    classNames: {},
+    selectProps: {}
+  };
+  amountFocused = false;
   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
+      formattedAmount: formatAmountIfSet({
+        amount: props.amount,
+        currency: props.selectedCurrency.currency,
+        locale: props.intl.locale,
+        maxLengthOverride: props.maxLengthOverride
+      }),
+      locale: props.intl.locale
     };
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({
-      locale: nextProps?.intl?.locale
+      locale: nextProps.intl.locale
     });
     if (!this.amountFocused) {
       this.setState({
-        formattedAmount: formatAmountIfSet(nextProps.amount, nextProps.selectedCurrency.currency, nextProps?.intl?.locale, nextProps.maxLengthOverride)
+        formattedAmount: formatAmountIfSet({
+          amount: nextProps.amount,
+          currency: nextProps.selectedCurrency.currency,
+          locale: nextProps.intl.locale,
+          maxLengthOverride: nextProps.maxLengthOverride
+        })
       });
     }
   }
@@ -7921,16 +7882,26 @@ class MoneyInput extends Component {
     }
   };
   handlePaste = event => {
-    const paste = (event.clipboardData || window.clipboardData).getData('text');
+    const paste = event.clipboardData.getData('text');
     const {
       locale
     } = this.state;
-    const parsed = isEmpty(paste) ? null : parseNumber(paste, this.props.selectedCurrency.currency, locale, this.props.maxLengthOverride);
+    const parsed = isEmpty(paste) ? null : parseNumber({
+      amount: paste,
+      currency: this.props.selectedCurrency.currency,
+      locale: locale,
+      maxLengthOverride: this.props.maxLengthOverride
+    });
     if (isNumberOrNull(parsed)) {
       this.setState({
-        formattedAmount: formatAmountIfSet(parsed, this.props.selectedCurrency.currency, locale, this.props.maxLengthOverride)
+        formattedAmount: formatAmountIfSet({
+          amount: parsed,
+          currency: this.props.selectedCurrency.currency,
+          locale: locale,
+          maxLengthOverride: this.props.maxLengthOverride
+        })
       });
-      this.props.onAmountChange(parsed);
+      this.props.onAmountChange?.(parsed);
     }
     event.preventDefault();
   };
@@ -7941,9 +7912,14 @@ class MoneyInput extends Component {
     this.setState({
       formattedAmount: value
     });
-    const parsed = isEmpty(value) ? null : parseNumber(value, this.props.selectedCurrency.currency, this.state.locale, this.props.maxLengthOverride);
+    const parsed = isEmpty(value) ? null : parseNumber({
+      amount: value,
+      currency: this.props.selectedCurrency.currency,
+      locale: this.state.locale,
+      maxLengthOverride: this.props.maxLengthOverride
+    });
     if (isNumberOrNull(parsed)) {
-      this.props.onAmountChange(parsed);
+      this.props.onAmountChange?.(parsed);
     }
   };
   onAmountBlur = () => {
@@ -7953,68 +7929,67 @@ class MoneyInput extends Component {
   onAmountFocus = () => {
     this.amountFocused = true;
   };
-  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;
+    const selectOptions = filterCurrenciesForQuery(this.props.currencies, this.state.searchQuery);
+    const formattedOptions = [];
+    let currentGroupOptions;
     selectOptions.forEach(item => {
-      if (item.header) {
+      if (item.header != null) {
+        currentGroupOptions = [];
         formattedOptions.push({
           type: 'group',
           label: item.header,
-          options: []
+          options: currentGroupOptions
         });
-        groupIndex = formattedOptions.length - 1;
       } else {
-        if (groupIndex === null) {
-          formattedOptions.push(this.mapOption(item));
-        } else {
-          formattedOptions[groupIndex]?.options.push(this.mapOption(item));
-        }
+        (currentGroupOptions ?? formattedOptions).push({
+          type: 'option',
+          value: item,
+          filterMatchers: [item.value, item.label, item.note ?? '', item.searchable ?? '']
+        });
       }
     });
     return formattedOptions;
   }
   setAmount() {
     this.setState(previousState => {
-      const parsed = parseNumber(previousState.formattedAmount, this.props.selectedCurrency.currency, previousState.locale, this.props.maxLengthOverride);
+      const parsed = parseNumber({
+        amount: previousState.formattedAmount,
+        currency: this.props.selectedCurrency.currency,
+        locale: previousState.locale,
+        maxLengthOverride: this.props.maxLengthOverride
+      });
       if (!isNumberOrNull(parsed)) {
         return {
           formattedAmount: previousState.formattedAmount
         };
       }
       return {
-        formattedAmount: formatAmountIfSet(parsed, this.props.selectedCurrency.currency, previousState.locale, this.props.maxLengthOverride)
+        formattedAmount: formatAmountIfSet({
+          amount: parsed,
+          currency: this.props.selectedCurrency.currency,
+          locale: previousState.locale,
+          maxLengthOverride: this.props.maxLengthOverride
+        })
       };
     });
   }
   handleSelectChange = value => {
     this.handleSearchChange('');
-    this.props.onCurrencyChange(value);
+    this.props.onCurrencyChange?.(value);
   };
   handleCustomAction = () => {
     this.handleSearchChange('');
-    if (this.props.onCustomAction) {
-      this.props.onCustomAction();
-    }
+    this.props.onCustomAction?.();
   };
   handleSearchChange = searchQuery => {
     this.setState({
       searchQuery
     });
-    if (this.props.onSearchChange) {
-      this.props.onSearchChange({
-        searchQuery,
-        filteredOptions: filterOptionsForQuery(this.props.currencies, searchQuery)
-      });
-    }
+    this.props.onSearchChange?.({
+      searchQuery,
+      filteredOptions: filterCurrenciesForQuery(this.props.currencies, searchQuery)
+    });
   };
   style = className => this.props.classNames[className] || className;
   render() {
@@ -8054,7 +8029,12 @@ class MoneyInput extends Component {
         inputMode: "decimal",
         disabled: disabled,
         maxLength: maxLengthOverride,
-        placeholder: formatAmountIfSet(this.props.placeholder, this.props.selectedCurrency.currency, this.state.locale, this.props.maxLengthOverride),
+        placeholder: formatAmountIfSet({
+          amount: this.props.placeholder,
+          currency: this.props.selectedCurrency.currency,
+          locale: this.state.locale,
+          maxLengthOverride: this.props.maxLengthOverride
+        }),
         autoComplete: "off",
         onKeyDown: this.handleKeyDown,
         onChange: this.onAmountChange,
@@ -8099,11 +8079,11 @@ class MoneyInput extends Component {
           // eslint-disable-next-line jsx-a11y/click-events-have-key-events
           jsx("div", {
             role: "button",
-            tabIndex: "0",
+            tabIndex: 0,
             onClick: this.handleCustomAction,
             children: this.props.customActionLabel
-          }) : null,
-          placeholder: this.formatMessage(messages$3.selectPlaceholder),
+          }) : undefined,
+          placeholder: this.props.intl.formatMessage(messages$3.selectPlaceholder),
           filterable: true,
           filterPlaceholder: this.props.searchPlaceholder,
           disabled: disabled,
@@ -8120,25 +8100,25 @@ class MoneyInput extends Component {
     });
   }
 }
-function filterOptionsForQuery(options, query) {
+function filterCurrenciesForQuery(currencies, query) {
   if (!query) {
-    return options;
+    return [...currencies];
   }
-  const filteredOptions = removeDuplicateValueOptions(options).filter(option => isCurrencyOptionAndFitsQuery(option, query));
+  const options = currencies.filter(option => option.header == null);
+  const filteredOptions = removeDuplicateValueOptions(options).filter(option => currencyOptionFitsQuery(option, query));
   return sortOptionsLabelsToFirst(filteredOptions, query);
 }
 function removeDuplicateValueOptions(options) {
-  const result = [];
-  const resultValues = [];
-  options.forEach(option => {
-    if (option.value && !resultValues.includes(option.value)) {
-      result.push(option);
-      resultValues.push(option.value);
+  const uniqueValues = new Set();
+  return options.filter(option => {
+    if (!uniqueValues.has(option.value)) {
+      uniqueValues.add(option.value);
+      return true;
     }
+    return false;
   });
-  return result;
 }
-function isCurrencyOptionAndFitsQuery(option, query) {
+function currencyOptionFitsQuery(option, query) {
   if (!option.value) {
     return false;
   }
@@ -8163,43 +8143,6 @@ function sortOptionsLabelsToFirst(options, query) {
     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 = ({
@@ -12352,17 +12295,12 @@ Tabs.defaultProps = {
 };
 var Tabs$1 = Tabs;
 
-const TextareaWithDisplayFormat = props => /*#__PURE__*/jsx(WithDisplayFormat$1, {
+const TextareaWithDisplayFormat = props => /*#__PURE__*/jsx(WithDisplayFormat, {
   ...props,
-  render: renderProps => /*#__PURE__*/jsx("textarea", {
+  render: renderProps => /*#__PURE__*/jsx(TextArea, {
     ...renderProps
   })
 });
-TextareaWithDisplayFormat.propTypes = {
-  displayPattern: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired
-};
-var TextareaWithDisplayFormat$1 = TextareaWithDisplayFormat;
 
 /* eslint-disable jsx-a11y/no-autofocus */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
@@ -15364,16 +15302,16 @@ var th = {
 	"neptune.DateInput.year.label": "ปี",
 	"neptune.DateInput.year.placeholder": "YYYY",
 	"neptune.DateLookup.day": "วัน",
-	"neptune.DateLookup.goTo20YearView": "Go to 20 year view",
+	"neptune.DateLookup.goTo20YearView": "ไปที่มุมมอง 20 ปี",
 	"neptune.DateLookup.month": "เดือน",
 	"neptune.DateLookup.next": "ถัดไป",
 	"neptune.DateLookup.previous": "ก่อนหน้า",
 	"neptune.DateLookup.selected": "เลือกแล้ว",
 	"neptune.DateLookup.twentyYears": "20 ปี",
 	"neptune.DateLookup.year": "ปี",
-	"neptune.FlowNavigation.back": "back to previous step",
+	"neptune.FlowNavigation.back": "กลับไปที่ขั้นก่อนหน้า",
 	"neptune.Info.ariaLabel": "ข้อมูลเพิ่มเติม",
-	"neptune.Link.opensInNewTab": "(opens in new tab)",
+	"neptune.Link.opensInNewTab": "(เปิดในแท็บใหม่)",
 	"neptune.MoneyInput.Select.placeholder": "เลือกตัวเลือก...",
 	"neptune.Select.searchPlaceholder": "ค้นหา...",
 	"neptune.SelectInput.noResultsFound": "ไม่พบผลลัพธ์",
@@ -15659,5 +15597,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$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, 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 };
 //# sourceMappingURL=index.esm.js.map