npm - @wise/dynamic-flow-client - Versions diffs - 2.3.0-beta-7d9b21.21 → 2.3.0 - Mend

@wise/dynamic-flow-client 2.3.0-beta-7d9b21.21 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/build/main.js +492 -472
package/build/main.min.js +1 -1
package/build/types/common/constants/FeatureName.d.ts +3 -0
package/build/types/common/contexts/featureContext/FeatureContext.d.ts +10 -0
package/build/types/dynamicFlow/DynamicFlowTypes.d.ts +15 -0
package/build/types/step/cameraStep/cameraCapture/hooks/useFullScreenOrientationLock.d.ts +1 -1
package/package.json +26 -26

package/build/main.js CHANGED Viewed

@@ -1017,7 +1017,7 @@ function isReference(block) {
 }
 // src/dynamicFlow/DynamicFlow.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 var import_react_intl34 = require("react-intl");
 // src/common/contexts/dynamicFlowContexts/DynamicFlowContexts.tsx
@@ -1179,6 +1179,18 @@ var useLogger = () => {
   return logging;
 };
+// src/common/contexts/featureContext/FeatureContext.tsx
+var import_react6 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var FeatureContext = (0, import_react6.createContext)([]);
+var FeatureContextProvider = ({ features, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FeatureContext.Provider, { value: features, children });
+};
+var useFeatureFlag = (featureName) => {
+  const features = (0, import_react6.useContext)(FeatureContext);
+  return features == null ? void 0 : features.find((feature) => feature.featureName === featureName);
+};
 // src/common/validators/types/type-validators.ts
 var isString = (value) => typeof value === "string";
 var isNumber = (value) => typeof value === "number" && !Number.isNaN(value);
@@ -1898,18 +1910,18 @@ var isTouchScreen = (navigator2 = window.navigator, matchMedia = window.matchMed
 };
 // src/common/hooks/useDebouncedFunction/useDebouncedFunction.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 function useDebouncedFunction(callback, waitMs) {
-  return (0, import_react6.useCallback)(debounce(callback, waitMs), [callback, waitMs]);
+  return (0, import_react7.useCallback)(debounce(callback, waitMs), [callback, waitMs]);
 }
 // src/common/hooks/useExternal/useExternal.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 function useExternal(url) {
