@wise/dynamic-flow-client-internal 4.24.0-experimental-renderer-extensions-2-779450d → 4.24.0

package/build/main.js

@@ -62,15 +62,17 @@ __export(index_exports, {
   DynamicFlowLegacy: () => DynamicFlowLegacy,
   DynamicFlowRevamp: () => DynamicFlowRevamp,
   DynamicForm: () => DynamicForm,
+  Header: () => Header7,
   JsonSchemaForm: () => import_dynamic_flow_client4.JsonSchemaForm,
-  createRendererWithExtensions: () => createRendererWithExtensions,
   findRendererPropsByType: () => import_dynamic_flow_client4.findRendererPropsByType,
+  getMargin: () => getMargin,
   isValidSchema: () => import_dynamic_flow_client4.isValidSchema,
   makeCustomFetch: () => import_dynamic_flow_client3.makeHttpClient,
   translations: () => i18n_default
 });
 module.exports = __toCommonJS(index_exports);
 var import_dynamic_flow_client3 = require("@wise/dynamic-flow-client");
+var import_dynamic_flow_client4 = require("@wise/dynamic-flow-client");
 
 // ../renderers/src/AlertRenderer.tsx
 var import_components = require("@transferwise/components");
@@ -210,6 +212,26 @@ var AddressValidationButtonRenderer_default = AddressValidationButtonRenderer;
 // ../renderers/src/ButtonRenderer/ButtonRenderer.tsx
 var import_components3 = require("@transferwise/components");
 var import_react2 = require("react");
+
+// ../renderers/src/ButtonRenderer/mapButtonSize.tsx
+var mapButtonSize = (size) => {
+  if (!size) {
+    return void 0;
+  }
+  switch (size) {
+    case "xs":
+    case "sm":
+      return "sm";
+    case "lg":
+    case "xl":
+      return "lg";
+    case "md":
+    default:
+      return "md";
+  }
+};
+
+// ../renderers/src/ButtonRenderer/ButtonRenderer.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var ButtonRenderer = {
   canRenderType: "button",
@@ -223,8 +245,9 @@ function ButtonComponent(props) {
       setSpinny(false);
     }
   }, [stepLoadingState]);
-  const priority = mapControl(control);
-  const type = priority === "tertiary" ? void 0 : mapContext(context);
+  const priority = getPriority(control);
+  const type = getButtonType(context, priority);
+  const loading = spinny && stepLoadingState !== "idle";
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     import_components3.Button,
     {
@@ -232,8 +255,8 @@ function ButtonComponent(props) {
       className: getMargin(margin),
       disabled,
       priority,
-      size: mapSize(size),
-      loading: spinny && stepLoadingState !== "idle",
+      size: mapButtonSize(size),
+      loading,
       type,
       onClick: () => {
         setSpinny(true);
@@ -243,16 +266,7 @@ function ButtonComponent(props) {
     }
   );
 }
-var mapContext = (context) => {
-  switch (context) {
-    case "neutral":
-    case "warning":
-      return "accent";
-    default:
-      return context;
-  }
-};
-var mapControl = (control) => {
+var getPriority = (control) => {
   switch (control) {
     case "primary":
     case "tertiary":
@@ -261,23 +275,18 @@ var mapControl = (control) => {
       return "secondary";
   }
 };
-var mapSize = (size) => {
-  if (!size) {
+var getButtonType = (context, priority) => {
+  if (priority === "tertiary") {
     return void 0;
   }
-  switch (size) {
-    case "xs":
-    case "sm":
-      return "sm";
-    case "lg":
-    case "xl":
-      return "lg";
-    case "md":
+  switch (context) {
+    case "neutral":
+    case "warning":
+      return "accent";
     default:
-      return "md";
+      return context;
   }
 };
-var ButtonRenderer_default = ButtonRenderer;
 
 // ../renderers/src/components/FieldInput.tsx
 var import_components5 = require("@transferwise/components");
@@ -1048,6 +1057,7 @@ function ExternalConfirmationRendererComponent({
           /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             import_components15.Button,
             {
+              v2: true,
               block: true,
               className: "m-b-2",
               priority: "primary",
@@ -1059,7 +1069,7 @@ function ExternalConfirmationRendererComponent({
               children: formatMessage(external_confirmation_messages_default.open)
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_components15.Button, { block: true, className: "m-b-2", priority: "tertiary", size: "md", onClick: onCancel, children: formatMessage(external_confirmation_messages_default.cancel) })
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_components15.Button, { v2: true, block: true, className: "m-b-2", priority: "tertiary", size: "md", onClick: onCancel, children: formatMessage(external_confirmation_messages_default.cancel) })
         ] }) })
       ] }),
       onClose: onCancel
@@ -1538,7 +1548,7 @@ function DFModal({ content, margin, trigger }) {
   const [visible, setVisible] = (0, import_react8.useState)(false);
   const { children, title } = content;
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components24.Button, { priority: "tertiary", block: true, onClick: () => setVisible(true), children: trigger.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components24.Button, { v2: true, priority: "tertiary", block: true, onClick: () => setVisible(true), children: trigger.title }),
     /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       import_components24.Modal,
       {
@@ -1902,7 +1912,7 @@ function CopyableParagraph({
         className: (0, import_classnames5.default)("text-ellipsis", inputAlignmentClasses)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_components31.Button, { block: true, onClick: copy, children: formatMessage(paragraph_messages_default.copy) })
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_components31.Button, { v2: true, block: true, onClick: copy, children: formatMessage(paragraph_messages_default.copy) })
   ] });
 }
 var ParagraphRenderer_default = ParagraphRenderer;
