@wise/dynamic-flow-client-internal 5.16.1 → 5.18.1

package/build/main.mjs

@@ -123,7 +123,7 @@ import { useDynamicFlow } from "@wise/dynamic-flow-client";
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "5.16.1" : "0.0.0"
+  typeof process !== "undefined" ? "5.18.1" : "0.0.0"
 );
 
 // src/dynamicFlow/context-menu/useContextMenu.tsx
@@ -208,27 +208,29 @@ var useDFContextMenu = (controller) => {
         }
       },
       {
-        label: "Open in Sandbox",
+        label: "Copy step JSON",
         onClick: () => {
-          openInSandbox(getEncodedCurrentStep());
+          copyToClipboard(getCurrentStep());
         }
       },
       {
-        label: "Open in Sandbox (with model)",
+        label: "Open in Studio (experimental)",
         onClick: () => {
-          void getEncodedCurrentStepWithModel().then(openInSandbox);
+          openIn("studio", getEncodedCurrentStep());
         }
       },
       {
-        label: "Copy step JSON",
+        label: "Open in Sandbox",
         onClick: () => {
-          copyToClipboard(getCurrentStep());
+          openIn("sandbox", getEncodedCurrentStep());
         }
       },
       {
-        label: "Copy step JSON (with model)",
+        label: "Open in Sandbox (with model)",
         onClick: () => {
-          void getCurrentStepWithModel().then(copyToClipboard);
+          void getEncodedCurrentStepWithModel().then(
+            (base64Step) => openIn("sandbox", base64Step)
+          );
         }
       }
     ] : []
@@ -239,9 +241,9 @@ var toBase64 = (str) => {
   const binString = Array.from(bytes, (b) => String.fromCharCode(b)).join("");
   return btoa(binString);
 };