-  const [externalWindow, setExternalWindow] = (0, import_react7.useState)(null);
-  const [hasManuallyTriggered, setHasManuallyTriggered] = (0, import_react7.useState)(false);
+  const [externalWindow, setExternalWindow] = (0, import_react8.useState)(null);
+  const [hasManuallyTriggered, setHasManuallyTriggered] = (0, import_react8.useState)(false);
   const dismissConfirmation = () => setHasManuallyTriggered(true);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (url) {
       setHasManuallyTriggered(false);
       setExternalWindow(window.open(url, "_blank"));
@@ -1920,10 +1932,10 @@ function useExternal(url) {
 }
 // src/common/hooks/useExternalStepPolling/useExternalStepPolling.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 function useExternalStepPolling(polling, onAction) {
   const httpClient = useHttpClient();
-  const asyncFn = (0, import_react8.useMemo)(() => {
+  const asyncFn = (0, import_react9.useMemo)(() => {
     if (polling) {
       return () => {
         return httpClient(polling.url).then((response) => {
@@ -1942,7 +1954,7 @@ function useExternalStepPolling(polling, onAction) {
       return void 0;
     }
   }, [polling, httpClient]);
-  const onPollingResponse = (0, import_react8.useCallback)(
+  const onPollingResponse = (0, import_react9.useCallback)(
     (pollingResponse) => {
       const responseHandlers = (polling == null ? void 0 : polling.responseHandlers) || [];
       const responseHandler = responseHandlers.find(
@@ -1969,7 +1981,7 @@ function useExternalStepPolling(polling, onAction) {
     maxAttempts: (polling == null ? void 0 : polling.maxAttempts) || 0,
     maxConsecutiveFails: (polling == null ? void 0 : polling.maxConsecutiveFails) || 0,
     onPollingResponse,
-    onFailure: (0, import_react8.useCallback)(() => {
+    onFailure: (0, import_react9.useCallback)(() => {
       if (polling) {
         onAction(polling.onError.action);
       }
@@ -1978,7 +1990,7 @@ function useExternalStepPolling(polling, onAction) {
 }
 // src/common/hooks/usePersistAsync/usePersistAsync.ts
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_react_intl21 = require("react-intl");
 // src/jsonSchemaForm/persistAsyncSchema/PersistAsyncSchema.messages.js
@@ -1992,7 +2004,7 @@ var PersistAsyncSchema_messages_default = (0, import_react_intl.defineMessages)(
 });
 // src/jsonSchemaForm/persistAsyncSchema/persistAsyncBasicSchema/PersistAsyncBasicSchema.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_react_intl20 = require("react-intl");
 // src/common/constants/DateMode.ts
@@ -2037,7 +2049,7 @@ var Size = {
 // src/jsonSchemaForm/basicTypeSchema/BasicTypeSchema.tsx
 var import_classnames6 = __toESM(require_classnames());
-var import_react27 = require("react");
+var import_react28 = require("react");
 // src/layout/alert/DynamicAlert.tsx
 var import_components2 = require("@transferwise/components");
@@ -2046,7 +2058,7 @@ var import_components2 = require("@transferwise/components");
 var import_components = require("@transferwise/components");
 // src/layout/icon/FlagIcon.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var isFlagIcon = (name) => isCurrencyFlagIcon(name) || isCountryFlagIcon(name);
 var isCurrencyFlagIcon = (name) => currencyCodes.some((currencyCode) => name === `flag-${currencyCode}`);
 var isCountryFlagIcon = (name) => countryCodes.some((countryCode) => name === `flag-${countryCode}`);
@@ -2055,7 +2067,7 @@ var FlagIcon = ({ name }) => {
     return null;
   }
   const code = name.substring(5);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "img",
     {
       src: `https://wise.com/web-art/assets/flags/${code}.svg`,
@@ -2249,7 +2261,7 @@ var countryCodes = [
 // src/layout/icon/NamedIcon.tsx
 var icons = __toESM(require("@transferwise/icons"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var isNamedIcon = (name) => {
   const iconName = toCapitalisedCamelCase(name);
   return Object.keys(icons).includes(iconName);
@@ -2260,7 +2272,7 @@ var NamedIcon = ({ name }) => {
   }
   const iconName = toCapitalisedCamelCase(name);
   const Icon = icons[iconName];
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { size: 24 });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: 24 });
 };
 var toCapitalisedCamelCase = (value) => value.split("-").map(capitaliseFirstChar).join("");
 var capitaliseFirstChar = (value) => {
@@ -2269,13 +2281,13 @@ var capitaliseFirstChar = (value) => {
 };
 // src/layout/icon/DynamicIcon.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var DynamicIcon = ({ type }) => {
   if (isFlagIcon(type)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FlagIcon, { name: type });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FlagIcon, { name: type });
   }
   if (isNamedIcon(type)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NamedIcon, { name: type });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NamedIcon, { name: type });
   }
   return null;
 };
@@ -2285,17 +2297,17 @@ function isValidIconName(name) {
 var DynamicIcon_default = DynamicIcon;
 // src/layout/utils/getNavigationOptionMedia.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var getNavigationOptionMedia = ({ icon, image }) => {
   if (icon == null ? void 0 : icon.name) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_components.Avatar, { type: import_components.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DynamicIcon_default, { type: icon.name }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_components.Avatar, { type: import_components.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DynamicIcon_default, { type: icon.name }) });
   }
   if (icon == null ? void 0 : icon.text) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_components.Avatar, { type: import_components.AvatarType.INITIALS, children: icon.text });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_components.Avatar, { type: import_components.AvatarType.INITIALS, children: icon.text });
   }
   if (image == null ? void 0 : image.url) {
     const { url, text } = image;
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: url, alt: text });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("img", { src: url, alt: text });
   }
   return null;
 };
@@ -2331,10 +2343,10 @@ var getTextAlignment = (align) => {
 var getTextAlignmentAndMargin = (component) => `${getTextAlignment(component.align)} ${getMargin(component.margin)}`;
 // src/layout/alert/DynamicAlert.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var DynamicAlert = (props) => {
   const alert = props.component;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     import_components2.Alert,
     {
       type: mapContextToAlertType(legacy_mapContext(alert.context)),
@@ -2367,12 +2379,12 @@ var mapContextToAlertType = (context) => {
 var DynamicAlert_default = DynamicAlert;
 // src/layout/box/DynamicBox.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var DynamicBox = (props) => {
   const box = props.component;
   const margin = getMargin(box.margin || box.border ? "lg" : "xs");
   if (!box.width || box.width === "xl") {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: margin + getBorderClass(box.border), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: margin + getBorderClass(box.border), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       DynamicLayout_default,
       {
         components: box.components,
@@ -2385,7 +2397,7 @@ var DynamicBox = (props) => {
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: margin + getBoxWidthClasses(box), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: getBorderClass(box.border), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: margin + getBoxWidthClasses(box), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getBorderClass(box.border), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     DynamicLayout_default,
     {
       components: box.components,
@@ -2462,7 +2474,7 @@ var getButtonSize = (size) => {
 };
 // src/layout/button/DynamicButton.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var DynamicButton = (props) => {
   var _a;
   const { component, onAction } = props;
@@ -2471,7 +2483,7 @@ var DynamicButton = (props) => {
   const priority = getButtonPriority(component);
   const { loading } = useDynamicFlow();
   const className = getMargin(component.margin || "md");
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_components3.Button,
     {
       size: getButtonSize(component.size),
@@ -2488,12 +2500,12 @@ var DynamicButton = (props) => {
 var DynamicButton_default = DynamicButton;
 // src/layout/columns/DynamicColumns.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var DynamicColumns = (props) => {
   const columns = props.component;
   const { leftWidth, rightWidth } = getWidth(columns.bias);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `${getMargin(columns.margin || "xs")} row`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${leftWidth} m-b-0`, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `${getMargin(columns.margin || "xs")} row`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `${leftWidth} m-b-0`, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       DynamicLayout_default,
       {
         components: columns.left,
@@ -2505,7 +2517,7 @@ var DynamicColumns = (props) => {
         onPersistAsync: props.onPersistAsync
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${rightWidth} m-b-0`, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `${rightWidth} m-b-0`, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       DynamicLayout_default,
       {
         components: columns.right,
@@ -2541,8 +2553,8 @@ var DynamicColumns_default = DynamicColumns;
 // src/layout/decision/DynamicDecision.tsx
 var import_components4 = require("@transferwise/components");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var DynamicDecision = ({ component, onAction }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: getMargin(component.margin), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_components4.NavigationOptionsList, { children: component.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var DynamicDecision = ({ component, onAction }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getMargin(component.margin), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_components4.NavigationOptionsList, { children: component.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   import_components4.NavigationOption,
   {
     title: option.title,
@@ -2558,17 +2570,17 @@ var DynamicDecision = ({ component, onAction }) => /* @__PURE__ */ (0, import_js
 var DynamicDecision_default = DynamicDecision;
 // src/layout/divider/DynamicDivider.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var DynamicDivider = ({ component }) => {
   const margin = getMargin(component.margin);
   const className = `m-t-0 ${margin}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("hr", { className });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("hr", { className });
 };
 var DynamicDivider_default = DynamicDivider;
 // src/layout/external/DynamicExternal.tsx
 var import_components5 = require("@transferwise/components");
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_react_intl3 = require("react-intl");
 // src/layout/external/DynamicExternal.messages.js
@@ -2582,36 +2594,36 @@ var DynamicExternal_messages_default = (0, import_react_intl2.defineMessages)({
 });
 // src/layout/external/DynamicExternal.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var DynamicExternal = ({ component, onAction }) => {
   const { requestUrl, responseHandlers, polling, retryTitle } = component;
   const intl = (0, import_react_intl3.useIntl)();
-  const openExternalUrl = (0, import_react9.useCallback)(
+  const openExternalUrl = (0, import_react10.useCallback)(
     () => window.open(requestUrl, "df-external-window"),
     [requestUrl]
   );
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     openExternalUrl();
   }, [openExternalUrl]);
   const pollingConfiguration = polling && responseHandlers ? __spreadProps(__spreadValues({}, polling), {
     responseHandlers
   }) : void 0;
   useExternalStepPolling(pollingConfiguration, onAction);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_components5.Loader, { size: import_components5.Size.LARGE, classNames: { "tw-loader": "tw-loader m-x-auto" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("br", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_components5.Button, { priority: "tertiary", block: true, onClick: openExternalUrl, children: retryTitle || intl.formatMessage(DynamicExternal_messages_default.retryTitle) })
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_components5.Loader, { size: import_components5.Size.LARGE, classNames: { "tw-loader": "tw-loader m-x-auto" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("br", {}),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_components5.Button, { priority: "tertiary", block: true, onClick: openExternalUrl, children: retryTitle || intl.formatMessage(DynamicExternal_messages_default.retryTitle) })
   ] });
 };
 var DynamicExternal_default = DynamicExternal;
 // src/jsonSchemaForm/genericSchema/GenericSchema.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 // src/jsonSchemaForm/allOfSchema/AllOfSchema.tsx
 var import_classnames = __toESM(require_classnames());
-var import_react10 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var splitModel = (model, schemas) => {
   return schemas.map((schema) => getValidObjectModelParts(model, schema) || {});
 };
@@ -2634,13 +2646,13 @@ var AllOfSchema = (props) => {
     setModels(models);
     props.onChange(__spreadProps(__spreadValues({}, onChangeProps), { model: combineModels(models) }));
   };
-  const [models, setModels] = (0, import_react10.useState)(splitModel(props.model, props.schema.allOf));
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-    props.schema.title && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "page-header", children: props.schema.title }),
-    props.schema.description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { children: props.schema.description }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "row", children: props.schema.allOf.map((schema, index) => (
+  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.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
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_classnames.default)(getSchemaColumnClasses(schema.width)), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: (0, import_classnames.default)(getSchemaColumnClasses(schema.width)), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         GenericSchema_default,
         {
           schema,
@@ -2666,7 +2678,7 @@ var AllOfSchema_default = AllOfSchema;
 // src/jsonSchemaForm/arrayTypeSchema/arrayListSchema/multipleFileUploadSchema/MultipleFileUploadSchema.tsx
 var import_components7 = require("@transferwise/components");
 var import_classnames2 = __toESM(require_classnames());
-var import_react11 = require("react");
+var import_react12 = require("react");
 // src/jsonSchemaForm/controlFeedback/ControlFeedback.tsx
 var import_components6 = require("@transferwise/components");
@@ -2729,7 +2741,7 @@ var ControlFeedback_messages_default = (0, import_react_intl4.defineMessages)({
 });
 // src/jsonSchemaForm/controlFeedback/ControlFeedback.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var ControlFeedback = (props) => {
   var _a;
   const defaultValidationMessages = useDefaultValidationMessages(props.schema);
@@ -2738,12 +2750,12 @@ var ControlFeedback = (props) => {
   const isValidationVisible = !isErrorVisible && (props.submitted || props.changed && props.blurred) && !!((_a = props.validations) == null ? void 0 : _a.length);
   const isDescriptionVisible = props.focused && props.schema.description && !isValidationVisible;
   const hasInfoMessage = !!props.infoMessage;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { id: props.id, children: [
-    isErrorVisible ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components6.InlineAlert, { type: "error", children: props.errors }) : null,
-    isValidationVisible ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components6.InlineAlert, { type: "error", children: props.validations.map((validation) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: validationMessages[validation] }, validation)) }) : null,
-    (isDescriptionVisible || hasInfoMessage) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_components6.InlineAlert, { type: "info", children: [
-      isDescriptionVisible && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: props.schema.description }),
-      hasInfoMessage && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: 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: [
+      isDescriptionVisible && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: props.schema.description }),
+      hasInfoMessage && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: props.infoMessage })
     ] })
   ] });
 };
@@ -2885,15 +2897,15 @@ function useFormattedDefaultErrorMessages({
 }
 // src/jsonSchemaForm/arrayTypeSchema/arrayListSchema/multipleFileUploadSchema/MultipleFileUploadSchema.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var MultipleFileUploadSchema = (props) => {
   var _a, _b;
   const { onChange, schema } = props;
   const onEvent = useEventDispatcher();
   const defaultErrorMessages = useFormattedDefaultErrorMessages(schema);
-  const uid = (0, import_react11.useMemo)(() => schema.$id || generateRandomId(), [schema.$id]);
-  const [inputChanged, setInputChanged] = (0, import_react11.useState)(false);
-  const [files, setFiles] = (0, import_react11.useState)(() => convertFileIdsToComponentFileObjects(props.model || []));
+  const uid = (0, import_react12.useMemo)(() => schema.$id || generateRandomId(), [schema.$id]);
+  const [inputChanged, setInputChanged] = (0, import_react12.useState)(false);
+  const [files, setFiles] = (0, import_react12.useState)(() => convertFileIdsToComponentFileObjects(props.model || []));
   const performPersistAsync = usePersistAsync(schema.items.persistAsync);
   const fileSchemaDescriptor = schema.items.persistAsync.schema;
   const isBlob = isBlobSchema(fileSchemaDescriptor);
@@ -2947,10 +2959,10 @@ var MultipleFileUploadSchema = (props) => {
     onDeleteFile: () => Promise.resolve()
   });
   const feedbackId = `${uid}-feedback`;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: (0, import_classnames2.default)("form-group", { "has-error": showError }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "d-block control-label", htmlFor: uid, children: props.schema.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { "aria-describedby": feedbackId, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_components7.UploadInput, __spreadValues({}, uploadInputProps)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  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)(
       ControlFeedback_default,
       {
         id: feedbackId,
@@ -2993,17 +3005,17 @@ function getValidationMessages(schema, required, defaultErrorMessages) {
 // src/jsonSchemaForm/arrayTypeSchema/arrayListSchema/repeatableSchema/RepeatableSchema.tsx
 var import_components9 = require("@transferwise/components");
 var import_icons = require("@transferwise/icons");
-var import_react12 = require("react");
+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_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var ItemSummaryOption = ({
   item,
   onClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     import_components8.NavigationOption,
     {
       onClick,
@@ -3041,7 +3053,7 @@ var RepeatableSchema_messages_default = (0, import_react_intl9.defineMessages)({
 // src/jsonSchemaForm/arrayTypeSchema/arrayListSchema/repeatableSchema/RepeatableSchemaStep.tsx
 var import_react_intl10 = require("react-intl");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var RepeatableSchemaStep = ({
   type,
   schema,
@@ -3081,7 +3093,7 @@ var RepeatableSchemaStep = ({
     actions: [],
     schemas: []
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     DynamicFlowStep,
     {
       step,
@@ -3279,7 +3291,7 @@ var getStringValueFromSchema = (schema, model) => {
 var schemaSummaryProvides = (summary, providesProp) => !!summary && Object.hasOwnProperty.call(summary, providesProp) && Boolean(summary[providesProp]);
 // src/jsonSchemaForm/arrayTypeSchema/arrayListSchema/repeatableSchema/RepeatableSchema.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var RepeatableSchema = ({
   schema,
   model,
@@ -3287,8 +3299,8 @@ var RepeatableSchema = ({
   submitted,
   onChange
 }) => {
-  const [openModalType, setOpenModalType] = (0, import_react12.useState)(null);
-  const [itemSummaries, setItemSummaries] = (0, import_react12.useState)(() => {
+  const [openModalType, setOpenModalType] = (0, import_react13.useState)(null);
+  const [itemSummaries, setItemSummaries] = (0, import_react13.useState)(() => {
     if (isObject(model) && !isArray(model)) {
       throw new Error(
         "RepeatableSchema does not support object models. Ensure your array schema is wrapped inside an object schema."
@@ -3296,7 +3308,7 @@ var RepeatableSchema = ({
     }
     return model ? model.map((item) => getItemSummaryFromSchema(schema.items, item, schema == null ? void 0 : schema.summary)) : null;
   });
-  const [editableItem, setEditableItem] = (0, import_react12.useState)({ item: null, model: null });
+  const [editableItem, setEditableItem] = (0, import_react13.useState)({ item: null, model: null });
   const broadcastModelChange = (updatedItems) => {
     const updatedModel = updatedItems ? updatedItems.map(({ value }) => value) : null;
     onChange({
@@ -3333,9 +3345,9 @@ var RepeatableSchema = ({
     setOpenModalType(null);
   };
   const { formatMessage } = (0, import_react_intl11.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-    schema.title && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_components9.Header, { title: schema.title }),
-    itemSummaries && itemSummaries.map((itemSummary) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  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 }),
+    itemSummaries && itemSummaries.map((itemSummary) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       ItemSummaryOption,
       {
         item: itemSummary,
@@ -3343,21 +3355,21 @@ var RepeatableSchema = ({
       },
       JSON.stringify(itemSummary)
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       import_components9.NavigationOption,
       {
         onClick: onAddItem,
-        media: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons.Plus, {}),
+        media: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons.Plus, {}),
         title: schema.addItemTitle || formatMessage(RepeatableSchema_messages_default.addItemTitle)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       import_components9.Modal,
       {
         open: openModalType !== null,
         onClose: onCancelEdit,
         title: (openModalType === "add" ? schema.addItemTitle : schema.editItemTitle) || formatMessage(RepeatableSchema_messages_default.addItemTitle),
-        body: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        body: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           RepeatableSchemaStep_default,
           {
             type: openModalType != null ? openModalType : "add",
@@ -3398,14 +3410,14 @@ var getUpdatedItemSummaries = (action, {
 var RepeatableSchema_default = RepeatableSchema;
 // src/jsonSchemaForm/arrayTypeSchema/arrayListSchema/ArrayListSchema.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var ArrayListSchema = (props) => {
   const { schema } = props;
   if (isMultipleFileUploadSchema(schema)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MultipleFileUploadSchema_default, __spreadProps(__spreadValues({}, props), { schema }));
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MultipleFileUploadSchema_default, __spreadProps(__spreadValues({}, props), { schema }));
   }
   if (isListArraySchema(schema)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(RepeatableSchema_default, __spreadProps(__spreadValues({}, props), { schema }));
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RepeatableSchema_default, __spreadProps(__spreadValues({}, props), { schema }));
   }
   throw new Error("Invalid array list schema");
 };
@@ -3416,11 +3428,11 @@ ArrayListSchema.defaultProps = {
 var ArrayListSchema_default = ArrayListSchema;
 // src/jsonSchemaForm/arrayTypeSchema/ArraySchema.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var ArraySchema = (props) => {
   const { schema } = props;
   if (isListArraySchema(schema)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrayListSchema_default, __spreadValues({}, props));
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ArrayListSchema_default, __spreadValues({}, props));
   }
   throw new Error("Not implemented");
 };
@@ -3431,8 +3443,8 @@ var ArraySchema_default = ArraySchema;
 // src/jsonSchemaForm/objectSchema/ObjectSchema.tsx
 var import_classnames3 = __toESM(require_classnames());
-var import_react13 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var getSchemaColumnClasses2 = (width) => {
   return {
     "col-xs-12": true,
@@ -3441,7 +3453,7 @@ var getSchemaColumnClasses2 = (width) => {
   };
 };
 var ObjectSchema = (props) => {
-  const [model, setModel] = (0, import_react13.useState)(() => __spreadValues({}, getValidObjectModelParts(props.model, props.schema)));
+  const [model, setModel] = (0, import_react14.useState)(() => __spreadValues({}, getValidObjectModelParts(props.model, props.schema)));
   const onChangeProperty = (propertyName, onChangeProps) => {
     if (onChangeProps.model !== null) {
       model[propertyName] = onChangeProps.model;
@@ -3452,7 +3464,7 @@ var ObjectSchema = (props) => {
     props.onChange(__spreadProps(__spreadValues({}, onChangeProps), { model }));
   };
   const isRequired = (propertyName) => props.schema.required && props.schema.required.includes(propertyName);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const newModel = getValidObjectModelParts(model, props.schema) || {};
     setModel(newModel);
     if (!isEqual(newModel, model)) {
@@ -3470,25 +3482,25 @@ var ObjectSchema = (props) => {
   const isPropertyDefined = (propertyName) => typeof props.schema.properties[propertyName] !== "undefined";
   const orderedPropertyNames = Array.from(allorderedPropertiesSet).filter(isPropertyDefined);
   const propsErrors = props.errors;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("fieldset", { children: [
-    props.schema.title && !props.hideTitle && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("legend", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("fieldset", { children: [
+    props.schema.title && !props.hideTitle && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("legend", { children: [
       " ",
       props.schema.title,
       " "
     ] }),
-    props.schema.description && !props.hideTitle && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { children: [
+    props.schema.description && !props.hideTitle && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("p", { children: [
       " ",
       props.schema.description,
       " "
     ] }),
-    props.schema.alert && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DynamicAlert_default, { component: props.schema.alert }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "row", children: orderedPropertyNames.map((propertyName) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    props.schema.alert && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DynamicAlert_default, { component: props.schema.alert }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "row", children: orderedPropertyNames.map((propertyName) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "div",
       {
         className: (0, import_classnames3.default)(
           getSchemaColumnClasses2(props.schema.properties[propertyName].width)
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           GenericSchema_default,
           {
             schema: props.schema.properties[propertyName],
@@ -3514,7 +3526,7 @@ var ObjectSchema_default = ObjectSchema;
 // src/jsonSchemaForm/oneOfSchema/OneOfSchema.tsx
 var import_classnames4 = __toESM(require_classnames());
-var import_react16 = require("react");
+var import_react17 = require("react");
 // src/jsonSchemaForm/help/Help.tsx
 var import_components10 = require("@transferwise/components");
@@ -3531,14 +3543,14 @@ var Help_messages_default = (0, import_react_intl12.defineMessages)({
 });
 // src/jsonSchemaForm/help/Help.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var Help = (props) => {
   const intl = (0, import_react_intl13.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     import_components10.Info,
     {
       className: "m-l-1",
-      content: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_components10.Markdown, { children: props.help.markdown }),
+      content: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_components10.Markdown, { children: props.help.markdown }),
       presentation: "POPOVER",
       size: "sm",
       "aria-label": intl.formatMessage(Help_messages_default.helpAria)
@@ -3548,11 +3560,11 @@ var Help = (props) => {
 var Help_default = Help;
 // src/jsonSchemaForm/schemaFormControl/SchemaFormControl.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 // src/formControl/FormControl.tsx
 var import_components11 = require("@transferwise/components");
-var import_react14 = require("react");
+var import_react15 = require("react");
 // src/formControl/utils/value-utils.ts
 var getSafeStringValue = (value, options = {}) => {
@@ -3662,8 +3674,8 @@ var logInvalidTypeFallbackWarning = ({
 };
 // src/formControl/FormControl.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var _FormControl = class _FormControl extends import_react14.PureComponent {
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var _FormControl = class _FormControl extends import_react15.PureComponent {
   constructor(props) {
     super(props);
     /**
@@ -3751,7 +3763,7 @@ var _FormControl = class _FormControl extends import_react14.PureComponent {
     } = this.props;
     switch (type) {
       case FormControlType.RADIO:
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           import_components11.RadioGroup,
           {
             radios: options.map(this.mapOption),
@@ -3761,7 +3773,7 @@ var _FormControl = class _FormControl extends import_react14.PureComponent {
           }
         );
       case FormControlType.CHECKBOX:
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           import_components11.Checkbox,
           {
             checked: getSafeBooleanValue(value, { coerceValue: true }),
@@ -3776,7 +3788,7 @@ var _FormControl = class _FormControl extends import_react14.PureComponent {
         );
       case FormControlType.SELECT: {
         const search = options.length >= 20;
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           import_components11.Select,
           {
             id,
@@ -3800,13 +3812,13 @@ var _FormControl = class _FormControl extends import_react14.PureComponent {
         );
       }
       case FormControlType.TAB:
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           import_components11.Tabs,
           {
             selected: ((_a = this.getSelectedOption(options)) == null ? void 0 : _a.value) || 0,
             tabs: options.map((option) => ({
               title: option.label,
-              content: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, {}),
+              content: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, {}),
               disabled: option.disabled || false
             })),
             name: id,
@@ -3820,7 +3832,7 @@ var _FormControl = class _FormControl extends import_react14.PureComponent {
           }
         );
       case FormControlType.NUMBER:
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "input",
           {
             autoComplete: this.getAutocompleteStatus(),
@@ -3849,7 +3861,7 @@ var _FormControl = class _FormControl extends import_react14.PureComponent {
           }
         );
       case FormControlType.HIDDEN:
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "input",
           {
             type: "hidden",
@@ -3859,7 +3871,7 @@ var _FormControl = class _FormControl extends import_react14.PureComponent {
           }
         );
       case FormControlType.PASSWORD:
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "input",
           {
             autoComplete: this.getAutocompleteStatus(),
@@ -3879,7 +3891,7 @@ var _FormControl = class _FormControl extends import_react14.PureComponent {
         );
       case FormControlType.DATE:
       case FormControlType.DATETIME:
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           import_components11.DateInput,
           {
             disabled,
@@ -3893,7 +3905,7 @@ var _FormControl = class _FormControl extends import_react14.PureComponent {
           }
         );
       case FormControlType.DATELOOKUP: {
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           import_components11.DateLookup,
           {
             value: getSafeDateStringValue(value),
@@ -3911,7 +3923,7 @@ var _FormControl = class _FormControl extends import_react14.PureComponent {
         );
       }
       case FormControlType.TEL:
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           import_components11.PhoneNumberInput,
           {
             disabled,
@@ -3943,7 +3955,7 @@ var _FormControl = class _FormControl extends import_react14.PureComponent {
           autoComplete: this.getAutocompleteStatus()
         };
         if (this.props.displayPattern) {
-          return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             import_components11.TextareaWithDisplayFormat,
             __spreadProps(__spreadValues({
               displayPattern: this.props.displayPattern
@@ -3952,7 +3964,7 @@ var _FormControl = class _FormControl extends import_react14.PureComponent {
             })
           );
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "textarea",
           __spreadProps(__spreadValues({}, textareaProps), {
             onChange: this.handleInputOnChange,
@@ -3965,7 +3977,7 @@ var _FormControl = class _FormControl extends import_react14.PureComponent {
         return (
           // 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_runtime26.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             import_components11.Upload,
             __spreadProps(__spreadValues({}, uploadProps), {
               usAccept: uploadProps.usAccept || "*",
@@ -4002,7 +4014,7 @@ var _FormControl = class _FormControl extends import_react14.PureComponent {
           autoComplete: this.getAutocompleteStatus()
         };
         if (this.props.displayPattern) {
-          return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             import_components11.InputWithDisplayFormat,
             __spreadProps(__spreadValues({
               displayPattern: this.props.displayPattern
@@ -4011,7 +4023,7 @@ var _FormControl = class _FormControl extends import_react14.PureComponent {
             })
           );
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "input",
           __spreadProps(__spreadValues({}, inputProps), {
             onChange: this.handleInputOnChange,
@@ -4061,7 +4073,7 @@ var FormControl = _FormControl;
 // src/jsonSchemaForm/schemaFormControl/utils/mapping-utils.tsx
 var import_components12 = require("@transferwise/components");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var mapConstSchemaToOption = (schema, controlType) => {
   switch (controlType) {
     case "select":
@@ -4089,7 +4101,7 @@ var mapKeywordsToSearchStrings = (searchStrings) => isArray(searchStrings) ? { s
 var mapImage = (image) => {
   if (image == null ? void 0 : image.url) {
     return {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "media", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "np-option__no-media-circle", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("img", { src: image.url, alt: image.name || "" }) }) })
+      icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "media", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "np-option__no-media-circle", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("img", { src: image.url, alt: image.name || "" }) }) })
     };
   }
   return null;
@@ -4099,27 +4111,27 @@ var getIconPropertyForSelectOption = (icon) => {
     return { currency: icon.name.substring(5) };
   }
   if ((icon == null ? void 0 : icon.name) && isValidIconName(icon.name)) {
-    return { icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DynamicIcon_default, { type: icon.name }) };
+    return { icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DynamicIcon_default, { type: icon.name }) };
   }
   if (icon == null ? void 0 : icon.text) {
-    return { icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: icon.text }) };
+    return { icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: icon.text }) };
   }
   return null;
 };
 var getAvatarPropertyForRadioOption = ({ image, icon }) => {
   if (image == null ? void 0 : image.url) {
     return {
-      avatar: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_components12.Avatar, { type: import_components12.AvatarType.THUMBNAIL, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("img", { src: image.url, alt: "" }) })
+      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: "" }) })
     };
   }
   if ((icon == null ? void 0 : icon.name) && isValidIconName(icon.name)) {
     return {
-      avatar: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_components12.Avatar, { type: import_components12.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DynamicIcon_default, { type: icon.name }) })
+      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 }) })
     };
   }
   if (icon == null ? void 0 : icon.text) {
     return {
-      avatar: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_components12.Avatar, { type: import_components12.AvatarType.INITIALS, children: icon.text })
+      avatar: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_components12.Avatar, { type: import_components12.AvatarType.INITIALS, children: icon.text })
     };
   }
   return null;
@@ -4140,7 +4152,7 @@ var getDisabled = (disabled) => {
 };
 // src/jsonSchemaForm/schemaFormControl/SchemaFormControl.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var isNativeInput = (propsSchemaType) => {
   return propsSchemaType === "string" || propsSchemaType === "number";
 };
@@ -4193,7 +4205,7 @@ var SchemaFormControl = (props) => {
     onChange(getValidBasicModelOrNull(value2, schema), type);
   };
   const controlType = getControlType(schema);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     warnIfInvalidSchema(schema, log, controlType);
   }, [JSON.stringify(schema), log, controlType]);
   const options = schema.values || getOptions(schema, controlType);
@@ -4217,7 +4229,7 @@ var SchemaFormControl = (props) => {
     uploadProps: mapSchemaToUploadOptions(schema),
     describedBy
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { "aria-describedby": describedBy, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FormControl, __spreadValues(__spreadValues({ type: controlType, value: safeValue }, events), controlProps)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { "aria-describedby": describedBy, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(FormControl, __spreadValues(__spreadValues({ type: controlType, value: safeValue }, events), controlProps)) });
 };
 SchemaFormControl.defaultProps = {
   value: null,
@@ -4246,17 +4258,17 @@ var warnIfInvalidSchema = (schema, log, controlType) => {
 var SchemaFormControl_default = SchemaFormControl;
 // src/jsonSchemaForm/oneOfSchema/OneOfSchema.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var OneOfSchema = (props) => {
   const onEvent = useEventDispatcher();
-  const [changed, setChanged] = (0, import_react16.useState)(false);
-  const [focused, setFocused] = (0, import_react16.useState)(false);
-  const [blurred, setBlurred] = (0, import_react16.useState)(false);
-  const id = (0, import_react16.useMemo)(() => props.schema.$id || generateRandomId(), [props.schema.$id]);
-  const [schemaIndex, setSchemaIndex] = (0, import_react16.useState)(
+  const [changed, setChanged] = (0, import_react17.useState)(false);
+  const [focused, setFocused] = (0, import_react17.useState)(false);
+  const [blurred, setBlurred] = (0, import_react17.useState)(false);
+  const id = (0, import_react17.useMemo)(() => props.schema.$id || generateRandomId(), [props.schema.$id]);
+  const [schemaIndex, setSchemaIndex] = (0, import_react17.useState)(
     getActiveSchemaIndex(props.schema, props.model)
   );
-  const [models, setModels] = (0, import_react16.useState)(getModelPartsForSchemas(props.model, props.schema.oneOf));
+  const [models, setModels] = (0, import_react17.useState)(getModelPartsForSchemas(props.model, props.schema.oneOf));
   const debouncedTrackEvent = useDebouncedFunction(onEvent, 200);
   const onSearchChange = (searchValue) => {
     debouncedTrackEvent("Dynamic Flow - OneOf Searched", {
@@ -4264,7 +4276,7 @@ var OneOfSchema = (props) => {
       searchValueLength: searchValue.length
     });
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const modelIndex = getValidIndexFromValue(props.schema, props.model);
     const defaultIndex = getValidIndexFromValue(props.schema, props.schema.default);
     if (modelIndex === -1 && defaultIndex >= 0) {
@@ -4320,11 +4332,11 @@ var OneOfSchema = (props) => {
     "has-error": !changed && props.errors && !isEmpty(props.errors) || (props.submitted || changed && blurred) && validations.length
   };
   const feedbackId = `${id}-feedback`;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-    (props.schema.oneOf.length > 1 || isConstSchema(props.schema.oneOf[0])) && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: (0, import_classnames4.default)(formGroupClasses), children: [
+  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: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: (0, import_classnames4.default)(formGroupClasses), children: [
         getTitleAndHelp(props.schema, id),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           SchemaFormControl_default,
           {
             id,
@@ -4338,7 +4350,7 @@ var OneOfSchema = (props) => {
             describedBy: feedbackId
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           ControlFeedback_default,
           {
             id: feedbackId,
@@ -4353,9 +4365,9 @@ var OneOfSchema = (props) => {
           }
         )
       ] }),
-      props.schema.alert && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DynamicAlert_default, { component: props.schema.alert })
+      props.schema.alert && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DynamicAlert_default, { component: props.schema.alert })
     ] }),
-    isNoNConstSchema(props.schema.oneOf[schemaIndex]) && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    isNoNConstSchema(props.schema.oneOf[schemaIndex]) && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       GenericSchema_default,
       {
         schema: props.schema.oneOf[schemaIndex],
@@ -4371,12 +4383,12 @@ var OneOfSchema = (props) => {
   ] });
 };
 function getTitleAndHelp(schema, id) {
-  const helpElement = schema.help ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Help_default, { help: schema.help }) : null;
-  const titleElement = isConstSchema(schema.oneOf[0]) ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("label", { className: "control-label d-inline", htmlFor: id, children: [
+  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_runtime29.jsxs)("h4", { className: "m-b-2", children: [
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("h4", { className: "m-b-2", children: [
     schema.title,
     " ",
     helpElement
@@ -4417,12 +4429,12 @@ var OneOfSchema_default = OneOfSchema;
 // src/jsonSchemaForm/persistAsyncSchema/persistAsyncBlobSchema/PersistAsyncBlobSchema.tsx
 var import_classnames5 = __toESM(require_classnames());
-var import_react18 = require("react");
+var import_react19 = require("react");
 // src/jsonSchemaForm/persistAsyncSchema/persistAsyncBlobSchema/UploadInputAdapter.tsx
 var import_components13 = require("@transferwise/components");
-var import_react17 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var UploadInputAdapter = (props) => {
   const {
     id,
@@ -4438,7 +4450,7 @@ var UploadInputAdapter = (props) => {
     onCancel
   } = props;
   const onEvent = useEventDispatcher();
-  const files = (0, import_react17.useMemo)(() => fileId ? [{ id: fileId, status: import_components13.Status.SUCCEEDED }] : [], [fileId]);
+  const files = (0, import_react18.useMemo)(() => fileId ? [{ id: fileId, status: import_components13.Status.SUCCEEDED }] : [], [fileId]);
   const uploadFile = (formData) => {
     onEvent("Dynamic Flow - PersistAsync", { status: "pending", schemaId: id });
     return httpClient(`${httpOptions.url}`, {
@@ -4456,7 +4468,7 @@ var UploadInputAdapter = (props) => {
       }
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     import_components13.UploadInput,
     {
       id,
@@ -4476,12 +4488,12 @@ var UploadInputAdapter = (props) => {
 };
 // src/jsonSchemaForm/persistAsyncSchema/persistAsyncBlobSchema/PersistAsyncBlobSchema.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var PersistAsyncBlobSchema = (props) => {
-  const [persistAsyncValidationMessages, setPersistAsyncValidationMessages] = (0, import_react18.useState)({});
-  const [persistAsyncValidations, setPersistAsyncValidations] = (0, import_react18.useState)(null);
-  const [validations, setValidations] = (0, import_react18.useState)([]);
-  const [changed, setChanged] = (0, import_react18.useState)(false);
+  const [persistAsyncValidationMessages, setPersistAsyncValidationMessages] = (0, import_react19.useState)({});
+  const [persistAsyncValidations, setPersistAsyncValidations] = (0, import_react19.useState)(null);
+  const [validations, setValidations] = (0, import_react19.useState)([]);
+  const [changed, setChanged] = (0, import_react19.useState)(false);
   const httpClient = useHttpClient();
   const onEvent = useEventDispatcher();
   const refreshValidations = () => {
@@ -4489,7 +4501,7 @@ var PersistAsyncBlobSchema = (props) => {
       setValidations(getValidationFailures(props.model, props.schema, !!props.required));
     }
   };
-  (0, import_react18.useEffect)(refreshValidations, [props.model, props.submitted]);
+  (0, import_react19.useEffect)(refreshValidations, [props.model, props.submitted]);
   const onSuccess = async (httpResponse, _fileName) => {
     const jsonResponse = await httpResponse.json();
     const id2 = getIdFromResponse(props.schema.persistAsync.idProperty, jsonResponse);
@@ -4520,8 +4532,8 @@ var PersistAsyncBlobSchema = (props) => {
   };
   const id = props.schema.$id || props.schema.persistAsync.schema.$id || props.schema.persistAsync.idProperty;
   const feedbackId = `${id}-feedback`;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: (0, import_classnames5.default)(formGroupClasses), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { "aria-describedby": feedbackId, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: (0, import_classnames5.default)(formGroupClasses), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { "aria-describedby": feedbackId, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       UploadInputAdapter,
       __spreadValues({
         id,
@@ -4538,7 +4550,7 @@ var PersistAsyncBlobSchema = (props) => {
         onCancel
       }, mapSchemaToUploadOptions(props.schema.persistAsync.schema))
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       ControlFeedback_default,
       {
         id: feedbackId,
@@ -4563,17 +4575,17 @@ PersistAsyncBlobSchema.defaultProps = {
 var PersistAsyncBlobSchema_default = PersistAsyncBlobSchema;
 // src/jsonSchemaForm/persistAsyncSchema/PersistAsyncSchema.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var PersistAsyncSchema = (props) => {
   const { schema } = props;
   const persistAsyncSchemaType = schema.persistAsync.schema.type;
   if (persistAsyncSchemaType === "blob") {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       PersistAsyncBlobSchema_default,
       __spreadValues({}, props)
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PersistAsyncBasicSchema_default, __spreadValues({}, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PersistAsyncBasicSchema_default, __spreadValues({}, props));
 };
 PersistAsyncSchema.defaultProps = {
   required: false
@@ -4581,7 +4593,7 @@ PersistAsyncSchema.defaultProps = {
 var PersistAsyncSchema_default = PersistAsyncSchema;
 // src/jsonSchemaForm/promotedOneOfSchema/PromotedOneOfSchema.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 // src/jsonSchemaForm/promotedOneOfSchema/promoted-one-of-utils.ts
 var getSelectionFromModel = (schema, model) => {
@@ -4594,7 +4606,7 @@ var getSelectionFromModel = (schema, model) => {
 // src/jsonSchemaForm/promotedOneOfSchema/promotedOneOfControl/PromotedOneOfCheckboxControl.tsx
 var import_components14 = require("@transferwise/components");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var PromotedOneOfCheckboxControl = (props) => {
   const { id, selection, setSelection } = props;
   const { promoted, other, checkedMeans } = props.promotion;
@@ -4605,14 +4617,14 @@ var PromotedOneOfCheckboxControl = (props) => {
   const toggleSelection = () => {
     setSelection(checked ? selectionWhenUnchecked : selectionWhenChecked);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "form-group", children: /* @__PURE__ */ (0, import_jsx_runtime33.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_components14.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_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var PromotedOneOfRadioControl = (props) => {
   var _a, _b;
   const { id, selection, setSelection, promotion, promotedOneOf, title } = props;
@@ -4629,9 +4641,9 @@ var PromotedOneOfRadioControl = (props) => {
       secondary: promotion.other.description
     }, getAvatarPropertyForRadioOption(promotion.other))
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "form-group", children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("label", { className: "control-label", htmlFor: id, children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  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,
       {
         name: "promoted-selection",
@@ -4649,16 +4661,16 @@ PromotedOneOfRadioControl.defaultProps = {
 var PromotedOneOfRadioControl_default = PromotedOneOfRadioControl;
 // src/jsonSchemaForm/promotedOneOfSchema/promotedOneOfControl/PromotedOneOfControl.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var PromotedOneOfControl = (props) => {
   const controlType = props.promotion.control || "radio";
   switch (controlType) {
     case "radio":
-      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PromotedOneOfRadioControl_default, __spreadValues({}, props));
+      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PromotedOneOfRadioControl_default, __spreadValues({}, props));
     case "checkbox":
-      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PromotedOneOfCheckboxControl_default, __spreadValues({}, props));
+      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PromotedOneOfCheckboxControl_default, __spreadValues({}, props));
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, {});
   }
 };
 PromotedOneOfControl.defaultProps = {
@@ -4668,20 +4680,20 @@ PromotedOneOfControl.defaultProps = {
 var PromotedOneOfControl_default = PromotedOneOfControl;
 // src/jsonSchemaForm/promotedOneOfSchema/PromotedOneOfSchema.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var isPromoted = (schema) => schema.promoted === true;
 var PromotedOneOfSchema = (props) => {
   var _a;
-  const [selection, setSelection] = (0, import_react19.useState)(
+  const [selection, setSelection] = (0, import_react20.useState)(
     getSelectionFromModel(props.schema, props.model) || ((_a = props.schema.promotion) == null ? void 0 : _a.default) || "promoted"
   );
   const promotedAlert = props.schema.alert;
   const promotedOneOf = props.schema.oneOf.find(isPromoted);
   const promotedObjectSchema = getPromotedObjectSchema(promotedOneOf);
   const otherOneOf = getOtherOneOf(props.schema);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-    promotedAlert && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DynamicAlert_default, { component: promotedAlert }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+    promotedAlert && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DynamicAlert_default, { component: promotedAlert }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       PromotedOneOfControl_default,
       {
         id: props.schema.$id,
@@ -4692,8 +4704,8 @@ var PromotedOneOfSchema = (props) => {
         setSelection
       }
     ),
-    selection === "promoted" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ObjectSchema_default, __spreadProps(__spreadValues({}, props), { schema: promotedObjectSchema })),
-    selection === "other" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(GenericSchema_default, __spreadProps(__spreadValues({}, props), { schema: otherOneOf }))
+    selection === "promoted" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ObjectSchema_default, __spreadProps(__spreadValues({}, props), { schema: promotedObjectSchema })),
+    selection === "other" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(GenericSchema_default, __spreadProps(__spreadValues({}, props), { schema: otherOneOf }))
   ] });
 };
 function getPromotedObjectSchema(promotedSchema) {
@@ -4742,12 +4754,12 @@ var ReadOnlySchema_messages_default = (0, import_react_intl14.defineMessages)({
 });
 // src/jsonSchemaForm/readOnlySchema/ReadOnlySchema.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 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_runtime37.jsx)(import_components16.DefinitionList, { layout: import_components16.Layout.VERTICAL_ONE_COLUMN, definitions: [{ title, value, key: "" }] });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_components16.DefinitionList, { layout: import_components16.Layout.VERTICAL_ONE_COLUMN, definitions: [{ title, value, key: "" }] });
 };
 var ReadOnlySchema_default = ReadOnlySchema;
 function getValueForSchema({
@@ -4780,7 +4792,7 @@ function getSelectedOneOf(schema, model) {
 function getValueFromOption(option) {
   const text = option.title && option.description ? `${option.title} - ${option.description}` : option.title || "";
   const icon = getAvatarPropertyForRadioOption({ icon: option.icon });
-  return (icon == null ? void 0 : icon.avatar) ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+  return (icon == null ? void 0 : icon.avatar) ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
     icon.avatar,
     " ",
     text
@@ -4788,22 +4800,22 @@ function getValueFromOption(option) {
 }
 // src/jsonSchemaForm/validationAsyncSchema/ValidationAsyncSchema.tsx
-var import_react20 = require("react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var ValidationAsyncSchema = (props) => {
   const { schema, model, required, submitted, errors, onChange } = props;
-  const [validationAsyncModel, setValidationAsyncModel] = (0, import_react20.useState)(model);
-  const previousRequestedModelReference = (0, import_react20.useRef)(null);
-  const [validationAsyncSuccessMessage, setValidationAsyncSuccessMessage] = (0, import_react20.useState)(
+  const [validationAsyncModel, setValidationAsyncModel] = (0, import_react21.useState)(model);
+  const previousRequestedModelReference = (0, import_react21.useRef)(null);
+  const [validationAsyncSuccessMessage, setValidationAsyncSuccessMessage] = (0, import_react21.useState)(
     null
   );
-  const [validationAsyncErrors, setValidationAsyncErrors] = (0, import_react20.useState)(null);
-  const [fieldSubmitted, setFieldSubmitted] = (0, import_react20.useState)(false);
-  const [abortController, setAbortController] = (0, import_react20.useState)(null);
+  const [validationAsyncErrors, setValidationAsyncErrors] = (0, import_react21.useState)(null);
+  const [fieldSubmitted, setFieldSubmitted] = (0, import_react21.useState)(false);
+  const [abortController, setAbortController] = (0, import_react21.useState)(null);
   const httpClient = useHttpClient();
   const onEvent = useEventDispatcher();
   const log = useLogger();
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!schema.validationAsync.method) {
       log.warning(
         "Invalid schema or model",
@@ -4873,20 +4885,20 @@ var ValidationAsyncSchema = (props) => {
     required,
     schema
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(BasicTypeSchema_default, __spreadValues({}, basicTypeSchemaProps));
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(BasicTypeSchema_default, __spreadValues({}, basicTypeSchemaProps));
 };
 ValidationAsyncSchema.defaultProps = { required: false };
 var ValidationAsyncSchema_default = ValidationAsyncSchema;
 // src/jsonSchemaForm/genericSchema/GenericSchema.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var import_react22 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_react23 = require("react");
 var GenericSchemaForm = (props) => {
   const { schema, model = null, errors = null, hideTitle = false, disabled = false } = props;
   const schemaProps = __spreadProps(__spreadValues({}, props), { model, errors, hideTitle, disabled });
   const type = getSchemaType(schema);
   const log = useLogger();
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!isValidGenericSchema(schema, model, errors)) {
       log.error(
         "Invalid schema or model",
@@ -4896,27 +4908,27 @@ var GenericSchemaForm = (props) => {
   }, [JSON.stringify(schema), JSON.stringify(model), JSON.stringify(errors), type, log]);
   switch (type) {
     case "readOnly":
-      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ReadOnlySchema_default, __spreadValues({}, schemaProps));
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ReadOnlySchema_default, __spreadValues({}, schemaProps));
     case "persistAsync":
-      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PersistAsyncSchema_default, __spreadValues({}, schemaProps));
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PersistAsyncSchema_default, __spreadValues({}, schemaProps));
     case "validationAsync":
-      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ValidationAsyncSchema_default, __spreadValues({}, schemaProps));
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ValidationAsyncSchema_default, __spreadValues({}, schemaProps));
     case "basic": {
       const basicTypeProps = __spreadValues({ infoMessage: null }, schemaProps);
-      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(BasicTypeSchema_default, __spreadValues({}, basicTypeProps));
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(BasicTypeSchema_default, __spreadValues({}, basicTypeProps));
     }
     case "object":
-      return /* @__PURE__ */ (0, import_react22.createElement)(ObjectSchema_default, __spreadProps(__spreadValues({}, schemaProps), { key: JSON.stringify(schema) }));
+      return /* @__PURE__ */ (0, import_react23.createElement)(ObjectSchema_default, __spreadProps(__spreadValues({}, schemaProps), { key: JSON.stringify(schema) }));
     case "array":
-      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ArraySchema_default, __spreadValues({}, schemaProps));
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ArraySchema_default, __spreadValues({}, schemaProps));
     case "promotedOneOf":
-      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PromotedOneOfSchema_default, __spreadValues({}, schemaProps));
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PromotedOneOfSchema_default, __spreadValues({}, schemaProps));
     case "oneOf":
-      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(OneOfSchema_default, __spreadValues({}, schemaProps));
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(OneOfSchema_default, __spreadValues({}, schemaProps));
     case "allOf":
-      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AllOfSchema_default, __spreadValues({}, schemaProps));
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(AllOfSchema_default, __spreadValues({}, schemaProps));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, {});
 };
 var GenericSchema_default = GenericSchemaForm;
 var isValidGenericSchema = (schema, model, errors) => {
@@ -4943,7 +4955,7 @@ var isValidGenericSchema = (schema, model, errors) => {
 };
 // src/layout/form/DynamicForm.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var DynamicForm = ({
   component,
   model = null,
@@ -4953,7 +4965,7 @@ var DynamicForm = ({
   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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: getMargin(component.margin || "md"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     GenericSchema_default,
     {
       schema: formSchema,
@@ -4970,46 +4982,46 @@ var DynamicForm = ({
 var DynamicForm_default = DynamicForm;
 // src/layout/heading/DynamicHeading.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = 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_runtime41.jsx)("h5", { className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h5", { className: classes, children: text });
     case "sm":
-      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h4", { className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h4", { className: classes, children: text });
     case "lg":
-      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h2", { className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h2", { className: classes, children: text });
     case "xl":
-      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h1", { className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h1", { className: classes, children: text });
     case "md":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h3", { className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h3", { className: classes, children: text });
   }
 };
 var DynamicHeading_default = DynamicHeading;
 // src/layout/markdown/DynamicMarkdown.tsx
 var import_components17 = require("@transferwise/components");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var DynamicMarkdown = ({ component }) => {
   const { content, align, margin } = component;
-  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 }) });
+  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 }) });
 };
 var DynamicInfo = ({ component }) => {
-  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 }) });
+  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 }) });
 };
 // src/layout/image/DynamicImage.tsx
 var import_components18 = require("@transferwise/components");
-var import_react23 = require("react");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_react24 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var DynamicImage = ({ component: image }) => {
   const { url, size, text, margin, accessibilityDescription } = image;
   const httpClient = useHttpClient();
-  const [imageSource, setImageSource] = (0, import_react23.useState)("");
-  (0, import_react23.useEffect)(() => {
+  const [imageSource, setImageSource] = (0, import_react24.useState)("");
+  (0, import_react24.useEffect)(() => {
     void getImageSource(httpClient, url).then(setImageSource);
   }, [url, httpClient]);
   const imageProps = {
@@ -5021,7 +5033,7 @@ var DynamicImage = ({ component: image }) => {
   if (!imageSource) {
     return null;
   }
-  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)) });
+  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)) });
 };
 var readImageBlobAsDataURL = (imageBlob) => {
   return new Promise((resolve, reject) => {
@@ -5055,47 +5067,47 @@ var DynamicImage_default = DynamicImage;
 // src/layout/instructions/DynamicInstructions.tsx
 var import_components19 = require("@transferwise/components");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = 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_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 })
+  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 })
   ] });
 };
 var DynamicInstructions_default = DynamicInstructions;
 // src/layout/DynamicLayout.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = 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_runtime45.jsx)(DynamicHeading_default, { component }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicHeading_default, { component }, getKey(component));
       case "paragraph":
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicParagraph_default, { component }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicParagraph_default, { component }, getKey(component));
       case "image":
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicImage_default, { component }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicImage_default, { component }, getKey(component));
       case "alert":
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicAlert_default, { component }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicAlert_default, { component }, getKey(component));
       case "review":
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicReview_default, { component, onAction }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicReview_default, { component, onAction }, getKey(component));
       case "divider":
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicDivider_default, { component }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicDivider_default, { component }, getKey(component));
       case "info":
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicInfo, { component }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicInfo, { component }, getKey(component));
       case "instructions":
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicInstructions_default, { component }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicInstructions_default, { component }, getKey(component));
       case "markdown":
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicMarkdown, { component }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicMarkdown, { component }, getKey(component));
       case "columns":
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           DynamicColumns_default,
           {
             component,
@@ -5109,7 +5121,7 @@ var DynamicLayout = (props) => {
           getKey(component)
         );
       case "form":
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           DynamicForm_default,
           {
             component,
@@ -5122,9 +5134,9 @@ var DynamicLayout = (props) => {
           getKey(__spreadProps(__spreadValues({}, component), { errors: errors != null ? errors : null }))
         );
       case "button":
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicButton_default, { component, onAction }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicButton_default, { component, onAction }, getKey(component));
       case "box":
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           DynamicBox_default,
           {
             component,
@@ -5138,34 +5150,34 @@ var DynamicLayout = (props) => {
           getKey(component)
         );
       case "decision":
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicDecision_default, { component, onAction }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicDecision_default, { component, onAction }, getKey(component));
       case "external":
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicExternal_default, { component, onAction }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicExternal_default, { component, onAction }, getKey(component));
       case "list":
       case "status-list":
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicStatusList_default, { component, onAction }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicStatusList_default, { component, onAction }, getKey(component));
       case "loading-indicator":
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicLoadingIndicator_default, { component }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicLoadingIndicator_default, { component }, getKey(component));
       case "search":
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicSearch_default, { component, onAction }, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicSearch_default, { component, onAction }, getKey(component));
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", {}, getKey(component));
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", {}, getKey(component));
     }
   };
   if (useHasHttpClientProvider() || baseUrl == null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: components.map(renderComponent) });
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, { children: components.map(renderComponent) });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(HttpClientProviderFromBaseUrl, { baseUrl, children: components.map(renderComponent) });
+    return /* @__PURE__ */ (0, import_jsx_runtime46.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_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var DynamicStatusList = ({ component }) => {
-  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: [
+  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,
       " "
@@ -5178,8 +5190,8 @@ var mapListItemToSummary = ({ title, description, icon, status }) => {
     key: `${title}/${description || ""}`,
     title,
     description
-  }, (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));
+  }, (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));
 };
 var statusListMap = {
   done: "done",
@@ -5196,10 +5208,10 @@ var DynamicStatusList_default = DynamicStatusList;
 // src/layout/loadingIndicator/DynamicLoadingIndicator.tsx
 var import_components21 = require("@transferwise/components");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var DynamicLoadingIndicator = ({ component }) => {
   const { margin, size = "md" } = component;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     import_components21.Loader,
     {
       size,
@@ -5233,18 +5245,18 @@ var DynamicParagraph_messages_default = (0, import_react_intl16.defineMessages)(
 // src/layout/paragraph/useSnackBarIfAvailable.ts
 var import_components22 = require("@transferwise/components");
-var import_react24 = require("react");
+var import_react25 = require("react");
 function useSnackBarIfAvailable() {
-  const context = (0, import_react24.useContext)(import_components22.SnackbarContext);
+  const context = (0, import_react25.useContext)(import_components22.SnackbarContext);
   return context ? context.createSnackbar : noop2;
 }
 function noop2() {
 }
 // src/layout/paragraph/DynamicParagraph.tsx
-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: [
+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: [
   " ",
   component.text,
   " "
@@ -5258,8 +5270,8 @@ var CopyableDynamicParagraph = ({ component }) => {
     (_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_runtime48.jsxs)("div", { className: getTextAlignmentAndMargin(component), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: getTextAlignmentAndMargin(component), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "input",
       {
         type: "text",
@@ -5269,7 +5281,7 @@ var CopyableDynamicParagraph = ({ component }) => {
         style: { textOverflow: "ellipsis" }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_components23.Button, { block: true, onClick: copy, className: getMargin("sm"), children: formatMessage(DynamicParagraph_messages_default.copy) })
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_components23.Button, { block: true, onClick: copy, className: getMargin("sm"), children: formatMessage(DynamicParagraph_messages_default.copy) })
   ] });
 };
 function noop3() {
@@ -5278,7 +5290,7 @@ var DynamicParagraph_default = DynamicParagraph;
 // src/layout/review/DynamicReview.tsx
 var import_components24 = require("@transferwise/components");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var getDefinitions = (orientation, review) => {
   return review.fields.map(
     ({ label, value, help }, index) => {
@@ -5292,14 +5304,14 @@ var getDefinitions = (orientation, review) => {
 };
 var getFieldValue = (value, help, orientation) => {
   if (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 }),
+    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 }),
       " ",
       value
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
       value,
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Help_default, { help })
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Help_default, { help })
     ] });
   }
   return value;
@@ -5312,7 +5324,7 @@ var DynamicReview = (props) => {
   const review = props.component;
   const margin = getMargin(review.margin || "xs");
   const getReviewAction = (action) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       "a",
       {
         href: action.url,
@@ -5327,26 +5339,26 @@ var DynamicReview = (props) => {
     );
   };
   const orientation = getReviewLayout(review);
-  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: [
+  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_runtime49.jsx)("div", { className: review.title ? "" : margin, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_components24.DefinitionList, { layout: orientation, definitions: getDefinitions(orientation, review) }) })
+    /* @__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) }) })
   ] });
 };
 var DynamicReview_default = DynamicReview;
 // src/layout/search/DynamicSearch.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 // src/layout/search/SearchInput.tsx
 var import_components25 = require("@transferwise/components");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var SearchInput = ({ title, value, onFocus, onChange }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("label", { className: "control-label d-inline", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("label", { className: "control-label d-inline", children: [
     title,
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       import_components25.Input,
       {
         type: "text",
@@ -5378,13 +5390,13 @@ var ErrorBoundary_messages_default = (0, import_react_intl18.defineMessages)({
 });
 // src/layout/search/SearchResults.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var SearchResults = ({ results, emptyMessage, onSelect }) => {
   if (results.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "m-t-2", children: emptyMessage });
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "m-t-2", children: emptyMessage });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_components26.NavigationOptionsList, { children: results.map((result) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_components26.NavigationOptionsList, { children: results.map((result) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       import_components26.NavigationOption,
       {
         title: result.title,
@@ -5400,10 +5412,10 @@ var SearchResults = ({ results, emptyMessage, onSelect }) => {
 };
 var ErrorResult = ({ onRetrySearch }) => {
   const intl = (0, import_react_intl19.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("p", { className: "m-t-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("p", { className: "m-t-2", children: [
     intl.formatMessage(ErrorBoundary_messages_default.errorAlert),
     "\xA0",
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       "a",
       {
         href: "/",
@@ -5418,15 +5430,15 @@ var ErrorResult = ({ onRetrySearch }) => {
 };
 // src/layout/search/useSearch.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var headers = { "Content-Type": "application/json" };
 var useSearch = (defaultSearchConfig) => {
-  const [state, setState] = (0, import_react25.useState)({
+  const [state, setState] = (0, import_react26.useState)({
     status: "idle"
   });
-  const abortControllerRef = (0, import_react25.useRef)(null);
+  const abortControllerRef = (0, import_react26.useRef)(null);
   const httpClient = useHttpClient();
-  const search = (0, import_react25.useCallback)(
+  const search = (0, import_react26.useCallback)(
     async (query, { url, method, param } = defaultSearchConfig) => {
       var _a;
       (_a = abortControllerRef.current) == null ? void 0 : _a.abort();
@@ -5489,14 +5501,14 @@ var addQueryParameter = (url, key, value) => {
 };
 // src/layout/search/DynamicSearch.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var DEBOUNCE_TIME = 400;
 var DynamicSearch = ({ component, onAction }) => {
-  const [query, setQuery] = (0, import_react26.useState)("");
+  const [query, setQuery] = (0, import_react27.useState)("");
   const { title, margin, url, method, param, emptyMessage } = component;
   const { status, results, search } = useSearch({ url, method, param });
   const onEvent = useEventDispatcher();
-  const debouncedSearch = (0, import_react26.useMemo)(() => debounce(search, DEBOUNCE_TIME), [search]);
+  const debouncedSearch = (0, import_react27.useMemo)(() => debounce(search, DEBOUNCE_TIME), [search]);
   const onSearchStart = () => {
     onEvent("Dynamic Flow - Search Started", {});
   };
@@ -5523,17 +5535,17 @@ var DynamicSearch = ({ component, onAction }) => {
     setQuery(query);
     void search(query);
   };
-  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 })
+  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 })
   ] });
 };
 var DynamicSearch_default = DynamicSearch;
 // src/jsonSchemaForm/basicTypeSchema/BasicTypeSchema.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var isNullish = (value) => isNull(value) || isUndefined(value);
 var getDefaultValue = (schema) => {
   return schema.type === "boolean" && isNullish(schema.default) ? false : schema.default;
@@ -5570,13 +5582,13 @@ var BasicTypeSchema = (props) => {
       props.onBlur();
     }
   };
-  const [model, setModel] = (0, import_react27.useState)((_a = props.model) != null ? _a : null);
-  const [lastModel, setLastModel] = (0, import_react27.useState)((_b = props.model) != null ? _b : null);
-  const [changed, setChanged] = (0, import_react27.useState)(false);
-  const [focused, setFocused] = (0, import_react27.useState)(false);
-  const [blurred, setBlurred] = (0, import_react27.useState)(false);
-  const [validations, setValidations] = (0, import_react27.useState)([]);
-  const id = (0, import_react27.useMemo)(() => props.schema.$id || generateRandomId(), [props.schema.$id]);
+  const [model, setModel] = (0, import_react28.useState)((_a = props.model) != null ? _a : null);
+  const [lastModel, setLastModel] = (0, import_react28.useState)((_b = props.model) != null ? _b : null);
+  const [changed, setChanged] = (0, import_react28.useState)(false);
+  const [focused, setFocused] = (0, import_react28.useState)(false);
+  const [blurred, setBlurred] = (0, import_react28.useState)(false);
+  const [validations, setValidations] = (0, import_react28.useState)([]);
+  const id = (0, import_react28.useMemo)(() => props.schema.$id || generateRandomId(), [props.schema.$id]);
   const onSchemaChange = () => {
     const defaultValue = getDefaultValue(props.schema);
     if (isNullish(model) && !isNullish(defaultValue)) {
@@ -5591,9 +5603,9 @@ var BasicTypeSchema = (props) => {
   };
   const isConst = props.schema.const;
   const isHidden = props.schema.hidden || isConst;
-  (0, import_react27.useEffect)(refreshValidations, [props.model, props.submitted]);
-  (0, import_react27.useEffect)(onSchemaChange, [props.schema]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(refreshValidations, [props.model, props.submitted]);
+  (0, import_react28.useEffect)(onSchemaChange, [props.schema]);
+  (0, import_react28.useEffect)(() => {
     var _a2;
     const newModel = (_a2 = props.model) != null ? _a2 : null;
     if (newModel !== model) {
@@ -5608,15 +5620,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_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 })
+  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 })
       ] }),
-      !showLabel && !!schemaHelp && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Help_default, { help: schemaHelp }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      !showLabel && !!schemaHelp && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Help_default, { help: schemaHelp }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         SchemaFormControl_default,
         {
           id,
@@ -5629,7 +5641,7 @@ var BasicTypeSchema = (props) => {
           describedBy: feedbackId
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         ControlFeedback_default,
         {
           id: feedbackId,
@@ -5654,7 +5666,7 @@ BasicTypeSchema.defaultProps = {
 var BasicTypeSchema_default = BasicTypeSchema;
 // src/jsonSchemaForm/persistAsyncSchema/persistAsyncBasicSchema/PersistAsyncBasicSchema.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var getIdFromResponse = (idProperty, response) => {
   return response[idProperty];
 };
@@ -5674,12 +5686,12 @@ var PersistAsyncBasicSchema = (props) => {
   const intl = (0, import_react_intl20.useIntl)();
   const httpClient = useHttpClient();
   const onEvent = useEventDispatcher();
-  const [persistAsyncModel, setPersistAsyncModel] = (0, import_react28.useState)(null);
+  const [persistAsyncModel, setPersistAsyncModel] = (0, import_react29.useState)(null);
   const previousPersistAsyncModel = usePrevious(persistAsyncModel);
-  const [persistAsyncError, setPersistAsyncError] = (0, import_react28.useState)(null);
-  const [fieldSubmitted, setFieldSubmitted] = (0, import_react28.useState)(false);
-  const [abortController, setAbortController] = (0, import_react28.useState)(null);
-  (0, import_react28.useEffect)(() => {
+  const [persistAsyncError, setPersistAsyncError] = (0, import_react29.useState)(null);
+  const [fieldSubmitted, setFieldSubmitted] = (0, import_react29.useState)(false);
+  const [abortController, setAbortController] = (0, import_react29.useState)(null);
+  (0, import_react29.useEffect)(() => {
     if (controlTypesWithPersistOnChange.has(
       // TODO: LOW avoid type assertion below -- control type may be nullish. consider ?? ''
       getControlType(schema.persistAsync.schema)
@@ -5746,7 +5758,7 @@ var PersistAsyncBasicSchema = (props) => {
       setPersistAsyncModel(newPersistAsyncModel);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     BasicTypeSchema_default,
     {
       required,
@@ -5767,7 +5779,7 @@ var PersistAsyncBasicSchema_default = PersistAsyncBasicSchema;
 // src/common/hooks/usePersistAsync/usePersistAsync.ts
 var usePersistAsync = (persistAsync) => {
-  const [abortController, setAbortController] = (0, import_react29.useState)(null);
+  const [abortController, setAbortController] = (0, import_react30.useState)(null);
   const httpClient = useHttpClient();
   const intl = (0, import_react_intl21.useIntl)();
   const { schema } = persistAsync;
@@ -5846,7 +5858,7 @@ function hasStringMessage(value) {
 }
 // src/common/hooks/usePolling/usePolling.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 function usePolling({
   asyncFn,
   interval,
@@ -5855,9 +5867,9 @@ function usePolling({
   onPollingResponse,
   onFailure
 }) {
-  const onPollingResponseReference = (0, import_react30.useRef)(onPollingResponse);
-  const onFailureReference = (0, import_react30.useRef)(onFailure);
-  const poll = (0, import_react30.useMemo)(
+  const onPollingResponseReference = (0, import_react31.useRef)(onPollingResponse);
+  const onFailureReference = (0, import_react31.useRef)(onFailure);
+  const poll = (0, import_react31.useMemo)(
     () => createPollingClosure(
       asyncFn,
       maxAttempts,
@@ -5867,7 +5879,7 @@ function usePolling({
     ),
     [asyncFn, maxAttempts, maxConsecutiveFails]
   );
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (interval > 0) {
       const intervalReference = setInterval(() => {
         poll();
@@ -5875,7 +5887,7 @@ function usePolling({
       return () => clearInterval(intervalReference);
     }
   }, [poll, interval]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     onPollingResponseReference.current = onPollingResponse;
     onFailureReference.current = onFailure;
   }, [onPollingResponse, onFailure]);
@@ -5904,20 +5916,20 @@ function createPollingClosure(asyncFn, maxAttempts, maxConsecutiveFails, onPolli
 }
 // src/common/hooks/usePrevious/usePrevious.js
-var import_react31 = require("react");
+var import_react32 = require("react");
 var usePrevious = (value) => {
-  const reference = (0, import_react31.useRef)();
-  (0, import_react31.useEffect)(() => {
+  const reference = (0, import_react32.useRef)();
+  (0, import_react32.useEffect)(() => {
     reference.current = value;
   }, [value]);
   return reference.current;
 };
 // src/common/hooks/useStepPolling/useStepPolling.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 function useStepPolling(polling, onAction) {
   const httpClient = useHttpClient();
-  const asyncFn = (0, import_react32.useMemo)(() => {
+  const asyncFn = (0, import_react33.useMemo)(() => {
     if (polling) {
       return () => {
         return httpClient(polling.url).then((response) => {
@@ -5932,7 +5944,7 @@ function useStepPolling(polling, onAction) {
       return void 0;
     }
   }, [polling, httpClient]);
-  const onPollingResponse = (0, import_react32.useCallback)(
+  const onPollingResponse = (0, import_react33.useCallback)(
     (pollingResponse) => {
       if (pollingResponse == null ? void 0 : pollingResponse.action) {
         onAction(pollingResponse.action);
@@ -5948,7 +5960,7 @@ function useStepPolling(polling, onAction) {
     maxAttempts: (polling == null ? void 0 : polling.maxAttempts) || 0,
     maxConsecutiveFails: 1,
     onPollingResponse,
-    onFailure: (0, import_react32.useCallback)(() => {
+    onFailure: (0, import_react33.useCallback)(() => {
       if (polling) {
         onAction(polling.onError.action);
       }
@@ -5957,7 +5969,7 @@ function useStepPolling(polling, onAction) {
 }
 // src/step/layoutStep/LayoutStep.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var getComponents = (step, options) => {
   var _a;
   if (isEmpty(step)) {
@@ -5980,7 +5992,7 @@ var LayoutStep = (props) => {
     onEvent("Dynamic Flow - onAction supressed", { reason: "LayoutStep - loading state" });
   };
   useStepPolling(stepSpecification.polling, onAction);
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     DynamicLayout_default,
     {
       components,
@@ -5996,10 +6008,10 @@ var LayoutStep = (props) => {
 var LayoutStep_default = LayoutStep;
 // src/step/cameraStep/CameraStep.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 // src/step/cameraStep/cameraCapture/CameraCapture.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_react_intl30 = require("react-intl");
 var import_react_webcam = __toESM(require_react_webcam());
@@ -6026,15 +6038,15 @@ 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_react_intl23 = require("react-intl");
-var import_jsx_runtime56 = require("react/jsx-runtime");
-var CaptureBottomBar = ({ onCapture }) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "bottom-bar", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(CaptureButton, { onClick: onCapture }) });
+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)();
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "bottom-bar p-x-2", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "col-xs-12 col-md-6 col-md-offset-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  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,
       {
         className: "m-b-1",
@@ -6045,7 +6057,7 @@ var ReviewBottomBar = ({
         children: intl.formatMessage(CameraCapture_messages_default.reviewSubmit)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       import_components27.Button,
       {
         className: "m-b-2",
@@ -6059,14 +6071,14 @@ var ReviewBottomBar = ({
     )
   ] }) }) });
 };
-var CaptureButton = ({ onClick }) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+var CaptureButton = ({ onClick }) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
   "button",
   {
     type: "button",
     className: "camera-capture-btn m-b-2",
     "data-testid": "camera-capture-button",
     onClick,
-    children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "camera-capture-btn-inner" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "camera-capture-btn-inner" })
   }
 );
@@ -6084,11 +6096,11 @@ var OrientationLockOverlay_messages_default = (0, import_react_intl24.defineMess
 });
 // src/step/cameraStep/cameraCapture/components/orientationLockOverlay/OrientationLockOverlay.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var OrientationLockOverlay = () => {
   const intl = (0, import_react_intl25.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "orientation-lock-overlay", "data-testid": "orientation-lock", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "orientation-lock-overlay", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       "img",
       {
         className: "m-b-3",
@@ -6098,40 +6110,40 @@ var OrientationLockOverlay = () => {
         alt: ""
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "text-center m-b-0", children: intl.formatMessage(OrientationLockOverlay_messages_default.text) })
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "text-center m-b-0", children: intl.formatMessage(OrientationLockOverlay_messages_default.text) })
   ] });
 };
 var OrientationLockOverlay_default = OrientationLockOverlay;
 // src/step/cameraStep/cameraCapture/hooks/useFullScreenOrientationLock.ts
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_screenfull = __toESM(require_screenfull());
-var useFullScreenOrientationLock = (isMobile2) => {
-  const lockOrientation = (0, import_react33.useCallback)(() => {
+var useFullScreenOrientationLock = (shouldLockOrientation) => {
+  const lockOrientation = (0, import_react34.useCallback)(() => {
     if (window.screen.orientation && "lock" in window.screen.orientation && typeof window.screen.orientation.lock === "function") {
       window.screen.orientation.lock("portrait").catch(noop4);
     }
   }, []);
-  const unlockOrientation = (0, import_react33.useCallback)(() => {
+  const unlockOrientation = (0, import_react34.useCallback)(() => {
     var _a, _b, _c;
     return (_c = (_b = (_a = window == null ? void 0 : window.screen) == null ? void 0 : _a.orientation) == null ? void 0 : _b.unlock) == null ? void 0 : _c.call(_b);
   }, []);
-  const enterFullScreen = (0, import_react33.useCallback)(() => {
+  const enterFullScreen = (0, import_react34.useCallback)(() => {
     setTimeout(() => {
-      if (isMobile2 && !import_screenfull.default.isFullscreen && import_screenfull.default.isEnabled) {
+      if (shouldLockOrientation && !import_screenfull.default.isFullscreen && import_screenfull.default.isEnabled) {
         import_screenfull.default.request(document.documentElement, { navigationUI: "show" }).then(() => {
           lockOrientation();
         }).catch(noop4);
       }
     }, 100);
-  }, [isMobile2, lockOrientation]);
-  const exitFullScreen = (0, import_react33.useCallback)(() => {
+  }, [shouldLockOrientation, lockOrientation]);
+  const exitFullScreen = (0, import_react34.useCallback)(() => {
     if (import_screenfull.default.isFullscreen) {
       import_screenfull.default.exit().catch(noop4);
     }
     unlockOrientation();
   }, [unlockOrientation]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     return () => {
       exitFullScreen();
     };
@@ -6145,7 +6157,7 @@ var noop4 = () => {
 };
 // src/step/cameraStep/cameraCapture/hooks/useVideoConstraints.ts
-var import_react34 = require("react");
+var import_react35 = require("react");
 // src/step/cameraStep/cameraCapture/utils/index.ts
 var isSelfieCamera = (stream) => {
@@ -6193,7 +6205,7 @@ var getVideoCapabilities = (videoStream) => {
 // src/step/cameraStep/cameraCapture/hooks/useVideoConstraints.ts
 var useVideoConstraints = (direction) => {
-  const [videoConstraints, setVideoConstraints] = (0, import_react34.useState)();
+  const [videoConstraints, setVideoConstraints] = (0, import_react35.useState)();
   const defaultVideoConstraints = {
     facingMode: direction === "front" ? "user" : "environment",
     height: { min: 480, max: 1080, ideal: 720 },
@@ -6201,7 +6213,7 @@ var useVideoConstraints = (direction) => {
     frameRate: 30,
     aspectRatio: 16 / 9
   };
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     void getVideoConstraints(direction).then(setVideoConstraints);
   }, [direction]);
   const getVideoConstraints = async (direction2) => {
@@ -6219,8 +6231,8 @@ var useVideoConstraints = (direction) => {
 };
 // src/step/cameraStep/cameraCapture/overlay/Overlay.tsx
-var import_react35 = require("react");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_react36 = require("react");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var captureButtonHeight = 92;
 var reviewButtonsHeight = 120;
 var imageHeight = 40;
@@ -6236,8 +6248,8 @@ var Overlay = ({
   instructions,
   reviewInstructions
 }) => {
-  const svgReference = (0, import_react35.useRef)(null);
-  (0, import_react35.useEffect)(() => {
+  const svgReference = (0, import_react36.useRef)(null);
+  (0, import_react36.useEffect)(() => {
     const listener = debounce(() => {
       var _a;
       if ((_a = svgReference.current) == null ? void 0 : _a.innerHTML) {
@@ -6249,18 +6261,18 @@ var Overlay = ({
     return () => window.removeEventListener("resize", listener);
   });
   let helperBoxHeight = (imageUrl ? imageHeight : 0) + (title ? titleHeight : 0) + (instructions ? instructionsHeight : 0);
-  let helperBox = /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
-    imageUrl && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("img", { className: "camera-capture-img", src: imageUrl, alt: "" }),
-    title && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h4", { className: "camera-capture-title", children: title }),
-    instructions && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("small", { className: "camera-capture-instructions", children: instructions })
+  let helperBox = /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+    imageUrl && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("img", { className: "camera-capture-img", src: imageUrl, alt: "" }),
+    title && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("h4", { className: "camera-capture-title", children: title }),
+    instructions && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("small", { className: "camera-capture-instructions", children: instructions })
   ] });
   const frameBottomMargin = captureButtonHeight + helperBoxHeight;
   if (reviewInstructions) {
     helperBoxHeight = frameBottomMargin - reviewButtonsHeight;
-    helperBox = /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("small", { className: "camera-capture-instructions", children: reviewInstructions });
+    helperBox = /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("small", { className: "camera-capture-instructions", children: reviewInstructions });
     const frameWithReviewInstructionsMinBottomMargin = reviewButtonsHeight + reviewInstructionsHeight;
     if (frameBottomMargin < frameWithReviewInstructionsMinBottomMargin) {
-      helperBox = /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx_runtime58.Fragment, {});
+      helperBox = /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_jsx_runtime59.Fragment, {});
     }
   }
   const framePosition = {
@@ -6278,14 +6290,14 @@ var Overlay = ({
       width: "90%"
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("svg", { ref: svgReference, xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("mask", { id: "mask", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("rect", { width: "100%", height: "100%", fill: "#fff" }),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("image", __spreadValues({ href: overlay }, framePosition))
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("svg", { ref: svgReference, xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("mask", { id: "mask", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("rect", { width: "100%", height: "100%", fill: "#fff" }),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("image", __spreadValues({ href: overlay }, framePosition))
     ] }) }),
-    overlay && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("rect", { width: "100%", height: "100%", mask: "url(#mask)", fillOpacity: "0.72" }),
-    outline && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("image", __spreadValues({ href: outline }, framePosition)),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("foreignObject", { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", __spreadProps(__spreadValues({ className: "camera-capture-text-and-image-container" }, helperBoxPosition), { children: helperBox })) })
+    overlay && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("rect", { width: "100%", height: "100%", mask: "url(#mask)", fillOpacity: "0.72" }),
+    outline && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("image", __spreadValues({ href: outline }, framePosition)),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("foreignObject", { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", __spreadProps(__spreadValues({ className: "camera-capture-text-and-image-container" }, helperBoxPosition), { children: helperBox })) })
   ] });
 };
 var Overlay_default = Overlay;
@@ -6315,13 +6327,13 @@ var NoCameraAccess_messages_default = (0, import_react_intl26.defineMessages)({
 });
 // src/step/cameraStep/cameraCapture/screens/NoCameraAccess/NoCameraAccess.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var NoCameraAccess = ({ onAction }) => {
   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) }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_components28.Button, { block: true, onClick: onAction, children: intl.formatMessage(NoCameraAccess_messages_default.action) })
+  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) })
   ] }) }) }) });
 };
 var NoCameraAccess_default = NoCameraAccess;
@@ -6345,12 +6357,12 @@ var CameraNotSupported_messages_default = (0, import_react_intl28.defineMessages
 });
 // src/step/cameraStep/cameraCapture/screens/CameraNotSupported/CameraNotSupported.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var CameraNotSupported = () => {
   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) })
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { id: "camera-not-supported", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "container p-t-5", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "col-md-6 col-md-offset-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("h2", { className: "text-xs-center m-b-3", children: intl.formatMessage(CameraNotSupported_messages_default.title) }),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "text-xs-center m-b-5", children: intl.formatMessage(CameraNotSupported_messages_default.paragraph) })
   ] }) }) }) });
 };
 var CameraNotSupported_default = CameraNotSupported;
@@ -6375,7 +6387,7 @@ var getCameraStartedProperties = async (props, videoStream) => {
 };
 // src/step/cameraStep/cameraCapture/CameraCapture.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var CameraCapture = ({
   direction = "back",
   overlay = "",
@@ -6387,16 +6399,20 @@ var CameraCapture = ({
   onCapture,
   onEvent
 }) => {
-  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 [mode, setMode] = (0, import_react37.useState)("CAPTURE");
+  const [isVideoMirrored, setIsVideoMirrored] = (0, import_react37.useState)(false);
+  const [ready, setReady] = (0, import_react37.useState)(false);
+  const [reviewImage, setReviewImage] = (0, import_react37.useState)();
+  const webcamReference = (0, import_react37.useRef)(null);
   const { videoConstraints } = useVideoConstraints(direction);
-  const isMobileDevice = (0, import_react36.useMemo)(() => isMobile(), []);
-  const { enterFullScreen, exitFullScreen } = useFullScreenOrientationLock(isMobileDevice);
+  const orientationLockFeature = useFeatureFlag("camera-orientation-lock" /* CAMERA_ORIENTATION_LOCK */);
+  const shouldLockOrientation = (0, import_react37.useMemo)(
+    () => !!((orientationLockFeature == null ? void 0 : orientationLockFeature.enabled) && isMobile()),
+    [orientationLockFeature]
+  );
+  const { enterFullScreen, exitFullScreen } = useFullScreenOrientationLock(shouldLockOrientation);
   const intl = (0, import_react_intl30.useIntl)();
-  const handleCapture = (0, import_react36.useCallback)(async () => {
+  const handleCapture = (0, import_react37.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();
@@ -6418,7 +6434,7 @@ var CameraCapture = ({
       );
     }
   }, [webcamReference, showReview, setReviewImage, setMode, onCapture, isVideoMirrored]);
-  const handleUserMediaError = (0, import_react36.useCallback)(
+  const handleUserMediaError = (0, import_react37.useCallback)(
     (error) => {
       if (error instanceof DOMException && (error == null ? void 0 : error.name) === "NotAllowedError") {
         setMode("NO_CAMERA_ACCESS");
@@ -6430,7 +6446,7 @@ var CameraCapture = ({
     },
     [setMode, onEvent]
   );
-  const handleUserMedia = (0, import_react36.useCallback)(
+  const handleUserMedia = (0, import_react37.useCallback)(
     (stream) => {
       enterFullScreen();
       setReady(true);
@@ -6447,13 +6463,13 @@ var CameraCapture = ({
     setReviewImage(void 0);
   };
   const handleRetryCameraAccess = () => setMode("CAPTURE");
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.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)(
+  const captureScreen = /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
+    videoConstraints && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       import_react_webcam.default,
       {
         ref: webcamReference,
@@ -6464,7 +6480,7 @@ var CameraCapture = ({
         onUserMedia: handleUserMedia
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       Overlay_default,
       {
         overlay,
@@ -6474,12 +6490,12 @@ var CameraCapture = ({
         instructions
       }
     ),
-    isMobileDevice && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(OrientationLockOverlay_default, {}),
-    ready && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(CaptureBottomBar, { onCapture: () => void handleCapture() })
+    shouldLockOrientation && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(OrientationLockOverlay_default, {}),
+    ready && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(CaptureBottomBar, { onCapture: () => void handleCapture() })
   ] });
-  const reviewScreen = /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("img", { className: "review-image", src: reviewImage == null ? void 0 : reviewImage.source, alt: "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  const reviewScreen = /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("img", { className: "review-image", src: reviewImage == null ? void 0 : reviewImage.source, alt: "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       Overlay_default,
       {
         overlay,
@@ -6489,19 +6505,19 @@ var CameraCapture = ({
         reviewInstructions: intl.formatMessage(CameraCapture_messages_default.reviewInstructions)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ReviewBottomBar, { onSubmit: handleReviewSubmit, onRetry: handleReviewRetry })
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ReviewBottomBar, { onSubmit: handleReviewSubmit, onRetry: handleReviewRetry })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("section", { className: "camera-capture", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("section", { className: "camera-capture", children: [
     mode === "CAPTURE" && captureScreen,
     mode === "REVIEW" && reviewScreen,
-    mode === "NO_CAMERA_ACCESS" && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(NoCameraAccess_default, { onAction: handleRetryCameraAccess }),
-    mode === "CAMERA_NOT_SUPPORTED" && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(CameraNotSupported_default, {})
+    mode === "NO_CAMERA_ACCESS" && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(NoCameraAccess_default, { onAction: handleRetryCameraAccess }),
+    mode === "CAMERA_NOT_SUPPORTED" && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(CameraNotSupported_default, {})
   ] });
 };
 var CameraCapture_default = CameraCapture;
 // src/step/cameraStep/CameraStep.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 function blobToBase64(blob) {
   return new Promise((resolve, _) => {
     const reader = new FileReader();
@@ -6519,8 +6535,8 @@ var CameraStep = (props) => {
   const { assets, direction, instructions } = cameraConfig || {};
   const { overlay, outline } = assets || {};
   const { url: imageUrl } = image || {};
-  const [captureClicked, setCaptureClicked] = (0, import_react37.useState)(false);
-  (0, import_react37.useEffect)(() => {
+  const [captureClicked, setCaptureClicked] = (0, import_react38.useState)(false);
+  (0, import_react38.useEffect)(() => {
     if (captureClicked) {
       onAction(action);
     }
@@ -6539,7 +6555,7 @@ var CameraStep = (props) => {
       });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     CameraCapture_default,
     {
       overlay,
@@ -6616,12 +6632,12 @@ var ExternalConfirmationStep_messages_default = (0, import_react_intl31.defineMe
 });
 // src/step/externalConfirmationStep/ExternalConfirmationStep.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var noop5 = () => {
 };
 var ExternalConfirmationStep = ({ url, onClose }) => {
   const { formatMessage } = (0, import_react_intl32.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     DynamicLayout_default,
     {
       components: [
@@ -6688,9 +6704,9 @@ function getOrigin(url) {
 // src/dynamicFlow/BackButton.tsx
 var import_components30 = require("@transferwise/components");
 var import_icons2 = require("@transferwise/icons");
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var BackButton = ({ title, action, onAction }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
     "a",
     {
       onClick: (event) => {
@@ -6701,8 +6717,8 @@ var BackButton = ({ title, action, onAction }) => {
       className: "df-back-btn",
       "aria-label": title,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "sr-only", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_components30.Avatar, { type: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_icons2.ArrowLeft, { size: "24" }) })
+        /* @__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" }) })
       ]
     }
   );
@@ -6710,7 +6726,7 @@ var BackButton = ({ title, action, onAction }) => {
 var BackButton_default = BackButton;
 // src/dynamicFlow/DynamicFlowStep.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var DynamicFlowStep = (props) => {
   var _a, _b, _c;
   const { step, globalError, onAction } = props;
@@ -6718,26 +6734,29 @@ var DynamicFlowStep = (props) => {
   const backButton = ((_b = step == null ? void 0 : step.navigation) == null ? void 0 : _b.back) || ((_c = step == null ? void 0 : step.navigation) == null ? void 0 : _c.backButton);
   const { requiresManualTrigger, dismissConfirmation } = useExternal(externalUrl);
   if (step === void 0) {
+    if (globalError) {
+      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DynamicAlert_default, { component: { context: "negative", markdown: globalError, margin: "lg" } });
+    }
     return null;
   }
   if (externalUrl && requiresManualTrigger) {
-    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ExternalConfirmationStep_default, { url: externalUrl, onClose: dismissConfirmation });
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ExternalConfirmationStep_default, { url: externalUrl, onClose: dismissConfirmation });
   }
   if (isCameraStep(step)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(CameraStep_default, __spreadProps(__spreadValues({}, props), { step }));
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(CameraStep_default, __spreadProps(__spreadValues({}, props), { step }));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
-    backButton && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(BackButton_default, __spreadProps(__spreadValues({}, backButton), { onAction })),
-    globalError ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DynamicAlert_default, { component: { context: "negative", markdown: globalError, margin: "lg" } }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(LayoutStep_default, __spreadProps(__spreadValues({}, props), { stepSpecification: step }))
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
+    backButton && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(BackButton_default, __spreadProps(__spreadValues({}, backButton), { onAction })),
+    globalError ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DynamicAlert_default, { component: { context: "negative", markdown: globalError, margin: "lg" } }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(LayoutStep_default, __spreadProps(__spreadValues({}, props), { stepSpecification: step }))
   ] });
 };
 // src/dynamicFlow/utils/useDebouncedRefresh/useDebouncedRefresh.ts
-var import_react38 = require("react");
+var import_react39 = require("react");
 var DEBOUNCE_DELAY = 1e3;
 function useDebouncedRefresh(fetchRefresh) {
-  const map = (0, import_react38.useRef)(/* @__PURE__ */ new Map());
+  const map = (0, import_react39.useRef)(/* @__PURE__ */ new Map());
   const retrieveOrCreate = (key) => {
     if (map.current.has(key)) {
       return map.current.get(key);
@@ -6760,12 +6779,12 @@ function useDebouncedRefresh(fetchRefresh) {
 var shouldDebounceSchema = (schema) => getSchemaType(schema) === "basic" && schema.type !== "boolean" && schema.format !== "base64url";
 // src/dynamicFlow/utils/useDynamicFlowState.ts
-var import_react39 = require("react");
+var import_react40 = require("react");
 var useDynamicFlowState = (initialStep) => {
   var _a, _b;
-  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)({
+  const [formErrors, setFormErrors] = (0, import_react40.useState)((_a = initialStep == null ? void 0 : initialStep.errors) == null ? void 0 : _a.validation);
+  const [globalError, setGlobalError] = (0, import_react40.useState)((_b = initialStep == null ? void 0 : initialStep.errors) == null ? void 0 : _b.error);
+  const [stepAndModels, setStepAndModels] = (0, import_react40.useState)({
     step: initialStep || void 0,
     models: (initialStep == null ? void 0 : initialStep.model) ? buildInitialModels(initialStep.model, getAllSchemas(initialStep)) : {},
     etag: void 0
@@ -6795,7 +6814,7 @@ var useDynamicFlowState = (initialStep) => {
       return updatedState;
     });
   };
-  const modelIsValid = (0, import_react39.useMemo)(
+  const modelIsValid = (0, import_react40.useMemo)(
     () => areModelsValid(models, getAllValidatableSchemas(step)),
     [models, step]
   );
@@ -6874,17 +6893,17 @@ var isInlineSchema = (schema) => {
 // src/dynamicFlow/utils/useLoader.tsx
 var import_components31 = require("@transferwise/components");
-var import_react40 = require("react");
-var import_jsx_runtime66 = require("react/jsx-runtime");
+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,
     initial: true,
     submission: false
   }, loaderConfig);
-  const [loadingState, setLoadingState] = (0, import_react40.useState)(initialState);
+  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_runtime66.jsx)(
+  const loader = shouldDisplayLoader ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     import_components31.Loader,
     {
       size: config.size,
@@ -6896,15 +6915,15 @@ function useLoader(loaderConfig, initialState) {
 }
 // src/dynamicFlow/utils/errorBoundary/ErrorBoundary.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 // src/dynamicFlow/utils/errorBoundary/ErrorBoundaryAlert.tsx
 var import_components32 = require("@transferwise/components");
 var import_react_intl33 = require("react-intl");
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var ErrorBoundaryAlert = ({ onDismiss }) => {
   const { formatMessage } = (0, import_react_intl33.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     import_components32.Alert,
     {
       action: {
@@ -6920,10 +6939,10 @@ var ErrorBoundaryAlert = ({ onDismiss }) => {
 };
 // src/dynamicFlow/utils/errorBoundary/ErrorBoundary.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var noop6 = () => {
 };
-var ErrorBoundary = class extends import_react41.Component {
+var ErrorBoundary = class extends import_react42.Component {
   constructor(props) {
     super(props);
     this.handleErrorReset = () => {
@@ -6941,8 +6960,8 @@ var ErrorBoundary = class extends import_react41.Component {
   render() {
     const { children } = this.props;
     const { hasError, isFatalError } = this.state;
-    return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
-      hasError && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ErrorBoundaryAlert, { onDismiss: this.handleErrorReset }),
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
+      hasError && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ErrorBoundaryAlert, { onDismiss: this.handleErrorReset }),
       !isFatalError && children
     ] });
   }
@@ -7047,7 +7066,7 @@ var assertResponseIsValid = (response) => {
 var isResponse = (response) => typeof response === "object" && response !== null && "clone" in response && "bodyUsed" in response;
 // src/dynamicFlow/DynamicFlow.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var noop7 = () => {
 };
 var DynamicFlowComponent = ({
@@ -7057,6 +7076,7 @@ var DynamicFlowComponent = ({
   initialStep,
   loaderConfig,
   displayStepTitle = true,
+  features,
   onCompletion,
   onError,
   onEvent = noop7,
@@ -7075,24 +7095,24 @@ var DynamicFlowComponent = ({
     setStepAndEtag,
     setSchemaModel
   } = useDynamicFlowState(initialStep);
-  const [submitted, setSubmitted] = (0, import_react42.useState)(false);
+  const [submitted, setSubmitted] = (0, import_react43.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_react42.useMemo)(
+  const analyticsMetadata = (0, import_react43.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_react42.useMemo)(
+  const dispatchEvent = (0, import_react43.useMemo)(
     () => getEventDispatcher(onEvent, analyticsMetadata),
     [onEvent, analyticsMetadata]
   );
-  const dfHttpClient = (0, import_react42.useCallback)(
+  const dfHttpClient = (0, import_react43.useCallback)(
     ({ action, data, etag: etag2 }) => {
       const { url, method = "POST" } = action;
       return httpClient(url != null ? url : "", {
@@ -7142,17 +7162,17 @@ var DynamicFlowComponent = ({
     dispatchEventAndComplete(__spreadValues(__spreadValues({}, exitResult), actionResult));
   };
   const debouncedRefresh = useDebouncedRefresh(performRefresh);
-  const dispatchEventAndComplete = (0, import_react42.useCallback)(
+  const dispatchEventAndComplete = (0, import_react43.useCallback)(
     (result) => {
       dispatchEvent("Dynamic Flow - Flow Finished", { result: "success" });
       onCompletion(result);
     },
     [onCompletion, dispatchEvent]
   );
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     dispatchEvent("Dynamic Flow - Flow Started", {});
   }, []);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (!initialStep) {
       const action = __spreadValues({
         id: "#initial-step-request",
@@ -7267,7 +7287,7 @@ var DynamicFlowComponent = ({
       await actionHandler(action);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(LogProvider, { flowId, stepId: (step == null ? void 0 : step.id) || (step == null ? void 0 : step.key), onLog, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(EventsContextProvider, { metadata: analyticsMetadata, onEvent, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(DynamicFlowProvider, { loading: isLoading, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(HttpClientProvider, { httpClient, children: loader !== null ? loader : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(LogProvider, { flowId, stepId: (step == null ? void 0 : step.id) || (step == null ? void 0 : step.key), onLog, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(EventsContextProvider, { metadata: analyticsMetadata, onEvent, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DynamicFlowProvider, { loading: isLoading, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(HttpClientProvider, { httpClient, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(FeatureContextProvider, { features, children: loader !== null ? loader : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
     DynamicFlowStep,
     {
       step,
@@ -7281,9 +7301,9 @@ var DynamicFlowComponent = ({
       },
       onModelChange
     }
-  ) }) }) }) });
+  ) }) }) }) }) });
 };
-var DynamicFlow = (props) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ErrorBoundary_default, { onError: props.onError, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(DynamicFlowComponent, __spreadValues({}, props)) });
+var DynamicFlow = (props) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ErrorBoundary_default, { onError: props.onError, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DynamicFlowComponent, __spreadValues({}, props)) });
 var DynamicFlow_default = DynamicFlow;
 var combineModels2 = (formModels) => {
   return Object.values(formModels).reduce((previous, model) => __spreadValues(__spreadValues({}, previous), model), {});
@@ -7301,19 +7321,19 @@ var shouldTriggerRefresh = (props) => {
 };
 // src/jsonSchemaForm/JsonSchemaForm.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var JsonSchemaForm = (props) => {
   const schemaProps = __spreadValues({
     model: null,
     errors: null
   }, props);
   const { baseUrl = "", onEvent = noop8, onLog = noop8 } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(LogProvider, { flowId: "JsonSchemaForm", stepId: "JsonSchemaForm", onLog, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(LogProvider, { flowId: "JsonSchemaForm", stepId: "JsonSchemaForm", onLog, children: /* @__PURE__ */ (0, import_jsx_runtime71.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)) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(HttpClientProviderFromBaseUrl, { baseUrl, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(GenericSchema_default, __spreadValues({}, schemaProps)) })
     }
   ) });
 };