@wise/dynamic-flow-client-internal 5.3.0 → 5.4.0

package/build/main.css

@@ -184,6 +184,12 @@
   position: fixed;
   top: 24px;
 }
+.dynamic-flow-modal .df-back-button {
+  position: fixed;
+  top: 24px;
+  width: 40px;
+  height: 40px;
+}
 .chips-container {
   overflow-x: auto;
 }

package/build/main.js

@@ -127,16 +127,74 @@ __export(index_exports, {
   DynamicFlowWithRef: () => DynamicFlowWithRef,
   Header: () => Header11,
   Media: () => Media2,
-  findRendererPropsByType: () => import_dynamic_flow_client4.findRendererPropsByType,
+  findRendererPropsByType: () => import_dynamic_flow_client7.findRendererPropsByType,
   getMargin: () => getMargin2,
-  makeCustomFetch: () => import_dynamic_flow_client3.makeHttpClient,
+  makeCustomFetch: () => import_dynamic_flow_client6.makeHttpClient,
   translations: () => i18n_default
 });
 module.exports = __toCommonJS(index_exports);
+var import_dynamic_flow_client6 = require("@wise/dynamic-flow-client");
+
+// src/dynamicFlow/DynamicFlow.tsx
 var import_dynamic_flow_client3 = require("@wise/dynamic-flow-client");
 
-// src/dynamicFlow/useDynamicFlowWise.tsx
+// src/dynamicFlow/useWiseToCoreProps.tsx
+var import_react21 = require("react");
+
+// src/dynamicFlow/telemetry/app-version.ts
+var appVersion = (
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  typeof process !== "undefined" ? "5.4.0" : "0.0.0"
+);
+
+// src/dynamicFlow/telemetry/getLogEvent.ts
+var getLogEvent = (onLog) => (level, message, extra) => {
+  const extraWithVersion = __spreadProps(__spreadValues({}, extra), {
+    dfWiseVersion: appVersion
+  });
+  if (level !== "info" && onLog) {
+    if (onLog) {
+      onLog(level, message, extraWithVersion);
+    } else {
+      logToRollbar(level, message, extraWithVersion);
+    }
+  }
+};
+var logToRollbar = (level, message, extra) => {
+  try {
+    const rollbar = typeof window.Rollbar !== "undefined" ? window.Rollbar : void 0;
+    rollbar == null ? void 0 : rollbar[level](message, extra);
+  } catch (error) {
+    console.error("Failed to log to Rollbar", error);
+  }
+};
+
+// src/dynamicFlow/telemetry/getTrackEvent.ts
 var import_dynamic_flow_client = require("@wise/dynamic-flow-client");
+var prefix = "Dynamic Flow - ";
+var getTrackEvent = (onEvent, onAnalytics) => (name, properties) => {
+  onEvent == null ? void 0 : onEvent(name, properties);
+  if (includeInAnalytics(name)) {
+    onAnalytics == null ? void 0 : onAnalytics(name, properties);
+  }
+};
+var includeInAnalytics = (name) => {
+  const eventName = name.startsWith(prefix) ? name.slice(prefix.length) : name;
+  if (isCoreEventName(eventName)) {
+    return true;
+  }
+  if (eventName in customEventsToAnalytics) {
+    return customEventsToAnalytics[eventName];
+  }
+  return true;
+};
+var isCoreEventName = (eventName) => {
+  return import_dynamic_flow_client.eventNames.includes(eventName);
+};
+var customEventsToAnalytics = {
+  "Theme Required": false
+  // Excluded from analytics
+};
 
 // ../renderers/src/AlertRenderer.tsx
 var import_components = require("@transferwise/components");
@@ -1147,7 +1205,7 @@ var import_react4 = require("react");
 // ../renderers/src/utils/api-utils.ts
 function isRelativePath(url = "") {
   return !["https://", "http://", "data:"].some(
-    (prefix) => url.startsWith(prefix) && url.length > prefix.length
+    (prefix2) => url.startsWith(prefix2) && url.length > prefix2.length
   );
 }
 
