@transferwise/components 45.17.1 → 45.19.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';
@@ -1505,7 +1506,6 @@ const FocusBoundary = ({
     })
   });
 };
-var FocusBoundary$1 = FocusBoundary;
 
 function withNextPortalWrapper(Component) {
   return function (props) {
@@ -1647,7 +1647,7 @@ const Dimmer = ({
       onExited: onExited,
       children: /*#__PURE__*/jsx(DimmerContentWrapper, {
         scrollBody: !transparent,
-        children: /*#__PURE__*/jsx(FocusBoundary$1, {
+        children: /*#__PURE__*/jsx(FocusBoundary, {
           children: /*#__PURE__*/jsx("div", {
             ref: dimmerReference,
             className: classNames('dimmer', {
@@ -2093,6 +2093,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 +2310,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 +2336,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 +5486,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 +5533,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;
@@ -6151,10 +6261,10 @@ function formControlClassNameBase({
   return classNames('form-control',
   // TODO: Deprecate
   'np-form-control', {
-    'np-form-control--size-auto np-text-body-large': size === 'auto',
-    'np-form-control--size-sm np-text-body-default': size === 'sm',
-    'np-form-control--size-md np-text-body-large': size === 'md',
-    'np-form-control--size-lg np-text-title-subsection': size === 'lg'
+    'np-form-control--size-auto': size === 'auto',
+    'np-form-control--size-sm': size === 'sm',
+    'np-form-control--size-md': size === 'md',
+    'np-form-control--size-lg': size === 'lg'
   });
 }
 
@@ -6219,6 +6329,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
@@ -6286,43 +6410,47 @@ function BottomSheet({
             children: /*#__PURE__*/jsx("div", {
               className: "np-bottom-sheet-v2-backdrop"
             })
-          }), /*#__PURE__*/jsx(FloatingFocusManager, {
-            context: context,
-            initialFocus: initialFocusRef,
-            children: /*#__PURE__*/jsx("div", {
-              className: "np-bottom-sheet-v2",
-              children: /*#__PURE__*/jsx(Transition.Child, {
-                className: "np-bottom-sheet-v2-content",
-                enter: "np-bottom-sheet-v2-content--enter",
-                enterFrom: "np-bottom-sheet-v2-content--enter-from",
-                leave: "np-bottom-sheet-v2-content--leave",
-                leaveTo: "np-bottom-sheet-v2-content--leave-to",
-                children: /*#__PURE__*/jsxs("div", {
-                  // Force inner state invalidation on open
-                  ref: refs.setFloating,
-                  className: "np-bottom-sheet-v2-content-inner-container",
-                  ...getFloatingProps(),
-                  children: [/*#__PURE__*/jsx("div", {
-                    className: "np-bottom-sheet-v2-header",
-                    children: /*#__PURE__*/jsx(CloseButton, {
-                      size: Size.SMALL,
-                      onClick: () => {
-                        onClose?.();
-                      }
-                    })
-                  }), /*#__PURE__*/jsxs("div", {
-                    className: classNames('np-bottom-sheet-v2-content-inner', title && 'np-bottom-sheet-v2-content-inner--has-title', {
-                      'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md'
-                    }),
-                    children: [title ? /*#__PURE__*/jsx("h2", {
-                      className: "np-bottom-sheet-v2-title np-text-title-body",
-                      children: title
-                    }) : null, /*#__PURE__*/jsx("div", {
-                      className: "np-bottom-sheet-v2-body np-text-body-default",
-                      children: children
+          }), /*#__PURE__*/jsx(FocusBoundary, {
+            children: /*#__PURE__*/jsx(FloatingFocusManager, {
+              context: context,
+              initialFocus: initialFocusRef,
+              guards: false,
+              modal: false,
+              children: /*#__PURE__*/jsx("div", {
+                className: "np-bottom-sheet-v2",
+                children: /*#__PURE__*/jsx(Transition.Child, {
+                  className: "np-bottom-sheet-v2-content",
+                  enter: "np-bottom-sheet-v2-content--enter",
+                  enterFrom: "np-bottom-sheet-v2-content--enter-from",
+                  leave: "np-bottom-sheet-v2-content--leave",
+                  leaveTo: "np-bottom-sheet-v2-content--leave-to",
+                  children: /*#__PURE__*/jsxs("div", {
+                    // Force inner state invalidation on open
+                    ref: refs.setFloating,
+                    className: "np-bottom-sheet-v2-content-inner-container",
+                    ...getFloatingProps(),
+                    children: [/*#__PURE__*/jsx("div", {
+                      className: "np-bottom-sheet-v2-header",
+                      children: /*#__PURE__*/jsx(CloseButton, {
+                        size: Size.SMALL,
+                        onClick: () => {
+                          onClose?.();
+                        }
+                      })
+                    }), /*#__PURE__*/jsxs("div", {
+                      className: classNames('np-bottom-sheet-v2-content-inner', title && 'np-bottom-sheet-v2-content-inner--has-title', {
+                        'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md'
+                      }),
+                      children: [title ? /*#__PURE__*/jsx("h2", {
+                        className: "np-bottom-sheet-v2-title np-text-title-body",
+                        children: title
+                      }) : null, /*#__PURE__*/jsx("div", {
+                        className: "np-bottom-sheet-v2-body np-text-body-default",
+                        children: children
+                      })]
                     })]
-                  })]
-                }, floatingKey)
+                  }, floatingKey)
+                })
               })
             })
           })]
@@ -6415,36 +6543,40 @@ function Popover({
         theme: theme,
         screenMode: screenMode,
         isNotRootProvider: true,
-        children: /*#__PURE__*/jsx(FloatingFocusManager, {
-          context: context,
-          children: /*#__PURE__*/jsx(Transition, {
-            show: open,
-            leave: "transition-opacity",
-            leaveTo: "opacity-0",
-            beforeEnter: () => {
-              setFloatingKey(prev => prev + 1);
-            },
-            children: /*#__PURE__*/jsx("div", {
-              // Force inner state invalidation on open
-              ref: refs.setFloating,
-              className: "np-popover-v2-container"
-              // eslint-disable-next-line react/forbid-dom-props
-              ,
-              style: floatingStyles,
-              ...getFloatingProps(),
-              children: /*#__PURE__*/jsxs("div", {
-                className: classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
-                  'np-popover-v2--padding-md': padding === 'md'
-                }),
-                children: [title ? /*#__PURE__*/jsx("h2", {
-                  className: "np-popover-v2-title np-text-title-body",
-                  children: title
-                }) : null, /*#__PURE__*/jsx("div", {
-                  className: "np-popover-v2-content np-text-body-default",
-                  children: children
-                })]
-              })
-            }, floatingKey)
+        children: /*#__PURE__*/jsx(Transition, {
+          show: open,
+          leave: "transition-opacity",
+          leaveTo: "opacity-0",
+          beforeEnter: () => {
+            setFloatingKey(prev => prev + 1);
+          },
+          children: /*#__PURE__*/jsx(FocusBoundary, {
+            children: /*#__PURE__*/jsx(FloatingFocusManager, {
+              context: context,
+              guards: false,
+              modal: false,
+              children: /*#__PURE__*/jsx("div", {
+                // Force inner state invalidation on open
+                ref: refs.setFloating,
+                className: "np-popover-v2-container"
+                // eslint-disable-next-line react/forbid-dom-props
+                ,
+                style: floatingStyles,
+                ...getFloatingProps(),
+                children: /*#__PURE__*/jsxs("div", {
+                  className: classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
+                    'np-popover-v2--padding-md': padding === 'md'
+                  }),
+                  children: [title ? /*#__PURE__*/jsx("h2", {
+                    className: "np-popover-v2-title np-text-title-body",
+                    children: title
+                  }) : null, /*#__PURE__*/jsx("div", {
+                    className: "np-popover-v2-content np-text-body-default",
+                    children: children
+                  })]
+                })
+              }, floatingKey)
+            })
           })
         })
       })
@@ -6465,7 +6597,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,22 +6628,78 @@ function dedupeSelectInputItems(items) {
     return item;
   });
 }
+const defaultRenderTrigger = ({
+  content,
+  placeholderShown,
+  clear,
+  disabled,
+  size,
+  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,
+    size: size,
+    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,
+  size = 'md',
   className,
   onChange,
   onClear
 }) {
-  const intl = useIntl();
   const [open, setOpen] = useState(false);
   const triggerRef = useRef(null);
   const screenSm = useScreenSize(Breakpoint.SMALL);
@@ -6536,87 +6725,76 @@ 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,
+            size,
+            className
           })
+        }),
+        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 +6923,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 +6976,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,25 +6998,25 @@ 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",
+    className: classNames('np-select-input-option-content-container', (note || description) && '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",
+          className: "np-select-input-option-content-text-primary d-inline",
           children: title
         }), note ? /*#__PURE__*/jsx("span", {
           className: "np-select-input-option-content-text-secondary np-text-body-default",
           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 +7466,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 +10374,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,
@@ -15084,5 +15141,5 @@ const translations = {
   zh
 };
 
-export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron$1 as Chevron, Chip, Chips, CircularButton$1 as CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput$1 as DateInput, DateLookup$1 as DateLookup, DateMode, Decision$1 as Decision, Presentation as DecisionPresentation, Type as DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat$1 as InputWithDisplayFormat, InstructionsList$1 as InstructionsList, LanguageProvider, Layout$1 as Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown$1 as Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput$1 as PhoneNumberInput, Popover$2 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioOption$1 as RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, Select, SelectInput, SelectInputOptionContent, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider$1 as SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat$1 as TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type$1 as Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useSnackbar };
+export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron$1 as Chevron, Chip, Chips, CircularButton$1 as CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput$1 as DateInput, DateLookup$1 as DateLookup, DateMode, Decision$1 as Decision, Presentation as DecisionPresentation, Type as DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat$1 as InputWithDisplayFormat, InstructionsList$1 as InstructionsList, LanguageProvider, Layout$1 as Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown$1 as Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput$1 as PhoneNumberInput, Popover$2 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioOption$1 as RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider$1 as SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat$1 as TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type$1 as Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useSnackbar };
 //# sourceMappingURL=index.esm.js.map