@wise/dynamic-flow-client-internal 5.8.0 → 5.9.0-experimental-rendererprops-9c9a4b8

package/build/main.js

@@ -127,16 +127,18 @@ __export(index_exports, {
   DynamicFlowWithRef: () => DynamicFlowWithRef,
   Header: () => Header11,
   Media: () => Media2,
-  findRendererPropsByType: () => import_dynamic_flow_client7.findRendererPropsByType,
+  findRendererPropsByType: () => import_dynamic_flow_client5.findRendererPropsByType,
   getMargin: () => getMargin2,
-  makeCustomFetch: () => import_dynamic_flow_client6.makeHttpClient,
-  translations: () => i18n_default
+  makeCustomFetch: () => import_dynamic_flow_client4.makeHttpClient,
+  translations: () => i18n_default,
+  useDynamicFlowModalWise: () => useDynamicFlowModalWise,
+  useDynamicFlowWise: () => useDynamicFlowWise
 });
 module.exports = __toCommonJS(index_exports);
-var import_dynamic_flow_client6 = require("@wise/dynamic-flow-client");
+var import_dynamic_flow_client4 = require("@wise/dynamic-flow-client");
 
-// src/dynamicFlow/DynamicFlow.tsx
-var import_dynamic_flow_client3 = require("@wise/dynamic-flow-client");
+// src/dynamicFlow/useDynamicFlowWise.tsx
+var import_dynamic_flow_client2 = require("@wise/dynamic-flow-client");
 
 // src/dynamicFlow/useWiseToCoreProps.tsx
 var import_react22 = require("react");
@@ -144,7 +146,7 @@ var import_react22 = require("react");
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "5.8.0" : "0.0.0"
+  typeof process !== "undefined" ? "5.8.1" : "0.0.0"
 );
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
@@ -2902,6 +2904,12 @@ function SearchResultContent({
       return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ErrorResult, { state });
     case "results":
       return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(SearchResults, { state, trackEvent });
+    case "layout":
+      return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
+        " ",
+        state.layout,
+        " "
+      ] });
     case "noResults":
       return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(EmptySearchResult, { state });
     case "pending":
@@ -3008,6 +3016,9 @@ function mapResultToTypeaheadOption(result) {
 }
 function TypeaheadFooter({ state, isLoading }) {
   const { formatMessage } = (0, import_react_intl23.useIntl)();
+  if (state.type === "layout") {
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "m-x-1 m-y-1", children: state.layout });
+  }
   if (state.type === "noResults") {
     return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_components45.Markdown, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: state.message });
   }
@@ -3999,8 +4010,24 @@ var getWiseRenderers = () => [
   ReviewLegacyRenderer_default
 ];
 
-// ../renderers/src/subflow/getSubflowRenderer.tsx
+// ../renderers/src/InitialLoadingStateRenderer.tsx
+var import_components61 = require("@transferwise/components");
 var import_jsx_runtime86 = require("react/jsx-runtime");
