@wise/dynamic-flow-client-internal 4.10.1 → 4.11.1

package/build/i18n/th.json

@@ -5,12 +5,12 @@
   "df.wise.ArraySchema.maxItemsError": "โปรดเพิ่ม {maxItems} หรือน้อยกว่า",
   "df.wise.ArraySchema.minItemsError": "โปรดเพิ่มอย่างน้อย {minItems}",
   "df.wise.ArraySchema.removeItem": "ลบ",
-  "df.wise.ControlFeedback.maxLength": "โปรดป้อน {maxLength} อักขระหรือน้อยกว่า",
+  "df.wise.ControlFeedback.maxLength": "โปรดป้อน {maxLength} ตัวอักษรหรือน้อยกว่านั้น",
   "df.wise.ControlFeedback.maximum": "โปรดป้อนตัวเลข {maximum} หรือน้อยกว่า",
-  "df.wise.ControlFeedback.maximumDate": "โปรดป้อนวันที่ที่อยู่ตรงพอดีหรือก่อน {maximum}",
-  "df.wise.ControlFeedback.minLength": "โปรดป้อนอักขระอย่างน้อย {minLength} ตัว",
+  "df.wise.ControlFeedback.maximumDate": "โปรดใส่วันที่เป็น {maximum} หรือก่อนหน้านั้น",
+  "df.wise.ControlFeedback.minLength": "โปรดป้อนตัวอักษรอย่างน้อย {minLength} ตัว",
   "df.wise.ControlFeedback.minimum": "โปรดป้อนตัวเลข {minimum} หรือมากกว่า",
-  "df.wise.ControlFeedback.minimumDate": "โปรดป้อนวันที่ที่อยู่ตรงพอดีหรือหลัง {minimum}",
+  "df.wise.ControlFeedback.minimumDate": "โปรดใส่วันที่เป็น {minimum} หรือหลังจากนั้น",
   "df.wise.ControlFeedback.pattern": "โปรดใส่ในรูปแบบที่ถูกต้อง",
   "df.wise.ControlFeedback.patternDate": "โปรดป้อนวันที่ในรูปแบบที่ถูกต้อง",
   "df.wise.ControlFeedback.required": "โปรดใส่ข้อมูลในช่องนี้",

package/build/main.css

@@ -336,6 +336,3 @@ button.df-back-btn {
   display: flex;
   flex-direction: column;
 }
-.df-standard-heading {
-  hyphens: auto;
-}

package/build/main.js

@@ -503,12 +503,12 @@ var th_default = {
   "df.wise.ArraySchema.maxItemsError": "\u0E42\u0E1B\u0E23\u0E14\u0E40\u0E1E\u0E34\u0E48\u0E21 {maxItems} \u0E2B\u0E23\u0E37\u0E2D\u0E19\u0E49\u0E2D\u0E22\u0E01\u0E27\u0E48\u0E32",
   "df.wise.ArraySchema.minItemsError": "\u0E42\u0E1B\u0E23\u0E14\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E2D\u0E22\u0E48\u0E32\u0E07\u0E19\u0E49\u0E2D\u0E22 {minItems}",
   "df.wise.ArraySchema.removeItem": "\u0E25\u0E1A",
-  "df.wise.ControlFeedback.maxLength": "\u0E42\u0E1B\u0E23\u0E14\u0E1B\u0E49\u0E2D\u0E19 {maxLength} \u0E2D\u0E31\u0E01\u0E02\u0E23\u0E30\u0E2B\u0E23\u0E37\u0E2D\u0E19\u0E49\u0E2D\u0E22\u0E01\u0E27\u0E48\u0E32",
+  "df.wise.ControlFeedback.maxLength": "\u0E42\u0E1B\u0E23\u0E14\u0E1B\u0E49\u0E2D\u0E19 {maxLength} \u0E15\u0E31\u0E27\u0E2D\u0E31\u0E01\u0E29\u0E23\u0E2B\u0E23\u0E37\u0E2D\u0E19\u0E49\u0E2D\u0E22\u0E01\u0E27\u0E48\u0E32\u0E19\u0E31\u0E49\u0E19",
   "df.wise.ControlFeedback.maximum": "\u0E42\u0E1B\u0E23\u0E14\u0E1B\u0E49\u0E2D\u0E19\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02 {maximum} \u0E2B\u0E23\u0E37\u0E2D\u0E19\u0E49\u0E2D\u0E22\u0E01\u0E27\u0E48\u0E32",
-  "df.wise.ControlFeedback.maximumDate": "\u0E42\u0E1B\u0E23\u0E14\u0E1B\u0E49\u0E2D\u0E19\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E17\u0E35\u0E48\u0E2D\u0E22\u0E39\u0E48\u0E15\u0E23\u0E07\u0E1E\u0E2D\u0E14\u0E35\u0E2B\u0E23\u0E37\u0E2D\u0E01\u0E48\u0E2D\u0E19 {maximum}",
-  "df.wise.ControlFeedback.minLength": "\u0E42\u0E1B\u0E23\u0E14\u0E1B\u0E49\u0E2D\u0E19\u0E2D\u0E31\u0E01\u0E02\u0E23\u0E30\u0E2D\u0E22\u0E48\u0E32\u0E07\u0E19\u0E49\u0E2D\u0E22 {minLength} \u0E15\u0E31\u0E27",
+  "df.wise.ControlFeedback.maximumDate": "\u0E42\u0E1B\u0E23\u0E14\u0E43\u0E2A\u0E48\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E40\u0E1B\u0E47\u0E19 {maximum} \u0E2B\u0E23\u0E37\u0E2D\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32\u0E19\u0E31\u0E49\u0E19",
+  "df.wise.ControlFeedback.minLength": "\u0E42\u0E1B\u0E23\u0E14\u0E1B\u0E49\u0E2D\u0E19\u0E15\u0E31\u0E27\u0E2D\u0E31\u0E01\u0E29\u0E23\u0E2D\u0E22\u0E48\u0E32\u0E07\u0E19\u0E49\u0E2D\u0E22 {minLength} \u0E15\u0E31\u0E27",
   "df.wise.ControlFeedback.minimum": "\u0E42\u0E1B\u0E23\u0E14\u0E1B\u0E49\u0E2D\u0E19\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02 {minimum} \u0E2B\u0E23\u0E37\u0E2D\u0E21\u0E32\u0E01\u0E01\u0E27\u0E48\u0E32",
-  "df.wise.ControlFeedback.minimumDate": "\u0E42\u0E1B\u0E23\u0E14\u0E1B\u0E49\u0E2D\u0E19\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E17\u0E35\u0E48\u0E2D\u0E22\u0E39\u0E48\u0E15\u0E23\u0E07\u0E1E\u0E2D\u0E14\u0E35\u0E2B\u0E23\u0E37\u0E2D\u0E2B\u0E25\u0E31\u0E07 {minimum}",
+  "df.wise.ControlFeedback.minimumDate": "\u0E42\u0E1B\u0E23\u0E14\u0E43\u0E2A\u0E48\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E40\u0E1B\u0E47\u0E19 {minimum} \u0E2B\u0E23\u0E37\u0E2D\u0E2B\u0E25\u0E31\u0E07\u0E08\u0E32\u0E01\u0E19\u0E31\u0E49\u0E19",
   "df.wise.ControlFeedback.pattern": "\u0E42\u0E1B\u0E23\u0E14\u0E43\u0E2A\u0E48\u0E43\u0E19\u0E23\u0E39\u0E1B\u0E41\u0E1A\u0E1A\u0E17\u0E35\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07",
   "df.wise.ControlFeedback.patternDate": "\u0E42\u0E1B\u0E23\u0E14\u0E1B\u0E49\u0E2D\u0E19\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E43\u0E19\u0E23\u0E39\u0E1B\u0E41\u0E1A\u0E1A\u0E17\u0E35\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07",
   "df.wise.ControlFeedback.required": "\u0E42\u0E1B\u0E23\u0E14\u0E43\u0E2A\u0E48\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E43\u0E19\u0E0A\u0E48\u0E2D\u0E07\u0E19\u0E35\u0E49",
@@ -1243,26 +1243,11 @@ var HeadingRenderer = {
 function Heading(props) {
   const { text, size, align, margin, control } = props;
   const className = getTextAlignmentAndMargin({ align, margin });
-  return control === "display" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DisplayHeading, { size, text, className }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StandardHeading, { size, text, className: `${className} df-standard-heading` });
+  return control === "display" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DisplayHeading, { size, text, className }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StandardHeading, { size, text, className });
 }
 function DisplayHeading({ size, text, className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_components11.Display, { type: getDisplayType(size), className, children: text });
 }