@@ -2015,7 +2025,17 @@ function Repeatable(props) {
           /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "m-b-2", children: editableItem }),
           /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { children: [
             /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_components32.Button, { priority: "primary", block: true, className: "m-b-2", onClick: () => onSaveItem(), children: formatMessage(repeatable_messages_default.addItem) }),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_components32.Button, { priority: "secondary", type: "negative", block: true, onClick: () => onRemoveItem(), children: formatMessage(repeatable_messages_default.removeItem) })
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              import_components32.Button,
+              {
+                v2: true,
+                priority: "secondary",
+                sentiment: "negative",
+                block: true,
+                onClick: () => onRemoveItem(),
+                children: formatMessage(repeatable_messages_default.removeItem)
+              }
+            )
           ] })
         ] }),
         onClose: () => onCancelEdit()
@@ -2041,9 +2061,12 @@ function ItemSummaryOption({
 var RepeatableRenderer_default = RepeatableRenderer;
 
 // ../renderers/src/ReviewRenderer.tsx
-var import_components33 = require("@transferwise/components");
+var import_components34 = require("@transferwise/components");
 
-// ../renderers/src/utils/getHeaderAction.tsx
+// ../renderers/src/components/Header.tsx
+var import_components33 = require("@transferwise/components");
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var Header7 = ({ title, callToAction }) => (title || callToAction) && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_components33.Header, { title: title != null ? title : "", action: getHeaderAction(callToAction) });
 var getHeaderAction = (callToAction) => {
   if (!callToAction) {
     return void 0;
@@ -2065,34 +2088,28 @@ var getHeaderAction = (callToAction) => {
 };
 
 // ../renderers/src/ReviewRenderer.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var ReviewRenderer = {
   canRenderType: "review",
-  extensions: {
-    field: ({ label, value, help, analyticsId: fieldAnalyticsId, trackEvent, orientation }) => ({
-      key: label,
-      title: label,
-      value: getFieldValue(
-        value,
-        help,
-        orientation,
-        () => trackEvent("Help Pressed", { layoutItemId: fieldAnalyticsId })
-      )
-    })
-  },
-  render({ callToAction, control, fields, margin, title, trackEvent }) {
+  render: ({ callToAction, control, fields, margin, title, trackEvent }) => {
     const orientation = mapControlToDefinitionListLayout(control);
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: getMargin(margin), children: [
-      (title || callToAction) && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_components33.Header, { title: title != null ? title : "", action: getHeaderAction(callToAction) }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: margin, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-        import_components33.DefinitionList,
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: getMargin(margin), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Header7, { title, callToAction }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: margin, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        import_components34.DefinitionList,
         {
           layout: orientation,
           definitions: fields.map(
-            (field) => this.extensions.field(__spreadProps(__spreadValues({}, field), {
-              orientation,
-              trackEvent
-            }))
+            ({ label, value, help, analyticsId: fieldAnalyticsId }, index) => ({
+              key: String(index),
+              title: label,
+              value: getFieldValue(
+                value,
+                help,
+                orientation,
+                () => trackEvent("Help Pressed", { layoutItemId: fieldAnalyticsId })
+              )
+            })
           )
         }
       ) })
@@ -2117,21 +2134,21 @@ var mapControlToDefinitionListLayout = (control) => {
 };
 var getFieldValue = (value, help, orientation, onClick) => {
   if (help) {
-    return orientation === "HORIZONTAL_RIGHT_ALIGNED" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Help_default, { help, onClick }),
+    return orientation === "HORIZONTAL_RIGHT_ALIGNED" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Help_default, { help, onClick }),
       " ",
       value
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
       value,
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Help_default, { help, onClick })
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Help_default, { help, onClick })
     ] });
   }
   return value;
 };
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
-var import_components35 = require("@transferwise/components");
+var import_components36 = require("@transferwise/components");
 var import_react12 = require("react");
 var import_react_intl19 = require("react-intl");
 
@@ -2169,32 +2186,19 @@ var generic_error_messages_default = (0, import_react_intl17.defineMessages)({
 });
 
 // ../renderers/src/SearchRenderer/ErrorResult.tsx