-var openInSandbox = (base64Step) => {
+var openIn = (editor, base64Step) => {
   if (base64Step) {
-    window.open(`https://df.wise.com/sandbox#${base64Step}`, "_blank", "noopener,noreferrer");
+    window.open(`https://df.wise.com/${editor}#${base64Step}`, "_blank", "noopener,noreferrer");
   }
 };
 var openVersionPage = (version) => {
@@ -307,54 +309,8 @@ var recursivelyRemoveNullish = (element) => {
 // src/dynamicFlow/useWiseToCoreProps.tsx
 import { useMemo as useMemo2 } from "react";
 
-// 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
-};
+// src/dynamicFlow/getMergedRenderers.tsx
+import { getDynamicSubflowRenderer } from "@wise/dynamic-flow-client";
 
 // ../renderers/src/AlertRenderer.tsx
 import { Alert } from "@transferwise/components";
@@ -893,6 +849,18 @@ var getPriority = (control, tags) => {
 
 // ../renderers/src/components/FieldInput.tsx
 import { Field } from "@transferwise/components";
+import { useEffect as useEffect4, useRef } from "react";
+
+// ../renderers/src/utils/scroll-to-if-not-visible.ts
+var scrollToIfNotVisible = (ref) => {
+  const rect = ref == null ? void 0 : ref.getBoundingClientRect();
+  if (!ref || !rect) {
+    return;
+  }
+  if (rect.bottom > window.innerHeight || rect.top < 0) {
+    ref.scrollIntoView({ behavior: "smooth" });
+  }
+};
 
 // ../renderers/src/components/Help.tsx
 import { Info, Markdown } from "@transferwise/components";
@@ -936,28 +904,47 @@ function LabelContentWithHelp({ text, help }) {
 
 // ../renderers/src/components/FieldInput.tsx
 import { jsx as jsx19 } from "react/jsx-runtime";
-function FieldInput({ id, children, label, validation, description, help }) {
+function FieldInput({
+  id,
+  children,
+  label,
+  validation,
+  description,
+  help,
+  loadingState = "idle",
+  inlineAlert
+}) {
   const labelContent = label && help ? /* @__PURE__ */ jsx19(LabelContentWithHelp, { text: label, help }) : label;
-  return /* @__PURE__ */ jsx19(
+  const message = validation == null ? void 0 : validation.message;
+  const ref = useRef(null);
+  useEffect4(() => {
+    if (message) {
+      scrollToIfNotVisible(ref.current);
+    }
+  }, [message]);
+  return /* @__PURE__ */ jsx19("div", { ref, children: /* @__PURE__ */ jsx19(
     Field,
     {
       id,
       label: labelContent,
       description,
-      message: validation == null ? void 0 : validation.message,
-      sentiment: mapStatusToSentiment(validation),
+      message: message != null ? message : inlineAlert == null ? void 0 : inlineAlert.content,
+      messageLoading: loadingState !== "idle",
+      sentiment: mapStatusToSentiment(validation, inlineAlert == null ? void 0 : inlineAlert.context),
       children
     }
-  );
+  ) });
 }
-var mapStatusToSentiment = (validation) => {
-  if (validation) {
-    if (validation.status === "valid") {
-      return "positive";
+var mapStatusToSentiment = (validation, defaultContext) => {
+  if (validation == null ? void 0 : validation.message) {
+    switch (validation.status) {
+      case "valid":
+        return "positive";
+      case "invalid":
+        return "negative";
     }
-    return "negative";
   }
-  return void 0;
+  return defaultContext;
 };
 var FieldInput_default = FieldInput;
 
@@ -1025,7 +1012,19 @@ var CheckboxComponent = (props) => {
     "value"
   ]);
   const checkboxProps = __spreadProps(__spreadValues({}, rest), { label: title, secondary: description, checked: value });
-  return /* @__PURE__ */ jsx23(FieldInput_default, { id, label: "", description: "", validation: validationState, help, children: /* @__PURE__ */ jsx23(Checkbox, __spreadValues({ id }, checkboxProps)) });
+  return /* @__PURE__ */ jsx23(
+    FieldInput_default,
+    {
+      id,
+      label: "",
+      description: "",
+      validation: validationState,
+      help,
+      inlineAlert: rest.inlineAlert,
+      loadingState: rest.fieldLoadingState,
+      children: /* @__PURE__ */ jsx23(Checkbox, __spreadValues({ id }, checkboxProps))
+    }
+  );
 };
 var CheckboxItemComponent = (props) => {
   const {
@@ -1080,7 +1079,7 @@ var SwitchItemComponent = (props) => {
   );
 };
 var getInlineAlertOrValidation = (validationState, inlineAlert) => {
-  if (validationState && validationState.status === "invalid") {
+  if ((validationState == null ? void 0 : validationState.status) === "invalid") {
     return /* @__PURE__ */ jsx23(ListItem3.Prompt, { sentiment: "negative", children: validationState.message });
   }
   return getInlineAlert(inlineAlert);
@@ -1217,6 +1216,8 @@ var DateInputRenderer = {
         label: title,
         description,
         validation: validationState,
+        inlineAlert: props.inlineAlert,
+        loadingState: props.fieldLoadingState,
         help,
         children: /* @__PURE__ */ jsx26(VariableDateInput_default, { control, inputProps })
       }
@@ -1523,7 +1524,7 @@ var external_confirmation_messages_default = defineMessages5({
 
 // ../renderers/src/ExternalConfirmationRenderer.tsx
 import { useIntl as useIntl5 } from "react-intl";
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 import { Fragment as Fragment4, jsx as jsx32, jsxs as jsxs7 } from "react/jsx-runtime";
 var ExternalConfirmationRenderer = {
   canRenderType: "external-confirmation",
@@ -1536,7 +1537,7 @@ function ExternalConfirmationRendererComponent({
   onCancel
 }) {
   const { formatMessage } = useIntl5();
-  useEffect4(() => {
+  useEffect5(() => {
     open();
   }, []);
   return /* @__PURE__ */ jsx32(
@@ -1650,7 +1651,7 @@ var HeadingRenderer_default = HeadingRenderer;
 
 // ../renderers/src/ImageRenderer/UrlImage.tsx
 import { Image } from "@transferwise/components";
-import { useEffect as useEffect5, useState as useState5 } from "react";
+import { useEffect as useEffect6, useState as useState5 } from "react";
 
 // ../renderers/src/utils/api-utils.ts
 function isRelativePath(url = "") {
@@ -1670,7 +1671,7 @@ function UrlImage({
   httpClient
 }) {
   const [imageSource, setImageSource] = useState5("");
-  useEffect5(() => {
+  useEffect6(() => {
     if (!uri.startsWith("urn:")) {
       void getImageSource(httpClient, uri).then(setImageSource);
     }
@@ -1909,6 +1910,8 @@ var IntegerInputRenderer = {
         label: title,
         description,
         validation: validationState,
+        inlineAlert: props.inlineAlert,
+        loadingState: props.fieldLoadingState,
         help,
         children: /* @__PURE__ */ jsx43(InputGroup, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ jsx43(
           Input,
@@ -2162,7 +2165,7 @@ var ModalRenderer = {
 
 // ../renderers/src/MoneyInputRenderer.tsx
 import { MoneyInput } from "@transferwise/components";
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect7 } from "react";
 import { useIntl as useIntl6 } from "react-intl";
 import { jsx as jsx52 } from "react/jsx-runtime";
 var groupingTags2 = Object.keys(group_messages_default).filter((key) => key !== "all");
@@ -2185,7 +2188,7 @@ function MoneyInputRendererComponent(props) {
     onAmountChange,
     onCurrencyChange
   } = props;
-  useEffect6(() => {
+  useEffect7(() => {
     if (!isValidIndex(selectedCurrencyIndex, currencies.length)) {
       onCurrencyChange(0);
     }
@@ -2503,6 +2506,7 @@ import { Status, UploadInput } from "@transferwise/components";
 
 // ../renderers/src/components/UploadFieldInput.tsx
 var import_classnames4 = __toESM(require_classnames());
+import { useEffect as useEffect8, useRef as useRef2 } from "react";
 import { InlineAlert as InlineAlert2 } from "@transferwise/components";
 import { jsx as jsx57, jsxs as jsxs12 } from "react/jsx-runtime";
 function UploadFieldInput({
@@ -2515,9 +2519,17 @@ function UploadFieldInput({
 }) {
   const labelContent = label && help ? /* @__PURE__ */ jsx57(LabelContentWithHelp, { text: label, help }) : label;
   const descriptionId = description ? `${id}-description` : void 0;
+  const message = validation == null ? void 0 : validation.message;
+  const ref = useRef2(null);
+  useEffect8(() => {
+    if (message) {
+      scrollToIfNotVisible(ref.current);
+    }
+  }, [message]);
   return /* @__PURE__ */ jsxs12(
     "div",
     {
+      ref,
       className: (0, import_classnames4.default)("form-group d-block", {
         "has-error": (validation == null ? void 0 : validation.status) === "invalid"
       }),
@@ -2642,6 +2654,8 @@ var NumberInputRenderer = {
         label: title,
         description,
         validation: validationState,
+        inlineAlert: props.inlineAlert,
+        loadingState: props.fieldLoadingState,
         help,
         children: /* @__PURE__ */ jsx59(InputGroup2, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ jsx59(
           Input2,
@@ -3348,7 +3362,7 @@ function RadioInputRendererComponent(props) {
 
 // ../renderers/src/SelectInputRenderer/TabInputRendererComponent.tsx
 import { Tabs } from "@transferwise/components";
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect9 } from "react";
 import { Fragment as Fragment9, jsx as jsx71, jsxs as jsxs21 } from "react/jsx-runtime";
 function TabInputRendererComponent(props) {
   const {
@@ -3363,7 +3377,7 @@ function TabInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  useEffect7(() => {
+  useEffect9(() => {
     if (!isValidIndex2(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -3476,7 +3490,7 @@ function SelectInputRendererComponent(props) {
 }
 
 // ../renderers/src/SelectInputRenderer/SegmentedInputRendererComponent.tsx
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect10 } from "react";
 import { SegmentedControl } from "@transferwise/components";
 import { Fragment as Fragment11, jsx as jsx73, jsxs as jsxs23 } from "react/jsx-runtime";
 function SegmentedInputRendererComponent(props) {
@@ -3491,7 +3505,7 @@ function SegmentedInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  useEffect8(() => {
+  useEffect10(() => {
     if (!isValidIndex3(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -3659,12 +3673,12 @@ var StatusListRenderer_default = StatusListRenderer;
 
 // ../renderers/src/utils/useCustomTheme.ts
 import { useTheme } from "@wise/components-theming";
-import { useEffect as useEffect9, useMemo } from "react";
+import { useEffect as useEffect11, useMemo } from "react";
 var ThemeRequiredEventName = "Theme Required";
 var useCustomTheme = (theme, trackEvent) => {
   const theming = useTheme();
   const previousTheme = useMemo(() => theming.theme, []);
-  useEffect9(() => {
+  useEffect11(() => {
     theming.setTheme(theme);
     trackEvent(ThemeRequiredEventName, { theme });
     return theme !== previousTheme ? () => {
@@ -3677,7 +3691,7 @@ var useCustomTheme = (theme, trackEvent) => {
 
 // ../renderers/src/step/StepFooter.tsx
 import { Button as Button7 } from "@transferwise/components";
-import { useEffect as useEffect10, useRef, useState as useState12 } from "react";
+import { useEffect as useEffect12, useRef as useRef3, useState as useState12 } from "react";
 import { useIntl as useIntl14 } from "react-intl";
 
 // ../renderers/src/messages/step.messages.ts
@@ -3705,7 +3719,7 @@ var DefaultFooter = ({ footer }) => {
 };
 var FooterWithScrollButton = ({ footer }) => {
   const { formatMessage } = useIntl14();
-  const endOfLayoutRef = useRef(null);
+  const endOfLayoutRef = useRef3(null);
   const isElementVisible = useIsElementVisible(endOfLayoutRef);
   const scrollButton = /* @__PURE__ */ jsx77(
     Button7,
@@ -3735,7 +3749,7 @@ var FooterWithScrollButton = ({ footer }) => {
 };
 var useIsElementVisible = (elementRef) => {
   const [isVisible, setIsVisible] = useState12(false);
-  useEffect10(() => {
+  useEffect12(() => {
     const element = elementRef.current;
     if (!element) return;
     const observer = new IntersectionObserver(([entry]) => {
@@ -3855,9 +3869,11 @@ var getIconButtonPriority = (control) => {
 
 // ../renderers/src/step/topbar/TopBar.tsx
 import { jsx as jsx81, jsxs as jsxs30 } from "react/jsx-runtime";
-function TopBar({ back, toolbar }) {
-  return back || toolbar ? /* @__PURE__ */ jsxs30("div", { className: "d-flex m-b-2", children: [
-    back ? /* @__PURE__ */ jsx81(BackButton, __spreadValues({}, back)) : null,
+function TopBar({ back, toolbar, tags }) {
+  const isBackAllowed = !(tags == null ? void 0 : tags.includes("non-dismissible"));
+  const backCTA = isBackAllowed ? back : void 0;
+  return backCTA || toolbar ? /* @__PURE__ */ jsxs30("div", { className: "d-flex m-b-2", children: [
+    backCTA ? /* @__PURE__ */ jsx81(BackButton, __spreadValues({}, backCTA)) : null,
     toolbar ? /* @__PURE__ */ jsx81(Toolbar, __spreadValues({}, toolbar)) : null
   ] }) : null;
 }
@@ -3873,7 +3889,7 @@ function SplashCelebrationStepRendererComponent(props) {
   const { back, title, description, toolbar, children, footer, tags, trackEvent } = props;
   useCustomTheme("forest-green", trackEvent);
   return /* @__PURE__ */ jsxs31("div", { className: "splash-screen m-t-5", children: [
-    /* @__PURE__ */ jsx82(TopBar, { back, toolbar }),
+    /* @__PURE__ */ jsx82(TopBar, { back, toolbar, tags }),
     title || description ? /* @__PURE__ */ jsx82("div", { className: "m-b-4", children: /* @__PURE__ */ jsx82(StepHeader, { title, description, tags }) }) : void 0,
     children,
     /* @__PURE__ */ jsx82(StepFooter, { footer, tags })
@@ -3890,7 +3906,7 @@ var SplashStepRenderer = {
 function SplashStepRendererComponent(props) {
   const { back, title, description, toolbar, children, footer, tags } = props;
   return /* @__PURE__ */ jsxs32("div", { className: "splash-screen m-t-5", children: [
-    /* @__PURE__ */ jsx83(TopBar, { back, toolbar }),
+    /* @__PURE__ */ jsx83(TopBar, { back, toolbar, tags }),
     title || description ? /* @__PURE__ */ jsx83("div", { className: "m-b-4", children: /* @__PURE__ */ jsx83(StepHeader, { title, description, tags }) }) : void 0,
     children,
     /* @__PURE__ */ jsx83(StepFooter, { footer, tags })
@@ -3907,7 +3923,7 @@ var StepRenderer = {
 function StepRendererComponent(props) {
   const { back, description, error, title, children, toolbar, footer, tags } = props;
   return /* @__PURE__ */ jsxs33("div", { children: [
-    /* @__PURE__ */ jsx84(TopBar, { back, toolbar }),
+    /* @__PURE__ */ jsx84(TopBar, { back, toolbar, tags }),
     title || description ? /* @__PURE__ */ jsx84("div", { className: "m-b-4", children: /* @__PURE__ */ jsx84(StepHeader, { title, description, tags }) }) : void 0,
     error ? /* @__PURE__ */ jsx84(Alert2, { type: "negative", className: "m-b-2", message: error }) : null,
     children,
@@ -4093,6 +4109,8 @@ var TextInputRenderer = {
         label: title,
         description,
         validation: validationState,
+        inlineAlert: props.inlineAlert,
+        loadingState: props.fieldLoadingState,
         help,
         children: /* @__PURE__ */ jsx87(InputGroup4, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ jsx87(VariableTextInput, __spreadValues({}, inputProps)) })
       }
@@ -4371,6 +4389,102 @@ var InitialLoadingStateRenderer = {
   )
 };
 
+// src/dynamicFlow/DynamicFlowModal.tsx
+import { useDynamicFlowModal } from "@wise/dynamic-flow-client";
+import { Modal as Modal5 } from "@transferwise/components";
+import { jsx as jsx92 } 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__ */ jsx92(
+    Modal5,
+    __spreadProps(__spreadValues({
+      className: `dynamic-flow-modal ${className}`,
+      disableDimmerClickToClose: true
+    }, df.modal), {
+      body: /* @__PURE__ */ jsx92("div", { className: "dynamic-flow-modal", children: df.modal.body })
+    })
+  );
+}
+
+// src/dynamicFlow/getMergedRenderers.tsx
+import { jsx as jsx93 } from "react/jsx-runtime";
+var wiseRenderers = getWiseRenderers();
+var getMergedRenderers = (props) => {
+  var _d, _e;
+  const _a = props, { initialAction, initialStep } = _a, restProps = __objRest(_a, ["initialAction", "initialStep"]);
+  const subflowFeatures = __spreadProps(__spreadValues({}, props.features), { nativeBack: true });
+  const subflowRenderer = getDynamicSubflowRenderer({
+    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__ */ jsx93(DynamicFlow, __spreadProps(__spreadValues(__spreadValues({}, restProps), rest), { features: subflowFeatures, initialAction: action })) : /* @__PURE__ */ jsx93(
+        DynamicFlowModal,
+        __spreadProps(__spreadValues(__spreadValues({}, restProps), rest), {
+          features: subflowFeatures,
+          initialAction: action
+        })
+      );
+    }
+  });
+  const loadingStateRenderer = ((_d = props.features) == null ? void 0 : _d.initialLoader) ? [InitialLoadingStateRenderer] : [];
+  return [...(_e = props.renderers) != null ? _e : [], subflowRenderer, ...loadingStateRenderer, ...wiseRenderers];
+};
+
+// 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
+};
+
 // src/dynamicFlow/useOnCopy.tsx
 import { useCallback as useCallback2 } from "react";
 import { useIntl as useIntl16 } from "react-intl";
@@ -4432,54 +4546,10 @@ var handleRejection = (error) => {
   throw error;
 };
 
-// src/dynamicFlow/getMergedRenderers.tsx
-import { getDynamicSubflowRenderer } from "@wise/dynamic-flow-client";
-
-// src/dynamicFlow/DynamicFlowModal.tsx
-import { useDynamicFlowModal } from "@wise/dynamic-flow-client";
-import { Modal as Modal5 } from "@transferwise/components";
-import { jsx as jsx92 } 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__ */ jsx92(
-    Modal5,
-    __spreadProps(__spreadValues({
-      className: `dynamic-flow-modal ${className}`,
-      disableDimmerClickToClose: true
-    }, df.modal), {
-      body: /* @__PURE__ */ jsx92("div", { className: "dynamic-flow-modal", children: df.modal.body })
-    })
-  );
-}
-
-// src/dynamicFlow/getMergedRenderers.tsx
-import { jsx as jsx93 } from "react/jsx-runtime";
-var wiseRenderers = getWiseRenderers();
-var getMergedRenderers = (props) => {
-  var _d, _e;
-  const _a = props, { initialAction, initialStep } = _a, restProps = __objRest(_a, ["initialAction", "initialStep"]);
-  const subflowFeatures = __spreadProps(__spreadValues({}, props.features), { nativeBack: true });
-  const subflowRenderer = getDynamicSubflowRenderer({
-    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__ */ jsx93(DynamicFlow, __spreadProps(__spreadValues(__spreadValues({}, restProps), rest), { features: subflowFeatures, initialAction: action })) : /* @__PURE__ */ jsx93(
-        DynamicFlowModal,
-        __spreadProps(__spreadValues(__spreadValues({}, restProps), rest), {
-          features: subflowFeatures,
-          initialAction: action
-        })
-      );
-    }
-  });
-  const loadingStateRenderer = ((_d = props.features) == null ? void 0 : _d.initialLoader) ? [InitialLoadingStateRenderer] : [];
-  return [...(_e = props.renderers) != null ? _e : [], subflowRenderer, ...loadingStateRenderer, ...wiseRenderers];
+// src/dynamicFlow/useCreateSnackBar.tsx
+var useCreateSnackBar = () => {
+  const createSnackBar = useSnackBarIfAvailable();
+  return createSnackBar;
 };
 
 // src/dynamicFlow/useWiseToCoreProps.tsx
@@ -4492,10 +4562,12 @@ var useWiseToCoreProps = (props) => {
     onAnalytics,
     onEvent,
     onLink = openLinkInNewTab,
+    onNotification,
     onLog
   } = props;
   const httpClient = useWiseHttpClient(customFetch);
   const mergedRenderers = useMemo2(() => getMergedRenderers(props), [renderers]);
+  const createSnackBar = useCreateSnackBar();
   const logEvent = useMemo2(() => getLogEvent(onLog), [onLog]);
   const trackEvent = useMemo2(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
   const onCopy = useOnCopy();
@@ -4506,6 +4578,7 @@ var useWiseToCoreProps = (props) => {
     onEvent: trackEvent,
     onLog: logEvent,
     onCopy,
+    onNotification: onNotification != null ? onNotification : createSnackBar,
     onLink
   });
 };