@wise/dynamic-flow-client-internal 5.1.2 → 5.2.0-exp-bits-29346f3

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

@@ -176,6 +176,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,11 +135,6 @@ __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");
-var import_dynamic_flow_client = require("@wise/dynamic-flow-client");
-
 // ../renderers/src/AlertRenderer.tsx
 var import_components = require("@transferwise/components");
 
@@ -3731,20 +3726,9 @@ 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_dynamic_flow_client = require("@wise/dynamic-flow-client");
+var import_react21 = require("react");
 
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
@@ -3782,83 +3766,11 @@ 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;
-  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 })) });
-});
+// src/dynamicFlow/useWiseHttpClient.tsx
+var import_react19 = require("react");
+var import_react_intl26 = require("react-intl");
 var useWiseHttpClient = (httpClient) => {
-  const { locale } = (0, import_react_intl27.useIntl)();
+  const { locale } = (0, import_react_intl26.useIntl)();
   return (0, import_react19.useCallback)(
     async (input, init = {}) => {
       const headers = new Headers(init.headers);
@@ -3879,6 +3791,69 @@ var handleRejection = (error) => {
   }
   throw error;
 };
+
+// src/dynamicFlow/useOnCopy.tsx
+var import_react20 = require("react");
+var import_react_intl28 = require("react-intl");
+
+// src/dynamicFlow/messages.ts
+var import_react_intl27 = require("react-intl");
+var messages_default = (0, import_react_intl27.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_intl28.useIntl)();
+  const createSnackBar = useSnackBarIfAvailable();
+  return (0, import_react20.useCallback)(
+    (copiedContent) => {
+      if (copiedContent) {
+        createSnackBar({ text: formatMessage(messages_default.copied) });
+      } else {
+        createSnackBar({ text: formatMessage(messages_default.copyFailed) });
+      }
+    },
+    [createSnackBar, formatMessage]
+  );
+};
+
+// src/dynamicFlow/useDynamicFlowWise.tsx
+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 +3864,35 @@ var openLinkInNewTab = (url) => {
   }
 };
 
+// src/dynamicFlow/DynamicFlow.tsx
+var import_jsx_runtime82 = require("react/jsx-runtime");
+var wiseRenderers = getWiseRenderers();
+function DynamicFlow(props) {
+  const { className = "" } = props;
+  const df = useDynamicFlowWise(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className, children: df.component });
+}
+
+// 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.getSubmittableValue()) != null ? _a : null;
+      },
+      validate: () => df.validate()
+    }),
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className, children: df.component });
+});
+
 // src/index.ts
 var import_dynamic_flow_client4 = require("@wise/dynamic-flow-client");
 

package/build/main.mjs

@@ -117,14 +117,6 @@ 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";
-
 // ../renderers/src/AlertRenderer.tsx
 import { Alert } from "@transferwise/components";
 
@@ -3725,20 +3717,9 @@ 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 { useDynamicFlow } from "@wise/dynamic-flow-client";
+import { useMemo as useMemo2 } from "react";
 
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
@@ -3776,81 +3757,9 @@ 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;
-  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) {
-  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) });
-    }
-  };
-  const coreProps = __spreadProps(__spreadValues({}, props), {
-    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 })) });
-});
+// src/dynamicFlow/useWiseHttpClient.tsx
+import { useCallback } from "react";
+import { useIntl as useIntl15 } from "react-intl";
 var useWiseHttpClient = (httpClient) => {
   const { locale } = useIntl15();
   return useCallback(
@@ -3873,6 +3782,69 @@ var handleRejection = (error) => {
   }
   throw error;
 };
+
+// src/dynamicFlow/useOnCopy.tsx
+import { useCallback as useCallback2 } from "react";
+import { useIntl as useIntl16 } 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 } = useIntl16();
+  const createSnackBar = useSnackBarIfAvailable();
+  return useCallback2(
+    (copiedContent) => {
+      if (copiedContent) {
+        createSnackBar({ text: formatMessage(messages_default.copied) });
+      } else {
+        createSnackBar({ text: formatMessage(messages_default.copyFailed) });
+      }
+    },
+    [createSnackBar, formatMessage]
+  );
+};
+
+// src/dynamicFlow/useDynamicFlowWise.tsx
+var useDynamicFlowWise = (props) => {
+  const {
+    customFetch = globalThis.fetch,
+    renderers,
+    displayStepTitle = true,
+    features = {},
+    onAnalytics,
+    onEvent,
+    onLog,
+    onLink = openLinkInNewTab
+  } = props;
+  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 = useOnCopy();
+  return useDynamicFlow(__spreadProps(__spreadValues({}, props), {
+    features: __spreadValues({ hideStepTitle: !displayStepTitle }, features),
+    httpClient,
+    renderers: mergedRenderers,
+    onEvent: trackEvent,
+    onLog: logEvent,
+    onLink,
+    onCopy
+  }));
+};
 var openLinkInNewTab = (url) => {
   var _a;
   try {
@@ -3883,6 +3855,38 @@ var openLinkInNewTab = (url) => {
   }
 };
 
+// src/dynamicFlow/DynamicFlow.tsx
+import { jsx as jsx82 } from "react/jsx-runtime";
+var wiseRenderers = getWiseRenderers();
+function DynamicFlow(props) {
+  const { className = "" } = props;
+  const df = useDynamicFlowWise(props);
+  return /* @__PURE__ */ jsx82("div", { className, children: df.component });
+}
+
+// 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.getSubmittableValue()) != null ? _a : null;
+      },
+      validate: () => df.validate()
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx83("div", { className, children: df.component });
+});
+
 // src/index.ts
 import { findRendererPropsByType } from "@wise/dynamic-flow-client";
 
@@ -4754,7 +4758,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,7 @@
-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 const wiseRenderers: import("@wise/dynamic-flow-types/renderers").Renderers;
 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 DynamicFormController 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.1.2",
+  "version": "5.2.0-exp-bits-29346f3",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -70,8 +70,8 @@
     "vitest": "4.0.16",
     "vitest-fetch-mock": "0.4.5",
     "@wise/dynamic-flow-fixtures": "0.0.1",
-    "@wise/dynamic-flow-types": "4.1.2",
-    "@wise/dynamic-flow-renderers": "0.0.0"
+    "@wise/dynamic-flow-renderers": "0.0.0",
+    "@wise/dynamic-flow-types": "4.2.0-exp-bits-29346f3"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.104.0",
@@ -85,8 +85,8 @@
     "react-intl": "^6"
   },
   "dependencies": {
-    "@wise/dynamic-flow-client": "5.1.2",
-    "@wise/dynamic-flow-types": "4.1.2"
+    "@wise/dynamic-flow-client": "5.2.0-exp-bits-29346f3",
+    "@wise/dynamic-flow-types": "4.2.0-exp-bits-29346f3"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3005",