@transferwise/components 46.37.0 → 46.38.0

package/build/index.mjs

@@ -2,9 +2,8 @@ import * as React from 'react';
 import React__default, { forwardRef, useId, cloneElement, useState, useEffect, useRef, useMemo, Component, createContext, useContext, useSyncExternalStore, useCallback, useImperativeHandle, createElement, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
 import classNames from 'classnames';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronUp, CrossCircleFill, Cross, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, NavigateAway, Briefcase, Person, ArrowRight, Download, ChevronLeft, ChevronRight, AlertCircleFill, AlertCircle, ArrowLeft, QuestionMarkCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle } from '@transferwise/icons';
+import { ChevronUp, CrossCircleFill, Cross, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, NavigateAway, Briefcase, Person, ArrowRight, Download, ChevronLeft, ChevronRight, AlertCircleFill, AlertCircle, ArrowLeft, QuestionMarkCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, Bin } from '@transferwise/icons';
 import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
-import PropTypes from 'prop-types';
 import commonmark from 'commonmark';
 import { useTheme, ThemeProvider } from '@wise/components-theming';
 import { CSSTransition } from 'react-transition-group';
@@ -17,10 +16,10 @@ import mergeProps from 'merge-props';
 import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager, offset, flip, shift, size, autoUpdate } from '@floating-ui/react';
 import { usePreventScroll } from '@react-aria/overlays';
 import { usePopper } from 'react-popper';
+import PropTypes from 'prop-types';
 import { Flag, Illustration } from '@wise/art';
 import clamp$2 from 'lodash.clamp';
 import debounce from 'lodash.debounce';
-import requiredIf from 'react-required-if';
 import { Spring, animated } from '@react-spring/web';
 
 var Typography;
