@wise/dynamic-flow-client 3.27.0 → 3.28.1

package/build/main.mjs

@@ -138,12 +138,12 @@ var init_clsx = __esm({
   }
 });
 
-// ../../node_modules/.pnpm/@wise+art@2.16.3_@transferwise+neptune-css@14.19.1_@types+react@18.3.12_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/art/dist/index-a91e5689.esm.js
+// ../../node_modules/.pnpm/@wise+art@2.16.3_@transferwise+neptune-css@14.20.0_@types+react@18.3.12_react-dom@18.3.1_reac_ybxnuulsvhsfhz3tk3mxo6vlti/node_modules/@wise/art/dist/index-a91e5689.esm.js
 import { useState as useState2, useEffect as useEffect2, forwardRef, Suspense, lazy } from "react";
 import { jsx as jsx17, jsxs as jsxs4, Fragment as Fragment3 } from "react/jsx-runtime";
 var unknownFlagName, Flag, Sizes, ImageSizes, imageSizes, Assets, RenderMode;
 var init_index_a91e5689_esm = __esm({
-  "../../node_modules/.pnpm/@wise+art@2.16.3_@transferwise+neptune-css@14.19.1_@types+react@18.3.12_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/art/dist/index-a91e5689.esm.js"() {
+  "../../node_modules/.pnpm/@wise+art@2.16.3_@transferwise+neptune-css@14.20.0_@types+react@18.3.12_react-dom@18.3.1_reac_ybxnuulsvhsfhz3tk3mxo6vlti/node_modules/@wise/art/dist/index-a91e5689.esm.js"() {
     "use strict";
     init_clsx();
     unknownFlagName = "wise";
@@ -494,7 +494,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.",
@@ -812,7 +812,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.",
@@ -971,7 +971,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.",
@@ -1077,7 +1077,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.",
@@ -1130,7 +1130,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",
@@ -1289,7 +1289,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",
@@ -1576,7 +1576,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,
@@ -1585,7 +1585,7 @@ var buttonComponentToProps = (component) => {
     disabled,
     margin,
     pinOrder,
-    size,
+    size: size2,
     onClick
   };
 };
@@ -1628,14 +1628,14 @@ var headingComponentToProps = ({
   align,
   control,
   margin,
-  size,
+  size: size2,
   text
 }) => ({
   type: "heading",
   align,
   control,
   margin,
-  size,
+  size: size2,
   text
 });
 
@@ -1649,14 +1649,14 @@ var imageComponentToProps = ({
   accessibilityDescription,
   control,
   margin,
-  size,
+  size: size2,
   url
 }) => ({
   type: "image",
   accessibilityDescription,
   control,
   margin,
-  size,
+  size: size2,
   url
 });
 
@@ -1685,12 +1685,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
@@ -5032,8 +5032,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);
@@ -7007,7 +7007,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;
@@ -7108,11 +7130,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;
@@ -7136,14 +7173,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 = () => {
@@ -7156,13 +7193,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"),
@@ -7170,7 +7207,7 @@ var buttonLayoutToComponentWithNoop = (uid, button) => {
     disabled: disabled != null ? disabled : false,
     margin,
     pinOrder,
-    size,
+    size: size2,
     title: title != null ? title : "",
     onClick: () => {
     }
@@ -10005,12 +10042,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
 });
 
@@ -10027,12 +10064,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
 });
 
