@wise/dynamic-flow-client 4.3.13 → 4.4.0

package/build/main.js

@@ -1084,6 +1084,7 @@ function getChildren(node) {
     case "form":
     case "section":
     case "step":
+    case "modal-content":
       return node.childrenProps;
     case "columns":
       return [...node.startChildrenProps, ...node.endChildrenProps];
@@ -1159,7 +1160,6 @@ var getRenderFunction = (renderers) => {
 };
 
 // src/revamp/utils/type-utils.ts
-var hasChildren = (component) => "getChildren" in component && typeof component.getChildren === "function";
 var isHiddenComponent = (component) => "hidden" in component && component.hidden;
 var isObjectLocalValue = (value) => value != null && typeof value === "object" && !Array.isArray(value) && !(value instanceof File);
 var isArrayLocalValue = (value) => Array.isArray(value);
@@ -1682,20 +1682,20 @@ var listComponentToProps = (component, rendererMapperProps) => __spreadProps(__s
 });
 
 // src/revamp/renderers/stepComponentToProps.ts
-var stepComponentToProps = ({
-  uid,
-  back,
-  control,
-  description,
-  error,
-  external,
-  loadingState,
-  step,
-  title,
-  components,
-  onBehavior
-}, rendererMapperProps) => {
-  const childrenProps = components.map((c) => componentToRendererProps(c, rendererMapperProps));
+var stepComponentToProps = (component, rendererMapperProps) => {
+  const {
+    uid,
+    back,
+    control,
+    description,
+    error,
+    external,
+    loadingState,
+    step,
+    title,
+    onBehavior
+  } = component;
+  const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
   return __spreadValues({
     type: "step",
     id: step.id,
@@ -1727,6 +1727,21 @@ var rootComponentToProps = (rootComponent, rendererMapperProps) => {
   };
 };
 
+// src/revamp/renderers/mappers/modalContentComponentToProps.ts
+var modalContentComponentToProps = (component, rendererMapperProps) => {
+  const { uid, open, title, close } = component;
+  const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
+  return __spreadValues({
+    uid,
+    type: "modal-content",
+    open,
+    title,
+    children: childrenProps.map(rendererMapperProps.render),
+    childrenProps,
+    onClose: close.bind(component)
+  }, rendererMapperProps);
+};
+
 // src/revamp/renderers/mappers/componentToRendererProps.ts
 var componentToRendererProps = (component, rendererMapperProps) => {
   if (isHiddenComponent(component)) {
@@ -1777,6 +1792,8 @@ var componentToRendererProps = (component, rendererMapperProps) => {
       return markdownComponentToProps(component, rendererMapperProps);
     case "modal":
       return modalComponentToProps(component, rendererMapperProps);
+    case "modal-content":
+      return modalContentComponentToProps(component, rendererMapperProps);
     case "multi-select":
       return multiSelectInputComponentToProps(component, rendererMapperProps);
     case "multi-upload":
@@ -1813,47 +1830,13 @@ var import_dynamic_flow_types2 = require("@wise/dynamic-flow-types");
 var import_react3 = require("react");
 var import_react_intl7 = require("react-intl");
 
-// src/revamp/domain/components/RootDomainComponent.ts
-var createRootDomainComponent = () => ({
-  type: "root",
-  uid: "root",
-  stepComponent: null,
-  getChildren() {
-    return this.stepComponent ? [this.stepComponent] : [];
-  },
-  getLocalValue() {
-    return this.stepComponent ? this.stepComponent.getLocalValue() : null;
-  },
-  async getSubmittableValue() {
-    return this.stepComponent ? this.stepComponent.getSubmittableValue() : null;
-  },
-  getSubmittableValueSync() {
-    return this.stepComponent ? this.stepComponent.getSubmittableValueSync() : null;
-  },
-  getSummary() {
-    return this.stepComponent ? this.stepComponent.getSummary() : {};
-  },
-  validate() {
-    return this.stepComponent ? this.stepComponent.validate() : false;
-  },
-  setLoadingState(loadingState) {
-    var _a;
-    (_a = this.stepComponent) == null ? void 0 : _a.setLoadingState(loadingState);
-  },
-  getLoadingState() {
-    return this.stepComponent ? this.stepComponent.loadingState : "initial";
-  },
-  getTrackEvent() {
-    return this.stepComponent ? this.stepComponent.trackEvent : null;
-  },
-  hasStep() {
-    return Boolean(this.stepComponent);
-  },
-  stop() {
-    var _a;
-    (_a = this.stepComponent) == null ? void 0 : _a.stop();
-  }
-});
+// src/revamp/domain/components/utils/component-utils.ts
+var getInputUpdateFunction = (updateComponent) => {
+  return (component, updateFn) => {
+    updateFn(component);
+    updateComponent();
+  };
+};
 
 // src/revamp/utils/component-utils.ts
 var getSubmittableData = async (components) => Promise.all(components.map(async (component) => component.getSubmittableValue())).then(
@@ -1886,6 +1869,72 @@ var mergeModels = (valueA, valueB) => {
   return valueB;
 };
 
+// src/revamp/domain/components/RootDomainComponent.ts
+var createRootDomainComponent = (updateComponent) => {
+  const update = getInputUpdateFunction(updateComponent);
+  const rootComponent = {
+    type: "root",
+    uid: "root",
+    stepComponent: null,
+    _update(updateFn) {
+      update(this, updateFn);
+    },
+    dismissAllModals() {
+      var _a;
+      (_a = this.stepComponent) == null ? void 0 : _a.dismissAllModals();
+    },
+    dismissModal() {
+      var _a;
+      (_a = this.stepComponent) == null ? void 0 : _a.dismissModal();
+    },
+    showModal(modal) {
+      var _a;
+      (_a = this.stepComponent) == null ? void 0 : _a.showModal(modal);
+    },
+    getChildren() {
+      return this.stepComponent ? [this.stepComponent, ...this.stepComponent.getModals()] : [];
+    },
+    getLocalValue() {
+      return this.stepComponent ? this.stepComponent.getLocalValue() : null;
+    },
+    async getSubmittableValue() {
+      return this.stepComponent ? getSubmittableData([this.stepComponent, ...this.stepComponent.getModals()]) : null;
+    },
+    getSubmittableValueSync() {
+      return this.stepComponent ? getSubmittableDataSync([this.stepComponent, ...this.stepComponent.getModals()]) : null;
+    },
+    getSummary() {
+      return this.stepComponent ? this.stepComponent.getSummary() : {};
+    },
+    validate() {
+      return this.stepComponent ? this.stepComponent.validate() : false;
+    },
+    setLoadingState(loadingState) {
+      var _a;
+      (_a = this.stepComponent) == null ? void 0 : _a.setLoadingState(loadingState);
+    },
+    getLoadingState() {
+      return this.stepComponent ? this.stepComponent.loadingState : "initial";
+    },
+    getTrackEvent() {
+      return this.stepComponent ? this.stepComponent.trackEvent : null;
+    },
+    hasStep() {
+      return Boolean(this.stepComponent);
+    },
+    stop() {
+      var _a;
+      (_a = this.stepComponent) == null ? void 0 : _a.stop();
+    },
+    setStep(stepComponent) {
+      this._update((draft) => {
+        draft.stepComponent = stepComponent;
+      });
+    }
+  };
+  return rootComponent;
+};
+
 // src/revamp/domain/features/summary/summary-utils.ts
 var getSummariser = (schema) => (value) => {
   const { summary, icon, image } = schema;
@@ -1926,25 +1975,38 @@ var summaryIfProvides = (summary, { value, icon, image }) => {
 var validateComponents = (components) => components.reduce((acc, component) => component.validate() && acc, true);
 var getLocalValueValidator = (checks) => (currentValue) => checks.map((check) => check(currentValue)).filter(isString);
 
-// src/revamp/domain/components/utils/component-utils.ts
-var getInputUpdateFunction = (uid, updateComponent) => (updateFn) => {
-  updateComponent(uid, (draft) => {
-    const draftState = draft;
-    updateFn(draftState);
-  });
-};
-
 // src/revamp/domain/components/StepDomainComponent.ts
 var createStepComponent = (stepProps) => {
   const _a = stepProps, { uid, stepPolling, stepRefreshAfter, updateComponent } = _a, rest = __objRest(_a, ["uid", "stepPolling", "stepRefreshAfter", "updateComponent"]);
-  const update = getInputUpdateFunction(uid, updateComponent);
-  return __spreadProps(__spreadValues({
+  const update = getInputUpdateFunction(updateComponent);
+  const component = __spreadProps(__spreadValues({
     uid
   }, rest), {
     type: "step",
+    modals: [],
+    dismissModal() {
+      var _a2;
+      (_a2 = this.modals.at(-1)) == null ? void 0 : _a2.close();
+    },
+    dismissAllModals() {
+      this._update((draft) => {
+        draft.modals = draft.modals.map((m) => __spreadProps(__spreadValues({}, m), { open: false }));
+      });
+    },
+    showModal(modal) {
+      this._update((draft) => {
+        draft.modals = [...draft.modals, modal];
+      });
+    },
+    _update(updateFn) {
+      update(this, updateFn);
+    },
     getChildren() {
       return this.components;
     },
+    getModals() {
+      return this.modals;
+    },
     async getSubmittableValue() {
       return getSubmittableData(this.components);
     },
@@ -1961,15 +2023,19 @@ var createStepComponent = (stepProps) => {
       return validateComponents(this.getChildren());
     },
     setLoadingState(loadingState) {
-      update((draft) => {
+      this._update((draft) => {
         draft.loadingState = loadingState;
       });
     },
     stop() {
       stepPolling == null ? void 0 : stepPolling.stop();
       stepRefreshAfter == null ? void 0 : stepRefreshAfter.stop();
+      this._update((draft) => {
+        draft.modals = [];
+      });
     }
   });
+  return component;
 };
 
 // src/revamp/domain/mappers/utils/behavior-utils.ts
@@ -2095,9 +2161,11 @@ var getCallToAction = ({ title, accessibilityDescription }, behavior, onBehavior
     void onBehavior(behavior);
   };
   switch (behavior.type) {
-    case "action": {
+    case "action":
+    case "modal":
+    case "dismiss": {
       return {
-        type: "action",
+        type: behavior.type,
         title: title != null ? title : "",
         accessibilityDescription,
         onClick
@@ -2393,6 +2461,22 @@ 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/getRandomId.ts
+var getRandomId = () => Math.random().toString(36).substring(2);
+
+// src/revamp/domain/components/utils/isExactLocalValueMatch.ts
+var isExactLocalValueMatch = (valueA, valueB) => {
+  if (isArrayLocalValue(valueA) && isArrayLocalValue(valueB)) {
+    return valueA.length === valueB.length && valueA.every((value, index) => isExactLocalValueMatch(value, valueB[index]));
+  }
+  if (isObjectLocalValue(valueA) && isObjectLocalValue(valueB)) {
+    const keysA = Object.keys(valueA);
+    const keysB = Object.keys(valueB);
+    return keysA.length === keysB.length && keysA.every((key) => isExactLocalValueMatch(valueA[key], valueB[key]));
+  }
+  return valueA === valueB;
+};
+
 // src/revamp/domain/features/utils/http-utils.ts
 function constructPayload({
   value,
@@ -2420,37 +2504,21 @@ var abortAndResetController = (abortController) => {
   return new AbortController();
 };
 
-// src/revamp/domain/components/utils/isExactLocalValueMatch.ts
-var isExactLocalValueMatch = (valueA, valueB) => {
-  if (isArrayLocalValue(valueA) && isArrayLocalValue(valueB)) {
-    return valueA.length === valueB.length && valueA.every((value, index) => isExactLocalValueMatch(value, valueB[index]));
-  }
-  if (isObjectLocalValue(valueA) && isObjectLocalValue(valueB)) {
-    const keysA = Object.keys(valueA);
-    const keysB = Object.keys(valueB);
-    return keysA.length === keysB.length && keysA.every((key) => isExactLocalValueMatch(valueA[key], valueB[key]));
-  }
-  return valueA === valueB;
-};
-
-// src/revamp/domain/components/utils/getRandomId.ts
-var getRandomId = () => Math.random().toString(36).substring(2);
-
 // src/revamp/domain/features/persistAsync/getComponentPersistAsync.ts
 var getComponentPersistAsync = (update, performPersistAsync) => (
   /**
    * Will update the persistedState when a new request is made, and will update
    * the value or set errors when the request completes.
    */
-  async (persistedState, currentValue) => {
-    const { abortController, lastSubmitted, submission } = persistedState;
+  async (component, currentValue) => {
+    const { abortController, lastSubmitted, submission } = component.persistedState;
     if (isExactLocalValueMatch(lastSubmitted, currentValue)) {
       return submission;
     }
     const newAbortController = abortAndResetController(abortController);
     if (isNullish(currentValue) || currentValue === "") {
       const resolvedNull = Promise.resolve(null);
-      update((draft) => {
+      update(component, (draft) => {
         draft.persistedState.abortController = newAbortController;
         draft.persistedState.lastResponse = null;
         draft.persistedState.lastSubmitted = currentValue;
@@ -2460,7 +2528,7 @@ var getComponentPersistAsync = (update, performPersistAsync) => (
     }
     const { signal } = newAbortController;
     const newSubmission = performPersistAsync({ value: currentValue, signal }).then((newValue) => {
-      update((draft) => {
+      update(component, (draft) => {
         draft.persistedState.lastResponse = newValue;
       });
       return newValue;
@@ -2468,14 +2536,14 @@ var getComponentPersistAsync = (update, performPersistAsync) => (
       if (error instanceof DOMException && error.name === "AbortError") {
         return null;
       }
-      update((draft) => {
+      update(component, (draft) => {
         draft.errors = [error.message];
         draft.persistedState.lastResponse = null;
         draft.persistedState.lastSubmitted = null;
       });
       throw error;
     });
-    update((draft) => {
+    update(component, (draft) => {
       draft.persistedState = {
         abortController: newAbortController,
         lastResponse: null,
@@ -2491,19 +2559,19 @@ var getComponentMultiPersistAsync = (update, performPersistAsync) => (
    * Will update the persistedState when a new request is made, and will update
    * the value or set errors when the request completes.
    */
-  async (index, value) => {
+  async (component, index, value) => {
     if (isNullish(value)) {
       throw new Error("Value must be a file or base64 string.");
     }
     const newAbortController = new AbortController();
     const { signal } = newAbortController;
     const newSubmission = performPersistAsync({ value, signal }).then((newValue) => {
-      update((draft) => {
+      update(component, (draft) => {
         draft.persistedState[index].lastResponse = newValue;
       });
       return newValue;
     }).catch((error) => {
-      update((draft) => {
+      update(component, (draft) => {
         draft.persistedState = [
           ...draft.persistedState.slice(0, index),
           ...draft.persistedState.slice(index + 1)
@@ -2513,7 +2581,7 @@ var getComponentMultiPersistAsync = (update, performPersistAsync) => (
       });
       throw error;
     });
-    update((draft) => {
+    update(component, (draft) => {
       draft.persistedState = [
         ...draft.persistedState.slice(0, index),
         {
@@ -2608,11 +2676,11 @@ var getComponentValidationAsync = (update, performValidationAsync) => (
    * Will update the validationAsyncState when a new request is made, and will update
    * the description or set errors when the request completes.
    */
-  async (validationAsyncState, currentValue) => {
-    const { abortController } = validationAsyncState;
+  async (component, currentValue) => {
+    const { abortController } = component.validationAsyncState;
     const newAbortController = abortAndResetController(abortController);
     if (isNullish(currentValue)) {
-      update((draft) => {
+      update(component, (draft) => {
         draft.validationAsyncState = {
           abortController: newAbortController,
           lastSubmitted: currentValue,
@@ -2623,7 +2691,7 @@ var getComponentValidationAsync = (update, performValidationAsync) => (
     }
     const { signal } = newAbortController;
     const newSubmission = performValidationAsync({ value: currentValue, signal }).then((message) => {
-      update((draft) => {
+      update(component, (draft) => {
         if (message) {
           draft.validationAsyncState.messages.success = message;
         }
@@ -2633,11 +2701,11 @@ var getComponentValidationAsync = (update, performValidationAsync) => (
       if (error instanceof DOMException && error.name === "AbortError") {
         return null;
       }
-      update((draft) => {
+      update(component, (draft) => {
         draft.validationAsyncState.messages.error = error.message;
       });
     });
-    update((draft) => {
+    update(component, (draft) => {
       draft.validationAsyncState = {
         abortController: newAbortController,
         lastSubmitted: currentValue,
@@ -2670,22 +2738,18 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
     "onValueChange",
     "summariser"
   ]);
-  const update = getInputUpdateFunction(uid, updateComponent);
+  const update = getInputUpdateFunction(updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
   const performDebouncedRefresh = getDebouncedPerformRefresh(performRefresh, getValidationErrors);
-  const getAndSetValidationErrors = (currentValue) => {
-    const messages = getValidationErrors(currentValue);
-    update((draft) => {
-      draft.errors = messages;
-    });
-    return messages;
-  };
   const numberComponent = __spreadValues({
     type: "number",
     uid,
     id,
+    _update(updateFn) {
+      update(this, updateFn);
+    },
     onBlur() {
-      getAndSetValidationErrors(this.getLocalValue());
+      this.validate();
       performDebouncedRefresh == null ? void 0 : performDebouncedRefresh.flush();
     },
     onFocus() {
@@ -2693,7 +2757,7 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
     // Noop
     onChange(updatedValue) {
       const prevValue = this.value;
-      update((draft) => {
+      this._update((draft) => {
         draft.errors = [];
         draft.validationAsyncState.messages = {};
         draft.value = updatedValue;
@@ -2715,8 +2779,11 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
       return this.value;
     },
     validate() {
-      const messages = getAndSetValidationErrors(this.getLocalValue());
-      return messages.length === 0;
+      const errors = getValidationErrors(this.getLocalValue());
+      this._update((draft) => {
+        draft.errors = errors;
+      });
+      return errors.length === 0;
     }
   }, rest);
   if (performRefresh) {
@@ -2727,12 +2794,12 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
     return __spreadProps(__spreadValues({}, numberComponent), {
       onBlur() {
         if (this.validate()) {
-          persist(this.persistedState, this.getLocalValue()).catch(() => {
+          persist(this, this.getLocalValue()).catch(() => {
           });
         }
       },
       async getSubmittableValue() {
-        return persist(this.persistedState, this.getLocalValue());
+        return persist(this, this.getLocalValue());
       },
       getSubmittableValueSync() {
         return this.persistedState.lastResponse;
@@ -2750,7 +2817,7 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
       onChange(updatedValue) {
         numberComponent.onChange.call(this, updatedValue);
         if (getValidationErrors(updatedValue).length === 0) {
-          validateAsync(this.validationAsyncState, updatedValue);
+          validateAsync(this, updatedValue);
         }
       }
     });
@@ -2986,6 +3053,16 @@ function assertActionResponseBody(body) {
     );
   }
 }
+function assertModalResponseBody(body) {
+  if (isObject(body)) {
+    if ("content" in body && isArray(body.content)) {
+      return;
+    }
+  }
+  throw new Error(
+    "Incorrect response body in modal response. Expected an object satisfying the type { title?: string, components: Layout[] }."
+  );
+}
 function isErrorResponseBody(body) {
   return Boolean(
     isObject(body) && (body.refreshFormUrl || body.refreshUrl || body.validation || body.error || body.analytics)
@@ -3041,7 +3118,7 @@ var getPerformPersistAsync = ({
         }
         return json[idProperty];
       }
-    } catch (error) {
+    } catch (e) {
       trackFailure();
       throw new Error(genericErrorMessage);
     }
@@ -3468,23 +3545,19 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
     "onValueChange",
     "summariser"
   ]);
-  const update = getInputUpdateFunction(uid, updateComponent);
+  const update = getInputUpdateFunction(updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
   const performDebouncedRefresh = getDebouncedPerformRefresh(performRefresh, getValidationErrors);
-  const getAndSetValidationErrors = (currentValue) => {
-    const messages = getValidationErrors(currentValue);
-    update((draft) => {
-      draft.errors = messages;
-    });
-    return messages;
-  };
   const integerComponent = __spreadValues({
     type: "integer",
     uid,
     id,
     value,
+    _update(updateFn) {
+      update(this, updateFn);
+    },
     onBlur() {
-      getAndSetValidationErrors(this.getLocalValue());
+      this.validate();
       performDebouncedRefresh == null ? void 0 : performDebouncedRefresh.flush();
     },
     onFocus() {
@@ -3492,7 +3565,7 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
     // Noop
     onChange(updatedValue) {
       const prevValue = this.value;
-      update((draft) => {
+      this._update((draft) => {
         draft.errors = [];
         draft.validationAsyncState.messages = {};
         draft.value = updatedValue;
@@ -3514,8 +3587,11 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
       return this.value;
     },
     validate() {
-      const messages = getAndSetValidationErrors(this.getLocalValue());
-      return messages.length === 0;
+      const errors = getValidationErrors(this.getLocalValue());
+      this._update((draft) => {
+        draft.errors = errors;
+      });
+      return errors.length === 0;
     }
   }, rest);
   if (performRefresh) {
@@ -3526,12 +3602,12 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
     return __spreadProps(__spreadValues({}, integerComponent), {
       onBlur() {
         if (this.validate()) {
-          persist(this.persistedState, this.getLocalValue()).catch(() => {
+          persist(this, this.getLocalValue()).catch(() => {
           });
         }
       },
       async getSubmittableValue() {
-        return persist(this.persistedState, this.getLocalValue());
+        return persist(this, this.getLocalValue());
       },
       getSubmittableValueSync() {
         return this.persistedState.lastResponse;
@@ -3549,7 +3625,7 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
       onChange(updatedValue) {
         integerComponent.onChange.call(this, updatedValue);
         if (getValidationErrors(updatedValue).length === 0) {
-          validateAsync(this.validationAsyncState, updatedValue);
+          validateAsync(this, updatedValue);
         }
       }
     });
@@ -3623,16 +3699,9 @@ var createSelectInputComponent = (selectProps, updateComponent) => {
     (option) => isPartialModelMatch(option.component.getSubmittableValueSync(), initialModel)
   );
   const selectedIndex = matchingOptions.filter((match) => match).length === 1 ? matchingOptions.indexOf(true) : null;
-  const update = getInputUpdateFunction(uid, updateComponent);
+  const update = getInputUpdateFunction(updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
-  const getAndSetValidationErrors = (currentValue) => {
-    const messages = getValidationErrors(currentValue);
-    update((draft) => {
-      draft.errors = messages;
-    });
-    return messages;
-  };
-  return __spreadProps(__spreadValues({
+  const component = __spreadProps(__spreadValues({
     uid,
     type: "select",
     children,
@@ -3640,6 +3709,9 @@ var createSelectInputComponent = (selectProps, updateComponent) => {
     selectedIndex,
     value: null
   }, rest), {
+    _update(updateFn) {
+      update(this, updateFn);
+    },
     getChildren() {
       return this.children;
     },
@@ -3663,19 +3735,22 @@ var createSelectInputComponent = (selectProps, updateComponent) => {
       return (_b = (_a2 = this.getSelectedChild()) == null ? void 0 : _a2.getLocalValue()) != null ? _b : null;
     },
     onBlur() {
-      getAndSetValidationErrors(this.getLocalValue());
+      this.validate();
     },
     onFocus() {
     },
     // noop
     onSelect(updatedIndex) {
+      if (updatedIndex === this.selectedIndex) {
+        return;
+      }
       if (updatedIndex !== null && this.analyticsId) {
         selectProps.trackEvent("OneOf Selected", {
           oneOfId: this.analyticsId,
           schemaId: this.children[updatedIndex].analyticsId
         });
       }
-      update((draft) => {
+      this._update((draft) => {
         draft.errors = [];
         draft.selectedIndex = updatedIndex;
       });
@@ -3685,10 +3760,14 @@ var createSelectInputComponent = (selectProps, updateComponent) => {
     validate() {
       var _a2, _b;
       const validChild = (_b = (_a2 = this.getSelectedChild()) == null ? void 0 : _a2.validate()) != null ? _b : true;
-      const messages = getAndSetValidationErrors(this.getLocalValue());
-      return messages.length === 0 && validChild;
+      const errors = getValidationErrors(this.getLocalValue());
+      this._update((draft) => {
+        draft.errors = errors;
+      });
+      return errors.length === 0 && validChild;
     }
   });
+  return component;
 };
 
 // src/revamp/domain/mappers/schema/oneOfSchemaToComponent/oneOfSchemaToComponent.ts
@@ -3783,29 +3862,25 @@ var createDateInputComponent = (textInputProps, updateComponent) => {
     "summariser",
     "value"
   ]);
-  const update = getInputUpdateFunction(uid, updateComponent);
+  const update = getInputUpdateFunction(updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
-  const getAndSetValidationErrors = (currentValue) => {
-    const messages = getValidationErrors(currentValue);
-    update((draft) => {
-      draft.errors = messages;
-    });
-    return messages;
-  };
   const dateInputComponent = __spreadValues({
     type: "date",
     uid,
     id,
     value,
+    _update(updateFn) {
+      update(this, updateFn);
+    },
     onBlur() {
-      getAndSetValidationErrors(this.getLocalValue());
+      this.validate();
     },
     onFocus() {
     },
     // Noop
     onChange(updatedValue) {
       const prevValue = this.value;
-      update((draft) => {
+      this._update((draft) => {
         draft.errors = [];
         draft.validationAsyncState.messages = {};
         draft.value = updatedValue;
@@ -3829,8 +3904,11 @@ var createDateInputComponent = (textInputProps, updateComponent) => {
       return this.value;
     },
     validate() {
-      const messages = getAndSetValidationErrors(this.getLocalValue());
-      return messages.length === 0;
+      const errors = getValidationErrors(this.getLocalValue());
+      this._update((draft) => {
+        draft.errors = errors;
+      });
+      return errors.length === 0;
     }
   }, rest);
   if (performRefresh) {
@@ -3843,12 +3921,12 @@ var createDateInputComponent = (textInputProps, updateComponent) => {
         dateInputComponent.onChange.call(this, updatedValue);
         const isValid = getValidationErrors(updatedValue).length === 0;
         if (isValid) {
-          persist(this.persistedState, this.getLocalValue()).catch(() => {
+          persist(this, this.getLocalValue()).catch(() => {
           });
         }
       },
       async getSubmittableValue() {
-        return persist(this.persistedState, this.getLocalValue());
+        return persist(this, this.getLocalValue());
       },
       getSubmittableValueSync() {
         return this.persistedState.lastResponse;
@@ -3860,7 +3938,7 @@ var createDateInputComponent = (textInputProps, updateComponent) => {
     return __spreadProps(__spreadValues({}, dateInputComponent), {
       onBlur() {
         if (this.validate()) {
-          validateAsync(this.validationAsyncState, this.getLocalValue()).catch(() => {
+          validateAsync(this, this.getLocalValue()).catch(() => {
           });
         }
       }
@@ -3963,29 +4041,25 @@ var createUploadInputComponent = (uploadInputProps, updateComponent) => {
     "onValueChange",
     "summariser"
   ]);
-  const update = getInputUpdateFunction(uid, updateComponent);
+  const update = getInputUpdateFunction(updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
-  const getAndSetValidationErrors = (currentValue) => {
-    const messages = getValidationErrors(currentValue);
-    update((draft) => {
-      draft.errors = messages;
-    });
-    return messages;
-  };
   const uploadComponent = __spreadValues({
     type: "upload",
     uid,
     id,
     format: "base64",
     value,
+    _update(updateFn) {
+      update(this, updateFn);
+    },
     onBlur() {
-      getAndSetValidationErrors(this.getLocalValue());
+      this.validate();
     },
     onFocus() {
     },
     // Noop
     async onUpload(updatedValue) {
-      update((draft) => {
+      this._update((draft) => {
         draft.errors = [];
         draft.value = updatedValue;
       });
@@ -4007,8 +4081,11 @@ var createUploadInputComponent = (uploadInputProps, updateComponent) => {
       return this.value;
     },
     validate() {
-      const messages = getAndSetValidationErrors(this.getLocalValue());
-      return messages.length === 0;
+      const errors = getValidationErrors(this.getLocalValue());
+      this._update((draft) => {
+        draft.errors = errors;
+      });
+      return errors.length === 0;
     }
   }, rest);
   if (!performPersistAsync) {
@@ -4018,14 +4095,14 @@ var createUploadInputComponent = (uploadInputProps, updateComponent) => {
   return __spreadProps(__spreadValues({}, uploadComponent), {
     format,
     async onUpload(file) {
-      update((draft) => {
+      this._update((draft) => {
         draft.errors = [];
         draft.value = file;
       });
       onValueChange();
       const submission = format === "base64" && file ? await toBase64(file) : file;
-      await persist(this.persistedState, submission).catch((error) => {
-        update((draft) => {
+      await persist(this, submission).catch((error) => {
+        this._update((draft) => {
           draft.persistedState.lastResponse = null;
           draft.persistedState.lastSubmitted = null;
           draft.persistedState.submission = Promise.resolve(null);
@@ -4104,23 +4181,19 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
     "summariser",
     "value"
   ]);
-  const update = getInputUpdateFunction(uid, updateComponent);
+  const update = getInputUpdateFunction(updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
   const performDebouncedRefresh = getDebouncedPerformRefresh(performRefresh, getValidationErrors);
-  const getAndSetValidationErrors = (currentValue) => {
-    const messages = getValidationErrors(currentValue);
-    update((draft) => {
-      draft.errors = messages;
-    });
-    return messages;
-  };
   const inputComponent = __spreadValues({
     type: "text",
     uid,
     id,
     value,
+    _update(updateFn) {
+      update(this, updateFn);
+    },
     onBlur() {
-      getAndSetValidationErrors(this.getLocalValue());
+      this.validate();
       performDebouncedRefresh == null ? void 0 : performDebouncedRefresh.flush();
     },
     onFocus() {
@@ -4128,7 +4201,7 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
     // Noop
     onChange(updatedValue) {
       const prevValue = this.value;
-      update((draft) => {
+      this._update((draft) => {
         draft.errors = [];
         draft.validationAsyncState.messages = {};
         draft.value = updatedValue;
@@ -4149,8 +4222,11 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
       return this.value;
     },
     validate() {
-      const messages = getAndSetValidationErrors(this.getLocalValue());
-      return messages.length === 0;
+      const errors = getValidationErrors(this.getLocalValue());
+      this._update((draft) => {
+        draft.errors = errors;
+      });
+      return errors.length === 0;
     }
   }, rest);
   if (performRefresh) {
@@ -4161,12 +4237,12 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
     return __spreadProps(__spreadValues({}, inputComponent), {
       onBlur() {
         if (this.validate()) {
-          persist(this.persistedState, this.getLocalValue()).catch(() => {
+          persist(this, this.getLocalValue()).catch(() => {
           });
         }
       },
       async getSubmittableValue() {
-        return persist(this.persistedState, this.getLocalValue());
+        return persist(this, this.getLocalValue());
       },
       getSubmittableValueSync() {
         return this.persistedState.lastResponse;
@@ -4184,7 +4260,7 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
       onChange(updatedValue) {
         inputComponent.onChange.call(this, updatedValue);
         if (getValidationErrors(updatedValue).length === 0) {
-          validateAsync(this.validationAsyncState, updatedValue);
+          validateAsync(this, updatedValue);
         }
         if (!updatedValue) {
           validateAsync.cancel();
@@ -4322,9 +4398,9 @@ var createRepeatableComponent = (repeatableProps, updateComponent) => {
     "createEditableComponent",
     "summariser"
   ]);
-  const update = getInputUpdateFunction(uid, updateComponent);
+  const update = getInputUpdateFunction(updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
-  return __spreadProps(__spreadValues({
+  const repeatableComponent = __spreadProps(__spreadValues({
     uid,
     id,
     type: "repeatable",
@@ -4338,8 +4414,11 @@ var createRepeatableComponent = (repeatableProps, updateComponent) => {
       image: summary == null ? void 0 : summary.defaultImage
     }
   }, componentProps), {
+    _update(updateFn) {
+      update(this, updateFn);
+    },
     onEdit(itemIndex) {
-      update((draft) => {
+      this._update((draft) => {
         draft.editableComponent = createEditableComponent(
           draft.components[itemIndex].getLocalValue()
         );
@@ -4347,7 +4426,7 @@ var createRepeatableComponent = (repeatableProps, updateComponent) => {
       });
     },
     onAdd() {
-      update((draft) => {
+      this._update((draft) => {
         draft.editableComponent = createEditableComponent(null);
         draft.editableIndex = null;
         draft.errors = [];
@@ -4359,7 +4438,7 @@ var createRepeatableComponent = (repeatableProps, updateComponent) => {
       if (!isValid) {
         return false;
       }
-      update((draft) => {
+      this._update((draft) => {
         if (draft.editableComponent === null) {
           return;
         }
@@ -4378,7 +4457,7 @@ var createRepeatableComponent = (repeatableProps, updateComponent) => {
       return true;
     },
     onRemove() {
-      update((draft) => {
+      this._update((draft) => {
         if (draft.editableIndex === null) {
           return;
         }
@@ -4406,12 +4485,13 @@ var createRepeatableComponent = (repeatableProps, updateComponent) => {
     validate() {
       const messages = getValidationErrors(this.getLocalValue());
       const childComponentsValid = validateComponents(this.getChildren());
-      update((draft) => {
+      this._update((draft) => {
         draft.errors = messages;
       });
       return messages.length === 0 && childComponentsValid;
     }
   });
+  return repeatableComponent;
 };
 
 // src/revamp/domain/mappers/schema/arraySchemaToComponent/arraySchemaToRepeatableComponent.ts
@@ -4511,30 +4591,26 @@ var createMultiUploadInputComponent = (uploadInputProps, updateComponent) => {
     "onValueChange",
     "summariser"
   ]);
-  const update = getInputUpdateFunction(uid, updateComponent);
+  const update = getInputUpdateFunction(updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
   const getFileValidationErrors = getLocalValueValidator(fileChecks);
-  const getAndSetValidationErrors = (currentValue) => {
-    const messages = getValidationErrors(currentValue);
-    update((draft) => {
-      draft.errors = messages;
-    });
-    return messages;
-  };
   const uploadComponent = __spreadValues({
     type: "multi-upload",
     uid,
     id,
     format: "base64",
     files: [],
+    _update(updateFn) {
+      update(this, updateFn);
+    },
     onBlur() {
-      getAndSetValidationErrors(this.getLocalValue());
+      this.validate();
     },
     onFocus() {
     },
     // Noop
     async onRemoveFile(index) {
-      update((draft) => {
+      this._update((draft) => {
         draft.value.splice(index, 1);
         draft.files.splice(index, 1);
       });
@@ -4542,7 +4618,7 @@ var createMultiUploadInputComponent = (uploadInputProps, updateComponent) => {
     async onInsertFile(index, file) {
       const fileErrors = getFileValidationErrors(file);
       const fileId = getRandomId();
-      update((draft) => {
+      this._update((draft) => {
         draft.value.splice(index, 0, file);
         draft.files.splice(index, 0, { file, id: fileId, errors: fileErrors });
         draft.errors = [];
@@ -4564,8 +4640,11 @@ var createMultiUploadInputComponent = (uploadInputProps, updateComponent) => {
       return this.value;
     },
     validate() {
-      const messages = getAndSetValidationErrors(this.getLocalValue());
-      return messages.length === 0 && this.files.every(({ errors }) => errors.length === 0);
+      const errorMsgs = getValidationErrors(this.getLocalValue());
+      this._update((draft) => {
+        draft.errors = errorMsgs;
+      });
+      return errorMsgs.length === 0 && this.files.every(({ errors }) => errors.length === 0);
     }
   }, rest);
   if (!performPersistAsync) {
@@ -4577,7 +4656,7 @@ var createMultiUploadInputComponent = (uploadInputProps, updateComponent) => {
     async onInsertFile(index, file) {
       const fileId = await uploadComponent.onInsertFile.call(this, index, file);
       const submission = format === "blob" ? file : await toBase64(file);
-      await persist(index, submission);
+      await persist(this, index, submission);
       onValueChange();
       return fileId;
     },
@@ -4585,7 +4664,7 @@ var createMultiUploadInputComponent = (uploadInputProps, updateComponent) => {
       var _a2;
       await uploadComponent.onRemoveFile.call(this, index);
       (_a2 = this.persistedState[index]) == null ? void 0 : _a2.abortController.abort();
-      update((draft) => {
+      this._update((draft) => {
         draft.persistedState = draft.persistedState.splice(index, 1);
       });
     },
@@ -4691,17 +4770,10 @@ var createMultiSelectComponent = (multiSelectProps, updateComponent) => {
     "performRefresh",
     "onValueChange"
   ]);
-  const update = getInputUpdateFunction(uid, updateComponent);
+  const update = getInputUpdateFunction(updateComponent);
   const children = options.map((option) => option.component);
   const selectedIndices = getInitialModelIndices(initialValue, children);
   const getValidationErrors = getLocalValueValidator(checks);
-  const getAndSetValidationErrors = (currentValue) => {
-    const messages = getValidationErrors(currentValue);
-    update((draft) => {
-      draft.errors = messages;
-    });
-    return messages;
-  };
   const inputComponent = __spreadProps(__spreadValues({
     uid,
     type: "multi-select",
@@ -4710,14 +4782,20 @@ var createMultiSelectComponent = (multiSelectProps, updateComponent) => {
     selectedIndices,
     value: null
   }, rest), {
+    _update(updateFn) {
+      update(this, updateFn);
+    },
     onSelect(indices) {
-      update((draft) => {
+      this._update((draft) => {
         draft.selectedIndices = indices;
         draft.errors = [];
       });
       performRefresh == null ? void 0 : performRefresh();
       onValueChange();
-      getAndSetValidationErrors(this.getLocalValue());
+      const errors = getValidationErrors(this.getLocalValue());
+      this._update((draft) => {
+        draft.errors = errors;
+      });
     },
     onBlur() {
     },
@@ -4730,8 +4808,11 @@ var createMultiSelectComponent = (multiSelectProps, updateComponent) => {
       return (_b = (_a2 = this.getSelectedChildren()) == null ? void 0 : _a2.map((child) => child.getLocalValue())) != null ? _b : null;
     },
     validate() {
-      const messages = getAndSetValidationErrors(this.getLocalValue());
-      return messages.length === 0;
+      const errors = getValidationErrors(this.getLocalValue());
+      this._update((draft) => {
+        draft.errors = errors;
+      });
+      return errors.length === 0;
     },
     async getSubmittableValue() {
       const selected = this.getSelectedChildren();
@@ -4761,7 +4842,7 @@ var createMultiSelectComponent = (multiSelectProps, updateComponent) => {
       onSelect(indices) {
         inputComponent.onSelect.call(this, indices);
         if (this.validate()) {
-          validateAsync(this.validationAsyncState, this.getLocalValue()).catch(() => {
+          validateAsync(this, this.getLocalValue()).catch(() => {
           });
         }
       }
@@ -4962,13 +5043,16 @@ var createBooleanInputComponent = (booleanInputProps, updateComponent) => {
     "onValueChange",
     "summariser"
   ]);
-  const update = getInputUpdateFunction(uid, updateComponent);
+  const update = getInputUpdateFunction(updateComponent);
   const booleanComponent = __spreadValues({
     type: "boolean",
     uid,
     id,
     autoComplete: "",
     value,
+    _update(updateFn) {
+      update(this, updateFn);
+    },
     onBlur() {
     },
     // Noop
@@ -4976,7 +5060,7 @@ var createBooleanInputComponent = (booleanInputProps, updateComponent) => {
     },
     // Noop
     onChange(updatedValue) {
-      update((draft) => {
+      this._update((draft) => {
         draft.errors = [];
         draft.value = updatedValue;
       });
@@ -5005,11 +5089,11 @@ var createBooleanInputComponent = (booleanInputProps, updateComponent) => {
     return __spreadProps(__spreadValues({}, booleanComponent), {
       onChange(updatedValue) {
         booleanComponent.onChange.call(this, updatedValue);
-        persist(this.persistedState, this.getLocalValue()).catch(() => {
+        persist(this, this.getLocalValue()).catch(() => {
         });
       },
       async getSubmittableValue() {
-        return persist(this.persistedState, this.getLocalValue());
+        return persist(this, this.getLocalValue());
       },
       getSubmittableValueSync() {
         return this.persistedState.lastResponse;
@@ -5021,7 +5105,7 @@ var createBooleanInputComponent = (booleanInputProps, updateComponent) => {
     return __spreadProps(__spreadValues({}, booleanComponent), {
       onChange(updatedValue) {
         booleanComponent.onChange.call(this, updatedValue);
-        validateAsync(this.validationAsyncState, this.getLocalValue()).catch(() => {
+        validateAsync(this, this.getLocalValue()).catch(() => {
         });
       }
     });
@@ -5466,9 +5550,9 @@ var getOrientationControl = ({
 var DEBOUNCE_TIME = 400;
 var createSearchComponent = (searchProps, performSearch, onBehavior, updateComponent) => {
   const { uid, control, emptyMessage, margin, title } = searchProps;
-  const update = getInputUpdateFunction(uid, updateComponent);
+  const update = getInputUpdateFunction(updateComponent);
   let abortController = new AbortController();
-  const search = (query, searchConfig) => {
+  const search = (component2, query, searchConfig) => {
     abortController.abort();
     abortController = new AbortController();
     const { signal } = abortController;
@@ -5478,7 +5562,7 @@ var createSearchComponent = (searchProps, performSearch, onBehavior, updateCompo
       config: searchConfig
     }).then((results) => {
       if (!signal.aborted) {
-        update((draft) => {
+        update(component2, (draft) => {
           draft.results = results;
           draft.isLoading = false;
           draft.error = void 0;
@@ -5486,33 +5570,15 @@ var createSearchComponent = (searchProps, performSearch, onBehavior, updateCompo
       }
     }).catch(() => {
       if (!signal.aborted) {
-        update((draft) => {
+        update(component2, (draft) => {
           draft.error = "No response";
           draft.isLoading = false;
         });
       }
     });
   };
-  const onSelect = ({ type, value }) => {
-    if (type === "action") {
-      void onBehavior({ type: "action", action: value });
-    } else {
-      update((draft) => {
-        draft.query = value.query;
-        draft.isLoading = true;
-      });
-      search(value.query, { method: value.method, param: value.param, url: value.url });
-    }
-  };
   const debouncedSearch = debounce(search, DEBOUNCE_TIME);
-  const onChange = (query) => {
-    update((draft) => {
-      draft.query = query;
-      draft.isLoading = true;
-    });
-    debouncedSearch(query.trim());
-  };
-  return {
+  const component = {
     type: "search",
     uid,
     control,
@@ -5522,15 +5588,39 @@ var createSearchComponent = (searchProps, performSearch, onBehavior, updateCompo
     isLoading: false,
     query: "",
     results: [],
+    _update(updateFn) {
+      update(this, updateFn);
+    },
     getSubmittableValue: async () => null,
     getSubmittableValueSync: () => null,
     getLocalValue: () => null,
     getSummary: () => ({}),
     // Noop
     validate: () => true,
-    onChange,
-    onSelect
+    onChange(query) {
+      this._update((draft) => {
+        draft.query = query;
+        draft.isLoading = true;
+      });
+      debouncedSearch(this, query.trim());
+    },
+    onSelect({ type, value }) {
+      if (type === "action") {
+        void onBehavior({ type: "action", action: value });
+      } else {
+        this._update((draft) => {
+          draft.query = value.query;
+          draft.isLoading = true;
+        });
+        search(this, value.query, {
+          method: value.method,
+          param: value.param,
+          url: value.url
+        });
+      }
+    }
   };
+  return component;
 };
 
 // src/revamp/domain/features/search/getPerformSearchFunction.ts
@@ -5843,7 +5933,7 @@ var mapStepToComponent = (_a) => {
 };
 
 // src/revamp/flow/getResponseType.ts
-var responseTypes = ["step", "action", "exit"];
+var responseTypes = ["step", "action", "exit", "modal"];
 var getResponseType = async (response) => {
   assertResponseIsValid(response);
   const headerResponseType = getResponseTypeFromHeader(response);
@@ -5871,7 +5961,7 @@ var getResponseTypeFromHeader = (response) => {
 function assertDFResponseType(type) {
   if (!responseTypes.includes(type)) {
     throw new Error(
-      "Unsupported X-Df-Response-Type. Allowed values are 'step', 'action', 'exit', 'error'."
+      "Unsupported X-Df-Response-Type. Allowed values are 'step', 'action', 'exit', 'error', 'modal'."
     );
   }
 }
@@ -6026,6 +6116,10 @@ var executeSubmission = async (props) => {
           trackSubmissionEvent("Action Succeeded", { actionId });
           return await triggerAction(body.action, null, false);
         }
+        case "modal": {
+          assertModalResponseBody(body);
+          return { type: "behavior", behavior: __spreadProps(__spreadValues({}, body), { type: "modal" }) };
+        }
         default: {
           throw new Error(`Unsupported response type: ${String(responseType)}`);
         }
@@ -6260,29 +6354,6 @@ var formatDateOptions = {
   dateStyle: "long"
 };
 
-// src/revamp/utils/findComponent.ts
-var findComponent = (components, id, logEvent) => {
-  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}`);
-  }
-  logEvent("error", "Failed to find domain layer component", {
-    componentUid: id,
-    componentsTree: flattened.map((component) => component.uid)
-  });
-  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
 var import_react2 = require("react");
 function useStableCallback(handler) {
@@ -6293,6 +6364,55 @@ function useStableCallback(handler) {
   return (0, import_react2.useCallback)((...args) => ref.current ? ref.current(...args) : null, []);
 }
 
+// src/revamp/domain/components/ModalContentComponent.ts
+var createModalContentComponent = (modalProps, updateComponent) => {
+  const update = getInputUpdateFunction(updateComponent);
+  const modalContentComponent = __spreadProps(__spreadValues({
+    type: "modal-content",
+    open: true
+  }, modalProps), {
+    _update(updateFn) {
+      update(this, updateFn);
+    },
+    getChildren() {
+      return this.components;
+    },
+    getLocalValue() {
+      return getLocalValues(this.getChildren());
+    },
+    async getSubmittableValue() {
+      return getSubmittableData(this.getChildren());
+    },
+    getSubmittableValueSync() {
+      return getSubmittableDataSync(this.getChildren());
+    },
+    getSummary() {
+      return summariseFromChildren(this.getChildren());
+    },
+    validate() {
+      return validateComponents(this.getChildren());
+    },
+    close() {
+      update(this, (draft) => {
+        draft.open = false;
+      });
+    }
+  });
+  return modalContentComponent;
+};
+
+// src/revamp/domain/mappers/layout/modalToContent.ts
+var modalToContent = (uid, { content, title }, mapperProps) => createModalContentComponent(
+  {
+    uid: `${uid}-modal-${getRandomId()}`,
+    title,
+    components: content.map(
+      (component, index) => mapLayoutToComponent(`${uid}.modal-${index}`, component, mapperProps)
+    )
+  },
+  mapperProps.updateComponent
+);
+
 // src/revamp/useDynamicFlowCore.tsx
 function useDynamicFlowCore(props) {
   const _a = props, { flowId, initialAction, initialStep, displayStepTitle = true } = _a, rest = __objRest(_a, ["flowId", "initialAction", "initialStep", "displayStepTitle"]);
@@ -6309,15 +6429,7 @@ function useDynamicFlowCore(props) {
     [formatMessage, locale]
   );
   const rerender = useRerender();
-  const rootComponentRef = (0, import_react3.useRef)(createRootDomainComponent());
-  const updateComponent = (0, import_react3.useCallback)(
-    (id, update) => {
-      update(findComponent([rootComponentRef.current], id, logEvent));
-      rerender();
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
+  const rootComponentRef = (0, import_react3.useRef)(createRootDomainComponent(rerender));
   const stepCount = (0, import_react3.useRef)(0);
   const stepRef = (0, import_react3.useRef)(initialStep != null ? initialStep : null);
   const etagRef = (0, import_react3.useRef)(null);
@@ -6350,6 +6462,20 @@ function useDynamicFlowCore(props) {
     var _a2;
     initialiseWithStep(newStep, etag, (_a2 = rootComponentRef.current.getLocalValue()) != null ? _a2 : null);
   }, []);
+  const getMapperProps = () => ({
+    uid: `${rootComponentRef.current.uid}:${stepCount.current}`,
+    displayStepTitle,
+    loadingState: "idle",
+    updateComponent: () => rerender(),
+    getErrorMessageFunctions,
+    trackEvent,
+    logEvent,
+    httpClient,
+    onBehavior,
+    onRefresh,
+    onPoll,
+    onValueChange
+  });
   const initialiseWithStep = (0, import_react3.useCallback)(
     (newStep, etag, localValue) => {
       rootComponentRef.current.stop();
@@ -6362,25 +6488,11 @@ function useDynamicFlowCore(props) {
         });
       }
       try {
-        const newStepComponent = mapStepToComponent({
-          uid: `${rootComponentRef.current.uid}:${stepCount.current}`,
+        const newStepComponent = mapStepToComponent(__spreadValues({
           stepLocalValue: localValue,
-          step: newStep,
-          displayStepTitle,
-          loadingState: "idle",
-          updateComponent,
-          getErrorMessageFunctions,
-          trackEvent,
-          logEvent,
-          httpClient,
-          onBehavior,
-          onRefresh,
-          onPoll,
-          onValueChange
-        });
-        updateComponent(rootComponentRef.current.uid, (draft) => {
-          draft.stepComponent = newStepComponent;
-        });
+          step: newStep
+        }, getMapperProps()));
+        rootComponentRef.current.setStep(newStepComponent);
       } catch (error) {
         closeWithError(error);
       }
@@ -6432,6 +6544,7 @@ function useDynamicFlowCore(props) {
   const onBehavior = (0, import_react3.useCallback)(async (behavior) => {
     switch (behavior.type) {
       case "action": {
+        rootComponentRef.current.dismissAllModals();
         try {
           const { action } = behavior;
           await rootComponentRef.current.getSubmittableValue();
@@ -6451,10 +6564,20 @@ function useDynamicFlowCore(props) {
         onLink(behavior.url);
         break;
       }
-      // case 'modal':
-      //   return undefined;
-      // case 'dismiss':
-      //   return undefined;
+      case "modal":
+        if (stepRef.current) {
+          rootComponentRef.current.showModal(
+            modalToContent(rootComponentRef.current.uid, behavior, __spreadValues({
+              step: stepRef.current,
+              stepLocalValue: rootComponentRef.current.getLocalValue()
+            }, getMapperProps()))
+          );
+        }
+        rootComponentRef.current.setLoadingState("idle");
+        break;
+      case "dismiss":
+        rootComponentRef.current.dismissModal();
+        break;
       case "none":
         break;
     }
@@ -6519,6 +6642,11 @@ function useDynamicFlowCore(props) {
           void onRefresh(void 0, refreshUrl, errors);
           break;
         }
+        case "behavior": {
+          void onBehavior(command.behavior);
+          rootComponentRef.current.setLoadingState("idle");
+          break;
+        }
       }
     } catch (error) {
       closeWithError(error);