@@ -3510,9 +3568,10 @@ var DecisionRenderer = {
 };
 var renderDecisionList = ({ options, control }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_jsx_runtime78.Fragment, { children: options.map((_a) => {
-    var _b = _a, { disabled, onClick } = _b, rest = __objRest(_b, ["disabled", "onClick"]);
+    var _b = _a, { onClick } = _b, rest = __objRest(_b, ["onClick"]);
     const {
       description,
+      disabled,
       media,
       title: itemTitle,
       href,
@@ -3729,43 +3788,30 @@ var getWiseRenderers = () => [
   ReviewLegacyRenderer_default
 ];
 
-// src/dynamicFlow/useDynamicFlowWise.tsx
-var import_react21 = require("react");
-
-// src/dynamicFlow/telemetry/app-version.ts
-var appVersion = (
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "5.3.0" : "0.0.0"
-);
-
-// src/dynamicFlow/telemetry/getLogEvent.ts
-var getLogEvent = (onLog) => (level, message, extra) => {
-  const extraWithVersion = __spreadProps(__spreadValues({}, extra), {
-    dfWiseVersion: appVersion
-  });
-  if (level !== "info" && onLog) {
-    if (onLog) {
-      onLog(level, message, extraWithVersion);
-    } else {
-      logToRollbar(level, message, extraWithVersion);
+// ../renderers/src/subflow/getSubflowRenderer.tsx
+var import_jsx_runtime82 = require("react/jsx-runtime");
+var getSubflowRenderer = ({
+  Component: Component2,
+  canRender
+}) => {
+  return {
+    canRenderType: "subflow",
+    canRender,
+    render: (props) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+        Component2,
+        {
+          presentation: props.presentation,
+          requestCache: props.requestCache,
+          initialRequest: props.initialRequest,
+          onCompletion: props.onCompletion,
+          onError: props.onError,
+          onCancellation: props.onCancellation,
+          onEvent: props.onEvent
+        }
+      );
     }
-  }
-};
-var logToRollbar = (level, message, extra) => {
-  try {
-    const rollbar = typeof window.Rollbar !== "undefined" ? window.Rollbar : void 0;
-    rollbar == null ? void 0 : rollbar[level](message, extra);
-  } catch (error) {
-    console.error("Failed to log to Rollbar", error);
-  }
-};
-
-// src/dynamicFlow/telemetry/getTrackEvent.ts
-var getTrackEvent = (onEvent, onAnalytics) => (name, properties) => {
-  onEvent == null ? void 0 : onEvent(name, properties);
-  if (!name.includes(ThemeRequiredEventName)) {
-    onAnalytics == null ? void 0 : onAnalytics(name, properties);
-  }
+  };
 };
 
 // src/dynamicFlow/useOnCopy.tsx
@@ -3829,33 +3875,78 @@ var handleRejection = (error) => {
   throw error;
 };
 
-// src/dynamicFlow/useDynamicFlowWise.tsx
+// src/dynamicFlow/DynamicFlowModal.tsx
+var import_dynamic_flow_client2 = require("@wise/dynamic-flow-client");
+var import_components59 = require("@transferwise/components");
+var import_jsx_runtime83 = require("react/jsx-runtime");
+function DynamicFlowModal(props) {
+  const _a = props, { className = "" } = _a, rest = __objRest(_a, ["className"]);
+  const dfProps = useWiseToCoreProps(rest);
+  const df = (0, import_dynamic_flow_client2.useDynamicFlowModal)(dfProps);
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+    import_components59.Modal,
+    __spreadProps(__spreadValues({
+      className: `dynamic-flow-modal ${className}`,
+      disableDimmerClickToClose: true
+    }, df.modal), {
+      body: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "dynamic-flow-modal", children: df.modal.body })
+    })
+  );
+}
+
+// src/dynamicFlow/getMergedRenderers.tsx
+var import_jsx_runtime84 = require("react/jsx-runtime");
 var wiseRenderers = getWiseRenderers();
-var useDynamicFlowWise = (props) => {
+var getMergedRenderers = (props) => {
+  var _d;
+  const _a = props, { initialAction, initialStep } = _a, restProps = __objRest(_a, ["initialAction", "initialStep"]);
+  const subflowFeatures = __spreadProps(__spreadValues({}, props.features), { nativeBack: true });
+  const subflowRenderer = getSubflowRenderer({
+    Component: (_b) => {
+      var _c = _b, { presentation, initialRequest } = _c, rest = __objRest(_c, ["presentation", "initialRequest"]);
+      const action = {
+        url: initialRequest.url,
+        method: initialRequest.method,
+        data: initialRequest.body
+      };
+      return presentation.type === "push" ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(DynamicFlow, __spreadProps(__spreadValues(__spreadValues({}, restProps), rest), { features: subflowFeatures, initialAction: action })) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+        DynamicFlowModal,
+        __spreadProps(__spreadValues(__spreadValues({}, restProps), rest), {
+          features: subflowFeatures,
+          initialAction: action
+        })
+      );
+    }
+  });
+  return [...(_d = props.renderers) != null ? _d : [], subflowRenderer, ...wiseRenderers];
+};
+
+// src/dynamicFlow/useWiseToCoreProps.tsx
+var useWiseToCoreProps = (props) => {
   const {
-    customFetch = globalThis.fetch,
-    renderers,
     displayStepTitle = true,
     features = {},
+    customFetch = globalThis.fetch,
+    renderers,
     onAnalytics,
     onEvent,
-    onLog,
-    onLink = openLinkInNewTab
+    onLink = openLinkInNewTab,
+    onLog
   } = props;
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = (0, import_react21.useMemo)(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
+  const mergedRenderers = (0, import_react21.useMemo)(() => getMergedRenderers(props), [renderers]);
   const logEvent = (0, import_react21.useMemo)(() => getLogEvent(onLog), [onLog]);
   const trackEvent = (0, import_react21.useMemo)(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
   const onCopy = useOnCopy();
-  return (0, import_dynamic_flow_client.useDynamicFlow)(__spreadProps(__spreadValues({}, props), {
-    features: __spreadValues({ hideStepTitle: !displayStepTitle }, features),
+  return __spreadProps(__spreadValues({}, props), {
     httpClient,
+    features: __spreadValues({ hideStepTitle: !displayStepTitle }, features),
     renderers: mergedRenderers,
     onEvent: trackEvent,
     onLog: logEvent,
-    onLink,
-    onCopy
-  }));
+    onCopy,
+    onLink
+  });
 };
 var openLinkInNewTab = (url) => {
   var _a;
@@ -3868,19 +3959,22 @@ var openLinkInNewTab = (url) => {
 };
 
 // src/dynamicFlow/DynamicFlow.tsx
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_jsx_runtime85 = require("react/jsx-runtime");
 function DynamicFlow(props) {
   const { className = "" } = props;
-  const df = useDynamicFlowWise(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className, children: df.view });
+  const dfProps = useWiseToCoreProps(props);
+  const df = (0, import_dynamic_flow_client3.useDynamicFlow)(dfProps);
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className, children: df.view });
 }
 
 // src/dynamicFlow/DynamicFlowWithRef.tsx
 var import_react22 = require("react");
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_dynamic_flow_client4 = require("@wise/dynamic-flow-client");
+var import_jsx_runtime86 = require("react/jsx-runtime");
 var DynamicFlowWithRef = (0, import_react22.forwardRef)(function DynamicFlowWithRef2(props, ref) {
   const { className = "" } = props;
-  const df = useDynamicFlowWise(props);
+  const dfProps = useWiseToCoreProps(props);
+  const df = (0, import_dynamic_flow_client4.useDynamicFlow)(dfProps);
   (0, import_react22.useImperativeHandle)(
     ref,
     () => ({
@@ -3892,19 +3986,19 @@ var DynamicFlowWithRef = (0, import_react22.forwardRef)(function DynamicFlowWith
     }),
     [df]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className, children: df.view });
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className, children: df.view });
 });
 
 // src/index.ts
