@wise/dynamic-flow-client 2.3.1 → 2.4.0

package/build/main.js

@@ -2018,11 +2018,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",
@@ -2316,15 +2320,15 @@ var getNavigationOptionMedia = ({ icon, image }) => {
 var getMargin = (size) => {
   switch (size) {
     case "xs":
-      return "m-t-0";
+      return "m-b-0";
     case "sm":
-      return "m-t-1";
+      return "m-b-1";
     case "md":
-      return "m-t-2";
+      return "m-b-2";
     case "lg":
-      return "m-t-3";
+      return "m-b-3";
     case "xl":
-      return "m-t-5";
+      return "m-b-5";
     default:
       return "";
   }
@@ -2621,6 +2625,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 +2653,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 +2681,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");
 
@@ -2751,9 +2756,9 @@ var ControlFeedback = (props) => {
   const isDescriptionVisible = props.focused && props.schema.description && !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 +2966,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 +2997,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,20 +3008,20 @@ 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),
@@ -3346,7 +3351,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,7 +3361,7 @@ 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, {}),
@@ -3364,7 +3369,7 @@ var RepeatableSchema = ({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      import_components9.Modal,
+      import_components10.Modal,
       {
         open: openModalType !== null,
         onClose: onCancelEdit,
@@ -3525,11 +3530,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 +3553,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 +3569,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
@@ -3764,7 +3770,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 +3780,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 +3795,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 +3819,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,7 +3837,8 @@ 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",
           {
@@ -3849,7 +3856,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 +3871,7 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
             "aria-describedby": describedBy
           }
         );
+      }
       case FormControlType.HIDDEN:
         return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "input",
@@ -3892,7 +3904,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 +3918,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 +3936,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,
@@ -3956,7 +3968,7 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
         };
         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 +3990,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 +4008,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,
@@ -4015,7 +4028,7 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
         };
         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 +4085,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 +4134,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 +4179,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 +4193,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));
@@ -4334,6 +4364,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 +4395,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 +4413,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: [
     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 +4463,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 +4481,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 +4500,7 @@ var UploadInputAdapter = (props) => {
     });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-    import_components13.UploadInput,