-function StandardHeading({ size, text, className }) {
-  switch (size) {
-    case "xs":
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h5", { className, children: text });
-    case "sm":
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h4", { className, children: text });
-    case "lg":
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { className, children: text });
-    case "xl":
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h1", { className, children: text });
-    case "md":
-    default:
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className, children: text });
-  }
-}
 var getDisplayType = (size) => {
   switch (size) {
     case "xs":
@@ -1276,6 +1261,20 @@ var getDisplayType = (size) => {
       return "display-medium";
   }
 };
+function StandardHeading({ size, text, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_components11.Title, { type: getTitleTypeBySize(size), className, children: text });
+}
+var getTitleTypeBySize = (size) => {
+  var _a;
+  const titleTypes = {
+    xs: "title-group",
+    sm: "title-body",
+    md: "title-subsection",
+    lg: "title-section",
+    xl: "title-screen"
+  };
+  return (_a = titleTypes[size]) != null ? _a : "title-subsection";
+};
 var HeadingRenderer_default = HeadingRenderer;
 
 // ../renderers/src/ImageRenderer/UrlImage.tsx
@@ -2886,7 +2885,7 @@ var getReviewAction = (callToAction) => {
 };
 
 // ../renderers/src/step/StepRenderer.tsx
-var import_components40 = require("@transferwise/components");
+var import_components39 = require("@transferwise/components");
 
 // ../renderers/src/step/BackButton.tsx
 var import_components38 = require("@transferwise/components");
@@ -2910,147 +2909,60 @@ function BackButton({ title, onClick }) {
 }
 var BackButton_default = BackButton;
 
-// ../renderers/src/step/ExternalConfirmationDialog.tsx
-var import_react_intl15 = require("react-intl");
-
-// ../renderers/src/messages/external-confirmation.messages.ts
-var import_react_intl14 = require("react-intl");
-var external_confirmation_messages_default = (0, import_react_intl14.defineMessages)({
-  title: {
-    id: "df.wise.ExternalConfirmation.title",
-    defaultMessage: "Please confirm",
-    description: "Heading for the confirmation screen."
-  },
-  description: {
-    id: "df.wise.ExternalConfirmation.description",
-    defaultMessage: "Please confirm you want to open **{origin}** in a new browser tab.",
-    description: "Description for the confirmation screen."
-  },
-  open: {
-    id: "df.wise.ExternalConfirmation.open",
-    defaultMessage: "Open in new tab",
-    description: "Button text confirming opening a new browser tab."
-  },
-  cancel: {
-    id: "df.wise.ExternalConfirmation.cancel",
-    defaultMessage: "Cancel",
-    description: "Button text rejecting opening a new browser tab."
-  }
-});
-
-// ../renderers/src/step/ExternalConfirmationDialog.tsx
-var import_components39 = require("@transferwise/components");
-var import_jsx_runtime54 = require("react/jsx-runtime");
-function ExternalConfirmationDialog({
-  external,
-  onClose
-}) {
-  const { formatMessage } = (0, import_react_intl15.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "df-box-renderer-fixed-width", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "df-box-renderer-width-lg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("h2", { className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.title) }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_components39.Markdown, { config: { link: { target: "_blank" } }, className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.description, { origin: getOrigin(external.url) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "df-box-renderer-fixed-width", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "df-box-renderer-width-lg", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-        import_components39.Button,
-        {
-          block: true,
-          className: "m-b-2",
-          priority: "primary",
-          size: "md",
-          onClick: () => {
-            window.open(external.url);
-            onClose();
-          },
-          children: formatMessage(external_confirmation_messages_default.open)
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_components39.Button, { block: true, className: "m-b-2", priority: "tertiary", size: "md", onClick: onClose, children: formatMessage(external_confirmation_messages_default.cancel) })
-    ] }) })
-  ] }) });
-}
-function getOrigin(url) {
-  try {
-    return new URL(url).origin;
-  } catch (e) {
-    return url;
-  }
-}
-
-// ../renderers/src/step/useExternal.tsx
-var import_react10 = require("react");
-function useExternal(url) {
-  const [externalWindow, setExternalWindow] = (0, import_react10.useState)(null);
-  const [hasDismissed, setHasDismissed] = (0, import_react10.useState)(false);
-  const dismissConfirmation = () => setHasDismissed(true);
-  (0, import_react10.useEffect)(() => {
-    if (url) {
-      setHasDismissed(false);
-      setExternalWindow(window.open(url, "_blank"));
-    }
-  }, [url]);
-  const requiresUserConfirmation = Boolean(url && !externalWindow && !hasDismissed);
-  return { requiresUserConfirmation, dismissConfirmation };
-}
-
 // ../renderers/src/step/StepRenderer.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var StepRenderer = {
   canRenderType: "step",
   render: StepRendererComponent
 };
 function StepRendererComponent(props) {
-  const { back, description, error, external, title, children } = props;
-  const { requiresUserConfirmation, dismissConfirmation } = useExternal(external == null ? void 0 : external.url);
-  if ((external == null ? void 0 : external.url) && requiresUserConfirmation) {
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ExternalConfirmationDialog, { external, onClose: dismissConfirmation });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
-    back ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(BackButton_default, __spreadValues({}, back)) : null,
-    title || description ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "m-b-4", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_components40.Title, { as: "h1", type: "title-section", className: "text-xs-center m-b-2", children: title }) : void 0,
-      description ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "text-xs-center np-text-body-large", children: description }) : void 0
+  const { back, description, error, title, children } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
+    back ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(BackButton_default, __spreadValues({}, back)) : null,
+    title || description ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "m-b-4", children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_components39.Title, { as: "h1", type: "title-section", className: "text-xs-center m-b-2", children: title }) : void 0,
+      description ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-xs-center np-text-body-large", children: description }) : void 0
     ] }) : void 0,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_components40.Alert, { type: "negative", className: "m-b-2", message: error }) : void 0,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_components39.Alert, { type: "negative", className: "m-b-2", message: error }) : void 0,
     children
   ] });
 }
 
 // ../renderers/src/ListRenderer.tsx
