@wise/dynamic-flow-client 3.2.2 → 3.3.1

package/build/main.mjs

@@ -3478,13 +3478,14 @@ var logInvalidTypeFallbackWarning = ({
 };
 
 // src/legacy/formControl/utils/getAutocompleteString.ts
-var getAutocompleteString = (hints) => {
-  const validHints = hints.filter((hint) => autocompleteTokenMap[hint]);
-  if (validHints.length === 0) {
-    return "off";
-  }
-  return validHints.map((hint) => autocompleteTokenMap[hint]).join(" ");
-};
+var getAutocompleteString = (hints, { prefix = "", suffix = "" } = {}) => {
+  const autoCompleteString = hints.map((hint) => {
+    const builtHint = `${prefix}${hint}${suffix}`;
+    return isAutocompleteToken(builtHint) ? autocompleteTokenMap[builtHint] : void 0;
+  }).filter((str) => str).join(" ");
+  return autoCompleteString || "off";
+};
+var isAutocompleteToken = (str) => Object.keys(autocompleteTokenMap).some((hint) => hint === str);
 var autocompleteTokenMap = {
   on: "on",
   name: "name",
@@ -3557,15 +3558,12 @@ import { Fragment as Fragment4, jsx as jsx27 } from "react/jsx-runtime";
 var _FormControl = class _FormControl extends PureComponent {
   constructor(props) {
     super(props);
-    this.getAutocompleteValue = () => {
+    this.getAutocompleteValue = ({ prefix = "", suffix = "" } = {}) => {
       const { autoComplete, autocompleteHint } = this.props;
       if (isArray(autocompleteHint)) {
-        return getAutocompleteString(autocompleteHint);
+        return getAutocompleteString(autocompleteHint, { prefix, suffix });
       }
-      if (autoComplete === true) {
-        return "on";
-      }
-      return "off";
+      return autoComplete ? "on" : "off";
     };
     this.handleOnChange = (value, metadata) => {
       this.props.onChange(value, void 0, metadata);
@@ -3796,6 +3794,8 @@ var _FormControl = class _FormControl extends PureComponent {
         return /* @__PURE__ */ jsx27(
           DateInput,
           {
+            dayAutoComplete: this.getAutocompleteValue({ suffix: "-day" }),
+            yearAutoComplete: this.getAutocompleteValue({ suffix: "-year" }),
             disabled,
             size,
             value: getSafeDateOrStringValue(value),
@@ -8008,7 +8008,7 @@ var th_default = {
 // src/i18n/tr.json
 var tr_default = {
   "dynamicFlows.ArraySchema.addItem": "Kaydet",
-  "dynamicFlows.ArraySchema.addItemTitle": "\xD6\u011Fe ekle",
+  "dynamicFlows.ArraySchema.addItemTitle": "\xD6ge ekle",
   "dynamicFlows.ArraySchema.editItem": "Kaydet",
   "dynamicFlows.ArraySchema.maxItemsError": "L\xFCtfen {maxItems} veya daha az ekleme yap\u0131n",
   "dynamicFlows.ArraySchema.minItemsError": "L\xFCtfen en az {minItems} ekleme yap\u0131n.",
@@ -8039,7 +8039,7 @@ var tr_default = {
   "dynamicFlows.DynamicExternal.retryTitle": "Pencereyi yeniden a\xE7",
   "dynamicFlows.DynamicParagraph.copied": "Panoya kopyaland\u0131",
   "dynamicFlows.DynamicParagraph.copy": "Kopyala",
-  "dynamicFlows.ErrorBoundary.errorAlert": "Bir \u015Fey yanl\u0131\u015F gitti.",
+  "dynamicFlows.ErrorBoundary.errorAlert": "Bir sorun olu\u015Ftu.",
   "dynamicFlows.ErrorBoundary.retry": "Tekrar dene",
   "dynamicFlows.ExternalConfirmation.cancel": "\u0130ptal edin",
   "dynamicFlows.ExternalConfirmation.description": "L\xFCtfen yeni bir taray\u0131c\u0131 sekmesinde **{origin}** a\xE7mak istedi\u011Finizi onaylay\u0131n.",
@@ -8243,7 +8243,7 @@ function $1746a345f3d73bb7$export$f680877a34711e37(deterministicId) {
   return deterministicId || (id ? `radix-${id}` : "");
 }
 
-// ../../node_modules/.pnpm/@wise+forms@0.3.1_@transferwise+components@46.17.2_@types+react@18.0.29_react@18.2.0/node_modules/@wise/forms/dist/index.esm.js
+// ../../node_modules/.pnpm/@wise+forms@0.3.3_@transferwise+components@46.20.1_@types+react@18.0.29_react@18.2.0/node_modules/@wise/forms/dist/index.esm.js
 var import_classnames9 = __toESM(require_classnames());
 import { InlineAlert as InlineAlert2, Sentiment as Sentiment2, Input as Input2, TextArea } from "@transferwise/components";
 import { createContext as createContext6, useContext as useContext7, forwardRef as forwardRef2 } from "react";
@@ -8255,11 +8255,13 @@ var FormControlDescribedByProvider = FormControlDescribedByContext.Provider;
 var FormControlInvalidContext = /* @__PURE__ */ createContext6(void 0);
 var FormControlInvalidProvider = FormControlInvalidContext.Provider;
 var Label = ({
+  id,
   htmlFor,
   className,
   children
 }) => {
   return /* @__PURE__ */ jsx74("label", {
+    id,
     htmlFor,
     className: (0, import_classnames9.default)("control-label d-flex flex-column gap-y-1 m-b-0", className),
     children
@@ -8276,7 +8278,7 @@ var Field = ({
   const hasError = Boolean(error);
   const hasHint = Boolean(hint) && !hasError;
   const fallbackInputId = $1746a345f3d73bb7$export$f680877a34711e37();
-  const inputId = id != null ? id : fallbackInputId;
+  const inputId = id !== null ? id != null ? id : fallbackInputId : void 0;
   const descriptionId = $1746a345f3d73bb7$export$f680877a34711e37();
   return /* @__PURE__ */ jsx74(InputIdContextProvider, {
     value: inputId,
@@ -9978,36 +9980,9 @@ var getWiseRenderers = () => [
 ];
 
 // src/revamp/DynamicFlowCore.tsx
-import { useCallback as useCallback11, useEffect as useEffect24, useMemo as useMemo18, useRef as useRef9, useState as useState31 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect23, useMemo as useMemo18, useRef as useRef9, useState as useState30 } from "react";
 import { useIntl as useIntl22 } from "react-intl";
 
-// src/revamp/domain/features/events/getAnalyticsEventDispatcher.ts
-var getAnalyticsEventDispatcher = ({
-  flowId,
-  stepId,
-  analytics,
-  onEvent
-}) => {
-  const metadata = __spreadValues(__spreadValues({
-    flowId
-  }, stepId ? { stepId } : {}), analytics != null ? analytics : {});
-  return (eventName, properties = {}) => {
-    try {
-      onEvent == null ? void 0 : onEvent(`${eventNamePrefix}${eventName}`, __spreadValues(__spreadValues({}, metadata), properties));
-    } catch (e) {
-    }
-  };
-};
-var eventNamePrefix = "Dynamic Flow - ";
-
-// src/revamp/domain/features/events/getLogggingEventDispatcher.ts
-var getLoggingEventDispatcher = (onLog) => (level, message, extra = {}) => {
-  try {
-    onLog == null ? void 0 : onLog(level, message, extra);
-  } catch (e) {
-  }
-};
-
 // src/revamp/utils/type-validators.ts
 var isString2 = (value) => typeof value === "string";
 var isNumber3 = (value) => typeof value === "number" && !Number.isNaN(value);
@@ -10020,87 +9995,12 @@ var isUndefined3 = (value) => typeof value === "undefined";
 var isNullish3 = (v) => isNull3(v) || isUndefined3(v);
 var isFile = (value) => value instanceof File;
 
-// src/revamp/flow/response-utils.ts
-var assertResponseIsValid2 = (response) => {
-  if (!isResponse2(response)) {
-    throw new Error("Incorrect type of response from fetch. Expected object of type Response.");
-  }
-  if (response.bodyUsed) {
-    throw new Error(
-      "The body of the provided Response object has already been used. Every request must respond with a new Response object."
-    );
-  }
-};
-var isResponse2 = (response) => typeof response === "object" && response !== null && "clone" in response && "bodyUsed" in response;
-var parseResponseBodyAsJsonElement = async (response) => {
-  try {
-    return await response.json();
-  } catch (e) {
-    return null;
-  }
-};
-function assertActionResponseBody(body) {
-  if (!isObject2(body) || !isObject2(body.action)) {
-    throw new Error(
-      "Incorrect response body in action response. Expected an object satisfying the type { action: Action }."
-    );
-  }
-}
-function isErrorResponseBody(body) {
-  return Boolean(
-    isObject2(body) && (body.refreshFormUrl || body.refreshUrl || body.validation || body.error || body.analytics)
-  );
-}
-function assertStepResponseBody(body) {
-  if (!isObject2(body)) {
-    throw new Error("Incorrect response body in step response. Expected an object.");
-  }
-}
-
-// src/revamp/flow/executeRefresh.ts
-var executeRefresh = async (props) => {
-  const { abortSignal, url, model, schemaId, etag, httpClient, trackEvent } = props;
-  trackEvent("Refresh Triggered", { schema: schemaId });
-  try {
-    const response = await httpClient(url != null ? url : "", {
-      method: "POST",
-      body: JSON.stringify(model),
-      headers: __spreadValues({
-        "Content-Type": "application/json"
-      }, etag ? { "If-None-Match": etag } : {}),
-      signal: abortSignal
-    });
-    if (response.status === 304) {
-      trackEvent("Refresh Succeeded", { schema: schemaId });
-      return { type: "noop" };
-    }
-    if (!response.ok) {
-      const responseBody = await parseResponseBodyAsJsonElement(response).catch(() => ({}));
-      const body2 = isErrorResponseBody(responseBody) ? responseBody : {};
-      trackEvent("Refresh Failed", __spreadValues({ schema: schemaId }, body2.analytics));
-      return { type: "error", body: body2 };
-    }
-    const newEtag = response.headers.get("etag") || null;
-    const body = await parseResponseBodyAsJsonElement(response);
-    assertStepResponseBody(body);
-    trackEvent("Refresh Succeeded", { schema: schemaId });
-    return { type: "refresh-step", step: body, etag: newEtag };
-  } catch (error) {
-    if (error instanceof DOMException && error.name === "AbortError") {
-      trackEvent("Refresh Aborted", { schema: schemaId });
-      return { type: "noop" };
-    }
-    trackEvent("Refresh Failed", { schema: schemaId });
-    return { type: "error", body: {} };
-  }
-};
-
 // src/revamp/utils/type-utils.ts
 var hasChildren = (component) => "getChildren" in component && typeof component.getChildren === "function";
 var isColumnsComponent = (component) => Object.hasOwnProperty.call(component, "startComponents") && Object.hasOwnProperty.call(component, "endComponents");
 var isHiddenComponent = (component) => "hidden" in component && component.hidden;
 var isRepeatableComponent = (component) => Object.hasOwnProperty.call(component, "editableComponent");
-var isObjectLocalValue = (value) => value != null && typeof value === "object" && !Array.isArray(value);
+var isObjectLocalValue = (value) => value != null && typeof value === "object" && !Array.isArray(value) && !(value instanceof File);
 var isObjectModel2 = (model) => model != null && typeof model === "object" && !Array.isArray(model);
 var isArrayModel2 = (model) => Array.isArray(model);
 var isAllOfSchema2 = (schema) => "allOf" in schema && !isNullish3(schema.allOf);
@@ -10147,125 +10047,6 @@ var mergeModels = (valueA, valueB) => {
   return valueB;
 };
 
-// src/revamp/flow/getResponseType.ts
-var responseTypes = ["step", "action", "exit"];
-var getResponseType = async (response) => {
-  var _a, _b;
-  assertResponseIsValid2(response);
-  if ((_a = response.headers) == null ? void 0 : _a.has("X-Df-Response-Type")) {
-    const type = response.headers.get("X-Df-Response-Type");
-    assertDFResponseType(type);
-    return type;
-  }
-  if ((_b = response.headers) == null ? void 0 : _b.has("X-Df-Exit")) {
-    return "exit";
-  }
-  const jsonBody = await parseResponseBodyAsJsonElement(response.clone());
-  if (isObject2(jsonBody) && jsonBody.action) {
-    return "action";
-  }
-  return "step";
-};
-function assertDFResponseType(type) {
-  if (!responseTypes.includes(type)) {
-    throw new Error(
-      "Unsupported X-Df-Response-Type. Allowed values are 'step', 'action', 'exit', 'error'."
-    );
-  }
-}
-
-// src/revamp/flow/executeSubmission.ts
-var executeSubmission = async (props) => {
-  const { httpClient, trackEvent } = props;
-  const triggerAction = async (action, model, isInitial) => {
-    const { exit, url, method = "POST", result = null, id: actionId } = action;
-    const trackSubmissionEvent = !isInitial ? trackEvent : () => {
-    };
-    trackSubmissionEvent("Action Triggered", { actionId });
-    if (exit && !url) {
-      trackSubmissionEvent("Action Succeeded", { actionId });
-      return { type: "complete", result };
-    }
-    try {
-      const response = await httpClient(url != null ? url : "", {
-        method,
-        body: method === "GET" ? void 0 : JSON.stringify(model),
-        headers: { "Content-Type": "application/json" }
-      });
-      if (!response.ok) {
-        return await handleErrorResponse(response, actionId);
-      }
-      const responseType = await getResponseType(response);
-      const body = await parseResponseBodyAsJsonElement(response);
-      if (exit) {
-        return { type: "complete", result: mergeModels(result, body) };
-      }
-      switch (responseType) {
-        case "step": {
-          const etag = response.headers.get("etag") || null;
-          assertStepResponseBody(body);
-          trackSubmissionEvent("Action Succeeded", { actionId });
-          return { type: "replace-step", step: body, etag };
-        }
-        case "exit": {
-          trackSubmissionEvent("Action Succeeded", { actionId });
-          return { type: "complete", result: mergeModels(result, body) };
-        }
-        case "action": {
-          assertActionResponseBody(body);
-          trackSubmissionEvent("Action Succeeded", { actionId });
-          return await triggerAction(body.action, null, false);
-        }
-        default: {
-          throw new Error(`Unsupported response type: ${String(responseType)}`);
-        }
-      }
-    } catch (error) {
-      trackSubmissionEvent("Action Failed", { actionId });
-      throw error;
-    }
-  };
-  const handleErrorResponse = async (response, actionId) => {
-    const body = await parseResponseBodyAsJsonElement(response);
-    if (isErrorResponseBody(body)) {
-      const refreshUrl = body.refreshUrl || body.refreshFormUrl;
-      const { error, validation, analytics } = body;
-      trackEvent("Action Failed", __spreadValues({ actionId }, analytics));
-      const errors = { error, validation };
-      return refreshUrl ? { type: "refresh", body: { refreshUrl, errors } } : { type: "error", body: { errors, analytics } };
-    }
-    trackEvent("Action Failed", { actionId });
-    return { type: "error", body: {} };
-  };
-  return triggerAction(props.action, props.model, props.isInitial);
-};
-
-// src/revamp/renderers/CoreContainerRenderer.tsx
-import { Fragment as Fragment23, jsx as jsx116 } from "react/jsx-runtime";
-var CoreContainerRenderer = {
-  canRenderType: "container",
-  render: ({ children }) => /* @__PURE__ */ jsx116(Fragment23, { children })
-};
-
-// src/revamp/renderers/StepRenderer.tsx
-import { useMemo as useMemo17 } from "react";
-import { jsx as jsx117 } from "react/jsx-runtime";
-var StepRenderer = {
-  canRenderType: "step",
-  render: StepRendererComponent
-};
-function StepRendererComponent({ children, loadingState }) {
-  const value = useMemo17(() => ({ loadingState }), [loadingState]);
-  return /* @__PURE__ */ jsx117(LoadingContextProvider, { value, children });
-}
-
-// src/revamp/step/Step.tsx
-import { useCallback as useCallback10, useEffect as useEffect23, useRef as useRef8, useState as useState30 } from "react";
-
-// src/revamp/domain/features/validation/validation-functions.ts
-var validateComponents = (components) => components.reduce((acc, component) => component.validate() && acc, true);
-var getLocalValueValidator = (checks) => (currentValue) => checks.map((check) => check(currentValue)).filter(isString2);
-
 // src/revamp/domain/features/summary/summary-utils.ts
 var getSummariser = (schema) => (value) => {
   const { summary, icon, image } = schema;
@@ -10302,46 +10083,64 @@ var summaryIfProvides = (summary, { value, icon, image }) => {
   };
 };
 
-// src/revamp/domain/components/StepDomainComponent.ts
-var createStepComponent = (containerProps) => __spreadProps(__spreadValues({}, containerProps), {
-  type: "step",
-  getChildren() {
-    return this.components;
-  },
-  async getSubmittableValue() {
-    return getSubmittableData(this.components);
-  },
-  getSummary() {
-    return summariseFromChildren(this.getChildren());
-  },
-  getLocalValue() {
-    return getLocalValues(this.components);
-  },
-  validate() {
-    return validateComponents(this.getChildren());
-  }
-});
-var createEmptyStepComponent = () => createStepComponent({
-  uid: "",
-  loadingState: "idle",
-  components: []
-});
+// src/revamp/domain/features/validation/validation-functions.ts
+var validateComponents = (components) => components.reduce((acc, component) => component.validate() && acc, true);
+var getLocalValueValidator = (checks) => (currentValue) => checks.map((check) => check(currentValue)).filter(isString2);
 
-// src/revamp/domain/components/AlertComponent.ts
-var createAlertComponent = (alertProps) => __spreadProps(__spreadValues({
-  type: "alert"
-}, alertProps), {
-  getSubmittableValue: async () => null,
-  getLocalValue: () => null,
-  getSummary: () => ({}),
-  // Noop
-  validate: () => true
-});
+// src/revamp/domain/components/utils/component-utils.ts
+var getInputUpdateFunction = (uid, updateComponent) => (updateFn) => {
+  updateComponent(uid, (draft) => {
+    const draftState = draft;
+    updateFn(draftState);
+  });
+};
 
-// src/revamp/domain/mappers/utils/legacy-utils.ts
-var mapLegacyContext = (context) => {
-  switch (context) {
-    case "success":
+// src/revamp/domain/components/StepDomainComponent.ts
+var createStepComponent = (stepProps) => {
+  const _a = stepProps, { uid, updateComponent } = _a, rest = __objRest(_a, ["uid", "updateComponent"]);
+  const update = getInputUpdateFunction(uid, updateComponent);
+  return __spreadProps(__spreadValues({
+    uid
+  }, rest), {
+    type: "step",
+    getChildren() {
+      return this.components;
+    },
+    async getSubmittableValue() {
+      return getSubmittableData(this.components);
+    },
+    getSummary() {
+      return summariseFromChildren(this.getChildren());
+    },
+    getLocalValue() {
+      return getLocalValues(this.components);
+    },
+    validate() {
+      return validateComponents(this.getChildren());
+    },
+    setLoadingState(loadingState) {
+      update((draft) => {
+        draft.loadingState = loadingState;
+      });
+    }
+  });
+};
+
+// src/revamp/domain/components/AlertComponent.ts
+var createAlertComponent = (alertProps) => __spreadProps(__spreadValues({
+  type: "alert"
+}, alertProps), {
+  getSubmittableValue: async () => null,
+  getLocalValue: () => null,
+  getSummary: () => ({}),
+  // Noop
+  validate: () => true
+});
+
+// src/revamp/domain/mappers/utils/legacy-utils.ts
+var mapLegacyContext = (context) => {
+  switch (context) {
+    case "success":
       return "positive";
     case "failure":
       return "negative";
@@ -10582,14 +10381,6 @@ var createDividerComponent = (props) => __spreadProps(__spreadValues({
 // src/revamp/domain/mappers/layout/dividerLayoutToComponent.ts
 var dividerLayoutToComponent = (uid, { control, margin = "md" }) => createDividerComponent({ uid, control, margin });
 
-// src/revamp/domain/components/utils/component-utils.ts
-var getInputUpdateFunction = (uid, updateComponent) => (updateFn) => {
-  updateComponent(uid, (draft) => {
-    const draftState = draft;
-    updateFn(draftState);
-  });
-};
-
 // src/revamp/domain/features/utils/http-utils.ts
 function constructPayload({
   value,
@@ -11041,6 +10832,43 @@ var autocompleteTokenMap2 = {
   pager: "pager"
 };
 
+// src/revamp/flow/response-utils.ts
+var assertResponseIsValid2 = (response) => {
+  if (!isResponse2(response)) {
+    throw new Error("Incorrect type of response from fetch. Expected object of type Response.");
+  }
+  if (response.bodyUsed) {
+    throw new Error(
+      "The body of the provided Response object has already been used. Every request must respond with a new Response object."
+    );
+  }
+};
+var isResponse2 = (response) => typeof response === "object" && response !== null && "clone" in response && "bodyUsed" in response;
+var parseResponseBodyAsJsonElement = async (response) => {
+  try {
+    return await response.json();
+  } catch (e) {
+    return null;
+  }
+};
+function assertActionResponseBody(body) {
+  if (!isObject2(body) || !isObject2(body.action)) {
+    throw new Error(
+      "Incorrect response body in action response. Expected an object satisfying the type { action: Action }."
+    );
+  }
+}
+function isErrorResponseBody(body) {
+  return Boolean(
+    isObject2(body) && (body.refreshFormUrl || body.refreshUrl || body.validation || body.error || body.analytics)
+  );
+}
+function assertStepResponseBody(body) {
+  if (!isObject2(body)) {
+    throw new Error("Incorrect response body in step response. Expected an object.");
+  }
+}
+
 // src/revamp/domain/features/utils/response-utils.ts
 var getAnalyticsFromErrorResponse = (json) => {
   if (!isErrorResponseBody(json)) {
@@ -11583,6 +11411,22 @@ var integerSchemaToComponent = (schemaMapperProps, mapperProps) => {
   );
 };
 
+// src/revamp/domain/components/utils/getComponentForLocalValueKey.ts
+var getComponentForLocalValueKey = (key, component) => {
+  if (component.type === "object") {
+    return component.componentMap[key];
+  }
+  if (component.type === "select") {
+    const selectedChild = component.getSelectedChild();
+    return selectedChild ? getComponentForLocalValueKey(key, selectedChild) : null;
+  }
+  const child = hasChildren(component) ? [...component.getChildren()].reverse().find((c) => {
+    const v = c.getLocalValue();
+    return isObjectLocalValue(v) && key in v;
+  }) : void 0;
+  return child ? getComponentForLocalValueKey(key, child) : null;
+};
+
 // src/revamp/domain/components/utils/isPartialLocalValueMatch.ts
 var isPartialLocalValueMatch = (partialValue, component) => {
   if (isArray2(partialValue) && component.type === "repeatable") {
@@ -11592,18 +11436,19 @@ var isPartialLocalValueMatch = (partialValue, component) => {
       return childComponent ? isPartialLocalValueMatch(value, childComponent) : false;
     });
   }
-  if (isObjectLocalValue(partialValue) && component.type === "object") {
+  const componentValue = component.getLocalValue();
+  if (isObjectLocalValue(partialValue) && isObjectLocalValue(componentValue)) {
     const allKeys = Array.from(
-      /* @__PURE__ */ new Set([...Object.keys(partialValue), ...Object.keys(component.componentMap)])
+      /* @__PURE__ */ new Set([...Object.keys(partialValue), ...Object.keys(componentValue)])
     );
     const matchingKeys = allKeys.filter(
-      (key) => !isNullish3(partialValue[key]) && !isNullish3(component.componentMap[key])
-    );
-    return matchingKeys.every(
-      (key) => isPartialLocalValueMatch(partialValue[key], component.componentMap[key])
+      (key) => !isNullish3(partialValue[key]) && !isNullish3(componentValue[key])
     );
+    return matchingKeys.every((key) => {
+      const componentForKey = getComponentForLocalValueKey(key, component);
+      return componentForKey ? isPartialLocalValueMatch(partialValue[key], componentForKey) : false;
+    });
   }
-  const componentValue = component.getLocalValue();
   if (partialValue instanceof File && componentValue instanceof File) {
     return areEquivalentFiles(partialValue, componentValue);
   }
@@ -12810,7 +12655,8 @@ var formLayoutToComponent = (uid, { schemaId, schema: schemaRef, control, margin
           schema,
           model: model != null ? model : null,
           localValue: stepLocalValue,
-          validationErrors: errors == null ? void 0 : errors.validation
+          validationErrors: errors == null ? void 0 : errors.validation,
+          required: true
         },
         mapperProps
       )
@@ -13242,9 +13088,47 @@ var mapStepToComponent = (_a) => {
     "loadingState",
     "displayStepTitle"
   ]);
-  const { id, key, title, layout = [], errors } = mapperProps.step;
+  var _a2;
+  const { step, updateComponent } = mapperProps;
+  const { id, key, layout = [] } = step;
+  const refreshUrl = (_a2 = step.refreshUrl) != null ? _a2 : step.refreshFormUrl;
   const stepId = id || key;
+  if (stepId === void 0) {
+    throw new Error("Step must have an id or a key");
+  }
   const uid = stepId != null ? stepId : "step";
+  const onAction = async (action) => {
+    try {
+      await stepComponent.getSubmittableValue();
+      const skipValidation = action.method === "GET" || Boolean(action.skipValidation);
+      const canSubmit = skipValidation || stepComponent.validate();
+      if (canSubmit) {
+        void mapperProps.onAction(action);
+      }
+    } catch (e) {
+      if (true) {
+        console.log("\u274C:", "Failed to get submittable data");
+      }
+    }
+  };
+  const onRefresh = async (schemaId, url) => mapperProps.onRefresh(schemaId, url != null ? url : refreshUrl);
+  const layoutComponents = layout.map(
+    (layoutComponent, index) => mapLayoutToComponent(`${uid}.layout-${index}`, layoutComponent, __spreadProps(__spreadValues({}, mapperProps), {
+      onAction,
+      onRefresh
+    }))
+  );
+  const additionalComponents = makeAdditionalComponents(mapperProps.step, uid, displayStepTitle);
+  const stepComponent = createStepComponent({
+    uid,
+    loadingState,
+    components: [...additionalComponents, ...layoutComponents],
+    updateComponent
+  });
+  return stepComponent;
+};
+var makeAdditionalComponents = (step, uid, displayStepTitle) => {
+  const { title, errors } = step;
   const heading = title && displayStepTitle ? headingLayoutToComponent(`${uid}.title`, {
     type: "heading",
     text: title,
@@ -13256,144 +13140,158 @@ var mapStepToComponent = (_a) => {
     markdown: errors.error,
     context: "negative"
   }) : void 0;
-  const additionalComponents = [...heading ? [heading] : [], ...stepError ? [stepError] : []];
-  const layoutComponents = layout.map(
-    (layoutComponent, index) => mapLayoutToComponent(`${uid}.layout-${index}`, layoutComponent, mapperProps)
-  );
-  if (stepId === void 0) {
-    throw new Error("Step must have an id or a key");
+  return [...heading ? [heading] : [], ...stepError ? [stepError] : []];
+};
+
+// src/revamp/flow/executeRefresh.ts
+var executeRefresh = async (props) => {
+  const { abortSignal, url, model, schemaId, etag, httpClient, trackEvent } = props;
+  trackEvent("Refresh Triggered", { schema: schemaId });
+  try {
+    const response = await httpClient(url != null ? url : "", {
+      method: "POST",
+      body: JSON.stringify(model),
+      headers: __spreadValues({
+        "Content-Type": "application/json"
+      }, etag ? { "If-None-Match": etag } : {}),
+      signal: abortSignal
+    });
+    if (response.status === 304) {
+      trackEvent("Refresh Succeeded", { schema: schemaId });
+      return { type: "noop" };
+    }
+    if (!response.ok) {
+      const responseBody = await parseResponseBodyAsJsonElement(response).catch(() => ({}));
+      const body2 = isErrorResponseBody(responseBody) ? responseBody : {};
+      trackEvent("Refresh Failed", __spreadValues({ schema: schemaId }, body2.analytics));
+      return { type: "error", body: body2 };
+    }
+    const newEtag = response.headers.get("etag") || null;
+    const body = await parseResponseBodyAsJsonElement(response);
+    assertStepResponseBody(body);
+    trackEvent("Refresh Succeeded", { schema: schemaId });
+    return { type: "refresh-step", step: body, etag: newEtag };
+  } catch (error) {
+    if (error instanceof DOMException && error.name === "AbortError") {
+      trackEvent("Refresh Aborted", { schema: schemaId });
+      return { type: "noop" };
+    }
+    trackEvent("Refresh Failed", { schema: schemaId });
+    return { type: "error", body: {} };
   }
-  return createStepComponent({
-    uid,
-    loadingState,
-    components: [...additionalComponents, ...layoutComponents]
-  });
 };
 
-// src/revamp/utils/findComponent.ts
-var findComponent = (components, id) => {
-  const flattened = flattenComponents(components);
-  const matching = flattened.filter((component) => component.uid === id);
-  if (matching.length === 1) {
-    return matching[0];
+// src/revamp/flow/getResponseType.ts
+var responseTypes = ["step", "action", "exit"];
+var getResponseType = async (response) => {
+  var _a, _b;
+  assertResponseIsValid2(response);
+  if ((_a = response.headers) == null ? void 0 : _a.has("X-Df-Response-Type")) {
+    const type = response.headers.get("X-Df-Response-Type");
+    assertDFResponseType(type);
+    return type;
   }
-  if (matching.length > 1) {
-    throw new Error(`Multiple components with the same uid: ${id}`);
+  if ((_b = response.headers) == null ? void 0 : _b.has("X-Df-Exit")) {
+    return "exit";
   }
-  throw new Error(`Failed to find any components with uid: ${id}`);
+  const jsonBody = await parseResponseBodyAsJsonElement(response.clone());
+  if (isObject2(jsonBody) && jsonBody.action) {
+    return "action";
+  }
+  return "step";
 };
-var flattenComponents = (components) => components.reduce((acc, component) => {
-  if (hasChildren(component)) {
-    return [...acc, component, ...flattenComponents(component.getChildren())];
+function assertDFResponseType(type) {
+  if (!responseTypes.includes(type)) {
+    throw new Error(
+      "Unsupported X-Df-Response-Type. Allowed values are 'step', 'action', 'exit', 'error'."
+    );
   }
-  return [...acc, component];
-}, []);
+}
 
-// src/revamp/step/Step.tsx
-import { Fragment as Fragment24, jsx as jsx118 } from "react/jsx-runtime";
-var emptyStepComponent = createEmptyStepComponent();
-function Step({
-  localValue: initialLocalValue,
-  step,
-  displayStepTitle = true,
-  loadingState,
-  getErrorMessageFunctions,
-  render,
-  httpClient,
-  trackEvent,
-  logEvent,
-  triggerSubmission,
-  triggerRefresh
-}) {
-  var _a;
-  const [stepComponent, setStepComponent] = useState30(emptyStepComponent);
-  const stepComponentRef = useRef8(emptyStepComponent);
-  const updateComponent = useCallback10(
-    (id, update) => {
-      update(findComponent([stepComponentRef.current], id));
-      setStepComponent(() => {
-        const newStepDomainComponent = __spreadValues({}, stepComponentRef.current);
-        stepComponentRef.current = newStepDomainComponent;
-        return newStepDomainComponent;
+// src/revamp/flow/executeSubmission.ts
+var executeSubmission = async (props) => {
+  const { httpClient, trackEvent } = props;
+  const triggerAction = async (action, model, isInitial) => {
+    const { exit, url, method = "POST", result = null, id: actionId } = action;
+    const trackSubmissionEvent = !isInitial ? trackEvent : () => {
+    };
+    trackSubmissionEvent("Action Triggered", { actionId });
+    if (exit && !url) {
+      trackSubmissionEvent("Action Succeeded", { actionId });
+      return { type: "complete", result };
+    }
+    try {
+      const response = await httpClient(url != null ? url : "", {
+        method,
+        body: method === "GET" ? void 0 : JSON.stringify(model),
+        headers: { "Content-Type": "application/json" }
       });
-    },
-    []
-  );
-  useEffect23(() => {
-    setStepComponent(() => {
-      const newStepDomainComponent = __spreadProps(__spreadValues({}, stepComponentRef.current), { loadingState });
-      stepComponentRef.current = newStepDomainComponent;
-      return newStepDomainComponent;
-    });
-  }, [loadingState]);
-  const onAction = useCallback10(
-    async (action) => {
-      var _a2;
-      const skipValidation = action.method === "GET" || Boolean(action.skipValidation);
-      const canSubmit = skipValidation || stepComponentRef.current.validate();
-      if (canSubmit) {
-        try {
-          const model = await stepComponentRef.current.getSubmittableValue();
-          const payload = mergeModels(model, (_a2 = action.data) != null ? _a2 : null);
-          const localValue = stepComponentRef.current.getLocalValue();
-          void triggerSubmission(action, payload, localValue);
-        } catch (e) {
-          if (true) {
-            console.log("\u274C:", "Failed to get submittable data");
-          }
-        }
+      if (!response.ok) {
+        return await handleErrorResponse(response, actionId);
       }
-    },
-    [triggerSubmission]
-  );
-  const onRefresh = useCallback10(
-    async (schemaId, url) => {
-      var _a2;
-      const refreshUrl = (_a2 = url != null ? url : step.refreshUrl) != null ? _a2 : step.refreshFormUrl;
-      if (refreshUrl) {
-        const model = await stepComponentRef.current.getSubmittableValue();
-        const localValue = stepComponentRef.current.getLocalValue();
-        void triggerRefresh({ refreshUrl, model, localValue, schemaId });
+      const responseType = await getResponseType(response);
+      const body = await parseResponseBodyAsJsonElement(response);
+      if (exit) {
+        return { type: "complete", result: mergeModels(result, body) };
       }
-    },
-    [step.refreshUrl, step.refreshFormUrl, triggerRefresh]
-  );
-  useEffect23(() => {
-    const initialComponent = mapStepToComponent({
-      stepLocalValue: initialLocalValue,
-      step,
-      displayStepTitle,
-      loadingState,
-      updateComponent,
-      getErrorMessageFunctions,
-      trackEvent,
-      logEvent,
-      httpClient,
-      onAction,
-      onRefresh
-    });
-    setStepComponent(initialComponent);
-    stepComponentRef.current = initialComponent;
-    if (step.key) {
-      logEvent("warning", 'Step.key is deprecated, please use "id" instead');
+      switch (responseType) {
+        case "step": {
+          const etag = response.headers.get("etag") || null;
+          assertStepResponseBody(body);
+          trackSubmissionEvent("Action Succeeded", { actionId });
+          return { type: "replace-step", step: body, etag };
+        }
+        case "exit": {
+          trackSubmissionEvent("Action Succeeded", { actionId });
+          return { type: "complete", result: mergeModels(result, body) };
+        }
+        case "action": {
+          assertActionResponseBody(body);
+          trackSubmissionEvent("Action Succeeded", { actionId });
+          return await triggerAction(body.action, null, false);
+        }
+        default: {
+          throw new Error(`Unsupported response type: ${String(responseType)}`);
+        }
+      }
+    } catch (error) {
+      trackSubmissionEvent("Action Failed", { actionId });
+      throw error;
     }
-  }, [
-    step,
-    displayStepTitle,
-    updateComponent,
-    onAction,
-    getErrorMessageFunctions,
-    httpClient,
-    trackEvent,
-    logEvent,
-    onRefresh
-  ]);
-  useEffect23(() => {
-    trackEvent("Step Shown");
-  }, [(_a = step.id) != null ? _a : step.key]);
-  return /* @__PURE__ */ jsx118(Fragment24, { children: render(stepComponent) });
+  };
+  const handleErrorResponse = async (response, actionId) => {
+    const body = await parseResponseBodyAsJsonElement(response);
+    if (isErrorResponseBody(body)) {
+      const refreshUrl = body.refreshUrl || body.refreshFormUrl;
+      const { error, validation, analytics } = body;
+      trackEvent("Action Failed", __spreadValues({ actionId }, analytics));
+      const errors = { error, validation };
+      return refreshUrl ? { type: "refresh", body: { refreshUrl, errors } } : { type: "error", body: { errors, analytics } };
+    }
+    trackEvent("Action Failed", { actionId });
+    return { type: "error", body: {} };
+  };
+  return triggerAction(props.action, props.model, props.isInitial);
+};
+
+// src/revamp/renderers/CoreContainerRenderer.tsx
+import { Fragment as Fragment23, jsx as jsx116 } from "react/jsx-runtime";
+var CoreContainerRenderer = {
+  canRenderType: "container",
+  render: ({ children }) => /* @__PURE__ */ jsx116(Fragment23, { children })
+};
+
+// src/revamp/renderers/StepRenderer.tsx
+import { useMemo as useMemo17 } from "react";
+import { jsx as jsx117 } from "react/jsx-runtime";
+var StepRenderer = {
+  canRenderType: "step",
+  render: StepRendererComponent
+};
+function StepRendererComponent({ children, loadingState }) {
+  const value = useMemo17(() => ({ loadingState }), [loadingState]);
+  return /* @__PURE__ */ jsx117(LoadingContextProvider, { value, children });
 }
-var Step_default = Step;
 
 // src/revamp/renderers/stepComponentToProps.ts
 var stepComponentToProps = ({ loadingState }, children) => ({
@@ -13887,8 +13785,8 @@ var componentToRendererProps = (component, nestedContent) => {
   }
 };
 
-// src/revamp/step/utils/getRenderFunction.tsx
-import { jsx as jsx119 } from "react/jsx-runtime";
+// src/revamp/renderers/getRenderFunction.tsx
+import { jsx as jsx118 } from "react/jsx-runtime";
 var getRenderFunction = (renderers2) => {
   function ComponentRenderer(props) {
     const { type } = props;
@@ -13927,7 +13825,7 @@ var getRenderFunction = (renderers2) => {
       children: component.getChildren().map(render)
     };
   };
-  const render = (component) => /* @__PURE__ */ jsx119(
+  const render = (component) => /* @__PURE__ */ jsx118(
     ComponentRenderer,
     __spreadValues({}, componentToRendererProps(component, getNestedContent(component))),
     component.uid
@@ -13935,7 +13833,7 @@ var getRenderFunction = (renderers2) => {
   return render;
 };
 
-// src/revamp/step/utils/getSchemaErrorMessageFunction.ts
+// src/revamp/renderers/getSchemaErrorMessageFunction.ts
 import { formatDate as formatDate3 } from "@transferwise/formatting";
 function getSchemaErrorMessageFunction(formatMessage, locale) {
   return (validationMessages) => createErrorMessageFunctions(validationMessages != null ? validationMessages : {}, formatMessage, locale);
@@ -14021,196 +13919,250 @@ var formatDateOptions = {
   dateStyle: "long"
 };
 
+// src/revamp/utils/findComponent.ts
+var findComponent = (components, id) => {
+  const flattened = flattenComponents(components);
+  const matching = flattened.filter((component) => component.uid === id);
+  if (matching.length === 1) {
+    return matching[0];
+  }
+  if (matching.length > 1) {
+    throw new Error(`Multiple components with the same uid: ${id}`);
+  }
+  throw new Error(`Failed to find any components with uid: ${id}`);
+};
+var flattenComponents = (components) => components.reduce((acc, component) => {
+  if (hasChildren(component)) {
+    return [...acc, component, ...flattenComponents(component.getChildren())];
+  }
+  return [...acc, component];
+}, []);
+
+// src/revamp/utils/useStableCallback.tsx
+import { useCallback as useCallback10, useLayoutEffect, useRef as useRef8 } from "react";
+function useStableCallback(handler) {
+  const ref = useRef8(handler);
+  useLayoutEffect(() => {
+    ref.current = handler;
+  });
+  return useCallback10((...args) => ref.current ? ref.current(...args) : null, []);
+}
+
 // src/revamp/DynamicFlowCore.tsx
-import { jsx as jsx120 } from "react/jsx-runtime";
+import { jsx as jsx119 } from "react/jsx-runtime";
 function DynamicFlowCore(props) {
-  var _a;
-  const {
-    flowId,
-    displayStepTitle,
-    httpClient,
-    initialAction,
-    initialStep,
-    renderers: renderers2,
-    onCompletion,
-    onError,
-    onEvent,
-    onLog
-  } = props;
+  const _a = props, { flowId, initialAction, initialStep, renderers: renderers2, displayStepTitle = true } = _a, rest = __objRest(_a, ["flowId", "initialAction", "initialStep", "renderers", "displayStepTitle"]);
+  const httpClient = useStableCallback(rest.httpClient);
+  const onCompletion = useStableCallback(rest.onCompletion);
+  const onError = useStableCallback(rest.onError);
+  const onEvent = useStableCallback(rest.onEvent);
+  const onLog = useStableCallback(rest.onLog);
   const { formatMessage, locale } = useIntl22();
   const getErrorMessageFunctions = useMemo18(
     () => getSchemaErrorMessageFunction(formatMessage, locale),
     [formatMessage, locale]
   );
-  useEffect24(() => {
-    var _a2;
-    if (!initialStep && initialAction) {
-      void triggerSubmission(initialAction, (_a2 = initialAction.data) != null ? _a2 : {}, null);
-    }
-  }, []);
-  const [step, setStep] = useState31(initialStep != null ? initialStep : null);
-  const localValueRef = useRef9(null);
-  const [etag, setEtag] = useState31(null);
+  const [stepComponent, setStepComponent] = useState30(null);
+  const stepComponentRef = useRef9(null);
+  const stepRef = useRef9(initialStep != null ? initialStep : null);
+  const etagRef = useRef9(null);
   const abortControllerRef = useRef9(new AbortController());
-  const [loadingState, setLoadingState] = useState31(initialStep ? "idle" : "loading");
   const abortCurrentAndGetNewAbortSignal = () => {
     abortControllerRef.current.abort();
     abortControllerRef.current = new AbortController();
     return abortControllerRef.current.signal;
   };
-  const stepId = (_a = step == null ? void 0 : step.id) != null ? _a : step == null ? void 0 : step.key;
-  const stepAnalytics = step == null ? void 0 : step.analytics;
-  const trackEvent = useMemo18(
-    () => getAnalyticsEventDispatcher({ flowId, stepId, analytics: stepAnalytics, onEvent }),
+  useEffect23(() => {
+    trackEvent("Flow Started");
+    if (!initialStep && initialAction) {
+      void onAction(initialAction);
+    }
+    if (initialStep && !initialAction) {
+      initialiseWithStep(initialStep, null);
+      trackEvent("Step Shown");
+    }
+  }, []);
+  const initialiseWithStep = useCallback11(
+    (newStep, etag) => {
+      var _a2, _b;
+      stepRef.current = newStep;
+      etagRef.current = etag;
+      const updateComponent = (id, update) => {
+        const currentStepComponent = stepComponentRef.current;
+        if (currentStepComponent) {
+          update(findComponent([currentStepComponent], id));
+          setStepComponent(() => {
+            const newStepDomainComponent = __spreadValues({}, currentStepComponent);
+            stepComponentRef.current = newStepDomainComponent;
+            return newStepDomainComponent;
+          });
+        }
+      };
+      try {
+        const newStepComponent = mapStepToComponent({
+          stepLocalValue: (_b = (_a2 = stepComponentRef.current) == null ? void 0 : _a2.getLocalValue()) != null ? _b : null,
+          step: newStep,
+          displayStepTitle,
+          loadingState: "idle",
+          updateComponent,
+          getErrorMessageFunctions,
+          trackEvent,
+          logEvent,
+          httpClient,
+          onAction,
+          onRefresh
+        });
+        setStepComponent(() => {
+          stepComponentRef.current = newStepComponent;
+          return newStepComponent;
+        });
+      } catch (error) {
+        closeWithError(error);
+      }
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [flowId, stepId, JSON.stringify(stepAnalytics), onEvent]
+    []
+  );
+  const trackEvent = useCallback11(
+    (eventName, properties) => {
+      var _a2, _b, _c, _d;
+      const stepId = (_c = (_a2 = stepRef.current) == null ? void 0 : _a2.id) != null ? _c : (_b = stepRef.current) == null ? void 0 : _b.key;
+      const analytics = (_d = stepRef.current) == null ? void 0 : _d.analytics;
+      const metadata = __spreadValues(__spreadValues(__spreadValues({
+        flowId
+      }, stepId ? { stepId } : {}), analytics), properties);
+      try {
+        onEvent == null ? void 0 : onEvent(`Dynamic Flow - ${eventName}`, __spreadValues({}, metadata));
+      } catch (e) {
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const logEvent = useCallback11(
+    (level, message, properties) => {
+      try {
+        onLog == null ? void 0 : onLog(level, message, properties != null ? properties : {});
+      } catch (e) {
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
   );
-  const logEvent = useMemo18(() => getLoggingEventDispatcher(onLog), [onLog]);
-  useEffect24(() => trackEvent("Flow Started"), []);
   const closeWithError = useCallback11(
     (error, analytics) => {
       trackEvent("Flow Failed", __spreadValues({}, analytics));
       onError(error);
     },
-    [onError, trackEvent]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
   );
-  const triggerSubmission = useCallback11(
-    async (action, model, localValue) => {
-      if (true) {
-        console.log("\u23EF\uFE0F triggerSubmission", JSON.stringify({ action, model }, null, 2));
-      }
-      try {
-        setLoadingState("loading");
-        const command = await executeSubmission({
-          action,
-          model,
-          isInitial: step === null,
-          httpClient,
-          trackEvent
-        });
-        switch (command.type) {
-          case "complete": {
-            localValueRef.current = null;
-            onCompletion(command.result);
-            trackEvent("Flow Succeeded");
-            break;
-          }
-          case "replace-step": {
-            localValueRef.current = null;
-            setLoadingState("idle");
-            setStep(command.step);
-            setEtag(command.etag);
-            break;
-          }
-          case "error": {
-            setLoadingState("idle");
-            const genericErrorMessage = getErrorMessageFunctions().genericErrorWithRetry();
-            const { errors = { error: genericErrorMessage } } = command.body;
-            if (step) {
-              setStep(__spreadProps(__spreadValues({}, step), { errors }));
-            } else {
-              closeWithError(new Error("Initial request failed"), {});
-            }
-            break;
+  const onAction = useCallback11(async (action) => {
+    var _a2, _b, _c, _d, _e;
+    try {
+      (_a2 = stepComponentRef.current) == null ? void 0 : _a2.setLoadingState("loading");
+      const model = (_c = await ((_b = stepComponentRef.current) == null ? void 0 : _b.getSubmittableValue())) != null ? _c : null;
+      const payload = mergeModels(model, (_d = action.data) != null ? _d : null);
+      const command = await executeSubmission({
+        action,
+        model: payload,
+        isInitial: stepRef.current === null,
+        httpClient,
+        trackEvent
+      });
+      switch (command.type) {
+        case "complete": {
+          onCompletion(command.result);
+          trackEvent("Flow Succeeded");
+          break;
+        }
+        case "replace-step": {
+          initialiseWithStep(command.step, command.etag);
+          trackEvent("Step Shown");
+          break;
+        }
+        case "error": {
+          const genericErrorMessage = getErrorMessageFunctions().genericErrorWithRetry();
+          const { errors = { error: genericErrorMessage } } = command.body;
+          if (stepRef.current) {
+            initialiseWithStep(__spreadProps(__spreadValues({}, stepRef.current), { errors }), etagRef.current);
+          } else {
+            closeWithError(new Error("Initial request failed"), {});
           }
-          case "refresh": {
-            const { refreshUrl, errors = {} } = command.body;
-            try {
-              localValueRef.current = localValue;
-              const refreshCommand = await executeRefresh({
-                abortSignal: abortCurrentAndGetNewAbortSignal(),
-                url: refreshUrl,
-                model,
-                etag,
-                httpClient,
-                trackEvent
-              });
-              switch (refreshCommand.type) {
-                case "refresh-step":
-                  setLoadingState("idle");
-                  setStep(__spreadProps(__spreadValues({}, refreshCommand.step), { errors }));
-                  setEtag(refreshCommand.etag);
-                  break;
-                default:
-                  throw new Error("Failed to refresh");
-              }
-            } catch (e) {
-              closeWithError(e, {});
+          break;
+        }
+        case "refresh": {
+          const { refreshUrl, errors = {} } = command.body;
+          try {
+            (_e = stepComponentRef.current) == null ? void 0 : _e.setLoadingState("loading");
+            const refreshCommand = await executeRefresh({
+              abortSignal: abortCurrentAndGetNewAbortSignal(),
+              url: refreshUrl,
+              model,
+              etag: etagRef.current,
+              httpClient,
+              trackEvent
+            });
+            switch (refreshCommand.type) {
+              case "refresh-step":
+                initialiseWithStep(__spreadProps(__spreadValues({}, refreshCommand.step), { errors }), refreshCommand.etag);
+                break;
+              default:
+                throw new Error("Failed to refresh");
             }
-            break;
+          } catch (e) {
+            closeWithError(e, {});
           }
+          break;
         }
-      } catch (error) {
-        closeWithError(error);
-      }
-    },
-    [httpClient, trackEvent, onCompletion, getErrorMessageFunctions, step, etag, closeWithError]
-  );
-  const triggerRefresh = useCallback11(
-    async ({
-      refreshUrl,
-      model,
-      localValue,
-      schemaId
-    }) => {
-      if (true) {
-        console.log("\u23EF\uFE0F triggerRefresh", JSON.stringify({ refreshUrl, model, schemaId }, null, 2));
       }
+    } catch (error) {
+      closeWithError(error);
+    }
+  }, []);
+  const onRefresh = useCallback11(
+    async (schemaId, refreshUrl = "") => {
+      var _a2, _b, _c, _d;
       try {
-        localValueRef.current = localValue;
-        setLoadingState("loading");
+        (_a2 = stepComponentRef.current) == null ? void 0 : _a2.setLoadingState("loading");
+        const model = (_c = await ((_b = stepComponentRef.current) == null ? void 0 : _b.getSubmittableValue())) != null ? _c : null;
         const command = await executeRefresh({
           abortSignal: abortCurrentAndGetNewAbortSignal(),
           url: refreshUrl,
           model,
           schemaId,
-          etag,
+          etag: etagRef.current,
           httpClient,
           trackEvent
         });
-        setLoadingState("idle");
         switch (command.type) {
           case "refresh-step":
-            setStep(command.step);
-            setEtag(command.etag);
+            initialiseWithStep(command.step, command.etag);
             break;
           case "error": {
             closeWithError(new Error("Failed to refresh"), command.body.analytics);
             break;
           }
           case "noop":
+            (_d = stepComponentRef.current) == null ? void 0 : _d.setLoadingState("idle");
             break;
         }
       } catch (error) {
         closeWithError(error, void 0);
       }
     },
-    [etag, httpClient, trackEvent, closeWithError]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
   );
   const render = useMemo18(
     () => getRenderFunction([CoreContainerRenderer, ...renderers2, StepRenderer]),
     [renderers2]
   );
-  return /* @__PURE__ */ jsx120(ErrorBoundary_default, { onError: closeWithError, children: step ? /* @__PURE__ */ jsx120(
-    Step_default,
-    {
-      displayStepTitle,
-      step,
-      localValue: localValueRef.current,
-      loadingState,
-      getErrorMessageFunctions,
-      render,
-      httpClient,
-      trackEvent,
-      logEvent,
-      triggerSubmission,
-      triggerRefresh
-    }
-  ) : null });
+  return /* @__PURE__ */ jsx119(ErrorBoundary_default, { onError: closeWithError, children: stepComponent ? render(stepComponent) : null });
 }
 
 // src/revamp/DynamicFlowWise.tsx
-import { jsx as jsx121 } from "react/jsx-runtime";
+import { jsx as jsx120 } from "react/jsx-runtime";
 var renderers = getWiseRenderers();
 function DynamicFlowWise(props) {
   const { httpClient } = props;
@@ -14219,7 +14171,7 @@ function DynamicFlowWise(props) {
     () => makeWiseHttpClient(httpClient, locale),
     [httpClient, locale]
   );
-  return /* @__PURE__ */ jsx121(HttpClientProvider, { httpClient: wiseHttpClient, children: /* @__PURE__ */ jsx121(DynamicFlowCore, __spreadProps(__spreadValues({}, props), { renderers })) });
+  return /* @__PURE__ */ jsx120(HttpClientProvider, { httpClient: wiseHttpClient, children: /* @__PURE__ */ jsx120(DynamicFlowCore, __spreadProps(__spreadValues({}, props), { renderers })) });
 }
 var DynamicFlowWise_default = DynamicFlowWise;
 var makeWiseHttpClient = (httpClient, locale) => async (input, init) => httpClient(