@wise/dynamic-flow-client 2.3.2 → 2.5.0

package/build/main.js

@@ -99,9 +99,9 @@ var require_classnames = __commonJS({
   }
 });
 
-// ../../node_modules/.pnpm/react-webcam@7.1.1_react-dom@18.2.0_react@18.2.0/node_modules/react-webcam/dist/react-webcam.js
+// ../../node_modules/.pnpm/react-webcam@7.2.0_react-dom@18.2.0_react@18.2.0/node_modules/react-webcam/dist/react-webcam.js
 var require_react_webcam = __commonJS({
-  "../../node_modules/.pnpm/react-webcam@7.1.1_react-dom@18.2.0_react@18.2.0/node_modules/react-webcam/dist/react-webcam.js"(exports, module2) {
+  "../../node_modules/.pnpm/react-webcam@7.2.0_react-dom@18.2.0_react@18.2.0/node_modules/react-webcam/dist/react-webcam.js"(exports, module2) {
     "use strict";
     (function webpackUniversalModuleDefinition(root, factory) {
       if (typeof exports === "object" && typeof module2 === "object")
@@ -477,7 +477,7 @@ var require_react_webcam = __commonJS({
                   Webcam3.prototype.render = function() {
                     var _this = this;
                     var _a = this, state = _a.state, props = _a.props;
-                    var audio = props.audio, forceScreenshotSourceSize = props.forceScreenshotSourceSize, onUserMedia = props.onUserMedia, onUserMediaError = props.onUserMediaError, screenshotFormat = props.screenshotFormat, screenshotQuality = props.screenshotQuality, minScreenshotWidth = props.minScreenshotWidth, minScreenshotHeight = props.minScreenshotHeight, audioConstraints = props.audioConstraints, videoConstraints = props.videoConstraints, imageSmoothing = props.imageSmoothing, mirrored = props.mirrored, _b = props.style, style = _b === void 0 ? {} : _b, children = props.children, rest = __rest(props, ["audio", "forceScreenshotSourceSize", "onUserMedia", "onUserMediaError", "screenshotFormat", "screenshotQuality", "minScreenshotWidth", "minScreenshotHeight", "audioConstraints", "videoConstraints", "imageSmoothing", "mirrored", "style", "children"]);
+                    var audio = props.audio, forceScreenshotSourceSize = props.forceScreenshotSourceSize, disablePictureInPicture = props.disablePictureInPicture, onUserMedia = props.onUserMedia, onUserMediaError = props.onUserMediaError, screenshotFormat = props.screenshotFormat, screenshotQuality = props.screenshotQuality, minScreenshotWidth = props.minScreenshotWidth, minScreenshotHeight = props.minScreenshotHeight, audioConstraints = props.audioConstraints, videoConstraints = props.videoConstraints, imageSmoothing = props.imageSmoothing, mirrored = props.mirrored, _b = props.style, style = _b === void 0 ? {} : _b, children = props.children, rest = __rest(props, ["audio", "forceScreenshotSourceSize", "disablePictureInPicture", "onUserMedia", "onUserMediaError", "screenshotFormat", "screenshotQuality", "minScreenshotWidth", "minScreenshotHeight", "audioConstraints", "videoConstraints", "imageSmoothing", "mirrored", "style", "children"]);
                     var videoStyle = mirrored ? __assign(__assign({}, style), { transform: (style.transform || "") + " scaleX(-1)" }) : style;
                     var childrenProps = {
                       getScreenshot: this.getScreenshot.bind(this)
@@ -485,7 +485,7 @@ var require_react_webcam = __commonJS({
                     return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](
                       react__WEBPACK_IMPORTED_MODULE_0__["Fragment"],
                       null,
-                      react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("video", __assign({ autoPlay: true, src: state.src, muted: !audio, playsInline: true, ref: function(ref) {
+                      react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("video", __assign({ autoPlay: true, disablePictureInPicture, src: state.src, muted: !audio, playsInline: true, ref: function(ref) {
                         _this.video = ref;
                       }, style: videoStyle }, rest)),
                       children && children(childrenProps)
@@ -493,6 +493,7 @@ var require_react_webcam = __commonJS({
                   };
                   Webcam3.defaultProps = {
                     audio: false,
+                    disablePictureInPicture: false,
                     forceScreenshotSourceSize: false,
                     imageSmoothing: true,
                     mirrored: false,
@@ -2018,11 +2019,15 @@ var FormControlType = {
   RADIO: "radio",
   CHECKBOX: "checkbox",
   SELECT: "select",
+  EMAIL: "email",
   FILE: "file",
   DATE: "date",
   DATETIME: "date-time",
   DATELOOKUP: "date-lookup",
   TEL: "tel",
+  // For string schemas with number format
+  NUMERIC: "numeric",
+  // For number schemas
   NUMBER: "number",
   HIDDEN: "hidden",
   PASSWORD: "password",
@@ -2621,6 +2626,7 @@ var DynamicExternal_default = DynamicExternal;
 var import_react22 = require("react");
 
 // src/jsonSchemaForm/allOfSchema/AllOfSchema.tsx
+var import_components6 = require("@transferwise/components");
 var import_classnames = __toESM(require_classnames());
 var import_react11 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
@@ -2648,7 +2654,7 @@ var AllOfSchema = (props) => {
   };
   const [models, setModels] = (0, import_react11.useState)(splitModel(props.model, props.schema.allOf));
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    props.schema.title && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { className: "page-header", children: props.schema.title }),
+    props.schema.title && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components6.Header, { title: props.schema.title }),
     props.schema.description && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: props.schema.description }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "row", children: props.schema.allOf.map((schema, index) => (
       // eslint-disable-next-line react/no-array-index-key
@@ -2676,12 +2682,12 @@ AllOfSchema.defaultProps = {
 var AllOfSchema_default = AllOfSchema;
 
 // src/jsonSchemaForm/arrayTypeSchema/arrayListSchema/multipleFileUploadSchema/MultipleFileUploadSchema.tsx
-var import_components7 = require("@transferwise/components");
+var import_components8 = require("@transferwise/components");
 var import_classnames2 = __toESM(require_classnames());
 var import_react12 = require("react");
 
 // src/jsonSchemaForm/controlFeedback/ControlFeedback.tsx
-var import_components6 = require("@transferwise/components");
+var import_components7 = require("@transferwise/components");
 var import_formatting = require("@transferwise/formatting");
 var import_react_intl5 = require("react-intl");
 
@@ -2748,12 +2754,12 @@ var ControlFeedback = (props) => {
   const validationMessages = __spreadValues(__spreadValues(__spreadValues({}, defaultValidationMessages), props.validationMessages), props.schema.validationMessages);
   const isErrorVisible = (props.submitted || !props.changed) && !!props.errors;
   const isValidationVisible = !isErrorVisible && (props.submitted || props.changed && props.blurred) && !!((_a = props.validations) == null ? void 0 : _a.length);
-  const isDescriptionVisible = props.focused && props.schema.description && !isValidationVisible;
+  const isDescriptionVisible = props.schema.description && !isErrorVisible && !isValidationVisible;
   const hasInfoMessage = !!props.infoMessage;
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { id: props.id, children: [
-    isErrorVisible ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_components6.InlineAlert, { type: "error", children: props.errors }) : null,
-    isValidationVisible ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_components6.InlineAlert, { type: "error", children: props.validations.map((validation) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: validationMessages[validation] }, validation)) }) : null,
-    (isDescriptionVisible || hasInfoMessage) && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_components6.InlineAlert, { type: "info", children: [
+    isErrorVisible ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_components7.InlineAlert, { type: "error", children: props.errors }) : null,
+    isValidationVisible ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_components7.InlineAlert, { type: "error", children: props.validations.map((validation) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: validationMessages[validation] }, validation)) }) : null,
+    (isDescriptionVisible || hasInfoMessage) && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_components7.InlineAlert, { type: "info", children: [
       isDescriptionVisible && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: props.schema.description }),
       hasInfoMessage && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: props.infoMessage })
     ] })
@@ -2961,7 +2967,7 @@ var MultipleFileUploadSchema = (props) => {
   const feedbackId = `${uid}-feedback`;
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: (0, import_classnames2.default)("form-group", { "has-error": showError }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "d-block control-label", htmlFor: uid, children: props.schema.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { "aria-describedby": feedbackId, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_components7.UploadInput, __spreadValues({}, uploadInputProps)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { "aria-describedby": feedbackId, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_components8.UploadInput, __spreadValues({}, uploadInputProps)) }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       ControlFeedback_default,
       {
@@ -2992,7 +2998,7 @@ function getSuccessfullyProcessedFiles(allFiles) {
   return allFiles.filter((file) => !file.error && file.status === "succeeded");
 }
 function convertFileIdsToComponentFileObjects(fileIds) {
-  return fileIds.map((id) => isValidId(id) ? { id, status: import_components7.Status.SUCCEEDED } : null).filter((item) => item !== null);
+  return fileIds.map((id) => isValidId(id) ? { id, status: import_components8.Status.SUCCEEDED } : null).filter((item) => item !== null);
 }
 function isValidId(id) {
   return isNumber(id) || isString(id);
@@ -3003,25 +3009,26 @@ function getValidationMessages(schema, required, defaultErrorMessages) {
 }
 
 // src/jsonSchemaForm/arrayTypeSchema/arrayListSchema/repeatableSchema/RepeatableSchema.tsx
-var import_components9 = require("@transferwise/components");
+var import_components10 = require("@transferwise/components");
 var import_icons = require("@transferwise/icons");
 var import_react13 = require("react");
 var import_react_intl11 = require("react-intl");
 
 // src/jsonSchemaForm/arrayTypeSchema/arrayListSchema/repeatableSchema/ItemSummary.tsx
-var import_components8 = require("@transferwise/components");
+var import_components9 = require("@transferwise/components");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var ItemSummaryOption = ({
   item,
   onClick
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_components8.NavigationOption,
+    import_components9.NavigationOption,
     {
       onClick,
       media: getNavigationOptionMedia(item),
       title: item.title,
-      content: item.description
+      content: item.description,
+      showMediaAtAllSizes: true
     }
   );
 };
@@ -3346,7 +3353,7 @@ var RepeatableSchema = ({
   };
   const { formatMessage } = (0, import_react_intl11.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-    schema.title && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_components9.Header, { title: schema.title }),
+    schema.title && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_components10.Header, { title: schema.title }),
     itemSummaries && itemSummaries.map((itemSummary) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       ItemSummaryOption,
       {
@@ -3356,15 +3363,16 @@ var RepeatableSchema = ({
       JSON.stringify(itemSummary)
     )),
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      import_components9.NavigationOption,
+      import_components10.NavigationOption,
       {
         onClick: onAddItem,
         media: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons.Plus, {}),
-        title: schema.addItemTitle || formatMessage(RepeatableSchema_messages_default.addItemTitle)
+        title: schema.addItemTitle || formatMessage(RepeatableSchema_messages_default.addItemTitle),
+        showMediaAtAllSizes: true
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      import_components9.Modal,
+      import_components10.Modal,
       {
         open: openModalType !== null,
         onClose: onCancelEdit,
@@ -3525,11 +3533,12 @@ ObjectSchema.defaultProps = {
 var ObjectSchema_default = ObjectSchema;
 
 // src/jsonSchemaForm/oneOfSchema/OneOfSchema.tsx
+var import_components14 = require("@transferwise/components");
 var import_classnames4 = __toESM(require_classnames());
 var import_react17 = require("react");
 
 // src/jsonSchemaForm/help/Help.tsx
-var import_components10 = require("@transferwise/components");
+var import_components11 = require("@transferwise/components");
 var import_react_intl13 = require("react-intl");
 
 // src/jsonSchemaForm/help/Help.messages.js
@@ -3547,10 +3556,10 @@ var import_jsx_runtime26 = require("react/jsx-runtime");
 var Help = (props) => {
   const intl = (0, import_react_intl13.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    import_components10.Info,
+    import_components11.Info,
     {
       className: "m-l-1",
-      content: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_components10.Markdown, { children: props.help.markdown }),
+      content: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_components11.Markdown, { children: props.help.markdown }),
       presentation: "POPOVER",
       size: "sm",
       "aria-label": intl.formatMessage(Help_messages_default.helpAria)
@@ -3563,7 +3572,7 @@ var Help_default = Help;
 var import_react16 = require("react");
 
 // src/formControl/FormControl.tsx
-var import_components11 = require("@transferwise/components");
+var import_components12 = require("@transferwise/components");
 var import_react15 = require("react");
 
 // src/formControl/utils/value-utils.ts
@@ -3673,17 +3682,96 @@ var logInvalidTypeFallbackWarning = ({
   );
 };
 
+// src/formControl/utils/getAutocompleteString.ts
+var getAutocompleteString = (hints) => {
+  const validHints = hints.filter((hint) => autocompleteHintMap[hint]);
+  if (validHints.length === 0) {
+    return "off";
+  }
+  return validHints.map((hint) => autocompleteHintMap[hint]).join(" ");
+};
+var autocompleteHintMap = {
+  on: "on",
+  name: "name",
+  namePrefix: "honorific-prefix",
+  givenName: "given-name",
+  additionalName: "additional-name",
+  familyName: "family-name",
+  nameSuffix: "honorific-suffix",
+  nickname: "nickname",
+  email: "email",
+  // Web doesn't have a specific mapping for new username, but this is semantically close enough
+  newUsername: "username",
+  username: "username",
+  newPassword: "new-password",
+  password: "current-password",
+  oneTimeCode: "one-time-code",
+  jobTitle: "organization-title",
+  organizationName: "organization",
+  fullStreetAddress: "street-address",
+  streetAddressLine1: "address-line1",
+  streetAddressLine2: "address-line2",
+  streetAddressLine3: "address-line3",
+  addressLevel1: "address-level1",
+  addressLevel2: "address-level2",
+  addressLevel3: "address-level3",
+  addressLevel4: "address-level4",
+  countryCode: "country",
+  countryName: "country-name",
+  postalCode: "postal-code",
+  creditCardName: "cc-name",
+  creditCardGivenName: "cc-given-name",
+  creditCardMiddleName: "cc-additional-name",
+  creditCardFamilyName: "cc-family-name",
+  creditCardNumber: "cc-number",
+  creditCardExpiration: "cc-exp",
+  creditCardExpirationMonth: "cc-exp-month",
+  creditCardExpirationYear: "cc-exp-year",
+  creditCardSecurityCode: "cc-csc",
+  creditCardType: "cc-type",
+  transactionCurrency: "transaction-currency",
+  transactionAmount: "transaction-amount",
+  language: "language",
+  birthdate: "bday",
+  birthdateDay: "bday-day",
+  birthdateMonth: "bday-month",
+  birthdateYear: "bday-year",
+  gender: "sex",
+  phoneNumber: "tel",
+  phoneCountryCode: "tel-country-code",
+  phoneNational: "tel-national",
+  phoneAreaCode: "tel-area-code",
+  phoneLocal: "tel-local",
+  phoneLocalPrefix: "tel-local-prefix",
+  phoneLocalSuffix: "tel-local-suffix",
+  phoneExtension: "tel-extension",
+  url: "url",
+  photo: "photo",
+  impp: "impp",
+  shipping: "shipping",
+  billing: "billing",
+  home: "home",
+  work: "work",
+  mobile: "mobile",
+  fax: "fax",
+  pager: "pager"
+};
+
 // src/formControl/FormControl.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var _FormControl = class _FormControl extends import_react15.PureComponent {
   constructor(props) {
     super(props);
-    /**
-     * autocomplete hides our form help so we need to disable it when help text
-     * is present. Chrome ignores autocomplete=off, the only way to disable it is
-     * to provide an 'invalid' value, for which 'disabled' serves.
-     */
-    this.getAutocompleteStatus = () => this.props.autoComplete ? "on" : "disabled";
+    this.getAutocompleteValue = () => {
+      const { autoComplete, autocompleteHint } = this.props;
+      if (isArray(autocompleteHint)) {
+        return getAutocompleteString(autocompleteHint);
+      }
+      if (autoComplete === true) {
+        return "on";
+      }
+      return "off";
+    };
     this.handleOnChange = (value) => {
       this.props.onChange(value);
     };
@@ -3764,7 +3852,7 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
     switch (type) {
       case FormControlType.RADIO:
         return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          import_components11.RadioGroup,
+          import_components12.RadioGroup,
           {
             radios: options.map(this.mapOption),
             name,
@@ -3774,7 +3862,7 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
         );
       case FormControlType.CHECKBOX:
         return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          import_components11.Checkbox,
+          import_components12.Checkbox,
           {
             checked: getSafeBooleanValue(value, { coerceValue: true }),
             disabled,
@@ -3789,7 +3877,7 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
       case FormControlType.SELECT: {
         const search = options.length >= 20;
         return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          import_components11.Select,
+          import_components12.Select,
           {
             id,
             selected: this.getSelectedOption(options),
@@ -3813,7 +3901,7 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
       }
       case FormControlType.TAB:
         return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          import_components11.Tabs,
+          import_components12.Tabs,
           {
             selected: ((_a = this.getSelectedOption(options)) == null ? void 0 : _a.value) || 0,
             tabs: options.map((option) => ({
@@ -3831,11 +3919,12 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
             }
           }
         );
-      case FormControlType.NUMBER:
+      case FormControlType.NUMERIC:
+      case FormControlType.NUMBER: {
         return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "input",
           {
-            autoComplete: this.getAutocompleteStatus(),
+            autoComplete: this.getAutocompleteValue(),
             className: "form-control",
             disabled,
             id,
@@ -3849,7 +3938,11 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
             value: getSafeStringOrNumberValue(value, { coerceValue: true }),
             onBlur: this.handleOnBlur,
             onChange: (event) => {
-              this.props.onChange(parseFloat(event.target.value));
+              if (type === FormControlType.NUMERIC) {
+                this.props.onChange(event.target.value);
+              } else {
+                this.props.onChange(parseFloat(event.target.value));
+              }
             },
             onFocus: this.handleOnFocus,
             onWheel: (event) => {
@@ -3860,6 +3953,7 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
             "aria-describedby": describedBy
           }
         );
+      }
       case FormControlType.HIDDEN:
         return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "input",
@@ -3874,7 +3968,7 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
         return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "input",
           {
-            autoComplete: this.getAutocompleteStatus(),
+            autoComplete: this.getAutocompleteValue(),
             className: "form-control",
             disabled,
             id,
@@ -3892,7 +3986,7 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
       case FormControlType.DATE:
       case FormControlType.DATETIME:
         return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          import_components11.DateInput,
+          import_components12.DateInput,
           {
             disabled,
             size,
@@ -3906,7 +4000,7 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
         );
       case FormControlType.DATELOOKUP: {
         return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          import_components11.DateLookup,
+          import_components12.DateLookup,
           {
             value: getSafeDateStringValue(value),
             min: minDate,
@@ -3924,7 +4018,7 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
       }
       case FormControlType.TEL:
         return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          import_components11.PhoneNumberInput,
+          import_components12.PhoneNumberInput,
           {
             disabled,
             countryCode,
@@ -3952,11 +4046,11 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
           onFocus: this.handleOnFocus,
           onBlur: this.handleOnBlur,
           disabled,
-          autoComplete: this.getAutocompleteStatus()
+          autoComplete: this.getAutocompleteValue()
         };
         if (this.props.displayPattern) {
           return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-            import_components11.TextareaWithDisplayFormat,
+            import_components12.TextareaWithDisplayFormat,
             __spreadProps(__spreadValues({
               displayPattern: this.props.displayPattern
             }, textareaProps), {
@@ -3978,7 +4072,7 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-expect-error - TODO: Remove this once Upload is migrated to TypeScript
           /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-            import_components11.Upload,
+            import_components12.Upload,
             __spreadProps(__spreadValues({}, uploadProps), {
               usAccept: uploadProps.usAccept || "*",
               usDisabled: uploadProps.usDisabled || disabled,
@@ -3996,9 +4090,10 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
         );
       }
       case FormControlType.TEXT:
+      case FormControlType.EMAIL:
       default: {
         const inputProps = {
-          type: "text",
+          type: type === FormControlType.EMAIL ? "email" : "text",
           className: "form-control",
           id,
           name,
@@ -4011,11 +4106,11 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
           onFocus: this.handleOnFocus,
           onBlur: this.handleOnBlur,
           disabled,
-          autoComplete: this.getAutocompleteStatus()
+          autoComplete: this.getAutocompleteValue()
         };
         if (this.props.displayPattern) {
           return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-            import_components11.InputWithDisplayFormat,
+            import_components12.InputWithDisplayFormat,
             __spreadProps(__spreadValues({
               displayPattern: this.props.displayPattern
             }, inputProps), {
@@ -4072,7 +4167,7 @@ _FormControl.defaultProps = {
 var FormControl = _FormControl;
 
 // src/jsonSchemaForm/schemaFormControl/utils/mapping-utils.tsx
-var import_components12 = require("@transferwise/components");
+var import_components13 = require("@transferwise/components");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var mapConstSchemaToOption = (schema, controlType) => {
   switch (controlType) {
@@ -4121,17 +4216,17 @@ var getIconPropertyForSelectOption = (icon) => {
 var getAvatarPropertyForRadioOption = ({ image, icon }) => {
   if (image == null ? void 0 : image.url) {
     return {
-      avatar: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_components12.Avatar, { type: import_components12.AvatarType.THUMBNAIL, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("img", { src: image.url, alt: "" }) })
+      avatar: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_components13.Avatar, { type: import_components13.AvatarType.THUMBNAIL, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("img", { src: image.url, alt: "" }) })
     };
   }
   if ((icon == null ? void 0 : icon.name) && isValidIconName(icon.name)) {
     return {
-      avatar: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_components12.Avatar, { type: import_components12.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DynamicIcon_default, { type: icon.name }) })
+      avatar: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_components13.Avatar, { type: import_components13.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DynamicIcon_default, { type: icon.name }) })
     };
   }
   if (icon == null ? void 0 : icon.text) {
     return {
-      avatar: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_components12.Avatar, { type: import_components12.AvatarType.INITIALS, children: icon.text })
+      avatar: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_components13.Avatar, { type: import_components13.AvatarType.INITIALS, children: icon.text })
     };
   }
   return null;
@@ -4166,23 +4261,12 @@ var getControlType = (schema) => {
     }
     return schema.control || FormControlType.SELECT;
   }
+  if (isStringSchema(schema)) {
+    return getStringSchemaControlType(schema);
+  }
   if ("control" in schema && schema.control) {
     return schema.control;
   }
-  if (schema.type === "string") {
-    switch (schema.format) {
-      case "date":
-        return "date";
-      case "password":
-        return "password";
-      case "phone-number":
-        return "tel";
-      case "base64url":
-        return "file";
-      default:
-        return "text";
-    }
-  }
   if (schema.type === "boolean") {
     return "checkbox";
   }
@@ -4191,6 +4275,34 @@ var getControlType = (schema) => {
   }
   return schema.type;
 };
+var getStringSchemaControlType = ({
+  format,
+  control
+}) => {
+  if (control) {
+    return stringControlToFormControlType[control] || control;
+  }
+  if (format) {
+    return stringFormatToFormControlType[format] || "text";
+  }
+  return "text";
+};
+var stringControlToFormControlType = {
+  "date-lookup": "date-lookup",
+  password: "password",
+  textarea: "textarea",
+  email: "email",
+  numeric: "numeric",
+  "phone-number": "tel"
+};
+var stringFormatToFormControlType = {
+  date: "date",
+  // Legacy formats
+  email: "email",
+  base64url: "file",
+  password: "password",
+  "phone-number": "tel"
+};
 var getOptions = (schema, controlType) => {
   if (schema.oneOf) {
     return schema.oneOf.map((childSchema) => mapConstSchemaToOption(childSchema, controlType));
@@ -4223,6 +4335,7 @@ var SchemaFormControl = (props) => {
     options: options || [],
     placeholder: schema.placeholder,
     autoComplete: !schema.help,
+    autocompleteHint: schema.autocompleteHint,
     disabled: disabled || schema.disabled,
     displayPattern: schema.displayFormat,
     // TODO: LOW avoid type assertion below
@@ -4334,6 +4447,7 @@ var OneOfSchema = (props) => {
   const feedbackId = `${id}-feedback`;
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
     (props.schema.oneOf.length > 1 || isConstSchema(props.schema.oneOf[0])) && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+      props.schema.alert && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DynamicAlert_default, { component: props.schema.alert }),
       /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: (0, import_classnames4.default)(formGroupClasses), children: [
         getTitleAndHelp(props.schema, id),
         /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
@@ -4364,8 +4478,7 @@ var OneOfSchema = (props) => {
             infoMessage: null
           }
         )
-      ] }),
-      props.schema.alert && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DynamicAlert_default, { component: props.schema.alert })
+      ] })
     ] }),
     isNoNConstSchema(props.schema.oneOf[schemaIndex]) && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       GenericSchema_default,
@@ -4383,16 +4496,17 @@ var OneOfSchema = (props) => {
   ] });
 };
 function getTitleAndHelp(schema, id) {
+  var _a;
   const helpElement = schema.help ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Help_default, { help: schema.help }) : null;
-  const titleElement = isConstSchema(schema.oneOf[0]) ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("label", { className: "control-label d-inline", htmlFor: id, children: [
+  const titleElement = isConstSchema(schema.oneOf[0]) ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "m-b-1", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("label", { className: "control-label d-inline", htmlFor: id, children: [
     schema.title,
     " ",
     helpElement
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("h4", { className: "m-b-2", children: [
+  ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: helpElement ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("h4", { className: "m-b-2", children: [
     schema.title,
     " ",
     helpElement
-  ] });
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_components14.Header, { title: (_a = schema.title) != null ? _a : "" }) });
   return schema.title ? titleElement : helpElement;
 }
 function getValidations(props, schemaIndex) {
@@ -4432,7 +4546,7 @@ var import_classnames5 = __toESM(require_classnames());
 var import_react19 = require("react");
 
 // src/jsonSchemaForm/persistAsyncSchema/persistAsyncBlobSchema/UploadInputAdapter.tsx
-var import_components13 = require("@transferwise/components");
+var import_components15 = require("@transferwise/components");
 var import_react18 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var UploadInputAdapter = (props) => {
@@ -4450,7 +4564,7 @@ var UploadInputAdapter = (props) => {
     onCancel
   } = props;
   const onEvent = useEventDispatcher();
-  const files = (0, import_react18.useMemo)(() => fileId ? [{ id: fileId, status: import_components13.Status.SUCCEEDED }] : [], [fileId]);
+  const files = (0, import_react18.useMemo)(() => fileId ? [{ id: fileId, status: import_components15.Status.SUCCEEDED }] : [], [fileId]);
   const uploadFile = (formData) => {
     onEvent("Dynamic Flow - PersistAsync", { status: "pending", schemaId: id });
     return httpClient(`${httpOptions.url}`, {
@@ -4469,7 +4583,7 @@ var UploadInputAdapter = (props) => {
     });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-    import_components13.UploadInput,
+    import_components15.UploadInput,
     {
       id,
       fileInputName: httpOptions.fileInputName,
@@ -4605,7 +4719,7 @@ var getSelectionFromModel = (schema, model) => {
 };
 
 // src/jsonSchemaForm/promotedOneOfSchema/promotedOneOfControl/PromotedOneOfCheckboxControl.tsx
-var import_components14 = require("@transferwise/components");
+var import_components16 = require("@transferwise/components");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var PromotedOneOfCheckboxControl = (props) => {
   const { id, selection, setSelection } = props;
@@ -4617,13 +4731,13 @@ var PromotedOneOfCheckboxControl = (props) => {
   const toggleSelection = () => {
     setSelection(checked ? selectionWhenUnchecked : selectionWhenChecked);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "form-group", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_components14.Checkbox, { id, label: title, checked, onChange: toggleSelection }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "form-group", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_components16.Checkbox, { id, label: title, checked, onChange: toggleSelection }) });
 };
 PromotedOneOfCheckboxControl.defaultProps = {};
 var PromotedOneOfCheckboxControl_default = PromotedOneOfCheckboxControl;
 
 // src/jsonSchemaForm/promotedOneOfSchema/promotedOneOfControl/PromotedOneOfRadioControl.tsx
-var import_components15 = require("@transferwise/components");
+var import_components17 = require("@transferwise/components");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var PromotedOneOfRadioControl = (props) => {
   var _a, _b;
@@ -4644,7 +4758,7 @@ var PromotedOneOfRadioControl = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "form-group", children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("label", { className: "control-label", htmlFor: id, children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-      import_components15.RadioGroup,
+      import_components17.RadioGroup,
       {
         name: "promoted-selection",
         selectedValue: selection,
@@ -4735,7 +4849,7 @@ function getOtherOneOf(schema) {
 var PromotedOneOfSchema_default = PromotedOneOfSchema;
 
 // src/jsonSchemaForm/readOnlySchema/ReadOnlySchema.tsx
-var import_components16 = require("@transferwise/components");
+var import_components18 = require("@transferwise/components");
 var import_react_intl15 = require("react-intl");
 
 // src/jsonSchemaForm/readOnlySchema/ReadOnlySchema.messages.js
@@ -4759,7 +4873,7 @@ var ReadOnlySchema = ({ schema, model }) => {
   const { title = "" } = schema;
   const { formatMessage } = (0, import_react_intl15.useIntl)();
   const value = getValueForSchema({ schema, model, formatMessage });
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_components16.DefinitionList, { layout: import_components16.Layout.VERTICAL_ONE_COLUMN, definitions: [{ title, value, key: "" }] });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_components18.DefinitionList, { layout: import_components18.Layout.VERTICAL_ONE_COLUMN, definitions: [{ title, value, key: "" }] });
 };
 var ReadOnlySchema_default = ReadOnlySchema;
 function getValueForSchema({
@@ -5003,18 +5117,18 @@ var DynamicHeading = (props) => {
 var DynamicHeading_default = DynamicHeading;
 
 // src/layout/markdown/DynamicMarkdown.tsx
-var import_components17 = require("@transferwise/components");
+var import_components19 = require("@transferwise/components");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var DynamicMarkdown = ({ component }) => {
   const { content, align, margin } = component;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: getTextAlignmentAndMargin({ align, margin }), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_components17.Markdown, { config: { link: { target: "_blank" } }, children: content }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: getTextAlignmentAndMargin({ align, margin }), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_components19.Markdown, { config: { link: { target: "_blank" } }, children: content }) });
 };
 var DynamicInfo = ({ component }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: getTextAlignmentAndMargin(component), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_components17.Markdown, { config: { link: { target: "_blank" } }, children: component.markdown }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: getTextAlignmentAndMargin(component), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_components19.Markdown, { config: { link: { target: "_blank" } }, children: component.markdown }) });
 };
 
 // src/layout/image/DynamicImage.tsx
-var import_components18 = require("@transferwise/components");
+var import_components20 = require("@transferwise/components");
 var import_react24 = require("react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var DynamicImage = ({ component: image }) => {
@@ -5033,7 +5147,7 @@ var DynamicImage = ({ component: image }) => {
   if (!imageSource) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: `df-image ${size || "md"}`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_components18.Image, __spreadValues({ className: `img-responsive ${getMargin(margin || "md")}` }, imageProps)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: `df-image ${size || "md"}`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_components20.Image, __spreadValues({ className: `img-responsive ${getMargin(margin || "md")}` }, imageProps)) });
 };
 var readImageBlobAsDataURL = (imageBlob) => {
   return new Promise((resolve, reject) => {
@@ -5066,7 +5180,7 @@ var getImageSource = async (httpClient, imageUrl) => {
 var DynamicImage_default = DynamicImage;
 
 // src/layout/instructions/DynamicInstructions.tsx
-var import_components19 = require("@transferwise/components");
+var import_components21 = require("@transferwise/components");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var doContext = ["positive", "neutral"];
 var dontContext = ["warning", "negative"];
@@ -5075,8 +5189,8 @@ var DynamicInstructions = ({ component }) => {
   const dos = items.filter((item) => doContext.includes(item.context)).map(({ text }) => text);
   const donts = items.filter((item) => dontContext.includes(item.context)).map(({ text }) => text);
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: getMargin(component.margin || "md"), children: [
-    component.title ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_components19.Header, { title: component.title }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_components19.InstructionsList, { dos, donts })
+    component.title ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_components21.Header, { title: component.title }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_components21.InstructionsList, { dos, donts })
   ] });
 };
 var DynamicInstructions_default = DynamicInstructions;
@@ -5173,15 +5287,11 @@ var DynamicLayout = (props) => {
 var DynamicLayout_default = DynamicLayout;
 
 // src/layout/list/DynamicStatusList.tsx
-var import_components20 = require("@transferwise/components");
+var import_components22 = require("@transferwise/components");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var DynamicStatusList = ({ component }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: getMargin(component.margin || "md"), children: [
-    component.title ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("h4", { className: "m-b-2", children: [
-      " ",
-      component.title,
-      " "
-    ] }) : null,
+    component.title ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_components22.Header, { title: component.title }) : null,
     component.items.map(mapListItemToSummary)
   ] });
 };
@@ -5191,7 +5301,7 @@ var mapListItemToSummary = ({ title, description, icon, status }) => {
     title,
     description
   }, (icon == null ? void 0 : icon.name) ? { icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DynamicIcon_default, { type: icon.name }) } : {}), status ? { status: statusMap[status] } : {});
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_components20.Summary, __spreadValues({}, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_components22.Summary, __spreadValues({}, props));
 };
 var statusListMap = {
   done: "done",
@@ -5207,12 +5317,12 @@ var statusMap = __spreadValues(__spreadValues({}, statusListMap), legacyStatusMa
 var DynamicStatusList_default = DynamicStatusList;
 
 // src/layout/loadingIndicator/DynamicLoadingIndicator.tsx
-var import_components21 = require("@transferwise/components");
+var import_components23 = require("@transferwise/components");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var DynamicLoadingIndicator = ({ component }) => {
   const { margin, size = "md" } = component;
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-    import_components21.Loader,
+    import_components23.Loader,
     {
       size,
       classNames: {
@@ -5225,7 +5335,7 @@ var DynamicLoadingIndicator = ({ component }) => {
 var DynamicLoadingIndicator_default = DynamicLoadingIndicator;
 
 // src/layout/paragraph/DynamicParagraph.tsx
-var import_components23 = require("@transferwise/components");
+var import_components25 = require("@transferwise/components");
 var import_react_intl17 = require("react-intl");
 
 // src/layout/paragraph/DynamicParagraph.messages.ts
@@ -5244,10 +5354,10 @@ var DynamicParagraph_messages_default = (0, import_react_intl16.defineMessages)(
 });
 
 // src/layout/paragraph/useSnackBarIfAvailable.ts
-var import_components22 = require("@transferwise/components");
+var import_components24 = require("@transferwise/components");
 var import_react25 = require("react");
 function useSnackBarIfAvailable() {
-  const context = (0, import_react25.useContext)(import_components22.SnackbarContext);
+  const context = (0, import_react25.useContext)(import_components24.SnackbarContext);
   return context ? context.createSnackbar : noop2;
 }
 function noop2() {
@@ -5281,7 +5391,7 @@ var CopyableDynamicParagraph = ({ component }) => {
         style: { textOverflow: "ellipsis" }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_components23.Button, { block: true, onClick: copy, children: formatMessage(DynamicParagraph_messages_default.copy) })
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_components25.Button, { block: true, onClick: copy, children: formatMessage(DynamicParagraph_messages_default.copy) })
   ] });
 };
 function noop3() {
@@ -5289,7 +5399,7 @@ function noop3() {
 var DynamicParagraph_default = DynamicParagraph;
 
 // src/layout/review/DynamicReview.tsx
-var import_components24 = require("@transferwise/components");
+var import_components26 = require("@transferwise/components");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var getDefinitions = (orientation, review) => {
   return review.fields.map(
@@ -5323,28 +5433,22 @@ var getReviewLayout = (review) => {
 var DynamicReview = (props) => {
   const review = props.component;
   const margin = getMargin(review.margin || "xs");
-  const getReviewAction = (action) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-      "a",
-      {
-        href: action.url,
-        className: "pull-right",
-        role: "button",
-        onClick: (event) => {
-          event.preventDefault();
-          props.onAction(action);
-        },
-        children: action.title
+  const getReviewAction = (title, action) => ({
+    text: title != null ? title : "",
+    href: action.url,
+    onClick: (event) => {
+      event.preventDefault();
+      if (action) {
+        props.onAction(action);
       }
-    );
-  };
+    }
+  });
   const orientation = getReviewLayout(review);
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
-    review.title && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("h6", { className: "m-b-2", children: [
-      review.title,
-      review.action && getReviewAction(review.action)
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: margin, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_components24.DefinitionList, { layout: orientation, definitions: getDefinitions(orientation, review) }) })
+  const callToAction = review.callToAction ? getReviewAction(review.callToAction.title, review.callToAction.action) : null;
+  const legacyCallToAction = !callToAction && review.action ? getReviewAction(review.action.title || "", review.action) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: margin, children: [
+    review.title && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_components26.Header, { title: review.title, action: callToAction || legacyCallToAction || void 0 }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: margin, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_components26.DefinitionList, { layout: orientation, definitions: getDefinitions(orientation, review) }) })
   ] });
 };
 var DynamicReview_default = DynamicReview;
@@ -5353,16 +5457,17 @@ var DynamicReview_default = DynamicReview;
 var import_react27 = require("react");
 
 // src/layout/search/SearchInput.tsx
-var import_components25 = require("@transferwise/components");
+var import_components27 = require("@transferwise/components");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var SearchInput = ({ title, value, onFocus, onChange }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("label", { className: "control-label d-inline", children: [
     title,
     /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-      import_components25.Input,
+      import_components27.Input,
       {
         type: "text",
         value,
+        className: "m-t-1",
         onFocus,
         onChange: (event) => onChange(event.currentTarget.value)
       }
@@ -5371,7 +5476,7 @@ var SearchInput = ({ title, value, onFocus, onChange }) => {
 };
 
 // src/layout/search/SearchResults.tsx
-var import_components26 = require("@transferwise/components");
+var import_components28 = require("@transferwise/components");
 var import_react_intl19 = require("react-intl");
 
 // src/dynamicFlow/utils/errorBoundary/ErrorBoundary.messages.ts
@@ -5395,9 +5500,9 @@ var SearchResults = ({ results, emptyMessage, onSelect }) => {
   if (results.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "m-t-2", children: emptyMessage });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_components26.NavigationOptionsList, { children: results.map((result) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_components28.NavigationOptionsList, { children: results.map((result) => {
     return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-      import_components26.NavigationOption,
+      import_components28.NavigationOption,
       {
         title: result.title,
         content: result.description,
@@ -5615,7 +5720,7 @@ var BasicTypeSchema = (props) => {
   const formGroupClasses = {
     "form-group": true,
     "has-error": (props.submitted || !changed) && !!props.errors || (props.submitted || changed && blurred) && !!validations.length,
-    "has-info": focused && !!props.schema.description || !!props.infoMessage
+    "has-info": !!props.schema.description || !!props.infoMessage
   };
   const showLabel = props.schema.format !== "file" && props.schema.type !== "boolean";
   const schemaHelp = props.schema.help;
@@ -5623,7 +5728,7 @@ var BasicTypeSchema = (props) => {
   return !isHidden ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
     props.schema.alert && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(DynamicAlert_default, { component: props.schema.alert }),
     /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: (0, import_classnames6.default)(formGroupClasses), children: [
-      showLabel && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "d-inline-block", children: [
+      showLabel && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "d-inline-block m-b-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("label", { className: "control-label d-inline", htmlFor: id, children: props.schema.title }),
         !!schemaHelp && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Help_default, { help: schemaHelp })
       ] }),
@@ -6036,7 +6141,7 @@ var CameraCapture_messages_default = (0, import_react_intl22.defineMessages)({
 });
 
 // src/step/cameraStep/cameraCapture/components/bottomBar/BottomBar.tsx
-var import_components27 = require("@transferwise/components");
+var import_components29 = require("@transferwise/components");
 var import_react_intl23 = require("react-intl");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var CaptureBottomBar = ({ onCapture }) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "bottom-bar", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(CaptureButton, { onClick: onCapture }) });
@@ -6047,24 +6152,24 @@ var ReviewBottomBar = ({
   const intl = (0, import_react_intl23.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "bottom-bar p-x-2", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "col-xs-12 col-md-6 col-md-offset-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-      import_components27.Button,
+      import_components29.Button,
       {
         className: "m-b-1",
         block: true,
-        size: import_components27.Size.MEDIUM,
-        type: import_components27.ControlType.ACCENT,
+        size: import_components29.Size.MEDIUM,
+        type: import_components29.ControlType.ACCENT,
         onClick: onSubmit,
         children: intl.formatMessage(CameraCapture_messages_default.reviewSubmit)
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-      import_components27.Button,
+      import_components29.Button,
       {
         className: "m-b-2",
         block: true,
-        size: import_components27.Size.MEDIUM,
-        type: import_components27.ControlType.ACCENT,
-        priority: import_components27.Priority.SECONDARY,
+        size: import_components29.Size.MEDIUM,
+        type: import_components29.ControlType.ACCENT,
+        priority: import_components29.Priority.SECONDARY,
         onClick: onRetry,
         children: intl.formatMessage(CameraCapture_messages_default.reviewRetry)
       }
@@ -6303,7 +6408,7 @@ var Overlay = ({
 var Overlay_default = Overlay;
 
 // src/step/cameraStep/cameraCapture/screens/NoCameraAccess/NoCameraAccess.tsx
-var import_components28 = require("@transferwise/components");
+var import_components30 = require("@transferwise/components");
 var import_react_intl27 = require("react-intl");
 
 // src/step/cameraStep/cameraCapture/screens/NoCameraAccess/NoCameraAccess.messages.ts
@@ -6333,7 +6438,7 @@ var NoCameraAccess = ({ onAction }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { id: "no-camera-access", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "container p-t-5", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "col-md-6 col-md-offset-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("h2", { className: "text-xs-center m-b-3", children: intl.formatMessage(NoCameraAccess_messages_default.title) }),
     /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "text-xs-center m-b-5", children: intl.formatMessage(NoCameraAccess_messages_default.paragraph) }),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_components28.Button, { block: true, onClick: onAction, children: intl.formatMessage(NoCameraAccess_messages_default.action) })
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_components30.Button, { block: true, onClick: onAction, children: intl.formatMessage(NoCameraAccess_messages_default.action) })
   ] }) }) }) });
 };
 var NoCameraAccess_default = NoCameraAccess;
@@ -6702,7 +6807,7 @@ function getOrigin(url) {
 }
 
 // src/dynamicFlow/BackButton.tsx
-var import_components30 = require("@transferwise/components");
+var import_components32 = require("@transferwise/components");
 var import_icons2 = require("@transferwise/icons");
 var import_jsx_runtime65 = require("react/jsx-runtime");
 var BackButton = ({ title, action, onAction }) => {
@@ -6718,7 +6823,7 @@ var BackButton = ({ title, action, onAction }) => {
       "aria-label": title,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "sr-only", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_components30.Avatar, { type: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_icons2.ArrowLeft, { size: "24" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_components32.Avatar, { type: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_icons2.ArrowLeft, { size: "24" }) })
       ]
     }
   );
@@ -6892,19 +6997,19 @@ var isInlineSchema = (schema) => {
 };
 
 // src/dynamicFlow/utils/useLoader.tsx
-var import_components31 = require("@transferwise/components");
+var import_components33 = require("@transferwise/components");
 var import_react41 = require("react");
 var import_jsx_runtime67 = require("react/jsx-runtime");
 function useLoader(loaderConfig, initialState) {
   const config = __spreadValues({
-    size: import_components31.Size.EXTRA_LARGE,
+    size: import_components33.Size.EXTRA_LARGE,
     initial: true,
     submission: false
   }, loaderConfig);
   const [loadingState, setLoadingState] = (0, import_react41.useState)(initialState);
   const shouldDisplayLoader = config.initial && loadingState === "initial" || config.submission && loadingState === "submission";
   const loader = shouldDisplayLoader ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
-    import_components31.Loader,
+    import_components33.Loader,
     {
       size: config.size,
       classNames: { "tw-loader": "tw-loader m-x-auto" },
@@ -6918,20 +7023,20 @@ function useLoader(loaderConfig, initialState) {
 var import_react42 = require("react");
 
 // src/dynamicFlow/utils/errorBoundary/ErrorBoundaryAlert.tsx
-var import_components32 = require("@transferwise/components");
+var import_components34 = require("@transferwise/components");
 var import_react_intl33 = require("react-intl");
 var import_jsx_runtime68 = require("react/jsx-runtime");
 var ErrorBoundaryAlert = ({ onDismiss }) => {
   const { formatMessage } = (0, import_react_intl33.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-    import_components32.Alert,
+    import_components34.Alert,
     {
       action: {
         text: formatMessage(ErrorBoundary_messages_default.retry),
         href: window.location.href
       },
       message: formatMessage(ErrorBoundary_messages_default.errorAlert),
-      type: import_components32.Sentiment.NEGATIVE,
+      type: import_components34.Sentiment.NEGATIVE,
       className: "m-b-3",
       onDismiss
     }
@@ -7929,7 +8034,7 @@ var th_default = {
 // src/i18n/tr.json
 var tr_default = {
   "dynamicFlows.ArraySchema.addItem": "Kaydet",
-  "dynamicFlows.ArraySchema.addItemTitle": "Add Item",
+  "dynamicFlows.ArraySchema.addItemTitle": "\xD6\u011Fe ekle",
   "dynamicFlows.ArraySchema.editItem": "Kaydet",
   "dynamicFlows.ArraySchema.maxItemsError": "L\xFCtfen {maxItems} veya daha az ekleme yap\u0131n",
   "dynamicFlows.ArraySchema.minItemsError": "L\xFCtfen en az {minItems} ekleme yap\u0131n.",
@@ -7942,7 +8047,7 @@ var tr_default = {
   "dynamicFlows.CameraCapture.reviewInstructions": "Foto\u011Fraf\u0131n\u0131z net, okunakl\u0131 ve eksiksiz mi?",
   "dynamicFlows.CameraCapture.reviewRetry": "Hay\u0131r, tekrar dene",
   "dynamicFlows.CameraCapture.reviewSubmit": "Evet, g\xF6nder",
-  "dynamicFlows.CameraCapture.rotatePhone.text": "Rotate your phone to portrait view to take a photo",
+  "dynamicFlows.CameraCapture.rotatePhone.text": "Foto\u011Fraf \xE7ekmek i\xE7in telefonunuzu dik pozisyonda tutun",
   "dynamicFlows.ControlFeedback.maxLength": "L\xFCtfen {maxLength} veya daha az karakter girin.",
   "dynamicFlows.ControlFeedback.maximum": "L\xFCtfen {maximum} veya daha d\xFC\u015F\xFCk bir say\u0131 girin.",
   "dynamicFlows.ControlFeedback.maximumDate": "L\xFCtfen {maximum} veya daha erken bir tarih girin.",