@@ -10093,7 +10130,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({
@@ -10194,12 +10231,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,
@@ -10434,7 +10495,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;
@@ -11340,8 +11425,8 @@ var useRendererHttpClient = () => {
 import { Alert as Alert2 } from "@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":
@@ -11515,13 +11600,14 @@ var import_classnames = __toESM(require_classnames());
 import { jsx as jsx12 } from "react/jsx-runtime";
 var BoxRenderer = {
   canRenderType: "box",
-  render: ({ border, children, margin, width }) => {
+  render: ({ border, children, control, margin, width }) => {
     const hasFixedWidth = width !== "xl";
+    const hasBorder = control === "bordered" || control === "bordered-web" || border;
     const contents = /* @__PURE__ */ jsx12(
       "div",
       {
         className: (0, import_classnames.default)({
-          "df-box-renderer-border": border,
+          "df-box-renderer-border": hasBorder,
           [`df-box-renderer-width-${width}`]: hasFixedWidth,
           [getMargin(margin)]: !hasFixedWidth
         }),
@@ -11562,7 +11648,7 @@ function ButtonRendererComponent({
   disabled,
   margin,
   title,
-  size,
+  size: size2,
   onClick
 }) {
   const className = getMargin(margin);
@@ -11576,7 +11662,7 @@ function ButtonRendererComponent({
       className,
       disabled: isLoading || disabled,
       priority: mapControl(control),
-      size: mapSize(size),
+      size: mapSize(size2),
       type,
       onClick,
       children: title
@@ -11601,11 +11687,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";
@@ -11764,7 +11850,7 @@ var DateInputRenderer_default = DateInputRenderer;
 // ../renderers/src/DecisionRenderer.tsx
 import { NavigationOptionsList, NavigationOption, Header } from "@transferwise/components";
 
-// ../../node_modules/.pnpm/@wise+art@2.16.3_@transferwise+neptune-css@14.19.1_@types+react@18.3.12_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/art/dist/index.esm.js
+// ../../node_modules/.pnpm/@wise+art@2.16.3_@transferwise+neptune-css@14.20.0_@types+react@18.3.12_react-dom@18.3.1_reac_ybxnuulsvhsfhz3tk3mxo6vlti/node_modules/@wise/art/dist/index.esm.js
 init_index_a91e5689_esm();
 init_clsx();
 import "react";
@@ -11902,15 +11988,15 @@ var HeadingRenderer = {
   render: (props) => /* @__PURE__ */ jsx26(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__ */ jsx26(DisplayHeading, { size, text, className }) : /* @__PURE__ */ jsx26(StandardHeading, { size, text, className });
+  return control === "display" ? /* @__PURE__ */ jsx26(DisplayHeading, { size: size2, text, className }) : /* @__PURE__ */ jsx26(StandardHeading, { size: size2, text, className });
 }
-function DisplayHeading({ size, text, className }) {
-  return /* @__PURE__ */ jsx26(Display, { type: getDisplayType(size), className, children: text });
+function DisplayHeading({ size: size2, text, className }) {
+  return /* @__PURE__ */ jsx26(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__ */ jsx26("h5", { className, children: text });
     case "sm":
@@ -11924,8 +12010,8 @@ function StandardHeading({ size, text, className }) {
       return /* @__PURE__ */ jsx26("h3", { className, children: text });
   }
 }
-var getDisplayType = (size) => {
-  switch (size) {
+var getDisplayType = (size2) => {
+  switch (size2) {
     case "xs":
     case "sm":
       return "display-small";
@@ -11960,7 +12046,7 @@ var ImageRenderer_default = ImageRenderer;
 function ImageRendererComponent({
   accessibilityDescription,
   margin,
-  size,
+  size: size2,
   url
 }) {
   const [imageSource, setImageSource] = useState3("");
@@ -11968,7 +12054,7 @@ function ImageRendererComponent({
   useEffect3(() => {
     void getImageSource(httpClient, url).then(setImageSource);
   }, [url, httpClient]);
-  return /* @__PURE__ */ jsx27("div", { className: `df-image ${size || "md"}`, children: /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx27("div", { className: `df-image ${size2 || "md"}`, children: /* @__PURE__ */ jsx27(
     Image,
     {
       className: `img-responsive ${getMargin(margin)}`,
@@ -12030,7 +12116,7 @@ var InstructionsRenderer = {
 var InstructionsRenderer_default = InstructionsRenderer;
 
 // ../renderers/src/IntegerInputRenderer.tsx
-import { Input } from "@transferwise/components";
+import { Input, InputGroup } from "@transferwise/components";
 
 // ../renderers/src/utils/input-utils.ts
 var onWheel = (event) => {
@@ -12039,13 +12125,71 @@ var onWheel = (event) => {
   }
 };
 
-// ../renderers/src/IntegerInputRenderer.tsx
+// ../renderers/src/utils/getIconAvatar.tsx
+import { Avatar as Avatar2, AvatarType as AvatarType2 } from "@transferwise/components";
 import { jsx as jsx29 } from "react/jsx-runtime";
+var size = 24;
+function getIconAvatar({ icon, image }) {
+  if (image == null ? void 0 : image.url) {
+    return /* @__PURE__ */ jsx29(
+      "img",
+      {
+        src: image.url,
+        alt: image.accessibilityDescription,
+        width: `${size}px`,
+        height: `${size}px`
+      }
+    );
+  }
+  if (isFlagIcon2(icon)) {
+    return /* @__PURE__ */ jsx29(Avatar2, { type: AvatarType2.ICON, size, children: /* @__PURE__ */ jsx29(DynamicIcon_default, { name: icon.name }) });
+  }
+  if (isNamedIcon2(icon)) {
+    return /* @__PURE__ */ jsx29(DynamicIcon_default, { name: icon.name });
+  }
+  if (icon && "text" in icon) {
+    return /* @__PURE__ */ jsx29(Avatar2, { type: AvatarType2.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
+import { jsx as jsx30 } from "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__ */ jsx29(
+    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__ */ jsx30(
       FieldInput_default,
       {
         id,
@@ -12053,7 +12197,7 @@ var IntegerInputRenderer = {
         description,
         validation: validationState,
         help,
-        children: /* @__PURE__ */ jsx29(
+        children: /* @__PURE__ */ jsx30(InputGroup, { addonStart: getInputGroupAddonStart({ icon, image }), children: /* @__PURE__ */ jsx30(
           Input,
           __spreadValues({
             id,
@@ -12068,7 +12212,7 @@ var IntegerInputRenderer = {
             },
             onWheel
           }, rest)
-        )
+        ) })
       }
     );
   }
@@ -12077,13 +12221,13 @@ var IntegerInputRenderer_default = IntegerInputRenderer;
 
 // ../renderers/src/LoadingIndicatorRenderer.tsx
 import { Loader } from "@transferwise/components";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var LoadingIndicatorRenderer = {
   canRenderType: "loading-indicator",
-  render: ({ margin, size }) => /* @__PURE__ */ jsx30(
+  render: ({ margin, size: size2 }) => /* @__PURE__ */ jsx31(
     Loader,
     {
-      size,
+      size: size2,
       classNames: { "tw-loader": `tw-loader m-x-auto ${getMargin(margin)}` },
       "data-testid": "loading-indicator"
     }
@@ -12093,28 +12237,28 @@ var LoadingIndicatorRenderer_default = LoadingIndicatorRenderer;
 
 // ../renderers/src/MarkdownRenderer.tsx
 import { Markdown as Markdown2 } from "@transferwise/components";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var MarkdownRenderer = {
   canRenderType: "markdown",
-  render: ({ content, align, margin }) => /* @__PURE__ */ jsx31("div", { className: getTextAlignmentAndMargin({ align, margin }), children: /* @__PURE__ */ jsx31(Markdown2, { config: { link: { target: "_blank" } }, children: content }) })
+  render: ({ content, align, margin }) => /* @__PURE__ */ jsx32("div", { className: getTextAlignmentAndMargin({ align, margin }), children: /* @__PURE__ */ jsx32(Markdown2, { config: { link: { target: "_blank" } }, children: content }) })
 };
 var MarkdownRenderer_default = MarkdownRenderer;
 
 // ../renderers/src/ModalRenderer.tsx
 import { Button as Button2, Modal } from "@transferwise/components";
 import { useState as useState4 } from "react";
-import { jsx as jsx32, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs8 } from "react/jsx-runtime";
 var ModalRenderer = {
   canRenderType: "modal",
-  render: (props) => /* @__PURE__ */ jsx32(DFModal, __spreadValues({}, props))
+  render: (props) => /* @__PURE__ */ jsx33(DFModal, __spreadValues({}, props))
 };
 var ModalRenderer_default = ModalRenderer;
 function DFModal({ content, margin, trigger }) {
   const [visible, setVisible] = useState4(false);
   const { components, title } = content;
   return /* @__PURE__ */ jsxs8("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ jsx32(Button2, { priority: "tertiary", block: true, onClick: () => setVisible(true), children: trigger.title }),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33(Button2, { priority: "tertiary", block: true, onClick: () => setVisible(true), children: trigger.title }),
+    /* @__PURE__ */ jsx33(
       Modal,
       {
         scroll: "content",
@@ -12132,17 +12276,17 @@ function DFModal({ content, margin, trigger }) {
 import { SelectInput, SelectInputOptionContent } from "@transferwise/components";
 
 // ../renderers/src/SelectInputRenderer/OptionMedia.tsx
-import { Avatar as Avatar2, AvatarType as AvatarType2 } from "@transferwise/components";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { Avatar as Avatar3, AvatarType as AvatarType3 } from "@transferwise/components";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function OptionMedia({ icon, image }) {
   if (image == null ? void 0 : image.url) {
-    return /* @__PURE__ */ jsx33("img", { src: image.url, alt: image.accessibilityDescription || "", width: "64px" });
+    return /* @__PURE__ */ jsx34("img", { src: image.url, alt: image.accessibilityDescription || "", width: "64px" });
   }
   if (icon && "name" in icon) {
-    return /* @__PURE__ */ jsx33(Avatar2, { type: AvatarType2.ICON, children: /* @__PURE__ */ jsx33(DynamicIcon_default, { name: icon.name }) });
+    return /* @__PURE__ */ jsx34(Avatar3, { type: AvatarType3.ICON, children: /* @__PURE__ */ jsx34(DynamicIcon_default, { name: icon.name }) });
   }
   if (icon && "text" in icon) {
-    return /* @__PURE__ */ jsx33(Avatar2, { type: AvatarType2.INITIALS, children: icon.text });
+    return /* @__PURE__ */ jsx34(Avatar3, { type: AvatarType3.INITIALS, children: icon.text });
   }
   return null;
 }
@@ -12162,10 +12306,10 @@ var multi_select_messages_default = defineMessages7({
 
 // ../renderers/src/MultiSelectInputRenderer.tsx
 import { useState as useState5 } from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var MultiSelectInputRenderer = {
   canRenderType: "input-multi-select",
-  render: (props) => /* @__PURE__ */ jsx34(MultiSelectInputRendererComponent, __spreadValues({}, props))
+  render: (props) => /* @__PURE__ */ jsx35(MultiSelectInputRendererComponent, __spreadValues({}, props))
 };
 function MultiSelectInputRendererComponent(props) {
   const { formatMessage } = useIntl4();
@@ -12207,12 +12351,12 @@ function MultiSelectInputRendererComponent(props) {
     const contentProps = {
       title: option.title,
       description: option.description,
-      icon: /* @__PURE__ */ jsx34(OptionMedia, { icon: option.icon, image: option.image })
+      icon: /* @__PURE__ */ jsx35(OptionMedia, { icon: option.icon, image: option.image })
     };
-    return /* @__PURE__ */ jsx34(SelectInputOptionContent, __spreadValues({}, contentProps));
+    return /* @__PURE__ */ jsx35(SelectInputOptionContent, __spreadValues({}, contentProps));
   };
   const extraProps = { autoComplete };
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     FieldInput_default,
     {
       id,
@@ -12220,7 +12364,7 @@ function MultiSelectInputRendererComponent(props) {
       help,
       description,
       validation: validationState,
-      children: /* @__PURE__ */ jsx34(
+      children: /* @__PURE__ */ jsx35(
         SelectInput,
         __spreadValues({
           id,
@@ -12264,7 +12408,7 @@ import { UploadInput } from "@transferwise/components";
 // ../renderers/src/components/UploadFieldInput.tsx
 var import_classnames3 = __toESM(require_classnames());
 import { InlineAlert } from "@transferwise/components";
-import { jsx as jsx35, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs9 } from "react/jsx-runtime";
 function UploadFieldInput({
   id,
   children,
@@ -12273,7 +12417,7 @@ function UploadFieldInput({
   help,
   validation
 }) {
-  const labelContent = label && help ? /* @__PURE__ */ jsx35(LabelContentWithHelp, { text: label, help }) : label;
+  const labelContent = label && help ? /* @__PURE__ */ jsx36(LabelContentWithHelp, { text: label, help }) : label;
   const descriptionId = description ? `${id}-description` : void 0;
   return /* @__PURE__ */ jsxs9(
     "div",
@@ -12282,9 +12426,9 @@ function UploadFieldInput({
         "has-error": (validation == null ? void 0 : validation.status) === "invalid"
       }),
       children: [
-        /* @__PURE__ */ jsx35("label", { htmlFor: id, className: "control-label", children: labelContent }),
+        /* @__PURE__ */ jsx36("label", { htmlFor: id, className: "control-label", children: labelContent }),
         children,
-        (validation == null ? void 0 : validation.status) === "invalid" && /* @__PURE__ */ jsx35(InlineAlert, { type: "negative", id: descriptionId, children: validation.message })
+        (validation == null ? void 0 : validation.status) === "invalid" && /* @__PURE__ */ jsx36(InlineAlert, { type: "negative", id: descriptionId, children: validation.message })
       ]
     }
   );
@@ -12316,7 +12460,7 @@ var getFileType = (base64Url) => {
 var getRandomId = () => Math.random().toString(36).substring(2);
 
 // ../renderers/src/MultiUploadInputRenderer.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var MultiUploadInputRenderer = {
   canRenderType: "input-upload-multi",
   render: (props) => {
@@ -12343,7 +12487,7 @@ var MultiUploadInputRenderer = {
     };
     const onDeleteFile = async (fileId) => onDelete(String(fileId));
     const descriptionId = description ? `${id}-description` : void 0;
-    return /* @__PURE__ */ jsx36(
+    return /* @__PURE__ */ jsx37(
       UploadFieldInput_default,
       {
         id,
@@ -12351,7 +12495,7 @@ var MultiUploadInputRenderer = {
         description,
         validation: validationState,
         help,
-        children: /* @__PURE__ */ jsx36(
+        children: /* @__PURE__ */ jsx37(
           UploadInput,
           {
             id,
@@ -12374,13 +12518,35 @@ var MultiUploadInputRenderer = {
 var MultiUploadInputRenderer_default = MultiUploadInputRenderer;
 
 // ../renderers/src/NumberInputRenderer.tsx
-import { Input as Input2 } from "@transferwise/components";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { Input as Input2, InputGroup as InputGroup2 } from "@transferwise/components";
+import { jsx as jsx38 } from "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__ */ jsx37(
+    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__ */ jsx38(
       FieldInput_default,
       {
         id,
@@ -12388,7 +12554,7 @@ var NumberInputRenderer = {
         description,
         validation: validationState,
         help,
-        children: /* @__PURE__ */ jsx37(
+        children: /* @__PURE__ */ jsx38(InputGroup2, { addonStart: getInputGroupAddonStart({ icon, image }), children: /* @__PURE__ */ jsx38(
           Input2,
           __spreadValues({
             id,
@@ -12401,7 +12567,7 @@ var NumberInputRenderer = {
             },
             onWheel
           }, rest)
-        )
+        ) })
       }
     );
   }
@@ -12440,17 +12606,17 @@ var paragraph_messages_default = defineMessages8({
 });
 
 // ../renderers/src/ParagraphRenderer.tsx
-import { jsx as jsx38, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs10 } from "react/jsx-runtime";
 var ParagraphRenderer = {
   canRenderType: "paragraph",
-  render: (props) => /* @__PURE__ */ jsx38(Paragraph, __spreadValues({}, props))
+  render: (props) => /* @__PURE__ */ jsx39(Paragraph, __spreadValues({}, props))
 };
 function Paragraph({ align, control, margin, text }) {
   const className = getTextAlignmentAndMargin({ align, margin });
-  return control === "copyable" ? /* @__PURE__ */ jsx38(CopyableParagraph, { className, align, text }) : /* @__PURE__ */ jsx38(StandardParagraph, { className, text });
+  return control === "copyable" ? /* @__PURE__ */ jsx39(CopyableParagraph, { className, align, text }) : /* @__PURE__ */ jsx39(StandardParagraph, { className, text });
 }
 function StandardParagraph({ text, className }) {
-  return /* @__PURE__ */ jsx38("p", { className: `np-text-body-large ${className}`, children: text });
+  return /* @__PURE__ */ jsx39("p", { className: `np-text-body-large ${className}`, children: text });
 }
 function CopyableParagraph({
   text,
@@ -12465,7 +12631,7 @@ function CopyableParagraph({
   };
   const inputAlignmentClasses = getTextAlignmentAndMargin({ align, margin: "sm" });
   return /* @__PURE__ */ jsxs10("div", { className, children: [
-    /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx39(
       Input3,
       {
         type: "text",
@@ -12474,7 +12640,7 @@ function CopyableParagraph({
         className: (0, import_classnames4.default)("text-ellipsis", inputAlignmentClasses)
       }
     ),
-    /* @__PURE__ */ jsx38(Button3, { block: true, onClick: copy, children: formatMessage(paragraph_messages_default.copy) })
+    /* @__PURE__ */ jsx39(Button3, { block: true, onClick: copy, children: formatMessage(paragraph_messages_default.copy) })
   ] });
 }
 var ParagraphRenderer_default = ParagraphRenderer;
@@ -12512,10 +12678,10 @@ var repeatable_messages_default = defineMessages9({
 
 // ../renderers/src/RepeatableRenderer.tsx
 var import_classnames5 = __toESM(require_classnames());
-import { Fragment as Fragment4, jsx as jsx39, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx40, jsxs as jsxs11 } from "react/jsx-runtime";
 var RepeatableRenderer = {
   canRenderType: "repeatable",
-  render: (props) => /* @__PURE__ */ jsx39(Repeatable, __spreadValues({}, props))
+  render: (props) => /* @__PURE__ */ jsx40(Repeatable, __spreadValues({}, props))
 };
 function Repeatable(props) {
   const {
@@ -12555,8 +12721,8 @@ function Repeatable(props) {
     setOpenModalType(null);
   };
   return /* @__PURE__ */ jsxs11(Fragment4, { children: [
-    title && /* @__PURE__ */ jsx39(Header4, { title }),
-    description && /* @__PURE__ */ jsx39("p", { children: description }),
+    title && /* @__PURE__ */ jsx40(Header4, { title }),
+    description && /* @__PURE__ */ jsx40("p", { children: description }),
     /* @__PURE__ */ jsxs11(
       "div",
       {
@@ -12564,30 +12730,30 @@ function Repeatable(props) {
           "has-error": (validationState == null ? void 0 : validationState.status) === "invalid"
         }),
         children: [
-          items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ jsx39(ItemSummaryOption, { item, onClick: () => onEditItem(index) }, item.id)),
-          /* @__PURE__ */ jsx39(
+          items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ jsx40(ItemSummaryOption, { item, onClick: () => onEditItem(index) }, item.id)),
+          /* @__PURE__ */ jsx40(
             NavigationOption2,
             {
-              media: /* @__PURE__ */ jsx39(Plus, {}),
+              media: /* @__PURE__ */ jsx40(Plus, {}),
               title: addItemTitle || formatMessage(repeatable_messages_default.addItemTitle),
               showMediaAtAllSizes: true,
               onClick: () => onAddItem()
             }
           ),
-          (validationState == null ? void 0 : validationState.status) === "invalid" && /* @__PURE__ */ jsx39(InlineAlert2, { type: "negative", children: validationState.message })
+          (validationState == null ? void 0 : validationState.status) === "invalid" && /* @__PURE__ */ jsx40(InlineAlert2, { type: "negative", children: validationState.message })
         ]
       }
     ),
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx40(
       Modal2,
       {
         open: openModalType !== null,
         title: (openModalType === "add" ? addItemTitle : editItemTitle) || formatMessage(repeatable_messages_default.addItemTitle),
         body: /* @__PURE__ */ jsxs11(Fragment4, { children: [
-          /* @__PURE__ */ jsx39("div", { className: "m-b-2", children: editableItem }),
+          /* @__PURE__ */ jsx40("div", { className: "m-b-2", children: editableItem }),
           /* @__PURE__ */ jsxs11("div", { children: [
-            /* @__PURE__ */ jsx39(Button4, { priority: "primary", block: true, className: "m-b-2", onClick: () => onSaveItem(), children: formatMessage(repeatable_messages_default.addItem) }),
-            /* @__PURE__ */ jsx39(Button4, { priority: "secondary", type: "negative", block: true, onClick: () => onRemoveItem(), children: formatMessage(repeatable_messages_default.removeItem) })
+            /* @__PURE__ */ jsx40(Button4, { priority: "primary", block: true, className: "m-b-2", onClick: () => onSaveItem(), children: formatMessage(repeatable_messages_default.addItem) }),
+            /* @__PURE__ */ jsx40(Button4, { priority: "secondary", type: "negative", block: true, onClick: () => onRemoveItem(), children: formatMessage(repeatable_messages_default.removeItem) })
           ] })
         ] }),
         onClose: () => onCancelEdit()
@@ -12599,10 +12765,10 @@ function ItemSummaryOption({
   item,
   onClick
 }) {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     NavigationOption2,
     {
-      media: /* @__PURE__ */ jsx39(NavigationOptionMedia, __spreadValues({}, item)),
+      media: /* @__PURE__ */ jsx40(NavigationOptionMedia, __spreadValues({}, item)),
       title: item.title,
       content: item.description,
       showMediaAtAllSizes: true,
@@ -12640,7 +12806,7 @@ var generic_error_messages_default2 = defineMessages10({
 
 // ../renderers/src/SearchRenderer/ErrorResult.tsx
 import { Button as Button5 } from "@transferwise/components";
-import { jsx as jsx40, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs12 } from "react/jsx-runtime";
 function ErrorResult({ state }) {
   const intl = useIntl7();
   const buttonVisualProps = {
@@ -12651,7 +12817,7 @@ function ErrorResult({ state }) {
   return /* @__PURE__ */ jsxs12("p", { className: "m-t-2", children: [
     intl.formatMessage(generic_error_messages_default2.genericError),
     "\xA0",
-    /* @__PURE__ */ jsx40(
+    /* @__PURE__ */ jsx41(
       Button5,
       __spreadProps(__spreadValues({}, buttonVisualProps), {
         onClick: () => {
@@ -12678,7 +12844,7 @@ var search_messages_default = defineMessages11({
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
 import { useIntl as useIntl8 } from "react-intl";
-import { Fragment as Fragment5, jsx as jsx41, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx42, jsxs as jsxs13 } from "react/jsx-runtime";
 function BlockSearchRendererComponent({
   id,
   isLoading,
@@ -12692,7 +12858,7 @@ function BlockSearchRendererComponent({
   const trackEvent = useTrackEvent();
   const { formatMessage } = useIntl8();
   return /* @__PURE__ */ jsxs13("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ jsx41(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsx42(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ jsx42(
       Input4,
       {
         id,
@@ -12709,7 +12875,7 @@ function BlockSearchRendererComponent({
         }
       }
     ) }),
-    isLoading ? /* @__PURE__ */ jsx41(Fragment5, { children: formatMessage(search_messages_default.loading) }) : /* @__PURE__ */ jsx41(SearchResultContent, { state, onChange })
+    isLoading ? /* @__PURE__ */ jsx42(Fragment5, { children: formatMessage(search_messages_default.loading) }) : /* @__PURE__ */ jsx42(SearchResultContent, { state, onChange })
   ] });
 }
 function SearchResultContent({
@@ -12718,26 +12884,26 @@ function SearchResultContent({
 }) {
   switch (state.type) {
     case "error":
-      return /* @__PURE__ */ jsx41(ErrorResult, { state });
+      return /* @__PURE__ */ jsx42(ErrorResult, { state });
     case "results":
-      return /* @__PURE__ */ jsx41(SearchResults, { state, onChange });
+      return /* @__PURE__ */ jsx42(SearchResults, { state, onChange });
     case "noResults":
-      return /* @__PURE__ */ jsx41(EmptySearchResult, { state });
+      return /* @__PURE__ */ jsx42(EmptySearchResult, { state });
     case "pending":
     default:
       return null;
   }
 }
 function EmptySearchResult({ state }) {
-  return /* @__PURE__ */ jsx41(Markdown3, { className: "m-t-2", config: { link: { target: "_blank" } }, children: state.message });
+  return /* @__PURE__ */ jsx42(Markdown3, { className: "m-t-2", config: { link: { target: "_blank" } }, children: state.message });
 }
 function SearchResults({
   state
 }) {
   const trackEvent = useTrackEvent();
-  return /* @__PURE__ */ jsx41(NavigationOptionsList2, { children: state.results.map((result) => {
+  return /* @__PURE__ */ jsx42(NavigationOptionsList2, { children: state.results.map((result) => {
     const { icon, image } = result;
-    return /* @__PURE__ */ jsx41(
+    return /* @__PURE__ */ jsx42(
       NavigationOption3,
       {
         title: result.title,
@@ -12763,7 +12929,7 @@ import { Markdown as Markdown4, Typeahead } from "@transferwise/components";
 import { Search } from "@transferwise/icons";
 import { useState as useState8 } from "react";
 import { useIntl as useIntl9 } from "react-intl";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 function InlineSearchRenderer({
   id,
   isLoading,
@@ -12775,7 +12941,7 @@ function InlineSearchRenderer({
   const [hasSearched, setHasSearched] = useState8(false);
   const trackEvent = useTrackEvent();
   const intl = useIntl9();
-  return /* @__PURE__ */ jsx42("div", { className: getMargin(margin), children: /* @__PURE__ */ jsx42(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43("div", { className: getMargin(margin), children: /* @__PURE__ */ jsx43(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ jsx43(
     Typeahead,
     {
       id: "typeahead-input-id",
@@ -12783,10 +12949,10 @@ function InlineSearchRenderer({
       name: "typeahead-input-name",
       size: "md",
       maxHeight: 100,
-      footer: /* @__PURE__ */ jsx42(TypeaheadFooter, { state, isLoading }),
+      footer: /* @__PURE__ */ jsx43(TypeaheadFooter, { state, isLoading }),
       multiple: false,
       clearable: false,
-      addon: /* @__PURE__ */ jsx42(Search, { size: 24 }),
+      addon: /* @__PURE__ */ jsx43(Search, { size: 24 }),
       options: state.type === "results" ? state.results.map(mapResultToTypeaheadOption) : [],
       minQueryLength: 1,
       onChange: (values) => {
@@ -12823,29 +12989,29 @@ function mapResultToTypeaheadOption(result) {
 function TypeaheadFooter({ state, isLoading }) {
   const { formatMessage } = useIntl9();
   if (state.type === "noResults") {
-    return /* @__PURE__ */ jsx42(Markdown4, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: state.message });
+    return /* @__PURE__ */ jsx43(Markdown4, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: state.message });
   }
   if (state.type === "error") {
-    return /* @__PURE__ */ jsx42("div", { className: "m-t-2 m-x-2", children: /* @__PURE__ */ jsx42(ErrorResult, { state }) });
+    return /* @__PURE__ */ jsx43("div", { className: "m-t-2 m-x-2", children: /* @__PURE__ */ jsx43(ErrorResult, { state }) });
   }
   if (state.type === "pending" || isLoading) {
-    return /* @__PURE__ */ jsx42("p", { className: "m-t-2 m-x-2", children: formatMessage(search_messages_default.loading) });
+    return /* @__PURE__ */ jsx43("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
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var SearchRenderer = {
   canRenderType: "search",
-  render: (props) => props.control === "inline" ? /* @__PURE__ */ jsx43(InlineSearchRendererComponent_default, __spreadValues({}, props)) : /* @__PURE__ */ jsx43(BlockSearchRendererComponent_default, __spreadValues({}, props))
+  render: (props) => props.control === "inline" ? /* @__PURE__ */ jsx44(InlineSearchRendererComponent_default, __spreadValues({}, props)) : /* @__PURE__ */ jsx44(BlockSearchRendererComponent_default, __spreadValues({}, props))
 };
 var SearchRenderer_default = SearchRenderer;
 
 // ../renderers/src/SelectInputRenderer/RadioInputRendererComponent.tsx
 import { RadioGroup } from "@transferwise/components";
-import { Fragment as Fragment6, jsx as jsx44, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx45, jsxs as jsxs14 } from "react/jsx-runtime";
 function RadioInputRendererComponent(props) {
   const {
     id,
@@ -12860,7 +13026,7 @@ function RadioInputRendererComponent(props) {
     onSelect
   } = props;
   return /* @__PURE__ */ jsxs14(Fragment6, { children: [
-    /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx45(
       FieldInput_default,
       {
         id,
@@ -12868,7 +13034,7 @@ function RadioInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
-        children: /* @__PURE__ */ jsx44("span", { children: /* @__PURE__ */ jsx44(
+        children: /* @__PURE__ */ jsx45("span", { children: /* @__PURE__ */ jsx45(
           RadioGroup,
           {
             name: id,
@@ -12877,7 +13043,7 @@ function RadioInputRendererComponent(props) {
               value: index,
               secondary: option.description,
               disabled: option.disabled || disabled,
-              avatar: /* @__PURE__ */ jsx44(OptionMedia, { icon: option.icon, image: option.image })
+              avatar: /* @__PURE__ */ jsx45(OptionMedia, { icon: option.icon, image: option.image })
             })),
             selectedValue: selectedIndex != null ? selectedIndex : void 0,
             onChange: onSelect
@@ -12893,7 +13059,7 @@ function RadioInputRendererComponent(props) {
 // ../renderers/src/SelectInputRenderer/TabInputRendererComponent.tsx
 import { Tabs } from "@transferwise/components";
 import { useEffect as useEffect4 } from "react";
-import { Fragment as Fragment7, jsx as jsx45, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx46, jsxs as jsxs15 } from "react/jsx-runtime";
 function TabInputRendererComponent(props) {
   const {
     id,
@@ -12913,7 +13079,7 @@ function TabInputRendererComponent(props) {
     }
   }, [selectedIndex, onSelect, options.length]);
   return /* @__PURE__ */ jsxs15(Fragment7, { children: [
-    /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx46(
       FieldInput_default,
       {
         id,
@@ -12921,7 +13087,7 @@ function TabInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
-        children: /* @__PURE__ */ jsx45(
+        children: /* @__PURE__ */ jsx46(
           Tabs,
           {
             name: id,
@@ -12930,7 +13096,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__ */ jsx45(Fragment7, {}),
+              content: /* @__PURE__ */ jsx46(Fragment7, {}),
               disabled: option.disabled || disabled
             })),
             onTabSelect: onSelect
@@ -12945,29 +13111,6 @@ var isValidIndex = (index, options) => index !== null && index >= 0 && index < o
 
 // ../renderers/src/SelectInputRenderer/SelectInputRendererComponent.tsx
 import { SelectInput as SelectInput2, SelectInputOptionContent as SelectInputOptionContent2 } from "@transferwise/components";
-
-// ../renderers/src/SelectInputRenderer/SelectTriggerMedia.tsx
-import { Avatar as Avatar3, AvatarType as AvatarType3 } from "@transferwise/components";
-import { jsx as jsx46 } from "react/jsx-runtime";
-function SelectTriggerMedia({ icon, image }) {
-  if (image == null ? void 0 : image.url) {
-    return null;
-  }
-  if (isFlagIcon2(icon)) {
-    return /* @__PURE__ */ jsx46(Avatar3, { type: AvatarType3.ICON, size: 24, children: /* @__PURE__ */ jsx46(DynamicIcon_default, { name: icon.name }) });
-  }
-  if (isNamedIcon2(icon)) {
-    return /* @__PURE__ */ jsx46(DynamicIcon_default, { name: icon.name });
-  }
-  if (icon && "text" in icon) {
-    return /* @__PURE__ */ jsx46(Avatar3, { type: AvatarType3.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
 import { Fragment as Fragment8, jsx as jsx47, jsxs as jsxs16 } from "react/jsx-runtime";
 function SelectInputRendererComponent(props) {
   const {
@@ -13004,7 +13147,7 @@ function SelectInputRendererComponent(props) {
     const contentProps = withinTrigger ? {
       title: option.title,
       note: option.description,
-      icon: /* @__PURE__ */ jsx47(SelectTriggerMedia, { icon: option.icon, image: option.image })
+      icon: getIconAvatar(option)
     } : {
       title: option.title,
       description: option.description,
@@ -13161,6 +13304,9 @@ var mapStatus = (status) => {
   return status;
 };
 
+// ../renderers/src/TextInputRenderer.tsx
+import { InputGroup as InputGroup3 } from "@transferwise/components";
+
 // ../renderers/src/components/VariableTextInput.tsx
 import {
   Input as Input5,
@@ -13248,6 +13394,8 @@ var TextInputRenderer = {
       description,
       help,
       error,
+      icon,
+      image,
       maxLength,
       minLength,
       type,
@@ -13260,6 +13408,8 @@ var TextInputRenderer = {
       "description",
       "help",
       "error",
+      "icon",
+      "image",
       "maxLength",
       "minLength",
       "type",
@@ -13276,7 +13426,7 @@ var TextInputRenderer = {
         description,
         validation: validationState,
         help,
-        children: /* @__PURE__ */ jsx52(VariableTextInput_default, { control, inputProps })
+        children: /* @__PURE__ */ jsx52(InputGroup3, { addonStart: getInputGroupAddonStart({ icon, image }), children: /* @__PURE__ */ jsx52(VariableTextInput_default, { control, inputProps }) })
       }
     );
   }
@@ -13844,10 +13994,10 @@ function convertDecisionStepToDynamicLayout(step) {
   }
   return layout;
 }
-function dynamicBox(components, size) {
+function dynamicBox(components, size2) {
   return {
     type: "box",
-    width: size || "md",
+    width: size2 || "md",
     components
   };
 }
@@ -15109,8 +15259,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":
@@ -15160,6 +15310,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 {
@@ -15292,8 +15465,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";
@@ -15342,7 +15515,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();
@@ -15351,11 +15524,31 @@ 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__ */ jsx72(
@@ -16888,7 +17081,7 @@ var _FormControl = class _FormControl extends PureComponent {
       max,
       searchPlaceholder,
       onSearchChange,
-      size,
+      size: size2,
       uploadProps,
       label,
       description,
@@ -17076,7 +17269,7 @@ var _FormControl = class _FormControl extends PureComponent {
             dayAutoComplete: this.getAutocompleteValue({ suffix: "-day" }),
             yearAutoComplete: this.getAutocompleteValue({ suffix: "-year" }),
             disabled,
-            size,
+            size: size2,
             value: getSafeDateOrStringValue(value),
             mode,
             monthFormat,
@@ -17112,7 +17305,7 @@ var _FormControl = class _FormControl extends PureComponent {
             placeholder,
             required,
             searchPlaceholder,
-            size,
+            size: size2,
             initialValue: getSafeStringValue(value),
             onBlur: this.handleOnBlur,
             onChange: (value2) => this.handleOnChange(value2),
@@ -18125,12 +18318,12 @@ var import_classnames13 = __toESM(require_classnames());
 import { Display as Display2 } from "@transferwise/components";
 import { jsx as jsx103 } from "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__ */ jsx103(DisplayHeading2, { size, text, classes }) : /* @__PURE__ */ jsx103(StandardHeading2, { size, text, classes });
+  return control === "display" ? /* @__PURE__ */ jsx103(DisplayHeading2, { size: size2, text, classes }) : /* @__PURE__ */ jsx103(StandardHeading2, { size: size2, text, classes });
 };
-var StandardHeading2 = ({ size, text, classes }) => {
-  switch (size) {
+var StandardHeading2 = ({ size: size2, text, classes }) => {
+  switch (size2) {
     case "xs":
       return /* @__PURE__ */ jsx103("h5", { className: classes, children: text });
     case "sm":
@@ -18144,8 +18337,8 @@ var StandardHeading2 = ({ size, text, classes }) => {
       return /* @__PURE__ */ jsx103("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__ */ jsx103(Display2, { type: "display-small", className: classes, children: text });
@@ -18175,7 +18368,7 @@ import { Image as Image2 } from "@transferwise/components";
 import { useEffect as useEffect16, useState as useState22 } from "react";
 import { jsx as jsx105 } from "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] = useState22("");
   useEffect16(() => {
@@ -18190,7 +18383,7 @@ function DynamicImage({ component: image }) {
   if (!imageSource) {
     return null;
   }
-  return /* @__PURE__ */ jsx105("div", { className: `df-image ${size || "md"}`, children: /* @__PURE__ */ jsx105(Image2, __spreadValues({ className: `img-responsive ${getMargin2(margin || "md")}` }, imageProps)) });
+  return /* @__PURE__ */ jsx105("div", { className: `df-image ${size2 || "md"}`, children: /* @__PURE__ */ jsx105(Image2, __spreadValues({ className: `img-responsive ${getMargin2(margin || "md")}` }, imageProps)) });
 }
 var readImageBlobAsDataURL2 = (imageBlob) => (
   // we can safely assume the type of reader.result is string
@@ -18368,6 +18561,28 @@ var callToActionToSummaryAction = (callToAction, onAction) => {
     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,11 +18626,11 @@ var DynamicStatusList_default = DynamicStatusList;
 import { Loader as Loader3 } from "@transferwise/components";
 import { jsx as jsx109 } from "react/jsx-runtime";
 var DynamicLoadingIndicator = ({ component }) => {
-  const { margin = "md", size = "md" } = component;
+  const { margin = "md", size: size2 = "md" } = component;
   return /* @__PURE__ */ jsx109(
     Loader3,
     {
-      size,
+      size: size2,
       classNames: {
         "tw-loader": `tw-loader m-x-auto ${getMargin2(margin)}`
       },
@@ -18530,13 +18745,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 {
@@ -18560,7 +18791,7 @@ function DynamicReview(props) {
     return (event) => {
       event.preventDefault();
       if (action) {
-        props.onAction(action);
+        onAction(action);
       }
     };
   };
@@ -18568,7 +18799,7 @@ 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__ */ jsxs40("div", { className: margin, children: [
-    review.title && /* @__PURE__ */ jsx111(Header14, { title: review.title, action: callToAction || legacyCallToAction || void 0 }),
+    review.title && /* @__PURE__ */ jsx111(Header14, { title: review.title, action: (_b = callToAction != null ? callToAction : legacyCallToAction) != null ? _b : void 0 }),
     /* @__PURE__ */ jsx111("div", { className: margin, children: /* @__PURE__ */ jsx111(DefinitionList3, { layout: orientation, definitions: getDefinitions(orientation, review) }) })
   ] });
 }