-var import_components34 = require("@transferwise/components");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_components35 = require("@transferwise/components");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function ErrorResult({ state }) {
   const intl = (0, import_react_intl18.useIntl)();
-  const buttonVisualProps = {
-    priority: "tertiary",
-    size: "sm",
-    style: { marginTop: "-2px", padding: "0", width: "auto", display: "inline" }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("p", { className: "m-t-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("p", { className: "m-t-2", children: [
     intl.formatMessage(generic_error_messages_default.genericError),
     "\xA0",
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-      import_components34.Button,
-      __spreadProps(__spreadValues({}, buttonVisualProps), {
-        onClick: () => {
-          state.onRetry();
-        },
-        children: intl.formatMessage(generic_error_messages_default.retry)
-      })
-    )
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_components35.Link, { onClick: () => state.onRetry(), children: intl.formatMessage(generic_error_messages_default.retry) })
   ] });
 }
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function BlockSearchRendererComponent({
   id,
   isLoading,
@@ -2207,9 +2211,9 @@ function BlockSearchRendererComponent({
 }) {
   const [hasSearched, setHasSearched] = (0, import_react12.useState)(false);
   const { formatMessage } = (0, import_react_intl19.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-      import_components35.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: getMargin(margin), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      import_components36.Input,
       {
         id,
         name: id,
@@ -2225,7 +2229,7 @@ function BlockSearchRendererComponent({
         }
       }
     ) }),
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx_runtime52.Fragment, { children: formatMessage(search_messages_default.loading) }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(SearchResultContent, { state, trackEvent })
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_jsx_runtime53.Fragment, { children: formatMessage(search_messages_default.loading) }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(SearchResultContent, { state, trackEvent })
   ] });
 }
 function SearchResultContent({
@@ -2234,27 +2238,27 @@ function SearchResultContent({
 }) {
   switch (state.type) {
     case "error":
-      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ErrorResult, { state });
+      return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ErrorResult, { state });
     case "results":
-      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(SearchResults, { state, trackEvent });
+      return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(SearchResults, { state, trackEvent });
     case "noResults":
-      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(EmptySearchResult, { state });
+      return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(EmptySearchResult, { state });
     case "pending":
     default:
       return null;
   }
 }
 function EmptySearchResult({ state }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_components35.Markdown, { className: "m-t-2", config: { link: { target: "_blank" } }, children: state.message });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_components36.Markdown, { className: "m-t-2", config: { link: { target: "_blank" } }, children: state.message });
 }
 function SearchResults({
   state,
   trackEvent
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_components35.NavigationOptionsList, { children: state.results.map((result) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_components36.NavigationOptionsList, { children: state.results.map((result) => {
     const { media } = result;
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-      import_components35.NavigationOption,
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      import_components36.NavigationOption,
       {
         title: result.title,
         content: result.description,
@@ -2275,11 +2279,11 @@ function SearchResults({
 var BlockSearchRendererComponent_default = BlockSearchRendererComponent;
 
 // ../renderers/src/SearchRenderer/InlineSearchRendererComponent.tsx
-var import_components36 = require("@transferwise/components");
+var import_components37 = require("@transferwise/components");
 var import_icons2 = require("@transferwise/icons");
 var import_react13 = require("react");
 var import_react_intl20 = require("react-intl");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function InlineSearchRenderer({
   id,
   isLoading,
@@ -2291,18 +2295,18 @@ function InlineSearchRenderer({
 }) {
   const [hasSearched, setHasSearched] = (0, import_react13.useState)(false);
   const intl = (0, import_react_intl20.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-    import_components36.Typeahead,
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    import_components37.Typeahead,
     {
       id: "typeahead-input-id",
       intl,
       name: "typeahead-input-name",
       size: "md",
       maxHeight: 100,
-      footer: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TypeaheadFooter, { state, isLoading }),
+      footer: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TypeaheadFooter, { state, isLoading }),
       multiple: false,
       clearable: false,
-      addon: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_icons2.Search, { size: 24 }),
+      addon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_icons2.Search, { size: 24 }),
       options: state.type === "results" ? state.results.map(mapResultToTypeaheadOption) : [],
       minQueryLength: 1,
       onChange: (values) => {
@@ -2339,34 +2343,57 @@ function mapResultToTypeaheadOption(result) {
 function TypeaheadFooter({ state, isLoading }) {
   const { formatMessage } = (0, import_react_intl20.useIntl)();
   if (state.type === "noResults") {
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_components36.Markdown, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: state.message });
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_components37.Markdown, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: state.message });
   }
   if (state.type === "error") {
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "m-t-2 m-x-2", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ErrorResult, { state }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "m-t-2 m-x-2", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ErrorResult, { state }) });
   }
   if (state.type === "pending" || isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "m-t-2 m-x-2", children: formatMessage(search_messages_default.loading) });
+    return /* @__PURE__ */ (0, import_jsx_runtime54.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_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var SearchRenderer = {
   canRenderType: "search",
-  render: (props) => props.control === "inline" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(InlineSearchRendererComponent_default, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(BlockSearchRendererComponent_default, __spreadValues({}, props))
+  render: (props) => props.control === "inline" ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(InlineSearchRendererComponent_default, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(BlockSearchRendererComponent_default, __spreadValues({}, props))
 };
 var SearchRenderer_default = SearchRenderer;
 
 // ../renderers/src/SectionRenderer.tsx
-var import_components37 = require("@transferwise/components");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_components38 = require("@transferwise/components");
+
+// ../renderers/src/utils/getHeaderAction.tsx
+var getHeaderAction2 = (callToAction) => {
+  if (!callToAction) {
+    return void 0;
+  }
+  const { accessibilityDescription, href, title, onClick } = callToAction;
+  return href ? {
+    "aria-label": accessibilityDescription,
+    text: title,
+    href,
+    target: "_blank"
+  } : {
+    "aria-label": accessibilityDescription,
+    text: title,
+    onClick: (event) => {
+      event.preventDefault();
+      onClick();
+    }
+  };
+};
+
+// ../renderers/src/SectionRenderer.tsx
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var SectionRenderer = {
   canRenderType: "section",
   render: ({ children, callToAction, margin, title }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("section", { className: getMargin(margin), children: [
-      (title || callToAction) && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_components37.Header, { title: title != null ? title : "", action: getHeaderAction(callToAction) }),
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("section", { className: getMargin(margin), children: [
+      (title || callToAction) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_components38.Header, { title: title != null ? title : "", action: getHeaderAction2(callToAction) }),
       children
     ] });
   }
@@ -2374,8 +2401,8 @@ var SectionRenderer = {
 var SectionRenderer_default = SectionRenderer;
 
 // ../renderers/src/SelectInputRenderer/RadioInputRendererComponent.tsx
-var import_components38 = require("@transferwise/components");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_components39 = require("@transferwise/components");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function RadioInputRendererComponent(props) {
   const {
     id,
@@ -2389,8 +2416,8 @@ function RadioInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       FieldInput_default,
       {
         id,
@@ -2398,8 +2425,8 @@ function RadioInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
-        children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-          import_components38.RadioGroup,
+        children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          import_components39.RadioGroup,
           {
             name: id,
             radios: options.map((option, index) => ({
@@ -2407,7 +2434,7 @@ function RadioInputRendererComponent(props) {
               value: index,
               secondary: option.description,
               disabled: option.disabled || disabled,
-              avatar: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(OptionMedia, { media: option.media, preferAvatar: false })
+              avatar: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(OptionMedia, { media: option.media, preferAvatar: false })
             })),
             selectedValue: selectedIndex != null ? selectedIndex : void 0,
             onChange: onSelect
@@ -2421,9 +2448,9 @@ function RadioInputRendererComponent(props) {
 }
 
 // ../renderers/src/SelectInputRenderer/TabInputRendererComponent.tsx
-var import_components39 = require("@transferwise/components");
+var import_components40 = require("@transferwise/components");
 var import_react14 = require("react");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function TabInputRendererComponent(props) {
   const {
     id,
@@ -2442,8 +2469,8 @@ function TabInputRendererComponent(props) {
       onSelect(0);
     }
   }, [selectedIndex, onSelect, options.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       FieldInput_default,
       {
         id,
@@ -2451,8 +2478,8 @@ function TabInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
-        children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-          import_components39.Tabs,
+        children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          import_components40.Tabs,
           {
             name: id,
             selected: selectedIndex != null ? selectedIndex : 0,
@@ -2460,7 +2487,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_runtime57.jsx)(import_jsx_runtime57.Fragment, {}),
+              content: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx_runtime58.Fragment, {}),
               disabled: option.disabled || disabled
             })),
             onTabSelect: onSelect
@@ -2474,8 +2501,8 @@ function TabInputRendererComponent(props) {
 var isValidIndex = (index, options) => index !== null && index >= 0 && index < options;
 
 // ../renderers/src/SelectInputRenderer/SelectInputRendererComponent.tsx
-var import_components40 = require("@transferwise/components");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_components41 = require("@transferwise/components");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function SelectInputRendererComponent(props) {
   const {
     id,
@@ -2515,13 +2542,13 @@ function SelectInputRendererComponent(props) {
     } : {
       title: option.title,
       description: option.description,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(OptionMedia, { media: option.media, preferAvatar: false })
+      icon: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(OptionMedia, { media: option.media, preferAvatar: false })
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_components40.SelectInputOptionContent, __spreadValues({}, contentProps));
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_components41.SelectInputOptionContent, __spreadValues({}, contentProps));
   };
   const extraProps = { autoComplete };
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       FieldInput_default,
       {
         id,
@@ -2529,8 +2556,8 @@ function SelectInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
-        children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-          import_components40.SelectInput,
+        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          import_components41.SelectInput,
           __spreadValues({
             name: id,
             placeholder,
@@ -2551,8 +2578,8 @@ function SelectInputRendererComponent(props) {
 
 // ../renderers/src/SelectInputRenderer/SegmentedInputRendererComponent.tsx
 var import_react15 = require("react");
-var import_components41 = require("@transferwise/components");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_components42 = require("@transferwise/components");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 function SegmentedInputRendererComponent(props) {
   const {
     id,
@@ -2570,8 +2597,8 @@ function SegmentedInputRendererComponent(props) {
       onSelect(0);
     }
   }, [selectedIndex, onSelect, options.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       FieldInput_default,
       {
         id,
@@ -2579,8 +2606,8 @@ function SegmentedInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
-        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-          import_components41.SegmentedControl,
+        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          import_components42.SegmentedControl,
           {
             name: `${id}-segmented-control`,
             value: String(selectedIndex),
@@ -2596,44 +2623,44 @@ function SegmentedInputRendererComponent(props) {
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { id: `${id}-children`, children })
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { id: `${id}-children`, children })
   ] });
 }
 var isValidIndex2 = (index, options) => index !== null && index >= 0 && index < options;
 
 // ../renderers/src/SelectInputRenderer/SelectInputRenderer.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var SelectInputRenderer = {
   canRenderType: "input-select",
   render: (props) => {
     switch (props.control) {
       case "radio":
-        return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(RadioInputRendererComponent, __spreadValues({}, props));
+        return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(RadioInputRendererComponent, __spreadValues({}, props));
       case "tab":
-        return props.options.length > 3 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SelectInputRendererComponent, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TabInputRendererComponent, __spreadValues({}, props));
+        return props.options.length > 3 ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SelectInputRendererComponent, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TabInputRendererComponent, __spreadValues({}, props));
       case "segmented":
-        return props.options.length > 3 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SelectInputRendererComponent, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SegmentedInputRendererComponent, __spreadValues({}, props));
+        return props.options.length > 3 ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SelectInputRendererComponent, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SegmentedInputRendererComponent, __spreadValues({}, props));
       case "select":
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SelectInputRendererComponent, __spreadValues({}, props));
+        return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SelectInputRendererComponent, __spreadValues({}, props));
     }
   }
 };
 var SelectInputRenderer_default = SelectInputRenderer;
 
 // ../renderers/src/StatusListRenderer.tsx
-var import_components42 = require("@transferwise/components");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_components43 = require("@transferwise/components");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var StatusListRenderer = {
   canRenderType: "status-list",
-  render: ({ margin, items, title }) => /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: getMargin(margin), children: [
-    title ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_components42.Header, { title, className: "m-b-2" }) : null,
-    items.map(({ callToAction, description, icon, status, title: itemTitle }) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-      import_components42.Summary,
+  render: ({ margin, items, title }) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: getMargin(margin), children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_components43.Header, { title, className: "m-b-2" }) : null,
+    items.map(({ callToAction, description, icon, status, title: itemTitle }) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      import_components43.Summary,
       {
         title: itemTitle,
         description,
-        icon: icon && "name" in icon ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(DynamicIcon_default, { name: icon.name }) : null,
+        icon: icon && "name" in icon ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(DynamicIcon_default, { name: icon.name }) : null,
         status: mapStatus(status),
         action: getSummaryAction(callToAction)
       },
@@ -2685,32 +2712,32 @@ var useCustomTheme = (theme, trackEvent) => {
 };
 
 // ../renderers/src/step/topbar/BackButton.tsx
-var import_components43 = require("@transferwise/components");
+var import_components44 = require("@transferwise/components");
 var import_icons3 = require("@transferwise/icons");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 function BackButton({ title, onClick }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_components43.IconButton, { priority: "tertiary", onClick, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "sr-only", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_icons3.ArrowLeft, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_components44.IconButton, { priority: "tertiary", onClick, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "sr-only", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_icons3.ArrowLeft, {})
   ] });
 }
 
 // ../renderers/src/step/topbar/Toolbar.tsx
-var import_components44 = require("@transferwise/components");
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_components45 = require("@transferwise/components");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var Toolbar = ({ items }) => {
-  return (items == null ? void 0 : items.length) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "df-toolbar", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ToolbarButton, __spreadValues({}, item), `${item.type}-${index}-${item.title}`)) }) : null;
+  return (items == null ? void 0 : items.length) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "df-toolbar", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ToolbarButton, __spreadValues({}, item), `${item.type}-${index}-${item.title}`)) }) : null;
 };
 function ToolbarButton(props) {
-  return prefersMedia(props.control) ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(MediaToolbarButton, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TextToolbarButton, __spreadValues({}, props));
+  return prefersMedia(props.control) ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(MediaToolbarButton, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(TextToolbarButton, __spreadValues({}, props));
 }
 function MediaToolbarButton(props) {
   var _a;
   const { context, control, media, accessibilityDescription, disabled, onClick } = props;
   const priority = getIconButtonPriority(control);
   const type = getSentiment(context);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
-    import_components44.IconButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+    import_components45.IconButton,
     {
       className: "df-toolbar-button",
       disabled,
@@ -2719,7 +2746,7 @@ function MediaToolbarButton(props) {
       type,
       onClick,
       children: [
-        accessibilityDescription ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "sr-only", children: accessibilityDescription }) : null,
+        accessibilityDescription ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "sr-only", children: accessibilityDescription }) : null,
         media ? (_a = getAddonStart(media)) == null ? void 0 : _a.value : null
       ]
     }
@@ -2728,10 +2755,10 @@ function MediaToolbarButton(props) {
 function TextToolbarButton(props) {
   const { context, control, title, media, disabled, onClick } = props;
   const addonStart = media ? getAddonStart(media) : void 0;
-  const priority = getPriority(control);
+  const priority = getPriority2(control);
   const sentiment = getSentiment(context);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-    import_components44.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    import_components45.Button,
     {
       v2: true,
       size: "sm",
@@ -2759,7 +2786,7 @@ var getAddonStart = (media) => {
     return void 0;
   }
 };
-var getPriority = (control) => isKnownControl(control) ? control : "secondary";
+var getPriority2 = (control) => isKnownControl(control) ? control : "secondary";
 var prefersMedia = (control) => {
   return false;
 };
@@ -2769,21 +2796,21 @@ var getSentiment = (context) => {
   return "default";
 };
 var getIconButtonPriority = (control) => {
-  const priority = getPriority(control);
+  const priority = getPriority2(control);
   return priority === "secondary-neutral" ? "tertiary" : priority;
 };
 
 // ../renderers/src/step/topbar/TopBar.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 function TopBar({ back, toolbar }) {
-  return back || toolbar ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "d-flex m-b-2", children: [
-    back ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(BackButton, __spreadValues({}, back)) : null,
-    toolbar ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Toolbar, __spreadValues({}, toolbar)) : null
+  return back || toolbar ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "d-flex m-b-2", children: [
+    back ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(BackButton, __spreadValues({}, back)) : null,
+    toolbar ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Toolbar, __spreadValues({}, toolbar)) : null
   ] }) : null;
 }
 
 // ../renderers/src/step/SplashCelebrationStepRenderer.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var SplashCelebrationStepRenderer = {
   canRenderType: "step",
   canRender: ({ control }) => control === "splash-celebration",
@@ -2792,14 +2819,14 @@ var SplashCelebrationStepRenderer = {
 function SplashCelebrationStepRendererComponent(props) {
   const { back, toolbar, children, trackEvent } = props;
   useCustomTheme("forest-green", trackEvent);
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "splash-screen m-t-5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(TopBar, { back, toolbar }),
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "splash-screen m-t-5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TopBar, { back, toolbar }),
     children
   ] });
 }
 
 // ../renderers/src/step/SplashStepRenderer.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var SplashStepRenderer = {
   canRenderType: "step",
   canRender: ({ control }) => control === "splash",