+var InitialLoadingStateRenderer = {
+  canRenderType: "loading-state",
+  canRender: ({ stepLoadingState }) => stepLoadingState === "initial",
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+    import_components61.Loader,
+    {
+      size: "md",
+      classNames: { "tw-loader": `tw-loader m-x-auto ${getMargin("md")}` },
+      "data-testid": "loading-state"
+    }
+  )
+};
+
+// ../renderers/src/subflow/getSubflowRenderer.tsx
+var import_jsx_runtime87 = require("react/jsx-runtime");
 var getSubflowRenderer = ({
   Component: Component2,
   canRender
@@ -4009,7 +4036,7 @@ var getSubflowRenderer = ({
     canRenderType: "subflow",
     canRender,
     render: (props) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
         Component2,
         {
           presentation: props.presentation,
@@ -4087,29 +4114,27 @@ var handleRejection = (error) => {
 };
 
 // src/dynamicFlow/DynamicFlowModal.tsx
-var import_dynamic_flow_client2 = require("@wise/dynamic-flow-client");
-var import_components61 = require("@transferwise/components");
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_components62 = require("@transferwise/components");
+var import_jsx_runtime88 = 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_runtime87.jsx)(
-    import_components61.Modal,
+  const df = useDynamicFlowModalWise(rest);
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+    import_components62.Modal,
     __spreadProps(__spreadValues({
       className: `dynamic-flow-modal ${className}`,
       disableDimmerClickToClose: true
     }, df.modal), {
-      body: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "dynamic-flow-modal", children: df.modal.body })
+      body: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "dynamic-flow-modal", children: df.modal.body })
     })
   );
 }
 
 // src/dynamicFlow/getMergedRenderers.tsx
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 var wiseRenderers = getWiseRenderers();
 var getMergedRenderers = (props) => {
-  var _d;
+  var _d, _e;
   const _a = props, { initialAction, initialStep } = _a, restProps = __objRest(_a, ["initialAction", "initialStep"]);
   const subflowFeatures = __spreadProps(__spreadValues({}, props.features), { nativeBack: true });
   const subflowRenderer = getSubflowRenderer({
@@ -4120,7 +4145,7 @@ var getMergedRenderers = (props) => {
         method: initialRequest.method,
         data: initialRequest.body
       };
-      return presentation.type === "push" ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(DynamicFlow, __spreadProps(__spreadValues(__spreadValues({}, restProps), rest), { features: subflowFeatures, initialAction: action })) : /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      return presentation.type === "push" ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(DynamicFlow, __spreadProps(__spreadValues(__spreadValues({}, restProps), rest), { features: subflowFeatures, initialAction: action })) : /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
         DynamicFlowModal,
         __spreadProps(__spreadValues(__spreadValues({}, restProps), rest), {
           features: subflowFeatures,
@@ -4129,7 +4154,8 @@ var getMergedRenderers = (props) => {
       );
     }
   });
-  return [...(_d = props.renderers) != null ? _d : [], subflowRenderer, ...wiseRenderers];
+  const loadingStateRenderer = ((_d = props.features) == null ? void 0 : _d.initialLoader) ? [InitialLoadingStateRenderer] : [];
+  return [...(_e = props.renderers) != null ? _e : [], subflowRenderer, ...loadingStateRenderer, ...wiseRenderers];
 };
 
 // src/dynamicFlow/useWiseToCoreProps.tsx
@@ -4169,23 +4195,30 @@ var openLinkInNewTab = (url) => {
   }
 };
 
+// src/dynamicFlow/useDynamicFlowWise.tsx
+var useDynamicFlowWise = (props) => {
+  const dfProps = useWiseToCoreProps(props);
+  return (0, import_dynamic_flow_client2.useDynamicFlow)(dfProps);
+};
+var useDynamicFlowModalWise = (props) => {
+  const dfProps = useWiseToCoreProps(props);
+  return (0, import_dynamic_flow_client2.useDynamicFlowModal)(dfProps);
+};
+
 // src/dynamicFlow/DynamicFlow.tsx
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_jsx_runtime90 = 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_runtime89.jsx)("div", { className, children: df.view });
+  const df = useDynamicFlowWise(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className, children: df.view });
 }
 
 // src/dynamicFlow/DynamicFlowWithRef.tsx
 var import_react23 = require("react");
-var import_dynamic_flow_client4 = require("@wise/dynamic-flow-client");
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 var DynamicFlowWithRef = (0, import_react23.forwardRef)(function DynamicFlowWithRef2(props, ref) {
   const { className = "" } = props;
-  const dfProps = useWiseToCoreProps(props);
-  const df = (0, import_dynamic_flow_client4.useDynamicFlow)(dfProps);
+  const df = useDynamicFlowWise(props);
   (0, import_react23.useImperativeHandle)(
     ref,
     () => ({
@@ -4197,11 +4230,11 @@ var DynamicFlowWithRef = (0, import_react23.forwardRef)(function DynamicFlowWith
     }),
     [df]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className, children: df.view });
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className, children: df.view });
 });
 
 // src/index.ts
-var import_dynamic_flow_client7 = require("@wise/dynamic-flow-client");
+var import_dynamic_flow_client5 = require("@wise/dynamic-flow-client");
 
 // src/dynamicFlow/renderers.tsx
 var Header11 = Header5;
