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

package/README.md

@@ -235,51 +235,6 @@ onLog={(level, message, extra) => {
 }}
 ```
 
-## DynamicForm Component
-
-If you need to get the submittable data outside of a submission, you can use the `DynamicForm` component. This will give you access to two methods: `getValue` and `validate` via a [ref](https://react.dev/reference/react/useRef). For example:
-
-```tsx
-import type { DynamicFormController } from '@wise/dynamic-flow-client-internal';
-import { DynamicForm } from '@wise/dynamic-flow-client-internal';
-import { useRef } from 'react';
-
-function DynamicFlowWithRef() {
-  const ref = useRef<DynamicFormController>(null);
-
-  return (
-    <div>
-      <DynamicForm
-          ref={ref}
-          flowId={"id"}
-          customFetch={fetch}
-          initialStep={myStep}
-          onValueChange={ async () => {
-              const value = (await ref.current?.getValue()) ?? null;
-              console.log('Value changed to', JSON.stringify(value));
-          }}
-          onCompletion={(error) => console.error(error)}
-          onCompletion={() => console.log('Completed')}
-      />
-      <Button
-        onClick={ async () => {
-          // This will get the value, whether or not the form is valid
-          const value = (await ref.current?.getValue()) ?? null;
-
-          // This will trigger validation of the form and show any validation messages to the user.
-          // The response is a boolean indicating whether or not the form is valid.
-          const isValid = ref.current?.validate();
-
-          // Whatever you want to do with value
-        }}
-      >
-        Log value
-      </Button>
-    </div>
-  );
-}
-```
-
 ## Contributing
 
 We love contributions! Check out `CONTRIBUTING.md` for more information.

package/build/main.css

@@ -14,7 +14,11 @@
 .df-box-renderer-width-lg {
   width: 100%;
 }
-@media screen and (width >= 768px) {
+@media screen and (width >=768px) {
+  .df-box-renderer-border {
+    padding: var(--size-24);
+  }
+
   .df-box-renderer-width-xs {
     width: 33.33%;
   }
@@ -31,7 +35,7 @@
     width: 83.33%;
   }
 }
-@media screen and (width >= 990px) {
+@media screen and (width >=990px) {
   .df-box-renderer-width-xs {
     width: 25%;
   }
@@ -176,6 +180,16 @@
 .tw-modal-body--scrollable .df-step-fixed__footer {
   bottom: -24px;
 }
+.df-modal .df-back-button {
+  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

@@ -124,21 +124,77 @@ var require_classnames = __commonJS({
 var index_exports = {};
 __export(index_exports, {
   DynamicFlow: () => DynamicFlow,
-  DynamicForm: () => DynamicForm,
+  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_client3 = require("@wise/dynamic-flow-client");
+var import_dynamic_flow_client6 = require("@wise/dynamic-flow-client");
 
 // src/dynamicFlow/DynamicFlow.tsx
-var import_react19 = require("react");
-var import_react_intl27 = require("react-intl");
+var import_dynamic_flow_client3 = require("@wise/dynamic-flow-client");
+
+// 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");
@@ -1149,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
   );
 }
 
@@ -3512,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,
@@ -3731,6 +3788,36 @@ var getWiseRenderers = () => [
   ReviewLegacyRenderer_default
 ];
 
+// ../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
+        }
+      );
+    }
+  };
+};
+
+// src/dynamicFlow/useOnCopy.tsx
+var import_react19 = require("react");
+var import_react_intl27 = require("react-intl");
+
 // src/dynamicFlow/messages.ts
 var import_react_intl26 = require("react-intl");
 var messages_default = (0, import_react_intl26.defineMessages)({
@@ -3746,120 +3833,28 @@ var messages_default = (0, import_react_intl26.defineMessages)({
   }
 });
 
-// src/dynamicFlow/telemetry/app-version.ts
-var appVersion = (
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "5.2.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 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/DynamicFlow.tsx
-var import_jsx_runtime82 = require("react/jsx-runtime");
-var wiseRenderers = getWiseRenderers();
-function DynamicFlow(props) {
-  const {
-    className = "",
-    customFetch = globalThis.fetch,
-    renderers,
-    displayStepTitle = true,
-    features = {},
-    onAnalytics,
-    onEvent,
-    onLog,
-    onLink = openLinkInNewTab
-  } = props;
-  const { formatMessage } = (0, import_react_intl27.useIntl)();
-  const createSnackBar = useSnackBarIfAvailable();
-  const httpClient = useWiseHttpClient(customFetch);
-  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), [onEvent, onAnalytics]);
-  const onCopy = (copiedContent) => {
-    if (copiedContent) {
-      createSnackBar({ text: formatMessage(messages_default.copied) });
-    } else {
-      createSnackBar({ text: formatMessage(messages_default.copyFailed) });
-    }
-  };
-  const coreProps = __spreadProps(__spreadValues({}, props), {
-    features: __spreadValues({ hideStepTitle: !displayStepTitle }, features),
-    httpClient,
-    renderers: mergedRenderers,
-    onEvent: trackEvent,
-    onLog: logEvent,
-    onLink,
-    onCopy
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_dynamic_flow_client.DynamicFlow, __spreadValues({}, coreProps)) });
-}
-var DynamicForm = (0, import_react19.forwardRef)(function DynamicForm2(props, ref) {
-  const {
-    className = "",
-    customFetch = globalThis.fetch,
-    renderers,
-    displayStepTitle = true,
-    features = {},
-    onAnalytics,
-    onEvent,
-    onLog,
-    onLink = openLinkInNewTab
-  } = props;
+// src/dynamicFlow/useOnCopy.tsx
+var useOnCopy = () => {
   const { formatMessage } = (0, import_react_intl27.useIntl)();
   const createSnackBar = useSnackBarIfAvailable();
-  const httpClient = useWiseHttpClient(customFetch);
-  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), [onEvent, onAnalytics]);
-  const onCopy = (copiedContent) => {
-    if (copiedContent) {
-      createSnackBar({ text: formatMessage(messages_default.copied) });
-    } else {
-      createSnackBar({ text: formatMessage(messages_default.copyFailed) });
-    }
-  };
-  const coreProps = __spreadProps(__spreadValues({}, props), {
-    httpClient,
-    renderers: mergedRenderers,
-    features: __spreadValues({ hideStepTitle: !displayStepTitle }, features),
-    onEvent: trackEvent,
-    onLog: logEvent,
-    onLink,
-    onCopy
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_dynamic_flow_client.DynamicForm, __spreadProps(__spreadValues({}, coreProps), { ref })) });
-});
-var useWiseHttpClient = (httpClient) => {
-  const { locale } = (0, import_react_intl27.useIntl)();
   return (0, import_react19.useCallback)(
+    (copiedContent) => {
+      if (copiedContent) {
+        createSnackBar({ text: formatMessage(messages_default.copied) });
+      } else {
+        createSnackBar({ text: formatMessage(messages_default.copyFailed) });
+      }
+    },
+    [createSnackBar, formatMessage]
+  );
+};
+
+// src/dynamicFlow/useWiseHttpClient.tsx
+var import_react20 = require("react");
+var import_react_intl28 = require("react-intl");
+var useWiseHttpClient = (httpClient) => {
+  const { locale } = (0, import_react_intl28.useIntl)();
+  return (0, import_react20.useCallback)(
     async (input, init = {}) => {
       const headers = new Headers(init.headers);
       headers.set("accept-language", locale);
@@ -3879,6 +3874,80 @@ var handleRejection = (error) => {
   }
   throw error;
 };
+
+// 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 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 {
+    displayStepTitle = true,
+    features = {},
+    customFetch = globalThis.fetch,
+    renderers,
+    onAnalytics,
+    onEvent,
+    onLink = openLinkInNewTab,
+    onLog
+  } = props;
+  const httpClient = useWiseHttpClient(customFetch);
+  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 __spreadProps(__spreadValues({}, props), {
+    httpClient,
+    features: __spreadValues({ hideStepTitle: !displayStepTitle }, features),
+    renderers: mergedRenderers,
+    onEvent: trackEvent,
+    onLog: logEvent,
+    onCopy,
+    onLink
+  });
+};
 var openLinkInNewTab = (url) => {
   var _a;
   try {
@@ -3889,16 +3958,47 @@ var openLinkInNewTab = (url) => {
   }
 };
 
-// src/index.ts
+// src/dynamicFlow/DynamicFlow.tsx
+var import_jsx_runtime85 = require("react/jsx-runtime");
+function DynamicFlow(props) {
+  const { className = "" } = props;
+  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_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 dfProps = useWiseToCoreProps(props);
+  const df = (0, import_dynamic_flow_client4.useDynamicFlow)(dfProps);
+  (0, import_react22.useImperativeHandle)(
+    ref,
+    () => ({
+      getValue: async () => {
+        var _a;
+        return (_a = await df.controller.getSubmittableValue()) != null ? _a : null;
+      },
+      validate: () => df.controller.validate()
+    }),
+    [df]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className, children: df.view });
+});
 
-// src/dynamicFlow/renderers.ts
+// src/index.ts
+var import_dynamic_flow_client7 = require("@wise/dynamic-flow-client");
+
+// 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 = {
@@ -4751,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

@@ -118,12 +118,65 @@ var require_classnames = __commonJS({
 import { makeHttpClient } from "@wise/dynamic-flow-client";
 
 // src/dynamicFlow/DynamicFlow.tsx
-import { forwardRef, useCallback, useMemo as useMemo2 } from "react";
-import { useIntl as useIntl15 } from "react-intl";
-import {
-  DynamicFlow as DynamicFlowCore,
-  DynamicForm as DynamicFormCore
-} from "@wise/dynamic-flow-client";
+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";
@@ -1134,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
   );
 }
 
@@ -3506,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,
@@ -3725,6 +3779,36 @@ var getWiseRenderers = () => [
   ReviewLegacyRenderer_default
 ];
 
+// ../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
+        }
+      );
+    }
+  };
+};
+
+// src/dynamicFlow/useOnCopy.tsx
+import { useCallback } from "react";
+import { useIntl as useIntl15 } from "react-intl";
+
 // src/dynamicFlow/messages.ts
 import { defineMessages as defineMessages12 } from "react-intl";
 var messages_default = defineMessages12({
@@ -3740,138 +3824,120 @@ var messages_default = defineMessages12({
   }
 });
 
-// src/dynamicFlow/telemetry/app-version.ts
-var appVersion = (
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "5.2.0" : "0.0.0"
-);
+// src/dynamicFlow/useOnCopy.tsx
+var useOnCopy = () => {
+  const { formatMessage } = useIntl15();
+  const createSnackBar = useSnackBarIfAvailable();
+  return useCallback(
+    (copiedContent) => {
+      if (copiedContent) {
+        createSnackBar({ text: formatMessage(messages_default.copied) });
+      } else {
+        createSnackBar({ text: formatMessage(messages_default.copyFailed) });
+      }
+    },
+    [createSnackBar, formatMessage]
+  );
+};
 
-// 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);
-    }
-  }
+// src/dynamicFlow/useWiseHttpClient.tsx
+import { useCallback as useCallback2 } from "react";
+import { useIntl as useIntl16 } from "react-intl";
+var useWiseHttpClient = (httpClient) => {
+  const { locale } = useIntl16();
+  return useCallback2(
+    async (input, init = {}) => {
+      const headers = new Headers(init.headers);
+      headers.set("accept-language", locale);
+      const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone || void 0;
+      if (timeZone) {
+        headers.set("time-zone", timeZone);
+      }
+      const requestInit = __spreadProps(__spreadValues({}, init), { credentials: "include", headers });
+      return httpClient(input, requestInit).catch(handleRejection);
+    },
+    [httpClient, locale]
+  );
 };
-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);
+var handleRejection = (error) => {
+  if (error instanceof Error && error.message === "SCA_MODAL_CLOSED") {
+    return new Response(JSON.stringify({ validation: {} }), { status: 400 });
   }
+  throw 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/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/DynamicFlow.tsx
-import { jsx as jsx82 } from "react/jsx-runtime";
+// src/dynamicFlow/getMergedRenderers.tsx
+import { jsx as jsx84 } from "react/jsx-runtime";
 var wiseRenderers = getWiseRenderers();
-function DynamicFlow(props) {
-  const {
-    className = "",
-    customFetch = globalThis.fetch,
-    renderers,
-    displayStepTitle = true,
-    features = {},
-    onAnalytics,
-    onEvent,
-    onLog,
-    onLink = openLinkInNewTab
-  } = props;
-  const { formatMessage } = useIntl15();
-  const createSnackBar = useSnackBarIfAvailable();
-  const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = useMemo2(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
-  const logEvent = useMemo2(() => getLogEvent(onLog), [onLog]);
-  const trackEvent = useMemo2(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
-  const onCopy = (copiedContent) => {
-    if (copiedContent) {
-      createSnackBar({ text: formatMessage(messages_default.copied) });
-    } else {
-      createSnackBar({ text: formatMessage(messages_default.copyFailed) });
+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
+        })
+      );
     }
-  };
-  const coreProps = __spreadProps(__spreadValues({}, props), {
-    features: __spreadValues({ hideStepTitle: !displayStepTitle }, features),
-    httpClient,
-    renderers: mergedRenderers,
-    onEvent: trackEvent,
-    onLog: logEvent,
-    onLink,
-    onCopy
   });
-  return /* @__PURE__ */ jsx82("div", { className, children: /* @__PURE__ */ jsx82(DynamicFlowCore, __spreadValues({}, coreProps)) });
-}
-var DynamicForm = forwardRef(function DynamicForm2(props, ref) {
+  return [...(_d = props.renderers) != null ? _d : [], subflowRenderer, ...wiseRenderers];
+};
+
+// src/dynamicFlow/useWiseToCoreProps.tsx
+var useWiseToCoreProps = (props) => {
   const {
-    className = "",
-    customFetch = globalThis.fetch,
-    renderers,
     displayStepTitle = true,
     features = {},
+    customFetch = globalThis.fetch,
+    renderers,
     onAnalytics,
     onEvent,
-    onLog,
-    onLink = openLinkInNewTab
+    onLink = openLinkInNewTab,
+    onLog
   } = props;
-  const { formatMessage } = useIntl15();
-  const createSnackBar = useSnackBarIfAvailable();
   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 = (copiedContent) => {
-    if (copiedContent) {
-      createSnackBar({ text: formatMessage(messages_default.copied) });
-    } else {
-      createSnackBar({ text: formatMessage(messages_default.copyFailed) });
-    }
-  };
-  const coreProps = __spreadProps(__spreadValues({}, props), {
+  const onCopy = useOnCopy();
+  return __spreadProps(__spreadValues({}, props), {
     httpClient,
-    renderers: mergedRenderers,
     features: __spreadValues({ hideStepTitle: !displayStepTitle }, features),
+    renderers: mergedRenderers,
     onEvent: trackEvent,
     onLog: logEvent,
-    onLink,
-    onCopy
+    onCopy,
+    onLink
   });
-  return /* @__PURE__ */ jsx82("div", { className, children: /* @__PURE__ */ jsx82(DynamicFormCore, __spreadProps(__spreadValues({}, coreProps), { ref })) });
-});
-var useWiseHttpClient = (httpClient) => {
-  const { locale } = useIntl15();
-  return useCallback(
-    async (input, init = {}) => {
-      const headers = new Headers(init.headers);
-      headers.set("accept-language", locale);
-      const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone || void 0;
-      if (timeZone) {
-        headers.set("time-zone", timeZone);
-      }
-      const requestInit = __spreadProps(__spreadValues({}, init), { credentials: "include", headers });
-      return httpClient(input, requestInit).catch(handleRejection);
-    },
-    [httpClient, locale]
-  );
-};
-var handleRejection = (error) => {
-  if (error instanceof Error && error.message === "SCA_MODAL_CLOSED") {
-    return new Response(JSON.stringify({ validation: {} }), { status: 400 });
-  }
-  throw error;
 };
 var openLinkInNewTab = (url) => {
   var _a;
@@ -3883,10 +3949,44 @@ var openLinkInNewTab = (url) => {
   }
 };
 
+// src/dynamicFlow/DynamicFlow.tsx
+import { jsx as jsx85 } from "react/jsx-runtime";
+function DynamicFlow(props) {
+  const { className = "" } = props;
+  const dfProps = useWiseToCoreProps(props);
+  const df = useDynamicFlow(dfProps);
+  return /* @__PURE__ */ jsx85("div", { className, children: df.view });
+}
+
+// src/dynamicFlow/DynamicFlowWithRef.tsx
+import {
+  forwardRef,
+  useImperativeHandle
+} from "react";
+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 dfProps = useWiseToCoreProps(props);
+  const df = useDynamicFlow2(dfProps);
+  useImperativeHandle(
+    ref,
+    () => ({
+      getValue: async () => {
+        var _a;
+        return (_a = await df.controller.getSubmittableValue()) != null ? _a : null;
+      },
+      validate: () => df.controller.validate()
+    }),
+    [df]
+  );
+  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;
@@ -4754,7 +4854,7 @@ var translations = languages.reduce(
 var i18n_default = translations;
 export {
   DynamicFlow,
-  DynamicForm,
+  DynamicFlowWithRef,
   Header11 as Header,
   Media2 as Media,
   findRendererPropsByType,

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

@@ -1,27 +1,6 @@
-import type { ForwardRefExoticComponent, RefAttributes } from 'react';
-import type { DynamicFlowProps as DynamicFlowCoreProps, DynamicFormController } from '@wise/dynamic-flow-client';
-type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
-type Prettify<T> = {
+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 type DynamicFlowProps = Prettify<MakeOptional<Omit<DynamicFlowCoreProps, 'httpClient'>, 'renderers' | 'onLink'> & {
-    className?: string;
-    /**
-     * @deprecated Use `features` prop with `hideStepTitle` instead.
-     */
-    displayStepTitle?: boolean;
-    customFetch?: DynamicFlowCoreProps['httpClient'];
-    onAnalytics?: DynamicFlowCoreProps['onEvent'];
-}>;
-export declare function DynamicFlow(props: DynamicFlowProps): import("react/jsx-runtime").JSX.Element;
-export type DynamicFormProps = Omit<DynamicFlowProps, 'onCompletion'> & {
-    onValueChange?: () => void;
-    onCompletion?: DynamicFlowProps['onCompletion'];
-};
-/**
- * DynamicForm is like DynamicFlow, but it also accepts a ForwardedRef.
- * This ref conforms to the DynamicFormController type, containing two functions: `getValue` and `validate`.
- * @experimental This component may be changed in the future without notice.
- */
-export declare const DynamicForm: ForwardRefExoticComponent<DynamicFormProps & RefAttributes<DynamicFormController>>;
-export {};
+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/DynamicFlowWiseProps.d.ts

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

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

@@ -0,0 +1,22 @@
+import { JsonElement } from '@wise/dynamic-flow-types/spec';
+import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
+import type { DynamicFlowWiseProps } from './DynamicFlowWiseProps';
+export type DynamicFlowWithRefProps = DynamicFlowWiseProps & {
+    onValueChange?: () => void;
+};
+export type DynamicFlowRef = {
+    /**
+     * Returns the current value of the form, even if it doesn't pass validation.
+     */
+    getValue: () => Promise<JsonElement>;
+    /**
+     * triggers validation in every UI component and returns whether or not the current value is valid.
+     */
+    validate: () => boolean;
+};
+/**
+ * DynamicFlowWithRef is like DynamicFlow, but it also accepts a ForwardedRef.
+ * This ref conforms to the DynamicFlowRef type, containing two functions: `getValue` and `validate`.
+ * @experimental This component may be changed in the future without notice.
+ */
+export declare const DynamicFlowWithRef: ForwardRefExoticComponent<DynamicFlowWithRefProps & RefAttributes<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/useOnCopy.d.ts

@@ -0,0 +1 @@
+export declare const useOnCopy: () => (copiedContent: string | null) => void;

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

@@ -0,0 +1 @@
+export declare const useWiseHttpClient: (httpClient: typeof globalThis.fetch) => typeof globalThis.fetch;

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,7 +1,7 @@
 export { makeHttpClient as makeCustomFetch } from '@wise/dynamic-flow-client';
-export type { DynamicFormController } from '@wise/dynamic-flow-client';
-export type { DynamicFlowProps } from './dynamicFlow/DynamicFlow';
-export { DynamicFlow, DynamicForm } from './dynamicFlow/DynamicFlow';
+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';
-export { Header, Media, getMargin } from './dynamicFlow/renderers';
+export { getMargin, Header, Media } from './dynamicFlow/renderers';
 export { default as translations } from './i18n';

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.2.0",
+  "version": "5.4.0",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -32,27 +32,27 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "4.1.3",
-    "@formatjs/cli": "^6.9.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.118.0",
+    "@transferwise/components": "^46.121.1",
     "@transferwise/formatting": "^2.13.4",
-    "@transferwise/icons": "4.0.1",
-    "@transferwise/neptune-css": "14.26.0",
+    "@transferwise/icons": "4.0.2",
+    "@transferwise/neptune-css": "14.26.1",
     "@types/react": "18.3.27",
     "@types/react-dom": "18.3.7",
-    "@wise/art": "2.25.0",
-    "@wise/components-theming": "^1.9.1",
+    "@wise/art": "2.26.0",
+    "@wise/components-theming": "^1.10.0",
     "currency-flags": "4.0.7",
     "esbuild": "0.27.0",
-    "eslint-plugin-storybook": "10.1.11",
-    "framer-motion": "^12.23.26",
+    "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.16",
+    "vitest": "4.0.18",
     "vitest-fetch-mock": "0.4.5",
-    "@wise/dynamic-flow-fixtures": "0.0.1",
     "@wise/dynamic-flow-renderers": "0.0.0",
-    "@wise/dynamic-flow-types": "4.3.0"
+    "@wise/dynamic-flow-fixtures": "0.0.1",
+    "@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.2.0",
-    "@wise/dynamic-flow-types": "4.3.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",