@@ -2807,63 +2834,63 @@ var SplashStepRenderer = {
 };
 function SplashStepRendererComponent(props) {
   const { back, toolbar, children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "splash-screen m-t-5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TopBar, { back, toolbar }),
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "splash-screen m-t-5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(TopBar, { back, toolbar }),
     children
   ] });
 }
 
 // ../renderers/src/step/StepRenderer.tsx
-var import_components45 = require("@transferwise/components");
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_components46 = require("@transferwise/components");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var StepRenderer = {
   canRenderType: "step",
   render: StepRendererComponent
 };
 function StepRendererComponent(props) {
   const { back, description, error, title, children, toolbar } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(TopBar, { back, toolbar }),
-    title || description ? /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "m-b-4", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_components45.Title, { as: "h1", type: "title-section", className: "text-xs-center m-b-2", children: title }) : void 0,
-      description ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "text-xs-center np-text-body-large", children: description }) : void 0
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TopBar, { back, toolbar }),
+    title || description ? /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "m-b-4", children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_components46.Title, { as: "h1", type: "title-section", className: "text-xs-center m-b-2", children: title }) : void 0,
+      description ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "text-xs-center np-text-body-large", children: description }) : void 0
     ] }) : void 0,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_components45.Alert, { type: "negative", className: "m-b-2", message: error }) : void 0,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_components46.Alert, { type: "negative", className: "m-b-2", message: error }) : void 0,
     children
   ] });
 }
 
 // ../renderers/src/TabsRenderer.tsx