@@ -4209,7 +4242,7 @@ var Media2 = Media;
 var getMargin2 = getMargin;
 
 // src/i18n/index.ts
-var import_dynamic_flow_client5 = require("@wise/dynamic-flow-client");
+var import_dynamic_flow_client3 = require("@wise/dynamic-flow-client");
 
 // src/i18n/cs.json
 var cs_default = {
@@ -5062,10 +5095,10 @@ var wiseTranslations = {
   "zh-HK": zh_HK_default
 };
 var languages = Array.from(
-  /* @__PURE__ */ new Set([...Object.keys(import_dynamic_flow_client5.translations), ...Object.keys(wiseTranslations)])
+  /* @__PURE__ */ new Set([...Object.keys(import_dynamic_flow_client3.translations), ...Object.keys(wiseTranslations)])
 );
 var translations = languages.reduce(
-  (acc, lang) => __spreadProps(__spreadValues({}, acc), { [lang]: __spreadValues(__spreadValues({}, import_dynamic_flow_client5.translations[lang]), wiseTranslations[lang]) }),
+  (acc, lang) => __spreadProps(__spreadValues({}, acc), { [lang]: __spreadValues(__spreadValues({}, import_dynamic_flow_client3.translations[lang]), wiseTranslations[lang]) }),
   {}
 );
 var i18n_default = translations;

package/build/main.mjs

@@ -117,8 +117,8 @@ var require_classnames = __commonJS({
 // src/index.ts
 import { makeHttpClient } from "@wise/dynamic-flow-client";
 
-// src/dynamicFlow/DynamicFlow.tsx
-import { useDynamicFlow } from "@wise/dynamic-flow-client";
+// src/dynamicFlow/useDynamicFlowWise.tsx
+import { useDynamicFlow, useDynamicFlowModal } from "@wise/dynamic-flow-client";
 
 // src/dynamicFlow/useWiseToCoreProps.tsx
 import { useMemo as useMemo2 } from "react";
@@ -126,7 +126,7 @@ 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.8.0" : "0.0.0"
+  typeof process !== "undefined" ? "5.8.1" : "0.0.0"
 );
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
@@ -2792,13 +2792,7 @@ var getHelpControl = (help, ariaLabel, onClick) => {
 var ReviewRenderer_default = ReviewRenderer2;
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
-import {
-  Input as Input4,
-  InputGroup as InputGroup3,
-  List,
-  ListItem as ListItem10,
-  Markdown as Markdown5
-} from "@transferwise/components";
+import { Input as Input4, InputGroup as InputGroup3, List, ListItem as ListItem10, Markdown as Markdown5 } from "@transferwise/components";
 import { useState as useState9 } from "react";
 import { useIntl as useIntl12 } from "react-intl";
 
@@ -2849,7 +2843,7 @@ function ErrorResult({ state }) {
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
 import { Search } from "@transferwise/icons";
-import { jsx as jsx64, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx64, jsxs as jsxs17 } from "react/jsx-runtime";
 function BlockSearchRendererComponent({
   id,
   hint,
@@ -2893,6 +2887,12 @@ function SearchResultContent({
       return /* @__PURE__ */ jsx64(ErrorResult, { state });
     case "results":
       return /* @__PURE__ */ jsx64(SearchResults, { state, trackEvent });
+    case "layout":
+      return /* @__PURE__ */ jsxs17(Fragment7, { children: [
+        " ",
+        state.layout,
+        " "
+      ] });
     case "noResults":
       return /* @__PURE__ */ jsx64(EmptySearchResult, { state });
     case "pending":
@@ -2999,6 +2999,9 @@ function mapResultToTypeaheadOption(result) {
 }
 function TypeaheadFooter({ state, isLoading }) {
   const { formatMessage } = useIntl13();
+  if (state.type === "layout") {
+    return /* @__PURE__ */ jsx65("div", { className: "m-x-1 m-y-1", children: state.layout });
+  }
   if (state.type === "noResults") {
     return /* @__PURE__ */ jsx65(Markdown6, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: state.message });
   }
@@ -3059,7 +3062,7 @@ var SectionRenderer_default = SectionRenderer;
 
 // ../renderers/src/SelectInputRenderer/RadioInputRendererComponent.tsx
 import { RadioGroup } from "@transferwise/components";
-import { Fragment as Fragment7, jsx as jsx68, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx68, jsxs as jsxs19 } from "react/jsx-runtime";
 function RadioInputRendererComponent(props) {
   const {
     id,
@@ -3073,7 +3076,7 @@ function RadioInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  return /* @__PURE__ */ jsxs19(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs19(Fragment8, { children: [
     /* @__PURE__ */ jsx68(
       FieldInput_default,
       {
@@ -3107,7 +3110,7 @@ function RadioInputRendererComponent(props) {
 // ../renderers/src/SelectInputRenderer/TabInputRendererComponent.tsx
 import { Tabs } from "@transferwise/components";
 import { useEffect as useEffect6 } from "react";
-import { Fragment as Fragment8, jsx as jsx69, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx69, jsxs as jsxs20 } from "react/jsx-runtime";
 function TabInputRendererComponent(props) {
   const {
     id,
@@ -3126,7 +3129,7 @@ function TabInputRendererComponent(props) {
       onSelect(0);
     }
   }, [selectedIndex, onSelect, options.length]);
-  return /* @__PURE__ */ jsxs20(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs20(Fragment9, { children: [
     /* @__PURE__ */ jsx69(
       FieldInput_default,
       {
@@ -3144,7 +3147,7 @@ function TabInputRendererComponent(props) {
               title: option.title,
               // if we pass null, we get some props-types console errors
               // eslint-disable-next-line react/jsx-no-useless-fragment
-              content: /* @__PURE__ */ jsx69(Fragment8, {}),
+              content: /* @__PURE__ */ jsx69(Fragment9, {}),
               disabled: option.disabled || disabled
             })),
             onTabSelect: onSelect
@@ -3159,7 +3162,7 @@ var isValidIndex2 = (index, options) => index !== null && index >= 0 && index <
 
 // ../renderers/src/SelectInputRenderer/SelectInputRendererComponent.tsx
 import { SelectInput as SelectInput2, SelectInputOptionContent as SelectInputOptionContent2 } from "@transferwise/components";
-import { Fragment as Fragment9, jsx as jsx70, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx70, jsxs as jsxs21 } from "react/jsx-runtime";
 function SelectInputRendererComponent(props) {
   const {
     id,
@@ -3204,7 +3207,7 @@ function SelectInputRendererComponent(props) {
     return /* @__PURE__ */ jsx70(SelectInputOptionContent2, __spreadValues({}, contentProps));
   };
   const extraProps = { autoComplete };
-  return /* @__PURE__ */ jsxs21(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs21(Fragment10, { children: [
     /* @__PURE__ */ jsx70(
       FieldInput_default,
       {
@@ -3236,7 +3239,7 @@ function SelectInputRendererComponent(props) {
 // ../renderers/src/SelectInputRenderer/SegmentedInputRendererComponent.tsx
 import { useEffect as useEffect7 } from "react";
 import { SegmentedControl } from "@transferwise/components";
-import { Fragment as Fragment10, jsx as jsx71, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx71, jsxs as jsxs22 } from "react/jsx-runtime";
 function SegmentedInputRendererComponent(props) {
   const {
     id,
@@ -3254,7 +3257,7 @@ function SegmentedInputRendererComponent(props) {
       onSelect(0);
     }
   }, [selectedIndex, onSelect, options.length]);
-  return /* @__PURE__ */ jsxs22(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs22(Fragment11, { children: [
     /* @__PURE__ */ jsx71(
       FieldInput_default,
       {
@@ -3287,7 +3290,7 @@ var isValidIndex3 = (index, options) => index !== null && index >= 0 && index <
 
 // ../renderers/src/SelectInputRenderer/RadioItemRendererComponent.tsx
 import { Header as Header8, InlineAlert as InlineAlert4, List as List2, ListItem as ListItem11 } from "@transferwise/components";
-import { Fragment as Fragment11, jsx as jsx72, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx72, jsxs as jsxs23 } from "react/jsx-runtime";
 function RadioItemRendererComponent(props) {
   const {
     id,
@@ -3301,7 +3304,7 @@ function RadioItemRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  return /* @__PURE__ */ jsxs23(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs23(Fragment12, { children: [
     rootTitle && /* @__PURE__ */ jsx72(
       Header8,
       {
@@ -3556,7 +3559,7 @@ function SplashStepRendererComponent(props) {
 
 // ../renderers/src/step/StepRenderer.tsx
 import { Alert as Alert2, Title as Title2 } from "@transferwise/components";
-import { Fragment as Fragment12, jsx as jsx80, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx80, jsxs as jsxs30 } from "react/jsx-runtime";
 var StepRenderer = {
   canRenderType: "step",
   render: StepRendererComponent
@@ -3574,7 +3577,7 @@ function StepRendererComponent(props) {
 }
 var Header10 = ({ title, description, tags }) => {
   const { titleType, alignmentClassName } = getHeaderStyle(tags);
-  return /* @__PURE__ */ jsxs30(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs30(Fragment13, { children: [
     title ? /* @__PURE__ */ jsx80(Title2, { as: "h1", type: titleType, className: `${alignmentClassName} m-b-2`, children: title }) : void 0,
     description ? /* @__PURE__ */ jsx80("p", { className: `${alignmentClassName} np-text-body-large`, children: description }) : void 0
   ] });
@@ -3996,8 +3999,24 @@ var getWiseRenderers = () => [
   ReviewLegacyRenderer_default
 ];
 
-// ../renderers/src/subflow/getSubflowRenderer.tsx
+// ../renderers/src/InitialLoadingStateRenderer.tsx
+import { Loader as Loader2 } from "@transferwise/components";
 import { jsx as jsx86 } from "react/jsx-runtime";
+var InitialLoadingStateRenderer = {
+  canRenderType: "loading-state",
+  canRender: ({ stepLoadingState }) => stepLoadingState === "initial",
+  render: () => /* @__PURE__ */ jsx86(
+    Loader2,
+    {
+      size: "md",
+      classNames: { "tw-loader": `tw-loader m-x-auto ${getMargin("md")}` },
+      "data-testid": "loading-state"
+    }
+  )
+};
+
+// ../renderers/src/subflow/getSubflowRenderer.tsx
+import { jsx as jsx87 } from "react/jsx-runtime";
 var getSubflowRenderer = ({
   Component: Component2,
   canRender
@@ -4006,7 +4025,7 @@ var getSubflowRenderer = ({
     canRenderType: "subflow",
     canRender,
     render: (props) => {
-      return /* @__PURE__ */ jsx86(
+      return /* @__PURE__ */ jsx87(
         Component2,
         {
           presentation: props.presentation,
@@ -4084,29 +4103,27 @@ var handleRejection = (error) => {
 };
 
 // src/dynamicFlow/DynamicFlowModal.tsx
-import { useDynamicFlowModal } from "@wise/dynamic-flow-client";
 import { Modal as Modal5 } from "@transferwise/components";
-import { jsx as jsx87 } from "react/jsx-runtime";
+import { jsx as jsx88 } 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__ */ jsx87(
+  const df = useDynamicFlowModalWise(rest);
+  return /* @__PURE__ */ jsx88(
     Modal5,
     __spreadProps(__spreadValues({
       className: `dynamic-flow-modal ${className}`,
       disableDimmerClickToClose: true
     }, df.modal), {
-      body: /* @__PURE__ */ jsx87("div", { className: "dynamic-flow-modal", children: df.modal.body })
+      body: /* @__PURE__ */ jsx88("div", { className: "dynamic-flow-modal", children: df.modal.body })
     })
   );
 }
 
 // src/dynamicFlow/getMergedRenderers.tsx
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { jsx as jsx89 } from "react/jsx-runtime";
 var wiseRenderers = getWiseRenderers();
 var getMergedRenderers = (props) => {
-  var _d;
+  var _d, _e;
   const _a = props, { initialAction, initialStep } = _a, restProps = __objRest(_a, ["initialAction", "initialStep"]);
   const subflowFeatures = __spreadProps(__spreadValues({}, props.features), { nativeBack: true });
   const subflowRenderer = getSubflowRenderer({
@@ -4117,7 +4134,7 @@ var getMergedRenderers = (props) => {
         method: initialRequest.method,
         data: initialRequest.body
       };
-      return presentation.type === "push" ? /* @__PURE__ */ jsx88(DynamicFlow, __spreadProps(__spreadValues(__spreadValues({}, restProps), rest), { features: subflowFeatures, initialAction: action })) : /* @__PURE__ */ jsx88(
+      return presentation.type === "push" ? /* @__PURE__ */ jsx89(DynamicFlow, __spreadProps(__spreadValues(__spreadValues({}, restProps), rest), { features: subflowFeatures, initialAction: action })) : /* @__PURE__ */ jsx89(
         DynamicFlowModal,
         __spreadProps(__spreadValues(__spreadValues({}, restProps), rest), {
           features: subflowFeatures,
@@ -4126,7 +4143,8 @@ var getMergedRenderers = (props) => {
       );
     }
   });
-  return [...(_d = props.renderers) != null ? _d : [], subflowRenderer, ...wiseRenderers];
+  const loadingStateRenderer = ((_d = props.features) == null ? void 0 : _d.initialLoader) ? [InitialLoadingStateRenderer] : [];
+  return [...(_e = props.renderers) != null ? _e : [], subflowRenderer, ...loadingStateRenderer, ...wiseRenderers];
 };
 
 // src/dynamicFlow/useWiseToCoreProps.tsx
@@ -4166,13 +4184,22 @@ var openLinkInNewTab = (url) => {
   }
 };
 
+// src/dynamicFlow/useDynamicFlowWise.tsx
+var useDynamicFlowWise = (props) => {
+  const dfProps = useWiseToCoreProps(props);
+  return useDynamicFlow(dfProps);
+};
+var useDynamicFlowModalWise = (props) => {
+  const dfProps = useWiseToCoreProps(props);
+  return useDynamicFlowModal(dfProps);
+};
+
 // src/dynamicFlow/DynamicFlow.tsx
-import { jsx as jsx89 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
 function DynamicFlow(props) {
   const { className = "" } = props;
-  const dfProps = useWiseToCoreProps(props);
-  const df = useDynamicFlow(dfProps);
-  return /* @__PURE__ */ jsx89("div", { className, children: df.view });
+  const df = useDynamicFlowWise(props);
+  return /* @__PURE__ */ jsx90("div", { className, children: df.view });
 }
 
 // src/dynamicFlow/DynamicFlowWithRef.tsx
@@ -4180,12 +4207,10 @@ import {
   forwardRef,
   useImperativeHandle
 } from "react";
-import { useDynamicFlow as useDynamicFlow2 } from "@wise/dynamic-flow-client";
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { jsx as jsx91 } from "react/jsx-runtime";
 var DynamicFlowWithRef = forwardRef(function DynamicFlowWithRef2(props, ref) {
   const { className = "" } = props;
-  const dfProps = useWiseToCoreProps(props);
-  const df = useDynamicFlow2(dfProps);
+  const df = useDynamicFlowWise(props);
   useImperativeHandle(
     ref,
     () => ({
@@ -4197,7 +4222,7 @@ var DynamicFlowWithRef = forwardRef(function DynamicFlowWithRef2(props, ref) {
     }),
     [df]
   );
-  return /* @__PURE__ */ jsx90("div", { className, children: df.view });
+  return /* @__PURE__ */ jsx91("div", { className, children: df.view });
 });
 
 // src/index.ts
@@ -5077,7 +5102,9 @@ export {
   findRendererPropsByType,
   getMargin2 as getMargin,
   makeHttpClient as makeCustomFetch,
-  i18n_default as translations
+  i18n_default as translations,
+  useDynamicFlowModalWise,
+  useDynamicFlowWise
 };
 /*! Bundled license information:
 

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

@@ -1 +1 @@
-{"version":3,"file":"DynamicFlow.d.ts","sourceRoot":"","sources":["../../../src/dynamicFlow/DynamicFlow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAGnE,MAAM,MAAM,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAElF,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI;KACvB,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACrB,GAAG,EAAE,CAAC;AAEP,wBAAgB,WAAW,CAAC,KAAK,EAAE,oBAAoB,2CAKtD"}
+{"version":3,"file":"DynamicFlow.d.ts","sourceRoot":"","sources":["../../../src/dynamicFlow/DynamicFlow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAGnE,MAAM,MAAM,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAElF,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI;KACvB,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACrB,GAAG,EAAE,CAAC;AAEP,wBAAgB,WAAW,CAAC,KAAK,EAAE,oBAAoB,2CAItD"}

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

@@ -1 +1 @@
-{"version":3,"file":"DynamicFlowModal.d.ts","sourceRoot":"","sources":["../../../src/dynamicFlow/DynamicFlowModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAGnE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,oBAAoB,2CAa3D"}
+{"version":3,"file":"DynamicFlowModal.d.ts","sourceRoot":"","sources":["../../../src/dynamicFlow/DynamicFlowModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAGnE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,oBAAoB,2CAY3D"}

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

@@ -1 +1 @@
-{"version":3,"file":"DynamicFlowWithRef.d.ts","sourceRoot":"","sources":["../../../src/dynamicFlow/DynamicFlowWithRef.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EACL,KAAK,yBAAyB,EAE9B,KAAK,aAAa,EAGnB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAInE,MAAM,MAAM,uBAAuB,GAAG,oBAAoB,GAAG;IAAE,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAE5F,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,QAAQ,EAAE,MAAM,OAAO,CAAC,WAAW,CAAC,CAAC;IACrC;;OAEG;IACH,QAAQ,EAAE,MAAM,OAAO,CAAC;CACzB,CAAC;AACF;;;;GAIG;AAEH,eAAO,MAAM,kBAAkB,EAAE,yBAAyB,CACxD,uBAAuB,GAAG,aAAa,CAAC,cAAc,CAAC,CAmBvD,CAAC"}
+{"version":3,"file":"DynamicFlowWithRef.d.ts","sourceRoot":"","sources":["../../../src/dynamicFlow/DynamicFlowWithRef.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EACL,KAAK,yBAAyB,EAE9B,KAAK,aAAa,EAGnB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAGnE,MAAM,MAAM,uBAAuB,GAAG,oBAAoB,GAAG;IAAE,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAE5F,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,QAAQ,EAAE,MAAM,OAAO,CAAC,WAAW,CAAC,CAAC;IACrC;;OAEG;IACH,QAAQ,EAAE,MAAM,OAAO,CAAC;CACzB,CAAC;AACF;;;;GAIG;AAEH,eAAO,MAAM,kBAAkB,EAAE,yBAAyB,CACxD,uBAAuB,GAAG,aAAa,CAAC,cAAc,CAAC,CAiBvD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"getMergedRenderers.d.ts","sourceRoot":"","sources":["../../../src/dynamicFlow/getMergedRenderers.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAEpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAK9D,eAAO,MAAM,kBAAkB,GAAI,OAAO,oBAAoB,KAAG,SAwBhE,CAAC"}
+{"version":3,"file":"getMergedRenderers.d.ts","sourceRoot":"","sources":["../../../src/dynamicFlow/getMergedRenderers.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAEpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAK9D,eAAO,MAAM,kBAAkB,GAAI,OAAO,oBAAoB,KAAG,SA0BhE,CAAC"}

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

@@ -10,7 +10,7 @@ export declare const Header: ({ title, callToAction }: {
 export declare const Media: ({ media, preferAvatar, size }: {
     media: import("@wise/dynamic-flow-types/renderers").Media | undefined;
     preferAvatar?: boolean;
-    size: import("@wise/dynamic-flow-renderers/src/components/Media/Media").MediaSize;
+    size: 16 | 24 | 32 | 40 | 48 | 56 | 72;
 }) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | null | undefined;
 export declare const getMargin: (size: import("@wise/dynamic-flow-types/spec").Margin) => "m-b-0" | "m-b-1" | "m-b-2" | "m-b-3" | "m-b-5" | "";
 //# sourceMappingURL=renderers.d.ts.map

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

@@ -0,0 +1,32 @@
+import type { DynamicFlowWiseProps } from './DynamicFlowWiseProps';
+/**
+ * @experimental This hook may be changed or removed in the future without notice.
+ */
+export declare const useDynamicFlowWise: (props: DynamicFlowWiseProps) => {
+    controller: {
+        getSubmittableValue: () => Promise<import("@wise/dynamic-flow-types/spec").JsonElement>;
+        validate: () => boolean;
+        rendererProps: import("@wise/dynamic-flow-types/renderers").RendererProps;
+        cancel: () => void;
+    };
+    view: import("react/jsx-runtime").JSX.Element;
+};
+/**
+ * @experimental This hook may be changed or removed in the future without notice.
+ */
+export declare const useDynamicFlowModalWise: (props: DynamicFlowWiseProps) => {
+    modal: {
+        body: import("react/jsx-runtime").JSX.Element;
+        open: boolean;
+        onClose: () => void;
+        onUnmount: () => void;
+    };
+    controller: {
+        getSubmittableValue: () => Promise<import("@wise/dynamic-flow-types/spec").JsonElement>;
+        validate: () => boolean;
+        rendererProps: import("@wise/dynamic-flow-types/renderers").RendererProps;
+        cancel: () => void;
+    };
+    view: import("react/jsx-runtime").JSX.Element;
+};
+//# sourceMappingURL=useDynamicFlowWise.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDynamicFlowWise.d.ts","sourceRoot":"","sources":["../../../src/dynamicFlow/useDynamicFlowWise.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAGnE;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,oBAAoB;;;;;;;;CAG7D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,GAAI,OAAO,oBAAoB;;;;;;;;;;;;;;CAGlE,CAAC"}

package/build/types/index.d.ts

@@ -2,6 +2,7 @@ export { makeHttpClient as makeCustomFetch } from '@wise/dynamic-flow-client';
 export type { DynamicFlowWiseProps as DynamicFlowProps } from './dynamicFlow/DynamicFlowWiseProps';
 export { DynamicFlow } from './dynamicFlow/DynamicFlow';
 export { DynamicFlowWithRef, type DynamicFlowRef } from './dynamicFlow/DynamicFlowWithRef';
+export { useDynamicFlowWise, useDynamicFlowModalWise } from './dynamicFlow/useDynamicFlowWise';
 export { findRendererPropsByType } from '@wise/dynamic-flow-client';
 export { getMargin, Header, Media } from './dynamicFlow/renderers';
 export { default as translations } from './i18n';

package/build/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE9E,YAAY,EAAE,oBAAoB,IAAI,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAEnG,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,KAAK,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAE3F,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE9E,YAAY,EAAE,oBAAoB,IAAI,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAEnG,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,KAAK,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAC3F,OAAO,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAE/F,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "5.8.0",
+  "version": "5.9.0-experimental-rendererprops-9c9a4b8",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -49,7 +49,6 @@
     "@types/react-dom": "18.3.7",
     "@wise/art": "2.27.0",
     "@wise/components-theming": "^1.10.0",
-    "currency-flags": "4.0.7",
     "esbuild": "0.27.0",
     "eslint-plugin-storybook": "10.2.7",
     "framer-motion": "^12.33.0",
@@ -69,9 +68,9 @@
     "typescript": "5.9.3",
     "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.8.0",
-    "@wise/dynamic-flow-fixtures": "0.0.1"
+    "@wise/dynamic-flow-types": "4.9.0-experimental-rendererprops-9c9a4b8"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.104.0",
@@ -85,8 +84,8 @@
     "react-intl": "^6 || ^7"
   },
   "dependencies": {
-    "@wise/dynamic-flow-client": "5.8.0",
-    "@wise/dynamic-flow-types": "4.8.0"
+    "@wise/dynamic-flow-client": "5.9.0-experimental-rendererprops-9c9a4b8",
+    "@wise/dynamic-flow-types": "4.9.0-experimental-rendererprops-9c9a4b8"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3005",