@transferwise/components 46.39.0 → 46.41.0

package/build/index.mjs

@@ -2,7 +2,7 @@ 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, Bin } 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, 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 commonmark from 'commonmark';
 import { useTheme, ThemeProvider } from '@wise/components-theming';
@@ -717,7 +717,7 @@ const StatusIcon = ({
   const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
   return /*#__PURE__*/jsx("span", {
     "data-testid": "status-icon",
-    className: classNames('status-circle', 'status-circle-' + size, sentiment),
+    className: classNames('status-circle', `status-circle-${size}`, sentiment),
     children: /*#__PURE__*/jsx(Icon, {
       className: classNames('status-icon', iconColor)
     })
@@ -3159,8 +3159,10 @@ const DateInput = ({
     return null;
   };
   const [day, setDay] = useState(() => getInitialDate('day'));
+  const [displayDay, setDisplayDay] = useState(day?.toString());
   const [month, setMonth] = useState(() => getInitialDate('month'));
   const [year, setYear] = useState(() => getInitialDate('year'));
+  const [displayYear, setDisplayYear] = useState(year?.toString());
   const [lastBroadcastedValue, setLastBroadcastedValue] = useState(getDateObject);
   const monthNames = getMonthNames(locale, monthFormat);
   dayLabel ||= formatMessage(messages$9.dayLabel);
@@ -3186,8 +3188,8 @@ const DateInput = ({
   const getSelectElement = () => {
     return /*#__PURE__*/jsxs("label", {
       className: "d-flex flex-column",
-      children: [/*#__PURE__*/jsx("span", {
-        className: "sr-only",
+      children: [/*#__PURE__*/jsx(Body, {
+        type: Typography.BODY_DEFAULT,
         children: monthLabel
       }), /*#__PURE__*/jsx(SelectInput, {
         name: "month",
@@ -3209,12 +3211,23 @@ const DateInput = ({
       })]
     });
   };
+  const isDayValid = (newDay, newMonth, newYear) => {
+    const maxDay = new Date(newYear, newMonth + 1, 0).getDate();
+    return newDay <= maxDay;
+  };
   const handleInternalValue = (newDay = day, newMonth = month, newYear = year) => {
-    if (newDay == null || newMonth == null || newYear == null) {
+    if (newDay == null || newDay === 0 || newMonth == null || newYear == null || newYear === 0) {
+      broadcastNewValue(null);
+      return;
+    }
+    if (!isDayValid(newDay, newMonth, newYear)) {
       broadcastNewValue(null);
       return;
     }
     const dateValue = new Date(newYear, newMonth, newDay);
+    if (newYear < 100) {
+      dateValue.setFullYear(newYear);
+    }
     if (!isDateValid(dateValue)) {
       broadcastNewValue(null);
       return;
@@ -3228,11 +3241,11 @@ const DateInput = ({
     }
   };
   const handleDayChange = event => {
-    const {
-      checkedDay
-    } = checkDate(Number.parseInt(event.target.value, 10), month, year);
-    setDay(checkedDay);
-    handleInternalValue(checkedDay, month, year);
+    const newDayString = event.target.value.replace(/\D/g, '');
+    const newDayNumber = Number.parseInt(newDayString, 10);
+    setDay(newDayNumber);
+    setDisplayDay(newDayString);
+    handleInternalValue(newDayNumber, month, year);
   };
   const handleMonthChange = selectedMonth => {
     if (selectedMonth === null) {
@@ -3240,30 +3253,19 @@ const DateInput = ({
       handleInternalValue(day, null, year);
       return;
     }
-    const {
-      checkedDay
-    } = checkDate(day, selectedMonth, year);
     setMonth(selectedMonth);
-    if (day && checkedDay !== day) {
-      setDay(checkedDay);
-    }
-    handleInternalValue(checkedDay, selectedMonth, year);
+    handleInternalValue(day, selectedMonth, year);
   };
   const handleYearChange = event => {
-    const newValue = event.target.value;
-    const slicedYear = newValue.length > 4 ? newValue.slice(0, 4) : newValue;
-    if (slicedYear.toString().length === 4) {
-      // Correct day based on year and month.
-      const {
-        checkedDay
-      } = checkDate(day, month, Number.parseInt(newValue, 10));
-      if (day && checkedDay !== day) {
-        setDay(checkedDay);
-      }
-      setYear(Number.parseInt(slicedYear, 10));
-      handleInternalValue(checkedDay, month, Number.parseInt(slicedYear, 10));
+    const newYearString = event.target.value.replace(/\D/g, '');
+    const newYearNumber = Number.parseInt(newYearString, 10);
+    if (newYearString.length >= 4 && newYearString.length <= 6) {
+      setYear(newYearNumber);
+      setDisplayYear(newYearString);
+      handleInternalValue(day, month, newYearNumber);
     } else {
-      setYear(Number.parseInt(slicedYear, 10));
+      setYear(null);
+      setDisplayYear(newYearString);
       handleInternalValue(day, month, null);
     }
   };
@@ -3273,24 +3275,6 @@ const DateInput = ({
       onChange(newValue != null ? getDateAsString(newValue) : null);
     }
   };
-  const checkDate = (newDay = null, newMonth = 0, newYear = null) => {
-    let checkedDay = newDay;
-    const maxDay = new Date(newYear || 2000, newMonth != null ? newMonth + 1 : 1, 0).getDate();
-    if (!newDay) {
-      checkedDay = null;
-    }
-    if (newDay && newDay < 0) {
-      checkedDay = 1;
-    }
-    if (newDay && newMonth || newDay && newDay > 31) {
-      checkedDay = newDay > maxDay ? maxDay : newDay;
-    }
-    return {
-      checkedDay,
-      checkedMonth: newMonth,
-      checkedYear: newYear
-    };
-  };
   const monthYearOnly = mode === DateMode.MONTH_YEAR;
   const monthWidth = classNames({
     'col-sm-8': monthYearOnly,
@@ -3306,8 +3290,8 @@ const DateInput = ({
     return /*#__PURE__*/jsx("div", {
       className: "col-sm-3",
       children: /*#__PURE__*/jsxs("label", {
-        children: [/*#__PURE__*/jsx("span", {
-          className: "sr-only",
+        children: [/*#__PURE__*/jsx(Body, {
+          type: Typography.BODY_DEFAULT,
           children: dayLabel
         }), /*#__PURE__*/jsx("div", {
           className: `input-group input-group-${size}`,
@@ -3317,10 +3301,12 @@ const DateInput = ({
             pattern: "[0-9]*",
             name: "day",
             autoComplete: dayAutoComplete,
-            value: day || '',
+            value: displayDay || '',
             placeholder: placeholders?.day,
             disabled: disabled,
             min: 1,
+            max: 31,
+            maxLength: 2,
             onChange: event => handleDayChange(event)
           })
         })]
@@ -3331,8 +3317,8 @@ const DateInput = ({
     return /*#__PURE__*/jsx("div", {
       className: "col-sm-4",
       children: /*#__PURE__*/jsxs("label", {
-        children: [/*#__PURE__*/jsx("span", {
-          className: "sr-only",
+        children: [/*#__PURE__*/jsx(Body, {
+          type: Typography.BODY_DEFAULT,
           children: yearLabel
         }), /*#__PURE__*/jsx("div", {
           className: `input-group input-group-${size}`,
@@ -3343,9 +3329,11 @@ const DateInput = ({
             name: "year",
             autoComplete: yearAutoComplete,
             placeholder: placeholders?.year,
-            value: year || '',
+            value: displayYear || '',
             disabled: disabled,
-            min: 1,
+            min: 0,
+            max: 9999,
+            maxLength: 6,
             onChange: event => handleYearChange(event)
           })
         })]
@@ -4849,14 +4837,20 @@ function InlineAlert({
   className,
   children
 }) {
-  const danger = type === 'negative' || type === 'error';
-  return /*#__PURE__*/jsxs("div", {
+  return /*#__PURE__*/jsx("div", {
     role: "alert",
     id: id,
-    className: classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className),
-    children: [danger && /*#__PURE__*/jsx(AlertCircle, {}), /*#__PURE__*/jsx("div", {
-      children: children
-    })]
+    className: classNames('alert alert-detach', `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`, className),
+    children: /*#__PURE__*/jsxs("div", {
+      className: "d-inline-flex",
+      children: [type !== Sentiment.NEUTRAL && type !== Sentiment.PENDING && /*#__PURE__*/jsx(StatusIcon, {
+        sentiment: type,
+        size: Size.SMALL
+      }), /*#__PURE__*/jsx("div", {
+        className: "np-text-body-default",
+        children: children
+      })]
+    })
   });
 }
 
@@ -4877,13 +4871,15 @@ const Label = ({
 const Field = ({
   id,
   label,
-  hint,
-  error,
+  message: propMessage,
+  sentiment: propType = Sentiment.NEUTRAL,
   className,
-  children
+  children,
+  ...props
 }) => {
-  const hasError = Boolean(error);
-  const hasHint = Boolean(hint) && !hasError;
+  const sentiment = props.error ? Sentiment.NEGATIVE : propType;
+  const message = props.error || props.hint || propMessage;
+  const hasError = sentiment === Sentiment.NEGATIVE;
   const labelId = useId();
   const fallbackInputId = useId();
   const inputId = id !== null ? id ?? fallbackInputId : undefined;
@@ -4893,26 +4889,24 @@ const Field = ({
     children: /*#__PURE__*/jsx(InputIdContextProvider, {
       value: inputId,
       children: /*#__PURE__*/jsx(InputDescribedByProvider, {
-        value: hasError || hasHint ? descriptionId : undefined,
+        value: message ? descriptionId : undefined,
         children: /*#__PURE__*/jsx(InputInvalidProvider, {
           value: hasError,
           children: /*#__PURE__*/jsxs("div", {
             className: classNames('form-group d-block', {
+              'has-success': sentiment === Sentiment.POSITIVE,
+              'has-warning': sentiment === Sentiment.WARNING,
               'has-error': hasError,
-              'has-info': hasHint
+              'has-info': sentiment === Sentiment.NEUTRAL
             }, className),
             children: [/*#__PURE__*/jsxs(Label, {
               id: labelId,
               htmlFor: inputId,
               children: [label, children]
-            }), hasHint && /*#__PURE__*/jsx(InlineAlert, {
-              type: Sentiment.NEUTRAL,
-              id: descriptionId,
-              children: hint
-            }), hasError && /*#__PURE__*/jsx(InlineAlert, {
-              type: Sentiment.NEGATIVE,
+            }), message && /*#__PURE__*/jsx(InlineAlert, {
+              type: sentiment,
               id: descriptionId,
-              children: error
+              children: message
             })]
           })
         })
@@ -12059,13 +12053,6 @@ var Typeahead$1 = withInputAttributes(Typeahead, {
   nonLabelable: true
 });
 
-// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
-var UploadStep;
-(function (UploadStep) {
-  UploadStep["UPLOAD_IMAGE_STEP"] = "uploadImageStep";
-  UploadStep["MEDIA_UPLOAD_STEP"] = "mediaUploadStep";
-})(UploadStep || (UploadStep = {}));
-
 var messages = defineMessages({
   csButtonText: {
     id: "neptune.Upload.csButtonText"
@@ -12100,16 +12087,13 @@ var messages = defineMessages({
 });
 
 class UploadImageStep extends PureComponent {
-  constructor() {
-    super();
-    this.uploadInputRef = /*#__PURE__*/createRef();
-  }
+  uploadInputRef = /*#__PURE__*/createRef();
   onManualUpload = () => {
     const {
       fileDropped
     } = this.props;
-    if (this.uploadInputRef && this.uploadInputRef.current) {
-      const file = this.uploadInputRef.current.files[0];
+    const file = this.uploadInputRef.current?.files?.[0];
+    if (file != null) {
       fileDropped(file);
     }
   };
@@ -12158,7 +12142,7 @@ class UploadImageStep extends PureComponent {
             children: usLabel
           }), usPlaceholder && /*#__PURE__*/jsx("p", {
             className: "np-text-body-large m-b-3",
-            children: `${usPlaceholder}`
+            children: String(usPlaceholder)
           }), /*#__PURE__*/jsxs("label", {
             className: `btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`,
             children: [usButtonText ? /*#__PURE__*/jsx("span", {
@@ -12169,7 +12153,7 @@ class UploadImageStep extends PureComponent {
             }), /*#__PURE__*/jsx("input", {
               ref: this.uploadInputRef,
               type: "file",
-              accept: usAccept === '*' ? null : usAccept,
+              accept: usAccept === '*' ? undefined : usAccept,
               className: "tw-droppable-input hidden",
               disabled: usDisabled,
               name: "file-upload",
@@ -12181,213 +12165,17 @@ class UploadImageStep extends PureComponent {
     });
   }
 }
-UploadImageStep.propTypes = {
-  fileDropped: PropTypes.func.isRequired,
-  isComplete: PropTypes.bool.isRequired,
-  usAccept: PropTypes.string.isRequired,
-  usButtonText: PropTypes.string.isRequired,
-  usDisabled: PropTypes.bool.isRequired,
-  usHelpImage: PropTypes.node.isRequired,
-  usLabel: PropTypes.string.isRequired,
-  usPlaceholder: PropTypes.string.isRequired
-};
-
-const postData = (httpOptions, data = {}, fetcher = fetch) => fetcher(`${httpOptions.url}`, {
-  method: 'POST',
-  body: data,
-  ...httpOptions
-}).then(response => {
-  if (!response.ok) {
-    const error = new Error(response.statusText);
-    error.status = response.status;
-    error.response = response;
-    throw error;
-  }
-  return response;
-}).catch(error => {
-  throw error;
-});
 
-const asyncFileRead = file => new Promise((resolve, reject) => {
-  const reader = new FileReader();
-  reader.readAsDataURL(file);
-  reader.addEventListener('load', event => {
-    resolve(event.target.result);
-  });
-  reader.addEventListener('error', event => {
-    reject(event);
-  });
-});
-
-const isSizeValid = (file, maxSize) => Number.isInteger(maxSize) && file.size <= maxSize;
-
-const getFileType = (file, file64) => {
-  if (!file && !file64) {
-    return '';
-  }
-  if (file && file.type && file.type !== '') {
-    return file.type ?? '';
-  }
-  if (file64) {
-    const regex = /^data:([a-z]+\/[a-z]+);/;
-    const typeFromEncoded = file64.match(regex);
-    if (typeFromEncoded && typeFromEncoded[1]) {
-      return typeFromEncoded[1] ?? '';
-    }
-  }
-  return '';
-};
-
-const isTypeValid = (file, rule, file64) => {
-  if (!file || !rule) {
-    return false;
-  }
-  const allowedTypes = rule.replace(/\s/g, '').split(',');
-  const fileType = getFileType(file, file64);
-  if (rule === '*' || allowedTypes.includes(fileType)) {
-    return true;
-  }
-  return allowedTypes.some(type => {
-    const splittedRule = type.split('/');
-    const typeAllowed = splittedRule[0];
-    const extensionAllowed = splittedRule[1];
-    if (extensionAllowed !== '*') {
-      return false;
-    }
-    return fileType.includes(typeAllowed);
-  });
-};
-
-// Spot Platform's Media API only support these MIME types
-const SUPPORTED_MIME_TYPES = ['image/jpeg', 'video/*', 'application/pdf'];
-const getSupportedSpotMimeTypes = mimeTypes => {
-  if (mimeTypes === '*') {
-    return SUPPORTED_MIME_TYPES;
-  }
-  const mimeTypesArray = mimeTypes.split(',');
-  const mimeMapping = {
-    'image/*': 'image/jpeg',
-    'application/*': 'application/pdf'
-  };
-  const mapSupportedMimeTypes = mimeTypesArray.map(type => mimeMapping[type] || type);
-  return mapSupportedMimeTypes.filter(type => SUPPORTED_MIME_TYPES.includes(type));
-};
-
-const requestMedia = mediaRequest => new Promise((resolve, reject) => {
-  if (typeof window === 'undefined' || typeof window.microapps === 'undefined') {
-    reject(`microapps must be available in window to use Spot Platform's Media API`);
-  }
-  window.microapps.requestMedia(mediaRequest).then(response => {
-    const fileByteArray = base64ToByteArray(response.bytes);
-    const blob = new Blob([fileByteArray], {
-      type: response.mimeType
-    });
-    resolve(blob);
-  }).catch(error => reject(error));
-});
-const base64ToByteArray = base64String => {
-  const byteCharacters = atob(base64String);
-  const byteCharactersLength = byteCharacters.length;
-  const byteArray = new Array(byteCharactersLength);
-  for (let i = 0; i < byteCharactersLength; i += 1) {
-    byteArray[i] = byteCharacters.charCodeAt(i);
-  }
-  return new Uint8Array(byteArray);
-};
-
-const MediaUploadStep = ({
+function ProcessingStep({
   isComplete,
-  usAccept,
-  usButtonText,
-  usDisabled,
-  usHelpImage,
-  usLabel,
-  usPlaceholder,
-  fileDropped
-}) => {
-  const getMediaFile = () => {
-    const allowedMimeTypes = getSupportedSpotMimeTypes(usAccept);
-    if (allowedMimeTypes.length === 0) {
-      throw new Error('provided mimeTypes not supported');
-    }
-    const mediaRequest = {
-      allowedMimeTypes
-    };
-    requestMedia(mediaRequest).then(file => fileDropped(file));
-  };
-  const getImage = () => {
-    if (!usHelpImage) {
-      return /*#__PURE__*/jsx("div", {
-        className: "circle circle-sm circle-inverse p-t-1",
-        children: /*#__PURE__*/jsx(Upload$2, {
-          size: 24
-        })
-      });
-    }
-    if (typeof usHelpImage === 'string') {
-      return /*#__PURE__*/jsx("img", {
-        src: usHelpImage,
-        alt: usLabel,
-        className: "thumbnail text-xs-center"
-      });
-    }
-    return usHelpImage;
-  };
-  return /*#__PURE__*/jsx("div", {
-    children: /*#__PURE__*/jsx("div", {
-      className: "droppable-default-card",
-      "aria-hidden": isComplete,
-      children: /*#__PURE__*/jsxs("div", {
-        className: "droppable-card-content",
-        children: [/*#__PURE__*/jsx("div", {
-          className: "m-b-3",
-          children: getImage()
-        }), usLabel && /*#__PURE__*/jsx(Title, {
-          type: Typography.TITLE_BODY,
-          className: "m-b-1",
-          children: usLabel
-        }), usPlaceholder && /*#__PURE__*/jsx(Body, {
-          as: "p",
-          type: Typography.BODY_LARGE,
-          className: "m-b-3",
-          children: `${usPlaceholder}`
-        }), /*#__PURE__*/jsx(Button, {
-          disabled: usDisabled,
-          onClick: getMediaFile,
-          children: usButtonText || /*#__PURE__*/jsx(Upload$2, {
-            size: 24,
-            className: "m-r-0"
-          })
-        })]
-      })
-    })
-  });
-};
-MediaUploadStep.propTypes = {
-  fileDropped: PropTypes.func.isRequired,
-  isComplete: PropTypes.bool.isRequired,
-  usAccept: PropTypes.string.isRequired,
-  usButtonText: PropTypes.string.isRequired,
-  usDisabled: PropTypes.bool.isRequired,
-  usHelpImage: PropTypes.node.isRequired,
-  usLabel: PropTypes.string.isRequired,
-  usPlaceholder: PropTypes.string.isRequired
-};
-
-const ProcessingStep = props => {
-  const {
-    isComplete,
-    isError,
-    isSuccess,
-    onAnimationCompleted,
-    onClear,
-    psButtonText,
-    psProcessingText,
-    psButtonDisabled
-  } = props;
-  const {
-    isModern
-  } = useTheme();
+  isError,
+  isSuccess,
+  onAnimationCompleted,
+  onClear,
+  psButtonText,
+  psProcessingText,
+  psButtonDisabled
+}) {
   let processStatus = Status.PROCESSING;
   if (isError) {
     processStatus = Status.FAILED;
@@ -12401,53 +12189,33 @@ const ProcessingStep = props => {
     children: /*#__PURE__*/jsxs("div", {
       className: "droppable-card-content",
       children: [/*#__PURE__*/jsx(ProcessIndicator, {
-        size: Size.Small,
         status: processStatus,
         onAnimationCompleted: status => onAnimationCompleted(status)
       }), /*#__PURE__*/jsx(Title, {
-        className: classNames({
-          'm-t-3': !isModern,
-          'm-b-3': !isModern,
-          'm-t-2': isModern,
-          'm-b-2': isModern
-        }),
+        className: "m-y-2",
         type: Typography.TITLE_BODY,
         "aria-live": "polite",
         children: psProcessingText
       }), psButtonText && /*#__PURE__*/jsx(Button, {
         disabled: psButtonDisabled,
-        onClick: event => onClear(event),
+        onClick: onClear,
         children: psButtonText
       })]
     })
   });
-};
-ProcessingStep.propTypes = {
-  isComplete: PropTypes.bool.isRequired,
-  isError: PropTypes.bool.isRequired,
-  isSuccess: PropTypes.bool.isRequired,
-  onAnimationCompleted: PropTypes.func.isRequired,
-  onClear: PropTypes.func.isRequired,
-  psButtonText: PropTypes.string.isRequired,
-  psProcessingText: PropTypes.string.isRequired,
-  psButtonDisabled: PropTypes.bool.isRequired
-};
+}
 
-const CompleteStep = props => {
-  const {
-    isModern
-  } = useTheme();
-  const {
-    csButtonText,
-    csFailureText,
-    csSuccessText,
-    fileName,
-    isComplete,
-    isError,
-    isImage,
-    onClear,
-    uploadedImage
-  } = props;
+function CompleteStep({
+  csButtonText,
+  csFailureText,
+  csSuccessText,
+  fileName,
+  isComplete,
+  isError,
+  isImage,
+  onClear,
+  uploadedImage
+}) {
   return /*#__PURE__*/jsx("div", {
     className: "droppable-complete-card droppable-card",
     "aria-hidden": !isComplete,
@@ -12457,16 +12225,11 @@ const CompleteStep = props => {
         className: "droppable-card-content d-flex flex-column align-items-center",
         "aria-live": "polite",
         children: isError ? /*#__PURE__*/jsxs(Fragment, {
-          children: [isModern ? /*#__PURE__*/jsx(StatusIcon, {
+          children: [/*#__PURE__*/jsx(StatusIcon, {
             size: Size.LARGE,
             sentiment: Sentiment.NEGATIVE
-          }) : /*#__PURE__*/jsx(AlertCircle, {
-            size: 24,
-            className: "text-negative"
           }), csFailureText && /*#__PURE__*/jsx("p", {
-            className: classNames('m-t-2', {
-              'm-b-0': isModern
-            }),
+            className: "m-t-2 m-b-0",
             children: csFailureText
           })]
         }) : /*#__PURE__*/jsxs(Fragment, {
@@ -12485,71 +12248,135 @@ const CompleteStep = props => {
           })]
         })
       }), csButtonText && /*#__PURE__*/jsx(Button, {
-        priority: isModern ? Priority.PRIMARY : Priority.SECONDARY,
-        className: classNames({
-          'm-t-1': isModern && !isError,
-          'm-t-2': isModern && isError,
-          'm-t-3': !isModern
-        }),
-        onClick: event => onClear(event),
+        className: isError ? 'm-t-2' : 'm-t-1',
+        onClick: onClear,
         children: csButtonText
       })]
     })
   });
-};
-CompleteStep.propTypes = {
-  csButtonText: PropTypes.string.isRequired,
-  csSuccessText: PropTypes.string.isRequired,
-  csFailureText: PropTypes.string.isRequired,
-  fileName: PropTypes.string.isRequired,
-  isComplete: PropTypes.bool.isRequired,
-  isError: PropTypes.bool.isRequired,
-  isImage: PropTypes.bool.isRequired,
-  onClear: PropTypes.func.isRequired,
-  uploadedImage: PropTypes.string
-};
-CompleteStep.defaultProps = {
-  uploadedImage: null
-};
+}
 
-const PROCESS_STATE = ['error', 'success'];
+class ResponseError extends Error {
+  response;
+  status;
+  constructor(response, message) {
+    super(message);
+    this.name = 'ResponseError';
+    this.response = response;
+    this.status = response.status;
+  }
+}
+async function postData({
+  url,
+  method = 'POST',
+  ...httpOptions
+}, data, fetcher = fetch) {
+  const response = await fetcher(url, {
+    method,
+    body: data,
+    ...httpOptions
+  });
+  if (!response.ok) {
+    throw new ResponseError(response, response.statusText);
+  }
+  return response;
+}
+
+async function asyncFileRead(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener('load', () => {
+      resolve(reader.result);
+    });
+    reader.addEventListener('error', () => {
+      reject(reader.error ?? new Error('Cannot read file'));
+    });
+    reader.readAsDataURL(file);
+  });
+}
+
+function isSizeValid(file, maxSize) {
+  return Number.isInteger(maxSize) && file.size <= maxSize;
+}
+
+function getFileType(file, file64) {
+  if (file.type) {
+    return file.type;
+  }
+  if (file64) {
+    const regex = /^data:([a-z]+\/[a-z]+);/;
+    const typeFromEncoded = regex.exec(file64);
+    if (typeFromEncoded?.[1]) {
+      return typeFromEncoded[1];
+    }
+  }
+  return '';
+}
+
+function isTypeValid(file, rule, file64) {
+  if (!rule) {
+    return false;
+  }
+  const allowedTypes = rule.replace(/\s/g, '').split(',');
+  const fileType = getFileType(file, file64);
+  if (rule === '*' || allowedTypes.includes(fileType)) {
+    return true;
+  }
+  return allowedTypes.some(type => {
+    const [typeAllowed, extensionAllowed] = type.split('/');
+    return extensionAllowed === '*' && fileType.includes(typeAllowed);
+  });
+}
 
-/*
- * This delay is required for the isError/isSuccess to be fired after isProcessing so the processIndicator, will be
- * rendered first and then updated with the right status.
- */
 const ANIMATION_FIX = 10;
 const MAX_SIZE_DEFAULT = 5000000;
-const UPLOAD_STEP_COMPONENTS = {
-  [UploadStep.UPLOAD_IMAGE_STEP]: UploadImageStep,
-  [UploadStep.MEDIA_UPLOAD_STEP]: MediaUploadStep
-};
+var UploadStep;
+(function (UploadStep) {
+  UploadStep["UPLOAD_IMAGE_STEP"] = "uploadImageStep";
+})(UploadStep || (UploadStep = {}));
 class Upload extends Component {
+  static defaultProps = {
+    animationDelay: 700,
+    maxSize: MAX_SIZE_DEFAULT,
+    psButtonDisabled: false,
+    size: 'md',
+    usAccept: 'image/*',
+    usDisabled: false,
+    usLabel: ''
+  };
+  dragCounter = 0;
+  timeouts = 0;
   constructor(props) {
     super(props);
-    this.dragCounter = 0;
-    this.timeouts = null;
     this.state = {
       fileName: '',
+      isDroppable: false,
       isComplete: false,
       isError: false,
       isImage: false,
       isProcessing: false,
       isSuccess: false,
-      response: null,
-      uploadedImage: null
+      response: undefined,
+      uploadedImage: undefined
     };
   }
   getErrorMessage(status) {
+    const {
+      csFailureText,
+      csTooLargeMessage,
+      csWrongTypeMessage,
+      maxSize,
+      intl
+    } = this.props;
     switch (status) {
       case 413:
-        return this.props.csTooLargeMessage || this.props.intl.formatMessage(messages.csTooLargeMessage, {
-          maxSize: this.props.maxSize / 1000000
+        return csTooLargeMessage || intl.formatMessage(messages.csTooLargeMessage, {
+          maxSize: maxSize / 1000000
         });
       case 415:
-        return this.props.csWrongTypeMessage || this.props.intl.formatMessage(messages.csWrongTypeMessage);
+        return csWrongTypeMessage || intl.formatMessage(messages.csWrongTypeMessage);
       default:
-        return this.props.csFailureText || this.props.intl.formatMessage(messages.csFailureText);
+        return csFailureText || intl.formatMessage(messages.csFailureText);
     }
   }
   onDragLeave(event) {
@@ -12576,7 +12403,7 @@ class Upload extends Component {
       });
     }
   }
-  onDrop(event) {
+  async onDrop(event) {
     const {
       isProcessing
     } = this.state;
@@ -12584,8 +12411,8 @@ class Upload extends Component {
     if (!isProcessing) {
       this.reset();
     }
-    if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
-      this.fileDropped(event.dataTransfer.files[0]);
+    if (event.dataTransfer?.files?.[0]) {
+      await this.fileDropped(event.dataTransfer.files[0]);
     }
   }
   onAnimationCompleted = async status => {
@@ -12594,77 +12421,70 @@ class Upload extends Component {
       isProcessing,
       fileName
     } = this.state;
-    // Success.
     const {
       animationDelay
     } = this.props;
-    if (isProcessing && status === Status.SUCCEEDED) {
+    if (isProcessing && status === 'succeeded') {
       const {
         onSuccess
       } = this.props;
-      this.timeouts = setTimeout(() => {
+      this.timeouts = window.setTimeout(() => {
         this.setState({
           isProcessing: false,
           isComplete: true
-        }, () => onSuccess ? onSuccess(response, fileName) : {});
+        }, onSuccess ? () => onSuccess(response, fileName) : undefined);
       }, animationDelay);
     }
-    // Failure.
-    if (isProcessing && status === Status.FAILED) {
+    if (isProcessing && status === 'failed') {
       const {
         onFailure
       } = this.props;
-      this.timeouts = setTimeout(() => {
+      this.timeouts = window.setTimeout(() => {
         this.setState({
           isProcessing: false,
           isComplete: true
-        }, () => onFailure ? onFailure(response) : {});
+        }, onFailure ? () => onFailure(response) : undefined);
       }, animationDelay);
     }
   };
-  asyncPost = file => {
+  asyncPost = async file => {
     const {
       httpOptions,
       fetcher
     } = this.props;
+    if (httpOptions == null) {
+      throw new Error('Cannot find HTTP options');
+    }
     const {
       fileInputName = file.name,
       data = {}
-    } = httpOptions || {};
+    } = httpOptions;
     const formData = new FormData();
     formData.append(fileInputName, file);
     Object.keys(data).forEach(key => formData.append(key, data[key]));
-    return postData(this.prepareHttpOptions(httpOptions), formData, fetcher);
+    return postData(httpOptions, formData, fetcher);
   };
   asyncResponse = (response, type) => {
     // Gives time to the animation callback to fire.
-    this.timeouts = setTimeout(() => {
+    this.timeouts = window.setTimeout(() => {
       this.setState({
         response,
-        isError: type === PROCESS_STATE[0],
-        isSuccess: type === PROCESS_STATE[1]
+        isError: type === 'error',
+        isSuccess: type === 'success'
       });
     }, ANIMATION_FIX);
   };
-  prepareHttpOptions = httpOptions => {
-    if (!httpOptions.url) {
-      throw new Error('You must supply a URL to post image data asynchronously');
-    }
-    return httpOptions;
-  };
   handleOnClear = event => {
     event.preventDefault();
     const {
       onCancel
     } = this.props;
-    if (onCancel) {
-      onCancel();
-    }
+    onCancel?.();
     this.reset();
   };
   reset = () => {
     this.dragCounter = 0;
-    clearTimeout(this.timeouts);
+    window.clearTimeout(this.timeouts);
     this.setState({
       isComplete: false,
       isError: false,
@@ -12704,14 +12524,12 @@ class Upload extends Component {
       isDroppable: false,
       isProcessing: true
     });
-    if (onStart) {
-      onStart(file);
-    }
+    onStart?.(file);
     let file64 = null;
     try {
       file64 = await asyncFileRead(file);
     } catch (error) {
-      this.asyncResponse(error, PROCESS_STATE[0]);
+      this.asyncResponse(error, 'error');
     }
     if (!file64) {
       return false;
@@ -12720,30 +12538,31 @@ class Upload extends Component {
       isImage: getFileType(file, file64).includes('image')
     });
     if (!isTypeValid(file, usAccept, file64)) {
-      const response = {
+      this.asyncResponse(new ResponseError(new Response(null, {
         status: 415,
         statusText: 'Unsupported Media Type'
-      };
-      this.asyncResponse(response, PROCESS_STATE[0]);
+      })), 'error');
       return false;
     }
     if (!isSizeValid(file, maxSize)) {
-      const response = {
+      this.asyncResponse(new ResponseError(new Response(null, {
         status: 413,
         statusText: 'Request Entity Too Large'
-      };
-      this.asyncResponse(response, PROCESS_STATE[0]);
+      })), 'error');
       return false;
     }
     if (httpOptions) {
       // Post the file to provided endpoint
-      return await this.asyncPost(file).then(response => this.asyncResponse(response, 'success')).then(() => {
-        this.showDataImage(file64);
-        return true;
-      }).catch(error => {
-        this.asyncResponse(error, PROCESS_STATE[0]);
+      let response;
+      try {
+        response = await this.asyncPost(file);
+      } catch (error) {
+        this.asyncResponse(error, 'error');
         return false;
-      });
+      }
+      this.asyncResponse(response, 'success');
+      this.showDataImage(file64);
+      return true;
     }
     // Post on form submit. And return the encoded image.
     this.showDataImage(file64);
@@ -12752,6 +12571,7 @@ class Upload extends Component {
   };
   render() {
     const {
+      maxSize,
       usDropMessage,
       usAccept,
       usButtonText,
@@ -12765,7 +12585,6 @@ class Upload extends Component {
       csButtonText,
       csSuccessText,
       size,
-      uploadStep,
       intl
     } = this.props;
     const {
@@ -12779,7 +12598,6 @@ class Upload extends Component {
       isSuccess,
       uploadedImage
     } = this.state;
-    const UploadStepComponent = UPLOAD_STEP_COMPONENTS[uploadStep] || UploadImageStep;
     return /*#__PURE__*/jsxs("div", {
       className: classNames('droppable-area', {
         droppable: true,
@@ -12793,10 +12611,10 @@ class Upload extends Component {
       }),
       onDragEnter: event => this.onDragEnter(event),
       onDragLeave: event => this.onDragLeave(event),
-      onDrop: event => this.onDrop(event),
+      onDrop: async event => this.onDrop(event),
       onDragOver: event => event.preventDefault(),
-      children: [!isProcessing && !isComplete && /*#__PURE__*/jsx(UploadStepComponent, {
-        fileDropped: file => this.fileDropped(file),
+      children: [!isProcessing && !isComplete && /*#__PURE__*/jsx(UploadImageStep, {
+        fileDropped: async file => this.fileDropped(file),
         isComplete: isComplete,
         usAccept: usAccept,
         usButtonText: usButtonText || intl.formatMessage(messages.usButtonText),
@@ -12804,7 +12622,7 @@ class Upload extends Component {
         usHelpImage: usHelpImage,
         usLabel: usLabel,
         usPlaceholder: usPlaceholder || intl.formatMessage(messages.usPlaceholder, {
-          maxSize: this.props.maxSize / 1000000
+          maxSize: maxSize / 1000000
         })
       }), isProcessing && /*#__PURE__*/jsx(ProcessingStep, {
         isComplete: isComplete,
@@ -12813,7 +12631,7 @@ class Upload extends Component {
         psButtonText: psButtonText || intl.formatMessage(messages.psButtonText),
         psProcessingText: psProcessingText || intl.formatMessage(messages.psProcessingText),
         psButtonDisabled: psButtonDisabled,
-        onAnimationCompleted: status => this.onAnimationCompleted(status),
+        onAnimationCompleted: async status => this.onAnimationCompleted(status),
         onClear: event => this.handleOnClear(event)
       }), (isSuccess || isError || isComplete) && /*#__PURE__*/jsx(CompleteStep, {
         fileName: fileName,
@@ -12821,7 +12639,7 @@ class Upload extends Component {
         isError: isError,
         isImage: isImage,
         csButtonText: csButtonText || intl.formatMessage(messages.csButtonText),
-        csFailureText: this.getErrorMessage(response?.status),
+        csFailureText: this.getErrorMessage(response != null && typeof response === 'object' && 'status' in response && typeof response.status === 'number' ? response.status : undefined),
         csSuccessText: csSuccessText || intl.formatMessage(messages.csSuccessText),
         uploadedImage: uploadedImage,
         onClear: event => this.handleOnClear(event)
@@ -12845,73 +12663,6 @@ class Upload extends Component {
     });
   }
 }
-Upload.propTypes = {
-  animationDelay: PropTypes.number,
-  csButtonText: PropTypes.string,
-  csFailureText: PropTypes.string,
-  csSuccessText: PropTypes.string,
-  csTooLargeMessage: PropTypes.string,
-  csWrongTypeMessage: PropTypes.string,
-  httpOptions: PropTypes.shape({
-    url: PropTypes.string.isRequired,
-    method: PropTypes.oneOf(['POST', 'PUT', 'PATCH']),
-    fileInputName: PropTypes.string,
-    data: PropTypes.object,
-    headers: PropTypes.object
-  }),
-  /**
-   * You can provide a fetcher function with the same interface as the global fetch function, which is used by default.
-   * function fetcher(input: RequestInfo, init?: RequestInit): Promise<Response>
-   */
-  fetcher: PropTypes.func,
-  maxSize: PropTypes.number,
-  onCancel: PropTypes.func,
-  onFailure: PropTypes.func,
-  onStart: PropTypes.func,
-  onSuccess: PropTypes.func,
-  psButtonText: PropTypes.string,
-  psButtonDisabled: PropTypes.bool,
-  psProcessingText: PropTypes.string,
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  /**
-   * You can provide multiple rules separated by comma, e.g.: "application/pdf,image/*".
-   * Using "*" will allow every file type to be uploaded.
-   */
-  usAccept: PropTypes.string,
-  usButtonText: PropTypes.string,
-  usDisabled: PropTypes.bool,
-  usDropMessage: PropTypes.string,
-  usHelpImage: PropTypes.node,
-  usLabel: PropTypes.string,
-  usPlaceholder: PropTypes.string,
-  uploadStep: PropTypes.oneOf(['uploadImageStep', 'mediaUploadStep'])
-};
-Upload.defaultProps = {
-  animationDelay: 700,
-  csButtonText: undefined,
-  csFailureText: undefined,
-  csSuccessText: undefined,
-  csTooLargeMessage: undefined,
-  csWrongTypeMessage: undefined,
-  httpOptions: null,
-  maxSize: MAX_SIZE_DEFAULT,
-  onCancel: null,
-  onFailure: null,
-  onStart: null,
-  onSuccess: null,
-  psButtonText: undefined,
-  psButtonDisabled: false,
-  psProcessingText: undefined,
-  size: 'md',
-  usAccept: 'image/*',
-  usButtonText: undefined,
-  usDisabled: false,
-  usDropMessage: undefined,
-  usHelpImage: '',
-  usLabel: '',
-  usPlaceholder: undefined,
-  uploadStep: UploadStep.UPLOAD_IMAGE_STEP
-};
 var Upload$1 = injectIntl(Upload);
 
 var MESSAGES$2 = defineMessages({
@@ -13442,7 +13193,7 @@ const UploadInput = ({
           name
         } = file;
         const id = generateFileId(file);
-        const allowedFileTypes = Array.isArray(fileTypes) ? fileTypes.join(',') : fileTypes;
+        const allowedFileTypes = typeof fileTypes === 'string' ? fileTypes : fileTypes.join(',');
         // Check if file type is valid
         if (!isTypeValid(file, allowedFileTypes)) {
           handleFileUploadFailure(file, formatMessage(MESSAGES$2.fileTypeNotSupported));