-var import_components46 = require("@transferwise/components");
+var import_components47 = require("@transferwise/components");
 var import_react17 = require("react");
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var TabsRenderer = {
   canRenderType: "tabs",
   render: (props) => {
     switch (props.control) {
       case "segmented":
         if (props.tabs.length > 3) {
-          return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TabsRendererComponent, __spreadValues({}, props));
+          return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(TabsRendererComponent, __spreadValues({}, props));
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(SegmentedTabsRendererComponent, __spreadValues({}, props));
+        return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(SegmentedTabsRendererComponent, __spreadValues({}, props));
       case "chips":
-        return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ChipsTabsRendererComponent, __spreadValues({}, props));
+        return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ChipsTabsRendererComponent, __spreadValues({}, props));
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TabsRendererComponent, __spreadValues({}, props));
+        return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(TabsRendererComponent, __spreadValues({}, props));
     }
   }
 };
 function TabsRendererComponent({ uid, margin, tabs }) {
   const [selectedIndex, setSelectedIndex] = (0, import_react17.useState)(0);
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-    import_components46.Tabs,
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    import_components47.Tabs,
     {
       name: uid,
       selected: selectedIndex != null ? selectedIndex : 0,
       tabs: tabs.map((option) => ({
         title: option.title,
         disabled: false,
-        content: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "m-t-2", children: [
+        content: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "m-t-2", children: [
           " ",
           option.children,
           " "
@@ -2876,9 +2903,9 @@ function TabsRendererComponent({ uid, margin, tabs }) {
 function SegmentedTabsRendererComponent({ uid, margin, tabs }) {
   var _a;
   const [selectedIndex, setSelectedIndex] = (0, import_react17.useState)(0);
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-      import_components46.SegmentedControl,
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: getMargin(margin), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+      import_components47.SegmentedControl,
       {
         name: uid,
         value: String(selectedIndex),
@@ -2892,31 +2919,31 @@ function SegmentedTabsRendererComponent({ uid, margin, tabs }) {
         onChange: (value) => setSelectedIndex(Number(value))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { id: `${uid}-children`, className: "m-t-2", children: (_a = tabs[selectedIndex]) == null ? void 0 : _a.children })
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { id: `${uid}-children`, className: "m-t-2", children: (_a = tabs[selectedIndex]) == null ? void 0 : _a.children })
   ] });
 }
 function ChipsTabsRendererComponent({ margin, tabs }) {
   var _a;
   const [selectedIndex, setSelectedIndex] = (0, import_react17.useState)(0);
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "chips-container", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-      import_components46.Chips,
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: getMargin(margin), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "chips-container", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+      import_components47.Chips,
       {
         chips: tabs.map((tab, index) => ({ label: tab.title, value: index })),
         selected: selectedIndex,
         onChange: ({ selectedValue }) => setSelectedIndex(Number(selectedValue))
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "m-t-2", children: (_a = tabs[selectedIndex]) == null ? void 0 : _a.children })
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "m-t-2", children: (_a = tabs[selectedIndex]) == null ? void 0 : _a.children })
   ] });
 }
 
 // ../renderers/src/TextInputRenderer.tsx
