@wise/dynamic-flow-client-internal 5.2.0 → 5.3.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,10 @@
 .tw-modal-body--scrollable .df-step-fixed__footer {
   bottom: -24px;
 }
+.df-modal .df-back-button {
+  position: fixed;
+  top: 24px;
+}
 .chips-container {
   overflow-x: auto;
 }

package/build/main.js

@@ -124,7 +124,7 @@ 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,
@@ -135,9 +135,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 var import_dynamic_flow_client3 = require("@wise/dynamic-flow-client");
 
-// src/dynamicFlow/DynamicFlow.tsx
-var import_react19 = require("react");
-var import_react_intl27 = require("react-intl");
+// src/dynamicFlow/useDynamicFlowWise.tsx
 var import_dynamic_flow_client = require("@wise/dynamic-flow-client");
 
 // ../renderers/src/AlertRenderer.tsx
@@ -3731,25 +3729,13 @@ var getWiseRenderers = () => [
   ReviewLegacyRenderer_default
 ];
 
-// src/dynamicFlow/messages.ts
-var import_react_intl26 = require("react-intl");
-var messages_default = (0, import_react_intl26.defineMessages)({
-  copied: {
-    id: "df.wise.CopyFeedback.copy",
-    defaultMessage: "Copied to clipboard",
-    description: "Appears in a snackbar when the copy operation succeeds."
-  },
-  copyFailed: {
-    id: "df.wise.CopyFeedback.copyFailed",
-    defaultMessage: "Failed to copy to clipboard",
-    description: "Appears in a snackbar when the copy operation fails."
-  }
-});
+// 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.2.0" : "0.0.0"
+  typeof process !== "undefined" ? "5.3.0" : "0.0.0"
 );
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
@@ -3782,84 +3768,47 @@ var getTrackEvent = (onEvent, 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 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)({
+  copied: {
+    id: "df.wise.CopyFeedback.copy",
+    defaultMessage: "Copied to clipboard",
+    description: "Appears in a snackbar when the copy operation succeeds."
+  },
+  copyFailed: {
+    id: "df.wise.CopyFeedback.copyFailed",
+    defaultMessage: "Failed to copy to clipboard",
+    description: "Appears in a snackbar when the copy operation fails."
+  }
+});
+
+// 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 +3828,35 @@ var handleRejection = (error) => {
   }
   throw error;
 };
+
+// src/dynamicFlow/useDynamicFlowWise.tsx
+var wiseRenderers = getWiseRenderers();
+var useDynamicFlowWise = (props) => {
+  const {
+    customFetch = globalThis.fetch,
+    renderers,
+    displayStepTitle = true,
+    features = {},
+    onAnalytics,
+    onEvent,
+    onLog,
+    onLink = openLinkInNewTab
+  } = props;
+  const httpClient = useWiseHttpClient(customFetch);
+  const mergedRenderers = (0, import_react21.useMemo)(() => [...renderers != null ? renderers : [], ...wiseRenderers], [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),
+    httpClient,
+    renderers: mergedRenderers,
+    onEvent: trackEvent,
+    onLog: logEvent,
+    onLink,
+    onCopy
+  }));
+};
 var openLinkInNewTab = (url) => {
   var _a;
   try {
@@ -3889,6 +3867,34 @@ var openLinkInNewTab = (url) => {
   }
 };
 
+// src/dynamicFlow/DynamicFlow.tsx
+var import_jsx_runtime82 = 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 });
+}
+
+// src/dynamicFlow/DynamicFlowWithRef.tsx
+var import_react22 = require("react");
+var import_jsx_runtime83 = require("react/jsx-runtime");
+var DynamicFlowWithRef = (0, import_react22.forwardRef)(function DynamicFlowWithRef2(props, ref) {
+  const { className = "" } = props;
+  const df = useDynamicFlowWise(props);
+  (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_runtime83.jsx)("div", { className, children: df.view });
+});
+
 // src/index.ts
 var import_dynamic_flow_client4 = require("@wise/dynamic-flow-client");
 

package/build/main.mjs

@@ -117,13 +117,8 @@ var require_classnames = __commonJS({
 // src/index.ts
 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";
+// src/dynamicFlow/useDynamicFlowWise.tsx
+import { useDynamicFlow } from "@wise/dynamic-flow-client";
 
 // ../renderers/src/AlertRenderer.tsx
 import { Alert } from "@transferwise/components";
@@ -3725,25 +3720,13 @@ var getWiseRenderers = () => [
   ReviewLegacyRenderer_default
 ];
 
-// src/dynamicFlow/messages.ts
-import { defineMessages as defineMessages12 } from "react-intl";
-var messages_default = defineMessages12({
-  copied: {
-    id: "df.wise.CopyFeedback.copy",
-    defaultMessage: "Copied to clipboard",
-    description: "Appears in a snackbar when the copy operation succeeds."
-  },
-  copyFailed: {
-    id: "df.wise.CopyFeedback.copyFailed",
-    defaultMessage: "Failed to copy to clipboard",
-    description: "Appears in a snackbar when the copy operation fails."
-  }
-});
+// 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.2.0" : "0.0.0"
+  typeof process !== "undefined" ? "5.3.0" : "0.0.0"
 );
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
@@ -3776,48 +3759,71 @@ var getTrackEvent = (onEvent, onAnalytics) => (name, properties) => {
   }
 };
 
