@transferwise/components 46.37.0 → 46.39.0

package/build/index.js

@@ -5,7 +5,6 @@ var classNames = require('classnames');
 var jsxRuntime = require('react/jsx-runtime');
 var icons = require('@transferwise/icons');
 var reactIntl = require('react-intl');
-var PropTypes = require('prop-types');
 var commonmark = require('commonmark');
 var componentsTheming = require('@wise/components-theming');
 var reactTransitionGroup = require('react-transition-group');
@@ -19,9 +18,9 @@ var react = require('@floating-ui/react');
 var overlays = require('@react-aria/overlays');
 var reactPopper = require('react-popper');
 var art = require('@wise/art');
+var PropTypes = require('prop-types');
 var clamp$2 = require('lodash.clamp');
 var debounce = require('lodash.debounce');
-var requiredIf = require('react-required-if');
 var web = require('@react-spring/web');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -46,12 +45,11 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var commonmark__default = /*#__PURE__*/_interopDefault(commonmark);
 var mergeProps__default = /*#__PURE__*/_interopDefault(mergeProps);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clamp__default = /*#__PURE__*/_interopDefault(clamp$2);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
-var requiredIf__default = /*#__PURE__*/_interopDefault(requiredIf);
 
 exports.Typography = void 0;
 (function (Typography) {
@@ -860,21 +858,14 @@ function stripNodes({
 }
 
 const allowList = [exports.MarkdownNodeType.STRONG];
-const InlineMarkdown = props => {
+function InlineMarkdown(props) {
   return /*#__PURE__*/jsxRuntime.jsx(Markdown, {
     ...props,
     as: "span",
     allowList: allowList,
     blockList: undefined
   });
-};
-InlineMarkdown.propTypes = {
-  children: PropTypes__default.default.string.isRequired,
-  className: PropTypes__default.default.string
-};
-InlineMarkdown.defaultProps = {
-  className: undefined
-};
+}
 
 var messages$c = reactIntl.defineMessages({
   opensInNewTab: {
@@ -1508,7 +1499,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
   });
 });
 
-const Card$2 = /*#__PURE__*/React.forwardRef(({
+const Card$1 = /*#__PURE__*/React.forwardRef(({
   className,
   children = null,
   id,
@@ -1541,7 +1532,7 @@ const Card$2 = /*#__PURE__*/React.forwardRef(({
     }), children]
   });
 });
-Card$2.displayName = 'Card';
+Card$1.displayName = 'Card';
 
 function Display({
   as: Heading = 'h1',
@@ -1920,7 +1911,7 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
   React.useEffect(() => {
     setChecked(defaultChecked ?? isChecked ?? false);
   }, [defaultChecked, isChecked]);
-  return /*#__PURE__*/jsxRuntime.jsxs(Card$2, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Card$1, {
     ...commonProps,
     ...checkedProps,
     ...props,
@@ -2217,20 +2208,19 @@ const isVisible = (container, el) => {
   return elemLeft >= cScrollOffset && elemRight <= cScrollOffset + cWidth;
 };
 
-const Card = /*#__PURE__*/React.forwardRef((props, reference) => {
-  const {
-    'aria-label': ariaLabel,
-    as: Element,
-    isExpanded,
-    title,
-    details,
-    children,
-    onClick,
-    icon,
-    id,
-    className,
-    ...rest
-  } = props;
+const Card = /*#__PURE__*/React.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__*/jsxRuntime.jsxs(Element, {
     ref: reference,
@@ -2240,7 +2230,7 @@ const Card = /*#__PURE__*/React.forwardRef((props, reference) => {
       'np-card--has-icon': !!icon
     }),
     id: id,
-    "data-testid": rest['data-testid'],
+    "data-testid": dataTestId,
     children: [/*#__PURE__*/jsxRuntime.jsx(Option$2, {
       "aria-label": ariaLabel,
       as: children ? 'button' : 'div',
@@ -2252,7 +2242,7 @@ const Card = /*#__PURE__*/React.forwardRef((props, reference) => {
       button: children && /*#__PURE__*/jsxRuntime.jsx(Chevron, {
         orientation: isOpen ? exports.Position.TOP : exports.Position.BOTTOM
       }),
-      onClick: () => children && onClick(!isExpanded)
+      onClick: children ? () => onClick?.(!isExpanded) : undefined
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: classNames__default.default('np-card__divider', {
         'np-card__divider--expanded': isOpen
@@ -2265,31 +2255,6 @@ const Card = /*#__PURE__*/React.forwardRef((props, reference) => {
     })]
   });
 });
-const hasChildren = ({
-  children
-}) => children;
-Card.propTypes = {
-  'aria-label': PropTypes__default.default.string,
-  as: PropTypes__default.default.string,
-  isExpanded: requiredIf__default.default(PropTypes__default.default.bool, hasChildren),
-  title: PropTypes__default.default.node.isRequired,
-  details: PropTypes__default.default.node.isRequired,
-  onClick: requiredIf__default.default(PropTypes__default.default.func, hasChildren),
-  icon: PropTypes__default.default.node,
-  children: PropTypes__default.default.node,
-  id: PropTypes__default.default.string,
-  className: PropTypes__default.default.string,
-  'data-testid': PropTypes__default.default.string
-};
-Card.defaultProps = {
-  'aria-label': undefined,
-  as: 'div',
-  children: null,
-  id: null,
-  className: null,
-  'data-testid': null
-};
-var Card$1 = Card;
 
 const CheckboxButton = /*#__PURE__*/React.forwardRef(({
   checked,
@@ -2313,9 +2278,8 @@ const CheckboxButton = /*#__PURE__*/React.forwardRef(({
     })
   })]
 }));
-var CheckboxButton$1 = CheckboxButton;
 
-const Checkbox = ({
+function Checkbox({
   id,
   checked,
   required,
@@ -2327,14 +2291,11 @@ const Checkbox = ({
   onChange,
   onFocus,
   onBlur
-}) => {
-  const {
-    isModern
-  } = componentsTheming.useTheme();
+}) {
   const classList = classNames__default.default('np-checkbox', {
     checkbox: true,
     'checkbox-lg': secondary,
-    disabled: isModern && disabled
+    disabled
   }, className);
   const innerDisabled = disabled || readOnly;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -2344,7 +2305,7 @@ const Checkbox = ({
       className: classNames__default.default({
         disabled
       }),
-      children: [/*#__PURE__*/jsxRuntime.jsx(CheckboxButton$1, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(CheckboxButton, {
         className: "p-r-2",
         checked: checked,
         disabled: innerDisabled,
@@ -2361,39 +2322,12 @@ const Checkbox = ({
           children: label
         }), secondary && /*#__PURE__*/jsxRuntime.jsx(Body, {
           as: "span",
-          className: classNames__default.default({
-            secondary: !isModern
-          }),
           children: secondary
         })]
       })]
     })
   });
-};
-Checkbox.propTypes = {
-  id: PropTypes__default.default.string,
-  checked: PropTypes__default.default.bool,
-  required: PropTypes__default.default.bool,
-  disabled: PropTypes__default.default.bool,
-  readOnly: PropTypes__default.default.bool,
-  label: PropTypes__default.default.node.isRequired,
-  secondary: PropTypes__default.default.string,
-  onFocus: PropTypes__default.default.func,
-  onChange: PropTypes__default.default.func.isRequired,
-  onBlur: PropTypes__default.default.func,
-  className: PropTypes__default.default.string
-};
-Checkbox.defaultProps = {
-  id: null,
-  checked: false,
-  required: false,
-  disabled: false,
-  readOnly: false,
-  secondary: null,
-  onFocus: null,
-  onBlur: null,
-  className: undefined
-};
+}
 
 const CheckboxOption = /*#__PURE__*/React.forwardRef(({
   checked,
@@ -2405,7 +2339,7 @@ const CheckboxOption = /*#__PURE__*/React.forwardRef(({
     ...rest,
     ref: reference,
     disabled: disabled,
-    button: /*#__PURE__*/jsxRuntime.jsx(CheckboxButton$1, {
+    button: /*#__PURE__*/jsxRuntime.jsx(CheckboxButton, {
       checked: checked,
       disabled: disabled,
       onChange: () => onChange?.(!checked)
@@ -2783,6 +2717,7 @@ const SlidingPanel = /*#__PURE__*/React.forwardRef(({
   slidingPanelPositionFixed,
   className,
   children,
+  testId,
   ...rest
 }, reference) => {
   const localReference = React.useRef(null);
@@ -2803,20 +2738,21 @@ const SlidingPanel = /*#__PURE__*/React.forwardRef(({
     unmountOnExit: true
   }, /*#__PURE__*/jsxRuntime.jsx("div", {
     ref: localReference,
+    "data-testid": testId,
     className: classNames__default.default('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
@@ -2854,32 +2790,7 @@ const Drawer = ({
       })
     })
   });
-};
-Drawer.propTypes = {
-  /** The content to appear in the drawer body. */
-  children: PropTypes__default.default.node,
-  className: PropTypes__default.default.string,
-  /** The content to appear in the drawer footer. */
-  footerContent: PropTypes__default.default.node,
-  /** The content to appear in the drawer header. */
-  headerTitle: PropTypes__default.default.node,
-  /** The status of Drawer either open or not. */
-  open: PropTypes__default.default.bool,
-  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
-  position: PropTypes__default.default.oneOf(['left', 'right', 'bottom']),
-  /** The action to perform on close click. */
-  onClose: PropTypes__default.default.func
-};
-Drawer.defaultProps = {
-  children: null,
-  className: undefined,
-  footerContent: null,
-  headerTitle: null,
-  onClose: null,
-  open: false,
-  position: exports.Position.RIGHT
-};
-var Drawer$1 = Drawer;
+}
 
 const INITIAL_Y_POSITION = 0;
 const CONTENT_SCROLL_THRESHOLD = 1;
@@ -3009,7 +2920,7 @@ const BottomSheet$1 = props => {
     };
   }
   const is400Zoom = useMedia(`(max-width: ${exports.Breakpoint.ZOOM_400}px)`);
-  return is400Zoom ? /*#__PURE__*/jsxRuntime.jsx(Drawer$1, {
+  return is400Zoom ? /*#__PURE__*/jsxRuntime.jsx(Drawer, {
     open: props.open,
     className: props.className,
     onClose: close,
@@ -4680,7 +4591,7 @@ const NavigationOption = /*#__PURE__*/React.forwardRef(({
   });
 });
 
-const Tile = ({
+function Tile({
   className,
   description,
   disabled,
@@ -4688,10 +4599,10 @@ const Tile = ({
   target,
   media,
   onClick,
-  size,
+  size = 'md',
   title
-}) => {
-  const isSmall = size === exports.Size.SMALL;
+}) {
+  const isSmall = size === 'sm';
   const Element = href ? 'a' : 'button';
   return /*#__PURE__*/jsxRuntime.jsxs(Element, {
     className: classNames__default.default('decision', 'flex-column', 'np-tile', 'text-no-decoration', 'text-xs-center', className, {
@@ -4700,12 +4611,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__*/jsxRuntime.jsx("div", {
@@ -4722,29 +4633,7 @@ const Tile = ({
       children: description
     }) : null]
   });
-};
-Tile.propTypes = {
-  /** Classes to apply to the Tile container */
-  className: PropTypes__default.default.string,
-  description: PropTypes__default.default.node,
-  disabled: PropTypes__default.default.bool,
-  href: PropTypes__default.default.string,
-  target: PropTypes__default.default.oneOf(['_self', '_blank', '_parent', '_top']),
-  /** Accepts only Avatar and images */
-  media: PropTypes__default.default.node.isRequired,
-  /** Function called onClick or onKeyDown */
-  onClick: PropTypes__default.default.func,
-  /** The size applied to Tile */
-  size: PropTypes__default.default.oneOf(['sm', 'md']),
-  title: PropTypes__default.default.node.isRequired
-};
-Tile.defaultProps = {
-  className: '',
-  description: null,
-  disabled: false,
-  size: exports.Size.MEDIUM,
-  target: undefined
-};
+}
 
 exports.DecisionPresentation = void 0;
 (function (DecisionPresentation) {
@@ -4836,9 +4725,9 @@ const Decision = ({
   return null;
 };
 
-const isLayoutHorizontal = layout => [exports.Layout.HORIZONTAL_LEFT_ALIGNED, exports.Layout.HORIZONTAL_RIGHT_ALIGNED, exports.Layout.HORIZONTAL_JUSTIFIED].includes(layout);
+const isLayoutHorizontal = layout => layout === exports.Layout.HORIZONTAL_LEFT_ALIGNED || layout === exports.Layout.HORIZONTAL_RIGHT_ALIGNED || layout === exports.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');
@@ -4856,60 +4745,44 @@ const getAlignmentClasses = (layout, action) => {
   }
   return classes;
 };
-const DefinitionList = ({
-  definitions,
-  layout,
+const defaultDefinitions = [];
+function DefinitionList({
+  definitions = defaultDefinitions,
+  layout = 'VERTICAL_TWO_COLUMN',
   muted
-}) => /*#__PURE__*/jsxRuntime.jsx("dl", {
-  className: classNames__default.default('tw-definition-list d-flex ', {
-    'text-muted': muted,
-    'flex-column': layout === exports.Layout.VERTICAL_ONE_COLUMN,
-    'tw-definition-list--columns flex-column flex-row--sm': layout === exports.Layout.VERTICAL_TWO_COLUMN,
-    'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout)
-  }),
-  children: definitions.filter(definition => definition).map(({
-    action,
-    title,
-    value,
-    key
-  }) => /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "tw-definition-list__item",
-    children: [/*#__PURE__*/jsxRuntime.jsx("dt", {
-      children: title
-    }), /*#__PURE__*/jsxRuntime.jsxs("dd", {
-      className: classNames__default.default(...getAlignmentClasses(layout, action)),
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        children: value
-      }), action ? /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames__default.default(isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2', 'tw-definition-list__action'),
-        children: /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
-          className: "tw-definition-list__button",
-          onClick: action.onClick,
-          children: action.label
-        })
-      }) : null]
-    })]
-  }, key))
-});
-DefinitionList.propTypes = {
-  definitions: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
-    action: PropTypes__default.default.shape({
-      label: PropTypes__default.default.string.isRequired,
-      onClick: PropTypes__default.default.func
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx("dl", {
+    className: classNames__default.default('tw-definition-list d-flex ', {
+      'text-muted': muted,
+      'flex-column': layout === exports.Layout.VERTICAL_ONE_COLUMN,
+      'tw-definition-list--columns flex-column flex-row--sm': layout === exports.Layout.VERTICAL_TWO_COLUMN,
+      'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout)
     }),
-    title: PropTypes__default.default.node.isRequired,
-    value: PropTypes__default.default.node.isRequired,
-    key: PropTypes__default.default.string.isRequired
-  })),
-  layout: PropTypes__default.default.oneOf(['VERTICAL_TWO_COLUMN', 'VERTICAL_ONE_COLUMN', 'HORIZONTAL_JUSTIFIED', 'HORIZONTAL_LEFT_ALIGNED', 'HORIZONTAL_RIGHT_ALIGNED']),
-  muted: PropTypes__default.default.bool
-};
-DefinitionList.defaultProps = {
-  definitions: [],
-  layout: exports.Layout.VERTICAL_TWO_COLUMN,
-  muted: false
-};
-var DefinitionList$1 = DefinitionList;
+    children: definitions.filter(definition => definition).map(({
+      action,
+      title,
+      value,
+      key
+    }) => /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "tw-definition-list__item",
+      children: [/*#__PURE__*/jsxRuntime.jsx("dt", {
+        children: title
+      }), /*#__PURE__*/jsxRuntime.jsxs("dd", {
+        className: classNames__default.default(...getAlignmentClasses(layout, action)),
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          children: value
+        }), action ? /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: classNames__default.default(isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2', 'tw-definition-list__action'),
+          children: /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
+            className: "tw-definition-list__button",
+            onClick: action.onClick,
+            children: action.label
+          })
+        }) : null]
+      })]
+    }, key))
+  });
+}
 
 const DropFade = ({
   children,
@@ -5098,14 +4971,6 @@ const FlowHeader = /*#__PURE__*/React__namespace.forwardRef(({
   });
 });
 
-// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
-exports.LogoType = void 0;
-(function (LogoType) {
-  LogoType["WISE"] = "WISE";
-  LogoType["WISE_BUSINESS"] = "WISE_BUSINESS";
-  LogoType["WISE_PLATFORM"] = "WISE_PLATFORM";
-})(exports.LogoType || (exports.LogoType = {}));
-
 var LogoFlagInverse = function LogoFlagInverse(props) {
   return /*#__PURE__*/jsxRuntime.jsx("svg", {
     ...props,
@@ -5238,15 +5103,26 @@ const svgPaths = {
   WISE_FLAG_PLATFORM: LogoFlagPlatform,
   WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse
 };
-const Logo = ({
+exports.LogoType = void 0;
+(function (LogoType) {
+  LogoType["WISE"] = "WISE";
+  LogoType["WISE_BUSINESS"] = "WISE_BUSINESS";
+  LogoType["WISE_PLATFORM"] = "WISE_PLATFORM";
+})(exports.LogoType || (exports.LogoType = {}));
+const labelByType = {
+  WISE: 'Wise',
+  WISE_BUSINESS: 'Wise Business',
+  WISE_PLATFORM: 'Wise Platform'
+};
+function Logo({
   className,
   inverse,
-  type
-}) => {
-  const LogoSm = svgPaths[`WISE_FLAG${type === exports.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__*/jsxRuntime.jsxs("span", {
-    "aria-label": type === exports.LogoType.WISE ? 'Wise' : 'Wise Business' | type === exports.LogoType.WISE_PLATFORM ? 'Wise Platform' : 'Wise Business',
+    "aria-label": labelByType[type],
     role: "img",
     className: classNames__default.default(className, 'np-logo'),
     children: [/*#__PURE__*/jsxRuntime.jsx(LogoSm, {
@@ -5255,21 +5131,7 @@ const Logo = ({
       className: "np-logo-svg np-logo-svg--size-md"
     })]
   });
-};
-Logo.propTypes = {
-  /** Extra classes applied to Logo */
-  className: PropTypes__default.default.string,
-  /** If true, will use dark colours for dark on light theme */
-  inverse: PropTypes__default.default.bool,
-  /** What type of logo to display */
-  type: PropTypes__default.default.oneOf(['WISE', 'WISE_BUSINESS', 'WISE_PLATFORM'])
-};
-Logo.defaultProps = {
-  className: undefined,
-  inverse: false,
-  type: exports.LogoType.WISE
-};
-var Logo$1 = Logo;
+}
 
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 const Tooltip = ({
@@ -5468,38 +5330,30 @@ const AnimatedLabel = ({
   });
 };
 
-const BackButton = ({
+function BackButton({
   className,
   onClick,
   'aria-label': ariaLabel
-}) => /*#__PURE__*/jsxRuntime.jsx(Avatar, {
-  type: exports.AvatarType.ICON,
-  size: 40,
-  children: /*#__PURE__*/jsxRuntime.jsx("button", {
-    type: "button",
-    "aria-label": ariaLabel,
-    className: classNames__default.default('np-back-button', 'btn-unstyled', className),
-    onClick: onClick,
-    children: /*#__PURE__*/jsxRuntime.jsx(icons.ArrowLeft, {
-      size: 24
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Avatar, {
+    type: exports.AvatarType.ICON,
+    size: 40,
+    children: /*#__PURE__*/jsxRuntime.jsx("button", {
+      type: "button",
+      "aria-label": ariaLabel,
+      className: classNames__default.default('np-back-button', 'btn-unstyled', className),
+      onClick: onClick,
+      children: /*#__PURE__*/jsxRuntime.jsx(icons.ArrowLeft, {
+        size: 24
+      })
     })
-  })
-});
-BackButton.propTypes = {
-  'aria-label': PropTypes__default.default.string.isRequired,
-  className: PropTypes__default.default.string,
-  label: PropTypes__default.default.element,
-  onClick: PropTypes__default.default.func
-};
-BackButton.defaultProps = {
-  className: undefined,
-  label: undefined
-};
+  });
+}
 
 const FlowNavigation = ({
   activeStep = 0,
   avatar,
-  logo = /*#__PURE__*/jsxRuntime.jsx(Logo$1, {}),
+  logo = /*#__PURE__*/jsxRuntime.jsx(Logo, {}),
   done = false,
   onClose,
   onGoBack,
@@ -5651,7 +5505,7 @@ const Modal = ({
   const noDivider = checkSpecialClasses('no-divider');
   const contentReference = React.useRef(null);
   const titleId = React.useId();
-  return !isMedium ? /*#__PURE__*/jsxRuntime.jsx(Drawer$1, {
+  return !isMedium ? /*#__PURE__*/jsxRuntime.jsx(Drawer, {
     open: open,
     headerTitle: title,
     footerContent: footer,
@@ -7901,11 +7755,12 @@ const Nudge = ({
   });
 };
 
-const OverlayHeader = ({
+const defaultLogo = /*#__PURE__*/jsxRuntime.jsx(Logo, {});
+function OverlayHeader({
   avatar,
   onClose,
-  logo
-}) => {
+  logo = defaultLogo
+}) {
   const closeButton = onClose && /*#__PURE__*/jsxRuntime.jsx(CloseButton, {
     size: exports.Size.LARGE,
     onClick: onClose
@@ -7923,20 +7778,7 @@ const OverlayHeader = ({
       })
     })
   });
-};
-OverlayHeader.defaultProps = {
-  avatar: null,
-  logo: /*#__PURE__*/jsxRuntime.jsx(Logo$1, {}),
-  onClose: null
-};
-OverlayHeader.propTypes = {
-  /** An Avatar */
-  avatar: PropTypes__default.default.element,
-  logo: PropTypes__default.default.node,
-  /** Function called when the close is clicked */
-  onClose: PropTypes__default.default.func
-};
-var OverlayHeader$1 = OverlayHeader;
+}
 
 var messages$3 = reactIntl.defineMessages({
   selectInputPlaceholder: {
@@ -10479,7 +10321,7 @@ function Select({
       , {
         className: classNames__default.default(s('tw-icon'), s('tw-chevron-up-icon'), s('tw-chevron'), s('bottom'), s('np-select-chevron'))
       })]
-    }), isMobile ? isSearchEnabled ? /*#__PURE__*/jsxRuntime.jsx(Drawer$1, {
+    }), isMobile ? isSearchEnabled ? /*#__PURE__*/jsxRuntime.jsx(Drawer, {
       open: open,
       headerTitle: searchPlaceholder || formatMessage(messages$2.searchPlaceholder),
       onClose: handleCloseOptions,
@@ -10617,15 +10459,13 @@ class Snackbar extends React.Component {
     const {
       action,
       text,
-      theme,
       timestamp
     } = this.props;
     if (!previousProps.text) {
       this.setState({
         visible: true,
         action,
-        text,
-        theme
+        text
       }, () => {
         this.setLeaveTimeout();
       });
@@ -10639,8 +10479,7 @@ class Snackbar extends React.Component {
             this.setState({
               visible: true,
               action,
-              text,
-              theme
+              text
             });
             this.setLeaveTimeout();
           }, CSS_TRANSITION_DURATION);
@@ -10649,8 +10488,7 @@ class Snackbar extends React.Component {
         this.setState({
           visible: true,
           action,
-          text,
-          theme
+          text
         });
         this.setLeaveTimeout();
       }
@@ -10660,7 +10498,6 @@ class Snackbar extends React.Component {
     const {
       action,
       text,
-      theme = exports.Theme.LIGHT,
       visible
     } = this.state;
     const {
@@ -10681,7 +10518,7 @@ class Snackbar extends React.Component {
         children: /*#__PURE__*/jsxRuntime.jsxs(Body, {
           ref: this.bodyRef,
           as: "span",
-          className: `snackbar__text snackbar__text--${theme}`,
+          className: "snackbar__text",
           "aria-live": "polite",
           children: [text, action ? /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
             className: "snackbar__text__action",
@@ -10740,19 +10577,21 @@ function SnackbarProvider({
   });
 }
 
-function Sticky({
+const Sticky = ({
+  children,
   open = true,
-  position = 'bottom',
-  children
-}) {
+  position = exports.Position.BOTTOM,
+  testId
+}) => {
   return /*#__PURE__*/jsxRuntime.jsx(SlidingPanel, {
+    testId: testId,
     open: open,
     position: position,
     slidingPanelPositionFixed: true,
     showSlidingPanelBorder: true,
     children: children
   });
-}
+};
 
 var messages$1 = reactIntl.defineMessages({
   statusNotDone: {
@@ -13171,13 +13010,8 @@ const UploadButton = ({
   maxFiles,
   onChange,
   id = DEFAULT_FILE_INPUT_ID,
-  uploadButtonTitle,
-  multipleFileInputWithFilesAdded
+  uploadButtonTitle
 }) => {
-  const {
-    isModern
-  } = componentsTheming.useTheme();
-  useDirection();
   const {
     formatMessage
   } = reactIntl.useIntl();
@@ -13240,7 +13074,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 {
@@ -13252,17 +13086,13 @@ const UploadButton = ({
     };
   }
   function renderDescription() {
-    return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: /*#__PURE__*/jsxRuntime.jsxs(Body, {
-        className: classNames__default.default({
-          'text-primary': !disabled,
-          small: !isModern,
-          'font-weight-normal': !isModern
-        }),
-        children: [getDescription(), maxFiles && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/jsxRuntime.jsx("br", {}), `Maximum ${maxFiles} files.`]
-        })]
-      })
+    return /*#__PURE__*/jsxRuntime.jsxs(Body, {
+      className: classNames__default.default({
+        'text-primary': !disabled
+      }),
+      children: [getDescription(), maxFiles && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx("br", {}), `Maximum ${maxFiles} files.`]
+      })]
     });
   }
   function renderButtonTitle() {
@@ -13296,14 +13126,11 @@ const UploadButton = ({
       onChange: filesSelected
     }), /*#__PURE__*/jsxRuntime.jsx("label", {
       htmlFor: id,
-      className: classNames__default.default('btn', 'np-upload-accent', 'np-upload-button', {
-        disabled,
-        'np-upload-input--square-top': multipleFileInputWithFilesAdded
-      }),
+      className: classNames__default.default('btn', 'np-upload-button'),
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "media",
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "np-upload-icon media-left",
+          className: "np-upload-icon media-middle media-left",
           children: /*#__PURE__*/jsxRuntime.jsx(icons.Upload, {
             size: 24,
             className: "text-link"
@@ -13319,9 +13146,7 @@ const UploadButton = ({
         })]
       })
     }), isDropping && /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classNames__default.default('droppable-card', 'droppable-dropping-card', 'droppable-card-content', {
-        'np-upload-input--square-top': multipleFileInputWithFilesAdded
-      }),
+      className: classNames__default.default('droppable-card', 'droppable-dropping-card', 'droppable-card-content'),
       children: [/*#__PURE__*/jsxRuntime.jsx(icons.PlusCircle, {
         className: "m-x-1",
         size: 24
@@ -13368,7 +13193,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
   });
@@ -13393,20 +13218,15 @@ const UploadItem = ({
     status,
     filename,
     error,
+    errors,
     url
   } = file;
-  const {
-    isModern
-  } = componentsTheming.useTheme();
   const isSucceeded = [exports.Status.SUCCEEDED, undefined].includes(status) && !!url;
   const getIcon = () => {
-    if (error || status === exports.Status.FAILED) {
-      return isModern ? /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
+    if (error || errors?.length || status === exports.Status.FAILED) {
+      return /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
         size: exports.Size.SMALL,
         sentiment: exports.Sentiment.NEGATIVE
-      }) : /*#__PURE__*/jsxRuntime.jsx(icons.AlertCircle, {
-        size: 24,
-        className: "text-negative"
       });
     }
     let processIndicator;
@@ -13421,31 +13241,37 @@ const UploadItem = ({
       case exports.Status.SUCCEEDED:
       case exports.Status.DONE:
       default:
-        processIndicator = isModern ? /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
+        processIndicator = /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
           size: exports.Size.SMALL,
           sentiment: exports.Sentiment.POSITIVE
-        }) : /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator, {
-          size: exports.Size.EXTRA_SMALL,
-          status: exports.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__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.jsx("li", {
+          children: getErrorMessage(error)
+        }, index);
+      })
+    });
   };
-  const getErrorMessage = () => typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
   const getDescription = () => {
-    if (error || status === exports.Status.FAILED) {
+    if (error || errors?.length || status === exports.Status.FAILED) {
       return /*#__PURE__*/jsxRuntime.jsx(Body, {
         type: exports.Typography.BODY_DEFAULT_BOLD,
         className: "text-negative",
-        children: getErrorMessage()
+        children: errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)
       });
     }
     switch (status) {
@@ -13515,7 +13341,7 @@ const UploadItem = ({
         }),
         type: "button",
         onClick: () => onDelete(),
-        children: /*#__PURE__*/jsxRuntime.jsx(icons.CrossCircleFill, {
+        children: /*#__PURE__*/jsxRuntime.jsx(icons.Bin, {
           size: 16
         })
       })]
@@ -13552,9 +13378,6 @@ const UploadInput = ({
   sizeLimitErrorMessage,
   uploadButtonTitle
 }) => {
-  const {
-    isModern
-  } = componentsTheming.useTheme();
   const [markedFileForDelete, setMarkedFileForDelete] = React.useState(null);
   const [mounted, setMounted] = React.useState(false);
   const {
@@ -13712,7 +13535,7 @@ const UploadInput = ({
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: classNames__default.default('np-upload-input', className, {
-        disabled: isModern && disabled
+        disabled
       }),
       children: [uploadedFiles.map(file => /*#__PURE__*/jsxRuntime.jsx(UploadItem, {
         file: file,
@@ -13729,7 +13552,6 @@ const UploadInput = ({
         sizeLimit: sizeLimit,
         description: description,
         maxFiles: maxFiles,
-        multipleFileInputWithFilesAdded: multiple && uploadedFiles.length > 0,
         onChange: addFiles
       })]
     }), /*#__PURE__*/jsxRuntime.jsx(Modal, {
@@ -14783,14 +14605,14 @@ exports.Alert = Alert;
 exports.Avatar = Avatar;
 exports.AvatarWrapper = AvatarWrapper;
 exports.Badge = Badge;
-exports.BaseCard = Card$2;
+exports.BaseCard = Card$1;
 exports.Body = Body;
 exports.BottomSheet = BottomSheet$1;
 exports.Button = Button;
-exports.Card = Card$1;
+exports.Card = Card;
 exports.Carousel = Carousel;
 exports.Checkbox = Checkbox;
-exports.CheckboxButton = CheckboxButton$1;
+exports.CheckboxButton = CheckboxButton;
 exports.CheckboxOption = CheckboxOption;
 exports.Chevron = Chevron;
 exports.Chip = Chip;
@@ -14802,11 +14624,11 @@ exports.DEFAULT_LOCALE = DEFAULT_LOCALE;
 exports.DateInput = DateInput;
 exports.DateLookup = DateLookup$1;
 exports.Decision = Decision;
-exports.DefinitionList = DefinitionList$1;
+exports.DefinitionList = DefinitionList;
 exports.Dimmer = Dimmer$1;
 exports.DirectionProvider = DirectionProvider;
 exports.Display = Display;
-exports.Drawer = Drawer$1;
+exports.Drawer = Drawer;
 exports.DropFade = DropFade;
 exports.Emphasis = Emphasis;
 exports.Field = Field;
@@ -14824,7 +14646,7 @@ exports.LanguageProvider = LanguageProvider;
 exports.Link = Link;
 exports.ListItem = ListItem$1;
 exports.Loader = Loader;
-exports.Logo = Logo$1;
+exports.Logo = Logo;
 exports.Markdown = Markdown;
 exports.Modal = Modal;
 exports.Money = Money;
@@ -14833,7 +14655,7 @@ exports.NavigationOption = NavigationOption;
 exports.NavigationOptionsList = NavigationOptionList;
 exports.Nudge = Nudge;
 exports.Option = Option$2;
-exports.OverlayHeader = OverlayHeader$1;
+exports.OverlayHeader = OverlayHeader;
 exports.PhoneNumberInput = PhoneNumberInput;
 exports.Popover = Popover$1;
 exports.ProcessIndicator = ProcessIndicator;