@transferwise/components 46.53.0 → 46.54.0

package/build/upload/steps/completeStep/completeStep.js

@@ -3,20 +3,15 @@
 var icons = require('@transferwise/icons');
 var Body = require('../../../body/Body.js');
 var Button = require('../../../button/Button.js');
-var StatusIcon = require('../../../statusIcon/StatusIcon.js');
 var Title = require('../../../title/Title.js');
 var jsxRuntime = require('react/jsx-runtime');
-var sentiment = require('../../../common/propsValues/sentiment.js');
-var size = require('../../../common/propsValues/size.js');
 var typography = require('../../../common/propsValues/typography.js');
 
 function CompleteStep({
   csButtonText,
-  csFailureText,
   csSuccessText,
   fileName,
   isComplete,
-  isError,
   isImage,
   onClear,
   uploadedImage
@@ -26,34 +21,24 @@ function CompleteStep({
     "aria-hidden": !isComplete,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "droppable-card-content",
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "droppable-card-content d-flex flex-column align-items-center",
         "aria-live": "polite",
-        children: isError ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
-            size: size.Size.LARGE,
-            sentiment: sentiment.Sentiment.NEGATIVE
-          }), csFailureText && /*#__PURE__*/jsxRuntime.jsx("p", {
-            className: "m-t-2 m-b-0",
-            children: csFailureText
-          })]
-        }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [isImage && uploadedImage ? /*#__PURE__*/jsxRuntime.jsx("img", {
-            src: uploadedImage,
-            alt: "OK",
-            className: "thumbnail "
-          }) : /*#__PURE__*/jsxRuntime.jsx(icons.Document, {}), fileName && /*#__PURE__*/jsxRuntime.jsx(Body, {
-            as: "p",
-            className: "m-b-0",
-            children: fileName
-          }), csSuccessText && /*#__PURE__*/jsxRuntime.jsx(Title, {
-            className: "caption m-t-1",
-            type: typography.Typography.TITLE_BODY,
-            children: csSuccessText
-          })]
-        })
+        children: [isImage && uploadedImage ? /*#__PURE__*/jsxRuntime.jsx("img", {
+          src: uploadedImage,
+          alt: "OK",
+          className: "thumbnail "
+        }) : /*#__PURE__*/jsxRuntime.jsx(icons.Document, {}), fileName && /*#__PURE__*/jsxRuntime.jsx(Body, {
+          as: "p",
+          className: "m-b-0",
+          children: fileName
+        }), csSuccessText && /*#__PURE__*/jsxRuntime.jsx(Title, {
+          className: "caption m-t-1",
+          type: typography.Typography.TITLE_BODY,
+          children: csSuccessText
+        })]
       }), csButtonText && /*#__PURE__*/jsxRuntime.jsx(Button, {
-        className: isError ? 'm-t-2' : 'm-t-1',
+        className: "m-t-1",
         onClick: onClear,
         children: csButtonText
       })]

package/build/upload/steps/completeStep/completeStep.js.map