@@ -830,21 +829,14 @@ function stripNodes({
 }
 
 const allowList = [MarkdownNodeType.STRONG];
-const InlineMarkdown = props => {
+function InlineMarkdown(props) {
   return /*#__PURE__*/jsx(Markdown, {
     ...props,
     as: "span",
     allowList: allowList,
     blockList: undefined
   });
-};
-InlineMarkdown.propTypes = {
-  children: PropTypes.string.isRequired,
-  className: PropTypes.string
-};
-InlineMarkdown.defaultProps = {
-  className: undefined
-};
+}
 
 var messages$c = defineMessages({
   opensInNewTab: {
@@ -1478,7 +1470,7 @@ const Button = /*#__PURE__*/forwardRef(({
   });
 });
 
-const Card$2 = /*#__PURE__*/forwardRef(({
+const Card$1 = /*#__PURE__*/forwardRef(({
   className,
   children = null,
   id,
@@ -1511,7 +1503,7 @@ const Card$2 = /*#__PURE__*/forwardRef(({
     }), children]
   });
 });
-Card$2.displayName = 'Card';
+Card$1.displayName = 'Card';
 
 function Display({
   as: Heading = 'h1',
@@ -1890,7 +1882,7 @@ const PromoCard = /*#__PURE__*/forwardRef(({
   useEffect(() => {
     setChecked(defaultChecked ?? isChecked ?? false);
   }, [defaultChecked, isChecked]);
-  return /*#__PURE__*/jsxs(Card$2, {
+  return /*#__PURE__*/jsxs(Card$1, {
     ...commonProps,
     ...checkedProps,
     ...props,
@@ -2187,20 +2179,19 @@ const isVisible = (container, el) => {
   return elemLeft >= cScrollOffset && elemRight <= cScrollOffset + cWidth;
 };
 
-const Card = /*#__PURE__*/forwardRef((props, reference) => {
-  const {
-    'aria-label': ariaLabel,
-    as: Element,
-    isExpanded,
-    title,
-    details,
-    children,
-    onClick,
-    icon,
-    id,
-    className,
-    ...rest
-  } = props;
+const Card = /*#__PURE__*/forwardRef(function Card({
+  'aria-label': ariaLabel,
+  as: Element = 'div',
+  isExpanded,
+  title,
+  details,
+  children,
+  onClick,
+  icon,
+  id,
+  className,
+  'data-testid': dataTestId
+}, reference) {
   const isOpen = !!(isExpanded && children);
   return /*#__PURE__*/jsxs(Element, {
     ref: reference,
@@ -2210,7 +2201,7 @@ const Card = /*#__PURE__*/forwardRef((props, reference) => {
       'np-card--has-icon': !!icon
     }),
     id: id,
-    "data-testid": rest['data-testid'],
+    "data-testid": dataTestId,
     children: [/*#__PURE__*/jsx(Option$2, {
       "aria-label": ariaLabel,
       as: children ? 'button' : 'div',
@@ -2222,7 +2213,7 @@ const Card = /*#__PURE__*/forwardRef((props, reference) => {
       button: children && /*#__PURE__*/jsx(Chevron, {
         orientation: isOpen ? Position.TOP : Position.BOTTOM
       }),
-      onClick: () => children && onClick(!isExpanded)
+      onClick: children ? () => onClick?.(!isExpanded) : undefined
     }), /*#__PURE__*/jsx("div", {
       className: classNames('np-card__divider', {
         'np-card__divider--expanded': isOpen
@@ -2235,31 +2226,6 @@ const Card = /*#__PURE__*/forwardRef((props, reference) => {
     })]
   });
 });
-const hasChildren = ({
-  children
-}) => children;
-Card.propTypes = {
-  'aria-label': PropTypes.string,
-  as: PropTypes.string,
-  isExpanded: requiredIf(PropTypes.bool, hasChildren),
-  title: PropTypes.node.isRequired,
-  details: PropTypes.node.isRequired,
-  onClick: requiredIf(PropTypes.func, hasChildren),
-  icon: PropTypes.node,
-  children: PropTypes.node,
-  id: PropTypes.string,
-  className: PropTypes.string,
-  'data-testid': PropTypes.string
-};
-Card.defaultProps = {
-  'aria-label': undefined,
-  as: 'div',
-  children: null,
-  id: null,
-  className: null,
-  'data-testid': null
-};
-var Card$1 = Card;
 
 const CheckboxButton = /*#__PURE__*/forwardRef(({
   checked,
@@ -2283,9 +2249,8 @@ const CheckboxButton = /*#__PURE__*/forwardRef(({
     })
   })]
 }));
-var CheckboxButton$1 = CheckboxButton;
 
-const Checkbox = ({
+function Checkbox({
   id,
   checked,
   required,
@@ -2297,14 +2262,11 @@ const Checkbox = ({
   onChange,
   onFocus,
   onBlur
-}) => {
-  const {
-    isModern
-  } = useTheme();
+}) {
   const classList = classNames('np-checkbox', {
     checkbox: true,
     'checkbox-lg': secondary,
-    disabled: isModern && disabled
+    disabled
   }, className);
   const innerDisabled = disabled || readOnly;
   return /*#__PURE__*/jsx("div", {
@@ -2314,7 +2276,7 @@ const Checkbox = ({
       className: classNames({
         disabled
       }),
-      children: [/*#__PURE__*/jsx(CheckboxButton$1, {
+      children: [/*#__PURE__*/jsx(CheckboxButton, {
         className: "p-r-2",
         checked: checked,
         disabled: innerDisabled,
@@ -2331,39 +2293,12 @@ const Checkbox = ({
           children: label
         }), secondary && /*#__PURE__*/jsx(Body, {
           as: "span",
-          className: classNames({
-            secondary: !isModern
-          }),
           children: secondary
         })]
       })]
     })
   });
-};
-Checkbox.propTypes = {
-  id: PropTypes.string,
-  checked: PropTypes.bool,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  label: PropTypes.node.isRequired,
-  secondary: PropTypes.string,
-  onFocus: PropTypes.func,
-  onChange: PropTypes.func.isRequired,
-  onBlur: PropTypes.func,
-  className: PropTypes.string
-};
-Checkbox.defaultProps = {
-  id: null,
-  checked: false,
-  required: false,
-  disabled: false,
-  readOnly: false,
-  secondary: null,
-  onFocus: null,
-  onBlur: null,
-  className: undefined
-};
+}
 
 const CheckboxOption = /*#__PURE__*/forwardRef(({
   checked,
@@ -2375,7 +2310,7 @@ const CheckboxOption = /*#__PURE__*/forwardRef(({
     ...rest,
     ref: reference,
     disabled: disabled,
-    button: /*#__PURE__*/jsx(CheckboxButton$1, {
+    button: /*#__PURE__*/jsx(CheckboxButton, {
       checked: checked,
       disabled: disabled,
       onChange: () => onChange?.(!checked)
@@ -2753,6 +2688,7 @@ const SlidingPanel = /*#__PURE__*/forwardRef(({
   slidingPanelPositionFixed,
   className,
   children,
+  testId,
   ...rest
 }, reference) => {
   const localReference = useRef(null);
@@ -2773,20 +2709,21 @@ const SlidingPanel = /*#__PURE__*/forwardRef(({
     unmountOnExit: true
   }, /*#__PURE__*/jsx("div", {
     ref: localReference,
+    "data-testid": testId,
     className: classNames('sliding-panel', `sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, slidingPanelPositionFixed && 'sliding-panel--fixed', className),
     children: children
   }));
 });
 
-const Drawer = ({
+function Drawer({
   children,
   className,
   footerContent,
   headerTitle,
   onClose,
-  open,
-  position
-}) => {
+  open = false,
+  position = 'right'
+}) {
   logActionRequiredIf('Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.', !onClose);
   const {
     isMobile
@@ -2824,32 +2761,7 @@ const Drawer = ({
       })
     })
   });
-};
-Drawer.propTypes = {
-  /** The content to appear in the drawer body. */
-  children: PropTypes.node,
-  className: PropTypes.string,
-  /** The content to appear in the drawer footer. */
-  footerContent: PropTypes.node,
-  /** The content to appear in the drawer header. */
-  headerTitle: PropTypes.node,
-  /** The status of Drawer either open or not. */
-  open: PropTypes.bool,
-  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
-  position: PropTypes.oneOf(['left', 'right', 'bottom']),
-  /** The action to perform on close click. */
-  onClose: PropTypes.func
-};
-Drawer.defaultProps = {
-  children: null,
-  className: undefined,
-  footerContent: null,
-  headerTitle: null,
-  onClose: null,
-  open: false,
-  position: Position.RIGHT
-};
-var Drawer$1 = Drawer;
+}
 
 const INITIAL_Y_POSITION = 0;
 const CONTENT_SCROLL_THRESHOLD = 1;
@@ -2979,7 +2891,7 @@ const BottomSheet$1 = props => {
     };
   }
   const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
-  return is400Zoom ? /*#__PURE__*/jsx(Drawer$1, {
+  return is400Zoom ? /*#__PURE__*/jsx(Drawer, {
     open: props.open,
     className: props.className,
     onClose: close,
@@ -4650,7 +4562,7 @@ const NavigationOption = /*#__PURE__*/forwardRef(({
   });
 });
 
-const Tile = ({
+function Tile({
   className,
   description,
   disabled,
@@ -4658,10 +4570,10 @@ const Tile = ({
   target,
   media,
   onClick,
-  size,
+  size = 'md',
   title
-}) => {
-  const isSmall = size === Size.SMALL;
+}) {
+  const isSmall = size === 'sm';
   const Element = href ? 'a' : 'button';
   return /*#__PURE__*/jsxs(Element, {
     className: classNames('decision', 'flex-column', 'np-tile', 'text-no-decoration', 'text-xs-center', className, {
@@ -4670,12 +4582,12 @@ const Tile = ({
     }, disabled && 'disabled'),
     href: href,
     target: target,
-    onClick: disabled ? null : onClick,
-    onKeyDown: disabled ? null : ({
+    onClick: disabled ? undefined : onClick,
+    onKeyDown: disabled ? undefined : ({
       key
     }) => {
       if (key === 'Enter' || key === ' ') {
-        onClick();
+        onClick?.();
       }
     },
     children: [/*#__PURE__*/jsx("div", {
@@ -4692,29 +4604,7 @@ const Tile = ({
       children: description
     }) : null]
   });
-};
-Tile.propTypes = {
-  /** Classes to apply to the Tile container */
-  className: PropTypes.string,
-  description: PropTypes.node,
-  disabled: PropTypes.bool,
-  href: PropTypes.string,
-  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
-  /** Accepts only Avatar and images */
-  media: PropTypes.node.isRequired,
-  /** Function called onClick or onKeyDown */
-  onClick: PropTypes.func,
-  /** The size applied to Tile */
-  size: PropTypes.oneOf(['sm', 'md']),
-  title: PropTypes.node.isRequired
-};
-Tile.defaultProps = {
-  className: '',
-  description: null,
-  disabled: false,
-  size: Size.MEDIUM,
-  target: undefined
-};
+}
 
 var DecisionPresentation;
 (function (DecisionPresentation) {
@@ -4806,9 +4696,9 @@ const Decision = ({
   return null;
 };
 
-const isLayoutHorizontal = layout => [Layout.HORIZONTAL_LEFT_ALIGNED, Layout.HORIZONTAL_RIGHT_ALIGNED, Layout.HORIZONTAL_JUSTIFIED].includes(layout);
+const isLayoutHorizontal = layout => layout === Layout.HORIZONTAL_LEFT_ALIGNED || layout === Layout.HORIZONTAL_RIGHT_ALIGNED || layout === Layout.HORIZONTAL_JUSTIFIED;
 const getAlignmentClasses = (layout, action) => {
-  let classes = ['d-flex'];
+  const classes = ['d-flex'];
   if (action) {
     if (isLayoutHorizontal(layout)) {
       classes.push('align-items-center');
@@ -4826,60 +4716,44 @@ const getAlignmentClasses = (layout, action) => {
   }
   return classes;
 };
-const DefinitionList = ({
-  definitions,
-  layout,
+const defaultDefinitions = [];
+function DefinitionList({
+  definitions = defaultDefinitions,
+  layout = 'VERTICAL_TWO_COLUMN',
   muted
-}) => /*#__PURE__*/jsx("dl", {
-  className: classNames('tw-definition-list d-flex ', {
-    'text-muted': muted,
-    'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,
-    'tw-definition-list--columns flex-column flex-row--sm': layout === Layout.VERTICAL_TWO_COLUMN,
-    'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout)
-  }),
-  children: definitions.filter(definition => definition).map(({
-    action,
-    title,
-    value,
-    key
-  }) => /*#__PURE__*/jsxs("div", {
-    className: "tw-definition-list__item",
-    children: [/*#__PURE__*/jsx("dt", {
-      children: title
-    }), /*#__PURE__*/jsxs("dd", {
-      className: classNames(...getAlignmentClasses(layout, action)),
-      children: [/*#__PURE__*/jsx("div", {
-        children: value
-      }), action ? /*#__PURE__*/jsx("div", {
-        className: classNames(isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2', 'tw-definition-list__action'),
-        children: /*#__PURE__*/jsx(ActionButton, {
-          className: "tw-definition-list__button",
-          onClick: action.onClick,
-          children: action.label
-        })
-      }) : null]
-    })]
-  }, key))
-});
-DefinitionList.propTypes = {
-  definitions: PropTypes.arrayOf(PropTypes.shape({
-    action: PropTypes.shape({
-      label: PropTypes.string.isRequired,
-      onClick: PropTypes.func
+}) {
+  return /*#__PURE__*/jsx("dl", {
+    className: classNames('tw-definition-list d-flex ', {
+      'text-muted': muted,
+      'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,
+      'tw-definition-list--columns flex-column flex-row--sm': layout === Layout.VERTICAL_TWO_COLUMN,
+      'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout)
     }),
-    title: PropTypes.node.isRequired,
-    value: PropTypes.node.isRequired,
-    key: PropTypes.string.isRequired
-  })),
-  layout: PropTypes.oneOf(['VERTICAL_TWO_COLUMN', 'VERTICAL_ONE_COLUMN', 'HORIZONTAL_JUSTIFIED', 'HORIZONTAL_LEFT_ALIGNED', 'HORIZONTAL_RIGHT_ALIGNED']),
-  muted: PropTypes.bool
-};
-DefinitionList.defaultProps = {
-  definitions: [],
-  layout: Layout.VERTICAL_TWO_COLUMN,
-  muted: false
-};
-var DefinitionList$1 = DefinitionList;
+    children: definitions.filter(definition => definition).map(({
+      action,
+      title,
+      value,
+      key
+    }) => /*#__PURE__*/jsxs("div", {
+      className: "tw-definition-list__item",
+      children: [/*#__PURE__*/jsx("dt", {
+        children: title
+      }), /*#__PURE__*/jsxs("dd", {
+        className: classNames(...getAlignmentClasses(layout, action)),
+        children: [/*#__PURE__*/jsx("div", {
+          children: value
+        }), action ? /*#__PURE__*/jsx("div", {
+          className: classNames(isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2', 'tw-definition-list__action'),
+          children: /*#__PURE__*/jsx(ActionButton, {
+            className: "tw-definition-list__button",
+            onClick: action.onClick,
+            children: action.label
+          })
+        }) : null]
+      })]
+    }, key))
+  });
+}
 
 const DropFade = ({
   children,
@@ -5068,14 +4942,6 @@ const FlowHeader = /*#__PURE__*/React.forwardRef(({
   });
 });
 
-// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
-var LogoType;
-(function (LogoType) {
-  LogoType["WISE"] = "WISE";
-  LogoType["WISE_BUSINESS"] = "WISE_BUSINESS";
-  LogoType["WISE_PLATFORM"] = "WISE_PLATFORM";
-})(LogoType || (LogoType = {}));
-
 var LogoFlagInverse = function LogoFlagInverse(props) {
   return /*#__PURE__*/jsx("svg", {
     ...props,
@@ -5208,15 +5074,26 @@ const svgPaths = {
   WISE_FLAG_PLATFORM: LogoFlagPlatform,
   WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse
 };
-const Logo = ({
+var LogoType;
+(function (LogoType) {
+  LogoType["WISE"] = "WISE";
+  LogoType["WISE_BUSINESS"] = "WISE_BUSINESS";
+  LogoType["WISE_PLATFORM"] = "WISE_PLATFORM";
+})(LogoType || (LogoType = {}));
+const labelByType = {
+  WISE: 'Wise',
+  WISE_BUSINESS: 'Wise Business',
+  WISE_PLATFORM: 'Wise Platform'
+};
+function Logo({
   className,
   inverse,
-  type
-}) => {
-  const LogoSm = svgPaths[`WISE_FLAG${type === LogoType.WISE_PLATFORM ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];
+  type = 'WISE'
+}) {
+  const LogoSm = svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];
   const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
   return /*#__PURE__*/jsxs("span", {
-    "aria-label": type === LogoType.WISE ? 'Wise' : 'Wise Business' | type === LogoType.WISE_PLATFORM ? 'Wise Platform' : 'Wise Business',
+    "aria-label": labelByType[type],
     role: "img",
     className: classNames(className, 'np-logo'),
     children: [/*#__PURE__*/jsx(LogoSm, {
@@ -5225,21 +5102,7 @@ const Logo = ({
       className: "np-logo-svg np-logo-svg--size-md"
     })]
   });
-};
-Logo.propTypes = {
-  /** Extra classes applied to Logo */
-  className: PropTypes.string,
-  /** If true, will use dark colours for dark on light theme */
-  inverse: PropTypes.bool,
-  /** What type of logo to display */
-  type: PropTypes.oneOf(['WISE', 'WISE_BUSINESS', 'WISE_PLATFORM'])
-};
-Logo.defaultProps = {
-  className: undefined,
-  inverse: false,
-  type: LogoType.WISE
-};
-var Logo$1 = Logo;
+}
 
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 const Tooltip = ({
@@ -5469,7 +5332,7 @@ BackButton.defaultProps = {
 const FlowNavigation = ({
   activeStep = 0,
   avatar,
-  logo = /*#__PURE__*/jsx(Logo$1, {}),
+  logo = /*#__PURE__*/jsx(Logo, {}),
   done = false,
   onClose,
   onGoBack,
@@ -5621,7 +5484,7 @@ const Modal = ({
   const noDivider = checkSpecialClasses('no-divider');
   const contentReference = useRef(null);
   const titleId = useId();
-  return !isMedium ? /*#__PURE__*/jsx(Drawer$1, {
+  return !isMedium ? /*#__PURE__*/jsx(Drawer, {
     open: open,
     headerTitle: title,
     footerContent: footer,
@@ -7896,7 +7759,7 @@ const OverlayHeader = ({
 };
 OverlayHeader.defaultProps = {
   avatar: null,
-  logo: /*#__PURE__*/jsx(Logo$1, {}),
+  logo: /*#__PURE__*/jsx(Logo, {}),
   onClose: null
 };
 OverlayHeader.propTypes = {
@@ -10449,7 +10312,7 @@ function Select({
       , {
         className: classNames(s('tw-icon'), s('tw-chevron-up-icon'), s('tw-chevron'), s('bottom'), s('np-select-chevron'))
       })]
-    }), isMobile ? isSearchEnabled ? /*#__PURE__*/jsx(Drawer$1, {
+    }), isMobile ? isSearchEnabled ? /*#__PURE__*/jsx(Drawer, {
       open: open,
       headerTitle: searchPlaceholder || formatMessage(messages$2.searchPlaceholder),
       onClose: handleCloseOptions,
@@ -10587,15 +10450,13 @@ class Snackbar extends Component {
     const {
       action,
       text,
-      theme,
       timestamp
     } = this.props;
     if (!previousProps.text) {
       this.setState({
         visible: true,
         action,
-        text,
-        theme
+        text
       }, () => {
         this.setLeaveTimeout();
       });
@@ -10609,8 +10470,7 @@ class Snackbar extends Component {
             this.setState({
               visible: true,
               action,
-              text,
-              theme
+              text
             });
             this.setLeaveTimeout();
           }, CSS_TRANSITION_DURATION);
@@ -10619,8 +10479,7 @@ class Snackbar extends Component {
         this.setState({
           visible: true,
           action,
-          text,
-          theme
+          text
         });
         this.setLeaveTimeout();
       }
@@ -10630,7 +10489,6 @@ class Snackbar extends Component {
     const {
       action,
       text,
-      theme = Theme.LIGHT,
       visible
     } = this.state;
     const {
@@ -10651,7 +10509,7 @@ class Snackbar extends Component {
         children: /*#__PURE__*/jsxs(Body, {
           ref: this.bodyRef,
           as: "span",
-          className: `snackbar__text snackbar__text--${theme}`,
+          className: "snackbar__text",
           "aria-live": "polite",
           children: [text, action ? /*#__PURE__*/jsx(ActionButton, {
             className: "snackbar__text__action",
@@ -10710,19 +10568,21 @@ function SnackbarProvider({
   });
 }
 
-function Sticky({
+const Sticky = ({
+  children,
   open = true,
-  position = 'bottom',
-  children
-}) {
+  position = Position.BOTTOM,
+  testId
+}) => {
   return /*#__PURE__*/jsx(SlidingPanel, {
+    testId: testId,
     open: open,
     position: position,
     slidingPanelPositionFixed: true,
     showSlidingPanelBorder: true,
     children: children
   });
-}
+};
 
 var messages$1 = defineMessages({
   statusNotDone: {
@@ -13141,13 +13001,8 @@ const UploadButton = ({
   maxFiles,
   onChange,
   id = DEFAULT_FILE_INPUT_ID,
-  uploadButtonTitle,
-  multipleFileInputWithFilesAdded
+  uploadButtonTitle
 }) => {
-  const {
-    isModern
-  } = useTheme();
-  useDirection();
   const {
     formatMessage
   } = useIntl();
@@ -13210,7 +13065,7 @@ const UploadButton = ({
   function getAcceptedTypes() {
     const areAllFilesAllowed = getFileTypesDescription() === '*';
     if (areAllFilesAllowed) {
-      return {}; //file input by default allows all files
+      return {}; // file input by default allows all files
     }
     if (Array.isArray(fileTypes)) {
       return {
@@ -13222,17 +13077,13 @@ const UploadButton = ({
     };
   }
   function renderDescription() {
-    return /*#__PURE__*/jsx(Fragment, {
-      children: /*#__PURE__*/jsxs(Body, {
-        className: classNames({
-          'text-primary': !disabled,
-          small: !isModern,
-          'font-weight-normal': !isModern
-        }),
-        children: [getDescription(), maxFiles && /*#__PURE__*/jsxs(Fragment, {
-          children: [/*#__PURE__*/jsx("br", {}), `Maximum ${maxFiles} files.`]
-        })]
-      })
+    return /*#__PURE__*/jsxs(Body, {
+      className: classNames({
+        'text-primary': !disabled
+      }),
+      children: [getDescription(), maxFiles && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("br", {}), `Maximum ${maxFiles} files.`]
+      })]
     });
   }
   function renderButtonTitle() {
@@ -13266,14 +13117,11 @@ const UploadButton = ({
       onChange: filesSelected
     }), /*#__PURE__*/jsx("label", {
       htmlFor: id,
-      className: classNames('btn', 'np-upload-accent', 'np-upload-button', {
-        disabled,
-        'np-upload-input--square-top': multipleFileInputWithFilesAdded
-      }),
+      className: classNames('btn', 'np-upload-button'),
       children: /*#__PURE__*/jsxs("div", {
         className: "media",
         children: [/*#__PURE__*/jsx("div", {
-          className: "np-upload-icon media-left",
+          className: "np-upload-icon media-middle media-left",
           children: /*#__PURE__*/jsx(Upload$2, {
             size: 24,
             className: "text-link"
@@ -13289,9 +13137,7 @@ const UploadButton = ({
         })]
       })
     }), isDropping && /*#__PURE__*/jsxs("div", {
-      className: classNames('droppable-card', 'droppable-dropping-card', 'droppable-card-content', {
-        'np-upload-input--square-top': multipleFileInputWithFilesAdded
-      }),
+      className: classNames('droppable-card', 'droppable-dropping-card', 'droppable-card-content'),
       children: [/*#__PURE__*/jsx(PlusCircle, {
         className: "m-x-1",
         size: 24
@@ -13338,7 +13184,7 @@ const UploadItemBody = ({
     href: url,
     target: "_blank",
     rel: "noopener noreferrer",
-    className: singleFileUpload ? 'np-upload-item--single-file' : '',
+    className: singleFileUpload ? 'np-upload-item--single-file' : 'np-upload-item--link',
     onClick: onDownload,
     children: children
   });
@@ -13363,20 +13209,15 @@ const UploadItem = ({
     status,
     filename,
     error,
+    errors,
     url
   } = file;
-  const {
-    isModern
-  } = useTheme();
   const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
   const getIcon = () => {
-    if (error || status === Status.FAILED) {
-      return isModern ? /*#__PURE__*/jsx(StatusIcon, {
+    if (error || errors?.length || status === Status.FAILED) {
+      return /*#__PURE__*/jsx(StatusIcon, {
         size: Size.SMALL,
         sentiment: Sentiment.NEGATIVE
-      }) : /*#__PURE__*/jsx(AlertCircle, {
-        size: 24,
-        className: "text-negative"
       });
     }
     let processIndicator;
@@ -13391,31 +13232,37 @@ const UploadItem = ({
       case Status.SUCCEEDED:
       case Status.DONE:
       default:
-        processIndicator = isModern ? /*#__PURE__*/jsx(StatusIcon, {
+        processIndicator = /*#__PURE__*/jsx(StatusIcon, {
           size: Size.SMALL,
           sentiment: Sentiment.POSITIVE
-        }) : /*#__PURE__*/jsx(ProcessIndicator, {
-          size: Size.EXTRA_SMALL,
-          status: Status.SUCCEEDED
         });
     }
-    if (isModern) {
-      return processIndicator;
+    return processIndicator;
+  };
+  const getErrorMessage = error => typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
+  const getMultipleErrors = errors => {
+    if (!errors?.length) {
+      return null;
     }
-    return /*#__PURE__*/jsx("span", {
-      style: {
-        transform: 'scale(0.8335)'
-      },
-      children: processIndicator
-    }); // Scale down ProcessIndicator to be 20px*20px to match `icons`
+    if (errors?.length === 1) {
+      return getErrorMessage(errors[0]);
+    }
+    return /*#__PURE__*/jsx("ul", {
+      className: "np-upload-input-errors m-b-0",
+      children: errors.map((error, index) => {
+        // eslint-disable-next-line react/no-array-index-key
+        return /*#__PURE__*/jsx("li", {
+          children: getErrorMessage(error)
+        }, index);
+      })
+    });
   };
-  const getErrorMessage = () => typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
   const getDescription = () => {
-    if (error || status === Status.FAILED) {
+    if (error || errors?.length || status === Status.FAILED) {
       return /*#__PURE__*/jsx(Body, {
         type: Typography.BODY_DEFAULT_BOLD,
         className: "text-negative",
-        children: getErrorMessage()
+        children: errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)
       });
     }
     switch (status) {
@@ -13485,7 +13332,7 @@ const UploadItem = ({
         }),
         type: "button",
         onClick: () => onDelete(),
-        children: /*#__PURE__*/jsx(CrossCircleFill, {
+        children: /*#__PURE__*/jsx(Bin, {
           size: 16
         })
       })]
@@ -13522,9 +13369,6 @@ const UploadInput = ({
   sizeLimitErrorMessage,
   uploadButtonTitle
 }) => {
-  const {
-    isModern
-  } = useTheme();
   const [markedFileForDelete, setMarkedFileForDelete] = useState(null);
   const [mounted, setMounted] = useState(false);
   const {
@@ -13682,7 +13526,7 @@ const UploadInput = ({
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsxs("div", {
       className: classNames('np-upload-input', className, {
-        disabled: isModern && disabled
+        disabled
       }),
       children: [uploadedFiles.map(file => /*#__PURE__*/jsx(UploadItem, {
         file: file,
@@ -13699,7 +13543,6 @@ const UploadInput = ({
         sizeLimit: sizeLimit,
         description: description,
         maxFiles: maxFiles,
-        multipleFileInputWithFilesAdded: multiple && uploadedFiles.length > 0,
         onChange: addFiles
       })]
     }), /*#__PURE__*/jsx(Modal, {
@@ -14746,5 +14589,5 @@ const translations = {
   'zh-HK': zhHK
 };
 
-export { Accordion, ActionButton, ActionOption, Alert, AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card$2 as BaseCard, Body, BottomSheet$1 as BottomSheet, Breakpoint, Button, Card$1 as Card, Carousel, Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup$1 as DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, Emphasis, Field, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, Label, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCardGroup$1 as PromoCardGroup, Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip, Type, Typeahead$1 as Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
+export { Accordion, ActionButton, ActionOption, Alert, AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card$1 as BaseCard, Body, BottomSheet$1 as BottomSheet, Breakpoint, Button, Card, Carousel, Checkbox, CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup$1 as DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer, DropFade, Emphasis, Field, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, Label, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader, Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCardGroup$1 as PromoCardGroup, Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip, Type, Typeahead$1 as Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
 //# sourceMappingURL=index.mjs.map