@transferwise/components 45.17.1 → 45.18.0

package/build/index.esm.js

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { forwardRef, cloneElement, useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect, createContext, useContext, PureComponent, createRef, Component, Children, Fragment as Fragment$1 } from 'react';
+import React__default, { forwardRef, cloneElement, useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect, createContext, useContext, Component, PureComponent, createRef, Children, Fragment as Fragment$1 } from 'react';
 import { useId } from '@radix-ui/react-id';
 import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$2, ClockBorderless, CheckCircle, InfoCircle, Warning, CrossCircle, Clock, Briefcase, Person, ArrowLeft, QuestionMarkCircle, AlertCircle, Search, ChevronDown, CheckCircleFill, ArrowRight, Download, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, AlertCircleFill } from '@transferwise/icons';
 import PropTypes from 'prop-types';
@@ -16,6 +16,7 @@ import mergeRefs from 'react-merge-refs';
 import { isUndefined, isKey, isNumber, isEmpty, isNull, isArray } from '@transferwise/neptune-validation';
 import { usePopper } from 'react-popper';
 import { Transition, Listbox } from '@headlessui/react';
+import mergeProps from 'merge-props';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager, offset, flip, shift, size, autoUpdate } from '@floating-ui/react';
 import { usePreventScroll } from '@react-aria/overlays';
@@ -2093,6 +2094,129 @@ const BottomSheet$1 = props => {
 };
 var BottomSheet$2 = BottomSheet$1;
 