@@ -1 +1 @@
-{"version":3,"file":"completeStep.js","sources":["../../../../src/upload/steps/completeStep/completeStep.tsx"],"sourcesContent":["import { Document as DocumentIcon } from '@transferwise/icons';\n\nimport { Typography } from '../../..';\nimport Body from '../../../body';\nimport Button from '../../../button';\nimport { Sentiment, Size } from '../../../common';\nimport StatusIcon from '../../../statusIcon';\nimport Title from '../../../title';\n\nexport interface CompleteStepProps {\n  csButtonText: string;\n  csSuccessText: string;\n  csFailureText: string;\n  fileName: string;\n  isComplete: boolean;\n  isError: boolean;\n  isImage: boolean;\n  uploadedImage?: string;\n  onClear: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport default function CompleteStep({\n  csButtonText,\n  csFailureText,\n  csSuccessText,\n  fileName,\n  isComplete,\n  isError,\n  isImage,\n  onClear,\n  uploadedImage,\n}: CompleteStepProps) {\n  return (\n    <div className=\"droppable-complete-card droppable-card\" aria-hidden={!isComplete}>\n      <div className=\"droppable-card-content\">\n        <div\n          className=\"droppable-card-content d-flex flex-column align-items-center\"\n          aria-live=\"polite\"\n        >\n          {isError ? (\n            <>\n              <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} />\n              {csFailureText && <p className=\"m-t-2 m-b-0\">{csFailureText}</p>}\n            </>\n          ) : (\n            <>\n              {isImage && uploadedImage ? (\n                <img src={uploadedImage} alt=\"OK\" className=\"thumbnail \" />\n              ) : (\n                <DocumentIcon />\n              )}\n\n              {fileName && (\n                <Body as=\"p\" className=\"m-b-0\">\n                  {fileName}\n                </Body>\n              )}\n              {csSuccessText && (\n                <Title className=\"caption m-t-1\" type={Typography.TITLE_BODY}>\n                  {csSuccessText}\n                </Title>\n              )}\n            </>\n          )}\n        </div>\n        {csButtonText && (\n          <Button className={isError ? 'm-t-2' : 'm-t-1'} onClick={onClear}>\n            {csButtonText}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["CompleteStep","csButtonText","csFailureText","csSuccessText","fileName","isComplete","isError","isImage","onClear","uploadedImage","_jsx","className","children","_jsxs","_Fragment","StatusIcon","size","Size","LARGE","sentiment","Sentiment","NEGATIVE","src","alt","DocumentIcon","Body","as","Title","type","Typography","TITLE_BODY","Button","onClick"],"mappings":";;;;;;;;;;;;AAqBwB,SAAAA,YAAYA,CAAC;EACnCC,YAAY;EACZC,aAAa;EACbC,aAAa;EACbC,QAAQ;EACRC,UAAU;EACVC,OAAO;EACPC,OAAO;EACPC,OAAO;AACPC,EAAAA,aAAAA;AACkB,CAAA,EAAA;AAClB,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,wCAAwC;AAAC,IAAA,aAAA,EAAa,CAACN,UAAW;AAAAO,IAAAA,QAAA,eAC/EC,eAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,wBAAwB;AAAAC,MAAAA,QAAA,gBACrCF,cAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,SAAS,EAAC,8DAA8D;AACxE,QAAA,WAAA,EAAU,QAAQ;AAAAC,QAAAA,QAAA,EAEjBN,OAAO,gBACNO,eAAA,CAAAC,mBAAA,EAAA;UAAAF,QAAA,EAAA,cACEF,cAAA,CAACK,UAAU,EAAA;YAACC,IAAI,EAAEC,SAAI,CAACC,KAAM;YAACC,SAAS,EAAEC,mBAAS,CAACC,QAAAA;AAAS,WAC5D,CAAA,EAACnB,aAAa,iBAAIQ,cAAA,CAAA,GAAA,EAAA;AAAGC,YAAAA,SAAS,EAAC,aAAa;AAAAC,YAAAA,QAAA,EAAEV,aAAAA;AAAa,WAAI,CAAC,CAAA;AAAA,SAClE,CAAG,gBAEHW,eAAA,CAAAC,mBAAA,EAAA;AAAAF,UAAAA,QAAA,EACGL,CAAAA,OAAO,IAAIE,aAAa,gBACvBC,cAAA,CAAA,KAAA,EAAA;AAAKY,YAAAA,GAAG,EAAEb,aAAc;AAACc,YAAAA,GAAG,EAAC,IAAI;AAACZ,YAAAA,SAAS,EAAC,YAAA;AAAY,WAAA,CAAG,gBAE3DD,cAAA,CAACc,cAAY,EAAA,EAAA,CACd,EAEApB,QAAQ,iBACPM,cAAA,CAACe,IAAI,EAAA;AAACC,YAAAA,EAAE,EAAC,GAAG;AAACf,YAAAA,SAAS,EAAC,OAAO;AAAAC,YAAAA,QAAA,EAC3BR,QAAAA;AAAQ,WACL,CACP,EACAD,aAAa,iBACZO,cAAA,CAACiB,KAAK,EAAA;AAAChB,YAAAA,SAAS,EAAC,eAAe;YAACiB,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAAAlB,YAAAA,QAAA,EAC1DT,aAAAA;AAAa,WACT,CACR,CAAA;SACH,CAAA;AACD,OACE,CACL,EAACF,YAAY,iBACXS,cAAA,CAACqB,MAAM,EAAA;AAACpB,QAAAA,SAAS,EAAEL,OAAO,GAAG,OAAO,GAAG,OAAQ;AAAC0B,QAAAA,OAAO,EAAExB,OAAQ;AAAAI,QAAAA,QAAA,EAC9DX,YAAAA;AAAY,OACP,CACT,CAAA;KACE,CAAA;AACP,GAAK,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"completeStep.js","sources":["../../../../src/upload/steps/completeStep/completeStep.tsx"],"sourcesContent":["import { Document as DocumentIcon } from '@transferwise/icons';\n\nimport { Typography } from '../../..';\nimport Body from '../../../body';\nimport Button from '../../../button';\nimport Title from '../../../title';\n\nexport interface CompleteStepProps {\n  csButtonText: string;\n  csSuccessText: string;\n  fileName: string;\n  isComplete: boolean;\n  isImage: boolean;\n  uploadedImage?: string;\n  onClear: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport default function CompleteStep({\n  csButtonText,\n  csSuccessText,\n  fileName,\n  isComplete,\n  isImage,\n  onClear,\n  uploadedImage,\n}: CompleteStepProps) {\n  return (\n    <div className=\"droppable-complete-card droppable-card\" aria-hidden={!isComplete}>\n      <div className=\"droppable-card-content\">\n        <div\n          className=\"droppable-card-content d-flex flex-column align-items-center\"\n          aria-live=\"polite\"\n        >\n          {isImage && uploadedImage ? (\n            <img src={uploadedImage} alt=\"OK\" className=\"thumbnail \" />\n          ) : (\n            <DocumentIcon />\n          )}\n\n          {fileName && (\n            <Body as=\"p\" className=\"m-b-0\">\n              {fileName}\n            </Body>\n          )}\n          {csSuccessText && (\n            <Title className=\"caption m-t-1\" type={Typography.TITLE_BODY}>\n              {csSuccessText}\n            </Title>\n          )}\n        </div>\n        {csButtonText && (\n          <Button className=\"m-t-1\" onClick={onClear}>\n            {csButtonText}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["CompleteStep","csButtonText","csSuccessText","fileName","isComplete","isImage","onClear","uploadedImage","_jsx","className","children","_jsxs","src","alt","DocumentIcon","Body","as","Title","type","Typography","TITLE_BODY","Button","onClick"],"mappings":";;;;;;;;;AAiBc,SAAUA,YAAYA,CAAC;EACnCC,YAAY;EACZC,aAAa;EACbC,QAAQ;EACRC,UAAU;EACVC,OAAO;EACPC,OAAO;AACPC,EAAAA,aAAAA;AACkB,CAAA,EAAA;AAClB,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,wCAAwC;AAAC,IAAA,aAAA,EAAa,CAACL,UAAW;AAAAM,IAAAA,QAAA,eAC/EC,eAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,wBAAwB;AAAAC,MAAAA,QAAA,gBACrCC,eAAA,CAAA,KAAA,EAAA;AACEF,QAAAA,SAAS,EAAC,8DAA8D;AACxE,QAAA,WAAA,EAAU,QAAQ;AAAAC,QAAAA,QAAA,EAEjBL,CAAAA,OAAO,IAAIE,aAAa,gBACvBC,cAAA,CAAA,KAAA,EAAA;AAAKI,UAAAA,GAAG,EAAEL,aAAc;AAACM,UAAAA,GAAG,EAAC,IAAI;AAACJ,UAAAA,SAAS,EAAC,YAAA;AAAY,SAAA,CAAG,gBAE3DD,cAAA,CAACM,cAAY,EAAA,EAAA,CACd,EAEAX,QAAQ,iBACPK,cAAA,CAACO,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,GAAG;AAACP,UAAAA,SAAS,EAAC,OAAO;AAAAC,UAAAA,QAAA,EAC3BP,QAAAA;AAAQ,SACL,CACP,EACAD,aAAa,iBACZM,cAAA,CAACS,KAAK,EAAA;AAACR,UAAAA,SAAS,EAAC,eAAe;UAACS,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAAAV,UAAAA,QAAA,EAC1DR,aAAAA;AAAa,SACT,CACR,CAAA;AAAA,OACE,CACL,EAACD,YAAY,iBACXO,cAAA,CAACa,MAAM,EAAA;AAACZ,QAAAA,SAAS,EAAC,OAAO;AAACa,QAAAA,OAAO,EAAEhB,OAAQ;AAAAI,QAAAA,QAAA,EACxCT,YAAAA;AAAY,OACP,CACT,CAAA;KACE,CAAA;AACP,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/upload/steps/completeStep/completeStep.mjs

@@ -1,20 +1,15 @@
 import { Document } from '@transferwise/icons';
 import Body from '../../../body/Body.mjs';
 import Button from '../../../button/Button.mjs';
-import StatusIcon from '../../../statusIcon/StatusIcon.mjs';
 import Title from '../../../title/Title.mjs';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Sentiment } from '../../../common/propsValues/sentiment.mjs';
-import { Size } from '../../../common/propsValues/size.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Typography } from '../../../common/propsValues/typography.mjs';
 
 function CompleteStep({
   csButtonText,
-  csFailureText,
   csSuccessText,
   fileName,
   isComplete,
-  isError,
   isImage,
   onClear,
   uploadedImage
@@ -24,34 +19,24 @@ function CompleteStep({
     "aria-hidden": !isComplete,
     children: /*#__PURE__*/jsxs("div", {
       className: "droppable-card-content",
-      children: [/*#__PURE__*/jsx("div", {
+      children: [/*#__PURE__*/jsxs("div", {
         className: "droppable-card-content d-flex flex-column align-items-center",
         "aria-live": "polite",
-        children: isError ? /*#__PURE__*/jsxs(Fragment, {
-          children: [/*#__PURE__*/jsx(StatusIcon, {
-            size: Size.LARGE,
-            sentiment: Sentiment.NEGATIVE
-          }), csFailureText && /*#__PURE__*/jsx("p", {
-            className: "m-t-2 m-b-0",
-            children: csFailureText
-          })]
-        }) : /*#__PURE__*/jsxs(Fragment, {
-          children: [isImage && uploadedImage ? /*#__PURE__*/jsx("img", {
-            src: uploadedImage,
-            alt: "OK",
-            className: "thumbnail "
-          }) : /*#__PURE__*/jsx(Document, {}), fileName && /*#__PURE__*/jsx(Body, {
-            as: "p",
-            className: "m-b-0",
-            children: fileName
-          }), csSuccessText && /*#__PURE__*/jsx(Title, {
-            className: "caption m-t-1",
-            type: Typography.TITLE_BODY,
-            children: csSuccessText
-          })]
-        })
+        children: [isImage && uploadedImage ? /*#__PURE__*/jsx("img", {
+          src: uploadedImage,
+          alt: "OK",
+          className: "thumbnail "
+        }) : /*#__PURE__*/jsx(Document, {}), fileName && /*#__PURE__*/jsx(Body, {
+          as: "p",
+          className: "m-b-0",
+          children: fileName
+        }), csSuccessText && /*#__PURE__*/jsx(Title, {
+          className: "caption m-t-1",
+          type: Typography.TITLE_BODY,
+          children: csSuccessText
+        })]
       }), csButtonText && /*#__PURE__*/jsx(Button, {
-        className: isError ? 'm-t-2' : 'm-t-1',
+        className: "m-t-1",
         onClick: onClear,
         children: csButtonText
       })]

package/build/upload/steps/completeStep/completeStep.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"completeStep.mjs","sources":["../../../../src/upload/steps/completeStep/completeStep.tsx"],"sourcesContent":["import { Document as DocumentIcon } from '@transferwise/icons';\n\nimport { Typography } from '../../..';\nimport Body from '../../../body';\nimport Button from '../../../button';\nimport { Sentiment, Size } from '../../../common';\nimport StatusIcon from '../../../statusIcon';\nimport Title from '../../../title';\n\nexport interface CompleteStepProps {\n  csButtonText: string;\n  csSuccessText: string;\n  csFailureText: string;\n  fileName: string;\n  isComplete: boolean;\n  isError: boolean;\n  isImage: boolean;\n  uploadedImage?: string;\n  onClear: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport default function CompleteStep({\n  csButtonText,\n  csFailureText,\n  csSuccessText,\n  fileName,\n  isComplete,\n  isError,\n  isImage,\n  onClear,\n  uploadedImage,\n}: CompleteStepProps) {\n  return (\n    <div className=\"droppable-complete-card droppable-card\" aria-hidden={!isComplete}>\n      <div className=\"droppable-card-content\">\n        <div\n          className=\"droppable-card-content d-flex flex-column align-items-center\"\n          aria-live=\"polite\"\n        >\n          {isError ? (\n            <>\n              <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} />\n              {csFailureText && <p className=\"m-t-2 m-b-0\">{csFailureText}</p>}\n            </>\n          ) : (\n            <>\n              {isImage && uploadedImage ? (\n                <img src={uploadedImage} alt=\"OK\" className=\"thumbnail \" />\n              ) : (\n                <DocumentIcon />\n              )}\n\n              {fileName && (\n                <Body as=\"p\" className=\"m-b-0\">\n                  {fileName}\n                </Body>\n              )}\n              {csSuccessText && (\n                <Title className=\"caption m-t-1\" type={Typography.TITLE_BODY}>\n                  {csSuccessText}\n                </Title>\n              )}\n            </>\n          )}\n        </div>\n        {csButtonText && (\n          <Button className={isError ? 'm-t-2' : 'm-t-1'} onClick={onClear}>\n            {csButtonText}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["CompleteStep","csButtonText","csFailureText","csSuccessText","fileName","isComplete","isError","isImage","onClear","uploadedImage","_jsx","className","children","_jsxs","_Fragment","StatusIcon","size","Size","LARGE","sentiment","Sentiment","NEGATIVE","src","alt","DocumentIcon","Body","as","Title","type","Typography","TITLE_BODY","Button","onClick"],"mappings":";;;;;;;;;;AAqBwB,SAAAA,YAAYA,CAAC;EACnCC,YAAY;EACZC,aAAa;EACbC,aAAa;EACbC,QAAQ;EACRC,UAAU;EACVC,OAAO;EACPC,OAAO;EACPC,OAAO;AACPC,EAAAA,aAAAA;AACkB,CAAA,EAAA;AAClB,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,wCAAwC;AAAC,IAAA,aAAA,EAAa,CAACN,UAAW;AAAAO,IAAAA,QAAA,eAC/EC,IAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,wBAAwB;AAAAC,MAAAA,QAAA,gBACrCF,GAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,SAAS,EAAC,8DAA8D;AACxE,QAAA,WAAA,EAAU,QAAQ;AAAAC,QAAAA,QAAA,EAEjBN,OAAO,gBACNO,IAAA,CAAAC,QAAA,EAAA;UAAAF,QAAA,EAAA,cACEF,GAAA,CAACK,UAAU,EAAA;YAACC,IAAI,EAAEC,IAAI,CAACC,KAAM;YAACC,SAAS,EAAEC,SAAS,CAACC,QAAAA;AAAS,WAC5D,CAAA,EAACnB,aAAa,iBAAIQ,GAAA,CAAA,GAAA,EAAA;AAAGC,YAAAA,SAAS,EAAC,aAAa;AAAAC,YAAAA,QAAA,EAAEV,aAAAA;AAAa,WAAI,CAAC,CAAA;AAAA,SAClE,CAAG,gBAEHW,IAAA,CAAAC,QAAA,EAAA;AAAAF,UAAAA,QAAA,EACGL,CAAAA,OAAO,IAAIE,aAAa,gBACvBC,GAAA,CAAA,KAAA,EAAA;AAAKY,YAAAA,GAAG,EAAEb,aAAc;AAACc,YAAAA,GAAG,EAAC,IAAI;AAACZ,YAAAA,SAAS,EAAC,YAAA;AAAY,WAAA,CAAG,gBAE3DD,GAAA,CAACc,QAAY,EAAA,EAAA,CACd,EAEApB,QAAQ,iBACPM,GAAA,CAACe,IAAI,EAAA;AAACC,YAAAA,EAAE,EAAC,GAAG;AAACf,YAAAA,SAAS,EAAC,OAAO;AAAAC,YAAAA,QAAA,EAC3BR,QAAAA;AAAQ,WACL,CACP,EACAD,aAAa,iBACZO,GAAA,CAACiB,KAAK,EAAA;AAAChB,YAAAA,SAAS,EAAC,eAAe;YAACiB,IAAI,EAAEC,UAAU,CAACC,UAAW;AAAAlB,YAAAA,QAAA,EAC1DT,aAAAA;AAAa,WACT,CACR,CAAA;SACH,CAAA;AACD,OACE,CACL,EAACF,YAAY,iBACXS,GAAA,CAACqB,MAAM,EAAA;AAACpB,QAAAA,SAAS,EAAEL,OAAO,GAAG,OAAO,GAAG,OAAQ;AAAC0B,QAAAA,OAAO,EAAExB,OAAQ;AAAAI,QAAAA,QAAA,EAC9DX,YAAAA;AAAY,OACP,CACT,CAAA;KACE,CAAA;AACP,GAAK,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"completeStep.mjs","sources":["../../../../src/upload/steps/completeStep/completeStep.tsx"],"sourcesContent":["import { Document as DocumentIcon } from '@transferwise/icons';\n\nimport { Typography } from '../../..';\nimport Body from '../../../body';\nimport Button from '../../../button';\nimport Title from '../../../title';\n\nexport interface CompleteStepProps {\n  csButtonText: string;\n  csSuccessText: string;\n  fileName: string;\n  isComplete: boolean;\n  isImage: boolean;\n  uploadedImage?: string;\n  onClear: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport default function CompleteStep({\n  csButtonText,\n  csSuccessText,\n  fileName,\n  isComplete,\n  isImage,\n  onClear,\n  uploadedImage,\n}: CompleteStepProps) {\n  return (\n    <div className=\"droppable-complete-card droppable-card\" aria-hidden={!isComplete}>\n      <div className=\"droppable-card-content\">\n        <div\n          className=\"droppable-card-content d-flex flex-column align-items-center\"\n          aria-live=\"polite\"\n        >\n          {isImage && uploadedImage ? (\n            <img src={uploadedImage} alt=\"OK\" className=\"thumbnail \" />\n          ) : (\n            <DocumentIcon />\n          )}\n\n          {fileName && (\n            <Body as=\"p\" className=\"m-b-0\">\n              {fileName}\n            </Body>\n          )}\n          {csSuccessText && (\n            <Title className=\"caption m-t-1\" type={Typography.TITLE_BODY}>\n              {csSuccessText}\n            </Title>\n          )}\n        </div>\n        {csButtonText && (\n          <Button className=\"m-t-1\" onClick={onClear}>\n            {csButtonText}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["CompleteStep","csButtonText","csSuccessText","fileName","isComplete","isImage","onClear","uploadedImage","_jsx","className","children","_jsxs","src","alt","DocumentIcon","Body","as","Title","type","Typography","TITLE_BODY","Button","onClick"],"mappings":";;;;;;;AAiBc,SAAUA,YAAYA,CAAC;EACnCC,YAAY;EACZC,aAAa;EACbC,QAAQ;EACRC,UAAU;EACVC,OAAO;EACPC,OAAO;AACPC,EAAAA,aAAAA;AACkB,CAAA,EAAA;AAClB,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,wCAAwC;AAAC,IAAA,aAAA,EAAa,CAACL,UAAW;AAAAM,IAAAA,QAAA,eAC/EC,IAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,wBAAwB;AAAAC,MAAAA,QAAA,gBACrCC,IAAA,CAAA,KAAA,EAAA;AACEF,QAAAA,SAAS,EAAC,8DAA8D;AACxE,QAAA,WAAA,EAAU,QAAQ;AAAAC,QAAAA,QAAA,EAEjBL,CAAAA,OAAO,IAAIE,aAAa,gBACvBC,GAAA,CAAA,KAAA,EAAA;AAAKI,UAAAA,GAAG,EAAEL,aAAc;AAACM,UAAAA,GAAG,EAAC,IAAI;AAACJ,UAAAA,SAAS,EAAC,YAAA;AAAY,SAAA,CAAG,gBAE3DD,GAAA,CAACM,QAAY,EAAA,EAAA,CACd,EAEAX,QAAQ,iBACPK,GAAA,CAACO,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,GAAG;AAACP,UAAAA,SAAS,EAAC,OAAO;AAAAC,UAAAA,QAAA,EAC3BP,QAAAA;AAAQ,SACL,CACP,EACAD,aAAa,iBACZM,GAAA,CAACS,KAAK,EAAA;AAACR,UAAAA,SAAS,EAAC,eAAe;UAACS,IAAI,EAAEC,UAAU,CAACC,UAAW;AAAAV,UAAAA,QAAA,EAC1DR,aAAAA;AAAa,SACT,CACR,CAAA;AAAA,OACE,CACL,EAACD,YAAY,iBACXO,GAAA,CAACa,MAAM,EAAA;AAACZ,QAAAA,SAAS,EAAC,OAAO;AAACa,QAAAA,OAAO,EAAEhB,OAAQ;AAAAI,QAAAA,QAAA,EACxCT,YAAAA;AAAY,OACP,CACT,CAAA;KACE,CAAA;AACP,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/upload/steps/uploadImageStep/uploadImageStep.js

@@ -2,7 +2,11 @@
 
 var icons = require('@transferwise/icons');
 var React = require('react');
+var StatusIcon = require('../../../statusIcon/StatusIcon.js');
+var InlineAlert = require('../../../inlineAlert/InlineAlert.js');
 var jsxRuntime = require('react/jsx-runtime');
+var sentiment = require('../../../common/propsValues/sentiment.js');
+var size = require('../../../common/propsValues/size.js');
 
 class UploadImageStep extends React.PureComponent {
   uploadInputRef = /*#__PURE__*/React.createRef();
@@ -20,6 +24,18 @@ class UploadImageStep extends React.PureComponent {
       usHelpImage,
       usLabel
     } = this.props;
+    const {
+      errorMessage
+    } = this.props;
+    if (errorMessage) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "d-flex flex-column align-items-center",
+        children: /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
+          size: size.Size.LARGE,
+          sentiment: sentiment.Sentiment.NEGATIVE
+        })
+      });
+    }
     if (!usHelpImage) {
       return /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "circle circle-sm circle-inverse p-t-1",
@@ -44,41 +60,49 @@ class UploadImageStep extends React.PureComponent {
       usButtonText,
       usDisabled,
       usLabel,
-      usPlaceholder
+      usPlaceholder,
+      errorMessage
     } = this.props;
     return /*#__PURE__*/jsxRuntime.jsx("div", {
-      children: /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "droppable-default-card",
-        "aria-hidden": isComplete,
-        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "droppable-card-content",
-          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "m-b-3",
-            children: this.getImage()
-          }), usLabel && /*#__PURE__*/jsxRuntime.jsx("h4", {
-            className: "np-text-title-body m-b-1",
-            children: usLabel
-          }), usPlaceholder && /*#__PURE__*/jsxRuntime.jsx("p", {
-            className: "np-text-body-large m-b-3",
-            children: String(usPlaceholder)
-          }), /*#__PURE__*/jsxRuntime.jsxs("label", {
-            className: `btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`,
-            children: [usButtonText ? /*#__PURE__*/jsxRuntime.jsx("span", {
-              children: usButtonText
-            }) : /*#__PURE__*/jsxRuntime.jsx(icons.Upload, {
-              size: 24,
-              className: "m-r-0"
-            }), /*#__PURE__*/jsxRuntime.jsx("input", {
-              ref: this.uploadInputRef,
-              type: "file",
-              accept: usAccept === '*' ? undefined : usAccept,
-              className: "tw-droppable-input hidden",
-              disabled: usDisabled,
-              name: "file-upload",
-              onChange: () => this.onManualUpload()
-            })]
+      className: "droppable-default-card",
+      "aria-hidden": isComplete,
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "droppable-card-content",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "m-b-3",
+          children: this.getImage()
+        }), usLabel && /*#__PURE__*/jsxRuntime.jsx("h4", {
+          className: "np-text-title-body m-b-1",
+          children: usLabel
+        }), usPlaceholder && /*#__PURE__*/jsxRuntime.jsx("p", {
+          className: "np-text-body-large m-b-3",
+          children: String(usPlaceholder)
+        }), /*#__PURE__*/jsxRuntime.jsxs("label", {
+          className: `btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`,
+          children: [usButtonText ? /*#__PURE__*/jsxRuntime.jsx("span", {
+            children: usButtonText
+          }) : /*#__PURE__*/jsxRuntime.jsx(icons.Upload, {
+            size: 24,
+            className: "m-r-0"
+          }), /*#__PURE__*/jsxRuntime.jsx("input", {
+            ref: this.uploadInputRef,
+            type: "file",
+            accept: usAccept === '*' ? undefined : usAccept,
+            className: "tw-droppable-input hidden",
+            disabled: usDisabled,
+            name: "file-upload",
+            onChange: () => this.onManualUpload()
           })]
-        })
+        }), errorMessage && /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "upload-error-message",
+          children: /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "m-t-3 has-error",
+            children: /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
+              type: sentiment.Sentiment.NEGATIVE,
+              children: errorMessage
+            })
+          })
+        })]
       })
     });
   }

