@wise/dynamic-flow-client 3.27.0 → 3.28.0

package/build/main.js

@@ -518,7 +518,7 @@ var de_default = {
   "dynamicFlows.ExternalConfirmation.open": "In neuem Tab \xF6ffnen",
   "dynamicFlows.ExternalConfirmation.title": "Bitte best\xE4tigen",
   "dynamicFlows.FileUploadSchema.maxFileSizeError": "Diese Datei ist leider zu gro\xDF. Bitte lade eine kleinere Datei hoch.",
-  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "Sorry, that file format is not supported. Please upload a different file.",
+  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "Das Dateiformat wird leider nicht unterst\xFCtzt. Bitte lade eine andere Datei hoch.",
   "dynamicFlows.Help.ariaLabel": "Klicke hier f\xFCr mehr Informationen.",
   "dynamicFlows.MultiSelect.summary": "{first} und {count} weitere",
   "dynamicFlows.MultipleFileUploadSchema.maxFileSizeError": "Diese Datei ist leider zu gro\xDF. Bitte lade eine kleinere Datei hoch.",
@@ -836,7 +836,7 @@ var it_default = {
   "dynamicFlows.ExternalConfirmation.open": "Apri in una nuova scheda",
   "dynamicFlows.ExternalConfirmation.title": "Conferma",
   "dynamicFlows.FileUploadSchema.maxFileSizeError": "Spiacenti, il file \xE8 troppo grande. Carica un file di dimensioni inferiori.",
-  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "Sorry, that file format is not supported. Please upload a different file.",
+  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "Siamo spiacenti, questo formato di file non \xE8 supportato. Carica un file diverso.",
   "dynamicFlows.Help.ariaLabel": "Clicca qui per maggiori informazioni.",
   "dynamicFlows.MultiSelect.summary": "{first} e altri {count}",
   "dynamicFlows.MultipleFileUploadSchema.maxFileSizeError": "Spiacenti, il file \xE8 troppo grande. Carica un file di dimensioni inferiori.",
@@ -995,7 +995,7 @@ var pt_default = {
   "dynamicFlows.ExternalConfirmation.open": "Abrir em uma nova aba",
   "dynamicFlows.ExternalConfirmation.title": "Por favor, confirme",
   "dynamicFlows.FileUploadSchema.maxFileSizeError": "Este arquivo \xE9 muito grande. Por favor, envie um arquivo menor.",
-  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "Sorry, that file format is not supported. Please upload a different file.",
+  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "Lamentamos, mas este formato de arquivo n\xE3o \xE9 aceito. Envie um arquivo diferente.",
   "dynamicFlows.Help.ariaLabel": "Clique aqui para mais informa\xE7\xF5es.",
   "dynamicFlows.MultiSelect.summary": "{first} e mais {count} ",
   "dynamicFlows.MultipleFileUploadSchema.maxFileSizeError": "Este arquivo \xE9 muito grande. Por favor, envie um arquivo menor.",
@@ -1101,7 +1101,7 @@ var ru_default = {
   "dynamicFlows.ExternalConfirmation.open": "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043D\u043E\u0432\u043E\u0439 \u0432\u043A\u043B\u0430\u0434\u043A\u0435",
   "dynamicFlows.ExternalConfirmation.title": "\u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435",
   "dynamicFlows.FileUploadSchema.maxFileSizeError": "\u0418\u0437\u0432\u0438\u043D\u0438\u0442\u0435, \u0444\u0430\u0439\u043B \u0441\u043B\u0438\u0448\u043A\u043E\u043C \u0431\u043E\u043B\u044C\u0448\u043E\u0439. \u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u0444\u0430\u0439\u043B \u043C\u0435\u043D\u044C\u0448\u0435\u0433\u043E \u0440\u0430\u0437\u043C\u0435\u0440\u0430.",
-  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "Sorry, that file format is not supported. Please upload a different file.",
+  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "\u042D\u0442\u043E\u0442 \u0444\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F. \u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u0434\u0440\u0443\u0433\u043E\u0439 \u0444\u0430\u0439\u043B.",
   "dynamicFlows.Help.ariaLabel": "\u041D\u0430\u0436\u043C\u0438\u0442\u0435 \u0437\u0434\u0435\u0441\u044C \u0434\u043B\u044F \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u044F \u0434\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u043E\u0439 \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u0438.",
   "dynamicFlows.MultiSelect.summary": "{first} \u0438 \u0435\u0449\u0435 {count} \u0434\u0440\u0443\u0433\u0438\u0445",
   "dynamicFlows.MultipleFileUploadSchema.maxFileSizeError": "\u0418\u0437\u0432\u0438\u043D\u0438\u0442\u0435, \u0444\u0430\u0439\u043B \u0441\u043B\u0438\u0448\u043A\u043E\u043C \u0431\u043E\u043B\u044C\u0448\u043E\u0439. \u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u0444\u0430\u0439\u043B \u043C\u0435\u043D\u044C\u0448\u0435\u0433\u043E \u0440\u0430\u0437\u043C\u0435\u0440\u0430.",
@@ -1154,7 +1154,7 @@ var th_default = {
   "dynamicFlows.ExternalConfirmation.open": "\u0E40\u0E1B\u0E34\u0E14\u0E43\u0E19\u0E41\u0E17\u0E47\u0E1A\u0E43\u0E2B\u0E21\u0E48",
   "dynamicFlows.ExternalConfirmation.title": "\u0E42\u0E1B\u0E23\u0E14\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19",
   "dynamicFlows.FileUploadSchema.maxFileSizeError": "\u0E02\u0E2D\u0E2D\u0E20\u0E31\u0E22 \u0E44\u0E1F\u0E25\u0E4C\u0E19\u0E31\u0E49\u0E19\u0E43\u0E2B\u0E0D\u0E48\u0E40\u0E01\u0E34\u0E19\u0E44\u0E1B \u0E42\u0E1B\u0E23\u0E14\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E44\u0E1F\u0E25\u0E4C\u0E17\u0E35\u0E48\u0E21\u0E35\u0E02\u0E19\u0E32\u0E14\u0E40\u0E25\u0E47\u0E01\u0E25\u0E07",
-  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "Sorry, that file format is not supported. Please upload a different file.",
+  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "\u0E02\u0E2D\u0E2D\u0E20\u0E31\u0E22 \u0E23\u0E30\u0E1A\u0E1A\u0E44\u0E21\u0E48\u0E23\u0E2D\u0E07\u0E23\u0E31\u0E1A\u0E23\u0E39\u0E1B\u0E41\u0E1A\u0E1A\u0E44\u0E1F\u0E25\u0E4C\u0E14\u0E31\u0E07\u0E01\u0E25\u0E48\u0E32\u0E27 \u0E42\u0E1B\u0E23\u0E14\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E44\u0E1F\u0E25\u0E4C\u0E2D\u0E37\u0E48\u0E19",
   "dynamicFlows.Help.ariaLabel": "\u0E04\u0E25\u0E34\u0E01\u0E17\u0E35\u0E48\u0E19\u0E35\u0E48\u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E14\u0E39\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21",
   "dynamicFlows.MultiSelect.summary": "{first} \u0E41\u0E25\u0E30\u0E2D\u0E35\u0E01 {count}",
   "dynamicFlows.MultipleFileUploadSchema.maxFileSizeError": "\u0E02\u0E2D\u0E2D\u0E20\u0E31\u0E22 \u0E44\u0E1F\u0E25\u0E4C\u0E19\u0E31\u0E49\u0E19\u0E43\u0E2B\u0E0D\u0E48\u0E40\u0E01\u0E34\u0E19\u0E44\u0E1B \u0E42\u0E1B\u0E23\u0E14\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E44\u0E1F\u0E25\u0E4C\u0E17\u0E35\u0E48\u0E21\u0E35\u0E02\u0E19\u0E32\u0E14\u0E40\u0E25\u0E47\u0E01\u0E25\u0E07",
@@ -1313,7 +1313,7 @@ var zh_HK_default = {
   "dynamicFlows.ExternalConfirmation.open": "\u5728\u65B0\u5206\u9801\u4E2D\u958B\u555F",
   "dynamicFlows.ExternalConfirmation.title": "\u8ACB\u78BA\u8A8D",
   "dynamicFlows.FileUploadSchema.maxFileSizeError": "\u62B1\u6B49\uFF0C\u8A72\u6A94\u6848\u592A\u5927\u3002\u8ACB\u4E0A\u8F09\u4E00\u500B\u8F03\u5C0F\u7684\u6A94\u6848\u3002",
-  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "Sorry, that file format is not supported. Please upload a different file.",
+  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "\u62B1\u6B49\uFF0C\u7CFB\u7D71\u4E0D\u652F\u63F4\u8A72\u6A94\u6848\u3002\u8ACB\u4E0A\u8F09\u5176\u4ED6\u6A94\u6848\u3002",
   "dynamicFlows.Help.ariaLabel": "\u6309\u6B64\u67E5\u770B\u8A73\u60C5\u3002",
   "dynamicFlows.MultiSelect.summary": "{first}\u548C\u5176\u4ED6{count}\u9805",
   "dynamicFlows.MultipleFileUploadSchema.maxFileSizeError": "\u62B1\u6B49\uFF0C\u8A72\u6A94\u6848\u592A\u5927\u3002\u8ACB\u4E0A\u8F09\u4E00\u500B\u8F03\u5C0F\u7684\u6A94\u6848\u3002",
@@ -1600,7 +1600,7 @@ var boxComponentToProps = ({ border, control, width, margin }, children) => ({ t
 
 // src/revamp/renderers/mappers/buttonComponentToProps.ts
 var buttonComponentToProps = (component) => {
-  const { title, control, context, disabled, margin, pinOrder, size, onClick } = component;
+  const { title, control, context, disabled, margin, pinOrder, size: size2, onClick } = component;
   return {
     type: "button",
     title,
@@ -1609,7 +1609,7 @@ var buttonComponentToProps = (component) => {
     disabled,
     margin,
     pinOrder,
-    size,
+    size: size2,
     onClick
   };
 };
@@ -1652,14 +1652,14 @@ var headingComponentToProps = ({
   align,
   control,
   margin,
-  size,
+  size: size2,
   text
 }) => ({
   type: "heading",
   align,
   control,
   margin,
-  size,
+  size: size2,
   text
 });
 
@@ -1673,14 +1673,14 @@ var imageComponentToProps = ({
   accessibilityDescription,
   control,
   margin,
-  size,
+  size: size2,
   url
 }) => ({
   type: "image",
   accessibilityDescription,
   control,
   margin,
-  size,
+  size: size2,
   url
 });
 
@@ -1709,12 +1709,12 @@ var integerInputComponentToProps = (component) => __spreadProps(__spreadValues({
 var loadingIndicatorComponentToProps = ({
   control,
   margin,
-  size
+  size: size2
 }) => ({
   type: "loading-indicator",
   control,
   margin,
-  size
+  size: size2
 });
 
 // src/revamp/renderers/mappers/markdownComponentToProps.ts
@@ -5056,8 +5056,8 @@ var ZodSet = class _ZodSet extends ZodType {
       maxSize: { value: maxSize, message: errorUtil.toString(message) }
     }));
   }
-  size(size, message) {
-    return this.min(size, message).max(size, message);
+  size(size2, message) {
+    return this.min(size2, message).max(size2, message);
   }
   nonempty(message) {
     return this.min(1, message);
@@ -7031,7 +7031,29 @@ var getComponentCallToAction = (callToAction, onAction) => {
   }
   const { accessibilityDescription, behavior, title } = callToAction;
   if ("type" in behavior) {
-    return void 0;
+    switch (behavior.type) {
+      case "action": {
+        const { action } = behavior;
+        return {
+          type: "action",
+          accessibilityDescription,
+          title,
+          onClick: () => {
+            void onAction(action);
+          }
+        };
+      }
+      case "link": {
+        return {
+          type: "link",
+          accessibilityDescription,
+          href: behavior.url,
+          title
+        };
+      }
+      default:
+        return void 0;
+    }
   }
   if (behavior.link) {
     const { url } = behavior.link;
@@ -7132,11 +7154,26 @@ var buttonLayoutToComponent = (uid, button, mapperProps) => {
 };
 var buttonLayoutToComponentWithBehavior = (uid, button, mapperProps) => {
   const { onAction, onLink, step } = mapperProps;
-  const { context, control, disabled, margin = "md", pinOrder, size, title, behavior } = button;
+  const { context, control, disabled, margin = "md", pinOrder, size: size2, title, behavior } = button;
   const getOnClick = () => {
     if ("type" in behavior) {
-      return () => {
-      };
+      switch (behavior.type) {
+        case "action": {
+          const action2 = inlineAction(behavior.action, step == null ? void 0 : step.actions);
+          return () => {
+            void onAction(action2);
+          };
+        }
+        case "link": {
+          const { url } = behavior;
+          return () => {
+            onLink(url);
+          };
+        }
+        default:
+          return () => {
+          };
+      }
     }
     const { action, link } = behavior;
     const inlinedAction = action ? inlineAction(action, step == null ? void 0 : step.actions) : null;
@@ -7160,14 +7197,14 @@ var buttonLayoutToComponentWithBehavior = (uid, button, mapperProps) => {
     disabled: disabled != null ? disabled : false,
     margin,
     pinOrder,
-    size,
+    size: size2,
     title: title != null ? title : "",
     onClick: getOnClick()
   });
 };
 var buttonLayoutToComponentWithAction = (uid, button, mapperProps) => {
   const { onAction, step } = mapperProps;
-  const { context, control, disabled, margin = "md", pinOrder, size, title } = button;
+  const { context, control, disabled, margin = "md", pinOrder, size: size2, title } = button;
   const { action } = button;
   const inlinedAction = action ? inlineAction(action, step == null ? void 0 : step.actions) : {};
   const onClick = () => {
@@ -7180,13 +7217,13 @@ var buttonLayoutToComponentWithAction = (uid, button, mapperProps) => {
     disabled: getButtonDisabled({ disabled, action: inlinedAction }),
     margin,
     pinOrder,
-    size,
+    size: size2,
     title: getButtonTitle({ title, action: inlinedAction }),
     onClick
   });
 };
 var buttonLayoutToComponentWithNoop = (uid, button) => {
-  const { context, control, disabled, margin = "md", pinOrder, size, title } = button;
+  const { context, control, disabled, margin = "md", pinOrder, size: size2, title } = button;
   return createButtonComponent({
     uid,
     context: mapLegacyContext(context != null ? context : "neutral"),
@@ -7194,7 +7231,7 @@ var buttonLayoutToComponentWithNoop = (uid, button) => {
     disabled: disabled != null ? disabled : false,
     margin,
     pinOrder,
-    size,
+    size: size2,
     title: title != null ? title : "",
     onClick: () => {
     }
@@ -10029,12 +10066,12 @@ var createHeadingComponent = (headingProps) => __spreadProps(__spreadValues({
 });
 
 // src/revamp/domain/mappers/layout/headingLayoutToComponent.ts
-var headingLayoutToComponent = (uid, { align = "left", margin = "md", size = "md", control, text }) => createHeadingComponent({
+var headingLayoutToComponent = (uid, { align = "left", margin = "md", size: size2 = "md", control, text }) => createHeadingComponent({
   uid,
   align: mapLegacyAlign(align),
   control,
   margin,
-  size,
+  size: size2,
   text
 });
 
@@ -10051,12 +10088,12 @@ var createImageComponent = (imageProps) => __spreadProps(__spreadValues({
 });
 
 // src/revamp/domain/mappers/layout/imageLayoutToComponent.ts
-var imageLayoutToComponent = (uid, { accessibilityDescription, control, margin = "md", size = "md", text, url }) => createImageComponent({
+var imageLayoutToComponent = (uid, { accessibilityDescription, control, margin = "md", size: size2 = "md", text, url }) => createImageComponent({
   uid,
   accessibilityDescription: accessibilityDescription != null ? accessibilityDescription : text,
   control,
   margin,
-  size,
+  size: size2,
   url
 });
 
@@ -10117,7 +10154,7 @@ var createLoadingIndicatorComponent = (loadingIndicatorProps) => __spreadProps(_
 });
 
 // src/revamp/domain/mappers/layout/loadingIndicatorLayoutToComponent.ts
-var loadingIndicatorLayoutToComponent = (uid, { size = "md", margin = "md", control }) => createLoadingIndicatorComponent({ uid, size, control, margin });
+var loadingIndicatorLayoutToComponent = (uid, { size: size2 = "md", margin = "md", control }) => createLoadingIndicatorComponent({ uid, size: size2, control, margin });
 
 // src/revamp/domain/mappers/layout/markdownLayoutToComponent.ts
 var markdownLayoutToComponent = (uid, { align = "left", margin = "md", control, content }) => createMarkdownComponent({
@@ -10218,12 +10255,36 @@ var reviewLayoutToComponent = (uid, { fields, title, callToAction, control, marg
 });
 var getReviewAction = ({ onAction, onLink, callToAction, action }) => {
   if (callToAction) {
-    const { action: ctaAction, behavior, title } = callToAction;
+    const { accessibilityDescription, action: ctaAction, behavior, title } = callToAction;
     if (behavior) {
       if ("type" in behavior) {
-        return void 0;
+        switch (behavior.type) {
+          case "action": {
+            const { action: behaviorAction2 } = behavior;
+            return {
+              accessibilityDescription,
+              title,
+              onClick: () => {
+                void onAction(behaviorAction2);
+              }
+            };
+          }
+          case "link": {
+            const { url } = behavior;
+            return {
+              accessibilityDescription,
+              href: url,
+              title,
+              onClick: () => {
+                onLink(url);
+              }
+            };
+          }
+          default:
+            return void 0;
+        }
       }
-      const { accessibilityDescription, action: behaviorAction, link } = behavior;
+      const { action: behaviorAction, link } = behavior;
       if (behaviorAction) {
         return {
           accessibilityDescription,
@@ -10458,7 +10519,31 @@ var getItemCallToAction = (callToAction, onAction, onLink) => {
   }
   const { accessibilityDescription, behavior, title } = callToAction;
   if ("type" in behavior) {
-    return void 0;
+    switch (behavior.type) {
+      case "action": {
+        const { action } = behavior;
+        return {
+          accessibilityDescription,
+          title,
+          onClick: () => {
+            void onAction(action);
+          }
+        };
+      }
+      case "link": {
+        const { url } = behavior;
+        return {
+          accessibilityDescription,
+          href: url,
+          title,
+          onClick: () => {
+            void onLink(url);
+          }
+        };
+      }
+      default:
+        return void 0;
+    }
   }
   if (behavior.action) {
     const { action } = behavior;
@@ -11364,8 +11449,8 @@ var useRendererHttpClient = () => {
 var import_components2 = require("@transferwise/components");
 
 // ../renderers/src/utils/layout-utils.ts
-var getMargin = (size) => {
-  switch (size) {
+var getMargin = (size2) => {
+  switch (size2) {
     case "xs":
       return "m-b-0";
     case "sm":
@@ -11586,7 +11671,7 @@ function ButtonRendererComponent({
   disabled,
   margin,
   title,
-  size,
+  size: size2,
   onClick
 }) {
   const className = getMargin(margin);
@@ -11600,7 +11685,7 @@ function ButtonRendererComponent({
       className,
       disabled: isLoading || disabled,
       priority: mapControl(control),
-      size: mapSize(size),
+      size: mapSize(size2),
       type,
       onClick,
       children: title
@@ -11625,11 +11710,11 @@ var mapControl = (control) => {
       return "secondary";
   }
 };
-var mapSize = (size) => {
-  if (!size) {
+var mapSize = (size2) => {
+  if (!size2) {
     return void 0;
   }
-  switch (size) {
+  switch (size2) {
     case "xs":
     case "sm":
       return "sm";
@@ -11926,15 +12011,15 @@ var HeadingRenderer = {
   render: (props) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Heading, __spreadValues({}, props))
 };
 function Heading(props) {
-  const { text, size, align, margin, control } = props;
+  const { text, size: size2, align, margin, control } = props;
   const className = getTextAlignmentAndMargin({ align, margin });
-  return control === "display" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DisplayHeading, { size, text, className }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StandardHeading, { size, text, className });
+  return control === "display" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DisplayHeading, { size: size2, text, className }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StandardHeading, { size: size2, text, className });
 }
-function DisplayHeading({ size, text, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_components11.Display, { type: getDisplayType(size), className, children: text });
+function DisplayHeading({ size: size2, text, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_components11.Display, { type: getDisplayType(size2), className, children: text });
 }
-function StandardHeading({ size, text, className }) {
-  switch (size) {
+function StandardHeading({ size: size2, text, className }) {
+  switch (size2) {
     case "xs":
       return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h5", { className, children: text });
     case "sm":
@@ -11948,8 +12033,8 @@ function StandardHeading({ size, text, className }) {
       return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h3", { className, children: text });
   }
 }
-var getDisplayType = (size) => {
-  switch (size) {
+var getDisplayType = (size2) => {
+  switch (size2) {
     case "xs":
     case "sm":
       return "display-small";
@@ -11984,7 +12069,7 @@ var ImageRenderer_default = ImageRenderer;
 function ImageRendererComponent({
   accessibilityDescription,
   margin,
-  size,
+  size: size2,
   url
 }) {
   const [imageSource, setImageSource] = (0, import_react9.useState)("");
@@ -11992,7 +12077,7 @@ function ImageRendererComponent({
   (0, import_react9.useEffect)(() => {
     void getImageSource(httpClient, url).then(setImageSource);
   }, [url, httpClient]);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `df-image ${size || "md"}`, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `df-image ${size2 || "md"}`, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     import_components12.Image,
     {
       className: `img-responsive ${getMargin(margin)}`,
@@ -12054,7 +12139,7 @@ var InstructionsRenderer = {
 var InstructionsRenderer_default = InstructionsRenderer;
 
 // ../renderers/src/IntegerInputRenderer.tsx
-var import_components14 = require("@transferwise/components");
+var import_components15 = require("@transferwise/components");
 
 // ../renderers/src/utils/input-utils.ts
 var onWheel = (event) => {
@@ -12063,13 +12148,71 @@ var onWheel = (event) => {
   }
 };
 
-// ../renderers/src/IntegerInputRenderer.tsx
+// ../renderers/src/utils/getIconAvatar.tsx
+var import_components14 = require("@transferwise/components");
 var import_jsx_runtime30 = require("react/jsx-runtime");
+var size = 24;
+function getIconAvatar({ icon, image }) {
+  if (image == null ? void 0 : image.url) {
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      "img",
+      {
+        src: image.url,
+        alt: image.accessibilityDescription,
+        width: `${size}px`,
+        height: `${size}px`
+      }
+    );
+  }
+  if (isFlagIcon2(icon)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_components14.Avatar, { type: import_components14.AvatarType.ICON, size, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DynamicIcon_default, { name: icon.name }) });
+  }
+  if (isNamedIcon2(icon)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DynamicIcon_default, { name: icon.name });
+  }
+  if (icon && "text" in icon) {
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_components14.Avatar, { type: import_components14.AvatarType.ICON, size, children: icon.text });
+  }
+  return null;
+}
+var isNamedIcon2 = (icon) => icon ? "name" in icon : false;
+var isFlagIcon2 = (icon) => isNamedIcon2(icon) && icon.name.startsWith("flag-");
+
+// ../renderers/src/utils/getInputGroupAddonStart.tsx
+var getInputGroupAddonStart = ({ icon, image }) => {
+  const content = getIconAvatar({ icon, image });
+  return content ? { content } : void 0;
+};
+
+// ../renderers/src/IntegerInputRenderer.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var IntegerInputRenderer = {
   canRenderType: "input-integer",
   render: (props) => {
-    const _a = props, { id, label, description, help, type, validationState, value, onChange } = _a, rest = __objRest(_a, ["id", "label", "description", "help", "type", "validationState", "value", "onChange"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    const _a = props, {
+      id,
+      label,
+      description,
+      help,
+      icon,
+      image,
+      type,
+      validationState,
+      value,
+      onChange
+    } = _a, rest = __objRest(_a, [
+      "id",
+      "label",
+      "description",
+      "help",
+      "icon",
+      "image",
+      "type",
+      "validationState",
+      "value",
+      "onChange"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       FieldInput_default,
       {
         id,
@@ -12077,8 +12220,8 @@ var IntegerInputRenderer = {
         description,
         validation: validationState,
         help,
-        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-          import_components14.Input,
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_components15.InputGroup, { addonStart: getInputGroupAddonStart({ icon, image }), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          import_components15.Input,
           __spreadValues({
             id,
             name: id,
@@ -12092,7 +12235,7 @@ var IntegerInputRenderer = {
             },
             onWheel
           }, rest)
-        )
+        ) })
       }
     );
   }
@@ -12100,14 +12243,14 @@ var IntegerInputRenderer = {
 var IntegerInputRenderer_default = IntegerInputRenderer;
 
 // ../renderers/src/LoadingIndicatorRenderer.tsx
-var import_components15 = require("@transferwise/components");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_components16 = require("@transferwise/components");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var LoadingIndicatorRenderer = {
   canRenderType: "loading-indicator",
-  render: ({ margin, size }) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-    import_components15.Loader,
+  render: ({ margin, size: size2 }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    import_components16.Loader,
     {
-      size,
+      size: size2,
       classNames: { "tw-loader": `tw-loader m-x-auto ${getMargin(margin)}` },
       "data-testid": "loading-indicator"
     }
@@ -12116,30 +12259,30 @@ var LoadingIndicatorRenderer = {
 var LoadingIndicatorRenderer_default = LoadingIndicatorRenderer;
 
 // ../renderers/src/MarkdownRenderer.tsx
-var import_components16 = require("@transferwise/components");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_components17 = require("@transferwise/components");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var MarkdownRenderer = {
   canRenderType: "markdown",
-  render: ({ content, align, margin }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: getTextAlignmentAndMargin({ align, margin }), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_components16.Markdown, { config: { link: { target: "_blank" } }, children: content }) })
+  render: ({ content, align, margin }) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getTextAlignmentAndMargin({ align, margin }), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_components17.Markdown, { config: { link: { target: "_blank" } }, children: content }) })
 };
 var MarkdownRenderer_default = MarkdownRenderer;
 
 // ../renderers/src/ModalRenderer.tsx
-var import_components17 = require("@transferwise/components");
+var import_components18 = require("@transferwise/components");
 var import_react10 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var ModalRenderer = {
   canRenderType: "modal",
-  render: (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DFModal, __spreadValues({}, props))
+  render: (props) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DFModal, __spreadValues({}, props))
 };
 var ModalRenderer_default = ModalRenderer;
 function DFModal({ content, margin, trigger }) {
   const [visible, setVisible] = (0, import_react10.useState)(false);
   const { components, title } = content;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_components17.Button, { priority: "tertiary", block: true, onClick: () => setVisible(true), children: trigger.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      import_components17.Modal,
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getMargin(margin), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_components18.Button, { priority: "tertiary", block: true, onClick: () => setVisible(true), children: trigger.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      import_components18.Modal,
       {
         scroll: "content",
         open: visible,
@@ -12153,20 +12296,20 @@ function DFModal({ content, margin, trigger }) {
 }
 
 // ../renderers/src/MultiSelectInputRenderer.tsx
-var import_components19 = require("@transferwise/components");
+var import_components20 = require("@transferwise/components");
 
 // ../renderers/src/SelectInputRenderer/OptionMedia.tsx
-var import_components18 = require("@transferwise/components");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_components19 = require("@transferwise/components");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function OptionMedia({ icon, image }) {
   if (image == null ? void 0 : image.url) {
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("img", { src: image.url, alt: image.accessibilityDescription || "", width: "64px" });
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("img", { src: image.url, alt: image.accessibilityDescription || "", width: "64px" });
   }
   if (icon && "name" in icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_components18.Avatar, { type: import_components18.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DynamicIcon_default, { name: icon.name }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_components19.Avatar, { type: import_components19.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DynamicIcon_default, { name: icon.name }) });
   }
   if (icon && "text" in icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_components18.Avatar, { type: import_components18.AvatarType.INITIALS, children: icon.text });
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_components19.Avatar, { type: import_components19.AvatarType.INITIALS, children: icon.text });
   }
   return null;
 }
@@ -12186,10 +12329,10 @@ var multi_select_messages_default = (0, import_react_intl10.defineMessages)({
 
 // ../renderers/src/MultiSelectInputRenderer.tsx
 var import_react11 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var MultiSelectInputRenderer = {
   canRenderType: "input-multi-select",
-  render: (props) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MultiSelectInputRendererComponent, __spreadValues({}, props))
+  render: (props) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MultiSelectInputRendererComponent, __spreadValues({}, props))
 };
 function MultiSelectInputRendererComponent(props) {
   const { formatMessage } = (0, import_react_intl11.useIntl)();
@@ -12231,12 +12374,12 @@ function MultiSelectInputRendererComponent(props) {
     const contentProps = {
       title: option.title,
       description: option.description,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(OptionMedia, { icon: option.icon, image: option.image })
+      icon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(OptionMedia, { icon: option.icon, image: option.image })
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_components19.SelectInputOptionContent, __spreadValues({}, contentProps));
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_components20.SelectInputOptionContent, __spreadValues({}, contentProps));
   };
   const extraProps = { autoComplete };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     FieldInput_default,
     {
       id,
@@ -12244,8 +12387,8 @@ function MultiSelectInputRendererComponent(props) {
       help,
       description,
       validation: validationState,
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-        import_components19.SelectInput,
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        import_components20.SelectInput,
         __spreadValues({
           id,
           items: options.map((option, index) => {
@@ -12283,12 +12426,12 @@ function MultiSelectInputRendererComponent(props) {
 var MultiSelectInputRenderer_default = MultiSelectInputRenderer;
 
 // ../renderers/src/MultiUploadInputRenderer.tsx
-var import_components21 = require("@transferwise/components");
+var import_components22 = require("@transferwise/components");
 
 // ../renderers/src/components/UploadFieldInput.tsx
-var import_components20 = require("@transferwise/components");
+var import_components21 = require("@transferwise/components");
 var import_classnames3 = __toESM(require_classnames());
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function UploadFieldInput({
   id,
   children,
@@ -12297,18 +12440,18 @@ function UploadFieldInput({
   help,
   validation
 }) {
-  const labelContent = label && help ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(LabelContentWithHelp, { text: label, help }) : label;
+  const labelContent = label && help ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(LabelContentWithHelp, { text: label, help }) : label;
   const descriptionId = description ? `${id}-description` : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "div",
     {
       className: (0, import_classnames3.default)("form-group d-block", {
         "has-error": (validation == null ? void 0 : validation.status) === "invalid"
       }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("label", { htmlFor: id, className: "control-label", children: labelContent }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("label", { htmlFor: id, className: "control-label", children: labelContent }),
         children,
-        (validation == null ? void 0 : validation.status) === "invalid" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_components20.InlineAlert, { type: "negative", id: descriptionId, children: validation.message })
+        (validation == null ? void 0 : validation.status) === "invalid" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_components21.InlineAlert, { type: "negative", id: descriptionId, children: validation.message })
       ]
     }
   );
@@ -12340,7 +12483,7 @@ var getFileType = (base64Url) => {
 var getRandomId = () => Math.random().toString(36).substring(2);
 
 // ../renderers/src/MultiUploadInputRenderer.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var MultiUploadInputRenderer = {
   canRenderType: "input-upload-multi",
   render: (props) => {
@@ -12367,7 +12510,7 @@ var MultiUploadInputRenderer = {
     };
     const onDeleteFile = async (fileId) => onDelete(String(fileId));
     const descriptionId = description ? `${id}-description` : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       UploadFieldInput_default,
       {
         id,
@@ -12375,8 +12518,8 @@ var MultiUploadInputRenderer = {
         description,
         validation: validationState,
         help,
-        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-          import_components21.UploadInput,
+        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          import_components22.UploadInput,
           {
             id,
             "aria-describedby": descriptionId,
@@ -12398,13 +12541,35 @@ var MultiUploadInputRenderer = {
 var MultiUploadInputRenderer_default = MultiUploadInputRenderer;
 
 // ../renderers/src/NumberInputRenderer.tsx
-var import_components22 = require("@transferwise/components");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_components23 = require("@transferwise/components");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var NumberInputRenderer = {
   canRenderType: "input-number",
   render: (props) => {
-    const _a = props, { id, label, description, help, type, validationState, value, onChange } = _a, rest = __objRest(_a, ["id", "label", "description", "help", "type", "validationState", "value", "onChange"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    const _a = props, {
+      id,
+      label,
+      description,
+      help,
+      icon,
+      image,
+      type,
+      validationState,
+      value,
+      onChange
+    } = _a, rest = __objRest(_a, [
+      "id",
+      "label",
+      "description",
+      "help",
+      "icon",
+      "image",
+      "type",
+      "validationState",
+      "value",
+      "onChange"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       FieldInput_default,
       {
         id,
@@ -12412,8 +12577,8 @@ var NumberInputRenderer = {
         description,
         validation: validationState,
         help,
-        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-          import_components22.Input,
+        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_components23.InputGroup, { addonStart: getInputGroupAddonStart({ icon, image }), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          import_components23.Input,
           __spreadValues({
             id,
             name: id,
@@ -12425,7 +12590,7 @@ var NumberInputRenderer = {
             },
             onWheel
           }, rest)
-        )
+        ) })
       }
     );
   }
@@ -12436,16 +12601,16 @@ var NumberInputRenderer_default = NumberInputRenderer;
 var import_react_intl13 = require("react-intl");
 
 // ../renderers/src/hooks/useSnackBarIfAvailable.ts
-var import_components23 = require("@transferwise/components");
+var import_components24 = require("@transferwise/components");
 var import_react12 = require("react");
 function useSnackBarIfAvailable() {
-  const context = (0, import_react12.useContext)(import_components23.SnackbarContext);
+  const context = (0, import_react12.useContext)(import_components24.SnackbarContext);
   return context ? context.createSnackbar : () => {
   };
 }
 
 // ../renderers/src/ParagraphRenderer.tsx
-var import_components24 = require("@transferwise/components");
+var import_components25 = require("@transferwise/components");
 var import_classnames4 = __toESM(require_classnames());
 
 // ../renderers/src/messages/paragraph.messages.ts
@@ -12464,17 +12629,17 @@ var paragraph_messages_default = (0, import_react_intl12.defineMessages)({
 });
 
 // ../renderers/src/ParagraphRenderer.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var ParagraphRenderer = {
   canRenderType: "paragraph",
-  render: (props) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Paragraph, __spreadValues({}, props))
+  render: (props) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Paragraph, __spreadValues({}, props))
 };
 function Paragraph({ align, control, margin, text }) {
   const className = getTextAlignmentAndMargin({ align, margin });
-  return control === "copyable" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CopyableParagraph, { className, align, text }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(StandardParagraph, { className, text });
+  return control === "copyable" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CopyableParagraph, { className, align, text }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(StandardParagraph, { className, text });
 }
 function StandardParagraph({ text, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: `np-text-body-large ${className}`, children: text });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: `np-text-body-large ${className}`, children: text });
 }
 function CopyableParagraph({
   text,
@@ -12488,9 +12653,9 @@ function CopyableParagraph({
     });
   };
   const inputAlignmentClasses = getTextAlignmentAndMargin({ align, margin: "sm" });
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-      import_components24.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      import_components25.Input,
       {
         type: "text",
         value: text,
@@ -12498,13 +12663,13 @@ function CopyableParagraph({
         className: (0, import_classnames4.default)("text-ellipsis", inputAlignmentClasses)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_components24.Button, { block: true, onClick: copy, children: formatMessage(paragraph_messages_default.copy) })
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_components25.Button, { block: true, onClick: copy, children: formatMessage(paragraph_messages_default.copy) })
   ] });
 }
 var ParagraphRenderer_default = ParagraphRenderer;
 
 // ../renderers/src/RepeatableRenderer.tsx
-var import_components25 = require("@transferwise/components");
+var import_components26 = require("@transferwise/components");
 var import_react13 = require("react");
 var import_icons = require("@transferwise/icons");
 var import_react_intl15 = require("react-intl");
@@ -12536,10 +12701,10 @@ var repeatable_messages_default = (0, import_react_intl14.defineMessages)({
 
 // ../renderers/src/RepeatableRenderer.tsx
 var import_classnames5 = __toESM(require_classnames());
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var RepeatableRenderer = {
   canRenderType: "repeatable",
-  render: (props) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Repeatable, __spreadValues({}, props))
+  render: (props) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Repeatable, __spreadValues({}, props))
 };
 function Repeatable(props) {
   const {
@@ -12578,40 +12743,40 @@ function Repeatable(props) {
   const onCancelEdit = () => {
     setOpenModalType(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_components25.Header, { title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_components26.Header, { title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
       "div",
       {
         className: (0, import_classnames5.default)("form-group", {
           "has-error": (validationState == null ? void 0 : validationState.status) === "invalid"
         }),
         children: [
-          items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ItemSummaryOption, { item, onClick: () => onEditItem(index) }, item.id)),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-            import_components25.NavigationOption,
+          items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ItemSummaryOption, { item, onClick: () => onEditItem(index) }, item.id)),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            import_components26.NavigationOption,
             {
-              media: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons.Plus, {}),
+              media: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_icons.Plus, {}),
               title: addItemTitle || formatMessage(repeatable_messages_default.addItemTitle),
               showMediaAtAllSizes: true,
               onClick: () => onAddItem()
             }
           ),
-          (validationState == null ? void 0 : validationState.status) === "invalid" && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_components25.InlineAlert, { type: "negative", children: validationState.message })
+          (validationState == null ? void 0 : validationState.status) === "invalid" && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_components26.InlineAlert, { type: "negative", children: validationState.message })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-      import_components25.Modal,
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      import_components26.Modal,
       {
         open: openModalType !== null,
         title: (openModalType === "add" ? addItemTitle : editItemTitle) || formatMessage(repeatable_messages_default.addItemTitle),
-        body: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "m-b-2", children: editableItem }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_components25.Button, { priority: "primary", block: true, className: "m-b-2", onClick: () => onSaveItem(), children: formatMessage(repeatable_messages_default.addItem) }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_components25.Button, { priority: "secondary", type: "negative", block: true, onClick: () => onRemoveItem(), children: formatMessage(repeatable_messages_default.removeItem) })
+        body: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "m-b-2", children: editableItem }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_components26.Button, { priority: "primary", block: true, className: "m-b-2", onClick: () => onSaveItem(), children: formatMessage(repeatable_messages_default.addItem) }),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_components26.Button, { priority: "secondary", type: "negative", block: true, onClick: () => onRemoveItem(), children: formatMessage(repeatable_messages_default.removeItem) })
           ] })
         ] }),
         onClose: () => onCancelEdit()
@@ -12623,10 +12788,10 @@ function ItemSummaryOption({
   item,
   onClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-    import_components25.NavigationOption,
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    import_components26.NavigationOption,
     {
-      media: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(NavigationOptionMedia, __spreadValues({}, item)),
+      media: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(NavigationOptionMedia, __spreadValues({}, item)),
       title: item.title,
       content: item.description,
       showMediaAtAllSizes: true,
@@ -12637,7 +12802,7 @@ function ItemSummaryOption({
 var RepeatableRenderer_default = RepeatableRenderer;
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
-var import_components27 = require("@transferwise/components");
+var import_components28 = require("@transferwise/components");
 
 // ../renderers/src/SearchRenderer/ErrorResult.tsx
 var import_react_intl17 = require("react-intl");
@@ -12663,8 +12828,8 @@ var generic_error_messages_default2 = (0, import_react_intl16.defineMessages)({
 });
 
 // ../renderers/src/SearchRenderer/ErrorResult.tsx
-var import_components26 = require("@transferwise/components");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_components27 = require("@transferwise/components");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function ErrorResult({ state }) {
   const intl = (0, import_react_intl17.useIntl)();
   const buttonVisualProps = {
@@ -12672,11 +12837,11 @@ function ErrorResult({ state }) {
     size: "sm",
     style: { marginTop: "-2px", padding: "0", width: "auto", display: "inline" }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("p", { className: "m-t-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("p", { className: "m-t-2", children: [
     intl.formatMessage(generic_error_messages_default2.genericError),
     "\xA0",
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      import_components26.Button,
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      import_components27.Button,
       __spreadProps(__spreadValues({}, buttonVisualProps), {
         onClick: () => {
           state.onRetry();
@@ -12702,7 +12867,7 @@ var search_messages_default = (0, import_react_intl18.defineMessages)({
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
 var import_react_intl19 = require("react-intl");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function BlockSearchRendererComponent({
   id,
   isLoading,
@@ -12715,9 +12880,9 @@ function BlockSearchRendererComponent({
   const [hasSearched, setHasSearched] = (0, import_react14.useState)(false);
   const trackEvent = useTrackEvent();
   const { formatMessage } = (0, import_react_intl19.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-      import_components27.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: getMargin(margin), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      import_components28.Input,
       {
         id,
         name: id,
@@ -12733,7 +12898,7 @@ function BlockSearchRendererComponent({
         }
       }
     ) }),
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_jsx_runtime42.Fragment, { children: formatMessage(search_messages_default.loading) }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SearchResultContent, { state, onChange })
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_jsx_runtime43.Fragment, { children: formatMessage(search_messages_default.loading) }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SearchResultContent, { state, onChange })
   ] });
 }
 function SearchResultContent({
@@ -12742,27 +12907,27 @@ function SearchResultContent({
 }) {
   switch (state.type) {
     case "error":
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ErrorResult, { state });
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ErrorResult, { state });
     case "results":
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SearchResults, { state, onChange });
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SearchResults, { state, onChange });
     case "noResults":
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(EmptySearchResult, { state });
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(EmptySearchResult, { state });
     case "pending":
     default:
       return null;
   }
 }
 function EmptySearchResult({ state }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components27.Markdown, { className: "m-t-2", config: { link: { target: "_blank" } }, children: state.message });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_components28.Markdown, { className: "m-t-2", config: { link: { target: "_blank" } }, children: state.message });
 }
 function SearchResults({
   state
 }) {
   const trackEvent = useTrackEvent();
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components27.NavigationOptionsList, { children: state.results.map((result) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_components28.NavigationOptionsList, { children: state.results.map((result) => {
     const { icon, image } = result;
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-      import_components27.NavigationOption,
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      import_components28.NavigationOption,
       {
         title: result.title,
         content: result.description,
@@ -12783,11 +12948,11 @@ function SearchResults({
 var BlockSearchRendererComponent_default = BlockSearchRendererComponent;
 
 // ../renderers/src/SearchRenderer/InlineSearchRendererComponent.tsx
-var import_components28 = require("@transferwise/components");
+var import_components29 = require("@transferwise/components");
 var import_icons2 = require("@transferwise/icons");
 var import_react15 = require("react");
 var import_react_intl20 = require("react-intl");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function InlineSearchRenderer({
   id,
   isLoading,
@@ -12799,18 +12964,18 @@ function InlineSearchRenderer({
   const [hasSearched, setHasSearched] = (0, import_react15.useState)(false);
   const trackEvent = useTrackEvent();
   const intl = (0, import_react_intl20.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-    import_components28.Typeahead,
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    import_components29.Typeahead,
     {
       id: "typeahead-input-id",
       intl,
       name: "typeahead-input-name",
       size: "md",
       maxHeight: 100,
-      footer: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TypeaheadFooter, { state, isLoading }),
+      footer: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TypeaheadFooter, { state, isLoading }),
       multiple: false,
       clearable: false,
-      addon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_icons2.Search, { size: 24 }),
+      addon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_icons2.Search, { size: 24 }),
       options: state.type === "results" ? state.results.map(mapResultToTypeaheadOption) : [],
       minQueryLength: 1,
       onChange: (values) => {
@@ -12847,29 +13012,29 @@ function mapResultToTypeaheadOption(result) {
 function TypeaheadFooter({ state, isLoading }) {
   const { formatMessage } = (0, import_react_intl20.useIntl)();
   if (state.type === "noResults") {
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_components28.Markdown, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: state.message });
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_components29.Markdown, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: state.message });
   }
   if (state.type === "error") {
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "m-t-2 m-x-2", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ErrorResult, { state }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "m-t-2 m-x-2", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ErrorResult, { state }) });
   }
   if (state.type === "pending" || isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "m-t-2 m-x-2", children: formatMessage(search_messages_default.loading) });
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "m-t-2 m-x-2", children: formatMessage(search_messages_default.loading) });
   }
   return null;
 }
 var InlineSearchRendererComponent_default = InlineSearchRenderer;
 
 // ../renderers/src/SearchRenderer/SearchRenderer.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var SearchRenderer = {
   canRenderType: "search",
-  render: (props) => props.control === "inline" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(InlineSearchRendererComponent_default, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(BlockSearchRendererComponent_default, __spreadValues({}, props))
+  render: (props) => props.control === "inline" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(InlineSearchRendererComponent_default, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BlockSearchRendererComponent_default, __spreadValues({}, props))
 };
 var SearchRenderer_default = SearchRenderer;
 
 // ../renderers/src/SelectInputRenderer/RadioInputRendererComponent.tsx
-var import_components29 = require("@transferwise/components");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_components30 = require("@transferwise/components");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function RadioInputRendererComponent(props) {
   const {
     id,
@@ -12883,8 +13048,8 @@ function RadioInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       FieldInput_default,
       {
         id,
@@ -12892,8 +13057,8 @@ function RadioInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
-        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-          import_components29.RadioGroup,
+        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          import_components30.RadioGroup,
           {
             name: id,
             radios: options.map((option, index) => ({
@@ -12901,7 +13066,7 @@ function RadioInputRendererComponent(props) {
               value: index,
               secondary: option.description,
               disabled: option.disabled || disabled,
-              avatar: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(OptionMedia, { icon: option.icon, image: option.image })
+              avatar: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(OptionMedia, { icon: option.icon, image: option.image })
             })),
             selectedValue: selectedIndex != null ? selectedIndex : void 0,
             onChange: onSelect
@@ -12915,9 +13080,9 @@ function RadioInputRendererComponent(props) {
 }
 
 // ../renderers/src/SelectInputRenderer/TabInputRendererComponent.tsx
-var import_components30 = require("@transferwise/components");
+var import_components31 = require("@transferwise/components");
 var import_react16 = require("react");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function TabInputRendererComponent(props) {
   const {
     id,
@@ -12936,8 +13101,8 @@ function TabInputRendererComponent(props) {
       onSelect(0);
     }
   }, [selectedIndex, onSelect, options.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       FieldInput_default,
       {
         id,
@@ -12945,8 +13110,8 @@ function TabInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
-        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-          import_components30.Tabs,
+        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          import_components31.Tabs,
           {
             name: id,
             selected: selectedIndex != null ? selectedIndex : 0,
@@ -12954,7 +13119,7 @@ function TabInputRendererComponent(props) {
               title: option.title,
               // if we pass null, we get some props-types console errors
               // eslint-disable-next-line react/jsx-no-useless-fragment
-              content: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, {}),
+              content: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_jsx_runtime47.Fragment, {}),
               disabled: option.disabled || disabled
             })),
             onTabSelect: onSelect
@@ -12969,29 +13134,6 @@ var isValidIndex = (index, options) => index !== null && index >= 0 && index < o
 
 // ../renderers/src/SelectInputRenderer/SelectInputRendererComponent.tsx
 var import_components32 = require("@transferwise/components");
-
-// ../renderers/src/SelectInputRenderer/SelectTriggerMedia.tsx
-var import_components31 = require("@transferwise/components");
-var import_jsx_runtime47 = require("react/jsx-runtime");
-function SelectTriggerMedia({ icon, image }) {
-  if (image == null ? void 0 : image.url) {
-    return null;
-  }
-  if (isFlagIcon2(icon)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_components31.Avatar, { type: import_components31.AvatarType.ICON, size: 24, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DynamicIcon_default, { name: icon.name }) });
-  }
-  if (isNamedIcon2(icon)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DynamicIcon_default, { name: icon.name });
-  }
-  if (icon && "text" in icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_components31.Avatar, { type: import_components31.AvatarType.ICON, size: 24, children: icon.text });
-  }
-  return null;
-}
-var isNamedIcon2 = (icon) => icon ? "name" in icon : false;
-var isFlagIcon2 = (icon) => isNamedIcon2(icon) && icon.name.startsWith("flag-");
-
-// ../renderers/src/SelectInputRenderer/SelectInputRendererComponent.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
 function SelectInputRendererComponent(props) {
   const {
@@ -13028,7 +13170,7 @@ function SelectInputRendererComponent(props) {
     const contentProps = withinTrigger ? {
       title: option.title,
       note: option.description,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectTriggerMedia, { icon: option.icon, image: option.image })
+      icon: getIconAvatar(option)
     } : {
       title: option.title,
       description: option.description,
@@ -13185,6 +13327,9 @@ var mapStatus = (status) => {
   return status;
 };
 
+// ../renderers/src/TextInputRenderer.tsx
+var import_components36 = require("@transferwise/components");
+
 // ../renderers/src/components/VariableTextInput.tsx
 var import_components35 = require("@transferwise/components");
 var import_jsx_runtime52 = require("react/jsx-runtime");
@@ -13266,6 +13411,8 @@ var TextInputRenderer = {
       description,
       help,
       error,
+      icon,
+      image,
       maxLength,
       minLength,
       type,
@@ -13278,6 +13425,8 @@ var TextInputRenderer = {
       "description",
       "help",
       "error",
+      "icon",
+      "image",
       "maxLength",
       "minLength",
       "type",
@@ -13294,7 +13443,7 @@ var TextInputRenderer = {
         description,
         validation: validationState,
         help,
-        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(VariableTextInput_default, { control, inputProps })
+        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_components36.InputGroup, { addonStart: getInputGroupAddonStart({ icon, image }), children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(VariableTextInput_default, { control, inputProps }) })
       }
     );
   }
@@ -13302,7 +13451,7 @@ var TextInputRenderer = {
 var TextInputRenderer_default = TextInputRenderer;
 
 // ../renderers/src/UploadInputRenderer.tsx
-var import_components36 = require("@transferwise/components");
+var import_components37 = require("@transferwise/components");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 var UploadInputRenderer = {
   canRenderType: "input-upload",
@@ -13327,7 +13476,7 @@ var UploadInputRenderer = {
           description: void 0,
           validation: validationState,
           children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-            import_components36.UploadInput,
+            import_components37.UploadInput,
             {
               id,
               description,
@@ -13392,7 +13541,7 @@ var LargeUploadRenderer = {
         validation: validationState,
         help,
         children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-          import_components36.Upload,
+          import_components37.Upload,
           __spreadProps(__spreadValues({}, uploadProps), {
             usAccept: getAcceptsString(accepts),
             usDisabled: disabled,
@@ -13407,16 +13556,16 @@ var LargeUploadRenderer = {
 };
 
 // ../renderers/src/ReviewRenderer.tsx
-var import_components37 = require("@transferwise/components");
+var import_components38 = require("@transferwise/components");
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var ReviewRenderer = {
   canRenderType: "review",
   render: ({ callToAction, control, fields, margin, title }) => {
     const orientation = mapControlToDefinitionListLayout(control);
     return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: getMargin(margin), children: [
-      (title || callToAction) && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_components37.Header, { title: title != null ? title : "", action: getReviewAction2(callToAction) }),
+      (title || callToAction) && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_components38.Header, { title: title != null ? title : "", action: getReviewAction2(callToAction) }),
       /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: margin, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-        import_components37.DefinitionList,
+        import_components38.DefinitionList,
         {
           layout: orientation,
           definitions: fields.map(({ label, value, help }, index) => ({
@@ -13514,7 +13663,7 @@ var external_confirmation_messages_default = (0, import_react_intl21.defineMessa
 });
 
 // ../renderers/src/step/ExternalConfirmationDialog.tsx
-var import_components38 = require("@transferwise/components");
+var import_components39 = require("@transferwise/components");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 function ExternalConfirmationDialog({
   external,
@@ -13523,10 +13672,10 @@ function ExternalConfirmationDialog({
   const { formatMessage } = (0, import_react_intl22.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "df-box-renderer-fixed-width", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "df-box-renderer-width-lg", children: [
     /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("h2", { className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.title) }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_components38.Markdown, { config: { link: { target: "_blank" } }, className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.description, { origin: getOrigin(external.url) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_components39.Markdown, { config: { link: { target: "_blank" } }, className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.description, { origin: getOrigin(external.url) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "df-box-renderer-fixed-width", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "df-box-renderer-width-lg", children: [
       /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-        import_components38.Button,
+        import_components39.Button,
         {
           block: true,
           className: "m-b-2",
@@ -13539,7 +13688,7 @@ function ExternalConfirmationDialog({
           children: formatMessage(external_confirmation_messages_default.open)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_components38.Button, { block: true, className: "m-b-2", priority: "tertiary", size: "md", onClick: onClose, children: formatMessage(external_confirmation_messages_default.cancel) })
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_components39.Button, { block: true, className: "m-b-2", priority: "tertiary", size: "md", onClick: onClose, children: formatMessage(external_confirmation_messages_default.cancel) })
     ] }) })
   ] }) });
 }
@@ -13568,7 +13717,7 @@ function useExternal(url) {
 }
 
 // ../renderers/src/step/BackButton.tsx
-var import_components39 = require("@transferwise/components");
+var import_components40 = require("@transferwise/components");
 var import_icons3 = require("@transferwise/icons");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 function BackButton({ title, onClick }) {
@@ -13582,7 +13731,7 @@ function BackButton({ title, onClick }) {
       onClick,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "sr-only", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_components39.Avatar, { type: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons3.ArrowLeft, { size: "24" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_components40.Avatar, { type: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons3.ArrowLeft, { size: "24" }) })
       ]
     }
   ) });
@@ -13590,7 +13739,7 @@ function BackButton({ title, onClick }) {
 var BackButton_default = BackButton;
 
 // ../renderers/src/step/StepRenderer.tsx
-var import_components40 = require("@transferwise/components");
+var import_components41 = require("@transferwise/components");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var StepRenderer = {
   canRenderType: "step",
@@ -13606,10 +13755,10 @@ function StepRendererComponent(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(StepRendererContextProvider, { value, children: [
     back ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(BackButton_default, __spreadValues({}, back)) : null,
     title || description ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "m-b-4", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_components40.Title, { as: "h1", type: "title-section", className: "text-xs-center m-b-2", children: title }) : void 0,
+      title ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_components41.Title, { as: "h1", type: "title-section", className: "text-xs-center m-b-2", children: title }) : void 0,
       description ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "text-xs-center np-text-body-large", children: description }) : void 0
     ] }) : void 0,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_components40.Alert, { type: "negative", className: "m-b-2", message: error }) : void 0,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_components41.Alert, { type: "negative", className: "m-b-2", message: error }) : void 0,
     children
   ] });
 }
@@ -13862,10 +14011,10 @@ function convertDecisionStepToDynamicLayout(step) {
   }
   return layout;
 }
-function dynamicBox(components, size) {
+function dynamicBox(components, size2) {
   return {
     type: "box",
-    width: size || "md",
+    width: size2 || "md",
     components
   };
 }
@@ -15060,10 +15209,10 @@ var import_classnames15 = __toESM(require_classnames());
 var import_react53 = require("react");
 
 // src/legacy/layout/alert/DynamicAlert.tsx
-var import_components42 = require("@transferwise/components");
+var import_components43 = require("@transferwise/components");
 
 // src/legacy/layout/utils/getNavigationOptionMedia.tsx
-var import_components41 = require("@transferwise/components");
+var import_components42 = require("@transferwise/components");
 
 // src/legacy/layout/icon/FlagIcon.tsx
 var import_jsx_runtime67 = require("react/jsx-runtime");
@@ -15114,10 +15263,10 @@ var DynamicIcon_default2 = DynamicIcon2;
 var import_jsx_runtime70 = require("react/jsx-runtime");
 var getNavigationOptionMedia = ({ icon, image }) => {
   if (icon == null ? void 0 : icon.name) {
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_components41.Avatar, { type: import_components41.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DynamicIcon_default2, { type: icon.name }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_components42.Avatar, { type: import_components42.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DynamicIcon_default2, { type: icon.name }) });
   }
   if (icon == null ? void 0 : icon.text) {
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_components41.Avatar, { type: import_components41.AvatarType.INITIALS, children: icon.text });
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_components42.Avatar, { type: import_components42.AvatarType.INITIALS, children: icon.text });
   }
   if (image == null ? void 0 : image.url) {
     const { url, text } = image;
@@ -15127,8 +15276,8 @@ var getNavigationOptionMedia = ({ icon, image }) => {
 };
 
 // src/legacy/layout/utils/index.ts
-var getMargin2 = (size) => {
-  switch (size) {
+var getMargin2 = (size2) => {
+  switch (size2) {
     case "xs":
       return "m-b-0";
     case "sm":
@@ -15161,7 +15310,7 @@ var import_jsx_runtime71 = require("react/jsx-runtime");
 var DynamicAlert = ({ component: alert, onAction }) => {
   const { context, markdown, margin } = alert;
   return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-    import_components42.Alert,
+    import_components43.Alert,
     {
       type: mapContextToAlertType(legacy_mapContext(context)),
       className: getMargin2(margin),
@@ -15178,6 +15327,29 @@ var getAlertAction = (component, onAction) => {
     return void 0;
   }
   const { title, accessibilityDescription, behavior } = component.callToAction;
+  if ("type" in behavior) {
+    switch (behavior.type) {
+      case "action": {
+        const { action: action2 } = behavior;
+        return {
+          text: title,
+          "aria-label": accessibilityDescription,
+          onClick: onAction && action2 ? () => {
+            onAction(action2);
+          } : () => {
+          }
+        };
+      }
+      case "link": {
+        return {
+          text: title,
+          "aria-label": accessibilityDescription,
+          href: behavior.url,
+          target: "_blank"
+        };
+      }
+    }
+  }
   const { action, link } = behavior;
   if (link) {
     return {
@@ -15273,7 +15445,7 @@ var getBoxWidthClasses = (component) => {
 var DynamicBox_default = DynamicBox;
 
 // src/legacy/layout/button/DynamicButton.tsx
-var import_components43 = require("@transferwise/components");
+var import_components44 = require("@transferwise/components");
 
 // src/legacy/layout/button/utils.ts
 var priorities = {
@@ -15310,8 +15482,8 @@ var getButtonType = (context, action) => {
 var getButtonTypeFromContext = (context) => {
   return context ? contextToType[context] : "accent";
 };
-var getButtonSize = (size) => {
-  switch (size) {
+var getButtonSize = (size2) => {
+  switch (size2) {
     case "xs":
     case "sm":
       return "sm";
@@ -15345,7 +15517,7 @@ function DynamicButtonWithoutBehavior(props) {
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
-    import_components43.Button,
+    import_components44.Button,
     {
       size: getButtonSize(component.size),
       type: priority === "tertiary" ? void 0 : type,
@@ -15360,7 +15532,7 @@ function DynamicButtonWithoutBehavior(props) {
 }
 function DynamicButtonWithBehavior(props) {
   var _a, _b;
-  const { component } = props;
+  const { component, onAction } = props;
   const type = getButtonTypeFromContext(component.context);
   const priority = (_a = component.control) != null ? _a : "secondary";
   const { loading } = useDynamicFlow();
@@ -15369,15 +15541,35 @@ function DynamicButtonWithBehavior(props) {
   const title = (_b = component.title) != null ? _b : "";
   const onClick = () => {
     const { behavior } = component;
-    if (behavior == null ? void 0 : behavior.action) {
-      props.onAction(behavior.action);
+    if (!behavior) {
+      return;
     }
-    if (behavior == null ? void 0 : behavior.link) {
-      window.open(behavior.link.url, "_blank");
+    if ("type" in behavior) {
+      switch (behavior.type) {
+        case "action": {
+          if (behavior.action) {
+            onAction(behavior.action);
+          }
+          break;
+        }
+        case "link": {
+          if (behavior.url) {
+            window.open(behavior.url, "_blank");
+          }
+          break;
+        }
+      }
+    } else {
+      if (behavior == null ? void 0 : behavior.action) {
+        onAction(behavior.action);
+      }
+      if (behavior == null ? void 0 : behavior.link) {
+        window.open(behavior.link.url, "_blank");
+      }
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
-    import_components43.Button,
+    import_components44.Button,
     {
       size: getButtonSize(component.size),
       type: priority === "tertiary" ? void 0 : type,
@@ -15445,15 +15637,15 @@ var getWidth = (bias) => {
 var DynamicColumns_default = DynamicColumns;
 
 // src/legacy/layout/decision/DynamicDecision.tsx
-var import_components44 = require("@transferwise/components");
+var import_components45 = require("@transferwise/components");
 var import_jsx_runtime75 = require("react/jsx-runtime");
 function DynamicDecision({ component, onAction }) {
   const { loading } = useDynamicFlow();
   const { margin, options, title } = component;
   return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: getMargin2(margin), children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_components44.Header, { as: "h2", title }),
-    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_components44.NavigationOptionsList, { children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
-      import_components44.NavigationOption,
+    title && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_components45.Header, { as: "h2", title }),
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_components45.NavigationOptionsList, { children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+      import_components45.NavigationOption,
       {
         title: option.title,
         content: option.description,
@@ -15479,7 +15671,7 @@ var DynamicDivider = ({ component }) => {
 var DynamicDivider_default = DynamicDivider;
 
 // src/legacy/layout/external/DynamicExternal.tsx
-var import_components45 = require("@transferwise/components");
+var import_components46 = require("@transferwise/components");
 var import_react32 = require("react");
 var import_react_intl24 = require("react-intl");
 
@@ -15512,9 +15704,9 @@ var DynamicExternal = ({ component, onAction }) => {
   }, [polling, responseHandlers]);
   useExternalStepPolling(pollingConfiguration, onAction);
   return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_jsx_runtime77.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_components45.Loader, { size: import_components45.Size.LARGE, classNames: { "tw-loader": "tw-loader m-x-auto" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_components46.Loader, { size: import_components46.Size.LARGE, classNames: { "tw-loader": "tw-loader m-x-auto" } }),
     /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("br", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_components45.Button, { priority: "tertiary", block: true, onClick: openExternalUrl, children: retryTitle || intl.formatMessage(DynamicExternal_messages_default.retryTitle) })
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_components46.Button, { priority: "tertiary", block: true, onClick: openExternalUrl, children: retryTitle || intl.formatMessage(DynamicExternal_messages_default.retryTitle) })
   ] });
 };
 var DynamicExternal_default = DynamicExternal;
@@ -15523,7 +15715,7 @@ var DynamicExternal_default = DynamicExternal;
 var import_react46 = require("react");
 
 // src/legacy/jsonSchemaForm/allOfSchema/AllOfSchema.tsx
-var import_components46 = require("@transferwise/components");
+var import_components47 = require("@transferwise/components");
 var import_classnames6 = __toESM(require_classnames());
 var import_react33 = require("react");
 var import_jsx_runtime78 = require("react/jsx-runtime");
@@ -15544,7 +15736,7 @@ function AllOfSchema(props) {
   };
   const [models, setModels] = (0, import_react33.useState)(splitModel(props.model, props.schema.allOf));
   return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
-    props.schema.title && !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_components46.Header, { title: props.schema.title }),
+    props.schema.title && !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_components47.Header, { title: props.schema.title }),
     props.schema.description && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { children: props.schema.description }),
     /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "row", children: props.schema.allOf.map((schema, index) => (
       // eslint-disable-next-line react/no-array-index-key
@@ -15569,12 +15761,12 @@ function AllOfSchema(props) {
 var AllOfSchema_default = AllOfSchema;
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/multipleFileUploadSchema/MultipleFileUploadSchema.tsx
-var import_components48 = require("@transferwise/components");
+var import_components49 = require("@transferwise/components");
 var import_classnames7 = __toESM(require_classnames());
 var import_react34 = require("react");
 
 // src/legacy/jsonSchemaForm/controlFeedback/ControlFeedback.tsx
-var import_components47 = require("@transferwise/components");
+var import_components48 = require("@transferwise/components");
 var import_formatting2 = require("@transferwise/formatting");
 var import_react_intl25 = require("react-intl");
 var import_jsx_runtime79 = require("react/jsx-runtime");
@@ -15587,9 +15779,9 @@ function ControlFeedback(props) {
   const isDescriptionVisible = props.schema.type !== "boolean" && props.schema.description && !isErrorVisible && !isValidationVisible;
   const hasInfoMessage = Boolean(props.infoMessage);
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { id: props.id, children: [
-    isErrorVisible ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_components47.InlineAlert, { type: "error", children: errors }) : null,
-    isValidationVisible ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_components47.InlineAlert, { type: "error", children: validations.map((validation) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { children: mergedValidationMessages[validation] }, validation)) }) : null,
-    (isDescriptionVisible || hasInfoMessage) && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_components47.InlineAlert, { type: "info", children: [
+    isErrorVisible ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_components48.InlineAlert, { type: "error", children: errors }) : null,
+    isValidationVisible ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_components48.InlineAlert, { type: "error", children: validations.map((validation) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { children: mergedValidationMessages[validation] }, validation)) }) : null,
+    (isDescriptionVisible || hasInfoMessage) && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_components48.InlineAlert, { type: "info", children: [
       isDescriptionVisible && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { children: props.schema.description }),
       hasInfoMessage && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { children: props.infoMessage })
     ] })
@@ -15774,7 +15966,7 @@ function MultipleFileUploadSchema(props) {
   const feedbackId = `${uid}-feedback`;
   return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: (0, import_classnames7.default)("form-group", { "has-error": showError }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("label", { className: "d-block control-label", htmlFor: uid, children: props.schema.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { "aria-describedby": feedbackId, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_components48.UploadInput, __spreadValues({}, uploadInputProps)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { "aria-describedby": feedbackId, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_components49.UploadInput, __spreadValues({}, uploadInputProps)) }),
     /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
       ControlFeedback_default,
       {
@@ -15797,7 +15989,7 @@ function getSuccessfullyProcessedFiles(allFiles) {
   return allFiles.filter((file) => !file.error && file.status === "succeeded");
 }
 function convertFileIdsToComponentFileObjects(fileIds) {
-  return fileIds.map((id) => isValidId(id) ? { id, status: import_components48.Status.SUCCEEDED } : null).filter((item) => item !== null);
+  return fileIds.map((id) => isValidId(id) ? { id, status: import_components49.Status.SUCCEEDED } : null).filter((item) => item !== null);
 }
 function isValidId(id) {
   return isNumber3(id) || isString2(id);
@@ -15808,13 +16000,13 @@ function getValidationMessages(schema, required, defaultErrorMessages) {
 }
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/multiSelectSchema/MultiSelectSchema.tsx
-var import_components50 = require("@transferwise/components");
+var import_components51 = require("@transferwise/components");
 var import_classnames8 = __toESM(require_classnames());
 var import_react35 = require("react");
 var import_react_intl29 = require("react-intl");
 
 // src/legacy/jsonSchemaForm/schemaFormControl/utils/mapping-utils.tsx
-var import_components49 = require("@transferwise/components");
+var import_components50 = require("@transferwise/components");
 var import_jsx_runtime81 = require("react/jsx-runtime");
 var mapConstSchemaToOption = (schema, controlType) => {
   switch (controlType) {
@@ -15866,17 +16058,17 @@ var getIconPropertyForSelectOption = (icon) => {
 var getAvatarPropertyForRadioOption = ({ image, icon }) => {
   if (image == null ? void 0 : image.url) {
     return {
-      avatar: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_components49.Avatar, { type: import_components49.AvatarType.THUMBNAIL, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("img", { src: image.url, alt: "" }) })
+      avatar: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_components50.Avatar, { type: import_components50.AvatarType.THUMBNAIL, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("img", { src: image.url, alt: "" }) })
     };
   }
   if ((icon == null ? void 0 : icon.name) && isValidIconName(icon.name)) {
     return {
-      avatar: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_components49.Avatar, { type: import_components49.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(DynamicIcon_default2, { type: icon.name }) })
+      avatar: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_components50.Avatar, { type: import_components50.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(DynamicIcon_default2, { type: icon.name }) })
     };
   }
   if (icon == null ? void 0 : icon.text) {
     return {
-      avatar: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_components49.Avatar, { type: import_components49.AvatarType.INITIALS, children: icon.text })
+      avatar: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_components50.Avatar, { type: import_components50.AvatarType.INITIALS, children: icon.text })
     };
   }
   return null;
@@ -15970,7 +16162,7 @@ function MultiSelectSchema({
   return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: (0, import_classnames8.default)("d-flex flex-column", formGroupClasses), children: [
     schema.title ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("label", { htmlFor: id, children: schema.title }) : void 0,
     /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-      import_components50.SelectInput,
+      import_components51.SelectInput,
       {
         id,
         multiple: true,
@@ -15995,7 +16187,7 @@ function MultiSelectSchema({
           if (withinTrigger) {
             return selected && index === selected[0] ? getFormattedMessage() : void 0;
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_components50.SelectInputOptionContent, { title: label, note: note != null ? note : secondary, icon });
+          return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_components51.SelectInputOptionContent, { title: label, note: note != null ? note : secondary, icon });
         },
         onChange: broadcastModelChange
       }
@@ -16025,17 +16217,17 @@ var getInitialModelIndices2 = (model, options) => {
 };
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/repeatableSchema/RepeatableSchema.tsx
-var import_components52 = require("@transferwise/components");
+var import_components53 = require("@transferwise/components");
 var import_icons4 = require("@transferwise/icons");
 var import_react37 = require("react");
 var import_react_intl32 = require("react-intl");
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/repeatableSchema/ItemSummary.tsx
-var import_components51 = require("@transferwise/components");
+var import_components52 = require("@transferwise/components");
 var import_jsx_runtime83 = require("react/jsx-runtime");
 function ItemSummaryOption2({ item, onClick }) {
   return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
-    import_components51.NavigationOption,
+    import_components52.NavigationOption,
     {
       media: getNavigationOptionMedia(item),
       title: item.title,
@@ -16406,7 +16598,7 @@ function RepeatableSchema({
     "has-error": (_a = errors && !isEmpty(errors)) != null ? _a : submitted && validations.length
   };
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { id, className: (0, import_classnames9.default)(formGroupClasses), children: [
-    schema.title && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_components52.Header, { title: schema.title }),
+    schema.title && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_components53.Header, { title: schema.title }),
     itemSummaries == null ? void 0 : itemSummaries.map((itemSummary) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
       ItemSummaryOption2,
       {
@@ -16416,7 +16608,7 @@ function RepeatableSchema({
       JSON.stringify(itemSummary)
     )),
     /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-      import_components52.NavigationOption,
+      import_components53.NavigationOption,
       {
         media: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_icons4.Plus, {}),
         title: schema.addItemTitle || formatMessage(repeatable_messages_default2.addItemTitle),
@@ -16425,7 +16617,7 @@ function RepeatableSchema({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-      import_components52.Modal,
+      import_components53.Modal,
       {
         open: openModalType !== null,
         title: (openModalType === "add" ? schema.addItemTitle : schema.editItemTitle) || formatMessage(repeatable_messages_default2.addItemTitle),
@@ -16514,7 +16706,7 @@ var ArraySchema = (props) => {
 var ArraySchema_default = ArraySchema;
 
 // src/legacy/jsonSchemaForm/objectSchema/ObjectSchema.tsx
-var import_components53 = require("@transferwise/components");
+var import_components54 = require("@transferwise/components");
 var import_classnames10 = __toESM(require_classnames());
 var import_react38 = require("react");
 var import_jsx_runtime88 = require("react/jsx-runtime");
@@ -16557,7 +16749,7 @@ function ObjectSchema(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_jsx_runtime88.Fragment, { children: [
     props.schema.alert && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(DynamicAlert_default, { component: props.schema.alert }),
     /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("fieldset", { children: [
-      props.schema.title && !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_components53.Header, { title: props.schema.title, as: "legend" }),
+      props.schema.title && !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_components54.Header, { title: props.schema.title, as: "legend" }),
       props.schema.description && !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("p", { children: [
         " ",
         props.schema.description,
@@ -16591,12 +16783,12 @@ function ObjectSchema(props) {
 var ObjectSchema_default = ObjectSchema;
 
 // src/legacy/jsonSchemaForm/oneOfSchema/OneOfSchema.tsx
-var import_components56 = require("@transferwise/components");
+var import_components57 = require("@transferwise/components");
 var import_classnames11 = __toESM(require_classnames());
 var import_react41 = require("react");
 
 // src/legacy/jsonSchemaForm/help/Help.tsx
-var import_components54 = require("@transferwise/components");
+var import_components55 = require("@transferwise/components");
 var import_react_intl34 = require("react-intl");
 
 // src/common/messages/help.messages.ts
@@ -16614,10 +16806,10 @@ var import_jsx_runtime89 = require("react/jsx-runtime");
 function Help2(props) {
   const intl = (0, import_react_intl34.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
-    import_components54.Info,
+    import_components55.Info,
     {
       className: "m-l-1",
-      content: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_components54.Markdown, { config: { link: { target: "_blank" } }, children: props.help.markdown }),
+      content: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_components55.Markdown, { config: { link: { target: "_blank" } }, children: props.help.markdown }),
       presentation: "POPOVER",
       size: "sm",
       "aria-label": intl.formatMessage(help_messages_default2.helpAria)
@@ -16631,7 +16823,7 @@ var import_react40 = require("react");
 var import_react_intl35 = require("react-intl");
 
 // src/legacy/formControl/FormControl.tsx
-var import_components55 = require("@transferwise/components");
+var import_components56 = require("@transferwise/components");
 var import_react39 = require("react");
 
 // src/legacy/formControl/utils/value-utils.ts
@@ -16891,7 +17083,7 @@ var _FormControl = class _FormControl extends import_react39.PureComponent {
       max,
       searchPlaceholder,
       onSearchChange,
-      size,
+      size: size2,
       uploadProps,
       label,
       description,
@@ -16909,7 +17101,7 @@ var _FormControl = class _FormControl extends import_react39.PureComponent {
     switch (type) {
       case FormControlType.RADIO:
         return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-          import_components55.RadioGroup,
+          import_components56.RadioGroup,
           {
             radios: options.map(this.mapOption),
             name,
@@ -16925,7 +17117,7 @@ var _FormControl = class _FormControl extends import_react39.PureComponent {
         );
       case FormControlType.CHECKBOX:
         return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-          import_components55.Checkbox,
+          import_components56.Checkbox,
           {
             checked: getSafeBooleanValue(value, { coerceValue: true }),
             disabled,
@@ -16943,7 +17135,7 @@ var _FormControl = class _FormControl extends import_react39.PureComponent {
         const items = options;
         const selected = this.getSelectedOption(options);
         return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "d-flex flex-column", children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-          import_components55.SelectInput,
+          import_components56.SelectInput,
           {
             id,
             UNSAFE_triggerButtonProps: {
@@ -16959,7 +17151,7 @@ var _FormControl = class _FormControl extends import_react39.PureComponent {
             })),
             value: selected != null ? selected : null,
             renderValue: ({ hideIconInTrigger, icon, label: label2, note, secondary }, withinTrigger) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-              import_components55.SelectInputOptionContent,
+              import_components56.SelectInputOptionContent,
               {
                 title: label2,
                 note: withinTrigger ? note != null ? note : secondary : note,
@@ -16988,7 +17180,7 @@ var _FormControl = class _FormControl extends import_react39.PureComponent {
       }
       case FormControlType.TAB:
         return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-          import_components55.Tabs,
+          import_components56.Tabs,
           {
             selected: ((_a = this.getSelectedOption(options)) == null ? void 0 : _a.value) || 0,
             tabs: options.map((option) => ({
@@ -17073,13 +17265,13 @@ var _FormControl = class _FormControl extends import_react39.PureComponent {
       case FormControlType.DATE:
       case FormControlType.DATETIME:
         return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-          import_components55.DateInput,
+          import_components56.DateInput,
           {
             "aria-labelledby": labelledBy,
             dayAutoComplete: this.getAutocompleteValue({ suffix: "-day" }),
             yearAutoComplete: this.getAutocompleteValue({ suffix: "-year" }),
             disabled,
-            size,
+            size: size2,
             value: getSafeDateOrStringValue(value),
             mode,
             monthFormat,
@@ -17090,7 +17282,7 @@ var _FormControl = class _FormControl extends import_react39.PureComponent {
         );
       case FormControlType.DATELOOKUP: {
         return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-          import_components55.DateLookup,
+          import_components56.DateLookup,
           {
             value: getSafeDateStringValue(value),
             min: minDate,
@@ -17108,14 +17300,14 @@ var _FormControl = class _FormControl extends import_react39.PureComponent {
       }
       case FormControlType.TEL:
         return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-          import_components55.PhoneNumberInput,
+          import_components56.PhoneNumberInput,
           {
             disabled,
             countryCode,
             placeholder,
             required,
             searchPlaceholder,
-            size,
+            size: size2,
             initialValue: getSafeStringValue(value),
             onBlur: this.handleOnBlur,
             onChange: (value2) => this.handleOnChange(value2),
@@ -17140,7 +17332,7 @@ var _FormControl = class _FormControl extends import_react39.PureComponent {
         };
         if (this.props.displayPattern) {
           return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-            import_components55.TextareaWithDisplayFormat,
+            import_components56.TextareaWithDisplayFormat,
             __spreadProps(__spreadValues({
               displayPattern: this.props.displayPattern
             }, textareaProps), {
@@ -17159,7 +17351,7 @@ var _FormControl = class _FormControl extends import_react39.PureComponent {
       case FormControlType.FILE:
       case FormControlType.UPLOAD: {
         return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-          import_components55.Upload,
+          import_components56.Upload,
           __spreadProps(__spreadValues({}, uploadProps), {
             usAccept: uploadProps.usAccept || "*",
             usDisabled: uploadProps.usDisabled || disabled,
@@ -17196,7 +17388,7 @@ var _FormControl = class _FormControl extends import_react39.PureComponent {
         };
         if (this.props.displayPattern) {
           return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-            import_components55.InputWithDisplayFormat,
+            import_components56.InputWithDisplayFormat,
             __spreadProps(__spreadValues({
               displayPattern: this.props.displayPattern
             }, inputProps), {
@@ -17536,7 +17728,7 @@ function getTitleAndHelp(schema, forId, labelId) {
     schema.title,
     " ",
     helpElement
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_components56.Header, { title: (_a = schema.title) != null ? _a : "" }) });
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_components57.Header, { title: (_a = schema.title) != null ? _a : "" }) });
   return schema.title ? titleElement : helpElement;
 }
 function getValidations(props, schemaIndex) {
@@ -17574,7 +17766,7 @@ var import_react43 = require("react");
 var import_react_intl36 = require("react-intl");
 
 // src/legacy/jsonSchemaForm/persistAsyncSchema/persistAsyncBlobSchema/UploadInputAdapter.tsx
-var import_components57 = require("@transferwise/components");
+var import_components58 = require("@transferwise/components");
 var import_react42 = require("react");
 var import_jsx_runtime93 = require("react/jsx-runtime");
 function UploadInputAdapter(props) {
@@ -17592,7 +17784,7 @@ function UploadInputAdapter(props) {
     onCancel
   } = props;
   const onEvent = useEventDispatcher();
-  const files = (0, import_react42.useMemo)(() => fileId ? [{ id: fileId, status: import_components57.Status.SUCCEEDED }] : [], [fileId]);
+  const files = (0, import_react42.useMemo)(() => fileId ? [{ id: fileId, status: import_components58.Status.SUCCEEDED }] : [], [fileId]);
   const uploadFile = (formData) => {
     onEvent("Dynamic Flow - PersistAsync", { status: "pending", schemaId: id });
     return httpClient(String(httpOptions.url), {
@@ -17612,7 +17804,7 @@ function UploadInputAdapter(props) {
     });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
-    import_components57.UploadInput,
+    import_components58.UploadInput,
     {
       id,
       fileInputName: httpOptions.fileInputName,
@@ -17747,7 +17939,7 @@ var getSelectionFromModel = (schema, model) => {
 };
 
 // src/legacy/jsonSchemaForm/promotedOneOfSchema/promotedOneOfControl/PromotedOneOfCheckboxControl.tsx
-var import_components58 = require("@transferwise/components");
+var import_components59 = require("@transferwise/components");
 var import_jsx_runtime96 = require("react/jsx-runtime");
 var PromotedOneOfCheckboxControl = (props) => {
   const { id, selection, setSelection } = props;
@@ -17759,12 +17951,12 @@ var PromotedOneOfCheckboxControl = (props) => {
   const toggleSelection = () => {
     setSelection(checked ? selectionWhenUnchecked : selectionWhenChecked);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "form-group", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_components58.Checkbox, { id, label: title, checked, onChange: toggleSelection }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "form-group", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_components59.Checkbox, { id, label: title, checked, onChange: toggleSelection }) });
 };
 var PromotedOneOfCheckboxControl_default = PromotedOneOfCheckboxControl;
 
 // src/legacy/jsonSchemaForm/promotedOneOfSchema/promotedOneOfControl/PromotedOneOfRadioControl.tsx
-var import_components59 = require("@transferwise/components");
+var import_components60 = require("@transferwise/components");
 var import_jsx_runtime97 = require("react/jsx-runtime");
 function PromotedOneOfRadioControl(props) {
   var _a, _b;
@@ -17785,7 +17977,7 @@ function PromotedOneOfRadioControl(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "form-group", children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("label", { className: "control-label", htmlFor: id, children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
-      import_components59.RadioGroup,
+      import_components60.RadioGroup,
       {
         name: "promoted-selection",
         selectedValue: selection,
@@ -17876,7 +18068,7 @@ function getOtherOneOf(schema) {
 var PromotedOneOfSchema_default = PromotedOneOfSchema;
 
 // src/legacy/jsonSchemaForm/readOnlySchema/ReadOnlySchema.tsx
-var import_components60 = require("@transferwise/components");
+var import_components61 = require("@transferwise/components");
 var import_react_intl38 = require("react-intl");
 
 // src/legacy/jsonSchemaForm/readOnlySchema/ReadOnlySchema.messages.ts
@@ -17900,7 +18092,7 @@ function ReadOnlySchema({ schema, model }) {
   const { title = "" } = schema;
   const { formatMessage } = (0, import_react_intl38.useIntl)();
   const value = getValueForSchema({ schema, model, formatMessage });
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_components60.DefinitionList, { layout: import_components60.Layout.VERTICAL_ONE_COLUMN, definitions: [{ title, value, key: "" }] });
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_components61.DefinitionList, { layout: import_components61.Layout.VERTICAL_ONE_COLUMN, definitions: [{ title, value, key: "" }] });
 }
 var ReadOnlySchema_default = ReadOnlySchema;
 function getValueForSchema({
@@ -18124,16 +18316,16 @@ function DynamicForm({
 var DynamicForm_default = DynamicForm;
 
 // src/legacy/layout/heading/DynamicHeading.tsx
-var import_components61 = require("@transferwise/components");
+var import_components62 = require("@transferwise/components");
 var import_classnames13 = __toESM(require_classnames());
 var import_jsx_runtime104 = require("react/jsx-runtime");
 var DynamicHeading = (props) => {
-  const { text, size = "md", align = "left", margin = "md", control } = props.component;
+  const { text, size: size2 = "md", align = "left", margin = "md", control } = props.component;
   const classes = (0, import_classnames13.default)(getTextAlignmentAndMargin2({ align, margin }));
-  return control === "display" ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(DisplayHeading2, { size, text, classes }) : /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(StandardHeading2, { size, text, classes });
+  return control === "display" ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(DisplayHeading2, { size: size2, text, classes }) : /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(StandardHeading2, { size: size2, text, classes });
 };
-var StandardHeading2 = ({ size, text, classes }) => {
-  switch (size) {
+var StandardHeading2 = ({ size: size2, text, classes }) => {
+  switch (size2) {
     case "xs":
       return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("h5", { className: classes, children: text });
     case "sm":
@@ -18147,38 +18339,38 @@ var StandardHeading2 = ({ size, text, classes }) => {
       return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("h3", { className: classes, children: text });
   }
 };
-var DisplayHeading2 = ({ size, text, classes }) => {
-  switch (size) {
+var DisplayHeading2 = ({ size: size2, text, classes }) => {
+  switch (size2) {
     case "xs":
     case "sm":
-      return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_components61.Display, { type: "display-small", className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_components62.Display, { type: "display-small", className: classes, children: text });
     case "xl":
     case "lg":
-      return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_components61.Display, { type: "display-large", className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_components62.Display, { type: "display-large", className: classes, children: text });
     case "md":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_components61.Display, { type: "display-medium", className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_components62.Display, { type: "display-medium", className: classes, children: text });
   }
 };
 var DynamicHeading_default = DynamicHeading;
 
 // src/legacy/layout/markdown/DynamicMarkdown.tsx
-var import_components62 = require("@transferwise/components");
+var import_components63 = require("@transferwise/components");
 var import_jsx_runtime105 = require("react/jsx-runtime");
 var DynamicMarkdown = ({ component }) => {
   const { content, align, margin } = component;
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: getTextAlignmentAndMargin2({ align, margin }), children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_components62.Markdown, { config: { link: { target: "_blank" } }, children: content }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: getTextAlignmentAndMargin2({ align, margin }), children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_components63.Markdown, { config: { link: { target: "_blank" } }, children: content }) });
 };
 var DynamicInfo = ({ component }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: getTextAlignmentAndMargin2(component), children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_components62.Markdown, { config: { link: { target: "_blank" } }, children: component.markdown }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: getTextAlignmentAndMargin2(component), children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_components63.Markdown, { config: { link: { target: "_blank" } }, children: component.markdown }) });
 };
 
 // src/legacy/layout/image/DynamicImage.tsx
-var import_components63 = require("@transferwise/components");
+var import_components64 = require("@transferwise/components");
 var import_react48 = require("react");
 var import_jsx_runtime106 = require("react/jsx-runtime");
 function DynamicImage({ component: image }) {
-  const { url, size, text, margin, accessibilityDescription } = image;
+  const { url, size: size2, text, margin, accessibilityDescription } = image;
   const httpClient = useHttpClient();
   const [imageSource, setImageSource] = (0, import_react48.useState)("");
   (0, import_react48.useEffect)(() => {
@@ -18193,7 +18385,7 @@ function DynamicImage({ component: image }) {
   if (!imageSource) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: `df-image ${size || "md"}`, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_components63.Image, __spreadValues({ className: `img-responsive ${getMargin2(margin || "md")}` }, imageProps)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: `df-image ${size2 || "md"}`, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_components64.Image, __spreadValues({ className: `img-responsive ${getMargin2(margin || "md")}` }, imageProps)) });
 }
 var readImageBlobAsDataURL2 = (imageBlob) => (
   // we can safely assume the type of reader.result is string
@@ -18229,7 +18421,7 @@ var getImageSource2 = async (httpClient, imageUrl) => {
 var DynamicImage_default = DynamicImage;
 
 // src/legacy/layout/instructions/DynamicInstructions.tsx
-var import_components64 = require("@transferwise/components");
+var import_components65 = require("@transferwise/components");
 var import_jsx_runtime107 = require("react/jsx-runtime");
 var doContext2 = ["positive", "neutral"];
 var dontContext2 = ["warning", "negative"];
@@ -18238,8 +18430,8 @@ var DynamicInstructions = ({ 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__ */ (0, import_jsx_runtime107.jsxs)("div", { className: getMargin2(component.margin || "md"), children: [
-    component.title ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_components64.Header, { title: component.title }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_components64.InstructionsList, { dos, donts })
+    component.title ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_components65.Header, { title: component.title }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_components65.InstructionsList, { dos, donts })
   ] });
 };
 var DynamicInstructions_default = DynamicInstructions;
@@ -18349,11 +18541,11 @@ function DynamicLayout(props) {
 var DynamicLayout_default = DynamicLayout;
 
 // src/legacy/layout/list/DynamicStatusList.tsx
-var import_components65 = require("@transferwise/components");
+var import_components66 = require("@transferwise/components");
 var import_jsx_runtime109 = require("react/jsx-runtime");
 var DynamicStatusList = ({ component, onAction }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: getMargin2(component.margin || "md"), children: [
-    component.title ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_components65.Header, { title: component.title }) : null,
+    component.title ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_components66.Header, { title: component.title }) : null,
     component.items.map((item) => mapListItemToSummary(item, onAction))
   ] });
 };
@@ -18364,13 +18556,35 @@ var mapListItemToSummary = (props, onAction) => {
     description,
     action: "callToAction" in props ? callToActionToSummaryAction(props == null ? void 0 : props.callToAction, onAction) : void 0
   }, (icon == null ? void 0 : icon.name) ? { icon: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(DynamicIcon_default2, { type: icon.name }) } : {}), status ? { status: statusMap[status] } : {});
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_components65.Summary, __spreadValues({}, summaryProps), `${title}/${description || ""}`);
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_components66.Summary, __spreadValues({}, summaryProps), `${title}/${description || ""}`);
 };
 var callToActionToSummaryAction = (callToAction, onAction) => {
   if (!callToAction) {
     return void 0;
   }
   const { accessibilityDescription, behavior, title } = callToAction;
+  if ("type" in behavior) {
+    switch (behavior.type) {
+      case "action": {
+        const { action } = behavior;
+        return {
+          text: title,
+          "aria-label": accessibilityDescription,
+          onClick: () => {
+            onAction(action);
+          }
+        };
+      }
+      case "link": {
+        return {
+          text: title,
+          "aria-label": accessibilityDescription,
+          href: behavior.url,
+          target: "_blank"
+        };
+      }
+    }
+  }
   if (behavior.link) {
     const { link } = behavior;
     return {
@@ -18411,14 +18625,14 @@ var statusMap = __spreadValues(__spreadValues({}, statusListMap), legacyStatusMa
 var DynamicStatusList_default = DynamicStatusList;
 
 // src/legacy/layout/loadingIndicator/DynamicLoadingIndicator.tsx
-var import_components66 = require("@transferwise/components");
+var import_components67 = require("@transferwise/components");
 var import_jsx_runtime110 = require("react/jsx-runtime");
 var DynamicLoadingIndicator = ({ component }) => {
-  const { margin = "md", size = "md" } = component;
+  const { margin = "md", size: size2 = "md" } = component;
   return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
-    import_components66.Loader,
+    import_components67.Loader,
     {
-      size,
+      size: size2,
       classNames: {
         "tw-loader": `tw-loader m-x-auto ${getMargin2(margin)}`
       },
@@ -18429,7 +18643,7 @@ var DynamicLoadingIndicator = ({ component }) => {
 var DynamicLoadingIndicator_default = DynamicLoadingIndicator;
 
 // src/legacy/layout/paragraph/DynamicParagraph.tsx
-var import_components68 = require("@transferwise/components");
+var import_components69 = require("@transferwise/components");
 var import_react_intl40 = require("react-intl");
 
 // src/common/messages/paragraph.messages.ts
@@ -18448,10 +18662,10 @@ var paragraph_messages_default2 = (0, import_react_intl39.defineMessages)({
 });
 
 // src/legacy/layout/paragraph/useSnackBarIfAvailable.ts
-var import_components67 = require("@transferwise/components");
+var import_components68 = require("@transferwise/components");
 var import_react49 = require("react");
 function useSnackBarIfAvailable2() {
-  const context = (0, import_react49.useContext)(import_components67.SnackbarContext);
+  const context = (0, import_react49.useContext)(import_components68.SnackbarContext);
   return context ? context.createSnackbar : noop3;
 }
 function noop3() {
@@ -18488,7 +18702,7 @@ function CopyableDynamicParagraph({ component }) {
         style: { textOverflow: "ellipsis" }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_components68.Button, { block: true, onClick: copy, children: formatMessage(paragraph_messages_default2.copy) })
+    /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_components69.Button, { block: true, onClick: copy, children: formatMessage(paragraph_messages_default2.copy) })
   ] });
 }
 function noop4() {
@@ -18496,7 +18710,7 @@ function noop4() {
 var DynamicParagraph_default = DynamicParagraph;
 
 // src/legacy/layout/review/DynamicReview.tsx
-var import_components69 = require("@transferwise/components");
+var import_components70 = require("@transferwise/components");
 var import_jsx_runtime112 = require("react/jsx-runtime");
 var getDefinitions = (orientation, review) => review.fields.map(({ label, value, help }, index) => ({
   key: String(index),
@@ -18533,13 +18747,29 @@ var getDefinitionListLayout = (review) => {
       return "VERTICAL_ONE_COLUMN";
   }
 };
-function DynamicReview(props) {
-  var _a;
-  const review = props.component;
+function DynamicReview({ component: review, onAction }) {
+  var _a, _b;
   const margin = getMargin2(review.margin || "xs");
   const getReviewAction3 = (callToAction2) => {
     const { title, action, behavior } = callToAction2;
     if (behavior) {
+      if ("type" in behavior) {
+        switch (behavior.type) {
+          case "action": {
+            const { action: behaviorAction2 } = behavior;
+            return {
+              text: title != null ? title : "",
+              onClick: behaviorAction2 ? getOnClick(behaviorAction2) : void 0
+            };
+          }
+          case "link": {
+            return {
+              text: title != null ? title : "",
+              href: behavior.url
+            };
+          }
+        }
+      }
       const { action: behaviorAction, link } = behavior;
       if (behaviorAction) {
         return {
@@ -18563,7 +18793,7 @@ function DynamicReview(props) {
     return (event) => {
       event.preventDefault();
       if (action) {
-        props.onAction(action);
+        onAction(action);
       }
     };
   };
@@ -18571,8 +18801,8 @@ function DynamicReview(props) {
   const callToAction = review.callToAction ? getReviewAction3(review.callToAction) : null;
   const legacyCallToAction = !callToAction && review.action ? { text: (_a = review.action.title) != null ? _a : "", onClick: getOnClick(review.action) } : null;
   return /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("div", { className: margin, children: [
-    review.title && /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_components69.Header, { title: review.title, action: callToAction || legacyCallToAction || void 0 }),
-    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { className: margin, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_components69.DefinitionList, { layout: orientation, definitions: getDefinitions(orientation, review) }) })
+    review.title && /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_components70.Header, { title: review.title, action: (_b = callToAction != null ? callToAction : legacyCallToAction) != null ? _b : void 0 }),
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { className: margin, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_components70.DefinitionList, { layout: orientation, definitions: getDefinitions(orientation, review) }) })
   ] });
 }
 var DynamicReview_default = DynamicReview;
@@ -18582,13 +18812,13 @@ var import_react51 = require("react");
 var import_icons5 = require("@transferwise/icons");
 
 // src/legacy/layout/search/SearchInput.tsx
-var import_components70 = require("@transferwise/components");
+var import_components71 = require("@transferwise/components");
 var import_jsx_runtime113 = require("react/jsx-runtime");
 var SearchInput = ({ title, value, onFocus, onChange }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("label", { className: "control-label d-inline", children: [
     title,
     /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
-      import_components70.Input,
+      import_components71.Input,
       {
         type: "text",
         value,
@@ -18601,15 +18831,15 @@ var SearchInput = ({ title, value, onFocus, onChange }) => {
 };
 
 // src/legacy/layout/search/SearchResults.tsx
-var import_components71 = require("@transferwise/components");
+var import_components72 = require("@transferwise/components");
 var import_react_intl41 = require("react-intl");
 var import_jsx_runtime114 = require("react/jsx-runtime");
 function SearchResults2({ results, emptyMessage, onSelect }) {
   if (results.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("p", { className: "m-t-2", children: emptyMessage });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_components71.NavigationOptionsList, { children: results.map((result) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
-    import_components71.NavigationOption,
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_components72.NavigationOptionsList, { children: results.map((result) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+    import_components72.NavigationOption,
     {
       title: result.title,
       content: result.description,
@@ -18710,7 +18940,7 @@ var addQueryParameter2 = (url, key, value) => {
 };
 
 // src/legacy/layout/search/DynamicSearch.tsx
-var import_components72 = require("@transferwise/components");
+var import_components73 = require("@transferwise/components");
 var import_classnames14 = __toESM(require_classnames());
 var import_react_intl43 = require("react-intl");
 
@@ -18766,7 +18996,7 @@ function DynamicSearch({ component, onAction }) {
     return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("div", { className: (0, import_classnames14.default)(getMargin2(margin != null ? margin : "md"), "df-search-typeahead"), children: /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("label", { className: "control-label d-inline", children: [
       title,
       /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("div", { className: "m-t-1", children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
-        import_components72.Typeahead,
+        import_components73.Typeahead,
         {
           id: "typeahead-input-id",
           intl,
@@ -18824,7 +19054,7 @@ function TypeaheadFooter2({
   onRetrySearch
 }) {
   if (state === "success" && results.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_components72.Markdown, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: emptyMessage });
+    return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_components73.Markdown, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: emptyMessage });
   }
   if (state === "error" && results.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("div", { className: "m-t-2 m-x-2", children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(ErrorResult2, { onRetrySearch }) });
@@ -18837,7 +19067,7 @@ function TypeaheadFooter2({
 var DynamicSearch_default = DynamicSearch;
 
 // src/legacy/layout/modal/DynamicModal.tsx
-var import_components73 = require("@transferwise/components");
+var import_components74 = require("@transferwise/components");
 var import_react52 = require("react");
 var import_jsx_runtime116 = require("react/jsx-runtime");
 function DynamicModal(props) {
@@ -18845,9 +19075,9 @@ function DynamicModal(props) {
   const { component, onAction } = props;
   const { margin = "md" } = component;
   return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { className: getTextAlignmentAndMargin2({ margin }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_components73.Button, { priority: "tertiary", block: true, onClick: () => isVisible(true), children: component.trigger.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_components74.Button, { priority: "tertiary", block: true, onClick: () => isVisible(true), children: component.trigger.title }),
     /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
-      import_components73.Modal,
+      import_components74.Modal,
       {
         scroll: "content",
         open: visible,
@@ -19398,7 +19628,7 @@ var CameraCapture_messages_default = (0, import_react_intl46.defineMessages)({
 });
 
 // src/common/cameraCapture/components/bottomBar/BottomBar.tsx
-var import_components74 = require("@transferwise/components");
+var import_components75 = require("@transferwise/components");
 var import_react_intl47 = require("react-intl");
 var import_jsx_runtime120 = require("react/jsx-runtime");
 var CaptureBottomBar = ({ onCapture }) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { className: "bottom-bar", children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(CaptureButton, { onClick: onCapture }) });
@@ -19409,24 +19639,24 @@ var ReviewBottomBar = ({
   const intl = (0, import_react_intl47.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { className: "bottom-bar p-x-2", children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "col-xs-12 col-md-6 col-md-offset-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-      import_components74.Button,
+      import_components75.Button,
       {
         className: "m-b-1",
         block: true,
-        size: import_components74.Size.MEDIUM,
-        type: import_components74.ControlType.ACCENT,
+        size: import_components75.Size.MEDIUM,
+        type: import_components75.ControlType.ACCENT,
         onClick: onSubmit,
         children: intl.formatMessage(CameraCapture_messages_default.reviewSubmit)
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-      import_components74.Button,
+      import_components75.Button,
       {
         className: "m-b-2",
         block: true,
-        size: import_components74.Size.MEDIUM,
-        type: import_components74.ControlType.ACCENT,
-        priority: import_components74.Priority.SECONDARY,
+        size: import_components75.Size.MEDIUM,
+        type: import_components75.ControlType.ACCENT,
+        priority: import_components75.Priority.SECONDARY,
         onClick: onRetry,
         children: intl.formatMessage(CameraCapture_messages_default.reviewRetry)
       }
@@ -19711,13 +19941,13 @@ function Overlay({ overlay, outline, imageUrl, title, instructions, reviewInstru
 var Overlay_default = Overlay;
 
 // src/common/cameraCapture/screens/cameraErrorScreen/CameraErrorScreen.tsx
-var import_components75 = require("@transferwise/components");
+var import_components76 = require("@transferwise/components");
 var import_jsx_runtime123 = require("react/jsx-runtime");
 function CameraErrorScreen({ title, description, actionButton, onAction }) {
   return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { className: "container p-t-5", children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "col-md-6 col-md-offset-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("h2", { className: "text-xs-center m-b-3", children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("p", { className: "text-xs-center m-b-5", children: description }),
-    onAction && actionButton && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_components75.Button, { block: true, onClick: onAction, children: actionButton })
+    onAction && actionButton && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_components76.Button, { block: true, onClick: onAction, children: actionButton })
   ] }) }) });
 }
 var CameraErrorScreen_default = CameraErrorScreen;
@@ -20071,7 +20301,7 @@ function getOrigin2(url) {
 }
 
 // src/legacy/dynamicFlow/BackButton.tsx
-var import_components77 = require("@transferwise/components");
+var import_components78 = require("@transferwise/components");
 var import_icons6 = require("@transferwise/icons");
 var import_jsx_runtime127 = require("react/jsx-runtime");
 function BackButton2({ title, action, onAction }) {
@@ -20087,7 +20317,7 @@ function BackButton2({ title, action, onAction }) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "sr-only", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_components77.Avatar, { type: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons6.ArrowLeft, { size: "24" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_components78.Avatar, { type: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons6.ArrowLeft, { size: "24" }) })
       ]
     }
   ) });
@@ -20264,19 +20494,19 @@ var getSchemaReference = (component) => {
 var isInlineSchema = (schema) => schema !== void 0 && typeof schema === "object" && !Object.hasOwnProperty.call(schema, "$ref");
 
 // src/legacy/dynamicFlow/utils/useLoader.tsx
-var import_components78 = require("@transferwise/components");
+var import_components79 = require("@transferwise/components");
 var import_react66 = require("react");
 var import_jsx_runtime129 = require("react/jsx-runtime");
 function useLoader(loaderConfig, initialState) {
   const config = __spreadValues({
-    size: import_components78.Size.EXTRA_LARGE,
+    size: import_components79.Size.EXTRA_LARGE,
     initial: true,
     submission: false
   }, loaderConfig);
   const [loadingState, setLoadingState] = (0, import_react66.useState)(initialState);
   const shouldDisplayLoader = config.initial && loadingState === "initial" || config.submission && loadingState === "submission";
   const loader = shouldDisplayLoader ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-    import_components78.Loader,
+    import_components79.Loader,
     {
       size: config.size,
       classNames: { "tw-loader": "tw-loader m-x-auto" },