-var import_components41 = require("@transferwise/components");
+var import_components40 = require("@transferwise/components");
 var import_classnames6 = __toESM(require("classnames"));
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var ListRenderer = {
   canRenderType: "list",
-  render: ({ callToAction, control, margin, items, title }) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: getMargin(margin), children: [
-    (title || callToAction) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_components41.Header, { as: "h2", title: title != null ? title : "", action: getListAction(callToAction) }),
-    items.map((props) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DesignSystemListItem, __spreadProps(__spreadValues({}, props), { control }), props.title))
+  render: ({ callToAction, control, margin, items, title }) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: getMargin(margin), children: [
+    (title || callToAction) && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_components40.Header, { as: "h2", title: title != null ? title : "", action: getListAction(callToAction) }),
+    items.map((props) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DesignSystemListItem, __spreadProps(__spreadValues({}, props), { control }), props.title))
   ] })
 };
 var DesignSystemListItem = ({
   title,
-  subtitle,
-  value,
-  subvalue,
+  description,
+  supportingValues,
   icon,
   image,
   control
-}) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
   "label",
   {
     className: (0, import_classnames6.default)("np-option p-a-2", {
       "np-option__sm-media": true,
       "np-option__container-aligned": true
     }),
-    children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "media", children: [
-      icon || image ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "media-left", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ListItemMedia, { image, icon, preferAvatar: control === "with-avatar" }) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "media-body", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "d-flex justify-content-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("h4", { className: "np-text-body-large-bold text-primary np-option__title", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("h4", { className: "np-text-body-large-bold text-primary np-option__title", children: value })
+    children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "media", children: [
+      icon || image ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "media-left", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ListItemMedia, { image, icon, preferAvatar: control === "with-avatar" }) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "media-body", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "d-flex justify-content-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("h4", { className: "np-text-body-large-bold text-primary np-option__title", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("h4", { className: "np-text-body-large-bold text-primary np-option__title", children: supportingValues == null ? void 0 : supportingValues.value })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "d-flex justify-content-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_components41.Body, { className: "d-block np-option__body", children: subtitle }),
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_components41.Body, { className: "d-block np-option__body", children: subvalue })
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "d-flex justify-content-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_components40.Body, { className: "d-block np-option__body", children: description }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_components40.Body, { className: "d-block np-option__body", children: supportingValues == null ? void 0 : supportingValues.subvalue })
         ] })
       ] })
     ] })
@@ -3063,10 +2975,10 @@ var ListItemMedia = ({
   preferAvatar
 }) => {
   if (icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "circle circle-sm text-primary circle-inverse", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(OptionMedia, { icon, image, preferAvatar }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "circle circle-sm text-primary circle-inverse", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(OptionMedia, { icon, image, preferAvatar }) });
   }
   if (image) {
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "np-option__no-media-circle", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(OptionMedia, { icon, image, preferAvatar }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "np-option__no-media-circle", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(OptionMedia, { icon, image, preferAvatar }) });
   }
 };
 var getListAction = (callToAction) => {
@@ -3082,32 +2994,28 @@ var getListAction = (callToAction) => {
 var ListRenderer_default = ListRenderer;
 
 // ../renderers/src/step/SplashStepRenderer.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var SplashStepRenderer = {
   canRenderType: "step",
   canRender: ({ control }) => control === "splash",
   render: SplashStepRendererComponent
 };
 function SplashStepRendererComponent(props) {
-  const { back, children, external } = props;
-  const { requiresUserConfirmation, dismissConfirmation } = useExternal(external == null ? void 0 : external.url);
-  if ((external == null ? void 0 : external.url) && requiresUserConfirmation) {
-    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ExternalConfirmationDialog, { external, onClose: dismissConfirmation });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "splash-screen m-t-5", children: [
-    back ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(BackButton_default, __spreadValues({}, back)) : null,
+  const { back, children } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "splash-screen m-t-5", children: [
+    back ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(BackButton_default, __spreadValues({}, back)) : null,
     children
   ] });
 }
 
 // ../renderers/src/utils/useCustomTheme.ts
 var import_components_theming = require("@wise/components-theming");
