@wise/dynamic-flow-client-internal 4.2.0 → 4.3.0

package/build/i18n/nl.json

@@ -1,33 +1,33 @@
 {
-  "df.wise.ArraySchema.addItem": "Save",
-  "df.wise.ArraySchema.addItemTitle": "Add Item",
-  "df.wise.ArraySchema.editItem": "Save",
-  "df.wise.ArraySchema.maxItemsError": "Please add {maxItems} or fewer.",
-  "df.wise.ArraySchema.minItemsError": "Please add at least {minItems}.",
-  "df.wise.ArraySchema.removeItem": "Remove",
-  "df.wise.ControlFeedback.maxLength": "Please enter {maxLength} or fewer characters.",
-  "df.wise.ControlFeedback.maximum": "Please enter a number that's {maximum} or less.",
-  "df.wise.ControlFeedback.maximumDate": "Please enter a date that's on or before {maximum}.",
-  "df.wise.ControlFeedback.minLength": "Please enter at least {minLength} characters.",
-  "df.wise.ControlFeedback.minimum": "Please enter a number that's {minimum} or more.",
-  "df.wise.ControlFeedback.minimumDate": "Please enter a date that's on or after {minimum}.",
-  "df.wise.ControlFeedback.pattern": "Please enter this in the correct format.",
-  "df.wise.ControlFeedback.patternDate": "Please enter a date in the corrrect format.",
-  "df.wise.ControlFeedback.required": "Please fill out this field.",
-  "df.wise.ControlFeedback.type": "Incorrect type",
-  "df.wise.DynamicParagraph.copied": "Copied to clipboard",
+  "df.wise.ArraySchema.addItem": "Opslaan",
+  "df.wise.ArraySchema.addItemTitle": "Item toevoegen",
+  "df.wise.ArraySchema.editItem": "Opslaan",
+  "df.wise.ArraySchema.maxItemsError": "Voeg {maxItems} of minder toe.",
+  "df.wise.ArraySchema.minItemsError": "Voeg minimaal {minItems} toe.",
+  "df.wise.ArraySchema.removeItem": "Verwijderen",
+  "df.wise.ControlFeedback.maxLength": "Voer {maxLength} of minder tekens in.",
+  "df.wise.ControlFeedback.maximum": "Voer een getal in dat {maximum} of lager is.",
+  "df.wise.ControlFeedback.maximumDate": "Voer een datum in die op of voor {maximum} is.",
+  "df.wise.ControlFeedback.minLength": "Voer minimaal {minLength} tekens in.",
+  "df.wise.ControlFeedback.minimum": "Voer een getal in dat {minimum} of hoger is.",
+  "df.wise.ControlFeedback.minimumDate": "Voer een datum in die op of na {minimum} is.",
+  "df.wise.ControlFeedback.pattern": "Voer dit in de juiste indeling in.",
+  "df.wise.ControlFeedback.patternDate": "Voer een datum in de juiste indeling in.",
+  "df.wise.ControlFeedback.required": "Vul dit veld in.",
+  "df.wise.ControlFeedback.type": "Onjuist type",
+  "df.wise.DynamicParagraph.copied": "Naar klembord gekopiëerd",
   "df.wise.DynamicParagraph.copy": "Kopiëren",
-  "df.wise.ErrorBoundary.errorAlert": "Something went wrong.",
-  "df.wise.ErrorBoundary.retry": "Retry",
-  "df.wise.ExternalConfirmation.cancel": "Cancel",
-  "df.wise.ExternalConfirmation.description": "Please confirm you want to open **{origin}** in a new browser tab.",
-  "df.wise.ExternalConfirmation.open": "Open in new tab",
-  "df.wise.ExternalConfirmation.title": "Please confirm",
-  "df.wise.Help.ariaLabel": "Click here for more info.",
-  "df.wise.MultiSelect.summary": "{first} and {count} more",
-  "df.wise.MultipleFileUploadSchema.maxFileSizeError": "Sorry, that file is too big. Please upload a smaller file.",
-  "df.wise.MultipleFileUploadSchema.maxItemsError": "Please upload {maxItems} or fewer files.",
-  "df.wise.MultipleFileUploadSchema.minItemsError": "Please upload at least {minItems} file(s).",
+  "df.wise.ErrorBoundary.errorAlert": "Er is iets misgegaan.",
+  "df.wise.ErrorBoundary.retry": "Opnieuw proberen",
+  "df.wise.ExternalConfirmation.cancel": "Annuleren",
+  "df.wise.ExternalConfirmation.description": "Bevestig dat je **{origin}** in een nieuw browsertabblad wilt openen.",
+  "df.wise.ExternalConfirmation.open": "In nieuw tabblad openen",
+  "df.wise.ExternalConfirmation.title": "Bevestig",
+  "df.wise.Help.ariaLabel": "Klik hier voor meer informatie.",
+  "df.wise.MultiSelect.summary": "{first} en nog {count}",
+  "df.wise.MultipleFileUploadSchema.maxFileSizeError": "Het bestand is te groot. Upload een kleiner bestand.",
+  "df.wise.MultipleFileUploadSchema.maxItemsError": "Upload {maxItems} of minder bestanden.",
+  "df.wise.MultipleFileUploadSchema.minItemsError": "Upload mimimaal {minItems} bestand(en).",
   "df.wise.PersistAsyncSchema.genericError": "Er ging iets mis, probeer het a. u. b. opnieuw.",
-  "df.wise.SearchLayout.loading": "Loading..."
+  "df.wise.SearchLayout.loading": "Laden..."
 }

