@wise/dynamic-flow-client 3.6.1 → 3.7.0

package/build/main.mjs

@@ -34,9 +34,6 @@ 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;
 };
@@ -118,152 +115,6 @@ var require_classnames = __commonJS({
   }
 });
 
-// ../../node_modules/.pnpm/clsx@2.0.0/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))
-      for (t = 0; t < e.length; t++)
-        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-    else
-      for (t in e)
-        e[t] && (n && (n += " "), n += t);
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = ""; f < arguments.length; )
-    (e = arguments[f++]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
-}
-var init_clsx = __esm({
-  "../../node_modules/.pnpm/clsx@2.0.0/node_modules/clsx/dist/clsx.mjs"() {
-    "use strict";
-  }
-});
-
-// ../../node_modules/.pnpm/@wise+art@2.10.0_@transferwise+neptune-css@14.9.6_@types+react@18.0.29_react-dom@18.2.0_react@18.2.0/node_modules/@wise/art/dist/index-d9418379.esm.js
-import { useState as useState5, useEffect as useEffect3, forwardRef, Suspense, lazy } from "react";
-import { jsx as jsx20, jsxs as jsxs6, Fragment as Fragment3 } from "react/jsx-runtime";
-var unknownFlagName, Flag, Sizes, ImageSizes, imageSizes, Assets, RenderMode;
-var init_index_d9418379_esm = __esm({
-  "../../node_modules/.pnpm/@wise+art@2.10.0_@transferwise+neptune-css@14.9.6_@types+react@18.0.29_react-dom@18.2.0_react@18.2.0/node_modules/@wise/art/dist/index-d9418379.esm.js"() {
-    "use strict";
-    init_clsx();
-    unknownFlagName = "wise";
-    Flag = ({
-      code,
-      intrinsicSize = 64,
-      className = void 0
-    }) => {
-      const [fallback, setFallback] = useState5(null);
-      useEffect3(() => {
-        setFallback(null);
-      }, [code]);
-      const detailed = intrinsicSize >= 150;
-      const name = fallback !== "unknown" ? `${code.toLowerCase()}${fallback == null && detailed ? "-detailed" : ""}` : unknownFlagName;
-      return /* @__PURE__ */ jsx20("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["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 = {}));
-    (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) {
@@ -1787,212 +1638,124 @@ import { Alert } from "@transferwise/components";
 // src/legacy/layout/utils/getNavigationOptionMedia.tsx
 import { Avatar, AvatarType } from "@transferwise/components";
 
+// ../../node_modules/.pnpm/@wise+art@2.7.0_react-dom@18.2.0_react@18.2.0/node_modules/@wise/art/dist/index.esm.js
+import { useState as useState3, useEffect as useEffect2, forwardRef } from "react";
+import { jsx as jsx6, jsxs, Fragment } from "react/jsx-runtime";
+var unknownFlagName = "wise";
+var Flag = ({
+  code,
+  intrinsicSize = 64
+}) => {
+  const [fallback, setFallback] = useState3(null);
+  useEffect2(() => {
+    setFallback(null);
+  }, [code]);
+  const detailed = intrinsicSize >= 150;
+  const name = fallback !== "unknown" ? `${code.toLowerCase()}${fallback == null && detailed ? "-detailed" : ""}` : unknownFlagName;
+  return /* @__PURE__ */ jsx6("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 = {}));
+
 // src/legacy/layout/icon/FlagIcon.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var isFlagIcon = (name) => isCurrencyFlagIcon(name) || isCountryFlagIcon(name);
-var isCurrencyFlagIcon = (name) => currencyCodes.some((currencyCode) => name === `flag-${currencyCode}`);
-var isCountryFlagIcon = (name) => countryCodes.some((countryCode) => name === `flag-${countryCode}`);
+import { jsx as jsx7 } 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__ */ jsx6(
-    "img",
-    {
-      src: `https://wise.com/web-art/assets/flags/${code}.svg`,
-      alt: "",
-      "data-testid": `img-flag-${code}`,
-      width: "24px"
-    }
-  );
+  return /* @__PURE__ */ jsx7(Flag, { intrinsicSize: 24, code });
 }
-var currencyCodes = [
-  "aed",
-  "ars",
-  "aud",
-  "bdt",
-  "bgn",
-  "bhd",
-  "bnd",
-  "brl",
-  "bwp",
-  "cad",
-  "chf",
-  "clp",
-  "cny",
-  "cop",
-  "crc",
-  "czk",
-  "dkk",
-  "egp",
-  "eur",
-  "fjd",
-  "gbp",
-  "gel",
-  "ghs",
-  "gtq",
-  "hkd",
-  "hrk",
-  "huf",
-  "idr",
-  "ils",
-  "imp",
-  "inr",
-  "isk",
-  "jmd",
-  "jpy",
-  "kes",
-  "krw",
-  "kwd",
-  "lak",
-  "lkr",
-  "lsl",
-  "mad",
-  "mur",
-  "mxn",
-  "myr",
-  "mzn",
-  "nad",
-  "ngn",
-  "nok",
-  "npr",
-  "nzd",
-  "omr",
-  "pab",
-  "pen",
-  "php",
-  "pkr",
-  "pln",
-  "qar",
-  "ron",
-  "rub",
-  "sar",
-  "sek",
-  "sgd",
-  "thb",
-  "tmt",
-  "try",
-  "twd",
-  "tzs",
-  "uah",
-  "ugx",
-  "usd",
-  "uyu",
-  "vnd",
-  "xof",
-  "zar",
-  "zmw"
-];
-var countryCodes = [
-  "ad",
-  "ae",
-  "ar",
-  "at",
-  "au",
-  "bd",
-  "be",
-  "bg",
-  "bh",
-  "bn",
-  "br",
-  "bw",
-  "ca",
-  "ch",
-  "cl",
-  "cn",
-  "co",
-  "cr",
-  "cy",
-  "cz",
-  "de",
-  "dk",
-  "ee",
-  "eg",
-  "es",
-  "eu",
-  "fi",
-  "fj",
-  "fr",
-  "gb",
-  "ge",
-  "gg",
-  "gh",
-  "gp",
-  "gr",
-  "gt",
-  "hk",
-  "hr",
-  "hu",
-  "id",
-  "ie",
-  "il",
-  "im",
-  "in",
-  "is",
-  "it",
-  "je",
-  "jm",
-  "jp",
-  "ke",
-  "kr",
-  "kw",
-  "la",
-  "li",
-  "lk",
-  "ls",
-  "lt",
-  "lu",
-  "lv",
-  "ma",
-  "mc",
-  "mt",
-  "mu",
-  "mx",
-  "my",
-  "mz",
-  "na",
-  "ng",
-  "nl",
-  "no",
-  "np",
-  "nz",
-  "om",
-  "pa",
-  "pe",
-  "ph",
-  "pk",
-  "pl",
-  "pt",
-  "qa",
-  "ro",
-  "ru",
-  "sa",
-  "se",
-  "sg",
-  "si",
-  "sk",
-  "sm",
-  "th",
-  "tm",
-  "tr",
-  "tw",
-  "tz",
-  "ua",
-  "ug",
-  "us",
-  "uy",
-  "va",
-  "vn",
-  "wi",
-  "xo",
-  "za",
-  "zm"
-];
 
 // src/legacy/layout/icon/NamedIcon.tsx
 import * as icons from "@transferwise/icons";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var isNamedIcon = (name) => {
   const iconName = toCapitalisedCamelCase(name);
   return Object.keys(icons).includes(iconName);
@@ -2003,19 +1766,19 @@ function NamedIcon({ name }) {
   }
   const iconName = toCapitalisedCamelCase(name);
   const Icon = icons[iconName];
-  return /* @__PURE__ */ jsx7(Icon, { size: 24 });
+  return /* @__PURE__ */ jsx8(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 jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function DynamicIcon({ type }) {
   if (isFlagIcon(type)) {
-    return /* @__PURE__ */ jsx8(FlagIcon, { name: type });
+    return /* @__PURE__ */ jsx9(FlagIcon, { name: type });
   }
   if (isNamedIcon(type)) {
-    return /* @__PURE__ */ jsx8(NamedIcon, { name: type });
+    return /* @__PURE__ */ jsx9(NamedIcon, { name: type });
   }
   return null;
 }
@@ -2025,17 +1788,17 @@ function isValidIconName(name) {
 var DynamicIcon_default = DynamicIcon;
 
 // src/legacy/layout/utils/getNavigationOptionMedia.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var getNavigationOptionMedia = ({ icon, image }) => {
   if (icon == null ? void 0 : icon.name) {
-    return /* @__PURE__ */ jsx9(Avatar, { type: AvatarType.ICON, children: /* @__PURE__ */ jsx9(DynamicIcon_default, { type: icon.name }) });
+    return /* @__PURE__ */ jsx10(Avatar, { type: AvatarType.ICON, children: /* @__PURE__ */ jsx10(DynamicIcon_default, { type: icon.name }) });
   }
   if (icon == null ? void 0 : icon.text) {
-    return /* @__PURE__ */ jsx9(Avatar, { type: AvatarType.INITIALS, children: icon.text });
+    return /* @__PURE__ */ jsx10(Avatar, { type: AvatarType.INITIALS, children: icon.text });
   }
   if (image == null ? void 0 : image.url) {
     const { url, text } = image;
-    return /* @__PURE__ */ jsx9("img", { src: url, alt: text });
+    return /* @__PURE__ */ jsx10("img", { src: url, alt: text });
   }
   return null;
 };
@@ -2071,10 +1834,10 @@ var getTextAlignment = (align) => {
 var getTextAlignmentAndMargin = (component) => `${getTextAlignment(component.align)} ${getMargin(component.margin)}`;
 
 // src/legacy/layout/alert/DynamicAlert.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var DynamicAlert = (props) => {
   const alert = props.component;
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     Alert,
     {
       type: mapContextToAlertType(legacy_mapContext(alert.context)),
@@ -2107,12 +1870,12 @@ var mapContextToAlertType = (context) => {
 var DynamicAlert_default = DynamicAlert;
 
 // src/legacy/layout/box/DynamicBox.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } 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__ */ jsx11("div", { className: margin + getBorderClass(box.border), children: /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12("div", { className: margin + getBorderClass(box.border), children: /* @__PURE__ */ jsx12(
       DynamicLayout_default,
       {
         components: box.components,
@@ -2125,7 +1888,7 @@ var DynamicBox = (props) => {
       }
     ) });
   }
-  return /* @__PURE__ */ jsx11("div", { className: "row", children: /* @__PURE__ */ jsx11("div", { className: margin + getBoxWidthClasses(box), children: /* @__PURE__ */ jsx11("div", { className: getBorderClass(box.border), children: /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12("div", { className: "row", children: /* @__PURE__ */ jsx12("div", { className: margin + getBoxWidthClasses(box), children: /* @__PURE__ */ jsx12("div", { className: getBorderClass(box.border), children: /* @__PURE__ */ jsx12(
     DynamicLayout_default,
     {
       components: box.components,
@@ -2209,7 +1972,7 @@ var getButtonSize = (size) => {
 };
 
 // src/legacy/layout/button/DynamicButton.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function DynamicButton(props) {
   var _a;
   const { component, onAction } = props;
@@ -2218,7 +1981,7 @@ function DynamicButton(props) {
   const priority = getButtonPriority(component);
   const { loading } = useDynamicFlow();
   const className = getMargin(component.margin || "md");
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     Button,
     {
       size: getButtonSize(component.size),
@@ -2235,12 +1998,12 @@ function DynamicButton(props) {
 var DynamicButton_default = DynamicButton;
 
 // src/legacy/layout/columns/DynamicColumns.tsx
-import { jsx as jsx13, jsxs } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs2 } from "react/jsx-runtime";
 var DynamicColumns = (props) => {
   const columns = props.component;
   const { leftWidth, rightWidth } = getWidth(columns.bias);
-  return /* @__PURE__ */ jsxs("div", { className: `${getMargin(columns.margin || "xs")} row`, children: [
-    /* @__PURE__ */ jsx13("div", { className: `${leftWidth} m-b-0`, children: /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs2("div", { className: `${getMargin(columns.margin || "xs")} row`, children: [
+    /* @__PURE__ */ jsx14("div", { className: `${leftWidth} m-b-0`, children: /* @__PURE__ */ jsx14(
       DynamicLayout_default,
       {
         components: columns.left,
@@ -2252,7 +2015,7 @@ var DynamicColumns = (props) => {
         onPersistAsync: props.onPersistAsync
       }
     ) }),
-    /* @__PURE__ */ jsx13("div", { className: `${rightWidth} m-b-0`, children: /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14("div", { className: `${rightWidth} m-b-0`, children: /* @__PURE__ */ jsx14(
       DynamicLayout_default,
       {
         components: columns.right,
@@ -2288,10 +2051,10 @@ var DynamicColumns_default = DynamicColumns;
 
 // src/legacy/layout/decision/DynamicDecision.tsx
 import { NavigationOption, NavigationOptionsList } from "@transferwise/components";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function DynamicDecision({ component, onAction }) {
   const { loading } = useDynamicFlow();
-  return /* @__PURE__ */ jsx14("div", { className: getMargin(component.margin), children: /* @__PURE__ */ jsx14(NavigationOptionsList, { children: component.options.map((option) => /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15("div", { className: getMargin(component.margin), children: /* @__PURE__ */ jsx15(NavigationOptionsList, { children: component.options.map((option) => /* @__PURE__ */ jsx15(
     NavigationOption,
     {
       title: option.title,
@@ -2308,17 +2071,17 @@ function DynamicDecision({ component, onAction }) {
 var DynamicDecision_default = DynamicDecision;
 
 // src/legacy/layout/divider/DynamicDivider.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var DynamicDivider = ({ component }) => {
   const margin = getMargin(component.margin);
   const className = `m-t-0 ${margin}`;
-  return /* @__PURE__ */ jsx15("hr", { className });
+  return /* @__PURE__ */ jsx16("hr", { className });
 };
 var DynamicDivider_default = DynamicDivider;
 
 // src/legacy/layout/external/DynamicExternal.tsx
 import { Button as Button2, Loader, Size as Size2 } from "@transferwise/components";
-import { useCallback as useCallback4, useEffect as useEffect2 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect3 } from "react";
 import { useIntl } from "react-intl";
 
 // src/legacy/layout/external/DynamicExternal.messages.ts
@@ -2332,7 +2095,7 @@ var DynamicExternal_messages_default = defineMessages2({
 });
 
 // src/legacy/layout/external/DynamicExternal.tsx
-import { Fragment, jsx as jsx16, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs3 } from "react/jsx-runtime";
 var DynamicExternal = ({ component, onAction }) => {
   const { requestUrl, responseHandlers, polling, retryTitle } = component;
   const intl = useIntl();
@@ -2340,17 +2103,17 @@ var DynamicExternal = ({ component, onAction }) => {
     () => window.open(requestUrl, "df-external-window"),
     [requestUrl]
   );
-  useEffect2(() => {
+  useEffect3(() => {
     openExternalUrl();
   }, [openExternalUrl]);
   const pollingConfiguration = polling && responseHandlers ? __spreadProps(__spreadValues({}, polling), {
     responseHandlers
   }) : void 0;
   useExternalStepPolling(pollingConfiguration, onAction);
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx16(Loader, { size: Size2.LARGE, classNames: { "tw-loader": "tw-loader m-x-auto" } }),
-    /* @__PURE__ */ jsx16("br", {}),
-    /* @__PURE__ */ jsx16(Button2, { priority: "tertiary", block: true, onClick: openExternalUrl, children: retryTitle || intl.formatMessage(DynamicExternal_messages_default.retryTitle) })
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx17(Loader, { size: Size2.LARGE, classNames: { "tw-loader": "tw-loader m-x-auto" } }),
+    /* @__PURE__ */ jsx17("br", {}),
+    /* @__PURE__ */ jsx17(Button2, { priority: "tertiary", block: true, onClick: openExternalUrl, children: retryTitle || intl.formatMessage(DynamicExternal_messages_default.retryTitle) })
   ] });
 };
 var DynamicExternal_default = DynamicExternal;
@@ -2361,8 +2124,8 @@ import { useEffect as useEffect10 } from "react";
 // src/legacy/jsonSchemaForm/allOfSchema/AllOfSchema.tsx
 var import_classnames = __toESM(require_classnames());
 import { Header } from "@transferwise/components";
-import { useState as useState3 } from "react";
-import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useState as useState4 } from "react";
+import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs4 } 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) => ({
@@ -2377,13 +2140,13 @@ function AllOfSchema(props) {
     setModels(models);
     props.onChange(__spreadProps(__spreadValues({}, onChangeProps), { model: combineModels(models) }));
   };
-  const [models, setModels] = useState3(splitModel(props.model, props.schema.allOf));
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    props.schema.title && /* @__PURE__ */ jsx17(Header, { title: props.schema.title }),
-    props.schema.description && /* @__PURE__ */ jsx17("p", { children: props.schema.description }),
-    /* @__PURE__ */ jsx17("div", { className: "row", children: props.schema.allOf.map((schema, index) => (
+  const [models, setModels] = useState4(splitModel(props.model, props.schema.allOf));
+  return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+    props.schema.title && /* @__PURE__ */ jsx18(Header, { title: props.schema.title }),
+    props.schema.description && /* @__PURE__ */ jsx18("p", { children: props.schema.description }),
+    /* @__PURE__ */ jsx18("div", { className: "row", children: props.schema.allOf.map((schema, index) => (
       // eslint-disable-next-line react/no-array-index-key
-      /* @__PURE__ */ jsx17("div", { className: (0, import_classnames.default)(getSchemaColumnClasses(schema.width)), children: /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx18("div", { className: (0, import_classnames.default)(getSchemaColumnClasses(schema.width)), children: /* @__PURE__ */ jsx18(
         GenericSchema_default,
         {
           schema,
@@ -2412,7 +2175,7 @@ import {
   Status,
   UploadInput
 } from "@transferwise/components";
-import { useMemo as useMemo6, useState as useState4 } from "react";
+import { useMemo as useMemo6, useState as useState5 } from "react";
 
 // src/legacy/jsonSchemaForm/controlFeedback/ControlFeedback.tsx
 import { InlineAlert } from "@transferwise/components";
@@ -2490,7 +2253,7 @@ var validation_messages_default = defineMessages4({
 });
 
 // src/legacy/jsonSchemaForm/controlFeedback/ControlFeedback.tsx
-import { jsx as jsx18, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs5 } from "react/jsx-runtime";
 function ControlFeedback(props) {
   var _a;
   const defaultValidationMessages = useDefaultValidationMessages(props.schema);
@@ -2499,12 +2262,12 @@ 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__ */ jsxs4("div", { id: props.id, children: [
-    isErrorVisible ? /* @__PURE__ */ jsx18(InlineAlert, { type: "error", children: props.errors }) : null,
-    isValidationVisible ? /* @__PURE__ */ jsx18(InlineAlert, { type: "error", children: props.validations.map((validation) => /* @__PURE__ */ jsx18("div", { children: validationMessages[validation] }, validation)) }) : null,
-    (isDescriptionVisible || hasInfoMessage) && /* @__PURE__ */ jsxs4(InlineAlert, { type: "info", children: [
-      isDescriptionVisible && /* @__PURE__ */ jsx18("div", { children: props.schema.description }),
-      hasInfoMessage && /* @__PURE__ */ jsx18("div", { children: props.infoMessage })
+  return /* @__PURE__ */ jsxs5("div", { id: props.id, children: [
+    isErrorVisible ? /* @__PURE__ */ jsx19(InlineAlert, { type: "error", children: props.errors }) : null,
+    isValidationVisible ? /* @__PURE__ */ jsx19(InlineAlert, { type: "error", children: props.validations.map((validation) => /* @__PURE__ */ jsx19("div", { children: validationMessages[validation] }, validation)) }) : null,
+    (isDescriptionVisible || hasInfoMessage) && /* @__PURE__ */ jsxs5(InlineAlert, { type: "info", children: [
+      isDescriptionVisible && /* @__PURE__ */ jsx19("div", { children: props.schema.description }),
+      hasInfoMessage && /* @__PURE__ */ jsx19("div", { children: props.infoMessage })
     ] })
   ] });
 }
@@ -2650,15 +2413,15 @@ function useFormattedDefaultErrorMessages({
 }
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/multipleFileUploadSchema/MultipleFileUploadSchema.tsx
-import { jsx as jsx19, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
 function MultipleFileUploadSchema(props) {
   var _a, _b;
   const { onChange, schema } = props;
   const onEvent = useEventDispatcher();
   const defaultErrorMessages = useFormattedDefaultErrorMessages(schema);
   const uid = useMemo6(() => schema.$id || generateRandomId(), [schema.$id]);
-  const [inputChanged, setInputChanged] = useState4(false);
-  const [files, setFiles] = useState4(() => convertFileIdsToComponentFileObjects(props.model || []));
+  const [inputChanged, setInputChanged] = useState5(false);
+  const [files, setFiles] = useState5(() => convertFileIdsToComponentFileObjects(props.model || []));
   const performPersistAsync = usePersistAsync(schema.items.persistAsync);
   const fileSchemaDescriptor = schema.items.persistAsync.schema;
   const isBlob = isBlobSchema(fileSchemaDescriptor);
@@ -2712,10 +2475,10 @@ function MultipleFileUploadSchema(props) {
     onDeleteFile: () => Promise.resolve()
   });
   const feedbackId = `${uid}-feedback`;
-  return /* @__PURE__ */ jsxs5("div", { className: (0, import_classnames2.default)("form-group", { "has-error": showError }), children: [
-    /* @__PURE__ */ jsx19("label", { className: "d-block control-label", htmlFor: uid, children: props.schema.title }),
-    /* @__PURE__ */ jsx19("div", { "aria-describedby": feedbackId, children: /* @__PURE__ */ jsx19(UploadInput, __spreadValues({}, uploadInputProps)) }),
-    /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs6("div", { className: (0, import_classnames2.default)("form-group", { "has-error": showError }), children: [
+    /* @__PURE__ */ jsx20("label", { className: "d-block control-label", htmlFor: uid, children: props.schema.title }),
+    /* @__PURE__ */ jsx20("div", { "aria-describedby": feedbackId, children: /* @__PURE__ */ jsx20(UploadInput, __spreadValues({}, uploadInputProps)) }),
+    /* @__PURE__ */ jsx20(
       ControlFeedback_default,
       {
         id: feedbackId,
@@ -2763,14 +2526,6 @@ import { useIntl as useIntl4 } from "react-intl";
 
 // src/legacy/jsonSchemaForm/schemaFormControl/utils/mapping-utils.tsx
 import { Avatar as Avatar2, AvatarType as AvatarType2 } from "@transferwise/components";
-
-// ../../node_modules/.pnpm/@wise+art@2.10.0_@transferwise+neptune-css@14.9.6_@types+react@18.0.29_react-dom@18.2.0_react@18.2.0/node_modules/@wise/art/dist/index.esm.js
-init_index_d9418379_esm();
-init_clsx();
-import "react";
-import "react/jsx-runtime";
-
-// src/legacy/jsonSchemaForm/schemaFormControl/utils/mapping-utils.tsx
 import { jsx as jsx21 } from "react/jsx-runtime";
 var mapConstSchemaToOption = (schema, controlType) => {
   switch (controlType) {
@@ -5586,7 +5341,7 @@ var addQueryParameter = (url, key, value) => {
 
 // src/legacy/layout/search/DynamicSearch.tsx
 var import_classnames9 = __toESM(require_classnames());
-import { Typeahead } from "@transferwise/components";
+import { Markdown as Markdown3, Typeahead } from "@transferwise/components";
 import { jsx as jsx55, jsxs as jsxs21 } from "react/jsx-runtime";
 var DEBOUNCE_TIME = 400;
 function DynamicSearch({ component, onAction }) {
@@ -5632,7 +5387,15 @@ function DynamicSearch({ component, onAction }) {
           name: "typeahead-input-name",
           size: "md",
           maxHeight: 100,
-          footer: /* @__PURE__ */ jsx55(TypeaheadFooter, { state: status, results, onRetrySearch }),
+          footer: /* @__PURE__ */ jsx55(
+            TypeaheadFooter,
+            {
+              state: status,
+              results,
+              emptyMessage,
+              onRetrySearch
+            }
+          ),
           multiple: false,
           clearable: false,
           addon: /* @__PURE__ */ jsx55(Search, { size: 24 }),
@@ -5669,10 +5432,11 @@ function mapResultToTypeaheadOption(result) {
 function TypeaheadFooter({
   results,
   state,
-  onRetrySearch
+  onRetrySearch,
+  emptyMessage
 }) {
   if (state === "success" && results.length === 0) {
-    return /* @__PURE__ */ jsx55("p", { className: "m-t-2 m-x-2", children: "No results found" });
+    return /* @__PURE__ */ jsx55(Markdown3, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: emptyMessage });
   }
   if (state === "error" && results.length === 0) {
     return /* @__PURE__ */ jsx55("div", { className: "m-t-2 m-x-2", children: /* @__PURE__ */ jsx55(ErrorResult, { onRetrySearch }) });
@@ -8453,7 +8217,7 @@ function $1746a345f3d73bb7$export$f680877a34711e37(deterministicId) {
   return deterministicId || (id ? `radix-${id}` : "");
 }
 
-// ../../node_modules/.pnpm/@wise+forms@0.3.4_@transferwise+components@46.26.2_@types+react@18.0.29_react@18.2.0/node_modules/@wise/forms/dist/index.mjs
+// ../../node_modules/.pnpm/@wise+forms@0.3.4_@transferwise+components@46.27.0_@types+react@18.0.29_react@18.2.0/node_modules/@wise/forms/dist/index.mjs
 var import_classnames11 = __toESM(require_classnames(), 1);
 import { InlineAlert as InlineAlert2, Sentiment as Sentiment2, Input as Input2, TextArea } from "@transferwise/components";
 import { createContext as createContext6, useContext as useContext7, forwardRef as forwardRef2 } from "react";
@@ -8520,7 +8284,7 @@ var Field = ({
 };
 
 // src/revamp/wise/renderers/components/Help.tsx
-import { Info as Info2, Markdown as Markdown3 } from "@transferwise/components";
+import { Info as Info2, Markdown as Markdown4 } from "@transferwise/components";
 import { useIntl as useIntl19 } from "react-intl";
 import { jsx as jsx76 } from "react/jsx-runtime";
 function Help2({ help }) {
@@ -8529,7 +8293,7 @@ function Help2({ help }) {
     Info2,
     {
       className: "m-l-1",
-      content: /* @__PURE__ */ jsx76(Markdown3, { config: { link: { target: "_blank" } }, children: help }),
+      content: /* @__PURE__ */ jsx76(Markdown4, { config: { link: { target: "_blank" } }, children: help }),
       presentation: "POPOVER",
       size: "sm",
       "aria-label": intl.formatMessage(help_messages_default.helpAria)
@@ -8793,205 +8557,14 @@ import { NavigationOptionsList as NavigationOptionsList3, NavigationOption as Na
 
 // src/revamp/wise/renderers/components/icon/FlagIcon.tsx
 import { jsx as jsx85 } from "react/jsx-runtime";
-var isFlagIcon2 = (name) => isCurrencyFlagIcon2(name) || isCountryFlagIcon2(name);
-var isCurrencyFlagIcon2 = (name) => currencyCodes2.some((currencyCode) => name === `flag-${currencyCode}`);
-var isCountryFlagIcon2 = (name) => countryCodes2.some((countryCode) => name === `flag-${countryCode}`);
+var isFlagIcon2 = (name) => name.startsWith("flag-");
 function FlagIcon2({ name }) {
   if (!isFlagIcon2(name)) {
     return null;
   }
   const code = name.substring(5);
-  return /* @__PURE__ */ jsx85(
-    "img",
-    {
-      src: `https://wise.com/web-art/assets/flags/${code}.svg`,
-      alt: "",
-      "data-testid": `img-flag-${code}`
-    }
-  );
+  return /* @__PURE__ */ jsx85(Flag, { code });
 }
-var currencyCodes2 = [
-  "aed",
-  "ars",
-  "aud",
-  "bdt",
-  "bgn",
-  "bhd",
-  "bnd",
-  "brl",
-  "bwp",
-  "cad",
-  "chf",
-  "clp",
-  "cny",
-  "cop",
-  "crc",
-  "czk",
-  "dkk",
-  "egp",
-  "eur",
-  "fjd",
-  "gbp",
-  "gel",
-  "ghs",
-  "gtq",
-  "hkd",
-  "hrk",
-  "huf",
-  "idr",
-  "ils",
-  "imp",
-  "inr",
-  "isk",
-  "jmd",
-  "jpy",
-  "kes",
-  "krw",
-  "kwd",
-  "lak",
-  "lkr",
-  "lsl",
-  "mad",
-  "mur",
-  "mxn",
-  "myr",
-  "mzn",
-  "nad",
-  "ngn",
-  "nok",
-  "npr",
-  "nzd",
-  "omr",
-  "pab",
-  "pen",
-  "php",
-  "pkr",
-  "pln",
-  "qar",
-  "ron",
-  "rub",
-  "sar",
-  "sek",
-  "sgd",
-  "thb",
-  "tmt",
-  "try",
-  "twd",
-  "tzs",
-  "uah",
-  "ugx",
-  "usd",
-  "uyu",
-  "vnd",
-  "xof",
-  "zar",
-  "zmw"
-];
-var countryCodes2 = [
-  "ad",
-  "ae",
-  "ar",
-  "at",
-  "au",
-  "bd",
-  "be",
-  "bg",
-  "bh",
-  "bn",
-  "br",
-  "bw",
-  "ca",
-  "ch",
-  "cl",
-  "cn",
-  "co",
-  "cr",
-  "cy",
-  "cz",
-  "de",
-  "dk",
-  "ee",
-  "eg",
-  "es",
-  "eu",
-  "fi",
-  "fj",
-  "fr",
-  "gb",
-  "ge",
-  "gg",
-  "gh",
-  "gp",
-  "gr",
-  "gt",
-  "hk",
-  "hr",
-  "hu",
-  "id",
-  "ie",
-  "il",
-  "im",
-  "in",
-  "is",
-  "it",
-  "je",
-  "jm",
-  "jp",
-  "ke",
-  "kr",
-  "kw",
-  "la",
-  "li",
-  "lk",
-  "ls",
-  "lt",
-  "lu",
-  "lv",
-  "ma",
-  "mc",
-  "mt",
-  "mu",
-  "mx",
-  "my",
-  "mz",
-  "na",
-  "ng",
-  "nl",
-  "no",
-  "np",
-  "nz",
-  "om",
-  "pa",
-  "pe",
-  "ph",
-  "pk",
-  "pl",
-  "pt",
-  "qa",
-  "ro",
-  "ru",
-  "sa",
-  "se",
-  "sg",
-  "si",
-  "sk",
-  "sm",
-  "th",
-  "tm",
-  "tr",
-  "tw",
-  "tz",
-  "ua",
-  "ug",
-  "us",
-  "uy",
-  "va",
-  "vn",
-  "wi",
-  "xo",
-  "za",
-  "zm"
-];
 
 // src/revamp/wise/renderers/components/icon/NamedIcon.tsx
 import * as icons2 from "@transferwise/icons";
@@ -9282,11 +8855,11 @@ var LoadingIndicatorRenderer = {
 var LoadingIndicatorRenderer_default = LoadingIndicatorRenderer;
 
 // src/revamp/wise/renderers/MarkdownRenderer.tsx
-import { Markdown as Markdown4 } from "@transferwise/components";
+import { Markdown as Markdown5 } from "@transferwise/components";
 import { jsx as jsx98 } from "react/jsx-runtime";
 var MarkdownRenderer = {
   canRenderType: "markdown",
-  render: ({ content, align, margin }) => /* @__PURE__ */ jsx98("div", { className: getTextAlignmentAndMargin2({ align, margin }), children: /* @__PURE__ */ jsx98(Markdown4, { config: { link: { target: "_blank" } }, children: content }) })
+  render: ({ content, align, margin }) => /* @__PURE__ */ jsx98("div", { className: getTextAlignmentAndMargin2({ align, margin }), children: /* @__PURE__ */ jsx98(Markdown5, { config: { link: { target: "_blank" } }, children: content }) })
 };
 var MarkdownRenderer_default = MarkdownRenderer;
 
@@ -9619,7 +9192,7 @@ function ItemSummaryOption2({
 var RepeatableRenderer_default = RepeatableRenderer;
 
 // src/revamp/wise/renderers/SearchRenderer/BlockSearchRendererComponent.tsx
-import { Input as Input6, NavigationOption as NavigationOption7, NavigationOptionsList as NavigationOptionsList4 } from "@transferwise/components";
+import { Input as Input6, Markdown as Markdown6, NavigationOption as NavigationOption7, NavigationOptionsList as NavigationOptionsList4 } from "@transferwise/components";
 
 // src/revamp/wise/renderers/SearchRenderer/ErrorResult.tsx
 import { useIntl as useIntl22 } from "react-intl";
@@ -9695,7 +9268,7 @@ function SearchResultContent({
   }
 }
 function EmptySearchResult({ state }) {
-  return /* @__PURE__ */ jsx106("p", { className: "m-t-2", children: state.message });
+  return /* @__PURE__ */ jsx106(Markdown6, { className: "m-t-2", config: { link: { target: "_blank" } }, children: state.message });
 }
 function SearchResults2({
   state
@@ -9722,7 +9295,7 @@ function SearchResults2({
 var BlockSearchRendererComponent_default = BlockSearchRendererComponent;
 
 // src/revamp/wise/renderers/SearchRenderer/InlineSearchRendererComponent.tsx
-import { Typeahead as Typeahead2 } from "@transferwise/components";
+import { Markdown as Markdown7, Typeahead as Typeahead2 } from "@transferwise/components";
 import { Search as Search2 } from "@transferwise/icons";
 import { useState as useState32 } from "react";
 import { jsx as jsx107, jsxs as jsxs43 } from "react/jsx-runtime";
@@ -9785,7 +9358,7 @@ function mapResultToTypeaheadOption2(result) {
 }
 function TypeaheadFooter2({ state, isLoading }) {
   if (state.type === "noResults") {
-    return /* @__PURE__ */ jsx107("p", { className: "m-t-2 m-x-2", children: "No results found" });
+    return /* @__PURE__ */ jsx107(Markdown7, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: state.message });
   }
   if (state.type === "error") {
     return /* @__PURE__ */ jsx107("div", { className: "m-t-2 m-x-2", children: /* @__PURE__ */ jsx107(ErrorResult2, { state }) });
@@ -17948,10 +17521,17 @@ var mapStepToComponent = (_a) => {
     "displayStepTitle",
     "trackEvent"
   ]);
-  var _a2;
+  var _a2, _b2;
   const { httpClient, step, updateComponent } = restProps;
-  const { id, external, key, layout = [], polling } = step;
-  const refreshUrl = (_a2 = step.refreshUrl) != null ? _a2 : step.refreshFormUrl;
+  const { id, navigation, external, key, layout = [], polling } = step;
+  const backNavigation = (_a2 = navigation == null ? void 0 : navigation.back) != null ? _a2 : navigation == null ? void 0 : navigation.backButton;
+  const back = backNavigation ? {
+    title: backNavigation.title,
+    onClick: () => {
+      void restProps.onAction(__spreadProps(__spreadValues({}, backNavigation.action), { skipValidation: true }));
+    }
+  } : void 0;
+  const refreshUrl = (_b2 = step.refreshUrl) != null ? _b2 : step.refreshFormUrl;
   const stepId = id || key;
   if (stepId === void 0) {
     throw new Error("Step must have an id or a key");
@@ -17984,6 +17564,7 @@ var mapStepToComponent = (_a) => {
   const stepComponent = createStepComponent({
     uid,
     components: [...additionalComponents, ...layoutComponents],
+    back,
     external,
     loadingState,
     stepPolling,
@@ -18086,9 +17667,17 @@ var executeSubmission = async (props) => {
       return { type: "complete", result };
     }
     try {
+      const makeRequestBody = () => {
+        var _a;
+        if (method === "GET") {
+          return void 0;
+        }
+        const payload = mergeModels(model, (_a = action.data) != null ? _a : null);
+        return payload !== null ? JSON.stringify(payload) : null;
+      };
       const response = await httpClient(url != null ? url : "", {
         method,
-        body: method === "GET" ? void 0 : JSON.stringify(model),
+        body: makeRequestBody(),
         headers: { "Content-Type": "application/json" }
       });
       if (!response.ok) {
@@ -18147,8 +17736,9 @@ var CoreContainerRenderer = {
 };
 
 // src/revamp/renderers/stepComponentToProps.ts
-var stepComponentToProps = ({ external, loadingState, trackEvent }, children) => ({
+var stepComponentToProps = ({ back, external, loadingState, trackEvent }, children) => ({
   type: "step",
+  back,
   external,
   loadingState,
   trackEvent,
@@ -18785,7 +18375,7 @@ import { useMemo as useMemo18 } from "react";
 
 // src/revamp/renderers/step/ExternalConfirmationDialog.tsx
 import { useIntl as useIntl23 } from "react-intl";
-import { Button as Button11, Markdown as Markdown5 } from "@transferwise/components";
+import { Button as Button11, Markdown as Markdown8 } from "@transferwise/components";
 import { jsx as jsx122, jsxs as jsxs49 } from "react/jsx-runtime";
 function ExternalConfirmationDialog({
   external,
@@ -18794,7 +18384,7 @@ function ExternalConfirmationDialog({
   const { formatMessage } = useIntl23();
   return /* @__PURE__ */ jsx122("div", { className: "df-box-renderer-fixed-width", children: /* @__PURE__ */ jsxs49("div", { className: "df-box-renderer-width-lg", children: [
     /* @__PURE__ */ jsx122("h2", { className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.title) }),
-    /* @__PURE__ */ jsx122(Markdown5, { config: { link: { target: "_blank" } }, className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.description, { origin: getOrigin2(external.url) }) }),
+    /* @__PURE__ */ jsx122(Markdown8, { config: { link: { target: "_blank" } }, className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.description, { origin: getOrigin2(external.url) }) }),
     /* @__PURE__ */ jsx122("div", { className: "df-box-renderer-fixed-width", children: /* @__PURE__ */ jsxs49("div", { className: "df-box-renderer-width-lg", children: [
       /* @__PURE__ */ jsx122(
         Button11,
@@ -18838,20 +18428,47 @@ function useExternal2(url) {
   return { requiresUserConfirmation, dismissConfirmation };
 }
 
+// src/revamp/renderers/step/BackButton.tsx
+import { Avatar as Avatar7 } from "@transferwise/components";
+import { ArrowLeft as ArrowLeft2 } from "@transferwise/icons";
+import { jsx as jsx123, jsxs as jsxs50 } from "react/jsx-runtime";
+function BackButton2({ title, onClick }) {
+  return /* @__PURE__ */ jsxs50(
+    "a",
+    {
+      href: "/",
+      className: "df-back-btn",
+      "aria-label": title,
+      onClick: (event) => {
+        event.preventDefault();
+        onClick();
+      },
+      children: [
+        /* @__PURE__ */ jsx123("span", { className: "sr-only", children: title }),
+        /* @__PURE__ */ jsx123(Avatar7, { type: "icon", children: /* @__PURE__ */ jsx123(ArrowLeft2, { size: "24" }) })
+      ]
+    }
+  );
+}
+var BackButton_default2 = BackButton2;
+
 // src/revamp/renderers/step/StepRenderer.tsx
-import { jsx as jsx123 } from "react/jsx-runtime";
+import { jsx as jsx124, jsxs as jsxs51 } from "react/jsx-runtime";
 var StepRenderer = {
   canRenderType: "step",
   render: StepRendererComponent
 };
 function StepRendererComponent(props) {
-  const { loadingState, external, trackEvent, children } = props;
+  const { back, loadingState, external, trackEvent, children } = props;
   const value = useMemo18(() => ({ loadingState, trackEvent }), [loadingState, trackEvent]);
   const { requiresUserConfirmation, dismissConfirmation } = useExternal2(external == null ? void 0 : external.url);
   if ((external == null ? void 0 : external.url) && requiresUserConfirmation) {
-    return /* @__PURE__ */ jsx123(ExternalConfirmationDialog, { external, onClose: dismissConfirmation });
+    return /* @__PURE__ */ jsx124(ExternalConfirmationDialog, { external, onClose: dismissConfirmation });
   }
-  return /* @__PURE__ */ jsx123(StepRendererContextProvider, { value, children });
+  return /* @__PURE__ */ jsxs51(StepRendererContextProvider, { value, children: [
+    back ? /* @__PURE__ */ jsx124(BackButton_default2, __spreadValues({}, back)) : null,
+    children
+  ] });
 }
 
 // src/revamp/utils/findComponent.ts
@@ -18884,7 +18501,7 @@ function useStableCallback(handler) {
 }
 
 // src/revamp/DynamicFlowCore.tsx
-import { jsx as jsx124 } from "react/jsx-runtime";
+import { jsx as jsx125 } from "react/jsx-runtime";
 function DynamicFlowCore(props) {
   const _a = props, { flowId, initialAction, initialStep, renderers: renderers2, displayStepTitle = true } = _a, rest = __objRest(_a, ["flowId", "initialAction", "initialStep", "renderers", "displayStepTitle"]);
   const httpClient = useStableCallback(rest.httpClient);
@@ -18910,7 +18527,7 @@ function DynamicFlowCore(props) {
   useEffect25(() => {
     trackCoreEvent("Initiated");
     if (!initialStep && initialAction) {
-      void onAction(initialAction);
+      void onAction(__spreadValues({ method: "GET" }, initialAction));
     }
     if (initialStep && !initialAction) {
       initialiseWithStep(initialStep, null);
@@ -19003,14 +18620,13 @@ function DynamicFlowCore(props) {
     []
   );
   const onAction = useCallback11(async (action) => {
-    var _a2, _b, _c, _d;
+    var _a2, _b, _c;
     try {
       (_a2 = stepComponentRef.current) == null ? void 0 : _a2.setLoadingState("loading");
       const model = (_c = await ((_b = stepComponentRef.current) == null ? void 0 : _b.getSubmittableValue())) != null ? _c : null;
-      const payload = mergeModels(model, (_d = action.data) != null ? _d : null);
       const command = await executeSubmission({
         action,
-        model: payload,
+        model,
         isInitial: stepRef.current === null,
         httpClient,
         trackEvent: trackCoreEvent
@@ -19088,11 +18704,11 @@ function DynamicFlowCore(props) {
     () => getRenderFunction([CoreContainerRenderer, ...renderers2, StepRenderer]),
     [renderers2]
   );
-  return /* @__PURE__ */ jsx124(ErrorBoundary_default, { onError: closeWithError, children: stepComponent ? render(stepComponent) : null });
+  return /* @__PURE__ */ jsx125(ErrorBoundary_default, { onError: closeWithError, children: stepComponent ? render(stepComponent) : null });
 }
 
 // src/revamp/DynamicFlowWise.tsx
-import { jsx as jsx125 } from "react/jsx-runtime";
+import { jsx as jsx126 } from "react/jsx-runtime";
 var renderers = getWiseRenderers();
 function DynamicFlowWise(props) {
   const { httpClient } = props;
@@ -19101,7 +18717,7 @@ function DynamicFlowWise(props) {
     () => makeWiseHttpClient(httpClient, locale),
     [httpClient, locale]
   );
-  return /* @__PURE__ */ jsx125(HttpClientProvider, { httpClient: wiseHttpClient, children: /* @__PURE__ */ jsx125(DynamicFlowCore, __spreadProps(__spreadValues({}, props), { renderers })) });
+  return /* @__PURE__ */ jsx126(HttpClientProvider, { httpClient: wiseHttpClient, children: /* @__PURE__ */ jsx126(DynamicFlowCore, __spreadProps(__spreadValues({}, props), { renderers })) });
 }
 var DynamicFlowWise_default = DynamicFlowWise;
 var makeWiseHttpClient = (httpClient, locale) => async (input, init) => httpClient(