@wise/dynamic-flow-client 2.2.1 → 2.3.0-beta-c55f65.18

package/build/main.js

@@ -529,6 +529,169 @@ var require_react_webcam = __commonJS({
   }
 });
 
+// ../../node_modules/.pnpm/screenfull@5.2.0/node_modules/screenfull/dist/screenfull.js
+var require_screenfull = __commonJS({
+  "../../node_modules/.pnpm/screenfull@5.2.0/node_modules/screenfull/dist/screenfull.js"(exports, module2) {
+    "use strict";
+    (function() {
+      "use strict";
+      var document2 = typeof window !== "undefined" && typeof window.document !== "undefined" ? window.document : {};
+      var isCommonjs = typeof module2 !== "undefined" && module2.exports;
+      var fn = function() {
+        var val;
+        var fnMap = [
+          [
+            "requestFullscreen",
+            "exitFullscreen",
+            "fullscreenElement",
+            "fullscreenEnabled",
+            "fullscreenchange",
+            "fullscreenerror"
+          ],
+          // New WebKit
+          [
+            "webkitRequestFullscreen",
+            "webkitExitFullscreen",
+            "webkitFullscreenElement",
+            "webkitFullscreenEnabled",
+            "webkitfullscreenchange",
+            "webkitfullscreenerror"
+          ],
+          // Old WebKit
+          [
+            "webkitRequestFullScreen",
+            "webkitCancelFullScreen",
+            "webkitCurrentFullScreenElement",
+            "webkitCancelFullScreen",
+            "webkitfullscreenchange",
+            "webkitfullscreenerror"
+          ],
+          [
+            "mozRequestFullScreen",
+            "mozCancelFullScreen",
+            "mozFullScreenElement",
+            "mozFullScreenEnabled",
+            "mozfullscreenchange",
+            "mozfullscreenerror"
+          ],
+          [
+            "msRequestFullscreen",
+            "msExitFullscreen",
+            "msFullscreenElement",
+            "msFullscreenEnabled",
+            "MSFullscreenChange",
+            "MSFullscreenError"
+          ]
+        ];
+        var i = 0;
+        var l = fnMap.length;
+        var ret = {};
+        for (; i < l; i++) {
+          val = fnMap[i];
+          if (val && val[1] in document2) {
+            for (i = 0; i < val.length; i++) {
+              ret[fnMap[0][i]] = val[i];
+            }
+            return ret;
+          }
+        }
+        return false;
+      }();
+      var eventNameMap = {
+        change: fn.fullscreenchange,
+        error: fn.fullscreenerror
+      };
+      var screenfull2 = {
+        request: function(element, options) {
+          return new Promise(function(resolve, reject) {
+            var onFullScreenEntered = function() {
+              this.off("change", onFullScreenEntered);
+              resolve();
+            }.bind(this);
+            this.on("change", onFullScreenEntered);
+            element = element || document2.documentElement;
+            var returnPromise = element[fn.requestFullscreen](options);
+            if (returnPromise instanceof Promise) {
+              returnPromise.then(onFullScreenEntered).catch(reject);
+            }
+          }.bind(this));
+        },
+        exit: function() {
+          return new Promise(function(resolve, reject) {
+            if (!this.isFullscreen) {
+              resolve();
+              return;
+            }
+            var onFullScreenExit = function() {
+              this.off("change", onFullScreenExit);
+              resolve();
+            }.bind(this);
+            this.on("change", onFullScreenExit);
+            var returnPromise = document2[fn.exitFullscreen]();
+            if (returnPromise instanceof Promise) {
+              returnPromise.then(onFullScreenExit).catch(reject);
+            }
+          }.bind(this));
+        },
+        toggle: function(element, options) {
+          return this.isFullscreen ? this.exit() : this.request(element, options);
+        },
+        onchange: function(callback) {
+          this.on("change", callback);
+        },
+        onerror: function(callback) {
+          this.on("error", callback);
+        },
+        on: function(event, callback) {
+          var eventName = eventNameMap[event];
+          if (eventName) {
+            document2.addEventListener(eventName, callback, false);
+          }
+        },
+        off: function(event, callback) {
+          var eventName = eventNameMap[event];
+          if (eventName) {
+            document2.removeEventListener(eventName, callback, false);
+          }
+        },
+        raw: fn
+      };
+      if (!fn) {
+        if (isCommonjs) {
+          module2.exports = { isEnabled: false };
+        } else {
+          window.screenfull = { isEnabled: false };
+        }
+        return;
+      }
+      Object.defineProperties(screenfull2, {
+        isFullscreen: {
+          get: function() {
+            return Boolean(document2[fn.fullscreenElement]);
+          }
+        },
+        element: {
+          enumerable: true,
+          get: function() {
+            return document2[fn.fullscreenElement];
+          }
+        },
+        isEnabled: {
+          enumerable: true,
+          get: function() {
+            return Boolean(document2[fn.fullscreenEnabled]);
+          }
+        }
+      });
+      if (isCommonjs) {
+        module2.exports = screenfull2;
+      } else {
+        window.screenfull = screenfull2;
+      }
+    })();
+  }
+});
+
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
@@ -854,8 +1017,8 @@ function isReference(block) {
 }
 
 // src/dynamicFlow/DynamicFlow.tsx
-var import_react41 = require("react");
-var import_react_intl32 = require("react-intl");
+var import_react42 = require("react");
+var import_react_intl34 = require("react-intl");
 
 // src/common/contexts/dynamicFlowContexts/DynamicFlowContexts.tsx
 var import_react2 = require("react");