package/build/main.css

@@ -265,6 +265,9 @@ button.df-back-btn {
     flex-direction: row;
   }
 }
+.df-image .df-illustration {
+  padding: 0;
+}
 .df-back-btn .tw-avatar__content {
   cursor: pointer;
   background-color: var(--color-background-neutral);
@@ -275,6 +278,7 @@ button.df-back-btn {
 .df-back-btn:active .tw-avatar__content {
   background-color: var(--color-background-neutral-active);
 }
-.df-image .df-illustration {
-  padding: 0;
+.splash-screen {
+  display: flex;
+  flex-direction: column;
 }

package/build/main.js

@@ -52743,7 +52743,7 @@ var translations = languages.reduce(
 var i18n_default = translations;
 
 // src/dynamicFlow/DynamicFlow.tsx
-var import_react28 = require("react");
+var import_react33 = require("react");
 var import_react_intl16 = require("react-intl");
 var import_dynamic_flow_client2 = require("@wise/dynamic-flow-client");
 
@@ -55138,6 +55138,126 @@ var getListAction = (callToAction) => {
 };
 var ListRenderer_default = ListRenderer;
 
+// ../renderers/src/step/SplashStepRenderer.tsx
+var import_jsx_runtime72 = require("react/jsx-runtime");
+var SplashStepRenderer = {
+  canRenderType: "step",
+  canRender: ({ control }) => control === "splash",
+  render: SplashStepRendererComponent
+};
+function SplashStepRendererComponent(props) {
+  const { back, children, external } = props;
+  const { requiresUserConfirmation, dismissConfirmation } = useExternal(external == null ? void 0 : external.url);
+  if ((external == null ? void 0 : external.url) && requiresUserConfirmation) {
+    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ExternalConfirmationDialog, { external, onClose: dismissConfirmation });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "splash-screen m-t-5", children: [
+    back ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(BackButton_default, __spreadValues({}, back)) : null,
+    children
+  ] });
+}
+
+// ../../node_modules/.pnpm/@wise+components-theming@1.6.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/components-theming/dist/const.mjs
+var baseThemes = ["light", "personal"];
+var extraThemes = ["forest-green", "bright-green"];
+var screenModes = ["light", "dark"];
+var modernThemes = [baseThemes[1], ...extraThemes];
+var DEFAULT_BASE_THEME = "light";
+var DEFAULT_SCREEN_MODE = "light";
+
+// ../../node_modules/.pnpm/@wise+components-theming@1.6.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/components-theming/dist/helpers.mjs
+var isThemeModern = (theme) => modernThemes.includes(theme);
+var isExtraTheme = (theme) => extraThemes.includes(theme);
+var isForestGreenTheme = (theme) => theme === extraThemes[0];
+var isScreenModeDark = (theme, screenMode) => isThemeModern(theme) && screenModes[1] === screenMode;
+var getThemeClassName = (theme, screenMode) => {
+  if (!isThemeModern(theme)) {
+    return `np-theme-${theme || "personal"}`;
+  }
+  let classes = `np-theme-personal`;
+  if (isExtraTheme(theme)) {
+    classes += ` ${classes}--${theme}`;
+  } else if (screenModes[1] === screenMode) {
+    classes += ` ${classes}--${screenMode}`;
+  }
+  return classes;
+};
+
+// ../../node_modules/.pnpm/@wise+components-theming@1.6.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/components-theming/dist/ThemeProvider.mjs
+var import_react29 = require("react");
+
+// ../../node_modules/.pnpm/@wise+components-theming@1.6.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/components-theming/dist/useTheme.mjs
+var import_react28 = require("react");
+var FALLBACK_VALUES = {
+  theme: DEFAULT_BASE_THEME,
+  screenMode: DEFAULT_SCREEN_MODE
+};
+var isNotProduction = () => {
+  try {
+    return ["localhost", "dev-wi.se"].includes(window.location.hostname);
+  } catch (e) {
+    return false;
+  }
+};
+var useTheme = () => {
+  const theming = (0, import_react28.useContext)(ThemeContext);
+  if (!theming && isNotProduction()) {
+    console.warn("Call to useTheme outside a ThemeProvider");
+  }
+  const {
+    theme,
+    screenMode: contextScreenMode
+  } = theming != null ? theming : FALLBACK_VALUES;
+  const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;
+  return (0, import_react28.useMemo)(() => ({
+    theme,
+    screenMode,
+    isModern: isThemeModern(theme),
+    isForestGreenTheme: isForestGreenTheme(theme),
+    isScreenModeDark: isScreenModeDark(theme, screenMode),
+    className: getThemeClassName(theme, screenMode)
+  }), [theme, screenMode]);
+};
+
+// ../../node_modules/.pnpm/@wise+components-theming@1.6.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/components-theming/dist/ThemeProvider.mjs
+var import_jsx_runtime73 = require("react/jsx-runtime");
+var ThemeContext = /* @__PURE__ */ (0, import_react29.createContext)(void 0);
+
+// ../renderers/src/utils/useCustomTheme.ts
+var import_react30 = require("react");
+var ThemeRequiredEventName = "Theme Required";
+var useCustomTheme = (theme, trackEvent) => {
+  const previousThemeHookValue = useTheme();
+  const previousTheme = (0, import_react30.useMemo)(() => previousThemeHookValue.theme, []);
+  (0, import_react30.useEffect)(() => {
+    trackEvent(ThemeRequiredEventName, { theme });
+    return theme !== previousTheme ? () => {
+      trackEvent(ThemeRequiredEventName, { theme: previousTheme });
+    } : () => {
+    };
+  }, []);
+};
+
+// ../renderers/src/step/SplashCelebrationStepRenderer.tsx
+var import_jsx_runtime74 = require("react/jsx-runtime");
+var SplashCelebrationStepRenderer = {
+  canRenderType: "step",
+  canRender: ({ control }) => control === "splash-celebration",
+  render: SplashCelebrationStepRendererComponent
+};
+function SplashCelebrationStepRendererComponent(props) {
+  const { back, children, external, trackEvent } = props;
+  useCustomTheme("forest-green", trackEvent);
+  const { requiresUserConfirmation, dismissConfirmation } = useExternal(external == null ? void 0 : external.url);
+  if ((external == null ? void 0 : external.url) && requiresUserConfirmation) {
+    return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ExternalConfirmationDialog, { external, onClose: dismissConfirmation });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "splash-screen m-t-5", children: [
+    back ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(BackButton_default, __spreadValues({}, back)) : null,
+    children
+  ] });
+}
+
 // ../renderers/src/getWiseRenderers.ts
 var getWiseRenderers = () => [
   AlertRenderer_default,
@@ -55170,46 +55290,95 @@ var getWiseRenderers = () => [
   StatusListRenderer_default,
   TextInputRenderer_default,
   UploadInputRenderer,
+  SplashStepRenderer,
+  SplashCelebrationStepRenderer,
   StepRenderer
 ];
 
+// src/dynamicFlow/filters/useFilteredOnEvent.ts
+var import_react31 = require("react");
+var useFilteredOnEvent = (onEvent, onAnalytics, onThemeChange) => (0, import_react31.useMemo)(
+  () => (name, properties) => {
+    onEvent == null ? void 0 : onEvent(name, properties);
+    if (name.includes(ThemeRequiredEventName)) {
+      const { theme } = properties != null ? properties : { theme: "personal" };
+      if (theme && isThemeModern(theme)) {
+        onThemeChange == null ? void 0 : onThemeChange(theme);
+      }
+    } else {
+      onAnalytics == null ? void 0 : onAnalytics(name, properties);
+    }
+  },
+  [onEvent, onAnalytics, onThemeChange]
+);
+
+// src/dynamicFlow/filters/useFilteredOnLog.ts
+var import_react32 = require("react");
+var useFilteredOnLog = (onLog) => (0, import_react32.useMemo)(() => {
+  return (level, message, extra) => {
+    if (level !== "info") {
+      onLog == null ? void 0 : onLog(level, message, extra);
+    }
+  };
+}, [onLog]);
+
 // src/dynamicFlow/DynamicFlow.tsx
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var wiseRenderers = getWiseRenderers();
 function DynamicFlowLegacy(props) {
   const { customFetch = globalThis.fetch } = props;
   const coreProps = __spreadProps(__spreadValues({}, props), { httpClient: customFetch });
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_dynamic_flow_client2.DynamicFlow, __spreadValues({}, coreProps));
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_dynamic_flow_client2.DynamicFlow, __spreadValues({}, coreProps));
 }
 function DynamicFlowRevamp(props) {
-  const { customFetch = globalThis.fetch, renderers, onLog, onLink = openLinkInNewTab } = props;
+  const {
+    customFetch = globalThis.fetch,
+    renderers,
+    onAnalytics,
+    onEvent,
+    onLog,
+    onLink = openLinkInNewTab,
+    onThemeChange
+  } = props;
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = (0, import_react28.useMemo)(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
+  const mergedRenderers = (0, import_react33.useMemo)(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
   const filteredOnLog = useFilteredOnLog(onLog);
+  const filteredOnEvent = useFilteredOnEvent(onEvent, onAnalytics, onThemeChange);
   const coreProps = __spreadProps(__spreadValues({}, props), {
     httpClient,
     renderers: mergedRenderers,
+    onEvent: filteredOnEvent,
     onLink,
     onLog: filteredOnLog
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_dynamic_flow_client2.DynamicFlowCoreRevamp, __spreadValues({}, coreProps));
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_dynamic_flow_client2.DynamicFlowCoreRevamp, __spreadValues({}, coreProps));
 }
-var DynamicForm = (0, import_react28.forwardRef)(function DynamicForm2(props, ref) {
-  const { customFetch = globalThis.fetch, renderers, onLog, onLink = openLinkInNewTab } = props;
+var DynamicForm = (0, import_react33.forwardRef)(function DynamicForm2(props, ref) {
+  const {
+    customFetch = globalThis.fetch,
+    renderers,
+    onAnalytics,
+    onEvent,
+    onLog,
+    onLink = openLinkInNewTab,
+    onThemeChange
+  } = props;
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = (0, import_react28.useMemo)(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
+  const mergedRenderers = (0, import_react33.useMemo)(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
+  const filteredOnEvent = useFilteredOnEvent(onEvent, onAnalytics, onThemeChange);
   const filteredOnLog = useFilteredOnLog(onLog);
   const coreProps = __spreadProps(__spreadValues({}, props), {
     httpClient,
     renderers: mergedRenderers,
+    onEvent: filteredOnEvent,
     onLink,
     onLog: filteredOnLog
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_dynamic_flow_client2.DynamicFormCore, __spreadProps(__spreadValues({}, coreProps), { ref }));
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_dynamic_flow_client2.DynamicFormCore, __spreadProps(__spreadValues({}, coreProps), { ref }));
 });
 var useWiseHttpClient = (httpClient) => {
   const { locale } = (0, import_react_intl16.useIntl)();
-  return (0, import_react28.useCallback)(
+  return (0, import_react33.useCallback)(
     async (input, init = {}) => {
       const headers = new Headers(init.headers);
       headers.set("accept-language", locale);
@@ -55227,13 +55396,6 @@ var openLinkInNewTab = (url) => {
     return false;
   }
 };
-var useFilteredOnLog = (onLog) => (0, import_react28.useMemo)(() => {
-  return (level, message, extra) => {
-    if (level !== "info") {
-      onLog == null ? void 0 : onLog(level, message, extra);
-    }
-  };
-}, [onLog]);
 /*! Bundled license information:
 
 classnames/index.js:

package/build/main.mjs

@@ -52733,7 +52733,7 @@ var translations = languages.reduce(
 var i18n_default = translations;
 
 // src/dynamicFlow/DynamicFlow.tsx
-import { forwardRef as forwardRef5, useCallback as useCallback2, useMemo as useMemo7 } from "react";
+import { forwardRef as forwardRef5, useCallback as useCallback2, useMemo as useMemo12 } from "react";
 import { useIntl as useIntl9 } from "react-intl";
 import {
   DynamicFlow as DynamicFlowCoreLegacy,
@@ -55138,6 +55138,126 @@ var getListAction = (callToAction) => {
 };
 var ListRenderer_default = ListRenderer;
 
+// ../renderers/src/step/SplashStepRenderer.tsx
+import { jsx as jsx71, jsxs as jsxs36 } from "react/jsx-runtime";
+var SplashStepRenderer = {
+  canRenderType: "step",
+  canRender: ({ control }) => control === "splash",
+  render: SplashStepRendererComponent
+};
+function SplashStepRendererComponent(props) {
+  const { back, children, external } = props;
+  const { requiresUserConfirmation, dismissConfirmation } = useExternal(external == null ? void 0 : external.url);
+  if ((external == null ? void 0 : external.url) && requiresUserConfirmation) {
+    return /* @__PURE__ */ jsx71(ExternalConfirmationDialog, { external, onClose: dismissConfirmation });
+  }
+  return /* @__PURE__ */ jsxs36("div", { className: "splash-screen m-t-5", children: [
+    back ? /* @__PURE__ */ jsx71(BackButton_default, __spreadValues({}, back)) : null,
+    children
+  ] });
+}
+
+// ../../node_modules/.pnpm/@wise+components-theming@1.6.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/components-theming/dist/const.mjs
+var baseThemes = ["light", "personal"];
+var extraThemes = ["forest-green", "bright-green"];
+var screenModes = ["light", "dark"];
+var modernThemes = [baseThemes[1], ...extraThemes];
+var DEFAULT_BASE_THEME = "light";
+var DEFAULT_SCREEN_MODE = "light";
+
+// ../../node_modules/.pnpm/@wise+components-theming@1.6.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/components-theming/dist/helpers.mjs
+var isThemeModern = (theme) => modernThemes.includes(theme);
+var isExtraTheme = (theme) => extraThemes.includes(theme);
+var isForestGreenTheme = (theme) => theme === extraThemes[0];
+var isScreenModeDark = (theme, screenMode) => isThemeModern(theme) && screenModes[1] === screenMode;
+var getThemeClassName = (theme, screenMode) => {
+  if (!isThemeModern(theme)) {
+    return `np-theme-${theme || "personal"}`;
+  }
+  let classes = `np-theme-personal`;
+  if (isExtraTheme(theme)) {
+    classes += ` ${classes}--${theme}`;
+  } else if (screenModes[1] === screenMode) {
+    classes += ` ${classes}--${screenMode}`;
+  }
+  return classes;
+};
+
+// ../../node_modules/.pnpm/@wise+components-theming@1.6.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/components-theming/dist/ThemeProvider.mjs
+import { createContext as createContext3, useContext as useContext5, useEffect as useEffect13, useMemo as useMemo8 } from "react";
+
+// ../../node_modules/.pnpm/@wise+components-theming@1.6.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/components-theming/dist/useTheme.mjs
+import { useContext as useContext4, useMemo as useMemo7 } from "react";
+var FALLBACK_VALUES = {
+  theme: DEFAULT_BASE_THEME,
+  screenMode: DEFAULT_SCREEN_MODE
+};
+var isNotProduction = () => {
+  try {
+    return ["localhost", "dev-wi.se"].includes(window.location.hostname);
+  } catch (e) {
+    return false;
+  }
+};
+var useTheme = () => {
+  const theming = useContext4(ThemeContext);
+  if (!theming && isNotProduction()) {
+    console.warn("Call to useTheme outside a ThemeProvider");
+  }
+  const {
+    theme,
+    screenMode: contextScreenMode
+  } = theming != null ? theming : FALLBACK_VALUES;
+  const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;
+  return useMemo7(() => ({
+    theme,
+    screenMode,
+    isModern: isThemeModern(theme),
+    isForestGreenTheme: isForestGreenTheme(theme),
+    isScreenModeDark: isScreenModeDark(theme, screenMode),
+    className: getThemeClassName(theme, screenMode)
+  }), [theme, screenMode]);
+};
+
+// ../../node_modules/.pnpm/@wise+components-theming@1.6.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/components-theming/dist/ThemeProvider.mjs
+import { jsx as jsx72 } from "react/jsx-runtime";
+var ThemeContext = /* @__PURE__ */ createContext3(void 0);
+
+// ../renderers/src/utils/useCustomTheme.ts
+import { useEffect as useEffect14, useMemo as useMemo9 } from "react";
+var ThemeRequiredEventName = "Theme Required";
+var useCustomTheme = (theme, trackEvent) => {
+  const previousThemeHookValue = useTheme();
+  const previousTheme = useMemo9(() => previousThemeHookValue.theme, []);
+  useEffect14(() => {
+    trackEvent(ThemeRequiredEventName, { theme });
+    return theme !== previousTheme ? () => {
+      trackEvent(ThemeRequiredEventName, { theme: previousTheme });
+    } : () => {
+    };
+  }, []);
+};
+
+// ../renderers/src/step/SplashCelebrationStepRenderer.tsx
+import { jsx as jsx73, jsxs as jsxs37 } from "react/jsx-runtime";
+var SplashCelebrationStepRenderer = {
+  canRenderType: "step",
+  canRender: ({ control }) => control === "splash-celebration",
+  render: SplashCelebrationStepRendererComponent
+};
+function SplashCelebrationStepRendererComponent(props) {
+  const { back, children, external, trackEvent } = props;
+  useCustomTheme("forest-green", trackEvent);
+  const { requiresUserConfirmation, dismissConfirmation } = useExternal(external == null ? void 0 : external.url);
+  if ((external == null ? void 0 : external.url) && requiresUserConfirmation) {
+    return /* @__PURE__ */ jsx73(ExternalConfirmationDialog, { external, onClose: dismissConfirmation });
+  }
+  return /* @__PURE__ */ jsxs37("div", { className: "splash-screen m-t-5", children: [
+    back ? /* @__PURE__ */ jsx73(BackButton_default, __spreadValues({}, back)) : null,
+    children
+  ] });
+}
+
 // ../renderers/src/getWiseRenderers.ts
 var getWiseRenderers = () => [
   AlertRenderer_default,
@@ -55170,42 +55290,91 @@ var getWiseRenderers = () => [
   StatusListRenderer_default,
   TextInputRenderer_default,
   UploadInputRenderer,
+  SplashStepRenderer,
+  SplashCelebrationStepRenderer,
   StepRenderer
 ];
 
+// src/dynamicFlow/filters/useFilteredOnEvent.ts
+import { useMemo as useMemo10 } from "react";
+var useFilteredOnEvent = (onEvent, onAnalytics, onThemeChange) => useMemo10(
+  () => (name, properties) => {
+    onEvent == null ? void 0 : onEvent(name, properties);
+    if (name.includes(ThemeRequiredEventName)) {
+      const { theme } = properties != null ? properties : { theme: "personal" };
+      if (theme && isThemeModern(theme)) {
+        onThemeChange == null ? void 0 : onThemeChange(theme);
+      }
+    } else {
+      onAnalytics == null ? void 0 : onAnalytics(name, properties);
+    }
+  },
+  [onEvent, onAnalytics, onThemeChange]
+);
+
+// src/dynamicFlow/filters/useFilteredOnLog.ts
+import { useMemo as useMemo11 } from "react";
+var useFilteredOnLog = (onLog) => useMemo11(() => {
+  return (level, message, extra) => {
+    if (level !== "info") {
+      onLog == null ? void 0 : onLog(level, message, extra);
+    }
+  };
+}, [onLog]);
+
 // src/dynamicFlow/DynamicFlow.tsx
-import { jsx as jsx71 } from "react/jsx-runtime";
+import { jsx as jsx74 } from "react/jsx-runtime";
 var wiseRenderers = getWiseRenderers();
 function DynamicFlowLegacy(props) {
   const { customFetch = globalThis.fetch } = props;
   const coreProps = __spreadProps(__spreadValues({}, props), { httpClient: customFetch });
-  return /* @__PURE__ */ jsx71(DynamicFlowCoreLegacy, __spreadValues({}, coreProps));
+  return /* @__PURE__ */ jsx74(DynamicFlowCoreLegacy, __spreadValues({}, coreProps));
 }
 function DynamicFlowRevamp(props) {
-  const { customFetch = globalThis.fetch, renderers, onLog, onLink = openLinkInNewTab } = props;
+  const {
+    customFetch = globalThis.fetch,
+    renderers,
+    onAnalytics,
+    onEvent,
+    onLog,
+    onLink = openLinkInNewTab,
+    onThemeChange
+  } = props;
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = useMemo7(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
+  const mergedRenderers = useMemo12(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
   const filteredOnLog = useFilteredOnLog(onLog);
+  const filteredOnEvent = useFilteredOnEvent(onEvent, onAnalytics, onThemeChange);
   const coreProps = __spreadProps(__spreadValues({}, props), {
     httpClient,
     renderers: mergedRenderers,
+    onEvent: filteredOnEvent,
     onLink,
     onLog: filteredOnLog
   });
-  return /* @__PURE__ */ jsx71(DynamicFlowCoreRevamp, __spreadValues({}, coreProps));
+  return /* @__PURE__ */ jsx74(DynamicFlowCoreRevamp, __spreadValues({}, coreProps));
 }
 var DynamicForm = forwardRef5(function DynamicForm2(props, ref) {
-  const { customFetch = globalThis.fetch, renderers, onLog, onLink = openLinkInNewTab } = props;
+  const {
+    customFetch = globalThis.fetch,
+    renderers,
+    onAnalytics,
+    onEvent,
+    onLog,
+    onLink = openLinkInNewTab,
+    onThemeChange
+  } = props;
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = useMemo7(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
+  const mergedRenderers = useMemo12(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
+  const filteredOnEvent = useFilteredOnEvent(onEvent, onAnalytics, onThemeChange);
   const filteredOnLog = useFilteredOnLog(onLog);
   const coreProps = __spreadProps(__spreadValues({}, props), {
     httpClient,
     renderers: mergedRenderers,
+    onEvent: filteredOnEvent,
     onLink,
     onLog: filteredOnLog
   });
-  return /* @__PURE__ */ jsx71(DynamicFormCore, __spreadProps(__spreadValues({}, coreProps), { ref }));
+  return /* @__PURE__ */ jsx74(DynamicFormCore, __spreadProps(__spreadValues({}, coreProps), { ref }));
 });
 var useWiseHttpClient = (httpClient) => {
   const { locale } = useIntl9();
@@ -55227,13 +55396,6 @@ var openLinkInNewTab = (url) => {
     return false;
   }
 };
-var useFilteredOnLog = (onLog) => useMemo7(() => {
-  return (level, message, extra) => {
-    if (level !== "info") {
-      onLog == null ? void 0 : onLog(level, message, extra);
-    }
-  };
-}, [onLog]);
 export {
   DynamicFlowLegacy,
   DynamicFlowRevamp,

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

@@ -1,4 +1,5 @@
 import type { DynamicFlowProps as DynamicFlowCoreLegacyProps, DynamicFlowRevampProps as DynamicFlowCoreRevampProps, DynamicFlowRevampPropsWithInitialAction, DynamicFlowRevampPropsWithInitialStep, DynamicFormController, DynamicFlowLegacyPropsWithInitialAction, DynamicFlowLegacyPropsWithInitialStep } from '@wise/dynamic-flow-client';
+import { Theming } from '@wise/components-theming';
 /**
  * @deprecated Use DynamicFlowRevampProps instead. See https://transferwise.atlassian.net/wiki/x/B0FJwg
  */
@@ -10,8 +11,11 @@ export type DynamicFlowLegacyProps = (Omit<DynamicFlowLegacyPropsWithInitialActi
  */
 export declare function DynamicFlowLegacy(props: DynamicFlowLegacyProps): import("react/jsx-runtime").JSX.Element;
 type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+export type OnThemeChange = (theme: Theming['theme']) => void;
 export type DynamicFlowRevampProps = (MakeOptional<Omit<DynamicFlowRevampPropsWithInitialAction, 'httpClient'>, 'renderers' | 'onLink'> | MakeOptional<Omit<DynamicFlowRevampPropsWithInitialStep, 'httpClient'>, 'renderers' | 'onLink'>) & {
     customFetch?: DynamicFlowCoreRevampProps['httpClient'];
+    onAnalytics?: DynamicFlowCoreRevampProps['onEvent'];
+    onThemeChange?: OnThemeChange;
 };
 export declare function DynamicFlowRevamp(props: DynamicFlowRevampProps): import("react/jsx-runtime").JSX.Element;
 export type DynamicFormProps = Omit<DynamicFlowRevampProps, 'onCompletion'> & {

package/build/types/dynamicFlow/filters/useFilteredOnEvent.d.ts

@@ -0,0 +1,5 @@
+import { OnThemeChange } from '../DynamicFlow';
+import { DynamicFlowRevampProps } from '@wise/dynamic-flow-client';
+type OnEvent = DynamicFlowRevampProps['onEvent'];
+export declare const useFilteredOnEvent: (onEvent: OnEvent, onAnalytics: OnEvent, onThemeChange?: OnThemeChange) => OnEvent;
+export {};

package/build/types/dynamicFlow/filters/useFilteredOnLog.d.ts

@@ -0,0 +1,4 @@
+import { DynamicFlowRevampProps } from '@wise/dynamic-flow-client';
+type OnLog = DynamicFlowRevampProps['onLog'];
+export declare const useFilteredOnLog: (onLog: OnLog) => OnLog;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -30,30 +30,30 @@
     "url": "git+https://github.com/transferwise/dynamic-flow.git"
   },
   "devDependencies": {
-    "@babel/core": "7.26.9",
+    "@babel/core": "7.26.10",
     "@babel/plugin-syntax-flow": "7.26.0",
     "@babel/plugin-transform-react-jsx": "7.25.9",
     "@babel/preset-env": "7.26.9",
     "@babel/preset-react": "7.26.3",
     "@babel/preset-typescript": "7.26.0",
-    "@chromatic-com/storybook": "3.2.5",
+    "@chromatic-com/storybook": "3.2.6",
     "@formatjs/cli": "^6.6.1",
-    "@storybook/addon-a11y": "^8.6.3",
-    "@storybook/addon-actions": "^8.6.3",
-    "@storybook/addon-essentials": "^8.6.3",
-    "@storybook/addon-interactions": "^8.6.3",
-    "@storybook/addon-links": "^8.6.3",
+    "@storybook/addon-a11y": "^8.6.7",
+    "@storybook/addon-actions": "^8.6.7",
+    "@storybook/addon-essentials": "^8.6.7",
+    "@storybook/addon-interactions": "^8.6.7",
+    "@storybook/addon-links": "^8.6.7",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
-    "@storybook/react": "^8.6.3",
-    "@storybook/react-webpack5": "^8.6.3",
-    "@storybook/test": "^8.6.3",
+    "@storybook/react": "^8.6.7",
+    "@storybook/react-webpack5": "^8.6.7",
+    "@storybook/test": "^8.6.7",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",
     "@testing-library/user-event": "14.6.1",
-    "@transferwise/components": "46.93.1",
+    "@transferwise/components": "46.94.1",
     "@transferwise/formatting": "^2.13.1",
-    "@transferwise/icons": "3.18.0",
+    "@transferwise/icons": "3.19.1",
     "@transferwise/neptune-css": "14.22.0",
     "@types/jest": "29.5.14",
     "@types/react": "18.3.18",
@@ -62,20 +62,20 @@
     "@wise/components-theming": "^1.6.1",
     "babel-jest": "29.7.0",
     "currency-flags": "4.0.7",
-    "esbuild": "0.25.0",
+    "esbuild": "0.25.1",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "jest-watch-typeahead": "^2.2.2",
     "npm-run-all2": "7.0.2",
     "postcss": "^8.5.3",
-    "postcss-cli": "^11.0.0",
+    "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-intl": "6.8.9",
-    "storybook": "^8.6.3",
-    "stylelint": "16.15.0",
+    "storybook": "^8.6.7",
+    "stylelint": "16.16.0",
     "stylelint-config-standard": "36.0.1",
     "stylelint-no-unsupported-browser-features": "8.0.4",
     "stylelint-value-no-unknown-custom-properties": "6.0.1",
@@ -83,8 +83,8 @@
     "typescript": "5.8.2",
     "webpack": "5.98.0",
     "@wise/dynamic-flow-fixtures": "0.0.1",
-    "@wise/dynamic-flow-renderers": "0.0.0",
-    "@wise/dynamic-flow-types": "3.0.1"
+    "@wise/dynamic-flow-types": "3.1.0",
+    "@wise/dynamic-flow-renderers": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.92.0",
@@ -92,14 +92,15 @@
     "@transferwise/icons": "^3.18.0",
     "@transferwise/neptune-css": "^14.22.0",
     "@wise/art": "^2.19.0",
+    "@wise/components-theming": "^0.7.1 || ^1",
     "react-dom": "^18",
     "react-intl": "^6",
     "react": "^18"
   },
   "dependencies": {
     "classnames": "2.5.1",
-    "@wise/dynamic-flow-client": "4.0.2",
-    "@wise/dynamic-flow-types": "3.0.1"
+    "@wise/dynamic-flow-client": "4.0.3",
+    "@wise/dynamic-flow-types": "3.1.0"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3005",