package/build/upload/steps/uploadImageStep/uploadImageStep.js.map

@@ -1 +1 @@
-{"version":3,"file":"uploadImageStep.js","sources":["../../../../src/upload/steps/uploadImageStep/uploadImageStep.tsx"],"sourcesContent":["import { Upload as UploadIcon } from '@transferwise/icons';\nimport { createRef, PureComponent } from 'react';\n\nexport interface UploadImageStepProps {\n  fileDropped: (file: File) => void;\n  isComplete: boolean;\n  usAccept: string;\n  usButtonText: string;\n  usDisabled: boolean;\n  usHelpImage: React.ReactNode;\n  usLabel: string;\n  usPlaceholder: string;\n}\n\nexport default class UploadImageStep extends PureComponent<UploadImageStepProps> {\n  uploadInputRef = createRef<HTMLInputElement>();\n\n  onManualUpload = () => {\n    const { fileDropped } = this.props;\n    const file = this.uploadInputRef.current?.files?.[0];\n    if (file != null) {\n      fileDropped(file);\n    }\n  };\n\n  getImage = () => {\n    const { usHelpImage, usLabel } = this.props;\n\n    if (!usHelpImage) {\n      return (\n        <div className=\"circle circle-sm circle-inverse p-t-1\">\n          <UploadIcon size={24} />\n        </div>\n      );\n    }\n\n    if (typeof usHelpImage === 'string') {\n      return <img src={usHelpImage} alt={usLabel} className=\"thumbnail text-xs-center\" />;\n    }\n\n    return usHelpImage;\n  };\n\n  render() {\n    const { isComplete, usAccept, usButtonText, usDisabled, usLabel, usPlaceholder } = this.props;\n\n    return (\n      <div>\n        <div className=\"droppable-default-card\" aria-hidden={isComplete}>\n          <div className=\"droppable-card-content\">\n            <div className=\"m-b-3\">{this.getImage()}</div>\n            {usLabel && <h4 className=\"np-text-title-body m-b-1\">{usLabel}</h4>}\n            {usPlaceholder && <p className=\"np-text-body-large m-b-3\">{String(usPlaceholder)}</p>}\n            <label className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}>\n              {usButtonText ? (\n                <span>{usButtonText}</span>\n              ) : (\n                <UploadIcon size={24} className=\"m-r-0\" />\n              )}\n              <input\n                ref={this.uploadInputRef}\n                type=\"file\"\n                accept={usAccept === '*' ? undefined : usAccept}\n                className=\"tw-droppable-input hidden\"\n                disabled={usDisabled}\n                name=\"file-upload\"\n                onChange={() => this.onManualUpload()}\n              />\n            </label>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":["UploadImageStep","PureComponent","uploadInputRef","createRef","onManualUpload","fileDropped","props","file","current","files","getImage","usHelpImage","usLabel","_jsx","className","children","UploadIcon","size","src","alt","render","isComplete","usAccept","usButtonText","usDisabled","usPlaceholder","_jsxs","String","ref","type","accept","undefined","disabled","name","onChange"],"mappings":"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"}
+{"version":3,"file":"uploadImageStep.js","sources":["../../../../src/upload/steps/uploadImageStep/uploadImageStep.tsx"],"sourcesContent":["import { Upload as UploadIcon } from '@transferwise/icons';\nimport { createRef, PureComponent } from 'react';\nimport StatusIcon from '../../../statusIcon';\nimport { Sentiment, Size } from '../../../common';\nimport InlineAlert from '../../../inlineAlert';\n\nexport interface UploadImageStepProps {\n  fileDropped: (file: File) => void;\n  isComplete: boolean;\n  usAccept: string;\n  usButtonText: string;\n  usDisabled: boolean;\n  usHelpImage: React.ReactNode;\n  usLabel: string;\n  usPlaceholder: string;\n  errorMessage?: string | string[];\n}\n\nexport default class UploadImageStep extends PureComponent<UploadImageStepProps> {\n  uploadInputRef = createRef<HTMLInputElement>();\n\n  onManualUpload = () => {\n    const { fileDropped } = this.props;\n    const file = this.uploadInputRef.current?.files?.[0];\n    if (file != null) {\n      fileDropped(file);\n    }\n  };\n\n  getImage = () => {\n    const { usHelpImage, usLabel } = this.props;\n    const { errorMessage } = this.props;\n\n    if (errorMessage) {\n      return (\n        <div className=\"d-flex flex-column align-items-center\">\n          <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} />\n        </div>\n      );\n    }\n\n    if (!usHelpImage) {\n      return (\n        <div className=\"circle circle-sm circle-inverse p-t-1\">\n          <UploadIcon size={24} />\n        </div>\n      );\n    }\n\n    if (typeof usHelpImage === 'string') {\n      return <img src={usHelpImage} alt={usLabel} className=\"thumbnail text-xs-center\" />;\n    }\n\n    return usHelpImage;\n  };\n\n  render() {\n    const { isComplete, usAccept, usButtonText, usDisabled, usLabel, usPlaceholder, errorMessage } =\n      this.props;\n\n    return (\n      <div className=\"droppable-default-card\" aria-hidden={isComplete}>\n        <div className=\"droppable-card-content\">\n          <div className=\"m-b-3\">{this.getImage()}</div>\n          {usLabel && <h4 className=\"np-text-title-body m-b-1\">{usLabel}</h4>}\n          {usPlaceholder && <p className=\"np-text-body-large m-b-3\">{String(usPlaceholder)}</p>}\n          <label className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}>\n            {usButtonText ? (\n              <span>{usButtonText}</span>\n            ) : (\n              <UploadIcon size={24} className=\"m-r-0\" />\n            )}\n            <input\n              ref={this.uploadInputRef}\n              type=\"file\"\n              accept={usAccept === '*' ? undefined : usAccept}\n              className=\"tw-droppable-input hidden\"\n              disabled={usDisabled}\n              name=\"file-upload\"\n              onChange={() => this.onManualUpload()}\n            />\n          </label>\n          {errorMessage && (\n            <div className=\"upload-error-message\">\n              <div className=\"m-t-3 has-error\">\n                <InlineAlert type={Sentiment.NEGATIVE}>{errorMessage}</InlineAlert>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":["UploadImageStep","PureComponent","uploadInputRef","createRef","onManualUpload","fileDropped","props","file","current","files","getImage","usHelpImage","usLabel","errorMessage","_jsx","className","children","StatusIcon","size","Size","LARGE","sentiment","Sentiment","NEGATIVE","UploadIcon","src","alt","render","isComplete","usAccept","usButtonText","usDisabled","usPlaceholder","_jsxs","String","ref","type","accept","undefined","disabled","name","onChange","InlineAlert"],"mappings":"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"}

package/build/upload/steps/uploadImageStep/uploadImageStep.mjs

@@ -1,6 +1,10 @@
 import { Upload } from '@transferwise/icons';
 import { PureComponent, createRef } from 'react';
+import StatusIcon from '../../../statusIcon/StatusIcon.mjs';
+import InlineAlert from '../../../inlineAlert/InlineAlert.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { Sentiment } from '../../../common/propsValues/sentiment.mjs';
+import { Size } from '../../../common/propsValues/size.mjs';
 
 class UploadImageStep extends PureComponent {
   uploadInputRef = /*#__PURE__*/createRef();
@@ -18,6 +22,18 @@ class UploadImageStep extends PureComponent {
       usHelpImage,
       usLabel
     } = this.props;
+    const {
+      errorMessage
+    } = this.props;
+    if (errorMessage) {
+      return /*#__PURE__*/jsx("div", {
+        className: "d-flex flex-column align-items-center",
+        children: /*#__PURE__*/jsx(StatusIcon, {
+          size: Size.LARGE,
+          sentiment: Sentiment.NEGATIVE
+        })
+      });
+    }
     if (!usHelpImage) {
       return /*#__PURE__*/jsx("div", {
         className: "circle circle-sm circle-inverse p-t-1",
@@ -42,41 +58,49 @@ class UploadImageStep extends PureComponent {
       usButtonText,
       usDisabled,
       usLabel,
-      usPlaceholder
+      usPlaceholder,
+      errorMessage
     } = this.props;
     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: this.getImage()
-          }), usLabel && /*#__PURE__*/jsx("h4", {
-            className: "np-text-title-body m-b-1",
-            children: usLabel
-          }), usPlaceholder && /*#__PURE__*/jsx("p", {
-            className: "np-text-body-large m-b-3",
-            children: String(usPlaceholder)
-          }), /*#__PURE__*/jsxs("label", {
-            className: `btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`,
-            children: [usButtonText ? /*#__PURE__*/jsx("span", {
-              children: usButtonText
-            }) : /*#__PURE__*/jsx(Upload, {
-              size: 24,
-              className: "m-r-0"
-            }), /*#__PURE__*/jsx("input", {
-              ref: this.uploadInputRef,
-              type: "file",
-              accept: usAccept === '*' ? undefined : usAccept,
-              className: "tw-droppable-input hidden",
-              disabled: usDisabled,
-              name: "file-upload",
-              onChange: () => this.onManualUpload()
-            })]
+      className: "droppable-default-card",
+      "aria-hidden": isComplete,
+      children: /*#__PURE__*/jsxs("div", {
+        className: "droppable-card-content",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "m-b-3",
+          children: this.getImage()
+        }), usLabel && /*#__PURE__*/jsx("h4", {
+          className: "np-text-title-body m-b-1",
+          children: usLabel
+        }), usPlaceholder && /*#__PURE__*/jsx("p", {
+          className: "np-text-body-large m-b-3",
+          children: String(usPlaceholder)
+        }), /*#__PURE__*/jsxs("label", {
+          className: `btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`,
+          children: [usButtonText ? /*#__PURE__*/jsx("span", {
+            children: usButtonText
+          }) : /*#__PURE__*/jsx(Upload, {
+            size: 24,
+            className: "m-r-0"
+          }), /*#__PURE__*/jsx("input", {
+            ref: this.uploadInputRef,
+            type: "file",
+            accept: usAccept === '*' ? undefined : usAccept,
+            className: "tw-droppable-input hidden",
+            disabled: usDisabled,
+            name: "file-upload",
+            onChange: () => this.onManualUpload()
           })]
-        })
+        }), errorMessage && /*#__PURE__*/jsx("div", {
+          className: "upload-error-message",
+          children: /*#__PURE__*/jsx("div", {
+            className: "m-t-3 has-error",
+            children: /*#__PURE__*/jsx(InlineAlert, {
+              type: Sentiment.NEGATIVE,
+              children: errorMessage
+            })
+          })
+        })]
       })
     });
   }