+const radius = {
+  xxs: 6,
+  xs: 11,
+  sm: 22,
+  xl: 61
+};
+const ANIMATION_DURATION_IN_MS = 1500;
+class ProcessIndicator extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      status: props.status,
+      size: props.size
+    };
+    this.interval = null;
+    this.timeout = null;
+  }
+
+  /**
+   * Create interval for animation duration (1500ms)
+   * Update state only at the end of every interval
+   * (end of animation loop) if props changed before end of animation
+   */
+  componentDidMount() {
+    this.interval = setInterval(() => {
+      const statusFromState = this.state.status;
+      const sizeFromState = this.state.size;
+      const statusFromProps = this.props.status;
+      const sizeFromProps = this.props.size;
+      if (statusFromState !== statusFromProps) {
+        this.setState({
+          status: statusFromProps
+        }, this.runCallBack(statusFromProps));
+      }
+      if (sizeFromState !== sizeFromProps) {
+        this.setState({
+          size: sizeFromProps
+        });
+      }
+    }, ANIMATION_DURATION_IN_MS);
+  }
+
+  /**
+   * Only trigger render if comopnent's state got
+   * updated from interval callback
+   *
+   * @param nextProps
+   * @param nextState
+   */
+  shouldComponentUpdate(nextProps, nextState) {
+    const isSameStatus = nextProps.status === nextState.status;
+    const isSameSize = nextProps.size === nextState.size;
+    return isSameStatus && isSameSize;
+  }
+
+  // Clear interval before destroying component
+  componentWillUnmount() {
+    clearInterval(this.interval);
+    clearTimeout(this.timeout);
+  }
+  runCallBack = statusFromProps => {
+    const {
+      onAnimationCompleted
+    } = this.props;
+    if (onAnimationCompleted) {
+      this.timeouts = setTimeout(() => {
+        onAnimationCompleted(statusFromProps);
+      }, ANIMATION_DURATION_IN_MS);
+    }
+  };
+  render() {
+    const {
+      className,
+      'data-testid': dataTestId
+    } = this.props;
+    const {
+      size,
+      status
+    } = this.state;
+    const classes = classNames(`process process-${size}`, className, {
+      [`process-danger`]: status === Status.FAILED,
+      [`process-stopped`]: status === Status.HIDDEN,
+      [`process-success`]: status === Status.SUCCEEDED
+    });
+    return /*#__PURE__*/jsxs("span", {
+      className: classes,
+      "data-testid": dataTestId,
+      children: [/*#__PURE__*/jsxs("span", {
+        className: "process-icon-container",
+        children: [/*#__PURE__*/jsx("span", {
+          className: "process-icon-horizontal"
+        }), /*#__PURE__*/jsx("span", {
+          className: "process-icon-vertical"
+        })]
+      }), /*#__PURE__*/jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/jsx("circle", {
+          className: "process-circle",
+          cx: "50%",
+          cy: "50%",
+          r: radius[this.state.size],
+          fillOpacity: "0.0"
+        })
+      })]
+    });
+  }
+}
+ProcessIndicator.propTypes = {
+  status: PropTypes.oneOf(['processing', 'failed', 'succeeded', 'hidden']),
+  size: PropTypes.oneOf(['xxs', 'xs', 'sm', 'xl']),
+  onAnimationCompleted: PropTypes.func,
+  className: PropTypes.string,
+  'data-testid': PropTypes.string
+};
+ProcessIndicator.defaultProps = {
+  status: Status.PROCESSING,
+  size: Size.SMALL,
+  onAnimationCompleted: null,
+  className: undefined,
+  'data-testid': null
+};
+var ProcessIndicator$1 = ProcessIndicator;
+
 var messages$8 = defineMessages({
   loadingAriaLabel: {
     id: "neptune.Button.loadingAriaLabel"
@@ -2187,6 +2311,9 @@ const Button = /*#__PURE__*/forwardRef(({
   // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   priorityClassMap[newPriority], className);
+  function processIndicatorSize() {
+    return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';
+  }
   const Element = component ?? 'button';
   let props;
   if (Element === 'button') {
@@ -2210,10 +2337,9 @@ const Button = /*#__PURE__*/forwardRef(({
     ...props,
     "aria-live": loading ? 'polite' : 'off',
     "aria-label": loading ? intl.formatMessage(messages$8.loadingAriaLabel) : undefined,
-    children: [children, loading && /*#__PURE__*/jsx("span", {
-      className: classNames('btn-loader', {
-        'm-l-2': !block
-      })
+    children: [children, loading && /*#__PURE__*/jsx(ProcessIndicator$1, {
+      size: processIndicatorSize(),
+      className: "btn-loader"
     })]
   });
 });
@@ -5361,12 +5487,15 @@ const Tooltip = ({
   position = Position.TOP,
   children = undefined,
   label,
+  id,
   className
 }) => {
   const [open, setOpen] = useState(false);
   const anchorReference = useRef(null);
   const [arrowElement, setArrowElement] = useState(null);
   const [popperElement, setPopperElement] = useState(null);
+  const fallbackId = useId();
+  const tooltipId = id ?? fallbackId;
   const modifiers = [];
   modifiers.push({
     name: 'arrow',
@@ -5405,60 +5534,42 @@ const Tooltip = ({
       forceUpdate();
     }
   }, [open]);
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx("span", {
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/jsxs("span", {
       ref: anchorReference,
-      className: "d-inline-block",
-      children: children ? /*#__PURE__*/cloneElement(children, {
-        /* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
-        onMouseOver: () => {
-          if (children?.props?.onMouseOver) {
-            children?.props?.onMouseOver();
-          }
-          setOpen(true);
-        },
-        onFocus: () => {
-          if (children?.props?.onFocus) {
-            children.props.onFocus();
-          }
-          setOpen(true);
-        },
-        onMouseOut: () => {
-          if (children?.props?.onMouseOver) {
-            children.props.onMouseOver();
-          }
-          setOpen(false);
+      className: "tw-tooltip-container",
+      onMouseOver: () => setOpen(true),
+      onFocus: () => setOpen(true),
+      onMouseOut: () => setOpen(false),
+      onBlur: () => setOpen(false),
+      children: [children ? /*#__PURE__*/cloneElement(children, {
+        'aria-describedby': `${tooltipId}-tooltip`
+      }) : null, /*#__PURE__*/jsx("div", {
+        // @ts-expect-error
+        ref: setPopperElement,
+        className: classNames('np-tooltip', 'np-panel', open ? `np-panel--open np-tooltip--open` : null, className)
+        // eslint-disable-next-line react/forbid-dom-props
+        ,
+        style: {
+          ...styles.popper
         },
-        onBlur: () => {
-          if (children?.props?.onBlur) {
-            children.props.onBlur();
-          }
-          setOpen(false);
-        }
-        /* eslint-enable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
-      }) : null
-    }), open ? /*#__PURE__*/jsx("div", {
-      // @ts-expect-error
-      ref: setPopperElement,
-      className: classNames('np-tooltip', 'np-panel', 'np-panel--open', 'bg-screen', className)
-      // eslint-disable-next-line react/forbid-dom-props
-      ,
-      style: {
-        ...styles.popper
-      },
-      ...attributes.popper,
-      children: /*#__PURE__*/jsxs("div", {
-        className: "np-panel__content tooltip-inner",
-        children: [label, /*#__PURE__*/jsx("div", {
-          // @ts-expect-error
-          ref: setArrowElement,
-          className: classNames('np-panel__arrow')
-          // eslint-disable-next-line react/forbid-dom-props
-          ,
-          style: styles.arrow
-        })]
-      })
-    }) : null]
+        ...attributes.popper,
+        "aria-hidden": !open,
+        role: "tooltip",
+        id: `${tooltipId}-tooltip`,
+        children: /*#__PURE__*/jsxs("div", {
+          className: "np-panel__content tooltip-inner",
+          children: [label, /*#__PURE__*/jsx("div", {
+            // @ts-expect-error
+            ref: setArrowElement,
+            className: classNames('np-panel__arrow')
+            // eslint-disable-next-line react/forbid-dom-props
+            ,
+            style: styles.arrow
+          })]
+        })
+      })]
+    })
   });
 };
 var Tooltip$1 = Tooltip;
@@ -6219,6 +6330,20 @@ function useScreenSize(size) {
   return useMedia(`(min-width: ${size}px)`);
 }
 
+const PolymorphicWithOverrides = /*#__PURE__*/forwardRef(function PolymorphicWithOverrides({
+  __overrides: {
+    as: Element,
+    ...restOverrides
+  },
+  ...restProps
+}, ref) {
+  return /*#__PURE__*/jsx(Element, {
+    ref: ref,
+    ...restProps,
+    ...restOverrides
+  });
+});
+
 function wrapInFragment(value) {
   return /*#__PURE__*/jsx(Fragment, {
     children: value
@@ -6465,7 +6590,8 @@ function inferSearchableStrings(value) {
   return [];
 }
 const SelectInputHasValueContext = /*#__PURE__*/createContext(false);
-const SelectInputOptionContentCompactContext = /*#__PURE__*/createContext(false);
+const SelectInputTriggerButtonPropsContext = /*#__PURE__*/createContext({});
+const SelectInputOptionContentWithinTriggerContext = /*#__PURE__*/createContext(false);
 function dedupeSelectInputOptionItem(item, existingValues) {
   if (existingValues.has(item.value)) {
     return {
@@ -6495,14 +6621,68 @@ function dedupeSelectInputItems(items) {
     return item;
   });
 }
+const defaultRenderTrigger = ({
+  content,
+  placeholderShown,
+  clear,
+  disabled,
+  className
+}) => /*#__PURE__*/jsx(InputGroup, {
+  addonEnd: {
+    content: /*#__PURE__*/jsxs("span", {
+      className: classNames('np-select-input-addon-container', disabled && 'disabled'),
+      children: [clear != null && !placeholderShown ? /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(SelectInputClearButton, {
+          onClick: event => {
+            event.preventDefault();
+            clear();
+          }
+        }), /*#__PURE__*/jsx("span", {
+          className: "np-select-input-addon-separator"
+        })]
+      }) : null, /*#__PURE__*/jsx("span", {
+        className: "np-select-input-addon",
+        children: /*#__PURE__*/jsx(ChevronDown, {
+          size: 16
+        })
+      })]
+    }),
+    padding: 'sm'
+  },
+  disabled: disabled,
+  className: className,
+  children: /*#__PURE__*/jsx(SelectInputTriggerButton, {
+    as: ButtonInput,
+    children: placeholderShown ? /*#__PURE__*/jsxs("span", {
+      className: "np-select-input-placeholder",
+      children: [" ", content]
+    }) : content
+  })
+});
+function SelectInputClearButton({
+  className,
+  onClick
+}) {
+  const intl = useIntl();
+  return /*#__PURE__*/jsx("button", {
+    type: "button",
+    "aria-label": intl.formatMessage(messages$5.ariaLabel),
+    className: classNames(className, 'np-select-input-addon np-select-input-addon--interactive'),
+    onClick: onClick,
+    children: /*#__PURE__*/jsx(Cross, {
+      size: 16
+    })
+  });
+}
 function SelectInput({
   name,
   placeholder,
   items,
   defaultValue,
   value: controlledValue,
-  renderValue = wrapInFragment,
   compareValues,
+  renderValue = wrapInFragment,
+  renderTrigger = defaultRenderTrigger,
   filterable,
   filterPlaceholder,
   disabled,
@@ -6510,7 +6690,6 @@ function SelectInput({
   onChange,
   onClear
 }) {
-  const intl = useIntl();
   const [open, setOpen] = useState(false);
   const triggerRef = useRef(null);
   const screenSm = useScreenSize(Breakpoint.SMALL);
@@ -6536,87 +6715,75 @@ function SelectInput({
       value
     }) => /*#__PURE__*/jsx(SelectInputHasValueContext.Provider, {
       value: value != null,
-      children: /*#__PURE__*/jsx(InputGroup, {
-        addonEnd: {
-          content: /*#__PURE__*/jsxs("span", {
-            className: classNames('np-select-input-addon-container', uiDisabled && 'disabled'),
-            children: [onClear != null && value != null ? /*#__PURE__*/jsxs(Fragment, {
-              children: [/*#__PURE__*/jsx("button", {
-                type: "button",
-                "aria-label": intl.formatMessage(messages$5.ariaLabel),
-                disabled: uiDisabled,
-                className: "np-select-input-addon np-select-input-addon--interactive",
-                onClick: event => {
-                  event.preventDefault();
-                  onClear();
-                  triggerRef.current?.focus({
-                    preventScroll: true
-                  });
-                },
-                children: /*#__PURE__*/jsx(Cross, {
-                  size: 16
-                })
-              }), /*#__PURE__*/jsx("span", {
-                className: "np-select-input-addon-separator"
-              })]
-            }) : null, /*#__PURE__*/jsx("span", {
-              className: "np-select-input-addon",
-              children: /*#__PURE__*/jsx(ChevronDown, {
-                size: 16
-              })
-            })]
-          }),
-          padding: 'sm'
-        },
-        className: className,
-        children: /*#__PURE__*/jsx(OptionsOverlay, {
-          open: open,
-          renderTrigger: ({
-            ref,
-            getInteractionProps
-          }) => /*#__PURE__*/jsx(Listbox.Button, {
+      children: /*#__PURE__*/jsx(OptionsOverlay, {
+        open: open,
+        renderTrigger: ({
+          ref,
+          getInteractionProps
+        }) => /*#__PURE__*/jsx(SelectInputTriggerButtonPropsContext.Provider, {
+          // eslint-disable-next-line react/jsx-no-constructed-context-values
+          value: {
             ref: mergeRefs([ref, triggerRef]),
-            as: SelectInputButton,
-            overrides: getInteractionProps(),
-            onClick: () => {
-              setOpen(prev => !prev);
-            },
-            children: value != null ? /*#__PURE__*/jsx(SelectInputOptionContentCompactContext.Provider, {
+            ...mergeProps({
+              onClick: () => {
+                setOpen(prev => !prev);
+              }
+            }, getInteractionProps())
+          },
+          children: renderTrigger({
+            content: value != null ? /*#__PURE__*/jsx(SelectInputOptionContentWithinTriggerContext.Provider, {
               value: true,
               children: renderValue(value, true)
-            }) : /*#__PURE__*/jsx("span", {
-              className: "np-select-input-placeholder",
-              children: placeholder
-            })
-          }),
-          initialFocusRef: controllerRef,
-          padding: "none",
-          onClose: () => {
-            setOpen(false);
-          },
-          children: /*#__PURE__*/jsx(SelectInputOptions, {
-            items: items,
-            renderValue: renderValue,
-            filterable: filterable,
-            filterPlaceholder: filterPlaceholder,
-            searchInputRef: searchInputRef,
-            listboxRef: listboxRef
+            }) : placeholder,
+            placeholderShown: value == null,
+            clear: onClear != null ? () => {
+              onClear();
+              triggerRef.current?.focus({
+                preventScroll: true
+              });
+            } : undefined,
+            disabled: uiDisabled,
+            className: classNames(className, 'np-text-body-large')
           })
+        }),
+        initialFocusRef: controllerRef,
+        padding: "none",
+        onClose: () => {
+          setOpen(false);
+        },
+        children: /*#__PURE__*/jsx(SelectInputOptions, {
+          items: items,
+          renderValue: renderValue,
+          filterable: filterable,
+          filterPlaceholder: filterPlaceholder,
+          searchInputRef: searchInputRef,
+          listboxRef: listboxRef
         })
       })
     })
   });
 }
-const SelectInputButton = /*#__PURE__*/forwardRef(function SelectInputButton({
-  overrides,
+function SelectInputTriggerButton({
+  as = 'button',
   ...restProps
-}, ref) {
-  return /*#__PURE__*/jsx(ButtonInput, {
+}) {
+  const {
+    ref,
+    onClick,
+    ...interactionProps
+  } = useContext(SelectInputTriggerButtonPropsContext);
+  return /*#__PURE__*/jsx(Listbox.Button, {
     ref: ref,
-    ...restProps,
-    ...overrides
+    as: PolymorphicWithOverrides,
+    __overrides: {
+      as,
+      ...interactionProps
+    },
+    ...mergeProps({
+      onClick
+    }, restProps)
   });
-});
+}
 const SelectInputOptionsContainer = /*#__PURE__*/forwardRef(function SelectInputOptionsContainer({
   'aria-orientation': ariaOrientation,
   'aria-activedescendant': ariaActiveDescendant,
@@ -6745,8 +6912,7 @@ function SelectInputItemView({
       {
         if (needle == null) {
           return /*#__PURE__*/jsx("hr", {
-            className: "np-select-input-separator-item",
-            "aria-hidden": true
+            className: "np-select-input-separator-item"
           });
         }
         break;
@@ -6799,18 +6965,19 @@ function SelectInputOption({
     disabled: disabled,
     className: ({
       active,
+      selected,
       disabled: uiDisabled
-    }) => classNames('np-select-input-option-container np-text-body-large', active && 'np-select-input-option-container--active', uiDisabled && 'np-select-input-option-container--disabled'),
+    }) => classNames('np-select-input-option-container np-text-body-large', active && 'np-select-input-option-container--active', selected && 'np-select-input-option-container--selected', uiDisabled && 'np-select-input-option-container--disabled'),
     children: ({
       selected
     }) => /*#__PURE__*/jsxs(Fragment, {
-      children: [cachedParentHasValue ? /*#__PURE__*/jsx(Check, {
-        size: 16,
-        className: classNames(!selected && 'np-select-input-option-check--not-selected')
-      }) : null, /*#__PURE__*/jsx("div", {
+      children: [/*#__PURE__*/jsx("div", {
         className: "np-select-input-option",
         children: children
-      })]
+      }), cachedParentHasValue ? /*#__PURE__*/jsx(Check, {
+        size: 24,
+        className: classNames('np-select-input-option-check', !selected && 'np-select-input-option-check--not-selected')
+      }) : null]
     })
   });
 }
@@ -6820,16 +6987,16 @@ function SelectInputOptionContent({
   description,
   icon
 }) {
-  const compact = useContext(SelectInputOptionContentCompactContext);
+  const withinTrigger = useContext(SelectInputOptionContentWithinTriggerContext);
   return /*#__PURE__*/jsxs("div", {
     className: "np-select-input-option-content-container np-text-body-large",
     children: [icon ? /*#__PURE__*/jsx("div", {
-      className: classNames('np-select-input-option-content-icon', !compact && 'np-select-input-option-content-icon--not-compact'),
+      className: classNames('np-select-input-option-content-icon', !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger'),
       children: icon
     }) : null, /*#__PURE__*/jsxs("div", {
       className: "np-select-input-option-content-text",
       children: [/*#__PURE__*/jsxs("div", {
-        className: classNames('np-select-input-option-content-text-line-1', compact && 'np-select-input-option-content-text-compact'),
+        className: classNames('np-select-input-option-content-text-line-1', withinTrigger && 'np-select-input-option-content-text-within-trigger'),
         children: [/*#__PURE__*/jsx("h4", {
           className: "d-inline np-text-body-large",
           children: title
@@ -6838,7 +7005,7 @@ function SelectInputOptionContent({
           children: note
         }) : null]
       }), description ? /*#__PURE__*/jsx("div", {
-        className: classNames('np-select-input-option-content-text-secondary np-text-body-default', compact && 'np-select-input-option-content-text-compact'),
+        className: classNames('np-select-input-option-content-text-secondary np-text-body-default', withinTrigger && 'np-select-input-option-content-text-within-trigger'),
         children: description
       }) : null]
     })]
@@ -7288,47 +7455,48 @@ InputWithDisplayFormat.propTypes = {
 };
 var InputWithDisplayFormat$1 = InputWithDisplayFormat;
 
-const InstructionsList = props => {
-  const {
-    isModern
-  } = useTheme();
-  const {
-    dos,
-    donts
-  } = props;
-  const DontIcon = isModern ? CrossCircleFill : CrossCircle;
-  const DoIcon = isModern ? CheckCircleFill : CheckCircle;
+const InstructionsList = ({
+  dos,
+  donts
+}) => {
   return /*#__PURE__*/jsxs("div", {
     className: "tw-instructions",
     children: [dos && dos.map((doThis, index) =>
     /*#__PURE__*/
     // eslint-disable-next-line react/no-array-index-key
-    jsxs("div", {
-      className: "instruction",
-      children: [/*#__PURE__*/jsx(DoIcon, {
-        size: 24,
-        className: "do"
-      }), /*#__PURE__*/jsx(Body, {
-        className: "text-primary",
-        type: Typography.BODY_LARGE,
-        children: doThis
-      })]
+    jsx(Instruction, {
+      item: doThis,
+      type: "do"
     }, index)), donts && donts.map((dont, index) =>
     /*#__PURE__*/
     // eslint-disable-next-line react/no-array-index-key
-    jsxs("div", {
-      className: "instruction",
-      children: [/*#__PURE__*/jsx(DontIcon, {
-        size: 24,
-        className: "dont"
-      }), /*#__PURE__*/jsx(Body, {
-        className: "text-primary",
-        type: Typography.BODY_LARGE,
-        children: dont
-      })]
+    jsx(Instruction, {
+      item: dont,
+      type: "dont"
     }, index))]
   });
 };
+function Instruction({
+  item,
+  type
+}) {
+  const isInstructionNode = typeof item === 'object' && item !== null && 'content' in item && 'aria-label' in item;
+  return /*#__PURE__*/jsxs("div", {
+    className: "instruction",
+    "aria-label": isInstructionNode ? item['aria-label'] : undefined,
+    children: [type === 'do' ? /*#__PURE__*/jsx(CheckCircleFill, {
+      size: 24,
+      className: type
+    }) : /*#__PURE__*/jsx(CrossCircleFill, {
+      size: 24,
+      className: type
+    }), /*#__PURE__*/jsx(Body, {
+      className: "text-primary",
+      type: Typography.BODY_LARGE,
+      children: isInstructionNode ? item.content : item
+    })]
+  });
+}
 var InstructionsList$1 = InstructionsList;
 
 const Loader = ({
@@ -10195,128 +10363,6 @@ PhoneNumberInput.defaultProps = {
 };
 var PhoneNumberInput$1 = PhoneNumberInput;
 
-const radius = {
-  xs: 11,
-  sm: 22,
-  xl: 61
-};
-const ANIMATION_DURATION_IN_MS = 1500;
-class ProcessIndicator extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      status: props.status,
-      size: props.size
-    };
-    this.interval = null;
-    this.timeout = null;
-  }
-
-  /**
-   * Create interval for animation duration (1500ms)
-   * Update state only at the end of every interval
-   * (end of animation loop) if props changed before end of animation
-   */
-  componentDidMount() {
-    this.interval = setInterval(() => {
-      const statusFromState = this.state.status;
-      const sizeFromState = this.state.size;
-      const statusFromProps = this.props.status;
-      const sizeFromProps = this.props.size;
-      if (statusFromState !== statusFromProps) {
-        this.setState({
-          status: statusFromProps
-        }, this.runCallBack(statusFromProps));
-      }
-      if (sizeFromState !== sizeFromProps) {
-        this.setState({
-          size: sizeFromProps
-        });
-      }
-    }, ANIMATION_DURATION_IN_MS);
-  }
-
-  /**
-   * Only trigger render if comopnent's state got
-   * updated from interval callback
-   *
-   * @param nextProps
-   * @param nextState
-   */
-  shouldComponentUpdate(nextProps, nextState) {
-    const isSameStatus = nextProps.status === nextState.status;
-    const isSameSize = nextProps.size === nextState.size;
-    return isSameStatus && isSameSize;
-  }
-
-  // Clear interval before destroying component
-  componentWillUnmount() {
-    clearInterval(this.interval);
-    clearTimeout(this.timeout);
-  }
-  runCallBack = statusFromProps => {
-    const {
-      onAnimationCompleted
-    } = this.props;
-    if (onAnimationCompleted) {
-      this.timeouts = setTimeout(() => {
-        onAnimationCompleted(statusFromProps);
-      }, ANIMATION_DURATION_IN_MS);
-    }
-  };
-  render() {
-    const {
-      className,
-      'data-testid': dataTestId
-    } = this.props;
-    const {
-      size,
-      status
-    } = this.state;
-    const classes = classNames(`process process-${size}`, className, {
-      [`process-danger`]: status === Status.FAILED,
-      [`process-stopped`]: status === Status.HIDDEN,
-      [`process-success`]: status === Status.SUCCEEDED
-    });
-    return /*#__PURE__*/jsxs("span", {
-      className: classes,
-      "data-testid": dataTestId,
-      children: [/*#__PURE__*/jsxs("span", {
-        className: "process-icon-container",
-        children: [/*#__PURE__*/jsx("span", {
-          className: "process-icon-horizontal"
-        }), /*#__PURE__*/jsx("span", {
-          className: "process-icon-vertical"
-        })]
-      }), /*#__PURE__*/jsx("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        children: /*#__PURE__*/jsx("circle", {
-          className: "process-circle",
-          cx: "50%",
-          cy: "50%",
-          r: radius[this.state.size],
-          fillOpacity: "0.0"
-        })
-      })]
-    });
-  }
-}
-ProcessIndicator.propTypes = {
-  status: PropTypes.oneOf(['processing', 'failed', 'succeeded', 'hidden']),
-  size: PropTypes.oneOf(['xs', 'sm', 'xl']),
-  onAnimationCompleted: PropTypes.func,
-  className: PropTypes.string,
-  'data-testid': PropTypes.string
-};
-ProcessIndicator.defaultProps = {
-  status: Status.PROCESSING,
-  size: Size.SMALL,
-  onAnimationCompleted: null,
-  className: undefined,
-  'data-testid': null
-};
-var ProcessIndicator$1 = ProcessIndicator;
-
 const Progress = ({
   className,
   id,