-var import_components48 = require("@transferwise/components");
+var import_components49 = require("@transferwise/components");
 
 // ../renderers/src/components/VariableTextInput.tsx
-var import_components47 = require("@transferwise/components");
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_components48 = require("@transferwise/components");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var commonKeys = [
   "autoComplete",
   "autoCapitalize",
@@ -2935,12 +2962,12 @@ function VariableTextInput(inputProps) {
   const commonProps = __spreadProps(__spreadValues({}, pick(inputProps, ...commonKeys)), { name: id });
   switch (control) {
     case "email":
-      return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "email", onChange }));
+      return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "email", onChange }));
     case "password":
-      return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "password", onChange }));
+      return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "password", onChange }));
     case "numeric": {
       const numericProps = __spreadProps(__spreadValues({}, commonProps), { type: "number", onWheel });
-      return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
         TextInput,
         __spreadProps(__spreadValues({}, numericProps), {
           onChange: (newValue) => {
@@ -2951,21 +2978,21 @@ function VariableTextInput(inputProps) {
       );
     }
     case "phone-number":
-      return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_components47.PhoneNumberInput, __spreadProps(__spreadValues({ initialValue: value }, commonProps), { onChange }));
+      return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_components48.PhoneNumberInput, __spreadProps(__spreadValues({ initialValue: value }, commonProps), { onChange }));
     default: {
-      return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "text", onChange }));
+      return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "text", onChange }));
     }
   }
 }
 function TextInput(props) {
   const _a = props, { control, displayFormat, onChange } = _a, commonProps = __objRest(_a, ["control", "displayFormat", "onChange"]);
-  const InputWithPattern = control === "textarea" ? import_components47.TextareaWithDisplayFormat : import_components47.InputWithDisplayFormat;
-  const InputWithoutPattern = control === "textarea" ? import_components47.TextArea : import_components47.Input;
-  return displayFormat ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(InputWithPattern, __spreadProps(__spreadValues({ displayPattern: displayFormat }, commonProps), { onChange })) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(InputWithoutPattern, __spreadProps(__spreadValues({}, commonProps), { onChange: (e) => onChange(e.target.value) }));
+  const InputWithPattern = control === "textarea" ? import_components48.TextareaWithDisplayFormat : import_components48.InputWithDisplayFormat;
+  const InputWithoutPattern = control === "textarea" ? import_components48.TextArea : import_components48.Input;
+  return displayFormat ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(InputWithPattern, __spreadProps(__spreadValues({ displayPattern: displayFormat }, commonProps), { onChange })) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(InputWithoutPattern, __spreadProps(__spreadValues({}, commonProps), { onChange: (e) => onChange(e.target.value) }));
 }
 
 // ../renderers/src/TextInputRenderer.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var TextInputRenderer = {
   canRenderType: "input-text",
   render: (props) => {
@@ -2998,7 +3025,7 @@ var TextInputRenderer = {
         }
       }
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       FieldInput_default,
       {
         id,
@@ -3006,7 +3033,7 @@ var TextInputRenderer = {
         description,
         validation: validationState,
         help,
-        children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_components48.InputGroup, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(VariableTextInput, __spreadValues({}, inputProps)) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_components49.InputGroup, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(VariableTextInput, __spreadValues({}, inputProps)) })
       }
     );
   }