package/build/upload/steps/uploadImageStep/uploadImageStep.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"uploadImageStep.mjs","sources":["../../../../src/upload/steps/uploadImageStep/uploadImageStep.tsx"],"sourcesContent":["import { Upload as UploadIcon } from '@transferwise/icons';\nimport { createRef, PureComponent } from 'react';\n\nexport interface UploadImageStepProps {\n  fileDropped: (file: File) => void;\n  isComplete: boolean;\n  usAccept: string;\n  usButtonText: string;\n  usDisabled: boolean;\n  usHelpImage: React.ReactNode;\n  usLabel: string;\n  usPlaceholder: string;\n}\n\nexport default class UploadImageStep extends PureComponent<UploadImageStepProps> {\n  uploadInputRef = createRef<HTMLInputElement>();\n\n  onManualUpload = () => {\n    const { fileDropped } = this.props;\n    const file = this.uploadInputRef.current?.files?.[0];\n    if (file != null) {\n      fileDropped(file);\n    }\n  };\n\n  getImage = () => {\n    const { usHelpImage, usLabel } = this.props;\n\n    if (!usHelpImage) {\n      return (\n        <div className=\"circle circle-sm circle-inverse p-t-1\">\n          <UploadIcon size={24} />\n        </div>\n      );\n    }\n\n    if (typeof usHelpImage === 'string') {\n      return <img src={usHelpImage} alt={usLabel} className=\"thumbnail text-xs-center\" />;\n    }\n\n    return usHelpImage;\n  };\n\n  render() {\n    const { isComplete, usAccept, usButtonText, usDisabled, usLabel, usPlaceholder } = this.props;\n\n    return (\n      <div>\n        <div className=\"droppable-default-card\" aria-hidden={isComplete}>\n          <div className=\"droppable-card-content\">\n            <div className=\"m-b-3\">{this.getImage()}</div>\n            {usLabel && <h4 className=\"np-text-title-body m-b-1\">{usLabel}</h4>}\n            {usPlaceholder && <p className=\"np-text-body-large m-b-3\">{String(usPlaceholder)}</p>}\n            <label className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}>\n              {usButtonText ? (\n                <span>{usButtonText}</span>\n              ) : (\n                <UploadIcon size={24} className=\"m-r-0\" />\n              )}\n              <input\n                ref={this.uploadInputRef}\n                type=\"file\"\n                accept={usAccept === '*' ? undefined : usAccept}\n                className=\"tw-droppable-input hidden\"\n                disabled={usDisabled}\n                name=\"file-upload\"\n                onChange={() => this.onManualUpload()}\n              />\n            </label>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":["UploadImageStep","PureComponent","uploadInputRef","createRef","onManualUpload","fileDropped","props","file","current","files","getImage","usHelpImage","usLabel","_jsx","className","children","UploadIcon","size","src","alt","render","isComplete","usAccept","usButtonText","usDisabled","usPlaceholder","_jsxs","String","ref","type","accept","undefined","disabled","name","onChange"],"mappings":"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"}
+{"version":3,"file":"uploadImageStep.mjs","sources":["../../../../src/upload/steps/uploadImageStep/uploadImageStep.tsx"],"sourcesContent":["import { Upload as UploadIcon } from '@transferwise/icons';\nimport { createRef, PureComponent } from 'react';\nimport StatusIcon from '../../../statusIcon';\nimport { Sentiment, Size } from '../../../common';\nimport InlineAlert from '../../../inlineAlert';\n\nexport interface UploadImageStepProps {\n  fileDropped: (file: File) => void;\n  isComplete: boolean;\n  usAccept: string;\n  usButtonText: string;\n  usDisabled: boolean;\n  usHelpImage: React.ReactNode;\n  usLabel: string;\n  usPlaceholder: string;\n  errorMessage?: string | string[];\n}\n\nexport default class UploadImageStep extends PureComponent<UploadImageStepProps> {\n  uploadInputRef = createRef<HTMLInputElement>();\n\n  onManualUpload = () => {\n    const { fileDropped } = this.props;\n    const file = this.uploadInputRef.current?.files?.[0];\n    if (file != null) {\n      fileDropped(file);\n    }\n  };\n\n  getImage = () => {\n    const { usHelpImage, usLabel } = this.props;\n    const { errorMessage } = this.props;\n\n    if (errorMessage) {\n      return (\n        <div className=\"d-flex flex-column align-items-center\">\n          <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} />\n        </div>\n      );\n    }\n\n    if (!usHelpImage) {\n      return (\n        <div className=\"circle circle-sm circle-inverse p-t-1\">\n          <UploadIcon size={24} />\n        </div>\n      );\n    }\n\n    if (typeof usHelpImage === 'string') {\n      return <img src={usHelpImage} alt={usLabel} className=\"thumbnail text-xs-center\" />;\n    }\n\n    return usHelpImage;\n  };\n\n  render() {\n    const { isComplete, usAccept, usButtonText, usDisabled, usLabel, usPlaceholder, errorMessage } =\n      this.props;\n\n    return (\n      <div className=\"droppable-default-card\" aria-hidden={isComplete}>\n        <div className=\"droppable-card-content\">\n          <div className=\"m-b-3\">{this.getImage()}</div>\n          {usLabel && <h4 className=\"np-text-title-body m-b-1\">{usLabel}</h4>}\n          {usPlaceholder && <p className=\"np-text-body-large m-b-3\">{String(usPlaceholder)}</p>}\n          <label className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}>\n            {usButtonText ? (\n              <span>{usButtonText}</span>\n            ) : (\n              <UploadIcon size={24} className=\"m-r-0\" />\n            )}\n            <input\n              ref={this.uploadInputRef}\n              type=\"file\"\n              accept={usAccept === '*' ? undefined : usAccept}\n              className=\"tw-droppable-input hidden\"\n              disabled={usDisabled}\n              name=\"file-upload\"\n              onChange={() => this.onManualUpload()}\n            />\n          </label>\n          {errorMessage && (\n            <div className=\"upload-error-message\">\n              <div className=\"m-t-3 has-error\">\n                <InlineAlert type={Sentiment.NEGATIVE}>{errorMessage}</InlineAlert>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":["UploadImageStep","PureComponent","uploadInputRef","createRef","onManualUpload","fileDropped","props","file","current","files","getImage","usHelpImage","usLabel","errorMessage","_jsx","className","children","StatusIcon","size","Size","LARGE","sentiment","Sentiment","NEGATIVE","UploadIcon","src","alt","render","isComplete","usAccept","usButtonText","usDisabled","usPlaceholder","_jsxs","String","ref","type","accept","undefined","disabled","name","onChange","InlineAlert"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.53.0",
+  "version": "46.54.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -93,7 +93,7 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "14.13.0",
+    "@transferwise/neptune-css": "14.13.1",
     "@wise/components-theming": "1.5.0"
   },
   "peerDependencies": {

package/src/i18n/en.json

@@ -36,6 +36,7 @@
   "neptune.Upload.csWrongTypeMessage": "File type not supported. Please try again with a different file",
   "neptune.Upload.psButtonText": "Cancel",
   "neptune.Upload.psProcessingText": "Uploading...",
+  "neptune.Upload.retry": "Retry",
   "neptune.Upload.usButtonText": "Or select a file",
   "neptune.Upload.usDropMessage": "Drop file to start upload",
   "neptune.Upload.usPlaceholder": "Drag and drop a file less than {maxSize}MB",

package/src/main.css

@@ -5440,6 +5440,16 @@ html:not([dir="rtl"]) .np-navigation-option {
 .tw-droppable-sm {
   min-height: 245px;
 }
+.upload-error-message {
+  margin-top: 24px;
+  margin-top: var(--padding-medium);
+  border-top: 1px solid rgba(0,0,0,0.10196);
+  border-top: 1px solid var(--color-border-neutral);
+  text-align: start;
+}
+.upload-error-message .alert {
+  min-width: 100px;
+}
 .np-upload-button-container {
   border-style: solid;
 }

package/src/upload/Upload.css

@@ -13,3 +13,13 @@
 .tw-droppable-sm {
   min-height: 245px;
 }
+.upload-error-message {
+  margin-top: 24px;
+  margin-top: var(--padding-medium);
+  border-top: 1px solid rgba(0,0,0,0.10196);
+  border-top: 1px solid var(--color-border-neutral);
+  text-align: start;
+}
+.upload-error-message .alert {
+  min-width: 100px;
+}

package/src/upload/Upload.less

@@ -19,3 +19,12 @@
 .tw-droppable-sm {
   min-height: 245px;
 }
+
+.upload-error-message {
+  margin-top: var(--padding-medium);
+  border-top: 1px solid var(--color-border-neutral);
+  text-align: start;
+  .alert {
+    min-width: 100px;
+  }
+}

package/src/upload/Upload.messages.ts

@@ -41,4 +41,8 @@ export default defineMessages({
     id: 'neptune.Upload.usPlaceholder',
     defaultMessage: 'Drag and drop a file less than {maxSize}MB',
   },
+  retry: {
+    id: 'neptune.Upload.retry',
+    defaultMessage: 'Retry',
+  },
 });

package/src/upload/Upload.spec.js

@@ -46,6 +46,7 @@ const props = {
   psProcessingText: 'psProcessingText',
   usAccept: 'image/*',
   usButtonText: 'Or Select File',
+  usButtonRetryText: 'Try again',
   usDropMessage: 'Drop file to start upload',
   usPlaceholder: 'Drag and drop a file less than 5MB',
 };
@@ -231,7 +232,7 @@ describe('Upload', () => {
       expect(component.find(CompleteStep)).toHaveLength(1);
     });
 
-    it('step CompleteStep is called with error props', async () => {
+    it('step UploadImageStep is called with error props', async () => {
       component = mount(<Upload {...props} />);
       const upload = component.children();
       asyncFileRead.mockImplementation(async () => {
@@ -244,12 +245,12 @@ describe('Upload', () => {
       await waitForUpload();
       component.update();
 
-      expect(component.find(CompleteStep).props()).toStrictEqual({
-        ...COMPLETED_STEP_PROPS,
-        isImage: false,
-        isComplete: true,
-        isError: true,
-        uploadedImage: undefined,
+      expect(component.find(UploadImageStep).props()).toStrictEqual({
+        ...UPLOADIMAGE_STEP_PROPS,
+        isComplete: false,
+        errorMessage: 'csFailureText',
+        usButtonText: 'Try again',
+        usHelpImage: null,
       });
     });
 

package/src/upload/Upload.story.tsx

@@ -6,6 +6,7 @@ import { MAX_SIZE_DEFAULT } from './Upload';
 
 const meta = {
   component: Upload,
+  title: 'Forms/Upload',
   tags: ['autodocs'],
   argTypes: {
     maxSize: {