-var import_react11 = require("react");
+var import_react10 = require("react");
 var ThemeRequiredEventName = "Theme Required";
 var useCustomTheme = (theme, trackEvent) => {
   const previousThemeHookValue = (0, import_components_theming.useTheme)();
-  const previousTheme = (0, import_react11.useMemo)(() => previousThemeHookValue.theme, []);
-  (0, import_react11.useEffect)(() => {
+  const previousTheme = (0, import_react10.useMemo)(() => previousThemeHookValue.theme, []);
+  (0, import_react10.useEffect)(() => {
     trackEvent(ThemeRequiredEventName, { theme });
     return theme !== previousTheme ? () => {
       trackEvent(ThemeRequiredEventName, { theme: previousTheme });
@@ -3117,25 +3025,113 @@ var useCustomTheme = (theme, trackEvent) => {
 };
 
 // ../renderers/src/step/SplashCelebrationStepRenderer.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var SplashCelebrationStepRenderer = {
   canRenderType: "step",
   canRender: ({ control }) => control === "splash-celebration",
   render: SplashCelebrationStepRendererComponent
 };
 function SplashCelebrationStepRendererComponent(props) {
-  const { back, children, external, trackEvent } = props;
+  const { back, children, trackEvent } = props;
   useCustomTheme("forest-green", trackEvent);
-  const { requiresUserConfirmation, dismissConfirmation } = useExternal(external == null ? void 0 : external.url);
-  if ((external == null ? void 0 : external.url) && requiresUserConfirmation) {
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ExternalConfirmationDialog, { external, onClose: dismissConfirmation });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "splash-screen m-t-5", children: [
-    back ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(BackButton_default, __spreadValues({}, back)) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "splash-screen m-t-5", children: [
+    back ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(BackButton_default, __spreadValues({}, back)) : null,
     children
   ] });
 }
 
+// ../renderers/src/ExternalConfirmationRenderer.tsx
+var import_components41 = require("@transferwise/components");
+
+// ../renderers/src/messages/external-confirmation.messages.ts
+var import_react_intl14 = require("react-intl");
+var external_confirmation_messages_default = (0, import_react_intl14.defineMessages)({
+  title: {
+    id: "df.wise.ExternalConfirmation.title",
+    defaultMessage: "Please confirm",
+    description: "Heading for the confirmation screen."
+  },
+  description: {
+    id: "df.wise.ExternalConfirmation.description",
+    defaultMessage: "Please confirm you want to open **{origin}** in a new browser tab.",
+    description: "Description for the confirmation screen."
+  },
+  open: {
+    id: "df.wise.ExternalConfirmation.open",
+    defaultMessage: "Open in new tab",
+    description: "Button text confirming opening a new browser tab."
+  },
+  cancel: {
+    id: "df.wise.ExternalConfirmation.cancel",
+    defaultMessage: "Cancel",
+    description: "Button text rejecting opening a new browser tab."
+  }
+});
+
+// ../renderers/src/ExternalConfirmationRenderer.tsx
+var import_react_intl15 = require("react-intl");
+var import_react11 = require("react");
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var ExternalConfirmationRenderer = {
+  canRenderType: "external-confirmation",
+  render: ExternalConfirmationRendererComponent
+};
+function ExternalConfirmationRendererComponent({
+  url,
+  status,
+  onSuccess,
+  onFailure,
+  onCancel
+}) {
+  const { formatMessage } = (0, import_react_intl15.useIntl)();
+  (0, import_react11.useEffect)(() => {
+    if (url) {
+      const w = window.open(url, "_blank");
+      if (w) {
+        onSuccess();
+      } else {
+        onFailure();
+      }
+    }
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    import_components41.Modal,
+    {
+      open: status === "failure",
+      title: formatMessage(external_confirmation_messages_default.title),
+      body: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_components41.Markdown, { config: { link: { target: "_blank" } }, className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.description, { origin: getOrigin(url) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "df-box-renderer-fixed-width", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "df-box-renderer-width-lg", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+            import_components41.Button,
+            {
+              block: true,
+              className: "m-b-2",
+              priority: "primary",
+              size: "md",
+              onClick: () => {
+                window.open(url);
+                onCancel();
+              },
+              children: formatMessage(external_confirmation_messages_default.open)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_components41.Button, { block: true, className: "m-b-2", priority: "tertiary", size: "md", onClick: onCancel, children: formatMessage(external_confirmation_messages_default.cancel) })
+        ] }) })
+      ] }),
+      onClose: onCancel
+    }
+  );
+}
+function getOrigin(url) {
+  try {
+    return new URL(url).origin;
+  } catch (e) {
+    return url;
+  }
+}
+var ExternalConfirmationRenderer_default = ExternalConfirmationRenderer;
+
 // ../renderers/src/getWiseRenderers.ts
 var getWiseRenderers = () => [
   AlertRenderer_default,
@@ -3146,6 +3142,7 @@ var getWiseRenderers = () => [
   DateInputRenderer_default,
   DecisionRenderer_default,
   DividerRenderer_default,
+  ExternalConfirmationRenderer_default,
   FormRenderer_default,
   FormSectionRenderer_default,
   HeadingRenderer_default,
@@ -3184,7 +3181,7 @@ var ModalContentRenderer = {
 };
 
 // src/dynamicFlow/telemetry/app-version.ts
-var appVersion = "4.10.1";
+var appVersion = "4.11.1";
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
 var getLogEvent = (onLog) => (level, message, extra) => {

package/build/main.mjs

@@ -465,12 +465,12 @@ var th_default = {
   "df.wise.ArraySchema.maxItemsError": "\u0E42\u0E1B\u0E23\u0E14\u0E40\u0E1E\u0E34\u0E48\u0E21 {maxItems} \u0E2B\u0E23\u0E37\u0E2D\u0E19\u0E49\u0E2D\u0E22\u0E01\u0E27\u0E48\u0E32",
   "df.wise.ArraySchema.minItemsError": "\u0E42\u0E1B\u0E23\u0E14\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E2D\u0E22\u0E48\u0E32\u0E07\u0E19\u0E49\u0E2D\u0E22 {minItems}",
   "df.wise.ArraySchema.removeItem": "\u0E25\u0E1A",
-  "df.wise.ControlFeedback.maxLength": "\u0E42\u0E1B\u0E23\u0E14\u0E1B\u0E49\u0E2D\u0E19 {maxLength} \u0E2D\u0E31\u0E01\u0E02\u0E23\u0E30\u0E2B\u0E23\u0E37\u0E2D\u0E19\u0E49\u0E2D\u0E22\u0E01\u0E27\u0E48\u0E32",
+  "df.wise.ControlFeedback.maxLength": "\u0E42\u0E1B\u0E23\u0E14\u0E1B\u0E49\u0E2D\u0E19 {maxLength} \u0E15\u0E31\u0E27\u0E2D\u0E31\u0E01\u0E29\u0E23\u0E2B\u0E23\u0E37\u0E2D\u0E19\u0E49\u0E2D\u0E22\u0E01\u0E27\u0E48\u0E32\u0E19\u0E31\u0E49\u0E19",
   "df.wise.ControlFeedback.maximum": "\u0E42\u0E1B\u0E23\u0E14\u0E1B\u0E49\u0E2D\u0E19\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02 {maximum} \u0E2B\u0E23\u0E37\u0E2D\u0E19\u0E49\u0E2D\u0E22\u0E01\u0E27\u0E48\u0E32",
-  "df.wise.ControlFeedback.maximumDate": "\u0E42\u0E1B\u0E23\u0E14\u0E1B\u0E49\u0E2D\u0E19\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E17\u0E35\u0E48\u0E2D\u0E22\u0E39\u0E48\u0E15\u0E23\u0E07\u0E1E\u0E2D\u0E14\u0E35\u0E2B\u0E23\u0E37\u0E2D\u0E01\u0E48\u0E2D\u0E19 {maximum}",
-  "df.wise.ControlFeedback.minLength": "\u0E42\u0E1B\u0E23\u0E14\u0E1B\u0E49\u0E2D\u0E19\u0E2D\u0E31\u0E01\u0E02\u0E23\u0E30\u0E2D\u0E22\u0E48\u0E32\u0E07\u0E19\u0E49\u0E2D\u0E22 {minLength} \u0E15\u0E31\u0E27",
+  "df.wise.ControlFeedback.maximumDate": "\u0E42\u0E1B\u0E23\u0E14\u0E43\u0E2A\u0E48\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E40\u0E1B\u0E47\u0E19 {maximum} \u0E2B\u0E23\u0E37\u0E2D\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32\u0E19\u0E31\u0E49\u0E19",
+  "df.wise.ControlFeedback.minLength": "\u0E42\u0E1B\u0E23\u0E14\u0E1B\u0E49\u0E2D\u0E19\u0E15\u0E31\u0E27\u0E2D\u0E31\u0E01\u0E29\u0E23\u0E2D\u0E22\u0E48\u0E32\u0E07\u0E19\u0E49\u0E2D\u0E22 {minLength} \u0E15\u0E31\u0E27",
   "df.wise.ControlFeedback.minimum": "\u0E42\u0E1B\u0E23\u0E14\u0E1B\u0E49\u0E2D\u0E19\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02 {minimum} \u0E2B\u0E23\u0E37\u0E2D\u0E21\u0E32\u0E01\u0E01\u0E27\u0E48\u0E32",
-  "df.wise.ControlFeedback.minimumDate": "\u0E42\u0E1B\u0E23\u0E14\u0E1B\u0E49\u0E2D\u0E19\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E17\u0E35\u0E48\u0E2D\u0E22\u0E39\u0E48\u0E15\u0E23\u0E07\u0E1E\u0E2D\u0E14\u0E35\u0E2B\u0E23\u0E37\u0E2D\u0E2B\u0E25\u0E31\u0E07 {minimum}",
+  "df.wise.ControlFeedback.minimumDate": "\u0E42\u0E1B\u0E23\u0E14\u0E43\u0E2A\u0E48\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E40\u0E1B\u0E47\u0E19 {minimum} \u0E2B\u0E23\u0E37\u0E2D\u0E2B\u0E25\u0E31\u0E07\u0E08\u0E32\u0E01\u0E19\u0E31\u0E49\u0E19",
   "df.wise.ControlFeedback.pattern": "\u0E42\u0E1B\u0E23\u0E14\u0E43\u0E2A\u0E48\u0E43\u0E19\u0E23\u0E39\u0E1B\u0E41\u0E1A\u0E1A\u0E17\u0E35\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07",
   "df.wise.ControlFeedback.patternDate": "\u0E42\u0E1B\u0E23\u0E14\u0E1B\u0E49\u0E2D\u0E19\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E43\u0E19\u0E23\u0E39\u0E1B\u0E41\u0E1A\u0E1A\u0E17\u0E35\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07",
   "df.wise.ControlFeedback.required": "\u0E42\u0E1B\u0E23\u0E14\u0E43\u0E2A\u0E48\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E43\u0E19\u0E0A\u0E48\u0E2D\u0E07\u0E19\u0E35\u0E49",
@@ -1200,7 +1200,7 @@ var FormSectionRenderer = {
 var FormSectionRenderer_default = FormSectionRenderer;
 
 // ../renderers/src/HeadingRenderer.tsx
-import { Display } from "@transferwise/components";
+import { Display, Title } from "@transferwise/components";
 import { jsx as jsx21 } from "react/jsx-runtime";
 var HeadingRenderer = {
   canRenderType: "heading",
@@ -1209,26 +1209,11 @@ var HeadingRenderer = {
 function Heading(props) {
   const { text, size, align, margin, control } = props;
   const className = getTextAlignmentAndMargin({ align, margin });
-  return control === "display" ? /* @__PURE__ */ jsx21(DisplayHeading, { size, text, className }) : /* @__PURE__ */ jsx21(StandardHeading, { size, text, className: `${className} df-standard-heading` });
+  return control === "display" ? /* @__PURE__ */ jsx21(DisplayHeading, { size, text, className }) : /* @__PURE__ */ jsx21(StandardHeading, { size, text, className });
 }
 function DisplayHeading({ size, text, className }) {
   return /* @__PURE__ */ jsx21(Display, { type: getDisplayType(size), className, children: text });
 }
-function StandardHeading({ size, text, className }) {
-  switch (size) {
-    case "xs":
-      return /* @__PURE__ */ jsx21("h5", { className, children: text });
-    case "sm":
-      return /* @__PURE__ */ jsx21("h4", { className, children: text });
-    case "lg":
-      return /* @__PURE__ */ jsx21("h2", { className, children: text });
-    case "xl":
-      return /* @__PURE__ */ jsx21("h1", { className, children: text });
-    case "md":
-    default:
-      return /* @__PURE__ */ jsx21("h3", { className, children: text });
-  }
-}
 var getDisplayType = (size) => {
   switch (size) {
     case "xs":
@@ -1242,6 +1227,20 @@ var getDisplayType = (size) => {
       return "display-medium";
   }
 };
+function StandardHeading({ size, text, className }) {
+  return /* @__PURE__ */ jsx21(Title, { type: getTitleTypeBySize(size), className, children: text });
+}
+var getTitleTypeBySize = (size) => {
+  var _a;
+  const titleTypes = {
+    xs: "title-group",
+    sm: "title-body",
+    md: "title-subsection",
+    lg: "title-section",
+    xl: "title-screen"
+  };
+  return (_a = titleTypes[size]) != null ? _a : "title-subsection";
+};
 var HeadingRenderer_default = HeadingRenderer;
 
 // ../renderers/src/ImageRenderer/UrlImage.tsx
@@ -2862,7 +2861,7 @@ var getReviewAction = (callToAction) => {
 };
 
 // ../renderers/src/step/StepRenderer.tsx
-import { Alert as Alert2, Title } from "@transferwise/components";
+import { Alert as Alert2, Title as Title2 } from "@transferwise/components";
 
 // ../renderers/src/step/BackButton.tsx
 import { AvatarView as AvatarView4 } from "@transferwise/components";
@@ -2886,107 +2885,21 @@ function BackButton({ title, onClick }) {
 }
 var BackButton_default = BackButton;
 
-// ../renderers/src/step/ExternalConfirmationDialog.tsx
-import { useIntl as useIntl8 } from "react-intl";
-
-// ../renderers/src/messages/external-confirmation.messages.ts
-import { defineMessages as defineMessages7 } from "react-intl";
-var external_confirmation_messages_default = defineMessages7({
-  title: {
-    id: "df.wise.ExternalConfirmation.title",
-    defaultMessage: "Please confirm",
-    description: "Heading for the confirmation screen."
-  },
-  description: {
-    id: "df.wise.ExternalConfirmation.description",
-    defaultMessage: "Please confirm you want to open **{origin}** in a new browser tab.",
-    description: "Description for the confirmation screen."
-  },
-  open: {
-    id: "df.wise.ExternalConfirmation.open",
-    defaultMessage: "Open in new tab",
-    description: "Button text confirming opening a new browser tab."
-  },
-  cancel: {
-    id: "df.wise.ExternalConfirmation.cancel",
-    defaultMessage: "Cancel",
-    description: "Button text rejecting opening a new browser tab."
-  }
-});
-
-// ../renderers/src/step/ExternalConfirmationDialog.tsx
-import { Button as Button6, Markdown as Markdown5 } from "@transferwise/components";
-import { jsx as jsx54, jsxs as jsxs19 } from "react/jsx-runtime";
-function ExternalConfirmationDialog({
-  external,
-  onClose
-}) {
-  const { formatMessage } = useIntl8();
-  return /* @__PURE__ */ jsx54("div", { className: "df-box-renderer-fixed-width", children: /* @__PURE__ */ jsxs19("div", { className: "df-box-renderer-width-lg", children: [
-    /* @__PURE__ */ jsx54("h2", { className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.title) }),
-    /* @__PURE__ */ jsx54(Markdown5, { config: { link: { target: "_blank" } }, className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.description, { origin: getOrigin(external.url) }) }),
-    /* @__PURE__ */ jsx54("div", { className: "df-box-renderer-fixed-width", children: /* @__PURE__ */ jsxs19("div", { className: "df-box-renderer-width-lg", children: [
-      /* @__PURE__ */ jsx54(
-        Button6,
-        {
-          block: true,
-          className: "m-b-2",
-          priority: "primary",
-          size: "md",
-          onClick: () => {
-            window.open(external.url);
-            onClose();
-          },
-          children: formatMessage(external_confirmation_messages_default.open)
-        }
-      ),
-      /* @__PURE__ */ jsx54(Button6, { block: true, className: "m-b-2", priority: "tertiary", size: "md", onClick: onClose, children: formatMessage(external_confirmation_messages_default.cancel) })
-    ] }) })
-  ] }) });
-}
-function getOrigin(url) {
-  try {
-    return new URL(url).origin;
-  } catch (e) {
-    return url;
-  }
-}
-
-// ../renderers/src/step/useExternal.tsx
-import { useEffect as useEffect4, useState as useState7 } from "react";
-function useExternal(url) {
-  const [externalWindow, setExternalWindow] = useState7(null);
-  const [hasDismissed, setHasDismissed] = useState7(false);
-  const dismissConfirmation = () => setHasDismissed(true);
-  useEffect4(() => {
-    if (url) {
-      setHasDismissed(false);
-      setExternalWindow(window.open(url, "_blank"));
-    }
-  }, [url]);
-  const requiresUserConfirmation = Boolean(url && !externalWindow && !hasDismissed);
-  return { requiresUserConfirmation, dismissConfirmation };
-}
-
 // ../renderers/src/step/StepRenderer.tsx
-import { Fragment as Fragment8, jsx as jsx55, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx54, jsxs as jsxs19 } from "react/jsx-runtime";
 var StepRenderer = {
   canRenderType: "step",
   render: StepRendererComponent
 };
 function StepRendererComponent(props) {
-  const { back, description, error, external, title, children } = props;
-  const { requiresUserConfirmation, dismissConfirmation } = useExternal(external == null ? void 0 : external.url);
-  if ((external == null ? void 0 : external.url) && requiresUserConfirmation) {
-    return /* @__PURE__ */ jsx55(ExternalConfirmationDialog, { external, onClose: dismissConfirmation });
-  }
-  return /* @__PURE__ */ jsxs20(Fragment8, { children: [
-    back ? /* @__PURE__ */ jsx55(BackButton_default, __spreadValues({}, back)) : null,
-    title || description ? /* @__PURE__ */ jsxs20("div", { className: "m-b-4", children: [
-      title ? /* @__PURE__ */ jsx55(Title, { as: "h1", type: "title-section", className: "text-xs-center m-b-2", children: title }) : void 0,
-      description ? /* @__PURE__ */ jsx55("p", { className: "text-xs-center np-text-body-large", children: description }) : void 0
+  const { back, description, error, title, children } = props;
+  return /* @__PURE__ */ jsxs19(Fragment8, { children: [
+    back ? /* @__PURE__ */ jsx54(BackButton_default, __spreadValues({}, back)) : null,
+    title || description ? /* @__PURE__ */ jsxs19("div", { className: "m-b-4", children: [
+      title ? /* @__PURE__ */ jsx54(Title2, { as: "h1", type: "title-section", className: "text-xs-center m-b-2", children: title }) : void 0,
+      description ? /* @__PURE__ */ jsx54("p", { className: "text-xs-center np-text-body-large", children: description }) : void 0
     ] }) : void 0,
-    error ? /* @__PURE__ */ jsx55(Alert2, { type: "negative", className: "m-b-2", message: error }) : void 0,
+    error ? /* @__PURE__ */ jsx54(Alert2, { type: "negative", className: "m-b-2", message: error }) : void 0,
     children
   ] });
 }
@@ -2994,39 +2907,38 @@ function StepRendererComponent(props) {
 // ../renderers/src/ListRenderer.tsx
 import { Body, Header as Header7 } from "@transferwise/components";
 import classNames6 from "classnames";
-import { jsx as jsx56, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs20 } from "react/jsx-runtime";
 var ListRenderer = {
   canRenderType: "list",
-  render: ({ callToAction, control, margin, items, title }) => /* @__PURE__ */ jsxs21("div", { className: getMargin(margin), children: [
-    (title || callToAction) && /* @__PURE__ */ jsx56(Header7, { as: "h2", title: title != null ? title : "", action: getListAction(callToAction) }),
-    items.map((props) => /* @__PURE__ */ jsx56(DesignSystemListItem, __spreadProps(__spreadValues({}, props), { control }), props.title))
+  render: ({ callToAction, control, margin, items, title }) => /* @__PURE__ */ jsxs20("div", { className: getMargin(margin), children: [
+    (title || callToAction) && /* @__PURE__ */ jsx55(Header7, { as: "h2", title: title != null ? title : "", action: getListAction(callToAction) }),
+    items.map((props) => /* @__PURE__ */ jsx55(DesignSystemListItem, __spreadProps(__spreadValues({}, props), { control }), props.title))
   ] })
 };
 var DesignSystemListItem = ({
   title,
-  subtitle,
-  value,
-  subvalue,
+  description,
+  supportingValues,
   icon,
   image,
   control
-}) => /* @__PURE__ */ jsx56(
+}) => /* @__PURE__ */ jsx55(
   "label",
   {
     className: classNames6("np-option p-a-2", {
       "np-option__sm-media": true,
       "np-option__container-aligned": true
     }),
-    children: /* @__PURE__ */ jsxs21("div", { className: "media", children: [
-      icon || image ? /* @__PURE__ */ jsx56("div", { className: "media-left", children: /* @__PURE__ */ jsx56(ListItemMedia, { image, icon, preferAvatar: control === "with-avatar" }) }) : null,
-      /* @__PURE__ */ jsxs21("div", { className: "media-body", children: [
-        /* @__PURE__ */ jsxs21("div", { className: "d-flex justify-content-between", children: [
-          /* @__PURE__ */ jsx56("h4", { className: "np-text-body-large-bold text-primary np-option__title", children: title }),
-          /* @__PURE__ */ jsx56("h4", { className: "np-text-body-large-bold text-primary np-option__title", children: value })
+    children: /* @__PURE__ */ jsxs20("div", { className: "media", children: [
+      icon || image ? /* @__PURE__ */ jsx55("div", { className: "media-left", children: /* @__PURE__ */ jsx55(ListItemMedia, { image, icon, preferAvatar: control === "with-avatar" }) }) : null,
+      /* @__PURE__ */ jsxs20("div", { className: "media-body", children: [
+        /* @__PURE__ */ jsxs20("div", { className: "d-flex justify-content-between", children: [
+          /* @__PURE__ */ jsx55("h4", { className: "np-text-body-large-bold text-primary np-option__title", children: title }),
+          /* @__PURE__ */ jsx55("h4", { className: "np-text-body-large-bold text-primary np-option__title", children: supportingValues == null ? void 0 : supportingValues.value })
         ] }),
-        /* @__PURE__ */ jsxs21("div", { className: "d-flex justify-content-between", children: [
-          /* @__PURE__ */ jsx56(Body, { className: "d-block np-option__body", children: subtitle }),
-          /* @__PURE__ */ jsx56(Body, { className: "d-block np-option__body", children: subvalue })
+        /* @__PURE__ */ jsxs20("div", { className: "d-flex justify-content-between", children: [
+          /* @__PURE__ */ jsx55(Body, { className: "d-block np-option__body", children: description }),
+          /* @__PURE__ */ jsx55(Body, { className: "d-block np-option__body", children: supportingValues == null ? void 0 : supportingValues.subvalue })
         ] })
       ] })
     ] })
@@ -3039,10 +2951,10 @@ var ListItemMedia = ({
   preferAvatar
 }) => {
   if (icon) {
-    return /* @__PURE__ */ jsx56("div", { className: "circle circle-sm text-primary circle-inverse", children: /* @__PURE__ */ jsx56(OptionMedia, { icon, image, preferAvatar }) });
+    return /* @__PURE__ */ jsx55("div", { className: "circle circle-sm text-primary circle-inverse", children: /* @__PURE__ */ jsx55(OptionMedia, { icon, image, preferAvatar }) });
   }
   if (image) {
-    return /* @__PURE__ */ jsx56("div", { className: "np-option__no-media-circle", children: /* @__PURE__ */ jsx56(OptionMedia, { icon, image, preferAvatar }) });
+    return /* @__PURE__ */ jsx55("div", { className: "np-option__no-media-circle", children: /* @__PURE__ */ jsx55(OptionMedia, { icon, image, preferAvatar }) });
   }
 };
 var getListAction = (callToAction) => {
@@ -3058,32 +2970,28 @@ var getListAction = (callToAction) => {
 var ListRenderer_default = ListRenderer;
 
 // ../renderers/src/step/SplashStepRenderer.tsx
-import { jsx as jsx57, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs21 } from "react/jsx-runtime";
 var SplashStepRenderer = {
   canRenderType: "step",
   canRender: ({ control }) => control === "splash",
   render: SplashStepRendererComponent
 };
 function SplashStepRendererComponent(props) {
-  const { back, children, external } = props;
-  const { requiresUserConfirmation, dismissConfirmation } = useExternal(external == null ? void 0 : external.url);
-  if ((external == null ? void 0 : external.url) && requiresUserConfirmation) {
-    return /* @__PURE__ */ jsx57(ExternalConfirmationDialog, { external, onClose: dismissConfirmation });
-  }
-  return /* @__PURE__ */ jsxs22("div", { className: "splash-screen m-t-5", children: [
-    back ? /* @__PURE__ */ jsx57(BackButton_default, __spreadValues({}, back)) : null,
+  const { back, children } = props;
+  return /* @__PURE__ */ jsxs21("div", { className: "splash-screen m-t-5", children: [
+    back ? /* @__PURE__ */ jsx56(BackButton_default, __spreadValues({}, back)) : null,
     children
   ] });
 }
 
 // ../renderers/src/utils/useCustomTheme.ts
 import { useTheme } from "@wise/components-theming";
-import { useEffect as useEffect5, useMemo } from "react";
+import { useEffect as useEffect4, useMemo } from "react";
 var ThemeRequiredEventName = "Theme Required";
 var useCustomTheme = (theme, trackEvent) => {
   const previousThemeHookValue = useTheme();
   const previousTheme = useMemo(() => previousThemeHookValue.theme, []);
-  useEffect5(() => {
+  useEffect4(() => {
     trackEvent(ThemeRequiredEventName, { theme });
     return theme !== previousTheme ? () => {
       trackEvent(ThemeRequiredEventName, { theme: previousTheme });
@@ -3093,25 +3001,113 @@ var useCustomTheme = (theme, trackEvent) => {
 };
 
 // ../renderers/src/step/SplashCelebrationStepRenderer.tsx
-import { jsx as jsx58, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs22 } from "react/jsx-runtime";
 var SplashCelebrationStepRenderer = {
   canRenderType: "step",
   canRender: ({ control }) => control === "splash-celebration",
   render: SplashCelebrationStepRendererComponent
 };
 function SplashCelebrationStepRendererComponent(props) {
-  const { back, children, external, trackEvent } = props;
+  const { back, children, trackEvent } = props;
   useCustomTheme("forest-green", trackEvent);
-  const { requiresUserConfirmation, dismissConfirmation } = useExternal(external == null ? void 0 : external.url);
-  if ((external == null ? void 0 : external.url) && requiresUserConfirmation) {
-    return /* @__PURE__ */ jsx58(ExternalConfirmationDialog, { external, onClose: dismissConfirmation });
-  }
-  return /* @__PURE__ */ jsxs23("div", { className: "splash-screen m-t-5", children: [
-    back ? /* @__PURE__ */ jsx58(BackButton_default, __spreadValues({}, back)) : null,
+  return /* @__PURE__ */ jsxs22("div", { className: "splash-screen m-t-5", children: [
+    back ? /* @__PURE__ */ jsx57(BackButton_default, __spreadValues({}, back)) : null,
     children
   ] });
 }
 
+// ../renderers/src/ExternalConfirmationRenderer.tsx
+import { Button as Button6, Markdown as Markdown5, Modal as Modal3 } from "@transferwise/components";
+
+// ../renderers/src/messages/external-confirmation.messages.ts
+import { defineMessages as defineMessages7 } from "react-intl";
+var external_confirmation_messages_default = defineMessages7({
+  title: {
+    id: "df.wise.ExternalConfirmation.title",
+    defaultMessage: "Please confirm",
+    description: "Heading for the confirmation screen."
+  },
+  description: {
+    id: "df.wise.ExternalConfirmation.description",
+    defaultMessage: "Please confirm you want to open **{origin}** in a new browser tab.",
+    description: "Description for the confirmation screen."
+  },
+  open: {
+    id: "df.wise.ExternalConfirmation.open",
+    defaultMessage: "Open in new tab",
+    description: "Button text confirming opening a new browser tab."
+  },
+  cancel: {
+    id: "df.wise.ExternalConfirmation.cancel",
+    defaultMessage: "Cancel",
+    description: "Button text rejecting opening a new browser tab."
+  }
+});
+
+// ../renderers/src/ExternalConfirmationRenderer.tsx
+import { useIntl as useIntl8 } from "react-intl";
+import { useEffect as useEffect5 } from "react";
+import { Fragment as Fragment9, jsx as jsx58, jsxs as jsxs23 } from "react/jsx-runtime";
+var ExternalConfirmationRenderer = {
+  canRenderType: "external-confirmation",
+  render: ExternalConfirmationRendererComponent
+};
+function ExternalConfirmationRendererComponent({
+  url,
+  status,
+  onSuccess,
+  onFailure,
+  onCancel
+}) {
+  const { formatMessage } = useIntl8();
+  useEffect5(() => {
+    if (url) {
+      const w = window.open(url, "_blank");
+      if (w) {
+        onSuccess();
+      } else {
+        onFailure();
+      }
+    }
+  }, []);
+  return /* @__PURE__ */ jsx58(
+    Modal3,
+    {
+      open: status === "failure",
+      title: formatMessage(external_confirmation_messages_default.title),
+      body: /* @__PURE__ */ jsxs23(Fragment9, { children: [
+        /* @__PURE__ */ jsx58(Markdown5, { config: { link: { target: "_blank" } }, className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.description, { origin: getOrigin(url) }) }),
+        /* @__PURE__ */ jsx58("div", { className: "df-box-renderer-fixed-width", children: /* @__PURE__ */ jsxs23("div", { className: "df-box-renderer-width-lg", children: [
+          /* @__PURE__ */ jsx58(
+            Button6,
+            {
+              block: true,
+              className: "m-b-2",
+              priority: "primary",
+              size: "md",
+              onClick: () => {
+                window.open(url);
+                onCancel();
+              },
+              children: formatMessage(external_confirmation_messages_default.open)
+            }
+          ),
+          /* @__PURE__ */ jsx58(Button6, { block: true, className: "m-b-2", priority: "tertiary", size: "md", onClick: onCancel, children: formatMessage(external_confirmation_messages_default.cancel) })
+        ] }) })
+      ] }),
+      onClose: onCancel
+    }
+  );
+}
+function getOrigin(url) {
+  try {
+    return new URL(url).origin;
+  } catch (e) {
+    return url;
+  }
+}
+var ExternalConfirmationRenderer_default = ExternalConfirmationRenderer;
+
 // ../renderers/src/getWiseRenderers.ts
 var getWiseRenderers = () => [
   AlertRenderer_default,
@@ -3122,6 +3118,7 @@ var getWiseRenderers = () => [
   DateInputRenderer_default,
   DecisionRenderer_default,
   DividerRenderer_default,
+  ExternalConfirmationRenderer_default,
   FormRenderer_default,
   FormSectionRenderer_default,
   HeadingRenderer_default,
@@ -3150,17 +3147,17 @@ var getWiseRenderers = () => [
 ];
 
 // ../renderers/src/ModalContentRenderer.tsx
-import { Modal as Modal3 } from "@transferwise/components";
+import { Modal as Modal4 } from "@transferwise/components";
 import { jsx as jsx59 } from "react/jsx-runtime";
 var ModalContentRenderer = {
   canRenderType: "modal-content",
   render: ({ title, children, open, onClose }) => {
-    return /* @__PURE__ */ jsx59(Modal3, { open, title, body: children, onClose });
+    return /* @__PURE__ */ jsx59(Modal4, { open, title, body: children, onClose });
   }
 };
 
 // src/dynamicFlow/telemetry/app-version.ts
-var appVersion = "4.10.1";
+var appVersion = "4.11.1";
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
 var getLogEvent = (onLog) => (level, message, extra) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "4.10.1",
+  "version": "4.11.1",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -51,10 +51,10 @@
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
-    "@transferwise/components": "46.96.0",
+    "@transferwise/components": "46.96.1",
     "@transferwise/formatting": "^2.13.1",
-    "@transferwise/icons": "3.20.0",
-    "@transferwise/neptune-css": "14.24.2",
+    "@transferwise/icons": "3.21.0",
+    "@transferwise/neptune-css": "14.24.3",
     "@types/jest": "29.5.14",
     "@types/react": "18.3.20",
     "@types/react-dom": "18.3.6",
@@ -82,9 +82,9 @@
     "tsx": "4.19.3",
     "typescript": "5.8.3",
     "webpack": "5.99.7",
+    "@wise/dynamic-flow-types": "3.3.0",
     "@wise/dynamic-flow-fixtures": "0.0.1",
-    "@wise/dynamic-flow-renderers": "0.0.0",
-    "@wise/dynamic-flow-types": "3.2.0"
+    "@wise/dynamic-flow-renderers": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.92.0",
@@ -99,8 +99,8 @@
   },
   "dependencies": {
     "classnames": "2.5.1",
-    "@wise/dynamic-flow-client": "4.4.0",
-    "@wise/dynamic-flow-types": "3.2.0"
+    "@wise/dynamic-flow-client": "4.5.1",
+    "@wise/dynamic-flow-types": "3.3.0"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3005",