@@ -3014,13 +3041,13 @@ var TextInputRenderer = {
 var TextInputRenderer_default = TextInputRenderer;
 
 // ../renderers/src/UploadInputRenderer.tsx
-var import_components49 = require("@transferwise/components");
+var import_components50 = require("@transferwise/components");
 
 // ../renderers/src/utils/getRandomId.ts
 var getRandomId = () => Math.random().toString(36).substring(2);
 
 // ../renderers/src/UploadInputRenderer.tsx
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var UploadInputRenderer = {
   canRenderType: "input-upload",
   render: (props) => {
@@ -3036,15 +3063,15 @@ var UploadInputRenderer = {
     };
     return (
       // We don't pass help here as there is no sensible place to display it
-      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
         UploadFieldInput_default,
         {
           id,
           label: void 0,
           description: void 0,
           validation: validationState,
-          children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-            import_components49.UploadInput,
+          children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+            import_components50.UploadInput,
             {
               id,
               description,
@@ -3102,7 +3129,7 @@ var LargeUploadRenderer = {
     };
     const filetypes = acceptsToFileTypes(accepts);
     const usAccept = filetypes === "*" ? "*" : filetypes.join(",");
-    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
       FieldInput_default,
       {
         id,
@@ -3110,8 +3137,8 @@ var LargeUploadRenderer = {
         description,
         validation: validationState,
         help,
-        children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-          import_components49.Upload,
+        children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+          import_components50.Upload,
           __spreadProps(__spreadValues({}, uploadProps), {
             usAccept,
             usDisabled: disabled,
@@ -3131,7 +3158,7 @@ var getWiseRenderers = () => [
   AlertRenderer_default,
   CheckboxInputRenderer_default,
   BoxRenderer_default,
-  ButtonRenderer_default,
+  ButtonRenderer,
   ColumnsRenderer_default,
   DateInputRenderer_default,
   DecisionRenderer_default,
@@ -3167,20 +3194,10 @@ var getWiseRenderers = () => [
   StepRenderer
 ];
 
-// src/dynamicFlow/extensions/createRendererWithExtensions.ts
-var RENDERER_REGISTRY = {
-  review: ReviewRenderer_default
-};
-function createRendererWithExtensions(type, options) {
-  const baseRenderer = RENDERER_REGISTRY[type];
-  const { extensions = {}, canRender, canRenderType } = options;
-  return __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, baseRenderer), canRenderType ? { canRenderType } : {}), canRender ? { canRender } : {}), {
-    extensions: __spreadValues(__spreadValues({}, baseRenderer.extensions), extensions)
-  });
-}
-
-// src/index.ts
-var import_dynamic_flow_client4 = require("@wise/dynamic-flow-client");
+// ../renderers/src/ButtonRenderer/ButtonRendererV2.tsx
+var import_components51 = require("@transferwise/components");
+var import_react18 = require("react");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 
 // src/i18n/index.ts
 var import_dynamic_flow_client = require("@wise/dynamic-flow-client");
@@ -3603,7 +3620,7 @@ var nl_default = {
   "df.wise.CopyFeedback.copy": "Naar klembord gekopieerd",
   "df.wise.CopyFeedback.copyFailed": "Naar klembord kopi\xEBren mislukt",
   "df.wise.Decision.all": "Alles",
-  "df.wise.Decision.filterPlaceholder": "Start typing to search",
+  "df.wise.Decision.filterPlaceholder": "Begin met typen om te zoeken",
   "df.wise.Decision.noResults": "Niks gevonden",
   "df.wise.Decision.popular": "Populair",
   "df.wise.Decision.recent": "Recent",
@@ -4009,14 +4026,14 @@ var translations = languages.reduce(
 var i18n_default = translations;
 
 // src/dynamicFlow/DynamicFlow.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_react_intl22 = require("react-intl");
 var import_dynamic_flow_client2 = require("@wise/dynamic-flow-client");
 
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "4.23.0" : "0.0.0"
+  typeof process !== "undefined" ? "4.24.0" : "0.0.0"
 );
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
@@ -4071,12 +4088,12 @@ var messages_default = (0, import_react_intl21.defineMessages)({
 });
 
 // src/dynamicFlow/DynamicFlow.tsx
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var wiseRenderers = getWiseRenderers();
 function DynamicFlowLegacy(props) {
   const { customFetch = globalThis.fetch } = props;
   const coreProps = __spreadProps(__spreadValues({}, props), { httpClient: customFetch });
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_dynamic_flow_client2.DynamicFlow, __spreadValues({}, coreProps));
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_dynamic_flow_client2.DynamicFlow, __spreadValues({}, coreProps));
 }
 function DynamicFlowRevamp(props) {
   const {
@@ -4092,9 +4109,9 @@ function DynamicFlowRevamp(props) {
   const { formatMessage } = (0, import_react_intl22.useIntl)();
   const createSnackBar = useSnackBarIfAvailable();
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = (0, import_react18.useMemo)(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
-  const logEvent = (0, import_react18.useMemo)(() => getLogEvent(onLog), [onLog]);
-  const trackEvent = (0, import_react18.useMemo)(
+  const mergedRenderers = (0, import_react19.useMemo)(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
+  const logEvent = (0, import_react19.useMemo)(() => getLogEvent(onLog), [onLog]);
+  const trackEvent = (0, import_react19.useMemo)(
     () => getTrackEvent(onEvent, onAnalytics, onThemeChange),
     [onEvent, onAnalytics, onThemeChange]
   );
@@ -4113,9 +4130,9 @@ function DynamicFlowRevamp(props) {
     onLink,
     onCopy
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_dynamic_flow_client2.DynamicFlowCoreRevamp, __spreadValues({}, coreProps)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_dynamic_flow_client2.DynamicFlowCoreRevamp, __spreadValues({}, coreProps)) });
 }
-var DynamicForm = (0, import_react18.forwardRef)(function DynamicForm2(props, ref) {
+var DynamicForm = (0, import_react19.forwardRef)(function DynamicForm2(props, ref) {
   const {
     className = "",
     customFetch = globalThis.fetch,
@@ -4129,9 +4146,9 @@ var DynamicForm = (0, import_react18.forwardRef)(function DynamicForm2(props, re
   const { formatMessage } = (0, import_react_intl22.useIntl)();
   const createSnackBar = useSnackBarIfAvailable();
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = (0, import_react18.useMemo)(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
-  const logEvent = (0, import_react18.useMemo)(() => getLogEvent(onLog), [onLog]);
-  const trackEvent = (0, import_react18.useMemo)(
+  const mergedRenderers = (0, import_react19.useMemo)(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
+  const logEvent = (0, import_react19.useMemo)(() => getLogEvent(onLog), [onLog]);
+  const trackEvent = (0, import_react19.useMemo)(
     () => getTrackEvent(onEvent, onAnalytics, onThemeChange),
     [onEvent, onAnalytics, onThemeChange]
   );
@@ -4150,11 +4167,11 @@ var DynamicForm = (0, import_react18.forwardRef)(function DynamicForm2(props, re
     onLink,
     onCopy
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_dynamic_flow_client2.DynamicFormCore, __spreadProps(__spreadValues({}, coreProps), { ref })) });
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_dynamic_flow_client2.DynamicFormCore, __spreadProps(__spreadValues({}, coreProps), { ref })) });
 });
 var useWiseHttpClient = (httpClient) => {
   const { locale } = (0, import_react_intl22.useIntl)();
-  return (0, import_react18.useCallback)(
+  return (0, import_react19.useCallback)(
     async (input, init = {}) => {
       const headers = new Headers(init.headers);
       headers.set("accept-language", locale);