-var import_dynamic_flow_client4 = require("@wise/dynamic-flow-client");
+var import_dynamic_flow_client7 = require("@wise/dynamic-flow-client");
 
-// src/dynamicFlow/renderers.ts
+// src/dynamicFlow/renderers.tsx
 var Header11 = Header7;
 var Media2 = Media;
 var getMargin2 = getMargin;
 
 // src/i18n/index.ts
-var import_dynamic_flow_client2 = require("@wise/dynamic-flow-client");
+var import_dynamic_flow_client5 = require("@wise/dynamic-flow-client");
 
 // src/i18n/cs.json
 var cs_default = {
@@ -4757,10 +4851,10 @@ var wiseTranslations = {
   "zh-HK": zh_HK_default
 };
 var languages = Array.from(
-  /* @__PURE__ */ new Set([...Object.keys(import_dynamic_flow_client2.translations), ...Object.keys(wiseTranslations)])
+  /* @__PURE__ */ new Set([...Object.keys(import_dynamic_flow_client5.translations), ...Object.keys(wiseTranslations)])
 );
 var translations = languages.reduce(
-  (acc, lang) => __spreadProps(__spreadValues({}, acc), { [lang]: __spreadValues(__spreadValues({}, import_dynamic_flow_client2.translations[lang]), wiseTranslations[lang]) }),
+  (acc, lang) => __spreadProps(__spreadValues({}, acc), { [lang]: __spreadValues(__spreadValues({}, import_dynamic_flow_client5.translations[lang]), wiseTranslations[lang]) }),
   {}
 );
 var i18n_default = translations;

package/build/main.mjs

@@ -117,9 +117,67 @@ var require_classnames = __commonJS({
 // src/index.ts
 import { makeHttpClient } from "@wise/dynamic-flow-client";
 
-// src/dynamicFlow/useDynamicFlowWise.tsx
+// src/dynamicFlow/DynamicFlow.tsx
 import { useDynamicFlow } from "@wise/dynamic-flow-client";
 
+// src/dynamicFlow/useWiseToCoreProps.tsx
+import { useMemo as useMemo2 } from "react";
+
+// src/dynamicFlow/telemetry/app-version.ts
+var appVersion = (
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  typeof process !== "undefined" ? "5.4.0" : "0.0.0"
+);
+
+// src/dynamicFlow/telemetry/getLogEvent.ts
+var getLogEvent = (onLog) => (level, message, extra) => {
+  const extraWithVersion = __spreadProps(__spreadValues({}, extra), {
+    dfWiseVersion: appVersion
+  });
+  if (level !== "info" && onLog) {
+    if (onLog) {
+      onLog(level, message, extraWithVersion);
+    } else {
+      logToRollbar(level, message, extraWithVersion);
+    }
+  }
+};
+var logToRollbar = (level, message, extra) => {
+  try {
+    const rollbar = typeof window.Rollbar !== "undefined" ? window.Rollbar : void 0;
+    rollbar == null ? void 0 : rollbar[level](message, extra);
+  } catch (error) {
+    console.error("Failed to log to Rollbar", error);
+  }
+};
+
+// src/dynamicFlow/telemetry/getTrackEvent.ts
+import { eventNames } from "@wise/dynamic-flow-client";
+var prefix = "Dynamic Flow - ";
+var getTrackEvent = (onEvent, onAnalytics) => (name, properties) => {
+  onEvent == null ? void 0 : onEvent(name, properties);
+  if (includeInAnalytics(name)) {
+    onAnalytics == null ? void 0 : onAnalytics(name, properties);
+  }
+};
+var includeInAnalytics = (name) => {
+  const eventName = name.startsWith(prefix) ? name.slice(prefix.length) : name;
+  if (isCoreEventName(eventName)) {
+    return true;
+  }
+  if (eventName in customEventsToAnalytics) {
+    return customEventsToAnalytics[eventName];
+  }
+  return true;
+};
+var isCoreEventName = (eventName) => {
+  return eventNames.includes(eventName);
+};
+var customEventsToAnalytics = {
+  "Theme Required": false
+  // Excluded from analytics
+};
+
 // ../renderers/src/AlertRenderer.tsx
 import { Alert } from "@transferwise/components";
 
@@ -1129,7 +1187,7 @@ import { useEffect as useEffect4, useState as useState3 } from "react";
 // ../renderers/src/utils/api-utils.ts
 function isRelativePath(url = "") {
   return !["https://", "http://", "data:"].some(
-    (prefix) => url.startsWith(prefix) && url.length > prefix.length
+    (prefix2) => url.startsWith(prefix2) && url.length > prefix2.length
   );
 }
 
@@ -3501,9 +3559,10 @@ var DecisionRenderer = {
 };
 var renderDecisionList = ({ options, control }) => {
   return /* @__PURE__ */ jsx78(Fragment11, { children: options.map((_a) => {
-    var _b = _a, { disabled, onClick } = _b, rest = __objRest(_b, ["disabled", "onClick"]);
+    var _b = _a, { onClick } = _b, rest = __objRest(_b, ["onClick"]);
     const {
       description,
+      disabled,
       media,
       title: itemTitle,
       href,
@@ -3720,43 +3779,30 @@ var getWiseRenderers = () => [
   ReviewLegacyRenderer_default
 ];
 
-// src/dynamicFlow/useDynamicFlowWise.tsx
-import { useMemo as useMemo2 } from "react";
-
-// src/dynamicFlow/telemetry/app-version.ts
-var appVersion = (
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "5.3.0" : "0.0.0"
-);
-
-// src/dynamicFlow/telemetry/getLogEvent.ts
-var getLogEvent = (onLog) => (level, message, extra) => {
-  const extraWithVersion = __spreadProps(__spreadValues({}, extra), {
-    dfWiseVersion: appVersion
-  });
-  if (level !== "info" && onLog) {
-    if (onLog) {
-      onLog(level, message, extraWithVersion);
-    } else {
-      logToRollbar(level, message, extraWithVersion);
+// ../renderers/src/subflow/getSubflowRenderer.tsx
+import { jsx as jsx82 } from "react/jsx-runtime";
+var getSubflowRenderer = ({
+  Component: Component2,
+  canRender
+}) => {
+  return {
+    canRenderType: "subflow",
+    canRender,
+    render: (props) => {
+      return /* @__PURE__ */ jsx82(
+        Component2,
+        {
+          presentation: props.presentation,
+          requestCache: props.requestCache,
+          initialRequest: props.initialRequest,
+          onCompletion: props.onCompletion,
+          onError: props.onError,
+          onCancellation: props.onCancellation,
+          onEvent: props.onEvent
+        }
+      );
     }
-  }
-};
-var logToRollbar = (level, message, extra) => {
-  try {
-    const rollbar = typeof window.Rollbar !== "undefined" ? window.Rollbar : void 0;
-    rollbar == null ? void 0 : rollbar[level](message, extra);
-  } catch (error) {
-    console.error("Failed to log to Rollbar", error);
-  }
-};
-
-// src/dynamicFlow/telemetry/getTrackEvent.ts
-var getTrackEvent = (onEvent, onAnalytics) => (name, properties) => {
-  onEvent == null ? void 0 : onEvent(name, properties);
-  if (!name.includes(ThemeRequiredEventName)) {
-    onAnalytics == null ? void 0 : onAnalytics(name, properties);
-  }
+  };
 };
 
 // src/dynamicFlow/useOnCopy.tsx
@@ -3820,33 +3866,78 @@ var handleRejection = (error) => {
   throw error;
 };
 
-// src/dynamicFlow/useDynamicFlowWise.tsx
+// src/dynamicFlow/DynamicFlowModal.tsx
+import { useDynamicFlowModal } from "@wise/dynamic-flow-client";
+import { Modal as Modal5 } from "@transferwise/components";
+import { jsx as jsx83 } from "react/jsx-runtime";
+function DynamicFlowModal(props) {
+  const _a = props, { className = "" } = _a, rest = __objRest(_a, ["className"]);
+  const dfProps = useWiseToCoreProps(rest);
+  const df = useDynamicFlowModal(dfProps);
+  return /* @__PURE__ */ jsx83(
+    Modal5,
+    __spreadProps(__spreadValues({
+      className: `dynamic-flow-modal ${className}`,
+      disableDimmerClickToClose: true
+    }, df.modal), {
+      body: /* @__PURE__ */ jsx83("div", { className: "dynamic-flow-modal", children: df.modal.body })
+    })
+  );
+}
+
+// src/dynamicFlow/getMergedRenderers.tsx
+import { jsx as jsx84 } from "react/jsx-runtime";
 var wiseRenderers = getWiseRenderers();
-var useDynamicFlowWise = (props) => {
+var getMergedRenderers = (props) => {
+  var _d;
+  const _a = props, { initialAction, initialStep } = _a, restProps = __objRest(_a, ["initialAction", "initialStep"]);
+  const subflowFeatures = __spreadProps(__spreadValues({}, props.features), { nativeBack: true });
+  const subflowRenderer = getSubflowRenderer({
+    Component: (_b) => {
+      var _c = _b, { presentation, initialRequest } = _c, rest = __objRest(_c, ["presentation", "initialRequest"]);
+      const action = {
+        url: initialRequest.url,
+        method: initialRequest.method,
+        data: initialRequest.body
+      };
+      return presentation.type === "push" ? /* @__PURE__ */ jsx84(DynamicFlow, __spreadProps(__spreadValues(__spreadValues({}, restProps), rest), { features: subflowFeatures, initialAction: action })) : /* @__PURE__ */ jsx84(
+        DynamicFlowModal,
+        __spreadProps(__spreadValues(__spreadValues({}, restProps), rest), {
+          features: subflowFeatures,
+          initialAction: action
+        })
+      );
+    }
+  });
+  return [...(_d = props.renderers) != null ? _d : [], subflowRenderer, ...wiseRenderers];
+};
+
+// src/dynamicFlow/useWiseToCoreProps.tsx
+var useWiseToCoreProps = (props) => {
   const {
-    customFetch = globalThis.fetch,
-    renderers,
     displayStepTitle = true,
     features = {},
+    customFetch = globalThis.fetch,
+    renderers,
     onAnalytics,
     onEvent,
-    onLog,
-    onLink = openLinkInNewTab
+    onLink = openLinkInNewTab,
+    onLog
   } = props;
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = useMemo2(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
+  const mergedRenderers = useMemo2(() => getMergedRenderers(props), [renderers]);
   const logEvent = useMemo2(() => getLogEvent(onLog), [onLog]);
   const trackEvent = useMemo2(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
   const onCopy = useOnCopy();
-  return useDynamicFlow(__spreadProps(__spreadValues({}, props), {
-    features: __spreadValues({ hideStepTitle: !displayStepTitle }, features),
+  return __spreadProps(__spreadValues({}, props), {
     httpClient,
+    features: __spreadValues({ hideStepTitle: !displayStepTitle }, features),
     renderers: mergedRenderers,
     onEvent: trackEvent,
     onLog: logEvent,
-    onLink,
-    onCopy
-  }));
+    onCopy,
+    onLink
+  });
 };
 var openLinkInNewTab = (url) => {
   var _a;
@@ -3859,11 +3950,12 @@ var openLinkInNewTab = (url) => {
 };
 
 // src/dynamicFlow/DynamicFlow.tsx
-import { jsx as jsx82 } from "react/jsx-runtime";
+import { jsx as jsx85 } from "react/jsx-runtime";
 function DynamicFlow(props) {
   const { className = "" } = props;
-  const df = useDynamicFlowWise(props);
-  return /* @__PURE__ */ jsx82("div", { className, children: df.view });
+  const dfProps = useWiseToCoreProps(props);
+  const df = useDynamicFlow(dfProps);
+  return /* @__PURE__ */ jsx85("div", { className, children: df.view });
 }
 
 // src/dynamicFlow/DynamicFlowWithRef.tsx
@@ -3871,10 +3963,12 @@ import {
   forwardRef,
   useImperativeHandle
 } from "react";
-import { jsx as jsx83 } from "react/jsx-runtime";
+import { useDynamicFlow as useDynamicFlow2 } from "@wise/dynamic-flow-client";
+import { jsx as jsx86 } from "react/jsx-runtime";
 var DynamicFlowWithRef = forwardRef(function DynamicFlowWithRef2(props, ref) {
   const { className = "" } = props;
-  const df = useDynamicFlowWise(props);
+  const dfProps = useWiseToCoreProps(props);
+  const df = useDynamicFlow2(dfProps);
   useImperativeHandle(
     ref,
     () => ({
@@ -3886,13 +3980,13 @@ var DynamicFlowWithRef = forwardRef(function DynamicFlowWithRef2(props, ref) {
     }),
     [df]
   );
-  return /* @__PURE__ */ jsx83("div", { className, children: df.view });
+  return /* @__PURE__ */ jsx86("div", { className, children: df.view });
 });
 
 // src/index.ts
 import { findRendererPropsByType } from "@wise/dynamic-flow-client";
 
-// src/dynamicFlow/renderers.ts
+// src/dynamicFlow/renderers.tsx
 var Header11 = Header7;
 var Media2 = Media;
 var getMargin2 = getMargin;

package/build/types/dynamicFlow/DynamicFlow.d.ts

@@ -1,6 +1,6 @@
-import type { DynamicFlowProps } from './DynamicFlowProps';
+import type { DynamicFlowWiseProps } from './DynamicFlowWiseProps';
 export type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 export type Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};
-export declare function DynamicFlow(props: DynamicFlowProps): import("react/jsx-runtime").JSX.Element;
+export declare function DynamicFlow(props: DynamicFlowWiseProps): import("react/jsx-runtime").JSX.Element;

package/build/types/dynamicFlow/DynamicFlowModal.d.ts

@@ -0,0 +1,2 @@
+import type { DynamicFlowWiseProps } from './DynamicFlowWiseProps';
+export declare function DynamicFlowModal(props: DynamicFlowWiseProps): import("react/jsx-runtime").JSX.Element;

package/build/types/dynamicFlow/{DynamicFlowProps.d.ts → DynamicFlowWiseProps.d.ts}

@@ -1,6 +1,6 @@
 import type { DynamicFlowProps as DynamicFlowCoreProps } from '@wise/dynamic-flow-client';
 import { Prettify, MakeOptional } from './DynamicFlow';
-export type DynamicFlowProps = Prettify<MakeOptional<Omit<DynamicFlowCoreProps, 'httpClient'>, 'renderers' | 'onLink'> & {
+export type DynamicFlowWiseProps = Prettify<MakeOptional<Omit<DynamicFlowCoreProps, 'httpClient'>, 'renderers' | 'onLink'> & {
     className?: string;
     /**
      * @deprecated Use `features` prop with `hideStepTitle` instead.

package/build/types/dynamicFlow/DynamicFlowWithRef.d.ts

@@ -1,7 +1,7 @@
 import { JsonElement } from '@wise/dynamic-flow-types/spec';
 import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
-import type { DynamicFlowProps } from './DynamicFlowProps';
-export type DynamicFlowWithRefProps = DynamicFlowProps & {
+import type { DynamicFlowWiseProps } from './DynamicFlowWiseProps';
+export type DynamicFlowWithRefProps = DynamicFlowWiseProps & {
     onValueChange?: () => void;
 };
 export type DynamicFlowRef = {

package/build/types/dynamicFlow/getMergedRenderers.d.ts

@@ -0,0 +1,3 @@
+import type { Renderers } from '@wise/dynamic-flow-types/renderers';
+import { DynamicFlowWiseProps } from './DynamicFlowWiseProps';
+export declare const getMergedRenderers: (props: DynamicFlowWiseProps) => Renderers;

package/build/types/dynamicFlow/telemetry/getTrackEvent.d.ts

@@ -1,4 +1,4 @@
-import { DynamicFlowProps } from '@wise/dynamic-flow-client';
+import { type DynamicFlowProps } from '@wise/dynamic-flow-client';
 type OnEvent = DynamicFlowProps['onEvent'];
 export declare const getTrackEvent: (onEvent: OnEvent, onAnalytics: OnEvent) => OnEvent;
 export {};

package/build/types/dynamicFlow/useWiseToCoreProps.d.ts

@@ -0,0 +1,3 @@
+import { DynamicFlowWiseProps } from './DynamicFlowWiseProps';
+import { DynamicFlowProps } from '@wise/dynamic-flow-client';
+export declare const useWiseToCoreProps: (props: DynamicFlowWiseProps) => DynamicFlowProps;

package/build/types/index.d.ts

@@ -1,5 +1,5 @@
 export { makeHttpClient as makeCustomFetch } from '@wise/dynamic-flow-client';
-export type { DynamicFlowProps } from './dynamicFlow/DynamicFlowProps';
+export type { DynamicFlowWiseProps as DynamicFlowProps } from './dynamicFlow/DynamicFlowWiseProps';
 export { DynamicFlow } from './dynamicFlow/DynamicFlow';
 export { DynamicFlowWithRef, type DynamicFlowRef } from './dynamicFlow/DynamicFlowWithRef';
 export { findRendererPropsByType } from '@wise/dynamic-flow-client';

package/build/types/test-utils/index.d.ts

@@ -1,3 +1,4 @@
 export { default as NeptuneProviders } from './NeptuneProviders';
 export { renderWithProviders } from './rtl-utils';
+export { respondWith } from './respond-with';
 export { wait } from './wait';

package/build/types/test-utils/respond-with.d.ts

@@ -0,0 +1,2 @@
+export declare const respondWith: (data: unknown, init?: ResponseInit) => Promise<Response>;
+export declare const respondWithDelay: (data: unknown, delayMs: number, init?: ResponseInit) => Promise<Response>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -32,14 +32,14 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "4.1.3",
-    "@formatjs/cli": "^6.11.0",
-    "@storybook/addon-a11y": "^10.1.11",
-    "@storybook/addon-docs": "^10.1.11",
-    "@storybook/addon-links": "^10.1.11",
-    "@storybook/react-vite": "10.1.11",
+    "@formatjs/cli": "^6.12.0",
+    "@storybook/addon-a11y": "^10.2.0",
+    "@storybook/addon-docs": "^10.2.0",
+    "@storybook/addon-links": "^10.2.0",
+    "@storybook/react-vite": "10.2.0",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
-    "@testing-library/react": "16.3.1",
+    "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.6.1",
     "@transferwise/components": "^46.121.1",
     "@transferwise/formatting": "^2.13.4",
@@ -51,8 +51,8 @@
     "@wise/components-theming": "^1.10.0",
     "currency-flags": "4.0.7",
     "esbuild": "0.27.0",
-    "eslint-plugin-storybook": "10.1.11",
-    "framer-motion": "^12.26.2",
+    "eslint-plugin-storybook": "10.2.0",
+    "framer-motion": "^12.29.0",
     "npm-run-all2": "8.0.4",
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
@@ -60,18 +60,18 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-intl": "6.8.9",
-    "storybook": "^10.1.11",
+    "storybook": "^10.2.0",
     "stylelint": "16.26.1",
     "stylelint-config-standard": "36.0.1",
     "stylelint-no-unsupported-browser-features": "8.0.5",
-    "stylelint-value-no-unknown-custom-properties": "6.1.0",
+    "stylelint-value-no-unknown-custom-properties": "6.1.1",
     "tsx": "4.21.0",
     "typescript": "5.9.3",
-    "vitest": "4.0.17",
+    "vitest": "4.0.18",
     "vitest-fetch-mock": "0.4.5",
     "@wise/dynamic-flow-renderers": "0.0.0",
     "@wise/dynamic-flow-fixtures": "0.0.1",
-    "@wise/dynamic-flow-types": "4.4.0"
+    "@wise/dynamic-flow-types": "4.5.0"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.104.0",
@@ -82,11 +82,11 @@
     "@wise/components-theming": "^1.8.0",
     "react": "^18",
     "react-dom": "^18",
-    "react-intl": "^6"
+    "react-intl": "^6 || ^7"
   },
   "dependencies": {
-    "@wise/dynamic-flow-client": "5.3.0",
-    "@wise/dynamic-flow-types": "4.4.0"
+    "@wise/dynamic-flow-client": "5.4.0",
+    "@wise/dynamic-flow-types": "4.5.0"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3005",

package/build/types/dynamicFlow/useDynamicFlowWise.d.ts

@@ -1,3 +0,0 @@
-import { useDynamicFlow } from '@wise/dynamic-flow-client';
-import { DynamicFlowProps } from './DynamicFlowProps';
-export declare const useDynamicFlowWise: (props: DynamicFlowProps) => ReturnType<typeof useDynamicFlow>;