@transferwise/components 45.17.1 → 45.18.0

package/build/index.js

@@ -17,6 +17,7 @@ var mergeRefs = require('react-merge-refs');
 var neptuneValidation = require('@transferwise/neptune-validation');
 var reactPopper = require('react-popper');
 var react$1 = require('@headlessui/react');
+var mergeProps = require('merge-props');
 var shim = require('use-sync-external-store/shim');
 var react = require('@floating-ui/react');
 var overlays = require('@react-aria/overlays');
@@ -54,6 +55,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var throttle__default = /*#__PURE__*/_interopDefault(throttle);
 var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
+var mergeProps__default = /*#__PURE__*/_interopDefault(mergeProps);
 var clamp__default = /*#__PURE__*/_interopDefault(clamp$2);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
 var requiredIf__default = /*#__PURE__*/_interopDefault(requiredIf);
@@ -2126,6 +2128,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 React.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__default.default(`process process-${size}`, className, {
+      [`process-danger`]: status === exports.Status.FAILED,
+      [`process-stopped`]: status === exports.Status.HIDDEN,
+      [`process-success`]: status === exports.Status.SUCCEEDED
+    });
+    return /*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: classes,
+      "data-testid": dataTestId,
+      children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
+        className: "process-icon-container",
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "process-icon-horizontal"
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "process-icon-vertical"
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/jsxRuntime.jsx("circle", {
+          className: "process-circle",
+          cx: "50%",
+          cy: "50%",
+          r: radius[this.state.size],
+          fillOpacity: "0.0"
+        })
+      })]
+    });
+  }
+}
+ProcessIndicator.propTypes = {
+  status: PropTypes__default.default.oneOf(['processing', 'failed', 'succeeded', 'hidden']),
+  size: PropTypes__default.default.oneOf(['xxs', 'xs', 'sm', 'xl']),
+  onAnimationCompleted: PropTypes__default.default.func,
+  className: PropTypes__default.default.string,
+  'data-testid': PropTypes__default.default.string
+};
+ProcessIndicator.defaultProps = {
+  status: exports.Status.PROCESSING,
+  size: exports.Size.SMALL,
+  onAnimationCompleted: null,
+  className: undefined,
+  'data-testid': null
+};
+var ProcessIndicator$1 = ProcessIndicator;
+
 var messages$8 = reactIntl.defineMessages({
   loadingAriaLabel: {
     id: "neptune.Button.loadingAriaLabel"
@@ -2220,6 +2345,9 @@ const Button = /*#__PURE__*/React.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') {
@@ -2243,10 +2371,9 @@ const Button = /*#__PURE__*/React.forwardRef(({
     ...props,
     "aria-live": loading ? 'polite' : 'off',
     "aria-label": loading ? intl.formatMessage(messages$8.loadingAriaLabel) : undefined,
-    children: [children, loading && /*#__PURE__*/jsxRuntime.jsx("span", {
-      className: classNames__default.default('btn-loader', {
-        'm-l-2': !block
-      })
+    children: [children, loading && /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator$1, {
+      size: processIndicatorSize(),
+      className: "btn-loader"
     })]
   });
 });
@@ -5394,12 +5521,15 @@ const Tooltip = ({
   position = exports.Position.TOP,
   children = undefined,
   label,
+  id,
   className
 }) => {
   const [open, setOpen] = React.useState(false);
   const anchorReference = React.useRef(null);
   const [arrowElement, setArrowElement] = React.useState(null);
   const [popperElement, setPopperElement] = React.useState(null);
+  const fallbackId = reactId.useId();
+  const tooltipId = id ?? fallbackId;
   const modifiers = [];
   modifiers.push({
     name: 'arrow',
@@ -5438,60 +5568,42 @@ const Tooltip = ({
       forceUpdate();
     }
   }, [open]);
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: /*#__PURE__*/jsxRuntime.jsxs("span", {
       ref: anchorReference,
-      className: "d-inline-block",
-      children: children ? /*#__PURE__*/React.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__*/React.cloneElement(children, {
+        'aria-describedby': `${tooltipId}-tooltip`
+      }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
+        // @ts-expect-error
+        ref: setPopperElement,
+        className: classNames__default.default('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__*/jsxRuntime.jsx("div", {
-      // @ts-expect-error
-      ref: setPopperElement,
-      className: classNames__default.default('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__*/jsxRuntime.jsxs("div", {
-        className: "np-panel__content tooltip-inner",
-        children: [label, /*#__PURE__*/jsxRuntime.jsx("div", {
-          // @ts-expect-error
-          ref: setArrowElement,
-          className: classNames__default.default('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__*/jsxRuntime.jsxs("div", {
+          className: "np-panel__content tooltip-inner",
+          children: [label, /*#__PURE__*/jsxRuntime.jsx("div", {
+            // @ts-expect-error
+            ref: setArrowElement,
+            className: classNames__default.default('np-panel__arrow')
+            // eslint-disable-next-line react/forbid-dom-props
+            ,
+            style: styles.arrow
+          })]
+        })
+      })]
+    })
   });
 };
 var Tooltip$1 = Tooltip;
@@ -6252,6 +6364,20 @@ function useScreenSize(size) {
   return useMedia(`(min-width: ${size}px)`);
 }
 
+const PolymorphicWithOverrides = /*#__PURE__*/React.forwardRef(function PolymorphicWithOverrides({
+  __overrides: {
+    as: Element,
+    ...restOverrides
+  },
+  ...restProps
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.jsx(Element, {
+    ref: ref,
+    ...restProps,
+    ...restOverrides
+  });
+});
+
 function wrapInFragment(value) {
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: value
@@ -6498,7 +6624,8 @@ function inferSearchableStrings(value) {
   return [];
 }
 const SelectInputHasValueContext = /*#__PURE__*/React.createContext(false);
-const SelectInputOptionContentCompactContext = /*#__PURE__*/React.createContext(false);
+const SelectInputTriggerButtonPropsContext = /*#__PURE__*/React.createContext({});
+const SelectInputOptionContentWithinTriggerContext = /*#__PURE__*/React.createContext(false);
 function dedupeSelectInputOptionItem(item, existingValues) {
   if (existingValues.has(item.value)) {
     return {
@@ -6528,14 +6655,68 @@ function dedupeSelectInputItems(items) {
     return item;
   });
 }
+const defaultRenderTrigger = ({
+  content,
+  placeholderShown,
+  clear,
+  disabled,
+  className
+}) => /*#__PURE__*/jsxRuntime.jsx(InputGroup, {
+  addonEnd: {
+    content: /*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: classNames__default.default('np-select-input-addon-container', disabled && 'disabled'),
+      children: [clear != null && !placeholderShown ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(SelectInputClearButton, {
+          onClick: event => {
+            event.preventDefault();
+            clear();
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "np-select-input-addon-separator"
+        })]
+      }) : null, /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "np-select-input-addon",
+        children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronDown, {
+          size: 16
+        })
+      })]
+    }),
+    padding: 'sm'
+  },
+  disabled: disabled,
+  className: className,
+  children: /*#__PURE__*/jsxRuntime.jsx(SelectInputTriggerButton, {
+    as: ButtonInput,
+    children: placeholderShown ? /*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: "np-select-input-placeholder",
+      children: [" ", content]
+    }) : content
+  })
+});
+function SelectInputClearButton({
+  className,
+  onClick
+}) {
+  const intl = reactIntl.useIntl();
+  return /*#__PURE__*/jsxRuntime.jsx("button", {
+    type: "button",
+    "aria-label": intl.formatMessage(messages$5.ariaLabel),
+    className: classNames__default.default(className, 'np-select-input-addon np-select-input-addon--interactive'),
+    onClick: onClick,
+    children: /*#__PURE__*/jsxRuntime.jsx(icons.Cross, {
+      size: 16
+    })
+  });
+}
 function SelectInput({
   name,
   placeholder,
   items,
   defaultValue,
   value: controlledValue,
-  renderValue = wrapInFragment,
   compareValues,
+  renderValue = wrapInFragment,
+  renderTrigger = defaultRenderTrigger,
   filterable,
   filterPlaceholder,
   disabled,
@@ -6543,7 +6724,6 @@ function SelectInput({
   onChange,
   onClear
 }) {
-  const intl = reactIntl.useIntl();
   const [open, setOpen] = React.useState(false);
   const triggerRef = React.useRef(null);
   const screenSm = useScreenSize(exports.Breakpoint.SMALL);
@@ -6569,87 +6749,75 @@ function SelectInput({
       value
     }) => /*#__PURE__*/jsxRuntime.jsx(SelectInputHasValueContext.Provider, {
       value: value != null,
-      children: /*#__PURE__*/jsxRuntime.jsx(InputGroup, {
-        addonEnd: {
-          content: /*#__PURE__*/jsxRuntime.jsxs("span", {
-            className: classNames__default.default('np-select-input-addon-container', uiDisabled && 'disabled'),
-            children: [onClear != null && value != null ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(icons.Cross, {
-                  size: 16
-                })
-              }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "np-select-input-addon-separator"
-              })]
-            }) : null, /*#__PURE__*/jsxRuntime.jsx("span", {
-              className: "np-select-input-addon",
-              children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronDown, {
-                size: 16
-              })
-            })]
-          }),
-          padding: 'sm'
-        },
-        className: className,
-        children: /*#__PURE__*/jsxRuntime.jsx(OptionsOverlay, {
-          open: open,
-          renderTrigger: ({
-            ref,
-            getInteractionProps
-          }) => /*#__PURE__*/jsxRuntime.jsx(react$1.Listbox.Button, {
+      children: /*#__PURE__*/jsxRuntime.jsx(OptionsOverlay, {
+        open: open,
+        renderTrigger: ({
+          ref,
+          getInteractionProps
+        }) => /*#__PURE__*/jsxRuntime.jsx(SelectInputTriggerButtonPropsContext.Provider, {
+          // eslint-disable-next-line react/jsx-no-constructed-context-values
+          value: {
             ref: mergeRefs__default.default([ref, triggerRef]),
-            as: SelectInputButton,
-            overrides: getInteractionProps(),
-            onClick: () => {
-              setOpen(prev => !prev);
-            },
-            children: value != null ? /*#__PURE__*/jsxRuntime.jsx(SelectInputOptionContentCompactContext.Provider, {
+            ...mergeProps__default.default({
+              onClick: () => {
+                setOpen(prev => !prev);
+              }
+            }, getInteractionProps())
+          },
+          children: renderTrigger({
+            content: value != null ? /*#__PURE__*/jsxRuntime.jsx(SelectInputOptionContentWithinTriggerContext.Provider, {
               value: true,
               children: renderValue(value, true)
-            }) : /*#__PURE__*/jsxRuntime.jsx("span", {
-              className: "np-select-input-placeholder",
-              children: placeholder
-            })
-          }),
-          initialFocusRef: controllerRef,
-          padding: "none",
-          onClose: () => {
-            setOpen(false);
-          },
-          children: /*#__PURE__*/jsxRuntime.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__default.default(className, 'np-text-body-large')
           })
+        }),
+        initialFocusRef: controllerRef,
+        padding: "none",
+        onClose: () => {
+          setOpen(false);
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(SelectInputOptions, {
+          items: items,
+          renderValue: renderValue,
+          filterable: filterable,
+          filterPlaceholder: filterPlaceholder,
+          searchInputRef: searchInputRef,
+          listboxRef: listboxRef
         })
       })
     })
   });
 }
-const SelectInputButton = /*#__PURE__*/React.forwardRef(function SelectInputButton({
-  overrides,
+function SelectInputTriggerButton({
+  as = 'button',
   ...restProps
-}, ref) {
-  return /*#__PURE__*/jsxRuntime.jsx(ButtonInput, {
+}) {
+  const {
+    ref,
+    onClick,
+    ...interactionProps
+  } = React.useContext(SelectInputTriggerButtonPropsContext);
+  return /*#__PURE__*/jsxRuntime.jsx(react$1.Listbox.Button, {
     ref: ref,
-    ...restProps,
-    ...overrides
+    as: PolymorphicWithOverrides,
+    __overrides: {
+      as,
+      ...interactionProps
+    },
+    ...mergeProps__default.default({
+      onClick
+    }, restProps)
   });
-});
+}
 const SelectInputOptionsContainer = /*#__PURE__*/React.forwardRef(function SelectInputOptionsContainer({
   'aria-orientation': ariaOrientation,
   'aria-activedescendant': ariaActiveDescendant,
@@ -6778,8 +6946,7 @@ function SelectInputItemView({
       {
         if (needle == null) {
           return /*#__PURE__*/jsxRuntime.jsx("hr", {
-            className: "np-select-input-separator-item",
-            "aria-hidden": true
+            className: "np-select-input-separator-item"
           });
         }
         break;
@@ -6832,18 +6999,19 @@ function SelectInputOption({
     disabled: disabled,
     className: ({
       active,
+      selected,
       disabled: uiDisabled
-    }) => classNames__default.default('np-select-input-option-container np-text-body-large', active && 'np-select-input-option-container--active', uiDisabled && 'np-select-input-option-container--disabled'),
+    }) => classNames__default.default('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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [cachedParentHasValue ? /*#__PURE__*/jsxRuntime.jsx(icons.Check, {
-        size: 16,
-        className: classNames__default.default(!selected && 'np-select-input-option-check--not-selected')
-      }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
         className: "np-select-input-option",
         children: children
-      })]
+      }), cachedParentHasValue ? /*#__PURE__*/jsxRuntime.jsx(icons.Check, {
+        size: 24,
+        className: classNames__default.default('np-select-input-option-check', !selected && 'np-select-input-option-check--not-selected')
+      }) : null]
     })
   });
 }
@@ -6853,16 +7021,16 @@ function SelectInputOptionContent({
   description,
   icon
 }) {
-  const compact = React.useContext(SelectInputOptionContentCompactContext);
+  const withinTrigger = React.useContext(SelectInputOptionContentWithinTriggerContext);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "np-select-input-option-content-container np-text-body-large",
     children: [icon ? /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames__default.default('np-select-input-option-content-icon', !compact && 'np-select-input-option-content-icon--not-compact'),
+      className: classNames__default.default('np-select-input-option-content-icon', !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger'),
       children: icon
     }) : null, /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "np-select-input-option-content-text",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: classNames__default.default('np-select-input-option-content-text-line-1', compact && 'np-select-input-option-content-text-compact'),
+        className: classNames__default.default('np-select-input-option-content-text-line-1', withinTrigger && 'np-select-input-option-content-text-within-trigger'),
         children: [/*#__PURE__*/jsxRuntime.jsx("h4", {
           className: "d-inline np-text-body-large",
           children: title
@@ -6871,7 +7039,7 @@ function SelectInputOptionContent({
           children: note
         }) : null]
       }), description ? /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames__default.default('np-select-input-option-content-text-secondary np-text-body-default', compact && 'np-select-input-option-content-text-compact'),
+        className: classNames__default.default('np-select-input-option-content-text-secondary np-text-body-default', withinTrigger && 'np-select-input-option-content-text-within-trigger'),
         children: description
       }) : null]
     })]
@@ -7321,47 +7489,48 @@ InputWithDisplayFormat.propTypes = {
 };
 var InputWithDisplayFormat$1 = InputWithDisplayFormat;
 
-const InstructionsList = props => {
-  const {
-    isModern
-  } = componentsTheming.useTheme();
-  const {
-    dos,
-    donts
-  } = props;
-  const DontIcon = isModern ? icons.CrossCircleFill : icons.CrossCircle;
-  const DoIcon = isModern ? icons.CheckCircleFill : icons.CheckCircle;
+const InstructionsList = ({
+  dos,
+  donts
+}) => {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "tw-instructions",
     children: [dos && dos.map((doThis, index) =>
     /*#__PURE__*/
     // eslint-disable-next-line react/no-array-index-key
-    jsxRuntime.jsxs("div", {
-      className: "instruction",
-      children: [/*#__PURE__*/jsxRuntime.jsx(DoIcon, {
-        size: 24,
-        className: "do"
-      }), /*#__PURE__*/jsxRuntime.jsx(Body, {
-        className: "text-primary",
-        type: exports.Typography.BODY_LARGE,
-        children: doThis
-      })]
+    jsxRuntime.jsx(Instruction, {
+      item: doThis,
+      type: "do"
     }, index)), donts && donts.map((dont, index) =>
     /*#__PURE__*/
     // eslint-disable-next-line react/no-array-index-key
-    jsxRuntime.jsxs("div", {
-      className: "instruction",
-      children: [/*#__PURE__*/jsxRuntime.jsx(DontIcon, {
-        size: 24,
-        className: "dont"
-      }), /*#__PURE__*/jsxRuntime.jsx(Body, {
-        className: "text-primary",
-        type: exports.Typography.BODY_LARGE,
-        children: dont
-      })]
+    jsxRuntime.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__*/jsxRuntime.jsxs("div", {
+    className: "instruction",
+    "aria-label": isInstructionNode ? item['aria-label'] : undefined,
+    children: [type === 'do' ? /*#__PURE__*/jsxRuntime.jsx(icons.CheckCircleFill, {
+      size: 24,
+      className: type
+    }) : /*#__PURE__*/jsxRuntime.jsx(icons.CrossCircleFill, {
+      size: 24,
+      className: type
+    }), /*#__PURE__*/jsxRuntime.jsx(Body, {
+      className: "text-primary",
+      type: exports.Typography.BODY_LARGE,
+      children: isInstructionNode ? item.content : item
+    })]
+  });
+}
 var InstructionsList$1 = InstructionsList;
 
 const Loader = ({
@@ -10228,128 +10397,6 @@ PhoneNumberInput.defaultProps = {
 };
 var PhoneNumberInput$1 = PhoneNumberInput;
 
-const radius = {
-  xs: 11,
-  sm: 22,
-  xl: 61
-};
-const ANIMATION_DURATION_IN_MS = 1500;
-class ProcessIndicator extends React.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__default.default(`process process-${size}`, className, {
-      [`process-danger`]: status === exports.Status.FAILED,
-      [`process-stopped`]: status === exports.Status.HIDDEN,
-      [`process-success`]: status === exports.Status.SUCCEEDED
-    });
-    return /*#__PURE__*/jsxRuntime.jsxs("span", {
-      className: classes,
-      "data-testid": dataTestId,
-      children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
-        className: "process-icon-container",
-        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "process-icon-horizontal"
-        }), /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "process-icon-vertical"
-        })]
-      }), /*#__PURE__*/jsxRuntime.jsx("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        children: /*#__PURE__*/jsxRuntime.jsx("circle", {
-          className: "process-circle",
-          cx: "50%",
-          cy: "50%",
-          r: radius[this.state.size],
-          fillOpacity: "0.0"
-        })
-      })]
-    });
-  }
-}
-ProcessIndicator.propTypes = {
-  status: PropTypes__default.default.oneOf(['processing', 'failed', 'succeeded', 'hidden']),
-  size: PropTypes__default.default.oneOf(['xs', 'sm', 'xl']),
-  onAnimationCompleted: PropTypes__default.default.func,
-  className: PropTypes__default.default.string,
-  'data-testid': PropTypes__default.default.string
-};
-ProcessIndicator.defaultProps = {
-  status: exports.Status.PROCESSING,
-  size: exports.Size.SMALL,
-  onAnimationCompleted: null,
-  className: undefined,
-  'data-testid': null
-};
-var ProcessIndicator$1 = ProcessIndicator;
-
 const Progress = ({
   className,
   id,