-// src/dynamicFlow/DynamicFlow.tsx
-import { jsx as jsx82 } 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;
+// 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({
+  copied: {
+    id: "df.wise.CopyFeedback.copy",
+    defaultMessage: "Copied to clipboard",
+    description: "Appears in a snackbar when the copy operation succeeds."
+  },
+  copyFailed: {
+    id: "df.wise.CopyFeedback.copyFailed",
+    defaultMessage: "Failed to copy to clipboard",
+    description: "Appears in a snackbar when the copy operation fails."
+  }
+});
+
+// src/dynamicFlow/useOnCopy.tsx
+var useOnCopy = () => {
   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) });
-    }
-  };
-  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 useCallback(
+    (copiedContent) => {
+      if (copiedContent) {
+        createSnackBar({ text: formatMessage(messages_default.copied) });
+      } else {
+        createSnackBar({ text: formatMessage(messages_default.copyFailed) });
+      }
+    },
+    [createSnackBar, formatMessage]
+  );
+};
+
+// 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 handleRejection = (error) => {
+  if (error instanceof Error && error.message === "SCA_MODAL_CLOSED") {
+    return new Response(JSON.stringify({ validation: {} }), { status: 400 });
+  }
+  throw error;
+};
+
+// src/dynamicFlow/useDynamicFlowWise.tsx
+var wiseRenderers = getWiseRenderers();
+var useDynamicFlowWise = (props) => {
   const {
-    className = "",
     customFetch = globalThis.fetch,
     renderers,
     displayStepTitle = true,
@@ -3827,51 +3833,20 @@ var DynamicForm = forwardRef(function DynamicForm2(props, ref) {
     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) });
-    }
-  };
-  const coreProps = __spreadProps(__spreadValues({}, props), {
+  const onCopy = useOnCopy();
+  return useDynamicFlow(__spreadProps(__spreadValues({}, props), {
+    features: __spreadValues({ hideStepTitle: !displayStepTitle }, features),
     httpClient,
     renderers: mergedRenderers,
-    features: __spreadValues({ hideStepTitle: !displayStepTitle }, features),
     onEvent: trackEvent,
     onLog: logEvent,
     onLink,
     onCopy
-  });
-  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,6 +3858,37 @@ var openLinkInNewTab = (url) => {
   }
 };
 
+// src/dynamicFlow/DynamicFlow.tsx
+import { jsx as jsx82 } from "react/jsx-runtime";
+function DynamicFlow(props) {
+  const { className = "" } = props;
+  const df = useDynamicFlowWise(props);
+  return /* @__PURE__ */ jsx82("div", { className, children: df.view });
+}
+
+// src/dynamicFlow/DynamicFlowWithRef.tsx
+import {
+  forwardRef,
+  useImperativeHandle
+} from "react";
+import { jsx as jsx83 } from "react/jsx-runtime";
+var DynamicFlowWithRef = forwardRef(function DynamicFlowWithRef2(props, ref) {
+  const { className = "" } = props;
+  const df = useDynamicFlowWise(props);
+  useImperativeHandle(
+    ref,
+    () => ({
+      getValue: async () => {
+        var _a;
+        return (_a = await df.controller.getSubmittableValue()) != null ? _a : null;
+      },
+      validate: () => df.controller.validate()
+    }),
+    [df]
+  );
+  return /* @__PURE__ */ jsx83("div", { className, children: df.view });
+});
+
 // src/index.ts
 import { findRendererPropsByType } from "@wise/dynamic-flow-client";
 
@@ -4754,7 +4760,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 { DynamicFlowProps } from './DynamicFlowProps';
+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 {};

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

@@ -0,0 +1,11 @@
+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'> & {
+    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 { DynamicFlowProps } from './DynamicFlowProps';
+export type DynamicFlowWithRefProps = DynamicFlowProps & {
+    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/useDynamicFlowWise.d.ts

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

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/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 { DynamicFlowProps } from './dynamicFlow/DynamicFlowProps';
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "4.1.3",
-    "@formatjs/cli": "^6.9.0",
+    "@formatjs/cli": "^6.11.0",
     "@storybook/addon-a11y": "^10.1.11",
     "@storybook/addon-docs": "^10.1.11",
     "@storybook/addon-links": "^10.1.11",
@@ -41,18 +41,18 @@
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.1",
     "@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",
+    "framer-motion": "^12.26.2",
     "npm-run-all2": "8.0.4",
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
@@ -67,11 +67,11 @@
     "stylelint-value-no-unknown-custom-properties": "6.1.0",
     "tsx": "4.21.0",
     "typescript": "5.9.3",
-    "vitest": "4.0.16",
+    "vitest": "4.0.17",
     "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.4.0"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.104.0",
@@ -85,8 +85,8 @@
     "react-intl": "^6"
   },
   "dependencies": {
-    "@wise/dynamic-flow-client": "5.2.0",
-    "@wise/dynamic-flow-types": "4.3.0"
+    "@wise/dynamic-flow-client": "5.3.0",
+    "@wise/dynamic-flow-types": "4.4.0"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3005",