@wise/dynamic-flow-client 3.14.1 → 3.15.1

package/build/main.mjs

@@ -34,6 +34,9 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __commonJS = (cb, mod) => function __require() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
@@ -115,6 +118,158 @@ var require_classnames = __commonJS({
   }
 });
 
+// ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e)
+    n += e;
+  else if ("object" == typeof e)
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0; t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var init_clsx = __esm({
+  "../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs"() {
+    "use strict";
+  }
+});
+
+// ../../node_modules/.pnpm/@wise+art@2.14.0_@transferwise+neptune-css@14.12.1_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/art/dist/index-93a0c34e.esm.js
+import { useState as useState2, useEffect as useEffect2, forwardRef, Suspense, lazy } from "react";
+import { jsx as jsx17, jsxs as jsxs4, Fragment as Fragment3 } from "react/jsx-runtime";
+var unknownFlagName, Flag, Sizes, ImageSizes, imageSizes, Assets, RenderMode;
+var init_index_93a0c34e_esm = __esm({
+  "../../node_modules/.pnpm/@wise+art@2.14.0_@transferwise+neptune-css@14.12.1_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/art/dist/index-93a0c34e.esm.js"() {
+    "use strict";
+    init_clsx();
+    unknownFlagName = "wise";
+    Flag = ({
+      code,
+      intrinsicSize = 64,
+      className = void 0
+    }) => {
+      const [fallback, setFallback] = useState2(null);
+      useEffect2(() => {
+        setFallback(null);
+      }, [code]);
+      const detailed = intrinsicSize >= 150;
+      const name = fallback !== "unknown" ? `${code.toLowerCase()}${fallback == null && detailed ? "-detailed" : ""}` : unknownFlagName;
+      return /* @__PURE__ */ jsx17("img", {
+        className: clsx(`wds-flag wds-flag-${name}`, className),
+        src: `https://wise.com/web-art/assets/flags/${name}.svg`,
+        alt: "",
+        width: intrinsicSize,
+        height: intrinsicSize,
+        onError: () => {
+          setFallback((prev) => prev == null && detailed ? "simple" : "unknown");
+        }
+      });
+    };
+    (function(Sizes2) {
+      Sizes2["SMALL"] = "small";
+      Sizes2["MEDIUM"] = "medium";
+      Sizes2["LARGE"] = "large";
+    })(Sizes || (Sizes = {}));
+    ImageSizes = {
+      [Sizes.SMALL]: 200,
+      [Sizes.MEDIUM]: 300,
+      [Sizes.LARGE]: 500
+    };
+    imageSizes = {
+      [Sizes.SMALL]: 200,
+      [Sizes.MEDIUM]: 300,
+      [Sizes.LARGE]: 500
+    };
+    (function(Assets2) {
+      Assets2["BELL"] = "bell";
+      Assets2["BRIEFCASE"] = "briefcase";
+      Assets2["BUSINESS_CARD"] = "business-card";
+      Assets2["CALENDAR"] = "calendar";
+      Assets2["CHECK_MARK"] = "check-mark";
+      Assets2["CLOSED_WINDOW"] = "closed-window";
+      Assets2["COIN_PILE_DOWN"] = "coin-pile-down";
+      Assets2["COIN_PILE_UP"] = "coin-pile-up";
+      Assets2["CONFETTI"] = "confetti";
+      Assets2["CONSTRUCTION_FENCE"] = "construction-fence";
+      Assets2["CONVERT"] = "convert";
+      Assets2["COOKIE"] = "cookie";
+      Assets2["DIGITAL_CARD_2"] = "digital-card-2";
+      Assets2["DIGITAL_CARD"] = "digital-card";
+      Assets2["DOCUMENTS"] = "documents";
+      Assets2["DOOR"] = "door";
+      Assets2["ECO_CARD"] = "eco-card";
+      Assets2["ELECTRIC_PLUG"] = "electric-plug";
+      Assets2["EMAIL_SUCCESS"] = "email-success";
+      Assets2["EMAIL"] = "email";
+      Assets2["EXCLAMATION_MARK"] = "exclamation-mark";
+      Assets2["FLAG"] = "flag";
+      Assets2["FLOWER"] = "flower";
+      Assets2["GEAR"] = "gear";
+      Assets2["GLOBE"] = "globe";
+      Assets2["GRAPH"] = "graph";
+      Assets2["HEART_2"] = "heart-2";
+      Assets2["HEART_3"] = "heart-3";
+      Assets2["HEART_4"] = "heart-4";
+      Assets2["HEART_5"] = "heart-5";
+      Assets2["HEART"] = "heart";
+      Assets2["HOUSE"] = "house";
+      Assets2["ID_CARD"] = "id-card";
+      Assets2["INFINITE"] = "infinite";
+      Assets2["INTEREST"] = "interest";
+      Assets2["INVITE_LETTER"] = "invite-letter";
+      Assets2["JARS"] = "jars";
+      Assets2["KEY"] = "key";
+      Assets2["LIGHT_BULB"] = "light-bulb";
+      Assets2["LOCK_PLATFORM"] = "lock-platform";
+      Assets2["LOCK"] = "lock";
+      Assets2["MAGNIFYING_GLASS"] = "magnifying-glass";
+      Assets2["MAP"] = "map";
+      Assets2["MARBLE_CARD_BUSINESS"] = "marble-card-business";
+      Assets2["MARBLE_CARD"] = "marble-card";
+      Assets2["MARBLE"] = "marble";
+      Assets2["MEGAPHONE"] = "megaphone";
+      Assets2["MULTI_CURRENCY"] = "multi-currency";
+      Assets2["ONE_INVITE_LETTER_OPENED"] = "one-invite-letter-opened";
+      Assets2["PALM_TREE"] = "palm-tree";
+      Assets2["PERCENTAGE"] = "percentage";
+      Assets2["PERSONAL_CARD"] = "personal-card";
+      Assets2["PHONES"] = "phones";
+      Assets2["PIE_CHART"] = "pie-chart";
+      Assets2["PLANE_2"] = "plane-2";
+      Assets2["PLANE"] = "plane";
+      Assets2["PUZZLE_PIECES"] = "puzzle-pieces";
+      Assets2["QUESTION_MARK"] = "question-mark";
+      Assets2["RECEIVE"] = "receive";
+      Assets2["REMINDER_LETTER"] = "reminder-letter";
+      Assets2["SAND_TIMER"] = "sand-timer";
+      Assets2["SATELLITE_PLATFORM"] = "satellite-platform";
+      Assets2["SHOPPING_BAG"] = "shopping-bag";
+      Assets2["SKIP_AUTHENTICATION"] = "skip-authentication";
+      Assets2["SPEECH_BUBBLE"] = "speech-bubble";
+      Assets2["STOPWATCH_PLATFORM"] = "stopwatch-platform";
+      Assets2["TARGET_PLATFORM"] = "target-platform";
+      Assets2["TOOL"] = "tool";
+      Assets2["TWO_INVITE_LETTERS_OPENED"] = "two-invite-letters-opened";
+      Assets2["WALLET"] = "wallet";
+    })(Assets || (Assets = {}));
+    (function(RenderMode2) {
+      RenderMode2[RenderMode2["INIT"] = 0] = "INIT";
+      RenderMode2[RenderMode2["FALLBACK"] = 1] = "FALLBACK";
+      RenderMode2[RenderMode2["ASSET_3D"] = 2] = "ASSET_3D";
+    })(RenderMode || (RenderMode = {}));
+  }
+});
+
 // ../../node_modules/.pnpm/screenfull@5.2.0/node_modules/screenfull/dist/screenfull.js
 var require_screenfull = __commonJS({
   "../../node_modules/.pnpm/screenfull@5.2.0/node_modules/screenfull/dist/screenfull.js"(exports, module) {
@@ -1373,9 +1528,11 @@ var dateInputComponentToProps = (component) => __spreadProps(__spreadValues({},
 
 // src/revamp/renderers/mappers/decisionComponentToProps.ts
 var decisionComponentToProps = ({
+  control,
   options,
-  margin
-}) => ({ type: "decision", options, margin });
+  margin,
+  title
+}) => ({ type: "decision", control, options, margin, title });
 
 // src/revamp/renderers/mappers/dividerComponentToProps.ts
 var dividerComponentToProps = ({
@@ -6907,7 +7064,7 @@ var createDecisionComponent = (decisionProps) => __spreadProps(__spreadValues({
 });
 
 // src/revamp/domain/mappers/layout/decisionLayoutToComponent.ts
-var decisionLayoutToComponent = (uid, { control, margin = "md", options }, { onAction, step }) => createDecisionComponent({
+var decisionLayoutToComponent = (uid, { control, margin = "md", options, title }, { onAction, step }) => createDecisionComponent({
   uid,
   control,
   margin,
@@ -6919,7 +7076,8 @@ var decisionLayoutToComponent = (uid, { control, margin = "md", options }, { onA
         void onAction(action);
       }
     });
-  })
+  }),
+  title
 });
 
 // src/revamp/domain/components/DividerComponent.ts
@@ -10641,6 +10799,7 @@ function useDynamicFlowCore(props) {
 // src/revamp/DynamicFlowCore.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
 function DynamicFlowCore(props) {
+  var _a, _b;
   const { stepComponentRef } = useDynamicFlowCore(props);
   const { renderers, onEvent, onError } = props;
   const render = useMemo2(
@@ -10654,7 +10813,14 @@ function DynamicFlowCore(props) {
         onEvent == null ? void 0 : onEvent("Dynamic Flow - Failed", { error });
         onError == null ? void 0 : onError(error);
       },
-      children: stepComponentRef.current ? render(stepComponentRef.current) : null
+      children: /* @__PURE__ */ jsx5(
+        "div",
+        {
+          id: (_b = (_a = stepComponentRef.current) == null ? void 0 : _a.step) == null ? void 0 : _b.id,
+          className: "dynamic-flow",
+          children: stepComponentRef.current ? render(stepComponentRef.current) : null
+        }
+      )
     }
   );
 }
@@ -11021,111 +11187,13 @@ var DateInputRenderer = {
 var DateInputRenderer_default = DateInputRenderer;
 
 // ../renderers/src/DecisionRenderer.tsx
-import { NavigationOptionsList, NavigationOption } from "@transferwise/components";
+import { NavigationOptionsList, NavigationOption, Header } from "@transferwise/components";
 
-// ../../node_modules/.pnpm/@wise+art@2.7.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/art/dist/index.esm.js
-import { useState as useState2, useEffect as useEffect2, forwardRef } from "react";
-import { jsx as jsx17, jsxs as jsxs4, Fragment as Fragment3 } from "react/jsx-runtime";
-var unknownFlagName = "wise";
-var Flag = ({
-  code,
-  intrinsicSize = 64
-}) => {
-  const [fallback, setFallback] = useState2(null);
-  useEffect2(() => {
-    setFallback(null);
-  }, [code]);
-  const detailed = intrinsicSize >= 150;
-  const name = fallback !== "unknown" ? `${code.toLowerCase()}${fallback == null && detailed ? "-detailed" : ""}` : unknownFlagName;
-  return /* @__PURE__ */ jsx17("img", {
-    src: `https://wise.com/web-art/assets/flags/${name}.svg`,
-    alt: "",
-    width: intrinsicSize,
-    height: intrinsicSize,
-    onError: () => {
-      setFallback((prev) => prev == null && detailed ? "simple" : "unknown");
-    }
-  });
-};
-var Sizes;
-(function(Sizes2) {
-  Sizes2["SMALL"] = "small";
-  Sizes2["MEDIUM"] = "medium";
-  Sizes2["LARGE"] = "large";
-})(Sizes || (Sizes = {}));
-var imageSizes = {
-  [Sizes.SMALL]: 200,
-  [Sizes.MEDIUM]: 300,
-  [Sizes.LARGE]: 500
-};
-var Assets;
-(function(Assets2) {
-  Assets2["BELL"] = "bell";
-  Assets2["BRIEFCASE"] = "briefcase";
-  Assets2["BUSINESS_CARD"] = "business-card";
-  Assets2["CALENDAR"] = "calendar";
-  Assets2["CHECK_MARK"] = "check-mark";
-  Assets2["CLOSED_WINDOW"] = "closed-window";
-  Assets2["COIN_PILE_DOWN"] = "coin-pile-down";
-  Assets2["COIN_PILE_UP"] = "coin-pile-up";
-  Assets2["CONFETTI"] = "confetti";
-  Assets2["CONSTRUCTION_FENCE"] = "construction-fence";
-  Assets2["CONVERT"] = "convert";
-  Assets2["COOKIE"] = "cookie";
-  Assets2["DIGITAL_CARD_2"] = "digital-card-2";
-  Assets2["DIGITAL_CARD"] = "digital-card";
-  Assets2["DOCUMENTS"] = "documents";
-  Assets2["DOOR"] = "door";
-  Assets2["ECO_CARD"] = "eco-card";
-  Assets2["ELECTRIC_PLUG"] = "electric-plug";
-  Assets2["EMAIL_SUCCESS"] = "email-success";
-  Assets2["EMAIL"] = "email";
-  Assets2["EXCLAMATION_MARK"] = "exclamation-mark";
-  Assets2["FLAG"] = "flag";
-  Assets2["FLOWER"] = "flower";
-  Assets2["GEAR"] = "gear";
-  Assets2["GLOBE"] = "globe";
-  Assets2["GRAPH"] = "graph";
-  Assets2["HEART_2"] = "heart-2";
-  Assets2["HEART_3"] = "heart-3";
-  Assets2["HEART_4"] = "heart-4";
-  Assets2["HEART_5"] = "heart-5";
-  Assets2["HEART"] = "heart";
-  Assets2["HOUSE"] = "house";
-  Assets2["ID_CARD"] = "id-card";
-  Assets2["INFINITE"] = "infinite";
-  Assets2["INVITE_LETTER"] = "invite-letter";
-  Assets2["JARS"] = "jars";
-  Assets2["KEY"] = "key";
-  Assets2["LIGHT_BULB"] = "light-bulb";
-  Assets2["LOCK"] = "lock";
-  Assets2["MAGNIFYING_GLASS"] = "magnifying-glass";
-  Assets2["MAP"] = "map";
-  Assets2["MARBLE_CARD_BUSINESS"] = "marble-card-business";
-  Assets2["MARBLE_CARD"] = "marble-card";
-  Assets2["MARBLE"] = "marble";
-  Assets2["MEGAPHONE"] = "megaphone";
-  Assets2["MULTI_CURRENCY"] = "multi-currency";
-  Assets2["ONE_INVITE_LETTER_OPENED"] = "one-invite-letter-opened";
-  Assets2["PALM_TREE"] = "palm-tree";
-  Assets2["PERCENTAGE"] = "percentage";
-  Assets2["PERSONAL_CARD"] = "personal-card";
-  Assets2["PHONES"] = "phones";
-  Assets2["PIE_CHART"] = "pie-chart";
-  Assets2["PLANE_2"] = "plane-2";
-  Assets2["PLANE"] = "plane";
-  Assets2["PUZZLE_PIECES"] = "puzzle-pieces";
-  Assets2["QUESTION_MARK"] = "question-mark";
-  Assets2["RECEIVE"] = "receive";
-  Assets2["REMINDER_LETTER"] = "reminder-letter";
-  Assets2["SAND_TIMER"] = "sand-timer";
-  Assets2["SHOPPING_BAG"] = "shopping-bag";
-  Assets2["SKIP_AUTHENTICATION"] = "skip-authentication";
-  Assets2["SPEECH_BUBBLE"] = "speech-bubble";
-  Assets2["TOOL"] = "tool";
-  Assets2["TWO_INVITE_LETTERS_OPENED"] = "two-invite-letters-opened";
-  Assets2["WALLET"] = "wallet";
-})(Assets || (Assets = {}));
+// ../../node_modules/.pnpm/@wise+art@2.14.0_@transferwise+neptune-css@14.12.1_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/art/dist/index.esm.js
+init_index_93a0c34e_esm();
+init_clsx();
+import "react";
+import "react/jsx-runtime";
 
 // ../renderers/src/components/icon/FlagIcon.tsx
 import { jsx as jsx18 } from "react/jsx-runtime";
@@ -11189,27 +11257,30 @@ function NavigationOptionMedia({ icon, image }) {
 }
 
 // ../renderers/src/DecisionRenderer.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs5 } from "react/jsx-runtime";
 var DecisionRenderer = {
   canRenderType: "decision",
   render: DecisionRendererComponent
 };
 var DecisionRenderer_default = DecisionRenderer;
-function DecisionRendererComponent({ margin, options }) {
+function DecisionRendererComponent({ margin, options, title }) {
   const { isLoading } = useLoadingContext();
-  return /* @__PURE__ */ jsx22("div", { className: getMargin(margin), children: /* @__PURE__ */ jsx22(NavigationOptionsList, { children: options.map(({ description, disabled, icon, image, title, onClick }) => /* @__PURE__ */ jsx22(
-    NavigationOption,
-    {
-      title,
-      content: description,
-      disabled: isLoading || disabled,
-      media: /* @__PURE__ */ jsx22(NavigationOptionMedia, { icon, image }),
-      showMediaCircle: false,
-      showMediaAtAllSizes: true,
-      onClick
-    },
-    JSON.stringify(title)
-  )) }) });
+  return /* @__PURE__ */ jsxs5("div", { className: getMargin(margin), children: [
+    title && /* @__PURE__ */ jsx22(Header, { as: "h2", title }),
+    /* @__PURE__ */ jsx22(NavigationOptionsList, { children: options.map(({ description, disabled, icon, image, title: title2, onClick }) => /* @__PURE__ */ jsx22(
+      NavigationOption,
+      {
+        title: title2,
+        content: description,
+        disabled: isLoading || disabled,
+        media: /* @__PURE__ */ jsx22(NavigationOptionMedia, { icon, image }),
+        showMediaCircle: false,
+        showMediaAtAllSizes: true,
+        onClick
+      },
+      JSON.stringify(title2)
+    )) })
+  ] });
 }
 
 // ../renderers/src/DividerRenderer.tsx
@@ -11229,14 +11300,14 @@ var FormRenderer = {
 var FormRenderer_default = FormRenderer;
 
 // ../renderers/src/FormSectionRenderer.tsx
-import { Header } from "@transferwise/components";
-import { jsx as jsx25, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Header as Header2 } from "@transferwise/components";
+import { jsx as jsx25, jsxs as jsxs6 } from "react/jsx-runtime";
 var FormSectionRenderer = {
   canRenderType: "form-section",
-  render: ({ title, description, children }) => /* @__PURE__ */ jsxs5("fieldset", { children: [
+  render: ({ title, description, children }) => /* @__PURE__ */ jsxs6("fieldset", { children: [
     title && // TODO - once section headers support help, we could show help in here
     /* @__PURE__ */ jsx25(
-      Header,
+      Header2,
       {
         as: "h2",
         title
@@ -11366,8 +11437,8 @@ var getImageSource = async (httpClient, imageUrl) => {
 };
 
 // ../renderers/src/InstructionsRenderer.tsx
-import { Header as Header2, InstructionsList } from "@transferwise/components";
-import { jsx as jsx28, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Header as Header3, InstructionsList } from "@transferwise/components";
+import { jsx as jsx28, jsxs as jsxs7 } from "react/jsx-runtime";
 var doContext = ["positive", "neutral"];
 var dontContext = ["warning", "negative"];
 var InstructionsRenderer = {
@@ -11375,8 +11446,8 @@ var InstructionsRenderer = {
   render: ({ items, margin, title }) => {
     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__ */ jsxs6("div", { className: getMargin(margin), children: [
-      title ? /* @__PURE__ */ jsx28(Header2, { title }) : null,
+    return /* @__PURE__ */ jsxs7("div", { className: getMargin(margin), children: [
+      title ? /* @__PURE__ */ jsx28(Header3, { title }) : null,
       /* @__PURE__ */ jsx28(InstructionsList, { dos, donts })
     ] });
   }
@@ -11447,7 +11518,7 @@ var MarkdownRenderer_default = MarkdownRenderer;
 // ../renderers/src/ModalRenderer.tsx
 import { Button as Button2, Modal } from "@transferwise/components";
 import { useState as useState4 } from "react";
-import { jsx as jsx32, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs8 } from "react/jsx-runtime";
 var ModalRenderer = {
   canRenderType: "modal",
   render: (props) => /* @__PURE__ */ jsx32(DFModal, __spreadValues({}, props))
@@ -11455,7 +11526,7 @@ var ModalRenderer = {
 var ModalRenderer_default = ModalRenderer;
 function DFModal({ content, margin, trigger }) {
   const [visible, setVisible] = useState4(false);
-  return /* @__PURE__ */ jsxs7("div", { className: getMargin(margin), children: [
+  return /* @__PURE__ */ jsxs8("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx32(Button2, { priority: "tertiary", block: true, onClick: () => setVisible(true), children: trigger.title }),
     /* @__PURE__ */ jsx32(
       Modal,
@@ -11594,7 +11665,7 @@ import { UploadInput } from "@transferwise/components";
 // ../renderers/src/components/UploadFieldInput.tsx
 var import_classnames3 = __toESM(require_classnames());
 import { InlineAlert } from "@transferwise/components";
-import { jsx as jsx35, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs9 } from "react/jsx-runtime";
 function UploadFieldInput({
   id,
   children,
@@ -11605,7 +11676,7 @@ function UploadFieldInput({
 }) {
   const labelContent = label && help ? /* @__PURE__ */ jsx35(LabelContentWithHelp, { text: label, help }) : label;
   const descriptionId = description ? `${id}-description` : void 0;
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: (0, import_classnames3.default)("form-group d-block", {
@@ -11751,7 +11822,7 @@ var paragraph_messages_default = defineMessages7({
 });
 
 // ../renderers/src/ParagraphRenderer.tsx
-import { jsx as jsx38, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs10 } from "react/jsx-runtime";
 var ParagraphRenderer = {
   canRenderType: "paragraph",
   render: (props) => /* @__PURE__ */ jsx38(Paragraph, __spreadValues({}, props))
@@ -11775,7 +11846,7 @@ function CopyableParagraph({
     });
   };
   const inputAlignmentClasses = getTextAlignmentAndMargin({ align, margin: "sm" });
-  return /* @__PURE__ */ jsxs9("div", { className, children: [
+  return /* @__PURE__ */ jsxs10("div", { className, children: [
     /* @__PURE__ */ jsx38(
       Input3,
       {
@@ -11791,7 +11862,7 @@ function CopyableParagraph({
 var ParagraphRenderer_default = ParagraphRenderer;
 
 // ../renderers/src/RepeatableRenderer.tsx
-import { Button as Button4, Header as Header3, Modal as Modal2, NavigationOption as NavigationOption2, InlineAlert as InlineAlert2 } from "@transferwise/components";
+import { Button as Button4, Header as Header4, Modal as Modal2, NavigationOption as NavigationOption2, InlineAlert as InlineAlert2 } from "@transferwise/components";
 import { useState as useState6 } from "react";
 import { Plus } from "@transferwise/icons";
 import { useIntl as useIntl6 } from "react-intl";
@@ -11823,7 +11894,7 @@ var repeatable_messages_default = defineMessages8({
 
 // ../renderers/src/RepeatableRenderer.tsx
 var import_classnames5 = __toESM(require_classnames());
-import { Fragment as Fragment4, jsx as jsx39, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx39, jsxs as jsxs11 } from "react/jsx-runtime";
 var RepeatableRenderer = {
   canRenderType: "repeatable",
   render: (props) => /* @__PURE__ */ jsx39(Repeatable, __spreadValues({}, props))
@@ -11865,10 +11936,10 @@ function Repeatable(props) {
   const onCancelEdit = () => {
     setOpenModalType(null);
   };
-  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
-    title && /* @__PURE__ */ jsx39(Header3, { title }),
+  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    title && /* @__PURE__ */ jsx39(Header4, { title }),
     description && /* @__PURE__ */ jsx39("p", { children: description }),
-    /* @__PURE__ */ jsxs10(
+    /* @__PURE__ */ jsxs11(
       "div",
       {
         className: (0, import_classnames5.default)("form-group", {
@@ -11894,9 +11965,9 @@ function Repeatable(props) {
       {
         open: openModalType !== null,
         title: (openModalType === "add" ? addItemTitle : editItemTitle) || formatMessage(repeatable_messages_default.addItemTitle),
-        body: /* @__PURE__ */ jsxs10(Fragment4, { children: [
+        body: /* @__PURE__ */ jsxs11(Fragment4, { children: [
           /* @__PURE__ */ jsx39("div", { className: "m-b-2", children: editableItem }),
-          /* @__PURE__ */ jsxs10("div", { children: [
+          /* @__PURE__ */ jsxs11("div", { children: [
             /* @__PURE__ */ jsx39(Button4, { priority: "primary", block: true, className: "m-b-2", onClick: () => onSaveItem(), children: formatMessage(repeatable_messages_default.addItem) }),
             /* @__PURE__ */ jsx39(Button4, { priority: "secondary", type: "negative", block: true, onClick: () => onRemoveItem(), children: formatMessage(repeatable_messages_default.removeItem) })
           ] })
@@ -11950,10 +12021,10 @@ var generic_error_messages_default2 = defineMessages9({
 });
 
 // ../renderers/src/SearchRenderer/ErrorResult.tsx
-import { jsx as jsx40, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs12 } from "react/jsx-runtime";
 function ErrorResult({ state }) {
   const intl = useIntl7();
-  return /* @__PURE__ */ jsxs11("p", { className: "m-t-2", children: [
+  return /* @__PURE__ */ jsxs12("p", { className: "m-t-2", children: [
     intl.formatMessage(generic_error_messages_default2.genericError),
     "\xA0",
     /* @__PURE__ */ jsx40(
@@ -11972,7 +12043,7 @@ function ErrorResult({ state }) {
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
 import { useState as useState7 } from "react";
-import { Fragment as Fragment5, jsx as jsx41, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx41, jsxs as jsxs13 } from "react/jsx-runtime";
 function BlockSearchRendererComponent({
   id,
   isLoading,
@@ -11984,7 +12055,7 @@ function BlockSearchRendererComponent({
 }) {
   const [hasSearched, setHasSearched] = useState7(false);
   const trackEvent = useTrackEvent();
-  return /* @__PURE__ */ jsxs12("div", { className: getMargin(margin), children: [
+  return /* @__PURE__ */ jsxs13("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx41(FieldInput_default, { id, description: "", error: "", help: "", label: title, children: /* @__PURE__ */ jsx41(
       Input4,
       {
@@ -12052,7 +12123,7 @@ var BlockSearchRendererComponent_default = BlockSearchRendererComponent;
 import { Markdown as Markdown4, Typeahead } from "@transferwise/components";
 import { Search } from "@transferwise/icons";
 import { useState as useState8 } from "react";
-import { jsx as jsx42, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 function InlineSearchRenderer({
   id,
   isLoading,
@@ -12063,43 +12134,40 @@ function InlineSearchRenderer({
 }) {
   const [hasSearched, setHasSearched] = useState8(false);
   const trackEvent = useTrackEvent();
-  return /* @__PURE__ */ jsx42("div", { className: getMargin(margin), children: /* @__PURE__ */ jsxs13(FieldInput_default, { id, description: "", error: "", help: "", label: title, children: [
-    id,
-    /* @__PURE__ */ jsx42(
-      Typeahead,
-      {
-        id: "typeahead-input-id",
-        name: "typeahead-input-name",
-        size: "md",
-        maxHeight: 100,
-        footer: /* @__PURE__ */ jsx42(TypeaheadFooter, { state, isLoading }),
-        multiple: false,
-        clearable: false,
-        addon: /* @__PURE__ */ jsx42(Search, { size: 24 }),
-        options: state.type === "results" ? state.results.map(mapResultToTypeaheadOption) : [],
-        minQueryLength: 1,
-        onChange: (values) => {
-          if (values.length > 0) {
-            const [updatedValue] = values;
-            const { value: result } = updatedValue;
-            if (result) {
-              trackEvent("Search Result Selected", __spreadValues({
-                type: result.type
-              }, result.type === "action" ? { actionId: result.id } : {}));
-              result.onClick();
-            }
-          }
-        },
-        onInputChange: (query) => {
-          if (!hasSearched) {
-            setHasSearched(true);
-            trackEvent("Search Started");
+  return /* @__PURE__ */ jsx42("div", { className: getMargin(margin), children: /* @__PURE__ */ jsx42(FieldInput_default, { id, description: "", error: "", help: "", label: title, children: /* @__PURE__ */ jsx42(
+    Typeahead,
+    {
+      id: "typeahead-input-id",
+      name: "typeahead-input-name",
+      size: "md",
+      maxHeight: 100,
+      footer: /* @__PURE__ */ jsx42(TypeaheadFooter, { state, isLoading }),
+      multiple: false,
+      clearable: false,
+      addon: /* @__PURE__ */ jsx42(Search, { size: 24 }),
+      options: state.type === "results" ? state.results.map(mapResultToTypeaheadOption) : [],
+      minQueryLength: 1,
+      onChange: (values) => {
+        if (values.length > 0) {
+          const [updatedValue] = values;
+          const { value: result } = updatedValue;
+          if (result) {
+            trackEvent("Search Result Selected", __spreadValues({
+              type: result.type
+            }, result.type === "action" ? { actionId: result.id } : {}));
+            result.onClick();
           }
-          onChange(query);
         }
+      },
+      onInputChange: (query) => {
+        if (!hasSearched) {
+          setHasSearched(true);
+          trackEvent("Search Started");
+        }
+        onChange(query);
       }
-    )
-  ] }) });
+    }
+  ) }) });
 }
 function mapResultToTypeaheadOption(result) {
   return {
@@ -12347,12 +12415,12 @@ var SelectInputRenderer = {
 var SelectInputRenderer_default = SelectInputRenderer;
 
 // ../renderers/src/StatusListRenderer.tsx
-import { Header as Header4, Summary } from "@transferwise/components";
+import { Header as Header5, Summary } from "@transferwise/components";
 import { jsx as jsx50, jsxs as jsxs18 } from "react/jsx-runtime";
 var StatusListRenderer = {
   canRenderType: "status-list",
   render: ({ margin, items, title }) => /* @__PURE__ */ jsxs18("div", { className: getMargin(margin), children: [
-    title ? /* @__PURE__ */ jsx50(Header4, { title }) : null,
+    title ? /* @__PURE__ */ jsx50(Header5, { title }) : null,
     items.map(({ description, icon, status, title: itemTitle }) => /* @__PURE__ */ jsx50(
       Summary,
       {
@@ -12566,7 +12634,7 @@ var LargeUploadRenderer = {
 };
 
 // ../renderers/src/ReviewRenderer.tsx
-import { DefinitionList, Header as Header5 } from "@transferwise/components";
+import { DefinitionList, Header as Header6 } from "@transferwise/components";
 import { Fragment as Fragment10, jsx as jsx54, jsxs as jsxs19 } from "react/jsx-runtime";
 var ReviewRenderer = {
   canRenderType: "review",
@@ -12580,7 +12648,7 @@ var ReviewRenderer = {
       }
     } : void 0;
     return /* @__PURE__ */ jsxs19("div", { className: getMargin(margin), children: [
-      (title || callToAction) && /* @__PURE__ */ jsx54(Header5, { title: title != null ? title : "", action }),
+      (title || callToAction) && /* @__PURE__ */ jsx54(Header6, { title: title != null ? title : "", action }),
       /* @__PURE__ */ jsx54("div", { className: margin, children: /* @__PURE__ */ jsx54(
         DefinitionList,
         {
@@ -14496,23 +14564,27 @@ var getWidth = (bias) => {
 var DynamicColumns_default = DynamicColumns;
 
 // src/legacy/layout/decision/DynamicDecision.tsx
-import { NavigationOption as NavigationOption4, NavigationOptionsList as NavigationOptionsList3 } from "@transferwise/components";
-import { jsx as jsx74 } from "react/jsx-runtime";
+import { Header as Header7, NavigationOption as NavigationOption4, NavigationOptionsList as NavigationOptionsList3 } from "@transferwise/components";
+import { jsx as jsx74, jsxs as jsxs24 } from "react/jsx-runtime";
 function DynamicDecision({ component, onAction }) {
   const { loading } = useDynamicFlow();
-  return /* @__PURE__ */ jsx74("div", { className: getMargin2(component.margin), children: /* @__PURE__ */ jsx74(NavigationOptionsList3, { children: component.options.map((option) => /* @__PURE__ */ jsx74(
-    NavigationOption4,
-    {
-      title: option.title,
-      content: option.description,
-      disabled: loading || option.disabled,
-      media: getNavigationOptionMedia(option),
-      showMediaCircle: false,
-      showMediaAtAllSizes: true,
-      onClick: () => onAction(option.action)
-    },
-    JSON.stringify(option)
-  )) }) });
+  const { margin, options, title } = component;
+  return /* @__PURE__ */ jsxs24("div", { className: getMargin2(margin), children: [
+    title && /* @__PURE__ */ jsx74(Header7, { as: "h2", title }),
+    /* @__PURE__ */ jsx74(NavigationOptionsList3, { children: options.map((option) => /* @__PURE__ */ jsx74(
+      NavigationOption4,
+      {
+        title: option.title,
+        content: option.description,
+        disabled: loading || option.disabled,
+        media: getNavigationOptionMedia(option),
+        showMediaCircle: false,
+        showMediaAtAllSizes: true,
+        onClick: () => onAction(option.action)
+      },
+      JSON.stringify(option)
+    )) })
+  ] });
 }
 var DynamicDecision_default = DynamicDecision;
 
@@ -14541,7 +14613,7 @@ var DynamicExternal_messages_default = defineMessages11({
 });
 
 // src/legacy/layout/external/DynamicExternal.tsx
-import { Fragment as Fragment11, jsx as jsx76, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx76, jsxs as jsxs25 } from "react/jsx-runtime";
 var DynamicExternal = ({ component, onAction }) => {
   const { requestUrl, responseHandlers, polling, retryTitle } = component;
   const intl = useIntl9();
@@ -14556,7 +14628,7 @@ var DynamicExternal = ({ component, onAction }) => {
     responseHandlers
   }) : void 0;
   useExternalStepPolling(pollingConfiguration, onAction);
-  return /* @__PURE__ */ jsxs24(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs25(Fragment11, { children: [
     /* @__PURE__ */ jsx76(Loader2, { size: Size2.LARGE, classNames: { "tw-loader": "tw-loader m-x-auto" } }),
     /* @__PURE__ */ jsx76("br", {}),
     /* @__PURE__ */ jsx76(Button7, { priority: "tertiary", block: true, onClick: openExternalUrl, children: retryTitle || intl.formatMessage(DynamicExternal_messages_default.retryTitle) })
@@ -14569,9 +14641,9 @@ import { useEffect as useEffect15 } from "react";
 
 // src/legacy/jsonSchemaForm/allOfSchema/AllOfSchema.tsx
 var import_classnames6 = __toESM(require_classnames());
-import { Header as Header6 } from "@transferwise/components";
+import { Header as Header8 } from "@transferwise/components";
 import { useState as useState12 } from "react";
-import { Fragment as Fragment12, jsx as jsx77, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx77, jsxs as jsxs26 } 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) => ({
@@ -14587,8 +14659,8 @@ function AllOfSchema(props) {
     props.onChange(__spreadProps(__spreadValues({}, onChangeProps), { model: combineModels(models) }));
   };
   const [models, setModels] = useState12(splitModel(props.model, props.schema.allOf));
-  return /* @__PURE__ */ jsxs25(Fragment12, { children: [
-    props.schema.title && /* @__PURE__ */ jsx77(Header6, { title: props.schema.title }),
+  return /* @__PURE__ */ jsxs26(Fragment12, { children: [
+    props.schema.title && /* @__PURE__ */ jsx77(Header8, { title: props.schema.title }),
     props.schema.description && /* @__PURE__ */ jsx77("p", { children: props.schema.description }),
     /* @__PURE__ */ jsx77("div", { className: "row", children: props.schema.allOf.map((schema, index) => (
       // eslint-disable-next-line react/no-array-index-key
@@ -14627,7 +14699,7 @@ import { useMemo as useMemo12, useState as useState13 } from "react";
 import { InlineAlert as InlineAlert3 } from "@transferwise/components";
 import { formatDate as formatDate3 } from "@transferwise/formatting";
 import { useIntl as useIntl10 } from "react-intl";
-import { jsx as jsx78, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs27 } from "react/jsx-runtime";
 function ControlFeedback(props) {
   var _a;
   const defaultValidationMessages = useDefaultValidationMessages(props.schema);
@@ -14636,10 +14708,10 @@ function ControlFeedback(props) {
   const isValidationVisible = !isErrorVisible && (props.submitted || props.changed && props.blurred) && Boolean((_a = props.validations) == null ? void 0 : _a.length);
   const isDescriptionVisible = props.schema.type !== "boolean" && props.schema.description && !isErrorVisible && !isValidationVisible;
   const hasInfoMessage = Boolean(props.infoMessage);
-  return /* @__PURE__ */ jsxs26("div", { id: props.id, children: [
+  return /* @__PURE__ */ jsxs27("div", { id: props.id, children: [
     isErrorVisible ? /* @__PURE__ */ jsx78(InlineAlert3, { type: "error", children: props.errors }) : null,
     isValidationVisible ? /* @__PURE__ */ jsx78(InlineAlert3, { type: "error", children: props.validations.map((validation) => /* @__PURE__ */ jsx78("div", { children: validationMessages[validation] }, validation)) }) : null,
-    (isDescriptionVisible || hasInfoMessage) && /* @__PURE__ */ jsxs26(InlineAlert3, { type: "info", children: [
+    (isDescriptionVisible || hasInfoMessage) && /* @__PURE__ */ jsxs27(InlineAlert3, { type: "info", children: [
       isDescriptionVisible && /* @__PURE__ */ jsx78("div", { children: props.schema.description }),
       hasInfoMessage && /* @__PURE__ */ jsx78("div", { children: props.infoMessage })
     ] })
@@ -14767,7 +14839,7 @@ function useFormattedDefaultErrorMessages({
 }
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/multipleFileUploadSchema/MultipleFileUploadSchema.tsx
-import { jsx as jsx79, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs28 } from "react/jsx-runtime";
 function MultipleFileUploadSchema(props) {
   var _a, _b;
   const { onChange, schema } = props;
@@ -14829,7 +14901,7 @@ function MultipleFileUploadSchema(props) {
     onDeleteFile: () => Promise.resolve()
   });
   const feedbackId = `${uid}-feedback`;
-  return /* @__PURE__ */ jsxs27("div", { className: (0, import_classnames7.default)("form-group", { "has-error": showError }), children: [
+  return /* @__PURE__ */ jsxs28("div", { className: (0, import_classnames7.default)("form-group", { "has-error": showError }), children: [
     /* @__PURE__ */ jsx79("label", { className: "d-block control-label", htmlFor: uid, children: props.schema.title }),
     /* @__PURE__ */ jsx79("div", { "aria-describedby": feedbackId, children: /* @__PURE__ */ jsx79(UploadInput3, __spreadValues({}, uploadInputProps)) }),
     /* @__PURE__ */ jsx79(
@@ -14980,7 +15052,7 @@ var multi_select_messages_default2 = defineMessages13({
 });
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/multiSelectSchema/MultiSelectSchema.tsx
-import { jsx as jsx81, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs29 } from "react/jsx-runtime";
 function MultiSelectSchema({
   schema,
   model,
@@ -15032,7 +15104,7 @@ function MultiSelectSchema({
   const formGroupClasses = {
     "has-error": shouldShowInitialError || shouldShowValidationError
   };
-  return /* @__PURE__ */ jsxs28("div", { className: (0, import_classnames8.default)("d-flex flex-column", formGroupClasses), children: [
+  return /* @__PURE__ */ jsxs29("div", { className: (0, import_classnames8.default)("d-flex flex-column", formGroupClasses), children: [
     schema.title ? /* @__PURE__ */ jsx81("label", { htmlFor: id, children: schema.title }) : void 0,
     /* @__PURE__ */ jsx81(
       SelectInput3,
@@ -15090,7 +15162,7 @@ var getInitialModelIndices2 = (model, options) => {
 };
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/repeatableSchema/RepeatableSchema.tsx
-import { Header as Header7, Modal as Modal3, NavigationOption as NavigationOption6 } from "@transferwise/components";
+import { Header as Header9, Modal as Modal3, NavigationOption as NavigationOption6 } from "@transferwise/components";
 import { Plus as Plus2 } from "@transferwise/icons";
 import { useMemo as useMemo14, useState as useState16 } from "react";
 import { useIntl as useIntl14 } from "react-intl";
@@ -15393,7 +15465,7 @@ var schemaSummaryProvides = (summary, providesProp) => (
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/repeatableSchema/RepeatableSchema.tsx
 var import_classnames9 = __toESM(require_classnames());
-import { jsx as jsx84, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs30 } from "react/jsx-runtime";
 function RepeatableSchema({
   schema,
   model,
@@ -15470,8 +15542,8 @@ function RepeatableSchema({
   const formGroupClasses = {
     "has-error": (_a = errors && !isEmpty(errors)) != null ? _a : submitted && validations.length
   };
-  return /* @__PURE__ */ jsxs29("div", { id, className: (0, import_classnames9.default)(formGroupClasses), children: [
-    schema.title && /* @__PURE__ */ jsx84(Header7, { title: schema.title }),
+  return /* @__PURE__ */ jsxs30("div", { id, className: (0, import_classnames9.default)(formGroupClasses), children: [
+    schema.title && /* @__PURE__ */ jsx84(Header9, { title: schema.title }),
     itemSummaries == null ? void 0 : itemSummaries.map((itemSummary) => /* @__PURE__ */ jsx84(
       ItemSummaryOption2,
       {
@@ -15587,9 +15659,9 @@ var ArraySchema_default = ArraySchema;
 
 // src/legacy/jsonSchemaForm/objectSchema/ObjectSchema.tsx
 var import_classnames10 = __toESM(require_classnames());
-import { Header as Header8 } from "@transferwise/components";
+import { Header as Header10 } from "@transferwise/components";
 import { useState as useState17, useEffect as useEffect10 } from "react";
-import { Fragment as Fragment13, jsx as jsx87, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx87, jsxs as jsxs31 } from "react/jsx-runtime";
 var getSchemaColumnClasses2 = (width) => ({
   "col-xs-12": true,
   "col-sm-6": width === "md",
@@ -15625,11 +15697,11 @@ function ObjectSchema(props) {
   const isPropertyDefined = (propertyName) => typeof props.schema.properties[propertyName] !== "undefined";
   const orderedPropertyNames = Array.from(allorderedPropertiesSet).filter(isPropertyDefined);
   const propsErrors = props.errors;
-  return /* @__PURE__ */ jsxs30(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs31(Fragment13, { children: [
     props.schema.alert && /* @__PURE__ */ jsx87(DynamicAlert_default, { component: props.schema.alert }),
-    /* @__PURE__ */ jsxs30("fieldset", { children: [
-      props.schema.title && !props.hideTitle && /* @__PURE__ */ jsx87(Header8, { title: props.schema.title, as: "legend" }),
-      props.schema.description && !props.hideTitle && /* @__PURE__ */ jsxs30("p", { children: [
+    /* @__PURE__ */ jsxs31("fieldset", { children: [
+      props.schema.title && !props.hideTitle && /* @__PURE__ */ jsx87(Header10, { title: props.schema.title, as: "legend" }),
+      props.schema.description && !props.hideTitle && /* @__PURE__ */ jsxs31("p", { children: [
         " ",
         props.schema.description,
         " "
@@ -15667,7 +15739,7 @@ var ObjectSchema_default = ObjectSchema;
 
 // src/legacy/jsonSchemaForm/oneOfSchema/OneOfSchema.tsx
 var import_classnames11 = __toESM(require_classnames());
-import { Header as Header9 } from "@transferwise/components";
+import { Header as Header11 } from "@transferwise/components";
 import { useEffect as useEffect12, useMemo as useMemo15, useState as useState18 } from "react";
 
 // src/legacy/jsonSchemaForm/help/Help.tsx
@@ -16473,7 +16545,7 @@ var warnIfInvalidSchema = (schema, log, controlType) => {
 var SchemaFormControl_default = SchemaFormControl;
 
 // src/legacy/jsonSchemaForm/oneOfSchema/OneOfSchema.tsx
-import { Fragment as Fragment15, jsx as jsx91, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx91, jsxs as jsxs32 } from "react/jsx-runtime";
 function OneOfSchema(props) {
   const onEvent = useEventDispatcher();
   const [changed, setChanged] = useState18(false);
@@ -16549,10 +16621,10 @@ function OneOfSchema(props) {
     "has-error": !changed && props.errors && !isEmpty(props.errors) || (props.submitted || changed && blurred) && validations.length
   };
   const feedbackId = `${id}-feedback`;
-  return /* @__PURE__ */ jsxs31(Fragment15, { children: [
-    (props.schema.oneOf.length > 1 || isConstSchema2(props.schema.oneOf[0])) && /* @__PURE__ */ jsxs31(Fragment15, { children: [
+  return /* @__PURE__ */ jsxs32(Fragment15, { children: [
+    (props.schema.oneOf.length > 1 || isConstSchema2(props.schema.oneOf[0])) && /* @__PURE__ */ jsxs32(Fragment15, { children: [
       props.schema.alert && /* @__PURE__ */ jsx91(DynamicAlert_default, { component: props.schema.alert }),
-      /* @__PURE__ */ jsxs31("div", { className: (0, import_classnames11.default)(formGroupClasses), children: [
+      /* @__PURE__ */ jsxs32("div", { className: (0, import_classnames11.default)(formGroupClasses), children: [
         getTitleAndHelp(props.schema, id),
         /* @__PURE__ */ jsx91(
           SchemaFormControl_default,
@@ -16604,15 +16676,15 @@ function OneOfSchema(props) {
 function getTitleAndHelp(schema, forId) {
   var _a;
   const helpElement = schema.help ? /* @__PURE__ */ jsx91(Help_default2, { help: schema.help }) : null;
-  const titleElement = isConstSchema2(schema.oneOf[0]) ? /* @__PURE__ */ jsx91("div", { className: "m-b-1", children: /* @__PURE__ */ jsxs31("label", { className: "control-label d-inline", htmlFor: forId, children: [
+  const titleElement = isConstSchema2(schema.oneOf[0]) ? /* @__PURE__ */ jsx91("div", { className: "m-b-1", children: /* @__PURE__ */ jsxs32("label", { className: "control-label d-inline", htmlFor: forId, children: [
     schema.title,
     " ",
     helpElement
-  ] }) }) : /* @__PURE__ */ jsx91(Fragment15, { children: helpElement ? /* @__PURE__ */ jsxs31("h4", { className: "m-b-2", children: [
+  ] }) }) : /* @__PURE__ */ jsx91(Fragment15, { children: helpElement ? /* @__PURE__ */ jsxs32("h4", { className: "m-b-2", children: [
     schema.title,
     " ",
     helpElement
-  ] }) : /* @__PURE__ */ jsx91(Header9, { title: (_a = schema.title) != null ? _a : "" }) });
+  ] }) : /* @__PURE__ */ jsx91(Header11, { title: (_a = schema.title) != null ? _a : "" }) });
   return schema.title ? titleElement : helpElement;
 }
 function getValidations(props, schemaIndex) {
@@ -16710,7 +16782,7 @@ function UploadInputAdapter(props) {
 }
 
 // src/legacy/jsonSchemaForm/persistAsyncSchema/persistAsyncBlobSchema/PersistAsyncBlobSchema.tsx
-import { jsx as jsx93, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx93, jsxs as jsxs33 } from "react/jsx-runtime";
 function PersistAsyncBlobSchema(props) {
   const { model, schema, submitted, required, errors, onChange } = props;
   const [persistAsyncValidationMessages, setPersistAsyncValidationMessages] = useState19({});
@@ -16758,7 +16830,7 @@ function PersistAsyncBlobSchema(props) {
   };
   const id = schema.$id || schema.persistAsync.schema.$id || schema.persistAsync.idProperty;
   const feedbackId = `${id}-feedback`;
-  return /* @__PURE__ */ jsxs32("div", { className: (0, import_classnames12.default)(formGroupClasses), children: [
+  return /* @__PURE__ */ jsxs33("div", { className: (0, import_classnames12.default)(formGroupClasses), children: [
     /* @__PURE__ */ jsx93("div", { "aria-describedby": feedbackId, children: /* @__PURE__ */ jsx93(
       UploadInputAdapter,
       __spreadValues({
@@ -16851,7 +16923,7 @@ var PromotedOneOfCheckboxControl_default = PromotedOneOfCheckboxControl;
 
 // src/legacy/jsonSchemaForm/promotedOneOfSchema/promotedOneOfControl/PromotedOneOfRadioControl.tsx
 import { RadioGroup as RadioGroup3 } from "@transferwise/components";
-import { jsx as jsx96, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx96, jsxs as jsxs34 } from "react/jsx-runtime";
 function PromotedOneOfRadioControl(props) {
   var _a, _b;
   const { id, selection, setSelection, promotion, promotedOneOf, title } = props;
@@ -16868,7 +16940,7 @@ function PromotedOneOfRadioControl(props) {
       secondary: promotion.other.description
     }, getAvatarPropertyForRadioOption(promotion.other))
   ];
-  return /* @__PURE__ */ jsxs33("div", { className: "form-group", children: [
+  return /* @__PURE__ */ jsxs34("div", { className: "form-group", children: [
     title && /* @__PURE__ */ jsx96("label", { className: "control-label", htmlFor: id, children: title }),
     /* @__PURE__ */ jsx96(
       RadioGroup3,
@@ -16907,7 +16979,7 @@ PromotedOneOfControl.defaultProps = {
 var PromotedOneOfControl_default = PromotedOneOfControl;
 
 // src/legacy/jsonSchemaForm/promotedOneOfSchema/PromotedOneOfSchema.tsx
-import { Fragment as Fragment17, jsx as jsx98, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx98, jsxs as jsxs35 } from "react/jsx-runtime";
 var isPromoted = (schema) => schema.promoted === true;
 var PromotedOneOfSchema = (props) => {
   var _a;
@@ -16918,7 +16990,7 @@ var PromotedOneOfSchema = (props) => {
   const promotedOneOf = props.schema.oneOf.find(isPromoted);
   const promotedObjectSchema = getPromotedObjectSchema(promotedOneOf);
   const otherOneOf = getOtherOneOf(props.schema);
-  return /* @__PURE__ */ jsxs34(Fragment17, { children: [
+  return /* @__PURE__ */ jsxs35(Fragment17, { children: [
     promotedAlert && /* @__PURE__ */ jsx98(DynamicAlert_default, { component: promotedAlert }),
     /* @__PURE__ */ jsx98(
       PromotedOneOfControl_default,
@@ -16981,7 +17053,7 @@ var ReadOnlySchema_messages_default = defineMessages16({
 });
 
 // src/legacy/jsonSchemaForm/readOnlySchema/ReadOnlySchema.tsx
-import { Fragment as Fragment18, jsx as jsx99, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx99, jsxs as jsxs36 } from "react/jsx-runtime";
 function ReadOnlySchema({ schema, model }) {
   const { title = "" } = schema;
   const { formatMessage } = useIntl18();
@@ -17019,7 +17091,7 @@ function getSelectedOneOf(schema, model) {
 function getValueFromOption(option) {
   const text = option.title && option.description ? `${option.title} - ${option.description}` : option.title || "";
   const icon = getAvatarPropertyForRadioOption({ icon: option.icon });
-  return (icon == null ? void 0 : icon.avatar) ? /* @__PURE__ */ jsxs35(Fragment18, { children: [
+  return (icon == null ? void 0 : icon.avatar) ? /* @__PURE__ */ jsxs36(Fragment18, { children: [
     icon.avatar,
     " ",
     text
@@ -17316,16 +17388,16 @@ var getImageSource2 = async (httpClient, imageUrl) => {
 var DynamicImage_default = DynamicImage;
 
 // src/legacy/layout/instructions/DynamicInstructions.tsx
-import { Header as Header10, InstructionsList as InstructionsList2 } from "@transferwise/components";
-import { jsx as jsx106, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Header as Header12, InstructionsList as InstructionsList2 } from "@transferwise/components";
+import { jsx as jsx106, jsxs as jsxs37 } from "react/jsx-runtime";
 var doContext2 = ["positive", "neutral"];
 var dontContext2 = ["warning", "negative"];
 var DynamicInstructions = ({ component }) => {
   const { items } = component;
   const dos = items.filter((item) => doContext2.includes(item.context)).map(({ text }) => text);
   const donts = items.filter((item) => dontContext2.includes(item.context)).map(({ text }) => text);
-  return /* @__PURE__ */ jsxs36("div", { className: getMargin2(component.margin || "md"), children: [
-    component.title ? /* @__PURE__ */ jsx106(Header10, { title: component.title }) : null,
+  return /* @__PURE__ */ jsxs37("div", { className: getMargin2(component.margin || "md"), children: [
+    component.title ? /* @__PURE__ */ jsx106(Header12, { title: component.title }) : null,
     /* @__PURE__ */ jsx106(InstructionsList2, { dos, donts })
   ] });
 };
@@ -17436,11 +17508,11 @@ function DynamicLayout(props) {
 var DynamicLayout_default = DynamicLayout;
 
 // src/legacy/layout/list/DynamicStatusList.tsx
-import { Header as Header11, Summary as Summary2 } from "@transferwise/components";
-import { jsx as jsx108, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Header as Header13, Summary as Summary2 } from "@transferwise/components";
+import { jsx as jsx108, jsxs as jsxs38 } from "react/jsx-runtime";
 var DynamicStatusList = ({ component }) => {
-  return /* @__PURE__ */ jsxs37("div", { className: getMargin2(component.margin || "md"), children: [
-    component.title ? /* @__PURE__ */ jsx108(Header11, { title: component.title }) : null,
+  return /* @__PURE__ */ jsxs38("div", { className: getMargin2(component.margin || "md"), children: [
+    component.title ? /* @__PURE__ */ jsx108(Header13, { title: component.title }) : null,
     component.items.map(mapListItemToSummary)
   ] });
 };
@@ -17513,12 +17585,12 @@ function noop3() {
 }
 
 // src/legacy/layout/paragraph/DynamicParagraph.tsx
-import { jsx as jsx110, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx110, jsxs as jsxs39 } from "react/jsx-runtime";
 function DynamicParagraph({ component }) {
   return component.control === "copyable" ? /* @__PURE__ */ jsx110(CopyableDynamicParagraph, { component }) : /* @__PURE__ */ jsx110(BasicDynamicParagraph, { component });
 }
 function BasicDynamicParagraph({ component }) {
-  return /* @__PURE__ */ jsxs38("p", { className: getTextAlignmentAndMargin2(component), children: [
+  return /* @__PURE__ */ jsxs39("p", { className: getTextAlignmentAndMargin2(component), children: [
     " ",
     component.text,
     " "
@@ -17536,7 +17608,7 @@ function CopyableDynamicParagraph({ component }) {
     align: component.align,
     margin: "sm"
   })} form-control`;
-  return /* @__PURE__ */ jsxs38("div", { className: getTextAlignmentAndMargin2(component), children: [
+  return /* @__PURE__ */ jsxs39("div", { className: getTextAlignmentAndMargin2(component), children: [
     /* @__PURE__ */ jsx110(
       "input",
       {
@@ -17555,8 +17627,8 @@ function noop4() {
 var DynamicParagraph_default = DynamicParagraph;
 
 // src/legacy/layout/review/DynamicReview.tsx
-import { DefinitionList as DefinitionList3, Header as Header12 } from "@transferwise/components";
-import { Fragment as Fragment21, jsx as jsx111, jsxs as jsxs39 } from "react/jsx-runtime";
+import { DefinitionList as DefinitionList3, Header as Header14 } from "@transferwise/components";
+import { Fragment as Fragment21, jsx as jsx111, jsxs as jsxs40 } from "react/jsx-runtime";
 var getDefinitions = (orientation, review) => review.fields.map(({ label, value, help }, index) => ({
   key: String(index),
   title: label,
@@ -17564,11 +17636,11 @@ var getDefinitions = (orientation, review) => review.fields.map(({ label, value,
 }));
 var getFieldValue2 = (value, help, orientation) => {
   if (help) {
-    return orientation === "HORIZONTAL_RIGHT_ALIGNED" ? /* @__PURE__ */ jsxs39(Fragment21, { children: [
+    return orientation === "HORIZONTAL_RIGHT_ALIGNED" ? /* @__PURE__ */ jsxs40(Fragment21, { children: [
       /* @__PURE__ */ jsx111(Help_default2, { help }),
       " ",
       value
-    ] }) : /* @__PURE__ */ jsxs39(Fragment21, { children: [
+    ] }) : /* @__PURE__ */ jsxs40(Fragment21, { children: [
       value,
       " ",
       /* @__PURE__ */ jsx111(Help_default2, { help })
@@ -17608,8 +17680,8 @@ function DynamicReview(props) {
   const orientation = getDefinitionListLayout(review);
   const callToAction = review.callToAction ? getReviewAction2(review.callToAction.title, review.callToAction.action) : null;
   const legacyCallToAction = !callToAction && review.action ? getReviewAction2(review.action.title || "", review.action) : null;
-  return /* @__PURE__ */ jsxs39("div", { className: margin, children: [
-    review.title && /* @__PURE__ */ jsx111(Header12, { title: review.title, action: callToAction || legacyCallToAction || void 0 }),
+  return /* @__PURE__ */ jsxs40("div", { className: margin, children: [
+    review.title && /* @__PURE__ */ jsx111(Header14, { title: review.title, action: callToAction || legacyCallToAction || void 0 }),
     /* @__PURE__ */ jsx111("div", { className: margin, children: /* @__PURE__ */ jsx111(DefinitionList3, { layout: orientation, definitions: getDefinitions(orientation, review) }) })
   ] });
 }
@@ -17621,9 +17693,9 @@ import { Search as Search2 } from "@transferwise/icons";
 
 // src/legacy/layout/search/SearchInput.tsx
 import { Input as Input6 } from "@transferwise/components";
-import { jsx as jsx112, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx112, jsxs as jsxs41 } from "react/jsx-runtime";
 var SearchInput = ({ title, value, onFocus, onChange }) => {
-  return /* @__PURE__ */ jsxs40("label", { className: "control-label d-inline", children: [
+  return /* @__PURE__ */ jsxs41("label", { className: "control-label d-inline", children: [
     title,
     /* @__PURE__ */ jsx112(
       Input6,
@@ -17641,7 +17713,7 @@ var SearchInput = ({ title, value, onFocus, onChange }) => {
 // src/legacy/layout/search/SearchResults.tsx
 import { NavigationOption as NavigationOption7, NavigationOptionsList as NavigationOptionsList4 } from "@transferwise/components";
 import { useIntl as useIntl20 } from "react-intl";
-import { jsx as jsx113, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx113, jsxs as jsxs42 } from "react/jsx-runtime";
 function SearchResults2({ results, emptyMessage, onSelect }) {
   if (results.length === 0) {
     return /* @__PURE__ */ jsx113("p", { className: "m-t-2", children: emptyMessage });
@@ -17661,7 +17733,7 @@ function SearchResults2({ results, emptyMessage, onSelect }) {
 }
 function ErrorResult2({ onRetrySearch }) {
   const intl = useIntl20();
-  return /* @__PURE__ */ jsxs41("p", { className: "m-t-2", children: [
+  return /* @__PURE__ */ jsxs42("p", { className: "m-t-2", children: [
     intl.formatMessage(generic_error_messages_default.genericError),
     "\xA0",
     /* @__PURE__ */ jsx113(
@@ -17750,7 +17822,7 @@ var addQueryParameter2 = (url, key, value) => {
 // src/legacy/layout/search/DynamicSearch.tsx
 var import_classnames14 = __toESM(require_classnames());
 import { Markdown as Markdown8, Typeahead as Typeahead2 } from "@transferwise/components";
-import { jsx as jsx114, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx114, jsxs as jsxs43 } from "react/jsx-runtime";
 var DEBOUNCE_TIME2 = 400;
 function DynamicSearch({ component, onAction }) {
   const [query, setQuery] = useState24("");
@@ -17786,7 +17858,7 @@ function DynamicSearch({ component, onAction }) {
     void search(query);
   };
   if (control === "inline") {
-    return /* @__PURE__ */ jsx114("div", { className: (0, import_classnames14.default)(getMargin2(margin != null ? margin : "md"), "df-search-typeahead"), children: /* @__PURE__ */ jsxs42("label", { className: "control-label d-inline", children: [
+    return /* @__PURE__ */ jsx114("div", { className: (0, import_classnames14.default)(getMargin2(margin != null ? margin : "md"), "df-search-typeahead"), children: /* @__PURE__ */ jsxs43("label", { className: "control-label d-inline", children: [
       title,
       /* @__PURE__ */ jsx114("div", { className: "m-t-1", children: /* @__PURE__ */ jsx114(
         Typeahead2,
@@ -17821,7 +17893,7 @@ function DynamicSearch({ component, onAction }) {
       ) })
     ] }) });
   }
-  return /* @__PURE__ */ jsxs42("div", { className: getMargin2(margin != null ? margin : "md"), children: [
+  return /* @__PURE__ */ jsxs43("div", { className: getMargin2(margin != null ? margin : "md"), children: [
     /* @__PURE__ */ jsx114(SearchInput, { title, value: query, onChange, onFocus: onSearchStart }),
     status === "loading" && /* @__PURE__ */ jsx114(DynamicLoadingIndicator_default, { component: { type: "loading-indicator", size: "sm" } }),
     status === "error" && /* @__PURE__ */ jsx114(ErrorResult2, { onRetrySearch }),
@@ -17859,12 +17931,12 @@ var DynamicSearch_default = DynamicSearch;
 // src/legacy/layout/modal/DynamicModal.tsx
 import { Button as Button9, Modal as Modal4 } from "@transferwise/components";
 import { useState as useState25 } from "react";
-import { jsx as jsx115, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx115, jsxs as jsxs44 } from "react/jsx-runtime";
 function DynamicModal(props) {
   const [visible, isVisible] = useState25(false);
   const { component, onAction } = props;
   const { margin = "md" } = component;
-  return /* @__PURE__ */ jsxs43("div", { className: getTextAlignmentAndMargin2({ margin }), children: [
+  return /* @__PURE__ */ jsxs44("div", { className: getTextAlignmentAndMargin2({ margin }), children: [
     /* @__PURE__ */ jsx115(Button9, { priority: "tertiary", block: true, onClick: () => isVisible(true), children: component.trigger.title }),
     /* @__PURE__ */ jsx115(
       Modal4,
@@ -17890,7 +17962,7 @@ function DynamicModal(props) {
 var DynamicModal_default = DynamicModal;
 
 // src/legacy/jsonSchemaForm/basicTypeSchema/BasicTypeSchema.tsx
-import { Fragment as Fragment22, jsx as jsx116, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx116, jsxs as jsxs45 } from "react/jsx-runtime";
 var isNullish3 = (value) => isNull3(value) || isUndefined3(value);
 var getDefaultValue = (schema) => {
   return schema.type === "boolean" && isNullish3(schema.default) ? false : schema.default;
@@ -17966,10 +18038,10 @@ var BasicTypeSchema = (props) => {
   const showLabel = props.schema.format !== "file" && props.schema.type !== "boolean";
   const schemaHelp = props.schema.help;
   const feedbackId = `${id}-feedback`;
-  return !isHidden ? /* @__PURE__ */ jsxs44(Fragment22, { children: [
+  return !isHidden ? /* @__PURE__ */ jsxs45(Fragment22, { children: [
     props.schema.alert && /* @__PURE__ */ jsx116(DynamicAlert_default, { component: props.schema.alert }),
-    /* @__PURE__ */ jsxs44("div", { className: (0, import_classnames15.default)(formGroupClasses), children: [
-      showLabel && /* @__PURE__ */ jsxs44("div", { className: "d-inline-block m-b-1", children: [
+    /* @__PURE__ */ jsxs45("div", { className: (0, import_classnames15.default)(formGroupClasses), children: [
+      showLabel && /* @__PURE__ */ jsxs45("div", { className: "d-inline-block m-b-1", children: [
         /* @__PURE__ */ jsx116("label", { className: "control-label d-inline", htmlFor: id, children: props.schema.title }),
         !!schemaHelp && /* @__PURE__ */ jsx116(Help_default2, { help: schemaHelp })
       ] }),
@@ -18422,14 +18494,14 @@ var CameraCapture_messages_default = defineMessages18({
 // src/common/cameraCapture/components/bottomBar/BottomBar.tsx
 import { Button as Button10, ControlType, Priority, Size as Size3 } from "@transferwise/components";
 import { useIntl as useIntl23 } from "react-intl";
-import { jsx as jsx119, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx119, jsxs as jsxs46 } from "react/jsx-runtime";
 var CaptureBottomBar = ({ onCapture }) => /* @__PURE__ */ jsx119("div", { className: "bottom-bar", children: /* @__PURE__ */ jsx119(CaptureButton, { onClick: onCapture }) });
 var ReviewBottomBar = ({
   onSubmit,
   onRetry
 }) => {
   const intl = useIntl23();
-  return /* @__PURE__ */ jsx119("div", { className: "bottom-bar p-x-2", children: /* @__PURE__ */ jsx119("div", { className: "row", children: /* @__PURE__ */ jsxs45("div", { className: "col-xs-12 col-md-6 col-md-offset-3", children: [
+  return /* @__PURE__ */ jsx119("div", { className: "bottom-bar p-x-2", children: /* @__PURE__ */ jsx119("div", { className: "row", children: /* @__PURE__ */ jsxs46("div", { className: "col-xs-12 col-md-6 col-md-offset-3", children: [
     /* @__PURE__ */ jsx119(
       Button10,
       {
@@ -18480,10 +18552,10 @@ var OrientationLockOverlay_messages_default = defineMessages19({
 });
 
 // src/common/cameraCapture/components/orientationLockOverlay/OrientationLockOverlay.tsx
-import { jsx as jsx120, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx120, jsxs as jsxs47 } from "react/jsx-runtime";
 function OrientationLockOverlay() {
   const intl = useIntl24();
-  return /* @__PURE__ */ jsxs46("div", { className: "orientation-lock-overlay", children: [
+  return /* @__PURE__ */ jsxs47("div", { className: "orientation-lock-overlay", children: [
     /* @__PURE__ */ jsx120(
       "img",
       {
@@ -18669,7 +18741,7 @@ var getVideoConstraints = async (dir) => {
 
 // src/common/cameraCapture/overlay/Overlay.tsx
 import { useEffect as useEffect23, useRef as useRef7 } from "react";
-import { Fragment as Fragment23, jsx as jsx121, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx121, jsxs as jsxs48 } from "react/jsx-runtime";
 var captureButtonHeight = 92;
 var reviewButtonsHeight = 120;
 var imageHeight = 40;
@@ -18691,7 +18763,7 @@ function Overlay({ overlay, outline, imageUrl, title, instructions, reviewInstru
     return () => window.removeEventListener("resize", listener);
   });
   let helperBoxHeight = (imageUrl ? imageHeight : 0) + (title ? titleHeight : 0) + (instructions ? instructionsHeight : 0);
-  let helperBox = /* @__PURE__ */ jsxs47(Fragment23, { children: [
+  let helperBox = /* @__PURE__ */ jsxs48(Fragment23, { children: [
     imageUrl && /* @__PURE__ */ jsx121("img", { className: "camera-capture-img", src: imageUrl, alt: "" }),
     title && /* @__PURE__ */ jsx121("h4", { className: "camera-capture-title", children: title }),
     instructions && /* @__PURE__ */ jsx121("small", { className: "camera-capture-instructions", children: instructions })
@@ -18720,8 +18792,8 @@ function Overlay({ overlay, outline, imageUrl, title, instructions, reviewInstru
       width: "90%"
     }
   };
-  return /* @__PURE__ */ jsxs47("svg", { ref: svgReference, xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ jsx121("defs", { children: /* @__PURE__ */ jsxs47("mask", { id: "mask", children: [
+  return /* @__PURE__ */ jsxs48("svg", { ref: svgReference, xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx121("defs", { children: /* @__PURE__ */ jsxs48("mask", { id: "mask", children: [
       /* @__PURE__ */ jsx121("rect", { width: "100%", height: "100%", fill: "#fff" }),
       /* @__PURE__ */ jsx121("image", __spreadValues({ href: overlay }, framePosition))
     ] }) }),
@@ -18734,9 +18806,9 @@ var Overlay_default = Overlay;
 
 // src/common/cameraCapture/screens/cameraErrorScreen/CameraErrorScreen.tsx
 import { Button as Button11 } from "@transferwise/components";
-import { jsx as jsx122, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx122, jsxs as jsxs49 } from "react/jsx-runtime";
 function CameraErrorScreen({ title, description, actionButton, onAction }) {
-  return /* @__PURE__ */ jsx122("div", { className: "container p-t-5", children: /* @__PURE__ */ jsx122("div", { className: "row", children: /* @__PURE__ */ jsxs48("div", { className: "col-md-6 col-md-offset-3", children: [
+  return /* @__PURE__ */ jsx122("div", { className: "container p-t-5", children: /* @__PURE__ */ jsx122("div", { className: "row", children: /* @__PURE__ */ jsxs49("div", { className: "col-md-6 col-md-offset-3", children: [
     /* @__PURE__ */ jsx122("h2", { className: "text-xs-center m-b-3", children: title }),
     /* @__PURE__ */ jsx122("p", { className: "text-xs-center m-b-5", children: description }),
     onAction && actionButton && /* @__PURE__ */ jsx122(Button11, { block: true, onClick: onAction, children: actionButton })
@@ -18745,7 +18817,7 @@ function CameraErrorScreen({ title, description, actionButton, onAction }) {
 var CameraErrorScreen_default = CameraErrorScreen;
 
 // src/common/cameraCapture/CameraCapture.tsx
-import { jsx as jsx123, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx123, jsxs as jsxs50 } from "react/jsx-runtime";
 function CameraCapture({
   direction = "back",
   overlay = "",
@@ -18853,7 +18925,7 @@ function CameraCapture({
       exitFullScreen();
     }
   }, [mode, exitFullScreen]);
-  const captureScreen = /* @__PURE__ */ jsxs49("div", { className: "camera-capture", children: [
+  const captureScreen = /* @__PURE__ */ jsxs50("div", { className: "camera-capture", children: [
     videoConstraints && /* @__PURE__ */ jsx123(
       Webcam,
       {
@@ -18885,7 +18957,7 @@ function CameraCapture({
       }
     )
   ] });
-  const reviewScreen = /* @__PURE__ */ jsxs49("div", { className: "camera-capture", children: [
+  const reviewScreen = /* @__PURE__ */ jsxs50("div", { className: "camera-capture", children: [
     /* @__PURE__ */ jsx123("img", { className: "review-image", src: reviewImage == null ? void 0 : reviewImage.source, alt: "" }),
     /* @__PURE__ */ jsx123(
       Overlay_default,
@@ -18899,7 +18971,7 @@ function CameraCapture({
     ),
     /* @__PURE__ */ jsx123(ReviewBottomBar, { onSubmit: handleReviewSubmit, onRetry: handleReviewRetry })
   ] });
-  return /* @__PURE__ */ jsxs49("section", { children: [
+  return /* @__PURE__ */ jsxs50("section", { children: [
     mode === "CAPTURE" /* CAPTURE */ && captureScreen,
     mode === "REVIEW" /* REVIEW */ && reviewScreen,
     mode === "ERROR" /* ERROR */ && cameraError && /* @__PURE__ */ jsx123(CameraErrorScreen_default, __spreadValues({}, cameraError))
@@ -19095,9 +19167,9 @@ function getOrigin2(url) {
 // src/legacy/dynamicFlow/BackButton.tsx
 import { Avatar as Avatar7 } from "@transferwise/components";
 import { ArrowLeft as ArrowLeft2 } from "@transferwise/icons";
-import { jsx as jsx126, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx126, jsxs as jsxs51 } from "react/jsx-runtime";
 function BackButton2({ title, action, onAction }) {
-  return /* @__PURE__ */ jsxs50(
+  return /* @__PURE__ */ jsxs51(
     "a",
     {
       href: "/",
@@ -19117,7 +19189,7 @@ function BackButton2({ title, action, onAction }) {
 var BackButton_default2 = BackButton2;
 
 // src/legacy/dynamicFlow/DynamicFlowStep.tsx
-import { Fragment as Fragment24, jsx as jsx127, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx127, jsxs as jsxs52 } from "react/jsx-runtime";
 function DynamicFlowStep(props) {
   var _a, _b, _c;
   const { step, globalError, onAction } = props;
@@ -19136,7 +19208,7 @@ function DynamicFlowStep(props) {
   if (isCameraStep(step)) {
     return /* @__PURE__ */ jsx127(CameraStep_default, __spreadProps(__spreadValues({}, props), { step }));
   }
-  return /* @__PURE__ */ jsxs51(Fragment24, { children: [
+  return /* @__PURE__ */ jsxs52(Fragment24, { children: [
     backButton && /* @__PURE__ */ jsx127(BackButton_default2, __spreadProps(__spreadValues({}, backButton), { onAction })),
     globalError ? /* @__PURE__ */ jsx127(DynamicAlert_default, { component: { context: "negative", markdown: globalError, margin: "lg" } }) : null,
     /* @__PURE__ */ jsx127(LayoutStep_default, __spreadProps(__spreadValues({}, props), { stepSpecification: step }))
@@ -19660,7 +19732,7 @@ var DynamicFlowComponent = ({
       await performAction(action);
     }
   };
-  return /* @__PURE__ */ jsx129(LogProvider, { flowId, stepId: (step == null ? void 0 : step.id) || (step == null ? void 0 : step.key), onLog, children: /* @__PURE__ */ jsx129(EventsContextProvider, { metadata: analyticsMetadata, onEvent, children: /* @__PURE__ */ jsx129(DynamicFlowProvider, { loading: isLoading || isDebouncing, children: /* @__PURE__ */ jsx129(HttpClientProvider, { httpClient, children: /* @__PURE__ */ jsx129(FeatureContextProvider, { features, children: loader !== null ? loader : /* @__PURE__ */ jsx129(
+  return /* @__PURE__ */ jsx129(LogProvider, { flowId, stepId: (step == null ? void 0 : step.id) || (step == null ? void 0 : step.key), onLog, children: /* @__PURE__ */ jsx129(EventsContextProvider, { metadata: analyticsMetadata, onEvent, children: /* @__PURE__ */ jsx129(DynamicFlowProvider, { loading: isLoading || isDebouncing, children: /* @__PURE__ */ jsx129(HttpClientProvider, { httpClient, children: /* @__PURE__ */ jsx129(FeatureContextProvider, { features, children: loader !== null ? loader : /* @__PURE__ */ jsx129("div", { id: (step == null ? void 0 : step.id) || (step == null ? void 0 : step.key), className: "dynamic-flow-legacy", children: /* @__PURE__ */ jsx129(
     DynamicFlowStep,
     {
       step,
@@ -19674,7 +19746,7 @@ var DynamicFlowComponent = ({
       },
       onModelChange
     }
-  ) }) }) }) }) });
+  ) }) }) }) }) }) });
 };
 function DynamicFlow(props) {
   return /* @__PURE__ */ jsx129(ErrorBoundary_default, { onError: props.onError, children: /* @__PURE__ */ jsx129(DynamicFlowComponent, __spreadValues({}, props)) });