@transferwise/components 46.70.3 → 46.71.0

package/build/styles/upload/Upload.css

@@ -13,6 +13,12 @@
 .tw-droppable-sm {
   min-height: 245px;
 }
+.tw-droppable-lg .btn:focus-visible,
+.tw-droppable-md .btn:focus-visible,
+.tw-droppable-sm .btn:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
 .upload-error-message {
   margin-top: 24px;
   margin-top: var(--padding-medium);

package/build/types/dateLookup/dateTrigger/DateTrigger.d.ts

@@ -1,5 +1,6 @@
 import { SizeSmall, SizeMedium, SizeLarge } from '../../common';
 interface DateTriggerProps {
+    ariaLabelledBy?: string;
     selectedDate: Date | null;
     size: SizeSmall | SizeMedium | SizeLarge;
     placeholder: string;

package/build/types/dateLookup/dateTrigger/DateTrigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTrigger.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAkB,SAAS,EAAE,UAAU,EAAE,SAAS,EAAc,MAAM,cAAc,CAAC;AAQ5F,UAAU,gBAAgB;IACxB,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmE3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"DateTrigger.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAkB,SAAS,EAAE,UAAU,EAAE,SAAS,EAAc,MAAM,cAAc,CAAC;AAQ5F,UAAU,gBAAgB;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqE3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/build/types/upload/steps/uploadImageStep/uploadImageStep.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"uploadImageStep.d.ts","sourceRoot":"","sources":["../../../../../src/upload/steps/uploadImageStep/uploadImageStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,aAAa,EAAE,MAAM,OAAO,CAAC;AAKjD,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAClC;AAED,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,aAAa,CAAC,oBAAoB,CAAC;IAC9E,cAAc,8CAAiC;IAE/C,cAAc,aAMZ;IAEF,QAAQ,0FAyBN;IAEF,MAAM;CAyCP"}
+{"version":3,"file":"uploadImageStep.d.ts","sourceRoot":"","sources":["../../../../../src/upload/steps/uploadImageStep/uploadImageStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,aAAa,EAAE,MAAM,OAAO,CAAC;AAKjD,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAClC;AAED,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,aAAa,CAAC,oBAAoB,CAAC;IAC9E,cAAc,8CAAiC;IAE/C,cAAc,aAMZ;IAEF,QAAQ,0FAyBN;IAEF,MAAM;CA0CP"}

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

@@ -81,6 +81,7 @@ class UploadImageStep extends React.PureComponent {
           className: `btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`,
           role: "button",
           "aria-disabled": usDisabled,
+          tabIndex: 0,
           children: [usButtonText ? /*#__PURE__*/jsxRuntime.jsx("span", {
             children: usButtonText
           }) : /*#__PURE__*/jsxRuntime.jsx(icons.Upload, {

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';\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\n            className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}\n            role=\"button\"\n            aria-disabled={usDisabled}\n          >\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","role","ref","type","accept","undefined","disabled","name","onChange","InlineAlert"],"mappings":";;;;;;;;;;AAkBqB,MAAAA,eAAgB,SAAQC,mBAAmC,CAAA;EAC9EC,cAAc,gBAAGC,eAAS,EAAoB,CAAA;EAE9CC,cAAc,GAAGA,MAAK;IACpB,MAAM;AAAEC,MAAAA,WAAAA;KAAa,GAAG,IAAI,CAACC,KAAK,CAAA;IAClC,MAAMC,IAAI,GAAG,IAAI,CAACL,cAAc,CAACM,OAAO,EAAEC,KAAK,GAAG,CAAC,CAAC,CAAA;IACpD,IAAIF,IAAI,IAAI,IAAI,EAAE;MAChBF,WAAW,CAACE,IAAI,CAAC,CAAA;AACnB,KAAA;GACD,CAAA;EAEDG,QAAQ,GAAGA,MAAK;IACd,MAAM;MAAEC,WAAW;AAAEC,MAAAA,OAAAA;KAAS,GAAG,IAAI,CAACN,KAAK,CAAA;IAC3C,MAAM;AAAEO,MAAAA,YAAAA;KAAc,GAAG,IAAI,CAACP,KAAK,CAAA;AAEnC,IAAA,IAAIO,YAAY,EAAE;AAChB,MAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAKC,QAAAA,SAAS,EAAC,uCAAuC;QAAAC,QAAA,eACpDF,cAAA,CAACG,UAAU,EAAA;UAACC,IAAI,EAAEC,SAAI,CAACC,KAAM;UAACC,SAAS,EAAEC,mBAAS,CAACC,QAAAA;SACrD,CAAA;AAAA,OAAK,CAAC,CAAA;AAEV,KAAA;IAEA,IAAI,CAACZ,WAAW,EAAE;AAChB,MAAA,oBACEG,cAAA,CAAA,KAAA,EAAA;AAAKC,QAAAA,SAAS,EAAC,uCAAuC;QAAAC,QAAA,eACpDF,cAAA,CAACU,YAAU,EAAA;AAACN,UAAAA,IAAI,EAAE,EAAA;SACpB,CAAA;AAAA,OAAK,CAAC,CAAA;AAEV,KAAA;AAEA,IAAA,IAAI,OAAOP,WAAW,KAAK,QAAQ,EAAE;AACnC,MAAA,oBAAOG,cAAA,CAAA,KAAA,EAAA;AAAKW,QAAAA,GAAG,EAAEd,WAAY;AAACe,QAAAA,GAAG,EAAEd,OAAQ;AAACG,QAAAA,SAAS,EAAC,0BAAA;AAA0B,QAAG,CAAA;AACrF,KAAA;AAEA,IAAA,OAAOJ,WAAW,CAAA;GACnB,CAAA;AAEDgB,EAAAA,MAAMA,GAAA;IACJ,MAAM;MAAEC,UAAU;MAAEC,QAAQ;MAAEC,YAAY;MAAEC,UAAU;MAAEnB,OAAO;MAAEoB,aAAa;AAAEnB,MAAAA,YAAAA;KAAc,GAC5F,IAAI,CAACP,KAAK,CAAA;AAEZ,IAAA,oBACEQ,cAAA,CAAA,KAAA,EAAA;AAAKC,MAAAA,SAAS,EAAC,wBAAwB;AAAC,MAAA,aAAA,EAAaa,UAAW;AAAAZ,MAAAA,QAAA,eAC9DiB,eAAA,CAAA,KAAA,EAAA;AAAKlB,QAAAA,SAAS,EAAC,wBAAwB;AAAAC,QAAAA,QAAA,gBACrCF,cAAA,CAAA,KAAA,EAAA;AAAKC,UAAAA,SAAS,EAAC,OAAO;AAAAC,UAAAA,QAAA,EAAE,IAAI,CAACN,QAAQ,EAAA;AAAE,SAAM,CAC7C,EAACE,OAAO,iBAAIE,cAAA,CAAA,IAAA,EAAA;AAAIC,UAAAA,SAAS,EAAC,0BAA0B;AAAAC,UAAAA,QAAA,EAAEJ,OAAAA;AAAO,SAAK,CAAC,EAClEoB,aAAa,iBAAIlB,cAAA,CAAA,GAAA,EAAA;AAAGC,UAAAA,SAAS,EAAC,0BAA0B;UAAAC,QAAA,EAAEkB,MAAM,CAACF,aAAa,CAAA;SAAK,CAAC,eACrFC,eAAA,CAAA,OAAA,EAAA;AACElB,UAAAA,SAAS,EAAE,CAA0BgB,uBAAAA,EAAAA,UAAU,GAAG,UAAU,GAAG,EAAE,CAAG,CAAA;AACpEI,UAAAA,IAAI,EAAC,QAAQ;AACb,UAAA,eAAA,EAAeJ,UAAW;UAAAf,QAAA,EAAA,CAEzBc,YAAY,gBACXhB,cAAA,CAAA,MAAA,EAAA;AAAAE,YAAAA,QAAA,EAAOc,YAAAA;AAAY,WAAO,CAAC,gBAE3BhB,cAAA,CAACU,YAAU,EAAA;AAACN,YAAAA,IAAI,EAAE,EAAG;AAACH,YAAAA,SAAS,EAAC,OAAA;WAAO,CACxC,eACDD,cAAA,CAAA,OAAA,EAAA;YACEsB,GAAG,EAAE,IAAI,CAAClC,cAAe;AACzBmC,YAAAA,IAAI,EAAC,MAAM;AACXC,YAAAA,MAAM,EAAET,QAAQ,KAAK,GAAG,GAAGU,SAAS,GAAGV,QAAS;AAChDd,YAAAA,SAAS,EAAC,2BAA2B;AACrCyB,YAAAA,QAAQ,EAAET,UAAW;AACrBU,YAAAA,IAAI,EAAC,aAAa;AAClBC,YAAAA,QAAQ,EAAEA,MAAM,IAAI,CAACtC,cAAc,EAAE;AAAC,WAE1C,CAAA,CAAA;AAAA,SAAO,CACP,EAACS,YAAY,iBACXC,cAAA,CAAA,KAAA,EAAA;AAAKC,UAAAA,SAAS,EAAC,sBAAsB;AAAAC,UAAAA,QAAA,eACnCF,cAAA,CAAA,KAAA,EAAA;AAAKC,YAAAA,SAAS,EAAC,iBAAiB;YAAAC,QAAA,eAC9BF,cAAA,CAAC6B,WAAW,EAAA;cAACN,IAAI,EAAEf,mBAAS,CAACC,QAAS;AAAAP,cAAAA,QAAA,EAAEH,YAAAA;aAA0B,CAAA;WAC/D,CAAA;AACP,SAAK,CACN,CAAA;OACE,CAAA;AACP,KAAK,CAAC,CAAA;AAEV,GAAA;AACD;;;;"}
+{"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\n            className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}\n            role=\"button\"\n            aria-disabled={usDisabled}\n            tabIndex={0}\n          >\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","role","tabIndex","ref","type","accept","undefined","disabled","name","onChange","InlineAlert"],"mappings":"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"}

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

@@ -79,6 +79,7 @@ class UploadImageStep extends PureComponent {
           className: `btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`,
           role: "button",
           "aria-disabled": usDisabled,
+          tabIndex: 0,
           children: [usButtonText ? /*#__PURE__*/jsx("span", {
             children: usButtonText
           }) : /*#__PURE__*/jsx(Upload, {

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';\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\n            className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}\n            role=\"button\"\n            aria-disabled={usDisabled}\n          >\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","role","ref","type","accept","undefined","disabled","name","onChange","InlineAlert"],"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\n            className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}\n            role=\"button\"\n            aria-disabled={usDisabled}\n            tabIndex={0}\n          >\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","role","tabIndex","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.70.3",
+  "version": "46.71.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,9 +92,9 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
+    "@transferwise/less-config": "3.1.0",
     "@transferwise/neptune-css": "14.18.0",
-    "@wise/components-theming": "1.6.0",
-    "@transferwise/less-config": "3.1.0"
+    "@wise/components-theming": "1.6.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",

package/src/dateLookup/DateLookup.rtl.spec.tsx

@@ -19,6 +19,7 @@ describe('DateLookup', () => {
   afterEach(async () => {
     await jest.runOnlyPendingTimersAsync();
     jest.useRealTimers();
+    jest.clearAllMocks();
   });
 
   it('supports `Field` for labeling', () => {
@@ -27,10 +28,10 @@ describe('DateLookup', () => {
         <DateLookup value={initialValue} onChange={() => {}} />
       </Field>,
     );
-    // TODO: Replace with `.toHaveAttribute('aria-haspopup')`
-    expect(screen.getByLabelText(/Date of birth/)).toHaveTextContent(
-      initialValue.getFullYear().toString(),
-    );
+    const button = screen.getByRole('button', { name: 'Date of birth' });
+
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('aria-haspopup');
   });
 
   it.each([' ', '{Enter}', '{ArrowDown}', '{ArrowUp}', '{ArrowRight}', '{ArrowLeft}'])(

package/src/dateLookup/DateLookup.story.tsx

@@ -2,6 +2,7 @@ import { boolean, select, text, date } from '@storybook/addon-knobs';
 import { userEvent } from '@storybook/test';
 import { useState } from 'react';
 
+import { Field } from '..';
 import { Size } from '../common';
 import { storyConfig } from '../test-utils';
 
@@ -60,6 +61,38 @@ export const Basic400Zoom = storyConfig(
   { variants: ['400%'] },
 );
 
+export const WithField = () => {
+  const [value, setValue] = useState<Date | null>(epoch);
+  const disabled = boolean('disabled', false);
+  const label = text('label', 'label');
+  const monthFormat = select('monthFormat', ['long', 'short'], 'long');
+  const placeholder = text('placeholder', 'placeholder');
+  const id = text('id', 'date-lookup');
+
+  const clearable = boolean('clearable', true);
+
+  return (
+    <Field label="Date lookup">
+      <DateLookup
+        disabled={disabled}
+        id={id}
+        label={label}
+        min={thePast}
+        max={theFuture}
+        monthFormat={monthFormat}
+        placeholder={placeholder}
+        size={size}
+        value={value}
+        clearable={clearable}
+        onChange={(v) => {
+          console.log(v);
+          setValue(v);
+        }}
+      />
+    </Field>
+  );
+};
+
 export const RightAligned = () => {
   const [value, setValue] = useState<Date | null>(epoch);
   const disabled = boolean('disabled', false);

package/src/dateLookup/DateLookup.testingLibrary.spec.js

@@ -148,8 +148,7 @@ describe('DateLookup (events)', () => {
 
     it('supports custom `aria-labelledby` attribute', async () => {
       const view = await setup();
-      expect(screen.getByLabelText('Prioritized label')).toHaveClass('input-group');
-
+      expect(screen.getByRole('button', { name: 'Prioritized label' })).toBeInTheDocument();
       await closeDateLookup(view);
     });
   });

package/src/dateLookup/DateLookup.tsx

@@ -323,12 +323,12 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
         ref={this.element}
         {...inputAttributes}
         id={id}
-        aria-labelledby={ariaLabelledBy}
         className="input-group"
         onKeyDown={this.handleKeyDown}
       >
         <OverlayIdProvider open={open}>
           <DateTrigger
+            ariaLabelledBy={ariaLabelledBy}
             selectedDate={selectedDate}
             size={size}
             placeholder={placeholder}

package/src/dateLookup/dateTrigger/DateTrigger.tsx

@@ -11,6 +11,7 @@ import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';
 import Body from '../../body';
 
 interface DateTriggerProps {
+  ariaLabelledBy?: string;
   selectedDate: Date | null;
   size: SizeSmall | SizeMedium | SizeLarge;
   placeholder: string;
@@ -28,6 +29,7 @@ const DateTrigger: React.FC<DateTriggerProps> = ({
   label,
   monthFormat,
   disabled,
+  ariaLabelledBy,
   onClick,
   onClear,
 }) => {
@@ -41,6 +43,7 @@ const DateTrigger: React.FC<DateTriggerProps> = ({
         aria-haspopup="dialog"
         aria-expanded={overlayId != null}
         aria-controls={overlayId}
+        aria-labelledby={ariaLabelledBy}
         className={`btn btn-${size} btn-input np-date-trigger`}
         disabled={disabled}
         type="button"

package/src/inputs/SelectInput.css

@@ -309,9 +309,6 @@
   flex-direction: column;
   overflow: hidden;
 }
-.np-select-input-option-content-text-primary {
-  font: inherit;
-}
 .np-select-input-option-content-text-secondary {
   color: #5d7079;
   color: var(--color-content-secondary);

package/src/inputs/SelectInput.less

@@ -160,10 +160,6 @@
   overflow: hidden;
 }
 
-.np-select-input-option-content-text-primary {
-  font: inherit;
-}
-
 .np-select-input-option-content-text-secondary {
   color: var(--color-content-secondary);
 }

package/src/inputs/SelectInput.tsx

@@ -884,7 +884,7 @@ export function SelectInputOptionContent({
             withinTrigger && 'np-select-input-option-content-text-within-trigger',
           )}
         >
-          <h4 className="np-select-input-option-content-text-primary d-inline">{title}</h4>
+          <div className="d-inline">{title}</div>
           {note ? (
             <span className="np-select-input-option-content-text-secondary np-text-body-default">
               {note}

package/src/main.css

@@ -2788,9 +2788,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   flex-direction: column;
   overflow: hidden;
 }
-.np-select-input-option-content-text-primary {
-  font: inherit;
-}
 .np-select-input-option-content-text-secondary {
   color: #5d7079;
   color: var(--color-content-secondary);
@@ -5449,6 +5446,12 @@ html:not([dir="rtl"]) .np-navigation-option {
 .tw-droppable-sm {
   min-height: 245px;
 }
+.tw-droppable-lg .btn:focus-visible,
+.tw-droppable-md .btn:focus-visible,
+.tw-droppable-sm .btn:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
 .upload-error-message {
   margin-top: 24px;
   margin-top: var(--padding-medium);

package/src/upload/Upload.css

@@ -13,6 +13,12 @@
 .tw-droppable-sm {
   min-height: 245px;
 }
+.tw-droppable-lg .btn:focus-visible,
+.tw-droppable-md .btn:focus-visible,
+.tw-droppable-sm .btn:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
 .upload-error-message {
   margin-top: 24px;
   margin-top: var(--padding-medium);

package/src/upload/Upload.less

@@ -1,3 +1,5 @@
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+
 // This css is a quick workaround on the height of the upload container collapsing if UploadImageStep is
 // not rendered.
 .tw-droppable-lg {
@@ -20,6 +22,12 @@
   min-height: 245px;
 }
 
+.tw-droppable-lg, .tw-droppable-md, .tw-droppable-sm {
+  .btn:focus-visible {
+    .ring();
+  }
+}
+
 .upload-error-message {
   margin-top: var(--padding-medium);
   border-top: 1px solid var(--color-border-neutral);

package/src/upload/steps/uploadImageStep/uploadImageStep.tsx

@@ -68,6 +68,7 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
             className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}
             role="button"
             aria-disabled={usDisabled}
+            tabIndex={0}
           >
             {usButtonText ? (
               <span>{usButtonText}</span>