@@ -1713,6 +1876,30 @@ var isNullableArrayModel = (model) => {
 // src/common/utils/misc-utils.ts
 var isBasicError = (error) => isString(error) || isNull(error);
 
+// src/common/utils/mobile-utils.ts
+var isMobile = () => {
+  return isMobileScreenSize() && (isTouchScreen() || isMobileUA());
+};
+var isMobileUA = (userAgent = window.navigator.userAgent) => {
+  return /Mobi|\b(iPhone|Android|BlackBerry|webOS|Windows Phone)\b/i.test(userAgent);
+};
+var isMobileScreenSize = (width = window.screen.width, height = window.screen.height) => {
+  return width < 768 || height < 768;
+};
+var isTouchScreen = (navigator2 = window.navigator, matchMedia = window.matchMedia) => {
+  if ("maxTouchPoints" in navigator2) {
+    return navigator2.maxTouchPoints > 0;
+  }
+  if ("msMaxTouchPoints" in navigator2) {
+    return navigator2["msMaxTouchPoints"] > 0;
+  }
+  const mQ = matchMedia == null ? void 0 : matchMedia("(pointer:coarse)");
+  if ((mQ == null ? void 0 : mQ.media) === "(pointer:coarse)") {
+    return !!mQ.matches;
+  }
+  return false;
+};
+
 // src/common/hooks/useDebouncedFunction/useDebouncedFunction.tsx
 var import_react6 = require("react");
 function useDebouncedFunction(callback, waitMs) {
@@ -4758,99 +4945,69 @@ var isValidGenericSchema = (schema, model, errors) => {
   return false;
 };
 
-// src/jsonSchemaForm/JsonSchemaForm.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var JsonSchemaForm = (props) => {
-  const schemaProps = __spreadValues({
-    model: null,
-    errors: null,
-    disabled: false,
-    baseUrl: ""
-  }, props);
-  if (useHasHttpClientProvider() || schemaProps.baseUrl == null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(GenericSchema_default, __spreadValues({}, schemaProps));
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-    Providers,
-    {
-      baseUrl: schemaProps.baseUrl,
-      onEvent: schemaProps.onEvent,
-      onLog: schemaProps.onLog,
-      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(GenericSchema_default, __spreadValues({}, schemaProps))
-    }
-  );
-};
-var JsonSchemaForm_default = JsonSchemaForm;
-var Providers = ({ baseUrl, onEvent, onLog, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(LogProvider, { flowId: "JsonSchemaForm", stepId: "JsonSchemaForm", onLog: onLog != null ? onLog : noop2, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-    EventsContextProvider,
-    {
-      metadata: { flowId: "JsonSchemaForm", stepId: "JsonSchemaForm" },
-      onEvent: onEvent != null ? onEvent : noop2,
-      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(HttpClientProviderFromBaseUrl, { baseUrl, children })
-    }
-  ) });
-};
-var noop2 = () => {
-};
-
 // src/layout/form/DynamicForm.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var DynamicForm = (props) => {
-  const form = props.component;
-  const formSchema = form.schema;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: getMargin(form.margin || "md"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-    JsonSchemaForm_default,
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var DynamicForm = ({
+  component,
+  model = null,
+  errors = null,
+  submitted,
+  onModelChange,
+  onPersistAsync
+}) => {
+  const formSchema = component.schema;
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: getMargin(component.margin || "md"), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    GenericSchema_default,
     {
       schema: formSchema,
-      model: props.model,
-      submitted: props.submitted,
-      errors: props.errors,
+      model,
+      errors,
+      submitted,
       onChange: (parameters) => {
-        props.onModelChange(__spreadValues({ formSchema }, parameters));
+        onModelChange(__spreadValues({ formSchema }, parameters));
       },
-      onPersistAsync: props.onPersistAsync
+      onPersistAsync
     }
   ) });
 };
 var DynamicForm_default = DynamicForm;
 
 // src/layout/heading/DynamicHeading.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var DynamicHeading = (props) => {
   const { text, size = "md", align = "left", margin = "md" } = props.component;
   const classes = getTextAlignmentAndMargin({ align, margin });
   switch (size) {
     case "xs":
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h5", { className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h5", { className: classes, children: text });
     case "sm":
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h4", { className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h4", { className: classes, children: text });
     case "lg":
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h2", { className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h2", { className: classes, children: text });
     case "xl":
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h1", { className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h1", { className: classes, children: text });
     case "md":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h3", { className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h3", { className: classes, children: text });
   }
 };
 var DynamicHeading_default = DynamicHeading;
 
 // src/layout/markdown/DynamicMarkdown.tsx
 var import_components17 = require("@transferwise/components");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime42 = 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_runtime42.jsx)("div", { className: getTextAlignmentAndMargin({ align, margin }), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components17.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_runtime42.jsx)("div", { className: getTextAlignmentAndMargin(component), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components17.Markdown, { config: { link: { target: "_blank" } }, children: component.markdown }) });
 };
 
 // src/layout/image/DynamicImage.tsx
 var import_components18 = require("@transferwise/components");
 var import_react23 = require("react");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var DynamicImage = ({ component: image }) => {
   const { url, size, text, margin, accessibilityDescription } = image;
   const httpClient = useHttpClient();
@@ -4867,7 +5024,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_runtime43.jsx)("div", { className: `df-image ${size || "md"}`, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_components18.Image, __spreadValues({ className: `img-responsive ${getMargin(margin || "md")}` }, imageProps)) });
 };
 var readImageBlobAsDataURL = (imageBlob) => {
   return new Promise((resolve, reject) => {
@@ -4901,47 +5058,47 @@ var DynamicImage_default = DynamicImage;
 
 // src/layout/instructions/DynamicInstructions.tsx
 var import_components19 = require("@transferwise/components");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var doContext = ["positive", "neutral"];
 var dontContext = ["warning", "negative"];
 var DynamicInstructions = ({ component }) => {
   const { items } = 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 })
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: getMargin(component.margin || "md"), children: [
+    component.title ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_components19.Header, { title: component.title }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_components19.InstructionsList, { dos, donts })
   ] });
 };
 var DynamicInstructions_default = DynamicInstructions;
 
 // src/layout/DynamicLayout.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var getKey = (component) => JSON.stringify(component);
 var DynamicLayout = (props) => {
   const { components, model, submitted, errors, onModelChange, onAction, onPersistAsync, baseUrl } = props;
   const renderComponent = (component) => {
     switch (component.type) {
       case "heading":
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicHeading_default, { component }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicHeading_default, { component }, getKey(component));
       case "paragraph":
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicParagraph_default, { component }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicParagraph_default, { component }, getKey(component));
       case "image":
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicImage_default, { component }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicImage_default, { component }, getKey(component));
       case "alert":
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicAlert_default, { component }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicAlert_default, { component }, getKey(component));
       case "review":
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicReview_default, { component, onAction }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicReview_default, { component, onAction }, getKey(component));
       case "divider":
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicDivider_default, { component }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicDivider_default, { component }, getKey(component));
       case "info":
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicInfo, { component }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicInfo, { component }, getKey(component));
       case "instructions":
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicInstructions_default, { component }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicInstructions_default, { component }, getKey(component));
       case "markdown":
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicMarkdown, { component }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicMarkdown, { component }, getKey(component));
       case "columns":
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           DynamicColumns_default,
           {
             component,
@@ -4955,7 +5112,7 @@ var DynamicLayout = (props) => {
           getKey(component)
         );
       case "form":
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           DynamicForm_default,
           {
             component,
@@ -4968,9 +5125,9 @@ var DynamicLayout = (props) => {
           getKey(__spreadProps(__spreadValues({}, component), { errors: errors != null ? errors : null }))
         );
       case "button":
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicButton_default, { component, onAction }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicButton_default, { component, onAction }, getKey(component));
       case "box":
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           DynamicBox_default,
           {
             component,
@@ -4984,34 +5141,34 @@ var DynamicLayout = (props) => {
           getKey(component)
         );
       case "decision":
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicDecision_default, { component, onAction }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicDecision_default, { component, onAction }, getKey(component));
       case "external":
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicExternal_default, { component, onAction }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicExternal_default, { component, onAction }, getKey(component));
       case "list":
       case "status-list":
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicStatusList_default, { component, onAction }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicStatusList_default, { component, onAction }, getKey(component));
       case "loading-indicator":
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicLoadingIndicator_default, { component }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicLoadingIndicator_default, { component }, getKey(component));
       case "search":
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicSearch_default, { component, onAction }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicSearch_default, { component, onAction }, getKey(component));
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", {}, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", {}, getKey(component));
     }
   };
   if (useHasHttpClientProvider() || baseUrl == null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, { children: components.map(renderComponent) });
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: components.map(renderComponent) });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(HttpClientProviderFromBaseUrl, { baseUrl, children: components.map(renderComponent) });
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(HttpClientProviderFromBaseUrl, { baseUrl, children: components.map(renderComponent) });
   }
 };
 var DynamicLayout_default = DynamicLayout;
 
 // src/layout/list/DynamicStatusList.tsx
 var import_components20 = require("@transferwise/components");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime46 = 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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: getMargin(component.margin || "md"), children: [
+    component.title ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("h4", { className: "m-b-2", children: [
       " ",
       component.title,
       " "
@@ -5024,8 +5181,8 @@ var mapListItemToSummary = ({ title, description, icon, status }) => {
     key: `${title}/${description || ""}`,
     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));
+  }, (icon == null ? void 0 : icon.name) ? { icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicIcon_default, { type: icon.name }) } : {}), status ? { status: statusMap[status] } : {});
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_components20.Summary, __spreadValues({}, props));
 };
 var statusListMap = {
   done: "done",
@@ -5042,10 +5199,10 @@ var DynamicStatusList_default = DynamicStatusList;
 
 // src/layout/loadingIndicator/DynamicLoadingIndicator.tsx
 var import_components21 = require("@transferwise/components");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var DynamicLoadingIndicator = ({ component }) => {
   const { margin, size = "md" } = component;
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     import_components21.Loader,
     {
       size,
@@ -5082,15 +5239,15 @@ var import_components22 = require("@transferwise/components");
 var import_react24 = require("react");
 function useSnackBarIfAvailable() {
   const context = (0, import_react24.useContext)(import_components22.SnackbarContext);
-  return context ? context.createSnackbar : noop3;
+  return context ? context.createSnackbar : noop2;
 }
-function noop3() {
+function noop2() {
 }
 
 // src/layout/paragraph/DynamicParagraph.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
-var DynamicParagraph = ({ component }) => component.control === "copyable" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(CopyableDynamicParagraph, { component }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(BasicDynamicParagraph, { component });
-var BasicDynamicParagraph = ({ component }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("p", { className: getTextAlignmentAndMargin(component), children: [
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var DynamicParagraph = ({ component }) => component.control === "copyable" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CopyableDynamicParagraph, { component }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(BasicDynamicParagraph, { component });
+var BasicDynamicParagraph = ({ component }) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("p", { className: getTextAlignmentAndMargin(component), children: [
   " ",
   component.text,
   " "
@@ -5101,11 +5258,11 @@ var CopyableDynamicParagraph = ({ component }) => {
   const { text } = component;
   const copy = () => {
     var _a;
-    (_a = navigator.clipboard) == null ? void 0 : _a.writeText(text).then(() => createSnackbar({ text: formatMessage(DynamicParagraph_messages_default.copied) })).catch(noop4);
+    (_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";
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: getTextAlignmentAndMargin(component), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: getTextAlignmentAndMargin(component), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       "input",
       {
         type: "text",
@@ -5115,16 +5272,16 @@ 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_runtime48.jsx)(import_components23.Button, { block: true, onClick: copy, className: getMargin("sm"), children: formatMessage(DynamicParagraph_messages_default.copy) })
   ] });
 };
-function noop4() {
+function noop3() {
 }
 var DynamicParagraph_default = DynamicParagraph;
 
 // src/layout/review/DynamicReview.tsx
 var import_components24 = require("@transferwise/components");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var getDefinitions = (orientation, review) => {
   return review.fields.map(
     ({ label, value, help }, index) => {
@@ -5138,14 +5295,14 @@ var getDefinitions = (orientation, review) => {
 };
 var getFieldValue = (value, help, orientation) => {
   if (help) {
-    return orientation === "HORIZONTAL_RIGHT_ALIGNED" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Help_default, { help }),
+    return orientation === "HORIZONTAL_RIGHT_ALIGNED" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Help_default, { help }),
       " ",
       value
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
       value,
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Help_default, { help })
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Help_default, { help })
     ] });
   }
   return value;
@@ -5158,7 +5315,7 @@ var DynamicReview = (props) => {
   const review = props.component;
   const margin = getMargin(review.margin || "xs");
   const getReviewAction = (action) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "a",
       {
         href: action.url,
@@ -5173,12 +5330,12 @@ var DynamicReview = (props) => {
     );
   };
   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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+    review.title && /* @__PURE__ */ (0, import_jsx_runtime49.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) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: review.title ? "" : margin, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_components24.DefinitionList, { layout: orientation, definitions: getDefinitions(orientation, review) }) })
   ] });
 };
 var DynamicReview_default = DynamicReview;
@@ -5188,11 +5345,11 @@ var import_react26 = require("react");
 
 // src/layout/search/SearchInput.tsx
 var import_components25 = require("@transferwise/components");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var SearchInput = ({ title, value, onFocus, onChange }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("label", { className: "control-label d-inline", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("label", { className: "control-label d-inline", children: [
     title,
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       import_components25.Input,
       {
         type: "text",
@@ -5224,13 +5381,13 @@ var ErrorBoundary_messages_default = (0, import_react_intl18.defineMessages)({
 });
 
 // src/layout/search/SearchResults.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 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_runtime51.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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_components26.NavigationOptionsList, { children: results.map((result) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       import_components26.NavigationOption,
       {
         title: result.title,
@@ -5246,10 +5403,10 @@ var SearchResults = ({ results, emptyMessage, onSelect }) => {
 };
 var ErrorResult = ({ onRetrySearch }) => {
   const intl = (0, import_react_intl19.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("p", { className: "m-t-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("p", { className: "m-t-2", children: [
     intl.formatMessage(ErrorBoundary_messages_default.errorAlert),
     "\xA0",
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       "a",
       {
         href: "/",
@@ -5335,7 +5492,7 @@ var addQueryParameter = (url, key, value) => {
 };
 
 // src/layout/search/DynamicSearch.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var DEBOUNCE_TIME = 400;
 var DynamicSearch = ({ component, onAction }) => {
   const [query, setQuery] = (0, import_react26.useState)("");
@@ -5369,17 +5526,17 @@ var DynamicSearch = ({ component, onAction }) => {
     setQuery(query);
     void search(query);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(SearchInput, { title, value: query, onChange, onFocus: onSearchStart }),
-    status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(DynamicLoadingIndicator_default, { component: { type: "loading-indicator", size: "sm" } }),
-    status === "error" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ErrorResult, { onRetrySearch }),
-    status === "success" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(SearchResults, { results, emptyMessage, onSelect: onResultSelected })
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: getMargin(margin), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(SearchInput, { title, value: query, onChange, onFocus: onSearchStart }),
+    status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DynamicLoadingIndicator_default, { component: { type: "loading-indicator", size: "sm" } }),
+    status === "error" && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ErrorResult, { onRetrySearch }),
+    status === "success" && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(SearchResults, { results, emptyMessage, onSelect: onResultSelected })
   ] });
 };
 var DynamicSearch_default = DynamicSearch;
 
 // src/jsonSchemaForm/basicTypeSchema/BasicTypeSchema.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var isNullish = (value) => isNull(value) || isUndefined(value);
 var getDefaultValue = (schema) => {
   return schema.type === "boolean" && isNullish(schema.default) ? false : schema.default;
@@ -5454,15 +5611,15 @@ var BasicTypeSchema = (props) => {
   const showLabel = props.schema.format !== "file" && props.schema.type !== "boolean";
   const schemaHelp = props.schema.help;
   const feedbackId = `${id}-feedback`;
-  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: [
-        /* @__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 })
+  return !isHidden ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+    props.schema.alert && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(DynamicAlert_default, { component: props.schema.alert }),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: (0, import_classnames6.default)(formGroupClasses), children: [
+      showLabel && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "d-inline-block", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("label", { className: "control-label d-inline", htmlFor: id, children: props.schema.title }),
+        !!schemaHelp && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Help_default, { help: schemaHelp })
       ] }),
-      !showLabel && !!schemaHelp && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Help_default, { help: schemaHelp }),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      !showLabel && !!schemaHelp && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Help_default, { help: schemaHelp }),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         SchemaFormControl_default,
         {
           id,
@@ -5475,7 +5632,7 @@ var BasicTypeSchema = (props) => {
           describedBy: feedbackId
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         ControlFeedback_default,
         {
           id: feedbackId,
@@ -5500,7 +5657,7 @@ BasicTypeSchema.defaultProps = {
 var BasicTypeSchema_default = BasicTypeSchema;
 
 // src/jsonSchemaForm/persistAsyncSchema/persistAsyncBasicSchema/PersistAsyncBasicSchema.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var getIdFromResponse = (idProperty, response) => {
   return response[idProperty];
 };
@@ -5592,7 +5749,7 @@ var PersistAsyncBasicSchema = (props) => {
       setPersistAsyncModel(newPersistAsyncModel);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     BasicTypeSchema_default,
     {
       required,
@@ -5803,7 +5960,7 @@ function useStepPolling(polling, onAction) {
 }
 
 // src/step/layoutStep/LayoutStep.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var getComponents = (step, options) => {
   var _a;
   if (isEmpty(step)) {
@@ -5826,7 +5983,7 @@ var LayoutStep = (props) => {
     onEvent("Dynamic Flow - onAction supressed", { reason: "LayoutStep - loading state" });
   };
   useStepPolling(stepSpecification.polling, onAction);
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     DynamicLayout_default,
     {
       components,
@@ -5842,11 +5999,11 @@ var LayoutStep = (props) => {
 var LayoutStep_default = LayoutStep;
 
 // src/step/cameraStep/CameraStep.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 
 // src/step/cameraStep/cameraCapture/CameraCapture.tsx
-var import_react35 = require("react");
-var import_react_intl28 = require("react-intl");
+var import_react36 = require("react");
+var import_react_intl30 = require("react-intl");
 var import_react_webcam = __toESM(require_react_webcam());
 
 // src/step/cameraStep/cameraCapture/CameraCapture.messages.ts
@@ -5871,14 +6028,54 @@ var CameraCapture_messages_default = (0, import_react_intl22.defineMessages)({
 
 // src/step/cameraStep/cameraCapture/components/index.tsx
 var import_components27 = require("@transferwise/components");
+var import_react_intl25 = require("react-intl");
+
+// src/step/cameraStep/cameraCapture/components/orientationLockOverlay/OrientationLockOverlay.tsx
+var import_react_intl24 = require("react-intl");
+
+// src/step/cameraStep/cameraCapture/components/orientationLockOverlay/OrientationLockOverlay.messages.ts
 var import_react_intl23 = require("react-intl");
+var OrientationLockOverlay_messages_default = (0, import_react_intl23.defineMessages)({
+  text: {
+    id: "dynamicFlows.CameraCapture.rotatePhone.text",
+    defaultMessage: "Rotate your phone to portrait view to take a photo",
+    description: "Prompt the user to rotate their phone from landscape to portrait mode when attempting to take a photo"
+  },
+  imgAlt: {
+    id: "dynamicFlows.CameraCapture.rotatePhone.imgAlt",
+    defaultMessage: "Rotate your phone icon",
+    description: "Rotate phone icon alt text"
+  }
+});
+
+// src/step/cameraStep/cameraCapture/components/orientationLockOverlay/OrientationLockOverlay.tsx
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var OrientationLockOverlay = () => {
+  const intl = (0, import_react_intl24.useIntl)();
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "orientation-lock-overlay p-x-3 p-y-3", "data-testid": "orientation-lock", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      "img",
+      {
+        className: "m-b-3",
+        src: "https://wise.com/public-resources/assets/camera-guidelines/icon-rotate-phone.svg",
+        width: "96",
+        height: "96",
+        alt: intl.formatMessage(OrientationLockOverlay_messages_default.imgAlt)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: "text-center m-b-0", children: intl.formatMessage(OrientationLockOverlay_messages_default.text) })
+  ] });
+};
+var OrientationLockOverlay_default = OrientationLockOverlay;
+
+// src/step/cameraStep/cameraCapture/components/index.tsx
 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 }) });
 var ReviewBottomBar = ({
   onSubmit,
   onRetry
 }) => {
-  const intl = (0, import_react_intl23.useIntl)();
+  const intl = (0, import_react_intl25.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,
@@ -5916,8 +6113,52 @@ var CaptureButton = ({ onClick }) => /* @__PURE__ */ (0, import_jsx_runtime57.js
   }
 );
 
-// src/step/cameraStep/cameraCapture/hooks/index.ts
+// src/step/cameraStep/cameraCapture/hooks/useFullScreenOrientationLock.ts
 var import_react33 = require("react");
+var import_screenfull = __toESM(require_screenfull());
+var useFullScreenOrientationLock = (isMobile2) => {
+  const lockOrientation = (0, import_react33.useCallback)(() => {
+    if (window.screen.orientation && "lock" in window.screen.orientation && typeof window.screen.orientation.lock === "function") {
+      window.screen.orientation.lock("portrait").catch((e) => {
+      });
+    }
+  }, []);
+  const unlockOrientation = (0, import_react33.useCallback)(() => {
+    var _a, _b;
+    if ((_b = (_a = window.screen) == null ? void 0 : _a.orientation) == null ? void 0 : _b.unlock) {
+      window.screen.orientation.unlock();
+    }
+  }, []);
+  const enterFullScreen = (0, import_react33.useCallback)(() => {
+    setTimeout(() => {
+      if (isMobile2 && !import_screenfull.default.isFullscreen && import_screenfull.default.isEnabled) {
+        import_screenfull.default.request(document.documentElement, { navigationUI: "show" }).then(() => {
+          lockOrientation();
+        }).catch((e) => {
+        });
+      }
+    }, 100);
+  }, [isMobile2, lockOrientation]);
+  const exitFullScreen = (0, import_react33.useCallback)(() => {
+    if (import_screenfull.default.isFullscreen) {
+      import_screenfull.default.exit().catch(() => {
+      });
+    }
+    unlockOrientation();
+  }, [unlockOrientation]);
+  (0, import_react33.useEffect)(() => {
+    return () => {
+      exitFullScreen();
+    };
+  }, [exitFullScreen]);
+  return {
+    enterFullScreen,
+    exitFullScreen
+  };
+};
+
+// src/step/cameraStep/cameraCapture/hooks/useVideoConstraints.ts
+var import_react34 = require("react");
 
 // src/step/cameraStep/cameraCapture/utils/index.ts
 var isSelfieCamera = (stream) => {
@@ -5963,9 +6204,9 @@ var getVideoCapabilities = (videoStream) => {
   return (_b = (_a = getVideoTrack(videoStream)) == null ? void 0 : _a.getCapabilities) == null ? void 0 : _b.call(_a);
 };
 
-// src/step/cameraStep/cameraCapture/hooks/index.ts
+// src/step/cameraStep/cameraCapture/hooks/useVideoConstraints.ts
 var useVideoConstraints = (direction) => {
-  const [videoConstraints, setVideoConstraints] = (0, import_react33.useState)();
+  const [videoConstraints, setVideoConstraints] = (0, import_react34.useState)();
   const defaultVideoConstraints = {
     facingMode: direction === "front" ? "user" : "environment",
     height: { min: 480, max: 1080, ideal: 720 },
@@ -5973,7 +6214,7 @@ var useVideoConstraints = (direction) => {
     frameRate: 30,
     aspectRatio: 16 / 9
   };
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     void getVideoConstraints(direction).then(setVideoConstraints);
   }, [direction]);
   const getVideoConstraints = async (direction2) => {
@@ -5991,7 +6232,7 @@ var useVideoConstraints = (direction) => {
 };
 
 // src/step/cameraStep/cameraCapture/overlay/Overlay.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var captureButtonHeight = 92;
 var reviewButtonsHeight = 120;
@@ -6008,8 +6249,8 @@ var Overlay = ({
   instructions,
   reviewInstructions
 }) => {
-  const svgReference = (0, import_react34.useRef)(null);
-  (0, import_react34.useEffect)(() => {
+  const svgReference = (0, import_react35.useRef)(null);
+  (0, import_react35.useEffect)(() => {
     const listener = debounce(() => {
       var _a;
       if ((_a = svgReference.current) == null ? void 0 : _a.innerHTML) {
@@ -6064,11 +6305,11 @@ var Overlay_default = Overlay;
 
 // src/step/cameraStep/cameraCapture/screens/NoCameraAccess/NoCameraAccess.tsx
 var import_components28 = require("@transferwise/components");
-var import_react_intl25 = require("react-intl");
+var import_react_intl27 = require("react-intl");
 
 // src/step/cameraStep/cameraCapture/screens/NoCameraAccess/NoCameraAccess.messages.ts
-var import_react_intl24 = require("react-intl");
-var NoCameraAccess_messages_default = (0, import_react_intl24.defineMessages)({
+var import_react_intl26 = require("react-intl");
+var NoCameraAccess_messages_default = (0, import_react_intl26.defineMessages)({
   title: {
     id: "dynamicFlows.CameraCapture.NoCameraAccess.title",
     defaultMessage: "We can't access your camera",
@@ -6089,7 +6330,7 @@ var NoCameraAccess_messages_default = (0, import_react_intl24.defineMessages)({
 // src/step/cameraStep/cameraCapture/screens/NoCameraAccess/NoCameraAccess.tsx
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var NoCameraAccess = ({ onAction }) => {
-  const intl = (0, import_react_intl25.useIntl)();
+  const intl = (0, import_react_intl27.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { id: "no-camera-access", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "container p-t-5", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "col-md-6 col-md-offset-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("h2", { className: "text-xs-center m-b-3", children: intl.formatMessage(NoCameraAccess_messages_default.title) }),
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "text-xs-center m-b-5", children: intl.formatMessage(NoCameraAccess_messages_default.paragraph) }),
@@ -6099,11 +6340,11 @@ var NoCameraAccess = ({ onAction }) => {
 var NoCameraAccess_default = NoCameraAccess;
 
 // src/step/cameraStep/cameraCapture/screens/CameraNotSupported/CameraNotSupported.tsx
-var import_react_intl27 = require("react-intl");
+var import_react_intl29 = require("react-intl");
 
 // src/step/cameraStep/cameraCapture/screens/CameraNotSupported/CameraNotSupported.messages.ts
-var import_react_intl26 = require("react-intl");
-var CameraNotSupported_messages_default = (0, import_react_intl26.defineMessages)({
+var import_react_intl28 = require("react-intl");
+var CameraNotSupported_messages_default = (0, import_react_intl28.defineMessages)({
   title: {
     id: "dynamicFlows.CameraCapture.CameraNotSupported.title",
     defaultMessage: "Camera not supported",
@@ -6119,7 +6360,7 @@ var CameraNotSupported_messages_default = (0, import_react_intl26.defineMessages
 // src/step/cameraStep/cameraCapture/screens/CameraNotSupported/CameraNotSupported.tsx
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var CameraNotSupported = () => {
-  const intl = (0, import_react_intl27.useIntl)();
+  const intl = (0, import_react_intl29.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { id: "camera-not-supported", 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(CameraNotSupported_messages_default.title) }),
     /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "text-xs-center m-b-5", children: intl.formatMessage(CameraNotSupported_messages_default.paragraph) })
@@ -6159,14 +6400,16 @@ var CameraCapture = ({
   onCapture,
   onEvent
 }) => {
-  const [mode, setMode] = (0, import_react35.useState)("CAPTURE");
-  const [isVideoMirrored, setIsVideoMirrored] = (0, import_react35.useState)(false);
-  const [ready, setReady] = (0, import_react35.useState)(false);
-  const [reviewImage, setReviewImage] = (0, import_react35.useState)();
-  const webcamReference = (0, import_react35.useRef)(null);
+  const [mode, setMode] = (0, import_react36.useState)("CAPTURE");
+  const [isVideoMirrored, setIsVideoMirrored] = (0, import_react36.useState)(false);
+  const [ready, setReady] = (0, import_react36.useState)(false);
+  const [reviewImage, setReviewImage] = (0, import_react36.useState)();
+  const webcamReference = (0, import_react36.useRef)(null);
   const { videoConstraints } = useVideoConstraints(direction);
-  const intl = (0, import_react_intl28.useIntl)();
-  const handleCapture = (0, import_react35.useCallback)(async () => {
+  const isMobileDevice = (0, import_react36.useMemo)(() => isMobile(), []);
+  const { enterFullScreen, exitFullScreen } = useFullScreenOrientationLock(isMobileDevice);
+  const intl = (0, import_react_intl30.useIntl)();
+  const handleCapture = (0, import_react36.useCallback)(async () => {
     var _a, _b, _c, _d, _e, _f;
     if (((_a = webcamReference == null ? void 0 : webcamReference.current) == null ? void 0 : _a.video) && ((_c = (_b = webcamReference == null ? void 0 : webcamReference.current) == null ? void 0 : _b.video) == null ? void 0 : _c.readyState) >= 3) {
       (_e = (_d = webcamReference == null ? void 0 : webcamReference.current) == null ? void 0 : _d.video) == null ? void 0 : _e.pause();
@@ -6188,7 +6431,7 @@ var CameraCapture = ({
       );
     }
   }, [webcamReference, showReview, setReviewImage, setMode, onCapture, isVideoMirrored]);
-  const handleUserMediaError = (0, import_react35.useCallback)(
+  const handleUserMediaError = (0, import_react36.useCallback)(
     (error) => {
       if (error instanceof DOMException && (error == null ? void 0 : error.name) === "NotAllowedError") {
         setMode("NO_CAMERA_ACCESS");
@@ -6200,13 +6443,14 @@ var CameraCapture = ({
     },
     [setMode, onEvent]
   );
-  const handleUserMedia = (0, import_react35.useCallback)(
+  const handleUserMedia = (0, import_react36.useCallback)(
     (stream) => {
+      enterFullScreen();
       setReady(true);
       setIsVideoMirrored(isSelfieCamera(stream));
       void trackCameraFeedStarted(onEvent, { direction }, stream);
     },
-    [setIsVideoMirrored, onEvent, direction]
+    [setIsVideoMirrored, onEvent, direction, enterFullScreen]
   );
   const handleReviewSubmit = () => {
     onCapture((reviewImage == null ? void 0 : reviewImage.blob) || null);
@@ -6216,6 +6460,11 @@ var CameraCapture = ({
     setReviewImage(void 0);
   };
   const handleRetryCameraAccess = () => setMode("CAPTURE");
+  (0, import_react36.useEffect)(() => {
+    if (mode !== "CAPTURE") {
+      exitFullScreen();
+    }
+  }, [mode, exitFullScreen]);
   const captureScreen = /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
     videoConstraints && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       import_react_webcam.default,
@@ -6238,6 +6487,7 @@ var CameraCapture = ({
         instructions
       }
     ),
+    isMobileDevice && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(OrientationLockOverlay_default, {}),
     ready && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(CaptureBottomBar, { onCapture: () => void handleCapture() })
   ] });
   const reviewScreen = /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
@@ -6282,8 +6532,8 @@ var CameraStep = (props) => {
   const { assets, direction, instructions } = cameraConfig || {};
   const { overlay, outline } = assets || {};
   const { url: imageUrl } = image || {};
-  const [captureClicked, setCaptureClicked] = (0, import_react36.useState)(false);
-  (0, import_react36.useEffect)(() => {
+  const [captureClicked, setCaptureClicked] = (0, import_react37.useState)(false);
+  (0, import_react37.useEffect)(() => {
     if (captureClicked) {
       onAction(action);
     }
@@ -6351,11 +6601,11 @@ function getFirstAction(step) {
 }
 
 // src/step/externalConfirmationStep/ExternalConfirmationStep.tsx
-var import_react_intl30 = require("react-intl");
+var import_react_intl32 = require("react-intl");
 
 // src/step/externalConfirmationStep/ExternalConfirmationStep.messages.ts
-var import_react_intl29 = require("react-intl");
-var ExternalConfirmationStep_messages_default = (0, import_react_intl29.defineMessages)({
+var import_react_intl31 = require("react-intl");
+var ExternalConfirmationStep_messages_default = (0, import_react_intl31.defineMessages)({
   title: {
     id: "dynamicFlows.ExternalConfirmation.title",
     defaultMessage: "Please confirm",
@@ -6380,10 +6630,10 @@ var ExternalConfirmationStep_messages_default = (0, import_react_intl29.defineMe
 
 // src/step/externalConfirmationStep/ExternalConfirmationStep.tsx
 var import_jsx_runtime63 = require("react/jsx-runtime");
-var noop5 = () => {
+var noop4 = () => {
 };
 var ExternalConfirmationStep = ({ url, onClose }) => {
-  const { formatMessage } = (0, import_react_intl30.useIntl)();
+  const { formatMessage } = (0, import_react_intl32.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     DynamicLayout_default,
     {
@@ -6434,8 +6684,8 @@ var ExternalConfirmationStep = ({ url, onClose }) => {
         }
         onClose();
       },
-      onModelChange: noop5,
-      onPersistAsync: noop5
+      onModelChange: noop4,
+      onPersistAsync: noop4
     }
   );
 };
@@ -6497,10 +6747,10 @@ var DynamicFlowStep = (props) => {
 };
 
 // src/dynamicFlow/utils/useDebouncedRefresh/useDebouncedRefresh.ts
-var import_react37 = require("react");
+var import_react38 = require("react");
 var DEBOUNCE_DELAY = 1e3;
 function useDebouncedRefresh(fetchRefresh) {
-  const map = (0, import_react37.useRef)(/* @__PURE__ */ new Map());
+  const map = (0, import_react38.useRef)(/* @__PURE__ */ new Map());
   const retrieveOrCreate = (key) => {
     if (map.current.has(key)) {
       return map.current.get(key);
@@ -6523,12 +6773,12 @@ function useDebouncedRefresh(fetchRefresh) {
 var shouldDebounceSchema = (schema) => getSchemaType(schema) === "basic" && schema.type !== "boolean" && schema.format !== "base64url";
 
 // src/dynamicFlow/utils/useDynamicFlowState.ts
-var import_react38 = require("react");
+var import_react39 = require("react");
 var useDynamicFlowState = (initialStep) => {
   var _a, _b;
-  const [formErrors, setFormErrors] = (0, import_react38.useState)((_a = initialStep == null ? void 0 : initialStep.errors) == null ? void 0 : _a.validation);
-  const [globalError, setGlobalError] = (0, import_react38.useState)((_b = initialStep == null ? void 0 : initialStep.errors) == null ? void 0 : _b.error);
-  const [stepAndModels, setStepAndModels] = (0, import_react38.useState)({
+  const [formErrors, setFormErrors] = (0, import_react39.useState)((_a = initialStep == null ? void 0 : initialStep.errors) == null ? void 0 : _a.validation);
+  const [globalError, setGlobalError] = (0, import_react39.useState)((_b = initialStep == null ? void 0 : initialStep.errors) == null ? void 0 : _b.error);
+  const [stepAndModels, setStepAndModels] = (0, import_react39.useState)({
     step: initialStep || void 0,
     models: (initialStep == null ? void 0 : initialStep.model) ? buildInitialModels(initialStep.model, getAllSchemas(initialStep)) : {},
     etag: void 0
@@ -6558,7 +6808,7 @@ var useDynamicFlowState = (initialStep) => {
       return updatedState;
     });
   };
-  const modelIsValid = (0, import_react38.useMemo)(
+  const modelIsValid = (0, import_react39.useMemo)(
     () => areModelsValid(models, getAllValidatableSchemas(step)),
     [models, step]
   );
@@ -6637,7 +6887,7 @@ var isInlineSchema = (schema) => {
 
 // src/dynamicFlow/utils/useLoader.tsx
 var import_components31 = require("@transferwise/components");
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_jsx_runtime66 = require("react/jsx-runtime");
 function useLoader(loaderConfig, initialState) {
   const config = __spreadValues({
@@ -6645,7 +6895,7 @@ function useLoader(loaderConfig, initialState) {
     initial: true,
     submission: false
   }, loaderConfig);
-  const [loadingState, setLoadingState] = (0, import_react39.useState)(initialState);
+  const [loadingState, setLoadingState] = (0, import_react40.useState)(initialState);
   const shouldDisplayLoader = config.initial && loadingState === "initial" || config.submission && loadingState === "submission";
   const loader = shouldDisplayLoader ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     import_components31.Loader,
@@ -6659,14 +6909,14 @@ function useLoader(loaderConfig, initialState) {
 }
 
 // src/dynamicFlow/utils/errorBoundary/ErrorBoundary.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 
 // src/dynamicFlow/utils/errorBoundary/ErrorBoundaryAlert.tsx
 var import_components32 = require("@transferwise/components");
-var import_react_intl31 = require("react-intl");
+var import_react_intl33 = require("react-intl");
 var import_jsx_runtime67 = require("react/jsx-runtime");
 var ErrorBoundaryAlert = ({ onDismiss }) => {
-  const { formatMessage } = (0, import_react_intl31.useIntl)();
+  const { formatMessage } = (0, import_react_intl33.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     import_components32.Alert,
     {
@@ -6684,9 +6934,9 @@ var ErrorBoundaryAlert = ({ onDismiss }) => {
 
 // src/dynamicFlow/utils/errorBoundary/ErrorBoundary.tsx
 var import_jsx_runtime68 = require("react/jsx-runtime");
-var noop6 = () => {
+var noop5 = () => {
 };
-var ErrorBoundary = class extends import_react40.Component {
+var ErrorBoundary = class extends import_react41.Component {
   constructor(props) {
     super(props);
     this.handleErrorReset = () => {
@@ -6698,7 +6948,7 @@ var ErrorBoundary = class extends import_react40.Component {
     return { hasError: true, isFatalError: true };
   }
   componentDidCatch(error) {
-    const { onError = noop6 } = this.props;
+    const { onError = noop5 } = this.props;
     onError(error);
   }
   render() {
@@ -6811,7 +7061,7 @@ var isResponse = (response) => typeof response === "object" && response !== null
 
 // src/dynamicFlow/DynamicFlow.tsx
 var import_jsx_runtime69 = require("react/jsx-runtime");
-var noop7 = () => {
+var noop6 = () => {
 };
 var DynamicFlowComponent = ({
   flowId,
@@ -6822,10 +7072,10 @@ var DynamicFlowComponent = ({
   displayStepTitle = true,
   onCompletion,
   onError,
-  onEvent = noop7,
-  onLog = noop7
+  onEvent = noop6,
+  onLog = noop6
 }) => {
-  const { locale } = (0, import_react_intl32.useIntl)();
+  const { locale } = (0, import_react_intl34.useIntl)();
   const {
     formErrors,
     globalError,
@@ -6838,24 +7088,24 @@ var DynamicFlowComponent = ({
     setStepAndEtag,
     setSchemaModel
   } = useDynamicFlowState(initialStep);
-  const [submitted, setSubmitted] = (0, import_react41.useState)(false);
+  const [submitted, setSubmitted] = (0, import_react42.useState)(false);
   const { isLoading, loader, setLoadingState } = useLoader(
     loaderConfig,
     initialStep ? "idle" : "initial"
   );
   const logCritical = getLogger("critical", onLog, flowId, (step == null ? void 0 : step.id) || (step == null ? void 0 : step.key));
-  const analyticsMetadata = (0, import_react41.useMemo)(
+  const analyticsMetadata = (0, import_react42.useMemo)(
     () => {
       var _a;
       return __spreadValues({ flowId, stepId: (step == null ? void 0 : step.id) || (step == null ? void 0 : step.key) }, (_a = step == null ? void 0 : step.analytics) != null ? _a : {});
     },
     [flowId, step]
   );
-  const dispatchEvent = (0, import_react41.useMemo)(
+  const dispatchEvent = (0, import_react42.useMemo)(
     () => getEventDispatcher(onEvent, analyticsMetadata),
     [onEvent, analyticsMetadata]
   );
-  const dfHttpClient = (0, import_react41.useCallback)(
+  const dfHttpClient = (0, import_react42.useCallback)(
     ({ action, data, etag: etag2 }) => {
       const { url, method = "POST" } = action;
       return httpClient(url != null ? url : "", {
@@ -6905,17 +7155,17 @@ var DynamicFlowComponent = ({
     dispatchEventAndComplete(__spreadValues(__spreadValues({}, exitResult), actionResult));
   };
   const debouncedRefresh = useDebouncedRefresh(performRefresh);
-  const dispatchEventAndComplete = (0, import_react41.useCallback)(
+  const dispatchEventAndComplete = (0, import_react42.useCallback)(
     (result) => {
       dispatchEvent("Dynamic Flow - Flow Finished", { result: "success" });
       onCompletion(result);
     },
     [onCompletion, dispatchEvent]
   );
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     dispatchEvent("Dynamic Flow - Flow Started", {});
   }, []);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (!initialStep) {
       const action = __spreadValues({
         id: "#initial-step-request",
@@ -7063,6 +7313,27 @@ var shouldTriggerRefresh = (props) => {
   return type !== "init" && hasRefreshOnChange && (isValid() || wasValid());
 };
 
+// src/jsonSchemaForm/JsonSchemaForm.tsx
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var JsonSchemaForm = (props) => {
+  const schemaProps = __spreadValues({
+    model: null,
+    errors: null
+  }, props);
+  const { baseUrl = "", onEvent = noop7, onLog = noop7 } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(LogProvider, { flowId: "JsonSchemaForm", stepId: "JsonSchemaForm", onLog, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    EventsContextProvider,
+    {
+      metadata: { flowId: "JsonSchemaForm", stepId: "JsonSchemaForm" },
+      onEvent,
+      children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(HttpClientProviderFromBaseUrl, { baseUrl, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(GenericSchema_default, __spreadValues({}, schemaProps)) })
+    }
+  ) });
+};
+var JsonSchemaForm_default = JsonSchemaForm;
+var noop7 = () => {
+};
+
 // src/i18n/de.json
 var de_default = {
   "dynamicFlows.ArraySchema.addItem": "Speichern",
@@ -7123,6 +7394,8 @@ var en_default = {
   "dynamicFlows.CameraCapture.reviewInstructions": "Is your picture clear, readable and complete?",
   "dynamicFlows.CameraCapture.reviewRetry": "No, try again",
   "dynamicFlows.CameraCapture.reviewSubmit": "Yes, submit",
+  "dynamicFlows.CameraCapture.rotatePhone.imgAlt": "Rotate your phone icon",
+  "dynamicFlows.CameraCapture.rotatePhone.text": "Rotate your phone to portrait view to take a photo",
   "dynamicFlows.ControlFeedback.maxLength": "Please enter {maxLength} or fewer characters.",
   "dynamicFlows.ControlFeedback.maximum": "Please enter a number that's {maximum} or less.",
   "dynamicFlows.ControlFeedback.maximumDate": "Please enter a date that's on or before {maximum}.",
@@ -7246,7 +7519,7 @@ var hu_default = {
   "dynamicFlows.ArraySchema.editItem": "Ment\xE9s",
   "dynamicFlows.ArraySchema.maxItemsError": "K\xE9r\xFCnk, {maxItems} vagy ann\xE1l kevesebb t\xE9telt adj meg.",
   "dynamicFlows.ArraySchema.minItemsError": "K\xE9r\xFCnk, legal\xE1bb {minItems} t\xE9telt adj meg.",
-  "dynamicFlows.ArraySchema.removeItem": "Elt\xE1vol\xEDt\xE1sra",
+  "dynamicFlows.ArraySchema.removeItem": "Elt\xE1vol\xEDt\xE1s",
   "dynamicFlows.CameraCapture.CameraNotSupported.paragraph": "Az \xE1ltalad haszn\xE1lt b\xF6ng\xE9sz\u0151 nem t\xE1mogatja a kamera haszn\xE1lat\xE1t. K\xE9r\xFCnk, pr\xF3b\xE1lkozz m\xE1s b\xF6ng\xE9sz\u0151vel, eszk\xF6zzel vagy t\xF6ltsd le az appot",
   "dynamicFlows.CameraCapture.CameraNotSupported.title": "Kamera nem t\xE1mogatott",
   "dynamicFlows.CameraCapture.NoCameraAccess.action": "Kamer\xE1hoz val\xF3 hozz\xE1f\xE9r\xE9s enged\xE9lyez\xE9se",
@@ -7796,4 +8069,11 @@ classnames/index.js:
   	Licensed under the MIT License (MIT), see
   	http://jedwatson.github.io/classnames
   *)
+
+screenfull/dist/screenfull.js:
+  (*!
+  * screenfull
+  * v5.2.0 - 2021-11-03
+  * (c) Sindre Sorhus; MIT License
+  *)
 */