@wise/dynamic-flow-client 4.0.0-exp-next-min-fb61ff2 → 4.0.0-experimental-8a78888

package/build/main.mjs

@@ -139,7 +139,7 @@ var init_clsx = __esm({
 
 // ../../node_modules/.pnpm/@wise+art@2.19.0_@transferwise+neptune-css@14.20.1_@types+react@18.3.18_react-dom@18.3.1_reac_mzw7cg6j4wc7ddwlhxck7linn4/node_modules/@wise/art/dist/index-8Fxev6OI.esm.js
 import { useState as useState4, useEffect as useEffect3, forwardRef as forwardRef2, Suspense, lazy } from "react";
-import { jsx as jsx11, jsxs as jsxs2, Fragment as Fragment3 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs2, Fragment as Fragment3 } from "react/jsx-runtime";
 var unknownFlagName, Flag, Sizes, ImageSizes, imageSizes, Assets, RenderMode;
 var init_index_8Fxev6OI_esm = __esm({
   "../../node_modules/.pnpm/@wise+art@2.19.0_@transferwise+neptune-css@14.20.1_@types+react@18.3.18_react-dom@18.3.1_reac_mzw7cg6j4wc7ddwlhxck7linn4/node_modules/@wise/art/dist/index-8Fxev6OI.esm.js"() {
@@ -158,7 +158,7 @@ var init_index_8Fxev6OI_esm = __esm({
       }, [code]);
       const detailed = intrinsicSize >= 150;
       const name = fallback !== "unknown" ? `${code.toLowerCase()}${fallback == null && detailed ? "-detailed" : ""}` : unknownFlagName;
-      return /* @__PURE__ */ jsx11("img", {
+      return /* @__PURE__ */ jsx12("img", {
         className: clsx(`wds-flag wds-flag-${name}`, className),
         src: false ? `${name}.svg` : `https://wise.com/web-art/assets/flags/${name}.svg`,
         loading,
@@ -1526,9 +1526,9 @@ var inputComponentToProps = (component, type) => {
       uri: image.uri,
       url: (_d = (_c = image.uri) != null ? _c : image.url) != null ? _d : ""
     } : void 0,
+    title,
     placeholder,
     required,
-    title,
     validationState: getValidationState(errors, validationAsyncState),
     value: component.getLocalValue(),
     onBlur: onBlur.bind(component),
@@ -1849,7 +1849,6 @@ var statusListComponentToProps = (component) => pick(component, "type", "control
 // src/revamp/renderers/mappers/textInputComponentToProps.ts
 var textInputComponentToProps = (component) => __spreadProps(__spreadValues({}, inputComponentToProps(component, "input-text")), {
   autoComplete: component.autoComplete,
-  autoCapitalize: component == null ? void 0 : component.autocapitalization,
   displayFormat: component.displayFormat,
   maxLength: component.maxLength,
   minLength: component.minLength,
@@ -9187,7 +9186,6 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
 var stringSchemaToTextInputComponent = (schemaMapperProps, mapperProps) => {
   const { schema, localValue, model, required = false } = schemaMapperProps;
   const {
-    autocapitalization,
     autocompleteHint,
     control,
     default: defaultValue,
@@ -9213,7 +9211,6 @@ var stringSchemaToTextInputComponent = (schemaMapperProps, mapperProps) => {
   const value = performPersistAsync ? validLocalValue : validModel;
   return createTextInputComponent(
     __spreadProps(__spreadValues({}, mapCommonSchemaProps(schemaMapperProps)), {
-      autocapitalization,
       autoComplete: getAutocompleteString(autocompleteHint),
       checks: schema.hidden ? [] : [
         getRequiredCheck(required, errorMessageFunctions),
@@ -12125,6 +12122,14 @@ var useLogger = () => {
   return logging;
 };
 
+// src/legacy/common/contexts/featureContext/FeatureContext.tsx
+import { createContext as createContext4, useContext as useContext4 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var FeatureContext = createContext4([]);
+function FeatureContextProvider({ features, children }) {
+  return /* @__PURE__ */ jsx10(FeatureContext.Provider, { value: features, children });
+}
+
 // src/common/cameraCapture/utils/mobile-utils.ts
 var isMobile = () => isMobileScreenSize() && (isTouchScreen() || isMobileUA());
 var isMobileUA = (userAgent = window.navigator.userAgent) => (
@@ -12848,26 +12853,6 @@ var filterHiddenSchemas = (schemas) => schemas.filter((schema) => {
   return (schema == null ? void 0 : schema.hidden) !== true;
 });
 
-// src/common/httpClientContext/HttpClientContext.tsx
-import { createContext as createContext4, useContext as useContext4, useMemo as useMemo7 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var HttpClientContext = createContext4(void 0);
-function HttpClientProvider({ httpClient, children }) {
-  return /* @__PURE__ */ jsx10(HttpClientContext.Provider, { value: httpClient, children });
-}
-function HttpClientProviderFromBaseUrl({ baseUrl, children }) {
-  const httpClient = useMemo7(() => makeHttpClient(baseUrl), [baseUrl]);
-  return /* @__PURE__ */ jsx10(HttpClientContext.Provider, { value: httpClient, children });
-}
-var useHttpClient = () => {
-  const contextFetch = useContext4(HttpClientContext);
-  return contextFetch != null ? contextFetch : fetch;
-};
-var useHasHttpClientProvider = () => {
-  const context = useContext4(HttpClientContext);
-  return Boolean(context);
-};
-
 // src/legacy/common/hooks/useDebouncedFunction/useDebouncedFunction.tsx
 import { useCallback as useCallback4 } from "react";
 function useDebouncedFunction(callback, waitMs) {
@@ -12892,6 +12877,28 @@ function useExternal(url) {
 
 // src/legacy/common/hooks/useExternalStepPolling/useExternalStepPolling.tsx
 import { useCallback as useCallback5, useMemo as useMemo8 } from "react";
+
+// src/common/httpClientContext/HttpClientContext.tsx
+import { createContext as createContext5, useContext as useContext5, useMemo as useMemo7 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var HttpClientContext = createContext5(void 0);
+function HttpClientProvider({ httpClient, children }) {
+  return /* @__PURE__ */ jsx11(HttpClientContext.Provider, { value: httpClient, children });
+}
+function HttpClientProviderFromBaseUrl({ baseUrl, children }) {
+  const httpClient = useMemo7(() => makeHttpClient(baseUrl), [baseUrl]);
+  return /* @__PURE__ */ jsx11(HttpClientContext.Provider, { value: httpClient, children });
+}
+var useHttpClient = () => {
+  const contextFetch = useContext5(HttpClientContext);
+  return contextFetch != null ? contextFetch : fetch;
+};
+var useHasHttpClientProvider = () => {
+  const context = useContext5(HttpClientContext);
+  return Boolean(context);
+};
+
+// src/legacy/common/hooks/useExternalStepPolling/useExternalStepPolling.tsx
 function useExternalStepPolling(polling, onAction) {
   var _a, _b;
   const httpClient = useHttpClient();
@@ -13017,19 +13024,19 @@ import "react";
 import "react/jsx-runtime";
 
 // src/legacy/layout/icon/FlagIcon.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var isFlagIcon = (name) => name.startsWith("flag-");
 function FlagIcon({ name }) {
   if (!isFlagIcon(name)) {
     return null;
   }
   const code = name.substring(5);
-  return /* @__PURE__ */ jsx12(Flag, { intrinsicSize: 24, code });
+  return /* @__PURE__ */ jsx13(Flag, { intrinsicSize: 24, code });
 }
 
 // src/legacy/layout/icon/NamedIcon.tsx
 import * as icons from "@transferwise/icons";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var isNamedIcon = (name) => {
   const iconName = toCapitalisedCamelCase(name);
   return Object.keys(icons).includes(iconName);
@@ -13040,19 +13047,19 @@ function NamedIcon({ name }) {
   }
   const iconName = toCapitalisedCamelCase(name);
   const Icon = icons[iconName];
-  return /* @__PURE__ */ jsx13(Icon, { size: 24 });
+  return /* @__PURE__ */ jsx14(Icon, { size: 24 });
 }
 var toCapitalisedCamelCase = (value) => value.split("-").map(capitaliseFirstChar).join("");
 var capitaliseFirstChar = (value) => `${value[0].toUpperCase()}${value.slice(1)}`;
 
 // src/legacy/layout/icon/DynamicIcon.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function DynamicIcon({ type }) {
   if (isFlagIcon(type)) {
-    return /* @__PURE__ */ jsx14(FlagIcon, { name: type });
+    return /* @__PURE__ */ jsx15(FlagIcon, { name: type });
   }
   if (isNamedIcon(type)) {
-    return /* @__PURE__ */ jsx14(NamedIcon, { name: type });
+    return /* @__PURE__ */ jsx15(NamedIcon, { name: type });
   }
   return null;
 }
@@ -13062,17 +13069,17 @@ function isValidIconName(name) {
 var DynamicIcon_default = DynamicIcon;
 
 // src/legacy/layout/utils/getNavigationOptionMedia.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var getNavigationOptionMedia = ({ icon, image }) => {
   if (icon == null ? void 0 : icon.name) {
-    return /* @__PURE__ */ jsx15(Avatar, { type: AvatarType.ICON, children: /* @__PURE__ */ jsx15(DynamicIcon_default, { type: icon.name }) });
+    return /* @__PURE__ */ jsx16(Avatar, { type: AvatarType.ICON, children: /* @__PURE__ */ jsx16(DynamicIcon_default, { type: icon.name }) });
   }
   if (icon == null ? void 0 : icon.text) {
-    return /* @__PURE__ */ jsx15(Avatar, { type: AvatarType.INITIALS, children: icon.text });
+    return /* @__PURE__ */ jsx16(Avatar, { type: AvatarType.INITIALS, children: icon.text });
   }
   if (image == null ? void 0 : image.url) {
     const { url, text } = image;
-    return /* @__PURE__ */ jsx15("img", { src: url, alt: text });
+    return /* @__PURE__ */ jsx16("img", { src: url, alt: text });
   }
   return null;
 };
@@ -13108,10 +13115,10 @@ var getTextAlignment = (align) => {
 var getTextAlignmentAndMargin = (component) => `${getTextAlignment(component.align)} ${getMargin(component.margin)}`;
 
 // src/legacy/layout/alert/DynamicAlert.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var DynamicAlert = ({ component: alert, onAction }) => {
   const { context, markdown, margin } = alert;
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     Alert2,
     {
       type: mapContextToAlertType(legacy_mapContext(context)),
@@ -13195,12 +13202,12 @@ var mapContextToAlertType = (context) => {
 var DynamicAlert_default = DynamicAlert;
 
 // src/legacy/layout/box/DynamicBox.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "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__ */ jsx17("div", { className: margin + getBorderClass(box.border), children: /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx18("div", { className: margin + getBorderClass(box.border), children: /* @__PURE__ */ jsx18(
       DynamicLayout_default,
       {
         components: box.components,
@@ -13213,7 +13220,7 @@ var DynamicBox = (props) => {
       }
     ) });
   }
-  return /* @__PURE__ */ jsx17("div", { className: "row", children: /* @__PURE__ */ jsx17("div", { className: margin + getBoxWidthClasses(box), children: /* @__PURE__ */ jsx17("div", { className: getBorderClass(box.border), children: /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18("div", { className: "row", children: /* @__PURE__ */ jsx18("div", { className: margin + getBoxWidthClasses(box), children: /* @__PURE__ */ jsx18("div", { className: getBorderClass(box.border), children: /* @__PURE__ */ jsx18(
     DynamicLayout_default,
     {
       components: box.components,
@@ -13299,9 +13306,9 @@ var getButtonSize = (size) => {
 };
 
 // src/legacy/layout/button/DynamicButton.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function DynamicButton(props) {
-  return props.component.behavior ? /* @__PURE__ */ jsx18(DynamicButtonWithBehavior, __spreadValues({}, props)) : /* @__PURE__ */ jsx18(DynamicButtonWithoutBehavior, __spreadValues({}, props));
+  return props.component.behavior ? /* @__PURE__ */ jsx19(DynamicButtonWithBehavior, __spreadValues({}, props)) : /* @__PURE__ */ jsx19(DynamicButtonWithoutBehavior, __spreadValues({}, props));
 }
 function DynamicButtonWithoutBehavior(props) {
   var _a, _b;
@@ -13318,7 +13325,7 @@ function DynamicButtonWithoutBehavior(props) {
       onAction(componentAction);
     }
   };
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     Button,
     {
       size: getButtonSize(component.size),
@@ -13370,7 +13377,7 @@ function DynamicButtonWithBehavior(props) {
       }
     }
   };
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     Button,
     {
       size: getButtonSize(component.size),
@@ -13387,12 +13394,12 @@ function DynamicButtonWithBehavior(props) {
 var DynamicButton_default = DynamicButton;
 
 // src/legacy/layout/columns/DynamicColumns.tsx
-import { jsx as jsx19, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs3 } from "react/jsx-runtime";
 var DynamicColumns = (props) => {
   const columns = props.component;
   const { leftWidth, rightWidth } = getWidth(columns.bias);
   return /* @__PURE__ */ jsxs3("div", { className: `${getMargin(columns.margin || "xs")} row`, children: [
-    /* @__PURE__ */ jsx19("div", { className: `${leftWidth} m-b-0`, children: /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx20("div", { className: `${leftWidth} m-b-0`, children: /* @__PURE__ */ jsx20(
       DynamicLayout_default,
       {
         components: columns.left,
@@ -13404,7 +13411,7 @@ var DynamicColumns = (props) => {
         onPersistAsync: props.onPersistAsync
       }
     ) }),
-    /* @__PURE__ */ jsx19("div", { className: `${rightWidth} m-b-0`, children: /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx20("div", { className: `${rightWidth} m-b-0`, children: /* @__PURE__ */ jsx20(
       DynamicLayout_default,
       {
         components: columns.right,
@@ -13440,13 +13447,13 @@ var DynamicColumns_default = DynamicColumns;
 
 // src/legacy/layout/decision/DynamicDecision.tsx
 import { Header, NavigationOption, NavigationOptionsList } from "@transferwise/components";
-import { jsx as jsx20, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs4 } from "react/jsx-runtime";
 function DynamicDecision({ component, onAction }) {
   const { loading } = useDynamicFlow();
   const { margin, options, title } = component;
   return /* @__PURE__ */ jsxs4("div", { className: getMargin(margin), children: [
-    title && /* @__PURE__ */ jsx20(Header, { as: "h2", title }),
-    /* @__PURE__ */ jsx20(NavigationOptionsList, { children: options.map((option) => /* @__PURE__ */ jsx20(
+    title && /* @__PURE__ */ jsx21(Header, { as: "h2", title }),
+    /* @__PURE__ */ jsx21(NavigationOptionsList, { children: options.map((option) => /* @__PURE__ */ jsx21(
       NavigationOption,
       {
         title: option.title,
@@ -13464,11 +13471,11 @@ function DynamicDecision({ component, onAction }) {
 var DynamicDecision_default = DynamicDecision;
 
 // src/legacy/layout/divider/DynamicDivider.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var DynamicDivider = ({ component }) => {
   const margin = getMargin(component.margin);
   const className = `m-t-0 ${margin}`;
-  return /* @__PURE__ */ jsx21("hr", { className });
+  return /* @__PURE__ */ jsx22("hr", { className });
 };
 var DynamicDivider_default = DynamicDivider;
 
@@ -13488,7 +13495,7 @@ var DynamicExternal_messages_default = defineMessages6({
 });
 
 // src/legacy/layout/external/DynamicExternal.tsx
-import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs5 } from "react/jsx-runtime";
 var DynamicExternal = ({ component, onAction }) => {
   const { requestUrl, responseHandlers, polling, retryTitle } = component;
   const intl = useIntl3();
@@ -13506,9 +13513,9 @@ var DynamicExternal = ({ component, onAction }) => {
   }, [polling, responseHandlers]);
   useExternalStepPolling(pollingConfiguration, onAction);
   return /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    /* @__PURE__ */ jsx22(Loader, { size: Size2.LARGE, classNames: { "tw-loader": "tw-loader m-x-auto" } }),
-    /* @__PURE__ */ jsx22("br", {}),
-    /* @__PURE__ */ jsx22(Button2, { priority: "tertiary", block: true, onClick: openExternalUrl, children: retryTitle || intl.formatMessage(DynamicExternal_messages_default.retryTitle) })
+    /* @__PURE__ */ jsx23(Loader, { size: Size2.LARGE, classNames: { "tw-loader": "tw-loader m-x-auto" } }),
+    /* @__PURE__ */ jsx23("br", {}),
+    /* @__PURE__ */ jsx23(Button2, { priority: "tertiary", block: true, onClick: openExternalUrl, children: retryTitle || intl.formatMessage(DynamicExternal_messages_default.retryTitle) })
   ] });
 };
 var DynamicExternal_default = DynamicExternal;
@@ -13520,7 +13527,7 @@ import { useEffect as useEffect11 } from "react";
 var import_classnames = __toESM(require_classnames());
 import { Header as Header2 } from "@transferwise/components";
 import { useState as useState5 } from "react";
-import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs6 } from "react/jsx-runtime";
 var splitModel = (model, schemas) => schemas.map((schema) => getValidObjectModelParts(model, schema) || {});
 var combineModels = (models) => models.reduce((current, combined) => __spreadValues(__spreadValues({}, combined), current), {});
 var getSchemaColumnClasses = (width) => ({
@@ -13538,11 +13545,11 @@ function AllOfSchema(props) {
   };
   const [models, setModels] = useState5(splitModel(props.model, props.schema.allOf));
   return /* @__PURE__ */ jsxs6(Fragment5, { children: [
-    props.schema.title && !hideTitle && /* @__PURE__ */ jsx23(Header2, { title: props.schema.title }),
-    props.schema.description && /* @__PURE__ */ jsx23("p", { children: props.schema.description }),
-    /* @__PURE__ */ jsx23("div", { className: "row", children: props.schema.allOf.map((schema, index) => (
+    props.schema.title && !hideTitle && /* @__PURE__ */ jsx24(Header2, { title: props.schema.title }),
+    props.schema.description && /* @__PURE__ */ jsx24("p", { children: props.schema.description }),
+    /* @__PURE__ */ jsx24("div", { className: "row", children: props.schema.allOf.map((schema, index) => (
       // eslint-disable-next-line react/no-array-index-key
-      /* @__PURE__ */ jsx23("div", { className: (0, import_classnames.default)(getSchemaColumnClasses(schema.width)), children: /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx24("div", { className: (0, import_classnames.default)(getSchemaColumnClasses(schema.width)), children: /* @__PURE__ */ jsx24(
         GenericSchema_default,
         {
           schema,
@@ -13574,7 +13581,7 @@ import { useMemo as useMemo10, useState as useState6 } from "react";
 import { InlineAlert } from "@transferwise/components";
 import { formatDate as formatDate3 } from "@transferwise/formatting";
 import { useIntl as useIntl4 } from "react-intl";
-import { jsx as jsx24, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs7 } from "react/jsx-runtime";
 function ControlFeedback(props) {
   const { errors = "", validations = [], validationMessages = {} } = props;
   const defaultValidationMessages = useDefaultValidationMessages(props.schema);
@@ -13584,11 +13591,11 @@ function ControlFeedback(props) {
   const isDescriptionVisible = props.schema.type !== "boolean" && props.schema.description && !isErrorVisible && !isValidationVisible;
   const hasInfoMessage = Boolean(props.infoMessage);
   return /* @__PURE__ */ jsxs7("div", { id: props.id, children: [
-    isErrorVisible ? /* @__PURE__ */ jsx24(InlineAlert, { type: "error", children: errors }) : null,
-    isValidationVisible ? /* @__PURE__ */ jsx24(InlineAlert, { type: "error", children: validations.map((validation) => /* @__PURE__ */ jsx24("div", { children: mergedValidationMessages[validation] }, validation)) }) : null,
+    isErrorVisible ? /* @__PURE__ */ jsx25(InlineAlert, { type: "error", children: errors }) : null,
+    isValidationVisible ? /* @__PURE__ */ jsx25(InlineAlert, { type: "error", children: validations.map((validation) => /* @__PURE__ */ jsx25("div", { children: mergedValidationMessages[validation] }, validation)) }) : null,
     (isDescriptionVisible || hasInfoMessage) && /* @__PURE__ */ jsxs7(InlineAlert, { type: "info", children: [
-      isDescriptionVisible && /* @__PURE__ */ jsx24("div", { children: props.schema.description }),
-      hasInfoMessage && /* @__PURE__ */ jsx24("div", { children: props.infoMessage })
+      isDescriptionVisible && /* @__PURE__ */ jsx25("div", { children: props.schema.description }),
+      hasInfoMessage && /* @__PURE__ */ jsx25("div", { children: props.infoMessage })
     ] })
   ] });
 }
@@ -13708,7 +13715,7 @@ function useFormattedDefaultErrorMessages({
 }
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/multipleFileUploadSchema/MultipleFileUploadSchema.tsx
-import { jsx as jsx25, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs8 } from "react/jsx-runtime";
 function MultipleFileUploadSchema(props) {
   var _a, _b;
   const { onChange, errors = null, schema, required = false } = props;
@@ -13770,9 +13777,9 @@ function MultipleFileUploadSchema(props) {
   });
   const feedbackId = `${uid}-feedback`;
   return /* @__PURE__ */ jsxs8("div", { className: (0, import_classnames2.default)("form-group", { "has-error": showError }), children: [
-    /* @__PURE__ */ jsx25("label", { className: "d-block control-label", htmlFor: uid, children: props.schema.title }),
-    /* @__PURE__ */ jsx25("div", { "aria-describedby": feedbackId, children: /* @__PURE__ */ jsx25(UploadInput, __spreadValues({}, uploadInputProps)) }),
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx26("label", { className: "d-block control-label", htmlFor: uid, children: props.schema.title }),
+    /* @__PURE__ */ jsx26("div", { "aria-describedby": feedbackId, children: /* @__PURE__ */ jsx26(UploadInput, __spreadValues({}, uploadInputProps)) }),
+    /* @__PURE__ */ jsx26(
       ControlFeedback_default,
       {
         id: feedbackId,
@@ -13812,7 +13819,7 @@ import { useIntl as useIntl6 } from "react-intl";
 
 // src/legacy/jsonSchemaForm/schemaFormControl/utils/mapping-utils.tsx
 import { Avatar as Avatar2, AvatarType as AvatarType2 } from "@transferwise/components";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var mapConstSchemaToOption = (schema, controlType) => {
   switch (controlType) {
     case "select":
@@ -13836,7 +13843,7 @@ var mapKeywordsToSearchStrings = (searchStrings) => isArray2(searchStrings) ? {
 var mapImage = (image) => {
   if (image == null ? void 0 : image.url) {
     return {
-      icon: /* @__PURE__ */ jsx26("div", { className: "media", children: /* @__PURE__ */ jsx26("div", { className: "np-option__no-media-circle", children: /* @__PURE__ */ jsx26("img", { src: image.url, alt: image.name || "" }) }) }),
+      icon: /* @__PURE__ */ jsx27("div", { className: "media", children: /* @__PURE__ */ jsx27("div", { className: "np-option__no-media-circle", children: /* @__PURE__ */ jsx27("img", { src: image.url, alt: image.name || "" }) }) }),
       hideIconInTrigger: true
     };
   }
@@ -13845,17 +13852,17 @@ var mapImage = (image) => {
 var getIconPropertyForSelectOption = (icon) => {
   if ((icon == null ? void 0 : icon.name) && isFlagIcon(icon.name)) {
     return {
-      icon: /* @__PURE__ */ jsx26(Flag, { code: icon.name.substring(5), intrinsicSize: 24 })
+      icon: /* @__PURE__ */ jsx27(Flag, { code: icon.name.substring(5), intrinsicSize: 24 })
     };
   }
   if ((icon == null ? void 0 : icon.name) && isValidIconName(icon.name)) {
     return {
-      icon: /* @__PURE__ */ jsx26(DynamicIcon_default, { type: icon.name })
+      icon: /* @__PURE__ */ jsx27(DynamicIcon_default, { type: icon.name })
     };
   }
   if (icon == null ? void 0 : icon.text) {
     return {
-      icon: /* @__PURE__ */ jsx26("span", { children: icon.text })
+      icon: /* @__PURE__ */ jsx27("span", { children: icon.text })
     };
   }
   return null;
@@ -13863,17 +13870,17 @@ var getIconPropertyForSelectOption = (icon) => {
 var getAvatarPropertyForRadioOption = ({ image, icon }) => {
   if (image == null ? void 0 : image.url) {
     return {
-      avatar: /* @__PURE__ */ jsx26(Avatar2, { type: AvatarType2.THUMBNAIL, children: /* @__PURE__ */ jsx26("img", { src: image.url, alt: "" }) })
+      avatar: /* @__PURE__ */ jsx27(Avatar2, { type: AvatarType2.THUMBNAIL, children: /* @__PURE__ */ jsx27("img", { src: image.url, alt: "" }) })
     };
   }
   if ((icon == null ? void 0 : icon.name) && isValidIconName(icon.name)) {
     return {
-      avatar: /* @__PURE__ */ jsx26(Avatar2, { type: AvatarType2.ICON, children: /* @__PURE__ */ jsx26(DynamicIcon_default, { type: icon.name }) })
+      avatar: /* @__PURE__ */ jsx27(Avatar2, { type: AvatarType2.ICON, children: /* @__PURE__ */ jsx27(DynamicIcon_default, { type: icon.name }) })
     };
   }
   if (icon == null ? void 0 : icon.text) {
     return {
-      avatar: /* @__PURE__ */ jsx26(Avatar2, { type: AvatarType2.INITIALS, children: icon.text })
+      avatar: /* @__PURE__ */ jsx27(Avatar2, { type: AvatarType2.INITIALS, children: icon.text })
     };
   }
   return null;
@@ -13912,7 +13919,7 @@ var multi_select_messages_default = defineMessages8({
 });
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/multiSelectSchema/MultiSelectSchema.tsx
-import { jsx as jsx27, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs9 } from "react/jsx-runtime";
 function MultiSelectSchema({
   schema,
   model,
@@ -13967,8 +13974,8 @@ function MultiSelectSchema({
     "has-info": !!schema.description
   };
   return /* @__PURE__ */ jsxs9("div", { className: (0, import_classnames3.default)("d-flex flex-column", formGroupClasses), children: [
-    schema.title ? /* @__PURE__ */ jsx27("label", { className: "control-label d-inline m-b-1", htmlFor: id, children: schema.title }) : void 0,
-    /* @__PURE__ */ jsx27(
+    schema.title ? /* @__PURE__ */ jsx28("label", { className: "control-label d-inline m-b-1", htmlFor: id, children: schema.title }) : void 0,
+    /* @__PURE__ */ jsx28(
       SelectInput,
       {
         id,
@@ -13994,12 +14001,12 @@ function MultiSelectSchema({
           if (withinTrigger) {
             return selected && index === selected[0] ? getFormattedMessage() : void 0;
           }
-          return /* @__PURE__ */ jsx27(SelectInputOptionContent, { title: label, note: note != null ? note : secondary, icon });
+          return /* @__PURE__ */ jsx28(SelectInputOptionContent, { title: label, note: note != null ? note : secondary, icon });
         },
         onChange: broadcastModelChange
       }
     ),
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx28(
       ControlFeedback_default,
       {
         id: `${id}-feedback`,
@@ -14031,9 +14038,9 @@ import { useIntl as useIntl8 } from "react-intl";
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/repeatableSchema/ItemSummary.tsx
 import { NavigationOption as NavigationOption2 } from "@transferwise/components";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function ItemSummaryOption({ item, onClick }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     NavigationOption2,
     {
       media: getNavigationOptionMedia(item),
@@ -14073,7 +14080,7 @@ var repeatable_messages_default = defineMessages9({
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/repeatableSchema/RepeatableSchemaStep.tsx
 import { useState as useState8 } from "react";
 import { useIntl as useIntl7 } from "react-intl";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function RepeatableSchemaStep({
   type,
   schema,
@@ -14121,7 +14128,7 @@ function RepeatableSchemaStep({
     }
     onModelChange(__spreadProps(__spreadValues({}, modelChangeProps), { model: model2 }));
   };
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     DynamicFlowStep,
     {
       step,
@@ -14327,7 +14334,7 @@ var schemaSummaryProvides = (summary, providesProp) => (
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/repeatableSchema/RepeatableSchema.tsx
 var import_classnames4 = __toESM(require_classnames());
-import { jsx as jsx30, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs10 } from "react/jsx-runtime";
 function RepeatableSchema({
   schema,
   model,
@@ -14405,8 +14412,8 @@ function RepeatableSchema({
     "has-error": (_a = errors && !isEmpty(errors)) != null ? _a : submitted && validations.length
   };
   return /* @__PURE__ */ jsxs10("div", { id, className: (0, import_classnames4.default)(formGroupClasses), children: [
-    schema.title && /* @__PURE__ */ jsx30(Header3, { title: schema.title }),
-    itemSummaries == null ? void 0 : itemSummaries.map((itemSummary) => /* @__PURE__ */ jsx30(
+    schema.title && /* @__PURE__ */ jsx31(Header3, { title: schema.title }),
+    itemSummaries == null ? void 0 : itemSummaries.map((itemSummary) => /* @__PURE__ */ jsx31(
       ItemSummaryOption,
       {
         item: itemSummary,
@@ -14414,21 +14421,21 @@ function RepeatableSchema({
       },
       JSON.stringify(itemSummary)
     )),
-    /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx31(
       NavigationOption3,
       {
-        media: /* @__PURE__ */ jsx30(Plus, {}),
+        media: /* @__PURE__ */ jsx31(Plus, {}),
         title: schema.addItemTitle || formatMessage(repeatable_messages_default.addItemTitle),
         showMediaAtAllSizes: true,
         onClick: onAddItem
       }
     ),
-    /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx31(
       Modal,
       {
         open: openModalType !== null,
         title: (openModalType === "add" ? schema.addItemTitle : schema.editItemTitle) || formatMessage(repeatable_messages_default.addItemTitle),
-        body: /* @__PURE__ */ jsx30(
+        body: /* @__PURE__ */ jsx31(
           RepeatableSchemaStep_default,
           {
             type: openModalType != null ? openModalType : "add",
@@ -14443,7 +14450,7 @@ function RepeatableSchema({
         onClose: onCancelEdit
       }
     ),
-    /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx31(
       ControlFeedback_default,
       {
         id: `${id}-feedback`,
@@ -14485,28 +14492,28 @@ var getUpdatedItemSummaries = (action, {
 var RepeatableSchema_default = RepeatableSchema;
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/ArrayListSchema.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function ArrayListSchema(props) {
   const { errors = null, schema } = props;
   if (isMultipleFileUploadSchema(schema)) {
-    return /* @__PURE__ */ jsx31(MultipleFileUploadSchema_default, __spreadProps(__spreadValues({}, props), { errors, schema }));
+    return /* @__PURE__ */ jsx32(MultipleFileUploadSchema_default, __spreadProps(__spreadValues({}, props), { errors, schema }));
   }
   if (isMultiSelectConstSchema(schema)) {
-    return /* @__PURE__ */ jsx31(MultiSelectSchema, __spreadProps(__spreadValues({}, props), { errors, schema }));
+    return /* @__PURE__ */ jsx32(MultiSelectSchema, __spreadProps(__spreadValues({}, props), { errors, schema }));
   }
   if (isListArraySchema(schema)) {
-    return /* @__PURE__ */ jsx31(RepeatableSchema_default, __spreadProps(__spreadValues({}, props), { errors, schema }));
+    return /* @__PURE__ */ jsx32(RepeatableSchema_default, __spreadProps(__spreadValues({}, props), { errors, schema }));
   }
   throw new Error("Invalid array list schema");
 }
 var ArrayListSchema_default = ArrayListSchema;
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/ArraySchema.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var ArraySchema = (props) => {
   const { schema } = props;
   if (isListArraySchema(schema)) {
-    return /* @__PURE__ */ jsx32(ArrayListSchema_default, __spreadValues({}, props));
+    return /* @__PURE__ */ jsx33(ArrayListSchema_default, __spreadValues({}, props));
   }
   throw new Error("Not implemented");
 };
@@ -14516,7 +14523,7 @@ var ArraySchema_default = ArraySchema;
 var import_classnames5 = __toESM(require_classnames());
 import { Header as Header4 } from "@transferwise/components";
 import { useState as useState10, useEffect as useEffect6 } from "react";
-import { Fragment as Fragment6, jsx as jsx33, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx34, jsxs as jsxs11 } from "react/jsx-runtime";
 var getSchemaColumnClasses2 = (width) => ({
   "col-xs-12": true,
   "col-sm-6": width === "md",
@@ -14554,21 +14561,21 @@ function ObjectSchema(props) {
   const orderedPropertyNames = Array.from(allorderedPropertiesSet).filter(isPropertyDefined);
   const propsErrors = props.errors;
   return /* @__PURE__ */ jsxs11(Fragment6, { children: [
-    props.schema.alert && /* @__PURE__ */ jsx33(DynamicAlert_default, { component: props.schema.alert }),
+    props.schema.alert && /* @__PURE__ */ jsx34(DynamicAlert_default, { component: props.schema.alert }),
     /* @__PURE__ */ jsxs11("fieldset", { children: [
-      props.schema.title && !hideTitle && /* @__PURE__ */ jsx33(Header4, { title: props.schema.title, as: "legend" }),
+      props.schema.title && !hideTitle && /* @__PURE__ */ jsx34(Header4, { title: props.schema.title, as: "legend" }),
       props.schema.description && !hideTitle && /* @__PURE__ */ jsxs11("p", { children: [
         " ",
         props.schema.description,
         " "
       ] }),
-      /* @__PURE__ */ jsx33("div", { className: "row", children: orderedPropertyNames.map((propertyName) => /* @__PURE__ */ jsx33(
+      /* @__PURE__ */ jsx34("div", { className: "row", children: orderedPropertyNames.map((propertyName) => /* @__PURE__ */ jsx34(
         "div",
         {
           className: (0, import_classnames5.default)(
             getSchemaColumnClasses2(props.schema.properties[propertyName].width)
           ),
-          children: /* @__PURE__ */ jsx33(
+          children: /* @__PURE__ */ jsx34(
             GenericSchema_default,
             {
               schema: props.schema.properties[propertyName],
@@ -14609,14 +14616,14 @@ var help_messages_default = defineMessages10({
 });
 
 // src/legacy/jsonSchemaForm/help/Help.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function Help(props) {
   const intl = useIntl9();
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     Info,
     {
       className: "m-l-1",
-      content: /* @__PURE__ */ jsx34(Markdown, { config: { link: { target: "_blank" } }, children: props.help.markdown }),
+      content: /* @__PURE__ */ jsx35(Markdown, { config: { link: { target: "_blank" } }, children: props.help.markdown }),
       presentation: "POPOVER",
       size: "sm",
       "aria-label": intl.formatMessage(help_messages_default.helpAria)
@@ -14829,7 +14836,7 @@ var autocompleteTokenMap2 = {
 };
 
 // src/legacy/formControl/FormControl.tsx
-import { Fragment as Fragment7, jsx as jsx35 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx36 } from "react/jsx-runtime";
 var _FormControl = class _FormControl extends PureComponent {
   constructor(props) {
     super(props);
@@ -14919,7 +14926,7 @@ var _FormControl = class _FormControl extends PureComponent {
     } = this.props;
     switch (type) {
       case FormControlType.RADIO:
-        return /* @__PURE__ */ jsx35(
+        return /* @__PURE__ */ jsx36(
           RadioGroup,
           {
             radios: options.map(this.mapOption),
@@ -14935,7 +14942,7 @@ var _FormControl = class _FormControl extends PureComponent {
           }
         );
       case FormControlType.CHECKBOX:
-        return /* @__PURE__ */ jsx35(
+        return /* @__PURE__ */ jsx36(
           Checkbox,
           {
             checked: getSafeBooleanValue(value, { coerceValue: true }),
@@ -14953,7 +14960,7 @@ var _FormControl = class _FormControl extends PureComponent {
         const search = options.length >= 8;
         const items = options;
         const selected = this.getSelectedOption(options);
-        return /* @__PURE__ */ jsx35("div", { className: "d-flex flex-column", children: /* @__PURE__ */ jsx35(
+        return /* @__PURE__ */ jsx36("div", { className: "d-flex flex-column", children: /* @__PURE__ */ jsx36(
           SelectInput2,
           {
             id,
@@ -14969,7 +14976,7 @@ var _FormControl = class _FormControl extends PureComponent {
               disabled: value2.disabled
             })),
             value: selected != null ? selected : null,
-            renderValue: ({ hideIconInTrigger, icon, label: label2, note, secondary }, withinTrigger) => /* @__PURE__ */ jsx35(
+            renderValue: ({ hideIconInTrigger, icon, label: label2, note, secondary }, withinTrigger) => /* @__PURE__ */ jsx36(
               SelectInputOptionContent2,
               {
                 title: label2,
@@ -14998,13 +15005,13 @@ var _FormControl = class _FormControl extends PureComponent {
         ) });
       }
       case FormControlType.TAB:
-        return /* @__PURE__ */ jsx35(
+        return /* @__PURE__ */ jsx36(
           Tabs,
           {
             selected: ((_a = this.getSelectedOption(options)) == null ? void 0 : _a.value) || 0,
             tabs: options.map((option) => ({
               title: option.label,
-              content: /* @__PURE__ */ jsx35(Fragment7, {}),
+              content: /* @__PURE__ */ jsx36(Fragment7, {}),
               disabled: option.disabled || false
             })),
             name: id,
@@ -15019,7 +15026,7 @@ var _FormControl = class _FormControl extends PureComponent {
         );
       case FormControlType.NUMERIC:
       case FormControlType.NUMBER: {
-        return /* @__PURE__ */ jsx35(
+        return /* @__PURE__ */ jsx36(
           "input",
           {
             autoComplete: this.getAutocompleteValue(),
@@ -15053,7 +15060,7 @@ var _FormControl = class _FormControl extends PureComponent {
         );
       }
       case FormControlType.HIDDEN:
-        return /* @__PURE__ */ jsx35(
+        return /* @__PURE__ */ jsx36(
           "input",
           {
             type: "hidden",
@@ -15063,7 +15070,7 @@ var _FormControl = class _FormControl extends PureComponent {
           }
         );
       case FormControlType.PASSWORD:
-        return /* @__PURE__ */ jsx35(
+        return /* @__PURE__ */ jsx36(
           "input",
           {
             autoComplete: this.getAutocompleteValue(),
@@ -15083,7 +15090,7 @@ var _FormControl = class _FormControl extends PureComponent {
         );
       case FormControlType.DATE:
       case FormControlType.DATETIME:
-        return /* @__PURE__ */ jsx35(
+        return /* @__PURE__ */ jsx36(
           DateInput,
           {
             "aria-labelledby": labelledBy,
@@ -15100,7 +15107,7 @@ var _FormControl = class _FormControl extends PureComponent {
           }
         );
       case FormControlType.DATELOOKUP: {
-        return /* @__PURE__ */ jsx35(
+        return /* @__PURE__ */ jsx36(
           DateLookup,
           {
             value: getSafeDateStringValue(value),
@@ -15118,7 +15125,7 @@ var _FormControl = class _FormControl extends PureComponent {
         );
       }
       case FormControlType.TEL:
-        return /* @__PURE__ */ jsx35(
+        return /* @__PURE__ */ jsx36(
           PhoneNumberInput,
           {
             disabled,
@@ -15150,7 +15157,7 @@ var _FormControl = class _FormControl extends PureComponent {
           autoComplete: this.getAutocompleteValue()
         };
         if (this.props.displayPattern) {
-          return /* @__PURE__ */ jsx35(
+          return /* @__PURE__ */ jsx36(
             TextareaWithDisplayFormat,
             __spreadProps(__spreadValues({
               displayPattern: this.props.displayPattern
@@ -15159,7 +15166,7 @@ var _FormControl = class _FormControl extends PureComponent {
             })
           );
         }
-        return /* @__PURE__ */ jsx35(
+        return /* @__PURE__ */ jsx36(
           "textarea",
           __spreadProps(__spreadValues({}, textareaProps), {
             "aria-describedby": describedBy,
@@ -15169,7 +15176,7 @@ var _FormControl = class _FormControl extends PureComponent {
       }
       case FormControlType.FILE:
       case FormControlType.UPLOAD: {
-        return /* @__PURE__ */ jsx35(
+        return /* @__PURE__ */ jsx36(
           Upload,
           __spreadProps(__spreadValues({}, uploadProps), {
             usAccept: uploadProps.usAccept || "*",
@@ -15206,7 +15213,7 @@ var _FormControl = class _FormControl extends PureComponent {
           autoComplete: this.getAutocompleteValue()
         };
         if (this.props.displayPattern) {
-          return /* @__PURE__ */ jsx35(
+          return /* @__PURE__ */ jsx36(
             InputWithDisplayFormat,
             __spreadProps(__spreadValues({
               displayPattern: this.props.displayPattern
@@ -15215,7 +15222,7 @@ var _FormControl = class _FormControl extends PureComponent {
             })
           );
         }
-        return /* @__PURE__ */ jsx35(
+        return /* @__PURE__ */ jsx36(
           "input",
           __spreadProps(__spreadValues({}, inputProps), {
             "aria-describedby": describedBy,
@@ -15265,7 +15272,7 @@ _FormControl.defaultProps = {
 var FormControl = _FormControl;
 
 // src/legacy/jsonSchemaForm/schemaFormControl/SchemaFormControl.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var isNativeInput = (propsSchemaType) => propsSchemaType === "string" || propsSchemaType === "number";
 var getControlType = (schema) => {
   if (isOneOfSchema2(schema)) {
@@ -15382,7 +15389,7 @@ function SchemaFormControl(props) {
     labelledBy,
     required
   };
-  return /* @__PURE__ */ jsx36("div", { "aria-describedby": describedBy, children: /* @__PURE__ */ jsx36(FormControl, __spreadValues(__spreadValues({ type: controlType, value: safeValue }, events), controlProps)) });
+  return /* @__PURE__ */ jsx37("div", { "aria-describedby": describedBy, children: /* @__PURE__ */ jsx37(FormControl, __spreadValues(__spreadValues({ type: controlType, value: safeValue }, events), controlProps)) });
 }
 var warnIfInvalidSchema = (schema, log, controlType) => {
   if (isOneOfSchema2(schema) && schema.oneOf.length === 2 && !schema.control) {
@@ -15404,7 +15411,7 @@ var warnIfInvalidSchema = (schema, log, controlType) => {
 var SchemaFormControl_default = SchemaFormControl;
 
 // src/legacy/jsonSchemaForm/oneOfSchema/OneOfSchema.tsx
-import { Fragment as Fragment8, jsx as jsx37, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx38, jsxs as jsxs12 } from "react/jsx-runtime";
 function OneOfSchema(props) {
   const onEvent = useEventDispatcher();
   const [changed, setChanged] = useState11(false);
@@ -15485,10 +15492,10 @@ function OneOfSchema(props) {
   const labelId = `${id}-label`;
   return !isHidden ? /* @__PURE__ */ jsxs12(Fragment8, { children: [
     (props.schema.oneOf.length > 1 || isConstSchema2(props.schema.oneOf[0])) && /* @__PURE__ */ jsxs12(Fragment8, { children: [
-      props.schema.alert && /* @__PURE__ */ jsx37(DynamicAlert_default, { component: props.schema.alert }),
+      props.schema.alert && /* @__PURE__ */ jsx38(DynamicAlert_default, { component: props.schema.alert }),
       /* @__PURE__ */ jsxs12("div", { className: (0, import_classnames6.default)(formGroupClasses), children: [
         getTitleAndHelp(props.schema, id, labelId),
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           SchemaFormControl_default,
           {
             id,
@@ -15505,7 +15512,7 @@ function OneOfSchema(props) {
             onSearchChange
           }
         ),
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           ControlFeedback_default,
           {
             id: feedbackId,
@@ -15521,7 +15528,7 @@ function OneOfSchema(props) {
         )
       ] })
     ] }),
-    isNoNConstSchema(props.schema.oneOf[schemaIndex]) && /* @__PURE__ */ jsx37(
+    isNoNConstSchema(props.schema.oneOf[schemaIndex]) && /* @__PURE__ */ jsx38(
       GenericSchema_default,
       {
         schema: props.schema.oneOf[schemaIndex],
@@ -15538,16 +15545,16 @@ function OneOfSchema(props) {
 }
 function getTitleAndHelp(schema, forId, labelId) {
   var _a;
-  const helpElement = schema.help ? /* @__PURE__ */ jsx37(Help_default, { help: schema.help }) : null;
-  const titleElement = isConstSchema2(schema.oneOf[0]) ? /* @__PURE__ */ jsx37("div", { className: "m-b-1", children: /* @__PURE__ */ jsxs12("label", { className: "control-label d-inline", id: labelId, htmlFor: forId, children: [
+  const helpElement = schema.help ? /* @__PURE__ */ jsx38(Help_default, { help: schema.help }) : null;
+  const titleElement = isConstSchema2(schema.oneOf[0]) ? /* @__PURE__ */ jsx38("div", { className: "m-b-1", children: /* @__PURE__ */ jsxs12("label", { className: "control-label d-inline", id: labelId, htmlFor: forId, children: [
     schema.title,
     " ",
     helpElement
-  ] }) }) : /* @__PURE__ */ jsx37(Fragment8, { children: helpElement ? /* @__PURE__ */ jsxs12("h4", { className: "m-b-2", children: [
+  ] }) }) : /* @__PURE__ */ jsx38(Fragment8, { children: helpElement ? /* @__PURE__ */ jsxs12("h4", { className: "m-b-2", children: [
     schema.title,
     " ",
     helpElement
-  ] }) : /* @__PURE__ */ jsx37(Header5, { title: (_a = schema.title) != null ? _a : "" }) });
+  ] }) : /* @__PURE__ */ jsx38(Header5, { title: (_a = schema.title) != null ? _a : "" }) });
   return schema.title ? titleElement : helpElement;
 }
 function getValidations(props, schemaIndex) {
@@ -15587,7 +15594,7 @@ import { useIntl as useIntl11 } from "react-intl";
 // src/legacy/jsonSchemaForm/persistAsyncSchema/persistAsyncBlobSchema/UploadInputAdapter.tsx
 import { Status as Status2, UploadInput as UploadInput2 } from "@transferwise/components";
 import { useMemo as useMemo14 } from "react";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 function UploadInputAdapter(props) {
   const {
     id,
@@ -15622,7 +15629,7 @@ function UploadInputAdapter(props) {
       return Promise.reject();
     });
   };
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     UploadInput2,
     {
       id,
@@ -15642,7 +15649,7 @@ function UploadInputAdapter(props) {
 }
 
 // src/legacy/jsonSchemaForm/persistAsyncSchema/persistAsyncBlobSchema/PersistAsyncBlobSchema.tsx
-import { jsx as jsx39, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs13 } from "react/jsx-runtime";
 function PersistAsyncBlobSchema(props) {
   const { model, schema, submitted, required = false, errors, onChange } = props;
   const [persistAsyncValidationMessages, setPersistAsyncValidationMessages] = useState12({});
@@ -15691,7 +15698,7 @@ function PersistAsyncBlobSchema(props) {
   const id = schema.$id || schema.persistAsync.schema.$id || schema.persistAsync.idProperty;
   const feedbackId = `${id}-feedback`;
   return /* @__PURE__ */ jsxs13("div", { className: (0, import_classnames7.default)(formGroupClasses), children: [
-    /* @__PURE__ */ jsx39("div", { "aria-describedby": feedbackId, children: /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx40("div", { "aria-describedby": feedbackId, children: /* @__PURE__ */ jsx40(
       UploadInputAdapter,
       __spreadValues({
         id,
@@ -15709,7 +15716,7 @@ function PersistAsyncBlobSchema(props) {
         onCancel
       }, mapSchemaToUploadOptions(schema.persistAsync.schema))
     ) }),
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx40(
       ControlFeedback_default,
       {
         id: feedbackId,
@@ -15735,17 +15742,17 @@ var getResponseJsonObject = async (response) => {
 var PersistAsyncBlobSchema_default = PersistAsyncBlobSchema;
 
 // src/legacy/jsonSchemaForm/persistAsyncSchema/PersistAsyncSchema.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 function PersistAsyncSchema(props) {
   const { schema } = props;
   const persistAsyncSchemaType = schema.persistAsync.schema.type;
   if (persistAsyncSchemaType === "blob") {
-    return /* @__PURE__ */ jsx40(
+    return /* @__PURE__ */ jsx41(
       PersistAsyncBlobSchema_default,
       __spreadValues({}, props)
     );
   }
-  return /* @__PURE__ */ jsx40(PersistAsyncBasicSchema_default, __spreadValues({}, props));
+  return /* @__PURE__ */ jsx41(PersistAsyncBasicSchema_default, __spreadValues({}, props));
 }
 var PersistAsyncSchema_default = PersistAsyncSchema;
 
@@ -15763,7 +15770,7 @@ var getSelectionFromModel = (schema, model) => {
 
 // src/legacy/jsonSchemaForm/promotedOneOfSchema/promotedOneOfControl/PromotedOneOfCheckboxControl.tsx
 import { Checkbox as Checkbox2 } from "@transferwise/components";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var PromotedOneOfCheckboxControl = (props) => {
   const { id, selection, setSelection } = props;
   const { promoted, other, checkedMeans } = props.promotion;
@@ -15774,13 +15781,13 @@ var PromotedOneOfCheckboxControl = (props) => {
   const toggleSelection = () => {
     setSelection(checked ? selectionWhenUnchecked : selectionWhenChecked);
   };
-  return /* @__PURE__ */ jsx41("div", { className: "form-group", children: /* @__PURE__ */ jsx41(Checkbox2, { id, label: title, checked, onChange: toggleSelection }) });
+  return /* @__PURE__ */ jsx42("div", { className: "form-group", children: /* @__PURE__ */ jsx42(Checkbox2, { id, label: title, checked, onChange: toggleSelection }) });
 };
 var PromotedOneOfCheckboxControl_default = PromotedOneOfCheckboxControl;
 
 // src/legacy/jsonSchemaForm/promotedOneOfSchema/promotedOneOfControl/PromotedOneOfRadioControl.tsx
 import { RadioGroup as RadioGroup2 } from "@transferwise/components";
-import { jsx as jsx42, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs14 } from "react/jsx-runtime";
 function PromotedOneOfRadioControl(props) {
   var _a, _b;
   const { id, selection, setSelection, promotion, promotedOneOf, title } = props;
@@ -15798,8 +15805,8 @@ function PromotedOneOfRadioControl(props) {
     }, getAvatarPropertyForRadioOption(promotion.other))
   ];
   return /* @__PURE__ */ jsxs14("div", { className: "form-group", children: [
-    title && /* @__PURE__ */ jsx42("label", { className: "control-label", htmlFor: id, children: title }),
-    /* @__PURE__ */ jsx42(
+    title && /* @__PURE__ */ jsx43("label", { className: "control-label", htmlFor: id, children: title }),
+    /* @__PURE__ */ jsx43(
       RadioGroup2,
       {
         name: "promoted-selection",
@@ -15817,16 +15824,16 @@ PromotedOneOfRadioControl.defaultProps = {
 var PromotedOneOfRadioControl_default = PromotedOneOfRadioControl;
 
 // src/legacy/jsonSchemaForm/promotedOneOfSchema/promotedOneOfControl/PromotedOneOfControl.tsx
-import { Fragment as Fragment9, jsx as jsx43 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx44 } from "react/jsx-runtime";
 function PromotedOneOfControl(props) {
   const controlType = props.promotion.control || "radio";
   switch (controlType) {
     case "radio":
-      return /* @__PURE__ */ jsx43(PromotedOneOfRadioControl_default, __spreadValues({}, props));
+      return /* @__PURE__ */ jsx44(PromotedOneOfRadioControl_default, __spreadValues({}, props));
     case "checkbox":
-      return /* @__PURE__ */ jsx43(PromotedOneOfCheckboxControl_default, __spreadValues({}, props));
+      return /* @__PURE__ */ jsx44(PromotedOneOfCheckboxControl_default, __spreadValues({}, props));
     default:
-      return /* @__PURE__ */ jsx43(Fragment9, {});
+      return /* @__PURE__ */ jsx44(Fragment9, {});
   }
 }
 PromotedOneOfControl.defaultProps = {
@@ -15836,7 +15843,7 @@ PromotedOneOfControl.defaultProps = {
 var PromotedOneOfControl_default = PromotedOneOfControl;
 
 // src/legacy/jsonSchemaForm/promotedOneOfSchema/PromotedOneOfSchema.tsx
-import { Fragment as Fragment10, jsx as jsx44, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx45, jsxs as jsxs15 } from "react/jsx-runtime";
 var isPromoted = (schema) => schema.promoted === true;
 var PromotedOneOfSchema = (props) => {
   var _a;
@@ -15848,8 +15855,8 @@ var PromotedOneOfSchema = (props) => {
   const promotedObjectSchema = getPromotedObjectSchema(promotedOneOf);
   const otherOneOf = getOtherOneOf(props.schema);
   return /* @__PURE__ */ jsxs15(Fragment10, { children: [
-    promotedAlert && /* @__PURE__ */ jsx44(DynamicAlert_default, { component: promotedAlert }),
-    /* @__PURE__ */ jsx44(
+    promotedAlert && /* @__PURE__ */ jsx45(DynamicAlert_default, { component: promotedAlert }),
+    /* @__PURE__ */ jsx45(
       PromotedOneOfControl_default,
       {
         id: props.schema.$id,
@@ -15860,8 +15867,8 @@ var PromotedOneOfSchema = (props) => {
         setSelection
       }
     ),
-    selection === "promoted" && /* @__PURE__ */ jsx44(ObjectSchema_default, __spreadProps(__spreadValues({}, props), { schema: promotedObjectSchema })),
-    selection === "other" && /* @__PURE__ */ jsx44(GenericSchema_default, __spreadProps(__spreadValues({}, props), { schema: otherOneOf }))
+    selection === "promoted" && /* @__PURE__ */ jsx45(ObjectSchema_default, __spreadProps(__spreadValues({}, props), { schema: promotedObjectSchema })),
+    selection === "other" && /* @__PURE__ */ jsx45(GenericSchema_default, __spreadProps(__spreadValues({}, props), { schema: otherOneOf }))
   ] });
 };
 function getPromotedObjectSchema(promotedSchema) {
@@ -15910,12 +15917,12 @@ var ReadOnlySchema_messages_default = defineMessages11({
 });
 
 // src/legacy/jsonSchemaForm/readOnlySchema/ReadOnlySchema.tsx
-import { Fragment as Fragment11, jsx as jsx45, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx46, jsxs as jsxs16 } from "react/jsx-runtime";
 function ReadOnlySchema({ schema, model }) {
   const { title = "" } = schema;
   const { formatMessage } = useIntl12();
   const value = getValueForSchema({ schema, model, formatMessage });
-  return /* @__PURE__ */ jsx45(DefinitionList, { layout: Layout.VERTICAL_ONE_COLUMN, definitions: [{ title, value, key: "" }] });
+  return /* @__PURE__ */ jsx46(DefinitionList, { layout: Layout.VERTICAL_ONE_COLUMN, definitions: [{ title, value, key: "" }] });
 }
 var ReadOnlySchema_default = ReadOnlySchema;
 function getValueForSchema({
@@ -15957,7 +15964,7 @@ function getValueFromOption(option) {
 
 // src/legacy/jsonSchemaForm/validationAsyncSchema/ValidationAsyncSchema.tsx
 import { useEffect as useEffect10, useRef as useRef3, useState as useState14 } from "react";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 function ValidationAsyncSchema(props) {
   const { schema, model, required = false, submitted, errors, onChange } = props;
   const [validationAsyncModel, setValidationAsyncModel] = useState14(model);
@@ -16041,12 +16048,12 @@ function ValidationAsyncSchema(props) {
     required,
     schema
   };
-  return /* @__PURE__ */ jsx46(BasicTypeSchema_default, __spreadValues({}, basicTypeSchemaProps));
+  return /* @__PURE__ */ jsx47(BasicTypeSchema_default, __spreadValues({}, basicTypeSchemaProps));
 }
 var ValidationAsyncSchema_default = ValidationAsyncSchema;
 
 // src/legacy/jsonSchemaForm/genericSchema/GenericSchema.tsx
-import { Fragment as Fragment12, jsx as jsx47 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx48 } from "react/jsx-runtime";
 import { createElement } from "react";
 function GenericSchemaForm(props) {
   const { schema, model = null, errors = null, hideTitle = false, disabled = false } = props;
@@ -16063,29 +16070,29 @@ function GenericSchemaForm(props) {
   }, [JSON.stringify(schema), JSON.stringify(model), JSON.stringify(errors), type, log]);
   switch (type) {
     case "readOnly":
-      return /* @__PURE__ */ jsx47(ReadOnlySchema_default, __spreadValues({}, schemaProps));
+      return /* @__PURE__ */ jsx48(ReadOnlySchema_default, __spreadValues({}, schemaProps));
     case "persistAsync":
-      return /* @__PURE__ */ jsx47(PersistAsyncSchema_default, __spreadValues({}, schemaProps));
+      return /* @__PURE__ */ jsx48(PersistAsyncSchema_default, __spreadValues({}, schemaProps));
     case "validationAsync":
-      return /* @__PURE__ */ jsx47(ValidationAsyncSchema_default, __spreadValues({}, schemaProps));
+      return /* @__PURE__ */ jsx48(ValidationAsyncSchema_default, __spreadValues({}, schemaProps));
     case "basic": {
       const basicTypeProps = __spreadValues({
         infoMessage: null
       }, schemaProps);
-      return /* @__PURE__ */ jsx47(BasicTypeSchema_default, __spreadValues({}, basicTypeProps));
+      return /* @__PURE__ */ jsx48(BasicTypeSchema_default, __spreadValues({}, basicTypeProps));
     }
     case "object":
       return /* @__PURE__ */ createElement(ObjectSchema_default, __spreadProps(__spreadValues({}, schemaProps), { key: JSON.stringify(schema) }));
     case "array":
-      return /* @__PURE__ */ jsx47(ArraySchema_default, __spreadValues({}, schemaProps));
+      return /* @__PURE__ */ jsx48(ArraySchema_default, __spreadValues({}, schemaProps));
     case "promotedOneOf":
-      return /* @__PURE__ */ jsx47(PromotedOneOfSchema_default, __spreadValues({}, schemaProps));
+      return /* @__PURE__ */ jsx48(PromotedOneOfSchema_default, __spreadValues({}, schemaProps));
     case "oneOf":
-      return /* @__PURE__ */ jsx47(OneOfSchema_default, __spreadValues({}, schemaProps));
+      return /* @__PURE__ */ jsx48(OneOfSchema_default, __spreadValues({}, schemaProps));
     case "allOf":
-      return /* @__PURE__ */ jsx47(AllOfSchema_default, __spreadValues({}, schemaProps));
+      return /* @__PURE__ */ jsx48(AllOfSchema_default, __spreadValues({}, schemaProps));
   }
-  return /* @__PURE__ */ jsx47(Fragment12, {});
+  return /* @__PURE__ */ jsx48(Fragment12, {});
 }
 var GenericSchema_default = GenericSchemaForm;
 var isValidGenericSchema = (schema, model, errors) => {
@@ -16112,7 +16119,7 @@ var isValidGenericSchema = (schema, model, errors) => {
 };
 
 // src/legacy/layout/form/DynamicForm.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 function DynamicForm({
   component,
   model = null,
@@ -16122,7 +16129,7 @@ function DynamicForm({
   onPersistAsync
 }) {
   const formSchema = component.schema;
-  return /* @__PURE__ */ jsx48("div", { className: getMargin(component.margin || "md"), children: /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49("div", { className: getMargin(component.margin || "md"), children: /* @__PURE__ */ jsx49(
     GenericSchema_default,
     {
       schema: formSchema,
@@ -16141,57 +16148,57 @@ var DynamicForm_default = DynamicForm;
 // src/legacy/layout/heading/DynamicHeading.tsx
 var import_classnames8 = __toESM(require_classnames());
 import { Display } from "@transferwise/components";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var DynamicHeading = (props) => {
   const { text, size = "md", align = "left", margin = "md", control } = props.component;
   const classes = (0, import_classnames8.default)(getTextAlignmentAndMargin({ align, margin }));
-  return control === "display" ? /* @__PURE__ */ jsx49(DisplayHeading, { size, text, classes }) : /* @__PURE__ */ jsx49(StandardHeading, { size, text, classes });
+  return control === "display" ? /* @__PURE__ */ jsx50(DisplayHeading, { size, text, classes }) : /* @__PURE__ */ jsx50(StandardHeading, { size, text, classes });
 };
 var StandardHeading = ({ size, text, classes }) => {
   switch (size) {
     case "xs":
-      return /* @__PURE__ */ jsx49("h5", { className: classes, children: text });
+      return /* @__PURE__ */ jsx50("h5", { className: classes, children: text });
     case "sm":
-      return /* @__PURE__ */ jsx49("h4", { className: classes, children: text });
+      return /* @__PURE__ */ jsx50("h4", { className: classes, children: text });
     case "lg":
-      return /* @__PURE__ */ jsx49("h2", { className: classes, children: text });
+      return /* @__PURE__ */ jsx50("h2", { className: classes, children: text });
     case "xl":
-      return /* @__PURE__ */ jsx49("h1", { className: classes, children: text });
+      return /* @__PURE__ */ jsx50("h1", { className: classes, children: text });
     case "md":
     default:
-      return /* @__PURE__ */ jsx49("h3", { className: classes, children: text });
+      return /* @__PURE__ */ jsx50("h3", { className: classes, children: text });
   }
 };
 var DisplayHeading = ({ size, text, classes }) => {
   switch (size) {
     case "xs":
     case "sm":
-      return /* @__PURE__ */ jsx49(Display, { type: "display-small", className: classes, children: text });
+      return /* @__PURE__ */ jsx50(Display, { type: "display-small", className: classes, children: text });
     case "xl":
     case "lg":
-      return /* @__PURE__ */ jsx49(Display, { type: "display-large", className: classes, children: text });
+      return /* @__PURE__ */ jsx50(Display, { type: "display-large", className: classes, children: text });
     case "md":
     default:
-      return /* @__PURE__ */ jsx49(Display, { type: "display-medium", className: classes, children: text });
+      return /* @__PURE__ */ jsx50(Display, { type: "display-medium", className: classes, children: text });
   }
 };
 var DynamicHeading_default = DynamicHeading;
 
 // src/legacy/layout/markdown/DynamicMarkdown.tsx
 import { Markdown as Markdown2 } from "@transferwise/components";
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var DynamicMarkdown = ({ component }) => {
   const { content, align, margin } = component;
-  return /* @__PURE__ */ jsx50("div", { className: getTextAlignmentAndMargin({ align, margin }), children: /* @__PURE__ */ jsx50(Markdown2, { config: { link: { target: "_blank" } }, children: content }) });
+  return /* @__PURE__ */ jsx51("div", { className: getTextAlignmentAndMargin({ align, margin }), children: /* @__PURE__ */ jsx51(Markdown2, { config: { link: { target: "_blank" } }, children: content }) });
 };
 var DynamicInfo = ({ component }) => {
-  return /* @__PURE__ */ jsx50("div", { className: getTextAlignmentAndMargin(component), children: /* @__PURE__ */ jsx50(Markdown2, { config: { link: { target: "_blank" } }, children: component.markdown }) });
+  return /* @__PURE__ */ jsx51("div", { className: getTextAlignmentAndMargin(component), children: /* @__PURE__ */ jsx51(Markdown2, { config: { link: { target: "_blank" } }, children: component.markdown }) });
 };
 
 // src/legacy/layout/image/DynamicImage.tsx
 import { Image } from "@transferwise/components";
 import { useEffect as useEffect12, useState as useState15 } from "react";
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 function DynamicImage({ component: image }) {
   var _a, _b, _c;
   const { content, url, size, text, margin, accessibilityDescription } = image;
@@ -16222,7 +16229,7 @@ function DynamicImage({ component: image }) {
   if (!imageSource) {
     return null;
   }
-  return /* @__PURE__ */ jsx51("div", { className: `df-image ${size || "md"}`, children: /* @__PURE__ */ jsx51(Image, __spreadValues({ className: `img-responsive ${getMargin(margin || "md")}` }, imageProps)) });
+  return /* @__PURE__ */ jsx52("div", { className: `df-image ${size || "md"}`, children: /* @__PURE__ */ jsx52(Image, __spreadValues({ className: `img-responsive ${getMargin(margin || "md")}` }, imageProps)) });
 }
 var readImageBlobAsDataURL = (imageBlob) => (
   // we can safely assume the type of reader.result is string
@@ -16259,7 +16266,7 @@ var DynamicImage_default = DynamicImage;
 
 // src/legacy/layout/instructions/DynamicInstructions.tsx
 import { Header as Header6, InstructionsList } from "@transferwise/components";
-import { jsx as jsx52, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs17 } from "react/jsx-runtime";
 var doContext = ["positive", "neutral"];
 var dontContext = ["warning", "negative"];
 var DynamicInstructions = ({ component }) => {
@@ -16267,39 +16274,39 @@ var DynamicInstructions = ({ component }) => {
   const dos = items.filter((item) => doContext.includes(item.context)).map(({ text }) => text);
   const donts = items.filter((item) => dontContext.includes(item.context)).map(({ text }) => text);
   return /* @__PURE__ */ jsxs17("div", { className: getMargin(component.margin || "md"), children: [
-    component.title ? /* @__PURE__ */ jsx52(Header6, { title: component.title }) : null,
-    /* @__PURE__ */ jsx52(InstructionsList, { dos, donts })
+    component.title ? /* @__PURE__ */ jsx53(Header6, { title: component.title }) : null,
+    /* @__PURE__ */ jsx53(InstructionsList, { dos, donts })
   ] });
 };
 var DynamicInstructions_default = DynamicInstructions;
 
 // src/legacy/layout/DynamicLayout.tsx
-import { Fragment as Fragment13, jsx as jsx53 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx54 } from "react/jsx-runtime";
 var getKey = (component) => JSON.stringify(component);
 function DynamicLayout(props) {
   const { components, model, submitted, errors, onModelChange, onAction, onPersistAsync, baseUrl } = props;
   const renderComponent = (component) => {
     switch (component.type) {
       case "heading":
-        return /* @__PURE__ */ jsx53(DynamicHeading_default, { component }, getKey(component));
+        return /* @__PURE__ */ jsx54(DynamicHeading_default, { component }, getKey(component));
       case "paragraph":
-        return /* @__PURE__ */ jsx53(DynamicParagraph_default, { component }, getKey(component));
+        return /* @__PURE__ */ jsx54(DynamicParagraph_default, { component }, getKey(component));
       case "image":
-        return /* @__PURE__ */ jsx53(DynamicImage_default, { component }, getKey(component));
+        return /* @__PURE__ */ jsx54(DynamicImage_default, { component }, getKey(component));
       case "alert":
-        return /* @__PURE__ */ jsx53(DynamicAlert_default, { component, onAction }, getKey(component));
+        return /* @__PURE__ */ jsx54(DynamicAlert_default, { component, onAction }, getKey(component));
       case "review":
-        return /* @__PURE__ */ jsx53(DynamicReview_default, { component, onAction }, getKey(component));
+        return /* @__PURE__ */ jsx54(DynamicReview_default, { component, onAction }, getKey(component));
       case "divider":
-        return /* @__PURE__ */ jsx53(DynamicDivider_default, { component }, getKey(component));
+        return /* @__PURE__ */ jsx54(DynamicDivider_default, { component }, getKey(component));
       case "info":
-        return /* @__PURE__ */ jsx53(DynamicInfo, { component }, getKey(component));
+        return /* @__PURE__ */ jsx54(DynamicInfo, { component }, getKey(component));
       case "instructions":
-        return /* @__PURE__ */ jsx53(DynamicInstructions_default, { component }, getKey(component));
+        return /* @__PURE__ */ jsx54(DynamicInstructions_default, { component }, getKey(component));
       case "markdown":
-        return /* @__PURE__ */ jsx53(DynamicMarkdown, { component }, getKey(component));
+        return /* @__PURE__ */ jsx54(DynamicMarkdown, { component }, getKey(component));
       case "columns":
-        return /* @__PURE__ */ jsx53(
+        return /* @__PURE__ */ jsx54(
           DynamicColumns_default,
           {
             component,
@@ -16313,7 +16320,7 @@ function DynamicLayout(props) {
           getKey(component)
         );
       case "form":
-        return /* @__PURE__ */ jsx53(
+        return /* @__PURE__ */ jsx54(
           DynamicForm_default,
           {
             component,
@@ -16326,9 +16333,9 @@ function DynamicLayout(props) {
           getKey(__spreadProps(__spreadValues({}, component), { errors: errors != null ? errors : null }))
         );
       case "button":
-        return /* @__PURE__ */ jsx53(DynamicButton_default, { component, onAction }, getKey(component));
+        return /* @__PURE__ */ jsx54(DynamicButton_default, { component, onAction }, getKey(component));
       case "box":
-        return /* @__PURE__ */ jsx53(
+        return /* @__PURE__ */ jsx54(
           DynamicBox_default,
           {
             component,
@@ -16342,18 +16349,18 @@ function DynamicLayout(props) {
           getKey(component)
         );
       case "decision":
-        return /* @__PURE__ */ jsx53(DynamicDecision_default, { component, onAction }, getKey(component));
+        return /* @__PURE__ */ jsx54(DynamicDecision_default, { component, onAction }, getKey(component));
       case "external":
-        return /* @__PURE__ */ jsx53(DynamicExternal_default, { component, onAction }, getKey(component));
+        return /* @__PURE__ */ jsx54(DynamicExternal_default, { component, onAction }, getKey(component));
       case "list":
       case "status-list":
-        return /* @__PURE__ */ jsx53(DynamicStatusList_default, { component, onAction }, getKey(component));
+        return /* @__PURE__ */ jsx54(DynamicStatusList_default, { component, onAction }, getKey(component));
       case "loading-indicator":
-        return /* @__PURE__ */ jsx53(DynamicLoadingIndicator_default, { component }, getKey(component));
+        return /* @__PURE__ */ jsx54(DynamicLoadingIndicator_default, { component }, getKey(component));
       case "search":
-        return /* @__PURE__ */ jsx53(DynamicSearch_default, { component, onAction }, getKey(component));
+        return /* @__PURE__ */ jsx54(DynamicSearch_default, { component, onAction }, getKey(component));
       case "modal":
-        return /* @__PURE__ */ jsx53(
+        return /* @__PURE__ */ jsx54(
           DynamicModal_default,
           {
             component,
@@ -16367,22 +16374,22 @@ function DynamicLayout(props) {
           getKey(component)
         );
       default:
-        return /* @__PURE__ */ jsx53("div", {}, getKey(component));
+        return /* @__PURE__ */ jsx54("div", {}, getKey(component));
     }
   };
   if (useHasHttpClientProvider() || baseUrl == null) {
-    return /* @__PURE__ */ jsx53(Fragment13, { children: components.map(renderComponent) });
+    return /* @__PURE__ */ jsx54(Fragment13, { children: components.map(renderComponent) });
   }
-  return /* @__PURE__ */ jsx53(HttpClientProviderFromBaseUrl, { baseUrl, children: components.map(renderComponent) });
+  return /* @__PURE__ */ jsx54(HttpClientProviderFromBaseUrl, { baseUrl, children: components.map(renderComponent) });
 }
 var DynamicLayout_default = DynamicLayout;
 
 // src/legacy/layout/list/DynamicStatusList.tsx
 import { Header as Header7, Summary } from "@transferwise/components";
-import { jsx as jsx54, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs18 } from "react/jsx-runtime";
 var DynamicStatusList = ({ component, onAction }) => {
   return /* @__PURE__ */ jsxs18("div", { className: getMargin(component.margin || "md"), children: [
-    component.title ? /* @__PURE__ */ jsx54(Header7, { title: component.title, className: "m-b-2" }) : null,
+    component.title ? /* @__PURE__ */ jsx55(Header7, { title: component.title, className: "m-b-2" }) : null,
     component.items.map((item) => mapListItemToSummary(item, onAction))
   ] });
 };
@@ -16392,8 +16399,8 @@ var mapListItemToSummary = (props, onAction) => {
     title,
     description,
     action: "callToAction" in props ? callToActionToSummaryAction(props == null ? void 0 : props.callToAction, onAction) : void 0
-  }, (icon == null ? void 0 : icon.name) ? { icon: /* @__PURE__ */ jsx54(DynamicIcon_default, { type: icon.name }) } : {}), status ? { status: statusMap[status] } : {});
-  return /* @__PURE__ */ jsx54(Summary, __spreadValues({}, summaryProps), `${title}/${description || ""}`);
+  }, (icon == null ? void 0 : icon.name) ? { icon: /* @__PURE__ */ jsx55(DynamicIcon_default, { type: icon.name }) } : {}), status ? { status: statusMap[status] } : {});
+  return /* @__PURE__ */ jsx55(Summary, __spreadValues({}, summaryProps), `${title}/${description || ""}`);
 };
 var callToActionToSummaryAction = (callToAction, onAction) => {
   if (!callToAction) {
@@ -16463,10 +16470,10 @@ var DynamicStatusList_default = DynamicStatusList;
 
 // src/legacy/layout/loadingIndicator/DynamicLoadingIndicator.tsx
 import { Loader as Loader2 } from "@transferwise/components";
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var DynamicLoadingIndicator = ({ component }) => {
   const { margin = "md", size = "md" } = component;
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx56(
     Loader2,
     {
       size,
@@ -16500,21 +16507,21 @@ var paragraph_messages_default = defineMessages12({
 
 // src/legacy/layout/paragraph/useSnackBarIfAvailable.ts
 import { SnackbarContext } from "@transferwise/components";
-import { useContext as useContext5 } from "react";
+import { useContext as useContext6 } from "react";
 function useSnackBarIfAvailable() {
-  const context = useContext5(SnackbarContext);
+  const context = useContext6(SnackbarContext);
   return context ? context.createSnackbar : noop3;
 }
 function noop3() {
 }
 
 // src/legacy/layout/paragraph/DynamicParagraph.tsx
-import { jsx as jsx56, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs19 } from "react/jsx-runtime";
 function DynamicParagraph({ component }) {
-  return component.control === "copyable" ? /* @__PURE__ */ jsx56(CopyableDynamicParagraph, { component }) : /* @__PURE__ */ jsx56(BasicDynamicParagraph, { component });
+  return component.control === "copyable" ? /* @__PURE__ */ jsx57(CopyableDynamicParagraph, { component }) : /* @__PURE__ */ jsx57(BasicDynamicParagraph, { component });
 }
 function BasicDynamicParagraph({ component }) {
-  return /* @__PURE__ */ jsx56("p", { className: `np-text-body-large ${getTextAlignmentAndMargin(component)}`, children: component.text });
+  return /* @__PURE__ */ jsx57("p", { className: `np-text-body-large ${getTextAlignmentAndMargin(component)}`, children: component.text });
 }
 function CopyableDynamicParagraph({ component }) {
   const { formatMessage } = useIntl13();
@@ -16529,7 +16536,7 @@ function CopyableDynamicParagraph({ component }) {
     margin: "sm"
   })} form-control`;
   return /* @__PURE__ */ jsxs19("div", { className: getTextAlignmentAndMargin(component), children: [
-    /* @__PURE__ */ jsx56(
+    /* @__PURE__ */ jsx57(
       "input",
       {
         type: "text",
@@ -16539,7 +16546,7 @@ function CopyableDynamicParagraph({ component }) {
         style: { textOverflow: "ellipsis" }
       }
     ),
-    /* @__PURE__ */ jsx56(Button3, { block: true, onClick: copy, children: formatMessage(paragraph_messages_default.copy) })
+    /* @__PURE__ */ jsx57(Button3, { block: true, onClick: copy, children: formatMessage(paragraph_messages_default.copy) })
   ] });
 }
 function noop4() {
@@ -16548,7 +16555,7 @@ var DynamicParagraph_default = DynamicParagraph;
 
 // src/legacy/layout/review/DynamicReview.tsx
 import { DefinitionList as DefinitionList2, Header as Header8 } from "@transferwise/components";
-import { Fragment as Fragment14, jsx as jsx57, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx58, jsxs as jsxs20 } from "react/jsx-runtime";
 var getDefinitions = (orientation, review) => review.fields.map(({ label, value, help }, index) => ({
   key: String(index),
   title: label,
@@ -16557,13 +16564,13 @@ var getDefinitions = (orientation, review) => review.fields.map(({ label, value,
 var getFieldValue = (value, help, orientation) => {
   if (help) {
     return orientation === "HORIZONTAL_RIGHT_ALIGNED" ? /* @__PURE__ */ jsxs20(Fragment14, { children: [
-      /* @__PURE__ */ jsx57(Help_default, { help }),
+      /* @__PURE__ */ jsx58(Help_default, { help }),
       " ",
       value
     ] }) : /* @__PURE__ */ jsxs20(Fragment14, { children: [
       value,
       " ",
-      /* @__PURE__ */ jsx57(Help_default, { help })
+      /* @__PURE__ */ jsx58(Help_default, { help })
     ] });
   }
   return value;
@@ -16638,8 +16645,8 @@ function DynamicReview({ component: review, onAction }) {
   const callToAction = review.callToAction ? getReviewAction2(review.callToAction) : null;
   const legacyCallToAction = !callToAction && review.action ? { text: (_a = review.action.title) != null ? _a : "", onClick: getOnClick2(review.action) } : null;
   return /* @__PURE__ */ jsxs20("div", { className: margin, children: [
-    review.title && /* @__PURE__ */ jsx57(Header8, { title: review.title, action: (_b = callToAction != null ? callToAction : legacyCallToAction) != null ? _b : void 0 }),
-    /* @__PURE__ */ jsx57("div", { className: margin, children: /* @__PURE__ */ jsx57(DefinitionList2, { layout: orientation, definitions: getDefinitions(orientation, review) }) })
+    review.title && /* @__PURE__ */ jsx58(Header8, { title: review.title, action: (_b = callToAction != null ? callToAction : legacyCallToAction) != null ? _b : void 0 }),
+    /* @__PURE__ */ jsx58("div", { className: margin, children: /* @__PURE__ */ jsx58(DefinitionList2, { layout: orientation, definitions: getDefinitions(orientation, review) }) })
   ] });
 }
 var DynamicReview_default = DynamicReview;
@@ -16650,11 +16657,11 @@ import { Search } from "@transferwise/icons";
 
 // src/legacy/layout/search/SearchInput.tsx
 import { Input } from "@transferwise/components";
-import { jsx as jsx58, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs21 } from "react/jsx-runtime";
 var SearchInput = ({ title, value, onFocus, onChange }) => {
   return /* @__PURE__ */ jsxs21("label", { className: "control-label d-inline", children: [
     title,
-    /* @__PURE__ */ jsx58(
+    /* @__PURE__ */ jsx59(
       Input,
       {
         type: "text",
@@ -16670,12 +16677,12 @@ var SearchInput = ({ title, value, onFocus, onChange }) => {
 // src/legacy/layout/search/SearchResults.tsx
 import { NavigationOption as NavigationOption4, NavigationOptionsList as NavigationOptionsList2 } from "@transferwise/components";
 import { useIntl as useIntl14 } from "react-intl";
-import { jsx as jsx59, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs22 } from "react/jsx-runtime";
 function SearchResults({ results, emptyMessage, onSelect }) {
   if (results.length === 0) {
-    return /* @__PURE__ */ jsx59("p", { className: "m-t-2", children: emptyMessage });
+    return /* @__PURE__ */ jsx60("p", { className: "m-t-2", children: emptyMessage });
   }
-  return /* @__PURE__ */ jsx59(NavigationOptionsList2, { children: results.map((result) => /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60(NavigationOptionsList2, { children: results.map((result) => /* @__PURE__ */ jsx60(
     NavigationOption4,
     {
       title: result.title,
@@ -16693,7 +16700,7 @@ function ErrorResult({ onRetrySearch }) {
   return /* @__PURE__ */ jsxs22("p", { className: "m-t-2", children: [
     intl.formatMessage(generic_error_messages_default.genericError),
     "\xA0",
-    /* @__PURE__ */ jsx59(
+    /* @__PURE__ */ jsx60(
       "a",
       {
         href: "/",
@@ -16792,7 +16799,7 @@ var search_messages_default = defineMessages13({
 });
 
 // src/legacy/layout/search/DynamicSearch.tsx
-import { jsx as jsx60, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs23 } from "react/jsx-runtime";
 var DEBOUNCE_TIME2 = 400;
 function DynamicSearch({ component, onAction }) {
   const [query, setQuery] = useState17("");
@@ -16830,9 +16837,9 @@ function DynamicSearch({ component, onAction }) {
   };
   const loadingMessage = intl.formatMessage(search_messages_default.loading);
   if (control === "inline") {
-    return /* @__PURE__ */ jsx60("div", { className: (0, import_classnames9.default)(getMargin(margin != null ? margin : "md"), "df-search-typeahead"), children: /* @__PURE__ */ jsxs23("label", { className: "control-label d-inline", children: [
+    return /* @__PURE__ */ jsx61("div", { className: (0, import_classnames9.default)(getMargin(margin != null ? margin : "md"), "df-search-typeahead"), children: /* @__PURE__ */ jsxs23("label", { className: "control-label d-inline", children: [
       title,
-      /* @__PURE__ */ jsx60("div", { className: "m-t-1", children: /* @__PURE__ */ jsx60(
+      /* @__PURE__ */ jsx61("div", { className: "m-t-1", children: /* @__PURE__ */ jsx61(
         Typeahead,
         {
           id: "typeahead-input-id",
@@ -16840,7 +16847,7 @@ function DynamicSearch({ component, onAction }) {
           name: "typeahead-input-name",
           size: "md",
           maxHeight: 100,
-          footer: /* @__PURE__ */ jsx60(
+          footer: /* @__PURE__ */ jsx61(
             TypeaheadFooter,
             {
               state: status,
@@ -16852,7 +16859,7 @@ function DynamicSearch({ component, onAction }) {
           ),
           multiple: false,
           clearable: false,
-          addon: /* @__PURE__ */ jsx60(Search, { size: 24 }),
+          addon: /* @__PURE__ */ jsx61(Search, { size: 24 }),
           options: results.map(mapResultToTypeaheadOption),
           onChange: (values) => {
             if (values.length > 0) {
@@ -16868,10 +16875,10 @@ function DynamicSearch({ component, onAction }) {
     ] }) });
   }
   return /* @__PURE__ */ jsxs23("div", { className: getMargin(margin != null ? margin : "md"), children: [
-    /* @__PURE__ */ jsx60(SearchInput, { title, value: query, onChange, onFocus: onSearchStart }),
-    status === "loading" && /* @__PURE__ */ jsx60(DynamicLoadingIndicator_default, { component: { type: "loading-indicator", size: "sm" } }),
-    status === "error" && /* @__PURE__ */ jsx60(ErrorResult, { onRetrySearch }),
-    status === "success" && /* @__PURE__ */ jsx60(SearchResults, { results, emptyMessage, onSelect: onResultSelected })
+    /* @__PURE__ */ jsx61(SearchInput, { title, value: query, onChange, onFocus: onSearchStart }),
+    status === "loading" && /* @__PURE__ */ jsx61(DynamicLoadingIndicator_default, { component: { type: "loading-indicator", size: "sm" } }),
+    status === "error" && /* @__PURE__ */ jsx61(ErrorResult, { onRetrySearch }),
+    status === "success" && /* @__PURE__ */ jsx61(SearchResults, { results, emptyMessage, onSelect: onResultSelected })
   ] });
 }
 function mapResultToTypeaheadOption(result) {
@@ -16891,13 +16898,13 @@ function TypeaheadFooter({
   onRetrySearch
 }) {
   if (state === "success" && results.length === 0) {
-    return /* @__PURE__ */ jsx60(Markdown3, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: emptyMessage });
+    return /* @__PURE__ */ jsx61(Markdown3, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: emptyMessage });
   }
   if (state === "error" && results.length === 0) {
-    return /* @__PURE__ */ jsx60("div", { className: "m-t-2 m-x-2", children: /* @__PURE__ */ jsx60(ErrorResult, { onRetrySearch }) });
+    return /* @__PURE__ */ jsx61("div", { className: "m-t-2 m-x-2", children: /* @__PURE__ */ jsx61(ErrorResult, { onRetrySearch }) });
   }
   if (state === "loading" || results.length === 0) {
-    return /* @__PURE__ */ jsx60("p", { className: "m-t-2 m-x-2", children: loadingMessage });
+    return /* @__PURE__ */ jsx61("p", { className: "m-t-2 m-x-2", children: loadingMessage });
   }
   return null;
 }
@@ -16906,21 +16913,21 @@ var DynamicSearch_default = DynamicSearch;
 // src/legacy/layout/modal/DynamicModal.tsx
 import { Button as Button4, Modal as Modal2 } from "@transferwise/components";
 import { useState as useState18 } from "react";
-import { jsx as jsx61, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs24 } from "react/jsx-runtime";
 function DynamicModal(props) {
   const [visible, isVisible] = useState18(false);
   const { component, onAction } = props;
   const { margin = "md" } = component;
   return /* @__PURE__ */ jsxs24("div", { className: getTextAlignmentAndMargin({ margin }), children: [
-    /* @__PURE__ */ jsx61(Button4, { priority: "tertiary", block: true, onClick: () => isVisible(true), children: component.trigger.title }),
-    /* @__PURE__ */ jsx61(
+    /* @__PURE__ */ jsx62(Button4, { priority: "tertiary", block: true, onClick: () => isVisible(true), children: component.trigger.title }),
+    /* @__PURE__ */ jsx62(
       Modal2,
       {
         scroll: "content",
         open: visible,
         size: "lg",
         title: component.content.title,
-        body: /* @__PURE__ */ jsx61(
+        body: /* @__PURE__ */ jsx62(
           DynamicLayout_default,
           __spreadProps(__spreadValues({}, props), {
             components: component.content.components,
@@ -16938,7 +16945,7 @@ function DynamicModal(props) {
 var DynamicModal_default = DynamicModal;
 
 // src/legacy/jsonSchemaForm/basicTypeSchema/BasicTypeSchema.tsx
-import { Fragment as Fragment15, jsx as jsx62, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx63, jsxs as jsxs25 } from "react/jsx-runtime";
 var isNullish2 = (value) => isNull2(value) || isUndefined2(value);
 var getDefaultValue = (schema) => {
   return schema.type === "boolean" && isNullish2(schema.default) ? false : schema.default;
@@ -17017,14 +17024,14 @@ var BasicTypeSchema = (props) => {
   const feedbackId = `${id}-feedback`;
   const labelId = `${id}-label`;
   return !isHidden ? /* @__PURE__ */ jsxs25(Fragment15, { children: [
-    props.schema.alert && /* @__PURE__ */ jsx62(DynamicAlert_default, { component: props.schema.alert }),
+    props.schema.alert && /* @__PURE__ */ jsx63(DynamicAlert_default, { component: props.schema.alert }),
     /* @__PURE__ */ jsxs25("div", { className: (0, import_classnames10.default)(formGroupClasses), children: [
       showLabel && /* @__PURE__ */ jsxs25("div", { className: "d-inline-block m-b-1", children: [
-        /* @__PURE__ */ jsx62("label", { className: "control-label d-inline", htmlFor: id, id: labelId, children: props.schema.title }),
-        !!schemaHelp && /* @__PURE__ */ jsx62(Help_default, { help: schemaHelp })
+        /* @__PURE__ */ jsx63("label", { className: "control-label d-inline", htmlFor: id, id: labelId, children: props.schema.title }),
+        !!schemaHelp && /* @__PURE__ */ jsx63(Help_default, { help: schemaHelp })
       ] }),
-      !showLabel && !!schemaHelp && /* @__PURE__ */ jsx62(Help_default, { help: schemaHelp }),
-      /* @__PURE__ */ jsx62(
+      !showLabel && !!schemaHelp && /* @__PURE__ */ jsx63(Help_default, { help: schemaHelp }),
+      /* @__PURE__ */ jsx63(
         SchemaFormControl_default,
         {
           id,
@@ -17038,7 +17045,7 @@ var BasicTypeSchema = (props) => {
           labelledBy: labelId
         }
       ),
-      /* @__PURE__ */ jsx62(
+      /* @__PURE__ */ jsx63(
         ControlFeedback_default,
         {
           id: feedbackId,
@@ -17058,7 +17065,7 @@ var BasicTypeSchema = (props) => {
 var BasicTypeSchema_default = BasicTypeSchema;
 
 // src/legacy/jsonSchemaForm/persistAsyncSchema/persistAsyncBasicSchema/PersistAsyncBasicSchema.tsx
-import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
 var getIdFromResponse = (idProperty, response) => response[idProperty];
 var getErrorFromResponse = (errorProperty, response) => {
   var _a;
@@ -17148,7 +17155,7 @@ function PersistAsyncBasicSchema(props) {
       setPersistAsyncModel(newPersistAsyncModel);
     }
   };
-  return /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx64(
     BasicTypeSchema_default,
     {
       required,
@@ -17362,7 +17369,7 @@ function useStepPolling(polling, onAction) {
 }
 
 // src/legacy/step/layoutStep/LayoutStep.tsx
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 var getComponents = (step, options) => {
   var _a;
   if (isEmpty(step)) {
@@ -17385,7 +17392,7 @@ var LayoutStep = (props) => {
     onEvent("Dynamic Flow - onAction supressed", { reason: "LayoutStep - loading state" });
   };
   useStepPolling(stepSpecification.polling, onAction);
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx65(
     DynamicLayout_default,
     {
       components,
@@ -17471,15 +17478,15 @@ var CameraCapture_messages_default = defineMessages14({
 // src/common/cameraCapture/components/bottomBar/BottomBar.tsx
 import { Button as Button5, ControlType, Priority, Size as Size3 } from "@transferwise/components";
 import { useIntl as useIntl18 } from "react-intl";
-import { jsx as jsx65, jsxs as jsxs26 } from "react/jsx-runtime";
-var CaptureBottomBar = ({ onCapture }) => /* @__PURE__ */ jsx65("div", { className: "bottom-bar", children: /* @__PURE__ */ jsx65(CaptureButton, { onClick: onCapture }) });
+import { jsx as jsx66, jsxs as jsxs26 } from "react/jsx-runtime";
+var CaptureBottomBar = ({ onCapture }) => /* @__PURE__ */ jsx66("div", { className: "bottom-bar", children: /* @__PURE__ */ jsx66(CaptureButton, { onClick: onCapture }) });
 var ReviewBottomBar = ({
   onSubmit,
   onRetry
 }) => {
   const intl = useIntl18();
-  return /* @__PURE__ */ jsx65("div", { className: "bottom-bar p-x-2", children: /* @__PURE__ */ jsx65("div", { className: "row", children: /* @__PURE__ */ jsxs26("div", { className: "col-xs-12 col-md-6 col-md-offset-3", children: [
-    /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx66("div", { className: "bottom-bar p-x-2", children: /* @__PURE__ */ jsx66("div", { className: "row", children: /* @__PURE__ */ jsxs26("div", { className: "col-xs-12 col-md-6 col-md-offset-3", children: [
+    /* @__PURE__ */ jsx66(
       Button5,
       {
         className: "m-b-1",
@@ -17490,7 +17497,7 @@ var ReviewBottomBar = ({
         children: intl.formatMessage(CameraCapture_messages_default.reviewSubmit)
       }
     ),
-    /* @__PURE__ */ jsx65(
+    /* @__PURE__ */ jsx66(
       Button5,
       {
         className: "m-b-2",
@@ -17504,14 +17511,14 @@ var ReviewBottomBar = ({
     )
   ] }) }) });
 };
-var CaptureButton = ({ onClick }) => /* @__PURE__ */ jsx65(
+var CaptureButton = ({ onClick }) => /* @__PURE__ */ jsx66(
   "button",
   {
     type: "button",
     className: "camera-capture-btn m-b-2",
     "data-testid": "camera-capture-button",
     onClick,
-    children: /* @__PURE__ */ jsx65("span", { className: "camera-capture-btn-inner" })
+    children: /* @__PURE__ */ jsx66("span", { className: "camera-capture-btn-inner" })
   }
 );
 
@@ -17529,11 +17536,11 @@ var OrientationLockOverlay_messages_default = defineMessages15({
 });
 
 // src/common/cameraCapture/components/orientationLockOverlay/OrientationLockOverlay.tsx
-import { jsx as jsx66, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs27 } from "react/jsx-runtime";
 function OrientationLockOverlay() {
   const intl = useIntl19();
   return /* @__PURE__ */ jsxs27("div", { className: "orientation-lock-overlay", children: [
-    /* @__PURE__ */ jsx66(
+    /* @__PURE__ */ jsx67(
       "img",
       {
         className: "m-b-3",
@@ -17543,7 +17550,7 @@ function OrientationLockOverlay() {
         alt: ""
       }
     ),
-    /* @__PURE__ */ jsx66("p", { className: "text-center m-b-0", children: intl.formatMessage(OrientationLockOverlay_messages_default.text) })
+    /* @__PURE__ */ jsx67("p", { className: "text-center m-b-0", children: intl.formatMessage(OrientationLockOverlay_messages_default.text) })
   ] });
 }
 var OrientationLockOverlay_default = OrientationLockOverlay;
@@ -17718,7 +17725,7 @@ var getVideoConstraints = async (dir) => {
 
 // src/common/cameraCapture/overlay/Overlay.tsx
 import { useEffect as useEffect19, useRef as useRef7 } from "react";
-import { Fragment as Fragment16, jsx as jsx67, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx68, jsxs as jsxs28 } from "react/jsx-runtime";
 var captureButtonHeight = 92;
 var reviewButtonsHeight = 120;
 var imageHeight = 40;
@@ -17741,17 +17748,17 @@ function Overlay({ overlay, outline, imageUrl, title, instructions, reviewInstru
   });
   let helperBoxHeight = (imageUrl ? imageHeight : 0) + (title ? titleHeight : 0) + (instructions ? instructionsHeight : 0);
   let helperBox = /* @__PURE__ */ jsxs28(Fragment16, { children: [
-    imageUrl && /* @__PURE__ */ jsx67("img", { className: "camera-capture-img", src: imageUrl, alt: "" }),
-    title && /* @__PURE__ */ jsx67("h4", { className: "camera-capture-title", children: title }),
-    instructions && /* @__PURE__ */ jsx67("small", { className: "camera-capture-instructions", children: instructions })
+    imageUrl && /* @__PURE__ */ jsx68("img", { className: "camera-capture-img", src: imageUrl, alt: "" }),
+    title && /* @__PURE__ */ jsx68("h4", { className: "camera-capture-title", children: title }),
+    instructions && /* @__PURE__ */ jsx68("small", { className: "camera-capture-instructions", children: instructions })
   ] });
   const frameBottomMargin = captureButtonHeight + helperBoxHeight;
   if (reviewInstructions) {
     helperBoxHeight = frameBottomMargin - reviewButtonsHeight;
-    helperBox = /* @__PURE__ */ jsx67("small", { className: "camera-capture-instructions", children: reviewInstructions });
+    helperBox = /* @__PURE__ */ jsx68("small", { className: "camera-capture-instructions", children: reviewInstructions });
     const frameWithReviewInstructionsMinBottomMargin = reviewButtonsHeight + reviewInstructionsHeight;
     if (frameBottomMargin < frameWithReviewInstructionsMinBottomMargin) {
-      helperBox = /* @__PURE__ */ jsx67(Fragment16, {});
+      helperBox = /* @__PURE__ */ jsx68(Fragment16, {});
     }
   }
   const framePosition = {
@@ -17770,31 +17777,31 @@ function Overlay({ overlay, outline, imageUrl, title, instructions, reviewInstru
     }
   };
   return /* @__PURE__ */ jsxs28("svg", { ref: svgReference, xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ jsx67("defs", { children: /* @__PURE__ */ jsxs28("mask", { id: "mask", children: [
-      /* @__PURE__ */ jsx67("rect", { width: "100%", height: "100%", fill: "#fff" }),
-      /* @__PURE__ */ jsx67("image", __spreadValues({ href: overlay }, framePosition))
+    /* @__PURE__ */ jsx68("defs", { children: /* @__PURE__ */ jsxs28("mask", { id: "mask", children: [
+      /* @__PURE__ */ jsx68("rect", { width: "100%", height: "100%", fill: "#fff" }),
+      /* @__PURE__ */ jsx68("image", __spreadValues({ href: overlay }, framePosition))
     ] }) }),
-    overlay && /* @__PURE__ */ jsx67("rect", { width: "100%", height: "100%", mask: "url(#mask)", fillOpacity: "0.72" }),
-    outline && /* @__PURE__ */ jsx67("image", __spreadValues({ href: outline }, framePosition)),
-    /* @__PURE__ */ jsx67("foreignObject", { width: "100%", height: "100%", children: /* @__PURE__ */ jsx67("div", __spreadProps(__spreadValues({ className: "camera-capture-text-and-image-container" }, helperBoxPosition), { children: helperBox })) })
+    overlay && /* @__PURE__ */ jsx68("rect", { width: "100%", height: "100%", mask: "url(#mask)", fillOpacity: "0.72" }),
+    outline && /* @__PURE__ */ jsx68("image", __spreadValues({ href: outline }, framePosition)),
+    /* @__PURE__ */ jsx68("foreignObject", { width: "100%", height: "100%", children: /* @__PURE__ */ jsx68("div", __spreadProps(__spreadValues({ className: "camera-capture-text-and-image-container" }, helperBoxPosition), { children: helperBox })) })
   ] });
 }
 var Overlay_default = Overlay;
 
 // src/common/cameraCapture/screens/cameraErrorScreen/CameraErrorScreen.tsx
 import { Button as Button6 } from "@transferwise/components";
-import { jsx as jsx68, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs29 } from "react/jsx-runtime";
 function CameraErrorScreen({ title, description, actionButton, onAction }) {
-  return /* @__PURE__ */ jsx68("div", { className: "container p-t-5", children: /* @__PURE__ */ jsx68("div", { className: "row", children: /* @__PURE__ */ jsxs29("div", { className: "col-md-6 col-md-offset-3", children: [
-    /* @__PURE__ */ jsx68("h2", { className: "text-xs-center m-b-3", children: title }),
-    /* @__PURE__ */ jsx68("p", { className: "text-xs-center m-b-5", children: description }),
-    onAction && actionButton && /* @__PURE__ */ jsx68(Button6, { block: true, onClick: onAction, children: actionButton })
+  return /* @__PURE__ */ jsx69("div", { className: "container p-t-5", children: /* @__PURE__ */ jsx69("div", { className: "row", children: /* @__PURE__ */ jsxs29("div", { className: "col-md-6 col-md-offset-3", children: [
+    /* @__PURE__ */ jsx69("h2", { className: "text-xs-center m-b-3", children: title }),
+    /* @__PURE__ */ jsx69("p", { className: "text-xs-center m-b-5", children: description }),
+    onAction && actionButton && /* @__PURE__ */ jsx69(Button6, { block: true, onClick: onAction, children: actionButton })
   ] }) }) });
 }
 var CameraErrorScreen_default = CameraErrorScreen;
 
 // src/common/cameraCapture/CameraCapture.tsx
-import { jsx as jsx69, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs30 } from "react/jsx-runtime";
 function CameraCapture({
   direction = "back",
   overlay = "",
@@ -17903,7 +17910,7 @@ function CameraCapture({
     }
   }, [mode, exitFullScreen]);
   const captureScreen = /* @__PURE__ */ jsxs30("div", { className: "camera-capture", children: [
-    videoConstraints && /* @__PURE__ */ jsx69(
+    videoConstraints && /* @__PURE__ */ jsx70(
       Webcam,
       {
         ref: webcamReference,
@@ -17914,7 +17921,7 @@ function CameraCapture({
         onUserMedia: handleUserMedia
       }
     ),
-    /* @__PURE__ */ jsx69(
+    /* @__PURE__ */ jsx70(
       Overlay_default,
       {
         overlay,
@@ -17924,8 +17931,8 @@ function CameraCapture({
         instructions
       }
     ),
-    shouldLockOrientation && /* @__PURE__ */ jsx69(OrientationLockOverlay_default, {}),
-    ready && /* @__PURE__ */ jsx69(
+    shouldLockOrientation && /* @__PURE__ */ jsx70(OrientationLockOverlay_default, {}),
+    ready && /* @__PURE__ */ jsx70(
       CaptureBottomBar,
       {
         onCapture: () => {
@@ -17935,8 +17942,8 @@ function CameraCapture({
     )
   ] });
   const reviewScreen = /* @__PURE__ */ jsxs30("div", { className: "camera-capture", children: [
-    /* @__PURE__ */ jsx69("img", { className: "review-image", src: reviewImage == null ? void 0 : reviewImage.source, alt: "" }),
-    /* @__PURE__ */ jsx69(
+    /* @__PURE__ */ jsx70("img", { className: "review-image", src: reviewImage == null ? void 0 : reviewImage.source, alt: "" }),
+    /* @__PURE__ */ jsx70(
       Overlay_default,
       {
         overlay,
@@ -17946,18 +17953,18 @@ function CameraCapture({
         reviewInstructions: intl.formatMessage(CameraCapture_messages_default.reviewInstructions)
       }
     ),
-    /* @__PURE__ */ jsx69(ReviewBottomBar, { onSubmit: handleReviewSubmit, onRetry: handleReviewRetry })
+    /* @__PURE__ */ jsx70(ReviewBottomBar, { onSubmit: handleReviewSubmit, onRetry: handleReviewRetry })
   ] });
   return /* @__PURE__ */ jsxs30("section", { children: [
     mode === "CAPTURE" /* CAPTURE */ && captureScreen,
     mode === "REVIEW" /* REVIEW */ && reviewScreen,
-    mode === "ERROR" /* ERROR */ && cameraError && /* @__PURE__ */ jsx69(CameraErrorScreen_default, __spreadValues({}, cameraError))
+    mode === "ERROR" /* ERROR */ && cameraError && /* @__PURE__ */ jsx70(CameraErrorScreen_default, __spreadValues({}, cameraError))
   ] });
 }
 var CameraCapture_default = CameraCapture;
 
 // src/legacy/step/cameraStep/CameraStep.tsx
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx71 } from "react/jsx-runtime";
 function blobToBase64(blob) {
   return new Promise((resolve, _) => {
     const reader = new FileReader();
@@ -17995,7 +18002,7 @@ function CameraStep(props) {
       });
     }
   };
-  return /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsx71(
     CameraCapture_default,
     {
       overlay,
@@ -18072,12 +18079,12 @@ var external_confirmation_messages_default = defineMessages16({
 });
 
 // src/legacy/step/externalConfirmationStep/ExternalConfirmationStep.tsx
-import { jsx as jsx71 } from "react/jsx-runtime";
+import { jsx as jsx72 } from "react/jsx-runtime";
 var noop6 = () => {
 };
 function ExternalConfirmationStep({ url, onClose }) {
   const { formatMessage } = useIntl21();
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx72(
     DynamicLayout_default,
     {
       components: [
@@ -18144,9 +18151,9 @@ function getOrigin(url) {
 // src/legacy/dynamicFlow/BackButton.tsx
 import { Avatar as Avatar3 } from "@transferwise/components";
 import { ArrowLeft } from "@transferwise/icons";
-import { jsx as jsx72, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs31 } from "react/jsx-runtime";
 function BackButton({ title, action, onAction }) {
-  return /* @__PURE__ */ jsx72("div", { className: "m-b-2", children: /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsx73("div", { className: "m-b-2", children: /* @__PURE__ */ jsxs31(
     "a",
     {
       href: "/",
@@ -18157,8 +18164,8 @@ function BackButton({ title, action, onAction }) {
         onAction(__spreadProps(__spreadValues({}, action), { skipValidation: true }));
       },
       children: [
-        /* @__PURE__ */ jsx72("span", { className: "sr-only", children: title }),
-        /* @__PURE__ */ jsx72(Avatar3, { type: "icon", children: /* @__PURE__ */ jsx72(ArrowLeft, { size: "24" }) })
+        /* @__PURE__ */ jsx73("span", { className: "sr-only", children: title }),
+        /* @__PURE__ */ jsx73(Avatar3, { type: "icon", children: /* @__PURE__ */ jsx73(ArrowLeft, { size: "24" }) })
       ]
     }
   ) });
@@ -18166,7 +18173,7 @@ function BackButton({ title, action, onAction }) {
 var BackButton_default = BackButton;
 
 // src/legacy/dynamicFlow/DynamicFlowStep.tsx
-import { Fragment as Fragment17, jsx as jsx73, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx74, jsxs as jsxs32 } from "react/jsx-runtime";
 function DynamicFlowStep(props) {
   var _a, _b, _c;
   const { step, globalError, onAction } = props;
@@ -18175,20 +18182,20 @@ function DynamicFlowStep(props) {
   const { requiresManualTrigger, dismissConfirmation } = useExternal(externalUrl);
   if (step === void 0) {
     if (globalError) {
-      return /* @__PURE__ */ jsx73(DynamicAlert_default, { component: { context: "negative", markdown: globalError, margin: "lg" } });
+      return /* @__PURE__ */ jsx74(DynamicAlert_default, { component: { context: "negative", markdown: globalError, margin: "lg" } });
     }
     return null;
   }
   if (externalUrl && requiresManualTrigger) {
-    return /* @__PURE__ */ jsx73(ExternalConfirmationStep_default, { url: externalUrl, onClose: dismissConfirmation });
+    return /* @__PURE__ */ jsx74(ExternalConfirmationStep_default, { url: externalUrl, onClose: dismissConfirmation });
   }
   if (isCameraStep(step)) {
-    return /* @__PURE__ */ jsx73(CameraStep_default, __spreadProps(__spreadValues({}, props), { step }));
+    return /* @__PURE__ */ jsx74(CameraStep_default, __spreadProps(__spreadValues({}, props), { step }));
   }
   return /* @__PURE__ */ jsxs32(Fragment17, { children: [
-    backButton && /* @__PURE__ */ jsx73(BackButton_default, __spreadProps(__spreadValues({}, backButton), { onAction })),
-    globalError ? /* @__PURE__ */ jsx73(DynamicAlert_default, { component: { context: "negative", markdown: globalError, margin: "lg" } }) : null,
-    /* @__PURE__ */ jsx73(LayoutStep_default, __spreadProps(__spreadValues({}, props), { stepSpecification: step }))
+    backButton && /* @__PURE__ */ jsx74(BackButton_default, __spreadProps(__spreadValues({}, backButton), { onAction })),
+    globalError ? /* @__PURE__ */ jsx74(DynamicAlert_default, { component: { context: "negative", markdown: globalError, margin: "lg" } }) : null,
+    /* @__PURE__ */ jsx74(LayoutStep_default, __spreadProps(__spreadValues({}, props), { stepSpecification: step }))
   ] });
 }
 
@@ -18337,7 +18344,7 @@ var isInlineSchema = (schema) => schema !== void 0 && typeof schema === "object"
 // src/legacy/dynamicFlow/utils/useLoader.tsx
 import { Loader as Loader3, Size as Size4 } from "@transferwise/components";
 import { useState as useState26 } from "react";
-import { jsx as jsx74 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
 function useLoader(loaderConfig, initialState) {
   const config = __spreadValues({
     size: Size4.EXTRA_LARGE,
@@ -18346,7 +18353,7 @@ function useLoader(loaderConfig, initialState) {
   }, loaderConfig);
   const [loadingState, setLoadingState] = useState26(initialState);
   const shouldDisplayLoader = config.initial && loadingState === "initial" || config.submission && loadingState === "submission";
-  const loader = shouldDisplayLoader ? /* @__PURE__ */ jsx74(
+  const loader = shouldDisplayLoader ? /* @__PURE__ */ jsx75(
     Loader3,
     {
       size: config.size,
@@ -18466,7 +18473,7 @@ var useErrorResponse = () => {
 };
 
 // src/legacy/dynamicFlow/DynamicFlow.tsx
-import { jsx as jsx75 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
 var noop7 = () => {
 };
 var DynamicFlowComponent = ({
@@ -18476,6 +18483,7 @@ var DynamicFlowComponent = ({
   initialStep,
   loaderConfig,
   displayStepTitle = true,
+  features,
   onCompletion,
   onError,
   onEvent = noop7,
@@ -18708,7 +18716,7 @@ var DynamicFlowComponent = ({
       await performAction(action);
     }
   };
-  return /* @__PURE__ */ jsx75(LogProvider, { flowId, stepId: (step == null ? void 0 : step.id) || (step == null ? void 0 : step.key), onLog, children: /* @__PURE__ */ jsx75(EventsContextProvider, { metadata: analyticsMetadata, onEvent, children: /* @__PURE__ */ jsx75(DynamicFlowProvider, { loading: isLoading || isDebouncing, children: /* @__PURE__ */ jsx75(HttpClientProvider, { httpClient, children: loader !== null ? loader : /* @__PURE__ */ jsx75("div", { id: (step == null ? void 0 : step.id) || (step == null ? void 0 : step.key), className: "dynamic-flow-legacy", children: /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx76(LogProvider, { flowId, stepId: (step == null ? void 0 : step.id) || (step == null ? void 0 : step.key), onLog, children: /* @__PURE__ */ jsx76(EventsContextProvider, { metadata: analyticsMetadata, onEvent, children: /* @__PURE__ */ jsx76(DynamicFlowProvider, { loading: isLoading || isDebouncing, children: /* @__PURE__ */ jsx76(HttpClientProvider, { httpClient, children: /* @__PURE__ */ jsx76(FeatureContextProvider, { features, children: loader !== null ? loader : /* @__PURE__ */ jsx76("div", { id: (step == null ? void 0 : step.id) || (step == null ? void 0 : step.key), className: "dynamic-flow-legacy", children: /* @__PURE__ */ jsx76(
     DynamicFlowStep,
     {
       step,
@@ -18722,10 +18730,10 @@ var DynamicFlowComponent = ({
       },
       onModelChange
     }
-  ) }) }) }) }) });
+  ) }) }) }) }) }) });
 };
 function DynamicFlow(props) {
-  return /* @__PURE__ */ jsx75(ErrorBoundary_default, { onError: props.onError, children: /* @__PURE__ */ jsx75(DynamicFlowComponent, __spreadValues({}, props)) });
+  return /* @__PURE__ */ jsx76(ErrorBoundary_default, { onError: props.onError, children: /* @__PURE__ */ jsx76(DynamicFlowComponent, __spreadValues({}, props)) });
 }
 var DynamicFlow_default = DynamicFlow;
 var combineModels2 = (formModels) => Object.values(formModels).reduce((previous, model) => __spreadValues(__spreadValues({}, previous), model), {});
@@ -18742,19 +18750,19 @@ var shouldTriggerRefresh = (props) => {
 };
 
 // src/legacy/jsonSchemaForm/JsonSchemaForm.tsx
-import { jsx as jsx76 } from "react/jsx-runtime";
+import { jsx as jsx77 } from "react/jsx-runtime";
 function JsonSchemaForm(props) {
   const schemaProps = __spreadValues({
     model: null,
     errors: null
   }, props);
   const { baseUrl = "", onEvent = noop8, onLog = noop8 } = props;
-  return /* @__PURE__ */ jsx76(LogProvider, { flowId: "JsonSchemaForm", stepId: "JsonSchemaForm", onLog, children: /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx77(LogProvider, { flowId: "JsonSchemaForm", stepId: "JsonSchemaForm", onLog, children: /* @__PURE__ */ jsx77(
     EventsContextProvider,
     {
       metadata: { flowId: "JsonSchemaForm", stepId: "JsonSchemaForm" },
       onEvent,
-      children: /* @__PURE__ */ jsx76(HttpClientProviderFromBaseUrl, { baseUrl, children: /* @__PURE__ */ jsx76(GenericSchema_default, __spreadValues({}, schemaProps)) })
+      children: /* @__PURE__ */ jsx77(HttpClientProviderFromBaseUrl, { baseUrl, children: /* @__PURE__ */ jsx77(GenericSchema_default, __spreadValues({}, schemaProps)) })
     }
   ) });
 }