+    import_components15.UploadInput,
     {
       id,
       fileInputName: httpOptions.fileInputName,
@@ -4605,7 +4636,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 +4648,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 +4675,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 +4766,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 +4790,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 +5034,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 +5064,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 +5097,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 +5106,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 +5204,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 +5218,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 +5234,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 +5252,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 +5271,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() {
@@ -5269,7 +5296,7 @@ var CopyableDynamicParagraph = ({ component }) => {
     var _a;
     (_a = navigator.clipboard) == null ? void 0 : _a.writeText(text).then(() => createSnackbar({ text: formatMessage(DynamicParagraph_messages_default.copied) })).catch(noop3);
   };
-  const classNames7 = getTextAlignmentAndMargin({ align: component.align }) + " form-control";
+  const classNames7 = getTextAlignmentAndMargin({ align: component.align, margin: "sm" }) + " form-control";
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: getTextAlignmentAndMargin(component), children: [
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "input",
@@ -5281,7 +5308,7 @@ var CopyableDynamicParagraph = ({ component }) => {
         style: { textOverflow: "ellipsis" }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_components23.Button, { block: true, onClick: copy, className: getMargin("sm"), 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 +5316,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 +5350,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 ${margin}`, children: [
-      review.title,
-      review.action && getReviewAction(review.action)
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: review.title ? "" : 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,13 +5374,13 @@ 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,
@@ -5371,7 +5392,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 +5416,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,
@@ -6036,7 +6057,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 +6068,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 +6324,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 +6354,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 +6723,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 +6739,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 +6913,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 +6939,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
     }
@@ -7357,6 +7378,7 @@ var de_default = {
   "dynamicFlows.CameraCapture.reviewInstructions": "Ist das aufgenommene Bild deutlich erkennbar und vollst\xE4ndig?",
   "dynamicFlows.CameraCapture.reviewRetry": "Nein, erneut versuchen",
   "dynamicFlows.CameraCapture.reviewSubmit": "Ja, senden",
+  "dynamicFlows.CameraCapture.rotatePhone.text": "Drehe dein Ger\xE4t in die Hochformatansicht, um ein Foto aufzunehmen",
   "dynamicFlows.ControlFeedback.maxLength": "Bitte gib nicht mehr als {maxLength} Zeichen ein.",
   "dynamicFlows.ControlFeedback.maximum": "Bitte gib eine Zahl ein, die {maximum} oder weniger betr\xE4gt.",
   "dynamicFlows.ControlFeedback.maximumDate": "Bitte gib ein Datum ein, das am oder vor dem {maximum} liegt.",
@@ -7446,6 +7468,7 @@ var es_default = {
   "dynamicFlows.CameraCapture.reviewInstructions": "\xBFTu foto es clara, legible y completa?",
   "dynamicFlows.CameraCapture.reviewRetry": "No, intentar de nuevo",
   "dynamicFlows.CameraCapture.reviewSubmit": "S\xED, enviar",
+  "dynamicFlows.CameraCapture.rotatePhone.text": "Gira el tel\xE9fono a la vista vertical para hacer una foto",
   "dynamicFlows.ControlFeedback.maxLength": "Introduce {maxLength} caracteres o menos.",
   "dynamicFlows.ControlFeedback.maximum": "Introduce una cifra igual o inferior a {maximum}.",
   "dynamicFlows.ControlFeedback.maximumDate": "Introduce una fecha que sea igual o anterior al {maximum}.",
@@ -7490,6 +7513,7 @@ var fr_default = {
   "dynamicFlows.CameraCapture.reviewInstructions": "Votre image est-elle claire, lisible et dans son int\xE9gralit\xE9\xA0?",
   "dynamicFlows.CameraCapture.reviewRetry": "Non, r\xE9essayer",
   "dynamicFlows.CameraCapture.reviewSubmit": "Oui, confirmer",
+  "dynamicFlows.CameraCapture.rotatePhone.text": "Faites pivoter votre t\xE9l\xE9phone vers la vue portrait pour prendre une photo",
   "dynamicFlows.ControlFeedback.maxLength": "Veuillez saisir {maxLength} caract\xE8res ou moins.",
   "dynamicFlows.ControlFeedback.maximum": "Veuillez saisir un nombre inf\xE9rieur ou \xE9gal \xE0 {maximum}.",
   "dynamicFlows.ControlFeedback.maximumDate": "Veuillez saisir une date \xE9gale ou ant\xE9rieure au {maximum}.",
@@ -7534,6 +7558,7 @@ var hu_default = {
   "dynamicFlows.CameraCapture.reviewInstructions": "Tiszta, olvashat\xF3, teljes k\xE9pet k\xE9sz\xEDtett\xE9l?",
   "dynamicFlows.CameraCapture.reviewRetry": "Nem, pr\xF3b\xE1ljuk \xFAjra",
   "dynamicFlows.CameraCapture.reviewSubmit": "Igen, elk\xFCld\xF6m",
+  "dynamicFlows.CameraCapture.rotatePhone.text": "F\xE9nyk\xE9p k\xE9sz\xEDt\xE9s\xE9hez ford\xEDtsd a telefont \xE1ll\xF3 n\xE9zetbe",
   "dynamicFlows.ControlFeedback.maxLength": "K\xE9r\xFCnk, legfeljebb {maxLength} karaktert adj meg.",
   "dynamicFlows.ControlFeedback.maximum": "K\xE9r\xFCnk, add meg ezt vagy egy enn\xE9l kisebb sz\xE1mot: {maximum}.",
   "dynamicFlows.ControlFeedback.maximumDate": "K\xE9r\xFCnk, adj meg egy d\xE1tumot, ami megegyezik {maximum} napj\xE1val, vagy egy enn\xE9l kor\xE1bbit.",
@@ -7578,6 +7603,7 @@ var id_default = {
   "dynamicFlows.CameraCapture.reviewInstructions": "Apakah gambar Anda jelas, dapat dibaca, dan lengkap?",
   "dynamicFlows.CameraCapture.reviewRetry": "Tidak, coba lagi",
   "dynamicFlows.CameraCapture.reviewSubmit": "Ya, kirim",
+  "dynamicFlows.CameraCapture.rotatePhone.text": "Putar ponsel Anda ke tampilan potret untuk mengambil foto",
   "dynamicFlows.ControlFeedback.maxLength": "Harap masukkan {maxLength} karakter atau kurang.",
   "dynamicFlows.ControlFeedback.maximum": "Harap masukkan angka paling besar {maximum} atau kurang dari itu.",
   "dynamicFlows.ControlFeedback.maximumDate": "Harap masukkan tanggal pada atau sebelum {maximum}.",
@@ -7622,6 +7648,7 @@ var it_default = {
   "dynamicFlows.CameraCapture.reviewInstructions": "La tua foto \xE8 chiara, ben leggibile e completa?",
   "dynamicFlows.CameraCapture.reviewRetry": "No, riprova",
   "dynamicFlows.CameraCapture.reviewSubmit": "S\xEC, invia",
+  "dynamicFlows.CameraCapture.rotatePhone.text": "Ruota il telefono in posizione verticale per scattare una foto",
   "dynamicFlows.ControlFeedback.maxLength": "Inserisci un massimo di {maxLength} caratteri.",
   "dynamicFlows.ControlFeedback.maximum": "Inserisci un numero uguale o inferiore a {maximum}.",
   "dynamicFlows.ControlFeedback.maximumDate": "Inserisci una data corrispondente o precedente al {maximum}.",
@@ -7666,6 +7693,7 @@ var ja_default = {
   "dynamicFlows.CameraCapture.reviewInstructions": "\u5199\u771F\u304C\u9BAE\u660E\u3067\u3001\u3059\u3079\u3066\u306E\u60C5\u5831\u304C\u8AAD\u307F\u53D6\u308C\u6B20\u3051\u3066\u3044\u308B\u90E8\u5206\u306A\u3069\u306F\u3042\u308A\u307E\u305B\u3093\u304B\uFF1F",
   "dynamicFlows.CameraCapture.reviewRetry": "\u3044\u3044\u3048\u3001\u64AE\u308A\u76F4\u3059",
   "dynamicFlows.CameraCapture.reviewSubmit": "\u306F\u3044\u3001\u9001\u4FE1\u3059\u308B",
+  "dynamicFlows.CameraCapture.rotatePhone.text": "\u7E26\u9577\u306E\u5199\u771F\u3092\u64AE\u5F71\u3059\u308B\u306B\u306F\u30B9\u30DE\u30FC\u30C8\u30D5\u30A9\u30F3\u3092\u56DE\u8EE2\u3055\u305B\u3066\u304F\u3060\u3055\u3044",
   "dynamicFlows.ControlFeedback.maxLength": "{maxLength}\u6587\u5B57\u4EE5\u4E0B\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
   "dynamicFlows.ControlFeedback.maximum": "{maximum}\u4EE5\u4E0B\u306E\u6570\u5B57\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
   "dynamicFlows.ControlFeedback.maximumDate": "{maximum}\u307E\u305F\u306F\u305D\u308C\u4EE5\u524D\u306E\u65E5\u4ED8\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
@@ -7710,6 +7738,7 @@ var pl_default = {
   "dynamicFlows.CameraCapture.reviewInstructions": "Czy Twoje zdj\u0119cie jest wyra\u017Ane, czytelne i kompletne?",
   "dynamicFlows.CameraCapture.reviewRetry": "Nie, spr\xF3buj ponownie",
   "dynamicFlows.CameraCapture.reviewSubmit": "Tak, prze\u015Blij",
+  "dynamicFlows.CameraCapture.rotatePhone.text": "Obr\xF3\u0107 sw\xF3j telefon do widoku pionowego, \u017Ceby zrobi\u0107 zdj\u0119cie",
   "dynamicFlows.ControlFeedback.maxLength": "Prosimy wprowadzi\u0107 do {maxLength} znak\xF3w.",
   "dynamicFlows.ControlFeedback.maximum": "Wprowad\u017A liczb\u0119 r\xF3wn\u0105 lub mniejsz\u0105 ni\u017C {maximum}.",
   "dynamicFlows.ControlFeedback.maximumDate": "Wprowad\u017A dat\u0119 nie p\xF3\u017Aniejsz\u0105 ni\u017C {maximum}.",
@@ -7754,6 +7783,7 @@ var pt_default = {
   "dynamicFlows.CameraCapture.reviewInstructions": "A sua foto est\xE1 clara, leg\xEDvel e aparece por inteiro?",
   "dynamicFlows.CameraCapture.reviewRetry": "N\xE3o, tentar novamente",
   "dynamicFlows.CameraCapture.reviewSubmit": "Sim, enviar",
+  "dynamicFlows.CameraCapture.rotatePhone.text": "Rotate your phone to portrait view to take a photo",
   "dynamicFlows.ControlFeedback.maxLength": "Por favor, insira {maxLength} caracteres ou menos.",
   "dynamicFlows.ControlFeedback.maximum": "Por favor, insira um n\xFAmero que seja {maximum} ou menos.",
   "dynamicFlows.ControlFeedback.maximumDate": "Por favor, insira uma data que seja em ou antes de {maximum}.",
@@ -7798,6 +7828,7 @@ var ro_default = {
   "dynamicFlows.CameraCapture.reviewInstructions": "Imaginea ta este clar\u0103, lizibil\u0103 \u0219i complet\u0103?",
   "dynamicFlows.CameraCapture.reviewRetry": "Nu, \xEEncearc\u0103 din nou",
   "dynamicFlows.CameraCapture.reviewSubmit": "Da, trimite",
+  "dynamicFlows.CameraCapture.rotatePhone.text": "Rote\u0219te-\u021Bi telefonul \xEEn modul portret pentru a face o fotografie",
   "dynamicFlows.ControlFeedback.maxLength": "Te rug\u0103m s\u0103 introduci {maxLength} sau mai pu\u021Bine caractere.",
   "dynamicFlows.ControlFeedback.maximum": "Te rug\u0103m s\u0103 introduci un num\u0103r egal cu {maximum} sau mai mic.",
   "dynamicFlows.ControlFeedback.maximumDate": "Te rug\u0103m s\u0103 introduci o dat\u0103 de \xEEnainte de sau egal\u0103 cu {maximum}.",
@@ -7842,6 +7873,7 @@ var ru_default = {
   "dynamicFlows.CameraCapture.reviewInstructions": "\u0412\u0430\u0448\u0430 \u0444\u043E\u0442\u043E\u0433\u0440\u0430\u0444\u0438\u044F \u0447\u0435\u0442\u043A\u0430\u044F, \u043B\u0435\u0433\u043A\u043E \u0447\u0438\u0442\u0430\u0435\u043C\u0430\u044F \u0438 \u043D\u0435 \u043E\u0431\u0440\u0435\u0437\u0430\u043D\u0430?",
   "dynamicFlows.CameraCapture.reviewRetry": "\u041D\u0435\u0442, \u043F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0435\u0449\u0435 \u0440\u0430\u0437",
   "dynamicFlows.CameraCapture.reviewSubmit": "\u0414\u0430, \u043E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C",
+  "dynamicFlows.CameraCapture.rotatePhone.text": "\u041F\u043E\u0432\u0435\u0440\u043D\u0438\u0442\u0435 \u0442\u0435\u043B\u0435\u0444\u043E\u043D \u0432 \u043F\u043E\u0440\u0442\u0440\u0435\u0442\u043D\u044B\u0439 \u0440\u0435\u0436\u0438\u043C, \u0447\u0442\u043E\u0431\u044B \u0441\u0434\u0435\u043B\u0430\u0442\u044C \u0444\u043E\u0442\u043E\u0433\u0440\u0430\u0444\u0438\u044E",
   "dynamicFlows.ControlFeedback.maxLength": "\u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0432\u0432\u0435\u0434\u0438\u0442\u0435 {maxLength} \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432 \u0438\u043B\u0438 \u043C\u0435\u043D\u044C\u0448\u0435.",
   "dynamicFlows.ControlFeedback.maximum": "\u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0432\u0432\u0435\u0434\u0438\u0442\u0435 \u0447\u0438\u0441\u043B\u043E, \u0440\u0430\u0432\u043D\u043E\u0435 {maximum} \u0438\u043B\u0438 \u043C\u0435\u043D\u044C\u0448\u0435.",
   "dynamicFlows.ControlFeedback.maximumDate": "\u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0432\u0432\u0435\u0434\u0438\u0442\u0435 \u0434\u0430\u0442\u0443, \u0440\u0430\u0432\u043D\u0443\u044E {maximum} \u0438\u043B\u0438 \u0431\u043E\u043B\u0435\u0435 \u0440\u0430\u043D\u043D\u044E\u044E.",
@@ -7886,6 +7918,7 @@ var th_default = {
   "dynamicFlows.CameraCapture.reviewInstructions": "\u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13\u0E0A\u0E31\u0E14\u0E40\u0E08\u0E19 \u0E2D\u0E48\u0E32\u0E19\u0E44\u0E14\u0E49 \u0E41\u0E25\u0E30\u0E04\u0E23\u0E1A\u0E16\u0E49\u0E27\u0E19\u0E2B\u0E23\u0E37\u0E2D\u0E44\u0E21\u0E48",
   "dynamicFlows.CameraCapture.reviewRetry": "\u0E44\u0E21\u0E48 \u0E25\u0E2D\u0E07\u0E2D\u0E35\u0E01\u0E17\u0E31\u0E49\u0E07",
   "dynamicFlows.CameraCapture.reviewSubmit": "\u0E43\u0E0A\u0E48 \u0E2A\u0E48\u0E07\u0E40\u0E25\u0E22",
+  "dynamicFlows.CameraCapture.rotatePhone.text": "Rotate your phone to portrait view to take a photo",
   "dynamicFlows.ControlFeedback.maxLength": "\u0E42\u0E1B\u0E23\u0E14\u0E1B\u0E49\u0E2D\u0E19 {maxLength} \u0E2D\u0E31\u0E01\u0E02\u0E23\u0E30\u0E2B\u0E23\u0E37\u0E2D\u0E19\u0E49\u0E2D\u0E22\u0E01\u0E27\u0E48\u0E32",
   "dynamicFlows.ControlFeedback.maximum": "\u0E42\u0E1B\u0E23\u0E14\u0E1B\u0E49\u0E2D\u0E19\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02 {maximum} \u0E2B\u0E23\u0E37\u0E2D\u0E19\u0E49\u0E2D\u0E22\u0E01\u0E27\u0E48\u0E32",
   "dynamicFlows.ControlFeedback.maximumDate": "\u0E42\u0E1B\u0E23\u0E14\u0E1B\u0E49\u0E2D\u0E19\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E17\u0E35\u0E48\u0E2D\u0E22\u0E39\u0E48\u0E15\u0E23\u0E07\u0E1E\u0E2D\u0E14\u0E35\u0E2B\u0E23\u0E37\u0E2D\u0E01\u0E48\u0E2D\u0E19 {maximum}",
@@ -7930,6 +7963,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.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.",
@@ -7974,6 +8008,7 @@ var zh_CN_default = {
   "dynamicFlows.CameraCapture.reviewInstructions": "\u60A8\u7684\u56FE\u7247\u662F\u5426\u6E05\u6670\u3001\u53EF\u8BFB\u548C\u5B8C\u6574\uFF1F",
   "dynamicFlows.CameraCapture.reviewRetry": "\u5426\uFF0C\u91CD\u8BD5",
   "dynamicFlows.CameraCapture.reviewSubmit": "\u662F\uFF0C\u63D0\u4EA4",
+  "dynamicFlows.CameraCapture.rotatePhone.text": "Rotate your phone to portrait view to take a photo",
   "dynamicFlows.ControlFeedback.maxLength": "\u8BF7\u8F93\u5165 {maxLength} \u4E2A\u6216\u66F4\u5C11\u5B57\u7B26",
   "dynamicFlows.ControlFeedback.maximum": "\u8BF7\u8F93\u5165\u4E00\u4E2A\u5C0F\u4E8E\u6216\u7B49\u4E8E {maximum} \u7684\u6570\u5B57",
   "dynamicFlows.ControlFeedback.maximumDate": "\u8BF7\u8F93\u5165 {maximum} \u6216\u4E4B\u524D\u7684\u65E5\u671F",
@@ -8018,6 +8053,7 @@ var zh_HK_default = {
   "dynamicFlows.CameraCapture.reviewInstructions": "\u4F60\u7684\u7167\u7247\u662F\u5426\u5B8C\u6574\u3001\u6E05\u6670\u53CA\u53EF\u8B80\uFF1F",
   "dynamicFlows.CameraCapture.reviewRetry": "\u5426\uFF0C\u518D\u8A66\u4E00\u6B21",
   "dynamicFlows.CameraCapture.reviewSubmit": "\u662F\uFF0C\u63D0\u4EA4",
+  "dynamicFlows.CameraCapture.rotatePhone.text": "\u5C07\u624B\u6A5F\u65CB\u8F49\u81F3\u5782\u76F4\u756B\u9762\u4EE5\u62CD\u7167",
   "dynamicFlows.ControlFeedback.maxLength": "\u8ACB\u8F38\u5165\u6700\u591A{maxLength}\u500B\u5B57\u5143\u3002",
   "dynamicFlows.ControlFeedback.maximum": "\u8ACB\u8F38\u5165\u4E00\u500B\u5C0F\u65BC\u6216\u7B49\u65BC{maximum}\u7684\u6578\u5B57\u3002",
   "dynamicFlows.ControlFeedback.maximumDate": "\u8ACB\u8F38\u5165{maximum}\u6216\u4E4B\u524D\u7684\u65E5\u671F\u3002",